@font-face {
  font-family: "Charter";
  src:
    url("/assets/fonts/charter_regular-webfont.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Charter";
  src:
    url("/assets/fonts/charter_bold-webfont.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Gotham Pro";
  src: url("/assets/fonts/gothampro_light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Gotham Pro";
  src: url("/assets/fonts/gothampro.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Gotham Pro";
  src: url("/assets/fonts/gothampro_medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Gotham Pro";
  src: url("/assets/fonts/gothampro_bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Gotham Pro";
  src: url("/assets/fonts/gothampro_black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
}


body {
  margin: 0;
  background: #0a0d1a;
  font-family: Arial, sans-serif;
}

.calendar {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-image: url("assets/img/background_pc.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}

#buttons-container {
  position: relative;
  height: 100vh;
  aspect-ratio: 581 / 927;
  width: auto;
}

.button {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: white;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
}

@media (max-width: 581px) {
  .calendar {
    background-image: url("assets/img/background_mob.png");
  }

  #buttons-container {
    width: 100vw;
    aspect-ratio: 581 / 859;
    height: auto;
  }
}

.logo {
  position: absolute;
  top: 10px;
  left: 10px;
}

#buttons-container > :nth-child(1)  { top: 42.7%; left: 48.5%; width: 6.4vh; height: 6.4vh; }
#buttons-container > :nth-child(2)  { top: 54.6%; left: 38%;   width: 6.9vh; height: 6.9vh; }
#buttons-container > :nth-child(3)  { top: 28.8%; left: 46.1%; width: 5.2vh; height: 5.2vh; }
#buttons-container > :nth-child(4)  { top: 47.9%; left: 20.5%; width: 5.7vh; height: 5.7vh; }
#buttons-container > :nth-child(5)  { top: 85.3%; left: 33.3%; width: 4.8vh; height: 4.8vh; }
#buttons-container > :nth-child(6)  { top: 33.1%; left: 58.3%; width: 5vh;   height: 5vh;   }
#buttons-container > :nth-child(7)  { top: 67%;   left: 78.3%; width: 5.5vh; height: 5.5vh; }
#buttons-container > :nth-child(8)  { top: 72.7%; left: 20.1%; width: 5vh;   height: 5vh;   }
#buttons-container > :nth-child(9)  { top: 37.8%; left: 39.4%; width: 5.5vh; height: 5.5vh; }
#buttons-container > :nth-child(10) { top: 82.3%; left: 81%;   width: 5.5vh; height: 5.5vh; }
#buttons-container > :nth-child(11) { top: 59.4%; left: 49.6%; width: 5.3vh; height: 5.3vh; }
#buttons-container > :nth-child(12) { top: 43.3%; left: 64.7%; width: 5.5vh; height: 5.5vh; }
#buttons-container > :nth-child(13) { top: 63.6%; left: 22.4%; width: 6.7vh; height: 6.7vh; }
#buttons-container > :nth-child(14) { top: 70.2%; left: 31.3%; width: 7vh;   height: 7vh;   }
#buttons-container > :nth-child(15) { top: 33.2%; left: 31.8%; width: 5vh;   height: 5vh;   }
#buttons-container > :nth-child(16) { top: 57.1%; left: 72.6%; width: 5.5vh; height: 5.5vh; }
#buttons-container > :nth-child(17) { top: 61.8%; left: 13.5%; width: 6vh;   height: 6vh;   }
#buttons-container > :nth-child(18) { top: 81.5%; left: 4%;    width: 6vh;   height: 6vh;   }
#buttons-container > :nth-child(19) { top: 67.9%; left: 51.4%; width: 7.2vh; height: 7.2vh; }
#buttons-container > :nth-child(20) { top: 67.6%; left: 67%;   width: 6.8vh; height: 6.8vh; }
#buttons-container > :nth-child(21) { top: 49.2%; left: 29%;   width: 6vh;   height: 6vh;   }
#buttons-container > :nth-child(22) { top: 73.3%; left: 6.6%;  width: 5.8vh; height: 5.8vh; }
#buttons-container > :nth-child(23) { top: 54.3%; left: 59.9%; width: 6.3vh; height: 6.3vh; }
#buttons-container > :nth-child(24) { top: 75.3%; left: 59.9%; width: 5.1vh; height: 5.1vh; }
#buttons-container > :nth-child(25) { top: 85.5%; left: 55.5%; width: 5.5vh; height: 5.5vh; }

@media (max-width: 581px) {
  .button {
    width: 12vw !important;
    height: 12vw !important;
  }
  #buttons-container > :nth-child(1)  { top: 35.7%; left: 50.5%; }
  #buttons-container > :nth-child(2)  { top: 50.9%; left: 38.9%; }
  #buttons-container > :nth-child(3)  { top: 17.6%; left: 46.3%; }
  #buttons-container > :nth-child(4)  { top: 41.9%; left: 17.1%; }
  #buttons-container > :nth-child(5)  { top: 88%;   left: 31.3%; }
  #buttons-container > :nth-child(6)  { top: 22.9%; left: 60.6%; }
  #buttons-container > :nth-child(7)  { top: 65.7%; left: 84.3%; }
  #buttons-container > :nth-child(8)  { top: 72.6%; left: 16.1%; }
  #buttons-container > :nth-child(9)  { top: 29%;   left: 39.3%; }
  #buttons-container > :nth-child(10) { top: 84.9%; left: 88%;   }
  #buttons-container > :nth-child(11) { top: 55.9%; left: 50.5%; }
  #buttons-container > :nth-child(12) { top: 35.9%; left: 68.6%; }
  #buttons-container > :nth-child(13) { top: 62%;   left: 20%;   }
  #buttons-container > :nth-child(14) { top: 70.5%; left: 31%;   }
  #buttons-container > :nth-child(15) { top: 22.8%; left: 29.6%; }
  #buttons-container > :nth-child(16) { top: 53.5%; left: 77.6%; }
  #buttons-container > :nth-child(17) { top: 59.5%; left: 8.8%;  }
  #buttons-container > :nth-child(18) { top: 83.9%; left: -1%;   }
  #buttons-container > :nth-child(19) { top: 67.6%; left: 54.4%; }
  #buttons-container > :nth-child(20) { top: 67.1%; left: 72.2%; }
  #buttons-container > :nth-child(21) { top: 43.8%; left: 28%;   }
  #buttons-container > :nth-child(22) { top: 73.8%; left: 0.9%;  }
  #buttons-container > :nth-child(23) { top: 50.1%; left: 63%;   }
  #buttons-container > :nth-child(24) { top: 76%;   left: 62.3%; }
  #buttons-container > :nth-child(25) { top: 89%;   left: 57.5%; }
}

.modal.hidden {
  display: none;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.modal-content {
  background: white;
  width: 390px;
  height: 585px;
  margin-top: 18vh;
  margin-right: 16vw;
  border-radius: 20px;
  text-align: center;
  position: relative;
}

@media (max-width: 1060px) {
  .modal {
    align-items: center;
    justify-content: center;
  }
  .modal-content {
    margin-top: 0;
    margin-right: 0;
  }
}

.close-btn {
  position: absolute;
  right: -16px;
  top: -16px;
  cursor: pointer;
  font-size: 26px;
  border-radius: 50%;
  background-color: #397043;
  color: #ffffff;
  width: 31px;
  height: 31px;
}

.banner-content {
  width: 100%;
  height: 100%;
}

.banner-body {
  height: 100%;
  padding: 0 30px;
  overflow: hidden;
}

.header-one,
.header-two,
.header-three {
  font-family: "Charter", serif;
  text-transform: uppercase;
  text-align: center;
  line-height: 36px;
  letter-spacing: 0.02em;
  color: #D21626;
}

.header-one {
  font-weight: 600;
  font-size: 30px;
}

.header-two {
  font-weight: 600;
  font-size: 23px;
}

.header-three {
  font-size: 14px;
}

.text {
  font-family: "Gotham Pro", sans-serif;
  font-size: 14px;
  line-height: 16px;
  text-align: center;
  letter-spacing: 0.02em;
  padding: 0 31px;
}

.social-network {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
}

.modal.early .header-one {
  color: #D21626;
  margin-top: 135px;
}

.modal.early .header-three {
  color: #D21626;
  line-height: 36px;
}

.modal.early .text {
  margin-top: 130px;
}

.modal.early .social-network {
  margin-top: 22px;
}

.date {
  padding: 0 16px;
  margin: 0 auto;
  width: fit-content;
  border-radius: 12px;
  background-color: #397043;
  color: #fff;
  line-height: 33px;
  font-family: 'Charter';
  font-style: normal;
  font-weight: 900;
  letter-spacing: 2%;
}

.modal.late .date {
  margin-top: 100px;
  background-color: #515151 !important;
}

.modal.late .header-one {
  margin-top: 30px;
  color: #515151;
}
.modal.late .header-two {
  color: #515151;
}
.too-late-block {
  font-family: "Gotham Pro", sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 21px;
  padding: 12px 20px;
  border-radius: 22px;
  background-color: #AAAAAA;
  color: #FFFFFF;
  margin: 25px 20px 0 20px;
}
.modal.late .text {
  margin-top: 30px;
}
.modal.late .social-network {
  margin-top: 30px;
}
.product {
  display: flex;
  flex-direction: row;
  padding: 0px 12px;
  margin-top: 20px;
  gap: 10px;
}
.price-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: "Gotham Pro", sans-serif;
  line-height: 33px;
  letter-spacing: -1%;
  justify-content: center;
}
.price-reduction-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
}
.price-old {
  font-size: 15px;
  font-weight: 400;
  color: #397043;
  text-decoration: line-through;
}
.price-reduction {
  background-color: #DF1A2E;
  color: #FFFFFF;
  border-radius: 7px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  height: fit-content;
  padding: 0 6px;
  padding-top: 2px;
}
.price-new {
  font-weight: 700;
  font-size: 30px;
  color: #DF1A2E;
}
.banner .date {
  margin-top: 74px;
}
.banner .header-two {
  margin-top: 22px;
}
.banner .text {
  margin-top: 20px;
  padding: 0;
}
a.advent-link {
  font-family: "Gotham Pro", sans-serif;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 2%;
  text-transform: uppercase;
  text-decoration: underline;
  background-color: #397043;
  color: #FFFFFF;
  border-radius: 12px;
  padding: 10px 16px;
}