@font-face {
  font-family: "Filmotype";
  src: url(../fonts/Filmotype_Leader.otf);
}

@font-face {
  font-family: "Pluto-Regular";
  src: url(../fonts/Pluto-Regular.woff);
}

@font-face {
  font-family: "Pluto-Bold";
  src: url(../fonts/Pluto-Bold.woff);
}

@font-face {
  font-family: "Pluto-Light";
  src: url(../fonts/Pluto-Light.woff);
}

.content-container-jm {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: var(--header-height, 0px);
}

.top-content {
  display: flex;
  width: 100%;
}

.top-content-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #f3f2ec;
  width: 50%;
}

.top-content-left-img {
  width: 40vw;
  padding-block: 3vw;
}

.top-content-right {
  display: flex;
  flex-direction: column;
  /* The panel is stretched to the height of the left image, so distribute the
     leftover height evenly around the blocks instead of pooling it top/bottom.
     The intro's own row-gap below is tuned to match the resulting gap. */
  justify-content: space-evenly;
  align-items: center;
  background: linear-gradient(#741919 0%, #e32d2b 100%);
  width: 50%;
  color: white;
}

.top-content-right-intro {
  display: flex;
  flex-direction: column;
  row-gap: 3.76vw;
  max-width: 100%;
}

.top-content-right-title {
  font-family: "Pluto-Bold", sans-serif;
  font-size: 2.5vw;
  text-align: center;
}

.top-content-right-steps {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: 2vw;
  text-align: left;
}

.step {
  display: flex;
  column-gap: 1vw;
  align-items: center;
}

.step-nr {
  font-family: "Pluto-Bold", sans-serif;
  font-size: 1.5vw;
}

.step-text {
  font-family: "Pluto-Regular", sans-serif;
  font-size: 1.5vw;
  line-height: 1;
}

.span-text-bold {
  font-family: "Pluto-Bold", sans-serif;
  font-size: 2vw;
}

.top-content-right-prizes {
  width: 45vw;
}

.prizes-disclaimer {
  font-family: "Pluto-Light", sans-serif;
  font-size: 1vw;
  color: white;
  text-align: center;
  margin-top: 3vw;
  opacity: 0.8;
}

.before-form-group {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-block: 5vw;
  column-gap: 5vw;
  font-size: 1.25vw;
}

.before-form-left {
  color: #d0122e;
  font-size: 2vw;
  text-align: center;
  font-family: "Pluto-Bold", sans-serif;
}

.bold {
  font-family: "Pluto-Bold", sans-serif;
}

.before-campaign-start {
  color: #d0122e;
  font-size: 1.5vw;
  text-align: center;
  font-family: "Pluto-Bold", sans-serif;
  padding-block: 5vw;
}

/* Hidden by default; applyCampaignState() in upload.js flips it to flex when
   the campaign has ended. */
.campaign-ended {
  display: none;
  flex-direction: column;
  align-items: center;
  row-gap: 1.5vw;
  width: 100%;
  padding-block: 5vw;
  text-align: center;
}

.campaign-ended-title {
  color: #d0122e;
  font-family: "Pluto-Bold", sans-serif;
  font-size: 2vw;
}

.campaign-ended-text {
  font-family: "Pluto-Regular", sans-serif;
  font-size: 1.25vw;
}

.container-for-overlay {
  background-color: #f3f2ec;
  padding-block: 5vw;
  margin-top: 0;
}

.btn-group-down {
  margin-bottom: 0vw;
}

.bottom-content {
  width: 80%;
  margin-left: 10%;
  padding-block: 5vw;
}

.bottom-content-presentation {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.presentation-left {
  display: flex;
  flex-direction: column;
  row-gap: 2vw;
}

.presentation-left-title {
  font-family: "Pluto-Bold", sans-serif;
  font-size: 2vw;
  color: #df1b22;
}

.presentation-left-text {
  font-family: "Pluto-Regular", sans-serif;
  font-size: 1.25vw;
}

.presentation-left-btn {
  background-color: #df1b22;
  color: white;
  font-family: "Pluto-Bold", sans-serif;
  font-size: 1.25vw;
  padding: 0.75vw 2vw;
  border: none;
  cursor: pointer;
  width: 15vw;
  text-align: center;
}

.product-img {
  width: 35vw;
}

.video-container {
  width: 80vw;
  margin-top: 5vw;
  margin-bottom: 5vw;
}

.before-form-right {
  text-align: center;
}

@media (max-width: 1000px) {
  .before-form-left {
    font-size: 3vw;
  }

  .before-form-right {
    font-size: 1.5vw;
  }

  .before-campaign-start {
    font-size: 3vw;
  }

  .presentation-left-title {
    font-size: 3vw;
  }

  .presentation-left-text {
    font-size: 1.75vw;
  }

  .presentation-left-btn {
    font-size: 1.75vw;
    width: 20vw;
  }

  .top-content {
    flex-direction: column;
  }

  .top-content-left {
    width: 100%;
  }

  .top-content-left-img {
    width: 80vw;
  }

  .top-content-right {
    width: 100%;
    padding-block: 5vw;
    /* Stacked: the panel is only as tall as its content, so there is no free
       height for space-evenly to hand out - set the rhythm explicitly. */
    row-gap: 5vw;
  }

  .top-content-right-intro {
    row-gap: 5vw;
  }

  .top-content-right-title {
    font-size: 5vw;
  }

  /* Stacked, there is no title edge to hang off - centre the steps instead. */
  .top-content-right-steps {
    align-items: center;
    text-align: center;
    row-gap: 4vw;
  }

  .step {
    justify-content: center;
  }

  .step-nr {
    font-size: 3vw;
  }

  .step-text {
    font-size: 3.5vw;
    line-height: 1.3;
  }

  .span-text-bold {
    font-size: 4vw;
  }

  .top-content-right-prizes {
    width: 80vw;
  }

  .campaign-ended {
    row-gap: 3vw;
    padding-block: 8vw;
  }

  .campaign-ended-title {
    font-size: 4vw;
  }

  .campaign-ended-text {
    font-size: 2.5vw;
    width: 80%;
  }

  .prizes-disclaimer {
    font-size: 2.25vw;
    margin-top: 2vw;
  }
}