@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: -40px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.col--pull-9-of-12, .col--pull-6-of-8, .col--pull-3-of-4 {
  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.6666666667%;
}

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

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

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

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

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

.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.3333333333%;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.col {
  box-sizing: border-box;
  display: inline-block;
  margin-right: -0.25em;
  min-height: 1px;
  padding-left: 40px;
  vertical-align: top;
}
@media (max-width: 700px) {
  .col {
    display: block;
    margin-left: 0;
    margin-right: 0;
    width: auto;
  }
}
@media (max-width: 700px) and (min-width: 480px) {
  .col[class*=col--m-] {
    display: inline-block;
    margin-right: -0.24em;
  }
  .col.col--m-1-of-2, .col.col--m-2-of-4 {
    width: 50%;
  }
  .col.col--m-1-of-3 {
    width: 33.3333333333%;
  }
  .col.col--m-2-of-3 {
    width: 66.6666666667%;
  }
  .col.col--m-1-of-4 {
    width: 25%;
  }
  .col.col--m-3-of-4 {
    width: 75%;
  }
}
@media (max-width: 480px) {
  .col[class*=col--s-] {
    display: inline-block;
    margin-right: -0.24em;
  }
  .col.col--s-1-of-2, .col.col--s-2-of-4 {
    width: 50%;
  }
  .col.col--s-1-of-3 {
    width: 33.3333333333%;
  }
  .col.col--s-2-of-3 {
    width: 66.6666666667%;
  }
  .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;
}

/*# sourceMappingURL=ctoas.css.map */