@charset "UTF-8"; /*@font-face {*/ /*font-family: Graphik RBC LC;*/ /*src: url(../fonts/graphik-rbc-lc-regular/graphik-rbc-lc-regular.eot);*/ /*src: url(../fonts/graphik-rbc-lc-regular/graphik-rbc-lc-regular.eot?#iefix) format("embedded-opentype"), url(../fonts/graphik-rbc-lc-regular/graphik-rbc-lc-regular.woff2) format("woff2"), url(../fonts/graphik-rbc-lc-regular/graphik-rbc-lc-regular.woff) format("woff"), url(../fonts/graphik-rbc-lc-regular/graphik-rbc-lc-regular.ttf) format("truetype"), url(../fonts/graphik-rbc-lc-regular/graphik-rbc-lc-regular.svg#graphik-rbc-lc-regular) format("svg");*/ /*font-weight: 400;*/ /*font-style: normal*/ /*}*/ /*@font-face {*/ /*font-family: PF Din Text Cond Pro;*/ /*src: url(../fonts/pf-din-text-cond-pro-medium/pf-din-text-cond-pro-medium.eot);*/ /*src: url(../fonts/pf-din-text-cond-pro-medium/pf-din-text-cond-pro-medium.eot?#iefix) format("embedded-opentype"), url(../fonts/pf-din-text-cond-pro-medium/pf-din-text-cond-pro-medium.woff2) format("woff2"), url(../fonts/pf-din-text-cond-pro-medium/pf-din-text-cond-pro-medium.woff) format("woff"), url(../fonts/pf-din-text-cond-pro-medium/pf-din-text-cond-pro-medium.ttf) format("truetype"), url(../fonts/pf-din-text-cond-pro-medium/pf-din-text-cond-pro-medium.svg#pf-din-text-cond-pro-medium) format("svg");*/ /*font-weight: 500;*/ /*font-style: normal*/ /*}*/ @font-face { font-family: 'PingHei'; font-style: normal; font-weight: normal; src: url('../../fonts/PingHei-light.woff'); } article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block } audio, canvas, video { display: inline-block } audio:not([controls]) { display: none; height: 0 } [hidden], template { display: none } html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100% } body { margin: 0 } a { background: transparent } a:focus { outline: thin dotted } a:active, a:hover { outline: 0 } h1 { font-size: 2em; margin: .67em 0 } abbr[title] { border-bottom: 1px dotted } b, strong { font-weight: 700 } dfn { font-style: italic } hr { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; height: 0 } mark { background: #ff0; color: #000 } code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em } pre { white-space: pre-wrap } q { quotes: "\201C" "\201D" "\2018" "\2019" } small { font-size: 80% } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline } sup { top: -.5em } sub { bottom: -.25em } img { border: 0 } svg:not(:root) { overflow: hidden } figure { margin: 0 } fieldset { border: 1px solid silver; margin: 0 2px; padding: .35em .625em .75em } legend { border: 0; padding: 0 } button, input, select, textarea { font-family: inherit; font-size: 100%; margin: 0 } button, input { line-height: normal } button, select { text-transform: none } button, html input[type=button], input[type=reset], input[type=submit] { -webkit-appearance: button; cursor: pointer } button[disabled], html input[disabled] { cursor: default } input[type=checkbox], input[type=radio] { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 } input[type=search] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box } input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration { -webkit-appearance: none } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0 } textarea { overflow: auto; vertical-align: top } table { border-collapse: collapse; border-spacing: 0 } .mCustomScrollbar { -ms-touch-action: pinch-zoom; touch-action: pinch-zoom } .mCustomScrollbar.mCS_no_scrollbar, .mCustomScrollbar.mCS_touch_action { -ms-touch-action: auto; touch-action: auto } .mCustomScrollBox { position: relative; overflow: hidden; height: 100%; max-width: 100%; outline: none; direction: ltr } .mCSB_container { overflow: hidden; width: auto; height: auto } .mCSB_inside > .mCSB_container { margin-right: 30px } .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden { margin-right: 0 } .mCS-dir-rtl > .mCSB_inside > .mCSB_container { margin-right: 0; margin-left: 30px } .mCS-dir-rtl > .mCSB_inside > .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden { margin-left: 0 } .mCSB_scrollTools { position: absolute; width: 16px; height: auto; left: auto; top: 0; right: 0; bottom: 0 } .mCSB_outside + .mCSB_scrollTools { right: -26px } .mCS-dir-rtl > .mCSB_inside > .mCSB_scrollTools, .mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools { right: auto; left: 0 } .mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools { left: -26px } .mCSB_scrollTools .mCSB_draggerContainer { position: absolute; top: 0; left: 0; bottom: 0; right: 0; height: auto } .mCSB_scrollTools a + .mCSB_draggerContainer { margin: 20px 0 } .mCSB_scrollTools .mCSB_draggerRail { width: 2px; height: 100%; margin: 0 auto; -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px } .mCSB_scrollTools .mCSB_dragger { cursor: pointer; width: 100%; height: 30px; z-index: 1 } .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { position: relative; width: 4px; height: 100%; margin: 0 auto; -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; text-align: center } .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar { width: 12px } .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail { width: 8px } .mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonUp { display: block; position: absolute; height: 20px; width: 100%; overflow: hidden; margin: 0 auto; cursor: pointer } .mCSB_scrollTools .mCSB_buttonDown { bottom: 0 } .mCSB_horizontal.mCSB_inside > .mCSB_container { margin-right: 0; margin-bottom: 30px } .mCSB_horizontal.mCSB_outside > .mCSB_container { min-height: 100% } .mCSB_horizontal > .mCSB_container.mCS_no_scrollbar_x.mCS_x_hidden { margin-bottom: 0 } .mCSB_scrollTools.mCSB_scrollTools_horizontal { width: auto; height: 16px; top: auto; right: 0; bottom: 0; left: 0 } .mCustomScrollBox + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox + .mCSB_scrollTools.mCSB_scrollTools_horizontal { bottom: -26px } .mCSB_scrollTools.mCSB_scrollTools_horizontal a + .mCSB_draggerContainer { margin: 0 20px } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail { width: 100%; height: 2px; margin: 7px 0 } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger { width: 30px; height: 100%; left: 0 } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { width: 100%; height: 4px; margin: 6px auto } .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar { height: 12px; margin: 2px auto } .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail { height: 8px; margin: 4px 0 } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft, .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight { display: block; position: absolute; width: 20px; height: 100%; overflow: hidden; margin: 0 auto; cursor: pointer } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft { left: 0 } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight { right: 0 } .mCSB_container_wrapper { position: absolute; height: auto; width: auto; overflow: hidden; top: 0; left: 0; right: 0; bottom: 0; margin-right: 30px; margin-bottom: 30px } .mCSB_container_wrapper > .mCSB_container { padding-right: 30px; padding-bottom: 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box } .mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_vertical { bottom: 20px } .mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_horizontal { right: 20px } .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden + .mCSB_scrollTools.mCSB_scrollTools_vertical { bottom: 0 } .mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal { right: 0 } .mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal { left: 20px } .mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal { left: 0 } .mCS-dir-rtl > .mCSB_inside > .mCSB_container_wrapper { margin-right: 0; margin-left: 30px } .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden > .mCSB_container { padding-right: 0 } .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden > .mCSB_container { padding-bottom: 0 } .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden { margin-right: 0; margin-left: 0 } .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden { margin-bottom: 0 } .mCSB_scrollTools, .mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_scrollTools .mCSB_buttonRight, .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { -webkit-transition: opacity .2s ease-in-out, background-color .2s ease-in-out; -moz-transition: opacity .2s ease-in-out, background-color .2s ease-in-out; -o-transition: opacity .2s ease-in-out, background-color .2s ease-in-out; transition: opacity .2s ease-in-out, background-color .2s ease-in-out } .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail { -webkit-transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out; -moz-transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out; -o-transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out; transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out } .mCSB_scrollTools { opacity: .75; filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)" } .mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools, .mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools { opacity: 0; filter: "alpha(opacity=0)"; -ms-filter: "alpha(opacity=0)" } .mCS-autoHide:hover > .mCustomScrollBox > .mCSB_scrollTools, .mCS-autoHide:hover > .mCustomScrollBox ~ .mCSB_scrollTools, .mCustomScrollbar > .mCustomScrollBox > .mCSB_scrollTools.mCSB_scrollTools_onDrag, .mCustomScrollbar > .mCustomScrollBox ~ .mCSB_scrollTools.mCSB_scrollTools_onDrag, .mCustomScrollBox:hover > .mCSB_scrollTools, .mCustomScrollBox:hover ~ .mCSB_scrollTools { opacity: 1; filter: "alpha(opacity=100)"; -ms-filter: "alpha(opacity=100)" } .mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0, 0, 0, .4); filter: "alpha(opacity=40)"; -ms-filter: "alpha(opacity=40)" } .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #fff; background-color: hsla(0, 0%, 100%, .75); filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)" } .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #fff; background-color: hsla(0, 0%, 100%, .85); filter: "alpha(opacity=85)"; -ms-filter: "alpha(opacity=85)" } .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar { background-color: #fff; background-color: hsla(0, 0%, 100%, .9); filter: "alpha(opacity=90)"; -ms-filter: "alpha(opacity=90)" } .mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_scrollTools .mCSB_buttonRight, .mCSB_scrollTools .mCSB_buttonUp { background-image: url(mCSB_buttons.png); background-repeat: no-repeat; opacity: .4; filter: "alpha(opacity=40)"; -ms-filter: "alpha(opacity=40)" } .mCSB_scrollTools .mCSB_buttonUp { background-position: 0 0 } .mCSB_scrollTools .mCSB_buttonDown { background-position: 0 -20px } .mCSB_scrollTools .mCSB_buttonLeft { background-position: 0 -40px } .mCSB_scrollTools .mCSB_buttonRight { background-position: 0 -56px } .mCSB_scrollTools .mCSB_buttonDown:hover, .mCSB_scrollTools .mCSB_buttonLeft:hover, .mCSB_scrollTools .mCSB_buttonRight:hover, .mCSB_scrollTools .mCSB_buttonUp:hover { opacity: .75; filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)" } .mCSB_scrollTools .mCSB_buttonDown:active, .mCSB_scrollTools .mCSB_buttonLeft:active, .mCSB_scrollTools .mCSB_buttonRight:active, .mCSB_scrollTools .mCSB_buttonUp:active { opacity: .9; filter: "alpha(opacity=90)"; -ms-filter: "alpha(opacity=90)" } .mCS-dark.mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0, 0, 0, .15) } .mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, .75) } .mCS-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: rgba(0, 0, 0, .85) } .mCS-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar { background-color: rgba(0, 0, 0, .9) } .mCS-dark.mCSB_scrollTools .mCSB_buttonUp { background-position: -80px 0 } .mCS-dark.mCSB_scrollTools .mCSB_buttonDown { background-position: -80px -20px } .mCS-dark.mCSB_scrollTools .mCSB_buttonLeft { background-position: -80px -40px } .mCS-dark.mCSB_scrollTools .mCSB_buttonRight { background-position: -80px -56px } .mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail, .mCS-light-2.mCSB_scrollTools .mCSB_draggerRail { width: 4px; background-color: #fff; background-color: hsla(0, 0%, 100%, .1); -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px } .mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-light-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 4px; background-color: #fff; background-color: hsla(0, 0%, 100%, .75); -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px } .mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-light-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-light-2.mCSB_scrollTools_horizontal .mCSB_draggerRail { width: 100%; height: 4px; margin: 6px auto } .mCS-light-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #fff; background-color: hsla(0, 0%, 100%, .85) } .mCS-light-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-light-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar { background-color: #fff; background-color: hsla(0, 0%, 100%, .9) } .mCS-light-2.mCSB_scrollTools .mCSB_buttonUp { background-position: -32px 0 } .mCS-light-2.mCSB_scrollTools .mCSB_buttonDown { background-position: -32px -20px } .mCS-light-2.mCSB_scrollTools .mCSB_buttonLeft { background-position: -40px -40px } .mCS-light-2.mCSB_scrollTools .mCSB_buttonRight { background-position: -40px -56px } .mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0, 0, 0, .1); -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px } .mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, .75); -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px } .mCS-dark-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, .85) } .mCS-dark-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-dark-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, .9) } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonUp { background-position: -112px 0 } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonDown { background-position: -112px -20px } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonLeft { background-position: -120px -40px } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonRight { background-position: -120px -56px } .mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail, .mCS-light-thick.mCSB_scrollTools .mCSB_draggerRail { width: 4px; background-color: #fff; background-color: hsla(0, 0%, 100%, .1); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px } .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-light-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 6px; background-color: #fff; background-color: hsla(0, 0%, 100%, .75); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px } .mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail { width: 100%; height: 4px; margin: 6px 0 } .mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { width: 100%; height: 6px; margin: 5px auto } .mCS-light-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #fff; background-color: hsla(0, 0%, 100%, .85) } .mCS-light-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-light-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar { background-color: #fff; background-color: hsla(0, 0%, 100%, .9) } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonUp { background-position: -16px 0 } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonDown { background-position: -16px -20px } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonLeft { background-position: -20px -40px } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonRight { background-position: -20px -56px } .mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0, 0, 0, .1); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px } .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, .75); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px } .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, .85) } .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, .9) } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonUp { background-position: -96px 0 } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonDown { background-position: -96px -20px } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonLeft { background-position: -100px -40px } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonRight { background-position: -100px -56px } .mCS-light-thin.mCSB_scrollTools .mCSB_draggerRail { background-color: #fff; background-color: hsla(0, 0%, 100%, .1) } .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-light-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 2px } .mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail { width: 100% } .mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { width: 100%; height: 2px; margin: 7px auto } .mCS-dark-thin.mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0, 0, 0, .15) } .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, .75) } .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, .85) } .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, .9) } .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonUp { background-position: -80px 0 } .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonDown { background-position: -80px -20px } .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonLeft { background-position: -80px -40px } .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonRight { background-position: -80px -56px } .mCS-rounded.mCSB_scrollTools .mCSB_draggerRail { background-color: #fff; background-color: hsla(0, 0%, 100%, .15) } .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger, .mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger, .mCS-rounded.mCSB_scrollTools .mCSB_dragger { height: 14px } .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 14px; margin: 0 1px } .mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger { width: 14px } .mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { height: 14px; margin: 1px 0 } .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar { width: 16px; height: 16px; margin: -1px 0 } .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail { width: 4px } .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar { height: 16px; width: 16px; margin: 0 -1px } .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail { height: 4px; margin: 6px 0 } .mCS-rounded.mCSB_scrollTools .mCSB_buttonUp { background-position: 0 -72px } .mCS-rounded.mCSB_scrollTools .mCSB_buttonDown { background-position: 0 -92px } .mCS-rounded.mCSB_scrollTools .mCSB_buttonLeft { background-position: 0 -112px } .mCS-rounded.mCSB_scrollTools .mCSB_buttonRight { background-position: 0 -128px } .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, .75) } .mCS-rounded-dark.mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0, 0, 0, .15) } .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, .85) } .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, .9) } .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonUp { background-position: -80px -72px } .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonDown { background-position: -80px -92px } .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonLeft { background-position: -80px -112px } .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonRight { background-position: -80px -128px } .mCS-rounded-dots-dark.mCSB_scrollTools_vertical .mCSB_draggerRail, .mCS-rounded-dots.mCSB_scrollTools_vertical .mCSB_draggerRail { width: 4px } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail { background-color: transparent; background-position: 50% } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVQYV2NkIAAYiVbw//9/Y6DiM1ANJoyMjGdBbLgJQAX/kU0DKgDLkaQAvxW4HEvQFwCRcxIJK1XznAAAAABJRU5ErkJggg=="); background-repeat: repeat-y; opacity: .3; filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)" } .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail { height: 4px; margin: 6px 0; background-repeat: repeat-x } .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonUp { background-position: -16px -72px } .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonDown { background-position: -16px -92px } .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonLeft { background-position: -20px -112px } .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonRight { background-position: -20px -128px } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYV2NkIAAYSVFgDFR8BqrBBEifBbGRTfiPZhpYjiQFBK3A6l6CvgAAE9kGCd1mvgEAAAAASUVORK5CYII=") } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonUp { background-position: -96px -72px } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonDown { background-position: -96px -92px } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonLeft { background-position: -100px -112px } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonRight { background-position: -100px -128px } .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-repeat: repeat-y; background-image: -moz-linear-gradient(left, hsla(0, 0%, 100%, .5) 0, hsla(0, 0%, 100%, 0) 100%); background-image: -webkit-gradient(linear, left top, right top, color-stop(0, hsla(0, 0%, 100%, .5)), color-stop(100%, hsla(0, 0%, 100%, 0))); background-image: -webkit-linear-gradient(left, hsla(0, 0%, 100%, .5), hsla(0, 0%, 100%, 0)); background-image: -o-linear-gradient(left, hsla(0, 0%, 100%, .5) 0, hsla(0, 0%, 100%, 0) 100%); background-image: -webkit-gradient(linear, left top, right top, from(hsla(0, 0%, 100%, .5)), color-stop(0, hsla(0, 0%, 100%, 0))); background-image: -webkit-linear-gradient(left, hsla(0, 0%, 100%, .5) 0, hsla(0, 0%, 100%, 0)); background-image: -moz-linear-gradient(left, hsla(0, 0%, 100%, .5) 0, hsla(0, 0%, 100%, 0)); background-image: -o-linear-gradient(left, hsla(0, 0%, 100%, .5) 0, hsla(0, 0%, 100%, 0)); background-image: linear-gradient(90deg, hsla(0, 0%, 100%, .5) 0, hsla(0, 0%, 100%, 0)) } .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { background-repeat: repeat-x; background-image: -moz-linear-gradient(top, hsla(0, 0%, 100%, .5) 0, hsla(0, 0%, 100%, 0) 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, hsla(0, 0%, 100%, .5)), color-stop(100%, hsla(0, 0%, 100%, 0))); background-image: -webkit-linear-gradient(top, hsla(0, 0%, 100%, .5), hsla(0, 0%, 100%, 0)); background-image: -o-linear-gradient(top, hsla(0, 0%, 100%, .5) 0, hsla(0, 0%, 100%, 0) 100%); background-image: -webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 100%, .5)), color-stop(0, hsla(0, 0%, 100%, 0))); background-image: -webkit-linear-gradient(top, hsla(0, 0%, 100%, .5) 0, hsla(0, 0%, 100%, 0)); background-image: -moz-linear-gradient(top, hsla(0, 0%, 100%, .5) 0, hsla(0, 0%, 100%, 0)); background-image: -o-linear-gradient(top, hsla(0, 0%, 100%, .5) 0, hsla(0, 0%, 100%, 0)); background-image: linear-gradient(180deg, hsla(0, 0%, 100%, .5) 0, hsla(0, 0%, 100%, 0)) } .mCS-3d-dark.mCSB_scrollTools_vertical .mCSB_dragger, .mCS-3d.mCSB_scrollTools_vertical .mCSB_dragger { height: 70px } .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger { width: 70px } .mCS-3d-dark.mCSB_scrollTools, .mCS-3d.mCSB_scrollTools { opacity: 1; filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)" } .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_draggerRail { -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px } .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-3d.mCSB_scrollTools .mCSB_draggerRail { width: 8px; background-color: #000; background-color: rgba(0, 0, 0, .2); -webkit-box-shadow: inset 1px 0 1px rgba(0, 0, 0, .5), inset -1px 0 1px hsla(0, 0%, 100%, .2); -moz-box-shadow: inset 1px 0 1px rgba(0, 0, 0, .5), inset -1px 0 1px hsla(0, 0%, 100%, .2); box-shadow: inset 1px 0 1px rgba(0, 0, 0, .5), inset -1px 0 1px hsla(0, 0%, 100%, .2) } .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #555 } .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 8px } .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-3d.mCSB_scrollTools_horizontal .mCSB_draggerRail { width: 100%; height: 8px; margin: 4px 0; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .5), inset 0 -1px 1px hsla(0, 0%, 100%, .2); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .5), inset 0 -1px 1px hsla(0, 0%, 100%, .2); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .5), inset 0 -1px 1px hsla(0, 0%, 100%, .2) } .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { width: 100%; height: 8px; margin: 4px auto } .mCS-3d.mCSB_scrollTools .mCSB_buttonUp { background-position: -32px -72px } .mCS-3d.mCSB_scrollTools .mCSB_buttonDown { background-position: -32px -92px } .mCS-3d.mCSB_scrollTools .mCSB_buttonLeft { background-position: -40px -112px } .mCS-3d.mCSB_scrollTools .mCSB_buttonRight { background-position: -40px -128px } .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0, 0, 0, .1); -webkit-box-shadow: inset 1px 0 1px rgba(0, 0, 0, .1); -moz-box-shadow: inset 1px 0 1px rgba(0, 0, 0, .1); box-shadow: inset 1px 0 1px rgba(0, 0, 0, .1) } .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail { -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1) } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonUp { background-position: -112px -72px } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonDown { background-position: -112px -92px } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonLeft { background-position: -120px -112px } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonRight { background-position: -120px -128px } .mCS-3d-thick-dark.mCSB_scrollTools, .mCS-3d-thick.mCSB_scrollTools { opacity: 1; filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)" } .mCS-3d-thick-dark.mCSB_scrollTools, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer, .mCS-3d-thick.mCSB_scrollTools, .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer { -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px } .mCSB_inside + .mCS-3d-thick-dark.mCSB_scrollTools_vertical, .mCSB_inside + .mCS-3d-thick.mCSB_scrollTools_vertical { right: 1px } .mCS-3d-thick-dark.mCSB_scrollTools_vertical, .mCS-3d-thick.mCSB_scrollTools_vertical { -webkit-box-shadow: inset 1px 0 1px rgba(0, 0, 0, .1), inset 0 0 14px rgba(0, 0, 0, .5); -moz-box-shadow: inset 1px 0 1px rgba(0, 0, 0, .1), inset 0 0 14px rgba(0, 0, 0, .5); box-shadow: inset 1px 0 1px rgba(0, 0, 0, .1), inset 0 0 14px rgba(0, 0, 0, .5) } .mCS-3d-thick-dark.mCSB_scrollTools_horizontal, .mCS-3d-thick.mCSB_scrollTools_horizontal { bottom: 1px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1), inset 0 0 14px rgba(0, 0, 0, .5); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1), inset 0 0 14px rgba(0, 0, 0, .5); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1), inset 0 0 14px rgba(0, 0, 0, .5) } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { -webkit-box-shadow: inset 1px 0 0 hsla(0, 0%, 100%, .4); -moz-box-shadow: inset 1px 0 0 hsla(0, 0%, 100%, .4); box-shadow: inset 1px 0 0 hsla(0, 0%, 100%, .4); width: 12px; margin: 2px; position: absolute; height: auto; top: 0; bottom: 0; left: 0; right: 0 } .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { -webkit-box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, .4); -moz-box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, .4); box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, .4) } .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #555 } .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { height: 12px; width: auto } .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer { background-color: #000; background-color: rgba(0, 0, 0, .05); -webkit-box-shadow: inset 1px 1px 16px rgba(0, 0, 0, .1); -moz-box-shadow: inset 1px 1px 16px rgba(0, 0, 0, .1); box-shadow: inset 1px 1px 16px rgba(0, 0, 0, .1) } .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerRail { background-color: transparent } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonUp { background-position: -32px -72px } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonDown { background-position: -32px -92px } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonLeft { background-position: -40px -112px } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonRight { background-position: -40px -128px } .mCS-3d-thick-dark.mCSB_scrollTools { -webkit-box-shadow: inset 0 0 14px rgba(0, 0, 0, .2); -moz-box-shadow: inset 0 0 14px rgba(0, 0, 0, .2); box-shadow: inset 0 0 14px rgba(0, 0, 0, .2) } .mCS-3d-thick-dark.mCSB_scrollTools_horizontal { -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1), inset 0 0 14px rgba(0, 0, 0, .2); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1), inset 0 0 14px rgba(0, 0, 0, .2); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1), inset 0 0 14px rgba(0, 0, 0, .2) } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { -webkit-box-shadow: inset 1px 0 0 hsla(0, 0%, 100%, .4), inset -1px 0 0 rgba(0, 0, 0, .2); -moz-box-shadow: inset 1px 0 0 hsla(0, 0%, 100%, .4), inset -1px 0 0 rgba(0, 0, 0, .2); box-shadow: inset 1px 0 0 hsla(0, 0%, 100%, .4), inset -1px 0 0 rgba(0, 0, 0, .2) } .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { -webkit-box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, .4), inset 0 -1px 0 rgba(0, 0, 0, .2); -moz-box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, .4), inset 0 -1px 0 rgba(0, 0, 0, .2); box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, .4), inset 0 -1px 0 rgba(0, 0, 0, .2) } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #777 } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer { background-color: #fff; background-color: rgba(0, 0, 0, .05); -webkit-box-shadow: inset 1px 1px 16px rgba(0, 0, 0, .1); -moz-box-shadow: inset 1px 1px 16px rgba(0, 0, 0, .1); box-shadow: inset 1px 1px 16px rgba(0, 0, 0, .1) } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerRail { background-color: transparent } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonUp { background-position: -112px -72px } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonDown { background-position: -112px -92px } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonLeft { background-position: -120px -112px } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonRight { background-position: -120px -128px } .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical, .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical { right: 0; margin: 12px 0 } .mCustomScrollBox.mCS-minimal + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools.mCSB_scrollTools_horizontal { bottom: 0; margin: 0 12px } .mCS-dir-rtl > .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical, .mCS-dir-rtl > .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical { left: 0; right: auto } .mCS-minimal-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-minimal.mCSB_scrollTools .mCSB_draggerRail { background-color: transparent } .mCS-minimal-dark.mCSB_scrollTools_vertical .mCSB_dragger, .mCS-minimal.mCSB_scrollTools_vertical .mCSB_dragger { height: 50px } .mCS-minimal-dark.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-minimal.mCSB_scrollTools_horizontal .mCSB_dragger { width: 50px } .mCS-minimal.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #fff; background-color: hsla(0, 0%, 100%, .2); filter: "alpha(opacity=20)"; -ms-filter: "alpha(opacity=20)" } .mCS-minimal.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-minimal.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar { background-color: #fff; background-color: hsla(0, 0%, 100%, .5); filter: "alpha(opacity=50)"; -ms-filter: "alpha(opacity=50)" } .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, .2); filter: "alpha(opacity=20)"; -ms-filter: "alpha(opacity=20)" } .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, .5); filter: "alpha(opacity=50)"; -ms-filter: "alpha(opacity=50)" } .mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail, .mCS-light-3.mCSB_scrollTools .mCSB_draggerRail { width: 6px; background-color: #000; background-color: rgba(0, 0, 0, .2) } .mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-light-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 6px } .mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-light-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-light-3.mCSB_scrollTools_horizontal .mCSB_draggerRail { width: 100%; height: 6px; margin: 5px 0 } .mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail { width: 12px } .mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail { height: 12px; margin: 2px 0 } .mCS-light-3.mCSB_scrollTools .mCSB_buttonUp { background-position: -32px -72px } .mCS-light-3.mCSB_scrollTools .mCSB_buttonDown { background-position: -32px -92px } .mCS-light-3.mCSB_scrollTools .mCSB_buttonLeft { background-position: -40px -112px } .mCS-light-3.mCSB_scrollTools .mCSB_buttonRight { background-position: -40px -128px } .mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, .75) } .mCS-dark-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, .85) } .mCS-dark-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-dark-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, .9) } .mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0, 0, 0, .1) } .mCS-dark-3.mCSB_scrollTools .mCSB_buttonUp { background-position: -112px -72px } .mCS-dark-3.mCSB_scrollTools .mCSB_buttonDown { background-position: -112px -92px } .mCS-dark-3.mCSB_scrollTools .mCSB_buttonLeft { background-position: -120px -112px } .mCS-dark-3.mCSB_scrollTools .mCSB_buttonRight { background-position: -120px -128px } .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset.mCSB_scrollTools .mCSB_draggerRail { width: 12px; background-color: #000; background-color: rgba(0, 0, 0, .2) } .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 6px; margin: 3px 5px; position: absolute; height: auto; top: 0; bottom: 0; left: 0; right: 0 } .mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { height: 6px; margin: 5px 3px; position: absolute; width: auto; top: 0; bottom: 0; left: 0; right: 0 } .mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset.mCSB_scrollTools_horizontal .mCSB_draggerRail { width: 100%; height: 12px; margin: 2px 0 } .mCS-inset-2.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset.mCSB_scrollTools .mCSB_buttonUp { background-position: -32px -72px } .mCS-inset-2.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset.mCSB_scrollTools .mCSB_buttonDown { background-position: -32px -92px } .mCS-inset-2.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset.mCSB_scrollTools .mCSB_buttonLeft { background-position: -40px -112px } .mCS-inset-2.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset.mCSB_scrollTools .mCSB_buttonRight { background-position: -40px -128px } .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, .75) } .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, .85) } .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, .9) } .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0, 0, 0, .1) } .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonUp { background-position: -112px -72px } .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonDown { background-position: -112px -92px } .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonLeft { background-position: -120px -112px } .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonRight { background-position: -120px -128px } .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail { background-color: transparent; border-color: #fff; border: 1px solid hsla(0, 0%, 100%, .2); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box } .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail { border-color: #000; border-color: rgba(0, 0, 0, .2) } .mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail { background-color: #fff; background-color: hsla(0, 0%, 100%, .6) } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0, 0, 0, .6) } .mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, .75) } .mCS-inset-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, .85) } .mCS-inset-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, .9) } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #fff; background-color: hsla(0, 0%, 100%, .75) } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #fff; background-color: hsla(0, 0%, 100%, .85) } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar { background-color: #fff; background-color: hsla(0, 0%, 100%, .9) } .mCSB_inside > .mCSB_container { margin-right: 0 } .mCSB_scrollTools { z-index: -1 !important; opacity: 0 !important } .button { position: relative; display: inline-block; outline: none; border: none; padding: 13px 15px; font-family:PingHei; font-weight: 400; font-size: 18px; line-height: 19px; text-align: center; text-decoration: none; color: #ebebeb; background: #41494a; cursor: pointer; -webkit-transition: background-color .3s, opacity .3s; -o-transition: background-color .3s, opacity .3s; -moz-transition: background-color .3s, opacity .3s; transition: background-color .3s, opacity .3s } .button:before { content: ""; position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 100%; background-color: #0cb14b; -webkit-transform: scaleX(0); -moz-transform: scaleX(0); -ms-transform: scaleX(0); -o-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; -moz-transform-origin: 0 50%; -ms-transform-origin: 0 50%; -o-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition: -webkit-transform .5s; transition: -webkit-transform .5s; -o-transition: -o-transform .5s; -moz-transition: transform .5s, -moz-transform .5s; transition: transform .5s; transition: transform .5s, -webkit-transform .5s, -moz-transform .5s, -o-transform .5s } .button span { position: relative; z-index: 2; -webkit-transition: opacity .3s; -o-transition: opacity .3s; -moz-transition: opacity .3s; transition: opacity .3s } .button:hover:before { -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -ms-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1) } .button[disabled] { pointer-events: none; -ms-touch-action: none; touch-action: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .button[disabled]:before { -webkit-transform: scaleX(0); -moz-transform: scaleX(0); -ms-transform: scaleX(0); -o-transform: scaleX(0); transform: scaleX(0) } .button[disabled] span { opacity: .5 } .button--green { background-color: #0cb14b } .button--green:before { background-color: #41494a } .button--simple-hover:before { opacity: 0; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; -webkit-transition: opacity .3s; -o-transition: opacity .3s; -moz-transition: opacity .3s; transition: opacity .3s } .button--simple-hover:hover:before { opacity: 1 } .button--simple-hover:hover[disabled]:before { opacity: 0 } @media (orientation: portrait) { .mobile .button { padding: 26px 25px 27px; font-size: 32px; line-height: 32px } } @media (orientation: portrait) and (max-width: 640px) { .mobile .button { padding: 4.6875vw 13.75vw 3.90625vw; font-size: 5vw; line-height: 5vw } } @media (orientation: landscape) { .mobile .button { padding: 20px 22px; font-size: 32px; line-height: 33px } } @media (orientation: landscape) and (max-width: 1136px) { .mobile .button { padding: 1.76056vw 1.93662vw; font-size: 2.8169vw; line-height: 2.90493vw } } .desktop-only .button { width: 226px } *, :after, :before { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit } html { max-width: 100vw; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box } html.page-index { overflow: hidden } html.on-finish { overflow: visible } body { max-width: 100vw; background-color: #f0f0f0 } .page-index body { overflow: hidden } .on-finish body { overflow: visible } .back-link { margin-bottom: 20px; font-weight: 300; font-size: 12px; line-height: 25px; text-decoration: none; color: #1fb150 } .back-link, .back-link > * { display: inline-block; vertical-align: middle } .back-link img { margin-right: 8px } .mobile .back-link img { width: 38px; height: 24px } @media (orientation: portrait) and (max-width: 640px) { .mobile .back-link img { width: 5.9375vw; height: 3.75vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile .back-link img { width: 3.34507vw; height: 2.11268vw } } .back-link:hover { opacity: .6 } .mobile .back-link.interview { margin-bottom: 45px } @media (orientation: portrait) and (max-width: 640px) { .mobile .back-link.interview { margin-bottom: 7.03125vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile .back-link.interview { margin-bottom: 3.96127vw } } .mobile .back-link { margin-bottom: 60px; font-size: 26px } @media (orientation: portrait) and (max-width: 640px) { .mobile .back-link { margin-bottom: 9.375vw; font-size: 4.0625vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile .back-link { margin-bottom: 5.28169vw; font-size: 2.28873vw } } .site-container { overflow: hidden; opacity: 0; -webkit-transition: opacity .5s; -o-transition: opacity .5s; -moz-transition: opacity .5s; transition: opacity .5s } .site-container > .slider { position: relative } .site-container.visible { opacity: 1 } .page-index .site-container { height: 100vh } .on-finish .site-container { height: auto } blockquote { position: relative; margin: 0 auto 40px; padding-right: 130px; max-width: 930px; font-weight: 300; font-size: 21px; line-height: 32px } blockquote:before { content: "„"; position: absolute; left: -55px; top: -110px; font-weight: 300; font-size: 140px; line-height: 125px; color: #09b34d } .mobile blockquote:before { display: none } .mobile blockquote { margin-bottom: 0; padding: 80px 36px; font-size: 45px; line-height: 53px; text-align: center } @media (orientation: portrait) and (max-width: 640px) { .mobile blockquote { padding: 12.5vw 5.625vw; font-size: 7.03125vw; line-height: 8.28125vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile blockquote { padding: 7.04225vw 3.16901vw; font-size: 3.96127vw; line-height: 4.66549vw } } .text-center { text-align: center } .row { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex } .row.w-2 .column { -webkit-box-flex: 0; -webkit-flex: 0 0 50%; -moz-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50% } .mobile .row.w-2 .column { -webkit-box-flex: 0; -webkit-flex: 0 0 100%; -moz-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100% } .row.align-middle { -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center } .row .column { -webkit-box-flex: 1; -webkit-flex: 1 1 0; -moz-box-flex: 1; -ms-flex: 1 1 0px; flex: 1 1 0 } .row .column.w-8 { -webkit-box-flex: 0; -webkit-flex: 0 0 80%; -moz-box-flex: 0; -ms-flex: 0 0 80%; flex: 0 0 80% } .mobile .row .column.w-8 { -webkit-box-flex: 0; -webkit-flex: 0 0 100%; -moz-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100% } .mobile .row { display: block; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap } .black-link { position: relative; display: inline-block; font-size: 15px; line-height: 18px; text-decoration: none; color: #1a1a1a } .black-link b { font-weight: 500 } .mobile .black-link b { display: block; margin: 0 auto; width: 333px; font-size: 30px; line-height: 36px } @media (orientation: portrait) and (max-width: 640px) { .mobile .black-link b { width: 52.03125vw; font-size: 4.6875vw; line-height: 5.625vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile .black-link b { width: 29.31338vw; font-size: 2.64085vw; line-height: 3.16901vw } } .black-link:hover { color: #09b34d } .mobile .black-link { left: auto !important; right: auto !important } html.mobile .desktop-only, html:not(.mobile) .mobile-only { display: none } .header { position: fixed; left: 0; top: 0; z-index: 1000; width: 100% } .header .logo-rbc { position: absolute; left: 21px; top: 22px; width: 59px; height: 19px; font-size: 0; background: url(../images/logo-rbc.svg) 0 0/contain no-repeat } .header .project-label { position: absolute; left: 84px; top: 26px; font-family: 'PingHei'; font-size: 16px; line-height: 20px; letter-spacing: .25px; color: #181818 } .header .logo-intouch { position: absolute; right: 18px; top: 20px; width: 120px; height: 18px; font-size: 0; background: url(../images/logo-intouch.svg) 0 0/contain no-repeat } .content-page .header { height: 60px; background-color: #fff } .intro { text-align: center } .intro .pre-title { font-family: Cuprum, sans-serif; font-size: 16px; line-height: 16px; letter-spacing: .3em; text-align: center; text-indent: 12px; text-transform: uppercase; color: #41494a } .mobile .intro .pre-title { margin-bottom: 16px; font-size: 30px; line-height: 30px } @media (orientation: portrait) and (max-width: 640px) { .mobile .intro .pre-title { margin-bottom: 2.5vw; font-size: 4.6875vw; line-height: 4.6875vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile .intro .pre-title { margin-bottom: 1.40845vw; font-size: 2.64085vw; line-height: 2.64085vw } } .intro .title { margin-top: 18px; padding-left: 1px; font-family: PF Din Text Cond Pro, sans-serif; font-weight: 500; font-size: 62px; line-height: 53px; letter-spacing: -.006em; text-align: center; text-indent: 5px; color: #41494a } .mobile .intro .title { margin: 0 auto 45px; font-size: 70px; line-height: 65px; text-align: center } .mobile .intro .title.interview { width: 450px } @media (orientation: portrait) and (max-width: 640px) { .mobile .intro .title.interview { width: 70.3125vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile .intro .title.interview { width: 39.61268vw } } @media (orientation: portrait) and (max-width: 640px) { .mobile .intro .title { margin: 0 auto 7.03125vw; font-size: 10.9375vw; line-height: 10.15625vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile .intro .title { margin: 0 auto 3.96127vw; font-size: 6.16197vw; line-height: 5.72183vw } } .intro .text { margin: 34px auto 0; width: 550px; font-family: 'PingHei'; font-weight: 300; font-size: 24px; line-height: 25px; letter-spacing: .025em; text-align: center; color: #181818 } .intro .interviewer { position: relative; margin: -25px auto 50px; max-width: 280px; font-family: Cuprum, sans-serif; font-weight: 400; font-size: 16px; color: #41494a } .intro .interviewer .image { display: inline-block; border: 9px solid rgba(198, 206, 221, .2); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50% } .intro .interviewer .image img { display: block; border: 6px solid #c6cedd; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50% } .mobile .intro .interviewer .image img { border: 9px solid #c6cedd } @media (orientation: portrait) and (max-width: 640px) { .mobile .intro .interviewer .image img { border-width: 1.40625vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile .intro .interviewer .image img { border-width: .79225vw } } .mobile .intro .interviewer .image { border: 14px solid rgba(198, 206, 221, .2) } @media (orientation: portrait) and (max-width: 640px) { .mobile .intro .interviewer .image { border-width: 2.1875vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile .intro .interviewer .image { border-width: 1.23239vw } } .intro .interviewer .name { margin-bottom: 10px; text-transform: uppercase } .mobile .intro .interviewer .name { margin-bottom: 8px; font-size: 30px; letter-spacing: 9px } @media (orientation: portrait) and (max-width: 640px) { .mobile .intro .interviewer .name { margin-bottom: 1.25vw; font-size: 4.6875vw; letter-spacing: 1.40625vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile .intro .interviewer .name { margin-bottom: .70423vw; font-size: 2.64085vw; letter-spacing: .79225vw } } .mobile .intro .interviewer .post { margin: 0 auto; width: 430px; line-height: 30px; letter-spacing: .5px } @media (orientation: portrait) and (max-width: 640px) { .mobile .intro .interviewer .post { width: 67.1875vw; line-height: 4.6875vw; letter-spacing: .07812vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile .intro .interviewer .post { width: 37.85211vw; line-height: 2.64085vw; letter-spacing: .04401vw } } .intro .interviewer.tree-1 { display: none } @media (max-width: 640px) { .intro .interviewer.tree-1 { display: block; margin: 0; width: 13.28125vw; position: absolute; left: 0; bottom: -17.8125vw } } .intro .interviewer.tree-2 { display: none } @media (max-width: 640px) { .intro .interviewer.tree-2 { display: block; margin: 0; width: 19.21875vw; position: absolute; right: 5.78125vw; bottom: -20.78125vw } } .intro .interviewer.tree-3 { display: none } @media (max-width: 640px) { .intro .interviewer.tree-3 { display: block; margin: 0; width: 16.875vw; position: absolute; right: 3.28125vw; bottom: -37.34375vw } } .mobile .intro .interviewer { margin: -25px 0 100px; padding: 0 36px; max-width: 100%; font-size: 28px } @media (orientation: portrait) and (max-width: 640px) { .mobile .intro .interviewer { margin: -3.90625vw 0 15.625vw; padding: 0 5.625vw; font-size: 4.375vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile .intro .interviewer { margin: -2.2007vw 0 8.80282vw; padding: 0 3.16901vw; font-size: 2.46479vw } } @media (max-width: 640px) { .mobile .intro .interviewer .tree-1, .mobile .intro .interviewer .tree-2, .mobile .intro .interviewer .tree-3 { margin: 0; padding: 0 } } .page-index .intro { position: absolute; left: 50%; top: 49px; z-index: 1000; opacity: 0; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%) } @media (max-height: 700px) { .page-index .intro { top: 35px } } .mobile .intro { padding-top: 137px } @media (orientation: portrait) and (max-width: 640px) { .mobile .intro { padding-top: 21.40625vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile .intro { padding-top: 12.05986vw } } .side-links { position: absolute; right: 0; top: 50%; z-index: 999; overflow: hidden; margin-top:-96px; } .side-links a { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 6px; outline: none; padding: 8px 75px 5px 10px; width: 162px; height: 60px; font-family:PingHei; font-weight: 300; font-size: 18px; line-height: 20px; text-align: center; text-decoration: none; color: #181818; background: hsla(0, 0%, 100%, .5) no-repeat; -webkit-transform: translateX(20px) translateZ(0); -moz-transform: translateX(20px) translateZ(0); transform: translateX(20px) translateZ(0); -webkit-transition: color .3s, -webkit-transform .3s; transition: color .3s, -webkit-transform .3s; -o-transition: color .3s, -o-transform .3s; -moz-transition: color .3s, transform .3s, -moz-transform .3s; transition: color .3s, transform .3s; transition: color .3s, transform .3s, -webkit-transform .3s, -moz-transform .3s, -o-transform .3s } .side-links a.is-active, .side-links a:focus, .side-links a:hover { color: #0aab46; background-color: #fff; -webkit-transform: translateX(0) translateZ(0); -moz-transform: translateX(0) translateZ(0); transform: translateX(0) translateZ(0) } .side-links a:last-child { margin-bottom: 0 } .side-links a:first-child { background-image: url(../images/side-link-car.png); background-position: 83px 15px } .side-links a:nth-child(2) { background-image: url(../images/side-link-helm.png); background-position: 84px 10px } .side-links a:nth-child(3) { background-image: url(../images/side-link-polis.png); background-position: 84px 50% } .page-interview .side-links a { background-color: hsla(0, 0%, 94%, .15) } .page-interview .side-links a.is-active, .page-interview .side-links a:focus, .page-interview .side-links a:hover { background-color: #f0f0f0 } .mobile .side-links { display: none } .layers { overflow-x: hidden } .layers .road { position: relative; left: 50%; top: 0; z-index: 10; width: 1366px; height: 8065px; background: url(../images/road.png) 50% 0/contain no-repeat; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%) } @media (max-width: 1366px) { .layers .road { width: 100vw; height: 590.40996vw } } .layers .basketball-court { position: absolute; left: 50%; top: 388px; z-index: 10; width: 566.614px; height: 321.605px; -webkit-transform: translateX(-556px); -moz-transform: translateX(-556px); -ms-transform: translateX(-556px); -o-transform: translateX(-556px); transform: translateX(-556px); background: url(../images/basketball-court.png) 0 0/contain no-repeat } .layers .basketball-court.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .basketball-court.fade-in.is-visible { opacity: 1 } .layers .basketball-court.fade-up { opacity: 0; -webkit-transform: translate(-556px, 60px); -moz-transform: translate(-556px, 60px); -ms-transform: translate(-556px, 60px); -o-transform: translate(-556px, 60px); transform: translate(-556px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .basketball-court.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-556px); -moz-transform: translate(-556px); -ms-transform: translate(-556px); -o-transform: translate(-556px); transform: translate(-556px) } @media (max-width: 1366px) { .layers .basketball-court { top: 28.4041vw; width: 41.4798vw; height: 23.54356vw; font-size: 1vw; -webkit-transform: translateX(-40.70278em); -moz-transform: translateX(-40.70278em); -ms-transform: translateX(-40.70278em); -o-transform: translateX(-40.70278em); transform: translateX(-40.70278em) } .layers .basketball-court.fade-up { -webkit-transform: translate(-40.70278em, 60px); -moz-transform: translate(-40.70278em, 60px); -ms-transform: translate(-40.70278em, 60px); -o-transform: translate(-40.70278em, 60px); transform: translate(-40.70278em, 60px) } .layers .basketball-court.fade-up.is-visible { -webkit-transform: translate(-40.70278em); -moz-transform: translate(-40.70278em); -ms-transform: translate(-40.70278em); -o-transform: translate(-40.70278em); transform: translate(-40.70278em) } } .layers .ground-1 { position: absolute; left: 50%; top: 445px; z-index: 9; width: 561.132px; height: 178.542px; -webkit-transform: translateX(54px); -moz-transform: translateX(54px); -ms-transform: translateX(54px); -o-transform: translateX(54px); transform: translateX(54px); background: url(../images/ground-1.png) 0 0/contain no-repeat } .layers .ground-1.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .ground-1.fade-in.is-visible { opacity: 1 } .layers .ground-1.fade-up { opacity: 0; -webkit-transform: translate(54px, 60px); -moz-transform: translate(54px, 60px); -ms-transform: translate(54px, 60px); -o-transform: translate(54px, 60px); transform: translate(54px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .ground-1.fade-up.is-visible { opacity: 1; -webkit-transform: translate(54px); -moz-transform: translate(54px); -ms-transform: translate(54px); -o-transform: translate(54px); transform: translate(54px) } @media (max-width: 1366px) { .layers .ground-1 { top: 32.57687vw; width: 41.07848vw; height: 13.07042vw; font-size: 1vw; -webkit-transform: translateX(3.95315em); -moz-transform: translateX(3.95315em); -ms-transform: translateX(3.95315em); -o-transform: translateX(3.95315em); transform: translateX(3.95315em) } .layers .ground-1.fade-up { -webkit-transform: translate(3.95315em, 60px); -moz-transform: translate(3.95315em, 60px); -ms-transform: translate(3.95315em, 60px); -o-transform: translate(3.95315em, 60px); transform: translate(3.95315em, 60px) } .layers .ground-1.fade-up.is-visible { -webkit-transform: translate(3.95315em); -moz-transform: translate(3.95315em); -ms-transform: translate(3.95315em); -o-transform: translate(3.95315em); transform: translate(3.95315em) } } .layers .ground-2 { position: absolute; left: 50%; top: 685px; z-index: 9; width: 417.6px; height: 161.4px; -webkit-transform: translateX(47px); -moz-transform: translateX(47px); -ms-transform: translateX(47px); -o-transform: translateX(47px); transform: translateX(47px); background: url(../images/ground-2.png) 0 0/contain no-repeat } .layers .ground-2.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .ground-2.fade-in.is-visible { opacity: 1 } .layers .ground-2.fade-up { opacity: 0; -webkit-transform: translate(47px, 60px); -moz-transform: translate(47px, 60px); -ms-transform: translate(47px, 60px); -o-transform: translate(47px, 60px); transform: translate(47px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .ground-2.fade-up.is-visible { opacity: 1; -webkit-transform: translate(47px); -moz-transform: translate(47px); -ms-transform: translate(47px); -o-transform: translate(47px); transform: translate(47px) } @media (max-width: 1366px) { .layers .ground-2 { top: 50.14641vw; width: 30.57101vw; height: 11.81552vw; font-size: 1vw; -webkit-transform: translateX(3.4407em); -moz-transform: translateX(3.4407em); -ms-transform: translateX(3.4407em); -o-transform: translateX(3.4407em); transform: translateX(3.4407em) } .layers .ground-2.fade-up { -webkit-transform: translate(3.4407em, 60px); -moz-transform: translate(3.4407em, 60px); -ms-transform: translate(3.4407em, 60px); -o-transform: translate(3.4407em, 60px); transform: translate(3.4407em, 60px) } .layers .ground-2.fade-up.is-visible { -webkit-transform: translate(3.4407em); -moz-transform: translate(3.4407em); -ms-transform: translate(3.4407em); -o-transform: translate(3.4407em); transform: translate(3.4407em) } } .layers .ground-3 { position: absolute; left: 50%; top: 1277px; z-index: 10; width: 463.2px; height: 216.96px; -webkit-transform: translateX(-742px); -moz-transform: translateX(-742px); -ms-transform: translateX(-742px); -o-transform: translateX(-742px); transform: translateX(-742px); background: url(../images/ground-3.png) 0 0/contain no-repeat } .layers .ground-3.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .ground-3.fade-in.is-visible { opacity: 1 } .layers .ground-3.fade-up { opacity: 0; -webkit-transform: translate(-742px, 60px); -moz-transform: translate(-742px, 60px); -ms-transform: translate(-742px, 60px); -o-transform: translate(-742px, 60px); transform: translate(-742px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .ground-3.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-742px); -moz-transform: translate(-742px); -ms-transform: translate(-742px); -o-transform: translate(-742px); transform: translate(-742px) } @media (max-width: 1366px) { .layers .ground-3 { top: 93.48463vw; width: 33.90922vw; height: 15.88287vw; font-size: 1vw; -webkit-transform: translateX(-54.31918em); -moz-transform: translateX(-54.31918em); -ms-transform: translateX(-54.31918em); -o-transform: translateX(-54.31918em); transform: translateX(-54.31918em) } .layers .ground-3.fade-up { -webkit-transform: translate(-54.31918em, 60px); -moz-transform: translate(-54.31918em, 60px); -ms-transform: translate(-54.31918em, 60px); -o-transform: translate(-54.31918em, 60px); transform: translate(-54.31918em, 60px) } .layers .ground-3.fade-up.is-visible { -webkit-transform: translate(-54.31918em); -moz-transform: translate(-54.31918em); -ms-transform: translate(-54.31918em); -o-transform: translate(-54.31918em); transform: translate(-54.31918em) } } .layers .ground-4 { position: absolute; left: 50%; top: 1476px; z-index: 13; width: 535.2px; height: 344.64px; -webkit-transform: translateX(-488px); -moz-transform: translateX(-488px); -ms-transform: translateX(-488px); -o-transform: translateX(-488px); transform: translateX(-488px); background: url(../images/ground-4.png) 0 0/contain no-repeat; pointer-events: none } .layers .ground-4.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .ground-4.fade-in.is-visible { opacity: 1 } .layers .ground-4.fade-up { opacity: 0; -webkit-transform: translate(-488px, 60px); -moz-transform: translate(-488px, 60px); -ms-transform: translate(-488px, 60px); -o-transform: translate(-488px, 60px); transform: translate(-488px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .ground-4.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-488px); -moz-transform: translate(-488px); -ms-transform: translate(-488px); -o-transform: translate(-488px); transform: translate(-488px) } @media (max-width: 1366px) { .layers .ground-4 { top: 108.05271vw; width: 39.18009vw; height: 25.22987vw; font-size: 1vw; -webkit-transform: translateX(-35.72474em); -moz-transform: translateX(-35.72474em); -ms-transform: translateX(-35.72474em); -o-transform: translateX(-35.72474em); transform: translateX(-35.72474em) } .layers .ground-4.fade-up { -webkit-transform: translate(-35.72474em, 60px); -moz-transform: translate(-35.72474em, 60px); -ms-transform: translate(-35.72474em, 60px); -o-transform: translate(-35.72474em, 60px); transform: translate(-35.72474em, 60px) } .layers .ground-4.fade-up.is-visible { -webkit-transform: translate(-35.72474em); -moz-transform: translate(-35.72474em); -ms-transform: translate(-35.72474em); -o-transform: translate(-35.72474em); transform: translate(-35.72474em) } } .layers .ground-5 { position: absolute; left: 50%; top: 1728px; z-index: 10; width: 246.6px; height: 259.2px; -webkit-transform: translateX(-688px); -moz-transform: translateX(-688px); -ms-transform: translateX(-688px); -o-transform: translateX(-688px); transform: translateX(-688px); background: url(../images/ground-5.png) 0 0/contain no-repeat } .layers .ground-5.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .ground-5.fade-in.is-visible { opacity: 1 } .layers .ground-5.fade-up { opacity: 0; -webkit-transform: translate(-688px, 60px); -moz-transform: translate(-688px, 60px); -ms-transform: translate(-688px, 60px); -o-transform: translate(-688px, 60px); transform: translate(-688px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .ground-5.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-688px); -moz-transform: translate(-688px); -ms-transform: translate(-688px); -o-transform: translate(-688px); transform: translate(-688px) } @media (max-width: 1366px) { .layers .ground-5 { top: 126.50073vw; width: 18.05271vw; height: 18.97511vw; font-size: 1vw; -webkit-transform: translateX(-50.36603em); -moz-transform: translateX(-50.36603em); -ms-transform: translateX(-50.36603em); -o-transform: translateX(-50.36603em); transform: translateX(-50.36603em) } .layers .ground-5.fade-up { -webkit-transform: translate(-50.36603em, 60px); -moz-transform: translate(-50.36603em, 60px); -ms-transform: translate(-50.36603em, 60px); -o-transform: translate(-50.36603em, 60px); transform: translate(-50.36603em, 60px) } .layers .ground-5.fade-up.is-visible { -webkit-transform: translate(-50.36603em); -moz-transform: translate(-50.36603em); -ms-transform: translate(-50.36603em); -o-transform: translate(-50.36603em); transform: translate(-50.36603em) } } .layers .ground-6 { position: absolute; left: 50%; top: 2341px; z-index: 10; width: 364.78px; height: 435.16px; -webkit-transform: translateX(501px); -moz-transform: translateX(501px); -ms-transform: translateX(501px); -o-transform: translateX(501px); transform: translateX(501px); background: url(../images/ground-6.png) 0 0/contain no-repeat } .layers .ground-6.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .ground-6.fade-in.is-visible { opacity: 1 } .layers .ground-6.fade-up { opacity: 0; -webkit-transform: translate(501px, 60px); -moz-transform: translate(501px, 60px); -ms-transform: translate(501px, 60px); -o-transform: translate(501px, 60px); transform: translate(501px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .ground-6.fade-up.is-visible { opacity: 1; -webkit-transform: translate(501px); -moz-transform: translate(501px); -ms-transform: translate(501px); -o-transform: translate(501px); transform: translate(501px) } @media (max-width: 1366px) { .layers .ground-6 { top: 171.37628vw; width: 26.70425vw; height: 31.85652vw; font-size: 1vw; -webkit-transform: translateX(36.67643em); -moz-transform: translateX(36.67643em); -ms-transform: translateX(36.67643em); -o-transform: translateX(36.67643em); transform: translateX(36.67643em) } .layers .ground-6.fade-up { -webkit-transform: translate(36.67643em, 60px); -moz-transform: translate(36.67643em, 60px); -ms-transform: translate(36.67643em, 60px); -o-transform: translate(36.67643em, 60px); transform: translate(36.67643em, 60px) } .layers .ground-6.fade-up.is-visible { -webkit-transform: translate(36.67643em); -moz-transform: translate(36.67643em); -ms-transform: translate(36.67643em); -o-transform: translate(36.67643em); transform: translate(36.67643em) } } .layers .ground-7 { position: absolute; left: 50%; top: 2405px; z-index: 10; width: 616.8px; height: 398.4px; -webkit-transform: translateX(-129px); -moz-transform: translateX(-129px); -ms-transform: translateX(-129px); -o-transform: translateX(-129px); transform: translateX(-129px); background: url(../images/ground-7.png) 0 0/contain no-repeat } .layers .ground-7.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .ground-7.fade-in.is-visible { opacity: 1 } .layers .ground-7.fade-up { opacity: 0; -webkit-transform: translate(-129px, 60px); -moz-transform: translate(-129px, 60px); -ms-transform: translate(-129px, 60px); -o-transform: translate(-129px, 60px); transform: translate(-129px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .ground-7.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-129px); -moz-transform: translate(-129px); -ms-transform: translate(-129px); -o-transform: translate(-129px); transform: translate(-129px) } @media (max-width: 1366px) { .layers .ground-7 { top: 176.06149vw; width: 45.15373vw; height: 29.16545vw; font-size: 1vw; -webkit-transform: translateX(-9.44363em); -moz-transform: translateX(-9.44363em); -ms-transform: translateX(-9.44363em); -o-transform: translateX(-9.44363em); transform: translateX(-9.44363em) } .layers .ground-7.fade-up { -webkit-transform: translate(-9.44363em, 60px); -moz-transform: translate(-9.44363em, 60px); -ms-transform: translate(-9.44363em, 60px); -o-transform: translate(-9.44363em, 60px); transform: translate(-9.44363em, 60px) } .layers .ground-7.fade-up.is-visible { -webkit-transform: translate(-9.44363em); -moz-transform: translate(-9.44363em); -ms-transform: translate(-9.44363em); -o-transform: translate(-9.44363em); transform: translate(-9.44363em) } } .layers .ground-8 { position: absolute; left: 50%; top: 3205px; z-index: 10; width: 269px; height: 135px; -webkit-transform: translateX(-383px); -moz-transform: translateX(-383px); -ms-transform: translateX(-383px); -o-transform: translateX(-383px); transform: translateX(-383px); background: url(../images/ground-8.png) 0 0/contain no-repeat } .layers .ground-8.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .ground-8.fade-in.is-visible { opacity: 1 } .layers .ground-8.fade-up { opacity: 0; -webkit-transform: translate(-383px, 60px); -moz-transform: translate(-383px, 60px); -ms-transform: translate(-383px, 60px); -o-transform: translate(-383px, 60px); transform: translate(-383px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .ground-8.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-383px); -moz-transform: translate(-383px); -ms-transform: translate(-383px); -o-transform: translate(-383px); transform: translate(-383px) } @media (max-width: 1366px) { .layers .ground-8 { top: 234.62665vw; width: 19.69253vw; height: 9.88287vw; font-size: 1vw; -webkit-transform: translateX(-28.03807em); -moz-transform: translateX(-28.03807em); -ms-transform: translateX(-28.03807em); -o-transform: translateX(-28.03807em); transform: translateX(-28.03807em) } .layers .ground-8.fade-up { -webkit-transform: translate(-28.03807em, 60px); -moz-transform: translate(-28.03807em, 60px); -ms-transform: translate(-28.03807em, 60px); -o-transform: translate(-28.03807em, 60px); transform: translate(-28.03807em, 60px) } .layers .ground-8.fade-up.is-visible { -webkit-transform: translate(-28.03807em); -moz-transform: translate(-28.03807em); -ms-transform: translate(-28.03807em); -o-transform: translate(-28.03807em); transform: translate(-28.03807em) } } .layers .ground-9 { position: absolute; left: 50%; top: 4064px; z-index: 10; width: 244.4px; height: 183.04px; -webkit-transform: translateX(90px); -moz-transform: translateX(90px); -ms-transform: translateX(90px); -o-transform: translateX(90px); transform: translateX(90px); background: url(../images/ground-9.png) 0 0/contain no-repeat } .layers .ground-9.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .ground-9.fade-in.is-visible { opacity: 1 } .layers .ground-9.fade-up { opacity: 0; -webkit-transform: translate(90px, 60px); -moz-transform: translate(90px, 60px); -ms-transform: translate(90px, 60px); -o-transform: translate(90px, 60px); transform: translate(90px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .ground-9.fade-up.is-visible { opacity: 1; -webkit-transform: translate(90px); -moz-transform: translate(90px); -ms-transform: translate(90px); -o-transform: translate(90px); transform: translate(90px) } @media (max-width: 1366px) { .layers .ground-9 { top: 297.51098vw; width: 17.89165vw; height: 13.39971vw; font-size: 1vw; -webkit-transform: translateX(6.58858em); -moz-transform: translateX(6.58858em); -ms-transform: translateX(6.58858em); -o-transform: translateX(6.58858em); transform: translateX(6.58858em) } .layers .ground-9.fade-up { -webkit-transform: translate(6.58858em, 60px); -moz-transform: translate(6.58858em, 60px); -ms-transform: translate(6.58858em, 60px); -o-transform: translate(6.58858em, 60px); transform: translate(6.58858em, 60px) } .layers .ground-9.fade-up.is-visible { -webkit-transform: translate(6.58858em); -moz-transform: translate(6.58858em); -ms-transform: translate(6.58858em); -o-transform: translate(6.58858em); transform: translate(6.58858em) } } .layers .ground-10 { position: absolute; left: 50%; top: 4279px; z-index: 10; width: 364.78px; height: 435.16px; -webkit-transform: translateX(436px); -moz-transform: translateX(436px); -ms-transform: translateX(436px); -o-transform: translateX(436px); transform: translateX(436px); background: url(../images/ground-6.png) 0 0/contain no-repeat } .layers .ground-10.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .ground-10.fade-in.is-visible { opacity: 1 } .layers .ground-10.fade-up { opacity: 0; -webkit-transform: translate(436px, 60px); -moz-transform: translate(436px, 60px); -ms-transform: translate(436px, 60px); -o-transform: translate(436px, 60px); transform: translate(436px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .ground-10.fade-up.is-visible { opacity: 1; -webkit-transform: translate(436px); -moz-transform: translate(436px); -ms-transform: translate(436px); -o-transform: translate(436px); transform: translate(436px) } @media (max-width: 1366px) { .layers .ground-10 { top: 313.25037vw; width: 26.70425vw; height: 31.85652vw; font-size: 1vw; -webkit-transform: translateX(31.91801em); -moz-transform: translateX(31.91801em); -ms-transform: translateX(31.91801em); -o-transform: translateX(31.91801em); transform: translateX(31.91801em) } .layers .ground-10.fade-up { -webkit-transform: translate(31.91801em, 60px); -moz-transform: translate(31.91801em, 60px); -ms-transform: translate(31.91801em, 60px); -o-transform: translate(31.91801em, 60px); transform: translate(31.91801em, 60px) } .layers .ground-10.fade-up.is-visible { -webkit-transform: translate(31.91801em); -moz-transform: translate(31.91801em); -ms-transform: translate(31.91801em); -o-transform: translate(31.91801em); transform: translate(31.91801em) } } .layers .ground-11 { position: absolute; left: 50%; top: 4557px; z-index: 10; width: 572.33px; height: 448.06px; -webkit-transform: translateX(252px); -moz-transform: translateX(252px); -ms-transform: translateX(252px); -o-transform: translateX(252px); transform: translateX(252px); background: url(../images/ground-11.png) 0 0/contain no-repeat } .layers .ground-11.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .ground-11.fade-in.is-visible { opacity: 1 } .layers .ground-11.fade-up { opacity: 0; -webkit-transform: translate(252px, 60px); -moz-transform: translate(252px, 60px); -ms-transform: translate(252px, 60px); -o-transform: translate(252px, 60px); transform: translate(252px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .ground-11.fade-up.is-visible { opacity: 1; -webkit-transform: translate(252px); -moz-transform: translate(252px); -ms-transform: translate(252px); -o-transform: translate(252px); transform: translate(252px) } @media (max-width: 1366px) { .layers .ground-11 { top: 333.60176vw; width: 41.89824vw; height: 32.80088vw; font-size: 1vw; -webkit-transform: translateX(18.44802em); -moz-transform: translateX(18.44802em); -ms-transform: translateX(18.44802em); -o-transform: translateX(18.44802em); transform: translateX(18.44802em) } .layers .ground-11.fade-up { -webkit-transform: translate(18.44802em, 60px); -moz-transform: translate(18.44802em, 60px); -ms-transform: translate(18.44802em, 60px); -o-transform: translate(18.44802em, 60px); transform: translate(18.44802em, 60px) } .layers .ground-11.fade-up.is-visible { -webkit-transform: translate(18.44802em); -moz-transform: translate(18.44802em); -ms-transform: translate(18.44802em); -o-transform: translate(18.44802em); transform: translate(18.44802em) } } .layers .ground-12 { position: absolute; left: 50%; top: 4924px; z-index: 10; width: 279.72px; height: 281.82px; -webkit-transform: translateX(-725px); -moz-transform: translateX(-725px); -ms-transform: translateX(-725px); -o-transform: translateX(-725px); transform: translateX(-725px); background: url(../images/ground-12.png) 0 0/contain no-repeat } .layers .ground-12.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .ground-12.fade-in.is-visible { opacity: 1 } .layers .ground-12.fade-up { opacity: 0; -webkit-transform: translate(-725px, 60px); -moz-transform: translate(-725px, 60px); -ms-transform: translate(-725px, 60px); -o-transform: translate(-725px, 60px); transform: translate(-725px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .ground-12.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-725px); -moz-transform: translate(-725px); -ms-transform: translate(-725px); -o-transform: translate(-725px); transform: translate(-725px) } @media (max-width: 1366px) { .layers .ground-12 { top: 360.46852vw; width: 20.47731vw; height: 20.63104vw; font-size: 1vw; -webkit-transform: translateX(-53.07467em); -moz-transform: translateX(-53.07467em); -ms-transform: translateX(-53.07467em); -o-transform: translateX(-53.07467em); transform: translateX(-53.07467em) } .layers .ground-12.fade-up { -webkit-transform: translate(-53.07467em, 60px); -moz-transform: translate(-53.07467em, 60px); -ms-transform: translate(-53.07467em, 60px); -o-transform: translate(-53.07467em, 60px); transform: translate(-53.07467em, 60px) } .layers .ground-12.fade-up.is-visible { -webkit-transform: translate(-53.07467em); -moz-transform: translate(-53.07467em); -ms-transform: translate(-53.07467em); -o-transform: translate(-53.07467em); transform: translate(-53.07467em) } } .layers .ground-14 { position: absolute; left: 50%; top: 5345px; z-index: 10; width: 337.395px; height: 184.675px; -webkit-transform: translateX(-372px); -moz-transform: translateX(-372px); -ms-transform: translateX(-372px); -o-transform: translateX(-372px); transform: translateX(-372px); background: url(../images/ground-14.png) 0 0/contain no-repeat } .layers .ground-14.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .ground-14.fade-in.is-visible { opacity: 1 } .layers .ground-14.fade-up { opacity: 0; -webkit-transform: translate(-372px, 60px); -moz-transform: translate(-372px, 60px); -ms-transform: translate(-372px, 60px); -o-transform: translate(-372px, 60px); transform: translate(-372px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .ground-14.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-372px); -moz-transform: translate(-372px); -ms-transform: translate(-372px); -o-transform: translate(-372px); transform: translate(-372px) } @media (max-width: 1366px) { .layers .ground-14 { top: 391.28843vw; width: 24.69949vw; height: 13.5194vw; font-size: 1vw; -webkit-transform: translateX(-27.2328em); -moz-transform: translateX(-27.2328em); -ms-transform: translateX(-27.2328em); -o-transform: translateX(-27.2328em); transform: translateX(-27.2328em) } .layers .ground-14.fade-up { -webkit-transform: translate(-27.2328em, 60px); -moz-transform: translate(-27.2328em, 60px); -ms-transform: translate(-27.2328em, 60px); -o-transform: translate(-27.2328em, 60px); transform: translate(-27.2328em, 60px) } .layers .ground-14.fade-up.is-visible { -webkit-transform: translate(-27.2328em); -moz-transform: translate(-27.2328em); -ms-transform: translate(-27.2328em); -o-transform: translate(-27.2328em); transform: translate(-27.2328em) } } .layers .ground-15 { position: absolute; left: 50%; top: 5570px; z-index: 10; width: 296.4px; height: 180.69px; -webkit-transform: translateX(-648px); -moz-transform: translateX(-648px); -ms-transform: translateX(-648px); -o-transform: translateX(-648px); transform: translateX(-648px); background: url(../images/ground-15.png) 0 0/contain no-repeat } .layers .ground-15.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .ground-15.fade-in.is-visible { opacity: 1 } .layers .ground-15.fade-up { opacity: 0; -webkit-transform: translate(-648px, 60px); -moz-transform: translate(-648px, 60px); -ms-transform: translate(-648px, 60px); -o-transform: translate(-648px, 60px); transform: translate(-648px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .ground-15.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-648px); -moz-transform: translate(-648px); -ms-transform: translate(-648px); -o-transform: translate(-648px); transform: translate(-648px) } @media (max-width: 1366px) { .layers .ground-15 { top: 407.75988vw; width: 21.69839vw; height: 13.22767vw; font-size: 1vw; -webkit-transform: translateX(-47.43777em); -moz-transform: translateX(-47.43777em); -ms-transform: translateX(-47.43777em); -o-transform: translateX(-47.43777em); transform: translateX(-47.43777em) } .layers .ground-15.fade-up { -webkit-transform: translate(-47.43777em, 60px); -moz-transform: translate(-47.43777em, 60px); -ms-transform: translate(-47.43777em, 60px); -o-transform: translate(-47.43777em, 60px); transform: translate(-47.43777em, 60px) } .layers .ground-15.fade-up.is-visible { -webkit-transform: translate(-47.43777em); -moz-transform: translate(-47.43777em); -ms-transform: translate(-47.43777em); -o-transform: translate(-47.43777em); transform: translate(-47.43777em) } } .layers .ground-16 { position: absolute; left: 50%; top: 6047px; z-index: 9; width: 638.88px; height: 500.16px; -webkit-transform: translateX(-33px); -moz-transform: translateX(-33px); -ms-transform: translateX(-33px); -o-transform: translateX(-33px); transform: translateX(-33px); background: url(../images/ground-11.png) 0 0/contain no-repeat } .layers .ground-16.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .ground-16.fade-in.is-visible { opacity: 1 } .layers .ground-16.fade-up { opacity: 0; -webkit-transform: translate(-33px, 60px); -moz-transform: translate(-33px, 60px); -ms-transform: translate(-33px, 60px); -o-transform: translate(-33px, 60px); transform: translate(-33px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .ground-16.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-33px); -moz-transform: translate(-33px); -ms-transform: translate(-33px); -o-transform: translate(-33px); transform: translate(-33px) } @media (max-width: 1366px) { .layers .ground-16 { top: 442.67936vw; width: 46.77013vw; height: 36.61493vw; font-size: 1vw; -webkit-transform: translateX(-2.41581em); -moz-transform: translateX(-2.41581em); -ms-transform: translateX(-2.41581em); -o-transform: translateX(-2.41581em); transform: translateX(-2.41581em) } .layers .ground-16.fade-up { -webkit-transform: translate(-2.41581em, 60px); -moz-transform: translate(-2.41581em, 60px); -ms-transform: translate(-2.41581em, 60px); -o-transform: translate(-2.41581em, 60px); transform: translate(-2.41581em, 60px) } .layers .ground-16.fade-up.is-visible { -webkit-transform: translate(-2.41581em); -moz-transform: translate(-2.41581em); -ms-transform: translate(-2.41581em); -o-transform: translate(-2.41581em); transform: translate(-2.41581em) } } .layers .ground-17 { position: absolute; left: 50%; top: 6714px; z-index: 10; width: 541.5px; height: 415px; -webkit-transform: translateX(-844px); -moz-transform: translateX(-844px); -ms-transform: translateX(-844px); -o-transform: translateX(-844px); transform: translateX(-844px); background: url(../images/ground-17.png) 0 0/contain no-repeat } .layers .ground-17.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .ground-17.fade-in.is-visible { opacity: 1 } .layers .ground-17.fade-up { opacity: 0; -webkit-transform: translate(-844px, 60px); -moz-transform: translate(-844px, 60px); -ms-transform: translate(-844px, 60px); -o-transform: translate(-844px, 60px); transform: translate(-844px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .ground-17.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-844px); -moz-transform: translate(-844px); -ms-transform: translate(-844px); -o-transform: translate(-844px); transform: translate(-844px) } @media (max-width: 1366px) { .layers .ground-17 { top: 491.50805vw; width: 39.64129vw; height: 30.38067vw; font-size: 1vw; -webkit-transform: translateX(-61.78624em); -moz-transform: translateX(-61.78624em); -ms-transform: translateX(-61.78624em); -o-transform: translateX(-61.78624em); transform: translateX(-61.78624em) } .layers .ground-17.fade-up { -webkit-transform: translate(-61.78624em, 60px); -moz-transform: translate(-61.78624em, 60px); -ms-transform: translate(-61.78624em, 60px); -o-transform: translate(-61.78624em, 60px); transform: translate(-61.78624em, 60px) } .layers .ground-17.fade-up.is-visible { -webkit-transform: translate(-61.78624em); -moz-transform: translate(-61.78624em); -ms-transform: translate(-61.78624em); -o-transform: translate(-61.78624em); transform: translate(-61.78624em) } } .layers .ground-18 { position: absolute; left: 50%; top: 7031px; z-index: 13; width: 347.76px; height: 353.36px; -webkit-transform: translateX(-404px); -moz-transform: translateX(-404px); -ms-transform: translateX(-404px); -o-transform: translateX(-404px); transform: translateX(-404px); background: url(../images/ground-18.png) 0 0/contain no-repeat } .layers .ground-18.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .ground-18.fade-in.is-visible { opacity: 1 } .layers .ground-18.fade-up { opacity: 0; -webkit-transform: translate(-404px, 60px); -moz-transform: translate(-404px, 60px); -ms-transform: translate(-404px, 60px); -o-transform: translate(-404px, 60px); transform: translate(-404px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .ground-18.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-404px); -moz-transform: translate(-404px); -ms-transform: translate(-404px); -o-transform: translate(-404px); transform: translate(-404px) } @media (max-width: 1366px) { .layers .ground-18 { top: 514.71449vw; width: 25.45827vw; height: 25.86823vw; font-size: 1vw; -webkit-transform: translateX(-29.5754em); -moz-transform: translateX(-29.5754em); -ms-transform: translateX(-29.5754em); -o-transform: translateX(-29.5754em); transform: translateX(-29.5754em) } .layers .ground-18.fade-up { -webkit-transform: translate(-29.5754em, 60px); -moz-transform: translate(-29.5754em, 60px); -ms-transform: translate(-29.5754em, 60px); -o-transform: translate(-29.5754em, 60px); transform: translate(-29.5754em, 60px) } .layers .ground-18.fade-up.is-visible { -webkit-transform: translate(-29.5754em); -moz-transform: translate(-29.5754em); -ms-transform: translate(-29.5754em); -o-transform: translate(-29.5754em); transform: translate(-29.5754em) } } .layers .ground-19 { position: absolute; left: 50%; top: 7244px; z-index: 11; width: 114.68px; height: 73.32px; -webkit-transform: translateX(-537px); -moz-transform: translateX(-537px); -ms-transform: translateX(-537px); -o-transform: translateX(-537px); transform: translateX(-537px); background: url(../images/ground-19.png) 0 0/contain no-repeat; pointer-events: none } .layers .ground-19.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .ground-19.fade-in.is-visible { opacity: 1 } .layers .ground-19.fade-up { opacity: 0; -webkit-transform: translate(-537px, 60px); -moz-transform: translate(-537px, 60px); -ms-transform: translate(-537px, 60px); -o-transform: translate(-537px, 60px); transform: translate(-537px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .ground-19.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-537px); -moz-transform: translate(-537px); -ms-transform: translate(-537px); -o-transform: translate(-537px); transform: translate(-537px) } @media (max-width: 1366px) { .layers .ground-19 { top: 530.30747vw; width: 8.39531vw; height: 5.3675vw; font-size: 1vw; -webkit-transform: translateX(-39.31186em); -moz-transform: translateX(-39.31186em); -ms-transform: translateX(-39.31186em); -o-transform: translateX(-39.31186em); transform: translateX(-39.31186em) } .layers .ground-19.fade-up { -webkit-transform: translate(-39.31186em, 60px); -moz-transform: translate(-39.31186em, 60px); -ms-transform: translate(-39.31186em, 60px); -o-transform: translate(-39.31186em, 60px); transform: translate(-39.31186em, 60px) } .layers .ground-19.fade-up.is-visible { -webkit-transform: translate(-39.31186em); -moz-transform: translate(-39.31186em); -ms-transform: translate(-39.31186em); -o-transform: translate(-39.31186em); transform: translate(-39.31186em) } } .layers .ground-20 { position: absolute; left: 50%; top: 7326px; z-index: 10; width: 98.02px; height: 49.88px; -webkit-transform: translateX(-168px); -moz-transform: translateX(-168px); -ms-transform: translateX(-168px); -o-transform: translateX(-168px); transform: translateX(-168px); background: url(../images/ground-20.png) 0 0/contain no-repeat } .layers .ground-20.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .ground-20.fade-in.is-visible { opacity: 1 } .layers .ground-20.fade-up { opacity: 0; -webkit-transform: translate(-168px, 60px); -moz-transform: translate(-168px, 60px); -ms-transform: translate(-168px, 60px); -o-transform: translate(-168px, 60px); transform: translate(-168px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .ground-20.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-168px); -moz-transform: translate(-168px); -ms-transform: translate(-168px); -o-transform: translate(-168px); transform: translate(-168px) } @media (max-width: 1366px) { .layers .ground-20 { top: 536.3104vw; width: 7.1757vw; height: 3.65154vw; font-size: 1vw; -webkit-transform: translateX(-12.29868em); -moz-transform: translateX(-12.29868em); -ms-transform: translateX(-12.29868em); -o-transform: translateX(-12.29868em); transform: translateX(-12.29868em) } .layers .ground-20.fade-up { -webkit-transform: translate(-12.29868em, 60px); -moz-transform: translate(-12.29868em, 60px); -ms-transform: translate(-12.29868em, 60px); -o-transform: translate(-12.29868em, 60px); transform: translate(-12.29868em, 60px) } .layers .ground-20.fade-up.is-visible { -webkit-transform: translate(-12.29868em); -moz-transform: translate(-12.29868em); -ms-transform: translate(-12.29868em); -o-transform: translate(-12.29868em); transform: translate(-12.29868em) } } .layers .ground-21 { position: absolute; left: 50%; top: 7387px; z-index: 10; width: 82.8px; height: 48.6px; -webkit-transform: translateX(-204px); -moz-transform: translateX(-204px); -ms-transform: translateX(-204px); -o-transform: translateX(-204px); transform: translateX(-204px); background: url(../images/ground-21.png) 0 0/contain no-repeat } .layers .ground-21.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .ground-21.fade-in.is-visible { opacity: 1 } .layers .ground-21.fade-up { opacity: 0; -webkit-transform: translate(-204px, 60px); -moz-transform: translate(-204px, 60px); -ms-transform: translate(-204px, 60px); -o-transform: translate(-204px, 60px); transform: translate(-204px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .ground-21.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-204px); -moz-transform: translate(-204px); -ms-transform: translate(-204px); -o-transform: translate(-204px); transform: translate(-204px) } @media (max-width: 1366px) { .layers .ground-21 { top: 540.77599vw; width: 6.06149vw; height: 3.55783vw; font-size: 1vw; -webkit-transform: translateX(-14.93411em); -moz-transform: translateX(-14.93411em); -ms-transform: translateX(-14.93411em); -o-transform: translateX(-14.93411em); transform: translateX(-14.93411em) } .layers .ground-21.fade-up { -webkit-transform: translate(-14.93411em, 60px); -moz-transform: translate(-14.93411em, 60px); -ms-transform: translate(-14.93411em, 60px); -o-transform: translate(-14.93411em, 60px); transform: translate(-14.93411em, 60px) } .layers .ground-21.fade-up.is-visible { -webkit-transform: translate(-14.93411em); -moz-transform: translate(-14.93411em); -ms-transform: translate(-14.93411em); -o-transform: translate(-14.93411em); transform: translate(-14.93411em) } } .layers .ground-22 { position: absolute; left: 50%; top: 7398px; z-index: 13; width: 352.2px; height: 301.8px; -webkit-transform: translateX(-650px); -moz-transform: translateX(-650px); -ms-transform: translateX(-650px); -o-transform: translateX(-650px); transform: translateX(-650px); background: url(../images/ground-22.png) 0 0/contain no-repeat } .layers .ground-22.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .ground-22.fade-in.is-visible { opacity: 1 } .layers .ground-22.fade-up { opacity: 0; -webkit-transform: translate(-650px, 60px); -moz-transform: translate(-650px, 60px); -ms-transform: translate(-650px, 60px); -o-transform: translate(-650px, 60px); transform: translate(-650px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .ground-22.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-650px); -moz-transform: translate(-650px); -ms-transform: translate(-650px); -o-transform: translate(-650px); transform: translate(-650px) } @media (max-width: 1366px) { .layers .ground-22 { top: 541.58126vw; width: 25.78331vw; height: 22.0937vw; font-size: 1vw; -webkit-transform: translateX(-47.58419em); -moz-transform: translateX(-47.58419em); -ms-transform: translateX(-47.58419em); -o-transform: translateX(-47.58419em); transform: translateX(-47.58419em) } .layers .ground-22.fade-up { -webkit-transform: translate(-47.58419em, 60px); -moz-transform: translate(-47.58419em, 60px); -ms-transform: translate(-47.58419em, 60px); -o-transform: translate(-47.58419em, 60px); transform: translate(-47.58419em, 60px) } .layers .ground-22.fade-up.is-visible { -webkit-transform: translate(-47.58419em); -moz-transform: translate(-47.58419em); -ms-transform: translate(-47.58419em); -o-transform: translate(-47.58419em); transform: translate(-47.58419em) } } .layers .cloud-4 { position: absolute; left: 50%; top: 150px; z-index: 20; width: 92.7px; height: 71.1px; -webkit-transform: translateX(-630px); -moz-transform: translateX(-630px); -ms-transform: translateX(-630px); -o-transform: translateX(-630px); transform: translateX(-630px); background: url(../images/cloud-4.png) 0 0/contain no-repeat; opacity: 0 } .layers .cloud-4.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .cloud-4.fade-in.is-visible { opacity: 1 } .layers .cloud-4.fade-up { opacity: 0; -webkit-transform: translate(-630px, 60px); -moz-transform: translate(-630px, 60px); -ms-transform: translate(-630px, 60px); -o-transform: translate(-630px, 60px); transform: translate(-630px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .cloud-4.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-630px); -moz-transform: translate(-630px); -ms-transform: translate(-630px); -o-transform: translate(-630px); transform: translate(-630px) } @media (max-width: 1366px) { .layers .cloud-4 { top: 10.98097vw; width: 6.78624vw; height: 5.20498vw; font-size: 1vw; -webkit-transform: translateX(-46.12006em); -moz-transform: translateX(-46.12006em); -ms-transform: translateX(-46.12006em); -o-transform: translateX(-46.12006em); transform: translateX(-46.12006em) } .layers .cloud-4.fade-up { -webkit-transform: translate(-46.12006em, 60px); -moz-transform: translate(-46.12006em, 60px); -ms-transform: translate(-46.12006em, 60px); -o-transform: translate(-46.12006em, 60px); transform: translate(-46.12006em, 60px) } .layers .cloud-4.fade-up.is-visible { -webkit-transform: translate(-46.12006em); -moz-transform: translate(-46.12006em); -ms-transform: translate(-46.12006em); -o-transform: translate(-46.12006em); transform: translate(-46.12006em) } } @media (max-height: 700px) { .layers .cloud-4 { margin-top: 30px } } .layers .cloud-6 { position: absolute; left: 50%; top: 90px; z-index: 20; width: 139.2px; height: 90.8px; -webkit-transform: translateX(-440px); -moz-transform: translateX(-440px); -ms-transform: translateX(-440px); -o-transform: translateX(-440px); transform: translateX(-440px); background: url(../images/cloud-6.png) 0 0/contain no-repeat; opacity: 0 } .layers .cloud-6.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .cloud-6.fade-in.is-visible { opacity: 1 } .layers .cloud-6.fade-up { opacity: 0; -webkit-transform: translate(-440px, 60px); -moz-transform: translate(-440px, 60px); -ms-transform: translate(-440px, 60px); -o-transform: translate(-440px, 60px); transform: translate(-440px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .cloud-6.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-440px); -moz-transform: translate(-440px); -ms-transform: translate(-440px); -o-transform: translate(-440px); transform: translate(-440px) } @media (max-width: 1366px) { .layers .cloud-6 { top: 6.58858vw; width: 10.19034vw; height: 6.64714vw; font-size: 1vw; -webkit-transform: translateX(-32.21083em); -moz-transform: translateX(-32.21083em); -ms-transform: translateX(-32.21083em); -o-transform: translateX(-32.21083em); transform: translateX(-32.21083em) } .layers .cloud-6.fade-up { -webkit-transform: translate(-32.21083em, 60px); -moz-transform: translate(-32.21083em, 60px); -ms-transform: translate(-32.21083em, 60px); -o-transform: translate(-32.21083em, 60px); transform: translate(-32.21083em, 60px) } .layers .cloud-6.fade-up.is-visible { -webkit-transform: translate(-32.21083em); -moz-transform: translate(-32.21083em); -ms-transform: translate(-32.21083em); -o-transform: translate(-32.21083em); transform: translate(-32.21083em) } } @media (max-height: 700px) { .layers .cloud-6 { margin-top: 30px } } .layers .cloud-7 { position: absolute; left: 50%; top: 285px; z-index: 20; width: 197.44px; height: 103.68px; -webkit-transform: translateX(-865px); -moz-transform: translateX(-865px); -ms-transform: translateX(-865px); -o-transform: translateX(-865px); transform: translateX(-865px); background: url(../images/cloud-7.png) 0 0/contain no-repeat; opacity: 0 } .layers .cloud-7.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .cloud-7.fade-in.is-visible { opacity: 1 } .layers .cloud-7.fade-up { opacity: 0; -webkit-transform: translate(-865px, 60px); -moz-transform: translate(-865px, 60px); -ms-transform: translate(-865px, 60px); -o-transform: translate(-865px, 60px); transform: translate(-865px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .cloud-7.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-865px); -moz-transform: translate(-865px); -ms-transform: translate(-865px); -o-transform: translate(-865px); transform: translate(-865px) } @media (max-width: 1366px) { .layers .cloud-7 { top: 20.86384vw; width: 14.45388vw; height: 7.59004vw; font-size: 1vw; -webkit-transform: translateX(-63.32357em); -moz-transform: translateX(-63.32357em); -ms-transform: translateX(-63.32357em); -o-transform: translateX(-63.32357em); transform: translateX(-63.32357em) } .layers .cloud-7.fade-up { -webkit-transform: translate(-63.32357em, 60px); -moz-transform: translate(-63.32357em, 60px); -ms-transform: translate(-63.32357em, 60px); -o-transform: translate(-63.32357em, 60px); transform: translate(-63.32357em, 60px) } .layers .cloud-7.fade-up.is-visible { -webkit-transform: translate(-63.32357em); -moz-transform: translate(-63.32357em); -ms-transform: translate(-63.32357em); -o-transform: translate(-63.32357em); transform: translate(-63.32357em) } } @media (max-height: 700px) { .layers .cloud-7 { margin-top: 30px } } @media (max-width: 1900px) { .layers .cloud-7 { display: none } } .layers .cloud-12 { position: absolute; left: 50%; top: 245px; z-index: 20; width: 165.01px; height: 132.24px; -webkit-transform: translateX(660px); -moz-transform: translateX(660px); -ms-transform: translateX(660px); -o-transform: translateX(660px); transform: translateX(660px); background: url(../images/cloud-12.png) 0 0/contain no-repeat; opacity: 0 } .layers .cloud-12.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .cloud-12.fade-in.is-visible { opacity: 1 } .layers .cloud-12.fade-up { opacity: 0; -webkit-transform: translate(660px, 60px); -moz-transform: translate(660px, 60px); -ms-transform: translate(660px, 60px); -o-transform: translate(660px, 60px); transform: translate(660px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .cloud-12.fade-up.is-visible { opacity: 1; -webkit-transform: translate(660px); -moz-transform: translate(660px); -ms-transform: translate(660px); -o-transform: translate(660px); transform: translate(660px) } @media (max-width: 1366px) { .layers .cloud-12 { top: 17.93558vw; width: 12.0798vw; height: 9.68082vw; font-size: 1vw; -webkit-transform: translateX(48.31625em); -moz-transform: translateX(48.31625em); -ms-transform: translateX(48.31625em); -o-transform: translateX(48.31625em); transform: translateX(48.31625em) } .layers .cloud-12.fade-up { -webkit-transform: translate(48.31625em, 60px); -moz-transform: translate(48.31625em, 60px); -ms-transform: translate(48.31625em, 60px); -o-transform: translate(48.31625em, 60px); transform: translate(48.31625em, 60px) } .layers .cloud-12.fade-up.is-visible { -webkit-transform: translate(48.31625em); -moz-transform: translate(48.31625em); -ms-transform: translate(48.31625em); -o-transform: translate(48.31625em); transform: translate(48.31625em) } } @media (max-height: 700px) { .layers .cloud-12 { margin-top: 30px } } @media (max-width: 1900px) { .layers .cloud-12 { display: none } } .layers .cloud-15 { position: absolute; left: 50%; top: 100px; z-index: 20; width: 165.55px; height: 107.45px; -webkit-transform: translateX(380px); -moz-transform: translateX(380px); -ms-transform: translateX(380px); -o-transform: translateX(380px); transform: translateX(380px); background: url(../images/cloud-15.png) 0 0/contain no-repeat; opacity: 0 } .layers .cloud-15.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .cloud-15.fade-in.is-visible { opacity: 1 } .layers .cloud-15.fade-up { opacity: 0; -webkit-transform: translate(380px, 60px); -moz-transform: translate(380px, 60px); -ms-transform: translate(380px, 60px); -o-transform: translate(380px, 60px); transform: translate(380px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .cloud-15.fade-up.is-visible { opacity: 1; -webkit-transform: translate(380px); -moz-transform: translate(380px); -ms-transform: translate(380px); -o-transform: translate(380px); transform: translate(380px) } @media (max-width: 1366px) { .layers .cloud-15 { top: 7.32064vw; width: 12.11933vw; height: 7.86603vw; font-size: 1vw; -webkit-transform: translateX(27.81845em); -moz-transform: translateX(27.81845em); -ms-transform: translateX(27.81845em); -o-transform: translateX(27.81845em); transform: translateX(27.81845em) } .layers .cloud-15.fade-up { -webkit-transform: translate(27.81845em, 60px); -moz-transform: translate(27.81845em, 60px); -ms-transform: translate(27.81845em, 60px); -o-transform: translate(27.81845em, 60px); transform: translate(27.81845em, 60px) } .layers .cloud-15.fade-up.is-visible { -webkit-transform: translate(27.81845em); -moz-transform: translate(27.81845em); -ms-transform: translate(27.81845em); -o-transform: translate(27.81845em); transform: translate(27.81845em) } } @media (max-height: 700px) { .layers .cloud-15 { margin-top: 30px } } .layers .cloud-16 { position: absolute; left: 50%; top: 85px; z-index: 20; width: 71.1px; height: 57.9px; -webkit-transform: translateX(555px); -moz-transform: translateX(555px); -ms-transform: translateX(555px); -o-transform: translateX(555px); transform: translateX(555px); background: url(../images/cloud-16.png) 0 0/contain no-repeat; opacity: 0 } .layers .cloud-16.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .cloud-16.fade-in.is-visible { opacity: 1 } .layers .cloud-16.fade-up { opacity: 0; -webkit-transform: translate(555px, 60px); -moz-transform: translate(555px, 60px); -ms-transform: translate(555px, 60px); -o-transform: translate(555px, 60px); transform: translate(555px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .cloud-16.fade-up.is-visible { opacity: 1; -webkit-transform: translate(555px); -moz-transform: translate(555px); -ms-transform: translate(555px); -o-transform: translate(555px); transform: translate(555px) } @media (max-width: 1366px) { .layers .cloud-16 { top: 6.22255vw; width: 5.20498vw; height: 4.23865vw; font-size: 1vw; -webkit-transform: translateX(40.62958em); -moz-transform: translateX(40.62958em); -ms-transform: translateX(40.62958em); -o-transform: translateX(40.62958em); transform: translateX(40.62958em) } .layers .cloud-16.fade-up { -webkit-transform: translate(40.62958em, 60px); -moz-transform: translate(40.62958em, 60px); -ms-transform: translate(40.62958em, 60px); -o-transform: translate(40.62958em, 60px); transform: translate(40.62958em, 60px) } .layers .cloud-16.fade-up.is-visible { -webkit-transform: translate(40.62958em); -moz-transform: translate(40.62958em); -ms-transform: translate(40.62958em); -o-transform: translate(40.62958em); transform: translate(40.62958em) } } @media (max-height: 700px) { .layers .cloud-16 { margin-top: 30px } } .layers .tree-1-shadow { position: absolute; left: 50%; top: 252px; z-index: 10; width: 191.59px; height: 131.81px; -webkit-transform: translateX(-622px); -moz-transform: translateX(-622px); -ms-transform: translateX(-622px); -o-transform: translateX(-622px); transform: translateX(-622px); background: url(../images/tree-1-shadow.png) 0 0/contain no-repeat } .layers .tree-1-shadow.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .tree-1-shadow.fade-in.is-visible { opacity: 1 } .layers .tree-1-shadow.fade-up { opacity: 0; -webkit-transform: translate(-622px, 60px); -moz-transform: translate(-622px, 60px); -ms-transform: translate(-622px, 60px); -o-transform: translate(-622px, 60px); transform: translate(-622px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .tree-1-shadow.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-622px); -moz-transform: translate(-622px); -ms-transform: translate(-622px); -o-transform: translate(-622px); transform: translate(-622px) } @media (max-width: 1366px) { .layers .tree-1-shadow { top: 18.44802vw; width: 14.02562vw; height: 9.64934vw; font-size: 1vw; -webkit-transform: translateX(-45.53441em); -moz-transform: translateX(-45.53441em); -ms-transform: translateX(-45.53441em); -o-transform: translateX(-45.53441em); transform: translateX(-45.53441em) } .layers .tree-1-shadow.fade-up { -webkit-transform: translate(-45.53441em, 60px); -moz-transform: translate(-45.53441em, 60px); -ms-transform: translate(-45.53441em, 60px); -o-transform: translate(-45.53441em, 60px); transform: translate(-45.53441em, 60px) } .layers .tree-1-shadow.fade-up.is-visible { -webkit-transform: translate(-45.53441em); -moz-transform: translate(-45.53441em); -ms-transform: translate(-45.53441em); -o-transform: translate(-45.53441em); transform: translate(-45.53441em) } } .layers .tree-1 { position: absolute; left: 50%; top: 252px; z-index: 10; width: 191.59px; height: 131.81px; -webkit-transform: translateX(-622px); -moz-transform: translateX(-622px); -ms-transform: translateX(-622px); -o-transform: translateX(-622px); transform: translateX(-622px); background: url(../images/tree-1.png) 0 0/contain no-repeat; opacity: 0 } .layers .tree-1.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .tree-1.fade-in.is-visible { opacity: 1 } .layers .tree-1.fade-up { opacity: 0; -webkit-transform: translate(-622px, 60px); -moz-transform: translate(-622px, 60px); -ms-transform: translate(-622px, 60px); -o-transform: translate(-622px, 60px); transform: translate(-622px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .tree-1.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-622px); -moz-transform: translate(-622px); -ms-transform: translate(-622px); -o-transform: translate(-622px); transform: translate(-622px) } @media (max-width: 1366px) { .layers .tree-1 { top: 18.44802vw; width: 14.02562vw; height: 9.64934vw; font-size: 1vw; -webkit-transform: translateX(-45.53441em); -moz-transform: translateX(-45.53441em); -ms-transform: translateX(-45.53441em); -o-transform: translateX(-45.53441em); transform: translateX(-45.53441em) } .layers .tree-1.fade-up { -webkit-transform: translate(-45.53441em, 60px); -moz-transform: translate(-45.53441em, 60px); -ms-transform: translate(-45.53441em, 60px); -o-transform: translate(-45.53441em, 60px); transform: translate(-45.53441em, 60px) } .layers .tree-1.fade-up.is-visible { -webkit-transform: translate(-45.53441em); -moz-transform: translate(-45.53441em); -ms-transform: translate(-45.53441em); -o-transform: translate(-45.53441em); transform: translate(-45.53441em) } } .layers .tree-1-shadow { opacity: 0 } .layers .tree-2-shadow { position: absolute; left: 50%; top: 292px; z-index: 10; width: 198.94px; height: 114.17px; -webkit-transform: translateX(-562px); -moz-transform: translateX(-562px); -ms-transform: translateX(-562px); -o-transform: translateX(-562px); transform: translateX(-562px); background: url(../images/tree-2-shadow.png) 0 0/contain no-repeat } .layers .tree-2-shadow.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .tree-2-shadow.fade-in.is-visible { opacity: 1 } .layers .tree-2-shadow.fade-up { opacity: 0; -webkit-transform: translate(-562px, 60px); -moz-transform: translate(-562px, 60px); -ms-transform: translate(-562px, 60px); -o-transform: translate(-562px, 60px); transform: translate(-562px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .tree-2-shadow.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-562px); -moz-transform: translate(-562px); -ms-transform: translate(-562px); -o-transform: translate(-562px); transform: translate(-562px) } @media (max-width: 1366px) { .layers .tree-2-shadow { top: 21.37628vw; width: 14.56369vw; height: 8.35798vw; font-size: 1vw; -webkit-transform: translateX(-41.14202em); -moz-transform: translateX(-41.14202em); -ms-transform: translateX(-41.14202em); -o-transform: translateX(-41.14202em); transform: translateX(-41.14202em) } .layers .tree-2-shadow.fade-up { -webkit-transform: translate(-41.14202em, 60px); -moz-transform: translate(-41.14202em, 60px); -ms-transform: translate(-41.14202em, 60px); -o-transform: translate(-41.14202em, 60px); transform: translate(-41.14202em, 60px) } .layers .tree-2-shadow.fade-up.is-visible { -webkit-transform: translate(-41.14202em); -moz-transform: translate(-41.14202em); -ms-transform: translate(-41.14202em); -o-transform: translate(-41.14202em); transform: translate(-41.14202em) } } .layers .tree-2 { position: absolute; left: 50%; top: 292px; z-index: 10; width: 198.94px; height: 114.17px; -webkit-transform: translateX(-562px); -moz-transform: translateX(-562px); -ms-transform: translateX(-562px); -o-transform: translateX(-562px); transform: translateX(-562px); background: url(../images/tree-2.png) 0 0/contain no-repeat; opacity: 0 } .layers .tree-2.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .tree-2.fade-in.is-visible { opacity: 1 } .layers .tree-2.fade-up { opacity: 0; -webkit-transform: translate(-562px, 60px); -moz-transform: translate(-562px, 60px); -ms-transform: translate(-562px, 60px); -o-transform: translate(-562px, 60px); transform: translate(-562px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .tree-2.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-562px); -moz-transform: translate(-562px); -ms-transform: translate(-562px); -o-transform: translate(-562px); transform: translate(-562px) } @media (max-width: 1366px) { .layers .tree-2 { top: 21.37628vw; width: 14.56369vw; height: 8.35798vw; font-size: 1vw; -webkit-transform: translateX(-41.14202em); -moz-transform: translateX(-41.14202em); -ms-transform: translateX(-41.14202em); -o-transform: translateX(-41.14202em); transform: translateX(-41.14202em) } .layers .tree-2.fade-up { -webkit-transform: translate(-41.14202em, 60px); -moz-transform: translate(-41.14202em, 60px); -ms-transform: translate(-41.14202em, 60px); -o-transform: translate(-41.14202em, 60px); transform: translate(-41.14202em, 60px) } .layers .tree-2.fade-up.is-visible { -webkit-transform: translate(-41.14202em); -moz-transform: translate(-41.14202em); -ms-transform: translate(-41.14202em); -o-transform: translate(-41.14202em); transform: translate(-41.14202em) } } .layers .tree-2-shadow { opacity: 0 } .layers .tree-3-shadow { position: absolute; left: 50%; top: 345px; z-index: 10; width: 168.56px; height: 117.6px; -webkit-transform: translateX(-654px); -moz-transform: translateX(-654px); -ms-transform: translateX(-654px); -o-transform: translateX(-654px); transform: translateX(-654px); background: url(../images/tree-3-shadow.png) 0 0/contain no-repeat } .layers .tree-3-shadow.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .tree-3-shadow.fade-in.is-visible { opacity: 1 } .layers .tree-3-shadow.fade-up { opacity: 0; -webkit-transform: translate(-654px, 60px); -moz-transform: translate(-654px, 60px); -ms-transform: translate(-654px, 60px); -o-transform: translate(-654px, 60px); transform: translate(-654px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .tree-3-shadow.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-654px); -moz-transform: translate(-654px); -ms-transform: translate(-654px); -o-transform: translate(-654px); transform: translate(-654px) } @media (max-width: 1366px) { .layers .tree-3-shadow { top: 25.25622vw; width: 12.33968vw; height: 8.60908vw; font-size: 1vw; -webkit-transform: translateX(-47.87701em); -moz-transform: translateX(-47.87701em); -ms-transform: translateX(-47.87701em); -o-transform: translateX(-47.87701em); transform: translateX(-47.87701em) } .layers .tree-3-shadow.fade-up { -webkit-transform: translate(-47.87701em, 60px); -moz-transform: translate(-47.87701em, 60px); -ms-transform: translate(-47.87701em, 60px); -o-transform: translate(-47.87701em, 60px); transform: translate(-47.87701em, 60px) } .layers .tree-3-shadow.fade-up.is-visible { -webkit-transform: translate(-47.87701em); -moz-transform: translate(-47.87701em); -ms-transform: translate(-47.87701em); -o-transform: translate(-47.87701em); transform: translate(-47.87701em) } } .layers .tree-3 { position: absolute; left: 50%; top: 345px; z-index: 10; width: 168.56px; height: 117.6px; -webkit-transform: translateX(-654px); -moz-transform: translateX(-654px); -ms-transform: translateX(-654px); -o-transform: translateX(-654px); transform: translateX(-654px); background: url(../images/tree-3.png) 0 0/contain no-repeat; opacity: 0 } .layers .tree-3.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .tree-3.fade-in.is-visible { opacity: 1 } .layers .tree-3.fade-up { opacity: 0; -webkit-transform: translate(-654px, 60px); -moz-transform: translate(-654px, 60px); -ms-transform: translate(-654px, 60px); -o-transform: translate(-654px, 60px); transform: translate(-654px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .tree-3.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-654px); -moz-transform: translate(-654px); -ms-transform: translate(-654px); -o-transform: translate(-654px); transform: translate(-654px) } @media (max-width: 1366px) { .layers .tree-3 { top: 25.25622vw; width: 12.33968vw; height: 8.60908vw; font-size: 1vw; -webkit-transform: translateX(-47.87701em); -moz-transform: translateX(-47.87701em); -ms-transform: translateX(-47.87701em); -o-transform: translateX(-47.87701em); transform: translateX(-47.87701em) } .layers .tree-3.fade-up { -webkit-transform: translate(-47.87701em, 60px); -moz-transform: translate(-47.87701em, 60px); -ms-transform: translate(-47.87701em, 60px); -o-transform: translate(-47.87701em, 60px); transform: translate(-47.87701em, 60px) } .layers .tree-3.fade-up.is-visible { -webkit-transform: translate(-47.87701em); -moz-transform: translate(-47.87701em); -ms-transform: translate(-47.87701em); -o-transform: translate(-47.87701em); transform: translate(-47.87701em) } } .layers .tree-3-shadow { opacity: 0 } .layers .tree-4-shadow { position: absolute; left: 50%; top: 353px; z-index: 10; width: 159.74px; height: 112.7px; -webkit-transform: translateX(-240px); -moz-transform: translateX(-240px); -ms-transform: translateX(-240px); -o-transform: translateX(-240px); transform: translateX(-240px); background: url(../images/tree-4-shadow.png) 0 0/contain no-repeat } .layers .tree-4-shadow.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .tree-4-shadow.fade-in.is-visible { opacity: 1 } .layers .tree-4-shadow.fade-up { opacity: 0; -webkit-transform: translate(-240px, 60px); -moz-transform: translate(-240px, 60px); -ms-transform: translate(-240px, 60px); -o-transform: translate(-240px, 60px); transform: translate(-240px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .tree-4-shadow.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-240px); -moz-transform: translate(-240px); -ms-transform: translate(-240px); -o-transform: translate(-240px); transform: translate(-240px) } @media (max-width: 1366px) { .layers .tree-4-shadow { top: 25.84187vw; width: 11.694vw; height: 8.25037vw; font-size: 1vw; -webkit-transform: translateX(-17.56955em); -moz-transform: translateX(-17.56955em); -ms-transform: translateX(-17.56955em); -o-transform: translateX(-17.56955em); transform: translateX(-17.56955em) } .layers .tree-4-shadow.fade-up { -webkit-transform: translate(-17.56955em, 60px); -moz-transform: translate(-17.56955em, 60px); -ms-transform: translate(-17.56955em, 60px); -o-transform: translate(-17.56955em, 60px); transform: translate(-17.56955em, 60px) } .layers .tree-4-shadow.fade-up.is-visible { -webkit-transform: translate(-17.56955em); -moz-transform: translate(-17.56955em); -ms-transform: translate(-17.56955em); -o-transform: translate(-17.56955em); transform: translate(-17.56955em) } } .layers .tree-4 { position: absolute; left: 50%; top: 353px; z-index: 10; width: 159.74px; height: 112.7px; -webkit-transform: translateX(-240px); -moz-transform: translateX(-240px); -ms-transform: translateX(-240px); -o-transform: translateX(-240px); transform: translateX(-240px); background: url(../images/tree-4.png) 0 0/contain no-repeat; opacity: 0 } .layers .tree-4.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .tree-4.fade-in.is-visible { opacity: 1 } .layers .tree-4.fade-up { opacity: 0; -webkit-transform: translate(-240px, 60px); -moz-transform: translate(-240px, 60px); -ms-transform: translate(-240px, 60px); -o-transform: translate(-240px, 60px); transform: translate(-240px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .tree-4.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-240px); -moz-transform: translate(-240px); -ms-transform: translate(-240px); -o-transform: translate(-240px); transform: translate(-240px) } @media (max-width: 1366px) { .layers .tree-4 { top: 25.84187vw; width: 11.694vw; height: 8.25037vw; font-size: 1vw; -webkit-transform: translateX(-17.56955em); -moz-transform: translateX(-17.56955em); -ms-transform: translateX(-17.56955em); -o-transform: translateX(-17.56955em); transform: translateX(-17.56955em) } .layers .tree-4.fade-up { -webkit-transform: translate(-17.56955em, 60px); -moz-transform: translate(-17.56955em, 60px); -ms-transform: translate(-17.56955em, 60px); -o-transform: translate(-17.56955em, 60px); transform: translate(-17.56955em, 60px) } .layers .tree-4.fade-up.is-visible { -webkit-transform: translate(-17.56955em); -moz-transform: translate(-17.56955em); -ms-transform: translate(-17.56955em); -o-transform: translate(-17.56955em); transform: translate(-17.56955em) } } .layers .tree-4-shadow { opacity: 0 } .layers .tree-5-shadow { position: absolute; left: 50%; top: 394px; z-index: 10; width: 141.12px; height: 94.57px; -webkit-transform: translateX(-143px); -moz-transform: translateX(-143px); -ms-transform: translateX(-143px); -o-transform: translateX(-143px); transform: translateX(-143px); background: url(../images/tree-5-shadow.png) 0 0/contain no-repeat } .layers .tree-5-shadow.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .tree-5-shadow.fade-in.is-visible { opacity: 1 } .layers .tree-5-shadow.fade-up { opacity: 0; -webkit-transform: translate(-143px, 60px); -moz-transform: translate(-143px, 60px); -ms-transform: translate(-143px, 60px); -o-transform: translate(-143px, 60px); transform: translate(-143px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .tree-5-shadow.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-143px); -moz-transform: translate(-143px); -ms-transform: translate(-143px); -o-transform: translate(-143px); transform: translate(-143px) } @media (max-width: 1366px) { .layers .tree-5-shadow { top: 28.84334vw; width: 10.33089vw; height: 6.92313vw; font-size: 1vw; -webkit-transform: translateX(-10.46852em); -moz-transform: translateX(-10.46852em); -ms-transform: translateX(-10.46852em); -o-transform: translateX(-10.46852em); transform: translateX(-10.46852em) } .layers .tree-5-shadow.fade-up { -webkit-transform: translate(-10.46852em, 60px); -moz-transform: translate(-10.46852em, 60px); -ms-transform: translate(-10.46852em, 60px); -o-transform: translate(-10.46852em, 60px); transform: translate(-10.46852em, 60px) } .layers .tree-5-shadow.fade-up.is-visible { -webkit-transform: translate(-10.46852em); -moz-transform: translate(-10.46852em); -ms-transform: translate(-10.46852em); -o-transform: translate(-10.46852em); transform: translate(-10.46852em) } } .layers .tree-5 { position: absolute; left: 50%; top: 394px; z-index: 10; width: 141.12px; height: 94.57px; -webkit-transform: translateX(-143px); -moz-transform: translateX(-143px); -ms-transform: translateX(-143px); -o-transform: translateX(-143px); transform: translateX(-143px); background: url(../images/tree-5.png) 0 0/contain no-repeat; opacity: 0 } .layers .tree-5.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .tree-5.fade-in.is-visible { opacity: 1 } .layers .tree-5.fade-up { opacity: 0; -webkit-transform: translate(-143px, 60px); -moz-transform: translate(-143px, 60px); -ms-transform: translate(-143px, 60px); -o-transform: translate(-143px, 60px); transform: translate(-143px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .tree-5.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-143px); -moz-transform: translate(-143px); -ms-transform: translate(-143px); -o-transform: translate(-143px); transform: translate(-143px) } @media (max-width: 1366px) { .layers .tree-5 { top: 28.84334vw; width: 10.33089vw; height: 6.92313vw; font-size: 1vw; -webkit-transform: translateX(-10.46852em); -moz-transform: translateX(-10.46852em); -ms-transform: translateX(-10.46852em); -o-transform: translateX(-10.46852em); transform: translateX(-10.46852em) } .layers .tree-5.fade-up { -webkit-transform: translate(-10.46852em, 60px); -moz-transform: translate(-10.46852em, 60px); -ms-transform: translate(-10.46852em, 60px); -o-transform: translate(-10.46852em, 60px); transform: translate(-10.46852em, 60px) } .layers .tree-5.fade-up.is-visible { -webkit-transform: translate(-10.46852em); -moz-transform: translate(-10.46852em); -ms-transform: translate(-10.46852em); -o-transform: translate(-10.46852em); transform: translate(-10.46852em) } } .layers .tree-5-shadow { opacity: 0 } .layers .tree-6-shadow { position: absolute; left: 50%; top: 423px; z-index: 10; width: 105.84px; height: 72.52px; -webkit-transform: translateX(-99px); -moz-transform: translateX(-99px); -ms-transform: translateX(-99px); -o-transform: translateX(-99px); transform: translateX(-99px); background: url(../images/tree-6-shadow.png) 0 0/contain no-repeat } .layers .tree-6-shadow.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .tree-6-shadow.fade-in.is-visible { opacity: 1 } .layers .tree-6-shadow.fade-up { opacity: 0; -webkit-transform: translate(-99px, 60px); -moz-transform: translate(-99px, 60px); -ms-transform: translate(-99px, 60px); -o-transform: translate(-99px, 60px); transform: translate(-99px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .tree-6-shadow.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-99px); -moz-transform: translate(-99px); -ms-transform: translate(-99px); -o-transform: translate(-99px); transform: translate(-99px) } @media (max-width: 1366px) { .layers .tree-6-shadow { top: 30.96633vw; width: 7.74817vw; height: 5.30893vw; font-size: 1vw; -webkit-transform: translateX(-7.24744em); -moz-transform: translateX(-7.24744em); -ms-transform: translateX(-7.24744em); -o-transform: translateX(-7.24744em); transform: translateX(-7.24744em) } .layers .tree-6-shadow.fade-up { -webkit-transform: translate(-7.24744em, 60px); -moz-transform: translate(-7.24744em, 60px); -ms-transform: translate(-7.24744em, 60px); -o-transform: translate(-7.24744em, 60px); transform: translate(-7.24744em, 60px) } .layers .tree-6-shadow.fade-up.is-visible { -webkit-transform: translate(-7.24744em); -moz-transform: translate(-7.24744em); -ms-transform: translate(-7.24744em); -o-transform: translate(-7.24744em); transform: translate(-7.24744em) } } .layers .tree-6 { position: absolute; left: 50%; top: 423px; z-index: 10; width: 105.84px; height: 72.52px; -webkit-transform: translateX(-99px); -moz-transform: translateX(-99px); -ms-transform: translateX(-99px); -o-transform: translateX(-99px); transform: translateX(-99px); background: url(../images/tree-6.png) 0 0/contain no-repeat; opacity: 0 } .layers .tree-6.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .tree-6.fade-in.is-visible { opacity: 1 } .layers .tree-6.fade-up { opacity: 0; -webkit-transform: translate(-99px, 60px); -moz-transform: translate(-99px, 60px); -ms-transform: translate(-99px, 60px); -o-transform: translate(-99px, 60px); transform: translate(-99px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .tree-6.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-99px); -moz-transform: translate(-99px); -ms-transform: translate(-99px); -o-transform: translate(-99px); transform: translate(-99px) } @media (max-width: 1366px) { .layers .tree-6 { top: 30.96633vw; width: 7.74817vw; height: 5.30893vw; font-size: 1vw; -webkit-transform: translateX(-7.24744em); -moz-transform: translateX(-7.24744em); -ms-transform: translateX(-7.24744em); -o-transform: translateX(-7.24744em); transform: translateX(-7.24744em) } .layers .tree-6.fade-up { -webkit-transform: translate(-7.24744em, 60px); -moz-transform: translate(-7.24744em, 60px); -ms-transform: translate(-7.24744em, 60px); -o-transform: translate(-7.24744em, 60px); transform: translate(-7.24744em, 60px) } .layers .tree-6.fade-up.is-visible { -webkit-transform: translate(-7.24744em); -moz-transform: translate(-7.24744em); -ms-transform: translate(-7.24744em); -o-transform: translate(-7.24744em); transform: translate(-7.24744em) } } .layers .tree-6-shadow { opacity: 0 } .layers .tree-7-shadow { position: absolute; left: 50%; top: 408px; z-index: 10; width: 192.57px; height: 124.95px; -webkit-transform: translateX(210px); -moz-transform: translateX(210px); -ms-transform: translateX(210px); -o-transform: translateX(210px); transform: translateX(210px); background: url(../images/tree-7-shadow.png) 0 0/contain no-repeat } .layers .tree-7-shadow.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .tree-7-shadow.fade-in.is-visible { opacity: 1 } .layers .tree-7-shadow.fade-up { opacity: 0; -webkit-transform: translate(210px, 60px); -moz-transform: translate(210px, 60px); -ms-transform: translate(210px, 60px); -o-transform: translate(210px, 60px); transform: translate(210px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .tree-7-shadow.fade-up.is-visible { opacity: 1; -webkit-transform: translate(210px); -moz-transform: translate(210px); -ms-transform: translate(210px); -o-transform: translate(210px); transform: translate(210px) } @media (max-width: 1366px) { .layers .tree-7-shadow { top: 29.86823vw; width: 14.09736vw; height: 9.14714vw; font-size: 1vw; -webkit-transform: translateX(15.37335em); -moz-transform: translateX(15.37335em); -ms-transform: translateX(15.37335em); -o-transform: translateX(15.37335em); transform: translateX(15.37335em) } .layers .tree-7-shadow.fade-up { -webkit-transform: translate(15.37335em, 60px); -moz-transform: translate(15.37335em, 60px); -ms-transform: translate(15.37335em, 60px); -o-transform: translate(15.37335em, 60px); transform: translate(15.37335em, 60px) } .layers .tree-7-shadow.fade-up.is-visible { -webkit-transform: translate(15.37335em); -moz-transform: translate(15.37335em); -ms-transform: translate(15.37335em); -o-transform: translate(15.37335em); transform: translate(15.37335em) } } .layers .tree-7 { position: absolute; left: 50%; top: 408px; z-index: 10; width: 192.57px; height: 124.95px; -webkit-transform: translateX(210px); -moz-transform: translateX(210px); -ms-transform: translateX(210px); -o-transform: translateX(210px); transform: translateX(210px); background: url(../images/tree-7.png) 0 0/contain no-repeat; opacity: 0 } .layers .tree-7.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .tree-7.fade-in.is-visible { opacity: 1 } .layers .tree-7.fade-up { opacity: 0; -webkit-transform: translate(210px, 60px); -moz-transform: translate(210px, 60px); -ms-transform: translate(210px, 60px); -o-transform: translate(210px, 60px); transform: translate(210px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .tree-7.fade-up.is-visible { opacity: 1; -webkit-transform: translate(210px); -moz-transform: translate(210px); -ms-transform: translate(210px); -o-transform: translate(210px); transform: translate(210px) } @media (max-width: 1366px) { .layers .tree-7 { top: 29.86823vw; width: 14.09736vw; height: 9.14714vw; font-size: 1vw; -webkit-transform: translateX(15.37335em); -moz-transform: translateX(15.37335em); -ms-transform: translateX(15.37335em); -o-transform: translateX(15.37335em); transform: translateX(15.37335em) } .layers .tree-7.fade-up { -webkit-transform: translate(15.37335em, 60px); -moz-transform: translate(15.37335em, 60px); -ms-transform: translate(15.37335em, 60px); -o-transform: translate(15.37335em, 60px); transform: translate(15.37335em, 60px) } .layers .tree-7.fade-up.is-visible { -webkit-transform: translate(15.37335em); -moz-transform: translate(15.37335em); -ms-transform: translate(15.37335em); -o-transform: translate(15.37335em); transform: translate(15.37335em) } } .layers .tree-7-shadow { opacity: 0 } .layers .tree-8-shadow { position: absolute; left: 50%; top: 461px; z-index: 10; width: 164.64px; height: 112.7px; -webkit-transform: translateX(154px); -moz-transform: translateX(154px); -ms-transform: translateX(154px); -o-transform: translateX(154px); transform: translateX(154px); background: url(../images/tree-8-shadow.png) 0 0/contain no-repeat } .layers .tree-8-shadow.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .tree-8-shadow.fade-in.is-visible { opacity: 1 } .layers .tree-8-shadow.fade-up { opacity: 0; -webkit-transform: translate(154px, 60px); -moz-transform: translate(154px, 60px); -ms-transform: translate(154px, 60px); -o-transform: translate(154px, 60px); transform: translate(154px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .tree-8-shadow.fade-up.is-visible { opacity: 1; -webkit-transform: translate(154px); -moz-transform: translate(154px); -ms-transform: translate(154px); -o-transform: translate(154px); transform: translate(154px) } @media (max-width: 1366px) { .layers .tree-8-shadow { top: 33.74817vw; width: 12.05271vw; height: 8.25037vw; font-size: 1vw; -webkit-transform: translateX(11.27379em); -moz-transform: translateX(11.27379em); -ms-transform: translateX(11.27379em); -o-transform: translateX(11.27379em); transform: translateX(11.27379em) } .layers .tree-8-shadow.fade-up { -webkit-transform: translate(11.27379em, 60px); -moz-transform: translate(11.27379em, 60px); -ms-transform: translate(11.27379em, 60px); -o-transform: translate(11.27379em, 60px); transform: translate(11.27379em, 60px) } .layers .tree-8-shadow.fade-up.is-visible { -webkit-transform: translate(11.27379em); -moz-transform: translate(11.27379em); -ms-transform: translate(11.27379em); -o-transform: translate(11.27379em); transform: translate(11.27379em) } } .layers .tree-8 { position: absolute; left: 50%; top: 461px; z-index: 10; width: 164.64px; height: 112.7px; -webkit-transform: translateX(154px); -moz-transform: translateX(154px); -ms-transform: translateX(154px); -o-transform: translateX(154px); transform: translateX(154px); background: url(../images/tree-8.png) 0 0/contain no-repeat; opacity: 0 } .layers .tree-8.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .tree-8.fade-in.is-visible { opacity: 1 } .layers .tree-8.fade-up { opacity: 0; -webkit-transform: translate(154px, 60px); -moz-transform: translate(154px, 60px); -ms-transform: translate(154px, 60px); -o-transform: translate(154px, 60px); transform: translate(154px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .tree-8.fade-up.is-visible { opacity: 1; -webkit-transform: translate(154px); -moz-transform: translate(154px); -ms-transform: translate(154px); -o-transform: translate(154px); transform: translate(154px) } @media (max-width: 1366px) { .layers .tree-8 { top: 33.74817vw; width: 12.05271vw; height: 8.25037vw; font-size: 1vw; -webkit-transform: translateX(11.27379em); -moz-transform: translateX(11.27379em); -ms-transform: translateX(11.27379em); -o-transform: translateX(11.27379em); transform: translateX(11.27379em) } .layers .tree-8.fade-up { -webkit-transform: translate(11.27379em, 60px); -moz-transform: translate(11.27379em, 60px); -ms-transform: translate(11.27379em, 60px); -o-transform: translate(11.27379em, 60px); transform: translate(11.27379em, 60px) } .layers .tree-8.fade-up.is-visible { -webkit-transform: translate(11.27379em); -moz-transform: translate(11.27379em); -ms-transform: translate(11.27379em); -o-transform: translate(11.27379em); transform: translate(11.27379em) } } .layers .tree-8-shadow { opacity: 0 } .layers .tree-9-shadow { position: absolute; left: 50%; top: 492px; z-index: 10; width: 186.69px; height: 130.83px; -webkit-transform: translateX(58px); -moz-transform: translateX(58px); -ms-transform: translateX(58px); -o-transform: translateX(58px); transform: translateX(58px); background: url(../images/tree-9-shadow.png) 0 0/contain no-repeat } .layers .tree-9-shadow.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .tree-9-shadow.fade-in.is-visible { opacity: 1 } .layers .tree-9-shadow.fade-up { opacity: 0; -webkit-transform: translate(58px, 60px); -moz-transform: translate(58px, 60px); -ms-transform: translate(58px, 60px); -o-transform: translate(58px, 60px); transform: translate(58px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .tree-9-shadow.fade-up.is-visible { opacity: 1; -webkit-transform: translate(58px); -moz-transform: translate(58px); -ms-transform: translate(58px); -o-transform: translate(58px); transform: translate(58px) } @media (max-width: 1366px) { .layers .tree-9-shadow { top: 36.01757vw; width: 13.66691vw; height: 9.5776vw; font-size: 1vw; -webkit-transform: translateX(4.24597em); -moz-transform: translateX(4.24597em); -ms-transform: translateX(4.24597em); -o-transform: translateX(4.24597em); transform: translateX(4.24597em) } .layers .tree-9-shadow.fade-up { -webkit-transform: translate(4.24597em, 60px); -moz-transform: translate(4.24597em, 60px); -ms-transform: translate(4.24597em, 60px); -o-transform: translate(4.24597em, 60px); transform: translate(4.24597em, 60px) } .layers .tree-9-shadow.fade-up.is-visible { -webkit-transform: translate(4.24597em); -moz-transform: translate(4.24597em); -ms-transform: translate(4.24597em); -o-transform: translate(4.24597em); transform: translate(4.24597em) } } .layers .tree-9 { position: absolute; left: 50%; top: 492px; z-index: 10; width: 186.69px; height: 130.83px; -webkit-transform: translateX(58px); -moz-transform: translateX(58px); -ms-transform: translateX(58px); -o-transform: translateX(58px); transform: translateX(58px); background: url(../images/tree-9.png) 0 0/contain no-repeat; opacity: 0 } .layers .tree-9.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .tree-9.fade-in.is-visible { opacity: 1 } .layers .tree-9.fade-up { opacity: 0; -webkit-transform: translate(58px, 60px); -moz-transform: translate(58px, 60px); -ms-transform: translate(58px, 60px); -o-transform: translate(58px, 60px); transform: translate(58px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .tree-9.fade-up.is-visible { opacity: 1; -webkit-transform: translate(58px); -moz-transform: translate(58px); -ms-transform: translate(58px); -o-transform: translate(58px); transform: translate(58px) } @media (max-width: 1366px) { .layers .tree-9 { top: 36.01757vw; width: 13.66691vw; height: 9.5776vw; font-size: 1vw; -webkit-transform: translateX(4.24597em); -moz-transform: translateX(4.24597em); -ms-transform: translateX(4.24597em); -o-transform: translateX(4.24597em); transform: translateX(4.24597em) } .layers .tree-9.fade-up { -webkit-transform: translate(4.24597em, 60px); -moz-transform: translate(4.24597em, 60px); -ms-transform: translate(4.24597em, 60px); -o-transform: translate(4.24597em, 60px); transform: translate(4.24597em, 60px) } .layers .tree-9.fade-up.is-visible { -webkit-transform: translate(4.24597em); -moz-transform: translate(4.24597em); -ms-transform: translate(4.24597em); -o-transform: translate(4.24597em); transform: translate(4.24597em) } } .layers .tree-9-shadow { opacity: 0 } .layers .tree-10-shadow { position: absolute; left: 50%; top: 540px; z-index: 10; width: 199.92px; height: 119.07px; -webkit-transform: translateX(-26px); -moz-transform: translateX(-26px); -ms-transform: translateX(-26px); -o-transform: translateX(-26px); transform: translateX(-26px); background: url(../images/tree-10-shadow.png) 0 0/contain no-repeat } .layers .tree-10-shadow.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .tree-10-shadow.fade-in.is-visible { opacity: 1 } .layers .tree-10-shadow.fade-up { opacity: 0; -webkit-transform: translate(-26px, 60px); -moz-transform: translate(-26px, 60px); -ms-transform: translate(-26px, 60px); -o-transform: translate(-26px, 60px); transform: translate(-26px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .tree-10-shadow.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-26px); -moz-transform: translate(-26px); -ms-transform: translate(-26px); -o-transform: translate(-26px); transform: translate(-26px) } @media (max-width: 1366px) { .layers .tree-10-shadow { top: 39.53148vw; width: 14.63543vw; height: 8.71669vw; font-size: 1vw; -webkit-transform: translateX(-1.90337em); -moz-transform: translateX(-1.90337em); -ms-transform: translateX(-1.90337em); -o-transform: translateX(-1.90337em); transform: translateX(-1.90337em) } .layers .tree-10-shadow.fade-up { -webkit-transform: translate(-1.90337em, 60px); -moz-transform: translate(-1.90337em, 60px); -ms-transform: translate(-1.90337em, 60px); -o-transform: translate(-1.90337em, 60px); transform: translate(-1.90337em, 60px) } .layers .tree-10-shadow.fade-up.is-visible { -webkit-transform: translate(-1.90337em); -moz-transform: translate(-1.90337em); -ms-transform: translate(-1.90337em); -o-transform: translate(-1.90337em); transform: translate(-1.90337em) } } .layers .tree-10 { position: absolute; left: 50%; top: 540px; z-index: 10; width: 199.92px; height: 119.07px; -webkit-transform: translateX(-26px); -moz-transform: translateX(-26px); -ms-transform: translateX(-26px); -o-transform: translateX(-26px); transform: translateX(-26px); background: url(../images/tree-10.png) 0 0/contain no-repeat; opacity: 0 } .layers .tree-10.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .tree-10.fade-in.is-visible { opacity: 1 } .layers .tree-10.fade-up { opacity: 0; -webkit-transform: translate(-26px, 60px); -moz-transform: translate(-26px, 60px); -ms-transform: translate(-26px, 60px); -o-transform: translate(-26px, 60px); transform: translate(-26px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .tree-10.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-26px); -moz-transform: translate(-26px); -ms-transform: translate(-26px); -o-transform: translate(-26px); transform: translate(-26px) } @media (max-width: 1366px) { .layers .tree-10 { top: 39.53148vw; width: 14.63543vw; height: 8.71669vw; font-size: 1vw; -webkit-transform: translateX(-1.90337em); -moz-transform: translateX(-1.90337em); -ms-transform: translateX(-1.90337em); -o-transform: translateX(-1.90337em); transform: translateX(-1.90337em) } .layers .tree-10.fade-up { -webkit-transform: translate(-1.90337em, 60px); -moz-transform: translate(-1.90337em, 60px); -ms-transform: translate(-1.90337em, 60px); -o-transform: translate(-1.90337em, 60px); transform: translate(-1.90337em, 60px) } .layers .tree-10.fade-up.is-visible { -webkit-transform: translate(-1.90337em); -moz-transform: translate(-1.90337em); -ms-transform: translate(-1.90337em); -o-transform: translate(-1.90337em); transform: translate(-1.90337em) } } .layers .tree-10-shadow { opacity: 0 } .layers .tree-11-shadow { position: absolute; left: 50%; top: 478px; z-index: 10; width: 195.51px; height: 116.62px; -webkit-transform: translateX(477px); -moz-transform: translateX(477px); -ms-transform: translateX(477px); -o-transform: translateX(477px); transform: translateX(477px); background: url(../images/tree-11-shadow.png) 0 0/contain no-repeat } .layers .tree-11-shadow.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .tree-11-shadow.fade-in.is-visible { opacity: 1 } .layers .tree-11-shadow.fade-up { opacity: 0; -webkit-transform: translate(477px, 60px); -moz-transform: translate(477px, 60px); -ms-transform: translate(477px, 60px); -o-transform: translate(477px, 60px); transform: translate(477px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .tree-11-shadow.fade-up.is-visible { opacity: 1; -webkit-transform: translate(477px); -moz-transform: translate(477px); -ms-transform: translate(477px); -o-transform: translate(477px); transform: translate(477px) } @media (max-width: 1366px) { .layers .tree-11-shadow { top: 34.99268vw; width: 14.31259vw; height: 8.53734vw; font-size: 1vw; -webkit-transform: translateX(34.91947em); -moz-transform: translateX(34.91947em); -ms-transform: translateX(34.91947em); -o-transform: translateX(34.91947em); transform: translateX(34.91947em) } .layers .tree-11-shadow.fade-up { -webkit-transform: translate(34.91947em, 60px); -moz-transform: translate(34.91947em, 60px); -ms-transform: translate(34.91947em, 60px); -o-transform: translate(34.91947em, 60px); transform: translate(34.91947em, 60px) } .layers .tree-11-shadow.fade-up.is-visible { -webkit-transform: translate(34.91947em); -moz-transform: translate(34.91947em); -ms-transform: translate(34.91947em); -o-transform: translate(34.91947em); transform: translate(34.91947em) } } .layers .tree-11 { position: absolute; left: 50%; top: 478px; z-index: 10; width: 195.51px; height: 116.62px; -webkit-transform: translateX(477px); -moz-transform: translateX(477px); -ms-transform: translateX(477px); -o-transform: translateX(477px); transform: translateX(477px); background: url(../images/tree-11.png) 0 0/contain no-repeat; opacity: 0 } .layers .tree-11.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .tree-11.fade-in.is-visible { opacity: 1 } .layers .tree-11.fade-up { opacity: 0; -webkit-transform: translate(477px, 60px); -moz-transform: translate(477px, 60px); -ms-transform: translate(477px, 60px); -o-transform: translate(477px, 60px); transform: translate(477px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .tree-11.fade-up.is-visible { opacity: 1; -webkit-transform: translate(477px); -moz-transform: translate(477px); -ms-transform: translate(477px); -o-transform: translate(477px); transform: translate(477px) } @media (max-width: 1366px) { .layers .tree-11 { top: 34.99268vw; width: 14.31259vw; height: 8.53734vw; font-size: 1vw; -webkit-transform: translateX(34.91947em); -moz-transform: translateX(34.91947em); -ms-transform: translateX(34.91947em); -o-transform: translateX(34.91947em); transform: translateX(34.91947em) } .layers .tree-11.fade-up { -webkit-transform: translate(34.91947em, 60px); -moz-transform: translate(34.91947em, 60px); -ms-transform: translate(34.91947em, 60px); -o-transform: translate(34.91947em, 60px); transform: translate(34.91947em, 60px) } .layers .tree-11.fade-up.is-visible { -webkit-transform: translate(34.91947em); -moz-transform: translate(34.91947em); -ms-transform: translate(34.91947em); -o-transform: translate(34.91947em); transform: translate(34.91947em) } } .layers .tree-11-shadow { opacity: 0 } .layers .tree-12-shadow { position: absolute; left: 50%; top: 481px; z-index: 10; width: 191.76px; height: 158.86px; -webkit-transform: translateX(-598px); -moz-transform: translateX(-598px); -ms-transform: translateX(-598px); -o-transform: translateX(-598px); transform: translateX(-598px); background: url(../images/tree-12-shadow.png) 0 0/contain no-repeat } .layers .tree-12-shadow.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .tree-12-shadow.fade-in.is-visible { opacity: 1 } .layers .tree-12-shadow.fade-up { opacity: 0; -webkit-transform: translate(-598px, 60px); -moz-transform: translate(-598px, 60px); -ms-transform: translate(-598px, 60px); -o-transform: translate(-598px, 60px); transform: translate(-598px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .tree-12-shadow.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-598px); -moz-transform: translate(-598px); -ms-transform: translate(-598px); -o-transform: translate(-598px); transform: translate(-598px) } @media (max-width: 1366px) { .layers .tree-12-shadow { top: 35.2123vw; width: 14.03807vw; height: 11.62958vw; font-size: 1vw; -webkit-transform: translateX(-43.77745em); -moz-transform: translateX(-43.77745em); -ms-transform: translateX(-43.77745em); -o-transform: translateX(-43.77745em); transform: translateX(-43.77745em) } .layers .tree-12-shadow.fade-up { -webkit-transform: translate(-43.77745em, 60px); -moz-transform: translate(-43.77745em, 60px); -ms-transform: translate(-43.77745em, 60px); -o-transform: translate(-43.77745em, 60px); transform: translate(-43.77745em, 60px) } .layers .tree-12-shadow.fade-up.is-visible { -webkit-transform: translate(-43.77745em); -moz-transform: translate(-43.77745em); -ms-transform: translate(-43.77745em); -o-transform: translate(-43.77745em); transform: translate(-43.77745em) } } .layers .tree-12 { position: absolute; left: 50%; top: 481px; z-index: 10; width: 191.76px; height: 158.86px; -webkit-transform: translateX(-598px); -moz-transform: translateX(-598px); -ms-transform: translateX(-598px); -o-transform: translateX(-598px); transform: translateX(-598px); background: url(../images/tree-12.png) 0 0/contain no-repeat; opacity: 0 } .layers .tree-12.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .tree-12.fade-in.is-visible { opacity: 1 } .layers .tree-12.fade-up { opacity: 0; -webkit-transform: translate(-598px, 60px); -moz-transform: translate(-598px, 60px); -ms-transform: translate(-598px, 60px); -o-transform: translate(-598px, 60px); transform: translate(-598px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .tree-12.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-598px); -moz-transform: translate(-598px); -ms-transform: translate(-598px); -o-transform: translate(-598px); transform: translate(-598px) } @media (max-width: 1366px) { .layers .tree-12 { top: 35.2123vw; width: 14.03807vw; height: 11.62958vw; font-size: 1vw; -webkit-transform: translateX(-43.77745em); -moz-transform: translateX(-43.77745em); -ms-transform: translateX(-43.77745em); -o-transform: translateX(-43.77745em); transform: translateX(-43.77745em) } .layers .tree-12.fade-up { -webkit-transform: translate(-43.77745em, 60px); -moz-transform: translate(-43.77745em, 60px); -ms-transform: translate(-43.77745em, 60px); -o-transform: translate(-43.77745em, 60px); transform: translate(-43.77745em, 60px) } .layers .tree-12.fade-up.is-visible { -webkit-transform: translate(-43.77745em); -moz-transform: translate(-43.77745em); -ms-transform: translate(-43.77745em); -o-transform: translate(-43.77745em); transform: translate(-43.77745em) } } .layers .tree-12-shadow { opacity: 0 } .layers .tree-13-shadow { position: absolute; left: 50%; top: 543px; z-index: 10; width: 124.95px; height: 102.41px; -webkit-transform: translateX(-526px); -moz-transform: translateX(-526px); -ms-transform: translateX(-526px); -o-transform: translateX(-526px); transform: translateX(-526px); background: url(../images/tree-13-shadow.png) 0 0/contain no-repeat } .layers .tree-13-shadow.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .tree-13-shadow.fade-in.is-visible { opacity: 1 } .layers .tree-13-shadow.fade-up { opacity: 0; -webkit-transform: translate(-526px, 60px); -moz-transform: translate(-526px, 60px); -ms-transform: translate(-526px, 60px); -o-transform: translate(-526px, 60px); transform: translate(-526px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .tree-13-shadow.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-526px); -moz-transform: translate(-526px); -ms-transform: translate(-526px); -o-transform: translate(-526px); transform: translate(-526px) } @media (max-width: 1366px) { .layers .tree-13-shadow { top: 39.7511vw; width: 9.14714vw; height: 7.49707vw; font-size: 1vw; -webkit-transform: translateX(-38.50659em); -moz-transform: translateX(-38.50659em); -ms-transform: translateX(-38.50659em); -o-transform: translateX(-38.50659em); transform: translateX(-38.50659em) } .layers .tree-13-shadow.fade-up { -webkit-transform: translate(-38.50659em, 60px); -moz-transform: translate(-38.50659em, 60px); -ms-transform: translate(-38.50659em, 60px); -o-transform: translate(-38.50659em, 60px); transform: translate(-38.50659em, 60px) } .layers .tree-13-shadow.fade-up.is-visible { -webkit-transform: translate(-38.50659em); -moz-transform: translate(-38.50659em); -ms-transform: translate(-38.50659em); -o-transform: translate(-38.50659em); transform: translate(-38.50659em) } } .layers .tree-13 { position: absolute; left: 50%; top: 543px; z-index: 10; width: 124.95px; height: 102.41px; -webkit-transform: translateX(-526px); -moz-transform: translateX(-526px); -ms-transform: translateX(-526px); -o-transform: translateX(-526px); transform: translateX(-526px); background: url(../images/tree-13.png) 0 0/contain no-repeat; opacity: 0 } .layers .tree-13.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .tree-13.fade-in.is-visible { opacity: 1 } .layers .tree-13.fade-up { opacity: 0; -webkit-transform: translate(-526px, 60px); -moz-transform: translate(-526px, 60px); -ms-transform: translate(-526px, 60px); -o-transform: translate(-526px, 60px); transform: translate(-526px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .tree-13.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-526px); -moz-transform: translate(-526px); -ms-transform: translate(-526px); -o-transform: translate(-526px); transform: translate(-526px) } @media (max-width: 1366px) { .layers .tree-13 { top: 39.7511vw; width: 9.14714vw; height: 7.49707vw; font-size: 1vw; -webkit-transform: translateX(-38.50659em); -moz-transform: translateX(-38.50659em); -ms-transform: translateX(-38.50659em); -o-transform: translateX(-38.50659em); transform: translateX(-38.50659em) } .layers .tree-13.fade-up { -webkit-transform: translate(-38.50659em, 60px); -moz-transform: translate(-38.50659em, 60px); -ms-transform: translate(-38.50659em, 60px); -o-transform: translate(-38.50659em, 60px); transform: translate(-38.50659em, 60px) } .layers .tree-13.fade-up.is-visible { -webkit-transform: translate(-38.50659em); -moz-transform: translate(-38.50659em); -ms-transform: translate(-38.50659em); -o-transform: translate(-38.50659em); transform: translate(-38.50659em) } } .layers .tree-13-shadow { opacity: 0 } .layers .tree-14-shadow { position: absolute; left: 50%; top: 544px; z-index: 10; width: 155.33px; height: 137.2px; -webkit-transform: translateX(-506px); -moz-transform: translateX(-506px); -ms-transform: translateX(-506px); -o-transform: translateX(-506px); transform: translateX(-506px); background: url(../images/tree-14-shadow.png) 0 0/contain no-repeat } .layers .tree-14-shadow.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .tree-14-shadow.fade-in.is-visible { opacity: 1 } .layers .tree-14-shadow.fade-up { opacity: 0; -webkit-transform: translate(-506px, 60px); -moz-transform: translate(-506px, 60px); -ms-transform: translate(-506px, 60px); -o-transform: translate(-506px, 60px); transform: translate(-506px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .tree-14-shadow.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-506px); -moz-transform: translate(-506px); -ms-transform: translate(-506px); -o-transform: translate(-506px); transform: translate(-506px) } @media (max-width: 1366px) { .layers .tree-14-shadow { top: 39.8243vw; width: 11.37116vw; height: 10.04392vw; font-size: 1vw; -webkit-transform: translateX(-37.04246em); -moz-transform: translateX(-37.04246em); -ms-transform: translateX(-37.04246em); -o-transform: translateX(-37.04246em); transform: translateX(-37.04246em) } .layers .tree-14-shadow.fade-up { -webkit-transform: translate(-37.04246em, 60px); -moz-transform: translate(-37.04246em, 60px); -ms-transform: translate(-37.04246em, 60px); -o-transform: translate(-37.04246em, 60px); transform: translate(-37.04246em, 60px) } .layers .tree-14-shadow.fade-up.is-visible { -webkit-transform: translate(-37.04246em); -moz-transform: translate(-37.04246em); -ms-transform: translate(-37.04246em); -o-transform: translate(-37.04246em); transform: translate(-37.04246em) } } .layers .tree-14 { position: absolute; left: 50%; top: 544px; z-index: 10; width: 155.33px; height: 137.2px; -webkit-transform: translateX(-506px); -moz-transform: translateX(-506px); -ms-transform: translateX(-506px); -o-transform: translateX(-506px); transform: translateX(-506px); background: url(../images/tree-14.png) 0 0/contain no-repeat; opacity: 0 } .layers .tree-14.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .tree-14.fade-in.is-visible { opacity: 1 } .layers .tree-14.fade-up { opacity: 0; -webkit-transform: translate(-506px, 60px); -moz-transform: translate(-506px, 60px); -ms-transform: translate(-506px, 60px); -o-transform: translate(-506px, 60px); transform: translate(-506px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .tree-14.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-506px); -moz-transform: translate(-506px); -ms-transform: translate(-506px); -o-transform: translate(-506px); transform: translate(-506px) } @media (max-width: 1366px) { .layers .tree-14 { top: 39.8243vw; width: 11.37116vw; height: 10.04392vw; font-size: 1vw; -webkit-transform: translateX(-37.04246em); -moz-transform: translateX(-37.04246em); -ms-transform: translateX(-37.04246em); -o-transform: translateX(-37.04246em); transform: translateX(-37.04246em) } .layers .tree-14.fade-up { -webkit-transform: translate(-37.04246em, 60px); -moz-transform: translate(-37.04246em, 60px); -ms-transform: translate(-37.04246em, 60px); -o-transform: translate(-37.04246em, 60px); transform: translate(-37.04246em, 60px) } .layers .tree-14.fade-up.is-visible { -webkit-transform: translate(-37.04246em); -moz-transform: translate(-37.04246em); -ms-transform: translate(-37.04246em); -o-transform: translate(-37.04246em); transform: translate(-37.04246em) } } .layers .tree-14-shadow { opacity: 0 } .layers .tree-15-shadow { position: absolute; left: 50%; top: 610px; z-index: 10; width: 125.715px; height: 103.037px; -webkit-transform: translateX(-392px); -moz-transform: translateX(-392px); -ms-transform: translateX(-392px); -o-transform: translateX(-392px); transform: translateX(-392px); background: url(../images/tree-13-shadow.png) 0 0/contain no-repeat } .layers .tree-15-shadow.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .tree-15-shadow.fade-in.is-visible { opacity: 1 } .layers .tree-15-shadow.fade-up { opacity: 0; -webkit-transform: translate(-392px, 60px); -moz-transform: translate(-392px, 60px); -ms-transform: translate(-392px, 60px); -o-transform: translate(-392px, 60px); transform: translate(-392px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .tree-15-shadow.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-392px); -moz-transform: translate(-392px); -ms-transform: translate(-392px); -o-transform: translate(-392px); transform: translate(-392px) } @media (max-width: 1366px) { .layers .tree-15-shadow { top: 44.65593vw; width: 9.20315vw; height: 7.54297vw; font-size: 1vw; -webkit-transform: translateX(-28.69693em); -moz-transform: translateX(-28.69693em); -ms-transform: translateX(-28.69693em); -o-transform: translateX(-28.69693em); transform: translateX(-28.69693em) } .layers .tree-15-shadow.fade-up { -webkit-transform: translate(-28.69693em, 60px); -moz-transform: translate(-28.69693em, 60px); -ms-transform: translate(-28.69693em, 60px); -o-transform: translate(-28.69693em, 60px); transform: translate(-28.69693em, 60px) } .layers .tree-15-shadow.fade-up.is-visible { -webkit-transform: translate(-28.69693em); -moz-transform: translate(-28.69693em); -ms-transform: translate(-28.69693em); -o-transform: translate(-28.69693em); transform: translate(-28.69693em) } } .layers .tree-15 { position: absolute; left: 50%; top: 610px; z-index: 10; width: 125.715px; height: 103.037px; -webkit-transform: translateX(-392px); -moz-transform: translateX(-392px); -ms-transform: translateX(-392px); -o-transform: translateX(-392px); transform: translateX(-392px); background: url(../images/tree-13.png) 0 0/contain no-repeat; opacity: 0 } .layers .tree-15.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .tree-15.fade-in.is-visible { opacity: 1 } .layers .tree-15.fade-up { opacity: 0; -webkit-transform: translate(-392px, 60px); -moz-transform: translate(-392px, 60px); -ms-transform: translate(-392px, 60px); -o-transform: translate(-392px, 60px); transform: translate(-392px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .tree-15.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-392px); -moz-transform: translate(-392px); -ms-transform: translate(-392px); -o-transform: translate(-392px); transform: translate(-392px) } @media (max-width: 1366px) { .layers .tree-15 { top: 44.65593vw; width: 9.20315vw; height: 7.54297vw; font-size: 1vw; -webkit-transform: translateX(-28.69693em); -moz-transform: translateX(-28.69693em); -ms-transform: translateX(-28.69693em); -o-transform: translateX(-28.69693em); transform: translateX(-28.69693em) } .layers .tree-15.fade-up { -webkit-transform: translate(-28.69693em, 60px); -moz-transform: translate(-28.69693em, 60px); -ms-transform: translate(-28.69693em, 60px); -o-transform: translate(-28.69693em, 60px); transform: translate(-28.69693em, 60px) } .layers .tree-15.fade-up.is-visible { -webkit-transform: translate(-28.69693em); -moz-transform: translate(-28.69693em); -ms-transform: translate(-28.69693em); -o-transform: translate(-28.69693em); transform: translate(-28.69693em) } } .layers .tree-15-shadow { opacity: 0 } .layers .tree-16-shadow { position: absolute; left: 50%; top: 605px; z-index: 10; width: 181.56px; height: 150.41px; -webkit-transform: translateX(329px); -moz-transform: translateX(329px); -ms-transform: translateX(329px); -o-transform: translateX(329px); transform: translateX(329px); background: url(../images/tree-12-shadow.png) 0 0/contain no-repeat } .layers .tree-16-shadow.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .tree-16-shadow.fade-in.is-visible { opacity: 1 } .layers .tree-16-shadow.fade-up { opacity: 0; -webkit-transform: translate(329px, 60px); -moz-transform: translate(329px, 60px); -ms-transform: translate(329px, 60px); -o-transform: translate(329px, 60px); transform: translate(329px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .tree-16-shadow.fade-up.is-visible { opacity: 1; -webkit-transform: translate(329px); -moz-transform: translate(329px); -ms-transform: translate(329px); -o-transform: translate(329px); transform: translate(329px) } @media (max-width: 1366px) { .layers .tree-16-shadow { top: 44.2899vw; width: 13.29136vw; height: 11.01098vw; font-size: 1vw; -webkit-transform: translateX(24.08492em); -moz-transform: translateX(24.08492em); -ms-transform: translateX(24.08492em); -o-transform: translateX(24.08492em); transform: translateX(24.08492em) } .layers .tree-16-shadow.fade-up { -webkit-transform: translate(24.08492em, 60px); -moz-transform: translate(24.08492em, 60px); -ms-transform: translate(24.08492em, 60px); -o-transform: translate(24.08492em, 60px); transform: translate(24.08492em, 60px) } .layers .tree-16-shadow.fade-up.is-visible { -webkit-transform: translate(24.08492em); -moz-transform: translate(24.08492em); -ms-transform: translate(24.08492em); -o-transform: translate(24.08492em); transform: translate(24.08492em) } } .layers .tree-16 { position: absolute; left: 50%; top: 605px; z-index: 10; width: 181.56px; height: 150.41px; -webkit-transform: translateX(329px); -moz-transform: translateX(329px); -ms-transform: translateX(329px); -o-transform: translateX(329px); transform: translateX(329px); background: url(../images/tree-12.png) 0 0/contain no-repeat; opacity: 0 } .layers .tree-16.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .tree-16.fade-in.is-visible { opacity: 1 } .layers .tree-16.fade-up { opacity: 0; -webkit-transform: translate(329px, 60px); -moz-transform: translate(329px, 60px); -ms-transform: translate(329px, 60px); -o-transform: translate(329px, 60px); transform: translate(329px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .tree-16.fade-up.is-visible { opacity: 1; -webkit-transform: translate(329px); -moz-transform: translate(329px); -ms-transform: translate(329px); -o-transform: translate(329px); transform: translate(329px) } @media (max-width: 1366px) { .layers .tree-16 { top: 44.2899vw; width: 13.29136vw; height: 11.01098vw; font-size: 1vw; -webkit-transform: translateX(24.08492em); -moz-transform: translateX(24.08492em); -ms-transform: translateX(24.08492em); -o-transform: translateX(24.08492em); transform: translateX(24.08492em) } .layers .tree-16.fade-up { -webkit-transform: translate(24.08492em, 60px); -moz-transform: translate(24.08492em, 60px); -ms-transform: translate(24.08492em, 60px); -o-transform: translate(24.08492em, 60px); transform: translate(24.08492em, 60px) } .layers .tree-16.fade-up.is-visible { -webkit-transform: translate(24.08492em); -moz-transform: translate(24.08492em); -ms-transform: translate(24.08492em); -o-transform: translate(24.08492em); transform: translate(24.08492em) } } .layers .tree-16-shadow { opacity: 0 } .layers .tree-17-shadow { position: absolute; left: 50%; top: 658px; z-index: 10; width: 183.86px; height: 162.4px; -webkit-transform: translateX(228px); -moz-transform: translateX(228px); -ms-transform: translateX(228px); -o-transform: translateX(228px); transform: translateX(228px); background: url(../images/tree-14-shadow.png) 0 0/contain no-repeat } .layers .tree-17-shadow.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .tree-17-shadow.fade-in.is-visible { opacity: 1 } .layers .tree-17-shadow.fade-up { opacity: 0; -webkit-transform: translate(228px, 60px); -moz-transform: translate(228px, 60px); -ms-transform: translate(228px, 60px); -o-transform: translate(228px, 60px); transform: translate(228px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .tree-17-shadow.fade-up.is-visible { opacity: 1; -webkit-transform: translate(228px); -moz-transform: translate(228px); -ms-transform: translate(228px); -o-transform: translate(228px); transform: translate(228px) } @media (max-width: 1366px) { .layers .tree-17-shadow { top: 48.16984vw; width: 13.45974vw; height: 11.88873vw; font-size: 1vw; -webkit-transform: translateX(16.69107em); -moz-transform: translateX(16.69107em); -ms-transform: translateX(16.69107em); -o-transform: translateX(16.69107em); transform: translateX(16.69107em) } .layers .tree-17-shadow.fade-up { -webkit-transform: translate(16.69107em, 60px); -moz-transform: translate(16.69107em, 60px); -ms-transform: translate(16.69107em, 60px); -o-transform: translate(16.69107em, 60px); transform: translate(16.69107em, 60px) } .layers .tree-17-shadow.fade-up.is-visible { -webkit-transform: translate(16.69107em); -moz-transform: translate(16.69107em); -ms-transform: translate(16.69107em); -o-transform: translate(16.69107em); transform: translate(16.69107em) } } .layers .tree-17 { position: absolute; left: 50%; top: 658px; z-index: 10; width: 183.86px; height: 162.4px; -webkit-transform: translateX(228px); -moz-transform: translateX(228px); -ms-transform: translateX(228px); -o-transform: translateX(228px); transform: translateX(228px); background: url(../images/tree-14.png) 0 0/contain no-repeat; opacity: 0 } .layers .tree-17.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .tree-17.fade-in.is-visible { opacity: 1 } .layers .tree-17.fade-up { opacity: 0; -webkit-transform: translate(228px, 60px); -moz-transform: translate(228px, 60px); -ms-transform: translate(228px, 60px); -o-transform: translate(228px, 60px); transform: translate(228px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .tree-17.fade-up.is-visible { opacity: 1; -webkit-transform: translate(228px); -moz-transform: translate(228px); -ms-transform: translate(228px); -o-transform: translate(228px); transform: translate(228px) } @media (max-width: 1366px) { .layers .tree-17 { top: 48.16984vw; width: 13.45974vw; height: 11.88873vw; font-size: 1vw; -webkit-transform: translateX(16.69107em); -moz-transform: translateX(16.69107em); -ms-transform: translateX(16.69107em); -o-transform: translateX(16.69107em); transform: translateX(16.69107em) } .layers .tree-17.fade-up { -webkit-transform: translate(16.69107em, 60px); -moz-transform: translate(16.69107em, 60px); -ms-transform: translate(16.69107em, 60px); -o-transform: translate(16.69107em, 60px); transform: translate(16.69107em, 60px) } .layers .tree-17.fade-up.is-visible { -webkit-transform: translate(16.69107em); -moz-transform: translate(16.69107em); -ms-transform: translate(16.69107em); -o-transform: translate(16.69107em); transform: translate(16.69107em) } } .layers .tree-17-shadow { opacity: 0 } .layers .tree-18-shadow { position: absolute; left: 50%; top: 657px; z-index: 10; width: 206.78px; height: 175.91px; -webkit-transform: translateX(175px); -moz-transform: translateX(175px); -ms-transform: translateX(175px); -o-transform: translateX(175px); transform: translateX(175px); background: url(../images/tree-18-shadow.png) 0 0/contain no-repeat } .layers .tree-18-shadow.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .tree-18-shadow.fade-in.is-visible { opacity: 1 } .layers .tree-18-shadow.fade-up { opacity: 0; -webkit-transform: translate(175px, 60px); -moz-transform: translate(175px, 60px); -ms-transform: translate(175px, 60px); -o-transform: translate(175px, 60px); transform: translate(175px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .tree-18-shadow.fade-up.is-visible { opacity: 1; -webkit-transform: translate(175px); -moz-transform: translate(175px); -ms-transform: translate(175px); -o-transform: translate(175px); transform: translate(175px) } @media (max-width: 1366px) { .layers .tree-18-shadow { top: 48.09663vw; width: 15.13763vw; height: 12.87775vw; font-size: 1vw; -webkit-transform: translateX(12.81113em); -moz-transform: translateX(12.81113em); -ms-transform: translateX(12.81113em); -o-transform: translateX(12.81113em); transform: translateX(12.81113em) } .layers .tree-18-shadow.fade-up { -webkit-transform: translate(12.81113em, 60px); -moz-transform: translate(12.81113em, 60px); -ms-transform: translate(12.81113em, 60px); -o-transform: translate(12.81113em, 60px); transform: translate(12.81113em, 60px) } .layers .tree-18-shadow.fade-up.is-visible { -webkit-transform: translate(12.81113em); -moz-transform: translate(12.81113em); -ms-transform: translate(12.81113em); -o-transform: translate(12.81113em); transform: translate(12.81113em) } } .layers .tree-18 { position: absolute; left: 50%; top: 657px; z-index: 10; width: 206.78px; height: 175.91px; -webkit-transform: translateX(175px); -moz-transform: translateX(175px); -ms-transform: translateX(175px); -o-transform: translateX(175px); transform: translateX(175px); background: url(../images/tree-18.png) 0 0/contain no-repeat; opacity: 0 } .layers .tree-18.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .tree-18.fade-in.is-visible { opacity: 1 } .layers .tree-18.fade-up { opacity: 0; -webkit-transform: translate(175px, 60px); -moz-transform: translate(175px, 60px); -ms-transform: translate(175px, 60px); -o-transform: translate(175px, 60px); transform: translate(175px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .tree-18.fade-up.is-visible { opacity: 1; -webkit-transform: translate(175px); -moz-transform: translate(175px); -ms-transform: translate(175px); -o-transform: translate(175px); transform: translate(175px) } @media (max-width: 1366px) { .layers .tree-18 { top: 48.09663vw; width: 15.13763vw; height: 12.87775vw; font-size: 1vw; -webkit-transform: translateX(12.81113em); -moz-transform: translateX(12.81113em); -ms-transform: translateX(12.81113em); -o-transform: translateX(12.81113em); transform: translateX(12.81113em) } .layers .tree-18.fade-up { -webkit-transform: translate(12.81113em, 60px); -moz-transform: translate(12.81113em, 60px); -ms-transform: translate(12.81113em, 60px); -o-transform: translate(12.81113em, 60px); transform: translate(12.81113em, 60px) } .layers .tree-18.fade-up.is-visible { -webkit-transform: translate(12.81113em); -moz-transform: translate(12.81113em); -ms-transform: translate(12.81113em); -o-transform: translate(12.81113em); transform: translate(12.81113em) } } .layers .tree-18-shadow { opacity: 0 } .layers .tree-19-shadow { position: absolute; left: 50%; top: 721px; z-index: 10; width: 161.67px; height: 142.8px; -webkit-transform: translateX(134px); -moz-transform: translateX(134px); -ms-transform: translateX(134px); -o-transform: translateX(134px); transform: translateX(134px); background: url(../images/tree-14-shadow.png) 0 0/contain no-repeat } .layers .tree-19-shadow.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .tree-19-shadow.fade-in.is-visible { opacity: 1 } .layers .tree-19-shadow.fade-up { opacity: 0; -webkit-transform: translate(134px, 60px); -moz-transform: translate(134px, 60px); -ms-transform: translate(134px, 60px); -o-transform: translate(134px, 60px); transform: translate(134px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .tree-19-shadow.fade-up.is-visible { opacity: 1; -webkit-transform: translate(134px); -moz-transform: translate(134px); -ms-transform: translate(134px); -o-transform: translate(134px); transform: translate(134px) } @media (max-width: 1366px) { .layers .tree-19-shadow { top: 52.78184vw; width: 11.83529vw; height: 10.45388vw; font-size: 1vw; -webkit-transform: translateX(9.80966em); -moz-transform: translateX(9.80966em); -ms-transform: translateX(9.80966em); -o-transform: translateX(9.80966em); transform: translateX(9.80966em) } .layers .tree-19-shadow.fade-up { -webkit-transform: translate(9.80966em, 60px); -moz-transform: translate(9.80966em, 60px); -ms-transform: translate(9.80966em, 60px); -o-transform: translate(9.80966em, 60px); transform: translate(9.80966em, 60px) } .layers .tree-19-shadow.fade-up.is-visible { -webkit-transform: translate(9.80966em); -moz-transform: translate(9.80966em); -ms-transform: translate(9.80966em); -o-transform: translate(9.80966em); transform: translate(9.80966em) } } .layers .tree-19 { position: absolute; left: 50%; top: 721px; z-index: 10; width: 161.67px; height: 142.8px; -webkit-transform: translateX(134px); -moz-transform: translateX(134px); -ms-transform: translateX(134px); -o-transform: translateX(134px); transform: translateX(134px); background: url(../images/tree-14.png) 0 0/contain no-repeat; opacity: 0 } .layers .tree-19.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .tree-19.fade-in.is-visible { opacity: 1 } .layers .tree-19.fade-up { opacity: 0; -webkit-transform: translate(134px, 60px); -moz-transform: translate(134px, 60px); -ms-transform: translate(134px, 60px); -o-transform: translate(134px, 60px); transform: translate(134px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .tree-19.fade-up.is-visible { opacity: 1; -webkit-transform: translate(134px); -moz-transform: translate(134px); -ms-transform: translate(134px); -o-transform: translate(134px); transform: translate(134px) } @media (max-width: 1366px) { .layers .tree-19 { top: 52.78184vw; width: 11.83529vw; height: 10.45388vw; font-size: 1vw; -webkit-transform: translateX(9.80966em); -moz-transform: translateX(9.80966em); -ms-transform: translateX(9.80966em); -o-transform: translateX(9.80966em); transform: translateX(9.80966em) } .layers .tree-19.fade-up { -webkit-transform: translate(9.80966em, 60px); -moz-transform: translate(9.80966em, 60px); -ms-transform: translate(9.80966em, 60px); -o-transform: translate(9.80966em, 60px); transform: translate(9.80966em, 60px) } .layers .tree-19.fade-up.is-visible { -webkit-transform: translate(9.80966em); -moz-transform: translate(9.80966em); -ms-transform: translate(9.80966em); -o-transform: translate(9.80966em); transform: translate(9.80966em) } } .layers .tree-19-shadow { opacity: 0 } .layers .tree-20-shadow { position: absolute; left: 50%; top: 1064px; z-index: 10; width: 199.41px; height: 137.19px; -webkit-transform: translateX(-88px); -moz-transform: translateX(-88px); -ms-transform: translateX(-88px); -o-transform: translateX(-88px); transform: translateX(-88px); background: url(../images/tree-1-shadow.png) 0 0/contain no-repeat } .layers .tree-20-shadow.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .tree-20-shadow.fade-in.is-visible { opacity: 1 } .layers .tree-20-shadow.fade-up { opacity: 0; -webkit-transform: translate(-88px, 60px); -moz-transform: translate(-88px, 60px); -ms-transform: translate(-88px, 60px); -o-transform: translate(-88px, 60px); transform: translate(-88px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .tree-20-shadow.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-88px); -moz-transform: translate(-88px); -ms-transform: translate(-88px); -o-transform: translate(-88px); transform: translate(-88px) } @media (max-width: 1366px) { .layers .tree-20-shadow { top: 77.89165vw; width: 14.5981vw; height: 10.04319vw; font-size: 1vw; -webkit-transform: translateX(-6.44217em); -moz-transform: translateX(-6.44217em); -ms-transform: translateX(-6.44217em); -o-transform: translateX(-6.44217em); transform: translateX(-6.44217em) } .layers .tree-20-shadow.fade-up { -webkit-transform: translate(-6.44217em, 60px); -moz-transform: translate(-6.44217em, 60px); -ms-transform: translate(-6.44217em, 60px); -o-transform: translate(-6.44217em, 60px); transform: translate(-6.44217em, 60px) } .layers .tree-20-shadow.fade-up.is-visible { -webkit-transform: translate(-6.44217em); -moz-transform: translate(-6.44217em); -ms-transform: translate(-6.44217em); -o-transform: translate(-6.44217em); transform: translate(-6.44217em) } } .layers .tree-20 { position: absolute; left: 50%; top: 1064px; z-index: 10; width: 199.41px; height: 137.19px; -webkit-transform: translateX(-88px); -moz-transform: translateX(-88px); -ms-transform: translateX(-88px); -o-transform: translateX(-88px); transform: translateX(-88px); background: url(../images/tree-1.png) 0 0/contain no-repeat } .layers .tree-20.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .tree-20.fade-in.is-visible { opacity: 1 } .layers .tree-20.fade-up { opacity: 0; -webkit-transform: translate(-88px, 60px); -moz-transform: translate(-88px, 60px); -ms-transform: translate(-88px, 60px); -o-transform: translate(-88px, 60px); transform: translate(-88px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .tree-20.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-88px); -moz-transform: translate(-88px); -ms-transform: translate(-88px); -o-transform: translate(-88px); transform: translate(-88px) } @media (max-width: 1366px) { .layers .tree-20 { top: 77.89165vw; width: 14.5981vw; height: 10.04319vw; font-size: 1vw; -webkit-transform: translateX(-6.44217em); -moz-transform: translateX(-6.44217em); -ms-transform: translateX(-6.44217em); -o-transform: translateX(-6.44217em); transform: translateX(-6.44217em) } .layers .tree-20.fade-up { -webkit-transform: translate(-6.44217em, 60px); -moz-transform: translate(-6.44217em, 60px); -ms-transform: translate(-6.44217em, 60px); -o-transform: translate(-6.44217em, 60px); transform: translate(-6.44217em, 60px) } .layers .tree-20.fade-up.is-visible { -webkit-transform: translate(-6.44217em); -moz-transform: translate(-6.44217em); -ms-transform: translate(-6.44217em); -o-transform: translate(-6.44217em); transform: translate(-6.44217em) } } .layers .tree-21-shadow { position: absolute; left: 50%; top: 1104px; z-index: 10; width: 211.12px; height: 121.16px; -webkit-transform: translateX(-26px); -moz-transform: translateX(-26px); -ms-transform: translateX(-26px); -o-transform: translateX(-26px); transform: translateX(-26px); background: url(../images/tree-2-shadow.png) 0 0/contain no-repeat } .layers .tree-21-shadow.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .tree-21-shadow.fade-in.is-visible { opacity: 1 } .layers .tree-21-shadow.fade-up { opacity: 0; -webkit-transform: translate(-26px, 60px); -moz-transform: translate(-26px, 60px); -ms-transform: translate(-26px, 60px); -o-transform: translate(-26px, 60px); transform: translate(-26px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .tree-21-shadow.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-26px); -moz-transform: translate(-26px); -ms-transform: translate(-26px); -o-transform: translate(-26px); transform: translate(-26px) } @media (max-width: 1366px) { .layers .tree-21-shadow { top: 80.81991vw; width: 15.45534vw; height: 8.86969vw; font-size: 1vw; -webkit-transform: translateX(-1.90337em); -moz-transform: translateX(-1.90337em); -ms-transform: translateX(-1.90337em); -o-transform: translateX(-1.90337em); transform: translateX(-1.90337em) } .layers .tree-21-shadow.fade-up { -webkit-transform: translate(-1.90337em, 60px); -moz-transform: translate(-1.90337em, 60px); -ms-transform: translate(-1.90337em, 60px); -o-transform: translate(-1.90337em, 60px); transform: translate(-1.90337em, 60px) } .layers .tree-21-shadow.fade-up.is-visible { -webkit-transform: translate(-1.90337em); -moz-transform: translate(-1.90337em); -ms-transform: translate(-1.90337em); -o-transform: translate(-1.90337em); transform: translate(-1.90337em) } } .layers .tree-21 { position: absolute; left: 50%; top: 1104px; z-index: 10; width: 211.12px; height: 121.16px; -webkit-transform: translateX(-26px); -moz-transform: translateX(-26px); -ms-transform: translateX(-26px); -o-transform: translateX(-26px); transform: translateX(-26px); background: url(../images/tree-2.png) 0 0/contain no-repeat } .layers .tree-21.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .tree-21.fade-in.is-visible { opacity: 1 } .layers .tree-21.fade-up { opacity: 0; -webkit-transform: translate(-26px, 60px); -moz-transform: translate(-26px, 60px); -ms-transform: translate(-26px, 60px); -o-transform: translate(-26px, 60px); transform: translate(-26px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .tree-21.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-26px); -moz-transform: translate(-26px); -ms-transform: translate(-26px); -o-transform: translate(-26px); transform: translate(-26px) } @media (max-width: 1366px) { .layers .tree-21 { top: 80.81991vw; width: 15.45534vw; height: 8.86969vw; font-size: 1vw; -webkit-transform: translateX(-1.90337em); -moz-transform: translateX(-1.90337em); -ms-transform: translateX(-1.90337em); -o-transform: translateX(-1.90337em); transform: translateX(-1.90337em) } .layers .tree-21.fade-up { -webkit-transform: translate(-1.90337em, 60px); -moz-transform: translate(-1.90337em, 60px); -ms-transform: translate(-1.90337em, 60px); -o-transform: translate(-1.90337em, 60px); transform: translate(-1.90337em, 60px) } .layers .tree-21.fade-up.is-visible { -webkit-transform: translate(-1.90337em); -moz-transform: translate(-1.90337em); -ms-transform: translate(-1.90337em); -o-transform: translate(-1.90337em); transform: translate(-1.90337em) } } .layers .tree-22-shadow { position: absolute; left: 50%; top: 1161px; z-index: 10; width: 175.44px; height: 122.4px; -webkit-transform: translateX(-120px); -moz-transform: translateX(-120px); -ms-transform: translateX(-120px); -o-transform: translateX(-120px); transform: translateX(-120px); background: url(../images/tree-3-shadow.png) 0 0/contain no-repeat } .layers .tree-22-shadow.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .tree-22-shadow.fade-in.is-visible { opacity: 1 } .layers .tree-22-shadow.fade-up { opacity: 0; -webkit-transform: translate(-120px, 60px); -moz-transform: translate(-120px, 60px); -ms-transform: translate(-120px, 60px); -o-transform: translate(-120px, 60px); transform: translate(-120px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .tree-22-shadow.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-120px); -moz-transform: translate(-120px); -ms-transform: translate(-120px); -o-transform: translate(-120px); transform: translate(-120px) } @media (max-width: 1366px) { .layers .tree-22-shadow { top: 84.99268vw; width: 12.84334vw; height: 8.96047vw; font-size: 1vw; -webkit-transform: translateX(-8.78477em); -moz-transform: translateX(-8.78477em); -ms-transform: translateX(-8.78477em); -o-transform: translateX(-8.78477em); transform: translateX(-8.78477em) } .layers .tree-22-shadow.fade-up { -webkit-transform: translate(-8.78477em, 60px); -moz-transform: translate(-8.78477em, 60px); -ms-transform: translate(-8.78477em, 60px); -o-transform: translate(-8.78477em, 60px); transform: translate(-8.78477em, 60px) } .layers .tree-22-shadow.fade-up.is-visible { -webkit-transform: translate(-8.78477em); -moz-transform: translate(-8.78477em); -ms-transform: translate(-8.78477em); -o-transform: translate(-8.78477em); transform: translate(-8.78477em) } } .layers .tree-22 { position: absolute; left: 50%; top: 1161px; z-index: 10; width: 175.44px; height: 122.4px; -webkit-transform: translateX(-120px); -moz-transform: translateX(-120px); -ms-transform: translateX(-120px); -o-transform: translateX(-120px); transform: translateX(-120px); background: url(../images/tree-3.png) 0 0/contain no-repeat } .layers .tree-22.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .tree-22.fade-in.is-visible { opacity: 1 } .layers .tree-22.fade-up { opacity: 0; -webkit-transform: translate(-120px, 60px); -moz-transform: translate(-120px, 60px); -ms-transform: translate(-120px, 60px); -o-transform: translate(-120px, 60px); transform: translate(-120px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .tree-22.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-120px); -moz-transform: translate(-120px); -ms-transform: translate(-120px); -o-transform: translate(-120px); transform: translate(-120px) } @media (max-width: 1366px) { .layers .tree-22 { top: 84.99268vw; width: 12.84334vw; height: 8.96047vw; font-size: 1vw; -webkit-transform: translateX(-8.78477em); -moz-transform: translateX(-8.78477em); -ms-transform: translateX(-8.78477em); -o-transform: translateX(-8.78477em); transform: translateX(-8.78477em) } .layers .tree-22.fade-up { -webkit-transform: translate(-8.78477em, 60px); -moz-transform: translate(-8.78477em, 60px); -ms-transform: translate(-8.78477em, 60px); -o-transform: translate(-8.78477em, 60px); transform: translate(-8.78477em, 60px) } .layers .tree-22.fade-up.is-visible { -webkit-transform: translate(-8.78477em); -moz-transform: translate(-8.78477em); -ms-transform: translate(-8.78477em); -o-transform: translate(-8.78477em); transform: translate(-8.78477em) } } .layers .tree-23-shadow { position: absolute; left: 50%; top: 3182px; z-index: 10; width: 161.67px; height: 142.8px; -webkit-transform: translateX(-299px); -moz-transform: translateX(-299px); -ms-transform: translateX(-299px); -o-transform: translateX(-299px); transform: translateX(-299px); background: url(../images/tree-14-shadow.png) 0 0/contain no-repeat } .layers .tree-23-shadow.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .tree-23-shadow.fade-in.is-visible { opacity: 1 } .layers .tree-23-shadow.fade-up { opacity: 0; -webkit-transform: translate(-299px, 60px); -moz-transform: translate(-299px, 60px); -ms-transform: translate(-299px, 60px); -o-transform: translate(-299px, 60px); transform: translate(-299px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .tree-23-shadow.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-299px); -moz-transform: translate(-299px); -ms-transform: translate(-299px); -o-transform: translate(-299px); transform: translate(-299px) } @media (max-width: 1366px) { .layers .tree-23-shadow { top: 232.9429vw; width: 11.83529vw; height: 10.45388vw; font-size: 1vw; -webkit-transform: translateX(-21.88873em); -moz-transform: translateX(-21.88873em); -ms-transform: translateX(-21.88873em); -o-transform: translateX(-21.88873em); transform: translateX(-21.88873em) } .layers .tree-23-shadow.fade-up { -webkit-transform: translate(-21.88873em, 60px); -moz-transform: translate(-21.88873em, 60px); -ms-transform: translate(-21.88873em, 60px); -o-transform: translate(-21.88873em, 60px); transform: translate(-21.88873em, 60px) } .layers .tree-23-shadow.fade-up.is-visible { -webkit-transform: translate(-21.88873em); -moz-transform: translate(-21.88873em); -ms-transform: translate(-21.88873em); -o-transform: translate(-21.88873em); transform: translate(-21.88873em) } } .layers .tree-23 { position: absolute; left: 50%; top: 3182px; z-index: 10; width: 161.67px; height: 142.8px; -webkit-transform: translateX(-299px); -moz-transform: translateX(-299px); -ms-transform: translateX(-299px); -o-transform: translateX(-299px); transform: translateX(-299px); background: url(../images/tree-14.png) 0 0/contain no-repeat } .layers .tree-23.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .tree-23.fade-in.is-visible { opacity: 1 } .layers .tree-23.fade-up { opacity: 0; -webkit-transform: translate(-299px, 60px); -moz-transform: translate(-299px, 60px); -ms-transform: translate(-299px, 60px); -o-transform: translate(-299px, 60px); transform: translate(-299px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .tree-23.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-299px); -moz-transform: translate(-299px); -ms-transform: translate(-299px); -o-transform: translate(-299px); transform: translate(-299px) } @media (max-width: 1366px) { .layers .tree-23 { top: 232.9429vw; width: 11.83529vw; height: 10.45388vw; font-size: 1vw; -webkit-transform: translateX(-21.88873em); -moz-transform: translateX(-21.88873em); -ms-transform: translateX(-21.88873em); -o-transform: translateX(-21.88873em); transform: translateX(-21.88873em) } .layers .tree-23.fade-up { -webkit-transform: translate(-21.88873em, 60px); -moz-transform: translate(-21.88873em, 60px); -ms-transform: translate(-21.88873em, 60px); -o-transform: translate(-21.88873em, 60px); transform: translate(-21.88873em, 60px) } .layers .tree-23.fade-up.is-visible { -webkit-transform: translate(-21.88873em); -moz-transform: translate(-21.88873em); -ms-transform: translate(-21.88873em); -o-transform: translate(-21.88873em); transform: translate(-21.88873em) } } .layers .tree-24-shadow { position: absolute; left: 50%; top: 3177px; z-index: 10; width: 181.56px; height: 150.41px; -webkit-transform: translateX(-345px); -moz-transform: translateX(-345px); -ms-transform: translateX(-345px); -o-transform: translateX(-345px); transform: translateX(-345px); background: url(../images/tree-12-shadow.png) 0 0/contain no-repeat } .layers .tree-24-shadow.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .tree-24-shadow.fade-in.is-visible { opacity: 1 } .layers .tree-24-shadow.fade-up { opacity: 0; -webkit-transform: translate(-345px, 60px); -moz-transform: translate(-345px, 60px); -ms-transform: translate(-345px, 60px); -o-transform: translate(-345px, 60px); transform: translate(-345px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .tree-24-shadow.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-345px); -moz-transform: translate(-345px); -ms-transform: translate(-345px); -o-transform: translate(-345px); transform: translate(-345px) } @media (max-width: 1366px) { .layers .tree-24-shadow { top: 232.57687vw; width: 13.29136vw; height: 11.01098vw; font-size: 1vw; -webkit-transform: translateX(-25.25622em); -moz-transform: translateX(-25.25622em); -ms-transform: translateX(-25.25622em); -o-transform: translateX(-25.25622em); transform: translateX(-25.25622em) } .layers .tree-24-shadow.fade-up { -webkit-transform: translate(-25.25622em, 60px); -moz-transform: translate(-25.25622em, 60px); -ms-transform: translate(-25.25622em, 60px); -o-transform: translate(-25.25622em, 60px); transform: translate(-25.25622em, 60px) } .layers .tree-24-shadow.fade-up.is-visible { -webkit-transform: translate(-25.25622em); -moz-transform: translate(-25.25622em); -ms-transform: translate(-25.25622em); -o-transform: translate(-25.25622em); transform: translate(-25.25622em) } } .layers .tree-24 { position: absolute; left: 50%; top: 3177px; z-index: 10; width: 181.56px; height: 150.41px; -webkit-transform: translateX(-345px); -moz-transform: translateX(-345px); -ms-transform: translateX(-345px); -o-transform: translateX(-345px); transform: translateX(-345px); background: url(../images/tree-12.png) 0 0/contain no-repeat } .layers .tree-24.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .tree-24.fade-in.is-visible { opacity: 1 } .layers .tree-24.fade-up { opacity: 0; -webkit-transform: translate(-345px, 60px); -moz-transform: translate(-345px, 60px); -ms-transform: translate(-345px, 60px); -o-transform: translate(-345px, 60px); transform: translate(-345px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .tree-24.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-345px); -moz-transform: translate(-345px); -ms-transform: translate(-345px); -o-transform: translate(-345px); transform: translate(-345px) } @media (max-width: 1366px) { .layers .tree-24 { top: 232.57687vw; width: 13.29136vw; height: 11.01098vw; font-size: 1vw; -webkit-transform: translateX(-25.25622em); -moz-transform: translateX(-25.25622em); -ms-transform: translateX(-25.25622em); -o-transform: translateX(-25.25622em); transform: translateX(-25.25622em) } .layers .tree-24.fade-up { -webkit-transform: translate(-25.25622em, 60px); -moz-transform: translate(-25.25622em, 60px); -ms-transform: translate(-25.25622em, 60px); -o-transform: translate(-25.25622em, 60px); transform: translate(-25.25622em, 60px) } .layers .tree-24.fade-up.is-visible { -webkit-transform: translate(-25.25622em); -moz-transform: translate(-25.25622em); -ms-transform: translate(-25.25622em); -o-transform: translate(-25.25622em); transform: translate(-25.25622em) } } .layers .tree-25-shadow { position: absolute; left: 50%; top: 3219px; z-index: 10; width: 161.67px; height: 142.8px; -webkit-transform: translateX(-379px); -moz-transform: translateX(-379px); -ms-transform: translateX(-379px); -o-transform: translateX(-379px); transform: translateX(-379px); background: url(../images/tree-14-shadow.png) 0 0/contain no-repeat } .layers .tree-25-shadow.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .tree-25-shadow.fade-in.is-visible { opacity: 1 } .layers .tree-25-shadow.fade-up { opacity: 0; -webkit-transform: translate(-379px, 60px); -moz-transform: translate(-379px, 60px); -ms-transform: translate(-379px, 60px); -o-transform: translate(-379px, 60px); transform: translate(-379px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .tree-25-shadow.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-379px); -moz-transform: translate(-379px); -ms-transform: translate(-379px); -o-transform: translate(-379px); transform: translate(-379px) } @media (max-width: 1366px) { .layers .tree-25-shadow { top: 235.65154vw; width: 11.83529vw; height: 10.45388vw; font-size: 1vw; -webkit-transform: translateX(-27.74524em); -moz-transform: translateX(-27.74524em); -ms-transform: translateX(-27.74524em); -o-transform: translateX(-27.74524em); transform: translateX(-27.74524em) } .layers .tree-25-shadow.fade-up { -webkit-transform: translate(-27.74524em, 60px); -moz-transform: translate(-27.74524em, 60px); -ms-transform: translate(-27.74524em, 60px); -o-transform: translate(-27.74524em, 60px); transform: translate(-27.74524em, 60px) } .layers .tree-25-shadow.fade-up.is-visible { -webkit-transform: translate(-27.74524em); -moz-transform: translate(-27.74524em); -ms-transform: translate(-27.74524em); -o-transform: translate(-27.74524em); transform: translate(-27.74524em) } } .layers .tree-25 { position: absolute; left: 50%; top: 3219px; z-index: 10; width: 161.67px; height: 142.8px; -webkit-transform: translateX(-379px); -moz-transform: translateX(-379px); -ms-transform: translateX(-379px); -o-transform: translateX(-379px); transform: translateX(-379px); background: url(../images/tree-14.png) 0 0/contain no-repeat } .layers .tree-25.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .tree-25.fade-in.is-visible { opacity: 1 } .layers .tree-25.fade-up { opacity: 0; -webkit-transform: translate(-379px, 60px); -moz-transform: translate(-379px, 60px); -ms-transform: translate(-379px, 60px); -o-transform: translate(-379px, 60px); transform: translate(-379px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .tree-25.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-379px); -moz-transform: translate(-379px); -ms-transform: translate(-379px); -o-transform: translate(-379px); transform: translate(-379px) } @media (max-width: 1366px) { .layers .tree-25 { top: 235.65154vw; width: 11.83529vw; height: 10.45388vw; font-size: 1vw; -webkit-transform: translateX(-27.74524em); -moz-transform: translateX(-27.74524em); -ms-transform: translateX(-27.74524em); -o-transform: translateX(-27.74524em); transform: translateX(-27.74524em) } .layers .tree-25.fade-up { -webkit-transform: translate(-27.74524em, 60px); -moz-transform: translate(-27.74524em, 60px); -ms-transform: translate(-27.74524em, 60px); -o-transform: translate(-27.74524em, 60px); transform: translate(-27.74524em, 60px) } .layers .tree-25.fade-up.is-visible { -webkit-transform: translate(-27.74524em); -moz-transform: translate(-27.74524em); -ms-transform: translate(-27.74524em); -o-transform: translate(-27.74524em); transform: translate(-27.74524em) } } .layers .tree-26-shadow { position: absolute; left: 50%; top: 545px; z-index: 10; width: 158.4px; height: 106.15px; -webkit-transform: translateX(-990px); -moz-transform: translateX(-990px); -ms-transform: translateX(-990px); -o-transform: translateX(-990px); transform: translateX(-990px); background: url(../images/tree-5-shadow.png) 0 0/contain no-repeat } .layers .tree-26-shadow.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .tree-26-shadow.fade-in.is-visible { opacity: 1 } .layers .tree-26-shadow.fade-up { opacity: 0; -webkit-transform: translate(-990px, 60px); -moz-transform: translate(-990px, 60px); -ms-transform: translate(-990px, 60px); -o-transform: translate(-990px, 60px); transform: translate(-990px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .tree-26-shadow.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-990px); -moz-transform: translate(-990px); -ms-transform: translate(-990px); -o-transform: translate(-990px); transform: translate(-990px) } @media (max-width: 1366px) { .layers .tree-26-shadow { top: 39.89751vw; width: 11.5959vw; height: 7.77086vw; font-size: 1vw; -webkit-transform: translateX(-72.47438em); -moz-transform: translateX(-72.47438em); -ms-transform: translateX(-72.47438em); -o-transform: translateX(-72.47438em); transform: translateX(-72.47438em) } .layers .tree-26-shadow.fade-up { -webkit-transform: translate(-72.47438em, 60px); -moz-transform: translate(-72.47438em, 60px); -ms-transform: translate(-72.47438em, 60px); -o-transform: translate(-72.47438em, 60px); transform: translate(-72.47438em, 60px) } .layers .tree-26-shadow.fade-up.is-visible { -webkit-transform: translate(-72.47438em); -moz-transform: translate(-72.47438em); -ms-transform: translate(-72.47438em); -o-transform: translate(-72.47438em); transform: translate(-72.47438em) } } .layers .tree-26 { position: absolute; left: 50%; top: 545px; z-index: 10; width: 158.4px; height: 106.15px; -webkit-transform: translateX(-990px); -moz-transform: translateX(-990px); -ms-transform: translateX(-990px); -o-transform: translateX(-990px); transform: translateX(-990px); background: url(../images/tree-5.png) 0 0/contain no-repeat; opacity: 0 } .layers .tree-26.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .tree-26.fade-in.is-visible { opacity: 1 } .layers .tree-26.fade-up { opacity: 0; -webkit-transform: translate(-990px, 60px); -moz-transform: translate(-990px, 60px); -ms-transform: translate(-990px, 60px); -o-transform: translate(-990px, 60px); transform: translate(-990px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .tree-26.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-990px); -moz-transform: translate(-990px); -ms-transform: translate(-990px); -o-transform: translate(-990px); transform: translate(-990px) } @media (max-width: 1366px) { .layers .tree-26 { top: 39.89751vw; width: 11.5959vw; height: 7.77086vw; font-size: 1vw; -webkit-transform: translateX(-72.47438em); -moz-transform: translateX(-72.47438em); -ms-transform: translateX(-72.47438em); -o-transform: translateX(-72.47438em); transform: translateX(-72.47438em) } .layers .tree-26.fade-up { -webkit-transform: translate(-72.47438em, 60px); -moz-transform: translate(-72.47438em, 60px); -ms-transform: translate(-72.47438em, 60px); -o-transform: translate(-72.47438em, 60px); transform: translate(-72.47438em, 60px) } .layers .tree-26.fade-up.is-visible { -webkit-transform: translate(-72.47438em); -moz-transform: translate(-72.47438em); -ms-transform: translate(-72.47438em); -o-transform: translate(-72.47438em); transform: translate(-72.47438em) } } .layers .tree-26-shadow { opacity: 0 } @media (max-width: 1900px) { .layers .tree-26, .layers .tree-26-shadow { display: none } } .layers .tree-27-shadow { position: absolute; left: 50%; top: 555px; z-index: 10; width: 151.2px; height: 103.5px; -webkit-transform: translateX(-920px); -moz-transform: translateX(-920px); -ms-transform: translateX(-920px); -o-transform: translateX(-920px); transform: translateX(-920px); background: url(../images/tree-8-shadow.png) 0 0/contain no-repeat } .layers .tree-27-shadow.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .tree-27-shadow.fade-in.is-visible { opacity: 1 } .layers .tree-27-shadow.fade-up { opacity: 0; -webkit-transform: translate(-920px, 60px); -moz-transform: translate(-920px, 60px); -ms-transform: translate(-920px, 60px); -o-transform: translate(-920px, 60px); transform: translate(-920px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .tree-27-shadow.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-920px); -moz-transform: translate(-920px); -ms-transform: translate(-920px); -o-transform: translate(-920px); transform: translate(-920px) } @media (max-width: 1366px) { .layers .tree-27-shadow { top: 40.62958vw; width: 11.06881vw; height: 7.57687vw; font-size: 1vw; -webkit-transform: translateX(-67.34993em); -moz-transform: translateX(-67.34993em); -ms-transform: translateX(-67.34993em); -o-transform: translateX(-67.34993em); transform: translateX(-67.34993em) } .layers .tree-27-shadow.fade-up { -webkit-transform: translate(-67.34993em, 60px); -moz-transform: translate(-67.34993em, 60px); -ms-transform: translate(-67.34993em, 60px); -o-transform: translate(-67.34993em, 60px); transform: translate(-67.34993em, 60px) } .layers .tree-27-shadow.fade-up.is-visible { -webkit-transform: translate(-67.34993em); -moz-transform: translate(-67.34993em); -ms-transform: translate(-67.34993em); -o-transform: translate(-67.34993em); transform: translate(-67.34993em) } } .layers .tree-27 { position: absolute; left: 50%; top: 555px; z-index: 10; width: 151.2px; height: 103.5px; -webkit-transform: translateX(-920px); -moz-transform: translateX(-920px); -ms-transform: translateX(-920px); -o-transform: translateX(-920px); transform: translateX(-920px); background: url(../images/tree-8.png) 0 0/contain no-repeat; opacity: 0 } .layers .tree-27.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .tree-27.fade-in.is-visible { opacity: 1 } .layers .tree-27.fade-up { opacity: 0; -webkit-transform: translate(-920px, 60px); -moz-transform: translate(-920px, 60px); -ms-transform: translate(-920px, 60px); -o-transform: translate(-920px, 60px); transform: translate(-920px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .tree-27.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-920px); -moz-transform: translate(-920px); -ms-transform: translate(-920px); -o-transform: translate(-920px); transform: translate(-920px) } @media (max-width: 1366px) { .layers .tree-27 { top: 40.62958vw; width: 11.06881vw; height: 7.57687vw; font-size: 1vw; -webkit-transform: translateX(-67.34993em); -moz-transform: translateX(-67.34993em); -ms-transform: translateX(-67.34993em); -o-transform: translateX(-67.34993em); transform: translateX(-67.34993em) } .layers .tree-27.fade-up { -webkit-transform: translate(-67.34993em, 60px); -moz-transform: translate(-67.34993em, 60px); -ms-transform: translate(-67.34993em, 60px); -o-transform: translate(-67.34993em, 60px); transform: translate(-67.34993em, 60px) } .layers .tree-27.fade-up.is-visible { -webkit-transform: translate(-67.34993em); -moz-transform: translate(-67.34993em); -ms-transform: translate(-67.34993em); -o-transform: translate(-67.34993em); transform: translate(-67.34993em) } } .layers .tree-27-shadow { opacity: 0 } @media (max-width: 1900px) { .layers .tree-27, .layers .tree-27-shadow { display: none } } .layers .tree-28-shadow { position: absolute; left: 50%; top: 600px; z-index: 10; width: 152.4px; height: 106.8px; -webkit-transform: translateX(-955px); -moz-transform: translateX(-955px); -ms-transform: translateX(-955px); -o-transform: translateX(-955px); transform: translateX(-955px); background: url(../images/tree-9-shadow.png) 0 0/contain no-repeat } .layers .tree-28-shadow.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .tree-28-shadow.fade-in.is-visible { opacity: 1 } .layers .tree-28-shadow.fade-up { opacity: 0; -webkit-transform: translate(-955px, 60px); -moz-transform: translate(-955px, 60px); -ms-transform: translate(-955px, 60px); -o-transform: translate(-955px, 60px); transform: translate(-955px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .tree-28-shadow.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-955px); -moz-transform: translate(-955px); -ms-transform: translate(-955px); -o-transform: translate(-955px); transform: translate(-955px) } @media (max-width: 1366px) { .layers .tree-28-shadow { top: 43.92387vw; width: 11.15666vw; height: 7.81845vw; font-size: 1vw; -webkit-transform: translateX(-69.91215em); -moz-transform: translateX(-69.91215em); -ms-transform: translateX(-69.91215em); -o-transform: translateX(-69.91215em); transform: translateX(-69.91215em) } .layers .tree-28-shadow.fade-up { -webkit-transform: translate(-69.91215em, 60px); -moz-transform: translate(-69.91215em, 60px); -ms-transform: translate(-69.91215em, 60px); -o-transform: translate(-69.91215em, 60px); transform: translate(-69.91215em, 60px) } .layers .tree-28-shadow.fade-up.is-visible { -webkit-transform: translate(-69.91215em); -moz-transform: translate(-69.91215em); -ms-transform: translate(-69.91215em); -o-transform: translate(-69.91215em); transform: translate(-69.91215em) } } .layers .tree-28 { position: absolute; left: 50%; top: 600px; z-index: 10; width: 152.4px; height: 106.8px; -webkit-transform: translateX(-955px); -moz-transform: translateX(-955px); -ms-transform: translateX(-955px); -o-transform: translateX(-955px); transform: translateX(-955px); background: url(../images/tree-9.png) 0 0/contain no-repeat; opacity: 0 } .layers .tree-28.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .tree-28.fade-in.is-visible { opacity: 1 } .layers .tree-28.fade-up { opacity: 0; -webkit-transform: translate(-955px, 60px); -moz-transform: translate(-955px, 60px); -ms-transform: translate(-955px, 60px); -o-transform: translate(-955px, 60px); transform: translate(-955px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .tree-28.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-955px); -moz-transform: translate(-955px); -ms-transform: translate(-955px); -o-transform: translate(-955px); transform: translate(-955px) } @media (max-width: 1366px) { .layers .tree-28 { top: 43.92387vw; width: 11.15666vw; height: 7.81845vw; font-size: 1vw; -webkit-transform: translateX(-69.91215em); -moz-transform: translateX(-69.91215em); -ms-transform: translateX(-69.91215em); -o-transform: translateX(-69.91215em); transform: translateX(-69.91215em) } .layers .tree-28.fade-up { -webkit-transform: translate(-69.91215em, 60px); -moz-transform: translate(-69.91215em, 60px); -ms-transform: translate(-69.91215em, 60px); -o-transform: translate(-69.91215em, 60px); transform: translate(-69.91215em, 60px) } .layers .tree-28.fade-up.is-visible { -webkit-transform: translate(-69.91215em); -moz-transform: translate(-69.91215em); -ms-transform: translate(-69.91215em); -o-transform: translate(-69.91215em); transform: translate(-69.91215em) } } .layers .tree-28-shadow { opacity: 0 } @media (max-width: 1900px) { .layers .tree-28, .layers .tree-28-shadow { display: none } } .layers .tree-29-shadow { position: absolute; left: 50%; top: 520px; z-index: 10; width: 179.3px; height: 126.5px; -webkit-transform: translateX(600px); -moz-transform: translateX(600px); -ms-transform: translateX(600px); -o-transform: translateX(600px); transform: translateX(600px); background: url(../images/tree-4-shadow.png) 0 0/contain no-repeat } .layers .tree-29-shadow.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .tree-29-shadow.fade-in.is-visible { opacity: 1 } .layers .tree-29-shadow.fade-up { opacity: 0; -webkit-transform: translate(600px, 60px); -moz-transform: translate(600px, 60px); -ms-transform: translate(600px, 60px); -o-transform: translate(600px, 60px); transform: translate(600px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .tree-29-shadow.fade-up.is-visible { opacity: 1; -webkit-transform: translate(600px); -moz-transform: translate(600px); -ms-transform: translate(600px); -o-transform: translate(600px); transform: translate(600px) } @media (max-width: 1366px) { .layers .tree-29-shadow { top: 38.06735vw; width: 13.12592vw; height: 9.26061vw; font-size: 1vw; -webkit-transform: translateX(43.92387em); -moz-transform: translateX(43.92387em); -ms-transform: translateX(43.92387em); -o-transform: translateX(43.92387em); transform: translateX(43.92387em) } .layers .tree-29-shadow.fade-up { -webkit-transform: translate(43.92387em, 60px); -moz-transform: translate(43.92387em, 60px); -ms-transform: translate(43.92387em, 60px); -o-transform: translate(43.92387em, 60px); transform: translate(43.92387em, 60px) } .layers .tree-29-shadow.fade-up.is-visible { -webkit-transform: translate(43.92387em); -moz-transform: translate(43.92387em); -ms-transform: translate(43.92387em); -o-transform: translate(43.92387em); transform: translate(43.92387em) } } .layers .tree-29 { position: absolute; left: 50%; top: 520px; z-index: 10; width: 179.3px; height: 126.5px; -webkit-transform: translateX(600px); -moz-transform: translateX(600px); -ms-transform: translateX(600px); -o-transform: translateX(600px); transform: translateX(600px); background: url(../images/tree-4.png) 0 0/contain no-repeat; opacity: 0 } .layers .tree-29.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .tree-29.fade-in.is-visible { opacity: 1 } .layers .tree-29.fade-up { opacity: 0; -webkit-transform: translate(600px, 60px); -moz-transform: translate(600px, 60px); -ms-transform: translate(600px, 60px); -o-transform: translate(600px, 60px); transform: translate(600px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .tree-29.fade-up.is-visible { opacity: 1; -webkit-transform: translate(600px); -moz-transform: translate(600px); -ms-transform: translate(600px); -o-transform: translate(600px); transform: translate(600px) } @media (max-width: 1366px) { .layers .tree-29 { top: 38.06735vw; width: 13.12592vw; height: 9.26061vw; font-size: 1vw; -webkit-transform: translateX(43.92387em); -moz-transform: translateX(43.92387em); -ms-transform: translateX(43.92387em); -o-transform: translateX(43.92387em); transform: translateX(43.92387em) } .layers .tree-29.fade-up { -webkit-transform: translate(43.92387em, 60px); -moz-transform: translate(43.92387em, 60px); -ms-transform: translate(43.92387em, 60px); -o-transform: translate(43.92387em, 60px); transform: translate(43.92387em, 60px) } .layers .tree-29.fade-up.is-visible { -webkit-transform: translate(43.92387em); -moz-transform: translate(43.92387em); -ms-transform: translate(43.92387em); -o-transform: translate(43.92387em); transform: translate(43.92387em) } } .layers .tree-29-shadow { opacity: 0 } @media (max-width: 1900px) { .layers .tree-29, .layers .tree-29-shadow { display: none } } .layers .tree-30-shadow { position: absolute; left: 50%; top: 590px; z-index: 10; width: 118.8px; height: 81.4px; -webkit-transform: translateX(717px); -moz-transform: translateX(717px); -ms-transform: translateX(717px); -o-transform: translateX(717px); transform: translateX(717px); background: url(../images/tree-6-shadow.png) 0 0/contain no-repeat } .layers .tree-30-shadow.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .tree-30-shadow.fade-in.is-visible { opacity: 1 } .layers .tree-30-shadow.fade-up { opacity: 0; -webkit-transform: translate(717px, 60px); -moz-transform: translate(717px, 60px); -ms-transform: translate(717px, 60px); -o-transform: translate(717px, 60px); transform: translate(717px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .tree-30-shadow.fade-up.is-visible { opacity: 1; -webkit-transform: translate(717px); -moz-transform: translate(717px); -ms-transform: translate(717px); -o-transform: translate(717px); transform: translate(717px) } @media (max-width: 1366px) { .layers .tree-30-shadow { top: 43.1918vw; width: 8.69693vw; height: 5.959vw; font-size: 1vw; -webkit-transform: translateX(52.48902em); -moz-transform: translateX(52.48902em); -ms-transform: translateX(52.48902em); -o-transform: translateX(52.48902em); transform: translateX(52.48902em) } .layers .tree-30-shadow.fade-up { -webkit-transform: translate(52.48902em, 60px); -moz-transform: translate(52.48902em, 60px); -ms-transform: translate(52.48902em, 60px); -o-transform: translate(52.48902em, 60px); transform: translate(52.48902em, 60px) } .layers .tree-30-shadow.fade-up.is-visible { -webkit-transform: translate(52.48902em); -moz-transform: translate(52.48902em); -ms-transform: translate(52.48902em); -o-transform: translate(52.48902em); transform: translate(52.48902em) } } .layers .tree-30 { position: absolute; left: 50%; top: 590px; z-index: 10; width: 118.8px; height: 81.4px; -webkit-transform: translateX(717px); -moz-transform: translateX(717px); -ms-transform: translateX(717px); -o-transform: translateX(717px); transform: translateX(717px); background: url(../images/tree-6.png) 0 0/contain no-repeat; opacity: 0 } .layers .tree-30.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .tree-30.fade-in.is-visible { opacity: 1 } .layers .tree-30.fade-up { opacity: 0; -webkit-transform: translate(717px, 60px); -moz-transform: translate(717px, 60px); -ms-transform: translate(717px, 60px); -o-transform: translate(717px, 60px); transform: translate(717px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .tree-30.fade-up.is-visible { opacity: 1; -webkit-transform: translate(717px); -moz-transform: translate(717px); -ms-transform: translate(717px); -o-transform: translate(717px); transform: translate(717px) } @media (max-width: 1366px) { .layers .tree-30 { top: 43.1918vw; width: 8.69693vw; height: 5.959vw; font-size: 1vw; -webkit-transform: translateX(52.48902em); -moz-transform: translateX(52.48902em); -ms-transform: translateX(52.48902em); -o-transform: translateX(52.48902em); transform: translateX(52.48902em) } .layers .tree-30.fade-up { -webkit-transform: translate(52.48902em, 60px); -moz-transform: translate(52.48902em, 60px); -ms-transform: translate(52.48902em, 60px); -o-transform: translate(52.48902em, 60px); transform: translate(52.48902em, 60px) } .layers .tree-30.fade-up.is-visible { -webkit-transform: translate(52.48902em); -moz-transform: translate(52.48902em); -ms-transform: translate(52.48902em); -o-transform: translate(52.48902em); transform: translate(52.48902em) } } .layers .tree-30-shadow { opacity: 0 } @media (max-width: 1900px) { .layers .tree-30, .layers .tree-30-shadow { display: none } } .layers .tree-31-shadow { position: absolute; left: 50%; top: 615px; z-index: 10; width: 158.4px; height: 106.15px; -webkit-transform: translateX(642px); -moz-transform: translateX(642px); -ms-transform: translateX(642px); -o-transform: translateX(642px); transform: translateX(642px); background: url(../images/tree-5-shadow.png) 0 0/contain no-repeat } .layers .tree-31-shadow.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .tree-31-shadow.fade-in.is-visible { opacity: 1 } .layers .tree-31-shadow.fade-up { opacity: 0; -webkit-transform: translate(642px, 60px); -moz-transform: translate(642px, 60px); -ms-transform: translate(642px, 60px); -o-transform: translate(642px, 60px); transform: translate(642px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .tree-31-shadow.fade-up.is-visible { opacity: 1; -webkit-transform: translate(642px); -moz-transform: translate(642px); -ms-transform: translate(642px); -o-transform: translate(642px); transform: translate(642px) } @media (max-width: 1366px) { .layers .tree-31-shadow { top: 45.02196vw; width: 11.5959vw; height: 7.77086vw; font-size: 1vw; -webkit-transform: translateX(46.99854em); -moz-transform: translateX(46.99854em); -ms-transform: translateX(46.99854em); -o-transform: translateX(46.99854em); transform: translateX(46.99854em) } .layers .tree-31-shadow.fade-up { -webkit-transform: translate(46.99854em, 60px); -moz-transform: translate(46.99854em, 60px); -ms-transform: translate(46.99854em, 60px); -o-transform: translate(46.99854em, 60px); transform: translate(46.99854em, 60px) } .layers .tree-31-shadow.fade-up.is-visible { -webkit-transform: translate(46.99854em); -moz-transform: translate(46.99854em); -ms-transform: translate(46.99854em); -o-transform: translate(46.99854em); transform: translate(46.99854em) } } .layers .tree-31 { position: absolute; left: 50%; top: 615px; z-index: 10; width: 158.4px; height: 106.15px; -webkit-transform: translateX(642px); -moz-transform: translateX(642px); -ms-transform: translateX(642px); -o-transform: translateX(642px); transform: translateX(642px); background: url(../images/tree-5.png) 0 0/contain no-repeat; opacity: 0 } .layers .tree-31.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .tree-31.fade-in.is-visible { opacity: 1 } .layers .tree-31.fade-up { opacity: 0; -webkit-transform: translate(642px, 60px); -moz-transform: translate(642px, 60px); -ms-transform: translate(642px, 60px); -o-transform: translate(642px, 60px); transform: translate(642px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .tree-31.fade-up.is-visible { opacity: 1; -webkit-transform: translate(642px); -moz-transform: translate(642px); -ms-transform: translate(642px); -o-transform: translate(642px); transform: translate(642px) } @media (max-width: 1366px) { .layers .tree-31 { top: 45.02196vw; width: 11.5959vw; height: 7.77086vw; font-size: 1vw; -webkit-transform: translateX(46.99854em); -moz-transform: translateX(46.99854em); -ms-transform: translateX(46.99854em); -o-transform: translateX(46.99854em); transform: translateX(46.99854em) } .layers .tree-31.fade-up { -webkit-transform: translate(46.99854em, 60px); -moz-transform: translate(46.99854em, 60px); -ms-transform: translate(46.99854em, 60px); -o-transform: translate(46.99854em, 60px); transform: translate(46.99854em, 60px) } .layers .tree-31.fade-up.is-visible { -webkit-transform: translate(46.99854em); -moz-transform: translate(46.99854em); -ms-transform: translate(46.99854em); -o-transform: translate(46.99854em); transform: translate(46.99854em) } } .layers .tree-31-shadow { opacity: 0 } @media (max-width: 1900px) { .layers .tree-31, .layers .tree-31-shadow { display: none } } .layers .building-1 { position: absolute; left: 50%; top: 276px; z-index: 10; width: 287.14px; height: 199.92px; -webkit-transform: translateX(165px); -moz-transform: translateX(165px); -ms-transform: translateX(165px); -o-transform: translateX(165px); transform: translateX(165px); background: url(../images/building-1.png) 0 0/contain no-repeat; opacity: 0 } .layers .building-1.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .building-1.fade-in.is-visible { opacity: 1 } .layers .building-1.fade-up { opacity: 0; -webkit-transform: translate(165px, 60px); -moz-transform: translate(165px, 60px); -ms-transform: translate(165px, 60px); -o-transform: translate(165px, 60px); transform: translate(165px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .building-1.fade-up.is-visible { opacity: 1; -webkit-transform: translate(165px); -moz-transform: translate(165px); -ms-transform: translate(165px); -o-transform: translate(165px); transform: translate(165px) } @media (max-width: 1366px) { .layers .building-1 { top: 20.20498vw; width: 21.0205vw; height: 14.63543vw; font-size: 1vw; -webkit-transform: translateX(12.07906em); -moz-transform: translateX(12.07906em); -ms-transform: translateX(12.07906em); -o-transform: translateX(12.07906em); transform: translateX(12.07906em) } .layers .building-1.fade-up { -webkit-transform: translate(12.07906em, 60px); -moz-transform: translate(12.07906em, 60px); -ms-transform: translate(12.07906em, 60px); -o-transform: translate(12.07906em, 60px); transform: translate(12.07906em, 60px) } .layers .building-1.fade-up.is-visible { -webkit-transform: translate(12.07906em); -moz-transform: translate(12.07906em); -ms-transform: translate(12.07906em); -o-transform: translate(12.07906em); transform: translate(12.07906em) } } .layers .building-2 { position: absolute; left: 50%; top: 351px; z-index: 10; width: 190.12px; height: 129.36px; -webkit-transform: translateX(40px); -moz-transform: translateX(40px); -ms-transform: translateX(40px); -o-transform: translateX(40px); transform: translateX(40px); background: url(../images/building-2.png) 0 0/contain no-repeat; opacity: 0 } .layers .building-2.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .building-2.fade-in.is-visible { opacity: 1 } .layers .building-2.fade-up { opacity: 0; -webkit-transform: translate(40px, 60px); -moz-transform: translate(40px, 60px); -ms-transform: translate(40px, 60px); -o-transform: translate(40px, 60px); transform: translate(40px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .building-2.fade-up.is-visible { opacity: 1; -webkit-transform: translate(40px); -moz-transform: translate(40px); -ms-transform: translate(40px); -o-transform: translate(40px); transform: translate(40px) } @media (max-width: 1366px) { .layers .building-2 { top: 25.69546vw; width: 13.91801vw; height: 9.46999vw; font-size: 1vw; -webkit-transform: translateX(2.92826em); -moz-transform: translateX(2.92826em); -ms-transform: translateX(2.92826em); -o-transform: translateX(2.92826em); transform: translateX(2.92826em) } .layers .building-2.fade-up { -webkit-transform: translate(2.92826em, 60px); -moz-transform: translate(2.92826em, 60px); -ms-transform: translate(2.92826em, 60px); -o-transform: translate(2.92826em, 60px); transform: translate(2.92826em, 60px) } .layers .building-2.fade-up.is-visible { -webkit-transform: translate(2.92826em); -moz-transform: translate(2.92826em); -ms-transform: translate(2.92826em); -o-transform: translate(2.92826em); transform: translate(2.92826em) } } .layers .building-3 { position: absolute; left: 50%; top: 381px; z-index: 10; width: 194.04px; height: 131.32px; -webkit-transform: translateX(-48px); -moz-transform: translateX(-48px); -ms-transform: translateX(-48px); -o-transform: translateX(-48px); transform: translateX(-48px); background: url(../images/building-3.png) 0 0/contain no-repeat; opacity: 0 } .layers .building-3.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .building-3.fade-in.is-visible { opacity: 1 } .layers .building-3.fade-up { opacity: 0; -webkit-transform: translate(-48px, 60px); -moz-transform: translate(-48px, 60px); -ms-transform: translate(-48px, 60px); -o-transform: translate(-48px, 60px); transform: translate(-48px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .building-3.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-48px); -moz-transform: translate(-48px); -ms-transform: translate(-48px); -o-transform: translate(-48px); transform: translate(-48px) } @media (max-width: 1366px) { .layers .building-3 { top: 27.89165vw; width: 14.20498vw; height: 9.61347vw; font-size: 1vw; -webkit-transform: translateX(-3.51391em); -moz-transform: translateX(-3.51391em); -ms-transform: translateX(-3.51391em); -o-transform: translateX(-3.51391em); transform: translateX(-3.51391em) } .layers .building-3.fade-up { -webkit-transform: translate(-3.51391em, 60px); -moz-transform: translate(-3.51391em, 60px); -ms-transform: translate(-3.51391em, 60px); -o-transform: translate(-3.51391em, 60px); transform: translate(-3.51391em, 60px) } .layers .building-3.fade-up.is-visible { -webkit-transform: translate(-3.51391em); -moz-transform: translate(-3.51391em); -ms-transform: translate(-3.51391em); -o-transform: translate(-3.51391em); transform: translate(-3.51391em) } } .layers .building-4 { position: absolute; left: 50%; top: 421px; z-index: 10; width: 155.82px; height: 122.99px; -webkit-transform: translateX(-119px); -moz-transform: translateX(-119px); -ms-transform: translateX(-119px); -o-transform: translateX(-119px); transform: translateX(-119px); background: url(../images/building-4.png) 0 0/contain no-repeat; opacity: 0 } .layers .building-4.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .building-4.fade-in.is-visible { opacity: 1 } .layers .building-4.fade-up { opacity: 0; -webkit-transform: translate(-119px, 60px); -moz-transform: translate(-119px, 60px); -ms-transform: translate(-119px, 60px); -o-transform: translate(-119px, 60px); transform: translate(-119px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .building-4.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-119px); -moz-transform: translate(-119px); -ms-transform: translate(-119px); -o-transform: translate(-119px); transform: translate(-119px) } @media (max-width: 1366px) { .layers .building-4 { top: 30.81991vw; width: 11.40703vw; height: 9.00366vw; font-size: 1vw; -webkit-transform: translateX(-8.71157em); -moz-transform: translateX(-8.71157em); -ms-transform: translateX(-8.71157em); -o-transform: translateX(-8.71157em); transform: translateX(-8.71157em) } .layers .building-4.fade-up { -webkit-transform: translate(-8.71157em, 60px); -moz-transform: translate(-8.71157em, 60px); -ms-transform: translate(-8.71157em, 60px); -o-transform: translate(-8.71157em, 60px); transform: translate(-8.71157em, 60px) } .layers .building-4.fade-up.is-visible { -webkit-transform: translate(-8.71157em); -moz-transform: translate(-8.71157em); -ms-transform: translate(-8.71157em); -o-transform: translate(-8.71157em); transform: translate(-8.71157em) } } .layers .building-5 { position: absolute; left: 50%; top: 488px; z-index: 10; width: 323.4px; height: 214.62px; -webkit-transform: translateX(-341px); -moz-transform: translateX(-341px); -ms-transform: translateX(-341px); -o-transform: translateX(-341px); transform: translateX(-341px); background: url(../images/building-5.png) 0 0/contain no-repeat; opacity: 0 } .layers .building-5.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .building-5.fade-in.is-visible { opacity: 1 } .layers .building-5.fade-up { opacity: 0; -webkit-transform: translate(-341px, 60px); -moz-transform: translate(-341px, 60px); -ms-transform: translate(-341px, 60px); -o-transform: translate(-341px, 60px); transform: translate(-341px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .building-5.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-341px); -moz-transform: translate(-341px); -ms-transform: translate(-341px); -o-transform: translate(-341px); transform: translate(-341px) } @media (max-width: 1366px) { .layers .building-5 { top: 35.72474vw; width: 23.67496vw; height: 15.71157vw; font-size: 1vw; -webkit-transform: translateX(-24.9634em); -moz-transform: translateX(-24.9634em); -ms-transform: translateX(-24.9634em); -o-transform: translateX(-24.9634em); transform: translateX(-24.9634em) } .layers .building-5.fade-up { -webkit-transform: translate(-24.9634em, 60px); -moz-transform: translate(-24.9634em, 60px); -ms-transform: translate(-24.9634em, 60px); -o-transform: translate(-24.9634em, 60px); transform: translate(-24.9634em, 60px) } .layers .building-5.fade-up.is-visible { -webkit-transform: translate(-24.9634em); -moz-transform: translate(-24.9634em); -ms-transform: translate(-24.9634em); -o-transform: translate(-24.9634em); transform: translate(-24.9634em) } } .layers .building-6 { position: absolute; left: 50%; top: 295px; z-index: 10; width: 343.767px; height: 224.451px; -webkit-transform: translateX(-645px); -moz-transform: translateX(-645px); -ms-transform: translateX(-645px); -o-transform: translateX(-645px); transform: translateX(-645px); background: url(../images/building-6.png) 0 0/contain no-repeat; opacity: 0 } .layers .building-6.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .building-6.fade-in.is-visible { opacity: 1 } .layers .building-6.fade-up { opacity: 0; -webkit-transform: translate(-645px, 60px); -moz-transform: translate(-645px, 60px); -ms-transform: translate(-645px, 60px); -o-transform: translate(-645px, 60px); transform: translate(-645px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .building-6.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-645px); -moz-transform: translate(-645px); -ms-transform: translate(-645px); -o-transform: translate(-645px); transform: translate(-645px) } @media (max-width: 1366px) { .layers .building-6 { top: 21.5959vw; width: 25.16596vw; height: 16.43126vw; font-size: 1vw; -webkit-transform: translateX(-47.21816em); -moz-transform: translateX(-47.21816em); -ms-transform: translateX(-47.21816em); -o-transform: translateX(-47.21816em); transform: translateX(-47.21816em) } .layers .building-6.fade-up { -webkit-transform: translate(-47.21816em, 60px); -moz-transform: translate(-47.21816em, 60px); -ms-transform: translate(-47.21816em, 60px); -o-transform: translate(-47.21816em, 60px); transform: translate(-47.21816em, 60px) } .layers .building-6.fade-up.is-visible { -webkit-transform: translate(-47.21816em); -moz-transform: translate(-47.21816em); -ms-transform: translate(-47.21816em); -o-transform: translate(-47.21816em); transform: translate(-47.21816em) } } .layers .building-7 { position: absolute; left: 50%; top: 376px; z-index: 10; width: 364.56px; height: 278.32px; -webkit-transform: translateX(173px); -moz-transform: translateX(173px); -ms-transform: translateX(173px); -o-transform: translateX(173px); transform: translateX(173px); background: url(../images/building-7.png) 0 0/contain no-repeat; opacity: 0 } .layers .building-7.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .building-7.fade-in.is-visible { opacity: 1 } .layers .building-7.fade-up { opacity: 0; -webkit-transform: translate(173px, 60px); -moz-transform: translate(173px, 60px); -ms-transform: translate(173px, 60px); -o-transform: translate(173px, 60px); transform: translate(173px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .building-7.fade-up.is-visible { opacity: 1; -webkit-transform: translate(173px); -moz-transform: translate(173px); -ms-transform: translate(173px); -o-transform: translate(173px); transform: translate(173px) } @media (max-width: 1366px) { .layers .building-7 { top: 27.52562vw; width: 26.68814vw; height: 20.37482vw; font-size: 1vw; -webkit-transform: translateX(12.66471em); -moz-transform: translateX(12.66471em); -ms-transform: translateX(12.66471em); -o-transform: translateX(12.66471em); transform: translateX(12.66471em) } .layers .building-7.fade-up { -webkit-transform: translate(12.66471em, 60px); -moz-transform: translate(12.66471em, 60px); -ms-transform: translate(12.66471em, 60px); -o-transform: translate(12.66471em, 60px); transform: translate(12.66471em, 60px) } .layers .building-7.fade-up.is-visible { -webkit-transform: translate(12.66471em); -moz-transform: translate(12.66471em); -ms-transform: translate(12.66471em); -o-transform: translate(12.66471em); transform: translate(12.66471em) } } .layers .building-8 { position: absolute; left: 50%; top: 486px; z-index: 10; width: 292.53px; height: 224.42px; -webkit-transform: translateX(91px); -moz-transform: translateX(91px); -ms-transform: translateX(91px); -o-transform: translateX(91px); transform: translateX(91px); background: url(../images/building-8.png) 0 0/contain no-repeat; opacity: 0 } .layers .building-8.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .building-8.fade-in.is-visible { opacity: 1 } .layers .building-8.fade-up { opacity: 0; -webkit-transform: translate(91px, 60px); -moz-transform: translate(91px, 60px); -ms-transform: translate(91px, 60px); -o-transform: translate(91px, 60px); transform: translate(91px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .building-8.fade-up.is-visible { opacity: 1; -webkit-transform: translate(91px); -moz-transform: translate(91px); -ms-transform: translate(91px); -o-transform: translate(91px); transform: translate(91px) } @media (max-width: 1366px) { .layers .building-8 { top: 35.57833vw; width: 21.41508vw; height: 16.42899vw; font-size: 1vw; -webkit-transform: translateX(6.66179em); -moz-transform: translateX(6.66179em); -ms-transform: translateX(6.66179em); -o-transform: translateX(6.66179em); transform: translateX(6.66179em) } .layers .building-8.fade-up { -webkit-transform: translate(6.66179em, 60px); -moz-transform: translate(6.66179em, 60px); -ms-transform: translate(6.66179em, 60px); -o-transform: translate(6.66179em, 60px); transform: translate(6.66179em, 60px) } .layers .building-8.fade-up.is-visible { -webkit-transform: translate(6.66179em); -moz-transform: translate(6.66179em); -ms-transform: translate(6.66179em); -o-transform: translate(6.66179em); transform: translate(6.66179em) } } .layers .building-9 { position: absolute; left: 50%; top: 632px; z-index: 10; width: 174.44px; height: 135.24px; -webkit-transform: translateX(99px); -moz-transform: translateX(99px); -ms-transform: translateX(99px); -o-transform: translateX(99px); transform: translateX(99px); background: url(../images/building-9.png) 0 0/contain no-repeat; opacity: 0 } .layers .building-9.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .building-9.fade-in.is-visible { opacity: 1 } .layers .building-9.fade-up { opacity: 0; -webkit-transform: translate(99px, 60px); -moz-transform: translate(99px, 60px); -ms-transform: translate(99px, 60px); -o-transform: translate(99px, 60px); transform: translate(99px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .building-9.fade-up.is-visible { opacity: 1; -webkit-transform: translate(99px); -moz-transform: translate(99px); -ms-transform: translate(99px); -o-transform: translate(99px); transform: translate(99px) } @media (max-width: 1366px) { .layers .building-9 { top: 46.26647vw; width: 12.77013vw; height: 9.90044vw; font-size: 1vw; -webkit-transform: translateX(7.24744em); -moz-transform: translateX(7.24744em); -ms-transform: translateX(7.24744em); -o-transform: translateX(7.24744em); transform: translateX(7.24744em) } .layers .building-9.fade-up { -webkit-transform: translate(7.24744em, 60px); -moz-transform: translate(7.24744em, 60px); -ms-transform: translate(7.24744em, 60px); -o-transform: translate(7.24744em, 60px); transform: translate(7.24744em, 60px) } .layers .building-9.fade-up.is-visible { -webkit-transform: translate(7.24744em); -moz-transform: translate(7.24744em); -ms-transform: translate(7.24744em); -o-transform: translate(7.24744em); transform: translate(7.24744em) } } .layers .building-10 { position: absolute; left: 50%; top: 3212px; z-index: 10; width: 393.984px; height: 279.585px; -webkit-transform: translateX(-384px); -moz-transform: translateX(-384px); -ms-transform: translateX(-384px); -o-transform: translateX(-384px); transform: translateX(-384px); background: url(../images/building-10.png) 0 0/contain no-repeat } .layers .building-10.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .building-10.fade-in.is-visible { opacity: 1 } .layers .building-10.fade-up { opacity: 0; -webkit-transform: translate(-384px, 60px); -moz-transform: translate(-384px, 60px); -ms-transform: translate(-384px, 60px); -o-transform: translate(-384px, 60px); transform: translate(-384px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .building-10.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-384px); -moz-transform: translate(-384px); -ms-transform: translate(-384px); -o-transform: translate(-384px); transform: translate(-384px) } @media (max-width: 1366px) { .layers .building-10 { top: 235.13909vw; width: 28.84217vw; height: 20.46742vw; font-size: 1vw; -webkit-transform: translateX(-28.11127em); -moz-transform: translateX(-28.11127em); -ms-transform: translateX(-28.11127em); -o-transform: translateX(-28.11127em); transform: translateX(-28.11127em) } .layers .building-10.fade-up { -webkit-transform: translate(-28.11127em, 60px); -moz-transform: translate(-28.11127em, 60px); -ms-transform: translate(-28.11127em, 60px); -o-transform: translate(-28.11127em, 60px); transform: translate(-28.11127em, 60px) } .layers .building-10.fade-up.is-visible { -webkit-transform: translate(-28.11127em); -moz-transform: translate(-28.11127em); -ms-transform: translate(-28.11127em); -o-transform: translate(-28.11127em); transform: translate(-28.11127em) } } .layers .building-11 { position: absolute; left: 50%; top: 3343px; z-index: 12; width: 196.5px; height: 134px; -webkit-transform: translateX(-783px); -moz-transform: translateX(-783px); -ms-transform: translateX(-783px); -o-transform: translateX(-783px); transform: translateX(-783px); background: url(../images/building-11.png) 0 0/contain no-repeat } .layers .building-11.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .building-11.fade-in.is-visible { opacity: 1 } .layers .building-11.fade-up { opacity: 0; -webkit-transform: translate(-783px, 60px); -moz-transform: translate(-783px, 60px); -ms-transform: translate(-783px, 60px); -o-transform: translate(-783px, 60px); transform: translate(-783px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .building-11.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-783px); -moz-transform: translate(-783px); -ms-transform: translate(-783px); -o-transform: translate(-783px); transform: translate(-783px) } @media (max-width: 1366px) { .layers .building-11 { top: 244.72914vw; width: 14.38507vw; height: 9.80966vw; font-size: 1vw; -webkit-transform: translateX(-57.32064em); -moz-transform: translateX(-57.32064em); -ms-transform: translateX(-57.32064em); -o-transform: translateX(-57.32064em); transform: translateX(-57.32064em) } .layers .building-11.fade-up { -webkit-transform: translate(-57.32064em, 60px); -moz-transform: translate(-57.32064em, 60px); -ms-transform: translate(-57.32064em, 60px); -o-transform: translate(-57.32064em, 60px); transform: translate(-57.32064em, 60px) } .layers .building-11.fade-up.is-visible { -webkit-transform: translate(-57.32064em); -moz-transform: translate(-57.32064em); -ms-transform: translate(-57.32064em); -o-transform: translate(-57.32064em); transform: translate(-57.32064em) } } .layers .building-12 { position: absolute; left: 50%; top: 3470px; z-index: 14; width: 477.87px; height: 281.52px; -webkit-transform: translateX(-799px); -moz-transform: translateX(-799px); -ms-transform: translateX(-799px); -o-transform: translateX(-799px); transform: translateX(-799px); background: url(../images/building-12.png) 0 0/contain no-repeat } .layers .building-12.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .building-12.fade-in.is-visible { opacity: 1 } .layers .building-12.fade-up { opacity: 0; -webkit-transform: translate(-799px, 60px); -moz-transform: translate(-799px, 60px); -ms-transform: translate(-799px, 60px); -o-transform: translate(-799px, 60px); transform: translate(-799px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .building-12.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-799px); -moz-transform: translate(-799px); -ms-transform: translate(-799px); -o-transform: translate(-799px); transform: translate(-799px) } @media (max-width: 1366px) { .layers .building-12 { top: 254.02635vw; width: 34.98316vw; height: 20.60908vw; font-size: 1vw; -webkit-transform: translateX(-58.49195em); -moz-transform: translateX(-58.49195em); -ms-transform: translateX(-58.49195em); -o-transform: translateX(-58.49195em); transform: translateX(-58.49195em) } .layers .building-12.fade-up { -webkit-transform: translate(-58.49195em, 60px); -moz-transform: translate(-58.49195em, 60px); -ms-transform: translate(-58.49195em, 60px); -o-transform: translate(-58.49195em, 60px); transform: translate(-58.49195em, 60px) } .layers .building-12.fade-up.is-visible { -webkit-transform: translate(-58.49195em); -moz-transform: translate(-58.49195em); -ms-transform: translate(-58.49195em); -o-transform: translate(-58.49195em); transform: translate(-58.49195em) } } .layers .bus-stop { position: absolute; left: 50%; top: 2760px; z-index: 10; width: 112.7px; height: 74.06px; -webkit-transform: translateX(224px); -moz-transform: translateX(224px); -ms-transform: translateX(224px); -o-transform: translateX(224px); transform: translateX(224px); background: url(../images/bus-stop.png) 0 0/contain no-repeat } .layers .bus-stop.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .bus-stop.fade-in.is-visible { opacity: 1 } .layers .bus-stop.fade-up { opacity: 0; -webkit-transform: translate(224px, 60px); -moz-transform: translate(224px, 60px); -ms-transform: translate(224px, 60px); -o-transform: translate(224px, 60px); transform: translate(224px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .bus-stop.fade-up.is-visible { opacity: 1; -webkit-transform: translate(224px); -moz-transform: translate(224px); -ms-transform: translate(224px); -o-transform: translate(224px); transform: translate(224px) } @media (max-width: 1366px) { .layers .bus-stop { top: 202.04978vw; width: 8.25037vw; height: 5.42167vw; font-size: 1vw; -webkit-transform: translateX(16.39824em); -moz-transform: translateX(16.39824em); -ms-transform: translateX(16.39824em); -o-transform: translateX(16.39824em); transform: translateX(16.39824em) } .layers .bus-stop.fade-up { -webkit-transform: translate(16.39824em, 60px); -moz-transform: translate(16.39824em, 60px); -ms-transform: translate(16.39824em, 60px); -o-transform: translate(16.39824em, 60px); transform: translate(16.39824em, 60px) } .layers .bus-stop.fade-up.is-visible { -webkit-transform: translate(16.39824em); -moz-transform: translate(16.39824em); -ms-transform: translate(16.39824em); -o-transform: translate(16.39824em); transform: translate(16.39824em) } } .layers .sign-1 { position: absolute; left: 50%; top: 3327px; z-index: 12; width: 30.4px; height: 86px; -webkit-transform: translateX(-578px); -moz-transform: translateX(-578px); -ms-transform: translateX(-578px); -o-transform: translateX(-578px); transform: translateX(-578px); background: url(../images/sign-1.png) 0 0/contain no-repeat } .layers .sign-1.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .sign-1.fade-in.is-visible { opacity: 1 } .layers .sign-1.fade-up { opacity: 0; -webkit-transform: translate(-578px, 60px); -moz-transform: translate(-578px, 60px); -ms-transform: translate(-578px, 60px); -o-transform: translate(-578px, 60px); transform: translate(-578px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .sign-1.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-578px); -moz-transform: translate(-578px); -ms-transform: translate(-578px); -o-transform: translate(-578px); transform: translate(-578px) } @media (max-width: 1366px) { .layers .sign-1 { top: 243.55783vw; width: 2.22548vw; height: 6.29575vw; font-size: 1vw; -webkit-transform: translateX(-42.31332em); -moz-transform: translateX(-42.31332em); -ms-transform: translateX(-42.31332em); -o-transform: translateX(-42.31332em); transform: translateX(-42.31332em) } .layers .sign-1.fade-up { -webkit-transform: translate(-42.31332em, 60px); -moz-transform: translate(-42.31332em, 60px); -ms-transform: translate(-42.31332em, 60px); -o-transform: translate(-42.31332em, 60px); transform: translate(-42.31332em, 60px) } .layers .sign-1.fade-up.is-visible { -webkit-transform: translate(-42.31332em); -moz-transform: translate(-42.31332em); -ms-transform: translate(-42.31332em); -o-transform: translate(-42.31332em); transform: translate(-42.31332em) } } .layers .sign-2 { position: absolute; left: 50%; top: 3502px; z-index: 10; width: 51px; height: 66.5px; -webkit-transform: translateX(-103px); -moz-transform: translateX(-103px); -ms-transform: translateX(-103px); -o-transform: translateX(-103px); transform: translateX(-103px); background: url(../images/sign-2.png) 0 0/contain no-repeat } .layers .sign-2.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .sign-2.fade-in.is-visible { opacity: 1 } .layers .sign-2.fade-up { opacity: 0; -webkit-transform: translate(-103px, 60px); -moz-transform: translate(-103px, 60px); -ms-transform: translate(-103px, 60px); -o-transform: translate(-103px, 60px); transform: translate(-103px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .sign-2.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-103px); -moz-transform: translate(-103px); -ms-transform: translate(-103px); -o-transform: translate(-103px); transform: translate(-103px) } @media (max-width: 1366px) { .layers .sign-2 { top: 256.36896vw; width: 3.73353vw; height: 4.86823vw; font-size: 1vw; -webkit-transform: translateX(-7.54026em); -moz-transform: translateX(-7.54026em); -ms-transform: translateX(-7.54026em); -o-transform: translateX(-7.54026em); transform: translateX(-7.54026em) } .layers .sign-2.fade-up { -webkit-transform: translate(-7.54026em, 60px); -moz-transform: translate(-7.54026em, 60px); -ms-transform: translate(-7.54026em, 60px); -o-transform: translate(-7.54026em, 60px); transform: translate(-7.54026em, 60px) } .layers .sign-2.fade-up.is-visible { -webkit-transform: translate(-7.54026em); -moz-transform: translate(-7.54026em); -ms-transform: translate(-7.54026em); -o-transform: translate(-7.54026em); transform: translate(-7.54026em) } } .layers .sign-3 { position: absolute; left: 50%; top: 6159px; z-index: 10; width: 48px; height: 70.56px; -webkit-transform: translateX(255px); -moz-transform: translateX(255px); -ms-transform: translateX(255px); -o-transform: translateX(255px); transform: translateX(255px); background: url(../images/sign-3.png) 0 0/contain no-repeat } .layers .sign-3.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .sign-3.fade-in.is-visible { opacity: 1 } .layers .sign-3.fade-up { opacity: 0; -webkit-transform: translate(255px, 60px); -moz-transform: translate(255px, 60px); -ms-transform: translate(255px, 60px); -o-transform: translate(255px, 60px); transform: translate(255px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .sign-3.fade-up.is-visible { opacity: 1; -webkit-transform: translate(255px); -moz-transform: translate(255px); -ms-transform: translate(255px); -o-transform: translate(255px); transform: translate(255px) } @media (max-width: 1366px) { .layers .sign-3 { top: 450.87848vw; width: 3.51391vw; height: 5.16545vw; font-size: 1vw; -webkit-transform: translateX(18.66764em); -moz-transform: translateX(18.66764em); -ms-transform: translateX(18.66764em); -o-transform: translateX(18.66764em); transform: translateX(18.66764em) } .layers .sign-3.fade-up { -webkit-transform: translate(18.66764em, 60px); -moz-transform: translate(18.66764em, 60px); -ms-transform: translate(18.66764em, 60px); -o-transform: translate(18.66764em, 60px); transform: translate(18.66764em, 60px) } .layers .sign-3.fade-up.is-visible { -webkit-transform: translate(18.66764em); -moz-transform: translate(18.66764em); -ms-transform: translate(18.66764em); -o-transform: translate(18.66764em); transform: translate(18.66764em) } } .layers .start { position: absolute; left: 50%; top: 555px; z-index: 13; width: 195.02px; height: 150.92px; -webkit-transform: translateX(-80px); -moz-transform: translateX(-80px); -ms-transform: translateX(-80px); -o-transform: translateX(-80px); transform: translateX(-80px); background: url(../images/start.png) 0 0/contain no-repeat; opacity: 0; pointer-events: none } .layers .start.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .start.fade-in.is-visible { opacity: 1 } .layers .start.fade-up { opacity: 0; -webkit-transform: translate(-80px, 60px); -moz-transform: translate(-80px, 60px); -ms-transform: translate(-80px, 60px); -o-transform: translate(-80px, 60px); transform: translate(-80px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .start.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-80px); -moz-transform: translate(-80px); -ms-transform: translate(-80px); -o-transform: translate(-80px); transform: translate(-80px) } @media (max-width: 1366px) { .layers .start { top: 40.62958vw; width: 14.27672vw; height: 11.04832vw; font-size: 1vw; -webkit-transform: translateX(-5.85652em); -moz-transform: translateX(-5.85652em); -ms-transform: translateX(-5.85652em); -o-transform: translateX(-5.85652em); transform: translateX(-5.85652em) } .layers .start.fade-up { -webkit-transform: translate(-5.85652em, 60px); -moz-transform: translate(-5.85652em, 60px); -ms-transform: translate(-5.85652em, 60px); -o-transform: translate(-5.85652em, 60px); transform: translate(-5.85652em, 60px) } .layers .start.fade-up.is-visible { -webkit-transform: translate(-5.85652em); -moz-transform: translate(-5.85652em); -ms-transform: translate(-5.85652em); -o-transform: translate(-5.85652em); transform: translate(-5.85652em) } } .layers .finish { position: absolute; left: 50%; top: 7882px; z-index: 13; width: 173.46px; height: 131.46px; -webkit-transform: translateX(-200px); -moz-transform: translateX(-200px); -ms-transform: translateX(-200px); -o-transform: translateX(-200px); transform: translateX(-200px); background: url(../images/finish.png) 0 0/contain no-repeat } .layers .finish.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .finish.fade-in.is-visible { opacity: 1 } .layers .finish.fade-up { opacity: 0; -webkit-transform: translate(-200px, 60px); -moz-transform: translate(-200px, 60px); -ms-transform: translate(-200px, 60px); -o-transform: translate(-200px, 60px); transform: translate(-200px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .finish.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-200px); -moz-transform: translate(-200px); -ms-transform: translate(-200px); -o-transform: translate(-200px); transform: translate(-200px) } @media (max-width: 1366px) { .layers .finish { top: 577.01318vw; width: 12.69839vw; height: 9.62372vw; font-size: 1vw; -webkit-transform: translateX(-14.64129em); -moz-transform: translateX(-14.64129em); -ms-transform: translateX(-14.64129em); -o-transform: translateX(-14.64129em); transform: translateX(-14.64129em) } .layers .finish.fade-up { -webkit-transform: translate(-14.64129em, 60px); -moz-transform: translate(-14.64129em, 60px); -ms-transform: translate(-14.64129em, 60px); -o-transform: translate(-14.64129em, 60px); transform: translate(-14.64129em, 60px) } .layers .finish.fade-up.is-visible { -webkit-transform: translate(-14.64129em); -moz-transform: translate(-14.64129em); -ms-transform: translate(-14.64129em); -o-transform: translate(-14.64129em); transform: translate(-14.64129em) } } .layers .arrow { position: absolute; left: 50%; top: 689px; z-index: 11; width: 69.3px; height: 38.85px; -webkit-transform: translateX(-70px); -moz-transform: translateX(-70px); -ms-transform: translateX(-70px); -o-transform: translateX(-70px); transform: translateX(-70px); font-size: 1vw; cursor: pointer; -webkit-animation: 1s linear infinite alternate a; -moz-animation: 1s linear infinite alternate a; -o-animation: 1s linear infinite alternate a; animation: 1s linear infinite alternate a } .layers .arrow:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(../images/arrow.png) 0 0/contain no-repeat } .layers .arrow.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .arrow.fade-in.is-visible { opacity: 1 } .layers .arrow.fade-up { opacity: 0; -webkit-transform: translate(-70px, 60px); -moz-transform: translate(-70px, 60px); -ms-transform: translate(-70px, 60px); -o-transform: translate(-70px, 60px); transform: translate(-70px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .arrow.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-70px); -moz-transform: translate(-70px); -ms-transform: translate(-70px); -o-transform: translate(-70px); transform: translate(-70px) } @media (max-width: 1366px) { .layers .arrow { top: 50.43924vw; width: 5.07321vw; height: 2.84407vw; font-size: 1vw; -webkit-transform: translateX(-5.12445em); -moz-transform: translateX(-5.12445em); -ms-transform: translateX(-5.12445em); -o-transform: translateX(-5.12445em); transform: translateX(-5.12445em) } .layers .arrow.fade-up { -webkit-transform: translate(-5.12445em, 60px); -moz-transform: translate(-5.12445em, 60px); -ms-transform: translate(-5.12445em, 60px); -o-transform: translate(-5.12445em, 60px); transform: translate(-5.12445em, 60px) } .layers .arrow.fade-up.is-visible { -webkit-transform: translate(-5.12445em); -moz-transform: translate(-5.12445em); -ms-transform: translate(-5.12445em); -o-transform: translate(-5.12445em); transform: translate(-5.12445em) } } @-webkit-keyframes a { 0% { -webkit-transform: translate(-70px); transform: translate(-70px) } to { -webkit-transform: translate(-90.13602px, 10.03945px); transform: translate(-90.13602px, 10.03945px) } } @-moz-keyframes a { 0% { -moz-transform: translate(-70px); transform: translate(-70px) } to { -moz-transform: translate(-90.13602px, 10.03945px); transform: translate(-90.13602px, 10.03945px) } } @-o-keyframes a { 0% { -o-transform: translate(-70px); transform: translate(-70px) } to { -o-transform: translate(-90.13602px, 10.03945px); transform: translate(-90.13602px, 10.03945px) } } @keyframes a { 0% { -webkit-transform: translate(-70px); -moz-transform: translate(-70px); -o-transform: translate(-70px); transform: translate(-70px) } to { -webkit-transform: translate(-90.13602px, 10.03945px); -moz-transform: translate(-90.13602px, 10.03945px); -o-transform: translate(-90.13602px, 10.03945px); transform: translate(-90.13602px, 10.03945px) } } @-webkit-keyframes b { 0% { -webkit-transform: translate(-5.12445em); transform: translate(-5.12445em) } to { -webkit-transform: translate(-6.59854em, .73495em); transform: translate(-6.59854em, .73495em) } } @-moz-keyframes b { 0% { -moz-transform: translate(-5.12445em); transform: translate(-5.12445em) } to { -moz-transform: translate(-6.59854em, .73495em); transform: translate(-6.59854em, .73495em) } } @-o-keyframes b { 0% { -o-transform: translate(-5.12445em); transform: translate(-5.12445em) } to { -o-transform: translate(-6.59854em, .73495em); transform: translate(-6.59854em, .73495em) } } @keyframes b { 0% { -webkit-transform: translate(-5.12445em); -moz-transform: translate(-5.12445em); -o-transform: translate(-5.12445em); transform: translate(-5.12445em) } to { -webkit-transform: translate(-6.59854em, .73495em); -moz-transform: translate(-6.59854em, .73495em); -o-transform: translate(-6.59854em, .73495em); transform: translate(-6.59854em, .73495em) } } @media (max-width: 1366px) { .layers .arrow { -webkit-animation: 1s linear infinite alternate b; -moz-animation: 1s linear infinite alternate b; -o-animation: 1s linear infinite alternate b; animation: 1s linear infinite alternate b } } .layers .arrow-1 { position: absolute; left: 50%; top: 1492px; z-index: 11; width: 69.3px; height: 38.85px; -webkit-transform: translateX(-424px); -moz-transform: translateX(-424px); -ms-transform: translateX(-424px); -o-transform: translateX(-424px); transform: translateX(-424px); font-size: 1vw; cursor: pointer; -webkit-animation: 1s linear infinite alternate c; -moz-animation: 1s linear infinite alternate c; -o-animation: 1s linear infinite alternate c; animation: 1s linear infinite alternate c; display: none } .layers .arrow-1:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(../images/arrow.png) 0 0/contain no-repeat } .layers .arrow-1.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .arrow-1.fade-in.is-visible { opacity: 1 } .layers .arrow-1.fade-up { opacity: 0; -webkit-transform: translate(-424px, 60px); -moz-transform: translate(-424px, 60px); -ms-transform: translate(-424px, 60px); -o-transform: translate(-424px, 60px); transform: translate(-424px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .arrow-1.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-424px); -moz-transform: translate(-424px); -ms-transform: translate(-424px); -o-transform: translate(-424px); transform: translate(-424px) } @media (max-width: 1366px) { .layers .arrow-1 { top: 109.22401vw; width: 5.07321vw; height: 2.84407vw; font-size: 1vw; -webkit-transform: translateX(-31.03953em); -moz-transform: translateX(-31.03953em); -ms-transform: translateX(-31.03953em); -o-transform: translateX(-31.03953em); transform: translateX(-31.03953em) } .layers .arrow-1.fade-up { -webkit-transform: translate(-31.03953em, 60px); -moz-transform: translate(-31.03953em, 60px); -ms-transform: translate(-31.03953em, 60px); -o-transform: translate(-31.03953em, 60px); transform: translate(-31.03953em, 60px) } .layers .arrow-1.fade-up.is-visible { -webkit-transform: translate(-31.03953em); -moz-transform: translate(-31.03953em); -ms-transform: translate(-31.03953em); -o-transform: translate(-31.03953em); transform: translate(-31.03953em) } } @-webkit-keyframes c { 0% { -webkit-transform: translate(-424px); transform: translate(-424px) } to { -webkit-transform: translate(-444.13602px, 10.03945px); transform: translate(-444.13602px, 10.03945px) } } @-moz-keyframes c { 0% { -moz-transform: translate(-424px); transform: translate(-424px) } to { -moz-transform: translate(-444.13602px, 10.03945px); transform: translate(-444.13602px, 10.03945px) } } @-o-keyframes c { 0% { -o-transform: translate(-424px); transform: translate(-424px) } to { -o-transform: translate(-444.13602px, 10.03945px); transform: translate(-444.13602px, 10.03945px) } } @keyframes c { 0% { -webkit-transform: translate(-424px); -moz-transform: translate(-424px); -o-transform: translate(-424px); transform: translate(-424px) } to { -webkit-transform: translate(-444.13602px, 10.03945px); -moz-transform: translate(-444.13602px, 10.03945px); -o-transform: translate(-444.13602px, 10.03945px); transform: translate(-444.13602px, 10.03945px) } } @-webkit-keyframes d { 0% { -webkit-transform: translate(-31.03953em); transform: translate(-31.03953em) } to { -webkit-transform: translate(-32.51362em, .73495em); transform: translate(-32.51362em, .73495em) } } @-moz-keyframes d { 0% { -moz-transform: translate(-31.03953em); transform: translate(-31.03953em) } to { -moz-transform: translate(-32.51362em, .73495em); transform: translate(-32.51362em, .73495em) } } @-o-keyframes d { 0% { -o-transform: translate(-31.03953em); transform: translate(-31.03953em) } to { -o-transform: translate(-32.51362em, .73495em); transform: translate(-32.51362em, .73495em) } } @keyframes d { 0% { -webkit-transform: translate(-31.03953em); -moz-transform: translate(-31.03953em); -o-transform: translate(-31.03953em); transform: translate(-31.03953em) } to { -webkit-transform: translate(-32.51362em, .73495em); -moz-transform: translate(-32.51362em, .73495em); -o-transform: translate(-32.51362em, .73495em); transform: translate(-32.51362em, .73495em) } } @media (max-width: 1366px) { .layers .arrow-1 { -webkit-animation: 1s linear infinite alternate d; -moz-animation: 1s linear infinite alternate d; -o-animation: 1s linear infinite alternate d; animation: 1s linear infinite alternate d } } .layers .arrow-2 { position: absolute; left: 50%; top: 2409px; z-index: 11; width: 69.3px; height: 38.85px; -webkit-transform: translateX(377px); -moz-transform: translateX(377px); -ms-transform: translateX(377px); -o-transform: translateX(377px); transform: translateX(377px); font-size: 1vw; cursor: pointer; -webkit-animation: 1s linear infinite alternate e; -moz-animation: 1s linear infinite alternate e; -o-animation: 1s linear infinite alternate e; animation: 1s linear infinite alternate e; display: none } .layers .arrow-2:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(../images/arrow.png) 0 0/contain no-repeat; -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); -ms-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1) } .layers .arrow-2.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .arrow-2.fade-in.is-visible { opacity: 1 } .layers .arrow-2.fade-up { opacity: 0; -webkit-transform: translate(377px, 60px); -moz-transform: translate(377px, 60px); -ms-transform: translate(377px, 60px); -o-transform: translate(377px, 60px); transform: translate(377px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .arrow-2.fade-up.is-visible { opacity: 1; -webkit-transform: translate(377px); -moz-transform: translate(377px); -ms-transform: translate(377px); -o-transform: translate(377px); transform: translate(377px) } @media (max-width: 1366px) { .layers .arrow-2 { top: 176.35432vw; width: 5.07321vw; height: 2.84407vw; font-size: 1vw; -webkit-transform: translateX(27.59883em); -moz-transform: translateX(27.59883em); -ms-transform: translateX(27.59883em); -o-transform: translateX(27.59883em); transform: translateX(27.59883em) } .layers .arrow-2.fade-up { -webkit-transform: translate(27.59883em, 60px); -moz-transform: translate(27.59883em, 60px); -ms-transform: translate(27.59883em, 60px); -o-transform: translate(27.59883em, 60px); transform: translate(27.59883em, 60px) } .layers .arrow-2.fade-up.is-visible { -webkit-transform: translate(27.59883em); -moz-transform: translate(27.59883em); -ms-transform: translate(27.59883em); -o-transform: translate(27.59883em); transform: translate(27.59883em) } } @-webkit-keyframes e { 0% { -webkit-transform: translate(377px); transform: translate(377px) } to { -webkit-transform: translate(397.13602px, 10.03945px); transform: translate(397.13602px, 10.03945px) } } @-moz-keyframes e { 0% { -moz-transform: translate(377px); transform: translate(377px) } to { -moz-transform: translate(397.13602px, 10.03945px); transform: translate(397.13602px, 10.03945px) } } @-o-keyframes e { 0% { -o-transform: translate(377px); transform: translate(377px) } to { -o-transform: translate(397.13602px, 10.03945px); transform: translate(397.13602px, 10.03945px) } } @keyframes e { 0% { -webkit-transform: translate(377px); -moz-transform: translate(377px); -o-transform: translate(377px); transform: translate(377px) } to { -webkit-transform: translate(397.13602px, 10.03945px); -moz-transform: translate(397.13602px, 10.03945px); -o-transform: translate(397.13602px, 10.03945px); transform: translate(397.13602px, 10.03945px) } } @-webkit-keyframes f { 0% { -webkit-transform: translate(27.59883em); transform: translate(27.59883em) } to { -webkit-transform: translate(29.07292em, .73495em); transform: translate(29.07292em, .73495em) } } @-moz-keyframes f { 0% { -moz-transform: translate(27.59883em); transform: translate(27.59883em) } to { -moz-transform: translate(29.07292em, .73495em); transform: translate(29.07292em, .73495em) } } @-o-keyframes f { 0% { -o-transform: translate(27.59883em); transform: translate(27.59883em) } to { -o-transform: translate(29.07292em, .73495em); transform: translate(29.07292em, .73495em) } } @keyframes f { 0% { -webkit-transform: translate(27.59883em); -moz-transform: translate(27.59883em); -o-transform: translate(27.59883em); transform: translate(27.59883em) } to { -webkit-transform: translate(29.07292em, .73495em); -moz-transform: translate(29.07292em, .73495em); -o-transform: translate(29.07292em, .73495em); transform: translate(29.07292em, .73495em) } } @media (max-width: 1366px) { .layers .arrow-2 { -webkit-animation: 1s linear infinite alternate f; -moz-animation: 1s linear infinite alternate f; -o-animation: 1s linear infinite alternate f; animation: 1s linear infinite alternate f } } .layers .arrow-3 { position: absolute; left: 50%; top: 3386px; z-index: 11; width: 69.3px; height: 38.85px; -webkit-transform: translateX(-498px); -moz-transform: translateX(-498px); -ms-transform: translateX(-498px); -o-transform: translateX(-498px); transform: translateX(-498px); font-size: 1vw; cursor: pointer; -webkit-animation: 1s linear infinite alternate g; -moz-animation: 1s linear infinite alternate g; -o-animation: 1s linear infinite alternate g; animation: 1s linear infinite alternate g; display: none } .layers .arrow-3:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(../images/arrow.png) 0 0/contain no-repeat; -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); -ms-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1) } .layers .arrow-3.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .arrow-3.fade-in.is-visible { opacity: 1 } .layers .arrow-3.fade-up { opacity: 0; -webkit-transform: translate(-498px, 60px); -moz-transform: translate(-498px, 60px); -ms-transform: translate(-498px, 60px); -o-transform: translate(-498px, 60px); transform: translate(-498px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .arrow-3.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-498px); -moz-transform: translate(-498px); -ms-transform: translate(-498px); -o-transform: translate(-498px); transform: translate(-498px) } @media (max-width: 1366px) { .layers .arrow-3 { top: 247.87701vw; width: 5.07321vw; height: 2.84407vw; font-size: 1vw; -webkit-transform: translateX(-36.45681em); -moz-transform: translateX(-36.45681em); -ms-transform: translateX(-36.45681em); -o-transform: translateX(-36.45681em); transform: translateX(-36.45681em) } .layers .arrow-3.fade-up { -webkit-transform: translate(-36.45681em, 60px); -moz-transform: translate(-36.45681em, 60px); -ms-transform: translate(-36.45681em, 60px); -o-transform: translate(-36.45681em, 60px); transform: translate(-36.45681em, 60px) } .layers .arrow-3.fade-up.is-visible { -webkit-transform: translate(-36.45681em); -moz-transform: translate(-36.45681em); -ms-transform: translate(-36.45681em); -o-transform: translate(-36.45681em); transform: translate(-36.45681em) } } @-webkit-keyframes g { 0% { -webkit-transform: translate(-498px); transform: translate(-498px) } to { -webkit-transform: translate(-477.86398px, 10.03945px); transform: translate(-477.86398px, 10.03945px) } } @-moz-keyframes g { 0% { -moz-transform: translate(-498px); transform: translate(-498px) } to { -moz-transform: translate(-477.86398px, 10.03945px); transform: translate(-477.86398px, 10.03945px) } } @-o-keyframes g { 0% { -o-transform: translate(-498px); transform: translate(-498px) } to { -o-transform: translate(-477.86398px, 10.03945px); transform: translate(-477.86398px, 10.03945px) } } @keyframes g { 0% { -webkit-transform: translate(-498px); -moz-transform: translate(-498px); -o-transform: translate(-498px); transform: translate(-498px) } to { -webkit-transform: translate(-477.86398px, 10.03945px); -moz-transform: translate(-477.86398px, 10.03945px); -o-transform: translate(-477.86398px, 10.03945px); transform: translate(-477.86398px, 10.03945px) } } @-webkit-keyframes h { 0% { -webkit-transform: translate(-36.45681em); transform: translate(-36.45681em) } to { -webkit-transform: translate(-34.98272em, .73495em); transform: translate(-34.98272em, .73495em) } } @-moz-keyframes h { 0% { -moz-transform: translate(-36.45681em); transform: translate(-36.45681em) } to { -moz-transform: translate(-34.98272em, .73495em); transform: translate(-34.98272em, .73495em) } } @-o-keyframes h { 0% { -o-transform: translate(-36.45681em); transform: translate(-36.45681em) } to { -o-transform: translate(-34.98272em, .73495em); transform: translate(-34.98272em, .73495em) } } @keyframes h { 0% { -webkit-transform: translate(-36.45681em); -moz-transform: translate(-36.45681em); -o-transform: translate(-36.45681em); transform: translate(-36.45681em) } to { -webkit-transform: translate(-34.98272em, .73495em); -moz-transform: translate(-34.98272em, .73495em); -o-transform: translate(-34.98272em, .73495em); transform: translate(-34.98272em, .73495em) } } @media (max-width: 1366px) { .layers .arrow-3 { -webkit-animation: 1s linear infinite alternate h; -moz-animation: 1s linear infinite alternate h; -o-animation: 1s linear infinite alternate h; animation: 1s linear infinite alternate h } } .layers .arrow-4 { position: absolute; left: 50%; top: 4607px; z-index: 11; width: 69.3px; height: 38.85px; -webkit-transform: translateX(158px); -moz-transform: translateX(158px); -ms-transform: translateX(158px); -o-transform: translateX(158px); transform: translateX(158px); font-size: 1vw; cursor: pointer; -webkit-animation: 1s linear infinite alternate i; -moz-animation: 1s linear infinite alternate i; -o-animation: 1s linear infinite alternate i; animation: 1s linear infinite alternate i; display: none } .layers .arrow-4:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(../images/arrow.png) 0 0/contain no-repeat } .layers .arrow-4.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .arrow-4.fade-in.is-visible { opacity: 1 } .layers .arrow-4.fade-up { opacity: 0; -webkit-transform: translate(158px, 60px); -moz-transform: translate(158px, 60px); -ms-transform: translate(158px, 60px); -o-transform: translate(158px, 60px); transform: translate(158px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .arrow-4.fade-up.is-visible { opacity: 1; -webkit-transform: translate(158px); -moz-transform: translate(158px); -ms-transform: translate(158px); -o-transform: translate(158px); transform: translate(158px) } @media (max-width: 1366px) { .layers .arrow-4 { top: 337.26208vw; width: 5.07321vw; height: 2.84407vw; font-size: 1vw; -webkit-transform: translateX(11.56662em); -moz-transform: translateX(11.56662em); -ms-transform: translateX(11.56662em); -o-transform: translateX(11.56662em); transform: translateX(11.56662em) } .layers .arrow-4.fade-up { -webkit-transform: translate(11.56662em, 60px); -moz-transform: translate(11.56662em, 60px); -ms-transform: translate(11.56662em, 60px); -o-transform: translate(11.56662em, 60px); transform: translate(11.56662em, 60px) } .layers .arrow-4.fade-up.is-visible { -webkit-transform: translate(11.56662em); -moz-transform: translate(11.56662em); -ms-transform: translate(11.56662em); -o-transform: translate(11.56662em); transform: translate(11.56662em) } } @-webkit-keyframes i { 0% { -webkit-transform: translate(158px); transform: translate(158px) } to { -webkit-transform: translate(137.86398px, 10.03945px); transform: translate(137.86398px, 10.03945px) } } @-moz-keyframes i { 0% { -moz-transform: translate(158px); transform: translate(158px) } to { -moz-transform: translate(137.86398px, 10.03945px); transform: translate(137.86398px, 10.03945px) } } @-o-keyframes i { 0% { -o-transform: translate(158px); transform: translate(158px) } to { -o-transform: translate(137.86398px, 10.03945px); transform: translate(137.86398px, 10.03945px) } } @keyframes i { 0% { -webkit-transform: translate(158px); -moz-transform: translate(158px); -o-transform: translate(158px); transform: translate(158px) } to { -webkit-transform: translate(137.86398px, 10.03945px); -moz-transform: translate(137.86398px, 10.03945px); -o-transform: translate(137.86398px, 10.03945px); transform: translate(137.86398px, 10.03945px) } } @-webkit-keyframes j { 0% { -webkit-transform: translate(11.56662em); transform: translate(11.56662em) } to { -webkit-transform: translate(10.09253em, .73495em); transform: translate(10.09253em, .73495em) } } @-moz-keyframes j { 0% { -moz-transform: translate(11.56662em); transform: translate(11.56662em) } to { -moz-transform: translate(10.09253em, .73495em); transform: translate(10.09253em, .73495em) } } @-o-keyframes j { 0% { -o-transform: translate(11.56662em); transform: translate(11.56662em) } to { -o-transform: translate(10.09253em, .73495em); transform: translate(10.09253em, .73495em) } } @keyframes j { 0% { -webkit-transform: translate(11.56662em); -moz-transform: translate(11.56662em); -o-transform: translate(11.56662em); transform: translate(11.56662em) } to { -webkit-transform: translate(10.09253em, .73495em); -moz-transform: translate(10.09253em, .73495em); -o-transform: translate(10.09253em, .73495em); transform: translate(10.09253em, .73495em) } } @media (max-width: 1366px) { .layers .arrow-4 { -webkit-animation: 1s linear infinite alternate j; -moz-animation: 1s linear infinite alternate j; -o-animation: 1s linear infinite alternate j; animation: 1s linear infinite alternate j } } .layers .arrow-5 { position: absolute; left: 50%; top: 5273px; z-index: 11; width: 69.3px; height: 38.85px; -webkit-transform: translateX(-448px); -moz-transform: translateX(-448px); -ms-transform: translateX(-448px); -o-transform: translateX(-448px); transform: translateX(-448px); font-size: 1vw; cursor: pointer; -webkit-animation: 1s linear infinite alternate k; -moz-animation: 1s linear infinite alternate k; -o-animation: 1s linear infinite alternate k; animation: 1s linear infinite alternate k; display: none } .layers .arrow-5:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(../images/arrow.png) 0 0/contain no-repeat } .layers .arrow-5.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .arrow-5.fade-in.is-visible { opacity: 1 } .layers .arrow-5.fade-up { opacity: 0; -webkit-transform: translate(-448px, 60px); -moz-transform: translate(-448px, 60px); -ms-transform: translate(-448px, 60px); -o-transform: translate(-448px, 60px); transform: translate(-448px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .arrow-5.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-448px); -moz-transform: translate(-448px); -ms-transform: translate(-448px); -o-transform: translate(-448px); transform: translate(-448px) } @media (max-width: 1366px) { .layers .arrow-5 { top: 386.01757vw; width: 5.07321vw; height: 2.84407vw; font-size: 1vw; -webkit-transform: translateX(-32.79649em); -moz-transform: translateX(-32.79649em); -ms-transform: translateX(-32.79649em); -o-transform: translateX(-32.79649em); transform: translateX(-32.79649em) } .layers .arrow-5.fade-up { -webkit-transform: translate(-32.79649em, 60px); -moz-transform: translate(-32.79649em, 60px); -ms-transform: translate(-32.79649em, 60px); -o-transform: translate(-32.79649em, 60px); transform: translate(-32.79649em, 60px) } .layers .arrow-5.fade-up.is-visible { -webkit-transform: translate(-32.79649em); -moz-transform: translate(-32.79649em); -ms-transform: translate(-32.79649em); -o-transform: translate(-32.79649em); transform: translate(-32.79649em) } } @-webkit-keyframes k { 0% { -webkit-transform: translate(-448px); transform: translate(-448px) } to { -webkit-transform: translate(-468.13602px, 10.03945px); transform: translate(-468.13602px, 10.03945px) } } @-moz-keyframes k { 0% { -moz-transform: translate(-448px); transform: translate(-448px) } to { -moz-transform: translate(-468.13602px, 10.03945px); transform: translate(-468.13602px, 10.03945px) } } @-o-keyframes k { 0% { -o-transform: translate(-448px); transform: translate(-448px) } to { -o-transform: translate(-468.13602px, 10.03945px); transform: translate(-468.13602px, 10.03945px) } } @keyframes k { 0% { -webkit-transform: translate(-448px); -moz-transform: translate(-448px); -o-transform: translate(-448px); transform: translate(-448px) } to { -webkit-transform: translate(-468.13602px, 10.03945px); -moz-transform: translate(-468.13602px, 10.03945px); -o-transform: translate(-468.13602px, 10.03945px); transform: translate(-468.13602px, 10.03945px) } } @-webkit-keyframes l { 0% { -webkit-transform: translate(-32.79649em); transform: translate(-32.79649em) } to { -webkit-transform: translate(-34.27057em, .73495em); transform: translate(-34.27057em, .73495em) } } @-moz-keyframes l { 0% { -moz-transform: translate(-32.79649em); transform: translate(-32.79649em) } to { -moz-transform: translate(-34.27057em, .73495em); transform: translate(-34.27057em, .73495em) } } @-o-keyframes l { 0% { -o-transform: translate(-32.79649em); transform: translate(-32.79649em) } to { -o-transform: translate(-34.27057em, .73495em); transform: translate(-34.27057em, .73495em) } } @keyframes l { 0% { -webkit-transform: translate(-32.79649em); -moz-transform: translate(-32.79649em); -o-transform: translate(-32.79649em); transform: translate(-32.79649em) } to { -webkit-transform: translate(-34.27057em, .73495em); -moz-transform: translate(-34.27057em, .73495em); -o-transform: translate(-34.27057em, .73495em); transform: translate(-34.27057em, .73495em) } } @media (max-width: 1366px) { .layers .arrow-5 { -webkit-animation: 1s linear infinite alternate l; -moz-animation: 1s linear infinite alternate l; -o-animation: 1s linear infinite alternate l; animation: 1s linear infinite alternate l } } .layers .arrow-6 { position: absolute; left: 50%; top: 6308px; z-index: 11; width: 69.3px; height: 38.85px; -webkit-transform: translateX(100px); -moz-transform: translateX(100px); -ms-transform: translateX(100px); -o-transform: translateX(100px); transform: translateX(100px); font-size: 1vw; cursor: pointer; -webkit-animation: 1s linear infinite alternate m; -moz-animation: 1s linear infinite alternate m; -o-animation: 1s linear infinite alternate m; animation: 1s linear infinite alternate m; display: none } .layers .arrow-6:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(../images/arrow.png) 0 0/contain no-repeat } .layers .arrow-6.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .arrow-6.fade-in.is-visible { opacity: 1 } .layers .arrow-6.fade-up { opacity: 0; -webkit-transform: translate(100px, 60px); -moz-transform: translate(100px, 60px); -ms-transform: translate(100px, 60px); -o-transform: translate(100px, 60px); transform: translate(100px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .arrow-6.fade-up.is-visible { opacity: 1; -webkit-transform: translate(100px); -moz-transform: translate(100px); -ms-transform: translate(100px); -o-transform: translate(100px); transform: translate(100px) } @media (max-width: 1366px) { .layers .arrow-6 { top: 461.78624vw; width: 5.07321vw; height: 2.84407vw; font-size: 1vw; -webkit-transform: translateX(7.32064em); -moz-transform: translateX(7.32064em); -ms-transform: translateX(7.32064em); -o-transform: translateX(7.32064em); transform: translateX(7.32064em) } .layers .arrow-6.fade-up { -webkit-transform: translate(7.32064em, 60px); -moz-transform: translate(7.32064em, 60px); -ms-transform: translate(7.32064em, 60px); -o-transform: translate(7.32064em, 60px); transform: translate(7.32064em, 60px) } .layers .arrow-6.fade-up.is-visible { -webkit-transform: translate(7.32064em); -moz-transform: translate(7.32064em); -ms-transform: translate(7.32064em); -o-transform: translate(7.32064em); transform: translate(7.32064em) } } @-webkit-keyframes m { 0% { -webkit-transform: translate(100px); transform: translate(100px) } to { -webkit-transform: translate(79.86398px, 10.03945px); transform: translate(79.86398px, 10.03945px) } } @-moz-keyframes m { 0% { -moz-transform: translate(100px); transform: translate(100px) } to { -moz-transform: translate(79.86398px, 10.03945px); transform: translate(79.86398px, 10.03945px) } } @-o-keyframes m { 0% { -o-transform: translate(100px); transform: translate(100px) } to { -o-transform: translate(79.86398px, 10.03945px); transform: translate(79.86398px, 10.03945px) } } @keyframes m { 0% { -webkit-transform: translate(100px); -moz-transform: translate(100px); -o-transform: translate(100px); transform: translate(100px) } to { -webkit-transform: translate(79.86398px, 10.03945px); -moz-transform: translate(79.86398px, 10.03945px); -o-transform: translate(79.86398px, 10.03945px); transform: translate(79.86398px, 10.03945px) } } @-webkit-keyframes n { 0% { -webkit-transform: translate(7.32064em); transform: translate(7.32064em) } to { -webkit-transform: translate(5.84656em, .73495em); transform: translate(5.84656em, .73495em) } } @-moz-keyframes n { 0% { -moz-transform: translate(7.32064em); transform: translate(7.32064em) } to { -moz-transform: translate(5.84656em, .73495em); transform: translate(5.84656em, .73495em) } } @-o-keyframes n { 0% { -o-transform: translate(7.32064em); transform: translate(7.32064em) } to { -o-transform: translate(5.84656em, .73495em); transform: translate(5.84656em, .73495em) } } @keyframes n { 0% { -webkit-transform: translate(7.32064em); -moz-transform: translate(7.32064em); -o-transform: translate(7.32064em); transform: translate(7.32064em) } to { -webkit-transform: translate(5.84656em, .73495em); -moz-transform: translate(5.84656em, .73495em); -o-transform: translate(5.84656em, .73495em); transform: translate(5.84656em, .73495em) } } @media (max-width: 1366px) { .layers .arrow-6 { -webkit-animation: 1s linear infinite alternate n; -moz-animation: 1s linear infinite alternate n; -o-animation: 1s linear infinite alternate n; animation: 1s linear infinite alternate n } } .layers .arrow-7 { position: absolute; left: 50%; top: 7220px; z-index: 11; width: 69.3px; height: 38.85px; -webkit-transform: translateX(-522px); -moz-transform: translateX(-522px); -ms-transform: translateX(-522px); -o-transform: translateX(-522px); transform: translateX(-522px); font-size: 1vw; cursor: pointer; -webkit-animation: 1s linear infinite alternate o; -moz-animation: 1s linear infinite alternate o; -o-animation: 1s linear infinite alternate o; animation: 1s linear infinite alternate o; display: none } .layers .arrow-7:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(../images/arrow.png) 0 0/contain no-repeat } .layers .arrow-7.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .arrow-7.fade-in.is-visible { opacity: 1 } .layers .arrow-7.fade-up { opacity: 0; -webkit-transform: translate(-522px, 60px); -moz-transform: translate(-522px, 60px); -ms-transform: translate(-522px, 60px); -o-transform: translate(-522px, 60px); transform: translate(-522px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .arrow-7.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-522px); -moz-transform: translate(-522px); -ms-transform: translate(-522px); -o-transform: translate(-522px); transform: translate(-522px) } @media (max-width: 1366px) { .layers .arrow-7 { top: 528.55051vw; width: 5.07321vw; height: 2.84407vw; font-size: 1vw; -webkit-transform: translateX(-38.21376em); -moz-transform: translateX(-38.21376em); -ms-transform: translateX(-38.21376em); -o-transform: translateX(-38.21376em); transform: translateX(-38.21376em) } .layers .arrow-7.fade-up { -webkit-transform: translate(-38.21376em, 60px); -moz-transform: translate(-38.21376em, 60px); -ms-transform: translate(-38.21376em, 60px); -o-transform: translate(-38.21376em, 60px); transform: translate(-38.21376em, 60px) } .layers .arrow-7.fade-up.is-visible { -webkit-transform: translate(-38.21376em); -moz-transform: translate(-38.21376em); -ms-transform: translate(-38.21376em); -o-transform: translate(-38.21376em); transform: translate(-38.21376em) } } @-webkit-keyframes o { 0% { -webkit-transform: translate(-522px); transform: translate(-522px) } to { -webkit-transform: translate(-542.13602px, 10.03945px); transform: translate(-542.13602px, 10.03945px) } } @-moz-keyframes o { 0% { -moz-transform: translate(-522px); transform: translate(-522px) } to { -moz-transform: translate(-542.13602px, 10.03945px); transform: translate(-542.13602px, 10.03945px) } } @-o-keyframes o { 0% { -o-transform: translate(-522px); transform: translate(-522px) } to { -o-transform: translate(-542.13602px, 10.03945px); transform: translate(-542.13602px, 10.03945px) } } @keyframes o { 0% { -webkit-transform: translate(-522px); -moz-transform: translate(-522px); -o-transform: translate(-522px); transform: translate(-522px) } to { -webkit-transform: translate(-542.13602px, 10.03945px); -moz-transform: translate(-542.13602px, 10.03945px); -o-transform: translate(-542.13602px, 10.03945px); transform: translate(-542.13602px, 10.03945px) } } @-webkit-keyframes p { 0% { -webkit-transform: translate(-38.21376em); transform: translate(-38.21376em) } to { -webkit-transform: translate(-39.68785em, .73495em); transform: translate(-39.68785em, .73495em) } } @-moz-keyframes p { 0% { -moz-transform: translate(-38.21376em); transform: translate(-38.21376em) } to { -moz-transform: translate(-39.68785em, .73495em); transform: translate(-39.68785em, .73495em) } } @-o-keyframes p { 0% { -o-transform: translate(-38.21376em); transform: translate(-38.21376em) } to { -o-transform: translate(-39.68785em, .73495em); transform: translate(-39.68785em, .73495em) } } @keyframes p { 0% { -webkit-transform: translate(-38.21376em); -moz-transform: translate(-38.21376em); -o-transform: translate(-38.21376em); transform: translate(-38.21376em) } to { -webkit-transform: translate(-39.68785em, .73495em); -moz-transform: translate(-39.68785em, .73495em); -o-transform: translate(-39.68785em, .73495em); transform: translate(-39.68785em, .73495em) } } @media (max-width: 1366px) { .layers .arrow-7 { -webkit-animation: 1s linear infinite alternate p; -moz-animation: 1s linear infinite alternate p; -o-animation: 1s linear infinite alternate p; animation: 1s linear infinite alternate p } } .layers .car { position: absolute; left: 50%; top: 630px; z-index: 12; width: 86.1px; height: 60.27px; -webkit-transform: translateX(-14px); -moz-transform: translateX(-14px); -ms-transform: translateX(-14px); -o-transform: translateX(-14px); transform: translateX(-14px); pointer-events: none } .layers .car:after, .layers .car:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: 0 0/contain no-repeat } .layers .car:before { background-image: url(../images/car-shadow-angle-0.png) } .layers .car:after { background-image: url(../images/car-angle-0.png) } .layers .car.angle-0:before { background-image: url(../images/car-shadow-angle-0.png) } .layers .car.angle-0:after { background-image: url(../images/car-angle-0.png) } .layers .car.angle-1:before { background-image: url(../images/car-shadow-angle-1.png) } .layers .car.angle-1:after { background-image: url(../images/car-angle-1.png) } .layers .car.angle-2:before { background-image: url(../images/car-shadow-angle-2.png) } .layers .car.angle-2:after { background-image: url(../images/car-angle-2.png) } .layers .car.angle-3:before { background-image: url(../images/car-shadow-angle-3.png) } .layers .car.angle-3:after { background-image: url(../images/car-angle-3.png) } .layers .car.angle-4:before { background-image: url(../images/car-shadow-angle-4.png) } .layers .car.angle-4:after { background-image: url(../images/car-angle-4.png) } .layers .car.angle-5:before { background-image: url(../images/car-shadow-angle-5.png) } .layers .car.angle-5:after { background-image: url(../images/car-angle-5.png) } .layers .car.angle-6:before { background-image: url(../images/car-shadow-angle-6.png) } .layers .car.angle-6:after { background-image: url(../images/car-angle-6.png) } .layers .car.angle-7:before { background-image: url(../images/car-shadow-angle-7.png) } .layers .car.angle-7:after { background-image: url(../images/car-angle-7.png) } .layers .car.angle-8:before { background-image: url(../images/car-shadow-angle-8.png) } .layers .car.angle-8:after { background-image: url(../images/car-angle-8.png) } .layers .car.angle-9:before { background-image: url(../images/car-shadow-angle-9.png) } .layers .car.angle-9:after { background-image: url(../images/car-angle-9.png) } .layers .car.angle-10:before { background-image: url(../images/car-shadow-angle-10.png) } .layers .car.angle-10:after { background-image: url(../images/car-angle-10.png) } .layers .car.angle-11:before { background-image: url(../images/car-shadow-angle-11.png) } .layers .car.angle-11:after { background-image: url(../images/car-angle-11.png) } .layers .car.angle-12:before { background-image: url(../images/car-shadow-angle-12.png) } .layers .car.angle-12:after { background-image: url(../images/car-angle-12.png) } .layers .car.angle-13:before { background-image: url(../images/car-shadow-angle-13.png) } .layers .car.angle-13:after { background-image: url(../images/car-angle-13.png) } .layers .car.angle-14:before { background-image: url(../images/car-shadow-angle-14.png) } .layers .car.angle-14:after { background-image: url(../images/car-angle-14.png) } .layers .car.angle-15:before { background-image: url(../images/car-shadow-angle-15.png) } .layers .car.angle-15:after { background-image: url(../images/car-angle-15.png) } @media (max-width: 1366px) { .layers .car { top: 46.12006vw; width: 6.30307vw; height: 4.41215vw; -webkit-transform: -1.02489vw; -moz-transform: -1.02489vw; -ms-transform: -1.02489vw; -o-transform: -1.02489vw; transform: -1.02489vw } } .layers .elk { position: absolute; left: 50%; top: 1451px; z-index: 12; width: 93.2px; height: 65.2px; -webkit-transform: translateX(-634px); -moz-transform: translateX(-634px); -ms-transform: translateX(-634px); -o-transform: translateX(-634px); transform: translateX(-634px); background: url(../images/elk.png) 0 0/contain no-repeat } .layers .elk.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .elk.fade-in.is-visible { opacity: 1 } .layers .elk.fade-up { opacity: 0; -webkit-transform: translate(-634px, 60px); -moz-transform: translate(-634px, 60px); -ms-transform: translate(-634px, 60px); -o-transform: translate(-634px, 60px); transform: translate(-634px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .elk.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-634px); -moz-transform: translate(-634px); -ms-transform: translate(-634px); -o-transform: translate(-634px); transform: translate(-634px) } @media (max-width: 1366px) { .layers .elk { top: 106.22255vw; width: 6.82284vw; height: 4.77306vw; font-size: 1vw; -webkit-transform: translateX(-46.41288em); -moz-transform: translateX(-46.41288em); -ms-transform: translateX(-46.41288em); -o-transform: translateX(-46.41288em); transform: translateX(-46.41288em) } .layers .elk.fade-up { -webkit-transform: translate(-46.41288em, 60px); -moz-transform: translate(-46.41288em, 60px); -ms-transform: translate(-46.41288em, 60px); -o-transform: translate(-46.41288em, 60px); transform: translate(-46.41288em, 60px) } .layers .elk.fade-up.is-visible { -webkit-transform: translate(-46.41288em); -moz-transform: translate(-46.41288em); -ms-transform: translate(-46.41288em); -o-transform: translate(-46.41288em); transform: translate(-46.41288em) } } .layers .car-hook { position: absolute; left: 50%; top: 630px; z-index: 10; width: 86.1px; height: 60.27px; -webkit-transform: translateX(-14px); -moz-transform: translateX(-14px); -ms-transform: translateX(-14px); -o-transform: translateX(-14px); transform: translateX(-14px) } .layers .car-hook.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .car-hook.fade-in.is-visible { opacity: 1 } .layers .car-hook.fade-up { opacity: 0; -webkit-transform: translate(-14px, 60px); -moz-transform: translate(-14px, 60px); -ms-transform: translate(-14px, 60px); -o-transform: translate(-14px, 60px); transform: translate(-14px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .car-hook.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-14px); -moz-transform: translate(-14px); -ms-transform: translate(-14px); -o-transform: translate(-14px); transform: translate(-14px) } @media (max-width: 1366px) { .layers .car-hook { top: 46.12006vw; width: 6.30307vw; height: 4.41215vw; font-size: 1vw; -webkit-transform: translateX(-1.02489em); -moz-transform: translateX(-1.02489em); -ms-transform: translateX(-1.02489em); -o-transform: translateX(-1.02489em); transform: translateX(-1.02489em) } .layers .car-hook.fade-up { -webkit-transform: translate(-1.02489em, 60px); -moz-transform: translate(-1.02489em, 60px); -ms-transform: translate(-1.02489em, 60px); -o-transform: translate(-1.02489em, 60px); transform: translate(-1.02489em, 60px) } .layers .car-hook.fade-up.is-visible { -webkit-transform: translate(-1.02489em); -moz-transform: translate(-1.02489em); -ms-transform: translate(-1.02489em); -o-transform: translate(-1.02489em); transform: translate(-1.02489em) } } .layers .car-2 { position: absolute; left: 50%; top: 3256px; z-index: 10; width: 97.99px; height: 65.6px; -webkit-transform: translateX(-239px); -moz-transform: translateX(-239px); -ms-transform: translateX(-239px); -o-transform: translateX(-239px); transform: translateX(-239px); background: url(../images/car-2-angle-10.png) 0 0/contain no-repeat } .layers .car-2.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .car-2.fade-in.is-visible { opacity: 1 } .layers .car-2.fade-up { opacity: 0; -webkit-transform: translate(-239px, 60px); -moz-transform: translate(-239px, 60px); -ms-transform: translate(-239px, 60px); -o-transform: translate(-239px, 60px); transform: translate(-239px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .car-2.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-239px); -moz-transform: translate(-239px); -ms-transform: translate(-239px); -o-transform: translate(-239px); transform: translate(-239px) } @media (max-width: 1366px) { .layers .car-2 { top: 238.36018vw; width: 7.1735vw; height: 4.80234vw; font-size: 1vw; -webkit-transform: translateX(-17.49634em); -moz-transform: translateX(-17.49634em); -ms-transform: translateX(-17.49634em); -o-transform: translateX(-17.49634em); transform: translateX(-17.49634em) } .layers .car-2.fade-up { -webkit-transform: translate(-17.49634em, 60px); -moz-transform: translate(-17.49634em, 60px); -ms-transform: translate(-17.49634em, 60px); -o-transform: translate(-17.49634em, 60px); transform: translate(-17.49634em, 60px) } .layers .car-2.fade-up.is-visible { -webkit-transform: translate(-17.49634em); -moz-transform: translate(-17.49634em); -ms-transform: translate(-17.49634em); -o-transform: translate(-17.49634em); transform: translate(-17.49634em) } } .layers .car-3 { position: absolute; left: 50%; top: 3504px; z-index: 13; width: 160.31px; height: 92.66px; -webkit-transform: translateX(-750px); -moz-transform: translateX(-750px); -ms-transform: translateX(-750px); -o-transform: translateX(-750px); transform: translateX(-750px); background: url(../images/car-3-angle-2.png) 0 0/contain no-repeat } .layers .car-3.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .car-3.fade-in.is-visible { opacity: 1 } .layers .car-3.fade-up { opacity: 0; -webkit-transform: translate(-750px, 60px); -moz-transform: translate(-750px, 60px); -ms-transform: translate(-750px, 60px); -o-transform: translate(-750px, 60px); transform: translate(-750px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .car-3.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-750px); -moz-transform: translate(-750px); -ms-transform: translate(-750px); -o-transform: translate(-750px); transform: translate(-750px) } @media (max-width: 1366px) { .layers .car-3 { top: 256.51537vw; width: 11.73572vw; height: 6.78331vw; font-size: 1vw; -webkit-transform: translateX(-54.90483em); -moz-transform: translateX(-54.90483em); -ms-transform: translateX(-54.90483em); -o-transform: translateX(-54.90483em); transform: translateX(-54.90483em) } .layers .car-3.fade-up { -webkit-transform: translate(-54.90483em, 60px); -moz-transform: translate(-54.90483em, 60px); -ms-transform: translate(-54.90483em, 60px); -o-transform: translate(-54.90483em, 60px); transform: translate(-54.90483em, 60px) } .layers .car-3.fade-up.is-visible { -webkit-transform: translate(-54.90483em); -moz-transform: translate(-54.90483em); -ms-transform: translate(-54.90483em); -o-transform: translate(-54.90483em); transform: translate(-54.90483em) } } .layers .car-4 { position: absolute; left: 50%; top: 4764px; z-index: 13; width: 160.31px; height: 92.66px; -webkit-transform: translateX(-257px); -moz-transform: translateX(-257px); -ms-transform: translateX(-257px); -o-transform: translateX(-257px); transform: translateX(-257px); background: url(../images/car-3-angle-2.png) 0 0/contain no-repeat; opacity: 0 } .layers .car-4.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .car-4.fade-in.is-visible { opacity: 1 } .layers .car-4.fade-up { opacity: 0; -webkit-transform: translate(-257px, 60px); -moz-transform: translate(-257px, 60px); -ms-transform: translate(-257px, 60px); -o-transform: translate(-257px, 60px); transform: translate(-257px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .car-4.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-257px); -moz-transform: translate(-257px); -ms-transform: translate(-257px); -o-transform: translate(-257px); transform: translate(-257px) } @media (max-width: 1366px) { .layers .car-4 { top: 348.75549vw; width: 11.73572vw; height: 6.78331vw; font-size: 1vw; -webkit-transform: translateX(-18.81406em); -moz-transform: translateX(-18.81406em); -ms-transform: translateX(-18.81406em); -o-transform: translateX(-18.81406em); transform: translateX(-18.81406em) } .layers .car-4.fade-up { -webkit-transform: translate(-18.81406em, 60px); -moz-transform: translate(-18.81406em, 60px); -ms-transform: translate(-18.81406em, 60px); -o-transform: translate(-18.81406em, 60px); transform: translate(-18.81406em, 60px) } .layers .car-4.fade-up.is-visible { -webkit-transform: translate(-18.81406em); -moz-transform: translate(-18.81406em); -ms-transform: translate(-18.81406em); -o-transform: translate(-18.81406em); transform: translate(-18.81406em) } } .layers .car-5 { position: absolute; left: 50%; top: 4804px; z-index: 12; width: 98.81px; height: 66.01px; -webkit-transform: translateX(-325px); -moz-transform: translateX(-325px); -ms-transform: translateX(-325px); -o-transform: translateX(-325px); transform: translateX(-325px); background: url(../images/car-2-angle-2.png) 0 0/contain no-repeat; opacity: 0 } .layers .car-5.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .layers .car-5.fade-in.is-visible { opacity: 1 } .layers .car-5.fade-up { opacity: 0; -webkit-transform: translate(-325px, 60px); -moz-transform: translate(-325px, 60px); -ms-transform: translate(-325px, 60px); -o-transform: translate(-325px, 60px); transform: translate(-325px, 60px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .layers .car-5.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-325px); -moz-transform: translate(-325px); -ms-transform: translate(-325px); -o-transform: translate(-325px); transform: translate(-325px) } @media (max-width: 1366px) { .layers .car-5 { top: 351.68375vw; width: 7.23353vw; height: 4.83236vw; font-size: 1vw; -webkit-transform: translateX(-23.79209em); -moz-transform: translateX(-23.79209em); -ms-transform: translateX(-23.79209em); -o-transform: translateX(-23.79209em); transform: translateX(-23.79209em) } .layers .car-5.fade-up { -webkit-transform: translate(-23.79209em, 60px); -moz-transform: translate(-23.79209em, 60px); -ms-transform: translate(-23.79209em, 60px); -o-transform: translate(-23.79209em, 60px); transform: translate(-23.79209em, 60px) } .layers .car-5.fade-up.is-visible { -webkit-transform: translate(-23.79209em); -moz-transform: translate(-23.79209em); -ms-transform: translate(-23.79209em); -o-transform: translate(-23.79209em); transform: translate(-23.79209em) } } @media (max-height: 700px) { .layers { position: relative; overflow: hidden; margin-top: -60px } } .content-page { overflow-x: hidden; padding-top: 75px; font-family: Roboto, sans-serif; font-weight: 300; font-size: 15px; line-height: 25px; color: #1a1a1a } .content-page .intro .title { margin-bottom: 50px } .content-page.mobile { padding-top: 0; font-size: 32px; line-height: 45px } .content-page.mobile .intro .title { margin-bottom: 45px } @media (orientation: portrait) and (max-width: 640px) { .content-page.mobile .intro .title { margin-bottom: 7.03125vw } } @media (orientation: landscape) and (max-width: 1136px) { .content-page.mobile .intro .title { margin-bottom: 3.96127vw } } @media (orientation: portrait) and (max-width: 640px) { .content-page.mobile { font-size: 5vw; line-height: 7.03125vw } } @media (orientation: landscape) and (max-width: 1136px) { .content-page.mobile { font-size: 2.8169vw; line-height: 3.96127vw } } .content-wrapper { margin: 0 auto; padding: 0 20px; max-width: 826px } .content-wrapper__inner { position: relative; padding: 0 60px } .mobile .content-wrapper__inner { padding: 0 } .content-wrapper p { margin-bottom: 30px } .content-wrapper p.big { font-weight: 500; font-size: 20px; line-height: 25px } .mobile .content-wrapper p.big { font-weight: 400; font-size: 37px; line-height: 43px } @media (orientation: portrait) and (max-width: 640px) { .mobile .content-wrapper p.big { font-size: 5.78125vw; line-height: 6.71875vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile .content-wrapper p.big { font-size: 3.25704vw; line-height: 3.78521vw } } .content-wrapper .content-block { position: relative; margin-bottom: 60px; border: 5px solid #fff; padding: 35px 60px } .content-wrapper .content-block .content-heading { margin-top: 0 } .mobile .content-wrapper .content-block .content-heading { margin-top: 0; font-size: 40px; line-height: 40px } @media (orientation: portrait) and (max-width: 640px) { .mobile .content-wrapper .content-block .content-heading { font-size: 6.25vw; line-height: 6.25vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile .content-wrapper .content-block .content-heading { font-size: 3.52113vw; line-height: 3.52113vw } } .mobile .content-wrapper .content-block { margin-top: 70px; margin-bottom: 89px; border: none; padding: 70px 40px; background-color: #fff } @media (orientation: portrait) and (max-width: 640px) { .mobile .content-wrapper .content-block { margin-top: 10.9375vw; margin-bottom: 13.90625vw; padding: 10.9375vw 6.25vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile .content-wrapper .content-block { margin-top: 6.16197vw; margin-bottom: 7.83451vw; padding: 6.16197vw 3.52113vw } } .content-wrapper .content-back-image { position: absolute; z-index: -1 } .content-wrapper .content-heading { margin-top: 55px; margin-bottom: 35px; font-family: Cuprum, sans-serif; font-weight: 700; font-size: 20px; line-height: 25px; color: #1a1a1a } .content-wrapper .content-heading--green { color: #09b34d } .content-wrapper .content-heading--small { margin-bottom: 20px; font-weight: 400; font-size: 18px } .mobile .content-wrapper .content-heading--small { font-weight: 900; font-size: 37px; line-height: 46px } @media (orientation: portrait) and (max-width: 640px) { .mobile .content-wrapper .content-heading--small { font-size: 5.78125vw; line-height: 7.1875vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile .content-wrapper .content-heading--small { font-size: 3.25704vw; line-height: 4.0493vw } } .mobile .content-wrapper .content-heading { margin-top: 60px; margin-bottom: 35px; font-size: 38px } @media (orientation: portrait) and (max-width: 640px) { .mobile .content-wrapper .content-heading { margin-top: 9.375vw; margin-bottom: 5.46875vw; font-size: 5.9375vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile .content-wrapper .content-heading { margin-top: 5.28169vw; margin-bottom: 3.08099vw; font-size: 3.34507vw } } .content-wrapper ul { margin: 0; padding: 0 } .content-wrapper ul li { list-style: none; margin-bottom: 15px } .content-wrapper ol { padding-left: 20px } .content-wrapper ol li { margin-bottom: 12px; font-weight: 700 } .content-wrapper ol li span { font-weight: 300 } .mobile .content-wrapper ol { list-style-position: inside; padding-left: 0 } .content-wrapper .cars-list { margin-bottom: 50px } .content-wrapper .cars-list li { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex } .mobile .content-wrapper .cars-list li span { padding-top: 60px; padding-bottom: 30px; width: 100%; text-align: center } @media (orientation: portrait) and (max-width: 640px) { .mobile .content-wrapper .cars-list li span { padding-top: 9.375vw; padding-bottom: 4.6875vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile .content-wrapper .cars-list li span { padding-top: 5.28169vw; padding-bottom: 2.64085vw } } .content-wrapper .cars-list .image { margin-right: 10px; min-width: 35px } .content-wrapper .cars-list .image img { display: inline-block; vertical-align: middle } .mobile .content-wrapper .cars-list .image img { margin-right: 0; width: 80px } @media (orientation: portrait) and (max-width: 640px) { .mobile .content-wrapper .cars-list .image img { width: 12.5vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile .content-wrapper .cars-list .image img { width: 7.04225vw } } .mobile .content-wrapper .cars-list .image { position: absolute; left: 50%; margin-left: -40px } @media (orientation: portrait) and (max-width: 640px) { .mobile .content-wrapper .cars-list .image { margin-left: -6.25vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile .content-wrapper .cars-list .image { margin-left: -3.52113vw } } .mobile .content-wrapper .cars-list { margin-bottom: 50px } @media (orientation: portrait) and (max-width: 640px) { .mobile .content-wrapper .cars-list { margin-bottom: 7.8125vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile .content-wrapper .cars-list { margin-bottom: 4.40141vw } } .mobile .content-wrapper { padding-right: 36px; padding-left: 36px } @media (orientation: portrait) and (max-width: 640px) { .mobile .content-wrapper { padding-right: 5.625vw; padding-left: 5.625vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile .content-wrapper { padding-right: 3.16901vw; padding-left: 3.16901vw } } .content-share { display: inline-block; margin: 27px 0; border-top: 1px solid rgba(53, 53, 53, .1); border-bottom: 1px solid rgba(53, 53, 53, .1); padding: 18px 16px; width: 226px; font-size: 14px } .content-share a { margin-left: 20px; text-decoration: none } .content-share a:hover svg { fill: #09b34d } .mobile .content-share a:nth-child(2) svg { width: 38px; height: 23px } @media (orientation: portrait) and (max-width: 640px) { .mobile .content-share a:nth-child(2) svg { width: 5.9375vw; height: 3.59375vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile .content-share a:nth-child(2) svg { width: 3.34507vw; height: 2.02465vw } } .mobile .content-share a:nth-child(3) svg { width: 20px; height: 38px } @media (orientation: portrait) and (max-width: 640px) { .mobile .content-share a:nth-child(3) svg { width: 3.125vw; height: 5.9375vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile .content-share a:nth-child(3) svg { width: 1.76056vw; height: 3.34507vw } } .mobile .content-share a:nth-child(3) { margin-right: 98px; margin-left: 98px } @media (orientation: portrait) and (max-width: 640px) { .mobile .content-share a:nth-child(3) { margin-right: 15.3125vw; margin-left: 15.3125vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile .content-share a:nth-child(3) { margin-right: 8.62676vw; margin-left: 8.62676vw } } .mobile .content-share a:nth-child(4) svg { width: 47.5px; height: 28.75px } @media (orientation: portrait) and (max-width: 640px) { .mobile .content-share a:nth-child(4) svg { width: 7.42188vw; height: 4.49219vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile .content-share a:nth-child(4) svg { width: 4.18134vw; height: 2.53081vw } } .mobile .content-share a { margin: 0 } .content-share svg { display: inline-block; vertical-align: middle; -webkit-transition: .2s; -o-transition: .2s; -moz-transition: .2s; transition: .2s } .mobile .content-share span { display: none } .mobile .content-share { margin-bottom: 46px; padding-top: 26px; padding-bottom: 26px; width: 100% } @media (orientation: portrait) and (max-width: 640px) { .mobile .content-share { margin-bottom: 7.1875vw; padding-top: 4.0625vw; padding-bottom: 4.0625vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile .content-share { margin-bottom: 4.0493vw; padding-top: 2.28873vw; padding-bottom: 2.28873vw } } .content-test { margin: 68px auto 50px; border: 5px solid #fff; padding-top: 55px; width: 100%; height: 383px; max-width: 1001px; text-align: center; background: url(../images/content/sochi-image.png) bottom no-repeat } .content-test .pre-title { font-family: Cuprum, sans-serif; font-weight: 400; font-size: 16px; letter-spacing: 5px; text-transform: uppercase } .mobile .content-test .pre-title { margin-bottom: 3px; font-size: 25px; line-height: 32px; letter-spacing: 8px; color: #41494a } @media (orientation: portrait) and (max-width: 640px) { .mobile .content-test .pre-title { margin-bottom: .46875vw; font-size: 3.90625vw; line-height: 5vw; letter-spacing: 1.25vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile .content-test .pre-title { margin-bottom: .26408vw; font-size: 2.2007vw; line-height: 2.8169vw; letter-spacing: .70423vw } } .content-test .title { margin-bottom: 30px; font-family: PF Din Text Cond Pro, sans-serif; font-weight: 500; font-size: 55px; line-height: 48px; color: #41494a } .mobile .content-test .title { margin-bottom: 30px; font-size: 70px; line-height: 59px } @media (orientation: portrait) and (max-width: 640px) { .mobile .content-test .title { margin-bottom: 4.6875vw; font-size: 10.9375vw; line-height: 9.21875vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile .content-test .title { margin-bottom: 2.64085vw; font-size: 6.16197vw; line-height: 5.19366vw } } .content-test .button { width: 138px } .mobile .content-test .button { padding: 24px; width: 250px } @media (orientation: portrait) and (max-width: 640px) { .mobile .content-test .button { padding: 3.75vw; width: 39.0625vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile .content-test .button { padding: 2.11268vw; width: 22.00704vw } } .mobile .content-test { margin-top: 91px; margin-bottom: 62px; border: none; padding-top: 50px; height: 693px; max-width: none; background: url(../images/content/sochi-image-mob.png) 50% 100%/100% auto no-repeat #fff } @media (orientation: portrait) and (max-width: 640px) { .mobile .content-test { margin-top: 14.21875vw; margin-bottom: 9.6875vw; padding-top: 7.8125vw; height: 108.28125vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile .content-test { margin-top: 8.01056vw; margin-bottom: 5.45775vw; padding-top: 4.40141vw; height: 61.00352vw } } .about-steps { position: relative; margin: 0 auto; max-width: 900px } .about-steps__text { font-size: 0 } .about-steps__text .number { display: inline-block; vertical-align: top; font-weight: 900; font-size: 99px; line-height: 87px; color: #c6cdde } .mobile .about-steps__text .number { display: block; text-align: center } @media (orientation: portrait) and (max-width: 640px) { .mobile .about-steps__text .number { font-size: 15.46875vw; line-height: 13.59375vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile .about-steps__text .number { font-size: 8.71479vw; line-height: 7.65845vw } } .about-steps__text .text { display: inline-block; vertical-align: top; padding-left: 15px; width: 60%; font-weight: 300; font-size: 21px; line-height: 32px } .mobile .about-steps__text .text { padding: 17px 0 25px; width: 100%; font-size: 37px; line-height: 44px; text-align: center } @media (orientation: portrait) and (max-width: 640px) { .mobile .about-steps__text .text { padding: 2.65625vw 0 3.90625vw; font-size: 5.78125vw; line-height: 6.875vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile .about-steps__text .text { padding: 1.49648vw 0 2.2007vw; font-size: 3.25704vw; line-height: 3.87324vw } } .about-steps__image { pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } @media (orientation: portrait) and (max-width: 640px) { .mobile .about-steps__image .step-3 { margin-left: -5.9375vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile .about-steps__image .step-3 { margin-left: -3.34507vw } } .mobile .about-steps__image { text-align: center } .mobile .about-steps__image img { display: block; margin: 0 auto; max-width: 100% } .about-steps .row { margin-bottom: 20px } .about-steps .step-2, .about-steps .step-4 { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex } .about-steps .line { position: absolute; left: -17px; top: -68px; width: 580px; height: 1865px; pointer-events: none; -ms-touch-action: none; touch-action: none } .about-steps .line .inner { position: absolute; left: 0; top: 0; overflow: hidden; width: 100%; height: 0; -webkit-transition: height 5s linear .5s; -o-transition: height 5s .5s linear; -moz-transition: height 5s .5s linear; transition: height 5s linear .5s } .about-steps .line svg { width: 580px; height: 1865px } .mobile .about-steps .line svg { width: 618px; height: 2342px } @media (orientation: portrait) and (max-width: 640px) { .mobile .about-steps .line svg { width: 96.5625vw; height: 365.9375vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile .about-steps .line svg { width: 54.40141vw; height: 206.16197vw } } .about-steps .line.visible .inner { height: 100% } .mobile .about-steps .line { left: 14px; top: 44px; z-index: -1 } @media (orientation: portrait) and (min-width: 758px) and (max-width: 778px) { .mobile .about-steps .line { left: 10.02604vw } } @media (orientation: portrait) and (max-width: 640px) { .mobile .about-steps .line { left: 2.1875vw; top: 6.875vw } } @media (orientation: portrait) and (min-width: 641px) { .mobile .about-steps .line { left: 50%; -webkit-transform: translateX(-51%); -moz-transform: translateX(-51%); -ms-transform: translateX(-51%); -o-transform: translateX(-51%); transform: translateX(-51%) } } @media (orientation: landscape) { .mobile .about-steps .line { left: 50%; width: auto; height: auto; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%) } } @media (orientation: landscape) and (max-width: 1136px) { .mobile .about-steps .line { top: 3.87324vw } } .about-steps .desktop-only .step-1 .about-steps__text { margin-top: -26px } .about-steps .desktop-only .step-1 .about-steps__text .number { margin-top: 1px; margin-left: -2px; letter-spacing: -7px } .about-steps .desktop-only .step-1 .about-steps__text .text { padding-left: 19px; width: 78% } .about-steps .desktop-only .step-1 .about-steps__image { margin-left: -93px } .about-steps .desktop-only .step-2 .about-steps__text { margin-top: 30px } .about-steps .desktop-only .step-2 .about-steps__text .number { margin-top: 3px; margin-left: -2px; letter-spacing: -3px } .about-steps .desktop-only .step-2 .about-steps__text .text { margin-top: 25px; width: 75% } .about-steps .desktop-only .step-2 .about-steps__image { margin-top: -62px; margin-left: -61px } .about-steps .desktop-only .step-3 .about-steps__text { margin-top: -35px } .about-steps .desktop-only .step-3 .about-steps__text .number { position: relative; z-index: 1; margin-left: -3px; margin-top: 7px; letter-spacing: -4px } .about-steps .desktop-only .step-3 .about-steps__text .number:before { content: ""; position: absolute; left: 10px; top: 18px; right: 13px; bottom: 16px; z-index: -1; background-color: #f0f0f0 } .about-steps .desktop-only .step-3 .about-steps__text .text { margin-top: 9px; padding-left: 17px; width: 70% } .about-steps .desktop-only .step-3 .about-steps__image { margin-top: 45px; margin-left: -137px } .about-steps .desktop-only .step-4 .about-steps__text { margin-top: 125px } .about-steps .desktop-only .step-4 .about-steps__text .number { letter-spacing: -5px } .about-steps .desktop-only .step-4 .about-steps__text .text { margin-top: 20px; width: 70% } .about-steps .desktop-only .step-4 .about-steps__image { margin-top: 5px; margin-left: -29px } .mobile .about-steps { padding-right: 38px; padding-left: 38px } .mobile .about-steps div.step-1 { margin-top: 40px !important } .mobile .about-steps div.step-1 .about-steps__image { margin: 0 auto; max-width: 100% } @media (orientation: portrait) and (max-width: 414px) { .mobile .about-steps div.step-1 .about-steps__image { max-width: 81% } } @media (orientation: portrait) and (max-width: 375px) { .mobile .about-steps div.step-1 .about-steps__image { max-width: 79% } } @media (orientation: portrait) and (max-width: 320px) { .mobile .about-steps div.step-1 .about-steps__image { max-width: 74% } } @media (orientation: landscape) and (max-width: 736px) { .mobile .about-steps div.step-1 .about-steps__image { max-width: 60% } } @media (orientation: landscape) and (max-width: 667px) { .mobile .about-steps div.step-1 .about-steps__image { max-width: 59% } } @media (orientation: landscape) and (max-width: 568px) { .mobile .about-steps div.step-1 .about-steps__image { max-width: 63% } } @media (orientation: landscape) and (max-width: 480px) { .mobile .about-steps div.step-1 .about-steps__image { max-width: 56% } } .mobile .about-steps div.step-2 { margin-top: 40px !important } .mobile .about-steps div.step-2 .about-steps__image { margin: 0 auto; max-width: 100% } .mobile .about-steps div.step-2 .about-steps__text .number { position: relative; z-index: 1 } .mobile .about-steps div.step-2 .about-steps__text .number:before { content: ""; position: absolute; left: 42%; right: 45%; top: 0; bottom: 0; z-index: -1; background-color: #f0f0f0 } .mobile .about-steps div.step-2 .about-steps__text .text { margin-top: -15px } @media (orientation: portrait) and (max-width: 640px) { .mobile .about-steps div.step-2 .about-steps__text .text { margin-top: -2.34375vw !important } } @media (orientation: portrait) and (max-width: 414px) { .mobile .about-steps div.step-2 .about-steps__image { max-width: 71% } } @media (orientation: portrait) and (max-width: 375px) { .mobile .about-steps div.step-2 .about-steps__image { max-width: 71% } } @media (orientation: portrait) and (max-width: 320px) { .mobile .about-steps div.step-2 .about-steps__image { max-width: 67% } } @media (orientation: landscape) { .mobile .about-steps div.step-2 .about-steps__text .number:before { left: 44%; right: 44% } } @media (orientation: landscape) and (max-width: 1136px) { .mobile .about-steps div.step-2 .about-steps__text .text { margin-top: -1.32042vw !important } } @media (orientation: landscape) and (max-width: 736px) { .mobile .about-steps div.step-2 .about-steps__image { max-width: 66% } } @media (orientation: landscape) and (max-width: 667px) { .mobile .about-steps div.step-2 .about-steps__image { max-width: 59% } } @media (orientation: landscape) and (max-width: 568px) { .mobile .about-steps div.step-2 .about-steps__image { max-width: 48% } } @media (orientation: landscape) and (max-width: 480px) { .mobile .about-steps div.step-2 .about-steps__image { max-width: 39% } } .mobile .about-steps div.step-3 { margin-top: 40px !important } .mobile .about-steps div.step-3 .about-steps__image { margin: 0 auto; max-width: 100% } .mobile .about-steps div.step-3 .about-steps__text .number { position: relative; z-index: 1 } .mobile .about-steps div.step-3 .about-steps__text .number:before { content: ""; position: absolute; left: 42%; right: 42%; top: 0; bottom: 0; z-index: -1; background-color: #f0f0f0 } @media (orientation: landscape) { .mobile .about-steps div.step-3 .about-steps__text .number:before { left: 44%; right: 44% } } @media (orientation: landscape) and (max-width: 736px) { .mobile .about-steps div.step-3 .about-steps__image { max-width: 60% } } @media (orientation: landscape) and (max-width: 667px) { .mobile .about-steps div.step-3 .about-steps__image { max-width: 60% } } @media (orientation: landscape) and (max-width: 568px) { .mobile .about-steps div.step-3 .about-steps__image { max-width: 60% } } @media (orientation: landscape) and (max-width: 480px) { .mobile .about-steps div.step-3 .about-steps__image { max-width: 60% } } .mobile .about-steps div.step-4 { margin-top: 40px !important } .mobile .about-steps div.step-4 .about-steps__image { margin: 0 auto; max-width: 100% } @media (orientation: portrait) { .mobile .about-steps div.step-4 .about-steps__image { max-width: 60% } } @media (orientation: landscape) { .mobile .about-steps div.step-4 .about-steps__image { max-width: 60% } } @media (orientation: portrait) and (max-width: 640px) { .mobile .about-steps { padding-right: 5.9375vw; padding-left: 5.9375vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile .about-steps { padding-right: 3.34507vw; padding-left: 3.34507vw } } .about-features { margin: 30px auto 0; padding: 30px 0 15px; text-align: center; background-color: #fff } .about-features .content-heading { margin-top: 0; margin-bottom: 15px } .about-features .row { margin: 0 auto; max-width: 770px } .mobile .about-features .row { display: block } .about-features .column { padding: 0 35px; width: 50% } .mobile .about-features .column { width: 100% } .mobile .about-features .column img { display: block; margin: 0 auto; max-width: 100% } .mobile .about-features .feature-1 { padding-top: 20px } @media (orientation: portrait) { .mobile .about-features .feature-1 img { max-width: 70% } } @media (orientation: portrait) and (max-width: 640px) { .mobile .about-features .feature-1 { padding-top: 3.125vw } } @media (orientation: landscape) { .mobile .about-features .feature-1 img { max-width: 50% } } @media (orientation: landscape) and (max-width: 1136px) { .mobile .about-features .feature-1 { padding-top: 1.76056vw } } .mobile .about-features .feature-2 { padding-top: 60px } @media (orientation: portrait) { .mobile .about-features .feature-2 img { max-width: 70% } } @media (orientation: portrait) and (max-width: 640px) { .mobile .about-features .feature-2 { padding-top: 9.375vw } } @media (orientation: landscape) { .mobile .about-features .feature-2 img { max-width: 50% } } @media (orientation: landscape) and (max-width: 1136px) { .mobile .about-features .feature-2 { padding-top: 5.28169vw } } .about-features img { position: relative } .mobile .about-features { padding: 10px 0 } @media (orientation: portrait) and (max-width: 640px) { .mobile .about-features { padding: 1.5625vw 0 } } @media (orientation: landscape) and (max-width: 1136px) { .mobile .about-features { padding: .88028vw 0 } } .answers-indicator { position: fixed; left: 14px; top: 50%; z-index: 1000; margin-top: -78.5px; opacity: 0; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); transform: translateZ(0); -webkit-transition: opacity .5s; -o-transition: opacity .5s; -moz-transition: opacity .5s; transition: opacity .5s } .answers-indicator .answer { position: relative; margin: 10px; width: 14px; height: 11px } .answers-indicator .answer .heart, .answers-indicator .answer .heart-border { position: absolute; left: 0; bottom: 0; overflow: hidden } .answers-indicator .answer .heart-border svg, .answers-indicator .answer .heart svg { position: absolute; left: 0; bottom: 0; width: 14px; height: 11px } .mobile .answers-indicator .answer .heart-border svg, .mobile .answers-indicator .answer .heart svg { width: 30px; height: 23px } @media (max-width: 1136px) { .mobile .answers-indicator .answer .heart-border svg, .mobile .answers-indicator .answer .heart svg { width: 2.64085vw; height: 2.02465vw } } .answers-indicator .answer .heart-border { z-index: 1; width: 100%; height: 100% } .answers-indicator .answer .heart-border svg { stroke: #959595 } .answers-indicator .answer .heart { z-index: 2; width: 100%; height: 0 } .answers-indicator .answer .heart svg { -webkit-transition: fill .3s; -o-transition: fill .3s; -moz-transition: fill .3s; transition: fill .3s } .answers-indicator .answer.is-correct .heart { fill: #0cb14b } .answers-indicator .answer.is-wrong .heart { fill: #4a4e55 } .mobile .answers-indicator .answer { margin: 22px 0; width: 30px; height: 23px } @media (max-width: 1136px) { .mobile .answers-indicator .answer { margin: 1.93662vw 0; width: 2.64085vw; height: 2.02465vw } } .answers-indicator.is-visible { opacity: 1 } .mobile .answers-indicator { left: 20px; margin-top: -168.5px; -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s } @media (max-width: 1136px) { .mobile .answers-indicator { left: 1.76056vw; margin-top: -14.83275vw } } .question { position: absolute; left: 0; display: none; width: 100% } .question:before { content: ""; position: absolute; left: 50%; top: 50%; z-index: 8; width: 1280px; height: 704px; background: url(../images/light.png) 50% 50%/contain no-repeat; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%) } @media (max-width: 1366px) { .question:before { width: 93.70425vw; height: 51.53734vw } } .question-content { position: absolute; left: 50%; top: 0; z-index: 20; width: 421px } .question-content-inner { margin-left: -210.5px; width: 421px } .question .step { display: none; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); transform: translateZ(0) } .question .step .button { display: block; margin: 0 auto } .question .step.is-active { display: block } .question .step-1 .text { margin: 0 auto; width: 345px; font-family: PingHei; font-weight: 300; font-size: 20px; line-height: 25px; text-align: center; color: #181818 } .question .step-1 .button { margin-top: 45px; width: 180px } .question .step-2 .number { font-weight: 400; font-size: 18px; line-height: 18px } .question .step-2 .number, .question .step-2 .text { font-family: Cuprum, sans-serif; text-align: center; color: #41494a } .question .step-2 .text { margin-top: 16px; font-weight: 700; font-size: 29px; line-height: 32px } .question .step-2 .text small { display: block; font-size: 17px; line-height: 21px } .question .step-2 .text small + br { display: none } .question .step-2 .options { margin-top: 15px } .question .step-2 .option { position: relative; display: block; outline: none; border: none; padding: 23px 29px 21px 54px; font-family: Roboto, sans-serif; font-weight: 300; font-size: 14px; line-height: 19px; text-align: left; color: #181818; background: none; -webkit-transition: background-color .3s; -o-transition: background-color .3s; -moz-transition: background-color .3s; transition: background-color .3s; will-change: background-color } .question .step-2 .option:before { border: 1px solid rgba(65, 73, 74, .6); border-radius: 50%; width: 26px; height: 26px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: border-color .3s; -o-transition: border-color .3s; -moz-transition: border-color .3s; transition: border-color .3s } .question .step-2 .option:after, .question .step-2 .option:before { content: ""; position: absolute; left: 29px; top: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50% } .question .step-2 .option:after { border-radius: 50%; width: 14px; height: 14px; background-color: #41494a; opacity: 0; -webkit-transform: translate(-50%, -50%) scale(0); -moz-transform: translate(-50%, -50%) scale(0); -ms-transform: translate(-50%, -50%) scale(0); -o-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); -webkit-transition: background-color .3s, opacity .3s, -webkit-transform .3s; transition: background-color .3s, opacity .3s, -webkit-transform .3s; -o-transition: background-color .3s, opacity .3s, -o-transform .3s; -moz-transition: background-color .3s, opacity .3s, transform .3s, -moz-transform .3s; transition: background-color .3s, opacity .3s, transform .3s; transition: background-color .3s, opacity .3s, transform .3s, -webkit-transform .3s, -moz-transform .3s, -o-transform .3s } .question .step-2 .option:hover { -webkit-box-shadow: 2px 3px 13px rgba(0, 0, 0, .03); -moz-box-shadow: 2px 3px 13px rgba(0, 0, 0, .03); box-shadow: 2px 3px 13px rgba(0, 0, 0, .03); background-color: #fff } .question .step-2 .option.is-selected:before { border-color: #0cb14b } .question .step-2 .option.is-selected:after { background-color: #0cb14b; opacity: 1; -webkit-transform: translate(-50%, -50%) scale(1); -moz-transform: translate(-50%, -50%) scale(1); -ms-transform: translate(-50%, -50%) scale(1); -o-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1) } .question .step-2 .button { margin-top: 14px; width: 138px } .question .step-3 { position: relative } .question .step-3 .indicator { position: absolute; left: 50%; top: -50px; margin-left: -21px; width: 42px; height: 33px } .question .step-3 .indicator .heart, .question .step-3 .indicator .heart-border { position: absolute; left: 0; bottom: 0; overflow: hidden } .question .step-3 .indicator .heart-border svg, .question .step-3 .indicator .heart svg { position: absolute; left: 0; bottom: 0; width: 42px; height: 33px } .question .step-3 .indicator .heart-border { z-index: 1; width: 100%; height: 100% } .question .step-3 .indicator .heart-border svg { stroke: #aeaeae } .question .step-3 .indicator .heart { z-index: 2; width: 100%; height: 0 } .question .step-3 .indicator .heart svg { -webkit-transition: fill .3s; -o-transition: fill .3s; -moz-transition: fill .3s; transition: fill .3s } .question .step-3 .indicator.is-correct .heart { fill: #0cb14b } .question .step-3 .indicator.is-wrong .heart { fill: #4a4e55 } .question .step-3 .text { font-family: Roboto, sans-serif; font-weight: 300; font-size: 16px; line-height: 25px; text-align: center; color: #181818 } .question .step-3 .button { margin-top: 45px; padding-right: 0; padding-left: 0; width: 174px } .mobile .question { position: fixed; left: 0; top: 0 !important; z-index: 1000; width: 100%; height: 100%; background-color: #f5f5f5 } .mobile .question:before { display: none } .mobile .question-content { position: static; left: auto; top: auto; z-index: 1; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 0 !important; width: auto; height: 100% } .mobile .question-content-inner { overflow: scroll; margin: 0; width: auto; max-height: 100% } .mobile .question .step-1 .text { padding: 0 100px; width: auto; font-size: 26px; line-height: 45px } @media (max-width: 1136px) { .mobile .question .step-1 .text { padding: 0 8.80282vw; font-size: 2.28873vw; line-height: 3.96127vw } } .mobile .question .step-1 .button { margin-top: 50px; width: 420px } @media (max-width: 1136px) { .mobile .question .step-1 .button { margin-top: 4.40141vw; width: 36.97183vw } } .mobile .question .step-2 .number { display: none } .mobile .question .step-2 .text { margin-top: 0; padding: 30px 38px 0; font-size: 40px; line-height: 40px; text-align: left } .mobile .question .step-2 .text br { display: none } @media (max-width: 1136px) { .mobile .question .step-2 .text { padding: 2.64085vw 3.34507vw 0; font-size: 3.52113vw; line-height: 3.52113vw } } .mobile .question .step-2 .options { margin-top: 14px; padding-bottom: 30px } @media (max-width: 1136px) { .mobile .question .step-2 .options { margin-top: 1.23239vw; padding-bottom: 2.64085vw } } .mobile .question .step-2 .option { border-bottom: 1px dashed #959595; padding: 20px 80px 20px 108px; width: 100%; font-size: 30px; line-height: 34px } .mobile .question .step-2 .option:before { left: 63px; border: none; width: 45px; height: 45px; background-color: #e5e5e5 } @media (max-width: 1136px) { .mobile .question .step-2 .option:before { left: 5.54577vw; width: 3.96127vw; height: 3.96127vw } } .mobile .question .step-2 .option:after { left: 63px; width: 19px; height: 19px } @media (max-width: 1136px) { .mobile .question .step-2 .option:after { left: 5.54577vw; width: 1.67254vw; height: 1.67254vw } } .mobile .question .step-2 .option:hover { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; background-color: transparent } .mobile .question .step-2 .option:last-child { border-bottom: none } @media (max-width: 1136px) { .mobile .question .step-2 .option { padding: 1.76056vw 7.04225vw 1.76056vw 9.50704vw; font-size: 2.64085vw; line-height: 2.99296vw } } .mobile .question .step-2 .button { display: none } .mobile .question .step-3 { position: relative } .mobile .question .step-3 .indicator { position: relative; left: auto; top: auto; margin: 0 auto 25px; width: 55px; height: 50px } .mobile .question .step-3 .indicator .heart-border svg, .mobile .question .step-3 .indicator .heart svg { width: 55px; height: 50px } @media (max-width: 1136px) { .mobile .question .step-3 .indicator .heart-border svg, .mobile .question .step-3 .indicator .heart svg { width: 4.84155vw; height: 4.40141vw } } @media (max-width: 1136px) { .mobile .question .step-3 .indicator { margin-bottom: 2.2007vw; width: 4.84155vw; height: 4.40141vw } } .mobile .question .step-3 .text { padding: 0 100px; width: auto; font-size: 26px; line-height: 45px } @media (max-width: 1136px) { .mobile .question .step-3 .text { padding: 0 8.80282vw; font-size: 2.28873vw; line-height: 3.96127vw } } .mobile .question .step-3 .button { margin-top: 50px; width: 420px } @media (max-width: 1136px) { .mobile .question .step-3 .button { margin-top: 4.40141vw; width: 36.97183vw } } .question-1 { top: 1610px } .question-1 .question-content { left: 75% } @media (max-width: 1366px) { .question-1 { top: 117.86237vw } } .question-2 { top: 2550px } .question-2 .question-content { left: 25% } @media (max-width: 1366px) { .question-2 { top: 186.67643vw } } .question-3 { top: 3325px } .question-3 .question-content { left: 75% } @media (max-width: 1366px) { .question-3 { top: 243.41142vw } } .question-4 { top: 4450px } .question-4 .question-content { left: 25% } @media (max-width: 1366px) { .question-4 { top: 325.76867vw } } .question-5 { top: 5380px } .question-5 .question-content { left: 75% } @media (max-width: 1366px) { .question-5 { top: 393.85066vw } } .question-6 { top: 6270px } .question-6 .question-content { left: 25% } @media (max-width: 1366px) { .question-6 { top: 459.00439vw } } .question-7 { top: 7200px } .question-7 .question-content { left: 75% } @media (max-width: 1366px) { .question-7 { top: 527.08638vw } } .footer { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; margin-top: 50px; border-top: 1px solid rgba(0, 0, 0, .1) } .footer .column { -webkit-box-flex: 1; -webkit-flex-grow: 1; -moz-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; border-left: 1px solid hsla(0, 0%, 9%, .1); padding: 10px 15px } .footer .column:first-child { border-left: none } .mobile .footer .column { border: none; padding: 0 } .footer .team { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center } .footer .team .item { padding: 0 13px; font-family: 'PingHei'; font-size: 12px; line-height: 12px; color: #292929 } .mobile .footer .team .item { padding: 0; width: 100%; font-size: 24px; line-height: 55px; color: #5a5a5a } @media (orientation: portrait) and (max-width: 640px) { .mobile .footer .team .item { font-size: 3.75vw; line-height: 8.59375vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile .footer .team .item { font-size: 2.11268vw; line-height: 4.84155vw } } .mobile .footer .team { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-ordinal-group: 3; -webkit-order: 2; -moz-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; border-bottom: 1px solid rgba(0, 0, 0, .2); padding: 30px 0; width: 100% } @media (orientation: portrait) and (max-width: 640px) { .mobile .footer .team { padding: 4.6875vw 0 } } @media (orientation: landscape) and (max-width: 1136px) { .mobile .footer .team { padding: 2.64085vw 0 } } .footer .share { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center } .footer .share .label { margin-right: 10px; font-family: 'PingHei'; font-size: 12px; line-height: 12px; color: #292929 } .mobile .footer .share .label { margin-right: 56px; font-size: 27px; line-height: 18px; white-space: nowrap; color: #5a5a5a } @media (orientation: portrait) and (max-width: 640px) { .mobile .footer .share .label { margin-right: 8.75vw; font-size: 4.21875vw; line-height: 2.8125vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile .footer .share .label { margin-right: 4.92958vw; font-size: 2.37676vw; line-height: 1.58451vw } } .footer .share .links { font-size: 0; line-height: 0; white-space: nowrap } .footer .share .link { position: relative; display: inline-block; vertical-align: middle; margin-right: 10px; outline: none; width: 26px; height: 26px; -webkit-transition: opacity .3s; -o-transition: opacity .3s; -moz-transition: opacity .3s; transition: opacity .3s } .footer .share .link svg { position: absolute; left: 50%; top: 50%; display: block } .footer .share .link:hover { opacity: .75 } .footer .share .link[href="#vk"] svg { margin-top: -5.5px; margin-left: -9px; width: 18px; height: 11px } .mobile .footer .share .link[href="#vk"] svg { margin-top: -11.5px; margin-left: -19px; width: 38px; height: 23px } @media (orientation: portrait) and (max-width: 640px) { .mobile .footer .share .link[href="#vk"] svg { margin-top: -1.79687vw; margin-left: -2.96875vw; width: 5.9375vw; height: 3.59375vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile .footer .share .link[href="#vk"] svg { margin-top: -1.01232vw; margin-left: -1.67254vw; width: 3.34507vw; height: 2.02465vw } } .footer .share .link[href="#fb"] svg { margin-top: -8px; margin-left: -4.5px; width: 9px; height: 16px } .mobile .footer .share .link[href="#fb"] svg { margin-top: -19px; margin-left: -10px; width: 20px; height: 38px } @media (orientation: portrait) and (max-width: 640px) { .mobile .footer .share .link[href="#fb"] svg { margin-top: -2.96875vw; margin-left: -1.5625vw; width: 3.125vw; height: 5.9375vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile .footer .share .link[href="#fb"] svg { margin-top: -1.67254vw; margin-left: -.88028vw; width: 1.76056vw; height: 3.34507vw } } .footer .share .link[href="#tw"] svg { margin-top: -7px; margin-left: -8.5px; width: 17px; height: 14px } .mobile .footer .share .link[href="#tw"] svg { margin-top: -14.5px; margin-left: -16.5px; width: 33px; height: 29px } @media (orientation: portrait) and (max-width: 640px) { .mobile .footer .share .link[href="#tw"] svg { margin-top: -2.26562vw; margin-left: -2.57812vw; width: 5.15625vw; height: 4.53125vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile .footer .share .link[href="#tw"] svg { margin-top: -1.27641vw; margin-left: -1.45246vw; width: 2.90493vw; height: 2.55282vw } } .footer .share .link:last-child { margin-right: 0 } .mobile .footer .share .link:last-child { border: none } .mobile .footer .share .link { border-right: 1px solid rgba(0, 0, 0, .35); width: 78px; height: 42px } @media (orientation: portrait) and (max-width: 640px) { .mobile .footer .share .link { width: 12.1875vw; height: 6.5625vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile .footer .share .link { width: 6.8662vw; height: 3.69718vw } } .mobile .footer .share { -webkit-box-pack: start; -webkit-justify-content: flex-start; -moz-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-ordinal-group: 2; -webkit-order: 1; -moz-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; border-top: 1px solid rgba(0, 0, 0, .2); border-bottom: 1px solid rgba(0, 0, 0, .2); padding: 32px 0; width: 100% } @media (orientation: portrait) and (max-width: 640px) { .mobile .footer .share { padding: 5vw 0 } } @media (orientation: landscape) and (max-width: 1136px) { .mobile .footer .share { padding: 2.8169vw 0 } } .footer .copyright { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; font-family: 'PingHei'; font-size: 12px; line-height: 12px; color: rgba(41, 41, 41, .8) } .mobile .footer .copyright { -webkit-box-pack: start; -webkit-justify-content: flex-start; -moz-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-ordinal-group: 4; -webkit-order: 3; -moz-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; padding-top: 40px; padding-bottom: 30px; width: 100%; font-size: 22px; line-height: 28px; color: #5a5a5a } @media (orientation: portrait) and (max-width: 640px) { .mobile .footer .copyright { padding-top: 6.25vw; padding-bottom: 4.6875vw; font-size: 3.4375vw; line-height: 4.375vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile .footer .copyright { padding-top: 3.52113vw; padding-bottom: 2.64085vw; font-size: 1.93662vw; line-height: 2.46479vw } } .mobile .footer { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border: none; padding-right: 36px; padding-left: 36px } @media (orientation: portrait) and (max-width: 640px) { .mobile .footer { padding-right: 5.625vw; padding-left: 5.625vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile .footer { padding-right: 3.16901vw; padding-left: 3.16901vw } } .footer-index { position: fixed; left: 23px; bottom: 27px; z-index: 1000 } .footer-index .info { position: absolute; left: 0; bottom: 0 } .footer-index .info .icon { border: 1px solid rgba(0, 0, 0, .2); padding: 3.5px 0; width: 26px; height: 26px; font-family: 'PingHei'; font-weight: 500; font-size: 17px; line-height: 17px; text-align: center; color: #000; cursor: pointer; -webkit-transition: border-color .3s, color .3s; -o-transition: border-color .3s, color .3s; -moz-transition: border-color .3s, color .3s; transition: border-color .3s, color .3s } .footer-index .info .icon:before { content: "i" } .footer-index .info .text { position: absolute; left: 0; bottom: 37px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; padding: 14px 16px 14px 14px; font-family: 'PingHei'; font-size: 16px; line-height: 20px; white-space: nowrap; color: #292929; background-color: #fff; opacity: 0; visibility: hidden; -webkit-transition: opacity .3s, visibility .3s; -o-transition: opacity .3s, visibility .3s; -moz-transition: opacity .3s, visibility .3s; transition: opacity .3s, visibility .3s } .footer-index .info .text:before { content: ""; position: absolute; left: 0; bottom: -11px; width: 100%; height: 11px } .footer-index .info .text:after { border-style: solid; border-width: 6px 6.5px 0; border-color: #fff transparent transparent; width: 0; height: 0; content: ""; position: absolute; left: 7px; top: 100%; margin-top: -1px } .footer-index .info:hover .icon { border-color: #fff; color: #fff } .footer-index .info:hover .text { opacity: 1; visibility: visible } .footer-index .share { position: absolute; left: 46px; bottom: 0; padding: 6px; height: 26px } .footer-index .share .label { display: block;width: 32px; border-bottom: 1px dotted rgba(0, 0, 0, .5); font-family: 'PingHei'; font-size: 16px; line-height: 14px; color: #181818; opacity: 1; visibility: visible } .footer-index .share .label, .footer-index .share .links { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: opacity .3s, visibility .3s; -o-transition: opacity .3s, visibility .3s; -moz-transition: opacity .3s, visibility .3s; transition: opacity .3s, visibility .3s } .footer-index .share .links { position: absolute; left: 0; bottom: 0; font-size: 0; line-height: 0; white-space: nowrap; opacity: 0; visibility: hidden } .footer-index .share .link { position: relative; display: inline-block; vertical-align: middle; margin-right: 10px; outline: none; width: 26px; height: 26px; -webkit-transition: opacity .3s; -o-transition: opacity .3s; -moz-transition: opacity .3s; transition: opacity .3s } .footer-index .share .link svg { position: absolute; left: 50%; top: 50%; display: block } .footer-index .share .link i { position: absolute; left: 50%; top: 50%; display: block } .footer-index .share .link:hover { opacity: .75 } .footer-index .share .link[href="#vk"] svg { margin-top: -5.5px; margin-left: -9px; width: 18px; height: 11px } .footer-index .share .link[href="#fb"] svg { margin-top: -8px; margin-left: -4.5px; width: 9px; height: 16px } .footer-index .share .link[href="#tw"] svg { margin-top: -7px; margin-left: -8.5px; width: 17px; height: 14px } .footer-index .share .link:last-child { margin-right: 0 } /*.footer-index .share:hover .label { opacity: 0; visibility: hidden }*/ /*.footer-index .share:hover .links { opacity: 1; visibility: visible }*/ .interview-heading { position: absolute; left: 0; top: 0; z-index: -1; width: 100%; height: 480px; background: url(../images/content/interview-heading-back.png) left 53% bottom -71px no-repeat #fff } .mobile .interview-heading { height: 813px; background: url(../images/content/interview-heading-back.png) left 50% bottom -71px no-repeat #fff } @media (max-width: 640px) { .mobile .interview-heading { height: 127.03125vw; background-position: left 50% bottom -11.09375vw } } @media (orientation: portrait) and (max-width: 600px) { .mobile .interview-heading { height: 127.66667vw } } @media (orientation: portrait) and (max-width: 560px) { .mobile .interview-heading { height: 130.89286vw } } @media (orientation: portrait) and (max-width: 520px) { .mobile .interview-heading { height: 134.61538vw } } @media (orientation: portrait) and (max-width: 480px) { .mobile .interview-heading { height: 138.75vw } } @media (orientation: portrait) and (max-width: 440px) { .mobile .interview-heading { height: 143.86364vw } } @media (orientation: portrait) and (max-width: 400px) { .mobile .interview-heading { height: 150vw } } @media (orientation: portrait) and (max-width: 360px) { .mobile .interview-heading { height: 157.22222vw } } @media (orientation: portrait) and (max-width: 320px) { .mobile .interview-heading { height: 166.5625vw } } @media (orientation: landscape) and (min-width: 641px) { .mobile .interview-heading { display: none } } @media (orientation: landscape) and (max-width: 640px) { .mobile .interview-heading { height: 90.625vw } } @media (orientation: landscape) and (max-width: 600px) { .mobile .interview-heading { height: 93.33333vw } } @media (orientation: landscape) and (max-width: 560px) { .mobile .interview-heading { height: 96.42857vw } } @media (orientation: landscape) and (max-width: 520px) { .mobile .interview-heading { height: 100vw } } @media (orientation: landscape) and (max-width: 480px) { .mobile .interview-heading { height: 104.16667vw } } @media (orientation: landscape) and (max-width: 440px) { .mobile .interview-heading { height: 109.09091vw } } @media (orientation: landscape) and (max-width: 400px) { .mobile .interview-heading { height: 115vw } } @media (orientation: landscape) and (max-width: 360px) { .mobile .interview-heading { height: 122.22222vw } } @media (orientation: landscape) and (max-width: 320px) { .mobile .interview-heading { height: 131.25vw } } @media (orientation: landscape) and (min-width: 641px) { .page-interview.mobile .intro { position: relative; background-color: #fff } .page-interview.mobile .intro .interviewer { margin-bottom: 4.40141vw; padding-bottom: 4.40141vw } .page-interview.mobile .intro:after { content: ""; position: absolute; left: 0; top: 100%; width: 100%; height: 15.625vw; background: url(../images/content/interview-heading-back.png) 50% 0/auto 100% no-repeat } } .content-wrapper p.before-blockquote { position: relative; margin-bottom: 15.625vw } .content-wrapper p.before-blockquote .tree-4 { position: absolute; right: 5vw; bottom: -10.46875vw; z-index: -1; display: none } @media (max-width: 640px) { .content-wrapper p.before-blockquote .tree-4 { display: block; width: 20vw } } .content-wrapper p.before-blockquote .tree-5 { position: absolute; right: -2.65625vw; bottom: -27.03125vw; z-index: -1; display: none } @media (max-width: 640px) { .content-wrapper p.before-blockquote .tree-5 { display: block; width: 21.71875vw } } .content-wrapper p.before-blockquote .tree-6 { position: absolute; right: 1.875vw; bottom: -25.3125vw; z-index: -1; display: none } @media (max-width: 640px) { .content-wrapper p.before-blockquote .tree-6 { display: block; width: 20vw } } .content-wrapper p.before-blockquote .tree-7 { position: absolute; right: -7.5vw; bottom: -39.0625vw; z-index: -1; display: none } @media (max-width: 640px) { .content-wrapper p.before-blockquote .tree-7 { display: block; width: 21.71875vw } } .quotation-mark { position: absolute; left: 50%; top: 0; margin-left: -28px; width: 58px } @media (orientation: portrait) and (max-width: 640px) { .quotation-mark { margin-left: -4.375vw; width: 9.0625vw } } @media (orientation: landscape) and (max-width: 1136px) { .quotation-mark { margin-left: -2.46479vw; width: 5.10563vw } } .congratulations { position: fixed; left: 0; top: 0; display: none; width: 100%; height: 100% } .mobile .congratulations { position: absolute; min-height: 100% } .mobile .congratulations .footer .share { -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center } .mobile .congratulations .footer .share .label { white-space: nowrap; color: #1a1a1a } @media (orientation: portrait) { .mobile .congratulations .footer .share .label { margin-right: 5px } } @media (orientation: portrait) and (max-width: 640px) { .mobile .congratulations .footer .share .label { margin-right: .78125vw } } @media (orientation: landscape) { .mobile .congratulations .footer .share .label { font-size: 30px; line-height: 30px } } @media (orientation: landscape) and (max-width: 1136px) { .mobile .congratulations .footer .share .label { font-size: 2.64085vw; line-height: 2.64085vw } } .mobile .congratulations .footer .share .link { border-right: none } @media (orientation: landscape) { .mobile .congratulations .footer .share .link:last-child { margin-right: 0 } .mobile .congratulations .footer .share .link[href="#vk"] svg { margin-top: -13px; margin-right: -22px; width: 44px; height: 26px } } @media (orientation: landscape) and (max-width: 1136px) { .mobile .congratulations .footer .share .link[href="#vk"] svg { margin-top: -1.14437vw; margin-right: -1.93662vw; width: 3.87324vw; height: 2.28873vw } } @media (orientation: landscape) { .mobile .congratulations .footer .share .link[href="#fb"] svg { margin-top: -19px; margin-right: -10px; width: 20px; height: 38px } } @media (orientation: landscape) and (max-width: 1136px) { .mobile .congratulations .footer .share .link[href="#fb"] svg { margin-top: -1.67254vw; margin-right: -.88028vw; width: 1.76056vw; height: 3.34507vw } } @media (orientation: landscape) { .mobile .congratulations .footer .share .link[href="#tw"] svg { margin-top: -16.5px; margin-right: -19.5px; width: 39px; height: 33px } } @media (orientation: landscape) and (max-width: 1136px) { .mobile .congratulations .footer .share .link[href="#tw"] svg { margin-top: -1.45246vw; margin-right: -1.71655vw; width: 3.4331vw; height: 2.90493vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile .congratulations .footer .share .link:last-child { margin-right: 0 } } .mobile .congratulations .footer .team { -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center } .mobile .congratulations .footer .team .item { color: #1a1a1a } @media (orientation: landscape) { .mobile .congratulations .footer .team .item { font-size: 30px; line-height: 65px } } @media (orientation: landscape) and (max-width: 1136px) { .mobile .congratulations .footer .team .item { font-size: 2.64085vw; line-height: 5.72183vw } } .mobile .congratulations .footer .copyright { -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center } .main-finish-page { position: relative; margin: 70px auto -163px; border: 5px solid #fff; padding: 90px 0; max-width: 1042px; font-size: 16px; text-align: center } .main-finish-page__inner { margin: 0 auto; max-width: 600px } .mobile .main-finish-page__inner { padding: 70px 70px 80px; max-width: none; background-color: #fff } @media (max-width: 1136px) { .mobile .main-finish-page__inner { padding: 6.16197vw 6.16197vw 7.04225vw } } .main-finish-page__pre-title { position: relative; z-index: 2; margin-bottom: 18px; font-family: Cuprum, sans-serif; font-weight: 400; font-size: 16px; line-height: 32px; letter-spacing: 5px; text-transform: uppercase; color: #41494a } .mobile .main-finish-page__pre-title { margin-bottom: 18px; font-size: 27px; line-height: 32px; letter-spacing: .3em } @media (max-width: 1136px) { .mobile .main-finish-page__pre-title { margin-bottom: 1.58451vw; font-size: 2.37676vw; line-height: 2.8169vw } } .main-finish-page__title { position: relative; z-index: 2; margin-bottom: 0; font-family: Cuprum, sans-serif; font-weight: 700; font-size: 70px; line-height: 65px; color: #41494a } .mobile .main-finish-page__title { margin-bottom: 62px; font-size: 70px; line-height: 65px } @media (max-width: 1136px) { .mobile .main-finish-page__title { margin-bottom: 5.45775vw; font-size: 6.16197vw; line-height: 5.72183vw } } .main-finish-page__text { position: relative; z-index: 2; margin-bottom: 80px; font-family: Roboto, sans-serif; font-size: 16px; line-height: 26px; color: #1a1a1a } .mobile .main-finish-page__text { margin-bottom: 82px; padding: 0 55px; font-weight: 300; font-size: 30px; line-height: 42px } @media (max-width: 1136px) { .mobile .main-finish-page__text { margin-bottom: 7.21831vw; padding: 0 4.84155vw; font-size: 2.64085vw; line-height: 3.69718vw } } .main-finish-page__share { position: relative; z-index: 2; margin-bottom: 40px } .main-finish-page__share a { display: inline-block; vertical-align: middle; margin: 0 19px; text-decoration: none } .main-finish-page__share a svg { display: block } .main-finish-page__share a[href="#vk"] svg { width: 20px; height: 12px } .mobile .main-finish-page__share a[href="#vk"] svg { width: 44px; height: 26px } @media (orientation: portrait) and (max-width: 640px) { .mobile .main-finish-page__share a[href="#vk"] svg { width: 6.875vw; height: 4.0625vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile .main-finish-page__share a[href="#vk"] svg { width: 3.87324vw; height: 2.28873vw } } .main-finish-page__share a[href="#fb"] svg { width: 9px; height: 18px } .mobile .main-finish-page__share a[href="#fb"] svg { width: 20px; height: 38px } @media (orientation: portrait) and (max-width: 640px) { .mobile .main-finish-page__share a[href="#fb"] svg { width: 3.125vw; height: 5.9375vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile .main-finish-page__share a[href="#fb"] svg { width: 1.76056vw; height: 3.34507vw } } .main-finish-page__share a[href="#tw"] svg { width: 18px; height: 17px } .mobile .main-finish-page__share a[href="#tw"] svg { width: 39px; height: 33px } @media (orientation: portrait) and (max-width: 640px) { .mobile .main-finish-page__share a[href="#tw"] svg { width: 6.09375vw; height: 5.15625vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile .main-finish-page__share a[href="#tw"] svg { width: 3.4331vw; height: 2.90493vw } } .main-finish-page__share a .mobile { margin: 0 80px } @media (orientation: portrait) and (max-width: 640px) { .main-finish-page__share a .mobile { margin: 0 12.5vw } } @media (orientation: landscape) and (max-width: 1136px) { .main-finish-page__share a .mobile { margin: 0 7.04225vw } } .mobile .main-finish-page__share { margin-bottom: 90px } @media (max-width: 1136px) { .mobile .main-finish-page__share { margin-bottom: 7.92254vw } } .main-finish-page__buttons { position: relative; z-index: 2 } .main-finish-page__buttons .button { margin: 0 15px; width: 231px; white-space: nowrap } .mobile .main-finish-page__buttons .button { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 0 15px; width: 420px } @media (max-width: 1136px) { .mobile .main-finish-page__buttons .button { margin: 0 1.32042vw; width: 36.97183vw } } @media (orientation: portrait) { .mobile .main-finish-page__buttons .button { padding-right: 10px; padding-left: 10px; white-space: normal } } @media (orientation: portrait) and (max-width: 1136px) { .mobile .main-finish-page__buttons .button { padding-right: .88028vw; padding-left: .88028vw } } @media (orientation: portrait) and (max-width: 640px) { .mobile .main-finish-page__buttons .button { padding-right: 1.5625vw; padding-left: 1.5625vw } } .mobile .main-finish-page__buttons { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center } .mobile .main-finish-page { margin-top: 0; margin-bottom: 0; border: none; padding: 133px 43px 43px; max-width: none; font-size: 30px; line-height: 42px } @media (max-width: 1136px) { .mobile .main-finish-page { padding: 11.70775vw 3.78521vw 3.78521vw; font-size: 2.64085vw; line-height: 3.69718vw } } @media (max-width: 1136px) and (orientation: portrait) { .mobile .main-finish-page { padding-top: 17.84771vw } } .illustration { position: relative; display: block; margin: 0 auto; width: 1042px; height: 513px } .illustration:before { content: ""; position: absolute; left: 0; top: 0; z-index: -1; width: 100%; height: 236px; background: url(../images/illustration-back.png) 50% 50%/contain no-repeat } .mobile .illustration:before { display: none } .illustration:after { content: ""; position: absolute; left: 0; top: 96px; z-index: 1; width: 100%; height: 417px; background: url(../images/illustration-front.png) 50% 50%/contain no-repeat } .mobile .illustration:after { display: none } @media (max-width: 1048px) { .illustration { width: 100% } } .mobile .illustration { margin-top: 7px; width: 100%; height: 50vw; background: url(../images/illustration-mobile.png) 50% 0/110% auto no-repeat } @media (max-width: 1136px) { .mobile .illustration { margin-top: .6162vw } } .preloader { position: fixed; left: 50%; top: 50%; display: block; z-index: 100000; margin-top: -23px; margin-left: -23px; width: 46px; height: 46px; opacity: 1; visibility: visible; pointer-events: none; -ms-touch-action: none; touch-action: none; -webkit-transition: opacity .5s, visibility .5s; -o-transition: opacity .5s, visibility .5s; -moz-transition: opacity .5s, visibility .5s; transition: opacity .5s, visibility .5s } .site-container.visible ~ .preloader { opacity: 0; visibility: hidden } @media (orientation: portrait) { .mobile .preloader { display: none } } .mobile-header { position: fixed; left: 0; top: 0; z-index: 10000; width: 100%; height: 90px; background-color: #fff } .mobile-header .logo-rbc { position: absolute; left: 23px; top: 14px; z-index: 2; padding: 15px; width: 151px; height: 64px; font-size: 0 } .mobile-header .logo-rbc:before { content: ""; display: block; width: 100%; height: 100%; background: url(../images/logo-rbc.svg) 50% 50%/contain no-repeat } @media (orientation: portrait) { .mobile-header .logo-rbc { left: 10px } } @media (orientation: portrait) and (max-width: 640px) { .mobile-header .logo-rbc { left: 1.5625vw; top: 2.1875vw; padding: 2.34375vw; width: 23.59375vw; height: 10vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile-header .logo-rbc { left: 2.02465vw; top: 1.23239vw; padding: 1.32042vw; width: 13.29225vw; height: 5.6338vw } } .mobile-header .menu:before { content: ""; position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 100%; background-color: #fff } .page-index .mobile-header .menu:before { background-color: transparent; -webkit-transition: background-color .5s; -o-transition: background-color .5s; -moz-transition: background-color .5s; transition: background-color .5s } .mobile-header .menu .toggle { position: absolute; left: 50%; top: 16px; z-index: 2; display: block; margin-left: -44px; outline: none; border: none; width: 88px; height: 57px; background: none } .mobile-header .menu .toggle .line-1, .mobile-header .menu .toggle .line-2, .mobile-header .menu .toggle .line-3 { position: absolute; left: 20px; width: 48px; height: 3px; background-color: #181818; -webkit-transition: -webkit-transform .5s; transition: -webkit-transform .5s; -o-transition: -o-transform .5s; -moz-transition: transform .5s, -moz-transform .5s; transition: transform .5s; transition: transform .5s, -webkit-transform .5s, -moz-transform .5s, -o-transform .5s } @media (orientation: portrait) and (max-width: 640px) { .mobile-header .menu .toggle .line-1, .mobile-header .menu .toggle .line-2, .mobile-header .menu .toggle .line-3 { left: 3.125vw; width: 7.5vw; height: .46875vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile-header .menu .toggle .line-1, .mobile-header .menu .toggle .line-2, .mobile-header .menu .toggle .line-3 { left: 1.76056vw; width: 4.22535vw; height: .26408vw; min-height: 1px } } .mobile-header .menu .toggle .line-1 { top: 15px } @media (orientation: portrait) and (max-width: 640px) { .mobile-header .menu .toggle .line-1 { top: 2.34375vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile-header .menu .toggle .line-1 { top: 1.32042vw } } .mobile-header .menu .toggle .line-2 { top: 27px } @media (orientation: portrait) and (max-width: 640px) { .mobile-header .menu .toggle .line-2 { top: 4.21875vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile-header .menu .toggle .line-2 { top: 2.37676vw } } .mobile-header .menu .toggle .line-3 { top: 39px } @media (orientation: portrait) and (max-width: 640px) { .mobile-header .menu .toggle .line-3 { top: 6.09375vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile-header .menu .toggle .line-3 { top: 3.4331vw } } @media (orientation: portrait) and (max-width: 640px) { .mobile-header .menu .toggle { top: 2.5vw; margin-left: -6.875vw; width: 13.75vw; height: 8.90625vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile-header .menu .toggle { top: 1.40845vw; margin-left: -3.87324vw; width: 7.74648vw; height: 5.01761vw } } .mobile-header .menu .dropdown { position: absolute; left: 0; top: 100%; padding: 3px 0; width: 100%; height: -webkit-calc(100em - 90px); height: -moz-calc(100em - 90px); height: calc(100em - 90px); font-size: 1vh; background-color: #fff; opacity: 0; pointer-events: none; -ms-touch-action: none; touch-action: none; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition: opacity .5s, -webkit-transform .5s; transition: opacity .5s, -webkit-transform .5s; -o-transition: opacity .5s, -o-transform .5s; -moz-transition: opacity .5s, transform .5s, -moz-transform .5s; transition: opacity .5s, transform .5s; transition: opacity .5s, transform .5s, -webkit-transform .5s, -moz-transform .5s, -o-transform .5s } .mobile-header .menu .dropdown .navigation { overflow: hidden; overflow-y: auto; border-top: 1px solid hsla(0, 0%, 81%, .3); border-bottom: 1px solid rgba(0, 0, 0, .15); max-height: -webkit-calc(100em - 186px); max-height: -moz-calc(100em - 186px); max-height: calc(100em - 186px); font-size: 1vh } .mobile-header .menu .dropdown .navigation .link { display: block; padding: 18px 20px; font-family: Roboto, sans-serif; font-weight: 300; font-size: 30px; line-height: 30px; text-align: center; text-decoration: none; color: #000 } .mobile-header .menu .dropdown .navigation .link:first-child { margin-top: 14px } @media (orientation: portrait) and (max-width: 640px) { .mobile-header .menu .dropdown .navigation .link:first-child { margin-top: 2.1875vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile-header .menu .dropdown .navigation .link:first-child { margin-top: 1.23239vw } } .mobile-header .menu .dropdown .navigation .link:last-child { margin-bottom: 16px } @media (orientation: portrait) and (max-width: 640px) { .mobile-header .menu .dropdown .navigation .link:last-child { margin-bottom: 2.5vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile-header .menu .dropdown .navigation .link:last-child { margin-bottom: 1.40845vw } } .page-about .mobile-header .menu .dropdown .navigation .link:nth-child(2), .page-index .mobile-header .menu .dropdown .navigation .link:first-child, .page-interview .mobile-header .menu .dropdown .navigation .link:nth-child(3) { color: #fff; background-color: #1fb150 } @media (orientation: portrait) and (max-width: 640px) { .mobile-header .menu .dropdown .navigation .link { padding: 2.8125vw 3.125vw; font-size: 4.6875vw; line-height: 4.6875vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile-header .menu .dropdown .navigation .link { padding: 1.58451vw 1.76056vw; font-size: 2.64085vw; line-height: 2.64085vw } } @media (orientation: portrait) and (max-width: 640px) { .mobile-header .menu .dropdown .navigation { border-top-width: .15625vw; border-bottom-width: .15625vw; max-height: -webkit-calc(100em - 29.0625vw); max-height: -moz-calc(100em - 29.0625vw); max-height: calc(100em - 29.0625vw); font-size: 1vh } } @media (orientation: landscape) and (max-width: 1136px) { .mobile-header .menu .dropdown .navigation { border-top-width: .08803vw; border-bottom-width: .08803vw; max-height: -webkit-calc(100em - 16.37324vw); max-height: -moz-calc(100em - 16.37324vw); max-height: calc(100em - 16.37324vw); font-size: 1vh } } .mobile-header .menu .dropdown .share { font-size: 0; line-height: 0; text-align: center } .mobile-header .menu .dropdown .share .link { position: relative; display: inline-block; vertical-align: middle; margin: 10px 45px; outline: none; width: 70px; height: 70px } .mobile-header .menu .dropdown .share .link svg { position: absolute; left: 50%; top: 50%; display: block } .mobile-header .menu .dropdown .share .link[href="#vk"] svg { margin-top: -12.5px; margin-left: -21px; width: 42px; height: 25px } @media (orientation: portrait) and (max-width: 640px) { .mobile-header .menu .dropdown .share .link[href="#vk"] svg { margin-top: -1.95312vw; margin-left: -3.28125vw; width: 6.5625vw; height: 3.90625vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile-header .menu .dropdown .share .link[href="#vk"] svg { margin-top: -1.10035vw; margin-left: -1.84859vw; width: 3.69718vw; height: 2.2007vw } } .mobile-header .menu .dropdown .share .link[href="#fb"] svg { margin-top: -18.5px; margin-left: -9.5px; width: 19px; height: 37px } @media (orientation: portrait) and (max-width: 640px) { .mobile-header .menu .dropdown .share .link[href="#fb"] svg { margin-top: -2.89062vw; margin-left: -1.48438vw; width: 2.96875vw; height: 5.78125vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile-header .menu .dropdown .share .link[href="#fb"] svg { margin-top: -1.62852vw; margin-left: -.83627vw; width: 1.67254vw; height: 3.25704vw } } .mobile-header .menu .dropdown .share .link[href="#tw"] svg { margin-top: -19px; margin-left: -16.5px; width: 33px; height: 38px } @media (orientation: portrait) and (max-width: 640px) { .mobile-header .menu .dropdown .share .link[href="#tw"] svg { margin-top: -2.96875vw; margin-left: -2.57812vw; width: 5.15625vw; height: 5.9375vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile-header .menu .dropdown .share .link[href="#tw"] svg { margin-top: -1.67254vw; margin-left: -1.45246vw; width: 2.90493vw; height: 3.34507vw } } @media (orientation: portrait) and (max-width: 640px) { .mobile-header .menu .dropdown .share .link { margin: 1.5625vw 7.03125vw; width: 10.9375vw; height: 10.9375vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile-header .menu .dropdown .share .link { margin: .88028vw 3.96127vw; width: 6.16197vw; height: 6.16197vw } } .flexbox .mobile-header .menu .dropdown { -webkit-flex-flow: column nowrap; -ms-flex-flow: column nowrap; flex-flow: column nowrap } .flexbox .mobile-header .menu .dropdown, .flexbox .mobile-header .menu .dropdown .navigation { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -moz-box-orient: vertical; -moz-box-direction: normal } .flexbox .mobile-header .menu .dropdown .navigation { -webkit-box-flex: 1; -webkit-flex: 1 0 auto; -moz-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; -webkit-flex-flow: column; -ms-flex-flow: column; flex-flow: column; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center } @media (orientation: portrait) and (max-width: 640px) { .mobile-header .menu .dropdown { padding: .46875vw 0; height: -webkit-calc(100em - 14.0625vw); height: -moz-calc(100em - 14.0625vw); height: calc(100em - 14.0625vw); font-size: 1vh } } @media (orientation: landscape) and (max-width: 1136px) { .mobile-header .menu .dropdown { padding: .26408vw 0; height: -webkit-calc(100em - 7.92254vw); height: -moz-calc(100em - 7.92254vw); height: calc(100em - 7.92254vw); font-size: 1vh } } .page-index .mobile-header .menu.is-open:before { background-color: #fff } .mobile-header .menu.is-open .toggle .line-1 { -webkit-transform: translateY(12px) rotate(38deg); -moz-transform: translateY(12px) rotate(38deg); -ms-transform: translateY(12px) rotate(38deg); -o-transform: translateY(12px) rotate(38deg); transform: translateY(12px) rotate(38deg) } @media (orientation: portrait) and (max-width: 640px) { .mobile-header .menu.is-open .toggle .line-1 { font-size: 1vw; -webkit-transform: translateY(1.875em) rotate(38deg); -moz-transform: translateY(1.875em) rotate(38deg); -ms-transform: translateY(1.875em) rotate(38deg); -o-transform: translateY(1.875em) rotate(38deg); transform: translateY(1.875em) rotate(38deg) } } @media (orientation: landscape) and (max-width: 1136px) { .mobile-header .menu.is-open .toggle .line-1 { font-size: 1vw; -webkit-transform: translateY(1.05634em) rotate(38deg); -moz-transform: translateY(1.05634em) rotate(38deg); -ms-transform: translateY(1.05634em) rotate(38deg); -o-transform: translateY(1.05634em) rotate(38deg); transform: translateY(1.05634em) rotate(38deg) } } .mobile-header .menu.is-open .toggle .line-2 { -webkit-transform: scaleX(0); -moz-transform: scaleX(0); -ms-transform: scaleX(0); -o-transform: scaleX(0); transform: scaleX(0) } .mobile-header .menu.is-open .toggle .line-3 { -webkit-transform: translateY(-12px) rotate(-38deg); -moz-transform: translateY(-12px) rotate(-38deg); -ms-transform: translateY(-12px) rotate(-38deg); -o-transform: translateY(-12px) rotate(-38deg); transform: translateY(-12px) rotate(-38deg) } @media (orientation: portrait) and (max-width: 640px) { .mobile-header .menu.is-open .toggle .line-3 { font-size: 1vw; -webkit-transform: translateY(-1.875em) rotate(-38deg); -moz-transform: translateY(-1.875em) rotate(-38deg); -ms-transform: translateY(-1.875em) rotate(-38deg); -o-transform: translateY(-1.875em) rotate(-38deg); transform: translateY(-1.875em) rotate(-38deg) } } @media (orientation: landscape) and (max-width: 1136px) { .mobile-header .menu.is-open .toggle .line-3 { font-size: 1vw; -webkit-transform: translateY(-1.05634em) rotate(-38deg); -moz-transform: translateY(-1.05634em) rotate(-38deg); -ms-transform: translateY(-1.05634em) rotate(-38deg); -o-transform: translateY(-1.05634em) rotate(-38deg); transform: translateY(-1.05634em) rotate(-38deg) } } .mobile-header .menu.is-open .dropdown { opacity: 1; pointer-events: auto; -ms-touch-action: auto; touch-action: auto; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0) } .mobile-header .logo-intouch { position: absolute; right: 14px; top: 16px; z-index: 2; padding: 15px; width: 199px; height: 55px; font-size: 0 } .mobile-header .logo-intouch:before { content: ""; display: block; width: 100%; height: 100%; background: url(../images/logo-intouch.svg) 0 0/contain no-repeat } @media (orientation: portrait) and (max-width: 640px) { .mobile-header .logo-intouch { right: 2.1875vw; top: 2.5vw; padding: 2.34375vw; width: 31.09375vw; height: 8.59375vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile-header .logo-intouch { right: 1.23239vw; top: 1.40845vw; padding: 1.32042vw; width: 17.51761vw; height: 4.84155vw } } .page-index .mobile-header { background-color: transparent } .page-index .site-container > .mobile-only > .mobile-header { z-index: -1; background-color: #fff; opacity: 0; pointer-events: none; -ms-touch-action: none; touch-action: none; -webkit-transition: opacity .5s; -o-transition: opacity .5s; -moz-transition: opacity .5s; transition: opacity .5s } .page-index .site-container > .mobile-only > .mobile-header .menu:before { background-color: #fff } @media (orientation: portrait) { .page-index .site-container > .mobile-only > .mobile-header { z-index: 10000; opacity: 1; pointer-events: auto; -ms-touch-action: auto; touch-action: auto } } .page-index.on-finish .site-container > .mobile-only > .mobile-header { z-index: 10000; opacity: 1; pointer-events: auto; -ms-touch-action: auto; touch-action: auto } .page-index .site-container > .slider > .mobile-only > .mobile-header { position: absolute; display: block; opacity: 1; -webkit-transition: opacity .5s, visibility .5s; -o-transition: opacity .5s, visibility .5s; -moz-transition: opacity .5s, visibility .5s; transition: opacity .5s, visibility .5s } @media (orientation: portrait) { .page-index .site-container > .slider > .mobile-only > .mobile-header { opacity: 0; visibility: hidden } } .page-index.on-finish .site-container > .slider > .mobile-only > .mobile-header { opacity: 0; visibility: hidden } @media (orientation: portrait) and (max-width: 640px) { .mobile-header { height: 14.0625vw } } @media (orientation: landscape) and (max-width: 1136px) { .mobile-header { height: 7.92254vw } } @-webkit-keyframes q { 0% { -webkit-transform: translate(-10px, 27px); transform: translate(-10px, 27px) } to { -webkit-transform: translate(-10px, 42px); transform: translate(-10px, 42px) } } @-moz-keyframes q { 0% { -moz-transform: translate(-10px, 27px); transform: translate(-10px, 27px) } to { -moz-transform: translate(-10px, 42px); transform: translate(-10px, 42px) } } @-o-keyframes q { 0% { -o-transform: translate(-10px, 27px); transform: translate(-10px, 27px) } to { -o-transform: translate(-10px, 42px); transform: translate(-10px, 42px) } } @keyframes q { 0% { -webkit-transform: translate(-10px, 27px); -moz-transform: translate(-10px, 27px); -o-transform: translate(-10px, 27px); transform: translate(-10px, 27px) } to { -webkit-transform: translate(-10px, 42px); -moz-transform: translate(-10px, 42px); -o-transform: translate(-10px, 42px); transform: translate(-10px, 42px) } } @-webkit-keyframes r { 0% { -webkit-transform: translate(-.88028em, 2.37676em); transform: translate(-.88028em, 2.37676em) } to { -webkit-transform: translate(-.88028em, 3.69718em); transform: translate(-.88028em, 3.69718em) } } @-moz-keyframes r { 0% { -moz-transform: translate(-.88028em, 2.37676em); transform: translate(-.88028em, 2.37676em) } to { -moz-transform: translate(-.88028em, 3.69718em); transform: translate(-.88028em, 3.69718em) } } @-o-keyframes r { 0% { -o-transform: translate(-.88028em, 2.37676em); transform: translate(-.88028em, 2.37676em) } to { -o-transform: translate(-.88028em, 3.69718em); transform: translate(-.88028em, 3.69718em) } } @keyframes r { 0% { -webkit-transform: translate(-.88028em, 2.37676em); -moz-transform: translate(-.88028em, 2.37676em); -o-transform: translate(-.88028em, 2.37676em); transform: translate(-.88028em, 2.37676em) } to { -webkit-transform: translate(-.88028em, 3.69718em); -moz-transform: translate(-.88028em, 3.69718em); -o-transform: translate(-.88028em, 3.69718em); transform: translate(-.88028em, 3.69718em) } } .mobile-intro .pre-title { font-family: Cuprum, sans-serif; font-size: 25px; line-height: 25px; letter-spacing: .3em; text-align: center; text-transform: uppercase; color: #41494a } @media (max-width: 1136px) { .mobile-intro .pre-title { font-size: 2.2007vw; line-height: 2.2007vw } } .mobile-intro .title { margin-top: 1px; font-family: PF Din Text Cond Pro, sans-serif; font-weight: 500; font-size: 60px; line-height: 52px; letter-spacing: -.012em; text-align: center; color: #41494a } @media (max-width: 1136px) { .mobile-intro .title { margin-top: .08803vw; font-size: 5.28169vw; line-height: 4.57746vw } } .mobile-intro .swipe { display: none; margin: 0 auto; width: 48px; height: 51px; font-size: 1vw; fill: #41494a; -webkit-transform: translate(-10px, 27px); -moz-transform: translate(-10px, 27px); -ms-transform: translate(-10px, 27px); -o-transform: translate(-10px, 27px); transform: translate(-10px, 27px); -webkit-animation: 1s linear infinite alternate q; -moz-animation: 1s linear infinite alternate q; -o-animation: 1s linear infinite alternate q; animation: 1s linear infinite alternate q } @media (max-width: 1136px) { .mobile-intro .swipe { width: 4.22535vw; height: 4.48944vw; -webkit-transform: translate(-.88028vw, 2.37676vw); -moz-transform: translate(-.88028vw, 2.37676vw); -ms-transform: translate(-.88028vw, 2.37676vw); -o-transform: translate(-.88028vw, 2.37676vw); transform: translate(-.88028vw, 2.37676vw); -webkit-animation: 1s linear infinite alternate r; -moz-animation: 1s linear infinite alternate r; -o-animation: 1s linear infinite alternate r; animation: 1s linear infinite alternate r } } .page-index .mobile-intro { position: absolute; left: 0; top: 129px; z-index: 100; width: 100% } .page-index .mobile-intro .title { text-indent: 10px } .page-index .mobile-intro .swipe { display: block } @media (max-width: 1136px) { .page-index .mobile-intro { top: 11.35563vw } } .mobile-layers { overflow: hidden } .mobile-layers .road { position: relative; left: 50%; z-index: 10; margin-top: 310px; width: 1136px; height: 10541px; background: url(../images/mobile-road.png) 50% 0/contain no-repeat; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%) } @media (max-width: 1136px) { .mobile-layers .road { margin-top: 27.28873vw; width: 100vw; height: 927.90493vw } } .mobile-layers .basketball-court { position: absolute; left: 50%; top: 201px; z-index: 10; width: 652.01px; height: 370.075px; -webkit-transform: translateX(-644px); -moz-transform: translateX(-644px); -ms-transform: translateX(-644px); -o-transform: translateX(-644px); transform: translateX(-644px); background: url(../images/mobile-basketball-court.png) 0 0/contain no-repeat } .mobile-layers .basketball-court.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .basketball-court.fade-in.is-visible { opacity: 1 } .mobile-layers .basketball-court.fade-up { opacity: 0; -webkit-transform: translate(-644px, 30px); -moz-transform: translate(-644px, 30px); -ms-transform: translate(-644px, 30px); -o-transform: translate(-644px, 30px); transform: translate(-644px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .basketball-court.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-644px); -moz-transform: translate(-644px); -ms-transform: translate(-644px); -o-transform: translate(-644px); transform: translate(-644px) } @media (max-width: 1136px) { .mobile-layers .basketball-court { top: 17.69366vw; width: 57.39525vw; height: 32.57702vw; font-size: 1vw; -webkit-transform: translateX(-56.69014em); -moz-transform: translateX(-56.69014em); -ms-transform: translateX(-56.69014em); -o-transform: translateX(-56.69014em); transform: translateX(-56.69014em) } .mobile-layers .basketball-court.fade-up { -webkit-transform: translate(-56.69014em, 30px); -moz-transform: translate(-56.69014em, 30px); -ms-transform: translate(-56.69014em, 30px); -o-transform: translate(-56.69014em, 30px); transform: translate(-56.69014em, 30px) } .mobile-layers .basketball-court.fade-up.is-visible { -webkit-transform: translate(-56.69014em); -moz-transform: translate(-56.69014em); -ms-transform: translate(-56.69014em); -o-transform: translate(-56.69014em); transform: translate(-56.69014em) } } .mobile-layers .ground-1 { position: absolute; left: 50%; top: 257px; z-index: 9; width: 646.36px; height: 205.66px; -webkit-transform: translateX(75px); -moz-transform: translateX(75px); -ms-transform: translateX(75px); -o-transform: translateX(75px); transform: translateX(75px); background: url(../images/ground-1.png) 0 0/contain no-repeat } .mobile-layers .ground-1.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .ground-1.fade-in.is-visible { opacity: 1 } .mobile-layers .ground-1.fade-up { opacity: 0; -webkit-transform: translate(75px, 30px); -moz-transform: translate(75px, 30px); -ms-transform: translate(75px, 30px); -o-transform: translate(75px, 30px); transform: translate(75px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .ground-1.fade-up.is-visible { opacity: 1; -webkit-transform: translate(75px); -moz-transform: translate(75px); -ms-transform: translate(75px); -o-transform: translate(75px); transform: translate(75px) } @media (max-width: 1136px) { .mobile-layers .ground-1 { top: 22.62324vw; width: 56.89789vw; height: 18.10387vw; font-size: 1vw; -webkit-transform: translateX(6.60211em); -moz-transform: translateX(6.60211em); -ms-transform: translateX(6.60211em); -o-transform: translateX(6.60211em); transform: translateX(6.60211em) } .mobile-layers .ground-1.fade-up { -webkit-transform: translate(6.60211em, 30px); -moz-transform: translate(6.60211em, 30px); -ms-transform: translate(6.60211em, 30px); -o-transform: translate(6.60211em, 30px); transform: translate(6.60211em, 30px) } .mobile-layers .ground-1.fade-up.is-visible { -webkit-transform: translate(6.60211em); -moz-transform: translate(6.60211em); -ms-transform: translate(6.60211em); -o-transform: translate(6.60211em); transform: translate(6.60211em) } } .mobile-layers .ground-2 { position: absolute; left: 50%; top: 526px; z-index: 9; width: 487.2px; height: 188.3px; -webkit-transform: translateX(69px); -moz-transform: translateX(69px); -ms-transform: translateX(69px); -o-transform: translateX(69px); transform: translateX(69px); background: url(../images/ground-2.png) 0 0/contain no-repeat } .mobile-layers .ground-2.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .ground-2.fade-in.is-visible { opacity: 1 } .mobile-layers .ground-2.fade-up { opacity: 0; -webkit-transform: translate(69px, 30px); -moz-transform: translate(69px, 30px); -ms-transform: translate(69px, 30px); -o-transform: translate(69px, 30px); transform: translate(69px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .ground-2.fade-up.is-visible { opacity: 1; -webkit-transform: translate(69px); -moz-transform: translate(69px); -ms-transform: translate(69px); -o-transform: translate(69px); transform: translate(69px) } @media (max-width: 1136px) { .mobile-layers .ground-2 { top: 46.30282vw; width: 42.88732vw; height: 16.5757vw; font-size: 1vw; -webkit-transform: translateX(6.07394em); -moz-transform: translateX(6.07394em); -ms-transform: translateX(6.07394em); -o-transform: translateX(6.07394em); transform: translateX(6.07394em) } .mobile-layers .ground-2.fade-up { -webkit-transform: translate(6.07394em, 30px); -moz-transform: translate(6.07394em, 30px); -ms-transform: translate(6.07394em, 30px); -o-transform: translate(6.07394em, 30px); transform: translate(6.07394em, 30px) } .mobile-layers .ground-2.fade-up.is-visible { -webkit-transform: translate(6.07394em); -moz-transform: translate(6.07394em); -ms-transform: translate(6.07394em); -o-transform: translate(6.07394em); transform: translate(6.07394em) } } .mobile-layers .ground-3 { position: absolute; left: 50%; top: 1275px; z-index: 10; width: 463.2px; height: 216.96px; -webkit-transform: translateX(-474px); -moz-transform: translateX(-474px); -ms-transform: translateX(-474px); -o-transform: translateX(-474px); transform: translateX(-474px); background: url(../images/ground-3.png) 0 0/contain no-repeat } .mobile-layers .ground-3.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .ground-3.fade-in.is-visible { opacity: 1 } .mobile-layers .ground-3.fade-up { opacity: 0; -webkit-transform: translate(-474px, 30px); -moz-transform: translate(-474px, 30px); -ms-transform: translate(-474px, 30px); -o-transform: translate(-474px, 30px); transform: translate(-474px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .ground-3.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-474px); -moz-transform: translate(-474px); -ms-transform: translate(-474px); -o-transform: translate(-474px); transform: translate(-474px) } @media (max-width: 1136px) { .mobile-layers .ground-3 { top: 112.23592vw; width: 40.77465vw; height: 19.09859vw; font-size: 1vw; -webkit-transform: translateX(-41.72535em); -moz-transform: translateX(-41.72535em); -ms-transform: translateX(-41.72535em); -o-transform: translateX(-41.72535em); transform: translateX(-41.72535em) } .mobile-layers .ground-3.fade-up { -webkit-transform: translate(-41.72535em, 30px); -moz-transform: translate(-41.72535em, 30px); -ms-transform: translate(-41.72535em, 30px); -o-transform: translate(-41.72535em, 30px); transform: translate(-41.72535em, 30px) } .mobile-layers .ground-3.fade-up.is-visible { -webkit-transform: translate(-41.72535em); -moz-transform: translate(-41.72535em); -ms-transform: translate(-41.72535em); -o-transform: translate(-41.72535em); transform: translate(-41.72535em) } } .mobile-layers .ground-4 { position: absolute; left: 50%; top: 1474px; z-index: 13; width: 535.2px; height: 344.64px; -webkit-transform: translateX(-220px); -moz-transform: translateX(-220px); -ms-transform: translateX(-220px); -o-transform: translateX(-220px); transform: translateX(-220px); background: url(../images/ground-4.png) 0 0/contain no-repeat } .mobile-layers .ground-4.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .ground-4.fade-in.is-visible { opacity: 1 } .mobile-layers .ground-4.fade-up { opacity: 0; -webkit-transform: translate(-220px, 30px); -moz-transform: translate(-220px, 30px); -ms-transform: translate(-220px, 30px); -o-transform: translate(-220px, 30px); transform: translate(-220px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .ground-4.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-220px); -moz-transform: translate(-220px); -ms-transform: translate(-220px); -o-transform: translate(-220px); transform: translate(-220px) } @media (max-width: 1136px) { .mobile-layers .ground-4 { top: 129.75352vw; width: 47.11268vw; height: 30.33803vw; font-size: 1vw; -webkit-transform: translateX(-19.3662em); -moz-transform: translateX(-19.3662em); -ms-transform: translateX(-19.3662em); -o-transform: translateX(-19.3662em); transform: translateX(-19.3662em) } .mobile-layers .ground-4.fade-up { -webkit-transform: translate(-19.3662em, 30px); -moz-transform: translate(-19.3662em, 30px); -ms-transform: translate(-19.3662em, 30px); -o-transform: translate(-19.3662em, 30px); transform: translate(-19.3662em, 30px) } .mobile-layers .ground-4.fade-up.is-visible { -webkit-transform: translate(-19.3662em); -moz-transform: translate(-19.3662em); -ms-transform: translate(-19.3662em); -o-transform: translate(-19.3662em); transform: translate(-19.3662em) } } .mobile-layers .ground-5 { position: absolute; left: 50%; top: 1736px; z-index: 10; width: 246.6px; height: 259.2px; -webkit-transform: translateX(-330px); -moz-transform: translateX(-330px); -ms-transform: translateX(-330px); -o-transform: translateX(-330px); transform: translateX(-330px); background: url(../images/ground-5.png) 0 0/contain no-repeat } .mobile-layers .ground-5.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .ground-5.fade-in.is-visible { opacity: 1 } .mobile-layers .ground-5.fade-up { opacity: 0; -webkit-transform: translate(-330px, 30px); -moz-transform: translate(-330px, 30px); -ms-transform: translate(-330px, 30px); -o-transform: translate(-330px, 30px); transform: translate(-330px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .ground-5.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-330px); -moz-transform: translate(-330px); -ms-transform: translate(-330px); -o-transform: translate(-330px); transform: translate(-330px) } @media (max-width: 1136px) { .mobile-layers .ground-5 { top: 152.8169vw; width: 21.70775vw; height: 22.8169vw; font-size: 1vw; -webkit-transform: translateX(-29.0493em); -moz-transform: translateX(-29.0493em); -ms-transform: translateX(-29.0493em); -o-transform: translateX(-29.0493em); transform: translateX(-29.0493em) } .mobile-layers .ground-5.fade-up { -webkit-transform: translate(-29.0493em, 30px); -moz-transform: translate(-29.0493em, 30px); -ms-transform: translate(-29.0493em, 30px); -o-transform: translate(-29.0493em, 30px); transform: translate(-29.0493em, 30px) } .mobile-layers .ground-5.fade-up.is-visible { -webkit-transform: translate(-29.0493em); -moz-transform: translate(-29.0493em); -ms-transform: translate(-29.0493em); -o-transform: translate(-29.0493em); transform: translate(-29.0493em) } } .mobile-layers .ground-6 { position: absolute; left: 50%; top: 2546px; z-index: 10; width: 364.78px; height: 435.16px; -webkit-transform: translateX(70px); -moz-transform: translateX(70px); -ms-transform: translateX(70px); -o-transform: translateX(70px); transform: translateX(70px); background: url(../images/ground-6.png) 0 0/contain no-repeat } .mobile-layers .ground-6.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .ground-6.fade-in.is-visible { opacity: 1 } .mobile-layers .ground-6.fade-up { opacity: 0; -webkit-transform: translate(70px, 30px); -moz-transform: translate(70px, 30px); -ms-transform: translate(70px, 30px); -o-transform: translate(70px, 30px); transform: translate(70px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .ground-6.fade-up.is-visible { opacity: 1; -webkit-transform: translate(70px); -moz-transform: translate(70px); -ms-transform: translate(70px); -o-transform: translate(70px); transform: translate(70px) } @media (max-width: 1136px) { .mobile-layers .ground-6 { top: 224.11972vw; width: 32.11092vw; height: 38.30634vw; font-size: 1vw; -webkit-transform: translateX(6.16197em); -moz-transform: translateX(6.16197em); -ms-transform: translateX(6.16197em); -o-transform: translateX(6.16197em); transform: translateX(6.16197em) } .mobile-layers .ground-6.fade-up { -webkit-transform: translate(6.16197em, 30px); -moz-transform: translate(6.16197em, 30px); -ms-transform: translate(6.16197em, 30px); -o-transform: translate(6.16197em, 30px); transform: translate(6.16197em, 30px) } .mobile-layers .ground-6.fade-up.is-visible { -webkit-transform: translate(6.16197em); -moz-transform: translate(6.16197em); -ms-transform: translate(6.16197em); -o-transform: translate(6.16197em); transform: translate(6.16197em) } } .mobile-layers .ground-7 { position: absolute; left: 50%; top: 2632px; z-index: 10; width: 616.8px; height: 398.4px; -webkit-transform: translateX(-570px); -moz-transform: translateX(-570px); -ms-transform: translateX(-570px); -o-transform: translateX(-570px); transform: translateX(-570px); background: url(../images/ground-7.png) 0 0/contain no-repeat } .mobile-layers .ground-7.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .ground-7.fade-in.is-visible { opacity: 1 } .mobile-layers .ground-7.fade-up { opacity: 0; -webkit-transform: translate(-570px, 30px); -moz-transform: translate(-570px, 30px); -ms-transform: translate(-570px, 30px); -o-transform: translate(-570px, 30px); transform: translate(-570px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .ground-7.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-570px); -moz-transform: translate(-570px); -ms-transform: translate(-570px); -o-transform: translate(-570px); transform: translate(-570px) } @media (max-width: 1136px) { .mobile-layers .ground-7 { top: 231.69014vw; width: 54.29577vw; height: 35.07042vw; font-size: 1vw; -webkit-transform: translateX(-50.17606em); -moz-transform: translateX(-50.17606em); -ms-transform: translateX(-50.17606em); -o-transform: translateX(-50.17606em); transform: translateX(-50.17606em) } .mobile-layers .ground-7.fade-up { -webkit-transform: translate(-50.17606em, 30px); -moz-transform: translate(-50.17606em, 30px); -ms-transform: translate(-50.17606em, 30px); -o-transform: translate(-50.17606em, 30px); transform: translate(-50.17606em, 30px) } .mobile-layers .ground-7.fade-up.is-visible { -webkit-transform: translate(-50.17606em); -moz-transform: translate(-50.17606em); -ms-transform: translate(-50.17606em); -o-transform: translate(-50.17606em); transform: translate(-50.17606em) } } .mobile-layers .ground-8 { position: absolute; left: 50%; top: 3945px; z-index: 10; width: 312.04px; height: 156.6px; -webkit-transform: translateX(-54px); -moz-transform: translateX(-54px); -ms-transform: translateX(-54px); -o-transform: translateX(-54px); transform: translateX(-54px); background: url(../images/ground-8.png) 0 0/contain no-repeat } .mobile-layers .ground-8.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .ground-8.fade-in.is-visible { opacity: 1 } .mobile-layers .ground-8.fade-up { opacity: 0; -webkit-transform: translate(-54px, 30px); -moz-transform: translate(-54px, 30px); -ms-transform: translate(-54px, 30px); -o-transform: translate(-54px, 30px); transform: translate(-54px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .ground-8.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-54px); -moz-transform: translate(-54px); -ms-transform: translate(-54px); -o-transform: translate(-54px); transform: translate(-54px) } @media (max-width: 1136px) { .mobile-layers .ground-8 { top: 347.27113vw; width: 27.46831vw; height: 13.78521vw; font-size: 1vw; -webkit-transform: translateX(-4.75352em); -moz-transform: translateX(-4.75352em); -ms-transform: translateX(-4.75352em); -o-transform: translateX(-4.75352em); transform: translateX(-4.75352em) } .mobile-layers .ground-8.fade-up { -webkit-transform: translate(-4.75352em, 30px); -moz-transform: translate(-4.75352em, 30px); -ms-transform: translate(-4.75352em, 30px); -o-transform: translate(-4.75352em, 30px); transform: translate(-4.75352em, 30px) } .mobile-layers .ground-8.fade-up.is-visible { -webkit-transform: translate(-4.75352em); -moz-transform: translate(-4.75352em); -ms-transform: translate(-4.75352em); -o-transform: translate(-4.75352em); transform: translate(-4.75352em) } } .mobile-layers .ground-9 { position: absolute; left: 50%; top: 4726px; z-index: 10; width: 263.2px; height: 197.12px; -webkit-transform: translateX(14px); -moz-transform: translateX(14px); -ms-transform: translateX(14px); -o-transform: translateX(14px); transform: translateX(14px); background: url(../images/ground-9.png) 0 0/contain no-repeat } .mobile-layers .ground-9.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .ground-9.fade-in.is-visible { opacity: 1 } .mobile-layers .ground-9.fade-up { opacity: 0; -webkit-transform: translate(14px, 30px); -moz-transform: translate(14px, 30px); -ms-transform: translate(14px, 30px); -o-transform: translate(14px, 30px); transform: translate(14px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .ground-9.fade-up.is-visible { opacity: 1; -webkit-transform: translate(14px); -moz-transform: translate(14px); -ms-transform: translate(14px); -o-transform: translate(14px); transform: translate(14px) } @media (max-width: 1136px) { .mobile-layers .ground-9 { top: 416.02113vw; width: 23.16901vw; height: 17.35211vw; font-size: 1vw; -webkit-transform: translateX(1.23239em); -moz-transform: translateX(1.23239em); -ms-transform: translateX(1.23239em); -o-transform: translateX(1.23239em); transform: translateX(1.23239em) } .mobile-layers .ground-9.fade-up { -webkit-transform: translate(1.23239em, 30px); -moz-transform: translate(1.23239em, 30px); -ms-transform: translate(1.23239em, 30px); -o-transform: translate(1.23239em, 30px); transform: translate(1.23239em, 30px) } .mobile-layers .ground-9.fade-up.is-visible { -webkit-transform: translate(1.23239em); -moz-transform: translate(1.23239em); -ms-transform: translate(1.23239em); -o-transform: translate(1.23239em); transform: translate(1.23239em) } } .mobile-layers .ground-10 { position: absolute; left: 50%; top: 5017px; z-index: 10; width: 444.08px; height: 529.76px; -webkit-transform: translateX(-489px); -moz-transform: translateX(-489px); -ms-transform: translateX(-489px); -o-transform: translateX(-489px); transform: translateX(-489px); background: url(../images/ground-6.png) 0 0/contain no-repeat } .mobile-layers .ground-10.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .ground-10.fade-in.is-visible { opacity: 1 } .mobile-layers .ground-10.fade-up { opacity: 0; -webkit-transform: translate(-489px, 30px); -moz-transform: translate(-489px, 30px); -ms-transform: translate(-489px, 30px); -o-transform: translate(-489px, 30px); transform: translate(-489px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .ground-10.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-489px); -moz-transform: translate(-489px); -ms-transform: translate(-489px); -o-transform: translate(-489px); transform: translate(-489px) } @media (max-width: 1136px) { .mobile-layers .ground-10 { top: 441.63732vw; width: 39.09155vw; height: 46.6338vw; font-size: 1vw; -webkit-transform: translateX(-43.04577em); -moz-transform: translateX(-43.04577em); -ms-transform: translateX(-43.04577em); -o-transform: translateX(-43.04577em); transform: translateX(-43.04577em) } .mobile-layers .ground-10.fade-up { -webkit-transform: translate(-43.04577em, 30px); -moz-transform: translate(-43.04577em, 30px); -ms-transform: translate(-43.04577em, 30px); -o-transform: translate(-43.04577em, 30px); transform: translate(-43.04577em, 30px) } .mobile-layers .ground-10.fade-up.is-visible { -webkit-transform: translate(-43.04577em); -moz-transform: translate(-43.04577em); -ms-transform: translate(-43.04577em); -o-transform: translate(-43.04577em); transform: translate(-43.04577em) } } .mobile-layers .ground-11 { position: absolute; left: 50%; top: 5541px; z-index: 10; width: 692.12px; height: 541.84px; -webkit-transform: translateX(-36px); -moz-transform: translateX(-36px); -ms-transform: translateX(-36px); -o-transform: translateX(-36px); transform: translateX(-36px); background: url(../images/ground-11.png) 0 0/contain no-repeat } .mobile-layers .ground-11.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .ground-11.fade-in.is-visible { opacity: 1 } .mobile-layers .ground-11.fade-up { opacity: 0; -webkit-transform: translate(-36px, 30px); -moz-transform: translate(-36px, 30px); -ms-transform: translate(-36px, 30px); -o-transform: translate(-36px, 30px); transform: translate(-36px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .ground-11.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-36px); -moz-transform: translate(-36px); -ms-transform: translate(-36px); -o-transform: translate(-36px); transform: translate(-36px) } @media (max-width: 1136px) { .mobile-layers .ground-11 { top: 487.76408vw; width: 60.92606vw; height: 47.69718vw; font-size: 1vw; -webkit-transform: translateX(-3.16901em); -moz-transform: translateX(-3.16901em); -ms-transform: translateX(-3.16901em); -o-transform: translateX(-3.16901em); transform: translateX(-3.16901em) } .mobile-layers .ground-11.fade-up { -webkit-transform: translate(-3.16901em, 30px); -moz-transform: translate(-3.16901em, 30px); -ms-transform: translate(-3.16901em, 30px); -o-transform: translate(-3.16901em, 30px); transform: translate(-3.16901em, 30px) } .mobile-layers .ground-11.fade-up.is-visible { -webkit-transform: translate(-3.16901em); -moz-transform: translate(-3.16901em); -ms-transform: translate(-3.16901em); -o-transform: translate(-3.16901em); transform: translate(-3.16901em) } } .mobile-layers .ground-12 { position: absolute; left: 50%; top: 6494px; z-index: 10; width: 339.66px; height: 342.21px; -webkit-transform: translateX(-488px); -moz-transform: translateX(-488px); -ms-transform: translateX(-488px); -o-transform: translateX(-488px); transform: translateX(-488px); background: url(../images/ground-12.png) 0 0/contain no-repeat } .mobile-layers .ground-12.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .ground-12.fade-in.is-visible { opacity: 1 } .mobile-layers .ground-12.fade-up { opacity: 0; -webkit-transform: translate(-488px, 30px); -moz-transform: translate(-488px, 30px); -ms-transform: translate(-488px, 30px); -o-transform: translate(-488px, 30px); transform: translate(-488px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .ground-12.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-488px); -moz-transform: translate(-488px); -ms-transform: translate(-488px); -o-transform: translate(-488px); transform: translate(-488px) } @media (max-width: 1136px) { .mobile-layers .ground-12 { top: 571.65493vw; width: 29.89965vw; height: 30.12412vw; font-size: 1vw; -webkit-transform: translateX(-42.95775em); -moz-transform: translateX(-42.95775em); -ms-transform: translateX(-42.95775em); -o-transform: translateX(-42.95775em); transform: translateX(-42.95775em) } .mobile-layers .ground-12.fade-up { -webkit-transform: translate(-42.95775em, 30px); -moz-transform: translate(-42.95775em, 30px); -ms-transform: translate(-42.95775em, 30px); -o-transform: translate(-42.95775em, 30px); transform: translate(-42.95775em, 30px) } .mobile-layers .ground-12.fade-up.is-visible { -webkit-transform: translate(-42.95775em); -moz-transform: translate(-42.95775em); -ms-transform: translate(-42.95775em); -o-transform: translate(-42.95775em); transform: translate(-42.95775em) } } .mobile-layers .ground-14 { position: absolute; left: 50%; top: 7147px; z-index: 10; width: 406.5px; height: 222.5px; -webkit-transform: translateX(43px); -moz-transform: translateX(43px); -ms-transform: translateX(43px); -o-transform: translateX(43px); transform: translateX(43px); background: url(../images/ground-14.png) 0 0/contain no-repeat } .mobile-layers .ground-14.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .ground-14.fade-in.is-visible { opacity: 1 } .mobile-layers .ground-14.fade-up { opacity: 0; -webkit-transform: translate(43px, 30px); -moz-transform: translate(43px, 30px); -ms-transform: translate(43px, 30px); -o-transform: translate(43px, 30px); transform: translate(43px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .ground-14.fade-up.is-visible { opacity: 1; -webkit-transform: translate(43px); -moz-transform: translate(43px); -ms-transform: translate(43px); -o-transform: translate(43px); transform: translate(43px) } @media (max-width: 1136px) { .mobile-layers .ground-14 { top: 629.13732vw; width: 35.78345vw; height: 19.58627vw; font-size: 1vw; -webkit-transform: translateX(3.78521em); -moz-transform: translateX(3.78521em); -ms-transform: translateX(3.78521em); -o-transform: translateX(3.78521em); transform: translateX(3.78521em) } .mobile-layers .ground-14.fade-up { -webkit-transform: translate(3.78521em, 30px); -moz-transform: translate(3.78521em, 30px); -ms-transform: translate(3.78521em, 30px); -o-transform: translate(3.78521em, 30px); transform: translate(3.78521em, 30px) } .mobile-layers .ground-14.fade-up.is-visible { -webkit-transform: translate(3.78521em); -moz-transform: translate(3.78521em); -ms-transform: translate(3.78521em); -o-transform: translate(3.78521em); transform: translate(3.78521em) } } .mobile-layers .ground-15 { position: absolute; left: 50%; top: 7800px; z-index: 10; width: 353.6px; height: 215.56px; -webkit-transform: translateX(-522px); -moz-transform: translateX(-522px); -ms-transform: translateX(-522px); -o-transform: translateX(-522px); transform: translateX(-522px); background: url(../images/ground-15.png) 0 0/contain no-repeat } .mobile-layers .ground-15.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .ground-15.fade-in.is-visible { opacity: 1 } .mobile-layers .ground-15.fade-up { opacity: 0; -webkit-transform: translate(-522px, 30px); -moz-transform: translate(-522px, 30px); -ms-transform: translate(-522px, 30px); -o-transform: translate(-522px, 30px); transform: translate(-522px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .ground-15.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-522px); -moz-transform: translate(-522px); -ms-transform: translate(-522px); -o-transform: translate(-522px); transform: translate(-522px) } @media (max-width: 1136px) { .mobile-layers .ground-15 { top: 686.61972vw; width: 31.12676vw; height: 18.97535vw; font-size: 1vw; -webkit-transform: translateX(-45.9507em); -moz-transform: translateX(-45.9507em); -ms-transform: translateX(-45.9507em); -o-transform: translateX(-45.9507em); transform: translateX(-45.9507em) } .mobile-layers .ground-15.fade-up { -webkit-transform: translate(-45.9507em, 30px); -moz-transform: translate(-45.9507em, 30px); -ms-transform: translate(-45.9507em, 30px); -o-transform: translate(-45.9507em, 30px); transform: translate(-45.9507em, 30px) } .mobile-layers .ground-15.fade-up.is-visible { -webkit-transform: translate(-45.9507em); -moz-transform: translate(-45.9507em); -ms-transform: translate(-45.9507em); -o-transform: translate(-45.9507em); transform: translate(-45.9507em) } } .mobile-layers .ground-16 { position: absolute; left: 50%; top: 8167px; z-index: 9; width: 811.91px; height: 635.62px; -webkit-transform: translateX(-393px); -moz-transform: translateX(-393px); -ms-transform: translateX(-393px); -o-transform: translateX(-393px); transform: translateX(-393px); background: url(../images/ground-11.png) 0 0/contain no-repeat } .mobile-layers .ground-16.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .ground-16.fade-in.is-visible { opacity: 1 } .mobile-layers .ground-16.fade-up { opacity: 0; -webkit-transform: translate(-393px, 30px); -moz-transform: translate(-393px, 30px); -ms-transform: translate(-393px, 30px); -o-transform: translate(-393px, 30px); transform: translate(-393px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .ground-16.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-393px); -moz-transform: translate(-393px); -ms-transform: translate(-393px); -o-transform: translate(-393px); transform: translate(-393px) } @media (max-width: 1136px) { .mobile-layers .ground-16 { top: 718.92606vw; width: 71.47095vw; height: 55.95246vw; font-size: 1vw; -webkit-transform: translateX(-34.59507em); -moz-transform: translateX(-34.59507em); -ms-transform: translateX(-34.59507em); -o-transform: translateX(-34.59507em); transform: translateX(-34.59507em) } .mobile-layers .ground-16.fade-up { -webkit-transform: translate(-34.59507em, 30px); -moz-transform: translate(-34.59507em, 30px); -ms-transform: translate(-34.59507em, 30px); -o-transform: translate(-34.59507em, 30px); transform: translate(-34.59507em, 30px) } .mobile-layers .ground-16.fade-up.is-visible { -webkit-transform: translate(-34.59507em); -moz-transform: translate(-34.59507em); -ms-transform: translate(-34.59507em); -o-transform: translate(-34.59507em); transform: translate(-34.59507em) } } .mobile-layers .ground-17 { position: absolute; left: 50%; top: 9438px; z-index: 10; width: 655.215px; height: 502.15px; -webkit-transform: translateX(-574px); -moz-transform: translateX(-574px); -ms-transform: translateX(-574px); -o-transform: translateX(-574px); transform: translateX(-574px); background: url(../images/ground-17.png) 0 0/contain no-repeat } .mobile-layers .ground-17.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .ground-17.fade-in.is-visible { opacity: 1 } .mobile-layers .ground-17.fade-up { opacity: 0; -webkit-transform: translate(-574px, 30px); -moz-transform: translate(-574px, 30px); -ms-transform: translate(-574px, 30px); -o-transform: translate(-574px, 30px); transform: translate(-574px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .ground-17.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-574px); -moz-transform: translate(-574px); -ms-transform: translate(-574px); -o-transform: translate(-574px); transform: translate(-574px) } @media (max-width: 1136px) { .mobile-layers .ground-17 { top: 830.80986vw; width: 57.67738vw; height: 44.20335vw; font-size: 1vw; -webkit-transform: translateX(-50.52817em); -moz-transform: translateX(-50.52817em); -ms-transform: translateX(-50.52817em); -o-transform: translateX(-50.52817em); transform: translateX(-50.52817em) } .mobile-layers .ground-17.fade-up { -webkit-transform: translate(-50.52817em, 30px); -moz-transform: translate(-50.52817em, 30px); -ms-transform: translate(-50.52817em, 30px); -o-transform: translate(-50.52817em, 30px); transform: translate(-50.52817em, 30px) } .mobile-layers .ground-17.fade-up.is-visible { -webkit-transform: translate(-50.52817em); -moz-transform: translate(-50.52817em); -ms-transform: translate(-50.52817em); -o-transform: translate(-50.52817em); transform: translate(-50.52817em) } } .mobile-layers .ground-18 { position: absolute; left: 50%; top: 9879px; z-index: 13; width: 422.28px; height: 429.08px; -webkit-transform: translateX(-6px); -moz-transform: translateX(-6px); -ms-transform: translateX(-6px); -o-transform: translateX(-6px); transform: translateX(-6px); background: url(../images/ground-18.png) 0 0/contain no-repeat } .mobile-layers .ground-18.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .ground-18.fade-in.is-visible { opacity: 1 } .mobile-layers .ground-18.fade-up { opacity: 0; -webkit-transform: translate(-6px, 30px); -moz-transform: translate(-6px, 30px); -ms-transform: translate(-6px, 30px); -o-transform: translate(-6px, 30px); transform: translate(-6px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .ground-18.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-6px); -moz-transform: translate(-6px); -ms-transform: translate(-6px); -o-transform: translate(-6px); transform: translate(-6px) } @media (max-width: 1136px) { .mobile-layers .ground-18 { top: 869.63028vw; width: 37.17254vw; height: 37.77113vw; font-size: 1vw; -webkit-transform: translateX(-.52817em); -moz-transform: translateX(-.52817em); -ms-transform: translateX(-.52817em); -o-transform: translateX(-.52817em); transform: translateX(-.52817em) } .mobile-layers .ground-18.fade-up { -webkit-transform: translate(-.52817em, 30px); -moz-transform: translate(-.52817em, 30px); -ms-transform: translate(-.52817em, 30px); -o-transform: translate(-.52817em, 30px); transform: translate(-.52817em, 30px) } .mobile-layers .ground-18.fade-up.is-visible { -webkit-transform: translate(-.52817em); -moz-transform: translate(-.52817em); -ms-transform: translate(-.52817em); -o-transform: translate(-.52817em); transform: translate(-.52817em) } } .mobile-layers .ground-19 { position: absolute; left: 50%; top: 10136px; z-index: 10; width: 141.52px; height: 90.48px; -webkit-transform: translateX(-167px); -moz-transform: translateX(-167px); -ms-transform: translateX(-167px); -o-transform: translateX(-167px); transform: translateX(-167px); background: url(../images/ground-19.png) 0 0/contain no-repeat } .mobile-layers .ground-19.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .ground-19.fade-in.is-visible { opacity: 1 } .mobile-layers .ground-19.fade-up { opacity: 0; -webkit-transform: translate(-167px, 30px); -moz-transform: translate(-167px, 30px); -ms-transform: translate(-167px, 30px); -o-transform: translate(-167px, 30px); transform: translate(-167px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .ground-19.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-167px); -moz-transform: translate(-167px); -ms-transform: translate(-167px); -o-transform: translate(-167px); transform: translate(-167px) } @media (max-width: 1136px) { .mobile-layers .ground-19 { top: 892.25352vw; width: 12.45775vw; height: 7.96479vw; font-size: 1vw; -webkit-transform: translateX(-14.7007em); -moz-transform: translateX(-14.7007em); -ms-transform: translateX(-14.7007em); -o-transform: translateX(-14.7007em); transform: translateX(-14.7007em) } .mobile-layers .ground-19.fade-up { -webkit-transform: translate(-14.7007em, 30px); -moz-transform: translate(-14.7007em, 30px); -ms-transform: translate(-14.7007em, 30px); -o-transform: translate(-14.7007em, 30px); transform: translate(-14.7007em, 30px) } .mobile-layers .ground-19.fade-up.is-visible { -webkit-transform: translate(-14.7007em); -moz-transform: translate(-14.7007em); -ms-transform: translate(-14.7007em); -o-transform: translate(-14.7007em); transform: translate(-14.7007em) } } .mobile-layers .ground-20 { position: absolute; left: 50%; top: 10233px; z-index: 10; width: 126.75px; height: 64.5px; -webkit-transform: translateX(277px); -moz-transform: translateX(277px); -ms-transform: translateX(277px); -o-transform: translateX(277px); transform: translateX(277px); background: url(../images/ground-20.png) 0 0/contain no-repeat } .mobile-layers .ground-20.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .ground-20.fade-in.is-visible { opacity: 1 } .mobile-layers .ground-20.fade-up { opacity: 0; -webkit-transform: translate(277px, 30px); -moz-transform: translate(277px, 30px); -ms-transform: translate(277px, 30px); -o-transform: translate(277px, 30px); transform: translate(277px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .ground-20.fade-up.is-visible { opacity: 1; -webkit-transform: translate(277px); -moz-transform: translate(277px); -ms-transform: translate(277px); -o-transform: translate(277px); transform: translate(277px) } @media (max-width: 1136px) { .mobile-layers .ground-20 { top: 900.79225vw; width: 11.15757vw; height: 5.67782vw; font-size: 1vw; -webkit-transform: translateX(24.3838em); -moz-transform: translateX(24.3838em); -ms-transform: translateX(24.3838em); -o-transform: translateX(24.3838em); transform: translateX(24.3838em) } .mobile-layers .ground-20.fade-up { -webkit-transform: translate(24.3838em, 30px); -moz-transform: translate(24.3838em, 30px); -ms-transform: translate(24.3838em, 30px); -o-transform: translate(24.3838em, 30px); transform: translate(24.3838em, 30px) } .mobile-layers .ground-20.fade-up.is-visible { -webkit-transform: translate(24.3838em); -moz-transform: translate(24.3838em); -ms-transform: translate(24.3838em); -o-transform: translate(24.3838em); transform: translate(24.3838em) } } .mobile-layers .ground-21 { position: absolute; left: 50%; top: 10309px; z-index: 10; width: 101.2px; height: 59.4px; -webkit-transform: translateX(236px); -moz-transform: translateX(236px); -ms-transform: translateX(236px); -o-transform: translateX(236px); transform: translateX(236px); background: url(../images/ground-21.png) 0 0/contain no-repeat } .mobile-layers .ground-21.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .ground-21.fade-in.is-visible { opacity: 1 } .mobile-layers .ground-21.fade-up { opacity: 0; -webkit-transform: translate(236px, 30px); -moz-transform: translate(236px, 30px); -ms-transform: translate(236px, 30px); -o-transform: translate(236px, 30px); transform: translate(236px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .ground-21.fade-up.is-visible { opacity: 1; -webkit-transform: translate(236px); -moz-transform: translate(236px); -ms-transform: translate(236px); -o-transform: translate(236px); transform: translate(236px) } @media (max-width: 1136px) { .mobile-layers .ground-21 { top: 907.48239vw; width: 8.90845vw; height: 5.22887vw; font-size: 1vw; -webkit-transform: translateX(20.77465em); -moz-transform: translateX(20.77465em); -ms-transform: translateX(20.77465em); -o-transform: translateX(20.77465em); transform: translateX(20.77465em) } .mobile-layers .ground-21.fade-up { -webkit-transform: translate(20.77465em, 30px); -moz-transform: translate(20.77465em, 30px); -ms-transform: translate(20.77465em, 30px); -o-transform: translate(20.77465em, 30px); transform: translate(20.77465em, 30px) } .mobile-layers .ground-21.fade-up.is-visible { -webkit-transform: translate(20.77465em); -moz-transform: translate(20.77465em); -ms-transform: translate(20.77465em); -o-transform: translate(20.77465em); transform: translate(20.77465em) } } .mobile-layers .tree-1-shadow { position: absolute; left: 50%; top: 295px; z-index: 10; width: 187.2px; height: 125.45px; -webkit-transform: translateX(-166px); -moz-transform: translateX(-166px); -ms-transform: translateX(-166px); -o-transform: translateX(-166px); transform: translateX(-166px); background: url(../images/tree-5-shadow.png) 0 0/contain no-repeat } .mobile-layers .tree-1-shadow.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .tree-1-shadow.fade-in.is-visible { opacity: 1 } .mobile-layers .tree-1-shadow.fade-up { opacity: 0; -webkit-transform: translate(-166px, 30px); -moz-transform: translate(-166px, 30px); -ms-transform: translate(-166px, 30px); -o-transform: translate(-166px, 30px); transform: translate(-166px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .tree-1-shadow.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-166px); -moz-transform: translate(-166px); -ms-transform: translate(-166px); -o-transform: translate(-166px); transform: translate(-166px) } @media (max-width: 1136px) { .mobile-layers .tree-1-shadow { top: 25.96831vw; width: 16.47887vw; height: 11.04313vw; font-size: 1vw; -webkit-transform: translateX(-14.61268em); -moz-transform: translateX(-14.61268em); -ms-transform: translateX(-14.61268em); -o-transform: translateX(-14.61268em); transform: translateX(-14.61268em) } .mobile-layers .tree-1-shadow.fade-up { -webkit-transform: translate(-14.61268em, 30px); -moz-transform: translate(-14.61268em, 30px); -ms-transform: translate(-14.61268em, 30px); -o-transform: translate(-14.61268em, 30px); transform: translate(-14.61268em, 30px) } .mobile-layers .tree-1-shadow.fade-up.is-visible { -webkit-transform: translate(-14.61268em); -moz-transform: translate(-14.61268em); -ms-transform: translate(-14.61268em); -o-transform: translate(-14.61268em); transform: translate(-14.61268em) } } .mobile-layers .tree-1 { position: absolute; left: 50%; top: 295px; z-index: 10; width: 187.2px; height: 125.45px; -webkit-transform: translateX(-166px); -moz-transform: translateX(-166px); -ms-transform: translateX(-166px); -o-transform: translateX(-166px); transform: translateX(-166px); background: url(../images/tree-5.png) 0 0/contain no-repeat } .mobile-layers .tree-1.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .tree-1.fade-in.is-visible { opacity: 1 } .mobile-layers .tree-1.fade-up { opacity: 0; -webkit-transform: translate(-166px, 30px); -moz-transform: translate(-166px, 30px); -ms-transform: translate(-166px, 30px); -o-transform: translate(-166px, 30px); transform: translate(-166px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .tree-1.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-166px); -moz-transform: translate(-166px); -ms-transform: translate(-166px); -o-transform: translate(-166px); transform: translate(-166px) } @media (max-width: 1136px) { .mobile-layers .tree-1 { top: 25.96831vw; width: 16.47887vw; height: 11.04313vw; font-size: 1vw; -webkit-transform: translateX(-14.61268em); -moz-transform: translateX(-14.61268em); -ms-transform: translateX(-14.61268em); -o-transform: translateX(-14.61268em); transform: translateX(-14.61268em) } .mobile-layers .tree-1.fade-up { -webkit-transform: translate(-14.61268em, 30px); -moz-transform: translate(-14.61268em, 30px); -ms-transform: translate(-14.61268em, 30px); -o-transform: translate(-14.61268em, 30px); transform: translate(-14.61268em, 30px) } .mobile-layers .tree-1.fade-up.is-visible { -webkit-transform: translate(-14.61268em); -moz-transform: translate(-14.61268em); -ms-transform: translate(-14.61268em); -o-transform: translate(-14.61268em); transform: translate(-14.61268em) } } .mobile-layers .tree-2-shadow { position: absolute; left: 50%; top: 327px; z-index: 10; width: 149.04px; height: 102.12px; -webkit-transform: translateX(-103px); -moz-transform: translateX(-103px); -ms-transform: translateX(-103px); -o-transform: translateX(-103px); transform: translateX(-103px); background: url(../images/tree-6-shadow.png) 0 0/contain no-repeat } .mobile-layers .tree-2-shadow.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .tree-2-shadow.fade-in.is-visible { opacity: 1 } .mobile-layers .tree-2-shadow.fade-up { opacity: 0; -webkit-transform: translate(-103px, 30px); -moz-transform: translate(-103px, 30px); -ms-transform: translate(-103px, 30px); -o-transform: translate(-103px, 30px); transform: translate(-103px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .tree-2-shadow.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-103px); -moz-transform: translate(-103px); -ms-transform: translate(-103px); -o-transform: translate(-103px); transform: translate(-103px) } @media (max-width: 1136px) { .mobile-layers .tree-2-shadow { top: 28.78521vw; width: 13.11972vw; height: 8.98944vw; font-size: 1vw; -webkit-transform: translateX(-9.0669em); -moz-transform: translateX(-9.0669em); -ms-transform: translateX(-9.0669em); -o-transform: translateX(-9.0669em); transform: translateX(-9.0669em) } .mobile-layers .tree-2-shadow.fade-up { -webkit-transform: translate(-9.0669em, 30px); -moz-transform: translate(-9.0669em, 30px); -ms-transform: translate(-9.0669em, 30px); -o-transform: translate(-9.0669em, 30px); transform: translate(-9.0669em, 30px) } .mobile-layers .tree-2-shadow.fade-up.is-visible { -webkit-transform: translate(-9.0669em); -moz-transform: translate(-9.0669em); -ms-transform: translate(-9.0669em); -o-transform: translate(-9.0669em); transform: translate(-9.0669em) } } .mobile-layers .tree-2 { position: absolute; left: 50%; top: 327px; z-index: 10; width: 149.04px; height: 102.12px; -webkit-transform: translateX(-103px); -moz-transform: translateX(-103px); -ms-transform: translateX(-103px); -o-transform: translateX(-103px); transform: translateX(-103px); background: url(../images/tree-6.png) 0 0/contain no-repeat } .mobile-layers .tree-2.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .tree-2.fade-in.is-visible { opacity: 1 } .mobile-layers .tree-2.fade-up { opacity: 0; -webkit-transform: translate(-103px, 30px); -moz-transform: translate(-103px, 30px); -ms-transform: translate(-103px, 30px); -o-transform: translate(-103px, 30px); transform: translate(-103px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .tree-2.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-103px); -moz-transform: translate(-103px); -ms-transform: translate(-103px); -o-transform: translate(-103px); transform: translate(-103px) } @media (max-width: 1136px) { .mobile-layers .tree-2 { top: 28.78521vw; width: 13.11972vw; height: 8.98944vw; font-size: 1vw; -webkit-transform: translateX(-9.0669em); -moz-transform: translateX(-9.0669em); -ms-transform: translateX(-9.0669em); -o-transform: translateX(-9.0669em); transform: translateX(-9.0669em) } .mobile-layers .tree-2.fade-up { -webkit-transform: translate(-9.0669em, 30px); -moz-transform: translate(-9.0669em, 30px); -ms-transform: translate(-9.0669em, 30px); -o-transform: translate(-9.0669em, 30px); transform: translate(-9.0669em, 30px) } .mobile-layers .tree-2.fade-up.is-visible { -webkit-transform: translate(-9.0669em); -moz-transform: translate(-9.0669em); -ms-transform: translate(-9.0669em); -o-transform: translate(-9.0669em); transform: translate(-9.0669em) } } .mobile-layers .tree-3-shadow { position: absolute; left: 50%; top: 330px; z-index: 10; width: 209.84px; height: 146.4px; -webkit-transform: translateX(-63px); -moz-transform: translateX(-63px); -ms-transform: translateX(-63px); -o-transform: translateX(-63px); transform: translateX(-63px); background: url(../images/tree-3-shadow.png) 0 0/contain no-repeat } .mobile-layers .tree-3-shadow.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .tree-3-shadow.fade-in.is-visible { opacity: 1 } .mobile-layers .tree-3-shadow.fade-up { opacity: 0; -webkit-transform: translate(-63px, 30px); -moz-transform: translate(-63px, 30px); -ms-transform: translate(-63px, 30px); -o-transform: translate(-63px, 30px); transform: translate(-63px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .tree-3-shadow.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-63px); -moz-transform: translate(-63px); -ms-transform: translate(-63px); -o-transform: translate(-63px); transform: translate(-63px) } @media (max-width: 1136px) { .mobile-layers .tree-3-shadow { top: 29.0493vw; width: 18.47183vw; height: 12.88732vw; font-size: 1vw; -webkit-transform: translateX(-5.54577em); -moz-transform: translateX(-5.54577em); -ms-transform: translateX(-5.54577em); -o-transform: translateX(-5.54577em); transform: translateX(-5.54577em) } .mobile-layers .tree-3-shadow.fade-up { -webkit-transform: translate(-5.54577em, 30px); -moz-transform: translate(-5.54577em, 30px); -ms-transform: translate(-5.54577em, 30px); -o-transform: translate(-5.54577em, 30px); transform: translate(-5.54577em, 30px) } .mobile-layers .tree-3-shadow.fade-up.is-visible { -webkit-transform: translate(-5.54577em); -moz-transform: translate(-5.54577em); -ms-transform: translate(-5.54577em); -o-transform: translate(-5.54577em); transform: translate(-5.54577em) } } .mobile-layers .tree-3 { position: absolute; left: 50%; top: 330px; z-index: 10; width: 209.84px; height: 146.4px; -webkit-transform: translateX(-63px); -moz-transform: translateX(-63px); -ms-transform: translateX(-63px); -o-transform: translateX(-63px); transform: translateX(-63px); background: url(../images/tree-3.png) 0 0/contain no-repeat } .mobile-layers .tree-3.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .tree-3.fade-in.is-visible { opacity: 1 } .mobile-layers .tree-3.fade-up { opacity: 0; -webkit-transform: translate(-63px, 30px); -moz-transform: translate(-63px, 30px); -ms-transform: translate(-63px, 30px); -o-transform: translate(-63px, 30px); transform: translate(-63px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .tree-3.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-63px); -moz-transform: translate(-63px); -ms-transform: translate(-63px); -o-transform: translate(-63px); transform: translate(-63px) } @media (max-width: 1136px) { .mobile-layers .tree-3 { top: 29.0493vw; width: 18.47183vw; height: 12.88732vw; font-size: 1vw; -webkit-transform: translateX(-5.54577em); -moz-transform: translateX(-5.54577em); -ms-transform: translateX(-5.54577em); -o-transform: translateX(-5.54577em); transform: translateX(-5.54577em) } .mobile-layers .tree-3.fade-up { -webkit-transform: translate(-5.54577em, 30px); -moz-transform: translate(-5.54577em, 30px); -ms-transform: translate(-5.54577em, 30px); -o-transform: translate(-5.54577em, 30px); transform: translate(-5.54577em, 30px) } .mobile-layers .tree-3.fade-up.is-visible { -webkit-transform: translate(-5.54577em); -moz-transform: translate(-5.54577em); -ms-transform: translate(-5.54577em); -o-transform: translate(-5.54577em); transform: translate(-5.54577em) } } .mobile-layers .tree-4-shadow { position: absolute; left: 50%; top: 301px; z-index: 10; width: 205.74px; height: 144.18px; -webkit-transform: translateX(-8px); -moz-transform: translateX(-8px); -ms-transform: translateX(-8px); -o-transform: translateX(-8px); transform: translateX(-8px); background: url(../images/tree-9-shadow.png) 0 0/contain no-repeat } .mobile-layers .tree-4-shadow.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .tree-4-shadow.fade-in.is-visible { opacity: 1 } .mobile-layers .tree-4-shadow.fade-up { opacity: 0; -webkit-transform: translate(-8px, 30px); -moz-transform: translate(-8px, 30px); -ms-transform: translate(-8px, 30px); -o-transform: translate(-8px, 30px); transform: translate(-8px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .tree-4-shadow.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-8px); -moz-transform: translate(-8px); -ms-transform: translate(-8px); -o-transform: translate(-8px); transform: translate(-8px) } @media (max-width: 1136px) { .mobile-layers .tree-4-shadow { top: 26.49648vw; width: 18.11092vw; height: 12.6919vw; font-size: 1vw; -webkit-transform: translateX(-.70423em); -moz-transform: translateX(-.70423em); -ms-transform: translateX(-.70423em); -o-transform: translateX(-.70423em); transform: translateX(-.70423em) } .mobile-layers .tree-4-shadow.fade-up { -webkit-transform: translate(-.70423em, 30px); -moz-transform: translate(-.70423em, 30px); -ms-transform: translate(-.70423em, 30px); -o-transform: translate(-.70423em, 30px); transform: translate(-.70423em, 30px) } .mobile-layers .tree-4-shadow.fade-up.is-visible { -webkit-transform: translate(-.70423em); -moz-transform: translate(-.70423em); -ms-transform: translate(-.70423em); -o-transform: translate(-.70423em); transform: translate(-.70423em) } } .mobile-layers .tree-4 { position: absolute; left: 50%; top: 301px; z-index: 10; width: 205.74px; height: 144.18px; -webkit-transform: translateX(-8px); -moz-transform: translateX(-8px); -ms-transform: translateX(-8px); -o-transform: translateX(-8px); transform: translateX(-8px); background: url(../images/tree-9.png) 0 0/contain no-repeat } .mobile-layers .tree-4.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .tree-4.fade-in.is-visible { opacity: 1 } .mobile-layers .tree-4.fade-up { opacity: 0; -webkit-transform: translate(-8px, 30px); -moz-transform: translate(-8px, 30px); -ms-transform: translate(-8px, 30px); -o-transform: translate(-8px, 30px); transform: translate(-8px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .tree-4.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-8px); -moz-transform: translate(-8px); -ms-transform: translate(-8px); -o-transform: translate(-8px); transform: translate(-8px) } @media (max-width: 1136px) { .mobile-layers .tree-4 { top: 26.49648vw; width: 18.11092vw; height: 12.6919vw; font-size: 1vw; -webkit-transform: translateX(-.70423em); -moz-transform: translateX(-.70423em); -ms-transform: translateX(-.70423em); -o-transform: translateX(-.70423em); transform: translateX(-.70423em) } .mobile-layers .tree-4.fade-up { -webkit-transform: translate(-.70423em, 30px); -moz-transform: translate(-.70423em, 30px); -ms-transform: translate(-.70423em, 30px); -o-transform: translate(-.70423em, 30px); transform: translate(-.70423em, 30px) } .mobile-layers .tree-4.fade-up.is-visible { -webkit-transform: translate(-.70423em); -moz-transform: translate(-.70423em); -ms-transform: translate(-.70423em); -o-transform: translate(-.70423em); transform: translate(-.70423em) } } .mobile-layers .tree-5-shadow { position: absolute; left: 50%; top: 224px; z-index: 10; width: 239.73px; height: 155.55px; -webkit-transform: translateX(232px); -moz-transform: translateX(232px); -ms-transform: translateX(232px); -o-transform: translateX(232px); transform: translateX(232px); background: url(../images/tree-7-shadow.png) 0 0/contain no-repeat } .mobile-layers .tree-5-shadow.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .tree-5-shadow.fade-in.is-visible { opacity: 1 } .mobile-layers .tree-5-shadow.fade-up { opacity: 0; -webkit-transform: translate(232px, 30px); -moz-transform: translate(232px, 30px); -ms-transform: translate(232px, 30px); -o-transform: translate(232px, 30px); transform: translate(232px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .tree-5-shadow.fade-up.is-visible { opacity: 1; -webkit-transform: translate(232px); -moz-transform: translate(232px); -ms-transform: translate(232px); -o-transform: translate(232px); transform: translate(232px) } @media (max-width: 1136px) { .mobile-layers .tree-5-shadow { top: 19.71831vw; width: 21.10299vw; height: 13.69278vw; font-size: 1vw; -webkit-transform: translateX(20.42254em); -moz-transform: translateX(20.42254em); -ms-transform: translateX(20.42254em); -o-transform: translateX(20.42254em); transform: translateX(20.42254em) } .mobile-layers .tree-5-shadow.fade-up { -webkit-transform: translate(20.42254em, 30px); -moz-transform: translate(20.42254em, 30px); -ms-transform: translate(20.42254em, 30px); -o-transform: translate(20.42254em, 30px); transform: translate(20.42254em, 30px) } .mobile-layers .tree-5-shadow.fade-up.is-visible { -webkit-transform: translate(20.42254em); -moz-transform: translate(20.42254em); -ms-transform: translate(20.42254em); -o-transform: translate(20.42254em); transform: translate(20.42254em) } } .mobile-layers .tree-5 { position: absolute; left: 50%; top: 224px; z-index: 10; width: 239.73px; height: 155.55px; -webkit-transform: translateX(232px); -moz-transform: translateX(232px); -ms-transform: translateX(232px); -o-transform: translateX(232px); transform: translateX(232px); background: url(../images/tree-7.png) 0 0/contain no-repeat } .mobile-layers .tree-5.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .tree-5.fade-in.is-visible { opacity: 1 } .mobile-layers .tree-5.fade-up { opacity: 0; -webkit-transform: translate(232px, 30px); -moz-transform: translate(232px, 30px); -ms-transform: translate(232px, 30px); -o-transform: translate(232px, 30px); transform: translate(232px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .tree-5.fade-up.is-visible { opacity: 1; -webkit-transform: translate(232px); -moz-transform: translate(232px); -ms-transform: translate(232px); -o-transform: translate(232px); transform: translate(232px) } @media (max-width: 1136px) { .mobile-layers .tree-5 { top: 19.71831vw; width: 21.10299vw; height: 13.69278vw; font-size: 1vw; -webkit-transform: translateX(20.42254em); -moz-transform: translateX(20.42254em); -ms-transform: translateX(20.42254em); -o-transform: translateX(20.42254em); transform: translateX(20.42254em) } .mobile-layers .tree-5.fade-up { -webkit-transform: translate(20.42254em, 30px); -moz-transform: translate(20.42254em, 30px); -ms-transform: translate(20.42254em, 30px); -o-transform: translate(20.42254em, 30px); transform: translate(20.42254em, 30px) } .mobile-layers .tree-5.fade-up.is-visible { -webkit-transform: translate(20.42254em); -moz-transform: translate(20.42254em); -ms-transform: translate(20.42254em); -o-transform: translate(20.42254em); transform: translate(20.42254em) } } .mobile-layers .tree-6-shadow { position: absolute; left: 50%; top: 285px; z-index: 10; width: 184.8px; height: 126.5px; -webkit-transform: translateX(181px); -moz-transform: translateX(181px); -ms-transform: translateX(181px); -o-transform: translateX(181px); transform: translateX(181px); background: url(../images/tree-8-shadow.png) 0 0/contain no-repeat } .mobile-layers .tree-6-shadow.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .tree-6-shadow.fade-in.is-visible { opacity: 1 } .mobile-layers .tree-6-shadow.fade-up { opacity: 0; -webkit-transform: translate(181px, 30px); -moz-transform: translate(181px, 30px); -ms-transform: translate(181px, 30px); -o-transform: translate(181px, 30px); transform: translate(181px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .tree-6-shadow.fade-up.is-visible { opacity: 1; -webkit-transform: translate(181px); -moz-transform: translate(181px); -ms-transform: translate(181px); -o-transform: translate(181px); transform: translate(181px) } @media (max-width: 1136px) { .mobile-layers .tree-6-shadow { top: 25.08803vw; width: 16.26761vw; height: 11.13556vw; font-size: 1vw; -webkit-transform: translateX(15.9331em); -moz-transform: translateX(15.9331em); -ms-transform: translateX(15.9331em); -o-transform: translateX(15.9331em); transform: translateX(15.9331em) } .mobile-layers .tree-6-shadow.fade-up { -webkit-transform: translate(15.9331em, 30px); -moz-transform: translate(15.9331em, 30px); -ms-transform: translate(15.9331em, 30px); -o-transform: translate(15.9331em, 30px); transform: translate(15.9331em, 30px) } .mobile-layers .tree-6-shadow.fade-up.is-visible { -webkit-transform: translate(15.9331em); -moz-transform: translate(15.9331em); -ms-transform: translate(15.9331em); -o-transform: translate(15.9331em); transform: translate(15.9331em) } } .mobile-layers .tree-6 { position: absolute; left: 50%; top: 285px; z-index: 10; width: 184.8px; height: 126.5px; -webkit-transform: translateX(181px); -moz-transform: translateX(181px); -ms-transform: translateX(181px); -o-transform: translateX(181px); transform: translateX(181px); background: url(../images/tree-8.png) 0 0/contain no-repeat } .mobile-layers .tree-6.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .tree-6.fade-in.is-visible { opacity: 1 } .mobile-layers .tree-6.fade-up { opacity: 0; -webkit-transform: translate(181px, 30px); -moz-transform: translate(181px, 30px); -ms-transform: translate(181px, 30px); -o-transform: translate(181px, 30px); transform: translate(181px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .tree-6.fade-up.is-visible { opacity: 1; -webkit-transform: translate(181px); -moz-transform: translate(181px); -ms-transform: translate(181px); -o-transform: translate(181px); transform: translate(181px) } @media (max-width: 1136px) { .mobile-layers .tree-6 { top: 25.08803vw; width: 16.26761vw; height: 11.13556vw; font-size: 1vw; -webkit-transform: translateX(15.9331em); -moz-transform: translateX(15.9331em); -ms-transform: translateX(15.9331em); -o-transform: translateX(15.9331em); transform: translateX(15.9331em) } .mobile-layers .tree-6.fade-up { -webkit-transform: translate(15.9331em, 30px); -moz-transform: translate(15.9331em, 30px); -ms-transform: translate(15.9331em, 30px); -o-transform: translate(15.9331em, 30px); transform: translate(15.9331em, 30px) } .mobile-layers .tree-6.fade-up.is-visible { -webkit-transform: translate(15.9331em); -moz-transform: translate(15.9331em); -ms-transform: translate(15.9331em); -o-transform: translate(15.9331em); transform: translate(15.9331em) } } .mobile-layers .tree-7-shadow { position: absolute; left: 50%; top: 292px; z-index: 10; width: 248.88px; height: 206.18px; -webkit-transform: translateX(-703px); -moz-transform: translateX(-703px); -ms-transform: translateX(-703px); -o-transform: translateX(-703px); transform: translateX(-703px); background: url(../images/tree-12-shadow.png) 0 0/contain no-repeat } .mobile-layers .tree-7-shadow.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .tree-7-shadow.fade-in.is-visible { opacity: 1 } .mobile-layers .tree-7-shadow.fade-up { opacity: 0; -webkit-transform: translate(-703px, 30px); -moz-transform: translate(-703px, 30px); -ms-transform: translate(-703px, 30px); -o-transform: translate(-703px, 30px); transform: translate(-703px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .tree-7-shadow.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-703px); -moz-transform: translate(-703px); -ms-transform: translate(-703px); -o-transform: translate(-703px); transform: translate(-703px) } @media (max-width: 1136px) { .mobile-layers .tree-7-shadow { top: 25.70423vw; width: 21.90845vw; height: 18.14965vw; font-size: 1vw; -webkit-transform: translateX(-61.8838em); -moz-transform: translateX(-61.8838em); -ms-transform: translateX(-61.8838em); -o-transform: translateX(-61.8838em); transform: translateX(-61.8838em) } .mobile-layers .tree-7-shadow.fade-up { -webkit-transform: translate(-61.8838em, 30px); -moz-transform: translate(-61.8838em, 30px); -ms-transform: translate(-61.8838em, 30px); -o-transform: translate(-61.8838em, 30px); transform: translate(-61.8838em, 30px) } .mobile-layers .tree-7-shadow.fade-up.is-visible { -webkit-transform: translate(-61.8838em); -moz-transform: translate(-61.8838em); -ms-transform: translate(-61.8838em); -o-transform: translate(-61.8838em); transform: translate(-61.8838em) } } .mobile-layers .tree-7 { position: absolute; left: 50%; top: 292px; z-index: 10; width: 248.88px; height: 206.18px; -webkit-transform: translateX(-703px); -moz-transform: translateX(-703px); -ms-transform: translateX(-703px); -o-transform: translateX(-703px); transform: translateX(-703px); background: url(../images/tree-12.png) 0 0/contain no-repeat } .mobile-layers .tree-7.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .tree-7.fade-in.is-visible { opacity: 1 } .mobile-layers .tree-7.fade-up { opacity: 0; -webkit-transform: translate(-703px, 30px); -moz-transform: translate(-703px, 30px); -ms-transform: translate(-703px, 30px); -o-transform: translate(-703px, 30px); transform: translate(-703px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .tree-7.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-703px); -moz-transform: translate(-703px); -ms-transform: translate(-703px); -o-transform: translate(-703px); transform: translate(-703px) } @media (max-width: 1136px) { .mobile-layers .tree-7 { top: 25.70423vw; width: 21.90845vw; height: 18.14965vw; font-size: 1vw; -webkit-transform: translateX(-61.8838em); -moz-transform: translateX(-61.8838em); -ms-transform: translateX(-61.8838em); -o-transform: translateX(-61.8838em); transform: translateX(-61.8838em) } .mobile-layers .tree-7.fade-up { -webkit-transform: translate(-61.8838em, 30px); -moz-transform: translate(-61.8838em, 30px); -ms-transform: translate(-61.8838em, 30px); -o-transform: translate(-61.8838em, 30px); transform: translate(-61.8838em, 30px) } .mobile-layers .tree-7.fade-up.is-visible { -webkit-transform: translate(-61.8838em); -moz-transform: translate(-61.8838em); -ms-transform: translate(-61.8838em); -o-transform: translate(-61.8838em); transform: translate(-61.8838em) } } .mobile-layers .tree-8-shadow { position: absolute; left: 50%; top: 374px; z-index: 10; width: 130.05px; height: 106.59px; -webkit-transform: translateX(-592px); -moz-transform: translateX(-592px); -ms-transform: translateX(-592px); -o-transform: translateX(-592px); transform: translateX(-592px); background: url(../images/tree-13-shadow.png) 0 0/contain no-repeat } .mobile-layers .tree-8-shadow.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .tree-8-shadow.fade-in.is-visible { opacity: 1 } .mobile-layers .tree-8-shadow.fade-up { opacity: 0; -webkit-transform: translate(-592px, 30px); -moz-transform: translate(-592px, 30px); -ms-transform: translate(-592px, 30px); -o-transform: translate(-592px, 30px); transform: translate(-592px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .tree-8-shadow.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-592px); -moz-transform: translate(-592px); -ms-transform: translate(-592px); -o-transform: translate(-592px); transform: translate(-592px) } @media (max-width: 1136px) { .mobile-layers .tree-8-shadow { top: 32.92254vw; width: 11.44806vw; height: 9.38292vw; font-size: 1vw; -webkit-transform: translateX(-52.11268em); -moz-transform: translateX(-52.11268em); -ms-transform: translateX(-52.11268em); -o-transform: translateX(-52.11268em); transform: translateX(-52.11268em) } .mobile-layers .tree-8-shadow.fade-up { -webkit-transform: translate(-52.11268em, 30px); -moz-transform: translate(-52.11268em, 30px); -ms-transform: translate(-52.11268em, 30px); -o-transform: translate(-52.11268em, 30px); transform: translate(-52.11268em, 30px) } .mobile-layers .tree-8-shadow.fade-up.is-visible { -webkit-transform: translate(-52.11268em); -moz-transform: translate(-52.11268em); -ms-transform: translate(-52.11268em); -o-transform: translate(-52.11268em); transform: translate(-52.11268em) } } .mobile-layers .tree-8 { position: absolute; left: 50%; top: 374px; z-index: 10; width: 130.05px; height: 106.59px; -webkit-transform: translateX(-592px); -moz-transform: translateX(-592px); -ms-transform: translateX(-592px); -o-transform: translateX(-592px); transform: translateX(-592px); background: url(../images/tree-13.png) 0 0/contain no-repeat } .mobile-layers .tree-8.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .tree-8.fade-in.is-visible { opacity: 1 } .mobile-layers .tree-8.fade-up { opacity: 0; -webkit-transform: translate(-592px, 30px); -moz-transform: translate(-592px, 30px); -ms-transform: translate(-592px, 30px); -o-transform: translate(-592px, 30px); transform: translate(-592px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .tree-8.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-592px); -moz-transform: translate(-592px); -ms-transform: translate(-592px); -o-transform: translate(-592px); transform: translate(-592px) } @media (max-width: 1136px) { .mobile-layers .tree-8 { top: 32.92254vw; width: 11.44806vw; height: 9.38292vw; font-size: 1vw; -webkit-transform: translateX(-52.11268em); -moz-transform: translateX(-52.11268em); -ms-transform: translateX(-52.11268em); -o-transform: translateX(-52.11268em); transform: translateX(-52.11268em) } .mobile-layers .tree-8.fade-up { -webkit-transform: translate(-52.11268em, 30px); -moz-transform: translate(-52.11268em, 30px); -ms-transform: translate(-52.11268em, 30px); -o-transform: translate(-52.11268em, 30px); transform: translate(-52.11268em, 30px) } .mobile-layers .tree-8.fade-up.is-visible { -webkit-transform: translate(-52.11268em); -moz-transform: translate(-52.11268em); -ms-transform: translate(-52.11268em); -o-transform: translate(-52.11268em); transform: translate(-52.11268em) } } .mobile-layers .tree-9-shadow { position: absolute; left: 50%; top: 369px; z-index: 10; width: 190.2px; height: 168px; -webkit-transform: translateX(-581px); -moz-transform: translateX(-581px); -ms-transform: translateX(-581px); -o-transform: translateX(-581px); transform: translateX(-581px); background: url(../images/tree-14-shadow.png) 0 0/contain no-repeat } .mobile-layers .tree-9-shadow.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .tree-9-shadow.fade-in.is-visible { opacity: 1 } .mobile-layers .tree-9-shadow.fade-up { opacity: 0; -webkit-transform: translate(-581px, 30px); -moz-transform: translate(-581px, 30px); -ms-transform: translate(-581px, 30px); -o-transform: translate(-581px, 30px); transform: translate(-581px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .tree-9-shadow.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-581px); -moz-transform: translate(-581px); -ms-transform: translate(-581px); -o-transform: translate(-581px); transform: translate(-581px) } @media (max-width: 1136px) { .mobile-layers .tree-9-shadow { top: 32.48239vw; width: 16.74296vw; height: 14.78873vw; font-size: 1vw; -webkit-transform: translateX(-51.14437em); -moz-transform: translateX(-51.14437em); -ms-transform: translateX(-51.14437em); -o-transform: translateX(-51.14437em); transform: translateX(-51.14437em) } .mobile-layers .tree-9-shadow.fade-up { -webkit-transform: translate(-51.14437em, 30px); -moz-transform: translate(-51.14437em, 30px); -ms-transform: translate(-51.14437em, 30px); -o-transform: translate(-51.14437em, 30px); transform: translate(-51.14437em, 30px) } .mobile-layers .tree-9-shadow.fade-up.is-visible { -webkit-transform: translate(-51.14437em); -moz-transform: translate(-51.14437em); -ms-transform: translate(-51.14437em); -o-transform: translate(-51.14437em); transform: translate(-51.14437em) } } .mobile-layers .tree-9 { position: absolute; left: 50%; top: 369px; z-index: 10; width: 190.2px; height: 168px; -webkit-transform: translateX(-581px); -moz-transform: translateX(-581px); -ms-transform: translateX(-581px); -o-transform: translateX(-581px); transform: translateX(-581px); background: url(../images/tree-14.png) 0 0/contain no-repeat } .mobile-layers .tree-9.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .tree-9.fade-in.is-visible { opacity: 1 } .mobile-layers .tree-9.fade-up { opacity: 0; -webkit-transform: translate(-581px, 30px); -moz-transform: translate(-581px, 30px); -ms-transform: translate(-581px, 30px); -o-transform: translate(-581px, 30px); transform: translate(-581px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .tree-9.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-581px); -moz-transform: translate(-581px); -ms-transform: translate(-581px); -o-transform: translate(-581px); transform: translate(-581px) } @media (max-width: 1136px) { .mobile-layers .tree-9 { top: 32.48239vw; width: 16.74296vw; height: 14.78873vw; font-size: 1vw; -webkit-transform: translateX(-51.14437em); -moz-transform: translateX(-51.14437em); -ms-transform: translateX(-51.14437em); -o-transform: translateX(-51.14437em); transform: translateX(-51.14437em) } .mobile-layers .tree-9.fade-up { -webkit-transform: translate(-51.14437em, 30px); -moz-transform: translate(-51.14437em, 30px); -ms-transform: translate(-51.14437em, 30px); -o-transform: translate(-51.14437em, 30px); transform: translate(-51.14437em, 30px) } .mobile-layers .tree-9.fade-up.is-visible { -webkit-transform: translate(-51.14437em); -moz-transform: translate(-51.14437em); -ms-transform: translate(-51.14437em); -o-transform: translate(-51.14437em); transform: translate(-51.14437em) } } .mobile-layers .tree-10-shadow { position: absolute; left: 50%; top: 360px; z-index: 10; width: 248.88px; height: 206.18px; -webkit-transform: translateX(-562px); -moz-transform: translateX(-562px); -ms-transform: translateX(-562px); -o-transform: translateX(-562px); transform: translateX(-562px); background: url(../images/tree-12-shadow.png) 0 0/contain no-repeat } .mobile-layers .tree-10-shadow.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .tree-10-shadow.fade-in.is-visible { opacity: 1 } .mobile-layers .tree-10-shadow.fade-up { opacity: 0; -webkit-transform: translate(-562px, 30px); -moz-transform: translate(-562px, 30px); -ms-transform: translate(-562px, 30px); -o-transform: translate(-562px, 30px); transform: translate(-562px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .tree-10-shadow.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-562px); -moz-transform: translate(-562px); -ms-transform: translate(-562px); -o-transform: translate(-562px); transform: translate(-562px) } @media (max-width: 1136px) { .mobile-layers .tree-10-shadow { top: 31.69014vw; width: 21.90845vw; height: 18.14965vw; font-size: 1vw; -webkit-transform: translateX(-49.47183em); -moz-transform: translateX(-49.47183em); -ms-transform: translateX(-49.47183em); -o-transform: translateX(-49.47183em); transform: translateX(-49.47183em) } .mobile-layers .tree-10-shadow.fade-up { -webkit-transform: translate(-49.47183em, 30px); -moz-transform: translate(-49.47183em, 30px); -ms-transform: translate(-49.47183em, 30px); -o-transform: translate(-49.47183em, 30px); transform: translate(-49.47183em, 30px) } .mobile-layers .tree-10-shadow.fade-up.is-visible { -webkit-transform: translate(-49.47183em); -moz-transform: translate(-49.47183em); -ms-transform: translate(-49.47183em); -o-transform: translate(-49.47183em); transform: translate(-49.47183em) } } .mobile-layers .tree-10 { position: absolute; left: 50%; top: 360px; z-index: 10; width: 248.88px; height: 206.18px; -webkit-transform: translateX(-562px); -moz-transform: translateX(-562px); -ms-transform: translateX(-562px); -o-transform: translateX(-562px); transform: translateX(-562px); background: url(../images/tree-12.png) 0 0/contain no-repeat } .mobile-layers .tree-10.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .tree-10.fade-in.is-visible { opacity: 1 } .mobile-layers .tree-10.fade-up { opacity: 0; -webkit-transform: translate(-562px, 30px); -moz-transform: translate(-562px, 30px); -ms-transform: translate(-562px, 30px); -o-transform: translate(-562px, 30px); transform: translate(-562px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .tree-10.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-562px); -moz-transform: translate(-562px); -ms-transform: translate(-562px); -o-transform: translate(-562px); transform: translate(-562px) } @media (max-width: 1136px) { .mobile-layers .tree-10 { top: 31.69014vw; width: 21.90845vw; height: 18.14965vw; font-size: 1vw; -webkit-transform: translateX(-49.47183em); -moz-transform: translateX(-49.47183em); -ms-transform: translateX(-49.47183em); -o-transform: translateX(-49.47183em); transform: translateX(-49.47183em) } .mobile-layers .tree-10.fade-up { -webkit-transform: translate(-49.47183em, 30px); -moz-transform: translate(-49.47183em, 30px); -ms-transform: translate(-49.47183em, 30px); -o-transform: translate(-49.47183em, 30px); transform: translate(-49.47183em, 30px) } .mobile-layers .tree-10.fade-up.is-visible { -webkit-transform: translate(-49.47183em); -moz-transform: translate(-49.47183em); -ms-transform: translate(-49.47183em); -o-transform: translate(-49.47183em); transform: translate(-49.47183em) } } .mobile-layers .tree-11-shadow { position: absolute; left: 50%; top: 448px; z-index: 10; width: 132.6px; height: 108.68px; -webkit-transform: translateX(-440px); -moz-transform: translateX(-440px); -ms-transform: translateX(-440px); -o-transform: translateX(-440px); transform: translateX(-440px); background: url(../images/tree-13-shadow.png) 0 0/contain no-repeat } .mobile-layers .tree-11-shadow.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .tree-11-shadow.fade-in.is-visible { opacity: 1 } .mobile-layers .tree-11-shadow.fade-up { opacity: 0; -webkit-transform: translate(-440px, 30px); -moz-transform: translate(-440px, 30px); -ms-transform: translate(-440px, 30px); -o-transform: translate(-440px, 30px); transform: translate(-440px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .tree-11-shadow.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-440px); -moz-transform: translate(-440px); -ms-transform: translate(-440px); -o-transform: translate(-440px); transform: translate(-440px) } @media (max-width: 1136px) { .mobile-layers .tree-11-shadow { top: 39.43662vw; width: 11.67254vw; height: 9.5669vw; font-size: 1vw; -webkit-transform: translateX(-38.73239em); -moz-transform: translateX(-38.73239em); -ms-transform: translateX(-38.73239em); -o-transform: translateX(-38.73239em); transform: translateX(-38.73239em) } .mobile-layers .tree-11-shadow.fade-up { -webkit-transform: translate(-38.73239em, 30px); -moz-transform: translate(-38.73239em, 30px); -ms-transform: translate(-38.73239em, 30px); -o-transform: translate(-38.73239em, 30px); transform: translate(-38.73239em, 30px) } .mobile-layers .tree-11-shadow.fade-up.is-visible { -webkit-transform: translate(-38.73239em); -moz-transform: translate(-38.73239em); -ms-transform: translate(-38.73239em); -o-transform: translate(-38.73239em); transform: translate(-38.73239em) } } .mobile-layers .tree-11 { position: absolute; left: 50%; top: 448px; z-index: 10; width: 132.6px; height: 108.68px; -webkit-transform: translateX(-440px); -moz-transform: translateX(-440px); -ms-transform: translateX(-440px); -o-transform: translateX(-440px); transform: translateX(-440px); background: url(../images/tree-13.png) 0 0/contain no-repeat } .mobile-layers .tree-11.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .tree-11.fade-in.is-visible { opacity: 1 } .mobile-layers .tree-11.fade-up { opacity: 0; -webkit-transform: translate(-440px, 30px); -moz-transform: translate(-440px, 30px); -ms-transform: translate(-440px, 30px); -o-transform: translate(-440px, 30px); transform: translate(-440px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .tree-11.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-440px); -moz-transform: translate(-440px); -ms-transform: translate(-440px); -o-transform: translate(-440px); transform: translate(-440px) } @media (max-width: 1136px) { .mobile-layers .tree-11 { top: 39.43662vw; width: 11.67254vw; height: 9.5669vw; font-size: 1vw; -webkit-transform: translateX(-38.73239em); -moz-transform: translateX(-38.73239em); -ms-transform: translateX(-38.73239em); -o-transform: translateX(-38.73239em); transform: translateX(-38.73239em) } .mobile-layers .tree-11.fade-up { -webkit-transform: translate(-38.73239em, 30px); -moz-transform: translate(-38.73239em, 30px); -ms-transform: translate(-38.73239em, 30px); -o-transform: translate(-38.73239em, 30px); transform: translate(-38.73239em, 30px) } .mobile-layers .tree-11.fade-up.is-visible { -webkit-transform: translate(-38.73239em); -moz-transform: translate(-38.73239em); -ms-transform: translate(-38.73239em); -o-transform: translate(-38.73239em); transform: translate(-38.73239em) } } .mobile-layers .tree-12-shadow { position: absolute; left: 50%; top: 443px; z-index: 10; width: 216.24px; height: 179.14px; -webkit-transform: translateX(383px); -moz-transform: translateX(383px); -ms-transform: translateX(383px); -o-transform: translateX(383px); transform: translateX(383px); background: url(../images/tree-12-shadow.png) 0 0/contain no-repeat } .mobile-layers .tree-12-shadow.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .tree-12-shadow.fade-in.is-visible { opacity: 1 } .mobile-layers .tree-12-shadow.fade-up { opacity: 0; -webkit-transform: translate(383px, 30px); -moz-transform: translate(383px, 30px); -ms-transform: translate(383px, 30px); -o-transform: translate(383px, 30px); transform: translate(383px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .tree-12-shadow.fade-up.is-visible { opacity: 1; -webkit-transform: translate(383px); -moz-transform: translate(383px); -ms-transform: translate(383px); -o-transform: translate(383px); transform: translate(383px) } @media (max-width: 1136px) { .mobile-layers .tree-12-shadow { top: 38.99648vw; width: 19.03521vw; height: 15.76937vw; font-size: 1vw; -webkit-transform: translateX(33.71479em); -moz-transform: translateX(33.71479em); -ms-transform: translateX(33.71479em); -o-transform: translateX(33.71479em); transform: translateX(33.71479em) } .mobile-layers .tree-12-shadow.fade-up { -webkit-transform: translate(33.71479em, 30px); -moz-transform: translate(33.71479em, 30px); -ms-transform: translate(33.71479em, 30px); -o-transform: translate(33.71479em, 30px); transform: translate(33.71479em, 30px) } .mobile-layers .tree-12-shadow.fade-up.is-visible { -webkit-transform: translate(33.71479em); -moz-transform: translate(33.71479em); -ms-transform: translate(33.71479em); -o-transform: translate(33.71479em); transform: translate(33.71479em) } } .mobile-layers .tree-12 { position: absolute; left: 50%; top: 443px; z-index: 10; width: 216.24px; height: 179.14px; -webkit-transform: translateX(383px); -moz-transform: translateX(383px); -ms-transform: translateX(383px); -o-transform: translateX(383px); transform: translateX(383px); background: url(../images/tree-12.png) 0 0/contain no-repeat } .mobile-layers .tree-12.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .tree-12.fade-in.is-visible { opacity: 1 } .mobile-layers .tree-12.fade-up { opacity: 0; -webkit-transform: translate(383px, 30px); -moz-transform: translate(383px, 30px); -ms-transform: translate(383px, 30px); -o-transform: translate(383px, 30px); transform: translate(383px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .tree-12.fade-up.is-visible { opacity: 1; -webkit-transform: translate(383px); -moz-transform: translate(383px); -ms-transform: translate(383px); -o-transform: translate(383px); transform: translate(383px) } @media (max-width: 1136px) { .mobile-layers .tree-12 { top: 38.99648vw; width: 19.03521vw; height: 15.76937vw; font-size: 1vw; -webkit-transform: translateX(33.71479em); -moz-transform: translateX(33.71479em); -ms-transform: translateX(33.71479em); -o-transform: translateX(33.71479em); transform: translateX(33.71479em) } .mobile-layers .tree-12.fade-up { -webkit-transform: translate(33.71479em, 30px); -moz-transform: translate(33.71479em, 30px); -ms-transform: translate(33.71479em, 30px); -o-transform: translate(33.71479em, 30px); transform: translate(33.71479em, 30px) } .mobile-layers .tree-12.fade-up.is-visible { -webkit-transform: translate(33.71479em); -moz-transform: translate(33.71479em); -ms-transform: translate(33.71479em); -o-transform: translate(33.71479em); transform: translate(33.71479em) } } .mobile-layers .tree-13-shadow { position: absolute; left: 50%; top: 504px; z-index: 10; width: 208.08px; height: 172.38px; -webkit-transform: translateX(277px); -moz-transform: translateX(277px); -ms-transform: translateX(277px); -o-transform: translateX(277px); transform: translateX(277px); background: url(../images/tree-12-shadow.png) 0 0/contain no-repeat } .mobile-layers .tree-13-shadow.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .tree-13-shadow.fade-in.is-visible { opacity: 1 } .mobile-layers .tree-13-shadow.fade-up { opacity: 0; -webkit-transform: translate(277px, 30px); -moz-transform: translate(277px, 30px); -ms-transform: translate(277px, 30px); -o-transform: translate(277px, 30px); transform: translate(277px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .tree-13-shadow.fade-up.is-visible { opacity: 1; -webkit-transform: translate(277px); -moz-transform: translate(277px); -ms-transform: translate(277px); -o-transform: translate(277px); transform: translate(277px) } @media (max-width: 1136px) { .mobile-layers .tree-13-shadow { top: 44.3662vw; width: 18.3169vw; height: 15.1743vw; font-size: 1vw; -webkit-transform: translateX(24.3838em); -moz-transform: translateX(24.3838em); -ms-transform: translateX(24.3838em); -o-transform: translateX(24.3838em); transform: translateX(24.3838em) } .mobile-layers .tree-13-shadow.fade-up { -webkit-transform: translate(24.3838em, 30px); -moz-transform: translate(24.3838em, 30px); -ms-transform: translate(24.3838em, 30px); -o-transform: translate(24.3838em, 30px); transform: translate(24.3838em, 30px) } .mobile-layers .tree-13-shadow.fade-up.is-visible { -webkit-transform: translate(24.3838em); -moz-transform: translate(24.3838em); -ms-transform: translate(24.3838em); -o-transform: translate(24.3838em); transform: translate(24.3838em) } } .mobile-layers .tree-13 { position: absolute; left: 50%; top: 504px; z-index: 10; width: 208.08px; height: 172.38px; -webkit-transform: translateX(277px); -moz-transform: translateX(277px); -ms-transform: translateX(277px); -o-transform: translateX(277px); transform: translateX(277px); background: url(../images/tree-12.png) 0 0/contain no-repeat } .mobile-layers .tree-13.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .tree-13.fade-in.is-visible { opacity: 1 } .mobile-layers .tree-13.fade-up { opacity: 0; -webkit-transform: translate(277px, 30px); -moz-transform: translate(277px, 30px); -ms-transform: translate(277px, 30px); -o-transform: translate(277px, 30px); transform: translate(277px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .tree-13.fade-up.is-visible { opacity: 1; -webkit-transform: translate(277px); -moz-transform: translate(277px); -ms-transform: translate(277px); -o-transform: translate(277px); transform: translate(277px) } @media (max-width: 1136px) { .mobile-layers .tree-13 { top: 44.3662vw; width: 18.3169vw; height: 15.1743vw; font-size: 1vw; -webkit-transform: translateX(24.3838em); -moz-transform: translateX(24.3838em); -ms-transform: translateX(24.3838em); -o-transform: translateX(24.3838em); transform: translateX(24.3838em) } .mobile-layers .tree-13.fade-up { -webkit-transform: translate(24.3838em, 30px); -moz-transform: translate(24.3838em, 30px); -ms-transform: translate(24.3838em, 30px); -o-transform: translate(24.3838em, 30px); transform: translate(24.3838em, 30px) } .mobile-layers .tree-13.fade-up.is-visible { -webkit-transform: translate(24.3838em); -moz-transform: translate(24.3838em); -ms-transform: translate(24.3838em); -o-transform: translate(24.3838em); transform: translate(24.3838em) } } .mobile-layers .tree-14-shadow { position: absolute; left: 50%; top: 502px; z-index: 10; width: 248.88px; height: 206.18px; -webkit-transform: translateX(209px); -moz-transform: translateX(209px); -ms-transform: translateX(209px); -o-transform: translateX(209px); transform: translateX(209px); background: url(../images/tree-12-shadow.png) 0 0/contain no-repeat } .mobile-layers .tree-14-shadow.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .tree-14-shadow.fade-in.is-visible { opacity: 1 } .mobile-layers .tree-14-shadow.fade-up { opacity: 0; -webkit-transform: translate(209px, 30px); -moz-transform: translate(209px, 30px); -ms-transform: translate(209px, 30px); -o-transform: translate(209px, 30px); transform: translate(209px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .tree-14-shadow.fade-up.is-visible { opacity: 1; -webkit-transform: translate(209px); -moz-transform: translate(209px); -ms-transform: translate(209px); -o-transform: translate(209px); transform: translate(209px) } @media (max-width: 1136px) { .mobile-layers .tree-14-shadow { top: 44.19014vw; width: 21.90845vw; height: 18.14965vw; font-size: 1vw; -webkit-transform: translateX(18.39789em); -moz-transform: translateX(18.39789em); -ms-transform: translateX(18.39789em); -o-transform: translateX(18.39789em); transform: translateX(18.39789em) } .mobile-layers .tree-14-shadow.fade-up { -webkit-transform: translate(18.39789em, 30px); -moz-transform: translate(18.39789em, 30px); -ms-transform: translate(18.39789em, 30px); -o-transform: translate(18.39789em, 30px); transform: translate(18.39789em, 30px) } .mobile-layers .tree-14-shadow.fade-up.is-visible { -webkit-transform: translate(18.39789em); -moz-transform: translate(18.39789em); -ms-transform: translate(18.39789em); -o-transform: translate(18.39789em); transform: translate(18.39789em) } } .mobile-layers .tree-14 { position: absolute; left: 50%; top: 502px; z-index: 10; width: 248.88px; height: 206.18px; -webkit-transform: translateX(209px); -moz-transform: translateX(209px); -ms-transform: translateX(209px); -o-transform: translateX(209px); transform: translateX(209px); background: url(../images/tree-12.png) 0 0/contain no-repeat } .mobile-layers .tree-14.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .tree-14.fade-in.is-visible { opacity: 1 } .mobile-layers .tree-14.fade-up { opacity: 0; -webkit-transform: translate(209px, 30px); -moz-transform: translate(209px, 30px); -ms-transform: translate(209px, 30px); -o-transform: translate(209px, 30px); transform: translate(209px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .tree-14.fade-up.is-visible { opacity: 1; -webkit-transform: translate(209px); -moz-transform: translate(209px); -ms-transform: translate(209px); -o-transform: translate(209px); transform: translate(209px) } @media (max-width: 1136px) { .mobile-layers .tree-14 { top: 44.19014vw; width: 21.90845vw; height: 18.14965vw; font-size: 1vw; -webkit-transform: translateX(18.39789em); -moz-transform: translateX(18.39789em); -ms-transform: translateX(18.39789em); -o-transform: translateX(18.39789em); transform: translateX(18.39789em) } .mobile-layers .tree-14.fade-up { -webkit-transform: translate(18.39789em, 30px); -moz-transform: translate(18.39789em, 30px); -ms-transform: translate(18.39789em, 30px); -o-transform: translate(18.39789em, 30px); transform: translate(18.39789em, 30px) } .mobile-layers .tree-14.fade-up.is-visible { -webkit-transform: translate(18.39789em); -moz-transform: translate(18.39789em); -ms-transform: translate(18.39789em); -o-transform: translate(18.39789em); transform: translate(18.39789em) } } .mobile-layers .tree-15-shadow { position: absolute; left: 50%; top: 957px; z-index: 10; width: 203.32px; height: 139.88px; -webkit-transform: translateX(-84px); -moz-transform: translateX(-84px); -ms-transform: translateX(-84px); -o-transform: translateX(-84px); transform: translateX(-84px); background: url(../images/tree-1-shadow.png) 0 0/contain no-repeat } .mobile-layers .tree-15-shadow.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .tree-15-shadow.fade-in.is-visible { opacity: 1 } .mobile-layers .tree-15-shadow.fade-up { opacity: 0; -webkit-transform: translate(-84px, 30px); -moz-transform: translate(-84px, 30px); -ms-transform: translate(-84px, 30px); -o-transform: translate(-84px, 30px); transform: translate(-84px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .tree-15-shadow.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-84px); -moz-transform: translate(-84px); -ms-transform: translate(-84px); -o-transform: translate(-84px); transform: translate(-84px) } @media (max-width: 1136px) { .mobile-layers .tree-15-shadow { top: 84.24296vw; width: 17.89789vw; height: 12.31338vw; font-size: 1vw; -webkit-transform: translateX(-7.39437em); -moz-transform: translateX(-7.39437em); -ms-transform: translateX(-7.39437em); -o-transform: translateX(-7.39437em); transform: translateX(-7.39437em) } .mobile-layers .tree-15-shadow.fade-up { -webkit-transform: translate(-7.39437em, 30px); -moz-transform: translate(-7.39437em, 30px); -ms-transform: translate(-7.39437em, 30px); -o-transform: translate(-7.39437em, 30px); transform: translate(-7.39437em, 30px) } .mobile-layers .tree-15-shadow.fade-up.is-visible { -webkit-transform: translate(-7.39437em); -moz-transform: translate(-7.39437em); -ms-transform: translate(-7.39437em); -o-transform: translate(-7.39437em); transform: translate(-7.39437em) } } .mobile-layers .tree-15 { position: absolute; left: 50%; top: 957px; z-index: 10; width: 203.32px; height: 139.88px; -webkit-transform: translateX(-84px); -moz-transform: translateX(-84px); -ms-transform: translateX(-84px); -o-transform: translateX(-84px); transform: translateX(-84px); background: url(../images/tree-1.png) 0 0/contain no-repeat } .mobile-layers .tree-15.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .tree-15.fade-in.is-visible { opacity: 1 } .mobile-layers .tree-15.fade-up { opacity: 0; -webkit-transform: translate(-84px, 30px); -moz-transform: translate(-84px, 30px); -ms-transform: translate(-84px, 30px); -o-transform: translate(-84px, 30px); transform: translate(-84px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .tree-15.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-84px); -moz-transform: translate(-84px); -ms-transform: translate(-84px); -o-transform: translate(-84px); transform: translate(-84px) } @media (max-width: 1136px) { .mobile-layers .tree-15 { top: 84.24296vw; width: 17.89789vw; height: 12.31338vw; font-size: 1vw; -webkit-transform: translateX(-7.39437em); -moz-transform: translateX(-7.39437em); -ms-transform: translateX(-7.39437em); -o-transform: translateX(-7.39437em); transform: translateX(-7.39437em) } .mobile-layers .tree-15.fade-up { -webkit-transform: translate(-7.39437em, 30px); -moz-transform: translate(-7.39437em, 30px); -ms-transform: translate(-7.39437em, 30px); -o-transform: translate(-7.39437em, 30px); transform: translate(-7.39437em, 30px) } .mobile-layers .tree-15.fade-up.is-visible { -webkit-transform: translate(-7.39437em); -moz-transform: translate(-7.39437em); -ms-transform: translate(-7.39437em); -o-transform: translate(-7.39437em); transform: translate(-7.39437em) } } .mobile-layers .tree-16-shadow { position: absolute; left: 50%; top: 998px; z-index: 10; width: 211.12px; height: 121.16px; -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -ms-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); background: url(../images/tree-2-shadow.png) 0 0/contain no-repeat } .mobile-layers .tree-16-shadow.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .tree-16-shadow.fade-in.is-visible { opacity: 1 } .mobile-layers .tree-16-shadow.fade-up { opacity: 0; -webkit-transform: translate(-20px, 30px); -moz-transform: translate(-20px, 30px); -ms-transform: translate(-20px, 30px); -o-transform: translate(-20px, 30px); transform: translate(-20px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .tree-16-shadow.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-20px); -moz-transform: translate(-20px); -ms-transform: translate(-20px); -o-transform: translate(-20px); transform: translate(-20px) } @media (max-width: 1136px) { .mobile-layers .tree-16-shadow { top: 87.85211vw; width: 18.58451vw; height: 10.66549vw; font-size: 1vw; -webkit-transform: translateX(-1.76056em); -moz-transform: translateX(-1.76056em); -ms-transform: translateX(-1.76056em); -o-transform: translateX(-1.76056em); transform: translateX(-1.76056em) } .mobile-layers .tree-16-shadow.fade-up { -webkit-transform: translate(-1.76056em, 30px); -moz-transform: translate(-1.76056em, 30px); -ms-transform: translate(-1.76056em, 30px); -o-transform: translate(-1.76056em, 30px); transform: translate(-1.76056em, 30px) } .mobile-layers .tree-16-shadow.fade-up.is-visible { -webkit-transform: translate(-1.76056em); -moz-transform: translate(-1.76056em); -ms-transform: translate(-1.76056em); -o-transform: translate(-1.76056em); transform: translate(-1.76056em) } } .mobile-layers .tree-16 { position: absolute; left: 50%; top: 998px; z-index: 10; width: 211.12px; height: 121.16px; -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -ms-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); background: url(../images/tree-2.png) 0 0/contain no-repeat } .mobile-layers .tree-16.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .tree-16.fade-in.is-visible { opacity: 1 } .mobile-layers .tree-16.fade-up { opacity: 0; -webkit-transform: translate(-20px, 30px); -moz-transform: translate(-20px, 30px); -ms-transform: translate(-20px, 30px); -o-transform: translate(-20px, 30px); transform: translate(-20px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .tree-16.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-20px); -moz-transform: translate(-20px); -ms-transform: translate(-20px); -o-transform: translate(-20px); transform: translate(-20px) } @media (max-width: 1136px) { .mobile-layers .tree-16 { top: 87.85211vw; width: 18.58451vw; height: 10.66549vw; font-size: 1vw; -webkit-transform: translateX(-1.76056em); -moz-transform: translateX(-1.76056em); -ms-transform: translateX(-1.76056em); -o-transform: translateX(-1.76056em); transform: translateX(-1.76056em) } .mobile-layers .tree-16.fade-up { -webkit-transform: translate(-1.76056em, 30px); -moz-transform: translate(-1.76056em, 30px); -ms-transform: translate(-1.76056em, 30px); -o-transform: translate(-1.76056em, 30px); transform: translate(-1.76056em, 30px) } .mobile-layers .tree-16.fade-up.is-visible { -webkit-transform: translate(-1.76056em); -moz-transform: translate(-1.76056em); -ms-transform: translate(-1.76056em); -o-transform: translate(-1.76056em); transform: translate(-1.76056em) } } .mobile-layers .tree-17-shadow { position: absolute; left: 50%; top: 1055px; z-index: 10; width: 178.88px; height: 124.8px; -webkit-transform: translateX(-117px); -moz-transform: translateX(-117px); -ms-transform: translateX(-117px); -o-transform: translateX(-117px); transform: translateX(-117px); background: url(../images/tree-3-shadow.png) 0 0/contain no-repeat } .mobile-layers .tree-17-shadow.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .tree-17-shadow.fade-in.is-visible { opacity: 1 } .mobile-layers .tree-17-shadow.fade-up { opacity: 0; -webkit-transform: translate(-117px, 30px); -moz-transform: translate(-117px, 30px); -ms-transform: translate(-117px, 30px); -o-transform: translate(-117px, 30px); transform: translate(-117px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .tree-17-shadow.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-117px); -moz-transform: translate(-117px); -ms-transform: translate(-117px); -o-transform: translate(-117px); transform: translate(-117px) } @media (max-width: 1136px) { .mobile-layers .tree-17-shadow { top: 92.86972vw; width: 15.74648vw; height: 10.98592vw; font-size: 1vw; -webkit-transform: translateX(-10.2993em); -moz-transform: translateX(-10.2993em); -ms-transform: translateX(-10.2993em); -o-transform: translateX(-10.2993em); transform: translateX(-10.2993em) } .mobile-layers .tree-17-shadow.fade-up { -webkit-transform: translate(-10.2993em, 30px); -moz-transform: translate(-10.2993em, 30px); -ms-transform: translate(-10.2993em, 30px); -o-transform: translate(-10.2993em, 30px); transform: translate(-10.2993em, 30px) } .mobile-layers .tree-17-shadow.fade-up.is-visible { -webkit-transform: translate(-10.2993em); -moz-transform: translate(-10.2993em); -ms-transform: translate(-10.2993em); -o-transform: translate(-10.2993em); transform: translate(-10.2993em) } } .mobile-layers .tree-17 { position: absolute; left: 50%; top: 1055px; z-index: 10; width: 178.88px; height: 124.8px; -webkit-transform: translateX(-117px); -moz-transform: translateX(-117px); -ms-transform: translateX(-117px); -o-transform: translateX(-117px); transform: translateX(-117px); background: url(../images/tree-3.png) 0 0/contain no-repeat } .mobile-layers .tree-17.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .tree-17.fade-in.is-visible { opacity: 1 } .mobile-layers .tree-17.fade-up { opacity: 0; -webkit-transform: translate(-117px, 30px); -moz-transform: translate(-117px, 30px); -ms-transform: translate(-117px, 30px); -o-transform: translate(-117px, 30px); transform: translate(-117px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .tree-17.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-117px); -moz-transform: translate(-117px); -ms-transform: translate(-117px); -o-transform: translate(-117px); transform: translate(-117px) } @media (max-width: 1136px) { .mobile-layers .tree-17 { top: 92.86972vw; width: 15.74648vw; height: 10.98592vw; font-size: 1vw; -webkit-transform: translateX(-10.2993em); -moz-transform: translateX(-10.2993em); -ms-transform: translateX(-10.2993em); -o-transform: translateX(-10.2993em); transform: translateX(-10.2993em) } .mobile-layers .tree-17.fade-up { -webkit-transform: translate(-10.2993em, 30px); -moz-transform: translate(-10.2993em, 30px); -ms-transform: translate(-10.2993em, 30px); -o-transform: translate(-10.2993em, 30px); transform: translate(-10.2993em, 30px) } .mobile-layers .tree-17.fade-up.is-visible { -webkit-transform: translate(-10.2993em); -moz-transform: translate(-10.2993em); -ms-transform: translate(-10.2993em); -o-transform: translate(-10.2993em); transform: translate(-10.2993em) } } .mobile-layers .tree-18-shadow { position: absolute; left: 50%; top: 3917px; z-index: 10; width: 183.86px; height: 162.4px; -webkit-transform: translateX(45px); -moz-transform: translateX(45px); -ms-transform: translateX(45px); -o-transform: translateX(45px); transform: translateX(45px); background: url(../images/tree-14-shadow.png) 0 0/contain no-repeat } .mobile-layers .tree-18-shadow.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .tree-18-shadow.fade-in.is-visible { opacity: 1 } .mobile-layers .tree-18-shadow.fade-up { opacity: 0; -webkit-transform: translate(45px, 30px); -moz-transform: translate(45px, 30px); -ms-transform: translate(45px, 30px); -o-transform: translate(45px, 30px); transform: translate(45px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .tree-18-shadow.fade-up.is-visible { opacity: 1; -webkit-transform: translate(45px); -moz-transform: translate(45px); -ms-transform: translate(45px); -o-transform: translate(45px); transform: translate(45px) } @media (max-width: 1136px) { .mobile-layers .tree-18-shadow { top: 344.80634vw; width: 16.18486vw; height: 14.29577vw; font-size: 1vw; -webkit-transform: translateX(3.96127em); -moz-transform: translateX(3.96127em); -ms-transform: translateX(3.96127em); -o-transform: translateX(3.96127em); transform: translateX(3.96127em) } .mobile-layers .tree-18-shadow.fade-up { -webkit-transform: translate(3.96127em, 30px); -moz-transform: translate(3.96127em, 30px); -ms-transform: translate(3.96127em, 30px); -o-transform: translate(3.96127em, 30px); transform: translate(3.96127em, 30px) } .mobile-layers .tree-18-shadow.fade-up.is-visible { -webkit-transform: translate(3.96127em); -moz-transform: translate(3.96127em); -ms-transform: translate(3.96127em); -o-transform: translate(3.96127em); transform: translate(3.96127em) } } .mobile-layers .tree-18 { position: absolute; left: 50%; top: 3917px; z-index: 10; width: 183.86px; height: 162.4px; -webkit-transform: translateX(45px); -moz-transform: translateX(45px); -ms-transform: translateX(45px); -o-transform: translateX(45px); transform: translateX(45px); background: url(../images/tree-14.png) 0 0/contain no-repeat } .mobile-layers .tree-18.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .tree-18.fade-in.is-visible { opacity: 1 } .mobile-layers .tree-18.fade-up { opacity: 0; -webkit-transform: translate(45px, 30px); -moz-transform: translate(45px, 30px); -ms-transform: translate(45px, 30px); -o-transform: translate(45px, 30px); transform: translate(45px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .tree-18.fade-up.is-visible { opacity: 1; -webkit-transform: translate(45px); -moz-transform: translate(45px); -ms-transform: translate(45px); -o-transform: translate(45px); transform: translate(45px) } @media (max-width: 1136px) { .mobile-layers .tree-18 { top: 344.80634vw; width: 16.18486vw; height: 14.29577vw; font-size: 1vw; -webkit-transform: translateX(3.96127em); -moz-transform: translateX(3.96127em); -ms-transform: translateX(3.96127em); -o-transform: translateX(3.96127em); transform: translateX(3.96127em) } .mobile-layers .tree-18.fade-up { -webkit-transform: translate(3.96127em, 30px); -moz-transform: translate(3.96127em, 30px); -ms-transform: translate(3.96127em, 30px); -o-transform: translate(3.96127em, 30px); transform: translate(3.96127em, 30px) } .mobile-layers .tree-18.fade-up.is-visible { -webkit-transform: translate(3.96127em); -moz-transform: translate(3.96127em); -ms-transform: translate(3.96127em); -o-transform: translate(3.96127em); transform: translate(3.96127em) } } .mobile-layers .tree-19-shadow { position: absolute; left: 50%; top: 3913px; z-index: 10; width: 224.4px; height: 185.9px; -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -ms-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); background: url(../images/tree-12-shadow.png) 0 0/contain no-repeat } .mobile-layers .tree-19-shadow.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .tree-19-shadow.fade-in.is-visible { opacity: 1 } .mobile-layers .tree-19-shadow.fade-up { opacity: 0; -webkit-transform: translate(-20px, 30px); -moz-transform: translate(-20px, 30px); -ms-transform: translate(-20px, 30px); -o-transform: translate(-20px, 30px); transform: translate(-20px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .tree-19-shadow.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-20px); -moz-transform: translate(-20px); -ms-transform: translate(-20px); -o-transform: translate(-20px); transform: translate(-20px) } @media (max-width: 1136px) { .mobile-layers .tree-19-shadow { top: 344.45423vw; width: 19.75352vw; height: 16.36444vw; font-size: 1vw; -webkit-transform: translateX(-1.76056em); -moz-transform: translateX(-1.76056em); -ms-transform: translateX(-1.76056em); -o-transform: translateX(-1.76056em); transform: translateX(-1.76056em) } .mobile-layers .tree-19-shadow.fade-up { -webkit-transform: translate(-1.76056em, 30px); -moz-transform: translate(-1.76056em, 30px); -ms-transform: translate(-1.76056em, 30px); -o-transform: translate(-1.76056em, 30px); transform: translate(-1.76056em, 30px) } .mobile-layers .tree-19-shadow.fade-up.is-visible { -webkit-transform: translate(-1.76056em); -moz-transform: translate(-1.76056em); -ms-transform: translate(-1.76056em); -o-transform: translate(-1.76056em); transform: translate(-1.76056em) } } .mobile-layers .tree-19 { position: absolute; left: 50%; top: 3913px; z-index: 10; width: 224.4px; height: 185.9px; -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -ms-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); background: url(../images/tree-12.png) 0 0/contain no-repeat } .mobile-layers .tree-19.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .tree-19.fade-in.is-visible { opacity: 1 } .mobile-layers .tree-19.fade-up { opacity: 0; -webkit-transform: translate(-20px, 30px); -moz-transform: translate(-20px, 30px); -ms-transform: translate(-20px, 30px); -o-transform: translate(-20px, 30px); transform: translate(-20px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .tree-19.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-20px); -moz-transform: translate(-20px); -ms-transform: translate(-20px); -o-transform: translate(-20px); transform: translate(-20px) } @media (max-width: 1136px) { .mobile-layers .tree-19 { top: 344.45423vw; width: 19.75352vw; height: 16.36444vw; font-size: 1vw; -webkit-transform: translateX(-1.76056em); -moz-transform: translateX(-1.76056em); -ms-transform: translateX(-1.76056em); -o-transform: translateX(-1.76056em); transform: translateX(-1.76056em) } .mobile-layers .tree-19.fade-up { -webkit-transform: translate(-1.76056em, 30px); -moz-transform: translate(-1.76056em, 30px); -ms-transform: translate(-1.76056em, 30px); -o-transform: translate(-1.76056em, 30px); transform: translate(-1.76056em, 30px) } .mobile-layers .tree-19.fade-up.is-visible { -webkit-transform: translate(-1.76056em); -moz-transform: translate(-1.76056em); -ms-transform: translate(-1.76056em); -o-transform: translate(-1.76056em); transform: translate(-1.76056em) } } .mobile-layers .tree-20-shadow { position: absolute; left: 50%; top: 3963px; z-index: 10; width: 183.86px; height: 162.4px; -webkit-transform: translateX(-48px); -moz-transform: translateX(-48px); -ms-transform: translateX(-48px); -o-transform: translateX(-48px); transform: translateX(-48px); background: url(../images/tree-14-shadow.png) 0 0/contain no-repeat } .mobile-layers .tree-20-shadow.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .tree-20-shadow.fade-in.is-visible { opacity: 1 } .mobile-layers .tree-20-shadow.fade-up { opacity: 0; -webkit-transform: translate(-48px, 30px); -moz-transform: translate(-48px, 30px); -ms-transform: translate(-48px, 30px); -o-transform: translate(-48px, 30px); transform: translate(-48px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .tree-20-shadow.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-48px); -moz-transform: translate(-48px); -ms-transform: translate(-48px); -o-transform: translate(-48px); transform: translate(-48px) } @media (max-width: 1136px) { .mobile-layers .tree-20-shadow { top: 348.85563vw; width: 16.18486vw; height: 14.29577vw; font-size: 1vw; -webkit-transform: translateX(-4.22535em); -moz-transform: translateX(-4.22535em); -ms-transform: translateX(-4.22535em); -o-transform: translateX(-4.22535em); transform: translateX(-4.22535em) } .mobile-layers .tree-20-shadow.fade-up { -webkit-transform: translate(-4.22535em, 30px); -moz-transform: translate(-4.22535em, 30px); -ms-transform: translate(-4.22535em, 30px); -o-transform: translate(-4.22535em, 30px); transform: translate(-4.22535em, 30px) } .mobile-layers .tree-20-shadow.fade-up.is-visible { -webkit-transform: translate(-4.22535em); -moz-transform: translate(-4.22535em); -ms-transform: translate(-4.22535em); -o-transform: translate(-4.22535em); transform: translate(-4.22535em) } } .mobile-layers .tree-20 { position: absolute; left: 50%; top: 3963px; z-index: 10; width: 183.86px; height: 162.4px; -webkit-transform: translateX(-48px); -moz-transform: translateX(-48px); -ms-transform: translateX(-48px); -o-transform: translateX(-48px); transform: translateX(-48px); background: url(../images/tree-14.png) 0 0/contain no-repeat } .mobile-layers .tree-20.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .tree-20.fade-in.is-visible { opacity: 1 } .mobile-layers .tree-20.fade-up { opacity: 0; -webkit-transform: translate(-48px, 30px); -moz-transform: translate(-48px, 30px); -ms-transform: translate(-48px, 30px); -o-transform: translate(-48px, 30px); transform: translate(-48px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .tree-20.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-48px); -moz-transform: translate(-48px); -ms-transform: translate(-48px); -o-transform: translate(-48px); transform: translate(-48px) } @media (max-width: 1136px) { .mobile-layers .tree-20 { top: 348.85563vw; width: 16.18486vw; height: 14.29577vw; font-size: 1vw; -webkit-transform: translateX(-4.22535em); -moz-transform: translateX(-4.22535em); -ms-transform: translateX(-4.22535em); -o-transform: translateX(-4.22535em); transform: translateX(-4.22535em) } .mobile-layers .tree-20.fade-up { -webkit-transform: translate(-4.22535em, 30px); -moz-transform: translate(-4.22535em, 30px); -ms-transform: translate(-4.22535em, 30px); -o-transform: translate(-4.22535em, 30px); transform: translate(-4.22535em, 30px) } .mobile-layers .tree-20.fade-up.is-visible { -webkit-transform: translate(-4.22535em); -moz-transform: translate(-4.22535em); -ms-transform: translate(-4.22535em); -o-transform: translate(-4.22535em); transform: translate(-4.22535em) } } .mobile-layers .building-4 { position: absolute; left: 50%; top: 258px; z-index: 10; width: 155.82px; height: 122.99px; -webkit-transform: translateX(60px); -moz-transform: translateX(60px); -ms-transform: translateX(60px); -o-transform: translateX(60px); transform: translateX(60px); background: url(../images/building-4.png) 0 0/contain no-repeat } .mobile-layers .building-4.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .building-4.fade-in.is-visible { opacity: 1 } .mobile-layers .building-4.fade-up { opacity: 0; -webkit-transform: translate(60px, 30px); -moz-transform: translate(60px, 30px); -ms-transform: translate(60px, 30px); -o-transform: translate(60px, 30px); transform: translate(60px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .building-4.fade-up.is-visible { opacity: 1; -webkit-transform: translate(60px); -moz-transform: translate(60px); -ms-transform: translate(60px); -o-transform: translate(60px); transform: translate(60px) } @media (max-width: 1136px) { .mobile-layers .building-4 { top: 22.71127vw; width: 13.71655vw; height: 10.82658vw; font-size: 1vw; -webkit-transform: translateX(5.28169em); -moz-transform: translateX(5.28169em); -ms-transform: translateX(5.28169em); -o-transform: translateX(5.28169em); transform: translateX(5.28169em) } .mobile-layers .building-4.fade-up { -webkit-transform: translate(5.28169em, 30px); -moz-transform: translate(5.28169em, 30px); -ms-transform: translate(5.28169em, 30px); -o-transform: translate(5.28169em, 30px); transform: translate(5.28169em, 30px) } .mobile-layers .building-4.fade-up.is-visible { -webkit-transform: translate(5.28169em); -moz-transform: translate(5.28169em); -ms-transform: translate(5.28169em); -o-transform: translate(5.28169em); transform: translate(5.28169em) } } .mobile-layers .building-5 { position: absolute; left: 50%; top: 315px; z-index: 10; width: 376.2px; height: 249.66px; -webkit-transform: translateX(-405px); -moz-transform: translateX(-405px); -ms-transform: translateX(-405px); -o-transform: translateX(-405px); transform: translateX(-405px); background: url(../images/building-5.png) 0 0/contain no-repeat } .mobile-layers .building-5.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .building-5.fade-in.is-visible { opacity: 1 } .mobile-layers .building-5.fade-up { opacity: 0; -webkit-transform: translate(-405px, 30px); -moz-transform: translate(-405px, 30px); -ms-transform: translate(-405px, 30px); -o-transform: translate(-405px, 30px); transform: translate(-405px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .building-5.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-405px); -moz-transform: translate(-405px); -ms-transform: translate(-405px); -o-transform: translate(-405px); transform: translate(-405px) } @media (max-width: 1136px) { .mobile-layers .building-5 { top: 27.72887vw; width: 33.1162vw; height: 21.97711vw; font-size: 1vw; -webkit-transform: translateX(-35.65141em); -moz-transform: translateX(-35.65141em); -ms-transform: translateX(-35.65141em); -o-transform: translateX(-35.65141em); transform: translateX(-35.65141em) } .mobile-layers .building-5.fade-up { -webkit-transform: translate(-35.65141em, 30px); -moz-transform: translate(-35.65141em, 30px); -ms-transform: translate(-35.65141em, 30px); -o-transform: translate(-35.65141em, 30px); transform: translate(-35.65141em, 30px) } .mobile-layers .building-5.fade-up.is-visible { -webkit-transform: translate(-35.65141em); -moz-transform: translate(-35.65141em); -ms-transform: translate(-35.65141em); -o-transform: translate(-35.65141em); transform: translate(-35.65141em) } } .mobile-layers .building-6 { position: absolute; left: 50%; top: 85px; z-index: 10; width: 397.195px; height: 259.335px; -webkit-transform: translateX(-750px); -moz-transform: translateX(-750px); -ms-transform: translateX(-750px); -o-transform: translateX(-750px); transform: translateX(-750px); background: url(../images/building-6.png) 0 0/contain no-repeat } .mobile-layers .building-6.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .building-6.fade-in.is-visible { opacity: 1 } .mobile-layers .building-6.fade-up { opacity: 0; -webkit-transform: translate(-750px, 30px); -moz-transform: translate(-750px, 30px); -ms-transform: translate(-750px, 30px); -o-transform: translate(-750px, 30px); transform: translate(-750px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .building-6.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-750px); -moz-transform: translate(-750px); -ms-transform: translate(-750px); -o-transform: translate(-750px); transform: translate(-750px) } @media (max-width: 1136px) { .mobile-layers .building-6 { top: 7.48239vw; width: 34.96435vw; height: 22.82879vw; font-size: 1vw; -webkit-transform: translateX(-66.02113em); -moz-transform: translateX(-66.02113em); -ms-transform: translateX(-66.02113em); -o-transform: translateX(-66.02113em); transform: translateX(-66.02113em) } .mobile-layers .building-6.fade-up { -webkit-transform: translate(-66.02113em, 30px); -moz-transform: translate(-66.02113em, 30px); -ms-transform: translate(-66.02113em, 30px); -o-transform: translate(-66.02113em, 30px); transform: translate(-66.02113em, 30px) } .mobile-layers .building-6.fade-up.is-visible { -webkit-transform: translate(-66.02113em); -moz-transform: translate(-66.02113em); -ms-transform: translate(-66.02113em); -o-transform: translate(-66.02113em); transform: translate(-66.02113em) } } .mobile-layers .building-7 { position: absolute; left: 50%; top: 164px; z-index: 10; width: 435.24px; height: 332.28px; -webkit-transform: translateX(195px); -moz-transform: translateX(195px); -ms-transform: translateX(195px); -o-transform: translateX(195px); transform: translateX(195px); background: url(../images/building-7.png) 0 0/contain no-repeat } .mobile-layers .building-7.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .building-7.fade-in.is-visible { opacity: 1 } .mobile-layers .building-7.fade-up { opacity: 0; -webkit-transform: translate(195px, 30px); -moz-transform: translate(195px, 30px); -ms-transform: translate(195px, 30px); -o-transform: translate(195px, 30px); transform: translate(195px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .building-7.fade-up.is-visible { opacity: 1; -webkit-transform: translate(195px); -moz-transform: translate(195px); -ms-transform: translate(195px); -o-transform: translate(195px); transform: translate(195px) } @media (max-width: 1136px) { .mobile-layers .building-7 { top: 14.43662vw; width: 38.31338vw; height: 29.25vw; font-size: 1vw; -webkit-transform: translateX(17.16549em); -moz-transform: translateX(17.16549em); -ms-transform: translateX(17.16549em); -o-transform: translateX(17.16549em); transform: translateX(17.16549em) } .mobile-layers .building-7.fade-up { -webkit-transform: translate(17.16549em, 30px); -moz-transform: translate(17.16549em, 30px); -ms-transform: translate(17.16549em, 30px); -o-transform: translate(17.16549em, 30px); transform: translate(17.16549em, 30px) } .mobile-layers .building-7.fade-up.is-visible { -webkit-transform: translate(17.16549em); -moz-transform: translate(17.16549em); -ms-transform: translate(17.16549em); -o-transform: translate(17.16549em); transform: translate(17.16549em) } } .mobile-layers .building-8 { position: absolute; left: 50%; top: 301px; z-index: 10; width: 346.26px; height: 265.64px; -webkit-transform: translateX(99px); -moz-transform: translateX(99px); -ms-transform: translateX(99px); -o-transform: translateX(99px); transform: translateX(99px); background: url(../images/building-8.png) 0 0/contain no-repeat } .mobile-layers .building-8.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .building-8.fade-in.is-visible { opacity: 1 } .mobile-layers .building-8.fade-up { opacity: 0; -webkit-transform: translate(99px, 30px); -moz-transform: translate(99px, 30px); -ms-transform: translate(99px, 30px); -o-transform: translate(99px, 30px); transform: translate(99px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .building-8.fade-up.is-visible { opacity: 1; -webkit-transform: translate(99px); -moz-transform: translate(99px); -ms-transform: translate(99px); -o-transform: translate(99px); transform: translate(99px) } @media (max-width: 1136px) { .mobile-layers .building-8 { top: 26.49648vw; width: 30.48063vw; height: 23.3838vw; font-size: 1vw; -webkit-transform: translateX(8.71479em); -moz-transform: translateX(8.71479em); -ms-transform: translateX(8.71479em); -o-transform: translateX(8.71479em); transform: translateX(8.71479em) } .mobile-layers .building-8.fade-up { -webkit-transform: translate(8.71479em, 30px); -moz-transform: translate(8.71479em, 30px); -ms-transform: translate(8.71479em, 30px); -o-transform: translate(8.71479em, 30px); transform: translate(8.71479em, 30px) } .mobile-layers .building-8.fade-up.is-visible { -webkit-transform: translate(8.71479em); -moz-transform: translate(8.71479em); -ms-transform: translate(8.71479em); -o-transform: translate(8.71479em); transform: translate(8.71479em) } } .mobile-layers .building-9 { position: absolute; left: 50%; top: 465px; z-index: 10; width: 211.82px; height: 164.22px; -webkit-transform: translateX(120px); -moz-transform: translateX(120px); -ms-transform: translateX(120px); -o-transform: translateX(120px); transform: translateX(120px); background: url(../images/building-9.png) 0 0/contain no-repeat } .mobile-layers .building-9.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .building-9.fade-in.is-visible { opacity: 1 } .mobile-layers .building-9.fade-up { opacity: 0; -webkit-transform: translate(120px, 30px); -moz-transform: translate(120px, 30px); -ms-transform: translate(120px, 30px); -o-transform: translate(120px, 30px); transform: translate(120px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .building-9.fade-up.is-visible { opacity: 1; -webkit-transform: translate(120px); -moz-transform: translate(120px); -ms-transform: translate(120px); -o-transform: translate(120px); transform: translate(120px) } @media (max-width: 1136px) { .mobile-layers .building-9 { top: 40.9331vw; width: 18.64613vw; height: 14.45599vw; font-size: 1vw; -webkit-transform: translateX(10.56338em); -moz-transform: translateX(10.56338em); -ms-transform: translateX(10.56338em); -o-transform: translateX(10.56338em); transform: translateX(10.56338em) } .mobile-layers .building-9.fade-up { -webkit-transform: translate(10.56338em, 30px); -moz-transform: translate(10.56338em, 30px); -ms-transform: translate(10.56338em, 30px); -o-transform: translate(10.56338em, 30px); transform: translate(10.56338em, 30px) } .mobile-layers .building-9.fade-up.is-visible { -webkit-transform: translate(10.56338em); -moz-transform: translate(10.56338em); -ms-transform: translate(10.56338em); -o-transform: translate(10.56338em); transform: translate(10.56338em) } } .mobile-layers .building-10 { position: absolute; left: 50%; top: 3953px; z-index: 10; width: 456.96px; height: 324.275px; -webkit-transform: translateX(-55px); -moz-transform: translateX(-55px); -ms-transform: translateX(-55px); -o-transform: translateX(-55px); transform: translateX(-55px); background: url(../images/building-10.png) 0 0/contain no-repeat } .mobile-layers .building-10.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .building-10.fade-in.is-visible { opacity: 1 } .mobile-layers .building-10.fade-up { opacity: 0; -webkit-transform: translate(-55px, 30px); -moz-transform: translate(-55px, 30px); -ms-transform: translate(-55px, 30px); -o-transform: translate(-55px, 30px); transform: translate(-55px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .building-10.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-55px); -moz-transform: translate(-55px); -ms-transform: translate(-55px); -o-transform: translate(-55px); transform: translate(-55px) } @media (max-width: 1136px) { .mobile-layers .building-10 { top: 347.97535vw; width: 40.22535vw; height: 28.54533vw; font-size: 1vw; -webkit-transform: translateX(-4.84155em); -moz-transform: translateX(-4.84155em); -ms-transform: translateX(-4.84155em); -o-transform: translateX(-4.84155em); transform: translateX(-4.84155em) } .mobile-layers .building-10.fade-up { -webkit-transform: translate(-4.84155em, 30px); -moz-transform: translate(-4.84155em, 30px); -ms-transform: translate(-4.84155em, 30px); -o-transform: translate(-4.84155em, 30px); transform: translate(-4.84155em, 30px) } .mobile-layers .building-10.fade-up.is-visible { -webkit-transform: translate(-4.84155em); -moz-transform: translate(-4.84155em); -ms-transform: translate(-4.84155em); -o-transform: translate(-4.84155em); transform: translate(-4.84155em) } } .mobile-layers .building-11 { position: absolute; left: 50%; top: 4106px; z-index: 12; width: 227.94px; height: 155.44px; -webkit-transform: translateX(-518px); -moz-transform: translateX(-518px); -ms-transform: translateX(-518px); -o-transform: translateX(-518px); transform: translateX(-518px); background: url(../images/building-11.png) 0 0/contain no-repeat } .mobile-layers .building-11.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .building-11.fade-in.is-visible { opacity: 1 } .mobile-layers .building-11.fade-up { opacity: 0; -webkit-transform: translate(-518px, 30px); -moz-transform: translate(-518px, 30px); -ms-transform: translate(-518px, 30px); -o-transform: translate(-518px, 30px); transform: translate(-518px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .building-11.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-518px); -moz-transform: translate(-518px); -ms-transform: translate(-518px); -o-transform: translate(-518px); transform: translate(-518px) } @media (max-width: 1136px) { .mobile-layers .building-11 { top: 361.44366vw; width: 20.06514vw; height: 13.6831vw; font-size: 1vw; -webkit-transform: translateX(-45.59859em); -moz-transform: translateX(-45.59859em); -ms-transform: translateX(-45.59859em); -o-transform: translateX(-45.59859em); transform: translateX(-45.59859em) } .mobile-layers .building-11.fade-up { -webkit-transform: translate(-45.59859em, 30px); -moz-transform: translate(-45.59859em, 30px); -ms-transform: translate(-45.59859em, 30px); -o-transform: translate(-45.59859em, 30px); transform: translate(-45.59859em, 30px) } .mobile-layers .building-11.fade-up.is-visible { -webkit-transform: translate(-45.59859em); -moz-transform: translate(-45.59859em); -ms-transform: translate(-45.59859em); -o-transform: translate(-45.59859em); transform: translate(-45.59859em) } } .mobile-layers .building-12 { position: absolute; left: 50%; top: 4253px; z-index: 14; width: 557.515px; height: 328.44px; -webkit-transform: translateX(-540px); -moz-transform: translateX(-540px); -ms-transform: translateX(-540px); -o-transform: translateX(-540px); transform: translateX(-540px); background: url(../images/building-12.png) 0 0/contain no-repeat } .mobile-layers .building-12.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .building-12.fade-in.is-visible { opacity: 1 } .mobile-layers .building-12.fade-up { opacity: 0; -webkit-transform: translate(-540px, 30px); -moz-transform: translate(-540px, 30px); -ms-transform: translate(-540px, 30px); -o-transform: translate(-540px, 30px); transform: translate(-540px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .building-12.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-540px); -moz-transform: translate(-540px); -ms-transform: translate(-540px); -o-transform: translate(-540px); transform: translate(-540px) } @media (max-width: 1136px) { .mobile-layers .building-12 { top: 374.3838vw; width: 49.07702vw; height: 28.91197vw; font-size: 1vw; -webkit-transform: translateX(-47.53521em); -moz-transform: translateX(-47.53521em); -ms-transform: translateX(-47.53521em); -o-transform: translateX(-47.53521em); transform: translateX(-47.53521em) } .mobile-layers .building-12.fade-up { -webkit-transform: translate(-47.53521em, 30px); -moz-transform: translate(-47.53521em, 30px); -ms-transform: translate(-47.53521em, 30px); -o-transform: translate(-47.53521em, 30px); transform: translate(-47.53521em, 30px) } .mobile-layers .building-12.fade-up.is-visible { -webkit-transform: translate(-47.53521em); -moz-transform: translate(-47.53521em); -ms-transform: translate(-47.53521em); -o-transform: translate(-47.53521em); transform: translate(-47.53521em) } } .mobile-layers .bus-stop { position: absolute; left: 50%; top: 3007px; z-index: 10; width: 112.7px; height: 74.06px; -webkit-transform: translateX(-218px); -moz-transform: translateX(-218px); -ms-transform: translateX(-218px); -o-transform: translateX(-218px); transform: translateX(-218px); background: url(../images/bus-stop.png) 0 0/contain no-repeat } .mobile-layers .bus-stop.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .bus-stop.fade-in.is-visible { opacity: 1 } .mobile-layers .bus-stop.fade-up { opacity: 0; -webkit-transform: translate(-218px, 30px); -moz-transform: translate(-218px, 30px); -ms-transform: translate(-218px, 30px); -o-transform: translate(-218px, 30px); transform: translate(-218px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .bus-stop.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-218px); -moz-transform: translate(-218px); -ms-transform: translate(-218px); -o-transform: translate(-218px); transform: translate(-218px) } @media (max-width: 1136px) { .mobile-layers .bus-stop { top: 264.7007vw; width: 9.92077vw; height: 6.51937vw; font-size: 1vw; -webkit-transform: translateX(-19.19014em); -moz-transform: translateX(-19.19014em); -ms-transform: translateX(-19.19014em); -o-transform: translateX(-19.19014em); transform: translateX(-19.19014em) } .mobile-layers .bus-stop.fade-up { -webkit-transform: translate(-19.19014em, 30px); -moz-transform: translate(-19.19014em, 30px); -ms-transform: translate(-19.19014em, 30px); -o-transform: translate(-19.19014em, 30px); transform: translate(-19.19014em, 30px) } .mobile-layers .bus-stop.fade-up.is-visible { -webkit-transform: translate(-19.19014em); -moz-transform: translate(-19.19014em); -ms-transform: translate(-19.19014em); -o-transform: translate(-19.19014em); transform: translate(-19.19014em) } } .mobile-layers .sign-1 { position: absolute; left: 50%; top: 4092px; z-index: 12; width: 30.4px; height: 86px; -webkit-transform: translateX(-299px); -moz-transform: translateX(-299px); -ms-transform: translateX(-299px); -o-transform: translateX(-299px); transform: translateX(-299px); background: url(../images/sign-1.png) 0 0/contain no-repeat } .mobile-layers .sign-1.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .sign-1.fade-in.is-visible { opacity: 1 } .mobile-layers .sign-1.fade-up { opacity: 0; -webkit-transform: translate(-299px, 30px); -moz-transform: translate(-299px, 30px); -ms-transform: translate(-299px, 30px); -o-transform: translate(-299px, 30px); transform: translate(-299px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .sign-1.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-299px); -moz-transform: translate(-299px); -ms-transform: translate(-299px); -o-transform: translate(-299px); transform: translate(-299px) } @media (max-width: 1136px) { .mobile-layers .sign-1 { top: 360.21127vw; width: 2.67606vw; height: 7.57042vw; font-size: 1vw; -webkit-transform: translateX(-26.32042em); -moz-transform: translateX(-26.32042em); -ms-transform: translateX(-26.32042em); -o-transform: translateX(-26.32042em); transform: translateX(-26.32042em) } .mobile-layers .sign-1.fade-up { -webkit-transform: translate(-26.32042em, 30px); -moz-transform: translate(-26.32042em, 30px); -ms-transform: translate(-26.32042em, 30px); -o-transform: translate(-26.32042em, 30px); transform: translate(-26.32042em, 30px) } .mobile-layers .sign-1.fade-up.is-visible { -webkit-transform: translate(-26.32042em); -moz-transform: translate(-26.32042em); -ms-transform: translate(-26.32042em); -o-transform: translate(-26.32042em); transform: translate(-26.32042em) } } .mobile-layers .sign-2 { position: absolute; left: 50%; top: 4291px; z-index: 10; width: 57.12px; height: 74.48px; -webkit-transform: translateX(271px); -moz-transform: translateX(271px); -ms-transform: translateX(271px); -o-transform: translateX(271px); transform: translateX(271px); background: url(../images/sign-2.png) 0 0/contain no-repeat } .mobile-layers .sign-2.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .sign-2.fade-in.is-visible { opacity: 1 } .mobile-layers .sign-2.fade-up { opacity: 0; -webkit-transform: translate(271px, 30px); -moz-transform: translate(271px, 30px); -ms-transform: translate(271px, 30px); -o-transform: translate(271px, 30px); transform: translate(271px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .sign-2.fade-up.is-visible { opacity: 1; -webkit-transform: translate(271px); -moz-transform: translate(271px); -ms-transform: translate(271px); -o-transform: translate(271px); transform: translate(271px) } @media (max-width: 1136px) { .mobile-layers .sign-2 { top: 377.72887vw; width: 5.02817vw; height: 6.55634vw; font-size: 1vw; -webkit-transform: translateX(23.85563em); -moz-transform: translateX(23.85563em); -ms-transform: translateX(23.85563em); -o-transform: translateX(23.85563em); transform: translateX(23.85563em) } .mobile-layers .sign-2.fade-up { -webkit-transform: translate(23.85563em, 30px); -moz-transform: translate(23.85563em, 30px); -ms-transform: translate(23.85563em, 30px); -o-transform: translate(23.85563em, 30px); transform: translate(23.85563em, 30px) } .mobile-layers .sign-2.fade-up.is-visible { -webkit-transform: translate(23.85563em); -moz-transform: translate(23.85563em); -ms-transform: translate(23.85563em); -o-transform: translate(23.85563em); transform: translate(23.85563em) } } .mobile-layers .sign-3 { position: absolute; left: 50%; top: 8333px; z-index: 10; width: 55px; height: 80.85px; -webkit-transform: translateX(-64px); -moz-transform: translateX(-64px); -ms-transform: translateX(-64px); -o-transform: translateX(-64px); transform: translateX(-64px); background: url(../images/sign-3.png) 0 0/contain no-repeat } .mobile-layers .sign-3.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .sign-3.fade-in.is-visible { opacity: 1 } .mobile-layers .sign-3.fade-up { opacity: 0; -webkit-transform: translate(-64px, 30px); -moz-transform: translate(-64px, 30px); -ms-transform: translate(-64px, 30px); -o-transform: translate(-64px, 30px); transform: translate(-64px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .sign-3.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-64px); -moz-transform: translate(-64px); -ms-transform: translate(-64px); -o-transform: translate(-64px); transform: translate(-64px) } @media (max-width: 1136px) { .mobile-layers .sign-3 { top: 733.53873vw; width: 4.84155vw; height: 7.11708vw; font-size: 1vw; -webkit-transform: translateX(-5.6338em); -moz-transform: translateX(-5.6338em); -ms-transform: translateX(-5.6338em); -o-transform: translateX(-5.6338em); transform: translateX(-5.6338em) } .mobile-layers .sign-3.fade-up { -webkit-transform: translate(-5.6338em, 30px); -moz-transform: translate(-5.6338em, 30px); -ms-transform: translate(-5.6338em, 30px); -o-transform: translate(-5.6338em, 30px); transform: translate(-5.6338em, 30px) } .mobile-layers .sign-3.fade-up.is-visible { -webkit-transform: translate(-5.6338em); -moz-transform: translate(-5.6338em); -ms-transform: translate(-5.6338em); -o-transform: translate(-5.6338em); transform: translate(-5.6338em) } } .mobile-layers .start-back { position: absolute; left: 50%; top: 386px; z-index: 11; width: 214.92px; height: 166.32px; -webkit-transform: translateX(-69px); -moz-transform: translateX(-69px); -ms-transform: translateX(-69px); -o-transform: translateX(-69px); transform: translateX(-69px); background: url(../images/start-back.png) 0 0/contain no-repeat; pointer-events: none } .mobile-layers .start-back.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .start-back.fade-in.is-visible { opacity: 1 } .mobile-layers .start-back.fade-up { opacity: 0; -webkit-transform: translate(-69px, 30px); -moz-transform: translate(-69px, 30px); -ms-transform: translate(-69px, 30px); -o-transform: translate(-69px, 30px); transform: translate(-69px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .start-back.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-69px); -moz-transform: translate(-69px); -ms-transform: translate(-69px); -o-transform: translate(-69px); transform: translate(-69px) } @media (max-width: 1136px) { .mobile-layers .start-back { top: 33.97887vw; width: 18.91901vw; height: 14.64085vw; font-size: 1vw; -webkit-transform: translateX(-6.07394em); -moz-transform: translateX(-6.07394em); -ms-transform: translateX(-6.07394em); -o-transform: translateX(-6.07394em); transform: translateX(-6.07394em) } .mobile-layers .start-back.fade-up { -webkit-transform: translate(-6.07394em, 30px); -moz-transform: translate(-6.07394em, 30px); -ms-transform: translate(-6.07394em, 30px); -o-transform: translate(-6.07394em, 30px); transform: translate(-6.07394em, 30px) } .mobile-layers .start-back.fade-up.is-visible { -webkit-transform: translate(-6.07394em); -moz-transform: translate(-6.07394em); -ms-transform: translate(-6.07394em); -o-transform: translate(-6.07394em); transform: translate(-6.07394em) } } .mobile-layers .start-front { position: absolute; left: 50%; top: 386px; z-index: 13; width: 214.92px; height: 166.32px; -webkit-transform: translateX(-69px); -moz-transform: translateX(-69px); -ms-transform: translateX(-69px); -o-transform: translateX(-69px); transform: translateX(-69px); background: url(../images/start-front.png) 0 0/contain no-repeat; pointer-events: none } .mobile-layers .start-front.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .start-front.fade-in.is-visible { opacity: 1 } .mobile-layers .start-front.fade-up { opacity: 0; -webkit-transform: translate(-69px, 30px); -moz-transform: translate(-69px, 30px); -ms-transform: translate(-69px, 30px); -o-transform: translate(-69px, 30px); transform: translate(-69px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .start-front.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-69px); -moz-transform: translate(-69px); -ms-transform: translate(-69px); -o-transform: translate(-69px); transform: translate(-69px) } @media (max-width: 1136px) { .mobile-layers .start-front { top: 33.97887vw; width: 18.91901vw; height: 14.64085vw; font-size: 1vw; -webkit-transform: translateX(-6.07394em); -moz-transform: translateX(-6.07394em); -ms-transform: translateX(-6.07394em); -o-transform: translateX(-6.07394em); transform: translateX(-6.07394em) } .mobile-layers .start-front.fade-up { -webkit-transform: translate(-6.07394em, 30px); -moz-transform: translate(-6.07394em, 30px); -ms-transform: translate(-6.07394em, 30px); -o-transform: translate(-6.07394em, 30px); transform: translate(-6.07394em, 30px) } .mobile-layers .start-front.fade-up.is-visible { -webkit-transform: translate(-6.07394em); -moz-transform: translate(-6.07394em); -ms-transform: translate(-6.07394em); -o-transform: translate(-6.07394em); transform: translate(-6.07394em) } } .mobile-layers .finish { position: absolute; left: 50%; top: 10633px; z-index: 13; width: 253.995px; height: 192.495px; -webkit-transform: translateX(-188px); -moz-transform: translateX(-188px); -ms-transform: translateX(-188px); -o-transform: translateX(-188px); transform: translateX(-188px); background: url(../images/finish.png) 0 0/contain no-repeat } .mobile-layers .finish.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .finish.fade-in.is-visible { opacity: 1 } .mobile-layers .finish.fade-up { opacity: 0; -webkit-transform: translate(-188px, 30px); -moz-transform: translate(-188px, 30px); -ms-transform: translate(-188px, 30px); -o-transform: translate(-188px, 30px); transform: translate(-188px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .finish.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-188px); -moz-transform: translate(-188px); -ms-transform: translate(-188px); -o-transform: translate(-188px); transform: translate(-188px) } @media (max-width: 1136px) { .mobile-layers .finish { top: 936.00352vw; width: 22.35871vw; height: 16.94498vw; font-size: 1vw; -webkit-transform: translateX(-16.5493em); -moz-transform: translateX(-16.5493em); -ms-transform: translateX(-16.5493em); -o-transform: translateX(-16.5493em); transform: translateX(-16.5493em) } .mobile-layers .finish.fade-up { -webkit-transform: translate(-16.5493em, 30px); -moz-transform: translate(-16.5493em, 30px); -ms-transform: translate(-16.5493em, 30px); -o-transform: translate(-16.5493em, 30px); transform: translate(-16.5493em, 30px) } .mobile-layers .finish.fade-up.is-visible { -webkit-transform: translate(-16.5493em); -moz-transform: translate(-16.5493em); -ms-transform: translate(-16.5493em); -o-transform: translate(-16.5493em); transform: translate(-16.5493em) } } .mobile-layers .arrow { position: absolute; left: 50%; top: 495px; z-index: 11; width: 77.88px; height: 43.66px; -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -ms-transform: translateX(20px); -o-transform: translateX(20px); transform: translateX(20px); background: url(../images/arrow.png) 0 0/contain no-repeat; font-size: 1vw; cursor: pointer; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); transform: translateZ(0); -webkit-animation: 1s linear infinite alternate s; -moz-animation: 1s linear infinite alternate s; -o-animation: 1s linear infinite alternate s; animation: 1s linear infinite alternate s } .mobile-layers .arrow.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .arrow.fade-in.is-visible { opacity: 1 } .mobile-layers .arrow.fade-up { opacity: 0; -webkit-transform: translate(20px, 30px); -moz-transform: translate(20px, 30px); -ms-transform: translate(20px, 30px); -o-transform: translate(20px, 30px); transform: translate(20px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .arrow.fade-up.is-visible { opacity: 1; -webkit-transform: translate(20px); -moz-transform: translate(20px); -ms-transform: translate(20px); -o-transform: translate(20px); transform: translate(20px) } @media (max-width: 1136px) { .mobile-layers .arrow { top: 43.57394vw; width: 6.85563vw; height: 3.84331vw; font-size: 1vw; -webkit-transform: translateX(1.76056em); -moz-transform: translateX(1.76056em); -ms-transform: translateX(1.76056em); -o-transform: translateX(1.76056em); transform: translateX(1.76056em) } .mobile-layers .arrow.fade-up { -webkit-transform: translate(1.76056em, 30px); -moz-transform: translate(1.76056em, 30px); -ms-transform: translate(1.76056em, 30px); -o-transform: translate(1.76056em, 30px); transform: translate(1.76056em, 30px) } .mobile-layers .arrow.fade-up.is-visible { -webkit-transform: translate(1.76056em); -moz-transform: translate(1.76056em); -ms-transform: translate(1.76056em); -o-transform: translate(1.76056em); transform: translate(1.76056em) } } @-webkit-keyframes s { 0% { -webkit-transform: translate(20px); transform: translate(20px) } to { -webkit-transform: translate(-.13602px, 10.03945px); transform: translate(-.13602px, 10.03945px) } } @-moz-keyframes s { 0% { -moz-transform: translate(20px); transform: translate(20px) } to { -moz-transform: translate(-.13602px, 10.03945px); transform: translate(-.13602px, 10.03945px) } } @-o-keyframes s { 0% { -o-transform: translate(20px); transform: translate(20px) } to { -o-transform: translate(-.13602px, 10.03945px); transform: translate(-.13602px, 10.03945px) } } @keyframes s { 0% { -webkit-transform: translate(20px); -moz-transform: translate(20px); -o-transform: translate(20px); transform: translate(20px) } to { -webkit-transform: translate(-.13602px, 10.03945px); -moz-transform: translate(-.13602px, 10.03945px); -o-transform: translate(-.13602px, 10.03945px); transform: translate(-.13602px, 10.03945px) } } @-webkit-keyframes t { 0% { -webkit-transform: translate(1.76056em); transform: translate(1.76056em) } to { -webkit-transform: translate(-.01197em, .88375em); transform: translate(-.01197em, .88375em) } } @-moz-keyframes t { 0% { -moz-transform: translate(1.76056em); transform: translate(1.76056em) } to { -moz-transform: translate(-.01197em, .88375em); transform: translate(-.01197em, .88375em) } } @-o-keyframes t { 0% { -o-transform: translate(1.76056em); transform: translate(1.76056em) } to { -o-transform: translate(-.01197em, .88375em); transform: translate(-.01197em, .88375em) } } @keyframes t { 0% { -webkit-transform: translate(1.76056em); -moz-transform: translate(1.76056em); -o-transform: translate(1.76056em); transform: translate(1.76056em) } to { -webkit-transform: translate(-.01197em, .88375em); -moz-transform: translate(-.01197em, .88375em); -o-transform: translate(-.01197em, .88375em); transform: translate(-.01197em, .88375em) } } @media (max-width: 1136px) { .mobile-layers .arrow { -webkit-animation: 1s linear infinite alternate t; -moz-animation: 1s linear infinite alternate t; -o-animation: 1s linear infinite alternate t; animation: 1s linear infinite alternate t } } .mobile-layers .car { position: absolute; left: 50%; top: 383px; z-index: 12; width: 134.4px; height: 94.08px; -webkit-transform: translateX(118px); -moz-transform: translateX(118px); -ms-transform: translateX(118px); -o-transform: translateX(118px); transform: translateX(118px); pointer-events: none; -ms-touch-action: none; touch-action: none } .mobile-layers .car:after, .mobile-layers .car:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: 0 0/contain no-repeat } .mobile-layers .car:before { background-image: url(../images/car-shadow-angle-0.png) } .mobile-layers .car:after { background-image: url(../images/car-angle-0.png) } .mobile-layers .car.angle-0:before { background-image: url(../images/car-shadow-angle-0.png) } .mobile-layers .car.angle-0:after { background-image: url(../images/car-angle-0.png) } .mobile-layers .car.angle-1:before { background-image: url(../images/car-shadow-angle-1.png) } .mobile-layers .car.angle-1:after { background-image: url(../images/car-angle-1.png) } .mobile-layers .car.angle-2:before { background-image: url(../images/car-shadow-angle-2.png) } .mobile-layers .car.angle-2:after { background-image: url(../images/car-angle-2.png) } .mobile-layers .car.angle-3:before { background-image: url(../images/car-shadow-angle-3.png) } .mobile-layers .car.angle-3:after { background-image: url(../images/car-angle-3.png) } .mobile-layers .car.angle-4:before { background-image: url(../images/car-shadow-angle-4.png) } .mobile-layers .car.angle-4:after { background-image: url(../images/car-angle-4.png) } .mobile-layers .car.angle-5:before { background-image: url(../images/car-shadow-angle-5.png) } .mobile-layers .car.angle-5:after { background-image: url(../images/car-angle-5.png) } .mobile-layers .car.angle-6:before { background-image: url(../images/car-shadow-angle-6.png) } .mobile-layers .car.angle-6:after { background-image: url(../images/car-angle-6.png) } .mobile-layers .car.angle-7:before { background-image: url(../images/car-shadow-angle-7.png) } .mobile-layers .car.angle-7:after { background-image: url(../images/car-angle-7.png) } .mobile-layers .car.angle-8:before { background-image: url(../images/car-shadow-angle-8.png) } .mobile-layers .car.angle-8:after { background-image: url(../images/car-angle-8.png) } .mobile-layers .car.angle-9:before { background-image: url(../images/car-shadow-angle-9.png) } .mobile-layers .car.angle-9:after { background-image: url(../images/car-angle-9.png) } .mobile-layers .car.angle-10:before { background-image: url(../images/car-shadow-angle-10.png) } .mobile-layers .car.angle-10:after { background-image: url(../images/car-angle-10.png) } .mobile-layers .car.angle-11:before { background-image: url(../images/car-shadow-angle-11.png) } .mobile-layers .car.angle-11:after { background-image: url(../images/car-angle-11.png) } .mobile-layers .car.angle-12:before { background-image: url(../images/car-shadow-angle-12.png) } .mobile-layers .car.angle-12:after { background-image: url(../images/car-angle-12.png) } .mobile-layers .car.angle-13:before { background-image: url(../images/car-shadow-angle-13.png) } .mobile-layers .car.angle-13:after { background-image: url(../images/car-angle-13.png) } .mobile-layers .car.angle-14:before { background-image: url(../images/car-shadow-angle-14.png) } .mobile-layers .car.angle-14:after { background-image: url(../images/car-angle-14.png) } .mobile-layers .car.angle-15:before { background-image: url(../images/car-shadow-angle-15.png) } .mobile-layers .car.angle-15:after { background-image: url(../images/car-angle-15.png) } @media (max-width: 1136px) { .mobile-layers .car { top: 33.71479vw; width: 11.83099vw; height: 8.28169vw; font-size: 1vw; -webkit-transform: translateX(10.38732em); -moz-transform: translateX(10.38732em); -ms-transform: translateX(10.38732em); -o-transform: translateX(10.38732em); transform: translateX(10.38732em) } } .mobile-layers .car-hook { position: absolute; left: 50%; top: 383px; z-index: 10; width: 134.4px; height: 94.08px; -webkit-transform: translateX(118px); -moz-transform: translateX(118px); -ms-transform: translateX(118px); -o-transform: translateX(118px); transform: translateX(118px) } .mobile-layers .car-hook.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .car-hook.fade-in.is-visible { opacity: 1 } .mobile-layers .car-hook.fade-up { opacity: 0; -webkit-transform: translate(118px, 30px); -moz-transform: translate(118px, 30px); -ms-transform: translate(118px, 30px); -o-transform: translate(118px, 30px); transform: translate(118px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .car-hook.fade-up.is-visible { opacity: 1; -webkit-transform: translate(118px); -moz-transform: translate(118px); -ms-transform: translate(118px); -o-transform: translate(118px); transform: translate(118px) } @media (max-width: 1136px) { .mobile-layers .car-hook { top: 33.71479vw; width: 11.83099vw; height: 8.28169vw; font-size: 1vw; -webkit-transform: translateX(10.38732em); -moz-transform: translateX(10.38732em); -ms-transform: translateX(10.38732em); -o-transform: translateX(10.38732em); transform: translateX(10.38732em) } .mobile-layers .car-hook.fade-up { -webkit-transform: translate(10.38732em, 30px); -moz-transform: translate(10.38732em, 30px); -ms-transform: translate(10.38732em, 30px); -o-transform: translate(10.38732em, 30px); transform: translate(10.38732em, 30px) } .mobile-layers .car-hook.fade-up.is-visible { -webkit-transform: translate(10.38732em); -moz-transform: translate(10.38732em); -ms-transform: translate(10.38732em); -o-transform: translate(10.38732em); transform: translate(10.38732em) } } .mobile-layers .car-2 { position: absolute; left: 50%; top: 3972px; z-index: 10; width: 152.96px; height: 102.4px; -webkit-transform: translateX(107px); -moz-transform: translateX(107px); -ms-transform: translateX(107px); -o-transform: translateX(107px); transform: translateX(107px); background: url(../images/car-2-angle-10.png) 0 0/contain no-repeat } .mobile-layers .car-2.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .car-2.fade-in.is-visible { opacity: 1 } .mobile-layers .car-2.fade-up { opacity: 0; -webkit-transform: translate(107px, 30px); -moz-transform: translate(107px, 30px); -ms-transform: translate(107px, 30px); -o-transform: translate(107px, 30px); transform: translate(107px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .car-2.fade-up.is-visible { opacity: 1; -webkit-transform: translate(107px); -moz-transform: translate(107px); -ms-transform: translate(107px); -o-transform: translate(107px); transform: translate(107px) } @media (max-width: 1136px) { .mobile-layers .car-2 { top: 349.64789vw; width: 13.46479vw; height: 9.01408vw; font-size: 1vw; -webkit-transform: translateX(9.41901em); -moz-transform: translateX(9.41901em); -ms-transform: translateX(9.41901em); -o-transform: translateX(9.41901em); transform: translateX(9.41901em) } .mobile-layers .car-2.fade-up { -webkit-transform: translate(9.41901em, 30px); -moz-transform: translate(9.41901em, 30px); -ms-transform: translate(9.41901em, 30px); -o-transform: translate(9.41901em, 30px); transform: translate(9.41901em, 30px) } .mobile-layers .car-2.fade-up.is-visible { -webkit-transform: translate(9.41901em); -moz-transform: translate(9.41901em); -ms-transform: translate(9.41901em); -o-transform: translate(9.41901em); transform: translate(9.41901em) } } .mobile-layers .car-3 { position: absolute; left: 50%; top: 4259px; z-index: 13; width: 250.24px; height: 144.64px; -webkit-transform: translateX(-516px); -moz-transform: translateX(-516px); -ms-transform: translateX(-516px); -o-transform: translateX(-516px); transform: translateX(-516px); background: url(../images/car-3-angle-2.png) 0 0/contain no-repeat } .mobile-layers .car-3.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .car-3.fade-in.is-visible { opacity: 1 } .mobile-layers .car-3.fade-up { opacity: 0; -webkit-transform: translate(-516px, 30px); -moz-transform: translate(-516px, 30px); -ms-transform: translate(-516px, 30px); -o-transform: translate(-516px, 30px); transform: translate(-516px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .car-3.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-516px); -moz-transform: translate(-516px); -ms-transform: translate(-516px); -o-transform: translate(-516px); transform: translate(-516px) } @media (max-width: 1136px) { .mobile-layers .car-3 { top: 374.91197vw; width: 22.02817vw; height: 12.73239vw; font-size: 1vw; -webkit-transform: translateX(-45.42254em); -moz-transform: translateX(-45.42254em); -ms-transform: translateX(-45.42254em); -o-transform: translateX(-45.42254em); transform: translateX(-45.42254em) } .mobile-layers .car-3.fade-up { -webkit-transform: translate(-45.42254em, 30px); -moz-transform: translate(-45.42254em, 30px); -ms-transform: translate(-45.42254em, 30px); -o-transform: translate(-45.42254em, 30px); transform: translate(-45.42254em, 30px) } .mobile-layers .car-3.fade-up.is-visible { -webkit-transform: translate(-45.42254em); -moz-transform: translate(-45.42254em); -ms-transform: translate(-45.42254em); -o-transform: translate(-45.42254em); transform: translate(-45.42254em) } } .mobile-layers .car-4 { position: absolute; left: 50%; top: 5660px; z-index: 13; width: 250.24px; height: 144.64px; -webkit-transform: translateX(-500px); -moz-transform: translateX(-500px); -ms-transform: translateX(-500px); -o-transform: translateX(-500px); transform: translateX(-500px); background: url(../images/car-3-angle-2.png) 0 0/contain no-repeat } .mobile-layers .car-4.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .car-4.fade-in.is-visible { opacity: 1 } .mobile-layers .car-4.fade-up { opacity: 0; -webkit-transform: translate(-500px, 30px); -moz-transform: translate(-500px, 30px); -ms-transform: translate(-500px, 30px); -o-transform: translate(-500px, 30px); transform: translate(-500px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .car-4.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-500px); -moz-transform: translate(-500px); -ms-transform: translate(-500px); -o-transform: translate(-500px); transform: translate(-500px) } @media (max-width: 1136px) { .mobile-layers .car-4 { top: 498.23944vw; width: 22.02817vw; height: 12.73239vw; font-size: 1vw; -webkit-transform: translateX(-44.01408em); -moz-transform: translateX(-44.01408em); -ms-transform: translateX(-44.01408em); -o-transform: translateX(-44.01408em); transform: translateX(-44.01408em) } .mobile-layers .car-4.fade-up { -webkit-transform: translate(-44.01408em, 30px); -moz-transform: translate(-44.01408em, 30px); -ms-transform: translate(-44.01408em, 30px); -o-transform: translate(-44.01408em, 30px); transform: translate(-44.01408em, 30px) } .mobile-layers .car-4.fade-up.is-visible { -webkit-transform: translate(-44.01408em); -moz-transform: translate(-44.01408em); -ms-transform: translate(-44.01408em); -o-transform: translate(-44.01408em); transform: translate(-44.01408em) } } .mobile-layers .car-5 { position: absolute; left: 50%; top: 5677px; z-index: 12; width: 154.24px; height: 103.04px; -webkit-transform: translateX(-490px); -moz-transform: translateX(-490px); -ms-transform: translateX(-490px); -o-transform: translateX(-490px); transform: translateX(-490px); background: url(../images/car-2-angle-2.png) 0 0/contain no-repeat } .mobile-layers .car-5.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .car-5.fade-in.is-visible { opacity: 1 } .mobile-layers .car-5.fade-up { opacity: 0; -webkit-transform: translate(-490px, 30px); -moz-transform: translate(-490px, 30px); -ms-transform: translate(-490px, 30px); -o-transform: translate(-490px, 30px); transform: translate(-490px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .car-5.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-490px); -moz-transform: translate(-490px); -ms-transform: translate(-490px); -o-transform: translate(-490px); transform: translate(-490px) } @media (max-width: 1136px) { .mobile-layers .car-5 { top: 499.73592vw; width: 13.57746vw; height: 9.07042vw; font-size: 1vw; -webkit-transform: translateX(-43.1338em); -moz-transform: translateX(-43.1338em); -ms-transform: translateX(-43.1338em); -o-transform: translateX(-43.1338em); transform: translateX(-43.1338em) } .mobile-layers .car-5.fade-up { -webkit-transform: translate(-43.1338em, 30px); -moz-transform: translate(-43.1338em, 30px); -ms-transform: translate(-43.1338em, 30px); -o-transform: translate(-43.1338em, 30px); transform: translate(-43.1338em, 30px) } .mobile-layers .car-5.fade-up.is-visible { -webkit-transform: translate(-43.1338em); -moz-transform: translate(-43.1338em); -ms-transform: translate(-43.1338em); -o-transform: translate(-43.1338em); transform: translate(-43.1338em) } } .mobile-layers .elk { position: absolute; left: 50%; top: 1457px; z-index: 12; width: 93.2px; height: 65.2px; -webkit-transform: translateX(-351px); -moz-transform: translateX(-351px); -ms-transform: translateX(-351px); -o-transform: translateX(-351px); transform: translateX(-351px); background: url(../images/elk.png) 0 0/contain no-repeat } .mobile-layers .elk.fade-in { opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s } .mobile-layers .elk.fade-in.is-visible { opacity: 1 } .mobile-layers .elk.fade-up { opacity: 0; -webkit-transform: translate(-351px, 30px); -moz-transform: translate(-351px, 30px); -ms-transform: translate(-351px, 30px); -o-transform: translate(-351px, 30px); transform: translate(-351px, 30px); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, -o-transform 1s; -moz-transition: opacity 1s, transform 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s, -moz-transform 1s, -o-transform 1s } .mobile-layers .elk.fade-up.is-visible { opacity: 1; -webkit-transform: translate(-351px); -moz-transform: translate(-351px); -ms-transform: translate(-351px); -o-transform: translate(-351px); transform: translate(-351px) } @media (max-width: 1136px) { .mobile-layers .elk { top: 128.25704vw; width: 8.20423vw; height: 5.73944vw; font-size: 1vw; -webkit-transform: translateX(-30.89789em); -moz-transform: translateX(-30.89789em); -ms-transform: translateX(-30.89789em); -o-transform: translateX(-30.89789em); transform: translateX(-30.89789em) } .mobile-layers .elk.fade-up { -webkit-transform: translate(-30.89789em, 30px); -moz-transform: translate(-30.89789em, 30px); -ms-transform: translate(-30.89789em, 30px); -o-transform: translate(-30.89789em, 30px); transform: translate(-30.89789em, 30px) } .mobile-layers .elk.fade-up.is-visible { -webkit-transform: translate(-30.89789em); -moz-transform: translate(-30.89789em); -ms-transform: translate(-30.89789em); -o-transform: translate(-30.89789em); transform: translate(-30.89789em) } } .mobile-orientation { position: fixed; left: 0; top: 0; display: none; width: 100%; height: 100%; background: url(../images/mobile-orientation-background.jpg) 50% 50%/cover no-repeat } .mobile-orientation .inner { padding: 120px 0 30px } @media (max-width: 640px) { .mobile-orientation .inner { padding: 18.75vw 0 4.6875vw } } .mobile-orientation .text-1 { margin-bottom: 30px; font-family: Roboto, sans-serif; font-size: 28px; line-height: 40px; text-align: center; color: #000 } @media (max-width: 640px) { .mobile-orientation .text-1 { margin-bottom: 4.6875vw; font-size: 4.375vw; line-height: 6.25vw } } .mobile-orientation .text-2 { margin-bottom: 82px; font-family: Roboto, sans-serif; font-size: 35px; line-height: 46px; text-align: center; text-transform: uppercase } @media (max-width: 640px) { .mobile-orientation .text-2 { margin-bottom: 12.8125vw; font-size: 5.46875vw; line-height: 7.1875vw } } .mobile-orientation .icon { position: relative; margin: 0 auto; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; width: 166px; height: 166px; background-color: #8ab247 } .mobile-orientation .icon:before { content: ""; position: absolute; left: 50%; top: 35px; margin-left: -56px; width: 112px; height: 113px; background: url(../images/orientation-icon.png) 50% 50%/contain no-repeat } @media (max-width: 640px) { .mobile-orientation .icon:before { top: 5.46875vw; margin-left: -8.75vw; width: 17.5vw; height: 17.65625vw } } @media (max-width: 640px) { .mobile-orientation .icon { width: 25.9375vw; height: 25.9375vw } } .mobile-orientation .forest { margin: -90px auto 0; width: 377px; height: 281px; background: url(../images/ground-9.png) 0 0/contain no-repeat; -webkit-transform: translateX(-60px); -moz-transform: translateX(-60px); -ms-transform: translateX(-60px); -o-transform: translateX(-60px); transform: translateX(-60px) } @media (max-width: 640px) { .mobile-orientation .forest { margin-top: -14.0625vw; width: 58.90625vw; height: 43.90625vw; font-size: 1vw; -webkit-transform: translateX(-9.375em); -moz-transform: translateX(-9.375em); -ms-transform: translateX(-9.375em); -o-transform: translateX(-9.375em); transform: translateX(-9.375em) } } @media (orientation: portrait) { .mobile.page-index:not(.on-finish) .mobile-orientation { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center } } @media (orientation: portrait) { .mobile.page-index:not(.on-finish) .slider { display: none } } .cssdesignawards { position: fixed; right: 20px; bottom: 20px; z-index: 20; width: 90px; height: 90px; background: url(../images/cssda-wotd-purple.png) 0 0/contain no-repeat } /*# sourceMappingURL=main.css.map */