/*	24 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 */
* { 
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	*behavior: url(/scripts/boxsizing.htc); 
	/*	If you need support for IE7 and lower make 
		sure the boxsizing.htc file is linked properly.
		More info here:  https://github.com/Schepp/box-sizing-polyfill */
}


/*	MAIN CONTAINER 
	Set the width to whatever you want the width of your site to be. */
.container { 
	margin: 0 auto;
	max-width: 1040px;
	padding: 0 20px;
}

.container.wide { max-width: 1140px;}
.container.normal {max-width: 960px;}
.container.narrow {max-width: 700px;}
.container.max {max-width: 100%;padding-left: 20px;padding-right: 20px;}

.wide-container {
	width: 100%;
}


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

/* 	DEFAULT ROW STYLES 
	Set bottom padding according to preference */
.row { padding-bottom: 0; }
.row.paddingon {
	padding: 50px 0;
}			
.row.paddingtop {
	padding: 50px 0 0 0 ;
}			
.row.paddingbottom {
	padding-bottom: 50px;
}

								  
/* DEFAULT COLUMN STYLES */
.col,
.span_grid { 
	display: block;
	float: left;
	width: 100%;
}

@media ( min-width : 768px ) {
	
	.gutters .col {
		margin-left: 4%;
	}
	
	.gutters .col:first-child { 
		margin-left: 0; 
	}
}


/*	COLUMN WIDTH ON DISPLAYS +768px 
	You might need to play with media queries here to suite your design. */
@media ( min-width : 768px ) {
	.span_1 { width: 4.16666666667%; }
    .span_2 { width: 8.33333333333%; }
    .span_3 { width:12.5%; }
    .span_4 { width: 16.6666666667%; }
    .span_5 { width: 20.8333333333%; }
    .span_6 { width: 25%; }
    .span_7 { width: 29.1666666667%; }
    .span_8 { width: 33.3333333333%; }
    .span_9 { width: 37.5%; }
    .span_10 { width: 41.6666666667%; }
    .span_11 { width: 45.8333333333%; }
    .span_grid { width: 35%; display: block; float: left; }
    .span_12 { width: 50%; }
    .span_13 { width: 54.1666666667%; }
    .span_14 { width: 58.3333333333%; }
    .span_15 { width: 62.5%; }
    .span_16 { width: 66.6666666667%; }
    .span_17 { width: 70.8333333333%; }
    .span_18 { width: 75%; }
    .span_19 { width: 79.1666666667%; }
    .span_20 { width: 83.3333333333%; }
    .span_21 { width: 87.5%; }
    .span_22 { width: 91.6666666667%; }
    .span_23 { width: 95.8333333333%; }
    .span_24 { width: 100%; }
    
    .gutters .span_1 { width: 1.25%; }
	.gutters .span_2 { width: 4.5%; }
	.gutters .span_3 { width: 8.75%; }
	.gutters .span_4 { width: 13.0%; }
	.gutters .span_5 { width: 17.25%; }
	.gutters .span_6 { width: 21.5%; }
	.gutters .span_7 { width: 25.75%; }
	.gutters .span_8 { width: 30.0%; }
	.gutters .span_9 { width: 34.25%; }
	.gutters .span_10 { width: 38.5%; }
	.gutters .span_11 { width: 42.75%; }
  .gutters .span_grid { width: 45%; }
	.gutters .span_12 { width: 47.0%; }
	.gutters .span_13 { width: 51.25%; }
	.gutters .span_14 { width: 55.5%; }
	.gutters .span_15 { width: 59.75%; }
	.gutters .span_16 { width: 64.0%; }
	.gutters .span_17 { width: 68.25%; }
	.gutters .span_18 { width: 72.5%; }
	.gutters .span_19 { width: 76.75%; }
	.gutters .span_20 { width: 81.0%; }
	.gutters .span_21 { width: 85.25%; }
	.gutters .span_22 { width: 89.5%; }
	.gutters .span_23 { width: 93.75%; }
	.gutters .span_24 { width: 100%; }
}



.col.centered {
	position: relative;
	margin-left: auto !important;
	margin-right: auto !important;
	float: none !important;
}