/*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 */
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;
*behavior:url(boxsizing.htc);}

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

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

/* DEFAULT ROW STYLES Set bottom padding according to preference */
.row{padding:auto auto 20px;}

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

@media (min-width:768px){
.gutters .col{margin-left:2%;}
.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: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:6.5%;}
.gutters .span_2 {width:15.0%;}
.gutters .span_3 {width:23.5%;}
.gutters .span_4 {width:32.0%;}
.gutters .span_5 {width:40.5%;}
.gutters .span_6 {width:49.0%;}
.gutters .span_7 {width:57.5%;}
.gutters .span_8 {width:66.0%;}
.gutters .span_9 {width:74.5%;}
.gutters .span_10{width:83.0%;}
.gutters .span_11{width:91.5%;}
.gutters .span_12{width:100%;}
}