/* voor de verkleurende tekst rond de images */
#cf3 { position:fixed; right:17%; top:22%; width:24%; height:48%; }
#cf3 img { position:absolute; right:0; width:100%; max-height:100%; }
#cf3 img.top { 
	-webkit-animation-name: cf3FadeInOut;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-duration: 5s;
	-webkit-animation-direction: alternate;

	-moz-animation-name: cf3FadeInOut;
	-moz-animation-timing-function: ease-in-out;
	-moz-animation-iteration-count: infinite;
	-moz-animation-duration: 5s;
	-moz-animation-direction: alternate;

	-o-animation-name: cf3FadeInOut;
	-o-animation-timing-function: ease-in-out;
	-o-animation-iteration-count: infinite;
	-o-animation-duration: 5s;
	-o-animation-direction: alternate;

	animation-name: cf3FadeInOut;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-duration: 5s;
	animation-direction: alternate;
}
@-webkit-keyframes cf3FadeInOut { 0% { opacity:1; } 25% { opacity:1; } 75% { opacity:0; } 100% { opacity:0; } }
@-moz-keyframes    cf3FadeInOut { 0% { opacity:1; } 25% { opacity:1; } 75% { opacity:0; } 100% { opacity:0; } }
@-o-keyframes 	   cf3FadeInOut { 0% { opacity:1; } 25% { opacity:1; } 75% { opacity:0; } 100% { opacity:0; } }
@keyframes 		   cf3FadeInOut { 0% { opacity:1; } 25% { opacity:1; } 75% { opacity:0; } 100% { opacity:0; } }

/* Voor de fading images */
#imageBox { 
	position:fixed;
	right:17%;
	top:22%;
	width:24%;
	height:40%;
	/*border:thin dashed red;*/ }
#logo { 
	position:fixed; right:24%; top:28%; width:11%; height:29%; /*border:thin double yellow;*/
	background-size: 100% 100%;
	background-position:center;
	background-repeat:no-repeat;
	opacity: 1;
	-webkit-transition: opacity 5s;
	-moz-transition: opacity 5s;
	transition: opacity 5s;
}
#logo.fade { opacity:0; }