/* Reset
------------------------------------------------------------ */
* { margin: 0; padding: 0; }
html { overflow-y: scroll; overflow-x: hidden}
body { background:#e5eefa; font-size: 13px; color: #1f1f1f; font-family: 'Roboto', sans-serif; /*'Open Sans', sans-serif */}
ol, ul { list-style: none; margin: 0;}
ul li { margin: 0; padding: 0;}
a, img { outline: none; border:none; color: #000;}
p { margin: 0 0 10px; line-height: 1.4em; font-size: 1.15em;}
img { display: block; margin-bottom: 10px;}
#main, #fullmain, aside {line-height: 1.4em; font-size: 1.15em;}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { 
    display: block;
	}
fieldset {
  padding: .35em .625em .75em;
  margin: 0 2px;
  border: 1px solid #c0c0c0;
}
legend {
  padding: 0;
  border: 0;
}
textarea {
  overflow: auto;
}
	
/* Structure */

/*.clearfix:before,
.clearfix:after
{
  display: table;
  content: " ";
}*/

#container {
    margin: auto;
	width: 100%;

}
#wrappertop{
	width: 100%;	
	max-width: 1050px;
	margin: auto;
	padding: 0;


	} 
#wrapper {
	width: 100%;	
	background:#fff;
	max-width: 1200px;
	margin: auto;
	margin-top: 0em;
	padding: 4.5em 8em 3em 8em;
	overflow:auto;
  	padding-bottom: 430px; /* must be same height as the footer */
	min-height: 400px;
	} 


.img

{	padding: 0.15em 0.8em;
	margin: 0 0 1.0em 0;
	letter-spacing: 1px;
	text-transform: uppercase; 
	color: #fff;
	font-size: 1.0em;
	font-weight: 100;
	display: inline-block;
	position: relative;
	width: auto;
	top: -53px;
	left: 0;

	}

#fullmain,#fullmain2,
#main, #main2  {
		width: 60%;
		margin-right: 3%;
		float: left;
		padding:0 0 2.0em 0;
		
		}		

#fullmain ul,
#main ul, aside ul{	
	margin: 17px 0 17px 0;
	padding: 0 0 0 0;
	border: 0;	
}
#fullmain li,
#main li, aside li
{
	margin: 0 0 0 18px;
	padding: 0 0 0 0;
	border: 0;
	list-style-type: square;
	text-decoration: none;
	list-style-position : outside;
}
aside {
		width: 30%;
		float: right;
		padding:0 0 2.0em 0;
		}

aside img {
		width: 100%;
		/*max-width:450px;*/
		margin:0;
		clear: both;
	
}
#fullmain img,
#main img {
		width: 100%;
		max-width:580px;
		margin:0;
		clear: both;
	
}

/*form*/
.form{ 
	background: #97aebe;
padding: 1.5em 2em 7em 2em}

.form input[type="text"] {
	width: 99%;
	color: #374a56;
	outline: none;
	font: 1.15em Arial, helvetica, sans-serif;
	padding: 0.2em;
	margin: 0.3em 0;
	border: solid 0px #7D7D7D;
	-webkit-appearance: none;
}
.form textarea {
	resize: none;
	color: #374a56;
	width: 99%;
	outline: none;
	padding: .2em;
	font: 1.15em Arial, helvetica, sans-serif;
	border: solid 0px #7D7D7D;
	margin: 0.5em 0;
	min-height: 80px;
	-webkit-appearance: none;
}
.form input[type="submit"]{
	border: none;
	outline: none;
	color: #fff;
	text-transform:uppercase;
	font: 1.2em Arial, helvetica, sans-serif;
	background: #47556b;
	border-radius: 3px;	 
	height: 1.9em;
	margin: 0.3em 0;
	padding: 0.15em 0;
	-webkit-appearance: none;
	float: right;
	width: 46%;
}
#code
{
	width: 45%;
	float: right;
}



/*END Form*/
		

	
/*-- footer --*/
/*Opera Fix*/
body:before {
  content:"";
  height:100%;
  float:left;
  width:0;
  margin-top:-32767px;/*negate effect of float*/
	
}
.footer{
	background-color: #607e92;
	padding: 2.5em 0 1px 0;
	position: relative;
	margin-top: -420px; /* negative value of footer height */
  	height: 420px;
	width: 100%;
    clear:both;
	
}
#footer {	
	width: 100%;	
	max-width: 1070px;
	margin: auto; 
	padding: 0 0 0 0;

		
}
#footer > p:first-child {
    padding:0;
	float: left;
    width: 25.3%;
}


#footer > p:last-child {
    margin: 0;
	float: left;
    width: 40.3%; 
	

}
.footer b {
	color:#fff; 
	font-size: 1.4em; 
	font-weight: 400; 
	line-height: 2.5em;

}
.footer p{
	color:#fff;
	font-size: 1.0em;
	font-weight: 600;
	margin:0;
	padding: 0;
	display: inline-table;
}
.footer p a{
	color:#bdd8ea;
	text-decoration:none;
	margin: 0 0 0 0;

}
.footer p a:hover{
	color:#202d42;
	transition:0.5s all;
	-webkit-transition:0.5s all;
	-ms-transition:0.5s all;
	-o-transition:0.5s all;
	-mz-transition:0.5s all;
}
.footer img{
	display: inline;
	padding: 0 0.2em;
	margin: 0;
	position: relative;
	left: 0;

	}


	
 h1,h2 {
	color: #fff;
	display: inline-block;
	background-color: rgba(160, 14, 10, 0.85); /* 0.5 - semi-transparent */
    border-radius: 3px;	 
	text-transform: uppercase; 
	font-family: 'Roboto', sans-serif;
	font-size: 1.5em;
	font-weight: 400;
	line-height: 1.5em;
	letter-spacing: 0.05em;
	padding: 0 0.5em;
	margin: 0 0 0.7em 0;

 }
h3,h4 {color: #fff;
	display: inline-block;
	background-color:#47556b;
	border-radius: 3px;
	font-family: 'Roboto', sans-serif;
	text-transform: uppercase; 
	font-size: 1.3em;
	font-weight: 100;
	line-height: 1.5em;
	letter-spacing: 0.05em;
	padding: 0 0.5em;
	margin: 0 0 0.7em 0;
}
b, strong{
	font-family: 'Roboto', sans-serif;
	color: #000;
	font-size: 130%;
	line-height: 1.6em;
 }
 
u,i{
	color: #9f9313; 
	font-size: 0.90em; 
	font-weight:600; 
	padding: 0 0.55em 0 0;
	line-height: 1.45em; 
 }
a{color: #009bad;text-decoration: none;}
a:hover{color: #f04c25;text-decoration: none;}
a:active{color: #0c4454; text-decoration: none;}	
/*pagina fotoalbum*/

.fotoalbumtable	{width: 120%; position: relative; z-index: 1;  margin: 0 0 0 0 }
.fotoalbumtable img {width: 100%;max-height:800px; border: 1px dotted #858482; padding: 1.0em;}
.fotoalbumtitel		{ 
	border-bottom: 0px dotted #858482; max-width: 100%;}

a.fotoalbumlink	

{
	display: block;
	width: 80%;
	color: #000;
	padding: 0.1em  0.6em  0.1em 1.8em;
	margin: 0;
	line-height: 2.0em;
	background: #abbe38 url('../../images/meer.png') 5px -1px no-repeat; 

}
a.fotoalbumlink:hover{
	background: #d8ef4c url('../../images/meer.png') 5px -1px no-repeat;}
.fotoalbumknoppen {padding: 1em 0; text-align: center;}
.fotoalbumstart
{
	min-width: 11%;
	height: 1.6em;
	padding: 0 5px 0 5px;
	margin: 0;
	border: 0;
	background-color:#000;
	letter-spacing: 1px;
	text-align: center;
	font-size: 0.9em;
	color: #fff;
	text-transform: uppercase;
	cursor:pointer;
	float: left;
	
}


.fotoalbumvorige,
.fotoalbumvolgende
{
	margin: 0.15em 0 0 0;
	min-width: 13%;
	height: 1.6em;
	padding: 0 5px 0 5px;
	border: 0;
	background-color:#FF2F00;
	letter-spacing: 1px;
	text-align: center;
	font-size: 0.9em;
	color: #fff;
	text-transform: uppercase;
	cursor:pointer;

}

.fotoalbumterug
{
	margin: 0.15em -1.52em 0 0;
	min-width: 11%;
	height: 1.6em;
	padding: 0 5px 0 5px;
	border: 0;
	background-color:#000;
	letter-spacing: 1px;
	text-align: center;
	font-size: 0.9em;
	color: #fff;
	text-transform: uppercase;
	cursor:pointer;
	float: right;
}

/* Logo H1 */

#naw {
	background-color: #2f3744;
	max-height: 5.5em; 
	border: 1px solid #2f3744;

}			
#logo{
	max-width: 290px;
	padding: 0.8em 0 0.5em 0;
	margin-left: 8.5%;

}

/*-- banner --*/

.rotating-item {display:none; position:absolute; top:0; left:0;} 

#rotating-item-wrapper{ 
	background-color: #b9c0cb;
	position: relative;	
	top: 0;
	padding: 18.85% 0 0 0;
	text-align: center;
    margin: auto;

}
	
#rotating-item-wrapper img {
width:100%;
height: auto;
margin:0;
	
}

#textblock-01,#textblock-02,#textblock-03,#textblock-04,#textblock-05{
	
	display: block;
	position: absolute;
	top: 17%;
	left: 8%;
	background-color: rgba(160, 14, 10, 0.7); /* 0.5 - semi-transparent */
	width: 14.5em;
	padding: 1em;
	color: #fff;
	font-family: 'Roboto', sans-serif;
	font-size: 1.8em;
	font-weight: 100;
	line-height: 1.4em;
	z-index: 10;
}
#textblock-02{background-color: rgba(151, 114, 1, 0.7); /* 0.5 - semi-transparent */}
#textblock-03{background-color: rgba(106, 40, 110, 0.8); /* 0.5 - semi-transparent */}
#textblock-04{background-color: rgba(166, 43, 0, 0.7); /* 0.5 - semi-transparent */}
#textblock-05{background-color: rgba(14, 92, 115, 0.8); /* 0.5 - semi-transparent */}

#textblock-01 h1, #textblock-02 h1,#textblock-03 h1,#textblock-04 h1,#textblock-05 h1{
	background-color: rgba(18, 40, 50, 0.6); /* 0.5 - semi-transparent */
	font-size: 1.0em;
	font-weight: 500;
	padding: 0 0.2em;
	margin: 0 0 0.2em 0;

 }

/*pijlen terug & volgende*/

/* Next & previous buttons */
.intropijlterug,
.intropijlvolgende {
  cursor: pointer;
  position: absolute;
  top: 20%;
  width: auto;
  margin-top: -22px;
  padding: 0.2em 0.6em;
  color: white;
  font-weight: bold;
  font-size: 2.0em;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  background-color: rgba(0,0,0,0.2)
}


/* Position the "next button" to the right */
.intropijlvolgende {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.intropijlterug:hover/*prev*/,.intropijlvolgende:hover/*next*/ {
  background-color: rgba(0,0,0,0.8);
	color: #607e92	
}

/*intro images*/

* {box-sizing:border-box}


#imgbox {
  -webkit-animation: fade 2.5s ease-in-out; /* Safari 4+ */
  -moz-animation:    fade 2.5s ease-in-out; /* Fx 5+ */
  -o-animation:      fade 2.5s ease-in-out; /* Opera 12+ */
  animation:         fade 2.5s ease-in-out; /* IE 10+, Fx 29+ */
 height: 100%;	
}
.imageintro-container {
	max-height: 1200px;
	height: 93em;
	overflow: hidden;
  	position: relative;
  	margin: auto;
	background-color: #2f3744;
  	/*padding-bottom: 350px; /* must be same height as the footer */
}
	
.imageintro-container img {
	width:100%;
	height: auto;
	margin:0;
	margin-top: -8%;
	z-index: -1;
}

/* Fading animation */
.fade {
  /*-webkit-animation-name: fade;
  -webkit-animation-duration: 3.5s;
  animation-name: fade;*/
	animation-duration: 2.5s;
   -webkit-animation: fade 2.5s ease-in-out;
   -moz-animation: fade 2.5s ease-in-out;
   -o-animation: fade 2.5s ease-in-out;
    animation: fade 2.5s ease-in-out;

}

@-webkit-keyframes fade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes fade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes fade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}


/*

@-webkit-keyframes fade {
  from {opacity: 0} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: 0} 
  to {opacity: 1}
}

/*start portfolio*/
#group1
{
	min-height: 260px;
	margin-bottom: 3em;
}

div.rthumbnail
{
	/*width: 22.3%;*/
	padding: 0;
	border: 1px dotted #607e92;

}


.rthumbnail img
{
	width: 215px;
 	height: 140px;
    object-fit: cover;
	padding: 0.7em 0.7em 0 0.7em;
}
div.captioninner

{
	/*background-color: rgba(160, 14, 10, 0.7);*/ 
	font-family: 'Roboto', sans-serif;
	font-size: 1.0em;
	line-height: 1.3em;
	margin: 0em 0em 0.7em 1em;
	
}

div.ptitel{
	
	font-family: 'Roboto', sans-serif;
	text-transform: uppercase;
	font-size: 1.0em;
	line-height: 1.3em;
	font-weight: 500;
}
/* Nav */
.menu{display: none;}
#navcontainer
{
	height: 0;
	position: relative;
	width: 60%;
	float:right;
	z-index: 20;

	

}
#nav
{
	width: 100%; /* 800 */
	font-family: 'Roboto', sans-serif;
	font-weight: normal;
	position: absolute;
	background-color: #607e92;
	z-index: 1;

		}

#nav > a
{
	display: none;

}

#nav li
{
	position: relative;
	
}
#nav li a
{
	color: #fff;
	display: block;
	text-decoration: none;
	margin-left: 0;

}
/*#nav li a:active,*/
#nav li a#current
{
	
	background-color: #457697 !important;
	color: #fff;
}


/*pijltje menu*/
#nav span:after
{
	width: 0;
	height: 0;
	border: 0.313em solid transparent; /* 5 */
	border-bottom: none;
	border-top-color: #fff;
	content: '';
	vertical-align: middle;
	display: inline-block;
	position: relative;
	right: -0.313em; /* 5 */
}

#nav a:hover span:after {	border-top-color: #fff;}
/* first level */

#nav > ul
{
	height: 3em; /* 60 */
	/*background-color: #9f9313;*/

}
#nav > ul > li
{
	width: 16.5%;
	height: 100%;
	float: left;

}
#nav > ul > li > a
{
	height: 100%;
	font-size: 1.2em; /* 24 */
	text-transform: uppercase;
	font-weight:400;
	line-height: 2.5em; /* 60 (24) */
	text-align: center;


}
#nav > ul > li:not( :last-child ) > a
{
	border-right: 0px solid #fff;
}
#nav > ul > li:hover > a,
#nav > ul:not( :hover ) > li.active > a
{
	background-color: #47556b;
	transition:0.5s all;
	-webkit-transition:0.5s all;
	-ms-transition:0.5s all;
	-o-transition:0.5s all;
	-mz-transition:0.5s all;
	color: #fff;
}


/* second level */
#nav li ul
{
	background-color: #607e92;
	display: none;
	position: absolute;
	top: 100%;
}
#nav li:hover ul
{
	display: block;
	left: 0;
	right: 0;
}
#nav li:not( :first-child ):hover ul
{
	left: 0px;
}
#nav li ul a
{
	font-size: 1.1em; /* 20 */
	border-top: 1px solid #688da5;
	padding: 0.65em; /* 15 (20) */;
	color: #fff;
}
#nav li ul li a:hover,
#nav li ul:not( :hover ) li.active a
{
	background-color: #47556b; 
	transition:0.5s all;
	-webkit-transition:0.5s all;
	-ms-transition:0.5s all;
	-o-transition:0.5s all;
	-mz-transition:0.5s all;
}


/* Media Queries */
@media (max-width:1440px){
html, body
{
	font-size: 90%; /* 12 */
	background-color: #fff;
}
	
.imageintro-container {
	height: 78em;
}
	
.imageintro-container img {
	margin-top: -5%;

}	
#wrapper {
	width: 90%;	
	padding: 4em 0 0 0;
	overflow:auto;
  	padding-bottom: 420px; /* must be same height as the footer */
	} 
	
#navcontainer
{
	height: 0;
	position: relative;
	width: 70%;
	float:right;
	z-index: 20;

	

}
#nav > ul > li
{
	width: 19.9%;
	height: 100%;
	float: left;

}
#footer {	
	width: 90%;
	padding-left: 5%;
}

}

@media screen and (max-width:1024px) {

html, body
{
	font-size: 89%; /* 12 */

}
#textblock-01,#textblock-02,#textblock-03,#textblock-04,#textblock-05{
	
	font-size: 150%;
	}	
.imageintro-container {
	height: 80em;
}

.imageintro-container img {
	width:108%;
	margin:0 -4%;

}

}

@media screen and (max-width: 780px) {
	
html, body
{
	font-size: 90%; /* 12 */
}

.fotoalbumtable		{width: 90%}
	/*.fotoalbumtable	img	{margin: 2.5em 0 0 0}*/

.container {padding-left: 0;}
	
.container > ul li {
	
	 float:none;
	 width:auto;
	 padding: 0 0 0 2.5em;
	 margin: 0;

    }


#wrapper {
	margin-top: -1em;
	min-height: 500px;
	
	}
	
#rotating-item-wrapper{ 
	background-color: #fff;
	position: relative;	
	padding: 30.1% 0 0 0;
	text-align: center;
    margin: auto;
	width:100%;
	overflow: hidden;	

}
	
#rotating-item-wrapper img {
width:170%;
height: auto;
overflow: hidden;	
margin: 0 -35%;


	
}
	
#footer {	
	width: 90%;
	padding-left: 0%;
	font-size: 90%
}
#footer > p:first-child {
    width: 35.3%;
}

	
#footer > p:last-child {
    width: 60.3%;
	
}
	
	
#logo{margin-left: 4%;
	 width: 37%;

	}
	
.imageintro-container {
	min-height:83em;
	height: 100%;
	overflow: hidden;
  	position: relative;
  	margin: auto;
	background-color: #b9c0cb;
  	padding-bottom: 0; /* must be same height as the footer */
}	
	
.imageintro-container img {
	width:150%;
	margin:0 -25%;

}	

	
.intropijlterug,
.intropijlvolgende {
		font-size: 120%; 	
		
	}
#navcontainer {width: 35%; font-size: 100%; margin: 0; top: 0em; padding:0;
	}

#nav {margin: 0; top: -6em;
	
		background-color: #2f3744;
		z-index: 20;
	}

/*.menu{
	display: block;
	position: absolute;
	font-size: 160%;
	top: 0.3em;
	left:2.4em;
	color: #fff;
	text-transform: uppercase;}*/
	
	
/*icon menu*/
	
#nav > a
{
	width: 100%; /* 50 */
	height: 6em; /* 50 */
	text-align: left;
	text-indent: -9999px;
	position: relative;
	background: url('../../images/icon.png') right center no-repeat; 



}


	
	
#nav span:after
{
	border-top-color: #fff;
	}	
#nav > a:after
{
	top: 60%; 	
}

#nav:not( :target ) > a:first-of-type,
#nav:target > a:last-of-type
{
	display: block;
}

/* first level */

#nav > ul
{
	height: auto;
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	border-top: 1px solid #679ec2;
	background-color: #607e92;

}
#nav:target > ul
{
	display: block;
}
#nav > ul > li
{
	width: 100%;
	float: none;
	left: 0
}	
	
#nav > ul > li > a
{
	height: auto;
	text-align: left;
	padding: 0.15em 0.833em; /* 20 (24) */
	color: #fff;

}
#nav > ul > li:not( :last-child ) > a
{
	border-right: none;
	border-bottom: 1px solid #679ec2;
}


/* second level */

#nav li ul
{
	position: static;
	padding: 0; /* 20 */
	padding-top: 0;
	background-color: #4e687a;
	}
	
#nav li ul > li > a::before {
    content: "\25B8";
    margin-right: 0.5em; 
  }	
	
#nav li ul a
{

	color: #fff;
	padding-left: 1.4em;
	border-bottom: 1px solid #688da5;
	border-top: none;
}

#nav li ul li a:hover,
#nav li ul:not( :hover ) li.active a
{
	background-color: #343d4c; 
	transition:0.5s all;
	-webkit-transition:0.5s all;
	-ms-transition:0.5s all;
	-o-transition:0.5s all;
	-mz-transition:0.5s all;
}	



/*EINDE MENU*/

	header, #fullmain,
#main, #main2,aside {
		float: left;
		clear: left;
		margin: 0 0 0 0; 
		width: 100%;
		}	

#fullmain img,
#main img,#fullmain img {max-width:90%;}	
aside img {max-width:80%;}	
}


@media screen and (max-width: 680px) {	
	
.imageintro-container {
	min-height: 68em;

}		
	
}	
@media screen and (max-width: 480px) {	

.rthumbnail img
{
	width: 100%;
 	height: 160px;
	}
	
div.captioninner

{

	font-size: 0.8em;

	}
	
#nav {font-size: 80%;}
#logo{width: 60%}
	
.imageintro-container {
	min-height: 61.5em;

}	
#textblock-01,#textblock-02,#textblock-03,#textblock-04,#textblock-05{
	
	font-size: 130%;
	font-weight: 600;
	}	
.imageintro-container img {
	width:180%;
	margin:0 -40%;

}
		
}