@charset "UTF-8";

article {
	width: 100%;
	min-width: 320px;	
}

div {
	float: left;
	line-height: 0;
	width: 100%;
}

img {
	width: 100%;
}


/*MEDIA QUERIES*/

@media (max-width: 320px){
	body{
		background-color: #513932;
	}
	
	img{
		margin-bottom: 7%;
	}
	
	article{
		margin-top:  7%;
	}
}

@media (min-width: 321px) and (max-width: 500px){
	div{
		width: 50%;
	}
}

@media (min-width: 501px) and (max-width: 600px){
	
	div{
		width: 33%;
	}
}

@media (min-width: 601px) and (max-width: 700px){
	
	div{
		width: 25%;
	}
}

@media (min-width: 701px) and (max-width: 800px){
	
	div{
		width: 20%;
	}
}

@media (min-width: 801px) and (max-width: 900px){
	
	div{
		width: 16.666%;
	}
}

@media (min-width: 901px) and (max-width: 1000px){
	
	div{
		width: 14.2875%;
	}
}

@media (min-width: 1001px) and (max-width: 1100px){
	
	div{
		width: 12.5%;
	}
}

@media (min-width: 1101px) and (max-width: 1200px){
	
	div{
		width: 11.111%;
	}
}

@media (min-width: 1201px){
	
	body{
		background-color: saddlebrown;
	}
	div{
		width: 10%;
		margin-bottom: 15px;
	}
	article{
		margin: 15px auto 0 auto;
		max-width: 1500px
	}
}