/* Reset */
div, h1, h2, h3, p, form, label,input, img{
 margin: 0;
 padding: 0;
}
a,
img{
 outline: none;
 border: none;
}
div#header h1{
 display: none;
}
/* TEXT */
h2 {
 font-size: 18px;
 font-weight: bold;
 width: 100%;
}
h3{
 float: left;
 font-size: 18px;
 font-weight: bold;
 color: #8cc515;
 width: 100%;
}
p {
 font-size: 11px;
 line-height: 20px;
 padding-top: 20px;
}
a {
 text-decoration: none;
 color: #8CC618;
}
a:hover {
 color: green;
}
/* CSS */
body {
 margin: 0;
 padding: 0;
 font-family: Trebuchet MS,Helvetica,Jamrul,sans-serif;
 color: #000;
 background:#fff;
}
div#total {
 float: left;
 text-align:left;
 width: 900px;
 border-right: 1px solid #ccc;
}
div#header{
 float: left;
 border: none;
 width: 887px;
 height: 298px;
}
/* Zwarte tekstveld */
div.quote {
 background: url(images/logo.gif) no-repeat;
 width: 109px;
 height: 152px;
 position: absolute;
 left: 770px;
  top: 10px;
 z-index: 2;
}
div#header div.quote p.introductie {
 font-size: 18px;
 color: #fff;
 font-weight: bold;
 padding: 15px 10px 10px 15px;
}
/**/
.menuresponsive { display:none; }
/* MENU  */
div#menu {
 font-size: 14px;
 color: #fff;
 font-weight: bold;
 //background: #8A2F1D;
 margin-left: 210px;
 margin-top: 167px;
 height: 50px;
 position: absolute;
 top: 68px;
 left: 90px;
}
div#menu ul{
 list-style: none;
 margin:0;
 float: right;
 padding: 28px 0px 0px 4px;
}
div#menu ul li {
 background: url(images/knoop.gif) no-repeat;
 float: left;
 width: 78px;
 height: 26px;
 padding: 8px 2px 0px 2px;
 text-align: center;
}
div#menu ul li a {
 color: #fff;
 text-decoration: none;
}
body.home div#menu ul li.home,
body.diensten div#menu ul li.diensten, 
body.particulier div#menu ul li.particulier, 
body.zakelijk div#menu ul li.zakelijk,
body.gallery div#menu ul li.gallery,
body.projecten div#menu ul li.projecten, 
body.contact div#menu ul li.contact,
body.bodyactus div#menu ul li.bodyactus {
 background: url(images/knoop_actief.gif) no-repeat;
}

body.home div#menu ul li.home a,
body.diensten div#menu ul li.diensten a, 
body.particulier div#menu ul li.particulier a, 
body.zakelijk div#menu ul li.zakelijk a, 
body.gallery div#menu ul li.gallery a, 
body.projecten div#menu ul li.projecten a, 
body.contact div#menu ul li.contact a,
body.bodyactus div#menu ul li.bodyactus a {
  color: #000000;
}

/* Einde menu */
/* CONTENT */
div#center {
 float: left;
 width: 890px;
 height: 100%;
}
div#center div#totem {
 width: 252px;
 height: 360px;
 margin: 20px 0px 0px 0px;
 float: left;
}
div#totem h3 {
 padding-left: 20px;
}
div#totem p {
 padding-left: 20px;
}
div#projecten {
 margin: 0;
 padding: 0;
}
/* INTER */
div#inter {
 width: 580px;
 height: 100%;
 float: right;
 margin: 20px 20px 0px 0px;
}
div#inter ul li {
 font-size: 11px;
 line-height: 20px;
}
/* FOOTER */
div#footer {
 width: 886px;
 float: left;
 margin-top: 20px;
 padding-top: 20px;
}
div#footer div.logo {
  border-bottom: 1px solid #ccc;
  height: 155px;
  text-align: right;
}
div#footer div.contactgegevens {
  background: #ccc;
  width: 886px;
  height: 27px;
}

div#footer div.contactgegevens p {
 padding: 5px 0 0 20px;
 float: left;
 font-weight: bold;
 color: #000;
}
div#footer div.contactgegevens p.rechts {
 float: right;
 padding: 5px 20px 0 0;
}
div#footer div.adres {
 width: 100%;
 float:left;
 height: 140px;
 background: #8a2f1d;
}
div#footer div.adres p {
 color: #fff;
 line-height: 0;
 padding-left: 20px;
}
div#footer div#laatstenieuws {
 background: #8a2f1d;
 width: 420px;
 float: right;
 height: 140px;
 color: #fff;
}
div#footer div#laatstenieuws p {
 padding: 10px 10px 0 0;
}
div#footer div#laatstenieuws span.datum {
 text-align: left;
 float: left;
}
div#footer div#laatstenieuws span.intro {
 text-align: right;
 float: right;
 display: block;
 width: 180px;
}
div#footer div#laatstenieuws a {
 text-align: right;
}
div.white p {
 color: green;
 float: right;
 padding: 10px;
}

.recensie{
 display: none; 
 background-image:url('spreekwolk.png');
 background-repeat:no-repeat;
 width: 202px;
 height: 167px;
 padding-top: 1px;
  margin-left: 20px;
}

.recensie-tekst {
 overflow: hidden;
 margin: 10px;
 width: 178px;
 height: 128px;
 font-size: small;
}

.contactgegevens { position:relative; }
.contactgegevens iframe { position: absolute; right: -125px; } 

/*---------------------------------------*/

@media (max-width: 680px)
{
  html, body { height:100%; }
  #total { min-height:100%; position:relative; }
  body.home div#menu ul li.home, body.diensten div#menu ul li.diensten, body.particulier div#menu ul li.particulier, body.zakelijk div#menu ul li.zakelijk, body.projecten div#menu ul li.projecten, body.contact div#menu ul li.contact, body.bodyactus div#menu ul li.bodyactus { background-image: none; background-color: #ffffff; }
  p, div#inter ul li { font-size: 13px; }
  div#total, div#header, div#menu ul, div#center, div#footer, div#footer div.contactgegevens { width: 100%; }
  div#total { min-height: 100%; border:0; }
  div#header { height: 106px; margin-bottom:15px; }
  div.quote { left: 5px; }
  .menuresponsive { display:block; width: 100%; height: 45px; background-color:#8dc818; position:absolute; top:0; z-index:1; }
  .menuresponsive a { display:block; margin:10px 15px 0 0; float:right; }
  div#menu { width: 100%; margin: 0; top: 45px; left: 0; background-color:#8dc818; height: 320px; box-shadow: 2px 0px 7px #888888; }
  div#menu ul li { float:none; width: 100%; padding:12px 0 4px 0; }
  div#center { padding-bottom: 235px; }
  div#inter { width: calc(100% - 20px); margin: 10px; }
  #banner-fade, #banner-fade ul, #banner-fade ul li { width: 100% !important; height: 106px !important; }
  #banner-fade ul li img { width: 100%; height: auto; }
 div#footer { position:absolute; bottom: 0; height:205px; }
  div#menu, div#center div#totem, #project tr td:nth-child(2), #project tr td:nth-child(4) { display: none; }
  body form div.entry input, body form div.entry textarea { width: calc(100% - 10px); padding:5px; }
  body #inter form { margin:20px 0px 10px 0; }
  .footer { padding: 0; font-size: 11px; }
  body form div.submit { margin:0; }
  body form div.submit input { width: 45%; margin:0 2% 0 0; }
  #project td { padding: 16px; }
  div#footer { margin-top: 0; padding-top:0; }
  div#footer div.contactgegevens p { display:none; }
  div#footer div.contactgegevens iframe { margin-left: 18px; left:0; max-width: 90%; }
}