/* ========================================================================
   Component: Flex
 ========================================================================== */
.flex {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.flex.flex--top {
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
}
.flex.flex--middle {
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.flex.flex--bottom {
  -ms-flex-align: end;
  -webkit-align-items: flex-end;
  align-items: flex-end;
}
.flex.flex--left {
  justify-content: flex-start;
}
.flex.flex--center {
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}
.flex.flex--right {
  -ms-flex-pack: end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}
.flex.flex--space-between {
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
.flex.flex--space-around {
  -ms-flex-pack: distribute;
  -webkit-justify-content: space-around;
  justify-content: space-around;
}
.flex.flex--inline {
  display: -ms-inline-flexbox;
  display: -webkit-inline-flex;
  display: inline-flex;
}
.flex.flex--row-reverse {
  -ms-flex-direction: row-reverse;
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse;
}
.flex.flex--column {
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}
.flex.flex--column-reverse {
  -ms-flex-direction: column-reverse;
  -webkit-flex-direction: column-reverse;
  flex-direction: column-reverse;
}
/*
 * Fixes initial flex-shrink value in IE10
 */
.flex > *,
.flex--inline > * {
  -ms-flex-negative: 1;
}
/* Wrap
 ========================================================================== */
.flex--nowrap {
  -ms-flex-wrap: nowrap;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
}
.flex--wrap {
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.flex--wrap-reverse {
  -ms-flex-wrap: wrap-reverse;
  -webkit-flex-wrap: wrap-reverse;
  flex-wrap: wrap-reverse;
}
/*
 * Horizontal alignment
 * Default value is `stretch`
 */
.flex--wrap-top {
  -ms-flex-line-pack: start;
  -webkit-align-content: flex-start;
  align-content: flex-start;
}
.flex--wrap-middle {
  -ms-flex-line-pack: center;
  -webkit-align-content: center;
  align-content: center;
}
.flex--wrap-bottom {
  -ms-flex-line-pack: end;
  -webkit-align-content: flex-end;
  align-content: flex-end;
}
.flex--wrap-space-between {
  -ms-flex-line-pack: justify;
  -webkit-align-content: space-between;
  align-content: space-between;
}
.flex--wrap-space-around {
  -ms-flex-line-pack: distribute;
  -webkit-align-content: space-around;
  align-content: space-around;
}
/* Item ordering
 ========================================================================== */
/*
 * Default is 0
 */
.flex--order-first {
  -ms-flex-order: -1;
  -webkit-order: -1;
  order: -1;
}
.flex--order-last {
  -ms-flex-order: 99;
  -webkit-order: 99;
  order: 99;
}
/* Phone landscape and bigger */
@media (min-width: 320px) and (max-width: 767px) {
  .flex--order-first-small {
    -ms-flex-order: -1;
    -webkit-order: -1;
    order: -1;
  }
  .flex--order-last-small {
    -ms-flex-order: 99;
    -webkit-order: 99;
    order: 99;
  }
}
/* Tablet and bigger */
@media (min-width: 1024px) {
  .flex--order-first-medium {
    -ms-flex-order: -1;
    -webkit-order: -1;
    order: -1;
  }
  .flex--order-last-medium {
    -ms-flex-order: 99;
    -webkit-order: 99;
    order: 99;
  }
}
/* Desktop and bigger */
@media (min-width: 1220px) {
  .flex--order-first-large {
    -ms-flex-order: -1;
    -webkit-order: -1;
    order: -1;
  }
  .flex--order-last-large {
    -ms-flex-order: 99;
    -webkit-order: 99;
    order: 99;
  }
}
/* Large screen and bigger */
@media (min-width: 1600px) {
  .flex--order-first-xlarge {
    -ms-flex-order: -1;
    -webkit-order: -1;
    order: -1;
  }
  .flex--order-last-xlarge {
    -ms-flex-order: 99;
    -webkit-order: 99;
    order: 99;
  }
}
/* Item dimensions
 ========================================================================== */
/*
 * Initial: 0 1 auto
 * Content dimensions, but shrinks
 */
/*
 * No Flex: 0 0 auto
 * Content dimensions
 */
.flex--item-none {
  -ms-flex: none;
  -webkit-flex: none;
  flex: none;
}
/*
 * Relative Flex: 1 1 auto
 * Space is allocated considering content
 * 1. Fixes flex-shrink value in IE10
 */
.flex--item-auto {
  -ms-flex: auto;
  -webkit-flex: auto;
  flex: auto;
  /* 1 */
  -ms-flex-negative: 1;
}
/*
 * Absolute Flex: 1 1 0%
 * Space is allocated solely based on flex
 */
.flex--item-1 {
  -ms-flex: 1;
  -webkit-flex: 1;
  flex: 1;
}