// ==========================================================================
//  flex
//
.flex {
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
}

.flex-inline {
   display: -ms-inline-flexbox;
   display: -webkit-inline-flex;
   display: inline-flex;
}
/*
 * Fixes initial flex-shrink value in IE10
 */
.flex > *,
.flex-inline > * {
   -ms-flex-negative: 1;
}
/* Alignment
 ========================================================================== */
/*
 * Vertical alignment
 * Default value is `stretch`
 */
// .flex-stretch { align-items: stretch; }

.flex-top {
   -ms-flex-align: start;
   -webkit-align-items: flex-start;
   align-items: flex-start;
}

.flex-middle {
   -ms-flex-align: center;
   -webkit-align-items: center;
   align-items: center;
}

.flex-bottom {
   -ms-flex-align: end;
   -webkit-align-items: flex-end;
   align-items: flex-end;
}
/*
 * Horizontal alignment
 * Default value is `flex-start`
 */
// .flex-left { justify-content: flex-start; }

.flex-center {
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
}

.flex-right {
   -ms-flex-pack: end;
   -webkit-justify-content: flex-end;
   justify-content: flex-end;
}

.flex-space-between {
   -ms-flex-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
}

.flex-space-around {
   -ms-flex-pack: distribute;
   -webkit-justify-content: space-around;
   justify-content: space-around;
}
/* Direction
 ========================================================================== */
// .flex-row { flex-direction: row; }

.flex-row-reverse {
   -ms-flex-direction: row-reverse;
   -webkit-flex-direction: row-reverse;
   flex-direction: row-reverse;
}

.flex-column {
   -ms-flex-direction: column;
   -webkit-flex-direction: column;
   flex-direction: column;
}

.flex-column-reverse {
   -ms-flex-direction: column-reverse;
   -webkit-flex-direction: column-reverse;
   flex-direction: column-reverse;
}
/* Wrap
 ========================================================================== */
// Default

.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-stretch { align-content: 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: $breakpoint-small) {
@media #{$xsmall-and-up} {
   .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: $breakpoint-medium) {
@media #{$medium-and-up} {
   .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: $breakpoint-large) {
@media #{$large-and-up} {
   .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: $breakpoint-xlarge) {
@media #{$from-large-and-up} {
   .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;
}
// Hooks
// ========================================================================
@include hook-flex-misc(); // @mixin hook-flex-misc(){}