/* row control */

/* Perishable Clearfix: use on any parent with floating children */
.clearfix:after,
.row:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
* html .clearfix,
* html .row             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix,
*:first-child+html .row { zoom: 1; } /* IE7 */



/* column control */
.wrapper {
	margin: 0 auto;
	width: 100%;
	padding: 0;
    
}

/* handles behavior, e.g. floating and base column properties */
.col {
	float: left;
	margin-left: 1.6%;
	margin-bottom: 1em;
}

/* remove margin from first column to equal 100% of total width */
.col:first-child { margin-left: 0; } 

/* set base column widths */
.col-12 { width: 100%; }
.col-11 { width: 91.53%; }
.col-10 { width: 83.06%; }
.col-9 { width: 74.6%; }
.col-8 { width: 66.13%; }
.col-7 { width: 57.66%; }
.col-6 { width: 49.2%; }
.col-5 { width: 40.73%; }
.col-4 { width: 32.26%; }
.col-3 { width: 23.8%; }
.col-2 { width: 15.332%; }
.col-1 { width: 6.866%; }


/* responsive element scaling */
img.scale, 
iframe.scale, 
object.scale {
	height: auto;
	max-width: 100%;
}


/* Portrait phones and down */
@media only screen and (max-width: 30em) { 
	.col { 
		margin-left: 0;
	}

	.col-12, 
	.col-11,
	.col-10,
	.col-9,
	.col-8,
	.col-7,
	.col-6,
	.col-5,
	.col-4,
	.col-3,
	.col-2,
	.col-1 {
		width: 100%; 
	}
	
	.wrapper {
		width: 100%;  
		margin: 0 auto; padding: 0;
	}
}

/* Landscape phone to portrait tablet */
@media only screen and (min-width: 30em) { 
	.wrapper {
		width: 30em;
	}
}

/* Portrait tablet to landscape narrow desktop */
@media only screen and (min-width: 48em) { 
	.wrapper {
		width: 48em;
	}
}

/* Standard Desktop */ 
@media only screen and (min-width: 60em) {
	.wrapper {
		width: 60em;
	}
}

/* Widescreen Desktop */
@media only screen and (min-width: 72.5em) { 
	.wrapper {
		width: 72.5em;
	}
}