body{
  width: 100%;
font-family: 'Roboto', sans-serif;
}

.kader{
  width: 70%;

  margin: auto auto 100px auto;
  font-family: 'Roboto', sans-serif;

}

.start{
  width: 100%;
}

.header{

width: 100%;
height:99%;
margin-bottom:-5px;



}

h1{
  font-weight: bold;
  font-size: 1.5em;
  color:black;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-bottom: 20px;
  text-align: center;

}

h2{
  font-weight: 700;
  font-size: 1.5em;
}

h3{
  font-weight: 400;
  font-size: 0.9em;

}

h4{
  font-weight: 300;
  font-style: italic;
font-size: 0.7em;
margin-top: 12px;
}

nav{
  width: 100%;
  font-size: 1em;
  background-color: #6bb8d3;
  padding-top: 20px;
  padding-bottom: 20px;


}

ul{
  display: flex;
  justify-content: space-around;

}

li{
  padding-top: 4px;
  display: inline;


}

a{
  color:white;
  text-decoration: none;


}

a:hover{
  background-color: #6bb8d3;
  color:white;

}

.hover{
  color:white;
  text-decoration: none;

  padding-left: 5px;
  width: auto;
}

.hover:hover{
  background-color: #6bb8d3;
  color:white;
  border-left:solid white 4px;
  padding-left: 5px;
}




.intro{
  width: 100%;

  line-height: 23px;
  margin-top: 15px;
  text-align: center;

}

.intro_b{
  width: 100%;

  line-height: 23px;
  margin-top: 15px;
  text-align: left;


}


.intro_2{

  width: 100%;
  background-color: #6bb8d3;
  padding: 30px;
  margin:auto;
  text-align: center;

}


.intro_3{
  width: 100%;
  column-count: 2;
  column-gap: 10px;
  border:solid pink 3px;
  margin-top: 15px;
  text-align: center;

}



.gegevens{
  border-left:solid #6bb8d3 8px;

  margin-top: 20px;
  margin-bottom: 20px;
  width: 100%;
  text-align: left;


}

.links{
  width: 46%;
  float: left;
  border-left:solid #6bb8d3 8px;
  padding-left: 10px;
}

.iconen{
  width: 100%;


  margin-top: 30px;

}

.klein{
  width: 10%;
}

.overzicht_projecten{
  width: 100%;
  column-count: 2;
  column-gap: 50px;



}



.geheel , .geheel_span{
  background-color: #6bb8d3;
  margin-bottom: 50px;

}

.geheel_span{
column-span: all;
}

.zin{

  width: 100%;
  font-size: 1.2em;

  padding-top:15px;
  padding-bottom:15px;
  text-align: center;
  margin-top: 10px;
}

.zin2{
  border:solid #6bb8d3 4px;
  line-height: 30px;
}
.prijs{
  color: #6bb8d3;
  font-weight: 400;
  margin-top: 15px;
  float: right;
  font-size: 1.2em;
}
span{
  color: white;
  font-weight: 400;
}

.titel{
    font-weight: 600;
    color:#6bb8d3;
    font-size: 1.2em;
}
.bold{
  font-weight: 600;

  margin-bottom: 10px;
  padding-top: 10px;
  padding-bottom: 10px;

}
img{
  width: 100%;


}

#logo{
  width: 15%;
}



#kaart{
  width: 100%;
  margin: auto;
}

.back{
  font-size: 0.7em;
  float:left;

  color:black;
  margin-bottom: 70px;
background-color: #6bb8d3;

padding: 10px;
color white;
}

footer{
  position: fixed;
  left:0;
  bottom:0;
  margin-top: 20px;
  padding-top: 10px;
  padding-bottom: 10px;

  width: 100%;
  background-color: lightgrey;
  text-align: center;
  font-size: 0.4em;
}






.topnav {

  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;

  text-align: center;

  text-decoration: none;

}




/* Dropdown container - needed to position the dropdown content */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
  font-size: 1em;
  border: none;
  outline: none;
  color: white;

  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Style the links inside the dropdown */
.dropdown-content a {
  float: none;
  color: #6bb8d3;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {

  color: white;


}

/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #6bb8d3;
  color: white;


}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
  display: block;
}





@media only screen and (max-width: 800px){
  body{
width: 100%;


 }

 .overzicht_projecten{
   width: 100%;
   column-count: 1;
   column-gap: 50px;



 }

 nav{
   width: 100%;
   font-size: 1.4em;
   background-color: #6bb8d3;
   padding-top: 30px;
   padding-bottom: 30px;


 }

 .links{
   width: 100%;
   float: center;
   border-left:solid #6bb8d3 8px;
   padding-left: 20px;
 }

 }