@charset "UTF-8";
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { border: 0; font: inherit; font-size: 100%; margin: 0; padding: 0; vertical-align: baseline; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

body { line-height: 1; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote::before, blockquote::after, q::before, q::after { content: ''; }

table { border-collapse: collapse; border-spacing: 0; }

:root { --scrollY: 0; --shiftX: 0; --shiftY: 0; }

.noscroll { overflow: hidden; }

html { scroll-behavior: smooth; }

body { color: #f5f5f5; font-family: "Roboto", Arial, Helvetica, sans-serif; font-size: 18px; position: relative; -webkit-animation-name: colorChange; animation-name: colorChange; -webkit-animation-delay: calc(var(--scrollY) * -1s); animation-delay: calc(var(--scrollY) * -1s); -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; -webkit-animation-timing-function: steps(10, end); animation-timing-function: steps(10, end); }

.no-js body { color: #60f26d; }

@media (min-width: 600px) { body { font-size: 20px; } }

body.green-yellow { color: #60f26d; -webkit-animation-name: colorChangeYellow; animation-name: colorChangeYellow; }

body.coral-magenta { color: #f47075; -webkit-animation-name: colorChangeMagenta; animation-name: colorChangeMagenta; }

body.indigo-cyan { color: #7882df; -webkit-animation-name: colorChangeCyan; animation-name: colorChangeCyan; }

sub { vertical-align: sub; }

img, svg, video { vertical-align: middle; }

section { position: relative; z-index: 1; }

b { font-weight: 500; }

em { font-style: italic; }

@-webkit-keyframes colorChange { to { color: #f5f5f5; } }

@keyframes colorChange { to { color: #f5f5f5; } }

@-webkit-keyframes colorChangeYellow { to { color: #f0f400; } }

@keyframes colorChangeYellow { to { color: #f0f400; } }

@-webkit-keyframes colorChangeMagenta { to { color: #db48e2; } }

@keyframes colorChangeMagenta { to { color: #db48e2; } }

@-webkit-keyframes colorChangeCyan { to { color: #2df3df; } }

@keyframes colorChangeCyan { to { color: #2df3df; } }

.content { box-sizing: border-box; overflow: hidden; position: relative; width: 100%; }

.container { box-sizing: border-box; display: -webkit-box; display: flex; margin: 0 auto; max-width: 1200px; padding: 2em; position: relative; width: 100%; }

.container__centered { -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; }

@media (min-width: 2000px) { .container__centered { min-width: 100vw; } }

.container__left { -webkit-box-align: start; align-items: flex-start; -webkit-box-pack: start; justify-content: flex-start; }

.container__right { -webkit-box-align: end; align-items: flex-end; -webkit-box-pack: end; justify-content: flex-end; }

.text { color: #000; }

h1 { box-sizing: border-box; font-size: 2.2em; font-weight: 500; letter-spacing: -0.0166666667em; line-height: 1.0666666667; position: relative; }

@media (min-width: 600px) { h1 { font-size: 3.25em; } }

h1.postline::after { background: currentColor; bottom: -2em; content: ''; height: 6px; left: 0; position: absolute; -webkit-transform: translateX(-100%) scaleX(0); transform: translateX(-100%) scaleX(0); -webkit-transform-origin: left center; transform-origin: left center; -webkit-transition: -webkit-transform 0.5s 1s cubic-bezier(0.77, 0, 0.175, 1); transition: -webkit-transform 0.5s 1s cubic-bezier(0.77, 0, 0.175, 1); transition: transform 0.5s 1s cubic-bezier(0.77, 0, 0.175, 1); transition: transform 0.5s 1s cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform 0.5s 1s cubic-bezier(0.77, 0, 0.175, 1); width: 1.25em; }

h1.postline.in-view::after { -webkit-transform: translateX(0) scaleX(1); transform: translateX(0) scaleX(1); }

h2 { box-sizing: border-box; font-size: 2em; font-weight: 500; letter-spacing: -0.0416666667em; line-height: 1.4583333333; position: relative; }

@media (min-width: 600px) { h2 { font-size: 2.5em; } }

h4 { font-weight: normal; font-size: 13px; text-transform: uppercase; letter-spacing: 0.3076923077em; }

p { font-weight: 300; line-height: 1.7222222222; position: relative; letter-spacing: -0.0138888889em; margin-bottom: 2em; margin-top: 1em; max-width: 600px; }

p .underline { position: relative; }

p .underline::after { height: 33%; left: 0; width: 100%; }

p a::after { background: currentColor; bottom: 0; content: ''; display: inline-block; height: 33%; left: 0; opacity: 0.25; position: absolute; width: 100%; z-index: 1; }

p a .text { position: relative; z-index: 2; }

a { color: currentColor; position: relative; text-decoration: none; }

a:focus { outline: 0; }

a:focus .underline::after { -webkit-transform: scaleX(1); transform: scaleX(1); }

a .underline::after { background: currentColor; bottom: 0; content: ''; display: inline-block; opacity: 0.25; position: absolute; -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.77, 0, 0.175, 1); transition: -webkit-transform 0.5s cubic-bezier(0.77, 0, 0.175, 1); transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1); transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform 0.5s cubic-bezier(0.77, 0, 0.175, 1); -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: left center; transform-origin: left center; z-index: 1; }

a:hover .underline::after { -webkit-transform: scaleX(1); transform: scaleX(1); }

.cta--wrap { box-sizing: border-box; display: block; position: relative; -webkit-transition: opacity 1s cubic-bezier(0.77, 0, 0.175, 1); transition: opacity 1s cubic-bezier(0.77, 0, 0.175, 1); }

.button { border: 2px solid currentColor; box-sizing: border-box; display: inline-block; overflow: hidden; padding: 1em 3em; position: relative; -webkit-transition: border-color 0.5s cubic-bezier(0.77, 0, 0.175, 1); transition: border-color 0.5s cubic-bezier(0.77, 0, 0.175, 1); }

.button .text { -webkit-transition: color 0.5s cubic-bezier(0.77, 0, 0.175, 1); transition: color 0.5s cubic-bezier(0.77, 0, 0.175, 1); }

.button:before { background: #000; content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: -1; -webkit-transform: translateX(-100%); transform: translateX(-100%); -webkit-transform-origin: left center; transform-origin: left center; -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.77, 0, 0.175, 1); transition: -webkit-transform 0.5s cubic-bezier(0.77, 0, 0.175, 1); transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1); transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform 0.5s cubic-bezier(0.77, 0, 0.175, 1); }

.button:hover, .button:focus { border-color: #000; }

.button:hover .text, .button:focus .text { color: #fff; z-index: 10; }

.button:hover:before, .button:focus:before { -webkit-transform: translateX(0); transform: translateX(0); }

.hero { -webkit-box-align: start; align-items: flex-start; display: -webkit-box; display: flex; min-height: 90vmin; width: 100%; }

.hero--message { margin-left: 0; max-width: 75%; z-index: 10; }

@media (min-width: 600px) { .hero--message { margin-left: auto; max-width: 1200px; } }

.hero--message h1 { font-weight: 300; margin-top: 5vmin; margin-bottom: 15vmin; position: relative; word-wrap: break-word; white-space: normal; }

@media (min-width: 480px) { .hero--message h1 { margin-top: 25vmin; } }

@media (min-width: 600px) { .hero--message h1 { -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; max-width: 530px; word-wrap: normal; } }

.hero--message h1.postline::after { bottom: 0; top: 200px; }

@media (min-width: 520px) { .hero--message h1.postline::after { top: 300px; } }

.hero--bg--shapes { bottom: 0; height: 90%; position: absolute; max-height: 100vmin; right: -40px; width: 80%; visibility: hidden; z-index: 1; }

.one { -webkit-box-align: center; align-items: center; background: #f5f5f5; display: -webkit-box; display: flex; flex-wrap: wrap; margin-bottom: calc(30vmin + 3em); }

@media (min-width: 1200px) { .one { margin-bottom: calc(30vmin + 300px); } }

.one::before { background: #f5f5f5; -webkit-clip-path: polygon(1px 100%, 100% 0, 100% 100%, 0 100%); clip-path: polygon(1px 100%, 100% 0, 100% 100%, 0 100%); content: ''; height: 15vmin; left: 0; position: absolute; top: calc(-15vmin + 1px); width: 100%; }

.one::after { background: #f5f5f5; -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 1px); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 1px); bottom: calc(-15vmin + 1px); content: ''; height: 15vmin; left: 0; position: absolute; width: 100%; }

.one .container { margin: 2em auto; }

.one blockquote { max-width: 650px; }

blockquote { margin-bottom: 2em; position: relative; }

blockquote::after { content: ''; clear: both; display: table; }

blockquote + .cta--wrap { margin-top: 2em; }

blockquote .blockquote--ornament { color: #e0e0e0; display: block; right: 0; position: absolute; top: -3em; width: 6em; }

@media (min-width: 600px) { blockquote .blockquote--ornament { right: 4em; top: -2em; width: 8em; } }

blockquote h1 { font-weight: 300; margin-bottom: 0.7em; max-width: 900px; }

@media (min-width: 600px) { blockquote h1 { padding-right: 1em; } }

blockquote .source::before { content: '— '; }

.img--wrap { display: -webkit-box; display: flex; flex-wrap: wrap; max-width: 800px; position: relative; width: 100%; z-index: 10; }

.img--wrap__float-left { margin-left: -2em; width: calc(100% + 2em); }

@media (min-width: 1200px) { .img--wrap__float-left { margin-left: calc(-50vw + 600px - 2em); } }

@media (min-width: 1440px) { .img--wrap__float-left { margin-left: calc(-120px - 2em); width: 100%; } }

.img--wrap__float-right { margin-right: -2em; width: calc(100% + 2em); }

@media (min-width: 1200px) { .img--wrap__float-right { margin-right: calc(-50vw + 600px - 2em); } }

@media (min-width: 1440px) { .img--wrap__float-right { margin-right: calc(-120px - 2em); width: 100%; } }

.img--wrap__float-top { margin-bottom: 3em; margin-top: -3em; }

@media (min-width: 1200px) { .img--wrap__float-top { margin-bottom: 120px; margin-top: -180px; } }

.img--wrap__float-bottom { margin-bottom: -6em; margin-top: 3em; }

@media (min-width: 1200px) { .img--wrap__float-bottom { margin-bottom: -300px; margin-top: 120px; } }

.img--wrap__vert { max-width: 420px; }

@media (min-aspect-ratio: 4 / 5) { .img--wrap__vert { max-width: 600px; width: 60vmin; }
  .img--wrap__vert svg { max-height: 600px; height: 95vmin; } }

@media (min-width: 1200px) { .img--wrap__vert { padding-right: calc(120px + 2em); }
  .img--wrap__vert__extra-padding-right { padding-right: calc(240px + 4em); } }

.img--wrap__vert__still { max-width: 90vmin; width: 600px; }

@media (min-width: 1200px) { .img--wrap__vert__still { padding-right: calc(120px + 2em); } }

.img--wrap__vert__still .img--wrap--inner img { -webkit-animation: none; animation: none; width: 100%; }

.img--wrap__video { margin-left: -2em; max-width: 1200px; width: calc(100% + 4em); }

@media (min-width: 1200px) { .img--wrap__video { margin-left: 0; width: 100%; } }

.img--wrap--inner { background: currentColor; box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.15); overflow: hidden; position: relative; -webkit-transform-origin: top left; transform-origin: top left; width: 100%; z-index: 100; }

@-webkit-keyframes panLeft { to { -webkit-transform: translateX(-20%); transform: translateX(-20%); } }

@keyframes panLeft { to { -webkit-transform: translateX(-20%); transform: translateX(-20%); } }

.img--wrap--inner img { -webkit-animation-name: panLeft; animation-name: panLeft; -webkit-animation-delay: calc(var(--scrollY) * -1s); animation-delay: calc(var(--scrollY) * -1s); -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-play-state: paused; animation-play-state: paused; -webkit-animation-timing-function: linear; animation-timing-function: linear; display: block; position: absolute; -webkit-transition: opacity 1.6s cubic-bezier(0.165, 0.84, 0.44, 1); transition: opacity 1.6s cubic-bezier(0.165, 0.84, 0.44, 1); width: 120%; z-index: 10; }

.img--wrap--inner svg, .img--wrap--inner video { background: currentColor; display: block; width: 100%; z-index: 10; }

.img--wrap--inner svg.placeholder { box-shadow: 0 0 35px -15px rgba(0, 0, 0, 0.5); left: 0; opacity: 0; position: relative; top: 0; -webkit-transition: opacity 1.6s cubic-bezier(0.165, 0.84, 0.44, 1); transition: opacity 1.6s cubic-bezier(0.165, 0.84, 0.44, 1); width: 100%; }

@supports ((-o-object-fit: contain) or (object-fit: contain)) { .js .img--wrap--inner svg.placeholder { height: auto; opacity: 1; } }

.img--wrap--inner svg.placeholder.in-view { opacity: 0; }

.img--caption { display: inline-block; left: 0; position: absolute; top: calc(100% + 1em); width: 100%; }

.img--caption a { display: inline-block; max-width: 70%; vertical-align: text-top; }

.img--caption span { font-style: italic; font-size: 14px; position: relative; }

.img--caption:hover + .img--wrap--inner img { opacity: 0.5; }

.img--caption:hover .underline::after { -webkit-transform: scaleX(1); transform: scaleX(1); }

.img--caption::before { background: currentColor; border-radius: 50%; content: ''; display: inline-block; height: 0.5em; margin: 0 0.5em 0.125em 1em; position: relative; pointer-events: none; width: 0.5em; }

.img--caption .underline::after { height: 33%; left: 0; width: 100%; }

.two .img--wrap { margin-bottom: calc(15vmin + 4em); margin-top: 15vmin; }

.two .container__split { display: -webkit-box; display: flex; flex-wrap: wrap; }

.two .container__split > * { width: 100%; }

@media (min-width: 1200px) { .two .container__split > *:nth-of-type(1) { width: 60%; }
  .two .container__split > *:nth-of-type(2) { width: 40%; } }

.block { margin-bottom: 2em; }

.three { margin-bottom: 0; margin-top: calc(15vmin + 3em); padding-bottom: 35vmin; }

@media (min-width: 1200px) { .three { margin-top: calc(15vmin + 120px); padding-bottom: 15vmin; } }

.three .container { margin: 3em auto; }

@media (min-width: 1200px) { .three .container { margin: 6em auto; } }

.three .video-wrap { background: #f5f5f5; margin-top: calc(15vmin + 3em); position: relative; }

.three .video-wrap::before { background: #f5f5f5; -webkit-clip-path: polygon(0 0, 1px 0, 100% 100%, 0 100%); clip-path: polygon(0 0, 1px 0, 100% 100%, 0 100%); content: ''; height: 25vmin; left: 0; position: absolute; top: calc(-25vmin + 1px); width: 100%; }

.three .video-wrap::after { background: #f5f5f5; -webkit-clip-path: polygon(0 100%, 100% 1px, 100% 0, 0 0); clip-path: polygon(0 100%, 100% 1px, 100% 0, 0 0); bottom: calc(-25vmin + 1px); content: ''; height: 25vmin; left: 0; position: absolute; width: 100%; }

.four { min-height: 25vmin; padding-bottom: 2em; }

.four .blockquote--ornament { right: 2em; }

.five { margin-top: 6em; }

.quote--wrap { margin-bottom: 2em; }

.graph--wrap { display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; flex-wrap: wrap; margin: 2em auto; }

.graph { -webkit-box-align: center; align-items: center; box-sizing: border-box; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; margin-bottom: 2em; padding: 0.5em; position: relative; width: 100%; }

@media (min-width: 600px) { .graph { width: 50%; } }

.graph .graph--text { -webkit-box-align: center; align-items: center; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; position: absolute; left: 0; top: 0; right: 0; bottom: 0; }

.graph .graph--text h2, .graph .graph--text p { margin: 0; text-align: center; }

.graph.graph__payback path { -webkit-transition: fill 3s 1.5s cubic-bezier(0.77, 0, 0.175, 1); transition: fill 3s 1.5s cubic-bezier(0.77, 0, 0.175, 1); }

.graph.graph__payback .graph--text .text { color: #fff; -webkit-transition: color 3s 1.5s cubic-bezier(0.77, 0, 0.175, 1); transition: color 3s 1.5s cubic-bezier(0.77, 0, 0.175, 1); }

.graph.graph__payback.in-view path { fill: #fff; }

.graph.graph__payback.in-view .graph--text .text { color: #000; }

.graph .draw-in { stroke-dasharray: 628.407, 628.407; stroke-dashoffset: 565.566; }

@supports ((-o-object-fit: contain) or (object-fit: contain)) { .graph .draw-in { stroke-dasharray: 0; stroke-dashoffset: 0; } }

.graph svg { display: block; max-width: 210px; width: 100%; }

footer { bottom: 0; margin-top: 8em; }

@media (min-width: 1200px) { footer { margin-top: 12em; } }

footer h2 { font-size: 2.5em; font-weight: 300; }

footer .container { flex-wrap: wrap; }

footer .container > * { width: 100%; }

footer .container .contact--details { font-weight: 300; margin: 1em 0; }

@media (min-width: 750px) { footer .container .contact--details { display: -webkit-box; display: flex; margin: 0; }
  footer .container .contact--details > * { width: 50%; } }

footer .container .contact-entry { line-height: 1.4444444444; margin: 1em 0 2em; }

footer .container .contact-entry h4 { margin-bottom: 1em; }

@media (min-width: 1200px) { footer .container .contact-entry { margin: 0; } }

footer .container .contact-entry--links li { position: relative; }

footer .container .contact-entry--links a { display: inline; position: relative; }

footer .container .contact-entry--links a .text { position: relative; z-index: 2; }

footer .container .contact-entry--links a::after { background: currentColor; bottom: 0; content: ''; display: inline-block; height: 50%; left: -5px; opacity: 0.25; position: absolute; width: calc(100% + 10px); z-index: 1; }

footer .container .contact-entry--links a:hover .underline::after { -webkit-transform: scaleX(1); transform: scaleX(1); }

footer .container .contact-entry--links a .underline::after { height: 50%; left: -5px; width: calc(100% + 10px); }

footer .footer--ps { background: currentColor; font-size: 15px; line-height: 1.4666666667; padding: 3em 1em; position: relative; margin-top: 6em; }

footer .footer--ps::before { background: currentColor; -webkit-clip-path: polygon(0 0, 1px 0, 100% 100%, 0 100%); clip-path: polygon(0 0, 1px 0, 100% 100%, 0 100%); content: ''; height: 5vmin; left: 0; position: absolute; top: calc(-5vmin + 1px); width: 100%; }

@media (min-width: 420px) { footer .footer--ps { margin-top: 12em; padding: 3em 3.5em; } }

@media (min-width: 1200px) { footer .footer--ps { margin-top: 12em; padding: 3em 0; } }

footer .footer--ps .energy { box-sizing: border-box; position: relative; }

@media (min-width: 600px) { footer .footer--ps .energy { padding-left: 1.5em; } }

footer .footer--ps .energy svg { left: -27px; position: absolute; top: 3px; width: 9px; }

@media (min-width: 600px) { footer .footer--ps .energy svg { left: 0; } }

footer .footer--ps .energy span { display: block; max-width: 560px; }

footer .footer--ps .footer--info { box-sizing: border-box; display: -webkit-box; display: flex; font-size: 12px; flex-wrap: wrap; -webkit-box-pack: justify; justify-content: space-between; letter-spacing: 2px; margin-bottom: 0; margin-top: 5em; padding: 0 70px; position: relative; width: 100%; }

footer .footer--ps .footer--info > * { width: 100%; }

@media (min-width: 1200px) { footer .footer--ps .footer--info > * { width: 50%; } }

footer .footer--ps .copyright { margin: 2em auto 1.5em; text-align: center; }

@media (min-width: 1200px) { footer .footer--ps .copyright { margin: 0 auto; text-align: left; } }

footer .footer--ps .footer--links { line-height: 19px; letter-spacing: 2px; text-align: center; }

@media (min-width: 1200px) { footer .footer--ps .footer--links { text-align: left; } }

footer .footer--ps .footer--links a { color: #000; }

footer .footer--ps .footer--links a:hover { text-decoration: underline; }

footer .footer--ps .footer--links ul { display: -webkit-box; display: flex; flex-wrap: wrap; -webkit-box-pack: center; justify-content: center; width: 100%; }

@media (min-width: 1200px) { footer .footer--ps .footer--links ul { -webkit-box-pack: end; justify-content: flex-end; } }

footer .footer--ps .footer--links ul li:not(first-of-type)::before { content: ' '; display: inline-block; }

footer .footer--ps .footer--links ul li:not(:first-of-type):not(:last-of-type)::after { color: #000; content: ' /'; display: inline-block; }

footer .footer--ps .footer--links ul li:first-of-type { display: block; margin-bottom: 1.5em; width: 100%; }

@media (min-width: 1200px) { footer .footer--ps .footer--links ul li:first-of-type { margin-bottom: 0; width: auto; }
  footer .footer--ps .footer--links ul li:first-of-type::after { color: #000; content: ' /'; display: inline-block; } }

header { -webkit-box-align: center; align-items: center; display: -webkit-box; display: flex; font-weight: 300; height: 4.5em; -webkit-box-pack: justify; justify-content: space-between; margin: 0 1%; position: relative; width: 98%; }

@media (min-width: 600px) { header.container { padding-right: 0; } }

header.out-view .actions--wrap .cta--wrap__menu, header.out-view .actions--wrap .menu--toggle--trigger .open { opacity: 0; }

header.out-view .actions--wrap.out-view .cta--wrap__menu, header.out-view .actions--wrap.out-view .menu--toggle--trigger .open { opacity: 1; }

header svg { display: block; -webkit-transition: opacity 0.5s cubic-bezier(0.77, 0, 0.175, 1); transition: opacity 0.5s cubic-bezier(0.77, 0, 0.175, 1); width: 100%; }

header .actions--wrap { align-self: flex-start; display: block; height: 100vh; position: relative; top: 17px; right: 8px; }

@media (min-width: 768px) { header .actions--wrap { top: 28px; right: 21px; } }

header .branding, header .actions { -webkit-box-align: center; align-items: center; display: -webkit-box; display: flex; position: relative; }

header .branding { max-width: calc(100% - 2em); }

header .logo { left: -4px; max-width: 100%; position: relative; top: -10px; width: 280px; z-index: 201; }

@media (min-width: 360px) { header .logo { left: -7px; } }

@media (min-width: 768px) { header .logo { left: -2px; top: -6px; width: 358px; } }

header .logo .logo__lil { display: none; left: 1.5em; }

header .logo a { max-width: 75px; position: fixed; top: 3em; }

header .logo__color { opacity: 0; }

header .out-view.logo svg { max-width: 75px; position: fixed; top: 3em; -webkit-transform: rotate(90deg) translateX(-50%) translateY(10%); transform: rotate(90deg) translateX(-50%) translateY(10%); -webkit-transform-origin: top left; transform-origin: top left; }

@media (min-width: 1200px) { header .out-view.logo svg { -webkit-transform: rotate(90deg) translateX(-35%); transform: rotate(90deg) translateX(-35%); } }

header .out-view.logo svg.logo__big { display: none; }

header .out-view.logo svg.logo__lil { display: block; }

header .out-view.logo .logo__color { opacity: 1; }

header .tagline { display: none; font-size: 11px; font-style: italic; letter-spacing: 0.0909090909em; margin-left: calc(3em + 75px); text-transform: uppercase; }

@media (min-width: 1200px) { header .tagline { display: block; } }

.menu--wrapper { box-sizing: border-box; }

.menu--wrapper::before { background: rgba(0, 0, 0, 0.5); content: ''; height: 100vh; left: 0; opacity: 0; pointer-events: none; position: fixed; top: 0; -webkit-transition: opacity 0.5s cubic-bezier(0.77, 0, 0.175, 1); transition: opacity 0.5s cubic-bezier(0.77, 0, 0.175, 1); width: 100vw; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; z-index: 202; }

@media (min-width: 1200px) { .menu--wrapper::before { display: none; } }

.menu--wrapper::after { -webkit-transition: opacity 0.5s cubic-bezier(0.77, 0, 0.175, 1); transition: opacity 0.5s cubic-bezier(0.77, 0, 0.175, 1); }

.menu--wrapper .menu { background: #000; bottom: 0; box-sizing: border-box; display: block; font-weight: lighter; font-size: 14px; height: 100%; letter-spacing: normal; line-height: 1.3333333333; min-height: 100vh; overflow-y: scroll; padding: 4.5em 1em 1em; position: fixed; right: 0; top: 0; -webkit-transform: translateX(75vw); transform: translateX(75vw); -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.77, 0, 0.175, 1); transition: -webkit-transform 0.5s cubic-bezier(0.77, 0, 0.175, 1); transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1); transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform 0.5s cubic-bezier(0.77, 0, 0.175, 1); width: 50%; z-index: 301; }

.menu--wrapper .menu::-webkit-scrollbar { width: 0px; background: transparent; }

.menu--wrapper .menu::-webkit-scrollbar-thumb { background: #FF0000; }

.menu--wrapper .menu .text { color: #fff; }

@media (min-width: 600px) { .menu--wrapper .menu { font-size: 18px; width: 300px; padding: 3.5em 1em 2em; -webkit-transform: translateX(300px); transform: translateX(300px); } }

@media (min-width: 1200px) { .menu--wrapper .menu { background: transparent; display: -webkit-box; display: flex; font-weight: normal; padding: 0; position: relative; -webkit-transform: translateX(0); transform: translateX(0); width: 100%; }
  .menu--wrapper .menu .text { color: #000; } }

.menu--wrapper .menu .submenu { display: none; }

@media (min-width: 1200px) { .menu--wrapper .menu .submenu { display: block; } }

.menu--wrapper .menu .submenu .text { color: #fff; }

.menu--wrapper .menu-item { box-sizing: border-box; display: block; letter-spacing: normal; position: relative; -webkit-transition: opacity 0.5s cubic-bezier(0.77, 0, 0.175, 1); transition: opacity 0.5s cubic-bezier(0.77, 0, 0.175, 1); }

.menu--wrapper .menu-item a { display: block; padding: 1em 0.75em; position: relative; }

@media (min-width: 1200px) { .menu--wrapper .menu-item a { padding: 0 1.075em; } }

.menu--wrapper .menu-item a .text { -webkit-transition: color 0.5s cubic-bezier(0.77, 0, 0.175, 1); transition: color 0.5s cubic-bezier(0.77, 0, 0.175, 1); }

.menu--wrapper .menu-item a:hover, .menu--wrapper .menu-item a:focus { z-index: 101; }

.menu--wrapper .menu-item a:hover .text, .menu--wrapper .menu-item a:focus .text { color: currentColor; }

.submenu--toggle--trigger { height: 0; opacity: 0; position: absolute; width: 0; }

label.expand-trigger--label { -webkit-box-align: start; align-items: flex-start; color: #f5f5f5; cursor: pointer; display: -webkit-box; display: flex; font-size: 1.5em; font-weight: 300; -webkit-box-pack: end; justify-content: flex-end; opacity: 0.5; position: relative; text-align: right; width: 50px; }

.menu-item__has-children label.expand-trigger--label { top: 9px; }

label.expand-trigger--label:before { content: '+'; }

.submenu--toggle--trigger:checked + label:before { content: '-'; }

.submenu--toggle--trigger:checked + label + .submenu { display: block; }

.menu--toggle { display: block; height: 0; left: -9999px; position: absolute; visibility: hidden; width: 0; z-index: 0; }

.cta--wrap__menu { right: 0; z-index: 105; }

.cta--wrap__menu .button { background: #000; border: 1px solid #000; box-sizing: border-box; color: #fff; font-size: 14px; margin-right: 2em; max-width: 30vw; opacity: 1; padding: 0.75em 1em; text-align: center; -webkit-transition: opacity 1s cubic-bezier(0.77, 0, 0.175, 1); transition: opacity 1s cubic-bezier(0.77, 0, 0.175, 1); width: 140px; }

.cta--wrap__menu .button:before { background: #fff; z-index: 0; }

.cta--wrap__menu .button .text { color: #fff; display: block; position: relative; z-index: 100; }

.cta--wrap__menu .button:hover .text, .cta--wrap__menu .button:focus .text { color: #000; }

.cta--wrap__menu .button.out-view { opacity: 0; -webkit-transition: opacity 1s cubic-bezier(0.77, 0, 0.175, 1); transition: opacity 1s cubic-bezier(0.77, 0, 0.175, 1); }

.menu--toggle:checked + .menu--wrapper, .menu--wrapper:focus-within { pointer-events: all; }

.menu--toggle:checked + .menu--wrapper .menu, .menu--wrapper:focus-within .menu { -webkit-transform: translateX(0); transform: translateX(0); }

.menu--toggle:checked + .menu--wrapper .menu-item, .menu--wrapper:focus-within .menu-item { opacity: 1; }

.menu--toggle:checked + .menu--wrapper::before { opacity: 1; }

.menu--toggle:checked ~ .menu--toggle--trigger { position: fixed; top: 17px; }

.menu--toggle:checked ~ .menu--toggle--trigger .open { display: none; }

.menu--toggle:checked ~ .menu--toggle--trigger .close { display: block; }

.menu--toggle--trigger { cursor: pointer; display: block; right: 1em; z-index: 405; width: 25px; }

.menu--toggle--trigger svg { display: block; max-width: 25px; }

.menu--toggle--trigger .open { display: block; -webkit-transition: opacity 1s cubic-bezier(0.77, 0, 0.175, 1); transition: opacity 1s cubic-bezier(0.77, 0, 0.175, 1); }

.menu--toggle--trigger .close { display: none; }

@media (min-width: 1200px) { .menu--toggle--trigger { display: none; } }

.menu-item__has-children { z-index: 300; }

@media (min-width: 1200px) { .menu-item__has-children { height: 40px; } }

.menu-item__has-children:hover .submenu, .menu-item__has-children:focus .submenu, .menu-item__has-children:focus-within .submenu { visibility: visible; }

.menu-item__has-children:hover li:hover, .menu-item__has-children:focus li:hover, .menu-item__has-children:focus-within li:hover { visibility: visible; }

.menu-item__has-children label { bottom: 0; margin: auto; position: absolute; top: 0; right: 0; z-index: 100; }

.submenu { box-sizing: border-box; display: block; font-size: 14px; padding-left: 1em; }

@media (min-width: 1200px) { .submenu { font-size: 16px; position: absolute; padding: 30px 0 0; top: 30px; width: 200px; visibility: hidden; } }

.submenu .text { color: #fff; }

.submenu .menu-item { background: #000; display: block; font-weight: lighter; left: 0; padding: 10px 20px; position: relative; width: 100%; }

@media (min-width: 1200px) { .submenu .menu-item { line-height: 30px; } }

.submenu .menu-item a { display: block; margin: 0; padding: 0; text-align: left; }

.loading { -webkit-box-align: center; align-items: center; -webkit-animation: fade 0.5s 3s both cubic-bezier(0.165, 0.84, 0.44, 1); animation: fade 0.5s 3s both cubic-bezier(0.165, 0.84, 0.44, 1); background: #000; color: #fff; display: -webkit-box; display: flex; font-family: "Roboto", Arial, Helvetica, sans-serif; font-size: 30px; font-weight: 300; -webkit-box-pack: center; justify-content: center; height: 100vh; letter-spacing: -0.0166666667em; line-height: 1.2; left: 0; pointer-events: none; position: fixed; text-align: center; top: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 100%; z-index: 1000; }

.no-js .loading { display: none; }

.loading svg { display: block; margin: 0 auto 1em; max-width: 100%; position: relative; width: 110px; z-index: 210; }

@-webkit-keyframes fade { to { opacity: 0; } }

@keyframes fade { to { opacity: 0; } }

@-webkit-keyframes fadeIn { to { opacity: 1; } }

@keyframes fadeIn { to { opacity: 1; } }

@-webkit-keyframes fadeInOut { 0% { opacity: 0; }
  30% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; } }

@keyframes fadeInOut { 0% { opacity: 0; }
  30% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; } }

@supports ((-o-object-fit: contain) or (object-fit: contain)) { .mission span { opacity: 0; } }

.no-js .mission span { opacity: 1; }

@supports ((-o-object-fit: contain) or (object-fit: contain)) { .loaded .mission .fades-both span { -webkit-animation: fadeInOut 3s both cubic-bezier(0.77, 0, 0.175, 1); animation: fadeInOut 3s both cubic-bezier(0.77, 0, 0.175, 1); } }

.loaded .mission .fades-both span:nth-of-type(1) { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; }

.loaded .mission .fades-both span:nth-of-type(2) { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; }

.loaded .mission .fades-both span:nth-of-type(3) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }

.loaded .mission .fades-both span:nth-of-type(4) { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; }

.loaded .mission .fades-both span:nth-of-type(5) { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; }

.loaded .mission .fades-both span:nth-of-type(6) { -webkit-animation-delay: 0.7s; animation-delay: 0.7s; }

.loaded .mission .fades-both span:nth-of-type(7) { -webkit-animation-delay: 1s; animation-delay: 1s; }

.loaded .mission .fades-in span { -webkit-animation: fadeIn 1s both cubic-bezier(0.77, 0, 0.175, 1); animation: fadeIn 1s both cubic-bezier(0.77, 0, 0.175, 1); }

.loaded .mission .fades-in span:nth-of-type(1) { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; }

.loaded .mission .fades-in span:nth-of-type(2) { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; }

.loaded .mission .fades-in span:nth-of-type(3) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }

.loaded .mission .fades-in span:nth-of-type(4) { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; }

.loaded .mission .fades-in span:nth-of-type(5) { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; }

.loaded .mission .fades-in span:nth-of-type(6) { -webkit-animation-delay: 0.7s; animation-delay: 0.7s; }

.loaded .mission .fades-in span:nth-of-type(7) { -webkit-animation-delay: 1s; animation-delay: 1s; }