@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");
.banner-author-1 {
  position: relative;
  width: 100%;
  height: 60px;
  overflow: hidden;
}
.banner-author-1 .banner-background {
  display: block;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  width: auto;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  object-fit: contain;
  object-position: center;
  -o-object-fit: contain;
  -o-object-position: center;
  -ms-object-fit: contain;
  -ms-object-position: center;
  -webkit-object-fit: contain;
  -webkit-object-position: center;
  pointer-events: none;
}
.banner-author-1 .banner-part {
  display: block;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: white;
}
.banner-author-1 .banner-part > img {
  display: block;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  width: auto;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  object-fit: contain;
  object-position: center;
  -o-object-fit: contain;
  -o-object-position: center;
  -ms-object-fit: contain;
  -ms-object-position: center;
  -webkit-object-fit: contain;
  -webkit-object-position: center;
  pointer-events: none;
}
.banner-author-1 {
  /* 1. Base state - No size/position props */
}
.banner-author-1 .banner-part {
  opacity: 0;
}
.banner-author-1 .banners-parts-wrap {
  display: block;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  /* 2. Assign animation to ALL 4 elements */
  /* Total loop: 12 seconds (4 elements * 3s) */
}
.banner-author-1 .banners-parts-wrap .banner-part:nth-child(1),
.banner-author-1 .banners-parts-wrap .banner-part:nth-child(2),
.banner-author-1 .banners-parts-wrap .banner-part:nth-child(3),
.banner-author-1 .banners-parts-wrap .banner-part:nth-child(4) {
  animation: author-1-banner-bannerSequence 12s infinite;
}
.banner-author-1 .banners-parts-wrap {
  /* 3. Staggering the start times in 3s intervals */
}
.banner-author-1 .banners-parts-wrap .banner-part:nth-child(1) {
  animation-delay: 0s;
}
.banner-author-1 .banners-parts-wrap .banner-part:nth-child(2) {
  animation-delay: 3s;
}
.banner-author-1 .banners-parts-wrap .banner-part:nth-child(3) {
  animation-delay: 6s;
}
.banner-author-1 .banners-parts-wrap .banner-part:nth-child(4) {
  animation-delay: 9s;
}

/* 4. Keyframes - Logic for 25% intervals (3s is 25% of 12s) */
@keyframes author-1-banner-bannerSequence {
  0% {
    opacity: 0;
  }
  /* Quick fade in at the start of its 3s window */
  2% {
    opacity: 1;
  }
  /* Hold visible until near the end of the 3s window */
  23% {
    opacity: 1;
  }
  /* Fade out exactly at the 25% mark (3s) */
  25% {
    opacity: 0;
  }
  /* Stay hidden for the remaining 9s of the loop */
  100% {
    opacity: 0;
  }
}
.banner-cover-2 {
  position: relative;
  width: 100%;
  height: 314px;
  overflow: hidden;
}
@media (max-width: 900px) {
  .banner-cover-2 {
    height: 50vw;
  }
}
.banner-cover-2 .banner-background {
  display: block;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  width: auto;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  object-fit: contain;
  object-position: center;
  -o-object-fit: contain;
  -o-object-position: center;
  -ms-object-fit: contain;
  -ms-object-position: center;
  -webkit-object-fit: contain;
  -webkit-object-position: center;
  pointer-events: none;
}
.banner-cover-2 .banner-part {
  display: block;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: white;
}
.banner-cover-2 .banner-part > img {
  display: block;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  width: auto;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  object-fit: contain;
  object-position: center;
  -o-object-fit: contain;
  -o-object-position: center;
  -ms-object-fit: contain;
  -ms-object-position: center;
  -webkit-object-fit: contain;
  -webkit-object-position: center;
  pointer-events: none;
}
.banner-cover-2 {
  /* 1. Base state - No size/position props */
}
.banner-cover-2 .banner-part {
  opacity: 0;
}
.banner-cover-2 .banners-parts-wrap {
  display: block;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  /* 2. Assign animation to ALL 4 elements */
  /* Total loop: 12 seconds (4 elements * 3s) */
}
.banner-cover-2 .banners-parts-wrap .banner-part:nth-child(1),
.banner-cover-2 .banners-parts-wrap .banner-part:nth-child(2) {
  animation: cover-2-banner-bannerSequence 6s infinite;
}
.banner-cover-2 .banners-parts-wrap {
  /* 3. Staggering the start times in 3s intervals */
}
.banner-cover-2 .banners-parts-wrap .banner-part:nth-child(1) {
  animation-delay: 0s;
}
.banner-cover-2 .banners-parts-wrap .banner-part:nth-child(2) {
  animation-delay: 3s;
}

/* 4. Keyframes - Logic for 50% intervals (3s is 50% of 6s) */
@keyframes cover-2-banner-bannerSequence {
  0% {
    opacity: 0;
  }
  /* Fade in quickly (approx 0.12s) */
  2% {
    opacity: 1;
  }
  /* Hold visible for the first 3 seconds */
  48% {
    opacity: 1;
  }
  /* Fade out at the halfway mark (3s) */
  50% {
    opacity: 0;
  }
  /* Stay hidden for the remaining 3 seconds */
  100% {
    opacity: 0;
  }
}
.banner-large-cover-1 {
  position: relative;
  width: 100%;
  height: 315px;
}
@media (max-width: 900px) {
  .banner-large-cover-1 {
    height: 37vw;
  }
}
.banner-large-cover-1 {
  overflow: hidden;
}
.banner-large-cover-1 .banner-background {
  display: block;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  width: auto;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  object-fit: contain;
  object-position: center;
  -o-object-fit: contain;
  -o-object-position: center;
  -ms-object-fit: contain;
  -ms-object-position: center;
  -webkit-object-fit: contain;
  -webkit-object-position: center;
  pointer-events: none;
}
.banner-large-cover-1 .banner-part {
  display: block;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: white;
}
.banner-large-cover-1 .banner-part > img {
  display: block;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  width: auto;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  object-fit: contain;
  object-position: center;
  -o-object-fit: contain;
  -o-object-position: center;
  -ms-object-fit: contain;
  -ms-object-position: center;
  -webkit-object-fit: contain;
  -webkit-object-position: center;
  pointer-events: none;
}
.banner-large-cover-1 {
  /* 1. Base state - No size/position props */
}
.banner-large-cover-1 .banner-part {
  opacity: 0;
}
.banner-large-cover-1 .banners-parts-wrap {
  display: block;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  /* First part is ALWAYS opacity 1, no animation */
}
.banner-large-cover-1 .banners-parts-wrap .banner-part:nth-child(1) {
  opacity: 1 !important;
  animation: none;
}
.banner-large-cover-1 .banners-parts-wrap {
  /* 2. Assign animation to the 2nd and 3rd elements */
  /* Total loop: 0.6s (0.3s for frame 2, 0.3s for frame 3) */
}
.banner-large-cover-1 .banners-parts-wrap .banner-part:nth-child(2),
.banner-large-cover-1 .banners-parts-wrap .banner-part:nth-child(3) {
  animation: large-cover-1-bannerSequence 0.3s infinite;
}
.banner-large-cover-1 .banners-parts-wrap {
  /* 3. Staggering: Frame 2 starts at 0s, Frame 3 starts at 0.3s */
}
.banner-large-cover-1 .banners-parts-wrap .banner-part:nth-child(2) {
  animation-delay: 0.1s;
}
.banner-large-cover-1 .banners-parts-wrap .banner-part:nth-child(3) {
  animation-delay: 0.2s;
}

/* 4. Keyframes - 0.6s total loop (50% per frame = 0.3s) */
@keyframes large-cover-1-bannerSequence {
  0% {
    opacity: 0;
  }
  /* Instant pop-in */
  1% {
    opacity: 1;
  }
  /* Hold for 0.3s (50% of 0.6s) */
  49% {
    opacity: 1;
  }
  /* Instant pop-out at the halfway mark (0.3s) */
  50% {
    opacity: 0;
  }
  /* Stay hidden while the other frame plays */
  100% {
    opacity: 0;
  }
}
.banner-leaderboard-2 {
  position: relative;
  width: 100%;
  height: 60px;
  overflow: hidden;
}
.banner-leaderboard-2 .banner-background {
  display: block;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  width: auto;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  object-fit: contain;
  object-position: center;
  -o-object-fit: contain;
  -o-object-position: center;
  -ms-object-fit: contain;
  -ms-object-position: center;
  -webkit-object-fit: contain;
  -webkit-object-position: center;
  pointer-events: none;
}
.banner-leaderboard-2 .banner-part {
  display: block;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: white;
}
.banner-leaderboard-2 .banner-part > img {
  display: block;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  width: auto;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  object-fit: contain;
  object-position: center;
  -o-object-fit: contain;
  -o-object-position: center;
  -ms-object-fit: contain;
  -ms-object-position: center;
  -webkit-object-fit: contain;
  -webkit-object-position: center;
  pointer-events: none;
}
.banner-leaderboard-2 {
  /* 1. Base state */
}
.banner-leaderboard-2 .banner-part {
  opacity: 0;
}
.banner-leaderboard-2 .banners-parts-wrap {
  display: block;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  /* First part is ALWAYS opacity 1 */
}
.banner-leaderboard-2 .banners-parts-wrap .banner-part:nth-child(1) {
  opacity: 1 !important;
  animation: none;
}
.banner-leaderboard-2 .banners-parts-wrap {
  /* 2. Using a single 8s loop for the animated parts */
}
.banner-leaderboard-2 .banners-parts-wrap .banner-part:nth-child(2),
.banner-leaderboard-2 .banners-parts-wrap .banner-part:nth-child(3) {
  animation-duration: 8s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.banner-leaderboard-2 .banners-parts-wrap .banner-part:nth-child(2) {
  animation-name: banner-leaderboard-2-part2;
}
.banner-leaderboard-2 .banners-parts-wrap .banner-part:nth-child(3) {
  animation-name: banner-leaderboard-2-part3;
}

/* 4. Keyframe Logic - 8s Loop */
@keyframes banner-leaderboard-2-part2 {
  0%, 15% {
    opacity: 0;
  }
  25%, 45% {
    opacity: 1;
  }
  55%, 100% {
    opacity: 0;
  }
}
@keyframes banner-leaderboard-2-part3 {
  0%, 40% {
    opacity: 0;
  }
  50%, 82% {
    opacity: 1;
  }
  92%, 100% {
    opacity: 0;
  }
}
.banner-mid-article-2 {
  position: relative;
  width: 100%;
  height: 280px;
  overflow: hidden;
}
@media (max-width: 900px) {
  .banner-mid-article-2 {
    height: 80vw;
  }
}
.banner-mid-article-2 .banner-background {
  display: block;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  width: auto;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  object-fit: contain;
  object-position: center;
  -o-object-fit: contain;
  -o-object-position: center;
  -ms-object-fit: contain;
  -ms-object-position: center;
  -webkit-object-fit: contain;
  -webkit-object-position: center;
  pointer-events: none;
}
.banner-mid-article-2 .banner-part {
  display: block;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: white;
}
.banner-mid-article-2 .banner-part > img {
  display: block;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  width: auto;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  object-fit: contain;
  object-position: center;
  -o-object-fit: contain;
  -o-object-position: center;
  -ms-object-fit: contain;
  -ms-object-position: center;
  -webkit-object-fit: contain;
  -webkit-object-position: center;
  pointer-events: none;
}
.banner-mid-article-2 {
  /* 1. Base state */
}
.banner-mid-article-2 .banner-part {
  opacity: 0;
}
.banner-mid-article-2 .banners-parts-wrap {
  display: block;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  /* First part is ALWAYS visible */
}
.banner-mid-article-2 .banners-parts-wrap .banner-part:nth-child(1) {
  opacity: 1 !important;
  animation: none;
}
.banner-mid-article-2 .banners-parts-wrap {
  /* 2. Only the second part animates */
  /* 6s loop: stays hidden for 3s, shows for 3s */
}
.banner-mid-article-2 .banners-parts-wrap .banner-part:nth-child(2) {
  animation: banner-mid-article-2-bannerSequence 6s infinite;
  animation-timing-function: ease-in-out;
}

/* 4. Keyframes - 6s total loop */
@keyframes banner-mid-article-2-bannerSequence {
  0%, 45% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.leaderboard-1 {
  margin-inline: auto;
  display: flex;
  gap: 6px;
  padding: 9px;
  align-items: stretch;
  justify-content: center;
  width: 730px;
  background-color: #0b4723;
  --elements-radius: 10px;
}
.leaderboard-1 > * {
  pointer-events: none;
}
.leaderboard-1 {
  /*@media(max-width: 800px) {
    display: grid;
    grid-auto-columns: 1fr;
    grid-template-columns: 1fr 1fr;


    >* {
      width: 100% !important;
      height: 71px !important;
    }
  }*/
}
.leaderboard-1 > img {
  display: block;
  height: auto;
  border-radius: var(--elements-radius);
  object-fit: cover;
  object-position: center;
  -o-object-fit: cover;
  -o-object-position: center;
  -ms-object-fit: cover;
  -ms-object-position: center;
  -webkit-object-fit: cover;
  -webkit-object-position: center;
  height: 71px;
}
.leaderboard-1 > img.part-1 {
  width: 145px;
}
.leaderboard-1 > img.part-2 {
  width: 50px;
}
.leaderboard-1 > img.part-4 {
  width: 110px;
}
.leaderboard-1 > img.part-5 {
  width: 145px;
}
.leaderboard-1 > .the-text-with-arrow {
  background-color: white;
  border-radius: var(--elements-radius);
  padding: 10px;
  padding-bottom: 5px;
  color: #0b4723;
  min-width: 105px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}
.leaderboard-1 > .the-text-with-arrow span {
  display: block;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  font-size: 10px;
  line-height: 1;
  text-decoration: none;
}
.leaderboard-1 > .the-text-with-arrow svg {
  display: block;
  width: 15px;
  height: auto;
}

.leaderboard-1 > * {
  opacity: 0;
  filter: blur(10px);
  animation: banner-leaderboard-1-stack 5s infinite ease-in-out;
}
.leaderboard-1 > *:nth-child(1) {
  animation-delay: 0s;
}
.leaderboard-1 > *:nth-child(2) {
  animation-delay: 0.1s;
}
.leaderboard-1 > *:nth-child(3) {
  animation-delay: 0.2s;
}
.leaderboard-1 > *:nth-child(4) {
  animation-delay: 0.3s;
}
.leaderboard-1 > *:nth-child(5) {
  animation-delay: 0.4s;
}

@keyframes banner-leaderboard-1-stack {
  0% {
    opacity: 0;
    filter: blur(10px);
  }
  /* Slower entry: 0.6s duration (approx 5.7% of 10.5s) */
  5.7% {
    opacity: 1;
    filter: blur(0);
  }
  /* Hold for 9s (until approx 91%) */
  91.4% {
    opacity: 1;
    filter: blur(0);
  }
  /* Hide in same order with blur out */
  97.1% {
    opacity: 0;
    filter: blur(10px);
  }
  100% {
    opacity: 0;
    filter: blur(10px);
  }
}
.leaderboard-1-scroll-horizontal {
  overflow: auto;
  overflow: hidden;
}
@media (max-width: 800px) {
  .leaderboard-1-scroll-horizontal {
    overflow: auto;
  }
}
.leaderboard-1-scroll-horizontal {
  position: relative;
  height: 90px;
}
.leaderboard-1-scroll-horizontal > .leaderboard-1 {
  position: absolute;
  left: calc(50% - 365px);
}
@media (max-width: 800px) {
  .leaderboard-1-scroll-horizontal > .leaderboard-1 {
    left: 0px;
  }
}

@media (max-width: 800px) {
  *.hide-on-mobile {
    display: none;
  }
}
@media (min-width: 800px) {
  *.hide-on-desktop {
    display: none;
  }
}

.container-animated-banner-add {
  margin-block-end: 2rem;
}
.container-animated-banner-add .pk-pin-it-container a {
  display: none !important;
}/*# sourceMappingURL=banners-style.css.map */