* {
    box-sizing: border-box;
}
html, body {
    padding: 0;
    margin : 0;
    height : 100dvh;
    overflow:hidden;
}

.nt-wrapper {

    width: 100dvw;
    height: 100dvh;
    background-color: #000000;

    display: flex;
    justify-content: center;
    align-items: center;
}

.nt-progress-bar-cont {
    width: 45%;
    max-width: 250px;
    height : 7px;
    /* border : 1px solid red; */
    position: relative;
}

.nt-progress-bar {

    width: 100%;
    height : 100%;
    border : 1px solid #333;
    border-radius: 3px;
    overflow: hidden;
    position: absolute;
}

.nt-progress {
    width : 1%;
    height : 100%;
    background-color: white;
    position: absolute;
}

.nt-ad-container {

    width: auto;
    height : auto;
    overflow: hidden;
    background-color: #000;
    position: absolute;
    display: none;
}


.nt-ad-container * {
    width: 100%;
    height : 100%;
    position:absolute;
    pointer-events: none;
}

.border {
    border : 1px solid #000;
    z-index: 999;
    pointer-events: none;
}

.hs{
   /*background-color: #ff000090;*/
   pointer-events: all;
   width:100%;
   left:50%;
   transform: translateX(-50%);
}
.hs-bgclick{
   height: 0%;
 }

.close-btn{
    display:none; /* comment this out on production */
    position: absolute;
    width:20px;
    height: 20px;
    top:5px;
    right:5px;
    color:#fff;
    border:1px #fff solid;
    background-color: #000000;
    border-radius: 10px;
    text-align: center;
    pointer-events: all;
    line-height: 17px;
}
.hss-spot{
    pointer-events: auto;
    /*background-color: #ff000050;*/
    aspect-ratio: 1/1;
    width: 30%;
    height: auto;
    transform:translateX(-50%)translateY(-50%);
    z-index: 10;
}
.hs-spot1{
    left: 17.4%;
    top: 32.5%;
}
.hs-spot2{
    left: 49%;
    top: 34.1%;
}
.hs-spot3{
    left: 82.4%;
    top: 35.2%;
}
.hs-spot4{
    left: 19.2%;
    top: 51.5%;
}
.hs-spot5{
    left: 54.7%;
    top: 50.8%;
}
.hs-spot6{
    left: 87.7%;
    top: 51.1%;
}
.hs-spot7{
    left: 31%;
    top: 69%;
}
.hs-spot8{
    left: 72.3%;
    top: 68.3%;
}
.hs-spot9{
    left: 25.3%;
    top: 85.4%;
}
.hs-spot10{
    left: 72.1%;
    top: 85.6%;
}
.hs-replay{
    width: 50%;
    height: 12%;
    bottom: 0;
    left: 25%;
    /*background-color: #ff000090;*/
}

.timer{
    clip-path: inset(0 83% 0 0);
    /*background-color: #ff000090;*/
}

.bg { 
    background: url('images/bg.jpg') no-repeat center center;
    background-size: contain;
}
.bg2 { 
    background: url('images/bg2.jpg') no-repeat center center;
    background-size: contain;
}
.bg3 { 
    background: url('images/bg3.jpg') no-repeat center center;
    background-size: contain;
}
.fire { 
    background: url('images/fire.gif') no-repeat center center;
    background-size: contain;

    -webkit-mask-image: linear-gradient(#000, #000); 
    mask-image: linear-gradient(#000, #000);
    filter: contrast(0.7) brightness(1.3);
    mix-blend-mode: darken;
}


/*.a1 { 
    background: url('images/a1.gif') no-repeat center center;
    background-size: contain;
}*/

.a1 { background: url('images/sprite-9.png') top left no-repeat;
    background-size: 100% auto; 
    

    width: 100%;     
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
} 


/*------------------------------sprite-dish--------------------------------*/

.a1,.a2,.a3,.a4,.a5,.a6,
.a7,.a8,.a9,.a10,.c1,.c2,
.c3,.c4,.c5,.c6,.c7,.c8,
.c9,.c10,.e1,.e2,.e3,.e4,
.e5,.e6,.e7,.e8,.e9,.e10
{ max-width: 100%; background-size: 100%; background-image: url('images/sprite-dish.png'); }

.a1 {  background-position: 0 0.00%;  background-size: 100%;}
.a2 {  background-position: 0 3.45%;  background-size: 100%;}
.a3 {  background-position: 0 6.90%;  background-size: 100%;}
.a4 {  background-position: 0 10.34%;  background-size: 100%;}
.a5 {  background-position: 0 13.79%;  background-size: 100%;}
.a6 {  background-position: 0 17.24%;  background-size: 100%;}
.a7 {  background-position: 0 20.69%;  background-size: 100%;}
.a8 {  background-position: 0 24.14%;  background-size: 100%;}
.a9 {  background-position: 0 27.59%;  background-size: 100%;}
.a10 {  background-position: 0 31.03%;  background-size: 100%;}
.c1 {  background-position: 0 34.48%;  background-size: 100%;}
.c2 {  background-position: 0 37.93%;  background-size: 100%;}
.c3 {  background-position: 0 41.38%;  background-size: 100%;}
.c4 {  background-position: 0 44.83%;  background-size: 100%;}
.c5 {  background-position: 0 48.28%;  background-size: 100%;}
.c6 {  background-position: 0 51.72%;  background-size: 100%;}
.c7 {  background-position: 0 55.17%;  background-size: 100%;}
.c8 {  background-position: 0 58.62%;  background-size: 100%;}
.c9 {  background-position: 0 62.07%;  background-size: 100%;}
.c10 {  background-position: 0 65.52%;  background-size: 100%;}
.e1 {  background-position: 0 68.97%;  background-size: 100%;}
.e2 {  background-position: 0 72.41%;  background-size: 100%;}
.e3 {  background-position: 0 75.86%;  background-size: 100%;}
.e4 {  background-position: 0 79.31%;  background-size: 100%;}
.e5 {  background-position: 0 82.76%;  background-size: 100%;}
.e6 {  background-position: 0 86.21%;  background-size: 100%;}
.e7 {  background-position: 0 89.66%;  background-size: 100%;}
.e8 {  background-position: 0 93.10%;  background-size: 100%;}
.e9 {  background-position: 0 96.55%;  background-size: 100%;}
.e10 {  background-position: 0 100.00%;  background-size: 100%;}

/*------------------------------sprite-dish end--------------------------------*/







.cta,.d1,.d2,.d3,.d4,.d5,
.d6,.d7,.d8,.d9,.d10,.end-img,
.end-t1,.hand,.img1,.img2,.img3,.replay,
.t1,.tap-copy,.timer-bg,.timer
{ max-width: 100%; background-size: 100%; background-image: url('images/sprite.png'); }

.cta {  background-position: 0 0.00%;  background-size: 100%;}
.d1 {  background-position: 0 4.76%;  background-size: 100%;}
.d2 {  background-position: 0 9.52%;  background-size: 100%;}
.d3 {  background-position: 0 14.29%;  background-size: 100%;}
.d4 {  background-position: 0 19.05%;  background-size: 100%;}
.d5 {  background-position: 0 23.81%;  background-size: 100%;}
.d6 {  background-position: 0 28.57%;  background-size: 100%;}
.d7 {  background-position: 0 33.33%;  background-size: 100%;}
.d8 {  background-position: 0 38.10%;  background-size: 100%;}
.d9 {  background-position: 0 42.86%;  background-size: 100%;}
.d10 {  background-position: 0 47.62%;  background-size: 100%;}
.end-img {  background-position: 0 52.38%;  background-size: 100%;}
.end-t1 {  background-position: 0 57.14%;  background-size: 100%;}
.hand {  background-position: 0 61.90%;  background-size: 100%;}
.img1 {  background-position: 0 66.67%;  background-size: 100%;}
.img2 {  background-position: 0 71.43%;  background-size: 100%;}
.img3 {  background-position: 0 76.19%;  background-size: 100%;}
.replay {  background-position: 0 80.95%;  background-size: 100%;}
.t1 {  background-position: 0 85.71%;  background-size: 100%;}
.tap-copy {  background-position: 0 90.48%;  background-size: 100%;}
.timer-bg {  background-position: 0 95.24%;  background-size: 100%;}
.timer {  background-position: 0 100.00%;  background-size: 100%;}