body {
    margin: 0px;
    padding: 0px;
}

#logo {
    width: 441px;
    height: 320px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -220px;
    margin-top: -112px;
    opacity: 1;
    /*transform-style: preserve-3d;*/
    animation: fadeout 2s forwards;
}

.img {
    width:500px;
    /*animation: runIn 1s forwards;*/
    /*transition-timing-function: ease-out;*/
}

.touchIntro{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: 9999;
    background: rgba(0,0,0,.5);
}

@keyframes runIn{
    0%{
        width: 100px;
        margin-left: 200px;
        margin-top: 200px;
    }
    70%{
        width: 600px;
        margin-left: -50px;
        margin-top: -50px;
    }
}
@keyframes fadeout{
    75%{
        opacity: 1
    }
    100%{
        opacity: 0
    }
}

@media screen and (max-width: 414px) and  (orientation: portrait){
    .touchIntro{
        height: 786px;
    }
}
@media screen and (max-width: 393px) and  (orientation: portrait){
    .touchIntro{
        height: 749px;
    }
}
@media screen and (max-width: 375px) and  (orientation: portrait){
    .touchIntro{
        height: 717px;
    }
}

@media screen and (max-width: 360px) and  (orientation: portrait){
    .touchIntro{
        height: 690px;
    }
}

@media screen and (max-width: 320px) and  (orientation: portrait){
    .touchIntro{
        height: 618px;
    }
}

@media screen and (orientation: portrait) {
    html{
        width : 100vmin;
        height : 100vmax;
    }
    body{
        width : 100vmin;
        height : 100vmax;
    }
    #gyroContain{
        width : 100vmax;
        height : 100vmin;
        transform-origin: top left;
        transform: rotate(90deg) translate(0,-100vmin);
    }
}
	
@media screen and (orientation: landscape) {
	html{
		width : 100vmax;
		height : 100vmin;
	}
	body{
		width : 100vmax;
		height : 100vmin;
	}
	#gyroContain{
		width : 100vmax;
		height : 100vmin;
	}
}