html,body,div,span,applet,object,iframe,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,label,legend,p,blockquote,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}body{line-height:1;color:black;background:white;}:focus{outline:0;}table{border-collapse:collapse;border-spacing:0;}caption,th,td{text-align:left;font-weight:normal;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul{list-style:none;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}blockquote:before,blockquote:after,q:before,q:after{content:"";}blockquote,q{quotes:"" "";}abbr,acronym{border:0;}
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

body {font: normal 1.125em/1.3333em Georgia, serif; margin: 0 auto;}
header {padding:0.5em; max-width: 70em; margin: 0 auto;}
#logoimg {float:left; max-width: 36%; margin: 4px;}
#tagline {
	float:left;
	line-height:1.2em;
	padding: 8px 0.5em 0;
	color:#039;
	text-align:left;
	max-width:60%;
}
#tagline h1 {
	font-size:20px;
	font-weight:bold;
}


#welkommen {
	clear:both;
	position: relative;
	text-align:center;
	z-index: 22;
}

#w2 {
	position: absolute;
	bottom: 15%;
	right: 0;
	left: 0;
	margin: auto;
	z-index: 82;
}
#w2 h2 {color:#fff; text-shadow: 1px 1px 1px #000; font-size:2em; padding-bottom: 20px;}

section#main {clear:both; padding:0.5em 0.5em 1em;}
section#main h1 {}
section#main h2 {}

h1, h2, h3, h4, h5 {padding: 10px 2% 4px 0; line-height:1.333em;}
h1 {font-size: 2em; color:#50654d; }
h2 {font-size: 1.75em; color:#00958d;}
h3 {font-size: 1.5em; color:#c16a24;}
h4 {font-size: 1.25em; color:#9db428;}

/*
h1#secCat {font-size:2.25em; color:#bd7068; margin:0; padding:0; line-height:1em;}
h1#secCat img {width:140px; height:auto; float:left; margin-right: 10px;}
*/
h2#secHead {padding: 4px 8px; background: #39687b; text-align:center; color:#fff; font-weight:bold; font-size:1.125em; margin: 0; line-height:1em; clear:both;}


h1#secCat {
	background-image:url(images/programs_bw.jpg);
	background-repeat:none;
	background-size: cover;
	padding:3em 0.25em 0.25em;
	color:#fff;
	text-shadow: 2px 2px 2px rgba(0,0,0,0.9);
	}
h1#secCat img {height:100%; width:auto; float:left; margin:0; padding:0;}


section#main p {margin: 0.75em 0;}
section#main ul {margin:1em 5%; list-style:square;}
section#main ul li {padding-bottom: 0.5em; font-size:0.925em;}
a, a:visited {color:#087;}
a:hover {color:#c0661c; text-decoration:none;}

.rfloat50 {float:right; margin: 0.5em 0 1em 1em; max-width:48%;}

#dropCont {
  max-width:340px; margin-top:8px;}
#dropBttn {
  position: relative;
  background: #4b869e;
  font-size: 1em;
  color: #fff;
  border-radius: 6px 6px 0 0;
font-size: 1em;
  padding: 1vmin 1.5vmin;
}
#dropBttn::after {
  content: "";
  width: 0;
  height: 0;
  display: block;
  position: absolute;
  z-index: 10;
  border: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  margin-left: -10px;
  left: 90%;
  border-top: 10px solid #4b869e;
  bottom: -10px;
}
#dropBttn a {color: #fff; text-decoration:none;}
#dropBttn:hover {background: #39687b;}
#dropBttn:hover::after {
border-top: 10px solid #39687b;
}
.dropList {
	display: none;
	position: absolute;
	z-index: 11;
	transition: all 0.2s ease-in-out;
}
.dropList a {
color: #fff;
max-width:340px;
text-decoration:none;
background-color: #566464;
padding: 10px;
display: block;
border-bottom: 1px solid #9bbea4;
}
.dropList a:hover {background-color: #b69726;}
#dropCont:hover > .dropList {display: block;}


#icons {text-align:center; max-width:900px; margin: 1em auto;}
#icons a {text-decoration:none; color:#000;}
#icons h3 {font-size:1.5em; padding: 0 0.5em 18px; font-weight:bold;}
#icons h4 {font-size:1.25em; font-weight:bold; padding-bottom: 8px;}
#icons h3, #icons h4 { color:#50654d; }
#icons div {display:inline-block; margin:0.5em 1.5em; max-width:230px; vertical-align:top; font-size:0.75em; line-height:1.25em;}
#icons img {margin-bottom: 14px;}

.ggreen {color:#a1c0a5;}
.lyellow {color:#dec536;}
.dyellow {color:#c2a53d;}
.teal {color:#07978c;}
.red {color:#a40;}
.ctr {text-align:center;}
img {max-width:100%; height:auto;}
b, strong {font-weight:bold;}
i, em {font-style:oblique;}

footer {
clear:both;
text-align:center;
font-size:16px;
color:#fff;
background: #566464;
padding:1em;
}

footer h1 {font-size:18px; font-weight:bold; margin-bottom:0.5em; color:#fff;}
footer a, footer a:visited {color:#fff;}
footer a:hover {color:#dbc231;}
a.arrow:before {content:"\25BA"; margin-right:9px; color:#fc3;}

#footer-menu-wrapper {
	display: flex;
	flex-wrap: wrap;
	}

.footer-menu-item {
	min-width: 0px;
	margin-bottom: 2em;
	text-align:left;
	flex: 1 1 auto;
	-moz-box-flex: 1;
	}
.footer-menu-item h2 {
	color: #fff;
	font-family: "Khand";
	font-size: 20px;
	font-weight: bold;
	border-bottom: 1px solid #00958d;
	padding-bottom: 0.25em;
	margin-bottom: 0.25em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding-left: 10px;
	padding-right: 10px;
	}
ul.footer-menu-ul {margin:0.5em 1em;}
ul.footer-menu-ul li a {
	font-size: 15px;
	color: #fff;
	text-decoration: none;
	padding: 0.25em 0px;
	display: block;
	}
ul.footer-menu-ul li a:hover {color: #f92;}


  #ssearch {
  float:right;
  }

  #how {float:right;width: 320px;}

  @media screen and (max-width: 40em) {
  	#ssearch {font-size:0.8em;}
  }


@media screen and (max-width: 1320px) {
	#logoimg {max-width: 36%;}
	#tagline h1 {font-size:16px;}
}

@media screen and (max-width: 760px) {
	h1#secCat {font-size:1.66666em;}
	#tagline {display:none;}
	#how {width: 250px;}
}

@media screen and (max-width: 660px) {
	#w2 h2 {font-size:1.5em;}
	h2 {font-size:1.25em;}
	#logoimg {margin: 6px auto; width:326px;}
	.mobnot {display:none;}
	.mob {display:block;}
}@media screen and (max-width: 420px) {
	#w2 h2 {font-size:0.75em;}
}

/* -----------------MAIN MENU----------------------------- */


#toggle-menu, 
#cbp-hrmenu label.drop-icon {display: none;}

#cbp-hrmenu input[type="checkbox"], 
#cbp-hrmenu ul span.drop-icon {display: none;}


.cbp-hrmenu {
	width: 100%;
	position:relative;
	z-index:999;
	clear:both;
	margin-top: 2em;
	border-bottom: 4px solid #39687b;
	text-align:center;
}

/* general ul style */
.cbp-hrmenu ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

/* first level ul style */
.cbp-hrmenu > ul,
.cbp-hrmenu .cbp-hrsub-inner {
	width: 90%;
	max-width: 70em;
	margin: 0 auto;
	padding: 0 1.875em;
}

.cbp-hrmenu > ul > li { display: inline-block; text-align:left; }
.cbp-hrmenu ul li ul li ul {margin-left:2em; list-style:disc;}	/*--------------- list list -------------------*/
/*--------------- .cbp-hrmenu ul li ul li {padding-bottom:1em;}	li padding -------------------*/
.cbp-hrmenu > ul > li > a {
	font-weight: 700;
	padding: 1em 2em;
	color: #087;
	display: inline-block;
}
.cbp-hrmenu > ul > li > a:hover { color: #c16a24;  background:#eee; }
.cbp-hrmenu > ul > li.cbp-hropen a { color: #555; }
.cbp-hrmenu > ul > li.cbp-hropen a:hover { color: #c16a24;background:#ddd;}

/* cbp-hrsub */
.cbp-hrmenu .cbp-hrsub {
	display: none;
	position: absolute;
	background: #f0f0f0;
	width: 100%;
	left: 0;
}
.cbp-hropen .cbp-hrsub {
	display: block;
	padding-top: 1em;
	padding-bottom: 1.5em;
}
.cbp-hrmenu .cbp-hrsub-inner > div {
	width: 33%;
	float: left;
	padding: 0 0.5em 0;
}
.cbp-hrmenu .cbp-hrsub-inner:before,
.cbp-hrmenu .cbp-hrsub-inner:after {
	content: " ";
	display: table;
}
.cbp-hrmenu .cbp-hrsub-inner:after { clear: both; }
.cbp-hrmenu .cbp-hrsub-inner > div a { line-height: 1.25em; display:block; padding:8px 4px; }

.cbp-hrsub h4 {
	color: #c16a24;
	padding: 0.5em 0 0.6em;
	margin: 0;
	font-size: 1.3333em;
	font-weight: 300;
}

/* media queries */

@media screen and (max-width: 74em) { 
	.cbp-hrmenu { font-size: 80%; }
}

@media screen and (max-width: 60em) { 
	h4.singular {display:none;}
	.cbp-hrmenu {
		font-size: 120%;
		border: none;
	}
	.cbp-hrmenu > ul,
	.cbp-hrmenu .cbp-hrsub-inner {
		width: 100%;
		padding: 0;
	}
	.cbp-hrmenu .cbp-hrsub-inner {
		padding: 0 2em;
		font-size: 75%;
	}
	.cbp-hrmenu > ul > li {
		display: block;
		border-bottom: 4px solid #47a3da;
	}
	.cbp-hrmenu > ul > li > a { 
		display: block;
		padding: 1em;
	}
	.cbp-hrmenu .cbp-hrsub {  position: relative; }
	.cbp-hrsub h4 { padding-top: 0.6em; }
}

@media screen and (max-width: 50em) {
	.cbp-hrmenu .cbp-hrsub-inner > div {
		width: 100%;
		float: none;
		padding: 0 1em;
	}


	#cbp-hrmenu .main-menu {
		display: none;
	}

	#tm:checked + .main-menu {
	  display: block;
	}

	#cbp-hrmenu input[type="checkbox"], 
	#cbp-hrmenu ul span.drop-icon {
	  display: none;
	}

	/*--------------------UNIDODE DOWN Pointer--------------*/

	#toggle-menu span.drop-icon:after, 
	#cbp-hrmenu ul span.drop-icon:after,
	#cbp-hrmenu li label.drop-icon:after {content:'\25BC'; color:#fff; font-size:1em; line-height:2em;}


	/*--------------------UNIDODE DOWN pointer--------------*/

	#cbp-hrmenu li, 
	#toggle-menu, 
	#cbp-hrmenu .cbp-hrsub {
	  border-style: solid;
	  border-color: rgba(0, 0, 0, .05);
	}

	#cbp-hrmenu li, 
	#toggle-menu {
	  border-width: 0 0 1px;
	}

	#cbp-hrmenu .cbp-hrsub {
	  background-color: #eee;
	  border-width: 1px 1px 0;
	  margin: 0;
	}

	#cbp-hrmenu .cbp-hrsub li:last-child {
	  border-width: 0;
	}

	#cbp-hrmenu li, 
	#toggle-menu, 
	#cbp-hrmenu a {
	  position: relative;
	  display: block;
	  color: #444;
	}

	#toggle-menu {
	  text-align:center;
	}

	#toggle-menu, 
	#cbp-hrmenu a {
	  padding: 0.75em 1em;
	  text-decoration:none;
	  background-color: #f0f0f0;
	}
	#toggle-menu:hover {background-color: #666; color:#fff;}

	#cbp-hrmenu a {
	  transition: all .125s ease-in-out;
	  -webkit-transition: all .125s ease-in-out;
	}

	#cbp-hrmenu a:hover {
	  background-color: #666;
	  color: #fff;
	}

	#cbp-hrmenu .cbp-hrsub {
	  display: none;
	}

	#cbp-hrmenu input[type="checkbox"]:checked + .cbp-hrsub {
	  display: block;
	}

	#cbp-hrmenu .cbp-hrsub a:hover {
	  color: #fff;
	}

	
	#toggle-menu .drop-icon, 
	#cbp-hrmenu li label.drop-icon {
	  position: absolute;
	  display:block;
	  cursor:pointer;
	  right: 0;
	  top: 0;
	}

	label#toggle-menu::before {
		margin-right: 0.5em;
		content: "\2630";
		font-size: 1.125em;
	}

	#cbp-hrmenu label.drop-icon, #toggle-menu span.drop-icon {
	  padding: 0.5em 1em;
	  font-size: 0.75em;
	  text-align: center;
	  background-color: rgba(0, 0, 0, .275);
	  text-shadow: 0 0 0 transparent;
	  color: #640;
	}

	#cbp-hrmenu label.drop-icon:hover, #toggle-menu span.drop-icon:hover { background-color: rgba(0, 0, 0, .5);}

}