html, body                          { background:#101010; width: 100%; height: 100%; margin: 0; padding: 0; overflow:hidden;  }
#viewer                             { background:#101010; position:relative; width: 100%; height: 100%; z-index:1; }
.loading_animation                  { display:inline-block; height:270px; position:relative; width:270px; }
.loading_animation > *              { background-size:100% 100%; width:270px; height:270px; margin-top:-135px; margin-left:-135px; left:50%; top:50%; position:absolute; }
.loading_animation .circle1         { background-image:url(media/loading1.png); animation-name:spinccw; animation-iteration-count:infinite; animation-timing-function:linear; animation-duration:1000ms; }
.loading_animation .circle2         { background-image:url(media/loading2.png); animation-name:spinccw; animation-iteration-count:infinite; animation-timing-function:linear; animation-duration:2000ms; }
.loading_animation .circle3         { background-image:url(media/loading3.png); animation-name:spinccw; animation-iteration-count:infinite; animation-timing-function:linear; animation-duration:3000ms; }
.loading_animation .loading         { background-image:url(media/loading.png);  animation-name:loading; animation-iteration-count:infinite; animation-timing-function:linear; animation-duration:3000ms; }
@keyframes spinccw
{
    from { transform:rotate(0deg); }
    to { transform:rotate(-360deg); }
}
@keyframes loading {
    0%   { opacity:0; }
    50%  { opacity:1; }
    100%  { opacity:0; }
}
#preload                            { background-color:#101010; background-size:cover; background-repeat:no-repeat; background-position:center center; opacity:1; background-image:url(media/loadingbg.jpg); position:absolute; left:0; top:0; width:100%; height:100%; z-index:2; }
#preload .loading_animation         { left:50%; margin-left:-135px; margin-top:-185px; position:absolute; top:50%; }
#preload .rotate_animation          { display:none; height:270px; left:50%; margin-left:-200px; margin-top:-185px; position:absolute; width:400px; text-align:center; top:50%; }
#preload .rotate_animation .text    { bottom:230px; color:#fff; display:inline-block; font-weight:600; font-size:20px; font-family:'Raleway', sans-serif; left:0; position:absolute; text-shadow:0 0 4px rgba(0,0,0,0.8); width:100%; }
#preload .rotate_animation img      { bottom:-10px; height:250px; left:50%; margin-left:-125px; position:absolute; width:250px; }
#preload .logo                      { background:url(media/khovlogo.png); background-size:contain; background-position:center center; background-repeat:no-repeat; height:150px; left:50%; margin-left:-250px; margin-top:75px; position:absolute; top:50%; width:500px; }
#preload .logo2                     { background:url(media/optologo.png); background-size:contain; background-repeat:no-repeat; background-position:center; height:69px; left:50%; position:absolute; bottom:20px; width:200px; margin-left:-100px; }
@media only screen and (max-device-width: 1024px) and (orientation:portrait)
{
    #preload .loading_animation     { display:none; }
    #preload .rotate_animation      { display:inline-block; }
}
@media only screen and (max-device-width: 1024px) and (orientation:portrait), only screen and (max-device-width: 1024px) and (orientation:landscape)
{
    .loading_animation > *          { width:160px; height:160px; margin-top:-80px; margin-left:-80px; }
    #preload .loading_animation     { margin-top:-200px; }
    #preload .logo                  { margin-top:15px;  }
}