html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; } article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { display: block; } audio, canvas, progress, video { display: inline-block; } audio:not([controls]) { display: none; height: 0; } progress { vertical-align: baseline; } template, [hidden] { display: none; } a { background-color: transparent; -webkit-text-decoration-skip: objects; } a:active, a:hover { outline-width: 0; } abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; } b, strong { font-weight: inherit; font-weight: bolder; } dfn { font-style: italic; } h1 { font-size: 2em; margin: 0.67em 0; } mark { background-color: #ff0; color: #000; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } img { border-style: none; } svg:not(:root) { overflow: hidden; } code, kbd, pre, samp { font-family: monospace,monospace; font-size: 1em; } figure { margin: 1em 40px; } hr { box-sizing: content-box; height: 0; overflow: visible; } button, input, select, textarea { font: inherit; margin: 0; } optgroup { font-weight: 700; } button, input { overflow: visible; } button, select { text-transform: none; } button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } fieldset { border: 1px solid silver; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; } textarea { overflow: auto; } [type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0; } [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } [type="search"] { -webkit-appearance: textfield; outline-offset: -2px; } [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-input-placeholder { color: inherit; opacity: 0.54; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } /*normalize css */ p, figure, h1, h2, h3, h4, h5, h6 { margin: 0; } ul { list-style: none; margin: 0; padding: 0; } a { text-decoration: none; } body { font-family: var(--font-family); color: #2d2d2d; font-size: 14px; } p { color: #2d2d2d; line-height: 1.5; font-size: 14px; } h1, h2, h3, h4, h5, h6 { font-family: var(--second-family); font-weight: 600; line-height: 1.2; } .hero__title, .section-title, .banner__text, .banner__worktime, .advantage__title, .difference__title, .features-title, .request__title, .info-card__title { font-family: var(--second-family); } .btn, .header__phone, .header__mail { font-family: var(--second-family); } .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; left: 0; top: 0; display: block; } .slick-track:before, .slick-track:after { content: ""; display: table; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { float: left; height: 100%; min-height: 1px; outline: none; display: none; } [dir="rtl"] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } /* Slick theme */ .slick-loading .slick-list { background: #fff url(../img/ajax-loader.gif) center center no-repeat; } .slick-prev, .slick-next { position: absolute; display: block; height: 20px; width: 20px; line-height: 0px; font-size: 0px; cursor: pointer; top: 50%; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); padding: 0; border: none; outline: none; } .slick-prev { left: 0px; } .slick-prev[dir="rtl"] { left: auto; right: 0px; } .slick-next { right: 0px; } .slick-next[dir="rtl"] { left: 0px; right: auto; } /* Dots */ .slick-dotted .slick-slider { margin-bottom: 30px; } .slick-dots { position: absolute; bottom: -25px; list-style: none; display: block; text-align: center; padding: 0; margin: 0; width: 100%; } .slick-dots li { position: relative; display: inline-block; height: 20px; width: 20px; margin: 0 5px; padding: 0; cursor: pointer; } .slick-dots li button { border: 0; background: transparent; display: block; height: 20px; width: 20px; line-height: 0px; font-size: 0px; color: transparent; padding: 5px; cursor: pointer; outline: none; } .slick-dots li button:hover, .slick-dots li button:focus { outline: none; } .slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1; } .slick-dots li button:before { position: absolute; top: 0; left: 0; content: "•"; width: 20px; height: 20px; font-size: 6px; line-height: 20px; text-align: center; color: black; opacity: 0.25; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-dots li.slick-active button:before { color: black; opacity: 0.75; } /* * animate.less v1.0.4 | animateforless.com * * ----------------------------------------------------------------------------- * * The MIT License (MIT) * * Copyright (c) 2014-2016 Carlos M. Bonilla * * Permission is hereby granted, free of charge, to any person obtaining a copy of * this software and associated documentation files (the "Software"), to deal in * the Software without restriction, including without limitation the rights to * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of * the Software, and to permit persons to whom the Software is furnished to do so, * subject to the following conditions: * * The above copyright notice and this permission notice shall be included in all * copies or substantial portions of the Software. * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ /* ******************************************************************************** ** ** ** LESS ANIMATION FRAMEWORK ** ** ** ******************************************************************************** */ .animated { -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; } .bounce { -webkit-animation-name: bounce; -moz-animation-name: bounce; -ms-animation-name: bounce; -o-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; -moz-transform-origin: center bottom; -ms-transform-origin: center bottom; -o-transform-origin: center bottom; transform-origin: center bottom; } .flash { -webkit-animation-name: flash; -moz-animation-name: flash; -ms-animation-name: flash; -o-animation-name: flash; animation-name: flash; } .flashmin { -webkit-animation-name: flashmin; -moz-animation-name: flashmin; -ms-animation-name: flashmin; -o-animation-name: flashmin; animation-name: flashmin; } .pulse { -webkit-animation-name: pulse; -moz-animation-name: pulse; -ms-animation-name: pulse; -o-animation-name: pulse; animation-name: pulse; } .rubberBand { -webkit-animation-name: rubberBand; -moz-animation-name: rubberBand; -ms-animation-name: rubberBand; -o-animation-name: rubberBand; animation-name: rubberBand; } .shake { -webkit-animation-name: shake; -moz-animation-name: shake; -ms-animation-name: shake; -o-animation-name: shake; animation-name: shake; } .swing { -webkit-animation-name: swing; -moz-animation-name: swing; -ms-animation-name: swing; -o-animation-name: swing; animation-name: swing; -webkit-transform-origin: top center; -moz-transform-origin: top center; -ms-transform-origin: top center; -o-transform-origin: top center; transform-origin: top center; } .tada { -webkit-animation-name: tada; -moz-animation-name: tada; -ms-animation-name: tada; -o-animation-name: tada; animation-name: tada; } .wobble { -webkit-animation-name: wobble; -moz-animation-name: wobble; -ms-animation-name: wobble; -o-animation-name: wobble; animation-name: wobble; } .bounceIn { -webkit-animation-name: bounceIn; -moz-animation-name: bounceIn; -ms-animation-name: bounceIn; -o-animation-name: bounceIn; animation-name: bounceIn; -webkit-animation-duration: 0.75s; -moz-animation-duration: 0.75s; -ms-animation-duration: 0.75s; -o-animation-duration: 0.75s; animation-duration: 0.75s; } .bounceInDown { -webkit-animation-name: bounceInDown; -moz-animation-name: bounceInDown; -ms-animation-name: bounceInDown; -o-animation-name: bounceInDown; animation-name: bounceInDown; } .bounceInLeft { -webkit-animation-name: bounceInLeft; -moz-animation-name: bounceInLeft; -ms-animation-name: bounceInLeft; -o-animation-name: bounceInLeft; animation-name: bounceInLeft; } .bounceInRight { -webkit-animation-name: bounceInRight; -moz-animation-name: bounceInRight; -ms-animation-name: bounceInRight; -o-animation-name: bounceInRight; animation-name: bounceInRight; } .bounceInUp { -webkit-animation-name: bounceInUp; -moz-animation-name: bounceInUp; -ms-animation-name: bounceInUp; -o-animation-name: bounceInUp; animation-name: bounceInUp; } .bounceOut { -webkit-animation-name: bounceOut; -moz-animation-name: bounceOut; -ms-animation-name: bounceOut; -o-animation-name: bounceOut; animation-name: bounceOut; -webkit-animation-duration: 0.75s; -moz-animation-duration: 0.75s; -ms-animation-duration: 0.75s; -o-animation-duration: 0.75s; animation-duration: 0.75s; } .bounceOutDown { -webkit-animation-name: bounceOutDown; -moz-animation-name: bounceOutDown; -ms-animation-name: bounceOutDown; -o-animation-name: bounceOutDown; animation-name: bounceOutDown; } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; -moz-animation-name: bounceOutLeft; -ms-animation-name: bounceOutLeft; -o-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } .bounceOutRight { -webkit-animation-name: bounceOutRight; -moz-animation-name: bounceOutRight; -ms-animation-name: bounceOutRight; -o-animation-name: bounceOutRight; animation-name: bounceOutRight; } .bounceOutUp { -webkit-animation-name: bounceOutUp; -moz-animation-name: bounceOutUp; -ms-animation-name: bounceOutUp; -o-animation-name: bounceOutUp; animation-name: bounceOutUp; } .fadeIn { -webkit-animation-name: fadeIn; -moz-animation-name: fadeIn; -ms-animation-name: fadeIn; -o-animation-name: fadeIn; animation-name: fadeIn; } .fadeInDown { -webkit-animation-name: fadeInDown; -moz-animation-name: fadeInDown; -ms-animation-name: fadeInDown; -o-animation-name: fadeInDown; animation-name: fadeInDown; } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; -moz-animation-name: fadeInDownBig; -ms-animation-name: fadeInDownBig; -o-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } .fadeInLeft { -webkit-animation-name: fadeInLeft; -moz-animation-name: fadeInLeft; -ms-animation-name: fadeInLeft; -o-animation-name: fadeInLeft; animation-name: fadeInLeft; } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; -moz-animation-name: fadeInLeftBig; -ms-animation-name: fadeInLeftBig; -o-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } .fadeInRight { -webkit-animation-name: fadeInRight; -moz-animation-name: fadeInRight; -ms-animation-name: fadeInRight; -o-animation-name: fadeInRight; animation-name: fadeInRight; } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; -moz-animation-name: fadeInRightBig; -ms-animation-name: fadeInRightBig; -o-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } .fadeInUp { -webkit-animation-name: fadeInUp; -moz-animation-name: fadeInUp; -ms-animation-name: fadeInUp; -o-animation-name: fadeInUp; animation-name: fadeInUp; } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; -moz-animation-name: fadeInUpBig; -ms-animation-name: fadeInUpBig; -o-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } .fadeOut { -webkit-animation-name: fadeOut; -moz-animation-name: fadeOut; -ms-animation-name: fadeOut; -o-animation-name: fadeOut; animation-name: fadeOut; } .fadeOutDown { -webkit-animation-name: fadeOutDown; -moz-animation-name: fadeOutDown; -ms-animation-name: fadeOutDown; -o-animation-name: fadeOutDown; animation-name: fadeOutDown; } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; -moz-animation-name: fadeOutDownBig; -ms-animation-name: fadeOutDownBig; -o-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; -moz-animation-name: fadeOutLeft; -ms-animation-name: fadeOutLeft; -o-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; -moz-animation-name: fadeOutLeftBig; -ms-animation-name: fadeOutLeftBig; -o-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } .fadeOutRight { -webkit-animation-name: fadeOutRight; -moz-animation-name: fadeOutRight; -ms-animation-name: fadeOutRight; -o-animation-name: fadeOutRight; animation-name: fadeOutRight; } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; -moz-animation-name: fadeOutRightBig; -ms-animation-name: fadeOutRightBig; -o-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } .fadeOutUp { -webkit-animation-name: fadeOutUp; -moz-animation-name: fadeOutUp; -ms-animation-name: fadeOutUp; -o-animation-name: fadeOutUp; animation-name: fadeOutUp; } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; -moz-animation-name: fadeOutUpBig; -ms-animation-name: fadeOutUpBig; -o-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } .flip { -webkit-animation-name: flip; -moz-animation-name: flip; -ms-animation-name: flip; -o-animation-name: flip; animation-name: flip; -webkit-backface-visibility: visible; -moz-backface-visibility: visible; -ms-backface-visibility: visible; -o-backface-visibility: visible; backface-visibility: visible; } .flipInX { -webkit-animation-name: flipInX; -moz-animation-name: flipInX; -ms-animation-name: flipInX; -o-animation-name: flipInX; animation-name: flipInX; -webkit-backface-visibility: visible !important; -moz-backface-visibility: visible !important; -ms-backface-visibility: visible !important; -o-backface-visibility: visible !important; backface-visibility: visible !important; } .flipInY { -webkit-animation-name: flipInY; -moz-animation-name: flipInY; -ms-animation-name: flipInY; -o-animation-name: flipInY; animation-name: flipInY; -webkit-backface-visibility: visible !important; -moz-backface-visibility: visible !important; -ms-backface-visibility: visible !important; -o-backface-visibility: visible !important; backface-visibility: visible !important; } .flipOutX { -webkit-animation-name: flipOutX; -moz-animation-name: flipOutX; -ms-animation-name: flipOutX; -o-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; -moz-backface-visibility: visible !important; -ms-backface-visibility: visible !important; -o-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-duration: 0.75s; -moz-animation-duration: 0.75s; -ms-animation-duration: 0.75s; -o-animation-duration: 0.75s; animation-duration: 0.75s; } .flipOutY { -webkit-animation-name: flipOutY; -moz-animation-name: flipOutY; -ms-animation-name: flipOutY; -o-animation-name: flipOutY; animation-name: flipOutY; -webkit-backface-visibility: visible !important; -moz-backface-visibility: visible !important; -ms-backface-visibility: visible !important; -o-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-duration: 0.75s; -moz-animation-duration: 0.75s; -ms-animation-duration: 0.75s; -o-animation-duration: 0.75s; animation-duration: 0.75s; } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; -moz-animation-name: lightSpeedIn; -ms-animation-name: lightSpeedIn; -o-animation-name: lightSpeedIn; animation-name: lightSpeedIn; } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; -moz-animation-name: lightSpeedOut; -ms-animation-name: lightSpeedOut; -o-animation-name: lightSpeedOut; animation-name: lightSpeedOut; } .rotate { -webkit-animation-name: rotate; -moz-animation-name: rotate; -ms-animation-name: rotate; -o-animation-name: rotate; animation-name: rotate; } .rotateCC { -webkit-animation-name: rotateCC; -moz-animation-name: rotateCC; -ms-animation-name: rotateCC; -o-animation-name: rotateCC; animation-name: rotateCC; } .rotateIn { -webkit-animation-name: rotateIn; -moz-animation-name: rotateIn; -ms-animation-name: rotateIn; -o-animation-name: rotateIn; animation-name: rotateIn; } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; -moz-animation-name: rotateInDownLeft; -ms-animation-name: rotateInDownLeft; -o-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; -moz-animation-name: rotateInDownRight; -ms-animation-name: rotateInDownRight; -o-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; -moz-animation-name: rotateInUpLeft; -ms-animation-name: rotateInUpLeft; -o-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; -moz-animation-name: rotateInUpRight; -ms-animation-name: rotateInUpRight; -o-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } .rotateOut { -webkit-animation-name: rotateOut; -moz-animation-name: rotateOut; -ms-animation-name: rotateOut; -o-animation-name: rotateOut; animation-name: rotateOut; } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; -moz-animation-name: rotateOutDownLeft; -ms-animation-name: rotateOutDownLeft; -o-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; -moz-animation-name: rotateOutDownRight; -ms-animation-name: rotateOutDownRight; -o-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; -moz-animation-name: rotateOutUpLeft; -ms-animation-name: rotateOutUpLeft; -o-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; -moz-animation-name: rotateOutUpRight; -ms-animation-name: rotateOutUpRight; -o-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } .hinge { -webkit-animation-name: hinge; -moz-animation-name: hinge; -ms-animation-name: hinge; -o-animation-name: hinge; animation-name: hinge; } .rollIn { -webkit-animation-name: rollIn; -moz-animation-name: rollIn; -ms-animation-name: rollIn; -o-animation-name: rollIn; animation-name: rollIn; } .rollOut { -webkit-animation-name: rollOut; -moz-animation-name: rollOut; -ms-animation-name: rollOut; -o-animation-name: rollOut; animation-name: rollOut; } .zoomIn { -webkit-animation-name: zoomIn; -moz-animation-name: zoomIn; -ms-animation-name: zoomIn; -o-animation-name: zoomIn; animation-name: zoomIn; } .zoomInDown { -webkit-animation-name: zoomInDown; -moz-animation-name: zoomInDown; -ms-animation-name: zoomInDown; -o-animation-name: zoomInDown; animation-name: zoomInDown; } .zoomInLeft { -webkit-animation-name: zoomInLeft; -moz-animation-name: zoomInLeft; -ms-animation-name: zoomInLeft; -o-animation-name: zoomInLeft; animation-name: zoomInLeft; } .zoomInRight { -webkit-animation-name: zoomInRight; -moz-animation-name: zoomInRight; -ms-animation-name: zoomInRight; -o-animation-name: zoomInRight; animation-name: zoomInRight; } .zoomInUp { -webkit-animation-name: zoomInUp; -moz-animation-name: zoomInUp; -ms-animation-name: zoomInUp; -o-animation-name: zoomInUp; animation-name: zoomInUp; } .zoomOut { -webkit-animation-name: zoomOut; -moz-animation-name: zoomOut; -ms-animation-name: zoomOut; -o-animation-name: zoomOut; animation-name: zoomOut; } .zoomOutDown { -webkit-animation-name: zoomOutDown; -moz-animation-name: zoomOutDown; -ms-animation-name: zoomOutDown; -o-animation-name: zoomOutDown; animation-name: zoomOutDown; } .zoomOutLeft { -webkit-animation-name: zoomOutLeft; -moz-animation-name: zoomOutLeft; -ms-animation-name: zoomOutLeft; -o-animation-name: zoomOutLeft; animation-name: zoomOutLeft; } .zoomOutRight { -webkit-animation-name: zoomOutRight; -moz-animation-name: zoomOutRight; -ms-animation-name: zoomOutRight; -o-animation-name: zoomOutRight; animation-name: zoomOutRight; } .zoomOutUp { -webkit-animation-name: zoomOutUp; -moz-animation-name: zoomOutUp; -ms-animation-name: zoomOutUp; -o-animation-name: zoomOutUp; animation-name: zoomOutUp; } .slideInDown { -webkit-animation-name: slideInDown; -moz-animation-name: slideInDown; -ms-animation-name: slideInDown; -o-animation-name: slideInDown; animation-name: slideInDown; } .slideInLeft { -webkit-animation-name: slideInLeft; -moz-animation-name: slideInLeft; -ms-animation-name: slideInLeft; -o-animation-name: slideInLeft; animation-name: slideInLeft; } .slideInRight { -webkit-animation-name: slideInRight; -moz-animation-name: slideInRight; -ms-animation-name: slideInRight; -o-animation-name: slideInRight; animation-name: slideInRight; } .slideInUp { -webkit-animation-name: slideInUp; -moz-animation-name: slideInUp; -ms-animation-name: slideInUp; -o-animation-name: slideInUp; animation-name: slideInUp; } .slideOutDown { -webkit-animation-name: slideOutDown; -moz-animation-name: slideOutDown; -ms-animation-name: slideOutDown; -o-animation-name: slideOutDown; animation-name: slideOutDown; } .slideOutLeft { -webkit-animation-name: slideOutLeft; -moz-animation-name: slideOutLeft; -ms-animation-name: slideOutLeft; -o-animation-name: slideOutLeft; animation-name: slideOutLeft; } .slideOutRight { -webkit-animation-name: slideOutRight; -moz-animation-name: slideOutRight; -ms-animation-name: slideOutRight; -o-animation-name: slideOutRight; animation-name: slideOutRight; } .slideOutUp { -webkit-animation-name: slideOutUp; -moz-animation-name: slideOutUp; -ms-animation-name: slideOutUp; -o-animation-name: slideOutUp; animation-name: slideOutUp; } @-webkit-keyframes bounce { 0%, 20%, 53%, 80%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); } 40%, 43% { -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0); } 70% { -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0, -4px, 0); } } @-moz-keyframes bounce { 0%, 20%, 53%, 80%, 100% { -moz-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -moz-transform: translate3d(0, 0, 0); } 40%, 43% { -moz-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -moz-transform: translate3d(0, -30px, 0); } 70% { -moz-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -moz-transform: translate3d(0, -15px, 0); } 90% { -moz-transform: translate3d(0, -4px, 0); } } @-o-keyframes bounce { 0%, 20%, 53%, 80%, 100% { -o-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -o-transform: translate3d(0, 0, 0); } 40%, 43% { -o-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -o-transform: translate3d(0, -30px, 0); } 70% { -o-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -o-transform: translate3d(0, -15px, 0); } 90% { -o-transform: translate3d(0, -4px, 0); } } @keyframes bounce { 0%, 20%, 53%, 80%, 100% { transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 0, 0); } 40%, 43% { transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transform: translate3d(0, -30px, 0); } 70% { transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transform: translate3d(0, -15px, 0); } 90% { transform: translate3d(0, -4px, 0); } } @-webkit-keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @-moz-keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @-o-keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @-webkit-keyframes flashmin { 0%, 50%, 100% { opacity: 1.00; } 25%, 75% { opacity: 0.33; } } @-moz-keyframes flashmin { 0%, 50%, 100% { opacity: 1.00; } 25%, 75% { opacity: 0.33; } } @-o-keyframes flashmin { 0%, 50%, 100% { opacity: 1.00; } 25%, 75% { opacity: 0.33; } } @keyframes flashmin { 0%, 50%, 100% { opacity: 1.00; } 25%, 75% { opacity: 0.33; } } @-webkit-keyframes pulse { 0% { -webkit-transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); } 100% { -webkit-transform: scale3d(1, 1, 1); } } @-moz-keyframes pulse { 0% { -moz-transform: scale3d(1, 1, 1); } 50% { -moz-transform: scale3d(1.05, 1.05, 1.05); } 100% { -moz-transform: scale3d(1, 1, 1); } } @-o-keyframes pulse { 0% { -o-transform: scale3d(1, 1, 1); } 50% { -o-transform: scale3d(1.05, 1.05, 1.05); } 100% { -o-transform: scale3d(1, 1, 1); } } @keyframes pulse { 0% { transform: scale3d(1, 1, 1); } 50% { transform: scale3d(1.05, 1.05, 1.05); } 100% { transform: scale3d(1, 1, 1); } } @-webkit-keyframes rubberBand { 0% { -webkit-transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); } 100% { -webkit-transform: scale3d(1, 1, 1); } } @-moz-keyframes rubberBand { 0% { -moz-transform: scale3d(1, 1, 1); } 30% { -moz-transform: scale3d(1.25, 0.75, 1); } 40% { -moz-transform: scale3d(0.75, 1.25, 1); } 50% { -moz-transform: scale3d(1.15, 0.85, 1); } 65% { -moz-transform: scale3d(0.95, 1.05, 1); } 75% { -moz-transform: scale3d(1.05, 0.95, 1); } 100% { -moz-transform: scale3d(1, 1, 1); } } @-o-keyframes rubberBand { 0% { -o-transform: scale3d(1, 1, 1); } 30% { -o-transform: scale3d(1.25, 0.75, 1); } 40% { -o-transform: scale3d(0.75, 1.25, 1); } 50% { -o-transform: scale3d(1.15, 0.85, 1); } 65% { -o-transform: scale3d(0.95, 1.05, 1); } 75% { -o-transform: scale3d(1.05, 0.95, 1); } 100% { -o-transform: scale3d(1, 1, 1); } } @keyframes rubberBand { 0% { transform: scale3d(1, 1, 1); } 30% { transform: scale3d(1.25, 0.75, 1); } 40% { transform: scale3d(0.75, 1.25, 1); } 50% { transform: scale3d(1.15, 0.85, 1); } 65% { transform: scale3d(0.95, 1.05, 1); } 75% { transform: scale3d(1.05, 0.95, 1); } 100% { transform: scale3d(1, 1, 1); } } @-webkit-keyframes shake { 0%, 100% { -webkit-transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); } } @-moz-keyframes shake { 0%, 100% { -moz-transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -moz-transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -moz-transform: translate3d(10px, 0, 0); } } @-o-keyframes shake { 0%, 100% { -o-transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -o-transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -o-transform: translate3d(10px, 0, 0); } } @keyframes shake { 0%, 100% { transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { transform: translate3d(10px, 0, 0); } } @-webkit-keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); } 100% { -webkit-transform: rotate3d(0, 0, 1, 0deg); } } @-moz-keyframes swing { 20% { -moz-transform: rotate3d(0, 0, 1, 15deg); } 40% { -moz-transform: rotate3d(0, 0, 1, -10deg); } 60% { -moz-transform: rotate3d(0, 0, 1, 5deg); } 80% { -moz-transform: rotate3d(0, 0, 1, -5deg); } 100% { -moz-transform: rotate3d(0, 0, 1, 0deg); } } @-o-keyframes swing { 20% { -o-transform: rotate3d(0, 0, 1, 15deg); } 40% { -o-transform: rotate3d(0, 0, 1, -10deg); } 60% { -o-transform: rotate3d(0, 0, 1, 5deg); } 80% { -o-transform: rotate3d(0, 0, 1, -5deg); } 100% { -o-transform: rotate3d(0, 0, 1, 0deg); } } @keyframes swing { 20% { transform: rotate3d(0, 0, 1, 15deg); } 40% { transform: rotate3d(0, 0, 1, -10deg); } 60% { transform: rotate3d(0, 0, 1, 5deg); } 80% { transform: rotate3d(0, 0, 1, -5deg); } 100% { transform: rotate3d(0, 0, 1, 0deg); } } @-webkit-keyframes tada { 0% { -webkit-transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } 100% { -webkit-transform: scale3d(1, 1, 1); } } @-moz-keyframes tada { 0% { -moz-transform: scale3d(1, 1, 1); } 10%, 20% { -moz-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -moz-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -moz-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } 100% { -moz-transform: scale3d(1, 1, 1); } } @-o-keyframes tada { 0% { -o-transform: scale3d(1, 1, 1); } 10%, 20% { -o-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -o-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -o-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } 100% { -o-transform: scale3d(1, 1, 1); } } @keyframes tada { 0% { transform: scale3d(1, 1, 1); } 10%, 20% { transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } 100% { transform: scale3d(1, 1, 1); } } @-webkit-keyframes wobble { 0% { -webkit-transform: none; } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } 100% { -webkit-transform: none; } } @-moz-keyframes wobble { 0% { -moz-transform: none; } 15% { -moz-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -moz-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -moz-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -moz-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -moz-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } 100% { -moz-transform: none; } } @-o-keyframes wobble { 0% { -o-transform: none; } 15% { -o-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -o-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -o-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -o-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -o-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } 100% { -o-transform: none; } } @keyframes wobble { 0% { transform: none; } 15% { transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } 100% { transform: none; } } @-webkit-keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); } } @-moz-keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, 100% { -moz-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -moz-transform: scale3d(0.3, 0.3, 0.3); } 20% { -moz-transform: scale3d(1.1, 1.1, 1.1); } 40% { -moz-transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -moz-transform: scale3d(1.03, 1.03, 1.03); } 80% { -moz-transform: scale3d(0.97, 0.97, 0.97); } 100% { opacity: 1; -moz-transform: scale3d(1, 1, 1); } } @-o-keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, 100% { -o-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -o-transform: scale3d(0.3, 0.3, 0.3); } 20% { -o-transform: scale3d(1.1, 1.1, 1.1); } 40% { -o-transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -o-transform: scale3d(1.03, 1.03, 1.03); } 80% { -o-transform: scale3d(0.97, 0.97, 0.97); } 100% { opacity: 1; -o-transform: scale3d(1, 1, 1); } } @keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, 100% { transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } 20% { transform: scale3d(1.1, 1.1, 1.1); } 40% { transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); } 80% { transform: scale3d(0.97, 0.97, 0.97); } 100% { opacity: 1; transform: scale3d(1, 1, 1); } } @-webkit-keyframes bounceInDown { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); } 100% { -webkit-transform: none; } } @-moz-keyframes bounceInDown { 0%, 60%, 75%, 90%, 100% { -moz-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -moz-transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -moz-transform: translate3d(0, 25px, 0); } 75% { -moz-transform: translate3d(0, -10px, 0); } 90% { -moz-transform: translate3d(0, 5px, 0); } 100% { -moz-transform: none; } } @-o-keyframes bounceInDown { 0%, 60%, 75%, 90%, 100% { -o-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -o-transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -o-transform: translate3d(0, 25px, 0); } 75% { -o-transform: translate3d(0, -10px, 0); } 90% { -o-transform: translate3d(0, 5px, 0); } 100% { -o-transform: none; } } @keyframes bounceInDown { 0%, 60%, 75%, 90%, 100% { transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; transform: translate3d(0, 25px, 0); } 75% { transform: translate3d(0, -10px, 0); } 90% { transform: translate3d(0, 5px, 0); } 100% { transform: none; } } @-webkit-keyframes bounceInLeft { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); } 100% { -webkit-transform: none; } } @-moz-keyframes bounceInLeft { 0%, 60%, 75%, 90%, 100% { -moz-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -moz-transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -moz-transform: translate3d(25px, 0, 0); } 75% { -moz-transform: translate3d(-10px, 0, 0); } 90% { -moz-transform: translate3d(5px, 0, 0); } 100% { -moz-transform: none; } } @-o-keyframes bounceInLeft { 0%, 60%, 75%, 90%, 100% { -o-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -o-transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -o-transform: translate3d(25px, 0, 0); } 75% { -o-transform: translate3d(-10px, 0, 0); } 90% { -o-transform: translate3d(5px, 0, 0); } 100% { -o-transform: none; } } @keyframes bounceInLeft { 0%, 60%, 75%, 90%, 100% { transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; transform: translate3d(25px, 0, 0); } 75% { transform: translate3d(-10px, 0, 0); } 90% { transform: translate3d(5px, 0, 0); } 100% { transform: none; } } @-webkit-keyframes bounceInRight { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); } 100% { -webkit-transform: none; } } @-moz-keyframes bounceInRight { 0%, 60%, 75%, 90%, 100% { -moz-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -moz-transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -moz-transform: translate3d(-25px, 0, 0); } 75% { -moz-transform: translate3d(10px, 0, 0); } 90% { -moz-transform: translate3d(-5px, 0, 0); } 100% { -moz-transform: none; } } @-o-keyframes bounceInRight { 0%, 60%, 75%, 90%, 100% { -o-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -o-transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -o-transform: translate3d(-25px, 0, 0); } 75% { -o-transform: translate3d(10px, 0, 0); } 90% { -o-transform: translate3d(-5px, 0, 0); } 100% { -o-transform: none; } } @keyframes bounceInRight { 0%, 60%, 75%, 90%, 100% { transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; transform: translate3d(-25px, 0, 0); } 75% { transform: translate3d(10px, 0, 0); } 90% { transform: translate3d(-5px, 0, 0); } 100% { transform: none; } } @-webkit-keyframes bounceInUp { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); } } @-moz-keyframes bounceInUp { 0%, 60%, 75%, 90%, 100% { -moz-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -moz-transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -moz-transform: translate3d(0, -20px, 0); } 75% { -moz-transform: translate3d(0, 10px, 0); } 90% { -moz-transform: translate3d(0, -5px, 0); } 100% { -moz-transform: translate3d(0, 0, 0); } } @-o-keyframes bounceInUp { 0%, 60%, 75%, 90%, 100% { -o-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -o-transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -o-transform: translate3d(0, -20px, 0); } 75% { -o-transform: translate3d(0, 10px, 0); } 90% { -o-transform: translate3d(0, -5px, 0); } 100% { -o-transform: translate3d(0, 0, 0); } } @keyframes bounceInUp { 0%, 60%, 75%, 90%, 100% { transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; transform: translate3d(0, -20px, 0); } 75% { transform: translate3d(0, 10px, 0); } 90% { transform: translate3d(0, -5px, 0); } 100% { transform: translate3d(0, 0, 0); } } @-webkit-keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); } 100% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); } } @-moz-keyframes bounceOut { 20% { -moz-transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; -moz-transform: scale3d(1.1, 1.1, 1.1); } 100% { opacity: 0; -moz-transform: scale3d(0.3, 0.3, 0.3); } } @-o-keyframes bounceOut { 20% { -o-transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; -o-transform: scale3d(1.1, 1.1, 1.1); } 100% { opacity: 0; -o-transform: scale3d(0.3, 0.3, 0.3); } } @keyframes bounceOut { 20% { transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; transform: scale3d(1.1, 1.1, 1.1); } 100% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } } @-webkit-keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); } } @-moz-keyframes bounceOutDown { 20% { -moz-transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -moz-transform: translate3d(0, -20px, 0); } 100% { opacity: 0; -moz-transform: translate3d(0, 2000px, 0); } } @-o-keyframes bounceOutDown { 20% { -o-transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -o-transform: translate3d(0, -20px, 0); } 100% { opacity: 0; -o-transform: translate3d(0, 2000px, 0); } } @keyframes bounceOutDown { 20% { transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; transform: translate3d(0, -20px, 0); } 100% { opacity: 0; transform: translate3d(0, 2000px, 0); } } @-webkit-keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); } } @-moz-keyframes bounceOutLeft { 20% { opacity: 1; -moz-transform: translate3d(20px, 0, 0); } 100% { opacity: 0; -moz-transform: translate3d(-2000px, 0, 0); } } @-o-keyframes bounceOutLeft { 20% { opacity: 1; -o-transform: translate3d(20px, 0, 0); } 100% { opacity: 0; -o-transform: translate3d(-2000px, 0, 0); } } @keyframes bounceOutLeft { 20% { opacity: 1; transform: translate3d(20px, 0, 0); } 100% { opacity: 0; transform: translate3d(-2000px, 0, 0); } } @-webkit-keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); } } @-moz-keyframes bounceOutRight { 20% { opacity: 1; -moz-transform: translate3d(-20px, 0, 0); } 100% { opacity: 0; -moz-transform: translate3d(2000px, 0, 0); } } @-o-keyframes bounceOutRight { 20% { opacity: 1; -o-transform: translate3d(-20px, 0, 0); } 100% { opacity: 0; -o-transform: translate3d(2000px, 0, 0); } } @keyframes bounceOutRight { 20% { opacity: 1; transform: translate3d(-20px, 0, 0); } 100% { opacity: 0; transform: translate3d(2000px, 0, 0); } } @-webkit-keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); } } @-moz-keyframes bounceOutUp { 20% { -moz-transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -moz-transform: translate3d(0, 20px, 0); } 100% { opacity: 0; -moz-transform: translate3d(0, -2000px, 0); } } @-o-keyframes bounceOutUp { 20% { -o-transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -o-transform: translate3d(0, 20px, 0); } 100% { opacity: 0; -o-transform: translate3d(0, -2000px, 0); } } @keyframes bounceOutUp { 20% { transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; transform: translate3d(0, 20px, 0); } 100% { opacity: 0; transform: translate3d(0, -2000px, 0); } } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); } 100% { opacity: 1; -webkit-transform: none; } } @-moz-keyframes fadeInDown { 0% { opacity: 0; -moz-transform: translate3d(0, -100%, 0); } 100% { opacity: 1; -moz-transform: none; } } @-o-keyframes fadeInDown { 0% { opacity: 0; -o-transform: translate3d(0, -100%, 0); } 100% { opacity: 1; -o-transform: none; } } @keyframes fadeInDown { 0% { opacity: 0; transform: translate3d(0, -100%, 0); } 100% { opacity: 1; transform: none; } } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); } 100% { opacity: 1; -webkit-transform: none; } } @-moz-keyframes fadeInDown { 0% { opacity: 0; -moz-transform: translate3d(0, -100%, 0); } 100% { opacity: 1; -moz-transform: none; } } @-o-keyframes fadeInDown { 0% { opacity: 0; -o-transform: translate3d(0, -100%, 0); } 100% { opacity: 1; -o-transform: none; } } @keyframes fadeInDown { 0% { opacity: 0; transform: translate3d(0, -100%, 0); } 100% { opacity: 1; transform: none; } } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); } 100% { opacity: 1; -webkit-transform: none; } } @-moz-keyframes fadeInDownBig { 0% { opacity: 0; -moz-transform: translate3d(0, -2000px, 0); } 100% { opacity: 1; -moz-transform: none; } } @-o-keyframes fadeInDownBig { 0% { opacity: 0; -o-transform: translate3d(0, -2000px, 0); } 100% { opacity: 1; -o-transform: none; } } @keyframes fadeInDownBig { 0% { opacity: 0; transform: translate3d(0, -2000px, 0); } 100% { opacity: 1; transform: none; } } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; } } @-moz-keyframes fadeInLeft { 0% { opacity: 0; -moz-transform: translate3d(-100%, 0, 0); } 100% { opacity: 1; -moz-transform: none; } } @-o-keyframes fadeInLeft { 0% { opacity: 0; -o-transform: translate3d(-100%, 0, 0); } 100% { opacity: 1; -o-transform: none; } } @keyframes fadeInLeft { 0% { opacity: 0; transform: translate3d(-100%, 0, 0); } 100% { opacity: 1; transform: none; } } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); } 100% { opacity: 1; -webkit-transform: none; } } @-moz-keyframes fadeInLeftBig { 0% { opacity: 0; -moz-transform: translate3d(-2000px, 0, 0); } 100% { opacity: 1; -moz-transform: none; } } @-o-keyframes fadeInLeftBig { 0% { opacity: 0; -o-transform: translate3d(-2000px, 0, 0); } 100% { opacity: 1; -o-transform: none; } } @keyframes fadeInLeftBig { 0% { opacity: 0; transform: translate3d(-2000px, 0, 0); } 100% { opacity: 1; transform: none; } } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; } } @-moz-keyframes fadeInRight { 0% { opacity: 0; -moz-transform: translate3d(100%, 0, 0); } 100% { opacity: 1; -moz-transform: none; } } @-o-keyframes fadeInRight { 0% { opacity: 0; -o-transform: translate3d(100%, 0, 0); } 100% { opacity: 1; -o-transform: none; } } @keyframes fadeInRight { 0% { opacity: 0; transform: translate3d(100%, 0, 0); } 100% { opacity: 1; transform: none; } } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); } 100% { opacity: 1; -webkit-transform: none; } } @-moz-keyframes fadeInRightBig { 0% { opacity: 0; -moz-transform: translate3d(2000px, 0, 0); } 100% { opacity: 1; -moz-transform: none; } } @-o-keyframes fadeInRightBig { 0% { opacity: 0; -o-transform: translate3d(2000px, 0, 0); } 100% { opacity: 1; -o-transform: none; } } @keyframes fadeInRightBig { 0% { opacity: 0; transform: translate3d(2000px, 0, 0); } 100% { opacity: 1; transform: none; } } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); } 100% { opacity: 1; -webkit-transform: none; } } @-moz-keyframes fadeInUp { 0% { opacity: 0; -moz-transform: translate3d(0, 100%, 0); } 100% { opacity: 1; -moz-transform: none; } } @-o-keyframes fadeInUp { 0% { opacity: 0; -o-transform: translate3d(0, 100%, 0); } 100% { opacity: 1; -o-transform: none; } } @keyframes fadeInUp { 0% { opacity: 0; transform: translate3d(0, 100%, 0); } 100% { opacity: 1; transform: none; } } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); } 100% { opacity: 1; -webkit-transform: none; } } @-moz-keyframes fadeInUpBig { 0% { opacity: 0; -moz-transform: translate3d(0, 2000px, 0); } 100% { opacity: 1; -moz-transform: none; } } @-o-keyframes fadeInUpBig { 0% { opacity: 0; -o-transform: translate3d(0, 2000px, 0); } 100% { opacity: 1; -o-transform: none; } } @keyframes fadeInUpBig { 0% { opacity: 0; transform: translate3d(0, 2000px, 0); } 100% { opacity: 1; transform: none; } } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @-moz-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @-o-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes fadeOutDown { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); } } @-moz-keyframes fadeOutDown { 0% { opacity: 1; } 100% { opacity: 0; -moz-transform: translate3d(0, 100%, 0); } } @-o-keyframes fadeOutDown { 0% { opacity: 1; } 100% { opacity: 0; -o-transform: translate3d(0, 100%, 0); } } @keyframes fadeOutDown { 0% { opacity: 1; } 100% { opacity: 0; transform: translate3d(0, 100%, 0); } } @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); } } @-moz-keyframes fadeOutDownBig { 0% { opacity: 1; } 100% { opacity: 0; -moz-transform: translate3d(0, 2000px, 0); } } @-o-keyframes fadeOutDownBig { 0% { opacity: 1; } 100% { opacity: 0; -o-transform: translate3d(0, 2000px, 0); } } @keyframes fadeOutDownBig { 0% { opacity: 1; } 100% { opacity: 0; transform: translate3d(0, 2000px, 0); } } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); } } @-moz-keyframes fadeOutLeft { 0% { opacity: 1; } 100% { opacity: 0; -moz-transform: translate3d(-100%, 0, 0); } } @-o-keyframes fadeOutLeft { 0% { opacity: 1; } 100% { opacity: 0; -o-transform: translate3d(-100%, 0, 0); } } @keyframes fadeOutLeft { 0% { opacity: 1; } 100% { opacity: 0; transform: translate3d(-100%, 0, 0); } } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); } } @-moz-keyframes fadeOutLeftBig { 0% { opacity: 1; } 100% { opacity: 0; -moz-transform: translate3d(-2000px, 0, 0); } } @-o-keyframes fadeOutLeftBig { 0% { opacity: 1; } 100% { opacity: 0; -o-transform: translate3d(-2000px, 0, 0); } } @keyframes fadeOutLeftBig { 0% { opacity: 1; } 100% { opacity: 0; transform: translate3d(-2000px, 0, 0); } } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); } } @-moz-keyframes fadeOutRight { 0% { opacity: 1; } 100% { opacity: 0; -moz-transform: translate3d(100%, 0, 0); } } @-o-keyframes fadeOutRight { 0% { opacity: 1; } 100% { opacity: 0; -o-transform: translate3d(100%, 0, 0); } } @keyframes fadeOutRight { 0% { opacity: 1; } 100% { opacity: 0; transform: translate3d(100%, 0, 0); } } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); } } @-moz-keyframes fadeOutRightBig { 0% { opacity: 1; } 100% { opacity: 0; -moz-transform: translate3d(2000px, 0, 0); } } @-o-keyframes fadeOutRightBig { 0% { opacity: 1; } 100% { opacity: 0; -o-transform: translate3d(2000px, 0, 0); } } @keyframes fadeOutRightBig { 0% { opacity: 1; } 100% { opacity: 0; transform: translate3d(2000px, 0, 0); } } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); } } @-moz-keyframes fadeOutUp { 0% { opacity: 1; } 100% { opacity: 0; -moz-transform: translate3d(0, -100%, 0); } } @-o-keyframes fadeOutUp { 0% { opacity: 1; } 100% { opacity: 0; -o-transform: translate3d(0, -100%, 0); } } @keyframes fadeOutUp { 0% { opacity: 1; } 100% { opacity: 0; transform: translate3d(0, -100%, 0); } } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); } } @-moz-keyframes fadeOutUpBig { 0% { opacity: 1; } 100% { opacity: 0; -moz-transform: translate3d(0, -2000px, 0); } } @-o-keyframes fadeOutUpBig { 0% { opacity: 1; } 100% { opacity: 0; -o-transform: translate3d(0, -2000px, 0); } } @keyframes fadeOutUpBig { 0% { opacity: 1; } 100% { opacity: 0; transform: translate3d(0, -2000px, 0); } } @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95); -webkit-animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px); -webkit-animation-timing-function: ease-in; } } @-moz-keyframes flip { 0% { -moz-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -moz-animation-timing-function: ease-out; } 40% { -moz-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -moz-animation-timing-function: ease-out; } 50% { -moz-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -moz-animation-timing-function: ease-in; } 80% { -moz-transform: perspective(400px) scale3d(0.95, 0.95, 0.95); -moz-animation-timing-function: ease-in; } 100% { -moz-transform: perspective(400px); -moz-animation-timing-function: ease-in; } } @-o-keyframes flip { 0% { -o-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -o-animation-timing-function: ease-out; } 40% { -o-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -o-animation-timing-function: ease-out; } 50% { -o-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -o-animation-timing-function: ease-in; } 80% { -o-transform: perspective(400px) scale3d(0.95, 0.95, 0.95); -o-animation-timing-function: ease-in; } 100% { -o-transform: perspective(400px); -o-animation-timing-function: ease-in; } } @keyframes flip { 0% { transform: perspective(400px) rotate3d(0, 1, 0, -360deg); animation-timing-function: ease-out; } 40% { transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); animation-timing-function: ease-out; } 50% { transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); animation-timing-function: ease-in; } 80% { transform: perspective(400px) scale3d(0.95, 0.95, 0.95); animation-timing-function: ease-in; } 100% { transform: perspective(400px); animation-timing-function: ease-in; } } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } 100% { -webkit-transform: perspective(400px); } } @-moz-keyframes flipInX { 0% { -moz-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -moz-animation-timing-function: ease-in; opacity: 0; } 40% { -moz-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -moz-animation-timing-function: ease-in; } 60% { -moz-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -moz-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } 100% { -moz-transform: perspective(400px); } } @-o-keyframes flipInX { 0% { -o-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -o-animation-timing-function: ease-in; opacity: 0; } 40% { -o-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -o-animation-timing-function: ease-in; } 60% { -o-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -o-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } 100% { -o-transform: perspective(400px); } } @keyframes flipInX { 0% { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); animation-timing-function: ease-in; opacity: 0; } 40% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); animation-timing-function: ease-in; } 60% { transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } 100% { transform: perspective(400px); } } @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } 100% { -webkit-transform: perspective(400px); } } @-moz-keyframes flipInY { 0% { -moz-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -moz-animation-timing-function: ease-in; opacity: 0; } 40% { -moz-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -moz-animation-timing-function: ease-in; } 60% { -moz-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -moz-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } 100% { -moz-transform: perspective(400px); } } @-o-keyframes flipInY { 0% { -o-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -o-animation-timing-function: ease-in; opacity: 0; } 40% { -o-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -o-animation-timing-function: ease-in; } 60% { -o-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -o-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } 100% { -o-transform: perspective(400px); } } @keyframes flipInY { 0% { transform: perspective(400px) rotate3d(0, 1, 0, 90deg); animation-timing-function: ease-in; opacity: 0; } 40% { transform: perspective(400px) rotate3d(0, 1, 0, -20deg); animation-timing-function: ease-in; } 60% { transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } 100% { transform: perspective(400px); } } @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } @-moz-keyframes flipOutX { 0% { -moz-transform: perspective(400px); } 30% { -moz-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } 100% { -moz-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } @-o-keyframes flipOutX { 0% { -o-transform: perspective(400px); } 30% { -o-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } 100% { -o-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } @keyframes flipOutX { 0% { transform: perspective(400px); } 30% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } 100% { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } @-webkit-keyframes flipOutY { 0% { -webkit-transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } @-moz-keyframes flipOutY { 0% { -moz-transform: perspective(400px); } 30% { -moz-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } 100% { -moz-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } @-o-keyframes flipOutY { 0% { -o-transform: perspective(400px); } 30% { -o-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } 100% { -o-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } @keyframes flipOutY { 0% { transform: perspective(400px); } 30% { transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } 100% { transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } @-webkit-keyframes lightSpeedIn { 0% { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); opacity: 1; } 100% { -webkit-transform: none; opacity: 1; } } @-moz-keyframes lightSpeedIn { 0% { -moz-transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -moz-transform: skewX(20deg); opacity: 1; } 80% { -moz-transform: skewX(-5deg); opacity: 1; } 100% { -moz-transform: none; opacity: 1; } } @-o-keyframes lightSpeedIn { 0% { -o-transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -o-transform: skewX(20deg); opacity: 1; } 80% { -o-transform: skewX(-5deg); opacity: 1; } 100% { -o-transform: none; opacity: 1; } } @keyframes lightSpeedIn { 0% { transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { transform: skewX(20deg); opacity: 1; } 80% { transform: skewX(-5deg); opacity: 1; } 100% { transform: none; opacity: 1; } } @-webkit-keyframes lightSpeedOut { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); } } @-moz-keyframes lightSpeedOut { 0% { opacity: 1; } 100% { opacity: 0; -moz-transform: translate3d(100%, 0, 0) skewX(30deg); } } @-o-keyframes lightSpeedOut { 0% { opacity: 1; } 100% { opacity: 0; -o-transform: translate3d(100%, 0, 0) skewX(30deg); } } @keyframes lightSpeedOut { 0% { opacity: 1; } 100% { opacity: 0; transform: translate3d(100%, 0, 0) skewX(30deg); } } @-webkit-keyframes rotate { 0% { -webkit-transform-origin: center center; -webkit-transform: rotate3d(0, 0, 1, -360deg); } 100% { -webkit-transform-origin: center center; -webkit-transform: rotate3d(0, 0, 1, 0deg); } } @-moz-keyframes rotate { 0% { -moz-transform-origin: center center; -moz-transform: rotate3d(0, 0, 1, -360deg); } 100% { -moz-transform-origin: center center; -moz-transform: rotate3d(0, 0, 1, 0deg); } } @-o-keyframes rotate { 0% { -o-transform-origin: center center; -o-transform: rotate3d(0, 0, 1, -360deg); } 100% { -o-transform-origin: center center; -o-transform: rotate3d(0, 0, 1, 0deg); } } @keyframes rotate { 0% { transform-origin: center center; transform: rotate3d(0, 0, 1, -360deg); } 100% { transform-origin: center center; transform: rotate3d(0, 0, 1, 0deg); } } @-webkit-keyframes rotateCC { 0% { -webkit-transform-origin: center center; -webkit-transform: rotate3d(0, 0, 1, 360deg); } 100% { -webkit-transform-origin: center center; -webkit-transform: rotate3d(0, 0, 1, 0deg); } } @-moz-keyframes rotateCC { 0% { -moz-transform-origin: center center; -moz-transform: rotate3d(0, 0, 1, 360deg); } 100% { -moz-transform-origin: center center; -moz-transform: rotate3d(0, 0, 1, 0deg); } } @-o-keyframes rotateCC { 0% { -o-transform-origin: center center; -o-transform: rotate3d(0, 0, 1, 360deg); } 100% { -o-transform-origin: center center; -o-transform: rotate3d(0, 0, 1, 0deg); } } @keyframes rotateCC { 0% { transform-origin: center center; transform: rotate3d(0, 0, 1, 360deg); } 100% { transform-origin: center center; transform: rotate3d(0, 0, 1, 0deg); } } @-webkit-keyframes rotateIn { 0% { opacity: 0; -webkit-transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); } 100% { opacity: 1; -webkit-transform-origin: center; -webkit-transform: none; } } @-moz-keyframes rotateIn { 0% { opacity: 0; -moz-transform-origin: center; -moz-transform: rotate3d(0, 0, 1, -200deg); } 100% { opacity: 1; -moz-transform-origin: center; -moz-transform: none; } } @-o-keyframes rotateIn { 0% { opacity: 0; -o-transform-origin: center; -o-transform: rotate3d(0, 0, 1, -200deg); } 100% { opacity: 1; -o-transform-origin: center; -o-transform: none; } } @keyframes rotateIn { 0% { opacity: 0; transform-origin: center; transform: rotate3d(0, 0, 1, -200deg); } 100% { opacity: 1; transform-origin: center; transform: none; } } @-webkit-keyframes rotateInDownLeft { 0% { opacity: 0; -webkit-transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); } 100% { opacity: 1; -webkit-transform-origin: left bottom; -webkit-transform: none; } } @-moz-keyframes rotateInDownLeft { 0% { opacity: 0; -moz-transform-origin: left bottom; -moz-transform: rotate3d(0, 0, 1, -45deg); } 100% { opacity: 1; -moz-transform-origin: left bottom; -moz-transform: none; } } @-o-keyframes rotateInDownLeft { 0% { opacity: 0; -o-transform-origin: left bottom; -o-transform: rotate3d(0, 0, 1, -45deg); } 100% { opacity: 1; -o-transform-origin: left bottom; -o-transform: none; } } @keyframes rotateInDownLeft { 0% { opacity: 0; transform-origin: left bottom; transform: rotate3d(0, 0, 1, -45deg); } 100% { opacity: 1; transform-origin: left bottom; transform: none; } } @-webkit-keyframes rotateInDownRight { 0% { opacity: 0; -webkit-transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); } 100% { opacity: 1; -webkit-transform-origin: right bottom; -webkit-transform: none; } } @-moz-keyframes rotateInDownRight { 0% { opacity: 0; -moz-transform-origin: right bottom; -moz-transform: rotate3d(0, 0, 1, 45deg); } 100% { opacity: 1; -moz-transform-origin: right bottom; -moz-transform: none; } } @-o-keyframes rotateInDownRight { 0% { opacity: 0; -o-transform-origin: right bottom; -o-transform: rotate3d(0, 0, 1, 45deg); } 100% { opacity: 1; -o-transform-origin: right bottom; -o-transform: none; } } @keyframes rotateInDownRight { 0% { opacity: 0; transform-origin: right bottom; transform: rotate3d(0, 0, 1, 45deg); } 100% { opacity: 1; transform-origin: right bottom; transform: none; } } @-webkit-keyframes rotateInUpLeft { 0% { opacity: 0; -webkit-transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); } 100% { opacity: 1; -webkit-transform-origin: left bottom; -webkit-transform: none; } } @-moz-keyframes rotateInUpLeft { 0% { opacity: 0; -moz-transform-origin: left bottom; -moz-transform: rotate3d(0, 0, 1, 45deg); } 100% { opacity: 1; -moz-transform-origin: left bottom; -moz-transform: none; } } @-o-keyframes rotateInUpLeft { 0% { opacity: 0; -o-transform-origin: left bottom; -o-transform: rotate3d(0, 0, 1, 45deg); } 100% { opacity: 1; -o-transform-origin: left bottom; -o-transform: none; } } @keyframes rotateInUpLeft { 0% { opacity: 0; transform-origin: left bottom; transform: rotate3d(0, 0, 1, 45deg); } 100% { opacity: 1; transform-origin: left bottom; transform: none; } } @-webkit-keyframes rotateInDownLeft { 0% { opacity: 0; -webkit-transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); } 100% { opacity: 1; -webkit-transform-origin: right bottom; -webkit-transform: none; } } @-moz-keyframes rotateInDownLeft { 0% { opacity: 0; -moz-transform-origin: right bottom; -moz-transform: rotate3d(0, 0, 1, -90deg); } 100% { opacity: 1; -moz-transform-origin: right bottom; -moz-transform: none; } } @-o-keyframes rotateInDownLeft { 0% { opacity: 0; -o-transform-origin: right bottom; -o-transform: rotate3d(0, 0, 1, -90deg); } 100% { opacity: 1; -o-transform-origin: right bottom; -o-transform: none; } } @keyframes rotateInDownLeft { 0% { opacity: 0; transform-origin: right bottom; transform: rotate3d(0, 0, 1, -90deg); } 100% { opacity: 1; transform-origin: right bottom; transform: none; } } @-webkit-keyframes rotateOut { 0% { opacity: 1; -webkit-transform-origin: center; } 100% { opacity: 0; -webkit-transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); } } @-moz-keyframes rotateOut { 0% { opacity: 1; -moz-transform-origin: center; } 100% { opacity: 0; -moz-transform-origin: center; -moz-transform: rotate3d(0, 0, 1, 200deg); } } @-o-keyframes rotateOut { 0% { opacity: 1; -o-transform-origin: center; } 100% { opacity: 0; -o-transform-origin: center; -o-transform: rotate3d(0, 0, 1, 200deg); } } @keyframes rotateOut { 0% { opacity: 1; transform-origin: center; } 100% { opacity: 0; transform-origin: center; transform: rotate3d(0, 0, 1, 200deg); } } @-webkit-keyframes rotateOutDownLeft { 0% { opacity: 1; -webkit-transform-origin: left bottom; } 100% { opacity: 0; -webkit-transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); } } @-moz-keyframes rotateOutDownLeft { 0% { opacity: 1; -moz-transform-origin: left bottom; } 100% { opacity: 0; -moz-transform-origin: left bottom; -moz-transform: rotate3d(0, 0, 1, 45deg); } } @-o-keyframes rotateOutDownLeft { 0% { opacity: 1; -o-transform-origin: left bottom; } 100% { opacity: 0; -o-transform-origin: left bottom; -o-transform: rotate3d(0, 0, 1, 45deg); } } @keyframes rotateOutDownLeft { 0% { opacity: 1; transform-origin: left bottom; } 100% { opacity: 0; transform-origin: left bottom; transform: rotate3d(0, 0, 1, 45deg); } } @-webkit-keyframes rotateOutDownRight { 0% { opacity: 1; -webkit-transform-origin: right bottom; } 100% { opacity: 0; -webkit-transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); } } @-moz-keyframes rotateOutDownRight { 0% { opacity: 1; -moz-transform-origin: right bottom; } 100% { opacity: 0; -moz-transform-origin: right bottom; -moz-transform: rotate3d(0, 0, 1, -45deg); } } @-o-keyframes rotateOutDownRight { 0% { opacity: 1; -o-transform-origin: right bottom; } 100% { opacity: 0; -o-transform-origin: right bottom; -o-transform: rotate3d(0, 0, 1, -45deg); } } @keyframes rotateOutDownRight { 0% { opacity: 1; transform-origin: right bottom; } 100% { opacity: 0; transform-origin: right bottom; transform: rotate3d(0, 0, 1, -45deg); } } @-webkit-keyframes rotateOutUpLeft { 0% { opacity: 1; -webkit-transform-origin: left bottom; } 100% { opacity: 0; -webkit-transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); } } @-moz-keyframes rotateOutUpLeft { 0% { opacity: 1; -moz-transform-origin: left bottom; } 100% { opacity: 0; -moz-transform-origin: left bottom; -moz-transform: rotate3d(0, 0, 1, -45deg); } } @-o-keyframes rotateOutUpLeft { 0% { opacity: 1; -o-transform-origin: left bottom; } 100% { opacity: 0; -o-transform-origin: left bottom; -o-transform: rotate3d(0, 0, 1, -45deg); } } @keyframes rotateOutUpLeft { 0% { opacity: 1; transform-origin: left bottom; } 100% { opacity: 0; transform-origin: left bottom; transform: rotate3d(0, 0, 1, -45deg); } } @-webkit-keyframes rotateOutUpRight { 0% { opacity: 1; -webkit-transform-origin: right bottom; } 100% { opacity: 0; -webkit-transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); } } @-moz-keyframes rotateOutUpRight { 0% { opacity: 1; -moz-transform-origin: right bottom; } 100% { opacity: 0; -moz-transform-origin: right bottom; -moz-transform: rotate3d(0, 0, 1, 90deg); } } @-o-keyframes rotateOutUpRight { 0% { opacity: 1; -o-transform-origin: right bottom; } 100% { opacity: 0; -o-transform-origin: right bottom; -o-transform: rotate3d(0, 0, 1, 90deg); } } @keyframes rotateOutUpRight { 0% { opacity: 1; transform-origin: right bottom; } 100% { opacity: 0; transform-origin: right bottom; transform: rotate3d(0, 0, 1, 90deg); } } @-webkit-keyframes hinge { 0% { -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; -webkit-transform: rotate3d(0, 0, 1, 80deg); } 40%, 80% { -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; -webkit-transform: rotate3d(0, 0, 1, 60deg); opacity: 1; } 100% { -webkit-transform: translate3d(0, 700px, 0); opacity: 0; } } @-moz-keyframes hinge { 0% { -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } 20%, 60% { -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; -moz-transform: rotate3d(0, 0, 1, 80deg); } 40%, 80% { -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; -moz-transform: rotate3d(0, 0, 1, 60deg); opacity: 1; } 100% { -moz-transform: translate3d(0, 700px, 0); opacity: 0; } } @-o-keyframes hinge { 0% { -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } 20%, 60% { -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; -o-transform: rotate3d(0, 0, 1, 80deg); } 40%, 80% { -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; -o-transform: rotate3d(0, 0, 1, 60deg); opacity: 1; } 100% { -o-transform: translate3d(0, 700px, 0); opacity: 0; } } @keyframes hinge { 0% { transform-origin: top left; animation-timing-function: ease-in-out; } 20%, 60% { transform-origin: top left; animation-timing-function: ease-in-out; transform: rotate3d(0, 0, 1, 80deg); } 40%, 80% { transform-origin: top left; animation-timing-function: ease-in-out; transform: rotate3d(0, 0, 1, 60deg); opacity: 1; } 100% { transform: translate3d(0, 700px, 0); opacity: 0; } } @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } 100% { opacity: 1; -webkit-transform: none; } } @-moz-keyframes rollIn { 0% { opacity: 0; -moz-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } 100% { opacity: 1; -moz-transform: none; } } @-o-keyframes rollIn { 0% { opacity: 0; -o-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } 100% { opacity: 1; -o-transform: none; } } @keyframes rollIn { 0% { opacity: 0; transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } 100% { opacity: 1; transform: none; } } @-webkit-keyframes rollOut { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } @-moz-keyframes rollOut { 0% { opacity: 1; } 100% { opacity: 0; -moz-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } @-o-keyframes rollOut { 0% { opacity: 1; } 100% { opacity: 0; -o-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } @keyframes rollOut { 0% { opacity: 1; } 100% { opacity: 0; transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } @-webkit-keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @-moz-keyframes zoomIn { 0% { opacity: 0; -moz-transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @-o-keyframes zoomIn { 0% { opacity: 0; -o-transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @keyframes zoomIn { 0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @-webkit-keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @-moz-keyframes zoomInDown { 0% { opacity: 0; -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -moz-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -moz-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @-o-keyframes zoomInDown { 0% { opacity: 0; -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -o-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -o-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInDown { 0% { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @-webkit-keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @-moz-keyframes zoomInLeft { 0% { opacity: 0; -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -moz-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -moz-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @-o-keyframes zoomInLeft { 0% { opacity: 0; -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -o-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -o-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInLeft { 0% { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @-webkit-keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @-moz-keyframes zoomInRight { 0% { opacity: 0; -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -moz-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -moz-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @-o-keyframes zoomInRight { 0% { opacity: 0; -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -o-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -o-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInRight { 0% { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @-webkit-keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @-moz-keyframes zoomInUp { 0% { opacity: 0; -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -moz-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -moz-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @-o-keyframes zoomInUp { 0% { opacity: 0; -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -o-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -o-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInUp { 0% { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @-webkit-keyframes zoomOut { 0% { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); } 100% { opacity: 0; } } @-moz-keyframes zoomOut { 0% { opacity: 1; } 50% { opacity: 0; -moz-transform: scale3d(0.3, 0.3, 0.3); } 100% { opacity: 0; } } @-o-keyframes zoomOut { 0% { opacity: 1; } 50% { opacity: 0; -o-transform: scale3d(0.3, 0.3, 0.3); } 100% { opacity: 0; } } @keyframes zoomOut { 0% { opacity: 1; } 50% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } 100% { opacity: 0; } } @-webkit-keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 100% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @-moz-keyframes zoomOutDown { 40% { opacity: 1; -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -moz-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 100% { opacity: 0; -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -moz-transform-origin: center bottom; -moz-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @-o-keyframes zoomOutDown { 40% { opacity: 1; -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -o-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 100% { opacity: 0; -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -o-transform-origin: center bottom; -o-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomOutDown { 40% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 100% { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform-origin: center bottom; animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @-webkit-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } 100% { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; } } @-moz-keyframes zoomOutLeft { 40% { opacity: 1; -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } 100% { opacity: 0; -moz-transform: scale(0.1) translate3d(-2000px, 0, 0); -moz-transform-origin: left center; } } @-o-keyframes zoomOutLeft { 40% { opacity: 1; -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } 100% { opacity: 0; -o-transform: scale(0.1) translate3d(-2000px, 0, 0); -o-transform-origin: left center; } } @keyframes zoomOutLeft { 40% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } 100% { opacity: 0; transform: scale(0.1) translate3d(-2000px, 0, 0); transform-origin: left center; } } @-webkit-keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } 100% { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; } } @-moz-keyframes zoomOutRight { 40% { opacity: 1; -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } 100% { opacity: 0; -moz-transform: scale(0.1) translate3d(2000px, 0, 0); -moz-transform-origin: right center; } } @-o-keyframes zoomOutRight { 40% { opacity: 1; -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } 100% { opacity: 0; -o-transform: scale(0.1) translate3d(2000px, 0, 0); -o-transform-origin: right center; } } @keyframes zoomOutRight { 40% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } 100% { opacity: 0; transform: scale(0.1) translate3d(2000px, 0, 0); transform-origin: right center; } } @-webkit-keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 100% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @-moz-keyframes zoomOutUp { 40% { opacity: 1; -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -moz-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 100% { opacity: 0; -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -moz-transform-origin: center bottom; -moz-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @-o-keyframes zoomOutUp { 40% { opacity: 1; -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -o-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 100% { opacity: 0; -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -o-transform-origin: center bottom; -o-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomOutUp { 40% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 100% { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform-origin: center bottom; animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @-webkit-keyframes slideInDown { 0% { -webkit-transform: translateY(-100%); visibility: visible; } 100% { -webkit-transform: translateY(0); } } @-moz-keyframes slideInDown { 0% { -moz-transform: translateY(-100%); visibility: visible; } 100% { -moz-transform: translateY(0); } } @-o-keyframes slideInDown { 0% { -o-transform: translateY(-100%); visibility: visible; } 100% { -o-transform: translateY(0); } } @keyframes slideInDown { 0% { transform: translateY(-100%); visibility: visible; } 100% { transform: translateY(0); } } @-webkit-keyframes slideInLeft { 0% { -webkit-transform: translateX(-100%); visibility: visible; } 100% { -webkit-transform: translateX(0); } } @-moz-keyframes slideInLeft { 0% { -moz-transform: translateX(-100%); visibility: visible; } 100% { -moz-transform: translateX(0); } } @-o-keyframes slideInLeft { 0% { -o-transform: translateX(-100%); visibility: visible; } 100% { -o-transform: translateX(0); } } @keyframes slideInLeft { 0% { transform: translateX(-100%); visibility: visible; } 100% { transform: translateX(0); } } @-webkit-keyframes slideInRight { 0% { -webkit-transform: translateX(100%); visibility: visible; } 100% { -webkit-transform: translateX(0); } } @-moz-keyframes slideInRight { 0% { -moz-transform: translateX(100%); visibility: visible; } 100% { -moz-transform: translateX(0); } } @-o-keyframes slideInRight { 0% { -o-transform: translateX(100%); visibility: visible; } 100% { -o-transform: translateX(0); } } @keyframes slideInRight { 0% { transform: translateX(100%); visibility: visible; } 100% { transform: translateX(0); } } @-webkit-keyframes slideInUp { 0% { -webkit-transform: translateY(100%); visibility: visible; } 100% { -webkit-transform: translateY(0); } } @-moz-keyframes slideInUp { 0% { -moz-transform: translateY(100%); visibility: visible; } 100% { -moz-transform: translateY(0); } } @-o-keyframes slideInUp { 0% { -o-transform: translateY(100%); visibility: visible; } 100% { -o-transform: translateY(0); } } @keyframes slideInUp { 0% { transform: translateY(100%); visibility: visible; } 100% { transform: translateY(0); } } @-webkit-keyframes slideOutDown { 0% { -webkit-transform: translateY(0); } 100% { visibility: hidden; -webkit-transform: translateY(100%); } } @-moz-keyframes slideOutDown { 0% { -moz-transform: translateY(0); } 100% { visibility: hidden; -moz-transform: translateY(100%); } } @-o-keyframes slideOutDown { 0% { -o-transform: translateY(0); } 100% { visibility: hidden; -o-transform: translateY(100%); } } @keyframes slideOutDown { 0% { transform: translateY(0); } 100% { visibility: hidden; transform: translateY(100%); } } @-webkit-keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); } 100% { visibility: hidden; -webkit-transform: translateX(-100%); } } @-moz-keyframes slideOutLeft { 0% { -moz-transform: translateX(0); } 100% { visibility: hidden; -moz-transform: translateX(-100%); } } @-o-keyframes slideOutLeft { 0% { -o-transform: translateX(0); } 100% { visibility: hidden; -o-transform: translateX(-100%); } } @keyframes slideOutLeft { 0% { transform: translateX(0); } 100% { visibility: hidden; transform: translateX(-100%); } } @-webkit-keyframes slideOutRight { 0% { -webkit-transform: translateX(0); } 100% { visibility: hidden; -webkit-transform: translateX(100%); } } @-moz-keyframes slideOutRight { 0% { -moz-transform: translateX(0); } 100% { visibility: hidden; -moz-transform: translateX(100%); } } @-o-keyframes slideOutRight { 0% { -o-transform: translateX(0); } 100% { visibility: hidden; -o-transform: translateX(100%); } } @keyframes slideOutRight { 0% { transform: translateX(0); } 100% { visibility: hidden; transform: translateX(100%); } } @-webkit-keyframes slideOutUp { 0% { -webkit-transform: translateY(0); } 100% { -webkit-transform: translateY(-100%); visibility: hidden; } } @-moz-keyframes slideOutUp { 0% { -moz-transform: translateY(0); } 100% { -moz-transform: translateY(-100%); visibility: hidden; } } @-o-keyframes slideOutUp { 0% { -o-transform: translateY(0); } 100% { -o-transform: translateY(-100%); visibility: hidden; } } @keyframes slideOutUp { 0% { transform: translateY(0); } 100% { transform: translateY(-100%); visibility: hidden; } } :root { --font-family: "SF Pro Text", sans-serif; --second-family: "Inter", sans-serif; } /*begin general styles*/ * { box-sizing: border-box; } a, button, input, textarea, .js-svg { -webkit-transition: background .2s, border .2s, color .2s; -o-transition: background .2s, border .2s, color .2s; transition: background .2s, border .2s, color .2s; } html, body { height: 100%; background: #Fff; font-family: var(--font-family); } main { margin-top: 120px; } .clearfix:after { content: ""; clear: both; display: block; } .info-section { overflow: hidden; } .alert { position: fixed; top: 0px; left: 0; right: 0; z-index: 999; height: 0; overflow: hidden; background-color: #0000001a; } .alert .container { position: relative; } .alert--active { height: auto; bottom: 0; } .message { background-color: #0f9ddb; border-radius: 5px; border: 2px solid #fff; color: #fff; line-height: 20px; padding: 0 20px; padding: 12px 30px 12px 12px; font-size: 17px; margin: 20px auto 0 auto; } .head-btn { font-weight: 400; font-size: 16px; text-align: center; color: #224; display: inline-flex; font-family: var(--second-family); padding: 4px 10px; border: 1px solid #e0e0e0; border-radius: 4px; line-height: 1; position: relative; overflow: hidden; background: none; cursor: pointer; } .head-btn:hover { color: #d74e5b; border-color: #d74e5b; } .my-alert__close { position: absolute; top: 50%; margin-top: -8px; right: 20px; width: 20px; height: 20px; background-size: 18px; background-repeat: no-repeat; cursor: pointer; background-image: url(../img/close.svg); } .message#badMessage { background-color: #f13b3b; } .container { width: 1160px; margin: 0 auto; position: relative; z-index: 2; } .header { padding: 30px 0; position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1); transition: padding 0.2s ease, background 0.2s ease; will-change: padding, background; } .header.header--scrolled { padding: 15px 0; background: rgba(255, 255, 255, 0.98); } .header .container { display: flex; justify-content: space-between; align-items: center; } .header .container a { display: flex; } .header__languages { margin-left: 20px; } .enter-btn-container .btn { height: 35px; padding: 0px 30px; width: auto; } .header-right { display: flex ; gap: 30px; } .language-switcher { position: relative; display: block; } .language-switcher .language-current { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #fff; border: 1px solid #e0e0e0; border-radius: 6px; cursor: pointer; transition: all 0.3s ease; font-family: var(--second-family); font-size: 14px; font-weight: 500; } .language-switcher .language-current:hover { border-color: #d74e5b; box-shadow: 0 2px 8px rgba(215, 78, 91, 0.1); } .language-switcher .language-current .flag-icon { width: 20px; height: 15px; border-radius: 2px; object-fit: cover; } .language-switcher .language-current .language-name { color: #224; } .language-switcher .language-dropdown { position: absolute; top: 100%; right: 0; background: #fff; border: 1px solid #e0e0e0; border-radius: 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); min-width: 120px; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s ease; z-index: 1000; } .language-switcher .language-dropdown.active { opacity: 1; visibility: visible; transform: translateY(0); } .language-switcher .language-dropdown .language-option { display: flex; align-items: center; gap: 8px; padding: 10px 12px; text-decoration: none; color: #224; transition: all 0.3s ease; font-family: var(--second-family); font-size: 14px; } .language-switcher .language-dropdown .language-option:hover { background: #f8f9fa; color: #d74e5b; } .language-switcher .language-dropdown .language-option.active { background: #d74e5b; color: #fff; } .language-switcher .language-dropdown .language-option .flag-icon { width: 20px; height: 15px; border-radius: 2px; object-fit: cover; } .language-switcher .language-dropdown .language-option .language-name { font-weight: 500; } .nav { display: flex; align-items: center; } .nav li { margin: 0 10px; } .nav li a { font-weight: 400; font-size: 18px; color: #224; transition: all 0.3s ease; } .nav li a.active { color: #d74e5b; } .nav li a:hover { color: #d74e5b; } .mob-start { display: none; flex-direction: column; cursor: pointer; width: 30px; height: 20px; position: relative; z-index: 100; } .mob-start span { width: 100%; height: 3px; background: #1570b2; margin: 3px 0; transition: all 0.3s ease; border-radius: 2px; display: block; } .mob-start.mob-start--active span:nth-child(1) { transform: rotateZ(45deg) translate(5px, 6px); } .mob-start.mob-start--active span:nth-child(2) { opacity: 0; transform: translateX(-100%); } .mob-start.mob-start--active span:nth-child(3) { transform: rotate(-45deg) translate(3px, -4px); } .btn { border: 1px solid #ff909a; border-radius: 8px; padding: 10px 16px; width: 160px; height: 44px; box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05), inset 0 -2px 0 0 rgba(10, 13, 18, 0.05), inset 0 0 0 1px rgba(10, 13, 18, 0.18); background: #d74e5b; font-weight: 600; font-size: 16px; line-height: 150%; color: #fff; font-family: var(--second-family); cursor: pointer; } .btn:hover { background: #bb2f3c; } .header__contacts { display: flex; align-items: center; gap: 20px; } .hero { position: relative; margin-top: 40px; margin-bottom: 60px; } .hero:after { content: ''; position: absolute; top: -100px; left: -120px; width: 1340px; height: 1500px; background: url(../img/main-block-bg.png) no-repeat center center; background-size: contain; background-repeat: no-repeat; } .hero__card { backdrop-filter: blur(28.39999962px); box-shadow: 0 15px 13px 0 rgba(0, 0, 0, 0.05); background: #fff; padding: 146px 200px; z-index: 1; position: relative; border: 1px solid #d3d3d3; border-radius: 20px; opacity: 0; transition: all 0.7s; } .hero__card.way--active { opacity: 1; transform: scale(1); } .hero__title { font-weight: 400; font-size: 48px; text-align: center; color: #224; margin-bottom: 58px; } .hero__title span { color: #d74e5b; } .hero__subtitle { font-weight: 400; font-size: 24px; text-align: center; color: #224; } .hero__input { border: 1px solid #d5d7da; border-radius: 8px; padding: 10px 14px; width: 585px; height: 44px; box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05); background: #fff; font-weight: 400; font-size: 16px; line-height: 150%; color: #717680; font-family: var(--second-family); } .hero__form { display: flex; align-items: center; gap: 15px; margin-bottom: 25px; justify-content: center; } .hero__note { font-weight: 400; font-size: 14px; line-height: 171%; color: #224; text-align: center; font-family: var(--second-family); } .hero__note a { color: #224; text-decoration: underline; } .hero__note a:hover { text-decoration: none; } .banner { background: linear-gradient(180deg, #1570b2 0%, #144f85 100%); padding: 58px 0; position: relative; z-index: 1; } .banner__container { text-align: center; } .banner__text { font-weight: 400; font-size: 48px; text-align: center; color: #fff; margin-bottom: 30px; } .banner__worktime { font-weight: 400; font-size: 96px; text-align: center; background: linear-gradient(180deg, #fff 0%, #15619d 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .banner__title { font-weight: 400; font-size: 48px; text-align: center; } .banner__info { border: 1px solid #fff; border-radius: 4px; display: inline-flex; align-items: center; padding: 5px 20px; font-weight: 400; font-size: 14px; text-align: center; color: #fff; } .form-input::placeholder, .form-textarea::placeholder, .hero__input::placeholder { color: #717680; opacity: 1; } .form-input::-webkit-input-placeholder, .form-textarea::-webkit-input-placeholder, .hero__input::-webkit-input-placeholder { color: #717680; opacity: 1; } .form-input::-moz-placeholder, .form-textarea::-moz-placeholder, .hero__input::-moz-placeholder { color: #717680; opacity: 1; } .form-input:-ms-input-placeholder, .form-textarea:-ms-input-placeholder, .hero__input:-ms-input-placeholder { color: #717680; opacity: 1; } .form-input:-moz-placeholder, .form-textarea:-moz-placeholder, .hero__input:-moz-placeholder { color: #717680; opacity: 1; } .advantages { padding: 75px 0 30px; position: relative; } .advantages:after { content: ''; position: absolute; top: 0; right: 0; width: 315px; background: url(../img/advantage_bg.svg) no-repeat center center; height: 1139px; background-size: contain; } .advantages__grid { display: flex ; flex-wrap: wrap; justify-content: center; } .advantages__cta { display: flex; justify-content: space-between; padding: 0 20px; z-index: 1; align-items: center; position: relative; } .advantages__cta span { font-weight: 400; font-size: 24px; color: #224; display: flex; max-width: 62%; } .btn--secondary { font-weight: 400; font-size: 16px; text-align: center; color: #d74e5b; display: inline-flex; font-family: var(--second-family); padding: 16px 40px; border: 1px solid #d74e5b; border-radius: 4px; /* width: 360px; */ /* height: 50px; */ line-height: 1; position: relative; overflow: hidden; } .btn--secondary:after { content: ''; top: 0; left: 0; right: 0; bottom: 0; position: absolute; z-index: -1; background: #d74e5b; -webkit-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out; -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); } .btn--secondary:hover { color: #fff; } .btn--secondary:hover:after { transform: translateX(0); } .advantage { width: 33%; text-align: center; padding: 0 10px; margin-bottom: 60px; transition: all 0.7s; opacity: 0; } .advantage.way--active { opacity: 1; } .advantage__icon { margin-bottom: 15px; } .advantage__title { font-weight: 600; font-size: 20px; text-align: center; color: #224; margin-bottom: 15px; } .advantage__desc { font-weight: 400; font-size: 16px; text-align: center; max-width: 320px; margin: 0 auto; } .section-title { font-weight: 400; font-size: 32px; text-align: center; color: #224; margin-bottom: 60px; } .difference { position: relative; padding: 50px 0 80px; } .difference__title { font-weight: 500; font-size: 64px; text-align: center; color: #242950; margin-bottom: 60px; } .difference:after { content: ''; position: absolute; top: -300px; left: 0; width: 347px; height: 1139px; background: url(../img/difference.svg) no-repeat; background-size: contain; } .difference__grid { display: flex ; gap: 20px; overflow: hidden; } .difference__card { padding: 50px 26px; width: 50%; border-radius: 25px; opacity: 0; transition: all 0.7s; transform: translate3d(400px, 0, 0); } .difference__card.way--active { opacity: 1; transform: translate3d(0, 0, 0); } .difference__card--blue { background: linear-gradient(to bottom, #1570b2, #144f85); } .difference__card--gray { background: #F0F0F0; } .difference__card--gray .difference__card-title { color: #242950; border: 1px solid #242950; opacity: 0.5; } .difference__card--gray .difference__list { color: #242950; } .difference__card-title { font-weight: 500; font-size: 32px; font-size: 14px; text-align: center; color: #fff; display: inline-flex; border: 1px solid #fff; border-radius: 4px; padding: 5px 33px; margin-bottom: 14px; text-transform: uppercase; } .difference__card-img { margin-bottom: 20px; } .difference__card-img img { width: 100%; height: 100%; object-fit: contain; display: block; } .difference__list { font-weight: 400; font-size: 16px; line-height: 137%; color: #fff; list-style: disc; padding-left: 16px; } .container-img { padding-left: calc((100vw - 1160px) / 2); display: flex ; gap: 132px; align-items: center; } .container-img .info-card { opacity: 0; transition: all 0.7s; transform: translate3d(-100%, 0, 0); } .container-img .info-card.way--active { opacity: 1; transform: translate3d(0, 0, 0); } .container-img .info-img { opacity: 0; transition: all 0.7s; transform: translate3d(100%, 0, 0); } .container-img .info-img.way--active { opacity: 1; transform: translate3d(0, 0, 0); } .info-card { max-width: 748px; } .info-card__title { font-weight: 600; font-size: 32px; color: #242950; margin-bottom: 20px; } .info-card__text { font-weight: 400; font-size: 20px; line-height: 140%; color: #242950; } .info-img { height: 600px; width: auto; margin-left: auto; text-align: right; } .info-img img { height: 100%; object-fit: cover; } .cabinet-section { display: flex ; gap: 80px; align-items: center; margin-top: -140px; margin-bottom: 120px; overflow: hidden; } .cabinet-section .info-card { opacity: 0; transition: all 0.7s; transform: translate3d(100%, 0, 0); } .cabinet-section .info-card.way--active { opacity: 1; transform: translate3d(0, 0, 0); } .cabinet-section .info-img { opacity: 0; transition: all 0.7s; transform: translate3d(-100%, 0, 0); text-align: left; width: auto; margin-left: 0; } .cabinet-section .info-img.way--active { opacity: 1; transform: translate3d(0, 0, 0); } .features { background: linear-gradient(180deg, #1570b2 0%, #144f85 100%); padding: 125px 0 80px; overflow: hidden; } .features-title { font-weight: 400; font-size: 48px; letter-spacing: -0.02em; text-align: center; color: #fff; margin-bottom: 80px; } .features-info-block__item { border-top: 1px solid rgba(255, 255, 255, 0.5); display: flex ; justify-content: space-between; padding-top: 10px; margin-bottom: 30px; color: #fff; opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); transition: all 0.7s; } .features-info-block__item.way--active { opacity: 1; transform: translate3d(0, 0, 0); } .features-info-block__item-number { font-weight: 500; font-size: 20px; color: rgba(255, 255, 255, 0.5); } .features-info-block__item-title { font-weight: 400; font-size: 20px; text-align: right; color: #fff; min-height: 48px; } .features-info-container { display: flex ; gap: 40px; } .features-info-block { width: 50%; } .request__container { display: flex ; padding: 80px 0; display: flex; align-items: center; gap: 40px; } .request__img { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); transition: all 0.7s; width: 48%; } .request__img.way--active { opacity: 1; transform: scale3d(1, 1, 1); } .request__img img { width: 100%; height: 100%; } .request__title { font-weight: 600; font-size: 32px; color: #242950; margin-bottom: 15px; } .request__desc { font-weight: 400; font-size: 20px; line-height: 140%; color: #242950; margin-bottom: 20px; } .request .form-group { display: flex; flex-direction: column; gap: 5px; margin-bottom: 15px; } .request .form-group label { font-weight: 500; font-size: 14px; line-height: 143%; color: #414651; } .request .form-group input, .request .form-group textarea { border: 1px solid #d5d7da; border-radius: 8px; padding: 10px 14px; width: 100%; height: 44px; resize: none; font-family: var(--second-family); } .request__form { width: 50%; } .request__form .btn { width: 100%; margin-top: 25px; } .footer { background: #333; } .footer-top { display: flex ; justify-content: space-between; } .footer__contacts { display: flex ; gap: 54px; } .footer__contacts-item { font-weight: 400; font-size: 16px; color: #fff; } .footer__contacts-item-title { margin-bottom: 5px; } .footer__contacts-item a { color: #fff; } .footer__contacts-item a:hover { text-decoration: underline; } .footer { background: #333; padding: 56px 0 40px; } .footer__copyright { font-weight: 400; font-size: 16px; text-decoration: underline; text-decoration-skip-ink: none; color: #848484; margin-top: 50px; text-align: center; } @media (max-width: 1200px) { .hero { margin-bottom: 50px; backdrop-filter: blur(28.39999962px); box-shadow: 0 15px 13px 0 rgba(0, 0, 0, 0.05); background: #fff; opacity: 0.94; } .container { width: 100%; padding: 0 20px; } .hero__card { padding: 100px 50px; box-shadow: none; border: none; border-radius: 0; } .hero__title { font-size: 36px; } .hero__input { width: 100%; max-width: 500px; } .banner__text { font-size: 36px; } .banner__worktime { font-size: 49px; } .advantages__grid { gap: 30px; } .advantages__cta { flex-direction: column; gap: 20px; text-align: center; } .advantages__cta span { max-width: 100%; } .difference__title { font-size: 48px; } .difference__grid { gap: 30px; } .features-title { font-size: 36px; } .request__container { gap: 30px; } .cabinet-section { gap: 40px; } } .mobile-enter-btn { display: none; padding: 15px; } @media (max-width: 768px) { .enter-btn-container { display: none; } .header-right { margin-left: auto; } .header { padding: 15px 0; } .header .container { flex-wrap: wrap; gap: 15px; } .advantages:after { top: 10px; right: -115px; width: 285px; height: 551px; } .hero:after { display: none; } .menu--active { overflow: hidden; } .mobile-enter-btn { display: block; } .nav { order: 3; /* width: 100%; */ display: none; position: fixed; top: 100%; left: 0; right: 0; /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); */ z-index: 99; bottom: 0; top: 75px; height: 100vh; background: #fff; z-index: 222223131313; } .nav.menu--active { display: block; overflow: visible; z-index: 2222; } .nav ul { flex-direction: column; padding: 20px 0; } .nav li { margin: 0; border-bottom: 1px solid #f0f0f0; } .nav li:last-child { border-bottom: none; } .nav li a { font-size: 16px; padding: 15px 20px; display: block; transition: all 0.3s ease; } .nav li a:hover { background: #f8f9fa; } .header { padding: 15px 0; border-bottom: 1px solid #d3d3d3; } .mob-start { display: block; order: 2; } .header__contacts { display: none; } .header__languages { margin-left: 0; margin-right: 15px; } .language-switcher .language-current { padding: 6px 8px; font-size: 12px; } .language-switcher .language-current .flag-icon { width: 16px; height: 12px; } .language-switcher .language-dropdown { min-width: 100px; } .language-switcher .language-dropdown .language-option { padding: 8px 10px; font-size: 12px; } .language-switcher .language-dropdown .language-option .flag-icon { width: 16px; height: 12px; } .hero { margin-top: 20px; margin-bottom: 40px; } .hero__card { padding: 60px 0px; } .hero__title { font-size: 28px; margin-bottom: 30px; } .hero__form { flex-direction: column; gap: 15px; } .hero__input { width: 100%; } .banner { padding: 40px 0; } .banner__text { font-size: 28px; margin-bottom: 20px; } .advantages { padding: 50px 0; overflow: hidden; } .advantages__grid { flex-direction: column; gap: 30px; } .advantages .advantage { width: 100%; margin-bottom: 30px; } .advantages__cta { padding: 0 10px; } .advantages__cta span { font-size: 18px; } .section-title { font-size: 24px; margin-bottom: 40px; } .difference { padding: 50px 0; } .difference__title { font-size: 32px; margin-bottom: 40px; } .difference__grid { flex-direction: column; gap: 20px; } .difference__card { width: 100%; padding: 30px 20px; } .features { padding: 60px 0 40px; } .features-title { font-size: 28px; margin-bottom: 50px; } .features-info-container { flex-direction: column; gap: 30px; } .features-info-block { width: 100%; } .request__container { flex-direction: column; gap: 30px; padding: 40px 20px; } .request__img { width: 100%; height: 300px; order: 1; margin-bottom: 50px; } .request__form { width: 100%; order: 0; } .request__title { font-size: 24px; } .request__desc { font-size: 16px; } .cabinet-section { flex-direction: column; gap: 30px; margin-top: 60px; margin-bottom: 60px; } .cabinet-section .info-card { padding: 0 15px; } .cabinet-section .info-img { text-align: left; } .info-card { max-width: 748px; order: 0; } .container-img { flex-direction: column; gap: 30px; padding-left: 15px; } .info-card__title { font-size: 24px; } .info-card__text { font-size: 16px; } .info-img { height: 350px; /* text-align: center; */ width: 100%; order: 1; } .footer { padding: 40px 0 30px; } .footer-top { flex-direction: column; gap: 30px; text-align: center; } .footer__contacts { flex-direction: column; gap: 20px; } } @media (max-width: 480px) { .container { padding: 0 25px; } .request__container { padding: 40px 25px; } .cabinet-section .info-card { padding: 0 25px; } .container-img { flex-direction: column; gap: 30px; padding-left: 25px; } .hero__card { padding: 40px 0px; } .hero__title { font-size: 24px; } .hero__subtitle { font-size: 18px; } .banner { padding: 30px 0; } .banner__info { font-size: 8px; margin-bottom: 10px; } .advantages { padding: 40px 0; } .advantages .advantage { padding: 0 5px; } .advantages .advantage__title { font-size: 18px; } .advantages .advantage__desc { font-size: 14px; } .section-title { font-size: 20px; } .difference__title { font-size: 24px; } .difference__card { padding: 20px 15px; } .difference__card-title { font-size: 12px; padding: 3px 20px; } .difference__list { font-size: 14px; } .features-info-block__item-number { font-size: 16px; } .features-info-block__item-title { font-size: 16px; min-height: auto; margin-bottom: 15px; } .request__title { font-size: 20px; } .request__desc { font-size: 14px; } .request .form-group input, .request .form-group textarea { font-size: 14px; padding: 8px 12px; } .info-card__title { font-size: 20px; } .info-card__text { font-size: 14px; } .btn { width: 100%; font-size: 14px; padding: 12px 20px; } .btn--secondary { font-size: 14px; padding: 12px 20px; } } @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) { .hero__title { font-size: 32px; } .banner__text { font-size: 32px; } .banner__worktime { font-size: 64px; } .advantages__grid { flex-wrap: wrap; justify-content: space-around; } .advantages .advantage { width: 45%; } .difference__grid { gap: 15px; } .difference__card { padding: 40px 20px; } } @media (min-height: 800px) { .hero { margin-top: 60px; } } .scroll-to-top { position: fixed; bottom: 30px; right: 30px; width: 50px; height: 50px; background: #d74e5b; color: #fff; border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transform: translateY(20px); transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease; z-index: 999; box-shadow: 0 4px 12px rgba(215, 78, 91, 0.3); will-change: opacity, visibility, transform; } .scroll-to-top:hover { background: #c13d4a; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(215, 78, 91, 0.4); } .scroll-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); } .scroll-to-top svg { width: 20px; height: 20px; } @media (max-width: 768px) { .scroll-to-top { bottom: 20px; right: 20px; width: 45px; height: 45px; } .scroll-to-top svg { width: 18px; height: 18px; } } /* * animate.less v1.0.4 | animateforless.com * * ----------------------------------------------------------------------------- * * The MIT License (MIT) * * Copyright (c) 2014-2016 Carlos M. Bonilla * * Permission is hereby granted, free of charge, to any person obtaining a copy of * this software and associated documentation files (the "Software"), to deal in * the Software without restriction, including without limitation the rights to * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of * the Software, and to permit persons to whom the Software is furnished to do so, * subject to the following conditions: * * The above copyright notice and this permission notice shall be included in all * copies or substantial portions of the Software. * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ /* ******************************************************************************** ** ** ** LESS ANIMATION FRAMEWORK ** ** ** ******************************************************************************** */ .animated { -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; } .bounce { -webkit-animation-name: bounce; -moz-animation-name: bounce; -ms-animation-name: bounce; -o-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; -moz-transform-origin: center bottom; -ms-transform-origin: center bottom; -o-transform-origin: center bottom; transform-origin: center bottom; } .flash { -webkit-animation-name: flash; -moz-animation-name: flash; -ms-animation-name: flash; -o-animation-name: flash; animation-name: flash; } .flashmin { -webkit-animation-name: flashmin; -moz-animation-name: flashmin; -ms-animation-name: flashmin; -o-animation-name: flashmin; animation-name: flashmin; } .pulse { -webkit-animation-name: pulse; -moz-animation-name: pulse; -ms-animation-name: pulse; -o-animation-name: pulse; animation-name: pulse; } .rubberBand { -webkit-animation-name: rubberBand; -moz-animation-name: rubberBand; -ms-animation-name: rubberBand; -o-animation-name: rubberBand; animation-name: rubberBand; } .shake { -webkit-animation-name: shake; -moz-animation-name: shake; -ms-animation-name: shake; -o-animation-name: shake; animation-name: shake; } .swing { -webkit-animation-name: swing; -moz-animation-name: swing; -ms-animation-name: swing; -o-animation-name: swing; animation-name: swing; -webkit-transform-origin: top center; -moz-transform-origin: top center; -ms-transform-origin: top center; -o-transform-origin: top center; transform-origin: top center; } .tada { -webkit-animation-name: tada; -moz-animation-name: tada; -ms-animation-name: tada; -o-animation-name: tada; animation-name: tada; } .wobble { -webkit-animation-name: wobble; -moz-animation-name: wobble; -ms-animation-name: wobble; -o-animation-name: wobble; animation-name: wobble; } .bounceIn { -webkit-animation-name: bounceIn; -moz-animation-name: bounceIn; -ms-animation-name: bounceIn; -o-animation-name: bounceIn; animation-name: bounceIn; -webkit-animation-duration: 0.75s; -moz-animation-duration: 0.75s; -ms-animation-duration: 0.75s; -o-animation-duration: 0.75s; animation-duration: 0.75s; } .bounceInDown { -webkit-animation-name: bounceInDown; -moz-animation-name: bounceInDown; -ms-animation-name: bounceInDown; -o-animation-name: bounceInDown; animation-name: bounceInDown; } .bounceInLeft { -webkit-animation-name: bounceInLeft; -moz-animation-name: bounceInLeft; -ms-animation-name: bounceInLeft; -o-animation-name: bounceInLeft; animation-name: bounceInLeft; } .bounceInRight { -webkit-animation-name: bounceInRight; -moz-animation-name: bounceInRight; -ms-animation-name: bounceInRight; -o-animation-name: bounceInRight; animation-name: bounceInRight; } .bounceInUp { -webkit-animation-name: bounceInUp; -moz-animation-name: bounceInUp; -ms-animation-name: bounceInUp; -o-animation-name: bounceInUp; animation-name: bounceInUp; } .bounceOut { -webkit-animation-name: bounceOut; -moz-animation-name: bounceOut; -ms-animation-name: bounceOut; -o-animation-name: bounceOut; animation-name: bounceOut; -webkit-animation-duration: 0.75s; -moz-animation-duration: 0.75s; -ms-animation-duration: 0.75s; -o-animation-duration: 0.75s; animation-duration: 0.75s; } .bounceOutDown { -webkit-animation-name: bounceOutDown; -moz-animation-name: bounceOutDown; -ms-animation-name: bounceOutDown; -o-animation-name: bounceOutDown; animation-name: bounceOutDown; } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; -moz-animation-name: bounceOutLeft; -ms-animation-name: bounceOutLeft; -o-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } .bounceOutRight { -webkit-animation-name: bounceOutRight; -moz-animation-name: bounceOutRight; -ms-animation-name: bounceOutRight; -o-animation-name: bounceOutRight; animation-name: bounceOutRight; } .bounceOutUp { -webkit-animation-name: bounceOutUp; -moz-animation-name: bounceOutUp; -ms-animation-name: bounceOutUp; -o-animation-name: bounceOutUp; animation-name: bounceOutUp; } .fadeIn { -webkit-animation-name: fadeIn; -moz-animation-name: fadeIn; -ms-animation-name: fadeIn; -o-animation-name: fadeIn; animation-name: fadeIn; } .fadeInDown { -webkit-animation-name: fadeInDown; -moz-animation-name: fadeInDown; -ms-animation-name: fadeInDown; -o-animation-name: fadeInDown; animation-name: fadeInDown; } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; -moz-animation-name: fadeInDownBig; -ms-animation-name: fadeInDownBig; -o-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } .fadeInLeft { -webkit-animation-name: fadeInLeft; -moz-animation-name: fadeInLeft; -ms-animation-name: fadeInLeft; -o-animation-name: fadeInLeft; animation-name: fadeInLeft; } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; -moz-animation-name: fadeInLeftBig; -ms-animation-name: fadeInLeftBig; -o-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } .fadeInRight { -webkit-animation-name: fadeInRight; -moz-animation-name: fadeInRight; -ms-animation-name: fadeInRight; -o-animation-name: fadeInRight; animation-name: fadeInRight; } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; -moz-animation-name: fadeInRightBig; -ms-animation-name: fadeInRightBig; -o-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } .fadeInUp { -webkit-animation-name: fadeInUp; -moz-animation-name: fadeInUp; -ms-animation-name: fadeInUp; -o-animation-name: fadeInUp; animation-name: fadeInUp; } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; -moz-animation-name: fadeInUpBig; -ms-animation-name: fadeInUpBig; -o-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } .fadeOut { -webkit-animation-name: fadeOut; -moz-animation-name: fadeOut; -ms-animation-name: fadeOut; -o-animation-name: fadeOut; animation-name: fadeOut; } .fadeOutDown { -webkit-animation-name: fadeOutDown; -moz-animation-name: fadeOutDown; -ms-animation-name: fadeOutDown; -o-animation-name: fadeOutDown; animation-name: fadeOutDown; } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; -moz-animation-name: fadeOutDownBig; -ms-animation-name: fadeOutDownBig; -o-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; -moz-animation-name: fadeOutLeft; -ms-animation-name: fadeOutLeft; -o-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; -moz-animation-name: fadeOutLeftBig; -ms-animation-name: fadeOutLeftBig; -o-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } .fadeOutRight { -webkit-animation-name: fadeOutRight; -moz-animation-name: fadeOutRight; -ms-animation-name: fadeOutRight; -o-animation-name: fadeOutRight; animation-name: fadeOutRight; } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; -moz-animation-name: fadeOutRightBig; -ms-animation-name: fadeOutRightBig; -o-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } .fadeOutUp { -webkit-animation-name: fadeOutUp; -moz-animation-name: fadeOutUp; -ms-animation-name: fadeOutUp; -o-animation-name: fadeOutUp; animation-name: fadeOutUp; } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; -moz-animation-name: fadeOutUpBig; -ms-animation-name: fadeOutUpBig; -o-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } .flip { -webkit-animation-name: flip; -moz-animation-name: flip; -ms-animation-name: flip; -o-animation-name: flip; animation-name: flip; -webkit-backface-visibility: visible; -moz-backface-visibility: visible; -ms-backface-visibility: visible; -o-backface-visibility: visible; backface-visibility: visible; } .flipInX { -webkit-animation-name: flipInX; -moz-animation-name: flipInX; -ms-animation-name: flipInX; -o-animation-name: flipInX; animation-name: flipInX; -webkit-backface-visibility: visible !important; -moz-backface-visibility: visible !important; -ms-backface-visibility: visible !important; -o-backface-visibility: visible !important; backface-visibility: visible !important; } .flipInY { -webkit-animation-name: flipInY; -moz-animation-name: flipInY; -ms-animation-name: flipInY; -o-animation-name: flipInY; animation-name: flipInY; -webkit-backface-visibility: visible !important; -moz-backface-visibility: visible !important; -ms-backface-visibility: visible !important; -o-backface-visibility: visible !important; backface-visibility: visible !important; } .flipOutX { -webkit-animation-name: flipOutX; -moz-animation-name: flipOutX; -ms-animation-name: flipOutX; -o-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; -moz-backface-visibility: visible !important; -ms-backface-visibility: visible !important; -o-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-duration: 0.75s; -moz-animation-duration: 0.75s; -ms-animation-duration: 0.75s; -o-animation-duration: 0.75s; animation-duration: 0.75s; } .flipOutY { -webkit-animation-name: flipOutY; -moz-animation-name: flipOutY; -ms-animation-name: flipOutY; -o-animation-name: flipOutY; animation-name: flipOutY; -webkit-backface-visibility: visible !important; -moz-backface-visibility: visible !important; -ms-backface-visibility: visible !important; -o-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-duration: 0.75s; -moz-animation-duration: 0.75s; -ms-animation-duration: 0.75s; -o-animation-duration: 0.75s; animation-duration: 0.75s; } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; -moz-animation-name: lightSpeedIn; -ms-animation-name: lightSpeedIn; -o-animation-name: lightSpeedIn; animation-name: lightSpeedIn; } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; -moz-animation-name: lightSpeedOut; -ms-animation-name: lightSpeedOut; -o-animation-name: lightSpeedOut; animation-name: lightSpeedOut; } .rotate { -webkit-animation-name: rotate; -moz-animation-name: rotate; -ms-animation-name: rotate; -o-animation-name: rotate; animation-name: rotate; } .rotateCC { -webkit-animation-name: rotateCC; -moz-animation-name: rotateCC; -ms-animation-name: rotateCC; -o-animation-name: rotateCC; animation-name: rotateCC; } .rotateIn { -webkit-animation-name: rotateIn; -moz-animation-name: rotateIn; -ms-animation-name: rotateIn; -o-animation-name: rotateIn; animation-name: rotateIn; } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; -moz-animation-name: rotateInDownLeft; -ms-animation-name: rotateInDownLeft; -o-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; -moz-animation-name: rotateInDownRight; -ms-animation-name: rotateInDownRight; -o-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; -moz-animation-name: rotateInUpLeft; -ms-animation-name: rotateInUpLeft; -o-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; -moz-animation-name: rotateInUpRight; -ms-animation-name: rotateInUpRight; -o-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } .rotateOut { -webkit-animation-name: rotateOut; -moz-animation-name: rotateOut; -ms-animation-name: rotateOut; -o-animation-name: rotateOut; animation-name: rotateOut; } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; -moz-animation-name: rotateOutDownLeft; -ms-animation-name: rotateOutDownLeft; -o-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; -moz-animation-name: rotateOutDownRight; -ms-animation-name: rotateOutDownRight; -o-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; -moz-animation-name: rotateOutUpLeft; -ms-animation-name: rotateOutUpLeft; -o-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; -moz-animation-name: rotateOutUpRight; -ms-animation-name: rotateOutUpRight; -o-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } .hinge { -webkit-animation-name: hinge; -moz-animation-name: hinge; -ms-animation-name: hinge; -o-animation-name: hinge; animation-name: hinge; } .rollIn { -webkit-animation-name: rollIn; -moz-animation-name: rollIn; -ms-animation-name: rollIn; -o-animation-name: rollIn; animation-name: rollIn; } .rollOut { -webkit-animation-name: rollOut; -moz-animation-name: rollOut; -ms-animation-name: rollOut; -o-animation-name: rollOut; animation-name: rollOut; } .zoomIn { -webkit-animation-name: zoomIn; -moz-animation-name: zoomIn; -ms-animation-name: zoomIn; -o-animation-name: zoomIn; animation-name: zoomIn; } .zoomInDown { -webkit-animation-name: zoomInDown; -moz-animation-name: zoomInDown; -ms-animation-name: zoomInDown; -o-animation-name: zoomInDown; animation-name: zoomInDown; } .zoomInLeft { -webkit-animation-name: zoomInLeft; -moz-animation-name: zoomInLeft; -ms-animation-name: zoomInLeft; -o-animation-name: zoomInLeft; animation-name: zoomInLeft; } .zoomInRight { -webkit-animation-name: zoomInRight; -moz-animation-name: zoomInRight; -ms-animation-name: zoomInRight; -o-animation-name: zoomInRight; animation-name: zoomInRight; } .zoomInUp { -webkit-animation-name: zoomInUp; -moz-animation-name: zoomInUp; -ms-animation-name: zoomInUp; -o-animation-name: zoomInUp; animation-name: zoomInUp; } .zoomOut { -webkit-animation-name: zoomOut; -moz-animation-name: zoomOut; -ms-animation-name: zoomOut; -o-animation-name: zoomOut; animation-name: zoomOut; } .zoomOutDown { -webkit-animation-name: zoomOutDown; -moz-animation-name: zoomOutDown; -ms-animation-name: zoomOutDown; -o-animation-name: zoomOutDown; animation-name: zoomOutDown; } .zoomOutLeft { -webkit-animation-name: zoomOutLeft; -moz-animation-name: zoomOutLeft; -ms-animation-name: zoomOutLeft; -o-animation-name: zoomOutLeft; animation-name: zoomOutLeft; } .zoomOutRight { -webkit-animation-name: zoomOutRight; -moz-animation-name: zoomOutRight; -ms-animation-name: zoomOutRight; -o-animation-name: zoomOutRight; animation-name: zoomOutRight; } .zoomOutUp { -webkit-animation-name: zoomOutUp; -moz-animation-name: zoomOutUp; -ms-animation-name: zoomOutUp; -o-animation-name: zoomOutUp; animation-name: zoomOutUp; } .slideInDown { -webkit-animation-name: slideInDown; -moz-animation-name: slideInDown; -ms-animation-name: slideInDown; -o-animation-name: slideInDown; animation-name: slideInDown; } .slideInLeft { -webkit-animation-name: slideInLeft; -moz-animation-name: slideInLeft; -ms-animation-name: slideInLeft; -o-animation-name: slideInLeft; animation-name: slideInLeft; } .slideInRight { -webkit-animation-name: slideInRight; -moz-animation-name: slideInRight; -ms-animation-name: slideInRight; -o-animation-name: slideInRight; animation-name: slideInRight; } .slideInUp { -webkit-animation-name: slideInUp; -moz-animation-name: slideInUp; -ms-animation-name: slideInUp; -o-animation-name: slideInUp; animation-name: slideInUp; } .slideOutDown { -webkit-animation-name: slideOutDown; -moz-animation-name: slideOutDown; -ms-animation-name: slideOutDown; -o-animation-name: slideOutDown; animation-name: slideOutDown; } .slideOutLeft { -webkit-animation-name: slideOutLeft; -moz-animation-name: slideOutLeft; -ms-animation-name: slideOutLeft; -o-animation-name: slideOutLeft; animation-name: slideOutLeft; } .slideOutRight { -webkit-animation-name: slideOutRight; -moz-animation-name: slideOutRight; -ms-animation-name: slideOutRight; -o-animation-name: slideOutRight; animation-name: slideOutRight; } .slideOutUp { -webkit-animation-name: slideOutUp; -moz-animation-name: slideOutUp; -ms-animation-name: slideOutUp; -o-animation-name: slideOutUp; animation-name: slideOutUp; } @-webkit-keyframes bounce { 0%, 20%, 53%, 80%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); } 40%, 43% { -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0); } 70% { -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0, -4px, 0); } } @-moz-keyframes bounce { 0%, 20%, 53%, 80%, 100% { -moz-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -moz-transform: translate3d(0, 0, 0); } 40%, 43% { -moz-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -moz-transform: translate3d(0, -30px, 0); } 70% { -moz-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -moz-transform: translate3d(0, -15px, 0); } 90% { -moz-transform: translate3d(0, -4px, 0); } } @-o-keyframes bounce { 0%, 20%, 53%, 80%, 100% { -o-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -o-transform: translate3d(0, 0, 0); } 40%, 43% { -o-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -o-transform: translate3d(0, -30px, 0); } 70% { -o-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -o-transform: translate3d(0, -15px, 0); } 90% { -o-transform: translate3d(0, -4px, 0); } } @keyframes bounce { 0%, 20%, 53%, 80%, 100% { transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 0, 0); } 40%, 43% { transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transform: translate3d(0, -30px, 0); } 70% { transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transform: translate3d(0, -15px, 0); } 90% { transform: translate3d(0, -4px, 0); } } @-webkit-keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @-moz-keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @-o-keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @-webkit-keyframes flashmin { 0%, 50%, 100% { opacity: 1.00; } 25%, 75% { opacity: 0.33; } } @-moz-keyframes flashmin { 0%, 50%, 100% { opacity: 1.00; } 25%, 75% { opacity: 0.33; } } @-o-keyframes flashmin { 0%, 50%, 100% { opacity: 1.00; } 25%, 75% { opacity: 0.33; } } @keyframes flashmin { 0%, 50%, 100% { opacity: 1.00; } 25%, 75% { opacity: 0.33; } } @-webkit-keyframes pulse { 0% { -webkit-transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); } 100% { -webkit-transform: scale3d(1, 1, 1); } } @-moz-keyframes pulse { 0% { -moz-transform: scale3d(1, 1, 1); } 50% { -moz-transform: scale3d(1.05, 1.05, 1.05); } 100% { -moz-transform: scale3d(1, 1, 1); } } @-o-keyframes pulse { 0% { -o-transform: scale3d(1, 1, 1); } 50% { -o-transform: scale3d(1.05, 1.05, 1.05); } 100% { -o-transform: scale3d(1, 1, 1); } } @keyframes pulse { 0% { transform: scale3d(1, 1, 1); } 50% { transform: scale3d(1.05, 1.05, 1.05); } 100% { transform: scale3d(1, 1, 1); } } @-webkit-keyframes rubberBand { 0% { -webkit-transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); } 100% { -webkit-transform: scale3d(1, 1, 1); } } @-moz-keyframes rubberBand { 0% { -moz-transform: scale3d(1, 1, 1); } 30% { -moz-transform: scale3d(1.25, 0.75, 1); } 40% { -moz-transform: scale3d(0.75, 1.25, 1); } 50% { -moz-transform: scale3d(1.15, 0.85, 1); } 65% { -moz-transform: scale3d(0.95, 1.05, 1); } 75% { -moz-transform: scale3d(1.05, 0.95, 1); } 100% { -moz-transform: scale3d(1, 1, 1); } } @-o-keyframes rubberBand { 0% { -o-transform: scale3d(1, 1, 1); } 30% { -o-transform: scale3d(1.25, 0.75, 1); } 40% { -o-transform: scale3d(0.75, 1.25, 1); } 50% { -o-transform: scale3d(1.15, 0.85, 1); } 65% { -o-transform: scale3d(0.95, 1.05, 1); } 75% { -o-transform: scale3d(1.05, 0.95, 1); } 100% { -o-transform: scale3d(1, 1, 1); } } @keyframes rubberBand { 0% { transform: scale3d(1, 1, 1); } 30% { transform: scale3d(1.25, 0.75, 1); } 40% { transform: scale3d(0.75, 1.25, 1); } 50% { transform: scale3d(1.15, 0.85, 1); } 65% { transform: scale3d(0.95, 1.05, 1); } 75% { transform: scale3d(1.05, 0.95, 1); } 100% { transform: scale3d(1, 1, 1); } } @-webkit-keyframes shake { 0%, 100% { -webkit-transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); } } @-moz-keyframes shake { 0%, 100% { -moz-transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -moz-transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -moz-transform: translate3d(10px, 0, 0); } } @-o-keyframes shake { 0%, 100% { -o-transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -o-transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -o-transform: translate3d(10px, 0, 0); } } @keyframes shake { 0%, 100% { transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { transform: translate3d(10px, 0, 0); } } @-webkit-keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); } 100% { -webkit-transform: rotate3d(0, 0, 1, 0deg); } } @-moz-keyframes swing { 20% { -moz-transform: rotate3d(0, 0, 1, 15deg); } 40% { -moz-transform: rotate3d(0, 0, 1, -10deg); } 60% { -moz-transform: rotate3d(0, 0, 1, 5deg); } 80% { -moz-transform: rotate3d(0, 0, 1, -5deg); } 100% { -moz-transform: rotate3d(0, 0, 1, 0deg); } } @-o-keyframes swing { 20% { -o-transform: rotate3d(0, 0, 1, 15deg); } 40% { -o-transform: rotate3d(0, 0, 1, -10deg); } 60% { -o-transform: rotate3d(0, 0, 1, 5deg); } 80% { -o-transform: rotate3d(0, 0, 1, -5deg); } 100% { -o-transform: rotate3d(0, 0, 1, 0deg); } } @keyframes swing { 20% { transform: rotate3d(0, 0, 1, 15deg); } 40% { transform: rotate3d(0, 0, 1, -10deg); } 60% { transform: rotate3d(0, 0, 1, 5deg); } 80% { transform: rotate3d(0, 0, 1, -5deg); } 100% { transform: rotate3d(0, 0, 1, 0deg); } } @-webkit-keyframes tada { 0% { -webkit-transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } 100% { -webkit-transform: scale3d(1, 1, 1); } } @-moz-keyframes tada { 0% { -moz-transform: scale3d(1, 1, 1); } 10%, 20% { -moz-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -moz-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -moz-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } 100% { -moz-transform: scale3d(1, 1, 1); } } @-o-keyframes tada { 0% { -o-transform: scale3d(1, 1, 1); } 10%, 20% { -o-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -o-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -o-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } 100% { -o-transform: scale3d(1, 1, 1); } } @keyframes tada { 0% { transform: scale3d(1, 1, 1); } 10%, 20% { transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } 100% { transform: scale3d(1, 1, 1); } } @-webkit-keyframes wobble { 0% { -webkit-transform: none; } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } 100% { -webkit-transform: none; } } @-moz-keyframes wobble { 0% { -moz-transform: none; } 15% { -moz-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -moz-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -moz-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -moz-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -moz-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } 100% { -moz-transform: none; } } @-o-keyframes wobble { 0% { -o-transform: none; } 15% { -o-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -o-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -o-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -o-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -o-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } 100% { -o-transform: none; } } @keyframes wobble { 0% { transform: none; } 15% { transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } 100% { transform: none; } } @-webkit-keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); } } @-moz-keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, 100% { -moz-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -moz-transform: scale3d(0.3, 0.3, 0.3); } 20% { -moz-transform: scale3d(1.1, 1.1, 1.1); } 40% { -moz-transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -moz-transform: scale3d(1.03, 1.03, 1.03); } 80% { -moz-transform: scale3d(0.97, 0.97, 0.97); } 100% { opacity: 1; -moz-transform: scale3d(1, 1, 1); } } @-o-keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, 100% { -o-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -o-transform: scale3d(0.3, 0.3, 0.3); } 20% { -o-transform: scale3d(1.1, 1.1, 1.1); } 40% { -o-transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -o-transform: scale3d(1.03, 1.03, 1.03); } 80% { -o-transform: scale3d(0.97, 0.97, 0.97); } 100% { opacity: 1; -o-transform: scale3d(1, 1, 1); } } @keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, 100% { transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } 20% { transform: scale3d(1.1, 1.1, 1.1); } 40% { transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); } 80% { transform: scale3d(0.97, 0.97, 0.97); } 100% { opacity: 1; transform: scale3d(1, 1, 1); } } @-webkit-keyframes bounceInDown { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); } 100% { -webkit-transform: none; } } @-moz-keyframes bounceInDown { 0%, 60%, 75%, 90%, 100% { -moz-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -moz-transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -moz-transform: translate3d(0, 25px, 0); } 75% { -moz-transform: translate3d(0, -10px, 0); } 90% { -moz-transform: translate3d(0, 5px, 0); } 100% { -moz-transform: none; } } @-o-keyframes bounceInDown { 0%, 60%, 75%, 90%, 100% { -o-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -o-transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -o-transform: translate3d(0, 25px, 0); } 75% { -o-transform: translate3d(0, -10px, 0); } 90% { -o-transform: translate3d(0, 5px, 0); } 100% { -o-transform: none; } } @keyframes bounceInDown { 0%, 60%, 75%, 90%, 100% { transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; transform: translate3d(0, 25px, 0); } 75% { transform: translate3d(0, -10px, 0); } 90% { transform: translate3d(0, 5px, 0); } 100% { transform: none; } } @-webkit-keyframes bounceInLeft { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); } 100% { -webkit-transform: none; } } @-moz-keyframes bounceInLeft { 0%, 60%, 75%, 90%, 100% { -moz-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -moz-transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -moz-transform: translate3d(25px, 0, 0); } 75% { -moz-transform: translate3d(-10px, 0, 0); } 90% { -moz-transform: translate3d(5px, 0, 0); } 100% { -moz-transform: none; } } @-o-keyframes bounceInLeft { 0%, 60%, 75%, 90%, 100% { -o-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -o-transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -o-transform: translate3d(25px, 0, 0); } 75% { -o-transform: translate3d(-10px, 0, 0); } 90% { -o-transform: translate3d(5px, 0, 0); } 100% { -o-transform: none; } } @keyframes bounceInLeft { 0%, 60%, 75%, 90%, 100% { transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; transform: translate3d(25px, 0, 0); } 75% { transform: translate3d(-10px, 0, 0); } 90% { transform: translate3d(5px, 0, 0); } 100% { transform: none; } } @-webkit-keyframes bounceInRight { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); } 100% { -webkit-transform: none; } } @-moz-keyframes bounceInRight { 0%, 60%, 75%, 90%, 100% { -moz-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -moz-transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -moz-transform: translate3d(-25px, 0, 0); } 75% { -moz-transform: translate3d(10px, 0, 0); } 90% { -moz-transform: translate3d(-5px, 0, 0); } 100% { -moz-transform: none; } } @-o-keyframes bounceInRight { 0%, 60%, 75%, 90%, 100% { -o-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -o-transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -o-transform: translate3d(-25px, 0, 0); } 75% { -o-transform: translate3d(10px, 0, 0); } 90% { -o-transform: translate3d(-5px, 0, 0); } 100% { -o-transform: none; } } @keyframes bounceInRight { 0%, 60%, 75%, 90%, 100% { transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; transform: translate3d(-25px, 0, 0); } 75% { transform: translate3d(10px, 0, 0); } 90% { transform: translate3d(-5px, 0, 0); } 100% { transform: none; } } @-webkit-keyframes bounceInUp { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); } } @-moz-keyframes bounceInUp { 0%, 60%, 75%, 90%, 100% { -moz-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -moz-transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -moz-transform: translate3d(0, -20px, 0); } 75% { -moz-transform: translate3d(0, 10px, 0); } 90% { -moz-transform: translate3d(0, -5px, 0); } 100% { -moz-transform: translate3d(0, 0, 0); } } @-o-keyframes bounceInUp { 0%, 60%, 75%, 90%, 100% { -o-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -o-transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -o-transform: translate3d(0, -20px, 0); } 75% { -o-transform: translate3d(0, 10px, 0); } 90% { -o-transform: translate3d(0, -5px, 0); } 100% { -o-transform: translate3d(0, 0, 0); } } @keyframes bounceInUp { 0%, 60%, 75%, 90%, 100% { transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; transform: translate3d(0, -20px, 0); } 75% { transform: translate3d(0, 10px, 0); } 90% { transform: translate3d(0, -5px, 0); } 100% { transform: translate3d(0, 0, 0); } } @-webkit-keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); } 100% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); } } @-moz-keyframes bounceOut { 20% { -moz-transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; -moz-transform: scale3d(1.1, 1.1, 1.1); } 100% { opacity: 0; -moz-transform: scale3d(0.3, 0.3, 0.3); } } @-o-keyframes bounceOut { 20% { -o-transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; -o-transform: scale3d(1.1, 1.1, 1.1); } 100% { opacity: 0; -o-transform: scale3d(0.3, 0.3, 0.3); } } @keyframes bounceOut { 20% { transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; transform: scale3d(1.1, 1.1, 1.1); } 100% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } } @-webkit-keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); } } @-moz-keyframes bounceOutDown { 20% { -moz-transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -moz-transform: translate3d(0, -20px, 0); } 100% { opacity: 0; -moz-transform: translate3d(0, 2000px, 0); } } @-o-keyframes bounceOutDown { 20% { -o-transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -o-transform: translate3d(0, -20px, 0); } 100% { opacity: 0; -o-transform: translate3d(0, 2000px, 0); } } @keyframes bounceOutDown { 20% { transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; transform: translate3d(0, -20px, 0); } 100% { opacity: 0; transform: translate3d(0, 2000px, 0); } } @-webkit-keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); } } @-moz-keyframes bounceOutLeft { 20% { opacity: 1; -moz-transform: translate3d(20px, 0, 0); } 100% { opacity: 0; -moz-transform: translate3d(-2000px, 0, 0); } } @-o-keyframes bounceOutLeft { 20% { opacity: 1; -o-transform: translate3d(20px, 0, 0); } 100% { opacity: 0; -o-transform: translate3d(-2000px, 0, 0); } } @keyframes bounceOutLeft { 20% { opacity: 1; transform: translate3d(20px, 0, 0); } 100% { opacity: 0; transform: translate3d(-2000px, 0, 0); } } @-webkit-keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); } } @-moz-keyframes bounceOutRight { 20% { opacity: 1; -moz-transform: translate3d(-20px, 0, 0); } 100% { opacity: 0; -moz-transform: translate3d(2000px, 0, 0); } } @-o-keyframes bounceOutRight { 20% { opacity: 1; -o-transform: translate3d(-20px, 0, 0); } 100% { opacity: 0; -o-transform: translate3d(2000px, 0, 0); } } @keyframes bounceOutRight { 20% { opacity: 1; transform: translate3d(-20px, 0, 0); } 100% { opacity: 0; transform: translate3d(2000px, 0, 0); } } @-webkit-keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); } } @-moz-keyframes bounceOutUp { 20% { -moz-transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -moz-transform: translate3d(0, 20px, 0); } 100% { opacity: 0; -moz-transform: translate3d(0, -2000px, 0); } } @-o-keyframes bounceOutUp { 20% { -o-transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -o-transform: translate3d(0, 20px, 0); } 100% { opacity: 0; -o-transform: translate3d(0, -2000px, 0); } } @keyframes bounceOutUp { 20% { transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; transform: translate3d(0, 20px, 0); } 100% { opacity: 0; transform: translate3d(0, -2000px, 0); } } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); } 100% { opacity: 1; -webkit-transform: none; } } @-moz-keyframes fadeInDown { 0% { opacity: 0; -moz-transform: translate3d(0, -100%, 0); } 100% { opacity: 1; -moz-transform: none; } } @-o-keyframes fadeInDown { 0% { opacity: 0; -o-transform: translate3d(0, -100%, 0); } 100% { opacity: 1; -o-transform: none; } } @keyframes fadeInDown { 0% { opacity: 0; transform: translate3d(0, -100%, 0); } 100% { opacity: 1; transform: none; } } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); } 100% { opacity: 1; -webkit-transform: none; } } @-moz-keyframes fadeInDown { 0% { opacity: 0; -moz-transform: translate3d(0, -100%, 0); } 100% { opacity: 1; -moz-transform: none; } } @-o-keyframes fadeInDown { 0% { opacity: 0; -o-transform: translate3d(0, -100%, 0); } 100% { opacity: 1; -o-transform: none; } } @keyframes fadeInDown { 0% { opacity: 0; transform: translate3d(0, -100%, 0); } 100% { opacity: 1; transform: none; } } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); } 100% { opacity: 1; -webkit-transform: none; } } @-moz-keyframes fadeInDownBig { 0% { opacity: 0; -moz-transform: translate3d(0, -2000px, 0); } 100% { opacity: 1; -moz-transform: none; } } @-o-keyframes fadeInDownBig { 0% { opacity: 0; -o-transform: translate3d(0, -2000px, 0); } 100% { opacity: 1; -o-transform: none; } } @keyframes fadeInDownBig { 0% { opacity: 0; transform: translate3d(0, -2000px, 0); } 100% { opacity: 1; transform: none; } } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; } } @-moz-keyframes fadeInLeft { 0% { opacity: 0; -moz-transform: translate3d(-100%, 0, 0); } 100% { opacity: 1; -moz-transform: none; } } @-o-keyframes fadeInLeft { 0% { opacity: 0; -o-transform: translate3d(-100%, 0, 0); } 100% { opacity: 1; -o-transform: none; } } @keyframes fadeInLeft { 0% { opacity: 0; transform: translate3d(-100%, 0, 0); } 100% { opacity: 1; transform: none; } } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); } 100% { opacity: 1; -webkit-transform: none; } } @-moz-keyframes fadeInLeftBig { 0% { opacity: 0; -moz-transform: translate3d(-2000px, 0, 0); } 100% { opacity: 1; -moz-transform: none; } } @-o-keyframes fadeInLeftBig { 0% { opacity: 0; -o-transform: translate3d(-2000px, 0, 0); } 100% { opacity: 1; -o-transform: none; } } @keyframes fadeInLeftBig { 0% { opacity: 0; transform: translate3d(-2000px, 0, 0); } 100% { opacity: 1; transform: none; } } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; } } @-moz-keyframes fadeInRight { 0% { opacity: 0; -moz-transform: translate3d(100%, 0, 0); } 100% { opacity: 1; -moz-transform: none; } } @-o-keyframes fadeInRight { 0% { opacity: 0; -o-transform: translate3d(100%, 0, 0); } 100% { opacity: 1; -o-transform: none; } } @keyframes fadeInRight { 0% { opacity: 0; transform: translate3d(100%, 0, 0); } 100% { opacity: 1; transform: none; } } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); } 100% { opacity: 1; -webkit-transform: none; } } @-moz-keyframes fadeInRightBig { 0% { opacity: 0; -moz-transform: translate3d(2000px, 0, 0); } 100% { opacity: 1; -moz-transform: none; } } @-o-keyframes fadeInRightBig { 0% { opacity: 0; -o-transform: translate3d(2000px, 0, 0); } 100% { opacity: 1; -o-transform: none; } } @keyframes fadeInRightBig { 0% { opacity: 0; transform: translate3d(2000px, 0, 0); } 100% { opacity: 1; transform: none; } } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); } 100% { opacity: 1; -webkit-transform: none; } } @-moz-keyframes fadeInUp { 0% { opacity: 0; -moz-transform: translate3d(0, 100%, 0); } 100% { opacity: 1; -moz-transform: none; } } @-o-keyframes fadeInUp { 0% { opacity: 0; -o-transform: translate3d(0, 100%, 0); } 100% { opacity: 1; -o-transform: none; } } @keyframes fadeInUp { 0% { opacity: 0; transform: translate3d(0, 100%, 0); } 100% { opacity: 1; transform: none; } } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); } 100% { opacity: 1; -webkit-transform: none; } } @-moz-keyframes fadeInUpBig { 0% { opacity: 0; -moz-transform: translate3d(0, 2000px, 0); } 100% { opacity: 1; -moz-transform: none; } } @-o-keyframes fadeInUpBig { 0% { opacity: 0; -o-transform: translate3d(0, 2000px, 0); } 100% { opacity: 1; -o-transform: none; } } @keyframes fadeInUpBig { 0% { opacity: 0; transform: translate3d(0, 2000px, 0); } 100% { opacity: 1; transform: none; } } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @-moz-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @-o-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes fadeOutDown { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); } } @-moz-keyframes fadeOutDown { 0% { opacity: 1; } 100% { opacity: 0; -moz-transform: translate3d(0, 100%, 0); } } @-o-keyframes fadeOutDown { 0% { opacity: 1; } 100% { opacity: 0; -o-transform: translate3d(0, 100%, 0); } } @keyframes fadeOutDown { 0% { opacity: 1; } 100% { opacity: 0; transform: translate3d(0, 100%, 0); } } @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); } } @-moz-keyframes fadeOutDownBig { 0% { opacity: 1; } 100% { opacity: 0; -moz-transform: translate3d(0, 2000px, 0); } } @-o-keyframes fadeOutDownBig { 0% { opacity: 1; } 100% { opacity: 0; -o-transform: translate3d(0, 2000px, 0); } } @keyframes fadeOutDownBig { 0% { opacity: 1; } 100% { opacity: 0; transform: translate3d(0, 2000px, 0); } } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); } } @-moz-keyframes fadeOutLeft { 0% { opacity: 1; } 100% { opacity: 0; -moz-transform: translate3d(-100%, 0, 0); } } @-o-keyframes fadeOutLeft { 0% { opacity: 1; } 100% { opacity: 0; -o-transform: translate3d(-100%, 0, 0); } } @keyframes fadeOutLeft { 0% { opacity: 1; } 100% { opacity: 0; transform: translate3d(-100%, 0, 0); } } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); } } @-moz-keyframes fadeOutLeftBig { 0% { opacity: 1; } 100% { opacity: 0; -moz-transform: translate3d(-2000px, 0, 0); } } @-o-keyframes fadeOutLeftBig { 0% { opacity: 1; } 100% { opacity: 0; -o-transform: translate3d(-2000px, 0, 0); } } @keyframes fadeOutLeftBig { 0% { opacity: 1; } 100% { opacity: 0; transform: translate3d(-2000px, 0, 0); } } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); } } @-moz-keyframes fadeOutRight { 0% { opacity: 1; } 100% { opacity: 0; -moz-transform: translate3d(100%, 0, 0); } } @-o-keyframes fadeOutRight { 0% { opacity: 1; } 100% { opacity: 0; -o-transform: translate3d(100%, 0, 0); } } @keyframes fadeOutRight { 0% { opacity: 1; } 100% { opacity: 0; transform: translate3d(100%, 0, 0); } } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); } } @-moz-keyframes fadeOutRightBig { 0% { opacity: 1; } 100% { opacity: 0; -moz-transform: translate3d(2000px, 0, 0); } } @-o-keyframes fadeOutRightBig { 0% { opacity: 1; } 100% { opacity: 0; -o-transform: translate3d(2000px, 0, 0); } } @keyframes fadeOutRightBig { 0% { opacity: 1; } 100% { opacity: 0; transform: translate3d(2000px, 0, 0); } } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); } } @-moz-keyframes fadeOutUp { 0% { opacity: 1; } 100% { opacity: 0; -moz-transform: translate3d(0, -100%, 0); } } @-o-keyframes fadeOutUp { 0% { opacity: 1; } 100% { opacity: 0; -o-transform: translate3d(0, -100%, 0); } } @keyframes fadeOutUp { 0% { opacity: 1; } 100% { opacity: 0; transform: translate3d(0, -100%, 0); } } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); } } @-moz-keyframes fadeOutUpBig { 0% { opacity: 1; } 100% { opacity: 0; -moz-transform: translate3d(0, -2000px, 0); } } @-o-keyframes fadeOutUpBig { 0% { opacity: 1; } 100% { opacity: 0; -o-transform: translate3d(0, -2000px, 0); } } @keyframes fadeOutUpBig { 0% { opacity: 1; } 100% { opacity: 0; transform: translate3d(0, -2000px, 0); } } @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95); -webkit-animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px); -webkit-animation-timing-function: ease-in; } } @-moz-keyframes flip { 0% { -moz-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -moz-animation-timing-function: ease-out; } 40% { -moz-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -moz-animation-timing-function: ease-out; } 50% { -moz-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -moz-animation-timing-function: ease-in; } 80% { -moz-transform: perspective(400px) scale3d(0.95, 0.95, 0.95); -moz-animation-timing-function: ease-in; } 100% { -moz-transform: perspective(400px); -moz-animation-timing-function: ease-in; } } @-o-keyframes flip { 0% { -o-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -o-animation-timing-function: ease-out; } 40% { -o-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -o-animation-timing-function: ease-out; } 50% { -o-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -o-animation-timing-function: ease-in; } 80% { -o-transform: perspective(400px) scale3d(0.95, 0.95, 0.95); -o-animation-timing-function: ease-in; } 100% { -o-transform: perspective(400px); -o-animation-timing-function: ease-in; } } @keyframes flip { 0% { transform: perspective(400px) rotate3d(0, 1, 0, -360deg); animation-timing-function: ease-out; } 40% { transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); animation-timing-function: ease-out; } 50% { transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); animation-timing-function: ease-in; } 80% { transform: perspective(400px) scale3d(0.95, 0.95, 0.95); animation-timing-function: ease-in; } 100% { transform: perspective(400px); animation-timing-function: ease-in; } } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } 100% { -webkit-transform: perspective(400px); } } @-moz-keyframes flipInX { 0% { -moz-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -moz-animation-timing-function: ease-in; opacity: 0; } 40% { -moz-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -moz-animation-timing-function: ease-in; } 60% { -moz-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -moz-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } 100% { -moz-transform: perspective(400px); } } @-o-keyframes flipInX { 0% { -o-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -o-animation-timing-function: ease-in; opacity: 0; } 40% { -o-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -o-animation-timing-function: ease-in; } 60% { -o-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -o-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } 100% { -o-transform: perspective(400px); } } @keyframes flipInX { 0% { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); animation-timing-function: ease-in; opacity: 0; } 40% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); animation-timing-function: ease-in; } 60% { transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } 100% { transform: perspective(400px); } } @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } 100% { -webkit-transform: perspective(400px); } } @-moz-keyframes flipInY { 0% { -moz-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -moz-animation-timing-function: ease-in; opacity: 0; } 40% { -moz-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -moz-animation-timing-function: ease-in; } 60% { -moz-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -moz-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } 100% { -moz-transform: perspective(400px); } } @-o-keyframes flipInY { 0% { -o-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -o-animation-timing-function: ease-in; opacity: 0; } 40% { -o-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -o-animation-timing-function: ease-in; } 60% { -o-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -o-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } 100% { -o-transform: perspective(400px); } } @keyframes flipInY { 0% { transform: perspective(400px) rotate3d(0, 1, 0, 90deg); animation-timing-function: ease-in; opacity: 0; } 40% { transform: perspective(400px) rotate3d(0, 1, 0, -20deg); animation-timing-function: ease-in; } 60% { transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } 100% { transform: perspective(400px); } } @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } @-moz-keyframes flipOutX { 0% { -moz-transform: perspective(400px); } 30% { -moz-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } 100% { -moz-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } @-o-keyframes flipOutX { 0% { -o-transform: perspective(400px); } 30% { -o-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } 100% { -o-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } @keyframes flipOutX { 0% { transform: perspective(400px); } 30% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } 100% { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } @-webkit-keyframes flipOutY { 0% { -webkit-transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } @-moz-keyframes flipOutY { 0% { -moz-transform: perspective(400px); } 30% { -moz-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } 100% { -moz-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } @-o-keyframes flipOutY { 0% { -o-transform: perspective(400px); } 30% { -o-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } 100% { -o-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } @keyframes flipOutY { 0% { transform: perspective(400px); } 30% { transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } 100% { transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } @-webkit-keyframes lightSpeedIn { 0% { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); opacity: 1; } 100% { -webkit-transform: none; opacity: 1; } } @-moz-keyframes lightSpeedIn { 0% { -moz-transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -moz-transform: skewX(20deg); opacity: 1; } 80% { -moz-transform: skewX(-5deg); opacity: 1; } 100% { -moz-transform: none; opacity: 1; } } @-o-keyframes lightSpeedIn { 0% { -o-transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -o-transform: skewX(20deg); opacity: 1; } 80% { -o-transform: skewX(-5deg); opacity: 1; } 100% { -o-transform: none; opacity: 1; } } @keyframes lightSpeedIn { 0% { transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { transform: skewX(20deg); opacity: 1; } 80% { transform: skewX(-5deg); opacity: 1; } 100% { transform: none; opacity: 1; } } @-webkit-keyframes lightSpeedOut { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); } } @-moz-keyframes lightSpeedOut { 0% { opacity: 1; } 100% { opacity: 0; -moz-transform: translate3d(100%, 0, 0) skewX(30deg); } } @-o-keyframes lightSpeedOut { 0% { opacity: 1; } 100% { opacity: 0; -o-transform: translate3d(100%, 0, 0) skewX(30deg); } } @keyframes lightSpeedOut { 0% { opacity: 1; } 100% { opacity: 0; transform: translate3d(100%, 0, 0) skewX(30deg); } } @-webkit-keyframes rotate { 0% { -webkit-transform-origin: center center; -webkit-transform: rotate3d(0, 0, 1, -360deg); } 100% { -webkit-transform-origin: center center; -webkit-transform: rotate3d(0, 0, 1, 0deg); } } @-moz-keyframes rotate { 0% { -moz-transform-origin: center center; -moz-transform: rotate3d(0, 0, 1, -360deg); } 100% { -moz-transform-origin: center center; -moz-transform: rotate3d(0, 0, 1, 0deg); } } @-o-keyframes rotate { 0% { -o-transform-origin: center center; -o-transform: rotate3d(0, 0, 1, -360deg); } 100% { -o-transform-origin: center center; -o-transform: rotate3d(0, 0, 1, 0deg); } } @keyframes rotate { 0% { transform-origin: center center; transform: rotate3d(0, 0, 1, -360deg); } 100% { transform-origin: center center; transform: rotate3d(0, 0, 1, 0deg); } } @-webkit-keyframes rotateCC { 0% { -webkit-transform-origin: center center; -webkit-transform: rotate3d(0, 0, 1, 360deg); } 100% { -webkit-transform-origin: center center; -webkit-transform: rotate3d(0, 0, 1, 0deg); } } @-moz-keyframes rotateCC { 0% { -moz-transform-origin: center center; -moz-transform: rotate3d(0, 0, 1, 360deg); } 100% { -moz-transform-origin: center center; -moz-transform: rotate3d(0, 0, 1, 0deg); } } @-o-keyframes rotateCC { 0% { -o-transform-origin: center center; -o-transform: rotate3d(0, 0, 1, 360deg); } 100% { -o-transform-origin: center center; -o-transform: rotate3d(0, 0, 1, 0deg); } } @keyframes rotateCC { 0% { transform-origin: center center; transform: rotate3d(0, 0, 1, 360deg); } 100% { transform-origin: center center; transform: rotate3d(0, 0, 1, 0deg); } } @-webkit-keyframes rotateIn { 0% { opacity: 0; -webkit-transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); } 100% { opacity: 1; -webkit-transform-origin: center; -webkit-transform: none; } } @-moz-keyframes rotateIn { 0% { opacity: 0; -moz-transform-origin: center; -moz-transform: rotate3d(0, 0, 1, -200deg); } 100% { opacity: 1; -moz-transform-origin: center; -moz-transform: none; } } @-o-keyframes rotateIn { 0% { opacity: 0; -o-transform-origin: center; -o-transform: rotate3d(0, 0, 1, -200deg); } 100% { opacity: 1; -o-transform-origin: center; -o-transform: none; } } @keyframes rotateIn { 0% { opacity: 0; transform-origin: center; transform: rotate3d(0, 0, 1, -200deg); } 100% { opacity: 1; transform-origin: center; transform: none; } } @-webkit-keyframes rotateInDownLeft { 0% { opacity: 0; -webkit-transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); } 100% { opacity: 1; -webkit-transform-origin: left bottom; -webkit-transform: none; } } @-moz-keyframes rotateInDownLeft { 0% { opacity: 0; -moz-transform-origin: left bottom; -moz-transform: rotate3d(0, 0, 1, -45deg); } 100% { opacity: 1; -moz-transform-origin: left bottom; -moz-transform: none; } } @-o-keyframes rotateInDownLeft { 0% { opacity: 0; -o-transform-origin: left bottom; -o-transform: rotate3d(0, 0, 1, -45deg); } 100% { opacity: 1; -o-transform-origin: left bottom; -o-transform: none; } } @keyframes rotateInDownLeft { 0% { opacity: 0; transform-origin: left bottom; transform: rotate3d(0, 0, 1, -45deg); } 100% { opacity: 1; transform-origin: left bottom; transform: none; } } @-webkit-keyframes rotateInDownRight { 0% { opacity: 0; -webkit-transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); } 100% { opacity: 1; -webkit-transform-origin: right bottom; -webkit-transform: none; } } @-moz-keyframes rotateInDownRight { 0% { opacity: 0; -moz-transform-origin: right bottom; -moz-transform: rotate3d(0, 0, 1, 45deg); } 100% { opacity: 1; -moz-transform-origin: right bottom; -moz-transform: none; } } @-o-keyframes rotateInDownRight { 0% { opacity: 0; -o-transform-origin: right bottom; -o-transform: rotate3d(0, 0, 1, 45deg); } 100% { opacity: 1; -o-transform-origin: right bottom; -o-transform: none; } } @keyframes rotateInDownRight { 0% { opacity: 0; transform-origin: right bottom; transform: rotate3d(0, 0, 1, 45deg); } 100% { opacity: 1; transform-origin: right bottom; transform: none; } } @-webkit-keyframes rotateInUpLeft { 0% { opacity: 0; -webkit-transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); } 100% { opacity: 1; -webkit-transform-origin: left bottom; -webkit-transform: none; } } @-moz-keyframes rotateInUpLeft { 0% { opacity: 0; -moz-transform-origin: left bottom; -moz-transform: rotate3d(0, 0, 1, 45deg); } 100% { opacity: 1; -moz-transform-origin: left bottom; -moz-transform: none; } } @-o-keyframes rotateInUpLeft { 0% { opacity: 0; -o-transform-origin: left bottom; -o-transform: rotate3d(0, 0, 1, 45deg); } 100% { opacity: 1; -o-transform-origin: left bottom; -o-transform: none; } } @keyframes rotateInUpLeft { 0% { opacity: 0; transform-origin: left bottom; transform: rotate3d(0, 0, 1, 45deg); } 100% { opacity: 1; transform-origin: left bottom; transform: none; } } @-webkit-keyframes rotateInDownLeft { 0% { opacity: 0; -webkit-transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); } 100% { opacity: 1; -webkit-transform-origin: right bottom; -webkit-transform: none; } } @-moz-keyframes rotateInDownLeft { 0% { opacity: 0; -moz-transform-origin: right bottom; -moz-transform: rotate3d(0, 0, 1, -90deg); } 100% { opacity: 1; -moz-transform-origin: right bottom; -moz-transform: none; } } @-o-keyframes rotateInDownLeft { 0% { opacity: 0; -o-transform-origin: right bottom; -o-transform: rotate3d(0, 0, 1, -90deg); } 100% { opacity: 1; -o-transform-origin: right bottom; -o-transform: none; } } @keyframes rotateInDownLeft { 0% { opacity: 0; transform-origin: right bottom; transform: rotate3d(0, 0, 1, -90deg); } 100% { opacity: 1; transform-origin: right bottom; transform: none; } } @-webkit-keyframes rotateOut { 0% { opacity: 1; -webkit-transform-origin: center; } 100% { opacity: 0; -webkit-transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); } } @-moz-keyframes rotateOut { 0% { opacity: 1; -moz-transform-origin: center; } 100% { opacity: 0; -moz-transform-origin: center; -moz-transform: rotate3d(0, 0, 1, 200deg); } } @-o-keyframes rotateOut { 0% { opacity: 1; -o-transform-origin: center; } 100% { opacity: 0; -o-transform-origin: center; -o-transform: rotate3d(0, 0, 1, 200deg); } } @keyframes rotateOut { 0% { opacity: 1; transform-origin: center; } 100% { opacity: 0; transform-origin: center; transform: rotate3d(0, 0, 1, 200deg); } } @-webkit-keyframes rotateOutDownLeft { 0% { opacity: 1; -webkit-transform-origin: left bottom; } 100% { opacity: 0; -webkit-transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); } } @-moz-keyframes rotateOutDownLeft { 0% { opacity: 1; -moz-transform-origin: left bottom; } 100% { opacity: 0; -moz-transform-origin: left bottom; -moz-transform: rotate3d(0, 0, 1, 45deg); } } @-o-keyframes rotateOutDownLeft { 0% { opacity: 1; -o-transform-origin: left bottom; } 100% { opacity: 0; -o-transform-origin: left bottom; -o-transform: rotate3d(0, 0, 1, 45deg); } } @keyframes rotateOutDownLeft { 0% { opacity: 1; transform-origin: left bottom; } 100% { opacity: 0; transform-origin: left bottom; transform: rotate3d(0, 0, 1, 45deg); } } @-webkit-keyframes rotateOutDownRight { 0% { opacity: 1; -webkit-transform-origin: right bottom; } 100% { opacity: 0; -webkit-transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); } } @-moz-keyframes rotateOutDownRight { 0% { opacity: 1; -moz-transform-origin: right bottom; } 100% { opacity: 0; -moz-transform-origin: right bottom; -moz-transform: rotate3d(0, 0, 1, -45deg); } } @-o-keyframes rotateOutDownRight { 0% { opacity: 1; -o-transform-origin: right bottom; } 100% { opacity: 0; -o-transform-origin: right bottom; -o-transform: rotate3d(0, 0, 1, -45deg); } } @keyframes rotateOutDownRight { 0% { opacity: 1; transform-origin: right bottom; } 100% { opacity: 0; transform-origin: right bottom; transform: rotate3d(0, 0, 1, -45deg); } } @-webkit-keyframes rotateOutUpLeft { 0% { opacity: 1; -webkit-transform-origin: left bottom; } 100% { opacity: 0; -webkit-transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); } } @-moz-keyframes rotateOutUpLeft { 0% { opacity: 1; -moz-transform-origin: left bottom; } 100% { opacity: 0; -moz-transform-origin: left bottom; -moz-transform: rotate3d(0, 0, 1, -45deg); } } @-o-keyframes rotateOutUpLeft { 0% { opacity: 1; -o-transform-origin: left bottom; } 100% { opacity: 0; -o-transform-origin: left bottom; -o-transform: rotate3d(0, 0, 1, -45deg); } } @keyframes rotateOutUpLeft { 0% { opacity: 1; transform-origin: left bottom; } 100% { opacity: 0; transform-origin: left bottom; transform: rotate3d(0, 0, 1, -45deg); } } @-webkit-keyframes rotateOutUpRight { 0% { opacity: 1; -webkit-transform-origin: right bottom; } 100% { opacity: 0; -webkit-transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); } } @-moz-keyframes rotateOutUpRight { 0% { opacity: 1; -moz-transform-origin: right bottom; } 100% { opacity: 0; -moz-transform-origin: right bottom; -moz-transform: rotate3d(0, 0, 1, 90deg); } } @-o-keyframes rotateOutUpRight { 0% { opacity: 1; -o-transform-origin: right bottom; } 100% { opacity: 0; -o-transform-origin: right bottom; -o-transform: rotate3d(0, 0, 1, 90deg); } } @keyframes rotateOutUpRight { 0% { opacity: 1; transform-origin: right bottom; } 100% { opacity: 0; transform-origin: right bottom; transform: rotate3d(0, 0, 1, 90deg); } } @-webkit-keyframes hinge { 0% { -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; -webkit-transform: rotate3d(0, 0, 1, 80deg); } 40%, 80% { -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; -webkit-transform: rotate3d(0, 0, 1, 60deg); opacity: 1; } 100% { -webkit-transform: translate3d(0, 700px, 0); opacity: 0; } } @-moz-keyframes hinge { 0% { -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } 20%, 60% { -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; -moz-transform: rotate3d(0, 0, 1, 80deg); } 40%, 80% { -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; -moz-transform: rotate3d(0, 0, 1, 60deg); opacity: 1; } 100% { -moz-transform: translate3d(0, 700px, 0); opacity: 0; } } @-o-keyframes hinge { 0% { -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } 20%, 60% { -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; -o-transform: rotate3d(0, 0, 1, 80deg); } 40%, 80% { -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; -o-transform: rotate3d(0, 0, 1, 60deg); opacity: 1; } 100% { -o-transform: translate3d(0, 700px, 0); opacity: 0; } } @keyframes hinge { 0% { transform-origin: top left; animation-timing-function: ease-in-out; } 20%, 60% { transform-origin: top left; animation-timing-function: ease-in-out; transform: rotate3d(0, 0, 1, 80deg); } 40%, 80% { transform-origin: top left; animation-timing-function: ease-in-out; transform: rotate3d(0, 0, 1, 60deg); opacity: 1; } 100% { transform: translate3d(0, 700px, 0); opacity: 0; } } @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } 100% { opacity: 1; -webkit-transform: none; } } @-moz-keyframes rollIn { 0% { opacity: 0; -moz-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } 100% { opacity: 1; -moz-transform: none; } } @-o-keyframes rollIn { 0% { opacity: 0; -o-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } 100% { opacity: 1; -o-transform: none; } } @keyframes rollIn { 0% { opacity: 0; transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } 100% { opacity: 1; transform: none; } } @-webkit-keyframes rollOut { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } @-moz-keyframes rollOut { 0% { opacity: 1; } 100% { opacity: 0; -moz-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } @-o-keyframes rollOut { 0% { opacity: 1; } 100% { opacity: 0; -o-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } @keyframes rollOut { 0% { opacity: 1; } 100% { opacity: 0; transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } @-webkit-keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @-moz-keyframes zoomIn { 0% { opacity: 0; -moz-transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @-o-keyframes zoomIn { 0% { opacity: 0; -o-transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @keyframes zoomIn { 0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @-webkit-keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @-moz-keyframes zoomInDown { 0% { opacity: 0; -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -moz-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -moz-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @-o-keyframes zoomInDown { 0% { opacity: 0; -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -o-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -o-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInDown { 0% { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @-webkit-keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @-moz-keyframes zoomInLeft { 0% { opacity: 0; -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -moz-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -moz-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @-o-keyframes zoomInLeft { 0% { opacity: 0; -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -o-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -o-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInLeft { 0% { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @-webkit-keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @-moz-keyframes zoomInRight { 0% { opacity: 0; -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -moz-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -moz-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @-o-keyframes zoomInRight { 0% { opacity: 0; -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -o-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -o-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInRight { 0% { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @-webkit-keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @-moz-keyframes zoomInUp { 0% { opacity: 0; -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -moz-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -moz-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @-o-keyframes zoomInUp { 0% { opacity: 0; -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -o-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -o-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInUp { 0% { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @-webkit-keyframes zoomOut { 0% { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); } 100% { opacity: 0; } } @-moz-keyframes zoomOut { 0% { opacity: 1; } 50% { opacity: 0; -moz-transform: scale3d(0.3, 0.3, 0.3); } 100% { opacity: 0; } } @-o-keyframes zoomOut { 0% { opacity: 1; } 50% { opacity: 0; -o-transform: scale3d(0.3, 0.3, 0.3); } 100% { opacity: 0; } } @keyframes zoomOut { 0% { opacity: 1; } 50% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } 100% { opacity: 0; } } @-webkit-keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 100% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @-moz-keyframes zoomOutDown { 40% { opacity: 1; -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -moz-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 100% { opacity: 0; -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -moz-transform-origin: center bottom; -moz-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @-o-keyframes zoomOutDown { 40% { opacity: 1; -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -o-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 100% { opacity: 0; -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -o-transform-origin: center bottom; -o-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomOutDown { 40% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 100% { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform-origin: center bottom; animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @-webkit-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } 100% { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; } } @-moz-keyframes zoomOutLeft { 40% { opacity: 1; -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } 100% { opacity: 0; -moz-transform: scale(0.1) translate3d(-2000px, 0, 0); -moz-transform-origin: left center; } } @-o-keyframes zoomOutLeft { 40% { opacity: 1; -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } 100% { opacity: 0; -o-transform: scale(0.1) translate3d(-2000px, 0, 0); -o-transform-origin: left center; } } @keyframes zoomOutLeft { 40% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } 100% { opacity: 0; transform: scale(0.1) translate3d(-2000px, 0, 0); transform-origin: left center; } } @-webkit-keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } 100% { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; } } @-moz-keyframes zoomOutRight { 40% { opacity: 1; -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } 100% { opacity: 0; -moz-transform: scale(0.1) translate3d(2000px, 0, 0); -moz-transform-origin: right center; } } @-o-keyframes zoomOutRight { 40% { opacity: 1; -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } 100% { opacity: 0; -o-transform: scale(0.1) translate3d(2000px, 0, 0); -o-transform-origin: right center; } } @keyframes zoomOutRight { 40% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } 100% { opacity: 0; transform: scale(0.1) translate3d(2000px, 0, 0); transform-origin: right center; } } @-webkit-keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 100% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @-moz-keyframes zoomOutUp { 40% { opacity: 1; -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -moz-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 100% { opacity: 0; -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -moz-transform-origin: center bottom; -moz-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @-o-keyframes zoomOutUp { 40% { opacity: 1; -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -o-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 100% { opacity: 0; -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -o-transform-origin: center bottom; -o-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomOutUp { 40% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 100% { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform-origin: center bottom; animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @-webkit-keyframes slideInDown { 0% { -webkit-transform: translateY(-100%); visibility: visible; } 100% { -webkit-transform: translateY(0); } } @-moz-keyframes slideInDown { 0% { -moz-transform: translateY(-100%); visibility: visible; } 100% { -moz-transform: translateY(0); } } @-o-keyframes slideInDown { 0% { -o-transform: translateY(-100%); visibility: visible; } 100% { -o-transform: translateY(0); } } @keyframes slideInDown { 0% { transform: translateY(-100%); visibility: visible; } 100% { transform: translateY(0); } } @-webkit-keyframes slideInLeft { 0% { -webkit-transform: translateX(-100%); visibility: visible; } 100% { -webkit-transform: translateX(0); } } @-moz-keyframes slideInLeft { 0% { -moz-transform: translateX(-100%); visibility: visible; } 100% { -moz-transform: translateX(0); } } @-o-keyframes slideInLeft { 0% { -o-transform: translateX(-100%); visibility: visible; } 100% { -o-transform: translateX(0); } } @keyframes slideInLeft { 0% { transform: translateX(-100%); visibility: visible; } 100% { transform: translateX(0); } } @-webkit-keyframes slideInRight { 0% { -webkit-transform: translateX(100%); visibility: visible; } 100% { -webkit-transform: translateX(0); } } @-moz-keyframes slideInRight { 0% { -moz-transform: translateX(100%); visibility: visible; } 100% { -moz-transform: translateX(0); } } @-o-keyframes slideInRight { 0% { -o-transform: translateX(100%); visibility: visible; } 100% { -o-transform: translateX(0); } } @keyframes slideInRight { 0% { transform: translateX(100%); visibility: visible; } 100% { transform: translateX(0); } } @-webkit-keyframes slideInUp { 0% { -webkit-transform: translateY(100%); visibility: visible; } 100% { -webkit-transform: translateY(0); } } @-moz-keyframes slideInUp { 0% { -moz-transform: translateY(100%); visibility: visible; } 100% { -moz-transform: translateY(0); } } @-o-keyframes slideInUp { 0% { -o-transform: translateY(100%); visibility: visible; } 100% { -o-transform: translateY(0); } } @keyframes slideInUp { 0% { transform: translateY(100%); visibility: visible; } 100% { transform: translateY(0); } } @-webkit-keyframes slideOutDown { 0% { -webkit-transform: translateY(0); } 100% { visibility: hidden; -webkit-transform: translateY(100%); } } @-moz-keyframes slideOutDown { 0% { -moz-transform: translateY(0); } 100% { visibility: hidden; -moz-transform: translateY(100%); } } @-o-keyframes slideOutDown { 0% { -o-transform: translateY(0); } 100% { visibility: hidden; -o-transform: translateY(100%); } } @keyframes slideOutDown { 0% { transform: translateY(0); } 100% { visibility: hidden; transform: translateY(100%); } } @-webkit-keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); } 100% { visibility: hidden; -webkit-transform: translateX(-100%); } } @-moz-keyframes slideOutLeft { 0% { -moz-transform: translateX(0); } 100% { visibility: hidden; -moz-transform: translateX(-100%); } } @-o-keyframes slideOutLeft { 0% { -o-transform: translateX(0); } 100% { visibility: hidden; -o-transform: translateX(-100%); } } @keyframes slideOutLeft { 0% { transform: translateX(0); } 100% { visibility: hidden; transform: translateX(-100%); } } @-webkit-keyframes slideOutRight { 0% { -webkit-transform: translateX(0); } 100% { visibility: hidden; -webkit-transform: translateX(100%); } } @-moz-keyframes slideOutRight { 0% { -moz-transform: translateX(0); } 100% { visibility: hidden; -moz-transform: translateX(100%); } } @-o-keyframes slideOutRight { 0% { -o-transform: translateX(0); } 100% { visibility: hidden; -o-transform: translateX(100%); } } @keyframes slideOutRight { 0% { transform: translateX(0); } 100% { visibility: hidden; transform: translateX(100%); } } @-webkit-keyframes slideOutUp { 0% { -webkit-transform: translateY(0); } 100% { -webkit-transform: translateY(-100%); visibility: hidden; } } @-moz-keyframes slideOutUp { 0% { -moz-transform: translateY(0); } 100% { -moz-transform: translateY(-100%); visibility: hidden; } } @-o-keyframes slideOutUp { 0% { -o-transform: translateY(0); } 100% { -o-transform: translateY(-100%); visibility: hidden; } } @keyframes slideOutUp { 0% { transform: translateY(0); } 100% { transform: translateY(-100%); visibility: hidden; } }