
* {
    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: #ffffff;
    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: 100%;
 }

.sprite-runner1{
    background: url('images/sprite-runner1.png') top left no-repeat;
    background-size: 74px 128px;
    width: 37px;
    height: 128px;
    top: 60%;
    left: 5%;
}
.sprite-runner2{
    background: url('images/sprite-runner2.png') top left no-repeat;
    background-size: 97px 129px;
    width: 48.5px;
    height: 129px;
    top: 60%;
    left: 19%;
}
.sprite-runner3{
    background: url('images/sprite-runner3.png') top left no-repeat;
    background-size: 109px 138px;
    width: 54.5px;
    height: 138px;
    top: 60%;
    left: 35%;
}
.sprite-runner4{
    background: url('images/sprite-runner4.png') top left no-repeat;
    background-size: 132px 131px;
    width: 66px;
    height: 131px;
    top: 60%;
    left: 50%;
}
.sprite-runner5{
    background: url('images/sprite-runner5.png') top left no-repeat;
    background-size: 108px 115px;
    width: 54px;
    height: 115px;
    top: 62%;
    left: 67%;
}
.sprite-runner6{
    background: url('images/sprite-runner6.png') top left no-repeat;
    background-size: 110px 138px;
    width: 55px;
    height: 138px;
    top: 60%;
    left: 84%;
}

.bgCont{
    width: 100%;
    height: 100%;
    clip-path: inset(35.8% 0 18.6% 0);
    /*background-color: #ff000090;*/
}

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



.bg-win,.confetti,.cta,.end-img1,.end-img2,.end-img3,
.end-img4,.finish,.finish2,.logo,.medal,.t1,
.t2,.tap,.winner
{ max-width: 100%; background-size: 100%; background-image: url('images/sprite.png'); }

.bg-win {  background-position: 0 0.00%;  background-size: 100%;}
.confetti {  background-position: 0 7.14%;  background-size: 100%;}
.cta {  background-position: 0 14.29%;  background-size: 100%;}
.end-img1 {  background-position: 0 21.43%;  background-size: 100%;}
.end-img2 {  background-position: 0 28.57%;  background-size: 100%;}
.end-img3 {  background-position: 0 35.71%;  background-size: 100%;}
.end-img4 {  background-position: 0 42.86%;  background-size: 100%;}
.finish {  background-position: 0 50.00%;  background-size: 100%;}
.finish2 {  background-position: 0 57.14%;  background-size: 100%;}
.logo {  background-position: 0 64.29%;  background-size: 100%;}
.medal {  background-position: 0 71.43%;  background-size: 100%;}
.t1 {  background-position: 0 78.57%;  background-size: 100%;}
.t2 {  background-position: 0 85.71%;  background-size: 100%;}
.tap {  background-position: 0 92.86%;  background-size: 100%;}
.winner {  background-position: 0 100.00%;  background-size: 100%;}


