/*  12 COLUMN : RESPONSIVE GRID SYSTEM  DEVELOPER : DENIS LEBLANC  URL : http://responsive.gs  VERSION : 3.0  LICENSE : GPL & MIT*/
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.container {
    max-width: 800px;
    margin: 0 auto
}

.clr:after,.col:after,.container:after,.group:after,.row:after {
    content: "";
    display: table;
    clear: both
}

.row {
    padding-bottom: 0
}

.col {
    display: block;
    float: left;
    width: 100%
}

@media(min-width: 768px) {
    .gutters .col {
        margin-left:2%
    }

    .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%
    }

    .gutters .span_3 {
        width: 23.5%
    }

    .gutters .span_4 {
        width: 32%
    }

    .gutters .span_5 {
        width: 40.5%
    }

    .gutters .span_6 {
        width: 49%
    }

    .gutters .span_7 {
        width: 57.5%
    }

    .gutters .span_8 {
        width: 66%
    }

    .gutters .span_9 {
        width: 74.5%
    }

    .gutters .span_10 {
        width: 83%
    }

    .gutters .span_11 {
        width: 91.5%
    }

    .gutters .span_12 {
        width: 100%
    }
}

/* 12 COLUMN : RESPONSIVE GRID SYSTEM Fix Ver. 1.2.1*/
.container {
    padding: 0 1%
}

.container img {
    max-width: 100%
}

*+.container {
    margin-top: 2em
}

.row:not(:last-child) {
    margin-bottom: 4%
}

.col {
    float: none
}

.col:not(:last-child) {
    margin-bottom: 3%
}

@media(min-width: 768px) {
    .container {
        max-width:1000px;
        margin: auto;
        padding: 0 10px
    }

    *+.container {
        margin-top: 40px
    }

    .col {
        float: left
    }

    .reverse>.col {
        float: right
    }

    .col:not(:last-child) {
        margin-bottom: 0
    }

    .reverse>.col:last-child,:not(.reverse)>.col:first-child {
        margin-left: 0
    }

    .col.offset_1 {
        margin-left: 8.33333333333%
    }

    .gutters .col.offset_1 {
        margin-left: 10.5%
    }

    .gutters .col.offset_1:first-child {
        margin-left: 8.5%
    }

    .col.offset_2 {
        margin-left: 16.6666666667%
    }

    .gutters .col.offset_2 {
        margin-left: 19%
    }

    .gutters .col.offset_2:first-child {
        margin-left: 17%
    }

    .col.offset_3 {
        margin-left: 25%
    }

    .gutters .col.offset_3 {
        margin-left: 27.5%
    }

    .gutters .col.offset_3:first-child {
        margin-left: 25.5%
    }

    .col.offset_4 {
        margin-left: 33.3333333333%
    }

    .gutters .col.offset_4 {
        margin-left: 36%
    }

    .gutters .col.offset_4:first-child {
        margin-left: 34%
    }

    .col.offset_5 {
        margin-left: 41.6666666667%
    }

    .gutters .col.offset_5 {
        margin-left: 44.5%
    }

    .gutters .col.offset_5:first-child {
        margin-left: 42.5%
    }

    .col.offset_6 {
        margin-left: 50%
    }

    .gutters .col.offset_6 {
        margin-left: 53%
    }

    .gutters .col.offset_6:first-child {
        margin-left: 51%
    }

    .col.offset_7 {
        margin-left: 58.3333333333%
    }

    .gutters .col.offset_7 {
        margin-left: 61.5%
    }

    .gutters .col.offset_7:first-child {
        margin-left: 59.5%
    }

    .col.offset_8 {
        margin-left: 66.6666666667%
    }

    .gutters .col.offset_8 {
        margin-left: 70%
    }

    .gutters .col.offset_8:first-child {
        margin-left: 68%
    }

    .col.offset_9 {
        margin-left: 75%
    }

    .gutters .col.offset_9 {
        margin-left: 78.5%
    }

    .gutters .col.offset_9:first-child {
        margin-left: 76.5%
    }

    .col.offset_10 {
        margin-left: 83.3333333333%
    }

    .gutters .col.offset_10 {
        margin-left: 87%
    }

    .gutters .col.offset_10:first-child {
        margin-left: 85%
    }

    .col.offset_11 {
        margin-left: 91.6666666667%
    }

    .gutters .col.offset_11 {
        margin-left: 95.5%
    }

    .gutters .col.offset_11:first-child {
        margin-left: 93.5%
    }

    .col.offset_12 {
        margin-left: 100%
    }

    :not(.reverse)>.col.break+.col {
        clear: left;
        margin-left: 0
    }

    .reverse>.col.break {
        margin-left: 0
    }

    .reverse>.col.break+.col {
        clear: right;
        margin-right: 0
    }

    .col.break~.col {
        margin-top: 2%
    }
}

@media(min-width : 1024px) {
    .container {
        padding:0
    }
}