html,body
{
	margin: 0;
	padding:0 ;
}

a
{
	text-decoration:none;
	border: none;
	font-size: 24px;
	color: #000;
	font-family: "Comic Sans MS", "Comic Sans", cursive;
}

a img {border: none;}

#container
{
	position: absolute;
}

.games,.school
{
	position: absolute;
	z-index:100;
	top: 55%;
	left: 49%;
	width:25%;
	height:40%;
}

.school
{
	left: 17%;
}

.pilia
{
	position: absolute;
	z-index:100;
	top: 50%;
	left: 40%;
	width:22%;
	height:30%;
}

.vlemon
{
	position: absolute;
	z-index:100;
	top: 70%;
	left: 2%;
	width:15%;
	height:25%;
}

.kirby
{
	position: absolute;
	z-index:100;
	top:19%;
	left: 40%;
	width:22%;
	height:30%;
}

.piliarace
{
	position: absolute;
	z-index:100;
	top: 50%;
	left: 17%;
	width:23%;
	height:30%;
}

.giga2
{
	position: absolute;
	z-index:100;
	top: 19%;
	left: 17%;
	width:23%;
	height:30%;
}

.linefighter
{
	position: absolute;
	z-index:100;
	top: 19%;
	left: 40%;
	width:23%;
	height:30%;
}

.gobo
{
	position: absolute;
	z-index:100;
	top: 50%;
	left: 62%;
	width:23%;
	height:30%;
}

.lisa
{
	position: absolute;
	z-index:100;
	top: 19%;
	left: 62%;
	width:23%;
	height:30%;
}

.terug
{
	position: absolute;
	z-index:100;
	top: 87%;
	left: 40%;
	width:20%;
	height:10%;
}

#tip
{
	-webkit-transition: opacity 0.3s ease-in-out;
	-moz-transition: opacity 0.3s ease-in-out;
	-o-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;
	display:block;
	position:absolute;
	font-family: "Comic Sans MS", "Comic Sans", cursive;
	padding:10px;
	display:block;
	width:200px;
	height: 200px;
	background-color: #FFB;
	text-align: left;
	opacity: 0;
	font-size: 20px;
	line-height: 30px;
	vertical-align: bottom;
	box-shadow: 1px 2px 3px #888;
}

#tip
{
	width:260px;
	height: 260px;
}
	

@media only screen and (min-height: 600px) and (min-width:800px)
{
	#tip
{
	top: 100px;
	right: 50px;
	-webkit-transform: rotate(10deg);
  	-moz-transform: rotate(10deg);
	z-index:30;
	
	-webkit-animation-name: tip;
	-webkit-animation-duration: 10000ms; /* 7000ms milliseconde = 7 seconde animatie */
	-webkit-animation-delay: 200ms; /* 2000ms milliseconde = 2 seconde wachten voordat de animatie begint */

	-moz-animation-name: tip;
	-moz-animation-duration: 10000ms;
	-moz-animation-delay: 200ms;

	animation-name: tip;
	animation-duration: 10000ms;
	animation-delay: 200ms;

	opacity: 0;
}


@-webkit-keyframes tip {

	0% { opacity: 0; }
	10% { opacity: 0.7; }
	90% { opacity: 0.7; }
	100% { opacity: 0; }

}
@-moz-keyframes tip {

	0% { opacity: 0; }
	10% { opacity: 0.7; }
	90% { opacity: 0.7; }
	100% { opacity: 0; }

}
@keyframes tip {

	0% { opacity: 0; }
	10% { opacity: 0.7; }
	90% { opacity: 0.7; }
	100% { opacity: 0; }

}




}