@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');




*{font-family: 'Roboto';}


header{text-align: center;
margin:0 auto;
width:90%}

header:after {
    content: "";
    display: block;
    height: 50px;
    background-image: url(header_lijn.png);
    background-repeat: no-repeat;
    background-position: center bottom;
}

header img{width:45%;}

#wrapper {
 /* Fallback for <IE9 and other older browsers */
background: url(buis1.png) 0 0 no-repeat;

/* Multi-background supporting browsers */
background:
   url(buis1.png) 0 0 no-repeat,
   url(waterkraan.png) 49.7% 42% no-repeat,
    url(buis_midden.png) 60% 60% no-repeat,
     url(duurzaam.png) 87% 84% no-repeat,
   url(buis_onder.png) 15% 88% no-repeat;


}


.content{width:90%;
    margin:0 auto;
margin-bottom: 120px;
min-height:55em}


#intro_gegevens{text-align: center;
    width:80%;
    margin:0 auto;
margin-top:80px;
margin-bottom:50px}



/*  SECTIONS  */
.diensten {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col_diensten {
	display: block;
	float:left;
	margin: 1% 0 1% 5%;
       text-align: center;
    background-color:#8fc6e5;
     text-transform: uppercase;
 
}
.col_diensten:first-child { margin-left: 0; }

/*  GROUPING  */
.diensten:before,
.diensten:after { content:""; display:table; }
.diensten:after { clear:both;}
.diensten { zoom:1; /* For IE 6/7 */ }
/*  GRID OF TWO  */
.diensten_span_2_of_2 {
	width: 100%;
}
.diensten_span_1_of_2 {
	width: 47.5%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
	.col_diensten { 
		margin: 1% 0 1% 0%;
	}
}

@media only screen and (max-width: 480px) {
	.diensten_span_2_of_2, .diensten_span_1_of_2 { width: 100%; }
}





/*---------------------------------------- diensten 2 kolommen -------------------------*/

/*  SECTIONS  */
.diensten2 {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col_diensten2 {
	display: block;
	float:left;
	margin: 1% 0 1% 5%;
    text-align: center;
     background-color:#8fc6e5;
     text-transform: uppercase
}
.col_diensten2:first-child { margin-left: 0; }

/*  GROUPING  */
.diensten2:before,
.diensten2:after { content:""; display:table; }
.diensten2:after { clear:both;}
.diensten2 { zoom:1; /* For IE 6/7 */ }
/*  GRID OF TWO  */
.diensten2_span_2_of_2 {
	width: 100%;
}
.diensten2_span_1_of_2 {
	width: 47.5%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
	.col_diensten2 { 
		margin: 1% 0 1% 0%;
	}
}

@media only screen and (max-width: 480px) {
	.diensten2_span_2_of_2, .diensten2_span_1_of_2 { width: 100%; }
}



/*---------------------------- duurzame energie ------------------------------*/

/*  SECTIONS  */
.duurzaam {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col_duurzaam {
	display: block;
	float:left;
	margin: 1% 0 1% 5%;
    text-align: center;
     text-transform: uppercase;
    background-color: #a3bf5c;
    margin-top:10em
}
.col_duurzaam:first-child { margin-left: 0; }

/*  GROUPING  */
.duurzaam:before,
.duurzaam:after { content:""; display:table; }
.duurzaam:after { clear:both;}
.duurzaam { zoom:1; /* For IE 6/7 */ }
/*  GRID OF TWO  */
.duurzaam_span_2_of_2 {
	width: 100%;
}
.duurzaam_span_1_of_2 {
	width: 47.5%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
	.col_duurzaam { 
		margin: 1% 0 1% 0%;
	}
}

@media only screen and (max-width: 480px) {
	.duurzaam_span_2_of_2, .duurzaam_span_1_of_2 { width: 100%; }
}



/*--------------------------------- responsive duurzame energie---------------------*/

/*  SECTIONS  */
.energie {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col_energie {
	display: block;
	float:left;
	margin: 1% 0 1% 5%;
      text-transform: uppercase;
    background-color: #a3bf5c;
    margin-top:10em;
    text-align: center
}
.col_energie:first-child { margin-left: 0; }

/*  GROUPING  */
.energie:before,
.energie:after { content:""; display:table; }
.energie:after { clear:both;}
.energie { zoom:1; /* For IE 6/7 */ }
/*  GRID OF TWO  */
.energie_span_2_of_2 {
	width: 100%;
}
.energie_span_1_of_2 {
	width: 47.5%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
	.col_energie { 
		margin: 1% 0 1% 0%;
	}
}

@media only screen and (max-width: 480px) {
	.energie_span_2_of_2, .energie_span_1_of_2 { width: 100%; }
}



/*----------------------------------- footer -----------------------------------*/

footer{background-color:#8fc6e5;
min-height:120px;
    color:white;
    text-transform: uppercase
}

/*  SECTIONS  */
.footer {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col_footer {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
    text-align: center
}

.col_footer p, .col_footer img{padding:20px 0}
.col_footer:first-child { margin-left: 0; }

/*  GROUPING  */
.footer:before,
.footer:after { content:""; display:table; }
.footer:after { clear:both;}
.footer { zoom:1; /* For IE 6/7 */ }
/*  GRID OF THREE  */
.footer_span_3_of_3 { width: 100%; }
.footer_span_2_of_3 { width: 66.13%; }
.footer_span_1_of_3 { width: 32.26%; }

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
	.col_footer {  margin: 1% 0 1% 0%; }
	.footer_span_3_of_3, .footer_span_2_of_3, .footer_span_1_of_3 { width: 100%; }
}

@media only screen and (max-width:2000px) and (min-width:800px){
    
    .col_energie{display:none!important;}}

@media only screen and (max-width:800px) {
    .col_diensten, .col_diensten2, .col_footer, .col_energie {width:100%;
    margin-left:0}
    
    header{text-align: center;
margin:0 auto;
width:90%;
    margin-top:20px}
    
    .col_energie {margin-top:10px;}
    
    .col_duurzaam, .col_energie:first-child{display: none;}

.content{width:90%;
margin-bottom:80px}
    
    header img{width:70%;}

#wrapper{
  background: url(white.png) 0 0 no-repeat;


}}