/*********************************************** 

	Vicky Hung
	301161805
	IAT235
	D102

***********************************************/

*, *::after, *::before {
	box-sizing: border-box;
}

[class^='grid-col-'] {
	float: left;
	padding: 0;
}

/*********************************************** 

Sizes of grids available: 2, 3, 4, 12

The layout is built on 12 columns, but the use 
of 12 should be reserved for the main layout.

2, 3, 4 should be used for content in the "main" 
tags.

***********************************************/

.grid-col-1of12 {
	width: 8.3%;
}

.grid-col-2of12 {
	width: 16.7%;
}

.grid-col-3of12, .grid-col-1of4 {
	width: 25%;
}

.grid-col-4of12, .grid-col-1of3 {
	width: 33.3%;
}

.grid-col-5of12 {
	width: 41.7%;
}

.grid-col-6of12, .grid-col-1of2, .grid-col-2of4 {
	width: 50%;
}

.grid-col-7of12 {
	width: 58.3%;
}

.grid-col-8of12, .grid-col-2of3 {
	width: 66.7%;
}

.grid-col-9of12, .grid-col-3of4 {
	width: 75%;
}

.grid-col-10of12 {
	width: 83.3%;
}

.grid-col-11of12 {
	width: 91.7%;
}

.grid-col-12of12, .grid-col-3of3, .grid-col-4of4, .grid-col-2of2 {
	width: 100%;
}

.grid-row::after {
	content: "";
	display: block;
	clear: both;
}

.blank {
	padding: 0;
}

@media (max-width: 28.125em) {
	.grid-col-1of4, .grid-col-2of4, .grid-col-3of4 {
		width: 100%;
	}

}

@media (max-width: 66.875em) {
	.blank {
		width: 7.5%;
	}

	.grid-col-8of12 {
		width: 85%;
	}

}

@media (max-width: 48.875em) {

	.grid-col-1of3, .grid-col-2of3  {
		width: 100%;
	}

	.grid-col-1of2 {
		width: 100%;
	}

}

@media (min-width: 100em) {
	.blank {
		width: 20%
	}

	.grid-col-8of12 {
		width: 59.17em;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}


}