@charset "UTF-8";

/* GLOBAL STYLES */

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

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

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.333%;
	}
}

@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: black;
	}
	
	div {
		width: 10%;
		margin-bottom: 15px;
	}
	
	article {
		margin: 15px auto 0 auto;
		max-width: 1500px;
	}
}