Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.6)
// Compass (v1.0.1)
// ----



@function media-querie($screen,$range) {

  $range-value: map-has-key($screen-list, $screen);
  
    @if $range-value {
        @if $range == "up" {
            $lower-boundary: get-screen-values($screen,range,1);
            @return "only screen and (min-width:#{$lower-boundary})";
        } @else if $range == "only" {
            $lower-boundary: get-screen-values($screen,range,1);
            $upper-boundary: get-screen-values($screen,range,2);
            @return "only screen and (min-width:#{$lower-boundary}) and (max-width:#{$upper-boundary})";    
        } @else if $range == "down" {
            $upper-boundary: get-screen-values($screen,range,2); 
            @return "only screen and (max-width:#{$upper-boundary})";
        }
    } @else {
        @return false;
    }
    
}


@function column-width-calc($colNumber, $totalColumns) {
  @return percentage(($colNumber / $totalColumns));
}

@function get-screen-values($screen,$key,$value-index: false) {
    
    @if map-has-key($screen-list,$screen) { 
        $screen-values: map-get($screen-list,$screen);
        $key-values: map-get($screen-values,$key);
            @if $value-index {
                @return nth($key-values,$value-index);
            }
        
        @return $key-values;
    } @else {
        @return false;
    } 
    
}
@function strip-unit($num) {
  @return $num / ($num * 0 + 1);
}

// CONVERT TO REM
@function convert-to-rem($value, $base-value: $rem-base)  {
  $value: strip-unit($value) / strip-unit($base-value) * 1rem;
  @if ($value == 0rem) { $value: 0; } // Turn 0rem into 0
  @return $value;
}

@function rem-calc($values, $base-value: $base-rem-unit) {
  $max: length($values);

  @if $max == 1 { @return convert-to-rem(nth($values, 1), $base-value); }

  $remValues: ();
  @for $i from 1 through $max {
    $remValues: append($remValues, convert-to-rem(nth($values, $i), $base-value));
  }
  @return $remValues;
}

$default-float: left;
$opposite-default-float: right !default;
$base-rem-unit: 16px !default;
$column-gutter: rem-calc(10) !default;
$row-max-width: rem-calc(1080) !default;


$default-grid-list: ("pull" "push" "offset" "columns");  
$helper-classes: ("clear" "hide" "show" "center");
$show-classes-sub-list: ("inline" "inline-block" "block") !default;

$screen-list: ( small: (
                    range: 0em 40em,
                    columns: 12,
                    max-width: 35em,
                    grid-classes: $default-grid-list, 
                    helper-classes: $helper-classes,
                    gutter: 10px ),
                medium: (
                    range: 40.063em 64em ,
                    columns: 12,
                    max-width: 60em,
                    grid-classes: $default-grid-list, 
                    helper-classes: $helper-classes ),
                large: (
                    range: 64.063em 90em ,
                    columns: 12,
                    max-width: 70em,
                    grid-classes: $default-grid-list, 
                    helper-classes: $helper-classes ),
                xlarge: (
                    range: 90.063em 120em , 
                    columns: 12,
                    grid-classes: $default-grid-list,
                    helper-classes: $helper-classes ),
                xxlarge: (
                    range: 120.063em 160em ,
                    columns: 12,
                    grid-classes: $default-grid-list, 
                    helper-classes: $helper-classes ),
                xxxlarge: (
                    range: 160em 999999em ,
                    columns: 12,
                    grid-classes: $default-grid-list, 
                    helper-classes: $helper-classes ) )!default; 
                    

$screen-keys: map-keys($screen-list);
$break-points: length($screen-keys);



 @for $increment from 1 through $break-points {
        $screen-size: nth($screen-keys,$increment); 
        $screen-values: map-get($screen-list,$screen-size);
        $media-querie : media-querie($screen-size,"up");
        $screen-values : map-merge($screen-values, (media-querie-up: $media-querie));
        $screen-list : map-merge($screen-list, ($screen-size: $screen-values));    
    }  
 @for $increment from 1 through $break-points {
        $screen-size: nth($screen-keys,$increment); 
        $screen-values: map-get($screen-list,$screen-size);
        $media-querie : media-querie($screen-size,"only");
        $screen-values : map-merge($screen-values, (media-querie-only: $media-querie));
        $screen-list : map-merge($screen-list, ($screen-size: $screen-values));    
    }  
 @for $increment from 1 through $break-points {
        $screen-size: nth($screen-keys,$increment); 
        $screen-values: map-get($screen-list,$screen-size);
        $media-querie : media-querie($screen-size,"down");
        $screen-values : map-merge($screen-values, (media-querie-down: $media-querie));
        $screen-list : map-merge($screen-list, ($screen-size: $screen-values));        
    }       
    

//mixin to create clear columns classes 
//parameters include $screen- and $range: "up","only","down";

@mixin box-sizing($type:border-box) {
  -webkit-box-sizing: $type; // Android < 2.3, iOS < 4
	   -moz-box-sizing: $type; // Firefox < 29
	        box-sizing: $type; // Chrome, IE 8+, Opera, Safari 5.1
}

@mixin clear-column($screen,$range) {
    .clear-#{$screen}-#{$range} {
        clear: both;
    }
}

//mixin to hide classes 
//parameters include $screen- and $range: "up","only","down";
@mixin hide-column($screen,$range) {
    .hide-#{$screen}-#{$range} {
        display: none;
    }
}

//mixin to create show classes 
//parameters include $screen- and $range: "up","only","down";
@mixin show-column($screen,$range,$types:$show-classes-sub-list) {
   @each $show-type in $types { 
    .show-#{$show-type}-#{$screen}-#{$range} {
        display: #{$show-type};
    }
   }
}

//mixin to create center columnclasses 
//parameters include $screen- and $range: "up","only","down";
@mixin center-column($screen,$range) {
    .center-#{$screen}-#{$range} {
        margin: 0px auto;
        float: none;
    }
}

@mixin grid-row($screen,$type) {
    
    @if $screen != "default"  and ($type =="nest" or $type == "row"){
        
            @if map-has-key(map-get($screen-list,$screen),gutter) and $type == "nest"{
                $gutter: get-screen-values($screen,gutter);
                margin-#{$default-float}: -($gutter/2);
                margin-#{$opposite-default-float}: -($gutter/2);
                max-width: none;
            }
             @if map-has-key(map-get($screen-list,$screen),max-width) and $type == "row"{
                $max-width : get-screen-values($screen,max-width);
                
                max-width: #{$max-width};
            }
        
    }
    @else {
         @if $type == "row" {
        width: 100%;
        margin-#{$default-float}: auto;
        margin-#{$opposite-default-float}: auto;
        margin-top: 0;
        margin-bottom: 0;
        max-width: #{$row-max-width};
    }
    
    @else if $type == "collapse" {
        width: 100%;
        margin: 0;
        max-width: #{$row-max-width};
    }
    @else if $type == "nest" {        
        width: auto;
        margin-#{$default-float}: -($column-gutter/2);
        margin-#{$opposite-default-float}: -($column-gutter/2);
        margin-top: 0;
        margin-bottom: 0;
        max-width: none;
  }
    
    
    @else if $type == "nest-collapse" {
        width: auto;
        margin: 0;
        max-width: none;
    } 
    
    @else {
            
    }
    }
   

}

@mixin grid-column(
 $screen-size,
 $column-type: "columns",
 $column-size: false,
 $total-columns: false) {
    
    @if $column-type == "push" or $column-type == "pull" {
        position: relative;
       
        @if $column-type == "push" {
            #{$default-float}: column-width-calc($column-size, $total-columns); 
            #{$opposite-default-float}: auto;
        } @else {
            #{$opposite-default-float}: column-width-calc($column-size, $total-columns); 
            #{$default-float}: auto; 
        }
    }
    
    @if $column-type == "columns" {
        width: column-width-calc($column-size, $total-columns);
    }

    @if $column-type == "offset" {
        margin-#{$default-float}: column-width-calc($column-size, $total-columns); 
    }
    @if $column-type == "collapse" {
        padding-left: 0;
        padding-right: 0;
    }
    @if $column-type == "default" and $screen-size != "default" {
       @if map-has-key(map-get($screen-list,$screen-size),gutter) {
            $gutter: get-screen-values($screen-size,gutter);
            padding-#{$default-float}: ($gutter/2);
            padding-#{$opposite-default-float}: ($gutter/2);
       } @else {
            padding-#{$default-float}: ($column-gutter/2);
            padding-#{$opposite-default-float}: ($column-gutter/2);
       }
        
    } @else if $column-type == "default" and $screen-size == "default" {
        float:$default-float;
        padding-#{$default-float}: ($column-gutter/2);
        padding-#{$opposite-default-float}: ($column-gutter/2);
        width:100%;
    }
 }
 
 
@mixin grid-helpers($screen: "default"){

    @if $screen == "default" {
    .row {
      @include grid-row($screen,"row");
      &:after, &:before{
        content: " ";
        display: table; 
      }
      &:after{
          clear:both;
      }
        &.collapse {
            .columns { @include grid-column($screen,$column-type: "collapse"); }
            .row {margin-left:0; margin-right:0;}
        }
        .row { @include grid-row($screen,"nest");
        &.collapse { @include grid-row($screen, "nest-collapse"); }
        }
    }
    .columns{
        @include grid-column($screen,"default") ;
    }
    [class*="column"] + [class*="column"]:last-child { float: $opposite-default-float; }
    } 
    [class*=" show-"] {display:none;}
}

@mixin grid-classes($screen-size,$total-columns){
    $grid-classes: get-screen-values($screen-size,grid-classes);
    $grid-class-name: ();
    @for $column-increment from 0 through $total-columns {            

        @each $grid-type in $grid-classes {
            @if $grid-type == "columns" {
                $grid-class-name: #{$screen-size}-#{$column-increment};
            } @else {
                $grid-class-name: #{$screen-size}-#{unquote($grid-type)}-#{$column-increment};
            }                
            .#{$grid-class-name} {
                @include grid-column( $screen-size,$grid-type,$column-increment,$total-columns);
            }        
            
        }
    }
}    
        
        
      
 *,
    *:before,
    *:after {
      @include box-sizing();
    }
    
    
@include grid-helpers();

@each $screen,$screen-properties in $screen-list {
    
    $total-columns: map-get($screen-properties,columns);
    
    $querie-up: map-get($screen-properties,media-querie-up);
    $querie-only: map-get($screen-properties,media-querie-only);
    $querie-down: map-get($screen-properties,media-querie-down);
    
    $helper-included: map-has-key($screen-properties,helper-classes);
    $helper-classes: map-get($screen-properties,helper-classes);
    
  @media #{$querie-up} {
      @include grid-classes($screen, $total-columns);
      @if $helper-included {
          
          @if index($helper-classes,"clear"){
            @include clear-column($screen,"up");          
          }
          @if index($helper-classes,"show") != null {
            @include show-column($screen,"up");
        }
        @if index($helper-classes,"center") != null {
            @include center-column($screen,"up");        
        }
         
    }
  }
    @media #{$querie-only} {
        @if $helper-included{
            
            @if index($helper-classes,"clear") != null{
            @include clear-column($screen,"only");
            }
            @if index($helper-classes,"hide") != null {
                @include hide-column($screen,"only");
            }
            @if index($helper-classes,"show") != null {
                @include show-column($screen,"only");
            }
        }      
    .row {  
        @include grid-row($screen,"row");    
        .row {
            @include grid-row($screen,"nest")
        }    
    }
    .columns {
            @include grid-column($screen,"default") 
    }
         
    }
    
    @media #{$querie-down} {
        @if $helper-included {
        @if index($helper-classes,"clear") != null{
            @include clear-column($screen,"down");
        }
            @if index($helper-classes,"hide") != null {
            @include hide-column($screen,"down");
        }
        @if index($helper-classes,"show") != null {
            @include show-column($screen,"down");
        }
    }
    }
}




                    

SassMeister-output.css

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.row {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  max-width: 67.5rem;
}
.row:after, .row:before {
  content: " ";
  display: table;
}
.row:after {
  clear: both;
}
.row.collapse .columns {
  padding-left: 0;
  padding-right: 0;
}
.row.collapse .row {
  margin-left: 0;
  margin-right: 0;
}
.row .row {
  width: auto;
  margin-left: -0.3125rem;
  margin-right: -0.3125rem;
  margin-top: 0;
  margin-bottom: 0;
  max-width: none;
}
.row .row.collapse {
  width: auto;
  margin: 0;
  max-width: none;
}

.columns {
  float: left;
  padding-left: 0.3125rem;
  padding-right: 0.3125rem;
  width: 100%;
}

[class*="column"] + [class*="column"]:last-child {
  float: right;
}

[class*=" show-"] {
  display: none;
}

@media only screen and (min-width: 0em) {
  .small-pull-0 {
    position: relative;
    right: 0%;
    left: auto;
  }

  .small-push-0 {
    position: relative;
    left: 0%;
    right: auto;
  }

  .small-offset-0 {
    margin-left: 0%;
  }

  .small-0 {
    width: 0%;
  }

  .small-pull-1 {
    position: relative;
    right: 8.33333%;
    left: auto;
  }

  .small-push-1 {
    position: relative;
    left: 8.33333%;
    right: auto;
  }

  .small-offset-1 {
    margin-left: 8.33333%;
  }

  .small-1 {
    width: 8.33333%;
  }

  .small-pull-2 {
    position: relative;
    right: 16.66667%;
    left: auto;
  }

  .small-push-2 {
    position: relative;
    left: 16.66667%;
    right: auto;
  }

  .small-offset-2 {
    margin-left: 16.66667%;
  }

  .small-2 {
    width: 16.66667%;
  }

  .small-pull-3 {
    position: relative;
    right: 25%;
    left: auto;
  }

  .small-push-3 {
    position: relative;
    left: 25%;
    right: auto;
  }

  .small-offset-3 {
    margin-left: 25%;
  }

  .small-3 {
    width: 25%;
  }

  .small-pull-4 {
    position: relative;
    right: 33.33333%;
    left: auto;
  }

  .small-push-4 {
    position: relative;
    left: 33.33333%;
    right: auto;
  }

  .small-offset-4 {
    margin-left: 33.33333%;
  }

  .small-4 {
    width: 33.33333%;
  }

  .small-pull-5 {
    position: relative;
    right: 41.66667%;
    left: auto;
  }

  .small-push-5 {
    position: relative;
    left: 41.66667%;
    right: auto;
  }

  .small-offset-5 {
    margin-left: 41.66667%;
  }

  .small-5 {
    width: 41.66667%;
  }

  .small-pull-6 {
    position: relative;
    right: 50%;
    left: auto;
  }

  .small-push-6 {
    position: relative;
    left: 50%;
    right: auto;
  }

  .small-offset-6 {
    margin-left: 50%;
  }

  .small-6 {
    width: 50%;
  }

  .small-pull-7 {
    position: relative;
    right: 58.33333%;
    left: auto;
  }

  .small-push-7 {
    position: relative;
    left: 58.33333%;
    right: auto;
  }

  .small-offset-7 {
    margin-left: 58.33333%;
  }

  .small-7 {
    width: 58.33333%;
  }

  .small-pull-8 {
    position: relative;
    right: 66.66667%;
    left: auto;
  }

  .small-push-8 {
    position: relative;
    left: 66.66667%;
    right: auto;
  }

  .small-offset-8 {
    margin-left: 66.66667%;
  }

  .small-8 {
    width: 66.66667%;
  }

  .small-pull-9 {
    position: relative;
    right: 75%;
    left: auto;
  }

  .small-push-9 {
    position: relative;
    left: 75%;
    right: auto;
  }

  .small-offset-9 {
    margin-left: 75%;
  }

  .small-9 {
    width: 75%;
  }

  .small-pull-10 {
    position: relative;
    right: 83.33333%;
    left: auto;
  }

  .small-push-10 {
    position: relative;
    left: 83.33333%;
    right: auto;
  }

  .small-offset-10 {
    margin-left: 83.33333%;
  }

  .small-10 {
    width: 83.33333%;
  }

  .small-pull-11 {
    position: relative;
    right: 91.66667%;
    left: auto;
  }

  .small-push-11 {
    position: relative;
    left: 91.66667%;
    right: auto;
  }

  .small-offset-11 {
    margin-left: 91.66667%;
  }

  .small-11 {
    width: 91.66667%;
  }

  .small-pull-12 {
    position: relative;
    right: 100%;
    left: auto;
  }

  .small-push-12 {
    position: relative;
    left: 100%;
    right: auto;
  }

  .small-offset-12 {
    margin-left: 100%;
  }

  .small-12 {
    width: 100%;
  }

  .clear-small-up {
    clear: both;
  }

  .show-inline-small-up {
    display: inline;
  }

  .show-inline-block-small-up {
    display: inline-block;
  }

  .show-block-small-up {
    display: block;
  }

  .center-small-up {
    margin: 0px auto;
    float: none;
  }
}
@media only screen and (min-width: 0em) and (max-width: 40em) {
  .clear-small-only {
    clear: both;
  }

  .hide-small-only {
    display: none;
  }

  .show-inline-small-only {
    display: inline;
  }

  .show-inline-block-small-only {
    display: inline-block;
  }

  .show-block-small-only {
    display: block;
  }

  .row {
    max-width: 35em;
  }
  .row .row {
    margin-left: -5px;
    margin-right: -5px;
    max-width: none;
  }

  .columns {
    padding-left: 5px;
    padding-right: 5px;
  }
}
@media only screen and (max-width: 40em) {
  .clear-small-down {
    clear: both;
  }

  .hide-small-down {
    display: none;
  }

  .show-inline-small-down {
    display: inline;
  }

  .show-inline-block-small-down {
    display: inline-block;
  }

  .show-block-small-down {
    display: block;
  }
}
@media only screen and (min-width: 40.063em) {
  .medium-pull-0 {
    position: relative;
    right: 0%;
    left: auto;
  }

  .medium-push-0 {
    position: relative;
    left: 0%;
    right: auto;
  }

  .medium-offset-0 {
    margin-left: 0%;
  }

  .medium-0 {
    width: 0%;
  }

  .medium-pull-1 {
    position: relative;
    right: 8.33333%;
    left: auto;
  }

  .medium-push-1 {
    position: relative;
    left: 8.33333%;
    right: auto;
  }

  .medium-offset-1 {
    margin-left: 8.33333%;
  }

  .medium-1 {
    width: 8.33333%;
  }

  .medium-pull-2 {
    position: relative;
    right: 16.66667%;
    left: auto;
  }

  .medium-push-2 {
    position: relative;
    left: 16.66667%;
    right: auto;
  }

  .medium-offset-2 {
    margin-left: 16.66667%;
  }

  .medium-2 {
    width: 16.66667%;
  }

  .medium-pull-3 {
    position: relative;
    right: 25%;
    left: auto;
  }

  .medium-push-3 {
    position: relative;
    left: 25%;
    right: auto;
  }

  .medium-offset-3 {
    margin-left: 25%;
  }

  .medium-3 {
    width: 25%;
  }

  .medium-pull-4 {
    position: relative;
    right: 33.33333%;
    left: auto;
  }

  .medium-push-4 {
    position: relative;
    left: 33.33333%;
    right: auto;
  }

  .medium-offset-4 {
    margin-left: 33.33333%;
  }

  .medium-4 {
    width: 33.33333%;
  }

  .medium-pull-5 {
    position: relative;
    right: 41.66667%;
    left: auto;
  }

  .medium-push-5 {
    position: relative;
    left: 41.66667%;
    right: auto;
  }

  .medium-offset-5 {
    margin-left: 41.66667%;
  }

  .medium-5 {
    width: 41.66667%;
  }

  .medium-pull-6 {
    position: relative;
    right: 50%;
    left: auto;
  }

  .medium-push-6 {
    position: relative;
    left: 50%;
    right: auto;
  }

  .medium-offset-6 {
    margin-left: 50%;
  }

  .medium-6 {
    width: 50%;
  }

  .medium-pull-7 {
    position: relative;
    right: 58.33333%;
    left: auto;
  }

  .medium-push-7 {
    position: relative;
    left: 58.33333%;
    right: auto;
  }

  .medium-offset-7 {
    margin-left: 58.33333%;
  }

  .medium-7 {
    width: 58.33333%;
  }

  .medium-pull-8 {
    position: relative;
    right: 66.66667%;
    left: auto;
  }

  .medium-push-8 {
    position: relative;
    left: 66.66667%;
    right: auto;
  }

  .medium-offset-8 {
    margin-left: 66.66667%;
  }

  .medium-8 {
    width: 66.66667%;
  }

  .medium-pull-9 {
    position: relative;
    right: 75%;
    left: auto;
  }

  .medium-push-9 {
    position: relative;
    left: 75%;
    right: auto;
  }

  .medium-offset-9 {
    margin-left: 75%;
  }

  .medium-9 {
    width: 75%;
  }

  .medium-pull-10 {
    position: relative;
    right: 83.33333%;
    left: auto;
  }

  .medium-push-10 {
    position: relative;
    left: 83.33333%;
    right: auto;
  }

  .medium-offset-10 {
    margin-left: 83.33333%;
  }

  .medium-10 {
    width: 83.33333%;
  }

  .medium-pull-11 {
    position: relative;
    right: 91.66667%;
    left: auto;
  }

  .medium-push-11 {
    position: relative;
    left: 91.66667%;
    right: auto;
  }

  .medium-offset-11 {
    margin-left: 91.66667%;
  }

  .medium-11 {
    width: 91.66667%;
  }

  .medium-pull-12 {
    position: relative;
    right: 100%;
    left: auto;
  }

  .medium-push-12 {
    position: relative;
    left: 100%;
    right: auto;
  }

  .medium-offset-12 {
    margin-left: 100%;
  }

  .medium-12 {
    width: 100%;
  }

  .clear-medium-up {
    clear: both;
  }

  .show-inline-medium-up {
    display: inline;
  }

  .show-inline-block-medium-up {
    display: inline-block;
  }

  .show-block-medium-up {
    display: block;
  }

  .center-medium-up {
    margin: 0px auto;
    float: none;
  }
}
@media only screen and (min-width: 40.063em) and (max-width: 64em) {
  .clear-medium-only {
    clear: both;
  }

  .hide-medium-only {
    display: none;
  }

  .show-inline-medium-only {
    display: inline;
  }

  .show-inline-block-medium-only {
    display: inline-block;
  }

  .show-block-medium-only {
    display: block;
  }

  .row {
    max-width: 60em;
  }

  .columns {
    padding-left: 0.3125rem;
    padding-right: 0.3125rem;
  }
}
@media only screen and (max-width: 64em) {
  .clear-medium-down {
    clear: both;
  }

  .hide-medium-down {
    display: none;
  }

  .show-inline-medium-down {
    display: inline;
  }

  .show-inline-block-medium-down {
    display: inline-block;
  }

  .show-block-medium-down {
    display: block;
  }
}
@media only screen and (min-width: 64.063em) {
  .large-pull-0 {
    position: relative;
    right: 0%;
    left: auto;
  }

  .large-push-0 {
    position: relative;
    left: 0%;
    right: auto;
  }

  .large-offset-0 {
    margin-left: 0%;
  }

  .large-0 {
    width: 0%;
  }

  .large-pull-1 {
    position: relative;
    right: 8.33333%;
    left: auto;
  }

  .large-push-1 {
    position: relative;
    left: 8.33333%;
    right: auto;
  }

  .large-offset-1 {
    margin-left: 8.33333%;
  }

  .large-1 {
    width: 8.33333%;
  }

  .large-pull-2 {
    position: relative;
    right: 16.66667%;
    left: auto;
  }

  .large-push-2 {
    position: relative;
    left: 16.66667%;
    right: auto;
  }

  .large-offset-2 {
    margin-left: 16.66667%;
  }

  .large-2 {
    width: 16.66667%;
  }

  .large-pull-3 {
    position: relative;
    right: 25%;
    left: auto;
  }

  .large-push-3 {
    position: relative;
    left: 25%;
    right: auto;
  }

  .large-offset-3 {
    margin-left: 25%;
  }

  .large-3 {
    width: 25%;
  }

  .large-pull-4 {
    position: relative;
    right: 33.33333%;
    left: auto;
  }

  .large-push-4 {
    position: relative;
    left: 33.33333%;
    right: auto;
  }

  .large-offset-4 {
    margin-left: 33.33333%;
  }

  .large-4 {
    width: 33.33333%;
  }

  .large-pull-5 {
    position: relative;
    right: 41.66667%;
    left: auto;
  }

  .large-push-5 {
    position: relative;
    left: 41.66667%;
    right: auto;
  }

  .large-offset-5 {
    margin-left: 41.66667%;
  }

  .large-5 {
    width: 41.66667%;
  }

  .large-pull-6 {
    position: relative;
    right: 50%;
    left: auto;
  }

  .large-push-6 {
    position: relative;
    left: 50%;
    right: auto;
  }

  .large-offset-6 {
    margin-left: 50%;
  }

  .large-6 {
    width: 50%;
  }

  .large-pull-7 {
    position: relative;
    right: 58.33333%;
    left: auto;
  }

  .large-push-7 {
    position: relative;
    left: 58.33333%;
    right: auto;
  }

  .large-offset-7 {
    margin-left: 58.33333%;
  }

  .large-7 {
    width: 58.33333%;
  }

  .large-pull-8 {
    position: relative;
    right: 66.66667%;
    left: auto;
  }

  .large-push-8 {
    position: relative;
    left: 66.66667%;
    right: auto;
  }

  .large-offset-8 {
    margin-left: 66.66667%;
  }

  .large-8 {
    width: 66.66667%;
  }

  .large-pull-9 {
    position: relative;
    right: 75%;
    left: auto;
  }

  .large-push-9 {
    position: relative;
    left: 75%;
    right: auto;
  }

  .large-offset-9 {
    margin-left: 75%;
  }

  .large-9 {
    width: 75%;
  }

  .large-pull-10 {
    position: relative;
    right: 83.33333%;
    left: auto;
  }

  .large-push-10 {
    position: relative;
    left: 83.33333%;
    right: auto;
  }

  .large-offset-10 {
    margin-left: 83.33333%;
  }

  .large-10 {
    width: 83.33333%;
  }

  .large-pull-11 {
    position: relative;
    right: 91.66667%;
    left: auto;
  }

  .large-push-11 {
    position: relative;
    left: 91.66667%;
    right: auto;
  }

  .large-offset-11 {
    margin-left: 91.66667%;
  }

  .large-11 {
    width: 91.66667%;
  }

  .large-pull-12 {
    position: relative;
    right: 100%;
    left: auto;
  }

  .large-push-12 {
    position: relative;
    left: 100%;
    right: auto;
  }

  .large-offset-12 {
    margin-left: 100%;
  }

  .large-12 {
    width: 100%;
  }

  .clear-large-up {
    clear: both;
  }

  .show-inline-large-up {
    display: inline;
  }

  .show-inline-block-large-up {
    display: inline-block;
  }

  .show-block-large-up {
    display: block;
  }

  .center-large-up {
    margin: 0px auto;
    float: none;
  }
}
@media only screen and (min-width: 64.063em) and (max-width: 90em) {
  .clear-large-only {
    clear: both;
  }

  .hide-large-only {
    display: none;
  }

  .show-inline-large-only {
    display: inline;
  }

  .show-inline-block-large-only {
    display: inline-block;
  }

  .show-block-large-only {
    display: block;
  }

  .row {
    max-width: 70em;
  }

  .columns {
    padding-left: 0.3125rem;
    padding-right: 0.3125rem;
  }
}
@media only screen and (max-width: 90em) {
  .clear-large-down {
    clear: both;
  }

  .hide-large-down {
    display: none;
  }

  .show-inline-large-down {
    display: inline;
  }

  .show-inline-block-large-down {
    display: inline-block;
  }

  .show-block-large-down {
    display: block;
  }
}
@media only screen and (min-width: 90.063em) {
  .xlarge-pull-0 {
    position: relative;
    right: 0%;
    left: auto;
  }

  .xlarge-push-0 {
    position: relative;
    left: 0%;
    right: auto;
  }

  .xlarge-offset-0 {
    margin-left: 0%;
  }

  .xlarge-0 {
    width: 0%;
  }

  .xlarge-pull-1 {
    position: relative;
    right: 8.33333%;
    left: auto;
  }

  .xlarge-push-1 {
    position: relative;
    left: 8.33333%;
    right: auto;
  }

  .xlarge-offset-1 {
    margin-left: 8.33333%;
  }

  .xlarge-1 {
    width: 8.33333%;
  }

  .xlarge-pull-2 {
    position: relative;
    right: 16.66667%;
    left: auto;
  }

  .xlarge-push-2 {
    position: relative;
    left: 16.66667%;
    right: auto;
  }

  .xlarge-offset-2 {
    margin-left: 16.66667%;
  }

  .xlarge-2 {
    width: 16.66667%;
  }

  .xlarge-pull-3 {
    position: relative;
    right: 25%;
    left: auto;
  }

  .xlarge-push-3 {
    position: relative;
    left: 25%;
    right: auto;
  }

  .xlarge-offset-3 {
    margin-left: 25%;
  }

  .xlarge-3 {
    width: 25%;
  }

  .xlarge-pull-4 {
    position: relative;
    right: 33.33333%;
    left: auto;
  }

  .xlarge-push-4 {
    position: relative;
    left: 33.33333%;
    right: auto;
  }

  .xlarge-offset-4 {
    margin-left: 33.33333%;
  }

  .xlarge-4 {
    width: 33.33333%;
  }

  .xlarge-pull-5 {
    position: relative;
    right: 41.66667%;
    left: auto;
  }

  .xlarge-push-5 {
    position: relative;
    left: 41.66667%;
    right: auto;
  }

  .xlarge-offset-5 {
    margin-left: 41.66667%;
  }

  .xlarge-5 {
    width: 41.66667%;
  }

  .xlarge-pull-6 {
    position: relative;
    right: 50%;
    left: auto;
  }

  .xlarge-push-6 {
    position: relative;
    left: 50%;
    right: auto;
  }

  .xlarge-offset-6 {
    margin-left: 50%;
  }

  .xlarge-6 {
    width: 50%;
  }

  .xlarge-pull-7 {
    position: relative;
    right: 58.33333%;
    left: auto;
  }

  .xlarge-push-7 {
    position: relative;
    left: 58.33333%;
    right: auto;
  }

  .xlarge-offset-7 {
    margin-left: 58.33333%;
  }

  .xlarge-7 {
    width: 58.33333%;
  }

  .xlarge-pull-8 {
    position: relative;
    right: 66.66667%;
    left: auto;
  }

  .xlarge-push-8 {
    position: relative;
    left: 66.66667%;
    right: auto;
  }

  .xlarge-offset-8 {
    margin-left: 66.66667%;
  }

  .xlarge-8 {
    width: 66.66667%;
  }

  .xlarge-pull-9 {
    position: relative;
    right: 75%;
    left: auto;
  }

  .xlarge-push-9 {
    position: relative;
    left: 75%;
    right: auto;
  }

  .xlarge-offset-9 {
    margin-left: 75%;
  }

  .xlarge-9 {
    width: 75%;
  }

  .xlarge-pull-10 {
    position: relative;
    right: 83.33333%;
    left: auto;
  }

  .xlarge-push-10 {
    position: relative;
    left: 83.33333%;
    right: auto;
  }

  .xlarge-offset-10 {
    margin-left: 83.33333%;
  }

  .xlarge-10 {
    width: 83.33333%;
  }

  .xlarge-pull-11 {
    position: relative;
    right: 91.66667%;
    left: auto;
  }

  .xlarge-push-11 {
    position: relative;
    left: 91.66667%;
    right: auto;
  }

  .xlarge-offset-11 {
    margin-left: 91.66667%;
  }

  .xlarge-11 {
    width: 91.66667%;
  }

  .xlarge-pull-12 {
    position: relative;
    right: 100%;
    left: auto;
  }

  .xlarge-push-12 {
    position: relative;
    left: 100%;
    right: auto;
  }

  .xlarge-offset-12 {
    margin-left: 100%;
  }

  .xlarge-12 {
    width: 100%;
  }

  .clear-xlarge-up {
    clear: both;
  }

  .show-inline-xlarge-up {
    display: inline;
  }

  .show-inline-block-xlarge-up {
    display: inline-block;
  }

  .show-block-xlarge-up {
    display: block;
  }

  .center-xlarge-up {
    margin: 0px auto;
    float: none;
  }
}
@media only screen and (min-width: 90.063em) and (max-width: 120em) {
  .clear-xlarge-only {
    clear: both;
  }

  .hide-xlarge-only {
    display: none;
  }

  .show-inline-xlarge-only {
    display: inline;
  }

  .show-inline-block-xlarge-only {
    display: inline-block;
  }

  .show-block-xlarge-only {
    display: block;
  }

  .columns {
    padding-left: 0.3125rem;
    padding-right: 0.3125rem;
  }
}
@media only screen and (max-width: 120em) {
  .clear-xlarge-down {
    clear: both;
  }

  .hide-xlarge-down {
    display: none;
  }

  .show-inline-xlarge-down {
    display: inline;
  }

  .show-inline-block-xlarge-down {
    display: inline-block;
  }

  .show-block-xlarge-down {
    display: block;
  }
}
@media only screen and (min-width: 120.063em) {
  .xxlarge-pull-0 {
    position: relative;
    right: 0%;
    left: auto;
  }

  .xxlarge-push-0 {
    position: relative;
    left: 0%;
    right: auto;
  }

  .xxlarge-offset-0 {
    margin-left: 0%;
  }

  .xxlarge-0 {
    width: 0%;
  }

  .xxlarge-pull-1 {
    position: relative;
    right: 8.33333%;
    left: auto;
  }

  .xxlarge-push-1 {
    position: relative;
    left: 8.33333%;
    right: auto;
  }

  .xxlarge-offset-1 {
    margin-left: 8.33333%;
  }

  .xxlarge-1 {
    width: 8.33333%;
  }

  .xxlarge-pull-2 {
    position: relative;
    right: 16.66667%;
    left: auto;
  }

  .xxlarge-push-2 {
    position: relative;
    left: 16.66667%;
    right: auto;
  }

  .xxlarge-offset-2 {
    margin-left: 16.66667%;
  }

  .xxlarge-2 {
    width: 16.66667%;
  }

  .xxlarge-pull-3 {
    position: relative;
    right: 25%;
    left: auto;
  }

  .xxlarge-push-3 {
    position: relative;
    left: 25%;
    right: auto;
  }

  .xxlarge-offset-3 {
    margin-left: 25%;
  }

  .xxlarge-3 {
    width: 25%;
  }

  .xxlarge-pull-4 {
    position: relative;
    right: 33.33333%;
    left: auto;
  }

  .xxlarge-push-4 {
    position: relative;
    left: 33.33333%;
    right: auto;
  }

  .xxlarge-offset-4 {
    margin-left: 33.33333%;
  }

  .xxlarge-4 {
    width: 33.33333%;
  }

  .xxlarge-pull-5 {
    position: relative;
    right: 41.66667%;
    left: auto;
  }

  .xxlarge-push-5 {
    position: relative;
    left: 41.66667%;
    right: auto;
  }

  .xxlarge-offset-5 {
    margin-left: 41.66667%;
  }

  .xxlarge-5 {
    width: 41.66667%;
  }

  .xxlarge-pull-6 {
    position: relative;
    right: 50%;
    left: auto;
  }

  .xxlarge-push-6 {
    position: relative;
    left: 50%;
    right: auto;
  }

  .xxlarge-offset-6 {
    margin-left: 50%;
  }

  .xxlarge-6 {
    width: 50%;
  }

  .xxlarge-pull-7 {
    position: relative;
    right: 58.33333%;
    left: auto;
  }

  .xxlarge-push-7 {
    position: relative;
    left: 58.33333%;
    right: auto;
  }

  .xxlarge-offset-7 {
    margin-left: 58.33333%;
  }

  .xxlarge-7 {
    width: 58.33333%;
  }

  .xxlarge-pull-8 {
    position: relative;
    right: 66.66667%;
    left: auto;
  }

  .xxlarge-push-8 {
    position: relative;
    left: 66.66667%;
    right: auto;
  }

  .xxlarge-offset-8 {
    margin-left: 66.66667%;
  }

  .xxlarge-8 {
    width: 66.66667%;
  }

  .xxlarge-pull-9 {
    position: relative;
    right: 75%;
    left: auto;
  }

  .xxlarge-push-9 {
    position: relative;
    left: 75%;
    right: auto;
  }

  .xxlarge-offset-9 {
    margin-left: 75%;
  }

  .xxlarge-9 {
    width: 75%;
  }

  .xxlarge-pull-10 {
    position: relative;
    right: 83.33333%;
    left: auto;
  }

  .xxlarge-push-10 {
    position: relative;
    left: 83.33333%;
    right: auto;
  }

  .xxlarge-offset-10 {
    margin-left: 83.33333%;
  }

  .xxlarge-10 {
    width: 83.33333%;
  }

  .xxlarge-pull-11 {
    position: relative;
    right: 91.66667%;
    left: auto;
  }

  .xxlarge-push-11 {
    position: relative;
    left: 91.66667%;
    right: auto;
  }

  .xxlarge-offset-11 {
    margin-left: 91.66667%;
  }

  .xxlarge-11 {
    width: 91.66667%;
  }

  .xxlarge-pull-12 {
    position: relative;
    right: 100%;
    left: auto;
  }

  .xxlarge-push-12 {
    position: relative;
    left: 100%;
    right: auto;
  }

  .xxlarge-offset-12 {
    margin-left: 100%;
  }

  .xxlarge-12 {
    width: 100%;
  }

  .clear-xxlarge-up {
    clear: both;
  }

  .show-inline-xxlarge-up {
    display: inline;
  }

  .show-inline-block-xxlarge-up {
    display: inline-block;
  }

  .show-block-xxlarge-up {
    display: block;
  }

  .center-xxlarge-up {
    margin: 0px auto;
    float: none;
  }
}
@media only screen and (min-width: 120.063em) and (max-width: 160em) {
  .clear-xxlarge-only {
    clear: both;
  }

  .hide-xxlarge-only {
    display: none;
  }

  .show-inline-xxlarge-only {
    display: inline;
  }

  .show-inline-block-xxlarge-only {
    display: inline-block;
  }

  .show-block-xxlarge-only {
    display: block;
  }

  .columns {
    padding-left: 0.3125rem;
    padding-right: 0.3125rem;
  }
}
@media only screen and (max-width: 160em) {
  .clear-xxlarge-down {
    clear: both;
  }

  .hide-xxlarge-down {
    display: none;
  }

  .show-inline-xxlarge-down {
    display: inline;
  }

  .show-inline-block-xxlarge-down {
    display: inline-block;
  }

  .show-block-xxlarge-down {
    display: block;
  }
}
@media only screen and (min-width: 160em) {
  .xxxlarge-pull-0 {
    position: relative;
    right: 0%;
    left: auto;
  }

  .xxxlarge-push-0 {
    position: relative;
    left: 0%;
    right: auto;
  }

  .xxxlarge-offset-0 {
    margin-left: 0%;
  }

  .xxxlarge-0 {
    width: 0%;
  }

  .xxxlarge-pull-1 {
    position: relative;
    right: 8.33333%;
    left: auto;
  }

  .xxxlarge-push-1 {
    position: relative;
    left: 8.33333%;
    right: auto;
  }

  .xxxlarge-offset-1 {
    margin-left: 8.33333%;
  }

  .xxxlarge-1 {
    width: 8.33333%;
  }

  .xxxlarge-pull-2 {
    position: relative;
    right: 16.66667%;
    left: auto;
  }

  .xxxlarge-push-2 {
    position: relative;
    left: 16.66667%;
    right: auto;
  }

  .xxxlarge-offset-2 {
    margin-left: 16.66667%;
  }

  .xxxlarge-2 {
    width: 16.66667%;
  }

  .xxxlarge-pull-3 {
    position: relative;
    right: 25%;
    left: auto;
  }

  .xxxlarge-push-3 {
    position: relative;
    left: 25%;
    right: auto;
  }

  .xxxlarge-offset-3 {
    margin-left: 25%;
  }

  .xxxlarge-3 {
    width: 25%;
  }

  .xxxlarge-pull-4 {
    position: relative;
    right: 33.33333%;
    left: auto;
  }

  .xxxlarge-push-4 {
    position: relative;
    left: 33.33333%;
    right: auto;
  }

  .xxxlarge-offset-4 {
    margin-left: 33.33333%;
  }

  .xxxlarge-4 {
    width: 33.33333%;
  }

  .xxxlarge-pull-5 {
    position: relative;
    right: 41.66667%;
    left: auto;
  }

  .xxxlarge-push-5 {
    position: relative;
    left: 41.66667%;
    right: auto;
  }

  .xxxlarge-offset-5 {
    margin-left: 41.66667%;
  }

  .xxxlarge-5 {
    width: 41.66667%;
  }

  .xxxlarge-pull-6 {
    position: relative;
    right: 50%;
    left: auto;
  }

  .xxxlarge-push-6 {
    position: relative;
    left: 50%;
    right: auto;
  }

  .xxxlarge-offset-6 {
    margin-left: 50%;
  }

  .xxxlarge-6 {
    width: 50%;
  }

  .xxxlarge-pull-7 {
    position: relative;
    right: 58.33333%;
    left: auto;
  }

  .xxxlarge-push-7 {
    position: relative;
    left: 58.33333%;
    right: auto;
  }

  .xxxlarge-offset-7 {
    margin-left: 58.33333%;
  }

  .xxxlarge-7 {
    width: 58.33333%;
  }

  .xxxlarge-pull-8 {
    position: relative;
    right: 66.66667%;
    left: auto;
  }

  .xxxlarge-push-8 {
    position: relative;
    left: 66.66667%;
    right: auto;
  }

  .xxxlarge-offset-8 {
    margin-left: 66.66667%;
  }

  .xxxlarge-8 {
    width: 66.66667%;
  }

  .xxxlarge-pull-9 {
    position: relative;
    right: 75%;
    left: auto;
  }

  .xxxlarge-push-9 {
    position: relative;
    left: 75%;
    right: auto;
  }

  .xxxlarge-offset-9 {
    margin-left: 75%;
  }

  .xxxlarge-9 {
    width: 75%;
  }

  .xxxlarge-pull-10 {
    position: relative;
    right: 83.33333%;
    left: auto;
  }

  .xxxlarge-push-10 {
    position: relative;
    left: 83.33333%;
    right: auto;
  }

  .xxxlarge-offset-10 {
    margin-left: 83.33333%;
  }

  .xxxlarge-10 {
    width: 83.33333%;
  }

  .xxxlarge-pull-11 {
    position: relative;
    right: 91.66667%;
    left: auto;
  }

  .xxxlarge-push-11 {
    position: relative;
    left: 91.66667%;
    right: auto;
  }

  .xxxlarge-offset-11 {
    margin-left: 91.66667%;
  }

  .xxxlarge-11 {
    width: 91.66667%;
  }

  .xxxlarge-pull-12 {
    position: relative;
    right: 100%;
    left: auto;
  }

  .xxxlarge-push-12 {
    position: relative;
    left: 100%;
    right: auto;
  }

  .xxxlarge-offset-12 {
    margin-left: 100%;
  }

  .xxxlarge-12 {
    width: 100%;
  }

  .clear-xxxlarge-up {
    clear: both;
  }

  .show-inline-xxxlarge-up {
    display: inline;
  }

  .show-inline-block-xxxlarge-up {
    display: inline-block;
  }

  .show-block-xxxlarge-up {
    display: block;
  }

  .center-xxxlarge-up {
    margin: 0px auto;
    float: none;
  }
}
@media only screen and (min-width: 160em) and (max-width: 999999em) {
  .clear-xxxlarge-only {
    clear: both;
  }

  .hide-xxxlarge-only {
    display: none;
  }

  .show-inline-xxxlarge-only {
    display: inline;
  }

  .show-inline-block-xxxlarge-only {
    display: inline-block;
  }

  .show-block-xxxlarge-only {
    display: block;
  }

  .columns {
    padding-left: 0.3125rem;
    padding-right: 0.3125rem;
  }
}
@media only screen and (max-width: 999999em) {
  .clear-xxxlarge-down {
    clear: both;
  }

  .hide-xxxlarge-down {
    display: none;
  }

  .show-inline-xxxlarge-down {
    display: inline;
  }

  .show-inline-block-xxxlarge-down {
    display: inline-block;
  }

  .show-block-xxxlarge-down {
    display: block;
  }
}