:root{

  --var-scrolltrigger:50px;

}

body {
  /* Because in firefox, there is a white line at the bottom that you can scroll to. It isnt visible anywhere else.  */
  /* overflow-y: hidden; */
  background-color: #000;
  height: calc(100vh + var(--var-scrolltrigger));
}

/* NAV STUFF */
.top-left-logo {
  position: absolute;
  top: 16px;
  left: 20px;
  font-family: SuperGroteskA-RgLF;
  font-size: 21px;
  line-height: 20px;
  color: #ffffff;
  z-index: 2;
  cursor: default;
}

.top-left-logo-mobile {
  display: none;
  position: absolute;
  top: 16px;
  left: 20px;
  font-family: SuperGroteskA-RgLF;
  font-size: 18px;
  line-height: 1;
  color: #ffffff;
  z-index: 2;
  cursor: default;
}

.top-right-logo-mobile {
  display: none;
  position: absolute;
  top: 16px;
  right: 17px;
  font-family: SuperGroteskA-RgLF;
  color: #ffffff;
  z-index: 2;
  cursor: pointer;
}

.top-middle-text-mobile {
  display: none;
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  font-family: SuperGroteskA-RgLF;
  color: #ffffff;
  z-index: 2;
  cursor: pointer;
}

.top-right-oval {
  position: absolute;
  top: 16px;
  right: 17px;
  z-index: 2;
  cursor: pointer;
}

/* TRAP CONTAINER */
.landing-page-trap-container img {
  display: block;
}

.landing-page-trap-container {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  height: 100vh;
  width: 100vw;
  background-color: #f1edee;
}

.landing-page-trap-container.open {
  display: block;
}

.landing-slides-container.closed {
  display: none;
}

.landing-page-trap {
  display: none;
  height: 100vh;
  width: 100vw;
  justify-content: center;
  align-items: center;
}

.landing-page-trap p {
  font-family: EricaType;
  font-size: 21px;
  line-height: 28px;
  letter-spacing: -0.25px;
  text-align: center;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  user-select: none; /* supported by Chrome and Opera */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  max-width: 400px;
  margin: 20px 40px;
}

.landing-page-trap.open {
  display: flex;
}

/* LANDING SLIDES */

a {
  text-decoration: none;
  color: #fff;
  display: inline-block;
}

.landing-slide-text-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 70vw;

  /* Fabi Fix */
  width: fit-content;

  cursor:default;

}



.landing-slide-text-container .editorial {
  font-family: EditorialNew;
  font-size: 113.8px;
  font-weight: 200;
  line-height: 104.3px;
  letter-spacing: -3.16px;
  text-align: center;
  margin-top: 8px;
  margin-bottom: -6px;
}

.landing-slide-text-container .leipziger {
  font-family: jaf-lapture-display;
  font-size: 94.8px;
  line-height: 79px;
  text-align: center;
}

.landing-slides-container {

  /* Fabi fix */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #000;
}



.landing-slide__videomenu {

  z-index: 1;

  width: 100%;
  height:100%;


  position: fixed;
  bottom: 0;
  left: 0;
  user-select: none; /* supported by Chrome and Opera */
  -webkit-user-select: none; /* supported by Chrome and Opera */
}



@media only screen and (min-width: 1195px) {
  
  .landing-slide__videomenu:hover {
    background-color: rgba(0, 0, 0, 0.5);
    transition: ease 0.33s;
  }
  .landing-slide__videomenu:hover .landing-slide__videomenu__muteButton {
    /* visibility: visible; */
    opacity: 1 ;
  }

}

.landing-slide__videomenu__muteButton {
  /* visibility: hidden; */
  opacity: 0;
  background: none;
  border: none;
  width: 100%;
  user-select: none; /* supported by Chrome and Opera */
  height: 100%;
  cursor: pointer;
  -webkit-user-select: none; /* supported by Chrome and Opera */
  padding: 0;
  transition: 0.33s;
  margin: 0;
}

.landing-slide__videomenu__muteButton--flash {
  opacity: 1;
}

.landing-slide__videomenu__muteButton img {
  width: 400px;
  height: 400px;
  user-select: none; /* supported by Chrome and Opera */
  -webkit-user-select: none; /* supported by Chrome and Opera */
  object-fit: contain;
}

@media only screen and (max-width: 500px) {
  .landing-slide__videomenu__muteButton img {
      width: 300px;
      height: 300px;
  }
}





.landing-slides-container.slide-change {
  animation: slidechange linear 0.4s;
}

.landing-slide {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}


  /* Fabi fix video */
  .landing-slide video {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
  }


.landing-slide.open {
  display: block;
}

.landing-slide img:not(.landing-slide__videomenu__muteButton__img) {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}

/* CHANGERS */
.landing-slide-changers {
  position: absolute;
  top: 95%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}

.landing-slide-changer {
  width: 59px;
  height: 1.5px;
  background-color: #666666;
  border: solid 1.5px #666666;
  margin-right: 27px;
}

.landing-slide-changer.active {
  background-color: #ffffff;
  border: solid 1.5px #ffffff;
}

.landing-slide-changer:hover {
  cursor: pointer;
  background-color: #ffffff;
  border: solid 1.5px #ffffff;
}

#arrowaction{cursor: none;}

.landing-slide-changer.active:hover {
  cursor: default;
} 

#svg-arrow{
  position: fixed;
  z-index: 99;
  /* cursor: none; */
  pointer-events: none;
  display: none

}
#svg-arrow.opacity{
  display: block;
}


#svg-arrow>svg{
  transform: translateX(-50%)translateY(-50%);
  transition: 0.4s cubic-bezier(0.88, -0.29, 0.42, 1.49);
}



.landing-slide-changer:last-of-type {
  margin-right: 0px;
}

/* CLICKFIELDS */
.clickfields-container {
  display: flex;
  flex-wrap: nowrap;
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
}

.clickfield {
  height: 100vh;
  /* width: 100vw; */
  width: 50vw;
  cursor: pointer;
}

.clickfield-left {
  /* cursor: none; */
  /* cursor: url("../images/svg/17_arrow-left.svg"), pointer; */
}

.clickfield-right {
  /* cursor: none; */
  /* cursor: url("../images/svg/18_arrow-right.svg"), pointer; */
}

.clickfield--noCursor {
  cursor: none;
}

/* VERTICAL MEDIA QUERIES */
@media only screen and (max-height: 800px) and (min-width: 1061px) {
  .landing-slide-text-container .editorial {
    font-size: 47px;
    line-height: 43px;
    letter-spacing: -1.31px;
    font-size: 10vh;
    line-height: 9.2vh;
    letter-spacing: -0.3vh;
  }

  .landing-slide-text-container .leipziger {
    font-size: 39px;
    line-height: 36.5px;
    font-size: 9vh;
    line-height: 8.5vh;
  }
}

/* HORIZONTAL MEDIA QUERIES */
@media only screen and (max-width: 1060px) {
  .landing-slide-text-container {
    width: 84vw;
  }

  .landing-slide-text-container .editorial {
    font-size: 85px;
    line-height: 78px;
    letter-spacing: -2.5px;
  }

  .landing-slide-text-container .leipziger {
    font-size: 71.1px;
    line-height: 59.25px;
  }
}

/* adjusts slide text size on vertically smaller viewports */
@media only screen and (max-width: 1060px) and (min-width: 769px) and (max-height: 600px) {
  .landing-slide-text-container .editorial {
    font-size: 10vh;
    line-height: 9.2vh;
    letter-spacing: -0.3vh;
  }

  .landing-slide-text-container .leipziger {
    font-size: 9vh;
    line-height: 8.5vh;
  }
}

@media only screen and (max-width: 768px) {
  .top-left-logo,
  .top-right-oval {
    display: none;
  }
  .top-left-logo-mobile,
  .top-right-logo-mobile,
  .top-middle-text-mobile {
    display: block;
  }

  .landing-slide-text-container .editorial {
    font-size: 47px;
    line-height: 43px;
    letter-spacing: -1.31px;
  }

  .landing-slide-text-container .leipziger {
    font-size: 39px;
    line-height: 36.5px;
  }

  /* CHANGERS */
  .landing-slide-changer {
    width: 41px;
  }

  /* TRAP SLIDER */
  .landing-page-trap {
    font-size: 21px;
    line-height: 28px;
    letter-spacing: -0.25px;
  }
}


@media only screen and (max-width: 440px) {
  #svg-arrow{display: none!important}
  .clickfield-left,.clickfield-right,#arrowaction,#svg-arrow{cursor: default;}
 
}


@media only screen and (max-width: 400px) {
  .landing-slide-text-container {
    width: 90vw;
  }
  .landing-slide-text-container .editorial {
    font-size: 36px;
    line-height: 33px;
    letter-spacing: -1.31px;
  }

  .landing-slide-text-container .leipziger {
    font-size: 30px;
    line-height: 33px;
  }

  /* CHANGERS */
  .landing-slide-changer {
    width: 30px;
    border: solid 1px #666666;
    margin-right: 20px;
  }

  .landing-slide-changer.active {
    border: solid 1px #ffffff;
  }

  .landing-slide-changer:hover {
    border: solid 1px #ffffff;
  }
}

@keyframes slidechange {
  0% {
    filter: brightness(100%);
    --webkit-filter: brightness(100%);
  }

  43% {
    filter: brightness(0%);
    --webkit-filter: brightness(0%);
  }

  57% {
    filter: brightness(0%);
    --webkit-filter: brightness(0%);
  }

  100% {
    filter: brightness(100%);
    --webkit-filter: brightness(100%);
  }
}