@import url(http://fonts.googleapis.com/css?family=Lato:400,700);
/* font-family: 'Lato', sans-serif; */
/* 
oranje: #f28d2c; 
zwart: #181717;
donkergrijs: #808180;
heeldonkergrijs: #404040;
*/

html, body { height:100%; }
body {font-family: 'Lato', sans-serif;font-weight: 400;font-size: 18px;margin: 0px;padding: 0px; overflow: hidden;overflow-y: scroll;}
a {outline: none;}
img { border:  none;}
/* algemene opzet in rijen */
.wrapper { min-height: 100%; height: auto !important; height: 100%;  margin-bottom: -170px;}
.talen {height: 11px; padding: 0px;text-align:center;width: 100%;margin-top:  5px;}
.content { background: #fff; width: 70%; margin: 0 auto;}
.kolomlinks { width: 25%;  float:  left; margin: 55px 0 0 0;  }
.kolomrechts { width: 70%;  float: left;margin: 0 0 0 5%; }

.blokken { float: left;clear: both; width: 100%;  background: #fff; display: block; position: relative; z-index: 5; border-top:  dotted 1px #ccc;padding-top: 20px;  padding-bottom: 20px; }
.bottom { clear: both; width: 100%; height: 170px;  background:#404040;  }
.copyright { clear: both; width: 100%; height: 100px;  background: #181717; }
/* top */

.top img { border: 0px; margin: 10px 0px 0px 0px; width: 30%; max-width: 300px; min-width: 200px;  }
.payoff { width: 100%; padding-right: 0px; margin-top: -38px; }
.payoffMobiel { display: none; }
.payoff ul {position: relative; z-index: 3;text-align:right;margin: 0px 20px 0px 0px; padding:0px;cursor: default;}
.payoff li, .payoffMobiel li {display: inline-block;background: #fff ; text-transform: uppercase; color:#808180; font-size: 22px; font-weight: 400; margin: 0px;}
.payoff a, .payoffMobiel a {text-transform: uppercase; color: #808180; display: block;text-decoration: none; font-size:22px; font-weight: 400;}
.payoff a:hover{ color:#808180; text-decoration: none; cursor: default;}
li.zwart, a.zwart { color: #181717; }
a:hover.zwart { color: #f28d2c; cursor: pointer; }

.fotoContainer { position: relative; width: 100%; }
.foto-overlay { position: absolute; top: 0px; left: 0px; z-index:  3; margin: 0 5%; width: 90%; }
.foto-overlay img { width: 100%; }
.foto { position: relative;top: 0px; left: 0px;  z-index:  2; margin: 0 5%; width: 90%;  }
.foto img {  width: 100%;   }
/* menu */
.menu {  position: relative;  z-index: 5;  height: 50px;padding: 0px; width: 100%; border-bottom: solid 1px #ccc; padding:0; margin: 0;  text-align:center; }
.menu ul {list-style-type: none;padding: 0;width: auto; margin: 0;}
.menu li {list-style-type: none;display: inline;padding: 0px;margin: 0;}
.menu li:first-child {padding-left: 20px;}
.menu li a {padding: 0px;margin: 0px;padding-left: 19px;padding-right: 19px;padding-top: 15px;font-weight: 400;color:  #808180;text-decoration: none;font-size: 18px; height: 36px;display:inline-block; text-transform:uppercase}
.menu li a:hover {background: #f28d2c;color: #fff;text-decoration: none;}
.menu li a#hierbenik  {background: #fff;color: #f28d2c;cursor: default; border-bottom: solid 1px #fff;}
.menu li a#hierbenik:hover {background: #fff;color: #f28d2c;cursor: default;}
/* submenu */
.submenu { width:  100%; position: relative;border-right:  solid 1px #ccc;}
.submenu ul {list-style-type: none;margin: 0;padding: 0px 10px;}
.submenu li {list-style-type: none;}
.submenu li a {text-transform:uppercase;padding: 0px; font-weight: 400;color:  #808180;text-decoration: none;font-size: 18px;line-height: 30px;}
.submenu li a:hover {color: #f28d2c;text-decoration: none;}
.submenu a#hierbenik  {color: #f28d2c;}
.submenu a#hierbenik:hover {color: #f28d2c;}
/* subsubmenu */
.submenu li li {list-style-type: disc;color:  #808180;margin-left: 50px;}
.submenu li li a {text-transform:none;padding-left: 0px;padding-right: 10px;font-weight: 400;color:  #808180;text-decoration: none;font-size: 15px;line-height: 30px;}
.submenu li li a:hover {color: #f28d2c;text-decoration: none;}

a.accordion { display: none; }
h3.accordion { display: none; }

hr { color: #fff; background-color: #fff; border-bottom: solid 1px #ccc; border-top:  none;}
/* content */
.tekst { position: relative;  z-index: 5;  float:  left;width: 100%;text-align: left; margin-bottom: 20px; }
.tekst h1 {color: #181717;font-size: 29px;text-transform: uppercase;letter-spacing: 1px;font-weight: 700; padding: 0 20px;}
.tekst h2 {color: #f28d2c;font-size: 21px;text-transform: uppercase;letter-spacing: 1px;font-weight: 700; padding: 0 20px;}
.tekst h3 {color: #f28d2c;font-size: 18px;text-transform: uppercase;letter-spacing: 1px;font-weight: 400; padding: 0 20px;}
.tekst p {line-height: 25px;color: #808180;padding: 0 20px;}
.tekst p:after { content:''; display: block; clear: both;  }
.tekst a {color: #000;text-decoration: none;}
.tekst a:hover {color: #f28d2c;text-decoration: underline;}
.tekst a img {border: 0px;}
.tekst li {line-height: 25px;color: #808180;padding: 0 20px;} 
.tekst img { margin-left:  20px; margin-right: 20px; float: right;}

.bottom .tekst {  margin-bottom: 0px;}
.bottom .tekst p { color: #fff;padding: 0 0px; font-style:normal}
.bottom .tekst img { margin-right: 20px; margin-bottom: 10px; margin-top: 4px; float: left;}
.bottom .tekst a { color: #fff; cursor: default; font-style:normal }
.copyright .tekst {width: 100%;}
.copyright .tekst p {line-height: 15px;color: #fff; padding: 0 40px 0 20px;}
.copyright .tekst p img {margin-top: -10px; margin-right:  0px;}

#menuMobielButton { display: none;}
#menuMobiel {display: none;}
.hoofdfoto_btn{position: relative;float: right;margin-top: 0;margin-right: -4px;z-index: 100}
.hoofdfoto_btn button{font-family: Calibri, Trebuchet MS, Verdana, Arial;font-size: 11px;color: #000;width: 120px;margin-right: 4px;padding: 3px;border: 1px #d5d5d5 solid;cursor: pointer;}

@media screen and (max-width: 1400px) 
{
.menu li a {padding-left: 8px;padding-right: 8px;}
}
@media screen and (max-width: 1200px) 
{
.payoff { width: 100%; padding-right: 0px; margin-top: 10px; }
}

@media screen and (max-width: 1000px) 
{
.content { width: 100%; }
}

@media screen and (max-width: 745px) 
{
.kolomlinks { width: 100%; margin: 0;}
.kolomrechts { width: 95%;  }

.foto-overlay { display: none;  }
.foto { position: relative;top: 0px; left: 0px;  z-index:  2; margin: 0%; width: 100%;  }

.payoff { display:  none; }
.payoffMobiel { display: block; text-align: right; float: right; width: 100%; clear: right; padding-top: 20px; padding-right:  20px; margin-bottom: -40px; }
.payoffMobiel a { font-size: 15px; }

.menu { display: none; }

#menuMobielButton {  display: block; width: 100%; height: 60px;background: url(../img/menu.png) no-repeat right center;cursor: pointer;  }
#menuMobiel {display: none;}

.containermenu { padding:0; margin:0;margin-bottom: 10px; }
.contentmenu {margin: 0px; width:  100%}
.contentmenu ul {list-style-type: none;margin: 0;padding: 0; border-top:  dotted 1px #ccc;}
.contentmenu li {list-style-type: none;	float: left;width: 100%;text-align:center;}
.contentmenu li a {	font-size: 25px; text-transform:uppercase; background-color: #afafaf;color:#ffffff;display:block;padding:10px 5px 10px 5px;text-decoration:none;border-bottom: dotted 1px #fff;}
.contentmenu li:last-child a {border-bottom: 0px;	}
.contentmenu li a:hover {background: #f28d2c;color: #fff; }
.contentmenu li:last-child a {border-right: none;}
.contentmenu li a#hierbenik {background: #fff;color: #f28d2c;}

/* submenu */

.submenu { position: relative;border-right:  solid 0px #ddd;;margin: 0;padding: 0; }
.submenu ul {list-style-type: none;margin: 0;padding: 0;  border-top:  dotted 1px #ddd;}
.submenu li {list-style-type: none;	float: left; width: 80%; text-align:left;}
.submenu li a {	font-size: 22px; text-transform:none; background-color: #ccc;color:#ffffff;display:block;width: 90%; margin-left: 5%; padding:10px 5px 10px 20px;text-decoration:none;border-bottom: dotted 1px #fff;}
.submenu li:last-child a {border-bottom: 0px;	}
.submenu li a:hover {background: #f28d2c;color: #fff; }
.submenu li:last-child a {border-right: none;}
.submenu li a#hierbenik {background: #ccc;color: #f28d2c;}
.submenu li ul {  margin: 0%; }
.submenu li li {list-style-type: disc;color:  #808180;}
.submenu li li a { background: #fff; font-size: 18px; text-transform:none;  padding:2px 0px;}
.submenu li li a:hover {background: #fff;color: #f28d2c; }
.submenu li li a#hierbenik {background: #fff;color: #f28d2c;}

.tekst img { max-width:100%; height: auto!important; margin: 0 0 10px 0;}

.bottom .tekst p { padding: 0 20px 0 20px; }
.bottom .tekst img { display: none; }
}