* { 
 margin: 0; 
 padding: 0; 
}
 
body {  
 font-family: verdana, "sans-serif";
 color: black;
 font-size: 1em;
 background-color: #00FFFF;
}

#websitevak {
width: 80%;
max-width: 1200px;
margin: 0 auto;
border-left: 2x solid darkorange;
border-right: 2x solid darkorange;
background-color: white;
}

@media screen and (max-width: 400px) {
	#websitevak { width: 100%; }
}

@media screen and (max-width: 800px) {
	#websitevak { width: 95%; }
}

@media screen and (min-width: 1441px) {
	#websitevak { width: 65%; }
}

#balkboven {
	width: 100%;
	position: relative;
	background-color: #FF7F00;
	overflow: hidden;
 }

#balkboven p {
	position: absolute;
	left: 0.6em;
	top: 1em;
	width: auto;
	padding-right: 1%;
	font-family: Palatino;
	font-size: 3.5em;
	font-weight: bold;
	text-align: left;
 }

 @media screen and (max-width: 800px) {
	#balkboven p { top: 1em; font-size: 2em; }
}
 
 @media screen and (max-width: 600px) {
	#balkboven p { top: 1em; font-size: 1.6em; }
}

 @media screen and (max-width: 400px) {
	#balkboven p { top: 0.5em; font-size: 1.2em; }
}

 @media screen and (max-width: 250px) {
	#balkboven p { top: 0.1em; font-size: 1em; }
}

#balkboven p a {
	color: #079BF0;
	text-decoration: none;
	width: auto;
 }
   
#fotobalkboven {
	max-width: 100%;
}

#inhoudbalkboven a {
	padding: 12px;
	float: right;
	background-color: #FF7F00;
}

#middenstuk {

}

#menu {
	width: 20%;
	float: left;
	background-color: #FCEB57;
	clear: right;
	padding-top: 1em;
 }

@media screen and (max-width: 1000px) {
	#menu  { width: 20%; float: left; }
}

@media screen and (max-width: 800px) {
	#menu  { width: 100%; float: none; padding-top: 0; }
}

#menu ul {
 list-style-type: none;
 }

#hoofdmenu > li {
 float: none;
 position: relative;
}

@media screen and (max-width: 800px) {
	#hoofdmenu > li { float: none; }
}

#hoofdmenu > li > a {
 display: block;
 color: #075A01;
 font-weight: bold;
 font-size: 1em;
 padding: 1em 1.5em 1em 1.5em;
 text-decoration: none;
 text-align: left;
}

@media screen and (max-width: 800px) {
	#hoofdmenu > li > a { display: block; border-bottom: 1px #FCEB57;  background-color: #FB6E03; color: #FCEB57; }
}

#hoofdmenu > li > a:hover {
 background-color: #152EBA; color: white;
 }

#hoofdmenu > li:hover ul {
 display: block;
 position: absolute;
 top: 0;
 left: 100%;
 z-index: 2;
}

@media screen and (max-width: 800px) {
	#hoofdmenu > li:hover ul { position: absolute; top: 0; left: 8.8em; }
}

.submenu > ul {
 display: none;
}

.submenu > ul > li > a {
 display: block;
 background-color: #079BF0;
 color: white;
 width: 7em;
 padding: 1em 0.75em 1em 0.25em;
 text-decoration: none;
}

@media screen and (max-width: 800px) 	{ 
	.submenu > ul > li > a { background-color: #41FC03; color: #FCE803; min-width: 92%; border-bottom: 1px #079BF0;}
	}

.submenu > ul > li > a:hover {
 background-color:  #FCE803;
}

@media screen and (max-width: 800px) 	{ 
	.submenu > ul > li > a:hover { color: white; background-color: #00FFFF; }
}

@media screen and (max-width: 800px) 	{ 
	.submenu > ul > li > a { background-color: white; color: #079BF0; min-width: 92%; border-bottom: 1px solid #FF8000;}
	}

.submenu > ul > li > a:hover {
 background-color: #00FFFF;
}

@media screen and (max-width: 800px) 	{ 
	.submenu > ul > li > a:hover { color: white; background-color: #00FFFF; }
}


#hoofdvak {
	width: 100%;
	background-color: #FCEB57;
	height: 100%;
	float: left;
}

@media screen and (max-width: 1000px) {
	#hoofdvak  { width: 80%; }
}

@media screen and (max-width: 800px) 	{ 
	#hoofdvak { width: 100%; float: none; }
}
	
#tekstvak {
	width: 74%;
	float: right;
	padding-top: 1.5em;
	padding-right: 1%;
	padding-left: 1%;
	background-color: #FFFBF0;
	margin-top: 0px;
	margin-right: 13px;
	margin-bottom: 13px;
	margin-left: 13px;
	clear: right;
 }

@media screen and (max-width: 1000px) {
	#tekstvak  { width: 96%; border-right: none;}
}

@media screen and (max-width: 800px) 	{ 
	#tekstvak { width: 94%; margin: 1em; border-right: none; }
}

#tekstvak p { 
 font-size: 0.9em;
 line-height: 1.3em;
 margin-bottom: 1em;
 }

#tekstvak ul, #tekstvak ol { 
 font-size: 0.95em;
 line-height: 1.3em;
 margin-bottom: 1em;
 margin-left: 2em;
 }

#tekstvak ul li, #tekstvak ol li {
 position: relative;
 left: 2em;
 padding-right: 2em;
 }

#tekstvak a, #tekstvak ol li {
 font-family: verdana, "sans-serif";
 color: black;
 font-size: 0.95em; 
 text-decoration: none;
 }
  
@media screen and (max-width: 800px) 	{ 
	#tekstvak ul li, #tekstvak ol li { position: static; left: 0; padding-right: 0; }
}

#tekstvak h1 { 
 font-family: verdana, sans-serif;
 font-size: 1.3em;
 font-weight: bold;
 color: darkslategray;
 margin-bottom: 1.2em;
 }
 
#tekstvak h2 { 
 font-family: verdana, sans-serif;
 font-size: 0.9em;
 color: #079BF0;
 padding-top: 0.25em;
 margin-bottom: 0.25em;
  }

#balkbeneden {
	clear: both;
	width: 100%;
	background-color: #FB6E03;
	text-align: left;
 }

#inhoudbalkbeneden {
	padding: 2em 0;
	text-align: left;
	background-color: #FF7F00;
	padding-left: 18px;
	padding-right: 18px;
}

@media screen and (max-width: 800px) 	{ 
	#inhoudbalkbeneden { width: 100%; float: none; }
}

#inhoudbalkbeneden span {
 display: inline-block;
 padding: 0.5em 2em;
 font-size: .8em;
 color: white;
 white-space: nowrap; 
 border-right: 1px solid white;
}

@media screen and (max-width: 800px) 	{ 
	#inhoudbalkbeneden span { width: 100%; padding: 0.5em 0em; border-right: 0; border-bottom: 1px solid white; }
}

#inhoudbalkbeneden span:last-child {
  border-right: none;
  border-bottom: #FF8000;
}

#inhoudbalkbeneden span a {
 text-decoration: none;
 color: white;
}
 
 .clearfix:after {
  content: "";
  display: table;
  clear: both;
}  

.links {
  padding: 0.4em 0.8em 0.6em 0;
  float: left;
  }
  
.rechts {
  padding: 0.4em 0 0.6em 0.8em;
  float: right;
  }
  
.gecentreerd {
 display: block;
 margin: 0 auto 1em auto;
 }
 
.socialmedia {
 border: 0;
 padding: 0.5em 0.2em;
}