html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

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

#unity-container.unity-mobile {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#unity-canvas {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #232021;
    width: 100%;
    height: 100%;
}

.unity-mobile #unity-canvas {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
}

#unity-loading {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
}


.unity-mobile #unity-loading {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
}

@media only screen and (orientation: portrait) and (max-device-width:1100px) {
    #unity-canvas {
        height: 100vh;
        width: 100vh * (9 / 16);
        left: 0;
        top: 0;
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    #unity-loading {
    	background: url('../TemplateData/PocketLoad.gif') no-repeat center;
	background-size: contain;
        height: 100vw;
        width: 100vw;
        left: 0;
        top: 0;
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

@media only screen and (orientation: portrait) and (min-device-width:1100px) {
    #unity-canvas {
        height: 100vh;
        width: 100%;
        left: 0;
        top: 0;
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    #unity-loading {
    	background: url('../TemplateData/PocketLoad.gif') no-repeat center;
	background-size: contain;
        height: 100vw;
        width: 100vw;
        left: 0;
        top: 0;
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

@media only screen and (orientation:landscape) and (max-device-width:1100px) {
    #unity-canvas {
        width: 100vh;
        height: 100vh;
        left: calc(50vw - 50vh);
        top: calc(50vh - 50vw);
        -moz-transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        transform: rotate(-90deg);
    }
    #unity-loading {
    	background: url('../TemplateData/PocketLoad.gif') no-repeat center;
	background-size: contain;
        height: 20vw;
        width: 20vw;
        left: calc(50vw - 50vh);
        top: calc(50vh - 50vw);
        -moz-transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
    }
}

@media only screen and (orientation:landscape) and (min-device-width:1100px) {
    #unity-canvas {
        height: 100vh;
        width: calc(9 / 16 * 100vh);
        left: calc(50vw - (9 / 16) * 50vh);
        top: 0;
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    #unity-loading {
    	background: url('../TemplateData/PocketLoad.gif') no-repeat center;
	background-size: contain;
        height: 100vh;
        width: calc(100vh*(9/16));
        left: calc(50vw - (9 / 16) * 50vh);
        top: 0;
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}