video { background-color: transparent !important; } @font-face { font-family: 'bernier_distressedregular'; src: url("../fonts/bernier_distressed-webfont.eot"); src: url("../fonts/bernier_distressed-webfontd41d.eot?#iefix") format("embedded-opentype"), url("../fonts/bernier_distressed-webfont.woff2") format("woff2"), url("../fonts/bernier_distressed-webfont.woff") format("woff"), url("../fonts/bernier_distressed-webfont.ttf") format("truetype"), url("../fonts/bernier_distressed-webfont.svg#bernier_distressedregular") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: 'bernier_regular'; src: url("../fonts/bernier_regular-webfont.eot"); src: url("../fonts/bernier_regular-webfontd41d.eot?#iefix") format("embedded-opentype"), url("../fonts/bernier_regular-webfont.woff2") format("woff2"), url("../fonts/bernier_regular-webfont.woff") format("woff"), url("../fonts/bernier_regular-webfont.ttf") format("truetype"), url("../fonts/bernier_regular-webfont.svg#bernier_regularregular") format("svg"); font-weight: normal; font-style: normal; } ::-webkit-scrollbar { width: 8px; background: #17181c; } ::-webkit-scrollbar-thumb { background: #fff; } @media only screen and (max-width: 900px) { main.work .wrapper, main.directors .wrapper { display: none; } } ::selection { background: #17181c; /* WebKit/Blink Browsers */ color: #f7f3f2; } ::-moz-selection { background: #17181c; /* Gecko Browsers */ color: #f7f3f2; } body, html { height: 100%; width: 100%; overflow: hidden; } ul { list-style: none; margin: 0; padding: 0; } ul li { margin: 0; padding: 0; } ul, ol { list-style: none; } body, div, a, p, h1, h2, h3, h4, h5, h6, li { color: #f7f3f2; text-decoration: none; margin: 0; font-size: 1em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.1em; font-weight: normal; text-align: center; font-family: "bee", sans-serif; position: relative; text-rendering: optimizeLegibility; } span, section { position: relative; } h1, h3 { font-family: "bernier_regular", sans-serif; text-transform: uppercase; letter-spacing: 0.05em; line-height: 0.87em; margin-bottom: 0.25em; margin-top: -0.25em; } h1 { font-size: 8.5vw; letter-spacing: 0.073em; } h1 > span { display: block; } h1.small { font-size: 5vw; } h1.small .letter-split:nth-child(2) { margin-top: -7px; } @media only screen and (max-width: 900px) { h1 { font-size: 13vw; } } @media only screen and (max-width: 600px) { h1 { font-size: 16vw; } } h1 .letter-split { -webkit-perspective: 250px; -moz-perspective: 250px; perspective: 250px; -webkit-perspective-origin: 50% 110px; -moz-perspective-origin: 50% 110px; perspective-origin: 50% 110px; margin-top: -15px; } @media only screen and (max-width: 900px) { h1 .letter-split { margin-top: -8px; } } h1 .letter-split span { transform-origin: 50% 100%; } h1 .letter-split span.western-5 { -webkit-transform: scaleY(1.2) scaleX(1) rotateY(90deg) translateY(44%) translateX(16%); -moz-transform: scaleY(1.2) scaleX(1) rotateY(90deg) translateY(44%) translateX(16%); -ms-transform: scaleY(1.2) scaleX(1) rotateY(90deg) translateY(44%) translateX(16%); -o-transform: scaleY(1.2) scaleX(1) rotateY(90deg) translateY(44%) translateX(16%); transform: scaleY(1.2) scaleX(1) rotateY(90deg) translateY(44%) translateX(16%); } h1 .letter-split span.western-4 { -webkit-transform: scaleY(1.1) scaleX(0.96) rotateY(65deg) translateY(30%) translateX(10%); -moz-transform: scaleY(1.1) scaleX(0.96) rotateY(65deg) translateY(30%) translateX(10%); -ms-transform: scaleY(1.1) scaleX(0.96) rotateY(65deg) translateY(30%) translateX(10%); -o-transform: scaleY(1.1) scaleX(0.96) rotateY(65deg) translateY(30%) translateX(10%); transform: scaleY(1.1) scaleX(0.96) rotateY(65deg) translateY(30%) translateX(10%); } h1 .letter-split span.western-3 { -webkit-transform: scaleY(1) scaleX(0.9) rotateY(28deg) translateY(-2%) translateX(8%); -moz-transform: scaleY(1) scaleX(0.9) rotateY(28deg) translateY(-2%) translateX(8%); -ms-transform: scaleY(1) scaleX(0.9) rotateY(28deg) translateY(-2%) translateX(8%); -o-transform: scaleY(1) scaleX(0.9) rotateY(28deg) translateY(-2%) translateX(8%); transform: scaleY(1) scaleX(0.9) rotateY(28deg) translateY(-2%) translateX(8%); } h1 .letter-split span.western-2 { -webkit-transform: scaleY(0.95) scaleX(0.91) rotateY(17deg) translateY(-1%) translateX(8%); -moz-transform: scaleY(0.95) scaleX(0.91) rotateY(17deg) translateY(-1%) translateX(8%); -ms-transform: scaleY(0.95) scaleX(0.91) rotateY(17deg) translateY(-1%) translateX(8%); -o-transform: scaleY(0.95) scaleX(0.91) rotateY(17deg) translateY(-1%) translateX(8%); transform: scaleY(0.95) scaleX(0.91) rotateY(17deg) translateY(-1%) translateX(8%); } h1 .letter-split span.western-1 { -webkit-transform: scaleY(0.88) scaleX(0.92) rotateY(14deg) translateY(1%) translateX(5%); -moz-transform: scaleY(0.88) scaleX(0.92) rotateY(14deg) translateY(1%) translateX(5%); -ms-transform: scaleY(0.88) scaleX(0.92) rotateY(14deg) translateY(1%) translateX(5%); -o-transform: scaleY(0.88) scaleX(0.92) rotateY(14deg) translateY(1%) translateX(5%); transform: scaleY(0.88) scaleX(0.92) rotateY(14deg) translateY(1%) translateX(5%); } h1 .letter-split span.western0 { -webkit-transform: scaleY(0.85) scaleX(0.93) translateY(2%); -moz-transform: scaleY(0.85) scaleX(0.93) translateY(2%); -ms-transform: scaleY(0.85) scaleX(0.93) translateY(2%); -o-transform: scaleY(0.85) scaleX(0.93) translateY(2%); transform: scaleY(0.85) scaleX(0.93) translateY(2%); } h1 .letter-split span.western1 { -webkit-transform: scaleY(0.88) scaleX(0.92) rotateY(-14deg) translateY(1%) translateX(-5%); -moz-transform: scaleY(0.88) scaleX(0.92) rotateY(-14deg) translateY(1%) translateX(-5%); -ms-transform: scaleY(0.88) scaleX(0.92) rotateY(-14deg) translateY(1%) translateX(-5%); -o-transform: scaleY(0.88) scaleX(0.92) rotateY(-14deg) translateY(1%) translateX(-5%); transform: scaleY(0.88) scaleX(0.92) rotateY(-14deg) translateY(1%) translateX(-5%); } h1 .letter-split span.western2 { -webkit-transform: scaleY(0.95) scaleX(0.91) rotateY(-17deg) translateY(-1%) translateX(-8%); -moz-transform: scaleY(0.95) scaleX(0.91) rotateY(-17deg) translateY(-1%) translateX(-8%); -ms-transform: scaleY(0.95) scaleX(0.91) rotateY(-17deg) translateY(-1%) translateX(-8%); -o-transform: scaleY(0.95) scaleX(0.91) rotateY(-17deg) translateY(-1%) translateX(-8%); transform: scaleY(0.95) scaleX(0.91) rotateY(-17deg) translateY(-1%) translateX(-8%); } h1 .letter-split span.western3 { -webkit-transform: scaleY(1) scaleX(0.9) rotateY(-28deg) translateY(-2%) translateX(-8%); -moz-transform: scaleY(1) scaleX(0.9) rotateY(-28deg) translateY(-2%) translateX(-8%); -ms-transform: scaleY(1) scaleX(0.9) rotateY(-28deg) translateY(-2%) translateX(-8%); -o-transform: scaleY(1) scaleX(0.9) rotateY(-28deg) translateY(-2%) translateX(-8%); transform: scaleY(1) scaleX(0.9) rotateY(-28deg) translateY(-2%) translateX(-8%); } h1 .letter-split span.western4 { -webkit-transform: scaleY(1.1) scaleX(0.96) rotateY(-65deg) translateY(30%) translateX(-10%); -moz-transform: scaleY(1.1) scaleX(0.96) rotateY(-65deg) translateY(30%) translateX(-10%); -ms-transform: scaleY(1.1) scaleX(0.96) rotateY(-65deg) translateY(30%) translateX(-10%); -o-transform: scaleY(1.1) scaleX(0.96) rotateY(-65deg) translateY(30%) translateX(-10%); transform: scaleY(1.1) scaleX(0.96) rotateY(-65deg) translateY(30%) translateX(-10%); } h1 .letter-split span.western5 { -webkit-transform: scaleY(1.2) scaleX(1) rotateY(-90deg) translateY(44%) translateX(-16%); -moz-transform: scaleY(1.2) scaleX(1) rotateY(-90deg) translateY(44%) translateX(-16%); -ms-transform: scaleY(1.2) scaleX(1) rotateY(-90deg) translateY(44%) translateX(-16%); -o-transform: scaleY(1.2) scaleX(1) rotateY(-90deg) translateY(44%) translateX(-16%); transform: scaleY(1.2) scaleX(1) rotateY(-90deg) translateY(44%) translateX(-16%); } @media only screen and (min-width: 1800px) { h1 .letter-split span.western-5 { -webkit-transform: scaleY(1.25) scaleX(0.9) rotateY(45deg) translateY(5%) translateX(-35%); -moz-transform: scaleY(1.25) scaleX(0.9) rotateY(45deg) translateY(5%) translateX(-35%); -ms-transform: scaleY(1.25) scaleX(0.9) rotateY(45deg) translateY(5%) translateX(-35%); -o-transform: scaleY(1.25) scaleX(0.9) rotateY(45deg) translateY(5%) translateX(-35%); transform: scaleY(1.25) scaleX(0.9) rotateY(45deg) translateY(5%) translateX(-35%); } h1 .letter-split span.western-4 { -webkit-transform: scaleY(1.2) scaleX(0.9) rotateY(35deg) translateY(5%) translateX(-25%); -moz-transform: scaleY(1.2) scaleX(0.9) rotateY(35deg) translateY(5%) translateX(-25%); -ms-transform: scaleY(1.2) scaleX(0.9) rotateY(35deg) translateY(5%) translateX(-25%); -o-transform: scaleY(1.2) scaleX(0.9) rotateY(35deg) translateY(5%) translateX(-25%); transform: scaleY(1.2) scaleX(0.9) rotateY(35deg) translateY(5%) translateX(-25%); } h1 .letter-split span.western-3 { -webkit-transform: scaleY(1.05) scaleX(0.9) rotateY(31deg) translateY(5%) translateX(0); -moz-transform: scaleY(1.05) scaleX(0.9) rotateY(31deg) translateY(5%) translateX(0); -ms-transform: scaleY(1.05) scaleX(0.9) rotateY(31deg) translateY(5%) translateX(0); -o-transform: scaleY(1.05) scaleX(0.9) rotateY(31deg) translateY(5%) translateX(0); transform: scaleY(1.05) scaleX(0.9) rotateY(31deg) translateY(5%) translateX(0); } h1 .letter-split span.western-2 { -webkit-transform: scaleY(0.95) scaleX(0.91) rotateY(17deg) translateY(4%) translateX(7%); -moz-transform: scaleY(0.95) scaleX(0.91) rotateY(17deg) translateY(4%) translateX(7%); -ms-transform: scaleY(0.95) scaleX(0.91) rotateY(17deg) translateY(4%) translateX(7%); -o-transform: scaleY(0.95) scaleX(0.91) rotateY(17deg) translateY(4%) translateX(7%); transform: scaleY(0.95) scaleX(0.91) rotateY(17deg) translateY(4%) translateX(7%); } h1 .letter-split span.western-1 { -webkit-transform: scaleY(0.88) scaleX(0.92) rotateY(14deg) translateY(2%) translateX(5%); -moz-transform: scaleY(0.88) scaleX(0.92) rotateY(14deg) translateY(2%) translateX(5%); -ms-transform: scaleY(0.88) scaleX(0.92) rotateY(14deg) translateY(2%) translateX(5%); -o-transform: scaleY(0.88) scaleX(0.92) rotateY(14deg) translateY(2%) translateX(5%); transform: scaleY(0.88) scaleX(0.92) rotateY(14deg) translateY(2%) translateX(5%); } h1 .letter-split span.western0 { -webkit-transform: scaleY(0.85) scaleX(0.93) translateY(2%); -moz-transform: scaleY(0.85) scaleX(0.93) translateY(2%); -ms-transform: scaleY(0.85) scaleX(0.93) translateY(2%); -o-transform: scaleY(0.85) scaleX(0.93) translateY(2%); transform: scaleY(0.85) scaleX(0.93) translateY(2%); } h1 .letter-split span.western1 { -webkit-transform: scaleY(0.88) scaleX(0.92) rotateY(-14deg) translateY(2%) translateX(-5%); -moz-transform: scaleY(0.88) scaleX(0.92) rotateY(-14deg) translateY(2%) translateX(-5%); -ms-transform: scaleY(0.88) scaleX(0.92) rotateY(-14deg) translateY(2%) translateX(-5%); -o-transform: scaleY(0.88) scaleX(0.92) rotateY(-14deg) translateY(2%) translateX(-5%); transform: scaleY(0.88) scaleX(0.92) rotateY(-14deg) translateY(2%) translateX(-5%); } h1 .letter-split span.western2 { -webkit-transform: scaleY(0.95) scaleX(0.91) rotateY(-17deg) translateY(4%) translateX(-7%); -moz-transform: scaleY(0.95) scaleX(0.91) rotateY(-17deg) translateY(4%) translateX(-7%); -ms-transform: scaleY(0.95) scaleX(0.91) rotateY(-17deg) translateY(4%) translateX(-7%); -o-transform: scaleY(0.95) scaleX(0.91) rotateY(-17deg) translateY(4%) translateX(-7%); transform: scaleY(0.95) scaleX(0.91) rotateY(-17deg) translateY(4%) translateX(-7%); } h1 .letter-split span.western3 { -webkit-transform: scaleY(1.05) scaleX(0.9) rotateY(-31deg) translateY(5%) translateX(0); -moz-transform: scaleY(1.05) scaleX(0.9) rotateY(-31deg) translateY(5%) translateX(0); -ms-transform: scaleY(1.05) scaleX(0.9) rotateY(-31deg) translateY(5%) translateX(0); -o-transform: scaleY(1.05) scaleX(0.9) rotateY(-31deg) translateY(5%) translateX(0); transform: scaleY(1.05) scaleX(0.9) rotateY(-31deg) translateY(5%) translateX(0); } h1 .letter-split span.western4 { -webkit-transform: scaleY(1.2) scaleX(0.9) rotateY(-35deg) translateY(5%) translateX(25%); -moz-transform: scaleY(1.2) scaleX(0.9) rotateY(-35deg) translateY(5%) translateX(25%); -ms-transform: scaleY(1.2) scaleX(0.9) rotateY(-35deg) translateY(5%) translateX(25%); -o-transform: scaleY(1.2) scaleX(0.9) rotateY(-35deg) translateY(5%) translateX(25%); transform: scaleY(1.2) scaleX(0.9) rotateY(-35deg) translateY(5%) translateX(25%); } h1 .letter-split span.western5 { -webkit-transform: scaleY(1.25) scaleX(0.9) rotateY(-45deg) translateY(5%) translateX(35%); -moz-transform: scaleY(1.25) scaleX(0.9) rotateY(-45deg) translateY(5%) translateX(35%); -ms-transform: scaleY(1.25) scaleX(0.9) rotateY(-45deg) translateY(5%) translateX(35%); -o-transform: scaleY(1.25) scaleX(0.9) rotateY(-45deg) translateY(5%) translateX(35%); transform: scaleY(1.25) scaleX(0.9) rotateY(-45deg) translateY(5%) translateX(35%); } } h1 .letter-split:nth-child(2) { -webkit-perspective-origin: 50% 0px; -moz-perspective-origin: 50% 0px; perspective-origin: 50% 0px; } h1 .letter-split:nth-child(2) span.western-3 { -webkit-transform: scaleY(1.05) scaleX(0.9) rotateY(40deg) translateY(21%) translateX(20%); -moz-transform: scaleY(1.05) scaleX(0.9) rotateY(40deg) translateY(21%) translateX(20%); -ms-transform: scaleY(1.05) scaleX(0.9) rotateY(40deg) translateY(21%) translateX(20%); -o-transform: scaleY(1.05) scaleX(0.9) rotateY(40deg) translateY(21%) translateX(20%); transform: scaleY(1.05) scaleX(0.9) rotateY(40deg) translateY(21%) translateX(20%); } h1 .letter-split:nth-child(2) span.western-2 { -webkit-transform: scaleY(0.92) scaleX(0.91) rotateY(33deg) translateY(10%) translateX(15%) skewX(2deg) rotate(2deg); -moz-transform: scaleY(0.92) scaleX(0.91) rotateY(33deg) translateY(10%) translateX(15%) skewX(2deg) rotate(2deg); -ms-transform: scaleY(0.92) scaleX(0.91) rotateY(33deg) translateY(10%) translateX(15%) skewX(2deg) rotate(2deg); -o-transform: scaleY(0.92) scaleX(0.91) rotateY(33deg) translateY(10%) translateX(15%) skewX(2deg) rotate(2deg); transform: scaleY(0.92) scaleX(0.91) rotateY(33deg) translateY(10%) translateX(15%) skewX(2deg) rotate(2deg); } h1 .letter-split:nth-child(2) span.western-1 { -webkit-transform: scaleY(0.83) scaleX(0.92) rotateY(15deg) translateY(2%) translateX(7%); -moz-transform: scaleY(0.83) scaleX(0.92) rotateY(15deg) translateY(2%) translateX(7%); -ms-transform: scaleY(0.83) scaleX(0.92) rotateY(15deg) translateY(2%) translateX(7%); -o-transform: scaleY(0.83) scaleX(0.92) rotateY(15deg) translateY(2%) translateX(7%); transform: scaleY(0.83) scaleX(0.92) rotateY(15deg) translateY(2%) translateX(7%); } h1 .letter-split:nth-child(2) span.western0 { -webkit-transform: scaleY(0.8) scaleX(0.93) translateY(-2%); -moz-transform: scaleY(0.8) scaleX(0.93) translateY(-2%); -ms-transform: scaleY(0.8) scaleX(0.93) translateY(-2%); -o-transform: scaleY(0.8) scaleX(0.93) translateY(-2%); transform: scaleY(0.8) scaleX(0.93) translateY(-2%); } h1 .letter-split:nth-child(2) span.western1 { -webkit-transform: scaleY(0.83) scaleX(0.92) rotateY(-15deg) translateY(2%) translateX(-7%); -moz-transform: scaleY(0.83) scaleX(0.92) rotateY(-15deg) translateY(2%) translateX(-7%); -ms-transform: scaleY(0.83) scaleX(0.92) rotateY(-15deg) translateY(2%) translateX(-7%); -o-transform: scaleY(0.83) scaleX(0.92) rotateY(-15deg) translateY(2%) translateX(-7%); transform: scaleY(0.83) scaleX(0.92) rotateY(-15deg) translateY(2%) translateX(-7%); } h1 .letter-split:nth-child(2) span.western2 { -webkit-transform: scaleY(0.92) scaleX(0.91) rotateY(-33deg) translateY(10%) translateX(-15%) skewX(-2deg) rotate(-2deg); -moz-transform: scaleY(0.92) scaleX(0.91) rotateY(-33deg) translateY(10%) translateX(-15%) skewX(-2deg) rotate(-2deg); -ms-transform: scaleY(0.92) scaleX(0.91) rotateY(-33deg) translateY(10%) translateX(-15%) skewX(-2deg) rotate(-2deg); -o-transform: scaleY(0.92) scaleX(0.91) rotateY(-33deg) translateY(10%) translateX(-15%) skewX(-2deg) rotate(-2deg); transform: scaleY(0.92) scaleX(0.91) rotateY(-33deg) translateY(10%) translateX(-15%) skewX(-2deg) rotate(-2deg); } h1 .letter-split:nth-child(2) span.western3 { -webkit-transform: scaleY(1.05) scaleX(0.9) rotateY(-40deg) translateY(21%) translateX(-20%); -moz-transform: scaleY(1.05) scaleX(0.9) rotateY(-40deg) translateY(21%) translateX(-20%); -ms-transform: scaleY(1.05) scaleX(0.9) rotateY(-40deg) translateY(21%) translateX(-20%); -o-transform: scaleY(1.05) scaleX(0.9) rotateY(-40deg) translateY(21%) translateX(-20%); transform: scaleY(1.05) scaleX(0.9) rotateY(-40deg) translateY(21%) translateX(-20%); } @media only screen and (min-width: 1800px) { h1 .letter-split:nth-child(2) span.western-3 { -webkit-transform: scaleY(1.1) scaleX(0.8) rotateY(30deg) translateY(23%) translateX(7%); -moz-transform: scaleY(1.1) scaleX(0.8) rotateY(30deg) translateY(23%) translateX(7%); -ms-transform: scaleY(1.1) scaleX(0.8) rotateY(30deg) translateY(23%) translateX(7%); -o-transform: scaleY(1.1) scaleX(0.8) rotateY(30deg) translateY(23%) translateX(7%); transform: scaleY(1.1) scaleX(0.8) rotateY(30deg) translateY(23%) translateX(7%); } h1 .letter-split:nth-child(2) span.western-2 { -webkit-transform: scaleY(0.95) scaleX(0.87) rotateY(20deg) translateY(11%) translateX(15%); -moz-transform: scaleY(0.95) scaleX(0.87) rotateY(20deg) translateY(11%) translateX(15%); -ms-transform: scaleY(0.95) scaleX(0.87) rotateY(20deg) translateY(11%) translateX(15%); -o-transform: scaleY(0.95) scaleX(0.87) rotateY(20deg) translateY(11%) translateX(15%); transform: scaleY(0.95) scaleX(0.87) rotateY(20deg) translateY(11%) translateX(15%); } h1 .letter-split:nth-child(2) span.western-1 { -webkit-transform: scaleY(0.83) scaleX(0.92) rotateY(15deg) translateY(0%) translateX(6%); -moz-transform: scaleY(0.83) scaleX(0.92) rotateY(15deg) translateY(0%) translateX(6%); -ms-transform: scaleY(0.83) scaleX(0.92) rotateY(15deg) translateY(0%) translateX(6%); -o-transform: scaleY(0.83) scaleX(0.92) rotateY(15deg) translateY(0%) translateX(6%); transform: scaleY(0.83) scaleX(0.92) rotateY(15deg) translateY(0%) translateX(6%); } h1 .letter-split:nth-child(2) span.western0 { -webkit-transform: scaleY(0.8) scaleX(0.93) translateY(-4%); -moz-transform: scaleY(0.8) scaleX(0.93) translateY(-4%); -ms-transform: scaleY(0.8) scaleX(0.93) translateY(-4%); -o-transform: scaleY(0.8) scaleX(0.93) translateY(-4%); transform: scaleY(0.8) scaleX(0.93) translateY(-4%); } h1 .letter-split:nth-child(2) span.western1 { -webkit-transform: scaleY(0.83) scaleX(0.92) rotateY(-15deg) translateY(0%) translateX(-6%); -moz-transform: scaleY(0.83) scaleX(0.92) rotateY(-15deg) translateY(0%) translateX(-6%); -ms-transform: scaleY(0.83) scaleX(0.92) rotateY(-15deg) translateY(0%) translateX(-6%); -o-transform: scaleY(0.83) scaleX(0.92) rotateY(-15deg) translateY(0%) translateX(-6%); transform: scaleY(0.83) scaleX(0.92) rotateY(-15deg) translateY(0%) translateX(-6%); } h1 .letter-split:nth-child(2) span.western2 { -webkit-transform: scaleY(0.95) scaleX(0.87) rotateY(-20deg) translateY(11%) translateX(-15%); -moz-transform: scaleY(0.95) scaleX(0.87) rotateY(-20deg) translateY(11%) translateX(-15%); -ms-transform: scaleY(0.95) scaleX(0.87) rotateY(-20deg) translateY(11%) translateX(-15%); -o-transform: scaleY(0.95) scaleX(0.87) rotateY(-20deg) translateY(11%) translateX(-15%); transform: scaleY(0.95) scaleX(0.87) rotateY(-20deg) translateY(11%) translateX(-15%); } h1 .letter-split:nth-child(2) span.western3 { -webkit-transform: scaleY(1.1) scaleX(0.8) rotateY(-30deg) translateY(23%) translateX(-7%); -moz-transform: scaleY(1.1) scaleX(0.8) rotateY(-30deg) translateY(23%) translateX(-7%); -ms-transform: scaleY(1.1) scaleX(0.8) rotateY(-30deg) translateY(23%) translateX(-7%); -o-transform: scaleY(1.1) scaleX(0.8) rotateY(-30deg) translateY(23%) translateX(-7%); transform: scaleY(1.1) scaleX(0.8) rotateY(-30deg) translateY(23%) translateX(-7%); } } h1.timeout-split .letter-split span { -webkit-transition: 0.65s cubic-bezier(0.52, 0.01, 0.16, 1); -moz-transition: 0.65s cubic-bezier(0.52, 0.01, 0.16, 1); transition: 0.65s cubic-bezier(0.52, 0.01, 0.16, 1); } h1.timeout-split .letter-split span.western1, h1.timeout-split .letter-split span.western-1 { -webkit-transition: 0.77s cubic-bezier(0.52, 0.01, 0.16, 1) 0.2s; -moz-transition: 0.77s cubic-bezier(0.52, 0.01, 0.16, 1) 0.2s; transition: 0.77s cubic-bezier(0.52, 0.01, 0.16, 1) 0.2s; } h1.timeout-split .letter-split span.western2, h1.timeout-split .letter-split span.western-2 { -webkit-transition: 0.9s cubic-bezier(0.52, 0.01, 0.16, 1) 0.4s; -moz-transition: 0.9s cubic-bezier(0.52, 0.01, 0.16, 1) 0.4s; transition: 0.9s cubic-bezier(0.52, 0.01, 0.16, 1) 0.4s; } h1.timeout-split .letter-split span.western3, h1.timeout-split .letter-split span.western-3 { -webkit-transition: 1.05s cubic-bezier(0.52, 0.01, 0.16, 1) 0.6s; -moz-transition: 1.05s cubic-bezier(0.52, 0.01, 0.16, 1) 0.6s; transition: 1.05s cubic-bezier(0.52, 0.01, 0.16, 1) 0.6s; } h1.timeout-split .letter-split span.western4, h1.timeout-split .letter-split span.western-4 { -webkit-transition: 1.05s cubic-bezier(0.52, 0.01, 0.16, 1) 0.6s; -moz-transition: 1.05s cubic-bezier(0.52, 0.01, 0.16, 1) 0.6s; transition: 1.05s cubic-bezier(0.52, 0.01, 0.16, 1) 0.6s; } h3 { font-size: 2.4em; margin-top: -0.15em; line-height: 0.95em; } h3.small { font-size: 1.5em; } @media only screen and (min-width: 1300px) { h3 { font-size: 3vw; } } h2, h4, small, nav.main-nav a, a { text-transform: uppercase; letter-spacing: 0.2em; line-height: 1.05em; font-weight: 700; font-size: 1.2em; } h2 { font-size: 3.2vw; } h2.intro { font-size: 1.5vw; line-height: 1.175em; margin-bottom: 0.4em; } @media only screen and (max-width: 900px) { h2.intro { font-size: 4vw; } } @media only screen and (max-width: 900px) { h2 { font-size: 7vw; } } h4 { margin-bottom: 0.9em; } h4.small { font-size: 0.9em; letter-spacing: 0.25em; } h4.large { font-size: 2em; } @media only screen and (min-width: 1600px) { h4.large { font-size: 2.3em; } } h4.detail { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } h4.detail::after { content: ''; position: absolute; left: 0; top: 50%; height: 1px; background-color: #17181c; width: 50px; } h4, nav.main-nav { font-size: 1.1em; } @media only screen and (min-width: 1600px) { h4, nav.main-nav { font-size: 1.25em; } } .logo.mob-logo { position: fixed; top: 10px; left: 22px; } .logo.mob-logo a { width: 60px; height: 80px; } small { font-size: 0.9em; } @media only screen and (min-width: 1600px) { small { font-size: 1em; } } small.detail { text-align: left; margin-left: -110px; margin-bottom: 10px; } small.detail::after { content: ''; width: 50px; height: 1px; background-color: rgba(23, 24, 28, 0.2); position: absolute; margin-top: 4px; left: 120%; } small.offset-detail { -webkit-transform: translateX(-105%); -moz-transform: translateX(-105%); -ms-transform: translateX(-105%); -o-transform: translateX(-105%); transform: translateX(-105%); right: 100%; text-align: right !important; margin-bottom: 5px; } small.offset-detail::after { content: ''; background-color: #17181c; width: 50px; height: 1px; top: 50%; left: 107%; background-color: rgba(23, 24, 28, 0.7); position: absolute; } small a { display: inline-block; } h5, .cta { font-family: "aktiv-grotesk", sans-serif; text-transform: uppercase; letter-spacing: 0.2em; } h5 { font-size: 7px; font-weight: 900; line-height: 1.5em; margin-bottom: 1.1em; } h5.arc { font-size: 9px; font-weight: 900; position: relative; margin-bottom: 20px; } h5.arc.grey { color: rgba(247, 243, 242, 0.5); } h5.arc span { position: absolute; top: 0; left: 50%; -webkit-transform-origin: 0 150px; -moz-transform-origin: 0 150px; -ms-transform-origin: 0 150px; -o-transform-origin: 0 150px; transform-origin: 0 150px; display: inline-block; } h5.arc span:nth-child(1) { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } h5.arc span:nth-child(2) { -webkit-transform: rotate(4deg); -moz-transform: rotate(4deg); -ms-transform: rotate(4deg); -o-transform: rotate(4deg); transform: rotate(4deg); } h5.arc span:nth-child(3) { -webkit-transform: rotate(8deg); -moz-transform: rotate(8deg); -ms-transform: rotate(8deg); -o-transform: rotate(8deg); transform: rotate(8deg); } h5.arc span:nth-child(4) { -webkit-transform: rotate(12deg); -moz-transform: rotate(12deg); -ms-transform: rotate(12deg); -o-transform: rotate(12deg); transform: rotate(12deg); } h5.arc span:nth-child(5) { -webkit-transform: rotate(16deg); -moz-transform: rotate(16deg); -ms-transform: rotate(16deg); -o-transform: rotate(16deg); transform: rotate(16deg); } h5.arc span:nth-child(6) { -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -ms-transform: rotate(20deg); -o-transform: rotate(20deg); transform: rotate(20deg); } h5.arc span:nth-child(7) { -webkit-transform: rotate(24deg); -moz-transform: rotate(24deg); -ms-transform: rotate(24deg); -o-transform: rotate(24deg); transform: rotate(24deg); } h5.arc span:nth-child(8) { -webkit-transform: rotate(28deg); -moz-transform: rotate(28deg); -ms-transform: rotate(28deg); -o-transform: rotate(28deg); transform: rotate(28deg); } h5.arc span:nth-child(9) { -webkit-transform: rotate(32deg); -moz-transform: rotate(32deg); -ms-transform: rotate(32deg); -o-transform: rotate(32deg); transform: rotate(32deg); } h5.arc span:nth-child(10) { -webkit-transform: rotate(36deg); -moz-transform: rotate(36deg); -ms-transform: rotate(36deg); -o-transform: rotate(36deg); transform: rotate(36deg); } h5.arc span:nth-child(11) { -webkit-transform: rotate(40deg); -moz-transform: rotate(40deg); -ms-transform: rotate(40deg); -o-transform: rotate(40deg); transform: rotate(40deg); } h5.arc span:nth-child(12) { -webkit-transform: rotate(44deg); -moz-transform: rotate(44deg); -ms-transform: rotate(44deg); -o-transform: rotate(44deg); transform: rotate(44deg); } h5.arc span:nth-child(13) { -webkit-transform: rotate(48deg); -moz-transform: rotate(48deg); -ms-transform: rotate(48deg); -o-transform: rotate(48deg); transform: rotate(48deg); } h5.arc span:nth-child(14) { -webkit-transform: rotate(52deg); -moz-transform: rotate(52deg); -ms-transform: rotate(52deg); -o-transform: rotate(52deg); transform: rotate(52deg); } h5.arc span:nth-child(15) { -webkit-transform: rotate(56deg); -moz-transform: rotate(56deg); -ms-transform: rotate(56deg); -o-transform: rotate(56deg); transform: rotate(56deg); } h5.arc span:nth-child(16) { -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -ms-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg); } h5.arc span:nth-child(17) { -webkit-transform: rotate(64deg); -moz-transform: rotate(64deg); -ms-transform: rotate(64deg); -o-transform: rotate(64deg); transform: rotate(64deg); } h5.arc span:nth-child(18) { -webkit-transform: rotate(68deg); -moz-transform: rotate(68deg); -ms-transform: rotate(68deg); -o-transform: rotate(68deg); transform: rotate(68deg); } h5.arc span:nth-child(19) { -webkit-transform: rotate(72deg); -moz-transform: rotate(72deg); -ms-transform: rotate(72deg); -o-transform: rotate(72deg); transform: rotate(72deg); } h5.arc span:nth-child(20) { -webkit-transform: rotate(76deg); -moz-transform: rotate(76deg); -ms-transform: rotate(76deg); -o-transform: rotate(76deg); transform: rotate(76deg); } h5.arc span:nth-child(21) { -webkit-transform: rotate(80deg); -moz-transform: rotate(80deg); -ms-transform: rotate(80deg); -o-transform: rotate(80deg); transform: rotate(80deg); } h5.arc span:nth-child(22) { -webkit-transform: rotate(84deg); -moz-transform: rotate(84deg); -ms-transform: rotate(84deg); -o-transform: rotate(84deg); transform: rotate(84deg); } h5.arc span:nth-child(23) { -webkit-transform: rotate(88deg); -moz-transform: rotate(88deg); -ms-transform: rotate(88deg); -o-transform: rotate(88deg); transform: rotate(88deg); } h5.arc span:nth-child(24) { -webkit-transform: rotate(92deg); -moz-transform: rotate(92deg); -ms-transform: rotate(92deg); -o-transform: rotate(92deg); transform: rotate(92deg); } h5.arc span:nth-child(25) { -webkit-transform: rotate(96deg); -moz-transform: rotate(96deg); -ms-transform: rotate(96deg); -o-transform: rotate(96deg); transform: rotate(96deg); } h5.arc span:nth-child(26) { -webkit-transform: rotate(100deg); -moz-transform: rotate(100deg); -ms-transform: rotate(100deg); -o-transform: rotate(100deg); transform: rotate(100deg); } h5.arc span:nth-child(27) { -webkit-transform: rotate(104deg); -moz-transform: rotate(104deg); -ms-transform: rotate(104deg); -o-transform: rotate(104deg); transform: rotate(104deg); } h5.arc span:nth-child(28) { -webkit-transform: rotate(108deg); -moz-transform: rotate(108deg); -ms-transform: rotate(108deg); -o-transform: rotate(108deg); transform: rotate(108deg); } h5.arc span:nth-child(29) { -webkit-transform: rotate(112deg); -moz-transform: rotate(112deg); -ms-transform: rotate(112deg); -o-transform: rotate(112deg); transform: rotate(112deg); } h5.arc span:nth-child(30) { -webkit-transform: rotate(116deg); -moz-transform: rotate(116deg); -ms-transform: rotate(116deg); -o-transform: rotate(116deg); transform: rotate(116deg); } h5.command { color: rgba(247, 243, 242, 0.4); font-size: 9px; } h5.larger { font-size: 8px; } p, h6 { font-size: 0.83em; font-family: "aktiv-grotesk", sans-serif; line-height: 1.6em; } h6 { font-weight: 700; margin-bottom: 0.2em; } a { display: block; } p { font-weight: 500; margin-bottom: 0.8em; } @media only screen and (min-width: 1600px) { p { font-size: 1em; } } p a { display: inline-block; font-family: inherit; font-size: inherit; text-transform: inherit; border-bottom: 1px solid #787878; letter-spacing: inherit; color: #787878; } .hidden { visibility: hidden; } .preloader { width: 100%; height: 100%; } .preloader .bar { top: 50%; margin-top: -2.5vh; width: 100%; height: 1px; z-index: 10; } .preloader .bar .bar-inner { width: 100%; height: 100%; background-color: black; -webkit-transform: scaleX(0); -moz-transform: scaleX(0); -ms-transform: scaleX(0); -o-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transition: 0.45s cubic-bezier(0.52, 0.01, 0.16, 1); -moz-transition: 0.45s cubic-bezier(0.52, 0.01, 0.16, 1); transition: 0.45s cubic-bezier(0.52, 0.01, 0.16, 1); } .preloader .bar::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.1); -webkit-transition: 0.2s 0.1s cubic-bezier(0.52, 0.01, 0.16, 1); -moz-transition: 0.2s 0.1s cubic-bezier(0.52, 0.01, 0.16, 1); transition: 0.2s 0.1s cubic-bezier(0.52, 0.01, 0.16, 1); } .preloader .bar::before { z-index: 10; content: ''; position: absolute; top: 0; left: 50%; width: 12vw; height: 10px; margin: -5px 0 0 -6vw; background-color: #fff; -webkit-transition: 0.2s 0.1s cubic-bezier(0.52, 0.01, 0.16, 1); -moz-transition: 0.2s 0.1s cubic-bezier(0.52, 0.01, 0.16, 1); transition: 0.2s 0.1s cubic-bezier(0.52, 0.01, 0.16, 1); } .preloader .bar .marque-logo { z-index: 20; } body:not(.preloader-active) .preloader .bar::before, body:not(.preloader-active) .preloader .bar::after { -webkit-transform: scaleX(0); -moz-transform: scaleX(0); -ms-transform: scaleX(0); -o-transform: scaleX(0); transform: scaleX(0); } body:not(.preloader-active) .preloader .bar .bar-inner { opacity: 0; -webkit-transition: 0.31s cubic-bezier(0.52, 0.01, 0.16, 1); -moz-transition: 0.31s cubic-bezier(0.52, 0.01, 0.16, 1); transition: 0.31s cubic-bezier(0.52, 0.01, 0.16, 1); } .preloader section { width: 100%; bottom: 35%; } .preloader h4, .preloader h5 { color: black; } .preloader .preloader-marque { z-index: 2; position: absolute; top: 0; left: 50%; mix-blend-mode: multiply; -webkit-transform: scale(0.4); -moz-transform: scale(0.4); -ms-transform: scale(0.4); -o-transform: scale(0.4); transform: scale(0.4); } .letter-split:not(h2) span { display: inline-block; } .letter-split-scroll span { color: rgba(247, 243, 242, 0); -webkit-transform: translateY(7px); -moz-transform: translateY(7px); -ms-transform: translateY(7px); -o-transform: translateY(7px); transform: translateY(7px); -webkit-transition: 0.2s; -moz-transition: 0.2s; transition: 0.2s; } .letter-split-scroll.visible span { color: #f7f3f2; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } .letter-split-scroll.visible span:nth-child(1) { -webkit-transition: 0.11s cubic-bezier(0.52, 0.01, 0.16, 1) 0.00033s; -moz-transition: 0.11s cubic-bezier(0.52, 0.01, 0.16, 1) 0.00033s; transition: 0.11s cubic-bezier(0.52, 0.01, 0.16, 1) 0.00033s; } .letter-split-scroll.visible span:nth-child(2) { -webkit-transition: 0.12s cubic-bezier(0.52, 0.01, 0.16, 1) 0.00133s; -moz-transition: 0.12s cubic-bezier(0.52, 0.01, 0.16, 1) 0.00133s; transition: 0.12s cubic-bezier(0.52, 0.01, 0.16, 1) 0.00133s; } .letter-split-scroll.visible span:nth-child(3) { -webkit-transition: 0.13s cubic-bezier(0.52, 0.01, 0.16, 1) 0.003s; -moz-transition: 0.13s cubic-bezier(0.52, 0.01, 0.16, 1) 0.003s; transition: 0.13s cubic-bezier(0.52, 0.01, 0.16, 1) 0.003s; } .letter-split-scroll.visible span:nth-child(4) { -webkit-transition: 0.14s cubic-bezier(0.52, 0.01, 0.16, 1) 0.00533s; -moz-transition: 0.14s cubic-bezier(0.52, 0.01, 0.16, 1) 0.00533s; transition: 0.14s cubic-bezier(0.52, 0.01, 0.16, 1) 0.00533s; } .letter-split-scroll.visible span:nth-child(5) { -webkit-transition: 0.15s cubic-bezier(0.52, 0.01, 0.16, 1) 0.00833s; -moz-transition: 0.15s cubic-bezier(0.52, 0.01, 0.16, 1) 0.00833s; transition: 0.15s cubic-bezier(0.52, 0.01, 0.16, 1) 0.00833s; } .letter-split-scroll.visible span:nth-child(6) { -webkit-transition: 0.16s cubic-bezier(0.52, 0.01, 0.16, 1) 0.012s; -moz-transition: 0.16s cubic-bezier(0.52, 0.01, 0.16, 1) 0.012s; transition: 0.16s cubic-bezier(0.52, 0.01, 0.16, 1) 0.012s; } .letter-split-scroll.visible span:nth-child(7) { -webkit-transition: 0.17s cubic-bezier(0.52, 0.01, 0.16, 1) 0.01633s; -moz-transition: 0.17s cubic-bezier(0.52, 0.01, 0.16, 1) 0.01633s; transition: 0.17s cubic-bezier(0.52, 0.01, 0.16, 1) 0.01633s; } .letter-split-scroll.visible span:nth-child(8) { -webkit-transition: 0.18s cubic-bezier(0.52, 0.01, 0.16, 1) 0.02133s; -moz-transition: 0.18s cubic-bezier(0.52, 0.01, 0.16, 1) 0.02133s; transition: 0.18s cubic-bezier(0.52, 0.01, 0.16, 1) 0.02133s; } .letter-split-scroll.visible span:nth-child(9) { -webkit-transition: 0.19s cubic-bezier(0.52, 0.01, 0.16, 1) 0.027s; -moz-transition: 0.19s cubic-bezier(0.52, 0.01, 0.16, 1) 0.027s; transition: 0.19s cubic-bezier(0.52, 0.01, 0.16, 1) 0.027s; } .letter-split-scroll.visible span:nth-child(10) { -webkit-transition: 0.2s cubic-bezier(0.52, 0.01, 0.16, 1) 0.03333s; -moz-transition: 0.2s cubic-bezier(0.52, 0.01, 0.16, 1) 0.03333s; transition: 0.2s cubic-bezier(0.52, 0.01, 0.16, 1) 0.03333s; } .letter-split-scroll.visible span:nth-child(11) { -webkit-transition: 0.21s cubic-bezier(0.52, 0.01, 0.16, 1) 0.04033s; -moz-transition: 0.21s cubic-bezier(0.52, 0.01, 0.16, 1) 0.04033s; transition: 0.21s cubic-bezier(0.52, 0.01, 0.16, 1) 0.04033s; } .letter-split-scroll.visible span:nth-child(12) { -webkit-transition: 0.22s cubic-bezier(0.52, 0.01, 0.16, 1) 0.048s; -moz-transition: 0.22s cubic-bezier(0.52, 0.01, 0.16, 1) 0.048s; transition: 0.22s cubic-bezier(0.52, 0.01, 0.16, 1) 0.048s; } .letter-split-scroll.visible span:nth-child(13) { -webkit-transition: 0.23s cubic-bezier(0.52, 0.01, 0.16, 1) 0.05633s; -moz-transition: 0.23s cubic-bezier(0.52, 0.01, 0.16, 1) 0.05633s; transition: 0.23s cubic-bezier(0.52, 0.01, 0.16, 1) 0.05633s; } .letter-split-scroll.visible span:nth-child(14) { -webkit-transition: 0.24s cubic-bezier(0.52, 0.01, 0.16, 1) 0.06533s; -moz-transition: 0.24s cubic-bezier(0.52, 0.01, 0.16, 1) 0.06533s; transition: 0.24s cubic-bezier(0.52, 0.01, 0.16, 1) 0.06533s; } .letter-split-scroll.visible span:nth-child(15) { -webkit-transition: 0.25s cubic-bezier(0.52, 0.01, 0.16, 1) 0.075s; -moz-transition: 0.25s cubic-bezier(0.52, 0.01, 0.16, 1) 0.075s; transition: 0.25s cubic-bezier(0.52, 0.01, 0.16, 1) 0.075s; } .letter-split-scroll.visible span:nth-child(16) { -webkit-transition: 0.26s cubic-bezier(0.52, 0.01, 0.16, 1) 0.08533s; -moz-transition: 0.26s cubic-bezier(0.52, 0.01, 0.16, 1) 0.08533s; transition: 0.26s cubic-bezier(0.52, 0.01, 0.16, 1) 0.08533s; } .letter-split-scroll.visible span:nth-child(17) { -webkit-transition: 0.27s cubic-bezier(0.52, 0.01, 0.16, 1) 0.09633s; -moz-transition: 0.27s cubic-bezier(0.52, 0.01, 0.16, 1) 0.09633s; transition: 0.27s cubic-bezier(0.52, 0.01, 0.16, 1) 0.09633s; } .letter-split-scroll.visible span:nth-child(18) { -webkit-transition: 0.28s cubic-bezier(0.52, 0.01, 0.16, 1) 0.108s; -moz-transition: 0.28s cubic-bezier(0.52, 0.01, 0.16, 1) 0.108s; transition: 0.28s cubic-bezier(0.52, 0.01, 0.16, 1) 0.108s; } .letter-split-scroll.visible span:nth-child(19) { -webkit-transition: 0.29s cubic-bezier(0.52, 0.01, 0.16, 1) 0.12033s; -moz-transition: 0.29s cubic-bezier(0.52, 0.01, 0.16, 1) 0.12033s; transition: 0.29s cubic-bezier(0.52, 0.01, 0.16, 1) 0.12033s; } .letter-split-scroll.visible span:nth-child(20) { -webkit-transition: 0.3s cubic-bezier(0.52, 0.01, 0.16, 1) 0.13333s; -moz-transition: 0.3s cubic-bezier(0.52, 0.01, 0.16, 1) 0.13333s; transition: 0.3s cubic-bezier(0.52, 0.01, 0.16, 1) 0.13333s; } .letter-split-scroll.visible span:nth-child(21) { -webkit-transition: 0.31s cubic-bezier(0.52, 0.01, 0.16, 1) 0.147s; -moz-transition: 0.31s cubic-bezier(0.52, 0.01, 0.16, 1) 0.147s; transition: 0.31s cubic-bezier(0.52, 0.01, 0.16, 1) 0.147s; } .letter-split-scroll.visible span:nth-child(22) { -webkit-transition: 0.32s cubic-bezier(0.52, 0.01, 0.16, 1) 0.16133s; -moz-transition: 0.32s cubic-bezier(0.52, 0.01, 0.16, 1) 0.16133s; transition: 0.32s cubic-bezier(0.52, 0.01, 0.16, 1) 0.16133s; } .letter-split-scroll.visible span:nth-child(23) { -webkit-transition: 0.33s cubic-bezier(0.52, 0.01, 0.16, 1) 0.17633s; -moz-transition: 0.33s cubic-bezier(0.52, 0.01, 0.16, 1) 0.17633s; transition: 0.33s cubic-bezier(0.52, 0.01, 0.16, 1) 0.17633s; } .letter-split-scroll.visible span:nth-child(24) { -webkit-transition: 0.34s cubic-bezier(0.52, 0.01, 0.16, 1) 0.192s; -moz-transition: 0.34s cubic-bezier(0.52, 0.01, 0.16, 1) 0.192s; transition: 0.34s cubic-bezier(0.52, 0.01, 0.16, 1) 0.192s; } .letter-split-scroll.visible span:nth-child(25) { -webkit-transition: 0.35s cubic-bezier(0.52, 0.01, 0.16, 1) 0.20833s; -moz-transition: 0.35s cubic-bezier(0.52, 0.01, 0.16, 1) 0.20833s; transition: 0.35s cubic-bezier(0.52, 0.01, 0.16, 1) 0.20833s; } .letter-split-scroll.visible span:nth-child(26) { -webkit-transition: 0.36s cubic-bezier(0.52, 0.01, 0.16, 1) 0.22533s; -moz-transition: 0.36s cubic-bezier(0.52, 0.01, 0.16, 1) 0.22533s; transition: 0.36s cubic-bezier(0.52, 0.01, 0.16, 1) 0.22533s; } .letter-split-scroll.visible span:nth-child(27) { -webkit-transition: 0.37s cubic-bezier(0.52, 0.01, 0.16, 1) 0.243s; -moz-transition: 0.37s cubic-bezier(0.52, 0.01, 0.16, 1) 0.243s; transition: 0.37s cubic-bezier(0.52, 0.01, 0.16, 1) 0.243s; } .letter-split-scroll.visible span:nth-child(28) { -webkit-transition: 0.38s cubic-bezier(0.52, 0.01, 0.16, 1) 0.26133s; -moz-transition: 0.38s cubic-bezier(0.52, 0.01, 0.16, 1) 0.26133s; transition: 0.38s cubic-bezier(0.52, 0.01, 0.16, 1) 0.26133s; } .letter-split-scroll.visible span:nth-child(29) { -webkit-transition: 0.39s cubic-bezier(0.52, 0.01, 0.16, 1) 0.28033s; -moz-transition: 0.39s cubic-bezier(0.52, 0.01, 0.16, 1) 0.28033s; transition: 0.39s cubic-bezier(0.52, 0.01, 0.16, 1) 0.28033s; } .letter-split-scroll.visible span:nth-child(30) { -webkit-transition: 0.4s cubic-bezier(0.52, 0.01, 0.16, 1) 0.3s; -moz-transition: 0.4s cubic-bezier(0.52, 0.01, 0.16, 1) 0.3s; transition: 0.4s cubic-bezier(0.52, 0.01, 0.16, 1) 0.3s; } .letter-split-scroll.visible span:nth-child(31) { -webkit-transition: 0.41s cubic-bezier(0.52, 0.01, 0.16, 1) 0.32033s; -moz-transition: 0.41s cubic-bezier(0.52, 0.01, 0.16, 1) 0.32033s; transition: 0.41s cubic-bezier(0.52, 0.01, 0.16, 1) 0.32033s; } .letter-split-scroll.visible span:nth-child(32) { -webkit-transition: 0.42s cubic-bezier(0.52, 0.01, 0.16, 1) 0.34133s; -moz-transition: 0.42s cubic-bezier(0.52, 0.01, 0.16, 1) 0.34133s; transition: 0.42s cubic-bezier(0.52, 0.01, 0.16, 1) 0.34133s; } .letter-split-scroll.visible span:nth-child(33) { -webkit-transition: 0.43s cubic-bezier(0.52, 0.01, 0.16, 1) 0.363s; -moz-transition: 0.43s cubic-bezier(0.52, 0.01, 0.16, 1) 0.363s; transition: 0.43s cubic-bezier(0.52, 0.01, 0.16, 1) 0.363s; } .letter-split-scroll.visible span:nth-child(34) { -webkit-transition: 0.44s cubic-bezier(0.52, 0.01, 0.16, 1) 0.38533s; -moz-transition: 0.44s cubic-bezier(0.52, 0.01, 0.16, 1) 0.38533s; transition: 0.44s cubic-bezier(0.52, 0.01, 0.16, 1) 0.38533s; } .letter-split-scroll.visible span:nth-child(35) { -webkit-transition: 0.45s cubic-bezier(0.52, 0.01, 0.16, 1) 0.40833s; -moz-transition: 0.45s cubic-bezier(0.52, 0.01, 0.16, 1) 0.40833s; transition: 0.45s cubic-bezier(0.52, 0.01, 0.16, 1) 0.40833s; } .letter-split-scroll.visible span:nth-child(36) { -webkit-transition: 0.46s cubic-bezier(0.52, 0.01, 0.16, 1) 0.432s; -moz-transition: 0.46s cubic-bezier(0.52, 0.01, 0.16, 1) 0.432s; transition: 0.46s cubic-bezier(0.52, 0.01, 0.16, 1) 0.432s; } .letter-split-scroll.visible span:nth-child(37) { -webkit-transition: 0.47s cubic-bezier(0.52, 0.01, 0.16, 1) 0.45633s; -moz-transition: 0.47s cubic-bezier(0.52, 0.01, 0.16, 1) 0.45633s; transition: 0.47s cubic-bezier(0.52, 0.01, 0.16, 1) 0.45633s; } .letter-split-scroll.visible span:nth-child(38) { -webkit-transition: 0.48s cubic-bezier(0.52, 0.01, 0.16, 1) 0.48133s; -moz-transition: 0.48s cubic-bezier(0.52, 0.01, 0.16, 1) 0.48133s; transition: 0.48s cubic-bezier(0.52, 0.01, 0.16, 1) 0.48133s; } .letter-split-scroll.visible span:nth-child(39) { -webkit-transition: 0.49s cubic-bezier(0.52, 0.01, 0.16, 1) 0.507s; -moz-transition: 0.49s cubic-bezier(0.52, 0.01, 0.16, 1) 0.507s; transition: 0.49s cubic-bezier(0.52, 0.01, 0.16, 1) 0.507s; } .letter-split-scroll.visible span:nth-child(40) { -webkit-transition: 0.5s cubic-bezier(0.52, 0.01, 0.16, 1) 0.53333s; -moz-transition: 0.5s cubic-bezier(0.52, 0.01, 0.16, 1) 0.53333s; transition: 0.5s cubic-bezier(0.52, 0.01, 0.16, 1) 0.53333s; } .letter-split-scroll.visible span:nth-child(41) { -webkit-transition: 0.51s cubic-bezier(0.52, 0.01, 0.16, 1) 0.56033s; -moz-transition: 0.51s cubic-bezier(0.52, 0.01, 0.16, 1) 0.56033s; transition: 0.51s cubic-bezier(0.52, 0.01, 0.16, 1) 0.56033s; } .letter-split-scroll.visible span:nth-child(42) { -webkit-transition: 0.52s cubic-bezier(0.52, 0.01, 0.16, 1) 0.588s; -moz-transition: 0.52s cubic-bezier(0.52, 0.01, 0.16, 1) 0.588s; transition: 0.52s cubic-bezier(0.52, 0.01, 0.16, 1) 0.588s; } .letter-split-scroll.visible span:nth-child(43) { -webkit-transition: 0.53s cubic-bezier(0.52, 0.01, 0.16, 1) 0.61633s; -moz-transition: 0.53s cubic-bezier(0.52, 0.01, 0.16, 1) 0.61633s; transition: 0.53s cubic-bezier(0.52, 0.01, 0.16, 1) 0.61633s; } .letter-split-scroll.visible span:nth-child(44) { -webkit-transition: 0.54s cubic-bezier(0.52, 0.01, 0.16, 1) 0.64533s; -moz-transition: 0.54s cubic-bezier(0.52, 0.01, 0.16, 1) 0.64533s; transition: 0.54s cubic-bezier(0.52, 0.01, 0.16, 1) 0.64533s; } .letter-split-scroll.visible span:nth-child(45) { -webkit-transition: 0.55s cubic-bezier(0.52, 0.01, 0.16, 1) 0.675s; -moz-transition: 0.55s cubic-bezier(0.52, 0.01, 0.16, 1) 0.675s; transition: 0.55s cubic-bezier(0.52, 0.01, 0.16, 1) 0.675s; } .letter-split-scroll.visible span:nth-child(46) { -webkit-transition: 0.56s cubic-bezier(0.52, 0.01, 0.16, 1) 0.70533s; -moz-transition: 0.56s cubic-bezier(0.52, 0.01, 0.16, 1) 0.70533s; transition: 0.56s cubic-bezier(0.52, 0.01, 0.16, 1) 0.70533s; } .letter-split-scroll.visible span:nth-child(47) { -webkit-transition: 0.57s cubic-bezier(0.52, 0.01, 0.16, 1) 0.73633s; -moz-transition: 0.57s cubic-bezier(0.52, 0.01, 0.16, 1) 0.73633s; transition: 0.57s cubic-bezier(0.52, 0.01, 0.16, 1) 0.73633s; } .letter-split-scroll.visible span:nth-child(48) { -webkit-transition: 0.58s cubic-bezier(0.52, 0.01, 0.16, 1) 0.768s; -moz-transition: 0.58s cubic-bezier(0.52, 0.01, 0.16, 1) 0.768s; transition: 0.58s cubic-bezier(0.52, 0.01, 0.16, 1) 0.768s; } .letter-split-scroll.visible span:nth-child(49) { -webkit-transition: 0.59s cubic-bezier(0.52, 0.01, 0.16, 1) 0.80033s; -moz-transition: 0.59s cubic-bezier(0.52, 0.01, 0.16, 1) 0.80033s; transition: 0.59s cubic-bezier(0.52, 0.01, 0.16, 1) 0.80033s; } .letter-split-scroll.visible span:nth-child(50) { -webkit-transition: 0.6s cubic-bezier(0.52, 0.01, 0.16, 1) 0.83333s; -moz-transition: 0.6s cubic-bezier(0.52, 0.01, 0.16, 1) 0.83333s; transition: 0.6s cubic-bezier(0.52, 0.01, 0.16, 1) 0.83333s; } .letter-split-scroll.visible span:nth-child(51) { -webkit-transition: 0.61s cubic-bezier(0.52, 0.01, 0.16, 1) 0.867s; -moz-transition: 0.61s cubic-bezier(0.52, 0.01, 0.16, 1) 0.867s; transition: 0.61s cubic-bezier(0.52, 0.01, 0.16, 1) 0.867s; } .letter-split-scroll.visible span:nth-child(52) { -webkit-transition: 0.62s cubic-bezier(0.52, 0.01, 0.16, 1) 0.90133s; -moz-transition: 0.62s cubic-bezier(0.52, 0.01, 0.16, 1) 0.90133s; transition: 0.62s cubic-bezier(0.52, 0.01, 0.16, 1) 0.90133s; } .letter-split-scroll.visible span:nth-child(53) { -webkit-transition: 0.63s cubic-bezier(0.52, 0.01, 0.16, 1) 0.93633s; -moz-transition: 0.63s cubic-bezier(0.52, 0.01, 0.16, 1) 0.93633s; transition: 0.63s cubic-bezier(0.52, 0.01, 0.16, 1) 0.93633s; } .letter-split-scroll.visible span:nth-child(54) { -webkit-transition: 0.64s cubic-bezier(0.52, 0.01, 0.16, 1) 0.972s; -moz-transition: 0.64s cubic-bezier(0.52, 0.01, 0.16, 1) 0.972s; transition: 0.64s cubic-bezier(0.52, 0.01, 0.16, 1) 0.972s; } .letter-split-scroll.visible span:nth-child(55) { -webkit-transition: 0.65s cubic-bezier(0.52, 0.01, 0.16, 1) 1.00833s; -moz-transition: 0.65s cubic-bezier(0.52, 0.01, 0.16, 1) 1.00833s; transition: 0.65s cubic-bezier(0.52, 0.01, 0.16, 1) 1.00833s; } .letter-split-scroll.visible span:nth-child(56) { -webkit-transition: 0.66s cubic-bezier(0.52, 0.01, 0.16, 1) 1.04533s; -moz-transition: 0.66s cubic-bezier(0.52, 0.01, 0.16, 1) 1.04533s; transition: 0.66s cubic-bezier(0.52, 0.01, 0.16, 1) 1.04533s; } .letter-split-scroll.visible span:nth-child(57) { -webkit-transition: 0.67s cubic-bezier(0.52, 0.01, 0.16, 1) 1.083s; -moz-transition: 0.67s cubic-bezier(0.52, 0.01, 0.16, 1) 1.083s; transition: 0.67s cubic-bezier(0.52, 0.01, 0.16, 1) 1.083s; } .letter-split-scroll.visible span:nth-child(58) { -webkit-transition: 0.68s cubic-bezier(0.52, 0.01, 0.16, 1) 1.12133s; -moz-transition: 0.68s cubic-bezier(0.52, 0.01, 0.16, 1) 1.12133s; transition: 0.68s cubic-bezier(0.52, 0.01, 0.16, 1) 1.12133s; } .letter-split-scroll.visible span:nth-child(59) { -webkit-transition: 0.69s cubic-bezier(0.52, 0.01, 0.16, 1) 1.16033s; -moz-transition: 0.69s cubic-bezier(0.52, 0.01, 0.16, 1) 1.16033s; transition: 0.69s cubic-bezier(0.52, 0.01, 0.16, 1) 1.16033s; } .letter-split-scroll.visible span:nth-child(60) { -webkit-transition: 0.7s cubic-bezier(0.52, 0.01, 0.16, 1) 1.2s; -moz-transition: 0.7s cubic-bezier(0.52, 0.01, 0.16, 1) 1.2s; transition: 0.7s cubic-bezier(0.52, 0.01, 0.16, 1) 1.2s; } .letter-split-scroll.visible span:nth-child(61) { -webkit-transition: 0.71s cubic-bezier(0.52, 0.01, 0.16, 1) 1.24033s; -moz-transition: 0.71s cubic-bezier(0.52, 0.01, 0.16, 1) 1.24033s; transition: 0.71s cubic-bezier(0.52, 0.01, 0.16, 1) 1.24033s; } .letter-split-scroll.visible span:nth-child(62) { -webkit-transition: 0.72s cubic-bezier(0.52, 0.01, 0.16, 1) 1.28133s; -moz-transition: 0.72s cubic-bezier(0.52, 0.01, 0.16, 1) 1.28133s; transition: 0.72s cubic-bezier(0.52, 0.01, 0.16, 1) 1.28133s; } .letter-split-scroll.visible span:nth-child(63) { -webkit-transition: 0.73s cubic-bezier(0.52, 0.01, 0.16, 1) 1.323s; -moz-transition: 0.73s cubic-bezier(0.52, 0.01, 0.16, 1) 1.323s; transition: 0.73s cubic-bezier(0.52, 0.01, 0.16, 1) 1.323s; } .letter-split-scroll.visible span:nth-child(64) { -webkit-transition: 0.74s cubic-bezier(0.52, 0.01, 0.16, 1) 1.36533s; -moz-transition: 0.74s cubic-bezier(0.52, 0.01, 0.16, 1) 1.36533s; transition: 0.74s cubic-bezier(0.52, 0.01, 0.16, 1) 1.36533s; } .letter-split-scroll.visible span:nth-child(65) { -webkit-transition: 0.75s cubic-bezier(0.52, 0.01, 0.16, 1) 1.40833s; -moz-transition: 0.75s cubic-bezier(0.52, 0.01, 0.16, 1) 1.40833s; transition: 0.75s cubic-bezier(0.52, 0.01, 0.16, 1) 1.40833s; } .letter-split-scroll.visible span:nth-child(66) { -webkit-transition: 0.76s cubic-bezier(0.52, 0.01, 0.16, 1) 1.452s; -moz-transition: 0.76s cubic-bezier(0.52, 0.01, 0.16, 1) 1.452s; transition: 0.76s cubic-bezier(0.52, 0.01, 0.16, 1) 1.452s; } .letter-split-scroll.visible span:nth-child(67) { -webkit-transition: 0.77s cubic-bezier(0.52, 0.01, 0.16, 1) 1.49633s; -moz-transition: 0.77s cubic-bezier(0.52, 0.01, 0.16, 1) 1.49633s; transition: 0.77s cubic-bezier(0.52, 0.01, 0.16, 1) 1.49633s; } .letter-split-scroll.visible span:nth-child(68) { -webkit-transition: 0.78s cubic-bezier(0.52, 0.01, 0.16, 1) 1.54133s; -moz-transition: 0.78s cubic-bezier(0.52, 0.01, 0.16, 1) 1.54133s; transition: 0.78s cubic-bezier(0.52, 0.01, 0.16, 1) 1.54133s; } .letter-split-scroll.visible span:nth-child(69) { -webkit-transition: 0.79s cubic-bezier(0.52, 0.01, 0.16, 1) 1.587s; -moz-transition: 0.79s cubic-bezier(0.52, 0.01, 0.16, 1) 1.587s; transition: 0.79s cubic-bezier(0.52, 0.01, 0.16, 1) 1.587s; } .letter-split-scroll.visible span:nth-child(70) { -webkit-transition: 0.8s cubic-bezier(0.52, 0.01, 0.16, 1) 1.63333s; -moz-transition: 0.8s cubic-bezier(0.52, 0.01, 0.16, 1) 1.63333s; transition: 0.8s cubic-bezier(0.52, 0.01, 0.16, 1) 1.63333s; } .letter-split-scroll.visible span:nth-child(71) { -webkit-transition: 0.81s cubic-bezier(0.52, 0.01, 0.16, 1) 1.68033s; -moz-transition: 0.81s cubic-bezier(0.52, 0.01, 0.16, 1) 1.68033s; transition: 0.81s cubic-bezier(0.52, 0.01, 0.16, 1) 1.68033s; } .letter-split-scroll.visible span:nth-child(72) { -webkit-transition: 0.82s cubic-bezier(0.52, 0.01, 0.16, 1) 1.728s; -moz-transition: 0.82s cubic-bezier(0.52, 0.01, 0.16, 1) 1.728s; transition: 0.82s cubic-bezier(0.52, 0.01, 0.16, 1) 1.728s; } .letter-split-scroll.visible span:nth-child(73) { -webkit-transition: 0.83s cubic-bezier(0.52, 0.01, 0.16, 1) 1.77633s; -moz-transition: 0.83s cubic-bezier(0.52, 0.01, 0.16, 1) 1.77633s; transition: 0.83s cubic-bezier(0.52, 0.01, 0.16, 1) 1.77633s; } .letter-split-scroll.visible span:nth-child(74) { -webkit-transition: 0.84s cubic-bezier(0.52, 0.01, 0.16, 1) 1.82533s; -moz-transition: 0.84s cubic-bezier(0.52, 0.01, 0.16, 1) 1.82533s; transition: 0.84s cubic-bezier(0.52, 0.01, 0.16, 1) 1.82533s; } .letter-split-scroll.visible span:nth-child(75) { -webkit-transition: 0.85s cubic-bezier(0.52, 0.01, 0.16, 1) 1.875s; -moz-transition: 0.85s cubic-bezier(0.52, 0.01, 0.16, 1) 1.875s; transition: 0.85s cubic-bezier(0.52, 0.01, 0.16, 1) 1.875s; } .letter-split-scroll.visible span:nth-child(76) { -webkit-transition: 0.86s cubic-bezier(0.52, 0.01, 0.16, 1) 1.92533s; -moz-transition: 0.86s cubic-bezier(0.52, 0.01, 0.16, 1) 1.92533s; transition: 0.86s cubic-bezier(0.52, 0.01, 0.16, 1) 1.92533s; } .letter-split-scroll.visible span:nth-child(77) { -webkit-transition: 0.87s cubic-bezier(0.52, 0.01, 0.16, 1) 1.97633s; -moz-transition: 0.87s cubic-bezier(0.52, 0.01, 0.16, 1) 1.97633s; transition: 0.87s cubic-bezier(0.52, 0.01, 0.16, 1) 1.97633s; } .letter-split-scroll.visible span:nth-child(78) { -webkit-transition: 0.88s cubic-bezier(0.52, 0.01, 0.16, 1) 2.028s; -moz-transition: 0.88s cubic-bezier(0.52, 0.01, 0.16, 1) 2.028s; transition: 0.88s cubic-bezier(0.52, 0.01, 0.16, 1) 2.028s; } .letter-split-scroll.visible span:nth-child(79) { -webkit-transition: 0.89s cubic-bezier(0.52, 0.01, 0.16, 1) 2.08033s; -moz-transition: 0.89s cubic-bezier(0.52, 0.01, 0.16, 1) 2.08033s; transition: 0.89s cubic-bezier(0.52, 0.01, 0.16, 1) 2.08033s; } .letter-split-scroll.visible span:nth-child(80) { -webkit-transition: 0.9s cubic-bezier(0.52, 0.01, 0.16, 1) 2.13333s; -moz-transition: 0.9s cubic-bezier(0.52, 0.01, 0.16, 1) 2.13333s; transition: 0.9s cubic-bezier(0.52, 0.01, 0.16, 1) 2.13333s; } .letter-split-scroll.visible span:nth-child(81) { -webkit-transition: 0.91s cubic-bezier(0.52, 0.01, 0.16, 1) 2.187s; -moz-transition: 0.91s cubic-bezier(0.52, 0.01, 0.16, 1) 2.187s; transition: 0.91s cubic-bezier(0.52, 0.01, 0.16, 1) 2.187s; } .letter-split-scroll.visible span:nth-child(82) { -webkit-transition: 0.92s cubic-bezier(0.52, 0.01, 0.16, 1) 2.24133s; -moz-transition: 0.92s cubic-bezier(0.52, 0.01, 0.16, 1) 2.24133s; transition: 0.92s cubic-bezier(0.52, 0.01, 0.16, 1) 2.24133s; } .letter-split-scroll.visible span:nth-child(83) { -webkit-transition: 0.93s cubic-bezier(0.52, 0.01, 0.16, 1) 2.29633s; -moz-transition: 0.93s cubic-bezier(0.52, 0.01, 0.16, 1) 2.29633s; transition: 0.93s cubic-bezier(0.52, 0.01, 0.16, 1) 2.29633s; } .letter-split-scroll.visible span:nth-child(84) { -webkit-transition: 0.94s cubic-bezier(0.52, 0.01, 0.16, 1) 2.352s; -moz-transition: 0.94s cubic-bezier(0.52, 0.01, 0.16, 1) 2.352s; transition: 0.94s cubic-bezier(0.52, 0.01, 0.16, 1) 2.352s; } .letter-split-scroll.visible span:nth-child(85) { -webkit-transition: 0.95s cubic-bezier(0.52, 0.01, 0.16, 1) 2.40833s; -moz-transition: 0.95s cubic-bezier(0.52, 0.01, 0.16, 1) 2.40833s; transition: 0.95s cubic-bezier(0.52, 0.01, 0.16, 1) 2.40833s; } .letter-split-scroll.visible span:nth-child(86) { -webkit-transition: 0.96s cubic-bezier(0.52, 0.01, 0.16, 1) 2.46533s; -moz-transition: 0.96s cubic-bezier(0.52, 0.01, 0.16, 1) 2.46533s; transition: 0.96s cubic-bezier(0.52, 0.01, 0.16, 1) 2.46533s; } .letter-split-scroll.visible span:nth-child(87) { -webkit-transition: 0.97s cubic-bezier(0.52, 0.01, 0.16, 1) 2.523s; -moz-transition: 0.97s cubic-bezier(0.52, 0.01, 0.16, 1) 2.523s; transition: 0.97s cubic-bezier(0.52, 0.01, 0.16, 1) 2.523s; } .letter-split-scroll.visible span:nth-child(88) { -webkit-transition: 0.98s cubic-bezier(0.52, 0.01, 0.16, 1) 2.58133s; -moz-transition: 0.98s cubic-bezier(0.52, 0.01, 0.16, 1) 2.58133s; transition: 0.98s cubic-bezier(0.52, 0.01, 0.16, 1) 2.58133s; } .letter-split-scroll.visible span:nth-child(89) { -webkit-transition: 0.99s cubic-bezier(0.52, 0.01, 0.16, 1) 2.64033s; -moz-transition: 0.99s cubic-bezier(0.52, 0.01, 0.16, 1) 2.64033s; transition: 0.99s cubic-bezier(0.52, 0.01, 0.16, 1) 2.64033s; } .letter-split-scroll.visible span:nth-child(90) { -webkit-transition: 1s cubic-bezier(0.52, 0.01, 0.16, 1) 2.7s; -moz-transition: 1s cubic-bezier(0.52, 0.01, 0.16, 1) 2.7s; transition: 1s cubic-bezier(0.52, 0.01, 0.16, 1) 2.7s; } .letter-split-scroll.visible span:nth-child(91) { -webkit-transition: 1.01s cubic-bezier(0.52, 0.01, 0.16, 1) 2.76033s; -moz-transition: 1.01s cubic-bezier(0.52, 0.01, 0.16, 1) 2.76033s; transition: 1.01s cubic-bezier(0.52, 0.01, 0.16, 1) 2.76033s; } .letter-split-scroll.visible span:nth-child(92) { -webkit-transition: 1.02s cubic-bezier(0.52, 0.01, 0.16, 1) 2.82133s; -moz-transition: 1.02s cubic-bezier(0.52, 0.01, 0.16, 1) 2.82133s; transition: 1.02s cubic-bezier(0.52, 0.01, 0.16, 1) 2.82133s; } .letter-split-scroll.visible span:nth-child(93) { -webkit-transition: 1.03s cubic-bezier(0.52, 0.01, 0.16, 1) 2.883s; -moz-transition: 1.03s cubic-bezier(0.52, 0.01, 0.16, 1) 2.883s; transition: 1.03s cubic-bezier(0.52, 0.01, 0.16, 1) 2.883s; } .letter-split-scroll.visible span:nth-child(94) { -webkit-transition: 1.04s cubic-bezier(0.52, 0.01, 0.16, 1) 2.94533s; -moz-transition: 1.04s cubic-bezier(0.52, 0.01, 0.16, 1) 2.94533s; transition: 1.04s cubic-bezier(0.52, 0.01, 0.16, 1) 2.94533s; } .letter-split-scroll.visible span:nth-child(95) { -webkit-transition: 1.05s cubic-bezier(0.52, 0.01, 0.16, 1) 3.00833s; -moz-transition: 1.05s cubic-bezier(0.52, 0.01, 0.16, 1) 3.00833s; transition: 1.05s cubic-bezier(0.52, 0.01, 0.16, 1) 3.00833s; } .letter-split-scroll.visible span:nth-child(96) { -webkit-transition: 1.06s cubic-bezier(0.52, 0.01, 0.16, 1) 3.072s; -moz-transition: 1.06s cubic-bezier(0.52, 0.01, 0.16, 1) 3.072s; transition: 1.06s cubic-bezier(0.52, 0.01, 0.16, 1) 3.072s; } .letter-split-scroll.visible span:nth-child(97) { -webkit-transition: 1.07s cubic-bezier(0.52, 0.01, 0.16, 1) 3.13633s; -moz-transition: 1.07s cubic-bezier(0.52, 0.01, 0.16, 1) 3.13633s; transition: 1.07s cubic-bezier(0.52, 0.01, 0.16, 1) 3.13633s; } .letter-split-scroll.visible span:nth-child(98) { -webkit-transition: 1.08s cubic-bezier(0.52, 0.01, 0.16, 1) 3.20133s; -moz-transition: 1.08s cubic-bezier(0.52, 0.01, 0.16, 1) 3.20133s; transition: 1.08s cubic-bezier(0.52, 0.01, 0.16, 1) 3.20133s; } .letter-split-scroll.visible span:nth-child(99) { -webkit-transition: 1.09s cubic-bezier(0.52, 0.01, 0.16, 1) 3.267s; -moz-transition: 1.09s cubic-bezier(0.52, 0.01, 0.16, 1) 3.267s; transition: 1.09s cubic-bezier(0.52, 0.01, 0.16, 1) 3.267s; } .letter-split-scroll.visible span:nth-child(100) { -webkit-transition: 1.1s cubic-bezier(0.52, 0.01, 0.16, 1) 3.33333s; -moz-transition: 1.1s cubic-bezier(0.52, 0.01, 0.16, 1) 3.33333s; transition: 1.1s cubic-bezier(0.52, 0.01, 0.16, 1) 3.33333s; } .letter-split-scroll.visible span:nth-child(101) { -webkit-transition: 1.11s cubic-bezier(0.52, 0.01, 0.16, 1) 3.40033s; -moz-transition: 1.11s cubic-bezier(0.52, 0.01, 0.16, 1) 3.40033s; transition: 1.11s cubic-bezier(0.52, 0.01, 0.16, 1) 3.40033s; } .letter-split-scroll.visible span:nth-child(102) { -webkit-transition: 1.12s cubic-bezier(0.52, 0.01, 0.16, 1) 3.468s; -moz-transition: 1.12s cubic-bezier(0.52, 0.01, 0.16, 1) 3.468s; transition: 1.12s cubic-bezier(0.52, 0.01, 0.16, 1) 3.468s; } .letter-split-scroll.visible span:nth-child(103) { -webkit-transition: 1.13s cubic-bezier(0.52, 0.01, 0.16, 1) 3.53633s; -moz-transition: 1.13s cubic-bezier(0.52, 0.01, 0.16, 1) 3.53633s; transition: 1.13s cubic-bezier(0.52, 0.01, 0.16, 1) 3.53633s; } .letter-split-scroll.visible span:nth-child(104) { -webkit-transition: 1.14s cubic-bezier(0.52, 0.01, 0.16, 1) 3.60533s; -moz-transition: 1.14s cubic-bezier(0.52, 0.01, 0.16, 1) 3.60533s; transition: 1.14s cubic-bezier(0.52, 0.01, 0.16, 1) 3.60533s; } .letter-split-scroll.visible span:nth-child(105) { -webkit-transition: 1.15s cubic-bezier(0.52, 0.01, 0.16, 1) 3.675s; -moz-transition: 1.15s cubic-bezier(0.52, 0.01, 0.16, 1) 3.675s; transition: 1.15s cubic-bezier(0.52, 0.01, 0.16, 1) 3.675s; } .letter-split-scroll.visible span:nth-child(106) { -webkit-transition: 1.16s cubic-bezier(0.52, 0.01, 0.16, 1) 3.74533s; -moz-transition: 1.16s cubic-bezier(0.52, 0.01, 0.16, 1) 3.74533s; transition: 1.16s cubic-bezier(0.52, 0.01, 0.16, 1) 3.74533s; } .letter-split-scroll.visible span:nth-child(107) { -webkit-transition: 1.17s cubic-bezier(0.52, 0.01, 0.16, 1) 3.81633s; -moz-transition: 1.17s cubic-bezier(0.52, 0.01, 0.16, 1) 3.81633s; transition: 1.17s cubic-bezier(0.52, 0.01, 0.16, 1) 3.81633s; } .letter-split-scroll.visible span:nth-child(108) { -webkit-transition: 1.18s cubic-bezier(0.52, 0.01, 0.16, 1) 3.888s; -moz-transition: 1.18s cubic-bezier(0.52, 0.01, 0.16, 1) 3.888s; transition: 1.18s cubic-bezier(0.52, 0.01, 0.16, 1) 3.888s; } .letter-split-scroll.visible span:nth-child(109) { -webkit-transition: 1.19s cubic-bezier(0.52, 0.01, 0.16, 1) 3.96033s; -moz-transition: 1.19s cubic-bezier(0.52, 0.01, 0.16, 1) 3.96033s; transition: 1.19s cubic-bezier(0.52, 0.01, 0.16, 1) 3.96033s; } .letter-split-scroll.visible span:nth-child(110) { -webkit-transition: 1.2s cubic-bezier(0.52, 0.01, 0.16, 1) 4.03333s; -moz-transition: 1.2s cubic-bezier(0.52, 0.01, 0.16, 1) 4.03333s; transition: 1.2s cubic-bezier(0.52, 0.01, 0.16, 1) 4.03333s; } .letter-split-scroll.visible span:nth-child(111) { -webkit-transition: 1.21s cubic-bezier(0.52, 0.01, 0.16, 1) 4.107s; -moz-transition: 1.21s cubic-bezier(0.52, 0.01, 0.16, 1) 4.107s; transition: 1.21s cubic-bezier(0.52, 0.01, 0.16, 1) 4.107s; } .letter-split-scroll.visible span:nth-child(112) { -webkit-transition: 1.22s cubic-bezier(0.52, 0.01, 0.16, 1) 4.18133s; -moz-transition: 1.22s cubic-bezier(0.52, 0.01, 0.16, 1) 4.18133s; transition: 1.22s cubic-bezier(0.52, 0.01, 0.16, 1) 4.18133s; } .letter-split-scroll.visible span:nth-child(113) { -webkit-transition: 1.23s cubic-bezier(0.52, 0.01, 0.16, 1) 4.25633s; -moz-transition: 1.23s cubic-bezier(0.52, 0.01, 0.16, 1) 4.25633s; transition: 1.23s cubic-bezier(0.52, 0.01, 0.16, 1) 4.25633s; } .letter-split-scroll.visible span:nth-child(114) { -webkit-transition: 1.24s cubic-bezier(0.52, 0.01, 0.16, 1) 4.332s; -moz-transition: 1.24s cubic-bezier(0.52, 0.01, 0.16, 1) 4.332s; transition: 1.24s cubic-bezier(0.52, 0.01, 0.16, 1) 4.332s; } .letter-split-scroll.visible span:nth-child(115) { -webkit-transition: 1.25s cubic-bezier(0.52, 0.01, 0.16, 1) 4.40833s; -moz-transition: 1.25s cubic-bezier(0.52, 0.01, 0.16, 1) 4.40833s; transition: 1.25s cubic-bezier(0.52, 0.01, 0.16, 1) 4.40833s; } .letter-split-scroll.visible span:nth-child(116) { -webkit-transition: 1.26s cubic-bezier(0.52, 0.01, 0.16, 1) 4.48533s; -moz-transition: 1.26s cubic-bezier(0.52, 0.01, 0.16, 1) 4.48533s; transition: 1.26s cubic-bezier(0.52, 0.01, 0.16, 1) 4.48533s; } .letter-split-scroll.visible span:nth-child(117) { -webkit-transition: 1.27s cubic-bezier(0.52, 0.01, 0.16, 1) 4.563s; -moz-transition: 1.27s cubic-bezier(0.52, 0.01, 0.16, 1) 4.563s; transition: 1.27s cubic-bezier(0.52, 0.01, 0.16, 1) 4.563s; } .letter-split-scroll.visible span:nth-child(118) { -webkit-transition: 1.28s cubic-bezier(0.52, 0.01, 0.16, 1) 4.64133s; -moz-transition: 1.28s cubic-bezier(0.52, 0.01, 0.16, 1) 4.64133s; transition: 1.28s cubic-bezier(0.52, 0.01, 0.16, 1) 4.64133s; } .letter-split-scroll.visible span:nth-child(119) { -webkit-transition: 1.29s cubic-bezier(0.52, 0.01, 0.16, 1) 4.72033s; -moz-transition: 1.29s cubic-bezier(0.52, 0.01, 0.16, 1) 4.72033s; transition: 1.29s cubic-bezier(0.52, 0.01, 0.16, 1) 4.72033s; } .letter-split-scroll.visible span:nth-child(120) { -webkit-transition: 1.3s cubic-bezier(0.52, 0.01, 0.16, 1) 4.8s; -moz-transition: 1.3s cubic-bezier(0.52, 0.01, 0.16, 1) 4.8s; transition: 1.3s cubic-bezier(0.52, 0.01, 0.16, 1) 4.8s; } .letter-split-scroll.visible span:nth-child(121) { -webkit-transition: 1.31s cubic-bezier(0.52, 0.01, 0.16, 1) 4.88033s; -moz-transition: 1.31s cubic-bezier(0.52, 0.01, 0.16, 1) 4.88033s; transition: 1.31s cubic-bezier(0.52, 0.01, 0.16, 1) 4.88033s; } .letter-split-scroll.visible span:nth-child(122) { -webkit-transition: 1.32s cubic-bezier(0.52, 0.01, 0.16, 1) 4.96133s; -moz-transition: 1.32s cubic-bezier(0.52, 0.01, 0.16, 1) 4.96133s; transition: 1.32s cubic-bezier(0.52, 0.01, 0.16, 1) 4.96133s; } .letter-split-scroll.visible span:nth-child(123) { -webkit-transition: 1.33s cubic-bezier(0.52, 0.01, 0.16, 1) 5.043s; -moz-transition: 1.33s cubic-bezier(0.52, 0.01, 0.16, 1) 5.043s; transition: 1.33s cubic-bezier(0.52, 0.01, 0.16, 1) 5.043s; } .letter-split-scroll.visible span:nth-child(124) { -webkit-transition: 1.34s cubic-bezier(0.52, 0.01, 0.16, 1) 5.12533s; -moz-transition: 1.34s cubic-bezier(0.52, 0.01, 0.16, 1) 5.12533s; transition: 1.34s cubic-bezier(0.52, 0.01, 0.16, 1) 5.12533s; } .letter-split-scroll.visible span:nth-child(125) { -webkit-transition: 1.35s cubic-bezier(0.52, 0.01, 0.16, 1) 5.20833s; -moz-transition: 1.35s cubic-bezier(0.52, 0.01, 0.16, 1) 5.20833s; transition: 1.35s cubic-bezier(0.52, 0.01, 0.16, 1) 5.20833s; } .letter-split-scroll.visible span:nth-child(126) { -webkit-transition: 1.36s cubic-bezier(0.52, 0.01, 0.16, 1) 5.292s; -moz-transition: 1.36s cubic-bezier(0.52, 0.01, 0.16, 1) 5.292s; transition: 1.36s cubic-bezier(0.52, 0.01, 0.16, 1) 5.292s; } .letter-split-scroll.visible span:nth-child(127) { -webkit-transition: 1.37s cubic-bezier(0.52, 0.01, 0.16, 1) 5.37633s; -moz-transition: 1.37s cubic-bezier(0.52, 0.01, 0.16, 1) 5.37633s; transition: 1.37s cubic-bezier(0.52, 0.01, 0.16, 1) 5.37633s; } .letter-split-scroll.visible span:nth-child(128) { -webkit-transition: 1.38s cubic-bezier(0.52, 0.01, 0.16, 1) 5.46133s; -moz-transition: 1.38s cubic-bezier(0.52, 0.01, 0.16, 1) 5.46133s; transition: 1.38s cubic-bezier(0.52, 0.01, 0.16, 1) 5.46133s; } .letter-split-scroll.visible span:nth-child(129) { -webkit-transition: 1.39s cubic-bezier(0.52, 0.01, 0.16, 1) 5.547s; -moz-transition: 1.39s cubic-bezier(0.52, 0.01, 0.16, 1) 5.547s; transition: 1.39s cubic-bezier(0.52, 0.01, 0.16, 1) 5.547s; } .letter-split-scroll.visible span:nth-child(130) { -webkit-transition: 1.4s cubic-bezier(0.52, 0.01, 0.16, 1) 5.63333s; -moz-transition: 1.4s cubic-bezier(0.52, 0.01, 0.16, 1) 5.63333s; transition: 1.4s cubic-bezier(0.52, 0.01, 0.16, 1) 5.63333s; } .letter-split-scroll.visible span:nth-child(131) { -webkit-transition: 1.41s cubic-bezier(0.52, 0.01, 0.16, 1) 5.72033s; -moz-transition: 1.41s cubic-bezier(0.52, 0.01, 0.16, 1) 5.72033s; transition: 1.41s cubic-bezier(0.52, 0.01, 0.16, 1) 5.72033s; } .letter-split-scroll.visible span:nth-child(132) { -webkit-transition: 1.42s cubic-bezier(0.52, 0.01, 0.16, 1) 5.808s; -moz-transition: 1.42s cubic-bezier(0.52, 0.01, 0.16, 1) 5.808s; transition: 1.42s cubic-bezier(0.52, 0.01, 0.16, 1) 5.808s; } .letter-split-scroll.visible span:nth-child(133) { -webkit-transition: 1.43s cubic-bezier(0.52, 0.01, 0.16, 1) 5.89633s; -moz-transition: 1.43s cubic-bezier(0.52, 0.01, 0.16, 1) 5.89633s; transition: 1.43s cubic-bezier(0.52, 0.01, 0.16, 1) 5.89633s; } .letter-split-scroll.visible span:nth-child(134) { -webkit-transition: 1.44s cubic-bezier(0.52, 0.01, 0.16, 1) 5.98533s; -moz-transition: 1.44s cubic-bezier(0.52, 0.01, 0.16, 1) 5.98533s; transition: 1.44s cubic-bezier(0.52, 0.01, 0.16, 1) 5.98533s; } .letter-split-scroll.visible span:nth-child(135) { -webkit-transition: 1.45s cubic-bezier(0.52, 0.01, 0.16, 1) 6.075s; -moz-transition: 1.45s cubic-bezier(0.52, 0.01, 0.16, 1) 6.075s; transition: 1.45s cubic-bezier(0.52, 0.01, 0.16, 1) 6.075s; } .letter-split-scroll.visible span:nth-child(136) { -webkit-transition: 1.46s cubic-bezier(0.52, 0.01, 0.16, 1) 6.16533s; -moz-transition: 1.46s cubic-bezier(0.52, 0.01, 0.16, 1) 6.16533s; transition: 1.46s cubic-bezier(0.52, 0.01, 0.16, 1) 6.16533s; } .letter-split-scroll.visible span:nth-child(137) { -webkit-transition: 1.47s cubic-bezier(0.52, 0.01, 0.16, 1) 6.25633s; -moz-transition: 1.47s cubic-bezier(0.52, 0.01, 0.16, 1) 6.25633s; transition: 1.47s cubic-bezier(0.52, 0.01, 0.16, 1) 6.25633s; } .letter-split-scroll.visible span:nth-child(138) { -webkit-transition: 1.48s cubic-bezier(0.52, 0.01, 0.16, 1) 6.348s; -moz-transition: 1.48s cubic-bezier(0.52, 0.01, 0.16, 1) 6.348s; transition: 1.48s cubic-bezier(0.52, 0.01, 0.16, 1) 6.348s; } .letter-split-scroll.visible span:nth-child(139) { -webkit-transition: 1.49s cubic-bezier(0.52, 0.01, 0.16, 1) 6.44033s; -moz-transition: 1.49s cubic-bezier(0.52, 0.01, 0.16, 1) 6.44033s; transition: 1.49s cubic-bezier(0.52, 0.01, 0.16, 1) 6.44033s; } .letter-split-scroll.visible span:nth-child(140) { -webkit-transition: 1.5s cubic-bezier(0.52, 0.01, 0.16, 1) 6.53333s; -moz-transition: 1.5s cubic-bezier(0.52, 0.01, 0.16, 1) 6.53333s; transition: 1.5s cubic-bezier(0.52, 0.01, 0.16, 1) 6.53333s; } .letter-split-scroll.visible span:nth-child(141) { -webkit-transition: 1.51s cubic-bezier(0.52, 0.01, 0.16, 1) 6.627s; -moz-transition: 1.51s cubic-bezier(0.52, 0.01, 0.16, 1) 6.627s; transition: 1.51s cubic-bezier(0.52, 0.01, 0.16, 1) 6.627s; } .letter-split-scroll.visible span:nth-child(142) { -webkit-transition: 1.52s cubic-bezier(0.52, 0.01, 0.16, 1) 6.72133s; -moz-transition: 1.52s cubic-bezier(0.52, 0.01, 0.16, 1) 6.72133s; transition: 1.52s cubic-bezier(0.52, 0.01, 0.16, 1) 6.72133s; } .letter-split-scroll.visible span:nth-child(143) { -webkit-transition: 1.53s cubic-bezier(0.52, 0.01, 0.16, 1) 6.81633s; -moz-transition: 1.53s cubic-bezier(0.52, 0.01, 0.16, 1) 6.81633s; transition: 1.53s cubic-bezier(0.52, 0.01, 0.16, 1) 6.81633s; } .letter-split-scroll.visible span:nth-child(144) { -webkit-transition: 1.54s cubic-bezier(0.52, 0.01, 0.16, 1) 6.912s; -moz-transition: 1.54s cubic-bezier(0.52, 0.01, 0.16, 1) 6.912s; transition: 1.54s cubic-bezier(0.52, 0.01, 0.16, 1) 6.912s; } .letter-split-scroll.visible span:nth-child(145) { -webkit-transition: 1.55s cubic-bezier(0.52, 0.01, 0.16, 1) 7.00833s; -moz-transition: 1.55s cubic-bezier(0.52, 0.01, 0.16, 1) 7.00833s; transition: 1.55s cubic-bezier(0.52, 0.01, 0.16, 1) 7.00833s; } .letter-split-scroll.visible span:nth-child(146) { -webkit-transition: 1.56s cubic-bezier(0.52, 0.01, 0.16, 1) 7.10533s; -moz-transition: 1.56s cubic-bezier(0.52, 0.01, 0.16, 1) 7.10533s; transition: 1.56s cubic-bezier(0.52, 0.01, 0.16, 1) 7.10533s; } .letter-split-scroll.visible span:nth-child(147) { -webkit-transition: 1.57s cubic-bezier(0.52, 0.01, 0.16, 1) 7.203s; -moz-transition: 1.57s cubic-bezier(0.52, 0.01, 0.16, 1) 7.203s; transition: 1.57s cubic-bezier(0.52, 0.01, 0.16, 1) 7.203s; } .letter-split-scroll.visible span:nth-child(148) { -webkit-transition: 1.58s cubic-bezier(0.52, 0.01, 0.16, 1) 7.30133s; -moz-transition: 1.58s cubic-bezier(0.52, 0.01, 0.16, 1) 7.30133s; transition: 1.58s cubic-bezier(0.52, 0.01, 0.16, 1) 7.30133s; } .letter-split-scroll.visible span:nth-child(149) { -webkit-transition: 1.59s cubic-bezier(0.52, 0.01, 0.16, 1) 7.40033s; -moz-transition: 1.59s cubic-bezier(0.52, 0.01, 0.16, 1) 7.40033s; transition: 1.59s cubic-bezier(0.52, 0.01, 0.16, 1) 7.40033s; } .letter-split-scroll.visible span:nth-child(150) { -webkit-transition: 1.6s cubic-bezier(0.52, 0.01, 0.16, 1) 7.5s; -moz-transition: 1.6s cubic-bezier(0.52, 0.01, 0.16, 1) 7.5s; transition: 1.6s cubic-bezier(0.52, 0.01, 0.16, 1) 7.5s; } .pos-a { position: absolute; } .full-size, .js-full-size { width: 100%; height: 100%; } .viewport-full-size { width: 100vw; height: 100vh; } .full-width { width: 100%; } .pos-a-center { position: absolute; left: 50%; top: 50%; } .pos-a-t-l { position: absolute; top: 0; left: 0; } .pos-a-b-l { position: absolute; bottom: 0; left: 0; } .pos-a-t-r { position: absolute; top: 0; right: 0; } .pos-a-b-r { position: absolute; bottom: 0; right: 0; } .pos-f-t-l { position: fixed; top: 0; left: 0; } .pos-f { position: fixed; } .pos-f-bottom { position: fixed; bottom: 0; left: 0; } .pc-b::before { content: ""; } .pc-a::after { content: ""; } .center-l-t { position: absolute; left: 50%; top: 50%; } .mob-only { display: none; } @media only screen and (max-width: 900px) { .mob-only { display: block; } } .desktop-only { display: block; } @media only screen and (max-width: 900px) { .desktop-only { display: none; } } .widow-killer { display: inline-block; } .blend-screen { mix-blend-mode: screen; } .blend-multiply { mix-blend-mode: multiply; } .no-display { display: none !important; } .js-button-transition:hover { cursor: pointer; } nav { position: fixed; } .list-btn, .left-nextprev, .topbottom-nextprev .prev, .topbottom-nextprev .next, .page-title { -webkit-transition: 0.45s cubic-bezier(0.52, 0.01, 0.16, 1); -moz-transition: 0.45s cubic-bezier(0.52, 0.01, 0.16, 1); transition: 0.45s cubic-bezier(0.52, 0.01, 0.16, 1); } .nav-wrap.inactive .list-btn { -webkit-transform: translateX(100px); -moz-transform: translateX(100px); -ms-transform: translateX(100px); -o-transform: translateX(100px); transform: translateX(100px); } .nav-wrap.inactive .left-nextprev { -webkit-transform: translateX(-150px); -moz-transform: translateX(-150px); -ms-transform: translateX(-150px); -o-transform: translateX(-150px); transform: translateX(-150px); } .nav-wrap.inactive .topbottom-nextprev .prev { -webkit-transform: translateY(-100px) rotate(90deg); -moz-transform: translateY(-100px) rotate(90deg); -ms-transform: translateY(-100px) rotate(90deg); -o-transform: translateY(-100px) rotate(90deg); transform: translateY(-100px) rotate(90deg); } .nav-wrap.inactive .topbottom-nextprev .next { -webkit-transform: translateY(100px) rotate(-90deg); -moz-transform: translateY(100px) rotate(-90deg); -ms-transform: translateY(100px) rotate(-90deg); -o-transform: translateY(100px) rotate(-90deg); transform: translateY(100px) rotate(-90deg); } .nav-wrap.inactive .page-title { opacity: 0; -webkit-transition: 0.13s; -moz-transition: 0.13s; transition: 0.13s; } .arrow-wrap:hover .arrow span:nth-child(2)::before { -webkit-transform: scaleX(0) translateX(15px); -moz-transform: scaleX(0) translateX(15px); -ms-transform: scaleX(0) translateX(15px); -o-transform: scaleX(0) translateX(15px); transform: scaleX(0) translateX(15px); } .arrow-wrap:hover .arrow span:nth-child(2)::after { background-color: #17181c; -webkit-transform: scale(0.3) translateX(44px); -moz-transform: scale(0.3) translateX(44px); -ms-transform: scale(0.3) translateX(44px); -o-transform: scale(0.3) translateX(44px); transform: scale(0.3) translateX(44px); -webkit-transition-delay: 0.21s; -moz-transition-delay: 0.21s; transition-delay: 0.21s; } .arrow-wrap:hover .arrow span:nth-child(1)::before { -webkit-transform: scaleX(1) translateX(0px); -moz-transform: scaleX(1) translateX(0px); -ms-transform: scaleX(1) translateX(0px); -o-transform: scaleX(1) translateX(0px); transform: scaleX(1) translateX(0px); } .arrow { position: absolute; right: 16px; top: 50%; width: 15px; } .arrow span { position: absolute; top: 0; left: 0; width: 100%; } .arrow span::before, .arrow span::after { content: ''; position: absolute; } .arrow span::before, .arrow span::after { background-color: #f7f3f2; -webkit-transition: 0.35s cubic-bezier(0.62, 0.02, 0.34, 1); -moz-transition: 0.35s cubic-bezier(0.62, 0.02, 0.34, 1); transition: 0.35s cubic-bezier(0.62, 0.02, 0.34, 1); -webkit-backface-visibility: hidden; } .arrow span::before { top: 0; left: 0; width: 100%; height: 1px; -webkit-transform-origin: 100% 0; -moz-transform-origin: 100% 0; -ms-transform-origin: 100% 0; -o-transform-origin: 100% 0; transform-origin: 100% 0; } .arrow span::after { width: 11px; height: 11px; border-radius: 11px; top: -9px; left: -9px; border-radius: 20px; border: 4px solid #f7f3f2; -webkit-transform: scale(0.25); -moz-transform: scale(0.25); -ms-transform: scale(0.25); -o-transform: scale(0.25); transform: scale(0.25); } .arrow span:nth-child(1)::before { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleX(0) translateX(-15px); -moz-transform: scaleX(0) translateX(-15px); -ms-transform: scaleX(0) translateX(-15px); -o-transform: scaleX(0) translateX(-15px); transform: scaleX(0) translateX(-15px); -webkit-transition: 0.45s cubic-bezier(0.62, 0.02, 0.34, 1) 0.24s; -moz-transition: 0.45s cubic-bezier(0.62, 0.02, 0.34, 1) 0.24s; transition: 0.45s cubic-bezier(0.62, 0.02, 0.34, 1) 0.24s; } .arrow span:nth-child(1)::after { -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); } .cta { background-color: #f7f3f2; display: inline-block; padding: 16px 18px; color: #17181c; font-weight: 800; font-size: 8px; white-space: nowrap; } .cta.arrow-wrap { padding-right: 46px; } .cta.arrow-wrap .arrow span::before, .cta.arrow-wrap .arrow span::after { background-color: #17181c; } .cta.arrow-wrap .arrow span::after { border: 4px solid #17181c; } .cta.arrow-wrap:hover .arrow span:nth-child(2)::after { background-color: #f7f3f2; } .cta.black-cta { background-color: #17181c; color: #f7f3f2; } .cta.right-cta { position: absolute; right: 0; top: 50%; margin-top: -20px; } .cta.cta-pano-wrap { padding-right: 50px; } .cta.cta-pano-wrap span { position: absolute; top: 50%; right: 20px; width: 25px; height: 8px; margin-top: -4px; background: url("../img/ui/pano-icon-black.svg") no-repeat center center/100%; } .letter-mask { width: 400px; height: 465px; } .letter-video { width: 98%; left: 1%; } .mask-letter-wrap { width: 395px; height: 480px; margin: -240px 0 0 -197.5px; margin-top: -220px; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } @media only screen and (max-width: 1600px) { .mask-letter-wrap { -webkit-transform: scale(0.88); -moz-transform: scale(0.88); -ms-transform: scale(0.88); -o-transform: scale(0.88); transform: scale(0.88); } } @media only screen and (max-width: 1200px) { .mask-letter-wrap { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -ms-transform: scale(0.75); -o-transform: scale(0.75); transform: scale(0.75); } } @media only screen and (max-width: 1000px) { .mask-letter-wrap { -webkit-transform: scale(0.65); -moz-transform: scale(0.65); -ms-transform: scale(0.65); -o-transform: scale(0.65); transform: scale(0.65); } } .mask-letter-wrap.mask-marque-wrap { margin-top: -250px; } .mask-letter-wrap::before { top: 0; height: 1px; } .mask-letter-wrap::after { bottom: 0; height: 2px; } .js-mask-letter-wrap { overflow: hidden; } .mask-letter { width: 100%; height: 100%; } .video-mask { overflow: hidden; } .video-mask video { width: 100%; position: absolute; top: 0; left: 0; pointer-events: none; } video.rotate { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .vid-fill-screen { position: fixed; top: 0; left: 0; pointer-events: none; } .vid-fill-screen video { z-index: 3; position: absolute; top: 0; left: -10%; width: 120%; } .vid-fill-screen .marque, .vid-fill-screen section { z-index: 10; } .vid-click-transition { opacity: 0; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .vid-click-transition video { visibility: hidden; } .vid-click-transition video.active { visibility: visible; } .vid-click-fallback { display: none; } .vid-click-fallback::before, .vid-click-fallback::after { content: ''; position: absolute; width: 100%; height: 53vh; background-color: #FFF; -webkit-transform: scaleY(0); -moz-transform: scaleY(0); -ms-transform: scaleY(0); -o-transform: scaleY(0); transform: scaleY(0); -webkit-transition: 0.57s cubic-bezier(0.5, 0.5, 0, 1); -moz-transition: 0.57s cubic-bezier(0.5, 0.5, 0, 1); transition: 0.57s cubic-bezier(0.5, 0.5, 0, 1); left: 0; } .vid-click-fallback::before { top: -2%; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; } .vid-click-fallback::after { bottom: -2%; -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; } .vid-click-fallback.active::before, .vid-click-fallback.active::after { -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); transform: scaleY(1); } .list-btn { right: 0px; top: 50%; margin-top: -25px; width: 26px; height: 26px; } .list-btn.mob-list-btn { top: 57px; right: 35px; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); display: none; z-index: 99999; } .list-btn.mob-list-btn li { border-top-color: #f7f3f2 !important; } .list-btn.mob-list-btn li:nth-child(2) { background-color: #f7f3f2 !important; } .list-btn.mob-list-btn .close-btn { position: absolute; top: 60%; left: 80%; opacity: 0; } .list-btn.mob-list-btn .close-btn .close-icon::before, .list-btn.mob-list-btn .close-btn .close-icon::after { width: 2px; } @media only screen and (max-width: 900px) { .list-btn.mob-list-btn { display: block; } } .list-btn ul { width: 100%; height: 100%; -webkit-transform: scale(0.87); -moz-transform: scale(0.87); -ms-transform: scale(0.87); -o-transform: scale(0.87); transform: scale(0.87); } @media only screen and (min-width: 1600px) { .list-btn ul { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } .list-btn li { position: absolute; top: 0; left: 0; -webkit-transition: 0.31s cubic-bezier(0.62, 0.02, 0.34, 1); -moz-transition: 0.31s cubic-bezier(0.62, 0.02, 0.34, 1); transition: 0.31s cubic-bezier(0.62, 0.02, 0.34, 1); } .list-btn li:nth-child(1), .list-btn li:nth-child(3) { width: 100%; height: 100%; border: 4px solid transparent; border-top: 4px solid #17181c; } .list-btn li:nth-child(3) { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .list-btn li:nth-child(2) { width: 4px; height: 4px; margin-top: 2px; left: 50%; margin-left: 2px; top: 50%; -webkit-transform: scaleX(7); -moz-transform: scaleX(7); -ms-transform: scaleX(7); -o-transform: scaleX(7); transform: scaleX(7); background-color: #17181c; -webkit-transition: all 0.31s cubic-bezier(0.62, 0.02, 0.34, 1) 0.11s, border-radius 0.15s cubic-bezier(0.62, 0.02, 0.34, 1) 0s; -moz-transition: all 0.31s cubic-bezier(0.62, 0.02, 0.34, 1) 0.11s, border-radius 0.15s cubic-bezier(0.62, 0.02, 0.34, 1) 0s; transition: all 0.31s cubic-bezier(0.62, 0.02, 0.34, 1) 0.11s, border-radius 0.15s cubic-bezier(0.62, 0.02, 0.34, 1) 0s; } .list-btn h5 { position: absolute; margin-bottom: 0; bottom: -20px; left: 0; width: 100%; -webkit-transition: 0.28s cubic-bezier(0.52, 0.01, 0.16, 1); -moz-transition: 0.28s cubic-bezier(0.52, 0.01, 0.16, 1); transition: 0.28s cubic-bezier(0.52, 0.01, 0.16, 1); color: #f7f3f2; white-space: nowrap; } .list-btn:not(.mob-list-btn) { padding: 18px 25px 24px 17px; background: #f7f3f2; } .list-btn:not(.mob-list-btn):hover li:nth-child(1), .list-btn:not(.mob-list-btn):hover li:nth-child(3) { border-right: 4px solid #17181c; border-radius: 0px 20px 0 0; } .list-btn:not(.mob-list-btn):hover li:nth-child(1) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .list-btn:not(.mob-list-btn):hover li:nth-child(2) { border-radius: 20px; -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); -webkit-transition: all 0.31s cubic-bezier(0.62, 0.02, 0.34, 1) 0.11s, border-radius 0.15s cubic-bezier(0.62, 0.02, 0.34, 1) 0.25s; -moz-transition: all 0.31s cubic-bezier(0.62, 0.02, 0.34, 1) 0.11s, border-radius 0.15s cubic-bezier(0.62, 0.02, 0.34, 1) 0.25s; transition: all 0.31s cubic-bezier(0.62, 0.02, 0.34, 1) 0.11s, border-radius 0.15s cubic-bezier(0.62, 0.02, 0.34, 1) 0.25s; } .list-btn:not(.mob-list-btn):hover li:nth-child(3) { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); } .invisible-content { display: none !important; } .slanted-type { -webkit-transform: rotate(-11deg) skew(-11deg); -moz-transform: rotate(-11deg) skew(-11deg); -ms-transform: rotate(-11deg) skew(-11deg); -o-transform: rotate(-11deg) skew(-11deg); transform: rotate(-11deg) skew(-11deg); } .slanted-type .unslant { -webkit-transform: rotate(10.6deg) skew(11deg) scaleX(1.05); -moz-transform: rotate(10.6deg) skew(11deg) scaleX(1.05); -ms-transform: rotate(10.6deg) skew(11deg) scaleX(1.05); -o-transform: rotate(10.6deg) skew(11deg) scaleX(1.05); transform: rotate(10.6deg) skew(11deg) scaleX(1.05); } .slanted-type .marque { width: 30px; height: 30px; margin: -15px 0 0 -15px; left: 50%; margin-bottom: 20px; top: -40px; } .slanted-type h5 { color: #fff; } .lockup h1, .lockup h2, .lockup h3, .lockup h4, .lockup h5 { width: 120px; } .lockup h4 { margin-bottom: 2em; } .right-lockup { position: absolute; top: 50%; right: 30px; margin-top: -50px; } .right-lockup h1, .right-lockup h2, .right-lockup h3, .right-lockup h4, .right-lockup h5 { text-align: left; } .right-lockup a.cta { position: absolute; right: 40px; } .expand-lockup { position: absolute; right: 100px; top: -30px; } .expand-lockup ul { width: 15px; height: 15px; position: absolute; left: -30px; top: 50%; margin-top: -8px; -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); -webkit-transition: 0.32s cubic-bezier(0.52, 0.01, 0.16, 1); -moz-transition: 0.32s cubic-bezier(0.52, 0.01, 0.16, 1); transition: 0.32s cubic-bezier(0.52, 0.01, 0.16, 1); background: url("../img/ui/expand.svg") no-repeat center center/90%; } .expand-lockup small { text-align: left; padding-right: 80px; white-space: nowrap; } .expand-lockup small::after { position: absolute; right: 0; top: 40%; content: ''; width: 50%; height: 1px; background-color: #f7f3f2; } .expand-lockup:hover ul { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .transition-overflow { overflow: hidden; } .oversized { -webkit-transform: scale(1.15); -moz-transform: scale(1.15); -ms-transform: scale(1.15); -o-transform: scale(1.15); transform: scale(1.15); } .main-title { top: 0; height: 100%; width: 100%; } .main-title .main-lockup { margin-top: 50px; } .main-title .main-lockup .extender::before { background-color: rgba(247, 243, 242, 0.3); } .main-title .main-lockup h1.timeout-split { -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } .main-title:not(.active) h1.timeout-split .letter-split span { -webkit-transform: translateY(13px) !important; -moz-transform: translateY(13px) !important; -ms-transform: translateY(13px) !important; -o-transform: translateY(13px) !important; transform: translateY(13px) !important; color: rgba(247, 243, 242, 0); } .main-title.active .main-lockup h5, .main-title.active .main-lockup h1, .main-title.active .main-lockup h4, .main-title.active .main-lockup h2, .main-title.active .main-lockup p, .main-title.active .main-lockup small { color: #f7f3f2; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .main-title.active .main-lockup h5:nth-child(1), .main-title.active .main-lockup h1:nth-child(1), .main-title.active .main-lockup h4:nth-child(1), .main-title.active .main-lockup h2:nth-child(1), .main-title.active .main-lockup p:nth-child(1), .main-title.active .main-lockup small:nth-child(1) { -webkit-transition-delay: 0s; -moz-transition-delay: 0s; transition-delay: 0s; } .main-title.active .main-lockup h5:nth-child(2), .main-title.active .main-lockup h1:nth-child(2), .main-title.active .main-lockup h4:nth-child(2), .main-title.active .main-lockup h2:nth-child(2), .main-title.active .main-lockup p:nth-child(2), .main-title.active .main-lockup small:nth-child(2) { -webkit-transition-delay: 0.13s; -moz-transition-delay: 0.13s; transition-delay: 0.13s; } .main-title.active .main-lockup h5:nth-child(3), .main-title.active .main-lockup h1:nth-child(3), .main-title.active .main-lockup h4:nth-child(3), .main-title.active .main-lockup h2:nth-child(3), .main-title.active .main-lockup p:nth-child(3), .main-title.active .main-lockup small:nth-child(3) { -webkit-transition-delay: 0.26s; -moz-transition-delay: 0.26s; transition-delay: 0.26s; } .main-title.active .main-lockup h5:nth-child(4), .main-title.active .main-lockup h1:nth-child(4), .main-title.active .main-lockup h4:nth-child(4), .main-title.active .main-lockup h2:nth-child(4), .main-title.active .main-lockup p:nth-child(4), .main-title.active .main-lockup small:nth-child(4) { -webkit-transition-delay: 0.39s; -moz-transition-delay: 0.39s; transition-delay: 0.39s; } .main-title.active .main-lockup h5:nth-child(5), .main-title.active .main-lockup h1:nth-child(5), .main-title.active .main-lockup h4:nth-child(5), .main-title.active .main-lockup h2:nth-child(5), .main-title.active .main-lockup p:nth-child(5), .main-title.active .main-lockup small:nth-child(5) { -webkit-transition-delay: 0.52s; -moz-transition-delay: 0.52s; transition-delay: 0.52s; } .main-title.active .main-lockup h5:nth-child(6), .main-title.active .main-lockup h1:nth-child(6), .main-title.active .main-lockup h4:nth-child(6), .main-title.active .main-lockup h2:nth-child(6), .main-title.active .main-lockup p:nth-child(6), .main-title.active .main-lockup small:nth-child(6) { -webkit-transition-delay: 0.65s; -moz-transition-delay: 0.65s; transition-delay: 0.65s; } .main-title.active .main-lockup h5:nth-child(7), .main-title.active .main-lockup h1:nth-child(7), .main-title.active .main-lockup h4:nth-child(7), .main-title.active .main-lockup h2:nth-child(7), .main-title.active .main-lockup p:nth-child(7), .main-title.active .main-lockup small:nth-child(7) { -webkit-transition-delay: 0.78s; -moz-transition-delay: 0.78s; transition-delay: 0.78s; } .main-title.active .main-lockup h5:nth-child(8), .main-title.active .main-lockup h1:nth-child(8), .main-title.active .main-lockup h4:nth-child(8), .main-title.active .main-lockup h2:nth-child(8), .main-title.active .main-lockup p:nth-child(8), .main-title.active .main-lockup small:nth-child(8) { -webkit-transition-delay: 0.91s; -moz-transition-delay: 0.91s; transition-delay: 0.91s; } .main-title.active .main-lockup h5:nth-child(9), .main-title.active .main-lockup h1:nth-child(9), .main-title.active .main-lockup h4:nth-child(9), .main-title.active .main-lockup h2:nth-child(9), .main-title.active .main-lockup p:nth-child(9), .main-title.active .main-lockup small:nth-child(9) { -webkit-transition-delay: 1.04s; -moz-transition-delay: 1.04s; transition-delay: 1.04s; } .main-title.active .main-lockup h5:nth-child(10), .main-title.active .main-lockup h1:nth-child(10), .main-title.active .main-lockup h4:nth-child(10), .main-title.active .main-lockup h2:nth-child(10), .main-title.active .main-lockup p:nth-child(10), .main-title.active .main-lockup small:nth-child(10) { -webkit-transition-delay: 1.17s; -moz-transition-delay: 1.17s; transition-delay: 1.17s; } .main-title.active .main-lockup .arc.grey { color: rgba(247, 243, 242, 0.75); } .main-title.active .main-lockup h5.command { color: rgba(247, 243, 242, 0.5); } .main-title.active .main-lockup .marque { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); opacity: 1; } .main-title.active .main-lockup .scroll-mouse-marque, .main-title.active .main-lockup .pano-emblem { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition-delay: 1.5s; -moz-transition-delay: 1.5s; transition-delay: 1.5s; } .main-title.active .main-lockup a { -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); -webkit-transition-delay: 0.65s; -moz-transition-delay: 0.65s; transition-delay: 0.65s; } .main-title.active .main-lockup .extender::before, .main-title.active .main-lockup .extender-after::before { -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); transform: scaleY(1); -webkit-transition-delay: 0.5s; -moz-transition-delay: 0.5s; transition-delay: 0.5s; } .main-title.active .main-lockup h4:nth-child(4) { -webkit-transition-delay: 1.15s; -moz-transition-delay: 1.15s; transition-delay: 1.15s; } .main-title.active .main-lockup h5:nth-child(5) { -webkit-transition-delay: 1.3s; -moz-transition-delay: 1.3s; transition-delay: 1.3s; } main.home .main-title { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } main.home .main-title h5 { margin-bottom: 12px; } .showreel-wrap { position: fixed; width: 100%; height: 100%; display: none; -webkit-transition: 0.45s; -moz-transition: 0.45s; transition: 0.45s; opacity: 0; z-index: 9999999; } .showreel-wrap.active { opacity: 1; } .showreel-wrap .home-player { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .showreel-wrap .close-btn { position: absolute; position: absolute; right: 40px; top: 48%; } .main-lockup .marque { top: -70px; position: absolute; left: 50%; opacity: 0; -webkit-transform: translateY(10px); -moz-transform: translateY(10px); -ms-transform: translateY(10px); -o-transform: translateY(10px); transform: translateY(10px); -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transition: 0.45s cubic-bezier(0.52, 0.01, 0.16, 1) 0.55s; -moz-transition: 0.45s cubic-bezier(0.52, 0.01, 0.16, 1) 0.55s; transition: 0.45s cubic-bezier(0.52, 0.01, 0.16, 1) 0.55s; } .main-lockup .scroll-mouse-marque, .main-lockup .pano-emblem { -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transition: 0.35s cubic-bezier(0.52, 0.01, 0.16, 1); -moz-transition: 0.35s cubic-bezier(0.52, 0.01, 0.16, 1); transition: 0.35s cubic-bezier(0.52, 0.01, 0.16, 1); } .main-lockup .anchor-overflow { overflow: hidden; } .main-lockup .anchor-overflow a { -webkit-transform: translateY(110%); -moz-transform: translateY(110%); -ms-transform: translateY(110%); -o-transform: translateY(110%); transform: translateY(110%); -webkit-transition: 0.65s cubic-bezier(0.52, 0.01, 0.16, 1); -moz-transition: 0.65s cubic-bezier(0.52, 0.01, 0.16, 1); transition: 0.65s cubic-bezier(0.52, 0.01, 0.16, 1); } .main-lockup h4 { margin-bottom: 6px; } .main-lockup h5, .main-lockup h1, .main-lockup h4, .main-lockup h2, .main-lockup small, .main-lockup p { color: rgba(247, 243, 242, 0); -webkit-transition: 0.55s cubic-bezier(0.52, 0.01, 0.16, 1); -moz-transition: 0.55s cubic-bezier(0.52, 0.01, 0.16, 1); transition: 0.55s cubic-bezier(0.52, 0.01, 0.16, 1); -webkit-transform: translateY(16px); -moz-transform: translateY(16px); -ms-transform: translateY(16px); -o-transform: translateY(16px); transform: translateY(16px); width: 100%; left: 0; } .main-lockup h5:nth-child(1), .main-lockup h1:nth-child(1), .main-lockup h4:nth-child(1), .main-lockup h2:nth-child(1), .main-lockup small:nth-child(1), .main-lockup p:nth-child(1) { -webkit-transition-delay: 0s; -moz-transition-delay: 0s; transition-delay: 0s; } .main-lockup h5:nth-child(2), .main-lockup h1:nth-child(2), .main-lockup h4:nth-child(2), .main-lockup h2:nth-child(2), .main-lockup small:nth-child(2), .main-lockup p:nth-child(2) { -webkit-transition-delay: 0.03s; -moz-transition-delay: 0.03s; transition-delay: 0.03s; } .main-lockup h5:nth-child(3), .main-lockup h1:nth-child(3), .main-lockup h4:nth-child(3), .main-lockup h2:nth-child(3), .main-lockup small:nth-child(3), .main-lockup p:nth-child(3) { -webkit-transition-delay: 0.06s; -moz-transition-delay: 0.06s; transition-delay: 0.06s; } .main-lockup h5:nth-child(4), .main-lockup h1:nth-child(4), .main-lockup h4:nth-child(4), .main-lockup h2:nth-child(4), .main-lockup small:nth-child(4), .main-lockup p:nth-child(4) { -webkit-transition-delay: 0.09s; -moz-transition-delay: 0.09s; transition-delay: 0.09s; } .main-lockup h5:nth-child(5), .main-lockup h1:nth-child(5), .main-lockup h4:nth-child(5), .main-lockup h2:nth-child(5), .main-lockup small:nth-child(5), .main-lockup p:nth-child(5) { -webkit-transition-delay: 0.12s; -moz-transition-delay: 0.12s; transition-delay: 0.12s; } .main-lockup h5:nth-child(6), .main-lockup h1:nth-child(6), .main-lockup h4:nth-child(6), .main-lockup h2:nth-child(6), .main-lockup small:nth-child(6), .main-lockup p:nth-child(6) { -webkit-transition-delay: 0.15s; -moz-transition-delay: 0.15s; transition-delay: 0.15s; } .main-lockup h5:nth-child(7), .main-lockup h1:nth-child(7), .main-lockup h4:nth-child(7), .main-lockup h2:nth-child(7), .main-lockup small:nth-child(7), .main-lockup p:nth-child(7) { -webkit-transition-delay: 0.18s; -moz-transition-delay: 0.18s; transition-delay: 0.18s; } .main-lockup h5:nth-child(8), .main-lockup h1:nth-child(8), .main-lockup h4:nth-child(8), .main-lockup h2:nth-child(8), .main-lockup small:nth-child(8), .main-lockup p:nth-child(8) { -webkit-transition-delay: 0.21s; -moz-transition-delay: 0.21s; transition-delay: 0.21s; } .main-lockup h5:nth-child(9), .main-lockup h1:nth-child(9), .main-lockup h4:nth-child(9), .main-lockup h2:nth-child(9), .main-lockup small:nth-child(9), .main-lockup p:nth-child(9) { -webkit-transition-delay: 0.24s; -moz-transition-delay: 0.24s; transition-delay: 0.24s; } .main-lockup h5:nth-child(10), .main-lockup h1:nth-child(10), .main-lockup h4:nth-child(10), .main-lockup h2:nth-child(10), .main-lockup small:nth-child(10), .main-lockup p:nth-child(10) { -webkit-transition-delay: 0.27s; -moz-transition-delay: 0.27s; transition-delay: 0.27s; } .main-lockup.no-trans h1 { -webkit-transition: none !important; -moz-transition: none !important; transition: none !important; } .main-lockup.no-trans h1 span { -webkit-transition: none !important; -moz-transition: none !important; transition: none !important; } .main-lockup .arc.grey { color: rgba(247, 243, 242, 0); } .main-lockup .extender::before, .main-lockup .extender-after::before { -webkit-transform: scaleY(0); -moz-transform: scaleY(0); -ms-transform: scaleY(0); -o-transform: scaleY(0); transform: scaleY(0); } .main-lockup.active-default h5, .main-lockup.active-default h1, .main-lockup.active-default h4, .main-lockup.active-default h2, .main-lockup.active-default p, .main-lockup.active-default small { color: #f7f3f2; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .main-lockup.active-default h5:nth-child(1), .main-lockup.active-default h1:nth-child(1), .main-lockup.active-default h4:nth-child(1), .main-lockup.active-default h2:nth-child(1), .main-lockup.active-default p:nth-child(1), .main-lockup.active-default small:nth-child(1) { -webkit-transition-delay: 0s; -moz-transition-delay: 0s; transition-delay: 0s; } .main-lockup.active-default h5:nth-child(2), .main-lockup.active-default h1:nth-child(2), .main-lockup.active-default h4:nth-child(2), .main-lockup.active-default h2:nth-child(2), .main-lockup.active-default p:nth-child(2), .main-lockup.active-default small:nth-child(2) { -webkit-transition-delay: 0.13s; -moz-transition-delay: 0.13s; transition-delay: 0.13s; } .main-lockup.active-default h5:nth-child(3), .main-lockup.active-default h1:nth-child(3), .main-lockup.active-default h4:nth-child(3), .main-lockup.active-default h2:nth-child(3), .main-lockup.active-default p:nth-child(3), .main-lockup.active-default small:nth-child(3) { -webkit-transition-delay: 0.26s; -moz-transition-delay: 0.26s; transition-delay: 0.26s; } .main-lockup.active-default h5:nth-child(4), .main-lockup.active-default h1:nth-child(4), .main-lockup.active-default h4:nth-child(4), .main-lockup.active-default h2:nth-child(4), .main-lockup.active-default p:nth-child(4), .main-lockup.active-default small:nth-child(4) { -webkit-transition-delay: 0.39s; -moz-transition-delay: 0.39s; transition-delay: 0.39s; } .main-lockup.active-default h5:nth-child(5), .main-lockup.active-default h1:nth-child(5), .main-lockup.active-default h4:nth-child(5), .main-lockup.active-default h2:nth-child(5), .main-lockup.active-default p:nth-child(5), .main-lockup.active-default small:nth-child(5) { -webkit-transition-delay: 0.52s; -moz-transition-delay: 0.52s; transition-delay: 0.52s; } .main-lockup.active-default h5:nth-child(6), .main-lockup.active-default h1:nth-child(6), .main-lockup.active-default h4:nth-child(6), .main-lockup.active-default h2:nth-child(6), .main-lockup.active-default p:nth-child(6), .main-lockup.active-default small:nth-child(6) { -webkit-transition-delay: 0.65s; -moz-transition-delay: 0.65s; transition-delay: 0.65s; } .main-lockup.active-default h5:nth-child(7), .main-lockup.active-default h1:nth-child(7), .main-lockup.active-default h4:nth-child(7), .main-lockup.active-default h2:nth-child(7), .main-lockup.active-default p:nth-child(7), .main-lockup.active-default small:nth-child(7) { -webkit-transition-delay: 0.78s; -moz-transition-delay: 0.78s; transition-delay: 0.78s; } .main-lockup.active-default h5:nth-child(8), .main-lockup.active-default h1:nth-child(8), .main-lockup.active-default h4:nth-child(8), .main-lockup.active-default h2:nth-child(8), .main-lockup.active-default p:nth-child(8), .main-lockup.active-default small:nth-child(8) { -webkit-transition-delay: 0.91s; -moz-transition-delay: 0.91s; transition-delay: 0.91s; } .main-lockup.active-default h5:nth-child(9), .main-lockup.active-default h1:nth-child(9), .main-lockup.active-default h4:nth-child(9), .main-lockup.active-default h2:nth-child(9), .main-lockup.active-default p:nth-child(9), .main-lockup.active-default small:nth-child(9) { -webkit-transition-delay: 1.04s; -moz-transition-delay: 1.04s; transition-delay: 1.04s; } .main-lockup.active-default h5:nth-child(10), .main-lockup.active-default h1:nth-child(10), .main-lockup.active-default h4:nth-child(10), .main-lockup.active-default h2:nth-child(10), .main-lockup.active-default p:nth-child(10), .main-lockup.active-default small:nth-child(10) { -webkit-transition-delay: 1.17s; -moz-transition-delay: 1.17s; transition-delay: 1.17s; } .main-lockup.active-default .arc.grey { color: rgba(247, 243, 242, 0.75); } .main-lockup.active-default h5.command { color: rgba(247, 243, 242, 0.5); } .main-lockup.active-default .marque { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); opacity: 1; } .main-lockup.active-default .scroll-mouse-marque, .main-lockup.active-default .pano-emblem { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition-delay: 1.5s; -moz-transition-delay: 1.5s; transition-delay: 1.5s; } .main-lockup.active-default a { -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); -webkit-transition-delay: 0.65s; -moz-transition-delay: 0.65s; transition-delay: 0.65s; } .main-lockup.active-default .extender::before, .main-lockup.active-default .extender-after::before { -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); transform: scaleY(1); -webkit-transition-delay: 0.5s; -moz-transition-delay: 0.5s; transition-delay: 0.5s; } .arc-wrap { -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); -ms-transform: translateY(-20px); -o-transform: translateY(-20px); transform: translateY(-20px); } .arc-wrap.smaller { -webkit-transform: scale(0.65) translateY(-20px); -moz-transform: scale(0.65) translateY(-20px); -ms-transform: scale(0.65) translateY(-20px); -o-transform: scale(0.65) translateY(-20px); transform: scale(0.65) translateY(-20px); } .arc-wrap.large { -webkit-transform: scale(1.4) translateY(-20px); -moz-transform: scale(1.4) translateY(-20px); -ms-transform: scale(1.4) translateY(-20px); -o-transform: scale(1.4) translateY(-20px); transform: scale(1.4) translateY(-20px); } .arc-wrap.large h5 { font-size: 10px; } .extender, .extender-after { padding-top: 90px; } .extender::before, .extender-after::before { content: ''; position: absolute; width: 1px; left: 50%; top: 0; background-color: #f7f3f2; height: 55%; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); transform: scaleY(1); -webkit-transition: 0.55s cubic-bezier(0.52, 0.01, 0.16, 1); -moz-transition: 0.55s cubic-bezier(0.52, 0.01, 0.16, 1); transition: 0.55s cubic-bezier(0.52, 0.01, 0.16, 1); } .title-extender::after { content: ''; position: absolute; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 6px; background-color: #f7f3f2; left: 50%; bottom: -20px; } .title-extender::before { height: 45%; background-color: rgba(247, 243, 242, 0.25); } .extender-after { padding-top: 0; padding-bottom: 100px; } .extender-after::before { top: auto; bottom: 0; height: 20%; } .mini-social { display: inline-block; } .mini-social li { margin: 0 10px; float: left; } .sound-icon ul { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .sound-icon li { position: absolute; top: 0; width: 1px; height: 100%; background-color: rgba(247, 243, 242, 0.26); -webkit-transition: 0.31s cubic-bezier(0.62, 0.02, 0.34, 1); -moz-transition: 0.31s cubic-bezier(0.62, 0.02, 0.34, 1); transition: 0.31s cubic-bezier(0.62, 0.02, 0.34, 1); } .sound-icon li span { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(247, 243, 242, 0.7); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-animation: scaleYUpDown 0.8s cubic-bezier(0.52, 0.01, 0.16, 1) alternate infinite; -moz-animation: scaleYUpDown 0.8s cubic-bezier(0.52, 0.01, 0.16, 1) alternate infinite; animation: scaleYUpDown 0.8s cubic-bezier(0.52, 0.01, 0.16, 1) alternate infinite; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .sound-icon li span { -webkit-animation: none !important; -moz-animation: none !important; animation: none !important; } } .sound-icon li:nth-child(1) { left: 0; } .sound-icon li:nth-child(2) { left: 50%; } .sound-icon li:nth-child(2) span { -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; animation-delay: 0.5s; } .sound-icon li:nth-child(3) { left: 100%; } .sound-icon li:nth-child(3) span { -webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; animation-delay: 0.2s; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .sound-icon li:nth-child(1) span { -webkit-transform: scaleY(0.3); -moz-transform: scaleY(0.3); -ms-transform: scaleY(0.3); -o-transform: scaleY(0.3); transform: scaleY(0.3); } .sound-icon li:nth-child(3) span { -webkit-transform: scaleY(0.75); -moz-transform: scaleY(0.75); -ms-transform: scaleY(0.75); -o-transform: scaleY(0.75); transform: scaleY(0.75); } } .sound-icon:hover li { background-color: rgba(247, 243, 242, 0.5); } .location-icon { background: url("../img/ui/location-wire.svg") no-repeat center center/90%; } .mail-icon { background: url("../img/ui/mail.svg") no-repeat center center/100%; } .pano-icon { width: 80px; height: 80px; margin: -40px 0 0 -40px; } .pano-icon:hover { cursor: pointer; } .pano-icon:hover .ring-icon-content::before { -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -ms-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1); } .pano-icon:hover .ring-icon-content h4 span, .pano-icon:hover .ring-icon-content h5 span { color: white; } .pano-icon .rings-icon { -webkit-transition: 0.45s cubic-bezier(0.52, 0.01, 0.16, 1); -moz-transition: 0.45s cubic-bezier(0.52, 0.01, 0.16, 1); transition: 0.45s cubic-bezier(0.52, 0.01, 0.16, 1); } @media only screen and (min-width: 1500px) { .pano-icon .rings-icon { -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -ms-transform: scale(1.3); -o-transform: scale(1.3); transform: scale(1.3); } } @media only screen and (min-width: 1700px) { .pano-icon .rings-icon { -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -ms-transform: scale(1.3); -o-transform: scale(1.3); transform: scale(1.3); } } .rings-icon { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .rings-icon::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("../img/ui/close-rings.svg") no-repeat center center/cover; -webkit-transition: 0.45s cubic-bezier(0.52, 0.01, 0.16, 1); -moz-transition: 0.45s cubic-bezier(0.52, 0.01, 0.16, 1); transition: 0.45s cubic-bezier(0.52, 0.01, 0.16, 1); } .rings-icon:hover::before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .ring-icon-content { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; left: 50%; top: -20%; padding-top: 12px; white-space: nowrap; } .ring-icon-content h4, .ring-icon-content h5 { text-align: left; } .ring-icon-content h4 span, .ring-icon-content h5 span { color: rgba(255, 255, 255, 0); display: inline; } .ring-icon-content h4 span:nth-child(1), .ring-icon-content h5 span:nth-child(1) { -webkit-transition: 0.1s 0.03s; -moz-transition: 0.1s 0.03s; transition: 0.1s 0.03s; } .ring-icon-content h4 span:nth-child(2), .ring-icon-content h5 span:nth-child(2) { -webkit-transition: 0.1s 0.06s; -moz-transition: 0.1s 0.06s; transition: 0.1s 0.06s; } .ring-icon-content h4 span:nth-child(3), .ring-icon-content h5 span:nth-child(3) { -webkit-transition: 0.1s 0.09s; -moz-transition: 0.1s 0.09s; transition: 0.1s 0.09s; } .ring-icon-content h4 span:nth-child(4), .ring-icon-content h5 span:nth-child(4) { -webkit-transition: 0.1s 0.12s; -moz-transition: 0.1s 0.12s; transition: 0.1s 0.12s; } .ring-icon-content h4 span:nth-child(5), .ring-icon-content h5 span:nth-child(5) { -webkit-transition: 0.1s 0.15s; -moz-transition: 0.1s 0.15s; transition: 0.1s 0.15s; } .ring-icon-content h4 span:nth-child(6), .ring-icon-content h5 span:nth-child(6) { -webkit-transition: 0.1s 0.18s; -moz-transition: 0.1s 0.18s; transition: 0.1s 0.18s; } .ring-icon-content h4 span:nth-child(7), .ring-icon-content h5 span:nth-child(7) { -webkit-transition: 0.1s 0.21s; -moz-transition: 0.1s 0.21s; transition: 0.1s 0.21s; } .ring-icon-content h4 span:nth-child(8), .ring-icon-content h5 span:nth-child(8) { -webkit-transition: 0.1s 0.24s; -moz-transition: 0.1s 0.24s; transition: 0.1s 0.24s; } .ring-icon-content h4 span:nth-child(9), .ring-icon-content h5 span:nth-child(9) { -webkit-transition: 0.1s 0.27s; -moz-transition: 0.1s 0.27s; transition: 0.1s 0.27s; } .ring-icon-content h4 span:nth-child(10), .ring-icon-content h5 span:nth-child(10) { -webkit-transition: 0.1s 0.3s; -moz-transition: 0.1s 0.3s; transition: 0.1s 0.3s; } .ring-icon-content h4 span:nth-child(11), .ring-icon-content h5 span:nth-child(11) { -webkit-transition: 0.1s 0.33s; -moz-transition: 0.1s 0.33s; transition: 0.1s 0.33s; } .ring-icon-content h4 span:nth-child(12), .ring-icon-content h5 span:nth-child(12) { -webkit-transition: 0.1s 0.36s; -moz-transition: 0.1s 0.36s; transition: 0.1s 0.36s; } .ring-icon-content h4 span:nth-child(13), .ring-icon-content h5 span:nth-child(13) { -webkit-transition: 0.1s 0.39s; -moz-transition: 0.1s 0.39s; transition: 0.1s 0.39s; } .ring-icon-content h4 span:nth-child(14), .ring-icon-content h5 span:nth-child(14) { -webkit-transition: 0.1s 0.42s; -moz-transition: 0.1s 0.42s; transition: 0.1s 0.42s; } .ring-icon-content h4 span:nth-child(15), .ring-icon-content h5 span:nth-child(15) { -webkit-transition: 0.1s 0.45s; -moz-transition: 0.1s 0.45s; transition: 0.1s 0.45s; } .ring-icon-content h4 span:nth-child(16), .ring-icon-content h5 span:nth-child(16) { -webkit-transition: 0.1s 0.48s; -moz-transition: 0.1s 0.48s; transition: 0.1s 0.48s; } .ring-icon-content h4 span:nth-child(17), .ring-icon-content h5 span:nth-child(17) { -webkit-transition: 0.1s 0.51s; -moz-transition: 0.1s 0.51s; transition: 0.1s 0.51s; } .ring-icon-content h4 span:nth-child(18), .ring-icon-content h5 span:nth-child(18) { -webkit-transition: 0.1s 0.54s; -moz-transition: 0.1s 0.54s; transition: 0.1s 0.54s; } .ring-icon-content h4 span:nth-child(19), .ring-icon-content h5 span:nth-child(19) { -webkit-transition: 0.1s 0.57s; -moz-transition: 0.1s 0.57s; transition: 0.1s 0.57s; } .ring-icon-content h4 span:nth-child(20), .ring-icon-content h5 span:nth-child(20) { -webkit-transition: 0.1s 0.6s; -moz-transition: 0.1s 0.6s; transition: 0.1s 0.6s; } .ring-icon-content h4 span:nth-child(21), .ring-icon-content h5 span:nth-child(21) { -webkit-transition: 0.1s 0.63s; -moz-transition: 0.1s 0.63s; transition: 0.1s 0.63s; } .ring-icon-content h4 span:nth-child(22), .ring-icon-content h5 span:nth-child(22) { -webkit-transition: 0.1s 0.66s; -moz-transition: 0.1s 0.66s; transition: 0.1s 0.66s; } .ring-icon-content h4 span:nth-child(23), .ring-icon-content h5 span:nth-child(23) { -webkit-transition: 0.1s 0.69s; -moz-transition: 0.1s 0.69s; transition: 0.1s 0.69s; } .ring-icon-content h4 span:nth-child(24), .ring-icon-content h5 span:nth-child(24) { -webkit-transition: 0.1s 0.72s; -moz-transition: 0.1s 0.72s; transition: 0.1s 0.72s; } .ring-icon-content h4 span:nth-child(25), .ring-icon-content h5 span:nth-child(25) { -webkit-transition: 0.1s 0.75s; -moz-transition: 0.1s 0.75s; transition: 0.1s 0.75s; } .ring-icon-content h4 span:nth-child(26), .ring-icon-content h5 span:nth-child(26) { -webkit-transition: 0.1s 0.78s; -moz-transition: 0.1s 0.78s; transition: 0.1s 0.78s; } .ring-icon-content h4 span:nth-child(27), .ring-icon-content h5 span:nth-child(27) { -webkit-transition: 0.1s 0.81s; -moz-transition: 0.1s 0.81s; transition: 0.1s 0.81s; } .ring-icon-content h4 span:nth-child(28), .ring-icon-content h5 span:nth-child(28) { -webkit-transition: 0.1s 0.84s; -moz-transition: 0.1s 0.84s; transition: 0.1s 0.84s; } .ring-icon-content h4 span:nth-child(29), .ring-icon-content h5 span:nth-child(29) { -webkit-transition: 0.1s 0.87s; -moz-transition: 0.1s 0.87s; transition: 0.1s 0.87s; } .ring-icon-content h4 span:nth-child(30), .ring-icon-content h5 span:nth-child(30) { -webkit-transition: 0.1s 0.9s; -moz-transition: 0.1s 0.9s; transition: 0.1s 0.9s; } .ring-icon-content h4 span:nth-child(31), .ring-icon-content h5 span:nth-child(31) { -webkit-transition: 0.1s 0.93s; -moz-transition: 0.1s 0.93s; transition: 0.1s 0.93s; } .ring-icon-content h4 span:nth-child(32), .ring-icon-content h5 span:nth-child(32) { -webkit-transition: 0.1s 0.96s; -moz-transition: 0.1s 0.96s; transition: 0.1s 0.96s; } .ring-icon-content h4 span:nth-child(33), .ring-icon-content h5 span:nth-child(33) { -webkit-transition: 0.1s 0.99s; -moz-transition: 0.1s 0.99s; transition: 0.1s 0.99s; } .ring-icon-content h4 span:nth-child(34), .ring-icon-content h5 span:nth-child(34) { -webkit-transition: 0.1s 1.02s; -moz-transition: 0.1s 1.02s; transition: 0.1s 1.02s; } .ring-icon-content h4 span:nth-child(35), .ring-icon-content h5 span:nth-child(35) { -webkit-transition: 0.1s 1.05s; -moz-transition: 0.1s 1.05s; transition: 0.1s 1.05s; } .ring-icon-content h4 span:nth-child(36), .ring-icon-content h5 span:nth-child(36) { -webkit-transition: 0.1s 1.08s; -moz-transition: 0.1s 1.08s; transition: 0.1s 1.08s; } .ring-icon-content h4 span:nth-child(37), .ring-icon-content h5 span:nth-child(37) { -webkit-transition: 0.1s 1.11s; -moz-transition: 0.1s 1.11s; transition: 0.1s 1.11s; } .ring-icon-content h4 span:nth-child(38), .ring-icon-content h5 span:nth-child(38) { -webkit-transition: 0.1s 1.14s; -moz-transition: 0.1s 1.14s; transition: 0.1s 1.14s; } .ring-icon-content h4 span:nth-child(39), .ring-icon-content h5 span:nth-child(39) { -webkit-transition: 0.1s 1.17s; -moz-transition: 0.1s 1.17s; transition: 0.1s 1.17s; } .ring-icon-content h4 span:nth-child(40), .ring-icon-content h5 span:nth-child(40) { -webkit-transition: 0.1s 1.2s; -moz-transition: 0.1s 1.2s; transition: 0.1s 1.2s; } .ring-icon-content h4 span:nth-child(41), .ring-icon-content h5 span:nth-child(41) { -webkit-transition: 0.1s 1.23s; -moz-transition: 0.1s 1.23s; transition: 0.1s 1.23s; } .ring-icon-content h4 span:nth-child(42), .ring-icon-content h5 span:nth-child(42) { -webkit-transition: 0.1s 1.26s; -moz-transition: 0.1s 1.26s; transition: 0.1s 1.26s; } .ring-icon-content h4 span:nth-child(43), .ring-icon-content h5 span:nth-child(43) { -webkit-transition: 0.1s 1.29s; -moz-transition: 0.1s 1.29s; transition: 0.1s 1.29s; } .ring-icon-content h4 span:nth-child(44), .ring-icon-content h5 span:nth-child(44) { -webkit-transition: 0.1s 1.32s; -moz-transition: 0.1s 1.32s; transition: 0.1s 1.32s; } .ring-icon-content h4 span:nth-child(45), .ring-icon-content h5 span:nth-child(45) { -webkit-transition: 0.1s 1.35s; -moz-transition: 0.1s 1.35s; transition: 0.1s 1.35s; } .ring-icon-content h4 span:nth-child(46), .ring-icon-content h5 span:nth-child(46) { -webkit-transition: 0.1s 1.38s; -moz-transition: 0.1s 1.38s; transition: 0.1s 1.38s; } .ring-icon-content h4 span:nth-child(47), .ring-icon-content h5 span:nth-child(47) { -webkit-transition: 0.1s 1.41s; -moz-transition: 0.1s 1.41s; transition: 0.1s 1.41s; } .ring-icon-content h4 span:nth-child(48), .ring-icon-content h5 span:nth-child(48) { -webkit-transition: 0.1s 1.44s; -moz-transition: 0.1s 1.44s; transition: 0.1s 1.44s; } .ring-icon-content h4 span:nth-child(49), .ring-icon-content h5 span:nth-child(49) { -webkit-transition: 0.1s 1.47s; -moz-transition: 0.1s 1.47s; transition: 0.1s 1.47s; } .ring-icon-content h4 span:nth-child(50), .ring-icon-content h5 span:nth-child(50) { -webkit-transition: 0.1s 1.5s; -moz-transition: 0.1s 1.5s; transition: 0.1s 1.5s; } .ring-icon-content::before { content: ''; position: absolute; top: 0; left: 0; width: 70px; height: 1px; background-color: #FFF; -webkit-transform: scaleX(0); -moz-transform: scaleX(0); -ms-transform: scaleX(0); -o-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transition: 0.45s cubic-bezier(0.52, 0.01, 0.16, 1); -moz-transition: 0.45s cubic-bezier(0.52, 0.01, 0.16, 1); transition: 0.45s cubic-bezier(0.52, 0.01, 0.16, 1); } .overlay-nodes .ring-node-icon, .article-icon { width: 32px; height: 32px; margin: -16px 0 0 -16px; } .overlay-nodes .pano-icon:nth-child(1) .ring-node-icon, .article-icon[data-icon-id="1"] { width: 24px; height: 28px; margin: -14px 0 0 -12px; background: url("../img/ui/news-icon.svg") no-repeat center center/100%; } .overlay-nodes .pano-icon:nth-child(2) .ring-node-icon, .article-icon[data-icon-id="2"] { background: url("../img/ui/logo.svg") no-repeat center center/100%; } .overlay-nodes .pano-icon:nth-child(3) .ring-node-icon, .article-icon[data-icon-id="3"] { background: url("../img/ui/pano-icon-1.svg") no-repeat center center/100%; } .overlay-nodes .pano-icon:nth-child(4) .ring-node-icon, .article-icon[data-icon-id="4"] { background: url("../img/ui/pano-icon-2.svg") no-repeat center center/100%; } .overlay-nodes .pano-icon:nth-child(5) .ring-node-icon, .article-icon[data-icon-id="5"] { background: url("../img/ui/pano-icon-3.svg") no-repeat center center/100%; } .overlay-nodes .pano-icon:nth-child(6) .ring-node-icon, .article-icon[data-icon-id="6"] { background: url("../img/ui/pano-icon-4.svg") no-repeat center center/100%; } .pano-overlay-content .article-icon { width: 30px; height: 36px; margin: -18px 0 0 -15px; top: -40px; } [data-type="info"] .ring-node-icon { width: 40px; height: 40px; margin: -20px 0 0 -20px; background: url("../img/ui/logo.svg") no-repeat center center/100%; } .movie-bars li { position: absolute; left: 0; width: 100%; height: 7vw; background-color: #17181c; -webkit-transition: 1.05s cubic-bezier(0.52, 0.01, 0.16, 1); -moz-transition: 1.05s cubic-bezier(0.52, 0.01, 0.16, 1); transition: 1.05s cubic-bezier(0.52, 0.01, 0.16, 1); } .movie-bars li:nth-child(1) { height: 8.5vw; } .threed-panorama.content-active .movie-bars li { -webkit-transform: scaleY(5); -moz-transform: scaleY(5); -ms-transform: scaleY(5); -o-transform: scaleY(5); transform: scaleY(5); } .movie-bars li:nth-child(1) { top: 0; -webkit-transform-origin: 0 2%; -moz-transform-origin: 0 2%; -ms-transform-origin: 0 2%; -o-transform-origin: 0 2%; transform-origin: 0 2%; -webkit-transform: translateY(-105%); -moz-transform: translateY(-105%); -ms-transform: translateY(-105%); -o-transform: translateY(-105%); transform: translateY(-105%); } .movie-bars li:nth-child(2) { bottom: 0; -webkit-transform-origin: 0 98%; -moz-transform-origin: 0 98%; -ms-transform-origin: 0 98%; -o-transform-origin: 0 98%; transform-origin: 0 98%; -webkit-transform: translateY(105%); -moz-transform: translateY(105%); -ms-transform: translateY(105%); -o-transform: translateY(105%); transform: translateY(105%); } .movie-bars.active li { -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } .pano-overlay-content { display: none; opacity: 0; -webkit-transition: 0.35s; -moz-transition: 0.35s; transition: 0.35s; -webkit-transform: translateY(10px); -moz-transform: translateY(10px); -ms-transform: translateY(10px); -o-transform: translateY(10px); transform: translateY(10px); } .pano-overlay-content .ring-node-icon { top: -50px; } .pano-overlay-content > div { margin-top: 40px; } .pano-overlay-content .mask-letter-wrap { -webkit-transform: scale(1) translateY(-10%); -moz-transform: scale(1) translateY(-10%); -ms-transform: scale(1) translateY(-10%); -o-transform: scale(1) translateY(-10%); transform: scale(1) translateY(-10%); opacity: 0.5; } .pano-overlay-content.generic-bg { -webkit-transform: scale(1.13); -moz-transform: scale(1.13); -ms-transform: scale(1.13); -o-transform: scale(1.13); transform: scale(1.13); } .pano-overlay-content .close-btn { margin: 2.5em auto 0; } .pano-overlay-content p { opacity: 0; left: 50%; height: 20px; width: 300px; -webkit-transition: 0.45s 1.3s; -moz-transition: 0.45s 1.3s; transition: 0.45s 1.3s; -webkit-transform: translateX(140px) translateY(25px); -moz-transform: translateX(140px) translateY(25px); -ms-transform: translateX(140px) translateY(25px); -o-transform: translateX(140px) translateY(25px); transform: translateX(140px) translateY(25px); text-align: left; font-size: 0.75em; margin: 0; } @media only screen and (min-width: 1600px) { .pano-overlay-content p { font-size: 0.8em; } } .pano-overlay-content p::before { -webkit-transition: 0.7s cubic-bezier(0.52, 0.01, 0.16, 1) 1.3s; -moz-transition: 0.7s cubic-bezier(0.52, 0.01, 0.16, 1) 1.3s; transition: 0.7s cubic-bezier(0.52, 0.01, 0.16, 1) 1.3s; -webkit-transform: scaleX(0); -moz-transform: scaleX(0); -ms-transform: scaleX(0); -o-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; top: 6px; content: ''; position: absolute; right: 110%; width: 110px; height: 1px; background-color: rgba(255, 255, 255, 0.2); } .threed-panorama.content-active .pano-overlay-content { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: 0.7s cubic-bezier(0.52, 0.01, 0.16, 1) 0.65s; -moz-transition: 0.7s cubic-bezier(0.52, 0.01, 0.16, 1) 0.65s; transition: 0.7s cubic-bezier(0.52, 0.01, 0.16, 1) 0.65s; } .threed-panorama.content-active .pano-overlay-content p { opacity: 1; } .threed-panorama.content-active .pano-overlay-content p::before { -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -ms-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1); } .threed-panorama.content-active .pano-overlay-content.generic-bg { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: 1.6s cubic-bezier(0.52, 0.01, 0.16, 1) 0.76s; -moz-transition: 1.6s cubic-bezier(0.52, 0.01, 0.16, 1) 0.76s; transition: 1.6s cubic-bezier(0.52, 0.01, 0.16, 1) 0.76s; } .close-btn { width: 60px; height: 60px; margin: -30px 0 0 -30px; z-index: 1; } .close-btn.close-cursor { position: absolute; top: 0; left: 0; pointer-events: none; } .close-btn.close-cursor .rings-icon { -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transition: 0.27s cubic-bezier(0.62, 0.02, 0.34, 1); -moz-transition: 0.27s cubic-bezier(0.62, 0.02, 0.34, 1); transition: 0.27s cubic-bezier(0.62, 0.02, 0.34, 1); } .close-btn.close-cursor.active .rings-icon { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .close-btn:not(.close-cursor):hover .close-icon::before { -webkit-transform: rotate(-45deg) scaleY(0.7); -moz-transform: rotate(-45deg) scaleY(0.7); -ms-transform: rotate(-45deg) scaleY(0.7); -o-transform: rotate(-45deg) scaleY(0.7); transform: rotate(-45deg) scaleY(0.7); } .close-btn:not(.close-cursor):hover .close-icon::after { -webkit-transform: rotate(45deg) scaleY(0.7); -moz-transform: rotate(45deg) scaleY(0.7); -ms-transform: rotate(45deg) scaleY(0.7); -o-transform: rotate(45deg) scaleY(0.7); transform: rotate(45deg) scaleY(0.7); } .close-icon { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transition: 0.18s cubic-bezier(0.52, 0.01, 0.16, 1) 0s; -moz-transition: 0.18s cubic-bezier(0.52, 0.01, 0.16, 1) 0s; transition: 0.18s cubic-bezier(0.52, 0.01, 0.16, 1) 0s; } .close-icon::before, .close-icon::after { content: ''; position: absolute; width: 1px; left: 50%; height: 60%; top: 20%; background-color: #f7f3f2; -webkit-transition: 0.4s cubic-bezier(0.52, 0.01, 0.16, 1) 0s; -moz-transition: 0.4s cubic-bezier(0.52, 0.01, 0.16, 1) 0s; transition: 0.4s cubic-bezier(0.52, 0.01, 0.16, 1) 0s; -webkit-backface-visibility: hidden; } .close-icon::before { -webkit-transform: rotate(-45deg) scaleY(1); -moz-transform: rotate(-45deg) scaleY(1); -ms-transform: rotate(-45deg) scaleY(1); -o-transform: rotate(-45deg) scaleY(1); transform: rotate(-45deg) scaleY(1); } .close-icon::after { -webkit-transform: rotate(45deg) scaleY(1); -moz-transform: rotate(45deg) scaleY(1); -ms-transform: rotate(45deg) scaleY(1); -o-transform: rotate(45deg) scaleY(1); transform: rotate(45deg) scaleY(1); -webkit-transition-delay: 0.1s; -moz-transition-delay: 0.1s; transition-delay: 0.1s; } .vid-fill-screen, .vid-click-fallback { z-index: 11000; } .preloader { z-index: 10000; } nav { z-index: 8000; } .contact-wrap { z-index: 7800; } .list-btn { z-index: 7700; } .list-nav { z-index: 7500; } .nav-wrap { z-index: 9000; } .protector { z-index: 7000; } .logo a { width: 4.5vw; height: 3.5vw; margin-right: 0.5vw; } .logo a::before, .logo a::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .logo a::before { background: url("../img/ui/logo.svg") no-repeat center center/100%; } html.webkitbrowser .logo a { -webkit-mask-image: url("../img/ui/logo.svg"); -webkit-mask-size: 100%; -webkit-mask-position: center center; -webkit-mask-repeat: no-repeat; } html.webkitbrowser .logo a::before { -webkit-transition: 0.01s 0.4s; -moz-transition: 0.01s 0.4s; transition: 0.01s 0.4s; visibility: hidden; background: #000 url("../img/bg/logo-mask.gif") no-repeat center center/cover; } html.webkitbrowser .logo a::after { background: #fff; -webkit-transition: 0.45s cubic-bezier(0.62, 0.02, 0.34, 1); -moz-transition: 0.45s cubic-bezier(0.62, 0.02, 0.34, 1); transition: 0.45s cubic-bezier(0.62, 0.02, 0.34, 1); } html.webkitbrowser .logo a:hover::before { -webkit-transition-delay: 0s; -moz-transition-delay: 0s; transition-delay: 0s; visibility: visible; } html.webkitbrowser .logo a:hover::after { opacity: 0; } nav.main-nav { top: 3vw; left: 2.5vw; -webkit-transition: -webkit-transform 0.54s cubic-bezier(0.52, 0.01, 0.16, 1); -moz-transition: -moz-transform 0.54s cubic-bezier(0.52, 0.01, 0.16, 1); transition: transform 0.54s cubic-bezier(0.52, 0.01, 0.16, 1); } nav.main-nav[data-active="off"] { -webkit-transform: translateY(-400%); -moz-transform: translateY(-400%); -ms-transform: translateY(-400%); -o-transform: translateY(-400%); transform: translateY(-400%); } @media only screen and (min-width: 900px) { main.home nav.main-nav { top: 2vw; left: 1.5vw; } } nav.main-nav li { float: left; margin: 0 14px; padding-top: 0.7vw; } nav.main-nav li.logo { padding-top: 0.35vw; } nav.main-nav li h5 { color: rgba(247, 243, 242, 0.45); -webkit-transition: 0.32s cubic-bezier(0.52, 0.01, 0.16, 1); -moz-transition: 0.32s cubic-bezier(0.52, 0.01, 0.16, 1); transition: 0.32s cubic-bezier(0.52, 0.01, 0.16, 1); } @media only screen and (max-width: 1250px) { nav.main-nav li.logo a { margin-top: 5px; width: 50px; height: 40px; } nav.main-nav li:not(.logo) { padding-top: 10px; } } nav.main-nav li:hover h5 { color: rgba(247, 243, 242, 0.7); } @media only screen and (min-width: 900px) { nav.main-nav .active { pointer-events: none; } nav.main-nav .active h5 { color: white; } nav.main-nav .active::after { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); background-color: #f7f3f2; } } .lines-hover::before, .lines-hover::after, .lines-hover-larger::before, .lines-hover-larger::after { content: ''; position: absolute; left: 50%; width: 1px; height: 22%; background-color: rgba(247, 243, 242, 0); -webkit-transform: scaleY(0); -moz-transform: scaleY(0); -ms-transform: scaleY(0); -o-transform: scaleY(0); transform: scaleY(0); -webkit-transition: 0.45s cubic-bezier(0.52, 0.01, 0.16, 1); -moz-transition: 0.45s cubic-bezier(0.52, 0.01, 0.16, 1); transition: 0.45s cubic-bezier(0.52, 0.01, 0.16, 1); } .lines-hover::before, .lines-hover-larger::before { bottom: 100%; -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; } .lines-hover::after, .lines-hover-larger::after { top: 115%; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; } .lines-hover:hover::after, .lines-hover:hover::before, .lines-hover-larger:hover::after, .lines-hover-larger:hover::before { -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); transform: scaleY(1); background-color: rgba(247, 243, 242, 0.4); } .lines-hover-larger::before, .lines-hover-larger::after { height: 50%; } .lines-hover-larger::before { bottom: 130%; -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; } .lines-hover-larger::after { top: 135%; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; } .list-nav { width: 100%; height: 100%; -webkit-transition: 0.65s cubic-bezier(0.7, 0.3, 0, 1); -moz-transition: 0.65s cubic-bezier(0.7, 0.3, 0, 1); transition: 0.65s cubic-bezier(0.7, 0.3, 0, 1); overflow: hidden; } main.project .list-nav { display: none; } .list-nav .list-nav-icon { margin: 0 auto; margin-bottom: 1em; } .list-nav .list-img-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .list-nav .list-img-wrap .list-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .list-nav li:nth-child(2) .list-img-wrap .list-img, .list-nav li:nth-child(4) .list-img-wrap .list-img, .list-nav li:nth-child(6) .list-img-wrap .list-img { background: url("../img/perch-content-img/project-bg-2.jpg") no-repeat center center/cover; } .list-nav li { padding: 3vw 0; } .list-nav ul li { -webkit-transition: 0.65s cubic-bezier(0.7, 0.3, 0, 1); -moz-transition: 0.65s cubic-bezier(0.7, 0.3, 0, 1); transition: 0.65s cubic-bezier(0.7, 0.3, 0, 1); } .list-nav ul li:nth-child(1) { z-index: 1; } .list-nav ul li:nth-child(2) { z-index: 2; } .list-nav ul li:nth-child(3) { z-index: 3; } .list-nav ul li:nth-child(4) { z-index: 4; } .list-nav ul li:nth-child(5) { z-index: 5; } .list-nav ul li:nth-child(6) { z-index: 6; } .list-nav ul li:nth-child(7) { z-index: 7; } .list-nav ul li:nth-child(8) { z-index: 8; } .list-nav ul li:nth-child(9) { z-index: 9; } .list-nav ul li:nth-child(10) { z-index: 10; } .list-nav ul li:nth-child(11) { z-index: 11; } .list-nav ul li:nth-child(12) { z-index: 12; } .list-nav ul li:nth-child(13) { z-index: 13; } .list-nav ul li:nth-child(14) { z-index: 14; } .list-nav ul li:nth-child(15) { z-index: 15; } .list-nav ul li:nth-child(16) { z-index: 16; } .list-nav ul li:nth-child(17) { z-index: 17; } .list-nav ul li:nth-child(18) { z-index: 18; } .list-nav ul li:nth-child(19) { z-index: 19; } .list-nav ul li:nth-child(20) { z-index: 20; } .list-nav ul li:nth-child(21) { z-index: 21; } .list-nav ul li:nth-child(22) { z-index: 22; } .list-nav ul li:nth-child(23) { z-index: 23; } .list-nav ul li:nth-child(24) { z-index: 24; } .list-nav ul li:nth-child(25) { z-index: 25; } .list-nav ul li:nth-child(26) { z-index: 26; } .list-nav ul li:nth-child(27) { z-index: 27; } .list-nav ul li:nth-child(28) { z-index: 28; } .list-nav ul li:nth-child(29) { z-index: 29; } .list-nav ul li:nth-child(30) { z-index: 30; } .list-nav ul li:nth-child(1) { -webkit-transition-delay: 0s; -moz-transition-delay: 0s; transition-delay: 0s; } .list-nav ul li:nth-child(2) { -webkit-transition-delay: 0.08s; -moz-transition-delay: 0.08s; transition-delay: 0.08s; } .list-nav ul li:nth-child(3) { -webkit-transition-delay: 0.16s; -moz-transition-delay: 0.16s; transition-delay: 0.16s; } .list-nav ul li:nth-child(4) { -webkit-transition-delay: 0.24s; -moz-transition-delay: 0.24s; transition-delay: 0.24s; } .list-nav ul li:nth-child(5) { -webkit-transition-delay: 0.32s; -moz-transition-delay: 0.32s; transition-delay: 0.32s; } .list-nav ul li:nth-child(6) { -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; transition-delay: 0.4s; } .list-nav ul li:nth-child(7) { -webkit-transition-delay: 0.48s; -moz-transition-delay: 0.48s; transition-delay: 0.48s; } .list-nav ul li:nth-child(8) { -webkit-transition-delay: 0.56s; -moz-transition-delay: 0.56s; transition-delay: 0.56s; } .list-nav ul li:nth-child(9) { -webkit-transition-delay: 0.64s; -moz-transition-delay: 0.64s; transition-delay: 0.64s; } .list-nav ul li:nth-child(10) { -webkit-transition-delay: 0.72s; -moz-transition-delay: 0.72s; transition-delay: 0.72s; } .list-nav ul li:nth-child(11) { -webkit-transition-delay: 0.8s; -moz-transition-delay: 0.8s; transition-delay: 0.8s; } .list-nav ul li:nth-child(12) { -webkit-transition-delay: 0.88s; -moz-transition-delay: 0.88s; transition-delay: 0.88s; } .list-nav ul li:nth-child(13) { -webkit-transition-delay: 0.96s; -moz-transition-delay: 0.96s; transition-delay: 0.96s; } .list-nav ul li:nth-child(14) { -webkit-transition-delay: 1.04s; -moz-transition-delay: 1.04s; transition-delay: 1.04s; } .list-nav ul li:nth-child(15) { -webkit-transition-delay: 1.12s; -moz-transition-delay: 1.12s; transition-delay: 1.12s; } .list-nav ul li:nth-child(16) { -webkit-transition-delay: 1.2s; -moz-transition-delay: 1.2s; transition-delay: 1.2s; } .list-nav ul li::before, .list-nav ul li::after { content: ''; position: absolute; bottom: 1px; left: 0; width: 100%; height: 1px; background-color: rgba(247, 243, 242, 0.2); -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; } .list-nav ul li::after { -webkit-transform: scaleX(0); -moz-transform: scaleX(0); -ms-transform: scaleX(0); -o-transform: scaleX(0); transform: scaleX(0); background-color: rgba(247, 243, 242, 0.45); -webkit-transition: 0.43s cubic-bezier(0.52, 0.01, 0.16, 1); -moz-transition: 0.43s cubic-bezier(0.52, 0.01, 0.16, 1); transition: 0.43s cubic-bezier(0.52, 0.01, 0.16, 1); } .list-nav ul li h2 { margin-bottom: 15px; } .list-nav ul li:last-child .cta { display: inline-block; margin: 10px auto; width: 100%; max-width: 250px; } .list-nav .list-nav-header .generic-bg { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: 4s; -moz-transition: 4s; transition: 4s; } .list-nav .right-cta { -webkit-transform: translateX(105%); -moz-transform: translateX(105%); -ms-transform: translateX(105%); -o-transform: translateX(105%); transform: translateX(105%); -webkit-transition: 0.65s cubic-bezier(0.7, 0.3, 0, 1) 0.34s; -moz-transition: 0.65s cubic-bezier(0.7, 0.3, 0, 1) 0.34s; transition: 0.65s cubic-bezier(0.7, 0.3, 0, 1) 0.34s; } .list-nav.active { -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } .list-nav.active .list-nav-header .generic-bg { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } .list-nav.active .right-cta { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } .list-nav.active ul li { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } .list-nav.work-list-nav h4 { margin-bottom: 2px; } .list-nav .scroll-mouse-marque { display: none; } @media only screen and (min-width: 900px) { .list-nav { -webkit-transform: translateX(-102%); -moz-transform: translateX(-102%); -ms-transform: translateX(-102%); -o-transform: translateX(-102%); transform: translateX(-102%); display: none; z-index: 10000; background: #17181c; -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } .list-nav li:nth-child(1) { display: none; } .list-nav .cta.right-cta { z-index: 29; } .list-nav .list-nav-header { height: 33%; border-bottom: 1px solid rgba(247, 243, 242, 0.26); display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; overflow: hidden; } .list-nav ul { height: 67%; overflow-y: scroll; overflow-x: hidden; -webkit-overflow-scrolling: touch; } .list-nav ul li { padding: 5vw 20vw; } .list-nav ul li:first-child { padding-top: 6vw; } .list-nav ul li:last-child { padding-bottom: 6vw; } .list-nav li { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } .list-nav li .list-img-wrap { -webkit-mask: none !important; position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; -webkit-transition: 0.65s cubic-bezier(0.7, 0.3, 0, 1) 0.2s; -moz-transition: 0.65s cubic-bezier(0.7, 0.3, 0, 1) 0.2s; transition: 0.65s cubic-bezier(0.7, 0.3, 0, 1) 0.2s; -webkit-transform: translateX(-102%); -moz-transform: translateX(-102%); -ms-transform: translateX(-102%); -o-transform: translateX(-102%); transform: translateX(-102%); opacity: 0.6; } .list-nav li .list-img-wrap .list-img { -webkit-transition: 0.65s cubic-bezier(0.7, 0.3, 0, 1) 0.2s; -moz-transition: 0.65s cubic-bezier(0.7, 0.3, 0, 1) 0.2s; transition: 0.65s cubic-bezier(0.7, 0.3, 0, 1) 0.2s; -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } main.directors .list-nav li { pointer-events: none; } .list-nav li:hover { cursor: pointer; } .list-nav li:hover::after { -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -ms-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1); } .list-nav li:hover .list-img-wrap { -webkit-transform: scale(1) translateX(0%); -moz-transform: scale(1) translateX(0%); -ms-transform: scale(1) translateX(0%); -o-transform: scale(1) translateX(0%); transform: scale(1) translateX(0%); } .list-nav li:hover .list-img-wrap .list-img { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } .list-nav .work-content-copy > * { display: none; } .list-nav .work-content-copy > *:nth-child(1), .list-nav .work-content-copy > *:nth-child(2) { display: block; } } .smoke-gif { pointer-events: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000 url("../img/bg/letter-smoke-opt.gif") no-repeat center center/cover; } nav.project-nav { position: fixed; bottom: 0.2vw; left: 4vw; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); } main:not(.project) nav.project-nav { display: none; } nav.project-nav li { width: auto; float: left; margin-right: 110px; } .page-title { pointer-events: none; top: 9vw; left: 0; width: 100%; } .page-title.inactive { opacity: 0; -webkit-transition: 0.13s; -moz-transition: 0.13s; transition: 0.13s; } .protector { position: fixed; top: 0; left: 0; width: 100%; height: 100%; } nav.social { top: 3.7vw; right: 3.7vw; } nav.social > ul > li:not(.trickle-left) { float: left; margin: 0 15px; } nav.social > ul > li:not(.trickle-left) a { width: 16px; height: 16px; } @media only screen and (max-width: 900px) { nav.social > ul > li:not(.trickle-left) a { width: 18px; height: 18px; } } nav.social > ul > li:not(.trickle-left).journal { border-left: 1px solid rgba(247, 243, 242, 0.3); padding-left: 30px; } nav.social > ul > li:not(.trickle-left).journal a { padding-left: 30px; background: url("../img/ui/journal.svg") no-repeat left center/15px; width: auto; } nav.social > ul > li:not(.trickle-left):nth-child(1) { margin-left: 0; } @media only screen and (max-width: 1200px) { nav.social li.trickle-left { display: none; } } .inst a { background: url("../img/ui/inst.svg") no-repeat center center/100%; } .ltlstar a { background: url("../img/ui/lttlstar.svg") no-repeat center center/100%; } .fb a { background: url("../img/ui/fb.svg") no-repeat center center/100%; } .yt a, .yt-icon { background: url("../img/ui/yt.svg") no-repeat center center/100%; } .twit a, .twit-icon { background: url("../img/ui/tw.svg") no-repeat center center/100%; } .journal-icon { background: url("../img/ui/journal.svg") no-repeat center center/70%; } .tw-black a { background: url("../img/ui/tw-black.svg") no-repeat center center/100%; } .fb-black a { background: url("../img/ui/fb-black.svg") no-repeat center center/100%; } nav.contact { bottom: 3.2vw; right: 3.2vw; } nav.contact > ul > li:not(.trickle-left) { float: left; margin: 0 9px; } nav.contact > ul > li:not(.trickle-left) a { width: 16px; height: 16px; } nav.contact > ul > li:not(.trickle-left) .close-contact { width: 30px; height: 30px; margin: -15px 0 0 -15px; } nav.contact > ul > li:not(.trickle-left):nth-child(1) { margin-left: 0; } nav.contact > ul > li:not(.trickle-left):nth-child(3) { padding-left: 17px; } nav.contact > ul > li:not(.trickle-left):nth-child(3)::after { content: ''; position: absolute; left: 0; height: 120%; width: 1px; top: -10%; background-color: rgba(247, 243, 242, 0.2); } nav.contact .close-contact { position: absolute; top: 50%; left: 150%; -webkit-transform: scale(2); -moz-transform: scale(2); -ms-transform: scale(2); -o-transform: scale(2); transform: scale(2); pointer-events: none; opacity: 0; } nav.contact .js-open-contact, nav.contact .close-contact { -webkit-transition: 0.324s; -moz-transition: 0.324s; transition: 0.324s; } nav.contact.close-active .js-open-contact { pointer-events: none; opacity: 0; } nav.contact.close-active .close-contact { pointer-events: auto; opacity: 1; } nav.topbottom-nextprev a { position: fixed; left: 50%; margin-left: -1px; width: 60px; height: 60px; margin: -30px 0 0 -30px; } nav.topbottom-nextprev a:hover > span { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; transition-delay: 0.3s; } nav.topbottom-nextprev a:hover.prev > span { -webkit-transform: scale(1) rotate(180deg); -moz-transform: scale(1) rotate(180deg); -ms-transform: scale(1) rotate(180deg); -o-transform: scale(1) rotate(180deg); transform: scale(1) rotate(180deg); } nav.topbottom-nextprev a > span { position: absolute; bottom: 50%; text-transform: uppercase; font-size: 0.7em; letter-spacing: 0.1em; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); pointer-events: none; -webkit-transition: 0.3s cubic-bezier(0.62, 0.02, 0.34, 1); -moz-transition: 0.3s cubic-bezier(0.62, 0.02, 0.34, 1); transition: 0.3s cubic-bezier(0.62, 0.02, 0.34, 1); } nav.topbottom-nextprev .prev { top: 3.5vw; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } nav.topbottom-nextprev .prev > span { text-align: left; right: -80%; margin-bottom: -10px; -webkit-transform: scale(0) rotate(180deg); -moz-transform: scale(0) rotate(180deg); -ms-transform: scale(0) rotate(180deg); -o-transform: scale(0) rotate(180deg); transform: scale(0) rotate(180deg); } nav.topbottom-nextprev .next { bottom: 1.8vw; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); } nav.topbottom-nextprev .next > span { text-align: right; right: -50%; margin-bottom: -10px; } nav.indicator-nav { display: none; position: fixed; right: 0; top: 0; width: 5px; height: 100%; } @media only screen and (min-width: 900px) { main.work nav.indicator-nav, main.directors nav.indicator-nav { display: block; } } nav.indicator-nav .indicator { width: 100%; height: 100%; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; background-color: #f7f3f2; -webkit-transition: 0.475s cubic-bezier(0.7, 0.3, 0, 1); -moz-transition: 0.475s cubic-bezier(0.7, 0.3, 0, 1); transition: 0.475s cubic-bezier(0.7, 0.3, 0, 1); } .dot-line { height: 1px; position: absolute; } .dot-line::before { content: ''; width: 100%; background-color: #f7f3f2; height: 100%; position: absolute; top: 0; left: 0; -webkit-transition: 0.55s 0.2s cubic-bezier(0.52, 0.01, 0.16, 1); -moz-transition: 0.55s 0.2s cubic-bezier(0.52, 0.01, 0.16, 1); transition: 0.55s 0.2s cubic-bezier(0.52, 0.01, 0.16, 1); } .dot-line::after { content: ''; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; margin-top: -2px; background-color: #f7f3f2; border-radius: 5px; position: absolute; top: 0; -webkit-backface-visibility: hidden; -webkit-transition: 0.72s cubic-bezier(0.52, 0.01, 0.16, 1); -moz-transition: 0.72s cubic-bezier(0.52, 0.01, 0.16, 1); transition: 0.72s cubic-bezier(0.52, 0.01, 0.16, 1); } .dot-line.dot-left::after { left: 0; } .dot-line.dot-right::after { right: 0; } nav.left-nextprev, nav.topbottom-nextprev { display: none; } main.work nav.left-nextprev, main.directors nav.left-nextprev, main.work nav.topbottom-nextprev, main.directors nav.topbottom-nextprev { display: block; } nav.left-nextprev { top: 50%; left: 50px; } nav.left-nextprev .marque { position: absolute; width: 35px; height: 35px; margin: -17.5px 0 0 -17.5px; } nav.left-nextprev a { position: absolute; top: 0; left: 0; } nav.left-nextprev ul { position: absolute; top: 0; left: 0; } nav.left-nextprev ul li { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); position: absolute; top: 0; padding-top: 20px; } nav.left-nextprev ul li .dot-line { width: 55px; top: -20px; opacity: 0.13; -webkit-transition: 0.35s cubic-bezier(0.52, 0.01, 0.16, 1); -moz-transition: 0.35s cubic-bezier(0.52, 0.01, 0.16, 1); transition: 0.35s cubic-bezier(0.52, 0.01, 0.16, 1); } nav.left-nextprev ul li h5.number { position: absolute; top: 0; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } nav.left-nextprev ul li:hover { cursor: pointer; } nav.left-nextprev ul li:hover .dot-line { -webkit-transition: 0.55s 0.2s cubic-bezier(0.52, 0.01, 0.16, 1); -moz-transition: 0.55s 0.2s cubic-bezier(0.52, 0.01, 0.16, 1); transition: 0.55s 0.2s cubic-bezier(0.52, 0.01, 0.16, 1); opacity: 0.48; } nav.left-nextprev ul li:hover .dot-line::before { -webkit-transform: scaleX(1.5); -moz-transform: scaleX(1.5); -ms-transform: scaleX(1.5); -o-transform: scaleX(1.5); transform: scaleX(1.5); background-color: rgba(247, 243, 242, 0.2); } nav.left-nextprev li:nth-child(1) { left: 0; padding-left: 120px; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; } nav.left-nextprev li:nth-child(1) h4, nav.left-nextprev li:nth-child(1) h5 { text-align: left; } nav.left-nextprev li:nth-child(1) h5.number { left: -17px; } nav.left-nextprev li:nth-child(1) .dot-line { left: -75px; } nav.left-nextprev li:nth-child(1) .dot-line::before { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; } nav.left-nextprev li:nth-child(1):hover .dot-line::after { -webkit-transform: translateX(30px); -moz-transform: translateX(30px); -ms-transform: translateX(30px); -o-transform: translateX(30px); transform: translateX(30px); } nav.left-nextprev li:nth-child(2) { right: 0; padding-right: 110px; -webkit-transform-origin: 100% 0; -moz-transform-origin: 100% 0; -ms-transform-origin: 100% 0; -o-transform-origin: 100% 0; transform-origin: 100% 0; } nav.left-nextprev li:nth-child(2) h4, nav.left-nextprev li:nth-child(2) h5 { text-align: right; } nav.left-nextprev li:nth-child(2) h5.number { right: -35px; } nav.left-nextprev li:nth-child(2) .dot-line { right: -75px; } nav.left-nextprev li:nth-child(2) .dot-line::before { -webkit-transform-origin: 100% 0; -moz-transform-origin: 100% 0; -ms-transform-origin: 100% 0; -o-transform-origin: 100% 0; transform-origin: 100% 0; } nav.left-nextprev li:nth-child(2):hover .dot-line::after { -webkit-transform: translateX(-30px); -moz-transform: translateX(-30px); -ms-transform: translateX(-30px); -o-transform: translateX(-30px); transform: translateX(-30px); } .trickle-left { position: absolute; left: -20px; top: 0; height: 100%; display: inline-block; white-space: nowrap; } .trickle-left h5 { position: absolute; right: 90px; top: 50%; margin-top: -5px; } .trickle-left::before { content: ''; position: absolute; right: 0px; top: 50%; width: 70px; height: 1px; background-color: rgba(247, 243, 242, 0.12); -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -ms-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1); } .marque { background: url("../img/ui/logo.svg") no-repeat center center/100%; } .marque.larger { width: 40px; height: 40px; margin: -20px 0 0 -20px; } .marque.centered { width: 50px; height: 50px; margin: -25px 0 0 -25px; } .marque.black { background: url("../img/ui/logo-black.svg") no-repeat center center/100%; } .marque.huge { width: 90px; height: 80px; margin: -40px 0 0 -45px; } .marque-logo { width: 8vw; height: 10vw; margin: -5vw 0 0 -4vw; background: url("../img/ui/logo-black-full.svg") no-repeat center center/100%; } .scroll-mouse-marque { width: 26px; height: 38px; left: 50%; margin: 25px auto 0 -13px; } .scroll-mouse-marque::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid #f7f3f2; width: 100%; height: 100%; border-radius: 20px; } .scroll-mouse-marque::after { content: ''; position: absolute; width: 4px; height: 4px; margin: -2px 0 0 -2px; margin-left: -1px; border-radius: 5px; background-color: #f7f3f2; left: 50%; top: 30%; -webkit-animation: scrollWheel 0.65s cubic-bezier(0.52, 0.01, 0.16, 1) infinite alternate; -moz-animation: scrollWheel 0.65s cubic-bezier(0.52, 0.01, 0.16, 1) infinite alternate; animation: scrollWheel 0.65s cubic-bezier(0.52, 0.01, 0.16, 1) infinite alternate; } @media only screen and (max-width: 900px) { .scroll-mouse-marque { width: 26px; height: 40px; margin-left: -13px; } .scroll-mouse-marque::before { border-radius: 4px; } .scroll-mouse-marque::after { width: 6px; height: 6px; margin: -3px 0 0 -3px; background-color: rgba(247, 243, 242, 0); border: 1px solid #f7f3f2; margin-left: -3px; -webkit-animation: scrollWheelTouch 2s cubic-bezier(0.52, 0.01, 0.16, 1) infinite forwards; -moz-animation: scrollWheelTouch 2s cubic-bezier(0.52, 0.01, 0.16, 1) infinite forwards; animation: scrollWheelTouch 2s cubic-bezier(0.52, 0.01, 0.16, 1) infinite forwards; } } .scroll-mouse-marque.move-mouse { bottom: 15vh; -webkit-animation: rotateMouse 0.8s cubic-bezier(0.52, 0.01, 0.16, 1) infinite alternate; -moz-animation: rotateMouse 0.8s cubic-bezier(0.52, 0.01, 0.16, 1) infinite alternate; animation: rotateMouse 0.8s cubic-bezier(0.52, 0.01, 0.16, 1) infinite alternate; } .scroll-mouse-marque.move-mouse::after { -webkit-animation: none; -moz-animation: none; animation: none; } .vertigo-bg { position: absolute; top: -5%; left: -5%; width: 110%; height: 110%; } .vertigo-bg div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .generic-bg { background: url("../img/bg/generic-pano.jpg") no-repeat center center/cover; } .pano-bg { background: url("../img/bg/main-panorama.jpg") no-repeat center center/cover; } .noise-bg { background: url("../img/bg/noise-repeat.jpg") repeat center center; } .home .threed-panorama { -webkit-perspective: 900px; -moz-perspective: 900px; perspective: 900px; } .home .threed-panorama h3::after { content: ''; bottom: -30px; left: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 6px; background-color: #f7f3f2; position: absolute; } .home .threed-panorama .inner-panorama-object { -webkit-transition: none !important; -moz-transition: none !important; transition: none !important; } .home .project-nav li { opacity: 0; -webkit-transition: 0.32s; -moz-transition: 0.32s; transition: 0.32s; } .home .project-nav li h5::after { -webkit-transform: scaleX(0); -moz-transform: scaleX(0); -ms-transform: scaleX(0); -o-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; -webkit-transition: 0.32s; -moz-transition: 0.32s; transition: 0.32s; } .home .project-nav.active li { opacity: 1; -webkit-transition: 0.52s 1s; -moz-transition: 0.52s 1s; transition: 0.52s 1s; } .home .project-nav.active li:nth-child(2) { -webkit-transition-delay: 1.2s; -moz-transition-delay: 1.2s; transition-delay: 1.2s; } .home .project-nav.active li h5::after { -webkit-transition: 0.72s cubic-bezier(0.52, 0.01, 0.16, 1) 1.4s; -moz-transition: 0.72s cubic-bezier(0.52, 0.01, 0.16, 1) 1.4s; transition: 0.72s cubic-bezier(0.52, 0.01, 0.16, 1) 1.4s; -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -ms-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1); } .home .hit-area { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .home .hit-area:hover { cursor: pointer; } .home .mountains-bg { left: -30vw; margin-top: -35vw; top: 50%; width: 160vw; height: 70vw; } .home .mountains-bg .mountains-bg-img { background: url("../img/bg/home-panorama.jpg") no-repeat center center/100% 100%; -webkit-transition: 2.1s cubic-bezier(0.52, 0.01, 0.16, 1); -moz-transition: 2.1s cubic-bezier(0.52, 0.01, 0.16, 1); transition: 2.1s cubic-bezier(0.52, 0.01, 0.16, 1); } .home .mountains-bg .mountains-bg-img[data-zoomed="on"] { -webkit-transform: scale(1.4); -moz-transform: scale(1.4); -ms-transform: scale(1.4); -o-transform: scale(1.4); transform: scale(1.4); } .js-open-pano-content:hover, .js-external-link:hover { cursor: pointer; } .pano-emblem { width: 25px; height: 25px; margin: 0 auto 50px; } .main-title .pano-emblem { margin-bottom: 30px; } .rotate-icon { width: 40px; height: 40px; margin: 0 auto 6px; -webkit-transform: rotateX(50deg); -moz-transform: rotateX(50deg); -ms-transform: rotateX(50deg); -o-transform: rotateX(50deg); transform: rotateX(50deg); background: url("../img/ui/pano-icon.svg") no-repeat center center/100%; } .rotate-icon::after { content: ''; position: absolute; background-color: #FFF; width: 6px; height: 6px; margin: -2px 0 0 0px; left: 50%; top: 0; -webkit-transform-origin: 0 22px; -moz-transform-origin: 0 22px; -ms-transform-origin: 0 22px; -o-transform-origin: 0 22px; transform-origin: 0 22px; border-radius: 10px; -webkit-animation: rotate3dpano 1.5s forwards infinite cubic-bezier(0.7, 0.3, 0, 1); -moz-animation: rotate3dpano 1.5s forwards infinite cubic-bezier(0.7, 0.3, 0, 1); animation: rotate3dpano 1.5s forwards infinite cubic-bezier(0.7, 0.3, 0, 1); -webkit-transform: scaleY(2.77); -moz-transform: scaleY(2.77); -ms-transform: scaleY(2.77); -o-transform: scaleY(2.77); transform: scaleY(2.77); } .radar-wrap { width: 75px; height: 75px; bottom: 9vw; left: 3vw; } @media only screen and (min-width: 1500px) { .radar-wrap { width: 90px; height: 90px; } } .radar-view .sight { background: url("../img/ui/radar-center.svg") no-repeat center center/100% 100%; } .radar-view .rim { background: url("../img/ui/radar-sight.svg") no-repeat center center/100% 100%; } .radar-ring { background: url("../img/ui/radar-rim.svg") no-repeat center center/100% 100%; } .radar-items li { position: absolute; width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; top: 50%; left: 50%; } .radar-items li:nth-child(1) { -webkit-transform: rotate(-81deg); -moz-transform: rotate(-81deg); -ms-transform: rotate(-81deg); -o-transform: rotate(-81deg); transform: rotate(-81deg); } .radar-items li:nth-child(1)::before { margin-top: -29px; } .radar-items li:nth-child(2) { -webkit-transform: rotate(-62deg); -moz-transform: rotate(-62deg); -ms-transform: rotate(-62deg); -o-transform: rotate(-62deg); transform: rotate(-62deg); } .radar-items li:nth-child(2)::before { margin-top: -35px; } .radar-items li:nth-child(3) { -webkit-transform: rotate(-43deg); -moz-transform: rotate(-43deg); -ms-transform: rotate(-43deg); -o-transform: rotate(-43deg); transform: rotate(-43deg); } .radar-items li:nth-child(3)::before { margin-top: -20px; } .radar-items li:nth-child(4) { -webkit-transform: rotate(-24deg); -moz-transform: rotate(-24deg); -ms-transform: rotate(-24deg); -o-transform: rotate(-24deg); transform: rotate(-24deg); } .radar-items li:nth-child(4)::before { margin-top: -35px; } .radar-items li:nth-child(5) { -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -ms-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg); } .radar-items li:nth-child(5)::before { margin-top: -18px; } .radar-items li:nth-child(6) { -webkit-transform: rotate(14deg); -moz-transform: rotate(14deg); -ms-transform: rotate(14deg); -o-transform: rotate(14deg); transform: rotate(14deg); } .radar-items li:nth-child(6)::before { margin-top: -22px; } .radar-items li:nth-child(7) { -webkit-transform: rotate(33deg); -moz-transform: rotate(33deg); -ms-transform: rotate(33deg); -o-transform: rotate(33deg); transform: rotate(33deg); } .radar-items li:nth-child(7)::before { margin-top: -34px; } .radar-items li:nth-child(8) { -webkit-transform: rotate(52deg); -moz-transform: rotate(52deg); -ms-transform: rotate(52deg); -o-transform: rotate(52deg); transform: rotate(52deg); } .radar-items li:nth-child(8)::before { margin-top: -24px; } .radar-items li:nth-child(9) { -webkit-transform: rotate(71deg); -moz-transform: rotate(71deg); -ms-transform: rotate(71deg); -o-transform: rotate(71deg); transform: rotate(71deg); } .radar-items li:nth-child(9)::before { margin-top: -19px; } .radar-items li:nth-child(10) { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } .radar-items li:nth-child(10)::before { margin-top: -19px; } .radar-items li:nth-child(11) { -webkit-transform: rotate(109deg); -moz-transform: rotate(109deg); -ms-transform: rotate(109deg); -o-transform: rotate(109deg); transform: rotate(109deg); } .radar-items li:nth-child(11)::before { margin-top: -35px; } .radar-items li:nth-child(12) { -webkit-transform: rotate(128deg); -moz-transform: rotate(128deg); -ms-transform: rotate(128deg); -o-transform: rotate(128deg); transform: rotate(128deg); } .radar-items li:nth-child(12)::before { margin-top: -27px; } .radar-items li:nth-child(13) { -webkit-transform: rotate(147deg); -moz-transform: rotate(147deg); -ms-transform: rotate(147deg); -o-transform: rotate(147deg); transform: rotate(147deg); } .radar-items li:nth-child(13)::before { margin-top: -28px; } .radar-items li:nth-child(14) { -webkit-transform: rotate(166deg); -moz-transform: rotate(166deg); -ms-transform: rotate(166deg); -o-transform: rotate(166deg); transform: rotate(166deg); } .radar-items li:nth-child(14)::before { margin-top: -17px; } .radar-items li:nth-child(15) { -webkit-transform: rotate(185deg); -moz-transform: rotate(185deg); -ms-transform: rotate(185deg); -o-transform: rotate(185deg); transform: rotate(185deg); } .radar-items li:nth-child(15)::before { margin-top: -32px; } .radar-items li:nth-child(16) { -webkit-transform: rotate(204deg); -moz-transform: rotate(204deg); -ms-transform: rotate(204deg); -o-transform: rotate(204deg); transform: rotate(204deg); } .radar-items li:nth-child(16)::before { margin-top: -27px; } .radar-items li:nth-child(17) { -webkit-transform: rotate(223deg); -moz-transform: rotate(223deg); -ms-transform: rotate(223deg); -o-transform: rotate(223deg); transform: rotate(223deg); } .radar-items li:nth-child(17)::before { margin-top: -21px; } .radar-items li:nth-child(18) { -webkit-transform: rotate(242deg); -moz-transform: rotate(242deg); -ms-transform: rotate(242deg); -o-transform: rotate(242deg); transform: rotate(242deg); } .radar-items li:nth-child(18)::before { margin-top: -25px; } .radar-items li:nth-child(19) { -webkit-transform: rotate(261deg); -moz-transform: rotate(261deg); -ms-transform: rotate(261deg); -o-transform: rotate(261deg); transform: rotate(261deg); } .radar-items li:nth-child(19)::before { margin-top: -18px; } .radar-items li:nth-child(20) { -webkit-transform: rotate(280deg); -moz-transform: rotate(280deg); -ms-transform: rotate(280deg); -o-transform: rotate(280deg); transform: rotate(280deg); } .radar-items li:nth-child(20)::before { margin-top: -21px; } .radar-items li::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #f7f3f2; border-radius: 4px; } .project-bg:nth-child(2) { background: url("../img/perch-content-img/alien-desert-bg-3.jpg") no-repeat center center/cover; } .project-bg:nth-child(3) { background: url("../img/perch-content-img/project-bg.jpg") no-repeat center center/cover; } .project-bg:nth-child(4) { background: url("../img/perch-content-img/project-bg-3.jpg") no-repeat center center/cover; } .work .project-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); -webkit-transition: 0.33s cubic-bezier(0.55, 0, 0.45, 1); -moz-transition: 0.33s cubic-bezier(0.55, 0, 0.45, 1); transition: 0.33s cubic-bezier(0.55, 0, 0.45, 1); } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .work .project-bg { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: opacity 0.33s, -webkit-transform 0.28s linear; -moz-transition: opacity 0.33s, -moz-transform 0.28s linear; transition: opacity 0.33s, transform 0.28s linear; } } .work .project-bg.active { -webkit-transition: opacity 0.33s cubic-bezier(0.55, 0, 0.45, 1), -webkit-transform 4s linear; -moz-transition: opacity 0.33s cubic-bezier(0.55, 0, 0.45, 1), -moz-transform 4s linear; transition: opacity 0.33s cubic-bezier(0.55, 0, 0.45, 1), transform 4s linear; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .work .project-bg.active { -webkit-transition: opacity 0.33s, -webkit-transform 0.44s cubic-bezier(0.62, 0.02, 0.34, 1); -moz-transition: opacity 0.33s, -moz-transform 0.44s cubic-bezier(0.62, 0.02, 0.34, 1); transition: opacity 0.33s, transform 0.44s cubic-bezier(0.62, 0.02, 0.34, 1); } } .hit-area:hover { cursor: pointer; } .letter-list li { position: fixed; top: 50%; } @media only screen and (min-width: 2000px) { .letter-list li { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } } .letter-list li:nth-child(1) { left: 24%; } .letter-list li:nth-child(2) { left: 50%; } .letter-list li:nth-child(2) video { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .letter-list li:nth-child(3) { left: 76%; } .letter-list li .hit-area { position: absolute; top: 5%; left: 25%; width: 50%; height: 80%; } .work-content, .touch-logic .work-content-copy { padding-top: 30px; margin-left: -55px; } .letter-wrap .work-content, .letter-wrap .touch-logic .work-content-copy { margin-top: -120px; } .work-content:hover, .touch-logic .work-content-copy:hover { cursor: pointer; } .work-content::before, .touch-logic .work-content-copy::before { content: ""; position: absolute; top: 0; left: -50px; background-color: #f7f3f2; width: 60px; height: 1px; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; } .work-content.active::before, .touch-logic .work-content-copy.active::before { -webkit-transform: scaleX(1.3); -moz-transform: scaleX(1.3); -ms-transform: scaleX(1.3); -o-transform: scaleX(1.3); transform: scaleX(1.3); } .work-content h4, .work-content h5, .touch-logic .work-content-copy h4, .touch-logic .work-content-copy h5 { text-align: left; width: 120px; } .work-content a, .touch-logic .work-content-copy a { margin-top: 1.5em; -webkit-backface-visibility: hidden; } .work-content .anchor-overflow, .touch-logic .work-content-copy .anchor-overflow { overflow: hidden; position: absolute; } .work-content .anchor-overflow, .touch-logic .work-content-copy .anchor-overflow { -webkit-transform: translateX(40px); -moz-transform: translateX(40px); -ms-transform: translateX(40px); -o-transform: translateX(40px); transform: translateX(40px); } .work-content h4, .work-content h5, .work-content a, .work-content::before, .touch-logic .work-content-copy h4, .touch-logic .work-content-copy h5, .touch-logic .work-content-copy a, .touch-logic .work-content-copy::before { -webkit-transition: 0.65s cubic-bezier(0.52, 0.01, 0.16, 1); -moz-transition: 0.65s cubic-bezier(0.52, 0.01, 0.16, 1); transition: 0.65s cubic-bezier(0.52, 0.01, 0.16, 1); } .work-content h5, .touch-logic .work-content-copy h5 { -webkit-transform: translateX(-10px); -moz-transform: translateX(-10px); -ms-transform: translateX(-10px); -o-transform: translateX(-10px); transform: translateX(-10px); } .work-content.inactive::before, .touch-logic .work-content-copy.inactive::before { -webkit-transform: scaleX(0); -moz-transform: scaleX(0); -ms-transform: scaleX(0); -o-transform: scaleX(0); transform: scaleX(0); } .work-content.inactive h4, .work-content.inactive h5, .touch-logic .work-content-copy.inactive h4, .touch-logic .work-content-copy.inactive h5 { color: rgba(247, 243, 242, 0); } .work-content.inactive h4, .touch-logic .work-content-copy.inactive h4 { -webkit-transform: translateY(6px); -moz-transform: translateY(6px); -ms-transform: translateY(6px); -o-transform: translateY(6px); transform: translateY(6px); } .work-content.inactive h5, .touch-logic .work-content-copy.inactive h5 { -webkit-transform: translateX(-16px); -moz-transform: translateX(-16px); -ms-transform: translateX(-16px); -o-transform: translateX(-16px); transform: translateX(-16px); } .work-content.inactive a, .touch-logic .work-content-copy.inactive a { -webkit-transform: translateY(115%); -moz-transform: translateY(115%); -ms-transform: translateY(115%); -o-transform: translateY(115%); transform: translateY(115%); } .work-content h4.project-name, .touch-logic .work-content-copy h4.project-name { -webkit-transition-delay: 0.1s; -moz-transition-delay: 0.1s; transition-delay: 0.1s; } .work-content .anchor-overflow, .touch-logic .work-content-copy .anchor-overflow { -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; transition-delay: 0.2s; } .wrapper { height: 100%; width: 100%; position: absolute; } .wrapper, main { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } main { -webkit-transition: 0.45s linear; -moz-transition: 0.45s linear; transition: 0.45s linear; } body.preloader-active main { opacity: 0; } .scroll-y { overflow-x: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; } .directors .wrapper { background-color: #000; } .directors .generic-bg { opacity: 1; } .director { top: 50%; -webkit-transition: 0.55s cubic-bezier(0.52, 0.01, 0.16, 1); -moz-transition: 0.55s cubic-bezier(0.52, 0.01, 0.16, 1); transition: 0.55s cubic-bezier(0.52, 0.01, 0.16, 1); } .director[data-active="inactive"] { pointer-events: none; } .director > div { width: 600px; height: 740px; margin: -370px 0 0 -300px; } .director:nth-child(1) { left: 32%; -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; transition-delay: 0.4s; } .showcase-active-left .director:nth-child(1) { -webkit-transform: translateX(-7vw); -moz-transform: translateX(-7vw); -ms-transform: translateX(-7vw); -o-transform: translateX(-7vw); transform: translateX(-7vw); -webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; transition-delay: 0.3s; } .showcase-active-right .director:nth-child(1) { -webkit-transform: translateX(-60vw); -moz-transform: translateX(-60vw); -ms-transform: translateX(-60vw); -o-transform: translateX(-60vw); transform: translateX(-60vw); -webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; transition-delay: 0.3s; } .director:nth-child(2) { left: 68%; -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; transition-delay: 0.2s; } .showcase-active-right .director:nth-child(2) { -webkit-transform: translateX(-42vw); -moz-transform: translateX(-42vw); -ms-transform: translateX(-42vw); -o-transform: translateX(-42vw); transform: translateX(-42vw); -webkit-transition-delay: 0.5s; -moz-transition-delay: 0.5s; transition-delay: 0.5s; } .director .profile { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: center center; background-size: cover; background-repeat: no-repeat; background-color: #000; } .director .profile .fade-outs { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .director .profile .fade-outs li { position: absolute; background-image: -webkit-linear-gradient(180deg, black 0, transparent 100%); background-image: linear-gradient(180deg, black 0, transparent 100%); } .director .profile .fade-outs li:nth-child(1), .director .profile .fade-outs li:nth-child(2) { width: 100%; height: 10%; left: 0; } .director .profile .fade-outs li:nth-child(1) { top: -2px; } .director .profile .fade-outs li:nth-child(2) { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); bottom: -2px; } .director .profile .fade-outs li:nth-child(3), .director .profile .fade-outs li:nth-child(4) { height: 100%; width: 8%; top: 0; position: absolute; background-image: -webkit-linear-gradient(90deg, black 0, transparent 100%); background-image: linear-gradient(90deg, black 0, transparent 100%); } .director .profile .fade-outs li:nth-child(3) { left: -2px; } .director .profile .fade-outs li:nth-child(4) { right: -2px; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .director .hit-area { width: 350px; height: 450px; margin: -225px 0 0 -175px; } .director.hover .director-content.primary-content h5, .director.hover .director-content.primary-content h1, .director.hover .director-content.primary-content h4, .director.hover .director-content.primary-content h2, .director.hover .director-content.primary-content p, .director.hover .director-content.primary-content small { color: #f7f3f2; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .director.hover .director-content.primary-content h5:nth-child(1), .director.hover .director-content.primary-content h1:nth-child(1), .director.hover .director-content.primary-content h4:nth-child(1), .director.hover .director-content.primary-content h2:nth-child(1), .director.hover .director-content.primary-content p:nth-child(1), .director.hover .director-content.primary-content small:nth-child(1) { -webkit-transition-delay: 0s; -moz-transition-delay: 0s; transition-delay: 0s; } .director.hover .director-content.primary-content h5:nth-child(2), .director.hover .director-content.primary-content h1:nth-child(2), .director.hover .director-content.primary-content h4:nth-child(2), .director.hover .director-content.primary-content h2:nth-child(2), .director.hover .director-content.primary-content p:nth-child(2), .director.hover .director-content.primary-content small:nth-child(2) { -webkit-transition-delay: 0.13s; -moz-transition-delay: 0.13s; transition-delay: 0.13s; } .director.hover .director-content.primary-content h5:nth-child(3), .director.hover .director-content.primary-content h1:nth-child(3), .director.hover .director-content.primary-content h4:nth-child(3), .director.hover .director-content.primary-content h2:nth-child(3), .director.hover .director-content.primary-content p:nth-child(3), .director.hover .director-content.primary-content small:nth-child(3) { -webkit-transition-delay: 0.26s; -moz-transition-delay: 0.26s; transition-delay: 0.26s; } .director.hover .director-content.primary-content h5:nth-child(4), .director.hover .director-content.primary-content h1:nth-child(4), .director.hover .director-content.primary-content h4:nth-child(4), .director.hover .director-content.primary-content h2:nth-child(4), .director.hover .director-content.primary-content p:nth-child(4), .director.hover .director-content.primary-content small:nth-child(4) { -webkit-transition-delay: 0.39s; -moz-transition-delay: 0.39s; transition-delay: 0.39s; } .director.hover .director-content.primary-content h5:nth-child(5), .director.hover .director-content.primary-content h1:nth-child(5), .director.hover .director-content.primary-content h4:nth-child(5), .director.hover .director-content.primary-content h2:nth-child(5), .director.hover .director-content.primary-content p:nth-child(5), .director.hover .director-content.primary-content small:nth-child(5) { -webkit-transition-delay: 0.52s; -moz-transition-delay: 0.52s; transition-delay: 0.52s; } .director.hover .director-content.primary-content h5:nth-child(6), .director.hover .director-content.primary-content h1:nth-child(6), .director.hover .director-content.primary-content h4:nth-child(6), .director.hover .director-content.primary-content h2:nth-child(6), .director.hover .director-content.primary-content p:nth-child(6), .director.hover .director-content.primary-content small:nth-child(6) { -webkit-transition-delay: 0.65s; -moz-transition-delay: 0.65s; transition-delay: 0.65s; } .director.hover .director-content.primary-content h5:nth-child(7), .director.hover .director-content.primary-content h1:nth-child(7), .director.hover .director-content.primary-content h4:nth-child(7), .director.hover .director-content.primary-content h2:nth-child(7), .director.hover .director-content.primary-content p:nth-child(7), .director.hover .director-content.primary-content small:nth-child(7) { -webkit-transition-delay: 0.78s; -moz-transition-delay: 0.78s; transition-delay: 0.78s; } .director.hover .director-content.primary-content h5:nth-child(8), .director.hover .director-content.primary-content h1:nth-child(8), .director.hover .director-content.primary-content h4:nth-child(8), .director.hover .director-content.primary-content h2:nth-child(8), .director.hover .director-content.primary-content p:nth-child(8), .director.hover .director-content.primary-content small:nth-child(8) { -webkit-transition-delay: 0.91s; -moz-transition-delay: 0.91s; transition-delay: 0.91s; } .director.hover .director-content.primary-content h5:nth-child(9), .director.hover .director-content.primary-content h1:nth-child(9), .director.hover .director-content.primary-content h4:nth-child(9), .director.hover .director-content.primary-content h2:nth-child(9), .director.hover .director-content.primary-content p:nth-child(9), .director.hover .director-content.primary-content small:nth-child(9) { -webkit-transition-delay: 1.04s; -moz-transition-delay: 1.04s; transition-delay: 1.04s; } .director.hover .director-content.primary-content h5:nth-child(10), .director.hover .director-content.primary-content h1:nth-child(10), .director.hover .director-content.primary-content h4:nth-child(10), .director.hover .director-content.primary-content h2:nth-child(10), .director.hover .director-content.primary-content p:nth-child(10), .director.hover .director-content.primary-content small:nth-child(10) { -webkit-transition-delay: 1.17s; -moz-transition-delay: 1.17s; transition-delay: 1.17s; } .director.hover .director-content.primary-content .arc.grey { color: rgba(247, 243, 242, 0.75); } .director.hover .director-content.primary-content h5.command { color: rgba(247, 243, 242, 0.5); } .director.hover .director-content.primary-content .marque { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); opacity: 1; } .director.hover .director-content.primary-content .scroll-mouse-marque, .director.hover .director-content.primary-content .pano-emblem { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition-delay: 1.5s; -moz-transition-delay: 1.5s; transition-delay: 1.5s; } .director.hover .director-content.primary-content a { -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); -webkit-transition-delay: 0.65s; -moz-transition-delay: 0.65s; transition-delay: 0.65s; } .director.hover .director-content.primary-content .extender::before, .director.hover .director-content.primary-content .extender-after::before { -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); transform: scaleY(1); -webkit-transition-delay: 0.5s; -moz-transition-delay: 0.5s; transition-delay: 0.5s; } .showcase-active-left .director:nth-child(1) .director-content.further-content h5, .showcase-active-left .director:nth-child(1) .director-content.further-content h1, .showcase-active-left .director:nth-child(1) .director-content.further-content h4, .showcase-active-left .director:nth-child(1) .director-content.further-content h2, .showcase-active-left .director:nth-child(1) .director-content.further-content p, .showcase-active-left .director:nth-child(1) .director-content.further-content small, .showcase-active-right .director:nth-child(2) .director-content.further-content h5, .showcase-active-right .director:nth-child(2) .director-content.further-content h1, .showcase-active-right .director:nth-child(2) .director-content.further-content h4, .showcase-active-right .director:nth-child(2) .director-content.further-content h2, .showcase-active-right .director:nth-child(2) .director-content.further-content p, .showcase-active-right .director:nth-child(2) .director-content.further-content small { color: #f7f3f2; -webkit-transform: translateY(9px); -moz-transform: translateY(9px); -ms-transform: translateY(9px); -o-transform: translateY(9px); transform: translateY(9px); } .showcase-active-left .director:nth-child(1) .director-content.further-content h5:nth-child(1), .showcase-active-left .director:nth-child(1) .director-content.further-content h1:nth-child(1), .showcase-active-left .director:nth-child(1) .director-content.further-content h4:nth-child(1), .showcase-active-left .director:nth-child(1) .director-content.further-content h2:nth-child(1), .showcase-active-left .director:nth-child(1) .director-content.further-content p:nth-child(1), .showcase-active-left .director:nth-child(1) .director-content.further-content small:nth-child(1), .showcase-active-right .director:nth-child(2) .director-content.further-content h5:nth-child(1), .showcase-active-right .director:nth-child(2) .director-content.further-content h1:nth-child(1), .showcase-active-right .director:nth-child(2) .director-content.further-content h4:nth-child(1), .showcase-active-right .director:nth-child(2) .director-content.further-content h2:nth-child(1), .showcase-active-right .director:nth-child(2) .director-content.further-content p:nth-child(1), .showcase-active-right .director:nth-child(2) .director-content.further-content small:nth-child(1) { -webkit-transition-delay: 0.23s; -moz-transition-delay: 0.23s; transition-delay: 0.23s; } .showcase-active-left .director:nth-child(1) .director-content.further-content h5:nth-child(2), .showcase-active-left .director:nth-child(1) .director-content.further-content h1:nth-child(2), .showcase-active-left .director:nth-child(1) .director-content.further-content h4:nth-child(2), .showcase-active-left .director:nth-child(1) .director-content.further-content h2:nth-child(2), .showcase-active-left .director:nth-child(1) .director-content.further-content p:nth-child(2), .showcase-active-left .director:nth-child(1) .director-content.further-content small:nth-child(2), .showcase-active-right .director:nth-child(2) .director-content.further-content h5:nth-child(2), .showcase-active-right .director:nth-child(2) .director-content.further-content h1:nth-child(2), .showcase-active-right .director:nth-child(2) .director-content.further-content h4:nth-child(2), .showcase-active-right .director:nth-child(2) .director-content.further-content h2:nth-child(2), .showcase-active-right .director:nth-child(2) .director-content.further-content p:nth-child(2), .showcase-active-right .director:nth-child(2) .director-content.further-content small:nth-child(2) { -webkit-transition-delay: 0.46s; -moz-transition-delay: 0.46s; transition-delay: 0.46s; } .showcase-active-left .director:nth-child(1) .director-content.further-content h5:nth-child(3), .showcase-active-left .director:nth-child(1) .director-content.further-content h1:nth-child(3), .showcase-active-left .director:nth-child(1) .director-content.further-content h4:nth-child(3), .showcase-active-left .director:nth-child(1) .director-content.further-content h2:nth-child(3), .showcase-active-left .director:nth-child(1) .director-content.further-content p:nth-child(3), .showcase-active-left .director:nth-child(1) .director-content.further-content small:nth-child(3), .showcase-active-right .director:nth-child(2) .director-content.further-content h5:nth-child(3), .showcase-active-right .director:nth-child(2) .director-content.further-content h1:nth-child(3), .showcase-active-right .director:nth-child(2) .director-content.further-content h4:nth-child(3), .showcase-active-right .director:nth-child(2) .director-content.further-content h2:nth-child(3), .showcase-active-right .director:nth-child(2) .director-content.further-content p:nth-child(3), .showcase-active-right .director:nth-child(2) .director-content.further-content small:nth-child(3) { -webkit-transition-delay: 0.69s; -moz-transition-delay: 0.69s; transition-delay: 0.69s; } .showcase-active-left .director:nth-child(1) .director-content.further-content h5:nth-child(4), .showcase-active-left .director:nth-child(1) .director-content.further-content h1:nth-child(4), .showcase-active-left .director:nth-child(1) .director-content.further-content h4:nth-child(4), .showcase-active-left .director:nth-child(1) .director-content.further-content h2:nth-child(4), .showcase-active-left .director:nth-child(1) .director-content.further-content p:nth-child(4), .showcase-active-left .director:nth-child(1) .director-content.further-content small:nth-child(4), .showcase-active-right .director:nth-child(2) .director-content.further-content h5:nth-child(4), .showcase-active-right .director:nth-child(2) .director-content.further-content h1:nth-child(4), .showcase-active-right .director:nth-child(2) .director-content.further-content h4:nth-child(4), .showcase-active-right .director:nth-child(2) .director-content.further-content h2:nth-child(4), .showcase-active-right .director:nth-child(2) .director-content.further-content p:nth-child(4), .showcase-active-right .director:nth-child(2) .director-content.further-content small:nth-child(4) { -webkit-transition-delay: 0.92s; -moz-transition-delay: 0.92s; transition-delay: 0.92s; } .showcase-active-left .director:nth-child(1) .director-content.further-content h5:nth-child(5), .showcase-active-left .director:nth-child(1) .director-content.further-content h1:nth-child(5), .showcase-active-left .director:nth-child(1) .director-content.further-content h4:nth-child(5), .showcase-active-left .director:nth-child(1) .director-content.further-content h2:nth-child(5), .showcase-active-left .director:nth-child(1) .director-content.further-content p:nth-child(5), .showcase-active-left .director:nth-child(1) .director-content.further-content small:nth-child(5), .showcase-active-right .director:nth-child(2) .director-content.further-content h5:nth-child(5), .showcase-active-right .director:nth-child(2) .director-content.further-content h1:nth-child(5), .showcase-active-right .director:nth-child(2) .director-content.further-content h4:nth-child(5), .showcase-active-right .director:nth-child(2) .director-content.further-content h2:nth-child(5), .showcase-active-right .director:nth-child(2) .director-content.further-content p:nth-child(5), .showcase-active-right .director:nth-child(2) .director-content.further-content small:nth-child(5) { -webkit-transition-delay: 1.15s; -moz-transition-delay: 1.15s; transition-delay: 1.15s; } .showcase-active-left .director:nth-child(1) .director-content.further-content h5:nth-child(6), .showcase-active-left .director:nth-child(1) .director-content.further-content h1:nth-child(6), .showcase-active-left .director:nth-child(1) .director-content.further-content h4:nth-child(6), .showcase-active-left .director:nth-child(1) .director-content.further-content h2:nth-child(6), .showcase-active-left .director:nth-child(1) .director-content.further-content p:nth-child(6), .showcase-active-left .director:nth-child(1) .director-content.further-content small:nth-child(6), .showcase-active-right .director:nth-child(2) .director-content.further-content h5:nth-child(6), .showcase-active-right .director:nth-child(2) .director-content.further-content h1:nth-child(6), .showcase-active-right .director:nth-child(2) .director-content.further-content h4:nth-child(6), .showcase-active-right .director:nth-child(2) .director-content.further-content h2:nth-child(6), .showcase-active-right .director:nth-child(2) .director-content.further-content p:nth-child(6), .showcase-active-right .director:nth-child(2) .director-content.further-content small:nth-child(6) { -webkit-transition-delay: 1.38s; -moz-transition-delay: 1.38s; transition-delay: 1.38s; } .showcase-active-left .director:nth-child(1) .director-content.further-content h5:nth-child(7), .showcase-active-left .director:nth-child(1) .director-content.further-content h1:nth-child(7), .showcase-active-left .director:nth-child(1) .director-content.further-content h4:nth-child(7), .showcase-active-left .director:nth-child(1) .director-content.further-content h2:nth-child(7), .showcase-active-left .director:nth-child(1) .director-content.further-content p:nth-child(7), .showcase-active-left .director:nth-child(1) .director-content.further-content small:nth-child(7), .showcase-active-right .director:nth-child(2) .director-content.further-content h5:nth-child(7), .showcase-active-right .director:nth-child(2) .director-content.further-content h1:nth-child(7), .showcase-active-right .director:nth-child(2) .director-content.further-content h4:nth-child(7), .showcase-active-right .director:nth-child(2) .director-content.further-content h2:nth-child(7), .showcase-active-right .director:nth-child(2) .director-content.further-content p:nth-child(7), .showcase-active-right .director:nth-child(2) .director-content.further-content small:nth-child(7) { -webkit-transition-delay: 1.61s; -moz-transition-delay: 1.61s; transition-delay: 1.61s; } .showcase-active-left .director:nth-child(1) .director-content.further-content h5:nth-child(8), .showcase-active-left .director:nth-child(1) .director-content.further-content h1:nth-child(8), .showcase-active-left .director:nth-child(1) .director-content.further-content h4:nth-child(8), .showcase-active-left .director:nth-child(1) .director-content.further-content h2:nth-child(8), .showcase-active-left .director:nth-child(1) .director-content.further-content p:nth-child(8), .showcase-active-left .director:nth-child(1) .director-content.further-content small:nth-child(8), .showcase-active-right .director:nth-child(2) .director-content.further-content h5:nth-child(8), .showcase-active-right .director:nth-child(2) .director-content.further-content h1:nth-child(8), .showcase-active-right .director:nth-child(2) .director-content.further-content h4:nth-child(8), .showcase-active-right .director:nth-child(2) .director-content.further-content h2:nth-child(8), .showcase-active-right .director:nth-child(2) .director-content.further-content p:nth-child(8), .showcase-active-right .director:nth-child(2) .director-content.further-content small:nth-child(8) { -webkit-transition-delay: 1.84s; -moz-transition-delay: 1.84s; transition-delay: 1.84s; } .showcase-active-left .director:nth-child(1) .director-content.further-content h5:nth-child(9), .showcase-active-left .director:nth-child(1) .director-content.further-content h1:nth-child(9), .showcase-active-left .director:nth-child(1) .director-content.further-content h4:nth-child(9), .showcase-active-left .director:nth-child(1) .director-content.further-content h2:nth-child(9), .showcase-active-left .director:nth-child(1) .director-content.further-content p:nth-child(9), .showcase-active-left .director:nth-child(1) .director-content.further-content small:nth-child(9), .showcase-active-right .director:nth-child(2) .director-content.further-content h5:nth-child(9), .showcase-active-right .director:nth-child(2) .director-content.further-content h1:nth-child(9), .showcase-active-right .director:nth-child(2) .director-content.further-content h4:nth-child(9), .showcase-active-right .director:nth-child(2) .director-content.further-content h2:nth-child(9), .showcase-active-right .director:nth-child(2) .director-content.further-content p:nth-child(9), .showcase-active-right .director:nth-child(2) .director-content.further-content small:nth-child(9) { -webkit-transition-delay: 2.07s; -moz-transition-delay: 2.07s; transition-delay: 2.07s; } .showcase-active-left .director:nth-child(1) .director-content.further-content h5:nth-child(10), .showcase-active-left .director:nth-child(1) .director-content.further-content h1:nth-child(10), .showcase-active-left .director:nth-child(1) .director-content.further-content h4:nth-child(10), .showcase-active-left .director:nth-child(1) .director-content.further-content h2:nth-child(10), .showcase-active-left .director:nth-child(1) .director-content.further-content p:nth-child(10), .showcase-active-left .director:nth-child(1) .director-content.further-content small:nth-child(10), .showcase-active-right .director:nth-child(2) .director-content.further-content h5:nth-child(10), .showcase-active-right .director:nth-child(2) .director-content.further-content h1:nth-child(10), .showcase-active-right .director:nth-child(2) .director-content.further-content h4:nth-child(10), .showcase-active-right .director:nth-child(2) .director-content.further-content h2:nth-child(10), .showcase-active-right .director:nth-child(2) .director-content.further-content p:nth-child(10), .showcase-active-right .director:nth-child(2) .director-content.further-content small:nth-child(10) { -webkit-transition-delay: 2.3s; -moz-transition-delay: 2.3s; transition-delay: 2.3s; } .showcase-active-left .director:nth-child(1) .director-content.further-content .mini-social li, .showcase-active-right .director:nth-child(2) .director-content.further-content .mini-social li { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 0.6s; -moz-transition-delay: 0.6s; transition-delay: 0.6s; } .showcase-active-left .director:nth-child(1) .director-content.further-content .marque, .showcase-active-right .director:nth-child(2) .director-content.further-content .marque { opacity: 1; } .showcase-active-left .director:nth-child(1) .director-content.further-content a, .showcase-active-right .director:nth-child(2) .director-content.further-content a { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .showcase-active-left .director:nth-child(1) .director-content.further-content .anchor-overflow::before, .showcase-active-right .director:nth-child(2) .director-content.further-content .anchor-overflow::before { -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); transform: scaleY(1); } .showcase-active-left .director:nth-child(1) .director-content.further-content .extender::before, .showcase-active-right .director:nth-child(2) .director-content.further-content .extender::before { -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); transform: scaleY(1); -webkit-transition-delay: 0.45s; -moz-transition-delay: 0.45s; transition-delay: 0.45s; } .profile-wrap { overflow: hidden; -webkit-transform: scale(0.83); -moz-transform: scale(0.83); -ms-transform: scale(0.83); -o-transform: scale(0.83); transform: scale(0.83); -webkit-transition: 0.8s cubic-bezier(0.52, 0.01, 0.16, 1); -moz-transition: 0.8s cubic-bezier(0.52, 0.01, 0.16, 1); transition: 0.8s cubic-bezier(0.52, 0.01, 0.16, 1); } @media only screen and (min-width: 1700px) { .profile-wrap { -webkit-transform: scale(0.95); -moz-transform: scale(0.95); -ms-transform: scale(0.95); -o-transform: scale(0.95); transform: scale(0.95); } } @media only screen and (min-width: 2200px) { .profile-wrap { -webkit-transform: scale(0.97); -moz-transform: scale(0.97); -ms-transform: scale(0.97); -o-transform: scale(0.97); transform: scale(0.97); } } @media only screen and (max-width: 1500px) { .profile-wrap { -webkit-transform: scale(0.77); -moz-transform: scale(0.77); -ms-transform: scale(0.77); -o-transform: scale(0.77); transform: scale(0.77); } } @media only screen and (max-width: 1200px) { .profile-wrap { -webkit-transform: scale(0.65); -moz-transform: scale(0.65); -ms-transform: scale(0.65); -o-transform: scale(0.65); transform: scale(0.65); } } @media only screen and (max-width: 1000px) { .profile-wrap { -webkit-transform: scale(0.55); -moz-transform: scale(0.55); -ms-transform: scale(0.55); -o-transform: scale(0.55); transform: scale(0.55); } } .profile-wrap video { left: 1%; width: 98%; top: 1%; height: 98%; } .profile-wrap .profile-move { width: 100%; height: 100%; -webkit-transition: 0.8s cubic-bezier(0.52, 0.01, 0.16, 1); -moz-transition: 0.8s cubic-bezier(0.52, 0.01, 0.16, 1); transition: 0.8s cubic-bezier(0.52, 0.01, 0.16, 1); opacity: 1; overflow: hidden; } .profile-wrap.inactive { opacity: 0; } .profile-wrap.inactive .profile-move { -webkit-transition: 0.8s cubic-bezier(0.52, 0.01, 0.16, 1); -moz-transition: 0.8s cubic-bezier(0.52, 0.01, 0.16, 1); transition: 0.8s cubic-bezier(0.52, 0.01, 0.16, 1); } .vertical-flex-center-parent { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } .flex-horiz { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; } .flex-horiz > * { width: 100%; } .director-content { top: 30px; } .director-content.primary-content { pointer-events: none; } .director-content.primary-content .marque { opacity: 0; width: 30px; height: 30px; margin: -15px 0 0 -15px; margin: 5px 0 0 -15px; -webkit-transform: translateY(6px); -moz-transform: translateY(6px); -ms-transform: translateY(6px); -o-transform: translateY(6px); transform: translateY(6px); -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transition: 0.45s cubic-bezier(0.52, 0.01, 0.16, 1) 0.55s; -moz-transition: 0.45s cubic-bezier(0.52, 0.01, 0.16, 1) 0.55s; transition: 0.45s cubic-bezier(0.52, 0.01, 0.16, 1) 0.55s; } .director-content .marque { opacity: 0; -webkit-transition: 0.45s cubic-bezier(0.52, 0.01, 0.16, 1) 0.55s; -moz-transition: 0.45s cubic-bezier(0.52, 0.01, 0.16, 1) 0.55s; transition: 0.45s cubic-bezier(0.52, 0.01, 0.16, 1) 0.55s; } .director-content h4 { margin: 30px 0 25px; } .director-content.further-content { width: 34vw; margin-left: -17vw; } .director-content.further-content .marque { top: -10px; width: 40px; height: 40px; margin: -20px 0 0 -20px; left: 50%; } .director-content.further-content h5, .director-content.further-content h1, .director-content.further-content h4, .director-content.further-content h2, .director-content.further-content small, .director-content.further-content p { color: rgba(247, 243, 242, 0); -webkit-transition: 0.55s cubic-bezier(0.52, 0.01, 0.16, 1); -moz-transition: 0.55s cubic-bezier(0.52, 0.01, 0.16, 1); transition: 0.55s cubic-bezier(0.52, 0.01, 0.16, 1); -webkit-transform: translateY(16px); -moz-transform: translateY(16px); -ms-transform: translateY(16px); -o-transform: translateY(16px); transform: translateY(16px); width: 100%; left: 0; } .director-content.further-content h5:nth-child(1), .director-content.further-content h1:nth-child(1), .director-content.further-content h4:nth-child(1), .director-content.further-content h2:nth-child(1), .director-content.further-content small:nth-child(1), .director-content.further-content p:nth-child(1) { -webkit-transition-delay: 0s; -moz-transition-delay: 0s; transition-delay: 0s; } .director-content.further-content h5:nth-child(2), .director-content.further-content h1:nth-child(2), .director-content.further-content h4:nth-child(2), .director-content.further-content h2:nth-child(2), .director-content.further-content small:nth-child(2), .director-content.further-content p:nth-child(2) { -webkit-transition-delay: 0.03s; -moz-transition-delay: 0.03s; transition-delay: 0.03s; } .director-content.further-content h5:nth-child(3), .director-content.further-content h1:nth-child(3), .director-content.further-content h4:nth-child(3), .director-content.further-content h2:nth-child(3), .director-content.further-content small:nth-child(3), .director-content.further-content p:nth-child(3) { -webkit-transition-delay: 0.06s; -moz-transition-delay: 0.06s; transition-delay: 0.06s; } .director-content.further-content h5:nth-child(4), .director-content.further-content h1:nth-child(4), .director-content.further-content h4:nth-child(4), .director-content.further-content h2:nth-child(4), .director-content.further-content small:nth-child(4), .director-content.further-content p:nth-child(4) { -webkit-transition-delay: 0.09s; -moz-transition-delay: 0.09s; transition-delay: 0.09s; } .director-content.further-content h5:nth-child(5), .director-content.further-content h1:nth-child(5), .director-content.further-content h4:nth-child(5), .director-content.further-content h2:nth-child(5), .director-content.further-content small:nth-child(5), .director-content.further-content p:nth-child(5) { -webkit-transition-delay: 0.12s; -moz-transition-delay: 0.12s; transition-delay: 0.12s; } .director-content.further-content h5:nth-child(6), .director-content.further-content h1:nth-child(6), .director-content.further-content h4:nth-child(6), .director-content.further-content h2:nth-child(6), .director-content.further-content small:nth-child(6), .director-content.further-content p:nth-child(6) { -webkit-transition-delay: 0.15s; -moz-transition-delay: 0.15s; transition-delay: 0.15s; } .director-content.further-content h5:nth-child(7), .director-content.further-content h1:nth-child(7), .director-content.further-content h4:nth-child(7), .director-content.further-content h2:nth-child(7), .director-content.further-content small:nth-child(7), .director-content.further-content p:nth-child(7) { -webkit-transition-delay: 0.18s; -moz-transition-delay: 0.18s; transition-delay: 0.18s; } .director-content.further-content h5:nth-child(8), .director-content.further-content h1:nth-child(8), .director-content.further-content h4:nth-child(8), .director-content.further-content h2:nth-child(8), .director-content.further-content small:nth-child(8), .director-content.further-content p:nth-child(8) { -webkit-transition-delay: 0.21s; -moz-transition-delay: 0.21s; transition-delay: 0.21s; } .director-content.further-content h5:nth-child(9), .director-content.further-content h1:nth-child(9), .director-content.further-content h4:nth-child(9), .director-content.further-content h2:nth-child(9), .director-content.further-content small:nth-child(9), .director-content.further-content p:nth-child(9) { -webkit-transition-delay: 0.24s; -moz-transition-delay: 0.24s; transition-delay: 0.24s; } .director-content.further-content h5:nth-child(10), .director-content.further-content h1:nth-child(10), .director-content.further-content h4:nth-child(10), .director-content.further-content h2:nth-child(10), .director-content.further-content small:nth-child(10), .director-content.further-content p:nth-child(10) { -webkit-transition-delay: 0.27s; -moz-transition-delay: 0.27s; transition-delay: 0.27s; } .director-content.further-content .extender::before { -webkit-transform: scaleY(0); -moz-transform: scaleY(0); -ms-transform: scaleY(0); -o-transform: scaleY(0); transform: scaleY(0); } .director-content.further-content .slanted-type > *:not(.mini-social) { pointer-events: none; } .director-content.further-content a { width: 18px; height: 18px; } .director-content.further-content p { font-size: 11px; } @media only screen and (min-width: 1500px) { .director-content.further-content p { font-size: 13px; } } .director-content.further-content .mini-social li { -webkit-transform: translateY(120%); -moz-transform: translateY(120%); -ms-transform: translateY(120%); -o-transform: translateY(120%); transform: translateY(120%); -webkit-transition: 0.32s cubic-bezier(0.52, 0.01, 0.16, 1); -moz-transition: 0.32s cubic-bezier(0.52, 0.01, 0.16, 1); transition: 0.32s cubic-bezier(0.52, 0.01, 0.16, 1); } .parallax-content, .parallax-content-horiz { -webkit-transition: none !important; -moz-transition: none !important; transition: none !important; } .director-showcases, .youtube-wrap, .youtube { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .youtube-embed { width: 100%; height: 100%; -webkit-transition: 0.32s cubic-bezier(0.62, 0.02, 0.34, 1); -moz-transition: 0.32s cubic-bezier(0.62, 0.02, 0.34, 1); transition: 0.32s cubic-bezier(0.62, 0.02, 0.34, 1); } .youtube-embed.inactive { opacity: 0; pointer-events: none; } .youtube-wrap { -webkit-transform: translateX(102%); -moz-transform: translateX(102%); -ms-transform: translateX(102%); -o-transform: translateX(102%); transform: translateX(102%); overflow: hidden; -webkit-transition: 0.65s cubic-bezier(0.5, 0.5, 0, 1) 0s; -moz-transition: 0.65s cubic-bezier(0.5, 0.5, 0, 1) 0s; transition: 0.65s cubic-bezier(0.5, 0.5, 0, 1) 0s; } .youtube-wrap .youtube { -webkit-transform: translateX(-68%); -moz-transform: translateX(-68%); -ms-transform: translateX(-68%); -o-transform: translateX(-68%); transform: translateX(-68%); background: url("../img/bg/bg-repeat.jpg") no-repeat center center/cover; -webkit-transition: 0.65s cubic-bezier(0.5, 0.5, 0, 1) 0s; -moz-transition: 0.65s cubic-bezier(0.5, 0.5, 0, 1) 0s; transition: 0.65s cubic-bezier(0.5, 0.5, 0, 1) 0s; } .youtube-wrap .youtube .youtube-embed { opacity: 0; -webkit-transition: 0.22s cubic-bezier(0.62, 0.02, 0.34, 1); -moz-transition: 0.22s cubic-bezier(0.62, 0.02, 0.34, 1); transition: 0.22s cubic-bezier(0.62, 0.02, 0.34, 1); } .youtube-wrap .youtube .youtube-embed.active { -webkit-transition: 0.45s cubic-bezier(0.62, 0.02, 0.34, 1); -moz-transition: 0.45s cubic-bezier(0.62, 0.02, 0.34, 1); transition: 0.45s cubic-bezier(0.62, 0.02, 0.34, 1); opacity: 1; } .director-showcases { pointer-events: none; } .director-showcases .js-hit-area { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .showcase-active-left .director-showcases .youtube-wrap, .showcase-active-right .director-showcases .youtube-wrap { -webkit-transform: translateX(50%); -moz-transform: translateX(50%); -ms-transform: translateX(50%); -o-transform: translateX(50%); transform: translateX(50%); } .showcase-active-left .director-showcases .youtube-wrap .youtube, .showcase-active-right .director-showcases .youtube-wrap .youtube { -webkit-transform: translateX(-25%); -moz-transform: translateX(-25%); -ms-transform: translateX(-25%); -o-transform: translateX(-25%); transform: translateX(-25%); } .director-showcases.full-screen .youtube-wrap { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } .director-showcases.full-screen .youtube-wrap .youtube { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } .director-showcases .right-lockup { opacity: 0; } .showcase-active-left .director-showcases, .showcase-active-right .director-showcases { pointer-events: auto; cursor: none; } .showcase-active-left .director-showcases .right-lockup, .showcase-active-right .director-showcases .right-lockup { opacity: 1; } .project .hero { overflow: hidden; } .project .hero .main-title { pointer-events: none; } .project .hero .main-title .marque { width: 40px; height: 40px; margin: -20px 0 0 -20px; top: -70px; } .project .hero .main-title h5 { margin-bottom: 3em; } .project .hero .main-title h4 { width: 500px; left: 50%; margin-left: -250px; } .project .hero .scroll-mouse-marque { bottom: 30px; } .project section { overflow: hidden; } .project section .mask-letter-wrap { margin-top: -210px; -webkit-transform: scale(1.03); -moz-transform: scale(1.03); -ms-transform: scale(1.03); -o-transform: scale(1.03); transform: scale(1.03); } .project .intro-copy { margin-top: 45px; } .project .intro-copy h5 { color: #fff; } .project .intro-copy .extender::before { top: 15%; } .position-checker, .position-checker-low { opacity: 0; -webkit-transition: 0.55s cubic-bezier(0.5, 0.5, 0, 1); -moz-transition: 0.55s cubic-bezier(0.5, 0.5, 0, 1); transition: 0.55s cubic-bezier(0.5, 0.5, 0, 1); } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) { .position-checker, .position-checker-low { opacity: 1; -webkit-transition: none; -moz-transition: none; transition: none; } } .position-checker.visible, .position-checker-low.visible { opacity: 1; } .position-checker:nth-child(2), .position-checker-low:nth-child(2) { -webkit-transition-delay: 0.23s; -moz-transition-delay: 0.23s; transition-delay: 0.23s; -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; transition-duration: 0.8s; } .position-checker:nth-child(3), .position-checker-low:nth-child(3) { -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; transition-delay: 0.4s; -webkit-transition-duration: 1.2s; -moz-transition-duration: 1.2s; transition-duration: 1.2s; } html.touch .position-checker, html.touch .position-checker-low { opacity: 1 !important; } .position-checker .position-checker-scaler, .position-checker-low .position-checker-scaler { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .position-checker.visible .position-checker-scaler, .position-checker-low.visible .position-checker-scaler { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); -webkit-transition: 6s linear; -moz-transition: 6s linear; transition: 6s linear; } .half { width: 50%; } @media only screen and (max-width: 700px) { .half { width: 100%; } } @media only screen and (min-width: 700px) { .half-block-wrap { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; } } .half-block { height: 400px; height: 60vh; width: 100%; } @media only screen and (max-width: 700px) { .half-block { height: auto; padding: 12vh 0; min-height: 40vh; } } .bg-cover { background-size: cover; background-position: center center; } .littlstar-player { width: 70vw; height: 40vw; margin: 0 auto; padding: 12vw 0 13vw; } .littlstar-player iframe, .littlstar-player span, .littlstar-player div { width: 100% !important; height: 100% !important; } .content-block { width: 60%; left: 24%; } .content-block p { text-align: left; font-weight: 700; } @media only screen and (min-width: 1200px) { .content-block p { font-size: 1.2vw; } } .content-block h4 { text-align: left; font-size: 1.5em; } .intro-copy { width: 50%; margin: 0 auto; } .detail-title { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); width: 110px; } .detail-title h4, .detail-title h5 { text-align: right; } .detail-title h5::after { content: ''; width: 50px; height: 1px; background-color: #646464; position: absolute; margin-top: 4px; right: -60px; } .detail-title.bright h4, .detail-title.bright h5, .detail-title.bright small { color: #f7f3f2; } .detail-title.bright h5::after { background-color: #f7f3f2; } .detail-title.para { width: 230px; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } .detail-title.horiz { -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } .detail-title small { position: absolute; right: -65px; top: 19px; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); font-family: "aktiv-grotesk", sans-serif; font-weight: 800; font-size: 10px; } .project-full-img .parallax-content { margin: -8% 0 0 -33%; } .project section { background-color: #17181c; } .project section h4 { color: #b4b4b4; } .project .littlstar-wrap { background-color: #17181c; background: url("../img/bg/smoke-bg.jpg") no-repeat center center/cover; } .project .littlstar-wrap a { margin-top: 12px; } html:not(.touchevents) .project .littlstar-wrap a { display: none; } section.numbers ul { margin: 16vw auto 18vw; width: 70%; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: space-around; -moz-justify-content: space-around; -ms-justify-content: space-around; -o-justify-content: space-around; justify-content: space-around; -ms-flex-pack: center; } section.numbers ul small { font-family: 'aktiv-grotesk'; display: block; font-weight: 900; font-size: 9px; margin-bottom: 1.5em; } section.numbers ul li { width: 100%; } span.digit { font-size: 12vw; font-weight: 700; line-height: 0.8em; display: block; } .project .background-project-color { background-color: rgba(23, 24, 28, 0.45); } .letter-overlay { color: rgba(23, 24, 28, 0.45); font-size: 45vw; opacity: 0.3; margin-left: 20%; margin-top: 25%; } .blurred-bg { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); -webkit-filter: blur(10px); } .desktop-only { display: block; } .mobile-only { display: none; } @media only screen and (max-width: 900px) { .desktop-only { display: none; } .mobile-only { display: block; } .preloader .bar::before { display: none; } .preloader .bar .marque-logo { width: 100px; height: 130px; margin: -65px 0 0 -50px; } h4 { font-size: 1.2em; } small { font-size: 1em; } #js-vid-fill-screen { display: none; } nav.main-nav, nav.social, nav.contact { -webkit-transform: translateX(100vw); -moz-transform: translateX(100vw); -ms-transform: translateX(100vw); -o-transform: translateX(100vw); transform: translateX(100vw); pointer-events: none; -webkit-transition: 0.56s cubic-bezier(0.52, 0.01, 0.16, 1); -moz-transition: 0.56s cubic-bezier(0.52, 0.01, 0.16, 1); transition: 0.56s cubic-bezier(0.52, 0.01, 0.16, 1); } nav.main-nav { -webkit-transition-delay: 0.14s; -moz-transition-delay: 0.14s; transition-delay: 0.14s; } nav.contact { -webkit-transition-delay: 0.23s; -moz-transition-delay: 0.23s; transition-delay: 0.23s; } .mob-list-btn ul li, .mob-list-btn .close-btn { -webkit-transition: 0.48s cubic-bezier(0.52, 0.01, 0.16, 1); -moz-transition: 0.48s cubic-bezier(0.52, 0.01, 0.16, 1); transition: 0.48s cubic-bezier(0.52, 0.01, 0.16, 1); } main.mob-nav-active nav.main-nav, main.mob-nav-active nav.social, main.mob-nav-active nav.contact { -webkit-transform: translateX(0vw); -moz-transform: translateX(0vw); -ms-transform: translateX(0vw); -o-transform: translateX(0vw); transform: translateX(0vw); pointer-events: auto; } main.mob-nav-active .mob-list-btn ul li { opacity: 0; } main.mob-nav-active .mob-list-btn .close-btn { opacity: 1; } nav.main-nav { font-size: 1.4em; top: 0px; left: 0px; right: 80px; bottom: 80px; z-index: 11; background-color: #f7f3f2; } nav.main-nav h5 { font-size: 0.4em; } nav.main-nav::before { content: ''; position: fixed; top: 0; left: 0; height: 100%; width: calc(100% - 60px); background-color: #17181c; } nav.main-nav::after { content: ''; position: fixed; top: 0; right: 0; width: 60px; height: 100%; background-color: #f7f3f2; } nav.main-nav::before, nav.main-nav::after { display: none; } nav.main-nav ul { top: 40px; left: 40px; right: 40px; bottom: 40px; position: absolute; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; } nav.main-nav ul li { margin: 0; } nav.main-nav li:not(.logo) { width: 100%; padding: 0; -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1; -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } nav.main-nav li:not(.logo):not(:last-child) { border-bottom: 1px solid rgba(0, 0, 0, 0.05); } nav.main-nav li:not(.logo)::after { display: none; } nav.main-nav li:not(.logo) a, nav.main-nav li:not(.logo) a h5 { color: #17181c; } nav.main-nav li:not(.logo) a { font-size: 1.2em; } nav.main-nav li.logo { display: none; } nav.main-nav li.logo a { width: 50px; height: 40px; } nav.indicator-nav { display: none; } nav.social { top: 0; right: 0; height: 100%; background: #17181c; z-index: 9000; width: 80px; } nav.social > ul { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: space-around; -moz-justify-content: space-around; -ms-justify-content: space-around; -o-justify-content: space-around; justify-content: space-around; -ms-flex-pack: center; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; height: 50%; bottom: 0; position: absolute; width: 100%; background: #333; } nav.social > ul > li:not(.trickle-left) { float: none; margin: 0; } nav.social > ul > li:not(.trickle-left) a { display: inline-block; } nav.contact { bottom: 0; left: 0; background: #000; height: 80px; } nav.contact ul li:not(:last-child) { display: none; } nav.contact ul li:last-child { position: fixed; left: 0; top: auto; bottom: 13px; width: calc(100% - 60px); height: auto; } nav.contact ul li:last-child::before { display: none; } nav.contact ul li:last-child h5 { position: relative; right: auto; font-size: 15px; } nav.contact ul li:last-child h5 a { display: inline-block; } nav.left-nextprev, .list-btn:not(.mob-list-btn), nav.topbottom-nextprev { display: none !important; } nav.topbottom-nextprev .arrow { right: 40%; } nav.topbottom-nextprev .next, nav.topbottom-nextprev .prev { position: relative; margin: 0; top: auto; bottom: auto; } nav.topbottom-nextprev .next > span, nav.topbottom-nextprev .prev > span { display: none; } nav.topbottom-nextprev .prev::after { content: ''; position: absolute; bottom: 20%; height: 60%; right: 0%; background-color: rgba(247, 243, 242, 0.17); width: 1px; } .list-nav { position: fixed; overflow-y: scroll; -webkit-overflow-scrolling: touch; overflow-x: hidden; position: fixed; top: 0; left: 0; width: 100%; height: 100%; } .list-nav .non-list > div { background-color: #17181c; padding: 20vh 12vw !important; border-bottom: 1px solid rgba(247, 243, 242, 0.23); } .list-nav .non-list > div:nth-child(1) { background-color: transparent; height: 100vh; } .list-nav ul { background-color: rgba(23, 24, 28, 0.4); } main.directors .list-nav ul { background-color: rgba(23, 24, 28, 0.35); } .list-nav .list-nav-header { display: none; } .list-nav .cta { margin-top: 12px; } .list-nav li { overflow: hidden; background-color: #17181c; padding: 0 12vw !important; } .list-nav li::after { -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -ms-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1); background-color: rgba(247, 243, 242, 0.14); } main.work .list-nav li { height: 85vh; } main.directors .list-nav li:not(:first-child) { padding: 10vh 12vw !important; } main.directors .list-nav li::after { -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -ms-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1); } .list-nav li:nth-child(1) { height: 100vh !important; padding: 0 !important; } .list-nav li p { margin-bottom: 8px; } .list-nav li h2 { margin-bottom: 12px; } .list-nav li::before { display: none; } .list-nav li .list-img-wrap { -webkit-mask-size: 50% !important; -webkit-mask-position: center 55% !important; } } @media only screen and (max-width: 900px) and (max-width: 700px) { .list-nav li .list-img-wrap { -webkit-mask-size: 60% !important; } } @media only screen and (max-width: 900px) and (max-width: 600px) { .list-nav li .list-img-wrap { -webkit-mask-size: 70% !important; } } @media only screen and (max-width: 900px) and (max-width: 500px) { .list-nav li .list-img-wrap { -webkit-mask-size: 85% !important; } } @media only screen and (max-width: 900px) { .list-nav li .list-img-wrap .list-img { position: fixed; top: 0; left: 0; pointer-events: none; } .list-nav li .work-content-copy { position: absolute; top: 35%; left: 30%; } .list-nav li .work-content-copy::before { left: -10px; } .list-nav li { background-color: transparent; } .directors .list-nav li:not(:nth-child(1)) .profile { opacity: 0.2; } .scroll-mouse-marque { display: block; bottom: 45px; left: 50%; z-index: 7510; } main.home .list-nav ul { background-color: transparent; } main.home .list-nav ul li { height: 100vh; border-bottom: 1px solid rgba(247, 243, 242, 0.23); background: url("../img/bg/bg-repeat.jpg") no-repeat center center/1200px 1000px; } main.home .wrapper .mountains-bg { left: 0; margin-top: 0; top: 0%; width: 100vw; height: 100vh; } main.home .wrapper .mountains-bg::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(23, 24, 28, 0.22); } main.home .wrapper .mountains-bg .mountains-bg-img { background-size: cover; } main.home .wrapper .radar-wrap, main.home .wrapper .movie-bars, main.home .wrapper .pano-overlay-content, main.home .wrapper .mountains-vid { display: none; } main.home .wrapper .pano-icon, main.home .wrapper .letter-wrap, main.home .wrapper .work-content, main.home .wrapper .mini-title-lockup { display: none; } main.home .wrapper .panorama-elements-wrap .main-title h4, main.home .wrapper .panorama-elements-wrap .main-title .cta { display: none; } main.home .wrapper .panorama-elements-wrap .main-title .main-lockup { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } main.work .list-nav li:not(:nth-child(1)) { background-color: rgba(0, 0, 0, 0.6); } main.project .hero .main-title h4 { width: 70%; margin-left: -35%; } main.project .youtube-embed { display: none; } main.project nav.project-nav { bottom: 5px; left: 35px; width: 140%; } main.project nav.project-nav h5, main.project nav.project-nav small { display: none; } main.project nav.project-nav li { margin-right: 30px; } main.project .intro-copy .cta-wrap { display: none; } main.project .smoke-gif { display: none; } main.project section.numbers ul { display: block; } main.project section.numbers ul span.digit { display: block; font-size: 6em; margin-bottom: 1em; } main.project .mask-letter-wrap { display: none; } main.project .littlstar-player { width: 85vw; height: auto; padding: 16vw 0 12vw; } .intro-copy { width: 80%; } } @media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1300px), only screen and (min-resolution: 192dpi) and (max-width: 1300px), only screen and (min-resolution: 2dppx) and (max-width: 1300px) { .mountains-vid { display: none !important; } } html.touchevents video:not(.film-noise), html.safaribrowser video:not(.film-noise) { display: none !important; } html.touchevents .js-mask-letter-wrap::before, html.touchevents .directors .profile-move::before, html.touchevents .panorama-elements-wrap .mask-letter::before, html.touchevents main.home .list-nav .mask-letter::before, html.safaribrowser .js-mask-letter-wrap::before, html.safaribrowser .directors .profile-move::before, html.safaribrowser .panorama-elements-wrap .mask-letter::before, html.safaribrowser main.home .list-nav .mask-letter::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000 url("../img/bg/letter-smoke-opt.gif") no-repeat center center/cover; } html.touchevents .letter-list li:nth-child(2) .js-mask-letter-wrap::before, html.safaribrowser .letter-list li:nth-child(2) .js-mask-letter-wrap::before { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } html:not(.backgroundblendmode) video { display: none !important; } html:not(.backgroundblendmode) .mask-letter { background-color: transparent; opacity: 0.22; } html:not(.backgroundblendmode) html.webkitbrowser [data-letter="home"] { background: url("../img/ui/letter-masks/__w.svg") no-repeat center center; } html:not(.backgroundblendmode) .directors .vertigo-bg { display: none; } html:not(.backgroundblendmode) .directors .director > div { width: 600px; height: 600px; margin: -300px 0 0 -300px; } html:not(.backgroundblendmode) .directors .director > div.further-content > div { padding: 0 6em; } html:not(.backgroundblendmode) .directors .director > div .profile { opacity: 0.65; } .contact-wrap { display: none; } .contact-wrap .contact-image > *, .contact-wrap .contact-content > * { opacity: 0; -webkit-transition: 0.55s cubic-bezier(0.52, 0.01, 0.16, 1) 0.9s; -moz-transition: 0.55s cubic-bezier(0.52, 0.01, 0.16, 1) 0.9s; transition: 0.55s cubic-bezier(0.52, 0.01, 0.16, 1) 0.9s; } .contact-wrap .contact-image { background-color: #17181c; height: 100%; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); -webkit-transition: 0.57s cubic-bezier(0.52, 0.01, 0.16, 1); -moz-transition: 0.57s cubic-bezier(0.52, 0.01, 0.16, 1); transition: 0.57s cubic-bezier(0.52, 0.01, 0.16, 1); } .contact-wrap .contact-image div { -webkit-transition: opacity 0.55s cubic-bezier(0.52, 0.01, 0.16, 1) 0.9s, -webkit-transform 2.5s cubic-bezier(0.62, 0.02, 0.34, 1) 1.2s; -moz-transition: opacity 0.55s cubic-bezier(0.52, 0.01, 0.16, 1) 0.9s, -moz-transform 2.5s cubic-bezier(0.62, 0.02, 0.34, 1) 1.2s; transition: opacity 0.55s cubic-bezier(0.52, 0.01, 0.16, 1) 0.9s, transform 2.5s cubic-bezier(0.62, 0.02, 0.34, 1) 1.2s; -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .contact-wrap .contact-content { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition: 0.72s cubic-bezier(0.52, 0.01, 0.16, 1) 0.24s; -moz-transition: 0.72s cubic-bezier(0.52, 0.01, 0.16, 1) 0.24s; transition: 0.72s cubic-bezier(0.52, 0.01, 0.16, 1) 0.24s; height: 100%; background-color: #f7f3f2; } .contact-wrap .contact-content > div { width: 60%; left: 22%; margin-top: -3vw; } .contact-wrap .contact-content ul { margin: 6em 0 2.5em; } .contact-wrap .contact-content ul li:nth-child(1) { margin: 0 15px 0 0; } .contact-wrap .contact-content ul li:nth-child(2) { width: 70%; } .contact-wrap .contact-content ul li p { /*margin-bottom: 2em;*/ } .contact-wrap .contact-content p, .contact-wrap .contact-content h4, .contact-wrap .contact-content h5, .contact-wrap .contact-content small, .contact-wrap .contact-content span { color: #17181c; text-align: left; display: block; } .contact-wrap .contact-content .content-block { width: 100%; left: 0; margin-bottom: 3em; } .contact-wrap .contact-content .content-block p { font-weight: 100; font-size: 1.3vw; } .contact-wrap .contact-content .cta { display: block; margin-bottom: 10px; } .contact-wrap .contact-bar { position: absolute; width: 100%; height: 7vw; background-color: #17181c; -webkit-transition: 0.78s cubic-bezier(0.52, 0.01, 0.16, 1) 0.7s; -moz-transition: 0.78s cubic-bezier(0.52, 0.01, 0.16, 1) 0.7s; transition: 0.78s cubic-bezier(0.52, 0.01, 0.16, 1) 0.7s; -webkit-transform: translateY(105%); -moz-transform: translateY(105%); -ms-transform: translateY(105%); -o-transform: translateY(105%); transform: translateY(105%); } .contact-wrap.active .contact-image, .contact-wrap.active .contact-content { -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } .contact-wrap.active .contact-image > *, .contact-wrap.active .contact-content > * { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .contact-wrap.active .contact-bar { -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } .contact-wrap .google-map { -webkit-filter: grayscale(1) brightness(0.9) contrast(1.15); } main.people .main-title { height: 90%; } main.people nav.contact, main.people .list-btn:not(.mob-list-btn) { display: none; } main.people .people-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #151616 url("../img/people/bg.jpg") no-repeat top center/100%; } main.people .people-list { width: 96%; overflow: hidden; margin: 0 auto; padding-bottom: 4vw; } main.people .person { width: 29.2%; height: 27vw; float: left; margin: 0 2% 4%; } main.people .person h4 { font-size: 1.5em; margin-bottom: 0.25em; } main.people .person .bottom-area { position: absolute; bottom: 0; left: 0; } main.people .person h5.person-position { position: absolute; width: 100%; bottom: -15px; left: 0; opacity: 0; -webkit-transition: 0.34s cubic-bezier(0.62, 0.02, 0.34, 1); -moz-transition: 0.34s cubic-bezier(0.62, 0.02, 0.34, 1); transition: 0.34s cubic-bezier(0.62, 0.02, 0.34, 1); } main.people .person .arc-wrap { -webkit-transition: 0.34s cubic-bezier(0.62, 0.02, 0.34, 1); -moz-transition: 0.34s cubic-bezier(0.62, 0.02, 0.34, 1); transition: 0.34s cubic-bezier(0.62, 0.02, 0.34, 1); } main.people .person:hover { cursor: pointer; } main.people .person:hover .arc-wrap { opacity: 0; } main.people .person:hover .person-img { -webkit-transform: translateZ(0) scale(1.04, 1.04); -moz-transform: translateZ(0) scale(1.04, 1.04); -ms-transform: translateZ(0) scale(1.04, 1.04); -o-transform: translateZ(0) scale(1.04, 1.04); transform: translateZ(0) scale(1.04, 1.04); -webkit-transition-duration: 2s; -moz-transition-duration: 2s; transition-duration: 2s; -webkit-filter: saturate(100%); } main.people .person:hover .person-img .person-non-vr-img { opacity: 1; } main.people .person:hover .person-preview-content { -webkit-transform: translateY(-35px); -moz-transform: translateY(-35px); -ms-transform: translateY(-35px); -o-transform: translateY(-35px); transform: translateY(-35px); } main.people .person:hover .person-preview-content::after { -webkit-transform: scaleY(0.66) translateY(14px); -moz-transform: scaleY(0.66) translateY(14px); -ms-transform: scaleY(0.66) translateY(14px); -o-transform: scaleY(0.66) translateY(14px); transform: scaleY(0.66) translateY(14px); } main.people .person:hover h5.person-position { opacity: 1; } main.people .person:hover .hover-box span:nth-child(2), main.people .person:hover .hover-box span:nth-child(3) { -webkit-transition-delay: 0.26s; -moz-transition-delay: 0.26s; transition-delay: 0.26s; } main.people .person:hover .hover-box span:nth-child(1), main.people .person:hover .hover-box span:nth-child(2), main.people .person:hover .hover-box span:nth-child(3) { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } main.people .person:hover .hover-box span:nth-child(4)::before, main.people .person:hover .hover-box span:nth-child(4)::after { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); -webkit-transition-delay: 0.55s; -moz-transition-delay: 0.55s; transition-delay: 0.55s; } main.people .person .person-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; } main.people .person .person-content::before { content: ''; position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; background-color: #FFF; -webkit-transition: 0.55s cubic-bezier(0.52, 0.01, 0.16, 1); -moz-transition: 0.55s cubic-bezier(0.52, 0.01, 0.16, 1); transition: 0.55s cubic-bezier(0.52, 0.01, 0.16, 1); -webkit-transform-origin: 100% 0; -moz-transform-origin: 100% 0; -ms-transform-origin: 100% 0; -o-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-transform: scaleX(0); -moz-transform: scaleX(0); -ms-transform: scaleX(0); -o-transform: scaleX(0); transform: scaleX(0); } main.people .person .person-content .text-content { position: absolute; top: 40px; left: 40px; right: 30px; bottom: 80px; overflow-y: scroll; } main.people .person .person-content .text-content::-webkit-scrollbar { width: 4px; background: #c8c8c8; } main.people .person .person-content .text-content::-webkit-scrollbar-thumb { background: #17181c; } main.people .person .person-content .text-content, main.people .person .person-content .bottom-area > * { opacity: 0; -webkit-transition: 0.385s cubic-bezier(0.62, 0.02, 0.34, 1); -moz-transition: 0.385s cubic-bezier(0.62, 0.02, 0.34, 1); transition: 0.385s cubic-bezier(0.62, 0.02, 0.34, 1); } main.people .person .person-content .text-content * { color: #17181c; text-align: left; } main.people .person .person-content .person-description { margin-top: 18px; padding-top: 20px; padding-right: 20px; } main.people .person .person-content .person-description::before { content: ''; position: absolute; width: 18px; top: 0; height: 2px; background-color: #17181c; -webkit-transition: 0.55s cubic-bezier(0.52, 0.01, 0.16, 1); -moz-transition: 0.55s cubic-bezier(0.52, 0.01, 0.16, 1); transition: 0.55s cubic-bezier(0.52, 0.01, 0.16, 1); -webkit-transform-origin: 0% 0; -moz-transform-origin: 0% 0; -ms-transform-origin: 0% 0; -o-transform-origin: 0% 0; transform-origin: 0% 0; -webkit-transform: scaleX(0); -moz-transform: scaleX(0); -ms-transform: scaleX(0); -o-transform: scaleX(0); transform: scaleX(0); } main.people .person .person-content .bottom-area { position: absolute; left: 40px; bottom: 40px; } main.people .person .person-content .social li { display: inline-block; margin: 0 15px 0 0; } main.people .person .person-content .social li a { width: 18px; height: 18px; } main.people .person[data-active="true"] .person-content { pointer-events: auto; } main.people .person[data-active="true"] .person-content .text-content, main.people .person[data-active="true"] .person-content .bottom-area > * { opacity: 1; -webkit-transition-delay: 0.33s; -moz-transition-delay: 0.33s; transition-delay: 0.33s; } main.people .person[data-active="true"] .person-content::before { -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -ms-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1); } main.people .person[data-active="true"] .person-content .person-description::before { -webkit-transition-delay: 0.65s; -moz-transition-delay: 0.65s; transition-delay: 0.65s; -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -ms-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1); } main.people .person-img-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; -webkit-transform: translateZ(0) scale(1, 1); -moz-transform: translateZ(0) scale(1, 1); -ms-transform: translateZ(0) scale(1, 1); -o-transform: translateZ(0) scale(1, 1); transform: translateZ(0) scale(1, 1); } main.people .person-img-wrap .person-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transition: 0.45s cubic-bezier(0.62, 0.02, 0.34, 1); -moz-transition: 0.45s cubic-bezier(0.62, 0.02, 0.34, 1); transition: 0.45s cubic-bezier(0.62, 0.02, 0.34, 1); -webkit-transform: translateZ(0) scale(1, 1); -moz-transform: translateZ(0) scale(1, 1); -ms-transform: translateZ(0) scale(1, 1); -o-transform: translateZ(0) scale(1, 1); transform: translateZ(0) scale(1, 1); -webkit-filter: saturate(40%); -webkit-backface-visibility: hidden; } main.people .person-img-wrap .person-img div { position: absolute; top: -2%; left: -2%; width: 104%; height: 104%; background-size: cover; background-repeat: no-repeat; background-position: center center; } main.people .person-img-wrap .person-non-vr-img { -webkit-transition: 0.45s cubic-bezier(0.52, 0.01, 0.16, 1); -moz-transition: 0.45s cubic-bezier(0.52, 0.01, 0.16, 1); transition: 0.45s cubic-bezier(0.52, 0.01, 0.16, 1); opacity: 0; } main.people .person-preview-content { width: 100%; bottom: 20px; -webkit-transition: 0.45s cubic-bezier(0.52, 0.01, 0.16, 1); -moz-transition: 0.45s cubic-bezier(0.52, 0.01, 0.16, 1); transition: 0.45s cubic-bezier(0.52, 0.01, 0.16, 1); } main.people .person-preview-content::after { content: ''; position: absolute; left: 50%; width: 1px; height: 40px; bottom: -34px; background-color: #FFF; -webkit-transition: 0.45s cubic-bezier(0.52, 0.01, 0.16, 1); -moz-transition: 0.45s cubic-bezier(0.52, 0.01, 0.16, 1); transition: 0.45s cubic-bezier(0.52, 0.01, 0.16, 1); -webkit-transform: scaleY(0.83) translateY(0px); -moz-transform: scaleY(0.83) translateY(0px); -ms-transform: scaleY(0.83) translateY(0px); -o-transform: scaleY(0.83) translateY(0px); transform: scaleY(0.83) translateY(0px); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; } main.people .hover-box { position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; } main.people .hover-box span { position: absolute; } main.people .hover-box span:nth-child(1), main.people .hover-box span:nth-child(2), main.people .hover-box span:nth-child(3) { background-color: #FFF; -webkit-transition: 0.45s cubic-bezier(0.52, 0.01, 0.16, 1); -moz-transition: 0.45s cubic-bezier(0.52, 0.01, 0.16, 1); transition: 0.45s cubic-bezier(0.52, 0.01, 0.16, 1); } main.people .hover-box span:nth-child(2), main.people .hover-box span:nth-child(3) { width: 1px; height: 100%; -webkit-transform: scale(1, 0); -moz-transform: scale(1, 0); -ms-transform: scale(1, 0); -o-transform: scale(1, 0); transform: scale(1, 0); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transition-delay: 0.26s; -moz-transition-delay: 0.26s; transition-delay: 0.26s; top: 0; } main.people .hover-box span:nth-child(1), main.people .hover-box span:nth-child(4) { height: 1px; width: 100%; } main.people .hover-box span:nth-child(1) { left: 0; bottom: 0; -webkit-transform: scale(0, 1); -moz-transform: scale(0, 1); -ms-transform: scale(0, 1); -o-transform: scale(0, 1); transform: scale(0, 1); } main.people .hover-box span:nth-child(2) { left: 0; } main.people .hover-box span:nth-child(3) { right: 0; } main.people .hover-box span:nth-child(4) { top: 0; left: 0; } main.people .hover-box span:nth-child(4)::before, main.people .hover-box span:nth-child(4)::after { content: ''; position: absolute; top: 0; -webkit-transform: scale(0, 1); -moz-transform: scale(0, 1); -ms-transform: scale(0, 1); -o-transform: scale(0, 1); transform: scale(0, 1); width: 50%; height: 1px; background-color: #FFF; -webkit-transition: 0.45s cubic-bezier(0.52, 0.01, 0.16, 1); -moz-transition: 0.45s cubic-bezier(0.52, 0.01, 0.16, 1); transition: 0.45s cubic-bezier(0.52, 0.01, 0.16, 1); } main.people .hover-box span:nth-child(4)::before { -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; left: 0%; } main.people .hover-box span:nth-child(4)::after { -webkit-transform-origin: 100% 0; -moz-transform-origin: 100% 0; -ms-transform-origin: 100% 0; -o-transform-origin: 100% 0; transform-origin: 100% 0; left: 50%; } @media only screen and (max-width: 1000px) { main.people .people-list { width: 85%; } main.people .person { width: 46%; height: 40vw; } } @media only screen and (max-width: 700px) { main.people .people-list { width: 85%; } main.people .person { width: 100%; float: none; height: 85vw; margin: 0 0 8%; } } @-webkit-keyframes scaleYUpDown { 0% { -webkit-transform: scaleY(1); } 100% { -webkit-transform: scaleY(0); } } @-moz-keyframes scaleYUpDown { 0% { -moz-transform: scaleY(1); } 100% { -moz-transform: scaleY(0); } } @keyframes scaleYUpDown { 0% { -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); transform: scaleY(1); } 100% { -webkit-transform: scaleY(0); -moz-transform: scaleY(0); -ms-transform: scaleY(0); -o-transform: scaleY(0); transform: scaleY(0); } } @-webkit-keyframes scrollWheel { 0% { -webkit-transform: translateY(0); } 100% { -webkit-transform: translateY(6px); } } @-moz-keyframes scrollWheel { 0% { -moz-transform: translateY(0); } 100% { -moz-transform: translateY(6px); } } @keyframes scrollWheel { 0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(6px); -moz-transform: translateY(6px); -ms-transform: translateY(6px); -o-transform: translateY(6px); transform: translateY(6px); } } @-webkit-keyframes rotateMouse { 0% { -webkit-transform: translateX(10px) rotate(10deg); } 100% { -webkit-transform: translateX(-10px) rotate(-10deg); } } @-moz-keyframes rotateMouse { 0% { -moz-transform: translateX(10px) rotate(10deg); } 100% { -moz-transform: translateX(-10px) rotate(-10deg); } } @keyframes rotateMouse { 0% { -webkit-transform: translateX(10px) rotate(10deg); -moz-transform: translateX(10px) rotate(10deg); -ms-transform: translateX(10px) rotate(10deg); -o-transform: translateX(10px) rotate(10deg); transform: translateX(10px) rotate(10deg); } 100% { -webkit-transform: translateX(-10px) rotate(-10deg); -moz-transform: translateX(-10px) rotate(-10deg); -ms-transform: translateX(-10px) rotate(-10deg); -o-transform: translateX(-10px) rotate(-10deg); transform: translateX(-10px) rotate(-10deg); } } @-webkit-keyframes scrollWheelTouch { 0% { background-color: rgba(247, 243, 242, 0); } 5% { -webkit-transform: translateY(0px); } 10% { background-color: #f7f3f2; } 20% { background-color: #f7f3f2; } 40% { background-color: rgba(247, 243, 242, 0); } 50% { -webkit-transform: translateY(15px); } 60% { background-color: rgba(247, 243, 242, 0); } 65% { -webkit-transform: translateY(15px); } 70% { background-color: #f7f3f2; } 85% { background-color: #f7f3f2; } 100% { -webkit-transform: translateY(0px); background-color: rgba(247, 243, 242, 0); } } @-moz-keyframes scrollWheelTouch { 0% { background-color: rgba(247, 243, 242, 0); } 5% { -moz-transform: translateY(0px); } 10% { background-color: #f7f3f2; } 20% { background-color: #f7f3f2; } 40% { background-color: rgba(247, 243, 242, 0); } 50% { -moz-transform: translateY(15px); } 60% { background-color: rgba(247, 243, 242, 0); } 65% { -moz-transform: translateY(15px); } 70% { background-color: #f7f3f2; } 85% { background-color: #f7f3f2; } 100% { -moz-transform: translateY(0px); background-color: rgba(247, 243, 242, 0); } } @keyframes scrollWheelTouch { 0% { background-color: rgba(247, 243, 242, 0); } 5% { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } 10% { background-color: #f7f3f2; } 20% { background-color: #f7f3f2; } 40% { background-color: rgba(247, 243, 242, 0); } 50% { -webkit-transform: translateY(15px); -moz-transform: translateY(15px); -ms-transform: translateY(15px); -o-transform: translateY(15px); transform: translateY(15px); } 60% { background-color: rgba(247, 243, 242, 0); } 65% { -webkit-transform: translateY(15px); -moz-transform: translateY(15px); -ms-transform: translateY(15px); -o-transform: translateY(15px); transform: translateY(15px); } 70% { background-color: #f7f3f2; } 85% { background-color: #f7f3f2; } 100% { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); background-color: rgba(247, 243, 242, 0); } } @-webkit-keyframes pano { 0% { -webkit-transform: translateX(-5%); } 100% { -webkit-transform: translateX(5%); } } @-moz-keyframes pano { 0% { -moz-transform: translateX(-5%); } 100% { -moz-transform: translateX(5%); } } @keyframes pano { 0% { -webkit-transform: translateX(-5%); -moz-transform: translateX(-5%); -ms-transform: translateX(-5%); -o-transform: translateX(-5%); transform: translateX(-5%); } 100% { -webkit-transform: translateX(5%); -moz-transform: translateX(5%); -ms-transform: translateX(5%); -o-transform: translateX(5%); transform: translateX(5%); } } @-webkit-keyframes hissing { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @-moz-keyframes hissing { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } } @keyframes hissing { from { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes rotate3dpano { 0% { -webkit-transform: rotate(20deg); background-color: rgba(255, 255, 255, 0); } 30% { background-color: white; } 50% { background-color: white; } 80% { background-color: rgba(255, 255, 255, 0); } 100% { -webkit-transform: rotate(340deg); background-color: rgba(255, 255, 255, 0); } } @-moz-keyframes rotate3dpano { 0% { -moz-transform: rotate(20deg); background-color: rgba(255, 255, 255, 0); } 30% { background-color: white; } 50% { background-color: white; } 80% { background-color: rgba(255, 255, 255, 0); } 100% { -moz-transform: rotate(340deg); background-color: rgba(255, 255, 255, 0); } } @keyframes rotate3dpano { 0% { -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -ms-transform: rotate(20deg); -o-transform: rotate(20deg); transform: rotate(20deg); background-color: rgba(255, 255, 255, 0); } 30% { background-color: white; } 50% { background-color: white; } 80% { background-color: rgba(255, 255, 255, 0); } 100% { -webkit-transform: rotate(340deg); -moz-transform: rotate(340deg); -ms-transform: rotate(340deg); -o-transform: rotate(340deg); transform: rotate(340deg); background-color: rgba(255, 255, 255, 0); } } /*# sourceMappingURL=main.css.map */ .description li{ color: #000; /* text-transform: lowercase; */ font-size: 14px; line-height: 21px; }