/*//////////////////////////////////// grid setup */

/* note that box-sizing: border-box; is required for this solution */

/* optionally use clearfix to clear floats and delete these styles */
.half,
.third,
.grid-container {
    overflow: hidden;
}


/*//////////////////////////////////// mobile first grid */

.grid-18,
.grid-15,
/* 9 + 6 = 15 with 3 more = 18 */
.grid-12,
/* 9 + 3 = 12 with 6 more = 18 */
.grid-9,
.grid-6,
.grid-3,
.grid-1 {
    clear: both;
    width: 100%;
}

.half,
.third {
    float: left;
    clear: none;
}

.half {
    width: 50%;
}

.third {
    width: 33.3333333%;
}

.gutters .whole,
.gutters .half,
.gutters .third {
    margin-right: 0%;
    margin-left: 1%;
}

.gutters .whole {
    width: 98%;
}

.gutters .half {
    width: 48%;
}

.gutters .third {
    width: 31.3333333%;
}

.gutters {
    margin-left: -1%;
    margin-right: -1%;
}


/*//////////////////////////////////// 18 column grid *

                   18
             9            9
      6            6             6
  3      3      3      3      3     3
1 1 1  1 1 1  1 1 1  1 1 1  1 1 1  1 1 1

*/
@media (min-width: 50em) {

    .grid-18,
    .grid-15,
    /* 9 + 6 = 15 with 3 more = 18 */
    .grid-12,
    /* 9 + 3 = 12 with 6 more = 18 */
    .grid-9,
    .grid-6,
    .grid-3,
    .grid-1 {
        clear: none;
        float: left;
    }

    .grid-18 {
        width: 100%;
    }

    .grid-15 {
        width: 83.3333333%;
    }

    /* 9 + 6 = 15 with 3 more = 18 */
    .grid-12 {
        width: 66.6666666%;
    }

    /* 9 + 3 = 12 with 6 more = 18 */
    /* Percentage Math */
    .grid-9 {
        width: 50%;
    }

    /* 100 /2 */
    .grid-6 {
        width: 33.3333333%;
    }

    /* 100 /3 */
    .grid-3 {
        width: 16.6666666%;
    }

    /* 100 /6 */
    .grid-1 {
        width: 5.5555555%;
    }

    /* 100 /18 */

    .left {
        margin-left: 0;
    }

    .right {
        margin-right: 0;
    }

    .gutters .grid-18,
    .gutters .grid-15,
    /* 9 + 6 = 15 with 3 more = 18 */
    .gutters .grid-12,
    /* 9 + 3 = 12 with 6 more = 18 */
    .gutters .grid-9,
    .gutters .grid-6,
    .gutters .grid-3,
    .gutters .grid-1 {
        margin-right: 0%;
        margin-left: 1%;
    }

    .gutters .grid-18 {
        width: 98%;
    }

    .gutters .grid-15 {
        width: 81.3333333%;
    }

    /* 9 + 6 = 15 with 3 more = 18 */
    .gutters .grid-12 {
        width: 64.6666666%;
    }

    /* 9 + 3 = 12 with 6 more = 18 */
    .gutters .grid-9 {
        width: 48%;
    }

    .gutters .grid-6 {
        width: 31.3333333%;
    }

    .gutters .grid-3 {
        width: 14.6666666%;
    }

    .gutters .grid-1 {
        width: 3.5555555%;
    }
}


@media screen and (max-width : 480px) {
    .gutters .whole {
        width: 98%;
    }
}