@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);
}

.jm-content {
  margin-top: 160px;
}

@media (max-width: 1599px) {
  .jm-content {
    margin-top: 128px;
  }
}

@media (max-width: 1023px) {
  .jm-content {
    margin-top: 96px;
  }
}

@media (max-width: 767px) {
  .jm-content {
    margin-top: 80px;
  }
}

@media (max-width: 639px) {
  .jm-content {
    margin-top: 96px;
  }
}

.campaign-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.top-bg {
  width: 100vw;
  height: 45vw;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  z-index: 2;
}

.top-text {
  position: absolute;
  display: flex;
  flex-direction: column;
  text-align: center;
  align-self: flex-start;
  margin-top: 1vw;
}

.top-text-first {
  font-family: "Pluto-Bold", sans-serif;
  font-size: 2.75vw;
  color: #ffffff;
}

.top-text-second {
  font-family: "Filmotype", sans-serif;
  font-size: 5vw;
  color: #ffffff;
}

.red-half {
  background: linear-gradient(to bottom, #480604 0%, #ae0f0a 42%);
  width: 50%;
  height: 100%;
}

.yellow-half {
  background: #fdc533;
  width: 50%;
  height: 100%;
}

.city {
  position: absolute;
  width: 100vw;
  margin-bottom: -1vw;
}

.effect-1 {
  position: absolute;
  width: 100vw;
  height: 45vw;
  opacity: 10%;
}

.effect-2 {
  position: absolute;
  width: 100vw;
  height: 45vw;
  opacity: 25%;
}

.prizes-list {
  z-index: 2;
  display: flex;
  flex-direction: column;
  row-gap: 2vw;
  margin-top: -5vw;
}

.prize-line {
  display: flex;
  align-items: center;
  line-height: 1.25;
  margin-left: 12vw;
}

.prize-nr {
  font-family: "Filmotype", sans-serif;
  color: #e01b22;
  font-size: 9vw;
  margin-right: 0.5vw;
}

.prize-desc {
  font-family: "Pluto-Regular", sans-serif;
  font-size: 2.25vw;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.prize-desc-line {
  display: block;
}

.prize-desc-line.shift-1 {
  margin-left: 2vw;
}

.prize-desc-line.shift-2 {
  margin-left: 4vw;
}

.red-text {
  font-family: "Pluto-Bold", sans-serif;
  color: #e01b22;
}

.prize-img {
  width: 16.5vw;
  z-index: -1;
}

.bg-img {
  position: absolute;
  width: 100vw;
  margin-top: 8vw;
}

.bg-img img {
  display: block;
  width: 100%;
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.8) 90%,
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.8) 90%,
    rgba(0, 0, 0, 0) 100%
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.top-image {
  width: 100vw;
  margin-top: -44vw;
  z-index: 2;
}

.info-text {
  font-family: "Pluto-Light", sans-serif;
  font-size: 1.5vw;
  color: #000000;
  margin-top: 2vw;
  z-index: 2;
}

.container-for-overlay {
  margin-top: 5vw;
}

.jm-bottom-carousel {
  margin-top: 5vw;
}

.carousel-page {
  display: flex;
  align-items: center;
  column-gap: 4vw;
  margin-left: 10vw;
  width: 80vw;
  justify-content: center;
}

.carousel-left-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  row-gap: 2vw;
}

.carousel-left-title {
  color: #df1b22;
  font-family: "Pluto-Bold";
  font-size: 2vw;
}

.carousel-left-desc {
  font-family: "Pluto-Light";
  font-size: 1.25vw;
}

.carousel-left-bottom {
  display: flex;
  align-items: center;
  column-gap: 10vw;
}

.carousel-bottom-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  background-color: #df1b22;
  font-family: "Pluto-Light";
  padding: 0.5vw;
  padding-inline: 2vw;
  font-size: 1.5vw;
  cursor: pointer;
}

.carousel-bottom-sliders {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 2vw;
}

.carousel-bottom-sliders div {
  background-color: #df1b22;
  width: 2.5vw;
  height: 2.5vw;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.carousel-slider-r svg {
  margin-left: 0.25vw;
}

.carousel-slider-l svg {
  margin-left: -0.25vw;
}

.carousel-bottom-sliders svg {
  width: 1vw;
}

.carousel-bottom-sliders div {
  transition: background-color 0.5s ease;
}

.carousel-bottom-sliders div:hover {
  background-color: white;
  border: 0.1vw solid #df1b22;
}

.carousel-slider-l svg path,
.carousel-slider-r svg path {
  transition: stroke 0.5s ease;
}

.carousel-slider-l:hover svg path,
.carousel-slider-r:hover svg path {
  stroke: #df1b22;
}

.carousel-right-side {
  width: 37vw;
  height: 37vw;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: auto;
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(500px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-500px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Animations for exiting */
@keyframes fadeOutLeft {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-500px);
  }
}

@keyframes fadeOutRight {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(500px);
  }
}

.fade-in-right {
  animation: fadeInRight 0.5s forwards;
}

.fade-in-left {
  animation: fadeInLeft 0.5s forwards;
}

.fade-out-left {
  animation: fadeOutLeft 0.5s forwards;
}

.fade-out-right {
  animation: fadeOutRight 0.5s forwards;
}

#page2 {
  display: none;
}

@media (max-width: 1000px) {
  .prize-desc {
    font-size: 3vw;
  }

  .prize-nr {
    font-size: 12vw;
  }

  .prize-img {
    width: 20vw;
  }

  .top-text {
    margin-top: 2vw;
  }

  .info-text {
    font-size: 2.5vw;
  }

  .carousel-right-side {
    width: 80vw;
    height: 80vw;
    margin-left: 0;
  }

  .carousel-left-title {
    font-size: 7vw;
  }

  .carousel-page {
    column-gap: 0;
    flex-direction: column;
    row-gap: 5vw;
  }

  .carousel-left-desc {
    font-size: 3vw;
  }

  .carousel-bottom-btn {
    font-size: 3.5vw;
    padding: 1vw;
    padding-inline: 4vw;
  }

  .carousel-bottom-sliders div {
    width: 7vw;
    height: 7vw;
  }

  .carousel-bottom-sliders svg {
    width: 2vw;
  }

  .desktop-only br {
    display: none;
  }
}