@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;
	}
	
section{
	width:21%;
	float:left;
	padding-bottom:35px;
	padding-top:35px;
	padding-left:2%;
	padding-right:2%;
	min-height:260px;
	}
	
article{
	border-bottom:solid;
	border-color:white;
	height:30px;
	}
	
/*----------------NIET BESCHIKBAAR ZETTEN-------------------*/	
#nietbeschikbaar{
	filter: grayscale(100%);
	}	
	
/*------------------------------CLASS OM BLACK&WHITE TE MAKEN--------------------*/
	
#nietbeschikbaar {
	filter: grayscale(100%);
	opacity:0.5;
}

	

/*------------------------------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------------------------*/

h1{
	font-family: 'Montserrat Alternates', sans-serif;
	font-size:20px;
	}
	
p{
	color:black;
	font-size:13px;
	font-family: 'Source Sans Pro', sans-serif;
	font-weight:200;
	line-height:16px;
	}
h2{
	font-family: 'Source Sans Pro', sans-serif;
	font-size:20px;
	font-weight:600;
	letter-spacing:2;
	color:white;
	}
	
h3{
	font-family: 'Montserrat Alternates', sans-serif;
	font-size:14px;
	line-height:35px;
	}
	
h6{
	font-family: 'Source Sans Pro', sans-serif;
	font-size:14px;
}

main article a{
	font-family: 'Source Sans Pro', sans-serif;
	color:#8e8e8e;
	font-style:italic;
	text-decoration:none;
	display:inline;
	float:right;
	}
	
main article h2{
	display:inline;
	}


/*------------------------------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;
	}

	
#subcat{
	font-size:12px;
	color:#4f4d4d;
	}
	
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{
	width:46%;
	}

}

/* 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;
	}
	
	article{
		border:0;
		}
	
	section{
	width:100%;
	padding-left:0%;
	padding-right:0%;
	}
	
	main article h2{
	display:block;
	padding-bottom:10px;
	}
	
	main article a{
	display:block;
	padding-top:10px;
	padding-bottom:10px;
	}

}