:root {
  --sunset: #6c0146;
  --sunset-purple: #997add;
  --sunset-pink: #ec91b9;
  --sunset-orange: #ffb72b;
  --sunset-red: #e13a06;

  --sunset-from: #012249;
  --sunset-via: #1a64bb;
  --sunset-to: #ffa048;
  --deep-ocean: #022b49;
  --sunset-foreground: #fff;
}

#bodysunset .bg-sunset-red {
  background-color: var(--sunset-red) !important;
}

#bodysunset #header {
  position: relative;
  height: 668px;
  background: linear-gradient(
    181.68deg,
    var(--sunset-from) -9.27%,
    var(--sunset-via) 49.96%,
    var(--sunset-to) 109.19%
  );
}
#bodysunset #header:before {
  content: '';
  position: absolute;
  top: 1px;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent url('/assets/images/sunset-image.png') no-repeat
    center;
  background-position: center calc(100% - 4px);
  background-size: min(415px, 30%) auto;
}
#bodysunset #header .brand-inner {
  max-width: 585px;
}
#bodysunset .page-headline {
  max-width: 100%;
}

#bodysunset .bg-elements .bg-wave {
  background: var(--sunset-orange) url('/assets/images/bg-sunset-wave.png')
    no-repeat center top / 100% 100%;
}
#bodysunset .bg-elements .bg-wave-1 {
  background: url('/assets/svg/sunset-wave-1.svg') no-repeat right top;
  background-size: 100% 58.33vw;
}
#bodysunset .bg-elements .bg-wave-2 {
  background: url('/assets/svg/sunset-wave-2.svg') no-repeat left top;
  background-size: 100% 67.64vw;
}
#bodysunset .bg-elements .sun-reflection {
  background: url('/assets/svg/sunset-water-1.svg') no-repeat center top;
  background-size: 100% auto;
}
#bodysunset .bg-elements .sun-reflection-2 {
  background: url('/assets/svg/sunset-water-2.svg') no-repeat center top;
  background-size: 100% auto;
}
#bodysunset .bg-elements .cloud-1 {
  background: transparent url('/assets/svg/sunset-cloud-1.svg') no-repeat left
    center / 100% 100%;
}
#bodysunset .bg-elements .cloud-2 {
  background: transparent url('/assets/svg/sunset-cloud-2.svg') no-repeat left
    center / 100% 100%;
}
#bodysunset .bg-elements .cloud-3 {
  background: transparent url('/assets/svg/sunset-cloud-3.svg') no-repeat right
    center / 100% 100%;
}
#bodysunset .bg-elements .cloud-4 {
  background: transparent url('/assets/svg/sunset-cloud-4.svg') no-repeat right
    center / 100% 100%;
}
#bodysunset .bg-elements .cloud-5 {
  background: transparent url('/assets/svg/sunset-cloud-5.svg') no-repeat right
    center / 100% 100%;
}
#bodysunset .bg-elements .cloud-6 {
  background: transparent url('/assets/svg/sunset-cloud-6.svg') no-repeat right
    center / 100% 100%;
}
#bodysunset .bg-elements .star-brt {
  background: transparent url('/assets/svg/sunset-stars.svg') no-repeat center
    center / 100% 100%;
}
#bodysunset .bg-elements .fish-1 {
  background: transparent url('/assets/images/jelly-school.png') no-repeat
    center top / contain;
}
#bodysunset .bg-elements .fish-2 {
  background: transparent url('/assets/images/fish-fade-1.png') no-repeat center top /
    contain;
}
#bodysunset .bg-elements .fish-3 {
  background: transparent url('/assets/images/fish-fade-1.png') no-repeat center top /
    contain;
}
#bodysunset .bg-elements .fish-4 {
  top: 50px;
}
#bodysunset .bg-elements .fish-5 {
  top: 300px;
  left: -100px;
  width: 75px;
  max-width: 100%;
  height: 0;
  padding-top: 10%;
  background: transparent url('/assets/images/fish-8.png') no-repeat center top /
    contain;
}
#bodysunset .bg-elements .diver-1 {
  background-image: url('/assets/images/diver.png');
}
#bodysunset .bg-elements .diver-2 {
  top: 255px;
  right: -200px;
  background-image: url('/assets/images/sealion-2.png');
}
#bodysunset .bg-elements .fish-school-1 {
  top: 270px;
  left: -215px;
  max-width: 100%;
  padding-top: 20%;
  width: 461px;
  height: 266px;
  opacity: 0.7;
  mix-blend-mode: multiply;
  background: transparent url('/assets/images/fish-group.png') no-repeat center
    top / contain;
}

#bodysunset .bg-elements .little-fish-1 {
  top: 130px;
  right: 65px;
  width: 40px;
  height: 20px;
  background: transparent url('/assets/images/little-fish-1.png') no-repeat
    center top / contain;
}

#bodysunset .bg-elements .trash-3 {
  display: none;
}
#bodysunset .bg-elements .squid-1 {
  top: 250px;
  right: -200px;
  width: 200px;
  max-width: 100%;
  height: 0;
  padding-top: 20%;
  background: transparent url('/assets/images/squid-1.png') no-repeat center top /
    contain;
}

#bodysunset #main {
  background: linear-gradient(
    to bottom,
    #0180b6 0% 20%,
    #0058a5 50%,
    #022b49 100%
  );
}

#bodysunset #sectionTop {
  padding-top: 5rem;
}

#bodysunset .live-counter,
#bodysunset .live-counter-subtitle {
  color: var(--sunset-foreground) !important;
}
#bodysunset .live-counter-subtitle {
  font-size: 1.5rem;
  letter-spacing: 0.48px;
}
#bodysunset .the-guys {
  display: block;
  position: absolute;
  left: 0px;
  top: -70px;
  width: 218px;
  height: 183px;
  z-index: 10;
  background: transparent url('/assets/svg/the-guys-1.svg') no-repeat left center /
    100% 100%;
}

/*RESPONSIVE DESIGNS*/

@media (max-width: 1199px) {
  #bodysunset #header {
    height: 620px;
  }
  #bodysunset .bg-elements .fish-5 {
    left: -50px;
  }

  #bodysunset .bg-elements .squid-1 {
    right: -50px;
  }

  #bodysunset .live-counter-subtitle {
    font-size: 1.25rem;
  }
}

@media (max-width: 991px) {
  #bodysunset #header {
    height: 600px;
  }
  #bodysunset .the-guys {
    position: static;
    left: 0px;
    top: -70px;
  }
}

@media (max-width: 767px) {
  #bodysunset #header {
    height: 580px;
  }

  #bodysunset #section2 .section-inner {
    padding-top: 7rem;
  }

  #bodysunset .bg-elements .bg-wave {
    background-size: 180% 100%;
  }
  #bodysunset .bg-elements .diver-2 {
    top: 475px;
    right: -80px;
    width: 250px;
    max-width: 100%;
    height: 0;
    padding-top: 60%;
  }

  #bodysunset .bg-elements .fish-5 {
    top: 500px;
    left: 45%;
    width: 10%;
  }
  #bodysunset .bg-elements .squid-1 {
    top: 450px;
    right: -50px;
  }
  #bodysunset .bg-elements .turtle-2 {
    top: 450px;
    right: auto;
    left: -50px;
  }

  #bodysunset .timeline-wrapper {
    margin-top: 100px;
  }
}

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

@media (max-width: 575px) {
  #bodysunset #header {
    height: 550px;
  }
  #bodysunset .large-ribbon {
    right: 0;
  }

  #bodysunset #section2 .section-inner {
    padding-top: 3rem;
  }

  #bodysunset .bg-elements .fish-5 {
    top: 600px;
    left: 45%;
    width: 10%;
  }
  #bodysunset .bg-elements .squid-1 {
    top: 550px;
    right: -50px;
  }
  #bodysunset .bg-elements .turtle-2 {
    top: 550px;
    right: auto;
    left: -50px;
  }
}

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

/*DARK DESIGNS*/

@media (prefers-color-scheme: dark) {
  #bodysunset .live-counter,
  #bodysunset .live-counter-subtitle {
    color: var(--sunset);
  }
}