/* 1. Grid elements */

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

.container:before,
.container:after {
	content: " ";
	display: table;
}

.container:after {
	clear: both;
}

.column,
.col-full,
.col-1-2,
.col-1-3,
.col-2-3,
.col-1-4,
.col-3-4,
.col-1-5,
.col-2-5,
.col-3-5,
.col-1-6 {
	float: left;
	padding: 15px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.col-full { width: 100%; }
.col-1-2 { width: 50%; }
.col-1-3 { width: 33.33333333333333%; }
.col-2-3 { width: 66.66666666666666%; }
.col-1-4 { width: 25%; }
.col-3-4 { width: 75%; }
.col-1-5 { width: 20%; }
.col-2-5 { width: 40%; }
.col-3-5 { width: 60%; }
.col-1-6 { width: 16.666666666666664%; }


.row { width: 100%; }
.row,
.col-wrap {
	margin-left: auto;
	margin-right: auto;
	padding: 0!important;
}

.row:before,
.row:after,
.col-wrap:before,
.col-wrap:after {
	content: " ";
	display: table;
}

.row:after,
.col-wrap:after {
	clear: both;
}

/* 2. Media queries */
@media screen and (max-width: 1024px) {
	.container { max-width: 960px; }
	.column,
	.col-full,
	.col-1-2,
	.col-1-3,
	.col-2-3,
	.col-1-4,
	.col-3-4,
	.col-1-5,
	.col-2-5,
	.col-3-5,
	.col-1-6 { padding: 15px; }
}

@media screen and (max-width: 800px) {
	.container { max-width: 780px; }
	.column,
	.col-full,
	.col-1-2,
	.col-1-3,
	.col-2-3,
	.col-1-4,
	.col-3-4,
	.col-1-5,
	.col-2-5,
	.col-3-5,
	.col-1-6 { padding: 10px; }
}

@media screen and (max-width: 768px) {
	.container { max-width: 750px; }
}

@media screen and (max-width: 640px) {
	.container { max-width: 100%; }
	.column,
	.col-full,
	.col-1-2,
	.col-1-3,
	.col-2-3,
	.col-1-4,
	.col-3-4,
	.col-1-5,
	.col-2-5,
	.col-3-5,
	.col-1-6 { float: none; width: 100%; }
}

@media screen and (max-device-width: 540px) {
	/* Break-point if needed */
}

@media screen and (max-width: 320px) {
	/* Break-point if needed */
}