/**
 * Flexbox utilities
 *
 * These utilities can be used manipulate the itpGrid
 *
 * Flexbox playground: https://codepen.io/enxaneta/full/adLPwv
 */

/**
 * Apply flex behaviour
 */

.u-Flex {
  display: flex;
}

@media (--bp1) {
  .u-Flex--bp1 {
    display: flex;
  }
}

@media (--bp2) {
  .u-Flex--bp2 {
    display: flex;
  }
}

@media (--bp3) {
  .u-Flex--bp3 {
    display: flex;
  }
}

@media (--bp4) {
  .u-Flex--bp4 {
    display: flex;
  }
}

@media (--bp5) {
  .u-Flex--bp5 {
    display: flex;
  }
}

/**
 * Wrapping
 */

.u-FlexWrap {
  flex-wrap: wrap;
}

.u-FlexNoWrap {
  flex-wrap: nowrap;
}

.u-FlexWrapReverse {
  flex-wrap: wrap-reverse;
}

/**
 * Directions
 */

.u-FlexRow {
  flex-direction: row;
}

.u-FlexRowReverse {
  flex-direction: row-reverse;
}

.u-FlexColumn {
  flex-direction: column;
}

.u-FlexColumnReverse {
  flex-direction: column-reverse;
}

/**
 * Align items vertically
 */

.u-FlexAlignItemsStart {
  align-items: flex-start;
}

.u-FlexAlignItemsEnd {
  align-items: flex-end;
}

.u-FlexAlignItemsCenter {
  align-items: center;
}

.u-FlexAlignItemsStretch {
  align-items: stretch;
}

.u-FlexAlignItemsBaseline {
  align-items: baseline;
}

/**
 * Align a single items vertically
 */

.u-FlexAlignSelfStart {
  align-self: start;
}

.u-FlexAlignSelfCenter {
  align-self: center;
}

.u-FlexAlignSelfEnd {
  align-self: end;
}

.u-FlexAlignSelfStretch {
  align-self: stretch;
}

.u-FlexAlignSelfBaseline {
  align-self: baseline;
}

/**
 * Align items horizontally
 */

.u-FlexJustifyStart {
  justify-content: flex-start;
}

.u-FlexJustifyEnd {
  justify-content: flex-end;
}

.u-FlexJustifyCenter {
  justify-content: center;
}

.u-FlexJustifySpaceAround {
  justify-content: space-around;
}

.u-FlexJustifySpaceBetween {
  justify-content: space-between;
}
.u-SpacingMt0 {
  margin-top: 0;
}

.u-SpacingMb0 {
  margin-bottom: 0;
}

.u-SpacingPt0 {
  padding-top: 0;
}

.u-SpacingPb0 {
  padding-bottom: 0;
}

.u-SpacingMt1 {
  margin-top: var(--spacingBase);
}

.u-SpacingMb1 {
  margin-bottom: var(--spacingBase);
}

.u-SpacingPt1 {
  padding-top: var(--spacingBase);
}

.u-SpacingPb1 {
  padding-bottom: var(--spacingBase);
}

.u-SpacingMt2 {
  margin-top: calc(var(--spacingBase) * 2);
}

.u-SpacingMb2 {
  margin-bottom: calc(var(--spacingBase) * 2);
}

.u-SpacingPt2 {
  padding-top: calc(var(--spacingBase) * 2);
}

.u-SpacingPb2 {
  padding-bottom: calc(var(--spacingBase) * 2);
}

.u-SpacingMt3 {
  margin-top: calc(var(--spacingBase) * 3);
}

.u-SpacingMb3 {
  margin-bottom: calc(var(--spacingBase) * 3);
}

.u-SpacingPt3 {
  padding-top: calc(var(--spacingBase) * 3);
}

.u-SpacingPb3 {
  padding-bottom: calc(var(--spacingBase) * 3);
}

.u-SpacingMt4 {
  margin-top: calc(var(--spacingBase) * 4);
}

.u-SpacingMb4 {
  margin-bottom: calc(var(--spacingBase) * 4);
}

.u-SpacingPt4 {
  padding-top: calc(var(--spacingBase) * 4);
}

.u-SpacingPb4 {
  padding-bottom: calc(var(--spacingBase) * 4);
}
/**
 * Sizing utilities
 *
 * 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
 */
/* stylelint-disable declaration-no-important */
.u-Width1of12 {
  flex-basis: auto !important;
  width: calc(100% * 1 / 12) !important;
}

.u-Width1of10 {
  flex-basis: auto !important;
  width: 10% !important;
}

.u-Width1of8 {
  flex-basis: auto !important;
  width: 12.5% !important;
}

.u-Width1of6,
.u-Width2of12 {
  flex-basis: auto !important;
  width: calc(100% * 1 / 6) !important;
}

.u-Width1of5,
.u-Width2of10 {
  flex-basis: auto !important;
  width: 20% !important;
}

.u-Width1of4,
.u-Width2of8,
.u-Width3of12 {
  flex-basis: auto !important;
  width: 25% !important;
}

.u-Width3of10 {
  flex-basis: auto !important;
  width: 30% !important;
}

.u-Width1of3,
.u-Width2of6,
.u-Width4of12 {
  flex-basis: auto !important;
  width: calc(100% * 1 / 3) !important;
}

.u-Width3of8 {
  flex-basis: auto !important;
  width: 37.5% !important;
}

.u-Width2of5,
.u-Width4of10 {
  flex-basis: auto !important;
  width: 40% !important;
}

.u-Width5of12 {
  flex-basis: auto !important;
  width: calc(100% * 5 / 12) !important;
}

.u-Width1of2,
.u-Width2of4,
.u-Width3of6,
.u-Width4of8,
.u-Width5of10,
.u-Width6of12 {
  flex-basis: auto !important;
  width: 50% !important;
}

.u-Width7of12 {
  flex-basis: auto !important;
  width: calc(100% * 7 / 12) !important;
}

.u-Width3of5,
.u-Width6of10 {
  flex-basis: auto !important;
  width: 60% !important;
}

.u-Width5of8 {
  flex-basis: auto !important;
  width: 62.5% !important;
}

.u-Width2of3,
.u-Width4of6,
.u-Width8of12 {
  flex-basis: auto !important;
  width: calc(100% * 2 / 3) !important;
}

.u-Width7of10 {
  flex-basis: auto !important;
  width: 70% !important;
}

.u-Width3of4,
.u-Width6of8,
.u-Width9of12 {
  flex-basis: auto !important;
  width: 75% !important;
}

.u-Width4of5,
.u-Width8of10 {
  flex-basis: auto !important;
  width: 80% !important;
}

.u-Width5of6,
.u-Width10of12 {
  flex-basis: auto !important;
  width: calc(100% * 5 / 6) !important;
}

.u-Width7of8 {
  flex-basis: auto !important;
  width: 87.5% !important;
}

.u-Width9of10 {
  flex-basis: auto !important;
  width: 90% !important;
}

.u-Width11of12 {
  flex-basis: auto !important;
  width: calc(100% * 11 / 12) !important;
}

@media (--bp1) {
  .u-Width1of12--bp1 {
    flex-basis: auto !important;
    width: calc(100% * 1 / 12) !important;
  }

  .u-Width1of10--bp1 {
    flex-basis: auto !important;
    width: 10% !important;
  }

  .u-Width1of8--bp1 {
    flex-basis: auto !important;
    width: 12.5% !important;
  }

  .u-Width1of6--bp1,
  .u-Width2of12--bp1 {
    flex-basis: auto !important;
    width: calc(100% * 1 / 6) !important;
  }

  .u-Width1of5--bp1,
  .u-Width2of10--bp1 {
    flex-basis: auto !important;
    width: 20% !important;
  }

  .u-Width1of4--bp1,
  .u-Width2of8--bp1,
  .u-Width3of12--bp1 {
    flex-basis: auto !important;
    width: 25% !important;
  }

  .u-Width3of10--bp1 {
    flex-basis: auto !important;
    width: 30% !important;
  }

  .u-Width1of3--bp1,
  .u-Width2of6--bp1,
  .u-Width4of12--bp1 {
    flex-basis: auto !important;
    width: calc(100% * 1 / 3) !important;
  }

  .u-Width3of8--bp1 {
    flex-basis: auto !important;
    width: 37.5% !important;
  }

  .u-Width2of5--bp1,
  .u-Width4of10--bp1 {
    flex-basis: auto !important;
    width: 40% !important;
  }

  .u-Width5of12--bp1 {
    flex-basis: auto !important;
    width: calc(100% * 5 / 12) !important;
  }

  .u-Width1of2--bp1,
  .u-Width2of4--bp1,
  .u-Width3of6--bp1,
  .u-Width4of8--bp1,
  .u-Width5of10--bp1,
  .u-Width6of12--bp1 {
    flex-basis: auto !important;
    width: 50% !important;
  }

  .u-Width7of12--bp1 {
    flex-basis: auto !important;
    width: calc(100% * 7 / 12) !important;
  }

  .u-Width3of5--bp1,
  .u-Width6of10--bp1 {
    flex-basis: auto !important;
    width: 60% !important;
  }

  .u-Width5of8--bp1 {
    flex-basis: auto !important;
    width: 62.5% !important;
  }

  .u-Width2of3--bp1,
  .u-Width4of6--bp1,
  .u-Width8of12--bp1 {
    flex-basis: auto !important;
    width: calc(100% * 2 / 3) !important;
  }

  .u-Width7of10--bp1 {
    flex-basis: auto !important;
    width: 70% !important;
  }

  .u-Width3of4--bp1,
  .u-Width6of8--bp1,
  .u-Width9of12--bp1 {
    flex-basis: auto !important;
    width: 75% !important;
  }

  .u-Width4of5--bp1,
  .u-Width8of10--bp1 {
    flex-basis: auto !important;
    width: 80% !important;
  }

  .u-Width5of6--bp1,
  .u-Width10of12--bp1 {
    flex-basis: auto !important;
    width: calc(100% * 5 / 6) !important;
  }

  .u-Width7of8--bp1 {
    flex-basis: auto !important;
    width: 87.5% !important;
  }

  .u-Width9of10--bp1 {
    flex-basis: auto !important;
    width: 90% !important;
  }

  .u-Width11of12--bp1 {
    flex-basis: auto !important;
    width: calc(100% * 11 / 12) !important;
  }
}
@media (--bp2) {
  .u-Width1of12--bp2 {
    flex-basis: auto !important;
    width: calc(100% * 1 / 12) !important;
  }

  .u-Width1of10--bp2 {
    flex-basis: auto !important;
    width: 10% !important;
  }

  .u-Width1of8--bp2 {
    flex-basis: auto !important;
    width: 12.5% !important;
  }

  .u-Width1of6--bp2,
  .u-Width2of12--bp2 {
    flex-basis: auto !important;
    width: calc(100% * 1 / 6) !important;
  }

  .u-Width1of5--bp2,
  .u-Width2of10--bp2 {
    flex-basis: auto !important;
    width: 20% !important;
  }

  .u-Width1of4--bp2,
  .u-Width2of8--bp2,
  .u-Width3of12--bp2 {
    flex-basis: auto !important;
    width: 25% !important;
  }

  .u-Width3of10--bp2 {
    flex-basis: auto !important;
    width: 30% !important;
  }

  .u-Width1of3--bp2,
  .u-Width2of6--bp2,
  .u-Width4of12--bp2 {
    flex-basis: auto !important;
    width: calc(100% * 1 / 3) !important;
  }

  .u-Width3of8--bp2 {
    flex-basis: auto !important;
    width: 37.5% !important;
  }

  .u-Width2of5--bp2,
  .u-Width4of10--bp2 {
    flex-basis: auto !important;
    width: 40% !important;
  }

  .u-Width5of12--bp2 {
    flex-basis: auto !important;
    width: calc(100% * 5 / 12) !important;
  }

  .u-Width1of2--bp2,
  .u-Width2of4--bp2,
  .u-Width3of6--bp2,
  .u-Width4of8--bp2,
  .u-Width5of10--bp2,
  .u-Width6of12--bp2 {
    flex-basis: auto !important;
    width: 50% !important;
  }

  .u-Width7of12--bp2 {
    flex-basis: auto !important;
    width: calc(100% * 7 / 12) !important;
  }

  .u-Width3of5--bp2,
  .u-Width6of10--bp2 {
    flex-basis: auto !important;
    width: 60% !important;
  }

  .u-Width5of8--bp2 {
    flex-basis: auto !important;
    width: 62.5% !important;
  }

  .u-Width2of3--bp2,
  .u-Width4of6--bp2,
  .u-Width8of12--bp2 {
    flex-basis: auto !important;
    width: calc(100% * 2 / 3) !important;
  }

  .u-Width7of10--bp2 {
    flex-basis: auto !important;
    width: 70% !important;
  }

  .u-Width3of4--bp2,
  .u-Width6of8--bp2,
  .u-Width9of12--bp2 {
    flex-basis: auto !important;
    width: 75% !important;
  }

  .u-Width4of5--bp2,
  .u-Width8of10--bp2 {
    flex-basis: auto !important;
    width: 80% !important;
  }

  .u-Width5of6--bp2,
  .u-Width10of12--bp2 {
    flex-basis: auto !important;
    width: calc(100% * 5 / 6) !important;
  }

  .u-Width7of8--bp2 {
    flex-basis: auto !important;
    width: 87.5% !important;
  }

  .u-Width9of10--bp2 {
    flex-basis: auto !important;
    width: 90% !important;
  }

  .u-Width11of12--bp2 {
    flex-basis: auto !important;
    width: calc(100% * 11 / 12) !important;
  }
}
@media (--bp3) {
  .u-Width1of12--bp3 {
    flex-basis: auto !important;
    width: calc(100% * 1 / 12) !important;
  }

  .u-Width1of10--bp3 {
    flex-basis: auto !important;
    width: 10% !important;
  }

  .u-Width1of8--bp3 {
    flex-basis: auto !important;
    width: 12.5% !important;
  }

  .u-Width1of6--bp3,
  .u-Width2of12--bp3 {
    flex-basis: auto !important;
    width: calc(100% * 1 / 6) !important;
  }

  .u-Width1of5--bp3,
  .u-Width2of10--bp3 {
    flex-basis: auto !important;
    width: 20% !important;
  }

  .u-Width1of4--bp3,
  .u-Width2of8--bp3,
  .u-Width3of12--bp3 {
    flex-basis: auto !important;
    width: 25% !important;
  }

  .u-Width3of10--bp3 {
    flex-basis: auto !important;
    width: 30% !important;
  }

  .u-Width1of3--bp3,
  .u-Width2of6--bp3,
  .u-Width4of12--bp3 {
    flex-basis: auto !important;
    width: calc(100% * 1 / 3) !important;
  }

  .u-Width3of8--bp3 {
    flex-basis: auto !important;
    width: 37.5% !important;
  }

  .u-Width2of5--bp3,
  .u-Width4of10--bp3 {
    flex-basis: auto !important;
    width: 40% !important;
  }

  .u-Width5of12--bp3 {
    flex-basis: auto !important;
    width: calc(100% * 5 / 12) !important;
  }

  .u-Width1of2--bp3,
  .u-Width2of4--bp3,
  .u-Width3of6--bp3,
  .u-Width4of8--bp3,
  .u-Width5of10--bp3,
  .u-Width6of12--bp3 {
    flex-basis: auto !important;
    width: 50% !important;
  }

  .u-Width7of12--bp3 {
    flex-basis: auto !important;
    width: calc(100% * 7 / 12) !important;
  }

  .u-Width3of5--bp3,
  .u-Width6of10--bp3 {
    flex-basis: auto !important;
    width: 60% !important;
  }

  .u-Width5of8--bp3 {
    flex-basis: auto !important;
    width: 62.5% !important;
  }

  .u-Width2of3--bp3,
  .u-Width4of6--bp3,
  .u-Width8of12--bp3 {
    flex-basis: auto !important;
    width: calc(100% * 2 / 3) !important;
  }

  .u-Width7of10--bp3 {
    flex-basis: auto !important;
    width: 70% !important;
  }

  .u-Width3of4--bp3,
  .u-Width6of8--bp3,
  .u-Width9of12--bp3 {
    flex-basis: auto !important;
    width: 75% !important;
  }

  .u-Width4of5--bp3,
  .u-Width8of10--bp3 {
    flex-basis: auto !important;
    width: 80% !important;
  }

  .u-Width5of6--bp3,
  .u-Width10of12--bp3 {
    flex-basis: auto !important;
    width: calc(100% * 5 / 6) !important;
  }

  .u-Width7of8--bp3 {
    flex-basis: auto !important;
    width: 87.5% !important;
  }

  .u-Width9of10--bp3 {
    flex-basis: auto !important;
    width: 90% !important;
  }

  .u-Width11of12--bp3 {
    flex-basis: auto !important;
    width: calc(100% * 11 / 12) !important;
  }
}
@media (--bp4) {
  .u-Width1of12--bp4 {
    flex-basis: auto !important;
    width: calc(100% * 1 / 12) !important;
  }

  .u-Width1of10--bp4 {
    flex-basis: auto !important;
    width: 10% !important;
  }

  .u-Width1of8--bp4 {
    flex-basis: auto !important;
    width: 12.5% !important;
  }

  .u-Width1of6--bp4,
  .u-Width2of12--bp4 {
    flex-basis: auto !important;
    width: calc(100% * 1 / 6) !important;
  }

  .u-Width1of5--bp4,
  .u-Width2of10--bp4 {
    flex-basis: auto !important;
    width: 20% !important;
  }

  .u-Width1of4--bp4,
  .u-Width2of8--bp4,
  .u-Width3of12--bp4 {
    flex-basis: auto !important;
    width: 25% !important;
  }

  .u-Width3of10--bp4 {
    flex-basis: auto !important;
    width: 30% !important;
  }

  .u-Width1of3--bp4,
  .u-Width2of6--bp4,
  .u-Width4of12--bp4 {
    flex-basis: auto !important;
    width: calc(100% * 1 / 3) !important;
  }

  .u-Width3of8--bp4 {
    flex-basis: auto !important;
    width: 37.5% !important;
  }

  .u-Width2of5--bp4,
  .u-Width4of10--bp4 {
    flex-basis: auto !important;
    width: 40% !important;
  }

  .u-Width5of12--bp4 {
    flex-basis: auto !important;
    width: calc(100% * 5 / 12) !important;
  }

  .u-Width1of2--bp4,
  .u-Width2of4--bp4,
  .u-Width3of6--bp4,
  .u-Width4of8--bp4,
  .u-Width5of10--bp4,
  .u-Width6of12--bp4 {
    flex-basis: auto !important;
    width: 50% !important;
  }

  .u-Width7of12--bp4 {
    flex-basis: auto !important;
    width: calc(100% * 7 / 12) !important;
  }

  .u-Width3of5--bp4,
  .u-Width6of10--bp4 {
    flex-basis: auto !important;
    width: 60% !important;
  }

  .u-Width5of8--bp4 {
    flex-basis: auto !important;
    width: 62.5% !important;
  }

  .u-Width2of3--bp4,
  .u-Width4of6--bp4,
  .u-Width8of12--bp4 {
    flex-basis: auto !important;
    width: calc(100% * 2 / 3) !important;
  }

  .u-Width7of10--bp4 {
    flex-basis: auto !important;
    width: 70% !important;
  }

  .u-Width3of4--bp4,
  .u-Width6of8--bp4,
  .u-Width9of12--bp4 {
    flex-basis: auto !important;
    width: 75% !important;
  }

  .u-Width4of5--bp4,
  .u-Width8of10--bp4 {
    flex-basis: auto !important;
    width: 80% !important;
  }

  .u-Width5of6--bp4,
  .u-Width10of12--bp4 {
    flex-basis: auto !important;
    width: calc(100% * 5 / 6) !important;
  }

  .u-Width7of8--bp4 {
    flex-basis: auto !important;
    width: 87.5% !important;
  }

  .u-Width9of10--bp4 {
    flex-basis: auto !important;
    width: 90% !important;
  }

  .u-Width11of12--bp4 {
    flex-basis: auto !important;
    width: calc(100% * 11 / 12) !important;
  }
}
@media (--bp5) {
  .u-Width1of12--bp5 {
    flex-basis: auto !important;
    width: calc(100% * 1 / 12) !important;
  }

  .u-Width1of10--bp5 {
    flex-basis: auto !important;
    width: 10% !important;
  }

  .u-Width1of8--bp5 {
    flex-basis: auto !important;
    width: 12.5% !important;
  }

  .u-Width1of6--bp5,
  .u-Width2of12--bp5 {
    flex-basis: auto !important;
    width: calc(100% * 1 / 6) !important;
  }

  .u-Width1of5--bp5,
  .u-Width2of10--bp5 {
    flex-basis: auto !important;
    width: 20% !important;
  }

  .u-Width1of4--bp5,
  .u-Width2of8--bp5,
  .u-Width3of12--bp5 {
    flex-basis: auto !important;
    width: 25% !important;
  }

  .u-Width3of10--bp5 {
    flex-basis: auto !important;
    width: 30% !important;
  }

  .u-Width1of3--bp5,
  .u-Width2of6--bp5,
  .u-Width4of12--bp5 {
    flex-basis: auto !important;
    width: calc(100% * 1 / 3) !important;
  }

  .u-Width3of8--bp5 {
    flex-basis: auto !important;
    width: 37.5% !important;
  }

  .u-Width2of5--bp5,
  .u-Width4of10--bp5 {
    flex-basis: auto !important;
    width: 40% !important;
  }

  .u-Width5of12--bp5 {
    flex-basis: auto !important;
    width: calc(100% * 5 / 12) !important;
  }

  .u-Width1of2--bp5,
  .u-Width2of4--bp5,
  .u-Width3of6--bp5,
  .u-Width4of8--bp5,
  .u-Width5of10--bp5,
  .u-Width6of12--bp5 {
    flex-basis: auto !important;
    width: 50% !important;
  }

  .u-Width7of12--bp5 {
    flex-basis: auto !important;
    width: calc(100% * 7 / 12) !important;
  }

  .u-Width3of5--bp5,
  .u-Width6of10--bp5 {
    flex-basis: auto !important;
    width: 60% !important;
  }

  .u-Width5of8--bp5 {
    flex-basis: auto !important;
    width: 62.5% !important;
  }

  .u-Width2of3--bp5,
  .u-Width4of6--bp5,
  .u-Width8of12--bp5 {
    flex-basis: auto !important;
    width: calc(100% * 2 / 3) !important;
  }

  .u-Width7of10--bp5 {
    flex-basis: auto !important;
    width: 70% !important;
  }

  .u-Width3of4--bp5,
  .u-Width6of8--bp5,
  .u-Width9of12--bp5 {
    flex-basis: auto !important;
    width: 75% !important;
  }

  .u-Width4of5--bp5,
  .u-Width8of10--bp5 {
    flex-basis: auto !important;
    width: 80% !important;
  }

  .u-Width5of6--bp5,
  .u-Width10of12--bp5 {
    flex-basis: auto !important;
    width: calc(100% * 5 / 6) !important;
  }

  .u-Width7of8--bp5 {
    flex-basis: auto !important;
    width: 87.5% !important;
  }

  .u-Width9of10--bp5 {
    flex-basis: auto !important;
    width: 90% !important;
  }

  .u-Width11of12--bp5 {
    flex-basis: auto !important;
    width: calc(100% * 11 / 12) !important;
  }
}
/* stylelint-enable declaration-no-important */
/**
 * Global
 * Combines all utilities
 */