/********************************* * Website Loading Screen *********************************/ /******************* * SCSS Variables *******************/ /* Base Typography */ /* Base Fonts */ /* Brand Colors */ /* Base Colors */ /**/ /* Social Network Colors */ /* secondary */ /* primary */ /* Base Screen Sizes */ /* Base URL */ /* 'local' or 'server' */ /******************* * SCSS Mixins *******************/ /* Media Query || Max Width */ /* Media Query || Max Height */ /* Target IE11 Only */ /* Box Shadow */ /* Display */ /* Transition */ /* Background Image */ /* Hover */ /* On Touch */ /* On No Touch */ /* Placeholder */ /* Transform */ /* Animation */ /* Animate Item*/ /* Scroll Bar */ /* Hide Scroll Bar */ /* Hide Scroll Bar */ /* Keyframes */ /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.4; -webkit-text-size-adjust: 100%; -webkit-overflow-scrolling: touch; } /* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body { color: #707070; position: relative; margin: 0; padding: 0; font-family: "Nunito", sans-serif; font-weight: 400; font-size: 14px; -webkit-overflow-scrolling: touch; } body.stopScroll { overflow: hidden; } body.stopScroll .nav { -webkit-overflow-scrolling: touch; } body:before { content: ''; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; background-color: rgba(0, 0, 0, 0.75); opacity: 0; z-index: -1; display: block; position: absolute; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; } body.hasPanel:before { opacity: 1; pointer-events: auto; z-index: 99999; } @media screen and (max-width: 1023px) { body.hasPanel:before { z-index: 9998; } } /** * Render the `main` element consistently in IE. */ main { display: block; } /* Grouping content ========================================================================== */ /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * Remove the gray background on active links in IE 10. */ a { text-decoration: none; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; } /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ -webkit-text-decoration: underline dotted; -moz-text-decoration: underline dotted; text-decoration: underline dotted; /* 2 */ } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Remove the border on images inside links in IE 10. */ img { border-style: none; max-width: 100%; position: relative; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ outline: none; outline-width: 0; } button:focus, button:hover, input:focus, input:hover, optgroup:focus, optgroup:hover, select:focus, select:hover, textarea:focus, textarea:hover { outline: none; outline-width: 0; } form { outline: none; } form:focus, form:hover { outline: none; outline-width: 0; -webkit-appearance: none; } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Remove the default vertical scrollbar in IE 10+. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10. * 2. Remove the padding in IE 10. */ [type="checkbox"], [type="radio"] { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in Edge, IE 10+, and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Misc ========================================================================== */ /** * Add the correct display in IE 10+. */ template { display: none; } /** * Add the correct display in IE 10. */ [hidden] { display: none; } /* Reset List ========================================================================== */ .reset-list, .header-panels-wrapper ul, .nav-menu-left > ul, .nav-menu-middle > ul, .footer-main > div ul, .footer-connect ul, .footer-bottom ul { margin: 0; padding: 0; list-style: none; } .clearfix:after, .clearfix:before { content: " "; display: table; } .clearfix:after { clear: both; } #gdpr-slideout-main { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #gdpr-slideout-main *, #gdpr-slideout-main *::before, #gdpr-slideout-main *::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /********************************* * Shared Elements *********************************/ /* * Default */ h1, h2, h3, h4, h5, h6 { font-family: "Montserrat", sans-serif; font-weight: 600; text-transform: uppercase; } a { display: inline-block; position: relative; vertical-align: top; } /* * Preloader */ .preloader { margin: 0 auto; width: 1em; height: 1em; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; display: block; position: relative; font-size: 26px; -webkit-box-shadow: inset 0 0 0 3px rgba(15, 83, 126, 0.65); -moz-box-shadow: inset 0 0 0 3px rgba(15, 83, 126, 0.65); box-shadow: inset 0 0 0 3px rgba(15, 83, 126, 0.65); -webkit-transform: rotate(45deg) translateY(-50%); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: rotate(45deg) translateY(-50%); /* IE 9 */ -moz-transform: rotate(45deg) translateY(-50%); -o-transform: rotate(45deg) translateY(-50%); transform: rotate(45deg) translateY(-50%); /* Firefox 16+, IE 10+, Opera */ } .preloader:before, .preloader:after { -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; content: ""; width: 0.6em; height: 0.6em; display: block; position: absolute; -webkit-box-shadow: inset 0 0 0 2px #0F537E; -moz-box-shadow: inset 0 0 0 2px #0F537E; box-shadow: inset 0 0 0 2px #0F537E; } .preloader:before { -webkit-animation: PreloaderBefore 1.25s linear infinite; -moz-animation: PreloaderBefore 1.25s linear infinite; -o-animation: PreloaderBefore 1.25s linear infinite; animation: PreloaderBefore 1.25s linear infinite; } .preloader:after { -webkit-animation: PreloaderAfter 1.25s linear infinite; -moz-animation: PreloaderAfter 1.25s linear infinite; -o-animation: PreloaderAfter 1.25s linear infinite; animation: PreloaderAfter 1.25s linear infinite; } /* Preloader Keyframes */ @-webkit-keyframes PreloaderBefore { 0%, 100% { top: 0.6em; left: -0.2em; } 50% { top: -0.2em; left: .6em; } } @-moz-keyframes PreloaderBefore { 0%, 100% { top: 0.6em; left: -0.2em; } 50% { top: -0.2em; left: .6em; } } @-ms-keyframes PreloaderBefore { 0%, 100% { top: 0.6em; left: -0.2em; } 50% { top: -0.2em; left: .6em; } } @-o-keyframes PreloaderBefore { 0%, 100% { top: 0.6em; left: -0.2em; } 50% { top: -0.2em; left: .6em; } } @keyframes PreloaderBefore { 0%, 100% { top: 0.6em; left: -0.2em; } 50% { top: -0.2em; left: .6em; } } @-webkit-keyframes PreloaderAfter { 0%, 100% { top: -0.2em; left: .6em; } 50% { top: 0.6em; left: -0.2em; } } @-moz-keyframes PreloaderAfter { 0%, 100% { top: -0.2em; left: .6em; } 50% { top: 0.6em; left: -0.2em; } } @-ms-keyframes PreloaderAfter { 0%, 100% { top: -0.2em; left: .6em; } 50% { top: 0.6em; left: -0.2em; } } @-o-keyframes PreloaderAfter { 0%, 100% { top: -0.2em; left: .6em; } 50% { top: 0.6em; left: -0.2em; } } @keyframes PreloaderAfter { 0%, 100% { top: -0.2em; left: .6em; } 50% { top: 0.6em; left: -0.2em; } } /* * Site Buttons */ .sitebtn, button:not(.newsletterCardSlideOut__close):not(.mediaPopup__close):not(.IsNoticesSlideOut__close):not(.IsNotice__toggleHighlighted):not(.link-style):not([class*="gdpr"]):not(.manage-pref):not(.gdpr-btn):not(.nav-menu-search-button):not(.lity-close):not(.mpSquareBtn):not(.mtSearch__clear):not(.mpGalSlide__navBtn):not(.mpGalSlide__autoplay):not(.mpAudioPlayer__play-btn):not(.owl-dot):not(.owl-prev):not(.owl-next):not(.mediaPopup__share), [type="button"]:not(.newsletterCardSlideOut__close):not(.mediaPopup__close):not(.IsNoticesSlideOut__close):not(.IsNotice__toggleHighlighted):not(.link-style):not([class*="gdpr"]):not(.manage-pref):not(.gdpr-btn):not(.nav-menu-search-button):not(.lity-close):not(.mpSquareBtn):not(.mtSearch__clear):not(.mpGalSlide__navBtn):not(.mpGalSlide__autoplay):not(.mpAudioPlayer__play-btn):not(.owl-dot):not(.owl-prev):not(.owl-next):not(.mediaPopup__share), [type="reset"]:not(.newsletterCardSlideOut__close):not(.mediaPopup__close):not(.IsNoticesSlideOut__close):not(.IsNotice__toggleHighlighted):not(.link-style):not([class*="gdpr"]):not(.manage-pref):not(.gdpr-btn):not(.nav-menu-search-button):not(.lity-close):not(.mpSquareBtn):not(.mtSearch__clear):not(.mpGalSlide__navBtn):not(.mpGalSlide__autoplay):not(.mpAudioPlayer__play-btn):not(.owl-dot):not(.owl-prev):not(.owl-next):not(.mediaPopup__share), [type="submit"]:not(.newsletterCardSlideOut__close):not(.mediaPopup__close):not(.IsNoticesSlideOut__close):not(.IsNotice__toggleHighlighted):not(.link-style):not([class*="gdpr"]):not(.manage-pref):not(.gdpr-btn):not(.nav-menu-search-button):not(.lity-close):not(.mpSquareBtn):not(.mtSearch__clear):not(.mpGalSlide__navBtn):not(.mpGalSlide__autoplay):not(.mpAudioPlayer__play-btn):not(.owl-dot):not(.owl-prev):not(.owl-next):not(.mediaPopup__share), .downloadBtn { text-align: center; text-decoration: none; text-transform: uppercase; background-color: #fafafb; letter-spacing: 0.72px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; cursor: pointer; outline: 0; margin: 0; font-weight: 700; color: #0F537E; display: inline-block; position: relative; vertical-align: top; padding: 1em 3.25em 1em 2em; } html.no-touch .sitebtn:hover .btntext, html.no-touch button:hover:not(.newsletterCardSlideOut__close):not(.mediaPopup__close):not(.IsNoticesSlideOut__close):not(.IsNotice__toggleHighlighted):not(.link-style):not([class*="gdpr"]):not(.manage-pref):not(.gdpr-btn):not(.nav-menu-search-button):not(.lity-close):not(.mpSquareBtn):not(.mtSearch__clear):not(.mpGalSlide__navBtn):not(.mpGalSlide__autoplay):not(.mpAudioPlayer__play-btn):not(.owl-dot):not(.owl-prev):not(.owl-next):not(.mediaPopup__share) .btntext, html.no-touch :hover[type="button"]:not(.newsletterCardSlideOut__close):not(.mediaPopup__close):not(.IsNoticesSlideOut__close):not(.IsNotice__toggleHighlighted):not(.link-style):not([class*="gdpr"]):not(.manage-pref):not(.gdpr-btn):not(.nav-menu-search-button):not(.lity-close):not(.mpSquareBtn):not(.mtSearch__clear):not(.mpGalSlide__navBtn):not(.mpGalSlide__autoplay):not(.mpAudioPlayer__play-btn):not(.owl-dot):not(.owl-prev):not(.owl-next):not(.mediaPopup__share) .btntext, html.no-touch :hover[type="reset"]:not(.newsletterCardSlideOut__close):not(.mediaPopup__close):not(.IsNoticesSlideOut__close):not(.IsNotice__toggleHighlighted):not(.link-style):not([class*="gdpr"]):not(.manage-pref):not(.gdpr-btn):not(.nav-menu-search-button):not(.lity-close):not(.mpSquareBtn):not(.mtSearch__clear):not(.mpGalSlide__navBtn):not(.mpGalSlide__autoplay):not(.mpAudioPlayer__play-btn):not(.owl-dot):not(.owl-prev):not(.owl-next):not(.mediaPopup__share) .btntext, html.no-touch :hover[type="submit"]:not(.newsletterCardSlideOut__close):not(.mediaPopup__close):not(.IsNoticesSlideOut__close):not(.IsNotice__toggleHighlighted):not(.link-style):not([class*="gdpr"]):not(.manage-pref):not(.gdpr-btn):not(.nav-menu-search-button):not(.lity-close):not(.mpSquareBtn):not(.mtSearch__clear):not(.mpGalSlide__navBtn):not(.mpGalSlide__autoplay):not(.mpAudioPlayer__play-btn):not(.owl-dot):not(.owl-prev):not(.owl-next):not(.mediaPopup__share) .btntext, html.no-touch .downloadBtn:hover .btntext { -moz-background-size: 100% 100%; background-size: 100% 100%; } html.no-touch .sitebtn:hover .btnicon, html.no-touch button:hover:not(.newsletterCardSlideOut__close):not(.mediaPopup__close):not(.IsNoticesSlideOut__close):not(.IsNotice__toggleHighlighted):not(.link-style):not([class*="gdpr"]):not(.manage-pref):not(.gdpr-btn):not(.nav-menu-search-button):not(.lity-close):not(.mpSquareBtn):not(.mtSearch__clear):not(.mpGalSlide__navBtn):not(.mpGalSlide__autoplay):not(.mpAudioPlayer__play-btn):not(.owl-dot):not(.owl-prev):not(.owl-next):not(.mediaPopup__share) .btnicon, html.no-touch :hover[type="button"]:not(.newsletterCardSlideOut__close):not(.mediaPopup__close):not(.IsNoticesSlideOut__close):not(.IsNotice__toggleHighlighted):not(.link-style):not([class*="gdpr"]):not(.manage-pref):not(.gdpr-btn):not(.nav-menu-search-button):not(.lity-close):not(.mpSquareBtn):not(.mtSearch__clear):not(.mpGalSlide__navBtn):not(.mpGalSlide__autoplay):not(.mpAudioPlayer__play-btn):not(.owl-dot):not(.owl-prev):not(.owl-next):not(.mediaPopup__share) .btnicon, html.no-touch :hover[type="reset"]:not(.newsletterCardSlideOut__close):not(.mediaPopup__close):not(.IsNoticesSlideOut__close):not(.IsNotice__toggleHighlighted):not(.link-style):not([class*="gdpr"]):not(.manage-pref):not(.gdpr-btn):not(.nav-menu-search-button):not(.lity-close):not(.mpSquareBtn):not(.mtSearch__clear):not(.mpGalSlide__navBtn):not(.mpGalSlide__autoplay):not(.mpAudioPlayer__play-btn):not(.owl-dot):not(.owl-prev):not(.owl-next):not(.mediaPopup__share) .btnicon, html.no-touch :hover[type="submit"]:not(.newsletterCardSlideOut__close):not(.mediaPopup__close):not(.IsNoticesSlideOut__close):not(.IsNotice__toggleHighlighted):not(.link-style):not([class*="gdpr"]):not(.manage-pref):not(.gdpr-btn):not(.nav-menu-search-button):not(.lity-close):not(.mpSquareBtn):not(.mtSearch__clear):not(.mpGalSlide__navBtn):not(.mpGalSlide__autoplay):not(.mpAudioPlayer__play-btn):not(.owl-dot):not(.owl-prev):not(.owl-next):not(.mediaPopup__share) .btnicon, html.no-touch .downloadBtn:hover .btnicon { -webkit-transform: scale(1.6); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: scale(1.6); /* IE 9 */ -moz-transform: scale(1.6); -o-transform: scale(1.6); transform: scale(1.6); /* Firefox 16+, IE 10+, Opera */ } .sitebtn span, button:not(.newsletterCardSlideOut__close):not(.mediaPopup__close):not(.IsNoticesSlideOut__close):not(.IsNotice__toggleHighlighted):not(.link-style):not([class*="gdpr"]):not(.manage-pref):not(.gdpr-btn):not(.nav-menu-search-button):not(.lity-close):not(.mpSquareBtn):not(.mtSearch__clear):not(.mpGalSlide__navBtn):not(.mpGalSlide__autoplay):not(.mpAudioPlayer__play-btn):not(.owl-dot):not(.owl-prev):not(.owl-next):not(.mediaPopup__share) span, [type="button"]:not(.newsletterCardSlideOut__close):not(.mediaPopup__close):not(.IsNoticesSlideOut__close):not(.IsNotice__toggleHighlighted):not(.link-style):not([class*="gdpr"]):not(.manage-pref):not(.gdpr-btn):not(.nav-menu-search-button):not(.lity-close):not(.mpSquareBtn):not(.mtSearch__clear):not(.mpGalSlide__navBtn):not(.mpGalSlide__autoplay):not(.mpAudioPlayer__play-btn):not(.owl-dot):not(.owl-prev):not(.owl-next):not(.mediaPopup__share) span, [type="reset"]:not(.newsletterCardSlideOut__close):not(.mediaPopup__close):not(.IsNoticesSlideOut__close):not(.IsNotice__toggleHighlighted):not(.link-style):not([class*="gdpr"]):not(.manage-pref):not(.gdpr-btn):not(.nav-menu-search-button):not(.lity-close):not(.mpSquareBtn):not(.mtSearch__clear):not(.mpGalSlide__navBtn):not(.mpGalSlide__autoplay):not(.mpAudioPlayer__play-btn):not(.owl-dot):not(.owl-prev):not(.owl-next):not(.mediaPopup__share) span, [type="submit"]:not(.newsletterCardSlideOut__close):not(.mediaPopup__close):not(.IsNoticesSlideOut__close):not(.IsNotice__toggleHighlighted):not(.link-style):not([class*="gdpr"]):not(.manage-pref):not(.gdpr-btn):not(.nav-menu-search-button):not(.lity-close):not(.mpSquareBtn):not(.mtSearch__clear):not(.mpGalSlide__navBtn):not(.mpGalSlide__autoplay):not(.mpAudioPlayer__play-btn):not(.owl-dot):not(.owl-prev):not(.owl-next):not(.mediaPopup__share) span, .downloadBtn span { -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; text-align: center; z-index: 1; } .sitebtn span.btntext, button:not(.newsletterCardSlideOut__close):not(.mediaPopup__close):not(.IsNoticesSlideOut__close):not(.IsNotice__toggleHighlighted):not(.link-style):not([class*="gdpr"]):not(.manage-pref):not(.gdpr-btn):not(.nav-menu-search-button):not(.lity-close):not(.mpSquareBtn):not(.mtSearch__clear):not(.mpGalSlide__navBtn):not(.mpGalSlide__autoplay):not(.mpAudioPlayer__play-btn):not(.owl-dot):not(.owl-prev):not(.owl-next):not(.mediaPopup__share) span.btntext, [type="button"]:not(.newsletterCardSlideOut__close):not(.mediaPopup__close):not(.IsNoticesSlideOut__close):not(.IsNotice__toggleHighlighted):not(.link-style):not([class*="gdpr"]):not(.manage-pref):not(.gdpr-btn):not(.nav-menu-search-button):not(.lity-close):not(.mpSquareBtn):not(.mtSearch__clear):not(.mpGalSlide__navBtn):not(.mpGalSlide__autoplay):not(.mpAudioPlayer__play-btn):not(.owl-dot):not(.owl-prev):not(.owl-next):not(.mediaPopup__share) span.btntext, [type="reset"]:not(.newsletterCardSlideOut__close):not(.mediaPopup__close):not(.IsNoticesSlideOut__close):not(.IsNotice__toggleHighlighted):not(.link-style):not([class*="gdpr"]):not(.manage-pref):not(.gdpr-btn):not(.nav-menu-search-button):not(.lity-close):not(.mpSquareBtn):not(.mtSearch__clear):not(.mpGalSlide__navBtn):not(.mpGalSlide__autoplay):not(.mpAudioPlayer__play-btn):not(.owl-dot):not(.owl-prev):not(.owl-next):not(.mediaPopup__share) span.btntext, [type="submit"]:not(.newsletterCardSlideOut__close):not(.mediaPopup__close):not(.IsNoticesSlideOut__close):not(.IsNotice__toggleHighlighted):not(.link-style):not([class*="gdpr"]):not(.manage-pref):not(.gdpr-btn):not(.nav-menu-search-button):not(.lity-close):not(.mpSquareBtn):not(.mtSearch__clear):not(.mpGalSlide__navBtn):not(.mpGalSlide__autoplay):not(.mpAudioPlayer__play-btn):not(.owl-dot):not(.owl-prev):not(.owl-next):not(.mediaPopup__share) span.btntext, .downloadBtn span.btntext { color: #0F537E; font-size: 18px; width: 100%; max-width: -webkit-calc(100% - 3.25em); max-width: -moz-calc(100% - 3.25em); max-width: calc(100% - 3.25em); text-transform: uppercase; font-weight: 700; line-height: 1.5; /* Underline on hover */ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(90%, transparent), color-stop(0, #0F537E)); background-image: -webkit-linear-gradient(top, transparent 90%, #0F537E 0); background-image: -moz-linear-gradient(top, transparent 90%, #0F537E 0); background-image: -o-linear-gradient(top, transparent 90%, #0F537E 0); background-image: linear-gradient(180deg, transparent 90%, #0F537E 0); background-repeat: no-repeat; -moz-background-size: 0 100%; background-size: 0 100%; -webkit-transition: background-size 0.35s ease-in-out 0s; -moz-transition: background-size 0.35s ease-in-out 0s; -o-transition: background-size 0.35s ease-in-out 0s; -moz-transition: background-size 0.35s ease-in-out 0s, -moz-background-size 0.35s ease-in-out 0s; transition: background-size 0.35s ease-in-out 0s; transition: background-size 0.35s ease-in-out 0s, -moz-background-size 0.35s ease-in-out 0s; /* END | Underline on hover */ } .sitebtn span.btnicon, button:not(.newsletterCardSlideOut__close):not(.mediaPopup__close):not(.IsNoticesSlideOut__close):not(.IsNotice__toggleHighlighted):not(.link-style):not([class*="gdpr"]):not(.manage-pref):not(.gdpr-btn):not(.nav-menu-search-button):not(.lity-close):not(.mpSquareBtn):not(.mtSearch__clear):not(.mpGalSlide__navBtn):not(.mpGalSlide__autoplay):not(.mpAudioPlayer__play-btn):not(.owl-dot):not(.owl-prev):not(.owl-next):not(.mediaPopup__share) span.btnicon, [type="button"]:not(.newsletterCardSlideOut__close):not(.mediaPopup__close):not(.IsNoticesSlideOut__close):not(.IsNotice__toggleHighlighted):not(.link-style):not([class*="gdpr"]):not(.manage-pref):not(.gdpr-btn):not(.nav-menu-search-button):not(.lity-close):not(.mpSquareBtn):not(.mtSearch__clear):not(.mpGalSlide__navBtn):not(.mpGalSlide__autoplay):not(.mpAudioPlayer__play-btn):not(.owl-dot):not(.owl-prev):not(.owl-next):not(.mediaPopup__share) span.btnicon, [type="reset"]:not(.newsletterCardSlideOut__close):not(.mediaPopup__close):not(.IsNoticesSlideOut__close):not(.IsNotice__toggleHighlighted):not(.link-style):not([class*="gdpr"]):not(.manage-pref):not(.gdpr-btn):not(.nav-menu-search-button):not(.lity-close):not(.mpSquareBtn):not(.mtSearch__clear):not(.mpGalSlide__navBtn):not(.mpGalSlide__autoplay):not(.mpAudioPlayer__play-btn):not(.owl-dot):not(.owl-prev):not(.owl-next):not(.mediaPopup__share) span.btnicon, [type="submit"]:not(.newsletterCardSlideOut__close):not(.mediaPopup__close):not(.IsNoticesSlideOut__close):not(.IsNotice__toggleHighlighted):not(.link-style):not([class*="gdpr"]):not(.manage-pref):not(.gdpr-btn):not(.nav-menu-search-button):not(.lity-close):not(.mpSquareBtn):not(.mtSearch__clear):not(.mpGalSlide__navBtn):not(.mpGalSlide__autoplay):not(.mpAudioPlayer__play-btn):not(.owl-dot):not(.owl-prev):not(.owl-next):not(.mediaPopup__share) span.btnicon, .downloadBtn span.btnicon { width: 12px; height: 2px; top: 50%; right: -webkit-calc(2em - 6px); right: -moz-calc(2em - 6px); right: calc(2em - 6px); -webkit-transform: translateY(-50%); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: translateY(-50%); /* IE 9 */ -moz-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); /* Firefox 16+, IE 10+, Opera */ display: block; position: absolute; } .sitebtn span.btnicon:before, button:not(.newsletterCardSlideOut__close):not(.mediaPopup__close):not(.IsNoticesSlideOut__close):not(.IsNotice__toggleHighlighted):not(.link-style):not([class*="gdpr"]):not(.manage-pref):not(.gdpr-btn):not(.nav-menu-search-button):not(.lity-close):not(.mpSquareBtn):not(.mtSearch__clear):not(.mpGalSlide__navBtn):not(.mpGalSlide__autoplay):not(.mpAudioPlayer__play-btn):not(.owl-dot):not(.owl-prev):not(.owl-next):not(.mediaPopup__share) span.btnicon:before, [type="button"]:not(.newsletterCardSlideOut__close):not(.mediaPopup__close):not(.IsNoticesSlideOut__close):not(.IsNotice__toggleHighlighted):not(.link-style):not([class*="gdpr"]):not(.manage-pref):not(.gdpr-btn):not(.nav-menu-search-button):not(.lity-close):not(.mpSquareBtn):not(.mtSearch__clear):not(.mpGalSlide__navBtn):not(.mpGalSlide__autoplay):not(.mpAudioPlayer__play-btn):not(.owl-dot):not(.owl-prev):not(.owl-next):not(.mediaPopup__share) span.btnicon:before, [type="reset"]:not(.newsletterCardSlideOut__close):not(.mediaPopup__close):not(.IsNoticesSlideOut__close):not(.IsNotice__toggleHighlighted):not(.link-style):not([class*="gdpr"]):not(.manage-pref):not(.gdpr-btn):not(.nav-menu-search-button):not(.lity-close):not(.mpSquareBtn):not(.mtSearch__clear):not(.mpGalSlide__navBtn):not(.mpGalSlide__autoplay):not(.mpAudioPlayer__play-btn):not(.owl-dot):not(.owl-prev):not(.owl-next):not(.mediaPopup__share) span.btnicon:before, [type="submit"]:not(.newsletterCardSlideOut__close):not(.mediaPopup__close):not(.IsNoticesSlideOut__close):not(.IsNotice__toggleHighlighted):not(.link-style):not([class*="gdpr"]):not(.manage-pref):not(.gdpr-btn):not(.nav-menu-search-button):not(.lity-close):not(.mpSquareBtn):not(.mtSearch__clear):not(.mpGalSlide__navBtn):not(.mpGalSlide__autoplay):not(.mpAudioPlayer__play-btn):not(.owl-dot):not(.owl-prev):not(.owl-next):not(.mediaPopup__share) span.btnicon:before, .sitebtn span.btnicon:after, button:not(.newsletterCardSlideOut__close):not(.mediaPopup__close):not(.IsNoticesSlideOut__close):not(.IsNotice__toggleHighlighted):not(.link-style):not([class*="gdpr"]):not(.manage-pref):not(.gdpr-btn):not(.nav-menu-search-button):not(.lity-close):not(.mpSquareBtn):not(.mtSearch__clear):not(.mpGalSlide__navBtn):not(.mpGalSlide__autoplay):not(.mpAudioPlayer__play-btn):not(.owl-dot):not(.owl-prev):not(.owl-next):not(.mediaPopup__share) span.btnicon:after, [type="button"]:not(.newsletterCardSlideOut__close):not(.mediaPopup__close):not(.IsNoticesSlideOut__close):not(.IsNotice__toggleHighlighted):not(.link-style):not([class*="gdpr"]):not(.manage-pref):not(.gdpr-btn):not(.nav-menu-search-button):not(.lity-close):not(.mpSquareBtn):not(.mtSearch__clear):not(.mpGalSlide__navBtn):not(.mpGalSlide__autoplay):not(.mpAudioPlayer__play-btn):not(.owl-dot):not(.owl-prev):not(.owl-next):not(.mediaPopup__share) span.btnicon:after, [type="reset"]:not(.newsletterCardSlideOut__close):not(.mediaPopup__close):not(.IsNoticesSlideOut__close):not(.IsNotice__toggleHighlighted):not(.link-style):not([class*="gdpr"]):not(.manage-pref):not(.gdpr-btn):not(.nav-menu-search-button):not(.lity-close):not(.mpSquareBtn):not(.mtSearch__clear):not(.mpGalSlide__navBtn):not(.mpGalSlide__autoplay):not(.mpAudioPlayer__play-btn):not(.owl-dot):not(.owl-prev):not(.owl-next):not(.mediaPopup__share) span.btnicon:after, [type="submit"]:not(.newsletterCardSlideOut__close):not(.mediaPopup__close):not(.IsNoticesSlideOut__close):not(.IsNotice__toggleHighlighted):not(.link-style):not([class*="gdpr"]):not(.manage-pref):not(.gdpr-btn):not(.nav-menu-search-button):not(.lity-close):not(.mpSquareBtn):not(.mtSearch__clear):not(.mpGalSlide__navBtn):not(.mpGalSlide__autoplay):not(.mpAudioPlayer__play-btn):not(.owl-dot):not(.owl-prev):not(.owl-next):not(.mediaPopup__share) span.btnicon:after, .downloadBtn span.btnicon:before, .downloadBtn span.btnicon:after { -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; width: 100%; left: 0; background: #0F537E; display: block; position: absolute; content: ''; height: 3px; } .sitebtn span.btnicon:before, button:not(.newsletterCardSlideOut__close):not(.mediaPopup__close):not(.IsNoticesSlideOut__close):not(.IsNotice__toggleHighlighted):not(.link-style):not([class*="gdpr"]):not(.manage-pref):not(.gdpr-btn):not(.nav-menu-search-button):not(.lity-close):not(.mpSquareBtn):not(.mtSearch__clear):not(.mpGalSlide__navBtn):not(.mpGalSlide__autoplay):not(.mpAudioPlayer__play-btn):not(.owl-dot):not(.owl-prev):not(.owl-next):not(.mediaPopup__share) span.btnicon:before, [type="button"]:not(.newsletterCardSlideOut__close):not(.mediaPopup__close):not(.IsNoticesSlideOut__close):not(.IsNotice__toggleHighlighted):not(.link-style):not([class*="gdpr"]):not(.manage-pref):not(.gdpr-btn):not(.nav-menu-search-button):not(.lity-close):not(.mpSquareBtn):not(.mtSearch__clear):not(.mpGalSlide__navBtn):not(.mpGalSlide__autoplay):not(.mpAudioPlayer__play-btn):not(.owl-dot):not(.owl-prev):not(.owl-next):not(.mediaPopup__share) span.btnicon:before, [type="reset"]:not(.newsletterCardSlideOut__close):not(.mediaPopup__close):not(.IsNoticesSlideOut__close):not(.IsNotice__toggleHighlighted):not(.link-style):not([class*="gdpr"]):not(.manage-pref):not(.gdpr-btn):not(.nav-menu-search-button):not(.lity-close):not(.mpSquareBtn):not(.mtSearch__clear):not(.mpGalSlide__navBtn):not(.mpGalSlide__autoplay):not(.mpAudioPlayer__play-btn):not(.owl-dot):not(.owl-prev):not(.owl-next):not(.mediaPopup__share) span.btnicon:before, [type="submit"]:not(.newsletterCardSlideOut__close):not(.mediaPopup__close):not(.IsNoticesSlideOut__close):not(.IsNotice__toggleHighlighted):not(.link-style):not([class*="gdpr"]):not(.manage-pref):not(.gdpr-btn):not(.nav-menu-search-button):not(.lity-close):not(.mpSquareBtn):not(.mtSearch__clear):not(.mpGalSlide__navBtn):not(.mpGalSlide__autoplay):not(.mpAudioPlayer__play-btn):not(.owl-dot):not(.owl-prev):not(.owl-next):not(.mediaPopup__share) span.btnicon:before, .downloadBtn span.btnicon:before { top: 0; } .sitebtn span.btnicon:after, button:not(.newsletterCardSlideOut__close):not(.mediaPopup__close):not(.IsNoticesSlideOut__close):not(.IsNotice__toggleHighlighted):not(.link-style):not([class*="gdpr"]):not(.manage-pref):not(.gdpr-btn):not(.nav-menu-search-button):not(.lity-close):not(.mpSquareBtn):not(.mtSearch__clear):not(.mpGalSlide__navBtn):not(.mpGalSlide__autoplay):not(.mpAudioPlayer__play-btn):not(.owl-dot):not(.owl-prev):not(.owl-next):not(.mediaPopup__share) span.btnicon:after, [type="button"]:not(.newsletterCardSlideOut__close):not(.mediaPopup__close):not(.IsNoticesSlideOut__close):not(.IsNotice__toggleHighlighted):not(.link-style):not([class*="gdpr"]):not(.manage-pref):not(.gdpr-btn):not(.nav-menu-search-button):not(.lity-close):not(.mpSquareBtn):not(.mtSearch__clear):not(.mpGalSlide__navBtn):not(.mpGalSlide__autoplay):not(.mpAudioPlayer__play-btn):not(.owl-dot):not(.owl-prev):not(.owl-next):not(.mediaPopup__share) span.btnicon:after, [type="reset"]:not(.newsletterCardSlideOut__close):not(.mediaPopup__close):not(.IsNoticesSlideOut__close):not(.IsNotice__toggleHighlighted):not(.link-style):not([class*="gdpr"]):not(.manage-pref):not(.gdpr-btn):not(.nav-menu-search-button):not(.lity-close):not(.mpSquareBtn):not(.mtSearch__clear):not(.mpGalSlide__navBtn):not(.mpGalSlide__autoplay):not(.mpAudioPlayer__play-btn):not(.owl-dot):not(.owl-prev):not(.owl-next):not(.mediaPopup__share) span.btnicon:after, [type="submit"]:not(.newsletterCardSlideOut__close):not(.mediaPopup__close):not(.IsNoticesSlideOut__close):not(.IsNotice__toggleHighlighted):not(.link-style):not([class*="gdpr"]):not(.manage-pref):not(.gdpr-btn):not(.nav-menu-search-button):not(.lity-close):not(.mpSquareBtn):not(.mtSearch__clear):not(.mpGalSlide__navBtn):not(.mpGalSlide__autoplay):not(.mpAudioPlayer__play-btn):not(.owl-dot):not(.owl-prev):not(.owl-next):not(.mediaPopup__share) span.btnicon:after, .downloadBtn span.btnicon:after { bottom: -1px; -webkit-transform: rotate(90deg); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: rotate(90deg); /* IE 9 */ -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); /* Firefox 16+, IE 10+, Opera */ } /* * Content Section */ .content, .hp-hero { display: block; position: relative; margin: 0 auto; z-index: 0; } .content-section, .footer { display: block; position: relative; } .content-section-wrapper, .footer > div { position: relative; margin: 0 auto; width: -webkit-calc(100% - 40px); width: -moz-calc(100% - 40px); width: calc(100% - 40px); padding: 40px 0; } @media screen and (min-width: 768px) { .content-section-wrapper, .footer > div { width: -webkit-calc(100% - 100px); width: -moz-calc(100% - 100px); width: calc(100% - 100px); padding: 80px 0; } } @media screen and (min-width: 1280px) { .content-section-wrapper, .footer > div { width: 1024px; padding: 100px 0; } } .content-section-wrapper.fullScreen, .footer > div.fullScreen { display: block; position: relative; width: 100%; } .content-section-wrapper.fullScreenPadded, .footer > div.fullScreenPadded { width: -webkit-calc(100% - 40px); width: -moz-calc(100% - 40px); width: calc(100% - 40px); } @media screen and (min-width: 768px) { .content-section-wrapper.fullScreenPadded, .footer > div.fullScreenPadded { width: -webkit-calc(100% - 100px); width: -moz-calc(100% - 100px); width: calc(100% - 100px); } } @media screen and (min-width: 1280px) { .content-section-wrapper.fullScreenPadded, .footer > div.fullScreenPadded { width: -webkit-calc(100% - 140px); width: -moz-calc(100% - 140px); width: calc(100% - 140px); } } .content-section-title { line-height: 1; color: #0F537E; margin: 0 0 .675em; display: block; position: relative; font-size: 30px; font-weight: 400; } @media screen and (min-width: 768px) { .content-section-title { font-size: 45px; } } @media screen and (min-width: 1280px) { .content-section-title { font-size: 68px; } } .content-section-title span { display: block; position: relative; font-weight: 600; } .content-section-title.centered { text-align: center; } /********************************* * Header *********************************/ .header { opacity: 0; width: 100%; left: 0; top: 0; -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; background-color: #0F537E; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s; z-index: 7; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; position: absolute; height: 60px; /* &.scrolled:not(.overnav){ .header-menu{ } } */ } .header.sticky .header-logo { margin-top: -250px; } @media screen and (min-width: 768px) { .header.sticky .header-logo { margin-top: 0; } } @media screen and (max-width: 1023px) { .header.sticky .header-logo { margin-top: -350px; } } .header.showHeader { opacity: 1; } @media screen and (min-width: 768px) { .header { padding: 50px 50px 0; width: -webkit-calc(100% - 100px); width: -moz-calc(100% - 100px); width: calc(100% - 100px); -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row; background-color: transparent; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -webkit-align-items: flex-start; -moz-box-align: start; -ms-flex-align: start; align-items: flex-start; z-index: 8; } } @media screen and (min-width: 1280px) { .header { padding: 66px 66px 0; width: -webkit-calc(100% - 132px); width: -moz-calc(100% - 132px); width: calc(100% - 132px); } } .header-menu { -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; position: absolute; right: 0; top: 6px; -webkit-border-radius: 50px 0 0 50px; -moz-border-radius: 50px 0 0 50px; border-radius: 50px 0 0 50px; padding: 1em; } @media screen and (min-width: 768px) { .header-menu { top: -webkit-calc(50px - 1.25em); top: -moz-calc(50px - 1.25em); top: calc(50px - 1.25em); width: 142px; padding: 1.25em 0 1.25em 2em; } .header-menu:after { top: 50%; right: 0; height: 2px; width: 30px; display: block; position: absolute; content: ''; -webkit-transform: translateY(-50%); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: translateY(-50%); /* IE 9 */ -moz-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); /* Firefox 16+, IE 10+, Opera */ -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; background: #FFF; } } @media screen and (min-width: 768px) and (min-width: 1280px) { .header-menu:after { width: 44px; } } @media screen and (min-width: 1280px) { .header-menu { top: -webkit-calc(66px - 1.25em); top: -moz-calc(66px - 1.25em); top: calc(66px - 1.25em); width: 158px; } } .header-menu-button { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; position: relative; cursor: pointer; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; top: 0; right: 0; width: 100%; } html.no-touch .header-menu-button:hover:not(.close) .header-menu-button-icon { width: 28px; } html.no-touch .header-menu-button:hover .header-menu-button-text:after { width: 100%; } .header-menu-button span { display: block; position: relative; text-align: center; z-index: 1; } .header-menu-button-icon { -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; background: #FFF; width: 22px; height: 3px; margin-left: 1em; } .header-menu-button-icon:before, .header-menu-button-icon:after { -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; display: block; position: absolute; content: ''; width: 100%; left: 0; background: #FFF; height: 3px; } .header-menu-button-icon:before { top: -8px; } .header-menu-button-icon:after { bottom: -8px; } .header-menu-button-text { color: #FFF; font-size: 14px; top: 1px; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; text-transform: uppercase; font-weight: 700; } @media screen and (min-width: 768px) { .header-menu-button-text { font-size: 18px; } } .header-menu-button-text.close { display: none; } .header-menu-button-text:after { display: block; position: absolute; content: ''; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; bottom: 0; left: 0; height: 3px; background: #FFF; width: 0; } .header-menu-button.close .header-menu-button-icon { background: transparent; } .header-menu-button.close .header-menu-button-icon:before { top: 0; -webkit-transform: rotate(45deg); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: rotate(45deg); /* IE 9 */ -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); /* Firefox 16+, IE 10+, Opera */ } .header-menu-button.close .header-menu-button-icon:after { bottom: 0; -webkit-transform: rotate(-45deg); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: rotate(-45deg); /* IE 9 */ -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); /* Firefox 16+, IE 10+, Opera */ } .header-menu-button.close .header-menu-button-text.open { display: none; } .header-menu-button.close .header-menu-button-text.close { display: block; } .header-menu br { display: none; } .header-menu .logout-btn { position: absolute; left: -8px; top: 4px; -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } .header-menu .logout-btn .btntext .btnicon { display: none; } .header-menu .logout-btn:after { content: none; } @media screen and (max-width: 767px) { .header-menu .logout-btn { left: 7px; top: -4px; -webkit-transform: translateX(-70%) scale(0.4); -moz-transform: translateX(-70%) scale(0.4); -ms-transform: translateX(-70%) scale(0.4); -o-transform: translateX(-70%) scale(0.4); transform: translateX(-70%) scale(0.4); } } .header-logo { display: block; position: relative; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; text-align: center; } .header-logo .mobile { display: none; } @media screen and (min-width: 768px) { .header-logo { max-width: 50%; text-align: left; } } @media screen and (min-width: 768px) and (-ms-high-contrast: active), screen and (min-width: 768px) and (-ms-high-contrast: none) { .header-logo { width: 50%; } } @media (max-width: 767px) { .header-logo .mobile { display: block; } .header-logo .desktop { display: none; } } .header-logo-symbol { left: 50%; -webkit-transform: translateX(-50%); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: translateX(-50%); /* IE 9 */ -moz-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); /* Firefox 16+, IE 10+, Opera */ display: block; position: absolute; } .header-logo-symbol:after { display: none !important; } @media screen and (min-width: 768px) { .header-logo-symbol { width: 100%; position: relative; } } .header-logo-symbol div { position: relative; } .header-logo-symbol img { margin: 0 auto; width: 80px; } @media screen and (min-width: 768px) { .header-logo-symbol img { width: 116px; margin: 0; } } @media screen and (max-width: 1024px) { .header-logo-symbol img { width: 100px; } } .header-portals { width: -webkit-calc( (100%/3) * 2 - .5em); width: -moz-calc( (100%/3) * 2 - .5em); width: calc( (100%/3) * 2 - .5em); padding-left: 1em; display: none; position: relative; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media screen and (min-width: 768px) { .header-portals { top: -9px; width: -webkit-calc(50% - 50px); width: -moz-calc(50% - 50px); width: calc(50% - 50px); } } @media screen and (min-width: 1024px) { .header-portals { width: -webkit-calc(50% - 66px); width: -moz-calc(50% - 66px); width: calc(50% - 66px); } } .header-portals > div, .header-portals > a { color: #000; position: relative; } .header-portals-button { -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer; height: 44px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; position: absolute; top: 0; right: 0; } .header-portals-button span { display: block; position: relative; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; text-align: center; z-index: 1; } .header-portals-button-icon { width: 26px; height: 26px; margin-left: .5em; top: -5px; background: url("/Images/img/icons/Portals_w.png") no-repeat center center/auto 26px; } @media screen and (min-width: 768px) { .header-portals-button-icon { background-image: url("/Images/img/icons/Portals.png"); margin-left: 1em; } } .header-portals-button-text { color: #FFF; font-size: 14px; text-transform: uppercase; font-weight: 700; line-height: 1; letter-spacing: 1px; } @media screen and (min-width: 768px) { .header-portals-button-text { font-size: 18px; color: #0F537E; height: 23px; } } .header-portals-button-text:after { display: block; position: absolute; content: ''; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; bottom: 2px; left: 0; height: 3px; background: #0F537E; width: 0; } html.no-touch .header-portals-button:hover .header-portals-button-text:after { width: 100%; } html.no-touch .header-portals-button:hover.portals .header-portals-button-icon { background-image: url("/Images/img/icons/PortalsOpen.png"); } @media screen and (min-width: 768px) { .header-portals-button.portals.opened .header-portals-button-text:after { width: 100%; } } .header-portals-button.portals.opened .header-portals-button-icon { background-image: url("/Images/img/icons/PortalsOpen_w.png"); } @media screen and (min-width: 768px) { .header-portals-button.portals.opened .header-portals-button-icon { background-image: url("/Images/img/icons/PortalsOpen.png"); } } .header-portals-button.contact .header-portals-button-icon { background-image: url("/Images/img/icons/Contact_w.png"); top: -2px; } @media screen and (min-width: 768px) { .header-portals-button.contact .header-portals-button-icon { background-image: url("/Images/img/icons/Contact.png"); } } .header-portals-button.contact.opened span:last-child { background: none; position: relative; } .header-portals-button.contact.opened span:last-child:before { content: ''; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%) rotate(-45deg); -moz-transform: translate(-50%, -50%) rotate(-45deg); -ms-transform: translate(-50%, -50%) rotate(-45deg); -o-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg); width: 20px; height: 2px; background: #fff; } .header-portals-button.contact.opened span:last-child:after { content: ''; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%) rotate(45deg); -moz-transform: translate(-50%, -50%) rotate(45deg); -ms-transform: translate(-50%, -50%) rotate(45deg); -o-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); width: 20px; height: 2px; background: #fff; } .header-panels { background: #FFF; top: 0; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; padding: 20px; z-index: -1; display: block; position: fixed !important; } .header-panels.active { z-index: 9998; } .header-panels-close { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; position: relative; cursor: pointer; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; } html.no-touch .header-panels-close:hover .header-panels-close-text:after { width: 100%; } .header-panels-close span { display: block; position: relative; text-align: center; z-index: 1; } .header-panels-close-icon { -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; width: 22px; height: 3px; margin-left: 1em; } .header-panels-close-icon:before, .header-panels-close-icon:after { -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; display: block; position: absolute; content: ''; width: 100%; left: 0; background: #0F537E; height: 3px; } .header-panels-close-icon:before { top: 0; -webkit-transform: rotate(45deg); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: rotate(45deg); /* IE 9 */ -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); /* Firefox 16+, IE 10+, Opera */ } .header-panels-close-icon:after { bottom: 0; -webkit-transform: rotate(-45deg); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: rotate(-45deg); /* IE 9 */ -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); /* Firefox 16+, IE 10+, Opera */ } .header-panels-close-text { color: #0F537E; font-size: 14px; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; text-transform: uppercase; font-weight: 700; } @media screen and (min-width: 768px) { .header-panels-close-text { font-size: 18px; } } .header-panels-close-text:after { display: block; position: absolute; content: ''; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; bottom: 0; left: 0; height: 3px; background: #0F537E; width: 0; } .header-panels-wrapper { display: block; position: relative; } .header-panels-wrapper ul { display: block; position: relative; } .header-panels-wrapper ul li { display: block; position: relative; } .header-panels-wrapper > div { display: block; position: relative; padding: 30px 0; border-bottom: 1px solid rgba(112, 112, 112, 0.125); } .header-panels-wrapper > div:last-of-type { border: 0; } .header-panels-links a { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; position: relative; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; } .header-panels-links a:after { display: none !important; } html.no-touch .header-panels-links a:hover .header-panels-links-icon { -webkit-transform: scale(1.6); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: scale(1.6); /* IE 9 */ -moz-transform: scale(1.6); -o-transform: scale(1.6); transform: scale(1.6); /* Firefox 16+, IE 10+, Opera */ } html.no-touch .header-panels-links a:hover .header-panels-links-text:after { width: 100%; } .header-panels-links a span { display: block; position: relative; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; text-align: center; z-index: 1; } .header-panels-links ul li { margin: .75em 0; } .header-panels-links-icon { width: 8px; height: 2px; margin-left: 1em; } .header-panels-links-icon:before, .header-panels-links-icon:after { -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; width: 100%; left: 0; background: #0F537E; display: block; position: absolute; content: ''; height: 2px; } .header-panels-links-icon:before { top: 0; } .header-panels-links-icon:after { bottom: 0; -webkit-transform: rotate(90deg); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: rotate(90deg); /* IE 9 */ -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); /* Firefox 16+, IE 10+, Opera */ } .header-panels-links-text { color: #0F537E; font-size: 18px; text-transform: uppercase; font-weight: 700; } @media screen and (min-width: 768px) { .header-panels-links-text { font-size: 18px; } } .header-panels-links-text:after { display: block; position: absolute; content: ''; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; bottom: 0; left: 0; height: 3px; background: #0F537E; width: 0; } .header-panels-direction p { font-size: 18px; display: block; position: relative; } .header-panels-direction a { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; position: relative; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; } html.no-touch .header-panels-direction a:hover .header-panels-links-icon { -webkit-transform: scale(1.6); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: scale(1.6); /* IE 9 */ -moz-transform: scale(1.6); -o-transform: scale(1.6); transform: scale(1.6); /* Firefox 16+, IE 10+, Opera */ } html.no-touch .header-panels-direction a:hover .header-panels-links-text:after { width: 100%; } .header-panels-direction a span { display: block; position: relative; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; text-align: center; z-index: 1; } .header-panels-direction a .header-panels-links-icon:before, .header-panels-direction a .header-panels-links-icon:after { background: #0F537E; } .header-panels-direction a .header-panels-links-text { font-weight: 500; } .header-panels-social h4 { font-weight: 400; font-size: 18px; text-transform: none; } .header-panels-social ul > li { display: inline-block; position: relative; vertical-align: middle; } .header-panels-social ul > li a { display: block; position: relative; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; width: 20px; height: 20px; margin-right: 1em; } .header-panels-social ul > li a i { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url("/Images/img/icons/TiarcNews@2x.png") no-repeat center center/contain; } html.no-touch .header-panels-social ul > li a:hover { -webkit-transform: scale(1.1); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: scale(1.1); /* IE 9 */ -moz-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); /* Firefox 16+, IE 10+, Opera */ } .header-panels-social ul > li a.header-panels-social-tw i { background-image: url("/Images/img/icons/Twitter@2x.png"); } .header-panels-social ul > li a.header-panels-social-fb i { background-image: url("/Images/img/icons/Facebook@2x.png"); } .header-panels-social ul > li a.header-panels-social-fk i { background-image: url("/Images/img/icons/Flickr@2x.png"); } .header-panels-social ul > li a.header-panels-social-yt i { background-image: url("/Images/img/icons/Youtube@2x.png"); } .header-panels-social ul > li a.header-panels-social-sc i { background-image: url("/Images/img/icons/SoundCloudTrack@2x.png"); } .header-panels-social ul > li a.header-panels-social-is i { background-image: url("/Images/img/icons/Instagram@2x.png"); } .header-panels-social ul > li a.header-panels-social-issuu i { background-image: url("/Images/img/icons/Issuu@2x.png"); } .header-panels-social ul > li a.header-panels-social-ln i { background-image: url("/Images/img/icons/linkedin_b@2x.png"); } .header-panels-social ul > li a.header-panels-social.lazyloaded i { display: block; } .header-panels.contact { width: -webkit-calc(100% - 40px); width: -moz-calc(100% - 40px); width: calc(100% - 40px); height: -webkit-calc(100vh - 80px); height: -moz-calc(100vh - 80px); height: calc(100vh - 80px); left: -webkit-calc((100% + 40px) * (-1)); left: -moz-calc((100% + 40px) * (-1)); left: calc((100% + 40px) * (-1)); padding: 40px 20px; -webkit-box-shadow: 6px 0px 10px 0px rgba(0, 0, 0, 0.5); -moz-box-shadow: 6px 0px 10px 0px rgba(0, 0, 0, 0.5); box-shadow: 6px 0px 10px 0px rgba(0, 0, 0, 0.5); } @media screen and (max-width: 1023px) { .header-panels.contact { overflow-y: scroll; } } .header-panels.contact .header-panels-links { padding-top: 50px; } @media screen and (max-width: 1023px) { .header-panels.contact .header-panels-links ul { 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; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; } } @media screen and (max-width: 1023px) { .header-panels.contact .header-panels-direction { text-align: center; } .header-panels.contact .header-panels-direction p { -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; } } @media screen and (max-width: 1023px) { .header-panels.contact .header-panels-social { text-align: center; } } @media screen and (min-width: 768px) { .header-panels.contact { width: -webkit-calc(100vw/2 - 100px); width: -moz-calc(100vw/2 - 100px); width: calc(100vw/2 - 100px); padding: 50px; left: -webkit-calc( ((100vw/2) + 20px) * (-1)); left: -moz-calc( ((100vw/2) + 20px) * (-1)); left: calc( ((100vw/2) + 20px) * (-1)); } } @media screen and (min-width: 1024px) { .header-panels.contact { width: -webkit-calc(100vw/3 - 100px); width: -moz-calc(100vw/3 - 100px); width: calc(100vw/3 - 100px); left: -webkit-calc( ((100vw/3) + 20px) * (-1)); left: -moz-calc( ((100vw/3) + 20px) * (-1)); left: calc( ((100vw/3) + 20px) * (-1)); } } .header-panels.contact.opened { left: 0; } @media screen and (min-width: 1024px) { .header-panels.contact.opened { z-index: 99999; } } @media screen and (max-width: 1023px) { .header-panels.contact.opened { z-index: 9998; } } .header-panels.portals { width: -webkit-calc(100% - 40px); width: -moz-calc(100% - 40px); width: calc(100% - 40px); left: 0; background: #F7F7F7; pointer-events: none; top: 85px; opacity: 0; } .header-panels.portals .header-panels-links { padding: 0; text-align: center; } .header-panels.portals .header-panels-links ul { 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; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; } .header-panels.portals .header-panels-wrapper { background: #F7F7F7; padding: 20px 0; } @media screen and (min-width: 768px) { .header-panels.portals { padding: 0; left: -webkit-calc(50% - 220px); left: -moz-calc(50% - 220px); left: calc(50% - 220px); background: transparent; width: 200px; } } html.no-touch .header-panels.portals { padding: 60px 0 0; } @media screen and (max-width: 767px) { .header-panels.portals { display: none; } } .header-panels.portals.opened { top: 60px; opacity: 1; pointer-events: auto; } @media screen and (min-width: 768px) { .header-panels.portals.opened { top: 95px; cursor: pointer; } } html.no-touch .header-panels.portals.opened { top: 50px; } .header.overnav { z-index: 9999; position: fixed; } .header.overnav .header-logo { display: none; } .header.overnav .header-portals { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; } .header.overnav .header-menu:after { background: #FFF; } @media screen and (min-width: 768px) { .header.overnav .header-menu:after { background: #0F537E; } } .header.overnav .header-menu-button .header-menu-button-text { color: #FFF; } .header.overnav .header-menu-button .header-menu-button-text:after { background: #FFF; } @media screen and (min-width: 768px) { .header.overnav .header-menu-button .header-menu-button-text { color: #0F537E; } .header.overnav .header-menu-button .header-menu-button-text:after { background: #0F537E; } } .header.overnav .header-menu-button .header-menu-button-icon:before, .header.overnav .header-menu-button .header-menu-button-icon:after { background: #FFF; } @media screen and (min-width: 768px) { .header.overnav .header-menu-button .header-menu-button-icon:before, .header.overnav .header-menu-button .header-menu-button-icon:after { background: #0F537E; } } @media screen and (max-width: 1023px) { .header { z-index: 9999; position: fixed; } .header .header-logo { display: block !important; width: 70px; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); top: 10px; z-index: 1; margin-top: 0 !important; } .header .header-portals { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; } .header .header-menu:after { background: #FFF; } } @media screen and (max-width: 1023px) and (min-width: 768px) { .header .header-menu:after { background: #0F537E; } } @media screen and (max-width: 1023px) { .header .header-menu-button .header-menu-button-text { color: #FFF; } .header .header-menu-button .header-menu-button-text:after { background: #FFF; } } @media screen and (max-width: 1023px) and (min-width: 768px) { .header .header-menu-button .header-menu-button-text { color: #0F537E; } .header .header-menu-button .header-menu-button-text:after { background: #0F537E; } } @media screen and (max-width: 1023px) { .header .header-menu-button .header-menu-button-icon:before, .header .header-menu-button .header-menu-button-icon:after { background: #FFF; } } @media screen and (max-width: 1023px) and (min-width: 768px) { .header .header-menu-button .header-menu-button-icon:before, .header .header-menu-button .header-menu-button-icon:after { background: #0F537E; } } @media screen and (max-width: 1023px) { .header .header-portals-button.portals { display: none; } } .header.sticky:not(.overnav):not(.noHeader) { position: fixed; } @media screen and (min-width: 768px) { .header.sticky:not(.overnav):not(.noHeader) { position: absolute; } } .header.sticky:not(.overnav):not(.noHeader) .header-menu { background-color: rgba(15, 83, 126, 0.75); } .header.sticky:not(.overnav):not(.noHeader) .header-menu:after { opacity: 0; width: 0; } @media screen and (min-width: 768px) { .header.sticky:not(.overnav):not(.noHeader) .header-menu { position: fixed; top: 0; } } body.hasPanel { height: 100%; overflow: hidden; position: fixed; } /********************************* * Main Navigation Styles *********************************/ @media screen and (min-width: 768px) { .overnav .header-menu-button { background: rgba(226, 226, 226, 0.5); padding: 2px 5px; } } @media screen and (min-width: 768px) { .overnav .header-portals-button { background: #fff; height: 30px; padding: 5px 5px 0 5px; } } .nav { opacity: 0; z-index: -1; padding: 0; margin: 0; width: 100%; height: 100%; top: 0; left: 0; right: 0; display: none; position: fixed; overflow-y: auto; background: #0F537E; /** Info Section */ } @media screen and (min-width: 768px) { .nav { overflow: hidden; background: rgba(255, 255, 255, 0.9); } } .nav.stopScroll { overflow: hidden; } .nav-menu-wrapper { -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; position: relative; width: 100%; z-index: 1; } @media screen and (min-width: 768px) { .nav-menu-wrapper { height: 100%; width: 50%; right: 0; position: absolute; } } .nav-menu-left, .nav-menu-middle { display: block; position: relative; width: 100%; background-color: #FFF; z-index: 0; } .nav-menu-left > ul, .nav-menu-middle > ul { display: block; position: relative; } .nav-menu-left > ul li, .nav-menu-middle > ul li { display: block; position: relative; text-align: center; } @media screen and (min-width: 768px) { .nav-menu-left > ul li, .nav-menu-middle > ul li { text-align: left; } } .nav-menu-left > ul li a, .nav-menu-middle > ul li a { text-transform: capitalize; letter-spacing: 1px; color: #707070; line-height: 1.1; font-weight: 600; padding: .2em 0; font-size: 22px; display: inline-block; position: relative; vertical-align: top; } @media screen and (min-height: 600px) { .nav-menu-left > ul li a, .nav-menu-middle > ul li a { padding: .3em 0; } } @media screen and (min-height: 800px) { .nav-menu-left > ul li a, .nav-menu-middle > ul li a { padding: .4em 0; } } @media screen and (min-width: 1280px) { .nav-menu-left > ul li a, .nav-menu-middle > ul li a { font-size: 28px; } } html.no-touch .nav-menu-left > ul li a:hover + .hasChild-icon, html.no-touch .nav-menu-middle > ul li a:hover + .hasChild-icon { width: 15px; } .nav-menu-left > ul li a.active, .nav-menu-middle > ul li a.active { color: #E17619; } .nav-menu-left > ul li a.active + .hasChild-icon, .nav-menu-middle > ul li a.active + .hasChild-icon { width: 15px; } .nav-menu-left > ul li .hasChild-wrapper, .nav-menu-middle > ul li .hasChild-wrapper { display: block; position: relative; width: 100%; } @media screen and (min-width: 768px) { .nav-menu-left > ul li .hasChild-wrapper, .nav-menu-middle > ul li .hasChild-wrapper { width: -webkit-calc(100% - 40px); width: -moz-calc(100% - 40px); width: calc(100% - 40px); padding-right: 40px; } } .nav-menu-left > ul li .hasChild-link, .nav-menu-middle > ul li .hasChild-link { z-index: 1; vertical-align: middle; } .nav-menu-left > ul li .hasChild-icon, .nav-menu-middle > ul li .hasChild-icon { 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: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -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; height: 13px; width: 13px; outline: 0; margin-left: 1em; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; z-index: 0; cursor: pointer; display: inline-block; position: relative; vertical-align: middle; } @media screen and (min-width: 768px) { .nav-menu-left > ul li .hasChild-icon, .nav-menu-middle > ul li .hasChild-icon { margin-left: auto; -webkit-transform: translateY(-50%); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: translateY(-50%); /* IE 9 */ -moz-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); /* Firefox 16+, IE 10+, Opera */ top: 50%; display: block; position: absolute; right: 0; } } .nav-menu-left > ul li .hasChild-icon:before, .nav-menu-left > ul li .hasChild-icon:after, .nav-menu-middle > ul li .hasChild-icon:before, .nav-menu-middle > ul li .hasChild-icon:after { -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; width: 100%; left: 0; background: #0F537E; display: block; position: relative; content: ''; height: 2px; } .nav-menu-left > ul li .hasChild-icon:before, .nav-menu-middle > ul li .hasChild-icon:before { top: 15%; } .nav-menu-left > ul li .hasChild-icon:after, .nav-menu-middle > ul li .hasChild-icon:after { bottom: 0; -webkit-transform: rotate(90deg); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: rotate(90deg); /* IE 9 */ -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); /* Firefox 16+, IE 10+, Opera */ } .nav-menu-left > ul li.current a.hasChild-link, .nav-menu-middle > ul li.current a.hasChild-link { color: #0F537E; } @media screen and (min-width: 768px) { .nav-menu-left > ul li.current a.hasChild-link + .hasChild-icon, .nav-menu-middle > ul li.current a.hasChild-link + .hasChild-icon { width: 15px; } .nav-menu-left > ul li.current a.hasChild-link + .hasChild-icon:after, .nav-menu-middle > ul li.current a.hasChild-link + .hasChild-icon:after { opacity: 0; } } .nav-menu-left { /* Chrome, Safari and Opera */ -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ overflow-y: auto; padding: 90px 30px 30px; width: -webkit-calc(100% - 60px); width: -moz-calc(100% - 60px); width: calc(100% - 60px); height: -webkit-calc(100% - 120px); height: -moz-calc(100% - 120px); height: calc(100% - 120px); } .nav-menu-left::-webkit-scrollbar { display: none; } @media screen and (min-width: 768px) { .nav-menu-left { padding: 140px 70px 50px; width: -webkit-calc(100% - 140px); width: -moz-calc(100% - 140px); width: calc(100% - 140px); height: -webkit-calc(100% - 190px); height: -moz-calc(100% - 190px); height: calc(100% - 190px); z-index: 1; } } @media screen and (min-width: 1024px) { .nav-menu-left { padding: 180px 120px 70px; width: -webkit-calc(100% - 240px); width: -moz-calc(100% - 240px); width: calc(100% - 240px); height: -webkit-calc(100% - 250px); height: -moz-calc(100% - 250px); height: calc(100% - 250px); } } @media screen and (min-width: 768px) { .nav-menu-left ul { -webkit-transform: translateY(-50%); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: translateY(-50%); /* IE 9 */ -moz-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); /* Firefox 16+, IE 10+, Opera */ top: 50%; } } .nav-menu-left ul li { margin: .5em 0; } @media screen and (min-height: 600px) { .nav-menu-left ul li { margin: .75em 0; } } @media screen and (min-height: 800px) { .nav-menu-left ul li { margin: 1em 0; } } .nav-menu-left ul li:first-of-type { margin-top: 0; } .nav-menu-left ul li:first-of-type a { padding-top: 0; } .nav-menu-left ul li:last-of-type { margin-bottom: 0; } .nav-menu-left a { text-transform: uppercase !important; } .nav-menu-left a:after { background-color: #707070 !important; } .nav-menu-left-search { display: block; position: relative; margin: 2em 0 0; } .nav-menu-left-search-form, .nav-menu-left-search-field { display: block; position: relative; } html.no-touch .nav-menu-left-search-form:before, html.no-touch .nav-menu-left-search-form:after { content: ''; background: #0F537E; top: 0; left: 0; height: 2px; width: 0; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; display: block; position: absolute; } html.no-touch .nav-menu-left-search-form:after { top: auto; bottom: 0; } html.no-touch .nav-menu-left-search-form:hover:before, html.no-touch .nav-menu-left-search-form:hover:after { width: 100%; } .nav-menu-left-search-field { text-align: center; text-transform: uppercase; letter-spacing: 1px; padding: 8px; font-weight: 500; width: 100%; font-size: 20px; line-height: 1.4; outline: none; color: #0F537E; background-color: transparent; -moz-border-radius: 0; border-radius: 0; border: none; border: 2px solid rgba(112, 112, 112, 0.125); -webkit-border-radius: 0; -webkit-appearance: none; /* clears the 'X' from Internet Explorer */ /* clears the 'X' from Chrome */ -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .nav-menu-left-search-field::-ms-clear { display: none; width: 0; height: 0; } .nav-menu-left-search-field::-ms-reveal { display: none; width: 0; height: 0; } .nav-menu-left-search-field::-webkit-search-decoration, .nav-menu-left-search-field::-webkit-search-cancel-button, .nav-menu-left-search-field::-webkit-search-results-button, .nav-menu-left-search-field::-webkit-search-results-decoration { display: none; } .nav-menu-left-search-field::-webkit-input-placeholder { color: #707070; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; } .nav-menu-left-search-field:-ms-input-placeholder { color: #707070; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; -ms-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; } .nav-menu-left-search-field:-moz-placeholder { color: #707070; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; } .nav-menu-left-search-field::-moz-placeholder { color: #707070; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; } .nav-menu-left-search-field::-ms-input-placeholder { color: #707070; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; -ms-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; } .nav-menu-left-search-field::placeholder { color: #707070; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; } @media screen and (min-width: 768px) { .nav-menu-left-search-field { padding: 8px 30px 8px 0; text-align: left; border-left: none; border-right: none; } } @media screen and (min-width: 1280px) { .nav-menu-left-search-field { font-size: 25px; } } .nav-menu-left-search-field:focus { outline: none; border-color: #0F537E; } .nav-menu-left-search-field:focus::-webkit-input-placeholder { color: rgba(112, 112, 112, 0.5); } .nav-menu-left-search-field:focus:-ms-input-placeholder { color: rgba(112, 112, 112, 0.5); } .nav-menu-left-search-field:focus:-moz-placeholder { color: rgba(112, 112, 112, 0.5); } .nav-menu-left-search-field:focus::-moz-placeholder { color: rgba(112, 112, 112, 0.5); } .nav-menu-left-search-field:focus::-ms-input-placeholder { color: rgba(112, 112, 112, 0.5); } .nav-menu-left-search-field:focus::placeholder { color: rgba(112, 112, 112, 0.5); } .nav-menu-left-search-field:focus + .nav-menu-left-search-icon { right: 5px; } .nav-menu-left-search-icon { position: absolute; cursor: pointer; right: -webkit-calc(50% - 75px); right: -moz-calc(50% - 75px); right: calc(50% - 75px); top: 50%; width: 26px; height: 26px; background: transparent url("/Images/img/icons/Search@2x.png") no-repeat center center/contain; -webkit-transform: translateY(-50%); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: translateY(-50%); /* IE 9 */ -moz-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); /* Firefox 16+, IE 10+, Opera */ -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; } @media screen and (min-width: 768px) { .nav-menu-left-search-icon { right: 2px; } } .nav-menu-left-search-button { display: none !important; } .nav-menu-middle { position: absolute; top: 0; left: -102vw; bottom: 0; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; opacity: 0; padding-top: 80px; } @media screen and (min-width: 768px) { .nav-menu-middle { left: 0; padding: 140px 90px 0; background-color: #f7f7f8; width: -webkit-calc(100% - 180px); width: -moz-calc(100% - 180px); width: calc(100% - 180px); } } @media screen and (min-width: 1280px) { .nav-menu-middle { padding: 180px 190px 0; width: -webkit-calc(100% - 380px); width: -moz-calc(100% - 380px); width: calc(100% - 380px); } } .nav-menu-middle.showNav { opacity: 1; left: 0; z-index: 2; } @media screen and (min-width: 768px) { .nav-menu-middle.showNav { left: -100%; } } .nav-menu-middle.openNav { -webkit-transition: none 0.35s ease-in-out 0s !important; -moz-transition: none 0.35s ease-in-out 0s !important; -o-transition: none 0.35s ease-in-out 0s !important; transition: none 0.35s ease-in-out 0s !important; } .nav-menu-middle > ul { position: absolute; opacity: 0; z-index: 0; top: 100px; left: 20px; right: 20px; bottom: 0; -webkit-transition: opacity 0.35s ease-in-out 0s; -moz-transition: opacity 0.35s ease-in-out 0s; -o-transition: opacity 0.35s ease-in-out 0s; transition: opacity 0.35s ease-in-out 0s; /* Chrome, Safari and Opera */ -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ margin: 40px 0; overflow-y: auto; } .nav-menu-middle > ul::-webkit-scrollbar { display: none; } @media screen and (min-width: 768px) { .nav-menu-middle > ul { top: 190px; left: 90px; right: 90px; padding: 0 0 40px; margin: 0; } } @media screen and (min-width: 1280px) { .nav-menu-middle > ul { top: 230px; left: 190px; right: 190px; } } .nav-menu-middle > ul li a { pointer-events: none; font-size: 20px; padding: .55em 0; font-weight: 400; } @media screen and (min-width: 1280px) { .nav-menu-middle > ul li a { font-size: 28px; } } html.no-touch .nav-menu-middle > ul li a:hover { color: #0F537E; } html.no-touch .nav-menu-middle > ul li a:hover + .hasChild-icon { width: 16px; right: 10px; } .nav-menu-middle > ul li a.active + .hasChild-icon { width: 16px; } .nav-menu-middle > ul li a.active + .hasChild-icon:after { height: 0; top: 50%; } @media screen and (min-width: 768px) { .nav-menu-middle > ul li a.active + .hasChild-icon { right: 10px; } } .nav-menu-middle > ul li a:after { display: none; } .nav-menu-middle > ul li > ul { display: none; padding: 20px 0; margin: 10px 0; border: 1px solid rgba(112, 112, 112, 0.125); border-left: none; border-right: none; } @media screen and (min-width: 768px) { .nav-menu-middle > ul li > ul { padding: 20px 0 20px 20px; margin: 0; border: none; } } .nav-menu-middle > ul li > ul a { font-size: 16px; padding: .75em 0; letter-spacing: 0; } @media screen and (min-width: 768px) { .nav-menu-middle > ul li > ul a { padding: .55em 0; } } @media screen and (min-width: 1280px) { .nav-menu-middle > ul li > ul a { font-size: 20px; } } .nav-menu-middle > ul li > ul a.active { font-weight: 400; } .nav-menu-middle > ul li .hasChild-icon { width: 16px; height: 16px; } @media screen and (min-width: 768px) { .nav-menu-middle > ul li .hasChild-icon { right: 10px; } } .nav-menu-middle > ul li .hasChild-icon:after { border: none; background: #0F537E; width: 3px; height: 100%; top: 0; left: 50%; -webkit-transform: translateX(-50%); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: translateX(-50%); /* IE 9 */ -moz-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); /* Firefox 16+, IE 10+, Opera */ } html.no-touch .nav-menu-middle > ul li .hasChild-icon:hover { width: 16px !important; right: 10px !important; } .nav-menu-middle > ul li.current a.hasChild-link + .hasChild-icon { width: 16px; } .nav-menu-middle > ul li.current a.hasChild-link + .hasChild-icon:after { height: 0; top: 50%; } @media screen and (min-width: 768px) { .nav-menu-middle > ul li.current a.hasChild-link + .hasChild-icon { right: 10px; } } .nav-menu-middle > ul.showNav { opacity: 1; z-index: 1; } .nav-menu-middle > ul.showNav li a { pointer-events: auto; z-index: 1; } .nav-menu-back { display: block; position: relative; margin: 0px auto; text-align: center; width: 100%; z-index: 2; } @media screen and (min-width: 768px) { .nav-menu-back { text-align: left; height: 40px; } } .nav-menu-back-btn { padding-right: 35px; display: -webkit-inline-box; display: -webkit-inline-flex; display: -moz-inline-box; display: -ms-inline-flexbox; display: inline-flex; position: relative; cursor: pointer; } .nav-menu-back-btn span { -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; } html.no-touch .nav-menu-back-btn:hover .nav-menu-back-txt:after { width: 100%; } html.no-touch .nav-menu-back-btn:hover .nav-menu-back-arr { width: 30px; right: -10px; } .nav-menu-back-arr { outline: 0; right: 0; top: 50%; height: 100%; width: 26px; z-index: 1; position: absolute; color: #0F537E; -webkit-transform: translateY(-50%); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: translateY(-50%); /* IE 9 */ -moz-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); /* Firefox 16+, IE 10+, Opera */ display: block; position: absolute; } .nav-menu-back-arr:after { content: '\2715'; top: 50%; font-size: 20px; display: block; position: absolute; -webkit-transform: translateY(-50%); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: translateY(-50%); /* IE 9 */ -moz-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); /* Firefox 16+, IE 10+, Opera */ } .nav-menu-back-txt { position: relative; text-transform: uppercase; font-weight: 600; letter-spacing: 1px; color: #0F537E; font-size: 18px; } .nav-menu-back-txt:after { display: block; position: absolute; content: ''; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; bottom: 0; right: 0; height: 2px; background: #0F537E; width: 0; } .nav-menu-scrolldown { -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; bottom: 0; right: 10px; width: 50px; height: 50px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; display: block; position: absolute; background-color: #E17619; cursor: pointer; opacity: 0; } @media screen and (min-width: 768px) { .nav-menu-scrolldown { right: 70px; bottom: 20px; } } .nav-menu-scrolldown span { -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; width: 16px; height: 16px; display: block; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: translate(-50%, -50%); /* IE 9 */ -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); /* Firefox 16+, IE 10+, Opera */ } .nav-menu-scrolldown span:before, .nav-menu-scrolldown span:after { display: block; position: absolute; content: ''; left: 50%; } .nav-menu-scrolldown span:before { background-color: #FFF; width: 2px; height: 100%; top: 0px; -webkit-transform: translateX(-50%); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: translateX(-50%); /* IE 9 */ -moz-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); /* Firefox 16+, IE 10+, Opera */ } .nav-menu-scrolldown span:after { width: 6px; height: 6px; border: 2px solid #FFF; border-left: none; border-top: 0; bottom: 0; -webkit-transform: translateX(-50%) rotate(45deg); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: translateX(-50%) rotate(45deg); /* IE 9 */ -moz-transform: translateX(-50%) rotate(45deg); -o-transform: translateX(-50%) rotate(45deg); transform: translateX(-50%) rotate(45deg); /* Firefox 16+, IE 10+, Opera */ } html.no-touch .nav-menu-scrolldown:hover span { height: 25px; } .nav-menu-scrolldown.show { opacity: 1; bottom: 10px; z-index: 2; } @media screen and (min-width: 768px) { .nav-menu-scrolldown.show { bottom: 50px; } } .nav-info { padding: 50px 20px; width: -webkit-calc(100% - 40px); width: -moz-calc(100% - 40px); width: calc(100% - 40px); display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; position: relative; -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; /* Chrome, Safari and Opera */ -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ overflow-y: auto; z-index: 0; } .nav-info::-webkit-scrollbar { display: none; } @media screen and (min-width: 768px) { .nav-info { position: absolute; left: 0; top: 0; right: auto; bottom: 0; padding: 120px 50px 50px; width: -webkit-calc(50% - 100px); width: -moz-calc(50% - 100px); width: calc(50% - 100px); } } @media screen and (min-width: 1024px) { .nav-info { padding: 120px 100px 50px; width: -webkit-calc(50% - 200px); width: -moz-calc(50% - 200px); width: calc(50% - 200px); } } @media screen and (min-width: 1280px) { .nav-info { padding: 120px 150px 50px; width: -webkit-calc(50% - 300px); width: -moz-calc(50% - 300px); width: calc(50% - 300px); } } .nav-info-keylinks, .nav-info-events { display: block; position: relative; } @media screen and (min-width: 768px) { .nav-info-keylinks, .nav-info-events { -webkit-transform: translateY(-50%); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: translateY(-50%); /* IE 9 */ -moz-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); /* Firefox 16+, IE 10+, Opera */ top: 50%; } } .nav-info-keylinks.hide, .nav-info-events.hide { display: none !important; } .nav-info-keylinks-title, .nav-info-events-title { margin-bottom: 1em; letter-spacing: 0.5px; font-weight: 400; font-size: 30px; line-height: 1.2; display: block; position: relative; text-align: center; color: #FFF; margin-top: 0; } .nav-info-keylinks-title span, .nav-info-events-title span { display: block; position: relative; font-weight: 600; } @media screen and (min-width: 768px) { .nav-info-keylinks-title, .nav-info-events-title { font-size: 32px; color: #0F537E; margin-bottom: 1.5em; } } @media screen and (min-width: 1280px) { .nav-info-keylinks-title, .nav-info-events-title { font-size: 42px; } } .nav-info-keylinks-wrapper, .nav-info-events-wrapper { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; position: relative; } .nav-info-keylinks-wrapper { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .nav-info-keylinks-item { width: 50%; text-align: center; margin-bottom: 3em; } .nav-info-keylinks-item:last-of-type, .nav-info-keylinks-item:nth-last-child(2) { margin-bottom: 0; } .nav-info-keylinks-link > span { display: block; position: relative; margin: 0 auto; } .nav-info-keylinks-link:after { display: none !important; } html.no-touch .nav-info-keylinks-link:hover .nav-info-keylinks-icon:before { -webkit-transform: scale(1.15); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: scale(1.15); /* IE 9 */ -moz-transform: scale(1.15); -o-transform: scale(1.15); transform: scale(1.15); /* Firefox 16+, IE 10+, Opera */ } .nav-info-keylinks-icon { width: 80px; height: 80px; } .nav-info-keylinks-icon:before, .nav-info-keylinks-icon > span { display: block; position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; } .nav-info-keylinks-icon:before { -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; z-index: 0; background-color: #E17619; } .nav-info-keylinks-icon > span { background: transparent url("/Images/img/icons/admissions.png") no-repeat center center/36px auto; z-index: 1; display: none; } .nav-info-keylinks-icon.lazyloaded > span { display: block !important; } @media screen and (min-width: 1024px) { .nav-info-keylinks-icon { width: 100px; height: 100px; } .nav-info-keylinks-icon > span { -moz-background-size: 48px auto; background-size: 48px auto; } } .nav-info-keylinks-text { font-weight: 600; letter-spacing: 0.32px; text-transform: uppercase; color: #FFF; font-size: 16px; margin-top: 0.75em !important; } @media screen and (min-width: 768px) { .nav-info-keylinks-text { color: #707070; } } .nav-info-events-wrapper { -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; } .nav-info-events-item { -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 2.5em; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; position: relative; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer; } .nav-info-events-item > div { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; position: relative; -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; } .nav-info-events-item > div span { -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; } html.no-touch .nav-info-events-item:hover .nav-info-events-date { -webkit-transform: scale(1.1); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: scale(1.1); /* IE 9 */ -moz-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); /* Firefox 16+, IE 10+, Opera */ } html.no-touch .nav-info-events-item:hover .nav-info-events-info span { color: #0F537E; } .nav-info-events-date { width: 100px; height: 100px; background-color: #E17619; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; } .nav-info-events-date span { text-transform: uppercase; color: #FFF; font-weight: 600; line-height: 1; } .nav-info-events-date-day { font-size: 25px; letter-spacing: -1px; } @media screen and (min-width: 768px) { .nav-info-events-date-day { font-size: 32px; } } @media screen and (min-width: 1280px) { .nav-info-events-date-day { font-size: 40px; } } .nav-info-events-date-month { font-size: 14px; } @media screen and (min-width: 1280px) { .nav-info-events-date-month { font-size: 18px; } } .nav-info-events-info { width: -webkit-calc(100% - 120px); width: -moz-calc(100% - 120px); width: calc(100% - 120px); color: #FFF; } @media screen and (min-width: 768px) { .nav-info-events-info { color: #707070; } } .nav-info-events-info-title { font-size: 18px; text-transform: uppercase; } @media screen and (min-width: 768px) { .nav-info-events-info-title { font-size: 22px; } } @media screen and (min-width: 1280px) { .nav-info-events-info-title { font-size: 28px; } } .nav-info-events-info-time { font-size: 16px; font-style: italic; } @media screen and (min-width: 768px) { .nav-info-events-info-time { font-size: 18px; } } @media screen and (min-width: 1280px) { .nav-info-events-info-time { font-size: 22px; } } .nav-info-events-more { display: block; position: relative; text-align: center; } .nav-info-events-more a { text-transform: uppercase; font-weight: 600; padding-right: 2em; color: #FFF; font-size: 16px; } @media screen and (min-width: 768px) { .nav-info-events-more a { font-size: 18px; color: #707070; } } @media screen and (min-width: 1280px) { .nav-info-events-more a { font-size: 22px; } } .nav-info-events-more a:after { background-color: #0F537E; height: 2px; max-width: -webkit-calc( 100% - 2em); max-width: -moz-calc( 100% - 2em); max-width: calc( 100% - 2em); } html.no-touch .nav-info-events-more a:hover { color: #0F537E; } html.no-touch .nav-info-events-more a:hover span { width: 15px; } html.no-touch .nav-info-events-more a:hover span:before { background: #0F537E; } html.no-touch .nav-info-events-more a:hover span:after { border-color: #0F537E; } .nav-info-events-more a span { width: 20px; height: 20px; outline: 0; top: 50%; right: 0; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; z-index: 0; cursor: pointer; -webkit-transform: translateY(-50%); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: translateY(-50%); /* IE 9 */ -moz-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); /* Firefox 16+, IE 10+, Opera */ display: block; position: absolute; } .nav-info-events-more a span:before, .nav-info-events-more a span:after { -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; content: ''; top: 50%; right: 0; display: block; position: absolute; } .nav-info-events-more a span:before { background: #FFF; width: 100%; height: 2px; -webkit-transform: translateY(-50%); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: translateY(-50%); /* IE 9 */ -moz-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); /* Firefox 16+, IE 10+, Opera */ } @media screen and (min-width: 768px) { .nav-info-events-more a span:before { background: #707070; } } .nav-info-events-more a span:after { width: 6px; height: 6px; border: 2px solid #FFF; border-left: none; border-bottom: none; -webkit-transform: translateY(-50%) rotate(45deg); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: translateY(-50%) rotate(45deg); /* IE 9 */ -moz-transform: translateY(-50%) rotate(45deg); -o-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg); /* Firefox 16+, IE 10+, Opera */ } @media screen and (min-width: 768px) { .nav-info-events-more a span:after { border-color: #707070; } } .nav-menu-middle > ul li .hasChild-icon::before { top: 9px; } @media screen and (max-height: 600px) { .nav-menu-left ul { max-height: 75vh; overflow-y: scroll; overflow-x: hidden; padding-right: 20px; -ms-overflow-style: none; /* Internet Explorer 10+ */ scrollbar-width: none; /* Firefox */ } .nav-menu-left ul::-webkit-scrollbar { display: none; } .nav-menu-left { overflow: hidden; } } /********************************* * Footer *********************************/ .footer { background-color: #0F537E; color: #FFF; /**/ /** HEAD Section */ /** FOOTER Map */ /** MAIN Section */ /** CONNECT / KEY LINKS Section */ /** BOTTOM Section */ /* BOTTOM Logos Section */ } @media screen and (min-width: 768px) { .footer.beforeAnimate .footer-head-title { -webkit-transition: all 0.75s ease-in-out 0s; -moz-transition: all 0.75s ease-in-out 0s; -o-transition: all 0.75s ease-in-out 0s; transition: all 0.75s ease-in-out 0s; margin-top: 40px; opacity: 0; } } @media screen and (min-width: 768px) and (min-width: 768px) { .footer.beforeAnimate .footer-head-title span { -webkit-transition: all 0.75s ease-in-out 0.5s; -moz-transition: all 0.75s ease-in-out 0.5s; -o-transition: all 0.75s ease-in-out 0.5s; transition: all 0.75s ease-in-out 0.5s; margin-top: 40px; opacity: 0; } } @media screen and (min-width: 768px) { .footer.beforeAnimate .footer-main > div { opacity: 0; } .footer.beforeAnimate .footer-main-left { right: -40px; -webkit-transition: all 0.4s ease-in-out 0.5s; -moz-transition: all 0.4s ease-in-out 0.5s; -o-transition: all 0.4s ease-in-out 0.5s; transition: all 0.4s ease-in-out 0.5s; } .footer.beforeAnimate .footer-main-center { top: 40px; -webkit-transition: all 0.4s ease-in-out 0.25s; -moz-transition: all 0.4s ease-in-out 0.25s; -o-transition: all 0.4s ease-in-out 0.25s; transition: all 0.4s ease-in-out 0.25s; } .footer.beforeAnimate .footer-main-right { left: -40px; -webkit-transition: all 0.4s ease-in-out 0.7s; -moz-transition: all 0.4s ease-in-out 0.7s; -o-transition: all 0.4s ease-in-out 0.7s; transition: all 0.4s ease-in-out 0.7s; } .footer.beforeAnimate .footer-connect, .footer.beforeAnimate .footer-bottom, .footer.beforeAnimate .footer-logos { margin-top: 40px !important; opacity: 0; } .footer.beforeAnimate .footer-connect { -webkit-transition: all 0.4s ease-in-out 0.8s; -moz-transition: all 0.4s ease-in-out 0.8s; -o-transition: all 0.4s ease-in-out 0.8s; transition: all 0.4s ease-in-out 0.8s; } .footer.beforeAnimate .footer-bottom { -webkit-transition: all 0.4s ease-in-out 1s; -moz-transition: all 0.4s ease-in-out 1s; -o-transition: all 0.4s ease-in-out 1s; transition: all 0.4s ease-in-out 1s; } .footer.beforeAnimate .footer-logos { -webkit-transition: all 0.4s ease-in-out 2s; -moz-transition: all 0.4s ease-in-out 2s; -o-transition: all 0.4s ease-in-out 2s; transition: all 0.4s ease-in-out 2s; } } @media screen and (min-width: 768px) { .footer.animate .footer-head-title { margin-top: 0; opacity: 1; } .footer.animate .footer-head-title span { margin-top: 0; opacity: 1; } .footer.animate .footer-main > div { opacity: 1; } .footer.animate .footer-main-left { right: 0; } .footer.animate .footer-main-center { top: 0; } .footer.animate .footer-main-right { left: 0; } .footer.animate .footer-connect, .footer.animate .footer-bottom, .footer.animate .footer-logos { margin-top: 0 !important; opacity: 1; } } .footer-head { padding-bottom: 0 !important; } @media screen and (min-width: 768px) { .footer-head { padding-bottom: 30px !important; } } .footer-head-title { text-align: center; font-size: 30px; display: block; position: relative; margin: 0 auto 1em; font-weight: 400; line-height: 1; } @media screen and (min-width: 768px) { .footer-head-title { font-size: 50px; } } @media screen and (min-width: 1280px) { .footer-head-title { font-size: 68px; } } .footer-head-title span { display: block; position: relative; font-weight: 600; } .footer-head-buttons { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; position: relative; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media screen and (min-width: 768px) { .footer-head-buttons:before { background: #FFF; top: 50%; left: 0; right: 0; display: block; position: absolute; content: ''; -webkit-transform: translateY(-50%); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: translateY(-50%); /* IE 9 */ -moz-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); /* Firefox 16+, IE 10+, Opera */ height: 2px; } } @media screen and (max-width: 1023px) { .footer-head-buttons { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-flow: row wrap; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; } } .footer-head-buttons a { margin-bottom: 10px; background: #0F537E; padding: 0 .5em; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; position: relative; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; } .footer-head-buttons a:after { display: none !important; } @media screen and (min-width: 480px) { .footer-head-buttons a { padding: 0 1em; } } @media screen and (min-width: 768px) { .footer-head-buttons a { padding: 0 2.5em; } .footer-head-buttons a.animate .footer-head-buttons-text, .footer-head-buttons a.animate .footer-head-buttons-icon { margin-top: 0; opacity: 1; } } @media screen and (min-width: 1280px) { .footer-head-buttons a { padding: 0 4em; } } @media screen and (max-width: 1023px) { .footer-head-buttons a:not(:last-child) { margin-right: 30px; } } html.no-touch .footer-head-buttons a:hover .footer-head-buttons-icon { -webkit-transform: scale(1.6); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: scale(1.6); /* IE 9 */ -moz-transform: scale(1.6); -o-transform: scale(1.6); transform: scale(1.6); /* Firefox 16+, IE 10+, Opera */ } html.no-touch .footer-head-buttons a:hover .footer-head-buttons-text:after { width: 100%; } .footer-head-buttons a span { display: block; position: relative; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; text-align: center; z-index: 1; } .footer-head-buttons-icon { -webkit-transition: all 0.75s ease-in-out 0s; -moz-transition: all 0.75s ease-in-out 0s; -o-transition: all 0.75s ease-in-out 0s; transition: all 0.75s ease-in-out 0s; width: 14px; height: 3px; margin-left: 1em; } @media screen and (min-width: 768px) { .footer-head-buttons-icon { margin-top: 40px; opacity: 0; } } .footer-head-buttons-icon:before, .footer-head-buttons-icon:after { -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; width: 100%; left: 0; background: #FFF; display: block; position: absolute; content: ''; height: 3px; } .footer-head-buttons-icon:before { top: 0; } .footer-head-buttons-icon:after { bottom: 0; -webkit-transform: rotate(90deg); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: rotate(90deg); /* IE 9 */ -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); /* Firefox 16+, IE 10+, Opera */ } .footer-head-buttons-text { color: #FFF; font-size: 16px; letter-spacing: 0.96px; -webkit-transition: all 0.75s ease-in-out 0s; -moz-transition: all 0.75s ease-in-out 0s; -o-transition: all 0.75s ease-in-out 0s; transition: all 0.75s ease-in-out 0s; text-transform: uppercase; font-weight: 600; } @media screen and (min-width: 768px) { .footer-head-buttons-text { font-size: 20px; margin-top: 40px; opacity: 0; } } @media screen and (min-width: 1280px) { .footer-head-buttons-text { font-size: 22px; } } .footer-head-buttons-text:after { display: block; position: absolute; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; background: #FFF; content: ''; bottom: 0; left: 0; height: 3px; width: 0; } .footer-main, .footer-bottom { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; position: relative; -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-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media screen and (min-width: 768px) { .footer-main, .footer-bottom { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; } } .footer-main > div, .footer-bottom > div { position: relative; } .footer-map { top: 0; left: 0; right: 0; bottom: 0; display: block; position: absolute; display: none; background: transparent url("/Images/img/footermap.png") no-repeat center center/contain; } .footer-map-pin { opacity: 0; top: 0; left: 0; cursor: pointer; z-index: 0; display: block; position: absolute; -webkit-transform: translate(-50%, -50%); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: translate(-50%, -50%); /* IE 9 */ -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); /* Firefox 16+, IE 10+, Opera */ } .footer-map-pin img { position: relative; width: 18px; top: 5px; -webkit-transform: scale(0.8); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: scale(0.8); /* IE 9 */ -moz-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); /* Firefox 16+, IE 10+, Opera */ -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; } @media screen and (min-width: 1280px) { .footer-map-pin img { width: 26px; } } html.no-touch .footer-map-pin:hover { z-index: 10; } html.no-touch .footer-map-pin:hover img { -webkit-transform: scale(1); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: scale(1); /* IE 9 */ -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); /* Firefox 16+, IE 10+, Opera */ top: 0; } html.no-touch .footer-map-pin:hover .footer-map-pin-pop { opacity: 1; } .footer-map-pin.beforeAnimate { -webkit-transition: all 0.75s ease-in-out 0.75s; -moz-transition: all 0.75s ease-in-out 0.75s; -o-transition: all 0.75s ease-in-out 0.75s; transition: all 0.75s ease-in-out 0.75s; } .footer-map-pin.animate { opacity: 1; } .footer-map-pin.show { z-index: 1; } .footer-map-pin.show img { -webkit-transform: scale(1); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: scale(1); /* IE 9 */ -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); /* Firefox 16+, IE 10+, Opera */ top: 0; } .footer-map-pin.show .footer-map-pin-pop { opacity: 1; } .footer-map-pin-pop { background-color: #FFF; width: 100px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; pointer-events: none; top: -80px; left: -55px; padding: 1em 1.5em; text-align: center; opacity: 0; color: #000; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; display: block; position: absolute; -webkit-box-shadow: 0px 0 3px 0px rgba(15, 83, 126, 0.25); -moz-box-shadow: 0px 0 3px 0px rgba(15, 83, 126, 0.25); box-shadow: 0px 0 3px 0px rgba(15, 83, 126, 0.25); } .footer-map-pin-pop:after, .footer-map-pin-pop:before { border: solid transparent; content: ""; height: 0; width: 0; position: absolute; left: 50%; pointer-events: none; border-width: 10px; margin-left: -10px; } .footer-map-pin-pop:before { top: -webkit-calc(100% + 1px); top: -moz-calc(100% + 1px); top: calc(100% + 1px); border-color: rgba(15, 83, 126, 0); border-top-color: rgba(15, 83, 126, 0.125); } .footer-map-pin-pop:after { top: 100%; border-color: rgba(255, 255, 255, 0); border-top-color: #FFF; } .footer-map-pin-pop-close { width: 20px; height: 20px; background: #FFF; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; right: 0; top: -8px; display: block; position: absolute; -webkit-box-shadow: 0px 0 3px 0px rgba(15, 83, 126, 0.25); -moz-box-shadow: 0px 0 3px 0px rgba(15, 83, 126, 0.25); box-shadow: 0px 0 3px 0px rgba(15, 83, 126, 0.25); } html.no-touch .footer-map-pin-pop-close { display: none; } .footer-map-pin.main { left: 50%; top: -webkit-calc(50% - 25px); top: -moz-calc(50% - 25px); top: calc(50% - 25px); } .footer-map-pin.main.animate { top: 50%; } .footer-map-pin.main img { width: 26px; } @media screen and (min-width: 1280px) { .footer-map-pin.main img { width: 34px; } } .footer-map-pin.small.one { left: 82%; top: 51% !important; } .footer-map-pin.small.one.animate { top: 25%; } .footer-map-pin.small.two { left: 25%; top: -webkit-calc(35% - 25px); top: -moz-calc(35% - 25px); top: calc(35% - 25px); } .footer-map-pin.small.two.animate { top: 35%; } .footer-map-pin.small.three { left: 38%; top: -webkit-calc(74% - 25px); top: -moz-calc(74% - 25px); top: calc(74% - 25px); } .footer-map-pin.small.three.animate { top: 74%; } .footer-map-pin.small.four { left: 5%; top: -webkit-calc(80% - 25px); top: -moz-calc(80% - 25px); top: calc(80% - 25px); } .footer-map-pin.small.four.animate { top: 80%; } .footer-main { padding-top: 0 !important; } @media screen and (min-width: 768px) { .footer-main { padding-top: 30px !important; } } .footer-main > div { width: 100%; } .footer-main > div ul { display: block; position: relative; } .footer-main > div ul li { display: block; position: relative; } .footer-main > div ul li a { display: -webkit-inline-box; display: -webkit-inline-flex; display: -moz-inline-box; display: -ms-inline-flexbox; display: inline-flex; position: relative; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; color: #FFF; font-size: 16px; } .footer-main > div ul li a:after { display: none; } @media screen and (min-width: 768px) { .footer-main > div ul li a { font-size: 18px; } } @media screen and (min-width: 1280px) { .footer-main > div ul li a { font-size: 20px; } } html.no-touch .footer-main > div ul li a:hover .lkicon { -webkit-transform: scale(1.6); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: scale(1.6); /* IE 9 */ -moz-transform: scale(1.6); -o-transform: scale(1.6); transform: scale(1.6); /* Firefox 16+, IE 10+, Opera */ } html.no-touch .footer-main > div ul li a:hover .lktext:after { width: 100%; } .footer-main > div ul li a span { display: block; position: relative; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; z-index: 1; } .footer-main > div ul li a span.lktext { color: #FFF; font-size: 14px; text-transform: uppercase; font-weight: 600; letter-spacing: 0.96px; } @media screen and (min-width: 768px) { .footer-main > div ul li a span.lktext { font-size: 18px; } } .footer-main > div ul li a span.lktext:after { display: block; position: absolute; content: ''; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; bottom: 0; left: 0; height: 3px; background: #FFF; width: 0; } .footer-main > div ul li a span.lkicon { width: 12px; height: 3px; margin-left: 1em; will-change: transform; } .footer-main > div ul li a span.lkicon:before, .footer-main > div ul li a span.lkicon:after { /* @include transition; */ width: 100%; left: 0; background: #FFF; display: block; position: absolute; content: ''; height: 3px; } .footer-main > div ul li a span.lkicon:before { top: 0; } .footer-main > div ul li a span.lkicon:after { bottom: 0; -webkit-transform: rotate(90deg); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: rotate(90deg); /* IE 9 */ -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); /* Firefox 16+, IE 10+, Opera */ } .footer-main-left { text-align: center; font-size: 16px; } .footer-main-left ul { margin: 30px 0 !important; } @media screen and (min-width: 768px) { .footer-main-left { text-align: right; font-size: 20px; width: -webkit-calc( (100% / 3) - 3em) !important; width: -moz-calc( (100% / 3) - 3em) !important; width: calc( (100% / 3) - 3em) !important; } .footer-main-left ul { margin: 0 !important; } } @media screen and (min-width: 1280px) { .footer-main-left { width: -webkit-calc( (100% / 3) - 5em) !important; width: -moz-calc( (100% / 3) - 5em) !important; width: calc( (100% / 3) - 5em) !important; } } .footer-main-center { display: none; width: -webkit-calc( 100% / 3) !important; width: -moz-calc( 100% / 3) !important; width: calc( 100% / 3) !important; padding-top: -webkit-calc( 100% / 3); padding-top: -moz-calc( 100% / 3); padding-top: calc( 100% / 3); } @media screen and (min-width: 768px) { .footer-main-center { display: block; } .footer-main-center.lazyloaded .footer-map { display: block; } } .footer-main-right { text-align: center; background: #093960; padding: 30px 0; left: -20px; width: -webkit-calc(100% + 40px) !important; width: -moz-calc(100% + 40px) !important; width: calc(100% + 40px) !important; } @media screen and (min-width: 768px) { .footer-main-right { width: -webkit-calc( (100% / 3) - 3em) !important; width: -moz-calc( (100% / 3) - 3em) !important; width: calc( (100% / 3) - 3em) !important; padding: 0; text-align: left; background: transparent; left: auto; } } @media screen and (min-width: 1280px) { .footer-main-right { width: -webkit-calc( (100% / 3) - 5em) !important; width: -moz-calc( (100% / 3) - 5em) !important; width: calc( (100% / 3) - 5em) !important; } } .footer-main-right ul { display: -webkit-box !important; display: -webkit-flex !important; display: -moz-box !important; display: -ms-flexbox !important; display: flex !important; -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; } .footer-main-right ul li { margin: 1em 0; width: 50%; } @media screen and (min-width: 768px) { .footer-main-right ul li { width: 100%; } .footer-main-right ul li:first-of-type { margin-top: 0; } .footer-main-right ul li:last-of-type { margin-bottom: 0; } } .footer-connect { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; position: relative; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-top: 0 !important; } .footer-connect ul { display: -webkit-inline-box; display: -webkit-inline-flex; display: -moz-inline-box; display: -ms-inline-flexbox; display: inline-flex; position: relative; -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; } @media screen and (min-width: 768px) { .footer-connect ul { -webkit-box-pack: start; -webkit-justify-content: flex-start; -moz-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } } .footer-connect ul > li { display: inline-block; position: relative; vertical-align: middle; margin: 0 1em; } .footer-connect ul > li:first-of-type { margin-bottom: 1em; } .footer-connect ul > li:last-of-type { margin-top: 1em; } .footer-connect ul > li:first-of-type, .footer-connect ul > li:last-of-type { width: 100%; text-align: center; } @media screen and (min-width: 768px) { .footer-connect ul > li:first-of-type, .footer-connect ul > li:last-of-type { width: auto; margin: 0 1em; } } .footer-connect ul > li span { font-size: 18px; } @media screen and (min-width: 1280px) { .footer-connect ul > li span { font-size: 22px; } } .footer-connect ul > li a:after { display: none; } .footer-connect-social { display: block; position: relative; width: 20px; height: 20px; } .footer-connect-social i { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url("/Images/img/icons/TiarcNews_w@2x.png") no-repeat center center/contain; display: none; } @media screen and (min-width: 1280px) { .footer-connect-social { width: 24px; height: 24px; } } html.no-touch .footer-connect-social:hover { -webkit-transform: scale(1.15); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: scale(1.15); /* IE 9 */ -moz-transform: scale(1.15); -o-transform: scale(1.15); transform: scale(1.15); /* Firefox 16+, IE 10+, Opera */ } .footer-connect-social-fb i { background-image: url("/Images/img/icons/Facebook_w@2x.png"); } .footer-connect-social-tw i { background-image: url("/Images/img/icons/Twitter_w@2x.png"); } .footer-connect-social-it i { background-image: url("/Images/img/icons/Instagram_w@2x.png"); } .footer-connect-social-yt i { background-image: url("/Images/img/icons/Youtube_w@2x.png"); } .footer-connect-social-sc i { background-image: url("/Images/img/icons/SoundCloudTrack_w@2x.png"); } .footer-connect-social-fk i { background-image: url("/Images/img/icons/Flickr_w@2x.png"); } .footer-connect-social-is i { background-image: url("/Images/img/icons/Issuu_w@2x.png"); } .footer-connect-social-ln i { background-image: url("/Images/img/icons/linkedin@2x.png"); } .footer-connect-social.lazyloaded i { display: block; } .footer-bottom { -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -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; border-top: 1px solid #3a7295; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; } @media screen and (min-width: 768px) { .footer-bottom { -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row; padding: 40px 0 !important; } } .footer-bottom > div { position: relative; margin-bottom: 1.5em; } @media screen and (min-width: 768px) { .footer-bottom > div { margin: 0; } } .footer-bottom ul { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; position: relative; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media screen and (min-width: 768px) { .footer-bottom ul { display: block; position: relative; } } .footer-bottom ul li { display: inline-block; position: relative; vertical-align: middle; } .footer-bottom a { color: #FFF; display: inline-block; position: relative; vertical-align: top; } .footer-bottom a:after { height: 2px; } .footer-bottom-left, .footer-bottom-right { font-size: 14px; font-weight: 400; } @media screen and (min-width: 768px) { .footer-bottom-left, .footer-bottom-right { font-size: 16px; } } .footer-bottom-left { -webkit-box-ordinal-group: 3; -webkit-order: 2; -moz-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; text-align: center; } .footer-bottom-left li:first-of-type { margin-right: 2em; } @media screen and (min-width: 768px) { .footer-bottom-left { width: 40%; text-align: left; -webkit-box-ordinal-group: 2; -webkit-order: 1; -moz-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .footer-bottom-left li { display: block !important; } } @media screen and (min-width: 1280px) { .footer-bottom-left li { display: inline-block !important; } } .footer-bottom-center { text-align: center; cursor: pointer; -webkit-box-ordinal-group: 2; -webkit-order: 1; -moz-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; padding-top: 30px; } @media screen and (min-width: 768px) { .footer-bottom-center { -webkit-box-ordinal-group: 3; -webkit-order: 2; -moz-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } } .footer-bottom-center span { cursor: pointer; outline: 0; } .footer-bottom-center-gotoparr { width: 2px; height: 16px; background: #FFF; left: 50%; top: 4px; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; z-index: 1; -webkit-transform: translateX(-50%); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: translateX(-50%); /* IE 9 */ -moz-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); /* Firefox 16+, IE 10+, Opera */ display: block; position: absolute; } .footer-bottom-center-gotoparr:after { border: 2px solid #FFF; width: 6px; height: 6px; border-right: none; border-bottom: none; content: ''; display: block; position: absolute; top: 1px; left: 50%; -webkit-transform: translateX(-50%) rotate(45deg); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: translateX(-50%) rotate(45deg); /* IE 9 */ -moz-transform: translateX(-50%) rotate(45deg); -o-transform: translateX(-50%) rotate(45deg); transform: translateX(-50%) rotate(45deg); /* Firefox 16+, IE 10+, Opera */ } .footer-bottom-center-gotoptxt { color: #FFF; font-size: 16px; display: block; position: relative; text-transform: uppercase; font-weight: 700; } @media screen and (min-width: 768px) { .footer-bottom-center-gotoptxt { font-size: 20px; } } .footer-bottom-center-gotoptxt:after { display: block; position: absolute; content: ''; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; bottom: 0; left: 50%; height: 3px; background: #FFF; width: 0; } html.no-touch .footer-bottom-center:hover .footer-bottom-center-gotoparr { height: 24px; top: -4px; } html.no-touch .footer-bottom-center:hover .footer-bottom-center-gotoptxt:after { width: 100%; left: 0; } .footer-bottom-right { -webkit-box-ordinal-group: 4; -webkit-order: 3; -moz-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; text-align: center; } @media screen and (min-width: 768px) { .footer-bottom-right { text-align: right; } } @media screen and (min-width: 1024px) { .footer-bottom-right { width: 25%; padding-left: 15%; } } @media screen and (min-width: 1280px) { .footer-bottom-right { width: 40%; padding: 0; } } .footer-logos { background-color: #FFF; color: #707070; } @media screen and (min-width: 768px) { .footer-logos { padding: 20px 0 !important; } } .footer-logos-wrapper .owl-stage { 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; } .footer-logos-item { display: block; position: relative; height: 70px; } .footer-logos-item:after { display: none !important; } .footer-logos-item img { -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; width: auto !important; top: 50%; left: 50%; max-height: 100%; display: block; position: absolute; -webkit-transform: translate(-50%, -50%); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: translate(-50%, -50%); /* IE 9 */ -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); /* Firefox 16+, IE 10+, Opera */ } .footer-logos-item img.onHover { opacity: 0; } html.no-touch .footer-logos-item img:hover.onMain { opacity: 0; } html.no-touch .footer-logos-item img:hover.onHover { opacity: 1; } /** * Owl Carousel v2.3.4 * Copyright 2013-2018 David Deutsch * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE */ /******************************************************** * Owl Components ********************************************************/ /** * Owl Carousel v2.3.4 * Copyright 2013-2018 David Deutsch * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE */ /* * 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; -webkit-border-radius: 3px; -moz-border-radius: 3px; 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; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; } .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span { background: #869791; } /*! Animate.css - http://daneden.me/animate Licensed under the MIT license Copyright (c) 2013 Daniel Eden Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ .animated { -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animated.hinge { -webkit-animation-duration: 2s; -moz-animation-duration: 2s; -o-animation-duration: 2s; animation-duration: 2s; } @-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); transform: translateY(-15px); } } @-moz-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); -moz-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); -moz-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); -ms-transform: translateY(-15px); -moz-transform: translateY(-15px); transform: translateY(-15px); } } @-o-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); -o-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); -ms-transform: translateY(-15px); -o-transform: translateY(-15px); transform: translateY(-15px); } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); -moz-transform: translateY(-30px); -o-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); -ms-transform: translateY(-15px); -moz-transform: translateY(-15px); -o-transform: translateY(-15px); transform: translateY(-15px); } } .bounce { -webkit-animation-name: bounce; -moz-animation-name: bounce; -o-animation-name: bounce; animation-name: bounce; } @-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; } } .flash { -webkit-animation-name: flash; -moz-animation-name: flash; -o-animation-name: flash; animation-name: flash; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @-moz-keyframes pulse { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); -moz-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); -moz-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); -moz-transform: scale(1); transform: scale(1); } } @-o-keyframes pulse { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } @keyframes pulse { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } .pulse { -webkit-animation-name: pulse; -moz-animation-name: pulse; -o-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes rubberBand { 0% { -webkit-transform: scale(1); transform: scale(1); } 30% { -webkit-transform: scaleX(1.25) scaleY(0.75); transform: scaleX(1.25) scaleY(0.75); } 40% { -webkit-transform: scaleX(0.75) scaleY(1.25); transform: scaleX(0.75) scaleY(1.25); } 60% { -webkit-transform: scaleX(1.15) scaleY(0.85); transform: scaleX(1.15) scaleY(0.85); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @-moz-keyframes rubberBand { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); -moz-transform: scale(1); transform: scale(1); } 30% { -webkit-transform: scaleX(1.25) scaleY(0.75); -ms-transform: scaleX(1.25) scaleY(0.75); -moz-transform: scaleX(1.25) scaleY(0.75); transform: scaleX(1.25) scaleY(0.75); } 40% { -webkit-transform: scaleX(0.75) scaleY(1.25); -ms-transform: scaleX(0.75) scaleY(1.25); -moz-transform: scaleX(0.75) scaleY(1.25); transform: scaleX(0.75) scaleY(1.25); } 60% { -webkit-transform: scaleX(1.15) scaleY(0.85); -ms-transform: scaleX(1.15) scaleY(0.85); -moz-transform: scaleX(1.15) scaleY(0.85); transform: scaleX(1.15) scaleY(0.85); } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); -moz-transform: scale(1); transform: scale(1); } } @-o-keyframes rubberBand { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 30% { -webkit-transform: scaleX(1.25) scaleY(0.75); -ms-transform: scaleX(1.25) scaleY(0.75); -o-transform: scaleX(1.25) scaleY(0.75); transform: scaleX(1.25) scaleY(0.75); } 40% { -webkit-transform: scaleX(0.75) scaleY(1.25); -ms-transform: scaleX(0.75) scaleY(1.25); -o-transform: scaleX(0.75) scaleY(1.25); transform: scaleX(0.75) scaleY(1.25); } 60% { -webkit-transform: scaleX(1.15) scaleY(0.85); -ms-transform: scaleX(1.15) scaleY(0.85); -o-transform: scaleX(1.15) scaleY(0.85); transform: scaleX(1.15) scaleY(0.85); } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } @keyframes rubberBand { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 30% { -webkit-transform: scaleX(1.25) scaleY(0.75); -ms-transform: scaleX(1.25) scaleY(0.75); -moz-transform: scaleX(1.25) scaleY(0.75); -o-transform: scaleX(1.25) scaleY(0.75); transform: scaleX(1.25) scaleY(0.75); } 40% { -webkit-transform: scaleX(0.75) scaleY(1.25); -ms-transform: scaleX(0.75) scaleY(1.25); -moz-transform: scaleX(0.75) scaleY(1.25); -o-transform: scaleX(0.75) scaleY(1.25); transform: scaleX(0.75) scaleY(1.25); } 60% { -webkit-transform: scaleX(1.15) scaleY(0.85); -ms-transform: scaleX(1.15) scaleY(0.85); -moz-transform: scaleX(1.15) scaleY(0.85); -o-transform: scaleX(1.15) scaleY(0.85); transform: scaleX(1.15) scaleY(0.85); } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } .rubberBand { -webkit-animation-name: rubberBand; -moz-animation-name: rubberBand; -o-animation-name: rubberBand; animation-name: rubberBand; } @-webkit-keyframes shake { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); transform: translateX(10px); } } @-moz-keyframes shake { 0%, 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); -moz-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); -moz-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); -moz-transform: translateX(10px); transform: translateX(10px); } } @-o-keyframes shake { 0%, 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); -o-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); -o-transform: translateX(10px); transform: translateX(10px); } } @keyframes shake { 0%, 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); -moz-transform: translateX(-10px); -o-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); -moz-transform: translateX(10px); -o-transform: translateX(10px); transform: translateX(10px); } } .shake { -webkit-animation-name: shake; -moz-animation-name: shake; -o-animation-name: shake; animation-name: shake; } @-webkit-keyframes swing { 20% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @-moz-keyframes swing { 20% { -webkit-transform: rotate(15deg); -ms-transform: rotate(15deg); -moz-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); -ms-transform: rotate(-10deg); -moz-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); -ms-transform: rotate(5deg); -moz-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); -ms-transform: rotate(-5deg); -moz-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); transform: rotate(0deg); } } @-o-keyframes swing { 20% { -webkit-transform: rotate(15deg); -ms-transform: rotate(15deg); -o-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); -ms-transform: rotate(-10deg); -o-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); -ms-transform: rotate(5deg); -o-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); -ms-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes swing { 20% { -webkit-transform: rotate(15deg); -ms-transform: rotate(15deg); -moz-transform: rotate(15deg); -o-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); -ms-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -o-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); -ms-transform: rotate(5deg); -moz-transform: rotate(5deg); -o-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); -ms-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } } .swing { -webkit-transform-origin: top center; -ms-transform-origin: top center; -moz-transform-origin: top center; -o-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; -moz-animation-name: swing; -o-animation-name: swing; animation-name: swing; } @-webkit-keyframes tada { 0% { -webkit-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } } @-moz-keyframes tada { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); -moz-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); -ms-transform: scale(0.9) rotate(-3deg); -moz-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); -ms-transform: scale(1.1) rotate(3deg); -moz-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); -ms-transform: scale(1.1) rotate(-3deg); -moz-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); -ms-transform: scale(1) rotate(0); -moz-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } } @-o-keyframes tada { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); -ms-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); -ms-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); -ms-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); -ms-transform: scale(1) rotate(0); -o-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } } @keyframes tada { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); -ms-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); -ms-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); -ms-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); -ms-transform: scale(1) rotate(0); -moz-transform: scale(1) rotate(0); -o-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } } .tada { -webkit-animation-name: tada; -moz-animation-name: tada; -o-animation-name: tada; animation-name: tada; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes wobble { 0% { -webkit-transform: translateX(0%); transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); transform: translateX(0%); } } @-moz-keyframes wobble { 0% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); -moz-transform: translateX(0%); transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); -ms-transform: translateX(-25%) rotate(-5deg); -moz-transform: translateX(-25%) rotate(-5deg); transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); -ms-transform: translateX(20%) rotate(3deg); -moz-transform: translateX(20%) rotate(3deg); transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); -ms-transform: translateX(-15%) rotate(-3deg); -moz-transform: translateX(-15%) rotate(-3deg); transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); -ms-transform: translateX(10%) rotate(2deg); -moz-transform: translateX(10%) rotate(2deg); transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); -ms-transform: translateX(-5%) rotate(-1deg); -moz-transform: translateX(-5%) rotate(-1deg); transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); -moz-transform: translateX(0%); transform: translateX(0%); } } @-o-keyframes wobble { 0% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); -ms-transform: translateX(-25%) rotate(-5deg); -o-transform: translateX(-25%) rotate(-5deg); transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); -ms-transform: translateX(20%) rotate(3deg); -o-transform: translateX(20%) rotate(3deg); transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); -ms-transform: translateX(-15%) rotate(-3deg); -o-transform: translateX(-15%) rotate(-3deg); transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); -ms-transform: translateX(10%) rotate(2deg); -o-transform: translateX(10%) rotate(2deg); transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); -ms-transform: translateX(-5%) rotate(-1deg); -o-transform: translateX(-5%) rotate(-1deg); transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } } @keyframes wobble { 0% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); -moz-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); -ms-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); -ms-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); -ms-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); -ms-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); -ms-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%); -ms-transform: translateX(0%); -moz-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } } .wobble { -webkit-animation-name: wobble; -moz-animation-name: wobble; -o-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(0.3); transform: scale(0.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); transform: scale(1.05); } 70% { -webkit-transform: scale(0.9); transform: scale(0.9); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @-moz-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(0.3); -ms-transform: scale(0.3); -moz-transform: scale(0.3); transform: scale(0.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); -ms-transform: scale(1.05); -moz-transform: scale(1.05); transform: scale(1.05); } 70% { -webkit-transform: scale(0.9); -ms-transform: scale(0.9); -moz-transform: scale(0.9); transform: scale(0.9); } 100% { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); -moz-transform: scale(1); transform: scale(1); } } @-o-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(0.3); -ms-transform: scale(0.3); -o-transform: scale(0.3); transform: scale(0.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } 70% { -webkit-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); } 100% { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } @keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(0.3); -ms-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); -ms-transform: scale(1.05); -moz-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } 70% { -webkit-transform: scale(0.9); -ms-transform: scale(0.9); -moz-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); } 100% { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } .bounceIn { -webkit-animation-name: bounceIn; -moz-animation-name: bounceIn; -o-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @-moz-keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); -moz-transform: translateY(-2000px); transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); -moz-transform: translateY(30px); transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); -moz-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); -moz-transform: translateY(0); transform: translateY(0); } } @-o-keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); -o-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); -moz-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); -moz-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); -moz-transform: translateY(-10px); -o-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } .bounceInDown { -webkit-animation-name: bounceInDown; -moz-animation-name: bounceInDown; -o-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @-moz-keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); -moz-transform: translateX(-2000px); transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); -ms-transform: translateX(30px); -moz-transform: translateX(30px); transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); -moz-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); -moz-transform: translateX(0); transform: translateX(0); } } @-o-keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); -ms-transform: translateX(30px); -o-transform: translateX(30px); transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); -o-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); -moz-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); -ms-transform: translateX(30px); -moz-transform: translateX(30px); -o-transform: translateX(30px); transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); -moz-transform: translateX(-10px); -o-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } .bounceInLeft { -webkit-animation-name: bounceInLeft; -moz-animation-name: bounceInLeft; -o-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @-moz-keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); -moz-transform: translateX(2000px); transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); -ms-transform: translateX(-30px); -moz-transform: translateX(-30px); transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); -moz-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); -moz-transform: translateX(0); transform: translateX(0); } } @-o-keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); -ms-transform: translateX(-30px); -o-transform: translateX(-30px); transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); -o-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); -moz-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); -ms-transform: translateX(-30px); -moz-transform: translateX(-30px); -o-transform: translateX(-30px); transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); -moz-transform: translateX(10px); -o-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } .bounceInRight { -webkit-animation-name: bounceInRight; -moz-animation-name: bounceInRight; -o-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @-moz-keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); -moz-transform: translateY(2000px); transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); -moz-transform: translateY(-30px); transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); -ms-transform: translateY(10px); -moz-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); -moz-transform: translateY(0); transform: translateY(0); } } @-o-keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); -o-transform: translateY(-30px); transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); -ms-transform: translateY(10px); -o-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); -moz-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); -moz-transform: translateY(-30px); -o-transform: translateY(-30px); transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); -ms-transform: translateY(10px); -moz-transform: translateY(10px); -o-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } .bounceInUp { -webkit-animation-name: bounceInUp; -moz-animation-name: bounceInUp; -o-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes bounceOut { 0% { -webkit-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(0.95); transform: scale(0.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(0.3); transform: scale(0.3); } } @-moz-keyframes bounceOut { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); -moz-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(0.95); -ms-transform: scale(0.95); -moz-transform: scale(0.95); transform: scale(0.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); -moz-transform: scale(1.1); transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(0.3); -ms-transform: scale(0.3); -moz-transform: scale(0.3); transform: scale(0.3); } } @-o-keyframes bounceOut { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(0.95); -ms-transform: scale(0.95); -o-transform: scale(0.95); transform: scale(0.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(0.3); -ms-transform: scale(0.3); -o-transform: scale(0.3); transform: scale(0.3); } } @keyframes bounceOut { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(0.95); -ms-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); -ms-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); -ms-transform: scale(0.3); -moz-transform: scale(0.3); -o-transform: scale(0.3); transform: scale(0.3); } } .bounceOut { -webkit-animation-name: bounceOut; -moz-animation-name: bounceOut; -o-animation-name: bounceOut; animation-name: bounceOut; } @-webkit-keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } } @-moz-keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); -moz-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); -moz-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); -moz-transform: translateY(2000px); transform: translateY(2000px); } } @-o-keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); -o-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } } @keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); -moz-transform: translateY(-20px); -o-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); -moz-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } } .bounceOutDown { -webkit-animation-name: bounceOutDown; -moz-animation-name: bounceOutDown; -o-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } } @-moz-keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); -moz-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); -moz-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); -moz-transform: translateX(-2000px); transform: translateX(-2000px); } } @-o-keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); -o-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); -moz-transform: translateX(20px); -o-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); -moz-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; -moz-animation-name: bounceOutLeft; -o-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } } @-moz-keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); -moz-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); -moz-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); -moz-transform: translateX(2000px); transform: translateX(2000px); } } @-o-keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); -moz-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); -moz-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } } .bounceOutRight { -webkit-animation-name: bounceOutRight; -moz-animation-name: bounceOutRight; -o-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-webkit-keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } } @-moz-keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); -moz-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); -moz-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); -moz-transform: translateY(-2000px); transform: translateY(-2000px); } } @-o-keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); -moz-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); -moz-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } } .bounceOutUp { -webkit-animation-name: bounceOutUp; -moz-animation-name: bounceOutUp; -o-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-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; } } .fadeIn { -webkit-animation-name: fadeIn; -moz-animation-name: fadeIn; -o-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @-moz-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); -moz-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); -moz-transform: translateY(0); transform: translateY(0); } } @-o-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); -o-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); -moz-transform: translateY(-20px); -o-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } .fadeInDown { -webkit-animation-name: fadeInDown; -moz-animation-name: fadeInDown; -o-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @-moz-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); -moz-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); -moz-transform: translateY(0); transform: translateY(0); } } @-o-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); -moz-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; -moz-animation-name: fadeInDownBig; -o-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @-moz-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); -moz-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); -moz-transform: translateX(0); transform: translateX(0); } } @-o-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); -moz-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } .fadeInLeft { -webkit-animation-name: fadeInLeft; -moz-animation-name: fadeInLeft; -o-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @-moz-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); -moz-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); -moz-transform: translateX(0); transform: translateX(0); } } @-o-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); -moz-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; -moz-animation-name: fadeInLeftBig; -o-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @-moz-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); -moz-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); -moz-transform: translateX(0); transform: translateX(0); } } @-o-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); -o-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); -moz-transform: translateX(20px); -o-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } .fadeInRight { -webkit-animation-name: fadeInRight; -moz-animation-name: fadeInRight; -o-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @-moz-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); -moz-transform: translateX(2000px); transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); -moz-transform: translateX(0); transform: translateX(0); } } @-o-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); -moz-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; -moz-animation-name: fadeInRightBig; -o-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @-moz-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); -moz-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); -moz-transform: translateY(0); transform: translateY(0); } } @-o-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); -moz-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } .fadeInUp { -webkit-animation-name: fadeInUp; -moz-animation-name: fadeInUp; -o-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @-moz-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); -moz-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); -moz-transform: translateY(0); transform: translateY(0); } } @-o-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); -moz-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; -moz-animation-name: fadeInUpBig; -o-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-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; } } .fadeOut { -webkit-animation-name: fadeOut; -moz-animation-name: fadeOut; -o-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } } @-moz-keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); -moz-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); -moz-transform: translateY(20px); transform: translateY(20px); } } @-o-keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); } } @keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); -moz-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; -moz-animation-name: fadeOutDown; -o-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } } @-moz-keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); -moz-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); -moz-transform: translateY(2000px); transform: translateY(2000px); } } @-o-keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } } @keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); -moz-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; -moz-animation-name: fadeOutDownBig; -o-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); } } @-moz-keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); -moz-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); -moz-transform: translateX(-20px); transform: translateX(-20px); } } @-o-keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); } } @keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); -moz-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; -moz-animation-name: fadeOutLeft; -o-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } } @-moz-keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); -moz-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); -moz-transform: translateX(-2000px); transform: translateX(-2000px); } } @-o-keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); -moz-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; -moz-animation-name: fadeOutLeftBig; -o-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); transform: translateX(20px); } } @-moz-keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); -moz-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); -moz-transform: translateX(20px); transform: translateX(20px); } } @-o-keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); -o-transform: translateX(20px); transform: translateX(20px); } } @keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); -moz-transform: translateX(20px); -o-transform: translateX(20px); transform: translateX(20px); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; -moz-animation-name: fadeOutRight; -o-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } } @-moz-keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); -moz-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); -moz-transform: translateX(2000px); transform: translateX(2000px); } } @-o-keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); -moz-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; -moz-animation-name: fadeOutRightBig; -o-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } } @-moz-keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); -moz-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); -moz-transform: translateY(-20px); transform: translateY(-20px); } } @-o-keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); -o-transform: translateY(-20px); transform: translateY(-20px); } } @keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); -moz-transform: translateY(-20px); -o-transform: translateY(-20px); transform: translateY(-20px); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; -moz-animation-name: fadeOutUp; -o-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } } @-moz-keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); -moz-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); -moz-transform: translateY(-2000px); transform: translateY(-2000px); } } @-o-keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); -moz-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; -moz-animation-name: fadeOutUpBig; -o-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-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) translateZ(0) rotateY(360deg) scale(0.95); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @-moz-keyframes flip { 0% { -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -moz-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -moz-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -moz-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; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95); -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95); -moz-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -moz-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @-o-keyframes flip { 0% { -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -webkit-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) scale(1); -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -webkit-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); -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -webkit-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95); -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95); -webkit-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -webkit-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { 0% { -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -moz-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -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) scale(1); -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -moz-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -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); -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -moz-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) translateZ(0) rotateY(360deg) scale(0.95); -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95); -moz-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95); transform: perspective(400px) translateZ(0) 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) translateZ(0) rotateY(360deg) scale(1); -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -moz-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); transform: perspective(400px) translateZ(0) rotateY(360deg) 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; } } .animated.flip { -webkit-backface-visibility: visible; -ms-backface-visibility: visible; -moz-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; -moz-animation-name: flip; -o-animation-name: flip; animation-name: flip; } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } } @-moz-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); -ms-transform: perspective(400px) rotateX(90deg); -moz-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); -ms-transform: perspective(400px) rotateX(-10deg); -moz-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); -ms-transform: perspective(400px) rotateX(10deg); -moz-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); -ms-transform: perspective(400px) rotateX(0deg); -moz-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } } @-o-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); -ms-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); -ms-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); -ms-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); -ms-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } } @keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); -ms-transform: perspective(400px) rotateX(90deg); -moz-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); -ms-transform: perspective(400px) rotateX(-10deg); -moz-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); -ms-transform: perspective(400px) rotateX(10deg); -moz-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); -ms-transform: perspective(400px) rotateX(0deg); -moz-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } } .flipInX { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; -moz-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; -moz-animation-name: flipInX; -o-animation-name: flipInX; animation-name: flipInX; } @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); transform: perspective(400px) rotateY(-10deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); } 100% { -webkit-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } } @-moz-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); -ms-transform: perspective(400px) rotateY(90deg); -moz-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); -ms-transform: perspective(400px) rotateY(-10deg); -moz-transform: perspective(400px) rotateY(-10deg); transform: perspective(400px) rotateY(-10deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); -ms-transform: perspective(400px) rotateY(10deg); -moz-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); } 100% { -webkit-transform: perspective(400px) rotateY(0deg); -ms-transform: perspective(400px) rotateY(0deg); -moz-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } } @-o-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); -ms-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); -ms-transform: perspective(400px) rotateY(-10deg); transform: perspective(400px) rotateY(-10deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); -ms-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); } 100% { -webkit-transform: perspective(400px) rotateY(0deg); -ms-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } } @keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); -ms-transform: perspective(400px) rotateY(90deg); -moz-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); -ms-transform: perspective(400px) rotateY(-10deg); -moz-transform: perspective(400px) rotateY(-10deg); transform: perspective(400px) rotateY(-10deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); -ms-transform: perspective(400px) rotateY(10deg); -moz-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); } 100% { -webkit-transform: perspective(400px) rotateY(0deg); -ms-transform: perspective(400px) rotateY(0deg); -moz-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } } .flipInY { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; -moz-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; -moz-animation-name: flipInY; -o-animation-name: flipInY; animation-name: flipInY; } @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } @-moz-keyframes flipOutX { 0% { -webkit-transform: perspective(400px) rotateX(0deg); -ms-transform: perspective(400px) rotateX(0deg); -moz-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateX(90deg); -ms-transform: perspective(400px) rotateX(90deg); -moz-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } @-o-keyframes flipOutX { 0% { -webkit-transform: perspective(400px) rotateX(0deg); -ms-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateX(90deg); -ms-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } @keyframes flipOutX { 0% { -webkit-transform: perspective(400px) rotateX(0deg); -ms-transform: perspective(400px) rotateX(0deg); -moz-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateX(90deg); -ms-transform: perspective(400px) rotateX(90deg); -moz-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } .flipOutX { -webkit-animation-name: flipOutX; -moz-animation-name: flipOutX; -o-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; -moz-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flipOutY { 0% { -webkit-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } } @-moz-keyframes flipOutY { 0% { -webkit-transform: perspective(400px) rotateY(0deg); -ms-transform: perspective(400px) rotateY(0deg); -moz-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateY(90deg); -ms-transform: perspective(400px) rotateY(90deg); -moz-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } } @-o-keyframes flipOutY { 0% { -webkit-transform: perspective(400px) rotateY(0deg); -ms-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateY(90deg); -ms-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } } @keyframes flipOutY { 0% { -webkit-transform: perspective(400px) rotateY(0deg); -ms-transform: perspective(400px) rotateY(0deg); -moz-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateY(90deg); -ms-transform: perspective(400px) rotateY(90deg); -moz-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } } .flipOutY { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; -moz-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; -moz-animation-name: flipOutY; -o-animation-name: flipOutY; animation-name: flipOutY; } @-webkit-keyframes lightSpeedIn { 0% { -webkit-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: translateX(-20%) skewX(30deg); transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -webkit-transform: translateX(0%) skewX(-15deg); transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -webkit-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } } @-moz-keyframes lightSpeedIn { 0% { -webkit-transform: translateX(100%) skewX(-30deg); -ms-transform: translateX(100%) skewX(-30deg); -moz-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: translateX(-20%) skewX(30deg); -ms-transform: translateX(-20%) skewX(30deg); -moz-transform: translateX(-20%) skewX(30deg); transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -webkit-transform: translateX(0%) skewX(-15deg); -ms-transform: translateX(0%) skewX(-15deg); -moz-transform: translateX(0%) skewX(-15deg); transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -webkit-transform: translateX(0%) skewX(0deg); -ms-transform: translateX(0%) skewX(0deg); -moz-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } } @-o-keyframes lightSpeedIn { 0% { -webkit-transform: translateX(100%) skewX(-30deg); -ms-transform: translateX(100%) skewX(-30deg); -o-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: translateX(-20%) skewX(30deg); -ms-transform: translateX(-20%) skewX(30deg); -o-transform: translateX(-20%) skewX(30deg); transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -webkit-transform: translateX(0%) skewX(-15deg); -ms-transform: translateX(0%) skewX(-15deg); -o-transform: translateX(0%) skewX(-15deg); transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -webkit-transform: translateX(0%) skewX(0deg); -ms-transform: translateX(0%) skewX(0deg); -o-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } } @keyframes lightSpeedIn { 0% { -webkit-transform: translateX(100%) skewX(-30deg); -ms-transform: translateX(100%) skewX(-30deg); -moz-transform: translateX(100%) skewX(-30deg); -o-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: translateX(-20%) skewX(30deg); -ms-transform: translateX(-20%) skewX(30deg); -moz-transform: translateX(-20%) skewX(30deg); -o-transform: translateX(-20%) skewX(30deg); transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -webkit-transform: translateX(0%) skewX(-15deg); -ms-transform: translateX(0%) skewX(-15deg); -moz-transform: translateX(0%) skewX(-15deg); -o-transform: translateX(0%) skewX(-15deg); transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -webkit-transform: translateX(0%) skewX(0deg); -ms-transform: translateX(0%) skewX(0deg); -moz-transform: translateX(0%) skewX(0deg); -o-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; -moz-animation-name: lightSpeedIn; -o-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedOut { 0% { -webkit-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -webkit-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } } @-moz-keyframes lightSpeedOut { 0% { -webkit-transform: translateX(0%) skewX(0deg); -ms-transform: translateX(0%) skewX(0deg); -moz-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -webkit-transform: translateX(100%) skewX(-30deg); -ms-transform: translateX(100%) skewX(-30deg); -moz-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } } @-o-keyframes lightSpeedOut { 0% { -webkit-transform: translateX(0%) skewX(0deg); -ms-transform: translateX(0%) skewX(0deg); -o-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -webkit-transform: translateX(100%) skewX(-30deg); -ms-transform: translateX(100%) skewX(-30deg); -o-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } } @keyframes lightSpeedOut { 0% { -webkit-transform: translateX(0%) skewX(0deg); -ms-transform: translateX(0%) skewX(0deg); -moz-transform: translateX(0%) skewX(0deg); -o-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -webkit-transform: translateX(100%) skewX(-30deg); -ms-transform: translateX(100%) skewX(-30deg); -moz-transform: translateX(100%) skewX(-30deg); -o-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; -moz-animation-name: lightSpeedOut; -o-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -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 rotateIn { 0% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0; } 100% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @-moz-keyframes rotateIn { 0% { -webkit-transform-origin: center center; -ms-transform-origin: center center; -moz-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(-200deg); -ms-transform: rotate(-200deg); -moz-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0; } 100% { -webkit-transform-origin: center center; -ms-transform-origin: center center; -moz-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); -ms-transform: rotate(0); -moz-transform: rotate(0); transform: rotate(0); opacity: 1; } } @-o-keyframes rotateIn { 0% { -webkit-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(-200deg); -ms-transform: rotate(-200deg); -o-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0; } 100% { -webkit-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateIn { 0% { -webkit-transform-origin: center center; -ms-transform-origin: center center; -moz-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(-200deg); -ms-transform: rotate(-200deg); -moz-transform: rotate(-200deg); -o-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0; } 100% { -webkit-transform-origin: center center; -ms-transform-origin: center center; -moz-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); -ms-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateIn { -webkit-animation-name: rotateIn; -moz-animation-name: rotateIn; -o-animation-name: rotateIn; animation-name: rotateIn; } @-webkit-keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @-moz-keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; -moz-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -moz-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; -moz-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); -moz-transform: rotate(0); transform: rotate(0); opacity: 1; } } @-o-keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; -moz-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; -moz-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; -moz-animation-name: rotateInDownLeft; -o-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } @-webkit-keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @-moz-keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; -moz-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); -moz-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; -moz-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); -moz-transform: rotate(0); transform: rotate(0); opacity: 1; } } @-o-keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; -moz-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; -moz-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; -moz-animation-name: rotateInDownRight; -o-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } @-webkit-keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @-moz-keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; -moz-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); -moz-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; -moz-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); -moz-transform: rotate(0); transform: rotate(0); opacity: 1; } } @-o-keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; -moz-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; -moz-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; -moz-animation-name: rotateInUpLeft; -o-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } @-webkit-keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @-moz-keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; -moz-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -moz-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; -moz-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); -moz-transform: rotate(0); transform: rotate(0); opacity: 1; } } @-o-keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; -moz-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; -moz-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; -moz-animation-name: rotateInUpRight; -o-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } @-webkit-keyframes rotateOut { 0% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(200deg); transform: rotate(200deg); opacity: 0; } } @-moz-keyframes rotateOut { 0% { -webkit-transform-origin: center center; -ms-transform-origin: center center; -moz-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); -ms-transform: rotate(0); -moz-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: center center; -ms-transform-origin: center center; -moz-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(200deg); -ms-transform: rotate(200deg); -moz-transform: rotate(200deg); transform: rotate(200deg); opacity: 0; } } @-o-keyframes rotateOut { 0% { -webkit-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(200deg); -ms-transform: rotate(200deg); -o-transform: rotate(200deg); transform: rotate(200deg); opacity: 0; } } @keyframes rotateOut { 0% { -webkit-transform-origin: center center; -ms-transform-origin: center center; -moz-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); -ms-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: center center; -ms-transform-origin: center center; -moz-transform-origin: center center; -o-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(200deg); -ms-transform: rotate(200deg); -moz-transform: rotate(200deg); -o-transform: rotate(200deg); transform: rotate(200deg); opacity: 0; } } .rotateOut { -webkit-animation-name: rotateOut; -moz-animation-name: rotateOut; -o-animation-name: rotateOut; animation-name: rotateOut; } @-webkit-keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } @-moz-keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; -moz-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); -moz-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; -moz-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); -moz-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } @-o-keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; -moz-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; -moz-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; -moz-animation-name: rotateOutDownLeft; -o-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } @-webkit-keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } @-moz-keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; -moz-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); -moz-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; -moz-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -moz-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } @-o-keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } @keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; -moz-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; -moz-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; -moz-animation-name: rotateOutDownRight; -o-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } @-webkit-keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } @-moz-keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; -moz-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); -moz-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; -moz-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -moz-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } @-o-keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } @keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; -moz-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; -moz-transform-origin: left bottom; -o-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; -moz-animation-name: rotateOutUpLeft; -o-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } @-webkit-keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } @-moz-keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; -moz-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); -moz-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; -moz-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); -moz-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } @-o-keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; -moz-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; -moz-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; -moz-animation-name: rotateOutUpRight; -o-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } @-webkit-keyframes slideInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @-moz-keyframes slideInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); -moz-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); -moz-transform: translateY(0); transform: translateY(0); } } @-o-keyframes slideInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @keyframes slideInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); -moz-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } .slideInDown { -webkit-animation-name: slideInDown; -moz-animation-name: slideInDown; -o-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @-moz-keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); -moz-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); -moz-transform: translateX(0); transform: translateX(0); } } @-o-keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); -moz-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } .slideInLeft { -webkit-animation-name: slideInLeft; -moz-animation-name: slideInLeft; -o-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @-moz-keyframes slideInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); -moz-transform: translateX(2000px); transform: translateX(2000px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); -moz-transform: translateX(0); transform: translateX(0); } } @-o-keyframes slideInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @keyframes slideInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); -moz-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } .slideInRight { -webkit-animation-name: slideInRight; -moz-animation-name: slideInRight; -o-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } } @-moz-keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); -moz-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); -moz-transform: translateX(-2000px); transform: translateX(-2000px); } } @-o-keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); -moz-transform: translateX(-2000px); -o-transform: translateX(-2000px); transform: translateX(-2000px); } } .slideOutLeft { -webkit-animation-name: slideOutLeft; -moz-animation-name: slideOutLeft; -o-animation-name: slideOutLeft; animation-name: slideOutLeft; } @-webkit-keyframes slideOutRight { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } } @-moz-keyframes slideOutRight { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); -moz-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); -moz-transform: translateX(2000px); transform: translateX(2000px); } } @-o-keyframes slideOutRight { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes slideOutRight { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); -moz-transform: translateX(2000px); -o-transform: translateX(2000px); transform: translateX(2000px); } } .slideOutRight { -webkit-animation-name: slideOutRight; -moz-animation-name: slideOutRight; -o-animation-name: slideOutRight; animation-name: slideOutRight; } @-webkit-keyframes slideOutUp { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } } @-moz-keyframes slideOutUp { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); -moz-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); -moz-transform: translateY(-2000px); transform: translateY(-2000px); } } @-o-keyframes slideOutUp { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes slideOutUp { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); -moz-transform: translateY(-2000px); -o-transform: translateY(-2000px); transform: translateY(-2000px); } } .slideOutUp { -webkit-animation-name: slideOutUp; -moz-animation-name: slideOutUp; -o-animation-name: slideOutUp; animation-name: slideOutUp; } @-webkit-keyframes slideInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @-moz-keyframes slideInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); -moz-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); -moz-transform: translateY(0); transform: translateY(0); } } @-o-keyframes slideInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @keyframes slideInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); -moz-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } .slideInUp { -webkit-animation-name: slideInUp; -moz-animation-name: slideInUp; -o-animation-name: slideInUp; animation-name: slideInUp; } @-webkit-keyframes slideOutDown { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } } @-moz-keyframes slideOutDown { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); -moz-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); -moz-transform: translateY(2000px); transform: translateY(2000px); } } @-o-keyframes slideOutDown { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } } @keyframes slideOutDown { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); -moz-transform: translateY(2000px); -o-transform: translateY(2000px); transform: translateY(2000px); } } .slideOutDown { -webkit-animation-name: slideOutDown; -moz-animation-name: slideOutDown; -o-animation-name: slideOutDown; animation-name: slideOutDown; } @-webkit-keyframes hinge { 0% { -webkit-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40% { -webkit-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 80% { -webkit-transform: rotate(60deg) translateY(0); transform: rotate(60deg) translateY(0); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translateY(700px); transform: translateY(700px); opacity: 0; } } @-moz-keyframes hinge { 0% { -webkit-transform: rotate(0); -ms-transform: rotate(0); -moz-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: top left; -ms-transform-origin: top left; -moz-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate(80deg); -ms-transform: rotate(80deg); -moz-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; -ms-transform-origin: top left; -moz-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40% { -webkit-transform: rotate(60deg); -ms-transform: rotate(60deg); -moz-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; -ms-transform-origin: top left; -moz-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 80% { -webkit-transform: rotate(60deg) translateY(0); -ms-transform: rotate(60deg) translateY(0); -moz-transform: rotate(60deg) translateY(0); transform: rotate(60deg) translateY(0); -webkit-transform-origin: top left; -ms-transform-origin: top left; -moz-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translateY(700px); -ms-transform: translateY(700px); -moz-transform: translateY(700px); transform: translateY(700px); opacity: 0; } } @-o-keyframes hinge { 0% { -webkit-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate(80deg); -ms-transform: rotate(80deg); -o-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40% { -webkit-transform: rotate(60deg); -ms-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 80% { -webkit-transform: rotate(60deg) translateY(0); -ms-transform: rotate(60deg) translateY(0); -o-transform: rotate(60deg) translateY(0); transform: rotate(60deg) translateY(0); -webkit-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translateY(700px); -ms-transform: translateY(700px); -o-transform: translateY(700px); transform: translateY(700px); opacity: 0; } } @keyframes hinge { 0% { -webkit-transform: rotate(0); -ms-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: top left; -ms-transform-origin: top left; -moz-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; -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; } 20%, 60% { -webkit-transform: rotate(80deg); -ms-transform: rotate(80deg); -moz-transform: rotate(80deg); -o-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; -ms-transform-origin: top left; -moz-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; -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; } 40% { -webkit-transform: rotate(60deg); -ms-transform: rotate(60deg); -moz-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; -ms-transform-origin: top left; -moz-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; -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; } 80% { -webkit-transform: rotate(60deg) translateY(0); -ms-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; -ms-transform-origin: top left; -moz-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; -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; opacity: 1; } 100% { -webkit-transform: translateY(700px); -ms-transform: translateY(700px); -moz-transform: translateY(700px); -o-transform: translateY(700px); transform: translateY(700px); opacity: 0; } } .hinge { -webkit-animation-name: hinge; -moz-animation-name: hinge; -o-animation-name: hinge; animation-name: hinge; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } } @-moz-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); -ms-transform: translateX(-100%) rotate(-120deg); -moz-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); -moz-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } } @-o-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); -ms-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); -ms-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); -ms-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); -ms-transform: translateX(0px) rotate(0deg); -moz-transform: translateX(0px) rotate(0deg); -o-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } } .rollIn { -webkit-animation-name: rollIn; -moz-animation-name: rollIn; -o-animation-name: rollIn; animation-name: rollIn; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); transform: translateX(100%) rotate(120deg); } } @-moz-keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); -moz-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); -ms-transform: translateX(100%) rotate(120deg); -moz-transform: translateX(100%) rotate(120deg); transform: translateX(100%) rotate(120deg); } } @-o-keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -ms-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); -ms-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); -ms-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); -ms-transform: translateX(100%) rotate(120deg); -moz-transform: translateX(100%) rotate(120deg); -o-transform: translateX(100%) rotate(120deg); transform: translateX(100%) rotate(120deg); } } .rollOut { -webkit-animation-name: rollOut; -moz-animation-name: rollOut; -o-animation-name: rollOut; animation-name: rollOut; } @-webkit-keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale(0.3); transform: scale(0.3); } 50% { opacity: 1; } } @-moz-keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale(0.3); -ms-transform: scale(0.3); -moz-transform: scale(0.3); transform: scale(0.3); } 50% { opacity: 1; } } @-o-keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale(0.3); -ms-transform: scale(0.3); -o-transform: scale(0.3); transform: scale(0.3); } 50% { opacity: 1; } } @keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale(0.3); -ms-transform: scale(0.3); -moz-transform: scale(0.3); -o-transform: scale(0.3); transform: scale(0.3); } 50% { opacity: 1; } } .zoomIn { -webkit-animation-name: zoomIn; -moz-animation-name: zoomIn; -o-animation-name: zoomIn; animation-name: zoomIn; } @-webkit-keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale(0.1) translateY(-2000px); transform: scale(0.1) translateY(-2000px); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 60% { opacity: 1; -webkit-transform: scale(0.475) translateY(60px); transform: scale(0.475) translateY(60px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @-moz-keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale(0.1) translateY(-2000px); -ms-transform: scale(0.1) translateY(-2000px); -moz-transform: scale(0.1) translateY(-2000px); transform: scale(0.1) translateY(-2000px); -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 60% { opacity: 1; -webkit-transform: scale(0.475) translateY(60px); -ms-transform: scale(0.475) translateY(60px); -moz-transform: scale(0.475) translateY(60px); transform: scale(0.475) translateY(60px); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @-o-keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale(0.1) translateY(-2000px); -ms-transform: scale(0.1) translateY(-2000px); -o-transform: scale(0.1) translateY(-2000px); transform: scale(0.1) translateY(-2000px); -webkit-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 60% { opacity: 1; -webkit-transform: scale(0.475) translateY(60px); -ms-transform: scale(0.475) translateY(60px); -o-transform: scale(0.475) translateY(60px); transform: scale(0.475) translateY(60px); -webkit-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale(0.1) translateY(-2000px); -ms-transform: scale(0.1) translateY(-2000px); -moz-transform: scale(0.1) translateY(-2000px); -o-transform: scale(0.1) translateY(-2000px); transform: scale(0.1) translateY(-2000px); -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; } 60% { opacity: 1; -webkit-transform: scale(0.475) translateY(60px); -ms-transform: scale(0.475) translateY(60px); -moz-transform: scale(0.475) translateY(60px); -o-transform: scale(0.475) translateY(60px); transform: scale(0.475) translateY(60px); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } } .zoomInDown { -webkit-animation-name: zoomInDown; -moz-animation-name: zoomInDown; -o-animation-name: zoomInDown; animation-name: zoomInDown; } @-webkit-keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale(0.1) translateX(-2000px); transform: scale(0.1) translateX(-2000px); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 60% { opacity: 1; -webkit-transform: scale(0.475) translateX(48px); transform: scale(0.475) translateX(48px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @-moz-keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale(0.1) translateX(-2000px); -ms-transform: scale(0.1) translateX(-2000px); -moz-transform: scale(0.1) translateX(-2000px); transform: scale(0.1) translateX(-2000px); -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 60% { opacity: 1; -webkit-transform: scale(0.475) translateX(48px); -ms-transform: scale(0.475) translateX(48px); -moz-transform: scale(0.475) translateX(48px); transform: scale(0.475) translateX(48px); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @-o-keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale(0.1) translateX(-2000px); -ms-transform: scale(0.1) translateX(-2000px); -o-transform: scale(0.1) translateX(-2000px); transform: scale(0.1) translateX(-2000px); -webkit-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 60% { opacity: 1; -webkit-transform: scale(0.475) translateX(48px); -ms-transform: scale(0.475) translateX(48px); -o-transform: scale(0.475) translateX(48px); transform: scale(0.475) translateX(48px); -webkit-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale(0.1) translateX(-2000px); -ms-transform: scale(0.1) translateX(-2000px); -moz-transform: scale(0.1) translateX(-2000px); -o-transform: scale(0.1) translateX(-2000px); transform: scale(0.1) translateX(-2000px); -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; } 60% { opacity: 1; -webkit-transform: scale(0.475) translateX(48px); -ms-transform: scale(0.475) translateX(48px); -moz-transform: scale(0.475) translateX(48px); -o-transform: scale(0.475) translateX(48px); transform: scale(0.475) translateX(48px); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } } .zoomInLeft { -webkit-animation-name: zoomInLeft; -moz-animation-name: zoomInLeft; -o-animation-name: zoomInLeft; animation-name: zoomInLeft; } @-webkit-keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale(0.1) translateX(2000px); transform: scale(0.1) translateX(2000px); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 60% { opacity: 1; -webkit-transform: scale(0.475) translateX(-48px); transform: scale(0.475) translateX(-48px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @-moz-keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale(0.1) translateX(2000px); -ms-transform: scale(0.1) translateX(2000px); -moz-transform: scale(0.1) translateX(2000px); transform: scale(0.1) translateX(2000px); -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 60% { opacity: 1; -webkit-transform: scale(0.475) translateX(-48px); -ms-transform: scale(0.475) translateX(-48px); -moz-transform: scale(0.475) translateX(-48px); transform: scale(0.475) translateX(-48px); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @-o-keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale(0.1) translateX(2000px); -ms-transform: scale(0.1) translateX(2000px); -o-transform: scale(0.1) translateX(2000px); transform: scale(0.1) translateX(2000px); -webkit-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 60% { opacity: 1; -webkit-transform: scale(0.475) translateX(-48px); -ms-transform: scale(0.475) translateX(-48px); -o-transform: scale(0.475) translateX(-48px); transform: scale(0.475) translateX(-48px); -webkit-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale(0.1) translateX(2000px); -ms-transform: scale(0.1) translateX(2000px); -moz-transform: scale(0.1) translateX(2000px); -o-transform: scale(0.1) translateX(2000px); transform: scale(0.1) translateX(2000px); -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; } 60% { opacity: 1; -webkit-transform: scale(0.475) translateX(-48px); -ms-transform: scale(0.475) translateX(-48px); -moz-transform: scale(0.475) translateX(-48px); -o-transform: scale(0.475) translateX(-48px); transform: scale(0.475) translateX(-48px); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } } .zoomInRight { -webkit-animation-name: zoomInRight; -moz-animation-name: zoomInRight; -o-animation-name: zoomInRight; animation-name: zoomInRight; } @-webkit-keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale(0.1) translateY(2000px); transform: scale(0.1) translateY(2000px); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 60% { opacity: 1; -webkit-transform: scale(0.475) translateY(-60px); transform: scale(0.475) translateY(-60px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @-moz-keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale(0.1) translateY(2000px); -ms-transform: scale(0.1) translateY(2000px); -moz-transform: scale(0.1) translateY(2000px); transform: scale(0.1) translateY(2000px); -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 60% { opacity: 1; -webkit-transform: scale(0.475) translateY(-60px); -ms-transform: scale(0.475) translateY(-60px); -moz-transform: scale(0.475) translateY(-60px); transform: scale(0.475) translateY(-60px); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @-o-keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale(0.1) translateY(2000px); -ms-transform: scale(0.1) translateY(2000px); -o-transform: scale(0.1) translateY(2000px); transform: scale(0.1) translateY(2000px); -webkit-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 60% { opacity: 1; -webkit-transform: scale(0.475) translateY(-60px); -ms-transform: scale(0.475) translateY(-60px); -o-transform: scale(0.475) translateY(-60px); transform: scale(0.475) translateY(-60px); -webkit-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale(0.1) translateY(2000px); -ms-transform: scale(0.1) translateY(2000px); -moz-transform: scale(0.1) translateY(2000px); -o-transform: scale(0.1) translateY(2000px); transform: scale(0.1) translateY(2000px); -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; } 60% { opacity: 1; -webkit-transform: scale(0.475) translateY(-60px); -ms-transform: scale(0.475) translateY(-60px); -moz-transform: scale(0.475) translateY(-60px); -o-transform: scale(0.475) translateY(-60px); transform: scale(0.475) translateY(-60px); -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } } .zoomInUp { -webkit-animation-name: zoomInUp; -moz-animation-name: zoomInUp; -o-animation-name: zoomInUp; animation-name: zoomInUp; } @-webkit-keyframes zoomOut { 0% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 50% { opacity: 0; -webkit-transform: scale(0.3); transform: scale(0.3); } 100% { opacity: 0; } } @-moz-keyframes zoomOut { 0% { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); -moz-transform: scale(1); transform: scale(1); } 50% { opacity: 0; -webkit-transform: scale(0.3); -ms-transform: scale(0.3); -moz-transform: scale(0.3); transform: scale(0.3); } 100% { opacity: 0; } } @-o-keyframes zoomOut { 0% { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 50% { opacity: 0; -webkit-transform: scale(0.3); -ms-transform: scale(0.3); -o-transform: scale(0.3); transform: scale(0.3); } 100% { opacity: 0; } } @keyframes zoomOut { 0% { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 50% { opacity: 0; -webkit-transform: scale(0.3); -ms-transform: scale(0.3); -moz-transform: scale(0.3); -o-transform: scale(0.3); transform: scale(0.3); } 100% { opacity: 0; } } .zoomOut { -webkit-animation-name: zoomOut; -moz-animation-name: zoomOut; -o-animation-name: zoomOut; animation-name: zoomOut; } @-webkit-keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale(0.475) translateY(-60px); transform: scale(0.475) translateY(-60px); -webkit-animation-timing-function: linear; animation-timing-function: linear; } 100% { opacity: 0; -webkit-transform: scale(0.1) translateY(2000px); transform: scale(0.1) translateY(2000px); -webkit-transform-origin: center bottom; transform-origin: center bottom; } } @-moz-keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale(0.475) translateY(-60px); -ms-transform: scale(0.475) translateY(-60px); -moz-transform: scale(0.475) translateY(-60px); transform: scale(0.475) translateY(-60px); -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; animation-timing-function: linear; } 100% { opacity: 0; -webkit-transform: scale(0.1) translateY(2000px); -ms-transform: scale(0.1) translateY(2000px); -moz-transform: scale(0.1) translateY(2000px); transform: scale(0.1) translateY(2000px); -webkit-transform-origin: center bottom; -ms-transform-origin: center bottom; -moz-transform-origin: center bottom; transform-origin: center bottom; } } @-o-keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale(0.475) translateY(-60px); -ms-transform: scale(0.475) translateY(-60px); -o-transform: scale(0.475) translateY(-60px); transform: scale(0.475) translateY(-60px); -webkit-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } 100% { opacity: 0; -webkit-transform: scale(0.1) translateY(2000px); -ms-transform: scale(0.1) translateY(2000px); -o-transform: scale(0.1) translateY(2000px); transform: scale(0.1) translateY(2000px); -webkit-transform-origin: center bottom; -ms-transform-origin: center bottom; -o-transform-origin: center bottom; transform-origin: center bottom; } } @keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale(0.475) translateY(-60px); -ms-transform: scale(0.475) translateY(-60px); -moz-transform: scale(0.475) translateY(-60px); -o-transform: scale(0.475) translateY(-60px); transform: scale(0.475) translateY(-60px); -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } 100% { opacity: 0; -webkit-transform: scale(0.1) translateY(2000px); -ms-transform: scale(0.1) translateY(2000px); -moz-transform: scale(0.1) translateY(2000px); -o-transform: scale(0.1) translateY(2000px); transform: scale(0.1) translateY(2000px); -webkit-transform-origin: center bottom; -ms-transform-origin: center bottom; -moz-transform-origin: center bottom; -o-transform-origin: center bottom; transform-origin: center bottom; } } .zoomOutDown { -webkit-animation-name: zoomOutDown; -moz-animation-name: zoomOutDown; -o-animation-name: zoomOutDown; animation-name: zoomOutDown; } @-webkit-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale(0.475) translateX(42px); transform: scale(0.475) translateX(42px); -webkit-animation-timing-function: linear; animation-timing-function: linear; } 100% { opacity: 0; -webkit-transform: scale(0.1) translateX(-2000px); transform: scale(0.1) translateX(-2000px); -webkit-transform-origin: left center; transform-origin: left center; } } @-moz-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale(0.475) translateX(42px); -ms-transform: scale(0.475) translateX(42px); -moz-transform: scale(0.475) translateX(42px); transform: scale(0.475) translateX(42px); -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; animation-timing-function: linear; } 100% { opacity: 0; -webkit-transform: scale(0.1) translateX(-2000px); -ms-transform: scale(0.1) translateX(-2000px); -moz-transform: scale(0.1) translateX(-2000px); transform: scale(0.1) translateX(-2000px); -webkit-transform-origin: left center; -ms-transform-origin: left center; -moz-transform-origin: left center; transform-origin: left center; } } @-o-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale(0.475) translateX(42px); -ms-transform: scale(0.475) translateX(42px); -o-transform: scale(0.475) translateX(42px); transform: scale(0.475) translateX(42px); -webkit-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } 100% { opacity: 0; -webkit-transform: scale(0.1) translateX(-2000px); -ms-transform: scale(0.1) translateX(-2000px); -o-transform: scale(0.1) translateX(-2000px); transform: scale(0.1) translateX(-2000px); -webkit-transform-origin: left center; -ms-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; } } @keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale(0.475) translateX(42px); -ms-transform: scale(0.475) translateX(42px); -moz-transform: scale(0.475) translateX(42px); -o-transform: scale(0.475) translateX(42px); transform: scale(0.475) translateX(42px); -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } 100% { opacity: 0; -webkit-transform: scale(0.1) translateX(-2000px); -ms-transform: scale(0.1) translateX(-2000px); -moz-transform: scale(0.1) translateX(-2000px); -o-transform: scale(0.1) translateX(-2000px); transform: scale(0.1) translateX(-2000px); -webkit-transform-origin: left center; -ms-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; } } .zoomOutLeft { -webkit-animation-name: zoomOutLeft; -moz-animation-name: zoomOutLeft; -o-animation-name: zoomOutLeft; animation-name: zoomOutLeft; } @-webkit-keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale(0.475) translateX(-42px); transform: scale(0.475) translateX(-42px); -webkit-animation-timing-function: linear; animation-timing-function: linear; } 100% { opacity: 0; -webkit-transform: scale(0.1) translateX(2000px); transform: scale(0.1) translateX(2000px); -webkit-transform-origin: right center; transform-origin: right center; } } @-moz-keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale(0.475) translateX(-42px); -ms-transform: scale(0.475) translateX(-42px); -moz-transform: scale(0.475) translateX(-42px); transform: scale(0.475) translateX(-42px); -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; animation-timing-function: linear; } 100% { opacity: 0; -webkit-transform: scale(0.1) translateX(2000px); -ms-transform: scale(0.1) translateX(2000px); -moz-transform: scale(0.1) translateX(2000px); transform: scale(0.1) translateX(2000px); -webkit-transform-origin: right center; -ms-transform-origin: right center; -moz-transform-origin: right center; transform-origin: right center; } } @-o-keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale(0.475) translateX(-42px); -ms-transform: scale(0.475) translateX(-42px); -o-transform: scale(0.475) translateX(-42px); transform: scale(0.475) translateX(-42px); -webkit-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } 100% { opacity: 0; -webkit-transform: scale(0.1) translateX(2000px); -ms-transform: scale(0.1) translateX(2000px); -o-transform: scale(0.1) translateX(2000px); transform: scale(0.1) translateX(2000px); -webkit-transform-origin: right center; -ms-transform-origin: right center; -o-transform-origin: right center; transform-origin: right center; } } @keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale(0.475) translateX(-42px); -ms-transform: scale(0.475) translateX(-42px); -moz-transform: scale(0.475) translateX(-42px); -o-transform: scale(0.475) translateX(-42px); transform: scale(0.475) translateX(-42px); -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } 100% { opacity: 0; -webkit-transform: scale(0.1) translateX(2000px); -ms-transform: scale(0.1) translateX(2000px); -moz-transform: scale(0.1) translateX(2000px); -o-transform: scale(0.1) translateX(2000px); transform: scale(0.1) translateX(2000px); -webkit-transform-origin: right center; -ms-transform-origin: right center; -moz-transform-origin: right center; -o-transform-origin: right center; transform-origin: right center; } } .zoomOutRight { -webkit-animation-name: zoomOutRight; -moz-animation-name: zoomOutRight; -o-animation-name: zoomOutRight; animation-name: zoomOutRight; } @-webkit-keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale(0.475) translateY(60px); transform: scale(0.475) translateY(60px); -webkit-animation-timing-function: linear; animation-timing-function: linear; } 100% { opacity: 0; -webkit-transform: scale(0.1) translateY(-2000px); transform: scale(0.1) translateY(-2000px); -webkit-transform-origin: center top; transform-origin: center top; } } @-moz-keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale(0.475) translateY(60px); -ms-transform: scale(0.475) translateY(60px); -moz-transform: scale(0.475) translateY(60px); transform: scale(0.475) translateY(60px); -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; animation-timing-function: linear; } 100% { opacity: 0; -webkit-transform: scale(0.1) translateY(-2000px); -ms-transform: scale(0.1) translateY(-2000px); -moz-transform: scale(0.1) translateY(-2000px); transform: scale(0.1) translateY(-2000px); -webkit-transform-origin: center top; -ms-transform-origin: center top; -moz-transform-origin: center top; transform-origin: center top; } } @-o-keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale(0.475) translateY(60px); -ms-transform: scale(0.475) translateY(60px); -o-transform: scale(0.475) translateY(60px); transform: scale(0.475) translateY(60px); -webkit-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } 100% { opacity: 0; -webkit-transform: scale(0.1) translateY(-2000px); -ms-transform: scale(0.1) translateY(-2000px); -o-transform: scale(0.1) translateY(-2000px); transform: scale(0.1) translateY(-2000px); -webkit-transform-origin: center top; -ms-transform-origin: center top; -o-transform-origin: center top; transform-origin: center top; } } @keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale(0.475) translateY(60px); -ms-transform: scale(0.475) translateY(60px); -moz-transform: scale(0.475) translateY(60px); -o-transform: scale(0.475) translateY(60px); transform: scale(0.475) translateY(60px); -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; -o-animation-timing-function: linear; animation-timing-function: linear; } 100% { opacity: 0; -webkit-transform: scale(0.1) translateY(-2000px); -ms-transform: scale(0.1) translateY(-2000px); -moz-transform: scale(0.1) translateY(-2000px); -o-transform: scale(0.1) translateY(-2000px); transform: scale(0.1) translateY(-2000px); -webkit-transform-origin: center top; -ms-transform-origin: center top; -moz-transform-origin: center top; -o-transform-origin: center top; transform-origin: center top; } } .zoomOutUp { -webkit-animation-name: zoomOutUp; -moz-animation-name: zoomOutUp; -o-animation-name: zoomOutUp; animation-name: zoomOutUp; } /* * 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; -khtml-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; -moz-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 { -ms-transform: scale(1.3, 1.3); -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; -moz-background-size: contain; 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%; } /********************************* * Alert / Notice *********************************/ .alert-button, .notice-button { -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; cursor: pointer; z-index: 7; top: -30px; opacity: 0; -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s; width: 38px; height: 38px; left: 1em; -webkit-transform: translateY(100%); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: translateY(100%); /* IE 9 */ -moz-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); /* Firefox 16+, IE 10+, Opera */ display: block; position: fixed; } @media screen and (min-width: 768px) { .alert-button, .notice-button { top: 74vh; right: 160px; left: auto; width: 46px; height: 46px; position: absolute; } } @media screen and (min-width: 1024px) { .alert-button, .notice-button { top: 76vh; } } @media screen and (min-width: 1280px) { .alert-button, .notice-button { right: 180px; } } @media screen and (min-width: 1601px) { .alert-button, .notice-button { top: 80vh; } } html.no-touch .alert-button:hover:before, html.no-touch .notice-button:hover:before { -webkit-transform: scale(1.2); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: scale(1.2); /* IE 9 */ -moz-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); /* Firefox 16+, IE 10+, Opera */ } .alert-button:before, .alert-button:after, .notice-button:before, .notice-button:after { content: ''; top: 0; left: 0; width: 100%; height: 100%; display: block; position: absolute; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; } .alert-button:before, .notice-button:before { z-index: 0; border: 3px solid #D32124; background-color: rgba(0, 0, 0, 0.5); } .alert-button:after, .notice-button:after { z-index: 1; top: 3px; left: 3px; background: transparent url("/Images/img/icons/Alert.png") no-repeat center center/19px auto; } @media screen and (min-width: 768px) { .alert-button:after, .notice-button:after { -moz-background-size: 22px auto; background-size: 22px auto; } } .alert-button span, .notice-button span { display: block; position: absolute; top: -3px; left: 24px; padding: 1px 6px 2px; background: #F00; color: #FFF; font-size: 10px; text-align: center; font-weight: bold; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; z-index: 2; } @media screen and (min-width: 768px) { .alert-button span, .notice-button span { left: 32px; } } .alert-button.showAlertBtn, .notice-button.showAlertBtn { opacity: 1; } .alert-button.opened, .notice-button.opened { z-index: 999999; opacity: .35; } .alert-button.active, .notice-button.active { pointer-events: none; opacity: 1; } .alert-button.active:before, .notice-button.active:before { -webkit-transform: scale(1.2); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: scale(1.2); /* IE 9 */ -moz-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); /* Firefox 16+, IE 10+, Opera */ } .alert-button.fade, .notice-button.fade { opacity: 0; } @media screen and (max-width: 767px) { .alert-button, .notice-button { top: 30px; z-index: 1 !important; } } @media screen and (max-width: 767px) { .alert-button.scrolled, .notice-button.scrolled { -webkit-transform: translateY(-30px); -moz-transform: translateY(-30px); -ms-transform: translateY(-30px); -o-transform: translateY(-30px); transform: translateY(-30px); } } .alert-wrapper, .notice-wrapper { display: none; position: fixed; z-index: 99999; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.9); } .alert-content, .notice-content { top: 2vh; width: -webkit-calc(100% - 20px); width: -moz-calc(100% - 20px); width: calc(100% - 20px); text-align: center; margin: 0 auto; right: 90%; display: block; position: fixed; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; -webkit-transform: translate(50%, -50%) scale(0.0001); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: translate(50%, -50%) scale(0.0001); /* IE 9 */ -moz-transform: translate(50%, -50%) scale(0.0001); -o-transform: translate(50%, -50%) scale(0.0001); transform: translate(50%, -50%) scale(0.0001); /* Firefox 16+, IE 10+, Opera */ } @media screen and (min-width: 768px) { .alert-content, .notice-content { text-align: left; width: 670px; top: 90vh; right: 160px; } } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .alert-content, .notice-content { right: 50%; top: 50%; -webkit-transform: translate(50%, -50%) !important; /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: translate(50%, -50%) !important; /* IE 9 */ -moz-transform: translate(50%, -50%) !important; -o-transform: translate(50%, -50%) !important; transform: translate(50%, -50%) !important; /* Firefox 16+, IE 10+, Opera */ } } .alert-content.showAlert, .notice-content.showAlert { right: 50%; top: 50%; -webkit-transform: translate(50%, -50%) scale(1); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: translate(50%, -50%) scale(1); /* IE 9 */ -moz-transform: translate(50%, -50%) scale(1); -o-transform: translate(50%, -50%) scale(1); transform: translate(50%, -50%) scale(1); /* Firefox 16+, IE 10+, Opera */ } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .alert-content.showAlert, .notice-content.showAlert { -webkit-transform: translate(50%, -50%) !important; /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: translate(50%, -50%) !important; /* IE 9 */ -moz-transform: translate(50%, -50%) !important; -o-transform: translate(50%, -50%) !important; transform: translate(50%, -50%) !important; /* Firefox 16+, IE 10+, Opera */ } } @media screen and (min-width: 768px) { .alert-content.hasCarousel, .notice-content.hasCarousel { width: 100%; } } .alert-content > div, .notice-content > div { display: block; position: relative; } .alert-close, .notice-close { position: absolute !important; top: -30px; right: 0; z-index: 2; cursor: pointer; } .alert-close span, .notice-close span { display: inline-block; position: relative; vertical-align: middle; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; } @media screen and (min-height: 700px) { .alert-close, .notice-close { top: -40px; } } @media screen and (min-width: 768px) { .alert-close, .notice-close { right: -webkit-calc((100% - 670px) / 2); right: -moz-calc((100% - 670px) / 2); right: calc((100% - 670px) / 2); } } .alert-close-text, .notice-close-text { color: #FFF; text-transform: uppercase; font-weight: 700; font-size: 16px; } .alert-close-text:after, .notice-close-text:after { display: block; position: absolute; content: ''; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; bottom: 0; left: 0; height: 2px; background: #FFF; width: 0; } .alert-close-icon, .notice-close-icon { -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; width: 20px; height: 20px; margin-left: 10px; } .alert-close-icon:before, .alert-close-icon:after, .notice-close-icon:before, .notice-close-icon:after { display: block; position: absolute; content: ''; width: 100%; height: 3px; background: #FFF; top: 50%; left: 50%; } .alert-close-icon:before, .notice-close-icon:before { -webkit-transform: translate(-50%, -50%) rotate(45deg); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: translate(-50%, -50%) rotate(45deg); /* IE 9 */ -moz-transform: translate(-50%, -50%) rotate(45deg); -o-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); /* Firefox 16+, IE 10+, Opera */ } .alert-close-icon:after, .notice-close-icon:after { -webkit-transform: translate(-50%, -50%) rotate(-45deg); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: translate(-50%, -50%) rotate(-45deg); /* IE 9 */ -moz-transform: translate(-50%, -50%) rotate(-45deg); -o-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg); /* Firefox 16+, IE 10+, Opera */ } html.no-touch .alert-close:hover .alert-close-text:after, html.no-touch .alert-close:hover .notice-close-text:after, html.no-touch .notice-close:hover .alert-close-text:after, html.no-touch .notice-close:hover .notice-close-text:after { width: 100%; } html.no-touch .alert-close:hover .alert-close-icon, html.no-touch .alert-close:hover .notice-close-icon, html.no-touch .notice-close:hover .alert-close-icon, html.no-touch .notice-close:hover .notice-close-icon { -webkit-transform: scale(1.2); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: scale(1.2); /* IE 9 */ -moz-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); /* Firefox 16+, IE 10+, Opera */ } .alert-info-title, .alert-info-subtitle, .notice-info-title, .notice-info-subtitle { color: #D32124; margin: .25em 0; line-height: 1.2; display: block; position: relative; font-weight: 700; } .alert-info-title, .notice-info-title { font-size: 24px; margin-bottom: .5em; } @media screen and (min-height: 700px) { .alert-info-title, .notice-info-title { font-size: 21px; margin-bottom: .75em; } } .alert-info-title span, .notice-info-title span { background-image: -webkit-gradient(linear, left top, left bottom, color-stop(90%, transparent), color-stop(0, #D32124)); background-image: -webkit-linear-gradient(top, transparent 90%, #D32124 0); background-image: -moz-linear-gradient(top, transparent 90%, #D32124 0); background-image: -o-linear-gradient(top, transparent 90%, #D32124 0); background-image: linear-gradient(180deg, transparent 90%, #D32124 0); background-repeat: no-repeat; -moz-background-size: 0 100%; background-size: 0 100%; -webkit-transition: background-size 0.35s ease-in-out 0s; -moz-transition: background-size 0.35s ease-in-out 0s; -o-transition: background-size 0.35s ease-in-out 0s; -moz-transition: background-size 0.35s ease-in-out 0s, -moz-background-size 0.35s ease-in-out 0s; transition: background-size 0.35s ease-in-out 0s; transition: background-size 0.35s ease-in-out 0s, -moz-background-size 0.35s ease-in-out 0s; } .alert-info-subtitle, .notice-info-subtitle { font-size: 16px; color: #707070; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; margin: 0; } .alert-info-more, .notice-info-more { display: block; position: relative; margin-top: .5em; } @media screen and (min-width: 768px) { .alert-info-more, .notice-info-more { display: inline-block; position: relative; vertical-align: middle; margin: 0; } } .alert-info-more span, .notice-info-more span { display: inline-block; position: relative; vertical-align: middle; } .alert-info-more-text, .notice-info-more-text { text-transform: uppercase; font-size: 16px; font-weight: 700; } @media screen and (min-width: 768px) { .alert-info-more-text, .notice-info-more-text { display: none !important; } } .alert-info-more-icon, .notice-info-more-icon { -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; width: 10px; height: 10px; margin-left: .5em; } @media screen and (min-width: 768px) { .alert-info-more-icon, .notice-info-more-icon { display: block !important; } } .alert-info-more-icon:before, .alert-info-more-icon:after, .notice-info-more-icon:before, .notice-info-more-icon:after { display: block; position: absolute; content: ''; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; width: 100%; height: 2px; background: #D32124; top: 50%; left: 50%; } .alert-info-more-icon:before, .notice-info-more-icon:before { -webkit-transform: translate(-50%, -50%); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: translate(-50%, -50%); /* IE 9 */ -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); /* Firefox 16+, IE 10+, Opera */ } .alert-info-more-icon:after, .notice-info-more-icon:after { -webkit-transform: translate(-50%, -50%) rotate(90deg); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: translate(-50%, -50%) rotate(90deg); /* IE 9 */ -moz-transform: translate(-50%, -50%) rotate(90deg); -o-transform: translate(-50%, -50%) rotate(90deg); transform: translate(-50%, -50%) rotate(90deg); /* Firefox 16+, IE 10+, Opera */ } .alert-info-item, .notice-info-item { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; position: relative; -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; cursor: pointer; } @media screen and (min-width: 768px) { .alert-info-item, .notice-info-item { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } } html.no-touch .alert-info-item:hover .alert-info-title span, html.no-touch .alert-info-item:hover .notice-info-title span, html.no-touch .notice-info-item:hover .alert-info-title span, html.no-touch .notice-info-item:hover .notice-info-title span { -moz-background-size: 100% 100%; background-size: 100% 100%; } html.no-touch .alert-info-item:hover .alert-info-image-bg, html.no-touch .alert-info-item:hover .notice-info-image-bg, html.no-touch .notice-info-item:hover .alert-info-image-bg, html.no-touch .notice-info-item:hover .notice-info-image-bg { -webkit-transform: scale(1.1); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: scale(1.1); /* IE 9 */ -moz-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); /* Firefox 16+, IE 10+, Opera */ } html.no-touch .alert-info-item:hover .alert-info-more-icon, html.no-touch .alert-info-item:hover .notice-info-more-icon, html.no-touch .notice-info-item:hover .alert-info-more-icon, html.no-touch .notice-info-item:hover .notice-info-more-icon { -webkit-transform: scale(1.1); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: scale(1.1); /* IE 9 */ -moz-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); /* Firefox 16+, IE 10+, Opera */ } .alert-info-image, .notice-info-image { background: transparent url("/Images/default-thumbs/default.jpg") no-repeat center center/cover; height: 140px; width: 100%; position: relative; overflow: hidden; } @media screen and (min-height: 700px) { .alert-info-image, .notice-info-image { height: 200px; } } @media screen and (min-width: 768px) { .alert-info-image, .notice-info-image { width: 40%; height: auto; } } .alert-info-image-bg, .notice-info-image-bg { top: 0; left: 0; width: 100%; height: 100%; background: transparent url("/Images/default-thumbs/default.jpg") no-repeat center center/cover; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; display: block; position: absolute; } .alert-info-content, .notice-info-content { display: block; position: relative; -webkit-box-flex: 1; -webkit-flex: 1; -moz-box-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden; padding: 1.75em; background: #FFF; } @media screen and (min-width: 768px) { .alert-info-content, .notice-info-content { padding: 2.5em; } } .alert-info-content p, .notice-info-content p { display: block; position: relative; padding: 0; margin: .5em 0 0; z-index: 1; line-height: 1.4; font-size: 16px; } .alert-info-content a:not(.sitebtn), .notice-info-content a:not(.sitebtn) { text-decoration: underline; color: #0F537E; } html.no-touch .alert-info-content a:not(.sitebtn):hover, html.no-touch .notice-info-content a:not(.sitebtn):hover { color: #E17619; } .alert-info-updated, .notice-info-updated { display: block; position: relative; font-size: 14px; font-style: italic; } .alert-info-updated.onDesktop, .notice-info-updated.onDesktop { display: none; } @media screen and (min-width: 768px) { .alert-info-updated.onDesktop, .notice-info-updated.onDesktop { display: block; } } .alert-info-updated.onMobile, .notice-info-updated.onMobile { color: #FFF; position: absolute; bottom: -30px; left: 0; right: 0; } @media screen and (min-width: 768px) { .alert-info-updated.onMobile, .notice-info-updated.onMobile { display: none; } } .alert-info-progress, .notice-info-progress { display: block; position: relative; -webkit-box-ordinal-group: 2; -webkit-order: 1; -moz-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; background: rgba(255, 255, 255, 0.4); width: -webkit-calc(100% - 180px); width: -moz-calc(100% - 180px); width: calc(100% - 180px); height: 2px; } .alert-info-progress span, .notice-info-progress span { display: block; position: relative; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; height: 100%; width: 50%; max-width: 100%; background: #FFF; } .alert-info .owl-stage, .notice-info .owl-stage { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; } .alert-info .owl-stage-outer, .notice-info .owl-stage-outer { overflow: visible; } @media screen and (min-width: 768px) { .alert-info .owl-stage-outer, .notice-info .owl-stage-outer { overflow: hidden; } } .alert-info .owl-item, .notice-info .owl-item { -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; } .alert-info .owl-item .notice-info-item, .alert-info .owl-item .alert-info-item, .notice-info .owl-item .notice-info-item, .notice-info .owl-item .alert-info-item { border: none !important; height: 100%; } .alert-info .owl-item:not(.center), .notice-info .owl-item:not(.center) { opacity: .4; pointer-events: none; } .alert-info .owl-nav, .notice-info .owl-nav { -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; display: none; padding: 0; width: 670px; bottom: -46px; -webkit-transform: translateX(-50%); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: translateX(-50%); /* IE 9 */ -moz-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); /* Firefox 16+, IE 10+, Opera */ margin: 0; left: 50%; } @media screen and (min-width: 768px) { .alert-info .owl-nav, .notice-info .owl-nav { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; position: absolute; } } .alert-info .owl-prev, .alert-info .owl-next, .notice-info .owl-prev, .notice-info .owl-next { background: transparent !important; outline: none; width: 90px; height: 30px; margin: 0 !important; position: relative; -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; border-radius: 0 !important; } html.no-touch .alert-info .owl-prev:hover:not(.disabled) .arrow, html.no-touch .alert-info .owl-next:hover:not(.disabled) .arrow, html.no-touch .notice-info .owl-prev:hover:not(.disabled) .arrow, html.no-touch .notice-info .owl-next:hover:not(.disabled) .arrow { width: 30px; } html.no-touch .alert-info .owl-prev:hover:not(.disabled) .text:after, html.no-touch .alert-info .owl-next:hover:not(.disabled) .text:after, html.no-touch .notice-info .owl-prev:hover:not(.disabled) .text:after, html.no-touch .notice-info .owl-next:hover:not(.disabled) .text:after { width: 100%; } .alert-info .owl-prev div, .alert-info .owl-next div, .notice-info .owl-prev div, .notice-info .owl-next div { -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; top: 50%; outline: none; z-index: 1; display: block; position: absolute; -webkit-transform: translateY(-50%); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: translateY(-50%); /* IE 9 */ -moz-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); /* Firefox 16+, IE 10+, Opera */ } .alert-info .owl-prev div span, .alert-info .owl-next div span, .notice-info .owl-prev div span, .notice-info .owl-next div span { display: inline-block; position: relative; vertical-align: middle; } .alert-info .owl-prev div .arrow, .alert-info .owl-next div .arrow, .notice-info .owl-prev div .arrow, .notice-info .owl-next div .arrow { -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; background: #FFF; height: 2px; width: 20px; } .alert-info .owl-prev div .arrow:after, .alert-info .owl-next div .arrow:after, .notice-info .owl-prev div .arrow:after, .notice-info .owl-next div .arrow:after { content: ''; top: 50%; width: 6px; height: 6px; border: 2px solid #FFF; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; display: block; position: absolute; -webkit-transform: translateY(-50%) rotate(45deg); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: translateY(-50%) rotate(45deg); /* IE 9 */ -moz-transform: translateY(-50%) rotate(45deg); -o-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg); /* Firefox 16+, IE 10+, Opera */ } .alert-info .owl-prev div .text, .alert-info .owl-next div .text, .notice-info .owl-prev div .text, .notice-info .owl-next div .text { font-weight: 700; font-size: 16px; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; color: #FFF; text-transform: uppercase; } .alert-info .owl-prev div .text:after, .alert-info .owl-next div .text:after, .notice-info .owl-prev div .text:after, .notice-info .owl-next div .text:after { background: #FFF; width: 0; display: block; position: absolute; content: ''; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; bottom: 0; left: 0; height: 2px; } .alert-info .owl-prev, .notice-info .owl-prev { -webkit-box-ordinal-group: 1; -webkit-order: 0; -moz-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; left: -16px; } .alert-info .owl-prev div, .notice-info .owl-prev div { right: 0; } .alert-info .owl-prev div .arrow:after, .notice-info .owl-prev div .arrow:after { border-right: none; border-top: none; left: 1px; } .alert-info .owl-prev div .text, .notice-info .owl-prev div .text { margin-left: 10px; } .alert-info .owl-prev div .text:after, .notice-info .owl-prev div .text:after { left: auto; right: 0; } .alert-info .owl-next, .notice-info .owl-next { -webkit-box-ordinal-group: 3; -webkit-order: 2; -moz-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; right: -16px; } .alert-info .owl-next div, .notice-info .owl-next div { left: 0; } .alert-info .owl-next div .arrow:after, .notice-info .owl-next div .arrow:after { border-left: none; border-bottom: none; right: 1px; } .alert-info .owl-next div .text, .notice-info .owl-next div .text { margin-right: 10px; } .notice-info-title { color: #0F537E; } .notice-info-title span { background-image: -webkit-gradient(linear, left top, left bottom, color-stop(90%, transparent), color-stop(0, #0F537E)); background-image: -webkit-linear-gradient(top, transparent 90%, #0F537E 0); background-image: -moz-linear-gradient(top, transparent 90%, #0F537E 0); background-image: -o-linear-gradient(top, transparent 90%, #0F537E 0); background-image: linear-gradient(180deg, transparent 90%, #0F537E 0); } .notice-info-more-icon:before, .notice-info-more-icon:after { background: #0F537E; } .notice-button { left: 4.5em; } @media screen and (min-width: 768px) { .notice-button { right: 90px; left: auto; } } @media screen and (min-width: 1280px) { .notice-button { right: 110px; } } .notice-button:before { border-color: #26709F; } .notice-button:after { background-image: url("/Images/img/icons/Notice.png"); } .notice-info .owl-dots button.active span { background: #0F537E !important; } .notice-info-title { color: #0F537E; } .notice-info-content a { color: #0F537E; } html.no-touch .notice-info-content a:hover { color: #E17619; } body.stopScroll { overflow: hidden; } .LoadingScreen { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; z-index: 9999999; } .LoadingScreen:before, .LoadingScreen:after { content: ''; top: 0; bottom: 0; width: 50%; background: #0F537E; display: block; position: absolute; -webkit-transition: all 1s ease-in-out 0s; -moz-transition: all 1s ease-in-out 0s; -o-transition: all 1s ease-in-out 0s; transition: all 1s ease-in-out 0s; } .LoadingScreen:before { left: 0; } .LoadingScreen:after { right: 0; } .LoadingScreen.showSite:before, .LoadingScreen.showSite:after { opacity: 0; } .LoadingScreen.showSite:before { left: -60vw; } .LoadingScreen.showSite:after { right: -60vw; } .LoadingScreen.showSite .LoadingScreen-wrapper { opacity: 0; } .LoadingScreen-wrapper { -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; z-index: 1; left: 50%; top: 50%; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transition: all 1s ease-in-out 0s; -moz-transition: all 1s ease-in-out 0s; -o-transition: all 1s ease-in-out 0s; transition: all 1s ease-in-out 0s; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; position: absolute; -webkit-transform: translate(-50%, -50%); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: translate(-50%, -50%); /* IE 9 */ -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); /* Firefox 16+, IE 10+, Opera */ } .LoadingScreen-wrapper > div { display: block; position: relative; } .LoadingScreen-logo, .LoadingScreen-title { -webkit-transition: all 0.65s ease-in-out 0s; -moz-transition: all 0.65s ease-in-out 0s; -o-transition: all 0.65s ease-in-out 0s; transition: all 0.65s ease-in-out 0s; } .LoadingScreen-logo img { display: block; position: relative; width: 160px; } @media screen and (min-width: 768px) { .LoadingScreen-logo img { width: 210px; } } @media screen and (min-width: 1280px) { .LoadingScreen-logo img { width: 265px; } } .LoadingScreen-logo.showLogo { margin-bottom: 2em; } .LoadingScreen-title { color: #FFF; text-align: center; margin: -1em 0 0; opacity: 0; font-weight: 400; display: block; position: relative; font-size: 30px; line-height: 1.1; } @media screen and (min-width: 768px) { .LoadingScreen-title { font-size: 50px; } } @media screen and (min-width: 1280px) { .LoadingScreen-title { font-size: 77px; } } .LoadingScreen-title > b { font-weight: 600; } .LoadingScreen-title.showTitle { margin-top: 0; opacity: 1; } .hp-hero { overflow: hidden; z-index: 1; background-color: #0F537E; width: 100%; /* &.scrolled{} */ } .hp-hero.showHero .hp-hero-caption, .hp-hero.showHero .hp-hero-container > .owl-nav { opacity: 1; } .hp-hero-container, .hp-hero-slide { display: block; position: relative; height: -webkit-calc(100vh - 40px); height: -moz-calc(100vh - 40px); height: calc(100vh - 40px); overflow: hidden; } @media screen and (min-width: 768px) { .hp-hero-container, .hp-hero-slide { height: 100vh; } } .hp-hero-container .owl-nav { top: 50%; left: 0; margin: 0; width: 100%; -webkit-transform: translateY(-50%); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: translateY(-50%); /* IE 9 */ -moz-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); /* Firefox 16+, IE 10+, Opera */ display: none; position: absolute; -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s; opacity: 0; } @media screen and (min-width: 768px) { .hp-hero-container .owl-nav { display: block; } } .hp-hero-container .owl-prev, .hp-hero-container .owl-next { background: rgba(15, 83, 126, 0.5) !important; width: 40px; height: 70px; display: block; position: absolute; margin: 0 !important; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; top: 0; overflow: hidden; outline: 0 !important; } html.no-touch .hp-hero-container .owl-prev:hover, html.no-touch .hp-hero-container .owl-next:hover { background-color: #0F537E !important; } html.no-touch .hp-hero-container .owl-prev:hover span, html.no-touch .hp-hero-container .owl-next:hover span { width: 85%; } .hp-hero-container .owl-prev span, .hp-hero-container .owl-next span { display: block; position: absolute; top: 50%; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; width: 70%; height: 20px; -webkit-transform: translateY(-50%); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: translateY(-50%); /* IE 9 */ -moz-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); /* Firefox 16+, IE 10+, Opera */ } .hp-hero-container .owl-prev span:before, .hp-hero-container .owl-prev span:after, .hp-hero-container .owl-next span:before, .hp-hero-container .owl-next span:after { display: block; position: absolute; content: ''; border-top: 0 !important; } .hp-hero-container .owl-prev span:before, .hp-hero-container .owl-next span:before { width: 6px; height: 6px; top: -webkit-calc(50% - 1px); top: -moz-calc(50% - 1px); top: calc(50% - 1px); } .hp-hero-container .owl-prev span:after, .hp-hero-container .owl-next span:after { width: 90%; height: 2px; background-color: #FFF; -webkit-transform: translateY(-50%); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: translateY(-50%); /* IE 9 */ -moz-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); /* Firefox 16+, IE 10+, Opera */ top: 50%; } .hp-hero-container .owl-prev { left: 0; -webkit-border-radius: 0px 50px 50px 0px !important; -moz-border-radius: 0px 50px 50px 0px !important; border-radius: 0px 50px 50px 0px !important; } .hp-hero-container .owl-prev span { right: 0; } .hp-hero-container .owl-prev span:before { border: 2px solid #FFF; left: 0; border-right: 0; -webkit-transform: rotate(45deg) translateY(-50%); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: rotate(45deg) translateY(-50%); /* IE 9 */ -moz-transform: rotate(45deg) translateY(-50%); -o-transform: rotate(45deg) translateY(-50%); transform: rotate(45deg) translateY(-50%); /* Firefox 16+, IE 10+, Opera */ } .hp-hero-container .owl-prev span:after { right: 0; } .hp-hero-container .owl-next { right: 0; -webkit-border-radius: 50px 0px 0px 50px !important; -moz-border-radius: 50px 0px 0px 50px !important; border-radius: 50px 0px 0px 50px !important; } .hp-hero-container .owl-next span { left: 0; } .hp-hero-container .owl-next span:before { border: 2px solid #FFF; right: 0; border-left: 0; -webkit-transform: rotate(-45deg) translateY(-50%); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: rotate(-45deg) translateY(-50%); /* IE 9 */ -moz-transform: rotate(-45deg) translateY(-50%); -o-transform: rotate(-45deg) translateY(-50%); transform: rotate(-45deg) translateY(-50%); /* Firefox 16+, IE 10+, Opera */ } .hp-hero-container .owl-next span:after { left: 0; } .hp-hero-container .owl-dots { -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; top: 50%; left: 20px; -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-transform: translateY(-50%); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: translateY(-50%); /* IE 9 */ -moz-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); /* Firefox 16+, IE 10+, Opera */ display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; position: absolute; } @media screen and (min-width: 768px) { .hp-hero-container .owl-dots { left: 50px; } } @media screen and (min-width: 1280px) { .hp-hero-container .owl-dots { left: 70px; } } .hp-hero-container .owl-dots > button { outline: 0 !important; } .hp-hero-container .owl-dots > button > span { border: 2px solid #FFF; margin: 8px 0 !important; background: transparent !important; -webkit-transition: all 0.25s ease-in-out !important; -moz-transition: all 0.25s ease-in-out !important; -o-transition: all 0.25s ease-in-out !important; transition: all 0.25s ease-in-out !important; } .hp-hero-container .owl-dots > button.active > span { background: #FFF !important; } html.no-touch .hp-hero-container .owl-dots > button:hover span { background: #FFF !important; } @media screen and (max-width: 1023px) { .hp-hero-container:before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 60%; z-index: 2; background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, #062436 43%, #0f537e 100%); background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, #062436 43%, #0f537e 100%); background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(43%, #062436), to(#0f537e)); background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, #062436 43%, #0f537e 100%); background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #062436 43%, #0f537e 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#0f537e',GradientType=0 ); } } .hp-hero-slide-image { max-height: 100% !important; width: 100%; height: 100%; display: block; position: relative; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; } .hp-hero-slide-image img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; -o-object-position: center center; object-position: center center; -o-object-fit: cover; object-fit: cover; font-family: "object-fit: cover"; } @media screen and (min-width: 768px) { .hp-hero-slide-image img { -webkit-animation: heroZoomOut 20s ease-out infinite; -moz-animation: heroZoomOut 20s ease-out infinite; -o-animation: heroZoomOut 20s ease-out infinite; animation: heroZoomOut 20s ease-out infinite; } } .hp-hero-slide-image.noAnimation img { -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; } .hp-hero-slide-image:before, .hp-hero-slide-image:after { content: ''; position: absolute; left: 0; right: 0; height: 30vh; background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.75))); background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%); background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%); background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%); background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%); } .hp-hero-slide-image:before { top: -10vh; right: -50%; -webkit-transform: rotate(20deg); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: rotate(20deg); /* IE 9 */ -moz-transform: rotate(20deg); -o-transform: rotate(20deg); transform: rotate(20deg); /* Firefox 16+, IE 10+, Opera */ } @media screen and (min-width: 1024px) { .hp-hero-slide-image:before { top: -17vh; } } .hp-hero-slide-image:after { bottom: 0; right: 0; background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.75))); background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%); background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%); background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%); background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%); } .hp-hero-caption { left: 0; right: 0; z-index: 1; padding: 0 20px; bottom: 100px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; position: absolute; width: -webkit-calc(100% - 40px); width: -moz-calc(100% - 40px); width: calc(100% - 40px); -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s; -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; opacity: 0; } @media screen and (min-width: 768px) { .hp-hero-caption { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-direction: row; flex-direction: row; bottom: 0; padding: 50px; width: -webkit-calc(100% - 100px); width: -moz-calc(100% - 100px); width: calc(100% - 100px); -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: end; -webkit-align-items: flex-end; -moz-box-align: end; -ms-flex-align: end; align-items: flex-end; } } @media screen and (min-width: 1280px) { .hp-hero-caption { padding: 50px 66px; width: -webkit-calc(100% - 132px); width: -moz-calc(100% - 132px); width: calc(100% - 132px); } } .hp-hero-caption-left, .hp-hero-caption-right { position: relative; line-height: 1.4; font-style: normal; font-size: 14px; color: #FFF; } @media screen and (min-width: 768px) { .hp-hero-caption-left, .hp-hero-caption-right { font-size: 15px; width: -webkit-calc(50% - 1em); width: -moz-calc(50% - 1em); width: calc(50% - 1em); } } .hp-hero-caption-left h2 { line-height: 1; margin: 0; font-size: 30px; font-weight: 400; display: block; position: relative; text-align: center; color: #FFF; } @media screen and (min-width: 768px) { .hp-hero-caption-left h2 { text-align: left; font-size: 50px; } } @media screen and (min-width: 1280px) { .hp-hero-caption-left h2 { font-size: 70px; } } .hp-hero-caption-left h2 span { font-weight: 600; } .hp-hero-caption-right { text-align: center; font-size: 16px; margin: .5em auto; } @media screen and (min-width: 768px) { .hp-hero-caption-right { text-align: right; margin: 0; } } .hp-hero-caption-right span { display: inline-block; position: relative; vertical-align: top; } @media screen and (min-width: 768px) { .hp-hero-caption-right span { margin-right: 30px; } } @media screen and (min-width: 1280px) { .hp-hero-caption-right span { margin-right: 40px; } } .hp-hero-caption-right a, .hp-hero-caption-right span { color: #FFF; } .hp-hero-caption-right a { font-weight: 600; } .hp-hero-caption-godown { display: block; position: relative; cursor: pointer; width: 30px; height: 20px; margin: 10px auto 0; } @media screen and (min-width: 768px) { .hp-hero-caption-godown { position: absolute; bottom: 0; right: 30px; margin: 0; height: 70px; } } @media screen and (min-width: 1280px) { .hp-hero-caption-godown { right: 50px; } } .hp-hero-caption-godown span { background: #FFF; outline: 0; left: 50%; bottom: 0; width: 2px; -webkit-transition: all 0.35s ease-in-out 0s; -moz-transition: all 0.35s ease-in-out 0s; -o-transition: all 0.35s ease-in-out 0s; transition: all 0.35s ease-in-out 0s; z-index: 1; height: 100%; -webkit-transform: translateX(-50%); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: translateX(-50%); /* IE 9 */ -moz-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); /* Firefox 16+, IE 10+, Opera */ display: block; position: absolute; } @media screen and (min-width: 768px) { .hp-hero-caption-godown span { width: 2px; background: rgba(255, 255, 255, 0.25); } } .hp-hero-caption-godown span:before, .hp-hero-caption-godown span:after { content: ''; } .hp-hero-caption-godown span:before { background: #FFF; left: 0; top: 0; height: 0; width: 100%; -webkit-animation: upAndDown 1.35s infinite ease; -moz-animation: upAndDown 1.35s infinite ease; -o-animation: upAndDown 1.35s infinite ease; animation: upAndDown 1.35s infinite ease; display: none; } @media screen and (min-width: 768px) { .hp-hero-caption-godown span:before { display: block; position: absolute; } } .hp-hero-caption-godown span:after { bottom: 1px; left: 50%; height: 6px; border: 2px solid #FFF; width: 6px; border-left: none; border-top: none; display: block; position: absolute; -webkit-transform: translateX(-50%) rotate(45deg); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform: translateX(-50%) rotate(45deg); /* IE 9 */ -moz-transform: translateX(-50%) rotate(45deg); -o-transform: translateX(-50%) rotate(45deg); transform: translateX(-50%) rotate(45deg); /* Firefox 16+, IE 10+, Opera */ } @media screen and (min-width: 768px) { .hp-hero-caption-godown span:after { display: none; } } @media screen and (min-width: 768px) { .hp-hero-caption-godown.blue { bottom: -70px; } } .hp-hero-caption-godown.blue span { background: #0F537E; } .hp-hero-caption-godown.blue span:after { border-color: #0F537E; }