body { padding: 0; margin: 0; }
.container { max-width: 80em; margin: 0 auto;}
.row { clear: both; padding: 0; margin: 0; }
.col { display: block; float:left; margin: 0.7%; }
.col:first-child { margin-left: 0; }

.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

.width12 { width: 100%; }
.width11 {width: 91.53%;}
.width10 {width: 81.9%;}
.width9 {width: 73.5%;}
.width8 {width: 65.5%;}
.width7 {width: 56.4%;}
.width6 {width: 48.5%;}
.width5 {width: 40.73%;}
.width4 {width: 31.7%;}
.width3 {width: 23.4%;}
.width2 {width: 15.25%;}
.width1 {width: 6.86%;}

/* DESKTOP SMALL
######################################### */
@media only screen and (max-width: 80em) {
	.container { padding: 0 1em; box-sizing: border-box; }
	.col { margin: 0; }
	.width1 { width: 6.6%; }
	.width2 { width: 14.8%; }
	.width3 { width: 23%; }
	.width4 { width: 31.2%; }
	.width5 { width: 39.4%; }
	.width6 { width: 47.6%; }
	.width7 { width: 55.8%; }
	.width8 { width: 64%; }
	.width9 { width: 72.2%; } 
	.width10 { width: 80.4%; }
	.width11 { width: 88.6%; }
	.width12 { width: 98.4%; }
}

/* TABLET VIEW
######################################### */
@media only screen and (max-width: 60em) {

}

/* MOBILE VIEW
######################################### */
@media only screen and (max-width: 45.5em) {

	.width12, .width11, .width10, .width9, .width8, .width7, .width6, .width5, .width4, .width3, .width2, .width1 { width: 100%; }
}