/* 
Inspired by many other grids out there.
Version 1.2
*/

.container_12 {
	margin: 0 auto;
	padding: 0;
	position: relative;
	width: 1310px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.row { margin-bottom: 20px; }
.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: inline;
	float: left;
	margin-left: 2.8%;
	margin-right: 2.8%;
}
.grid_1:first-child, .grid_2:first-child, .grid_3:first-child, .grid_4:first-child, .grid_5:first-child, .grid_6:first-child, .grid_7:first-child, .grid_8:first-child,  .grid_9:first-child, .grid_10:first-child, .grid_11:first-child, .grid_12 { margin-left: 4.5%; }
.grid_1:last-child, .grid_2:last-child, .grid_3:last-child, .grid_4:last-child, .grid_5:last-child, .grid_6:last-child, .grid_7:last-child, .grid_8:last-child,  .grid_9:last-child, .grid_10:last-child, .grid_11:last-child, .grid_12 { margin-right: 4.5%; }
.grid_1 { width: 2.366%; }
.grid_2 { width: 10.333%; }
.grid_3 { width: 18.3%; }
.grid_4 { width: 26.266%; }
.grid_5 { width: 34.233%; }
.grid_6 { width: 42.2%; }
.grid_7 { width: 50.166%; }
.grid_8 { width: 58.133%; }
.grid_9 { width: 66.1%; }
.grid_10 { width: 74.066%; }
.grid_11 { width: 82.033%; }
.grid_12 { width: 90%; }
/* For Flush Right or Left us Alpha or Omega, take away the respective margin, and add it to the width of the container */

.alpha { margin-left: 0 !important; }
.omega { margin-right: 0 !important; }
.grid_1.alpha, .grid_1.omega { width: 7.366%; }
.grid_2.alpha, .grid_2.omega { width: 15.333%; }
.grid_3.alpha, .grid_3.omega { width: 23.3%; }
.grid_4.alpha, .grid_4.omega { width: 31.266%; }
.grid_5.alpha, .grid_5.omega { width: 39.233%; }
.grid_6.alpha, .grid_6.omega { width: 47.2%; }
.grid_7.alpha, .grid_7.omega { width: 55.166%; }
.grid_8.alpha, .grid_8.omega { width: 63.133%; }
.grid_9.alpha, .grid_9.omega { width: 71.1%; }
.grid_10.alpha, .grid_10.omega { width: 79.066%; }
.grid_11.alpha, .grid_11.omega { width: 87.033%; }
.grid_12.alpha, .grid_12.omega { width: 95%; }
/* If both alpha and omega on a single element */

.grid_1.alpha.omega { width: 12.366%; }
.grid_2.alpha.omega { width: 20.333%; }
.grid_3.alpha.omega { width: 28.3%; }
.grid_4.alpha.omega { width: 36.266%; }
.grid_5.alpha.omega { width: 44.233%; }
.grid_6.alpha.omega { width: 52.2%; }
.grid_7.alpha.omega { width: 60.166%; }
.grid_8.alpha.omega { width: 68.133%; }
.grid_9.alpha.omega { width: 76.1%; }
.grid_10.alpha.omega { width: 84.066%; }
.grid_11.alpha.omega { width: 92.033%; }
.grid_12.alpha.omega { width: 100%; }

@media only screen and (min-width: 1161px) and (max-width: 1330px) {
.container_12 { width: 1140px; }
}
@media only screen and (min-width: 960px) and (max-width: 1160px) {
.container_12 { width: 940px; }
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
.container_12 { width: 748px; }
}

@media only screen and (max-width: 767px) {
.container_12 { width: 100%; }
/* All containers are given 100% */
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12, .grid_1.alpha, .grid_1.omega, .grid_2.alpha, .grid_2.omega, .grid_3.alpha, .grid_3.omega, .grid_4.alpha, .grid_4.omega, .grid_5.alpha, .grid_5.omega, .grid_6.alpha, .grid_6.omega, .grid_7.alpha, .grid_7.omega, .grid_8.alpha, .grid_8.omega, .grid_9.alpha, .grid_9.omega, .grid_10.alpha, .grid_10.omega, .grid_11.alpha, .grid_11.omega,  .grid_12.alpha, .grid_12.omega, .grid_12.alpha.omega,
.one_half, .one_third, .two_third, .three_fourth, .one_fourth, .one_fifth, .two_fifth, .three_fifth, .four_fifth, .one_sixth, .five_sixth {
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
	margin-left: 2% !important;
	margin-right: 2% !important;
	margin-bottom: 20px;
	width: 96%;
}
.grid_12, .grid_12.alpha, .grid_12.omega, .grid_12.alpha.omega {
	margin-bottom: 0px;
}
.row { margin: 0; }
}
.clearfix:before, .clearfix:after, .row:before, .row:after, .container_12:before, .container_12:after {
	content: '.';
	display: block;
	height: 0;
	overflow: hidden;
	visibility: hidden;
	width: 0;
}
/* http://sonspring.com/journal/clearing-floats */
.clear {
	clear: both;
	display: block;
	height: 0;
	overflow: hidden;
	visibility: hidden;
	width: 0;
}
.row:after, .clearfix:after, .container_12:after { clear: both; }
/* For IE7. Move this to separate file when you notice some problems */
.row, .clearfix { zoom: 1; }
img, object, embed { max-width: 100%; }
img { height: auto; }