body {
    background-color: #000;
    font-family: Arial;
    font-size: 20px;
}

.scene {
    width: 100vw;
    height: 100vh;
}
.scene iframe {
    width: 100%;
    height: 100%;
}

#scoreboard {
    padding: 3vh 3vw;
    text-align: center;
    border-bottom-right-radius: 10px;
    background-color: #fff;
    color: #1892bf;
    position: fixed;
    top: 0;
    left: 0;
}
#isViolation {
    text-align: center;
    position: fixed;
    top: 85px;
    left: 0;
    padding: 20px;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    background-color: #fff;
    color: #1892bf;
    transform: translateX(0);
    transition: transform 0.5s ease;
}
#isViolation.hide {
    transform: translateX(-100%);
    transition: transform 0.5s ease 3s;
}

#hotspot1 {
    height: 550px;
}
#hotspot3 {
    width: 400px;
    height: 400px;
}
#hotspot4 {
    border-radius: 100%;
}
#hotspot5 {
    height: 150px;
}

.css360Element.visible.foundHotspot {
    border: 3px solid rgba(0,255,100,1);
}

.hoverstates .hotspot:hover {
    box-shadow: 0 0 50px 15px #fff;
    transition: box-shadow 0.3s ease;
}

/*
    Shine Animation
*/
.hotspot {
    width: 300px;
    height: 300px;
    text-align: center;
    border: 3px solid rgba(0,0,0,0);
    border-radius: 10px;
    transition: box-shadow 0.2s ease;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;

    background: transparent url(https://hapyak_demos.s3.amazonaws.com/img/shine.png) -200px no-repeat;
    background-size: 200px 100%;

    -webkit-animation: shine10 5s linear 0s infinite;
    animation: shine10 5s linear 0s infinite;
}
@-webkit-keyframes shine10 {
    0% {
        background-position: -200px;
    }
    10% {
        background-position: 400px;
    }
    100% {
        background-position: 400px;
    }
}
@keyframes shine10 {
    0% {
        background-position: -200px;
    }
    10% {
        background-position: 400px;
    }
    100% {
        background-position: 400px;
    }
}

.a-enter-vr {
    display: none;
}