/* MAIN CSS */ @charset "UTF-8"; /*animate.css--start--*/ .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; } .animated.bounceIn, .animated.bounceOut { -webkit-animation-duration: .75s; animation-duration: .75s; } .animated.flipOutX, .animated.flipOutY { -webkit-animation-duration: .75s; animation-duration: .75s; } @-webkit-keyframes bounce { 0%, 20%, 53%, 80%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-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-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); transition-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-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); transition-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 { 0%, 20%, 53%, 80%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-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-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); transition-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-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); transition-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 { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } .flash { -webkit-animation-name: flash; animation-name: flash; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes pulse { 0% { -webkit-transform: 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); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes pulse { 0% { -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); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .pulse { -webkit-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes rubberBand { 0% { -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); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes rubberBand { 0% { -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); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand; } @-webkit-keyframes shake { 0%, 100% { -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 { 0%, 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } .shake { -webkit-animation-name: shake; animation-name: shake; } @-webkit-keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } 100% { -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); } 100% { -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 { 0% { -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); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes tada { 0% { -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); } 100% { -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 { 0% { -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); } 100% { -webkit-transform: none; transform: none; } } @keyframes wobble { 0% { -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); } 100% { -webkit-transform: none; transform: none; } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-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); } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-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); } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInDown { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-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); } 100% { -webkit-transform: none; transform: none; } } @keyframes bounceInDown { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-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); } 100% { -webkit-transform: none; transform: none; } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-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); } 100% { -webkit-transform: none; transform: none; } } @keyframes bounceInLeft { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-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); } 100% { -webkit-transform: none; transform: none; } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-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); } 100% { -webkit-transform: none; transform: none; } } @keyframes bounceInRight { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-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); } 100% { -webkit-transform: none; transform: none; } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-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, -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); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInUp { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-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, -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); } 100% { -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); } 100% { 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); } 100% { 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); } 100% { 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); } 100% { 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); } 100% { 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); } 100% { 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); } 100% { 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); } 100% { 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); } 100% { 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); } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutDown { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes fadeOutDown { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes fadeOutDownBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes fadeOutLeft { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes fadeOutLeftBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes fadeOutRight { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes fadeOutRightBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes fadeOutUp { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes fadeOutUpBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes flip { 0% { -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; } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { 0% { -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; } 100% { -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 { 0% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-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-transition-timing-function: ease-in; transition-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); } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-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-transition-timing-function: ease-in; transition-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); } 100% { -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 { 0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-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-transition-timing-function: ease-in; transition-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); } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-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-transition-timing-function: ease-in; transition-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); } 100% { -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 { 0% { -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; } 100% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } @keyframes flipOutX { 0% { -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; } 100% { -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 { 0% { -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; } 100% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } @keyframes flipOutY { 0% { -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; } 100% { -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 { 0% { -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; } 100% { -webkit-transform: none; transform: none; opacity: 1; } } @keyframes lightSpeedIn { 0% { -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; } 100% { -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 { 0% { opacity: 1; } 100% { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } @keyframes lightSpeedOut { 0% { opacity: 1; } 100% { -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 { 0% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateIn { 0% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } 100% { -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 { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } 100% { -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 { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } 100% { -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 { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } 100% { -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 { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } 100% { -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 { 0% { -webkit-transform-origin: center; transform-origin: center; opacity: 1; } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } @keyframes rotateOut { 0% { -webkit-transform-origin: center; transform-origin: center; opacity: 1; } 100% { -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 { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } 100% { -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 { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } 100% { -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 { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } 100% { -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 { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } 100% { -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 { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } 100% { -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 { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } 100% { -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 { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } 100% { -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 { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } 100% { -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; } 100% { -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; } 100% { -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 { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes rollIn { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } 100% { 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 { 0% { opacity: 1; } 100% { 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 { 0% { opacity: 1; } 100% { 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 { 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } } @keyframes zoomIn { 0% { 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 { 0% { 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 { 0% { 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 { 0% { 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 { 0% { 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 { 0% { 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 { 0% { 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 { 0% { 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 { 0% { 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 { 0% { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 100% { opacity: 0; } } @keyframes zoomOut { 0% { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 100% { 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); } 100% { 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); } 100% { 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); } 100% { 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); } 100% { 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); } 100% { 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); } 100% { 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); } 100% { 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); } 100% { 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 { 0% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInDown { 0% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideInLeft { 0% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInLeft { 0% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { 0% { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInRight { 0% { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideInUp { 0% { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInUp { 0% { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp; } @-webkit-keyframes slideOutDown { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes slideOutDown { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .slideOutDown { -webkit-animation-name: slideOutDown; animation-name: slideOutDown; } @-webkit-keyframes slideOutLeft { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes slideOutLeft { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } @-webkit-keyframes slideOutRight { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes slideOutRight { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } @-webkit-keyframes slideOutUp { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes slideOutUp { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } /*animate.css--end--*/ /*------------------------------------------------------------------ [Table of contents] - Top Bar - Nav - Slider - Search - Featured - Welcome - World - Asks - Auto - Count - Contact - Review - Features - Info - Footer - Author: Andrey Sokoltsov - Profile: http://themeforest.net/user/andreysokoltsov -------------------------------------------------------------------*/ /* Top Bar */ .b-topBar { border-bottom:1px solid #eeeeee; } .b-topBar__addr,.b-topBar__tel{ padding: 20px 0 15px 0; font:600 12px 'Open Sans',sans-serif; text-transform: uppercase; border-right:1px solid #eeeeee; } .b-topBar__addr{ padding-left: 35px; border-right:1px solid #eeeeee; border-left:1px solid #eeeeee; margin-right: 10px; } .b-topBar__addr span.fa,.b-topBar__tel span.fa{ font-size:17px; margin-right: 10px; vertical-align: middle; } .b-topBar__nav{ overflow: hidden; border-right:1px solid #eeeeee ; } .b-topBar__nav li{ float:right; list-style: none; padding: 20px 0; font:300 12px 'Open Sans',sans-serif; text-transform: uppercase; } .b-topBar__nav li:last-child{ border-left:1px solid #eeeeee; } .b-topBar__nav li a{ display: block; width:100%; padding: 0 23px; border-right: 1px solid #eeeeee; } .b-topBar__nav li:first-child a{ border-right: 0; } .b-topBar__nav li a:hover,.b-topBar__lang a:hover{ text-decoration: underline; } .b-topBar__lang{ padding: 18px 0; } .b-topBar__lang{ border-right: 1px solid #eeeeee; } .b-topBar__lang > div{ display: inline-block; } .b-topBar__lang a{ text-transform: uppercase; font:300 12px 'Open Sans',sans-serif; } a.m-langLink{ font-weight:600; margin-left: 10px; } .h-lang li a{ margin-left: 0!important; text-align: center; } .b-topBar__lang a span.fa{ margin-left: 8px; } .b-topBar__lang-flag{ display: inline-block; width:20px; height:13px; vertical-align: middle; margin-right: 4px; } .b-topBar__lang-flag.m-en{ background: url(../images/en.jpg); } .b-topBar__lang-flag.m-es{ background: url(../images/es.jpg); } .b-topBar__lang-flag.m-de{ background: url(../images/de.jpg); } .b-topBar__lang-flag.m-fr{ background: url(../images/fr.jpg); } .dropdown-menu{ min-width: 100px; padding: 0; border-radius:0; box-shadow:none; } /* Nav */ .b-nav{ padding: 20px 0 15px 0; } .b-nav__logo{ float:left; padding: 8px 0 0 5px; background: url(../images/logo/logo.png) left top no-repeat; text-transform: uppercase; } .b-nav__logo h3{ margin:0; font-size:26px; line-height:20px } .b-nav__logo h3 a{ text-decoration: none; font:700 26px 'Titillium Web', sans-serif; } .b-nav__logo h2{ margin: 0; line-height:15px; font-size:11px; margin-top: -5px; } .b-nav__logo h2 a{ font:300 11px 'Open Sans',sans-serif; text-decoration: none; } .b-nav__list{ float:right; } .b-nav__list ul{ margin-top: 20px; padding-left: 0; margin-bottom: 0; } .b-nav__list ul li{ float:left; list-style: none; height: 38px; } .navbar-nav-menu > li > .dropdown-menu{ display: block !important; height: 0px; overflow: hidden; opacity: 0; } .navbar-nav-menu > li.open > .dropdown-menu{ height: auto; padding-bottom: 3px; opacity: 1; -webkit-transition: all 500ms ease 0s; -moz-transition: all 500ms ease 0s; -o-transition: all 500ms ease 0s; transition: all 500ms ease 0s; } .b-nav__list ul li a{ text-transform: uppercase; text-decoration: none; display: inline-block; padding: 0 14px 15px 14px; font:700 14px '微软雅黑'; } .b-nav__list ul li a:hover{ border-bottom: 3px solid #f76d2b; } .b-nav__list ul li a span.fa{ margin-left: 4px; } .h-nav li{ display: block; float:none!important; } .h-nav{ margin-top: 0!important; } .h-nav li a{ display: block!important; text-align: left; padding: 10px 14px !important; } .navbar-collapse{ padding: 0; } /* banner */ .b-slider img{ width:100%; } .b-slider__info{ text-transform: uppercase; margin:0 0 0 20px; text-align: left; top: 25%; } .b-slider__info h3{ margin:0 0 10px 0; font:700 20px 'Open Sans',sans-serif; letter-spacing: 4px; padding: 0 10px; border-left:4px solid #f76d2b; border-right:4px solid #f76d2b; float:left; } .b-slider__info h2{ clear:both; margin:0; font:700 38px 'PT Sans',sans-serif; text-transform: none; } .b-slider__info p{ font:400 30px 'PT Sans',sans-serif; margin: 5px 0 30px 0; } .b-slider__info p span{ padding: 0 8px; font-size: 18px; letter-spacing: 5px; /*font-weight:bold;*/ } .btn.m-btn{ display: inline-block; padding: 2px 5px 2px 25px; font:700 14px 'Open Sans',sans-serif; border-radius: 30px; } .btn.m-btn:focus{ outline: none!important; } .btn.m-btn span.fa{ border-radius: 100%; display: inline-block; padding: 4px; font-size: 20px; width: 30px; height: 30px; font-weight: normal; margin-left: 20px; } .carousel-control,.carousel-control:hover{ background-image: none!important; } .carousel-control.right span.fa{ height:65px; width:35px; border-top-left-radius: 65px; border-bottom-left-radius: 65px; right:0!important; position:absolute; top:50%; margin-top: -32.5px; padding-top: 20px; padding-left: 9px; text-align: center; } .carousel-control.left span.fa{ height:65px; width:35px; border-top-right-radius: 65px; border-bottom-right-radius: 65px; left:0!important; position:absolute; top:50%; margin-top: -32.5px; padding-top: 20px; padding-right: 9px; text-align: center; } .carousel-fade .item { opacity: 0; -webkit-transition-property: opacity; -moz-transition-property: opacity; -o-transition-property: opacity; transition-property: opacity; } .carousel-fade .active { opacity: 1; } .carousel-fade .active.left, .carousel-fade .active.right { left: 0; opacity: 0; z-index: 1; } .carousel-fade .next.left, .carousel-fade .prev.right { opacity: 1; } .carousel-fade .carousel-control { z-index: 2; } /* Search */ .b-search{ height:300px; } .b-search__main{ text-align: center; height:480px; margin-top: -125px; padding: 35px 60px 50px 60px; z-index: 1000; position: relative; box-shadow:0 0 10px rgba(0,0,0,0.1); } .b-search__main-title{ padding: 15px 20px; display: inline-block; margin-bottom: 45px; } .b-search__main-title h2{ font:700 18px 'Open Sans',sans-serif; margin:0; padding: 0 10px; border-left: 4px solid #fff; border-right: 4px solid #fff; line-height:1.1; } .b-search__main-type{ margin-bottom: 35px; overflow: hidden; } .b-search__main-type svg,.b-search__main-type h5{ cursor: pointer; } .b-search__main-type svg:hover g{ fill: #f76d2b; } .b-search__main-type-svg{ display: block; margin: 0; } .b-search__main-type input[type='radio']{ visibility: hidden; position: absolute; } .b-search__main-type input[type='radio']:checked + label.b-search__main-type-svg + h5{ border-bottom:1px solid #B4B4B4; text-align: center; margin-bottom: -1px; } .b-search__main-type input[type='radio']:checked + label.b-search__main-type-svg + h5:after{ background: url(../images/elements/chevron-down.png) center no-repeat; width:100%; height:7px; content:''; position: absolute; top:100%; display: block; } .b-search__main-type h4{ text-transform: uppercase; font:600 14px 'Open Sans',sans-serif; text-align: right; margin: 20px 0 0 0; } .b-search__main-type h5{ color:#999999; text-transform: uppercase; font:600 10px 'Open Sans',sans-serif; padding: 0 0 20px 0; margin:0 0 7px 0; position: relative; } .b-search__main-type h5 label{ cursor: pointer; margin: 0; } .b-search__main-form select{ width:100%; padding: 10px 20px 10px 25px; border:1px solid #eeeeee; border-radius:30px; font:400 13px 'Open Sans',sans-serif; background: transparent; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none!important; cursor:pointer; } .b-search__main-form select + span.fa{ top:14px; right:45px; position: absolute; } .b-search__main-form select:focus{ outline: none; } .b-search__main-form p{ text-align: left; font:400 10px 'Open Sans',sans-serif; padding-left: 10px; margin-top: 10px; margin-bottom: 0; text-transform: uppercase; } .m-firstSelects{ margin-bottom: 45px; overflow: hidden; } .b-search__main-form label{ text-transform: uppercase; font: 600 14px 'Open Sans',sans-serif; text-align: right; margin: 11px 0 0 0; float:left; display: block; } .b-search__main-form-submit{ text-align:right; } .b-search__main-form-submit a{ font: 400 10px 'Open Sans',sans-serif; text-transform: uppercase; margin-right: 13px; } .b-search__main-form-submit button{ padding: 3px 3px 3px 20px!important; text-transform: uppercase; } .b-search__main-form-submit button:focus.b-search__main-form-submit button:active{ outline: none; } .b-search__main-form-range{ margin-bottom: 105px; } .b-search__main-form-range span.min,.b-search__main-form-range span.max{ position: absolute; top:150%; left: -3px; font: 400 12px 'Open Sans',sans-serif; text-decoration: none; } /*.b-search__main-form-range span{ display: inline-block; width:225px; margin-left: 15px; } */ .slider{ height:12px; width:230px; position: relative; border: 1px solid #eee; border-radius: 5px; float:left; margin-top: 15px; margin-left: 15px; } .ui-slider-handle{ width:20px; height:20px; position: absolute; top:-5px; border-radius: 100%; border: 2px solid #eee; text-align: center; } .ui-slider-handle:after{ width:12px; height:12px; display: inline-block; content:''; border-radius: 100%; vertical-align: text-top; } .ui-slider-handle:last-of-type{ margin-left: -20px; } .ui-slider-handle:focus{ outline: none; } .ui-widget-header{ height:100%; position:absolute; } /* Featured */ .b-featured{ padding: 80px 0 75px 0; text-align: center; position: relative; box-shadow: 0px 30px 100px -38px rgba(0,0,0,0.3); z-index:100; } .b-featured__item{ width:210px; margin: 0 auto; padding-top: 15px; } .b-featured__item > a{ position: relative; display: block; margin-bottom:15px ; } .b-featured__item .m-premium,.b-featured__item .m-leasing{ font: 700 10px 'Open Sans',sans-serif; padding: 5px; text-transform: uppercase; position: absolute; top:-10px; right:-10px; z-index: 1000; } .b-featured__item-price{ padding:3px 5px; font:700 20px 'PT Sans',sans-serif; float:left; margin-left: 5px; } .b-featured__item h5{ font: 600 14px 'Open Sans',sans-serif; padding-bottom: 25px; margin: 15px 0 25px 0px; padding-left: 5px; clear:both; text-align: left; border-bottom: 1px solid #B4B4B4; position: relative; } .b-featured__item h5 a{ text-decoration: none; } .b-featured__item h5:after{ background: url(../images/elements/chevron-down.png) center no-repeat; width: 15px; left:20px; height: 7px; content: ''; position: absolute; top: 100%; display: block; } .b-featured__item-count{ padding:5px 0 5px 0; font: 600 12px 'Open Sans',sans-serif; text-align: left; text-transform: uppercase; margin-left: 5px; } .b-featured__item-count span{ font-size: 18px; margin-right: 5px; } .b-featured__item-links{ text-align:left; margin-left: 5px; } .b-featured__item-links a{ font: 400 10px 'Open Sans',sans-serif; text-align: left; position: relative; } .b-featured__item-links a:after{ content:'\00B7'; padding:0 1px 0 4px; font-weight:bold; } .b-featured__item-links a:hover{ text-decoration:none!important; } .b-featured__item-links a:last-child:after{ content:''; } .owl-controls{ margin-top: 75px!important; } .owl-buttons{ display: inline-block; border:1px solid #dddddd; padding: 3px; border-radius:25px; width: 11%; margin: 0 35% 0 36%; } .owl-buttons span:hover{ color: #2ea02e; cursor: pointer;} .owl-buttons > div{ padding: 5px!important; width:25px; height:25px; border-radius: 100%!important; margin:0!important; display: inline-block; text-align: center; font-size: 12px; cursor:pointer; opacity: 0.5; } .owl-buttons > div:hover{ opacity: 1; } .owl-buttons > div:before{ display: inline-block; font: normal normal normal 12px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); font-size:15px; } .owl-buttons > div.owl-prev{ float: left; } .owl-buttons > div.owl-next{ float: right; } .owl-buttons > div.owl-next:before{ content: "\f105"; } .owl-buttons > div.owl-prev:before{ content: "\f104"; } /* Welcome */ .b-welcome{ background:url(../images/backgrounds/audiBg.png) left top no-repeat; position: relative; } .b-welcome .container{ padding: 80px 15px 70px 15px; height:580px; } .b-welcome:after{ height:5px; width:100%; position: absolute; bottom: 0; display:block; content:''; } .b-welcome__text{ text-align: left; } .b-welcome__text h2{ font: 400 14px 'Open Sans',sans-serif; padding: 0 10px; border-left:3px solid #fff; border-right:3px solid #fff; text-transform: uppercase; display: inline-block; margin: 0 0 10px 0; } .b-welcome__text h3{ font: 700 30px 'Open Sans',sans-serif; text-transform: uppercase; margin: 0 0 30px 0; } .b-welcome__text p{ font: 300 13px 'Open Sans',sans-serif; margin: 0 0 25px 0; } .b-welcome__text ul{ padding-left: 0; list-style: none; margin-top: 45px; } .b-welcome__text ul li{ margin-bottom: 10px; } .b-welcome__text ul li span{ font-size:18px; margin-right: 15px; } .b-welcome__services{ margin-top: 5px; } .b-welcome__services h3{ font: 600 14px 'Open Sans',sans-serif; text-transform: uppercase; margin: 20px 0 0 0; } .b-welcome__services-img{ height:90px; width:90px; border:2px solid #efefef; border-radius: 100%; display: inline-block; position: relative; } .b-welcome__services-auto,.b-welcome__services-trade,.b-welcome__services-buying,.b-welcome__services-support{ background-color: #fff; padding: 0 0 15px 0; text-align: center; } .b-welcome__services-img:hover{ border:none; cursor: pointer; } .b-welcome__services-circle{ display: inline-block; height:50px; width:50px; border-radius: 100%; margin: -18px 0; border:10px solid #f76d2b; position: relative; z-index:1000; } .b-welcome__services-img span.fa{ font-size: 40px; height: 40px; position: absolute; top: 0; bottom: 0; left: 0; margin: auto; right: 0; } .b-welcome__services-img.m-auto span.fa{ margin-top: 23px; } .b-welcome__services-img svg{ height: 40px; position: absolute; top: 0; bottom: 0; left: 0; margin: auto; right: 0; } .b-welcome__services .m-padding{ padding: 0 10px; } .b-welcome__services > .row{ margin-right: -10px; margin-left: -10px; } /* World */ .b-world{ background:url(../images/backgrounds/carRight.jpg) right bottom no-repeat; text-align: center; position: relative; box-shadow: 0px 30px 100px -38px rgba(0,0,0,0.3); } .b-world .container{ padding: 75px 15px 95px 15px; } .b-world h6{ font: 700 11px 'Open Sans',sans-serif; padding: 3px 5px; text-transform: uppercase; margin: 0 0 10px 0; display: inline-block; } .b-world__item-val{ margin: 25px 0 10px 0; text-align: center; } .b-world__item-val-title{ font: 400 10px 'Open Sans',sans-serif; margin-right: 10px; letter-spacing: 3px; } .b-world__item-val-circles{ display: inline-block; } .b-world__item-val-circles span{ width:10px; height:10px; border-radius: 100%; display: inline-block; vertical-align: middle; position: relative; } .b-world__item-val-circles span.m-empty{ border:1px solid #dddddd; background: none!important; } .b-world__item-num{ display: inline-block; padding: 3px 12px; border-radius: 13px; font: 400 10px 'Open Sans',sans-serif; border:1px solid #dddddd; margin-left: 10px; } .b-world__item{ text-align: left; background: rgba(255,255,255,.7); } .b-world__item h2{ margin: 30px 0 20px 0; font: 600 16px 'Open Sans',sans-serif; padding:0 0 0 10px; text-align: left; border-left:3px solid #2ea02e; } .b-world__item p{ font: 300 13px 'Open Sans',sans-serif; text-align: left; padding-top: 35px; border-top: 1px solid #B4B4B4; position:relative; margin-bottom: 40px; line-height:1.7; } .b-world__item p:after{ background: url(../images/elements/chevron-down.png) center no-repeat; width: 15px; left: 20px; height: 7px; content: ''; position: absolute; top: -1px; display: block; } .b-world__item a span.fa{ width:20px!important; height:20px!important; padding: 4px!important; font-size:12px!important; } .b-world__item a { border:1px solid #dddddd; padding: 3px 3px 3px 10px!important; font: 600 10px 'Open Sans',sans-serif!important; } .b-world__item-val-circles span.m-halfEmpty:after{ content:''; width:50%; right:0; top:0; background: #fff; display: inline-block; position: absolute; height:10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border:1px solid #dddddd; } /* Asks */ .b-asks{ padding: 55px 0 40px 0; border-bottom: 3px solid #eeeeee; } .b-asks__first{ cursor:pointer; } .b-asks__first-circle{ float:left; width:70px; height:70px; border: 2px solid #757575; border-radius: 100%; text-align: center; margin-right: 15px; } .b-asks__first-circle span{ vertical-align: middle; font-size:32px; margin-top: 15px; line-height:1; } .b-asks__first{ padding: 35px 0 35px 30px; position: relative; height: 188px; line-height: 32px; } .b-asks__first-info h2{ font: 700 24px 'Open Sans',sans-serif; margin: 0 0 10px 0; text-transform: uppercase; } .b-asks__first-info{ margin: 0 65px 0 0; } .b-asks__first-info p{ font: 400 13px 'Open Sans',sans-serif; margin: 0; line-height: 22px; } .b-asks__first-arrow{ top:0; position: absolute; right:0; width:60px; height:100%; float:right; background: rgba(255,255,255,0.2); } .b-asks__first-arrow span{ border-radius: 100%; display: inline-block; padding: 4px; font-size: 20px; width: 30px; height: 30px; font-weight: normal; position: absolute; top:0; bottom:0; left: 0; right: 0; margin: auto; } .b-asks__first.m-second .b-asks__first-circle{ border: 2px solid #757575; } .b-asks__first.m-second .b-asks__first-circle span{ margin-top: 17px; font-weight:bold; } .b-asks__call{ font: 600 14px 'Open Sans',sans-serif; text-align: center; margin-top: 45px; } .b-asks__call span{ font: 700 16px 'Open Sans',sans-serif; } /* Auto */ .b-auto{ text-align: center; padding: 80px 0 60px 0; position: relative; box-shadow: 0px 30px 100px -38px rgba(0,0,0,0.3); z-index:100; } .s-titleBg{ font: 700 11px 'Open Sans',sans-serif; padding: 3px 5px; text-transform: uppercase; margin: 0 0 10px 0; display: inline-block; } .b-auto__main{ overflow: hidden; } .b-auto__main-toggle{ font: 600 13px 'Open Sans',sans-serif; padding: 0 0 10px 0; margin-right: 35px; position: relative; text-align: center; display: inline-block; text-transform: uppercase; } .b-auto__main-toggle.m-active{ border-bottom: 1px solid #B4B4B4; } .b-auto__main-toggle.active:after{ background: url(../images/elements/chevron-down.png) center no-repeat; width: 100%; height: 7px; content: ''; position: absolute; top: 100%; display: block; } .b-auto__main-toggle:hover,.b-auto__main-toggle:visited,.b-auto__main-toggle:focus,.b-auto__main-toggle:active{ text-decoration: none; } .b-auto__main-nav{ /* margin-top: 75px;*/ text-align: left; margin-right: 15px; } .b-auto__main-item{ height: 272px; } .b-auto__main-nav ul{ padding-left: 0!important; border-bottom: 1px solid #eeeeee; margin-bottom: 50px; } .b-auto__main-nav li{ list-style: none; text-align: left; border-top: 1px solid #eeeeee; border-right: 1px solid #eeeeee; position: relative; } .b-auto__main-nav li.active{ border-right: none; } .b-auto__main-nav li.active span.fa{ position: absolute; right: 20px; top:50%; margin-top: -4px; } .b-auto__main-nav li:hover a{ font: 700 13px 'Open Sans',sans-serif; } .b-auto__main-nav li.active a{ font: 700 13px 'Open Sans',sans-serif; } .b-auto__main-nav li a{ font: 600 13px 'Open Sans',sans-serif; text-transform: uppercase; padding: 20px 0 15px 20px; display: block; } .b-auto__main-nav li:before{ content:''; border-left: 4px solid #dddddd; position: absolute; left:0; top:50%; height:20px; margin-top: -6px; } .b-auto__main-nav li a:hover,.b-auto__main-nav li a:focus,.b-auto__main-nav li a:visited,.b-auto__main-nav li a:active{ text-decoration: none; } /*.b-auto__main .m-margin{ margin-top: 45px; }*/ .b-auto__main-item{ padding-bottom: 25px; border-bottom: 1px solid #B4B4B4; position: relative; margin-bottom: 50px; height: 265px !important; } .b-auto__main-item:after{ background: url(../images/elements/chevron-down.png) center no-repeat; width: 15px; left: 20px; height: 7px; content: ''; position: absolute; top: 100%; display: block; } .b-auto__main-item h2{ margin: 0 0 25px 0; font: 600 16px 'Open Sans',sans-serif; text-align: center; margin-bottom: 15px; } .b-auto__main-item h2 a{ text-decoration:none; } .b-auto__main-item-info{ overflow: hidden; text-align: right; margin-bottom: 20px; } .b-auto__main-item .b-world__item-val-title span{ font-weight:bold; } .b-auto__main-item .b-world__item-val{ margin-bottom: 5px; } .b-auto__main-item-info .m-price{ padding: 3px 7px; float: left; } .b-auto__main-item-info .m-number{ padding: 5px 0 5px 0; text-align: left; text-transform: uppercase; display: inline-block; margin-top: 2px; } .b-auto__main-item-info .m-number span.fa{ font-size: 18px; margin-right: 5px; } .b-auto #second{ display: none; } /* Count */ .b-count{ background: url(../images/backgrounds/count.png) right top no-repeat; position: relative; } .b-count .m-main{ padding: 67px 15px; height:340px; display: inline-block; } .b-count:after{ height: 4px; width: 100%; position: absolute; bottom: 0; display: block; content: ''; } .b-count__item{ text-align: center; } .b-count__item-circle{ height:100px; width:100px; border: 2px solid #fff; border-radius: 100%; margin: 0 auto; position: relative; } .b-count__item-circle span{ font-size: 40px; height: 40px; position: absolute; top: 0; bottom: 0; left: 0; margin: auto; right: 0; } .b-count__item h2{ font: 700 30px 'Open Sans',sans-serif; text-align: center; margin: 30px 0 5px 0; } .b-count__item h5{ font: 700 14px 'Open Sans',sans-serif; padding: 2px 15px; text-transform: uppercase; margin: 0; border-left: 3px solid #fff; border-right: 3px solid #fff; display: inline-block; } /* Contact */ .b-contact{ padding: 40px 0; } /*.b-contact-title{ margin: 0 0 0 70px; }*/ .b-contact-title h5{ font: 700 11px 'Open Sans',sans-serif; padding: 3px 5px; text-transform: uppercase; margin: 10px 0 15px 0; display: inline-block; } .b-contact-title h2{ margin: 0 0 0 0; padding: 0 15px; border-left: 4px solid #fff; border-right: 4px solid #fff; text-transform: uppercase; display: inline-block; letter-spacing: 1px; font: 700 18px 'Open Sans',sans-serif; } .b-contact__form p{ font: 400 13px 'Open Sans',sans-serif; margin-bottom: 20px; } .b-contact__form input[type='text']{ background: transparent; border:1px solid #555555; padding: 10px 0 10px 40px; border-radius: 30px; width:340px; font: 400 13px 'Open Sans',sans-serif; } .b-contact__form input[type='text']:focus{ outline:none; } .b-contact__form input[type='text']::-webkit-input-placeholder { font: 400 13px 'Open Sans',sans-serif; } .b-contact__form input[type='text']:-moz-placeholder { font: 400 13px 'Open Sans',sans-serif; } .b-contact__form form > div{ display: inline-block; position: relative; } .b-contact__form form > div span{ position: relative; left:32px; } .b-contact__form button{ border-radius: 100%; display: inline-block; font-size: 20px; width: 35px; height: 35px; font-weight: normal; border:none; margin-left: 2px; vertical-align: middle; border-radius:35px!important; } /* Review */ .b-review{ padding: 50px 0; position: relative; box-shadow: 0px 30px 100px -38px rgba(0,0,0,0.3); z-index:100; } .b-review__main{ text-align: center; margin-right: 23px; } .b-review__main img{ border: 1px solid #ddd; padding: 10px; background: #f5f5f5; } .b-review__main-person{ overflow: hidden; float:left; width:105px; height:105px; border-radius: 100%; border:2px solid #ededed; text-align: center; position: relative; text-align: center; } .b-review__main-person-inside{ background: url(../media/persons/person.jpg) center no-repeat; width:89px; height:89px; border-radius: 100%; position: absolute; margin: auto; top:0; bottom:0; left:0; right:0; } .b-review__main h5{ text-align: center; font: 600 12px 'Open Sans',sans-serif; border-bottom: 1px solid #B4B4B4; position: relative; margin:0 0 0 115px; padding-bottom: 30px; position: relative; } .b-review__main h5:after{ background: url(../images/elements/chevron-down.png) center no-repeat; width: 100%; height: 7px; content: ''; position: absolute; top: 100%; display: block; } .b-review__main h5 span{ text-transform: uppercase; margin-top: 10px; } .b-review .owl-controls{ margin: 0 0 0 115px!important; } .b-review__main h5 em{ position: absolute; font-size:96px; left:100%; font-style: italic; -moz-transform: scale(-1, 1); -webkit-transform: scale(-1, 1); -o-transform: scale(-1, 1); transform: scale(-1, 1); filter: FlipH; -ms-filter: "FlipH"; } .b-review__main p{ clear:both; font: 300 16px 'Open Sans',sans-serif; text-align: center; margin: 35px 0 65px 115px; line-height:2; } .b-review__main .owl-buttons{ margin-left: 115px; } .b-review > img{ width:100%; } /* Features */ .b-features{ background: #2ea02e; padding: 30px 0; position: relative; } .b-features:after{ height: 4px; width: 100%; position: absolute; bottom: 0; display: block; content: ''; } /*.b-features__items{ padding-left: 0; margin: 0; overflow: hidden; } .b-features__items li{ float:left; list-style:none; font: 700 18px 'Open Sans',sans-serif; padding:0 30px 0 0; margin-right: 30px; border-right: 3px solid #fff; }*/ /* Info */ .b-info{ padding: 55px 0 30px 0; } .b-info__aside{ position: relative; margin-top:-200px; border-top: 3px solid #f76d2b; padding: 35px 0 35px 0; z-index:100000; } .b-info__aside-article{ padding-bottom: 35px; border-bottom: 1px solid #333333; padding-left: 25px; padding-right: 35px; } .b-info__aside-article:last-of-type{ border-bottom: 0; padding-bottom: 0; } .b-info__latest > h3,.b-info__aside-article > h3,.b-info__twitter > h3,.b-info__contacts > p{ margin: 0 0 20px 0; font: 700 14px 'Open Sans',sans-serif; text-transform: uppercase; padding: 0 10px; border-right: 3px solid #fff; border-left: 3px solid #fff; display: inline-block; } .b-info__aside-article-item{ margin-bottom: 15px; } .b-info__aside-article-item h6{ font: 600 13px 'Open Sans',sans-serif; margin: 0 0 5px 0; } .b-info__aside p{ font: 400 12px 'Open Sans',sans-serif; margin: 0; } .b-info__aside > a{ font: 600 10px 'Open Sans',sans-serif!important; padding: 3px 3px 3px 15px!important; text-transform: uppercase; border: 1px solid #5e5e5e; margin-left: 25px; } .b-info__aside > a span{ width:25px!important; height:25px!important; padding: 5px!important; font-size:14px!important; margin-left: 13px!important; } .b-info__latest{ margin-left: 15px; } .b-info__latest-article{ overflow: hidden; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #444444; } .b-info__latest-article:last-child{ border-bottom: 0; } .b-info__latest-article-photo{ width:80px; height:65px; float: left; } .b-info__latest-article-info{ margin: 8px 0 0 99px; overflow: hidden; } .b-info__latest-article-info h6{ margin: 0 0 10px 0; font: 600 12px 'Open Sans',sans-serif; text-transform: uppercase; } .b-info__latest-article-info h6 a{ text-decoration: none; color: #fefefe; } .b-info__latest-article-info p{ font: 600 11px 'Open Sans',sans-serif; } .b-info__latest-article-info p span{ font-size: 18px; margin-right: 2px; } .b-info__latest-article-photo.m-audi{ background: url(../images/audiF.jpg) no-repeat; } .b-info__latest-article-photo.m-audiSpyder{ background: url(../images/audiSpyderF.jpg) no-repeat; } .b-info__latest-article-photo.m-aston{ background: url(../images/astonMartinF.jpg) no-repeat; } .b-info__twitter{ margin-left: 15px; } .b-info__twitter-article-icon{ color:#cccccc; float:left; } .b-info__twitter-article{ overflow: hidden; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #444444; } .b-info__twitter-article:last-child{ border-bottom:0; } .b-info__twitter-article-content p{ font: 400 12px 'Open Sans',sans-serif; margin: 0 0 5px 0; } .b-info__twitter-article-content{ margin-left: 30px; } .b-info__twitter-article-content a{ color: #fff; } .b-info__twitter-article-content span{ font: 400 10px 'Open Sans',sans-serif; } .b-info__contacts,.b-info__map{ margin-left: 15px; margin-bottom: 0; } .b-info__contacts-item{ font: 400 12px 'Open Sans',sans-serif; margin-bottom: 10px; } .b-info__contacts-item em{ font-style: normal; } .b-info__contacts span.fa{ font-size:20px; margin-right: 15px; display: block; float:left } .b-info__contacts-item span.fa-fax{ font-size:16px; } .b-info__contacts-item span.fa-phone{ font-size:16px; } .b-info__contacts-item span.fa-envelope{ font-size:14px; } .b-info__map{ width:264px; height:144px; text-align: center; background: url(../images/backgrounds/map.jpg) no-repeat; } .b-info__map a{ font: 400 12px 'Open Sans',sans-serif; text-decoration: underline; display: inline-block; margin-top: 55px; text-decoration: none; } .b-info__map a:hover{ text-decoration: none; color: #f76d2b; } /* Footer */ .b-footer{ padding: 40px 0; } .b-footer .b-nav__logo{ background: url(../images/logoF.png) left top no-repeat; float:none; } .b-footer__company p{ font: 600 12px 'Open Sans',sans-serif; margin: 0 0 0 0; } .b-footer__content{ float:right; } .b-footer__content-social{ margin: 5px 0 15px 0; font-size:23px; text-align: right; } .b-footer__content-social a{ margin-right: 5px; } .b-footer__content-nav ul li{ list-style:none; float:left; margin-left: 15px; } .b-footer__content-nav ul li a{ font: 400 12px 'Open Sans',sans-serif; } /*------------------------------------------------------------------ [Table of contents] - Global - Home - ListTable - Detail - Compare - Blog - Author: Andrey Sokoltsov - Profile: http://themeforest.net/user/andreysokoltsov -------------------------------------------------------------------*/ /* Global */ body{ background: #fff; font-family: "微软雅黑" !important; } .s-titleDet{ color:#202020; } .s-title{ color:#525252; } /*b-topBar*/ .b-topBar__addr,.b-topBar__tel{ color:#555555; } .b-topBar__addr span.fa,.b-topBar__tel span.fa{ color:#2ea02e; } .b-topBar__nav li a,.b-topBar__lang a{ color:#555555; } .b-topBar__lang a span.fa{ color:#f76e2b; } /*b-topBar*/ /*b-nav*/ .b-nav__logo h3 a{ color:#f76d2b; } .b-nav__logo h3 a span{ color:#545454; } .b-nav__logo h2 a{ color:#999999; } .b-nav__list ul li a{ color:#555; } .b-nav__list ul li a span.fa{ color: #f76e2b; } .navbar-toggle{ background:#F76D2B ; } .navbar-toggle span{ background: #fff; } /*b-nav*/ /*b-slider*/ .b-slider__info h3,.b-slider__info h2,.b-slider__info p{ color:#fff; } .b-slider__info p span{ background: #2ea02e; } .carousel-control.left span.fa,.carousel-control.right span.fa{ background: rgba(0,0,0,0.5); } .btn.m-btn{ color:#555555; background: #fff; } .btn.m-btn span.fa{ color:#fff; background: #555; } .b-slider__info a.btn:hover{ background:#f76d2b ; color:#fff; } .b-slider__info a.btn.m-btn:hover span{ background: #fff; color: #6a6a6a; } .b-search__main-form-submit{ } /*b-slider*/ /*b-search*/ .b-search{ background: #f5f5f5; } .b-search__main{ background: #fff; } .b-search__main-title{ background: #f76d2b; } .b-search__main-title h2{ color:#fff; } .b-search__main-type h4{ color:#545454; } .b-search svg g{ fill:#d6d6d6; } .m-active svg g{ fill:#f76d2b; } .m-active h5{ color:#555; } .b-search__main-form p{ color:#999999; } .b-search__main-form-submit a{ color:#f76d2b; } button.btn.m-btn{ color:#fff; background: #555555; margin-top: 15px; } button.btn.m-btn:hover{ background: #2ea02e; color: #fff; } button.btn.m-btn:hover span{ background: #fff; color: #2ea02e; } button.btn.m-btn span.fa{ background: #2ea02e; color:#fff; } .ui-widget-header{ background: #eeeeee; } .ui-slider-handle:after{ background:#f76d2b; } .b-search__main-form-range span.min,.b-search__main-form-range span.max{ color:#6c6c6c; } .b-search__main-form-submit button.btn.m-btn:hover span{ color:#6a6a6a!important; } /*b-search*/ /*b-featured*/ .b-featured{ background: #fff; } .b-featured h1{ color:#535353; } .b-featured__item .m-premium{ background: #3cd225; color:#fff; } .b-featured__item-price{ color:#fff; background: #f76d2b; } .b-featured__item h5{ color:#000; } .b-featured__item-count{ color:#999999; } .b-featured__item-links a{ color:#999999; } .b-featured__item .m-leasing{ color:#fff; background: #2475ce; } .owl-buttons > div{ background: #dddddd; color:#fff; } /*b-featured*/ /*b-welcome*/ .b-welcome{ background-color: #2ea02e; } .b-welcome:after{ background: rgba(255,255,255,0.3); } .b-welcome__text{ color:#fff; margin-top: 22px; } .b-welcome__services-circle{ background: #fff; } .b-welcome__services-img span.fa{ color:#555555; } .b-welcome__services-img svg g{ fill:#555555; } .b-welcome__services-img:hover{ background: #f76d2b; } .b-welcome__services-img:hover span.fa,.b-welcome__services-img:hover svg g{ color:#fff; fill:#fff; } /*b-welcome*/ /*b-world*/ .b-world{ background-color:#fff ; } .b-world h6{ color:#fff; background: #555555; } .b-world__item-val-title{ color:#999999; } .b-world__item-val-circles span{ background: #f76d2b; } .b-world__item-num{ color:#999999; } .b-world__item h2{ color:#000; } .b-world__item p{ color:#444; } .b-world__item a:hover{ background: #2ea02e; color:#fff; border-color:#2ea02e; } .b-world__item a.btn.m-btn:hover span{ background: #fff; color:#6a6a6a; } /*b-world*/ /*b-asks*/ .b-asks{ background: #f5f5f5; } .b-asks__first{ background: #555; } .b-asks__first:hover .b-asks__first-circle{ border-color:#fbb695!important; } .b-asks .b-asks__first:hover{ background:#2ea02e; } .b-asks__first-circle span{ color:#fff; } .b-asks__first-info{ color:#fff; } .b-asks__first-arrow{ text-align: center; } .b-asks__first-arrow span{ background: #ffffff; color:#707070; } .b-asks__first.m-second{ background: #555555; } .b-asks__call{ color:#525252; } /*b-asks*/ /*b-auto*/ .b-auto{ background: #fff; } .s-titleBg{ color: #fff; background: #555555; } .b-auto__main-toggle,.b-auto__main-toggle:hover,.b-auto__main-toggle:visited,.b-auto__main-toggle:focus,.b-auto__main-toggle:active{ color:#999999; } .b-auto__main-toggle:hover{ color:#f76d2b; } .b-auto__main-toggle.active{ color:#f76d2b; } .b-auto__main-nav li a{ color:#555555; } .b-auto__main-nav li.active span.fa{ color:#555555; } .b-auto__main-nav li:hover a{ color:#2ea02e } .b-auto__main-nav li.active a{ color:#2ea02e } .b-auto__main-item h2{ color:#000; } .b-auto__main-item h2 a{ color:#555; } .b-auto__main-item-info .m-price{ color: #fff; background: #2ea02e; } .b-auto__main-item-info .m-number{ color: #999999; } /*b-auto*/ /*b-count*/ .b-count{ background-color: #2ea02e; color:#fff; height: 500px; } .b-count:after{ background: rgba(255,255,255,0.3); } /*b-count*/ /*b-contact*/ .b-contact{ background: #333333; color:#fff; } .b-contact-title{ text-align: center; } .b-contact-title h5{ background: #f76d2b; } .b-contact__form form > div span{ color:#555555; } .b-contact__form button{ background: #f76d2b; color: #fff; } .b-contact__form button:hover{ background: #ffffff; color: #707070; } /*b-contact*/ /*b-review*/ /*.b-review{ background: url(../images/backgrounds/reviews.jpg) center center no-repeat; }*/ .b-review__main h5{ color:#999999; } .b-review__main h5 span{ color:#000; } .b-review__main p{ color:#666666; } .b-review__main h5 em{ color:#f76d2b; } /*b-review*/ /*b-features*/ .b-features{ color:#fff; } .b-features:after { background: rgba(255,255,255,0.3); } /*b-features*/ /*b-info*/ .b-info{ background: #333333; } .b-info__aside { background: #272727; } .b-info__latest > h3,.b-info__aside-article > h3,.b-info__twitter > h3,.b-info__contacts > p{ color:#f76d2b; } .b-info__aside-article-item h6{ color:#fff; } .b-info__aside p{ color:#999999; } .b-info__aside > a.btn.m-btn{ color:#ccc; background: #2b2b2b; } .b-info__aside > a.btn.m-btn:hover{ background: #2ea02e; color: #fff; border-color:#2ea02e; } .b-info__aside > a.btn.m-btn:hover span{ background: #fff; color: #6a6a6a; } .b-info__latest-article-info h6{ color:#fff; } .b-info__latest-article-info p{ color:#999999; } .b-info__latest-article-info p span{ } .b-info__twitter-article-content p{ color:#999999; } .b-info__twitter-article-content span{ color:#fefefe; } .b-info__contacts{ color:#999999; } .b-info__map a{ color:#999999; } /*b-info*/ /*=======================Index=======================*/ /*=======================Home=======================*/ /*b-topBar*/ .m-home .b-topBar{ background: #333333; color:#fff; } .m-home .b-topBar__addr,.m-home .b-topBar__tel{ color:#fff; border-color:#444; } .m-home .b-topBar__nav li a,.m-home .b-topBar__lang > div > a{ color:#fff; } .m-home .b-topBar__nav,.m-home .b-topBar__nav li,.m-home .b-topBar__nav li a,.m-home .b-topBar__lang,.m-home .b-topBar{ border-color:#444; } /*b-topBar*/ /*b-nav*/ .m-home .b-nav{ background: #222222; } .m-home .b-nav__logo h3 a{ color:#fff; } .m-home .b-nav__logo h3 a span{ color:#f76c2b; } .m-home .b-nav__list > #nav > ul > li > a{ color:#fff; } /*b-nav*/ /*b-slider*/ .m-home .b-slider__info p span{ background: #333333; } .m-home .b-slider__info .btn.m-btn{ background:#f76d2b ; color:#fff } .m-home .b-slider__info .btn.m-btn span.fa{ background: #fff; color: #6a6a6a; } .m-home .b-slider__info a.btn:hover{ color:#555555; background: #fff } .m-home .b-slider__info a.btn:hover span{ color:#fff; background: #555!important; } /*b-slider*/ /*b-search*/ .m-home .b-search .container > h1{ color:#555; } .m-home .b-search__main >h4{ color:#f76d2b; } /*b-search*/ /*b-featured*/ .m-home .b-featured .s-title{ color:#fff; } .m-home .b-featured__item h5{ color:#fff; } .m-home .b-featured__item > a{ background: #fff; } .m-home .b-featured .owl-buttons > div{ background: #ddd!important; opacity: 0.8; color:#929292!important; } /*b-featured*/ /*b-homeAuto*/ .m-home .b-homeAuto{ background: #fff; } .m-home .b-homeAuto__world-item-info > h2{ color:#000; } .m-home .b-world__item-val-circles span{ background: #5d5d5d; } .m-home .b-world__item-num{ background: #f76d2b; border-color: #f76d2b; color:#fff; } .m-home .b-homeAuto__world-item-text span{ color:#999999; } .m-home .b-homeAuto__world-item-text p{ color:#666666; } .m-home .b-homeAuto__world > a{ background: transparent; color:#555; } .m-home .b-homeAuto__world > a span.fa{ color:#fff; background: #555; } /*b-homeAuto*/ /*b-count*/ .m-home .b-count{ background-color:#f5f5f5 ; color:#555; } .m-home .b-count__item-circle span{ color:#333; } .m-home .b-count__item-circle:hover{ background:#f76d2b; border-color:#f76d2b; cursor:pointer; color:#fff; } .m-home .b-count__item-circle:hover span{ color:#fff; } .m-home .b-count__item h2{ color:#f76d2b; } .m-home .b-count__item h5{ border-color:#555; } .m-home .b-count:after{ display:none; } /*b-count*/ /*b-homeReviews*/ .m-home .b-homeReviews{ color:#fff; } .m-home .b-homeReviews h1.s-title{ color:#fff; } .m-home .b-review__main-person{ background: #fff; } .m-home .b-homeReviews__main-person-name em{ color:#f76d2b; } .m-home .b-homeReviews .owl-buttons > div{ color:#222222!important; } /*b-homeReviews*/ /*b-asks*/ .m-home .b-asks{ background: #fff; } /*b-asks*/ /*b-partners*/ .m-home .b-partners{ background: #fff; } /*b-partners*/ /*b-info*/ .m-home .b-info__aside p{ color:#cccccc; } /*b-info*/ /*b-footer*/ .m-home .b-footer__toTop-inside{ background: #f76d2b; color:#fff; } .m-home .b-footer__toTop:hover .b-footer__toTop-inside{ background: #ffffff; color: #707070; } .b-items__aside-main-footer button.btn.m-btn:hover span.fa{ background: #555; } /*b-footer*/ /*=======================Home=======================*/ /*=======================Listings=======================*/ /*b-pageHeader*/ .b-pageHeader{ color:#fff; } .b-pageHeader__search{ background: #f76d2b; } /*b-pageHeader*/ /*b-breadCumbs*/ .b-breadCumbs{ background: #fff; } .b-breadCumbs__page,.b-breadCumbs__page:hover,.b-breadCumbs__page:focus,.b-breadCumbs__page:active,.b-breadCumbs__page:visited{ color:#999; } .b-breadCumbs__page.m-active,.b-breadCumbs span.fa{ color:#545454; } /*b-breadCumbs*/ /*b-infoBar*/ .b-infoBar{ background: #f5f5f5; } .b-infoBar__select-one-title,.b-infoBar__compare-item,.b-infoBar__compare-item:hover,.b-infoBar__compare-item:focus,.b-infoBar__compare-item:visited,.b-infoBar__compare-item:active{ color:#444; } .b-infoBar__compare-item span.fa{ color:#f76d2b; } .b-infoBar__compare-item span.fa.fa-caret-down{ color:#555; } .b-infoBar__select-one a{ background: #fff; color:#999999; } .b-infoBar__select-one a.m-active,.b-infoBar__select-one a:hover{ color:#f76d2b; } .b-infoBar__select-one select{ background: #fff; color:#999; } /*b-infoBar*/ /*b-items*/ .b-items{ background: #fff; } .b-items__aside-main-body{ background: #555555; color:#fff; } .b-items__aside-main-body-item select{ background: #444; color:#cccccc; } .b-items__aside-main-body-item > div select + span.fa{ color:#f76d2b; } .b-items__aside-main-body-item .ui-slider-handle{ background-color: #fff; } .b-items__aside-main-body-item .slider{ border-color:transparent; background-color: #fff; } .b-items__aside-main-body-item .ui-widget-header{ background: #f76d2b; } .b-items__aside-main-body-item .ui-slider-handle:before{ color:#fff; background: #444444; } .b-items__aside-main-footer{ background: #444444; } .b-items__aside-main-footer button.btn.m-btn{ background: #f76d2b; color:#fff; } .b-items__aside-main-footer button.btn.m-btn span.fa{ background: #fff; color:#444444; } .b-items__aside-main-footer button.btn.m-btn:hover{ background: #fff; color:#444444; } .b-items__aside-main-footer button.btn.m-btn:hover span{ background: #f76d2b; color:#fff; } .b-items__aside-main-footer > a{ color:#999; } .b-items__aside-sell-img h3{ color:#fff; } .b-items__aside-sell-info{ background: #2475ce; color:#fff; } .b-items__aside-sell-info a.btn.m-btn{ background: transparent; color:#fff; } .b-items__aside-sell-info a.btn.m-btn span.fa{ background: #fff; color:#666; } .b-items__aside-sell-info a.btn.m-btn:hover{ background: #fff; color:#666!important; } .b-items__aside-sell-info a.btn.m-btn:hover span{ background: #f76d2b; color:#fff; } .b-items__cars-one-img-video,.b-items__cars-one-img-video:hover,.b-items__cars-one-img-video:visited,.b-items__cars-one-img-video:active{ background: rgba(0,0,0,0.5); color:#fff; } .b-items__cars-one-img-type{ color:#fff; } .b-items__cars-one-img-type.m-premium{ background: #3cd225; } .b-items__cars-one-img-type.m-leasing{ background: #2475ce; } .b-items__cars-one-img-type.m-listing{ background: #d90000; } .b-items__cars-one-img-type.m-owner{ background: #ffd24d; } .b-items__cars-one-img-check{ background: #fff; } .b-items__cars-one-img-check span{ color: #f76d2b; } .b-items__cars-one-info-header h2{ color:#212121; } .b-items__cars-one-info-header > span{ background: #f76d2b; color:#fff; } .b-items__cars-one-info p{ color:#666; } .b-items__cars-one-info-km{ color:#999; } .b-items__cars-one-info a.btn.m-btn{ color:#545454; } .b-items__cars-one-info a.btn.m-btn:hover{ background: #f76d2b; color:#fff; border-color:#f76d2b; } .b-items__cars-one-info a.btn.m-btn:hover span{ background: #fff; color:#545454; } .b-items__pagination-main > a{ color:#fff; background: #ddd; } .b-items__pagination-main > span a{ color:#999; } .b-items__pagination-main > span.m-active a{ color:#f76c2b; } .b-items__pagination-main > span:hover a{ color:#f76c2b; } .m-listingsTwo .b-items__cars-one-info-price h3{ color:#999; } .m-listingsTwo .b-items__cars-one-info-price h4{ color:#f76d2b; } /*b-items*/ /*=======================Listings=======================*/ /*=======================ListingsTwo=======================*/ /*b-items*/ .b-items__cars-one-info-title{ color:#555; } .b-items__cars-one-info-value{ color:#999; } /*b-items*/ /*=======================ListingsTwo=======================*/ /*=======================ListTable=======================*/ /*b-items*/ .b-items__cell-info h2{ color:#000; } .b-items__cell-info > p{ color:#666; } .b-items__cell-info ul li{ color:#999; } .b-items__cell-info-price{ color:#f76d2b; } .b-items__cell-info-km{ color:#999; } .b-items__cell-info a.btn.m-btn{ color: #545454; } .b-items__cell-info a.btn.m-btn:hover{ background: #f76d2b; color: #fff; border-color: #f76d2b; } .b-items__cell-info a.btn.m-btn:hover span.fa{ background: #fff; color: #545454!important; } /*b-items*/ /*=======================ListTable=======================*/ /*=======================ListTableTwo=======================*/ /*b-items*/ .m-listTableTwo .b-items__cell-info-price span{ color:#999; } /*b-items*/ /*=======================ListTableTwo=======================*/ /*=======================Detail=======================*/ /*b-infoBar*/ .b-infoBar__premium{ color:#fff; background: #3cd225; } .btn.m-btn.m-infoBtn{ color:#535353; } .btn.m-btn.m-infoBtn:hover{ background: #f76d2b; color:#fff; border-color:#f76d2b; } .btn.m-btn.m-infoBtn:hover span.fa{ background: #fff; color:#555; } /*b-infoBar*/ /*b-detail*/ .b-detail__head h1{ color:#000; } .b-detail__head h3{ color:#999; } .b-detail__head-price-num{ color:#fff; background: #f76d2b; } .b-detail__head-price p{ color:#999; margin: 10px 0 0 0; } .b-detail__main-aside-desc-title{ color:#666; } .b-detail__main-aside-desc-value{ color:#525252; } .b-detail__main-aside-about-call{ background: #555555; color:#fff; } .b-detail__main-aside-about-call p{ color:#ddd; } .b-detail__main-aside-about-call span.fa{ background: #808080; } .b-detail__main-aside-about-seller{ background:#f76d2b ; color:#fff; } .b-detail__main-aside-about-form{ background: #f5f5f5; } .b-detail__main-aside-about-form-links a{ color:#999; } .b-detail__main-aside-about-form-links a.m-active{ color:#f76d2b; } .b-detail__main-aside-about-form-links a:hover{ color:#f76d2b; } .b-detail__main-aside form input[type='text'],.b-detail__main-aside form input[type='email'],.b-detail__main-aside form input[type='tel'],.b-detail__main-aside select{ background: #fff; } .b-detail__main-aside form select{ color:#999; } select.m-select + span.fa{ color:#555; } .b-detail__main-aside form input::-webkit-input-placeholder{ color:#999; } .b-detail__main-aside form input:-moz-placeholder{ color:#999; } .b-detail__main-aside form label{ color:#999999; margin-left: 10px; vertical-align: middle; } .b-detail__main-aside form button.btn.m-btn{ background: #f76d2b; color:#fff; } .b-detail__main-aside form button.btn.m-btn:hover{ background: #fff; color:#555; } .b-detail__main-aside form button.btn.m-btn span.fa{ background: #fff; color:#555; } .b-detail__main-aside form button.btn.m-btn:hover span.fa{ background: #f76d2b; color:#fff; } .b-detail__main-aside-payment-form{ background:#f5f5f5 ; } .b-detail__main-info-characteristics-one-bottom{ color:#555; background: #f5f5f5; } .b-detail__main-info-characteristics-one:hover{ background: #f5f5f5; } .b-detail__main-info-characteristics-one:hover .b-detail__main-info-characteristics-one-top{ border-bottom-color: #f5f5f5; } .b-detail__main-info-characteristics-one:hover .b-detail__main-info-characteristics-one-top > div{ background: #f76d2b; } .b-detail__main-info-characteristics-one-top > div{ background: #555555; color:#fff; } .b-detail__main-info-text p{ color:#666; } .b-detail__main-info-extra ul li span.fa{ color:#f76d2b; } /*b-detail*/ /*b-related*/ .b-related{ background: #f5f5f5; } /*b-related*/ /*b-brands*/ .b-brands{ background: #fff; } /*b-brands*/ /*=======================Detail=======================*/ /*=======================Compare=======================*/ /*b-pageHeader*/ /*b-infoBar*/ .m-compare .b-infoBar h5{ color:#525252; } .m-compare .b-infoBar h5 span{ color:#f76d2b; } /*b-infoBar*/ /*b-compare*/ .b-compare{ background: #fff; } .b-compare__images-item h3{ color:#212121; } .b-compare .b-compare__images .b-compare__images-item-price{ background-color:#f76d2b; color:#fff; } .b-compare__images-item-price-vs{ color:#fff; background:#555; } .b-compare__block-title{ background: #f5f5f5; } .b-compare__block-inside-title{ color:#555; } .b-compare__block-inside-value{ color:#666 } .b-compare__block-inside-value ul li span.fa{ color:#f76d2b; } .b-compare__links a.btn.m-btn{ color:#555; } .b-compare__links a.btn.m-btn:hover{ background:#f76d2b; color:#fff; border-color:#f76d2b; } .b-compare__links a.btn.m-btn span.fa{ background:#f76d2b ; } .b-compare__links a.btn.m-btn:hover span.fa{ color: #555; background: #fff; } /*b-compare*/ /*=======================Compare=======================*/ /*=======================Blog=======================*/ /*b-blog*/ .b-blog{ background: #fff; } .b-blog__aside-search input[type='text']{ color:#999; } .b-blog__aside-search button{ color:#f76d2b; } .b-blog__aside-categories h2{ color:#000; } .b-blog__aside-categories-list li a{ color:#555; } .b-blog__aside-categories-list li:hover a,.b-blog__aside-categories-list li.m-active a{ color:#f76d2b; border-color:#f76d2b; } .b-blog__aside-popular-posts h4 a{ color:#525252; } .b-blog__aside-popular-posts-one-date{ color:#555; } .b-blog__aside-popular-posts-one-date span.fa{ color:#f76d2b; } .b-blog__aside-text p{ color:#666; } .b-blog__aside-reviews-posts-one-info p{ color:#525252; } .b-blog__aside-reviews-posts-one-info .b-world__item-val-circles span{ background: #555; } .b-blog__aside-reviews-posts-one-info .b-world__item-num{ background:#f76d2b; border-color: #f76d2b ; color:#fff; } .b-blog__posts-one-social a{ color:#999999; } .b-blog__posts-one-social a:hover{ color: #f76d2b ; } .b-blog__posts-one-body-head h2{ color:#000; } .b-blog__posts-one-body-head-notes{ color:#999; } .b-blog__posts-one-body-main > p{ color:#666; } .btn.m-btn.m-readMore{ color:#555; } .btn.m-btn.m-readMore:hover{ background:#f76d2b; color:#fff ; border-color:#f76d2b; } .btn.m-btn.m-readMore:hover span.fa{ background: #fff; color:#555; } .b-blog__posts-one-body-main-link{ background:#f76d2b ; } .b-blog__posts-one-body-main-link a{ color:#fff; } .b-blog__posts-one-share{ color:#555; } /*b-blog*/ /*=======================Blog=======================*/ .m-blogTwo .b-blog__posts-one-body-head-notes-note span.fa{ color:#f76d2b; } .b-blog__posts-one-info p{ color:#666; } .b-blog__posts-one-social em{ color:#555; } .owl-theme .owl-controls .owl-buttons div{ background: #2ea02e; } /*600-767*/ @media screen and (max-width:767px){ .b-nav__list{ background: #555; } .b-nav__list ul li a{ color:#fff!important; } ul.h-nav li a{ color:#555!important; } } /*600-767*/ /*------------------------------------------------------------------ [Table of contents] - Global - Loader - Author: Andrey Sokoltsov - Profile: http://themeforest.net/user/andreysokoltsov -------------------------------------------------------------------*/ /* Global */ a:focus{ outline:none; } body{ overflow-x: hidden; } .s-relative{ position: relative; } .s-noLeftPadding{ padding-left: 0!important; } .s-noPadding{ padding: 0!important; } .s-noRightMargin{ margin-right: 0; } .s-title{ font: 700 18px 'Open Sans',sans-serif; margin: 0 0 15px 0; padding: 0 15px; border-left: 4px solid #f76d2b; border-right: 4px solid #f76d2b; text-transform: uppercase; display: inline-block; letter-spacing: 1px; } .s-titleDet{ font: 700 14px 'Open Sans',sans-serif; text-transform: uppercase; padding-left: 12px; border-left:4px solid #f76d2b; margin-bottom: 25px; } .s-shadow{ position: relative; box-shadow: 0px 30px 100px -38px rgba(0,0,0,0.3); z-index:100; } .s-shadow.b-breadCumbs{ box-shadow: 0px 30px 50px -24px rgba(0,0,0,0.1); z-index:1000; } .s-whiteShadow{ position: relative; } .s-whiteShadow:after{ left: 0; content: ''; position: absolute; top: 100%; width: 100%; height: 17px; background: url(../images/elements/whiteShadow.png) center bottom no-repeat; z-index: 1000; } .s-lineDownLeft{ text-align: left; border-bottom: 1px solid #B4B4B4; position: relative; height: 64px; } .s-lineDownLeft:after{ background: url(../images/elements/chevron-down.png) center no-repeat; width: 15px; left: 5%; height: 7px; content: ''; position: absolute; top: 100%; display: block } .s-lineDownCenter{ text-align: center; border-bottom: 1px solid #B4B4B4!important; position: relative; } .s-lineDownCenter:after{ background: url(../images/elements/chevron-down.png) center no-repeat; width: 15px; height: 7px; content: ''; position: absolute; width:100%; top: 100%; display: block; left:0; } .s-titleLeft{ padding-bottom: 15px; float:left; margin-bottom: 40px; } .s-titleLeft:after{ left:25px; } .s-titleLeft > div{ overflow: hidden; } .s-titleLeft h2{ margin: 0; font-size:15px; padding-right: 8px; } .s-list{ list-style: none; padding-left: 0; margin-bottom: 40px; } .s-list span.fa{ font-size: 16px; margin-right: 10px; } .s-list li{ font:300 13px 'Open Sans',sans-serif; margin-bottom: 10px; } .s-form select{ width:100%!important; margin-bottom: 10px; text-transform: uppercase; font: 400 10px 'Open Sans',sans-serif!important; } .s-form select + span.fa-caret-down{ right:25px!important; } .s-form input[type='text'],.s-form textarea{ display: block; width: 100%; margin-bottom: 15px; padding: 15px 20px; font: 400 10px 'Open Sans',sans-serif; border: 1px solid #eeeeee; text-transform: uppercase; border-radius: 30px; } .s-form textarea{ border-radius: 20px; margin-bottom: 20px; } .s-form input[type='text']:focus,.s-form textarea:focus{ outline:none; } .s-form input::-webkit-input-placeholder{ color:#999; } .s-form input::-moz-placeholder{ color:#999; } .s-form button[type='submit']{ font: 700 12px 'Open Sans',sans-serif; padding-left: 20px; margin-top: 25px; } .s-form button[type='submit'] span.fa{ width: 25px; height: 25px; padding: 3px; font-size: 16px; margin-left: 10px; } .s-form input[type='file']{ position: absolute; opacity: 0; z-index:-100; } .s-headerSubmit{ padding-bottom: 20px; margin-bottom: 50px; } .s-headerSubmit:after{ left:30px; } .s-headerSubmit h2{ font: 600 20px 'Open Sans',sans-serif; margin: 0; color:#212121; padding-left: 10px; border-left:4px solid #f76d2b; text-transform: none; line-height:1.2; } .s-submit label{ display: block; margin: 0 0 15px 15px; font: 400 13px 'Open Sans',sans-serif; } .s-submit select{ width:100%!important; background: #f7f7f7!important; color:#444; height:46px; cursor:pointer; } .s-submit select + span.fa{ right:25px!important; } .s-submit input[type='text']{ display: block; width: 100%; padding: 15px 20px; font: 400 13px 'Open Sans',sans-serif; border: 1px solid #eeeeee; color:#444; background: #f7f7f7!important; text-transform: none; border-radius: 30px; padding-top: 13px; padding-bottom: 13px; height:46px; } .s-submit input[type='text']:focus{ outline:none; } .s-submit input[type='text']::-webkit-input-placeholder{ color:#444; } .s-submit input[type='text']::-moz-placeholder{ color:#444; } .s-submit input[type='text']:-moz-placeholder{ color:#444; } .s-submit input[type='text']:-ms-input-placeholder{ color:#444; } .s-submit button.btn.m-btn{ text-transform: uppercase; margin-top: 35px; } .s-submit button.btn.m-btn span.fa{ width:30px; height:30px; padding: 5px; font-size:18px; } .s-submit input[type='checkbox'],.s-submit input[type='radio']{ visibility: hidden; position: absolute; } label.s-submitCheckLabel{ width:20px; height:20px; background: transparent; border:1px solid #ddd; text-align: center; margin: 0; display: inline-block; position: relative; cursor: pointer; } label.s-submitCheckLabel span{ display: none; position: absolute; width:100%; height:100%; top:2px; left:0; } .s-submit input[type='checkbox']:focus{ outline:none; } .s-submit input[type='checkbox']:checked + label.s-submitCheckLabel span{ display: block; } .s-submit input[type='radio']:checked + label.s-submitCheckLabel span{ display: block; } label.s-submitCheck{ display: inline-block; margin-bottom: 0; margin-left: 10px; vertical-align: super; cursor: pointer; } .modal-body iframe{ width:100%!important; border:none!important; } #to-top{ background-color: rgba(0, 0, 0, 0.6); display: none; padding: 15px; color: #fff; position: fixed; right: 20px; bottom: 20px; z-index: 9999; border-radius: 3px; } .chart{ position: relative; } .chart canvas{ position: absolute; } /* Loader */ .preloaderjs .spinner{ display:none !important; } .preloaderjs#page-preloader{ background: rgba( 46, 46, 46, 0.99) !important; } #page-preloader { position: fixed; z-index: 100500; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; background: #555; } #page-preloader .spinner { position: absolute; z-index: 1001; top: 50%; left: 50%; display: block; width: 100px; height: 100px; margin-top: -50px; margin-left: -50px; -webkit-animation: spin 2.5s infinite linear; animation: spin 2.5s infinite linear; border: 3px solid transparent; border-top-color: #3cd225; border-radius: 50%; } #page-preloader .spinner:before, #page-preloader .spinner:after { position: absolute; content: ''; border-radius: 50%; } #page-preloader .spinner:before { top: 5px; right: 5px; bottom: 5px; left: 5px; -webkit-animation: spin 2s infinite linear; animation: spin 2s infinite linear; border: 3px solid transparent; border-top-color:#2475ce; } #page-preloader .spinner:after { top: 15px; right: 15px; bottom: 15px; left: 15px; -webkit-animation: spin 1s infinite linear; animation: spin 1s infinite linear; border: 3px solid transparent; border-top-color: #f76d2b; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* Pager Slider */ .pagerSlider .bx-wrapper .bx-controls-direction a{ display: none !important; } .pagerSlider .bx-wrapper:hover .bx-controls-direction a{ display: block !important; } .pagerSlider .bx-wrapper .bx-controls-direction a span{ color: #fff; display: block; font-size: 29px; text-align: center; text-indent: 0; } .pagerSlider .bx-wrapper .bx-controls-direction a.disabled{ display: none !important; } .pagerSlider.pagerVertical .bx-wrapper .bx-controls-direction a.bx-prev{ background: #555; left: 0; margin: 0; top: 5px; width: 92%; } .pagerSlider.pagerVertical .bx-wrapper .bx-controls-direction a.bx-next{ background: #555; bottom: 5px; left: 0; margin: 0; top: auto; width: 92%; } /* * Core Owl Carousel CSS File * v1.3.3 */ /* clearfix */ .owl-carousel .owl-wrapper:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } /* display none until init */ .owl-carousel{ display: none; position: relative; width: 100%; -ms-touch-action: pan-y; } .owl-carousel .owl-wrapper{ display: none; position: relative; -webkit-transform: translate3d(0px, 0px, 0px); } .owl-carousel .owl-wrapper-outer{ overflow: hidden; position: relative; width: 100%; } .owl-carousel .owl-wrapper-outer.autoHeight{ -webkit-transition: height 500ms ease-in-out; -moz-transition: height 500ms ease-in-out; -ms-transition: height 500ms ease-in-out; -o-transition: height 500ms ease-in-out; transition: height 500ms ease-in-out; } .owl-carousel .owl-item{ float: left; } .owl-controls .owl-page, .owl-controls .owl-buttons div{ cursor: pointer; } .owl-controls { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /* mouse grab icon */ .grabbing { cursor:url(grabbing.png) 8 8, move; } /* fix */ .owl-carousel .owl-wrapper, .owl-carousel .owl-item{ -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); } /*syabout*/ .b-featured{ background: #f5f5f5; } .absybox{ width: 90%; height: auto; margin: 0 5%; padding: 40px 30px; box-shadow: 5px 5px 5px #e3e7e8; display: inline-block; background: #fff; } .absybox p{ text-indent: 2em; } /*nystyle*/ .position{ width: 100%; height: auto; position: relative; } .position h1 a{ position: absolute; color: #fff; top:24%; margin-top: 20px; color: #fff !important; text-decoration:none; font-size: 30px; font-weight: 600; } .juh{ background: #f76d2b; position: absolute; color: #fff; top:24%; right: 10%; margin-top: 20px; color: #fff !important; text-decoration:none; font-size: 24px; float: right; } .abwz{ width: 100%; margin: 0 auto; height: 48px; line-height: 38px; display: inline-block; } .abwz a{ color: #333; } .abnr{ margin: 30px 0 0; } .abnr p{ line-height: 22px; text-align: justify; } .s-lineDownLeft h2{ border-left: 5px solid #f76d2b; padding-left: 15px; font-size: 24px; width: 70%; float: left; } .nyboxh{ background: #f5f5f5; padding: 50px 0 0; } .nyboxh .abnr p{ text-indent:2em;} .nyboxb{ background: #fff; padding: 50px 0 80px; } .wenhua{ background: url(../images/backgrounds/reviews.jpg) center center no-repeat fixed; width: 100%; padding: 60px 0; margin: 50px 0; } .hzkh{ padding-top: 50px;} .whnr{ margin-top: 10px; } .whnr p{ margin-left: 16px; color: #666; } .wenhua .linktit b{ color: #555 !important; } .hzkh h3 b{ font-weight: normal; border-left: 3px solid #f76d2b; border-right: 3px solid #f76d2b; padding: 0 15px; } /*sheb*/ .wen-lg{ width: 100%; height: 100%; background: rgba(0,0,0,.7); position: fixed; left: 0; top: 0; z-index: 999999; } .wen-lg img{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; max-width: 100%; max-height: 100%; } .wen-lg>i{ display: block; position: absolute; top: 10%; right: 10%; font-size: 40px; color: #fff; } .sanj{ width:0; height:0; border-width:10px 10px 0; border-style:solid; border-color:#333 transparent transparent;/*灰 透明 透明 */ margin: 0 auto 10px; } .pic{ border: 1px solid #c4c4c4; padding: 3px; margin-bottom: 30px; } .pic:hover{ border: 1px solid #f76d2b; cursor: pointer; } .text{ margin: 30px 0 15px; color: #525252; } /*link*/ .lybox{ border-radius: 50px !important; background: #fff !important; fill: #fff; display: block; width: 100%; margin-bottom: 15px; padding: 12px 20px; font: 400 10px 'Open Sans',sans-serif; border: 1px solid #eeeeee; text-transform: uppercase; border-radius: 30px; text-indent: 0px; text-shadow: none; } .rightbox{ padding: 0 0 0 30px; } .linktit{ border-left: 3px solid #f76d2b; padding-left: 12px; display: inline-block; margin: 15px 0; } .linkright img{ width: 100%; height: auto; margin-bottom: 20px; } .contact{ background: #f5f5f5; padding: 38px; } .contact li{ list-style: none; margin-bottom: 12px; } .contact li span{ color: #f76d2b; margin-right: 8px; } .saig{ display: inline-block; margin-bottom:50px; width: 100%; padding: 0 0 50px 0 !important; text-align: center; } .saig li{ list-style: none; border-bottom:1px solid #eee; line-height: 42px; } .saig .active a{ color: #f76d2b; } .saig li a{ color: #555; } /*xinwen*/ .xinwen{ border: 1px solid #eee; padding: 5px; margin-bottom: 15px; } .xinwen img{ width: 30%; float: left; } .xinwen .wen_nei{ width: 66%; margin: 10px 2%; float: left; } .wen_nei h4{ font-size: 20px; border-left: 3px solid #f76d2b; padding-left: 8px; color: #333; } .wen_nei h4 time{ font-size: 18px; color: #666; } .wen_nei p{ color: #666; line-height: 26px; text-align: justify; } .wen_nei span{ float: right; color: #fff; background: #999; padding: 5px 15px; border-radius: 30px; } .wen_nei span:hover{ background: #f76d2b; } .nycp{ margin-bottom: 20px; display: inline-block; } .nybox{ margin-bottom: 70px;} .zhil{ width: 100%; height: auto; } .zhil>table>tbody{ width: 100%; max-width: 100%; margin-bottom: 20px; } .zhil>table>tbody>tr>td{ border: 1px solid #ddd !important; padding: 8px; line-height: 1.42857143; vertical-align: top; } .zhil p img{ width: 99.4%; height: auto; margin: 15px 0 30px; } /*文化*/ .sjlan{ display: none;} .syzs{ margin-left: 50px;} .ewm{ width: 120px; height: auto; margin-top: 12px;} .whzi{ padding-left: 50px;} @media only screen and (max-width: 768px){ .b-topBar{ display: none !important;} .sjlan{ display: block;} .b-welcome__text{ color: #333;} .syzs{ margin-left: 0px; } .owl-buttons{ width: 20%; height: auto; margin: 0 40%;} .b-welcome .container{ padding: 30px 15px 70px 15px;} .b-auto{ padding: 0 0 60px 0;} .b-info__latest{ display: none;} .b-info__twitter-article-content{ display: none; } .position{ display: none;} .s-lineDownLeft h2{ width: 100%;} .whzi{ padding-left: 0px;} .rightbox{ padding: 0;} .saig{ margin-bottom: 0;} }