/*----start popup right---*/

.popup-main{

margin-top:10px;

background:#00FF33;

position:fixed;

bottom:10;

right:40;

height:480px;

width:350px;}

.popup{

position:fixed;

bottom:20;

right:40;

height:420px;

width:350px;

background:gold;

z-index:1001;

}



.top_close_btn {

  position: absolute;

  top: -8px;

  right: -8px;

  width: 20px;

  height: 20px;

  background-color: #333;

  color: #fff;

  border: none;

  border-radius: 50%;

  cursor: pointer;

}

.animate-up {

  opacity: 0;

  animation-name: move-up;

  animation-duration: 1s;

  animation-timing-function: ease-out;

  animation-fill-mode: forwards;

  animation-delay: 2s;

}



@keyframes move-up {

  0% {

    opacity: 0;

    transform: translateY(100%);

  }

  100% {

    opacity: 1;

    transform: translateY(0);

  }

}

/*----end popup right---*/

.top_close_btn::before,

.top_close_btn::after {

  content: "";

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  width: 70%;

  height: 2px;

  background-color: #fff;

}



.top_close_btn::before {

  transform: translate(-50%, -50%) rotate(45deg);

}



.top_close_btn::after {

  transform: translate(-50%, -50%) rotate(-45deg);

}

  

.popup-container {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: rgba(0, 0, 0, 0.5);

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 999;

  display: none;

}



.popup-content {

  background-color: #fff;

  padding: 20px;

  text-align: center;

  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);

}

.popup-content h2{

  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

}





#close-btn {

  background-color: #333;

  color: #fff;

  padding: 1px 1px;

  border: none;

  cursor: pointer;

}











#confetti{

  height: 100%;

  left: 0px;

  position: fixed;

  top: 0px;

  width: 100%;

  z-index: 999;

}



.closing-window {

  background-color: #f9f9f9;

  padding: 10px;

  border-radius: 5px;

  font-size: 14px;

  color: #555;

  display: inline-block;

}



.countdown {

  font-weight: bold;

}

div.closing_count {

  border-top: 1px solid #CCCCCC;

  font-size: 12px;

  padding-top:15px;

}





.fa{ margin-top:4px;}

.trigger-div-two h2{

font-weight:bold;

font-size:32px;

padding:5px;

text-align:center;}

.trigger-div-two h3{

font-size:24px;

padding:5px;

text-align:center;

text-decoration:underline;}

.trigger-div-two p{

margin-top:8px;

color:#333333;

line-height:5px;

font-size:24px;

padding:8px;

font-size:16px;}

.trigger-div-two .claimed_btn{

font-size:15px;

font-weight:bold;

text-align:center;

color:#fff;

padding:4px;

height:35px;

width:115px;

margin:auto;

margin-top:15px;

background:url(https://dnsphost.in/assets/images/claimed_btn.png) no-repeat;

}

.offer_hint_title{

color:#00FF33;

height:60px;

width:200px;

margin:-50px 0 0 -40px;

}

/*-------*/

.confetti-piece {

      width: 8px;

      height: 8px;

	  display:box;

      position: absolute;

      background-color: transparent;

      border-radius: 50%;

      pointer-events: none;

      animation: confetti 3s 0s infinite;

    }



    @keyframes confetti {

      0% {

        opacity: 0;

        transform: translateY(0) translateX(0) rotate(0);

      }

      100% {

        opacity: 1;

        transform: translateY(-850px) translateX(calc(0vw - 5px)) rotate(180deg);

      }

    }

	

.hint_box{

font-size:18px;

border:dashed 2px #000;

min-height:30px;

height:auto;

width:100%;

margin:14px 0 5px 0;

}

.hint-title{

font-weight:bold;

text-align:center;

min-height:35px;

height:auto;

min-width:80%;

width:auto;

padding:4px 14px 8px 14px;

background:black;

color:gold;

font-size:22px;}

.hint_description{

color:#000000;

font-weight:bold;

text-align:center;

border-bottom-style:

text-align:center;

font-size:18px;

min-height:30px;

height:auto;

padding:10px;

width:100%;



}

.bdg_sml{font-size:10px;

margin:-18px 10px 0 -55px;

padding-top:-4px;

}