/*== Prime Grid ==*/

// Reset elements
*,
*:after,
*:before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

// Width of one column
$col-width: 100% / 12;

// Gutter between two columns
$gutter: 16px !default;

// Breakpoints
$breakpoints: ("xl": 1400px, "lg": 1200px, "md": 992px, "sm": 768px, "xs": 576px) !default;

// Maximum containers widths
$container-max-widths: ("default": 1320px, "xl": 1320px, "lg": 1140px, "md": 960px, "sm": 720px, "xs": 540px) !default;


/*== Default layout. Basically, all devices ==*/
.container {
  max-width: map-get($container-max-widths, "default");
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  &-fluid {
    max-width: 100%;
  }
}

.row {
  display: flex;
  flex: 0 1 auto;
  flex-flow: row wrap;
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0 $gutter / 2;
  &.no-gutter {
    padding: 0;
  }
  &.gutter {
    padding: $gutter / 2
  }
  &.no-vert-gutter {
    padding-top: 0;
    padding-bottom: 0;
  }
  &.no-hor-gutter {
    padding-left: 0;
    padding-right: 0;
  }
  &.vert-gutter {
    padding-top: $gutter / 2;
    padding-bottom: $gutter / 2;
  }
  &.hor-gutter {
    padding-left: $gutter / 2;
    padding-right: $gutter / 2;
  }
}

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

.col-reverse {
  flex-direction: col-reverse;
}

.row-break {
  width: 100%;
}

.row-break {
  &-xs,
  &-sm,
  &-md,
  &-lg,
  &-xl {
    display: none;
  }
}

.col,
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12,
.col-offset-0,
.col-offset-1,
.col-offset-2,
.col-offset-3,
.col-offset-4,
.col-offset-5,
.col-offset-6,
.col-offset-7,
.col-offset-8,
.col-offset-9,
.col-offset-10,
.col-offset-11,
.col-offset-12 {
  flex: 0 0 auto;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0 $gutter / 2;
  &.no-gutter {
    padding: 0;
  }
  &.gutter {
    padding: $gutter / 2
  }
  &.no-vert-gutter {
    padding-top: 0;
    padding-bottom: 0;
  }
  &.no-hor-gutter {
    padding-left: 0;
    padding-right: 0;
  }
  &.vert-gutter {
    padding-top: $gutter / 2;
    padding-bottom: $gutter / 2;
  }
  &.hor-gutter {
    padding-left: $gutter / 2;
    padding-right: $gutter / 2;
  }
}

.col,
.col-offset-0,
.col-offset-1,
.col-offset-2,
.col-offset-3,
.col-offset-4,
.col-offset-5,
.col-offset-6,
.col-offset-7,
.col-offset-8,
.col-offset-9,
.col-offset-10,
.col-offset-11,
.col-offset-12 {
  flex: 1 0 0;
}

@for $i from 1 through 12 {
  .col-#{$i} {
    flex-basis: $col-width * $i;
    max-width: $col-width * $i;
  }
}

.col-offset-0 {
  margin-left: 0;
}

@for $i from 1 through 11 {
  .col-offset-#{$i} {
    margin-left: $col-width * $i;
  }
}

.row-left {
  justify-content: flex-start;
}

.row-center {
  justify-content: center;
}

.row-right {
  justify-content: flex-end;
}

.row-between {
  justify-content: space-between;
}

.row-evenly {
  justify-content: space-evenly;
}

.row-around {
  justify-content: space-around;
}

.row-top {
  align-items: flex-start;
}

.row-middle {
  align-items: center;
}

.row-stretch {
  align-items: stretch;
}

.row-baseline {
  align-items: baseline;
}

.row-bottom {
  align-items: flex-end;
}

.col-top {
  align-self: flex-start;
}

.col-middle {
  align-self: center;
}

.col-bottom {
  align-self: flex-end;
}

.first {
  order: -1;
}

.last {
  order: 1;
}

.hide {
  display: none;
}

.show {
  display: block;
  &.row {
    display: flex;
  }
}


/*== Extra large devices and lower ==*/
@media only screen and (max-width: map-get($breakpoints, "xl") - 1) {
  .container {
    max-width: map-get($container-max-widths, "xl");
    &-xl {
      max-width: map-get($container-max-widths, "xl");
    }
    &-fluid-xl {
      max-width: 100%;
    }
  }

  .row {
    &.no-gutter-xl {
      padding: 0;
    }
    &.gutter-xl {
      padding: $gutter / 2
    }
    &.no-vert-gutter-xl {
      padding-top: 0;
      padding-bottom: 0;
    }
    &.no-hor-gutter-xl {
      padding-left: 0;
      padding-right: 0;
    }
    &.vert-gutter-xl {
      padding-top: $gutter / 2;
      padding-bottom: $gutter / 2;
    }
    &.hor-gutter-xl {
      padding-left: $gutter / 2;
      padding-right: $gutter / 2;
    }
  }

  .row-reverse-xl {
    flex-direction: row-reverse;
  }

  .col-reverse-xl {
    flex-direction: col-reverse;
  }

  .row-break-xl {
    display: block;
    width: 100%;
  }

  .row-break {
    &-xs,
    &-sm,
    &-md,
    &-lg {
      display: none;
    }
  }

  .col-xl,
  .col-xl-1,
  .col-xl-2,
  .col-xl-3,
  .col-xl-4,
  .col-xl-5,
  .col-xl-6,
  .col-xl-7,
  .col-xl-8,
  .col-xl-9,
  .col-xl-10,
  .col-xl-11,
  .col-xl-12,
  .col-xl-offset-0,
  .col-xl-offset-1,
  .col-xl-offset-2,
  .col-xl-offset-3,
  .col-xl-offset-4,
  .col-xl-offset-5,
  .col-xl-offset-6,
  .col-xl-offset-7,
  .col-xl-offset-8,
  .col-xl-offset-9,
  .col-xl-offset-10,
  .col-xl-offset-11,
  .col-xl-offset-12 {
    flex: 0 0 auto;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0 $gutter / 2;
    &.no-gutter-xl {
      padding: 0;
    }
    &.gutter-xl {
      padding: $gutter / 2
    }
    &.no-vert-gutter-xl {
      padding-top: 0;
      padding-bottom: 0;
    }
    &.no-hor-gutter-xl {
      padding-left: 0;
      padding-right: 0;
    }
    &.vert-gutter-xl {
      padding-top: $gutter / 2;
      padding-bottom: $gutter / 2;
    }
    &.hor-gutter-xl {
      padding-left: $gutter / 2;
      padding-right: $gutter / 2;
    }
  }

  .col-xl,
  .col-xl-offset-0,
  .col-xl-offset-1,
  .col-xl-offset-2,
  .col-xl-offset-3,
  .col-xl-offset-4,
  .col-xl-offset-5,
  .col-xl-offset-6,
  .col-xl-offset-7,
  .col-xl-offset-8,
  .col-xl-offset-9,
  .col-xl-offset-10,
  .col-xl-offset-11,
  .col-xl-offset-12 {
    flex: 1 0 0;
  }

  @for $i from 1 through 12 {
    .col-xl-#{$i} {
      flex-basis: $col-width * $i;
      max-width: $col-width * $i;
    }
  }

  .col-xl-offset-0 {
    margin-left: 0
  }

  @for $i from 1 through 11 {
    .col-xl-offset-#{$i} {
      margin-left: $col-width * $i;
    }
  }

  .row-left-xl {
    justify-content: flex-start;
  }

  .row-center-xl {
    justify-content: center;
  }

  .row-right-xl {
    justify-content: flex-end;
  }

  .row-between-xl {
    justify-content: space-between;
  }

  .row-evenly-xl {
    justify-content: space-evenly;
  }

  .row-around-xl {
    justify-content: space-around;
  }

  .row-top-xl {
    align-items: flex-start;
  }

  .row-middle-xl {
    align-items: center;
  }

  .row-stretch-xl {
    align-items: stretch;
  }

  .row-baseline-xl {
    align-items: baseline;
  }

  .row-bottom-xl {
    align-items: flex-end;
  }

  .col-top-xl {
    align-self: flex-start;
  }

  .col-middle-xl {
    align-self: center;
  }

  .col-bottom-xl {
    align-self: flex-end;
  }

  .first-xl {
    order: -1;
  }

  .last-xl {
    order: 1;
  }
  
  .hide-xl {
    display: none;
  }

  .show-xl {
    display: block;
    &.row {
      display: flex;
    }
  }
}


/*== Large devices and lower ==*/
@media only screen and (max-width: map-get($breakpoints, "lg") - 1) {
  .container {
    max-width: map-get($container-max-widths, "lg");
    &-lg {
      max-width: map-get($container-max-widths, "lg");
    }
    &-fluid-lg {
      max-width: 100%;
    }
  }

  .row {
    &.no-gutter-lg {
      padding: 0;
    }
    &.gutter-lg {
      padding: $gutter / 2
    }
    &.no-vert-gutter-lg {
      padding-top: 0;
      padding-bottom: 0;
    }
    &.no-hor-gutter-lg {
      padding-left: 0;
      padding-right: 0;
    }
    &.vert-gutter-lg {
      padding-top: $gutter / 2;
      padding-bottom: $gutter / 2;
    }
    &.hor-gutter-lg {
      padding-left: $gutter / 2;
      padding-right: $gutter / 2;
    }
  }

  .row-reverse-lg {
    flex-direction: row-reverse;
  }

  .col-reverse-lg {
    flex-direction: col-reverse;
  }

  .row-break-lg {
    display: block;
    width: 100%;
  }

  .row-break {
    &-xs,
    &-sm,
    &-md {
      display: none;
    }
  }

  .col-lg,
  .col-lg-1,
  .col-lg-2,
  .col-lg-3,
  .col-lg-4,
  .col-lg-5,
  .col-lg-6,
  .col-lg-7,
  .col-lg-8,
  .col-lg-9,
  .col-lg-10,
  .col-lg-11,
  .col-lg-12,
  .col-lg-offset-0,
  .col-lg-offset-1,
  .col-lg-offset-2,
  .col-lg-offset-3,
  .col-lg-offset-4,
  .col-lg-offset-5,
  .col-lg-offset-6,
  .col-lg-offset-7,
  .col-lg-offset-8,
  .col-lg-offset-9,
  .col-lg-offset-10,
  .col-lg-offset-11,
  .col-lg-offset-12 {
    flex: 0 0 auto;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0 $gutter / 2;
    &.no-gutter-lg {
      padding: 0;
    }
    &.gutter-lg {
      padding: $gutter / 2
    }
    &.no-vert-gutter-lg {
      padding-top: 0;
      padding-bottom: 0;
    }
    &.no-hor-gutter-lg {
      padding-left: 0;
      padding-right: 0;
    }
    &.vert-gutter-lg {
      padding-top: $gutter / 2;
      padding-bottom: $gutter / 2;
    }
    &.hor-gutter-lg {
      padding-left: $gutter / 2;
      padding-right: $gutter / 2;
    }
  }

  .col-lg,
  .col-lg-offset-0,
  .col-lg-offset-1,
  .col-lg-offset-2,
  .col-lg-offset-3,
  .col-lg-offset-4,
  .col-lg-offset-5,
  .col-lg-offset-6,
  .col-lg-offset-7,
  .col-lg-offset-8,
  .col-lg-offset-9,
  .col-lg-offset-10,
  .col-lg-offset-11,
  .col-lg-offset-12 {
    flex: 1 0 0;
  }

  @for $i from 1 through 12 {
    .col-lg-#{$i} {
      flex-basis: $col-width * $i;
      max-width: $col-width * $i;
    }
  }

  .col-lg-offset-0 {
    margin-left: 0
  }

  @for $i from 1 through 11 {
    .col-lg-offset-#{$i} {
      margin-left: $col-width * $i;
    }
  }

  .row-left-lg {
    justify-content: flex-start;
  }

  .row-center-lg {
    justify-content: center;
  }

  .row-right-lg {
    justify-content: flex-end;
  }

  .row-between-lg {
    justify-content: space-between;
  }

  .row-evenly-lg {
    justify-content: space-evenly;
  }

  .row-around-lg {
    justify-content: space-around;
  }

  .row-top-lg {
    align-items: flex-start;
  }

  .row-middle-lg {
    align-items: center;
  }

  .row-stretch-lg {
    align-items: stretch;
  }

  .row-baseline-lg {
    align-items: baseline;
  }

  .row-bottom-lg {
    align-items: flex-end;
  }

  .col-top-lg {
    align-self: flex-start;
  }

  .col-middle-lg {
    align-self: center;
  }

  .col-bottom-lg {
    align-self: flex-end;
  }

  .first-lg {
    order: -1;
  }

  .last-lg {
    order: 1;
  }
  
  .hide-lg {
    display: none;
  }

  .show-lg {
    display: block;
    &.row {
      display: flex;
    }
  }
}


/*== Medium devices and lower ==*/
@media only screen and (max-width: map-get($breakpoints, "md") - 1) {
  .container {
    max-width: map-get($container-max-widths, "md");
    &-md {
      max-width: map-get($container-max-widths, "md");
    }
    &-fluid-md {
      max-width: 100%;
    }
  }

  .row {
    &.no-gutter-md {
      padding: 0;
    }
    &.gutter-md {
      padding: $gutter / 2
    }
    &.no-vert-gutter-md {
      padding-top: 0;
      padding-bottom: 0;
    }
    &.no-hor-gutter-md {
      padding-left: 0;
      padding-right: 0;
    }
    &.vert-gutter-md {
      padding-top: $gutter / 2;
      padding-bottom: $gutter / 2;
    }
    &.hor-gutter-md {
      padding-left: $gutter / 2;
      padding-right: $gutter / 2;
    }
  }

  .row-reverse-md {
    flex-direction: row-reverse;
  }

  .col-reverse-md {
    flex-direction: col-reverse;
  }

  .row-break-md {
    display: block;
    width: 100%;
  }

  .row-break {
    &-xs,
    &-sm {
      display: none;
    }
  }

  .col-md,
  .col-md-1,
  .col-md-2,
  .col-md-3,
  .col-md-4,
  .col-md-5,
  .col-md-6,
  .col-md-7,
  .col-md-8,
  .col-md-9,
  .col-md-10,
  .col-md-11,
  .col-md-12,
  .col-md-offset-0,
  .col-md-offset-1,
  .col-md-offset-2,
  .col-md-offset-3,
  .col-md-offset-4,
  .col-md-offset-5,
  .col-md-offset-6,
  .col-md-offset-7,
  .col-md-offset-8,
  .col-md-offset-9,
  .col-md-offset-10,
  .col-md-offset-11,
  .col-md-offset-12 {
    flex: 0 0 auto;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0 $gutter / 2;
    &.no-gutter-md {
      padding: 0;
    }
    &.gutter-md {
      padding: $gutter / 2
    }
    &.no-vert-gutter-md {
      padding-top: 0;
      padding-bottom: 0;
    }
    &.no-hor-gutter-md {
      padding-left: 0;
      padding-right: 0;
    }
    &.vert-gutter-md {
      padding-top: $gutter / 2;
      padding-bottom: $gutter / 2
    }
    &.hor-gutter-md {
      padding-left: $gutter / 2;
      padding-right: $gutter / 2
    }
  }

  .col-md,
  .col-md-offset-0,
  .col-md-offset-1,
  .col-md-offset-2,
  .col-md-offset-3,
  .col-md-offset-4,
  .col-md-offset-5,
  .col-md-offset-6,
  .col-md-offset-7,
  .col-md-offset-8,
  .col-md-offset-9,
  .col-md-offset-10,
  .col-md-offset-11,
  .col-md-offset-12 {
    flex: 1 0 0;
  }

  @for $i from 1 through 12 {
    .col-md-#{$i} {
      flex-basis: $col-width * $i;
      max-width: $col-width * $i;
    }
  }

  .col-md-offset-0 {
    margin-left: 0;
  }

  @for $i from 1 through 11 {
    .col-md-offset-#{$i} {
      margin-left: $col-width * $i;
    }
  }

  .row-left-md {
    justify-content: flex-start;
  }

  .row-center-md {
    justify-content: center;
  }

  .row-right-md {
    justify-content: flex-end;
  }

  .row-between-md {
    justify-content: space-between;
  }

  .row-evenly-md {
    justify-content: space-evenly;
  }

  .row-around-md {
    justify-content: space-around;
  }

  .row-top-md {
    align-items: flex-start;
  }

  .row-middle-md {
    align-items: center;
  }

  .row-stretch-md {
    align-items: stretch;
  }

  .row-baseline-md {
    align-items: baseline;
  }

  .row-bottom-md {
    align-items: flex-end;
  }

  .col-top-md {
    align-self: flex-start;
  }

  .col-middle-md {
    align-self: center;
  }

  .col-bottom-md {
    align-self: flex-end;
  }

  .first-md {
    order: -1;
  }

  .last-md {
    order: 1;
  }
  
  .hide-md {
    display: none;
  }

  .show-md {
    display: block;
    &.row { 
      display: flex;
    }
  }
}

/*== Small devices and lower ==*/
@media only screen and (max-width: map-get($breakpoints, "sm") - 1) {
  .container {
    max-width: map-get($container-max-widths, "sm");
    &-sm {
      max-width: map-get($container-max-widths, "sm");
    }
    &-fluid-sm {
      max-width: 100%;
    }
  }

  .row {
    &.no-gutter-sm {
      padding: 0;
    }
    &.gutter-sm {
      padding: $gutter / 2
    }
    &.no-vert-gutter-sm {
      padding-top: 0;
      padding-bottom: 0;
    }
    &.no-hor-gutter-sm {
      padding-left: 0;
      padding-right: 0;
    }
    &.vert-gutter-sm {
      padding-top: $gutter / 2;
      padding-bottom: $gutter / 2;
    }
    &.hor-gutter-sm {
      padding-left: $gutter / 2;
      padding-right: $gutter / 2;
    }
  }

  .row-reverse-sm {
    flex-direction: row-reverse;
  }

  .col-reverse-sm {
    flex-direction: col-reverse;
  }

  .row-break-sm {
    display: block;
    width: 100%;
  }

  .row-break {
    &-xs {
      display: none;
    }
  }

  .col-sm,
  .col-sm-1,
  .col-sm-2
  .col-sm-3,
  .col-sm-4,
  .col-sm-5,
  .col-sm-6,
  .col-sm-7,
  .col-sm-8,
  .col-sm-9,
  .col-sm-10,
  .col-sm-11,
  .col-sm-12,
  .col-sm-offset-0,
  .col-sm-offset-1,
  .col-sm-offset-2,
  .col-sm-offset-3,
  .col-sm-offset-4,
  .col-sm-offset-5,
  .col-sm-offset-6,
  .col-sm-offset-7,
  .col-sm-offset-8,
  .col-sm-offset-9,
  .col-sm-offset-10,
  .col-sm-offset-11,
  .col-sm-offset-12 {
    flex: 0 0 auto;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0 $gutter / 2;
    &.no-gutter-sm {
      padding: 0;
    }
    &.gutter-sm {
      padding: $gutter / 2
    }
    &.no-vert-gutter-sm {
      padding-top: 0;
      padding-bottom: 0;
    }
    &.no-hor-gutter-sm {
      padding-left: 0;
      padding-right: 0;
    }
    &.vert-gutter-sm {
      padding-top: $gutter / 2;
      padding-bottom: $gutter / 2;
    }
    &.hor-gutter-sm {
      padding-left: $gutter / 2;
      padding-right: $gutter / 2;
    }
  }

  .col-sm,
  .col-sm-offset-0,
  .col-sm-offset-1,
  .col-sm-offset-2,
  .col-sm-offset-3,
  .col-sm-offset-4,
  .col-sm-offset-5,
  .col-sm-offset-6,
  .col-sm-offset-7,
  .col-sm-offset-8,
  .col-sm-offset-9,
  .col-sm-offset-10,
  .col-sm-offset-11,
  .col-sm-offset-12 {
    flex: 1 0 0;
  }

  @for $i from 1 through 12 {
    .col-sm-#{$i} {
      flex-basis: $col-width * $i;
      max-width: $col-width * $i;
    }
  }
 
  .col-sm-offset-0 {
    margin-left: 0;
  }
    
  @for $i from 1 through 11 {
    .col-sm-offset-#{$i} {
      margin-left: $col-width * $i;
    }
  }

  .row-left-sm {
    justify-content: flex-start
  }

  .row-center-sm {
    justify-content: center
  }

  .row-right-sm {
    justify-content: flex-end;
  }
  
  .row-between-sm {
    justify-content: space-between;
  }

  .row-evenly-sm {
    justify-content: space-evenly;
  }

  .row-around-sm {
    justify-content: space-around;
  }
  
  .row-top-sm {
    align-items: flex-start;
  }
  
  .row-middle-sm {
    align-items: center;
  }
  
  .row-stretch-sm {
    align-items: stretch;
  }
  
  .row-baseline-sm {
    align-items: baseline;
  }
  
  .row-bottom-sm {
    align-items: flex-end;
  }
  
  .col-top-sm {
    align-self: flex-start;
  }
  
  .col-middle-sm {
    align-self: center;
  }
  
  .col-bottom-sm {
    align-self: flex-end;
  }

  .first-sm {
    order: -1;
  }
  
  .last-sm {
    order: 1;
  }
  
  .hide-sm {
    display: none;
  }

  .show-sm {
    display: block;
    &.row {
      display: flex;
    }
  }
}


/*== Extra small devices ==*/
@media only screen and (max-width: map-get($breakpoints, "xs") - 1) {
  .container {
    max-width: map-get($container-max-widths, "xs");
    &-xs {
      max-width: map-get($container-max-widths, "xs");
    }
    &-fluid-xs {
      max-width: 100%;
    }
  }

  .row {
    &.no-gutter-xs {
      padding: 0;
    }
    &.gutter-xs {
      padding: $gutter / 2
    }
    &.no-vert-gutter-xs {
      padding-top: 0;
      padding-bottom: 0;
    }
    &.no-hor-gutter-xs {
      padding-left: 0;
      padding-right: 0;
    }
    &.vert-gutter-xs {
      padding-top: $gutter / 2;
      padding-bottom: $gutter / 2;
    }
    &.hor-gutter-xs {
      padding-left: $gutter / 2;
      padding-right: $gutter / 2;
    }
  }

  .row-reverse-xs {
    flex-direction: row-reverse;
  }

  .col-reverse-xs {
    flex-direction: col-reverse;
  }

  .row-break-xs {
    display: block;
    width: 100%;
  }

  .col-xs,
  .col-xs-1,
  .col-xs-2
  .col-xs-3,
  .col-xs-4,
  .col-xs-5,
  .col-xs-6,
  .col-xs-7,
  .col-xs-8,
  .col-xs-9,
  .col-xs-10,
  .col-xs-11,
  .col-xs-12,
  .col-xs-offset-0,
  .col-xs-offset-1,
  .col-xs-offset-2,
  .col-xs-offset-3,
  .col-xs-offset-4,
  .col-xs-offset-5,
  .col-xs-offset-6,
  .col-xs-offset-7,
  .col-xs-offset-8,
  .col-xs-offset-9,
  .col-xs-offset-10,
  .col-xs-offset-11,
  .col-xs-offset-12 {
    flex: 0 0 auto;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0 $gutter / 2;
    &.no-gutter-xs {
      padding: 0;
    }
    &.gutter-xs {
      padding: $gutter / 2
    }
    &.no-vert-gutter-xs {
      padding-top: 0;
      padding-bottom: 0;
    }
    &.no-hor-gutter-xs {
      padding-left: 0;
      padding-right: 0;
    }
    &.vert-gutter-s {
      padding-top: $gutter / 2;
      padding-bottom: $gutter / 2;
    }
    &.hor-gutter-xs {
      padding-left: $gutter / 2;
      padding-right: $gutter / 2;
    }
  }

  .col-xs,
  .col-xs-offset-0,
  .col-xs-offset-1,
  .col-xs-offset-2,
  .col-xs-offset-3,
  .col-xs-offset-4,
  .col-xs-offset-5,
  .col-xs-offset-6,
  .col-xs-offset-7,
  .col-xs-offset-8,
  .col-xs-offset-9,
  .col-xs-offset-10,
  .col-xs-offset-11,
  .col-xs-offset-12 {
    flex: 1 0 0;
  }

  @for $i from 1 through 12 {
    .col-xs-#{$i} {
      flex-basis: $col-width * $i;
      max-width: $col-width * $i;
    }
  }
 
  .col-xs-offset-0 {
    margin-left: 0;
  }
    
  @for $i from 1 through 11 {
    .col-xs-offset-#{$i} {
      margin-left: $col-width * $i;
    }
  }

  .row-left-xs {
    justify-content: flex-start
  }

  .row-center-xs {
    justify-content: center
  }

  .row-right-xs {
    justify-content: flex-end;
  }
  
  .row-between-xs {
    justify-content: space-between;
  }

  .row-evenly-xs {
    justify-content: space-evenly;
  }

  .row-around-xs {
    justify-content: space-around;
  }
  
  .row-top-xs {
    align-items: flex-start;
  }
  
  .row-middle-xs {
    align-items: center;
  }
  
  .row-stretch-xs {
    align-items: stretch;
  }
  
  .row-baseline-xs {
    align-items: baseline;
  }
  
  .row-bottom-xs {
    align-items: flex-end;
  }
  
  .col-top-xs {
    align-self: flex-start;
  }
  
  .col-middle-xs {
    align-self: center;
  }
  
  .col-bottom-xs {
    align-self: flex-end;
  }

  .first-xs {
    order: -1;
  }
  
  .last-xs {
    order: 1;
  }
  
  .hide-xs {
    display: none;
  }

  .show-xs {
    display: block;
    &.row {
      display: flex;
    }
  }
}