/*
 * itemgrid.css v0.4.0
 * author: Thitithan Atthakasem
*/

/* Containers */
[class^="container"] {
	width: 100%;
	margin: 0 auto;
}

.container {
	max-width: 1250px;
}

.container.fluid {
	max-width: 100%;
}

/* (Counteracting the grid padding) */
[class^="container"] [class^="container"] {
	/*
	margin-left: -0.65rem;
	margin-right: -0.65rem;
	*/
	width: auto;
}

[class^="container"] .container.fluid {
	max-width: initial;
}

[class^="container"]::after {
	content: "";
	display: block;
	clear: both;
}

/* Grid behavior (and padding) */
.eigth,
.seventh,
.sixth,
.fifth,
.quarter,
.third,
.half {
	float: left;
	/* padding: 0.65rem; */
}

/* Grid width */
.eigth { width: 12.5%; }
.seventh { width: 14.285714285714%; }
.sixth { width: 16.666666666667%; }
.fifth { width: 20%; }
.quarter { width: 25%; }
.third { width: 33.333333333333%; }
.half { width: 50%; }

/*
Having sibling grid elements with different heights would occasionally mess up
the horizontal alignment of some of these grids elements. Therefore, every grid
element starting a new row is given clearance.
*/
[class^="container"] .eigth:nth-child(8n+1),
[class^="container"] .seventh:nth-child(7n+1),
[class^="container"] .sixth:nth-child(6n+1),
[class^="container"] .fifth:nth-child(5n+1),
[class^="container"] .quarter:nth-child(4n+1),
[class^="container"] .third:nth-child(3n+1),
[class^="container"] .half:nth-child(2n+1) {
	clear: left;
}

/* Breakpoints: grid resize and clearance shift */
@media only screen and (max-width: 992px) {
	.third { width: 50%; }
	[class^="container"] .third:nth-child(3n+1) { clear: none; }
	[class^="container"] .third:nth-child(2n+1) { clear: left; }
	.quarter { width: 33.333333333333%; }
	[class^="container"] .quarter:nth-child(4n+1) { clear: none; }
	[class^="container"] .quarter:nth-child(3n+1) { clear: left; }
	.fifth { width: 25%; }
	[class^="container"] .fifth:nth-child(5n+1) { clear: none; }
	[class^="container"] .fifth:nth-child(4n+1) { clear: left; }
	.sixth { width: 20%; }
	[class^="container"] .sixth:nth-child(6n+1) { clear: none; }
	[class^="container"] .sixth:nth-child(5n+1) { clear: left; }
	.seventh, .eigth { width: 16.666666666667%; }
	[class^="container"] .seventh:nth-child(7n+1),
	[class^="container"] .eigth:nth-child(8n+1) { clear: none; }
	[class^="container"] .seventh:nth-child(6n+1),
	[class^="container"] .eigth:nth-child(6n+1) { clear: left; }
}
@media only screen and (max-width: 768px) {
	.fifth { width: 33.333333333333%; }
	[class^="container"] .fifth:nth-child(4n+1) { clear: none; }
	[class^="container"] .fifth:nth-child(3n+1) { clear: left; }
	.sixth, .seventh { width: 25%; }
	[class^="container"] .sixth:nth-child(5n+1),
	[class^="container"] .seventh:nth-child(6n+1) { clear: none; }
	[class^="container"] .sixth:nth-child(4n+1),
	[class^="container"] .seventh:nth-child(4n+1) { clear: left; }
	.eigth { width: 20%; }
	[class^="container"] .eigth:nth-child(6n+1) { clear: none; }
	[class^="container"] .eigth:nth-child(5n+1) { clear: left; }
}
@media only screen and (max-width: 640px) {
	.half, .third { width: 100%; }
	[class^="container"] .third:nth-child(2n+1) { clear: none; }
	.quarter, .fifth { width: 50%; }
	[class^="container"] .quarter:nth-child(3n+1),
	[class^="container"] .fifth:nth-child(3n+1) { clear: none; }
	[class^="container"] .quarter:nth-child(2n+1),
	[class^="container"] .fifth:nth-child(2n+1) { clear: left; }
	.sixth,	.seventh { width: 33.333333333333%; }
	[class^="container"] .sixth:nth-child(4n+1),
	[class^="container"] .seventh:nth-child(4n+1) { clear: none; }
	[class^="container"] .sixth:nth-child(3n+1),
	[class^="container"] .seventh:nth-child(3n+1) { clear: left; }
	.eigth { width: 25%; }
	[class^="container"] .eigth:nth-child(5n+1) { clear: none; }
	[class^="container"] .eigth:nth-child(4n+1) { clear: left; }
}
@media only screen and (max-width: 475px) {
	.quarter { width: 100%; }
	[class^="container"] .quarter:nth-child(2n+1) { clear: none; }
	.sixth,	.seventh { width: 50%; }
	[class^="container"] .sixth:nth-child(3n+1),
	[class^="container"] .seventh:nth-child(3n+1) { clear: none; }
	[class^="container"] .sixth:nth-child(2n+1),
	[class^="container"] .seventh:nth-child(2n+1) { clear: left; }
	.eigth { width: 33.333333333333%; }
	[class^="container"] .eigth:nth-child(4n+1) { clear: none; }
	[class^="container"] .eigth:nth-child(3n+1) { clear: left; }
}

/* Responsive images */
.img-responsive {
	max-width: 100%;
	height: auto;
	display: block;
}