/* ========================================================================================== */
/* 12 Column Grid Layout - 12: 75px Columns | 11: 20px Gutters - 1200px TOTAL */
/* ========================================================================================== */

/* FORMULA: Target / Context = Result
 * 1. Column / Total = Result (75px / 1120px = )
 * 2. Column + Column + Gutter / Total = Result (170px / 1120px = )
 * 3. + Column & Gutter / Total = Result (265px / 1120px = ) */


/* ========================================================================================== */
/* GLOBAL RULES */
/* ========================================================================================== */

.grid-container {
    /*padding-left:10px;
    padding-right:10px;*/
    margin-left:auto;
    margin-right:auto;
}

/*img {
    width:100%;
}*/

/* ========================================================================================== */
/* MEDIA QUERIES */
/* ========================================================================================== */

/*@media (min-width:768px) {*/ /* Media Querie may not have to be set. */

    .grid-container > [class^="grid-"] {
        float:left;
        min-height:1px;
        padding-left:10px;
        padding-right:10px;
        margin-left:1.785714285714286%; /* Divide Gutter value by Context 20px/1120px to receive accurate margin size */
    }
    
    /* Selects FIRST CHILD of Grid-Container to eliminate margin */
    .grid-container > [class^="grid-"]:first-child {
        margin-left:0;
    }
    
    /* Selects LAST CHILD of Grid-Container to float right - Causes grids to become flush with both sides */
    .grid-container > [class^="grid-"]:last-child {
        float:right;
    }

/*================================*/
/* GRIDS */
/*================================*/

    .grid-1 {
        width:6.696428571428571%;
    }
    .grid-2 {
        width:15.17857142857143%;
    }
    .grid-3 {
        width:23.66071428571429%;
    }
    .grid-4 {
        width:32.14285714285714%;
    }
    .grid-5 {
        width:40.625%;
    }
    .grid-6 {
        width:49.10714285714286%;
    }
    .grid-7 {
        width:57.58928571428571%;
    }
    .grid-8 {
        width:66.07142857142857%;
    }
    .grid-9 {
        width:74.55357142857143%;
    }
    .grid-10 {
        width:83.03571428571429%;
    }
    .grid-11 {
        width:91.51785714285714%;
    }
    .grid-12 {
        width:100%;
    }
    
/*} If removed top Media Querie comment line, don't forget this one. */

/*================================*/
/* CLEARFIX */
/*================================*/

.group:after,
.grid-container:after {
    content:" ";
    display:table;
    clear:both;
}