:root {
    --loadingBarMarginFromTop: 0px;
    --loadingBarScaledWidth: 0px;
    --loadingBarScaledHeight: 0px;
    --loadingBarMarginFromLeft: 0px;
    --loadingBarTextFontSize: 50px;
}
@media screen and (orientation: landscape) {
    #unity-canvas {
        position: fixed;
        width: 2.65em;
        height: 100%;
        display: block;
        /*position: absolute;*/
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        /*width: 100%;*/
        height: 100%;
    }
}
/*html { height: 88% }*/
body{
    /*overflow: hidden;*/
    /*padding-top: 0;*/
    /*padding-bottom: 0;*/
}
/*#unity-canvas{*/

/*}*/
/*.unity-canvas-desktop{*/
/*    height: 97%;*/
/*    position:fixed;*/
/*    top:0px;*/
/*    bottom:0px;*/
/*    left:0px;*/
/*    right:0px;*/
/*}*/

.center {
    position: relative;
    width:100%;
    height:240px;
    text-align: center;
    top:32.5%
}
/*@media screen and (orientation: portrait) {*/
/*    #loadingBox{*/
/*        position: fixed;*/
/*        !*top: 5%;*!*/
/*        top: var(--loadingBarMarginFromTop);*/
/*        width: 100%;*/
/*        text-align: center;*/
/*    }*/
/*}*/
#loaderText{
    font-size: var(--loadingBarTextFontSize);
}
#loadingBar{
    margin-right: var(--loadingBarMarginFromLeft);

}
#loadingBox {
    position: fixed;
    top: var(--loadingBarMarginFromTop);

    width: 100%;
    text-align: center;

}
/*@media screen and (orientation: landscape) {*/
/*  */
/*    */
/*}*/
.loader {
    position: relative;
    width: 240px;
    height: 240px;
    margin-left:-120px;
    margin-top: auto;
    margin-bottom: auto;
}

img.loader {
    animation: spin 3s linear infinite;
}

img.loaderSmall {
    animation: spin 3s linear infinite;
}

span.loader {
    top:38%;
    font-size:50px;
}

span.loaderSmall {
    top:18%;
    font-size:30px;
}

.loaderSmall {
    position: absolute;
    width: 120px;
    height: 120px;
    margin-left:-70px;
}

.meter {
    box-sizing: content-box;
    width:var(--loadingBarScaledWidth);
    height: var(--loadingBarScaledHeight);
    border-radius: 25px;
    position: relative;
    left:27.5%;
    background: #828282;
}

.meterSmall {
    box-sizing: content-box;
    width:25%;
    height: 7.5%;
    border-radius: 25px;
    position: relative;
    left:25%;
    background: #828282;
}

.meter > span {
    display: block;
    height: 100%;
    border-radius: 25px;
    background-color: #D8D6D6;
    position: relative;
    overflow: hidden;
}

.meterSmall > span {
    display: block;
    height: 100%;
    border-radius: 25px;
    background-color: #D8D6D6;
    position: relative;
    overflow: hidden;
}


@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@font-face {
    font-family: alpaWebFont;
    src: url(alpawebfont.otf);
}

.webgl-content2 * {border: 0; margin: 0; padding: 0;}
.webgl-content {position: relative;  margin: 0 auto 0 auto; -webkit-transform: translate(0%, -100%); transform: translate(0%, -100%); pointer-events: none;}
.webgl-content .footer {position: fixed; bottom:0; width:100%; height: 50px; font-family: Helvetica, Verdana, Arial, sans-serif; font-size: 18px;}
.webgl-content .footer .fullscreen {width: 50px; float: right; height: 100%; display: inline-block; background: transparent center no-repeat; pointer-events: auto;}