* { 
 margin: 1; 
 padding: 0; 
}
 
body {  
 font-family: Garamond, "sans-serif";
 color: black;
 font-size: 16px;
}

#websitevak {
 width: 100%;
 margin: 0em auto;
 background-color: white;
}

#balkboven { 
 margin: 2em;
 height: 2em;
 background-color: white;
 }

#balkboven p { 
 width: 70%;
 margin-left: auto;
 margin-right: auto;
 font-family: Garamond, sans-serif;
 font-size: 100%;
 font-weight: bold;
 line-height: 150%;
 }

@media screen and (max-width: 1440px) {
	#balkboven p { width: 80%; font-size: 100%; }
}

@media screen and (max-width: 1000px) {
	#balkboven p { width: 95%; font-size: 100%; }
}

@media screen and (max-width: 800px) {
	#balkboven p { width: 100%; font-size: 120%; }
}

  
@media screen and (max-width: 800px) {
	#balkboven p a { width: 100%; font-size: 100%; text-align: center; border: 0; border-bottom: 4px solid white; padding: 1em 0.5em; }
}

#middenstuk {
 width: 70%;
 margin: 0 auto;
} 
 
@media screen and (max-width: 1440px) {
	#middenstuk { width: 80%; }
}

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

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

#menu { 
 width: 15%; 
 float: left; 
 margin-top: 4.5em;
 margin-right: 2%;
 margin-left: 1%;
 }

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

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

#hoofdmenu > li {

 position: relative;
}

#hoofdmenu > li > a {
 display: block;
 width: 95%;
 background-color: white;
 color: midnightblue;
 font-weight: bold;
 font-size: 1.1em;
 padding: 1em 0.5em 1em 0.5em;
 text-decoration: none;
 text-align: center;
 border-bottom: 2px solid midnightblue;
}

@media screen and (max-width: 800px) {
	#hoofdmenu > li > a { width: 100%; border-bottom: 3px dotted white;  background-color: midnightblue; color: white; text-align: left; }
}

#hoofdmenu > li > a:hover {
 color: midnightblue;
 }

@media screen and (max-width: 800px) {
	#hoofdmenu > li > a:hover { color: white; background-color: midnightblue; }
}

#hoofdmenu > li:hover ul {
 display: none;
 position: absolute;
 top: -3px;
 left: 95%;
 z-index: 2;
}

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



.submenu > ol >  a {
 display: circle;
 background-color: midnightblue;
 color: white;
 width: 7em;
 padding: 1em 0.75em 1em 0.25em;
 text-decoration: none;
 border-top: 3px dotted white;
}

@media screen and (max-width: 800px) 	{ 
	.submenu > ul > li > a { background-color: midnightblue; color: white; min-width: 92%; }
	}

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

#middenstuk {
 margin-top: 3.5em;
}

@media screen and (max-width: 800px) 	{ 
	#middenstuk { margin-top: 0.3em; }
} 
#hoofdvak { 
 width: 80%;
 float: left;
 border-left: 2px solid midnightblue;
 margin-top: 2em;
 margin-bottom: 2em;
 padding-left: 1%;
 }

@media screen and (max-width: 800px) 	{ 
	#hoofdvak { width: 97%; padding: 0 1.5%; border-left: 0; }
}

#tekstvak { 
 }

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

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

 #tekstvak ol li {
 list-style-type: circle;
 font-size:1em;
 position: relative;
 left: 2em;
 padding-right: 2em;
 }

@media screen and (max-width: 800px) 	{ 
	#tekstvak ul li, #tekstvak ol li { position: static; left: 0; padding-right: 0; }
}
 
#tekstvak h1 { 
 font-family: Garamond, sans-serif;
 font-size: 1.5em;
 font-weight: bold;
 color: midnightblue;
 margin-bottom: 1.2em;
 }

 
#tekstvak h2 { 
 font-family: Garamond, sans-serif;
 font-size: 1.1em;
 color: midnightblue;
 padding-top: 0.25em;
 margin-bottom: 0.25em;
 }

#tekstvak img { 
 max-width: 95%;
 }

s#extravak {
 width: 80%;
 margin: 0 auto;
 padding: 0.5em;
 border: 3px ridge midnightblue;
 }

@media screen and (max-width: 800px) 	{ 
	#extravak { width: 98%; padding: 0.5em 0; }
}

#inhoudextravak {
 margin: 0 auto;
 text-align: center;
 }
  
#inhoudextravak > h3 {
 font-family: Garamond, sans-serif;
 font-size: 1em;
 color: midnightblue;
 font-variant: small-caps;
 padding-bottom: 0.6em;
 }
 
#inhoudextravak > p {
 font-size: 0.8em;
 color: black;
 padding: 0.2em 0.2em 0.6em 0.2em;
 }

#balkbeneden { 
 clear: both;
 width: 100%;
 background-color: midnightblue;
 }

#inhoudbalkbeneden {
 width: 100%;
 padding: 2em 0;
 text-align: center;
}

#inhoudbalkbeneden span {
 display: inline-block;
 padding: 0.5em 2em;
 font-size: .9em;
 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: none;
}

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

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