.webgl-content * {border: 0; margin: 0; padding: 0}
.webgl-content {position: absolute; top:0; left:0;width:100%;height:100%;}

.webgl-content .logo, .progress {position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}

.webgl-content .mylogo {position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);margin-top: -70px;}

.webgl-content .progress {height: 10px; width: 500px; margin-top: 150px;}
.webgl-content .progress .empty {background: url('progressEmpty.Light.png') no-repeat right / cover; float: right; width: 100%; height: 100%; display: inline-block;}
.webgl-content .progress .full {background: url('progressFull.Light.png') no-repeat left / cover; float: left; width: 0%; height: 100%; display: inline-block;}

.webgl-content .logo.Dark {background-image: url('progressLogo.Dark.png');}
.webgl-content .progress.Dark .empty {background-image: url('progressEmpty.Dark.png');}
.webgl-content .progress.Dark .full {background-image: url('progressFull.Dark.png');}

.webgl-content .footer {margin-top: 5px; height: 38px; line-height: 38px; font-family: Helvetica, Verdana, Arial, sans-serif; font-size: 18px;} 
.webgl-content .footer .webgl-logo, .title {height: 100%; display: inline-block; background: transparent center no-repeat;} 
.webgl-content .footer .webgl-logo {background-image: url('webgl-logo.png'); width: 204px; float: left;}
.webgl-content .footer .title {margin-right: 10px; float: right;}


canvas#\#canvas{width:100%;height:100%;}
.disableClick{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;background-color:rgba(0, 0, 0, 0);display:none;}
.disableClick_show{display:block;}
.rotateAlert{position:fixed;left:0;top:0;width:100%;height:100%;z-index:10;background-color:rgba(0,0,0,0.75);display:none;}
.rotateAlert_show{display:block;}
.rotateAlert_in{position:absolute;width:100%;text-align:center;top:50%;transform:translateY(-50%);}
.rotateAlert_in span{display:block;color:white;font-size:20px;font-weight:bold;padding:20px 0 0;font-family:arial;}
.gcontroler{position: absolute;left: 0;bottom: 0;width: 100%;display: none;}
@media(pointer: coarse){
.gcontroler{display:block;}
}
.gcontroler button {
user-select: none;
touch-action: none;
position: absolute;
bottom: 10px;
background: transparent;
border: none;
outline: 0;
opacity: 0.3;
width: 110px;
height: 110px;
border-radius: 50%;
}

.ctrl-left {
    left: 10px;
    transform: rotate(-90deg);
}
.ctrl-up {
    right: 10px;
}
.ctrl-down {
    right: 120px;
    transform: rotate(180deg);
}
.ctrl-right {
    left: 120px;
    transform: rotate(90deg);
}
.setfocushere {
    width: 10px;
    height: 10px;
    border: none;
    position: absolute;
    opacity: 0;
}
button.activeBG{opacity:0.6;}
.gcontroler .ctrl-left.activeBG{background:#ff1f71;color:#050801;box-shadow:0 0 5px #ff1f71,0 0 25px #ff1f71,0 0 50px #ff1f71,0 0 200px #ff1f71;}.gcontroler .ctrl-right.activeBG{background:#2db2ff;color:#050801;box-shadow:0 0 5px #2db2ff,0 0 25px #2db2ff,0 0 50px #2db2ff,0 0 200px #2db2ff;}.gcontroler .ctrl-up.activeBG{background:#1eff45;color:#050801;box-shadow:0 0 5px #1eff45,0 0 25px #1eff45,0 0 50px #1eff45,0 0 200px #1eff45;}.gcontroler .ctrl-down.activeBG{background:#ff9c1e;color:#050801;box-shadow:0 0 5px #ff9c1e,0 0 25px #ff9c1e,0 0 50px #ff9c1e,0 0 200px #ff9c1e;}