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

  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

  See examples-grid.scss for usage.
*/
.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 {
  margin: 0;
  clear: none;
  float: left;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  *behavior: url(boxsizing.htc); }

.offset-0 {
  margin-left: 0; }

.grid-1 {
  width: 8.33333%; }

.offset-1 {
  margin-left: 8.33333%; }

.grid-2 {
  width: 16.66667%; }

.offset-2 {
  margin-left: 16.66667%; }

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

.offset-3 {
  margin-left: 25%; }

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

.offset-4 {
  margin-left: 33.33333%; }

.grid-5 {
  width: 41.66667%; }

.offset-5 {
  margin-left: 41.66667%; }

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

.offset-6 {
  margin-left: 50%; }

.grid-7 {
  width: 58.33333%; }

.offset-7 {
  margin-left: 58.33333%; }

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

.offset-8 {
  margin-left: 66.66667%; }

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

.offset-9 {
  margin-left: 75%; }

.grid-10 {
  width: 83.33333%; }

.offset-10 {
  margin-left: 83.33333%; }

.grid-11 {
  width: 91.66667%; }

.offset-11 {
  margin-left: 91.66667%; }

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

.offset-12 {
  margin-left: 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 {
  margin: 0 -0.5em;
  width: auto;
  box-sizing: content-box;
  float: none; }

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

/* 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 {
  margin: 0 -0.5em;
  width: auto;
  box-sizing: content-box;
  float: none; }

@media (max-width: 480px) {
  .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 {
    margin: 0;
    clear: none;
    float: left;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    *behavior: url(boxsizing.htc); }
  .s-offset-0 {
    margin-left: 0; }
  .s-grid-1 {
    width: 8.33333%; }
  .s-offset-1 {
    margin-left: 8.33333%; }
  .s-grid-2 {
    width: 16.66667%; }
  .s-offset-2 {
    margin-left: 16.66667%; }
  .s-grid-3, .s-grid-quarter {
    width: 25%; }
  .s-offset-3 {
    margin-left: 25%; }
  .s-grid-4, .s-grid-third {
    width: 33.33333%; }
  .s-offset-4 {
    margin-left: 33.33333%; }
  .s-grid-5 {
    width: 41.66667%; }
  .s-offset-5 {
    margin-left: 41.66667%; }
  .s-grid-6, .s-grid-half {
    width: 50%; }
  .s-offset-6 {
    margin-left: 50%; }
  .s-grid-7 {
    width: 58.33333%; }
  .s-offset-7 {
    margin-left: 58.33333%; }
  .s-grid-8, .s-grid-two-thirds {
    width: 66.66667%; }
  .s-offset-8 {
    margin-left: 66.66667%; }
  .s-grid-9, .s-grid-three-quarters {
    width: 75%; }
  .s-offset-9 {
    margin-left: 75%; }
  .s-grid-10 {
    width: 83.33333%; }
  .s-offset-10 {
    margin-left: 83.33333%; }
  .s-grid-11 {
    width: 91.66667%; }
  .s-offset-11 {
    margin-left: 91.66667%; }
  .s-grid-12, .s-grid-whole {
    width: 100%; }
  .s-offset-12 {
    margin-left: 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 {
    margin: 0 -0.5em;
    width: auto;
    box-sizing: content-box;
    float: none; }
  .s-padded-reverse-all {
    margin: -0.5em;
    width: auto;
    box-sizing: content-box;
    float: none; }
  /* 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) {
  .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 {
    margin: 0;
    clear: none;
    float: left;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    *behavior: url(boxsizing.htc); }
  .m-offset-0 {
    margin-left: 0; }
  .m-grid-1 {
    width: 8.33333%; }
  .m-offset-1 {
    margin-left: 8.33333%; }
  .m-grid-2 {
    width: 16.66667%; }
  .m-offset-2 {
    margin-left: 16.66667%; }
  .m-grid-3, .m-grid-quarter {
    width: 25%; }
  .m-offset-3 {
    margin-left: 25%; }
  .m-grid-4, .m-grid-third {
    width: 33.33333%; }
  .m-offset-4 {
    margin-left: 33.33333%; }
  .m-grid-5 {
    width: 41.66667%; }
  .m-offset-5 {
    margin-left: 41.66667%; }
  .m-grid-6, .m-grid-half {
    width: 50%; }
  .m-offset-6 {
    margin-left: 50%; }
  .m-grid-7 {
    width: 58.33333%; }
  .m-offset-7 {
    margin-left: 58.33333%; }
  .m-grid-8, .m-grid-two-thirds {
    width: 66.66667%; }
  .m-offset-8 {
    margin-left: 66.66667%; }
  .m-grid-9, .m-grid-three-quarters {
    width: 75%; }
  .m-offset-9 {
    margin-left: 75%; }
  .m-grid-10 {
    width: 83.33333%; }
  .m-offset-10 {
    margin-left: 83.33333%; }
  .m-grid-11 {
    width: 91.66667%; }
  .m-offset-11 {
    margin-left: 91.66667%; }
  .m-grid-12, .m-grid-whole {
    width: 100%; }
  .m-offset-12 {
    margin-left: 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 {
    margin: 0 -0.5em;
    width: auto;
    box-sizing: content-box;
    float: none; }
  .m-padded-reverse-all {
    margin: -0.5em;
    width: auto;
    box-sizing: content-box;
    float: none; }
  /* 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) {
  .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 {
    margin: 0;
    clear: none;
    float: left;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    *behavior: url(boxsizing.htc); }
  .l-offset-0 {
    margin-left: 0; }
  .l-grid-1 {
    width: 8.33333%; }
  .l-offset-1 {
    margin-left: 8.33333%; }
  .l-grid-2 {
    width: 16.66667%; }
  .l-offset-2 {
    margin-left: 16.66667%; }
  .l-grid-3, .l-grid-quarter {
    width: 25%; }
  .l-offset-3 {
    margin-left: 25%; }
  .l-grid-4, .l-grid-third {
    width: 33.33333%; }
  .l-offset-4 {
    margin-left: 33.33333%; }
  .l-grid-5 {
    width: 41.66667%; }
  .l-offset-5 {
    margin-left: 41.66667%; }
  .l-grid-6, .l-grid-half {
    width: 50%; }
  .l-offset-6 {
    margin-left: 50%; }
  .l-grid-7 {
    width: 58.33333%; }
  .l-offset-7 {
    margin-left: 58.33333%; }
  .l-grid-8, .l-grid-two-thirds {
    width: 66.66667%; }
  .l-offset-8 {
    margin-left: 66.66667%; }
  .l-grid-9, .l-grid-three-quarters {
    width: 75%; }
  .l-offset-9 {
    margin-left: 75%; }
  .l-grid-10 {
    width: 83.33333%; }
  .l-offset-10 {
    margin-left: 83.33333%; }
  .l-grid-11 {
    width: 91.66667%; }
  .l-offset-11 {
    margin-left: 91.66667%; }
  .l-grid-12, .l-grid-whole {
    width: 100%; }
  .l-offset-12 {
    margin-left: 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 {
    margin: 0 -0.5em;
    width: auto;
    box-sizing: content-box;
    float: none; }
  .l-padded-reverse-all {
    margin: -0.5em;
    width: auto;
    box-sizing: content-box;
    float: none; }
  /* 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; } }