/*================================================================
                 Fluid Grid Styles 
================================================================*/

.container {
	position:relative;
	margin:0px auto;
	padding:0px; 
	width:60em;
	-webkit-transition: all .1s linear;
       -moz-transition: all .1s linear;
        -ms-transition: all .1s linear; 
	     -o-transition: all .1s linear;
            transition: all .1s linear;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

.container:before, .container:after { content: " "; display: table; }
.container:after { clear: both; }
.container { *zoom: 1; }


.container [class^="grid-"] { padding:0 10px; }

.gutterless { padding:0 10px; }
.gutterless [class^="grid-"] { padding:0; }


img.fluid { max-width:100%; height:auto !important; }

/* 16px baseline (256px) s = small */
@media only screen and (min-width:16em) {
	.container [class^="grid-"] {
		position:relative;
		float:left;
		width:100%;
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
		        box-sizing: border-box;
	}
	.s-1half [class^="grid-"] { width:50%; }
}

/* 16px baseline (480px - 767px) sw = small wide */
@media only screen and (min-width:30em) and (max-width:47.94em){
	.sw-1half [class^="grid-"] { width:50%; }
	.sw-1half [class*="push-"] { left:50%; }
	.sw-1half [class*="pull-"] { left:-50%; }
	
	.sw-1third [class^="grid-"] { width:33.333%; }
	.sw-1third [class*="push-"] { left:33.333%; }
	.sw-1third [class*="pull-"] { left:-33.333%; }
}

/* 16px baseline (768px) m = medium */
@media only screen and (min-width:48em){
	.container .grid-1  { width:8.333%; }
	.container .grid-2  { width:16.666%; }
	.container .grid-3  { width:25%; }
	.container .grid-4  { width:33.333%; }
	.container .grid-5  { width:41.666%; }
	.container .grid-6  { width:50%; }
	.container .grid-7  { width:58.333%; }
	.container .grid-8  { width:66.666%; }
	.container .grid-9  { width:75%; }
	.container .grid-10 { width:83.333%; }
	.container .grid-11 { width:91.666%; }
	.container .grid-12 { width:100%; }
	
	.container .push-1  { left:8.333%; }
	.container .push-2  { left:16.666%; }
	.container .push-3  { left:25%; }
	.container .push-4  { left:33.333%; }
	.container .push-5  { left:41.666%; }
	.container .push-6  { left:50%; }
	.container .push-7  { left:58.333%; }
	.container .push-8  { left:66.666%; }
	.container .push-9  { left:75%; }
	.container .push-10 { left:83.333%; }
	.container .push-11 { left:91.666%; }
	.container .push-12 { left:100%; }
	
	.container .pull-1  { left:-8.333%; }
	.container .pull-2  { left:-16.666%; }
	.container .pull-3  { left:-25%; }
	.container .pull-4  { left:-33.333%; }
	.container .pull-5  { left:-41.666%; }
	.container .pull-6  { left:-50%; }
	.container .pull-7  { left:-58.333%; }
	.container .pull-8  { left:-66.666%; }
	.container .pull-9  { left:-75%; }
	.container .pull-10 { left:-83.333%; }
	.container .pull-11 { left:-91.666%; }
	.container .pull-12 { left:-100%; }
}

/* 16px baseline (768px - 959px) m = medium */ 
@media only screen and (min-width:48em) and (max-width:60em){
	.m-1half [class^="grid-"] { width:50%; }
	.m-1half [class*="push-"] { left:50%; }
	.m-1half [class*="pull-"] { left:-50%; }
	
	.m-1third [class^="grid-"] { width:33.333%; }
	.m-1third [class*="push-"] { left:33.333%; }
	.m-1third [class*="pull-"] { left:-33.333%; }
	
	.m-1fourth [class^="grid-"] { width:25%; }
	.m-1fourth [class*="push-"] { left:25%; }
	.m-1fourth [class*="pull-"] { left:-25%; }
	
	.m-2thirds-left [class^="grid-"] { width:50%; }
	.m-2thirds-left [class^="grid-"]:nth-child(2n)    { width:25%; }
	.m-2thirds-left [class^="grid-"]:nth-child(2n+1) { width:75%; }
	.m-2thirds-left [class*="push-"] { left:0; }
	.m-2thirds-left [class*="pull-"] { left:0; }
	
	.m-2thirds-right [class^="grid-"] { width:50%; }
	.m-2thirds-right [class^="grid-"]:nth-child(2n)    { width:75%; }
	.m-2thirds-right [class^="grid-"]:nth-child(2n+1) { width:25%; }
	.m-2thirds-right [class*="push-"] { left:0; }
	.m-2thirds-right [class*="pull-"] { left:0; }
	
}

/* 16px baseline (960px - 1139px) m-w = medium wide*/ 
@media only screen and (min-width:60em) and (max-width:72em){
	/* ??? */
	/* Profit */
}