@charset "utf-8";
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: local('Roboto Regular'),
       url('/fonts/Roboto-Regular.woff2') format('woff2'),
       url('/fonts/Roboto-Regular.woff') format('woff'),
       url('/fonts/Roboto-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Uni Neue';
  font-style: normal;
  font-weight: bold;
  font-display: swap;
  src: local('Uni Neue Bold'),
       url('/fonts/UniNeueBold.woff2') format('woff2'),
       url('/fonts/UniNeueBold.woff') format('woff'),
       url('/fonts/UniNeueBold.ttf') format('truetype');
}
.hide {visibility: hidden;}

:root {
  --accentColor: #5B6889;
  --pad: 2.5rem;
  --dark: #222;
  --dark-10: rgba(5,5,5,0.1);
  --dark-20: rgba(5,5,5,0.2);
  --dark-40: rgba(5,5,5,0.4);
  --dark-50: rgba(5,5,5,0.5);
  --dark-70: rgba(5,5,5,0.7);
  --dark-80: rgba(5,5,5,0.8);
}
@media all and (min-width: 50rem) {
  :root {--pad: 8rem;}
}
@media all and (min-width: 80rem) {
  :root {--pad: 10rem;}
}

html {padding: 0; margin: 0; font: normal bold 16px/24px 'Uni Neue', sans-serif; box-sizing: border-box;}
body {min-height: 100vh; width: 100%; overflow-scrolling: touch; position: relative;}
body.nav-open {overflow: hidden;}
@media all and (min-width: 70rem) {
  html {font-size: 18px; line-height: 28px;}
}
*, *::before, *::after, input::placeholder {margin: 0; padding: 0; box-sizing: inherit; font: inherit; color: inherit;}
ul li {list-style: none;}
p {/*max-width: 40rem;*/}
a {text-decoration: none; color: inherit;}
a:hover, a:focus {opacity: 0.6;}
label {cursor: pointer;}
section .content {margin: 0 auto; max-width: 75rem;}

h1 {margin-bottom: 2.875rem;}

h2 {font-size: 2.125rem; line-height: 2.875rem; margin-bottom: 1.6rem; font-stretch: condensed;}
h2.split span {display: inline;}
@media all and (min-width: 30rem) {
  h2 {font-size: 3rem; line-height: 4rem;}
  h2.split span {display: block;}
  h2.split span:last-child {margin-left: 4rem;}
}
@media all and (min-width: 50rem) {
  h2 {font-size: 4rem; line-height: 5rem;}
  h2.split span:last-child {margin-left: 6.7rem;}
}
@media all and (min-width: 80rem) {
  h2 {font-size: 5.438rem; line-height: 7rem;}
  h2.split span {display: block;}
  h2.split span:last-child {margin-left: 10rem;}
}

h3 {font-size: 1.563rem; line-height: 1.875rem; font-stretch: condensed; margin-bottom: 3.125rem; color: var(--dark);}
h4 {margin-bottom: 1.9rem; color: var(--accentColor);}

.pad {padding-left: var(--pad); padding-right: var(--pad);}

.indented {margin-left: 8%;}
@media all and (min-width: 30rem) {
  .indented {margin-left: 12%;}
}
@media all and (min-width: 50rem) {
  .indented {margin-left: 24%;}
}
@media all and (min-width: 70rem) {
  .indented {margin-left: 30%;}
}

#home {background-color: #222;}

@media all and (min-width: 80rem) {
  .cols {display: flex; justify-content: space-between;}
  .cols .col1 {flex-basis: 60%; margin-right: 4rem;}
  .cols .col2 {flex-basis: 40%;}
}

#main {padding: 12rem var(--pad) 6rem; background: #fff;}

/* NAVIGATION */

nav {z-index: 10; position: absolute; top: 0; left: 0; width: 100%; overflow: visible; transition: min-height 0.4s ease, background 0.8s ease;}


/* checkbox input toggles menu */
.radio-toggle {position: fixed; bottom: 10000px; opacity: 0;}

/* Logo */
#logo {z-index: 11; position: absolute; top: 2rem; left: calc(var(--pad) / 2); display: flex; flex-direction: column; align-items: center; justify-content: center;}
#logo > span {display: inline-block;}
#logo svg {width: auto; transition: all 0.6s ease-in; height: 55px;}
#logo path {transition: all 0.6s ease-in;}
#home #logo path {fill: }
#home body:not(.nav-open) #logo path {fill: #fff; transition: all 0.6s ease-in}
@media all and (min-width: 22rem) {
  #logo {flex-direction: row;}
  #logo *:first-child {margin-right: 0.7rem;}
}
@media all and (min-width: 40rem) {
  #logo svg {height: 65px;}
}
#nav-bar {z-index: 13; position: absolute; top: 2rem; right: calc(var(--pad) / 2); display: flex; flex-direction: column-reverse; align-items: flex-end; justify-content: flex-end;}
@media all and (min-width: 20rem) {
  #nav-bar {flex-direction: row; align-items: flex-start;}
}
@media all and (min-width: 70rem) {
  #logo, #nav-bar {top: 4rem;}
}


/* Nav Lang & Nav Main - Labels */
nav label {display: flex; justify-content: space-between; align-items: center; position: relative; border: 2px solid transparent; border-radius: 1.8rem; padding: 0.6rem 0.6rem; font-size: 0.875rem;}
nav label svg {transition: all 0.4s ease;}
nav label svg path {fill: #fff;}
@media all and (min-width: 70rem) {
  nav label {padding: 0.9rem 1.7rem;}
}

/* Nav Lang (language switch) */
#nav-lang {background: var(--accentColor); color: #fff; border-radius: 1.8rem; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end;}
#nav-lang ul {max-height: 0; max-width: 5rem; opacity: 0; transition: all 0.4s ease;}
.nav-lang-open #nav-lang ul {margin: 0; max-height: 20rem; max-width: 20rem; opacity: 1; transition: all 0.4s ease; align-self: flex-start;}
#nav-lang li:last-child {margin-bottom: 1.3rem;}
#nav-lang li a {padding: 0.5rem 1.8rem; color: rgba(244,244,244,0.4);}
#nav-lang label {padding-left: 1.7rem; padding-right: 1.7rem;}
#nav-lang label .title {margin-right: 1rem;}
#nav-lang label > span > span:first-child {display: none;}
/*#nav-lang label > span > span:last-child {text-transform: uppercase;}*/
.nav-lang-open #nav-lang label svg {transform: rotate(-180deg); transition: all 0.4s ease;}
@media all and (min-width: 20rem) {
  #nav-lang {margin-right: 0.6rem; margin-bottom: 0;}
}
@media all and (min-width: 70rem) {
  #nav-lang label .title {margin-right: 2rem;}
  #nav-lang label  > span > span:first-child {display: inline;}
  #nav-lang label  > span > span:last-child {display: none;}
}

/* Nav Main */
#nav-main {position: fixed; top: 0; right: -100vw; height: 100vh; width: 100vw; z-index: 10; transition: all 0.6s ease; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; width: 0;}
#nav-main::-webkit-scrollbar {width: 0; height: 0;}
#nav-main > div {margin-left: calc(var(--pad) / 4); width: calc(100% - (var(--pad) / 4)); min-height: 100%; padding: 12rem var(--pad) 6rem; transition: background 0.8s ease;}
.nav-open #nav-main {display: block; right: 0; width: 100vw; transition: all 0.6s ease;}
.nav-open #nav-main > div {background: #f4f4f4; transition: background 0.6s ease;}
/* Nav Main Label */
#label-nav-main {margin-bottom: 0.5rem; background: #222; color: #f4f4f4; z-index: 2;}
#label-nav-main .title {opacity: 0; width: 0; margin: 0;}
#home #label-nav-main {background: #fff; color: var(--accentColor);}
#home #label-nav-main path {fill: var(--accentColor);}
.nav-open #label-nav-main {background: #f4f4f4; border-color: var(--accentColor); color: var(--accentColor);}
.nav-open #label-nav-main path {fill: var(--accentColor);}

@media all and (min-width: 70rem) {
  #label-nav-main .title {opacity: 1; width: auto; margin-right: 1rem;}
}
/* Nav Main Menus */
.menu1, .menu2 {margin-bottom: 2.5rem;}
.menu1 a, .menu2 a {text-transform: uppercase; display: flex; align-items: center;}
.menu1 a span, .menu2 a span {margin-top: 0.4rem;}
.menu1 a svg, .menu2 a svg {margin-left: 1.875rem; flex: 0 0 40px;}
.menu1 a svg ellipse, .menu2 a svg ellipse {stroke: #AEB2CA;}
.menu1 a svg path, .menu2 a svg path {fill: var(--accentColor);}
.menu1 a {font-size: 2rem; line-height: 3.5rem;}
.menu2 a {font-size: 1.625rem; line-height: 2.875rem;}
@media all and (min-width: 35rem) {
  .menu1 a {font-size: 3rem; line-height: 4.6rem;}
  .menu2 a {font-size: 2rem; line-height: 3.2rem;}
}
@media all and (min-width: 50rem) {
  .menu1 a {font-size: 4rem; line-height: 6rem;}
  .menu2 a {font-size: 3rem; line-height: 4.5rem;}
}
@media all and (min-width: 70rem) {
  
}
@media all and (min-width: 100rem) {
  .menu1, .menu2 {margin-bottom: 4rem;}
  .menu1 a {font-size: 5rem; line-height: 6.5rem;}
  .menu2 a {font-size: 3.4rem; line-height: 4.6rem;}
}


/* Legal */
#nav-main > div > p {color: var(--accentColor); margin-top: 3.4rem; font-size: 0.75rem;}
@media all and (min-width: 70rem) {
  #nav-main > div > p {text-align: right;}
}

/* Nav External */
.ext {margin-bottom: 2rem;}
.ext svg {max-width: 5.3rem;}
@media all and (min-width: 23rem) {
  .ext {display: flex; align-items: center; justify-content: space-between; margin-bottom: 3.5rem;}
  .ext h4 {margin-right: 3.5rem; margin-bottom: 0;}
}
@media all and (min-width: 40rem) {
  .ext {justify-content: flex-start;}
}
@media all and (min-width: 70rem) {
  .ext {display: block;}
  .ext h4 {margin-right: 0; margin-bottom: 1.9rem;}
}

/* Social */
.nav-follow {display: flex;}
.nav-follow li {width: 1.8rem; margin-right: 1.8rem;}
.nav-follow li:last-child {margin-right: 0;}
nav .nav-follow img {filter: invert(100%);}

/* END NAVIGATION */

#home {scrollbar-width: none; -ms-overflow-style: none;}
#home::-webkit-scrollbar {width: 0; height: 0;}

#home #counter, #home #progress-bar {position: absolute; top: 50vh; z-index: 12; color: #fff; font-size: 0.75rem; align-items: center; display: none;}
#home #counter {left: calc(var(--pad) / 3); transform: translate(-50%, -50%) rotate(-90deg);}
#home #progress-bar {right: calc(var(--pad) / 4); transform: translate(50%, -50%) rotate(90deg); width: 13.75rem; height: 2px; background: rgba(255, 255, 255, 0.1);}
#home #counter .current::after {content: ""; display: inline-block; height: 2px; width: 1.75rem; background: #fff; margin: 0 1.25rem 0.1rem;}
#home #progress-bar div {background: #fff; height: 2px;}
#home #progress-bar span {position: absolute; top: 0.5rem; left: 50%; transform: translateX(-50%) rotate(180deg); display: block;}
@media all and (min-width: 50rem) {
  #home #counter, #home #progress-bar {display: flex;}
}

#panels {position: relative; height: 100vh; perspective: 1000px; transform-style: preserve-3d; overflow: hidden; background: var(--dark)}
#home .panel  {position: absolute; height: 100%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; color: #fff; overflow: hidden;  transform: translateZ(-50vh) rotateX(0deg) translateZ(50vh); backface-visibility: hidden; transition: transform 1.5s ease;}
#home .panel.top {transform: translateZ(-50vh) rotateX(90deg) translateZ(50vh);}
#home .panel.bottom {transform: translateZ(-50vh) rotateX(-90deg) translateZ(50vh);}

/*#panels {position: relative; width: 100%; height: 100vh; overflow: hidden; z-index: 2;}
.panel {position: absolute; height: 100%; width: 100%; display: flex; align-items: flex-start; color: #fff; overflow: visible;}*/
#home .panel .background, #home .panel .content {/*transform: translateZ(-100vh) rotateX(0deg) translateZ(100vh);*/ width: 100%; height: 100%;}

#home .panel .background {z-index: 1; position: absolute; width: 100%; height: 100%;}
#home .panel .img {width: 100%; height: 110vh; object-fit: cover;}

#home .panel .content {z-index: 2; position: relative; bottom: 0; left: 0; width: 100%; height: 75%; margin: 0 auto 0; overflow: visible;} /*11.8rem*/
#home .panel .links {margin-top: 5rem;}
#home .panel .links a {display: inline-block; margin-right: 4.125rem; margin-bottom: 0.7rem;}
#home .panel .links svg {margin-left: 0.3rem; scale: 0.8;}
#home .panel .cta-scroll {display: block; position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); color: #fff; background: url(/scroll.png) no-repeat left center; padding-left: 2.2rem; font-size: 0.75rem; line-height: 1.125rem; text-transform: uppercase;}
#home .panel .description > label {display: block; margin-top: 1.3rem;}
#home .controls {position: sticky; z-index: 1000; bottom: 2rem; margin-left: 1rem;}
#home .controls button {cursor: pointer;}

.more {position: absolute; top: 12rem; left: 50%; transform: translate(-50%, -50%); padding: 0.5rem var(--pad) 0; max-height: 70%; width: 80%; overflow-y: auto; background: #fff; color: var(--accentColor); display: flex; flex-direction: column; opacity: 0; transition: opacity 0.6s ease; visibility: hidden;}
.more > *:last-child {padding-bottom: 2rem;}

.radio-more:checked ~ .more {visibility: hidden; opacity: 1;}
.radio-more:checked ~ .more label {margin-bottom: 1rem; padding: 1.125rem; margin-right: -1.25rem; align-self: flex-end;}
@media all and (min-width: 70rem) {
  #home section .more {max-width: 35rem; padding: calc(var(--pad) / 2);}
  .radio-more:checked ~ .more label {margin-bottom: 2rem;}
}

/* FORMS */
form {max-width: 100%;}
fieldset {max-width: 100%; border: none; margin-bottom: 1rem;}
input, textarea {background-color: transparent; border: none; width: 100%; font-family: Roboto; font-weight: normal;}
form button {border: none; background: none; display: flex; align-items: center; cursor: pointer;}
form button span {display: inline-block; font-family: "Uni Neue"; font-weight: bold;}
form button svg {margin-left: 1rem;}
form button:hover, form button:focus {opacity: 0.5;}

form *:invalid {box-shadow: none; border-color: crimson;}
form *::placeholder {opacity: 1; font-family: "Uni Neue"; font-weight: bold;}
form *:focus::placeholder {opacity: 0.3;}

/* Form Signup */

.form-signup {margin: 0 0 3.5rem;}
.form-signup fieldset { border-bottom: solid 1px var(--accentColor);}
.form-signup input {padding: 0.5rem 0; margin-bottom: -1px; flex: 1 1 100%;}
.form-signup input:focus {border-color: var(--accentColor); padding-left: 0.6rem; padding-right: 0.6rem;}
.form-signup input:invalid {padding-left: 0.6rem; padding-right: 0.6rem;}
.form-signup input::placeholder {color: var(--accentColor);}
footer .form-signup input::placeholder {color: #fff;}
.form-signup button span {color: var(--accentColor);}
footer .form-signup button span {color: #fff;}
.form-signup button svg {fill: var(--accentColor);}
footer .form-signup button svg {fill: #fff;}
@media all and (min-width: 23rem) {
  .form-signup {display: flex; justify-content: space-between; border-bottom: solid 1px var(--accentColor); padding-bottom: 0rem;}
  footer .form-signup {border-color: rgba(255, 255, 255, 0.3);}
  .form-signup fieldset {border: none; padding-bottom: 0; margin-bottom: 0; margin-right: 1rem;}
  .form-signup input {border-radius: 0rem;}
}
@media all and (min-width: 40rem) {
  .form-signup {max-width: 30rem;}
}
@media all and (min-width: 50rem) {
  .form-signup {max-width: 30rem; padding-bottom: 0rem;}
}
@media all and (min-width: 80rem) {
  .form-signup {margin-top: -1rem;}
}

/* Form Contact */

.form-contact {max-width: 100%; color: #fff;}
.form-contact fieldset {}
.form-contact input, textarea {  border-bottom: solid 1px rgba(255, 255, 255, 0.3); padding: 0.7rem; flex: 1 1 100%; }
.form-contact *:focus {border-color: rgba(255, 255, 255, 0.7);}
.form-contact button {float: right;}
@media all and (max-width: 30rem) {
  .form-contact {margin-left: 0;}
}
@media all and (min-width: 40rem) {
  .form-contact {max-width: 26rem;}
}

/* END Forms */

main {position: relative; z-index: 2;}

footer {background: var(--dark); color: #ccc; position: sticky; bottom: 0; z-index: 1;}
footer > img {position: absolute; width: 100%; height: 100%; object-fit: cover; z-index: 1;}
footer > div {position: relative; z-index: 2; padding-bottom: 0.5rem; padding-top: 8rem;}
footer h4 {color: #fff; margin-bottom: 0.7rem;}
@media all and (min-width: 70rem) {
  footer > div {padding-top: 17rem; padding-bottom: 7.5rem;}
  footer h4 {margin-bottom: 2.25rem;}
  footer .col2 {display: flex; flex-direction: row-reverse; justify-content: space-between;}
}

/* Loader */

#dots4 {
  z-index: 1000000;
  display: block;
  position: fixed;
  top: 50%;
  left: 50%;
  height: 100px;
  width: 100px;
  margin: -65px 0 0 -65px;
}

#dots4 span {
  position: absolute;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  background: #fff;
  background: rgba(255, 255, 255, 0.7);
  -webkit-animation: dots4 1.7s infinite ease-in-out both;
          animation: dots4 1.7s infinite ease-in-out both;
  margin-right: 20px;
}

#dots4 span:nth-child(1) {
  left: 0px;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}

#dots4 span:nth-child(2) {
  left: 30px;
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}

#dots4 span:nth-child(3) {
  left: 60px;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

#dots4 span:nth-child(4) {
  left: 90px;
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}

@keyframes dots4 {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
  }
  40% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
@-webkit-keyframes dots4 {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0;
  }
  40% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}

@media print {
	counter-increment: page;
    counter-reset: page 1;
	@bottom-right { content: "Pg." counter(page) " / " counter(pages); }
	@page {overflow: visible;}

}