@charset "UTF-8";

/*GLOBAL STYLE*/

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