* { 
box-sizing: border-box;
 }


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


/* clearfix hack */
.row::before, .row::after {
	display: table;
	content: '';
} 

.row::after {
	clear: both;

}

.col-4, .col-12, .col-6, .col-8 {
	float: left;
	padding-left:  1.04166666%;
	padding-right: 1.04166666%;
}

/* mobile grid */
.col-4, .col-12, .col-6, .col-8 {
	width: 100%;
}


/* non mobile grid */
@media only screen and (min-width: 640px) {
	.col-4 {
		width: 33.33%;
	}

	.col-6 {
		width: 	50%;
	}

	.col-8 {
		width: 66.66%;
	}

	.col-12 {
		width: 100%;
	}

	.row.header-row
{
	max-width: none;
}

}