@charset "UTF-8";
/*------------------*
  $TOAST-GRID

  An insane grid.
  You'd be mad to use it.

  Usage
  =====

  Assuming default values:

  <div class="grid">
    <div class="grid__col grid__col-1-of-2">
      A half-width column.
    </div>
    <div class="grid__col grid__col-1-of-4 grid__col-pull-1-of-4">
      A quarter, pulled left by its own width. You get this, right?
    </div>
  </div>


  Customisation
  =============

  $toast-grid-namespace and $toast-grid-column-namespace
  adjusts the class names for the grid. With
  default values, grid wrappers have a class
  of '.grid' and columns '.grid__col'.

  $toast-col-groups(n) adjusts column divisions.
  For example, $toast-col-groups(12) will produce
  a 12-column grid. $col-groups(3,6,8)
  will produce a 3-, 6-, and 8-column grid.

  $toast-gutter-width is—you guessed it—the gutter
  width. Accepts any unit.

  That's it. Have fun.

\*------------------*/
.grid {
  list-style: none;
  margin-left: -20px; }

.col-2-of-2, .col-3-of-3, .col-4-of-4, .col-5-of-5, .col-6-of-6, .col-8-of-8, .col-12-of-12 {
  width: 100%; }

.col-1-of-2, .col-2-of-4, .col-3-of-6, .col-4-of-8, .col-6-of-12 {
  width: 50%; }

.col-1-of-3, .col-2-of-6, .col-4-of-12 {
  width: 33.33333%; }

.col-2-of-3, .col-4-of-6, .col-8-of-12 {
  width: 66.66667%; }

.col-1-of-4, .col-2-of-8, .col-3-of-12 {
  width: 25%; }

.col-3-of-4, .col-6-of-8, .col-9-of-12 {
  width: 75%; }

.col-push-2-of-2, .col-push-3-of-3, .col-push-4-of-4, .col-push-5-of-5, .col-push-6-of-6, .col-push-8-of-8, .col-push-12-of-12 {
  margin-left: 100%; }

.col-push-1-of-2, .col-push-2-of-4, .col-push-3-of-6, .col-push-4-of-8, .col-push-6-of-12 {
  margin-left: 50%; }

.col-push-1-of-3, .col-push-2-of-6, .col-push-4-of-12 {
  margin-left: 33.33333%; }

.col-push-2-of-3, .col-push-4-of-6, .col-push-8-of-12 {
  margin-left: 66.66667%; }

.col-push-1-of-4, .col-push-2-of-8, .col-push-3-of-12 {
  margin-left: 25%; }

.col-push-3-of-4, .col-push-6-of-8, .col-push-9-of-12 {
  margin-left: 75%; }

.col-pull-2-of-2, .col-pull-3-of-3, .col-pull-4-of-4, .col-pull-5-of-5, .col-pull-6-of-6, .col-pull-8-of-8, .col-pull-12-of-12 {
  margin-left: -100%; }

.col-pull-1-of-2, .col-pull-2-of-4, .col-pull-3-of-6, .col-pull-4-of-8, .col-pull-6-of-12 {
  margin-left: -50%; }

.col-pull-1-of-3, .col-pull-2-of-6, .col-pull-4-of-12 {
  margin-left: -33.33333%; }

.col-pull-2-of-3, .col-pull-4-of-6, .col-pull-8-of-12 {
  margin-left: -66.66667%; }

.col-pull-1-of-4, .col-pull-2-of-8, .col-pull-3-of-12 {
  margin-left: -25%; }

.col-pull-3-of-4, .col-pull-6-of-8, .col-pull-9-of-12 {
  margin-left: -75%; }

.col-1-of-5 {
  width: 20%; }

.col-push-1-of-5 {
  margin-left: 20%; }

.col-pull-1-of-5 {
  margin-left: -20%; }

.col-2-of-5 {
  width: 40%; }

.col-push-2-of-5 {
  margin-left: 40%; }

.col-pull-2-of-5 {
  margin-left: -40%; }

.col-3-of-5 {
  width: 60%; }

.col-push-3-of-5 {
  margin-left: 60%; }

.col-pull-3-of-5 {
  margin-left: -60%; }

.col-4-of-5 {
  width: 80%; }

.col-push-4-of-5 {
  margin-left: 80%; }

.col-pull-4-of-5 {
  margin-left: -80%; }

.col-1-of-6 {
  width: 16.66667%; }

.col-push-1-of-6 {
  margin-left: 16.66667%; }

.col-pull-1-of-6 {
  margin-left: -16.66667%; }

.col-5-of-6 {
  width: 83.33333%; }

.col-push-5-of-6 {
  margin-left: 83.33333%; }

.col-pull-5-of-6 {
  margin-left: -83.33333%; }

.col-1-of-8 {
  width: 12.5%; }

.col-push-1-of-8 {
  margin-left: 12.5%; }

.col-pull-1-of-8 {
  margin-left: -12.5%; }

.col-3-of-8 {
  width: 37.5%; }

.col-push-3-of-8 {
  margin-left: 37.5%; }

.col-pull-3-of-8 {
  margin-left: -37.5%; }

.col-5-of-8 {
  width: 62.5%; }

.col-push-5-of-8 {
  margin-left: 62.5%; }

.col-pull-5-of-8 {
  margin-left: -62.5%; }

.col-7-of-8 {
  width: 87.5%; }

.col-push-7-of-8 {
  margin-left: 87.5%; }

.col-pull-7-of-8 {
  margin-left: -87.5%; }

.col-1-of-12 {
  width: 8.33333%; }

.col-push-1-of-12 {
  margin-left: 8.33333%; }

.col-pull-1-of-12 {
  margin-left: -8.33333%; }

.col-2-of-12 {
  width: 16.66667%; }

.col-push-2-of-12 {
  margin-left: 16.66667%; }

.col-pull-2-of-12 {
  margin-left: -16.66667%; }

.col-5-of-12 {
  width: 41.66667%; }

.col-push-5-of-12 {
  margin-left: 41.66667%; }

.col-pull-5-of-12 {
  margin-left: -41.66667%; }

.col-7-of-12 {
  width: 58.33333%; }

.col-push-7-of-12 {
  margin-left: 58.33333%; }

.col-pull-7-of-12 {
  margin-left: -58.33333%; }

.col-10-of-12 {
  width: 83.33333%; }

.col-push-10-of-12 {
  margin-left: 83.33333%; }

.col-pull-10-of-12 {
  margin-left: -83.33333%; }

.col-11-of-12 {
  width: 91.66667%; }

.col-push-11-of-12 {
  margin-left: 91.66667%; }

.col-pull-11-of-12 {
  margin-left: -91.66667%; }

.col {
  box-sizing: border-box;
  display: inline-block;
  margin-right: -.25em;
  min-height: 1px;
  padding-left: 20px;
  vertical-align: top; }
  @media (max-width: 1024px) {
    .col {
      display: block;
      margin-left: 0;
      margin-right: 0;
      width: auto; } }
  @media (max-width: 1024px) and (min-width: 767px) {
    .col[class*="col-m-"] {
      display: inline-block;
      margin-right: -.24em; }
    .col.col-m-1-of-2, .col.col-m-2-of-4 {
      width: 50%; }
    .col.col-m-1-of-3 {
      width: 33.33333%; }
    .col.col-m-2-of-3 {
      width: 66.66667%; }
    .col.col-m-1-of-4 {
      width: 25%; }
    .col.col-m-3-of-4 {
      width: 75%; } }
  @media (max-width: 767px) {
    .col[class*="col-s-"] {
      display: inline-block;
      margin-right: -.24em; }
    .col.col-s-1-of-2, .col.col-s-2-of-4 {
      width: 50%; }
    .col.col-s-1-of-3 {
      width: 33.33333%; }
    .col.col-s-2-of-3 {
      width: 66.66667%; }
    .col.col-s-1-of-4 {
      width: 25%; }
    .col.col-s-3-of-4 {
      width: 75%; } }

.col-centered {
  display: block;
  margin-left: auto;
  margin-right: auto; }

.col-d-first {
  float: left; }

.col-d-last {
  float: right; }

.grid-no-gutter {
  margin-left: 0;
  width: 100%; }
  .grid-no-gutter .col {
    padding-left: 0; }
  .grid-no-gutter .col-span-all {
    margin-left: 0;
    width: 100%; }

.col-ab {
  vertical-align: bottom; }

.col-am {
  vertical-align: middle; }