body { padding: 0; margin: 0 }
#unity-container { position: absolute }
#unity-container.unity-desktop { left: 50%; top: 50%; transform: translate(-50%, -50%) }
#unity-container.unity-mobile { position: fixed; width: 100%; height: 100% }
#unity-canvas { background: #231F20 }
.unity-mobile #unity-canvas { width: 100%; height: 100% }
#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
#unity-progress-bar-empty { width: 141px; height: 18px; margin-top: 10px; margin-left: 6.5px; background: url('progress-bar-empty-dark.png') no-repeat center }
#unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('progress-bar-full-dark.png') no-repeat center }
#unity-footer { position: relative }
.unity-mobile #unity-footer { display: none }
#unity-webgl-logo { float:left; width: 204px; height: 38px; background: url('webgl-logo.png') no-repeat center }
#unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px }
#unity-fullscreen-button { cursor:pointer; float: right; width: 38px; height: 38px; background: url('fullscreen-button.png') no-repeat center }
#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }


html, body, .webgl-content{

    font-family: cymruSansBody;

    width:100%;
    height:100%;

    margin: 0;
    padding:0;
    position:relative;
    overflow: hidden;
    background-color: black;
}

.webgl-content{
    margin:auto;
}

.canvas-container{
    top:50%;
    width:100%;
    height:100%;
    position: absolute;
    translate: 0 -50%;

}

#unity-container, canvas, #splash{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;;
}

#splash{
    border: none;
    transition: opacity 1s ease-in-out;
}

#loadSpinner{
    position: absolute;
    width: 25vw;
    height: 25vw;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin: auto !important;
    transform: translateY(0%);
    transition: opacity 1s ease-in-out;
}

#loadSpinner img{
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    height:auto;
    margin: auto;
    display: block;
    position: absolute;
}

.rotate {
    animation: rotation 2s infinite linear;
}

.fade {
    opacity: 0;
}

.overlay-window{
    top:0;
    width:100%;
    height:100%;
    display: none;
    position: absolute;
}

.overlay{
    width:100%;
    height:100%;
    opacity: 80%;
    background-color: black;
}

.popup{

    left:0;
    right:0;
    top:50%;

    margin: auto;

    width: 90%;
    height: auto;
    z-index: 100;
    max-width: 1000px;
    position: absolute;
    transform: translateY(-50%);

    background-color: #d93636;
    border-radius: 30px;
    padding: 2em;
    color: white;
    font-size : 1vw;
}

.popup .ui-icon-alert{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    transform: translateY(-50%);
    width: 7vw;
}

.popup h2{
    font-size: 3em;
}

.popup h3{
    font-size: 2em;
    margin-bottom: 0.3em;
}
.popup .ui-btn-confirm-wrap{
    text-align: center;
    margin-top: 2em;
}

.ui-btn-confirm{
    background: transparent;
    border: none;
}

.ui-btn-confirm:focus{
    outline: 0;
    border: none;
    -moz-outline-style: none;
}

.ui-btn-confirm:hover{
    opacity: 0.7;
}

.ui-btn-confirm img{
    width:7vw;
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}