/* ==========================================================================

Watermark Flexible Grid
========================================================================== */

$row-width: 960px !default; //60rem !default; $column-gutter: .9375rem !default; $total-columns: 12 !default; $show-grid: false !default;

.flex-row {

@include clearfix;
margin: 0 auto;
max-width: $row-width;
width: 100%;

// nested row
.flex-row {
  margin-bottom: 0;
  margin-left: -($column-gutter);
  margin-right: -($column-gutter);
  margin-top: 0;
  width: auto;
}

&.collapse > .column,
&.collapse > .columns {
  padding-left: 0;
  padding-right: 0;
}

&.collapse-outer > .column,
&.collapse-outer > .columns {

  &:first-child {
    padding-left: 0;
  }

  &:last-child {
    padding-right: 0;
  }
}

&.full-width {
  max-width: none;
}

}

// all columns need the .column class .column, .columns {

float: left;
padding-left: $column-gutter;
padding-right: $column-gutter;
position: relative;
width: 100%;

// center a column
&.centered {
  float: none;
  margin-left: auto;
  margin-right: auto;
}

// if $show-grid is set to true all grid columns will
// be visible, just for test or example purposes
@if $show-grid == true {
  background-color: rgba(red,.1);
  border: 1px solid rgba(red,.2);
  border-top: none;
  border-bottom: none;
}

}

// // Column-widths created dynamically //

// generate small grid classes @for $i from 1 through $total-columns {

.small-#{$i} {
  width: ((100 / $total-columns) * $i) * 1%;
}
.small-offset-#{$i} {
  margin-left: ((100 / $total-columns) * $i) * 1%;
}
.small-push-#{$i} {
  position: relative;
  left: ((100 / $total-columns) * $i) * 1%;
  right: auto;
}
.small-pull-#{$i} {
  position: relative;
  right: ((100 / $total-columns) * $i) * 1%;
  left: auto;
}

}

@media screen and (min-width: $medium-breakpoint) {

// generate flexible grid above mobile
@for $i from 1 through $total-columns {
  .medium-#{$i} {
    width: ((100 / $total-columns) * $i) * 1%;
  }
  .medium-offset-#{$i} {
    margin-left: ((100 / $total-columns) * $i) * 1%;
  }
  .medium-push-#{$i} {
    position: relative;
    left: ((100 / $total-columns) * $i) * 1%;
    right: auto;
  }
  .medium-pull-#{$i} {
    position: relative;
    right: ((100 / $total-columns) * $i) * 1%;
    left: auto;
  }
}

.medium-reset-order {
  float: left;
  margin-left: 0;
  margin-right: 0;
  left: auto;
  right: auto;
}

}

@media screen and (min-width: $large-breakpoint) {

@for $i from 1 through $total-columns {
  .large-#{$i} {
    width: ((100 / $total-columns) * $i) * 1%;
  }
  .large-offset-#{$i} {
    margin-left: ((100 / $total-columns) * $i) * 1%;
  }
  .large-push-#{$i} {
    position: relative;
    left: ((100 / $total-columns) * $i) * 1%;
    right: auto;
  }
  .large-pull-#{$i} {
    position: relative;
    right: ((100 / $total-columns) * $i) * 1%;
    left: auto;
  }
}

.large-reset-order {
  float: left;
  margin-left: 0;
  margin-right: 0;
  left: auto;
  right: auto;
}

}