html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block } body { line-height: 1 } ol, ul { list-style: none } blockquote, q { quotes: none } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none } table { border-collapse: collapse; border-spacing: 0 } @font-face { font-family: 'montserratlight'; src: url("../static/fonts/montserrat-light-webfont.eot"); src: url("../static/fonts/montserrat-light-webfontd41d.eot?#iefix") format('embedded-opentype'), url("../static/fonts/montserrat-light-webfont.woff2") format('woff2'), url("../static/fonts/montserrat-light-webfont.woff") format('woff'), url("../static/fonts/montserrat-light-webfont.ttf") format('truetype'), url("../static/fonts/montserrat-light-webfont.svg#montserratlight") format('svg'); font-weight: normal; font-style: normal } @font-face { font-family: 'montserratregular'; src: url("../static/fonts/montserrat-regular-webfont.eot"); src: url("../static/fonts/montserrat-regular-webfontd41d.eot?#iefix") format('embedded-opentype'), url("../static/fonts/montserrat-regular-webfont.woff2") format('woff2'), url("../static/fonts/montserrat-regular-webfont.woff") format('woff'), url("../static/fonts/montserrat-regular-webfont.ttf") format('truetype'), url("../static/fonts/montserrat-regular-webfont.svg#montserratregular") format('svg'); font-weight: normal; font-style: normal } @font-face { font-family: 'montserratsemi_bold'; src: url("../static/fonts/montserrat-semibold-webfont.eot"); src: url("../static/fonts/montserrat-semibold-webfontd41d.eot?#iefix") format('embedded-opentype'), url("../static/fonts/montserrat-semibold-webfont.woff2") format('woff2'), url("../static/fonts/montserrat-semibold-webfont.woff") format('woff'), url("../static/fonts/montserrat-semibold-webfont.ttf") format('truetype'), url("../static/fonts/montserrat-semibold-webfont.svg#montserratsemi_bold") format('svg'); font-weight: normal; font-style: normal } * { box-sizing: border-box; -webkit-font-smoothing: antialiased } body, html { height: 100%; width: 100%; overflow: hidden; position: relative } body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif } a { outline: 0 none } #site-wrapper { height: 100%; width: 100%; position: relative; } #site-wrapper > .animate-slide { position: absolute; top: 0; left: 0; height: 100%; width: 100%; } #site-wrapper > .animate-slide.none-transition { transition: all 0s cubic-bezier(.23, 1, .32, 1); } #site-wrapper > .animate-slide.none-transition.none-enter, #site-wrapper > .animate-slide.none-transition.none-leave { transition: all 0s cubic-bezier(.23, 1, .32, 1) } .title { font-family: 'montserratregular', "Helvetica Neue", Helvetica, Arial, sans-serif; } .title.t2 { font-family: 'montserratsemi_bold', "Helvetica Neue", Helvetica, Arial, sans-serif } .title.t3 { font-size: 1.25rem; line-height: 1.875rem } @media only screen and (max-width: 640px) { .title.t0 { font-size: 3.75rem; line-height: 4.0625rem } .title.t2 { font-size: 2rem; line-height: 3.75rem } } @media only screen and (min-width: 641px) { .title.t0 { font-size: 5.5rem; line-height: 5.625rem } .title.t2 { font-size: 2.5rem; line-height: 4.6875rem } } @media only screen and (min-width: 961px) { .title.t2 { font-size: 2.625rem; line-height: 3; //5.625rem } } .va-container { display: table; width: 100%; height: 100%; } .va-container .va-content { position: relative; display: table-cell; vertical-align: middle } .next-step-arrow { background-color: transparent; position: relative; display: block; border-radius: 9999px; overflow: visible; } .next-step-arrow.origin-centered { position: absolute } .next-step-arrow .circle { content: ''; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; border: 1px solid #fff; border-radius: 9999px; transition: all .7s cubic-bezier(.23, 1, .32, 1); -webkit-transform: scale(.95); transform: scale(.95); opacity: .3 } .next-step-arrow .arrow { content: ''; display: block; position: absolute; top: 50%; left: 50%; } .next-step-arrow .arrow { background-image: url("../static/images/sprites/sprite-1x.png"); width: 23px; height: 25px; background-position: 0 0; background-size: 54px 54px; margin-left: -12px; margin-top: -13px } @media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) { .next-step-arrow .arrow { background-image: url("../static/images/sprites/sprite-2x.png"); width: 23px; height: 25px; background-position: 0 0; background-size: 54px 54px; margin-left: -12px; margin-top: -13px } } .next-step-arrow .arrow.over { display: none } .next-step-arrow:hover .circle { -webkit-transform: scale(1); transform: scale(1); opacity: 1 } @media only screen and (max-width: 640px) { .next-step-arrow { height: 60px; width: 60px } .next-step-arrow .arrow { -webkit-transform: scale(.6); transform: scale(.6) } .next-step-arrow.origin-centered { margin: -30px 0 0 -30px } } @media only screen and (min-width: 641px) { .next-step-arrow { height: 80px; width: 80px } .next-step-arrow .arrow { -webkit-transform: scale(.8); transform: scale(.8) } .next-step-arrow.origin-centered { margin: -40px 0 0 -40px } } @media only screen and (min-width: 961px) { .next-step-arrow { height: 100px; width: 100px } .next-step-arrow .arrow { -webkit-transform: scale(1); transform: scale(1) } .next-step-arrow.origin-centered { margin: -50px 0 0 -50px } } .vjs-loading-spinner { width: 40px; height: 40px; background-color: #fff; margin: -20px 0 0 -20px; border-radius: 100%; -webkit-animation: sk-scaleout 1.0s infinite ease-in-out; animation: sk-scaleout 1.0s infinite ease-in-out; } @-webkit-keyframes sk-scaleout { 0% { -webkit-transform: scale(0) } 100% { -webkit-transform: scale(1.0); opacity: 0; } } @keyframes sk-scaleout { 0% { -webkit-transform: scale(0); transform: scale(0); } 100% { -webkit-transform: scale(1.0); transform: scale(1.0); opacity: 0; } } .icon-bg { text-indent: -9999px; display: block; position: relative; overflow: hidden } /** * Swiper 3.1.0 * Most modern mobile touch slider and framework with hardware accelerated transitions * * http://www.idangero.us/swiper/ * * Copyright 2015, Vladimir Kharlampidi * The iDangero.us * http://www.idangero.us/ * * Licensed under MIT * * Released on: July 14, 2015 */ .swiper-container { margin: 0 auto; position: relative; overflow: hidden; /* Fix of Webkit flickering */ z-index: 1; } .swiper-container-no-flexbox .swiper-slide { float: left; } .swiper-container-vertical > .swiper-wrapper { -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; transition-property: -webkit-transform; transition-property: transform; box-sizing: content-box; } .swiper-container-android .swiper-slide, .swiper-wrapper { -webkit-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0); } .swiper-container-multirow > .swiper-wrapper { -webkit-box-lines: multiple; -moz-box-lines: multiple; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; } .swiper-container-free-mode > .swiper-wrapper { transition-timing-function: ease-out; margin: 0 auto; } .swiper-slide { -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; width: 100%; height: 100%; position: relative; } /* a11y */ .swiper-container .swiper-notification { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: -1000; } /* IE10 Windows Phone 8 Fixes */ .swiper-wp8-horizontal { -ms-touch-action: pan-y; touch-action: pan-y; } .swiper-wp8-vertical { -ms-touch-action: pan-x; touch-action: pan-x; } /* Arrows */ .swiper-button-prev, .swiper-button-next { position: absolute; top: 50%; width: 27px; height: 44px; margin-top: -22px; z-index: 10; cursor: pointer; background-size: 27px 44px; background-position: center; background-repeat: no-repeat; } .swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled { opacity: 0.35; cursor: auto; pointer-events: none; } .swiper-button-prev, .swiper-container-rtl .swiper-button-next { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E"); left: 10px; right: auto; } .swiper-button-prev.swiper-button-black, .swiper-container-rtl .swiper-button-next.swiper-button-black { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E"); } .swiper-button-prev.swiper-button-white, .swiper-container-rtl .swiper-button-next.swiper-button-white { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E"); } .swiper-button-next, .swiper-container-rtl .swiper-button-prev { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E"); right: 10px; left: auto; } .swiper-button-next.swiper-button-black, .swiper-container-rtl .swiper-button-prev.swiper-button-black { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E"); } .swiper-button-next.swiper-button-white, .swiper-container-rtl .swiper-button-prev.swiper-button-white { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E"); } /* Pagination Styles */ .swiper-pagination { position: absolute; text-align: center; transition: 300ms; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); z-index: 10; } .swiper-pagination.swiper-pagination-hidden { opacity: 0; } .swiper-pagination-bullet { width: 8px; height: 8px; display: inline-block; border-radius: 100%; background: #000; opacity: 0.2; } button.swiper-pagination-bullet { border: none; margin: 0; padding: 0; box-shadow: none; -moz-appearance: none; -ms-appearance: none; -webkit-appearance: none; appearance: none; } .swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer; } .swiper-pagination-white .swiper-pagination-bullet { background: #fff; } .swiper-pagination-bullet-active { opacity: 1; background: #007aff; } .swiper-pagination-white .swiper-pagination-bullet-active { background: #fff; } .swiper-pagination-black .swiper-pagination-bullet-active { background: #000; } .swiper-container-vertical > .swiper-pagination { right: 10px; top: 50%; -webkit-transform: translate3d(0px, -50%, 0); transform: translate3d(0px, -50%, 0); } .swiper-container-vertical > .swiper-pagination .swiper-pagination-bullet { margin: 5px 0; display: block; } .swiper-container-horizontal > .swiper-pagination { bottom: 10px; left: 0; width: 100%; } .swiper-container-horizontal > .swiper-pagination .swiper-pagination-bullet { margin: 0 5px; } /* 3D Container */ .swiper-container-3d { -webkit-perspective: 1200px; -o-perspective: 1200px; perspective: 1200px; } .swiper-container-3d .swiper-wrapper, .swiper-container-3d .swiper-slide, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-cube-shadow { -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; } .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-slide-shadow-bottom { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; } .swiper-container-3d .swiper-slide-shadow-left { /* Safari 4+, Chrome */ /* Chrome 10+, Safari 5.1+, iOS 5+ */ /* Firefox 3.6-15 */ /* Opera 11.10-12.00 */ background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); /* Firefox 16+, IE10, Opera 12.50+ */ } .swiper-container-3d .swiper-slide-shadow-right { /* Safari 4+, Chrome */ /* Chrome 10+, Safari 5.1+, iOS 5+ */ /* Firefox 3.6-15 */ /* Opera 11.10-12.00 */ background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); /* Firefox 16+, IE10, Opera 12.50+ */ } .swiper-container-3d .swiper-slide-shadow-top { /* Safari 4+, Chrome */ /* Chrome 10+, Safari 5.1+, iOS 5+ */ /* Firefox 3.6-15 */ /* Opera 11.10-12.00 */ background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); /* Firefox 16+, IE10, Opera 12.50+ */ } .swiper-container-3d .swiper-slide-shadow-bottom { /* Safari 4+, Chrome */ /* Chrome 10+, Safari 5.1+, iOS 5+ */ /* Firefox 3.6-15 */ /* Opera 11.10-12.00 */ background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); /* Firefox 16+, IE10, Opera 12.50+ */ } /* Coverflow */ .swiper-container-coverflow .swiper-wrapper { /* Windows 8 IE 10 fix */ -ms-perspective: 1200px; } /* Fade */ .swiper-container-fade.swiper-container-free-mode .swiper-slide { transition-timing-function: ease-out; } .swiper-container-fade .swiper-slide { pointer-events: none; } .swiper-container-fade .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-fade .swiper-slide-active, .swiper-container-fade .swiper-slide-active .swiper-slide-active { pointer-events: auto; } /* Cube */ .swiper-container-cube { overflow: visible; } .swiper-container-cube .swiper-slide { pointer-events: none; visibility: hidden; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; width: 100%; height: 100%; } .swiper-container-cube.swiper-container-rtl .swiper-slide { -webkit-transform-origin: 100% 0; transform-origin: 100% 0; } .swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-next, .swiper-container-cube .swiper-slide-prev, .swiper-container-cube .swiper-slide-next + .swiper-slide { pointer-events: auto; visibility: visible; } .swiper-container-cube .swiper-cube-shadow { position: absolute; left: 0; bottom: 0px; width: 100%; height: 100%; background: #000; opacity: 0.6; -webkit-filter: blur(50px); filter: blur(50px); } .swiper-container-cube.swiper-container-vertical .swiper-cube-shadow { z-index: 0; } /* Scrollbar */ .swiper-scrollbar { border-radius: 10px; position: relative; -ms-touch-action: none; background: rgba(0, 0, 0, 0.1); } .swiper-container-horizontal > .swiper-scrollbar { position: absolute; left: 1%; bottom: 3px; z-index: 50; height: 5px; width: 98%; } .swiper-container-vertical > .swiper-scrollbar { position: absolute; right: 3px; top: 1%; z-index: 50; width: 5px; height: 98%; } .swiper-scrollbar-drag { height: 100%; width: 100%; position: relative; background: rgba(0, 0, 0, 0.5); border-radius: 10px; left: 0; top: 0; } .swiper-scrollbar-cursor-drag { cursor: move; } /* Preloader */ .swiper-lazy-preloader { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 10; -webkit-transform-origin: 50%; transform-origin: 50%; -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite; animation: swiper-preloader-spin 1s steps(12, end) infinite; } .swiper-lazy-preloader:after { display: block; content: ""; width: 100%; height: 100%; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-position: 50%; background-size: 100%; background-repeat: no-repeat; } .swiper-lazy-preloader-white:after { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); } @-webkit-keyframes swiper-preloader-spin { 100% { -webkit-transform: rotate(360deg); } } @keyframes swiper-preloader-spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .bg-video { position: absolute; top: 0; left: 0; z-index: 0; width: 100%; height: 100%; } .bg-video:after { content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #000; opacity: .5; z-index: 2 } .bg-video img { position: absolute; z-index: 0 } .bg-video .video-js { position: absolute; z-index: 1; width: 100% !important; height: 100% !important; top: 0 !important; left: 0 !important; opacity: 1 !important } .bg-video video { background: transparent; position: absolute; z-index: 1; opacity: 0 } html.touch .bg-video video { display: none !important } #finish.main-view { background-color: #f1f1f1; z-index: 20; } #finish.main-view .title { font-family: 'montserratlight', "Helvetica Neue", Helvetica, Arial, sans-serif; } #finish.main-view .title.thanks-to { font-family: 'montserratsemi_bold', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; line-height: 1.5rem; } #finish.main-view .title.now-what { font-family: 'montserratsemi_bold', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 17px; line-height: 1.5rem; } #finish.main-view .section-content { position: relative; z-index: 1; height: 100%; text-align: center; color: #fff; } #finish.main-view .section-content .legend { text-transform: uppercase; } #finish.main-view .section-content .legend a { position: relative; display: inline-block; color: #fff; text-decoration: none } #finish.main-view .section-content .story-by { margin-top: 25px } @media only screen and (max-width: 640px) { #finish.main-view .title { font-size: 1.75rem; line-height: 2.5rem; padding: 0 40px } #finish.main-view .legend { margin: 0 auto; max-width: 80%; font-size: .625rem; line-height: 1rem; padding: 5px 0; letter-spacing: .1em; } #finish.main-view .legend a { opacity: .7 } #finish.main-view .legend.gifs-by { font-size: .3rem; line-height: .7rem } } @media only screen and (min-width: 641px) { #finish.main-view .title { font-size: 2.625rem; line-height: 3.8125rem } #finish.main-view .legend { font-size: .75rem; line-height: 1.875rem; letter-spacing: .3em; } #finish.main-view .legend a::after { display: block; content: ""; height: 1px; width: 100%; position: absolute; left: 0; bottom: 6px; right: auto; background-color: #fff; transition: all 550ms cubic-bezier(.23, 1, .32, 1) } #finish.main-view .legend a:hover::after { left: auto; right: 0; width: 0 } #finish.main-view .legend.gifs-by { font-size: .5rem; line-height: 1rem } } #finish.main-view.animate-slide { transition: -webkit-transform 1s cubic-bezier(.23, 1, .32, 1); transition: transform 1s cubic-bezier(.23, 1, .32, 1); -webkit-transform: translate(0, 0%); transform: translate(0, 0%); } #finish.main-view.animate-slide .thanks-to { transition: all 600ms cubic-bezier(.215, .61, .355, 1) 300ms } #finish.main-view.animate-slide .now-what { transition: all 600ms cubic-bezier(.215, .61, .355, 1) 350ms } #finish.main-view.animate-slide .story-by { transition: all 600ms cubic-bezier(.215, .61, .355, 1) 400ms } #finish.main-view.animate-slide .dev-by { transition: all 600ms cubic-bezier(.215, .61, .355, 1) 450ms } #finish.main-view.animate-slide .design-by { transition: all 600ms cubic-bezier(.215, .61, .355, 1) 500ms } #finish.main-view.animate-slide .gifs-by { transition: all 600ms cubic-bezier(.215, .61, .355, 1) 550ms } #finish.main-view.animate-slide .thanks-to, #finish.main-view.animate-slide .now-what, #finish.main-view.animate-slide .story-by, #finish.main-view.animate-slide .dev-by, #finish.main-view.animate-slide .design-by, #finish.main-view.animate-slide .gifs-by { -webkit-transform: translate(0, 0); transform: translate(0, 0); opacity: 1 } #finish.main-view.slide-enter { -webkit-transform: translate(0, 50%); transform: translate(0, 50%); } #finish.main-view.slide-enter .thanks-to, #finish.main-view.slide-enter .now-what, #finish.main-view.slide-enter .story-by, #finish.main-view.slide-enter .dev-by, #finish.main-view.slide-enter .design-by, #finish.main-view.slide-enter .gifs-by { -webkit-transform: translate(0, 10px); transform: translate(0, 10px); opacity: 0 } #finish.main-view.reverse.slide-leave { transition: -webkit-transform 1s cubic-bezier(.23, 1, .32, 1) 300ms; transition: transform 1s cubic-bezier(.23, 1, .32, 1) 300ms; -webkit-transform: translate(0, 50%); transform: translate(0, 50%); } #finish.main-view.reverse.slide-leave .gifs-by { transition: all 300ms cubic-bezier(.215, .61, .355, 1) 0ms } #finish.main-view.reverse.slide-leave .design-by { transition: all 300ms cubic-bezier(.215, .61, .355, 1) 50ms } #finish.main-view.reverse.slide-leave .dev-by { transition: all 300ms cubic-bezier(.215, .61, .355, 1) 100ms } #finish.main-view.reverse.slide-leave .story-by { transition: all 300ms cubic-bezier(.215, .61, .355, 1) 150ms } #finish.main-view.reverse.slide-leave .now-what { transition: all 300ms cubic-bezier(.215, .61, .355, 1) 200ms } #finish.main-view.reverse.slide-leave .thanks-to { transition: all 300ms cubic-bezier(.215, .61, .355, 1) 250ms } #finish.main-view.reverse.slide-leave .thanks-to, #finish.main-view.reverse.slide-leave .now-what, #finish.main-view.reverse.slide-leave .story-by, #finish.main-view.reverse.slide-leave .dev-by, #finish.main-view.reverse.slide-leave .design-by, #finish.main-view.reverse.slide-leave .gifs-by { opacity: 0; -webkit-transform: translate(0, 10px); transform: translate(0, 10px) } .gallery-view { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: #fff; color: #000; z-index: 2000; -webkit-transform: translate3d(0%, 0, 0); transform: translate3d(0%, 0, 0); } .gallery-view a.close { z-index: 101; position: absolute; top: 30px; left: 50%; margin-left: -15px; display: block; height: 30px; width: 30px; transition: -webkit-transform 550ms cubic-bezier(.23, 1, .32, 1); transition: transform 550ms cubic-bezier(.23, 1, .32, 1); -webkit-transform: rotateZ(0); transform: rotateZ(0); } .gallery-view a.close:hover { -webkit-transform: rotateZ(-90deg); transform: rotateZ(-90deg) } .gallery-view a.close.closing { -webkit-transform: rotateZ(90deg) !important; transform: rotateZ(90deg) !important } .gallery-view a.close:before, .gallery-view a.close:after { display: block; content: ''; height: 2px; background: #000; width: 100%; position: absolute; top: 50%; left: 0; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50% } .gallery-view a.close:before { -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg) } .gallery-view a.close:after { -webkit-transform: rotateZ(-45deg); transform: rotateZ(-45deg) } .gallery-view .counter { z-index: 100; pointer-events: none; position: absolute; font-family: 'montserratregular', "Helvetica Neue", Helvetica, Arial, sans-serif; } .gallery-view .counter span.sep { display: block; position: absolute; background-color: #000; opacity: .3 } .gallery-view .counter .current, .gallery-view .counter .total { position: absolute; text-align: center; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center } @media only screen and (max-width: 640px) { .gallery-view .counter { left: 50%; bottom: 0; width: 100px; height: 40px; margin-left: -50px; font-size: .625rem; letter-spacing: .1em } .gallery-view .counter .current, .gallery-view .counter .total { bottom: 0; height: 100%; width: 50% } .gallery-view .counter .current { left: 0 } .gallery-view .counter .total { right: 0 } .gallery-view .counter span.sep { height: 100%; width: 1px; left: 50%; bottom: 0 } } @media only screen and (min-width: 641px) { .gallery-view .counter { left: 0; top: 50%; width: 60px; height: 160px; margin-top: -80px; font-size: .75rem; letter-spacing: .2em } .gallery-view .counter .current, .gallery-view .counter .total { left: 0; height: 50%; width: 100% } .gallery-view .counter .current { top: 0 } .gallery-view .counter .total { bottom: 0 } .gallery-view .counter span.sep { width: 100%; height: 1px; top: 50%; left: 0 } } .gallery-view .swiper-container { position: absolute; height: 100%; width: 100%; } .gallery-view .swiper-container.swiper-container-moving .swiper-slide { -webkit-transform: scale(.9); transform: scale(.9) } .gallery-view .swiper-container nav { margin: 0; } .gallery-view .swiper-container nav a { z-index: 1000; display: block; position: absolute; height: 100%; width: 200px; background-color: #f1f1f1; opacity: 0; top: 0; } .gallery-view .swiper-container nav a.swiper-nav-prev { left: 0 } .gallery-view .swiper-container nav a.swiper-nav-next { right: 0 } .gallery-view .swiper-container nav a.swiper-button-disabled { display: none } .gallery-view .swiper-container .swiper-slide { transition: -webkit-transform 550ms cubic-bezier(.23, 1, .32, 1); transition: transform 550ms cubic-bezier(.23, 1, .32, 1); display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .gallery-view .swiper-container .swiper-slide.swiper-slide-prev, .gallery-view .swiper-container .swiper-slide.swiper-slide-next { z-index: 100 } @media only screen and (max-width: 640px) { html.touch .gallery-view .swiper-container nav { display: none } } .gallery-view .slide-type-media { display: block !important; } .gallery-view .slide-type-media .slide-content-wrapper { position: relative; height: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center } .gallery-view .slide-type-media .media-container { position: relative } .gallery-view .slide-type-media video, .gallery-view .slide-type-media img { width: auto; height: auto; max-height: 100%; max-width: 100%; margin: 0 auto; display: block; background-color: #f1f1f1 } @media only screen { .gallery-view .slide-type-media { padding: 80px 20px } } @media only screen and (min-width: 641px) { .gallery-view .slide-type-media { padding: 80px } } .gallery-view .slide-type-text .description-container { margin-right: auto; margin-left: auto; } .gallery-view .slide-type-text .description-container .title { font-family: 'montserratregular', "Helvetica Neue", Helvetica, Arial, sans-serif } .gallery-view .slide-type-text .description-container .body { text-align: justify } .gallery-view .slide-type-text .description-container .source .no-link { font-weight: bold } .gallery-view .slide-type-text .description-container .source a { font-weight: bold; border-bottom: 1px solid #000; color: #000; text-decoration: none } @media only screen { .gallery-view .slide-type-text .description-container { padding: 0 20px } .gallery-view .slide-type-text .description-container .title { font-size: 1.25rem; line-height: 1.666875rem } .gallery-view .slide-type-text .description-container .body { margin-top: 15px; font-size: .75rem; line-height: 1.245rem } .gallery-view .slide-type-text .description-container .source { margin-top: 15px; font-size: .75rem } } @media only screen and (min-width: 641px) { .gallery-view .slide-type-text .description-container { max-width: 515px } .gallery-view .slide-type-text .description-container .title { font-size: 1.5625rem; line-height: 2.083125rem } .gallery-view .slide-type-text .description-container .body { margin-top: 15px; font-size: .875rem; line-height: 1.4525rem } .gallery-view .slide-type-text .description-container .source { margin-top: 15px; font-size: .875rem } } @media only screen and (min-width: 961px) { .gallery-view .slide-type-text .description-container .title { font-size: 1.875rem; line-height: 2.5rem } .gallery-view .slide-type-text .description-container .body { margin-top: 20px; font-size: .9375rem; line-height: 1.55625rem } .gallery-view .slide-type-text .description-container .source { margin-top: 20px; font-size: .9375rem } } .gallery-view .slide-type-text .dialog-container { text-align: center; margin-right: auto; margin-left: auto; } .gallery-view .slide-type-text .dialog-container .quote { font-family: 'montserratregular', "Helvetica Neue", Helvetica, Arial, sans-serif } .gallery-view .slide-type-text .dialog-container .author { display: block; } .gallery-view .slide-type-text .dialog-container .author:empty { display: none !important } @media only screen { .gallery-view .slide-type-text .dialog-container { padding: 0 20px } .gallery-view .slide-type-text .dialog-container .quote { font-size: 1.75rem; line-height: 2.2225rem } .gallery-view .slide-type-text .dialog-container .author { margin-top: 20px } } @media only screen and (min-width: 641px) { .gallery-view .slide-type-text .dialog-container { max-width: 80% } .gallery-view .slide-type-text .dialog-container .quote { font-size: 2.5rem; line-height: 3.175rem } .gallery-view .slide-type-text .dialog-container .author { margin-top: 25px } } @media only screen and (min-width: 961px) { .gallery-view .slide-type-text .dialog-container { max-width: 875px } .gallery-view .slide-type-text .dialog-container .quote { font-size: 3.4375rem; line-height: 4.365625rem } .gallery-view .slide-type-text .dialog-container .author { margin-top: 30px } } .gallery-view .vjs-controls-disabled { height: 100% !important; width: 100% !important } .gallery-view .vjs-poster, .gallery-view .vjs-text-track-display, .gallery-view .vjs-big-play-button, .gallery-view .vjs-control-bar, .gallery-view .vjs-error-display, .gallery-view .vjs-caption-settings { display: none !important } .gallery-view .vjs-loading-spinner { display: none; position: absolute; top: 50%; left: 50% } .gallery-view .vjs-error .vjs-loading-spinner, .gallery-view .vjs-waiting .vjs-loading-spinner, .gallery-view .vjs-seeking .vjs-loading-spinner { display: block } .gallery-view .vjs-error .vjs-loading-spinner { background-color: #f00 } .gallery-view.squizz-transition { transition: -webkit-transform 600ms cubic-bezier(.23, 1, .32, 1) 300ms; transition: transform 600ms cubic-bezier(.23, 1, .32, 1) 300ms; } .gallery-view.squizz-transition.squizz-enter { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) } .gallery-view.squizz-transition.squizz-leave { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) } #loading.main-view { background-color: #4e5469; z-index: 900; } #loading.main-view .bg { position: absolute; top: 0; left: 0; z-index: 0; height: 100%; width: 100%; background: url("../static/images/start_poster2.jpg") 50% 50% no-repeat; background-size: cover; -webkit-filter: blur(20px); filter: blur(20px); } #loading.main-view .bg:after { content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #000; opacity: .5; z-index: 2 } #loading.main-view .content { position: relative; z-index: 1; height: 100%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; color: #fff; text-align: center } #loading.main-view .loader-container { position: relative; display: block; margin: 0 auto; } #loading.main-view .loader-container { width: 274px; height: 293px; background-size: 274px 293px; background-image: url("../static/images/loader_bg-1x.png"); } @media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) { #loading.main-view .loader-container { width: 274px; height: 293px; background-size: 274px 293px; background-image: url("../static/images/loader_bg-2x.png"); } } #loading.main-view .loader-container .loader { width: 264px; height: 264px; left: 5px; bottom: 5px; position: absolute } #loading.main-view .perc { font-size: .875rem; letter-spacing: .1em; font-familly: 'montserratlight', "Helvetica Neue", Helvetica, Arial, sans-serif; margin-top: 40px } #loading.main-view.animate-slide { transition: all 800ms cubic-bezier(.23, 1, .32, 1); opacity: 1; -webkit-transform: translate(0, 0%); transform: translate(0, 0%); } #loading.main-view.animate-slide .content { transition: all 300ms cubic-bezier(.23, 1, .32, 1); -webkit-transform: translate(0, 0); transform: translate(0, 0); opacity: 1 } #loading.main-view.animate-slide.slide-enter { transition: opacity 1s cubic-bezier(.23, 1, .32, 1); opacity: 1; } #loading.main-view.animate-slide.slide-enter .content { transition: all 800ms 300ms; -webkit-transform: translate(0, 50px); transform: translate(0, 50px); opacity: 0 } #loading.main-view.animate-slide.slide-leave { transition: opacity 800ms 150ms; opacity: .99; -webkit-transform: translate(0, 0%); transform: translate(0, 0%); } #loading.main-view.animate-slide.slide-leave .content { transition: all 500ms cubic-bezier(.23, 1, .32, 1); -webkit-transform: translate(0, -50px); transform: translate(0, -50px); opacity: 0 } .sound-manager { z-index: 999; position: fixed; opacity: .3; display: none; } .sound-manager .toggler { position: relative; z-index: 1; margin-right: -1px } .sound-manager .toggler { background-image: url("../static/images/sprites/sprite-1x.png"); width: 21px; height: 19px; background-position: -33px 0; background-size: 54px 54px; } @media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) { .sound-manager .toggler { background-image: url("../static/images/sprites/sprite-2x.png"); width: 21px; height: 19px; background-position: -33px 0; background-size: 54px 54px; } } .sound-manager .name-container { z-index: 0; transition: all .6s cubic-bezier(.23, 1, .32, 1); position: absolute; top: 0; left: 22px; padding-left: 48px; -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: rotateZ(90deg) translateX(5px); transform: rotateZ(90deg) translateX(5px); opacity: 0; pointer-events: none } .sound-manager .name { transition: color 550ms cubic-bezier(.23, 1, .32, 1); color: #000; height: 25px; line-height: 25px; display: block; vertical-align: middle; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: rotateZ(180deg); transform: rotateZ(180deg); white-space: nowrap; overflow: hidden; text-decoration: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .sound-manager .name:hover { border-bottom: 1px solid #000 } .sound-manager.inversed .toggler { background-image: url("../static/images/sprites/sprite-1x.png"); width: 21px; height: 19px; background-position: 0 -35px; background-size: 54px 54px; } @media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) { .sound-manager.inversed .toggler { background-image: url("../static/images/sprites/sprite-2x.png"); width: 21px; height: 19px; background-position: 0 -35px; background-size: 54px 54px; } } .sound-manager.inversed .name { color: #fff; } .sound-manager.inversed .name:hover { border-color: #fff } .sound-manager.active { opacity: 1 } .sound-manager:hover .name-container { -webkit-transform: rotateZ(90deg) translateX(0); transform: rotateZ(90deg) translateX(0); opacity: 1; pointer-events: auto } @media only screen and (max-width: 640px) { .sound-manager { top: 52px; right: 20px } } @media only screen and (min-width: 641px) { .sound-manager { top: 72px; right: 30px } } @media only screen and (min-width: 961px) { .sound-manager { right: 50px } } #start.main-view { background-color: #f1f1f1; z-index: 10; } #start.main-view .section-content { position: relative; z-index: 1; height: 100%; text-align: center; color: #fff; } #start.main-view .section-content .va-content { position: relative } #start.main-view .section-content .title { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: default } #start.main-view .section-content .intro { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: default; text-transform: uppercase; letter-spacing: .1em } #start.main-view .section-content .sep { display: block; } #start.main-view .section-content .sep::before { content: ""; display: block; margin: 0 auto; width: 1px; background-color: #fff; opacity: .5 } #start.main-view .section-content .next-container { position: relative; } #start.main-view .section-content .next-container .next-step-arrow { margin-left: auto; margin-right: auto } @media only screen { #start.main-view .section-content .sep { margin: 25px 0 15px; } #start.main-view .section-content .sep::before { height: 20px } #start.main-view .section-content .next-container { margin-top: 20px } #start.main-view .section-content .intro { padding: 0 40px; font-family: 'montserratlight', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: .625rem; line-height: 1.5625rem } } @media only screen and (min-width: 961px) { #start.main-view .section-content .sep { margin: 35px 0 25px; } #start.main-view .section-content .sep::before { height: 40px } #start.main-view .section-content .next-container { margin-top: 40px } #start.main-view .section-content .intro { max-width: 420px; margin-left: auto; margin-right: auto; padding: 0; font-size: .75rem; line-height: 1.875rem; font-family: 'montserratregular', "Helvetica Neue", Helvetica, Arial, sans-serif } } #start.main-view.animate-slide { transition: opacity 1s cubic-bezier(.23, 1, .32, 1); opacity: 1; } #start.main-view.animate-slide .title { transition: all 550ms cubic-bezier(.23, 1, .32, 1) 650ms } #start.main-view.animate-slide .sep { transition: all 550ms cubic-bezier(.23, 1, .32, 1) 800ms } #start.main-view.animate-slide .intro { transition: all 550ms cubic-bezier(.23, 1, .32, 1) 950ms } #start.main-view.animate-slide .next-container { transition: all 550ms cubic-bezier(.23, 1, .32, 1) 1100ms } #start.main-view.animate-slide .title, #start.main-view.animate-slide .sep, #start.main-view.animate-slide .intro, #start.main-view.animate-slide .next-container { -webkit-transform: translate(0, 0); transform: translate(0, 0); opacity: 1 } #start.main-view.animate-slide.slide-leave { transition: -webkit-transform 1s cubic-bezier(.23, 1, .32, 1) 300ms; transition: transform 1s cubic-bezier(.23, 1, .32, 1) 300ms; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); opacity: 1; } #start.main-view.animate-slide.slide-leave .title { transition: all 550ms cubic-bezier(.23, 1, .32, 1) } #start.main-view.animate-slide.slide-leave .sep { transition: all 550ms cubic-bezier(.23, 1, .32, 1) 50ms } #start.main-view.animate-slide.slide-leave .intro { transition: all 550ms cubic-bezier(.23, 1, .32, 1) 100ms } #start.main-view.animate-slide.slide-leave .next-container { transition: all 550ms cubic-bezier(.23, 1, .32, 1) 150ms } #start.main-view.animate-slide.slide-leave .title, #start.main-view.animate-slide.slide-leave .sep, #start.main-view.animate-slide.slide-leave .intro, #start.main-view.animate-slide.slide-leave .next-container { opacity: 0; -webkit-transform: translate(0, -200px); transform: translate(0, -200px) } #start.main-view.animate-slide.slide-enter { transition: opacity 1s cubic-bezier(.23, 1, .32, 1); opacity: .99; } #start.main-view.animate-slide.slide-enter .title, #start.main-view.animate-slide.slide-enter .sep, #start.main-view.animate-slide.slide-enter .intro, #start.main-view.animate-slide.slide-enter .next-container { opacity: 0; -webkit-transform: translate(0, 100px); transform: translate(0, 100px) } #start.main-view.animate-slide.reverse { transition: -webkit-transform 1s cubic-bezier(.23, 1, .32, 1); transition: transform 1s cubic-bezier(.23, 1, .32, 1); -webkit-transform: translate(0, 0%); transform: translate(0, 0%); opacity: 1; } #start.main-view.animate-slide.reverse .title { transition: all 550ms cubic-bezier(.23, 1, .32, 1) 600ms } #start.main-view.animate-slide.reverse .sep { transition: all 550ms cubic-bezier(.23, 1, .32, 1) 450ms } #start.main-view.animate-slide.reverse .intro { transition: all 550ms cubic-bezier(.23, 1, .32, 1) 300ms } #start.main-view.animate-slide.reverse .next-container { transition: all 550ms cubic-bezier(.23, 1, .32, 1) 150ms } #start.main-view.animate-slide.reverse.slide-enter { -webkit-transform: translate(0, -50%); transform: translate(0, -50%); } #start.main-view.animate-slide.reverse.slide-enter .title, #start.main-view.animate-slide.reverse.slide-enter .sep, #start.main-view.animate-slide.reverse.slide-enter .intro, #start.main-view.animate-slide.reverse.slide-enter .next-container { opacity: 0; -webkit-transform: translate(0, -100px); transform: translate(0, -100px) } #steps.main-view { background-color: #fff; z-index: 30; } #steps.main-view .info .subsection-bg { top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: 0; background: #656d86; transition: background 2s cubic-bezier(.23, 1, .32, 1) } #steps.main-view .info .compass { z-index: 100; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #steps.main-view .info .compass .arrow { transition: -webkit-transform 1.5s cubic-bezier(.23, 1, .32, 1); transition: transform 1.5s cubic-bezier(.23, 1, .32, 1); display: block; position: absolute; width: 0; height: 0; top: 50%; left: 50%; border-top: 1px solid #fff; border-left: 1px solid transparent; border-right: 1px solid transparent } #steps.main-view .info .compass .indicators { color: #fff; transition: -webkit-transform 1s cubic-bezier(.23, 1, .32, 1); transition: transform 1s cubic-bezier(.23, 1, .32, 1); position: absolute; width: 0; height: 0; top: 50%; left: 50%; overflow: visible; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; } #steps.main-view .info .compass .indicators span { display: block; position: absolute; width: 20px; height: 20px; line-height: 20px; text-transform: uppercase; text-align: center; font-family: 'montserratregular', "Helvetica Neue", Helvetica, Arial, sans-serif; top: 50%; left: 50%; margin: -10px 0 0 -10px; transition: -webkit-transform 1s cubic-bezier(.23, 1, .32, 1); transition: transform 1s cubic-bezier(.23, 1, .32, 1) } @media only screen and (max-width: 640px) { #steps.main-view .info .compass .indicators span { font-size: .3125rem; } #steps.main-view .info .compass .indicators span.dot { font-size: .4375rem } #steps.main-view .info .compass .indicators span:nth-child(0) { -webkit-transform: translate(3.47296356px, 19.69615506px) rotateZ(-10deg); transform: translate(3.47296356px, 19.69615506px) rotateZ(-10deg); transition-delay: 0ms } #steps.main-view .info .compass .indicators span:nth-child(1) { -webkit-transform: translate(0, 20px) rotateZ(0); transform: translate(0, 20px) rotateZ(0); transition-delay: 20ms } #steps.main-view .info .compass .indicators span:nth-child(2) { -webkit-transform: translate(-3.47296356px, 19.69615506px) rotateZ(10deg); transform: translate(-3.47296356px, 19.69615506px) rotateZ(10deg); transition-delay: 40ms } #steps.main-view .info .compass .indicators span:nth-child(3) { -webkit-transform: translate(-6.84040286px, 18.79385242px) rotateZ(20deg); transform: translate(-6.84040286px, 18.79385242px) rotateZ(20deg); transition-delay: 60ms } #steps.main-view .info .compass .indicators span:nth-child(4) { -webkit-transform: translate(-10px, 17.32050808px) rotateZ(30deg); transform: translate(-10px, 17.32050808px) rotateZ(30deg); transition-delay: 80ms } #steps.main-view .info .compass .indicators span:nth-child(5) { -webkit-transform: translate(-12.8557522px, 15.32088886px) rotateZ(40deg); transform: translate(-12.8557522px, 15.32088886px) rotateZ(40deg); transition-delay: 100ms } #steps.main-view .info .compass .indicators span:nth-child(6) { -webkit-transform: translate(-15.32088886px, 12.8557522px) rotateZ(50deg); transform: translate(-15.32088886px, 12.8557522px) rotateZ(50deg); transition-delay: 120ms } #steps.main-view .info .compass .indicators span:nth-child(7) { -webkit-transform: translate(-17.32050808px, 10px) rotateZ(60deg); transform: translate(-17.32050808px, 10px) rotateZ(60deg); transition-delay: 140ms } #steps.main-view .info .compass .indicators span:nth-child(8) { -webkit-transform: translate(-18.79385242px, 6.84040286px) rotateZ(70deg); transform: translate(-18.79385242px, 6.84040286px) rotateZ(70deg); transition-delay: 160ms } #steps.main-view .info .compass .indicators span:nth-child(9) { -webkit-transform: translate(-19.69615506px, 3.47296356px) rotateZ(80deg); transform: translate(-19.69615506px, 3.47296356px) rotateZ(80deg); transition-delay: 180ms } #steps.main-view .info .compass .indicators span:nth-child(10) { -webkit-transform: translate(-20px, 0) rotateZ(90deg); transform: translate(-20px, 0) rotateZ(90deg); transition-delay: 200ms } #steps.main-view .info .compass .indicators span:nth-child(11) { -webkit-transform: translate(-19.69615506px, -3.47296356px) rotateZ(100deg); transform: translate(-19.69615506px, -3.47296356px) rotateZ(100deg); transition-delay: 220ms } #steps.main-view .info .compass .indicators span:nth-child(12) { -webkit-transform: translate(-18.79385242px, -6.84040286px) rotateZ(110deg); transform: translate(-18.79385242px, -6.84040286px) rotateZ(110deg); transition-delay: 240ms } #steps.main-view .info .compass .indicators span:nth-child(13) { -webkit-transform: translate(-17.32050808px, -10px) rotateZ(120deg); transform: translate(-17.32050808px, -10px) rotateZ(120deg); transition-delay: 260ms } #steps.main-view .info .compass .indicators span:nth-child(14) { -webkit-transform: translate(-15.32088886px, -12.8557522px) rotateZ(130deg); transform: translate(-15.32088886px, -12.8557522px) rotateZ(130deg); transition-delay: 280ms } #steps.main-view .info .compass .indicators span:nth-child(15) { -webkit-transform: translate(-12.8557522px, -15.32088886px) rotateZ(140deg); transform: translate(-12.8557522px, -15.32088886px) rotateZ(140deg); transition-delay: 300ms } #steps.main-view .info .compass .indicators span:nth-child(16) { -webkit-transform: translate(-10px, -17.32050808px) rotateZ(150deg); transform: translate(-10px, -17.32050808px) rotateZ(150deg); transition-delay: 320ms } #steps.main-view .info .compass .indicators span:nth-child(17) { -webkit-transform: translate(-6.84040286px, -18.79385242px) rotateZ(160deg); transform: translate(-6.84040286px, -18.79385242px) rotateZ(160deg); transition-delay: 340ms } #steps.main-view .info .compass .indicators span:nth-child(18) { -webkit-transform: translate(-3.47296356px, -19.69615506px) rotateZ(170deg); transform: translate(-3.47296356px, -19.69615506px) rotateZ(170deg); transition-delay: 360ms } #steps.main-view .info .compass .indicators span:nth-child(19) { -webkit-transform: translate(0, -20px) rotateZ(180deg); transform: translate(0, -20px) rotateZ(180deg); transition-delay: 380ms } #steps.main-view .info .compass .indicators span:nth-child(20) { -webkit-transform: translate(3.47296356px, -19.69615506px) rotateZ(190deg); transform: translate(3.47296356px, -19.69615506px) rotateZ(190deg); transition-delay: 400ms } #steps.main-view .info .compass .indicators span:nth-child(21) { -webkit-transform: translate(6.84040286px, -18.79385242px) rotateZ(200deg); transform: translate(6.84040286px, -18.79385242px) rotateZ(200deg); transition-delay: 420ms } #steps.main-view .info .compass .indicators span:nth-child(22) { -webkit-transform: translate(10px, -17.32050808px) rotateZ(210deg); transform: translate(10px, -17.32050808px) rotateZ(210deg); transition-delay: 440ms } #steps.main-view .info .compass .indicators span:nth-child(23) { -webkit-transform: translate(12.8557522px, -15.32088886px) rotateZ(220deg); transform: translate(12.8557522px, -15.32088886px) rotateZ(220deg); transition-delay: 460ms } #steps.main-view .info .compass .indicators span:nth-child(24) { -webkit-transform: translate(15.32088886px, -12.8557522px) rotateZ(230deg); transform: translate(15.32088886px, -12.8557522px) rotateZ(230deg); transition-delay: 480ms } #steps.main-view .info .compass .indicators span:nth-child(25) { -webkit-transform: translate(17.32050808px, -10px) rotateZ(240deg); transform: translate(17.32050808px, -10px) rotateZ(240deg); transition-delay: 500ms } #steps.main-view .info .compass .indicators span:nth-child(26) { -webkit-transform: translate(18.79385242px, -6.84040286px) rotateZ(250deg); transform: translate(18.79385242px, -6.84040286px) rotateZ(250deg); transition-delay: 520ms } #steps.main-view .info .compass .indicators span:nth-child(27) { -webkit-transform: translate(19.69615506px, -3.47296356px) rotateZ(260deg); transform: translate(19.69615506px, -3.47296356px) rotateZ(260deg); transition-delay: 540ms } #steps.main-view .info .compass .indicators span:nth-child(28) { -webkit-transform: translate(20px, 0) rotateZ(270deg); transform: translate(20px, 0) rotateZ(270deg); transition-delay: 560ms } #steps.main-view .info .compass .indicators span:nth-child(29) { -webkit-transform: translate(19.69615506px, 3.47296356px) rotateZ(280deg); transform: translate(19.69615506px, 3.47296356px) rotateZ(280deg); transition-delay: 580ms } #steps.main-view .info .compass .indicators span:nth-child(30) { -webkit-transform: translate(18.79385242px, 6.84040286px) rotateZ(290deg); transform: translate(18.79385242px, 6.84040286px) rotateZ(290deg); transition-delay: 600ms } #steps.main-view .info .compass .indicators span:nth-child(31) { -webkit-transform: translate(17.32050808px, 10px) rotateZ(300deg); transform: translate(17.32050808px, 10px) rotateZ(300deg); transition-delay: 620ms } #steps.main-view .info .compass .indicators span:nth-child(32) { -webkit-transform: translate(15.32088886px, 12.8557522px) rotateZ(310deg); transform: translate(15.32088886px, 12.8557522px) rotateZ(310deg); transition-delay: 640ms } #steps.main-view .info .compass .indicators span:nth-child(33) { -webkit-transform: translate(12.8557522px, 15.32088886px) rotateZ(320deg); transform: translate(12.8557522px, 15.32088886px) rotateZ(320deg); transition-delay: 660ms } #steps.main-view .info .compass .indicators span:nth-child(34) { -webkit-transform: translate(10px, 17.32050808px) rotateZ(330deg); transform: translate(10px, 17.32050808px) rotateZ(330deg); transition-delay: 680ms } #steps.main-view .info .compass .indicators span:nth-child(35) { -webkit-transform: translate(6.84040286px, 18.79385242px) rotateZ(340deg); transform: translate(6.84040286px, 18.79385242px) rotateZ(340deg); transition-delay: 700ms } #steps.main-view .info .compass .indicators span:nth-child(36) { -webkit-transform: translate(3.47296356px, 19.69615506px) rotateZ(350deg); transform: translate(3.47296356px, 19.69615506px) rotateZ(350deg); transition-delay: 720ms } #steps.main-view .info .compass .arrow { -webkit-transform: translate(0, 20px); transform: translate(0, 20px); border-top-width: 4px; border-left-width: 3px; border-right-width: 3px; margin-left: -3px; margin-top: -3.6px } #steps.main-view .info .compass .indicators span.dot { display: none; } #steps.main-view .info .compass .indicators span.dot:nth-child(3n+1) { display: block } #steps.main-view .info .compass .arrow { margin-top: -10px } } @media only screen and (min-width: 641px) { #steps.main-view .info .compass .indicators span { font-size: .75rem; } #steps.main-view .info .compass .indicators span.dot { font-size: 1.05rem } #steps.main-view .info .compass .indicators span:nth-child(0) { -webkit-transform: translate(20.837781359999997px, 118.17693036px) rotateZ(-10deg); transform: translate(20.837781359999997px, 118.17693036px) rotateZ(-10deg); transition-delay: 0ms } #steps.main-view .info .compass .indicators span:nth-child(1) { -webkit-transform: translate(0, 120px) rotateZ(0); transform: translate(0, 120px) rotateZ(0); transition-delay: 20ms } #steps.main-view .info .compass .indicators span:nth-child(2) { -webkit-transform: translate(-20.837781359999997px, 118.17693036px) rotateZ(10deg); transform: translate(-20.837781359999997px, 118.17693036px) rotateZ(10deg); transition-delay: 40ms } #steps.main-view .info .compass .indicators span:nth-child(3) { -webkit-transform: translate(-41.04241716px, 112.76311451999999px) rotateZ(20deg); transform: translate(-41.04241716px, 112.76311451999999px) rotateZ(20deg); transition-delay: 60ms } #steps.main-view .info .compass .indicators span:nth-child(4) { -webkit-transform: translate(-60px, 103.92304848px) rotateZ(30deg); transform: translate(-60px, 103.92304848px) rotateZ(30deg); transition-delay: 80ms } #steps.main-view .info .compass .indicators span:nth-child(5) { -webkit-transform: translate(-77.1345132px, 91.92533316px) rotateZ(40deg); transform: translate(-77.1345132px, 91.92533316px) rotateZ(40deg); transition-delay: 100ms } #steps.main-view .info .compass .indicators span:nth-child(6) { -webkit-transform: translate(-91.92533316px, 77.1345132px) rotateZ(50deg); transform: translate(-91.92533316px, 77.1345132px) rotateZ(50deg); transition-delay: 120ms } #steps.main-view .info .compass .indicators span:nth-child(7) { -webkit-transform: translate(-103.92304848px, 60px) rotateZ(60deg); transform: translate(-103.92304848px, 60px) rotateZ(60deg); transition-delay: 140ms } #steps.main-view .info .compass .indicators span:nth-child(8) { -webkit-transform: translate(-112.76311451999999px, 41.04241716px) rotateZ(70deg); transform: translate(-112.76311451999999px, 41.04241716px) rotateZ(70deg); transition-delay: 160ms } #steps.main-view .info .compass .indicators span:nth-child(9) { -webkit-transform: translate(-118.17693036px, 20.837781359999997px) rotateZ(80deg); transform: translate(-118.17693036px, 20.837781359999997px) rotateZ(80deg); transition-delay: 180ms } #steps.main-view .info .compass .indicators span:nth-child(10) { -webkit-transform: translate(-120px, 0) rotateZ(90deg); transform: translate(-120px, 0) rotateZ(90deg); transition-delay: 200ms } #steps.main-view .info .compass .indicators span:nth-child(11) { -webkit-transform: translate(-118.17693036px, -20.837781359999997px) rotateZ(100deg); transform: translate(-118.17693036px, -20.837781359999997px) rotateZ(100deg); transition-delay: 220ms } #steps.main-view .info .compass .indicators span:nth-child(12) { -webkit-transform: translate(-112.76311451999999px, -41.04241716px) rotateZ(110deg); transform: translate(-112.76311451999999px, -41.04241716px) rotateZ(110deg); transition-delay: 240ms } #steps.main-view .info .compass .indicators span:nth-child(13) { -webkit-transform: translate(-103.92304848px, -60px) rotateZ(120deg); transform: translate(-103.92304848px, -60px) rotateZ(120deg); transition-delay: 260ms } #steps.main-view .info .compass .indicators span:nth-child(14) { -webkit-transform: translate(-91.92533316px, -77.1345132px) rotateZ(130deg); transform: translate(-91.92533316px, -77.1345132px) rotateZ(130deg); transition-delay: 280ms } #steps.main-view .info .compass .indicators span:nth-child(15) { -webkit-transform: translate(-77.1345132px, -91.92533316px) rotateZ(140deg); transform: translate(-77.1345132px, -91.92533316px) rotateZ(140deg); transition-delay: 300ms } #steps.main-view .info .compass .indicators span:nth-child(16) { -webkit-transform: translate(-60px, -103.92304848px) rotateZ(150deg); transform: translate(-60px, -103.92304848px) rotateZ(150deg); transition-delay: 320ms } #steps.main-view .info .compass .indicators span:nth-child(17) { -webkit-transform: translate(-41.04241716px, -112.76311451999999px) rotateZ(160deg); transform: translate(-41.04241716px, -112.76311451999999px) rotateZ(160deg); transition-delay: 340ms } #steps.main-view .info .compass .indicators span:nth-child(18) { -webkit-transform: translate(-20.837781359999997px, -118.17693036px) rotateZ(170deg); transform: translate(-20.837781359999997px, -118.17693036px) rotateZ(170deg); transition-delay: 360ms } #steps.main-view .info .compass .indicators span:nth-child(19) { -webkit-transform: translate(0, -120px) rotateZ(180deg); transform: translate(0, -120px) rotateZ(180deg); transition-delay: 380ms } #steps.main-view .info .compass .indicators span:nth-child(20) { -webkit-transform: translate(20.837781359999997px, -118.17693036px) rotateZ(190deg); transform: translate(20.837781359999997px, -118.17693036px) rotateZ(190deg); transition-delay: 400ms } #steps.main-view .info .compass .indicators span:nth-child(21) { -webkit-transform: translate(41.04241716px, -112.76311451999999px) rotateZ(200deg); transform: translate(41.04241716px, -112.76311451999999px) rotateZ(200deg); transition-delay: 420ms } #steps.main-view .info .compass .indicators span:nth-child(22) { -webkit-transform: translate(60px, -103.92304848px) rotateZ(210deg); transform: translate(60px, -103.92304848px) rotateZ(210deg); transition-delay: 440ms } #steps.main-view .info .compass .indicators span:nth-child(23) { -webkit-transform: translate(77.1345132px, -91.92533316px) rotateZ(220deg); transform: translate(77.1345132px, -91.92533316px) rotateZ(220deg); transition-delay: 460ms } #steps.main-view .info .compass .indicators span:nth-child(24) { -webkit-transform: translate(91.92533316px, -77.1345132px) rotateZ(230deg); transform: translate(91.92533316px, -77.1345132px) rotateZ(230deg); transition-delay: 480ms } #steps.main-view .info .compass .indicators span:nth-child(25) { -webkit-transform: translate(103.92304848px, -60px) rotateZ(240deg); transform: translate(103.92304848px, -60px) rotateZ(240deg); transition-delay: 500ms } #steps.main-view .info .compass .indicators span:nth-child(26) { -webkit-transform: translate(112.76311451999999px, -41.04241716px) rotateZ(250deg); transform: translate(112.76311451999999px, -41.04241716px) rotateZ(250deg); transition-delay: 520ms } #steps.main-view .info .compass .indicators span:nth-child(27) { -webkit-transform: translate(118.17693036px, -20.837781359999997px) rotateZ(260deg); transform: translate(118.17693036px, -20.837781359999997px) rotateZ(260deg); transition-delay: 540ms } #steps.main-view .info .compass .indicators span:nth-child(28) { -webkit-transform: translate(120px, 0) rotateZ(270deg); transform: translate(120px, 0) rotateZ(270deg); transition-delay: 560ms } #steps.main-view .info .compass .indicators span:nth-child(29) { -webkit-transform: translate(118.17693036px, 20.837781359999997px) rotateZ(280deg); transform: translate(118.17693036px, 20.837781359999997px) rotateZ(280deg); transition-delay: 580ms } #steps.main-view .info .compass .indicators span:nth-child(30) { -webkit-transform: translate(112.76311451999999px, 41.04241716px) rotateZ(290deg); transform: translate(112.76311451999999px, 41.04241716px) rotateZ(290deg); transition-delay: 600ms } #steps.main-view .info .compass .indicators span:nth-child(31) { -webkit-transform: translate(103.92304848px, 60px) rotateZ(300deg); transform: translate(103.92304848px, 60px) rotateZ(300deg); transition-delay: 620ms } #steps.main-view .info .compass .indicators span:nth-child(32) { -webkit-transform: translate(91.92533316px, 77.1345132px) rotateZ(310deg); transform: translate(91.92533316px, 77.1345132px) rotateZ(310deg); transition-delay: 640ms } #steps.main-view .info .compass .indicators span:nth-child(33) { -webkit-transform: translate(77.1345132px, 91.92533316px) rotateZ(320deg); transform: translate(77.1345132px, 91.92533316px) rotateZ(320deg); transition-delay: 660ms } #steps.main-view .info .compass .indicators span:nth-child(34) { -webkit-transform: translate(60px, 103.92304848px) rotateZ(330deg); transform: translate(60px, 103.92304848px) rotateZ(330deg); transition-delay: 680ms } #steps.main-view .info .compass .indicators span:nth-child(35) { -webkit-transform: translate(41.04241716px, 112.76311451999999px) rotateZ(340deg); transform: translate(41.04241716px, 112.76311451999999px) rotateZ(340deg); transition-delay: 700ms } #steps.main-view .info .compass .indicators span:nth-child(36) { -webkit-transform: translate(20.837781359999997px, 118.17693036px) rotateZ(350deg); transform: translate(20.837781359999997px, 118.17693036px) rotateZ(350deg); transition-delay: 720ms } #steps.main-view .info .compass .arrow { -webkit-transform: translate(0, 120px); transform: translate(0, 120px); border-top-width: 10px; border-left-width: 7.5px; border-right-width: 7.5px; margin-left: -7.5px; margin-top: -21.599999999999998px } } @media only screen and (min-width: 961px) { #steps.main-view .info .compass .indicators span { font-size: .875rem; } #steps.main-view .info .compass .indicators span.dot { font-size: 1.225rem } #steps.main-view .info .compass .indicators span:nth-child(0) { -webkit-transform: translate(39.93908094px, 226.50578319px) rotateZ(-10deg); transform: translate(39.93908094px, 226.50578319px) rotateZ(-10deg); transition-delay: 0ms } #steps.main-view .info .compass .indicators span:nth-child(1) { -webkit-transform: translate(0, 230px) rotateZ(0); transform: translate(0, 230px) rotateZ(0); transition-delay: 20ms } #steps.main-view .info .compass .indicators span:nth-child(2) { -webkit-transform: translate(-39.93908094px, 226.50578319px) rotateZ(10deg); transform: translate(-39.93908094px, 226.50578319px) rotateZ(10deg); transition-delay: 40ms } #steps.main-view .info .compass .indicators span:nth-child(3) { -webkit-transform: translate(-78.66463289px, 216.12930283px) rotateZ(20deg); transform: translate(-78.66463289px, 216.12930283px) rotateZ(20deg); transition-delay: 60ms } #steps.main-view .info .compass .indicators span:nth-child(4) { -webkit-transform: translate(-115px, 199.18584292px) rotateZ(30deg); transform: translate(-115px, 199.18584292px) rotateZ(30deg); transition-delay: 80ms } #steps.main-view .info .compass .indicators span:nth-child(5) { -webkit-transform: translate(-147.84115029999998px, 176.19022189px) rotateZ(40deg); transform: translate(-147.84115029999998px, 176.19022189px) rotateZ(40deg); transition-delay: 100ms } #steps.main-view .info .compass .indicators span:nth-child(6) { -webkit-transform: translate(-176.19022189px, 147.84115029999998px) rotateZ(50deg); transform: translate(-176.19022189px, 147.84115029999998px) rotateZ(50deg); transition-delay: 120ms } #steps.main-view .info .compass .indicators span:nth-child(7) { -webkit-transform: translate(-199.18584292px, 115px) rotateZ(60deg); transform: translate(-199.18584292px, 115px) rotateZ(60deg); transition-delay: 140ms } #steps.main-view .info .compass .indicators span:nth-child(8) { -webkit-transform: translate(-216.12930283px, 78.66463289px) rotateZ(70deg); transform: translate(-216.12930283px, 78.66463289px) rotateZ(70deg); transition-delay: 160ms } #steps.main-view .info .compass .indicators span:nth-child(9) { -webkit-transform: translate(-226.50578319px, 39.93908094px) rotateZ(80deg); transform: translate(-226.50578319px, 39.93908094px) rotateZ(80deg); transition-delay: 180ms } #steps.main-view .info .compass .indicators span:nth-child(10) { -webkit-transform: translate(-230px, 0) rotateZ(90deg); transform: translate(-230px, 0) rotateZ(90deg); transition-delay: 200ms } #steps.main-view .info .compass .indicators span:nth-child(11) { -webkit-transform: translate(-226.50578319px, -39.93908094px) rotateZ(100deg); transform: translate(-226.50578319px, -39.93908094px) rotateZ(100deg); transition-delay: 220ms } #steps.main-view .info .compass .indicators span:nth-child(12) { -webkit-transform: translate(-216.12930283px, -78.66463289px) rotateZ(110deg); transform: translate(-216.12930283px, -78.66463289px) rotateZ(110deg); transition-delay: 240ms } #steps.main-view .info .compass .indicators span:nth-child(13) { -webkit-transform: translate(-199.18584292px, -115px) rotateZ(120deg); transform: translate(-199.18584292px, -115px) rotateZ(120deg); transition-delay: 260ms } #steps.main-view .info .compass .indicators span:nth-child(14) { -webkit-transform: translate(-176.19022189px, -147.84115029999998px) rotateZ(130deg); transform: translate(-176.19022189px, -147.84115029999998px) rotateZ(130deg); transition-delay: 280ms } #steps.main-view .info .compass .indicators span:nth-child(15) { -webkit-transform: translate(-147.84115029999998px, -176.19022189px) rotateZ(140deg); transform: translate(-147.84115029999998px, -176.19022189px) rotateZ(140deg); transition-delay: 300ms } #steps.main-view .info .compass .indicators span:nth-child(16) { -webkit-transform: translate(-115px, -199.18584292px) rotateZ(150deg); transform: translate(-115px, -199.18584292px) rotateZ(150deg); transition-delay: 320ms } #steps.main-view .info .compass .indicators span:nth-child(17) { -webkit-transform: translate(-78.66463289px, -216.12930283px) rotateZ(160deg); transform: translate(-78.66463289px, -216.12930283px) rotateZ(160deg); transition-delay: 340ms } #steps.main-view .info .compass .indicators span:nth-child(18) { -webkit-transform: translate(-39.93908094px, -226.50578319px) rotateZ(170deg); transform: translate(-39.93908094px, -226.50578319px) rotateZ(170deg); transition-delay: 360ms } #steps.main-view .info .compass .indicators span:nth-child(19) { -webkit-transform: translate(0, -230px) rotateZ(180deg); transform: translate(0, -230px) rotateZ(180deg); transition-delay: 380ms } #steps.main-view .info .compass .indicators span:nth-child(20) { -webkit-transform: translate(39.93908094px, -226.50578319px) rotateZ(190deg); transform: translate(39.93908094px, -226.50578319px) rotateZ(190deg); transition-delay: 400ms } #steps.main-view .info .compass .indicators span:nth-child(21) { -webkit-transform: translate(78.66463289px, -216.12930283px) rotateZ(200deg); transform: translate(78.66463289px, -216.12930283px) rotateZ(200deg); transition-delay: 420ms } #steps.main-view .info .compass .indicators span:nth-child(22) { -webkit-transform: translate(115px, -199.18584292px) rotateZ(210deg); transform: translate(115px, -199.18584292px) rotateZ(210deg); transition-delay: 440ms } #steps.main-view .info .compass .indicators span:nth-child(23) { -webkit-transform: translate(147.84115029999998px, -176.19022189px) rotateZ(220deg); transform: translate(147.84115029999998px, -176.19022189px) rotateZ(220deg); transition-delay: 460ms } #steps.main-view .info .compass .indicators span:nth-child(24) { -webkit-transform: translate(176.19022189px, -147.84115029999998px) rotateZ(230deg); transform: translate(176.19022189px, -147.84115029999998px) rotateZ(230deg); transition-delay: 480ms } #steps.main-view .info .compass .indicators span:nth-child(25) { -webkit-transform: translate(199.18584292px, -115px) rotateZ(240deg); transform: translate(199.18584292px, -115px) rotateZ(240deg); transition-delay: 500ms } #steps.main-view .info .compass .indicators span:nth-child(26) { -webkit-transform: translate(216.12930283px, -78.66463289px) rotateZ(250deg); transform: translate(216.12930283px, -78.66463289px) rotateZ(250deg); transition-delay: 520ms } #steps.main-view .info .compass .indicators span:nth-child(27) { -webkit-transform: translate(226.50578319px, -39.93908094px) rotateZ(260deg); transform: translate(226.50578319px, -39.93908094px) rotateZ(260deg); transition-delay: 540ms } #steps.main-view .info .compass .indicators span:nth-child(28) { -webkit-transform: translate(230px, 0) rotateZ(270deg); transform: translate(230px, 0) rotateZ(270deg); transition-delay: 560ms } #steps.main-view .info .compass .indicators span:nth-child(29) { -webkit-transform: translate(226.50578319px, 39.93908094px) rotateZ(280deg); transform: translate(226.50578319px, 39.93908094px) rotateZ(280deg); transition-delay: 580ms } #steps.main-view .info .compass .indicators span:nth-child(30) { -webkit-transform: translate(216.12930283px, 78.66463289px) rotateZ(290deg); transform: translate(216.12930283px, 78.66463289px) rotateZ(290deg); transition-delay: 600ms } #steps.main-view .info .compass .indicators span:nth-child(31) { -webkit-transform: translate(199.18584292px, 115px) rotateZ(300deg); transform: translate(199.18584292px, 115px) rotateZ(300deg); transition-delay: 620ms } #steps.main-view .info .compass .indicators span:nth-child(32) { -webkit-transform: translate(176.19022189px, 147.84115029999998px) rotateZ(310deg); transform: translate(176.19022189px, 147.84115029999998px) rotateZ(310deg); transition-delay: 640ms } #steps.main-view .info .compass .indicators span:nth-child(33) { -webkit-transform: translate(147.84115029999998px, 176.19022189px) rotateZ(320deg); transform: translate(147.84115029999998px, 176.19022189px) rotateZ(320deg); transition-delay: 660ms } #steps.main-view .info .compass .indicators span:nth-child(34) { -webkit-transform: translate(115px, 199.18584292px) rotateZ(330deg); transform: translate(115px, 199.18584292px) rotateZ(330deg); transition-delay: 680ms } #steps.main-view .info .compass .indicators span:nth-child(35) { -webkit-transform: translate(78.66463289px, 216.12930283px) rotateZ(340deg); transform: translate(78.66463289px, 216.12930283px) rotateZ(340deg); transition-delay: 700ms } #steps.main-view .info .compass .indicators span:nth-child(36) { -webkit-transform: translate(39.93908094px, 226.50578319px) rotateZ(350deg); transform: translate(39.93908094px, 226.50578319px) rotateZ(350deg); transition-delay: 720ms } #steps.main-view .info .compass .arrow { -webkit-transform: translate(0, 230px); transform: translate(0, 230px); border-top-width: 14px; border-left-width: 10.5px; border-right-width: 10.5px; margin-left: -10.5px; margin-top: -41.4px } } #steps.main-view .info .nulogo { z-index: 101; position: absolute; top: 47%; left: 50%; } #steps.main-view .info .nulogo { width: 174px; height: 213px; background-size: 174px 213px; background-image: url("../static/images/nu_logo_white_213.png"); margin-left: -87px; margin-top: -107px } @media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) { #steps.main-view .info .nulogo { width: 174px; height: 213px; background-size: 174px 213px; background-image: url("../static/images/nu_logo_white_213.png"); margin-left: -87px; margin-top: -107px } } @media only screen and (max-width: 640px) { #steps.main-view .info .nulogo { display: none } } @media only screen and (min-width: 641px) and (max-width: 960px) { #steps.main-view .info .nulogo { width: 87px; height: 106.5px; background-size: 87px 106.5px; margin: -53.25px 0 0 -43.5px } } @media only screen and (min-width: 961px) { #steps.main-view .info .nulogo { width: 174px; height: 213px } } #steps.main-view .info .coordinates, #steps.main-view .info .weather { color: #000; } #steps.main-view .info .coordinates .title, #steps.main-view .info .weather .title { font-family: 'montserratsemi_bold', "Helvetica Neue", Helvetica, Arial, sans-serif } #steps.main-view .info .coordinates .mesures, #steps.main-view .info .weather .mesures { margin-top: 10px; text-transform: uppercase; font-size: .75rem; line-height: 1.125rem; letter-spacing: .2em; font-family: 'montserratlight', "Helvetica Neue", Helvetica, Arial, sans-serif } #steps.main-view .info .coordinates .value { margin-left: 6px } #steps.main-view .info .weather .unit, #steps.main-view .info .weather .value span + span { margin-left: 6px } #steps.main-view .detail { background-color: transparent; } #steps.main-view .detail .lines { text-align: center } #steps.main-view .detail .line { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-backface-visibility: hidden; backface-visibility: hidden } #steps.main-view .detail .topic { text-transform: uppercase; letter-spacing: .2em; font-size: .75rem; font-family: 'montserratlight', "Helvetica Neue", Helvetica, Arial, sans-serif } #steps.main-view .detail .sep { margin: 20px auto 0; width: 56px; height: 1px; } #steps.main-view .detail .sep::before { content: ''; display: block; width: 100%; height: 100%; background-color: #000; opacity: .2 } #steps.main-view .detail .title { margin-top: 10px } #steps.main-view .detail .desc { font-size: .8125rem; line-height: 1.25rem; margin: 0 auto 0 auto; } #steps.main-view .detail .desc a { color: #000; text-decoration: none; display: inline-block; position: relative; } #steps.main-view .detail .desc a:after { display: block; content: ''; height: 1px; width: 100%; bottom: 0; right: 0; position: absolute; background-color: #000; transition: width 300ms cubic-bezier(.23, 1, .32, 1) } #steps.main-view .detail .desc a:hover:after { width: 0% } #steps.main-view .gallery { background-color: #f1f1f1; overflow: hidden; } #steps.main-view .gallery img { position: relative; height: auto; width: auto; display: block; transition: -webkit-transform 1s cubic-bezier(.23, 1, .32, 1); transition: transform 1s cubic-bezier(.23, 1, .32, 1) } #steps.main-view .gallery .img-container { display: block; overflow: hidden; position: absolute; top: 0; left: 0; -webkit-transform: translate(0, 0); transform: translate(0, 0); height: 100%; width: 100%; transition: -webkit-transform 1s cubic-bezier(.23, 1, .32, 1); transition: transform 1s cubic-bezier(.23, 1, .32, 1); } #steps.main-view .gallery .img-container.slide-enter.up { -webkit-transform: translate(0, 100%); transform: translate(0, 100%) } #steps.main-view .gallery .img-container.slide-enter.down { -webkit-transform: translate(0, -100%); transform: translate(0, -100%) } #steps.main-view .gallery .img-container.slide-leave.up { -webkit-transform: translate(0, -50%); transform: translate(0, -50%) } #steps.main-view .gallery .img-container.slide-leave.down { -webkit-transform: translate(0, 50%); transform: translate(0, 50%) } #steps.main-view .gallery:hover img { transition: -webkit-transform 20s cubic-bezier(.23, 1, .32, 1); transition: transform 20s cubic-bezier(.23, 1, .32, 1); -webkit-transform: scale(1.1); transform: scale(1.1) } #steps.main-view .gallery:hover .overlay .letters { color: #fff; margin-right: 50%; } #steps.main-view .gallery:hover .overlay .letters .letter:nth-child(1) { -webkit-transform: translate(-80px, 0); transform: translate(-80px, 0); } #steps.main-view .gallery:hover .overlay .letters .letter:nth-child(2) { -webkit-transform: translate(-40px, 0); transform: translate(-40px, 0); } #steps.main-view .gallery:hover .overlay .letters .letter:nth-child(4) { -webkit-transform: translate(40px, 0); transform: translate(40px, 0) } #steps.main-view .gallery:hover .overlay .letters .letter:nth-child(5) { -webkit-transform: translate(80px, 0); transform: translate(80px, 0) } #steps.main-view .gallery:hover .overlay .letters .letter:nth-child(6) { -webkit-transform: translate(120px, 0); transform: translate(120px, 0) } #steps.main-view .gallery:hover .overlay::before { opacity: .5 } #steps.main-view .gallery .overlay { position: relative; display: block; width: 100%; height: 100%; z-index: 9999; } #steps.main-view .gallery .overlay::before { position: absolute; content: ""; display: block; top: 0; left: 0; bottom: 0; right: 0; background: #000; opacity: 0; transition: opacity 550ms cubic-bezier(.23, 1, .32, 1) } #steps.main-view .gallery .overlay .letters { text-align: center; font-size: .75rem; text-transform: uppercase; font-family: 'montserratsemi_bold', "Helvetica Neue", Helvetica, Arial, sans-serif; color: #fff; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; transition: all .5s cubic-bezier(.86, 0, .07, 1); float: right; } #steps.main-view .gallery .overlay .letters .letter { display: block; padding: 5px 0; transition: -webkit-transform .5s cubic-bezier(.86, 0, .07, 1); transition: transform .5s cubic-bezier(.86, 0, .07, 1); } #steps.main-view .gallery .overlay .letters .letter.letter-more { font-size: 1.4em } #steps.main-view .gallery .overlay .letters .inner-letter { display: inline-block } @media only screen and (max-width: 640px) { #steps.main-view .gallery .overlay .letters { margin-right: 20px } } @media only screen and (min-width: 641px) { #steps.main-view .gallery .overlay .letters { margin-right: 30px } } @media only screen and (min-width: 961px) { #steps.main-view .gallery .overlay .letters { margin-right: 50px } } #steps.main-view .next-step-arrow { z-index: 100; left: 50%; } @media only screen and (max-width: 640px) { #steps.main-view .next-step-arrow { bottom: 15px } } @media only screen and (min-width: 641px) { #steps.main-view .next-step-arrow { bottom: 30px } } @media only screen and (min-width: 961px) { #steps.main-view .next-step-arrow { bottom: 40px } } #steps.main-view .visuals-container { display: none; } #steps.main-view .visuals-container .visuals { position: absolute; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; pointer-events: none } @media only screen and (max-width: 640px) { #steps.main-view .subsection { position: absolute } #steps.main-view .detail { top: 0; left: 0; height: 60%; width: 100%; } #steps.main-view .detail .desc { padding: 0 20px } #steps.main-view .info { display: none !important; top: 50%; left: 0; height: 10%; width: 100%; overflow: hidden; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } #steps.main-view .info .coordinates, #steps.main-view .info .weather { position: relative; width: 50%; } #steps.main-view .info .coordinates .title, #steps.main-view .info .weather .title { font-size: .875rem } #steps.main-view .info .coordinates .mesures, #steps.main-view .info .weather .mesures { margin-top: 4px; font-size: .625rem; line-height: .875rem } #steps.main-view .info .coordinates { text-align: left; padding-left: 15px } #steps.main-view .info .weather { text-align: right; padding-right: 15px } #steps.main-view .gallery { top: 60%; left: 0; height: 40%; width: 100% } } @media only screen and (min-width: 641px) { #steps.main-view .subsection { position: absolute } #steps.main-view .info { z-index: 3; top: 0; left: 0; width: 50%; height: 50%; } #steps.main-view .info .coordinates, #steps.main-view .info .weather { position: absolute } #steps.main-view .info .coordinates { top: 0; left: 0; padding: 40px 0 0 50px } #steps.main-view .info .weather { bottom: 0; left: 0; padding: 0 0 40px 50px } #steps.main-view .detail { z-index: 1; top: 0; right: 0; width: 50%; height: 50%; } #steps.main-view .detail .desc { max-width: 70% } #steps.main-view .gallery { z-index: 2; bottom: 0; right: 0; width: 100%; height: 50% } } @media only screen and (min-width: 961px) { #steps.main-view .info { height: 100% } #steps.main-view .gallery { width: 50%; } #steps.main-view .gallery .overlay .letters { font-size: .9375rem } #steps.main-view .detail .desc { max-width: 70% } #steps.main-view .visuals-container { display: block } } #steps.main-view.slide-transition { transition: -webkit-transform 1s cubic-bezier(.23, 1, .32, 1) 300ms; transition: transform 1s cubic-bezier(.23, 1, .32, 1) 300ms; -webkit-transform: translate(0, 0%); transform: translate(0, 0%); } #steps.main-view.slide-transition .info, #steps.main-view.slide-transition .gallery { -webkit-transform: translate(0, 0); transform: translate(0, 0) } #steps.main-view.slide-transition .gallery { transition: -webkit-transform 550ms cubic-bezier(.23, 1, .32, 1) 600ms; transition: transform 550ms cubic-bezier(.23, 1, .32, 1) 600ms } #steps.main-view.slide-transition .visuals-container .visualanim-transition { transition: all .8s cubic-bezier(.23, 1, .32, 1); -webkit-transform: translate(0, 0); transform: translate(0, 0); opacity: 1 } #steps.main-view.slide-transition .visuals-container .visualanim-enter, #steps.main-view.slide-transition .visuals-container .visualanim-leave { opacity: 0 } #steps.main-view.slide-transition .visuals-container .visualanim-enter { -webkit-transform: translate(0, 80px); transform: translate(0, 80px) } #steps.main-view.slide-transition .visuals-container .visualanim-leave { -webkit-transform: translate(0, -80px); transform: translate(0, -80px) } #steps.main-view.slide-leave { transition: -webkit-transform 1s cubic-bezier(.23, 1, .32, 1) 100ms; transition: transform 1s cubic-bezier(.23, 1, .32, 1) 100ms; -webkit-transform: translate(0, -100%); transform: translate(0, -100%); } #steps.main-view.slide-leave .info, #steps.main-view.slide-leave .gallery { -webkit-transform: translate(0, 0); transform: translate(0, 0) } #steps.main-view.slide-leave .info { transition: -webkit-transform 550ms cubic-bezier(.23, 1, .32, 1); transition: transform 550ms cubic-bezier(.23, 1, .32, 1) } #steps.main-view.slide-leave .gallery { transition: -webkit-transform 550ms cubic-bezier(.23, 1, .32, 1) 100ms; transition: transform 550ms cubic-bezier(.23, 1, .32, 1) 100ms } #steps.main-view.slide-enter { -webkit-transform: translate(0, 100%); transform: translate(0, 100%); } #steps.main-view.slide-enter .gallery { -webkit-transform: translate(0, 200px); transform: translate(0, 200px) } #steps.main-view.reverse { transition: -webkit-transform 1s cubic-bezier(.23, 1, .32, 1) 300ms; transition: transform 1s cubic-bezier(.23, 1, .32, 1) 300ms; } #steps.main-view.reverse .info { -webkit-transform: translate(0, 0); transform: translate(0, 0) } #steps.main-view.reverse .gallery { transition-delay: 0s } #steps.main-view.reverse .visuals-container .visualanim-enter { -webkit-transform: translate(0, -80px); transform: translate(0, -80px) } #steps.main-view.reverse .visuals-container .visualanim-leave { -webkit-transform: translate(0, 80px); transform: translate(0, 80px) } #steps.main-view.reverse.slide-leave { transition: -webkit-transform 1s cubic-bezier(.23, 1, .32, 1) 100ms; transition: transform 1s cubic-bezier(.23, 1, .32, 1) 100ms; -webkit-transform: translate(0, 100%); transform: translate(0, 100%); } #steps.main-view.reverse.slide-leave .gallery { -webkit-transform: translate(0, 200px); transform: translate(0, 200px) } #steps.main-view.reverse.slide-leave .gallery { transition: -webkit-transform 550ms cubic-bezier(.23, 1, .32, 1); transition: transform 550ms cubic-bezier(.23, 1, .32, 1) } #steps.main-view.reverse.slide-enter { -webkit-transform: translate(0, -100%); transform: translate(0, -100%); } #steps.main-view.reverse.slide-enter .gallery { -webkit-transform: translate(0, -200px); transform: translate(0, -200px) } #surprise.main-view { z-index: 9999; background-color: #273039; background-position: 50% 50%; background-size: cover; } #surprise.main-view .gif { z-index: 1; position: absolute; top: 50%; left: 50%; margin: -250px 0 0 -250px; width: 500px; height: 500px; background: url("../static/images/steps/boom/VINCE2.gif") 50% 50% no-repeat } #surprise.main-view .nulogo { z-index: 2; position: absolute; top: 50%; left: 50%; } #surprise.main-view .nulogo { width: 174px; height: 213px; background-size: 174px 213px; background-image: url("../static/images/nu_logo_white_213.png"); margin-left: -87px; margin-top: -107px } @media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) { #surprise.main-view .nulogo { width: 174px; height: 213px; background-size: 174px 213px; background-image: url("../static/images/nu_logo_white_200.png"); margin-left: -87px; margin-top: -107px } } #surprise.main-view .title { z-index: 0; color: #000; width: 70%; position: absolute; left: 15%; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; font-family: 'montserratlight', "Helvetica Neue", Helvetica, Arial, sans-serif; } #surprise.main-view .title.top { top: 8% } #surprise.main-view .title.bottom { bottom: 8% } @media only screen and (max-width: 640px) { #surprise.main-view .title { font-size: 100px } } @media only screen and (min-width: 641px) { #surprise.main-view .title { font-size: 180px } } @media only screen and (min-width: 961px) { #surprise.main-view .title { font-size: 250px } } #surprise.main-view.animate-slide { transition: -webkit-transform .5s cubic-bezier(.23, 1, .32, 1) 0ms; transition: transform .5s cubic-bezier(.23, 1, .32, 1) 0ms; -webkit-transform: translate(0, 0%); transform: translate(0, 0%) } #surprise.main-view.slide-leave { transition: -webkit-transform 1s cubic-bezier(.23, 1, .32, 1) 300ms; transition: transform 1s cubic-bezier(.23, 1, .32, 1) 300ms; -webkit-transform: translate(0, -100%); transform: translate(0, -100%) } #surprise.main-view.slide-enter { -webkit-transform: translate(0, 25%); transform: translate(0, 25%) } #surprise.main-view.reverse { transition: -webkit-transform .5s cubic-bezier(.23, 1, .32, 1) 0ms; transition: transform .5s cubic-bezier(.23, 1, .32, 1) 0ms } #surprise.main-view.reverse.slide-leave { transition: -webkit-transform 1s cubic-bezier(.23, 1, .32, 1) 300ms; transition: transform 1s cubic-bezier(.23, 1, .32, 1) 300ms; -webkit-transform: translate(0, 100%); transform: translate(0, 100%) } #surprise.main-view.reverse.slide-enter { -webkit-transform: translate(0, -25%); transform: translate(0, -25%) } #main-menu .menu-icon { position: fixed; background-color: transparent; width: 19px; height: 14px; z-index: 1000; transition: -webkit-transform 550ms cubic-bezier(.23, 1, .32, 1); transition: transform 550ms cubic-bezier(.23, 1, .32, 1); -webkit-transform: rotate(0); transform: rotate(0); } #main-menu .menu-icon .bar { display: block; position: absolute; left: 0; width: 100%; height: 2px; background-color: #000; transition: all 550ms cubic-bezier(.23, 1, .32, 1); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; } #main-menu .menu-icon .bar.top { top: 0; margin-top: -1px } #main-menu .menu-icon .bar.middle { top: 50%; margin-top: -1px } #main-menu .menu-icon .bar.bottom { bottom: 0; margin-bottom: -1px } #main-menu .menu-icon.close { -webkit-transform: rotate(-180deg); transform: rotate(-180deg); } #main-menu .menu-icon.close .bar.top { top: 50%; -webkit-transform: rotate(45deg); transform: rotate(45deg) } #main-menu .menu-icon.close .bar.middle { opacity: 0 } #main-menu .menu-icon.close .bar.bottom { bottom: 50%; -webkit-transform: rotate(-45deg); transform: rotate(-45deg) } #main-menu nav.grid-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; background-color: transparent; } #main-menu nav.grid-container .grid-item { background-color: #fff; display: block; position: relative; float: left; -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; transition: background-color 550ms cubic-bezier(.23, 1, .32, 1); } #main-menu nav.grid-container .grid-item .title { font-family: 'montserratsemi_bold', "Helvetica Neue", Helvetica, Arial, sans-serif } #main-menu nav.grid-container .grid-item .topic { text-transform: uppercase; font-family: 'montserratlight', "Helvetica Neue", Helvetica, Arial, sans-serif } #main-menu nav.grid-container .grid-item a { display: block; height: 100%; color: #000; opacity: 1; text-decoration: none } #main-menu nav.grid-container .grid-item.highlighted { background-color: #fff !important } #main-menu nav.grid-container .grid-item.faded { border-color: rgba(255, 255, 255, 0.1) !important; } #main-menu nav.grid-container .grid-item.faded a { opacity: .3 !important } @media only screen and (max-width: 640px) { #main-menu .menu-icon { top: 20px; right: 20px } #main-menu nav.grid-container a { padding: 0 20px } #main-menu nav.grid-container .grid-item { width: 100%; height: 8.42%; text-align: left; vertical-align: middle; } #main-menu nav.grid-container .grid-item + .grid-item { border-top: 1px solid transparent } #main-menu nav.grid-container .grid-item.highlighted .title { margin-left: 20px } #main-menu nav.grid-container .title { display: inline-block; font-size: .9375rem; margin-left: 10px; transition: margin-left 550ms cubic-bezier(.23, 1, .32, 1) } #main-menu nav.grid-container .topic { opacity: .3; display: inline-block; font-size: .625rem; min-width: 80px; } #main-menu .illustrations { display: none } } @media only screen and (min-width: 641px) { #main-menu .menu-icon { top: 30px; right: 30px } #main-menu nav.grid-container .grid-item { width: 50%; height: 16.666666666666668%; text-align: center; border-top: 1px solid transparent; border-left: 1px solid transparent; } #main-menu nav.grid-container .grid-item.highlighted .title { -webkit-transform: translate(0, 5px); transform: translate(0, 5px) } #main-menu nav.grid-container .grid-item.highlighted .topic { -webkit-transform: translate(0, -5px); transform: translate(0, -5px) } #main-menu nav.grid-container .title, #main-menu nav.grid-container .topic { transition: -webkit-transform 300ms cubic-bezier(.23, 1, .32, 1); transition: transform 300ms cubic-bezier(.23, 1, .32, 1); -webkit-transform: translate(0, 0); transform: translate(0, 0); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-backface-visibility: hidden; backface-visibility: hidden } #main-menu nav.grid-container .title { margin-top: 10px; display: block; font-size: 1.625rem } #main-menu nav.grid-container .topic { display: block; font-size: .625rem; letter-spacing: .1em } #main-menu .illustrations { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; pointer-events: none; } #main-menu .illustrations .visuals-container { position: relative; width: 100%; height: 100%; } #main-menu .illustrations .visuals-container .visuals { position: absolute } } @media only screen and (min-width: 641px) and (max-width: 960px) { #main-menu nav.grid-container .grid-item:nth-of-type(1), #main-menu nav.grid-container .grid-item:nth-of-type(2) { border-top: 0 none } #main-menu nav.grid-container .grid-item:nth-child(odd) { border-left: 0 none } } @media only screen and (min-width: 961px) { #main-menu .menu-icon { top: 40px; right: 50px } #main-menu nav.grid-container .grid-item { width: 33.333333333333336%; height: 25%; } #main-menu nav.grid-container .grid-item.highlighted .title { margin-top: 20px } #main-menu nav.grid-container .grid-item:nth-of-type(1), #main-menu nav.grid-container .grid-item:nth-of-type(2), #main-menu nav.grid-container .grid-item:nth-of-type(3) { border-top: 0 none } #main-menu nav.grid-container .grid-item:nth-of-type(1), #main-menu nav.grid-container .grid-item:nth-of-type(4), #main-menu nav.grid-container .grid-item:nth-of-type(7), #main-menu nav.grid-container .grid-item:nth-of-type(10) { border-left: 0 none } #main-menu nav.grid-container .title { font-size: 1.875rem } #main-menu nav.grid-container .topic { font-size: .75rem; letter-spacing: .2em } }