/**! ptb2.me/flexgrid | (c) 2014 Peter T Bosse II | Apache license
/**! Inspired by Bootstrap 3.2 | License: http://bit.ly/WzvaP8

// box-sizing supported by: <http://bit.ly/HM42F3>
//   Chrome, IE 8+, Firefox (-moz), Safari 5.1+, Opera
//   iOS <= 4 & Android <= 2.3 (-webkit), Firefox (-moz)

// :before and :after pseudo-elements supported by:
//   Chrome, IE 8+, Firefox, Safari, Opera 4.0+:
// ::before and ::after pseudo-elements supported by:
//   Chrome, IE 9+, Firefox, Safari, Opera 7.0+:
// <http://mzl.la/Q5hf09> <bit.ly/YCpGPd> <bit.ly/XV046x>

// XHTML supported by IE 9+ and all other browsers

// media queries supported by: <http://mzl.la/Ykdnuw>
//   Chrome, IE 9+, Firefox, Safari 1.3+, Opera 9.2+

// :root CSS selector supported by: <http://mzl.la/1vvPJgA>
//   Chrome, IE 9+, Firefox, Safari, Opera 9.5+

// flexible box layout supported by: <http://bit.ly/e4JYg3>
//   Chrome, IE 10+, Firefox, Safari, Opera 12.1+

// FYI: Bootstrap 3 drops support for IE 7: <bit.ly/QlWhvD>
// FYI: jQuery 2.0 drops support for IE 8: <bit.ly/QQ0Cme>
// FYI: Google has dropped support for IE 9: <bit.ly/z6LWk0>


//** Variable Definitions **//

$grid-columns: 12 !default
$grid-gutter-width: 30px !default
$reorder: false !default

$container-sm: 720px + $grid-gutter-width !default
$container-md: 940px + $grid-gutter-width !default
$container-lg: 1140px + $grid-gutter-width !default

$screen-sm-min: 768px !default
$screen-md-min: 992px !default
$screen-lg-min: 1200px !default


//** Mixin Directive Declarations **//

=box-sizing($boxmodel)
  -webkit-box-sizing: $boxmodel
  -moz-box-sizing: $boxmodel
  box-sizing: $boxmodel

=make-grid-columns($i: 1, $list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}")
  @for $i from 1 + 1 through $grid-columns
    $list: "#{$list}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}"
  #{$list}
    position: relative
    min-height: 1px
    padding-left: $grid-gutter-width / 2
    padding-right: $grid-gutter-width / 2

=float-grid-columns($class, $i: 1, $list: ".col-#{$class}-#{$i}")
  @for $i from 1 + 1 through $grid-columns
    $list: "#{$list}, .col-#{$class}-#{$i}"
  \:root:not(.flexbox):not(.webkitbox)
    & #{$list}
      float: left

=calc-grid-column($index, $class, $type)
  @if $type == width and $index > 0
    .col-#{$class}-#{$index}
      width: percentage($index / $grid-columns)
  @if $reorder
    @if $type == push and $index > 0
      \:root:not(.flexbox):not(.webkitbox)
        & .col-#{$class}-push-#{$index}
          left: percentage($index / $grid-columns)
      @if $index < $grid-columns
        \:root.flexbox, :root.webkitbox
          & .col-#{$class}-push-#{$index}
            +order-flex($index + 1)
    @if $type == push and $index == 0
      \:root:not(.flexbox):not(.webkitbox)
        & .col-#{$class}-push-0
          left: auto
      \:root.flexbox, :root.webkitbox
        & .col-#{$class}-push-0
          +order-flex($index + 1)
    @if $type == pull and $index > 0
      \:root:not(.flexbox):not(.webkitbox)
        & .col-#{$class}-pull-#{$index}
          right: percentage($index / $grid-columns)
      @if $index < $grid-columns
        \:root.flexbox, :root.webkitbox
          & .col-#{$class}-pull-#{$index}
            +order-flex($grid-columns - $index)
    @if $type == pull and $index == 0
      \:root:not(.flexbox):not(.webkitbox)
        & .col-#{$class}-pull-0
          right: auto
      \:root.flexbox, :root.webkitbox
        & .col-#{$class}-pull-0
          +order-flex($grid-columns)
  @if $type == offset
    .col-#{$class}-offset-#{$index}
      margin-left: percentage($index / $grid-columns)

=loop-grid-columns($columns, $class, $type)
  @for $i from 0 through $columns
    +calc-grid-column($i, $class, $type)

=make-grid($class)
  +float-grid-columns($class)
  +loop-grid-columns($grid-columns, $class, width)
  +loop-grid-columns($grid-columns, $class, pull)
  +loop-grid-columns($grid-columns, $class, push)
  +loop-grid-columns($grid-columns, $class, offset)

=order-flex($i)
  -webkit-box-ordinal-group: $i
  -ms-flex-order: $i
  -webkit-order: $i
  order: $i


//** Placeholder Selector Declarations **//

%boxsizing
  +box-sizing(border-box)

%clearfix
  &::before, &::after
    content: ' '
    display: table
  &::after
    clear: both


//** Class Selector Declarations **//

*, *::before, *::after
  @extend %boxsizing

.container, .container-fluid
  margin-right: auto
  margin-left: auto
  padding-left: $grid-gutter-width / 2
  padding-right: $grid-gutter-width / 2
  @extend %clearfix

.row
  margin-left: $grid-gutter-width / -2
  margin-right: $grid-gutter-width / -2
  @extend %clearfix
  \:root.flexbox &, :root.webkitbox &
    display: -webkit-box
    display: -ms-flexbox
    display: -webkit-flex
    display: flex

+make-grid-columns

+make-grid(xs)

@media (min-width: $screen-sm-min)
  .container
    width: $container-sm
  +make-grid(sm)

@media (min-width: $screen-md-min)
  .container
    width: $container-md
  +make-grid(md)

@media (min-width: $screen-lg-min)
  .container
    width: $container-lg
  +make-grid(lg)