@charset "UTF-8"; /*! * animate.css -https://daneden.github.io/animate.css/ * Version - 3.7.2 * Licensed under the MIT license - http://opensource.org/licenses/MIT * * Copyright (c) 2019 Daniel Eden */ @-webkit-keyframes bounce { from, 20%, 53%, 80%, 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 { from, 20%, 53%, 80%, 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 { from, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { from, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } .flash { -webkit-animation-name: flash; animation-name: flash; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes pulse { 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 headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg); } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg); } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg); } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg); } 50% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg); } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg); } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg); } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg); } 50% { -webkit-transform: translateX(0); transform: translateX(0); } } .headShake { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-name: headShake; animation-name: headShake; } @-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; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes wobble { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes wobble { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes jello { from, 11.1%, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 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.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } } @keyframes jello { from, 11.1%, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 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.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } } .jello { -webkit-animation-name: jello; animation-name: jello; -webkit-transform-origin: center; transform-origin: center; } @-webkit-keyframes heartBeat { 0% { -webkit-transform: scale(1); transform: scale(1); } 14% { -webkit-transform: scale(1.3); transform: scale(1.3); } 28% { -webkit-transform: scale(1); transform: scale(1); } 42% { -webkit-transform: scale(1.3); transform: scale(1.3); } 70% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes heartBeat { 0% { -webkit-transform: scale(1); transform: scale(1); } 14% { -webkit-transform: scale(1.3); transform: scale(1.3); } 28% { -webkit-transform: scale(1); transform: scale(1); } 42% { -webkit-transform: scale(1.3); transform: scale(1.3); } 70% { -webkit-transform: scale(1); transform: scale(1); } } .heartBeat { -webkit-animation-name: heartBeat; animation-name: heartBeat; -webkit-animation-duration: 1.3s; animation-duration: 1.3s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } @-webkit-keyframes bounceIn { from, 20%, 40%, 60%, 80%, 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 { from, 20%, 40%, 60%, 80%, 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-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInDown { from, 60%, 75%, 90%, 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInDown { from, 60%, 75%, 90%, 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { from, 60%, 75%, 90%, 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInLeft { from, 60%, 75%, 90%, 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { from, 60%, 75%, 90%, 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInRight { from, 60%, 75%, 90%, 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { from, 60%, 75%, 90%, 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 { from, 60%, 75%, 90%, 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-duration: 0.75s; animation-duration: 0.75s; -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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInDownBig { from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInLeftBig { from { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInRightBig { from { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInUpBig { from { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .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) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) scale3d(1, 1, 1) 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) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) scale3d(1, 1, 1) 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) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { from { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) scale3d(1, 1, 1) 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) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) scale3d(1, 1, 1) 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) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); -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-duration: 0.75s; animation-duration: 0.75s; -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-animation-duration: 0.75s; animation-duration: 0.75s; -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); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @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); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); 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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); 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-duration: 2s; animation-duration: 2s; -webkit-animation-name: hinge; animation-name: hinge; } @-webkit-keyframes jackInTheBox { from { opacity: 0; -webkit-transform: scale(0.1) rotate(30deg); transform: scale(0.1) rotate(30deg); -webkit-transform-origin: center bottom; transform-origin: center bottom; } 50% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 70% { -webkit-transform: rotate(3deg); transform: rotate(3deg); } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes jackInTheBox { from { opacity: 0; -webkit-transform: scale(0.1) rotate(30deg); transform: scale(0.1) rotate(30deg); -webkit-transform-origin: center bottom; transform-origin: center bottom; } 50% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 70% { -webkit-transform: rotate(3deg); transform: rotate(3deg); } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } .jackInTheBox { -webkit-animation-name: jackInTheBox; animation-name: jackInTheBox; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @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: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-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; } .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.delay-1s { -webkit-animation-delay: 1s; animation-delay: 1s; } .animated.delay-2s { -webkit-animation-delay: 2s; animation-delay: 2s; } .animated.delay-3s { -webkit-animation-delay: 3s; animation-delay: 3s; } .animated.delay-4s { -webkit-animation-delay: 4s; animation-delay: 4s; } .animated.delay-5s { -webkit-animation-delay: 5s; animation-delay: 5s; } .animated.fast { -webkit-animation-duration: 800ms; animation-duration: 800ms; } .animated.faster { -webkit-animation-duration: 500ms; animation-duration: 500ms; } .animated.slow { -webkit-animation-duration: 2s; animation-duration: 2s; } .animated.slower { -webkit-animation-duration: 3s; animation-duration: 3s; } @media (print), (prefers-reduced-motion: reduce) { .animated { -webkit-animation-duration: 1ms !important; animation-duration: 1ms !important; -webkit-transition-duration: 1ms !important; transition-duration: 1ms !important; -webkit-animation-iteration-count: 1 !important; animation-iteration-count: 1 !important; } } /** * * Theme: VRV * Folha de Estilos Personalizados * * Author: Infinito AG - Sites, Web & Design * Author URI:https://www.infinitoag.com * **/ /******************************************************* * FONTES *******************************************************/ /******************************************************* * CORPO, ELEMENTOS HTML E TIPOGRAFIA *******************************************************/ body { color: #404040; font-size: 16px; line-height: 30px; font-weight: normal; background: #FFF; font-family: 'Montserrat', sans-serif; } img { max-width: 100%; height: auto; } h1{ font-size: 32px; } h2::after { content: ''; background: #F7BE4D; width: 55px; height: 4px; position: absolute; left: 0; bottom: -30px; } h2 { font-size: 42px; line-height: 23px; margin-bottom: 70px; font-weight: normal; position: relative; } h3{ font-size: 23px; } h4 { font-size: 20px; } a, a:hover { transition: 0.3s; cursor: pointer; text-decoration: none; } button:focus, a:focus{ outline: 0; } /******************************************************* * FORMULÁRIOS E BOTÕES *******************************************************/ .btn { line-height: 29px; display: inline-block; border-radius: 0; padding: 9px 40px; font-size: 17px; font-weight: 600; } .btn img { width: auto !important; display: inline-block !important; margin-left: 10px !important; } .btn-default{ background: #F7BE4D; border: 2px solid #F7BE4D; color: #312E39; transition: 0.3s all; } .btn-default:hover{ border: 2px solid #F7BE4D !important; background: transparent; transition: 0.3s all; } .imagem img{ transition: 0.3s all; } .imagem img:hover{ transition: 0.3s all; transform: scale(1.02); } /******************************************************* * CLASSES E ELEMENTOS PRINCIPAIS *******************************************************/ .flexslider{ border: 0; background: transparent; } .flexslider .slides img { width: auto; height: 430px; object-fit: cover; display: block; transition: 0.3s all; } .flexslider .slides img:hover{ transition: 0.3s all; transform: scale(1.02); } .container-fluid { width: 100%; padding-right: 0; padding-left: 0; margin-right: 0; margin-left: 0; } main#main { overflow: hidden; } /******************************************************* * CABECALHO *******************************************************/ #header { transition: .4s ease; top: 0; left: 0; width: 100%; z-index: 99; position: absolute; padding: 20px 0; } #header .toggle { display: none; } .header-logo img{ transition: 0.3s all; width: 90%; } .header-logo img:hover{ transition: 0.3s all; transform: scale(1.02); } #header #main-menu { } #header #main-menu ul { padding: 40px 0 0 0; float: right; } #header #main-menu ul li { display: inline-block; margin: 0 30px; } #header #main-menu ul li a { color: #C1BFC4; font-size: 16px; font-weight: 500; border-bottom: 2px solid transparent; padding-bottom: 8px; } #header #main-menu ul li a:hover, #header #main-menu ul li.current-menu-item a { color: white; border-bottom: 2px solid #F7BE4D; } body.post-template-default.single.single-post .header-logo, body.blog .header-logo { width: 200px; } body.post-template-default.single.single-post .header-logo, body.page-template-modelo-sobre .header-logo { width: 200px; } body.post-template-default.single.single-post .header-logo, body.page-template-modelo-ambientes .header-logo { width: 200px; } body.post-template-default.single.single-post .header-logo, body.page-template-modelo-projetos .header-logo { width: 200px; } body.post-template-default.single.single-post .header-logo, body.page-template-modelo-contato .header-logo { width: 200px; } body.post-template-default.single.single-post .header-logo, body.single-projeto .header-logo { width: 200px; } /******************************************************* * RODAPE *******************************************************/ #footer { background-color: #312E39; padding: 200px 0 0 0; color: #FFFFFF; font-size: 16px; line-height: 38px; margin-top: -200px; } #footer a{ color: #FFFFFF; transition: 0.3s all; } #footer a:hover{ color: #DAD9DC; transition: 0.3s all; } #footer .coluna1 .logo-footer { display: inline-block; float: left; } #footer .coluna1 .contatos { display: inline-block; margin-left: 30px; } #footer .coluna1 .contatos ul { padding: 0; } #footer .coluna1 .contatos ul li { list-style: none; } #footer .coluna1 .contatos ul li img{ margin-right: 8px; } #footer .coluna1 .contatos ul li strong{ font-size: 21px; font-weight: bold; } #footer .menu-footer ul { padding: 0; } #footer .menu-footer ul li { list-style: none; position: relative; padding-left: 20px; } #footer .menu-footer ul li::before{ content: ''; background-image: url(//vkrmoveis.com.br/wp-content/themes/cms/img/li-footer.png); background-repeat: no-repeat; background-position: center; width: 8px; height: 14px; position: absolute; left: 0; top: 11px; } #footer .copyright { color: white; font-size: 14px; margin-top: 90px; } #footer .copyright img { float: inherit; margin-left: 10px; } #footer .copyright i { color: red; margin: 0 10px; } /******************************************************* * PÁGINAS *******************************************************/ #newsletter { padding: 100px 0; } #newsletter .bg-newsletter { background-color: #FBFBFB; background-image: url(//vkrmoveis.com.br/wp-content/themes/cms/img/bg-newsletter.png); background-repeat: no-repeat; background-position: center; background-size: cover; color: #404040; padding: 40px 50px; margin-bottom: 0; z-index: 10; position: relative; width: 100%; font-size: 16px; line-height: 29px; } #newsletter .bg-newsletter p{ margin-bottom: 0; } #newsletter h3 { font-size: 20px; line-height: 23px; font-weight: 400 !important; } #newsletter .form input[type=submit] { width: 50px; background-image: url(//vkrmoveis.com.br/wp-content/themes/cms/img/send.png); background-repeat: no-repeat; background-position: center; border: 0; position: absolute; right: 10px; top: 0; } #newsletter .form input { width: 100%; background: transparent; border-bottom: 2px solid #F7BE4D; border-left: 0; border-right: 0; border-top: 0; font-size: 14px; font-weight: normal; padding: 15px 5px; } #newsletter .form span { width: 100%; font-size: 14px; } #sonho { padding: 100px 0; } #sonho .bg-sonho { background-color: #F7BE4D; background-image: url(//vkrmoveis.com.br/wp-content/themes/cms/img/bg-sonho.png); background-repeat: no-repeat; background-position: center; background-size: cover; color: #404040; padding: 50px 50px; margin-bottom: 0; z-index: 10; position: relative; width: 100%; font-size: 16px; line-height: 29px; } #sonho h3 { font-size: 32; line-height: 23px; font-weight: bold; margin-bottom: 15px; } #sonho .botao button { background: #404040; color: white; transition: 0.3s all; } #sonho .botao button:hover{ transition: 0.3s all; transform: scale(1.02); } #sonho .botao { text-align: center; padding-top: 15px; } #slider-home { margin-top: -2px; } #slider-home .slide { height: 1003px; background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; display: flex; justify-content: center; align-items: center; } #slider-home .slide .conteudo { color: white; font-size: 18px; line-height: 23px; /*margin-top: 350px;*/ text-align: center; } #slider-home .slide .conteudo h2 { font-size: 56px; line-height: 66px; margin-bottom: 50px; } #slider-home .slide .conteudo h2::after{ display: none; } #slider-home .slide .conteudo .botao { margin-top: 60px; } #slider-home .slide .conteudo p{ font-size: 16px; } .custom-controls-container-home { position: absolute; width: 100%; margin-top: -100px; } .custom-controls-container-home li a { border-radius: 0; width: 12px; height: 12px; background-color: white; opacity: 0.21; } .custom-controls-container-home li a.flex-active { background-color: white; opacity: 1; } .custom-navigation-home { position: absolute; width: 100%; top: 460px; } .custom-navigation-home .flex-prev { float: left; margin-left: 100px; } .custom-navigation-home .flex-next { float: right; margin-right: 100px; } #home1 ul.social { position: absolute; right: 150px; margin-top: -100px; } #home1 ul.social li { list-style: none; display: inline-block; margin: 0 5px; } #home1 ul.social li a { background-color: #312E39; color: white; width: 51px; height: 51px; display: block; text-align: center; line-height: 50px; font-size: 20px; } #home1 ul.social li a:hover{ background-color: #F7BE4D; color: #312E39; } #home2 { padding: 120px 0; } #home2 .botao { margin-top: 60px; } #home3 { background-repeat: no-repeat; background-position: left; padding: 120px 0; position: relative; } #slider-projetos { margin-top: 60px; background: transparent; } #slider-projetos .slide { width: 100%; text-align: center; padding-bottom: 30px; } #slider-projetos .slide span { text-align: center; width: 100%; color: #312E39; font-size: 20px; font-weight: bold; position: relative; margin-top: 20px; display: block; } #slider-projetos .slide span::after { content: ''; background: #F7BE4D; width: 160px; height: 4px; position: absolute; left: 50%; transform: translateX(-50%); bottom: -15px; display: none; } #slider-projetos .slide:hover span::after{ display: block; } .custom-navigation-projetos { width: 100%; position: absolute; top: 248px; } .custom-navigation-projetos .flex-prev { float: left; margin-left: -70px; } .custom-navigation-projetos .flex-next { float: right; margin-right: 100px; } .custom-controls-container-projetos { /*display: none;*/ } #home4 { background-repeat: no-repeat; background-position: center; background-size: cover; color: white; padding: 80px 0; } #home4 .conteudo { position: absolute; top: 50%; transform: translateY(-50%); } #home4 .conteudo p{ text-align: justify; } .card-produto { color: white; font-weight: bold; font-size: 18px; background: rgba(49, 46, 57, 0.8); text-align: center; padding: 40px 20px; margin: 10px 0; transition: 0.3s all; } .card-produto:hover{ transition: 0.3s all; transform: scale(1.02); } .card-produto span { margin-top: 20px; display: block; } .card-produto span p { margin: 0; } #home5 { padding: 120px 0 20px 0; } #home5 .conteudo { margin-bottom: 100px; display: block; } .post-item { margin-bottom: 30px; } .post-item:hover .post-thumb{ transition: 0.3s all; transform: scale(1.02); } .post-item .post-thumb { width: 100%; height: 350px; background-repeat: no-repeat; background-position: center; background-size: cover; transition: 0.3s all; } .post-item:hover .post-title a, .post-item:hover .post-access a{ color: #F7BE4D; transition: 0.3s all; } .post-item .post-autor-date { margin-top: 20px; color: #707070; font-size: 14px; text-transform: uppercase; } .post-item .post-title { font-size: 26px; font-weight: bold; margin-top: 10px; height: 90px; } .post-item .post-title a { color: #312E39; } .post-item .post-access { font-size: 17px; font-weight: 600; margin-top: 30px; } .post-item .post-access a { color: #312E39; } .post-item .post-excerpt a { color: #F7BE4D; font-weight: bold; } .post-item h2 { font-size: 28px; line-height: 38px; margin-bottom: 20px; font-weight: 600; margin-top: 20px; position: unset; } .post-item h2::after { display: none; } .wp-caption-text { font-size: 12px; } .sub-header { width: 100%; height: 423px; background-repeat: no-repeat; background-position: center; background-size: cover; margin-top: -2px; color: white; text-align: center; display: flex; flex-direction: column; justify-content: center; padding-top: 50px; } .sub-header .conteudo { /*padding-top: 200px;*/ } .sub-header .conteudo h2::after{ display: none; } .sub-header .conteudo h2 { font-size: 42px; font-weight: bold; margin-bottom: 40px; } .sub-header .conteudo .breadcumbs { font-size: 18px; font-weight: normal; line-height: 23px; } .sub-header .conteudo .breadcumbs a { color: white; } .sub-header .conteudo .breadcumbs img { margin: 0 10px; } #sobre2 { padding: 180px 0 120px 0; } #sobre2 h2 { font-size: 31px; line-height: 50px; margin-top: 20px; } #sobre2 h2:after{ bottom: -5px; } #sobre2 .imagem { margin-top: 60px; } #sobre2 .imagem img { width: 100%; height: auto; } .d-lg-block{ padding-left: 60px; } #sobre3 { background-repeat: no-repeat; background-position: center; background-size: cover; margin-top: -400px; padding-top: 450px; padding-bottom: 120px; } #sobre3 h2 { font-size: 28px; } #sobre3 p{ font-size: 14px; padding-right: 40px; } #sobre4 { padding: 100px 0 120px 0; } #sobre4 h2 { font-size: 28px; line-height: 38px; margin-top: 20px; } .card-sobre { margin-top: 50px; text-align: center; color: #404040; padding: 50px 20px; min-height: 420px; } .card-sobre:hover{ background: #312E39; color: white; } .card-sobre p{ font-size: 14px; } .card-sobre h4::after { content: ''; background: #F7BE4D; width: 55px; height: 4px; position: absolute; left: 50%; transform: translateX(-50%); bottom: -20px; } .card-sobre h4 { font-size: 18px; font-weight: bold; margin-top: 20px; position: relative; margin-bottom: 40px; } #sobre5 { padding: 100px 0 120px 0; } #sobre5 .col-lg-6{ display: flex; align-items: center; } #sobre5 h2 { font-size: 28px; line-height: 38px; margin-top: 20px; } #sobre5 .imagem img{ max-width: 500px; } .page-template-modelo-sobre #footer { margin-top: 0; padding: 100px 0 20px 0; } #ambientes2 { padding: 120px 0; } #ambientes h2 { font-size: 32px; line-height: 50px; margin-top: 0px; margin-bottom: 0; } #ambientes p{ margin-bottom: 0; } #ambientes2 .col-lg-6, #ambientes2 .col-lg-5{ display: flex; flex-direction: column; justify-content: center; } #ambientes3 { padding: 120px 0 120px 0; margin-bottom: 80px; } #ambientes3 h2 { font-size: 32px; line-height: 50px; margin-top: 20px; margin-bottom: 20px; } #ambientes3 h2::after{ bottom: -5px; } #ambientes4 { padding: 120px 0 0 0; } #ambientes4 h2 { font-size: 31px; line-height: 50px; margin-top: 20px; } #slider-ambientes .slide .conteudo { position: absolute; top: 50%; transform: translateY(-50%); padding-left: 100px; } .custom-navigation-ambientes { width: 100%; position: absolute; top: 200px; } .custom-navigation-ambientes .flex-prev { float: left; margin-left: 100px; } .custom-navigation-ambientes .flex-next { float: right; margin-right: 100px; } .custom-controls-container-ambientes { position: absolute; width: 100%; margin-top: 300px; } .custom-controls-container-ambientes li a{ width: 12px; height: 12px; background: #707070; border-radius: 0; } .custom-controls-container-ambientes li a.flex-active{ background: #F7BE4D; } #ambientes4 .conteudo1 { /*margin-bottom: 120px;*/ } #ambientes4 .col-lg-5, #ambientes4 .col-lg-6{ display: flex; flex-direction: column; justify-content: center; } .card-ambiente { margin: 20px 0 70px 0; text-align: center; } .card-ambiente .conteudo p{ padding: 0 20px; } .card-ambiente .imagem img { width: 100%; height: auto; } .card-ambiente h4::after { content: ''; background: #F7BE4D; width: 55px; height: 4px; position: absolute; left: 50%; transform: translateX(-50%); bottom: -15px; } .card-ambiente h4 { color: #707070; font-size: 20px; font-weight: bold; margin-top: 25px; position: relative; margin-bottom: 35px; } .card-ambiente:hover h4::after { content: ''; background: #F7BE4D; width: 100%; height: 4px; position: absolute; left: 50%; transform: translateX(-50%); bottom: -15px; } .card-ambiente:hover h4 { color: #312E39; margin: 25px auto; width: max-content; } #projetos2 { padding: 120px 0 ; } #projetos2 .col-lg-6, #projetos2 .col-lg-5{ display: flex; flex-direction: column; justify-content: center; margin-bottom: 100px; } #projetos2 h2 { font-size: 32px; line-height: 50px; margin-bottom: 0; } #projetos2 .conteudo1 { /*margin-bottom: 100px;*/ } .post-projeto { margin-top: 30px; text-align: center; } .post-projeto .thumb { width: 100%; height: 437px; background-repeat: no-repeat; background-position: center; background-size: cover; } .post-projeto .excerpt { color: #404040; } .post-projeto h3.title { color: #707070; font-size: 20px; line-height: 37px; font-weight: bold; position: relative; margin-top: 20px; display: block; margin-bottom: 50px; } .post-projeto h3.title::after { content: ''; background: #F7BE4D; width: 55px; height: 4px; position: absolute; left: 50%; transform: translateX(-50%); bottom: -15px; } .post-projeto:hover h3.title { color: #312E39; width: max-content; margin: 20px auto; margin-bottom: 50px; } .post-projeto:hover h3.title::after { content: ''; background: #F7BE4D; width: 100%; height: 4px; position: absolute; left: 50%; transform: translateX(-50%); bottom: -15px; } .page-template-modelo-projetos #footer { padding: 100px 0 20px 0; margin-top: 0; } .post-projeto:hover .thumb{ transition: 0.3s all; transform: scale(1.02); } .post-projeto .thumb{ transition: 0.3s all; } #projetos2 .pagination { text-align: center; margin: 80px 0 0 0; } .wp-pagenavi { width: 100%; text-align: center; color: #312E39; } .wp-pagenavi a{ color: #312E39; } .wp-pagenavi span.current { border: 0; margin: 0 10px; } .wp-pagenavi a.page { border: 0; margin: 0 10px; font-weight: 700; color: #7D7D7D; } .wp-pagenavi .nextpostslink, .wp-pagenavi .previouspostslink { border: 0; margin: 0 10px; color: #7D7D7D; font-weight: 600; } #projeto2 { padding: 120px 0; } #projeto2 .descricao-projeto { margin-bottom: 60px; } #projeto2 .imagem-galeria .overlay{ background-color: #00000070; display: none; } #projeto2 .imagem-galeria:hover .overlay{ display: block; } #projeto2 .imagem-galeria .overlay img { position: absolute; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; max-width: 200px; height: auto !important; } #projeto2 .imagem-galeria { background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; } .projeto-modelo1 .imagem1 .imagem-galeria { height: 665px; } .projeto-modelo1 .imagem1 .imagem-galeria .overlay { height: 665px; width: 100%; } .projeto-modelo1 .imagem2 .imagem-galeria, .projeto-modelo1 .imagem3 .imagem-galeria { height: 318px; margin-bottom: 30px; } .projeto-modelo1 .imagem2 .imagem-galeria .overlay, .projeto-modelo1 .imagem3 .imagem-galeria .overlay { height: 318px; width: 100%; } .projeto-modelo1 .imagem4 .imagem-galeria{ height: 670px; } .projeto-modelo1 .imagem4 .imagem-galeria .overlay { height: 670px; width: 100%; } #projeto2 .custom-navigation-projeto { margin-top: 60px; text-align: center; width: 100%; } .line-arrows{ margin-top: 60px; text-align: center; width: 100%; } .line-arrows a{ display: inline-block; color: #7D7D7D; font-size: 16px; font-weight: 600; } .line-arrows .custom-controls-container-projeto{ position: relative; display: inline-block; margin: 0 10px; } #projeto2 .custom-navigation-projeto .flex-prev { display: inline-block; color: #7D7D7D; font-size: 16px; font-weight: 600; } #projeto2 .custom-navigation-projeto .flex-next { display: inline-block; color: #7D7D7D; font-size: 16px; font-weight: 600; } #projeto2 .custom-navigation-projeto .flex-prev:hover{ color: #46434D; } #projeto2 .custom-navigation-projeto .flex-next:hover{ color: #46434D; } #projeto2 .custom-navigation-projeto .custom-controls-container-projeto { position: relative; display: inline-block; margin: 0 10px; } .projeto-modelo2 .imagem1 .imagem-galeria { height: 670px; } .projeto-modelo2 .imagem1 .imagem-galeria .overlay { height: 670px; width: 100%; } .projeto-modelo3 .imagem1 .imagem-galeria, .projeto-modelo3 .imagem2 .imagem-galeria, .projeto-modelo3 .imagem3 .imagem-galeria, .projeto-modelo3 .imagem4 .imagem-galeria { height: 878px; margin-bottom: 30px; } .projeto-modelo3 .imagem1 .imagem-galeria .overlay, .projeto-modelo3 .imagem2 .imagem-galeria .overlay, .projeto-modelo3 .imagem3 .imagem-galeria .overlay, .projeto-modelo3 .imagem4 .imagem-galeria .overlay { height: 878px; width: 100%; } .projeto-modelo4 .imagem1 .imagem-galeria, .projeto-modelo4 .imagem2 .imagem-galeria { height: 665px; margin-bottom: 30px; } .projeto-modelo4 .imagem1 .imagem-galeria .overlay, .projeto-modelo4 .imagem2 .imagem-galeria .overlay { height: 665px; width: 100%; } .projeto-modelo4 .imagem3 .imagem-galeria { height: 670px; } .projeto-modelo4 .imagem3 .imagem-galeria .overlay { height: 670px; width: 100%; } #projetos3602 { padding: 120px 0 0 0; } #blog2 { padding: 120px 0 0 0; } .sidebar-blog .widget { margin-bottom: 50px; } .sidebar-blog .form-group { width: 100%; } .sidebar-blog input#s { width: 100%; border: 1px solid #70707057; border-radius: 0; padding: 30px 20px; text-transform: capitalize; } .sidebar-blog button#searchsubmit { background: #F7BE4D; border: 0; position: absolute; right: 15px; background-image: url(//vkrmoveis.com.br/wp-content/themes/cms/img/search-blog.png); background-repeat: no-repeat; background-position: center; width: 80px; height: 60px; } .sidebar-blog h3.widgettitle::after { content: ''; width: 55px; height: 4px; background: #F7BE4D; position: absolute; left: 0; bottom: -15px; } .sidebar-blog h3.widgettitle { color: #404040; font-size: 20px; font-weight: bold; line-height: 43px; position: relative; margin-bottom: 40px; } .sidebar-blog .widget_categories ul { padding: 0; } .sidebar-blog .widget_categories ul li { list-style: none; line-height: 43px; } .sidebar-blog .widget_categories ul li a { color: #818181; } .sidebar-blog .widget_categories ul li a:hover { color: #4a4949; font-weight: 500; } .sidebar-blog .widget { margin-bottom: 50px; } .sidebar-blog #recent-posts-widget-with-thumbnails-2 li:hover span.rpwwt-post-title { color: #47453A; font-weight: 600; font-size: 16px; line-height: 20px; } .sidebar-blog #recent-posts-widget-with-thumbnails-2 li:hover span.rpwwt-post-title:hover { color: #F7BE4D; } .sidebar-blog span.rpwwt-post-title:hover{ color: #F7BE4D; } .sidebar-blog .rpwwt-post-excerpt { color: #818181; font-size: 10px; line-height: 14px; margin-top: 10px; } .flex-end{ display: flex; justify-content: flex-end; } .sidebar-blog span.rpwwt-post-title a{ text-decoration: none; color: #818181; color: #47453A; font-weight: 600; } #rpwwt-recent-posts-widget-with-thumbnails-2 a, #rpwwt-recent-posts-widget-with-thumbnails-2 span{ color: #47453A; font-weight: 600; text-decoration: none; } #rpwwt-recent-posts-widget-with-thumbnails-2 span:hover{ color: #F7BE4D; } .sidebar-blog .tagcloud a { background: #F7BE4D; color: #312E39; font-size: 15px !important; font-weight: 600; padding: 5px 20px; margin-bottom: 10px; display: inline-block; } .post-share { margin-top: 100px; } .post-share span { display: flex; } #contato2 { padding: 120px 0 100px 0; } #contato2 .dados-contato { background: #FBFBFB; padding: 40px 30px; } #contato2 .contatos::after { content: ''; background: #F7BE4D; width: 55px; height: 4px; position: absolute; left: 0; bottom: -30px; } #contato2 .contatos { position: relative; margin-bottom: 70px; } #contato2 .contatos ul { padding: 0; } #contato2 .contatos ul li { list-style: none; margin-bottom: 20px; } #contato2 .contatos ul li a { color: #312E39; } #contato2 .contatos ul li img{ margin-right: 10px; } #contato2 .contatos ul li strong { font-size: 21px; } #contato2 h4 { color: #312E39; font-size: 16px; line-height: 30px; font-weight: 500; } #contato2 ul.social { padding: 0; margin-top: 20px; } #contato2 ul.social li { list-style: none; display: inline-block; margin: 0 5px; } #contato2 ul.social li a { background-color: #312E39; color: white; width: 51px; height: 51px; display: block; text-align: center; line-height: 50px; font-size: 20px; border-radius: 100%; } #contato2 ul.social li a:hover{ background-color: #F7BE4D; color: #312E39; } .sidebar-blog{ padding-left: 100px; } #contato2 .conteudo-form { color: #818181; font-size: 15px; line-height: 30px; } #contato2 textarea, #contato2 input{ width: 100%; border: 1px solid #D9D9D9; margin-top: 12px; color: #818181; font-size: 13px; line-height: 16px; padding: 20px 10px; } #contato2 textarea:focus, #contato2 input:focus{ border: 1px solid #F7BE4D; outline: 0; } #contato2 input[type=submit] { color: #312E39; font-size: 16px; font-weight: 600; line-height: 19px; padding: 15px 10px; } #contato3 iframe { width: 100%; margin-bottom: -10px; } .page-template-modelo-contato #footer{ margin-top: 0; padding: 100px 0 20px 0; } /******************************************************* * AJUSTES RESPONSIVOS *******************************************************/ @media( min-width: 1600px ) { .container { max-width: 1440px; } } @media (min-width: 1360px){ .container { max-width: 1280px; } #projetos2 h2 { font-size: 30px; line-height: 46px; } } @media( max-width: 1599px ) { } @media( max-width: 1359px ) { #header #main-menu ul li { display: inline-block; margin: 0 22px; } } @media(max-width: 1280px){ #slider-projetos .slide span{ font-size: 14px; } .d-lg-block{ display: flex !important; align-items: center; } #home3{ background-position: top left; } #projetos2 h2 { font-size: 26px; line-height: 40px; } } @media( max-width: 1200px ) { } @media( max-width: 1199px ) { #header #main-menu { display: none; } #header .toggle { display: block; text-align: right; padding-top: 15px; } #header .toggle button { background: transparent; border: 0; color: #ffffffc4; font-size: 40px; } .custom-navigation-home .flex-prev { float: left; margin-left: 50px; } .custom-navigation-home .flex-next { float: right; margin-right: 50px; } #menuMobile { background: white; padding: 20px 30px; } #menuMobile ul { padding: 0; margin-top: 20px; } #menuMobile ul li { display: block; width: 100%; line-height: 40px; } #menuMobile ul li a { color: #312E39; font-weight: 600; font-size: 16px; } h2 { font-size: 35px; line-height: 50px; } .card-produto { font-size: 14px; padding: 30px 10px; } .post-item .post-thumb { width: 100%; height: 300px; } #footer .coluna.coluna1 { display: flex; } #footer { font-size: 14px; } #slider-home .slide { height: 700px; } #slider-home .slide .conteudo h2 { font-size: 44px; line-height: 57px; margin-bottom: 50px; } #slider-home .slide .conteudo { font-size: 16px; line-height: 23px; margin-top: 200px; } .custom-navigation-home { /*display: none;*/ top: 35%; } #home1 ul.social { right: 30px; } #home3, #home5, #home2 { padding: 50px 0; } .custom-navigation-projetos { /*display: none;*/ } .sub-header { height: 323px; } .sub-header .conteudo { padding-top: 55px; } .sub-header .conteudo h2 { font-size: 36px; font-weight: bold; margin-bottom: 30px; } .sub-header .conteudo .breadcumbs { font-size: 16px; } #sobre2 { padding: 50px 0 50px 0; } #sobre4 { padding: 50px 0; } #sobre5 { padding: 50px 0; } #sobre2 h2, #sobre4 h2, #sobre5 h2 { font-size: 24px; line-height: 39px; margin-top: 0; } #sobre3 h2 { font-size: 26px; } .card-sobre { margin-top: 50px; text-align: center; color: #404040; padding: 30px 10px; min-height: auto; } #ambientes2 h2, #ambientes4 h2 { font-size: 24px; line-height: 39px; margin-top: 0; } #ambientes2 { padding: 50px 0; } #ambientes3 { padding: 50px 0; } #projetos2 { padding: 50px 0; } #projetos2 h2 { font-size: 22px; line-height: 39px; margin-top: 0; } #projetos3602 { padding: 50px 0; } #contato2 { padding: 50px 0; } } .wp-pagenavi .nextpostslink:hover{ color: #46434D; font-weight: 600; } .wp-pagenavi .previouspostslink:hover{ color: #46434D; font-weight: 600; } @media( max-width: 1024px ) { .post-projeto .thumb{ height: 300px; } .custom-navigation-ambientes{ /*display: none;*/ top: 420px; } .flex-control-nav{ bottom: -50px; } #menuMobile ul li a:hover{ color: #F7BE4D; } #home2 .col-lg-6:nth-child(3){ display: flex !important; flex-direction: column; align-items: center; justify-content: center; } h2::after{ bottom: -5px; } #sobre2 .col-lg-5, #sobre4 .col-lg-5{ display: flex; align-items: center; } .card-sobre h4{ font-size: 16px; } .card-sobre{ min-height: 470px; } #ambientes5 .conteudo p{ font-size: 14px; } } @media( max-width: 991px ) { #home2 .conteudo { margin-top: 50px; } #slider-projetos { margin-top: 60px; background: transparent; padding-left: 300px; } #home4 .conteudo { position: relative; top: 0; transform: none; margin-bottom: 30px; } #footer .coluna.coluna1 { margin-bottom: 30px; } #footer .copyright { color: white; font-size: 14px; margin-top: 30px; text-align: center; } #footer .copyright .text-right { text-align: center !important; } #projeto2 .imagem-galeria { margin-bottom: 40px !important; height: 500px !important; } #projeto2 .imagem-galeria .overlay { height: 500px !important; } .sidebar-blog { margin-top: 100px; padding-left: 0; } } @media( max-width: 768px ) { .custom-navigation-home{ display: none; } .sidebar-blog button#searchsubmit{ margin-top: -17px; } .sidebar-blog h3.widgettitle{ text-align: center; } .sidebar-blog h3.widgettitle::after{ left: calc(50% - 27px); } } @media( max-width: 769px ) { #home1 ul.social { width: 100%; text-align: center; right: 25px; } .custom-controls-container-home { display: none; } #header .toggle { display: block; text-align: right; padding-top: 0; margin-top: 25px; } .custom-navigation-projetos .flex-next{ margin-top: 310px; } .custom-navigation-projetos .flex-prev{ margin-left: 350px; margin-top: 310px; } #sobre3 h2 { margin-bottom: 30px; } #sobre3 p { text-align: center; margin-bottom: 70px; padding-right: 0; } #sobre3 { padding-bottom: 50px; } .card-sobre { min-height: 350px; padding: 30px 80px; } #sobre5 .imagem img { margin-right: 90px; } #ambientes3 .slide .imagem{ display: flex; justify-content: center; } .custom-controls-container-ambientes{ margin-top: 330px; } #contato2 .contatos{ display: flex; justify-content: center; align-items: center; text-align: center; } #contato2 ul.social{ display: flex; justify-content: center; } #contato2 .dados-contato{ display: flex; flex-direction: column; justify-content: center; align-items: center; } #contato2 .contatos::after{ margin: 0 auto; left: unset; } body.post-template-default.single.single-post .header-logo, body.blog .header-logo { width: 120px; } body.post-template-default.single.single-post .header-logo, body.page-template-modelo-sobre .header-logo { width: 120px; } body.post-template-default.single.single-post .header-logo, body.page-template-modelo-ambientes .header-logo { width: 120px; } body.post-template-default.single.single-post .header-logo, body.page-template-modelo-projetos .header-logo { width: 120px; } body.post-template-default.single.single-post .header-logo, body.page-template-modelo-contato .header-logo { width: 120px; } body.post-template-default.single.single-post .header-logo, body.single-projeto .header-logo { width: 120px; } } #home3 .flex-control-nav{ display: none; } @media( max-width: 575px ) { .custom-navigation-projetos{ /*display: none;*/ } .header-logo img{ transition: 0.3s all; width: 60%; } #slider-home .slide .conteudo h2 { font-size: 35px; line-height: 37px; margin-bottom: 40px; } #slider-home .slide .conteudo .botao { margin-top: 40px; } .sub-header .conteudo .breadcumbs { display: none; } #sobre2 .imagem { margin-top: 0; } #sobre3 p { text-align: center; padding-right: 0px; margin-bottom: 70px; } #sobre3 h2 { margin-bottom: 30px; } #sobre3 { padding-bottom: 0; } .card-sobre { min-height: 350px; } #sobre2 h2, #sobre4 h2, #sobre5 h2 { font-size: 22px; } #sobre5 .imagem img { max-width: 350px; margin-right: 0px; } } @media(max-width: 767px){ #header .toggle{ margin-top: -60px; } } @media(max-width: 500px){ .custom-navigation-projetos .flex-prev{ margin-left: 10px; }.custom-navigation-projetos .flex-next{ margin-right: 38px; } #home3{ background-image: unset !important; } .copyright .col-lg-6{ font-size: 12px; } .custom-navigation-ambientes .flex-prev{ margin-left: 65px; } .custom-controls-container-ambientes{ margin-top: 364px; margin-left: -15px; } .custom-navigation-ambientes{ top: 450px; } .sub-header .conteudo h2{ margin-bottom: 10px; } } textarea:focus, input:focus, select:focus { box-shadow: 0 0 0 0; border: 0 none; outline: 0; } @media(max-width: 768px){ h2{ text-align: center; } h2::after{ left: calc(50% - 25px); } #projetos2 .conteudo2 p, #projetos2 .conteudo p{ text-align: justify; } #home2 .botao{ margin-top: 45px; display: flex; justify-content: center; margin-bottom: 50px; } #slider-home .slide .conteudo{ margin-top: 80px; } #footer .menu-footer ul{ margin: 0; } #sobre2 .conteudo1, #sobre4 .conteudo1{ margin: 0 auto; } .sub-header .conteudo { padding-top: 20px; } #sobre5 .imagem{ display: flex; justify-content: center; margin-top: 50px; } .card-ambiente .conteudo p { padding: 0 20px; text-align: justify !important; } #slider-ambientes .slide .conteudo { position: relative; top: 0; transform: translateY(20%); padding-left: 0; padding: 20px; } } @media(max-width: 500px){ h2{ font-size: 27px; } #slider-projetos{ padding-left: 0; } .conteudo p{ font-size: 16px; line-height: 22px; } .imagem img{ margin-top: 40px; } #newsletter h3{ font-size: 18px; } #newsletter .bg-newsletter p{ font-size: 16px; } #footer .coluna.coluna1{ flex-direction: column; } #footer .coluna1 .logo-footer{ margin-bottom: 30px; } #footer .coluna1 .contatos{ margin-left: 0; } #home1 ul.social{ display: flex; justify-content: center; align-items: center; padding: 0; padding-top: 0; } #contato2 .dados-contato{ padding: 40px 10px; } #contato2 .contatos ul li a br{ display: none; } #contato2 h4 br{ display: none; } #contato2 .conteudo-form p{ text-align: justify; } #contato2 ul.social{ display: flex; } } .header-logo a{ position: relative; z-index: 9; } @media(max-width: 340px){ #slider-projetos ul li:first-child span::after{ display: block; } .copyright .col-lg-6{ font-size: 11px; } #sobre2 h2, #sobre4 h2, #sobre5 h2 { font-size: 18px; } #sobre5 .imagem img { max-width: 300px; margin-right: 0px; } } .grecaptcha-badge { display: none; } body.error404 article#search-result > div { padding: 50px 0; } body.error404 footer#footer{ margin-top: 0; } body.error404 section.content-body p { margin: 0; } body.error404 section.content-body a { margin-top: 15px; } .btn.focus, .btn:focus { box-shadow: none; } .flex-direction-nav .flex-disabled { z-index: -6; } div#slider-galeria-projeto ul { list-style: none; } section#projeto2 .item { transition: 1700ms; } section#projeto2 .item.hide { opacity: 0; left: -50px; position: absolute !important; z-index: -1; } section#projeto2 .item.show { position: relative; opacity: 1; z-index: 1; } a#btn_vermais { background: #f7be4d; font-weight: 600; color: #404040; margin: 0 auto; display: table; }@keyframes aslAnFadeInDrop { 0% { opacity: 0; transform: translate(0, -50px); } 100% { opacity: 1; transform: translate(0, 0); } } @-webkit-keyframes aslAnFadeInDrop { 0% { opacity: 0; transform: translate(0, -50px); -webkit-transform: translate(0, -50px); } 100% { opacity: 1; transform: translate(0, 0); -webkit-transform: translate(0, 0); } } @keyframes aslAnFadeOutDrop { 0% { opacity: 1; transform: translate(0, 0); -webkit-transform: translate(0, 0); } 100% { opacity: 0; transform: translate(0, -50px); -webkit-transform: translate(0, -50px); } } @-webkit-keyframes aslAnFadeOutDrop { 0% { opacity: 1; transform: translate(0, 0); -webkit-transform: translate(0, 0); } 100% { opacity: 0; transform: translate(0, -50px); -webkit-transform: translate(0, -50px); } } .hiddend { display: none !important; } div.asl_w.asl_an_fadeInDrop, div.asl_w.asl_an_fadeOutDrop { -webkit-animation-duration: 100ms; animation-duration: 100ms; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } div.asl_w.asl_an_fadeInDrop { animation-name: aslAnFadeInDrop; -webkit-animation-name: aslAnFadeInDrop; } div.asl_w.asl_an_fadeOutDrop { animation-name: aslAnFadeOutDrop; -webkit-animation-name: aslAnFadeOutDrop; } div.asl_w.asl_main_container { transition: width 130ms linear; -webkit-transition: width 130ms linear; } div.asl_w, div.asl_w *, div.asl_r, div.asl_r *, div.asl_s, div.asl_s * { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; -ms-box-sizing: content-box; -o-box-sizing: content-box; box-sizing: content-box; padding: 0; margin: 0; border: 0; border-radius: 0; text-transform: none; text-shadow: none; box-shadow: none; text-decoration: none; text-align: left; letter-spacing: normal; } div.asl_r, div.asl_r * { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } div.asl_r { box-sizing: border-box; margin: 12px 0 0 0; } div.asl_m .proinput input::-ms-clear { display: none !important; width: 0 !important; height: 0 !important; } div.asl_m .proinput input::-ms-reveal { display: none !important; width: 0 !important; height: 0 !important; } div.asl_m input[type="search"]::-webkit-search-decoration, div.asl_m input[type="search"]::-webkit-search-cancel-button, div.asl_m input[type="search"]::-webkit-search-results-button, div.asl_m input[type="search"]::-webkit-search-results-decoration { display: none; } div.asl_m input[type="search"] { appearance: auto !important; -webkit-appearance: none !important; } .clear { clear: both; } .hiddend { display: none; } div.asl_m textarea:focus, div.asl_m input:focus { outline: none; } div.asl_m { width: 100%; height: auto; border-radius: 0; background: rgba(255, 255, 255, 0); overflow: hidden; position: relative; z-index: 200; } div.asl_m .probox { width: auto; border-radius: 5px; background: #fff; overflow: hidden; border: 1px solid #fff; box-shadow: 1px 0 3px #ccc inset; display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; } div.asl_m .probox .proinput { width: 1px; height: 100%; margin: 0 0 0 10px; padding: 0 5px; float: left; box-shadow: none; position: relative; flex: 1 1 auto; -webkit-flex: 1 1 auto; order: 5; -webkit-order: 5; } div.asl_m .probox .proinput form { height: 100%; /* some themes like to add un-removable margin and padding.. */ margin: 0 !important; padding: 0 !important; display: block !important; max-width: unset !important; } div.asl_m .probox .proinput input:before, div.asl_m .probox .proinput input:after, div.asl_m .probox .proinput form:before, div.asl_m .probox .proinput form:after { display: none; } div.asl_m .probox .proinput input { height: 28px; border: 0; background: transparent; width: 100%; box-shadow: none; margin: -1px; padding: 0; left: 0; line-height: normal !important; display: block; min-height: unset; max-height: unset; } div.asl_m .probox .proinput input::-webkit-input-placeholder { opacity: .85; } div.asl_m .probox .proinput input::-moz-placeholder { opacity: .85; } div.asl_m .probox .proinput input:-ms-input-placeholder { opacity: .85; } div.asl_m .probox .proinput input:-moz-placeholder { opacity: .85; } div.asl_m .proinput input.orig { padding: 0 !important; margin: 0 !important; background: transparent !important; border: none !important; background-color: transparent !important; box-shadow: none !important; z-index: 10; position: relative; } div.asl_m .proinput input.autocomplete { padding: 0 !important; margin: 0; background: transparent !important; border: none !important; background-color: transparent !important; box-shadow: none !important; opacity: .2; } div.asl_m .probox .proinput input.autocomplete { border: 0; background: transparent; width: 100%; box-shadow: none; margin: 0; margin-top: -28px !important; padding: 0; left: 0; position: relative; z-index: 9; } div.asl_m .probox .proinput.iepaddingfix { padding-top: 0; } div.asl_m .probox .proinput .loading { width: 32px; background: #000; height: 100%; box-shadow: none; } div.asl_m .probox .proloading, div.asl_m .probox .proclose, div.asl_m .probox .promagnifier, div.asl_m .probox .prosettings { width: 20px; height: 20px; background: none; background-size: 20px 20px; float: right; box-shadow: none; margin: 0; padding: 0; text-align: center; flex: 0 0 auto; -webkit-flex: 0 0 auto; z-index: 100; } div.asl_m .probox .promagnifier { order: 10; -webkit-order: 10; } div.asl_m .probox .prosettings { order: 1; -webkit-order: 1; } div.asl_m .probox .proloading, div.asl_m .probox .proclose { background-position: center center; display: none; background-size: auto; background-repeat: no-repeat; background-color: transparent; order: 6; -webkit-order: 6; } div.asl_m .probox .proclose { position: relative; cursor: pointer; } div.asl_m .probox .promagnifier .innericon, div.asl_m .probox .prosettings .innericon, div.asl_m .probox .proclose .innericon { background-size: 20px 20px; background-position: center center; background-repeat: no-repeat; background-color: transparent; width: 100%; height: 100%; text-align: center; overflow: hidden; line-height: initial; display: block; } div.asl_m .probox .promagnifier .innericon svg, div.asl_m .probox .prosettings .innericon svg, div.asl_m .probox .proloading svg { height: 100%; width: 22px; vertical-align: baseline; display: inline-block; } div.asl_m .probox .proloading { padding: 2px; box-sizing: border-box; } div.asl_m .probox div.asl_loader, div.asl_m .probox div.asl_loader * { box-sizing: border-box !important; margin: 0; padding: 0; box-shadow: none; } div.asl_m .probox div.asl_loader { box-sizing: border-box; display: flex; flex: 0 1 auto; flex-direction: column; flex-grow: 0; flex-shrink: 0; flex-basis: 28px; max-width: 100%; max-height: 100%; width: 100%; height: 100%; align-items: center; justify-content: center; } div.asl_m .probox div.asl_loader-inner { width: 100%; margin: 0 auto; text-align: center; height: 100%; } @-webkit-keyframes rotate-simple { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotate-simple { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } div.asl_m .probox div.asl_simple-circle { margin: 0; height: 100%; width: 100%; animation: rotate-simple .8s infinite linear; -webkit-animation: rotate-simple .8s infinite linear; border: 4px solid #fff; border-right-color: transparent !important; border-radius: 50%; box-sizing: border-box; } div.asl_m .probox .proclose svg { background: #333; border-radius: 50%; position: absolute; top: 50%; width: 20px; height: 20px; margin-top: -10px; left: 50%; margin-left: -10px; fill: #fefefe; padding: 4px; box-sizing: border-box; box-shadow: 0 0 0 2px rgba(255, 255, 255, .9); } div.asl_r * { text-decoration: none; text-shadow: none; } div.asl_r .results .asl_nores { overflow: hidden; width: auto; height: 100%; line-height: initial; text-align: center; margin: 0; background: #fff; padding: 10px 3px; color: #222; } div.asl_r.horizontal { padding: 2px 0 10px; } div.asl_r.horizontal .results .nores { background: transparent; } div.asl_r .results { overflow: hidden; width: auto; height: 0; margin: 0; padding: 0; } div.asl_r.horizontal .results { height: auto; width: auto; } div.asl_r .results .item { overflow: hidden; width: auto; margin: 0; padding: 3px; position: relative; background: #f4f4f4; border-left: 1px solid rgba(255, 255, 255, .6); border-right: 1px solid rgba(255, 255, 255, .4); animation-delay: 0s; animation-duration: 1s; animation-fill-mode: both; animation-timing-function: ease; backface-visibility: hidden; -webkit-animation-delay: 0s; -webkit-animation-duration: 1s; -webkit-animation-fill-mode: both; -webkit-animation-timing-function: ease; -webkit-backface-visibility: hidden; } div.asl_r.vertical .results .item:last-child { margin-bottom: 0; } div.asl_r.vertical .results .item:last-child:after { height: 0; margin: 0; width: 0; } div.asl_r .results .item .asl_image { overflow: hidden; background: transparent; margin: 2px 8px 0 0; padding: 0; float: left; background-position: center; background-size: cover; } div.asl_r .results .item .asl_image img { width: 100%; height: 100%; } div.asl_r .results .item .asl_content { overflow: hidden; height: auto; background: transparent; margin: 0; padding: 3px 3px 5px 3px; } div.asl_r .results .item .asl_content h3 { margin: 0; padding: 0; display: inline; line-height: inherit; } div.asl_r .results .item .asl_content .asl_desc { margin-top: 4px; font-size: 12px; line-height: 18px; } div.asl_r .results .item div.etc { margin-top: 4px; } div.asl_r .results a span.overlap { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; } div.asl_r p.showmore { text-align: center; padding: 0; margin: 0; font-weight: normal; font-family: Open Sans; color: #055e94; font-size: 12px; line-height: 30px; text-shadow: 0 0 0 rgba(255, 255, 255, 0); background-color: #fff; margin-top: 3px; cursor: pointer; } div.asl_r p.showmore span { font-weight: normal; font-family: Open Sans; color: #055e94; font-size: 12px; line-height: 30px; text-shadow: 0 0 0 rgba(255, 255, 255, 0); display: block; text-align: center; cursor: pointer; } .results .asl_nores .asl_keyword { padding: 0 6px; cursor: pointer; font-weight: bold; font-family: Open Sans; } div.asl_r .resdrg { height: auto; } div.asl_w .group:first-of-type { margin: 0 0 -3px; } div.asl_s.searchsettings { width: 200px; height: auto; position: absolute; display: none; z-index: 1101; border-radius: 0 0 3px 3px; visibility: hidden; padding: 0; } div.asl_s.searchsettings form { display: flex; flex-wrap: wrap; margin: 0 0 12px 0 !important; padding: 0 !important; } div.asl_s.searchsettings .asl_option_inner { margin: 2px 10px 0 10px; *padding-bottom: 10px; } div.asl_s.searchsettings.ie78 .asl_option_inner { margin-bottom: 0 !important; padding-bottom: 0 !important; } div.asl_s.searchsettings .asl_option_label { font-size: 14px; line-height: 20px !important; margin: 0; width: 150px; text-shadow: none; padding: 0; min-height: 20px; border: none; background: transparent; float: none; } div.asl_s.searchsettings .asl_option_inner input[type=checkbox] { display: none !important; } div.asl_s.searchsettings.ie78 .asl_option_inner input[type=checkbox] { display: block; } div.asl_s.searchsettings.ie78 .asl_option_label { float: right !important; } div.asl_s.searchsettings .asl_option { display: flex; flex-direction: row; -webkit-flex-direction: row; align-items: flex-start; margin: 0 0 10px 0; cursor: pointer; } div.asl_s.searchsettings .asl_option.asl-o-last, div.asl_s.searchsettings .asl_option:last-child { margin-bottom: 0; } div.asl_s.searchsettings .asl_option_inner { width: 17px; height: 17px; position: relative; flex-grow: 0; -webkit-flex-grow: 0; flex-shrink: 0; -webkit-flex-shrink: 0; } div.asl_s.searchsettings .asl_option_inner .asl_option_checkbox { cursor: pointer; position: absolute; width: 17px; height: 17px; top: 0; padding: 0; border-radius: 2px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .2); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .2); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .2); overflow: hidden; font-size: 0 !important; color: rgba(0, 0, 0, 0); } /* MODERN BROWSER SCROLL START */ div.asl_r.vertical .results, div.asl_s.searchsettings .asl_sett_scroll { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.5) transparent; } div.asl_r.vertical .results { scrollbar-color: rgba(0, 0, 0, 0.5) rgb(255,255,255); } div.asl_r.vertical .results::-webkit-scrollbar { width: 10px; } div.asl_s.searchsettings .asl_sett_scroll::-webkit-scrollbar { width: 6px; } div.asl_s.searchsettings .asl_sett_scroll::-webkit-scrollbar-track { background: transparent; box-shadow: inset 0 0 12px 12px transparent; border: none; } div.asl_r.vertical .results::-webkit-scrollbar-track { background: rgb(255, 255, 255); box-shadow: inset 0 0 12px 12px transparent; border: solid 2px transparent; } div.asl_r.vertical .results::-webkit-scrollbar-thumb, div.asl_s.searchsettings .asl_sett_scroll::-webkit-scrollbar-thumb { background: transparent; box-shadow: inset 0 0 12px 12px rgba(0, 0, 0, 0); border: solid 2px transparent; border-radius: 12px; } div.asl_s.searchsettings .asl_sett_scroll::-webkit-scrollbar-thumb { border: none; } div.asl_r.vertical:hover .results::-webkit-scrollbar-thumb, div.asl_s.searchsettings:hover .asl_sett_scroll::-webkit-scrollbar-thumb { box-shadow: inset 0 0 12px 12px rgba(0, 0, 0, 0.5); } @media (hover: none), (max-width: 500px) { div.asl_r.vertical .results::-webkit-scrollbar-thumb, div.asl_s.searchsettings .asl_sett_scroll::-webkit-scrollbar-thumb { box-shadow: inset 0 0 12px 12px rgba(0, 0, 0, 0.5); } } /* MODERN BROWSER SCROLL END */ div.asl_s.searchsettings .asl_option_inner .asl_option_checkbox:after { opacity: 0; font-family: 'aslsicons2'; content: "\e800"; font-weight: normal !important; background: transparent; border: none !important; box-sizing: content-box; color: #fff; height: 100%; width: 100%; padding: 0 !important; margin: 1px 0 0 0 !important; line-height: 17px; text-align: center; text-decoration: none; text-shadow: none; display: block; font-size: 11px !important; position: absolute; top: 0; left: 0; z-index: 1; } div.asl_s.searchsettings.ie78 .asl_option_inner .asl_option_checkbox:after { display: none; } div.asl_s.searchsettings .asl_option_inner .asl_option_checkbox:hover::after { opacity: .3; } div.asl_s.searchsettings .asl_option_inner input[type=checkbox]:checked+.asl_option_checkbox:after { opacity: 1; } div.asl_s.searchsettings fieldset { position: relative; float: left; } div.asl_s.searchsettings fieldset { background: transparent; font-size: .9em; margin: 12px 0 0 !important; padding: 0; width: 192px; } div.asl_s.searchsettings fieldset .asl_option_label { width: 130px; display: block; } div.asl_s.searchsettings form fieldset legend { padding: 5px 0 8px 10px; } #asl_hidden_data { display: none !important; } .asl_r .item { /* To override .overlap */ .asl__af-tt-container { position: relative; z-index: 2; .asl__af-tt-link { transition: opacity 0.2s; &:hover { opacity: 0.7; } } } .average-rating { --percent: 0%; --color: #2EA3F2; --bg-color: rgba(0,0,0,0.2); --size: 17px; position: relative; appearance: none; width: auto; display: inline-block; vertical-align: baseline; font-size: var(--size); line-height: calc(var(--size) - 15%); color: var(--bg-color); background: linear-gradient(90deg, var(--color) var(--percent), var(--bg-color) var(--percent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } } .asl_r .item { .price { --regular-price-color: #666; --sale_price_color: #666; color: var(--regular-price-color); del { opacity: .5; display: inline-block; text-decoration: line-through; color: var(--regular-price-color); } ins { margin-left: 0.5em; text-decoration: none; font-weight: 700; display: inline-block; color: var(--sale_price_color); } } .add-to-cart-container { display: flex; flex-wrap: wrap; align-items: center; position: relative; z-index: 10; width: 100%; margin: 12px 0; .add-to-cart-quantity { padding: 8px 0 8px 8px; background: #eaeaea; width: 32px; border-radius: 4px 0 0 4px; height: 18px; min-height: unset; display: inline-block; font-size: 13px; line-height: normal; } .add-to-cart-button { padding: 8px; border-radius: 4px; background: #6246d7; color: white; height: 18px; min-height: unset; display: block; text-align: center; min-width: 90px; font-size: 13px; line-height: normal; &.add-to-cart-variable { border-radius: 4px; } &.loading { content: url("data:image/svg+xml,%3Csvg width='38' height='38' viewBox='0 0 38 38' xmlns='http://www.w3.org/2000/svg' stroke='%23fff'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(1 1)' stroke-width='2'%3E%3Ccircle stroke-opacity='.5' cx='18' cy='18' r='18'/%3E%3Cpath d='M36 18c0-9.94-8.06-18-18-18'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 18 18' to='360 18 18' dur='1s' repeatCount='indefinite'/%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } } a.added_to_cart { flex-basis: 100%; margin-top: 8px; } } .add-to-cart-container:has(.add-to-cart-quantity) { .add-to-cart-button { border-radius: 0 4px 4px 0; } } } .rtl .asl_content, .rtl .asl_nores, .rtl .asl_content *, .rtl .asl_nores *, .rtl .searchsettings form { text-align: right !important; direction: rtl !important; } .rtl .asl_nores>* { display: inline-block; } .rtl div.asl_r .results .item .asl_image { float: right; margin: 2px 0 0 8px; } .rtl .searchsettings .asl_option { flex-direction: row-reverse !important; -webkit-flex-direction: row-reverse !important; } .rtl .asl_option { direction: ltr; } .rtl .asl_label, .rtl .asl_option div.asl_option_label { text-align: right !important; } .rtl .asl_label { max-width: 1000px !important; width: 100%; direction: rtl !important; } .rtl .asl_label input[type=radio] { margin: 0 0 0 6px !important; } .rtl .asl_option_cat_level-0 div.asl_option_label { font-weight: bold !important; } .rtl fieldset .asl_option_cat_level-1 { margin-right: 12px !important; margin-left: 0; } .rtl fieldset .asl_option_cat_level-2 { margin-right: 24px !important; margin-left: 0; } .rtl fieldset .asl_option_cat_level-3 { margin-right: 36px !important; margin-left: 0; } .rtl .searchsettings legend { text-align: right !important; display: block; width: 100%; } .rtl .searchsettings input[type=text], .rtl .searchsettings select { direction: rtl !important; text-align: right !important; } .rtl div.asl_w.asl_s.searchsettings form, .rtl div.asl_w.asl_sb.searchsettings form { flex-direction: row-reverse !important; } .rtl div.horizontal.asl_r div.item { float: right !important; } .rtl p.asl-try { direction: rtl; text-align: right; margin-right: 10px; width: auto !important; }