/*!
 * Flexgrid.css by axiomzen.co - github.com/axiomzen/flexgrid.css
 * License - MIT
 */
/**
 * Grid
 *
 * This is the root element of a grid object. In it, we exhibit a few main
 * behaviours. The modifiers also help with certain behaviours.
 *
 * [0]  Safety net box sizing reset
 * [1]  All Grids are flex containers
 * [2]  By default, they wrap cells to a new line for responsiveness
 * [3]  Grids can be applied to lists as well, thus the list resets
 * [4]  Changes the layout direction to columnar
 * [5]  Aligns flex items to the start of the flex line
 * [6]  Aligns flex items to the end of the flex line
 * [7]  Aligns flex items to the center of the flex line
 * [8]  Packs flex items around the center of the main axis
 * [9]  Packs flex items towards the end of the main axis
 * [10] Distributes space evenly on the main axis between flex items
 * [11] Distributes space evenly on the main axis around flex items
 *
 * Example HTML:
 *
 * <div class="Grid"></div>
 * <ul class="Grid"></ul>
 * <ol class="Grid"></ol>
 */
.Grid {
  box-sizing: border-box;
  /* 0 */
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  /* 1 */
  -webkit-flex-flow: row wrap;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  /* 2 */
  list-style: none;
  /* 3 */
  margin: 0;
  /* 3 */
  padding: 0;
  /* 3 */
}

.Grid--column {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  /* 4 */
}

.Grid--alignStart {
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
              -ms-grid-row-align: flex-start;
          align-items: flex-start;
  /* 5 */
}

.Grid--alignEnd {
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
              -ms-grid-row-align: flex-end;
          align-items: flex-end;
  /*  6 */
}

.Grid--alignCenter {
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
              -ms-grid-row-align: center;
          align-items: center;
  /* 7 */
}

.Grid--justifyCenter {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  /* 8 */
}

.Grid--justifyEnd {
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  /* 9 */
}

.Grid--spaceBetween {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  /* 10 */
}

.Grid--spaceAround {
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
  /* 11 */
}

/**
 * Grid-cell
 *
 * Grid cells are the content containers that live inside of grids. By default,
 * they just fill the available space.
 *
 * Example HTML:
 *
 * <div class="Grid">
 *   <div class="Grid-cell">...</div>
 *   <div class="Grid-cell">...</div>
 *   ...
 * </div>
 */
.Grid-cell {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.Grid-cell--auto {
  -webkit-box-flex: 0;
  -webkit-flex: 0 1 auto;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
}

/**
 * Grid-cell--[size]
 * Grid-cell--[size]-[span]
 * Grid-cell--[size]-offset-[span]
 *
 * For the sake of the following documentation, let's assume that the breakpoint
 * sizes in the gridconfig remain:
 *
 * [xs, sm, md, lg, xl, xx]
 *
 * In this sequence of modifiers, there's a bit going on. We're iterating over
 * the breakpoints in the grid configuration, and applying modifiers to the
 * grid cells. We're also iterating over the number of columns in the grid
 * configuration, and appending more modifiers to grid cells. Let's look at
 * the two main modifier types:
 *
 * Grid-cell--[size]
 *
 * These modifiers cause grid cells to break at a certain size, denoted above
 * by [size]. By default, they occupy 100% width, and then at a certain
 * breakpoint, they transform to fill the available space.
 *
 * Example HTML:
 *
 * <div class="Grid">
 *   <div class="Grid-cell--sm"></div>
 *   <div class="Grid-cell--sm"></div>
 *   <div class="Grid-cell--sm"></div>
 *   ...
 * </div>
 *
 * Grid-cell--[size]-[span]
 *
 * These modifiers are meant to be used declaratively, and chaining them
 * together in the markup determines how they behave at certain screen widths.
 * When building a grid system using these modifiers, the most important part
 * is the declarations at the smallest screen size. If these are left out, grid
 * cells will just auto fill whatever space they take up.
 *
 * Example HTML:
 *
 * <div class="Grid">
 *   <div class="Grid-cell--xs-12 Grid-cell--sm-4 Grid-cell--lg-2"></div>
 *   <div class="Grid-cell--xs-12 Grid-cell--sm-4 Grid-cell--lg-8"></div>
 *   <div class="Grid-cell--xs-12 Grid-cell--sm-4 Grid-cell--lg-2"></div>
 * </div>
 *
 * Grid-cell--[size]-offset-[span]
 *
 * These modifiers can also be used declaratively, and chaining them together
 * will add offsets to grid cells at various breakpoints. For example, at the
 * smallest breakpoint, you can have an offset of 0 columns, at a medium
 * breakpoint, an offset of 4 columns, and at a large breakpoint, an offset of
 * 2 columns. Offsets are from the left, as that's where the horizontal stacking
 * of columns begins. If at any point, you want the offset to go back to 0, you
 * can use the offset-0 modifier.
 *
 * Example HTML:
 *
 * <div class="Grid Grid--gutter-xl">
 *   <div class="Grid-cell--xs-12 Grid-cell--md-6 Grid-cell--md-offset-6"></div>
 *   <div class="Grid-cell--xs-12 Grid-cell--md-8"></div>
 * </div>
 *
 * It's important to be careful that your offsets + cell spans don't overflow
 * outside the rows...a little bit of very basic math is required!
 */
.Grid-cell--xs {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 100%;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
  max-width: 100%;
}

@media (min-width: 320px) {
  .Grid-cell--xs {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
}

.Grid-cell--xs-1 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 8.33333%;
      -ms-flex: 0 0 8.33333%;
          flex: 0 0 8.33333%;
  max-width: 8.33333%;
}

.Grid-cell--xs-2 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 16.66667%;
      -ms-flex: 0 0 16.66667%;
          flex: 0 0 16.66667%;
  max-width: 16.66667%;
}

.Grid-cell--xs-3 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 25%;
      -ms-flex: 0 0 25%;
          flex: 0 0 25%;
  max-width: 25%;
}

.Grid-cell--xs-4 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 33.33333%;
      -ms-flex: 0 0 33.33333%;
          flex: 0 0 33.33333%;
  max-width: 33.33333%;
}

.Grid-cell--xs-5 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 41.66667%;
      -ms-flex: 0 0 41.66667%;
          flex: 0 0 41.66667%;
  max-width: 41.66667%;
}

.Grid-cell--xs-6 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 50%;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  max-width: 50%;
}

.Grid-cell--xs-7 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 58.33333%;
      -ms-flex: 0 0 58.33333%;
          flex: 0 0 58.33333%;
  max-width: 58.33333%;
}

.Grid-cell--xs-8 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 66.66667%;
      -ms-flex: 0 0 66.66667%;
          flex: 0 0 66.66667%;
  max-width: 66.66667%;
}

.Grid-cell--xs-9 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 75%;
      -ms-flex: 0 0 75%;
          flex: 0 0 75%;
  max-width: 75%;
}

.Grid-cell--xs-10 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 83.33333%;
      -ms-flex: 0 0 83.33333%;
          flex: 0 0 83.33333%;
  max-width: 83.33333%;
}

.Grid-cell--xs-11 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 91.66667%;
      -ms-flex: 0 0 91.66667%;
          flex: 0 0 91.66667%;
  max-width: 91.66667%;
}

.Grid-cell--xs-12 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 100%;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
  max-width: 100%;
}

@media (min-width: 320px) {
  .Grid-cell--xs-1 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 8.33333%;
        -ms-flex: 0 0 8.33333%;
            flex: 0 0 8.33333%;
    max-width: 8.33333%;
  }
  .Grid-cell--xs-2 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 16.66667%;
        -ms-flex: 0 0 16.66667%;
            flex: 0 0 16.66667%;
    max-width: 16.66667%;
  }
  .Grid-cell--xs-3 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 25%;
        -ms-flex: 0 0 25%;
            flex: 0 0 25%;
    max-width: 25%;
  }
  .Grid-cell--xs-4 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 33.33333%;
        -ms-flex: 0 0 33.33333%;
            flex: 0 0 33.33333%;
    max-width: 33.33333%;
  }
  .Grid-cell--xs-5 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 41.66667%;
        -ms-flex: 0 0 41.66667%;
            flex: 0 0 41.66667%;
    max-width: 41.66667%;
  }
  .Grid-cell--xs-6 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 50%;
        -ms-flex: 0 0 50%;
            flex: 0 0 50%;
    max-width: 50%;
  }
  .Grid-cell--xs-7 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 58.33333%;
        -ms-flex: 0 0 58.33333%;
            flex: 0 0 58.33333%;
    max-width: 58.33333%;
  }
  .Grid-cell--xs-8 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 66.66667%;
        -ms-flex: 0 0 66.66667%;
            flex: 0 0 66.66667%;
    max-width: 66.66667%;
  }
  .Grid-cell--xs-9 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 75%;
        -ms-flex: 0 0 75%;
            flex: 0 0 75%;
    max-width: 75%;
  }
  .Grid-cell--xs-10 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 83.33333%;
        -ms-flex: 0 0 83.33333%;
            flex: 0 0 83.33333%;
    max-width: 83.33333%;
  }
  .Grid-cell--xs-11 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 91.66667%;
        -ms-flex: 0 0 91.66667%;
            flex: 0 0 91.66667%;
    max-width: 91.66667%;
  }
  .Grid-cell--xs-12 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 100%;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    max-width: 100%;
  }
}

@media (min-width: 320px) {
  .Grid-cell--xs-offset-0 {
    margin-left: 0%;
  }
  .Grid-cell--xs-offset-1 {
    margin-left: 8.33333%;
  }
  .Grid-cell--xs-offset-2 {
    margin-left: 16.66667%;
  }
  .Grid-cell--xs-offset-3 {
    margin-left: 25%;
  }
  .Grid-cell--xs-offset-4 {
    margin-left: 33.33333%;
  }
  .Grid-cell--xs-offset-5 {
    margin-left: 41.66667%;
  }
  .Grid-cell--xs-offset-6 {
    margin-left: 50%;
  }
  .Grid-cell--xs-offset-7 {
    margin-left: 58.33333%;
  }
  .Grid-cell--xs-offset-8 {
    margin-left: 66.66667%;
  }
  .Grid-cell--xs-offset-9 {
    margin-left: 75%;
  }
  .Grid-cell--xs-offset-10 {
    margin-left: 83.33333%;
  }
  .Grid-cell--xs-offset-11 {
    margin-left: 91.66667%;
  }
  .Grid-cell--xs-offset-12 {
    margin-left: 100%;
  }
}

.Grid-cell--sm {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 100%;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
  max-width: 100%;
}

@media (min-width: 480px) {
  .Grid-cell--sm {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
}

@media (min-width: 480px) {
  .Grid-cell--sm-1 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 8.33333%;
        -ms-flex: 0 0 8.33333%;
            flex: 0 0 8.33333%;
    max-width: 8.33333%;
  }
  .Grid-cell--sm-2 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 16.66667%;
        -ms-flex: 0 0 16.66667%;
            flex: 0 0 16.66667%;
    max-width: 16.66667%;
  }
  .Grid-cell--sm-3 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 25%;
        -ms-flex: 0 0 25%;
            flex: 0 0 25%;
    max-width: 25%;
  }
  .Grid-cell--sm-4 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 33.33333%;
        -ms-flex: 0 0 33.33333%;
            flex: 0 0 33.33333%;
    max-width: 33.33333%;
  }
  .Grid-cell--sm-5 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 41.66667%;
        -ms-flex: 0 0 41.66667%;
            flex: 0 0 41.66667%;
    max-width: 41.66667%;
  }
  .Grid-cell--sm-6 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 50%;
        -ms-flex: 0 0 50%;
            flex: 0 0 50%;
    max-width: 50%;
  }
  .Grid-cell--sm-7 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 58.33333%;
        -ms-flex: 0 0 58.33333%;
            flex: 0 0 58.33333%;
    max-width: 58.33333%;
  }
  .Grid-cell--sm-8 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 66.66667%;
        -ms-flex: 0 0 66.66667%;
            flex: 0 0 66.66667%;
    max-width: 66.66667%;
  }
  .Grid-cell--sm-9 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 75%;
        -ms-flex: 0 0 75%;
            flex: 0 0 75%;
    max-width: 75%;
  }
  .Grid-cell--sm-10 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 83.33333%;
        -ms-flex: 0 0 83.33333%;
            flex: 0 0 83.33333%;
    max-width: 83.33333%;
  }
  .Grid-cell--sm-11 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 91.66667%;
        -ms-flex: 0 0 91.66667%;
            flex: 0 0 91.66667%;
    max-width: 91.66667%;
  }
  .Grid-cell--sm-12 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 100%;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    max-width: 100%;
  }
}

@media (min-width: 480px) {
  .Grid-cell--sm-offset-0 {
    margin-left: 0%;
  }
  .Grid-cell--sm-offset-1 {
    margin-left: 8.33333%;
  }
  .Grid-cell--sm-offset-2 {
    margin-left: 16.66667%;
  }
  .Grid-cell--sm-offset-3 {
    margin-left: 25%;
  }
  .Grid-cell--sm-offset-4 {
    margin-left: 33.33333%;
  }
  .Grid-cell--sm-offset-5 {
    margin-left: 41.66667%;
  }
  .Grid-cell--sm-offset-6 {
    margin-left: 50%;
  }
  .Grid-cell--sm-offset-7 {
    margin-left: 58.33333%;
  }
  .Grid-cell--sm-offset-8 {
    margin-left: 66.66667%;
  }
  .Grid-cell--sm-offset-9 {
    margin-left: 75%;
  }
  .Grid-cell--sm-offset-10 {
    margin-left: 83.33333%;
  }
  .Grid-cell--sm-offset-11 {
    margin-left: 91.66667%;
  }
  .Grid-cell--sm-offset-12 {
    margin-left: 100%;
  }
}

.Grid-cell--md {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 100%;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
  max-width: 100%;
}

@media (min-width: 640px) {
  .Grid-cell--md {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
}

@media (min-width: 640px) {
  .Grid-cell--md-1 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 8.33333%;
        -ms-flex: 0 0 8.33333%;
            flex: 0 0 8.33333%;
    max-width: 8.33333%;
  }
  .Grid-cell--md-2 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 16.66667%;
        -ms-flex: 0 0 16.66667%;
            flex: 0 0 16.66667%;
    max-width: 16.66667%;
  }
  .Grid-cell--md-3 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 25%;
        -ms-flex: 0 0 25%;
            flex: 0 0 25%;
    max-width: 25%;
  }
  .Grid-cell--md-4 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 33.33333%;
        -ms-flex: 0 0 33.33333%;
            flex: 0 0 33.33333%;
    max-width: 33.33333%;
  }
  .Grid-cell--md-5 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 41.66667%;
        -ms-flex: 0 0 41.66667%;
            flex: 0 0 41.66667%;
    max-width: 41.66667%;
  }
  .Grid-cell--md-6 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 50%;
        -ms-flex: 0 0 50%;
            flex: 0 0 50%;
    max-width: 50%;
  }
  .Grid-cell--md-7 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 58.33333%;
        -ms-flex: 0 0 58.33333%;
            flex: 0 0 58.33333%;
    max-width: 58.33333%;
  }
  .Grid-cell--md-8 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 66.66667%;
        -ms-flex: 0 0 66.66667%;
            flex: 0 0 66.66667%;
    max-width: 66.66667%;
  }
  .Grid-cell--md-9 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 75%;
        -ms-flex: 0 0 75%;
            flex: 0 0 75%;
    max-width: 75%;
  }
  .Grid-cell--md-10 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 83.33333%;
        -ms-flex: 0 0 83.33333%;
            flex: 0 0 83.33333%;
    max-width: 83.33333%;
  }
  .Grid-cell--md-11 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 91.66667%;
        -ms-flex: 0 0 91.66667%;
            flex: 0 0 91.66667%;
    max-width: 91.66667%;
  }
  .Grid-cell--md-12 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 100%;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    max-width: 100%;
  }
}

@media (min-width: 640px) {
  .Grid-cell--md-offset-0 {
    margin-left: 0%;
  }
  .Grid-cell--md-offset-1 {
    margin-left: 8.33333%;
  }
  .Grid-cell--md-offset-2 {
    margin-left: 16.66667%;
  }
  .Grid-cell--md-offset-3 {
    margin-left: 25%;
  }
  .Grid-cell--md-offset-4 {
    margin-left: 33.33333%;
  }
  .Grid-cell--md-offset-5 {
    margin-left: 41.66667%;
  }
  .Grid-cell--md-offset-6 {
    margin-left: 50%;
  }
  .Grid-cell--md-offset-7 {
    margin-left: 58.33333%;
  }
  .Grid-cell--md-offset-8 {
    margin-left: 66.66667%;
  }
  .Grid-cell--md-offset-9 {
    margin-left: 75%;
  }
  .Grid-cell--md-offset-10 {
    margin-left: 83.33333%;
  }
  .Grid-cell--md-offset-11 {
    margin-left: 91.66667%;
  }
  .Grid-cell--md-offset-12 {
    margin-left: 100%;
  }
}

.Grid-cell--lg {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 100%;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
  max-width: 100%;
}

@media (min-width: 760px) {
  .Grid-cell--lg {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
}

@media (min-width: 760px) {
  .Grid-cell--lg-1 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 8.33333%;
        -ms-flex: 0 0 8.33333%;
            flex: 0 0 8.33333%;
    max-width: 8.33333%;
  }
  .Grid-cell--lg-2 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 16.66667%;
        -ms-flex: 0 0 16.66667%;
            flex: 0 0 16.66667%;
    max-width: 16.66667%;
  }
  .Grid-cell--lg-3 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 25%;
        -ms-flex: 0 0 25%;
            flex: 0 0 25%;
    max-width: 25%;
  }
  .Grid-cell--lg-4 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 33.33333%;
        -ms-flex: 0 0 33.33333%;
            flex: 0 0 33.33333%;
    max-width: 33.33333%;
  }
  .Grid-cell--lg-5 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 41.66667%;
        -ms-flex: 0 0 41.66667%;
            flex: 0 0 41.66667%;
    max-width: 41.66667%;
  }
  .Grid-cell--lg-6 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 50%;
        -ms-flex: 0 0 50%;
            flex: 0 0 50%;
    max-width: 50%;
  }
  .Grid-cell--lg-7 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 58.33333%;
        -ms-flex: 0 0 58.33333%;
            flex: 0 0 58.33333%;
    max-width: 58.33333%;
  }
  .Grid-cell--lg-8 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 66.66667%;
        -ms-flex: 0 0 66.66667%;
            flex: 0 0 66.66667%;
    max-width: 66.66667%;
  }
  .Grid-cell--lg-9 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 75%;
        -ms-flex: 0 0 75%;
            flex: 0 0 75%;
    max-width: 75%;
  }
  .Grid-cell--lg-10 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 83.33333%;
        -ms-flex: 0 0 83.33333%;
            flex: 0 0 83.33333%;
    max-width: 83.33333%;
  }
  .Grid-cell--lg-11 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 91.66667%;
        -ms-flex: 0 0 91.66667%;
            flex: 0 0 91.66667%;
    max-width: 91.66667%;
  }
  .Grid-cell--lg-12 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 100%;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    max-width: 100%;
  }
}

@media (min-width: 760px) {
  .Grid-cell--lg-offset-0 {
    margin-left: 0%;
  }
  .Grid-cell--lg-offset-1 {
    margin-left: 8.33333%;
  }
  .Grid-cell--lg-offset-2 {
    margin-left: 16.66667%;
  }
  .Grid-cell--lg-offset-3 {
    margin-left: 25%;
  }
  .Grid-cell--lg-offset-4 {
    margin-left: 33.33333%;
  }
  .Grid-cell--lg-offset-5 {
    margin-left: 41.66667%;
  }
  .Grid-cell--lg-offset-6 {
    margin-left: 50%;
  }
  .Grid-cell--lg-offset-7 {
    margin-left: 58.33333%;
  }
  .Grid-cell--lg-offset-8 {
    margin-left: 66.66667%;
  }
  .Grid-cell--lg-offset-9 {
    margin-left: 75%;
  }
  .Grid-cell--lg-offset-10 {
    margin-left: 83.33333%;
  }
  .Grid-cell--lg-offset-11 {
    margin-left: 91.66667%;
  }
  .Grid-cell--lg-offset-12 {
    margin-left: 100%;
  }
}

.Grid-cell--xl {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 100%;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
  max-width: 100%;
}

@media (min-width: 1020px) {
  .Grid-cell--xl {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
}

@media (min-width: 1020px) {
  .Grid-cell--xl-1 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 8.33333%;
        -ms-flex: 0 0 8.33333%;
            flex: 0 0 8.33333%;
    max-width: 8.33333%;
  }
  .Grid-cell--xl-2 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 16.66667%;
        -ms-flex: 0 0 16.66667%;
            flex: 0 0 16.66667%;
    max-width: 16.66667%;
  }
  .Grid-cell--xl-3 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 25%;
        -ms-flex: 0 0 25%;
            flex: 0 0 25%;
    max-width: 25%;
  }
  .Grid-cell--xl-4 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 33.33333%;
        -ms-flex: 0 0 33.33333%;
            flex: 0 0 33.33333%;
    max-width: 33.33333%;
  }
  .Grid-cell--xl-5 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 41.66667%;
        -ms-flex: 0 0 41.66667%;
            flex: 0 0 41.66667%;
    max-width: 41.66667%;
  }
  .Grid-cell--xl-6 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 50%;
        -ms-flex: 0 0 50%;
            flex: 0 0 50%;
    max-width: 50%;
  }
  .Grid-cell--xl-7 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 58.33333%;
        -ms-flex: 0 0 58.33333%;
            flex: 0 0 58.33333%;
    max-width: 58.33333%;
  }
  .Grid-cell--xl-8 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 66.66667%;
        -ms-flex: 0 0 66.66667%;
            flex: 0 0 66.66667%;
    max-width: 66.66667%;
  }
  .Grid-cell--xl-9 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 75%;
        -ms-flex: 0 0 75%;
            flex: 0 0 75%;
    max-width: 75%;
  }
  .Grid-cell--xl-10 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 83.33333%;
        -ms-flex: 0 0 83.33333%;
            flex: 0 0 83.33333%;
    max-width: 83.33333%;
  }
  .Grid-cell--xl-11 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 91.66667%;
        -ms-flex: 0 0 91.66667%;
            flex: 0 0 91.66667%;
    max-width: 91.66667%;
  }
  .Grid-cell--xl-12 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 100%;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    max-width: 100%;
  }
}

@media (min-width: 1020px) {
  .Grid-cell--xl-offset-0 {
    margin-left: 0%;
  }
  .Grid-cell--xl-offset-1 {
    margin-left: 8.33333%;
  }
  .Grid-cell--xl-offset-2 {
    margin-left: 16.66667%;
  }
  .Grid-cell--xl-offset-3 {
    margin-left: 25%;
  }
  .Grid-cell--xl-offset-4 {
    margin-left: 33.33333%;
  }
  .Grid-cell--xl-offset-5 {
    margin-left: 41.66667%;
  }
  .Grid-cell--xl-offset-6 {
    margin-left: 50%;
  }
  .Grid-cell--xl-offset-7 {
    margin-left: 58.33333%;
  }
  .Grid-cell--xl-offset-8 {
    margin-left: 66.66667%;
  }
  .Grid-cell--xl-offset-9 {
    margin-left: 75%;
  }
  .Grid-cell--xl-offset-10 {
    margin-left: 83.33333%;
  }
  .Grid-cell--xl-offset-11 {
    margin-left: 91.66667%;
  }
  .Grid-cell--xl-offset-12 {
    margin-left: 100%;
  }
}

.Grid-cell--xx {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 100%;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
  max-width: 100%;
}

@media (min-width: 1200px) {
  .Grid-cell--xx {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
}

@media (min-width: 1200px) {
  .Grid-cell--xx-1 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 8.33333%;
        -ms-flex: 0 0 8.33333%;
            flex: 0 0 8.33333%;
    max-width: 8.33333%;
  }
  .Grid-cell--xx-2 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 16.66667%;
        -ms-flex: 0 0 16.66667%;
            flex: 0 0 16.66667%;
    max-width: 16.66667%;
  }
  .Grid-cell--xx-3 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 25%;
        -ms-flex: 0 0 25%;
            flex: 0 0 25%;
    max-width: 25%;
  }
  .Grid-cell--xx-4 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 33.33333%;
        -ms-flex: 0 0 33.33333%;
            flex: 0 0 33.33333%;
    max-width: 33.33333%;
  }
  .Grid-cell--xx-5 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 41.66667%;
        -ms-flex: 0 0 41.66667%;
            flex: 0 0 41.66667%;
    max-width: 41.66667%;
  }
  .Grid-cell--xx-6 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 50%;
        -ms-flex: 0 0 50%;
            flex: 0 0 50%;
    max-width: 50%;
  }
  .Grid-cell--xx-7 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 58.33333%;
        -ms-flex: 0 0 58.33333%;
            flex: 0 0 58.33333%;
    max-width: 58.33333%;
  }
  .Grid-cell--xx-8 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 66.66667%;
        -ms-flex: 0 0 66.66667%;
            flex: 0 0 66.66667%;
    max-width: 66.66667%;
  }
  .Grid-cell--xx-9 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 75%;
        -ms-flex: 0 0 75%;
            flex: 0 0 75%;
    max-width: 75%;
  }
  .Grid-cell--xx-10 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 83.33333%;
        -ms-flex: 0 0 83.33333%;
            flex: 0 0 83.33333%;
    max-width: 83.33333%;
  }
  .Grid-cell--xx-11 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 91.66667%;
        -ms-flex: 0 0 91.66667%;
            flex: 0 0 91.66667%;
    max-width: 91.66667%;
  }
  .Grid-cell--xx-12 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 100%;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    max-width: 100%;
  }
}

@media (min-width: 1200px) {
  .Grid-cell--xx-offset-0 {
    margin-left: 0%;
  }
  .Grid-cell--xx-offset-1 {
    margin-left: 8.33333%;
  }
  .Grid-cell--xx-offset-2 {
    margin-left: 16.66667%;
  }
  .Grid-cell--xx-offset-3 {
    margin-left: 25%;
  }
  .Grid-cell--xx-offset-4 {
    margin-left: 33.33333%;
  }
  .Grid-cell--xx-offset-5 {
    margin-left: 41.66667%;
  }
  .Grid-cell--xx-offset-6 {
    margin-left: 50%;
  }
  .Grid-cell--xx-offset-7 {
    margin-left: 58.33333%;
  }
  .Grid-cell--xx-offset-8 {
    margin-left: 66.66667%;
  }
  .Grid-cell--xx-offset-9 {
    margin-left: 75%;
  }
  .Grid-cell--xx-offset-10 {
    margin-left: 83.33333%;
  }
  .Grid-cell--xx-offset-11 {
    margin-left: 91.66667%;
  }
  .Grid-cell--xx-offset-12 {
    margin-left: 100%;
  }
}

/**
 * Grid--gutter-[size]
 *
 * Grid gutters are used to give grid cells spacing between each other. They are
 * optional modifiers to the grid, and come in various sizes based on the
 * $flexgrid-gutters configuration.
 *
 * Example HTML:
 *
 * <div class="Grid Grid--gutter-xl">
 *   <div class="Grid-cell"></div>
 *   <div class="Grid-cell"></div>
 *   ...
 * </div>
 */
.Grid--gutter-xs {
  margin-top: -0.2rem;
  margin-left: -0.2rem;
}

.Grid--gutter-xs > [class^="Grid-cell"] {
  padding-top: 0.2rem;
  padding-left: 0.2rem;
}

.Grid--gutter-sm {
  margin-top: -0.32rem;
  margin-left: -0.32rem;
}

.Grid--gutter-sm > [class^="Grid-cell"] {
  padding-top: 0.32rem;
  padding-left: 0.32rem;
}

.Grid--gutter-md {
  margin-top: -0.52rem;
  margin-left: -0.52rem;
}

.Grid--gutter-md > [class^="Grid-cell"] {
  padding-top: 0.52rem;
  padding-left: 0.52rem;
}

.Grid--gutter-lg {
  margin-top: -0.84rem;
  margin-left: -0.84rem;
}

.Grid--gutter-lg > [class^="Grid-cell"] {
  padding-top: 0.84rem;
  padding-left: 0.84rem;
}

.Grid--gutter-xl {
  margin-top: -1.36rem;
  margin-left: -1.36rem;
}

.Grid--gutter-xl > [class^="Grid-cell"] {
  padding-top: 1.36rem;
  padding-left: 1.36rem;
}

.Grid--gutter-xx {
  margin-top: -2.2rem;
  margin-left: -2.2rem;
}

.Grid--gutter-xx > [class^="Grid-cell"] {
  padding-top: 2.2rem;
  padding-left: 2.2rem;
}