@media only screen and (orientation:landscape) {
    body {
        height: 100vh;
        overflow: hidden;
    }

    #turn {
        display: block;
        width: 100%;
        height: 100%;
        background: #fafafa;;
        color: #000;
        position: relative;
        text-align: center;

    }

    #turn span {
        
        padding: 10px 20px;
        background-color: #000;
        border-radius: 8px;
        font-weight: 600;
        font-family: tahoma;
        font-size: 24px;
        background-color: #fafafa;
        display: block;
    }

    #container {

        display: none;
    }
    .rotateImg{
        display: block;
        margin: auto;
        position: relative;
        top: 25%;
    }
}

/* (B) CORRECT ORIENTATION - SHOW CONTENT HIDE MESSAGE */
@media only screen and (orientation:portrait) {
    #turn {
        display: none;
    }

    #container {
        display: block;
    }
}
 
/* (B) CORRECT ORIENTATION - SHOW CONTENT HIDE MESSAGE */

body { padding: 0; margin: 0 }
#unity-container { position: fixed; width: 100%; height: 100%; }
#unity-canvas { width: 100%; height: 100%; background: #1F1F20 }
#unity-loading-bar { width: 250px; height:250px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
#unity-logo { width: 85%; height: 85%; left: 30%; background: url('unity-logo-dark.png') no-repeat center;margin: auto; }
#unity-progress-bar-empty { width: 240px; height:50px;  transform: translate(-10%, -30%); margin-top: 13px; background: url('progress-bar-empty-dark.png') no-repeat center;position: relative;left: 47px; background-size: 100%; width: 190px; position: relative;}
#unity-progress-bar-full { width: 0%; height:50px; margin-top: 30px; background: url('progress-bar-full-dark.png') no-repeat center;position: absolute;
    left: 0px;
    top:-30px;
    width: 100%;
    background-size: 190px 20px; }
#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }