body {
	font-family: arial, sans-serif;
	}
.center {
	width:650px;
	height:400px;
	position:absolute;
    z-index: 0;
	left:50%;
	top:50%;
	margin:-200px 0 0 -325px;
	text-align:center;
}
a:hover {
	text-decoration:underline;
	}
nav {
	float: right;
	width: 280px;
	margin-top: 24px;
	margin-right: 20px;
	font-size: .8em;
}
nav a {
	color: #222;
	display: block;
	float:left;
	margin: 0px 8px;
	}
.apps {
	text-indent: -9999px;
	height: 16px;
	width: 16px;
	background: url(../images/apps.png);
	margin-top:5px;
	}
.signin {
	font-weight: bold;
	color: #FFF;
	background: #4485f4;
	padding: 8px 10px;
	border-style: none;
	border-radius: 2px;
	}
.l {
	line-height: 25px;	
	}
.signin:hover {
	text-decoration:none;
	}
.search {
	width:80%;
	height:40px;
    padding-left: 15px;
	border-top: 1px solid #c0c0c0;
	border-right: 1px solid #c0c0c0;
	border-bottom: 1px solid #d9d9d9;
	border-left: 1px solid #d9d9d9;
	background: url(../images/micro.png) no-repeat 95% center;
	margin-top: 60px;
	margin-bottom: 15px;
    font-size: .9em;
    border-radius: 25px;
	}
.button {
	font-size: .85em;
	color: #131313;
	background: #f2f2f2;
	height: 30px;
	padding: 6px 12px;
	margin: 0px 6px;
    border:none;
	}
p {
	font-size: .8em;
	color: #222;
	margin-top: 35px;
}

a {
	text-decoration: none;
	margin-right: 4px;
	margin-left: 4px;
}
.bg {
	height: 400px;
	max-width: 650px;
	overflow: hidden;
	background-image: url(../images/achtergrond.png);
	background-repeat:repeat-y;
	background-position:0 0;
	background-size:100% auto;
	animation-name:backgroundAnimation;
	animation-delay: 2s;
	animation-iteration-count: 1;
	animation-duration:15s;
	animation-timing-function:linear;
	position: relative;
}

@keyframes backgroundAnimation {
	0% {
	  background-position: 0 0;
	}
	60% {
		background-position:0 -865px;
	  }
	100% {
	  background-position:0 -865px;
	}
}

.zeedieren {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
	overflow: hidden;
}

.zeepaardje,
.schildpad,
.vis1,
.vis2,
.vis3,
.vis4,
.vis5 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 650px;
    overflow: hidden;
}

.zeepaardje {
	height: 400px;
	max-width: 650px;
	background-repeat: no-repeat;
	background-image: url(../images/zeepaardje.png);
	animation: zeepaardje; 
	animation-duration: 10s;
	background-position-y: 130px;
	animation-fill-mode: forwards;
}

@keyframes zeepaardje {
	0% {
		transform: translateX(-200%);
	}

	100% {
		transform: translateX(100%);
	}
}

.schildpad {
	height: 400px;
	max-width: 650px;
	background-repeat: no-repeat;
	background-image: url(../images/schildpad.png);
    animation-name: schildpad;
	animation-duration:  15s ;
	background-position-y: 90px;
	animation-fill-mode: forwards;
	animation-play-state: running;
}

@keyframes schildpad {
	0% {
		transform: translateX(-160%);
	}
	100% {
		transform: translateX(100%);

	}
}

.vis1 {
	height: 400px;
	max-width: 650px;
	background-repeat: no-repeat;
	background-position: right;
	background-image: url(../images/vis1.png); 
	animation-name: vis1;
	animation-duration: 15s;
	background-position-y: 300px;
	animation-fill-mode: forwards;
	animation-play-state: running;
}

@keyframes vis1 {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
     }
}

.vis2 {
    height: 400px;
	max-width: 650px;
	background-repeat: no-repeat;
	background-position: right;
	background-image: url(../images/vis2.png); 
	animation-name:  vis2 ; 
	animation-duration: 10s;
	background-position-y: 250px;
	animation-fill-mode: forwards;
	animation-play-state: running;
}    

@keyframes vis2 {
    0% {
        transform: translateX(90%);
    }
    100% {
        transform: translateX(-100%);
     }
}

.vis3 {
	height: 400px;
	max-width: 650px;
	background-repeat: no-repeat;
	background-image: url(../images/vis3.png); 
	animation-name:  vis3 ;
	animation-duration: 15s;
    background-position-y: 200px;
	animation-fill-mode: forwards;
	animation-play-state: running;
}    

@keyframes vis3 {
	0% {
		transform: translateX(-90%);
	}
	100% {
		transform: translateX(100%);

	}
}

.vis4 {
    height: 400px;
	max-width: 650px;
	background-repeat: no-repeat;
	background-position: right;
	background-image: url(../images/vis4.png); 
	animation-name: vis4;
	animation-duration: 15s;
	background-position-y: 150px;
	animation-fill-mode: forwards;
	animation-play-state: running;
}

@keyframes vis4 {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-110%);
     }
}


.vis5 {
	height: 400px;
	max-width: 650px;
	background-repeat: no-repeat;
	background-image: url(../images/vis5.png); 
	animation-name: vis5;
	animation-duration: 13s ; 
	background-position-y: 300px;
	animation-fill-mode: forwards;
	animation-play-state: running;
}  

@keyframes vis5 {
	0% {
		transform: translateX(-90%);
	}
	100% {
		transform: translateX(100%);

	}
}