:root {
    --margin: 5vw;
}
#advert{
    visibility: hidden;
    background-color: black;
    overflow: hidden;
    cursor:pointer;
}
    #btnMain{
        pointer-events: auto;
    }
    #logotype{
        top:calc(var(--margin)*2);
        height: 8%;
        background-image: url(../assets/logotype.png);
        /* background-color: black; */
    }
    #btnClose, #btnBack, #btnLeft, #btnRight{
        top:var(--margin);
        width:calc(var(--margin)*2);
        height:calc(var(--margin)*2);
    }
    #btnClose{
        pointer-events: auto;
        right:var(--margin);
        background-image: url(../assets/ico_close.png);
    }
    #btnBack{
        pointer-events: auto;
        visibility: hidden;
        left:var(--margin);
        background-image: url(../assets/ico_back.png);
    }
    #btnLeft{
        pointer-events: auto;
        visibility: hidden;
        left:var(--margin);
        top: 40%;
        background-image: url(../assets/ico_left.png);
        background-size: 25%;
        /* background-position: left; */
        /* background-color: aqua; */
    }
    #btnRight{
        pointer-events: auto;
        visibility: hidden;
        right:var(--margin);
        top: 40%;
        background-image: url(../assets/ico_right.png);
        background-size: 25%;
        /* background-position: right; */
        /* background-color: aqua; */
    }
    #btnCTA{
        bottom: calc(var(--margin)*2);
        height:10%;
        background-image: url(../assets/start-btn.png);
        /* background-color: aquamarine; */
        background-size: 80%;
    }
    #stage-1{
        background-image: url(../assets/start-bg.jpg);
        background-size: cover;
        /* visibility: hidden; */
    }
        #stage-1 > div {
            width: 85%;
            height: 27%;
            margin-top: 25%;
            margin-left: 4%;
            background-image: url(../assets/start-txt.png);
            /* background-color: aqua; */
        }
           
    #stage-2{
        visibility: hidden;
    }
        
        #stage-2 > div:nth-child(1) { background-image: url(../assets/hs-bg.jpg); background-size: cover; }
        #stage-2 > div:nth-child(2) { background-image: url(../assets/hs-product.png); background-size: 85%; }
        #stage-2 > div:nth-child(3) > div { 
            width:17vh;
            height:17vh;
            background-size: 70%;
            pointer-events: auto;
            border-radius: calc(var(--margin)*5);
            /* background-color: aquamarine; */
        }
            #stage-2 > div:nth-child(3) > div:nth-child(1){margin-left: -37%;margin-top: -19%;background-image: url(../assets/hs1-icon.png);transition: marginLeft ease-in 1s, marginTop ease-in 1s;}
            #stage-2 > div:nth-child(3) > div:nth-child(2){margin-left: -4%;margin-top: -32%;background-image: url(../assets/hs2-icon.png);transition: marginLeft ease-in 1s, marginTop ease-in 1s;}
            #stage-2 > div:nth-child(3) > div:nth-child(3){margin-left: 6%;margin-top: 1%;background-image: url(../assets/hs3-icon.png);transition: marginLeft ease-in 1s, marginTop ease-in 1s;}
        
        #stage-2 > div:nth-child(4){
            width:17vh;
            height:17vh;
        }
        #stage-2 > div:nth-child(4) > div{
            background-image: url(../assets/hand.png);
        }
    #stage-hs1, #stage-hs2, #stage-hs3{
        visibility: hidden;
    }

    #stage-hs3{
        /* visibility: visible; */
    }

        #stage-hs1 {  background-image: url(../assets/hs1-bg.jpg); background-position: right;  background-size: cover;}
        #stage-hs2 {  background-image: url(../assets/hs2-bg.jpg); background-position: top right;  background-size: cover;}
        #stage-hs3 {  background-image: url(../assets/hs3-bg.jpg); background-position: right; background-size: cover; }

        #stage-hs1 > div {background-position: top;height:50%; bottom:0; background-image: url(../assets/hs1-txt.png); background-size: 90%;}
        #stage-hs2 > div {background-position: top;height:50%; bottom:0; background-image: url(../assets/hs2-txt.png);  background-size: 90%;}
        #stage-hs3 > div {background-position: top;height:50%; bottom:0; background-image: url(../assets/hs3-txt.png);  background-size: 90%;}

@media screen and (orientation:landscape) {
    #advert{
        display:none;
    }
}
#videoPlayer{
    opacity:0;
}