#bonpromotion {
  overflow: hidden;
}
#bonpromotion ul {
  margin-bottom: 0;
}
#bonpromotion .video {
  overflow: hidden;
}

#bonpromotion .box-promotion {
  padding: 10px;
  text-align: center;
}

#bonpromotion .image .box-promotion {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-height: inherit;
}

#bonpromotion .video .box-promotion {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100vw;
  z-index: 11;
}

#bonpromotion .h1 {
  font-weight: 500;
  color: var(--gray-black);
  line-height: 119%;
}

#bonpromotion .h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  color: var(--gray-black);
  line-height: 150%;
}

#bonpromotion .h2 span {
  color: #cb1313;
}

#bonpromotion .bonparallax-countdown {
  position: relative;
  display: flex;
  align-items: center;
}

/*button styles*/
#bonpromotion ul li a:focus,
#bonpromotion ul li a:active{
  outline: none;
}

#bonpromotion .link-promotion {
  display: block;
}
#bonpromotion .video .link-promotion {
  position: relative;
}
#bonpromotion .image .link-promotion {
  perspective: 1px;
  overflow-x: hidden;
  overflow-y: auto;
  background-size: cover !important;
}

#bonpromotion .bonpromotion-countdown > span {
  font-size: 25px;
  font-weight: 400;
  line-height: 1;
  display: flex;
  flex-direction: column;
  color: var(--gray-black);
  position: relative;
  font-family: 'Poppins', sans-serif;
}

#bonpromotion .bonpromotion-countdown > span:not(:last-child)::before,
#bonpromotion .bonpromotion-countdown > span:not(:last-child)::after {
  content: "";
  background-color: var(--gray-black);
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  position: absolute;
  left: 100%;
}

#bonpromotion .bonpromotion-countdown > span span {
  line-height: 1.5;
  color: var(--gray-black);
  min-width: 90px;
  font-weight: 500;
}

#bonpromotion .bonpromotion-countdown .promo-dots {
  color: var(--gray-black);
}

#bonpromotion .boxpromotion-btn-wrapper {
  display: flex;
  justify-content: center;
}
#bonpromotion .boxpromotion-btn {
  display: block;
  font-weight: 500;
  background-color: RGB(var(--brand-primary));
  color: #fff;
  line-height: 1.5;
  transition: all .3s cubic-bezier(.39,.58,.57,1);
  border-radius: 14px;
  text-transform: uppercase;
}

#bonpromotion .boxpromotion-btn:hover {
  color: #fff;
  background-color: RGB(var(--brand-hover));
}

#bonpromotion .boxpromotion-btn i {
  font-size: 17px;
}

@media screen and (min-width: 1881px) {
  #bonpromotion .image .link-promotion {
    min-height: 695px;
  }

  #bonpromotion .video .link-promotion {
    max-height: 695px;
  }

  #bonpromotion .h1 {
    font-size: 95px;
    margin-bottom: 33px;
  }

  #bonpromotion .h2 {
    font-size: 44px;
    margin-bottom: 32px;
  }

  #bonpromotion .bonpromotion-countdown > span span {
    font-size: 65px;
  }

  #bonpromotion .boxpromotion-btn {
    font-size: 20px;
    padding: 12px 32px;
  }

  #bonpromotion .bonpromotion-countdown {
    margin-bottom: 75px;
  }

  #bonpromotion .bonpromotion-countdown > span {
    padding-left: 20px;
    padding-right: 20px;
  }

  #bonpromotion .bonpromotion-countdown > span:not(:last-child)::before {
    top: 45px;
  }
  
  #bonpromotion .bonpromotion-countdown > span:not(:last-child)::after {
   bottom: 45px;
  }
}

@media screen and (max-width: 1880px) {
  #bonpromotion .image .link-promotion {
    min-height: calc(395px + (695 - 395) * ((100vw - 320px) / (1880 - 320)));
  }

  #bonpromotion .video .link-promotion {
    max-height: calc(395px + (695 - 395) * ((100vw - 320px) / (1880 - 320)));
  }

  #bonpromotion .h1 {
    font-size: calc(25px + (95 - 25) * ((100vw - 320px) / (1880 - 320)));
    margin-bottom: calc(5px + (33 - 5) * ((100vw - 320px) / (1880 - 320)));
  }

  #bonpromotion .h2 {
    font-size: calc(18px + (44 - 18) * ((100vw - 320px) / (1880 - 320)));
    margin-bottom: calc(10px + (32 - 10) * ((100vw - 320px) / (1880 - 320)));
  }

  #bonpromotion .bonpromotion-countdown > span span {
    font-size: calc(35px + (65 - 35) * ((100vw - 320px) / (1880 - 320)));
  }

  #bonpromotion .boxpromotion-btn {
    font-size: calc(14px + (20 - 14) * ((100vw - 320px) / (1880 - 320)));
    padding: calc(6px + (12 - 6) * ((100vw - 320px) / (1880 - 320))) calc(12px + (32 - 12) * ((100vw - 320px) / (1880 - 320)));
  }

  #bonpromotion .bonpromotion-countdown {
    margin-bottom: calc(20px + (75 - 20) * ((100vw - 320px) / (1880 - 320)));
  }

  #bonpromotion .bonpromotion-countdown > span {
    padding-left: calc(10px + (20 - 10) * ((100vw - 320px) / (1880 - 320)));
    padding-right: calc(10px + (20 - 10) * ((100vw - 320px) / (1880 - 320)));
  }

  #bonpromotion .bonpromotion-countdown > span:not(:last-child)::before {
    top: calc(25px + (45 - 25) * ((100vw - 320px) / (1880 - 320)));
  }
  
  #bonpromotion .bonpromotion-countdown > span:not(:last-child)::after {
   bottom: calc(25px + (45 - 25) * ((100vw - 320px) / (1880 - 320)));
  }
}