@charset "utf-8";

#accomodatiebg{  }

#kruimelpad{  margin-top: 120px;  padding: 20px 0 50px 0; box-sizing: border-box; }
#kruimelpad .content{ font-size: 11px; padding-bottom: 30px; z-index: 1; border-bottom: 1px solid #eee;   }
#kruimelpad .content a{ color: #000;  }
#kruimelpad .content a:hover{  }
#kruimelpad .content .kruimellinks{ opacity: 1; color: #000; height: 20px; line-height: 22px; margin-top: 10px; box-sizing: border-box; padding-left: 45px; background: url(../img/svg-sitemap.svg) no-repeat left center; background-size: 18px auto; }
#kruimelpad .content .kruimellinks:hover{ }
#kruimelpad .content h1{ color: #000; font-size: 36px; box-sizing: border-box;  }
#kruimelpad .content .kruimellinks { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#kruimelpad .centered{	 }
#kruimelpad .volgons { position: absolute; bottom: 25px; right: 10px;  font-size: 14px; font-style: italic; z-index: 1;  }
#kruimelpad .volgons span{ padding-right: 30px; }
#kruimelpad .volgons a.linkedin{ width: 28px; height: 28px; background: url("../img/svg-socialmedia-linkedin.svg") no-repeat;  background-size: auto 100%; margin-right: 5px; }
#kruimelpad .volgons a.facebook{ width: 28px; height: 28px; background: url("../img/svg-socialmedia-facebook.svg") no-repeat;   background-size: auto 100%;  margin-right: 5px; }
#kruimelpad .volgons a.twitter{ width: 28px; height: 28px; background: url("../img/svg-socialmedia-twitter.svg") no-repeat;   background-size: auto 100%;}
#kruimelpad .volgons a.youtube{ width: 28px; height: 28px; background: url("../img/svg-socialmedia-youtube.svg") no-repeat;   background-size: auto 100%; margin-right: 5px; }
#kruimelpad .volgons a.instagram{ width: 28px; height: 28px; background: url("../img/svg-socialmedia-instagram.svg") no-repeat;  background-size: auto 100%; margin-right: 5px;   }
#kruimelpad .volgons a.tiktok{ width: 28px; height: 28px; background: url("../img/svg-socialmedia-tiktok.svg") no-repeat;  background-size: auto 100%; margin-right: 5px;   }
#kruimelpad .volgons a.youtube:hover{ width: 28px; height: 28px; background: url("../img/svg-socialmedia-youtube-hover.svg") no-repeat;   background-size: auto 100%; }
#kruimelpad .volgons a.instagram:hover{ width: 28px; height: 28px; background: url("../img/svg-socialmedia-instagram-hover.svg") no-repeat;   background-size: auto 100%; }
#kruimelpad .volgons a.linkedin:hover{ width: 28px; height: 28px; background: url("../img/svg-socialmedia-linkedin-hover.svg") no-repeat;   background-size: auto 100%; }
#kruimelpad .volgons a.facebook:hover{ width: 28px; height: 28px; background: url("../img/svg-socialmedia-facebook-hover.svg") no-repeat;   background-size: auto 100%; }
#kruimelpad .volgons a.tiktok:hover{ width: 28px; height: 28px; background: url("../img/svg-socialmedia-tiktok-hover.svg") no-repeat;   background-size: auto 100%; }
#kruimelpad .volgons a:hover{ margin-top: -4px; }


#inhoud.vervolgpagina{ padding: 0;  z-index: 2; }
#inhoud.vervolgpagina .centered{  }
#inhoud.vervolgpagina .centered .container.pagina{	line-height: 200%;    }
#inhoud.vervolgpagina .centered .container.pagina.nocta{  }

/*  template gedeeld --------------------------------------- */
#inhoud.vervolgpagina h1{ font-size: 40px;  padding-bottom: 15px; text-transform: uppercase; font-weight: bold; color: #2A3362;  }
#inhoud.vervolgpagina h2{ font-size: 28px;  padding: 30px 0 10px; text-transform: uppercase; font-weight: bold; color: #2A3362; }
#inhoud.vervolgpagina h1 + h2{  padding: 0px 0 20px; }
#inhoud.vervolgpagina h1 + h3{  padding: 0px 0 20px; }
#inhoud.vervolgpagina h3{ font-size: 18px;  padding: 30px 0 20px; }
#inhoud.vervolgpagina h4{ font-size: 16px;  }
#inhoud.vervolgpagina h6{ font-weight: 500; font-size: 20px; padding: 40px 120px; box-sizing: border-box; background: #fff; box-shadow: 0 15px 40px rgb(228 220 208 / 70%); border-radius: 20px; margin: 40px 0; position: relative; float: left; width: 100%; text-align: center;  font-style: italic; }

#inhoud.vervolgpagina ul{ text-align: left; padding: 20px 0 20px 40px; }
#inhoud.vervolgpagina ul li{ list-style: disc;  padding: 0px 0 0px 30px;  list-style-position: outside; }
#inhoud.vervolgpagina ul li span{   }
#inhoud.vervolgpagina ul.special li span:before{ content:''; position: absolute; top: 13px; left: -45px; width: 26px; height: 26px;  background: #3c3c3b;     box-shadow: 0px 9px 20px rgba(0,84,164,0.5); }
#inhoud.vervolgpagina ul.special li span:after{ content:''; position: absolute; top: 22px; left: -37px; width: 10px; height: 8px; background: url("../img/svg-vink.svg") no-repeat; background-size: 100% auto; }

#inhoud.vervolgpagina ul li{ list-style: disc;  padding: 0px 0 0px 30px;  list-style-position: outside; }

#inhoud.vervolgpagina ol{ text-align: left; padding: 20px 0 20px 40px; }
#inhoud.vervolgpagina ol li{ list-style: decimal;  padding: 5px 0 5px 30px;  list-style-position: outside; }


#inhoud.vervolgpagina a{   text-decoration: underline; } 
#inhoud.vervolgpagina img{   max-width: 100%; height: auto; } 




#agendafilterselect { display:none; }

#agendafilterselect { display: none; margin-top: 0; }
#agendafilterselect { appearance: none;  -webkit-appearance: none;  -moz-appearance: none; }
#agendafilterselect { width: 100%; padding: 8px 15px; border-radius: 5px;  color: #2A3362;  }
#agendafilterselect {  border: 1px solid #D0D5E4; background: #fff  url("../img/svg-pijl-beneden-kleur.svg") no-repeat 97% center; background-size: 10px auto;  }


.agendalinks{ width: 350px; padding-top: 10px; }
.agendarechts{ width: calc(100% - 350px); padding-left: 60px; }
.agendafilters {  }
.agendafilter { margin-top: 10px;  border: 1px solid transparent;  border-radius: 20px; padding: 8px 20px 8px 50px; line-height: 140%; font-size: 14px;  }
.agendafilter:before { opacity: 0.4; position: absolute; top: 6px; left: 11px; width: 25px; height: 25px; border-radius: 100%; background: #ddd url("../img/svg-vink-donker.svg") no-repeat center center; background-size: auto 40%; }
.agendafilter:hover {  cursor: pointer; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); border: 1px solid transparent;  }
.agendafilter.active { font-weight: bold; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); border: 1px solid #D0D5E4; }
.agendafilter.active:before { opacity: 2;  background: #1DAE8D url("../img/svg-vink-wit.svg") no-repeat center center; background-size: auto 40%; }


#trainingen-details .trainingen-agenda{  font-size: 14px;  font-weight: 600; margin-top: 25px; padding:  10px 25px 15px; background: rgba(0,0,0,0.03);  border-radius: 10px; }

#trainingen-details .trainingen-agenda-item{  border-radius: 10px; padding: 15px 20px ; margin: 10px 0 0  0; border-top: 1px solid #ddd; line-height: 140%; color: #2A3362;  }
#trainingen-details .trainingen-agenda-item:first-of-type{ border-top: 1px solid transparent; }

#trainingen-details .trainingen-agenda-item-datum{ color: #333C6E; line-height: 140%; text-transform: uppercase; text-align: center; width: 120px; padding: 20px 15px 17px; background: #fff; border-radius: 10px; box-shadow: 0 3px 5px rgba(0,0,0,0.1); border: 2px solid #D0D5E4; }
#trainingen-details .trainingen-agenda-item-datum:before{ position: absolute; top: -10px; left: 50%; width: 20px; height: 20px; margin-left: -10px; background: url("../img/svg-date-unselected-1.svg") no-repeat center center; background-size: contain; }
#trainingen-details .trainingen-agenda-item-datum .dagnaam{ font-size: 12px; font-weight: 800; padding-bottom: 3px; border-bottom: 1px solid #D0D5E4;   }
#trainingen-details .trainingen-agenda-item-datum .dag{ font-size: 20px; font-weight: 800; margin-top: 7px;  }
#trainingen-details .trainingen-agenda-item-datum .maand{ font-size: 16px; }
#trainingen-details .trainingen-agenda-item-datum .jaar{ font-size: 10px; }


#trainingen-details .trainingen-agenda-item-info{ width: calc(100% - 120px); padding: 0 0 0 30px;  }
#trainingen-details .trainingen-agenda-item-locatie{  font-size: 18px; padding: 2px 0 10px; font-weight: 800; }
#trainingen-details .trainingen-agenda-item-link{ margin-top: 8px;  }
#trainingen-details .trainingen-agenda-item-link span{ border-radius: 30px; font-size: 12px; font-weight: bold; color: #fff; text-transform: uppercase; background: #999; background: radial-gradient(#ddd, #ccc);    padding: 0 15px;    height: 30px;    line-height: 31px;    position: relative;    float: right;   }
#trainingen-details .trainingen-agenda-item-opmerking{  line-height: 130%; font-size: 12px; font-style: italic; opacity: 0.5; margin-top: -4px; font-weight: 500;  }

#trainingen-details .trainingen-agenda-item:hover{ background: #fff;  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); border-top: 1px solid transparent;  }
#trainingen-details .trainingen-agenda-item:hover .trainingen-agenda-item-link span{  background: #333C6E; background: #1DAE8D;    }

#trainingen-details .trainingen-agenda-item.singleline .trainingen-agenda-item-datum{ margin-top: 4px; }
#trainingen-details .trainingen-agenda-item.singleline .trainingen-agenda-item-locatie{ margin-top: 4px; }

#trainingen-details .trainingen-agenda-item-meerinfo { margin-top: 8px; text-decoration: none!important; clear:left; border-radius: 30px; font-size: 12px; font-weight: bold; color: #fff; text-transform: uppercase; background: #999; background: radial-gradient(#ddd, #ccc);    padding: 0 15px;    height: 30px;    line-height: 31px;    }

#trainingen-details .trainingen-agenda-item-aanmelden {  margin-top: 8px; text-decoration: none!important; margin-left: 10px; border-radius: 30px; font-size: 12px; font-weight: bold; color: #fff; text-transform: uppercase; background: #999; background: radial-gradient(#ddd, #ccc);    padding: 0 15px;    height: 30px;    line-height: 31px;     }
#trainingen-details .trainingen-agenda-item-meerinfo:hover{ background: #1DAE8D; }
#trainingen-details .trainingen-agenda-item-aanmelden:hover{ background: #333C6E; }

#trainingen-details .trainingen-agenda-item.kort .trainingen-agenda-item-aanmelden{ margin-lefT: 0; background: #1DAE8D;}
#trainingen-details .trainingen-agenda-item.kort .trainingen-agenda-item-aanmelden:hover{ margin-lefT: 0; background: #333C6E;  }


#trainingen-details .trainingen-agenda-item.kort .trainingen-agenda-item-info{ padding-right: 60px;   }
#trainingen-details .trainingen-agenda-item.kort .trainingen-agenda-item-meerinfo span { display:none;  }
#trainingen-details .trainingen-agenda-item.kort .trainingen-agenda-item-meerinfo  {   position: absolute; right: 0px; top: 50%; margin-top: -15px;  }
#trainingen-details .trainingen-agenda-item.kort .trainingen-agenda-item-meerinfo:before { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url("../img/svg-pijl-rechts-wit.svg") no-repeat 12px center; background-size: auto 40%;}
#trainingen-details .trainingen-agenda-item.kort:hover .trainingen-agenda-item-meerinfo  {  background: #1DAE8D; }

#trainingen-details .trainingen-agenda-item.verberg{ display:none; }
#trainingen-details.agendarechts .trainingen-agenda-item { border-top:none; }


#contact { margin-top: 0; }

#afsluiting.detail  { padding: 50px 0 270px; }
#afsluiting.detail .bg { bottom: auto; top: 325px; }
#afsluiting.detail #naarboven {  bottom: 223px;    }




@media screen and (min-width: 1320px) and (max-width: 1660px) {
	
}


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

	#kruimelpad .centered{	width: 960px; }
	#inhoud.vervolgpagina .centered{	width: 960px; }
	#inhoud.vervolgpagina .centered .container.pagina{	 }
	
	#paginaquote {  top: -110px;  margin-right: -440px; width: 320px; height: 140px;  font-size: 16px;  }
	#inhoud .bg:before { left: 200px; }
	
	.agendalinks{ width: 250px; }
	.agendarechts{ width: calc(100% - 250px); padding-left: 50px; }
	
}

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


	#kruimelpad { margin-top: 90px; }
	#kruimelpad .centered{	width: 680px; }


	#inhoud .bg:before { left: 100px; }
	
	#inhoud.vervolgpagina .centered{	width: 680px; }
	#inhoud.vervolgpagina .centered .container.pagina{	 }
	
	#inhoud.vervolgpagina .centered .container.pagina.nocta{  min-height: 370px;  }
	
	#inhoud.vervolgpagina h1{ font-size: 28px; }
	#inhoud.vervolgpagina h2{ font-size: 20px;  padding: 10px 0 20px; }
	#inhoud.vervolgpagina h1 + h2{  padding: 0px 0 20px; }
	#inhoud.vervolgpagina h3{ font-size: 18px;  }
	#inhoud.vervolgpagina h4{ font-size: 16px; }
	

	.agendalinks{ width: 100%; }
	.agendafilters { display:none; }
	.agendafilter { width: auto; }
	.agendarechts{ width: 100%; padding-left: 0px; }
	#agendafilterselect { display:block; }
	
	#trainingen-details .trainingen-agenda { padding: 10px 15px 15px; }
}

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

	#inhoud .bg:before {  }
	
	#kruimelpad { margin: 0 0 0px; padding: 20px 0 30px 0; }
	#kruimelpad:before { display: none; }
	#kruimelpad .volgons { display: none;  }
	#kruimelpad .content { padding: 10px 0 20px 0; }
	#kruimelpad .centered{	width: 300px; }
	
	#inhoud.vervolgpagina .centered{	width: 300px; }
	#inhoud.vervolgpagina .centered .container.pagina{	 }
	
	#inhoud.vervolgpagina .centered .container.pagina.nocta{  min-height: auto;  }
	
	#inhoud.vervolgpagina h1{ font-size: 22px; padding: 0 0 10px;   }
	#inhoud.vervolgpagina h2{ font-size: 16px;  padding: 20px 0 10px; }
	#inhoud.vervolgpagina h3{ font-size: 18px;  padding: 20px 0 10px; }
	#inhoud.vervolgpagina h4{ font-size: 14px;  }
	#inhoud.vervolgpagina h6 { font-size: 16px; padding: 30px 30px; }

	#inhoud.vervolgpagina ul {padding: 20px 0 20px 30px; }	
	#inhoud.vervolgpagina ul li { padding: 0 0 0 10px; }

	#inhoud.vervolgpagina img{   max-width: 100%!important; } 
	
	.agendalinks{ width: 100%; }
	.agendafilters { display:none; }
	.agendafilter { width: auto; }
	.agendarechts{ width: 100%; padding-left: 0px; }
	#agendafilterselect { display:block; }	
	
	#trainingen-details .trainingen-agenda-item { padding: 12px 20px 32px 20px; }
	#trainingen-details .trainingen-agenda-item-datum{ width: 100%;   }
	#trainingen-details .trainingen-agenda-item-info{ padding: 20px 0 0; width: 100%; text-align: center;   }
	#trainingen-details .trainingen-agenda-item-link { width: 100%;  margin-top: 15px; }
	#trainingen-details .trainingen-agenda-item-link span{ width: 70%; margin-left: 7.5%; float: left;  }
	
	#trainingen-details .trainingen-agenda-item-meerinfo { margin-top: 18px; width: 70%; margin-lefT: 15%;    }
	#trainingen-details .trainingen-agenda-item-aanmelden {  margin-top: 8px; width: 70%; margin-lefT: 15%;   background: #1DAE8D;  }
	#trainingen-details .trainingen-agenda-item-meerinfo:hover{ background: #333C6E; }
	#trainingen-details .trainingen-agenda-item-aanmelden:hover{ background: #333C6E; }
	
	#trainingen-details .trainingen-agenda-item.kort .trainingen-agenda-item-aanmelden{ width: 100%; }
	#trainingen-details .trainingen-agenda-item.kort .trainingen-agenda-item-info { padding-right: 0; }
	#trainingen-details .trainingen-agenda-item.kort .trainingen-agenda-item-meerinfo { width: 100%; position: relative; float: left; top: auto; right: auto; left: 0; margin: 10px 0 0; height: auto; }
	#trainingen-details .trainingen-agenda-item.kort .trainingen-agenda-item-meerinfo span{ display: block; }
	#trainingen-details .trainingen-agenda-item.kort .trainingen-agenda-item-meerinfo:hover{ background: #333C6E!important; }
	
	#trainingen-details .trainingen-agenda-item.kort:hover .trainingen-agenda-item-meerinfo {  background: radial-gradient(#ddd, #ccc); }
	
}