/* Add custom CSS styles below */ 
/* ==================================================
   ANNOUNCEMENT BAR
   ================================================== */

/* Disable Salla's original moving marquee */
.top-marquee {
  animation: none !important;
  transform: none !important;
}

/* Announcement bar container */
.main-top-marquee {
  position: relative !important;
  height: 40px !important;
  overflow: hidden !important;
}

/* Stack Salla's duplicated marquee groups */
.main-top-marquee > .top-marquee {
  position: absolute !important;
  inset: 0 !important;

  width: 100% !important;
  height: 40px !important;

  display: block !important;
}

/* Hide Salla's duplicate marquee groups */
.main-top-marquee > .top-marquee {
  display: none !important;
}

.main-top-marquee > .top-marquee:first-child {
  display: block !important;
}

/* Stack each message in the center */
.main-top-marquee > .top-marquee > a {
  position: absolute !important;

  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;

  margin: 0 !important;
  white-space: nowrap !important;

  opacity: 0;
  animation: inkable-fade 12s infinite !important;
}

/* Message timing */
.main-top-marquee > .top-marquee > a:nth-child(1) {
  animation-delay: 0s !important;
}

.main-top-marquee > .top-marquee > a:nth-child(2) {
  animation-delay: 4s !important;
}

.main-top-marquee > .top-marquee > a:nth-child(3) {
  animation-delay: 8s !important;
}

/* Smooth fade */
@keyframes inkable-fade {
  0% {
    opacity: 0;
  }

  17% {
    opacity: 1;
  }

  28% {
    opacity: 1;
  }

  33% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

/* Announcement typography */
.main-top-marquee a {
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  letter-spacing: 0.2px !important;
}

.main-top-marquee {
  background-color: #FFF3C4 !important;
}