.closeContainer{
    display: flex;
    /* height: 60%;  */
    margin-top: 5%;
    justify-content: space-between;
    margin-right: 5%;
    margin-bottom: 5%;
}
.closeContainer div{
    width: 20%;
}
.closeContainer div img{
    width: 100%;
}
#t1{
    overflow: hidden;
}

/* .tata00, .tata01, .tata02, .tata03, .tata04, 
.tata05, .tata06, .tata07, .tata08, .tata09, 
.tata10, .tata11, .tata12, .tata13, .tata14, 
.tata15, .tata16, .tata17, .tata18, .tata19
{ max-width: 100% !important; background-size: 100% !important; background-image: url('./assets/animation/loader/loaderSprite.png'); } */
 
.tata00 { background-position: 0 0% !important; background-size: 100%; }
.tata01 { background-position: 0 5.263158% !important; background-size: 100%; }
.tata02 { background-position: 0 10.526316% !important; background-size: 100%; }
.tata03 { background-position: 0 15.789474% !important; background-size: 100%; }
.tata04 { background-position: 0 21.052632% !important; background-size: 100%; }
.tata05 { background-position: 0 26.315789% !important; background-size: 100%; }
.tata06 { background-position: 0 31.578947% !important; background-size: 100%; }
.tata07 { background-position: 0 36.842105% !important; background-size: 100%; }
.tata08 { background-position: 0 42.105263% !important; background-size: 100%; }
.tata09 { background-position: 0 47.368421% !important; background-size: 100%; }
.tata10 { background-position: 0 52.631579% !important; background-size: 100%; }
.tata11 { background-position: 0 57.894737% !important; background-size: 100%; }
.tata12 { background-position: 0 63.157895% !important; background-size: 100%; }
.tata13 { background-position: 0 68.421053% !important; background-size: 100%; }
.tata14 { background-position: 0 73.684211% !important; background-size: 100%; }
.tata15 { background-position: 0 78.947368% !important; background-size: 100%; }
.tata16 { background-position: 0 84.210526% !important; background-size: 100%; }
.tata17 { background-position: 0 89.473684% !important; background-size: 100%; }
.tata18 { background-position: 0 94.736842% !important; background-size: 100%; }
.tata19 { background-position: 0 100% !important; background-size: 100%; }








.map{
    position: absolute;
    width: 100%;
    /* bottom: 18%; */
    left: 0%;
    z-index: 1;
    overflow-x: scroll;
    bottom: -30%;
    transition: 1s;
    background-image: url('./assets/Gradient.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}
.mapContainer{
    width: 70%;
    margin: 0 auto;
    max-width: 1200px;

}
.mapContainer img{
    width: 100%;
 
}
.mapdots{
    position: absolute;
    top: 0;
    display: flex;
    width: 70%;
    height: 100%;
    transform: translate(-50%, 0);
    left: 50%;
    max-width: 1200px;

}
.mapBox{
    width: 12.5%;
    height: 100%;
    position: relative;

}
.mapCircle{
    width: 25%;
    position: absolute;
}
.mapCircle img{
    width: 100%;
    display: flex;
    cursor: pointer;
    opacity: 0;

}

.circle1{
    top: 34.5%;
    right: 10.1%;
}
.circle2{
    right: 1.5%;
    top: 39%;
}
.circle3{
    right: -1%;
    top: 29%;

}
.circle4{
    right: 6%;
    top: 31%;
}
.circle5{
    right: 8%;
    top: 34.5%;
}
.circle6{
    right: 12.5%;
    top: 42%;
}
.circle7{
    right: 17.5%;
    top: 37%;
}
.circle8{
    right: 21%;
    top: 45%;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.map::-webkit-scrollbar {
    display: none;
  }
  
  /* Hide scrollbar for IE, Edge and Firefox */
  .map {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }
  /* @media (max-width: 950px) {
   .cup{
    width: 20% !important;
   }
} */
@media (max-width: 600px) {
    /* .map{
        bottom: -30%;
        left: 0%;    
    } */
    .mapContainer{
        width: 150%;
        max-width: none;

    }
    .mapdots{
        width: 150%;
        left: 0;
        transform: initial;
        max-width: none;
    }
}


.tap-1, .tap-10, .tap-11, .tap-12, .tap-13, 
.tap-14, .tap-15, .tap-16, .tap-17, .tap-18, 
.tap-19, .tap-2, .tap-20, .tap-3, .tap-4, 
.tap-5, .tap-6, .tap-7, .tap-8, .tap-9
{ max-width: 100%; background-size: 100%; background-image: url('./assets/animation/handDrag/handDrag.png'); }
 
.tap-1 { background-position: 0 0%; background-size: 100%; }
.tap-10 { background-position: 0 5.263158%; background-size: 100%; }
.tap-11 { background-position: 0 10.526316%; background-size: 100%; }
.tap-12 { background-position: 0 15.789474%; background-size: 100%; }
.tap-13 { background-position: 0 21.052632%; background-size: 100%; }
.tap-14 { background-position: 0 26.315789%; background-size: 100%; }
.tap-15 { background-position: 0 31.578947%; background-size: 100%; }
.tap-16 { background-position: 0 36.842105%; background-size: 100%; }
.tap-17 { background-position: 0 42.105263%; background-size: 100%; }
.tap-18 { background-position: 0 47.368421%; background-size: 100%; }
.tap-19 { background-position: 0 52.631579%; background-size: 100%; }
.tap-2 { background-position: 0 57.894737%; background-size: 100%; }
.tap-20 { background-position: 0 63.157895%; background-size: 100%; }
.tap-3 { background-position: 0 68.421053%; background-size: 100%; }
.tap-4 { background-position: 0 73.684211%; background-size: 100%; }
.tap-5 { background-position: 0 78.947368%; background-size: 100%; }
.tap-6 { background-position: 0 84.210526%; background-size: 100%; }
.tap-7 { background-position: 0 89.473684%; background-size: 100%; }
.tap-8 { background-position: 0 94.736842%; background-size: 100%; }
.tap-9 { background-position: 0 100%; background-size: 100%; }