.navigation-btn{
    position: absolute; z-index: 3001; overflow: visible; opacity: 0.2; cursor: pointer; pointer-events: auto; 
    width: 30px; height: 30px;
    background-position: 0px 0px; background-size: 30px 90px; 
}

.navigation-btn:hover {
    opacity: 1;
    background-position: 0px -30px;
}
.navigation-btn-right{
    background-image: url('./img/Controls/btn_move_right.png'); transform: translateZ(1e+12px) translate(73px, 39px) translate(15px, 0px) rotate(0deg) translate(-15px, 0px);
}
.navigation-btn-left{
    background-image: url('./img/Controls/btn_move_left.png'); transform: translateZ(1e+12px) translate(5px, 39px) translate(-15px, 0px) rotate(0deg) translate(15px, 0px);
}
.navigation-btn-up{
    background-image: url('./img/Controls/btn_move_up.png'); transform: translateZ(1e+12px) translate(39px, 5px) translate(0px, -15px) rotate(0deg) translate(0px, 15px);
}
.navigation-btn-down{
    background-image: url('./img/Controls/btn_move_down.png'); transform: translateZ(1e+12px) translate(39px, 73px) translate(0px, 15px) rotate(0deg) translate(0px, -15px);
}

.navigation-btn-autorotation{
    background-image: url('./img/Controls/btn_start_autorotation.png');transform: translateZ(1e+12px) translate(9px, 50px) translate(0px, 15px) rotate(0deg) translate(0px, -15px);
}
.navigation-btn-audio{
    background-image: url('./img/Controls/btn_stop_sound.png');transform: translateZ(1e+12px) translate(9px, 10px) translate(0px, 15px) rotate(0deg) translate(0px, -15px);
}
.navigation-btn-fs{
    background-image: url('./img/Controls/btn_enter_fs.png');transform: translateZ(1e+12px) translate(9px, 90px) translate(0px, 15px) rotate(0deg) translate(0px, -15px);
}
#autorotateToggle.enabled{
    background-image: url('./img/Controls/btn_stop_autorotation.png');transform: translateZ(1e+12px) translate(9px, 50px) translate(0px, 15px) rotate(0deg) translate(0px, -15px);
}
#fullscreenToggle.enabled{
    background-image: url('./img/Controls/btn_close_fs.png');transform: translateZ(1e+12px) translate(9px, 90px) translate(0px, 15px) rotate(0deg) translate(0px, -15px);
}



.navigation-border{
    position: absolute; z-index: 3006; overflow: visible; opacity: 1; cursor: pointer; pointer-events: auto; background-image: url('./img/Controls/btn_bg_border_move.png'); width: 108px; height: 108px; background-position: 0px 0px; background-size: 108px 108px; bottom: 15px; right: 15px; transform: translateZ(1e+12px) translate(54px, 54px) rotate(0deg) translate(-54px, -54px);
}
.navigation-border:hover .navigation-btn{
    opacity: 1;
}

.navigation-border:hover ~ .navigation-bg{
    opacity: 1;
}

.navigation-vertical-border{
    position: absolute; z-index: 3006; overflow: visible; opacity: 1; cursor: pointer; pointer-events: auto; background: none; width: 48px; height: 130px; bottom:125px; right: 45px; transform: translateZ(1e+12px) translate(0px, 65px) rotate(0deg) translate(0px, -65px);
}
.navigation-vertical-border:hover .navigation-btn{
    opacity: 1;
}
.navigation-vertical-border:hover ~ .navigation-vertical-bg{
    opacity: 1;
}


.navigation-bg{
    position: absolute; z-index: 3005; overflow: visible; opacity: 0.2; cursor: pointer; pointer-events: auto; background-image: url('./img/Controls/btn_bg_move.png'); width: 108px; height: 108px; background-position: 0px 0px; background-size: 108px 108px; bottom: 15px; right: 15px; transform: translateZ(1e+12px) translate(-54px, -54px) scale(1, 1) translate(54px, 54px) translate(54px, 54px) rotate(0deg) translate(-54px, -54px);
}
.navigation-vertical-bg{
    position: absolute; z-index: 3005; overflow: visible; opacity: 0.2; cursor: pointer; pointer-events: auto; background: none; width: 48px; height: 130px; bottom:125px; right: 45px; transform: translateZ(1e+12px) translate(0px, 65px) rotate(0deg) translate(0px, -65px);
}