@font-face {
  font-family: 'Formula Condensed';
  src: url('../fonts/PPFormula-CondensedBold.woff2') format('woff2'),
       url('../fonts/PPFormula-CondensedBold.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Neue Montreal';
  src: url('../fonts/PPNeueMontreal-Regular.woff2') format('woff2'),
       url('../fonts/PPNeueMontreal-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Neue Montreal Medium';
  src: url('../fonts/PPNeueMontreal-Medium.woff2') format('woff2'),
       url('../fonts/PPNeueMontreal-Medium.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}



* {
  box-sizing: border-box;
}



body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background: #ffffff;
  font-family: 'Neue Montreal', sans-serif;
  color:#000000;
}






.quote {
  font-style: italic;
}

.emphasis {
  font-family: 'Neue Montreal Medium';
}


/* 
#bg-video {
  position: fixed;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  z-index: -1;
  background: url('../images/fallback.gif') center center / cover no-repeat;
}

*/









.hero {

  color:#ffffff;
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;    /* stack navbar on top, bottom-block at bottom */
  justify-content: space-between; /* push bottom-block down */
  box-sizing: border-box;
  position: relative;

  /*margin-bottom: 10vw;*/

  /*padding: 0rem 2rem 0rem 2rem;*/

}


.reveal {
  margin-top:5vw;
}

.bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;  /* covers entire hero, keeps aspect ratio */
  z-index: -1;        /* behind content */
}





.kicker {
  font-family: 'Neue Montreal Medium', sans-serif;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: -10px;
}


h1{
  font-family: 'Formula Condensed', sans-serif;
  font-size: 21vw;
  text-transform: uppercase;
  line-height: 0.9;
  /*letter-spacing: 0.1875rem;*/
  /*letter-spacing: 0.15625rem;*/
  letter-spacing: 0.125rem;
  padding:0;
  margin:0;

}


.maintitle {

  margin:1vw 2vw 2vw 2vw;

}




.bottom-block {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}



.subtitles {
  display: flex;
  width: 100%;
  justify-content: space-between; /* left + center + right */
  align-items: center;
  text-align: center;
  margin-bottom: 1vw; /* space above H1 */
  padding:0 2vw;
  text-transform: uppercase;
  font-family:'Neue Montreal Medium';

}


.center {
  position: absolute;     /* perfect centering */
  left: 50%;
  transform: translateX(-50%);
}


.navbar {
  width: 100%;
  padding:1rem 2vw;
  display: flex;
  /* navbar styles */
}





.navbar img {
  width:14rem;
  margin-right:auto;
}



.language-switcher {
  padding-top:4px;
}



h2 {
  font-family: 'Formula Condensed', sans-serif;
  font-size: 3rem;
  text-transform: uppercase;
  line-height: 1;
  /*letter-spacing: 0.1875rem;*/
  /*letter-spacing: 0.15625rem;*/
  letter-spacing: 0.0625rem;
  margin-bottom:1.5rem;

}


a {
  text-decoration: none;
  color:#ffffff;
  font-family: 'Neue Montreal Medium', sans-serif;
}

::selection {
  background: black;
  color: white;
}

.logo{
  width:22rem;

 transform: translateY(100%);
  opacity: 0;
  display: block;

}



.reveal-btn {
  display:none;
}


.anchors {

  display:block;
  width:880px;
  margin: 0 auto;
  margin-bottom: 6vw;

}


.anchor-title {

  font-size: 0.75rem;
  margin-bottom: 0.5rem;
text-transform: uppercase;
font-family: 'Neue Montreal Medium', sans-serif;

}


.anchor-list {

  margin-bottom: 2rem;

}


.anchors a {

  display:inline-block;
  color:#000000;
 border:1px #000000 solid;
  padding:3px 8px;
  margin:2px 4px 2px 0;
  border-radius: 100px;
  font-family: 'Neue Montreal Regular', sans-serif;
  font-size: 0.875rem;
  position:relative;
  overflow: hidden;

}


.anchors a::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
  z-index: -1;
}


.anchors a:hover::before {
  transform: scaleX(1);
}

.anchors a:hover {
  color: #fff;
}



.intro {
  width:880px;
font-size: 1.75rem;
margin: 0 auto;
  margin-top:5vw;

}


.chouchou {
  width:880px;
  margin: 0 auto;
  position: relative; /* keeps things positioned inside */
  overflow: visible;  /* IMPORTANT: allow overlap outside */
  margin-bottom: 8vw;
}


.cols {
  display: grid;
  grid-template-columns: 700px 180px;
  gap: 0;
  margin-top: 16px; /* space between image and cols baseline */
}


.col-text{
  position:relative;
  padding-right:100px;
}

.quotes{
  position: absolute;
  top:0;
  right:0;
  width:100px;
}









.preview{
  width:880px;
  height:440px;
  display: block;
}


.col-member{
  margin-top: -110px;
  position: relative;
  z-index: 10;
  /*background-color: #000000;*/
}


.col-member img{
  width:180px;
  height:180px;
}





.content {

  line-height: 1.5rem;
  font-size:1.125rem;
  color:#3b3b3b;
}



.button {
  display: inline-block;
  color:#000000;
  border:1px #000000 solid;
  border-radius: 20px;
  padding:5px 10px;
  position:relative;
  overflow: hidden;
}


.button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
  z-index: -1;
}


.button:hover::before {
  transform: scaleX(1);
}

.button:hover {
  color: #fff;
}


.name {
  font-family: Neue Montreal Medium;
}

.job-title {
  font-size: 0.875rem;
}











.back-to-top {



  position:fixed;
  bottom:20px;
  right:20px;
  display:block;
  background-color: #ffffff;
  border:1px #000000 solid;
  border-radius: 1000px;
  width: 60px;
  height: 60px;


  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;

}

.back-to-top img {
  width:30px;
  height:30px;
  margin:14px;
}



.back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
}





.footer {
  font-size: 0.625rem;
  text-align: center;
  padding:30px;
}



@media (max-width: 1280px) {

  .subtitles {
    padding:0 2vw;
  }

}



@media (max-width: 1024px) {
  
  .subtitles {
    padding:0 2vw;
  }

}




@media (max-width: 960px) {


  .subtitles {
    padding:0 3vw;
  }


.hero {

  color:#ffffff;
  min-height: 50vh;
  min-height: 50dvh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  position: relative;
  /*margin-bottom: 10vw;*/

}

.navbar {
  padding:1rem 3vw;
}


.bottom-block {
  margin-top: auto;
}



.maintitle {

  margin:1vw 3vw 2vw 3vw;

}

h1{
  font-size: 20vw;
  line-height: 0.9;
  letter-spacing: 0.125rem;
  padding:0;
  margin:0;
}


h2 {
  font-size: 2rem;
  line-height: 1.125;
  /*letter-spacing: 0.1875rem;*/
  /*letter-spacing: 0.15625rem;*/
  /*letter-spacing: 0.0625rem;*/
  /*letter-spacing: 3;*/
  letter-spacing: 0.015625rem;
  margin-bottom:1.5rem;

}


.kicker {
  font-size:0.75rem;
  margin-bottom: -10px;
}


.center{
  display:none;
}


.reveal {
  margin-top:0;
  margin-bottom: 4rem;
}

.anchors {

    display:none;
    width:100%;
    padding:0 3vw;
    margin-bottom: 4rem;

}


.reveal-btn {
  display:block;
  margin:20px 3vw;
  padding:20px 20px;
  background-color: #eeeeee;
  color:#000000;
  border-radius: 200px;
  text-transform: uppercase;
  font-size: 0.75rem;
  transition:background-color 0.3s ease;
}


a.reveal-btn:hover {
  background-color: #dddddd;
}


.reveal.is-open .anchors {
  display:block;
  margin-top:4rem;
}


.reveal.is-open .reveal-btn {
  display:none;
}


.intro {
    width:100%;
    padding:0 3vw;
    font-size:1.3125rem;

}


  .chouchou{
    width:100%;
    padding:0 3vw;
    margin-bottom: 4rem;
  }

  .preview{
    width:100%;
    height:50vw;
    display: block;
  }


  .cols {
    display: flex;
    flex-direction: column-reverse;
  }


  .col-text{
    padding-right:0px;
  }

  .content{
    font-size: 1rem;
  }




  .col-member{
      margin-top: -25px;
      display:flex;
      align-items: center;
      gap:12px;
  }


  .col-member img{
    width:70px;
    height:70px;
  }

  .name-and-title{
    display:flex;
    flex-direction: column;
  }

  .name {
    font-size: 0.875rem;
  }

  .job-title {
    font-size: 0.75rem;
  }


}




@media (max-width: 768px) {
  
.navbar {
  padding:1rem 3vw;
}

}