/* @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap'); */

* {
    box-sizing: border-box;
}

html, body {
    padding: 0;
    margin : 0;
    height : 100vh;
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
}


.progress-cont {
    width: 100%;
    height : 100%;
    position: absolute;
}

.progress-bar {
    width: 45%;
    max-width: 250px;
    height : 6px;
    border : 1px solid #333;
    border-radius: 3px;
    overflow: hidden;
    position: absolute;
    top : 50%;
    left : 50%;
    transform: translate(-50%, -50%);
}

.progress {
    width : 5%;
    height : 100%;
    background-color: black;
}

.container {
    position: absolute;
    width: 100%;
    height : 100%;
    overflow: hidden;
    background-color: #ddd;
    display: none;
}

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

.clickthru {
    pointer-events: auto;
}

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


.card {
    background-color: #ddd;
    border: 1px solid #ccc;
    pointer-events: auto;
    overflow: hidden;
    box-shadow: -3px 0 10px #6a6a6a;
}
.card-desc {
    opacity: 0;
}
.card-img-1 {
    background: url('images/img1.png') no-repeat center center;
    background-size: contain;
}
.card-img-2 {
    background: url('images/img2.png') no-repeat center center;
    background-size: contain;
}
.card-img-3 {
    background: url('images/img3.png') no-repeat center center;
    background-size: contain;
}
.card-desc1 {
    background: url('images/desc1.png') no-repeat center center;
    background-size: contain;
}
.card-desc2{
    background: url('images/desc2.png') no-repeat center center;
    background-size: contain;
}
.card-desc3{
    background: url('images/desc3.png') no-repeat center center;
    background-size: contain;
}
.card-pop1 {
    background: url('images/pop1.png') no-repeat center center;
    background-size: contain;
}
.card-pop2{
    background: url('images/pop2.png') no-repeat center center;
    background-size: contain;
}
.card-pop3{
    background: url('images/pop3.png') no-repeat center center;
    background-size: contain;
}
.card-spot {
    background: url('images/spot.png') no-repeat center center;
    background-size: contain;
    width:8%;
    height: 4%;
}
.hs-spot{
    /*background-color:#ff000080;*/
    width:13%;
    height: 6%;
    display:none;
    pointer-events:auto;
}
.hs-popclose{
   /* background-color:#ff000080;*/
    width:12%;
    left:78%;
    top:43%;
    height: 6%;
    display:none;
    pointer-events:auto;
}
.hs-shopnow{
     /*background-color:#ff000080;*/
     width:76%;
     left:12%;
     top:45%;
     height: 35%;
     display:none;
     pointer-events:auto;
 }

div[class^="card-pop"], div[class*="card-pop"] {
    opacity:0;
}
.card-spot1 {
   left:80%;
   top:49%;
}
.card-spot2{
    left:71%;
    top:38%;
}
.card-spot3{
    left:65%;
    top:47% ;
}

.card-desc {
    opacity: 0;
}

.card-flash {
    background-color: white;
    opacity: 0;
}


.bottom-panel {
    bottom: 0;
    opacity: 0;
}

.bot-bg {
    
    height : 12%;
    bottom : 0%;
    background-color: #ffffff;
}
.bot-logo {
    background: url('images/bot_logo.png') no-repeat bottom center;
    background-size: contain
}

.bot-cta {
    background: url('images/bot_cta.png') no-repeat bottom center;
    background-size: contain
}

.bot-hs {
    pointer-events: auto;
    height : 12%;
    /* background-color: #ff000099; */
    bottom : 0;
}

.nav {
    width: 25%;
    bottom : 12%;
    height : 10%;
    opacity: 0;
    display: none;
    pointer-events: auto;
    /* border : 1px solid red */
}
.nav-next {
    background: url('images/nav_next.png') no-repeat center center;
    background-size: contain
    
}
.nav-back {
    background: url('images/nav_back.png') no-repeat center center;
    background-size: contain
}


.tap-bg {
    background-color: #ffffff;
}
.tap-logo {
    background: url('images/tap_logo.png') no-repeat center center;
    background-size: contain
}
.tap-txt {
    background: url('images/tap_txt.png') no-repeat center center;
    background-size: contain
}
.tap-view {
    background: url('images/tap_view.png') no-repeat center center;
    background-size: contain
}

.flex {
    width: auto;
    height : auto;
    left : 50%;
    top : 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
}