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


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


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

.span_4 {
    width: 32%;
}

.span_4 {
    margin-left: 2%;
}

@media screen and (min-width : 641px),
print {

    .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 screen and (min-width : 641px),
print {
    .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_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: 2.25%;
    }

    .gutters .span_2 {
        width: 6.5%;
    }

    .gutters .span_3 {
        width: 10.75%;
    }

    .gutters .span_4 {
        width: 15.0%;
    }

    .gutters .span_5 {
        width: 19.25%;
    }

    .gutters .span_6 {
        width: 23.5%;
    }

    .gutters .span_7 {
        width: 27.75%;
    }

    .gutters .span_8 {
        width: 32.0%;
    }

    .gutters .span_9 {
        width: 36.25%;
    }

    .gutters .span_10 {
        width: 40.5%;
    }

    .gutters .span_11 {
        width: 44.75%;
    }

    .gutters .span_12 {
        width: 49.0%;
    }

    .gutters .span_13 {
        width: 53.25%;
    }

    .gutters .span_14 {
        width: 57.5%;
    }

    .gutters .span_15 {
        width: 61.75%;
    }

    .gutters .span_16 {
        width: 66.0%;
    }

    .gutters .span_17 {
        width: 70.25%;
    }

    .gutters .span_18 {
        width: 74.5%;
    }

    .gutters .span_19 {
        width: 78.75%;
    }

    .gutters .span_20 {
        width: 83.0%;
    }

    .gutters .span_21 {
        width: 87.25%;
    }

    .gutters .span_22 {
        width: 91.5%;
    }

    .gutters .span_23 {
        width: 95.75%;
    }

    .gutters .span_24 {
        width: 100%;
    }
}