* {
	box-sizing: border-box;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
}

.row {
	max-width: 1000px;
	padding-left: 20px;
	padding-right: 20px;
	margin: 0 auto;
}

/* Clear fix */

/* This makes the row take up the same height as its tallest child content*/
.row::before,
.row::after {
	display: table;
	content: '';
}

/* This ensures content after each row will be below it by ensuring is included in the normal flow */
.row::after {
	clear: both;
}

.col-3, .col-4, .col-6, .col-12, .col-3-triple, .col-4-double {
	float: left;
	padding-left: 1.0416666%;
	padding-right: 1.010416666%;
}

/* Mobile Defaults - Each column will take up 100% of the width so they stack */

.col-3, .col-4, .col-6, .col-12, .col-3-triple, .col-4-double {
	width: 100%;
}

/* Grid sizing for devides with larger screen widths */
@media only screen and (min-width: 640px) {

	.col-3 {
		width: 25%;
	}

	.col-3-triple {
		width: 75%;
	}

	.col-4 {
		width: 33.33333%;
	}

	.col-4-double {
		width: 66.66666%;
	}

	.col-6 {
		width: 50%;
	}

	.col-12 {
		width: 100%;
	}
	
}