/*== 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
  &.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-xs
      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