/var/www/pm-investor.com/www/public/css
NameSizeModeActions
base-style.css692990775editdlrm
dist.base-style.css135330775editdlrm
dist.style.css2909500775editdlrm
style.css13106580775editdlrm
Edit: /var/www/pm-investor.com/www/public/css/dist.style.css (290950B)
/* Adding fonts type fonts .eot, .woff, .ttf , .svg variables: $font-file - name files font $font-name - default = $font-file $font-style - style for fonts $font-weight - font weight*/ @font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-Regular.eot"); src: url("../fonts/Montserrat-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/Montserrat-Regular.svg") format("svg"), url("../fonts/Montserrat-Regular.woff") format("woff"), url("../fonts/Montserrat-Regular.ttf") format("truetype"); font-style: normal; font-weight: 400; text-rendering: optimizeLegibility; } @font-face { font-family: "Montserrat"; src: url("../fonts/MontserratMedium500.eot"); src: url("../fonts/MontserratMedium500.eot?#iefix") format("embedded-opentype"), url("../fonts/MontserratMedium500.svg") format("svg"), url("../fonts/MontserratMedium500.woff") format("woff"), url("../fonts/MontserratMedium500.ttf") format("truetype"); font-style: normal; font-weight: 500; text-rendering: optimizeLegibility; } @font-face { font-family: "Montserrat"; src: url("../fonts/MontserratSemiBold600.eot"); src: url("../fonts/MontserratSemiBold600.eot?#iefix") format("embedded-opentype"), url("../fonts/MontserratSemiBold600.svg") format("svg"), url("../fonts/MontserratSemiBold600.woff") format("woff"), url("../fonts/MontserratSemiBold600.ttf") format("truetype"); font-style: normal; font-weight: 600; text-rendering: optimizeLegibility; } @font-face { font-family: "History Pro"; src: url("../fonts/HistoryPro-Two.eot"); src: url("../fonts/HistoryPro-Two.eot?#iefix") format("embedded-opentype"), url("../fonts/HistoryPro-Two.svg") format("svg"), url("../fonts/HistoryPro-Two.woff") format("woff"), url("../fonts/HistoryPro-Two.ttf") format("truetype"); font-style: normal; font-weight: normal; text-rendering: optimizeLegibility; } /** * Meyer reset */ /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after { content: ''; content: none; } q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* @import "audi_pack/audi_pack"; */ /* Magnific Popup CSS */ .mfp-bg { top: 0; left: 0; width: 100%; height: 100%; z-index: 1042; overflow: hidden; position: fixed; background: #0b0b0b; opacity: 0.8; } .mfp-wrap { top: 0; left: 0; width: 100%; height: 100%; z-index: 1043; position: fixed; outline: none !important; -webkit-backface-visibility: hidden; } .mfp-container { text-align: center; position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 0 8px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mfp-container:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .mfp-align-top .mfp-container:before { display: none; } .mfp-content { position: relative; display: inline-block; vertical-align: middle; margin: 0 auto; text-align: left; z-index: 1045; } .mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content { width: 100%; cursor: auto; } .mfp-ajax-cur { cursor: progress; } .mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close { cursor: -moz-zoom-out; cursor: -webkit-zoom-out; cursor: zoom-out; } .mfp-zoom { cursor: pointer; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; } .mfp-auto-cursor .mfp-content { cursor: auto; } .mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .mfp-loading.mfp-figure { display: none; } .mfp-hide { display: none !important; } .mfp-preloader { color: #CCC; position: absolute; top: 50%; width: auto; text-align: center; margin-top: -0.8em; left: 8px; right: 8px; z-index: 1044; } .mfp-preloader a { color: #CCC; } .mfp-preloader a:hover { color: #FFF; } .mfp-s-ready .mfp-preloader { display: none; } .mfp-s-error .mfp-content { display: none; } button.mfp-close, button.mfp-arrow { overflow: visible; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; display: block; outline: none; padding: 0; z-index: 1046; -webkit-box-shadow: none; box-shadow: none; -ms-touch-action: manipulation; touch-action: manipulation; } button::-moz-focus-inner { padding: 0; border: 0; } .mfp-close { width: 44px; height: 44px; line-height: 44px; position: absolute; right: 0; top: 0; text-decoration: none; text-align: center; opacity: 0.65; padding: 0 0 18px 10px; color: #FFF; font-style: normal; font-size: 28px; font-family: Arial, Baskerville, monospace; } .mfp-close:hover, .mfp-close:focus { opacity: 1; } .mfp-close:active { top: 1px; } .mfp-close-btn-in .mfp-close { color: #333; } .mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close { color: #FFF; right: -6px; text-align: right; padding-right: 6px; width: 100%; } .mfp-counter { position: absolute; top: 0; right: 0; color: #CCC; font-size: 12px; line-height: 18px; white-space: nowrap; } .mfp-arrow { position: absolute; opacity: 0.65; margin: 0; top: 50%; margin-top: -55px; padding: 0; width: 90px; height: 110px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .mfp-arrow:active { margin-top: -54px; } .mfp-arrow:hover, .mfp-arrow:focus { opacity: 1; } .mfp-arrow:before, .mfp-arrow:after { content: ''; display: block; width: 0; height: 0; position: absolute; left: 0; top: 0; margin-top: 35px; margin-left: 35px; border: medium inset transparent; } .mfp-arrow:after { border-top-width: 13px; border-bottom-width: 13px; top: 8px; } .mfp-arrow:before { border-top-width: 21px; border-bottom-width: 21px; opacity: 0.7; } .mfp-arrow-left { left: 0; } .mfp-arrow-left:after { border-right: 17px solid #FFF; margin-left: 31px; } .mfp-arrow-left:before { margin-left: 25px; border-right: 27px solid #3F3F3F; } .mfp-arrow-right { right: 0; } .mfp-arrow-right:after { border-left: 17px solid #FFF; margin-left: 39px; } .mfp-arrow-right:before { border-left: 27px solid #3F3F3F; } .mfp-iframe-holder { padding-top: 40px; padding-bottom: 40px; } .mfp-iframe-holder .mfp-content { line-height: 0; width: 100%; max-width: 900px; } .mfp-iframe-holder .mfp-close { top: -40px; } .mfp-iframe-scaler { width: 100%; height: 0; overflow: hidden; padding-top: 56.25%; } .mfp-iframe-scaler iframe { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #000; } /* Main image in popup */ img.mfp-img { width: auto; max-width: 100%; height: auto; display: block; line-height: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 40px 0 40px; margin: 0 auto; } /* The shadow behind the image */ .mfp-figure { line-height: 0; } .mfp-figure:after { content: ''; position: absolute; left: 0; top: 40px; bottom: 40px; display: block; right: 0; width: auto; height: auto; z-index: -1; -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #444; } .mfp-figure small { color: #BDBDBD; display: block; font-size: 12px; line-height: 14px; } .mfp-figure figure { margin: 0; } .mfp-bottom-bar { margin-top: -36px; position: absolute; top: 100%; left: 0; width: 100%; cursor: auto; } .mfp-title { text-align: left; line-height: 18px; color: #F3F3F3; word-wrap: break-word; padding-right: 36px; } .mfp-image-holder .mfp-content { max-width: 100%; } .mfp-gallery .mfp-image-holder .mfp-figure { cursor: pointer; } @media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) { /** * Remove all paddings around the image on small screen */ .mfp-img-mobile .mfp-image-holder { padding-left: 0; padding-right: 0; } .mfp-img-mobile img.mfp-img { padding: 0; } .mfp-img-mobile .mfp-figure:after { top: 0; bottom: 0; } .mfp-img-mobile .mfp-figure small { display: inline; margin-left: 5px; } .mfp-img-mobile .mfp-bottom-bar { background: rgba(0, 0, 0, 0.6); bottom: 0; margin: 0; top: auto; padding: 3px 5px; position: fixed; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mfp-img-mobile .mfp-bottom-bar:empty { padding: 0; } .mfp-img-mobile .mfp-counter { right: 5px; top: 3px; } .mfp-img-mobile .mfp-close { top: 0; right: 0; width: 35px; height: 35px; line-height: 35px; background: rgba(0, 0, 0, 0.6); position: fixed; text-align: center; padding: 0; } } @media all and (max-width: 900px) { .mfp-arrow { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -o-transform: scale(0.75); transform: scale(0.75); } .mfp-arrow-left { -webkit-transform-origin: 0; -moz-transform-origin: 0; -o-transform-origin: 0; transform-origin: 0; } .mfp-arrow-right { -webkit-transform-origin: 100%; -moz-transform-origin: 100%; -o-transform-origin: 100%; transform-origin: 100%; } .mfp-container { padding-left: 6px; padding-right: 6px; } } #formsendHover { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0.2); } .form-loading { top: 50%; margin-top: -2em; left: 50%; margin-left: -2em; background-color: transparent; border: 3px solid #1277c2; position: absolute; border-radius: 50%; border-top-color: transparent; border-right-color: transparent; width: 2em; height: 2em; display: inline-block; vertical-align: middle; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; -webkit-animation: spinner-animation 0.65s infinite linear; -moz-animation: spinner-animation 0.65s infinite linear; -o-animation: spinner-animation 0.65s infinite linear; animation: spinner-animation 0.65s infinite linear; } .error { border: 1px solid red !important; } .form-status { font-size: 12px; color: #00a3dc; padding-top: 15px; display: block; text-align: center; } #thanks { position: relative; width: 300px; margin: 0 auto; background: #fff; } @-webkit-keyframes spinner-animation { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @-moz-keyframes spinner-animation { 0% { -moz-transform: rotate(0deg); } 100% { -moz-transform: rotate(360deg); } } @-o-keyframes spinner-animation { 0% { -o-transform: rotate(0deg); } 100% { -o-transform: rotate(100deg); } } @keyframes spinner-animation { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } /* * Owl Carousel - Core */ .owl-carousel { display: none; width: 100%; -webkit-tap-highlight-color: transparent; /* position relative and z-index fix webkit rendering fonts issue */ position: relative; z-index: 1; } .owl-carousel .owl-stage { position: relative; -ms-touch-action: pan-Y; touch-action: manipulation; -moz-backface-visibility: hidden; /* fix firefox animation glitch */ } .owl-carousel .owl-stage:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .owl-carousel .owl-stage-outer { position: relative; overflow: hidden; /* fix for flashing background */ -webkit-transform: translate3d(0px, 0px, 0px); } .owl-carousel .owl-wrapper, .owl-carousel .owl-item { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); } .owl-carousel .owl-item { position: relative; min-height: 1px; float: left; -webkit-backface-visibility: hidden; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } .owl-carousel .owl-item img { display: block; width: 100%; } .owl-carousel .owl-nav.disabled, .owl-carousel .owl-dots.disabled { display: none; } .owl-carousel .owl-nav .owl-prev, .owl-carousel .owl-nav .owl-next, .owl-carousel .owl-dot { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .owl-carousel .owl-nav button.owl-prev, .owl-carousel .owl-nav button.owl-next, .owl-carousel button.owl-dot { background: none; color: inherit; border: none; padding: 0 !important; font: inherit; } .owl-carousel.owl-loaded { display: block; } .owl-carousel.owl-loading { opacity: 0; display: block; } .owl-carousel.owl-hidden { opacity: 0; } .owl-carousel.owl-refresh .owl-item { visibility: hidden; } .owl-carousel.owl-drag .owl-item { -ms-touch-action: pan-y; touch-action: pan-y; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .owl-carousel.owl-grab { cursor: move; cursor: -webkit-grab; cursor: -moz-grab; cursor: grab; } .owl-carousel.owl-rtl { direction: rtl; } .owl-carousel.owl-rtl .owl-item { float: right; } /* No Js */ .no-js .owl-carousel { display: block; } /* * Owl Carousel - Animate Plugin */ .owl-carousel .animated { -webkit-animation-duration: 1000ms; -moz-animation-duration: 1000ms; -o-animation-duration: 1000ms; animation-duration: 1000ms; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; } .owl-carousel .owl-animated-in { z-index: 0; } .owl-carousel .owl-animated-out { z-index: 1; } .owl-carousel .fadeOut { -webkit-animation-name: fadeOut; -moz-animation-name: fadeOut; -o-animation-name: fadeOut; animation-name: fadeOut; } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } /* * Owl Carousel - Auto Height Plugin */ .owl-height { -webkit-transition: height 500ms ease-in-out; -o-transition: height 500ms ease-in-out; -moz-transition: height 500ms ease-in-out; transition: height 500ms ease-in-out; } /* * Owl Carousel - Lazy Load Plugin */ .owl-carousel .owl-item { /** This is introduced due to a bug in IE11 where lazy loading combined with autoheight plugin causes a wrong calculation of the height of the owl-item that breaks page layouts */ } .owl-carousel .owl-item .owl-lazy { opacity: 0; -webkit-transition: opacity 400ms ease; -o-transition: opacity 400ms ease; -moz-transition: opacity 400ms ease; transition: opacity 400ms ease; } .owl-carousel .owl-item .owl-lazy[src^=""], .owl-carousel .owl-item .owl-lazy:not([src]) { max-height: 0; } .owl-carousel .owl-item img.owl-lazy { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } /* * Owl Carousel - Video Plugin */ .owl-carousel .owl-video-wrapper { position: relative; height: 100%; background: #000; } .owl-carousel .owl-video-play-icon { position: absolute; height: 80px; width: 80px; left: 50%; top: 50%; margin-left: -40px; margin-top: -40px; background: url("owl.video.play.png") no-repeat; cursor: pointer; z-index: 1; -webkit-backface-visibility: hidden; -webkit-transition: -webkit-transform 100ms ease; transition: -webkit-transform 100ms ease; -o-transition: -o-transform 100ms ease; -moz-transition: transform 100ms ease, -moz-transform 100ms ease; transition: transform 100ms ease; transition: transform 100ms ease, -webkit-transform 100ms ease, -moz-transform 100ms ease, -o-transform 100ms ease; } .owl-carousel .owl-video-play-icon:hover { -webkit-transform: scale(1.3, 1.3); -moz-transform: scale(1.3, 1.3); -o-transform: scale(1.3, 1.3); transform: scale(1.3, 1.3); } .owl-carousel .owl-video-playing .owl-video-tn, .owl-carousel .owl-video-playing .owl-video-play-icon { display: none; } .owl-carousel .owl-video-tn { opacity: 0; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: contain; -webkit-transition: opacity 400ms ease; -o-transition: opacity 400ms ease; -moz-transition: opacity 400ms ease; transition: opacity 400ms ease; } .owl-carousel .owl-video-frame { position: relative; z-index: 1; height: 100%; width: 100%; } /* * Default theme - Owl Carousel CSS File */ .owl-theme .owl-nav { margin-top: 10px; text-align: center; -webkit-tap-highlight-color: transparent; } .owl-theme .owl-nav [class*='owl-'] { color: #FFF; font-size: 14px; margin: 5px; padding: 4px 7px; background: #D6D6D6; display: inline-block; cursor: pointer; border-radius: 3px; } .owl-theme .owl-nav [class*='owl-']:hover { background: #869791; color: #FFF; text-decoration: none; } .owl-theme .owl-nav .disabled { opacity: 0.5; cursor: default; } .owl-theme .owl-nav.disabled + .owl-dots { margin-top: 10px; } .owl-theme .owl-dots { text-align: center; -webkit-tap-highlight-color: transparent; } .owl-theme .owl-dots .owl-dot { display: inline-block; zoom: 1; *display: inline; } .owl-theme .owl-dots .owl-dot span { width: 10px; height: 10px; margin: 5px 7px; background: #D6D6D6; display: block; -webkit-backface-visibility: visible; -webkit-transition: opacity 200ms ease; -o-transition: opacity 200ms ease; -moz-transition: opacity 200ms ease; transition: opacity 200ms ease; border-radius: 30px; } .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span { background: #869791; } #js_magic-popup-bg { height: 100%; width: 100%; position: fixed; background-color: #000; opacity: .6; top: 0; z-index: 1000; } .js_magic-popup { position: fixed; top: 25%; z-index: 1001; width: 100%; } .loaderWrapper { background-color: #fff; position: fixed; width: 100%; height: 100%; top: 0; z-index: 9999; opacity: .60; } .loader, .loader:after { border-radius: 50%; width: 8em; height: 8em; } .loader { border: 1.1em solid rgba(48, 48, 48, 0.25); margin: 200px auto; position: fixed; top: 20%; left: 50%; text-indent: -9999em; border-left: 1.1em solid #434343; /*-webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0);*/ -webkit-animation: mymove 5s infinite linear; -moz-animation: mymove 1.2s infinite linear; -o-animation: mymove 1.2s infinite linear; animation: mymove 1.2s infinite linear; } @-moz-keyframes mymove { 100% { -moz-transform: rotate(360deg); transform: rotate(360deg); } } @-o-keyframes mymove { 100% { -o-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes mymove { 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes mymove { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .select2-container { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: inline-block; margin: 0; position: relative; vertical-align: middle; width: auto !important; } .select2-container .select2-selection--single { position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; cursor: pointer; display: block; height: 28px; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-select: none; } .select2-container .select2-selection--single:after { content: ''; display: block; position: absolute; right: 0; bottom: -5px; left: 0; margin: 0 auto; width: 11px; height: 6px; } .select2-container .select2-selection--single .select2-selection__rendered { display: block; font-weight: 600; font-size: 17px; text-transform: uppercase; padding-left: 5px; padding-right: 5px; overflow: hidden; white-space: nowrap; } .select2-container .select2-selection--single .select2-selection__clear { background-color: transparent; border: none; font-size: 1em; } .select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered { padding-right: 8px; padding-left: 20px; } .select2-container .select2-selection--multiple { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; cursor: pointer; display: block; min-height: 32px; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-select: none; } .select2-container .select2-selection--multiple .select2-selection__rendered { display: inline; list-style: none; padding: 0; } .select2-container .select2-selection--multiple .select2-selection__clear { background-color: transparent; border: none; font-size: 1em; } .select2-container .select2-search--inline .select2-search__field { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: none; font-size: 100%; margin-top: 5px; margin-left: 5px; padding: 0; max-width: 100%; resize: none; height: 18px; vertical-align: bottom; font-family: sans-serif; overflow: hidden; word-break: keep-all; } .select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button { -webkit-appearance: none; } .select2-dropdown { background-color: transparent; border: 1px solid #63687C; border-radius: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: block; position: absolute; left: -100000px; width: 100%; z-index: 1051; } .select2-results { display: block; } .select2-results__options { list-style: none; margin: 0; padding: 0; } .select2-results__option { padding: 6px; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-select: none; } .select2-results__option--selectable { cursor: pointer; } .select2-container--open .select2-selection--single:after { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .select2-container--open .select2-dropdown { left: 0; top: 10px; } .select2-container--open .select2-dropdown--above { border-bottom: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .select2-container--open .select2-dropdown--below { border-top-left-radius: 0; border-top-right-radius: 0; } .select2-search--dropdown { display: block; padding: 4px; } .select2-search--dropdown .select2-search__field { padding: 4px; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .select2-search--dropdown .select2-search__field::-webkit-search-cancel-button { -webkit-appearance: none; } .select2-search--dropdown.select2-search--hide { display: none; } .select2-close-mask { border: 0; margin: 0; padding: 0; display: block; position: fixed; left: 0; top: 0; min-height: 100%; min-width: 100%; height: auto; width: auto; opacity: 0; z-index: 99; background-color: #fff; filter: alpha(opacity=0); } .select2-hidden-accessible { border: 0 !important; clip: rect(0 0 0 0) !important; -webkit-clip-path: inset(50%) !important; clip-path: inset(50%) !important; height: 1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important; white-space: nowrap !important; } .select2-container--default .select2-selection--single { background-color: transparent; border: none; border-radius: 0; } .select2-container--default .select2-selection--single .select2-selection__rendered { color: #fff; line-height: 28px; } .select2-container--default .select2-selection--single .select2-selection__clear { cursor: pointer; float: right; font-weight: bold; height: 26px; margin-right: 20px; padding-right: 0px; } .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #999; } .select2-container--default .select2-selection--single .select2-selection__arrow { display: none; } .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: #888 transparent transparent transparent; border-style: solid; border-width: 5px 4px 0 4px; height: 0; left: 50%; margin-left: -4px; margin-top: -2px; position: absolute; top: 50%; width: 0; } .select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear { float: left; } .select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow { left: 1px; right: auto; } .select2-container--default.select2-container--disabled .select2-selection--single { background-color: #eee; cursor: default; } .select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear { display: none; } .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent #888 transparent; border-width: 0 4px 5px 4px; } .select2-container--default .select2-selection--multiple { background-color: white; border: 1px solid #aaa; border-radius: 4px; cursor: text; padding-bottom: 5px; padding-right: 5px; position: relative; } .select2-container--default .select2-selection--multiple.select2-selection--clearable { padding-right: 25px; } .select2-container--default .select2-selection--multiple .select2-selection__clear { cursor: pointer; font-weight: bold; height: 20px; margin-right: 10px; margin-top: 5px; position: absolute; right: 0; padding: 1px; } .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: #e4e4e4; border: 1px solid #aaa; border-radius: 4px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: inline-block; margin-left: 5px; margin-top: 5px; padding: 0; padding-left: 20px; position: relative; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; white-space: nowrap; } .select2-container--default .select2-selection--multiple .select2-selection__choice__display { cursor: default; padding-left: 2px; padding-right: 5px; } .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { background-color: transparent; border: none; border-right: 1px solid #aaa; border-top-left-radius: 4px; border-bottom-left-radius: 4px; color: #999; cursor: pointer; font-size: 1em; font-weight: bold; padding: 0 4px; position: absolute; left: 0; top: 0; } .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover, .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus { background-color: #f1f1f1; color: #333; outline: none; } .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice { margin-left: 5px; margin-right: auto; } .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__display { padding-left: 5px; padding-right: 2px; } .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove { border-left: 1px solid #aaa; border-right: none; border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__clear { float: left; margin-left: 10px; margin-right: auto; } .select2-container--default.select2-container--focus .select2-selection--multiple { border: solid black 1px; outline: 0; } .select2-container--default.select2-container--disabled .select2-selection--multiple { background-color: #eee; cursor: default; } .select2-container--default.select2-container--disabled .select2-selection__choice__remove { display: none; } .select2-container--default.select2-container--open.select2-container--above .select2-selection--single, .select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple { border-top-left-radius: 0; border-top-right-radius: 0; } .select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .select2-container--default .select2-search--dropdown .select2-search__field { border: 1px solid #aaa; } .select2-container--default .select2-search--inline .select2-search__field { background: transparent; border: none; outline: 0; -webkit-box-shadow: none; box-shadow: none; -webkit-appearance: textfield; } .select2-container--default .select2-results > .select2-results__options { max-height: 200px; overflow-y: auto; } .select2-container--default .select2-results__option .select2-results__option { padding-left: 1em; } .select2-container--default .select2-results__option .select2-results__option .select2-results__group { padding-left: 0; } .select2-container--default .select2-results__option .select2-results__option .select2-results__option { margin-left: -1em; padding-left: 2em; } .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option { margin-left: -2em; padding-left: 3em; } .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { margin-left: -3em; padding-left: 4em; } .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { margin-left: -4em; padding-left: 5em; } .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { margin-left: -5em; padding-left: 6em; } .select2-container--default .select2-results__option--group { padding: 0; } .select2-container--default .select2-results__option--disabled { color: #999; } .select2-container--default .select2-results__option--selected { background-color: transparent; } .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background-color: #446FE3; color: white; } .select2-container--default .select2-results__group { cursor: default; display: block; padding: 6px; } .select2-container--classic .select2-selection--single { background-color: #f7f7f7; border: 1px solid #aaa; border-radius: 4px; outline: 0; background-image: -webkit-linear-gradient(top, white 50%, #eeeeee 100%); background-image: -o-linear-gradient(top, white 50%, #eeeeee 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(50%, white), to(#eeeeee)); background-image: -moz-linear-gradient(top, white 50%, #eeeeee 100%); background-image: linear-gradient(to bottom, white 50%, #eeeeee 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0); } .select2-container--classic .select2-selection--single:focus { border: 1px solid #5897fb; } .select2-container--classic .select2-selection--single .select2-selection__rendered { color: #444; line-height: 28px; } .select2-container--classic .select2-selection--single .select2-selection__clear { cursor: pointer; float: right; font-weight: bold; height: 26px; margin-right: 20px; } .select2-container--classic .select2-selection--single .select2-selection__placeholder { color: #999; } .select2-container--classic .select2-selection--single .select2-selection__arrow { background-color: #ddd; border: none; border-left: 1px solid #aaa; border-top-right-radius: 4px; border-bottom-right-radius: 4px; height: 26px; position: absolute; top: 1px; right: 1px; width: 20px; background-image: -webkit-linear-gradient(top, #eeeeee 50%, #cccccc 100%); background-image: -o-linear-gradient(top, #eeeeee 50%, #cccccc 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #eeeeee), to(#cccccc)); background-image: -moz-linear-gradient(top, #eeeeee 50%, #cccccc 100%); background-image: linear-gradient(to bottom, #eeeeee 50%, #cccccc 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFCCCCCC', GradientType=0); } .select2-container--classic .select2-selection--single .select2-selection__arrow b { border-color: #888 transparent transparent transparent; border-style: solid; border-width: 5px 4px 0 4px; height: 0; left: 50%; margin-left: -4px; margin-top: -2px; position: absolute; top: 50%; width: 0; } .select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__clear { float: left; } .select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow { border: none; border-right: 1px solid #aaa; border-radius: 0; border-top-left-radius: 4px; border-bottom-left-radius: 4px; left: 1px; right: auto; } .select2-container--classic.select2-container--open .select2-selection--single { border: 1px solid #5897fb; } .select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow { background: transparent; border: none; } .select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent #888 transparent; border-width: 0 4px 5px 4px; } .select2-container--classic.select2-container--open.select2-container--above .select2-selection--single { border-top: none; border-top-left-radius: 0; border-top-right-radius: 0; background-image: -webkit-linear-gradient(top, white 0%, #eeeeee 50%); background-image: -o-linear-gradient(top, white 0%, #eeeeee 50%); background-image: -webkit-gradient(linear, left top, left bottom, from(white), color-stop(50%, #eeeeee)); background-image: -moz-linear-gradient(top, white 0%, #eeeeee 50%); background-image: linear-gradient(to bottom, white 0%, #eeeeee 50%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0); } .select2-container--classic.select2-container--open.select2-container--below .select2-selection--single { border-bottom: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; background-image: -webkit-linear-gradient(top, #eeeeee 50%, white 100%); background-image: -o-linear-gradient(top, #eeeeee 50%, white 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #eeeeee), to(white)); background-image: -moz-linear-gradient(top, #eeeeee 50%, white 100%); background-image: linear-gradient(to bottom, #eeeeee 50%, white 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFFFFFFF', GradientType=0); } .select2-container--classic .select2-selection--multiple { background-color: white; border: 1px solid #aaa; border-radius: 4px; cursor: text; outline: 0; padding-bottom: 5px; padding-right: 5px; } .select2-container--classic .select2-selection--multiple:focus { border: 1px solid #5897fb; } .select2-container--classic .select2-selection--multiple .select2-selection__clear { display: none; } .select2-container--classic .select2-selection--multiple .select2-selection__choice { background-color: #e4e4e4; border: 1px solid #aaa; border-radius: 4px; display: inline-block; margin-left: 5px; margin-top: 5px; padding: 0; } .select2-container--classic .select2-selection--multiple .select2-selection__choice__display { cursor: default; padding-left: 2px; padding-right: 5px; } .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove { background-color: transparent; border: none; border-top-left-radius: 4px; border-bottom-left-radius: 4px; color: #888; cursor: pointer; font-size: 1em; font-weight: bold; padding: 0 4px; } .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover { color: #555; outline: none; } .select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice { margin-left: 5px; margin-right: auto; } .select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__display { padding-left: 5px; padding-right: 2px; } .select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .select2-container--classic.select2-container--open .select2-selection--multiple { border: 1px solid #5897fb; } .select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple { border-top: none; border-top-left-radius: 0; border-top-right-radius: 0; } .select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple { border-bottom: none; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .select2-container--classic .select2-search--dropdown .select2-search__field { border: 1px solid #aaa; outline: 0; } .select2-container--classic .select2-search--inline .select2-search__field { outline: 0; -webkit-box-shadow: none; box-shadow: none; } .select2-container--classic .select2-dropdown { background-color: white; border: 1px solid transparent; } .select2-container--classic .select2-dropdown--above { border-bottom: none; } .select2-container--classic .select2-dropdown--below { border-top: none; } .select2-container--classic .select2-results > .select2-results__options { max-height: 200px; overflow-y: auto; } .select2-container--classic .select2-results__option--group { padding: 0; } .select2-container--classic .select2-results__option--disabled { color: grey; } .select2-container--classic .select2-results__option--highlighted.select2-results__option--selectable { background-color: #3875d7; color: white; } .select2-container--classic .select2-results__group { cursor: default; display: block; padding: 6px; } .select2-container--classic.select2-container--open .select2-dropdown { border-color: #5897fb; } @-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); -moz-transform: translateY(-30px); -o-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); -moz-transform: translateY(-15px); -o-transform: translateY(-15px); transform: translateY(-15px); } } @-moz-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); -moz-transform: translateY(-30px); -o-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); -moz-transform: translateY(-15px); -o-transform: translateY(-15px); transform: translateY(-15px); } } @-o-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); -moz-transform: translateY(-30px); -o-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); -moz-transform: translateY(-15px); -o-transform: translateY(-15px); transform: translateY(-15px); } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); -moz-transform: translateY(-30px); -o-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); -moz-transform: translateY(-15px); -o-transform: translateY(-15px); transform: translateY(-15px); } } @-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 jello { 11.1% { -webkit-transform: none; -moz-transform: none; -o-transform: none; transform: none; } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); -moz-transform: skewX(-12.5deg) skewY(-12.5deg); -o-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); -moz-transform: skewX(6.25deg) skewY(6.25deg); -o-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); -moz-transform: skewX(-3.125deg) skewY(-3.125deg); -o-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); -moz-transform: skewX(1.5625deg) skewY(1.5625deg); -o-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); -moz-transform: skewX(-0.78125deg) skewY(-0.78125deg); -o-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.39063deg) skewY(0.39063deg); -moz-transform: skewX(0.39063deg) skewY(0.39063deg); -o-transform: skewX(0.39063deg) skewY(0.39063deg); transform: skewX(0.39063deg) skewY(0.39063deg); } 88.8% { -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg); -moz-transform: skewX(-0.19531deg) skewY(-0.19531deg); -o-transform: skewX(-0.19531deg) skewY(-0.19531deg); transform: skewX(-0.19531deg) skewY(-0.19531deg); } 100% { -webkit-transform: none; -moz-transform: none; -o-transform: none; transform: none; } } @-moz-keyframes jello { 11.1% { -webkit-transform: none; -moz-transform: none; -o-transform: none; transform: none; } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); -moz-transform: skewX(-12.5deg) skewY(-12.5deg); -o-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); -moz-transform: skewX(6.25deg) skewY(6.25deg); -o-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); -moz-transform: skewX(-3.125deg) skewY(-3.125deg); -o-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); -moz-transform: skewX(1.5625deg) skewY(1.5625deg); -o-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); -moz-transform: skewX(-0.78125deg) skewY(-0.78125deg); -o-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.39063deg) skewY(0.39063deg); -moz-transform: skewX(0.39063deg) skewY(0.39063deg); -o-transform: skewX(0.39063deg) skewY(0.39063deg); transform: skewX(0.39063deg) skewY(0.39063deg); } 88.8% { -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg); -moz-transform: skewX(-0.19531deg) skewY(-0.19531deg); -o-transform: skewX(-0.19531deg) skewY(-0.19531deg); transform: skewX(-0.19531deg) skewY(-0.19531deg); } 100% { -webkit-transform: none; -moz-transform: none; -o-transform: none; transform: none; } } @-o-keyframes jello { 11.1% { -webkit-transform: none; -moz-transform: none; -o-transform: none; transform: none; } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); -moz-transform: skewX(-12.5deg) skewY(-12.5deg); -o-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); -moz-transform: skewX(6.25deg) skewY(6.25deg); -o-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); -moz-transform: skewX(-3.125deg) skewY(-3.125deg); -o-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); -moz-transform: skewX(1.5625deg) skewY(1.5625deg); -o-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); -moz-transform: skewX(-0.78125deg) skewY(-0.78125deg); -o-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.39063deg) skewY(0.39063deg); -moz-transform: skewX(0.39063deg) skewY(0.39063deg); -o-transform: skewX(0.39063deg) skewY(0.39063deg); transform: skewX(0.39063deg) skewY(0.39063deg); } 88.8% { -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg); -moz-transform: skewX(-0.19531deg) skewY(-0.19531deg); -o-transform: skewX(-0.19531deg) skewY(-0.19531deg); transform: skewX(-0.19531deg) skewY(-0.19531deg); } 100% { -webkit-transform: none; -moz-transform: none; -o-transform: none; transform: none; } } @keyframes jello { 11.1% { -webkit-transform: none; -moz-transform: none; -o-transform: none; transform: none; } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); -moz-transform: skewX(-12.5deg) skewY(-12.5deg); -o-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); -moz-transform: skewX(6.25deg) skewY(6.25deg); -o-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); -moz-transform: skewX(-3.125deg) skewY(-3.125deg); -o-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); -moz-transform: skewX(1.5625deg) skewY(1.5625deg); -o-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); -moz-transform: skewX(-0.78125deg) skewY(-0.78125deg); -o-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.39063deg) skewY(0.39063deg); -moz-transform: skewX(0.39063deg) skewY(0.39063deg); -o-transform: skewX(0.39063deg) skewY(0.39063deg); transform: skewX(0.39063deg) skewY(0.39063deg); } 88.8% { -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg); -moz-transform: skewX(-0.19531deg) skewY(-0.19531deg); -o-transform: skewX(-0.19531deg) skewY(-0.19531deg); transform: skewX(-0.19531deg) skewY(-0.19531deg); } 100% { -webkit-transform: none; -moz-transform: none; -o-transform: none; transform: none; } } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } @-moz-keyframes pulse { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } @-o-keyframes pulse { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } @keyframes pulse { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } @-webkit-keyframes rubberBand { 0% { -webkit-transform: scale3d(1, 1, 1); -moz-transform: scale3d(1, 1, 1); -o-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); -moz-transform: scale3d(1.25, 0.75, 1); -o-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); -moz-transform: scale3d(0.75, 1.25, 1); -o-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); -moz-transform: scale3d(1.15, 0.85, 1); -o-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); -moz-transform: scale3d(0.95, 1.05, 1); -o-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); -moz-transform: scale3d(1.05, 0.95, 1); -o-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } 100% { -webkit-transform: scale3d(1, 1, 1); -moz-transform: scale3d(1, 1, 1); -o-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @-moz-keyframes rubberBand { 0% { -webkit-transform: scale3d(1, 1, 1); -moz-transform: scale3d(1, 1, 1); -o-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); -moz-transform: scale3d(1.25, 0.75, 1); -o-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); -moz-transform: scale3d(0.75, 1.25, 1); -o-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); -moz-transform: scale3d(1.15, 0.85, 1); -o-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); -moz-transform: scale3d(0.95, 1.05, 1); -o-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); -moz-transform: scale3d(1.05, 0.95, 1); -o-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } 100% { -webkit-transform: scale3d(1, 1, 1); -moz-transform: scale3d(1, 1, 1); -o-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @-o-keyframes rubberBand { 0% { -webkit-transform: scale3d(1, 1, 1); -moz-transform: scale3d(1, 1, 1); -o-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); -moz-transform: scale3d(1.25, 0.75, 1); -o-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); -moz-transform: scale3d(0.75, 1.25, 1); -o-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); -moz-transform: scale3d(1.15, 0.85, 1); -o-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); -moz-transform: scale3d(0.95, 1.05, 1); -o-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); -moz-transform: scale3d(1.05, 0.95, 1); -o-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } 100% { -webkit-transform: scale3d(1, 1, 1); -moz-transform: scale3d(1, 1, 1); -o-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes rubberBand { 0% { -webkit-transform: scale3d(1, 1, 1); -moz-transform: scale3d(1, 1, 1); -o-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); -moz-transform: scale3d(1.25, 0.75, 1); -o-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); -moz-transform: scale3d(0.75, 1.25, 1); -o-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); -moz-transform: scale3d(1.15, 0.85, 1); -o-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); -moz-transform: scale3d(0.95, 1.05, 1); -o-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); -moz-transform: scale3d(1.05, 0.95, 1); -o-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } 100% { -webkit-transform: scale3d(1, 1, 1); -moz-transform: scale3d(1, 1, 1); -o-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @-webkit-keyframes shake { 0%, 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); -moz-transform: translateX(-10px); -o-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); -moz-transform: translateX(10px); -o-transform: translateX(10px); transform: translateX(10px); } } @-moz-keyframes shake { 0%, 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); -moz-transform: translateX(-10px); -o-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); -moz-transform: translateX(10px); -o-transform: translateX(10px); transform: translateX(10px); } } @-o-keyframes shake { 0%, 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); -moz-transform: translateX(-10px); -o-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); -moz-transform: translateX(10px); -o-transform: translateX(10px); transform: translateX(10px); } } @keyframes shake { 0%, 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); -moz-transform: translateX(-10px); -o-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); -moz-transform: translateX(10px); -o-transform: translateX(10px); transform: translateX(10px); } } @-webkit-keyframes swing { 20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; -moz-transform-origin: top center; -o-transform-origin: top center; transform-origin: top center; } 20% { -webkit-transform: rotate(15deg); -moz-transform: rotate(15deg); -o-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -o-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -o-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } } @-moz-keyframes swing { 20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; -moz-transform-origin: top center; -o-transform-origin: top center; transform-origin: top center; } 20% { -webkit-transform: rotate(15deg); -moz-transform: rotate(15deg); -o-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -o-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -o-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } } @-o-keyframes swing { 20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; -moz-transform-origin: top center; -o-transform-origin: top center; transform-origin: top center; } 20% { -webkit-transform: rotate(15deg); -moz-transform: rotate(15deg); -o-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -o-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -o-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes swing { 20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; -moz-transform-origin: top center; -o-transform-origin: top center; transform-origin: top center; } 20% { -webkit-transform: rotate(15deg); -moz-transform: rotate(15deg); -o-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -o-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -o-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } } @-webkit-keyframes tada { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); -moz-transform: scale(0.9) rotate(-3deg); -o-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); -moz-transform: scale(1.1) rotate(3deg); -o-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); -moz-transform: scale(1.1) rotate(-3deg); -o-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); -moz-transform: scale(1) rotate(0); -o-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } } @-moz-keyframes tada { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); -moz-transform: scale(0.9) rotate(-3deg); -o-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); -moz-transform: scale(1.1) rotate(3deg); -o-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); -moz-transform: scale(1.1) rotate(-3deg); -o-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); -moz-transform: scale(1) rotate(0); -o-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } } @-o-keyframes tada { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); -moz-transform: scale(0.9) rotate(-3deg); -o-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); -moz-transform: scale(1.1) rotate(3deg); -o-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); -moz-transform: scale(1.1) rotate(-3deg); -o-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); -moz-transform: scale(1) rotate(0); -o-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } } @keyframes tada { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); -moz-transform: scale(0.9) rotate(-3deg); -o-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); -moz-transform: scale(1.1) rotate(3deg); -o-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); -moz-transform: scale(1.1) rotate(-3deg); -o-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); -moz-transform: scale(1) rotate(0); -o-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } } @-webkit-keyframes wobble { 0% { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); -moz-transform: translateX(-25%) rotate(-5deg); -o-transform: translateX(-25%) rotate(-5deg); transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); -moz-transform: translateX(20%) rotate(3deg); -o-transform: translateX(20%) rotate(3deg); transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); -moz-transform: translateX(-15%) rotate(-3deg); -o-transform: translateX(-15%) rotate(-3deg); transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); -moz-transform: translateX(10%) rotate(2deg); -o-transform: translateX(10%) rotate(2deg); transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); -moz-transform: translateX(-5%) rotate(-1deg); -o-transform: translateX(-5%) rotate(-1deg); transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } } @-moz-keyframes wobble { 0% { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); -moz-transform: translateX(-25%) rotate(-5deg); -o-transform: translateX(-25%) rotate(-5deg); transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); -moz-transform: translateX(20%) rotate(3deg); -o-transform: translateX(20%) rotate(3deg); transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); -moz-transform: translateX(-15%) rotate(-3deg); -o-transform: translateX(-15%) rotate(-3deg); transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); -moz-transform: translateX(10%) rotate(2deg); -o-transform: translateX(10%) rotate(2deg); transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); -moz-transform: translateX(-5%) rotate(-1deg); -o-transform: translateX(-5%) rotate(-1deg); transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } } @-o-keyframes wobble { 0% { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); -moz-transform: translateX(-25%) rotate(-5deg); -o-transform: translateX(-25%) rotate(-5deg); transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); -moz-transform: translateX(20%) rotate(3deg); -o-transform: translateX(20%) rotate(3deg); transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); -moz-transform: translateX(-15%) rotate(-3deg); -o-transform: translateX(-15%) rotate(-3deg); transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); -moz-transform: translateX(10%) rotate(2deg); -o-transform: translateX(10%) rotate(2deg); transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); -moz-transform: translateX(-5%) rotate(-1deg); -o-transform: translateX(-5%) rotate(-1deg); transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } } @keyframes wobble { 0% { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); -moz-transform: translateX(-25%) rotate(-5deg); -o-transform: translateX(-25%) rotate(-5deg); transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); -moz-transform: translateX(20%) rotate(3deg); -o-transform: translateX(20%) rotate(3deg); transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); -moz-transform: translateX(-15%) rotate(-3deg); -o-transform: translateX(-15%) rotate(-3deg); transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); -moz-transform: translateX(10%) rotate(2deg); -o-transform: translateX(10%) rotate(2deg); transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); -moz-transform: translateX(-5%) rotate(-1deg); -o-transform: translateX(-5%) rotate(-1deg); transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } } @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(0.3); -moz-transform: scale(0.3); -o-transform: scale(0.3); transform: scale(0.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } 70% { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); } 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } @-moz-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(0.3); -moz-transform: scale(0.3); -o-transform: scale(0.3); transform: scale(0.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } 70% { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); } 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } @-o-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(0.3); -moz-transform: scale(0.3); -o-transform: scale(0.3); transform: scale(0.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } 70% { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); } 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } @keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(0.3); -moz-transform: scale(0.3); -o-transform: scale(0.3); transform: scale(0.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } 70% { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); } 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } @-webkit-keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -moz-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -o-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-moz-keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -moz-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -o-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-o-keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -moz-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -o-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -moz-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -o-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -moz-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); -moz-transform: translateX(30px); -o-transform: translateX(30px); transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); -moz-transform: translateX(-10px); -o-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-moz-keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -moz-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); -moz-transform: translateX(30px); -o-transform: translateX(30px); transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); -moz-transform: translateX(-10px); -o-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-o-keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -moz-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); -moz-transform: translateX(30px); -o-transform: translateX(30px); transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); -moz-transform: translateX(-10px); -o-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -moz-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); -moz-transform: translateX(30px); -o-transform: translateX(30px); transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); -moz-transform: translateX(-10px); -o-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -moz-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); -moz-transform: translateX(-30px); -o-transform: translateX(-30px); transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); -moz-transform: translateX(10px); -o-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-moz-keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -moz-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); -moz-transform: translateX(-30px); -o-transform: translateX(-30px); transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); -moz-transform: translateX(10px); -o-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-o-keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -moz-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); -moz-transform: translateX(-30px); -o-transform: translateX(-30px); transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); -moz-transform: translateX(10px); -o-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -moz-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); -moz-transform: translateX(-30px); -o-transform: translateX(-30px); transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); -moz-transform: translateX(10px); -o-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); -moz-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); -moz-transform: translateY(-30px); -o-transform: translateY(-30px); transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); -moz-transform: translateY(10px); -o-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-moz-keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); -moz-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); -moz-transform: translateY(-30px); -o-transform: translateY(-30px); transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); -moz-transform: translateY(10px); -o-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-o-keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); -moz-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); -moz-transform: translateY(-30px); -o-transform: translateY(-30px); transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); -moz-transform: translateY(10px); -o-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); -moz-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); -moz-transform: translateY(-30px); -o-transform: translateY(-30px); transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); -moz-transform: translateY(10px); -o-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes bounceOut { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(0.95); -moz-transform: scale(0.95); -o-transform: scale(0.95); transform: scale(0.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(0.3); -moz-transform: scale(0.3); -o-transform: scale(0.3); transform: scale(0.3); } } @-moz-keyframes bounceOut { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(0.95); -moz-transform: scale(0.95); -o-transform: scale(0.95); transform: scale(0.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(0.3); -moz-transform: scale(0.3); -o-transform: scale(0.3); transform: scale(0.3); } } @-o-keyframes bounceOut { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(0.95); -moz-transform: scale(0.95); -o-transform: scale(0.95); transform: scale(0.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(0.3); -moz-transform: scale(0.3); -o-transform: scale(0.3); transform: scale(0.3); } } @keyframes bounceOut { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(0.95); -moz-transform: scale(0.95); -o-transform: scale(0.95); transform: scale(0.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(0.3); -moz-transform: scale(0.3); -o-transform: scale(0.3); transform: scale(0.3); } } @-webkit-keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); -o-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -moz-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } } @-moz-keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); -o-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -moz-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } } @-o-keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); -o-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -moz-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } } @keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); -o-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -moz-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } } @-webkit-keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -o-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -moz-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } } @-moz-keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -o-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -moz-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } } @-o-keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -o-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -moz-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -o-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -moz-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } } @-webkit-keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -moz-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } } @-moz-keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -moz-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } } @-o-keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -moz-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -moz-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } } @-webkit-keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -moz-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } } @-moz-keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -moz-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } } @-o-keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -moz-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -moz-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } } @-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: translateY(-20px); -moz-transform: translateY(-20px); -o-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-moz-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); -o-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-o-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); -o-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); -o-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -moz-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-moz-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -moz-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-o-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -moz-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -moz-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-moz-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-o-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -moz-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-moz-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -moz-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-o-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -moz-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -moz-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -o-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-moz-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -o-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-o-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -o-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -o-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); -moz-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-moz-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); -moz-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-o-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); -moz-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); -moz-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-moz-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-o-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); -moz-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-moz-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); -moz-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-o-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); -moz-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); -moz-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-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; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); } } @-moz-keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); } } @-o-keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); } } @keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); } } @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -moz-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } } @-moz-keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -moz-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } } @-o-keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -moz-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } } @keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -moz-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); } } @-moz-keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); } } @-o-keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); } } @keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); } } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -moz-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } } @-moz-keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -moz-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } } @-o-keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -moz-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -moz-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -o-transform: translateX(20px); transform: translateX(20px); } } @-moz-keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -o-transform: translateX(20px); transform: translateX(20px); } } @-o-keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -o-transform: translateX(20px); transform: translateX(20px); } } @keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -o-transform: translateX(20px); transform: translateX(20px); } } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -moz-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } } @-moz-keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -moz-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } } @-o-keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -moz-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -moz-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); -o-transform: translateY(-20px); transform: translateY(-20px); } } @-moz-keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); -o-transform: translateY(-20px); transform: translateY(-20px); } } @-o-keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); -o-transform: translateY(-20px); transform: translateY(-20px); } } @keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); -o-transform: translateY(-20px); transform: translateY(-20px); } } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -moz-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } } @-moz-keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -moz-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } } @-o-keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -moz-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -moz-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } } @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) rotateY(0); -moz-transform: perspective(400px) rotateY(0); -o-transform: perspective(400px) rotateY(0); transform: perspective(400px) rotateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg); -moz-transform: perspective(400px) translateZ(150px) rotateY(170deg); -o-transform: perspective(400px) translateZ(150px) rotateY(170deg); transform: perspective(400px) translateZ(150px) rotateY(170deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -moz-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -o-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) rotateY(360deg) scale(0.95); -moz-transform: perspective(400px) rotateY(360deg) scale(0.95); -o-transform: perspective(400px) rotateY(360deg) scale(0.95); transform: perspective(400px) rotateY(360deg) scale(0.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px) scale(1); -moz-transform: perspective(400px) scale(1); -o-transform: perspective(400px) scale(1); transform: perspective(400px) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @-moz-keyframes flip { 0% { -webkit-transform: perspective(400px) rotateY(0); -moz-transform: perspective(400px) rotateY(0); -o-transform: perspective(400px) rotateY(0); transform: perspective(400px) rotateY(0); -moz-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg); -moz-transform: perspective(400px) translateZ(150px) rotateY(170deg); -o-transform: perspective(400px) translateZ(150px) rotateY(170deg); transform: perspective(400px) translateZ(150px) rotateY(170deg); -moz-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -moz-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -o-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -moz-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) rotateY(360deg) scale(0.95); -moz-transform: perspective(400px) rotateY(360deg) scale(0.95); -o-transform: perspective(400px) rotateY(360deg) scale(0.95); transform: perspective(400px) rotateY(360deg) scale(0.95); -moz-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px) scale(1); -moz-transform: perspective(400px) scale(1); -o-transform: perspective(400px) scale(1); transform: perspective(400px) scale(1); -moz-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @-o-keyframes flip { 0% { -webkit-transform: perspective(400px) rotateY(0); -moz-transform: perspective(400px) rotateY(0); -o-transform: perspective(400px) rotateY(0); transform: perspective(400px) rotateY(0); -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg); -moz-transform: perspective(400px) translateZ(150px) rotateY(170deg); -o-transform: perspective(400px) translateZ(150px) rotateY(170deg); transform: perspective(400px) translateZ(150px) rotateY(170deg); -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -moz-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -o-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) rotateY(360deg) scale(0.95); -moz-transform: perspective(400px) rotateY(360deg) scale(0.95); -o-transform: perspective(400px) rotateY(360deg) scale(0.95); transform: perspective(400px) rotateY(360deg) scale(0.95); -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px) scale(1); -moz-transform: perspective(400px) scale(1); -o-transform: perspective(400px) scale(1); transform: perspective(400px) scale(1); -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { 0% { -webkit-transform: perspective(400px) rotateY(0); -moz-transform: perspective(400px) rotateY(0); -o-transform: perspective(400px) rotateY(0); transform: perspective(400px) rotateY(0); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg); -moz-transform: perspective(400px) translateZ(150px) rotateY(170deg); -o-transform: perspective(400px) translateZ(150px) rotateY(170deg); transform: perspective(400px) translateZ(150px) rotateY(170deg); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -moz-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -o-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) rotateY(360deg) scale(0.95); -moz-transform: perspective(400px) rotateY(360deg) scale(0.95); -o-transform: perspective(400px) rotateY(360deg) scale(0.95); transform: perspective(400px) rotateY(360deg) scale(0.95); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px) scale(1); -moz-transform: perspective(400px) scale(1); -o-transform: perspective(400px) scale(1); transform: perspective(400px) scale(1); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @-webkit-keyframes flipInX { 0% { opacity: 0; -webkit-transform: perspective(400px) rotateX(90deg); -moz-transform: perspective(400px) rotateX(90deg); -o-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); -moz-transform: perspective(400px) rotateX(-10deg); -o-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); -moz-transform: perspective(400px) rotateX(10deg); -o-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); } 100% { opacity: 1; -webkit-transform: perspective(400px) rotateX(0deg); -moz-transform: perspective(400px) rotateX(0deg); -o-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); } } @-moz-keyframes flipInX { 0% { opacity: 0; -webkit-transform: perspective(400px) rotateX(90deg); -moz-transform: perspective(400px) rotateX(90deg); -o-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); -moz-transform: perspective(400px) rotateX(-10deg); -o-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); -moz-transform: perspective(400px) rotateX(10deg); -o-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); } 100% { opacity: 1; -webkit-transform: perspective(400px) rotateX(0deg); -moz-transform: perspective(400px) rotateX(0deg); -o-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); } } @-o-keyframes flipInX { 0% { opacity: 0; -webkit-transform: perspective(400px) rotateX(90deg); -moz-transform: perspective(400px) rotateX(90deg); -o-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); -moz-transform: perspective(400px) rotateX(-10deg); -o-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); -moz-transform: perspective(400px) rotateX(10deg); -o-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); } 100% { opacity: 1; -webkit-transform: perspective(400px) rotateX(0deg); -moz-transform: perspective(400px) rotateX(0deg); -o-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); } } @keyframes flipInX { 0% { opacity: 0; -webkit-transform: perspective(400px) rotateX(90deg); -moz-transform: perspective(400px) rotateX(90deg); -o-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); -moz-transform: perspective(400px) rotateX(-10deg); -o-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); -moz-transform: perspective(400px) rotateX(10deg); -o-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); } 100% { opacity: 1; -webkit-transform: perspective(400px) rotateX(0deg); -moz-transform: perspective(400px) rotateX(0deg); -o-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); } } @-webkit-keyframes flipInY { 0% { opacity: 0; -webkit-transform: perspective(400px) rotateY(90deg); -moz-transform: perspective(400px) rotateY(90deg); -o-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); -moz-transform: perspective(400px) rotateY(-10deg); -o-transform: perspective(400px) rotateY(-10deg); transform: perspective(400px) rotateY(-10deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); -moz-transform: perspective(400px) rotateY(10deg); -o-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); } 100% { opacity: 1; -webkit-transform: perspective(400px) rotateY(0deg); -moz-transform: perspective(400px) rotateY(0deg); -o-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); } } @-moz-keyframes flipInY { 0% { opacity: 0; -webkit-transform: perspective(400px) rotateY(90deg); -moz-transform: perspective(400px) rotateY(90deg); -o-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); -moz-transform: perspective(400px) rotateY(-10deg); -o-transform: perspective(400px) rotateY(-10deg); transform: perspective(400px) rotateY(-10deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); -moz-transform: perspective(400px) rotateY(10deg); -o-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); } 100% { opacity: 1; -webkit-transform: perspective(400px) rotateY(0deg); -moz-transform: perspective(400px) rotateY(0deg); -o-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); } } @-o-keyframes flipInY { 0% { opacity: 0; -webkit-transform: perspective(400px) rotateY(90deg); -moz-transform: perspective(400px) rotateY(90deg); -o-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); -moz-transform: perspective(400px) rotateY(-10deg); -o-transform: perspective(400px) rotateY(-10deg); transform: perspective(400px) rotateY(-10deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); -moz-transform: perspective(400px) rotateY(10deg); -o-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); } 100% { opacity: 1; -webkit-transform: perspective(400px) rotateY(0deg); -moz-transform: perspective(400px) rotateY(0deg); -o-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); } } @keyframes flipInY { 0% { opacity: 0; -webkit-transform: perspective(400px) rotateY(90deg); -moz-transform: perspective(400px) rotateY(90deg); -o-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); -moz-transform: perspective(400px) rotateY(-10deg); -o-transform: perspective(400px) rotateY(-10deg); transform: perspective(400px) rotateY(-10deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); -moz-transform: perspective(400px) rotateY(10deg); -o-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); } 100% { opacity: 1; -webkit-transform: perspective(400px) rotateY(0deg); -moz-transform: perspective(400px) rotateY(0deg); -o-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); } } @-webkit-keyframes flipOutX { 0% { opacity: 1; -webkit-transform: perspective(400px) rotateX(0deg); -moz-transform: perspective(400px) rotateX(0deg); -o-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); } 100% { opacity: 0; -webkit-transform: perspective(400px) rotateX(90deg); -moz-transform: perspective(400px) rotateX(90deg); -o-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); } } @-moz-keyframes flipOutX { 0% { opacity: 1; -webkit-transform: perspective(400px) rotateX(0deg); -moz-transform: perspective(400px) rotateX(0deg); -o-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); } 100% { opacity: 0; -webkit-transform: perspective(400px) rotateX(90deg); -moz-transform: perspective(400px) rotateX(90deg); -o-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); } } @-o-keyframes flipOutX { 0% { opacity: 1; -webkit-transform: perspective(400px) rotateX(0deg); -moz-transform: perspective(400px) rotateX(0deg); -o-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); } 100% { opacity: 0; -webkit-transform: perspective(400px) rotateX(90deg); -moz-transform: perspective(400px) rotateX(90deg); -o-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); } } @keyframes flipOutX { 0% { opacity: 1; -webkit-transform: perspective(400px) rotateX(0deg); -moz-transform: perspective(400px) rotateX(0deg); -o-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); } 100% { opacity: 0; -webkit-transform: perspective(400px) rotateX(90deg); -moz-transform: perspective(400px) rotateX(90deg); -o-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); } } @-webkit-keyframes flipOutY { 0% { opacity: 1; -webkit-transform: perspective(400px) rotateY(0deg); -moz-transform: perspective(400px) rotateY(0deg); -o-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); } 100% { opacity: 0; -webkit-transform: perspective(400px) rotateY(90deg); -moz-transform: perspective(400px) rotateY(90deg); -o-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); } } @-moz-keyframes flipOutY { 0% { opacity: 1; -webkit-transform: perspective(400px) rotateY(0deg); -moz-transform: perspective(400px) rotateY(0deg); -o-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); } 100% { opacity: 0; -webkit-transform: perspective(400px) rotateY(90deg); -moz-transform: perspective(400px) rotateY(90deg); -o-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); } } @-o-keyframes flipOutY { 0% { opacity: 1; -webkit-transform: perspective(400px) rotateY(0deg); -moz-transform: perspective(400px) rotateY(0deg); -o-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); } 100% { opacity: 0; -webkit-transform: perspective(400px) rotateY(90deg); -moz-transform: perspective(400px) rotateY(90deg); -o-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); } } @keyframes flipOutY { 0% { opacity: 1; -webkit-transform: perspective(400px) rotateY(0deg); -moz-transform: perspective(400px) rotateY(0deg); -o-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); } 100% { opacity: 0; -webkit-transform: perspective(400px) rotateY(90deg); -moz-transform: perspective(400px) rotateY(90deg); -o-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); } } @-webkit-keyframes lightSpeedIn { 0% { opacity: 0; -webkit-transform: translateX(100%) skewX(-30deg); -moz-transform: translateX(100%) skewX(-30deg); -o-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); } 60% { opacity: 1; -webkit-transform: translateX(-20%) skewX(30deg); -moz-transform: translateX(-20%) skewX(30deg); -o-transform: translateX(-20%) skewX(30deg); transform: translateX(-20%) skewX(30deg); } 80% { opacity: 1; -webkit-transform: translateX(0%) skewX(-15deg); -moz-transform: translateX(0%) skewX(-15deg); -o-transform: translateX(0%) skewX(-15deg); transform: translateX(0%) skewX(-15deg); } 100% { opacity: 1; -webkit-transform: translateX(0%) skewX(0deg); -moz-transform: translateX(0%) skewX(0deg); -o-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); } } @-moz-keyframes lightSpeedIn { 0% { opacity: 0; -webkit-transform: translateX(100%) skewX(-30deg); -moz-transform: translateX(100%) skewX(-30deg); -o-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); } 60% { opacity: 1; -webkit-transform: translateX(-20%) skewX(30deg); -moz-transform: translateX(-20%) skewX(30deg); -o-transform: translateX(-20%) skewX(30deg); transform: translateX(-20%) skewX(30deg); } 80% { opacity: 1; -webkit-transform: translateX(0%) skewX(-15deg); -moz-transform: translateX(0%) skewX(-15deg); -o-transform: translateX(0%) skewX(-15deg); transform: translateX(0%) skewX(-15deg); } 100% { opacity: 1; -webkit-transform: translateX(0%) skewX(0deg); -moz-transform: translateX(0%) skewX(0deg); -o-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); } } @-o-keyframes lightSpeedIn { 0% { opacity: 0; -webkit-transform: translateX(100%) skewX(-30deg); -moz-transform: translateX(100%) skewX(-30deg); -o-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); } 60% { opacity: 1; -webkit-transform: translateX(-20%) skewX(30deg); -moz-transform: translateX(-20%) skewX(30deg); -o-transform: translateX(-20%) skewX(30deg); transform: translateX(-20%) skewX(30deg); } 80% { opacity: 1; -webkit-transform: translateX(0%) skewX(-15deg); -moz-transform: translateX(0%) skewX(-15deg); -o-transform: translateX(0%) skewX(-15deg); transform: translateX(0%) skewX(-15deg); } 100% { opacity: 1; -webkit-transform: translateX(0%) skewX(0deg); -moz-transform: translateX(0%) skewX(0deg); -o-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); } } @keyframes lightSpeedIn { 0% { opacity: 0; -webkit-transform: translateX(100%) skewX(-30deg); -moz-transform: translateX(100%) skewX(-30deg); -o-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); } 60% { opacity: 1; -webkit-transform: translateX(-20%) skewX(30deg); -moz-transform: translateX(-20%) skewX(30deg); -o-transform: translateX(-20%) skewX(30deg); transform: translateX(-20%) skewX(30deg); } 80% { opacity: 1; -webkit-transform: translateX(0%) skewX(-15deg); -moz-transform: translateX(0%) skewX(-15deg); -o-transform: translateX(0%) skewX(-15deg); transform: translateX(0%) skewX(-15deg); } 100% { opacity: 1; -webkit-transform: translateX(0%) skewX(0deg); -moz-transform: translateX(0%) skewX(0deg); -o-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); } } @-webkit-keyframes lightSpeedOut { 0% { opacity: 1; -webkit-transform: translateX(0%) skewX(0deg); -moz-transform: translateX(0%) skewX(0deg); -o-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) skewX(-30deg); -moz-transform: translateX(100%) skewX(-30deg); -o-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); } } @-moz-keyframes lightSpeedOut { 0% { opacity: 1; -webkit-transform: translateX(0%) skewX(0deg); -moz-transform: translateX(0%) skewX(0deg); -o-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) skewX(-30deg); -moz-transform: translateX(100%) skewX(-30deg); -o-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); } } @-o-keyframes lightSpeedOut { 0% { opacity: 1; -webkit-transform: translateX(0%) skewX(0deg); -moz-transform: translateX(0%) skewX(0deg); -o-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) skewX(-30deg); -moz-transform: translateX(100%) skewX(-30deg); -o-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); } } @keyframes lightSpeedOut { 0% { opacity: 1; -webkit-transform: translateX(0%) skewX(0deg); -moz-transform: translateX(0%) skewX(0deg); -o-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) skewX(-30deg); -moz-transform: translateX(100%) skewX(-30deg); -o-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); } } @-webkit-keyframes rotateIn { 0% { opacity: 0; -webkit-transform: rotate(-200deg); -moz-transform: rotate(-200deg); -o-transform: rotate(-200deg); transform: rotate(-200deg); -webkit-transform-origin: center center; -moz-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; } 100% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: center center; -moz-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; } } @-moz-keyframes rotateIn { 0% { opacity: 0; -webkit-transform: rotate(-200deg); -moz-transform: rotate(-200deg); -o-transform: rotate(-200deg); transform: rotate(-200deg); -webkit-transform-origin: center center; -moz-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; } 100% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: center center; -moz-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; } } @-o-keyframes rotateIn { 0% { opacity: 0; -webkit-transform: rotate(-200deg); -moz-transform: rotate(-200deg); -o-transform: rotate(-200deg); transform: rotate(-200deg); -webkit-transform-origin: center center; -moz-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; } 100% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: center center; -moz-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; } } @keyframes rotateIn { 0% { opacity: 0; -webkit-transform: rotate(-200deg); -moz-transform: rotate(-200deg); -o-transform: rotate(-200deg); transform: rotate(-200deg); -webkit-transform-origin: center center; -moz-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; } 100% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: center center; -moz-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; } } @-webkit-keyframes rotateInDownLeft { 0% { opacity: 0; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } 100% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } } @-moz-keyframes rotateInDownLeft { 0% { opacity: 0; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } 100% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } } @-o-keyframes rotateInDownLeft { 0% { opacity: 0; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } 100% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } } @keyframes rotateInDownLeft { 0% { opacity: 0; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } 100% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } } @-webkit-keyframes rotateInDownRight { 0% { opacity: 0; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } 100% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } } @-moz-keyframes rotateInDownRight { 0% { opacity: 0; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } 100% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } } @-o-keyframes rotateInDownRight { 0% { opacity: 0; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } 100% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } } @keyframes rotateInDownRight { 0% { opacity: 0; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } 100% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } } @-webkit-keyframes rotateInUpLeft { 0% { opacity: 0; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } 100% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } } @-moz-keyframes rotateInUpLeft { 0% { opacity: 0; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } 100% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } } @-o-keyframes rotateInUpLeft { 0% { opacity: 0; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } 100% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } } @keyframes rotateInUpLeft { 0% { opacity: 0; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } 100% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } } @-webkit-keyframes rotateInUpRight { 0% { opacity: 0; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } 100% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } } @-moz-keyframes rotateInUpRight { 0% { opacity: 0; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } 100% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } } @-o-keyframes rotateInUpRight { 0% { opacity: 0; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } 100% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } } @keyframes rotateInUpRight { 0% { opacity: 0; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } 100% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } } @-webkit-keyframes rotateOut { 0% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: center center; -moz-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; } 100% { opacity: 0; -webkit-transform: rotate(200deg); -moz-transform: rotate(200deg); -o-transform: rotate(200deg); transform: rotate(200deg); -webkit-transform-origin: center center; -moz-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; } } @-moz-keyframes rotateOut { 0% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: center center; -moz-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; } 100% { opacity: 0; -webkit-transform: rotate(200deg); -moz-transform: rotate(200deg); -o-transform: rotate(200deg); transform: rotate(200deg); -webkit-transform-origin: center center; -moz-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; } } @-o-keyframes rotateOut { 0% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: center center; -moz-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; } 100% { opacity: 0; -webkit-transform: rotate(200deg); -moz-transform: rotate(200deg); -o-transform: rotate(200deg); transform: rotate(200deg); -webkit-transform-origin: center center; -moz-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; } } @keyframes rotateOut { 0% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: center center; -moz-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; } 100% { opacity: 0; -webkit-transform: rotate(200deg); -moz-transform: rotate(200deg); -o-transform: rotate(200deg); transform: rotate(200deg); -webkit-transform-origin: center center; -moz-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; } } @-webkit-keyframes rotateOutDownLeft { 0% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } 100% { opacity: 0; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } } @-moz-keyframes rotateOutDownLeft { 0% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } 100% { opacity: 0; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } } @-o-keyframes rotateOutDownLeft { 0% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } 100% { opacity: 0; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } } @keyframes rotateOutDownLeft { 0% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } 100% { opacity: 0; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } } @-webkit-keyframes rotateOutDownRight { 0% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } 100% { opacity: 0; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } } @-moz-keyframes rotateOutDownRight { 0% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } 100% { opacity: 0; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } } @-o-keyframes rotateOutDownRight { 0% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } 100% { opacity: 0; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } } @keyframes rotateOutDownRight { 0% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } 100% { opacity: 0; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } } @-webkit-keyframes rotateOutUpLeft { 0% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } 100% { opacity: 0; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } } @-moz-keyframes rotateOutUpLeft { 0% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } 100% { opacity: 0; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } } @-o-keyframes rotateOutUpLeft { 0% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } 100% { opacity: 0; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } } @keyframes rotateOutUpLeft { 0% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } 100% { opacity: 0; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: left bottom; -moz-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; } } @-webkit-keyframes rotateOutUpRight { 0% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } 100% { opacity: 0; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } } @-moz-keyframes rotateOutUpRight { 0% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } 100% { opacity: 0; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } } @-o-keyframes rotateOutUpRight { 0% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } 100% { opacity: 0; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } } @keyframes rotateOutUpRight { 0% { opacity: 1; -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } 100% { opacity: 0; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; } } @-webkit-keyframes slideInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -moz-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-moz-keyframes slideInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -moz-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-o-keyframes slideInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -moz-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @keyframes slideInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -moz-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -moz-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-moz-keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -moz-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-o-keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -moz-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -moz-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes slideInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -moz-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-moz-keyframes slideInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -moz-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-o-keyframes slideInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -moz-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @keyframes slideInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -moz-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes slideInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); -moz-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-moz-keyframes slideInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); -moz-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-o-keyframes slideInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); -moz-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @keyframes slideInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); -moz-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes slideOutDown { 0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -moz-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } } @-moz-keyframes slideOutDown { 0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -moz-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } } @-o-keyframes slideOutDown { 0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -moz-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } } @keyframes slideOutDown { 0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -moz-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } } @-webkit-keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -moz-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } } @-moz-keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -moz-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } } @-o-keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -moz-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -moz-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } } @-webkit-keyframes slideOutRight { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -moz-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } } @-moz-keyframes slideOutRight { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -moz-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } } @-o-keyframes slideOutRight { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -moz-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes slideOutRight { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -moz-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } } @-webkit-keyframes slideOutUp { 0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -moz-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } } @-moz-keyframes slideOutUp { 0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -moz-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } } @-o-keyframes slideOutUp { 0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -moz-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes slideOutUp { 0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -moz-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } } @-webkit-keyframes hinge { 0% { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: top left; -moz-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; } 20%, 60% { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-transform: rotate(80deg); -moz-transform: rotate(80deg); -o-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; -moz-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; } 40% { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; -moz-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; } 80% { opacity: 1; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-transform: rotate(60deg) translateY(0); -moz-transform: rotate(60deg) translateY(0); -o-transform: rotate(60deg) translateY(0); transform: rotate(60deg) translateY(0); -webkit-transform-origin: top left; -moz-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; } 100% { opacity: 0; -webkit-transform: translateY(700px); -moz-transform: translateY(700px); -o-transform: translateY(700px); transform: translateY(700px); } } @-moz-keyframes hinge { 0% { -moz-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: top left; -moz-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; } 20%, 60% { -moz-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-transform: rotate(80deg); -moz-transform: rotate(80deg); -o-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; -moz-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; } 40% { -moz-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; -moz-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; } 80% { opacity: 1; -moz-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-transform: rotate(60deg) translateY(0); -moz-transform: rotate(60deg) translateY(0); -o-transform: rotate(60deg) translateY(0); transform: rotate(60deg) translateY(0); -webkit-transform-origin: top left; -moz-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; } 100% { opacity: 0; -webkit-transform: translateY(700px); -moz-transform: translateY(700px); -o-transform: translateY(700px); transform: translateY(700px); } } @-o-keyframes hinge { 0% { -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: top left; -moz-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; } 20%, 60% { -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-transform: rotate(80deg); -moz-transform: rotate(80deg); -o-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; -moz-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; } 40% { -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; -moz-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; } 80% { opacity: 1; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-transform: rotate(60deg) translateY(0); -moz-transform: rotate(60deg) translateY(0); -o-transform: rotate(60deg) translateY(0); transform: rotate(60deg) translateY(0); -webkit-transform-origin: top left; -moz-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; } 100% { opacity: 0; -webkit-transform: translateY(700px); -moz-transform: translateY(700px); -o-transform: translateY(700px); transform: translateY(700px); } } @keyframes hinge { 0% { -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: top left; -moz-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; } 20%, 60% { -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-transform: rotate(80deg); -moz-transform: rotate(80deg); -o-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; -moz-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; } 40% { -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; -moz-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; } 80% { opacity: 1; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-transform: rotate(60deg) translateY(0); -moz-transform: rotate(60deg) translateY(0); -o-transform: rotate(60deg) translateY(0); transform: rotate(60deg) translateY(0); -webkit-transform-origin: top left; -moz-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; } 100% { opacity: 0; -webkit-transform: translateY(700px); -moz-transform: translateY(700px); -o-transform: translateY(700px); transform: translateY(700px); } } @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); -moz-transform: translateX(-100%) rotate(-120deg); -o-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -moz-transform: translateX(0px) rotate(0deg); -o-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } } @-moz-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); -moz-transform: translateX(-100%) rotate(-120deg); -o-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -moz-transform: translateX(0px) rotate(0deg); -o-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } } @-o-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); -moz-transform: translateX(-100%) rotate(-120deg); -o-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -moz-transform: translateX(0px) rotate(0deg); -o-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } } @keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); -moz-transform: translateX(-100%) rotate(-120deg); -o-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -moz-transform: translateX(0px) rotate(0deg); -o-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } } @-webkit-keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -moz-transform: translateX(0px) rotate(0deg); -o-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); -moz-transform: translateX(100%) rotate(120deg); -o-transform: translateX(100%) rotate(120deg); transform: translateX(100%) rotate(120deg); } } @-moz-keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -moz-transform: translateX(0px) rotate(0deg); -o-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); -moz-transform: translateX(100%) rotate(120deg); -o-transform: translateX(100%) rotate(120deg); transform: translateX(100%) rotate(120deg); } } @-o-keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -moz-transform: translateX(0px) rotate(0deg); -o-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); -moz-transform: translateX(100%) rotate(120deg); -o-transform: translateX(100%) rotate(120deg); transform: translateX(100%) rotate(120deg); } } @keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -moz-transform: translateX(0px) rotate(0deg); -o-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); -moz-transform: translateX(100%) rotate(120deg); -o-transform: translateX(100%) rotate(120deg); transform: translateX(100%) rotate(120deg); } } @-webkit-keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); -moz-transform: scale3d(0.3, 0.3, 0.3); -o-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @-moz-keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); -moz-transform: scale3d(0.3, 0.3, 0.3); -o-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @-o-keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); -moz-transform: scale3d(0.3, 0.3, 0.3); -o-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); -moz-transform: scale3d(0.3, 0.3, 0.3); -o-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @-webkit-keyframes zoomInDown { 0% { -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); } 60% { -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); } } @-moz-keyframes zoomInDown { 0% { -moz-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); } 60% { -moz-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); } } @-o-keyframes zoomInDown { 0% { -o-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); } 60% { -o-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); } } @keyframes zoomInDown { 0% { -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -moz-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -o-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); } 60% { -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); -moz-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); -o-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); } } @-webkit-keyframes zoomInLeft { 0% { -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); } 60% { -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); } } @-moz-keyframes zoomInLeft { 0% { -moz-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); } 60% { -moz-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); } } @-o-keyframes zoomInLeft { 0% { -o-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); } 60% { -o-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); } } @keyframes zoomInLeft { 0% { -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -moz-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -o-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); } 60% { -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); -moz-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); -o-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); } } @-webkit-keyframes zoomInRight { 0% { -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); } 60% { -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); } } @-moz-keyframes zoomInRight { 0% { -moz-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); } 60% { -moz-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); } } @-o-keyframes zoomInRight { 0% { -o-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); } 60% { -o-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); } } @keyframes zoomInRight { 0% { -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -moz-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -o-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); } 60% { -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); -moz-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); -o-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); } } @-webkit-keyframes zoomInUp { 0% { -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); } 60% { -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); } } @-moz-keyframes zoomInUp { 0% { -moz-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); } 60% { -moz-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); } } @-o-keyframes zoomInUp { 0% { -o-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); } 60% { -o-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); } } @keyframes zoomInUp { 0% { -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -moz-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -o-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); } 60% { -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); -moz-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); -o-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); } } @-webkit-keyframes zoomOut { 0% { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); -moz-transform: scale3d(0.3, 0.3, 0.3); -o-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 100% { opacity: 0; } } @-moz-keyframes zoomOut { 0% { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); -moz-transform: scale3d(0.3, 0.3, 0.3); -o-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 100% { opacity: 0; } } @-o-keyframes zoomOut { 0% { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); -moz-transform: scale3d(0.3, 0.3, 0.3); -o-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 100% { opacity: 0; } } @keyframes zoomOut { 0% { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); -moz-transform: scale3d(0.3, 0.3, 0.3); -o-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 100% { opacity: 0; } } @-webkit-keyframes zoomOutDown { 40% { -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); } 100% { -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; -moz-transform-origin: center bottom; -o-transform-origin: center bottom; transform-origin: center bottom; } } @-moz-keyframes zoomOutDown { 40% { -moz-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); } 100% { -moz-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; -moz-transform-origin: center bottom; -o-transform-origin: center bottom; transform-origin: center bottom; } } @-o-keyframes zoomOutDown { 40% { -o-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); } 100% { -o-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; -moz-transform-origin: center bottom; -o-transform-origin: center bottom; transform-origin: center bottom; } } @keyframes zoomOutDown { 40% { -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -moz-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -o-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); } 100% { -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); -moz-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); -o-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; -moz-transform-origin: center bottom; -o-transform-origin: center bottom; transform-origin: center bottom; } } @-webkit-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } 100% { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); -moz-transform: scale(0.1) translate3d(-2000px, 0, 0); -o-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; } } @-moz-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } 100% { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); -moz-transform: scale(0.1) translate3d(-2000px, 0, 0); -o-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; } } @-o-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } 100% { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); -moz-transform: scale(0.1) translate3d(-2000px, 0, 0); -o-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; } } @keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } 100% { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); -moz-transform: scale(0.1) translate3d(-2000px, 0, 0); -o-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; } } @-webkit-keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } 100% { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); -moz-transform: scale(0.1) translate3d(2000px, 0, 0); -o-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; -moz-transform-origin: right center; -o-transform-origin: right center; transform-origin: right center; } } @-moz-keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } 100% { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); -moz-transform: scale(0.1) translate3d(2000px, 0, 0); -o-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; -moz-transform-origin: right center; -o-transform-origin: right center; transform-origin: right center; } } @-o-keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } 100% { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); -moz-transform: scale(0.1) translate3d(2000px, 0, 0); -o-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; -moz-transform-origin: right center; -o-transform-origin: right center; transform-origin: right center; } } @keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } 100% { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); -moz-transform: scale(0.1) translate3d(2000px, 0, 0); -o-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; -moz-transform-origin: right center; -o-transform-origin: right center; transform-origin: right center; } } @-webkit-keyframes zoomOutUp { 40% { -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); } 100% { -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; -moz-transform-origin: center bottom; -o-transform-origin: center bottom; transform-origin: center bottom; } } @-moz-keyframes zoomOutUp { 40% { -moz-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); } 100% { -moz-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; -moz-transform-origin: center bottom; -o-transform-origin: center bottom; transform-origin: center bottom; } } @-o-keyframes zoomOutUp { 40% { -o-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); } 100% { -o-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; -moz-transform-origin: center bottom; -o-transform-origin: center bottom; transform-origin: center bottom; } } @keyframes zoomOutUp { 40% { -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -moz-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); -o-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -moz-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -o-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); } 100% { -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); -moz-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); -o-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -moz-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -o-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; -moz-transform-origin: center bottom; -o-transform-origin: center bottom; transform-origin: center bottom; } } .s-arr-primary, .main-slider-nav-btn:hover:after { background-image: url(../img/sprites/sprite.png); background-position: -66px -100px; width: 34px; height: 16px; } .s-arr-white, .main-slider-nav-btn:after, .projects-nav-btn:after { background-image: url(../img/sprites/sprite.png); background-position: -32px -100px; width: 34px; height: 16px; } .s-btn-arr, .projects-cnt-btn:after, .contacts-btn:after, .footer-btn:after { background-image: url(../img/sprites/sprite.png); background-position: -106px -124px; width: 11px; height: 11px; } .s-fc-inverse, .footer-soc-btn.__fc:hover:after { background-image: url(../img/sprites/sprite.png); background-position: -98px -124px; width: 8px; height: 16px; } .s-fc, .footer-soc-btn.__fc:after { background-image: url(../img/sprites/sprite.png); background-position: -88px -124px; width: 10px; height: 16px; } .s-gallery-arr, .about-gallery-btn:after { background-image: url(../img/sprites/sprite.png); background-position: 0px -100px; width: 32px; height: 24px; } .s-greek-col-1, .why-col:nth-of-type(1) .why-card-ic:after { background-image: url(../img/sprites/sprite.png); background-position: -50px 0px; width: 50px; height: 50px; } .s-greek-col-2, .why-col:nth-of-type(2) .why-col-cnt:nth-of-type(1) .why-card-ic:after { background-image: url(../img/sprites/sprite.png); background-position: 0px -50px; width: 50px; height: 50px; } .s-greek-col-3, .why-col:nth-of-type(3) .why-col-cnt:nth-of-type(1) .why-card-ic:after { background-image: url(../img/sprites/sprite.png); background-position: -50px -50px; width: 50px; height: 50px; } .s-greek-col-4, .why-col:nth-of-type(2) .why-col-cnt:nth-of-type(2) .why-card-ic:after, .why-col:nth-of-type(4) .why-card-ic:after { background-image: url(../img/sprites/sprite.png); background-position: -100px 0px; width: 50px; height: 50px; } .s-greek-col-5, .why-col:nth-of-type(3) .why-col-cnt:nth-of-type(2) .why-card-ic:after, .why-col:nth-of-type(5) .why-card-ic:after { background-image: url(../img/sprites/sprite.png); background-position: 0px 0px; width: 50px; height: 50px; } .s-inst-inverse, .footer-soc-btn.__inst:hover:after { background-image: url(../img/sprites/sprite.png); background-position: -115px -100px; width: 15px; height: 14px; } .s-inst, .footer-soc-btn.__inst:after { background-image: url(../img/sprites/sprite.png); background-position: -100px -100px; width: 15px; height: 16px; } .s-main-arr, .main-btn-lnk:after { background-image: url(../img/sprites/sprite.png); background-position: 0px -124px; width: 25px; height: 25px; } .s-object-arr, .why-btn:after { background-image: url(../img/sprites/sprite.png); background-position: -100px -50px; width: 48px; height: 48px; } .s-phone-call, .contacts .inp-order-lbl:after, .popup .inp-order-lbl:after { background-image: url(../img/sprites/sprite.png); background-position: -69px -124px; width: 19px; height: 19px; } .s-phone-primary, .header-phone-mob { background-image: url(../img/sprites/sprite.png); background-position: -25px -124px; width: 23px; height: 23px; } .s-phone, .questions-phone-img:after { background-image: url(../img/sprites/sprite.png); background-position: -130px -100px; width: 12px; height: 12px; } .s-select, .select2-container .select2-selection--single:after { background-image: url(../img/sprites/sprite.png); background-position: -32px -116px; width: 11px; height: 6px; } .s-user, .contacts .wrap-inp:first-of-type .inp-order-lbl:after, .popup .wrap-inp:first-of-type .inp-order-lbl:after { background-image: url(../img/sprites/sprite.png); background-position: -48px -124px; width: 21px; height: 21px; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; outline: none; -webkit-transition: all 0.3s; -o-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .clr:after { content: ''; display: table; clear: both; } .__hidden { display: none; } .tel { pointer-events: none; cursor: default; } .__disable { pointer-events: none; cursor: default; opacity: .5; } .center-ic { position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; } .__pl { padding-left: 12%; } .__pt-0 { padding-top: 0 !important; } .p-r { position: relative; } .__transparent { background: transparent !important; } .txt-dark { color: #1A2348 !important; } .__visible_hidden { visibility: hidden; } /* INPUTS */ input, textarea { display: block; width: 100%; border: 2px solid #fff; color: #9CACC3; padding: 50px 60px 50px 35px; font-family: "Montserrat", Verdana, Geneva, sans-serif; font-weight: 500; font-size: 20px; border-radius: 0; outline: none; /* Firefox 19+ */ /* Firefox 18- */ } input:focus, textarea:focus { outline: none; } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { font-family: "Montserrat", Verdana, Geneva, sans-serif; font-weight: 500; font-size: 20px; } input::-moz-placeholder, textarea::-moz-placeholder { font-family: "Montserrat", Verdana, Geneva, sans-serif; font-weight: 500; font-size: 20px; } input:-moz-placeholder, textarea:-moz-placeholder { font-family: "Montserrat", Verdana, Geneva, sans-serif; font-weight: 500; font-size: 20px; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { font-family: "Montserrat", Verdana, Geneva, sans-serif; font-weight: 500; font-size: 20px; } input { height: 45px; line-height: 45px; } input[type='submit'], button[type='submit'] { outline: none; cursor: pointer; } textarea { resize: vertical; padding: 10px; } .wrap-inp { margin-bottom: 20px; } #form-status { margin-top: 20px; width: 100%; text-align: center; } #form-status.with_error { color: #ff0000; } .error { border: 2px solid #ff0000 !important; } /* checkbox */ .checkbox { display: none; } .checkbox-lbl { cursor: pointer; display: block; text-align: left; padding-left: 16px; position: relative; } .checkbox-lbl:after { content: ''; display: block; position: absolute; left: 0; top: 3px; width: 6px; height: 6px; background: #d1d1d1; -webkit-transition: background .2s; -o-transition: background .2s; -moz-transition: background .2s; transition: background .2s; } @media screen and (max-width: 800px) { input, textarea { /* Firefox 19+ */ /* Firefox 18- */ } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { font-size: 14px; } input::-moz-placeholder, textarea::-moz-placeholder { font-size: 14px; } input:-moz-placeholder, textarea:-moz-placeholder { font-size: 14px; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { font-size: 14px; } } /* END INPUTS */ /* BUTTONS */ /* END BUTTONS */ /* TITLES */ .ttl { font-family: "History Pro", Verdana, Geneva, sans-serif; font-size: 62px; line-height: 1.4; text-transform: uppercase; } .sub-ttl { font-weight: 600; font-size: 19px; text-transform: uppercase; color: #5885FF; margin-bottom: 20px; } .ttl-transform { position: absolute; top: 0; left: 0; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); margin-top: 62px; font-weight: 600; font-size: 18px; text-transform: uppercase; z-index: 1; } .ttl-transform-nbr, .ttl-transform-ltr { color: #446FE3; } .ttl-transform-ltr { padding-left: 15px; letter-spacing: -4px; } .ttl-transform-txt { color: #fff; } @media screen and (max-width: 1200px) { .ttl { font-size: 42px; } } @media screen and (max-width: 800px) { .ttl-transform { display: none; } .ttl { font-size: 30px; } .sub-ttl { font-size: 12px; } } /* END TITLES */ @media screen and (max-width: 900px) { .tel { pointer-events: auto; cursor: pointer; } } /* MAIN */ .main { background: #161D3C; } .main-i { background-position: top center; background-repeat: no-repeat; background-size: cover; overflow: hidden; height: 1250px; } .main-blk { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .main-cnt { position: relative; padding: 225px 0 100px; max-width: 940px; } .main-cnt-txt { font-family: "History Pro", Verdana, Geneva, sans-serif; font-size: 62px; line-height: 1.4; } .main-cnt-ttl { display: inline-block; color: #446FE3; } .main-btn { position: absolute; bottom: 0; left: 0; right: 0; display: block; margin: 0 auto 100px; width: 303px; height: 303px; background-image: url("../img/round.png"); background-repeat: no-repeat; background-size: cover; } .main-btn-mob { display: none; margin: 35px 0; } .main-btn-arr { display: block; position: relative; width: 130px; height: 130px; margin: 0 auto; border: 1px solid #446FE3; border-radius: 50%; } .main-btn-arr:after { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 27px; height: 27px; background: url("../img/object-arr-s.png") no-repeat; z-index: 1; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } .main-btn-cnt { position: absolute; top: 0; right: 0; bottom: 0; left: 0; text-align: center; z-index: 0; } .main-btn-txt { font-weight: 600; font-size: 22px; line-height: 1.4; padding-top: 115px; } .main-btn-lnk { display: block; position: absolute; right: -11px; bottom: 15px; width: 92px; height: 92px; border-radius: 50%; border: 1px solid transparent; } .main-btn-lnk:after { content: ''; display: block; position: absolute; right: 33px; bottom: 33px; width: 25px; height: 25px; z-index: 1; } .main-btn-lnk:hover { background: #fff; border-color: #446FE3; } .main-r { position: relative; -webkit-align-self: flex-end; -ms-flex-item-align: end; align-self: flex-end; margin-left: 30px; background: #446FE3; padding: 80px 0 100px 80px; } .main-r:after { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 98%; width: 1000px; background: #446FE3; } .main-slider { text-transform: uppercase; padding-bottom: 170px; } .main-slider-ttl { font-weight: 600; font-size: 18px; padding-bottom: 40px; opacity: 0.33; } .main-slider-txt { font-weight: 500; font-size: 21px; line-height: 1.5; } .main-slider-nav { position: absolute; bottom: 0; left: 0; padding: 80px; } .main-slider-nav-btn { position: relative; display: inline-block; border-radius: 50%; border: 1px solid #fff; -webkit-transition: all .2s; -o-transition: all .2s; -moz-transition: all .2s; transition: all .2s; width: 80px; height: 80px; line-height: 80px; cursor: pointer; } .main-slider-nav-btn:after { content: ''; position: absolute; display: block; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 34px; height: 16px; } .main-slider-nav-btn:first-of-type { margin-right: 10px; } .main-slider-nav-btn:last-of-type:after { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .main-slider-nav-btn:hover { background: #fff; } .main-slider-nav-btn:hover:first-of-type:after { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .main-slider-nav-btn:hover:last-of-type:after { -webkit-transform: none; -moz-transform: none; -o-transform: none; transform: none; } .main-slider-count { position: absolute; bottom: 0; right: 0; padding-bottom: 80px; font-weight: 500; font-size: 18px; opacity: 0.33; z-index: 1; } @media screen and (max-width: 1400px) { .main-cnt-txt { font-size: 50px; } } @media screen and (max-width: 1200px) { .main-cnt-txt { font-size: 40px; } } @media screen and (max-width: 1024px) { .main-i { height: 1600px; } .main-blk { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .main-cnt { max-width: 100%; padding: 310px 0 50px; } .main-btn { position: relative; margin: 100px auto 0; } } @media screen and (max-width: 800px) { .main-i { height: 870px; background-size: auto 85%; } .main-cnt { padding: 150px 0 0; } .main-cnt-txt { font-size: 23px; } .main-r { padding: 25px 0 25px 20px; } .main-slider { padding-bottom: 130px; } .main-slider-ttl { font-size: 12px; padding-bottom: 10px; } .main-slider-txt { font-size: 12px; } .main-slider-nav { padding: 25px; } .main-slider-nav-btn { width: 60px; height: 60px; line-height: 60px; } .main-slider-count { padding-bottom: 25px; font-size: 10px; } .main-btn { display: none; } .main-btn-mob { display: block; } } /* END MAIN */ /* HEADER */ .header { position: fixed; top: 0; right: 0; left: 0; border-bottom: 1px solid #63687C; z-index: 999; } .header.__fixed { background: #161D3C; } .header.__fixed .header-l { width: 40px; height: 40px; } .header.__fixed .header-menu { padding-left: 9.7%; } .header.__fixed .header-menu-lnk { padding: 30px 0; font-size: 16px; } .header.__fixed .header-phone { font-size: 16px; } .header.__fixed .header-btn { font-size: 16px; padding: 10px 15px; } .header-cnt { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .header-l { width: 66px; height: 66px; } .header-lnk { display: block; } .header-logo { width: 100%; } .header-menu { padding-left: 8%; -webkit-box-flex: 1; -webkit-flex-grow: 1; -moz-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .header-menu-lst { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; } .header-menu-i { padding: 0 2%; } .header-menu-i:first-of-type { padding-left: 0; } .header-menu-i:last-of-type { padding-right: 0; } .header-menu-lnk { position: relative; display: block; padding: 60px 0; } .header-menu-lnk:after { content: ''; position: absolute; display: block; right: 50%; bottom: -1px; left: 50%; height: 2px; width: 0; background-color: #fff; -webkit-transition: left .4s,right .4s; -o-transition: left .4s,right .4s; -moz-transition: left .4s,right .4s; transition: left .4s,right .4s; } .header-menu-lnk.__active:after { width: 100%; left: 0; right: 0; } .header-menu-lnk:hover:after { width: auto; left: 0; right: 0; } .header-r { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: baseline; -webkit-align-items: baseline; -moz-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .header-phone { display: block; margin-left: 40px; } .header-phone-mob { display: none; width: 23px; height: 23px; } .header-btn { display: block; padding: 20px 40px; margin-left: 50px; font-weight: 500; font-size: 18px; line-height: 22px; border-radius: 66px; border: 1px solid #63687C; background: -webkit-linear-gradient(297.03deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%); background: -moz-linear-gradient(297.03deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%); background: -o-linear-gradient(297.03deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%); background: linear-gradient(152.97deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%); -webkit-backdrop-filter: blur(42px); backdrop-filter: blur(42px); } .header-btn:hover { border-color: #446FE3; } @media screen and (max-width: 1400px) { .header-phone { margin-left: 15px; } .header-btn { margin-left: 20px; padding: 20px; } } @media screen and (max-width: 1300px) { .header-phone { margin-left: 15px; font-size: 16px; } .header-btn { margin-left: 15px; padding: 15px 20px; font-size: 16px; } .header-menu-lnk { font-size: 16px; } .select2-container .select2-selection--single .select2-selection__rendered { font-size: 14px; } } @media screen and (max-width: 1100px) { .header-phone { display: none; } .header-phone-mob { display: block; } } /* END HEADER */ /* GRID */ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html, body { height: 100%; line-height: 1; color: #fff; font-size: 18px; font-family: "Montserrat", Verdana, Geneva, sans-serif; font-weight: 500; } .container { max-width: 1800px; width: 100%; padding-right: 10px; padding-left: 10px; margin-right: auto; margin-left: auto; /* align center, add default padding*/ padding-left: 40px; padding-right: 40px; } .col, .why-col, .advantage-col { position: relative; width: 100%; min-height: 1px; padding-right: 10px; padding-left: 10px; -webkit-box-flex: 0; -webkit-flex: 0 0 33.33333%; -moz-box-flex: 0; -ms-flex: 0 0 33.33333%; flex: 0 0 33.33333%; max-width: 33.33333%; } .row, .why-row, .about-gallery-row, .advantage-row, .questions-row { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -10px; margin-left: -10px; } .section.__dark { background: #161D3C; } .section-wrap { position: relative; padding: 140px 0 75px; } .section-wrap.__why { background: #161D3C; } .section-wrap.__why:after { content: ''; display: block; position: absolute; right: 0; bottom: -50px; background: url("../img/object.png") no-repeat; background-size: cover; max-width: 500px; width: 100%; height: 600px; z-index: 1; } .section-wrap.__advantage, .section-wrap.__projects, .section-wrap.__questions { background: #161D3C; } .section-wrap.__advantage { padding-bottom: 0; } .section-wrap.__projects { padding: 140px 0 0; } .section-wrap.__questions { padding-bottom: 140px; } .section-wrap.__contacts { background: url("../img/map.png") center center no-repeat; background-size: cover; } .section-wrap.__consultation { position: relative; background: url("../img/consultation.png") no-repeat; background-size: cover; padding-bottom: 170px; } .section-wrap.__consultation:before { content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url("../img/rectangle.png") no-repeat; background-size: cover; } .section-wrap.__footer { padding-top: 100px; padding-bottom: 45px; } .section-wrap.__mob { display: none; height: 300px; background: #161D3C; } .h-100 { height: 100%; } /* footer to bottom of page */ .wrapper { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; min-height: 100%; overflow: hidden; } .cnt-wrap { position: relative; -webkit-box-flex: 1; -webkit-flex: 1 0 auto; -moz-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; } .footer { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -moz-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; } /* end footer to bottom of page */ @media screen and (max-width: 1400px) { .container { padding-left: 20px; padding-right: 20px; } } @media screen and (max-width: 1024px) { .section-wrap.__why:after { max-width: 300px; height: 300px; margin-bottom: 150px; } } @media screen and (max-width: 800px) { .__pl { padding-left: 0; } .section-wrap { position: relative; padding: 60px 0 60px; } .section-wrap.__consultation { padding-bottom: 60px; } .section-wrap.__questions { padding-top: 170px; padding-bottom: 80px; } .section-wrap.__projects, .section-wrap.__advantage { padding-top: 75px; } .section-wrap.__about { padding-top: 80px; } } @media screen and (max-width: 460px) { .section-wrap.__questions { padding-top: 200px; } .section-wrap.__why:after { max-width: 135px; height: 190px; margin-bottom: 210px; } } @media screen and (max-width: 360px) { .section-wrap.__questions { padding-top: 230px; } } /* END GRID */ /* WHY */ .why-wrap { position: relative; padding-bottom: 500px; } .why-wrap:before { content: ''; display: block; position: absolute; left: 0; bottom: 50px; background: url("../img/object-logo.png") no-repeat; background-size: cover; max-width: 500px; width: 100%; height: 500px; margin-left: 4%; z-index: 1; } .why-t { margin-bottom: -23%; max-width: 66%; } .why-row { margin-right: -25px; margin-left: -25px; } .why-col { padding: 25px; } .why-col:nth-of-type(1) { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; } .why-col:nth-of-type(2) { -webkit-align-self: flex-end; -ms-flex-item-align: end; align-self: flex-end; } .why-col:nth-of-type(3) { -webkit-align-self: flex-start; -ms-flex-item-align: start; align-self: flex-start; } .why-col:nth-of-type(4) { margin-left: 33.333333%; } .why-col-cnt:nth-of-type(2) { padding-top: 50px; } .why-col-wrap { padding-top: 70%; } .why-col-cnt.__pt-card { padding-top: 30%; } .why-card { background: #1A2348; padding: 100px 50px 50px; font-size: 17px; line-height: 1.4; } .why-card-ic { position: relative; width: 120px; height: 120px; background: #5885FF; border-radius: 50%; margin-bottom: 30px; } .why-card-ic:after { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 50px; height: 50px; z-index: 1; } .why-card-txt { font-weight: 400; } .why-card-ttl { font-weight: 600; } .why-b { position: relative; margin: 150px 0 0; } .why-b-cnt { position: absolute; top: 100px; left: 0; right: 0; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; font-family: "History Pro", Verdana, Geneva, sans-serif; } .why-b-ttl { font-size: 170px; } .why-b-txt { font-size: 38px; line-height: 1.4; margin-left: 2%; max-width: 245px; } .why-btn { display: block; position: absolute; right: 0; left: 0; bottom: -120px; margin: 0 auto; width: 200px; height: 200px; border: 1px solid #446FE3; border-radius: 50%; z-index: 2; } .why-btn:after { content: ''; display: block; position: absolute; right: 0; bottom: 70px; left: 0; width: 47px; height: 47px; margin: 0 auto; z-index: 3; } .why-btn:hover { background: #fff; } @media screen and (max-width: 1300px) { .why-wrap:before { max-width: 400px; height: 400px; } .why-card { padding: 50px 35px 50px; } .why-b-cnt { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .why-b-ttl { width: 100%; padding-bottom: 15px; } .why-b-txt { line-height: 1.4; margin-left: 0; width: 100%; } .why-btn { width: 130px; height: 130px; bottom: -100px; } .why-btn:after { width: 27px; height: 27px; background: url("../img/object-arr-s.png") no-repeat; bottom: 0; top: 0; margin: auto; } } @media screen and (max-width: 1024px) { .why-wrap { padding-bottom: 300px; } .why-wrap:before { margin-left: 0; } .why-row { margin-right: 0; margin-left: 0; } .why-col { -webkit-box-flex: 0; -webkit-flex: 0 0 100%; -moz-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; padding-right: 0; padding-left: 0; } .why-col-wrap { padding-top: 0; } .why-b-cnt { top: -25px; } .why-b-ttl { font-size: 120px; } .why-b-txt { font-size: 34px; } } @media screen and (max-width: 800px) { .why-card { padding: 35px; } .why-col { padding-top: 0; padding-bottom: 25px; } .why-card { font-size: 14px; } .why-card-ic { width: 95px; height: 95px; } } @media screen and (max-width: 680px) { .why-t { max-width: 100%; } .why-wrap:before { max-width: 210px; height: 210px; left: -20px; bottom: 155px; } .why-b-cnt { top: 15px; } .why-b-ttl { font-size: 78px; } .why-b-txt { max-width: 200px; font-size: 18px; } } /* END WHY */ /* ABOUT */ .about { padding-bottom: 50px; } .about-wrap { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .about-l { max-width: 470px; padding-right: 45px; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; } .about-r { max-width: 900px; overflow: hidden; } .about-lst { counter-reset: li; margin: 60px 0 0; padding-left: 0; } .about-i { position: relative; margin: 0 0 40px 0; padding: 4px 0 4px 60px; list-style: none; font-size: 18px; font-weight: 500; line-height: 1.8; color: #1A2348; } .about-i:before { content: "0" counter(li); counter-increment: li; position: absolute; top: 12px; left: 0; width: 36px; height: 36px; font-size: 14px; font-weight: 500; line-height: 36px; color: #fff; background: #5885FF; text-align: center; border-radius: 50%; } .about-gallery { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .about-gallery-l { padding-right: 10px; max-width: 190px; width: 100%; } .about-gallery-row { margin-right: -5px; margin-left: -5px; } .about-gallery-row.__col { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 1; -webkit-flex-grow: 1; -moz-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .about-gallery-col { position: relative; width: 100%; min-height: 1px; padding-right: 10px; padding-left: 10px; -webkit-box-flex: 0; -webkit-flex: 0 0 100%; -moz-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; padding: 5px; } .about-gallery-card { position: relative; width: 100%; min-height: 1px; padding-right: 10px; padding-left: 10px; -webkit-box-flex: 0; -webkit-flex: 0 0 50%; -moz-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; padding: 5px; } .about-gallery-btn { display: block; position: relative; background: #5885FF; width: 100%; height: 100%; } .about-gallery-btn:after { content: ''; display: block; position: absolute; width: 32px; height: 24px; margin: 20%; } .about-gallery-btn:hover { background: #446FE3; } .about-gallery-btn.__prev:after { top: 0; right: 0; } .about-gallery-btn.__next:after { bottom: 0; left: 0; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .about .owl-carousel.owl-drag .owl-item { overflow: hidden; } .about .owl-carousel.owl-drag .owl-item:not(.active) { visibility: hidden; } @media screen and (max-width: 1200px) { .about-l { max-width: 325px; } .about-i { margin: 0 0 20px 0; } } @media screen and (max-width: 1024px) { .about-wrap { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .about-l { max-width: 100%; width: 100%; padding-right: 0; margin-bottom: 30px; } .about-r { max-width: 100%; width: 100%; } } @media screen and (max-width: 800px) { .about { padding-bottom: 0; } .about-lst { margin: 30px 0 0; } .about-i { margin: 0 0 20px 0; } } @media screen and (max-width: 680px) { .about-i { padding: 4px 0 4px 50px; font-size: 14px; line-height: 1.4; } .about-i:before { top: 4px; } .about-gallery-l { padding-right: 4px; } .about-gallery-row { margin-right: -2px; margin-left: -2px; } .about-gallery-col, .about-gallery-card { padding: 2px; } } /* END ABOUT */ /* ADVANTAGE */ .advantage .ttl-transform { margin-top: 100px; margin-left: -35px; } .advantage-row { margin-right: -10px; margin-left: -10px; margin-top: 70px; } .advantage-col { padding: 20px 10px; } .advantage-card { height: 100%; border: 1px solid #63687C; border-radius: 16px; background: -webkit-linear-gradient(297.03deg, rgba(30, 34, 38, 0.66) 0%, rgba(30, 34, 38, 0) 100%); background: -moz-linear-gradient(297.03deg, rgba(30, 34, 38, 0.66) 0%, rgba(30, 34, 38, 0) 100%); background: -o-linear-gradient(297.03deg, rgba(30, 34, 38, 0.66) 0%, rgba(30, 34, 38, 0) 100%); background: linear-gradient(152.97deg, rgba(30, 34, 38, 0.66) 0%, rgba(30, 34, 38, 0) 100%); } .advantage-card-t { height: 240px; background-repeat: no-repeat; background-size: cover; border-top-left-radius: 16px; border-top-right-radius: 16px; } .advantage-card-b { position: absolute; left: 0; bottom: 0; margin: 0 30px 30px 12px; } .advantage-card-badge { font-size: 18px; font-weight: 600; text-transform: uppercase; padding: 8px 18px; background: -webkit-linear-gradient(297.03deg, rgba(30, 34, 38, 0.66) 0%, rgba(30, 34, 38, 0.33) 100%); background: -moz-linear-gradient(297.03deg, rgba(30, 34, 38, 0.66) 0%, rgba(30, 34, 38, 0.33) 100%); background: -o-linear-gradient(297.03deg, rgba(30, 34, 38, 0.66) 0%, rgba(30, 34, 38, 0.33) 100%); background: linear-gradient(152.97deg, rgba(30, 34, 38, 0.66) 0%, rgba(30, 34, 38, 0.33) 100%); -webkit-backdrop-filter: blur(42px); backdrop-filter: blur(42px); border-radius: 3px; margin-bottom: 5px; line-height: 1.3; } .advantage-card-cnt { padding: 30px; } .advantage-card-ttl { font-weight: 600; font-size: 21px; line-height: 1.4; padding-bottom: 20px; } .advantage-card-txt { font-size: 16px; line-height: 1.5; } @media screen and (max-width: 1200px) { .advantage-col { -webkit-box-flex: 0; -webkit-flex: 0 0 50%; -moz-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } } @media screen and (max-width: 900px) { .advantage-row { margin-right: 0; margin-left: 0; margin-top: 45px; } .advantage-col { -webkit-box-flex: 0; -webkit-flex: 0 0 100%; -moz-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; padding-left: 0; padding-right: 0; } } @media screen and (max-width: 800px) { .advantage-card-cnt { padding: 25px; } .advantage-card-ttl { font-size: 18px; } } @media screen and (max-width: 680px) { .advantage-card-b { margin: 0 30px 15px 12px; } .advantage-card-bage { font-size: 14px; } .advantage-card-ttl { font-size: 14px; } .advantage-card-txt { font-size: 13px; } } /* END ADVANTAGE */ /* PROJECTS */ .projects-slider { height: 565px; margin-top: 100px; } .projects-i { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; height: 100%; } .projects-img { max-width: 40%; min-height: 565px; width: 100%; background-size: cover; background-color: #161D3C; } .projects-cnt { padding: 50px; color: #1A2348; } .projects-cnt-ttl { font-size: 46px; font-weight: 600; line-height: 1.2; } .projects-cnt-lst { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: baseline; -webkit-align-items: baseline; -moz-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; padding: 30px 0; } .projects-cnt-i { margin-right: 5%; } .projects-cnt-name { font-weight: 500; font-size: 16px; color: #969DA8; padding-bottom: 10px; } .projects-cnt-val { font-weight: 600; font-size: 21px; } .projects-cnt-txt { font-weight: 500; font-size: 18px; line-height: 1.5; max-height: 190px; overflow: hidden; } .projects-cnt-btn { display: block; position: relative; max-width: 345px; width: 100%; padding: 30px 50px; font-weight: 600; font-size: 18px; text-align: center; color: #fff; margin-top: 25px; background: #5885FF; border-radius: 66px; } .projects-cnt-btn:after { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; margin: auto 30px auto; width: 11px; height: 11px; } .projects-cnt-btn:hover { background: #446FE3; } .projects-blk { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -webkit-align-items: flex-start; -moz-box-align: start; -ms-flex-align: start; align-items: flex-start; max-width: 60%; background: #fff; } .projects-gallery-img { width: 220px; height: 175px; background-size: cover; margin: 10px; } .projects-nav { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -webkit-justify-content: flex-end; -moz-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; margin-top: 40px; } .projects-nav-btn { position: relative; display: inline-block; border-radius: 50%; border: 1px solid #fff; -webkit-transition: all .2s; -o-transition: all .2s; -moz-transition: all .2s; transition: all .2s; width: 80px; height: 80px; line-height: 80px; cursor: pointer; } .projects-nav-btn:after { content: ''; position: absolute; display: block; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 34px; height: 16px; } .projects-nav-btn:first-of-type { margin-right: 10px; } .projects-nav-btn:last-of-type:after { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .projects-nav-btn:hover { background: #5885FF; border-color: #5885FF; } .projects .owl-theme .owl-nav.disabled + .owl-dots { margin-top: 60px; margin-right: 180px; } .projects .owl-theme .owl-dots { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; text-align: left; } .projects .owl-theme .owl-dots .owl-dot span { position: relative; width: 6px; height: 6px; margin: 5px 15px; background: #969DA8; opacity: .3; } .projects .owl-theme .owl-dots .owl-dot:first-of-type span { margin-left: 0; } .projects .owl-theme .owl-dots .owl-dot:hover span { background: #fff; opacity: 1; } .projects .owl-theme .owl-dots .owl-dot.active span { width: 36px; height: 36px; background: #5885FF; opacity: 1; } .projects .owl-theme .owl-dots .owl-dot.active span:after { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 6px; height: 6px; background: #fff; border-radius: 50%; } @media screen and (max-width: 1320px) { .projects-slider { height: 520px; width: 100%; } .projects-img { max-width: 30%; min-height: 520px; } .projects-cnt { padding: 30px; } .projects-cnt-btn { max-width: 100%; } .projects-blk { max-width: 70%; } .projects-gallery-img { width: 200px; height: 160px; } } @media screen and (max-width: 1200px) { .projects-cnt-btn { padding: 30px 50px 30px 20px; } } @media screen and (max-width: 1024px) { .projects-gallery { display: none; } .projects-slider { height: 500px; } .projects-img { max-width: 40%; min-height: 500px; } .projects-blk { max-width: 60%; } .projects-cnt-ttl { font-size: 34px; } } @media screen and (max-width: 800px) { .projects-gallery { display: none; } .projects-slider { margin-top: 50px; height: 760px; } .projects-i { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .projects-img { max-width: 100%; min-height: 400px; background-position: center center; } .projects-blk { max-width: 100%; } .projects-cnt-ttl { font-size: 23px; } .projects-cnt-name { font-size: 14px; } .projects-cnt-txt { font-size: 14px; } .projects-nav { display: none; } .projects .owl-theme .owl-nav.disabled + .owl-dots { margin-top: 60px; margin-right: 0; } .projects .owl-theme .owl-dots { -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; } } @media screen and (max-width: 680px) { .projects-slider { height: 610px; } .projects-img { min-height: 230px; } .projects-cnt { padding: 25px; } .projects-cnt-btn { padding: 25px 45px 25px 15px; font-size: 13px; } } /* END PROJECTS */ /* QUESTIONS */ .questions-row { margin-right: -15px; margin-left: -15px; } .questions-col { position: relative; width: 100%; min-height: 1px; padding-right: 10px; padding-left: 10px; -webkit-box-flex: 0; -webkit-flex: 0 0 50%; -moz-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; padding-right: 15px; padding-left: 15px; } .questions-info { margin-top: 60px; font-size: 22px; font-weight: 400; line-height: 1.5; } .questions-phone { position: relative; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 60px; padding-left: 50px; } .questions-phone:before, .questions-phone:after { content: ''; position: absolute; top: 0; bottom: 0; left: 30px; width: 65px; height: 65px; margin: auto 0; border-radius: 50%; border-top: 1px solid #5885FF; -webkit-transform: rotate(-140deg); -moz-transform: rotate(-140deg); -o-transform: rotate(-140deg); transform: rotate(-140deg); opacity: .2; } .questions-phone:after { left: 0; width: 100px; height: 100px; -webkit-transform: rotate(-120deg); -moz-transform: rotate(-120deg); -o-transform: rotate(-120deg); transform: rotate(-120deg); } .questions-phone-img { position: relative; width: 31px; height: 31px; background: #5885FF; border-radius: 50%; } .questions-phone-img:after { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 12px; height: 12px; } .questions-phone-number { display: block; font-weight: 500; font-size: 33px; margin-left: 20px; } .questions-i { border-top: 1px solid rgba(233, 233, 233, 0.13); } .questions-i:last-of-type { border-bottom: 1px solid rgba(233, 233, 233, 0.13); } .questions-i-lnk { display: block; position: relative; font-family: "History Pro", Verdana, Geneva, sans-serif; font-size: 26px; font-weight: 400; line-height: 1.4; text-transform: uppercase; padding: 30px 0 30px 50px; } .questions-i-lnk:before { content: '+'; display: block; position: absolute; top: 22px; bottom: 0; left: 0; font-size: 33px; width: auto; height: 45px; } .questions-i-lnk:hover { color: #5885FF; } .questions-i-lnk.__active { color: #5885FF; } .questions-i-lnk.__active:before { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .questions-i-txt { font-size: 18px; font-weight: 400; line-height: 1.6; padding: 0 0 30px 50px; } @media screen and (max-width: 1024px) { .questions-row { margin-left: 0; margin-right: 0; } .questions-col { -webkit-box-flex: 0; -webkit-flex: 0 0 100%; -moz-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; padding-left: 0; padding-right: 0; } .questions-col:first-of-type { margin-bottom: 80px; } } @media screen and (max-width: 800px) { .questions-info { margin-top: 40px; font-size: 16px; } .questions-phone { padding-left: 20px; } .questions-phone:before { left: 12px; width: 45px; height: 45px; } .questions-phone:after { width: 70px; height: 70px; } .questions-phone-number { font-size: 23px; } .questions-i-lnk { font-size: 20px; } .questions-i-txt { font-size: 14px; } } /* END QUESTIONS */ /* CONSULTATION */ .consultation-txt { position: relative; font-weight: 500; font-size: 22px; line-height: 1.5; margin-top: 30px; max-width: 730px; padding-left: 100px; } .consultation-txt:before { content: ''; display: block; position: absolute; top: 0; left: 0; height: 1px; width: 70px; background: #fff; margin-top: 15px; } @media screen and (max-width: 800px) { .consultation-txt { font-size: 14px; max-width: 500px; padding-left: 60px; } .consultation-txt:before { width: 30px; } } /* END CONSULTATION */ /* CONTACTS */ .contacts { height: 800px; } .contacts:after { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 15px; height: 15px; margin: 280px 0 0 56%; border: 10px solid #5885FF; border-radius: 50%; } .contacts .ttl-transform-ltr, .contacts .ttl-transform-nbr, .contacts .ttl-transform-txt { color: #273345; opacity: .8; } .contacts .ttl-transform-txt { opacity: 0.2; } .contacts-t { position: absolute; top: 0; right: 0; left: 0; margin: 0 12%; margin-top: -192px; } .contacts-form { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .contacts .inp-order-lbl { position: relative; display: block; } .contacts .inp-order-lbl:after { content: ''; display: block; position: absolute; top: 0; right: 30px; bottom: 0; margin: auto 0; width: 19px; height: 19px; } .contacts .wrap-inp { -webkit-box-flex: 1; -webkit-flex-grow: 1; -moz-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -webkit-box-shadow: 0 33px 233px rgba(0, 0, 0, 0.1); box-shadow: 0 33px 233px rgba(0, 0, 0, 0.1); } .contacts .wrap-inp:first-of-type .contacts-inp { border-right: 1px solid #E8EBEF; } .contacts .wrap-inp:first-of-type .inp-order-lbl:after { width: 21px; height: 21px; } .contacts .wrap-sub { -webkit-box-flex: 1; -webkit-flex-grow: 1; -moz-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; } .contacts-btn { display: block; position: relative; width: 100%; padding: 40px 20px; font-family: "Montserrat", Verdana, Geneva, sans-serif; font-weight: 500; font-size: 20px; text-align: center; color: #fff; background: #5885FF; outline: none; border: 0; text-transform: uppercase; -webkit-box-shadow: 0 33px 233px rgba(0, 0, 0, 0.1); box-shadow: 0 33px 233px rgba(0, 0, 0, 0.1); } .contacts-btn:after { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; margin: auto 30px auto; width: 11px; height: 11px; } .contacts-btn:hover { background: #446FE3; } @media screen and (max-width: 800px) { .contacts { height: 400px; } .contacts:after { display: none; } .contacts-t { margin: 0; margin-top: -400px; } .contacts-form .wrap-inp, .contacts-form .wrap-sub { width: 100%; } .contacts-form .contacts-inp, .contacts-form .contacts-btn { font-size: 14px; border-radius: 1000px; } .contacts-form .contacts-btn { font-size: 12px; padding: 30px 40px 30px 10px; } .contacts-form .contacts-inp { padding: 35px 60px 35px 35px; } .section-wrap.__contacts { background-size: auto; } .section-wrap.__mob { display: block; } } /* END CONTACTS */ /* POPUP */ .mfp-bg { z-index: 99999; } .mfp-wrap { z-index: 99999; } .popup-box { float: none; padding: 50px 50px 30px; } .popup { max-width: 512px; margin: 0 auto; background-color: #fff; position: relative; border-radius: 10px; } .popup-form { max-width: 335px; width: 100%; margin: 0 auto; } .popup .inp-order-lbl { position: relative; display: block; } .popup .inp-order-lbl:after { content: ''; display: block; position: absolute; top: 0; right: 30px; bottom: 0; margin: auto 0; width: 19px; height: 19px; } .popup .wrap-inp:first-of-type .inp-order-lbl:after { width: 21px; height: 21px; } .popup .contacts-btn { font-size: 14px; padding: 27px 60px 27px 35px; border-radius: 1000px; } .popup-inp { font-size: 14px; padding: 35px 60px 35px 35px; border: 1px solid #EFF1F5; border-radius: 1000px; /* Firefox 19+ */ /* Firefox 18- */ } .popup-inp::-webkit-input-placeholder { font-size: 14px; } .popup-inp::-moz-placeholder { font-size: 14px; } .popup-inp:-moz-placeholder { font-size: 14px; } .popup-inp:-ms-input-placeholder { font-size: 14px; } .popup-btn { position: absolute; right: 20px; top: 20px; width: 20px; height: 20px; } .popup-btn:before, .popup-btn:after { position: absolute; left: 8px; content: ' '; height: 20px; width: 2px; background-color: #969DA8; } .popup-btn:before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .popup-btn:after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .popup-ttl { font-family: "History Pro", Verdana, Geneva, sans-serif; font-size: 30px; font-weight: 400; color: #161D3C; text-align: center; line-height: 1.4; margin-bottom: 40px; } @media screen and (max-width: 680px) { .popup-box { padding: 50px 15px 20px; } .popup-ttl { font-size: 21px; } .popup-btn { right: 15px; top: 15px; } .popup .contacts-btn { font-size: 12px; padding: 27px 50px 27px 35px; } } /* END POPUP */ /* CONTENT FROM ADMIN */ .default-cnt ul { margin-left: 10px; list-style-type: disc; list-style-position: inside; } .default-cnt li { font-size: 14px; letter-spacing: .02em; } .default-cnt ol { margin-left: 10px; list-style-type: decimal; } .default-cnt h1, .default-cnt h2 { /* font-family: $bold; */ font-size: 24px; margin-bottom: 20px; line-height: 25px; } .default-cnt h3, .default-cnt h4, .default-cnt h5 { font-size: 20px; line-height: 21px; } .default-cnt p { font-size: 14px; letter-spacing: 0; margin-bottom: 15px; } .default-cnt table { margin: 10px 0; max-width: 100%; width: auto !important; } .default-cnt td { border-collapse: collapse; border-spacing: 0; border: 1px solid #ccc; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 10px 5px; vertical-align: middle; } .default-cnt img { max-width: 100%; } .default-cnt strong, .default-cnt b { /* font-family: $bold; */ } .default-cnt i { font-style: italic; } .default-cnt a { color: inherit; } .default-cnt a:hover { text-decoration: underline; } .default-cnt a:focus { outline: none; } /* END CONTENT FROM ADMIN */ /* FOOTER */ .footer { background: #161D3C; } .footer-cnt { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding-bottom: 100px; border-bottom: 1px solid #212A56; } .footer-l { width: 147px; height: auto; } .footer-lnk { display: block; } .footer-logo { width: 100%; } .footer-menu { -webkit-box-flex: 1; -webkit-flex-grow: 1; -moz-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; padding: 0 10px; } .footer-menu-lst { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; } .footer-menu-i { padding: 0 3%; } .footer-menu-i:last-of-type { padding-right: 0; } .footer-menu-lnk { display: block; font-size: 18px; font-weight: 500; color: #63687C; } .footer-menu-lnk:hover { color: #fff; } .footer-btn { display: block; position: relative; max-width: 345px; width: 100%; padding: 30px 50px; font-weight: 600; font-size: 18px; text-align: center; color: #fff; border: 1px solid #5885FF; border-radius: 66px; } .footer-btn:after { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; margin: auto 30px auto; width: 11px; height: 11px; } .footer-btn:hover { border-color: #fff; } .footer-b { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding-top: 45px; color: #63687C; font-weight: 500; font-size: 18px; } .footer-b-cop { text-transform: uppercase; padding-right: 15px; } .footer-b-lnk { text-decoration: underline; } .footer-b-lnk:hover { color: #fff; text-decoration: none; } .footer-soc { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; margin-left: 15px; } .footer-soc.__mob { display: none; } .footer-soc-txt { display: none; } .footer-soc-btn { position: relative; display: inline-block; border-radius: 50%; border: 1px solid #fff; background: #fff; width: 60px; height: 60px; line-height: 60px; } .footer-soc-btn:after { content: ''; position: absolute; display: block; top: 0; right: 0; bottom: 0; left: 0; height: 16px; margin: auto; } .footer-soc-btn:first-of-type { margin-right: 15px; } .footer-soc-btn.__inst:after { width: 15px; } .footer-soc-btn.__fc:after { width: 10px; } .footer-soc-btn:hover { border-color: #446FE3; background: #446FE3; } @media screen and (max-width: 1400px) { .footer-l { width: 100px; } .footer-btn { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; padding: 30px 40px 30px 20px; } .footer-btn:after { margin: auto 20px auto; } } @media screen and (max-width: 1150px) { .footer-menu-lst { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .footer-menu-i { margin-top: 15px; } .footer-r { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; } .footer-cnt { padding-bottom: 50px; } } @media screen and (max-width: 900px) { .footer-cnt { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .footer-l { width: 147px; margin: 0 auto; } .footer-menu { width: 100%; margin: 30px 0 50px; } .footer-menu-i { width: 100%; padding: 0; margin-top: 30px; text-align: center; } .footer-menu-lnk { color: #fff; } .footer-r { margin: 0 auto; } .footer-btn { font-size: 14px; padding: 30px 50px; } .footer-soc { display: none; } .footer-soc.__mob { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 auto; } .footer-soc-txt { display: block; font-weight: 400; font-size: 14px; text-align: center; color: #63687C; margin: 50px 0 20px; width: 100%; } .footer-b { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 14px; } .footer-b-lnk { margin-bottom: 15px; -webkit-box-ordinal-group: 0; -webkit-order: -1; -moz-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; } .footer-b-cop { width: 100%; text-align: center; } } /* END FOOTER */ /*END Pages*/