/* mulish-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 200;
  src: url('fonts/mulish-v18-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* mulish-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/mulish-v18-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* mulish-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/mulish-v18-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* mulish-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/mulish-v18-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* mulish-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/mulish-v18-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* mulish-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/mulish-v18-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* mulish-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 800;
  src: url('fonts/mulish-v18-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* mulish-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 900;
  src: url('fonts/mulish-v18-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* spectral-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 200;
  src: url('fonts/spectral-v15-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* spectral-200italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 200;
  src: url('fonts/spectral-v15-latin-200italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* spectral-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/spectral-v15-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* spectral-300italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 300;
  src: url('fonts/spectral-v15-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* spectral-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/spectral-v15-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* spectral-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/spectral-v15-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* spectral-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/spectral-v15-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* spectral-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 500;
  src: url('fonts/spectral-v15-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* spectral-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/spectral-v15-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* spectral-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 600;
  src: url('fonts/spectral-v15-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* spectral-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/spectral-v15-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* spectral-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 700;
  src: url('fonts/spectral-v15-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* spectral-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 800;
  src: url('fonts/spectral-v15-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* spectral-800italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 800;
  src: url('fonts/spectral-v15-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}



html,
body {
    width: 100%;
}

body {
    font-family: 'Mulish';
    width:100%;
    min-height:100vh;
}

.content{
    position:relative;
    display:flex;
    flex-direction: column;
    color:#fff;
}

.content-above-the-fold {
    height:100vh;
    align-content: flex-end;
}

.content-above-the-fold h1{
    font-size:6em;
    
    hyphens: auto;
    font-family: 'Spectral';
}
.content-above-the-fold .title {
    padding: 3em 9vw;
    margin: 0;
    background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.35) 55%); 
}
.content-below {
    padding:0 9vw 50vh 9vw;
    background-color: rgba(0,0,0,0.35);
    font-weight:300;
}

.content-below p {
    white-space: pre;
}

.bodytext {
    font-size:1.25em;
    width:60%;
    margin-left:40%;
}
.contact{
    width:40%;
}

.media-background {
    position: fixed;
    overflow: hidden;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    
    /* transform: translateX(-50%) translateY(-50%); */
    z-index: -10;
}
.media-background video { 
    width:100%;
    height:100%;
    object-fit: cover;
    margin:0;
    padding:0;
}

.logo {
    position: fixed;
    top:5vw;
    right:9vw;
    width:15vw;
    min-width:200px;
    z-index:1;
}



.content-below a { 
  text-decoration:none; 
  color:inherit; 
}

.content-below ul li {
  list-style-type: '>';
  padding-inline-start: 1ch;
}

.logo img{
    width:100%;
    height:auto;
    transition: all 300ms ease-in-out;
}
.hide-logo .logo img{
    transform: translateY(calc(-110% - 5vw));
}

@media (max-width: 1315px) {
  .content-above-the-fold h1 {
    font-size:4em;
  }
}

@media (max-width: 886px) {
  .content-above-the-fold h1 {
    font-size:3em;
  }
}

@media (max-width: 767px) {
  .logo {
      width:41vw;
      min-width:100px;
      max-width:400px;
      transition: all 250ms ease-in-out!important;
  }

  .hide-logo .logo {
      width:20vw;
      min-width:50px;      
  }


  .hide-logo .logo img{
    transform: unset;
  }

  .logo img{
    transition: all 250ms ease-in-out!important;
  }

  .content-below p {
      white-space: unset;
  }

  .content-above-the-fold h1 {
    font-size:2em;
  }

  .bodytext {
    width: 100%;
    margin-left: 0%;
  }
  .contact {
    width: 100%;
    margin-top:4em;
  }
}