:root {
    --margin: 5vw;
}
#advert{
    aspect-ratio: 320/480;
    background-color: white;
    overflow: hidden;
}
    #btnMain{
        pointer-events: auto;
    }
    #logotype{
        top:calc(var(--margin)*2);
        height: calc(var(--margin)*2);
        aspect-ratio: 204/54;
        background-image: url(../assets/logotype.png);
    }
    #btnClose, #btnBack{
        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);
    }
    #url{
        bottom: calc(var(--margin)*2);
        height:calc(var(--margin)*0.7);
        aspect-ratio: 229/22;
        background-image: url(../assets/kaerchercom.png);
    }
    #stage-1{
        background-image: url(../assets/01_BG.jpg);
        background-size: cover;
        /* visibility: hidden; */
    }
        #stage-1 > div {
            width: 100%;
            height: 50%;
        }
            #stage-1 > div > div:nth-child(1){  background-image: url(../assets/01_copy_Battery.png);   }
            #stage-1 > div > div:nth-child(2){  background-image: url(../assets/01_copy_Dzieki.png);    }
            #stage-1 > div > div:nth-child(3){  background-image: url(../assets/01_copy_odswiez.png);   }

    #stage-2{
        width:66.67vh;
        height:100vh;
        background-image: url(../assets/02_BG.jpg);
        visibility: hidden;
        /* filter:blur(10px); */
    }
        #stage-2 > div:nth-child(1){   background-image: url(../assets/02_nozyce.png);     }
        #stage-2 > div:nth-child(2){   background-image: url(../assets/02_odkurzacz.png);  }
        #stage-2 > div:nth-child(3){   background-image: url(../assets/02_wycinak.png);    }
        #stage-2 > div:nth-child(4){   background-image: url(../assets/02_Kosiarka.png);   }

        #stage-2 > div > div { 
            width:26vh;
            height:26vh;
            background-size: 30%;
            background-image: url(../assets/ico_battery.png);
            pointer-events: auto;
            border-radius: calc(var(--margin)*5);
        }
            #stage-2 > div:nth-child(1) > div {left:7%; top:11%;animation-delay: .1s;}
            #stage-2 > div:nth-child(2) > div {left:50%; top:18%;animation-delay: .3s;}
            #stage-2 > div:nth-child(3) > div {left:13%; top:40%;animation-delay: .6s;}
            #stage-2 > div:nth-child(4) > div {left:57%; top:46%;animation-delay: .9s;}

    #text-s2 {
            bottom: 0;
            height:33%;
            background-size: 85%;
            background-position: top;
            background-image: url(../assets/02_copy.png);
            visibility: hidden;
        }
    #stage-3{
        visibility: hidden;
    }
    #stage-3 > div{
    aspect-ratio: 1/1;
    width: 88vw;
    overflow: hidden;
    height: 97.1vw;
    border-radius: calc(var(--margin)*0.8);
    /* padding: var(--margin); */
    justify-content: flex-end;
    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.496));
    display: flex;
    /* background-color: aqua; */
}
        #stage-3 > div > #video{
    /* width: 77%;
    height: 37.85%; */
    width: 77vw;
height: 64vw;
    /* background-color: aquamarine; */
    border-radius: calc(var(--margin)*0.8);
    overflow: hidden;
    margin-bottom: 12%;
}
        #stage-3 > div > #btnActivate{
    /* margin-top: -40%; */
    width: 77%;
    height: 11.98%;
    background-size: contain;
    background-image: url(../assets/03_CTA_uzyj.png);
    pointer-events: auto;
    /* background-color: antiquewhite; */
    margin-bottom: 6%;
}
        #stage-3 > div > #background{
    position: relative;
    /* overflow: hidden; */
    z-index: -1;
    aspect-ratio: 1/1;
    /* width: 70vw; */
    overflow: hidden;
    /* height: 78.1vw; */
    border-radius: calc(var(--margin)*0.8);
    /* margin: var(--margin); */
    justify-content: center;
}
        #stage-3 > div > #background > div{
            opacity:0;
            
        }
        #stage-3 > div > #background > div:nth-child(1){ background-image: url(../assets/04_nozyce.jpg);}
        #stage-3 > div > #background > div:nth-child(2){ background-image: url(../assets/04_odkurzacz.jpg);}
        #stage-3 > div > #background > div:nth-child(3){ background-image: url(../assets/04_podkaszarka.jpg);}
        #stage-3 > div > #background > div:nth-child(4){ background-image: url(../assets/04_kosiarka.jpg);}
    #stage-4{
        background-image: url(../assets/01_BG.jpg);
        background-size: cover;
        visibility: hidden;
    }
        #stage-4 > div:nth-child(1){
            width:100%;
            height:100%;
            align-items: flex-end;
        }
        #stage-4 > div:nth-child(1) > div {
            margin-top:30%;
            width: calc(var(--margin)*7.5);
            height: calc(var(--margin)*8.5);
            background-position: right;
            opacity:0;
        }
        #stage-4 > div:nth-child(1) > div:nth-child(1){  background-image: url(../assets/07_kosiarka.png);   }
        #stage-4 > div:nth-child(1) > div:nth-child(2){  background-image: url(../assets/07_nozyce.png);   }
        #stage-4 > div:nth-child(1) > div:nth-child(3){  background-image: url(../assets/07_odkurzacz.png);   }
        #stage-4 > div:nth-child(1) > div:nth-child(4){  background-image: url(../assets/07_podkaszarka.png);   }

        #stage-4 > div:nth-child(2) {
            width: 100%;
            height: 50%;
        }
        #stage-4 > div:nth-child(2) > div:nth-child(1){  background-image: url(../assets/07_element1.png);   }
        #stage-4 > div:nth-child(2) > div:nth-child(2){  background-image: url(../assets/07_element2.png);   }
        #stage-4 > div:nth-child(2) > div:nth-child(3){  background-image: url(../assets/07_element3.png);   }
        #stage-4 > div:nth-child(2) > div:nth-child(4){  
            transform-origin: 20vw 120vw;
            background-image: url(../assets/07_element4.png);   
        }
@media screen and (orientation:landscape) {
    #advert{
        display:none;
    }
}
#videoPlayer{
    opacity:0;
}