/*
	Responsive Grid System
	Based on 960 Grid System - made fluid
*/

/* Containers
----------------------------------------------------------------------------------------------------*/
.container_12 {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}
/* Grid >> Global
----------------------------------------------------------------------------------------------------*/

.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 {
	display: block;
	float: left;
	position: relative;
	box-sizing: border-box;
}
/* Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------*/

.alpha {
	margin-left: 0;
}
.omega {
	margin-right: 0;
}
/* Grid >> 12 Columns (fluid percentages with gap via calc)
----------------------------------------------------------------------------------------------------*/

.container_12 .grid_1  { width: calc(8.333% - 16px); margin: 0 8px; }
.container_12 .grid_2  { width: calc(16.666% - 16px); margin: 0 8px; }
.container_12 .grid_3  { width: calc(25% - 16px); margin: 0 8px; }
.container_12 .grid_4  { width: calc(33.333% - 16px); margin: 0 8px; }
.container_12 .grid_5  { width: calc(41.666% - 16px); margin: 0 8px; }
.container_12 .grid_6  { width: calc(50% - 16px); margin: 0 8px; }
.container_12 .grid_7  { width: calc(58.333% - 16px); margin: 0 8px; }
.container_12 .grid_8  { width: calc(66.666% - 16px); margin: 0 8px; }
.container_12 .grid_9  { width: calc(75% - 16px); margin: 0 8px; }
.container_12 .grid_10 { width: calc(83.333% - 16px); margin: 0 8px; }
.container_12 .grid_11 { width: calc(91.666% - 16px); margin: 0 8px; }
.container_12 .grid_12 { width: calc(100% - 16px); margin: 0 8px; }

/* Prefix/Suffix/Push/Pull - zeroed out for responsive */
.container_12 [class*='prefix_'],
.container_12 [class*='suffix_'] { padding-left: 0; padding-right: 0; }
.container_12 [class*='push_'],
.container_12 [class*='pull_'] { left: auto; }

/* Clear Floated Elements
----------------------------------------------------------------------------------------------------*/

.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

.clearfix:after {
	clear: both;
	content: ' ';
	display: block;
	font-size: 0;
	line-height: 0;
	visibility: hidden;
	width: 0;
	height: 0;
}
.clearfix {
	display: block;
}