html {
 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}
body {
 background:  #FFF url(images/achtergrond.jpg) no-repeat center fixed;
 background-size: cover;   /* zorgt dat de achtergrond in alle browsergrootes het geheel bedekt (responsive) */
 font-size: 64%; /* regelt het formaat van alle letters, 64% geeft een scherpe onderlijn voor linken */
 display:flex;
 justify-content: center; /* elementen in de browserscherm worden horizontaal uitgelijnd,idem onder voor diverse browsers */
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
}

/* container is witte ondergrondvlak met schaduwrand, maak de background-color zwart om te zien waar het precies zit */
.container {
 background-color:#FFF;
 max-width:1000px;
 padding:30px;  /*duwt de elementen 30px naar binnen van de kader van container vlak */
 transform: translateY(4em); /* duwt de container zoveel em naar beneden vanaf de bovenrand van de browser */
 box-shadow: 0 0 10px black;
}

/* bovenste deel */
.top {
 background-color:#FFF;
 text-align:left;
 height:auto;
 padding:0; 
}

a:link {
 text-decoration: none;
}
/* donkere verticale balk links */
.aside {
 background-color:#112327;
 font-size:1.1em;
 color: #FFF;
}
/* donkere horizontale balk onder voor mobiel (voor pc onzichtbaar) */
.asidemob {
 background-color:#112327;
 font-size:1.2em;
 color: #FFF;
 padding: 0px;
 display:none;
}
/* deel "Wij zijn gespeciali...." opmaak */ 
.article {
 background-color:#FFF;
 font-size:1.2em;
 padding: 10px;
 text-align: left;
 font-style: normal;
 font-weight: bold;
 color: #000;
}
/* section is de container voor het onderdeel met de 3 items */
.section {
 background-color:#FFF;
}
/* delen in section gedeelte */ 
.item {
 background-color:#FFF;
 padding: 8px;
 min-width: 160px;
 font-size:1.2em;
 box-shadow: 1px 1px 1px 1px #888;
}
/* onderin met copyright enz */ 
.footer {
 background-color:#FFF;
 font-size:1em;
 text-align:center;
}

/* plaatjes onderdelen */
.bannerimg {
 max-width: 100%;
 vertical-align: bottom;	/* dit sluit de ruimte die tussen gestapelde plaatjes onstaat door doctype  */
}
.actueelimg {
  max-width: 100%;
  height: auto;
  border-style: solid;
  border-width: 1px;
  border-color: #AAA;
}
.iconmob {
  width: 80px;
  height: 14px;
}
.iconimg {
  width: 20px;
  height: auto;
}
.itemimg {
  max-width: 100%;
  height: auto;
}
.redlineimg {
  width:100%;
  vertical-align: top;	/* dit sluit de ruimte die tussen gestapelde plaatjes onstaat door doctype  */
}

/* hyperlink onderdelen */
a {
 color: #000;
}
a.actueel {
 color: #FFF;
 text-decoration: none;
}
a.actueel:hover { 
 color: #112327; /*C63039*/
 background:#DDD;
 text-decoration: none;
}
a.nav:hover { 
 background-color:#FFF;
}
a.item:hover { 
 opacity: 1;
 box-shadow: 6px 6px 15px 2px #AAA;
}
a.footer {
 text-decoration: underline;
 color:#000;
}
a.footer:hover {
 color:#A00;
}
a.iconSM:hover {
  opacity: 0.8;
  filter: grayscale(40%);
}
a.iconSM {
 opacity: 1;
filter: contrast(200%);
}

/* de opmaak voor rijen en kolommen "col-" */
* { box-sizing: border-box;}
[class*="col-"] {float: left;padding: 15px;}
.col-1 {width: 18%;height:530px;} /* col-.. is kolommen opmaak */
.col-2 {width: 82%;}
.col-3 {width: 30%;height:320px;}
.col-4 {width: 1%;visibility: hidden;}
.col-5 {width: 30%;height:320px;}
.col-6 {width: 1%;visibility: hidden;}
.col-7 {width: 30%;height:320px;}
.col-8 {width: 100%;height:260px;} /* donkere horizontale balk onderin voor mobiel */
.col-9 {width: 30%;min-width:250px;padding:0;} /* adres mob */
.col-10 {width: 30%;display:flex;padding:0;float:right;} /* actueelmob img */
.col-11 {width: 30%;min-width:150px;padding:0;transform: translateY(306px)} /* adres pc */

/* ++++++++++ navigatiebalk +++++++++++++++*/

.pc {display:block;border-style:solid;border-width:1px;}/* navigatie balk voor pc */
.mob {display:none;}					/* navigatie balk voor mobiel */

.sub-menu-parent {
 position: relative;
 font-size:1.06em;
 font-family: Arial, Helvetica, sans-serif;
}
.sub-menu { 
  visibility: hidden; /* hides sub-menu */
  opacity: 0;
  position: absolute;
  top: 100%;
  left: 0;
  width: 220%;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #DDD;
  border-style: solid;
  border-width: 1px;
}
.sub-menu-parent:hover .sub-menu {
  visibility: visible; /* shows sub-menu */
  opacity: 1;
  z-index: 1;
}
/* navigatie balk opmaak */
nav { transform: translateY(-1px);}
nav a { display: block; padding: 0.4em 1.0em; text-decoration: none; font-size:1.06em; }
nav a:hover { background-color: #BBB; }
nav ul,
nav ul li { list-style-type: none; padding: 0; margin: 0;}
nav > ul { background-color: #DDD; text-align: center; }
nav > ul > li { display: inline-block; border-left: solid 1px #AAA; }
nav > ul > li:first-child { border-left: none; }
/* +++++++++++++++ einde navigatie ++++++++++++++++++++++++++++ */

.normaal {
 font-size: 10pt;
 text-align: left;
 font-style: normal;
 font-weight: normal;
 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
 color: #222222;
 background-color: transparent;}
H1 {
 font-size: 12pt;
 text-align: left;
 font-style: normal;
 font-weight: bold;
 font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
 color: #432234;
 background-color: transparent;}
H2 {
 font-size: 10pt;
 text-align: left;
 font-style: normal;
 font-weight: bold;
 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
 color: #432234;
 background-color: transparent;}
.normaalvet {
 font-size: 10pt;
 text-align: left;
 font-style: normal;
 font-weight: bold;
 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
 color: #432234;
 background-color: transparent;}
.link {
 font-size: 8pt;
 text-align: left;
 font-style: normal;
 font-weight: 700;
 line-height: 15px;
 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
 color: #000077;
 background-color: transparent;}


/* media is aansturing van pagina bij verschillende beeldscherm resoluties: 850px (tablet), 650px (tablet) en 480px(mobiel) */
@media all and (max-width: 850px) {
    body {padding:3%;}
    .aside {display:none;} 
    .asidemob {display:block;}
    .section {display:inline;}
    .container {height:1700px;transform: translateY(1em);}
    .itemimg {max-width:240px;height:auto;}
    .col-1 {width: 0%;}
    .col-2 {width: 100%;}
    .col-3 {width: 100%;}
    .col-5 {width: 100%;}
    .col-7 {width: 100%;}
    .pc {display:none;} 
    .mob {display:block;text-align:left;font-size:1.2em;border-style:solid;border-width:1px;}
}

@media all and (max-width: 650px) {
    body {font-size: 64%;margin:0px;background:#FFF;}
    .container {height:1600px;transform: translateY(0em);box-shadow:none;padding:0px;}
    .top {font-size:40px;}
    .nav {font-size:12px;}
    .section {width: 100%;}
    .article {width: 100%;}
    .item {max-width:90%;}
    .itemimg {max-width:240px;height:auto;}
    .col-4 {width: 100%;height:10px;}
    .col-6 {width: 100%;height:10px;}
}

@media all and (max-width: 480px) {
    body {padding:0px;margin:0px;}
    .container {box-shadow:none;padding:0px;}
    .section {background-color:#FFF;width:90%;margin-left:20px;}
    .bannerimg {max-width:100%;}
    .itemimg {max-width:70%;height: auto;}  
    .col-4 {width: 100%;height:10px;}
    .col-6 {width: 100%;height:10px;}
}