/*	12 COLUMN : RESPONSIVE GRID SYSTEM
	DEVELOPER : DENIS LEBLANC
	URL : http://responsive.gs
	VERSION : 3.0
	LICENSE : GPL & MIT */


/* 	SET ALL ELEMENTS TO BOX-SIZING : BORDER-BOX */
/* Box sizing
----------------------------------------------------------------------------- */
* { 
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}


/*	MAIN CONTAINER 
	Set the width to whatever you want the width of your site to be. */


/*	SELF CLEARING FLOATS - CLEARFIX METHOD */
.row:after, 
.col:after, 
.clr:after, 
.group:after { 
	content: ""; 
	display: table; 
	clear: both; 
}

/* 	DEFAULT ROW STYLES 
	Set bottom padding according to preference */
.row { padding-bottom: 0em;

}
			
								  
/* DEFAULT COLUMN STYLES */
.col { 
	display: block;
	float: left;
	width: 100%;
	min-height: 1px;
}
.col.last {
	float: right;
}

.col.demo {
	min-height: 10px;
	background: #f05134;	
	text-align: center;
	line-height: 50px;
	color: #fff;
	font-size: 30px;
	font-weight: 600;
	margin-bottom: 20px;
	
	-webkit-transition: background 0.3s ease;                  
    -moz-transition: background 0.3s ease;                 
    -o-transition: background 0.3s ease;   
    -ms-transition: background 0.3s ease;          
    transition: background 0.3s ease;
}
.col.demo:hover {
	background: #222;
}



/*	COLUMN WIDTH ON DISPLAYS +768px 
	You might need to play with media queries here to suite your design.
	@media ( min-width : 980px ) {
	*/



	.gutters .col {
		margin-left: 4%;	
	}
	.gutters .col:first-child { 
		margin-left: 0; 
	}
	.gutters .col.first {
		margin-left: 0; 
	}
	
	.nogutters .col {
		margin-left: 0%;
	}
	
	.span_1 { width: 8.33333333333%; }
	.span_2 { width: 16.6666666667%; }
	.span_3 { width: 25%; }
	.span_4 { width: 33.3333333333%; }
	.span_5 { width: 41.6666666667%; }
	.span_6 { width: 50%; }
	.span_7 { width: 58.3333333333%; }
	.span_8 { width: 66.6666666667%; }
	.span_9 { width: 75%; }
	.span_10 { width: 83.3333333333%; }
	.span_11 { width: 91.6666666667%; }
	.span_12 { width: 100%; }
	
	.gutters .span_1 { width: 4.68%; }
	.gutters .span_2 { width: 13.35%; }
	.gutters .span_3 { width: 22%; }
	.gutters .span_4 { width: 30.65%; }
	.gutters .span_5 { width: 39.5%; }
	.gutters .span_6 { width: 48%; }
	.gutters .span_7 { width: 56.5%; }
	.gutters .span_8 { width: 65.25%; }
	.gutters .span_9 { width: 74%; }
	.gutters .span_10 { width: 82.75%; }
	.gutters .span_11 { width: 91.3%; }
	.gutters .span_12 { width: 100%; }
	
	.nogutters .span_1 { width: 8.33333333333%; }
	.nogutters .span_2 { width: 16.6666666667%; }
	.nogutters .span_3 { width: 25%; }
	.nogutters .span_4 { width: 33.3333333333%; }
	.nogutters .span_5 { width: 41.6666666667%; }
	.nogutters .span_6 { width: 50%; }
	.nogutters .span_7 { width: 58.3333333333%; }
	.nogutters .span_8 { width: 66.6666666667%; }
	.nogutters .span_9 { width: 75%; }
	.nogutters .span_10 { width: 83.3333333333%; }
	.nogutters .span_11 { width: 91.6666666667%; }
	.nogutters .span_12 { width: 100%; }