@charlesvandepas 2.0;

* {
		padding: 0;
		margin: 0;
	}
.audio-player {
  width: 100%;
 
}
@bodyvak;
	body {
		animation:intro4 1.7s ;
		transition:1.25s;
		-webkit-transition:1.25s;
	}
	@keyframes intro4{
		0% {
			background-color: #fefefe;
			opacity:0.2;
		}
		25% {
			background-color: #fffefe;
			opacity:0.41;
		}
		50% {
			background-color: #fffffe;
			opacity:0.61;
		}
		75% {
			opacity:0.75;
		}
		100% {
			opacity:1;	
		}
	}
@bodyvak;

@menuvak mobile;
	@media (max-width:700px) {
		#menu {
			background-color: #000;
			width: 100%;
			color: #fff;
			border-bottom:0.3vw solid #000;
			z-index: 3;
		}
		#menu ul {
			list-style: none;
			text-align: center;
			border-bottom: 0.1vw solid #fff;
		}
		#menu ul li{
			transition:1.25s;
			-webkit-transition:1.25s;

		}
		#menu .link2 {
			display: none;
		}
		#menu ul li:hover {
			background-color:#005279;
			transition:1.25s;
			-webkit-transition:1.25s;
		}
		#menu a{
			display: block;
			padding: 1vw;
			color: #fff;
			font-size: 2.8vw;
			text-decoration: none;
			font-family: Verdana, Geneva, sans-serif;
			transition:1.25s;
			-webkit-transition:1.25s;
		}
		#menu a:hover {
			padding: 1vw;
			font-size: 3.1vw;
			transition:1.25s;
			-webkit-transition:1.25s;
		}
		#menublock {
			width:100%;
			height:3vw;
		}
	}
@menuvak mobile;

@menuvak;
@media (min-width:701px) {
	#menu {
		background-color: #000;
		width: 100%;
		color: #fff;
		border-bottom:0.3vw solid #000;
		position: fixed;
	}
	#menu ul {
		list-style: none;
		text-align: center;
	}
	#menu ul li{
		display: inline-block;
		transition:1.25s;
		-webkit-transition:1.25s;

	}
	#menu .link1 {
		display: none;
	}
	#menu .link2 {
		display: block;
	}
	#menu ul li:hover {
		background-color:#005279;
		transition:1.25s;
		-webkit-transition:1.25s;
	}
	#menu a{
		display: block;
		padding: 1vw;
		color: #fff;
		font-size: 1vw;
		text-decoration: none;
		font-family: Verdana, Geneva, sans-serif;
		transition:1.25s;
		-webkit-transition:1.25s;
	}
	#menu a:hover {
		padding: 1vw;
		font-size: 1.3vw;
		transition:1.25s;
		-webkit-transition:1.25s;
	}
	#menublock {
		width:100%;
		height:3vw;
	}
}
@menuvak;

@slider samrtphone;
@media (max-width:700px) {
	#slider  {
		width:100%;
		height:55vw;
		position:relative;
		animation:intro1 1.5s ease-in;
	}
	@keyframes intro1 {
		0% {
			opacity:0;
		}
		100% {
			opacity:1;		
		}
	}
	.img {
		width:100%;
		height:100%;
		animation:slider 25s infinite;
		opacity:0;
		position:absolute;
	}
	@keyframes slider {
		0%{
			opacity:0;	
		}
		5% {
			opacity:1;
			}
		33% {
			opacity:1;	
		}
		50% {
			opacity:0;
		}

	}
	img:nth-child(0) {
		animation-delay:0s;	
	}
	img:nth-child(2) {
		animation-delay:7.5s;	
	}
	img:nth-child(3) {
		animation-delay:15s;	
	}
}
@slider samrtphone;

@slider;
@media (min-width:701px) {
	#slider  {
		top:3.1vw;
		width:100%;
		height:40vw;
		position:relative;
		animation:intro1 1.5s ease-in;
	}
	@keyframes intro1 {
		0% {
			opacity:0;
		}
		100% {
			opacity:1;		
		}
	}
	.img {
		width:100%;
		height:100%;
		animation:slider 25s infinite;
		opacity:0;
		position:absolute;
	}
	@keyframes slider {
		0%{
			opacity:0;	
		}
		5% {
			opacity:1;
			}
		33% {
			opacity:1;	
		}
		50% {
			opacity:0;
		}

	}
	img:nth-child(0) {
		animation-delay:0s;	
	}
	img:nth-child(2) {
		animation-delay:7.5s;	
	}
	img:nth-child(3) {
		animation-delay:15s;	
	}
}
@slider;

@hometitel samrtphone;
	@media (max-width:700px) {
		#titel {
			background-color: #222;
			border-top: 0.2vw solid #fff;
			border-bottom: 0.1vw solid #fff;
			opacity:0.9;
			color: #fff;
			position: absolute;
			font-weight: bold;
			font-size: 5vw;
			font-family: 'Lobster', cursive;
			padding: 0.5vw;
			text-align: center;
			width: 100%;
			animation:hoofdtitel 2s ease-in;
		}

		@keyframes hoofdtitel{
			0% {
				font-size: 0.3vw;
				padding: 1.5vw;
			}
			100% {
				font-size:5vw;
			}

		}
	}
@hometitel samrtphone;

@hometitel;
@media (min-width:701px) {
	#titel {
		background-color: #222;
		border-top: 0.2vw solid #fff;
		border-bottom: 0.1vw solid #fff;
		opacity:0.9;
		color: #fff;
		font-weight: bold;
		font-size: 2vw;
		font-family: 'Lobster', cursive;
		padding: 0.5vw;
		text-align: center;
		width: 100%;
		animation:hoofdtitel 2s ease-in;
	}

	@keyframes hoofdtitel{
		0% {
			font-size: 0.3vw;
			padding: 1.5vw;
		}
		100% {
			font-size: 2vw;
		}

	}
}
@hometitel;

@imagevak voor mobile telefoons;
@media (max-width:700px) {
	#imagevak {
		margin-bottom: 2.8vw;
		width:100%;
		overflow:hidden;
		background-color:#000;
	}
	#imagevakblock{
		float: none;
		display: block;
		background-color:#000;
		font-family: 'Lobster', cursive;
		position:relative;
		margin:0.1vw;
		padding:0px;
	}
		#imagevakblock .text{
		color:#fff;
		position:absolute;
		overflow:hidden;
		text-align:center;
		width:100%;
		margin-top:10vw;
		background-color:#;
		font-size:3vw;
		z-index:3;
		opacity:0;
		font-family: 'Lobster', cursive;
		transition:2s;

	}
	#imagevakblock:hover .text{
		opacity:1;
	}

	#imagevakblock img{
		width:100%;
		height:45vw;
		position:relative;
		backface-visibility:hidden;
		display:block;
		pointer-events: none;
		opacity:1;
		transition:2s;
		
		
	}
	#imagevak img:hover {
		display:block;
		
	}
	#imagevakblock:hover img {

	opacity:0.4;	
	  filter: alpha(opacity=40);
	  -webkit-transform: translated(0,0,0);
	  transform: translated(0,0,0);
	  z-index:2;

	}
}

@imagevak voor mobile telefoons;

@imagevak;
@media (min-width:701px) {
	#imagevak {
		margin-bottom: 2.8vw;
		width:100%;
		overflow:hidden;
		background-color:#fff;
	}
	#imagevakblock{
		width:33.33%;
		height:100%;
		float:left;
		display: block;
		background-color:#000;
		font-family: 'Lobster', cursive;
		position:relative;
		margin:0px;
		padding:0px;
	}
		#imagevakblock .text{
		color:#fff;
		position:absolute;
		overflow:hidden;
		text-align:center;
		width:100%;
		margin-top:10vw;
		background-color:#;
		font-size:3vw;
		z-index:3;
		opacity:0;
		font-family: 'Lobster', cursive;
		transition:2s;

	}
	#imagevakblock:hover .text{
		opacity:1;
	}

	#imagevakblock img{
		width:100%;
		height:30vw;
		display:block;
		position:relative;
		backface-visibility:hidden;
		display:block;
		pointer-events: none;
		opacity:1;
		transition:2s;
		
		
	}
	#imagevak img:hover {
		display:block;
		
	}
	#imagevakblock:hover img {

	opacity:0.4;	
	  filter: alpha(opacity=40);
	  -webkit-transform: translated(0,0,0);
	  transform: translated(0,0,0);
	  z-index:2;

	}
}
@imagevak;


@tekstvakken voor verschillende paginas;
	@tekstvak 1;
		#tekstvak {
			float: left;
			margin-left: 10vw;
			margin-right: 10vw;
			padding-top:3vw;
			padding-bottom:3vw;
		}
		#vak1 {
			margin-top: 2vw;
			margin-bottom:0.5vw;
			width: 100%;
			text-align: center;
			font-size:4vw;
			font-weight: bold;
			font-family: 'Lobster', cursive;
		}
		#vak2 {
			width: 78.75%;
			padding-top: 1vw;
			padding-right: 1vw;
			padding-bottom: 1vw;
			font-size:0.94vw;
			float: left;
		}
		#vak2 img {
			width:3vw;
			height:3vw;
		}
		#vak3 {
			padding-top: 1vw;
			padding-bottom: 1vw;
			width: 20%;
			float: left;
		}
		#vak3 img {
			width: 100%;
			height: 13vw;
			border-radius:77%;
		}
		#koptitel {
		color:#005279;
		font-weight:bold;
		font-size:1.1vw;
		font-family:Tahoma, Geneva, sans-serif;
		padding-top:0.2vw;
		padding-bottom:0.1vw;
		}
	@tekstvak 1;

	@tekstvak 2;
		#tekstvak2 {
			margin-bottom:3.5vw;
			padding-top:2vw;
			margin-left: 10vw;
			margin-right: 10vw;

		}
		#vak4 {
			width: 100%;
			padding-bottom: 1vw;
			font-size: 1vw;
		}
		#socialmediaplaatje {
			width: 3vw;
			height: 3vw;
		}
		#koptitel2 {
		color:#005279;
		font-weight:bold;
		font-size:1.1vw;
		font-family:Tahoma, Geneva, sans-serif;
		padding-bottom:0.3vw;
		}
		#koptitel3 {
		color:#005279;
		font-weight:bold;
		font-size:1.1vw;
		font-family:Tahoma, Geneva, sans-serif;
		padding-bottom:0.3vw;
		padding-top:0.6vw;
		}

			@blogvak;
				#blockblog {
					height:2vw;
					width:100%;
				}
				#blogvak {
					margin:0px auto;
					width:75%;
					margin-top:25px;
					
					margin-bottom:20px;
					margin-top:20px;
					box-shadow:2px 4px 22px 0px #999;
				}
				#blogvak2 {
					width:100%;
					background-color:#fff;
				}
				#blogvak a {
					color:#000;	
				}
				.blogfotoinzoom {
					width:100%;
					height:825px;
					overflow: hidden;
				}
				.blogfotoinzoom img {
					width: 100%;
					height: 100%;
					-webkit-transition: all 1.3s ease;
				        -moz-transition: all 1.3s ease;
				        -o-transition: all 1.3s ease;
				        -ms-transition: all 1.3s ease;
				        transition: all 1.3s ease;
				}
				.blogfotoinzoom:hover img{
				        -webkit-transform:scale(1.2);
				        -moz-transform:scale(1.2);
				        -ms-transform:scale(1.2);
				        -o-transform:scale(1.2);
				        transform:scale(1.2);
				}
				#blogvak .titel{
					font-size:2.5vw;
					padding:15px 0px;
					text-align:center;
					font-family: 'Lobster', cursive;

				}
				#blogvak .blogkoptitel {
					font-size:35px;
					font-weight:bold;
					padding:10px 10px;
					font-family: 'Baloo Chettan';
				}
				#blogvak .blogtekst {
					font-size:19px;
					padding:5px 0px 25px 10px;
				}

				#btn {
				  text-decoration: none;
				  
				}
				@box 1;
				#box3 {
					display:none;
				}
				#box3:target {
					display:block;
				  
				}
				#box4 {
					display:none;
				}
				#box4:target {
					display:block;
				  
				}
				#bg3{
					width: 100%;
					height: 100%;
					top: 0;
					left:0;
					background-color:#000;
					opacity:0.77;
					position:fixed;
					display:block;
					z-index:1;
					animation:modalbg 2s;
				}
				@keyframes modalbg {
					0% {
					background-color:#000;
					opacity:0;
					}
					
					100% {
					background-color:#000;
					opacity:0.77;
					}
				}
				.boxvenster {
					opacity:100%;
					width: 78%;
					background-color:#fff;
					position: absolute;
					margin-left: -38.7%;
					z-index:2;
					margin-top:6vw;
					margin-bottom:6vw;
					left: 50%;
					animation:venster 2s;
				}
				@keyframes venster {
					0% {
						margin-top:-200vw;
					}
					100% {
						margin-top:6vw;
					}
				} 
				.boxvenster img {
					width: 100%;
					height:30vw;
					transition:1s;
				}
				.boxvenster img:hover {
					width: 100%;
					height:34.5vw;
				}
				.boxvenster .blogkoptitel {
					font-size:2vw;
					font-weight:bold;
					padding:10px 10px;
					font-family: 'Baloo Chettan';
				}
				.boxvenster .blogtekst {
					font-size:0.94vw;
					padding:5px 0px 25px 10px;
				}
				@box 1;

				#close {
					color: #fff;
					font-family: 'Arial';
					text-decoration: none;
					font-size: 1.5vw;
					position: absolute;
					background-color: #000;
					padding:0.75vw 1.25vw;
					text-align: center;
					right:-4vw;
					transition:1s;

				}
				#close:hover {
					background-color:#fff;
					color:#000;
				}
				#sluiten {
					display: none;
				}
				#sluiten:target {
				display: block;
				transition:2s;
				-webkit-transition:2s;
				height:100%;
				width: 100%;
				top: 0;
				z-index:-1;
				left: 0;
				position: fixed;
				opacity:0;
				background-color:#000;
				animation:sluiten 2s;

				}
					@keyframes sluiten {
					0% {
					background-color:#000;
					opacity:0.77;
					z-index:1;
					}
					100% {
					background-color:#000;
					opacity:0.0;
					z-index:-1;
					} 
				}
			@blogvak;

	@tekstvak 2;

@tekstvakken einde;

@Fotos;
	#block{
	width:100%;
	height:1vw;	
	}
	#fotogallery {
		margin-left:9%;
		margin-right: 9%;
		width:82%;
		margin-bottom:3vw;
		float: left;
		
	}
	#figure1 {
		width:100%;
		height:20vw;
		margin: 0;
		padding: 0;
		overflow: hidden;
		position:relative;
	}
	#figure2 {
		width:100%;
		height:100%;
		margin: 0;
		padding: 0;
	}
	#fotorij1 {
		width:27%;
		margin-top:0.83%;
		margin-right:0.5%;
		float:left;
		
	}
	#fotorij1  img {
		width:100%;
		height:100%;
		padding:2%;
		margin-top:1%;
		margin-right:0.5%;
		-webkit-transition: 1s ease;
		transition: 1s ease;
	}
	#fotorij1 figure:hover img {
		width:125%;
		height:465px;
	}
	#fotorij2 {
		margin-top: 1%;
		margin-left:0.5%;
		margin-right: 0.5%;
		width:37%;
		float:left;
		
	}

	#fotorij3 {
		width:33%;
		margin-top:1%;
		margin-left: 0.5%;
		float:left;	
	}
	.photo2{
		width: 100%;
		margin:2% 0px;
		overflow: hidden;
	}
	.photo2 img{
		width: 100%;
		height: 22.5vw;
		-webkit-transform:scale(1.4);
	    -moz-transform:scale(1.4);
	    -ms-transform:scale(1.4);
	    -o-transform:scale(1.4));
	    transform:scale(1.4);
		-webkit-transition: all 1s ease;
	    -moz-transition: all 1s ease;
	    -o-transition: all 1s ease;
	    -ms-transition: all 1s ease;
	    transition: all 1s ease;
	}
	.photo2:hover img{
	        -webkit-transform:scale(1.0);
	        -moz-transform:scale(1.0);
	        -ms-transform:scale(1.0);
	        -o-transform:scale(1.0));
	        transform:scale(1.0);
	}
	.photo3{
		width: 100%;
		height:20vw;
		margin:2% 1%;
		overflow: hidden;
	}
	.photo3 img{
		width: 100%;
		height: 100%;
		-webkit-transition: all 1s ease;
	        -moz-transition: all 1s ease;
	        -o-transition: all 1s ease;
	        -ms-transition: all 1s ease;
	        transition: all 1s ease;
	}
	.photo3:hover img{
	        -webkit-transform:scale(1.2);
	        -moz-transform:scale(1.2);
	        -ms-transform:scale(1.2);
	        -o-transform:scale(1.2);
	        transform:scale(1.2);
	}
@fotos;

@contact;
#contactform{
	margin:0px auto;
	width:80%;
	font-size:1vw;
	margin-bottom:3vw;
}
#contacttekst {
	width: 100%;
	font-size:1vw;
}
#labeltekst {
	margin:1% 0px 0px 0px;
}
#formveld1 {
	width:20vw;
	padding:0.2vw;
	font-size:0.8vw;
	border:0.1vw solid #222;
	font-family:Arial, Helvetica, sans-serif;	
}
#formveld2 {
	width:100%;
	font-size:1.2vw;
	font-weight:bold;
	box-sizing: border-box;
	padding:0.2vw;
	border:0.1vw solid #222;
	font-family:Arial, Helvetica, sans-serif;	
}
#formveld3 {
	padding:0.2vw;
	width:100%;
    box-sizing: border-box;
	height:20vw;
	font-size:1vw;
	border:0.1vw solid #222;
	font-family:Arial, Helvetica, sans-serif;
}
#button {
	padding:0.2vw;
	font-size:1vw;
	background-color:#005279;
	color:#fff;
	margin:0.5vw 0px;
	transition:0.5s;
}
#button:hover {
	padding:0.4vw;
	font-size:1.2vw;
	background-color:#fff;
	font-weight:bold;
	color:#005279;
	border:0.1vw solid #222;
	margin:1% 0px;
	transition:1.25s;
	-webkit-transition:1.25s;
}
#tabeltext {
	font-weight:bold;
	font-size:20px;	
}
#hoofdtitel {
	font-size:60px;
	text-align:center;
	font-family: 'Lobster';
	padding-bottom:2%;
	animation:titelvanboven 3s ease;
}
@keyframes titelvanboven {
	0% {
		margin-bottom:200px;
		font-size:80px;
		margin-right:100%;
	}
}
	@contact (verzonden bericht);
	#verzonden {
			width:27%;
			margin-bottom:1vw;
			color:#fff;
			background-color:#009900;
			padding:1vw;
			font-family: Verdana, Geneva, sans-serif;
			border:2px solid #006600;
			font-size:1.4vw;
	}
	#verzonden .tekst3{
			font-size:1.4vw;
			font-weight:bold;
	}
	@contact (verzonden bericht);
	@contact (error bericht);
	#fout1{
			margin-top:5vw;
			width:65%;
			color:#fff;
			background-color:#FF4F53;
			padding:1vw;
			font-family: Verdana, Geneva, sans-serif;
			border:2px solid #F00;
			font-size:1.4vw;
	}
	#fout1 .tekst3{
			font-size:1.4vw;
			font-weight:bold;
	}
	@contact (error bericht);
@contact;

@footervak;
	#footer {
		width: 100%;
		z-index:3;
		position: fixed;
		bottom:0vw;
		left: 0vw;
		background-color: #000;
		padding: 0.75vw;
		font-size:1vw;
		text-align: center;
		color: #fff;
		font-weight: bold;
		font-family: Verdana, Geneva, sans-serif;
		float: left;
	}
	#footer a{
		color:#fff;
		transition:0.75s;
		font-weight:bold;
		text-decoration:none;
		font-family: Verdana, Geneva, sans-serif;
		font-size:1vw;	
	}
	#footer a:hover {
		color:#126C9C ;
		font-weight:bold;
		font-size:1.05vw;	
	}
@footervak;