body
{
	overflow: hidden;
	margin: 0;
}

.ui
{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	z-index: 3;
}

.leftSided
{
	position: absolute;
	left: 0px;
}

.rightSided
{
	position: absolute;
	right: 0px;
}

.topSided
{
	position: absolute;
	top: 0px;
}

.bottomSided
{
	position: absolute;
	bottom: 0px;
}

.centered
{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
}

#helpAnim
{
	width: 55vmin;
	height: 23vmin;
	box-shadow: 1px 2px 5px -1px rgba(0, 0, 0, 0.7);
	background-color: white;
}

#progressBar
{
	max-height: 20px;
	max-width: 400px;
	height: 10%;
	width: 50%;
	color: white;
	background-color:#AFC8D5;
}

#progress
{
	height: 100%;
	width: 0%;
	background-color:#0D5881;
}

#helpButton
{
	max-width: 50px;
	height: auto;
	cursor: pointer;
}

#closeAnim
{
	width: 3vmin;
	height: 3vmin;
	cursor: pointer;
	z-index: 2;
	right: 3px;
	top: 3px;
}

.anim
{
	top: 1%;
	position: absolute;
	width : 32%;
	height: 100%;
}

#rotation
{
	left: 1%;
	z-index: 1;
}

#zoom
{
	right: 1%;
	z-index: 2;
}

#pan
{
	left: 34%;
	z-index: 3;
}

.animIMG
{
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
}

.cursorIMG
{
	width: 100%;
}

.animTitle
{
	position: absolute;
	top: 20%;
	left: 50%;
	transform: translate(-50%,-50%);
	font-family: "Arial", sans-serif;
	font-size: 2vmin;
}

.animCursor
{
	position: absolute;
	top: 60%;
	left: 50%;
	width: 25%;
	height: 25%;
	transform: translate(-50%,-50%);
}

#cursorPan
{
	left: 40%;
}

#imgPan
{
	left: 40%;
}

#animContainer .centered
	{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		-webkit-transform: translate(-50%,-50%);
	}

#animContainer
{
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 0;
	overflow: hidden;
}

img
{
	width: 100%;
	height: auto;
}

#closeAnim img
{
	position: absolute;
}

/*@media only screen and (max-width: 800px)
{
	#helpAnim
	{
		height: 400px;
		width: 50%;
		min-width: 300px;
	}
	
	.anim
	{
		top: 1.5%;
		left: 1%;
		display: block;
		width : 98%;
		height: 32%;
	}
	
	#animContainer div.centered
	{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		-webkit-transform: translate(-50%,-50%);
	}
}*/