/*rotateGame CSS start*/

.game_rotate { display:none; position: fixed; top:0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.8); z-index: 99  }
#base {position:relative;  margin: 10% auto 0 auto;width:425px; height: 425px; border-radius: 99em; background: url(../images/game_rotate_base.png); transform: scale(1); text-align: center;}
#pointerBase { position: relative; width:137px;height:100%; margin: 0 auto;}
#pointer { position:absolute; bottom: 35%; left: 0; width: 137px; height: 195px; background:url(../images/point.png)}
.startRotate { position: absolute; bottom: 50%; left: 30%; display:block; width: 150px; height: 60px; font-size: 30px; line-height: 60px; text-align: center; z-index: 99; cursor: pointer;}



@media only screen and (max-width: 460px) {	
	#base { margin: 0 ; transform: scale(0.8) translateX(0%) translateY(0%);}	
}

@media only screen and (max-width: 430px) {	
	#base { margin: 0 ; transform: scale(0.78) translateX(-8%) translateY(0%);}	
}

@media only screen and (max-width: 414px) {	
	#base { margin: 0 ; transform: scale(0.8) translateX(-8%) translateY(0%);}	
}
@media only screen and (max-width: 400px) {	
	#base { margin: 0 ; transform: scale(0.78) translateX(-8%) translateY(0%);}	
}
@media only screen and (max-width: 375px) {
	#base { margin: 0 ; transform: scale(0.75) translateX(-14%) translateY(0%);}
}
@media only screen and (max-width: 350px) {
	#base { margin: 0; transform: scale(0.65) translateX(-25%) translateY(-20%);}
}