@charset "utf-8";
* {
	box-sizing: border-box;
}

.container {
	width: 100%;
	max-width: 60em;
	margin: 0 auto;
	}

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

[class*="col-"] {
	float: left;
	min-height: 1px;
	width: 20%;
	padding: 0.3em;
}

/*four column grid*/
.col-1 {width: 20%;}
.col-2 {width: 40%;}
.col-3 {width: 60%;}
.col-4 {width: 80%;}
.col-5 {width: 100%;}

/*Responsive Styles*/
@media screen and (max-width: 768px) {
	.col-1 {
		width: 50%;
	}
	.col-2 {
		width: 50%;
	}
	.col-3 {
		width: 50%;
	}
	.col-4 {
		width: 50%;
	}
	.col-5 {
		width: 100%;
	}
}

@media screen and (max-width: 480px) {
	.col-1 {width: 100%;}
	.col-2 {width: 100%;}
	.col-3 {width: 100%;}
	.col-4 {width: 100%;}
	.col-5 {width: 100%;}

}