@charset "utf-8";
/* CSS Document voor website bakkerij Arickx */

html{
	background-color:#e2e2e2;
	width: 100%;
	}
	
body{
	margin-left: auto;
	margin-right: auto;
	/*max-width: 1300px;*/
	width: 100%;
	}
	
	
main{
	overflow: auto; 
	width:70%;
	padding-bottom:55px; /*hoogte footer*/
	margin-right:auto;
	margin-left:auto;
	margin-top:50px;
	}
	
#foto_onderdeel{
	text-align:right;
	padding-bottom:15%;
	}

	
section{
	float:left;
	padding-right:10px;
	padding-left:10px;
	}
	
#foto_onderdeel{
	width:65%
	}
	
#onderverdelingen{
	width:25%;
	}
	
section img{
	width:70%;
	height:auto;
	}

	

/*------------------------------HEADER--------------------*/
	
nav ul li{
	display:inline;
	padding-right:40px;
	}

nav ul{
	margin-top:100px;
	}
	
ul li a{
	font-family: 'Montserrat Alternates', sans-serif;
	text-decoration:none;
	color: black;
	}
	
header{
	text-align: center;
	padding: 10px;
	}

	
/*--------------------------STIJLEN------------------------*/


section a{
	font-family:'Source Sans Pro', sans-serif;
	font-size:14px;
	font-weight:200;
	padding-bottom:15px;
	font-weight:400;
	letter-spacing:1;
	text-decoration:none;
	color:black;
	line-height:30px;
	}
	
h1{
	font-family:'Source Sans Pro', sans-serif;
	letter-spacing:1;
	font-weight:200;
	font-size:20px;
	padding-bottom:10px;
	}

h6{
	font-family: 'Source Sans Pro', sans-serif;
	font-size:14px;
}



/*------------------------------FOOTER--------------------*/
footer {
   position:fixed;
   bottom:0;
   width:100%;
   height:55px;   /* Hoogte footer: aanpassen in stijl main bij wijziging hoogte */
   background-color:#8e8e8e;
   text-align:center;
   color:#e2e2e2;
	}


	
footer h6{
	padding-top:10px;
	}
/*------------------------------RESPONSIVE ON DEVICES--------------------*/	
	




/* Laptops/Pc */


@media (max-width: 2000px){

	
	#phone_footer{
		display:none;
		}
}	
	
/* Small devices (tablets, 768px and up) */
@media (max-width: 960px) { 

	#phone_footer{ /*phone-footer onzichtbaar*/
	display:none;
	}

	section img{
	width:100%;
	height:auto;
	}

}

/* iphone */
@media (max-width: 400px) { 


	footer{ /*andere footer onzichtbaar*/
	display:none;
	}

	#phone_footer{ /*enkel zichtbaar bij smartphones*/
	display:block;
	text-align: center;
	font-size:12px;
	line-height:15px;
	margin-bottom:20px;
	}
	
	nav ul li{ /*menu onder elkaar*/
	display:block;
	}
	
	section{
	width:100%;
	padding-left:0%;
	padding-right:0%;
	}
	
	section img{
	width:100%;
	}
	
	#onderverdelingen{
	text-align:center;
	width:100%;
	}
	
	#foto_onderdeel{
	width:100%;
	}


}