/* 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 */

}

/* MAIN CONTAINER

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

.container {

max-width: 800px;
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-bottom: 0em; }

/* 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%; }

}