$screen-sm: 688px;
$screen-md: 992px;
$screen-lg: 1312px;

.full-width{
  width: 100%;
}

.full-height{
  height: 100%;
}

.hidden {
  display: none !important;
}
.display-block{
  display: block !important;
}

.display-flex{
  display: flex;
}

.flex-space-between{
  justify-content: space-between;
}
.justify-content-space-between{
  justify-content: space-between;
}
.justify-content-center{
  justify-content: center;
}

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

.display-inline{
  display: inline;
}
.display-inline-block{
  display: inline-block;
}
.float-left{
  float: left;
}
.float-right{
  float: right;
}
.position-absolute{
  position: absolute;
}
.position-relative{
  position: relative;
}
.position-fixed{
  position: fixed;
}


.container {
  margin: 0 auto;
  max-width: 1488px;
  padding: 0 16px;
  position: relative;
  width: 100%;
}

.container.full-container {
  padding: 0;
}

//Base unit used for spacing gutters
$base-unit:8px;


////////////////////////
//The Flex Grid
////////////////////////
.grid {
  box-sizing: border-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex !important;
  -webkit-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  -webkit-box-flex: 0;
  flex: 0 1 auto;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0 ($base-unit * -1) 0 ($base-unit * -1);
  //Use this modifier to remove gutters
  &.grid-nogutter {
    margin: 0;
    & > .col {
      padding: 0;
    }
  }
}

.col {
  box-sizing: border-box;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  -webkit-box-flex: 1;
  flex-grow: 1;
  -ms-flex-preferred-size: 0;
  -webkit-flex-basis: 0;
  flex-basis: 0;
  max-width: 100%;
  min-width: 0;
  padding: 0 $base-unit 0 $base-unit;
}

////////////////////////
//Column Modifiers
////////////////////////

//Column Vertical Alignment Classes
.col-align-top {
  -webkit-align-self: flex-start;
  -ms-flex-item-align: start;
  align-self: flex-start;
}

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

.col-align-middle {
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
}

//Column Content Alignment Classes
.col-top {
  justify-content: flex-start !important;
  flex-direction: column;
  display: flex;
}

.col-bottom {
  justify-content: flex-end !important;
  flex-direction: column;
  display: flex;
}

.col-middle {
  justify-content: center;
  flex-direction: column;
  display: flex;
}

//Horizontal Grid Alignment
.grid-start {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

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

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

//Column Distribution
.grid-around {
  justify-content: space-around;
}

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

//Reordering Columns
.col-first {
  -webkit-box-ordinal-group: 0;
  -ms-flex-order: -1;
  order: -1;
}

.col-last {
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
  order: 1;
}

.grid-reverse {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

////////////////////////
//Column Sizing Classes
////////////////////////

//Fixed Column Class
.col-fixed {
  flex: initial;
}

//Grow Based Columns
@for $i from 2 through 11 {
  .col-grow-#{$i} {
    flex-grow: $i;
  }
}

//Percent Based Columns
@for $i from 1 through 12 {
  .col-#{$i} {
    -ms-flex-preferred-size: calc(calc(100% / 12) * #{$i});
    -webkit-flex-basis: calc(calc(100% / 12) * #{$i}) ;
    flex-basis: calc(calc(100% / 12) * #{$i}) ;
    max-width: calc(calc(100% / 12) * #{$i}) ;
  }
}

//////////////////
//Media Queries
//////////////////

@media only screen and (max-width: $screen-lg) {
  .col-lg {
    flex: 100%;
    max-width: 100%;
  }
  @for $i from 1 through 12 {
    .col-lg-#{$i} {
      -ms-flex-preferred-size: calc(calc(100% / 12) * #{$i});
      -webkit-flex-basis: calc(calc(100% / 12) * #{$i});
      flex-basis: calc(calc(100% / 12) * #{$i});
      max-width: calc(calc(100% / 12) * #{$i});
    }
  }
}

@media only screen and (max-width: $screen-md) {
  .col-md {
    flex: 100%;
    max-width: 100%;
  }
  @for $i from 1 through 12 {
    .col-md-#{$i} {
      -ms-flex-preferred-size: calc(calc(100% / 12) * #{$i});
      -webkit-flex-basis: calc(calc(100% / 12) * #{$i});
      flex-basis: calc(calc(100% / 12) * #{$i});
      max-width: calc(calc(100% / 12) * #{$i});
    }
  }
}

@media only screen and (max-width: $screen-sm) {
  .col-sm {
    flex: 100%;
    max-width: 100%;
  }
  @for $i from 1 through 12 {
    .col-sm-#{$i} {
      -ms-flex-preferred-size: calc(calc(100% / 12) * #{$i});
      -webkit-flex-basis: calc(calc(100% / 12) * #{$i});
      flex-basis: calc(calc(100% / 12) * #{$i});
      max-width: calc(calc(100% / 12) * #{$i});
    }
  }

}