@font-face {
  font-family: "AudiType-Normal";
  src: url("/fonts/Audi Type Digital/AudiType v4.03 Web Fonts (TrueType)/AudiType-Normal_4.03.woff2") format("woff2"),
    url("/fonts/Audi Type Digital/AudiType v4.03 Web Fonts (TrueType)/AudiType-Normal_4.03.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "AudiType-ExtendedNormal";
  src: url("/fonts/Audi Type Digital/AudiType v4.03 Web Fonts (TrueType)/AudiType-ExtendedNormal_4.03.woff2") format("woff2"),
    url("/fonts/Audi Type Digital/AudiType v4.03 Web Fonts (TrueType)/AudiType-ExtendedNormal_4.03.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

body {
  margin: 0;
  background-color: #000;
}

.section {
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100vh;
}

@media screen and (min-width: 1024px) {
  .section {
    height: auto;
  }
}

.intro {
  position: sticky;
  top: 0;
}

.puzzle {
}

.puzzle.v--complete {
}

.section__background {
  display: block;
  height: auto;
  object-fit: contain;
  object-position: right top;
  transition: opacity 0.5s ease-in-out;
}

@media screen and (min-width: 1024px) {
  .section__background {
    object-position: center;
  }
}

.puzzle.v--complete .section__background {
  opacity: 0;
}

.section__background.v--alt {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
}

.puzzle.v--complete .section__background.v--alt {
  opacity: 1;
}

.section__content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 26vw 8vw 0; /* 10vw 8vw 8vw */
}

@media screen and (min-width: 1024px) {
  .section__content {
    padding: 13vw 8vw 0; /* 10vw 8vw 8vw */
  }
}

@media screen and (min-width: 1600px) {
  .section__content {
    padding: 253px 154px 0; /* 10vw 0 8vw */
  }
  
}

.section__logo {
  display: block;
  width: 23vw; /* 10vw */
  height: auto;
  margin: 0 0 32vw; /* 6vw */
}

@media screen and (min-width: 1024px) {
  .section__logo {
    width: 11.5vw; /* 10vw */
    margin: 0 0 8vw; /* 6vw */
  }
}

@media screen and (min-width: 1600px) {
  .section__logo {
    width: 220px; /* 10vw */
    margin: 0 0 153px; /* 6vw */
  }

}

.section__title {
  margin: 0 0 12.5vw; /* 4vw */
  font-family: "AudiType-ExtendedNormal", sans-serif;
  color: #fff;
  font-weight: 400;
  font-size: 6.8vw; /* 3vw */
  line-height: 1em; /* 3.5vw */
}

@media screen and (min-width: 1024px) {
  .section__title {
    margin: 0 0 3.125vw; /* 4vw */
    font-size: 3.4vw; /* 3vw */
  }
}

@media screen and (min-width: 1600px) {
  .section__title {
    margin: 0 0 60px; /* 4vw */
    font-size: 65px; /* 3vw */
  }
}

.section__description {
  width: 100%;
  margin: 0 0 10vw; /* 3vw */
  font-family: "AudiType-ExtendedNormal", sans-serif;
  color: #fff;
  font-size: 3.2vw; /* 0.75vw */
  line-height: 6vw; /* 1.25vw */;
}

@media screen and (min-width: 1024px) {
  .section__description {
    max-width: 47.4vw; /* 42vw */
    margin: 0 0 2.5vw; /* 3vw */
    font-size: 0.8vw; /* 0.75vw */
    line-height: 1.5vw; /* 1.25vw */;
  }
}

@media screen and (min-width: 1600px) {
  .section__description {
    max-width: 910px; /* 42vw */
    margin: 0 0 48px; /* 3vw */
    font-size: 15px; /* 1.25vw */
    line-height: 28px; /* 1.25vw */
  }

}

.section__cta {
  display: inline-block;
  padding: 3.6vw 6.64vw 4.2vw; /* 1vw 2vw */
  border: 1px solid #fff;
  font-family: "AudiType-ExtendedNormal", sans-serif;
  color: #000;
  font-size: 3.2vw; /* 0.75vw */
  line-height: 1em; /* 1vw */
  text-decoration: none;
  background-color: #fff;
}

@media screen and (min-width: 1024px) {
  .section__cta {
    padding: 0.9vw 1.66vw 1.05vw; /* 1vw 2vw */
    font-size: 0.8vw; /* 0.75vw */
  }
}

@media screen and (min-width: 1600px) {
  .section__cta {
    padding: 18px 30px 20px; /* 1vw 2vw */
    font-size: 15px; /* 0.75vw */
  }
}

.section__dates {
  /* position: absolute; */
  /* bottom: 8vw; */
  /* left: 50%; */
  font-family: "AudiType-Normal", sans-serif;
  color: #fff;
  font-size: 3.2vw; /* 0.75vw */
  line-height: 1em; /* 1.25vw */;
  text-align: center;
  margin-top: 15vw;
  /* white-space: nowrap; */
  /* transform: translateX(-50%); */
}

@media screen and (min-width: 1024px) {
  .section__dates {
    /* bottom: 4vw; */
    font-size: 0.8vw; /* 0.75vw */
    margin-top: 4vw;
  }
}

@media screen and (min-width: 1600px) {
  .section__dates {
    bottom: 40px;
    font-size: 15px; /* 0.75vw */
  }
}

.puzzle__embed {
  /* align-self: center; */
  position: relative;
  width: 100%;
  margin: 14.8vw 0 0; /* 2vw */
  padding: 0 0 26vw; /* 5vw */
  box-sizing: border-box;
}

@media screen and (min-width: 1024px) {
  .puzzle__embed {
    margin: 7.4vw 0 0; /* 2vw */
    padding: 0 7.2vw 13vw; /* 5vw */
  }
}

@media screen and (min-width: 1600px) {
  .puzzle__embed {
    margin: 141px 0 0; /* 2vw */
    padding: 0 138px 253px; /* 5vw */
  }
}

.only--mobile {
  display: block;
}

@media screen and (min-width: 1024px) {
  .only--mobile {
    display: none;
  }
}

.only--desktop {
  display: none;
}

@media screen and (min-width: 1024px) {
  .only--desktop {
    display: block;
  }
}