/* @generated */
/** @define Grid */

/**
 * Core grid component
 *
 * DO NOT apply dimension or offset utilities to the `Grid` element. All cell
 * widths and offsets should be applied to child grid cells.
 */

/* Grid container
   ========================================================================== */

/**
 * All content must be contained within child `Grid-cell` elements.
 *
 * 1. Account for browser defaults of elements that might be the root node of
 *    the component.
 */

 .Grid {
    box-sizing: border-box;
    display: flex; /* 1 */
    flex-flow: row wrap;
    margin: 0; /* 1 */
    padding: 0; /* 1 */
  }
  
  /**
   * Modifier: center align all grid cells
   */
  
  .Grid--alignCenter {
    justify-content: center;
  }
  
  /**
   * Modifier: right align all grid cells
   */
  
  .Grid--alignRight {
    justify-content: flex-end;
  }
  
  /**
   * Modifier: middle-align grid cells
   */
  
  .Grid--alignMiddle {
    align-items: center;
  }
  
  /**
   * Modifier: bottom-align grid cells
   */
  
  .Grid--alignBottom {
    align-items: flex-end;
  }
  
  /**
   * Modifier: allow cells to equal distribute width
   *
   * 1. Provide all values to avoid IE10 bug with shorthand flex
   *    http://git.io/vllC7
   *
   *    Use `0%` to avoid bug in IE10/11 with unitless flex basis
   *    http://git.io/vllWx
   */
  
  .Grid--fill > .Grid-cell {
    flex: 1 1 0%; /* 1 */
  }
  
  /**
   * Modifier: all cells match height of tallest cell in a row
   */
  
  .Grid--equalHeight > .Grid-cell {
    display: flex;
  }
  
  /**
   * Modifier: gutters
   */
  
  .Grid--withGutter {
    margin: 0 calc(-0.5 * 1.2rem);
  }
  
  .Grid--withGutter > .Grid-cell {
    padding: 0 calc(0.5 * 1.2rem);
  }
  
  /* Grid cell
     ========================================================================== */
  
  /**
   * No explicit width by default. Rely on combining `Grid-cell` with a dimension
   * utility or a component class that extends 'Grid'.
   *
   * 1. Set flex items to full width by default
   * 2. Fix issue where elements with overflow extend past the
   *    `Grid-cell` container - https://git.io/vw5oF
   */
  
  .Grid-cell {
    box-sizing: inherit;
    flex-basis: 100%; /* 1 */
    min-width: 0; /* 2 */
  }
  
  /**
   * Modifier: horizontally center one unit
   * Set a specific unit to be horizontally centered. Doesn't affect
   * any other units. Can still contain a child `Grid` object.
   */
  
  .Grid-cell--center {
    margin: 0 auto;
  }
  
  /**
   * @define utilities
   * Specify the proportional offset before an object.
   * Intentional redundancy build into each set of unit classes.
   * Supports: 2, 3, 4, 5, 6, 8, 10, 12 section
   */
  
  .u-before1of12 {
    margin-left: calc(100% * 1 / 12) !important;
  }
  
  .u-before1of10 {
    margin-left: 10% !important;
  }
  
  .u-before1of8 {
    margin-left: 12.5% !important;
  }
  
  .u-before1of6,
  .u-before2of12 {
    margin-left: calc(100% * 1 / 6) !important;
  }
  
  .u-before1of5,
  .u-before2of10 {
    margin-left: 20% !important;
  }
  
  .u-before1of4,
  .u-before2of8,
  .u-before3of12 {
    margin-left: 25% !important;
  }
  
  .u-before3of10 {
    margin-left: 30% !important;
  }
  
  .u-before1of3,
  .u-before2of6,
  .u-before4of12 {
    margin-left: calc(100% * 1 / 3) !important;
  }
  
  .u-before3of8 {
    margin-left: 37.5% !important;
  }
  
  .u-before2of5,
  .u-before4of10 {
    margin-left: 40% !important;
  }
  
  .u-before5of12 {
    margin-left: calc(100% * 5 / 12) !important;
  }
  
  .u-before1of2,
  .u-before2of4,
  .u-before3of6,
  .u-before4of8,
  .u-before5of10,
  .u-before6of12 {
    margin-left: 50% !important;
  }
  
  .u-before7of12 {
    margin-left: calc(100% * 7 / 12) !important;
  }
  
  .u-before3of5,
  .u-before6of10 {
    margin-left: 60% !important;
  }
  
  .u-before5of8 {
    margin-left: 62.5% !important;
  }
  
  .u-before2of3,
  .u-before4of6,
  .u-before8of12 {
    margin-left: calc(100% * 2 / 3) !important;
  }
  
  .u-before7of10 {
    margin-left: 70% !important;
  }
  
  .u-before3of4,
  .u-before6of8,
  .u-before9of12 {
    margin-left: 75% !important;
  }
  
  .u-before4of5,
  .u-before8of10 {
    margin-left: 80% !important;
  }
  
  .u-before5of6,
  .u-before10of12 {
    margin-left: calc(100% * 5 / 6) !important;
  }
  
  .u-before7of8 {
    margin-left: 87.5% !important;
  }
  
  .u-before9of10 {
    margin-left: 90% !important;
  }
  
  .u-before11of12 {
    margin-left: calc(100% * 11 / 12) !important;
  }
  
  /**
   * @define utilities
   * Specify the proportional offset after an element.
   * Intentional redundancy build into each set of unit classes.
   * Supports: 2, 4, 5, 6, 8, 10, 12 section
   */
  
  .u-after1of12 {
    margin-right: calc(100% * 1 / 12) !important;
  }
  
  .u-after1of10 {
    margin-right: 10% !important;
  }
  
  .u-after1of8 {
    margin-right: 12.5% !important;
  }
  
  .u-after1of6,
  .u-after2of12 {
    margin-right: calc(100% * 1 / 6) !important;
  }
  
  .u-after1of5,
  .u-after2of10 {
    margin-right: 20% !important;
  }
  
  .u-after1of4,
  .u-after2of8,
  .u-after3of12 {
    margin-right: 25% !important;
  }
  
  .u-after3of10 {
    margin-right: 30% !important;
  }
  
  .u-after1of3,
  .u-after2of6,
  .u-after4of12 {
    margin-right: calc(100% * 1 / 3) !important;
  }
  
  .u-after3of8 {
    margin-right: 37.5% !important;
  }
  
  .u-after2of5,
  .u-after4of10 {
    margin-right: 40% !important;
  }
  
  .u-after5of12 {
    margin-right: calc(100% * 5 / 12) !important;
  }
  
  .u-after1of2,
  .u-after2of4,
  .u-after3of6,
  .u-after4of8,
  .u-after5of10,
  .u-after6of12 {
    margin-right: 50% !important;
  }
  
  .u-after7of12 {
    margin-right: calc(100% * 7 / 12) !important;
  }
  
  .u-after3of5,
  .u-after6of10 {
    margin-right: 60% !important;
  }
  
  .u-after5of8 {
    margin-right: 62.5% !important;
  }
  
  .u-after2of3,
  .u-after4of6,
  .u-after8of12 {
    margin-right: calc(100% * 2 / 3) !important;
  }
  
  .u-after7of10 {
    margin-right: 70% !important;
  }
  
  .u-after3of4,
  .u-after6of8,
  .u-after9of12 {
    margin-right: 75% !important;
  }
  
  .u-after4of5,
  .u-after8of10 {
    margin-right: 80% !important;
  }
  
  .u-after5of6,
  .u-after10of12 {
    margin-right: calc(100% * 5 / 6) !important;
  }
  
  .u-after7of8 {
    margin-right: 87.5% !important;
  }
  
  .u-after9of10 {
    margin-right: 90% !important;
  }
  
  .u-after11of12 {
    margin-right: calc(100% * 11 / 12) !important;
  }
  
  /**
   * @define utilities
   * Sizing utilities
   */
  
  /* Proportional widths
     ========================================================================== */
  
  /**
   * Specify the proportional width of an object.
   * Intentional redundancy build into each set of unit classes.
   * Supports: 2, 3, 4, 5, 6, 8, 10, 12 part
   *
   * 1. Use `flex-basis: auto` with a width to avoid box-sizing bug in IE10/11
   *    http://git.io/vllMD
   */
  
  .u-size1of12 {
    flex-basis: auto !important;
    width: calc(100% * 1 / 12) !important;
  }
  
  .u-size1of10 {
    flex-basis: auto !important;
    width: 10% !important;
  }
  
  .u-size1of8 {
    flex-basis: auto !important;
    width: 12.5% !important;
  }
  
  .u-size1of6,
  .u-size2of12 {
    flex-basis: auto !important;
    width: calc(100% * 1 / 6) !important;
  }
  
  .u-size1of5,
  .u-size2of10 {
    flex-basis: auto !important;
    width: 20% !important;
  }
  
  .u-size1of4,
  .u-size2of8,
  .u-size3of12 {
    flex-basis: auto !important;
    width: 25% !important;
  }
  
  .u-size3of10 {
    flex-basis: auto !important;
    width: 30% !important;
  }
  
  .u-size1of3,
  .u-size2of6,
  .u-size4of12 {
    flex-basis: auto !important;
    width: calc(100% * 1 / 3) !important;
  }
  
  .u-size3of8 {
    flex-basis: auto !important;
    width: 37.5% !important;
  }
  
  .u-size2of5,
  .u-size4of10 {
    flex-basis: auto !important;
    width: 40% !important;
  }
  
  .u-size5of12 {
    flex-basis: auto !important;
    width: calc(100% * 5 / 12) !important;
  }
  
  .u-size1of2,
  .u-size2of4,
  .u-size3of6,
  .u-size4of8,
  .u-size5of10,
  .u-size6of12 {
    flex-basis: auto !important;
    width: 50% !important;
  }
  
  .u-size7of12 {
    flex-basis: auto !important;
    width: calc(100% * 7 / 12) !important;
  }
  
  .u-size3of5,
  .u-size6of10 {
    flex-basis: auto !important;
    width: 60% !important;
  }
  
  .u-size5of8 {
    flex-basis: auto !important;
    width: 62.5% !important;
  }
  
  .u-size2of3,
  .u-size4of6,
  .u-size8of12 {
    flex-basis: auto !important;
    width: calc(100% * 2 / 3) !important;
  }
  
  .u-size7of10 {
    flex-basis: auto !important;
    width: 70% !important;
  }
  
  .u-size3of4,
  .u-size6of8,
  .u-size9of12 {
    flex-basis: auto !important;
    width: 75% !important;
  }
  
  .u-size4of5,
  .u-size8of10 {
    flex-basis: auto !important;
    width: 80% !important;
  }
  
  .u-size5of6,
  .u-size10of12 {
    flex-basis: auto !important;
    width: calc(100% * 5 / 6) !important;
  }
  
  .u-size7of8 {
    flex-basis: auto !important;
    width: 87.5% !important;
  }
  
  .u-size9of10 {
    flex-basis: auto !important;
    width: 90% !important;
  }
  
  .u-size11of12 {
    flex-basis: auto !important;
    width: calc(100% * 11 / 12) !important;
  }
  
  /* Intrinsic widths
     ========================================================================== */
  
  /**
   * Make an element shrink wrap its content.
   */
  
  .u-sizeFit {
    flex-basis: auto !important;
  }
  
  /**
   * Make an element fill the remaining space.
   *
   * 1. Be explicit to work around IE10 bug with shorthand flex
   *    http://git.io/vllC7
   * 2. IE10 ignores previous `flex-basis` value. Setting again here fixes
   *    http://git.io/vllMt
   */
  
  .u-sizeFill {
    flex: 1 1 0% !important; /* 1 */
    flex-basis: 0% !important; /* 2 */
  }
  
  /**
   * An alternative method to make an element fill the remaining space.
   * Distributes space based on the initial width and height of the element
   *
   * http://www.w3.org/TR/css-flexbox/images/rel-vs-abs-flex.svg
   */
  
  .u-sizeFillAlt {
    flex: 1 1 auto !important;
    flex-basis: auto !important;
  }
  
  /**
   * Make an element the width of its parent.
   */
  
  .u-sizeFull {
    width: 100% !important;
  }
  .Grid--xAlignStart {
    justify-content: flex-start;
  }
  .Grid--xAlignCenter {
    justify-content: center;
  }
  .Grid--xAlignEnd {
    justify-content: flex-end;
  }
  .Grid--yAlignStart {
    align-items: flex-start;
  }
  .Grid--yAlignCenter {
    align-items: center;
  }
  .Grid--yAlignEnd {
    align-items: flex-end;
  }