/*===================== TABLE OF CONTENT =======================
1. General Styling
2. Cross Browser Compatibility
3. Header Style
4. Sticky Header
5. Toggle Header
6. Sideheader
7. Mega Menu
8. Dropdown
9. Responsive Header
10. Slides
11. Services
12. Creative Section
13. Fun Facts
14. Portfolio
15. Team
16. Big Carousel
17. Mockup Section
18. Agency Details
19. Blog Posts
20. Sponsors
21. Professional Team
22. Skills
23. Mockup Section Style 2
24. Product Samples
25. Price Table 
26. CEO Message
27. Modern Blog
28. Add
29. Masonary Products
30. Parallax Text
31. Services Carousel
32. Photography
33. Sale Box
34. Filter Style 3
35. Sponsors Carousel
36. Work Process
37. Simple Text
38. Skills
39. Support Team Carousel
40. Toggle
41. Tabs 
42. Creative Blog
43. Traditional Services
44. Mockup Parallax
45. Toggles Style 3
46. Tabs Style 2
47. Testimonials Carousel
48. Innovative Services
49. Team Tabbers
50. Mockup Iconic Features
51. Video Subscribe
52. Simplest Blog
53. Simple Parallax Text
54. Modern Image
55. Affiliates Carousel
56. Contact Box
57. Fancy Form
58. Creative Image
59. Perfect Team
60. Simple Banner
61. Projects
62. Reviews Carousel
63. Banner Links
64. Simple Text Post
65. Simple Services Style2
66. Page Style 2
67. Innovative Image
68. Company CEO
69. Special Services
70. Filter Style 4
71. Traditional Blog
72. Fancy Form Style 2
73. Videos Carousel
74. Filter Style 5
75. Pagetop
76. Simple Texty
77. Work Process Style2
78. Fancy Team
79. Style 4 Toggle Style
80. Skills Style 3
81. Tabs Style 3
82. Work Process Style 3
83. Simple Banner Style 2
84. Office Images
85. Reviews Carousel Style 2
86. Company History
87. Logos List
88. Fancy Reviews Carousel
89. Contact Page
90. Contact Info
91. Fancy Posts
92. Traditional Parallax Text
93. Fancy Reviews Carousel
94. Products Page
95. Single Product Page
96. Pagination
97. Sidebar
98. Cart Page
99. Checkout Page
100. FAQ'S Page
101. Single Project Page
102. About Project
103. Single Post
104. Team Detail Page
105. Footer
106. Error Page
107. Comming Soon Page
108. ISOTOPE STYLING
109. SELECT2 PLUGIN STYLING
110. OWL CAROUSEL STYLING
111. RANGE SLIDER

=============================================================*/

/*=============== Fonts Used Playfair Display, Montserrat and Lato ===================*/
@import url(https://fonts.googleapis.com/css?family=Lato:400,100,100italic,300,300italic,400italic,700,700italic,900,900italic);
@import url(https://fonts.googleapis.com/css?family=Hind:400,300,500,700,600);  
@import url(https://fonts.googleapis.com/css?family=Poppins:400,300,500,700,600);
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(https://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,600italic,600,700);
/*=============== General Styling ===================*/
html, body{overflow-x:hidden;}
body{
    float:left;
    width:100%;
    font-family:hind;
    letter-spacing:0.3px;
    position:relative;
}
h1,h2,h3,h4,h5,h6{
    font-family:poppins;
    color:#272727;
}
p{
    font-family:hind;
    color:#838383;
    line-height:26px;
    letter-spacing:0.3px;
}
ul li,
ol li{
    color:#838383;
}
a:hover,
a:focus{
    text-decoration:none;
    outline:none;
}
.theme-layout {
    float: left;
    overflow: hidden;
    position: relative;
    width: 100%;
}
.theme-layout.boxed{
    background:none repeat scroll 0 0 #FFFFFF;
    float:none;
    margin:0 auto;
    overflow:hidden;
    position:relative;
    z-index:1;
    width:1230px;
    -webkit-box-shadow:0 0 6px #000000;
    -moz-box-shadow:0 0 6px #000000;
    -ms-box-shadow:0 0 6px #000000;
    -o-box-shadow:0 0 6px #000000;
    box-shadow:0 0 6px #000000;
}
section{
    float:left;
    position:relative;
    width:100%;
}
.block{
    float:left;
    width:100%;
    padding:60px 0;
    position:relative;z-index:1;
}
.block.short-space {padding:30px 0}
.block.extra-gap {padding:120px 0 200px}
.block.less-spacing{padding:70px 0}
.block.less-spacing2{padding:90px 0}
.block .container{padding:0;}
.container{padding:0;}
.block.remove-gap{padding-top:0;}
.block.no-padding{padding:0;}
.block.remove-bottom{padding-bottom:0;}
.block.gray,.gray{background-color:#fbfbfb;}
.block.dark{background:#181818}
.block.dark2{background:#2c2a2a}
.block.gray2,.gray2{background-color:#ecf1f5;}
.overlap{
    margin-top:-150px;
    z-index:2;
}
.remove-ext{
    float:left;
    margin-bottom:-30px;
    width:100%;
}
iframe{
    width:100%;
    border:0;
}
.parallax,.fixed-bg{
    background-size:cover!important;
    height:100%;
    width:100%;
    margin:0;
    position:absolute;
    left:0;
    top:0;
    z-index:-1;
}
.fixed-bg{
    background-attachment:fixed !important;
    background-size:cover!important;
}
.parallax.still {background-position: 0 0 !important;}
.parallax.png {
    background-position: 0 center !important;
    background-size: auto auto !important;
}
.blackish:before,.whitish:before{
    background:none repeat scroll 0 0 #101010;
    content:"";
    height:100%;
    left:0;
    opacity:0.63;
    position:absolute;
    top:0;
    width:100%;
    z-index:0;
}
.coloured:before{opacity:0.9;}
.whitish:before{
    background-color:#FFF;
    opacity:0.92;
}
.block.boxed-layer {padding: 110px 0;}
.boxed-layer::before {
    background-clip: content-box;
    padding: 30px;
}
.white-wrapper {
    float: left;
    width: 100%;
    padding: 100px;
    background:rgba(255, 255, 255, 0.9);
}
.parallax.half {width: 50%;}
.parallax.half:nth-child(2n) {left: 50%;}
.fancy-cols > div { padding: 110px 120px;}
iframe{
    border:0;
    width:100%;
    float:left;
}
a:hover,
a:focus{color:unset;}
.poptrox-overlay{z-index:10000000000!important}
/*=============== Cross Browser Compatibility ===================*/
.social-links a ,
nav ul li a,
.menu-btns a,
nav ul li:before,
.service > span,
.button-set > a:hover,
.service:before,
.toggle-item h3:before,
.toggle-item h3,
.toggle-item h3 i,
.option-set li a:after,
.option-set li a,
.portfolio:before,
.portfolio-hover > span a,
.portfolio-hover > h4,
.portfolio-hover > i,
.member-img > a,
.member-img:before,
.big-slide-text  a.play-circle,
.icon-btn,.icon-btn i,
.simple-btn,
.detail-box > a,
.meta > li a,
.post-infos a,
.post-img-video:before,
.post-img-video a,
.dark-socials > a,
.tagclouds > a,
.bottom-footer li a,
.pro-member:before,
.product-name-inner > h5 a,
.product-links a,
.product-sample:before,
.product-name-inner,
.product-name-inner h5,
.product-name-inner span,
.dark-btn,
.modern-author a,
.modern-post > h4 a,
.add img,
.product-btns,
.product > h5 a,
.product-img > img,
.masonary,
.masonary3,
.parallax-text > a,
.coloured-btn,
.big-product:before,
.services-carousel .owl-dots .owl-dot,
.transparent-btn,
.fancy-product-name > h4 a,
.fancy-product-btns a,
.fancy-product > img,
.sponsors-carousel .owl-nav > div,
.sponsors-carousel .owl-nav > div:before,
.work-img > span,
.work-img img,
.support-member:before,
.support-team-carousel .owl-dots .owl-dot,
.tabs .nav li a,
.tabs .nav li,
.tabs .nav li a:after,
.tabs .nav li a:before,
.tabs .nav li a i,
.creative-post-img > span a,
.creative-post-detail > h4 a,
.testimonials-carousel .owl-dot,
.light-social > a,
.team-selectors > li a:before,
.team-selectors > li a:after,
.simple-post-detail > h4 a,
.modern-img:before,
.affiliates-carousel .owl-nav > div,
.affiliates-carousel .owl-nav > div:before,
.creative-hover > span a,
.creative-image:before,
.creative-image > img,
.perfect-member > h5 a,
.project:before,
.sponsor.style2 li,
.banner-link > a,
.banner-link > img,
.innovative-links a,
.innovative-image:before,
.header-btns > a,
.sideheader ul li a,
.special-service,
.border-btn,
.intro-widget > a,
.photos-carousel .owl-nav > div,
.pagetop ul li a,
.fancy-member:before,
.style4 .toggle-item,
.office-thumbs .owl-nav > div,
.office-thumbs .owl-nav > div:before,
.fancy-reviews-carousel .owl-dots > .owl-dot,
.fancy-post-detail > h4 a,
.news-detail > h4 a,
.widget li a,
.social-widget > a,
.fancy-post-img-carousel .owl-nav > div,
.fancy-post-img-carousel .owl-nav > div:hover,
.fancy-video:before,
.fancy-video .play-circle,
.popular-inner h6 a,
.product-tabs .nav li a,
.toggle.style5 .toggle-item h3 i,
.toggle.style5 .toggle-item,
.faqs-page .nav li a,
.tagcloud > a,
.share-post > a,
.comment-detail > a,
.price-table.style2 .package-table:before,
.rounded-price,
.price-table.style2 .package-table li,
.subscribtion button,
.rev_slider .ares .tp-bullet,
.rev_slider .ares .tp-bullet:before,
.menu-btns > form,
.header-btns > form,
.header-search.opened,
.header-search.opened:before,
.logo img,
.transparent-menu,
header.sticky nav,
.responsive-links{
    -webkit-transition:all 0.25s linear;
    -moz-transition:all 0.25s linear;
    -ms-transition:all 0.25s linear;
    -o-transition:all 0.25s linear;
    transition:all 0.25s linear;
}

.menu-btns a,
nav ul li:before, nav ul li a:before, nav ul li a:after,
.service > span,
.service:before,
.portfolio-hover > span a,
.member-img > a,
.big-slide-text  a.play-circle,
.list li:before,
a.play-circle2,
.post-detail > span,
.post-img-video > a,
.pro-member-hover > a,
.skill-round:before,
.skill-round,
.mockup-feature > span i,
.ceo-message > span img,
.ceo-message > span,
.modern-author > img,
.services-carousel .owl-dots .owl-dot,
.timer ul li,
.work-img,
.work-img:before,
.work-img img,
.work-img:after,
.support-team-carousel .owl-dots .owl-dot,
a.play-circle,
.testimonial-info img,
.testimonials-carousel .owl-dot,
.innovative-service > span,
.feature > span,
.modern-hover > a,
.creative-hover > span a,
.circular-progress,
.review > span,
.review > span img,
.reviews-carousel .owl-nav > div,
.innovative-links a,
.sideheader .dark-socials a,
.company-ceo > img,
.special-service-inner:before, .special-service-inner:after,
.gallery-slide a i,
.video-info .lightbox,
.videos-img-carousel .owl-nav > div,
.fancy-social > a,
.office-thumbs .owl-nav > div,
.history-column > span,
.history-column > span img,
.fancy-review-shape img,
.fancy-reviews-carousel .owl-dots > .owl-dot,
.widget li span,
.feature-post-carousel .owl-dot,
.product-color a,
.social-links.style2 > a,
.cart-page td span i,
.rounded-price,
.stay .dark-socials a,
.comming-soon-page .timer ul li,
.layer4,
.layer5,
.rev_slider .ares .tp-bullet:before{
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    -ms-border-radius:50%;
    -o-border-radius:50%;
    border-radius:50%;
}

.dark-socials > a,
.tagclouds > a,
.post-widget-img img,
.contactform > input, .contactform > textarea,
.contactform > button,
.photography > a,
.view-all > a,
.info-inner,
.banner-link > a,
.loadmore .dark-btn,
.special-service,
.photos-carousel .owl-nav > div{
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    -ms-border-radius:3px;
    -o-border-radius:3px;
    border-radius:3px;
}
/*=============== Header Style ===================*/
header {
    float: left;
    position: relative;
    width: 100%;
    z-index: 100000;
}
.topbar {
    background: #1f1f1f none repeat scroll 0 0;
    float: left;
    padding: 7px 0;
    width: 100%;
}
.social-links{float:left}
.social-links a {
    color: #4a4a4a;
    float: left;
    font-size: 14px;
    text-align: center;
    width: 30px;
}
.topbar-links {float:right}
.topbar-links > a {
    color: #969595;
    float: left;
    font-family: hind;
    font-size: 11px;
    line-height: 20px;
    padding-left: 30px;
    text-transform: uppercase;
}
.topbar-links > a i {margin-right: 5px}
.transparent-menu {
    border-bottom: 1px solid #919191;
    left: 0;
    position: relative;
    top: 100%;
    width: 100%;
}
.logo {
    display: inline-block;
    vertical-align: middle;
    width: 18%;
}
nav {
    //border-left: 1px solid #919191;
    //border-right: 1px solid #919191;
    display: inline-block;
    /*padding: 0 40px;*/
    text-align: right;
    vertical-align: middle;
    width: 80%;
}
.menu-btns {
    display: inline-block;
    margin-left:-8px;
    text-align: center;
    vertical-align: middle;
    width: 10%;
    position:relative;
}
nav > ul {
    float: left;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    width: 100%;
}
nav > ul > li {
    color: #000;
    display: inline-block;
    position:relative;
    font-size: 14px;
    font-weight: 700;
    /*text-shadow: black 0.1em 0.1em 0.2em;*/
}
nav > ul > li > a {
    color: inherit;
    float: left;
    padding: 40px 20px;
    position:relative;
}
.menu-btns a {
    color: #fff;
    display: inline-block;
    font-size: 12px;
    height: 33px;
    line-height: 33px;
    margin: 0 4px;
    text-align: center;
    width: 33px;
    position:relative;
}
.menu-btns a:hover{background:#FFF}
.header-search.opened,
.header-search.opened:hover{color:transparent;}
.header-search:before{
    color: #fff;
    content: "\f00d";
    font-family: fontawesome;
    font-size: 14px;
    height: 100%;
    line-height: 30px;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    -webkit-transform:scale(0);
    -moz-transform:scale(0);
    -ms-transform:scale(0);
    -o-transform:scale(0);
    transform:scale(0);
}
.header-search.opened:before{
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1);
    -o-transform:scale(1);
    transform:scale(1);
}
nav > ul > li:before, nav > ul > li > a:before, nav > ul > li > a:after {
    background: white none repeat scroll 0 0;
    content: "";
    height: 4px;
    margin-left: -10px;
    width: 4px;
    position: absolute;
    bottom: 33px;
    left: 50%;
    -webkit-transform:scale(0);
    -moz-transform:scale(0);
    -ms-transform:scale(0);
    -o-transform:scale(0);
    transform:scale(0);
}
nav > ul > li > a:before{
    -webkit-transition:all 0.3s ease 0.2s;
    -moz-transition:all 0.3s ease 0.2s;
    -ms-transition:all 0.3s ease 0.2s;
    -o-transition:all 0.3s ease 0.2s;
    transition:all 0.3s ease 0.2s;
}
nav > ul > li > a:after{
    left: auto;
    margin-left: 0;
    margin-right: -10px;
    right: 50%;
    -webkit-transition:all 0.3s ease 0.1s;
    -moz-transition:all 0.3s ease 0.1s;
    -ms-transition:all 0.3s ease 0.1s;
    -o-transition:all 0.3s ease 0.1s;
    transition:all 0.3s ease 0.1s;
}
nav > ul > li:before{
    bottom: 33px;
    left: 50%;
    margin-left: -2px;
}
nav > ul > li:hover:before, nav > ul > li:hover > a:before, nav > ul > li:hover > a:after{
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1);
    -o-transform:scale(1);
    transform:scale(1);
}
.style2 .transparent-menu {
    border: 0!important;
    padding-top: 40px;
}
.style2 nav {border:0}
.style2 nav > ul > li > a {
    font-family: montserrat;
    font-size: 14px;
    font-weight: 300;
    margin: 0 15px;
    padding: 30px 0;
}
.style2 nav > ul > li > a:before{
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border-bottom: 1px dashed;
    border-radius: 0;
    bottom: 3px;
    height: 2px;
    left: 0;
    margin: 0;
    top: auto;
    width: 100%;
}
.style2 nav > ul > li > a:after, .style2 nav > ul > li:before{display:none}
.menu-btns > form,
.header-btns > form{
    background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
    height: 40px;
    width: 350px;
    margin-top: 37px;
    position: absolute;
    top: 100%;
    right: 0;
    -webkit-transform: rotateX(90deg);
    -moz-transform: rotateX(90deg);
    -ms-transform: rotateX(90deg);
    -o-transform: rotateX(90deg);
    transform: rotateX(90deg);
}
.menu-btns > form.active,
.header-btns > form.active{
    -webkit-transform: rotateX(0);
    -moz-transform: rotateX(0);
    -ms-transform: rotateX(0);
    -o-transform: rotateX(0);
    transform: rotateX(0);
}
.menu-btns > form input,
.header-btns > form input{
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 0 none;
    color: #fff;
    font-family: lato;
    font-size: 12px;
    font-style: italic;
    height: 100%;
    padding: 10px 20px;
    width: 100%;
}
.menu-btns > form button,
.header-btns > form button{
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 0 none;
    color: #fff;
    height: 40px;
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
}
/*=============== Sticky Header  ===================*/
header.sticky {
    position: fixed;
    left: 0;
    top: 0;
}
header.sticky .transparent-menu nav > ul >  li > a{padding:20px 10px}
.logo img{max-width:250px}
header.sticky nav > ul > li:before,
header.sticky  nav > ul > li > a:before,
header.sticky  nav > ul > li > a:after{bottom:15px}
header.sticky .transparent-menu .logo img{max-width:100px}
header.sticky .transparent-menu {
    background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0;
    border-color: #535353;
}
header.sticky nav{border-color: #535353}
header.sticky.style2 .transparent-menu{padding-top:0}

/*=============== Toggle Header  ===================*/
header.toggle-header{padding:40px 100px}
.theme-layout.style2 header.toggle-header{padding:40px 0;}
.header-btns {
    display: table-cell;
    text-align: right;
    vertical-align: middle;
    position:relative;
    width: 100%;
}
.toggle-header .logo {
    display: table-cell;
    vertical-align: middle;
    width: auto;
}
.header-btns > a{
    color: #292929;
    display: inline-block;
    font-size: 20px;
    position:relative;
    margin-left: 50px;
}
/*=============== Sideheader  ===================*/
body,.sideheader{
    -webkit-transition: all 800ms cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */
    -webkit-transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -moz-transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -o-transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */
    -webkit-transition-timing-function: cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */
    -webkit-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -moz-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -o-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
    transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */    
}
body.move{padding-left:180px}
body.move section .block{
    -webkit-filter:blur(4px) grayscale(1);
    filter:blur(4px) grayscale(1);
    pointer-events:none;
}
.sideheader {
    background: transparent url("http://www.domihut.com/proxy.php?url=http%3A%2F%2Fwww.exclusivapiscinas.com.br%2Fstatic%2Fcss%2F..%2Fimages%2Fsideheader.jpg") no-repeat scroll 0 0 / cover ;
    height: 100%;
    overflow: auto;
    padding: 110px 70px;
    position: fixed;
    left: -380px;
    top: 0;
    width: 380px;
}
.sideheader.slidein{left:0}
.sideheader:before{
    background: black none repeat scroll 0 0 padding-box content-box;
    content: "";
    height: 100%;
    opacity: 0.8;
    padding: 10px;
    width: 100%;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
}
.sideheader .logo {
    display: unset;
    float: left;
    width: 100%;
    margin-bottom: 80px;
}
.sideheader ul {
    float: left;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    width: 100%;
}
.sideheader ul li {
    color: #fff;
    float: left;
    font-family: hind;
    font-size: 14px;
    font-weight: 600;
    position:relative;
    line-height: 25px;
    text-transform: uppercase;
    width: 100%;
}
.sideheader ul li a{color:inherit}
.sideheader ul ul {
    margin: 20px 0;
    padding-left: 20px;
    display:none;
}
.sideheader ul ul li {
    color: #c1c0c0;
    font-size: 13px;
    font-weight: 400;
    text-transform: capitalize;
}
.sideheader .dark-socials {
    border: 0 none;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 30px 70px 70px;
    position: absolute;
    text-align: center;
}
.sideheader .dark-socials a{
    background:rgba(46, 46, 46, 0.71);
    display: inline-block;
    float: none;
    margin: 0 2px;
}
.sideheader > ul {
    left: 0;
    max-height: 330px;
    overflow: auto;
    padding: 0 70px;
    position: absolute;
    top: 50%;
    width:100%!important;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.sideheader ul li.menu-item-has-children:before{
    color: #fff;
    content: "\f067";
    font-family: fontawesome;
    font-size: 11px;
    height: 30px;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    width: 30px;
}
.sideheader ul li.menu-item-has-children.active:before{content:"\f068"}
.theme-layout.style3{padding: 10px 10px 10px 380px}
.theme-layout.style3 .sideheader{left:0}
.theme-layout.style3 .block .container {
    padding: 0 15px;
    width:100%;
}

.sideheader.style2{background:none}
.sideheader.style2:before{opacity:1}
/*=============== Mega Menu ===================*/
.megamenu {
    background: transparent url("http://www.domihut.com/proxy.php?url=http%3A%2F%2Fwww.exclusivapiscinas.com.br%2Fstatic%2Fcss%2F..%2Fimages%2Fmegamenu.jpg") no-repeat scroll 0 0 / cover ;
    left: 0;
    padding: 30px 10px;
    position: absolute;
    top: 100%;
    visibility:hidden;
    opacity:0;
    text-align:left;
    -webkit-transform:translateY(100px);
    -moz-transform:translateY(100px);
    -ms-transform: translateY(100px);
    -o-transform: translateY(100px);
    transform: translateY(100px);
    -webkit-transition: all 800ms cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */
    -webkit-transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -moz-transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -o-transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */

    -webkit-transition-timing-function: cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */
    -webkit-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -moz-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -o-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
    transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */
}
nav ul li:hover .megamenu{
    opacity:1;
    visibility:visible;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
} 

.megamenu::before {
    background: #201f1f none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.88;
    position: absolute;
    top: 0;
    width: 100%;
}
.megamenu > div {border-right: 1px solid #343434}
.megamenu a {
    color: #b5b5b5;
    float: left;
    font-family: lato;
    font-size: 13px;
    letter-spacing: 0.2px;
    padding: 8px 12px;
    width: 100%;
    -webkit-transition: all 0.3s ease 0.5s;
    -moz-transition: all 0.3s ease 0.5s;
    -ms-transition: all 0.3s ease 0.5s;
    -o-transition: all 0.3s ease 0.5s;
    transition: all 0.3s ease 0.5s;
}
.megamenu > div:last-child {border:0 none}
.megamenu a:hover {
    background: #313131 none repeat scroll 0 0;
    -webkit-transition: all 0.2s linear 0s;
    -moz-transition: all 0.2s linear 0s;
    -ms-transition: all 0.2s linear 0s;
    -o-transition: all 0.2s linear 0s;
    transition: all 0.2s linear 0s;
}
/*=============== Dropdown ===================*/
nav ul li ul {
    background: #252525 none repeat scroll 0 0;
    left: 0;
    text-align:left;
    list-style: outside none none;
    margin: 0;
    padding:20px 0;
    position: absolute;
    top: 100%;
    width: 200px;
    visibility:hidden;
    opacity:0;
    -webkit-transform:translateY(100px);
    -moz-transform:translateY(100px);
    -ms-transform: translateY(100px);
    -o-transform: translateY(100px);
    transform: translateY(100px);
    -webkit-transition: all 800ms cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */
    -webkit-transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -moz-transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -o-transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */

    -webkit-transition-timing-function: cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */
    -webkit-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -moz-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -o-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
    transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */
}
nav ul li ul li ul{
    background:#313131;
    top:0;
    left:100%
}
nav ul li:hover > ul{
    opacity:1;
    visibility:visible;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
} 
nav ul li ul li {
    color: #b5b5b5;
    float: left;
    font-size: 13px;
    font-weight: 400;
    position:relative;
    line-height: 25px;
    padding:5px 20px;
    width: 100%;
}
nav ul li ul li a{color:inherit}
nav ul li ul li a i{margin-right:5px}
.has-dropdown:before{
    background: #fff none repeat scroll 0 0;
    content: "";
    height: 6px;
    margin-top: -3px;
    position: absolute;
    opacity:0;
    right:80px;
    top: 50%;
    width: 6px;
    -webkit-transition: all 800ms cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */
    -webkit-transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -moz-transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -o-transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */

    -webkit-transition-timing-function: cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */
    -webkit-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -moz-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -o-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
    transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */
}
.has-dropdown:hover:before{
    right: 20px;
    opacity:1;
}

/*=================== Responsive Header ====================*/
.responsive-header {
    float: left;
    position: relative;
    width: 100%;
    z-index:100000000;
    display:none;
}
.responsive-header .handle3{display:none}
.responsive-bar {
    background:#263271 none repeat scroll 0 0;
    display: table;
    width: 100%;
}
.responsive-bar > span {
    border: 0 none;
    color: #ffffff;
    cursor: pointer;
    display: table-cell;
    float: none;
    font-size: 24px;
    height: auto;
    line-height: 30px;
    text-align: center;
    vertical-align: middle;
    width: auto;
}
.responsive-bar .logo {
    display: table-cell;
    float: none;
    padding: 20px 0;
    text-align: center;
    width: 50%;
}
.responsive-bar .logo img {width: 120px;}
.responsive-links {
    background: #1e1e1e none repeat scroll 0 0;
    height: 100%;
    overflow-y:scroll;
    right:-220px;
    padding:30px 20px;
    position: fixed;
    top: 0;
    width:220px!important;
    z-index: 1000000000;
}
.responsive-links.other.slidein{right:0;}
.responsive-links.menu {
    left:-220px;
    right: auto;
}
.responsive-links.menu.slidein{left:0;}
.responsive-links ul {
    float: left;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    width: 100%;
}
.responsive-links ul li {
    border-bottom: 1px solid #303030;
    color: #ffffff;
    float: left;
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    padding: 10px 0;
    position: relative;
    width: 100%;
}
.responsive-links ul li:last-child{border:0;}
.responsive-links ul li a {color: inherit;}
.responsive-links ul li ul {
    display:none;
    margin-bottom: 10px;
    margin-top: 5px;
    padding: 10px;
}
.responsive-header .lang-selector > ul {
    top:100%;
    -webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    -ms-transform:rotate(0deg);
    -o-transform:rotate(0deg);
    transform:rotate(0deg);
}
.responsive-header .lang-selector > ul li span {padding:8px 0;}
.responsive-header .lang-selector > ul li {padding:0;}
.responsive-links ul li a i {margin-right: 10px;}

.responsive-links > form {
    background: #fff none repeat scroll 0 0;
    float: left;
    height: 50px;
    position: relative;
    width: 100%;
}
.responsive-links > form input {
    border: 0 none;
    float: left;
    font-size: 12px;
    font-style: italic;
    height: 100%;
    padding: 10px;
    width: 100%;
}
.responsive-links > form button {
    background: #d3d3d3 none repeat scroll 0 0;
    border: 0 none;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
}
.responsive-links.other {
    right: -300px;
    width: 300px !important;
}
.responsive-cart {
    float: left;
    width: 100%;
    margin-top: 30px;
    text-align: center;
    background: black;
    padding: 15px;
    font-size: 14px;
    color: #FFF;
    font-family: lato;
    font-size: 20xp;
    font-style: italic;
    text-transform: uppercase;
    font-weight: 700;
}
.responsive-links .topbar-links {
    float: left;
    margin-top: 20px;
    text-align: center;
    width: 100%;
}
.responsive-links .topbar-links a {
    display: inline-block;
    float: none;
    padding: 0 15px 10px;
}
.responsive-header .social-links {
    width: 100%;
    margin-bottom: 30px;
}
/*=============== Slides ===================*/
.layer1{
    font-family:poppins;
    color:#FFF;
}
.layer2{
    color:#FFF;
    font-family: poppins;
    font-weight:900;
}
.layer3{
    color:#FFF;
    font-family:crimson;
}
.layer4{
    font-family:crimson;
    border:2px solid;
    text-align:center;
}
.layer4:hover{
    color: #FFF;
    border-color:#FFF;
}
.layer5{
    color:#FFF;
    text-align: center;
}
.layer6{
    color: #FFF;
    font-family: montserrat;
    letter-spacing:1px;
    font-weight:900;
}
.layer7{
    color: #FFF;
    font-family: lato;
}
.layer8{
    color: #313131;
    font-family: montserrat;
    background: #FFF;
}
.layer8:hover{color: #FFF}
.layer9{color:#FFF}
.layer10{
    color:#FFF;
    font-weight:900;
    font-family: poppins;
    text-transform:uppercase;
}
.layer11{
    color:#FFF;
    font-family:hind;
    text-align:center;
}
.layer12{
    border:2px solid #FFF;
    color:#FFF;
    font-weight:700;
}
.layer12:hover{color:#FFF}
.layer13{
    color: #FFF;
    font-family:montserrat;
}
.layer13:hover{color: #FFF}
.layer14{
    font-family:poppins;
    color:#FFF;
}
.layer15{
    color:#FFF;
    font-family:poppins;
    text-transform:uppercase;
    font-weight:900;
}
.layer15 i{font-style:normal}
.layer16{
    color:#FFF;
    font-family:poppins;
    text-transform:uppercase;
}
.layer17{
    color:#FFF;
    font-family:poppins;
    font-weight:900;
}
.layer18{
        font-family:crimson;
        font-style: italic;
        color:#FFF;
        text-align:center;
}
.layer19{
    font-family:lato;
    font-weight:100;
    color:#FFF;
}
.layer20{
    color:#FFF;
    font-family: lato;
    font-weight:300;
    text-transform:uppercase;
}

.rev_slider .ares .tp-bullet {
    background: #000 none repeat scroll 0 0 padding-box content-box;
    border: 3.5px solid #ffffff;
    height: 11px;
    position: absolute;
    width: 11px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}
.rev_slider .ares .tp-bullet.selected {
    background-clip: content-box;
    border-color: transparent;
    height: 11px;
    margin-left: 0;
    margin-top: 2px;
    width: 11px;
}
.rev_slider .ares .tp-bullet:before{
    border: 2px solid #ffffff;
    content: "";
    height: 20px;
    left: -8px;
    position: absolute;
    top: -8px;
    width: 20px;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
}
.rev_slider .ares .tp-bullet.selected:before {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}
.rev_slider .ares .tp-bullet-title:after{display:none}
.rev_slider .ares .tp-bullet-title{
    background: black none repeat scroll 0 0;
    color: #fff;
    font-family: hind;
    font-size: 12px;
    padding: 4px 20px;
    top: -10px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
}
.rev_slider .ares .tp-bullet:hover,.rev_slider  .ares .tp-bullet.selected:hover{color:#FFF}
.rev_slider .ares .tp-bullet.selected:after {
    border-left: 3px solid #fff;
    border-right: 3px solid #fff;
    content: "";
    height: 2px;
    left: -13px;
    margin-top: -1px;
    position: absolute;
    top: 50%;
    width: 29px;
}
/*=============== Services ===================*/
.simple-title {
    float: left;
    margin: 0 20% 60px;
    text-align: center;
    width:60%;
}
.simple-title h2 {
    color: #393737;
    float: left;
    font-size: 40px;
    font-weight: 700;
    margin: 0 0 5px;
    width: 100%;
}
.simple-title > p {
    color: #858585;
    float: left;
    font-size: 16px;
    width: 100%;
}
.service {
    float: left;
    margin-bottom: 30px;
    padding: 0 10px 30px;
    position: relative;
    text-align: center;
    width: 100%;
}
.all-services {
    float: left;
    margin-bottom: -30px;
    width: 100%;
}
.service > span {
    border: 2px solid #eaeaea;
    color: #131313;
    display: inline-block;
    font-size: 42px;
    height: 81px;
    line-height:92px;
    margin-bottom: 20px;
    text-align: center;
    width: 81px;
}
.service:hover > span {
    -webkit-transform:translateY(-20px);
    -moz-transform:translateY(-20px);
    -ms-transform:translateY(-20px);
    -o-transform:translateY(-20px);
    transform:translateY(-20px);
}
.service:hover:before {
    margin-left: -20px;
    width: 40px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    border-radius: 20px;
}
.service h4 {
    color: #313131;
    float: left;
    font-family: hind;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.4px;
    margin: 0 0 10px;
    text-transform: uppercase;
    width: 100%;
}
.service:before{
    background: #f0f0f0;
    bottom: 0;
    content: "";
    height: 13px;
    left: 50%;
    margin-left: -6.5px;
    position: absolute;
    width: 13px;
}
.service > p {
    float: left;
    margin: 0;
    width: 100%;
}
.mockup {
    float: left;
    margin: 70px 0 40px;
    text-align: center;
    width: 100%;
}
.mockup img{max-width:100%}
.button-set {
    float: left;
    text-align: center;
    width: 100%;
}
.button-set > a {
    border: 2px solid #e7e7e7;
    color: #424242;
    display: inline-block;
    font-family: hind;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.4px;
    line-height: 22px;
    margin: 0 10px;
    padding: 15px 30px 12px;
    text-transform: uppercase;
}
.button-set > a:hover{color:#FFF}

/*=============== Creative Section ===================*/
.creative-section {
    float: left;
    width: 100%;
}
.creative-img {
    display: inline-block;
    vertical-align: middle;
    width: 50%;
}
.creative-detail {
    display: inline-block;
    margin-left: -4px;
    padding: 50px 70px;
    vertical-align: middle;
    width: 50%;
}
.creative-img > img {width:100%}
.creative-detail > span {
    color: #fff;
    float: left;
    font-family: lato;
    font-size: 17px;
    font-style: italic;
    letter-spacing: 3px;
    line-height: 17px;
    margin-bottom: 5px;
    width: 100%;
}
.creative-detail > h4 {
    color: #fff;
    float: left;
    font-size: 40px;
    font-weight: 700;
    margin: 5px 0 20px;
    width: 100%;
}
.creative-detail > p {
    color: #cccccc;
    float: left;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.8px;
    line-height: 24px;
    width: 100%;
}
.toggle {
    float: left;
    margin-top: 30px;
    width: 100%;
}
.toggle-item {
    float: left;
    width: 100%;
    padding:10px 0;
}
.toggle-item h3 {
    border-bottom: 1px solid #313131;
    color: #fff;
    float: left;
    font-family: lato;
    cursor:pointer;
    font-size: 14px;
    font-weight: 500;
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%;
}
.toggle-item h3 i {
    border: 1px solid #fff;
    border-radius: 50%;
    display: inline-block;
    height: 39px;
    line-height: 38px;
    margin-right: 20px;
    text-align: center;
    vertical-align: middle;
    width: 39px;
}
.toggle-item h3:before{
    background:#181818;
    content: "";
    height: 1px;
    width: 60px;
    position: absolute;
    bottom: -1px;
    left: 0;
}
.toggle-item h3.active i{color:#FFF}
.content {
    float: left;
    width: 100%;
}
.content p {
    color: #cccccc;
    float: left;
    font-family: hind;
    font-size: 14px;
    font-weight: 500;
    padding-left: 60px;
    width: 100%;
}
.toggle-item h3.active {border-bottom:1px solid transparent}
.toggle-item.activate {padding: 0}

.creative-detail .simple-btn {
    color: #fff;
    margin-top: 50px;
}

/*=============== Fun Facts ===================*/
.title {
    float: left;
    margin-bottom: 60px;
    padding-bottom: 25px;
    position: relative;
    text-align: center;
    width: 100%;
}
.title > h2 {
    color: #393838;
    float: left;
    font-size: 35px;
    font-weight: 700;
    margin: 0 0 5px;
    width: 100%;
}
.title > p {
    color: #929292;
    float: left;
    font-family: poppins;
    font-size: 16px;
    margin: 0;
    width: 100%;
}
.title::before {
    background: black none repeat scroll 0 0;
    bottom: 0;
    content: "";
    height: 3px;
    left: 50%;
    margin-left: -20px;
    position: absolute;
    width: 40px;
}

.fact {
    float: left;
    padding: 20px;
    position: relative;
    width: 100%;
}
.fact i {
    color: #efefef;
    font-size: 120px;
    height: 100%;
    left: 0;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: -1;
}
.fact strong {
    color: #2c2c2c;
    float: left;
    font-family: hind;
    font-size: 23px;
    margin-bottom: 10px;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
}
.count {
    color: #2c2c2c;
    float: left;
    font-family: lato;
    font-size: 45px;
    font-weight: 900;
    line-height: 40px;
    text-align: center;
    width: 100%;
}

/*=============== Portfolio ===================*/
.option-isotop {
    float: left;
    width: 100%;
    margin-bottom:60px;
    text-align: center;
}
.option-set{
    background:#fafafa;
    display: inline-block;
    list-style:outside none none;
    margin: 0 0 -10px;
    padding: 0 20px;
}
.option-set li {
    color: #2c2a2a;
    display: inline-block;
    font-family: hind;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 1.2px;
    margin-bottom: 10px;
}
.option-set li a {
    color: inherit;
    display: inline-block;
    font-size: inherit;
    margin: 0 10px;
    padding:13px 10px;
    position: relative;
}
.option-set li a:before{
    background:#2c2a2a;
    content: "";
    height:1px;
    width:5px;
    position:absolute;
    right:-10px;
    top:50%;
}
.option-set li:last-child a:before{display:none}
.option-set li a:after{
    border-bottom: 1px solid #bfbfbf;
    border-top: 1px solid #bfbfbf;
    content: "";
    opacity:0;
    height: 100%;
    width:0;
    position: absolute;
    right:50%;
    top:0;
}
.option-set li a:hover:after,
.option-set li a.selected:after{
    opacity:1;
    right:0;
    width:100%;
}
.masonary,
.masonary3 {
    float: left;
    width: 100%;
    margin-bottom:-30px;
}
.portfolio{
    float: left;
    position: relative;
    width: 100%;
    margin-bottom:30px;
}
.portfolio > img{width:100%}
.portfolio-hover {
    padding: 20px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    -webkit-transform:translateY(-50%);
    -moz-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    -o-transform:translateY(-50%);
    transform:translateY(-50%);
}
.portfolio-hover > span {
    float: left;
    margin-bottom: 10px;
    width: 100%;
}
.portfolio-hover > span a{
    background: black;
    color: #fff;
    display: inline-block;
    height: 45px;
    line-height: 45px;
    margin: 0 3px;
    text-align: center;
    width: 45px;
    -webkit-transform:scale(0);
    -moz-transform:scale(0);
    -ms-transform:scale(0);
    -o-transform:scale(0);
    transform:scale(0);
    -webkit-transition-delay:0.3s;
    -moz-transition-delay:0.3s;
    -ms-transition-delay:0.3s;
    -o-transition-delay:0.3s;
    transition-delay:0.3s;
}
.portfolio:hover .portfolio-hover > span a{
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1);
    -o-transform:scale(1);
    transform:scale(1);
}
.portfolio-hover > span a:hover{background:#FFF}
.portfolio-hover > span a:last-child{
    -webkit-transition-delay:0.5s;
    -moz-transition-delay:0.5s;
    -ms-transition-delay:0.5s;
    -o-transition-delay:0.5s;
    transition-delay:0.5s;
}
.portfolio-hover > h4 {
    color: #fff;
    float: left;
    font-family: hind;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 1.5px;
    margin: 0 0 5px;
    width: 100%;
    opacity:0;
    -webkit-transform:translateX(-100px);
    -moz-transform:translateX(-100px);
    -ms-transform:translateX(-100px);
    -o-transform:translateX(-100px);
    transform:translateX(-100px);
    -webkit-transition-delay:0.5s;
    -moz-transition-delay:0.5s;
    -ms-transition-delay:0.5s;
    -o-transition-delay:0.5s;
    transition-delay:0.5s;
}
.portfolio-hover > i {
    color: #fff;
    float: left;
    font-size: 14px;
    font-style: normal;
    width: 100%;
    opacity:0;
    -webkit-transform:translateX(100px);
    -moz-transform:translateX(100px);
    -ms-transform:translateX(100px);
    -o-transform:translateX(100px);
    transform:translateX(100px);
    -webkit-transition-delay:0.7s;
    -moz-transition-delay:0.7s;
    -ms-transition-delay:0.7s;
    -o-transition-delay:0.7s;
    transition-delay:0.7s;
}
.portfolio:hover  .portfolio-hover > h4,
.portfolio:hover  .portfolio-hover > i{
    opacity:1;
    -webkit-transform:translateX(0);
    -moz-transform:translateX(0);
    -ms-transform:translateX(0);
    -o-transform:translateX(0);
    transform:translateX(0);
}

.portfolio:before{
    background: #131313;
    content: "";
    opacity: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-transform:scale(0);
    -moz-transform:scale(0);
    -ms-transform:scale(0);
    -o-transform:scale(0);
    transform:scale(0);
}
.portfolio:hover:before{
    opacity: 0.88;
    -webkit-transform:scale(0.97);
    -moz-transform:scale(0.97);
    -ms-transform:scale(0.97);
    -o-transform:scale(0.97);
    transform:scale(0.97);
}
.no-gap{margin:0}
.no-gap .masonary,
.no-gap .masonary2,
.no-gap .masonary3{margin:0}
.no-gap .masonary > div{padding:0;}
.no-gap .masonary2 > div {padding:0;}
.narrow-gap{margin:0 -2px}
.narrow-gap .masonary2 > div {padding:2px;}
.no-gap .portfolio,
.no-gap .innovative-image{margin:0}
.remove-ext30{
    float:left;
    width:100%;
    margin-bottom:-30px;
}
/*=============== Team ===================*/
.member {
    float: left;
    width: 100%;
    margin-bottom: 30px;
}
.team {
    float: left;
    width: 100%;
    margin-bottom: -30px;
}
.member-img {
    float: left;
    position: relative;
    width: 100%;
}
.member-img:before{
    background:black;
    content: "";
    height: 100%;
    width:0;
    opacity: 0.3;
    position: absolute;
    left:50%;
    top: 0;
}
.member:hover .member-img:before{
    left:0;
    width:100%;
}
.member-img > img{width:100%}
.member-img > a{
    color: #fff;
    height: 40px;
    left: 50%;
    line-height: 40px;
    margin-left: -20px;
    margin-top: -20px;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 40px;
    -webkit-transform:scale(0);
    -moz-transform:scale(0);
    -ms-transform:scale(0);
    -o-transform:scale(0);
    transform:scale(0);
    -webkit-transition-delay: 0.2s;
    -moz-transition-delay: 0.2s;
    -ms-transition-delay: 0.2s;
    -o-transition-delay: 0.2s;
    transition-delay: 0.2s;
}
.member:hover .member-img > a{
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1);
    -o-transform:scale(1);
    transform:scale(1);
}
.member-name {
    border: 2px solid #f0f6f4;
    float: left;
    padding: 25px 30px;
    text-align: center;
    width: 100%;
}
.member-name h5 {
    color: #2c2c2c;
    float: left;
    font-family: hind;
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 5px;
    width: 100%;
}
.member-name > i {
    color: #2c2c2c;
    float: left;
    font-family: hind;
    font-size: 15px;
    font-style: normal;
    line-height: 14px;
    width: 100%;
}
/*=============== Big Carousel ===================*/
.big-carousel {
    float: left;
    width: 100%;
}
.big-slide {
    float: left;
    width: 100%;
}
.big-slide > img{width:100%}
.big-slide-text {
    text-align: center;
    position: absolute;
    right: 100px;
    top: 50%;
    width:670px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -i-transform: translateY(-50%);
    transform: translateY(-50%);
}
.big-slide-text > span{
    float:left;
    width:100%;
}
.big-slide-text  a.play-circle {
    border: 2px solid #fff;
    padding-left:5px;
    display: inline-block;
    font-size: 30px;
    height: 98px;
    line-height: 98px;
    width: 98px;
}
.big-slide-text > h4 {
    color: #fff;
    float: left;
    font-size: 40px;
    font-weight: 700;
    margin: 30px 0 10px;
    width: 100%;
}
.big-slide-text > p {
    color: #bcbcbc;
    float: left;
    font-size: 16px;
    margin-bottom: 40px;
    width: 100%;
}
.icon-btn{
    color: #fff;
    display: table;
    font-family: lato;
    font-size: 14px;
    font-weight: 600;
    text-align:center;
    letter-spacing: 0.5px;
    margin: 0 auto;
    padding: 0 0 0 20px;
    text-transform: uppercase;
}
.icon-btn:hover{background:#FFF}
.icon-btn i {
    background:#FFF;
    color: #393737;
    display: inline-block;
    font-size: 20px;
    line-height: 50px;
    margin-left: 20px;
    vertical-align: middle;
    width: 45px;
}
.icon-btn:hover i{color:#FFF}

.big-carousel .owl-nav,
.big-product-carousel .owl-nav {
    height:0;
    position: absolute;
    top: 50%;
    left: 0;
    width:100%;
}
.big-carousel .owl-nav > div,
.big-product-carousel .owl-nav > div{
    color: inherit;
    float: left;
    color:transparent;
    position: relative;
    z-index: 1;
    margin-top:-25px;
    width: 50px;
    height: 50px;
}
.big-carousel .owl-nav > div:before,
.big-product-carousel .owl-nav > div:before{
    color: #262626;
    content: "\f104";
    font-family: fontawesome;
    font-size: 34px;
    height: 100%;
    left:-10px;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
}
.big-carousel .owl-nav > div.owl-next:before,
.big-product-carousel .owl-nav > div.owl-next:before{
    content: "\f105";
    right:-10px;
    left:auto;
}
.big-carousel .owl-nav > div.owl-next,
.big-product-carousel .owl-nav > div.owl-next{float:right}
.big-carousel .owl-nav > div:after,
.big-product-carousel .owl-nav > div:after {
    background: white none repeat scroll 0 0;
    content: "";
    height: 140%;
    position: absolute;
    left: -65%;
    top: -20%;
    width: 140%;
    z-index: -1;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
.big-carousel .owl-nav > div.owl-next:after,
.big-product-carousel .owl-nav > div.owl-next:after{
    left: auto;
    right: -65%;
}

/*=============== Mockup Section ===================*/
.mockup-section {
    display: table;
    float: left;
    width: 100%;
}
.mockup-img {
    display: table-cell;
    vertical-align: middle;
}

.mockup-detail {
    display: table-cell;
    padding-left: 55px;
    vertical-align: middle;
    width: 100%;
}
.mockup-detail > span {
    float: left;
    font-size: 17px;
    font-family:lato;
    font-style: italic;
    letter-spacing: 3px;
    margin-bottom: 5px;
    width: 100%;
}
.mockup-detail > h4 {
    color: #272727;
    float: left;
    font-size: 40px;
    font-weight: 800;
    margin: 0 0 20px;
    width: 100%;
}
.list{
    float: left;
    list-style: outside none none;
    margin: 20px 0 40px;
    padding: 0;
    width: 100%;
}
.list li {
    color: #141414;
    float: left;
    font-family: lato;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 22px;
    margin-bottom: 25px;
    padding-left: 30px;
    position: relative;
    text-transform: uppercase;
    width: 100%;
}
.list li:before{
    background: black none repeat scroll 0 0;
    color: #fff;
    content: "\f105";
    font-family: fontawesome;
    height: 17px;
    left: 0;
    line-height: 17px;
    padding-left: 3px;
    position: absolute;
    text-align: center;
    top: 0;
    width: 17px;
}
.list li:last-child{margin: 0}
.simple-btn{
    border: 2px solid #e7e7e7;
    color: #424242;
    display: inline-block;
    font-family: hind;
    font-size: 14px;
    font-weight: 500;
    letter-spacing:0.8px;
    padding: 12px 25px;
    text-transform: uppercase;
}
.simple-btn:hover{color:#FFF}

.mockup-detail > h5 {
    color: #454545;
    float: left;
    font-size: 30px;
    font-weight: 700;
    margin: 0 0 20px;
    width: 100%;
}


/*=============== Agency Details ===================*/
.agency-details {
    float: left;
    margin-bottom: -30px;
    width: 100%;
}
.detail-box {
    background: #f9f9f9 none repeat scroll 0 0;
    float: left;
    margin-bottom: 30px;
    padding: 50px 30px;
    text-align: center;
    width: 100%;
}
.detail-box > h4 {
    color: #282828;
    float: left;
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 10px;
    width: 100%;
}
.detail-box > p {
    color: #777777;
    float: left;
    font-size: 13px;
    letter-spacing: 0.7px;
    line-height: 20px;
    margin: 0 0 8px;
    width: 100%;
}
.detail-box > a {
    color: #282828;
    display: inline-block;
    font-family: montserrat;
    font-size: 11px;
}
a.play-circle2 {
    color: #fff;
    font-size: 15px;
    height: 57px;
    line-height: 57px;
    margin-top: 10px;
    padding-left: 4px;
    width: 57px;
}
a.play-circle2:hover{color:#FFF}

/*=============== Blog Posts ===================*/
.blog-posts {
    float: left;
    margin-bottom: -30px;
    width: 100%;
}
.blog-post {
    float: left;
    margin-bottom: 30px;
    width: 100%;
}
.post-img {
    float: left;
    text-align: center;
    width: 100%;
}
.post-img img{max-width:100%}
.post-img-carousel{
    float:left;
    width:100%;
}

.post-img-carousel .owl-nav {
    bottom: 20px;
    position: absolute;
    right: 10px;
}
.post-img-carousel .owl-nav > div {
    color: transparent;
    float: left;
    height: 25px;
    margin: 0 5px;
    position: relative;
    width: 31px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    border-radius: 20px;
}
.post-img-carousel .owl-nav > div:before{
    color: #fff;
    content: "\f177";
    font-family: fontawesome;
    font-size: 12px;
    height: 100%;
    left: 0;
    line-height: 25px;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
}
.post-img-carousel .owl-nav > div.owl-next:before{content:"\f178"}
.post-detail {
    float: left;
    padding: 55px 30px 30px;
    position: relative;
    z-index:1;
    width: 100%;
}
.post-detail > span {
    border: 4px solid #fff;
    left: 30px;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 67px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.post-detail > span img{width:100%}
.post-detail > h4 {
    color: #313131;
    float: left;
    font-size: 22px;
    font-weight: 500;
    margin: 0 0 10px;
    width: 100%;
}
.post-detail > h4 a{color:inherit}
.meta {
    float: left;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    width: 100%;
}
.meta > li {
    color: #969595;
    float: left;
    font-size: 11px;
    font-weight: 400;
    margin-right: 10px;
}
.meta > li a{color:inherit}
.post-detail > p {
    color: #424242;
    float: left;
    font-size: 14px;
    margin: 15px 0 0;
    width: 100%;
}
.post-infos {
    background: #f5f5f5;
    float: left;
    padding: 15px 30px;
    width: 100%;
}
.post-infos a {
    background: #fff;
    color: #a3a2a2;
    float: right;
    font-family: hind;
    font-size: 10px;
    line-height: 16px;
    padding: 3px 15px;
    text-transform: uppercase;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    border-radius: 20px;
}
.post-infos span {float:left}
.post-infos span a {margin-right:9px}
.post-infos a:hover{color:#fff}
.post-img-video{
    float: left;
    position: relative;
    width: 100%;
}
.post-img-video:before{
    content:"";
    width:0;
    height:100%;
    background:#191919;
    opacity:0;
    position:absolute;
    left:50%;
    top:0;
}
.post-img-video:hover:before{
    opacity:0.6;
    left:0;
    width:100%;
}
.post-img-video > img {width:100%}
.post-img-video > a {
    border: 2px solid #efefef;
    font-size: 17px;
    height: 57px;
    left: 50%;
    line-height: 57px;
    margin-left: -28.5px;
    margin-top: -28.5px;
    padding-left: 3px;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 57px;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
}
.post-img-video:hover > a{
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

/*=============== Sponsors ===================*/
.sponsor {
    float: left;
    list-style: outside none none;
    margin: 0;
    padding:50px 20px;
    width: 100%;
}
.sponsor li{
    float:left;
    text-align:center;
    width:20%;
}
.sponsor li a img{max-width::;}
.sponsor li a{
    float:left;
    width:100%;
}
.sponsor li:first-child:nth-last-child(1),
.sponsor li:first-child:nth-last-child(1) ~ li{width:100%;}
.sponsor li:first-child:nth-last-child(2),
.sponsor li:first-child:nth-last-child(2) ~ li{width:50%;}
.sponsor li:first-child:nth-last-child(3),
.sponsor li:first-child:nth-last-child(3) ~ li{width:33.334%;}
.sponsor li:first-child:nth-last-child(4),
.sponsor li:first-child:nth-last-child(4) ~ li{width:25%;}
.sponsor li:first-child:nth-last-child(5),
.sponsor li:first-child:nth-last-child(5) ~ li{width:20%;}
.sponsor li:first-child:nth-last-child(6),
.sponsor li:first-child:nth-last-child(6) ~ li{width:16.666%;}
/*=============== Professional Team  ===================*/
.simple-title > span {
    color: #454545;
    float: left;
    font-family: lato;
    font-size: 20px;
    font-style: italic;
    margin-bottom: 5px;
    width: 100%;
}
.simple-title.style2 > p{color:#454545}
.professional-team{
    float: left;
    width: 100%;
}
.pro-member {
    float: left;
    position: relative;
    width: 100%;
}
.professional-team .row > div{padding:0}
.pro-member > img{width:100%}
.pro-member-hover {
    text-align: center;
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    -webkit-transform:translateY(-50%);
    -moz-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    -o-transform:translateY(-50%);
    transform:translateY(-50%);
}
.professional-team .row{margin:0}
.pro-member:before{
    background: white none repeat scroll 0 0;
    content: "";
    opacity: 0;
    height:0;
    width: 100%;
    position: absolute;
    left: 0;
    top:50%;
}
.pro-member:hover:before{
    opacity:0.7;
    top:0;
    height:100%;
}
.pro-member-hover > span {
    float: left;
    width: 100%;
    margin-bottom: 10px;
    -webkit-transform:scale(0);
    -moz-transform:scale(0);
    -ms-transform:scale(0);
    -o-transform:scale(0);
    transform:scale(0);
    -webkit-transition: all 800ms cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */
    -webkit-transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -moz-transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -o-transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */
    -webkit-transition-timing-function: cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */
    -webkit-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -moz-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -o-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
    transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */    
}
.pro-member:hover .pro-member-hover > span{
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1);
    -o-transform:scale(1);
    transform:scale(1);
}
.pro-member-hover span > a{font-size:24px}
.pro-member-hover > h4 {
    color: #2c2c2c;
    float: left;
    font-family: hind;
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 5px;
    width: 100%;
    -webkit-transition: all 800ms cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */
    -webkit-transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -moz-transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -o-transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */
    -webkit-transition-timing-function: cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */
    -webkit-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -moz-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -o-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
    transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */    
}
.pro-member-hover > i {
    color: #2c2c2c;
    float: left;
    font-size: 15px;
    font-style: normal;
    width: 100%;
    -webkit-transition: all 900ms cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */
    -webkit-transition: all 900ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -moz-transition: all 900ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -o-transition: all 900ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    transition: all 900ms cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */
    -webkit-transition-timing-function: cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */
    -webkit-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -moz-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -o-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
    transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */    
}
.pro-member-hover > a {
    background: black none repeat scroll 0 0;
    color: #fff;
    display: inline-block;
    height: 42px;
    line-height: 44px;
    margin-top: 20px;
    width: 42px;
    -webkit-transition: all 1000ms cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */
    -webkit-transition: all 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -moz-transition: all 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -o-transition: all 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    transition: all 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */
    -webkit-transition-timing-function: cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */
    -webkit-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -moz-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -o-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
    transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */    
}
.pro-member-hover > h4,
.pro-member-hover > i,
.pro-member-hover > a{
    opacity:0;
    -webkit-transform:scale(1.6);
    -moz-transform:scale(1.6);
    -ms-transform:scale(1.6);
    -o-transform:scale(1.3);
    transform:scale(1.3);
}
.pro-member:hover .pro-member-hover > h4,
.pro-member:hover .pro-member-hover > i,
.pro-member:hover .pro-member-hover > a{
    opacity:1;
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1);
    -o-transform:scale(1);
    transform:scale(1);
}
.twitter-color{color:#06bcf0}
/*=============== Skills  ===================*/
.skills-percentages {
    float: left;
    width: 100%;
    margin-bottom: -30px;
}
.skill-block {
    float: left;
    margin-bottom: 30px;
    text-align: center;
    width: 100%;
}
.skill-round {
    background: #494747 none repeat scroll 0 0;
    display: inline-block;
    height: 162px;
    margin-bottom: 20px;
    padding:50px 30px;
    position: relative;
    text-align: center;
    width: 162px;
}
.skill-round:before{
    border: 4px solid #211f1f;
    content: "";
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    -webkit-transform: scale(0.85);
    -moz-transform: scale(0.85);
    -ms-transform: scale(0.85);
    -o-transform: scale(0.85);
    transform: scale(0.85);
}
.skill-block strong {
    color: #fff;
    float: left;
    font-family: crimson;
    font-size: 40px;
    font-style: italic;
    line-height: 34px;
    margin-bottom: 5px;
    width: 100%;
}
.skill-round > i {
    color: #fff;
    float: left;
    font-family: crimson;
    font-size: 16px;
    width: 100%;
}
.skill-block > p {
    color: #8e8787;
    font-size: 15px;
    margin: 0;
    padding: 0 10px;
}
.skills-percentages.style2 .skill-round:before{border-color:#fff}

/*=============== Mockup Section Style 2  ===================*/
.style2 .mockup-detail > span {letter-spacing:1px}
.style2 .mockup-detail > h4 {font-size:35px}
.style2 .mockup-detail > p {
    color: #5e5e5e;
    font-size: 15px;
    letter-spacing: 1px;
}
.mockup-features {
    float: left;
    margin-bottom: -30px;
    margin-top: 40px;
    width: 100%;
}
.mockup-feature {
    display: table;
    float: left;
    margin-bottom: 30px;
    width: 100%;
}
.mockup-feature > span {
    display: table-cell;
    vertical-align: top;
}
.mockup-feature > span i {
    background: #343333 none repeat scroll 0 0;
    color: #fff;
    display: inline-block;
    font-size: 20px;
    height: 56px;
    line-height: 56px;
    text-align: center;
    width: 56px;
}
.style2 .mockup-feature-text {
    display: table-cell;
    padding-left: 20px;
    vertical-align: middle;
}
.style2 .mockup-feature-text h6 {
    color: #343333;
    float: left;
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 8px;
    text-transform: uppercase;
    width: 100%;
}
.style2 .mockup-feature-text > p {
    color: #5e5e5e;
    float: left;
    font-size: 13px;
    line-height: 19px;
    margin: 0;
    width: 100%;
}
/*=============== Product Samples ===================*/
.simple-title.light h2{color:#f2f2f2}
.simple-title.light p {color:#a7a6a6}
.product-samples-carousel {
    float: left;
    width: 100%;
}
.product-sample {
    float: left;
    position: relative;
}
.product-sample > img {width:100%}
.product-name {
    padding: 5px;
    width: 100%;
    z-index:2;
    position: absolute;
    bottom: 0;
    left: 0;
}
.product-name-inner {
    background: rgba(10, 10, 10, 0.89) none repeat scroll 0 0;
    float: left;
    padding: 20px 10px;
    text-align: center;
    width: 100%;
}
.product-name-inner > h5 {
    color: #fff;
    float: left;
    font-family: open sans;
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 5px;
    text-transform: uppercase;
    width: 100%;
}
.product-name-inner > h5 a{color:inherit}
.product-name-inner > span {
    color: #fff;
    float: left;
    font-family: open sans;
    font-size: 11px;
    width: 100%;
}
.product-sample:hover .product-name-inner{background:#FFF}
.product-sample:hover .product-name-inner h5{color:#313131}
.product-sample:hover .product-name-inner span{color:#969595}

.product-links {
    left: 0;
    padding: 10px 20px;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 100%;
    z-index:2;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.product-links a {
    border: 1px solid #fff;
    color:#FFF;
    display: inline-block;
    height: 47px;
    line-height: 47px;
    margin: 0 4px;
    text-align: center;
    width: 47px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;
    -webkit-transform:translateX(-40px) scale(0);
    -moz-transform:translateX(-40px) scale(0);
    -ms-transform:translateX(-40px) scale(0);
    -o-transform:translateX(-40px) scale(0);
    transform:translateX(-40px) scale(0);
    -webkit-transition: all 800ms cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */
    -webkit-transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -moz-transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -o-transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */
    -webkit-transition-timing-function: cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */
    -webkit-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -moz-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -o-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
    transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */    
}
.product-sample:hover .product-links a{
    -webkit-transform:translateX(0) scale(1);
    -moz-transform:translateX(0) scale(1);
    -ms-transform:translateX(0) scale(1);
    -o-transform:translateX(0) scale(1);
    transform:translateX(0) scale(1);
}
.product-links a:nth-child(2n){
    -webkit-transition-delay:0.1s;
    -moz-transition-delay:0.1s;
    -ms-transition-delay:0.1s;
    -o-transition-delay:0.1s;
    transition-delay:0.1s;
}
.product-links a:nth-child(3n){
    -webkit-transition-delay:0.2s;
    -moz-transition-delay:0.2s;
    -ms-transition-delay:0.2s;
    -o-transition-delay:0.2s;
    transition-delay:0.2s;
}
.product-sample:before {
    background: rgba(49, 49, 49, 0.5);
    content: "";
    height: 100%;
    width:0;
    opacity:0;
    z-index:1;
    position: absolute;
    left: 0;
    top: 0;
}
.product-sample:hover:before{
    opacity:1;
    width:100%;
}

/*=============== Price Table  ===================*/
.price-table {
    float: left;
    margin-bottom: -30px;
    width: 100%;
}
.package-table {
    border: 5px solid #e7e7e7;
    float: left;
    margin-bottom: 30px;
    padding-bottom: 50px;
    text-align: center;
    width: 100%;
}
.table-name {
    border-bottom: 5px solid #e7e7e7;
    float: left;
    padding: 70px 20px 30px;
    position: relative;
    width: 100%;
}
.table-name > h4 {
    color: #313131;
    float: left;
    font-family: hind;
    font-size: 30px;
    font-weight: 700;
    line-height: 25px;
    margin: 0 0 10px;
    width: 100%;
}
.table-name > span {
    float: left;
    font-size: 15px;
    width: 100%;
}
.table-name > i {
    background: black none repeat scroll 0 0;
    bottom: 0;
    color: #fff;
    font-style: normal;
    font-weight: 700;
    left: 50%;
    padding: 5px 20px;
    position: absolute;
    text-transform: uppercase;
    -webkit-transform: translateX(-50%) translateY(50%);
    -moz-transform: translateX(-50%) translateY(50%);
    -ms-transform: translateX(-50%) translateY(50%);
    -o-transform: translateX(-50%) translateY(50%);
    transform: translateX(-50%) translateY(50%);
}
.package-table > ul {
    float: left;
    list-style: outside none none;
    margin: 0;
    padding: 45px 0 30px;
    width: 100%;
}
.package-table > ul li {
    color: #969595;
    float: left;
    font-size: 15px;
    padding: 15px 10px;
    width: 100%;
}
.package-table li:nth-child(2n+1) {background:#f9f9f9}
.dark-btn{
    background: #1f1f1f none repeat scroll 0 0;
    color: #fff;
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    padding: 9px 18px;
}
.dark-btn:hover{color:#FFF}
/*=============== CEO Message  ===================*/
.ceo-message {
    float: left;
    text-align: center;
    width: 100%;
}
.ceo-message > span {
    border: 2px solid #fff;
    display: inline-block;
    margin-bottom: 20px;
    padding: 10px;
}
.ceo-message blockquote {
    border: 0 none;
    color: #fff;
    float: left;
    font-family: poppins;
    font-size: 25px;
    padding: 0;
    width: 100%;
}
.ceo-message > strong {
    color: #fff;
    float: left;
    font-family: poppins;
    font-size: 15px;
    font-weight: 200;
    width: 100%;
}

/*=============== Modern Blog  ===================*/
.modern-blog {
    float: left;
    width: 100%;
    margin-bottom: -30px;
}
.modern-post {
    float: left;
    width: 100%;
    margin-bottom: 30px;
}
.modern-post > i {
    color: #bcbcbc;
    float: left;
    font-size: 13px;
    font-style: normal;
    margin-bottom: 5px;
    width: 100%;
}
.modern-post > h4 {
    color: #242424;
    float: left;
    font-size: 18px;
    margin: 0 0 10px;
    width: 100%;
}
.modern-post > h4 a{color:inherit}
.modern-post > p {
    color: #5e5e5e;
    float: left;
    letter-spacing: 0.6px;
    line-height: 26px;
    margin: 0;
    width: 100%;
}
.modern-post-img {
    float: left;
    margin-top: 20px;
    width: 100%;
}
.modern-post-img a {
    float: left;
    width: 100%;
}
.modern-post-img a img {width:100%}
.modern-author {
    border-top: 1px solid #f5f5f5;
    color: #bcbcbc;
    float: left;
    font-size: 13px;
    margin-top: 30px;
    padding-top: 30px;
    position: relative;
    width: 100%;
}
.modern-author > img {
    margin-right: 10px;
    width: 32px;
}
.modern-author a {
    color: inherit;
    padding-left: 3px;
}
.modern-author:before{
    content: "";
    height: 1px;
    width: 40px;
    position: absolute;
    top: -1px;
    left: 0;
}

/*=============== Add  ===================*/
.add {
    float: left;
    width: 100%;
}
.add > a {
    float: left;
    width: 100%;
}
.add img{width:100%}
.add:hover img{
    -webkit-transform:scale(0.8);
    -moz-transform:scale(0.8);
    -ms-transform:scale(0.8);
    -o-transform:scale(0.8);
    transform:scale(0.8);
}
/*===============  Masonary Products ===================*/
.options.style2 .option-set li a {
    color: #141414;
    padding:8px 15px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: uppercase;
}
.options.style2 .option-set {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    padding: 0;
}
.options.style2 .option-set li a:after{border:2px solid}
.options.style2 .option-set li a:before{display:none}
.remove-ext{
    float:left;
    width:100%;
    margin-bottom:-50px;
}
.product {
    float: left;
    margin-bottom:50px;
    overflow: hidden;
    position: relative;
    width: 100%;
}
.product-img {
    float: left;
    overflow:hidden;
    margin-bottom:15px;
    position: relative;
    width: 100%;
}
.product-img > img {width:100%}
.product:hover .product-img > img{
    -webkit-transform:translateY(-30px);
    -moz-transform:translateY(-30px);
    -ms-transform:translateY(-30px);
    -o-transform:translateY(-30px);
    transform:translateY(-30px);
}
.product-img > span {
    border: 2px solid #cfcfcf;
    z-index: 1;
    font-family: montserrat;
    font-size: 10px;
    font-weight: 600;
    left: 10px;
    letter-spacing: 1px;
    padding: 8px 10px;
    position: absolute;
    text-transform: uppercase;
    top: 10px;
}
.product-btns {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    -webkit-transform:translateY(100%);
    -moz-transform:translateY(100%);
    -ms-transform:translateY(100%);
    -o-transform:translateY(100%);
    transform:translateY(100%);
}
.product:hover .product-btns{
    -webkit-transform:translateY(0);
    -moz-transform:translateY(0);
    -ms-transform:translateY(0);
    -o-transform:translateY(0);
    transform:translateY(0);
}
.product-btns > a {
    color: #fff;
    float: left;
    font-family: poppins;
    font-size: 14px;
    font-weight: 600;
    padding: 18px 10px;
    text-align: center;
    text-transform: uppercase;
    width: 78%;
}
.product-btns span {
    float: left;
    width: 22%;
}
.product-btns span a {
    background: black none repeat scroll 0 0;
    border-bottom: 1px solid #4f4f4f;
    color: #fff;
    float: left;
    font-size: 13px;
    line-height: 24px;
    padding: 2px 10px;
    text-align: center;
    width: 100%;
    -webkit-transform:translateX(100%);
    -moz-transform:translateX(100%);
    -ms-transform:translateX(100%);
    -o-transform:translateX(100%);
    transform:translateX(100%);
    -webkit-transition:all 0.2s ease 0.2s;
    -moz-transition:all 0.2s ease 0.2s;
    -ms-transition:all 0.2s ease 0.2s;
    -o-transition:all 0.2s ease 0.2s;
    transition:all 0.2s ease 0.2s;
}
.product-btns span a:last-child{
    -webkit-transition:all 0.2s ease 0.3s;
    -moz-transition:all 0.2s ease 0.3s;
    -ms-transition:all 0.2s ease 0.3s;
    -o-transition:all 0.2s ease 0.3s;
    transition:all 0.2s ease 0.3s;
}
.product-btns span a:last-child {border: 0 none}
.product:hover .product-btns span a{
    -webkit-transform:translateX(0);
    -moz-transform:translateX(0);
    -ms-transform:translateX(0);
    -o-transform:translateX(0);
    transform:translateX(0);
}
.product > h5 {
    color: #141414;
    float: left;
    font-family: hind;
    font-size: 14px;
    letter-spacing: 1px;
    margin:0 0 8px;
    text-transform: uppercase;
    width: 100%;
}
.product > h5 a {
    color: inherit;
}
.price {
    float: left;
    width: 100%;
}
.price ins {
    color: #141414;
    float: left;
    font-family: crimson;
    font-size: 18px;
    font-style: italic;
    margin-right: 10px;
    text-decoration: none;
}
.price del {
    color: #6f6f6f;
    font-family: crimson;
    font-size: 18px;
    font-style: italic;
}
/*=============== Parallax Text ===================*/
.parallax-text {
    float: left;
    width: 100%;
    padding:50px 0;
}
.parallax-text > h5 {
    color: #141414;
    float: left;
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin: 0 0 20px;
    text-transform: uppercase;
    width: 100%;
}
.parallax-text > i {
    color: #141414;
    float: left;
    font-family: crimson;
    font-size: 18px;
    margin-bottom: 20px;
    width: 100%;
}
.parallax-text > span {
    float: left;
    font-size: 36px;
    font-weight: 600;
    width: 100%;
}
.parallax-text > a {
    background: black none repeat scroll 0 0;
    color: #fff;
    float: left;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 2px;
    line-height: 20px;
    margin-top: 30px;
    padding: 19px 40px 17px;
}
.parallax-text > a:hover{background:#FFF}
.big-product-carousel .owl-nav > div:after{background:#8b8b8b}
.big-product-carousel .owl-nav > div:before{color:#fff}
.big-product {
    float: left;
    position: relative;
    width: 100%;
}
.big-product img{width:100%}
.big-product-carousel {
    float: left;
    width: 100%;
}
.big-product:before {
    background: black none repeat scroll 0 0;
    content: "";
    height: 0;
    opacity:0;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}
.big-product:hover:before{
    height:100%;
    opacity: 0.75;
}
.big-product-hover {
    text-align: center;
    width: 100%;
    position: absolute;
    left: 0;
    top: 50%;
    z-index: 1;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.big-product-hover > h4 {
    color: #fff;
    float: left;
    font-size: 45px;
    font-weight: 200;
    letter-spacing: -4px;
    margin: 0 0 30px;
    padding: 0 20px;
    width: 100%;
    opacity:0;
    -webkit-transform:scale(0.5);
    -moz-transform:scale(0.5);
    -ms-transform:scale(0.5);
    -o-transform:scale(0.5);
    transform:scale(0.5);
    -webkit-transition:all 0.3s ease 0.2s;
    -moz-transition:all 0.3s ease 0.2s;
    -ms-transition:all 0.3s ease 0.2s;
    -o-transition:all 0.3s ease 0.2s;
    transition:all 0.3s ease 0.2s;
}
.big-product-hover > h4 strong {
    float: left;
    font-size:68px;
    width: 100%;
}
.big-product:hover .big-product-hover > h4{
    opacity:1;
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1);
    -o-transform:scale(1);
    transform:scale(1);
}
.coloured-btn{
    display:inline-block;
    font-size:16px;
    color:#FFF;
    border:0;
    letter-spacing:2px;
    padding:20px 25px;
    font-weight:700;
}
.coloured-btn:hover{background:#fafafa}
.big-product .coloured-btn{
    opacity:0;
    -webkit-transform:scale(0.5);
    -moz-transform:scale(0.5);
    -ms-transform:scale(0.5);
    -o-transform:scale(0.5);
    transform:scale(0.5);
    -webkit-transition:all 0.3s ease 0.3s;
    -moz-transition:all 0.3s ease 0.3s;
    -ms-transition:all 0.3s ease 0.3s;
    -o-transition:all 0.3s ease 0.3s;
    transition:all 0.3s ease 0.3s;    
}
.big-product:hover .coloured-btn{
    opacity:1;
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1);
    -o-transform:scale(1);
    transform:scale(1);
}
/*=============== Services Carousel  ===================*/
.services-carousel {
    float: left;
    width: 100%;
    padding-bottom: 60px;
}
.simple-service {
    float: left;
    text-align: center;
    width: 100%;
    padding:0 20px;
}
.simple-service > h5 {
    color: #3c3b3b;
    float: left;
    font-size: 18px;
    font-weight: 700;
    margin:18px 0 10px;
    width: 100%;
}
.simple-service > p {
    color: #717070;
    float: left;
    font-size: 15px;
    margin: 0;
    width: 100%;
}
.services-carousel .owl-dots {
    text-align: center;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
}
.services-carousel .owl-dots .owl-dot {
    background: black none repeat scroll 0 0;
    display: inline-block;
    height: 12px;
    margin: 0 3px;
    width: 12px;
}
.services-carousel .owl-dots .owl-dot.active{background:#b8b8b8}

/*=============== Photography  ===================*/
.photography{
    float: left;
    text-align: center;
    width: 100%;
}
.photography > a {
    display: inline-block;
    margin: 0 10px;
    overflow: hidden;
}
.view-all {
    float: left;
    margin-top: 20px;
    text-align: center;
    width: 100%;
}
.view-all > a {
    color: #fff;
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 10px 20px;
    text-transform: uppercase;
}
.photography.style2 {
    margin-left: -10px;
    text-align: left;
}
/*=============== Sale Box  ===================*/
.sale-box {
    float: left;
    position: relative;
    width: 100%;
}
.sale-box > img {width:100%}
.sale-box-text {
    left: 0;
    padding: 20px;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 100%;
    -webkit-transform:translateY(-50%);
    -moz-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    -o-transform:translateY(-50%);
    transform:translateY(-50%);
}
.sale-box:before {
    background: #191919 none repeat scroll 0 0 padding-box content-box;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.85;
    padding: 5px;
    position: absolute;
    top: 0;
    width: 100%;
}
.sale-box-text > i {
    color: #fff;
    float: left;
    font-family: poppins;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    margin-bottom: 10px;
    text-transform: uppercase;
    width: 100%;
}
.sale-box-text > strong {
    color: #fff;
    float: left;
    font-family: poppins;
    font-size: 68px;
    letter-spacing: 0;
    line-height: 66px;
    margin-bottom: 15px;
    width: 100%;
}
.timer {
    float: left;
    width: 100%;
     margin-bottom:30px;
}
.timer ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}
.timer ul li {
    border: 2px solid #fff;
    display: inline-block;
    font-family: montserrat;
    font-size: 12px;
    font-weight: 500;
    height: 72px;
    line-height: 20px;
    margin: 0 5px;
    padding: 15px 10px;
    text-transform: uppercase;
    width: 72px;
}
.timer ul li span {
    float: left;
    width: 100%;
}
.timer ul li p {
    float: left;
    letter-spacing: 0;
    line-height: 16px;
    margin: 3px 0 0;
    width: 100%;
}
.transparent-btn {
    border: 3px solid #fff;
    display: inline-block;
    font-family: montserrat;
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: 13px 25px;
    text-transform: uppercase;
}
.transparent-btn:hover{color:#FFF}
.fancy-product {
    float: left;
    width: 100%;
    position:relative;
    overflow:hidden;
}
.fancy-product > img{width:100%}
.fancy-product:hover > img {
    -webkit-filter:blur(3px);
    filter:blur(3px);
    -webkit-transform: scale(1.5) rotate(20deg);
    -moz-transform: scale(1.5) rotate(20deg);
    -ms-transform: scale(1.5) rotate(20deg);
    -o-transform: scale(1.5) rotate(20deg);
    transform: scale(1.5) rotate(20deg);
}
.no-gap.style2{margin:0 -0.5px}
.no-gap.style2 .masonary3 > div,
.no-gap.style2 .masonary > div {padding:0.5px}
.fancy-product-info {
    padding: 10px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}
.info-inner {
    background:rgba(3,3,3,0.91);
    display: table;
    float: left;
    width: 100%;
}
.fancy-product-btns {
    border-right: 1px solid #2d2d2d;
    display: table-cell;
    vertical-align: middle;
}
.fancy-product-name {
    display: table-cell;
    padding-left: 30px;
    vertical-align: middle;
    width: 100%;
}
.fancy-price {
    border-left: 1px solid #2d2d2d;
    color: #fff;
    display: table-cell;
    font-family: lato;
    font-size: 22px;
    font-weight: 700;
    padding: 15px;
    vertical-align: middle;
}
.fancy-product-btns a {
    color: #fff;
    display: block;
    font-size: 13px;
    padding: 6px 15px;
    text-align: center;
}
.fancy-product-btns .lightbox {
    border-bottom: 1px solid #2d2d2d;
    display: table;
    width: 100%;
}
.fancy-product-name > h4 {
    color: #fff;
    float: left;
    font-family: hind;
    font-size: 16px;
    font-weight: 600;
    line-height: 14px;
    margin: 0 0 5px;
    text-transform: uppercase;
    width: 100%;
}
.fancy-product-name > h4 a{color:inherit}
.fancy-product-name > span {
    float: left;
    font-size: 10px;
    line-height: 15px;
    width: 100%;
}
.fancy-product-name > span a {
    display: inline-block;
    font-family: hind;
    font-size: 12px;
    padding: 0 2px;
}

/*=============== Filter Style 3  ===================*/
.options.style3 .option-set {background:none}
.options.style3 .option-set li a {
    color: #636363;
    font-family: lato;
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 0.3px;
    margin: 0;
    padding: 5px 20px;
}
.options.style3 .option-set li a:before{
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    content: "X";
    font-size: 10px;
    height: auto;
    margin-top: -8px;
    right: -4px;
    width: auto;
}
.options.style3 .option-set li a:after{display:none}
/*=============== Sponsors Carousel  ===================*/
.sponsors-carousel .owl-nav {
    height: 0;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 0;
}
.sponsors-carousel .owl-nav > div {
    background: #efefef;
    color: transparent;
    float: left;
    margin-top: -15px;
    height: 30px;
    position: relative;
    left: -50px;
    width: 30px;
}
.sponsors-carousel .owl-nav > div.owl-next{float:right}
.sponsors-carousel .owl-item a {
    float: left;
    text-align: center;
    width: 100%;
}
.sponsors-carousel .owl-item a img{max-width:100%}
.sponsors-carousel .owl-nav > div.owl-next {
    left: auto;
    right: -50px;
}
.sponsors-carousel .owl-nav > div:before{
    color: #8f8f8f;
    content: "\f104";
    font-family: fontawesome;
    height: 100%;
    left: 0;
    line-height: 30px;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
}
.sponsors-carousel .owl-nav > div.owl-next:before{content: "\f105"}
.sponsors-carousel .owl-nav > div:hover:before{color:#FFF}
/*=============== Work Process  ===================*/
.title.light > h2,
.title.light > p{color:#FFF}
.work-process{
    float: left;
    width: 100%;
    margin-bottom: -30px;
}
.work {
    float: left;
    margin-bottom: 30px;
    padding: 0 20px;
    text-align: center;
    width: 100%;
}
.work-img {
    display: inline-block;
    height: 133px;
    overflow: hidden;
    position: relative;
    width: 133px;
}
.work-img img {
    max-width: 100%;
    z-index: -1;
 }
.work-img:before{
    background: #181818;
    border: 3px solid #525252;
    content: "";
    height: 100%;
    width: 100%;
    z-index: 1;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-transition:all 0.4s ease 0.2s;
    -moz-transition:all 0.4s ease 0.2s;
    -ms-transition:all 0.4s ease 0.2s;
    -o-transition:all 0.4s ease 0.2s;
    transition:all 0.4s ease 0.2s;
}
.work-img:after{
    content: "";
    height: 100%;
    width: 100%;
    opacity:0.4;
    z-index: 0;
    position: absolute;
    left: 0;
    top: 0;
}
.work > h5 {
    color: #fff;
    float: left;
    font-family: hind;
    font-size: 17px;
    font-weight: 600;
    margin: 15px 0 8px;
    width: 100%;
}
.work-img > span {
    color: #fff;
    font-family: hind;
    font-size: 30px;
    font-weight: 600;
    letter-spacing: 2px;
    width: 100%;
    z-index: 2;
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.work:hover .work-img > span{
    opacity:0;
    visibility:hidden;
    -webkit-transform:scale(1.2);
    -moz-transform:scale(1.2);
    -ms-transform:scale(1.2);
    -o-transform:scale(1.2);
    transform:scale(1.2);
}
.work:hover .work-img:before{
    opacity:0;
    -webkit-transform:scale(0);    
    -moz-transform:scale(0);    
    -ms-transform:scale(0);    
    -o-transform:scale(0);    
    transform:scale(0);    
}
.work-process .row > div{position: relative}
.work-process .row > div:before, 
.work-process .row > div:after{
    background:#464646;
    content: "";
    height: 1px;
    position: absolute;
    top: 60px;
    left: 0;
    width: 50%;
    z-index: -1;
}
.work-process .row > div::after {
    left: auto;
    right: 0;
}
.work-process .row > div:last-child:after, 
.work-process .row > div:first-child:before{display:none}

/*=============== Simple Text  ===================*/
.icon-title {
    display: table;
    float: left;
    margin-bottom: 30px;
    width: 100%;
}
.icon-title > span{
    color: #010000;
    display: table-cell;
    font-size: 30px;
    vertical-align: top;
}
.icon-title > h2 {
    color: #010000;
    display: table-cell;
    font-size: 30px;
    font-weight: 600;
    margin: 0;
    padding-left: 20px;
    vertical-align: top;
    width: 100%;
}
.icon-title > h2 i {
    display: table;
    font-family: hind;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 3px;
    margin-top:10px;
    text-transform: uppercase;
}
.icon-title.style2 > h2,
.icon-title.style2  > span{font-size:24px} 
.simple-text {
    float: left;
    width: 100%;
}
.simple-text > p {
    color: #646464;
    float: left;
    font-size: 15px;
    margin-bottom: 20px;
    width: 100%;
}
.coloured-btn.small {
    font-size: 13px;
    letter-spacing: 0;
    padding: 10px 15px;
}

/*=============== Skills  ===================*/
.skills .progress {
    background: #fff none repeat scroll 0 0;
    box-shadow: none;
    float: left;
    height: 40px;
    width: 100%;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    -ms-border-radius: 40px;
    -o-border-radius: 40px;
    border-radius: 40px;
}
.skills .progress .progress-bar {
    position: relative;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    -ms-border-radius: 40px;
    -o-border-radius: 40px;
    border-radius: 40px;
}
.skills .progress .progress-bar span {
    background: #fbfbfb none repeat scroll 0 0;
    border-radius: 50%;
    color: #313131;
    font-size: 10px;
    font-weight: 500;
    height: 40px;
    letter-spacing: 0.5px;
    line-height: 40px;
    position: absolute;
    right: -20px;
    top: 0;
    width: 40px;
}
.progress-bar > i {
    font-family: hind;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    left: 40px;
    letter-spacing: 0.5px;
    line-height: 40px;
    position: absolute;
    text-transform: uppercase;
    top: 0;
}
.play-video {
    float: left;
    margin-top: 25px;
    padding-left:10px;
    text-align: left;
    width: 100%;
}
.coloured-btn.medium {
    font-weight: 500;
    letter-spacing: 0.5px;
    padding: 12px 23px;
    text-transform: uppercase;
}

.detailed-title {
    float: left;
    margin-bottom: 30px;
    width: 100%;
}
.detailed-title > span {
    color: #fff;
    float: left;
    font-family: lato;
    font-size: 17px;
    font-style: italic;
    font-weight: 400;
    letter-spacing: 3px;
    margin-bottom: 10px;
    width: 100%;
}
.detailed-title > span i{margin-right: 10px}
.detailed-title > h2,
.detailed-title > h3{
    color: #fff;
    float: left;
    font-size: 40px;
    font-weight: 700;
    margin: 0 0 10px;
    width: 100%;
}
.detailed-title > h3{font-size:30px}
.detailed-title > p {
    color: #cccccc;
    float: left;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.8px;
    line-height: 28px;
    margin: 0;
    width: 100%;
}
/*=============== Support Team Carousel  ===================*/
.support-team-carousel{
    float:left;
    width:100%;
}
.support-member {
    float: left;
    position: relative;
    width: 100%;
}
.support-member:before{
    background: black none repeat scroll 0 0;
    content: "";
    height: 100%;
    left:50%;
    opacity: 0.7;
    position: absolute;
    top: 0;
    width:0;
    z-index: 1;
}
.support-member:hover:before{
    left:0;
    width:100%;
}
.support-member > img{width:100%}
.support-member-intro {
    left: 0;
    padding: 20px;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 100%;
    z-index: 2;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.support-member-intro strong {
    color: #fff;
    float: left;
    font-family: hind;
    font-size: 15px;
    font-weight: 600;
    line-height: 14px;
    margin-bottom: 0;
    text-transform: uppercase;
    width: 100%;
    opacity:0;
    -webkit-transition:all 0.3s ease 0.2s;
    -moz-transition:all 0.3s ease 0.2s;
    -ms-transition:all 0.3s ease 0.2s;
    -o-transition:all 0.3s ease 0.2s;
    transition:all 0.3s ease 0.2s;
}
.support-member-intro span {
    color: #fff;
    float: left;
    font-family: lato;
    font-size: 12px;
    letter-spacing: 1px;
    line-height: 14px;
    margin-top: 5px;
    width: 100%;
    opacity:0;
    -webkit-transition:all 0.3s ease 0.3s;
    -moz-transition:all 0.3s ease 0.3s;
    -ms-transition:all 0.3s ease 0.3s;
    -o-transition:all 0.3s ease 0.3s;
    transition:all 0.3s ease 0.3s;
}
.support-member-intro > i {
    color: #fff;
    float: left;
    font-family: lato;
    font-size: 15px;
    font-weight: 600;
    margin-top: 20px;
    width: 100%;
    opacity:0;
    -webkit-transition:all 0.3s ease 0.4s;
    -moz-transition:all 0.3s ease 0.4s;
    -ms-transition:all 0.3s ease 0.4s;
    -o-transition:all 0.3s ease 0.4s;
    transition:all 0.3s ease 0.4s;
}
.support-member:hover .support-member-intro strong,
.support-member:hover .support-member-intro span,
.support-member:hover .support-member-intro i{opacity:1}
.support-team-carousel .owl-dots {
    position: absolute;
    left: -40px;
    top: 50%;
    width: 15px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.support-team-carousel .owl-dots .owl-dot {
    background: #cfcfcf;
    float: left;
    height: 11px;
    margin-bottom: 8px;
    width: 11px;
}
.support-team-carousel .owl-dots .owl-dot:last-child{margin:0}

/*=============== Toggle ===================*/
.style2 .toggle-item h3{
    background: #f0f0f0;
    border: 0 none;
    color: #404040;
    font-family: hind;
    font-size: 15px;
    font-weight: 700;
    padding: 15px 20px;
    text-transform: uppercase;
}
.style2 .toggle-item h3:before{display:none}
.style2 .toggle-item {
    margin-bottom: 10px;
    padding: 0;
}
.style2 .content p {
    color: #929292;
    padding: 0;
}
.style2 .content {
    margin-top: 10px;
    padding:20px 30px 10px;
}
.style2 .toggle-item h3.active {color:#fff}
.toggle.style2{margin:0}
.tabs .nav li a i {
    font-size: 11px;
    opacity:0;
    position: absolute;
    left:0;
    top: 16px;
}
.tabs .nav li.active a i{
    opacity:1;
    left:15px;
}
/*=============== Tabs  ===================*/
.tabs {
    float: left;
    width: 100%;
}
.tabs .nav {
    border: 0 none;
    float: left;
    margin: 0;
    width: 100%;
}
.tabs .nav li {
    color: #4b4b4b;
    font-family: hind;
    font-size: 13px;
    font-weight: 500;
    margin: 0;
    text-transform: uppercase;
}
.tabs .nav li a {
    border: 2px solid #f2f2f2 !important;
    border-radius: 0;
    color: inherit;
    overflow:hidden;
    float: left;
    font-weight: 600;
    margin-bottom: 0;
    margin-right: -2px;
    margin-top: 0;
    padding: 12px 20px;
    transition: all 0.3s ease 0s;
}
.tabs .nav li.active{margin-right:10px}
.tabs .nav li.active a {padding:14px 20px 14px 34px}
.tabs .nav li a:before{
    content: "";
    height: 2px;
    left: 50%;
    position: absolute;
    top: 0;
    width:0;
}
.tabs .nav li.active a:before{
    left:0;
    width:100%;
}
.tabs .nav li a:after{
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #000;
    content: "";
    left: 50%;
    margin-left: -4px;
    position: absolute;
    top:-4px;
}
.tabs .nav li.active a:after{top:0}
.tab-content {
    background: #f0f0f0;
    float: left;
    padding:25px ;
    width: 100%;
}
.tab-content p {
    color: #646464;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
}
.photography.style3 {
    margin-bottom: 10px;
    text-align: left;
}
.photography.style3 > a{margin:0 3px}
/*=============== Creative Blog  ===================*/
.creative-blog {
    float: left;
    margin-bottom: -30px;
    width: 100%;
}
.creative-post {
    background:#fcfcfc;
    display: table;
    float: left;
    width: 100%;
    margin-bottom: 30px;
}
.creative-post-img {
    display: table-cell;
    position: relative;
    vertical-align: middle;
}
.creative-post-detail {
    display: table-cell;
    padding-left: 40px;
    padding-right: 20px;
    vertical-align: middle;
    width: 100%;
}
.creative-post-img > span {
    position: absolute;
    bottom: 20px;
    left: 20px;
}
.creative-post-img > span a {
    background:#2e2e2e;
    color:#fff;
    display: table;
    font-family: lato;
    font-size: 9px;
    margin-top: 8px;
    padding: 5px 12px;
    text-transform: uppercase;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    border-radius: 20px;
}
.creative-post-detail > h4 {
    color: #313131;
    float: left;
    font-size: 22px;
    line-height: 22px;
    margin:0 0 15px;
    width: 100%;
}
.creative-post-detail > h4 a {
    color: inherit;
    float: left;
}
.creative-post-detail .meta{margin-bottom:15px}
.creative-blog .meta > li{text-transform:uppercase}
.creative-post-detail .coloured-btn.small {
    font-size: 11px;
    margin-top: 20px;
    padding: 6px 14px;
    text-transform: uppercase;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px;
}
.creative-post-detail .coloured-btn.small:hover{background:#fff}

/*=============== Traditional Services  ===================*/
.traditional-services {
    float: left;
    width: 100%;
    text-align: center;
    margin-bottom: -30px;
}
.traditional-service {
    float: left;
    margin-bottom: 30px;
    padding: 0 20px;
    width: 100%;
}
.traditional-service > span {
    background: #ededed;
    color: #010101;
    display: inline-block;
    font-size: 40px;
    height: 72px;
    line-height: 86px;
    text-align: center;
    width: 72px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    -webkit-transition: all 800ms cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */
    -webkit-transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -moz-transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -o-transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */
    -webkit-transition-timing-function: cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */
    -webkit-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -moz-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -o-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
    transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */    
}
.traditional-service:hover > span{
    -webkit-transform:translateY(-20px);
    -moz-transform:translateY(-20px);
    -ms-transform:translateY(-20px);
    -o-transform:translateY(-20px);
    transform:translateY(-20px);
} 
.traditional-service > strong {
    color: #2c2c2c;
    float: left;
    font-family: poppins;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: 0.3px;
    line-height: 20px;
    margin: 20px 0 10px;
    width: 100%;
}
.traditional-service > p {
    float: left;
    margin: 0;
    width: 100%;
}
/*=============== Mockup Parallax ===================*/
.mockup-parallax {
    display: table;
    float: left;
    width: 100%;
}
.mockup-text {
    display: table-cell;
    padding-right: 60px;
    vertical-align: middle;
    width: 100%;
}
.mockup2 {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.mockup2 > img {
    margin-top: -100px;
}
.mockup-text > h4 {
    color: #fff;
    float: left;
    font-size: 30px;
    font-weight: 700;
    margin: 0 0 10px;
    width: 100%;
}
.mockup-text > span {
    float: left;
    font-size: 15px;
    letter-spacing: 1px;
    width: 100%;
}
.mockup-text > p {
    color: #e5e5e5;
    float: left;
    font-family: poppins;
    font-size: 14px;
    margin-top: 20px;
    width: 100%;
}
.style2 .mockup-text{padding:60px}
.style2 .mockup-text > p {
    color: #b8b8b8;
    font-family: hind;
    font-size: 15px;
    font-weight: 300;
    letter-spacing: 0.8px;
}

.skills.style2 {
    float: left;
    margin-bottom: -30px;
    margin-top: 30px;
    width: 100%;
}
.skills.style2 .skills-progress {
    float: left;
    margin-bottom: 30px;
    width: 100%;
}
.skills.style2 .skills-progress .progress {
    background: #545151;
    height: 6px;
    margin-bottom: 5px;
    margin-top: 15px;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
}
.skills.style2 .progress .progress-bar{
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
}
.skills.style2 .skills-progress i, 
.skills.style2 .skills-progress span {
    color: #ffffff;
    float: left;
    font-family: hind;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 1.5px;
    line-height: 16px;
}
.skills.style2 .skills-progress span{float:right}
.mockup-text .coloured-btn {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 1px;
    margin-top: 30px;
    padding: 10px 20px;
}
.mockup-video {
    display: table-cell;
    position: relative;
    vertical-align: middle;
}
.mockup-video-text {
    padding: 60px;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
}
a.play-circle {
    border: 3px solid #000;
    color: #000;
    display: table;
    font-size: 30px;
    height: 95px;
    line-height: 90px;
    text-align: center;
    width: 95px;
}
.mockup-video-text > a i {display:inline-block}
.mockup-video-text > h5 {
    color: #232222;
    float: left;
    font-size: 30px;
    font-weight: 600;
    margin: 30px 0 5px;
    width: 100%;
}
.mockup-video-text > p {
    color: #2c2a2a;
    float: left;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.5px;
    margin: 0;
    width: 100%;
}
.photography.style4 > a {margin:0 2.5px}
.photography > p {
    color: #646464;
    float: left;
    font-size: 16px;
    margin: 30px 17% 30px;
    padding: 0;
    width: 66%;
}

/*=============== Toggles Style 3  ===================*/
.icon-title.light h2,.icon-title.light span{color:#FFF}
.style3 .toggle-item h3:before{display:none}
.style3 .toggle-item h3 {
    background: #292828;
    border: 0 none;
    font-family: hind;
    font-size: 14px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.style3 .toggle-item h3 i{
    border: 0 none;
    border-radius: 0;
}
.style3 .toggle-item h3.active {
    visibility: hidden;
    opacity:0;
    -webkit-transform:translateY(-40px);
    -moz-transform:translateY(-40px);
    -ms-transform:translateY(-40px);
    -o-transform:translateY(-40px);
    transform:translateY(-40px);
}
.style3 .content > span {
    color: #fff;
    height: 40px;
    left: 0;
    line-height: 40px;
    position: absolute;
    text-align: center;
    top: 0;
    width: 40px;
}
.style3 .content {
    margin-top: -40px;
    position: relative;
}
.style3 .content img{width:100%}
.content-text {
    background:#2f2e2e;
    float: left;
    padding: 30px;
    width: 100%;
}
.content-text > p {
    color: #fefefe;
    font-family: lato;
    font-size: 14px;
    line-height: 24px;
    margin: 0;
    padding: 0;
}
.content-text > strong {
    color: #fefefe;
    float: left;
    margin-bottom: 5px;
    text-transform: uppercase;
    width: 100%;
}
.toggle.style3{margin:0}

/*=============== Tabs Style 2  ===================*/
.style2 .nav {
    background: #3f3e3e;
    float: left;
    padding: 20px;
    width: 100%;
}
.style2 .nav li.active{margin: 0}
.tabs.style2 .nav li {
    float: left;
    margin-right: 10px;
}
.style2 .nav li a, .style2 .nav li.active a {
    background: #4c4c4c;
    border: 0 none !important;
    color: #fff;
    font-family: lato;
    font-size: 11px;
    font-weight:600;
    padding: 7px 10px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    border-radius: 8px;
}
.style2 .nav li.active a:before, .style2 .nav li.active a:after{display:none}
.tabs.style2 .tab-content {background: #302f2e }
.tab-content strong {
    color: #fff;
    float: left;
    font-family: hind;
    font-size: 15px;
    line-height: 18px;
    margin-bottom: 5px;
    text-transform: uppercase;
    width: 100%;
}
.style2 .tab-content p {
    color: #fff;
    float: left;
    font-family: lato;
    margin: 0;
    width: 100%;
}
.style2 .nav li.active a{color:#FFF!important}
/*=============== Testimonials Carousel  ===================*/
.testimonials-carousel {
    float: left;
    width: 100%;
}
.testimonial {
    float: left;
    width: 100%;
    text-align: center;
}
.testimonial blockquote {
    background: rgba(76, 76, 76, 0.47) none repeat scroll 0 0;
    border: 0 none;
    color: #fff;
    float: left;
    font-size: 14px;
    font-weight: 200;
    line-height: 24px;
    margin: 0 0 35px;
    padding: 35px;
    width: 100%;
}
.testimonial-info{display:inline-block}
.testimonial-info strong {
    display: inline-block;
    position: relative;
}
.testimonial-info strong::before {
    border-bottom: 11px solid #fff;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    content: "";
    height: 0;
    left: 50%;
    margin-left: -7px;
    position: absolute;
    top: -10px;
    width: 0;
}
.testimonial-info > span {
    color: #fff;
    display: inline-block;
    font-family: lato;
    font-size: 14px;
    font-weight: 600;
    padding-left: 20px;
    text-align: left;
}
.testimonial-info > span i {
    display: table;
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
}
.testimonials-carousel .owl-dots {
    height: 7px;
    position: absolute;
    right: 0;
    top: -13px;
}
.testimonials-carousel .owl-dot {
    background: #7c7e7d none repeat scroll 0 0;
    float: left;
    height: 7px;
    margin-left: 4px;
    width: 7px;
}

/*=============== Innovative Services  ===================*/
.innovative-services{
    float:left;
    width:100%;
    margin-bottom:-30px;
}
.innovative-service {
    border-bottom: 1px solid #f6f5f5;
    float: left;
    padding-bottom: 30px;
    margin-bottom:30px;
    text-align: center;
    width: 100%;
}
.innovative-services .row:last-child .innovative-service{
    padding:0;
    border:0;
}
.innovative-service > span {
    background: #f0f0f0;
    display: inline-block;
    font-size: 20px;
    height: 40px;
    line-height: 45px;
    margin-bottom: 15px;
    text-align: center;
    width: 40px;
}
.innovative-service > h5 {
    color: #313131;
    float: left;
    font-family: hind;
    font-size: 19px;
    font-weight: 700;
    margin: 0 0 8px;
    width: 100%;
}
.innovative-service > p {
    color: #646464;
    float: left;
    font-size: 14px;
    letter-spacing: 0.6px;
    line-height: 20px;
    margin: 0;
    width: 100%;
}

/*=============== Team Tabbers  ===================*/
.team-selectors{
    float: left;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    width: 100%;
}
.team-selectors > li:first-child:nth-last-child(1),
.team-selectors > li:first-child:nth-last-child(1) ~ li{width:100%;}
.team-selectors > li:first-child:nth-last-child(2),
.team-selectors > li:first-child:nth-last-child(2) ~ li{width:50%;}
.team-selectors > li:first-child:nth-last-child(3),
.team-selectors > li:first-child:nth-last-child(3) ~ li{width:33.334%;}
.team-selectors > li:first-child:nth-last-child(4),
.team-selectors > li:first-child:nth-last-child(4) ~ li{width:25%;}
.team-selectors > li:first-child:nth-last-child(5),
.team-selectors > li:first-child:nth-last-child(5) ~ li{width:20%;}
.team-selectors > li:first-child:nth-last-child(6),
.team-selectors > li:first-child:nth-last-child(6) ~ li{width:16.666%;}
.team-selectors > li {
    float: left;
    padding: 0 2px;
    width: 16.666%;
}
.team-selectors > li a {
    float: left;
    width: 100%;
    position:relative;
}
.team-selectors > li a:before {
    border: 5px solid #000;
    content: "";
    height: 100%;
    width: 100%;
    opacity:0;
    position: absolute;
    left: 0;
    top: 0;
}
.team-selectors > li a:after {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #000;
    opacity:0;
    bottom: -10px;
    content: "";
    left: 50%;
    position: absolute;
}
.team-selectors > li a.active:before,
.team-selectors > li a.active:after{opacity:1}
.team-selectors > li a img{width:100%}

.team-details{
    float: left;
    margin-top: 50px;
    width: 100%;
}
.member-detail h4 {
    color: #313131;
    float: left;
    font-size: 23px;
    font-weight: 600;
    margin: 0 0 10px;
    width: 100%;
}
.member-detail i.designation {
    float: left;
    font-size: 13px;
    font-style: normal;
    letter-spacing: 3px;
    text-transform: uppercase;
    width: 100%;
}
.member-detail p {
    color: #716f6f;
    float: left;
    font-weight: 400;
    margin-bottom: 30px;
    margin-top: 30px;
    width: 100%;
}
.light-social {
    float: left;
    width: 100%;
}
.light-social > a {
    background: #dadada none repeat scroll 0 0;
    color: #fff;
    float: left;
    height: 33px;
    line-height: 33px;
    margin-right: 5px;
    text-align: center;
    width: 36px;
}
.light-social > a i {
    float: left;
    font-size: 15px;
    line-height: inherit;
    width: 100%;
}
/*=============== Mockup Iconic Features  ===================*/
.mockup-iconic-features {
    float: left;
    width: 100%;
}
.iconic-features {
    float: left;
    text-align: right;
    width: 100%;
    margin-bottom: -20px;
}
.feature {
    float: left;
    width: 100%;
    margin-bottom: 20px;
}
.feature > span {
    border: 2px solid #424242;
    float: right;
    font-size:18px;
    height: 56px;
    line-height: 56px;
    margin-left: 20px;
    text-align: center;
    width: 56px;
}
.feature > h5 {
    color: #313131;
    font-family: hind;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin: 0;
}
.feature > p {
    color: #646464;
    font-size: 14px;
    letter-spacing: 1px;
    line-height: 20px;
    margin: 8px 0 0;
}
.simple-mockup {
    float: left;
    text-align: center;
    width: 100%;
}
.simple-mockup > img{max-width:100%}
.mockup-iconic-features .row > div {
    display: table-cell;
    float: none;
    vertical-align: middle;
}

/*=============== Video Subscribe  ===================*/
.video-subsribe{text-align:center}
.video-subsribe .play-circle {
    display: inline-block;
    line-height: 97px;
    padding-left: 6px;
    color:#FFF;
    border-color: #FFF
}
.video-subsribe strong {
    color: #fff;
    float: left;
    font-family: poppins;
    font-size: 40px;
    line-height: 50px;
    margin: 40px 10%;
    width: 80%;
}
.subscribe {
    background: #fff none repeat scroll 0 0;
    display: table;
    height: 60px;
    margin: 0 auto;
    position: relative;
    width: 600px;
}
.subscribe input {
    border: 0 none;
    display: table-cell;
    font-family: lato;
    font-size: 13px;
    height: 100%;
    letter-spacing: 0.2px;
    padding: 21px 20px;
    text-transform: uppercase;
    vertical-align: middle;
    width: 465px;
}
.subscribe > button {
    background: black none repeat scroll 0 0;
    border: 0 none;
    color: #fff;
    display: table-cell;
    font-family: hind;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 19px 25px;
    text-transform: uppercase;
    vertical-align: middle;
    width: 135px;
}
/*=============== Simplest Blog  ===================*/
.simple-post {
    display: table;
    float: left;
    margin-bottom: 30px;
    width: 100%;
}
.simplest-blog {
    float: left;
    margin-bottom: -30px;
    width: 100%;
}
.simple-post-img {
    display: table-cell;
    vertical-align: middle;
}
.simple-post-detail {
    display: table-cell;
    padding-left: 30px;
    vertical-align: middle;
    width: 100%;
}
.simple-post-detail > h4 {
    color: #141414;
    float: left;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0;
    margin: 0 0 10px;
    width: 100%;
}
.simple-post-detail > h4 a {color:inherit}
.simple-post-detail > p {
    color: #646464;
    float: left;
    margin-bottom: 20px;
    width: 100%;
}
/*=============== Simple Parallax Text  ===================*/
.simple-parallax-text {
    float: left;
    text-align: center;
    width: 100%;
}
.simple-parallax-text > h4 {
    color: #fff;
    float: left;
    font-size: 40px;
    font-weight: 700;
    margin: 0 0 10px;
    width: 100%;
}
.simple-parallax-text > p {
    color: #bcbcbc;
    float: left;
    font-size: 16px;
    margin-bottom: 30px;
    width: 100%;
}
/*=============== Modern Image  ===================*/
.modern-img {
    float: left;
    margin-bottom: 30px;
    position: relative;
    width: 100%;
}
.modern-img img{width:100%}
.modern-hover {
    padding: 20px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.modern-img:before{
    background: #fff;
    content: "";
    height: 100%;
    opacity: 0;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.modern-img:hover:before{opacity:0.77}
.modern-hover > h4{
    color: #272727;
    float: left;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 1px;
    margin: 0 0 7px;
    text-transform: uppercase;
    width: 100%;
    opacity:0;
    -webkit-transform:rotateX(90deg);
    -moz-transform:rotateX(90deg);
    -ms-transform:rotateX(90deg);
    -o-transform:rotateX(90deg);
    transform:rotateX(90deg);
    -webkit-transition:all 0.3s ease 0.2s;
    -moz-transition:all 0.3s ease 0.2s;
    -ms-transition:all 0.3s ease 0.2s;
    -o-transition:all 0.3s ease 0.2s;
    transition:all 0.3s ease 0.2s;
}
.modern-hover > i {
    color: #292828;
    float: left;
    font-family: playfair display;
    font-size: 17px;
    letter-spacing: 3px;
    line-height: 18px;
    width: 100%;
    opacity:0;
    -webkit-transform:rotateY(90deg);
    -moz-transform:rotateY(90deg);
    -ms-transform:rotateY(90deg);
    -o-transform:rotateY(90deg);
    transform:rotateY(90deg);
    -webkit-transition:all 0.3s ease 0.3s;
    -moz-transition:all 0.3s ease 0.3s;
    -ms-transition:all 0.3s ease 0.3s;
    -o-transition:all 0.3s ease 0.3s;
    transition:all 0.3s ease 0.3s;
}
.modern-img:hover .modern-hover > h4,
.modern-img:hover .modern-hover > i{
    opacity:1;
    -webkit-transform:rotate(0);
    -moz-transform:rotate(0);
    -ms-transform:rotate(0);
    -o-transform:rotate(0);
    transform:rotate(0);
}
.modern-hover > a {
    background: #292828;
    color: #fff;
    display: inline-block;
    height: 38px;
    line-height: 38px;
    margin-top: 30px;
    width: 38px;
    opacity:0;
    -webkit-transform:translateY(100px);
    -moz-transform:translateY(100px);
    -ms-transform:translateY(100px);
    -o-transform:translateY(100px);
    transform:translateY(100px);
    -webkit-transition:all 0.3s ease 0.4s;
    -moz-transition:all 0.3s ease 0.4s;
    -ms-transition:all 0.3s ease 0.4s;
    -o-transition:all 0.3s ease 0.4s;
    transition:all 0.3s ease 0.4s;    
}
.modern-img:hover .modern-hover > a{
    opacity:1;
    -webkit-transform:translateY(0);
    -moz-transform:translateY(0);
    -ms-transform:translateY(0);
    -o-transform:translateY(0);
    transform:translateY(0);
}
.grid1{
    float:left;
    width:20%;
    padding:0 15px;
}
.grid2{
    float:left;
    width:40%;
    padding:0 15px;
}
.grid3{
    float:left;
    width: 22.540%;
    padding:0 15px;
}
.grid4{
    float:left;
    width: 27.335%;
    padding:0 15px;
}
.grid5{
    float:left;
    width: 22.748%;
    padding:0 15px;
}
.grid6{
    float:left;
    width:64.220%;
}
.grid7{
    float:left;
    width:16.05%;
}
.grid8{
    float:left;
    width:19.633%;
}
.grid-sizer{width:0.01%}
/*=============== Affiliates Carousel  ===================*/
.affiliates-carousel{
    float:left;
    width:100%;
}
.affiliates-carousel a {
    background: #fcfbfb;
    float: left;
    padding: 60px 20px;
    text-align: center;
    width: 100%;
}
.affiliates-carousel a img{
    max-width:100%;
    -webkit-transition: all 800ms cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */
    -webkit-transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -moz-transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -o-transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
    transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */
    -webkit-transition-timing-function: cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */
    -webkit-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -moz-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
    -o-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
    transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */    
}
.affiliates-carousel a:hover img{
    -webkit-transform:scale(1.2);
    -moz-transform:scale(1.2);
    -ms-transform:scale(1.2);
    -o-transform:scale(1.2);
    transform:scale(1.2);
}
.affiliates-carousel .owl-nav {
    height: 0;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 0;
}
.affiliates-carousel .owl-nav > div {
    border: 2px solid #000;
    color: transparent;
    float: left;
    height: 40px;
    margin-left: -60px;
    margin-top: -20px;
    position: relative;
    width: 40px;
}
.affiliates-carousel .owl-nav > div.owl-next{
    float: right;
    margin-left: 0;
    margin-right: -60px;
}
.affiliates-carousel .owl-nav > div:before{
    color: #858585;
    content: "\f104";
    font-family: fontawesome;
    font-size: 20px;
    height: 100%;
    left: 0;
    line-height: 37px;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
}
.affiliates-carousel .owl-nav > div.owl-next:before{content:"\f105"}
.affiliates-carousel .owl-nav > div:hover:before{color:#FFF}
/*=============== Contact Box  ===================*/
.contact-box {
    display: table;
    float: left;
    width: 100%;
    margin-bottom: 30px;
}
.contact-information {
    float: left;
    width: 100%;
    margin-bottom: -30px;
}
.contact-box > i {
    color: #fff;
    display: table-cell;
    font-family: lato;
    font-size: 14px;
    line-height: 30px;
    padding-left: 20px;
    vertical-align: middle;
}
.contact-box > span {
    border: 1px solid #fff;
    color: #fff;
    display: table-cell;
    font-size: 40px;
    height: 100px;
    padding-top: 7px;
    text-align: center;
    vertical-align: middle;
    width: 100px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    border-radius: 20px;
}
/*=============== Fancy Form  ===================*/
.fancy-form {
    float: left;
    width: 100%;
    margin-top: 70px;
}
.fancy-form > form {
    float: left;
    width: 100%;
    text-align:center;
}
.field {
    border-bottom: 1px solid #6c6e6a;
    display: table;
    float: left;
    text-align:left;
    margin-bottom: 30px;
    position: relative;
    width: 100%;
}
.field label {
    color: #fff;
    display: table-cell;
    font-family: lato;
    font-size: 12px;
    font-weight: 500;
    margin: 0;
    width:70px;
    max-width: none;
    position: relative;
}
.field label i {margin-right: 5px;}
.field label:before{
    content: "";
    height: 1px;
    width: 100%;
    position: absolute;
    bottom: -1px;
    left: 0;
}
.field > input,
.field > textarea{
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 0 none;
    color: #fff;
    display: table-cell;
    font-family: lato;
    height: 40px;
    vertical-align: middle;
    width: 100%;
    font-style:italic;
}
.field textarea {
    height: auto;
    min-height: 150px;
    padding: 20px;
}
input:focus,textarea:focus{outline:none!important}
.map{float:left; width:100%;}
.map #map-canvas{
    height:500px;
    margin:0px;
    padding:0px
}
.mockup.style2{margin:0}

/*=============== Creative Image  ===================*/
.creative-image {
    float: left;
    width: 100%;
    position: relative;
    overflow:hidden;
}
.creative-image > img{width:100%}
.creative-image:hover > img {
    -webkit-filter: blur(3px);
    filter: blur(3px);
    z-index: -1;
}

.creative-image:before{
    background:#2b2828;
    content: "";
    height: 100%;
    opacity: 0;
    width: 100%;
    z-index:1;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-transform:scale(0.4);
    -moz-transform:scale(0.4);
    -ms-transform:scale(0.4);
    -o-transform:scale(0.4);
    transform:scale(0.4);
}
.creative-image:hover:before{
    opacity:0.87;
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1);
    -o-transform:scale(1);
    transform:scale(1);
}
.creative-hover {
    left: 0;
    padding: 30px;
    z-index:2;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 100%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.creative-hover > h4 {
    color: #fff;
    float: left;
    font-family: hind;
    font-size: 25px;
    font-weight: 700;
    line-height: 23px;
    margin: 0 0 2px;
    width: 100%;
    -webkit-transition:all 0.3s ease 0.2s;
    -moz-transition:all 0.3s ease 0.2s;
    -ms-transition:all 0.3s ease 0.2s;
    -o-transition:all 0.3s ease 0.2s;
    transition:all 0.3s ease 0.2s;
}
.creative-hover > i {
    color: #fff;
    float: left;
    font-family: playfair display;
    letter-spacing: 1px;
    width: 100%;
    -webkit-transition:all 0.3s ease 0.3s;
    -moz-transition:all 0.3s ease 0.3s;
    -ms-transition:all 0.3s ease 0.3s;
    -o-transition:all 0.3s ease 0.3s;
    transition:all 0.3s ease 0.3s;
}
.creative-hover > span {
    float: left;
    margin-top: 30px;
    width: 100%;
    -webkit-transition:all 0.3s ease 0.4s;
    -moz-transition:all 0.3s ease 0.4s;
    -ms-transition:all 0.3s ease 0.4s;
    -o-transition:all 0.3s ease 0.4s;
    transition:all 0.3s ease 0.4s;
}
.creative-image .creative-hover > h4,
.creative-image .creative-hover > i,
.creative-image .creative-hover > span{
    -webkit-transform:scale(0);    
    -moz-transform:scale(0);    
    -ms-transform:scale(0);    
    -o-transform:scale(0);    
    transform:scale(0);    
}
.creative-image:hover .creative-hover > h4,
.creative-image:hover .creative-hover > i,
.creative-image:hover .creative-hover > span{
    -webkit-transform:scale(1);    
    -moz-transform:scale(1);    
    -ms-transform:scale(1);    
    -o-transform:scale(1);    
    transform:scale(1);    
}

.creative-hover > span a {
    background: #000 none repeat scroll 0 0;
    color: #fff;
    display: inline-block;
    height: 46px;
    line-height: 46px;
    margin: 0 6px;
    text-align: center;
    width: 46px;
}
/*=============== Perfect Team  ===================*/
.perfect-member {
    float: left;
    width: 100%;
    margin-bottom: 30px;
}
.perfect-team {
    float: left;
    width: 100%;
    margin-bottom: -30px;
}
.perfect-member-img {
    float: left;
    margin-bottom: 30px;
    padding-bottom: 38px;
    position: relative;
    width: 100%;
}
.perfect-member-img > img{width:100%}
.perfect-member > h5 {
    color: #2a2a2a;
    float: left;
    font-size: 18px;
    margin: 0 0 5px;
    width: 100%;
}
.perfect-member > h5 a {color:inherit}
.perfect-member > i {
    color: #737373;
    float: left;
    font-size: 11px;
    font-style: normal;
    font-weight: 500;
    letter-spacing: 2px;
    width: 100%;
}
.circular-progress {
    background: #fff none repeat scroll 0 0;
    height: 75px;
    width: 75px;
    position: absolute;
    bottom: 0;
    left:20px;
}
.circular-progress > div {
    float: left;
    height: auto !important;
    width: 100% !important;
    position:relative;
}
.circular-progress > div::before {
    content: "%";
    font-size: 12px;
    font-weight: 700;
    padding-left: 16px;
    position: absolute;
    right: 0;
    text-align: center;
    top: 50%;
    width: 100%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.circular-progress > div canvas {
    height: auto !important;
    width: 100% !important;
}
.circular-progress > div input {
    color: #2a2a2a!important;
    font-size: 13px !important;
    padding-right:15px !important;
    font-weight:500;
    height: auto !important;
    left: 0;
    margin: 0 !important;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100% !important;
}
/*=============== Simple Banner  ===================*/
.simple-banner {
    display: table;
    width: 100%;
}
.simple-banner-text {
    display: table-cell;
    padding-right: 80px;
    vertical-align: middle;
}
.banner-img {
    display: table-cell;
    vertical-align: middle;
    position:relative;
}
.simple-banner-text > span {
    color: #fff;
    float: left;
    font-family: lato;
    font-size: 20px;
    font-style: italic;
    font-weight: 500;
    letter-spacing: 1.5px;
    margin-bottom: 5px;
    width: 100%;
}
.simple-banner-text h3 {
    color: #fff;
    float: left;
    font-size: 40px;
    font-weight: 800;
    margin: 0 0 20px;
    width: 100%;
}
.simple-banner-text > p {
    color: #fff;
    float: left;
    font-size: 17px;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 40px;
    width: 100%;
}
.banner-img .play-circle {
    border-color: #fff;
    color: #fff;
    left: 50%;
    margin-left: -48px;
    margin-top: -48px;
    position: absolute;
    top: 50%;
}
.simple-banner-text.style2 {
    padding: 0;
    text-align: center;
}
/*=============== Projects  ===================*/
.project {
    float: left;
    position: relative;
    width: 100%;
    margin-bottom:30px;
}
.project > img{width:100%}
.project:before{
    background:#FFF;
    content: "";
    height: 100%;
    width: 100%;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
}
.project:hover:before{opacity:0.86}
.project-hover {
    padding: 20px;
    text-align: center;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.project-hover > h5 {
    color: #121212;
    float: left;
    font-size: 19px;
    font-weight: 600;
    margin: 0 0 10px;
    width: 100%;
    opacity:0;
    -webkit-transform:translateY(30px);
    -moz-transform:translateY(30px);
    -ms-transform:translateY(30px);
    -o-transform:translateY(30px);
    transform:translateY(30px);
    -webkit-transition:all 0.3s ease 0.2s;
    -moz-transition:all 0.3s ease 0.2s;
    -ms-transition:all 0.3s ease 0.2s;
    -o-transition:all 0.3s ease 0.2s;
    transition:all 0.3s ease 0.2s;
}
.project-hover > h5 a {
    color:inherit;
    float: left;
    width: 100%;
}
.project-hover > i {
    float: left;
    font-size: 13px;
    font-style: normal;
    width: 100%;
    opacity:0;
    -webkit-transform:translateY(30px);
    -moz-transform:translateY(30px);
    -ms-transform:translateY(30px);
    -o-transform:translateY(30px);
    transform:translateY(30px);
    -webkit-transition:all 0.3s ease 0.4s;
    -moz-transition:all 0.3s ease 0.4s;
    -ms-transition:all 0.3s ease 0.4s;
    -o-transition:all 0.3s ease 0.4s;
    transition:all 0.3s ease 0.4s;
}
.project:hover .project-hover > h5,
.project:hover .project-hover > i{
    opacity:1;
    -webkit-transform:translateY(0);
    -moz-transform:translateY(0);
    -ms-transform:translateY(0);
    -o-transform:translateY(0);
    transform:translateY(0);
}
/*=============== Reviews Carousel  ===================*/
.reviews-carousel{
    float:left;
    width:100%;
}
.review {
    float: left;
    text-align: center;
    width: 100%;
}
.review > span {
    display: inline-block;
    height: 106px;
    margin-bottom: 20px;
    overflow: hidden;
    width: 106px;
}
.review > span img{width:100%}
.review > p {
    color: #fff;
    float: left;
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 20px;
    width: 100%;
}
.review > strong {
    color: #fff;
    float: left;
    font-family: lato;
    font-size: 19px;
    font-weight: 400;
    line-height: 18px;
    width: 100%;
}
.review > strong i{display:block}
.review > strong i {
    font-size: 12px;
    font-style: normal;
}
.reviews-carousel .owl-nav {
    margin-left: -155px;
    width: 310px;
    position: absolute;
    left: 50%;
    top: 35px;
}
.reviews-carousel .owl-nav > div {
    border: 1px solid #fff;
    color: transparent;
    float: left;
    height: 40px;
    position: relative;
    width: 40px;
}
.reviews-carousel .owl-nav > div.owl-next{float: right}
.reviews-carousel .owl-nav > div::before {
    color: #fff;
    content: "\f104";
    font-family: fontawesome;
    font-size: 20px;
    height: 100%;
    left: 0;
    line-height: 38px;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
}
.reviews-carousel .owl-nav > div.owl-next:before{content:"\f105"}

.sponsor.style2 {
    margin-top: 60px;
    padding: 0 50px;
}
.sponsor.style2 li {opacity:0.6}
.sponsor.style2 li:hover{opacity:1}
/*=============== Banner Links  ===================*/
.banner-links {
    float: left;
    width: 100%;
}
.banner-links > div{padding:0}
.banner-link {
    float: left;
    width: 100%;
    position: relative;
    overflow:hidden;
}
.banner-link > img{width:100%}
.banner-link:hover > img{
    -webkit-transform:scale(1.2);
    -moz-transform:scale(1.2);
    -ms-transform:scale(1.2);
    -o-transform:scale(1.2);
    transform:scale(1.2);
}
.banner-link > a {
    border: 2px solid rgba(255, 255, 255, 0.8);
    color: #fff;
    font-family: poppins;
    font-size: 28px;
    font-weight: 700;
    left: 50%;
    letter-spacing: 3px;
    line-height: 35px;
    padding: 15px 40px;
    position: absolute;
    top: 50%;
    z-index: 2;
    white-space:nowrap;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
.banner-link:before{
    background: black;
    content: "";
    height: 100%;
    opacity: 0.61;
    width: 100%;
    z-index: 1;
    position: absolute;
    left: 0;
    top: 0;
}
/*=============== Simple Text Post  ===================*/
.simple-text-post {
    float: left;
    width: 100%;
    text-align: center;
}
.simple-text-post i {
    color: #fff;
    font-size: 50px;
}
.simple-text-post > h4 {
    color: #fff;
    float: left;
    font-size: 50px;
    font-weight: 600;
    line-height: 40px;
    margin:30px 0 40px;
    text-transform: uppercase;
    width: 100%;
}
.simple-text-post > p {
    color: #fff;
    float: left;
    font-size: 18px;
    margin-bottom: 50px;
    width: 100%;
}
.button-set.style2 > a {
    color: #fff;
    padding: 12px 35px;
}

/*=============== Simple Services Style2  ===================*/
.simple-service i {
    display: inline-block;
    font-size: 40px;
}
.services-carousel.style2 h5 {
    color: #fff;
    font-family: lato;
    font-style: italic;
    font-weight: 600;
    letter-spacing: 1px;
}
.services-carousel.style2 p{color:#FFF}
/*=============== Page Style 2  ===================*/
.theme-layout.style2 {
    height: 100%;
    width: 100%;
    padding: 0 84px 0px;
}
.side-strip {
    height: 100%;
    left: 0;
    position: absolute;
    text-align: center;
    top: 0;
    width: 82px;
}
.side-strip.right {
    left: auto;
    right: 0;
}
.side-strip i {
    font-style: normal;
    position: absolute;
    left: 50%;
    top: 50%;
    white-space: nowrap;
    -webkit-transform: translateY(-50%) translateX(-50%) rotate(90deg);
    -moz-transform: translateY(-50%) translateX(-50%) rotate(90deg);
    -ms-transform: translateY(-50%) translateX(-50%) rotate(90deg);
    -o-transform: translateY(-50%) translateX(-50%) rotate(90deg);
    transform: translateY(-50%) translateX(-50%) rotate(90deg);
}
/*=============== Innovative Image  ===================*/
.innovative-image {
    float: left;
    width: 100%;
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
}
.innovative-image:before{
    background: black;
    content: "";
    height: 100%;
    width: 100%;
    opacity:0;
    position: absolute;
    left: 0;
    top: 0;
}
.innovative-image:hover:before{opacity:0.78}
.innovative-image img{width:100%}
.innovative-hover {
    padding: 30px;
    position: absolute;
    left: 0;
    top: 50%;
    text-align: center;
    width: 100%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.innovative-hover h4 {
    color: #fff;
    float: left;
    font-family: hind;
    font-size: 30px;
    font-weight: 600;
    margin: 0 0 20px;
    padding-bottom: 10px;
    position: relative;
    width: 100%;
    opacity:0;
    -webkit-transform:translateY(-100px);
    -moz-transform:translateY(-100px);
    -ms-transform:translateY(-100px);
    -o-transform:translateY(-100px);
    transform:translateY(-100px);
    -webkit-transition: all 600ms cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */
    -webkit-transition: all 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); 
    -moz-transition: all 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); 
    -o-transition: all 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); 
    transition: all 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */
    -webkit-transition-timing-function: cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */
    -webkit-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); 
    -moz-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); 
    -o-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); 
    transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */
}
.innovative-image:hover .innovative-hover h4{
    opacity:1;
    -webkit-transform:translateY(0);
    -moz-transform:translateY(0);
    -ms-transform:translateY(0);
    -o-transform:translateY(0);
    transform:translateY(0);
}
.innovative-hover h4:before{
    background: white none repeat scroll 0 0;
    content: "";
    margin-left: -15px;
    height: 2px;
    width: 0;
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transition:all 0.3s ease 0.6s;
    -moz-transition:all 0.3s ease 0.6s;
    -ms-transition:all 0.3s ease 0.6s;
    -o-transition:all 0.3s ease 0.6s;
    transition:all 0.3s ease 0.6s;
}
.innovative-image:hover .innovative-hover h4:before{width:30px}
.innovative-hover > span{
    color: #fff;
    float: left;
    font-family: playfair display;
    font-style: italic;
    margin-bottom: 30px;
    width: 100%;
    opacity:0;
    -webkit-transform:translateY(-100px);
    -moz-transform:translateY(-100px);
    -ms-transform:translateY(-100px);
    -o-transform:translateY(-100px);
    transform:translateY(-100px);
    -webkit-transition: all 650ms cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */
    -webkit-transition: all 650ms cubic-bezier(0.680, -0.550, 0.265, 1.550); 
    -moz-transition: all 650ms cubic-bezier(0.680, -0.550, 0.265, 1.550); 
    -o-transition: all 650ms cubic-bezier(0.680, -0.550, 0.265, 1.550); 
    transition: all 650ms cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */
    -webkit-transition-timing-function: cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */
    -webkit-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); 
    -moz-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); 
    -o-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); 
    transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */
}
.innovative-image:hover .innovative-hover span{
    opacity:1;
    -webkit-transform:translateY(0);
    -moz-transform:translateY(0);
    -ms-transform:translateY(0);
    -o-transform:translateY(0);
    transform:translateY(0);
}
.innovative-links {
    float: left;
    width: 100%;
}
.innovative-links a {
    background: black none repeat scroll 0 0;
    color: #fff;
    display: inline-block;
    font-size: 12px;
    line-height: 43px;
    margin: 0 3px;
    text-align: center;
    height: 40px;
    width: 40px;
    opacity:0;
    -webkit-transform:translateY(200px);
    -moz-transform:translateY(200px);
    -ms-transform:translateY(200px);
    -o-transform:translateY(200px);
    transform:translateY(200px);
    -webkit-transition: all 750ms cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */
    -webkit-transition: all 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); 
    -moz-transition: all 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); 
    -o-transition: all 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); 
    transition: all 750ms cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */
    -webkit-transition-timing-function: cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */
    -webkit-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); 
    -moz-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); 
    -o-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); 
    transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */
}
.innovative-links a.inn-delay2{
    -webkit-transition: all 800ms cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */
    -webkit-transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550); 
    -moz-transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550); 
    -o-transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550); 
    transition: all 800ms cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */
    -webkit-transition-timing-function: cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */
    -webkit-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); 
    -moz-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); 
    -o-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); 
    transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */
}
.innovative-links a.inn-delay3{
    -webkit-transition: all 850ms cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */
    -webkit-transition: all 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); 
    -moz-transition: all 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); 
    -o-transition: all 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); 
    transition: all 850ms cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */
    -webkit-transition-timing-function: cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */
    -webkit-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); 
    -moz-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); 
    -o-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); 
    transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */
}
.innovative-image:hover .innovative-links a{
    opacity:1;
    -webkit-transform:translateY(0);
    -moz-transform:translateY(0);
    -ms-transform:translateY(0);
    -o-transform:translateY(0);
    transform:translateY(0);
}

/*=============== Company CEO  ===================*/
.company-ceo {
    float: left;
    margin-bottom: 60px;
    text-align: center;
    width: 100%;
}
.company-ceo strong {
    color: #2e2e2e;
    float: left;
    font-family: crimson;
    font-size: 36px;
    font-style: italic;
    letter-spacing: 1px;
    width: 100%;
}
.company-ceo > img{
    border: 4px solid #e0e0e0;
    display: inline-block;
    margin: 10px 0 40px;
}

.loadmore {
    float: left;
    margin-top: 50px;
    text-align: center;
    width: 100%;
}
.loadmore .dark-btn {
    padding: 15px 40px;
    text-transform: uppercase;
}
.loadmore .dark-btn i {margin-right: 9px}

/*=============== Special Services ===================*/
.special-services{
    float:left;
    width:100%;
    margin-bottom:-60px;
}
.special-service {
    background: #f8f8f8 none repeat scroll 0 0;
    float: left;
    margin-bottom: 60px;
    padding: 10px;
    position: relative;
    text-align: center;
    width: 100%;
}
.special-service-inner {
    background: #fff none repeat scroll 0 0;
    border: 1px solid #f2f2f2;
    float: left;
    padding: 20px 30px;
    position: relative;
    width: 100%;
    z-index: 2;
}
.special-service-inner:before, .special-service-inner:after {
    background: white none repeat scroll 0 0;
    border-top: 1px solid #f2f2f2;
    content: "";
    height: 60px;
    left: 0;
    position: absolute;
    top: -28px;
    width: 100%;
    z-index:-1;
}
.special-service-inner:after{
    border-bottom: 1px solid #f2f2f2;
    border-top: 0 none;
    bottom: -28px;
    top: auto;
}

.special-service span {
    color: #090909;
    float: left;
    font-size: 45px;
    margin-bottom: 10px;
    width: 100%;
}
.special-service h4 {
    color: #090909;
    float: left;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 1px;
    width: 100%;
}
.special-service p {
    color: #7a7a7a;
    float: left;
    line-height: 20px;
    margin-bottom: 20px;
    width: 100%;
}
.special-service a{
    font-size:23px;
    color: #7a7a7a;
}
/*=============== Filter Style 4 ===================*/
.options.style4 .option-set {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    padding: 0;
}
.options.style4 .option-set li a{
    background:#FFF;
    border: 2px solid #ececec;
    padding: 8px 20px;
    text-transform: uppercase;
}
.options.style4 .option-set li a:before, .style4 .option-set li a:after{display:none}
.see-more {
    float: left;
    width: 100%;
    margin-top:60px;
}
.icon-btn.style2 {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 2px solid #d2d2d2;
    color: #393737;
    line-height: 48px;
}
.icon-btn.style2 i {border-left: 2px solid #d2d2d2}
.icon-btn.style2:hover i {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    color: #393737;
}

/*=============== Traditional Blog  ===================*/
.traditional-blog {
    float: left;
    width: 100%;
    margin-bottom: -30px;
}
.traditional-post {
    display: table;
    width: 100%;
    margin-bottom: 30px;
}
.traditional-image {
    display: table-cell;
    vertical-align: middle;
}
.traditional-detail {
    display: table-cell;
    padding-left: 30px;
    vertical-align: middle;
}
.traditional-detail h3 {
    color: #313131;
    float: left;
    font-size: 22px;
    font-weight: 500;
    margin:0 0 5px;
    width: 100%;
}
.traditional-detail .meta{margin-bottom:20px}
.traditional-detail > p {
    color: #424242;
    float: left;
    font-family: lato;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.5px;
    margin: 0 0 20px;
    width: 100%;
}
.border-btn {
    border: 2px solid #e7e7e7;
    color: #424242;
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
    padding: 13px 30px;
    text-transform: uppercase;
}
.border-btn:hover{color:#FFF}
.traditional-post:nth-child(2n+2) .traditional-detail {
    padding-left: 0;
    padding-right: 30px;
}

/*=============== Fancy Form Style 2  ===================*/
.fancy-form.stlye2 .field{border: 2px solid #ececec}
.fancy-form.stlye2 .field label:before{display:none}
.fancy-form.stlye2 .field label{
    color: #141414;
    font-size: 12px;
    font-style: italic;
    text-align: center;
    text-transform: uppercase;
    width: auto;
}
.fancy-form.stlye2 .field input,.fancy-form.stlye2 .field textarea{color:#141414}

/*=============== Videos Carousel ===================*/
.videos-carousel {
    float: left;
    width: 100%;
}
.video-column {
    float: left;
    width: 100%;
    position: relative;
}
.video-column > img{width:100%}
.video-info {
    bottom: 0;
    left: 0;
    padding: 0 30px 50px;
    position: absolute;
    width: 100%;
    z-index: 1;
}
.video-info .lightbox {
    color: #fff;
    display: block;
    font-size: 17px;
    height: 63px;
    line-height: 64px;
    padding-left: 5px;
    text-align: center;
    width: 63px;
}
.video-info .lightbox a{color:inherit}
.video-info > i {
    color: #fff;
    float: left;
    font-family: lato;
    font-size: 18px;
    letter-spacing: 1px;
    margin: 20px 0 15px;
    width: 100%;
}
.video-info h4 {
    color: #fff;
    float: left;
    font-size: 28px;
    font-weight: 700;
    margin: 0;
    width: 100%;
}
.videos-img-carousel {
    float: left;
    position: relative;
    width: 100%;
}
.videos-img-carousel img{width:100%}
.videos-img-carousel .owl-nav {
    position: absolute;
    right: 15px;
    top: 20px;
}
.videos-img-carousel .owl-nav > div {
    border: 2px solid #fff;
    color: transparent;
    float: left;
    height: 40px;
    margin: 0 5px;
    position: relative;
    width: 40px;
}
.videos-img-carousel .owl-nav > div:before{
    color: #fff;
    content: "\f104";
    font-family: fontawesome;
    font-size:18px;
    height: 100%;
    left: 0;
    line-height: 36px;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
}
.videos-img-carousel .owl-nav > div.owl-next:before{content:"\f105"}

/*=============== Filter Style 5  ===================*/
.options.style5 .option-isotop{margin:0}
.options.style5 .option-set {
    background: #2b2b2b;
    padding: 0 30px;
}
.options.style5 .option-set li {
    color: #fff;
    font-family: montserrat;
    text-transform: uppercase;
}
.options.style5 .option-set li a {
    margin: 0;
    padding: 15px 25px;
}
.options.style5 .option-set li a:before{
    background: #616161 none repeat scroll 0 0;
    height: 8px;
    margin-top: -4px;
    right: 0;
    width: 2px;
}
.options.style5 .option-set li a:after{display:none}



/*=============== Pagetop  ===================*/
.pagetop {
    background: transparent url("http://www.domihut.com/proxy.php?url=http%3A%2F%2Fwww.exclusivapiscinas.com.br%2Fstatic%2Fcss%2F..%2Fimg%2Fpagetop.jpg") no-repeat scroll 0 -200px / cover ;
    float: left;
    padding: 220px 0;
    text-align: center;
    width: 100%;
}
.pagetop.style2{background-image: url("http://www.domihut.com/proxy.php?url=http%3A%2F%2Fwww.exclusivapiscinas.com.br%2Fstatic%2Fcss%2F..%2Fimg%2Fpagetop2.jpg")}
.pagetop.style3{ background: transparent url("http://www.domihut.com/proxy.php?url=http%3A%2F%2Fwww.exclusivapiscinas.com.br%2Fstatic%2Fcss%2F..%2Fimg%2Fpagetop3.jpg") no-repeat scroll 0 -200px / cover ; }
.pagetop.style4{background-image: url("http://www.domihut.com/proxy.php?url=http%3A%2F%2Fwww.exclusivapiscinas.com.br%2Fstatic%2Fcss%2F..%2Fimg%2Fpagetop4.jpg")}
.pagetop.style5{background-image: url("http://www.domihut.com/proxy.php?url=http%3A%2F%2Fwww.exclusivapiscinas.com.br%2Fstatic%2Fcss%2F..%2Fimg%2Fpagetop5.jpg")}
.pagetop.style6{background-image: url("http://www.domihut.com/proxy.php?url=http%3A%2F%2Fwww.exclusivapiscinas.com.br%2Fstatic%2Fcss%2F..%2Fimg%2Fpagetop6.jpg")}
.pagetop h1 {
    color: #fff;
    float: left;
    font-size: 50px;
    font-weight: 700;
    letter-spacing: 2px;
    margin: 0 0 20px;
    width: 100%;
}
.pagetop ul {
    float: left;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    width: 100%;
}
.pagetop ul li {
    color: #fff;
    display: inline-block;
    font-family: crimson;
    font-size: 20px;
    font-style: italic;
    line-height: 20px;
    padding: 0 10px;
    position: relative;
}
.pagetop ul li a{color:inherit}
.pagetop ul li::before {
    background: #fff none repeat scroll 0 0;
    content: "";
    height: 2px;
    position: absolute;
    right: -7px;
    top: 10px;
    width: 7px;
}
.pagetop ul li:last-child:before{display:none}

/*=============== Simple Texty  ===================*/
.simple-texty{
    float: left;
    width: 100%;
}
.simple-texty > span {
    color: #454545;
    font-family: lato;
    font-size: 15px;
    font-style: italic;
    letter-spacing: 1px;
    width: 100%;
}
.simple-texty h3 {
    float: left;
    font-size: 35px;
    font-weight: 700;
    margin: 10px 0 20px;
    width: 100%;
}
.simple-texty > p {
    color: #646464;
    font-size: 15px;
    letter-spacing: 0.5px;
    line-height: 28px;
}
.image-grids {
    float: left;
    margin: 30px 0;
    width: 100%;
}
.image-grids img{width:100%}
/*=============== Work Process Style2  ===================*/
.work-process.style2 .row > div:before, 
.work-process.style2 .row > div:after{display:none}
.style2 .work-img:before{background:#FFF}
.work-process.style2 .work-img > span{color:#393838}
.work-process.style2 .work > h5{color:#393838}
.work-process.style2 .work > p{color:#454545}
/*=============== Fancy Team  ===================*/
.fancy-team {
    float: left;
    width: 100%;
}
.fancy-member {
    float: left;
    position: relative;
    width: 100%;
}
.fancy-member > img{width:100%}
.fancy-member-info{
    padding: 20px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    z-index: 1;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.fancy-member:before{
    background: #252424;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.fancy-member:hover:before{opacity:0.83}
.fancy-member-info > h3 {
    color: #fff;
    float: left;
    font-weight: 600;
    margin: 10px 0 5px;
    width: 100%;
    -webkit-filter: blur(50px);
    filter: blur(50px);
    -webkit-transform:scale(1.3);
    -moz-transform:scale(1.3);
    -ms-transform:scale(1.3);
    -o-transform:scale(1.3);
    transform:scale(1.3);
    -webkit-transition: all 0.3s ease 0.2s;
    -moz-transition: all 0.3s ease 0.2s;
    -ms-transition: all 0.3s ease 0.2s;
    -o-transition: all 0.3s ease 0.2s;
    transition: all 0.3s ease 0.2s;
}
.fancy-member-info > span {
    float: left;
    font-size: 18px;
    line-height: 20px;
    width: 100%;
    -webkit-filter: blur(50px);
    filter: blur(50px);
    -webkit-transform:scale(1.3);
    -moz-transform:scale(1.3);
    -ms-transform:scale(1.3);
    -o-transform:scale(1.3);
    transform:scale(1.3);
    -webkit-transition: all 0.3s ease 0.3s;
    -moz-transition: all 0.3s ease 0.3s;
    -ms-transition: all 0.3s ease 0.3s;
    -o-transition: all 0.3s ease 0.3s;
    transition: all 0.3s ease 0.3s;
}
.fancy-member-info > p {
    color: #c1b7b7;
    float: left;
    font-size: 14px;
    line-height: 20px;
    margin: 15px 0 40px;
    width: 100%;
    -webkit-filter: blur(50px);
    filter: blur(50px);
    -webkit-transform:scale(1.3);
    -moz-transform:scale(1.3);
    -ms-transform:scale(1.3);
    -o-transform:scale(1.3);
    transform:scale(1.3);
    -webkit-transition: all 0.3s ease 0.5s;
    -moz-transition: all 0.3s ease 0.5s;
    -ms-transition: all 0.3s ease 0.5s;
    -o-transition: all 0.3s ease 0.5s;
    transition: all 0.3s ease 0.5s;
}
.fancy-member:hover .fancy-member-info > h3,
.fancy-member:hover .fancy-member-info > span,
.fancy-member:hover .fancy-member-info > p{
    -webkit-filter: blur(0);
    filter: blur(0);
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1);
    -o-transform:scale(1);
    transform:scale(1);
}

.fancy-social {
    float: left;
    text-align: center;
    width: 100%;
}
.fancy-social > a {
    border: 2px solid #767676;
    color: #fff;
    display: inline-block;
    font-size: 17px;
    height: 57px;
    line-height: 60px;
    margin: 0 5px;
    width: 57px;
    -webkit-transform:scale(0);
    -moz-transform:scale(0);
    -ms-transform:scale(0);
    -o-transform:scale(0);
    transform:scale(0);
    -webkit-transition: all 0.3s ease 0.8s;
    -moz-transition: all 0.3s ease 0.8s;
    -ms-transition: all 0.3s ease 0.8s;
    -o-transition: all 0.3s ease 0.8s;
    transition: all 0.3s ease 0.8s;
}
.fancy-team .row{margin:0}
.fancy-team .row > div{padding:0}
.fancy-member:hover .fancy-social > a{
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1);
    -o-transform:scale(1);
    transform:scale(1);
}
/*=============== Style 4 Toggle Style  ===================*/
.style4 .toggle-item {
    border: 2px solid #dbdada;
    margin-bottom: 10px;
    padding: 15px 20px;
}
.style4 .toggle-item h3:before{display:none}
.style4 .toggle-item h3 {
    border: 0 none;
    color: #141414;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}
.style4 .toggle-item h3,
.style4 .toggle-item h3.active{
    border: 0 none;
    color: #141414;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}
.toggle.style4 .content p {
    color: #454545;
    margin: 0;
    padding: 0;
}
.toggle.style4 .content{margin-top:9px}
.style4 .toggle-item.activate{ padding: 25px 20px}
.style4 .toggle-item h3:after {
    content: "\f067";
    font-family: fontawesome;
    font-size: 12px;
    height: 20px;
    line-height: 22px;
    text-align: center;
    position: absolute;
    right: 0;
    top: 50%;
    width: 20px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.style4 .toggle-item.activate h3:after{content:"\f068"}
.toggle.style4{margin:0}
/*=============== Skills Style 3  ===================*/
.skills.style3 .skills-progress > i {
    color: #141414;
    float: left;
    font-family: lato;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    margin-bottom:15px;
    padding-left: 20px;
    width: 100%;
}
.skills.style3 .progress {
    background: #efefef;
    border-radius: 0;
    height: 30px;
    margin-bottom:15px;
}
.skills.style3 .progress .progress-bar {
    border-radius: 0;
    box-shadow: none;
}
.skills.style3 .progress .progress-bar i{line-height:30px}

/*=============== Tabs Style 3  ===================*/
.tabs.style3 {
    border: 2px solid #dbdada;
    padding: 20px;
}
.tabs.style3 .nav li {
    float: left;
    margin: 0;
}
.tabs.style3 .nav li a {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 0 none !important;
    color: #141414;
    font-size: 11px;
    margin: 0;
    padding: 10px 20px;
}
.tabs.style3 .nav li a:before{
    bottom: 0;
    top: auto;
}
.tabs.style3 .nav li a:after{display:none}
.tabs.style3 .nav li a i {
    left: 4px;
    top: 13px;
}
.tabs.style3 .tab-content {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    padding: 20px 0 0;
}
.center{text-align:center;}
.simple-texty.style2 p{font-size:15px}

/*=============== Work Process Style 3  ===================*/
.work-process.style3 .work-img:before{background:none}
.work-process.style3 .work:hover .work-img:before{
    opacity:0;
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1);
    -o-transform:scale(1);
    transform:scale(1);
}
.work-process.style3 .work-img img{opacity:0}
.work-process.style3 .work-img::after{
    opacity: 0;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
.work-process.style3 .work:hover .work-img:after, .work:hover .work-img img{opacity:0.7}
.work-process.style3 .row > div:before{display:none}
.work-process.style3 .row > div:after {
    background: #251e1b none repeat scroll 0 0 !important;
    left: calc(50% + 65px);
    opacity: 1;
    width: 170px;
    z-index: 3;
}
.work-process.style3 .work > p{color:#dadada}
/*=============== Simple Banner Style 2  ===================*/
.simple-banner.style2 .simple-banner-text > span {
    color: #454545;
    font-size: 15px;
    letter-spacing: 1px;
}
.simple-banner.style2 .simple-banner-text > h3 {
    color: #454545;
    font-size: 26px;
}
.simple-banner.style2 .simple-banner-text > p {
    color: #646464;
    font-size: 15px;
    letter-spacing: 0.8px;
    line-height: 30px;
}
.simple-banner.style2 .simple-banner-text > a.coloured-btn {
    font-size: 14px;
    padding: 16px 45px;
}

/*=============== Office Images  ===================*/
.office-images {
    float: left;
    position: relative;
    width: 100%;
}
.office-full-images {
    float: left;
    width: 100%;
}
.office-full-images img{width:100%}
.office-thumbs-wrapper {
    bottom:40px;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 1;
}
.office-thumbs{
    float:left;
    width:100%;
}
.office-thumbs a {
    float: left;
    width: 100%;
}
.office-thumbs a img{width:100%}
.office-thumbs .owl-nav {
    height:0;
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
}
.office-thumbs .owl-nav > div {
    border: 2px solid #fff;
    color: transparent;
    float: left;
    height: 30px;
    margin-left: -50px;
    margin-top: -15px;
    position: relative;
    width: 30px;
}
.office-thumbs .owl-nav > div.owl-next {
    float: right;
    margin-left: 0;
    margin-right: -50px;
}
.office-thumbs .owl-nav > div:before{
    color: #fff;
    content: "\f104";
    font-family: fontawesome;
    font-size: 20px;
    height: 100%;
    left: 0;
    line-height: 27px;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
}
.office-thumbs .owl-nav > div.owl-next:before{content:"\f105"}

/*=============== Reviews Carousel Style 2  ===================*/
.reviews-carousel.style2 .review > p{color:#606060}
.reviews-carousel.style2 .owl-nav > div {border-color:#cfcfcf}
.reviews-carousel.style2 .owl-nav > div:before{color:#cfcfcf}

/*=============== Company History  ===================*/
.company-history {
    float: left;
    overflow: hidden;
    position: relative;
    width: 100%;
    padding-left: 200px;
}
.company-history::before, .company-history:after {
    background: #ecf0f1 none repeat scroll 0 0;
    border-radius: 50%;
    content: "";
    height: 30px;
    left: 45px;
    position: absolute;
    top: 0;
    width: 30px;
}
.company-history::after {
    bottom: 0;
    top: auto;
}

.history-row {
    float: left;
    padding-bottom: 150px;
    position: relative;
    width: 100%;
}
.history-row:before {
    background: #ecf0f1;
    content: "";
    height: 100%;
    width: 3px;
    position: absolute;
    left: -140px;
    top: 0;
}
.history-row:last-child{padding:0}
.history-row > span {
    background: #fff none repeat scroll 0 0;
    border: 2px solid #ecf0f1;
    color: #454545;
    font-family: lato;
    font-size: 24px;
    font-weight: 700;
    padding: 5px 30px;
    position: absolute;
    left: -200px;
    top:70px;
    z-index: 1;
}
.history-column {
    display: table;
    width: 100%;
}

.history-column > span {
    display: table-cell;
    vertical-align: middle;
    overflow:hidden;
    border:7px solid #ecf0f1;
}
.history-text {
    display: table-cell;
    padding-left: 20px;
    vertical-align: middle;
}
.history-column img{border:1px solid #FFF}
/*=============== Logos List  ===================*/
.logos-list {
    float: left;
    width: 100%;
    margin-bottom: -60px;
}
.logos-list a {
    float: left;
    margin-bottom: 60px;
    text-align: center;
    width: 100%;
}
.logos-list a img {max-width:100%}

/*=============== Fancy Reviews Carousel  ===================*/
.fancy-reviews-carousel {
    float: left;
    width: 100%;
}
.fancy-review {
    float: left;
    width: 100%;
}
.fancy-review-shape {
    background: transparent url("http://www.domihut.com/proxy.php?url=http%3A%2F%2Fwww.exclusivapiscinas.com.br%2Fstatic%2Fcss%2F..%2Fimages%2Fshape.png") no-repeat scroll 0 0 / 100% 100%;
    display: table;
    float: left;
    padding: 40px 50px 40px 30px;
    width: 100%;
}
.fancy-review-shape img {
    display: table-cell;
    vertical-align: middle;
}
.fancy-review-shape blockquote {
    border: 0 none;
    color: #fff;
    display: table-cell;
    font-family: lato;
    font-size: 18px;
    font-style: italic;
    font-weight: 300;
    padding: 0 0 0 30px;
    vertical-align: middle;
}

.fancy-review > span {
    color: #fff;
    float: left;
    font-family: lato;
    font-size: 18px;
    margin-top: 10px;
    padding-left: 80px;
    width: 100%;
}
.fancy-review > span i {
    display: table;
    font-size: 13px;
}
.fancy-reviews-carousel .owl-dots {
    bottom: 40px;
    position: absolute;
    right: 0;
}
.fancy-reviews-carousel .owl-dots > .owl-dot {
    border: 1px solid #fff;
    float: left;
    height: 10px;
    margin-left: 6px;
    width: 10px;
}
.fancy-reviews-carousel .owl-dots > .owl-dot.active{background: #fff}

/*=============== Contact Page   ===================*/
.mockup-section.style3 .mockup-detail{padding:0}
.mockup-section.style3 .mockup-detail p{
    font-size: 15px;
    margin: 20px 0;
}
.mockup-section.style3{margin-bottom:-20px}

/*=============== Contact Info  ===================*/
.contact-info {
    float: left;
    width: 100%;
}
.contact-info > h5 {
    color: #242424;
    float: left;
    font-size: 25px;
    font-weight: 600;
    letter-spacing: 1px;
    margin: 0 0 30px;
    width: 100%;
}
.contact-info > ul {
    float: left;
    list-style: outside none none;
    margin: 0 0 -20px;
    padding: 0;
    width: 100%;
}
.contact-info > ul li {
    display: table;
    margin-bottom: 20px;
}
.contact-info > ul li i{
    color: #4a4a4a;
    display: table-cell;
    font-size: 36px;
    line-height: 60px;
}
.contact-info > ul li span{
    color: #4a4a4a;
    vertical-align:middle;
    display: table-cell;
    font-family: lato;
    font-size: 15px;
    line-height: 30px;
    padding-left: 20px;
    vertical-align: top;
    width: 100%;
}

/*=============== Fancy Posts  ===================*/
.fancy-post {
    float: left;
    width: 100%;
    margin-bottom:50px;
}
.fancy-post-img {
    float: left;
    margin-bottom: 25px;
    position: relative;
    overflow:hidden;
    width: 100%;
}
.fancy-post-img > img{width:100%}
.fancy-post-img > i {
    background: #000 none repeat scroll 0 0;
    color: #fff;
    font-family: crimson;
    left: 20px;
    padding: 5px 10px;
    z-index:2;
    position: absolute;
    text-align: center;
    top: 20px;
    width: 52px;
}
.fancy-post-detail{
    float:left;
    width:100%;
}
.fancy-post-detail > h4 {
    color: #313131;
    float: left;
    font-size: 17px;
    line-height: 20px;
    margin: 0 0 10px;
    width: 100%;
}
.fancy-post-detail > p {
    color: #424242;
    float: left;
    font-family: lato;
    font-size: 14px;
    width: 100%;
}
.fancy-post-detail > h4 a{color:inherit}
.fancy-post-bar {
    background: #f8f8f8 none repeat scroll 0 0;
    display: table;
    float: left;
    margin-top: 30px;
    width: 100%;
}
.fancy-post-bar > a {
    color: #6f6f6f;
    display: inline-block;
    font-size: 12px;
    padding:10px;
    text-align: center;
    vertical-align: middle;
    width: auto;
}
.fancy-post-bar > a i{margin-right:4px}
.fancy-post-bar > a.more{
    background: #fff;
    border: 2px solid #cfcfcf;
    color: #141414;
    font-family: lato;
    float:right;
    font-size: 11px;
    font-weight: 600;
    line-height: 14px;
    padding: 9px;
    text-transform: uppercase;
    width: 140px;
}
.fancy-post-img-carousel{
    float:left;
    width:100%;
}
.fancy-post-img-carousel img{width:100%}
.fancy-post-img-carousel .owl-nav {
    height: 0;
    left: 0;
    padding: 0 20px;
    position: absolute;
    top: 50%;
    width: 100%;
}
.fancy-post-img-carousel .owl-nav > div {
    background: #fff none repeat scroll 0 0;
    color: transparent;
    float: left;
    height: 44px;
    line-height: 44px;
    margin-top: -22px;
    position: relative;
    text-align: center;
    width: 44px;
}
.fancy-post-img-carousel .owl-nav > div.owl-next{float:right}
.fancy-post-img-carousel .owl-nav > div:before{
    color: #333;
    content: "\f104";
    font-family: fontawesome;
    font-size: 20px;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.fancy-post-img-carousel .owl-nav > div.owl-next:before{content:"\f105"}
.fancy-post-img-carousel .owl-nav > div:hover:before{color:#FFF}
.fancy-video:before{
    background: black none repeat scroll 0 0;
    content: "";
    height: 100%;
    opacity: 0;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.fancy-video:hover:before{opacity:0.5}
.fancy-video .play-circle{
    background: black none repeat scroll 0 0;
    color: #fff;
    left: 50%;
    margin-left: -48px;
    margin-top: -48px;
    padding-left: 6px;
    position: absolute;
    top: 50%;
    z-index: 1;
    opacity:0;
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -ms-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
}
.fancy-video:hover .play-circle{
    opacity:1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}
.fancy-link {
    background: #f0f0f0 none repeat scroll 0 0;
    color: #1d1b1b;
    float: left;
    font-family: crimson;
    font-size: 24px;
    font-style: italic;
    min-height: 100px;
    padding: 33px;
    text-align: center;
    width: 100%;
}
.remove-ext30 .fancy-post{margin-bottom:30px}
.blog-grids.listview .fancy-post-img{
    display: table-cell;
    float: none;
    vertical-align: middle;
    width: auto;
}
.blog-grids.listview  .fancy-post{display:table}
.blog-grids.listview .fancy-post-img img{width:auto}
.blog-grids.listview .fancy-post-detail {
    display: table-cell;
    float: none;
    padding-left: 30px;
    vertical-align: middle;
}
/*=============== Traditional Parallax Text ===================*/
.traditional-parallax-text {
    float: left;
    text-align: center;
    width: 100%;
}
.traditional-parallax-text > h4 {
    color: #fff;
    float: left;
    font-family: hind;
    font-size: 25px;
    font-weight: 700;
    letter-spacing: 0.8px;
    margin: 0 0 20px;
    text-transform: uppercase;
    width: 100%;
}
.traditional-parallax-text .coloured-btn {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1px;
    padding: 12px 30px;
    text-transform: uppercase;
}
/*=============== Fancy Reviews Carousel ===================*/
.fancy-reviews-carousel.style2 .fancy-review > span{color:#3e3e3e}
.fancy-reviews-carousel.style2 .owl-dot{background:#e1e1e1}
/*=============== Products Page ===================*/
.shopbar .select2-container{width: 160px !important}
.shopbar{
    border: 2px solid #f5f5f5;
    float: left;
    width: 100%;
    padding: 10px 20px;
    margin-bottom:50px;
}
.shopbar .select2-container{width: 160px!important}
.shopbar .select2-container .select2-selection--single {
    background:none;
    height:30px;
}
.shopbar .select2-container .select2-selection--single .select2-selection__rendered{line-height:34px}
.view-count {
    color: #6f6f6f;
    float: right;
    font-family: lato;
    font-size: 14px;
    font-style: italic;
    font-weight: 300;
    padding: 5px 20px;
    position: relative;
}
.view-count:before {
    border: 2px solid #838383;
    content: "";
    height: 6px;
    left: -3px;
    margin-top: -3px;
    position: absolute;
    top: 50%;
    width: 6px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
.view-count:last-child:before{display:none}
.view-count a{color: inherit}
.product-grid {
    float: left;
    width: 100%;
    margin-bottom: -50px;
}
/*=============== Single Product Page ===================*/
.single-product {
    float:left;
    width:100%;
}
.single-product-tabs {
    float:left;
    width:100%;
}
.single-product-img {
    float:left;
    width:100%;
}
.single-product-img img{max-width:100%}
.single-product-thumbs {
    float: left;
    margin-top: 10px;
    position: relative;
    width: 100%;
    z-index: 1;
}
.single-product-thumbs a {
    float:left;
    width:100%;
}
.single-product-thumbs a img{width:100%}
.single-product .row > div {
    display: inline-block;
    float: none;
    margin: 0 -1px;
    vertical-align: top;
}
.rating {
    float: left;
    margin-bottom: 10px;
    width: 100%;
}
.single-product-detail > span {
    border-bottom: 1px solid #f1f1f1;
    color: #6f6f6f;
    float: left;
    font-size: 11px;
    padding-bottom: 5px;
    width: 50%;
}
.single-product-detail > span i {
    margin-right: 10px;
}
.single-product-detail h2 {
    color: #454545;
    float: left;
    font-size: 30px;
    font-weight: 700;
    margin: 20px 0 25px;
    width: 100%;
}
.single-product-detail strong {
    color: #141414;
    float: left;
    font-family: crimson;
    font-size: 30px;
    font-style: italic;
    font-weight: 200;
    margin-bottom: 20px;
    width: 100%;
}
.single-product-detail > p {
    color: #646464;
    float: left;
    font-size: 15px;
    letter-spacing: 0.5px;
    line-height: 28px;
    margin-bottom: 40px;
    width: 100%;
}
.single-product-detail > span.select2 {
    float: left;
    margin-bottom: 20px;
    padding: 0;
    width: 100%;
}
.select2-container .select2-selection--single .select2-selection__rendered {
    color: #141414;
    font-size: 12px;
    font-style: italic;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.count-btn {
    float: left;
    margin-top: 30px;
    width: 100%;
}
.input-group {
    border: 2px solid #ececec;
    display: inline-block;
    margin-right: 40px;
    vertical-align: bottom;
}
.input-group .input-group-btn {
    float: left;
    width: auto;
}
.input-group .input-group-btn button {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 0 none;
    font-family: lato;
    font-size: 18px;
    font-weight: 800;
    height: 40px;
    line-height: 20px;
    margin: 0;
    padding: 0;
    width: 40px;
}
.input-group input {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 0 none;
    color: #141414;
    float: left;
    font-size: 17px;
    font-weight: 600;
    height: 40px;
    padding: 5px;
    width: 60px;
}
.count-btn .coloured-btn {
    font-family: montserrat;
    font-size: 14px;
    letter-spacing: 1px;
    padding: 15px 40px;
    text-transform: uppercase;
}
.single-product-detail > ul {
    float: left;
    list-style: outside none none;
    margin-top: 40px;
    padding: 0;
    width: 100%;
}
.single-product-detail > ul li {
    color: #6f6f6f;
    float: left;
    font-family: lato;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
    line-height: 25px;
    width: 100%;
}
.single-product-detail > ul li i{margin-right:10px}
.social-links.style2 > a {
    background: #f9f9f9 none repeat scroll 0 0;
    float: left;
    font-size: 13px;
    height: 42px;
    line-height: 42px;
    margin-right: 5px;
    width: 42px;
}
.product-tabs {
    float: left;
    width: 100%;
}
.product-tabs .nav {
    border: 0 none;
    margin-bottom: 12px;
}
.product-tabs .nav li{margin:0 10px 0 0}
.product-tabs .nav li a,
.product-tabs .nav li.active a,
.product-tabs .nav li a:hover {
    background: #ececec none repeat scroll 0 0;
    border: 0 none;
    border-radius: 0;
    color: #272727;
    font-family: hind;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    margin: 0;
    padding: 13px 40px;
    text-transform: uppercase;
}
.product-tabs .nav li.active a{color:#FFF}
.product-tabs .nav li a i{margin-right:10px}

.product-tabs .tab-content {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 1px solid #ececec;
    padding: 50px 40px;
}
.product-tabs .tab-content p {
    margin: 0;
}

/*=============== Pagination ===================*/
.pagination {
    float: left;
    margin: 80px 0 0;
    text-align: center;
    width: 100%;
}
.pagination > ul {
    display: inline-block;
    list-style: outside none none;
    margin: 0;
    padding: 0;
}
.pagination > ul li {
    border: 2px solid #ececec;
    color: #141414;
    float: left;
    font-family: crimson;
    font-size: 18px;
    font-style: italic;
    font-weight: 100;
    height: 46px;
    line-height: 40px;
    margin: 0 5px;
    position: relative;
    width: 46px;
}
.pagination > ul li:first-child {
    background: #f1f1f1 none repeat scroll 0 0;
    border: 0 none;
    font-size: 16px;
    height: 40px;
    line-height: 40px;
    margin-right: 40px;
    margin-top: 2px;
    width: 60px;
}
.pagination > ul li:last-child {
    background: #f1f1f1 none repeat scroll 0 0;
    border: 0 none;
    font-size: 16px;
    height: 40px;
    line-height: 40px;
    margin-left: 40px;
    margin-top: 2px;
    width: 60px;
}
.pagination > ul li a{color:inherit}


/*=============== Sidebar ===================*/
.sidebar .widget {
    background: #fcfcfc none repeat scroll 0 0;
    border: 2px solid #f6f6f6;
    margin-bottom: 40px;
    padding: 40px;
}
.sidebar .widget-title {
    color: #141414;
    font-family: crimson;
    font-size: 24px;
    font-style: italic;
    font-weight: 600;
    margin-bottom: 30px;
}
.sidebar .widget-title i {
    font-size: 20px;
    margin-right: 5px;
}
.widget > ul {
    float: left;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    width: 100%;
}
.widget li {
    color: #6d6d6d;
    float: left;
    line-height: 30px;
    margin-bottom: 10px;
    font-family: lato;
    font-weight: 700;
    padding-left: 20px;
    position: relative;
    width: 100%;
    font-size: 13px;
}
.widget li a{color:inherit}
.widget li span {
    border: 2px solid #959595;
    float: right;
    font-size: 10px;
    height: 30px;
    line-height: 27px;
    text-align: center;
    width: 30px;
    font-family: lato;
    color: #111111;
}
.widget li:before {
    content: "\f105";
    font-family: fontawesome;
    font-size: 12px;
    line-height: 31px;
    position: absolute;
    left: 0;
    top: 0;
}
.affiliation-widget {margin: 0 -10px -10px}
.affiliation-widget > a {
    float: left;
    margin-bottom: 10px;
    padding: 0 5px;
    width: 50%;
}
.affiliation-widget > a img {width:100%}
.feature-post-carousel {
    float: left;
    width: 100%;
}
.feature-post {
    float: left;
    width: 100%;
}
.feature-post > img {width:100%}
.feature-post h6 {
    color: #313131;
    font-family: montserrat;
    font-size: 15px;
    margin: 20px 0 0;
    width: 100%;
}
.feature-post h6 a{color:inherit}
.widget .feature-post .meta{
    margin-bottom: 5px;
    margin-top: 10px;
}
.widget .feature-post .meta li {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.6px;
    line-height: 15px;
    margin-bottom: 0;
    padding: 0;
    width: auto;
}
.widget .feature-post .meta li:before {display:none}
.widget .feature-post > p {
    color: #424242;
    float: left;
    font-family: lato;
    font-size: 14px;
    letter-spacing: 1.5px;
    line-height: 24px;
    margin-top: 10px;
    width: 100%;
}

.feature-post-carousel .owl-dots {
    float: left;
    margin-top: 15px;
    text-align: left;
    width: 100%;
}
.feature-post-carousel .owl-dot{
    background: #a2a2a2 none repeat scroll 0 0;
    display: inline-block;
    height:8px;
    margin: 0 5px;
    width:8px;
}
.social-widget {
    float: left;
    margin-bottom: -10px;
    width: 100%;
}
.social-widget > a {
    background: #f1f1f1 none repeat scroll 0 0;
    color: #969595;
    float: left;
    font-size: 13px;
    height: 36px;
    line-height: 35px;
    margin-bottom: 10px;
    margin-right: 10px;
    text-align: center;
    width: 36px;
}
.social-widget > a:hover{color:#FFFFFF}

.sidebar-tabs {margin:-40px}
.sidebar-tabs .nav.nav-tabs {
    border: 0 none;
    float: left;
    margin-bottom: 30px;
    width: 100%;
}
.sidebar-tabs .nav.nav-tabs li {
    border: 0 none;
    float: left;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    width: auto;
}
.sidebar-tabs .nav.nav-tabs li:before {display:none}
.sidebar-tabs .nav.nav-tabs li a {
    border: 0 none;
    border-radius: 0;
    color: #313131;
    float: left;
    font-family: montserrat;
    font-size: 13px;
    margin: 0;
    padding: 12px 30px;
    text-transform: uppercase;
}
.sidebar-tabs .nav.nav-tabs li.active a {
    background:#444;
    color:#fff;
}
.news-widget {
    float: left;
    margin-bottom: -20px;
    width: 100%;
}
.news {
    border-bottom: 1px solid #2d2d2d;
    float: left;
    margin-bottom: 20px;
    padding-bottom: 20px;
    width: 100%;
}
.news-img {
    float: left;
    margin-right: 20px;
}
.news-detail {overflow: hidden}
.news-detail > h4 {
    color: #fff;
    float: left;
    font-family: montserrat;
    font-size: 14px;
    font-weight: 200;
    line-height: 22px;
    margin: 10px 0;
    width: 100%;
}
.news-detail > h4 a {color: inherit}
.news-detail > span {
    color: #a9a9a9;
    float: left;
    font-family: lato;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    width: 100%;
}
.news:last-child{
    border:0;
    padding:0;
}
.sidebar .tab-content {
    float: left;
    background:none;
    padding: 0 30px;
    width: 100%;
}
.sidebar .tab-content .news {
    border: 0 none;
    margin: 0 0 20px;
    padding: 0;
}
.sidebar .news-detail > h4{color:#313131}
.news-detail .meta {margin:0}
.news-detail .meta li {
    color: #969595;
    font-size: 11px;
    line-height: 20px;
    margin-bottom: 0;
    padding: 0;
    width: auto;
}
.news-detail .meta li:before{display:none}

.product-color {margin:0 -5px -10px}
.product-color a {
    display: inline-block;
    height: 39px;
    margin: 0 5px 10px;
    width: 39px;
}
.color1{background:#ff4d4f}
.color2{background:#2feadb}
.color3{background:#07a59f}
.color4{background:#1fdc00}
.color5{background:#d56001}
.color6{background:#00c1e4}
.color7{background:#054244}
.color8{background:#dadada}
.filter-price{
    float:left;
    width:100%;
}
.filter-price .simple-btn {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-top: 40px;
    padding: 7px 30px;
}
.col-md-3.sidebar .widget {
    padding: 30px;
}
.col-md-3.sidebar .widget {padding:30px}
.popular-widget {
    float: left;
    width: 100%;
    margin-bottom: -20px;
}
.popular-product {
    border-bottom: 1px solid #f6f6f6;
    display: table;
    float: left;
    margin-bottom: 20px;
    padding-bottom: 20px;
    width: 100%;
}
.popular-product:last-child{
    border:0;
    padding:0;
}
.popular-product img {
    display: table-cell;
    vertical-align: middle;
}
.popular-inner {
    display: table-cell;
    padding-left: 20px;
    vertical-align: middle;
}
.popular-inner h6 {
    color: #141414;
    float: left;
    font-family: lato;
    font-size: 12px;
    letter-spacing: 1px;
    line-height: 20px;
    margin: 0 0 10px;
    text-transform: uppercase;
    width: 100%;
}
.popular-inner h6 a{color:inherit}
.popular-inner > span {
    color: #141414;
    float: left;
    font-family: crimson;
    font-size: 18px;
    font-style: italic;
    width: 100%;
}

/*=============== Cart Page ===================*/
.cart-page {
    float: left;
    width: 100%;
}
table {width: 100%}
thead{background: #ececec}
th {
    color: #272727;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 15px 40px;
    text-align: center;
}
td {
    color: #141414;
    font-family: crimson;
    font-size: 18px;
    letter-spacing: 1px;
    text-align: center;
}
.cart-page td strong {
    font-style: italic;
    font-weight: 200;
}
.cart-page td span {
    display: table-cell;
    vertical-align: middle;
    padding:0 10px;
}
.cart-page tr{border-bottom:1px solid #efefef}
.cart-product {
    display: table-cell;
    padding: 30px 50px;
    vertical-align: middle;
}
.cart-page td span i {
    background: #666666;
    color: #fff;
    font-size: 14px;
    height: 40px;
    line-height: 20px;
    padding: 10px;
    width: 40px;
}
.cart-product > img {
    float: left;
    vertical-align: middle;
}
.cart-product h3 {
    color: #141414;
    float: left;
    font-family: hind;
    font-size: 14px;
    font-weight: 600;
    margin-top: 90px;
    padding-left: 40px;
}
.cart-product h3 a { color:inherit}
.cart-btns {
    float: left;
    margin-top: 30px;
    width: 100%;
}
.cart-btns > button {
    background: #3c3c3c none repeat scroll 0 0;
    border: 0 none;
    color: #fff;
    display: inline-block;
    font-family: montserrat;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.6px;
    padding: 13px 30px;
    text-transform: uppercase;
}
.cart-btns > button {
    float: left;
    margin-right: 20px;
}
.cart-page td span.input-group-btn {
    border: 0 none;
    padding: 0;
    width: auto;
}
.cart-page td span.input-group-btn {
    border: 0 none;
    padding: 0;
}
.cart-btns > button.style2 {
    float: right;
    margin-left: 20px;
    margin-right: 0;
}
.cart-extras {
    float: left;
    margin-top: 50px;
    width: 100%;
}
.cart-subtitle {
    color: #141414;
    float: left;
    font-family: lato;
    font-size: 12px;
    font-weight: 700;
    margin: 0 0 20px;
    width: 100%;
}

.cart-form {
    float: left;
    width: 100%;
    margin-bottom:-30px;
}
.cart-field{
    float: left;
    width:100%;
    margin-bottom: 30px;
    }
.cart-field > input {
    border: 1px solid #ececec;
    color: #6f6f6f;
    float: left;
    font-family: crimson;
    font-size: 16px;
    font-style: italic;
    height: 49px;
    padding: 10px 20px;
    width: 100%;
}
.cart-form > button {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 2px solid #e4e4e4;
    color: #141414;
    float: right;
    font-family: montserrat;
    font-size: 12px;
    padding: 10px 20px;
}

.cart-form .select2-container--default .select2-selection--single {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 1px solid #ececec;
}
.cart-form .select2-container .select2-selection--single .select2-selection__rendered {
    color: #6f6f6f;
    font-family: crimson;
    font-size: 16px;
    font-style: italic;
    letter-spacing: 0.9px;
    text-transform: capitalize;
}
.cart-form label {
    color: #141414;
    float: left;
    font-family: crimson;
    font-size: 12px;
    font-style: italic;
    font-weight: 500;
    margin-bottom: 15px;
    width: 100%;
}
.cart-field > button {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 2px solid #e4e4e4;
    color: #141414;
    float: right;
    font-family: montserrat;
    font-size: 12px;
    padding: 10px 20px;
}
.cart-total {
    border: 2px solid #ececec;
    float: left;
    padding:0 20px;
    width: 100%;
}
.total-bar {
    border-bottom: 1px solid #ededed;
    float: left;
    padding:20px 0;
    width: 100%;
}
.total-bar > label {
    color: #141414;
    float: left;
    font-family: lato;
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    margin: 0;
    text-transform: uppercase;
    width: 50%;
}
.total-bar > i {
    color: #141414;
    float: right;
    font-family: crimson;
    font-size: 18px;
}
.choose-shipping {
    float: left;
    width: 50%;
    margin-bottom:-20px;
}
.choose-shipping strong {
    display: table;
    float: left;
    margin-bottom: 20px;
    width: 100%;
}
.choose-shipping strong span {
    color: #6f6f6f;
    display: table-cell;
    font-size: 10px;
    font-weight: 600;
    padding-left: 10px;
    text-transform: uppercase;
    vertical-align: top;
}
.choose-shipping strong input {
    display: table-cell;
    float: none;
    vertical-align: top;
}
.choose-shipping strong span i {
    color: #141414;
    float: left;
    font-family: crimson;
    font-size: 18px;
    font-weight: 500;
    width: 100%;
}
.total-bar i.total{font-size:35px}

.cart-total > p {
    color: #6f6f6f;
    float: left;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.4px;
    line-height: 24px;
    margin: 10px 0 20px;
    width: 100%;
}
.cart-total > a {
    background: black none repeat scroll 0 0;
    color: #fff;
    float: left;
    font-family: montserrat;
    margin-bottom: 20px;
    padding: 14px 20px;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
}
/*=============== Checkout Page  ===================*/
.checkout-text {
    float: left;
    margin-bottom: 20px;
    width: 100%;
}
.checkout-text > p {
    color: #6f6f6f;
    float: left;
    font-family: crimson;
    font-size: 16px;
    font-style: italic;
    margin: 0 30px 0 0;
}
.cart-field.selection > input {
    float: left;
    height: auto;
    margin: 5px 10px 0 0;
    width: auto;
}
.cart-field.selection > label {
    color: #141414;
    display: inline-block;
    float: none;
    font-family: lato;
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    height: auto;
    letter-spacing: 1px;
    line-height: 15px;
    margin: 0;
    text-transform: uppercase;
    width: auto;
}
.your-order {
    background: #f8f7f7 none repeat scroll 0 0;
    border: 3px solid #ececec;
    float: left;
    padding: 40px 25px;
    width: 100%;
}
.your-order > h5 {
    border-bottom: 2px solid #efefef;
    float: left;
    font-family: montserrat;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 15px;
    padding-bottom: 20px;
    text-transform: uppercase;
    width: 100%;
}
.your-order > h5 i{margin-right:10px}

.your-order > ul {
    float: left;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    width: 100%;
}
.your-order li {
    border-bottom: 2px solid #efefef;
    float: left;
    margin-bottom: 15px;
    padding-bottom: 15px;
    width: 100%;
}
.your-order li:last-child{border:0}
.your-order li strong {
    color: #141414;
    display: inline-block;
    font-family: lato;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-right: -4px;
    width: 50%;
}
.your-order li strong:last-child{text-align:right}
.your-order li strong i {
    color: #6f6f6f;
    display: table;
    font-size: 10px;
    font-style: normal;
    margin-bottom: 5px;
}

.your-order li > i {
    color: #141414;
    display: inline-block;
    font-family: crimson;
    font-size: 18px;
    text-align: right;
    vertical-align: bottom;
    width: 50%;
}
.your-order li .cart-field{margin: 0}
.your-order li p {
    color: #6f6f6f;
    float: left;
    font-size: 12px;
    margin: 10px 0;
    width: 100%;
}
.your-order .coloured-btn {
    font-family: lato;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 18px 20px;
    text-align: center;
    width: 100%;
}
/*=============== FAQ'S Page  ===================*/
.toggle.style5 .toggle-item {
    border: 2px solid #ececec;
    margin-bottom: 10px;
    padding: 0;
}
.toggle.style5 .toggle-item h3:before{display:none}
.toggle.style5 .toggle-item h3 {
    float: left;
    width: 100%;
}
.toggle.style5 .toggle-item h3 {
    color: #141414;
    font-family: lato;
    border:0;
    font-size: 14px;
    font-weight: 600;
    padding: 20px 20px 20px 100px;
    position: relative;
}
.toggle.style5 .toggle-item h3 i {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 0 none;
    border-right:2px solid #ececec;
    border-bottom:2px solid transparent;
    border-radius: 0;
    color: #878787;
    font-size: 14px;
    height: 100%;
    left: 0;
    line-height: 59px;
    margin: 0;
    position: absolute;
    top: 0;
    width: 70px;
}
.toggle.style5 .content p {
    color: #454545;
    font-weight: 500;
    padding: 0;
    float: none;
    margin-top: 10px;
    width: auto;
}
.toggle.style5 .content {
    float: left;
    padding: 65px 30px 65px 65px;
    width: 100%;
}
.toggle.style5 .toggle-item.activate{margin-bottom:30px}
.alignleft{
    float: left;
    text-align:left;
    margin-right:30px;
}
.alignright{
    float: right;
    text-align:right;
    margin-left:30px;
}
.faqs-page .tab-content {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    padding: 0;
}
.faqs-page .nav {
    border: 0 none;
    float: left;
    width: 100%;
}
.faqs-page .nav li{margin: 0 10px 0 0}
.faqs-page .nav li a, 
.faqs-page .nav li a:hover, 
.faqs-page .nav li a, 
.faqs-page .nav li.active a{
    background: #eeeeee;
    border: 0 none;
    border-radius: 0;
    color: #4e4e4e;
    font-family: lato;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 12px 25px;
    text-transform: uppercase;
}
.faqs-page .nav li.active a{color:#FFF}

/*=============== Single Project Page ===================*/
.detailed-title.light > h2,
.detailed-title.light > h3{color:#454545}
.detailed-title.light > p{color:#646464}
.detailed-title.style2 {
    padding: 0 90px;
    text-align: center;
    margin-bottom:70px;
}
.project-img {
    float: left;
    width: 100%;
}
.project-img > img{width:100%}
.project-img.style2 > img {
    float: left;
    width: 50%;
}
ul.project-list {
    float: left;
    list-style: outside none none;
    margin: 50px 0 0;
    padding: 0;
    width: 100%;
}
ul.project-list li {
    float: left;
    margin-bottom: 6px;
    width: 100%;
}
ul.project-list strong {
    color: #424242;
    float: left;
    font-family: lato;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    width: 90px;
}
ul.project-list span {
    color: #424242;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 1px;
    padding-left: 20px;
}

.project-detail {
    float: left;
    width: 100%;
}
.project-detail > div {
    padding: 0;
}
.project-info {
    float: left;
    padding:60px 100px 0;
    width: 100%;
}

/*=============== About Project ===================*/
.about-project {
    display: table;
    width: 100%;
}
.about-project-img.lightbox {
    display: table-cell;
    position: relative;
    vertical-align: middle;
}
.about-project-img .play-circle {
    background: #979696 none repeat scroll 0 0;
    border: 0 none;
    color: #fff;
    height: 89px;
    left: 50%;
    line-height: 89px;
    position: absolute;
    top: 50%;
    width: 89px;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
.about-project-detail {
    display: table-cell;
    padding-left: 30px;
    vertical-align: middle;
}
.about-project-detail > h4 {
    color: #454545;
    float: left;
    font-size: 30px;
    font-weight: 700;
    margin: 0 0 20px;
    width: 100%;
}
.about-project-detail > p {
    color: #646464;
    float: left;
    font-size: 15px;
    width: 100%;
}
.about-project-detail .project-list{margin-top:30px}

/*=============== Single Post ===================*/
.post-title {
    color: #313131;
    float: left;
    font-size: 17px;
    margin: 0 0 20px;
    width: 100%;
}
.single-blog .meta > li {
    color: #6f6f6f;
    font-size: 12px;
}
.single-blog .meta{margin-bottom:20px}
.single-blog .meta > li i{margin-right:5px}
.single-blog p {
    color: #424242;
    font-size: 14px;
    letter-spacing: 0.8px;
}
.tagcloud {
    color: #a2a2a2;
    float: left;
    margin-top: 90px;
    width: 100%;
}
.tagcloud strong {
    color: #000000;
    float: left;
    font-family: montserrat;
    font-size: 20px;
    font-weight: 500;
    line-height: 20px;
    margin-bottom: 10px;
    width: 100%;
}
.tagcloud > a {
    color: #a2a2a2;
    font-family: lato;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1px;
}
.about-author {
    background: #f9f9f9;
    display: table;
    float: left;
    margin-top: 50px;
    padding: 15px;
    width: 100%;
}
.about-author > img {
    display: table-cell;
    vertical-align: middle;
}
.about-author-inner {
    display: table-cell;
    padding-left: 50px;
    vertical-align: middle;
}
.about-author-inner > h4 {
    color: #010000;
    float: left;
    font-size: 20px;
    margin: 0 0 5px;
    width: 100%;
}
.about-author-inner > span {
    color: #a2a2a2;
    float: left;
    font-size: 12px;
    letter-spacing: 2px;
    width: 100%;
}
.about-author-inner > p {
    color: #626262;
    float: left;
    font-family: lato;
    font-size: 15px;
    line-height: 30px;
    margin: 10px 0 0;
    width: 100%;
}

.share-post {
    float: left;
    margin-top: 50px;
    text-align: center;
    width: 100%;
}
.share-post > a {
    background: #393939 none repeat scroll 0 0;
    color: #fff;
    display: inline-block;
    height: 40px;
    line-height: 40px;
    margin: 0 12px;
    text-align: center;
    width: 40px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
.share-post > a i {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.comment-sec {
    border-top: 2px solid #cdcdcd;
    float: left;
    margin-top: 50px;
    padding-top: 40px;
    width: 100%;
}
.comment-sec > ul {
    float: left;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    width: 100%;
}
.comment-sec li {
    float: left;
    margin: 0 0 30px;
    width: 100%;
}
.comment-sec li:last-child{margin:0}
.comment {
    display: table;
    float: left;
    width: 100%;
}
.comment > img {
    display: table-cell;
    vertical-align: middle;
}
.comment-detail {
    display: table-cell;
    padding-left: 30px;
    vertical-align: middle;
}
.comment-info {
    color: #010000;
    float: left;
    font-family: lato;
    font-size: 18px;
    font-weight: 800;
    margin: 0 0 14px;
    width: 100%;
}
.comment-info > i {
    color: #939393;
    font-size: 14px;
    font-weight: 500;
    margin-left: 10px;
}
.comment-detail > a {
    background: black none repeat scroll 0 0;
    color: #fff;
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    margin-top: 10px;
    padding: 6px 15px 5px;
    text-transform: uppercase;
}
.comment-sec ul ul {
    float: left;
    list-style: outside none none;
    margin: 30px 0 0;
    padding: 0 0 0 40px;
    width: 100%;
}

.fancy-form > h4 {
    color: #454545;
    float: left;
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 20px;
    width: 100%;
}
.single-blog {
    float: left;
    width: 100%;
}
.single-blog .fancy-post{margin:0}

/*=============== Team Detail Page  ===================*/
.member-intro {
    float: left;
    position: relative;
    width: 100%;
}
.member-intro > img {
    width: 100%;
}
.member-intro-inner {
    padding: 10px 30px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 50%;
}
.member-intro-inner > span {
    color: #fff;
    float: left;
    font-family: lato;
    font-size: 20px;
    font-style: italic;
    width: 100%;
}
.member-intro-inner > span i{font-size:14px}
.member-intro-inner > h4 {
    color: #fff;
    float: left;
    font-size: 30px;
    font-weight: 600;
    margin: 5px 0 10px;
    width: 100%;
}
.member-intro-inner > p {
    color: #b4b4b4;
    float: left;
    font-size: 15px;
    margin-bottom: 20px;
    width: 100%;
}
.member-intro-inner > a {
    background: black none repeat scroll 0 0;
    color: #fff;
    float: left;
    font-family: hind;
    font-size: 14px;
    margin-right: 15px;
    padding: 14px 25px;
    text-transform: uppercase;
}
.price-table.style2 .package-table {
    border: 0 none;
    padding: 0 20px 20px;
    position: relative;
}
.price-table.style2 .package-table:before {
    border: 5px solid #e7e7e7;
    bottom: 0;
    content: "";
    height: 85%;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: -1;
}
.price-table.style2 .package-table:hover:before{
    height:100%;
    border:0;
}
.rounded-price {
    background: #efefef;
    color: #313131;
    display: inline-block;
    font-family: lato;
    font-size: 40px;
    font-weight: 800;
    height: 135px;
    line-height: 25px;
    margin-top: 30px;
    padding: 41px 10px;
    position: relative;
    width: 135px;
}
.price-table.style2 .package-table:hover .rounded-price{background:#FFF}
.rounded-price i {
    font-size: 25px;
    font-style: normal;
    vertical-align: top;
}
.rounded-price > span {
    float: left;
    font-size: 13px;
    width: 100%;
}
.price-table.style2 .package-table > ul{padding:10px 0 20px}
.package-table > p {
    color: #4a4949;
    float: left;
    font-size: 13px;
    margin: 20px 0 10px;
    padding: 0 10px;
    width: 100%;
}
.package-table strong {
    color: #313131;
    float: left;
    font-size: 15px;
    margin-top: 20px;
    width: 100%;
}
.price-table.style2 .package-table:hover > p,
.price-table.style2 .package-table:hover > strong{color:#FFF}
.price-table.style2 .package-table:hover li:nth-child(2n+1){ background:rgba(0,0,0,0.1); }
.price-table.style2 .package-table:hover li{color:#FFF}
.price-table.style2 .dark-btn {
    background: #555252 none repeat scroll 0 0;
    margin-bottom: 20px;
    padding: 10px 23px;
}
.price-table.style2 .package-table:hover .dark-btn{
    background:#FFF;
    color:#333;
}
/*=============== Footer  ===================*/
footer {
    background: #282828 none repeat scroll 0 0;
    float: left;
    width: 100%;
}
footer .block {padding:75px 0}
.footer-widgets{
    float:left;
    width:100%;
    margin-bottom:-30px;
}
.widget{
    float:left;
    width:100%;
    margin-bottom:30px;
}
.about-widget {
    float: left;
    width: 100%;
}
.about-logo {
    float: left;
    margin-bottom: 10px;
    width: 100%;
}
.about-widget > p {
    color: #969595;
    float: left;
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 20px;
    width: 100%;
}
.about-widget > ul {
    float: left;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    width: 100%;
}
.about-widget li {
    float: left;
    margin-bottom: 10px;
    padding: 0;
    width: 100%;
}
.about-widget li:before{display:none}
.about-widget li i {
    float: left;
    line-height: 19px;
    margin-right: 10px;
}
.about-widget li span {
    border: 0 none;
    border-radius: 0;
    color: #969595;
    display: list-item;
    float: none;
    font-family: hind;
    font-size: 14px;
    font-weight: 400;
    height: auto;
    line-height: 20px;
    overflow: hidden;
    text-align: left;
    vertical-align: top;
    width: auto;
}
.about-widget li:last-child{margin:0}
.dark-socials {
    border-top: 1px solid #333333;
    float: left;
    margin-top: 15px;
    padding-top: 20px;
    width: 100%;
}
.dark-socials > a {
    background:#4e4e4e;
    color: #fff;
    float: left;
    font-size: 12px;
    height: 27px;
    line-height: 30px;
    margin-right: 7px;
    text-align: center;
    width: 27px;
}
.widget-title {
    float: left;
    margin-bottom: 20px;
    position: relative;
    width: 100%;
}
.widget-title > h4 {
    color: #fff;
    float: left;
    font-size: 14px;
    font-weight: 600;
    line-height: 17px;
    margin: 0;
    padding-left: 10px;
    position: relative;
    width: 100%;
}
.widget-title > h4:before {
    color: #fff;
    content: "\f142";
    font-family: fontawesome;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 10px;
}

.tagclouds {
    float: left;
    margin-bottom: -10px;
    width: 100%;
}
.tagclouds > a {
    background: #4a4a4a;
    color: #969595;
    float: left;
    font-family: hind;
    font-size: 13px;
    margin-bottom: 10px;
    margin-right: 10px;
    padding: 5px 15px;
}
.tagclouds > a:hover{color:#FFF}

.mailing {
    float: left;
    width: 100%;
}
.mailing > p {
    float: left;
    font-size: 14px;
    line-height: 21px;
    margin-bottom: 15px;
    width: 100%;
}
.mailing form {
    background: #fff none repeat scroll 0 0;
    float: left;
    height: 35px;
    margin-bottom: 17px;
    padding-right: 50px;
    position: relative;
    width: 100%;
}
.mailing form input {
    border: 0 none;
    color: #9e9e9e;
    float: left;
    font-size: 13px;
    height: 100%;
    padding: 6px 20px;
    width: 100%;
}
.mailing form button {
    border: 0 none;
    color: #fff;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
}

.blog-widget {
    float: left;
    margin-bottom: -20px;
    width: 100%;
}
.widget-post {
    border-bottom: 1px solid #333333;
    display: table;
    float: left;
    margin-bottom: 20px;
    padding-bottom: 20px;
    width: 100%;
}
.widget-post:last-child{
    padding-bottom:0;
    border:0;
}
.post-widget-img {
    display: table-cell;
    vertical-align: middle;
}
.widget-post-detail {
    display: table-cell;
    padding-left: 10px;
    vertical-align: middle;
}
.widget-post-detail > h5 {
    color: #e1e1e1;
    float: left;
    font-family: hind;
    font-weight:200;
    font-size: 14px;
    margin: 0;
    width: 100%;
}
.widget-post-detail > h5 a{color:inherit}
.widget-post-detail > span {
    color: #6b6b6b;
    float: left;
    font-family: hind;
    font-size: 10px;
    margin-top: 6px;
    width: 100%;
}
.readmore {
    color: #969595;
    float: left;
    font-size: 12px;
    margin-top: 10px;
}
.contactform {
    float: left;
    width: 100%;
}
.contactform > input, .contactform > textarea {
    background: #313131 none repeat scroll 0 0;
    border: 1px solid #4a4a4a;
    color: #949393;
    float: left;
    font-family: hind;
    font-size: 11px;
    height: 35px;
    margin-bottom: 10px;
    padding: 5px 20px;
    width: 100%;
}
.contactform > textarea {
    height: auto;
    min-height: 90px;
}
.contactform > button{
    background: black none repeat scroll 0 0;
    border: 0 none;
    color: #fff;
    float: left;
    font-size: 13px;
    font-weight: 600;
    margin-top: 20px;
    padding: 7px 25px;
    text-transform: uppercase;
}
.bottom-footer {
    background:#1c1c1c;
    float: left;
    width: 100%;
}
.bottom-footer p {
    float: left;
    margin: 0;
    padding: 23px 0;
}
.bottom-footer ul {
    float: right;
    list-style: outside none none;
    margin: 0;
    padding: 10px 0;
}
.bottom-footer ul li {float:left}
.bottom-footer li a{
    color: #6b6b6b;
    float: left;
    font-size: 13px;
    padding: 3px 10px;
}
.photos-carousel {
    float: left;
    width: 100%;
}
.gallery-slide {
    float: left;
    width: 100%;
}
.gallery-slide > div {padding:0.5px}
.gallery-slide a {
    float: left;
    position: relative;
    width: 100%;
}
.gallery-slide a img{width:100%}
.gallery-slide a:before {
    background:#111111;
    content: "";
    height:0;
    left: 0;
    opacity: 0.75;
    z-index:1;
    position: absolute;
    top: 0;
    width: 100%;
-webkit-transition: all 500ms cubic-bezier(0.785, 0.135, 0.150, 0.860); 
   -moz-transition: all 500ms cubic-bezier(0.785, 0.135, 0.150, 0.860); 
     -o-transition: all 500ms cubic-bezier(0.785, 0.135, 0.150, 0.860); 
        transition: all 500ms cubic-bezier(0.785, 0.135, 0.150, 0.860); /* easeInOutCirc */

-webkit-transition-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860); 
   -moz-transition-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860); 
     -o-transition-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860); 
        transition-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860); /* easeInOutCirc */
}
.gallery-slide a:hover:before{height:100%}
.gallery-slide a i {
    color: #ffffff;
    font-size: 8px;
    height: 21px;
    line-height: 20px;
    text-align: center;
    width: 21px;
    z-index:1;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform:translateX(-50%) translateY(-50%) scale(0);
    -moz-transform:translateX(-50%) translateY(-50%) scale(0);
    -ms-transform:translateX(-50%) translateY(-50%) scale(0);
    -o-transform:translateX(-50%) translateY(-50%) scale(0);
    transform:translateX(-50%) translateY(-50%) scale(0);

-webkit-transition: all 500ms cubic-bezier(0.785, 0.135, 0.150, 0.860); 
   -moz-transition: all 500ms cubic-bezier(0.785, 0.135, 0.150, 0.860); 
     -o-transition: all 500ms cubic-bezier(0.785, 0.135, 0.150, 0.860); 
        transition: all 500ms cubic-bezier(0.785, 0.135, 0.150, 0.860); /* easeInOutCirc */

-webkit-transition-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860); 
   -moz-transition-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860); 
     -o-transition-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860); 
        transition-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860); /* easeInOutCirc */
}
.gallery-slide a:hover i{
    -webkit-transform:translateX(-50%) translateY(-50%) scale(1);
    -moz-transform:translateX(-50%) translateY(-50%) scale(1);
    -ms-transform:translateX(-50%) translateY(-50%) scale(1);
    -o-transform:translateX(-50%) translateY(-50%) scale(1);
    transform:translateX(-50%) translateY(-50%) scale(1);
}
.viewmore {
    color: #969595;
    float: left;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    line-height: 15px;
    margin-top: 15px;
}
.viewmore i{margin-left:5px}

.photos-carousel .owl-nav {
    height: auto;
    left: auto;
    position: absolute;
    right: 0;
    top: -50px;
    width: auto;
}
.photos-carousel .owl-nav > div {
    background:#4a4a4a none repeat scroll 0 0;
    color: rgba(0, 0, 0, 0);
    float: left;
    height: 26px;
    margin-top:0;
    margin-left: 5px;
    position: relative;
    width: 26px;
}
.photos-carousel .owl-nav > div:before {
    color: #ffffff;
    content: "\f104";
    font-family: fontawesome;
    font-size: 14px;
    height: 100%;
    left: 0;
    line-height: 24px;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
}
.photos-carousel .owl-nav > div.owl-next:before{content:"\f105"}
.photos-carousel .owl-nav > div.owl-next {margin-right:0}
.intro-widget {
    float: left;
    text-align: center;
    width: 100%;
}
.widget-logo {
    float: left;
    margin-bottom: 30px;
    width: 100%;
}
.widget-logo img {width:120px}
.intro-widget .photography > a {margin:0 1px}
.intro-widget .photography {margin-bottom:20px}
.intro-widget > p {
    color: #b5b5b5;
    float: left;
    font-size: 14px;
    line-height: 24px;
    margin-bottom: 20px;
    width: 100%;
}
footer .block.blackish:before{opacity:0.96}
.intro-widget > a {
    border: 1px solid #fff;
    display: inline-block;
    font-size: 11px;
    padding: 7px 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    border-radius: 20px;
}
.intro-widget > a:hover{color:#FFF}
.intro-widget .photography img{width:109px}


.footer-widgets.style2 .row {margin:0 -32px}
.footer-widgets.style2 .row > div {
    padding:80px 33px;
    position: relative;
}
.footer-widgets.style2 > .row > div:before, 
.footer-widgets.style2 > .row > div:after {
    background: #282929;
    content: "";
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    width: 0.5px;
}
.footer-widgets.style2{margin: -75px 0}
.footer-widgets.style2 .row > div:after{
    left: auto;
    right: -1px;
}
.footer-widgets.style2 > .row > div:first-child:before, 
.footer-widgets.style2 > .row > div:last-child:after{display: none}
.footer-widgets.style2 .widget{position:relative}
.footer-widgets.style2 .widget:before{
    background: red none repeat scroll 0 0;
    content: "";
    height: 60px;
    margin-top: -30px;
    position: absolute;
    right: -34px;
    top: 50%;
    width: 1px;
    z-index: 1;
}
.footer-widgets.style2 > .row > div:last-child .widget:before{display: none}
.about-widget.style2 li {
    color: #dddddd;
    font-size: 13px;
}
.about-widget.style2 .dark-socials {
    border: 0 none;
    margin-top: 30px;
    padding: 0;
}
.facebook{background:#2e4da7!important}
.twitter{background: #54abee!important}
.google-plus{background:#e94136!important}
.dribbble{background:#ff0bac!important}
.linkedin{background:#1f76b6!important}

.bottom-footer.style2 {
    background: #ffffff;
    text-align: center;
}
.bottom-footer.style2 p{width:101%}

/*=============== Error Page ===================*/
.error-page {
    float: left;
    text-align: center;
    width: 100%;
}
.error-page > h4 {
    color: #171717;
    float: left;
    font-family: open sans;
    font-size: 30px;
    font-weight: 600;
    letter-spacing: 10px;
    width: 100%;
}
.error-page p {
    color: #171717;
    float: left;
    font-size: 12px;
    font-style: italic;
    line-height: 20px;
    margin:0 0 30px;
    width: 100%;
}
.error-page strong {
    float: left;
    font-family: poppins;
    font-size: 150px;
    font-weight: 800;
    line-height: 110px;
    margin-bottom: 40px;
    width: 100%;
}
.error-page > i {
    color: #000000;
    float: left;
    font-size: 40px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 7px;
    width: 100%;
}

/*=============== Comming Soon Page ===================*/
.comming-soon-page {
    background: #222 url("http://www.domihut.com/proxy.php?url=http%3A%2F%2Fwww.exclusivapiscinas.com.br%2Fstatic%2Fcss%2F..%2Fimg%2Fparallax20.jpg") no-repeat scroll 0 0 / cover ;
    float: left;
    width: 100%;
    padding: 0 0 100px;
    position: relative;
    z-index:1;
}
.comming-soon-page:before{
    background: black none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.5;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}
.header {
    float: left;
    padding-top: 30px;
    width: 100%;
}
.comming-logo {float:left}
.launching {
    float: left;
    margin-top: 100px;
    text-align: center;
    width: 100%;
}
.launching h1 {
    color: #fff;
    float: left;
    font-size: 50px;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 40px;
    margin: 0 0 10px;
    width: 100%;
}
.launching > span {
    color: #fff;
    float: left;
    font-family: lato;
    font-size: 15px;
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0.4px;
    width: 100%;
}
.comming-soon-page .timer {
    float: left;
    margin-top: 30px;
    width: 100%;
}
.comming-soon-page .timer ul {
    float: left;
    list-style: outside none none;
    margin: 0;
    padding: 0 0 50px;
    position: relative;
    width: 100%;
}
.comming-soon-page .timer ul li {
    background:rgba(255,255,255,0.2);
    border: 2px solid #FFF;
    font-size: 20px;
    padding:0;
    height: 135px;
    line-height: 135px;
    margin-right: 20px;
    position: relative;
    text-align: center;
    width: 135px;
}
.comming-soon-page .timer ul li span {
    color: #fff;
    font-family: open sans;
    font-size: 45px;
    font-weight:300;
}
.comming-soon-page .timer ul li p {
    color: #fff;
    font-family: open sans;
    font-size: 13px;
    font-weight: 600;
    left: 0;
    letter-spacing: 3px;
    margin-top: 12px;
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    top: 100%;
    width: 100%;
}
.stay {
    float: right;
}
.stay strong {
    color: #fff;
    float: left;
    font-size: 20px;
    font-weight: 800;
    text-align: center;
    width: 100%;
}
.stay .dark-socials {
    border: 0 none;
    margin: 20px 0 0;
    padding: 0;
    text-align: center;
}
.stay .dark-socials a {
    background: #686868 none repeat scroll 0 0;
    display: inline-block;
    float: none;
    margin: 0 2px;
    background: #595959 none repeat scroll 0 0;
    color: #fff;
    height: 33px;
    line-height: 33px;
    width: 33px;
}
.comming-soon-page ~ .bottom-footer p{
    text-align:center;
    width:100%;
}
.comming-soon-page.style2{background-image: url("http://www.domihut.com/proxy.php?url=http%3A%2F%2Fwww.exclusivapiscinas.com.br%2Fstatic%2Fcss%2F..%2Fimg%2Fparallax31.jpg")}
.comming-soon-page.style2 .launching h1{font-size:40px}
.comming-soon-page.style2 .launching > span{
    padding: 0 80px;
    line-height: 25px;
}
.comming-soon-page.style2 .timer ul li{border-radius:0}
.comming-soon-page.style2 .timer ul li:before{
    content: "";
    position: absolute;
    left: -2px;
    top: -2px;
    width: 50%;
    height: 103%;
    border-left: 2px solid #000;
    border-bottom:3px solid #000;
    border-top: 2px solid #000;
}
.comming-soon-page.style2 .timer ul li span {
    line-height: 75px;
    font-size: 48px;
    font-weight: 500;
    padding-top: 8px;
    position: relative;
}
.comming-soon-page.style2 .timer ul li span:before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 30px;
    height: 2px;
    background: #FFF;
    margin-left: -15px;
}
.comming-soon-page.style2 .timer ul li p {
    top: auto;
    bottom: 20px;
}
.subscribtion {
    background: #fff none repeat scroll 0 0;
    display: table;
    margin: 0 auto;
    width: 50%;
}
.subscribtion input {
    border: 0 none;
    color: #020202;
    float: left;
    font-family: lato;
    font-size: 12px;
    height: 50px;
    padding: 10px 20px;
    width: 75%;
}
.subscribtion button {
    background: #313030;
    border: 0 none;
    color: #fff;
    float: left;
    font-family: montserrat;
    font-size: 12px;
    height: 50px;
    letter-spacing: 2px;
    width: 25%;
}
.comming-soon-page.style2 .timer{margin-top:60px}

/** ISOTOPE STYLING **/
.isotope-item {
  z-index:2;
}
.isotope-hidden.isotope-item {
  pointer-events:none;
  z-index:1;
}
.isotope,
.isotope .isotope-item {
  -webkit-transition-duration:0.8s;
     -moz-transition-duration:0.8s;
      -ms-transition-duration:0.8s;
       -o-transition-duration:0.8s;
          transition-duration:0.8s;
}
.isotope {
  -webkit-transition-property:height, width;
     -moz-transition-property:height, width;
      -ms-transition-property:height, width;
       -o-transition-property:height, width;
          transition-property:height, width;
}
.isotope .isotope-item {
  -webkit-transition-property:-webkit-transform, opacity;
     -moz-transition-property:   -moz-transform, opacity;
      -ms-transition-property:    -ms-transform, opacity;
       -o-transition-property:     -o-transform, opacity;
          transition-property:        transform, opacity;
}
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration:0s;
     -moz-transition-duration:0s;
      -ms-transition-duration:0s;
       -o-transition-duration:0s;
          transition-duration:0s;
}


    
/* ===============================================================
    SELECT2 PLUGIN STYLING
================================================================*/
.select2-container{box-sizing:border-box;display:inline-block;margin:0;position:relative;vertical-align:middle;z-index: 10000000000000;}.select2-container .select2-selection--single{box-sizing:border-box;cursor:pointer;display:block;user-select:none;-webkit-user-select:none;}.select2-container .select2-selection--single .select2-selection__rendered{display:block;padding-left:8px;padding-right:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered{padding-right:8px;padding-left:20px;}.select2-container .select2-selection--multiple{box-sizing:border-box;cursor:pointer;display:block;min-height:32px;user-select:none;-webkit-user-select:none;}.select2-container .select2-selection--multiple .select2-selection__rendered{display:inline-block;overflow:hidden;padding-left:8px;text-overflow:ellipsis;white-space:nowrap;}.select2-container .select2-search--inline{float:left;}.select2-container .select2-search--inline .select2-search__field{box-sizing:border-box;border:none;font-size:100%;margin-top:5px;}.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none;}.select2-dropdown{background-color:white;border:1px solid #aaa;border-radius:4px;box-sizing:border-box;display:block;position:absolute;left:-100000px;width:100%;z-index:1051;}.select2-results{display:block;}.select2-results__options{list-style:none;margin:0;padding:0;}.select2-results__option{padding:6px;user-select:none;-webkit-user-select:none;}.select2-results__option[aria-selected]{cursor:pointer;}.select2-container--open .select2-dropdown{left:0;}.select2-container--open .select2-dropdown--above{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0;}.select2-container--open .select2-dropdown--below{border-top:none;border-top-left-radius:0;border-top-right-radius:0;}.select2-search--dropdown{display:block;padding:4px;}.select2-search--dropdown .select2-search__field{padding:4px;width:100%;box-sizing:border-box;}.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none;}.select2-search--dropdown.select2-search--hide{display:none;}.select2-close-mask{border:0;margin:0;padding:0;display:block;position:fixed;left:0;top:0;min-height:100%;min-width:100%;height:auto;width:auto;opacity:0;z-index:99;background-color:#fff;filter:alpha(opacity=0);}.select2-container--default .select2-selection--single{background-color:#fff;border:1px solid #aaa;border-radius:4px;}.select2-container--default .select2-selection--single .select2-selection__rendered{color:#444;}.select2-container--default .select2-selection--single .select2-selection__clear{cursor:pointer;float:right;font-weight:bold;}.select2-container--default .select2-selection--single .select2-selection__placeholder{color:#999;}.select2-container--default .select2-selection--single .select2-selection__arrow{position:absolute;top:1px;right:1px;width:40px;}.select2-container--default .select2-selection--single .select2-selection__arrow b{border-color:#888 transparent transparent transparent;border-style:solid;border-width:5px 4px 0 4px;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute;top:50%;width:0;}.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear{float:left;}.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow{left:1px;right:auto;}.select2-container--default.select2-container--disabled .select2-selection--single{background-color:#eee;cursor:default;}.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear{display:none;}.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888 transparent;border-width:0 4px 5px 4px;}.select2-container--default .select2-selection--multiple{background-color:white;border:1px solid #aaa;border-radius:4px;cursor:text;}.select2-container--default .select2-selection--multiple .select2-selection__rendered{box-sizing:border-box;list-style:none;margin:0;padding:0 5px;width:100%;}.select2-container--default .select2-selection--multiple .select2-selection__placeholder{color:#999;margin-top:5px;float:left;}.select2-container--default .select2-selection--multiple .select2-selection__clear{cursor:pointer;float:right;font-weight:bold;margin-top:5px;margin-right:10px;}.select2-container--default .select2-selection--multiple .select2-selection__choice{background-color:#e4e4e4;border:1px solid #aaa;border-radius:4px;cursor:default;float:left;margin-right:5px;margin-top:5px;padding:0 5px;}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{color:#999;cursor:pointer;display:inline-block;font-weight:bold;margin-right:2px;}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{color:#333;}.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice,.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__placeholder{float:right;}.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice{margin-left:5px;margin-right:auto;}.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove{margin-left:2px;margin-right:auto;}.select2-container--default.select2-container--focus .select2-selection--multiple{border:solid black 1px;outline:0;}.select2-container--default.select2-container--disabled .select2-selection--multiple{background-color:#eee;cursor:default;}.select2-container--default.select2-container--disabled .select2-selection__choice__remove{display:none;}.select2-container--default.select2-container--open.select2-container--above .select2-selection--single,.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple{border-top-left-radius:0;border-top-right-radius:0;}.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple{border-bottom-left-radius:0;border-bottom-right-radius:0;}.select2-container--default .select2-search--dropdown .select2-search__field{border:1px solid #aaa;}.select2-container--default .select2-search--inline .select2-search__field{background:transparent;border:none;outline:0;}.select2-container--default .select2-results>.select2-results__options{max-height:200px;overflow-y:auto;}.select2-container--default .select2-results__option[role=group]{padding:0;}.select2-container--default .select2-results__option[aria-disabled=true]{color:#999;}.select2-container--default .select2-results__option[aria-selected=true]{}.select2-container--default .select2-results__option .select2-results__option{padding-left:1em;}.select2-container--default .select2-results__option .select2-results__option .select2-results__group{padding-left:0;}.select2-container--default .select2-results__option .select2-results__option .select2-results__option{margin-left:-1em;padding-left:2em;}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-2em;padding-left:3em;}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-3em;padding-left:4em;}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-4em;padding-left:5em;}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-5em;padding-left:6em;}.select2-container--default .select2-results__option--highlighted[aria-selected]{background-color:#5897fb;color:white;}.select2-container--default .select2-results__group{cursor:default;display:block;padding:6px;}.select2-container--classic .select2-selection--single{background-color:#f6f6f6;border:1px solid #aaa;border-radius:4px;outline:0;background-image:-webkit-linear-gradient(top, #ffffff 50%, #eeeeee 100%);background-image:-o-linear-gradient(top, #ffffff 50%, #eeeeee 100%);background-image:linear-gradient(to bottom, #ffffff 50%, #eeeeee 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee', GradientType=0);}.select2-container--classic .select2-selection--single:focus{border:1px solid #5897fb;}.select2-container--classic .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px;}.select2-container--classic .select2-selection--single .select2-selection__clear{cursor:pointer;float:right;font-weight:bold;margin-right:10px;}.select2-container--classic .select2-selection--single .select2-selection__placeholder{color:#999;}.select2-container--classic .select2-selection--single .select2-selection__arrow{background-color:#ddd;border:none;border-left:1px solid #aaa;border-top-right-radius:4px;border-bottom-right-radius:4px;height:26px;position:absolute;top:1px;right:1px;width:20px;background-image:-webkit-linear-gradient(top, #eeeeee 50%, #cccccc 100%);background-image:-o-linear-gradient(top, #eeeeee 50%, #cccccc 100%);background-image:linear-gradient(to bottom, #eeeeee 50%, #cccccc 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#cccccc', GradientType=0);}.select2-container--classic .select2-selection--single .select2-selection__arrow b{border-color:#888 transparent transparent transparent;border-style:solid;border-width:5px 4px 0 4px;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute;top:50%;width:0;}.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__clear{float:left;}.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow{border:none;border-right:1px solid #aaa;border-radius:0;border-top-left-radius:4px;border-bottom-left-radius:4px;left:1px;right:auto;}.select2-container--classic.select2-container--open .select2-selection--single{border:1px solid #5897fb;}.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow{background:transparent;border:none;}.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888 transparent;border-width:0 4px 5px 4px;}.select2-container--classic.select2-container--open.select2-container--above .select2-selection--single{border-top:none;border-top-left-radius:0;border-top-right-radius:0;background-image:-webkit-linear-gradient(top, #ffffff 0%, #eeeeee 50%);background-image:-o-linear-gradient(top, #ffffff 0%, #eeeeee 50%);background-image:linear-gradient(to bottom, #ffffff 0%, #eeeeee 50%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee', GradientType=0);}.select2-container--classic.select2-container--open.select2-container--below .select2-selection--single{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0;background-image:-webkit-linear-gradient(top, #eeeeee 50%, #ffffff 100%);background-image:-o-linear-gradient(top, #eeeeee 50%, #ffffff 100%);background-image:linear-gradient(to bottom, #eeeeee 50%, #ffffff 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#ffffff', GradientType=0);}.select2-container--classic .select2-selection--multiple{background-color:white;border:1px solid #aaa;border-radius:4px;cursor:text;outline:0;}.select2-container--classic .select2-selection--multiple:focus{border:1px solid #5897fb;}.select2-container--classic .select2-selection--multiple .select2-selection__rendered{list-style:none;margin:0;padding:0 5px;}.select2-container--classic .select2-selection--multiple .select2-selection__clear{display:none;}.select2-container--classic .select2-selection--multiple .select2-selection__choice{background-color:#e4e4e4;border:1px solid #aaa;border-radius:4px;cursor:default;float:left;margin-right:5px;margin-top:5px;padding:0 5px;}.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove{color:#888;cursor:pointer;display:inline-block;font-weight:bold;margin-right:2px;}.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover{color:#555;}.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice{float:right;}.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice{margin-left:5px;margin-right:auto;}.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove{margin-left:2px;margin-right:auto;}.select2-container--classic.select2-container--open .select2-selection--multiple{border:1px solid #5897fb;}.select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple{border-top:none;border-top-left-radius:0;border-top-right-radius:0;}.select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0;}.select2-container--classic .select2-search--dropdown .select2-search__field{border:1px solid #aaa;outline:0;}.select2-container--classic .select2-search--inline .select2-search__field{outline:0;}.select2-container--classic .select2-dropdown{background-color:white;border:1px solid transparent;}.select2-container--classic .select2-dropdown--above{border-bottom:none;}.select2-container--classic .select2-dropdown--below{border-top:none;}.select2-container--classic .select2-results>.select2-results__options{max-height:200px;overflow-y:auto;}.select2-container--classic .select2-results__option[role=group]{padding:0;}.select2-container--classic .select2-results__option[aria-disabled=true]{color:grey;}.select2-container--classic .select2-results__option--highlighted[aria-selected]{background-color:#3875d7;color:white;}.select2-container--classic .select2-results__group{cursor:default;display:block;padding:6px;}.select2-container--classic.select2-container--open .select2-dropdown{border-color:#5897fb;}

.select2-container {
    float: left;
    width: 100% !important;
}
.select2-container--default .select2-selection--single {
    background: #efefef none repeat scroll 0 0;
    border: 0 none;
    border-radius: 0;
    height: 47px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {height: 100%;}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #818181;
    font-size: 14px;
    font-weight: 400;
    height: 100%;
    letter-spacing: 1.5px;
    line-height: 47px;
}
.select2-dropdown {
    background: #efefef none repeat scroll 0 0;
    border: 0 none;
    box-shadow: 0 4px 3px #ededed;
    padding: 20px;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    float: left;
    margin-bottom: 20px;
    width: 100%;
}
.select2-search--dropdown {
    float: left;
    width: 100%;
}
.select2-results {
    float: left;
    width: 100%;
}
.select2-results__option {
    font-size: 12px;
    padding: 8px 20px;
}
.select2-container .select2-selection--single .select2-selection__rendered {padding: 0 40px 0 20px;}


/* ===============================================================
    OWL CAROUSEL STYLING
================================================================*/
.owl-carousel .animated{-webkit-animation-duration:1000ms;animation-duration:1000ms;-webkit-animation-fill-mode:both;animation-fill-mode:both;}.owl-carousel .owl-animated-in{z-index:0;}.owl-carousel .owl-animated-out{z-index:1;}.owl-carousel .fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut;}@-webkit-keyframes fadeOut{0%{opacity:1;}100%{opacity:0;}}@keyframes fadeOut{0%{opacity:1;}100%{opacity:0;}}/* *   Owl Carousel - Auto Height Plugin*/.owl-height{-webkit-transition:height 500ms ease-in-out;-moz-transition:height 500ms ease-in-out;-ms-transition:height 500ms ease-in-out;-o-transition:height 500ms ease-in-out;transition:height 500ms ease-in-out;}/* *  Core Owl Carousel CSS File*/.owl-carousel{display:none;-webkit-tap-highlight-color:transparent;/* position relative and z-index fix webkit rendering fonts issue */position:relative;z-index:1;}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0;}.owl-carousel .owl-stage-outer{max-height: 800px; position:relative;overflow:hidden;/* fix for flashing background */-webkit-transform:translate3d(0px, 0px, 0px);}.owl-carousel .owl-controls .owl-nav .owl-prev,.owl-carousel .owl-controls .owl-nav .owl-next,.owl-carousel .owl-controls .owl-dot{cursor:pointer;cursor:hand;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}.owl-carousel.owl-loaded{display:block;}.owl-carousel.owl-loading{opacity:0;display:block;}.owl-carousel.owl-hidden{opacity:0;}.owl-carousel .owl-refresh .owl-item{display:none;}.owl-carousel .owl-item{position:relative;min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}.owl-carousel .owl-item img{-webkit-transform-style:preserve-3d;}.owl-carousel.owl-text-select-on .owl-item{-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto;}.owl-carousel .owl-grab{cursor:move;cursor:-webkit-grab;cursor:-o-grab;cursor:-ms-grab;cursor:grab;}.owl-carousel.owl-rtl{direction:rtl;}.owl-carousel.owl-rtl .owl-item{float:right;}/* No Js */.no-js .owl-carousel{display:block;}/* *    Owl Carousel - Lazy Load Plugin*/.owl-carousel .owl-item .owl-lazy{opacity:0;-webkit-transition:opacity 400ms ease;-moz-transition:opacity 400ms ease;-ms-transition:opacity 400ms ease;-o-transition:opacity 400ms ease;transition:opacity 400ms ease;}.owl-carousel .owl-item img{transform-style:preserve-3d;}/* *  Owl Carousel - Video Plugin*/.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000;}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url("http://www.domihut.com/proxy.php?url=http%3A%2F%2Fwww.exclusivapiscinas.com.br%2Fstatic%2Fcss%2Fowl.video.play.png") no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;-webkit-transition:scale 100ms ease;-moz-transition:scale 100ms ease;-ms-transition:scale 100ms ease;-o-transition:scale 100ms ease;transition:scale 100ms ease;}.owl-carousel .owl-video-play-icon:hover{-webkit-transition:scale(1.3, 1.3);-moz-transition:scale(1.3, 1.3);-ms-transition:scale(1.3, 1.3);-o-transition:scale(1.3, 1.3);transition:scale(1.3, 1.3);}.owl-carousel .owl-video-playing .owl-video-tn,.owl-carousel .owl-video-playing .owl-video-play-icon{display:none;}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;-webkit-background-size:contain;-moz-background-size:contain;-o-background-size:contain;background-size:contain;-webkit-transition:opacity 400ms ease;-moz-transition:opacity 400ms ease;-ms-transition:opacity 400ms ease;-o-transition:opacity 400ms ease;transition:opacity 400ms ease;}.owl-carousel .owl-video-frame{position:relative;z-index:1;}
    
/* ===============================================================
    RANGE SLIDER
================================================================*/
.slider-container {
    float: left;
    width: 100%!important;
}
.slider-container .back-bar {
  height: 10px;
  position: relative;
}
.slider-container .back-bar .selected-bar {
  position: absolute;
  height: 100%;
}
.slider-container .back-bar .pointer {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: red;
  cursor: col-resize;
  opacity: 1;
  z-index: 2;
}
.slider-container .back-bar .pointer.last-active {
  z-index: 3;
}
.slider-container .back-bar .pointer-label {
  position: absolute;
  top: -17px;
  font-size: 8px;
  background: white;
  white-space: nowrap;
  line-height: 1;
}
.slider-container .back-bar .focused {
  z-index: 10;
}
.slider-container .clickable-dummy {
  cursor: pointer;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.slider-container .scale {
  top: 2px;
  position: relative;
}
.slider-container .scale span {
  position: absolute;
  height: 5px;
  border-left: 1px solid #999;
  font-size: 0;
}
.slider-container .scale ins {
  font-size: 9px;
  text-decoration: none;
  position: absolute;
  left: 0;
  top: 5px;
  color: #999;
  line-height: 1;
}
.theme-green .back-bar {
  height: 5px;
  background-color:#909090
}
.theme-green .back-bar .selected-bar {
  background-color: #141414;
}
.theme-green .back-bar .pointer {
  width: 14px;
  height: 14px;
  top: -5px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 10px;
}
.theme-green .back-bar .pointer-label {
  color: #999;
}
.theme-green .back-bar .focused {
  color: #333;
}
.theme-green .scale span {
  border-left: 1px solid #e5e5e5;
}
.theme-green .scale ins {
  color: #999;
}
.theme-blue .back-bar {
  height: 5px;
  border-radius: 2px;
  background-color: #eeeeee;
  background-color: #e7e7e7;
  background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#dddddd));
  background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd);
  background-image: -o-linear-gradient(top, #eeeeee, #dddddd);
  background-image: linear-gradient(to bottom, #eeeeee, #dddddd);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffdddddd', GradientType=0);
}
.theme-blue .back-bar .selected-bar {
  border-radius: 2px;
  background-color: #92c1f9;
  background-image: -moz-linear-gradient(top, #b1d1f9, #64a8f9);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b1d1f9), to(#64a8f9));
  background-image: -webkit-linear-gradient(top, #b1d1f9, #64a8f9);
  background-image: -o-linear-gradient(top, #b1d1f9, #64a8f9);
  background-image: linear-gradient(to bottom, #b1d1f9, #64a8f9);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffb1d1f9', endColorstr='#ff64a8f9', GradientType=0);
}
.theme-blue .back-bar .pointer {
  width: 14px;
  height: 14px;
  top: -5px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid #AAA;
  background-color: #e7e7e7;
  background-image: -moz-linear-gradient(top, #eeeeee, #dddddd);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#dddddd));
  background-image: -webkit-linear-gradient(top, #eeeeee, #dddddd);
  background-image: -o-linear-gradient(top, #eeeeee, #dddddd);
  background-image: linear-gradient(to bottom, #eeeeee, #dddddd);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeeeee', endColorstr='#ffdddddd', GradientType=0);
}
.theme-blue .back-bar .pointer-label {
  color: #999;
}
.theme-blue .back-bar .focused {
  color: #333;
}
.theme-blue .scale span {
  border-left: 1px solid #e5e5e5;
}
.theme-blue .scale ins {
  color: #999;
}



@charset "UTF-8";

/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license

Copyright (c) 2013 Daniel Eden

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  40% {
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  60% {
    -webkit-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
}

@-webkit-keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}

@keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}

.flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes rubberBand {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  30% {
    -webkit-transform: scaleX(1.25) scaleY(0.75);
    transform: scaleX(1.25) scaleY(0.75);
  }

  40% {
    -webkit-transform: scaleX(0.75) scaleY(1.25);
    transform: scaleX(0.75) scaleY(1.25);
  }

  60% {
    -webkit-transform: scaleX(1.15) scaleY(0.85);
    transform: scaleX(1.15) scaleY(0.85);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes rubberBand {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  30% {
    -webkit-transform: scaleX(1.25) scaleY(0.75);
    -ms-transform: scaleX(1.25) scaleY(0.75);
    transform: scaleX(1.25) scaleY(0.75);
  }

  40% {
    -webkit-transform: scaleX(0.75) scaleY(1.25);
    -ms-transform: scaleX(0.75) scaleY(1.25);
    transform: scaleX(0.75) scaleY(1.25);
  }

  60% {
    -webkit-transform: scaleX(1.15) scaleY(0.85);
    -ms-transform: scaleX(1.15) scaleY(0.85);
    transform: scaleX(1.15) scaleY(0.85);
  }

  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}

.rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
}

@-webkit-keyframes shake {
  0%, 100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
}

@keyframes shake {
  0%, 100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px);
  }
}

.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }

  40% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  60% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }

  80% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }

  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

@keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    transform: rotate(15deg);
  }

  40% {
    -webkit-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  60% {
    -webkit-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    transform: rotate(5deg);
  }

  80% {
    -webkit-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }

  100% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

.swing {
  -webkit-transform-origin: top center;
  -ms-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}

@-webkit-keyframes tada {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg);
  }

  100% {
    -webkit-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
  }
}

@keyframes tada {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    -ms-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    -ms-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    -ms-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg);
  }

  100% {
    -webkit-transform: scale(1) rotate(0);
    -ms-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
  }
}

.tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes wobble {
  0% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }

  15% {
    -webkit-transform: translateX(-25%) rotate(-5deg);
    transform: translateX(-25%) rotate(-5deg);
  }

  30% {
    -webkit-transform: translateX(20%) rotate(3deg);
    transform: translateX(20%) rotate(3deg);
  }

  45% {
    -webkit-transform: translateX(-15%) rotate(-3deg);
    transform: translateX(-15%) rotate(-3deg);
  }

  60% {
    -webkit-transform: translateX(10%) rotate(2deg);
    transform: translateX(10%) rotate(2deg);
  }

  75% {
    -webkit-transform: translateX(-5%) rotate(-1deg);
    transform: translateX(-5%) rotate(-1deg);
  }

  100% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
}

@keyframes wobble {
  0% {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
  }

  15% {
    -webkit-transform: translateX(-25%) rotate(-5deg);
    -ms-transform: translateX(-25%) rotate(-5deg);
    transform: translateX(-25%) rotate(-5deg);
  }

  30% {
    -webkit-transform: translateX(20%) rotate(3deg);
    -ms-transform: translateX(20%) rotate(3deg);
    transform: translateX(20%) rotate(3deg);
  }

  45% {
    -webkit-transform: translateX(-15%) rotate(-3deg);
    -ms-transform: translateX(-15%) rotate(-3deg);
    transform: translateX(-15%) rotate(-3deg);
  }

  60% {
    -webkit-transform: translateX(10%) rotate(2deg);
    -ms-transform: translateX(10%) rotate(2deg);
    transform: translateX(10%) rotate(2deg);
  }

  75% {
    -webkit-transform: translateX(-5%) rotate(-1deg);
    -ms-transform: translateX(-5%) rotate(-1deg);
    transform: translateX(-5%) rotate(-1deg);
  }

  100% {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
  }
}

.wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}

@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
    transform: scale(.3);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }

  70% {
    -webkit-transform: scale(.9);
    transform: scale(.9);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
    -ms-transform: scale(.3);
    transform: scale(.3);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
  }

  70% {
    -webkit-transform: scale(.9);
    -ms-transform: scale(.9);
    transform: scale(.9);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}

.bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}

@-webkit-keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }

  80% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
    -ms-transform: translateY(30px);
    transform: translateY(30px);
  }

  80% {
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}

@-webkit-keyframes bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
  }

  80% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(30px);
    -ms-transform: translateX(30px);
    transform: translateX(30px);
  }

  80% {
    -webkit-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

@-webkit-keyframes bounceInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(-30px);
    transform: translateX(-30px);
  }

  80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes bounceInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(-30px);
    -ms-transform: translateX(-30px);
    transform: translateX(-30px);
  }

  80% {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}

@-webkit-keyframes bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  80% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  80% {
    -webkit-transform: translateY(10px);
    -ms-transform: translateY(10px);
    transform: translateY(10px);
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}

@-webkit-keyframes bounceOut {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  25% {
    -webkit-transform: scale(.95);
    transform: scale(.95);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(.3);
    transform: scale(.3);
  }
}

@keyframes bounceOut {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  25% {
    -webkit-transform: scale(.95);
    -ms-transform: scale(.95);
    transform: scale(.95);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(.3);
    -ms-transform: scale(.3);
    transform: scale(.3);
  }
}

.bounceOut {
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
}

@-webkit-keyframes bounceOutDown {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}

@keyframes bounceOutDown {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}

.bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}

@-webkit-keyframes bounceOutLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

@keyframes bounceOutLeft {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

.bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
}

@-webkit-keyframes bounceOutRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

@keyframes bounceOutRight {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

.bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}

@-webkit-keyframes bounceOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

@keyframes bounceOutUp {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

.bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
}

@keyframes fadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }
}

.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutDownBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}

@keyframes fadeOutDownBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}

.fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}

@-webkit-keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }
}

@keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px);
  }
}

.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

@keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

.fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
}

@-webkit-keyframes fadeOutRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }
}

@keyframes fadeOutRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }
}

.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}

@-webkit-keyframes fadeOutRightBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

@keyframes fadeOutRightBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

.fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig;
}

@-webkit-keyframes fadeOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
}

@keyframes fadeOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }
}

.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOutUpBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

@keyframes fadeOutUpBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

.fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig;
}

@-webkit-keyframes flip {
  0% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  100% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

@keyframes flip {
  0% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  100% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

.animated.flip {
  -webkit-backface-visibility: visible;
  -ms-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}

@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg);
    transform: perspective(400px) rotateX(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}

@keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    -ms-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg);
    -ms-transform: perspective(400px) rotateX(-10deg);
    transform: perspective(400px) rotateX(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    -ms-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    -ms-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}

.flipInX {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}

@-webkit-keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateY(-10deg);
    transform: perspective(400px) rotateY(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
}

@keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    -ms-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotateY(-10deg);
    -ms-transform: perspective(400px) rotateY(-10deg);
    transform: perspective(400px) rotateY(-10deg);
  }

  70% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    -ms-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg);
  }

  100% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    -ms-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
}

.flipInY {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}

@-webkit-keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}

@keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    -ms-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    -ms-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}

.flipOutX {
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
}

@keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    -ms-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    -ms-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
}

.flipOutY {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
}

@-webkit-keyframes lightSpeedIn {
  0% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: translateX(-20%) skewX(30deg);
    transform: translateX(-20%) skewX(30deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: translateX(0%) skewX(-15deg);
    transform: translateX(0%) skewX(-15deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
}

@keyframes lightSpeedIn {
  0% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    -ms-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: translateX(-20%) skewX(30deg);
    -ms-transform: translateX(-20%) skewX(30deg);
    transform: translateX(-20%) skewX(30deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: translateX(0%) skewX(-15deg);
    -ms-transform: translateX(0%) skewX(-15deg);
    transform: translateX(0%) skewX(-15deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(0%) skewX(0deg);
    -ms-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
}

.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
  animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedOut {
  0% {
    -webkit-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
}

@keyframes lightSpeedOut {
  0% {
    -webkit-transform: translateX(0%) skewX(0deg);
    -ms-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    -ms-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
}

.lightSpeedOut {
  -webkit-animation-name: lightSpeedOut;
  animation-name: lightSpeedOut;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

@-webkit-keyframes rotateIn {
  0% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(-200deg);
    transform: rotate(-200deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateIn {
  0% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(-200deg);
    -ms-transform: rotate(-200deg);
    transform: rotate(-200deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

.rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
}

@-webkit-keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
}

@-webkit-keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

.rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
}

@-webkit-keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

.rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
}

@-webkit-keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

.rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
}

@-webkit-keyframes rotateOut {
  0% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(200deg);
    transform: rotate(200deg);
    opacity: 0;
  }
}

@keyframes rotateOut {
  0% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(200deg);
    -ms-transform: rotate(200deg);
    transform: rotate(200deg);
    opacity: 0;
  }
}

.rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut;
}

@-webkit-keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}

.rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
}

@-webkit-keyframes rotateOutDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
}

.rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight;
}

@-webkit-keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
}

.rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft;
}

@-webkit-keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}

.rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight;
}

@-webkit-keyframes slideInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes slideInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}

@-webkit-keyframes slideInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes slideInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

@-webkit-keyframes slideOutLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

@keyframes slideOutLeft {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

.slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
}

@-webkit-keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

@keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

.slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight;
}

@-webkit-keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

@keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
}

@-webkit-keyframes slideOutDown {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}

@keyframes slideOutDown {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}

.slideOutDown {
  -webkit-animation-name: slideOutDown;
  animation-name: slideOutDown;
}

@-webkit-keyframes hinge {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%, 60% {
    -webkit-transform: rotate(80deg);
    transform: rotate(80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40% {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  80% {
    -webkit-transform: rotate(60deg) translateY(0);
    transform: rotate(60deg) translateY(0);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  100% {
    -webkit-transform: translateY(700px);
    transform: translateY(700px);
    opacity: 0;
  }
}

@keyframes hinge {
  0% {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%, 60% {
    -webkit-transform: rotate(80deg);
    -ms-transform: rotate(80deg);
    transform: rotate(80deg);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40% {
    -webkit-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  80% {
    -webkit-transform: rotate(60deg) translateY(0);
    -ms-transform: rotate(60deg) translateY(0);
    transform: rotate(60deg) translateY(0);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  100% {
    -webkit-transform: translateY(700px);
    -ms-transform: translateY(700px);
    transform: translateY(700px);
    opacity: 0;
  }
}

.hinge {
  -webkit-animation-name: hinge;
  animation-name: hinge;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotate(-120deg);
    transform: translateX(-100%) rotate(-120deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }
}

@keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotate(-120deg);
    -ms-transform: translateX(-100%) rotate(-120deg);
    transform: translateX(-100%) rotate(-120deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    -ms-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }
}

.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollOut {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(100%) rotate(120deg);
    transform: translateX(100%) rotate(120deg);
  }
}

@keyframes rollOut {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    -ms-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(100%) rotate(120deg);
    -ms-transform: translateX(100%) rotate(120deg);
    transform: translateX(100%) rotate(120deg);
  }
}

.rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
}


@-webkit-keyframes skewX {
 0% {
    -webkit-transform: skewX(0deg);
    transform: skewX(0deg);
}
  33% {
    -webkit-transform: skewX(-6deg);
    transform: skewX(-6deg);
}

  66% {
    -webkit-transform: skewX(6deg);
    transform: skewX(6deg);
  }
  
  100% {
    -webkit-transform: skewX(0deg);
    transform: skewX(0deg);
  }
}

@-moz-keyframes skewX {
 0% {
    -moz-transform: skewX(0deg);
    transform: skewX(0deg);
}
  33% {
    -moz-transform: skewX(-6deg);
    transform: skewX(-6deg);
}

  66% {
    -moz-transform: skewX(6deg);
    transform: skewX(6deg);
  }
  
  100% {
    -moz-transform: skewX(0deg);
    transform: skewX(0deg);
  }
}

@-o-keyframes skewX {
 0% {
    -o-transform: skewX(0deg);
    transform: skewX(0deg);
}
  33% {
    -o-transform: skewX(-6deg);
    transform: skewX(-6deg);
}

  66% {
    -o-transform: skewX(6deg);
    transform: skewX(6deg);
  }
  
  100% {
    -o-transform: skewX(0deg);
    transform: skewX(0deg);
  }
}

@-ms-keyframes skewX {
 0% {
    -ms-transform: skewX(0deg);
    transform: skewX(0deg);
}
  33% {
    -ms-transform: skewX(-6deg);
    transform: skewX(-6deg);
}

  66% {
    -ms-transform: skewX(6deg);
    transform: skewX(6deg);
  }
  
  100% {
    -ms-transform: skewX(0deg);
    transform: skewX(0deg);
  }
}

@keyframes skewX {
 0% {
    transform: skewX(0deg);
}
  33% {
    transform: skewX(-6deg);
}

  66% {
    transform: skewX(6deg);
  }
  
  100% {
    transform: skewX(0deg);
  }
}

.skewX {
  -webkit-animation-name: skewX;
  -moz-animation-name: skewX;
  -ms-animation-name: skewX;
  -o-animation-name: skewX;
  animation-name: skewX;
}


@-webkit-keyframes scaleIn {
    0% {
        -webkit-transform: scale(1.2);
        opacity:0;
    }
    50% {
        -webkit-transform: scale(0.8);
        opacity:1;
    }  
        100% {
        -webkit-transform: scale(1);
    }
}

@-moz-keyframes scaleIn {
    0% {
        -moz-transform: scale(1.2);
        opacity:0;
    }
    50% {
        -moz-transform: scale(0.8);
        opacity:1;
    }  
        100% {
        -moz-transform: scale(1);
    }
}


@-o-keyframes scaleIn {
    0% {
        -o-transform: scale(1.2);
        opacity:0;
    }
    50% {
        -o-transform: scale(0.8);
        opacity:1;
    }  
        100% {
        -o-transform: scale(1);
    }
}

@-ms-keyframes scaleIn {
    0% {
        -ms-transform: scale(1.2);
        opacity:0;
    }
    50% {
        -ms-transform: scale(0.8);
        opacity:1;
    }  
        100% {
        -ms-transform: scale(1);
    }
}

@keyframes scaleIn {
    0% {
        transform: scale(1.2);
        opacity:0;
    }
    50% {
        transform: scale(0.8);
        opacity:1;
    }  
        100% {
        transform: scale(1);
    }
}

.scaleIn {
  -webkit-animation-name: scaleIn;
  -moz-animation-name: scaleIn;
  -ms-animation-name: scaleIn;
  -o-animation-name: scaleIn;
  animation-name: scaleIn;
}



.delay1{
    -webkit-animation-delay:0.3s;
    -moz-animation-delay:0.3s;
    -ms-animation-delay:0.3s;
    -o-animation-delay:0.3s;
    animation-delay:0.3s;
}
.delay2{
    -webkit-animation-delay:0.6s;
    -moz-animation-delay:0.6s;
    -ms-animation-delay:0.6s;
    -o-animation-delay:0.6s;
    animation-delay:0.6s;
}
.delay3{
    -webkit-animation-delay:0.9s;
    -moz-animation-delay:0.9s;
    -ms-animation-delay:0.9s;
    -o-animation-delay:0.9s;
    animation-delay:0.9s;
}
.delay4{
    -webkit-animation-delay:1.2s;
    -moz-animation-delay:1.2s;
    -ms-animation-delay:1.2s;
    -o-animation-delay:1.2s;
    animation-delay:1.2s;
}
.delay5{
  -webkit-animation-delay:1.5s;
  -moz-animation-delay:1.5s;
  -ms-animation-delay:1.5s;
  -o-animation-delay:1.5s;
  animation-delay:1.5s;
}
.delay6{
  -webkit-animation-delay:1.8s;
  -moz-animation-delay:1.8s;
  -ms-animation-delay:1.8s;
  -o-animation-delay:1.8s;
  animation-delay:1.8s;
}