body
{
	background: url("Achtergrond.png");
	background-size: auto;
	width: 100%;
	height: 100%;
	margin: 0px
}

#start
{
	position: absolute;
	top: 0%;
	left: 50%;
	z-index: -1;
	background: url("StartScherm.png") center no-repeat;	
	background-size: contain;
	width: 80%;
	height: 100%;
	transform: translate3d(-50%, 0, 0);
	-ms-transform: translate3d(-50%, 0, 0);
	-moz-transform: translate3d(-50%, 0, 0);
	-webkit-transform: translate3d(-50%, 0, 0);
}

#link
{
	position: absolute;
	z-index: 1;
	border-radius: 50px;
	
	top: 15%;
	left: 50%;
	width: 25%;
	height: 15%;
	transform: translate3d(-50%, -15%, 0);
	-ms-transform: translate3d(-50%, -15%, 0);
	-moz-transform: translate3d(-50%, -15%, 0);
	-webkit-transform: translate3d(-50%, -15%, 0);
}

.exit-button
{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	background: url("Exit.png") no-repeat;
	background-size: 100%;
	width: 18px;
	height: 18px;
	border: none;
	margin-top: 1%;
	margin-left: 1%;
}

.ar-button
{
	position: absolute;
	width: 18px;
	height: 18px;
	z-index: 1;
	
	background: url("CameraKnop002_UIT.png") no-repeat;
	background-size: 100%;
	
	bottom: 2%;
	left: 50%;
	transform: translate3d(-50%, -2%, 0);
	-ms-transform: translate3d(-50%, -2%, 0);
	-moz-transform: translate3d(-50%, -2%, 0);
	-webkit-transform: translate3d(-50%, -2%, 0);
}

.ar-button:hover
{
	background: url("CameraKnop002_AAN.png") no-repeat;
	background-size: 100%;
}

.ar-button:focus
.ar-button:visited
{
	background: url("CameraKnop002_UIT.png") no-repeat;
	background-size: 100%;
}

@media screen and (min-height: 670px)
{
	#link
	{
		top: 15%;
		left: 50%;
		width: 25%;
		height: 15%;
		transform: translate3d(-50%, -15%, 0);
		-ms-transform: translate3d(-50%, -15%, 0);
		-moz-transform: translate3d(-50%, -15%, 0);
		-webkit-transform: translate3d(-50%, -15%, 0);
	}
	
	.ar-button
	{
		bottom: 2%;
		left: 50%;
		transform: translate3d(-50%, -2%, 0);
		-ms-transform: translate3d(-50%, -2%, 0);
		-moz-transform: translate3d(-50%, -2%, 0);
		-webkit-transform: translate3d(-50%, -2%, 0);
	}
}

@media screen and (min-height: 740px)
{
	#link
	{
		top: 21%;
		left: 50%;
		width: 25%;
		height: 12%;
		transform: translate3d(-50%, -21%, 0);
		-ms-transform: translate3d(-50%, -21%, 0);
		-moz-transform: translate3d(-50%, -21%, 0);
		-webkit-transform: translate3d(-50%, -21%, 0);
	}
	
	.ar-button
	{
		bottom: 2%;
		left: 50%;
		transform: translate3d(-50%, -2%, 0);
		-ms-transform: translate3d(-50%, -2%, 0);
		-moz-transform: translate3d(-50%, -2%, 0);
		-webkit-transform: translate3d(-50%, -2%, 0);
	}
}

@media screen and (min-height: 780px)
{
	#link
	{
		top: 20%;
		left: 50%;
		width: 25%;
		height: 12%;
		transform: translate3d(-50%, -21%, 0);
		-ms-transform: translate3d(-50%, -21%, 0);
		-moz-transform: translate3d(-50%, -21%, 0);
		-webkit-transform: translate3d(-50%, -21%, 0);
	}
	
	.ar-button
	{
		bottom: 2%;
		left: 50%;
		transform: translate3d(-50%, -2%, 0);
		-ms-transform: translate3d(-50%, -2%, 0);
		-moz-transform: translate3d(-50%, -2%, 0);
		-webkit-transform: translate3d(-50%, -2%, 0);
	}
}

@media screen and (min-height: 840px)
{
	#link
	{
		top: 22%;
		left: 50%;
		width: 25%;
		height: 12%;
		transform: translate3d(-50%, -22%, 0);
		-ms-transform: translate3d(-50%, -22%, 0);
		-moz-transform: translate3d(-50%, -22%, 0);
		-webkit-transform: translate3d(-50%, -22%, 0);
	}
	
	.ar-button
	{
		bottom: 2%;
		left: 50%;
		transform: translate3d(-50%, -2%, 0);
		-ms-transform: translate3d(-50%, -2%, 0);
		-moz-transform: translate3d(-50%, -2%, 0);
		-webkit-transform: translate3d(-50%, -2%, 0);
	}
}

@media screen and (min-height: 880px)
{
	#link
	{
		top: 27%;
		left: 50%;
		width: 25%;
		height: 10%;
		transform: translate3d(-50%, -27%, 0);
		-ms-transform: translate3d(-50%, -27%, 0);
		-moz-transform: translate3d(-50%, -27%, 0);
		-webkit-transform: translate3d(-50%, -27%, 0);
	}
	
	.ar-button
	{
		bottom: 2%;
		left: 50%;
		transform: translate3d(-50%, -2%, 0);
		-ms-transform: translate3d(-50%, -2%, 0);
		-moz-transform: translate3d(-50%, -2%, 0);
		-webkit-transform: translate3d(-50%, -2%, 0);
	}
}

@media screen and (min-height: 910px)
{
	#link
	{
		top: 27%;
		left: 50%;
		width: 25%;
		height: 10%;
		transform: translate3d(-50%, -27%, 0);
		-ms-transform: translate3d(-50%, -27%, 0);
		-moz-transform: translate3d(-50%, -27%, 0);
		-webkit-transform: translate3d(-50%, -27%, 0);
	}
	
	.ar-button
	{
		bottom: 2%;
		left: 50%;
		transform: translate3d(-50%, -2%, 0);
		-ms-transform: translate3d(-50%, -2%, 0);
		-moz-transform: translate3d(-50%, -2%, 0);
		-webkit-transform: translate3d(-50%, -2%, 0);
	}
}