html {
	overflow: hidden;
	touch-action: none;
	content-zooming: none;
}
body {
	margin:0;
	padding:0;
	background: transparent;
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: url('../assets/.gif'), url('../assets/.gif'), url('../assets/.gif'), url('../assets/.gif');
	background-repeat: repeat;
	background-position: left top;
	overflow: hidden;
}
#screen {
	position:absolute;
	width: 50vw;
	height: 50vw;
	margin: auto;
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	z-index: 10;
}
#screen .img{
	position:absolute;
	cursor:pointer;
	width:100%;
	height:100%;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select: none;
	user-select: none;
}
#screen .frame {
	position:absolute;
	width:50%;
	height:50%;
}
#images {
	display:none;
}

#granny {
	position: absolute;
	width: 267px;
	height: 389px;
	bottom: 0%;
	left: 0%;
	background-size: contain;
	background: transparent url('../assets/granny.gif') no-repeat center center;
	z-index: 30;
}

#granny2 {
	position: absolute;
	width: 267px;
	height: 389px;
	bottom: 0%;
	right: 0%;
	background-size: contain;
	background: transparent url('../assets/granny.gif') no-repeat center center;
	z-index: 30;
}

@media all and (orientation:portrait) {
	#granny {
		position: absolute;
		width: 120px;
		height: 175px;
		bottom: 0%;
		left: 0%;
		background: transparent url('../assets/granny2.gif') no-repeat center center;
		z-index: 30;
	}

	#granny2 {
		position: absolute;
		width: 120px;
		height: 175px;
		bottom: 0%;
		right: 0%;
		background-size: contain;
		background: transparent url('../assets/granny2.gif') no-repeat center center;
		z-index: 30;
	}

	#screen {
		position:absolute;
		width: 90vw;
		height: 90vw;
		margin: auto;
		position: absolute;
		top: 0; left: 0; bottom: 0; right: 0;
		z-index: 10;
	}
}