html,body {
	background: url('../media/images/background.jpg');
	margin: 0;
	padding: 0;
	height: 100%;
	overflow: hidden;
}

 #wrapper {
    padding: 23px 23px 23px 23px;
    box-sizing: border-box;
    height: 100%;
}

#game {
    background-color: #FFF;
    position: relative;
    margin: 0 auto;
    box-sizing: content-box !important;
    padding: 4px;
    top: 50%;
    -ms-transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

#gameCanvas {
	display: block;
	width: 100%;
	height: 100%;
	/*position:absolute; */
	z-index:0;
}

@font-face {
    font-family: 'McLaren';
    src: url('../media/fonts/McLaren-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    src: url('../media/fonts/RobotoCondensed-Regular.ttf') format('truetype');
}

#rotateInfo{
	display: none;
	margin: 0% 10%;
	width: 80%;
	height: 100%;
	position: absolute;
	background: url('../media/images/rotate_device.png') no-repeat center center;
	background-size: contain;
	z-index: 5;
}

	.is-mobile #wrapper {
    padding: 0;
    height: auto;
}

.is-mobile #game {
   padding: 0;
   top: 0;
   -webkit-transform: none;
   transform: none;
   background-color: transparent;
}

.is-mobile {
	height: auto;
}

@media (orientation: portrait) {
	#rotateInfo.allow{
		display: block;
	}

	#game.allow {
		display: none;
	}
}
