@font-face {
  font-family: 'Chivomono';
  src: url('https://file.hstatic.net/1000360022/file/chivomono-regular.ttf') format('truetype');
}
*{
  font-family: 'Chivomono', sans-serif !important;
}
.product-block .product-detail .pro-name a{
  font-size: 14px;
}
.success-lucky p {
    margin-bottom: 0;
}
.note-cart p {
    font-size: 13px;
    margin-bottom: 0;
}
 #section-three .text_content .three-text-content .item h1{
  font-size: 18px;
  color:#DDAE00;
  letter-spacing: 1px;
  font-weight: 700 !important;
}
footer{
  display:none;
}
.position-ab{
  position: absolute;
}
// .btn-deadpool-page img{
//   width: 100%;
// }
.btn-coming-soon{
  width: 100%;
}
.container-deadpool{
  margin: 0 auto;
  position: relative;
  max-width: 100%;
}

@media (min-width:1200px){
  .container-deadpool{
    width:1200px
  }
}
#header #site-header-center .logo img{
  
}
@media (min-width:1400px){
  .container-deadpool{
    width:1500px       
  }
}
  .img-text-animation img{
    max-width: 900px;
  }
  .img-text-animation{
        top: 117px;
  }
  .section-eight-content .d-flex-column:last-child{
    display:none;
  }
.three-text1{
  top: 16%;
  left: 4%;
}
.three-text2{
      top: 13%;
    right: 5%;
}
.three-text3{
      bottom: 32%;
    left: 11%;
}
.three-text4{
  bottom: 19%;
    right: 7%;
}
.five-text1{
top: 3%;
    left: 0px;
}
.five-text2{
          bottom: 7%;
        left: 18%;
}
  .five-text4{
          right: 22%;
        bottom: 20%;
}
.five-text3{
      right: 0%;
    top: 1%;
}
.five-text1 img, .five-text3 img{
  object-fit: contain;
  object-position: center;
  height: auto;
}
.five-text1, .five-text3{
  animation: zoom-in-zoom-out-gift 2s ease-out ;
  -moz-animation: zoom-in-zoom-out-gift 2s ease-out;
  -webkit-animation: zoom-in-zoom-out-gift 2s ease-out;
  -o-animation: zoom-in-zoom-out-gift 2s ease-out;
  animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
}
@keyframes zoom-in-zoom-out-gift {
0%, 100% {
  transform: rotate(2);
}
25% {
  transform:rotate(-2deg);
}
  50% {
    transform:rotate(2deg);
  }
  75% {
    transform: rotate(-2deg);
  }
}
  #section-five .five-text2 img, #section-five .five-text4 img{
    max-width: 100%;
    object-fit: contain;
  }
  #section-five .five-text3 img{
    max-width: 505px;
    object-fit: contain;
  }
  #section-five .five-text1 img{
    max-width: 450px;
    object-fit: contain;
  }

.product-block .product-detail {
    justify-content: end;
}
.product-block .product-detail .pro-name {
    margin-bottom: 5px;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.text_content{
  position: absolute;
  bottom: 0px;
  background: #A90112;
  height: 135px;
  width: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.loading-container img{
  position: absolute;
  width: auto;
  height: 120px;
  top: -61px;
  left: 50%;
  transform: translateX(-50%);
}
.three-text-content{
  background: black;
  width: 100%;
  height: 45px;
  display: flex;
  align-items: center;
  position: relative;
  padding: 0 10px;
}
.three-text-content:before {
   background: black;
  top: -11px;
  content: "";
  height: 7px;
  width: 100%;
  position: absolute;
  transition: width .2s ease-in-out;
  left: 0px;
}
.three-text-content .item {
  flex: 1;
  margin-right: 10px;
  white-space: nowrap;
}
#header #site-header-center #menu-desktop > li > a{
  font-weight: 700 !important;
}

.three-text-content h1 span{
  margin-right: 20px;
}
.flex-deadpool{
  display: flex;
}
.loading-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  width: 100%;
  max-width: 800px;
  text-align: right;
  background-color: transparent;
  border: 2px solid #C79617;
  padding: 2px 10px 2px 4px;
  margin: 0 auto;
  position: absolute;
  bottom: 2%;
  left: 50%;
  transform: translateX(-50%);
}
// #dots{
//   margin-left: 2px;
//   margin-right:2px;
// }

    #dots {
        display: inline-block;
        width: 20px;
        text-align: left;
        position: absolute;
        right: 7px;
        top: 50%;
        transform: translateY(-50%);
        margin-right: -6px;
        font-size: 13px;
    }
  .loading-text h1{
    font-size: 16px;
  }
#dots::before {
    content: '';
    animation: dots 0.5s steps(4, end) infinite;
}

@keyframes dots {
    0%, 20% {
        content: '';
    }
    40% {
        content: '.';
    }
    60% {
        content: '..';
    }
    80%, 100% {
        content: '...';
    }
}
.loading-text {
  font-size: 14px;
  font-weight: bold;
  color: #F9C004;
  width: 22%;
  position: relative;
  display:flex;
}

.progress-bar {
  width: 80%;
  height: 25px;
  background-color: transparent;
  overflow: hidden;
}
.three-text-content h1{
  color: white;
  font-family: 'Jersey', sans-serif !important;
  animation: auto-run 5s linear infinite;
  font-size: 40px;
}
@keyframes auto-run {
  0% {
    transform: translateX(0%); /* Start position */
  }
  100% {
    transform: translateX(-100%); /* End position */
  }
}

.progress-bar-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(to right, #F9971A, #FAAE19, #FCBF17, #FED813), radial-gradient(circle,  #F9971A, #FAAE19, #FCBF17, #FED813);
  text-align: center;
  color: white;
  line-height: 30px;
  font-weight: bold;
}
.section-eight-content{
  position: relative;
}
.button-position{
  position: absolute;
   z-index: 1000;
}
.button-position1{
  position: absolute;
  z-index: 1000;
}
.position-1{
  left: 32%;
  top: 23%;
}
.position-2{
  bottom: 32%;
  left: 58%;
}
.position-3{
  top: 35%;
  left: 28%;
}
.position-4{
  left: 69%;
  bottom: 19%;
}
.position-5{
  left: 30%;
    top: 24%;
}
.position-6{
  top: 58%;
  left: 60%;
}
.position-7{
  top: 25%;
  left: 29%;
}
.position-8{
  top: 56%;
  left: 61%;
}
.position-9{
  top: 30%;
  left: 23%;
}
.position-10{
  top: 55%;
  left: 57%;
}
.position-11{
  top: 27%;
  left: 32%;
}
.position-12{
  top: 60%;
  left: 67%;
}
.position-13{
     top: 22%;
    left: 29%;
}
.position-14{
  left: 65%;
  top: 56%;
}
.position-15{
     top: 21%;
    left: 33%;
}
.position-16{
  top: 60%;
  left: 67%;
}
.position-17{
  top: 17%;
    left: 34%;
}
.position-18{
  top: 57%;
  left: 63%;
}
#header #site-header-center #menu-desktop > li > a{
  color: white !important;
}
#site-header-center{
 background-image: url("https://file.hstatic.net/1000360022/file/bg.jpg") !important;
      background-repeat: no-repeat !important;
    background-size: cover !important;
  background-position: center !important;
}
#menu-desktop{
   background-image: url("https://file.hstatic.net/1000360022/file/bg.jpg") !important;
      background-repeat: no-repeat;
    background-size: cover;
  background-position: center;
}

.product-block .product-detail .pro-name a{
  margin-bottom:0 !important;
}
.btn-deadpool-page{
  // border-radius: 100%;
  border: none;
  background: transparent;
}
.btn-muangayproduct-deadpool{
  height: 40px;
  // padding: 5px 10px;
  width: 100%;
  // margin-bottom: 15px;
  color: white;
  border: none;
  line-height: 28px;
  // margin-top: 10px;
  text-align: center;
  font-size: 16px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background: transparent;
}
.section-four-content{
  position: absolute;
  bottom: 10px;
  left: 25px;
}
.section-nine-img{
  position: absolute;
  bottom: 0px;
}
.section-seven-content{
  position: absolute;
  bottom: 10px;
  right: 15px;
}
.container_deadpool{
  width: 570px;
  overflow: auto;
}
.roll-deadpool::-webkit-scrollbar {
  height: 5px;
}
.roll-deadpool::-webkit-scrollbar-track {
  background: black;
}
.roll-deadpool::-webkit-scrollbar-thumb {
  background: white;
}
.roll-deadpool::-webkit-scrollbar-thumb:hover {
  background: black;
}
.container_deadpool .product-block{
  width: 200px;
}
.section-eight-img{
  position: relative;
}
.img-text-animation {
      position: absolute;
    left: 50%;
    // top: 5%;
    transform: translateX(-50%) !important;
}

#section-nine .product-block .product-detail{
  padding-bottom:10px;
  max-height: 210px;
}

.section-eight-content .d-flex-column{
  padding: 20px;
}
.section-eight-content{
  position: absolute;
  top: 13%;
  width: 94%;
  left: 50%;
  // transform: translate(-50%, -57%);
  transform: translateX(-50%);
}
.section-nine-product{
  position: absolute;
  top: 1%;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
      display: flex;
    justify-content: center;
}
.section-nine-product .d-flex-column{
  padding: 15px;
}
.product-block.item {
    padding: 10px 5px;
}
.product-block .product-detail .pro-name a{
  -webkit-line-clamp: 2 !important;
}
#section-nine{
  position: relative;
      // height: 2150px;
}
#section-nine .container-deadpool{
  height: 2800px;
    background: #A90112;
    padding: 0px 0px;
}
.deadpool_video{
  z-index: 11;
  position: absolute;
  top: 86%;
  left: 50%;
  transform: translate(-50%, -50%)
}
@media screen and (max-width: 1399px) {
  .img-text-animation img {
    max-width: 800px;
}
    .img-text-animation{
        top: 80px;
  }
  .five-text1{
top: 3%;
    left: 0px;
}
.five-text2{
  
}
.five-text3{
      right: 0%;
    top: 1%;
}
.five-text4{
  
}

  #section-five .five-text3 img{
    max-width: 405px;
    object-fit: contain;
  }
  #section-five .five-text1 img{
    max-width: 400px;
    object-fit: contain;
  }
  #section-nine .container-deadpool {
    height: 2410px;
  }
  #myVideo iframe{
    width: 1000px;
    height: 563px;
  }
  .position-1{
    left: 27%;
    top: 20%;
  }
  .position-2{
    bottom: 27%;
    left: 58%;
  }
  .position-3{
    top: 32%;
    left: 23%;
  }
  .position-4{
    left: 69%;
    bottom: 19%;
  }
  .position-5{
    left: 28%;
    top: 19%;
  }
  .position-6{
    top: 58%;
    left: 60%;
  }
  .position-7{
    top: 22%;
    left: 23%;
  }
  .position-8{
    top: 56%;
    left: 61%;
  }
  .position-9{
    top: 30%;
    left: 23%;
  }
  .position-10{
    top: 55%;
    left: 57%;
  }
  .position-11{
    top: 23%;
    left: 29%;
  }
  .position-12{
    top: 60%;
    left: 67%;
  }
  .position-13{
    top: 22%;
    left: 24%;
  }
  .position-14{
    left: 65%;
    top: 56%;
  }
  .position-15{
    top: 17%;
    left: 29%;
  }
  .position-16{
    top: 60%;
    left: 67%;
  }
  .position-17{
    top: 16%;
    left: 27%;
  }
  .position-18{
    top: 57%;
    left: 63%;
  }
  .section-eight-img{
    height: auto;
  }
  // .section-eight-content{
  //   width: 75%;
  // }
  .section-nine-product{
    width: 94%;
  }
  .section-eight-content .d-flex-column{
    padding: 20px 35px 10px 20px;
  }
  .container_deadpool .product-block{
    width: 155px;
  }
  .container_deadpool{
    width: 550px;
  }
}
@media screen and (max-width: 1200px) {
  #myVideo iframe{
    width: 947px;
    height: 532px;
  }
  #section-nine .container-deadpool {
    height: 2400px;
  }
    .container_deadpool .product-block{
    width: 155px;
  }
  .container_deadpool{
    width: 550px;
  }
.section-four-content, .section-seven-content{
  bottom: 28px;
}
}
@media screen and (max-width: 1100px) {
  #myVideo iframe {
    width: 870px;
    height: 490px;
  }
  .container_deadpool .product-block{
    width: 165px;
  }
  .container_deadpool{
    width: 450px;
  }
  .section-four-content, .section-seven-content{
    bottom: 10px;
  }
  #section-nine .container-deadpool{
    height: 2280px;
  }
// .section-eight-content {
//         width: 79%;
//     }
.section-nine-product {
    width: 97%;
    top: 1%;
  }
}
@media screen and (max-width: 1024px) {
      #myVideo iframe {
        width: 820px;
        height: 460px;
    }
    .img-text-animation img {
    max-width: 700px;
}
    .img-text-animation{
        top: 78px;
  }
  #dots {
    font-size: 17px;
}
  .loading-container{
        max-width: 660px;
  }
  .loading-text {
    width: 29%;
}
  .section-eight-content{
    top: 11%;
    width: 94%;
  }
  .section-four-content, .section-seven-content{
    position: static;
    overflow: auto;
    margin-bottom: 10px;
  }
  #section-four .container_deadpool{
    width: 1300px;
  }
  #section-seven .container_deadpool{
    width: 1300px;
  }
  .container_deadpool .product-block{
    width: 100%;
  }
  #section-nine .container-deadpool {
    height: 2160px;
}
.section-nine-product {
        top: 1%;
    }
// .section-eight-content {
//         width: 76%;
//     }

}
@media screen and (max-width: 991px) {
      .img-text-animation{
        top: 62px;
  }
      .img-text-animation img {
        max-width: 550px;
    }
  #section-nine .container-deadpool {
    height: 3090px;
  }
  .section-nine-product {
    top: 1%;
  }
  #myVideo iframe {
    width: 740px;
    height: 415px;
  }
  .wanda-close-handle .mb-menu-cls .bar{
      background: white;
  }
  .wanda-close-handle .mb-menu-cls .bar:before {
    bottom: 4px;
    left: 13px;
  }
  .wanda-close-handle .mb-menu-cls .bar:after {
    left: 13px;
    top: -3px;
  }
}
@media screen and (max-width: 920px) {
    #section-nine .container-deadpool {
        height: 2910px;
    }
}
@media screen and (max-width: 820px) {
  #section-nine .container-deadpool {
    height: 2690px;
  }
  .section-nine-product {
    top: 1%;
  }
  #myVideo iframe {
    width: 630px;
    height: 355px;
  }
}

@media screen and (max-width: 768px) {
        .img-text-animation{
        top: 52px;
  }
      .img-text-animation img {
        max-width: 500px;
    }
  .section-eight-content .d-flex-column{
    padding: 25px;
  }
  .site-wrapper {
    padding-top: 60px !important;
  }
  .section-four-content, .section-seven-content{
    position: static;
  }
  #myVideo iframe {
    width: 540px;
    height: 303px;
  }
  .deadpool_video{
  top:84%;
  }
  .section-nine-product {
    width: 95%;
  }
  #section-nine .container-deadpool {
    height: 2510px;
  }
  .section-nine-product{
    top: 1%;
  }
  // .section-eight-content{
  //   width: 76%;
  // }
}
@media screen and (max-width: 767px) {
  .section-eight-content .d-flex-column{
    padding: 25px;
  }
    .loading-text {
    width: 44%;
}
      .loading-container {
        max-width: 500px;
    }
  .section-eight-content{
    top: 11%;
    width: 94%;
  }
  .section-four-content, .section-seven-content{
    position: static;
  }
  .section-nine-product {
    width: 95%;
  }
  #section-nine .container-deadpool {
    height: 4500px;
  }
  .section-nine-product {
    top: 1%;
  }
  // .section-eight-content{
  //   width: 76%;
  // }
}
@media screen and (max-width: 700px) {
  #section-nine .container-deadpool {
    height: 4030px;
  }
  #myVideo iframe {
    width: 500px;
    height: 282px;
  }
        .img-text-animation{
        top: 45px;
  }
      .img-text-animation img {
        max-width: 450px;
    }
}
@media screen and (max-width: 650px) {
  #section-nine .container-deadpool {
    height: 3990px;
  }
  #myVideo iframe {
    width: 445px;
    height: 250px;
  }
}
@media screen and (max-width: 600px) {
  #section-nine .container-deadpool {
    height: 3750px;
  }
  #myVideo iframe {
    width: 396px;
    height: 223px;
  }
          .img-text-animation{
        top: 38px;
  }
      .img-text-animation img {
        max-width: 380px;
    }
}
@media screen and (max-width: 510px) {
  #section-nine .container-deadpool {
    height: 3330px;
  }
        .img-text-animation img {
        max-width: 350px;
    }
}
@media screen and (max-width: 481px) {
  .img-text-animation img{
    max-width: 300px;
  }
  .img-text-animation{
        top: 28px;
  }
  .three-text-content h1{
  animation: auto-run 10s linear infinite;

}
    .section-eight-content .d-flex-column:last-child{
    display:block;
  }
  .five-text1{
  top: 5%;
  left: -13px;
}
.five-text2{
          bottom: 7%;
        left: 18%;
}
  .five-text4{
          right: 22%;
        bottom: 20%;
}
.five-text3{
  right: 1%;
  top: 1%;
}

    .three-text1 {
    top: 15%;
    left: -2%;
}
  .three-text2 {
    top: 13%;
    right: -2%;
}
  .three-text3 {
    bottom: 32%;
    left: 11%;
}
  .three-text4 {
    bottom: 19%;
    right: -2%;
}
   #section-three .position-ab img{
    width: 130px;
  }
  #section-five .five-text1 img, #section-five .five-text3 img{
    width: 145px;
  object-fit: contain;
  }
   #section-five .five-text2 img, #section-five .five-text4 img{
    width: 115px;
  object-fit: contain;
  }
  .loading-text h1 {
    font-size: 12px;
}
  #dots {
    display: inline-block;
        width: 20px;
        text-align: left;
        position: absolute;
        right: 7px;
        top: 50%;
        transform: translateY(-50%);
        margin-right: -6px;
        font-size: 13px;
}
  .btn-muangayproduct-deadpool{
    margin-bottom: 0px;
  }
  .text_content{
      height: 100px;
  }
  .section-eight-content{
        top: 5%;
  }
  #myVideo{
        height: 178px;
    width: 317px;
  }
  .progress-bar {
    height: 20px;
  }
  .loading-text {
    font-size: 10px;
    width: 40%;
  }
  .progress-bar {
    width: 60%;
  }
  .loading-container {
    max-width: 350px;
    height: 30px;
  }
  .deadpool_video {
    bottom: -10%;
    left: 50%;
    // width: 100%;
  }
  #section-nine .product-block .product-detail{
    padding-bottom:0px;
  }
  #section-nine .container-deadpool{
    padding: 0px;
    background-color: #A90112;
  }
  #section-four .container_deadpool{
    width: 800px;
  }
  #section-seven .container_deadpool {
    width: 800px;
  }
  #deadpool-container iframe{
    height: 178px;
    width: 317px;
  }
 .section-nine-img img{
    object-fit: cover;
    object-position: center;
  }
  .section-nine-product{
    width: 97%;
    top: 1%;
  }
  .section-nine-product .d-flex-column {
    padding: 8px;
  }
  // .section-eight-content {
  //   width: 94%;
  // }
  .section-nine{
    height: 3215px;
  }
  #section-nine .container-deadpool{
    height: 3225px;
  }
  .section-nine-img{
    position: absolute;
    bottom: 0px;
 
  }
  .section-nine-img .container-deadpool{
    object-fit: cover;
    object-position: center;
  }
  .section-eight-img img{
    object-fit: cover;
    object-position: center;
  }
  .section-eight-content .d-flex-column {
    padding: 10px;
  }
}

@media screen and (max-width: 430px) {
  #section-nine .container-deadpool{
    height: 2970px;
  }
}
@media screen and (max-width: 414px) {
    #section-nine .container-deadpool {
        height: 2900px;
    }
}
@media screen and (max-width: 390px) {
  #section-nine .container-deadpool{
    height: 2790px;
  }
  .deadpool_video {
    bottom: -14%;
    left: 50%;
  }
    .img-text-animation {
        top: 23px;
    }
.position-ab img {
        width: 115px;
        height: auto;
        object-fit: contain;
    }
}
@media screen and (max-width: 375px) {
  #section-nine .container-deadpool{
    height: 2720px;
  }
}
@media screen and (max-width: 320px) {
    #section-nine .container-deadpool {
        height: 2460px;
    }
}