*{margin: 0px; padding: 0px;}
html{position: relative; width: 100%; height: 100%;}
body{position: relative; width: 100%; height: 100%;}
.floatclear{position: relative;clear:both;}
.spacer{position: relative; width: 100%; height: 40px; float: left;}
.floatleft{position: relative;
text-align: center;}
#sitenaam{position: relative;  width: 100%; height: auto; top: 124px; text-align: center;}

/*menu*/
.knoprood{position: relative; background: #21468B;  padding: 10px 10px 10px 10px; border: 0px; margin: 20px; height: 40px; color: #FFFFFF;}

.knopgroen{position: relative; background: #35cf08;  padding: 10px 10px 10px 10px; border: 0px; margin: 20px; height: 40px; color: #ffffff; font-size: 16px;}

#wrappercontent{position: relative; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; width: 90%; height: auto; margin-right: auto; margin-left: auto; top: 108px;}

.streepgeel {position: relative; width: 100%; background: #FFD700; height: 1px; margin: 20px 0px 20px 0px; float: left;}

/*menu in plaatje boven aan pagina, voor pagina delen*/

.blokknop{position: relative; float: left; width: auto ; height: 35px; background: #fcfcfc; margin: 20px; bottom: -50px; padding: 10px 20px 0px 20px; color: #555; font-family: "Oswald"; border-left: 4px solid #8c8d7c;}

/*plaats een image in de div*/
.fullimagebox{position: relative; width: 100%; height: 100%; background-size: cover; background-repeat:no-repeat; background-size:cover; background-position:center; float: left; margin: 0px; padding: 0px;}
.fullimagebox img{position: relative; max-width: 100%; margin: 0px; padding: 0px; float: left;}

/*media query voor: linker balk 240px de rechter 80*/
@media screen and (min-width: 100px) {
/*3 of 2 kolomen, spacer is voor 3 kolomen op kleinere formaten is hij hidden en worden het 3 50% blokken*/
.h33-100{position: relative; width: 100%; float: left;}
.h33-33-50{position: relative; width: 50%; float: left;}
.h50-50-100{position: relative; width: 50%; float: left;}
.h33-50{position: relative; width: 50%; float: left;}
.h33-100{position: relative; width: 100%; float: left;}
.h50-100{position: relative; width: 100%; float: left;}
.h66-100{position: relative; width: 100%; float: left;}
/*voorpagina tegels*/
.tegelhulslinks{position: relative; width: 100%; height: auto; float: left; margin: 20px 0px 20px 0px;}
.tegelhulsmidden{position: relative; width: 100%; height: auto;  float: left;  margin: 20px 0px 20px 0px ;}
.tegelhulsrechts{position: relative; width: 100%; height: auto;  float: right;  margin: 20px 0px 20px 0px;}
/*voor als je tegel icoontje aan de zijkanten hebt*/
.middentegelt{position: relative; width: 100%; float: left; text-align: center; top: -30px}
/*achtegrond voor tegels*/
.bgwit{position: relative; width: 100%; height: auto; float: left; background: #fcfcfc; padding: 10px 0px 10px }
/*tegeltje decoratie code*/
.lb{position: absolute; width: 10%; float: left; top: -30px; left: 0px; } 
.lb img{position: relative; max-width: 100%;}
.rb{position: absolute; width: 10%; float: right; top: -30px; right: 0px;}
.rb img{position: relative; max-width: 100%;}
.lo{position: absolute; width: 10%; float: left; bottom: 5px; left: 0px;} 
.lo img{position: relative; max-width: 100%;}
.ro{position: absolute; width: 10%; float: right; bottom: 5px; right: 0px;}
.ro img{position: relative; max-width: 100%;}
}

/*media query voor: linker balk 768px de rechter 192*/
@media screen and (min-width: 768px) {
/*3 of 2 kolomen, spacer is voor 3 kolomen op kleinere formaten is hij hidden en worden het 3 50% blokken*/
.h33-100{position: relative; width: 100%; float: left;}
.h33-33-50{position: relative; width: 50%; float: left;}
.h50-50-100{position: relative; width: 50%; float: left;}
.h33-50{position: relative; width: 50%; float: left;}
.h33-100{position: relative; width: 100%; float: left;}
.h50-100{position: relative; width: 100%; float: left;}
.h66-100{position: relative; width: 100%; float: left;}
/*voorpagina tegels*/
.tegelhulslinks{position: relative; width: 47%; height: auto; float: left; margin: 20px 1,5% 20px 0px;}
.tegelhulsmidden{position: relative; width: 47%; height: auto;  float: right;  margin: 20px 0% 20px 1,5%; }
.tegelhulsrechts{position: relative; width: 47%; height: auto;  float: right;  margin: 20px 0px 20px 1,5%;}
/*voor als je tegel icoontje aan de zijkanten hebt*/
.middentegelt{position: relative; width: 100%; float: left; text-align: center;  top: -30px;}
/*achtegrond voor tegels*/
.bgwit{position: relative; width: 100%; height: auto; float: left; background: #fcfcfc; padding: 15px 0px 15px}
/*tegeltje decoratie code*/
.lb{position: absolute; width: 10%; float: left; top: -30px; left: 0px; } 
.lb img{position: relative; max-width: 100%;}
.rb{position: absolute; width: 10%; float: right; top: -30px; right: 0px;}
.rb img{position: relative; max-width: 100%;}
.lo{position: absolute; width: 10%; float: left; bottom: 10px; left: 0px;} 
.lo img{position: relative; max-width: 100%;}
.ro{position: absolute; width: 10%; float: right; bottom: 10px; right: 0px;}
.ro img{position: relative; max-width: 100%;}
}

/*media query voor: linker balk 900px de rechter 300*/
@media screen and (min-width: 1024px) {
/*3 of 2 kolomen, spacer is voor 3 kolomen op kleinere formaten is hij hidden en worden het 3 40% blokken*/
.h33-100{position: relative; width: 33%; float: left;}
.h33-33-50{position: relative; width: 50%; float: left;}
.h50-50-100{position: relative; width: 50%; float: left;}
.h33-50{position: relative; width: 33%; float: left;}
.h33-100{position: relative; width: 33%; float: left;}
.h50-100{position: relative; width: 50%; float: left;}
.h66-100{position: relative; width: 66%; float: left;}
/*voorpagina tegels*/
.tegelhulslinks{position: relative; width: 47%; height: auto; float: left; margin: 20px 1,5% 20px 0px;}
.tegelhulsmidden{position: relative; width: 47%; height: auto;  float: right;  margin: 20px 0% 20px 1,5%;}
.tegelhulsrechts{position: relative; width: 47%; height: auto;  float: right;  margin: 20px 0px 20px 1,5%;}
/*voor als je tegel icoontje aan de zijkanten hebt*/
.middentegelt{position: relative; width: 100%; float: left; text-align: center;  top: -30px;}
/*achtegrond voor tegels*/
.bgwit{position: relative; width: 100%; height: auto; float: left; background: #fcfcfc; padding: 20px 0px 20px}
/*tegeltje decoratie code*/
.lb{position: absolute; width: 10%; float: left; top: -40px; left: 0px; } 
.lb img{position: relative; max-width: 100%;}
.rb{position: absolute; width: 10%; float: right; top: -40px; right: 0px;}
.rb img{position: relative; max-width: 100%;}
.lo{position: absolute; width: 10%; float: left; bottom: 10px; left: 0px;} 
.lo img{position: relative; max-width: 100%;}
.ro{position: absolute; width: 10%; float: right; bottom: 10px; right: 0px;}
.ro img{position: relative; max-width: 100%;}
}

/*media query voor: linker balk 900px de rechter 300*/
@media screen and (min-width: 1200px) {
/*3 of 2 kolomen, spacer is voor 3 kolomen op kleinere formaten is hij hidden en worden het 3 50% blokken*/
.h33-100{position: relative; width: 33%; float: left;}
.h33-33-50{position: relative; width: 33%; float: left;}
.h50-50-100{position: relative; width: 50%; float: left;}
.h33-50{position: relative; width: 33%; float: left;}
.h33-100{position: relative; width: 33%; float: left;}
.h50-100{position: relative; width: 50%; float: left;}
.h66-100{position: relative; width: 66%; float: left;}
/*voorpagina tegels*/
.tegelhulslinks{position: relative; width: 30%; height: auto; float: left; margin: 20px 0px 20px 0px;}
.tegelhulsmidden{position: relative; width: 30%; height: auto;  float: left;  margin: 20px 5% 20px 5%;}
.tegelhulsrechts{position: relative; width: 30%; height: auto;  float: right;  margin: 20px 0px 20px 0px;}
/*voor als je tegel icoontje aan de zijkanten hebt*/
.middentegelt{position: absolute; width: 100%; float: left; text-align: center; top: -80px;}
/*achtegrond voor tegels*/
.bgwit{position: relative; width: 100%; height: auto; float: left; background: #fcfcfc; padding: 70px 0px 70px 0px;}
/*tegeltje decoratie code*/
.lb{position: absolute; width: 10%; float: left; top: -110px; left: 0px; } 
.lb img{position: relative; max-width: 100%;}
.rb{position: absolute; width: 10%; float: right; top: -110px; right: 0px;}
.rb img{position: relative; max-width: 100%;}
.lo{position: absolute; width: 10%; float: left; bottom: 0px; left: 0px;} 
.lo img{position: relative; max-width: 100%;}
.ro{position: absolute; width: 10%; float: right; bottom: 0px; right: 0px;}
.ro img{position: relative; max-width: 100%;}
}



/*100% height achtergronden, deze pakken een heel scherm aan grote*/
.bggimage3{position: fixed; width:100%; background-size: cover; padding: 250px 0px 50px 0px; height: 100%; background-position: center center; background-image: url("../images/donkergroen-achtergrond.jpg"); float: left; z-index: -4px}

.huls100{position: relative; width: 100%; float: left;}
/*links*/
.links15{position: relative; width: 30%; float: left;}
.links30{position: relative; width: 30%; float: left;}
.links33{position: relative; width: 33%; float: left;}
.links50{position: relative; width: 50%; float: left;}
.links70{position: relative; width: 70%; float: left;}
.links85{position: relative; width: 85%; float: left;}
/*rechts*/
.rechtss15{position: relative; width: 15%; float: right;}
.rechtss30{position: relative; width: 30%; float: right;}
.rechtss33{position: relative; width: 33%; float: right;}
.rechtss50{position: relative; width: 50%; float: right;}
.rechtss70{position: relative; width: 70%; float: right;}
.rechtss85{position: relative; width: 85%; float: right;}
/*midden*/
.midden80{position: relative; width: 80%; margin-left: auto; margin-right: auto;}

.hulshoogte100{position: relative; height: 100%; width: 100%;}
.hulshoogte50{position: relative; height: 50%; width: 100%;}

/*PLAATJES EN FOTO*/
.plaatje4breed{position: relative; width: 23%; height: auto; float: left; margin: 0% 1% 0% 1%; }
.plaatje4breed img{position: relative; max-width: 100%;}

/*footer*/
.footericoon{position: relative; width: 30%; margin-left: 35%; margin-right: 35%;}
.footericoon img {position: relative; width: 100%;}
.footeritem a {position: relative; float: left; color: #FFD700; margin: 0px 25px 20px 0px;}

.button {background-color: #FFD700; color: black; font-weight: bold; padding: 15px 32px; text-align: center; box-shadow: 3px 3px #21468B; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius: 25px;}
.button:hover {background-color: #800020; color: #FFFFFF;}
.button:active {background-color: #ffd700; box-shadow: 0 5px #666; transform: translateY(4px);}

 /* Nieuws */
/* Float four columns side by side */
.column {
  float: left;
  width: 45%;
  padding: 0 9px;}

/* Remove extra left and right margins, due to padding in columns */
.row {margin: 0 -5px;}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Style the counter cards */
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* this adds the "card" effect */
  border-radius: 10px 50px;
  padding: 17px;
  text-align: center;
  background-color: #d1ebd7;
}

/* Responsive columns - one column layout (vertical) on small screens */
@media screen and (max-width: 600px) {
  .column {
    width: 90%;
    display: block;
    margin-bottom: 20px;
  }
}