@charset "utf-8";

#paginaheader{ height: 400px; box-sizing: border-box; padding: 150px 0 0 0 ; background: #fff url(../img/kruimelpad/header-1.jpg) no-repeat center center; background-size:  cover; }
#paginaheader h3{ font-size: 30px; padding: 0 0 30px 0; width: 400px; font-style: italic; font-weight: 300;  }
#paginaheader .container {  box-sizing: border-box; }

#paginaheader.bg-informatie{  background: #fff url(../img/kruimelpad/header-2.jpg) no-repeat center center; background-size:  cover; }
#paginaheader.bg-vaarinformatie{  background: #fff url(../img/kruimelpad/header-3.jpg) no-repeat center center; background-size:  cover; }


#kruimelpad{  padding: 35px 0 30px 0; background: rgba(0,0,0,0.3); color: #fff; box-sizing: border-box; margin-top: -126px; }
#kruimelpad .content{ font-size: 11px;  z-index: 1; padding-left: 440px; }
#kruimelpad .content a{ color: #fff;}
#kruimelpad .content a:hover{ color: #fff!important; }
#kruimelpad .content .kruimellinks{ opacity: 0.6; height: 20px; line-height: 22px; margin-top: 10px; box-sizing: border-box; padding-left: 25px; background: url(../img/svg-sitemap.svg) no-repeat left center; background-size: 13px auto; }
#kruimelpad .content .kruimellinks:hover{ opacity: 1.0; }
#kruimelpad .content h1, #kruimelpad .content h3{ color: #fff; font-size: 26px; text-transform: uppercase; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#kruimelpad .content .kruimellinks { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#inhoud.vervolgpagina{ padding: 50px 0 50px 0;  border-bottom: 1px solid rgba(255,255,255,0.2); background: #F8F9FA; border-top: 2px solid rgba(255,255,255,0.2); }
#inhoud.vervolgpagina .content{	min-height: 600px;  }
#inhoud.vervolgpagina .content.zijmenucontent{ width: 100%; padding: 0 0 50px 440px ; box-sizing: border-box;	}

#inhoud.vervolgpagina .zijmenu{ position: absolute; border-radius: 10px; box-shadow: 2px 2px 3px rgba(0,0,0,0.1); z-index: 1; left: 0px; top: -150px; width: 360px; box-sizing: border-box; padding: 40px; background: #fff; border: 1px solid rgba(255,255,255,0.2); }
#inhoud.vervolgpagina.dubbelregel .zijmenu{  top: -200px; }
#inhoud.vervolgpagina .zijmenu h3{ font-weight: 600; font-size: 16px; padding: 0 0 20px 0; margin-bottom: 10px; color: #59A143; border-bottom: 1px solid rgba(0,0,0,0.1); }
#inhoud.vervolgpagina .zijmenu h3:nth-child(1){ font-size: 16px; }

#inhoud.vervolgpagina h3.nopadding{ margin-bottom: 10px; padding-bottom: 5px;  }

#inhoud.vervolgpagina .zijmenu a.btnzijmenu{ line-height: 120%;  font-size: 14px; padding: 7px 0px; box-sizing: border-box;background: none; color:#104D92!important; margin: 10px 0 0 0; text-decoration: none; border: none;  }
#inhoud.vervolgpagina .zijmenu a.btnzijmenu.active{  font-weight: bold; color: #59A143; }
#inhoud.vervolgpagina .zijmenu a.btnzijmenu:hover{  padding-left: 10px; color: #59A143!important; }
#inhoud.vervolgpagina .zijmenu .split { margin-top: 30px; border-top: 1px solid rgba(0,0,0,0.1); height: 40px; }
#inhoud.vervolgpagina .zijmenu .tel{ padding: 10px 20px 10px 40px; margin: -10px 0 40px 0; font-weight: 300; text-decoration: none; font-size: 30px;  width: 100%; color: #104D92; background: url(../img/svg-telefoon.svg) no-repeat left center; background-size: auto 26px; }
#inhoud.vervolgpagina .zijmenu .tel:hover{ text-decoration: none; }
#inhoud.vervolgpagina .zijmenu .email{ padding: 10px 20px 10px 40px; margin: -10px 0 30px 0; font-weight: 300; text-decoration: none; font-size: 16px;  width: 100%; color: #104D92; background: url(../img/svg-email.svg) no-repeat left center; background-size: auto 12px; }
#inhoud.vervolgpagina .zijmenu .email:hover{ text-decoration: none; }

#inhoud.vervolgpagina.en .zijmenu .tel{ font-size: 25px; padding: 20px 20px 10px 40px; }



#inhoud.vervolgpagina h1{ clear:both; font-size: 41px; color: #59A143; padding: 0 0 10px 0; margin: 0; }
#inhoud.vervolgpagina h2{ clear:both; font-size: 36px;  color: #11325A; padding: 15px 0 15px 0; margin: 0; }
#inhoud.vervolgpagina h3{ clear:both; font-size: 16px;	color: #59A143; padding: 10px 0 10px 0; border-bottom: 1px solid rgba(255,255,255,0.2); margin-bottom: 10px;  }


#inhoud.vervolgpagina .zijmenucontent a.btn { color: #fff; text-decoration: none; margin-bottom: 20px; }
#inhoud.vervolgpagina .zijmenucontent a.btn:hover { color: #fff; text-decoration: none; }

#inhoud.vervolgpagina ul{ list-style-position:outside; padding: 10px 0 20px 35px; list-style-type: disc; position: relative; float: left; width: 100%; }
#inhoud.vervolgpagina ol{ list-style-position:outside; padding: 10px 0 20px 35px; list-style-type: decimal; position: relative; float: left; width: 100%; }
#inhoud.vervolgpagina p{ clear:both; padding: 10px 0 10px 0; }
#inhoud.vervolgpagina a{ color: #59A143; text-decoration: underline; }
#inhoud.vervolgpagina a:hover{ color: #104D92; text-decoration: underline; }
#inhoud.vervolgpagina img{ max-width: 100%; height: auto; border-radius: 5px; }

#inhoud.vervolgpagina iframe{ max-width: 100%; width: 100%; height: 450px;  }


#nieuws { border-bottom: 2px solid #eee; padding-bottom: 80px; }

.nieuwsitem{ position: relative; float: left;	width: 100%;  margin: 0 0 50px 0;  }
.nieuwsitem .left{	position: absolute; top:0px; left: 0px; width: 130px; height: 130px;  }
.nieuwsitem .right{	position: relative; float: left; width: 100%; padding-left: 160px; box-sizing: border-box; color: #333; font-size: 16px; line-height: 160%; min-height: 130px; }
.nieuwsitem .right .title  { font-size: 19px;    color: #113259;    padding-bottom: 10px;    font-weight: bold; }
.nieuwsitem .right .title span { position: relative; float: left; border-bottom: 1px solid #DDDDDD; padding: 0 5px 10px 0; }


.nieuwsitem .left:before{ content:''; position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; transition: all .2s linear; -o-transition: all .2s linear;    -moz-transition: all .2s linear;    -webkit-transition: all .2s linear; }

    
.nieuwsitem:hover .right .title span{  border-bottom: 1px solid #364385; }
.nieuwsitem:hover .left:before{ border: 1px solid rgba(0,0,0,0.2); }
.nieuwsitem:hover .leesverder{  text-decoration: underline; }

.nieuwsitem .right .cat  { color: #000; font-family: 'PT Serif', serif;  padding: 6px 0; font-size: 14px; }
.nieuwsitem .right .leesverder  {  font-weight: bold; padding-top: 5px; color: #59A143; }
.nieuwsitem .left img { width: 100%; height: auto;    }
.nieuwsitem .left .datum { color: #fff; }

.nieuwsitem:hover .right .title{ text-decoration: underline; }
.nieuwsberichtintrotekst { font-weight: bold; font-size: 15px; }
.nieuwsberichtdatum{ padding-bottom: 20px; margin-bottom: 20px; font-size: 11px; border-bottom: 1px solid rgba(0,0,0,0.1); }
.nieuwsberichttekst{ padding-bottom: 20px; margin-bottom: 20px;  border-bottom: 1px solid rgba(0,0,0,0.1); }
.nieuwsdetailsintro{	box-sizing: border-box; padding-left: 160px; min-height: 170px; }
.nieuwsdetailsintro img{	position: absolute; left: 0px; top: 0px; width: 130px; height: auto; }
.nieuwsdetailsintro h3 { font-weight: normal; font-size: 16px; padding: 0 0 10px 0!important; color: #333!important;  }
.nieuwsdetailsintro h3 span{ position: relative; float: left; border-bottom: 2px solid #DDDDDD; padding: 0 5px 20px 0; font-size: 20px;  }

#inhoud.vervolgpagina .zijmenu .linkblok { padding-bottom: 40px;  }
#inhoud.vervolgpagina .zijmenu .linkblok h3{font-weight: normal; font-size: 18px; padding: 0 0 20px 0!important; margin-bottom: 10px; color: #333!important; border-bottom: 1px solid #DDDDDD;  }
#inhoud.vervolgpagina .zijmenu .linkblok a{ position: relative; float: left; width: 100%; font-size: 13px; font-weight: bold; text-transform: uppercase; box-sizing: border-box; padding: 5px 50px 0 0; background: url(../img/svg-pijl-blauw-rechts.svg) no-repeat 95% 5px; background-size: 5px auto; }
#inhoud.vervolgpagina .zijmenu .linkblok a:hover{ background-position: 98% 5px; padding: 5px 40px 0 10px;}
#inhoud.vervolgpagina .zijmenu .linkblok a span{ font-weight: normal; font-size: 10px; color: #666; padding-top: 3px; }
#inhoud.vervolgpagina .zijmenu .linkblok.vastgepinde { padding-bottom: 20px; }
#inhoud.vervolgpagina .zijmenu .linkblok.bijpassend { padding-bottom: 20px; }
#inhoud.vervolgpagina .zijmenu .linkblok.vastgepinde h3{ background: url(../img/svg-vastgepint.svg) no-repeat right 10px top; background-size: 20px auto; }

#inhoud.vervolgpagina .zijmenu .btn { width: 100%; }
#inhoud.vervolgpagina .zijmenu .btn.active { margin-top: -5px; color: #fff; background: #364385 url(../img/svg-pijl-wit-links.svg) no-repeat 20px center; background-size: 6px auto; padding-left: 40px; margin-bottom: 30px;}

@media screen and (min-width: 1024px) and (max-width: 1319px) {
	#paginaheader { height: 400px; }
	#paginaheader h3 { width: 500px; }
	
	#inhoud.vervolgpagina .zijmenu{ top: -150px; }
	#inhoud.vervolgpagina.dubbelregel .zijmenu{ top: -200px; }
	

}

@media screen and (min-width: 740px) and (max-width: 1023px) {

	
	#paginaheader { margin-top: 70px; height: 250px;     padding: 50px 0 0 0; }
	#paginaheader h3 { font-size: 26px; width: 450px; }
	

	
	#inhoud.vervolgpagina .zijmenu {  width: 250px; padding: 25px; top: -150px;   }
	#inhoud.vervolgpagina.dubbelregel .zijmenu{ top: -180px; }
	#inhoud.vervolgpagina .content.zijmenucontent{     padding: 0 0 50px 290px;	 }
	#inhoud.vervolgpagina .zijmenu a { font-size: 11px; }	
	
	#kruimelpad .content { padding: 0 0 0 290px;  }
	#kruimelpad .content h1{ font-size: 28px;  }
	#inhoud.vervolgpagina .zijmenu h3:nth-child(1) { font-size: 15px; }
	#inhoud.vervolgpagina .zijmenu .tel { font-size: 20px; }
	#inhoud.vervolgpagina .zijmenu .input { width: 150px; padding: 0; }
	#inhoud.vervolgpagina .zijmenu .input.telefoon:after { display :none; }
	
	#inhoud.vervolgpagina .zijmenu .split { margin-top: 20px; height: 20px; }
	#inhoud.vervolgpagina.en .zijmenu .tel{ font-size: 16px; padding: 20px 20px 10px 40px; }
	
	#inhoud.vervolgpagina iframe{ max-width: 100%; width: 100%; height: 350px;  }

	.nieuwsitem .left{ width: 80px; height: 80px; }
	.nieuwsitem .right{ padding-left: 100px; }
	.nieuwsitem .right .title span { font-size: 18px; }
	.nieuwsitem  {  font-size: 13px;  }

}


@media screen and (min-width: 1px) and (max-width: 739px) {

	#paginaheader { margin-top: 70px; height: 150px;     padding: 40px 0 0 0;  background-size:  cover;}
	#paginaheader h3 { font-size: 16px; width: 180px; font-weight: bold; }
	
	#inhoud.vervolgpagina .zijmenu { display: none; }
	#kruimelpad .content { padding: 0;  }
	#kruimelpad .content h1{ font-size: 20px; }
	#kruimelpad { padding: 25px 0 20px 0; }
	#kruimelpad .content .kruimellinks { margin-top: 5px; }
	
	#inhoud.vervolgpagina .content.zijmenucontent{     padding: 0;	min-height: auto; }

	#inhoud.vervolgpagina h1{  font-size: 41px;  padding: 0 0 10px 0;  }
	#inhoud.vervolgpagina h2{  font-size: 22px;  padding: 15px 0 10px 0;  }
	#inhoud.vervolgpagina h3{  font-size: 16px;	 padding: 20px 0 10px 0;  margin-bottom: 5px;  }

	#inhoud.vervolgpagina iframe{ max-width: 100%; width: 100%; height: 175px;  }
	
	.nieuwsitem .left{ width: 50px; height: 50px; }
	.nieuwsitem .right{ padding-left: 70px; }
	.nieuwsitem  {  font-size: 12px;  }
	.nieuwsitem .right .title span { font-size: 16px; }
	
	.nieuwsdetailsintro{ padding: 0; }
	.nieuwsdetailsintro h3 span { box-sizing: border-box; padding-left: 70px; min-height: 70px; }
	.nieuwsdetailsintro img { width: 50px; }
	.nieuwsberichtintrotekst{
		position: relative;
		float: left;
		width: 100%;
	}
	
}