@charset "UTF-8";
/*!
 * ---------------------------------------------- *
 * Grid
 * http://brajeshwar.github.io/grid/
 *
 * Brajeshwar
 * http://brajeshwar.me
 * ---------------------------------------------- *
 */


// legacy support
$legacy-support-for-mozilla         : false;
$legacy-support-for-webkit          : false;

// experimental support
$experimental-support-for-mozilla   : true;
$experimental-support-for-webkit    : true;
$experimental-support-for-opera     : false;
$experimental-support-for-microsoft : false;
$experimental-support-for-khtml     : false;
$experimental-support-for-pie       : false;

// set the initial em-base
$em-base:             16px !default;

// ---------------------------------------------- //

// strips the unit of measure
@function strip-unit($num) {
  @return $num / ($num * 0 + 1);
}

// pixel to em calculation
// em-calc(#);
// enter the number, no need to mention the unit.
@function convert-to-em($value, $base-value: $em-base) {
  $value: strip-unit($value) / strip-unit($base-value) * 1em;
  @if $value == 0em {
    $value: 0;
  }
  // Turn 0em into 0
  @return $value;
}

@function em-calc($values, $base-value: $em-base) {
  $max: length($values);
  @if $max == 1 {
    @return convert-to-em(nth($values, 1), $base-value);
  }
  $emValues: ();
  @for $i from 1 through $max {
    $emValues: append($emValues, convert-to-em(nth($values, $i), $base-value));
  }
  @return $emValues;
}

// grid calculation
@function gridCalc($colNumber, $totalColumns) {
  @return percentage($colNumber / $totalColumns);
}

// ---------------------------------------------- //
// GRID CONFIG
// write the default classes?
$split-classes:         true !default;

// namespaces
// what would you like the default grid classes to be
$name-row:              "row" !default;
$name-column:           "column" !default;
$name-small:            "small" !default;
$name-medium:           "medium" !default;
$name-large:            "large" !default;


$row-width:             em-calc(1140) !default;
$column-gutter:         em-calc(24) !default;
$total-columns:         12 !default;

$text-direction:        ltr !default;
$default-float:         left !default;
$opposite-direction:    right !default;

@if $text-direction ==  ltr {
  $default-float:       left;
  $opposite-direction:  right;
} @else {
  $default-float:       right;
  $opposite-direction:  left;
}

$small-screen:          768px !default;
$medium-screen:         1024px !default;
$large-screen:          1440px !default;

$screen:                "only screen" !default;
$small:                 "only screen and (min-width: #{$small-screen})" !default;
$medium:                "only screen and (min-width: #{$medium-screen})" !default;
$large:                 "only screen and (min-width: #{$large-screen})" !default;
$landscape:             "only screen and (orientation: landscape)" !default;
$portrait:              "only screen and (orientation: portrait)" !default;

// ---------------------------------------------- //
// MIXINS

// clearfix
@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

// box-sizing
//
// Apply a natural box layout model to all elements
// Supported in Chrome, IE8+, Opera, Safari 5.1+
//
// IE8 does not support box-sizing: border-box;
// with min-width/max-width and min-height/max-height.
//
// For IE6/7 you can optionally use the box-sizing polyfill
// https://github.com/Schepp/box-sizing-polyfill
//
// @include box-sizing(border-box);
@mixin box-sizing($type: border-box) {
  // firefox
  @if $experimental-support-for-mozilla {
    -moz-box-sizing: $type;
  }
  // old iOS<=4 and Android<=2.3
  @if $experimental-support-for-webkit {
    -webkit-box-sizing: $type;
  }
  box-sizing: $type;
}

// default, nested, and collapsed rows
@mixin grid-row($behavior: false) {
  // use @include grid-row(nest); to include a nested row
  @if $behavior == nest {
    margin-#{$default-float}: -($column-gutter / 2);
    margin-#{$opposite-direction}: -($column-gutter / 2);
    max-width: none;
    width: auto;
  }
  @else if $behavior == collapse {
    margin-#{$default-float}: 0;
    margin-#{$opposite-direction}: 0;
    max-width: $row-width;
    width: 100%;
  }
  @else if $behavior == nest-collapse {
    margin-#{$default-float}: 0;
    margin-#{$opposite-direction}: 0;
    max-width: none;
    width: auto;
  }
  @else {
    margin-#{$default-float}: auto;
    margin-#{$opposite-direction}: auto;
    margin-top: 0;
    margin-bottom: 0;
    max-width: $row-width;
    width: 100%;
  }
  @include clearfix;
}

// create columns
// @include these inside a media query to control small, medium & large grids
@mixin grid-column($columns: false, $last-column: false, $center: false, $offset: false, $push: false, $pull: false, $collapse: false, $float: true, $include-position-relative: false) {
  // if collapsed, get rid of gutter padding
  @if $collapse {
    padding-left: 0;
    padding-right: 0;
  }
  @else if $collapse == false {
    padding-left: $column-gutter / 2;
    padding-right: $column-gutter / 2;
  }
  // if a column number is given, calculate width
  @if $columns {
    width: gridCalc($columns, $total-columns);
    // If last column, float naturally instead of to the right
    @if $last-column {
      float: $opposite-direction;
    }
  }
  // if offset, calculate appropriate margins
  @if $offset {
    margin-#{$default-float}: gridCalc($offset, $total-columns);
  }
  // source ordering, adds left/right depending on which you use.
  @if $push {
    #{$default-float}: gridCalc($push, $total-columns);
    #{$opposite-direction}: auto;
  }
  @if $pull {
    #{$opposite-direction}: gridCalc($pull, $total-columns);
    #{$default-float}: auto;
  }
  // if centered, get rid of float and add appropriate margins
  @if $center {
    margin-#{$default-float}: auto;
    margin-#{$opposite-direction}: auto;
    float: none !important;
  }
  @if $float {
    @if $float == left or $float == true {
      float: $default-float;
    }
    @else if $float == right {
      float: $opposite-direction;
    }
    @else {
      float: none;
    }
  }
  // this helps us not need to repeat "position:relative" everywehere
  @if $include-position-relative {
    position: relative;
  }
}

// ---------------------------------------------- //

// right and left "auto" for grid
%right-auto {
  #{$opposite-direction}: auto;
}

%left-auto {
  #{$default-float}: auto;
}


// build the grid classes
// if it is set so in the CONFIG
// this can be disabled and
// set semantic classes instead of the generic span, row and column classes.
@if $split-classes != false {

  *,
  *:after,
  *:before {
    @include box-sizing(border-box);
  }

  /* Grid HTML Classes */
  .#{$name-row} {
    @include grid-row;
    &.collapse {
      .#{$name-column},
      .#{$name-column}s {
        @include grid-column($collapse: true);
      }
    }
    .#{$name-row} {
      @include grid-row($behavior: nest);
      &.collapse {
        @include grid-row($behavior: nest-collapse);
      }
    }
  }
  .#{$name-column},
  .#{$name-column}s {
    @include grid-column($columns: $total-columns, $include_position_relative: true);
  }
  @media only screen {
    @for $i from 1 through $total-columns {
      .#{$name-small}#{-$i} {
        @include grid-column($collapse: null, $columns: $i, $float: false);
      }
    }
    @for $i from 0 through $total-columns - 2 {
      .#{$name-small}-offset-#{$i} {
        @include grid-column($collapse: null, $float: false, $offset: $i);
      }
    }
    [class*="column"] + [class*="column"]:last-child {
      float: $opposite-direction;
    }
    [class*="column"] + [class*="column"].end {
      float: $default-float;
    }
    .#{$name-column}.#{$name-small}-centered,
    .#{$name-column}s.#{$name-small}-centered {
      @include grid-column($center: true, $collapse: null, $float: false);
    }
  }
  @media only screen and (min-width: $small-screen) {
    @for $i from 1 through $total-columns {
      .#{$name-medium}#{-$i} {
        @include grid-column($collapse: null, $columns: $i, $float: false);
      }
    }
    @for $i from 0 through $total-columns - 1 {
      .#{$name-medium}-offset-#{$i} {
        @include grid-column($collapse: null, $float: false, $offset: $i);
      }
    }
    @for $i from 1 through $total-columns - 1 {
      .#{$name-medium}-push#{-$i} {
        @include grid-column($collapse: null, $float: false, $push: $i);
      }
      .#{$name-medium}-pull#{-$i} {
        @include grid-column($collapse: null, $float: false, $pull: $i);
      }
    }
    .#{$name-column}.#{$name-medium}-centered,
    .#{$name-column}s.#{$name-medium}-centered {
      @include grid-column($center: true, $collapse: null, $float: false);
    }
    .#{$name-column}.#{$name-medium}-uncentered,
    .#{$name-column}s.#{$name-medium}-uncentered {
      margin-#{$default-float}: 0;
      margin-#{$opposite-direction}: 0;
      float: $default-float !important;
    }
  }
  @media only screen and (min-width: $medium-screen) {
    @for $i from 1 through $total-columns {
      .#{$name-large}#{-$i} {
        @include grid-column($collapse: null, $columns: $i, $float: false);
      }
    }
    @for $i from 0 through $total-columns - 1 {
      .#{$name-large}-offset-#{$i} {
        @include grid-column($collapse: null, $float: false, $offset: $i);
      }
    }
    @for $i from 1 through $total-columns - 1 {
      .#{$name-large}-push#{-$i} {
        @include grid-column($collapse: null, $float: false, $push: $i);
      }
      .#{$name-large}-pull#{-$i} {
        @include grid-column($collapse: null, $float: false, $pull: $i);
      }
    }
    .#{$name-column}.#{$name-large}-centered,
    .#{$name-column}s.#{$name-large}-centered {
      @include grid-column($center: true, $collapse: null, $float: false);
    }
    .#{$name-column}.#{$name-large}-uncentered,
    .#{$name-column}s.#{$name-large}-uncentered {
      margin-#{$default-float}: 0;
      margin-#{$opposite-direction}: 0;
      float: $default-float !important;
    }
  }
}