// grid vars
$grid-columns: 12;
$gutter_width: 15px;
$grid-large-width-breakpoint: 1200px;
$grid-medium-width-breakpoint: 992px;
$grid-small-width-breakpoint: 768px;
$grid-xsmall-width-breakpoint: 768px;
$breakpoints: (
    'xs' '(max-width: #{$grid-xsmall-width-breakpoint})' 768px, // xsmall
    's'  '(min-width: #{$grid-small-width-breakpoint})' 780px, // small
    'm'  '(min-width: #{$grid-medium-width-breakpoint})' 1000px, // medium
    'l'  '(min-width: #{$grid-large-width-breakpoint})' 1200px // large
);
$widths: (
  '1' '8.33333333%',
  '2' '16.66666667%',
  '3' '25%',
  '4' '33.3333333%',
  '5' '41.66666667%',
  '6' '50%',
  '7' '58.33333333%',
  '8' '66.66666667%',
  '9' '75%',
  '10' '83.33333333%',
  '11' '91.66666667%',
  '12' '100%'
);
//mixins.scss

@mixin font-size($size) {
    font-size: $size;
    line-height: $base-line-height*$size;
    margin: ($size / 2) 0 ($size / 2.5) 0;
}

// mixin border-radius
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

// mixin box-shadow
@mixin box-shadow ($values...) {
    -webkit-box-shadow: $values;
            box-shadow: $values;
}

// mixin box-sizing
@mixin box-sizing ($type: border-box) {
    -webkit-box-sizing: $type;
       -moz-box-sizing: $type;
            box-sizing: $type;
}

// mixin opacity
@mixin opacity ($value: 1) {
    $value-percentage : $value * 100;
    opacity: $value;
    filter: alpha(opacity=$value-percentage);
}

// mixin text-shadow
@mixin text-shadow($x, $y, $blur, $color) {
    text-shadow: $x $y $blur $color;
}

// mixin user-select
@mixin user-select() {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

//mixin center
@mixin center(){
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
    left:50%;
    top:50%;
}

// mixin transition
@mixin transition($time) {
  -webkit-transition: $time;
  -moz-transition: $time;
  -o-transition: $time;
  -ms-transition: $time;
  transition: $time;
}

//mixin clearfix
@mixin clearfix() {
  *zoom: 1;
  &:before, &:after{
    content: "";
    display: table;
    line-height: 0;
  }
  &:after {
    clear: both;
  }
}

// function calculateContainerWidth
@function calculateContainerWidth($width, $gutter){
  @return $width - ($gutter * 2)
}

//mixin media-query
@mixin media-query($media-query) {
  $breakpoint-found: false;
  @each $breakpoint in $breakpoints {
    $name: nth($breakpoint, 1);
    $rule: nth($breakpoint, 2);
    $container_size: nth($breakpoint, 3);
    @if $media-query == $name and $rule {
      $breakpoint-found: true;
      @media only screen and #{$rule} {
        [class*='grid-#{$name}-']{
          float: left;
        }
        @if $name == "s" or $name == "m" or $name == "l"{
          .container {
            width: unquote(calculateContainerWidth($container_size, $gutter_width));
          }
        }
        $index: 1;
        @each $width in $widths {
          $width_value: nth($width, 2);
          .grid-#{$name}-#{$index}{
            width: unquote($width_value);
            padding-right: $gutter_width;
            padding-left: $gutter_width;
            position: relative;
            min-height: 1px;
          }
          .grid-#{$name}-offset-#{$index}{
            margin-left: unquote($width_value);
          }
          .grid-#{$name}-pull-#{$index}{
            right: unquote($width_value);
          }
          .grid-#{$name}-push-#{$index}{
            left: unquote($width_value);
          }
          $index: $index + 1;
        }
      }
    }
  }
  @if $breakpoint-found == false {
    @warn "Breakpoint '#{$media-query}'' does not exist"
  }
}

//mixin all-grid
@mixin all-grid() {
  $index: 1;
  @each $width in $widths {
    $width_value: nth($width, 2);
    .grid-all-#{$index}{
      width: unquote($width_value);
      padding-right: $gutter_width;
      padding-left: $gutter_width;
      position: relative;
      min-height: 1px;
    }
    .grid-all-offset-#{$index}{
      margin-left: unquote($width_value);
    }
    .grid-all-pull-#{$index}{
      right: unquote($width_value);
    }
    .grid-all-push-#{$index}{
      left: unquote($width_value);
    }
    $index: $index + 1;
  }
}

// Background sizing
@mixin background-size($size) {
  -webkit-background-size: unquote($size);
     -moz-background-size: unquote($size);
       -o-background-size: unquote($size);
          background-size: unquote($size);
}

// Transformations
@mixin rotate($degrees) {
  -webkit-transform: rotate($degrees);
     -moz-transform: rotate($degrees);
      -ms-transform: rotate($degrees);
       -o-transform: rotate($degrees);
          transform: rotate($degrees);
}
//mixin scale
@mixin scale($ratio) {
  -webkit-transform: scale($ratio);
     -moz-transform: scale($ratio);
      -ms-transform: scale($ratio);
       -o-transform: scale($ratio);
          transform: scale($ratio);
}
//mixin translate
@mixin translate($x, $y) {
  -webkit-transform: translate($x, $y);
     -moz-transform: translate($x, $y);
      -ms-transform: translate($x, $y);
       -o-transform: translate($x, $y);
          transform: translate($x, $y);
}
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid#c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}
/*
clearfix.scss
*/

.clearfix {
  @include clearfix();
}

* {
    &,
    &:before,
    &:after {
        @include box-sizing(border-box);
    }
}
/*
grid.scss
*/

.container{
  padding-right: $gutter_width;
  padding-left: $gutter_width;
  margin-right: auto;
  margin-left: auto;
}

.container-full{
  padding-right: $gutter_width;
  padding-left: $gutter_width;
  margin-right: auto;
  margin-left: auto;
}

.row {
  margin-left: -$gutter_width;
  margin-right: -$gutter_width;
  // margin-bottom: 20px;
  @include clearfix();
}

[class*='grid-']{
    padding-right: $gutter_width;
    padding-left: $gutter_width;
    position: relative;
    min-height: 1px;
}

[class*='grid-']:last-of-type {
    /*padding-right: 0px;*/
}

.container::before, .container-full::before{
  display: table;
  content: "";
}

[class*='grid-']::after, .container::after, .container-full::before{
  content: "";
  display: block;
  overflow: hidden;
  visibility: hidden;
  font-size: 0;
  line-height: 0;
  width: 0;
  height: 0;
  clear: both;
}

@include media-query("xs");
@include media-query("s");
@include media-query("m");
@include media-query("l");
@include all-grid();