@media (orientation: landscape) {
  .mainBanner.attendBanner,
  .mainBanner.sponsorBanner {
    min-height: calc(100vh - max(100px, min(100px + (142 - 100) * ((100vw - 1366px) / (1920 - 1366)), 142px)));
  }
}

@media (min-width: 1921px) {
  .mainBanner.attendBanner .bgGraphics {
    left: calc(13.6% + min(197px, max(197px + (0 - 197) * ((100vw - 1921px) / (2560 - 1921)), 0px)));
  }
  .mainBanner.sponsorBanner .bgImg {
    width: calc(71% + min(13px, max(13px + (75 - 13) * ((100vw - 1921px) / (2560 - 1921)), 75px)));
  }
}
@media (max-width: 1366px) {
  .attendBanner .bgGraphics {
    left: calc(25.2% + min(9px, max(9px + (0 - 9) * ((100vw - 1260px) / (1366 - 1260)), 0px)));
  }
}

@media (max-width: 1259px) {
  .attendBanner .bgGraphics {
    left: calc(20.225% + min(30px, max(30px + (9 - 30) * ((100vw - 1024px) / (1259 - 1024)), 9px)));
  }
  .sponsorBanner .bgImg {
    width: 75.4%;
  }
}

@media (max-width: 1023px) {
  .attendBanner .bgGraphics {
    left: calc(20.225% + min(63px, max(63px + (9 - 63) * ((100vw - 580px) / (1259 - 580)), 9px)));
  }
  .formPopup {
    width: 87.5% !important;
  }

  .ctaSection .container {
    width: 100%;
  }
}

@media (orientation: portrait) and (max-width: 880px) {
  .attendBanner .portraitBtn,
  .sponsorBanner .bannerBtns .portraitBtn {
    background: #000;
  }

  header .container {
    padding: 0;
  }

  body .attendBanner {
    height: 120vw;
  }

  .attendBanner .content {
    padding: 0;
  }
  .attendBanner .bgGraphics .spiralImg {
    left: 3%;
  }
  .attendBanner .bgGraphics {
    height: calc(100% - 84px);
    left: 123px;
  }
  .attendBanner .bgGraphics {
    left: calc(15% + min(40px, max(40px + (5 - 40) * ((100vw - 580px) / (880 - 580)), 5px)));
  }
  .attendBanner .bannerLeft {
    padding-top: 14vh;
  }

  .attendBanner .bannerRight {
    width: 100%;
    margin-top: auto;
    height: 84px;
  }

  .attendBanner .bannerRight h2 {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0.5rem;
    padding: 0;
    height: 100%;
    line-height: 1.1;
    padding-top: 30px;
  }

  .attendBanner .bannerRight h2 span {
    display: inline-block;
    font-size: 1.5rem;
    color: #fff;
    font-family: "Montserrat", Helvetica, sans-serif;
    text-transform: uppercase;
    line-height: 1.1;
    padding: 0;
    margin: 0;
    clip-path: unset;
  }

  .attendBanner .bannerRight h2 span:nth-child(1) {
    line-height: 1.1;
    padding: 0;
    margin: 0;
    transition-delay: 1.5s;
    order: 2;
    font-weight: 900;
    color: #ffc86e;
  }

  .attendBanner .bannerRight h2 span:nth-child(2) {
    line-height: 1.1;
    padding: 0;
    margin: 0;
    transition-delay: 1.5s;
    font-weight: 900;
    clip-path: polygon(29% 0%, 107% 100%, 0% 100%);
  }

  .attendBanner .bannerRight h2 span:nth-child(3) {
    line-height: 1.1;
    padding: 0;
    margin: 0;
    transition-delay: 1.5s;
    order: 1;
  }

  .bannerBtns {
    position: absolute;
    bottom: 84px;
    z-index: 3;
    width: 100%;
    gap: 1.5rem;
    right: 0;
  }

  .sponsorBanner {
    height: 120vw;
  }
  .sponsorBanner .spiral {
    width: 140%;
    left: 80%;
  }
  .sponsorBanner.active .clip-full-mask {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 128% 100%);
  }

  .sponsorBanner .container > div:first-child {
    padding-bottom: 14vh;
    display: flex;
    align-items: center;
  }

  .sponsorBanner .bgImg img {
    object-position: left;
  }

  .sponsorBanner .bannerBtns {
    bottom: -1px;
    width: 87.5%;
    right: 50%;
    transform: translateX(50%);
    justify-content: flex-end;
  }

  .sponsorBanner .bgImg {
    width: calc(79.93% - min(13px, max(13px + (0 - 13) * ((100vw - 768px) / (880 - 768)), 0px)));
    height: calc(84% - 60px);
  }
}

@media (orientation: landscape) and (max-height: 480px) {
  .headerLogo {
    height: 65px;
  }

  .mainBanner.attendBanner {
    min-height: calc(100vh - 65px);
  }

  .attendBanner .bgGraphics {
    left: calc(19.1% + min(30px, max(30px + (0 - 30) * ((100vw - 320px) / (1180 - 320)), 0px)));
  }
}

@media (max-width: 767px), (orientation: landscape) and (max-height: 480px) {
  h2 {
    font-size: 3.6rem;
  }

  h4 {
    font-size: 1.3rem;
  }

  .statsNo {
    font-size: 2.8rem;
  }
}

@media (max-width: 767px) {
  .container {
    width: calc(100% - 40px);
  }

  .sponsorBanner .bgImg {
    width: calc(100% - 141px);
  }

  .sponsorBanner .bannerBtns {
    width: calc(100% - 40px);
  }
}

@media (max-width: 574px) {
}

@media (max-width: 767px) and (orientation: landscape) {
  .sponsorBanner .bgImg {
    width: calc(78.5% - min(24px, max(24px + (0 - 24) * ((100vw - 575px) / (1259 - 575)), 0px)));
  }
}

@media (max-width: 480px) {
  body .attendBanner {
    height: 140vw;
  }

  .bannerBtns {
    gap: 0.75rem;
  }

  .sponsorBanner .bannerBtns {
    width: calc(100% - 0px);
    justify-content: center;
  }
  .attendBanner .bgGraphics {
    left: calc(27% + min(46px, max(46px + (3 - 46) * ((100vw - 320px) / (480 - 320)), 3px)));
  }
  .formPopup {
    width: calc(100vw - 40px) !important;
  }
}

@media (max-width: 359px) {
  .attendBanner .portraitBtn,
  .sponsorBanner .bannerBtns .portraitBtn {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    min-width: 10rem;
  }
}