/*
 * SimpleGrid v1.1
 * css3 Mobile first Approach
 *
 * Copyright 2015
 * Licensed under MIT
 *
 * Super simple (and flexible) grid that does what it is designed to do. 
 * Uses box sizing. 
 *
 * Supports IE8+ and all modern web browsers.
 * ie8+, chrome, firefox, safari, opera
 *
 * .container - set width of page
 * .row - creates row 
 * .row.static - extends row, maintains grid columns on small screens
 * .span- - set the number of columns to span
 * .shift- - set the number of columns to offset
 *
 * container, row - grid naming convention from twitter bootstrap
 * Thanks to OOCSS, Twitter Bootstrap, and many others for leading the way in grid layouts
 *
 * 10px Gutter.
 *
 * To change the gutter update:
 * .container padding, .row margin, .span- padding
 *
 * Coupled together by Jonathan Whiting
 * http://machiine.com
 */
body{
	width: auto !important;
	min-width: 100% !important;
}
.container {
	width: auto;
	margin: 0 auto;
	padding: 0 10px 0 10px;
}
.row,
[class*="span"] {
	/** 
	 * Set the element width by the border property, 
	 * Allows a border to be added to this element. 
	 **/
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
	*zoom: 1;
}
.gutterless.row .row {
	margin: 0px;
}
.container .row, .row .row, .gutterless.row .row .row{
	margin-left: -10px;
	margin-right: -10px;
}
.row:before,
.row:after {
	display: table;
	content: "";
	line-height: 0;
}
.row:after {
	clear: both;
}
.gutterless [class*="span"]{
	padding: 0;
}
[class*="span"],
.gutterless [class*="span"] [class*="span"] {
	/** 
	 * Set the element width by the border property, 
	 * Allows a border to be added to this element. 
	 **/
	float: left;
	min-height: 1px;
	margin: 0;
	padding: 0 10px 0 10px;
}
[class*="span"],
.row:not(.static) > [class*="span"] {
	width: 100%;
}
/* Set styles for direct row child */ 
.row.static > .span-12 {
	width: 100%;
}
.row.static > .span-11 {
	width: 91.66666667%;
}
.row.static > .span-10 {
	width: 83.33333333%;
}
.row.static > .span-9 {
	width: 75%;
}
.row.static > .span-8 {
	width: 66.66666667%;
}
.row.static > .span-7 {
	width: 58.33333333%;
}
.row.static > .span-6 {
	width: 50%;
}
.row.static > .span-5 {
	width: 41.66666667%;
}
.row.static > .span-4 {
	width: 33.33333333%;
}
.row.static > .span-3 {
	width: 25%;
}
.row.static > .span-2 {
	width: 16.66666667%;
}
.row.static > .span-1 {
	width: 8.33333333%;
}
[class*="span"].shift-right {
	float: right;
}
[class*="span"].shift-left {
	float: left;
}
/** Could also call .shift- **/
.row.static > .shift-12 {
	margin-left: 100%;
}
.row.static > .shift-11 {
	margin-left: 91.66666666666667%;
}
.row.static > .shift-10 {
	margin-left: 83.33333333333333%;
}
.row.static > .shift-9 {
	margin-left: 75%;
}
.row.static > .shift-8 {
	margin-left: 66.6666666666667%;
}
.row.static > .shift-7 {
	margin-left: 58.33333333333333%;
}
.row.static > .shift-6 {
	margin-left: 50%;
}
.row.static > .shift-5 {
	margin-left: 41.6666666666667%;
}
.row.static > .shift-4 {
	margin-left: 33.333333333333%;
}
.row.static > .shift-3 {
	margin-left: 25%;
}
.row.static > .shift-2 {
	margin-left: 16.6666666666666666%;
}
.row.static > .shift-1 {
	margin-left:  8.3333333333333%;
}
.row:not(.static) > .shift-12,  
.row:not(.static) > .shift-11, 
.row:not(.static) > .shift-10, 
.row:not(.static) > .shift-9, 
.row:not(.static) > .shift-8, 
.row:not(.static) > .shift-7, 
.row:not(.static) > .shift-6,
.row:not(.static) > .shift-5, 
.row:not(.static) > .shift-4, 
.row:not(.static) > .shift-3, 
.row:not(.static) > .shift-2, 
.row:not(.static) > .shift-1 {
	margin-left: 0px;
}
.span-12-sm {
	width: 100% !important; 
}
.span-11-sm {
	width: 91.66666667% !important;
}
.span-10-sm {
	width: 83.33333333% !important;
}
.span-9-sm {
	width: 75% !important;
}
.span-8-sm {
	width: 66.66666667% !important;
}
.span-7-sm {
	width: 58.33333333% !important;
}
.span-6-sm {
	width: 50% !important;
}
.span-5-sm {
	width: 41.66666667% !important;
}
.span-4-sm {
	width: 33.33333333% !important;
}
.span-3-sm {
	width: 25% !important;
}
.span-2-sm {
	width: 16.66666667% !important;
}
.span-1-sm {
	width: 8.33333333% !important;
}

/* 768px ~= 48em */
@media screen and (min-width: 48em) {

	.container {
		width: 730px;
	}
	.span-12 {
		width: 100% !important; 
	}
	.span-11 {
		width: 91.66666667% !important;
	}
	.span-10 {
		width: 83.33333333% !important;
	}
	.span-9 {
		width: 75% !important;
	}
	.span-8 {
		width: 66.66666667% !important;
	}
	.span-7 {
		width: 58.33333333% !important;
	}
	.span-6 {
		width: 50% !important;
	}
	.span-5 {
		width: 41.66666667% !important;
	}
	.span-4 {
		width: 33.33333333% !important;
	}
	.span-3 {
		width: 25% !important;
	}
	.span-2 {
		width: 16.66666667% !important;
	}
	.span-1 {
		width: 8.33333333% !important;
	}
	/** Could also call .shift- .shift- **/
	.shift-12 {
		margin-left: 100% !important;
	}
	.shift-11 {
		margin-left: 91.66666666666667% !important;
	}
	.shift-10 {
		margin-left: 83.33333333333333% !important;
	}
	.shift-9 {
		margin-left: 75% !important;
	}
	.shift-8 {
		margin-left: 66.6666666666667% !important;
	}
	.shift-7 {
		margin-left: 58.33333333333333% !important;
	}
	.shift-6 {
		margin-left: 50% !important;
	}
	.shift-5 {
		margin-left: 41.6666666666667% !important;
	}
	.shift-4 {
		margin-left: 33.333333333333% !important;
	}
	.shift-3 {
		margin-left: 25% !important;
	}
	.shift-2 {
		margin-left: 16.6666666666666666% !important;
	}
	.shift-1 {
		margin-left: 8.3333333333333% !important;
	}
	.span-12-md {
		width: 100% !important; 
	}
	.span-11-md {
		width: 91.66666667% !important;
	}
	.span-10-md {
		width: 83.33333333% !important;
	}
	.span-9-md {
		width: 75% !important;
	}
	.span-8-md {
		width: 66.66666667% !important;
	}
	.span-7-md {
		width: 58.33333333% !important;
	}
	.span-6-md {
		width: 50% !important;
	}
	.span-5-md {
		width: 41.66666667% !important;
	}
	.span-4-md {
		width: 33.33333333% !important;
	}
	.span-3-md {
		width: 25% !important;
	}
	.span-2-md {
		width: 16.66666667% !important;
	}
	.span-1-md {
		width: 8.33333333% !important;
	}
}
/* 1024px ~= 64em */
@media screen and (min-width: 64em) {
	.container {
		width: 960px;
	}
	.span-12-lg {
		width: 100% !important; 
	}
	.span-11-lg {
		width: 91.66666667% !important;
	}
	.span-10-lg {
		width: 83.33333333% !important;
	}
	.span-9-lg {
		width: 75% !important;
	}
	.span-8-lg {
		width: 66.66666667% !important;
	}
	.span-7-lg {
		width: 58.33333333% !important;
	}
	.span-6-lg {
		width: 50% !important;
	}
	.span-5-lg {
		width: 41.66666667% !important;
	}
	.span-4-lg {
		width: 33.33333333% !important;
	}
	.span-3-lg {
		width: 25% !important;
	}
	.span-2-lg {
		width: 16.66666667% !important;
	}
	.span-1-lg {
		width: 8.33333333% !important;
	}
}
/* 1280px ~= 80em */
@media screen and (min-width: 80em) {
	.container {
		width: 1260px;
	}
	.span-12-xl {
		width: 100% !important; 
	}
	.span-11-xl {
		width: 91.66666667% !important;
	}
	.span-10-xl {
		width: 83.33333333% !important;
	}
	.span-9-xl {
		width: 75% !important;
	}
	.span-8-xl {
		width: 66.66666667% !important;
	}
	.span-7-xl {
		width: 58.33333333% !important;
	}
	.span-6-xl {
		width: 50% !important;
	}
	.span-5-xl {
		width: 41.66666667% !important;
	}
	.span-4-xl {
		width: 33.33333333% !important;
	}
	.span-3-xl {
		width: 25% !important;
	}
	.span-2-xl {
		width: 16.66666667% !important;
	}
	.span-1-xl {
		width: 8.33333333% !important;
	}
}