@media(orientation: landscape ){
	div{
		transition: all 0.2s ease;
	}
	.shvr{
		position: absolute;
		left: 0vw;
		top: 0vh;
		width: 100vw;
		height: 100vh;
		z-index: 1;
		overflow: hidden;
	}
	.shareVR{
		background-repeat: no-repeat;
		position: absolute;
		width: 80vw;
		height: 100vh;
		left: 10vw;
		top: 30vh;
		background-size: 100vw;
		background-position-x: -10vw;
		background-image: url(../images/sharevrbg.png);
		z-index:1;
		overflow: hidden;
	}
	.checkinVR{
		background-image: url(../images/sharevrbg2.png);
	}
	.shareVR img{
		position: absolute;
		left: 55vw;
		top: 6vw;
		width: 11vw;
	}
	.hidden{
		width:0vw;
		height:0vw;
		z-index:-1;
	}
	.close{
		position:absolute;
		right:10px;
		top:10px;
		cursor:pointer;
		background-image: url(../images/close.png);
		background-repeat: no-repeat;
		background-size: 3vw;
		width: 3vw;
		height: 3vw;
		border: solid 2px #fff;
		border-radius: 6px;
		
	}
	.close:hover{
		transform:rotate(180deg);
	}
}
@media( orientation: portrait ){
	div{
		transition: all 0.2s ease;
	}
	.shvr{
		transform: rotate(90deg);
		transform-origin: left bottom;
		position: absolute;
		left: 0vh;
		top: -100vw;
		width: 100vh;
		height: 100vw;
		z-index: 1;
	}
	.shareVR{
		background-repeat: no-repeat;
		position: absolute;
		width: 80vh;
		height: 100vw;
		left: 10vh;
		top: 30vw;
		background-size: 100vh;
		background-position-x: -10vh;
		background-image: url(../images/sharevrbg.png);
		z-index:1;
		transition: all 0.2s ease;
		overflow: hidden;
	}
	.shareVR img{
		position: absolute;
		left: 55vh;
		top: 6vh;
		width: 11vh;
	}
	.hidden{
		width:0vw;
		height:0vw;
		z-index:-1;
	}
	.close{
		position:absolute;
		right:10px;
		top:10px;
		cursor:pointer;
		background-image: url(../images/close.png);
		background-repeat: no-repeat;
		background-size: 3vw;
		width: 3vw;
		height: 3vw;
		border: solid 2px #fff;
		border-radius: 6px;
		
	}
	.close:hover{
		transform:rotate(180deg);
	}
}