@charset "utf-8";

.gridContainer {width:100%;margin:auto;background-color: #FFF;}
#header {float:left;}
.img-l {width:100%;float:left; height:auto;}
.reg-icon {position: relative; margin-top: 54%;left:0.5%;pointer-events: none;color:#006;width:5%;}
.wrapper-topnav {clear:both;width:100%;}
.topnav {overflow: hidden;background-color: #FFF;}
.topnav a {display: block; color: black; text-align: center; text-decoration: none;}
.active {background-color: #FFF; color: black;}
.dropdown {float: left;overflow: hidden;}
.dropdown .dropbtn {border: none; outline: none; background-color: inherit; font-family: inherit;}
.dropdown-content {display: none; position: absolute; background-color: rgba(0,153,255,1);min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);z-index: 10;color:white;}
.dropdown-content a {color: white; padding-left:50px; display: block; text-align: left;}
.topnav a:hover, .dropdown:hover .dropbtn {background-color: #009; color: white;}
.dropdown-content a:hover {background-color: #03C;color: white;}
.dropdown:hover .dropdown-content {display: block;}
.topnav .icon {display: none; cursor:pointer;}
 
.wrapper-kw{float:left;width:100%;clear:both;}
#klantwaardering {float:left;clear:both;width:49%;background-color: #36C;text-align:left;font-size:11px; color:#FFF;padding-left:1%}
#reviews {clear:none;width:49%;overflow:hidden;background-color: #36C;text-align:right;font-size:11px; color:#FFF;padding-right:1%}

@media only screen and (max-width: 600px) {
#tel{float:left; width: 40%;text-align:right;font-size:6px;visibility:hidden;}
#header {clear: both;width:60%;background-color:#FFF;}
.topnav {width:40%;padding-top:22%;}
.topnav a, .dropdown .dropbtn {display: none;}
.topnav .icon {display: block; float: right; color: black; font-size:36px;padding:1px 8px;border: groove #09F;border-radius:12px;background-color:white;}
.topnav.responsive {position: absolute;background-color:rgba(0,153,255,1);top:22%; width:100%;z-index:999;padding-top:0.5%;}
.topnav.responsive .icon {position: absolute;right: 0;top: 0;color:black;background-color:white;border-style:groove;border-color:black;margin-top:0%;padding:4px 10px;font-size:30px;}
.topnav.responsive a {float: none;display: block;text-align: left;padding:10px 4px;color:white;}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {display: block;width: 100%;text-align: left;padding:10px 4px;color:white;}
}

@media only screen and (min-width: 600px) and (max-width: 768px) {
#tel{float:left; width: 75%;text-align:right;font-size:14px;visibility:hidden;}
#header {clear: both;width:25%;float: left;}
.topnav {width:75%;}
.topnav a {float: left; padding: 10px 10px; font-size:14px;}
.active {background-color: #FFF; color: black;}
.dropdown .dropbtn {font-size: 14px; padding: 10px 10px;padding-left: 20px;}
.dropdown-content a {float: none; padding: 10px 16px;}
}

@media only screen and (min-width: 768px) and (max-width: 992px) {
#tel{float:left; width: 65%;text-align:right;font-size:2px;visibility:hidden;margin-top:4%;}
#header {clear: both;width:35%;float: left;}
.topnav {width:65%;padding-top:12%;}
.topnav a {float: left; padding: 12px 14px; font-size:24px;}
.topnav .icon {display: block; color: black; font-size:28px;padding:2px 8px;border: groove #09F;border-radius:12px;background-color:white;margin-right: 2%; margin-bottom: 2%;float: right;}
.dropdown .dropbtn {font-size: 18px; padding: 12px 14px;}
.dropdown-content a {float: none; padding: 12px 14px 12px 20px;}
.topnav a, .dropdown .dropbtn {display: none;}
.topnav a.icon {float: right;display: block; font-size:36px;background-color: white;color:black;}
.topnav.responsive {position: absolute;background-color:rgba(0,153,255,1);top:16%;left:0; width:100%;z-index:5;padding-top:0.5%;}
.topnav.responsive .icon {position: absolute;right: 0;top: 0;color:black;background-color:white;border-style: groove;border-color:black;font-size:36px;}
.topnav.responsive a {float: none;display: block;text-align: left;color:white;font-size:18px;}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {display: block;width: 100%; text-align: left;color:white;}
}

@media only screen and (min-width: 992px){
#tel{float:left; width: 77%;text-align:right;font-size:14px; visibility:hidden;margin-top:4%;}
#header {clear: both;width:20%;float: left;margin-left:3%;}
.topnav {width:77%;}
.topnav a {float: left; padding: 14px 40px; font-size:18px;}
.dropdown .dropbtn {font-size: 18px;padding: 14px 50px;}
.dropdown-content a {float: none;color: white;  padding: 14px 16px 14px 50px;}

#klantwaardering {font-size:12px;}
#reviews {font-size:12px}
}