@-webkit-keyframes rotatePortrait {
	100% { -webkit-transform: rotate(90deg);
	}
}
.portrait {
	-webkit-animation-name: rotatePortrait;
	-webkit-animation-duration: 0.5s;
	-webkit-animation-fill-mode: forwards;
	-webkit-transition-timing-function:linear;
}

#mainScreen {
	margin-top: 12px;
}

@-webkit-keyframes rotateLandscape {
	0% {
		-webkit-transform: rotate(90deg);
	}
	100% { -webkit-transform: rotate(0deg);
	}
}
.landscape {
	-webkit-animation-name: rotateLandscape;
	-webkit-animation-duration: 0.5s;
	-webkit-animation-fill-mode: forwards;
	-webkit-transition-timing-function:linear;
}

.rotationDiv {
	width: 100%;
	height: inherit;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	display: table;
	text-align: center;
	max-height: 50%;
	padding-top:0px;
}

#mainScreen {
	max-width: 45%;
	max-height: calc(80vh - 200px);
	position: relative;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media screen and (max-width: 800px), screen and (max-height: 1200px) and (max-width: 1250px), screen and (max-height: 700px)
{
	.rotationDiv {
		position: relative;
		/*top: 25% !important;*/
		padding-bottom: 10px;
		padding-top: 32px;
		height:400p;
		top: 0;
		transform: none;
	}

	#mainScreen {
		max-height: 45vh;
		width: unset !important;
	}
}