/******
QBKL Grid
Release: 1.2;
-------------------------------------------
For IE8, use in conjunction with Respond.js
https://github.com/scottjehl/Respond

Note: Respond.js only understands min-width / max-width media queries
******/

/* 1. Grid elements */
.section-heading {
	margin: 6.5% 0 0 0;
	padding: 0 .625em;
	font-size: 1.714em;
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: .187em;
	text-align: center;
	line-height: 1em;
	color: #000000;
}


.container {
	margin-left: auto;
	margin-right: auto;
	padding: 0 1em;
	max-width: 750em;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.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-4-5,
.col-1-6 {
	float: left;
	padding: .1em .5em .3em .5em;
	-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-4-5 { width: 80%; }
.col-1-6 { width: 16.666666666666664%; }

.row {
	margin-left: 6.5em;
	margin-right: 5em;
	margin-bottom: 1.5em;
	margin-top: -1.8em;
}

.row:before,
.row:after {
	content: " ";
	display: table;
	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-4-5,
	.col-1-6 { padding: 1em; }
	
	
}

@media screen and (max-width: 800px) {
	.container { max-width: 780px; }
	.row {
		margin-left: -.625em;
		margin-right: -.625em;
		margin-bottom: 1em;
	}
	.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-4-5,
	.col-1-6 { padding: .625em; }
}

@media screen and (max-width: 768px) {
	.container { max-width: 750px; 
	margin-top: 3em;}
	.row {
		margin-left: -.625em;
		margin-right: -.625em;
		margin-bottom: 1em;
	}
	
}

@media screen and (max-width: 640px) {
	.container {
		max-width: 620px;
	margin-top: 3em;
	margin-right: auto;
	padding: 0 1em;
	
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

@media screen and (max-width: 400px) {
	.container {
		max-width: 380px;
	margin-top: 3em;
	margin-right: auto;
	padding: 0 1em;
	
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

	.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-4-5,
	.col-1-6 { float: none; width: 100%; }
	.section-heading {
	margin: 25% 0 0 0;
	padding: 0 .625em;
	font-size: 1.714em;
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: .187em;
	text-align: center;
	line-height: 1em;
	color: #000000;
}
.row {
	margin-left: -1em;
	margin-right: -1em;
	
}

}