/*Lof_All/css/fix_magento2.css*/ .product-item, .product-item-info, .product-item-details { -webkit-box-sizing : initial; -moz-box-sizing : initial; box-sizing : initial; } .label { color : #333333; padding : inherit; } .page-header { margin : inherit; padding : 0px; } /*Lof_LazyLoad/css/styles.css*/ img.lof-lazy { width : auto; } /*Lof_Faq/css/animate.css*/ @charset "UTF-8"; /*! * animate.css -http://daneden.me/animate * Version - 3.5.1 * Licensed under the MIT license - http://opensource.org/licenses/MIT * * Copyright (c) 2016 Daniel Eden */ .animated { -webkit-animation-duration : 1s; animation-duration : 1s; -webkit-animation-fill-mode : both; animation-fill-mode : both; } .animated.infinite { -webkit-animation-iteration-count : infinite; animation-iteration-count : infinite; } .animated.hinge { -webkit-animation-duration : 2s; animation-duration : 2s; } .animated.flipOutX, .animated.flipOutY, .animated.bounceIn, .animated.bounceOut { -webkit-animation-duration : .75s; animation-duration : .75s; } @-webkit-keyframes bounce { from, 20%, 53%, 80%, to { -webkit-animation-timing-function : cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function : cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-transform : translate3d(0, 0, 0); transform : translate3d(0, 0, 0); } 40%, 43% { -webkit-animation-timing-function : cubic-bezier(0.755, 0.050, 0.855, 0.060); animation-timing-function : cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform : translate3d(0, -30px, 0); transform : translate3d(0, -30px, 0); } 70% { -webkit-animation-timing-function : cubic-bezier(0.755, 0.050, 0.855, 0.060); animation-timing-function : cubic-bezier(0.755, 0.050, 0.855, 0.060); -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.610, 0.355, 1.000); animation-timing-function : cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-transform : translate3d(0, 0, 0); transform : translate3d(0, 0, 0); } 40%, 43% { -webkit-animation-timing-function : cubic-bezier(0.755, 0.050, 0.855, 0.060); animation-timing-function : cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform : translate3d(0, -30px, 0); transform : translate3d(0, -30px, 0); } 70% { -webkit-animation-timing-function : cubic-bezier(0.755, 0.050, 0.855, 0.060); animation-timing-function : cubic-bezier(0.755, 0.050, 0.855, 0.060); -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(.95, 1.05, 1); transform : scale3d(.95, 1.05, 1); } 75% { -webkit-transform : scale3d(1.05, .95, 1); transform : scale3d(1.05, .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(.95, 1.05, 1); transform : scale3d(.95, 1.05, 1); } 75% { -webkit-transform : scale3d(1.05, .95, 1); transform : scale3d(1.05, .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(.9, .9, .9) rotate3d(0, 0, 1, -3deg); transform : scale3d(.9, .9, .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(.9, .9, .9) rotate3d(0, 0, 1, -3deg); transform : scale3d(.9, .9, .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 : none; transform : none; } 15% { -webkit-transform : translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform : translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform : translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform : translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform : translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform : translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform : translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform : translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform : translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform : translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } to { -webkit-transform : none; transform : none; } } @keyframes wobble { from { -webkit-transform : none; transform : none; } 15% { -webkit-transform : translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform : translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform : translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform : translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform : translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform : translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform : translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform : translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform : translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform : translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } to { -webkit-transform : none; transform : none; } } .wobble { -webkit-animation-name : wobble; animation-name : wobble; } @-webkit-keyframes jello { from, 11.1%, to { -webkit-transform : none; transform : none; } 22.2% { -webkit-transform : skewX(-12.5deg) skewY(-12.5deg); transform : skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform : skewX(6.25deg) skewY(6.25deg); transform : skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform : skewX(-3.125deg) skewY(-3.125deg); transform : skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform : skewX(1.5625deg) skewY(1.5625deg); transform : skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform : skewX(-0.78125deg) skewY(-0.78125deg); transform : skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform : skewX(0.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 : none; transform : none; } 22.2% { -webkit-transform : skewX(-12.5deg) skewY(-12.5deg); transform : skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform : skewX(6.25deg) skewY(6.25deg); transform : skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform : skewX(-3.125deg) skewY(-3.125deg); transform : skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform : skewX(1.5625deg) skewY(1.5625deg); transform : skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform : skewX(-0.78125deg) skewY(-0.78125deg); transform : skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform : skewX(0.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 bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function : cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function : cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity : 0; -webkit-transform : scale3d(.3, .3, .3); transform : scale3d(.3, .3, .3); } 20% { -webkit-transform : scale3d(1.1, 1.1, 1.1); transform : scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform : scale3d(.9, .9, .9); transform : scale3d(.9, .9, .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(.97, .97, .97); transform : scale3d(.97, .97, .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.610, 0.355, 1.000); animation-timing-function : cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity : 0; -webkit-transform : scale3d(.3, .3, .3); transform : scale3d(.3, .3, .3); } 20% { -webkit-transform : scale3d(1.1, 1.1, 1.1); transform : scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform : scale3d(.9, .9, .9); transform : scale3d(.9, .9, .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(.97, .97, .97); transform : scale3d(.97, .97, .97); } to { opacity : 1; -webkit-transform : scale3d(1, 1, 1); transform : scale3d(1, 1, 1); } } .bounceIn { -webkit-animation-name : bounceIn; animation-name : bounceIn; } @-webkit-keyframes bounceInDown { from, 60%, 75%, 90%, to { -webkit-animation-timing-function : cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function : cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity : 0; -webkit-transform : translate3d(0, -3000px, 0); transform : translate3d(0, -3000px, 0); } 60% { opacity : 1; -webkit-transform : translate3d(0, 25px, 0); transform : translate3d(0, 25px, 0); } 75% { -webkit-transform : translate3d(0, -10px, 0); transform : translate3d(0, -10px, 0); } 90% { -webkit-transform : translate3d(0, 5px, 0); transform : translate3d(0, 5px, 0); } to { -webkit-transform : none; transform : none; } } @keyframes bounceInDown { from, 60%, 75%, 90%, to { -webkit-animation-timing-function : cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function : cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity : 0; -webkit-transform : translate3d(0, -3000px, 0); transform : translate3d(0, -3000px, 0); } 60% { opacity : 1; -webkit-transform : translate3d(0, 25px, 0); transform : translate3d(0, 25px, 0); } 75% { -webkit-transform : translate3d(0, -10px, 0); transform : translate3d(0, -10px, 0); } 90% { -webkit-transform : translate3d(0, 5px, 0); transform : translate3d(0, 5px, 0); } to { -webkit-transform : none; transform : none; } } .bounceInDown { -webkit-animation-name : bounceInDown; animation-name : bounceInDown; } @-webkit-keyframes bounceInLeft { from, 60%, 75%, 90%, to { -webkit-animation-timing-function : cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function : cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity : 0; -webkit-transform : translate3d(-3000px, 0, 0); transform : translate3d(-3000px, 0, 0); } 60% { opacity : 1; -webkit-transform : translate3d(25px, 0, 0); transform : translate3d(25px, 0, 0); } 75% { -webkit-transform : translate3d(-10px, 0, 0); transform : translate3d(-10px, 0, 0); } 90% { -webkit-transform : translate3d(5px, 0, 0); transform : translate3d(5px, 0, 0); } to { -webkit-transform : none; transform : none; } } @keyframes bounceInLeft { from, 60%, 75%, 90%, to { -webkit-animation-timing-function : cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function : cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity : 0; -webkit-transform : translate3d(-3000px, 0, 0); transform : translate3d(-3000px, 0, 0); } 60% { opacity : 1; -webkit-transform : translate3d(25px, 0, 0); transform : translate3d(25px, 0, 0); } 75% { -webkit-transform : translate3d(-10px, 0, 0); transform : translate3d(-10px, 0, 0); } 90% { -webkit-transform : translate3d(5px, 0, 0); transform : translate3d(5px, 0, 0); } to { -webkit-transform : none; transform : none; } } .bounceInLeft { -webkit-animation-name : bounceInLeft; animation-name : bounceInLeft; } @-webkit-keyframes bounceInRight { from, 60%, 75%, 90%, to { -webkit-animation-timing-function : cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function : cubic-bezier(0.215, 0.610, 0.355, 1.000); } from { opacity : 0; -webkit-transform : translate3d(3000px, 0, 0); transform : translate3d(3000px, 0, 0); } 60% { opacity : 1; -webkit-transform : translate3d(-25px, 0, 0); transform : translate3d(-25px, 0, 0); } 75% { -webkit-transform : translate3d(10px, 0, 0); transform : translate3d(10px, 0, 0); } 90% { -webkit-transform : translate3d(-5px, 0, 0); transform : translate3d(-5px, 0, 0); } to { -webkit-transform : none; transform : none; } } @keyframes bounceInRight { from, 60%, 75%, 90%, to { -webkit-animation-timing-function : cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function : cubic-bezier(0.215, 0.610, 0.355, 1.000); } from { opacity : 0; -webkit-transform : translate3d(3000px, 0, 0); transform : translate3d(3000px, 0, 0); } 60% { opacity : 1; -webkit-transform : translate3d(-25px, 0, 0); transform : translate3d(-25px, 0, 0); } 75% { -webkit-transform : translate3d(10px, 0, 0); transform : translate3d(10px, 0, 0); } 90% { -webkit-transform : translate3d(-5px, 0, 0); transform : translate3d(-5px, 0, 0); } to { -webkit-transform : none; transform : none; } } .bounceInRight { -webkit-animation-name : bounceInRight; animation-name : bounceInRight; } @-webkit-keyframes bounceInUp { from, 60%, 75%, 90%, to { -webkit-animation-timing-function : cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function : cubic-bezier(0.215, 0.610, 0.355, 1.000); } 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.610, 0.355, 1.000); animation-timing-function : cubic-bezier(0.215, 0.610, 0.355, 1.000); } 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(.9, .9, .9); transform : scale3d(.9, .9, .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(.3, .3, .3); transform : scale3d(.3, .3, .3); } } @keyframes bounceOut { 20% { -webkit-transform : scale3d(.9, .9, .9); transform : scale3d(.9, .9, .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(.3, .3, .3); transform : scale3d(.3, .3, .3); } } .bounceOut { -webkit-animation-name : bounceOut; animation-name : bounceOut; } @-webkit-keyframes bounceOutDown { 20% { -webkit-transform : translate3d(0, 10px, 0); transform : translate3d(0, 10px, 0); } 40%, 45% { opacity : 1; -webkit-transform : translate3d(0, -20px, 0); transform : translate3d(0, -20px, 0); } to { opacity : 0; -webkit-transform : translate3d(0, 2000px, 0); transform : translate3d(0, 2000px, 0); } } @keyframes bounceOutDown { 20% { -webkit-transform : translate3d(0, 10px, 0); transform : translate3d(0, 10px, 0); } 40%, 45% { opacity : 1; -webkit-transform : translate3d(0, -20px, 0); transform : translate3d(0, -20px, 0); } to { opacity : 0; -webkit-transform : translate3d(0, 2000px, 0); transform : translate3d(0, 2000px, 0); } } .bounceOutDown { -webkit-animation-name : bounceOutDown; animation-name : bounceOutDown; } @-webkit-keyframes bounceOutLeft { 20% { opacity : 1; -webkit-transform : translate3d(20px, 0, 0); transform : translate3d(20px, 0, 0); } to { opacity : 0; -webkit-transform : translate3d(-2000px, 0, 0); transform : translate3d(-2000px, 0, 0); } } @keyframes bounceOutLeft { 20% { opacity : 1; -webkit-transform : translate3d(20px, 0, 0); transform : translate3d(20px, 0, 0); } to { opacity : 0; -webkit-transform : translate3d(-2000px, 0, 0); transform : translate3d(-2000px, 0, 0); } } .bounceOutLeft { -webkit-animation-name : bounceOutLeft; animation-name : bounceOutLeft; } @-webkit-keyframes bounceOutRight { 20% { opacity : 1; -webkit-transform : translate3d(-20px, 0, 0); transform : translate3d(-20px, 0, 0); } to { opacity : 0; -webkit-transform : translate3d(2000px, 0, 0); transform : translate3d(2000px, 0, 0); } } @keyframes bounceOutRight { 20% { opacity : 1; -webkit-transform : translate3d(-20px, 0, 0); transform : translate3d(-20px, 0, 0); } to { opacity : 0; -webkit-transform : translate3d(2000px, 0, 0); transform : translate3d(2000px, 0, 0); } } .bounceOutRight { -webkit-animation-name : bounceOutRight; animation-name : bounceOutRight; } @-webkit-keyframes bounceOutUp { 20% { -webkit-transform : translate3d(0, -10px, 0); transform : translate3d(0, -10px, 0); } 40%, 45% { opacity : 1; -webkit-transform : translate3d(0, 20px, 0); transform : translate3d(0, 20px, 0); } to { opacity : 0; -webkit-transform : translate3d(0, -2000px, 0); transform : translate3d(0, -2000px, 0); } } @keyframes bounceOutUp { 20% { -webkit-transform : translate3d(0, -10px, 0); transform : translate3d(0, -10px, 0); } 40%, 45% { opacity : 1; -webkit-transform : translate3d(0, 20px, 0); transform : translate3d(0, 20px, 0); } to { opacity : 0; -webkit-transform : translate3d(0, -2000px, 0); transform : translate3d(0, -2000px, 0); } } .bounceOutUp { -webkit-animation-name : bounceOutUp; animation-name : bounceOutUp; } @-webkit-keyframes fadeIn { from { opacity : 0; } to { opacity : 1; } } @keyframes fadeIn { from { opacity : 0; } to { opacity : 1; } } .fadeIn { -webkit-animation-name : fadeIn; animation-name : fadeIn; } @-webkit-keyframes fadeInDown { from { opacity : 0; -webkit-transform : translate3d(0, -100%, 0); transform : translate3d(0, -100%, 0); } to { opacity : 1; -webkit-transform : none; transform : none; } } @keyframes fadeInDown { from { opacity : 0; -webkit-transform : translate3d(0, -100%, 0); transform : translate3d(0, -100%, 0); } to { opacity : 1; -webkit-transform : none; transform : none; } } .fadeInDown { -webkit-animation-name : fadeInDown; animation-name : fadeInDown; } @-webkit-keyframes fadeInDownBig { from { opacity : 0; -webkit-transform : translate3d(0, -2000px, 0); transform : translate3d(0, -2000px, 0); } to { opacity : 1; -webkit-transform : none; transform : none; } } @keyframes fadeInDownBig { from { opacity : 0; -webkit-transform : translate3d(0, -2000px, 0); transform : translate3d(0, -2000px, 0); } to { opacity : 1; -webkit-transform : none; transform : none; } } .fadeInDownBig { -webkit-animation-name : fadeInDownBig; animation-name : fadeInDownBig; } @-webkit-keyframes fadeInLeft { from { opacity : 0; -webkit-transform : translate3d(-100%, 0, 0); transform : translate3d(-100%, 0, 0); } to { opacity : 1; -webkit-transform : none; transform : none; } } @keyframes fadeInLeft { from { opacity : 0; -webkit-transform : translate3d(-100%, 0, 0); transform : translate3d(-100%, 0, 0); } to { opacity : 1; -webkit-transform : none; transform : none; } } .fadeInLeft { -webkit-animation-name : fadeInLeft; animation-name : fadeInLeft; } @-webkit-keyframes fadeInLeftBig { from { opacity : 0; -webkit-transform : translate3d(-2000px, 0, 0); transform : translate3d(-2000px, 0, 0); } to { opacity : 1; -webkit-transform : none; transform : none; } } @keyframes fadeInLeftBig { from { opacity : 0; -webkit-transform : translate3d(-2000px, 0, 0); transform : translate3d(-2000px, 0, 0); } to { opacity : 1; -webkit-transform : none; transform : none; } } .fadeInLeftBig { -webkit-animation-name : fadeInLeftBig; animation-name : fadeInLeftBig; } @-webkit-keyframes fadeInRight { from { opacity : 0; -webkit-transform : translate3d(100%, 0, 0); transform : translate3d(100%, 0, 0); } to { opacity : 1; -webkit-transform : none; transform : none; } } @keyframes fadeInRight { from { opacity : 0; -webkit-transform : translate3d(100%, 0, 0); transform : translate3d(100%, 0, 0); } to { opacity : 1; -webkit-transform : none; transform : none; } } .fadeInRight { -webkit-animation-name : fadeInRight; animation-name : fadeInRight; } @-webkit-keyframes fadeInRightBig { from { opacity : 0; -webkit-transform : translate3d(2000px, 0, 0); transform : translate3d(2000px, 0, 0); } to { opacity : 1; -webkit-transform : none; transform : none; } } @keyframes fadeInRightBig { from { opacity : 0; -webkit-transform : translate3d(2000px, 0, 0); transform : translate3d(2000px, 0, 0); } to { opacity : 1; -webkit-transform : none; transform : none; } } .fadeInRightBig { -webkit-animation-name : fadeInRightBig; animation-name : fadeInRightBig; } @-webkit-keyframes fadeInUp { from { opacity : 0; -webkit-transform : translate3d(0, 100%, 0); transform : translate3d(0, 100%, 0); } to { opacity : 1; -webkit-transform : none; transform : none; } } @keyframes fadeInUp { from { opacity : 0; -webkit-transform : translate3d(0, 100%, 0); transform : translate3d(0, 100%, 0); } to { opacity : 1; -webkit-transform : none; transform : none; } } .fadeInUp { -webkit-animation-name : fadeInUp; animation-name : fadeInUp; } @-webkit-keyframes fadeInUpBig { from { opacity : 0; -webkit-transform : translate3d(0, 2000px, 0); transform : translate3d(0, 2000px, 0); } to { opacity : 1; -webkit-transform : none; transform : none; } } @keyframes fadeInUpBig { from { opacity : 0; -webkit-transform : translate3d(0, 2000px, 0); transform : translate3d(0, 2000px, 0); } to { opacity : 1; -webkit-transform : none; transform : none; } } .fadeInUpBig { -webkit-animation-name : fadeInUpBig; animation-name : fadeInUpBig; } @-webkit-keyframes fadeOut { from { opacity : 1; } to { opacity : 0; } } @keyframes fadeOut { from { opacity : 1; } to { opacity : 0; } } .fadeOut { -webkit-animation-name : fadeOut; animation-name : fadeOut; } @-webkit-keyframes fadeOutDown { from { opacity : 1; } to { opacity : 0; -webkit-transform : translate3d(0, 100%, 0); transform : translate3d(0, 100%, 0); } } @keyframes fadeOutDown { from { opacity : 1; } to { opacity : 0; -webkit-transform : translate3d(0, 100%, 0); transform : translate3d(0, 100%, 0); } } .fadeOutDown { -webkit-animation-name : fadeOutDown; animation-name : fadeOutDown; } @-webkit-keyframes fadeOutDownBig { from { opacity : 1; } to { opacity : 0; -webkit-transform : translate3d(0, 2000px, 0); transform : translate3d(0, 2000px, 0); } } @keyframes fadeOutDownBig { from { opacity : 1; } to { opacity : 0; -webkit-transform : translate3d(0, 2000px, 0); transform : translate3d(0, 2000px, 0); } } .fadeOutDownBig { -webkit-animation-name : fadeOutDownBig; animation-name : fadeOutDownBig; } @-webkit-keyframes fadeOutLeft { from { opacity : 1; } to { opacity : 0; -webkit-transform : translate3d(-100%, 0, 0); transform : translate3d(-100%, 0, 0); } } @keyframes fadeOutLeft { from { opacity : 1; } to { opacity : 0; -webkit-transform : translate3d(-100%, 0, 0); transform : translate3d(-100%, 0, 0); } } .fadeOutLeft { -webkit-animation-name : fadeOutLeft; animation-name : fadeOutLeft; } @-webkit-keyframes fadeOutLeftBig { from { opacity : 1; } to { opacity : 0; -webkit-transform : translate3d(-2000px, 0, 0); transform : translate3d(-2000px, 0, 0); } } @keyframes fadeOutLeftBig { from { opacity : 1; } to { opacity : 0; -webkit-transform : translate3d(-2000px, 0, 0); transform : translate3d(-2000px, 0, 0); } } .fadeOutLeftBig { -webkit-animation-name : fadeOutLeftBig; animation-name : fadeOutLeftBig; } @-webkit-keyframes fadeOutRight { from { opacity : 1; } to { opacity : 0; -webkit-transform : translate3d(100%, 0, 0); transform : translate3d(100%, 0, 0); } } @keyframes fadeOutRight { from { opacity : 1; } to { opacity : 0; -webkit-transform : translate3d(100%, 0, 0); transform : translate3d(100%, 0, 0); } } .fadeOutRight { -webkit-animation-name : fadeOutRight; animation-name : fadeOutRight; } @-webkit-keyframes fadeOutRightBig { from { opacity : 1; } to { opacity : 0; -webkit-transform : translate3d(2000px, 0, 0); transform : translate3d(2000px, 0, 0); } } @keyframes fadeOutRightBig { from { opacity : 1; } to { opacity : 0; -webkit-transform : translate3d(2000px, 0, 0); transform : translate3d(2000px, 0, 0); } } .fadeOutRightBig { -webkit-animation-name : fadeOutRightBig; animation-name : fadeOutRightBig; } @-webkit-keyframes fadeOutUp { from { opacity : 1; } to { opacity : 0; -webkit-transform : translate3d(0, -100%, 0); transform : translate3d(0, -100%, 0); } } @keyframes fadeOutUp { from { opacity : 1; } to { opacity : 0; -webkit-transform : translate3d(0, -100%, 0); transform : translate3d(0, -100%, 0); } } .fadeOutUp { -webkit-animation-name : fadeOutUp; animation-name : fadeOutUp; } @-webkit-keyframes fadeOutUpBig { from { opacity : 1; } to { opacity : 0; -webkit-transform : translate3d(0, -2000px, 0); transform : translate3d(0, -2000px, 0); } } @keyframes fadeOutUpBig { from { opacity : 1; } to { opacity : 0; -webkit-transform : translate3d(0, -2000px, 0); transform : translate3d(0, -2000px, 0); } } .fadeOutUpBig { -webkit-animation-name : fadeOutUpBig; animation-name : fadeOutUpBig; } @-webkit-keyframes flip { from { -webkit-transform : perspective(400px) rotate3d(0, 1, 0, -360deg); transform : perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function : ease-out; animation-timing-function : ease-out; } 40% { -webkit-transform : perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform : perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function : ease-out; animation-timing-function : ease-out; } 50% { -webkit-transform : perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform : perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function : ease-in; animation-timing-function : ease-in; } 80% { -webkit-transform : perspective(400px) scale3d(.95, .95, .95); transform : perspective(400px) scale3d(.95, .95, .95); -webkit-animation-timing-function : ease-in; animation-timing-function : ease-in; } to { -webkit-transform : perspective(400px); transform : perspective(400px); -webkit-animation-timing-function : ease-in; animation-timing-function : ease-in; } } @keyframes flip { from { -webkit-transform : perspective(400px) rotate3d(0, 1, 0, -360deg); transform : perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function : ease-out; animation-timing-function : ease-out; } 40% { -webkit-transform : perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform : perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function : ease-out; animation-timing-function : ease-out; } 50% { -webkit-transform : perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform : perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function : ease-in; animation-timing-function : ease-in; } 80% { -webkit-transform : perspective(400px) scale3d(.95, .95, .95); transform : perspective(400px) scale3d(.95, .95, .95); -webkit-animation-timing-function : ease-in; animation-timing-function : ease-in; } to { -webkit-transform : perspective(400px); transform : perspective(400px); -webkit-animation-timing-function : ease-in; animation-timing-function : ease-in; } } .animated.flip { -webkit-backface-visibility : visible; backface-visibility : visible; -webkit-animation-name : flip; animation-name : flip; } @-webkit-keyframes flipInX { from { -webkit-transform : perspective(400px) rotate3d(1, 0, 0, 90deg); transform : perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function : ease-in; animation-timing-function : ease-in; opacity : 0; } 40% { -webkit-transform : perspective(400px) rotate3d(1, 0, 0, -20deg); transform : perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function : ease-in; animation-timing-function : ease-in; } 60% { -webkit-transform : perspective(400px) rotate3d(1, 0, 0, 10deg); transform : perspective(400px) rotate3d(1, 0, 0, 10deg); opacity : 1; } 80% { -webkit-transform : perspective(400px) rotate3d(1, 0, 0, -5deg); transform : perspective(400px) rotate3d(1, 0, 0, -5deg); } to { -webkit-transform : perspective(400px); transform : perspective(400px); } } @keyframes flipInX { from { -webkit-transform : perspective(400px) rotate3d(1, 0, 0, 90deg); transform : perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function : ease-in; animation-timing-function : ease-in; opacity : 0; } 40% { -webkit-transform : perspective(400px) rotate3d(1, 0, 0, -20deg); transform : perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function : ease-in; animation-timing-function : ease-in; } 60% { -webkit-transform : perspective(400px) rotate3d(1, 0, 0, 10deg); transform : perspective(400px) rotate3d(1, 0, 0, 10deg); opacity : 1; } 80% { -webkit-transform : perspective(400px) rotate3d(1, 0, 0, -5deg); transform : perspective(400px) rotate3d(1, 0, 0, -5deg); } to { -webkit-transform : perspective(400px); transform : perspective(400px); } } .flipInX { -webkit-backface-visibility : visible !important; backface-visibility : visible !important; -webkit-animation-name : flipInX; animation-name : flipInX; } @-webkit-keyframes flipInY { from { -webkit-transform : perspective(400px) rotate3d(0, 1, 0, 90deg); transform : perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function : ease-in; animation-timing-function : ease-in; opacity : 0; } 40% { -webkit-transform : perspective(400px) rotate3d(0, 1, 0, -20deg); transform : perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function : ease-in; animation-timing-function : ease-in; } 60% { -webkit-transform : perspective(400px) rotate3d(0, 1, 0, 10deg); transform : perspective(400px) rotate3d(0, 1, 0, 10deg); opacity : 1; } 80% { -webkit-transform : perspective(400px) rotate3d(0, 1, 0, -5deg); transform : perspective(400px) rotate3d(0, 1, 0, -5deg); } to { -webkit-transform : perspective(400px); transform : perspective(400px); } } @keyframes flipInY { from { -webkit-transform : perspective(400px) rotate3d(0, 1, 0, 90deg); transform : perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function : ease-in; animation-timing-function : ease-in; opacity : 0; } 40% { -webkit-transform : perspective(400px) rotate3d(0, 1, 0, -20deg); transform : perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function : ease-in; animation-timing-function : ease-in; } 60% { -webkit-transform : perspective(400px) rotate3d(0, 1, 0, 10deg); transform : perspective(400px) rotate3d(0, 1, 0, 10deg); opacity : 1; } 80% { -webkit-transform : perspective(400px) rotate3d(0, 1, 0, -5deg); transform : perspective(400px) rotate3d(0, 1, 0, -5deg); } to { -webkit-transform : perspective(400px); transform : perspective(400px); } } .flipInY { -webkit-backface-visibility : visible !important; backface-visibility : visible !important; -webkit-animation-name : flipInY; animation-name : flipInY; } @-webkit-keyframes flipOutX { from { -webkit-transform : perspective(400px); transform : perspective(400px); } 30% { -webkit-transform : perspective(400px) rotate3d(1, 0, 0, -20deg); transform : perspective(400px) rotate3d(1, 0, 0, -20deg); opacity : 1; } to { -webkit-transform : perspective(400px) rotate3d(1, 0, 0, 90deg); transform : perspective(400px) rotate3d(1, 0, 0, 90deg); opacity : 0; } } @keyframes flipOutX { from { -webkit-transform : perspective(400px); transform : perspective(400px); } 30% { -webkit-transform : perspective(400px) rotate3d(1, 0, 0, -20deg); transform : perspective(400px) rotate3d(1, 0, 0, -20deg); opacity : 1; } to { -webkit-transform : perspective(400px) rotate3d(1, 0, 0, 90deg); transform : perspective(400px) rotate3d(1, 0, 0, 90deg); opacity : 0; } } .flipOutX { -webkit-animation-name : flipOutX; animation-name : flipOutX; -webkit-backface-visibility : visible !important; backface-visibility : visible !important; } @-webkit-keyframes flipOutY { from { -webkit-transform : perspective(400px); transform : perspective(400px); } 30% { -webkit-transform : perspective(400px) rotate3d(0, 1, 0, -15deg); transform : perspective(400px) rotate3d(0, 1, 0, -15deg); opacity : 1; } to { -webkit-transform : perspective(400px) rotate3d(0, 1, 0, 90deg); transform : perspective(400px) rotate3d(0, 1, 0, 90deg); opacity : 0; } } @keyframes flipOutY { from { -webkit-transform : perspective(400px); transform : perspective(400px); } 30% { -webkit-transform : perspective(400px) rotate3d(0, 1, 0, -15deg); transform : perspective(400px) rotate3d(0, 1, 0, -15deg); opacity : 1; } to { -webkit-transform : perspective(400px) rotate3d(0, 1, 0, 90deg); transform : perspective(400px) rotate3d(0, 1, 0, 90deg); opacity : 0; } } .flipOutY { -webkit-backface-visibility : visible !important; backface-visibility : visible !important; -webkit-animation-name : flipOutY; animation-name : flipOutY; } @-webkit-keyframes lightSpeedIn { from { -webkit-transform : translate3d(100%, 0, 0) skewX(-30deg); transform : translate3d(100%, 0, 0) skewX(-30deg); opacity : 0; } 60% { -webkit-transform : skewX(20deg); transform : skewX(20deg); opacity : 1; } 80% { -webkit-transform : skewX(-5deg); transform : skewX(-5deg); opacity : 1; } to { -webkit-transform : none; transform : none; opacity : 1; } } @keyframes lightSpeedIn { from { -webkit-transform : translate3d(100%, 0, 0) skewX(-30deg); transform : translate3d(100%, 0, 0) skewX(-30deg); opacity : 0; } 60% { -webkit-transform : skewX(20deg); transform : skewX(20deg); opacity : 1; } 80% { -webkit-transform : skewX(-5deg); transform : skewX(-5deg); opacity : 1; } to { -webkit-transform : none; transform : none; opacity : 1; } } .lightSpeedIn { -webkit-animation-name : lightSpeedIn; animation-name : lightSpeedIn; -webkit-animation-timing-function : ease-out; animation-timing-function : ease-out; } @-webkit-keyframes lightSpeedOut { from { opacity : 1; } to { -webkit-transform : translate3d(100%, 0, 0) skewX(30deg); transform : translate3d(100%, 0, 0) skewX(30deg); opacity : 0; } } @keyframes lightSpeedOut { from { opacity : 1; } to { -webkit-transform : translate3d(100%, 0, 0) skewX(30deg); transform : translate3d(100%, 0, 0) skewX(30deg); opacity : 0; } } .lightSpeedOut { -webkit-animation-name : lightSpeedOut; animation-name : lightSpeedOut; -webkit-animation-timing-function : ease-in; animation-timing-function : ease-in; } @-webkit-keyframes rotateIn { from { -webkit-transform-origin : center; transform-origin : center; -webkit-transform : rotate3d(0, 0, 1, -200deg); transform : rotate3d(0, 0, 1, -200deg); opacity : 0; } to { -webkit-transform-origin : center; transform-origin : center; -webkit-transform : none; transform : none; opacity : 1; } } @keyframes rotateIn { from { -webkit-transform-origin : center; transform-origin : center; -webkit-transform : rotate3d(0, 0, 1, -200deg); transform : rotate3d(0, 0, 1, -200deg); opacity : 0; } to { -webkit-transform-origin : center; transform-origin : center; -webkit-transform : none; transform : none; opacity : 1; } } .rotateIn { -webkit-animation-name : rotateIn; animation-name : rotateIn; } @-webkit-keyframes rotateInDownLeft { from { -webkit-transform-origin : left bottom; transform-origin : left bottom; -webkit-transform : rotate3d(0, 0, 1, -45deg); transform : rotate3d(0, 0, 1, -45deg); opacity : 0; } to { -webkit-transform-origin : left bottom; transform-origin : left bottom; -webkit-transform : none; transform : none; opacity : 1; } } @keyframes rotateInDownLeft { from { -webkit-transform-origin : left bottom; transform-origin : left bottom; -webkit-transform : rotate3d(0, 0, 1, -45deg); transform : rotate3d(0, 0, 1, -45deg); opacity : 0; } to { -webkit-transform-origin : left bottom; transform-origin : left bottom; -webkit-transform : none; transform : none; opacity : 1; } } .rotateInDownLeft { -webkit-animation-name : rotateInDownLeft; animation-name : rotateInDownLeft; } @-webkit-keyframes rotateInDownRight { from { -webkit-transform-origin : right bottom; transform-origin : right bottom; -webkit-transform : rotate3d(0, 0, 1, 45deg); transform : rotate3d(0, 0, 1, 45deg); opacity : 0; } to { -webkit-transform-origin : right bottom; transform-origin : right bottom; -webkit-transform : none; transform : none; opacity : 1; } } @keyframes rotateInDownRight { from { -webkit-transform-origin : right bottom; transform-origin : right bottom; -webkit-transform : rotate3d(0, 0, 1, 45deg); transform : rotate3d(0, 0, 1, 45deg); opacity : 0; } to { -webkit-transform-origin : right bottom; transform-origin : right bottom; -webkit-transform : none; transform : none; opacity : 1; } } .rotateInDownRight { -webkit-animation-name : rotateInDownRight; animation-name : rotateInDownRight; } @-webkit-keyframes rotateInUpLeft { from { -webkit-transform-origin : left bottom; transform-origin : left bottom; -webkit-transform : rotate3d(0, 0, 1, 45deg); transform : rotate3d(0, 0, 1, 45deg); opacity : 0; } to { -webkit-transform-origin : left bottom; transform-origin : left bottom; -webkit-transform : none; transform : none; opacity : 1; } } @keyframes rotateInUpLeft { from { -webkit-transform-origin : left bottom; transform-origin : left bottom; -webkit-transform : rotate3d(0, 0, 1, 45deg); transform : rotate3d(0, 0, 1, 45deg); opacity : 0; } to { -webkit-transform-origin : left bottom; transform-origin : left bottom; -webkit-transform : none; transform : none; opacity : 1; } } .rotateInUpLeft { -webkit-animation-name : rotateInUpLeft; animation-name : rotateInUpLeft; } @-webkit-keyframes rotateInUpRight { from { -webkit-transform-origin : right bottom; transform-origin : right bottom; -webkit-transform : rotate3d(0, 0, 1, -90deg); transform : rotate3d(0, 0, 1, -90deg); opacity : 0; } to { -webkit-transform-origin : right bottom; transform-origin : right bottom; -webkit-transform : none; transform : none; opacity : 1; } } @keyframes rotateInUpRight { from { -webkit-transform-origin : right bottom; transform-origin : right bottom; -webkit-transform : rotate3d(0, 0, 1, -90deg); transform : rotate3d(0, 0, 1, -90deg); opacity : 0; } to { -webkit-transform-origin : right bottom; transform-origin : right bottom; -webkit-transform : none; transform : none; opacity : 1; } } .rotateInUpRight { -webkit-animation-name : rotateInUpRight; animation-name : rotateInUpRight; } @-webkit-keyframes rotateOut { from { -webkit-transform-origin : center; transform-origin : center; opacity : 1; } to { -webkit-transform-origin : center; transform-origin : center; -webkit-transform : rotate3d(0, 0, 1, 200deg); transform : rotate3d(0, 0, 1, 200deg); opacity : 0; } } @keyframes rotateOut { from { -webkit-transform-origin : center; transform-origin : center; opacity : 1; } to { -webkit-transform-origin : center; transform-origin : center; -webkit-transform : rotate3d(0, 0, 1, 200deg); transform : rotate3d(0, 0, 1, 200deg); opacity : 0; } } .rotateOut { -webkit-animation-name : rotateOut; animation-name : rotateOut; } @-webkit-keyframes rotateOutDownLeft { from { -webkit-transform-origin : left bottom; transform-origin : left bottom; opacity : 1; } to { -webkit-transform-origin : left bottom; transform-origin : left bottom; -webkit-transform : rotate3d(0, 0, 1, 45deg); transform : rotate3d(0, 0, 1, 45deg); opacity : 0; } } @keyframes rotateOutDownLeft { from { -webkit-transform-origin : left bottom; transform-origin : left bottom; opacity : 1; } to { -webkit-transform-origin : left bottom; transform-origin : left bottom; -webkit-transform : rotate3d(0, 0, 1, 45deg); transform : rotate3d(0, 0, 1, 45deg); opacity : 0; } } .rotateOutDownLeft { -webkit-animation-name : rotateOutDownLeft; animation-name : rotateOutDownLeft; } @-webkit-keyframes rotateOutDownRight { from { -webkit-transform-origin : right bottom; transform-origin : right bottom; opacity : 1; } to { -webkit-transform-origin : right bottom; transform-origin : right bottom; -webkit-transform : rotate3d(0, 0, 1, -45deg); transform : rotate3d(0, 0, 1, -45deg); opacity : 0; } } @keyframes rotateOutDownRight { from { -webkit-transform-origin : right bottom; transform-origin : right bottom; opacity : 1; } to { -webkit-transform-origin : right bottom; transform-origin : right bottom; -webkit-transform : rotate3d(0, 0, 1, -45deg); transform : rotate3d(0, 0, 1, -45deg); opacity : 0; } } .rotateOutDownRight { -webkit-animation-name : rotateOutDownRight; animation-name : rotateOutDownRight; } @-webkit-keyframes rotateOutUpLeft { from { -webkit-transform-origin : left bottom; transform-origin : left bottom; opacity : 1; } to { -webkit-transform-origin : left bottom; transform-origin : left bottom; -webkit-transform : rotate3d(0, 0, 1, -45deg); transform : rotate3d(0, 0, 1, -45deg); opacity : 0; } } @keyframes rotateOutUpLeft { from { -webkit-transform-origin : left bottom; transform-origin : left bottom; opacity : 1; } to { -webkit-transform-origin : left bottom; transform-origin : left bottom; -webkit-transform : rotate3d(0, 0, 1, -45deg); transform : rotate3d(0, 0, 1, -45deg); opacity : 0; } } .rotateOutUpLeft { -webkit-animation-name : rotateOutUpLeft; animation-name : rotateOutUpLeft; } @-webkit-keyframes rotateOutUpRight { from { -webkit-transform-origin : right bottom; transform-origin : right bottom; opacity : 1; } to { -webkit-transform-origin : right bottom; transform-origin : right bottom; -webkit-transform : rotate3d(0, 0, 1, 90deg); transform : rotate3d(0, 0, 1, 90deg); opacity : 0; } } @keyframes rotateOutUpRight { from { -webkit-transform-origin : right bottom; transform-origin : right bottom; opacity : 1; } to { -webkit-transform-origin : right bottom; transform-origin : right bottom; -webkit-transform : rotate3d(0, 0, 1, 90deg); transform : rotate3d(0, 0, 1, 90deg); opacity : 0; } } .rotateOutUpRight { -webkit-animation-name : rotateOutUpRight; animation-name : rotateOutUpRight; } @-webkit-keyframes hinge { 0% { -webkit-transform-origin : top left; transform-origin : top left; -webkit-animation-timing-function : ease-in-out; animation-timing-function : ease-in-out; } 20%, 60% { -webkit-transform : rotate3d(0, 0, 1, 80deg); transform : rotate3d(0, 0, 1, 80deg); -webkit-transform-origin : top left; transform-origin : top left; -webkit-animation-timing-function : ease-in-out; animation-timing-function : ease-in-out; } 40%, 80% { -webkit-transform : rotate3d(0, 0, 1, 60deg); transform : rotate3d(0, 0, 1, 60deg); -webkit-transform-origin : top left; transform-origin : top left; -webkit-animation-timing-function : ease-in-out; animation-timing-function : ease-in-out; opacity : 1; } to { -webkit-transform : translate3d(0, 700px, 0); transform : translate3d(0, 700px, 0); opacity : 0; } } @keyframes hinge { 0% { -webkit-transform-origin : top left; transform-origin : top left; -webkit-animation-timing-function : ease-in-out; animation-timing-function : ease-in-out; } 20%, 60% { -webkit-transform : rotate3d(0, 0, 1, 80deg); transform : rotate3d(0, 0, 1, 80deg); -webkit-transform-origin : top left; transform-origin : top left; -webkit-animation-timing-function : ease-in-out; animation-timing-function : ease-in-out; } 40%, 80% { -webkit-transform : rotate3d(0, 0, 1, 60deg); transform : rotate3d(0, 0, 1, 60deg); -webkit-transform-origin : top left; transform-origin : top left; -webkit-animation-timing-function : ease-in-out; animation-timing-function : ease-in-out; opacity : 1; } to { -webkit-transform : translate3d(0, 700px, 0); transform : translate3d(0, 700px, 0); opacity : 0; } } .hinge { -webkit-animation-name : hinge; animation-name : hinge; } /* 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 : none; transform : none; } } @keyframes rollIn { from { opacity : 0; -webkit-transform : translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform : translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } to { opacity : 1; -webkit-transform : none; transform : none; } } .rollIn { -webkit-animation-name : rollIn; animation-name : rollIn; } /* 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(.3, .3, .3); transform : scale3d(.3, .3, .3); } 50% { opacity : 1; } } @keyframes zoomIn { from { opacity : 0; -webkit-transform : scale3d(.3, .3, .3); transform : scale3d(.3, .3, .3); } 50% { opacity : 1; } } .zoomIn { -webkit-animation-name : zoomIn; animation-name : zoomIn; } @-webkit-keyframes zoomInDown { from { opacity : 0; -webkit-transform : scale3d(.1, .1, .1) translate3d(0, -1000px, 0); transform : scale3d(.1, .1, .1) translate3d(0, -1000px, 0); -webkit-animation-timing-function : cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function : cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity : 1; -webkit-transform : scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform : scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function : cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function : cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInDown { from { opacity : 0; -webkit-transform : scale3d(.1, .1, .1) translate3d(0, -1000px, 0); transform : scale3d(.1, .1, .1) translate3d(0, -1000px, 0); -webkit-animation-timing-function : cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function : cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity : 1; -webkit-transform : scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform : scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function : cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function : cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInDown { -webkit-animation-name : zoomInDown; animation-name : zoomInDown; } @-webkit-keyframes zoomInLeft { from { opacity : 0; -webkit-transform : scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); transform : scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function : cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function : cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity : 1; -webkit-transform : scale3d(.475, .475, .475) translate3d(10px, 0, 0); transform : scale3d(.475, .475, .475) translate3d(10px, 0, 0); -webkit-animation-timing-function : cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function : cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInLeft { from { opacity : 0; -webkit-transform : scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); transform : scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function : cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function : cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity : 1; -webkit-transform : scale3d(.475, .475, .475) translate3d(10px, 0, 0); transform : scale3d(.475, .475, .475) translate3d(10px, 0, 0); -webkit-animation-timing-function : cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function : cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInLeft { -webkit-animation-name : zoomInLeft; animation-name : zoomInLeft; } @-webkit-keyframes zoomInRight { from { opacity : 0; -webkit-transform : scale3d(.1, .1, .1) translate3d(1000px, 0, 0); transform : scale3d(.1, .1, .1) translate3d(1000px, 0, 0); -webkit-animation-timing-function : cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function : cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity : 1; -webkit-transform : scale3d(.475, .475, .475) translate3d(-10px, 0, 0); transform : scale3d(.475, .475, .475) translate3d(-10px, 0, 0); -webkit-animation-timing-function : cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function : cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInRight { from { opacity : 0; -webkit-transform : scale3d(.1, .1, .1) translate3d(1000px, 0, 0); transform : scale3d(.1, .1, .1) translate3d(1000px, 0, 0); -webkit-animation-timing-function : cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function : cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity : 1; -webkit-transform : scale3d(.475, .475, .475) translate3d(-10px, 0, 0); transform : scale3d(.475, .475, .475) translate3d(-10px, 0, 0); -webkit-animation-timing-function : cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function : cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInRight { -webkit-animation-name : zoomInRight; animation-name : zoomInRight; } @-webkit-keyframes zoomInUp { from { opacity : 0; -webkit-transform : scale3d(.1, .1, .1) translate3d(0, 1000px, 0); transform : scale3d(.1, .1, .1) translate3d(0, 1000px, 0); -webkit-animation-timing-function : cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function : cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity : 1; -webkit-transform : scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform : scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function : cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function : cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInUp { from { opacity : 0; -webkit-transform : scale3d(.1, .1, .1) translate3d(0, 1000px, 0); transform : scale3d(.1, .1, .1) translate3d(0, 1000px, 0); -webkit-animation-timing-function : cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function : cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity : 1; -webkit-transform : scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform : scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function : cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function : cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInUp { -webkit-animation-name : zoomInUp; animation-name : zoomInUp; } @-webkit-keyframes zoomOut { from { opacity : 1; } 50% { opacity : 0; -webkit-transform : scale3d(.3, .3, .3); transform : scale3d(.3, .3, .3); } to { opacity : 0; } } @keyframes zoomOut { from { opacity : 1; } 50% { opacity : 0; -webkit-transform : scale3d(.3, .3, .3); transform : scale3d(.3, .3, .3); } to { opacity : 0; } } .zoomOut { -webkit-animation-name : zoomOut; animation-name : zoomOut; } @-webkit-keyframes zoomOutDown { 40% { opacity : 1; -webkit-transform : scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform : scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function : cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function : cubic-bezier(0.550, 0.055, 0.675, 0.190); } to { opacity : 0; -webkit-transform : scale3d(.1, .1, .1) translate3d(0, 2000px, 0); transform : scale3d(.1, .1, .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.320, 1); animation-timing-function : cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomOutDown { 40% { opacity : 1; -webkit-transform : scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform : scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function : cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function : cubic-bezier(0.550, 0.055, 0.675, 0.190); } to { opacity : 0; -webkit-transform : scale3d(.1, .1, .1) translate3d(0, 2000px, 0); transform : scale3d(.1, .1, .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.320, 1); animation-timing-function : cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomOutDown { -webkit-animation-name : zoomOutDown; animation-name : zoomOutDown; } @-webkit-keyframes zoomOutLeft { 40% { opacity : 1; -webkit-transform : scale3d(.475, .475, .475) translate3d(42px, 0, 0); transform : scale3d(.475, .475, .475) translate3d(42px, 0, 0); } to { opacity : 0; -webkit-transform : scale(.1) translate3d(-2000px, 0, 0); transform : scale(.1) translate3d(-2000px, 0, 0); -webkit-transform-origin : left center; transform-origin : left center; } } @keyframes zoomOutLeft { 40% { opacity : 1; -webkit-transform : scale3d(.475, .475, .475) translate3d(42px, 0, 0); transform : scale3d(.475, .475, .475) translate3d(42px, 0, 0); } to { opacity : 0; -webkit-transform : scale(.1) translate3d(-2000px, 0, 0); transform : scale(.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(.475, .475, .475) translate3d(-42px, 0, 0); transform : scale3d(.475, .475, .475) translate3d(-42px, 0, 0); } to { opacity : 0; -webkit-transform : scale(.1) translate3d(2000px, 0, 0); transform : scale(.1) translate3d(2000px, 0, 0); -webkit-transform-origin : right center; transform-origin : right center; } } @keyframes zoomOutRight { 40% { opacity : 1; -webkit-transform : scale3d(.475, .475, .475) translate3d(-42px, 0, 0); transform : scale3d(.475, .475, .475) translate3d(-42px, 0, 0); } to { opacity : 0; -webkit-transform : scale(.1) translate3d(2000px, 0, 0); transform : scale(.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(.475, .475, .475) translate3d(0, 60px, 0); transform : scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function : cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function : cubic-bezier(0.550, 0.055, 0.675, 0.190); } to { opacity : 0; -webkit-transform : scale3d(.1, .1, .1) translate3d(0, -2000px, 0); transform : scale3d(.1, .1, .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.320, 1); animation-timing-function : cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomOutUp { 40% { opacity : 1; -webkit-transform : scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform : scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function : cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function : cubic-bezier(0.550, 0.055, 0.675, 0.190); } to { opacity : 0; -webkit-transform : scale3d(.1, .1, .1) translate3d(0, -2000px, 0); transform : scale3d(.1, .1, .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.320, 1); animation-timing-function : cubic-bezier(0.175, 0.885, 0.320, 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; } /*Lof_Faq/css/styles.css*/ #faqpage .question-answer { margin-bottom : 15px; margin-left : 25px; } .question-list .panel-title a { padding-left : 5px; } .question-list .panel-heading.collapsed a { font-weight : 400; } .question-list a:hover, .question-list .panel-title > a:focus { text-decoration : none; } .question-list .panel-title > a { color : #3399CC } .question-list .panel-collapse { padding-left : 0; } .question-list .panel-body { padding : 10px; overflow : hidden; } .question-meta { font-size : 0.9em; margin-top : 5px; } .faq-toolbar .pages { float : right } #faqpage ul { list-style : none; padding : 0; margin : 0; } .faq-loading { background : url('../../../../../frontend/Magento/luma/en_US/Lof_Faq/images/loading.gif') center 50px no-repeat; } .faq-loading #faqpage { opacity : 0.6; } .lof-faq { min-height : 200px; float : left; width : 100%; padding-bottom : 50px; } .question-list .panel-heading { padding-left : 0; border-radius : 0; border : 1px solid #CCCCCC; padding-top : 0; padding-bottom : 0; cursor : pointer; } .question-list { overflow : hidden; } .faqcategory-sidebar.block { border : 1px solid #CCCCCC; margin-top : 6px; float : left; width : 100%; } .faqcategory-sidebar .block-title { border-bottom : 1px solid #CCCCCC; padding : 7px 10px 7px 10px; background-color : #F4F4F4; color : #636363; text-transform : uppercase; } .faqcategory-sidebar ul { list-style : none; padding : 10px; margin : 0; } #faq-search .faqkeyword:focus { box-shadow : none; border-color : #3399CC } #faq-search .faqkeyword { width : 100%; float : left; padding : 12px 80px 12px 10px; height : 36px; } #faq-search .btn-submit { background : #3399CC; box-shadow : none; color : #FFFFFF; border : 0; border-radius : 0; position : absolute; right : 0; padding : 12px 15px; height : 36px; } #faq-search .btn-submit:hover { background : #2E8AB8 } #faq-search label { width : 110px; font-size : 1.2em; font-weight : normal; float : left; padding : 10px 0 } .faqcategory-sidebar a { color : #3399CC } .faqcategory-sidebar a:hover { color : #2E8AB8; text-decoration : none; } .lof-faq a { color : #3399CC; } .lof-faq a:hover { color : #2E8AB8; } .lof-faq h3 { font-weight : normal; } .faqcat-block { margin-bottom : 15px; padding-bottom : 5px; } .faqcat-block .row { margin-left : -15px; margin-right : -15px; } #faqpage .faqcat-block:last-child { margin-bottom : 0; border-bottom : 0 } .ask-question-form h2.legend { text-align : center; font-weight : bold; text-transform : uppercase; } .popquestion .input-text { border : 1px solid #C0C0C0; padding : 5px; width : 100% !important; max-width : 100%; } .popquestion { border : 6px solid #F4F4F4; padding : 20px 20px 50px 20px; margin : 10px; } .popquestion em { color : #FF2525; font-weight : normal } .popquestion .input-box::after { content : ""; display : table; clear : both; } .popquestion ul { margin : 0; padding : 0; list-style : none } .popquestion textarea { min-height : 200px } #faqpage.question-list { padding : 0; } .faqcategory-sidebar.block .question-list .panel-collapse { padding : 0 } .faqcat-image { margin-bottom : 20px; } .faq-cat-title { margin-top : 0 } .faqcat-block .question-list { padding-left : 0 } .faqcat-block h3 { color : #3399CC; } .catalog-product-view .btnfancy { background-image : none; background : #1979C3; border : 1px solid #1979C3; color : #FFFFFF; cursor : pointer; display : inline-block; font-weight : 600; padding : 7px 15px; font-size : 1.4rem; box-sizing : border-box; vertical-align : middle; float : right; } .catalog-product-view .lof-faq { float : left; width : 100%; } .question-list .collapse { display : none; padding-left : 0; overflow : hidden; } .question-list .collapse.in { display : block; } .question-list .collapsing { position : relative; height : 0; overflow : hidden; -webkit-transition-timing-function : ease; -o-transition-timing-function : ease; transition-timing-function : ease; -webkit-transition-duration : .35s; -o-transition-duration : .35s; transition-duration : .35s; -webkit-transition-property : height, visibility; -o-transition-property : height, visibility; transition-property : height, visibility; } #faq-questions-featured { padding-top : 0 } #faq-search { float : left; width : 100%; margin-bottom : 30px; position : relative; } .question-list .panel-title { padding : 10px 0 10px 15px; margin : 0; font-size : 14px; line-height : 1.2; } .question-list .panel-title .question-icon { color : #000000; } #faq-search .main-form { float : left; width : 100%; } .question-list .panel { margin-bottom : 5px; } .loffaq-tag-view .panel-title a, .question-list1 .panel-title a, .question-list2 .panel-title a { padding-left : 25px; background : url('../../../../../frontend/Magento/luma/en_US/Lof_Faq/images/minus-icon.png') no-repeat 0px 45%; } .loffaq-tag-view .panel-title a.collapsed, .question-list1 .panel-heading a.collapsed, .question-list2 .panel-heading a.collapsed { background : url('../../../../../frontend/Magento/luma/en_US/Lof_Faq/images/plus-icon.png') no-repeat 0px 45%; padding-left : 25px; font-weight : 400; } .catalog-product-view .faqcat-block { border-bottom : 0 } .faqlike-sidebar .faq-widget-content .postags li { -webkit-border-radius : 4px; -moz-border-radius : 4px; border-radius : 4px; background : #F5F5F5; display : inline-block; padding : 4px 6px !important; margin : 2px 0; font-size : 13px; text-transform : uppercase; margin-right : 3px; float : left; margin-bottom : 3px; } .faqlike-sidebar { float : left; width : 100%; } .faqlike-sidebar .postags { float : left; } .faqlike-sidebar .faq-widget-content .postags li:hover { background : #4DB2EC; color : #FFFFFF; } .faqlike-sidebar .faq-widget-content .postags li:hover a { color : #FFFFFF } .lof-faq-social .icon i { color : #FFFFFF; } .lof-faq-social .icon { width : 35px; height : 35px; line-height : 35px; border-radius : 50%; display : inline-block; text-align : center; margin-left : 5px; } .lof-faq-social .addthis_button_facebook { background : #3B5998; } .lof-faq-social .addthis_button_google { background : #DD4B39; } .lof-faq-social .addthis_button_instagram_follow { background : #517FA4; } .lof-faq-social .addthis_button_twitter { background : #00ACED; } .lof-faq-social .addthis_button_linkedin { background : #0077B5; } .lof-faq-social .addthis_button_pinterest_share { background : #CB2027; } .lof-faq-social .addthis_button_compact { background : #F1703D; } .lof-faq-social { float : left; padding-left : 75px; } .lof-faq-details .question-detail { margin-bottom : 30px; } .lof-faq-details #like-dislike { float : left; width : 50%; margin : 0px 0px 10px 0px; } .lof-faq-details .like-text { font-weight : 600; float : left; padding : 8px 8px 8px 0px; } .lof-faq-details .like-button { float : left; } .lof-faq-details .post-error { color : #DA2531; margin-top : 6px; } .lof-faq-details .post-success { color : #5CB85C; margin-top : 6px; } .lof-faq-details .post-tag a:hover:before { border-right-color : #4DB2EC; } .lof-faq-details .post-tag a:before { border-top : 12px solid transparent; border-right : 8px solid #444444; border-bottom : 10px solid transparent; content : ""; height : 0; position : absolute; top : 0; left : -8px; width : 0; -webkit-transition : all .2s linear; -moz-transition : all .2s linear; -ms-transition : all .2s linear; -o-transition : all .2s linear; transition : all .2s linear; } .lof-faq-details .post-tag a:after { background-color : #FFFFFF; border-radius : 50%; content : ""; height : 4px; position : absolute; top : 8px; left : -2px; width : 4px; } .lof-faq-details .post-tag a:hover { background : #4DB2EC; color : #FFFFFF; text-decoration : none; } .lof-faq-details .post-tag a { background-color : #444444; border-radius : 0 2px 2px 0; color : #FFFFFF; display : inline-block; font-size : 11px; line-height : 15px; margin : 0 0 2px 10px; padding : 4px 7px 3px; position : relative; text-transform : uppercase; -webkit-transition : all .2s linear; -moz-transition : all .2s linear; -ms-transition : all .2s linear; -o-transition : all .2s linear; transition : all .2s linear; } .faq-tags-details { width : 100%; float : left; } .faq-tags-title { padding-right : 20px; } .faqform-loading.ajax-loading { background : rgba(0, 0, 0, 0) url("../../../../../frontend/Magento/luma/en_US/Lof_Faq/images/loading_more.gif") repeat scroll center center; height : 27px; left : 50%; position : fixed; top : 50%; width : 27px; z-index : 9999; } .lof-faq h3.faqcat-title { margin-top : 0; margin-bottom : 1em; padding-bottom : 0.25em; border-bottom : 1px solid #DDDDDD; position : relative; font-weight : normal; } .faqcat-title i.line { float : left; width : 2.15em; border-bottom : 1px solid #BB5555; position : absolute; bottom : -1px; z-index : 9999; } .faqcat-block > .faqcat-title { position : relative; } .question-list .faq-category a:hover { background : #FAFAFA none repeat scroll 0 0; } .question-list .faq-category a { display : table; min-height : 75px; padding : 20px 10px; width : 100%; display : table; min-height : 75px; padding : 20px 10px; width : 100% } .faq-category .faq-category-icon { height : 35px; margin : 0 25px 0 0; width : 35px; font-size : 45px; display : table-cell; vertical-align : middle; padding-right : 20px; } .faq-category .faq-category-title { display : table-cell; vertical-align : middle; width : 100%; } .faq-category-title h3 { margin : 0; } #faqpage .faqcat-block { margin-bottom : 30px; } .faqcategory-sidebar .question-list .panel-heading { border : 0; padding-right : 0; } .faqcategory-sidebar .question-list .panel-title a { padding : 0; } .faqcategory-sidebar .question-list .panel-title { padding : 10px 0 10px 10px; /* padding: 0; */ } .faqcategory-sidebar .question-list .panel { margin-bottom : 0 } .question-list5#faqpage .faq-category { border-bottom : 1px solid #E6E6E6; } .question-list5#faqpage .faqcat-desc { margin-top : 10px; font-size : 15px; line-height : 20px; color : #8A8A8A; } .loffaq-search { position : relative; max-width : 500px; margin : 0 auto; } .loffaq-search-wrapper { float : left; width : 100%; } .column .faqcat-desc { margin-bottom : 5px; } .loffaq-category-view .column .faqcat-desc { margin-bottom : 20px; } .lof-faq-related ul { list-style : none; padding : 0; margin : 0; } .lof-faq-related ul li a { color : #5C5C5C } .lof-faq-related { margin-top : 50px; } #faqpage { margin-top : 10px } .faq-backpage { display : none; } .faq-backpage { margin-bottom : 20px; } .lofsearch-loader { position : absolute; right : 85px; top : 30%; height : 20px; width : 40px; -moz-transition : all 0.2s ease-in-out; -o-transition : all 0.2s ease-in-out; -webkit-transition : all 0.2s ease-in-out; -ms-transition : all 0.2s ease-in-out; transition : all 0.2s ease-in-out; display : none; } @media (max-width : 480px) { .lof-faq-details #like-dislike { width : 100%; } .lof-faq-social { float : left; padding : 0px; } .lof-faq-details .like-text { font-weight : 600; width : 100%; float : left; } } .faq-widget .question-list { padding : 0 20px; }