/*.fullscreents*/

@media only screen and (display-mode: fullscreen) and (min-aspect-ratio: 16/9) {

    #grid-container {
    	    position: absolute;
        left:50%;
       top: 0%;
        min-height: 100vh !important;
        max-height: 100vh !important;
        min-width: calc( 100vh * 1.77) !important;
        max-width: calc( 100vh * 1.77) !important;
        transform: translate(-50%, 0%);
    }

    #tsrendersurface, #overlaytextsurface {
    	    margin-top: 0px;
    	    position: absolute;
        left:50%;
        top: 0%;
        min-height: 100vh !important;
        max-height: 100vh !important;
        min-width: calc( 100vh * 1.77) !important;
        max-width: calc( 100vh * 1.77) !important;
        transform: translate(-50%, 0%);
    }

}

@media only screen and (display-mode: fullscreen) and (max-aspect-ratio: 16/9) {

    #grid-container {

        min-width: 100vw !important;
        max-width: 100vw !important;
        min-height: calc( 100vw * 0.56249992968) !important;
        max-height: calc( 100vw * 0.56249992968) !important;
        display: inline;
    }

    #tsrendersurface, #overlaytextsurface {
    	   	margin-top: 0px;
    	    position: absolute;
        left: 0%;
        top: 50%;
        min-width: 100vw !important;
        max-width: 100vw !important;
        min-height: calc( 100vw * 0.56249992968) !important;
        max-height: calc( 100vw * 0.56249992968) !important;
        transform: translate(0%, -50%);
	    display: inline;
    }

}