body {
  height:100%;
  padding: 0px;
  margin:0px;
  font-family: "Trebuchet MS";
  line-height: 1.2em;/*was 18 px de em_ext. is gemakkelijk te schalen. Is de ruimte tussen de regels*/
  font-size:100%;
  background:#009900 ;/*achtergrondkleur hele scherm */
}


#header {
	
	background:#E3F473;
	background-image: url(../img/welkom/head.gif) ;
	background-repeat:no-repeat;
	background-position:right center;
	height: auto;
	width: 100%;/* was 1280px maar door de 100% vult het de hele schermbreedte*/
	margin: 0;
	padding: 0;
  
}
#container #header img {
	text-align: center;
	width:100%;/* zorgt dat het plaatje 100% is */
	max-width:407px;/* zorgt dat het plaatje niet groter wordt dan 407px */
	height:auto; /* past automatisch de hoogte aan de breedte aan */
 }

#footer {
        left:0px;
        bottom: 0;
        width: 100%;      
}

#content{ /* dit is de hoofddiv van de content*/
max-width:1900px; /*max-width:1900px. Dit zorgt dat de inhoud gelijk blijft op 1900px maar inklapt als dat nodig is.*/
margin: 20px auto;/*auto eigenschap zorgt dat de margin links en rechts gecentreerd wordt.*/
}

#zijkant{
	float: left; /* zorgt dat de tekst naast de zijkant komt te staan */
	width: 155px;/*was 768px maar door dit te vervangen naar 60% gaat dit mee scalen */
	background: #E3F473;
	text-align: center;
	padding: 20px 0;	
}

.main{ 
	background:#009900 ;
	font-size:24px;
	line-height: 1.2em;
	float: left;
	margin: 0 0 20px 1%;
	padding: 0;
	width: 80%; 
}

.main .textArea { 
	padding: 20px;
	color: #fff;
	font-size: 100%;
	text-align:center;
}
.main .textArea h1 {
	font-size: x-large;
	
}
.main .textArea p {
	font-size: large;
	color: #FFFFFF;
}


.passend {
	
	max-width:100%;/* zorgt dat het plaatje niet groter wordt dan 300px */		 
} 



.img {
	width:100%;/* zorgt dat het plaatje 100% is */
	
	height:auto; /* past automatisch de hoogte aan de breedte aan */
	float:left;
	margin: 0 10px 10px 0;
}




/*==============TABLET==LAYOUT==========*/
/* MEDIA QUERIES */
@media screen and (max-width: 768px) { /*2*/
.main{ /* main verplaatsen voor de tablet*/
	margin: 0 0 20px 1%;
	clear:both;
	width:98%; 
	}

#zijkant { /* zorgt dat de zijkant zich aanpast voor de tablet */
	clear:both;
	width:100%;	
	}
	
#zijkant .textArea { /*reset de marges voor de tabletmarges */
	margin:0;
	}	 

}

/*==============Telefoon==LAYOUT==========*/
@media screen and (max-width: 480px) { /*3*/

body{
		font-size: 110%; /* dit zorgt ervoor dat de tekst op de telefoon goed leesbaar is en niet te klein */
	}
.main{ /* main uitbreiden */
		margin: 0; /* bij de telefoon hebben we geen marges nodig dus wordt dit 0 */
		width:100%;   
	}
	


}

/*-- foto vergroten --*/
 article, aside, figure, footer, header, hgroup, menu, nav, section  { 
display : block; 
} 

 .textArea p img  { 
text-align : left; 
margin-right : 5px; 
}
 
 .textArea p img:hover  { 
height : 20%; 
width : 20%; 
filter : blur(0); 
border : #000000 solid 1px; 
box-shadow : 10px 10px 10px rgb(0 0 0 / 0.5); 
transform : scale(1.75); 
transform-origin : top right; 
}