#advert {
    position: absolute;
    width:100%;
    height:100%;
    overflow: hidden;
    cursor: pointer;
    opacity:0;
}
.card{
    position: absolute;
    width:100%;
    height: 100%;
}
#btnBackground{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: black;
    cursor: pointer;
    pointer-events: auto;
}
#main{
    background-image: url(../assets/product.jpg);
    background-size: 66.67vh 100vh;
    background-position: center center;
    background-repeat: no-repeat;
}
    .product{
        position: absolute;
        width: 66.67vh;
        height: 100vh;
        opacity:0;
    }
        .photo{
            position: absolute;
            top: 0;
            background-size: contain;
        }
        .hotSpots{
            width: 66.67vh;
            height: 100vh;
        }
            .hotspot{
                opacity: 0;
                position: absolute;
                width: 8.5vh;
                height: 8.5vh;
                pointer-events: auto;
                cursor: pointer;
                background-image: url(../assets/ico_1.png);
            }
            .hotspot:nth-child(1){margin-top: -10%;margin-left: -30%;background-image: url(../assets/ico_1.png);}
            .hotspot:nth-child(2){margin-top: 11%;margin-left: 14%;background-image: url(../assets/ico_2.png);}
            .hotspot:nth-child(3){margin-top: -61%;margin-left: 30%;background-image: url(../assets/ico_3.png);}
            .hotspot:nth-child(4){margin-top: -90%;margin-left: -47%;background-image: url(../assets/ico_4.png);}
            .hotspot:nth-child(5){margin-top: 70%;margin-left: 47%;background-image: url(../assets/ico_5.png);}
            .hotspot:nth-child(6){margin-top: 95%;margin-left: -15%;background-image: url(../assets/ico_6.png);}

    #interface {
    }
        #logotype{
            position: absolute;
            top: 0;
            left:3vh;
            height: 10vh;
            width: 37.7vw;
            background-image: url(../assets/Philips_logo.svg);
            background-position: top left;
            z-index: 2;
            /* background-color: black; */
        }
        #back-button{
            visibility: hidden;
            background-image: url(../assets/ico_back.png);
            background-position: top left;
            position: absolute;
            left: 3vh;
            top: 3vh;
            height: 7vh;
            width: 7vh;
            cursor: pointer;
            z-index: 3;
            pointer-events: auto;
        }
        #url-button{
            background-image: url(../assets/CTA.png);
            position: absolute;
            bottom: 3vh;
            right: 3vh;
            height: 7vh;
            width: 40vw;
            pointer-events: auto;
            cursor: pointer;
            z-index: 1;
            border-radius: 8vw;
            background-color: #008bd2;
        }
        #close-button{
            background-image: url(../assets/ico_close.png);
            background-position: top right;
            position: absolute;
            top: 3vh;
            right: 3vh;
            height: 7vh;
            width: 7vh;
            pointer-events: auto;
            cursor: pointer;
            z-index: 1;
            border-radius: 8vw;
            /* background-color: #008bd2; */
        }
        #logotypeINN{
            background-image: url(../assets/innovation.png);
            background-size: 30vw;
            background-position: center left;
            position: absolute;
            bottom: 3vh;
            left: 3vh;
            height: 7vh;
            width: 40vw;
            z-index: 1;
        }
    #information{
        visibility: hidden;
        pointer-events: auto;
        background-image: url(../assets/hs_background.jpg);
        background-size: cover;
        pointer-events: none;
    }
        #message{
            width:  75vw;
            height: 95vw;
            border-radius: 8vw;
            background-color: white;
            text-transform: uppercase;
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: top;
        }
        #btn-left{
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: -8%;
            height: 7vh;
            width: 7vh;
            pointer-events: auto;
            cursor: pointer;
            border-radius: 8vw;
            background-image: url(../assets/arrow-left.png);
            background-position: center;
            background-size: contain;
        }
        #btn-right{
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: -8%;
            height: 7vh;
            width: 7vh;
            pointer-events: auto;
            cursor: pointer;
            border-radius: 8vw;
            background-image: url(../assets/arrow-right.png);
            background-position: center;
            background-size: contain;
        }
        #back-information-button{
            position: absolute;
            width:100%;
            height: 100%;
            /* background-color: black; */
            pointer-events: auto;
        }