/* 
  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-12, .grid-whole, .grid-11, .grid-10, .grid-9, .grid-three-quarters, .grid-8, .grid-two-thirds, .grid-7, .grid-6, .grid-half, .grid-5, .grid-4, .grid-third, .grid-3, .grid-quarter, .grid-2, .grid-1 {
  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.3333333333%;
}

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

.grid-2 {
  width: 16.6666666667%;
}

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

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

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

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

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

.grid-5 {
  width: 41.6666666667%;
}

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

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

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

.grid-7 {
  width: 58.3333333333%;
}

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

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

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

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

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

.grid-10 {
  width: 83.3333333333%;
}

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

.grid-11 {
  width: 91.6666666667%;
}

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

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

.offset-12 {
  margin-left: 100%;
}

/* padding helper classes */
.padded {
  padding: 1em;
}

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

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

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

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

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

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

.padded-inner {
  padding: 1.5em;
}

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

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

.padded-reverse-all {
  margin: -1em;
  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 -1em;
  width: auto;
  box-sizing: content-box;
  float: none;
}

@media (max-width: 600px) {
  .s-grid-all, .s-grid-12, .s-grid-whole, .s-grid-11, .s-grid-10, .s-grid-9, .s-grid-three-quarters, .s-grid-8, .s-grid-two-thirds, .s-grid-7, .s-grid-6, .s-grid-half, .s-grid-5, .s-grid-4, .s-grid-third, .s-grid-3, .s-grid-quarter, .s-grid-2, .s-grid-1 {
    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.3333333333%;
  }

  .s-offset-1 {
    margin-left: 8.3333333333%;
  }

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

  .s-offset-2 {
    margin-left: 16.6666666667%;
  }

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

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

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

  .s-offset-4 {
    margin-left: 33.3333333333%;
  }

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

  .s-offset-5 {
    margin-left: 41.6666666667%;
  }

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

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

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

  .s-offset-7 {
    margin-left: 58.3333333333%;
  }

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

  .s-offset-8 {
    margin-left: 66.6666666667%;
  }

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

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

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

  .s-offset-10 {
    margin-left: 83.3333333333%;
  }

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

  .s-offset-11 {
    margin-left: 91.6666666667%;
  }

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

  .s-offset-12 {
    margin-left: 100%;
  }

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

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

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

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

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

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

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

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

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

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

  .s-padded-reverse-all {
    margin: -1em;
    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: 601px) and (max-width: 800px) {
  .m-grid-all, .m-grid-12, .m-grid-whole, .m-grid-11, .m-grid-10, .m-grid-9, .m-grid-three-quarters, .m-grid-8, .m-grid-two-thirds, .m-grid-7, .m-grid-6, .m-grid-half, .m-grid-5, .m-grid-4, .m-grid-third, .m-grid-3, .m-grid-quarter, .m-grid-2, .m-grid-1 {
    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.3333333333%;
  }

  .m-offset-1 {
    margin-left: 8.3333333333%;
  }

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

  .m-offset-2 {
    margin-left: 16.6666666667%;
  }

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

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

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

  .m-offset-4 {
    margin-left: 33.3333333333%;
  }

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

  .m-offset-5 {
    margin-left: 41.6666666667%;
  }

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

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

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

  .m-offset-7 {
    margin-left: 58.3333333333%;
  }

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

  .m-offset-8 {
    margin-left: 66.6666666667%;
  }

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

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

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

  .m-offset-10 {
    margin-left: 83.3333333333%;
  }

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

  .m-offset-11 {
    margin-left: 91.6666666667%;
  }

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

  .m-offset-12 {
    margin-left: 100%;
  }

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

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

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

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

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

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

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

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

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

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

  .m-padded-reverse-all {
    margin: -1em;
    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-12, .l-grid-whole, .l-grid-11, .l-grid-10, .l-grid-9, .l-grid-three-quarters, .l-grid-8, .l-grid-two-thirds, .l-grid-7, .l-grid-6, .l-grid-half, .l-grid-5, .l-grid-4, .l-grid-third, .l-grid-3, .l-grid-quarter, .l-grid-2, .l-grid-1 {
    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.3333333333%;
  }

  .l-offset-1 {
    margin-left: 8.3333333333%;
  }

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

  .l-offset-2 {
    margin-left: 16.6666666667%;
  }

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

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

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

  .l-offset-4 {
    margin-left: 33.3333333333%;
  }

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

  .l-offset-5 {
    margin-left: 41.6666666667%;
  }

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

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

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

  .l-offset-7 {
    margin-left: 58.3333333333%;
  }

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

  .l-offset-8 {
    margin-left: 66.6666666667%;
  }

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

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

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

  .l-offset-10 {
    margin-left: 83.3333333333%;
  }

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

  .l-offset-11 {
    margin-left: 91.6666666667%;
  }

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

  .l-offset-12 {
    margin-left: 100%;
  }

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

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

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

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

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

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

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

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

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

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

  .l-padded-reverse-all {
    margin: -1em;
    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;
  }
}