/*------------------------------------------------------------------ [Master Stylesheet] Project: a JUSTinTIME production Version: 1.1 -------------------------------------------------------------------*/ /*------------------------------------------------------------------ [Table of contents] 1. Fonts | Icons 1.1 Font-awesome Facebook 1.2 Font-awesome Linkedin 1.3 Font-awesome Twitter 1.4 Font-awesome Pinterest 1.5 Font-awesome Block Quote 1.6 Font-awesome Envelope 1.7 Font-awesome Phone 1.8 Font-awesome Chevron-up 1.9 Import google fonts 2. General Styles 2.1 Media query for fullscreen swiper slider 2.2 Media query 3. More Styles 3.1 Common class 3.2 Parallax style 3.3 Button style 3.4 social icon style 3.5 Preloader 4 Navigation 5 Footer section 5.1 Captions (fullscreen) 5.2 Fullscreen slider navigation arrows 6 Swiper slider 7 Home section 8 About section 8.2 About Intro section 9 Gallery section 9.1 Core Owl Carousel 9.2 display none until init 9.3 fix 9.4 Keyframes 10 Team Section 11 Transitions 11.1 fade out 11.2 backSlide 11.3 go down 11.4 scale up 12 Portfolio 12.1 Portfolio full 13 slide effects /*==========================================================*/ /* 1.1 Font-awesome Facebook*/ /*==========================================================*/ .fa-lg {font-size: 1.33333333em;line-height: .75em;vertical-align: -15%;}.fa {display: inline-block;font-family: FontAwesome;Font-style: normal;font-weight: normal;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}.fa-facebook:before {content: "\f09a";}.fa-lg {font-size: 1.33333333em;line-height: .75em;vertical-align: -15%;}.fa {display: inline-block;font-family: FontAwesome;font-style: normal;font-weight: normal;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;} /*==========================================================*/ /* 1.2 Font-awesome Linkedin*/ /*==========================================================*/ .fa-lg {font-size: 1.33333333em;line-height: .75em;vertical-align: -15%;}.fa {display: inline-block;font-family: FontAwesome;font-style: normal;font-weight: normal;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}.fa-linkedin:before {content: "\f0e1";}}.fa-lg {font-size: 1.33333333em;line-height: .75em;vertical-align: -15%;}.fa {display: inline-block;font-family: FontAwesome;font-style: normal;font-weight: normal;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;} /*==========================================================*/ /* 1.3 Font-awesome Twitter*/ /*==========================================================*/ .fa-lg {font-size: 1.33333333em;line-height: .75em;vertical-align: -15%;}.fa {display: inline-block;font-family: FontAwesome;Font-style: normal;font-weight: normal;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}.fa-twitter:before {content: "\f099";}.fa-lg {font-size: 1.33333333em;line-height: .75em;vertical-align: -15%;}.fa {display: inline-block;font-family: FontAwesome;font-style: normal;font-weight: normal;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;} /*==========================================================*/ /* 1.4 Font-awesome Pinterest*/ /*==========================================================*/ .fa-lg {font-size: 1.33333333em;line-height: .75em;vertical-align: -15%;}.fa {display: inline-block;font-family: FontAwesome;font-style: normal;font-weight: normal;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}.fa-pinterest:before {content: "\f0d2";}}.fa-lg {font-size: 1.33333333em;line-height: .75em;vertical-align: -15%;}.fa {display: inline-block;font-family: FontAwesome;font-style: normal;font-weight: normal;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;} /*==========================================================*/ /* 1.5 Font-awesome Block Quote*/ /*==========================================================*/ .fa {display: inline-block;font-family: FontAwesome;font-style: normal;font-weight: normal;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}.fa-quote-left:before {content: "\f10d";}.fa {display: inline-block;font-family: FontAwesome;font-style: normal;font-weight: normal;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;} /*==========================================================*/ /* 1.6 Font-awesome Envelope /*==========================================================*/ .fa {display: inline-block;font-family: FontAwesome;font-style: normal;font-weight: normal;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}.fa-envelope:before {content: "\f0e0";}.fa {display: inline-block;font-family: FontAwesome;font-style: normal;font-weight: normal;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;} /*==========================================================*/ /* 1.7 Font-awesome Phone /*==========================================================*/ .fa {display: inline-block;font-family: FontAwesome;font-style: normal;font-weight: normal;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}.fa-phone:before {content: "\f095";}.fa {display: inline-block;font-family: FontAwesome;font-style: normal;font-weight: normal;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;} /*==========================================================*/ /* 1.8 Font-awesome Chevron-up /*==========================================================*/ .fa {display: inline-block;font-family: FontAwesome;font-style: normal;font-weight: normal;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}.fa-chevron-up:before {content: "\f077";}.fa {display: inline-block;font-family: FontAwesome;font-style: normal;font-weight: normal;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;} /*==========================================================*/ /* 1.9 Import Google fonts */ /*==========================================================*/ @import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800);@import url(http://fonts.googleapis.com/css?family=Lato:400,600,900); /*==========================================================*/ /* 2. General Styles*/ /*==========================================================*/ html {font-size: 62.5%;}body{-webkit-overflow-scrolling:touch;}body {height: 100%;font-family: 'Open Sans', sans-serif;font-size: 16px;line-height: 1.7;color: #330000;-webkit-font-smoothing: antialiased;-webkit-text-size-adjust: 100%;background: #fff;transition: all 0.3s linear;-webkit-transition: all 0.3s linear;-moz-transition: all 0.3s linear;-o-transition: all 0.3s linear;}a {color: #a10d2a;text-decoration: none;}a:hover,a:focus {color: #333;text-decoration: none;}img{max-width:100%;}h1,h2,h3,h4,h5,h6 {margin: 1em 0;color: #330000;font-weight: 300;line-height: 1.3;text-transform: uppercase;font-family: 'Open Sans', sans-serif;text-rendering:optimizelegibility;}h1 {font-size: 52px;}h2 {font-size: 30px;}p {margin: 0 0 1em;}ul,ol {margin-bottom: 20px;line-height: 1.8;list-style-type:none}.animated {-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-delay: 0s;animation-delay: 0s;}.text-center{text-align:center;}.white{color:#fff;}.row {margin:0;margin-bottom: 30px;}section,.section {position: relative;} /*==========================================================*/ /* 2.1 Media query for fullscreen swiper slider*/ /*==========================================================*/ @media screen and (max-width: 960px) {header.navbar .navbar-nav a {padding: 0 10px;}.hero-text h1 {font-size: 42px !important;margin-bottom: -25px !important; margin-top: 25px !important;}.hero-text p {margin: 45px 0 15px !important;font-size:20px;}} @media screen and (max-width: 767px) {.navbar-collapse {background:#330000;display: block;float: none;overflow: auto;}header.navbar .navbar-nav li a:before {background: transparent;top: 50px;}header.navbar .navbar-nav li a {height: 50px;line-height: 50px;}} @media screen and (max-width: 758px) {.hero-text h1 {font-size: 32px !important;margin-bottom: -25px !important; margin-top: 25px !important;}.hero-text p {margin: 45px 0 15px !important;font-size:16px;line-height:21px;}} @media screen and (max-width: 524px) {.wrap {padding: 80px 35px !important;}.hero-text h1 {font-size: 26px !important;margin-bottom: -25px !important; margin-top: 25px !important;}} @media only screen and (max-width : 320px) {body {font-size: 14px;}header.navbar .navbar-brand img {max-height: 40px;}.hero-text h1 {font-size: 18px !important;margin-bottom: -25px !important; margin-top: 25px !important;}.hero-text p {margin: 45px 0 15px !important;font-size:14px;line-height:20px;}.hero-text a{ padding: 3px 10px;}} /*==========================================================*/ /* 2.2 Media query */ /*==========================================================*/ @media only screen and (max-width: 1024px) {} @media only screen and (max-width : 1224px) {} @media screen and (max-width: 960px) {#values-slider .item h2{color: #999999;font-size: 28px;font-weight: 800;letter-spacing: -1px;line-height: normal;margin-bottom: 0}#footer .backtop a {right: 0;margin-left:0;left:auto;}.footer-text p {line-height: 18px;}} @media screen and (max-width: 524px) {.heading-text h2{font-size:38px;}.heading-text p {font-size: 18px;line-height: 28px;}blockquote {padding: 40px 0;}blockquote p {font-size: 18px;line-height: 32px;}.footer-text {margin:25px 80px 0 auto; text-align:left;}} @media only screen and (max-width : 320px) {.heading-text h2{font-size:32px;}.heading-text p {font-size: 16px;line-height: 25px;}.social a {font-size: 16px;height: 30px;line-height: 30px;width: 30px;}.footer-text {margin:18px 80px 0 auto; text-align:left;}} /*==========================================================*/ /* 3.1 common class*/ /*==========================================================*/ .margint100{margin-top:100px !important;} .padt80{padding-top:80px;} .padt60{padding-top:60px;} .padb40{padding-bottom:40px;} .padb80{padding-bottom:80px;} .padb100{padding-bottom:100px;} .text-center{text-align:center} .site-color {color: #a10d2a;} #contact-section .heading-text a:hover {color: #a10d2a; } /*==========================================================*/ /* 3.2 Parallax*/ /*==========================================================*/ .parallax {background-attachment: fixed;background-position: 50% 0;background-repeat: no-repeat;background-size: cover;color: #FFFFFF;padding: 0;position: static;text-align: center;} @media only screen and (max-width: 1024px) {.parallax {background-attachment: scroll !important;background-position: center top !important;}} #space1{background: url(../images/6.jpg) 50% 0 no-repeat fixed;color: #fff;padding: 170px 0 0 0;background-size: cover;} /*==========================================================*/ /* 3.3 button class-------------------*/ /*==========================================================*/ .wrapbtn{ position: relative;width: 80px;height: 80px;margin: 10px auto 15px auto;} .clicker{background-color: white;border: medium none;border-radius: 100px 100px 100px 100px;-webkit-border-radius:100px 100px 100px 100px;cursor: pointer;display: block;font-size: 14px;font-weight: 600;height: 68px;left: 6px;line-height: 16px;outline: medium none;padding: 17px;position: absolute;top: 6px;vertical-align: middle;width: 68px;z-index: 2;} .clicker:active{transform: translate(0, 1px);-webkit-transform: translate(0, 1px);-moz-transform: translate(0, 1px);-ms-transform: translate(0, 1px);-o-transform: translate(0, 1px);height: 63px;box-shadow: 0px 1px 0 0 rgb(190,190,190) inset;-webkit-box-shadow: 0px 1px 0 0 rgb(190,190,190) inset;} .circle{position: relative;border-radius:40px;width: 80px;height: 80px;z-index: 1;} .clicker:hover + .circle, .clicker:active + .circle {animation: rotator linear .8s infinite;-webkit-animation: rotator linear .8s infinite;} .angled {background-image: linear-gradient(45deg, white 0%,white 30%,rgb(191, 6, 6) 30%,rgb(60, 0, 0) 70%,white 70%, white 100%);} .angled.second{background-image: linear-gradient( white 0%,white 30%,rgb(191, 6, 6) 30%,rgb(60, 0, 0) 70%, white 70%, white 100%);} /*==========================================================*/ /* 3.4 social icon style */ /*==========================================================*/ .social a {background: none repeat scroll 0 0 #FFFFFF;border-radius:50%;-webkit-border-radius:50%;color:#a10d2a;display: inline-block;font-size: 20px;height: 40px;line-height: 40px;margin: 0 9px 0 0;text-align: center;transition: all 0.3s linear 0s;-webkit-transition: all 0.3s linear 0s;-moz-transition: all 0.3s linear 0s;-o-transition: all 0.3s linear 0s;-ms-transition: all 0.3s linear 0s;width: 40px;} .social a:hover{background:#000;color:#fff;} /*==========================================================*/ /* 3.4 Preloader*/ /*==========================================================*/ #preloader {background-color:#000;bottom: 0;left: 0;position: fixed;right: 0;top: 0;z-index: 99999;} #loading-animation {background-image: url("../images/dark.gif");background-position: center center;background-repeat: no-repeat;height: 43px;left: 50%; margin: -20px 0 0 -20px;position: absolute;top: 50%;width: 40px;} /*==========================================================*/ /* 4. Navigation-------------------------*/ /*==========================================================*/ .navigation{} header.navbar {visibility: visible;opacity:1;-webkit-opacity:1;-moz-opacity:1;-o-opacity:1;-ms-opacity:1;position: fixed;z-index: 1002;top: 0;left: 0;width: 100%;font-size: 0.9em;border:none !important;-webkit-border-radius:0;-moz-border-radius:0;-ms-border-radius:0;-o-border-radius:0;border-radius:0;transition: all 0.5s ease-in-out 0s;-webkit-transition: all 0.5s ease-in-out 0s;-moz-transition: all 0.5s ease-in-out 0s;-o-transition: all 0.5s ease-in-out 0s;-ms-transition: all 0.5s ease-in-out 0s;color: #FFFFFF;height: 80px; background: rgba(100,0,0,0.3);} header.navbar .navbar-toggle {height: 80px;margin: 0;padding: 0 25px;-webkit-border-radius:0;-moz-border-radius:0;-ms-border-radius:0;-o-border-radius:0;border-radius:0;border: none;outline: none;} header.navbar .navbar-toggle .icon-bar {-webkit-border-radius:0;-moz-border-radius:0;-ms-border-radius:0;-o-border-radius:0;border-radius:0;background: #fff;} header.navbar .navbar-brand {height: 80px;float: none;display: table-cell;vertical-align: middle;padding: 0 15px;font-size: 1.5em;font-weight: 900;line-height: 1;} header.navbar .navbar-brand img {max-height: 60px;} header.navbar .navbar-nav {position: relative;margin: 0;text-transform: uppercase;font-size: 1em;letter-spacing:0.04em;} header.navbar .navbar-nav li a{height:80px;line-height:80px;} header.navbar .navbar-nav li a:before {background: none repeat scroll 0 0 #a10d2a;content: "";height: 80px;left: 0;opacity: 1;position: absolute;top: 80px;width: 100%;} header.navbar .navbar-nav li a:hover:before {height: 2px;opacity: 1;top: 0px;transition: all 0.1s ease-in-out 0s;-webkit-transition: all 0.3s ease-in-out 0s;-moz-transition: all 0.3s ease-in-out 0s;-o-transition: all 0.3s ease-in-out 0s;-ms-transition: all 0.3s ease-in-out 0s;} header.navbar .navbar-nav li a:hover,header.navbar .navbar-nav li a:active,header.navbar .navbar-nav li a:focus{color: #FFFFFF;background:none;transition: all 0.5s ease-in-out 0s;-webkit-transition: all 0.5s ease-in-out 0s;-moz-transition: all 0.5s ease-in-out 0s;-o-transition: all 0.5s ease-in-out 0s;-ms-transition: all 0.5s ease-in-out 0s;} header.show .navbar-nav a {color:#e1e1e1;} #toggle-navbar {display: none;position: absolute;top: 0;left: 0;width: 50px;height: 100px;line-height: 95px;font-size: 2em;font-weight: 900;color: #fff;text-align: center; background: #a10d2a;} #toggle-navbar:hover {cursor: pointer;} .navbar-collapse {display: table;float: right;height: auto !important;max-height: none;overflow: hidden;padding: 0;position: relative;} .navbar-collapse.in {overflow: hidden;} @media (max-width: 767px) { .navbar-collapse.in {display: none;height: 0 !important;}} /*==========================================================*/ /* 5 Footer-------------------------*/ /*==========================================================*/ #footer {background:rgba(0,0,0,.95);color: #dfdfdf;font-size: 0.9em;width: 100%; height: 80px;text-align:center;position:relative;-webkit-transition: all 0.2s;-moz-transition: all 0.2s; -ms-transition: all 0.2s;-o-transition: all 0.2s;transition: all 0.2s;} #footer .row{margin-bottom:0px;} .footer-text {margin:29px auto 0; text-align:left;} .footer-text p{margin:0;line-height:30px;color:#E1E1E1;font-size:12px;} #footer .backtop a{background:rgba(0,0,0,.95);color: #FFFFFF;font-size: 28px;height: 80px;left: 50%;line-height: 80px;position: absolute;top: 0;width: 80px; margin-left: -40px; -webkit-transition: all 0.2s;-moz-transition: all 0.2s;-ms-transition: all 0.2s;-o-transition: all 0.2s;transition: all 0.2s;} #footer .backtop a:hover{background-color:#a10d2a;line-height:60px;} /*==========================================================*/ /* 5.1 Captions (fullscreen) */ /*==========================================================*/ .wrap {margin-top:0px; transition: opacity 0.8s ease 0s;-webkit-transition: opacity 0.8s ease 0s;-moz-transition: opacity 0.8s ease 0s;-o-transition: opacity 0.8s ease 0s;} .hero-text {color: #FFFFFF;margin:0 auto;height: auto;max-width: 950px;top:50%;position: relative;text-align:center;z-index: 10;display:block;-webkit-transform: translateY(-50%);-moz-transform: translateY(-50%);transform: translateY(-50%);-ms-transform: translateY(-50%);-o-transform: translateY(-50%);transition: all 2s ease-in-out 0s;-webkit-transition: all 0.2s ease-in-out 0s;-moz-transition: all 0.2s ease-in-out 0s;-o-transition: all 0.2s ease-in-out 0s;} .hero-text .hero-title h1 {font-size: 58px;margin: 37px 0 13px;text-align: center;font-weight:700;line-height:1.1em;text-transform:uppercase;width:100%;color:#fff;text-shadow:0 1px 1px rgba(0, 0, 0, 0.8);} .hero-text {text-align: center;} .hero-text {color: #FFFFFF;text-align: center;} .swiper-slide p,#home-slider p {font-size: 22px;font-style: italic;font-weight: 400;margin: 0 0 20px;} .mouse-icon {background:transparent;border: 2px solid;border-radius: 15px;-webkit-border-radius: 15px;bottom: 30px;cursor: pointer;height: 44px;left: 0;margin: 0 auto;position: absolute;right: 0;width: 30px;transition: all 0.3s linear 0s;-webkit-transition: all 0.3s linear 0s;-moz-transition: all 0.3s linear 0s;-o-transition: all 0.3s linear 0s;} .white {border-color: #FFFFFF;} .mouse-icon:hover {opacity: 0.3 !important;transition: all 0.3s linear 0s;-webkit-transition: all 0.3s linear 0s;-moz-transition: all 0.3s linear 0s;-o-transition: all 0.3s linear 0s;} .mouse-icon .wheel {animation: 1.7s ease 0s normal none infinite magic-mouse-icon;border-radius: 50% 50% 50% 50%;height: 12px;left: 0;margin-left: auto;margin-right: auto;margin-top: 6px;right: 0;width: 12px;} @-moz-keyframes magic-mouse-icon {0% {margin-top: 6px;opacity: 0;}30% {opacity: 1;}100% { margin-top: 18px; opacity: 0;}} @-webkit-keyframes magic-mouse-icon {0% {margin-top: 6px;opacity: 0;}30% { opacity: 1;}100% {margin-top: 18px; opacity: 0;}} @-o-keyframes magic-mouse-icon {0% {margin-top: 6px;opacity: 0;}30% {opacity: 1;}100% {margin-top: 18px;opacity: 0;}} @keyframes magic-mouse-icon {0% {margin-top: 6px;opacity: 0;}30% {opacity: 1;}100% {margin-top: 18px;opacity: 0; }} .white .wheel {background-color: #FFFFFF;} /*==========================================================*/ /* 5.2 Fullscreen slider navigation arrows */ /*==========================================================*/ @keyframes hero-right {0% {margin-right: 2.6em;}50% {margin-right: 2.2em;}100% {margin-right: 2.6em;}} @-webkit-keyframes hero-right {0% {margin-right: 2.6em;}50% {margin-right: 2.2em;}100% {margin-right: 2.6em;}} @-moz-keyframes hero-right {0% { margin-right: 2.6em;}50% {margin-right: 2.2em;}100% {margin-right: 2.6em;}} /*==========================================================*/ /* 6 swiper slide */ /*==========================================================*/ /*==========================================================*/ /* 7. Home-------------------------*/ /*==========================================================*/ #home {width: 100%;font-family: inherit;font-size: 1em;min-height:600px;background-color:#000;position:relative;z-index:999;} .bghome{background-image: url("../images/slides/home.jpg");background-attachment: fixed;background-position: 50% 0;-webkit-background-size: cover;background-size: cover;background-repeat: no-repeat;position:static;} #home-slider, #beer-me{width:100%;height:100%;} #home-slider .owl-wrapper-outer,#home-slider .owl-wrapper,#home-slider .owl-item,#home-slider .item,#home-slider .owl-wrapper-outer,#beer-me .owl-wrapper,#beer-me .owl-item,#beer-me .item{height:100%;} #home-slider .wrap,#beer-me .wrap {margin-top:0px;height: 100%;max-width: 9999px;padding-bottom: 0;padding-top: 0;position:relative;z-index:99; transition: opacity 0.8s ease 0s;-webkit-transition: opacity 0.8s ease 0s;-moz-transition: opacity 0.8s ease 0s;-o-transition: opacity 0.8s ease 0s;padding-left: 8%;padding-right: 8%; width: 100%;} /*==========================================================*/ /* 8. About-------------------------*/ /*==========================================================*/ #about-section{position:relative;z-index:999} .heading-text h2{font-size: 48px;font-weight: 600;line-height: 1em;text-align: center;text-transform: none;width: 100%;letter-spacing:-2px;font-family:'Lato';color:#d00;margin-bottom:20px;} .heading-text h2 span{position:relative;} .heading-text p{font-size: 18px; font-weight: 300; background:none !important; font-style:italic;} .heading-text hr{width:100px;} #about-section .heading-text hr,#portfolio-section .heading-text hr{float:left;} #about-section{background:#000;color:#f2f2f2;} .color-head .titles-wrapper {padding-right: 5%;} .titles-wrapper .heading-text{padding:0;} .titles-wrapper .heading-text h2{margin-top:0;text-align:left} #about-section .titles-wrapper .heading-text h2{color:#fff;} /*==========================================================*/ /* 8.1 About intro /*==========================================================*/ .intro-full {position: absolute;width: 100%;height: 100%;top: 0;left: 0;padding-top:0px;background:#330000;z-index: 99;min-height:400px;} .intro-full .intro-description {float: left;width: 100%;max-height: 100%;overflow: auto;-webkit-overflow-scrolling: touch;} .intro-full .intro-description .text-wrapper i{font-size:58px;text-align:center;margin-bottom:20px;} .hidden-block {background:rgba(255, 255, 255, 0.2);margin: 0;overflow: hidden;text-align: center;text-transform: uppercase;position:absolute;bottom:0;width:100%;transition: all 1s;-webkit-transition: all 1s;-moz-transition: all 1s;-ms-transition: all 1s;-o-transition: all 1s;} .hidden-block:hover{ background:none repeat scroll 0 0 rgba(0, 0, 0, 1);transition: all 1s;-webkit-transition: all 1s;-moz-transition: all 1s;-ms-transition: all 1s;-o-transition: all 1s;} .hidden-block div {background: none repeat scroll 0 0 transparent;float: none;font-size: 1em;font-weight: 600;line-height: 65px;margin: 0;text-align: center;width: auto;} .hidden-block div a {position: relative;display: block;padding: 0 25px;color: #fff;} /*==========================================================*/ /* 9. Gallery */ /*==========================================================*/ .gallery{background: url(../images/slide-bg.jpg) 50% 0 no-repeat fixed;padding: 0 0 0 0;background-size: cover;} #gallery-slider .item{position:relative; overflow:hidden;} #gallery-slider .item img{ display: block; height: auto; max-width: 100%; width:100%; transition: all 0.4s ease-in-out 0s;-webkit-transition: all 0.4s ease-in-out 0s;} /*==========================================================*/ /* 9.1 Core Owl Carousel */ /*==========================================================*/ .owl-carousel .owl-wrapper:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;} /*==========================================================*/ /* 9.2 display none until init */ /*==========================================================*/ .owl-carousel{display: none;position: relative;width: 100%;-ms-touch-action: pan-y;cursor:url("../images/client_cursor.png"), auto} .owl-carousel .owl-wrapper{display: none;position: relative;-webkit-transform: translate3d(0px, 0px, 0px);} .owl-carousel .owl-wrapper-outer{overflow: hidden;position: relative;width: 100%;} .owl-carousel .owl-item{float: left;} .owl-controls .owl-page,.owl-controls .owl-buttons div{cursor: pointer;} .owl-controls {-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);} /*==========================================================*/ /* 9.3 fix */ /*==========================================================*/ .owl-carousel .owl-wrapper,.owl-carousel .owl-item{-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;-ms-backface-visibility: hidden;-webkit-transform: translate3d(0,0,0);-moz-transform: translate3d(0,0,0);-ms-transform: translate3d(0,0,0);} /*==========================================================*/ /* 9.4 Keyframes */ /*==========================================================*/ @-webkit-keyframes empty {0% {opacity: 1}} @-moz-keyframes empty {0% {opacity: 1}} @keyframes empty {0% {opacity: 1}} @-webkit-keyframes fadeIn {0% { opacity:0; }100% { opacity:1; }} @-moz-keyframes fadeIn {0% { opacity:0; }100% { opacity:1; }} @keyframes fadeIn {0% { opacity:0; }100% { opacity:1; }} @-webkit-keyframes fadeOut {0% { opacity:1; }100% { opacity:0; }} @-moz-keyframes fadeOut {0% { opacity:1; }100% { opacity:0; }} @keyframes fadeOut {0% { opacity:1; }100% { opacity:0; }} @-webkit-keyframes backSlideOut {25% { opacity: .5; -webkit-transform: translateZ(-500px); }75% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); }100% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); }} @-moz-keyframes backSlideOut {25% { opacity: .5; -moz-transform: translateZ(-500px); }75% { opacity: .5; -moz-transform: translateZ(-500px) translateX(-200%); }100% { opacity: .5; -moz-transform: translateZ(-500px) translateX(-200%); }} @keyframes backSlideOut {25% { opacity: .5; transform: translateZ(-500px); }75% { opacity: .5; transform: translateZ(-500px) translateX(-200%); }100% { opacity: .5; transform: translateZ(-500px) translateX(-200%); }} @-webkit-keyframes backSlideIn {0%, 25% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(200%); }75% { opacity: .5; -webkit-transform: translateZ(-500px); }100% { opacity: 1; -webkit-transform: translateZ(0) translateX(0); }} @-moz-keyframes backSlideIn {0%, 25% { opacity: .5; -moz-transform: translateZ(-500px) translateX(200%); }75% { opacity: .5; -moz-transform: translateZ(-500px); }100% { opacity: 1; -moz-transform: translateZ(0) translateX(0); }} @keyframes backSlideIn {0%, 25% { opacity: .5; transform: translateZ(-500px) translateX(200%); }75% { opacity: .5; transform: translateZ(-500px); }100% { opacity: 1; transform: translateZ(0) translateX(0); }} @-webkit-keyframes scaleToFade {to { opacity: 0; -webkit-transform: scale(.8); }} @-moz-keyframes scaleToFade {to { opacity: 0; -moz-transform: scale(.8); }} @keyframes scaleToFade {to { opacity: 0; transform: scale(.8); }} @-webkit-keyframes goDown {from { -webkit-transform: translateY(-100%); }} @-moz-keyframes goDown {from { -moz-transform: translateY(-100%); }} @keyframes goDown {from { transform: translateY(-100%); }} @-webkit-keyframes scaleUpFrom {from { opacity: 0; -webkit-transform: scale(1.5); }} @-moz-keyframes scaleUpFrom {from { opacity: 0; -moz-transform: scale(1.5); }} @keyframes scaleUpFrom {from { opacity: 0; transform: scale(1.5); }} @-webkit-keyframes scaleUpTo {to { opacity: 0; -webkit-transform: scale(1.5); }} @-moz-keyframes scaleUpTo {to { opacity: 0; -moz-transform: scale(1.5); }} @keyframes scaleUpTo {to { opacity: 0; transform: scale(1.5); }} /*==========================================================*/ /* 10. team block */ /*==========================================================*/ .values{background:#fff;padding:80px 0} #values-slider .item h2{color: #999999;font-size: 30px;font-weight: 800;letter-spacing: 5px;line-height: normal;margin-bottom: 0} /*==========================================================*/ /* 11.1 fade */ /*==========================================================*/ .owl-fade-out {z-index: 10;-webkit-animation: fadeOut .7s both ease;-moz-animation: fadeOut .7s both ease;animation: fadeOut .7s both ease;} .owl-fade-in {-webkit-animation: fadeIn .7s both ease;-moz-animation: fadeIn .7s both ease;animation: fadeIn .7s both ease;} /*==========================================================*/ /* 11.2 backSlide */ /*==========================================================*/ .owl-backSlide-out {-webkit-animation: backSlideOut 1s both ease;-moz-animation: backSlideOut 1s both ease;animation: backSlideOut 1s both ease;} .owl-backSlide-in {-webkit-animation: backSlideIn 1s both ease;-moz-animation: backSlideIn 1s both ease;animation: backSlideIn 1s both ease;} /*==========================================================*/ /* 11.4 goDown */ /*==========================================================*/ .owl-goDown-out {-webkit-animation: scaleToFade 1s ease both;-moz-animation: scaleToFade 1s ease both;animation: scaleToFade 1s ease both;} .owl-goDown-in {-webkit-animation: goDown 3s ease both;-moz-animation: goDown 3s ease both;animation: goDown 3s ease both;} /*==========================================================*/ /* 11.4 scaleUp */ /*==========================================================*/ .owl-fadeUp-in {-webkit-animation: scaleUpFrom .5s ease both;-moz-animation: scaleUpFrom .5s ease both;animation: scaleUpFrom .5s ease both;} .owl-fadeUp-out {-webkit-animation: scaleUpTo .5s ease both;-moz-animation: scaleUpTo .5s ease both;animation: scaleUpTo .5s ease both;} /*==========================================================*/ /* 12. Portfolio-------------------------*/ /*==========================================================*/ .titles-wrapper .heading-text{padding:0;} .titles-wrapper .heading-text h2{margin-top:0;text-align:left} /*==========================================================*/ /* 13 Slide Effect */ /*==========================================================*/ .portfolio-full-slidedown > * {opacity: 0;-webkit-opacity: 0;-webkit-transition: all 0.5s linear;-moz-transition: all 0.5s linear;-o-transition: all 0.5s linear;} .portfolio-full-slidedown {visibility: hidden;-webkit-transform: translateY(-100%);transform: translateY(-100%);-webkit-transition: -webkit-transform 0.4s ease-in-out, visibility 0s 0.4s;transition: transform 0.4s ease-in-out, visibility 0s 0.4s;} /*==========================================================*/ /* 14. Quote-------------------------*/ /*==========================================================*/ .client-say{position:relative;} #testimonial {background:#330000;z-index:999;position:static;display:block; background-repeat:repeat !important;} blockquote {border-left: 0px solid rgba(0, 0, 0, 0.1);font-size: 17.5px;padding: 40px 80px;margin:0;position:relative;transition: all 0.3s ease-in-out 0s;-webkit-transition: all 0.3s ease-in-out 0s;-moz-transition: all 0.3s ease-in-out 0s;-o-transition: all 0.3s ease-in-out 0s;} blockquote .fa{color: #a10d2a;font-size: 58px;line-height: 100px;position: relative;} blockquote p { color: #FFFFFF;font-size: 32px;font-style: italic;font-weight: 500;letter-spacing: 0;line-height: 42px;} blockquote cite {font-size: 14px;font-style: italic;font-weight: 500;} /*==========================================================*/ /* 15. Contact-------------------------*/ /*==========================================================*/ #contact-section{background-color:#240401;color:#fff;position:relative;transition: all 0.5s ease 0s;-webkit-transition: all 0.5s ease 0s;-moz-transition: all 0.5s ease 0s;-o-transition: all 0.5s ease 0s;} #contact-section .heading-text hr{margin:30px auto;background:#fff;height:4px;border:0px;} #contact-section .heading-text h2{color:#fff;} #contact-section .heading-text p{font-style:normal;margin-top:10px;font-size:16px;} #contact-section .heading-text span{margin:0 10px} #contact-section .heading-text a{color:#fff;} #contact-section .heading-text a:hover{color:#a10d2a;} .icon-c {padding-right: 20px;width: 10px;} #contact-section .social a {background:none;color: #fff;line-height: 42px;margin: 0 4px 0 0;} #contact-section .social a:hover{color:#a10d2a;}