/* =================================================================== * * Infinity v1.0 Vendor/Third Party CSS * 01-02-2017 * ------------------------------------------------------------------ * * TOC: * 01. Animate.css * 02. Lightgallery * 03. Owl Carousel * 04. Flexslider * * =================================================================== */ /** * 01. * Animate.css - http://daneden.me/animate * Licensed under the MIT license - http://opensource.org/licenses/MIT * * Copyright (c) 2015 Daniel Eden * =================================================================== */ .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; } .animated.bounceIn, .animated.bounceOut, .animated.flipOutX, .animated.flipOutY { -webkit-animation-duration: .75s; animation-duration: .75s; } @-webkit-keyframes bounce { 20%,53%,80%,from,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40%,43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0); } } @keyframes bounce { 20%,53%,80%,from,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40%,43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0); } } .bounce { -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; transform-origin: center bottom; } @-webkit-keyframes flash { 50%,from,to { opacity: 1; } 25%,75% { opacity: 0; } } @keyframes flash { 50%,from,to { opacity: 1; } 25%,75% { opacity: 0; } } .flash { -webkit-animation-name: flash; animation-name: flash; } @-webkit-keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .pulse { -webkit-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes rubberBand { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes rubberBand { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand; } @-webkit-keyframes shake { from,to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%,30%,50%,70%,90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%,40%,60%,80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } @keyframes shake { from,to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%,30%,50%,70%,90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%,40%,60%,80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } .shake { -webkit-animation-name: shake; animation-name: shake; } @-webkit-keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } to { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } @keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } to { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } .swing { -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } @-webkit-keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%,20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } 30%,50%,70%,90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%,60%,80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%,20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } 30%,50%,70%,90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%,60%,80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .tada { -webkit-animation-name: tada; animation-name: tada; } @-webkit-keyframes wobble { from { -webkit-transform: none; transform: none; } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } to { -webkit-transform: none; transform: none; } } @keyframes wobble { from { -webkit-transform: none; transform: none; } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } to { -webkit-transform: none; transform: none; } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes jello { 11.1%,from,to { -webkit-transform: none; transform: none; } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.39063deg) skewY(0.39063deg); transform: skewX(0.39063deg) skewY(0.39063deg); } 88.8% { -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg); transform: skewX(-0.19531deg) skewY(-0.19531deg); } } @keyframes jello { 11.1%,from,to { -webkit-transform: none; transform: none; } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.39063deg) skewY(0.39063deg); transform: skewX(0.39063deg) skewY(0.39063deg); } 88.8% { -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg); transform: skewX(-0.19531deg) skewY(-0.19531deg); } } .jello { -webkit-animation-name: jello; animation-name: jello; -webkit-transform-origin: center; transform-origin: center; } @-webkit-keyframes bounceIn { 20%,40%,60%,80%,from,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes bounceIn { 20%,40%,60%,80%,from,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInDown { 60%,75%,90%,from,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } to { -webkit-transform: none; transform: none; } } @keyframes bounceInDown { 60%,75%,90%,from,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } to { -webkit-transform: none; transform: none; } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { 60%,75%,90%,from,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } to { -webkit-transform: none; transform: none; } } @keyframes bounceInLeft { 60%,75%,90%,from,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } to { -webkit-transform: none; transform: none; } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { 60%,75%,90%,from,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } to { -webkit-transform: none; transform: none; } } @keyframes bounceInRight { 60%,75%,90%,from,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } to { -webkit-transform: none; transform: none; } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { 60%,75%,90%,from,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInUp { 60%,75%,90%,from,to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 50%,55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } @keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 50%,55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut; } @-webkit-keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%,45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%,45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-webkit-keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%,45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%,45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInDownBig { from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDownBig { from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeftBig { from { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeftBig { from { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig { from { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRightBig { from { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUpBig { from { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUpBig { from { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutDown { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes fadeOutDown { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutDownBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes fadeOutDownBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeft { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes fadeOutLeft { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutLeftBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes fadeOutLeftBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRight { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes fadeOutRight { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutRightBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes fadeOutRightBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes fadeOutUp { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes fadeOutUp { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutUpBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes fadeOutUpBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes flip { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95); transform: perspective(400px) scale3d(0.95, 0.95, 0.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95); transform: perspective(400px) scale3d(0.95, 0.95, 0.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } .animated.flip { -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip; } @-webkit-keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } .flipInX { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; } @-webkit-keyframes flipInY { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInY { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } .flipInY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; } @-webkit-keyframes flipOutX { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } @keyframes flipOutX { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } .flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flipOutY { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } @keyframes flipOutY { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } .flipOutY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; } @-webkit-keyframes lightSpeedIn { from { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; } to { -webkit-transform: none; transform: none; opacity: 1; } } @keyframes lightSpeedIn { from { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; } to { -webkit-transform: none; transform: none; opacity: 1; } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedOut { from { opacity: 1; } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } @keyframes lightSpeedOut { from { opacity: 1; } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) 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 { from { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateIn { from { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; } @-webkit-keyframes rotateInDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } @-webkit-keyframes rotateInDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } @-webkit-keyframes rotateInUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } @-webkit-keyframes rotateInUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } @-webkit-keyframes rotateOut { from { -webkit-transform-origin: center; transform-origin: center; opacity: 1; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } @keyframes rotateOut { from { -webkit-transform-origin: center; transform-origin: center; opacity: 1; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; } @-webkit-keyframes rotateOutDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } @keyframes rotateOutDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } @-webkit-keyframes rotateOutDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateOutDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } @-webkit-keyframes rotateOutUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateOutUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } @-webkit-keyframes rotateOutUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } @keyframes rotateOutUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } @-webkit-keyframes hinge { 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: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%,80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } @keyframes hinge { 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: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%,80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } .hinge { -webkit-animation-name: hinge; animation-name: hinge; } @-webkit-keyframes rollIn { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes rollIn { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } to { opacity: 1; -webkit-transform: none; transform: none; } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } @-webkit-keyframes rollOut { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } @keyframes rollOut { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut; } @-webkit-keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; } @-webkit-keyframes zoomInDown { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInDown { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInDown { -webkit-animation-name: zoomInDown; animation-name: zoomInDown; } @-webkit-keyframes zoomInLeft { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInLeft { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInLeft { -webkit-animation-name: zoomInLeft; animation-name: zoomInLeft; } @-webkit-keyframes zoomInRight { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInRight { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInRight { -webkit-animation-name: zoomInRight; animation-name: zoomInRight; } @-webkit-keyframes zoomInUp { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInUp { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInUp { -webkit-animation-name: zoomInUp; animation-name: zoomInUp; } @-webkit-keyframes zoomOut { from { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } to { opacity: 0; } } @keyframes zoomOut { from { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } to { opacity: 0; } } .zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut; } @-webkit-keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomOutDown { -webkit-animation-name: zoomOutDown; animation-name: zoomOutDown; } @-webkit-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } } @keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } } .zoomOutLeft { -webkit-animation-name: zoomOutLeft; animation-name: zoomOutLeft; } @-webkit-keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } } @keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } } .zoomOutRight { -webkit-animation-name: zoomOutRight; animation-name: zoomOutRight; } @-webkit-keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomOutUp { -webkit-animation-name: zoomOutUp; animation-name: zoomOutUp; } @-webkit-keyframes slideInDown { from { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInDown { from { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideInLeft { from { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInLeft { from { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInRight { from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideInUp { from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInUp { from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp; } @-webkit-keyframes slideOutDown { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes slideOutDown { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .slideOutDown { -webkit-animation-name: slideOutDown; animation-name: slideOutDown; } @-webkit-keyframes slideOutLeft { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes slideOutLeft { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } @-webkit-keyframes slideOutRight { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes slideOutRight { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } @-webkit-keyframes slideOutUp { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes slideOutUp { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } /*---------------------------------------- * 02. * light gallery default styles * ---------------------------------------- */ @font-face { font-family: 'lg'; src: url("../fonts/lightgallery/lg.eot?n1z373"); src: url("../fonts/lightgallery/lg.eot?#iefixn1z373") format("embedded-opentype"), url("../fonts/lightgallery/lg.woff?n1z373") format("woff"), url("../fonts/lightgallery/lg.ttf?n1z373") format("truetype"), url("../fonts/lightgallery/lg.svg?n1z373#lg") format("svg"); font-weight: normal; font-style: normal; } .lg-icon { font-family: 'lg'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .lg-actions .lg-next, .lg-actions .lg-prev { background-color: rgba(0, 0, 0, 0.45); border-radius: 2px; color: #999; cursor: pointer; display: block; font-size: 22px; margin-top: -10px; padding: 8px 10px 9px; position: absolute; top: 50%; z-index: 1080; } .lg-actions .lg-next.disabled, .lg-actions .lg-prev.disabled { pointer-events: none; opacity: 0.5; } .lg-actions .lg-next:hover, .lg-actions .lg-prev:hover { color: #FFF; } .lg-actions .lg-next { right: 20px; } .lg-actions .lg-next:before { content: "\e095"; } .lg-actions .lg-prev { left: 20px; } .lg-actions .lg-prev:after { content: "\e094"; } @-webkit-keyframes lg-right-end { 0% { left: 0; } 50% { left: -30px; } 100% { left: 0; } } @-moz-keyframes lg-right-end { 0% { left: 0; } 50% { left: -30px; } 100% { left: 0; } } @-ms-keyframes lg-right-end { 0% { left: 0; } 50% { left: -30px; } 100% { left: 0; } } @keyframes lg-right-end { 0% { left: 0; } 50% { left: -30px; } 100% { left: 0; } } @-webkit-keyframes lg-left-end { 0% { left: 0; } 50% { left: 30px; } 100% { left: 0; } } @-moz-keyframes lg-left-end { 0% { left: 0; } 50% { left: 30px; } 100% { left: 0; } } @-ms-keyframes lg-left-end { 0% { left: 0; } 50% { left: 30px; } 100% { left: 0; } } @keyframes lg-left-end { 0% { left: 0; } 50% { left: 30px; } 100% { left: 0; } } .lg-outer.lg-right-end .lg-object { -webkit-animation: lg-right-end 0.3s; -o-animation: lg-right-end 0.3s; animation: lg-right-end 0.3s; position: relative; } .lg-outer.lg-left-end .lg-object { -webkit-animation: lg-left-end 0.3s; -o-animation: lg-left-end 0.3s; animation: lg-left-end 0.3s; position: relative; } .lg-toolbar { z-index: 1082; left: 0; position: absolute; top: 0; width: 100%; background-color: rgba(0, 0, 0, 0.45); } .lg-toolbar .lg-icon { color: #999; cursor: pointer; float: right; font-size: 24px; height: 47px; line-height: 27px; padding: 10px 0; text-align: center; width: 50px; text-decoration: none !important; outline: medium none; -webkit-transition: color 0.2s linear; -o-transition: color 0.2s linear; transition: color 0.2s linear; } .lg-toolbar .lg-icon:hover { color: #FFF; } .lg-toolbar .lg-close:after { content: "\e070"; } .lg-toolbar .lg-download:after { content: "\e0f2"; } .lg-sub-html { background-color: rgba(0, 0, 0, 0.45); bottom: 0; color: #EEE; font-size: 16px; left: 0; padding: 10px 40px; position: fixed; right: 0; text-align: center; z-index: 1080; } .lg-sub-html h4 { margin: 0; font-size: 13px; font-weight: bold; } .lg-sub-html p { font-size: 12px; margin: 5px 0 0; } #lg-counter { color: #999; display: inline-block; font-size: 16px; padding-left: 20px; padding-top: 12px; vertical-align: middle; } .lg-toolbar, .lg-prev, .lg-next { opacity: 1; -webkit-transition: -webkit-transform 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, color 0.2s linear; -moz-transition: -moz-transform 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, color 0.2s linear; -o-transition: -o-transform 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, color 0.2s linear; transition: transform 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, color 0.2s linear; } .lg-hide-items .lg-prev { opacity: 0; -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } .lg-hide-items .lg-next { opacity: 0; -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } .lg-hide-items .lg-toolbar { opacity: 0; -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-object { -webkit-transform: scale3d(0.5, 0.5, 0.5); transform: scale3d(0.5, 0.5, 0.5); opacity: 0; -webkit-transition: -webkit-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important; -moz-transition: -moz-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important; -o-transition: -o-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important; transition: transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; } body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item.lg-complete .lg-object { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); opacity: 1; } .lg-outer .lg-thumb-outer { background-color: #0D0A0A; bottom: 0; position: absolute; width: 100%; z-index: 1080; max-height: 350px; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); -webkit-transition: -webkit-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s; -moz-transition: -moz-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s; -o-transition: -o-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s; transition: transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s; } .lg-outer .lg-thumb-outer.lg-grab .lg-thumb-item { cursor: -webkit-grab; cursor: -moz-grab; cursor: -o-grab; cursor: -ms-grab; cursor: grab; } .lg-outer .lg-thumb-outer.lg-grabbing .lg-thumb-item { cursor: move; cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: -o-grabbing; cursor: -ms-grabbing; cursor: grabbing; } .lg-outer .lg-thumb-outer.lg-dragging .lg-thumb { -webkit-transition-duration: 0s !important; transition-duration: 0s !important; } .lg-outer.lg-thumb-open .lg-thumb-outer { -webkit-transform: translate3d(0, 0%, 0); transform: translate3d(0, 0%, 0); } .lg-outer .lg-thumb { padding: 10px 0; height: 100%; margin-bottom: -5px; } .lg-outer .lg-thumb-item { border-radius: 5px; cursor: pointer; float: left; overflow: hidden; height: 100%; border: 2px solid #FFF; border-radius: 4px; margin-bottom: 5px; } @media (min-width: 1025px) { .lg-outer .lg-thumb-item { -webkit-transition: border-color 0.25s ease; -o-transition: border-color 0.25s ease; transition: border-color 0.25s ease; } } .lg-outer .lg-thumb-item.active, .lg-outer .lg-thumb-item:hover { border-color: #a90707; } .lg-outer .lg-thumb-item img { width: 100%; height: 100%; object-fit: cover; } .lg-outer.lg-has-thumb .lg-item { padding-bottom: 120px; } .lg-outer.lg-can-toggle .lg-item { padding-bottom: 0; } .lg-outer.lg-pull-caption-up .lg-sub-html { -webkit-transition: bottom 0.25s ease; -o-transition: bottom 0.25s ease; transition: bottom 0.25s ease; } .lg-outer.lg-pull-caption-up.lg-thumb-open .lg-sub-html { bottom: 100px; } .lg-outer .lg-toogle-thumb { background-color: #0D0A0A; border-radius: 2px 2px 0 0; color: #999; cursor: pointer; font-size: 24px; height: 39px; line-height: 27px; padding: 5px 0; position: absolute; right: 20px; text-align: center; top: -39px; width: 50px; } .lg-outer .lg-toogle-thumb:after { content: "\e1ff"; } .lg-outer .lg-toogle-thumb:hover { color: #FFF; } .lg-outer .lg-video-cont { display: inline-block; vertical-align: middle; max-width: 1140px; max-height: 100%; width: 100%; padding: 0 5px; } .lg-outer .lg-video { width: 100%; height: 0; padding-bottom: 56.25%; overflow: hidden; position: relative; } .lg-outer .lg-video .lg-object { display: inline-block; position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; } .lg-outer .lg-video .lg-video-play { width: 84px; height: 59px; position: absolute; left: 50%; top: 50%; margin-left: -42px; margin-top: -30px; z-index: 1080; cursor: pointer; } .lg-outer .lg-has-vimeo .lg-video-play { background: url("../images/lightgallery/vimeo-play.png") no-repeat scroll 0 0 transparent; } .lg-outer .lg-has-vimeo:hover .lg-video-play { background: url("../images/lightgallery/vimeo-play.png") no-repeat scroll 0 -58px transparent; } .lg-outer .lg-has-html5 .lg-video-play { background: transparent url("../images/lightgallery/video-play.png") no-repeat scroll 0 0; height: 64px; margin-left: -32px; margin-top: -32px; width: 64px; opacity: 0.8; } .lg-outer .lg-has-html5:hover .lg-video-play { opacity: 1; } .lg-outer .lg-has-youtube .lg-video-play { background: url("../images/lightgallery/youtube-play.png") no-repeat scroll 0 0 transparent; } .lg-outer .lg-has-youtube:hover .lg-video-play { background: url("../images/lightgallery/youtube-play.png") no-repeat scroll 0 -60px transparent; } .lg-outer .lg-video-object { width: 100% !important; height: 100% !important; position: absolute; top: 0; left: 0; } .lg-outer .lg-has-video .lg-video-object { visibility: hidden; } .lg-outer .lg-has-video.lg-video-playing .lg-object, .lg-outer .lg-has-video.lg-video-playing .lg-video-play { display: none; } .lg-outer .lg-has-video.lg-video-playing .lg-video-object { visibility: visible; } .lg-progress-bar { background-color: #333; height: 5px; left: 0; position: absolute; top: 0; width: 100%; z-index: 1083; opacity: 0; -webkit-transition: opacity 0.08s ease 0s; -moz-transition: opacity 0.08s ease 0s; -o-transition: opacity 0.08s ease 0s; transition: opacity 0.08s ease 0s; } .lg-progress-bar .lg-progress { background-color: #a90707; height: 5px; width: 0; } .lg-progress-bar.lg-start .lg-progress { width: 100%; } .lg-show-autoplay .lg-progress-bar { opacity: 1; } .lg-autoplay-button:after { content: "\e01d"; } .lg-show-autoplay .lg-autoplay-button:after { content: "\e01a"; } .lg-outer.lg-css3.lg-zoom-dragging .lg-item.lg-complete.lg-zoomable .lg-img-wrap, .lg-outer.lg-css3.lg-zoom-dragging .lg-item.lg-complete.lg-zoomable .lg-image { -webkit-transition-duration: 0s; transition-duration: 0s; } .lg-outer .lg-item.lg-complete.lg-zoomable .lg-img-wrap { -webkit-transition: left 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, top 0.3s cubic-bezier(0, 0, 0.25, 1) 0s; -moz-transition: left 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, top 0.3s cubic-bezier(0, 0, 0.25, 1) 0s; -o-transition: left 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, top 0.3s cubic-bezier(0, 0, 0.25, 1) 0s; transition: left 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, top 0.3s cubic-bezier(0, 0, 0.25, 1) 0s; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } .lg-outer .lg-item.lg-complete.lg-zoomable .lg-image { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); -webkit-transition: -webkit-transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.15s !important; -moz-transition: -moz-transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.15s !important; -o-transition: -o-transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.15s !important; transition: transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.15s !important; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } #lg-zoom-in:after { content: "\e311"; } #lg-actual-size { font-size: 20px; } #lg-actual-size:after { content: "\e033"; } #lg-zoom-out { opacity: 0.5; pointer-events: none; } #lg-zoom-out:after { content: "\e312"; } .lg-zoomed #lg-zoom-out { opacity: 1; pointer-events: auto; } .lg-outer .lg-pager-outer { bottom: 60px; left: 0; position: absolute; right: 0; text-align: center; z-index: 1080; height: 10px; } .lg-outer .lg-pager-outer.lg-pager-hover .lg-pager-cont { overflow: visible; } .lg-outer .lg-pager-cont { cursor: pointer; display: inline-block; overflow: hidden; position: relative; vertical-align: top; margin: 0 5px; } .lg-outer .lg-pager-cont:hover .lg-pager-thumb-cont { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .lg-outer .lg-pager-cont.lg-pager-active .lg-pager { box-shadow: 0 0 0 2px white inset; } .lg-outer .lg-pager-thumb-cont { background-color: #fff; color: #FFF; bottom: 100%; height: 83px; left: 0; margin-bottom: 20px; margin-left: -60px; opacity: 0; padding: 5px; position: absolute; width: 120px; border-radius: 3px; -webkit-transition: opacity 0.15s ease 0s, -webkit-transform 0.15s ease 0s; -moz-transition: opacity 0.15s ease 0s, -moz-transform 0.15s ease 0s; -o-transition: opacity 0.15s ease 0s, -o-transform 0.15s ease 0s; transition: opacity 0.15s ease 0s, transform 0.15s ease 0s; -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } .lg-outer .lg-pager-thumb-cont img { width: 100%; height: 100%; } .lg-outer .lg-pager { background-color: rgba(255, 255, 255, 0.5); border-radius: 50%; box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.7) inset; display: block; height: 12px; -webkit-transition: box-shadow 0.3s ease 0s; -o-transition: box-shadow 0.3s ease 0s; transition: box-shadow 0.3s ease 0s; width: 12px; } .lg-outer .lg-pager:hover, .lg-outer .lg-pager:focus { box-shadow: 0 0 0 8px white inset; } .lg-outer .lg-caret { border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px dashed; bottom: -10px; display: inline-block; height: 0; left: 50%; margin-left: -5px; position: absolute; vertical-align: middle; width: 0; } .lg-fullscreen:after { content: "\e20c"; } .lg-fullscreen-on .lg-fullscreen:after { content: "\e20d"; } .group { *zoom: 1; } .group:before, .group:after { display: table; content: ""; line-height: 0; } .group:after { clear: both; } .lg-outer { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 1050; opacity: 0; -webkit-transition: opacity 0.15s ease 0s; -o-transition: opacity 0.15s ease 0s; transition: opacity 0.15s ease 0s; } .lg-outer * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .lg-outer.lg-visible { opacity: 1; } .lg-outer.lg-css3 .lg-item.lg-prev-slide, .lg-outer.lg-css3 .lg-item.lg-next-slide, .lg-outer.lg-css3 .lg-item.lg-current { -webkit-transition-duration: inherit !important; transition-duration: inherit !important; -webkit-transition-timing-function: inherit !important; transition-timing-function: inherit !important; } .lg-outer.lg-css3.lg-dragging .lg-item.lg-prev-slide, .lg-outer.lg-css3.lg-dragging .lg-item.lg-next-slide, .lg-outer.lg-css3.lg-dragging .lg-item.lg-current { -webkit-transition-duration: 0s !important; transition-duration: 0s !important; opacity: 1; } .lg-outer.lg-grab img.lg-object { cursor: -webkit-grab; cursor: -moz-grab; cursor: -o-grab; cursor: -ms-grab; cursor: grab; } .lg-outer.lg-grabbing img.lg-object { cursor: move; cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: -o-grabbing; cursor: -ms-grabbing; cursor: grabbing; } .lg-outer .lg { height: 100%; width: 100%; position: relative; overflow: hidden; margin-left: auto; margin-right: auto; max-width: 100%; max-height: 100%; } .lg-outer .lg-inner { width: 100%; height: 100%; position: absolute; left: 0; top: 0; white-space: nowrap; } .lg-outer .lg-item { background: url("../images/lightgallery/loading.gif") no-repeat scroll center center transparent; display: none !important; } .lg-outer.lg-css3 .lg-prev-slide, .lg-outer.lg-css3 .lg-current, .lg-outer.lg-css3 .lg-next-slide { display: inline-block !important; } .lg-outer.lg-css .lg-current { display: inline-block !important; } .lg-outer .lg-item, .lg-outer .lg-img-wrap { display: inline-block; text-align: center; position: absolute; width: 100%; height: 100%; } .lg-outer .lg-item:before, .lg-outer .lg-img-wrap:before { content: ""; display: inline-block; height: 50%; width: 1px; margin-right: -1px; } .lg-outer .lg-img-wrap { position: absolute; padding: 0 5px; left: 0; right: 0; top: 0; bottom: 0; } .lg-outer .lg-item.lg-complete { background-image: none; } .lg-outer .lg-item.lg-current { z-index: 1060; } .lg-outer .lg-image { display: inline-block; vertical-align: middle; max-width: 100%; max-height: 100%; width: auto !important; height: auto !important; } .lg-outer.lg-show-after-load .lg-item .lg-object, .lg-outer.lg-show-after-load .lg-item .lg-video-play { opacity: 0; -webkit-transition: opacity 0.15s ease 0s; -o-transition: opacity 0.15s ease 0s; transition: opacity 0.15s ease 0s; } .lg-outer.lg-show-after-load .lg-item.lg-complete .lg-object, .lg-outer.lg-show-after-load .lg-item.lg-complete .lg-video-play { opacity: 1; } .lg-outer .lg-empty-html { display: none; } .lg-outer.lg-hide-download #lg-download { display: none; } .lg-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1040; background-color: #000; opacity: 0; -webkit-transition: opacity 0.15s ease 0s; -o-transition: opacity 0.15s ease 0s; transition: opacity 0.15s ease 0s; } .lg-backdrop.in { opacity: 1; } .lg-css3.lg-no-trans .lg-prev-slide, .lg-css3.lg-no-trans .lg-next-slide, .lg-css3.lg-no-trans .lg-current { -webkit-transition: none 0s ease 0s !important; -moz-transition: none 0s ease 0s !important; -o-transition: none 0s ease 0s !important; transition: none 0s ease 0s !important; } .lg-css3.lg-use-css3 .lg-item { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } .lg-css3.lg-use-left .lg-item { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } .lg-css3.lg-fade .lg-item { opacity: 0; } .lg-css3.lg-fade .lg-item.lg-current { opacity: 1; } .lg-css3.lg-fade .lg-item.lg-prev-slide, .lg-css3.lg-fade .lg-item.lg-next-slide, .lg-css3.lg-fade .lg-item.lg-current { -webkit-transition: opacity 0.1s ease 0s; -moz-transition: opacity 0.1s ease 0s; -o-transition: opacity 0.1s ease 0s; transition: opacity 0.1s ease 0s; } .lg-css3.lg-slide.lg-use-css3 .lg-item { opacity: 0; } .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-prev-slide { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-next-slide { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-current { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-prev-slide, .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-next-slide, .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-current { -webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; -moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; -o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; } .lg-css3.lg-slide.lg-use-left .lg-item { opacity: 0; position: absolute; left: 0; } .lg-css3.lg-slide.lg-use-left .lg-item.lg-prev-slide { left: -100%; } .lg-css3.lg-slide.lg-use-left .lg-item.lg-next-slide { left: 100%; } .lg-css3.lg-slide.lg-use-left .lg-item.lg-current { left: 0; opacity: 1; } .lg-css3.lg-slide.lg-use-left .lg-item.lg-prev-slide, .lg-css3.lg-slide.lg-use-left .lg-item.lg-next-slide, .lg-css3.lg-slide.lg-use-left .lg-item.lg-current { -webkit-transition: left 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; -moz-transition: left 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; -o-transition: left 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; transition: left 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; } /*# sourceMappingURL=lightgallery.css.map */ /** * 03. * Owl Carousel v2.2.0 * Copyright 2013-2016 David Deutsch * Licensed under MIT (https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE) */ /* * Owl Carousel - Core */ .owl-carousel { display: none; width: 100%; -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 { position: relative; overflow: hidden; /* fix for flashing background */ -webkit-transform: translate3d(0px, 0px, 0px); } .owl-carousel .owl-item { position: relative; min-height: 1px; float: left; -webkit-backface-visibility: hidden; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } .owl-carousel .owl-item img { display: block; width: 100%; -webkit-transform-style: preserve-3d; } .owl-carousel .owl-nav.disabled, .owl-carousel .owl-dots.disabled { display: none; } .owl-carousel .owl-nav .owl-prev, .owl-carousel .owl-nav .owl-next, .owl-carousel .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 { visibility: hidden; } .owl-carousel.owl-drag .owl-item { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .owl-carousel.owl-grab { cursor: move; 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 - Animate Plugin */ .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 { transition: height 500ms ease-in-out; } /* * Owl Carousel - Lazy Load Plugin */ .owl-carousel .owl-item .owl-lazy { opacity: 0; transition: opacity 400ms ease; } .owl-carousel .owl-item img.owl-lazy { -webkit-transform-style: preserve-3d; 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("owl.video.play.png") no-repeat; cursor: pointer; z-index: 1; -webkit-backface-visibility: hidden; transition: -webkit-transform 100ms ease; transition: transform 100ms ease; } .owl-carousel .owl-video-play-icon:hover { -webkit-transform: scale(1.3, 1.3); -ms-transform: scale(1.3, 1.3); transform: 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; background-size: contain; transition: opacity 400ms ease; } .owl-carousel .owl-video-frame { position: relative; z-index: 1; height: 100%; width: 100%; } /** * 04. * jQuery FlexSlider v2.5.0 * http://www.woothemes.com/flexslider/ * * Copyright 2012 WooThemes * Free to use under the GPLv2 and later license. * http://www.gnu.org/licenses/gpl-2.0.html * * Contributing author: Tyler Smith (@mbmufffin) * * =================================================================== */ /* reset */ .flex-container a:hover, .flex-slider a:hover, .flex-container a:focus, .flex-slider a:focus { outline: none; } .slides, .slides > li, .flex-control-nav, .flex-direction-nav { margin: 0; padding: 0; list-style: none; } .flex-pauseplay span { text-transform: capitalize; } /* base styles */ .flexslider { margin: 0; padding: 0; } .flexslider .slides > li { display: none; -webkit-backface-visibility: hidden; } .flexslider .slides img { width: 100%; display: block; } .flexslider .slides:after { content: "\0020"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } html[xmlns] .flexslider .slides { display: block; } * html .flexslider .slides { height: 1%; } .no-js .flexslider .slides > li:first-child { display: block; } /* =================================================================== * * Infinity v1.0 Base Stylesheet * 01-02-2017 * ------------------------------------------------------------------ * TOC: * 01. reset * 02. basic/base setup styles * 03. grid * 04. MISC * * =================================================================== */ /* =================================================================== * 01. reset - normalize.css v3.0.2 | MIT License | git.io/normalize * * ------------------------------------------------------------------- */ html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } audio, canvas, progress, video { display: inline-block; vertical-align: baseline; } audio:not([controls]) { display: none; height: 0; } [hidden], template { display: none; } a { background: transparent; } a:active, a:hover { outline: 0; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } dfn { font-style: italic; } h1 { font-size: 2em; margin: 0.67em 0; } mark { background: #ff0; color: #000; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } img { border: 0; } svg:not(:root) { overflow: hidden; } figure { margin: 1em 40px; } hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; } pre { overflow: auto; } code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; } button { overflow: visible; } button, select { text-transform: none; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } button[disabled], html input[disabled] { cursor: default; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } input { line-height: normal; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { border: 0; padding: 0; } textarea { overflow: auto; } optgroup { font-weight: bold; } table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } /* =================================================================== * 02. basic/base setup styles - (_basic.scss) * * ------------------------------------------------------------------- */ html { font-size: 62.5%; box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } body { font-weight: normal; line-height: 1; text-rendering: optimizeLegibility; word-wrap: break-word; -webkit-overflow-scrolling: touch; -webkit-text-size-adjust: none; } body, input, button { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } /* ------------------------------------------------------------------- * Media - (_basic.scss) * ------------------------------------------------------------------- */ img, video { max-width: 100%; height: auto; } /* ------------------------------------------------------------------- * Typography resets - (_basic.scss) * ------------------------------------------------------------------- */ div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, th, td { margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6 { -webkit-font-variant-ligatures: common-ligatures; -moz-font-variant-ligatures: common-ligatures; font-variant-ligatures: common-ligatures; text-rendering: optimizeLegibility; } em, i { font-style: italic; line-height: inherit; } strong, b { font-weight: bold; line-height: inherit; } small { font-size: 60%; line-height: inherit; } ol, ul { list-style: none; } li { display: block; } /* ------------------------------------------------------------------- * links - (_basic.scss) * ------------------------------------------------------------------- */ a { text-decoration: none; line-height: inherit; } a img { border: none; } /* ------------------------------------------------------------------- * inputs - (_basic.scss) * ------------------------------------------------------------------- */ fieldset { margin: 0; padding: 0; } input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; } /* =================================================================== * 03. grid - (_grid.scss) * * ------------------------------------------------------------------- */ .row { width: 94%; max-width: 1170px; margin: 0 auto; } .row:before, .row:after { content: ""; display: table; } .row:after { clear: both; } .row .row { width: auto; max-width: none; margin-left: -20px; margin-right: -20px; } [class*="col-"], .bgrid { float: left; } [class*="col-"] + [class*="col-"].end { float: right; } [class*="col-"] { padding: 0 20px; } .col-one { width: 8.33333%; } .col-two, .col-1-6 { width: 16.66667%; } .col-three, .col-1-4 { width: 25%; } .col-four, .col-1-3 { width: 33.33333%; } .col-five { width: 41.66667%; } .col-six, .col-1-2 { width: 50%; } .col-seven { width: 58.33333%; } .col-eight, .col-2-3 { width: 66.66667%; } .col-nine, .col-3-4 { width: 75%; } .col-ten, .col-5-6 { width: 83.33333%; } .col-eleven { width: 91.66667%; } .col-twelve, .col-full { width: 100%; } /* ------------------------------------------------------------------- * small screens - (_grid.scss) * ------------------------------------------------------------------- */ @media screen and (max-width: 1024px) { .row .row { margin-left: -18px; margin-right: -18px; } [class*="col-"] { padding: 0 18px; } } /* ------------------------------------------------------------------- * tablets - (_grid.scss) * ------------------------------------------------------------------- */ @media screen and (max-width: 768px) { .row { width: auto; padding-left: 30px; padding-right: 30px; } .row .row { padding-left: 0; padding-right: 0; margin-left: -15px; margin-right: -15px; } [class*="col-"] { padding: 0 15px; } .tab-1-4 { width: 25%; } .tab-1-3 { width: 33.33333%; } .tab-1-2 { width: 50%; } .tab-2-3 { width: 66.66667%; } .tab-3-4 { width: 75%; } .tab-full { width: 100%; } } /* ------------------------------------------------------------------- * large mobile devices - (_grid.scss) * ------------------------------------------------------------------- */ @media screen and (max-width: 600px) { .row { padding-left: 25px; padding-right: 25px; } .row .row { margin-left: -10px; margin-right: -10px; } [class*="col-"] { padding: 0 10px; } .mob-1-4 { width: 25%; } .mob-1-2 { width: 50%; } .mob-3-4 { width: 75%; } .mob-full { width: 100%; } } /* ------------------------------------------------------------------- * small mobile devices - (_grid.scss) * ------------------------------------------------------------------- */ @media screen and (max-width: 400px) { .row .row { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; } [class*="col-"] { width: 100% !important; float: none !important; clear: both !important; margin-left: 0; margin-right: 0; padding: 0; } [class*="col-"] + [class*="col-"].end { float: none; } } /* =================================================================== * block grids - (_grid.scss) * * ------------------------------------------------------------------- */ [class*="block-"]:before, [class*="block-"]:after { content: ""; display: table; } [class*="block-"]:after { clear: both; } .block-1-6 .bgrid { width: 16.66667%; } .block-1-4 .bgrid { width: 25%; } .block-1-3 .bgrid { width: 33.33333%; } .block-1-2 .bgrid { width: 50%; } /** * Clearing for block grid columns. Allow columns with * different heights to align properly. */ .block-1-6 .bgrid:nth-child(6n+1), .block-1-4 .bgrid:nth-child(4n+1), .block-1-3 .bgrid:nth-child(3n+1), .block-1-2 .bgrid:nth-child(2n+1) { clear: both; } /* ------------------------------------------------------------------- * small screens - (_grid.scss) * ------------------------------------------------------------------- */ @media screen and (max-width: 1024px) { .block-s-1-6 .bgrid { width: 16.66667%; } .block-s-1-4 .bgrid { width: 25%; } .block-s-1-3 .bgrid { width: 33.33333%; } .block-s-1-2 .bgrid { width: 50%; } .block-s-full .bgrid { width: 100%; clear: both; } [class*="block-s-"] .bgrid:nth-child(n) { clear: none; } .block-s-1-6 .bgrid:nth-child(6n+1), .block-s-1-4 .bgrid:nth-child(4n+1), .block-s-1-3 .bgrid:nth-child(3n+1), .block-s-1-2 .bgrid:nth-child(2n+1) { clear: both; } } /* ------------------------------------------------------------------- * tablets - (_grid.scss) * ------------------------------------------------------------------- */ @media screen and (max-width: 768px) { .block-tab-1-6 .bgrid { width: 16.66667%; } .block-tab-1-4 .bgrid { width: 25%; } .block-tab-1-3 .bgrid { width: 33.33333%; } .block-tab-1-2 .bgrid { width: 50%; } .block-tab-full .bgrid { width: 100%; clear: both; } [class*="block-tab-"] .bgrid:nth-child(n) { clear: none; } .block-tab-1-6 .bgrid:nth-child(6n+1), .block-tab-1-4 .bgrid:nth-child(4n+1), .block-tab-1-3 .bgrid:nth-child(3n+1), .block-tab-1-2 .bgrid:nth-child(2n+1) { clear: both; } } /* ------------------------------------------------------------------- * large mobile devices - (_grid.scss) * ------------------------------------------------------------------- */ @media screen and (max-width: 600px) { .block-mob-1-6 .bgrid { width: 16.66667%; } .block-mob-1-4 .bgrid { width: 25%; } .block-mob-1-3 .bgrid { width: 33.33333%; } .block-mob-1-2 .bgrid { width: 50%; } .block-mob-full .bgrid { width: 100%; clear: both; } [class*="block-mob-"] .bgrid:nth-child(n) { clear: none; } .block-mob-1-6 .bgrid:nth-child(6n+1), .block-mob-1-4 .bgrid:nth-child(4n+1), .block-mob-1-3 .bgrid:nth-child(3n+1), .block-mob-1-2 .bgrid:nth-child(2n+1) { clear: both; } } /* ------------------------------------------------------------------- * stack on small mobile devices - (_grid.scss) * ------------------------------------------------------------------- */ @media screen and (max-width: 400px) { .stack .bgrid { width: 100% !important; float: none !important; clear: both !important; margin-left: 0; margin-right: 0; } } /* =================================================================== * 04. MISC - (_grid.scss) * * ------------------------------------------------------------------- */ /* Clearing - (http://nicolasgallagher.com/micro-clearfix-hack/ */ .group:before, .group:after { content: ""; display: table; } .group:after { clear: both; } /* Misc Helper Styles */ .hide { display: none; } .invisible { visibility: hidden; } .antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .overflow-hidden { overflow: hidden; } .remove-bottom { margin-bottom: 0; } .half-bottom { margin-bottom: 1.5rem !important; } .add-bottom { margin-bottom: 3rem !important; } .no-border { border: none; } .full-width { width: 100%; } .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .pull-left { float: left; } .pull-right { float: right; } .align-center { margin-left: auto; margin-right: auto; text-align: center; } /* =================================================================== * * Infinity v1.0 Main Stylesheet * 01-02-2017 * ------------------------------------------------------------------ * * TOC: * 01. webfonts and iconfonts * 02. base style overrides * 03. typography & general theme styles * 04. preloader * 05. forms * 06. buttons * 07. other components * 08. common and reusable styles * 09. header styles * 10. home * 11. about * 12. services * 13. portfolio * 14. testimonials * 15. clients * 16. contact * 17. footer * * =================================================================== */ /* =================================================================== * 01. webfonts and iconfonts - (_document-setup) * * ------------------------------------------------------------------- */ @import url("https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css"); @import url("font-awesome/css/font-awesome.min.css"); @import url("micons/micons.css"); @import url("fonts.css"); .transition { -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s; } .floating-circle-area { position: fixed; bottom: 30px; left: 30px; i { font-size: 30px; color: #fff; line-height: 1.7; } .floating-circle { position: relative; z-index: 999; width: 50px; height: 50px; background-color: #ffd828; border-radius: 50%; display: inline-block; text-align: center; border: 2px solid #fff; -webkit-box-shadow: 1px 2px 4px -1px rgba(0,0,0,0.3); -moz-box-shadow: 1px 2px 4px -1px rgba(0,0,0,0.3); box-shadow: 1px 2px 4px -1px rgba(0,0,0,0.3); &:hover { cursor: pointer; background: darken(@primary-color, 5%); } } .floating-inner { position: absolute; left:0; bottom:0; opacity: 0; .transition; &:hover { transform:scale(1.1); -webkit-box-shadow: 1px 2px 7px -1px rgba(0,0,0,0.2); -moz-box-shadow: 1px 2px 7px -1px rgba(0,0,0,0.2); box-shadow: 1px 2px 7px -1px rgba(0,0,0,0.2); } } .floating-email { z-index:998; background-color: #ffd828; &:hover { background-color: darken(#000000, 7%); } } .floating-phone { z-index:997; background-color: #ffd828; &:hover { background-color: darken(#000000, 7%); } } .floating-whatsapp { z-index:996; background-color: #ffd828; &:hover { background-color: darken(#000000, 7%); } } } .floating-open { .floating-email { bottom: 60px ; opacity: 1; } .floating-phone { bottom: 120px; opacity: 1; } .floating-whatsapp { bottom: 180px; opacity: 1; } } /* =================================================================== * 02. base style overrides - (_document-setup) * * ------------------------------------------------------------------- */ html { font-size: 10px; } @media only screen and (max-width: 1024px) { html { font-size: 9.375px; } } @media only screen and (max-width: 768px) { html { font-size: 10px; } } @media only screen and (max-width: 400px) { html { font-size: 9.375px; } } html, body { height: 100%; } body { background: #111111; font-family: "librebaskerville-regular", serif; font-size: 1.6rem; line-height: 3rem; color: #353535; margin: 0; padding: 0; } /* ------------------------------------------------------------------- * links - (_document-setup) * ------------------------------------------------------------------- */ a, a:visited { color: hsl(0, 0%, 100%); -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } a:hover, a:focus { color: hsl(49, 67%, 49%); } /* =================================================================== * 03. typography & general theme styles - (_document-setup.scss) * * ------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6, .h01, .h02, .h03, .h04, .h05, .h06 { font-family: "montserrat-bold", sans-serif; color: #151515; font-style: normal; text-rendering: optimizeLegibility; margin-bottom: 2.1rem; } h3, .h03, h4, .h04 { margin-bottom: 1.8rem; } h5, .h05, h6, .h06 { margin-bottom: 1.2rem; } h1, .h01 { font-size: 3.1rem; line-height: 1.35; letter-spacing: -.1rem; } @media only screen and (max-width: 600px) { h1, .h01 { font-size: 2.6rem; letter-spacing: -.07rem; } } h2, .h02 { font-size: 2.4rem; line-height: 1.25; } h3, .h03 { font-size: 2rem; line-height: 1.5; } h4, .h04 { font-size: 1.7rem; line-height: 1.76; } h5, .h05 { font-size: 1.4rem; line-height: 1.7; text-transform: uppercase; letter-spacing: .2rem; } h6, .h06 { font-size: 1.3rem; line-height: 1.85; text-transform: uppercase; letter-spacing: .2rem; } p img { margin: 0; } p.lead { font-family: "montserrat-regular", sans-serif; font-size: 2rem; line-height: 1.8; color: #4f4f4f; margin-bottom: 3.6rem; } @media only screen and (max-width: 768px) { p.lead { font-size: 1.8rem; } } em, i, strong, b { font-size: 1.6rem; line-height: 3rem; font-style: normal; font-weight: normal; } em, i { font-family: "librebaskerville-italic", serif; } strong, b { font-family: "librebaskerville-bold", serif; } small { font-size: 1.1rem; line-height: inherit; } blockquote { margin: 3rem 0; padding-left: 5rem; position: relative; } blockquote:before { content: "\201C"; font-size: 10rem; line-height: 0px; margin: 0; color: rgba(0, 0, 0, 0.3); font-family: arial, sans-serif; position: absolute; top: 3.6rem; left: 0; } blockquote p { font-family: "librebaskerville-italic", georgia, serif; font-style: italic; padding: 0; font-size: 1.9rem; line-height: 1.895; } blockquote cite { display: block; font-size: 1.3rem; font-style: normal; line-height: 1.615; } blockquote cite:before { content: "\2014 \0020"; } blockquote cite a, blockquote cite a:visited { color: #4f4f4f; border: none; } abbr { font-family: "librebaskerville-bold", serif; font-variant: small-caps; text-transform: lowercase; letter-spacing: .05rem; color: #4f4f4f; } var, kbd, samp, code, pre { font-family: Consolas, "Andale Mono", Courier, "Courier New", monospace; } pre { padding: 2.4rem 3rem 3rem; background: #F1F1F1; } code { font-size: 1.4rem; margin: 0 .2rem; padding: .3rem .6rem; white-space: nowrap; background: #F1F1F1; border: 1px solid #E1E1E1; border-radius: 3px; } pre > code { display: block; white-space: pre; line-height: 2; padding: 0; margin: 0; } pre.prettyprint > code { border: none; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; } mark { background: #FFF49B; color: #000; } hr { border: solid #d2d2d2; border-width: 1px 0 0; clear: both; margin: 2.4rem 0 1.5rem; height: 0; } /* ------------------------------------------------------------------- * Lists - (_document-setup.scss) * ------------------------------------------------------------------- */ ol { list-style: decimal; } ul { list-style: disc; } li { display: list-item; } ol, ul { margin-left: 1.7rem; } ul li { padding-left: .4rem; } ul ul, ul ol, ol ol, ol ul { margin: .6rem 0 .6rem 1.7rem; } ul.disc li { display: list-item; list-style: none; padding: 0 0 0 .8rem; position: relative; } ul.disc li::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #07617d; position: absolute; left: -17px; top: 11px; vertical-align: middle; } dt { margin: 0; color: #07617d; } dd { margin: 0 0 0 2rem; } /* ------------------------------------------------------------------- * Spacing - (_document-setup) * ------------------------------------------------------------------- */ button, .button { margin-bottom: 1.2rem; } fieldset { margin-bottom: 1.5rem; } input, textarea, select, pre, blockquote, figure, table, p, ul, ol, dl, form, .fluid-video-wrapper, .ss-custom-select { margin-bottom: 3rem; } /* ------------------------------------------------------------------- * floated image - (_document-setup) * ------------------------------------------------------------------- */ img.pull-right { margin: 1.5rem 0 0 3rem; } img.pull-left { margin: 1.5rem 3rem 0 0; } /* ------------------------------------------------------------------- * block grids paddings * ------------------------------------------------------------------- */ .bgrid { padding: 0 20px; } @media only screen and (max-width: 1024px) { .bgrid { padding: 0 18px; } } @media only screen and (max-width: 768px) { .bgrid { padding: 0 15px; } } @media only screen and (max-width: 600px) { .bgrid { padding: 0 10px; } } @media only screen and (max-width: 400px) { .bgrid { padding: 0; } } /* ------------------------------------------------------------------- * tables - (_document-setup.scss) * ------------------------------------------------------------------- */ table { border-width: 0; width: 100%; max-width: 100%; font-family: "librebaskerville-regular", sans-serif; } th, td { padding: 1.5rem 3rem; text-align: left; border-bottom: 1px solid #E8E8E8; } th { color: #151515; font-family: "montserrat-bold", sans-serif; } td { line-height: 1.5; } th:first-child, td:first-child { padding-left: 0; } th:last-child, td:last-child { padding-right: 0; } .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ------------------------------------------------------------------- * pace.js styles - minimal - (_document-setup.scss) * ------------------------------------------------------------------- */ .pace { -webkit-pointer-events: none; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .pace-inactive { display: none; } .pace .pace-progress { background: #f9a828; position: fixed; z-index: 900; top: 0; right: 100%; width: 100%; height: 6px; } /* =================================================================== * 04. Preloader * * ------------------------------------------------------------------- */ #preloader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #0F1215; z-index: 800; height: 100%; width: 100%; } .no-js #preloader, .oldie #preloader { display: none; } #loader { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin-left: -30px; margin-top: -30px; padding: 0; background-color: #f9a828; border-radius: 100%; -webkit-animation: sk-scaleout 1.0s infinite ease-in-out; animation: sk-scaleout 1.0s infinite ease-in-out; } @-webkit-keyframes sk-scaleout { 0% { -webkit-transform: scale(0); } 100% { -webkit-transform: scale(1); opacity: 0; } } @keyframes sk-scaleout { 0% { -webkit-transform: scale(0); transform: scale(0); } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; } } /* =================================================================== * 05. forms - (_forms.scss) * * ------------------------------------------------------------------- */ fieldset { border: none; } input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea, select { display: block; height: 6rem; padding: 1.5rem 2rem; border: 0; outline: none; vertical-align: middle; color: #444444; font-family: "montserrat-regular", sans-serif; font-size: 1.4rem; line-height: 3rem; max-width: 100%; background: rgba(0, 0, 0, 0.1); -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .ss-custom-select { position: relative; padding: 0; } .ss-custom-select select { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; text-indent: 0.01px; text-overflow: ''; margin: 0; line-height: 3rem; vertical-align: middle; } .ss-custom-select select option { padding-left: 2rem; padding-right: 2rem; } .ss-custom-select select::-ms-expand { display: none; } .ss-custom-select::after { content: '\f0d7'; font-family: 'FontAwesome'; position: absolute; top: 50%; right: 1.5rem; margin-top: -10px; bottom: auto; width: 20px; height: 20px; line-height: 20px; font-size: 18px; text-align: center; pointer-events: none; color: #252525; } /* IE9 and below */ .oldie .ss-custom-select::after { display: none; } textarea { min-height: 25rem; } input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="text"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, textarea:focus, select:focus { color: #000000; } label, legend { font-family: "montserrat-bold", sans-serif; font-size: 1.4rem; margin-bottom: .6rem; color: #020202; display: block; } input[type="checkbox"], input[type="radio"] { display: inline; } label > .label-text { display: inline-block; margin-left: 1rem; font-family: "montserrat-regular", sans-serif; line-height: inherit; } label > input[type="checkbox"], label > input[type="radio"] { margin: 0; position: relative; top: .15rem; } /* ------------------------------------------------------------------- * Style Placeholder Text - (_forms.scss) * ------------------------------------------------------------------- */ ::-webkit-input-placeholder { color: #8e8e8e; } :-moz-placeholder { color: #8e8e8e; /* Firefox 18- */ } ::-moz-placeholder { color: #8e8e8e; /* Firefox 19+ */ } :-ms-input-placeholder { color: #8e8e8e; } .placeholder { color: #8e8e8e !important; } /* ------------------------------------------------------------------- * Change Autocomplete styles in Chrome - (_forms.scss) * ------------------------------------------------------------------- */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus input:-webkit-autofill, textarea:-webkit-autofill, textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus { border: none; -webkit-text-fill-color: #fabc5a; transition: background-color 5000s ease-in-out 0s; } /* =================================================================== * 06. buttons - (_button-essentials.scss) * * ------------------------------------------------------------------- */ .button, a.button, button, input[type="submit"], input[type="reset"], input[type="button"] { display: inline-block; font-family: "montserrat-bold", sans-serif; font-size: 1.4rem; text-transform: uppercase; letter-spacing: .3rem; height: 5.4rem; line-height: 5.4rem; padding: 0 3rem; margin: 0 .3rem 1.2rem 0; background: #A5A5A5; color: #222222; text-decoration: none; cursor: pointer; text-align: center; white-space: nowrap; border: none; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .button:hover, a.button:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, .button:focus, button:focus, input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus { background: #989898; color: #000000; outline: 0; } .button.button-primary, a.button.button-primary, button.button-primary, input[type="submit"].button-primary, input[type="reset"].button-primary, input[type="button"].button-primary { background: #151515; color: #FFFFFF; } .button.button-primary:hover, a.button.button-primary:hover, button.button-primary:hover, input[type="submit"].button-primary:hover, input[type="reset"].button-primary:hover, input[type="button"].button-primary:hover, .button.button-primary:focus, button.button-primary:focus, input[type="submit"].button-primary:focus, input[type="reset"].button-primary:focus, input[type="button"].button-primary:focus { background: #030303; } button.full-width, .button.full-width { width: 100%; margin-right: 0; } button.medium, .button.medium { height: 5.7rem !important; line-height: 5.7rem !important; padding: 0 1.8rem !important; } button.large, .button.large { height: 6rem !important; line-height: 6rem !important; padding: 0rem 3rem !important; } button.stroke, .button.stroke { background: transparent !important; border: 3px solid #313131; line-height: 4.8rem; } button.stroke.medium, .button.stroke.medium { line-height: 5.1rem !important; } button.stroke.large, .button.stroke.large { line-height: 5.4rem !important; } button.stroke:hover, .button.stroke:hover { border: 3px solid #f9a828; color: #f9a828; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /* =================================================================== * 07. other components - (_others.scss) * * ------------------------------------------------------------------- */ /** * alert box - (_alert-box.scss) * ------------------------------------------------------------------- */ .alert-box { padding: 2.1rem 4rem 2.1rem 3rem; position: relative; margin-bottom: 3rem; border-radius: 3px; font-family: "montserrat-regular", sans-serif; font-size: 1.5rem; } .alert-box .close { position: absolute; right: 1.8rem; top: 1.8rem; cursor: pointer; } .ss-error { background-color: #ffd1d2; color: #e65153; } .ss-success { background-color: #c8e675; color: #758c36; } .ss-info { background-color: #d7ecfb; color: #4a95cc; } .ss-notice { background-color: #fff099; color: #bba31b; } /* ------------------------------------------------------------------- * additional typo styles - (_additional-typo.scss) * ------------------------------------------------------------------- */ /* drop cap * ----------------------------------------------- */ .drop-cap:first-letter { float: left; margin: 0; padding: 1.5rem .6rem 0 0; font-size: 8.4rem; font-family: "montserrat-bold", sans-serif; line-height: 6rem; text-indent: 0; background: transparent; color: #151515; } /* line definition style * ----------------------------------------------- */ .lining dt, .lining dd { display: inline; margin: 0; } .lining dt + dt:before, .lining dd + dt:before { content: "\A"; white-space: pre; } .lining dd + dd:before { content: ", "; } .lining dd + dd:before { content: ", "; } .lining dd:before { content: ": "; margin-left: -0.2em; } /* dictionary definition style * ----------------------------------------------- */ .dictionary-style dt { display: inline; counter-reset: definitions; } .dictionary-style dt + dt:before { content: ", "; margin-left: -0.2em; } .dictionary-style dd { display: block; counter-increment: definitions; } .dictionary-style dd:before { content: counter(definitions,decimal) ". "; } /** * Pull Quotes * ----------- * markup: * * * * --------------------------------------------------------------------- */ .pull-quote { position: relative; padding: 2.1rem 3rem 2.1rem 0px; } .pull-quote:before, .pull-quote:after { height: 1em; position: absolute; font-size: 10rem; font-family: Arial, Sans-Serif; color: rgba(0, 0, 0, 0.3); } .pull-quote:before { content: "\201C"; top: 33px; left: 0; } .pull-quote:after { content: '\201D'; bottom: -33px; right: 0; } .pull-quote blockquote { margin: 0; } .pull-quote blockquote:before { content: none; } /** * Stats Tab * --------- * markup: * * * * Extend this object into your markup. * * --------------------------------------------------------------------- */ .stats-tabs { padding: 0; margin: 3rem 0; } .stats-tabs li { display: inline-block; margin: 0 1.5rem 3rem 0; padding: 0 1.5rem 0 0; border-right: 1px solid #ccc; } .stats-tabs li:last-child { margin: 0; padding: 0; border: none; } .stats-tabs li a { display: inline-block; font-size: 2.5rem; font-family: "montserrat-bold", sans-serif; border: none; color: #252525; } .stats-tabs li a:hover { color: #07617d; } .stats-tabs li a em { display: block; margin: .6rem 0 0 0; font-size: 1.4rem; font-family: "montserrat-regular", sans-serif; color: #4f4f4f; } /** * skillbars - (_skillbars.scss) * ------------------------------------------------------------------- */ .skill-bars { list-style: none; margin: 6rem 0 3rem; } .skill-bars li { height: .6rem; background: #a1a1a1; width: 100%; margin-bottom: 6rem; padding: 0; position: relative; } .skill-bars li strong { position: absolute; left: 0; top: -3rem; font-family: "montserrat-bold", sans-serif; color: #313131; text-transform: uppercase; letter-spacing: .2rem; font-size: 1.5rem; line-height: 2.4rem; } .skill-bars li .progress { background: #313131; position: relative; height: 100%; } .skill-bars li .progress span { position: absolute; right: 0; top: -3.6rem; display: block; font-family: "montserrat-regular", sans-serif; color: white; font-size: 1.1rem; line-height: 1; background: #313131; padding: .6rem .6rem; border-radius: 3px; } .skill-bars li .progress span::after { position: absolute; left: 50%; bottom: -5px; margin-left: -5px; border-right: 5px solid transparent; border-left: 5px solid transparent; border-top: 5px solid #313131; content: ""; } .skill-bars li .percent5 { width: 5%; } .skill-bars li .percent10 { width: 10%; } .skill-bars li .percent15 { width: 15%; } .skill-bars li .percent20 { width: 20%; } .skill-bars li .percent25 { width: 25%; } .skill-bars li .percent30 { width: 30%; } .skill-bars li .percent35 { width: 35%; } .skill-bars li .percent40 { width: 40%; } .skill-bars li .percent45 { width: 45%; } .skill-bars li .percent50 { width: 50%; } .skill-bars li .percent55 { width: 55%; } .skill-bars li .percent60 { width: 60%; } .skill-bars li .percent65 { width: 65%; } .skill-bars li .percent70 { width: 70%; } .skill-bars li .percent75 { width: 75%; } .skill-bars li .percent80 { width: 80%; } .skill-bars li .percent85 { width: 85%; } .skill-bars li .percent90 { width: 90%; } .skill-bars li .percent95 { width: 95%; } .skill-bars li .percent100 { width: 100%; } /* =================================================================== * 08. common and reusable styles * * ------------------------------------------------------------------- */ .section-intro { text-align: center; position: relative; margin-bottom: 1.5rem; } .section-intro h1 { font-family: "librebaskerville-bold", serif; font-size: 4.8rem; line-height: 1.375; color: #151515; } .section-intro h3 { font-family: "montserrat-bold", sans-serif; font-size: 1.8 rem; line-height: 1.667; color: rgba(242, 242, 242, 0.5); text-transform: uppercase; letter-spacing: .3rem; margin-bottom: 1.2rem; } .section-intro .lead { font-family: "montserrat-regular", sans-serif; font-size: 1.8; line-height: 1.833; } .section-intro.with-bottom-sep { padding-bottom: 4.2rem; position: relative; } .section-intro.with-bottom-sep::after { display: inline-block; height: 1px; width: 200px; background-color: rgba(242, 242, 242, 0.1); text-align: center; } /* ------------------------------------------------------------------- * responsive: * section-intro * ------------------------------------------------------------------- */ @media only screen and (max-width: 1024px) { .section-intro h1 { font-size: 4.4rem; } .section-intro .lead { font-size: 1.7rem; } } @media only screen and (max-width: 768px) { .section-intro h1 { font-size: 4rem; } .section-intro h3 { font-size: 1.7rem; } } @media only screen and (max-width: 600px) { .section-intro h1 { font-size: 3.4rem; } .section-intro h3 { font-size: 1.7rem; } } @media only screen and (max-width: 500px) { .section-intro h3 { font-size: 1.5rem; } } @media only screen and (max-width: 400px) { .section-intro h1 { font-size: 3.1rem; } } .wide { max-width: 1300px; } .narrow { max-width: 800px; } .js .animate-this, .js .animate-intro { opacity: 0; } .oldie .animate-this, .oldie .animate-intro .no-cssanimations .animate-this, .no-cssanimations .animate-intro { opacity: 1; } /* =================================================================== * 09. header styles - (_layout.scss) * * ------------------------------------------------------------------- */ header { width: 100%; height: auto; position: absolute; left: 0; top: 0; z-index: 700; } header .row { height: auto; max-width: 1300px; position: relative; } /* ------------------------------------------------------------------- * header logo - (_layout.css) * ------------------------------------------------------------------- */ header .header-logo { position: absolute; left: 32px; top: 42px; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } header .header-logo a { display: block; margin: 0; padding: 0; outline: 0; border: none; width: 57px; height: 27px; background: url("../images/logo.png") no-repeat center; background-size: 57px 27px; font: 0/0 a; text-shadow: none; color: transparent; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } /* ------------------------------------------------------------------- * menu trigger - (_layout.css) * ------------------------------------------------------------------- */ #header-menu-trigger { display: block; position: fixed; right: 32px; top: 30px; height: 42px; width: 42px; line-height: 42px; font-family: "montserrat-regular", sans-serif; font-size: 1.4rem; text-transform: uppercase; letter-spacing: .2rem; color: rgba(255, 255, 255, 0.5); -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #header-menu-trigger.opaque { background-color: #000000; } #header-menu-trigger.opaque .header-menu-text { background-color: #000000; } #header-menu-trigger:hover, #header-menu-trigger:focus { color: #FFFFFF; } #header-menu-trigger .header-menu-text { display: block; position: absolute; top: 0; left: -75px; width: 75px; text-align: center; background-color: transparent; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #header-menu-trigger .header-menu-icon { display: block; height: 3px; width: 24px; background-color: #FFFFFF; position: absolute; top: 50%; right: 9px; margin-top: -1.5px; } #header-menu-trigger .header-menu-icon::before, #header-menu-trigger .header-menu-icon::after { content: ''; width: 100%; height: 100%; background-color: inherit; position: absolute; left: 0; } #header-menu-trigger .header-menu-icon::before { top: -9px; } #header-menu-trigger .header-menu-icon::after { bottom: -9px; } /* ------------------------------------------------------------------- * off-canvas menu - (_layout.scss) * ------------------------------------------------------------------- */ #menu-nav-wrap { background: #0C0C0C; color: rgba(255, 255, 255, 0.25); font-size: 1.5rem; line-height: 1.6; padding: 3.6rem 3rem; height: 100%; width: 240px; position: fixed; right: 0; top: 0; visibility: hidden; overflow-y: auto; z-index: 800; -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } #menu-nav-wrap a, #menu-nav-wrap a:visited { color: rgba(255, 255, 255, 0.5); } #menu-nav-wrap a:hover, #menu-nav-wrap a:focus, #menu-nav-wrap a:active { color: white; } #menu-nav-wrap h3 { color: white; font-family: dorsa; font-size: 2rem; line-height: 1.5; margin-bottom: 1.5rem; font-style: normal; font-weight: 400; letter-spacing: 4px; } #menu-nav-wrap .nav-list { font-family: "montserrat-regular", sans-serif; margin: 3.6rem 0 1.5rem 0; padding: 0 0 1.8rem 0; list-style: none; line-height: 3.6rem; } #menu-nav-wrap .nav-list li { padding-left: 0; border-bottom: 1px dotted rgba(255, 255, 255, 0.03); line-height: 4.2rem; } #menu-nav-wrap .nav-list li:first-child { border-top: 1px dotted rgba(255, 255, 255, 0.03); } #menu-nav-wrap .nav-list li a { color: rgba(255, 255, 255, 0.25); display: block; } #menu-nav-wrap .nav-list li a:hover, #menu-nav-wrap .nav-list li a:focus { color: white; } #menu-nav-wrap .header-social-list { list-style: none; display: inline-block; margin: 0; font-size: 2.1rem; } #menu-nav-wrap .header-social-list li { margin-right: 12px; padding-left: 0; display: inline-block; } #menu-nav-wrap .header-social-list li a { color: rgba(255, 255, 255, 0.15); } #menu-nav-wrap .header-social-list li a:hover, #menu-nav-wrap .header-social-list li a:focus { color: white; } #menu-nav-wrap .header-social-list li:last-child { margin: 0; } #menu-nav-wrap .close-button { display: block; height: 30px; width: 30px; border-radius: 3px; background-color: rgba(0, 0, 0, 0.3); position: absolute; top: 36px; right: 30px; font: 0/0 a; text-shadow: none; color: transparent; } #menu-nav-wrap .close-button span::before, #menu-nav-wrap .close-button span::after { content: ""; display: block; height: 2px; width: 12px; background-color: #fff; position: absolute; top: 50%; left: 9px; margin-top: -1px; } #menu-nav-wrap .close-button span::before { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } #menu-nav-wrap .close-button span::after { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } #menu-nav-wrap .sponsor-text { font-family: "librebaskerville-regular", serif; font-size: 1.4rem; line-height: 3rem; } #menu-nav-wrap .sponsor-text span { color: rgba(255, 255, 255, 0.5); } /* menu is open */ .menu-is-open #menu-nav-wrap { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); visibility: visible; -webkit-overflow-scrolling: touch; } /* ------------------------------------------------------------------- * responsive: * header section * ------------------------------------------------------------------- */ @media only screen and (max-width: 768px) { header .header-logo a { width: 51px; height: 24px; background-size: 51px 24px; } } @media only screen and (max-width: 400px) { #header-menu-trigger .header-menu-text { display: none; } } /* =================================================================== * 10. home - (_layout.scss) * * ------------------------------------------------------------------- */ #home { width: 100%; height: 100%; background-color: #151515; background-image: url(../images/hero-bg.webp); background-repeat: no-repeat; background-position: center 30%; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; background-attachment: fixed; min-height: 804px; position: relative; } #home .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: .2; background-color: #19191b; } .home-content-table { width: 100%; height: 100%; display: table; position: relative; text-align: center; } .home-content-tablecell { display: table-cell; vertical-align: middle; z-index: 500; } .home-content-tablecell .row { position: relative; padding-top: 16.2rem; padding-bottom: 15rem; } .home-content-tablecell h3 { font-family: dorsa; font-size: 7.2rem; color: #FFFFFF; letter-spacing: 2.3rem; margin: 0 0 .9rem 0; font-style: normal; font-weight: 400; } .home-content-tablecell h1 { font-family: "montserrat-bold", serif; font-size: 3rem; line-height: 5.133; color: #FFFFFF; } .home-content-tablecell .more { margin: 4.8rem 0 0 0; } .home-content-tablecell .more .button { border-color: #FFFFFF; color: #FFFFFF; } /* home social-list */ .home-social-list { position: absolute; left: 48px; bottom: 54px; margin: 0; padding: 0; list-style: none; font-size: 2.4rem; line-height: 1.75; text-align: center; } .home-social-list::before { display: block; content: ""; width: 2px; height: 42px; background-color: rgba(255, 255, 255, 0.3); margin-left: auto; margin-right: auto; margin-bottom: 12px; } .home-social-list li { padding-left: 0; } .home-social-list li a, .home-social-list li a:visited { color: #FFFFFF; } .home-social-list li a:hover, .home-social-list li a:focus, .home-social-list li a:active { color: #151515; } /* scroll down */ .scrolldown { position: absolute; bottom: 0; right: 0; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: right top 0; -ms-transform-origin: right top 0; transform-origin: right top 0; float: right; } .scrolldown i { padding-left: 9px; } .scrolldown a:hover, .scrolldown a:focus, .scrolldown a:active { color: #151515 !important; } html[data-useragent*='MSIE 10.0'] .scrolldown, .oldie .scrolldown { display: none; } .scroll-icon { display: inline-block; font-family: "montserrat-bold", sans-serif; font-size: 1.4rem; text-transform: uppercase; letter-spacing: .3rem; color: #FFFFFF !important; background: transparent; position: relative; top: 36px; right: 42px; -webkit-animation: animate-it 3s ease infinite; animation: animate-it 3s ease infinite; } /* vertical animation */ @-webkit-keyframes animate-it { 0%, 60%, 80%, 100% { -webkit-transform: translateX(0); } 20% { -webkit-transform: translateX(-5px); } 40% { -webkit-transform: translateX(20px); } } @keyframes animate-it { 0%, 60%, 80%, 100% { -webkit-transform: translateX(0); } 20% { -webkit-transform: translateX(-5px); } 40% { -webkit-transform: translateX(20px); } } /* ------------------------------------------------------------------- * responsive: * home section * ------------------------------------------------------------------- */ @media only screen and (max-width: 1200px) { .home-content-tablecell h3 { font-size: 70.2px; } .home-content-tablecell h1 { font-size: 7rem; } } @media only screen and (max-width: 1024px) { .home-content-tablecell h3 { font-size: 70px; } .home-content-tablecell h1 { font-size: 6rem; } } @media only screen and (max-width: 768px) { .home-content-tablecell .row { max-width: 600px; } .home-content-tablecell h3 { font-size: 70px; } .home-content-tablecell h1 { font-size: 5.2rem; } .home-content-tablecell h1 br { display: none; } .home-social-list { left: 36px; bottom: 30px; font-size: 2.1rem; } .home-social-list::before { height: 30px; } .scrolldown .scroll-icon { font-size: 1.2rem; top: 24px; right: 10px; } } @media only screen and (max-width: 600px) { #home { min-height: 702px; } .home-content-tablecell .row { max-width: 480px; padding-top: 12rem; padding-bottom: 12rem; } .home-content-tablecell h3 { font-size: 5.7rem; } .home-content-tablecell h1 { font-size: 4.8rem; } } @media only screen and (max-width: 500px) { .home-content-tablecell .row { max-width: 420px; } .home-content-tablecell h3 { font-size: 5.5rem; } .home-content-tablecell h1 { font-size: 4.2rem; } .home-social-list { left: 30px; bottom: 30px; font-size: 1.8rem; } .home-social-list::before { height: 24px; } } @media only screen and (max-width: 400px) { #home { min-height: 654px; } .home-content-tablecell .row { padding-top: 4.8rem; padding-bottom: 10.8rem; } .home-content-tablecell h3 { font-size: 4.4rem; } .home-content-tablecell h1 { font-size: 3.6rem; } } /* =================================================================== * 11. about - (_layout.scss) * * ------------------------------------------------------------------- */ #about { position: relative; padding: 4.2rem 0 12rem; background-color: #FFFFFF; min-height: 696px; text-align: center; } #about .about-wrap { max-width: 850px; } #about span { color: #07617d; } #about h3 { font-family: "montserrat-bold", sans-serif; font-size: 1.8rem; line-height: 1.667; color: #07617d; text-transform: uppercase; letter-spacing: .3rem; position: relative; } #about h3::before { display: block; content: ""; width: 3px; height: 9.6rem; background-color: rgba(149, 149, 149, 0.7); margin: 0 auto 2.4rem; } #about .lead { font-family: "librebaskerville-bold", serif; font-size: 4rem; line-height: 1.8; color: #2e383f; margin-top: 6rem; } /* ------------------------------------------------------------------- * responsive: * about * ------------------------------------------------------------------- */ @media only screen and (max-width: 1024px) { #about { min-height: 636px; } #about .about-wrap { max-width: 800px; } #about .lead { font-size: 3.8rem; } } @media only screen and (max-width: 900px) { #about .about-wrap { max-width: 720px; } #about .lead { font-size: 3.6rem; } } @media only screen and (max-width: 768px) { #about h3 { font-size: 1.7rem; } #about .about-wrap { max-width: 600px; } #about .lead { font-size: 3.1rem; } } @media only screen and (max-width: 600px) { #about { min-height: auto; } #about .about-wrap { max-width: 500px; } #about .lead { margin-top: 4.8rem; font-size: 2.8rem; } } @media only screen and (max-width: 500px) { #about h3 { font-size: 1.5rem; } #about .lead { font-size: 2.5rem; } } @media only screen and (max-width: 400px) { #about { padding: 4.2rem 0 9.6rem; } #about .about-wrap { max-width: 380px; } #about .lead { font-size: 2.3rem; } } /* =================================================================== * 12. services - (_layout.scss) * * ------------------------------------------------------------------- */ #services { background-color: #19191b; background-image: url(../images/services-bg.webp); background-repeat: no-repeat; background-position: center; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; min-height: 800px; position: relative; padding: 15rem 0 15rem; color: rgba(255, 255, 255, 0.3); } #services .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(5, 5, 5, 0.7); } #services .gradient-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: .4; background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.85) 0%, transparent 100%); background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.85) 0%, transparent 100%); background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 0%, transparent 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d9000000', endColorstr='#00000000',GradientType=0 ); } #services .section-intro h3 { color: rgba(242, 242, 242, 0.5); } #services .section-intro h1 { color: #FFFFFF; } #services .section-intro .lead { color: rgba(242, 242, 242, 0.4); } #services .services-content { text-align: center; max-width: 1040px; } #services .services-list { margin-top: 1.2rem; text-align: center; } #services .services-list .service-item { margin-bottom: 3rem; padding: 0 50px; } #services .services-list .service-item p { color: rgba(242, 242, 242, 0.5); } #services .services-list .icon { display: inline-block; margin-bottom: 1.5rem; } #services .services-list .icon i { font-size: 5.4rem; color: #f9a828; } #services .services-list .h05 { font-size: 1.7rem; line-height: 1.765; color: #FFFFFF; margin-bottom: 3rem; } /* ------------------------------------------------------------------- * responsive: * services * ------------------------------------------------------------------- */ @media only screen and (max-width: 1024px) { #services .services-list .service-item { padding: 0 40px; } } @media only screen and (max-width: 900px) { #services .services-list .service-item { padding: 0 30px; } } @media only screen and (max-width: 768px) { #services { padding: 12rem 0 12rem; } #services .services-content { max-width: 550px; } #services .services-list .service-item { padding: 0 15px; } #services .services-list .icon i { font-size: 5.1rem; } } @media only screen and (max-width: 600px) { #services .services-list .service-item { padding: 0 10px; } #services .services-list .icon i { font-size: 5rem; } } @media only screen and (max-width: 400px) { #services .services-list .service-item { padding: 0; } } /* =================================================================== * 13. portfolio - (_layout.scss) * * ------------------------------------------------------------------- */ #portfolio { background: #FFFFFF; min-height: 800px; position: relative; padding: 0; } #portfolio .intro-wrap { padding: 15rem 0 21rem; background: #111111; } #portfolio .section-intro h3 { color: rgba(242, 242, 242, 0.5); } #portfolio .section-intro h1 { color: #FFFFFF; } #portfolio .section-intro .lead { color: rgba(242, 242, 242, 0.4); } #portfolio .portfolio-content { margin-top: -22.2rem; } #portfolio .bricks-wrapper:before, #portfolio .bricks-wrapper:after { content: ""; display: table; } #portfolio .bricks-wrapper:after { clear: both; } #portfolio .bricks-wrapper .brick { float: left; width: 50%; padding: 0; margin: 0; } #portfolio .bricks-wrapper .brick:nth-child(2n+1) { clear: both; } /* ------------------------------------------------------------------- * masonry entries - (_layout.css) * ------------------------------------------------------------------- */ .bricks-wrapper .item-wrap { position: relative; overflow: hidden; } .bricks-wrapper .item-wrap .overlay { cursor: zoom-in; } .bricks-wrapper .item-wrap .overlay img { vertical-align: bottom; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .bricks-wrapper .item-wrap .overlay::before { content: ""; display: block; background: rgba(0, 0, 0, 0.8); opacity: 0; visibility: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; z-index: 1; } .bricks-wrapper .item-wrap .overlay::after { content: "..."; font-family: georgia, serif; font-size: 3rem; z-index: 1; display: block; height: 30px; width: 30px; line-height: 30px; margin-left: -15px; margin-top: -15px; position: absolute; left: 50%; top: 50%; text-align: center; color: #FFFFFF; opacity: 0; visibility: hidden; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; -webkit-transform: scale(0.5); -ms-transform: scale(0.5); transform: scale(0.5); } .bricks-wrapper .item-wrap .item-text { position: absolute; top: 0; left: 0; padding: 3.6rem 0 0 3rem; margin-right: 6rem; z-index: 3; } .bricks-wrapper .item-wrap .item-text .folio-title { color: #FFFFFF; font-size: 2.2rem; line-height: 1.364; } .bricks-wrapper .item-wrap .item-text .folio-types { font-family: "montserrat-regular", sans-serif; font-size: 1.1rem; line-height: 1.5rem; text-transform: uppercase; letter-spacing: .1rem; color: rgba(255, 255, 255, 0.7); display: block; } .bricks-wrapper .item-wrap .details-link { display: block; background-color: transparent; border: 1px solid rgba(255, 255, 255, 0.3); height: 4.6rem; width: 4.6rem; line-height: 4.6rem; color: white; text-align: center; z-index: 2; border-radius: 3px; position: absolute; top: 3.6rem; right: 3rem; } .bricks-wrapper .item-wrap .details-link i { font-size: 2rem; line-height: 4.2rem; } .bricks-wrapper .item-wrap .details-link:hover, .bricks-wrapper .item-wrap .details-link:focus { background-color: #FFFFFF; color: #000000; } .bricks-wrapper .item-wrap .item-text, .bricks-wrapper .item-wrap .details-link { opacity: 0; visibility: hidden; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .bricks-wrapper .item-wrap:hover .overlay::before { opacity: 1; visibility: visible; } .bricks-wrapper .item-wrap:hover .overlay::after { opacity: 1; visibility: visible; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .bricks-wrapper .item-wrap:hover .overlay img { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .bricks-wrapper .item-wrap:hover .item-text, .bricks-wrapper .item-wrap:hover .details-link { opacity: 1; visibility: visible; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } /* ------------------------------------------------------------------- * Light Gallery Overrides - (_layout.css) * ------------------------------------------------------------------- */ .lg-sub-html { padding: 12px 20% 15px; } .lg-sub-html a, .lg-sub-html a:visited { color: #f9a828; } .lg-sub-html a:hover, .lg-sub-html a:focus { color: #FFFFFF; } @media only screen and (max-width: 1024px) { .lg-sub-html { padding: 12px 15% 15px; } } @media only screen and (max-width: 768px) { .lg-sub-html { padding: 12px 40px 15px; } } .lg-sub-html h4 { color: #FFFFFF; font-family: "montserrat-regular", sans-serif; font-size: 1.8rem; line-height: 1.333; } .lg-sub-html p { font-family: "montserrat-regular", sans-serif; font-size: 1.3rem; line-height: 2.4rem; margin: .6rem 0 0; color: rgba(255, 255, 255, 0.6); } .lg-outer .lg-thumb-item.active, .lg-outer .lg-thumb-item:hover { border-color: #f9a828; } .lg-progress-bar .lg-progress { background-color: #FFFFFF; } #lg-counter { font-family: "montserrat-regular", sans-serif; } /* ------------------------------------------------------------------- * responsive: * portfolio * ------------------------------------------------------------------- */ @media only screen and (max-width: 768px) { #portfolio .intro-wrap { padding: 12rem 0 21rem; } } @media only screen and (max-width: 600px) { #portfolio .bricks-wrapper .brick { float: none; width: 100%; } .bricks-wrapper .item-wrap .item-text .folio-title { font-size: 2rem; line-height: 1.5; } } /* =================================================================== * 14. testimonials - (_layout.scss) * * ------------------------------------------------------------------- */ #testimonials { background: #FFFFFF; padding: 12rem 0 7.8rem; text-align: center; } #testimonials h2 { font-family: "montserrat-bold", sans-serif; font-size: 1.8rem; line-height: 1.667; color: #07617d; text-transform: uppercase; letter-spacing: .3rem; position: relative; margin-bottom: 4.2rem; } #testimonials .flex-container { width: 80%; max-width: 900px; margin: 0 auto; } #testimonial-slider { margin: 0 0 3rem 0; position: relative; } #testimonial-slider .slides { padding-bottom: 3rem; } #testimonial-slider p { font-family: "librebaskerville-bold", serif; font-size: 3rem; line-height: 1.8; color: #151515; } #testimonial-slider p::before, #testimonial-slider p::after { display: inline-block; font-family: "librebaskerville-bold", serif; font-size: 3.6rem; line-height: 1; } #testimonial-slider p::before { content: '\201C'; } #testimonial-slider p::after { content: '\201D'; } #testimonial-slider .testimonial-author { margin-top: 4.2rem; } #testimonial-slider .testimonial-author img { width: 7.4rem; height: 7.4rem; margin: 0 auto 1.2rem auto; display: block; border-radius: 50%; vertical-align: middle; } #testimonial-slider .testimonial-author .author-info { display: inline-block; vertical-align: middle; text-align: center; font-family: "librebaskerville-bold", sans-serif; font-size: 2rem; margin-top: .9rem; margin-bottom: 3rem; color: #151515; } #testimonial-slider .testimonial-author .author-info span { display: block; font-family: "montserrat-bold", sans-serif; font-size: 1.6rem; line-height: 1.313; letter-spacing: 0; text-transform: none; color: rgba(0, 0, 0, 0.5); margin-top: .3rem; } /* control nav */ #testimonials .flex-control-nav { width: 100%; text-align: center; display: block; position: absolute; bottom: -1.5rem; } #testimonials .flex-control-nav li { margin: 0 6px; display: inline-block; zoom: 1; } #testimonials .flex-control-paging li a { width: 9px; height: 9px; background-color: #959595; display: block; cursor: pointer; border-radius: 50%; font: 0/0 a; text-shadow: none; color: transparent; } #testimonials .flex-control-paging li a:hover { background-color: #555555; } #testimonials .flex-control-paging li a.flex-active { background-color: #000000; } /* ------------------------------------------------------------------- * responsive: * testimonials * ------------------------------------------------------------------- */ @media only screen and (max-width: 1024px) { #testimonial-slider p { font-size: 2.8rem; } } @media only screen and (max-width: 768px) { #testimonials h2 { font-size: 1.7rem; } #testimonial-slider p { font-size: 2.5rem; } #testimonial-slider .testimonial-author img { width: 6.6rem; height: 6.6rem; } #testimonial-slider .testimonial-author .author-info { font-size: 1.8rem; } #testimonial-slider .testimonial-author .author-info span { font-size: 1.5rem; } } @media only screen and (max-width: 600px) { #testimonials .flex-container { width: 90%; } #testimonial-slider p { font-size: 2.2rem; } } @media only screen and (max-width: 500px) { #testimonials h2 { font-size: 1.5rem; } } @media only screen and (max-width: 400px) { #testimonials .flex-container { width: 100%; } #testimonial-slider p { font-size: 2rem; } } /* =================================================================== * 15. clients - (_layout.scss) * * ------------------------------------------------------------------- */ #clients { background-color: #e9eaea; padding: 4.8rem 0 4.8rem; } #clients .client-lists .owl-item { opacity: .6; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -webkit-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } #clients .client-lists .owl-item:hover { opacity: 1; } #clients .owl-carousel .owl-nav { margin-top: 1.8rem; margin-bottom: 1.5rem; text-align: center; -webkit-tap-highlight-color: transparent; } #clients .owl-carousel .owl-nav [class*='owl-'] { color: #FFFFFF; font-family: "montserrat-regular", sans-serif; font-size: 1.4rem; height: 3rem; line-height: 3rem; margin: .6rem; padding: 0 10px; background: rgba(0, 0, 0, 0.5); display: inline-block; cursor: pointer; border-radius: 3px; } #clients .owl-carousel .owl-nav [class*='owl-']:hover { background: rgba(0, 0, 0, 0.7); color: #FFFFFF; text-decoration: none; } #clients .owl-carousel .owl-nav .disabled { background: rgba(0, 0, 0, 0.2); cursor: default; } #clients .owl-carousel .owl-nav.disabled + .owl-dots { margin-top: 1.8rem; } #clients .owl-carousel .owl-dots { text-align: center; -webkit-tap-highlight-color: transparent; } #clients .owl-carousel .owl-dots .owl-dot { display: inline-block; zoom: 1; *display: inline; } #clients .owl-carousel .owl-dots .owl-dot span { width: 9px; height: 9px; background-color: #959595; margin: 6px 6px; display: block; -webkit-backface-visibility: visible; transition: opacity 200ms ease; border-radius: 50%; } #clients .owl-carousel .owl-dots .owl-dot.active span, #clients .owl-carousel .owl-dots .owl-dot:hover span { background-color: #000000; } /* =================================================================== * 16. contact - (_layout.scss) * * ------------------------------------------------------------------- */ #contact { background-color: #111111; background-image: url(../images/contact-bg.webp); background-repeat: no-repeat; background-position: center; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; padding: 12rem 0 12rem; position: relative; } #contact .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: .75; background-color: #000000; } #contact .section-intro h1 { color: white; } #contact .section-intro h3 { color: rgba(242, 242, 242, 0.5); } #contact .section-intro p.lead { color: rgba(242, 242, 242, 0.4); } .contact-content { max-width: 1024px; margin-top: 3rem; color: #FFFFFF; z-index: 600; position: relative; } .contact-content h5 { color: #FFFFFF; margin-bottom: 5.4rem; } .contact-content h6 { color: #555555; font-size: 1.4rem; } /* contact info */ .contact-info .cinfo { margin-bottom: 4.2rem; } /* contact form */ #contact form { margin-top: 0; margin-bottom: 3rem; } #contact form .form-field { position: relative; } #contact form .form-field:before, #contact form .form-field:after { content: ""; display: table; } #contact form .form-field:after { clear: both; } #contact form .form-field label { font-family: "montserrat-bold", sans-serif; font-size: 1rem; line-height: 1.4; position: absolute; bottom: 1.5rem; right: 0; text-transform: uppercase; letter-spacing: .05rem; padding: .6rem 2rem .6rem 2rem; margin: 0; color: #000000; background: #f9a828; border-radius: 3px; } #contact form .form-field label::after { position: absolute; right: 15px; top: 1px; margin-top: -6px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #f9a828; content: ""; } #contact form ::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.3); } #contact form :-moz-placeholder { color: rgba(255, 255, 255, 0.3); /* Firefox 18- */ } #contact form ::-moz-placeholder { color: rgba(255, 255, 255, 0.3); /* Firefox 19+ */ } #contact form :-ms-input-placeholder { color: rgba(255, 255, 255, 0.3); } #contact form .placeholder { color: rgba(255, 255, 255, 0.3) !important; } #contact input[type="text"], #contact input[type="password"], #contact input[type="email"], #contact textarea { width: 100%; color: rgba(255, 255, 255, 0.6); margin-bottom: 3.6rem; background: rgba(255, 255, 255, 0.1); } #contact input[type="text"]:focus, #contact input[type="password"]:focus, #contact input[type="email"]:focus { color: #FFFFFF; } #contact textarea { min-height: 21rem; padding: 1.8rem 2rem; } #contact textarea:focus { color: #FFFFFF; } #contact button.submitform { font-size: 1.5rem; display: block; letter-spacing: .2rem; height: 6rem; line-height: 6rem; padding: 0 3rem; width: 100%; background: #f9a828; color: #000000; margin-top: .6rem; } #contact button.submitform:hover, #contact button.submitform:focus { background: #f89e0f; } #message-warning, #message-success { display: none; background: #000000; padding: 3rem; margin-bottom: 3.6rem; width: 100%; } #message-warning { color: #D32B2E; } #message-success { color: #f9a828; } #message-warning i, #message-success i { margin-right: 10px; } /* form loader */ #submit-loader { display: none; position: relative; left: 0; top: 1.8rem; width: 100%; text-align: center; margin-bottom: 4.2rem; } #submit-loader .text-loader { display: none; font-family: "montserrat-bold", sans-serif; font-size: 1.4rem; color: #FFFFFF; letter-spacing: .2rem; text-transform: uppercase; } .oldie #submit-loader .s-loader { display: none; } .oldie #submit-loader .text-loader { display: block; } /* --------------------------------------------------------------- * loader animation - (_layout.scss) * --------------------------------------------------------------- */ .s-loader { margin: 1.2rem auto 3rem; width: 70px; text-align: center; -webkit-transform: translateX(0.45rem); -ms-transform: translateX(0.45rem); transform: translateX(0.45rem); } .s-loader > div { width: 9px; height: 9px; background-color: #FFFFFF; border-radius: 100%; display: inline-block; margin-right: .9rem; -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; animation: sk-bouncedelay 1.4s infinite ease-in-out both; } .s-loader .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .s-loader .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } @-webkit-keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } @keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } /* ------------------------------------------------------------------- * responsive: * contact * ------------------------------------------------------------------- */ @media only screen and (max-width: 900px) { .contact-info { width: 38%; } } @media only screen and (max-width: 768px) { .contact-content { max-width: 600px; text-align: center; } .contact-info { width: 100%; margin-top: 3.6rem; } } @media only screen and (max-width: 600px) { .contact-content { max-width: 480px; } } @media only screen and (max-width: 400px) { .contact-info { width: 100% !important; float: none !important; clear: both !important; margin-left: 0; margin-right: 0; padding: 0; } } /* =================================================================== * 17. footer - (_layout.scss) * * ------------------------------------------------------------------- */ footer { margin: 0 0 5.4rem 0; padding: 0; font-size: 1.5rem; color: rgba(255, 255, 255, 0.4); } footer a, footer a:visited { color: #FFFFFF; } footer a:hover, footer a:focus { color: #f9a828; } footer .row { max-width: 1024px; } footer h4.h05 { color: #FFFFFF; position: relative; padding-bottom: 4.2rem; margin-bottom: 3.6rem; } footer h4.h05::after { display: block; content: ""; width: 100px; height: 1px; background-color: rgba(255, 255, 255, 0.1); position: absolute; bottom: 0; left: 0; } /* footer main * --------------------------------- */ .footer-main { padding-top: 9.6rem; padding-bottom: 3rem; } .footer-main ul { font-size: 1.5rem; margin-left: 0; } .footer-main ul li { list-style: none; padding-left: 0; } .footer-main ul a, .footer-main ul a:visited { color: rgba(255, 255, 255, 0.4); } .footer-main ul a:hover, .footer-main ul a:focus { color: #FFFFFF; } .footer-main .subscribe-form { position: relative; } .footer-main #mc-form { margin: 0; padding: 0; } .footer-main #mc-form input[type="email"] { height: 6rem; padding: 1.5rem 8rem 1.5rem 2rem; margin-bottom: 1.5rem; width: 100%; background-color: rgba(0, 0, 0, 0.9); } .footer-main #mc-form button { background-color: #f9a828; color: #000000; width: 6rem; height: 6rem; line-height: 6rem; margin: 0; padding: 0; position: absolute; right: 0; top: 0; } .footer-main #mc-form button:hover { background-color: #f89e0f; } .footer-main #mc-form button i { font-size: 2.6rem; line-height: 6rem; margin: 0; position: relative; left: .2rem; } .footer-main #mc-form label { color: #f9a828; font-family: "montserrat-regular", sans-serif; } /* footer bottom * --------------------------------- */ .footer-bottom { margin-top: 3rem; text-align: center; font-family: "montserrat-regular", sans-serif; font-size: 1.4rem; } .footer-bottom .copyright span { display: inline-block; } .footer-bottom .copyright span::after { content: "|"; display: inline-block; padding: 0 1rem 0 1.2rem; color: rgba(255, 255, 255, 0.1); } .footer-bottom .copyright span:last-child::after { display: none; } #go-top { position: fixed; bottom: 42px; right: 30px; z-index: 700; display: none; } #go-top a { text-decoration: none; border: 0 none; display: block; height: 63px; width: 60px; line-height: 63px; text-align: center; background-color: #000000; color: #888; text-align: center; text-transform: uppercase; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #go-top a i { font-size: 1.7rem; line-height: inherit; } #go-top a:visited { background: #000000; color: #888; } #go-top a:hover, #go-top a:focus { background: #000000; color: #FFFFFF; } /* ------------------------------------------------------------------- * responsive: * footer * ------------------------------------------------------------------- */ @media only screen and (max-width: 768px) { #go-top { bottom: 0; right: 0; } .footer-main { text-align: center; } .footer-main .row { max-width: 480px; } .footer-main [class*="col-"] { margin-bottom: 3.6rem; } footer h4.h05 { padding-bottom: 3rem; margin-bottom: 3rem; } footer h4.h05::after { left: 50%; margin-left: -50px; } } @media only screen and (max-width: 600px) { .footer-bottom { padding-bottom: .6rem; } .footer-bottom .copyright span { display: block; } .footer-bottom .copyright span::after { display: none; } }