/* 
  Extra Strength Responsive Grids
  Author & copyright (c) 2013: John Polacek 
  Follow me on Twitter: @johnpolacek

  Dual MIT & GPL license

  Project Page: http://dfcb.github.com/extra-strength-responsive-grids
  Project Repo: https://github.com/dfcb/extra-strength-responsive-grids
  
  Note: box-sizing: border-box; is required for this solution. 
  For more info, see the project page

*/
.grid-all, .grid-1, .grid-2, .grid-3, .grid-quarter, .grid-4, .grid-third, .grid-5, .grid-6, .grid-half, .grid-7, .grid-8, .grid-two-thirds, .grid-9, .grid-three-quarters, .grid-10, .grid-11, .grid-12, .grid-whole {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    *behavior: url(/boxsizing.htc);
    box-sizing: border-box;
    clear: none;
    float: left;
    margin: 0;
}

.grid-1 { width: 8.33333%; }

.grid-2 { width: 16.66667%; }

.grid-3, .grid-quarter { width: 25%; }

.grid-4, .grid-third { width: 33.33333%; }

.grid-5 { width: 41.66667%; }

.grid-6, .grid-half { width: 50%; }

.grid-7 { width: 58.33333%; }

.grid-8, .grid-two-thirds { width: 66.66667%; }

.grid-9, .grid-three-quarters { width: 75%; }

.grid-10 { width: 83.33333%; }

.grid-11 { width: 91.66667%; }

.grid-12, .grid-whole { width: 100%; }

/* padding helper classes */

.padded { padding: 0.5em; }

.padded-left { padding-left: 0.5em; }

.padded-right { padding-right: 0.5em; }

.padded-top { padding-top: 0.5em; }

.padded-bottom { padding-bottom: 0.5em; }

.padded-sides { padding: 0 0.5em; }

.padded-vertical { padding: 0.5em 0; }

.padded-inner { padding: 1em; }

.padded-inner-sides { padding: 0 1em; }

.padded-reverse {
    box-sizing: content-box;
    float: none;
    margin: 0 -0.5em;
    width: auto;
}

.padded-reverse-all {
    box-sizing: content-box;
    float: none;
    margin: -0.5em;
    width: auto;
}

/* miscellaneous helper classes */

.flow-opposite { float: right; }

.center { text-align: center; }

.left { text-align: left; }

.right { text-align: right; }

/* For compatibility with Bootstrap (fixed), Foundation, etc. */

.row {
    box-sizing: content-box;
    float: none;
    margin: 0 -0.5em;
    width: auto;
}

/* @media (max-width: 480px) { */

@media (max-width: 767px) {
    .s-grid-all, .s-grid-1, .s-grid-2, .s-grid-3, .s-grid-quarter, .s-grid-4, .s-grid-third, .s-grid-5, .s-grid-6, .s-grid-half, .s-grid-7, .s-grid-8, .s-grid-two-thirds, .s-grid-9, .s-grid-three-quarters, .s-grid-10, .s-grid-11, .s-grid-12, .s-grid-whole {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        *behavior: url(/boxsizing.htc);
        box-sizing: border-box;
        clear: none;
        float: left;
        margin: 0;
    }

    .s-grid-1 { width: 8.33333%; }

    .s-grid-2 { width: 16.66667%; }

    .s-grid-3, .s-grid-quarter { width: 25%; }

    .s-grid-4, .s-grid-third { width: 33.33333%; }

    .s-grid-5 { width: 41.66667%; }

    .s-grid-6, .s-grid-half { width: 50%; }

    .s-grid-7 { width: 58.33333%; }

    .s-grid-8, .s-grid-two-thirds { width: 66.66667%; }

    .s-grid-9, .s-grid-three-quarters { width: 75%; }

    .s-grid-10 { width: 83.33333%; }

    .s-grid-11 { width: 91.66667%; }

    .s-grid-12, .s-grid-whole { width: 100%; }

    /* padding helper classes */
    .s-padded { padding: 0.5em; }

    .s-padded-left { padding-left: 0.5em; }

    .s-padded-right { padding-right: 0.5em; }

    .s-padded-top { padding-top: 0.5em; }

    .s-padded-bottom { padding-bottom: 0.5em; }

    .s-padded-sides { padding: 0 0.5em; }

    .s-padded-vertical { padding: 0.5em 0; }

    .s-padded-inner { padding: 1em; }

    .s-padded-inner-sides { padding: 0 1em; }

    .s-padded-reverse {
        box-sizing: content-box;
        float: none;
        margin: 0 -0.5em;
        width: auto;
    }

    .s-padded-reverse-all {
        box-sizing: content-box;
        float: none;
        margin: -0.5em;
        width: auto;
    }

    /* miscellaneous helper classes */
    .s-flow-opposite { float: right; }

    .s-center { text-align: center; }

    .s-left { text-align: left; }

    .s-right { text-align: right; }

    .s-hidden { display: none; }
}

/* @media (min-width: 481px) and (max-width: 800px) { */

@media (min-width: 768px) and (max-width: 980px) {
    .m-grid-all, .m-grid-1, .m-grid-2, .m-grid-3, .m-grid-quarter, .m-grid-4, .m-grid-third, .m-grid-5, .m-grid-6, .m-grid-half, .m-grid-7, .m-grid-8, .m-grid-two-thirds, .m-grid-9, .m-grid-three-quarters, .m-grid-10, .m-grid-11, .m-grid-12, .m-grid-whole {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        *behavior: url(/boxsizing.htc);
        box-sizing: border-box;
        clear: none;
        float: left;
        margin: 0;
    }

    .m-grid-1 { width: 8.33333%; }

    .m-grid-2 { width: 16.66667%; }

    .m-grid-3, .m-grid-quarter { width: 25%; }

    .m-grid-4, .m-grid-third { width: 33.33333%; }

    .m-grid-5 { width: 41.66667%; }

    .m-grid-6, .m-grid-half { width: 50%; }

    .m-grid-7 { width: 58.33333%; }

    .m-grid-8, .m-grid-two-thirds { width: 66.66667%; }

    .m-grid-9, .m-grid-three-quarters { width: 75%; }

    .m-grid-10 { width: 83.33333%; }

    .m-grid-11 { width: 91.66667%; }

    .m-grid-12, .m-grid-whole { width: 100%; }

    /* padding helper classes */
    .m-padded { padding: 0.5em; }

    .m-padded-left { padding-left: 0.5em; }

    .m-padded-right { padding-right: 0.5em; }

    .m-padded-top { padding-top: 0.5em; }

    .m-padded-bottom { padding-bottom: 0.5em; }

    .m-padded-sides { padding: 0 0.5em; }

    .m-padded-vertical { padding: 0.5em 0; }

    .m-padded-inner { padding: 1em; }

    .m-padded-inner-sides { padding: 0 1em; }

    .m-padded-reverse {
        box-sizing: content-box;
        float: none;
        margin: 0 -0.5em;
        width: auto;
    }

    .m-padded-reverse-all {
        box-sizing: content-box;
        float: none;
        margin: -0.5em;
        width: auto;
    }

    /* miscellaneous helper classes */
    .m-flow-opposite { float: right; }

    .m-center { text-align: center; }

    .m-left { text-align: left; }

    .m-right { text-align: right; }

    .m-hidden { display: none; }
}

/* @media (min-width: 801px) { */

@media (min-width: 981px) {
    .l-grid-all, .l-grid-1, .l-grid-2, .l-grid-3, .l-grid-quarter, .l-grid-4, .l-grid-third, .l-grid-5, .l-grid-6, .l-grid-half, .l-grid-7, .l-grid-8, .l-grid-two-thirds, .l-grid-9, .l-grid-three-quarters, .l-grid-10, .l-grid-11, .l-grid-12, .l-grid-whole {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        *behavior: url(/boxsizing.htc);
        box-sizing: border-box;
        clear: none;
        float: left;
        margin: 0;
    }

    .l-grid-1 { width: 8.33333%; }

    .l-grid-2 { width: 16.66667%; }

    .l-grid-3, .l-grid-quarter { width: 25%; }

    .l-grid-4, .l-grid-third { width: 33.33333%; }

    .l-grid-5 { width: 41.66667%; }

    .l-grid-6, .l-grid-half { width: 50%; }

    .l-grid-7 { width: 58.33333%; }

    .l-grid-8, .l-grid-two-thirds { width: 66.66667%; }

    .l-grid-9, .l-grid-three-quarters { width: 75%; }

    .l-grid-10 { width: 83.33333%; }

    .l-grid-11 { width: 91.66667%; }

    .l-grid-12, .l-grid-whole { width: 100%; }

    /* padding helper classes */
    .l-padded { padding: 0.5em; }

    .l-padded-left { padding-left: 0.5em; }

    .l-padded-right { padding-right: 0.5em; }

    .l-padded-top { padding-top: 0.5em; }

    .l-padded-bottom { padding-bottom: 0.5em; }

    .l-padded-sides { padding: 0 0.5em; }

    .l-padded-vertical { padding: 0.5em 0; }

    .l-padded-inner { padding: 1em; }

    .l-padded-inner-sides { padding: 0 1em; }

    .l-padded-reverse {
        box-sizing: content-box;
        float: none;
        margin: 0 -0.5em;
        width: auto;
    }

    .l-padded-reverse-all {
        box-sizing: content-box;
        float: none;
        margin: -0.5em;
        width: auto;
    }

    /* miscellaneous helper classes */
    .l-flow-opposite { float: right; }

    .l-center { text-align: center; }

    .l-left { text-align: left; }

    .l-right { text-align: right; }

    .l-hidden { display: none; }
}