sempli-website-lib 4.1.4 → 5.0.2

package/styles/vendor/_modules_export.scss

@@ -1,4 +1,4 @@
-// NOTE Exporting individual modules for external use of classes and functions
+// NOTE Exporting individual modules for external use of classes and functions
 //
 // A partial implementation of the Ruby list functions from Compass:
 // https://github.com/Compass/compass/blob/stable/lib/compass/sass_extensions/functions/lists.rb
@@ -90,10 +90,10 @@
   @return $list;
 }
 
-// 
+//
 // A partial implementation of the Ruby cross browser support functions from Compass:
 // https://github.com/Compass/compass/blob/stable/lib/compass/sass_extensions/functions/cross_browser_support.rb
-// 
+//
 
 @function prefixed($prefix, $property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {
   $properties: $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9;
@@ -272,6 +272,102 @@
 }
 
 
+//
+// A partial implementation of the Ruby fonts functions from Compass:
+// https://github.com/Compass/compass/blob/stable/core/lib/compass/core/sass_extensions/functions/font_files.rb
+//
+// and several functions from the file:
+// https://github.com/Compass/compass/blob/stable/core/lib/compass/core/sass_extensions/functions/urls.rb
+// -----------------------------------------------------------------------------
+// Helper functions font-files and font-url for font-face mixins.
+// -----------------------------------------------------------------------------
+// use mixin this way:
+//
+// $font-path: "/public/fonts/roboto";
+// @include font-face(
+//   'Roboto',
+//   font_files("roboto.ttf", "truetype", "roboto.woff", "roboto.woff2"),     // or
+//   font_files("roboto.ttf", "roboto.woff", "roboto.woff2"),
+//   "roboto.eot",    // [$eot]
+//   normal,          // [$weight]
+//   normal           // [$style]
+// );
+// -----------------------------------------------------------------------------
+
+
+@function font-url($path) {
+  $font-path: 'fonts' !default;
+  @return url("#{$font-path}/#{$path}");
+}
+
+
+// -----------------------------------------------------------------------------
+// helper function to create a list of font files for the src attribute in @font-face.
+// In the global variable $font-path, you can specify the path to the folder
+// with fonts relative to style files, by default the path to the fonts is "fonts".
+//
+// Usage: font-files ('file-name-w-ext'[, 'format'][,'file-name-w-ext'[, 'format']]...).
+// If the font format is not specified, the function will add the format corresponding to the file extension.
+//
+// for best results use this order: woff, opentype / truetype, svg.
+// -----------------------------------------------------------------------------
+// function ported from Ruby.
+// -----------------------------------------------------------------------------
+@function font-files($font-files...) {
+  $font-path: 'fonts' !default;
+  // types of font formats from module Compass::Core::SassExtensions::Functions::FontFiles.
+  $font-types: (
+    'woff': "woff",
+    'woff2': "woff2",
+    'opentype': "otf",
+    // 'opentype': "opentype",
+    'truetype': "ttf",
+    // 'truetype': "truetype",
+    'svg': "svg",
+    'embedded-opentype': "eot"
+  );
+
+  $full: '';
+  // if the font format is specified after the font file name, skip the next iteration.
+  $skip-next: false;
+  // number of font files including font format.
+  $font-file-length: length($font-files);
+
+  @for $i from 1 through $font-file-length {
+    @if(not $skip-next) {
+      $font-file: nth($font-files, $i);
+      $font-file-next: if($i < $font-file-length, nth($font-files, $i + 1), false);
+
+      // add font url.
+      $full: $full + 'url("#{$font-path}/#{$font-file}")';
+
+      // add the font format if it is specified after the font file name.
+      @if $font-file-next and map-has-key($font-types, $font-file-next) {
+        $full: $full + ' format("#{$font-file-next}")';
+        $skip-next: true;
+      } @else {
+        // add a font format based on the font file name extension.
+        @each $type, $extension in $font-types {
+          $pos: str-index($font-file, '.' + $extension);
+
+          @if($font-file-next == $extension) {
+            $full: $full + ' format("#{$type}")';
+            $skip-next: true;
+          } @else if ($pos and (to-lower-case(str-slice($font-file, $pos + 1)) == $extension)) {
+            $full: $full + ' format("#{$type}")';
+          }
+        }
+      }
+    } @else {
+      $skip-next: false;
+    }
+
+    @if (not $skip-next and $i != $font-file-length) { $full: $full + ', ';}
+  }
+
+  @return unquote($full);
+}
+
 
 $contrasted-dark-default:   #000 !default;
 $contrasted-light-default:  #fff !default;
@@ -3943,10 +4039,10 @@ $default-has-layout-approach: zoom !default;
   @return $list;
 }
 
-// 
+//
 // A partial implementation of the Ruby cross browser support functions from Compass:
 // https://github.com/Compass/compass/blob/stable/lib/compass/sass_extensions/functions/cross_browser_support.rb
-// 
+//
 
 @function prefixed($prefix, $property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {
   $properties: $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9;
@@ -4125,6 +4221,102 @@ $default-has-layout-approach: zoom !default;
 }
 
 
+//
+// A partial implementation of the Ruby fonts functions from Compass:
+// https://github.com/Compass/compass/blob/stable/core/lib/compass/core/sass_extensions/functions/font_files.rb
+//
+// and several functions from the file:
+// https://github.com/Compass/compass/blob/stable/core/lib/compass/core/sass_extensions/functions/urls.rb
+// -----------------------------------------------------------------------------
+// Helper functions font-files and font-url for font-face mixins.
+// -----------------------------------------------------------------------------
+// use mixin this way:
+//
+// $font-path: "/public/fonts/roboto";
+// @include font-face(
+//   'Roboto',
+//   font_files("roboto.ttf", "truetype", "roboto.woff", "roboto.woff2"),     // or
+//   font_files("roboto.ttf", "roboto.woff", "roboto.woff2"),
+//   "roboto.eot",    // [$eot]
+//   normal,          // [$weight]
+//   normal           // [$style]
+// );
+// -----------------------------------------------------------------------------
+
+
+@function font-url($path) {
+  $font-path: 'fonts' !default;
+  @return url("#{$font-path}/#{$path}");
+}
+
+
+// -----------------------------------------------------------------------------
+// helper function to create a list of font files for the src attribute in @font-face.
+// In the global variable $font-path, you can specify the path to the folder
+// with fonts relative to style files, by default the path to the fonts is "fonts".
+//
+// Usage: font-files ('file-name-w-ext'[, 'format'][,'file-name-w-ext'[, 'format']]...).
+// If the font format is not specified, the function will add the format corresponding to the file extension.
+//
+// for best results use this order: woff, opentype / truetype, svg.
+// -----------------------------------------------------------------------------
+// function ported from Ruby.
+// -----------------------------------------------------------------------------
+@function font-files($font-files...) {
+  $font-path: 'fonts' !default;
+  // types of font formats from module Compass::Core::SassExtensions::Functions::FontFiles.
+  $font-types: (
+    'woff': "woff",
+    'woff2': "woff2",
+    'opentype': "otf",
+    // 'opentype': "opentype",
+    'truetype': "ttf",
+    // 'truetype': "truetype",
+    'svg': "svg",
+    'embedded-opentype': "eot"
+  );
+
+  $full: '';
+  // if the font format is specified after the font file name, skip the next iteration.
+  $skip-next: false;
+  // number of font files including font format.
+  $font-file-length: length($font-files);
+
+  @for $i from 1 through $font-file-length {
+    @if(not $skip-next) {
+      $font-file: nth($font-files, $i);
+      $font-file-next: if($i < $font-file-length, nth($font-files, $i + 1), false);
+
+      // add font url.
+      $full: $full + 'url("#{$font-path}/#{$font-file}")';
+
+      // add the font format if it is specified after the font file name.
+      @if $font-file-next and map-has-key($font-types, $font-file-next) {
+        $full: $full + ' format("#{$font-file-next}")';
+        $skip-next: true;
+      } @else {
+        // add a font format based on the font file name extension.
+        @each $type, $extension in $font-types {
+          $pos: str-index($font-file, '.' + $extension);
+
+          @if($font-file-next == $extension) {
+            $full: $full + ' format("#{$type}")';
+            $skip-next: true;
+          } @else if ($pos and (to-lower-case(str-slice($font-file, $pos + 1)) == $extension)) {
+            $full: $full + ' format("#{$type}")';
+          }
+        }
+      }
+    } @else {
+      $skip-next: false;
+    }
+
+    @if (not $skip-next and $i != $font-file-length) { $full: $full + ', ';}
+  }
+
+  @return unquote($full);
+}
+
 
 
 // Background property support for vendor prefixing within values.
@@ -4149,7 +4341,7 @@ $default-has-layout-approach: zoom !default;
   @if $experimental-support-for-webkit       and prefixed(-webkit, $backgrounds) {      background: -webkit($backgrounds); }
   @if $experimental-support-for-mozilla      and prefixed(-moz,    $backgrounds) {      background:    -moz($backgrounds); }
   @if $experimental-support-for-opera        and prefixed(-o,      $backgrounds) {      background:      -o($backgrounds); }
-  @if $experimental-support-for-pie          and $add-pie-bg                     { -pie-background:    -pie($backgrounds); }
+  @if $experimental-support-for-pie          and $add-pie-bg                     { -pie-background:         $backgrounds ; }
                                                                                         background:         $backgrounds ;
 }
 
@@ -4758,6 +4950,16 @@ $base-half-leader: $base-leader / 2;
   @include horizontal-borders($width, $lines, $font-size, $border-style);
 }
 
+// Shorthand mixin to apply whitespace for top and bottom margins.
+@mixin rhythm-margins(
+  $leader: 1,
+  $trailer: $leader,
+  $font-size: $base-font-size
+) {
+  @include leader($leader, $font-size);
+  @include trailer($trailer, $font-size);
+}
+
 
 // Usually compass hacks apply to both ie6 & 7 -- set this to false to disable support for both.
 $legacy-support-for-ie: true !default;
@@ -5251,123 +5453,492 @@ $experimental-support-for-pie          : false !default;
   @if $official                                        { #{$property} :         #{$value}; }
 }
 
+//
+// A partial implementation of the Ruby list functions from Compass:
+// https://github.com/Compass/compass/blob/stable/lib/compass/sass_extensions/functions/lists.rb
+//
 
 
-// The default color for box shadows
-$default-box-shadow-color: #333333 !default;
+// compact is part of libsass
 
-// The default horizontal offset. Positive is to the right.
-$default-box-shadow-h-offset: 0px !default;
+@function -compass-nth($list, $place) {
+  // Yep, Sass-lists are 1-indexed.
+  @if $place == "first" {
+    $place: 1;
+  }
+  @if $place == "last" {
+    $place: length($list);
+  }
+  @return nth($list, $place);
+}
 
-// The default vertical offset. Positive is down.
-$default-box-shadow-v-offset: 0px !default;
+// compass_list can't be implemented in sass script
 
-// The default blur length.
-$default-box-shadow-blur: 5px !default;
+@function -compass-space-list($item1, $item2:null, $item3:null, $item4:null, $item5:null, $item6:null, $item7:null, $item8:null, $item9:null) {
+  $items: ();
+  // Support for polymorphism.
+  @if type-of($item1) == 'list' {
+    // Passing a single array of properties.
+    $items: $item1;
+  } @else {
+    $items: $item1 $item2 $item3 $item4 $item5 $item6 $item7 $item8 $item9;
+  }
 
-// The default spread length.
-$default-box-shadow-spread : false !default;
+  $full: first-value-of($items);
 
-// The default shadow inset: inset or false (for standard shadow).
-$default-box-shadow-inset : false !default;
+  @for $i from 2 through length($items) {
+    $item: nth($items, $i);
+    @if $item != null {
+      $full: $full $item;
+    }
+  }
 
-// Provides cross-browser for Webkit, Gecko, and CSS3 box shadows when one or more box
-// shadows are needed.
-// Each shadow argument should adhere to the standard css3 syntax for the
-// box-shadow property.
-@mixin box-shadow(
-  $shadow-1 : default,
-  $shadow-2 : false,
-  $shadow-3 : false,
-  $shadow-4 : false,
-  $shadow-5 : false,
-  $shadow-6 : false,
-  $shadow-7 : false,
-  $shadow-8 : false,
-  $shadow-9 : false,
-  $shadow-10: false
-) {
-  @if $shadow-1 == default {
-    $shadow-1 : -compass-space-list(compact(if($default-box-shadow-inset, inset, false), $default-box-shadow-h-offset, $default-box-shadow-v-offset, $default-box-shadow-blur, $default-box-shadow-spread, $default-box-shadow-color));
+  @return $full;
+}
+
+@function -compass-list-size($list) {
+  @return length($list);
+}
+
+@function -compass-slice($list, $start, $end: false) {
+  @if $end == false {
+    $end: length($list);
   }
-  $shadow : compact($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10);
-  @include experimental(box-shadow, $shadow,
-    -moz, -webkit, not(-o), not(-ms), not(-khtml), official
-  );
+  $full: nth($list, $start);
+  @for $i from $start + 1 through $end {
+    $full: $full, nth($list, $i);
+  }
+  @return $full;
 }
 
-// Provides a single cross-browser CSS box shadow for Webkit, Gecko, and CSS3.
-// Includes default arguments for horizontal offset, vertical offset, blur length, spread length, color and inset.
-@mixin single-box-shadow(
-  $hoff   : $default-box-shadow-h-offset,
-  $voff   : $default-box-shadow-v-offset,
-  $blur   : $default-box-shadow-blur,
-  $spread : $default-box-shadow-spread,
-  $color  : $default-box-shadow-color,
-  $inset  : $default-box-shadow-inset
-) {
-  @if not ($inset == true or $inset == false or $inset == inset) {
-    @warn "$inset expected to be true or the inset keyword. Got #{$inset} instead. Using: inset";
+@function reject($list, $reject1, $reject2:null, $reject3:null, $reject4:null, $reject5:null, $reject6:null, $reject7:null, $reject8:null, $reject9:null) {
+  $rejects: $reject1, $reject2, $reject3, $reject4, $reject5, $reject6, $reject7, $reject8, $reject9;
+
+  $full: false;
+  @each $item in $list {
+    @if index($rejects, $item) {}
+    @else {
+      @if $full {
+        $full: $full, $item;
+      }
+      @else {
+        $full: $item;
+      }
+    }
   }
+  @return $full;
+}
 
-  @if $color == none {
-    @include box-shadow(none);
-  } @else {
-    $full   : $hoff $voff;
-    @if $blur   { $full: $full $blur;   }
-    @if $spread { $full: $full $spread; }
-    @if $color  { $full: $full $color;  }
-    @if $inset  { $full: inset $full;   }
-    @include box-shadow($full);
+@function first-value-of($list) {
+  @return nth($list, 1);
+}
+
+@function compact($vars...) {
+  $separator: list-separator($vars);
+  $list: ();
+  @each $var in $vars {
+      @if $var {
+          $list: append($list, $var, $separator);
+      }
   }
+  @return $list;
 }
 
-// Usually compass hacks apply to both ie6 & 7 -- set this to false to disable support for both.
-$legacy-support-for-ie: true !default;
+//
+// A partial implementation of the Ruby cross browser support functions from Compass:
+// https://github.com/Compass/compass/blob/stable/lib/compass/sass_extensions/functions/cross_browser_support.rb
+//
 
-// Setting this to false will result in smaller output, but no support for ie6 hacks
-$legacy-support-for-ie6: $legacy-support-for-ie !default;
+@function prefixed($prefix, $property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {
+  $properties: $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9;
+  $prefixed: false;
+  @each $item in $properties {
+    @if type-of($item) == 'string' {
+      $prefixed: $prefixed or str-index($item, 'url') != 1 and str-index($item, 'rgb') != 1 and str-index($item, '#') != 1;
+    } @else if type-of($item) == 'color' {
+    } @else if $item != null {
+      $prefixed: true;
+    }
+  }
+  @return $prefixed;
+}
 
-// Setting this to false will result in smaller output, but no support for ie7 hacks
-$legacy-support-for-ie7: $legacy-support-for-ie !default;
+@function prefix($prefix, $property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {
+  $properties: "";
 
-// Setting this to false will result in smaller output, but no support for legacy ie8 hacks
-$legacy-support-for-ie8: $legacy-support-for-ie !default;
+  // Support for polymorphism.
+  @if type-of($property1) == 'list' {
+    // Passing a single array of properties.
+    $properties: $property1;
+  } @else {
+    // Passing multiple properties.
+    $properties: $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9;
+  }
 
-// @private
-// The user can simply set $legacy-support-for-ie and 6, 7, and 8 will be set accordingly,
-// But in case the user set each of those explicitly, we need to sync the value of
-// this combined variable.
-$legacy-support-for-ie: $legacy-support-for-ie6 or $legacy-support-for-ie7 or $legacy-support-for-ie8;
+  $props: false;
+  @each $item in $properties {
+    @if $item == null {}
+    @else {
+      @if prefixed($prefix, $item) {
+        $item: #{$prefix}-#{$item};
+      }
+      @if $props {
+        $props: $props, $item;
+      }
+      @else {
+        $props: $item;
+      }
+    }
+  }
+  @return $props;
+}
 
-// Whether to output legacy support for mozilla.
-// Usually this means hacks to support Firefox 3.6 or earlier.
-$legacy-support-for-mozilla: true;
+@function -svg($property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {
+  @return prefix('-svg', $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9);
+}
 
-// Support for mozilla in experimental css3 properties (-moz).
-$experimental-support-for-mozilla      : true !default;
-// Support for webkit in experimental css3 properties (-webkit).
-$experimental-support-for-webkit       : true !default;
-// Support for webkit's original (non-standard) gradient syntax.
-$support-for-original-webkit-gradients : true !default;
-// Support for opera in experimental css3 properties (-o).
-$experimental-support-for-opera        : true !default;
-// Support for microsoft in experimental css3 properties (-ms).
-$experimental-support-for-microsoft    : true !default;
-// Support for khtml in experimental css3 properties (-khtml).
-$experimental-support-for-khtml        : false !default;
-// Support for svg in experimental css3 properties.
-// Setting this to true might add significant size to your
-// generated stylesheets.
-$experimental-support-for-svg          : false !default;
-// Support for CSS PIE in experimental css3 properties (-pie).
-$experimental-support-for-pie          : false !default;
+@function -owg($property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {
+  @return prefix('-owg', $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9);
+}
 
+@function -webkit($property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {
+  @return prefix('-webkit', $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9);
+}
 
-// This mixin provides basic support for CSS3 properties and
-// their corresponding experimental CSS2 properties when
-// the implementations are identical except for the property
-// prefix.
+@function -moz($property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {
+  @return prefix('-moz', $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9);
+}
+
+@function -o($property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {
+  @return prefix('-o', $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9);
+}
+
+@function -pie($property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {
+  @return prefix('-pie', $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9);
+}
+
+// 
+// A partial implementation of the Ruby gradient support functions from Compass:
+// https://github.com/Compass/compass/blob/v0.12.2/lib/compass/sass_extensions/functions/gradient_support.rb
+// 
+
+@function color-stops($item1, $item2:null, $item3:null, $item4:null, $item5:null, $item6:null, $item7:null, $item8:null, $item9:null) {
+  $items: $item2, $item3, $item4, $item5, $item6, $item7, $item8, $item9;
+  $full: $item1;
+  @each $item in $items {
+    @if $item != null {
+      $full: $full, $item;
+    }    
+  }
+  @return $full;
+}
+// 
+// A partial implementation of the Ruby constants functions from Compass:
+// https://github.com/Compass/compass/blob/stable/lib/compass/sass_extensions/functions/constants.rb
+// 
+
+@function opposite-position($from) {
+    @if ($from == top) {
+        @return bottom;
+    } @else if ($from == bottom) {
+        @return top;
+    } @else if ($from == left) {
+        @return right;
+    } @else if ($from == right) {
+        @return left;
+    } @else if ($from == center) {
+        @return center;
+    }
+}
+
+// 
+// A partial implementation of the Ruby display functions from Compass:
+// https://github.com/Compass/compass/blob/stable/core/lib/compass/core/sass_extensions/functions/display.rb
+// 
+
+@function elements-of-type($type){
+    @if ($type == block){
+        @return address, article, aside, blockquote, center, dir, div, dd, details, dl, dt, fieldset, figcaption, figure, form, footer, frameset, h1, h2, h3, h4, h5, h6, hr, header, hgroup, isindex, main, menu, nav, noframes, noscript, ol, p, pre, section, summary, ul;
+    } @else if ($type == inline){
+        @return a, abbr, acronym, audio, b, basefont, bdo, big, br, canvas, cite, code, command, datalist, dfn, em, embed, font, i, img, input, keygen, kbd, label, mark, meter, output, progress, q, rp, rt, ruby, s, samp, select, small, span, strike, strong, sub, sup, textarea, time, tt, u, var, video, wbr;
+    } @else if ($type == inline-block){
+        @return img;
+    } @else if ($type == table){
+        @return table;
+    } @else if ($type == list-item){
+        @return li;
+    } @else if ($type == table-row-group){
+        @return tbody;
+    } @else if ($type == table-header-group){
+        @return thead;
+    } @else if ($type == table-footer-group){
+        @return tfoot;
+    } @else if ($type == table-row){
+        @return tr;
+    } @else if ($type == table-cell){
+        @return th, td;
+    } @else if ($type == html5-block){
+        @return article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary;
+    } @else if ($type == html5-inline){
+        @return audio, canvas, command, datalist, embed, keygen, mark, meter, output, progress, rp, rt, ruby, time, video, wbr;
+    } @else if ($type == html5){
+        @return article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, main, mark, menu, meter, nav, output, progress, rp, rt, ruby, section, summary, time, video, wbr;
+    } @else if ($type == text-input){
+        @return input, textarea;
+    }
+}
+
+// 
+// A partial implementation of the Ruby colors functions from Compass:
+// https://github.com/Compass/compass/blob/stable/core/lib/compass/core/sass_extensions/functions/colors.rb
+//
+
+// a genericized version of lighten/darken so that negative values can be used.
+@function adjust-lightness($color, $amount) {
+    @return adjust-color($color, $lightness: $amount);
+}
+
+// Scales a color's lightness by some percentage.
+// If the amount is negative, the color is scaled darker, if positive, it is scaled lighter.
+// This will never return a pure light or dark color unless the amount is 100%.
+@function scale-lightness($color, $amount) {
+    @return scale-color($color, $lightness: $amount);
+}
+
+// a genericized version of saturate/desaturate so that negative values can be used.
+@function adjust-saturation($color, $amount) {
+    @return adjust-color($color, $saturation: $amount);
+}
+
+// Scales a color's saturation by some percentage.
+// If the amount is negative, the color is desaturated, if positive, it is saturated.
+// This will never return a pure saturated or desaturated color unless the amount is 100%.
+@function scale-saturation($color, $amount) {
+    @return scale-color($color, $saturation: $amount);
+}
+
+@function shade($color, $percentage) {
+    @return mix(#000000, $color, $percentage);
+}
+
+@function tint($color, $percentage) {
+    @return mix(#ffffff, $color, $percentage);
+}
+
+
+//
+// A partial implementation of the Ruby fonts functions from Compass:
+// https://github.com/Compass/compass/blob/stable/core/lib/compass/core/sass_extensions/functions/font_files.rb
+//
+// and several functions from the file:
+// https://github.com/Compass/compass/blob/stable/core/lib/compass/core/sass_extensions/functions/urls.rb
+// -----------------------------------------------------------------------------
+// Helper functions font-files and font-url for font-face mixins.
+// -----------------------------------------------------------------------------
+// use mixin this way:
+//
+// $font-path: "/public/fonts/roboto";
+// @include font-face(
+//   'Roboto',
+//   font_files("roboto.ttf", "truetype", "roboto.woff", "roboto.woff2"),     // or
+//   font_files("roboto.ttf", "roboto.woff", "roboto.woff2"),
+//   "roboto.eot",    // [$eot]
+//   normal,          // [$weight]
+//   normal           // [$style]
+// );
+// -----------------------------------------------------------------------------
+
+
+@function font-url($path) {
+  $font-path: 'fonts' !default;
+  @return url("#{$font-path}/#{$path}");
+}
+
+
+// -----------------------------------------------------------------------------
+// helper function to create a list of font files for the src attribute in @font-face.
+// In the global variable $font-path, you can specify the path to the folder
+// with fonts relative to style files, by default the path to the fonts is "fonts".
+//
+// Usage: font-files ('file-name-w-ext'[, 'format'][,'file-name-w-ext'[, 'format']]...).
+// If the font format is not specified, the function will add the format corresponding to the file extension.
+//
+// for best results use this order: woff, opentype / truetype, svg.
+// -----------------------------------------------------------------------------
+// function ported from Ruby.
+// -----------------------------------------------------------------------------
+@function font-files($font-files...) {
+  $font-path: 'fonts' !default;
+  // types of font formats from module Compass::Core::SassExtensions::Functions::FontFiles.
+  $font-types: (
+    'woff': "woff",
+    'woff2': "woff2",
+    'opentype': "otf",
+    // 'opentype': "opentype",
+    'truetype': "ttf",
+    // 'truetype': "truetype",
+    'svg': "svg",
+    'embedded-opentype': "eot"
+  );
+
+  $full: '';
+  // if the font format is specified after the font file name, skip the next iteration.
+  $skip-next: false;
+  // number of font files including font format.
+  $font-file-length: length($font-files);
+
+  @for $i from 1 through $font-file-length {
+    @if(not $skip-next) {
+      $font-file: nth($font-files, $i);
+      $font-file-next: if($i < $font-file-length, nth($font-files, $i + 1), false);
+
+      // add font url.
+      $full: $full + 'url("#{$font-path}/#{$font-file}")';
+
+      // add the font format if it is specified after the font file name.
+      @if $font-file-next and map-has-key($font-types, $font-file-next) {
+        $full: $full + ' format("#{$font-file-next}")';
+        $skip-next: true;
+      } @else {
+        // add a font format based on the font file name extension.
+        @each $type, $extension in $font-types {
+          $pos: str-index($font-file, '.' + $extension);
+
+          @if($font-file-next == $extension) {
+            $full: $full + ' format("#{$type}")';
+            $skip-next: true;
+          } @else if ($pos and (to-lower-case(str-slice($font-file, $pos + 1)) == $extension)) {
+            $full: $full + ' format("#{$type}")';
+          }
+        }
+      }
+    } @else {
+      $skip-next: false;
+    }
+
+    @if (not $skip-next and $i != $font-file-length) { $full: $full + ', ';}
+  }
+
+  @return unquote($full);
+}
+
+
+
+// The default color for box shadows
+$default-box-shadow-color: #333333 !default;
+
+// The default horizontal offset. Positive is to the right.
+$default-box-shadow-h-offset: 0px !default;
+
+// The default vertical offset. Positive is down.
+$default-box-shadow-v-offset: 0px !default;
+
+// The default blur length.
+$default-box-shadow-blur: 5px !default;
+
+// The default spread length.
+$default-box-shadow-spread : false !default;
+
+// The default shadow inset: inset or false (for standard shadow).
+$default-box-shadow-inset : false !default;
+
+// Provides cross-browser for Webkit, Gecko, and CSS3 box shadows when one or more box
+// shadows are needed.
+// Each shadow argument should adhere to the standard css3 syntax for the
+// box-shadow property.
+@mixin box-shadow(
+  $shadow-1 : default,
+  $shadow-2 : false,
+  $shadow-3 : false,
+  $shadow-4 : false,
+  $shadow-5 : false,
+  $shadow-6 : false,
+  $shadow-7 : false,
+  $shadow-8 : false,
+  $shadow-9 : false,
+  $shadow-10: false
+) {
+  @if $shadow-1 == default {
+    $shadow-1 : -compass-space-list(compact(if($default-box-shadow-inset, inset, false), $default-box-shadow-h-offset, $default-box-shadow-v-offset, $default-box-shadow-blur, $default-box-shadow-spread, $default-box-shadow-color));
+  }
+  $shadow : compact($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10);
+  @include experimental(box-shadow, $shadow,
+    -moz, -webkit, not(-o), not(-ms), not(-khtml), official
+  );
+}
+
+// Provides a single cross-browser CSS box shadow for Webkit, Gecko, and CSS3.
+// Includes default arguments for horizontal offset, vertical offset, blur length, spread length, color and inset.
+@mixin single-box-shadow(
+  $hoff   : $default-box-shadow-h-offset,
+  $voff   : $default-box-shadow-v-offset,
+  $blur   : $default-box-shadow-blur,
+  $spread : $default-box-shadow-spread,
+  $color  : $default-box-shadow-color,
+  $inset  : $default-box-shadow-inset
+) {
+  @if not ($inset == true or $inset == false or $inset == inset) {
+    @warn "$inset expected to be true or the inset keyword. Got #{$inset} instead. Using: inset";
+  }
+
+  @if $color == none {
+    @include box-shadow(none);
+  } @else {
+    $full   : $hoff $voff;
+    @if $blur   { $full: $full $blur;   }
+    @if $spread { $full: $full $spread; }
+    @if $color  { $full: $full $color;  }
+    @if $inset  { $full: inset $full;   }
+    @include box-shadow($full);
+  }
+}
+
+// Usually compass hacks apply to both ie6 & 7 -- set this to false to disable support for both.
+$legacy-support-for-ie: true !default;
+
+// Setting this to false will result in smaller output, but no support for ie6 hacks
+$legacy-support-for-ie6: $legacy-support-for-ie !default;
+
+// Setting this to false will result in smaller output, but no support for ie7 hacks
+$legacy-support-for-ie7: $legacy-support-for-ie !default;
+
+// Setting this to false will result in smaller output, but no support for legacy ie8 hacks
+$legacy-support-for-ie8: $legacy-support-for-ie !default;
+
+// @private
+// The user can simply set $legacy-support-for-ie and 6, 7, and 8 will be set accordingly,
+// But in case the user set each of those explicitly, we need to sync the value of
+// this combined variable.
+$legacy-support-for-ie: $legacy-support-for-ie6 or $legacy-support-for-ie7 or $legacy-support-for-ie8;
+
+// Whether to output legacy support for mozilla.
+// Usually this means hacks to support Firefox 3.6 or earlier.
+$legacy-support-for-mozilla: true;
+
+// Support for mozilla in experimental css3 properties (-moz).
+$experimental-support-for-mozilla      : true !default;
+// Support for webkit in experimental css3 properties (-webkit).
+$experimental-support-for-webkit       : true !default;
+// Support for webkit's original (non-standard) gradient syntax.
+$support-for-original-webkit-gradients : true !default;
+// Support for opera in experimental css3 properties (-o).
+$experimental-support-for-opera        : true !default;
+// Support for microsoft in experimental css3 properties (-ms).
+$experimental-support-for-microsoft    : true !default;
+// Support for khtml in experimental css3 properties (-khtml).
+$experimental-support-for-khtml        : false !default;
+// Support for svg in experimental css3 properties.
+// Setting this to true might add significant size to your
+// generated stylesheets.
+$experimental-support-for-svg          : false !default;
+// Support for CSS PIE in experimental css3 properties (-pie).
+$experimental-support-for-pie          : false !default;
+
+
+// This mixin provides basic support for CSS3 properties and
+// their corresponding experimental CSS2 properties when
+// the implementations are identical except for the property
+// prefix.
 @mixin experimental($property, $value,
   $moz      : $experimental-support-for-mozilla,
   $webkit   : $experimental-support-for-webkit,
@@ -5401,213 +5972,961 @@ $experimental-support-for-pie          : false !default;
   @if $official                                        { #{$property} :         #{$value}; }
 }
 
+//
+// A partial implementation of the Ruby list functions from Compass:
+// https://github.com/Compass/compass/blob/stable/lib/compass/sass_extensions/functions/lists.rb
+//
 
-// These defaults make the arguments optional for this mixin
-// If you like, set different defaults in your project
 
-$default-text-shadow-color:    #aaa !default;
-$default-text-shadow-h-offset: 0px  !default;
-$default-text-shadow-v-offset: 0px  !default;
-$default-text-shadow-blur:     1px  !default;
-$default-text-shadow-spread:   false  !default;
+// compact is part of libsass
 
-// Provides cross-browser text shadows when one or more shadows are needed.
-// Each shadow argument should adhere to the standard css3 syntax for the
-// text-shadow property.
-//
-// Note: if any shadow has a spread parameter, this will cause the mixin
-// to emit the shadow declaration twice, first without the spread,
-// then with the spread included. This allows you to progressively
-// enhance the browsers that do support the spread parameter.
-@mixin text-shadow(
-  $shadow-1 : default,
-  $shadow-2 : false,
-  $shadow-3 : false,
-  $shadow-4 : false,
-  $shadow-5 : false,
-  $shadow-6 : false,
-  $shadow-7 : false,
-  $shadow-8 : false,
-  $shadow-9 : false,
-  $shadow-10: false
-) {
-  @if $shadow-1 == default {
-    $shadow-1: compact($default-text-shadow-h-offset $default-text-shadow-v-offset $default-text-shadow-blur $default-text-shadow-spread $default-text-shadow-color);
-  }
-  $shadows-without-spread: join((),(),comma);
-  $shadows: join((),(),comma);
-  $has-spread: false;
-  @each $shadow in compact($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5,
-                           $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10) {
-    @if length($shadow) > 4 {
-      $has-spread: true;
-      $shadows-without-spread: append($shadows-without-spread, nth($shadow,1) nth($shadow,2) nth($shadow,3) nth($shadow,5));
-      $shadows: append($shadows, $shadow);
-    } else {
-      $shadows-without-spread: append($shadows-without-spread, $shadow);
-      $shadows: append($shadows, $shadow);
-    }
+@function -compass-nth($list, $place) {
+  // Yep, Sass-lists are 1-indexed.
+  @if $place == "first" {
+    $place: 1;
   }
-  @if $has-spread {
-    text-shadow: $shadows-without-spread;
+  @if $place == "last" {
+    $place: length($list);
   }
-  text-shadow: $shadows;
+  @return nth($list, $place);
 }
 
-// Provides a single cross-browser CSS text shadow.
-//
-// Provides sensible defaults for the color, horizontal offset, vertical offset, blur, and spread
-// according to the configuration defaults above.
-@mixin single-text-shadow(
-  $hoff: false,
-  $voff: false,
-  $blur: false,
-  $spread: false,
-  $color: false
-) {
-  // A lot of people think the color comes first. It doesn't.
-  @if type-of($hoff) == color {
-    $temp-color: $hoff;
-    $hoff: $voff;
-    $voff: $blur;
-    $blur: $spread;
-    $spread: $color;
-    $color: $temp-color;
-  }
-  // Can't rely on default assignment with multiple supported argument orders.
-  $hoff:   if($hoff,   $hoff,   $default-text-shadow-h-offset);
-  $voff:   if($voff,   $voff,   $default-text-shadow-v-offset);
-  $blur:   if($blur,   $blur,   $default-text-shadow-blur    );
-  $spread: if($spread, $spread, $default-text-shadow-spread  );
-  $color:  if($color,  $color,  $default-text-shadow-color   );
-  // We don't need experimental support for this property.
-  @if $color == none or $hoff == none {
-    @include text-shadow(none);
+// compass_list can't be implemented in sass script
+
+@function -compass-space-list($item1, $item2:null, $item3:null, $item4:null, $item5:null, $item6:null, $item7:null, $item8:null, $item9:null) {
+  $items: ();
+  // Support for polymorphism.
+  @if type-of($item1) == 'list' {
+    // Passing a single array of properties.
+    $items: $item1;
   } @else {
-    @include text-shadow(compact($hoff $voff $blur $spread $color));
+    $items: $item1 $item2 $item3 $item4 $item5 $item6 $item7 $item8 $item9;
   }
-}
-
-// Usually compass hacks apply to both ie6 & 7 -- set this to false to disable support for both.
-$legacy-support-for-ie: true !default;
-
-// Setting this to false will result in smaller output, but no support for ie6 hacks
-$legacy-support-for-ie6: $legacy-support-for-ie !default;
-
-// Setting this to false will result in smaller output, but no support for ie7 hacks
-$legacy-support-for-ie7: $legacy-support-for-ie !default;
-
-// Setting this to false will result in smaller output, but no support for legacy ie8 hacks
-$legacy-support-for-ie8: $legacy-support-for-ie !default;
-
-// @private
-// The user can simply set $legacy-support-for-ie and 6, 7, and 8 will be set accordingly,
-// But in case the user set each of those explicitly, we need to sync the value of
-// this combined variable.
-$legacy-support-for-ie: $legacy-support-for-ie6 or $legacy-support-for-ie7 or $legacy-support-for-ie8;
 
-// Whether to output legacy support for mozilla.
-// Usually this means hacks to support Firefox 3.6 or earlier.
-$legacy-support-for-mozilla: true;
+  $full: first-value-of($items);
 
-// Support for mozilla in experimental css3 properties (-moz).
-$experimental-support-for-mozilla      : true !default;
-// Support for webkit in experimental css3 properties (-webkit).
-$experimental-support-for-webkit       : true !default;
-// Support for webkit's original (non-standard) gradient syntax.
-$support-for-original-webkit-gradients : true !default;
-// Support for opera in experimental css3 properties (-o).
-$experimental-support-for-opera        : true !default;
-// Support for microsoft in experimental css3 properties (-ms).
-$experimental-support-for-microsoft    : true !default;
-// Support for khtml in experimental css3 properties (-khtml).
-$experimental-support-for-khtml        : false !default;
-// Support for svg in experimental css3 properties.
-// Setting this to true might add significant size to your
-// generated stylesheets.
-$experimental-support-for-svg          : false !default;
-// Support for CSS PIE in experimental css3 properties (-pie).
-$experimental-support-for-pie          : false !default;
+  @for $i from 2 through length($items) {
+    $item: nth($items, $i);
+    @if $item != null {
+      $full: $full $item;
+    }
+  }
 
+  @return $full;
+}
 
-// This mixin provides basic support for CSS3 properties and
-// their corresponding experimental CSS2 properties when
-// the implementations are identical except for the property
-// prefix.
-@mixin experimental($property, $value,
-  $moz      : $experimental-support-for-mozilla,
-  $webkit   : $experimental-support-for-webkit,
-  $o        : $experimental-support-for-opera,
-  $ms       : $experimental-support-for-microsoft,
-  $khtml    : $experimental-support-for-khtml,
-  $official : true
-) {
-  @if $webkit  and $experimental-support-for-webkit    { -webkit-#{$property} : $value; }
-  @if $khtml   and $experimental-support-for-khtml     {  -khtml-#{$property} : $value; }
-  @if $moz     and $experimental-support-for-mozilla   {    -moz-#{$property} : $value; }
-  @if $ms      and $experimental-support-for-microsoft {     -ms-#{$property} : $value; }
-  @if $o       and $experimental-support-for-opera     {      -o-#{$property} : $value; }
-  @if $official                                        {         #{$property} : $value; }
+@function -compass-list-size($list) {
+  @return length($list);
 }
 
-// Same as experimental(), but for cases when the property is the same and the value is vendorized
-@mixin experimental-value($property, $value,
-  $moz      : $experimental-support-for-mozilla,
-  $webkit   : $experimental-support-for-webkit,
-  $o        : $experimental-support-for-opera,
-  $ms       : $experimental-support-for-microsoft,
-  $khtml    : $experimental-support-for-khtml,
-  $official : true
-) {
-  @if $webkit  and $experimental-support-for-webkit    { #{$property} : -webkit-#{$value}; }
-  @if $khtml   and $experimental-support-for-khtml     { #{$property} :  -khtml-#{$value}; }
-  @if $moz     and $experimental-support-for-mozilla   { #{$property} :    -moz-#{$value}; }
-  @if $ms      and $experimental-support-for-microsoft { #{$property} :     -ms-#{$value}; }
-  @if $o       and $experimental-support-for-opera     { #{$property} :      -o-#{$value}; }
-  @if $official                                        { #{$property} :         #{$value}; }
+@function -compass-slice($list, $start, $end: false) {
+  @if $end == false {
+    $end: length($list);
+  }
+  $full: nth($list, $start);
+  @for $i from $start + 1 through $end {
+    $full: $full, nth($list, $i);
+  }
+  @return $full;
 }
 
+@function reject($list, $reject1, $reject2:null, $reject3:null, $reject4:null, $reject5:null, $reject6:null, $reject7:null, $reject8:null, $reject9:null) {
+  $rejects: $reject1, $reject2, $reject3, $reject4, $reject5, $reject6, $reject7, $reject8, $reject9;
 
-// Specify the shorthand `columns` property.
-//
-// Example:
-//
-//     @include columns(20em 2)
-@mixin columns($width-and-count) {
-  @include experimental(columns, $width-and-count,
-    -moz, -webkit, -o, -ms, not(-khtml), official
-  );
+  $full: false;
+  @each $item in $list {
+    @if index($rejects, $item) {}
+    @else {
+      @if $full {
+        $full: $full, $item;
+      }
+      @else {
+        $full: $item;
+      }
+    }
+  }
+  @return $full;
 }
 
-// Specify the number of columns
-@mixin column-count($count) {
-  @include experimental(column-count, $count,
-    -moz, -webkit, -o, -ms, not(-khtml), official
-  );
+@function first-value-of($list) {
+  @return nth($list, 1);
 }
 
-// Specify the gap between columns e.g. `20px`
-@mixin column-gap($width) {
-  @include experimental(column-gap, $width,
-    -moz, -webkit, -o, -ms, not(-khtml), official
-  );
+@function compact($vars...) {
+  $separator: list-separator($vars);
+  $list: ();
+  @each $var in $vars {
+      @if $var {
+          $list: append($list, $var, $separator);
+      }
+  }
+  @return $list;
 }
 
-// Specify the width of columns e.g. `100px`
-@mixin column-width($width) {
-  @include experimental(column-width, $width,
-    -moz, -webkit, -o, -ms, not(-khtml), official
-  );
-}
+//
+// A partial implementation of the Ruby cross browser support functions from Compass:
+// https://github.com/Compass/compass/blob/stable/lib/compass/sass_extensions/functions/cross_browser_support.rb
+//
 
-// Specify the width of the rule between columns e.g. `1px`
-@mixin column-rule-width($width) {
-  @include experimental(column-rule-width, $width,
-    -moz, -webkit, -o, -ms, not(-khtml), official
-  );
+@function prefixed($prefix, $property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {
+  $properties: $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9;
+  $prefixed: false;
+  @each $item in $properties {
+    @if type-of($item) == 'string' {
+      $prefixed: $prefixed or str-index($item, 'url') != 1 and str-index($item, 'rgb') != 1 and str-index($item, '#') != 1;
+    } @else if type-of($item) == 'color' {
+    } @else if $item != null {
+      $prefixed: true;
+    }
+  }
+  @return $prefixed;
 }
 
-// Specify the style of the rule between columns e.g. `dotted`.
+@function prefix($prefix, $property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {
+  $properties: "";
+
+  // Support for polymorphism.
+  @if type-of($property1) == 'list' {
+    // Passing a single array of properties.
+    $properties: $property1;
+  } @else {
+    // Passing multiple properties.
+    $properties: $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9;
+  }
+
+  $props: false;
+  @each $item in $properties {
+    @if $item == null {}
+    @else {
+      @if prefixed($prefix, $item) {
+        $item: #{$prefix}-#{$item};
+      }
+      @if $props {
+        $props: $props, $item;
+      }
+      @else {
+        $props: $item;
+      }
+    }
+  }
+  @return $props;
+}
+
+@function -svg($property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {
+  @return prefix('-svg', $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9);
+}
+
+@function -owg($property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {
+  @return prefix('-owg', $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9);
+}
+
+@function -webkit($property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {
+  @return prefix('-webkit', $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9);
+}
+
+@function -moz($property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {
+  @return prefix('-moz', $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9);
+}
+
+@function -o($property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {
+  @return prefix('-o', $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9);
+}
+
+@function -pie($property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {
+  @return prefix('-pie', $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9);
+}
+
+// 
+// A partial implementation of the Ruby gradient support functions from Compass:
+// https://github.com/Compass/compass/blob/v0.12.2/lib/compass/sass_extensions/functions/gradient_support.rb
+// 
+
+@function color-stops($item1, $item2:null, $item3:null, $item4:null, $item5:null, $item6:null, $item7:null, $item8:null, $item9:null) {
+  $items: $item2, $item3, $item4, $item5, $item6, $item7, $item8, $item9;
+  $full: $item1;
+  @each $item in $items {
+    @if $item != null {
+      $full: $full, $item;
+    }    
+  }
+  @return $full;
+}
+// 
+// A partial implementation of the Ruby constants functions from Compass:
+// https://github.com/Compass/compass/blob/stable/lib/compass/sass_extensions/functions/constants.rb
+// 
+
+@function opposite-position($from) {
+    @if ($from == top) {
+        @return bottom;
+    } @else if ($from == bottom) {
+        @return top;
+    } @else if ($from == left) {
+        @return right;
+    } @else if ($from == right) {
+        @return left;
+    } @else if ($from == center) {
+        @return center;
+    }
+}
+
+// 
+// A partial implementation of the Ruby display functions from Compass:
+// https://github.com/Compass/compass/blob/stable/core/lib/compass/core/sass_extensions/functions/display.rb
+// 
+
+@function elements-of-type($type){
+    @if ($type == block){
+        @return address, article, aside, blockquote, center, dir, div, dd, details, dl, dt, fieldset, figcaption, figure, form, footer, frameset, h1, h2, h3, h4, h5, h6, hr, header, hgroup, isindex, main, menu, nav, noframes, noscript, ol, p, pre, section, summary, ul;
+    } @else if ($type == inline){
+        @return a, abbr, acronym, audio, b, basefont, bdo, big, br, canvas, cite, code, command, datalist, dfn, em, embed, font, i, img, input, keygen, kbd, label, mark, meter, output, progress, q, rp, rt, ruby, s, samp, select, small, span, strike, strong, sub, sup, textarea, time, tt, u, var, video, wbr;
+    } @else if ($type == inline-block){
+        @return img;
+    } @else if ($type == table){
+        @return table;
+    } @else if ($type == list-item){
+        @return li;
+    } @else if ($type == table-row-group){
+        @return tbody;
+    } @else if ($type == table-header-group){
+        @return thead;
+    } @else if ($type == table-footer-group){
+        @return tfoot;
+    } @else if ($type == table-row){
+        @return tr;
+    } @else if ($type == table-cell){
+        @return th, td;
+    } @else if ($type == html5-block){
+        @return article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary;
+    } @else if ($type == html5-inline){
+        @return audio, canvas, command, datalist, embed, keygen, mark, meter, output, progress, rp, rt, ruby, time, video, wbr;
+    } @else if ($type == html5){
+        @return article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, main, mark, menu, meter, nav, output, progress, rp, rt, ruby, section, summary, time, video, wbr;
+    } @else if ($type == text-input){
+        @return input, textarea;
+    }
+}
+
+// 
+// A partial implementation of the Ruby colors functions from Compass:
+// https://github.com/Compass/compass/blob/stable/core/lib/compass/core/sass_extensions/functions/colors.rb
+//
+
+// a genericized version of lighten/darken so that negative values can be used.
+@function adjust-lightness($color, $amount) {
+    @return adjust-color($color, $lightness: $amount);
+}
+
+// Scales a color's lightness by some percentage.
+// If the amount is negative, the color is scaled darker, if positive, it is scaled lighter.
+// This will never return a pure light or dark color unless the amount is 100%.
+@function scale-lightness($color, $amount) {
+    @return scale-color($color, $lightness: $amount);
+}
+
+// a genericized version of saturate/desaturate so that negative values can be used.
+@function adjust-saturation($color, $amount) {
+    @return adjust-color($color, $saturation: $amount);
+}
+
+// Scales a color's saturation by some percentage.
+// If the amount is negative, the color is desaturated, if positive, it is saturated.
+// This will never return a pure saturated or desaturated color unless the amount is 100%.
+@function scale-saturation($color, $amount) {
+    @return scale-color($color, $saturation: $amount);
+}
+
+@function shade($color, $percentage) {
+    @return mix(#000000, $color, $percentage);
+}
+
+@function tint($color, $percentage) {
+    @return mix(#ffffff, $color, $percentage);
+}
+
+
+//
+// A partial implementation of the Ruby fonts functions from Compass:
+// https://github.com/Compass/compass/blob/stable/core/lib/compass/core/sass_extensions/functions/font_files.rb
+//
+// and several functions from the file:
+// https://github.com/Compass/compass/blob/stable/core/lib/compass/core/sass_extensions/functions/urls.rb
+// -----------------------------------------------------------------------------
+// Helper functions font-files and font-url for font-face mixins.
+// -----------------------------------------------------------------------------
+// use mixin this way:
+//
+// $font-path: "/public/fonts/roboto";
+// @include font-face(
+//   'Roboto',
+//   font_files("roboto.ttf", "truetype", "roboto.woff", "roboto.woff2"),     // or
+//   font_files("roboto.ttf", "roboto.woff", "roboto.woff2"),
+//   "roboto.eot",    // [$eot]
+//   normal,          // [$weight]
+//   normal           // [$style]
+// );
+// -----------------------------------------------------------------------------
+
+
+@function font-url($path) {
+  $font-path: 'fonts' !default;
+  @return url("#{$font-path}/#{$path}");
+}
+
+
+// -----------------------------------------------------------------------------
+// helper function to create a list of font files for the src attribute in @font-face.
+// In the global variable $font-path, you can specify the path to the folder
+// with fonts relative to style files, by default the path to the fonts is "fonts".
+//
+// Usage: font-files ('file-name-w-ext'[, 'format'][,'file-name-w-ext'[, 'format']]...).
+// If the font format is not specified, the function will add the format corresponding to the file extension.
+//
+// for best results use this order: woff, opentype / truetype, svg.
+// -----------------------------------------------------------------------------
+// function ported from Ruby.
+// -----------------------------------------------------------------------------
+@function font-files($font-files...) {
+  $font-path: 'fonts' !default;
+  // types of font formats from module Compass::Core::SassExtensions::Functions::FontFiles.
+  $font-types: (
+    'woff': "woff",
+    'woff2': "woff2",
+    'opentype': "otf",
+    // 'opentype': "opentype",
+    'truetype': "ttf",
+    // 'truetype': "truetype",
+    'svg': "svg",
+    'embedded-opentype': "eot"
+  );
+
+  $full: '';
+  // if the font format is specified after the font file name, skip the next iteration.
+  $skip-next: false;
+  // number of font files including font format.
+  $font-file-length: length($font-files);
+
+  @for $i from 1 through $font-file-length {
+    @if(not $skip-next) {
+      $font-file: nth($font-files, $i);
+      $font-file-next: if($i < $font-file-length, nth($font-files, $i + 1), false);
+
+      // add font url.
+      $full: $full + 'url("#{$font-path}/#{$font-file}")';
+
+      // add the font format if it is specified after the font file name.
+      @if $font-file-next and map-has-key($font-types, $font-file-next) {
+        $full: $full + ' format("#{$font-file-next}")';
+        $skip-next: true;
+      } @else {
+        // add a font format based on the font file name extension.
+        @each $type, $extension in $font-types {
+          $pos: str-index($font-file, '.' + $extension);
+
+          @if($font-file-next == $extension) {
+            $full: $full + ' format("#{$type}")';
+            $skip-next: true;
+          } @else if ($pos and (to-lower-case(str-slice($font-file, $pos + 1)) == $extension)) {
+            $full: $full + ' format("#{$type}")';
+          }
+        }
+      }
+    } @else {
+      $skip-next: false;
+    }
+
+    @if (not $skip-next and $i != $font-file-length) { $full: $full + ', ';}
+  }
+
+  @return unquote($full);
+}
+
+
+
+// These defaults make the arguments optional for this mixin
+// If you like, set different defaults in your project
+
+$default-text-shadow-color:    #aaa !default;
+$default-text-shadow-h-offset: 0px  !default;
+$default-text-shadow-v-offset: 0px  !default;
+$default-text-shadow-blur:     1px  !default;
+$default-text-shadow-spread:   false  !default;
+
+// Provides cross-browser text shadows when one or more shadows are needed.
+// Each shadow argument should adhere to the standard css3 syntax for the
+// text-shadow property.
+//
+// Note: if any shadow has a spread parameter, this will cause the mixin
+// to emit the shadow declaration twice, first without the spread,
+// then with the spread included. This allows you to progressively
+// enhance the browsers that do support the spread parameter.
+@mixin text-shadow(
+  $shadow-1 : default,
+  $shadow-2 : false,
+  $shadow-3 : false,
+  $shadow-4 : false,
+  $shadow-5 : false,
+  $shadow-6 : false,
+  $shadow-7 : false,
+  $shadow-8 : false,
+  $shadow-9 : false,
+  $shadow-10: false
+) {
+  @if $shadow-1 == default {
+    $shadow-1: compact($default-text-shadow-h-offset $default-text-shadow-v-offset $default-text-shadow-blur $default-text-shadow-spread $default-text-shadow-color);
+  }
+  $shadows-without-spread: join((),(),comma);
+  $shadows: join((),(),comma);
+  $has-spread: false;
+  @each $shadow in compact($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5,
+                           $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10) {
+    @if length($shadow) > 4 {
+      $has-spread: true;
+      $shadows-without-spread: append($shadows-without-spread, nth($shadow,1) nth($shadow,2) nth($shadow,3) nth($shadow,5));
+      $shadows: append($shadows, $shadow);
+    } else {
+      $shadows-without-spread: append($shadows-without-spread, $shadow);
+      $shadows: append($shadows, $shadow);
+    }
+  }
+  @if $has-spread {
+    text-shadow: $shadows-without-spread;
+  }
+  text-shadow: $shadows;
+}
+
+// Provides a single cross-browser CSS text shadow.
+//
+// Provides sensible defaults for the color, horizontal offset, vertical offset, blur, and spread
+// according to the configuration defaults above.
+@mixin single-text-shadow(
+  $hoff: false,
+  $voff: false,
+  $blur: false,
+  $spread: false,
+  $color: false
+) {
+  // A lot of people think the color comes first. It doesn't.
+  @if type-of($hoff) == color {
+    $temp-color: $hoff;
+    $hoff: $voff;
+    $voff: $blur;
+    $blur: $spread;
+    $spread: $color;
+    $color: $temp-color;
+  }
+  // Can't rely on default assignment with multiple supported argument orders.
+  $hoff:   if($hoff,   $hoff,   $default-text-shadow-h-offset);
+  $voff:   if($voff,   $voff,   $default-text-shadow-v-offset);
+  $blur:   if($blur,   $blur,   $default-text-shadow-blur    );
+  $spread: if($spread, $spread, $default-text-shadow-spread  );
+  $color:  if($color,  $color,  $default-text-shadow-color   );
+  // We don't need experimental support for this property.
+  @if $color == none or $hoff == none {
+    @include text-shadow(none);
+  } @else {
+    @include text-shadow(compact($hoff $voff $blur $spread $color));
+  }
+}
+
+// Usually compass hacks apply to both ie6 & 7 -- set this to false to disable support for both.
+$legacy-support-for-ie: true !default;
+
+// Setting this to false will result in smaller output, but no support for ie6 hacks
+$legacy-support-for-ie6: $legacy-support-for-ie !default;
+
+// Setting this to false will result in smaller output, but no support for ie7 hacks
+$legacy-support-for-ie7: $legacy-support-for-ie !default;
+
+// Setting this to false will result in smaller output, but no support for legacy ie8 hacks
+$legacy-support-for-ie8: $legacy-support-for-ie !default;
+
+// @private
+// The user can simply set $legacy-support-for-ie and 6, 7, and 8 will be set accordingly,
+// But in case the user set each of those explicitly, we need to sync the value of
+// this combined variable.
+$legacy-support-for-ie: $legacy-support-for-ie6 or $legacy-support-for-ie7 or $legacy-support-for-ie8;
+
+// Whether to output legacy support for mozilla.
+// Usually this means hacks to support Firefox 3.6 or earlier.
+$legacy-support-for-mozilla: true;
+
+// Support for mozilla in experimental css3 properties (-moz).
+$experimental-support-for-mozilla      : true !default;
+// Support for webkit in experimental css3 properties (-webkit).
+$experimental-support-for-webkit       : true !default;
+// Support for webkit's original (non-standard) gradient syntax.
+$support-for-original-webkit-gradients : true !default;
+// Support for opera in experimental css3 properties (-o).
+$experimental-support-for-opera        : true !default;
+// Support for microsoft in experimental css3 properties (-ms).
+$experimental-support-for-microsoft    : true !default;
+// Support for khtml in experimental css3 properties (-khtml).
+$experimental-support-for-khtml        : false !default;
+// Support for svg in experimental css3 properties.
+// Setting this to true might add significant size to your
+// generated stylesheets.
+$experimental-support-for-svg          : false !default;
+// Support for CSS PIE in experimental css3 properties (-pie).
+$experimental-support-for-pie          : false !default;
+
+
+// This mixin provides basic support for CSS3 properties and
+// their corresponding experimental CSS2 properties when
+// the implementations are identical except for the property
+// prefix.
+@mixin experimental($property, $value,
+  $moz      : $experimental-support-for-mozilla,
+  $webkit   : $experimental-support-for-webkit,
+  $o        : $experimental-support-for-opera,
+  $ms       : $experimental-support-for-microsoft,
+  $khtml    : $experimental-support-for-khtml,
+  $official : true
+) {
+  @if $webkit  and $experimental-support-for-webkit    { -webkit-#{$property} : $value; }
+  @if $khtml   and $experimental-support-for-khtml     {  -khtml-#{$property} : $value; }
+  @if $moz     and $experimental-support-for-mozilla   {    -moz-#{$property} : $value; }
+  @if $ms      and $experimental-support-for-microsoft {     -ms-#{$property} : $value; }
+  @if $o       and $experimental-support-for-opera     {      -o-#{$property} : $value; }
+  @if $official                                        {         #{$property} : $value; }
+}
+
+// Same as experimental(), but for cases when the property is the same and the value is vendorized
+@mixin experimental-value($property, $value,
+  $moz      : $experimental-support-for-mozilla,
+  $webkit   : $experimental-support-for-webkit,
+  $o        : $experimental-support-for-opera,
+  $ms       : $experimental-support-for-microsoft,
+  $khtml    : $experimental-support-for-khtml,
+  $official : true
+) {
+  @if $webkit  and $experimental-support-for-webkit    { #{$property} : -webkit-#{$value}; }
+  @if $khtml   and $experimental-support-for-khtml     { #{$property} :  -khtml-#{$value}; }
+  @if $moz     and $experimental-support-for-mozilla   { #{$property} :    -moz-#{$value}; }
+  @if $ms      and $experimental-support-for-microsoft { #{$property} :     -ms-#{$value}; }
+  @if $o       and $experimental-support-for-opera     { #{$property} :      -o-#{$value}; }
+  @if $official                                        { #{$property} :         #{$value}; }
+}
+
+//
+// A partial implementation of the Ruby list functions from Compass:
+// https://github.com/Compass/compass/blob/stable/lib/compass/sass_extensions/functions/lists.rb
+//
+
+
+// compact is part of libsass
+
+@function -compass-nth($list, $place) {
+  // Yep, Sass-lists are 1-indexed.
+  @if $place == "first" {
+    $place: 1;
+  }
+  @if $place == "last" {
+    $place: length($list);
+  }
+  @return nth($list, $place);
+}
+
+// compass_list can't be implemented in sass script
+
+@function -compass-space-list($item1, $item2:null, $item3:null, $item4:null, $item5:null, $item6:null, $item7:null, $item8:null, $item9:null) {
+  $items: ();
+  // Support for polymorphism.
+  @if type-of($item1) == 'list' {
+    // Passing a single array of properties.
+    $items: $item1;
+  } @else {
+    $items: $item1 $item2 $item3 $item4 $item5 $item6 $item7 $item8 $item9;
+  }
+
+  $full: first-value-of($items);
+
+  @for $i from 2 through length($items) {
+    $item: nth($items, $i);
+    @if $item != null {
+      $full: $full $item;
+    }
+  }
+
+  @return $full;
+}
+
+@function -compass-list-size($list) {
+  @return length($list);
+}
+
+@function -compass-slice($list, $start, $end: false) {
+  @if $end == false {
+    $end: length($list);
+  }
+  $full: nth($list, $start);
+  @for $i from $start + 1 through $end {
+    $full: $full, nth($list, $i);
+  }
+  @return $full;
+}
+
+@function reject($list, $reject1, $reject2:null, $reject3:null, $reject4:null, $reject5:null, $reject6:null, $reject7:null, $reject8:null, $reject9:null) {
+  $rejects: $reject1, $reject2, $reject3, $reject4, $reject5, $reject6, $reject7, $reject8, $reject9;
+
+  $full: false;
+  @each $item in $list {
+    @if index($rejects, $item) {}
+    @else {
+      @if $full {
+        $full: $full, $item;
+      }
+      @else {
+        $full: $item;
+      }
+    }
+  }
+  @return $full;
+}
+
+@function first-value-of($list) {
+  @return nth($list, 1);
+}
+
+@function compact($vars...) {
+  $separator: list-separator($vars);
+  $list: ();
+  @each $var in $vars {
+      @if $var {
+          $list: append($list, $var, $separator);
+      }
+  }
+  @return $list;
+}
+
+//
+// A partial implementation of the Ruby cross browser support functions from Compass:
+// https://github.com/Compass/compass/blob/stable/lib/compass/sass_extensions/functions/cross_browser_support.rb
+//
+
+@function prefixed($prefix, $property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {
+  $properties: $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9;
+  $prefixed: false;
+  @each $item in $properties {
+    @if type-of($item) == 'string' {
+      $prefixed: $prefixed or str-index($item, 'url') != 1 and str-index($item, 'rgb') != 1 and str-index($item, '#') != 1;
+    } @else if type-of($item) == 'color' {
+    } @else if $item != null {
+      $prefixed: true;
+    }
+  }
+  @return $prefixed;
+}
+
+@function prefix($prefix, $property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {
+  $properties: "";
+
+  // Support for polymorphism.
+  @if type-of($property1) == 'list' {
+    // Passing a single array of properties.
+    $properties: $property1;
+  } @else {
+    // Passing multiple properties.
+    $properties: $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9;
+  }
+
+  $props: false;
+  @each $item in $properties {
+    @if $item == null {}
+    @else {
+      @if prefixed($prefix, $item) {
+        $item: #{$prefix}-#{$item};
+      }
+      @if $props {
+        $props: $props, $item;
+      }
+      @else {
+        $props: $item;
+      }
+    }
+  }
+  @return $props;
+}
+
+@function -svg($property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {
+  @return prefix('-svg', $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9);
+}
+
+@function -owg($property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {
+  @return prefix('-owg', $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9);
+}
+
+@function -webkit($property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {
+  @return prefix('-webkit', $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9);
+}
+
+@function -moz($property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {
+  @return prefix('-moz', $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9);
+}
+
+@function -o($property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {
+  @return prefix('-o', $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9);
+}
+
+@function -pie($property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {
+  @return prefix('-pie', $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9);
+}
+
+// 
+// A partial implementation of the Ruby gradient support functions from Compass:
+// https://github.com/Compass/compass/blob/v0.12.2/lib/compass/sass_extensions/functions/gradient_support.rb
+// 
+
+@function color-stops($item1, $item2:null, $item3:null, $item4:null, $item5:null, $item6:null, $item7:null, $item8:null, $item9:null) {
+  $items: $item2, $item3, $item4, $item5, $item6, $item7, $item8, $item9;
+  $full: $item1;
+  @each $item in $items {
+    @if $item != null {
+      $full: $full, $item;
+    }    
+  }
+  @return $full;
+}
+// 
+// A partial implementation of the Ruby constants functions from Compass:
+// https://github.com/Compass/compass/blob/stable/lib/compass/sass_extensions/functions/constants.rb
+// 
+
+@function opposite-position($from) {
+    @if ($from == top) {
+        @return bottom;
+    } @else if ($from == bottom) {
+        @return top;
+    } @else if ($from == left) {
+        @return right;
+    } @else if ($from == right) {
+        @return left;
+    } @else if ($from == center) {
+        @return center;
+    }
+}
+
+// 
+// A partial implementation of the Ruby display functions from Compass:
+// https://github.com/Compass/compass/blob/stable/core/lib/compass/core/sass_extensions/functions/display.rb
+// 
+
+@function elements-of-type($type){
+    @if ($type == block){
+        @return address, article, aside, blockquote, center, dir, div, dd, details, dl, dt, fieldset, figcaption, figure, form, footer, frameset, h1, h2, h3, h4, h5, h6, hr, header, hgroup, isindex, main, menu, nav, noframes, noscript, ol, p, pre, section, summary, ul;
+    } @else if ($type == inline){
+        @return a, abbr, acronym, audio, b, basefont, bdo, big, br, canvas, cite, code, command, datalist, dfn, em, embed, font, i, img, input, keygen, kbd, label, mark, meter, output, progress, q, rp, rt, ruby, s, samp, select, small, span, strike, strong, sub, sup, textarea, time, tt, u, var, video, wbr;
+    } @else if ($type == inline-block){
+        @return img;
+    } @else if ($type == table){
+        @return table;
+    } @else if ($type == list-item){
+        @return li;
+    } @else if ($type == table-row-group){
+        @return tbody;
+    } @else if ($type == table-header-group){
+        @return thead;
+    } @else if ($type == table-footer-group){
+        @return tfoot;
+    } @else if ($type == table-row){
+        @return tr;
+    } @else if ($type == table-cell){
+        @return th, td;
+    } @else if ($type == html5-block){
+        @return article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary;
+    } @else if ($type == html5-inline){
+        @return audio, canvas, command, datalist, embed, keygen, mark, meter, output, progress, rp, rt, ruby, time, video, wbr;
+    } @else if ($type == html5){
+        @return article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, main, mark, menu, meter, nav, output, progress, rp, rt, ruby, section, summary, time, video, wbr;
+    } @else if ($type == text-input){
+        @return input, textarea;
+    }
+}
+
+// 
+// A partial implementation of the Ruby colors functions from Compass:
+// https://github.com/Compass/compass/blob/stable/core/lib/compass/core/sass_extensions/functions/colors.rb
+//
+
+// a genericized version of lighten/darken so that negative values can be used.
+@function adjust-lightness($color, $amount) {
+    @return adjust-color($color, $lightness: $amount);
+}
+
+// Scales a color's lightness by some percentage.
+// If the amount is negative, the color is scaled darker, if positive, it is scaled lighter.
+// This will never return a pure light or dark color unless the amount is 100%.
+@function scale-lightness($color, $amount) {
+    @return scale-color($color, $lightness: $amount);
+}
+
+// a genericized version of saturate/desaturate so that negative values can be used.
+@function adjust-saturation($color, $amount) {
+    @return adjust-color($color, $saturation: $amount);
+}
+
+// Scales a color's saturation by some percentage.
+// If the amount is negative, the color is desaturated, if positive, it is saturated.
+// This will never return a pure saturated or desaturated color unless the amount is 100%.
+@function scale-saturation($color, $amount) {
+    @return scale-color($color, $saturation: $amount);
+}
+
+@function shade($color, $percentage) {
+    @return mix(#000000, $color, $percentage);
+}
+
+@function tint($color, $percentage) {
+    @return mix(#ffffff, $color, $percentage);
+}
+
+
+//
+// A partial implementation of the Ruby fonts functions from Compass:
+// https://github.com/Compass/compass/blob/stable/core/lib/compass/core/sass_extensions/functions/font_files.rb
+//
+// and several functions from the file:
+// https://github.com/Compass/compass/blob/stable/core/lib/compass/core/sass_extensions/functions/urls.rb
+// -----------------------------------------------------------------------------
+// Helper functions font-files and font-url for font-face mixins.
+// -----------------------------------------------------------------------------
+// use mixin this way:
+//
+// $font-path: "/public/fonts/roboto";
+// @include font-face(
+//   'Roboto',
+//   font_files("roboto.ttf", "truetype", "roboto.woff", "roboto.woff2"),     // or
+//   font_files("roboto.ttf", "roboto.woff", "roboto.woff2"),
+//   "roboto.eot",    // [$eot]
+//   normal,          // [$weight]
+//   normal           // [$style]
+// );
+// -----------------------------------------------------------------------------
+
+
+@function font-url($path) {
+  $font-path: 'fonts' !default;
+  @return url("#{$font-path}/#{$path}");
+}
+
+
+// -----------------------------------------------------------------------------
+// helper function to create a list of font files for the src attribute in @font-face.
+// In the global variable $font-path, you can specify the path to the folder
+// with fonts relative to style files, by default the path to the fonts is "fonts".
+//
+// Usage: font-files ('file-name-w-ext'[, 'format'][,'file-name-w-ext'[, 'format']]...).
+// If the font format is not specified, the function will add the format corresponding to the file extension.
+//
+// for best results use this order: woff, opentype / truetype, svg.
+// -----------------------------------------------------------------------------
+// function ported from Ruby.
+// -----------------------------------------------------------------------------
+@function font-files($font-files...) {
+  $font-path: 'fonts' !default;
+  // types of font formats from module Compass::Core::SassExtensions::Functions::FontFiles.
+  $font-types: (
+    'woff': "woff",
+    'woff2': "woff2",
+    'opentype': "otf",
+    // 'opentype': "opentype",
+    'truetype': "ttf",
+    // 'truetype': "truetype",
+    'svg': "svg",
+    'embedded-opentype': "eot"
+  );
+
+  $full: '';
+  // if the font format is specified after the font file name, skip the next iteration.
+  $skip-next: false;
+  // number of font files including font format.
+  $font-file-length: length($font-files);
+
+  @for $i from 1 through $font-file-length {
+    @if(not $skip-next) {
+      $font-file: nth($font-files, $i);
+      $font-file-next: if($i < $font-file-length, nth($font-files, $i + 1), false);
+
+      // add font url.
+      $full: $full + 'url("#{$font-path}/#{$font-file}")';
+
+      // add the font format if it is specified after the font file name.
+      @if $font-file-next and map-has-key($font-types, $font-file-next) {
+        $full: $full + ' format("#{$font-file-next}")';
+        $skip-next: true;
+      } @else {
+        // add a font format based on the font file name extension.
+        @each $type, $extension in $font-types {
+          $pos: str-index($font-file, '.' + $extension);
+
+          @if($font-file-next == $extension) {
+            $full: $full + ' format("#{$type}")';
+            $skip-next: true;
+          } @else if ($pos and (to-lower-case(str-slice($font-file, $pos + 1)) == $extension)) {
+            $full: $full + ' format("#{$type}")';
+          }
+        }
+      }
+    } @else {
+      $skip-next: false;
+    }
+
+    @if (not $skip-next and $i != $font-file-length) { $full: $full + ', ';}
+  }
+
+  @return unquote($full);
+}
+
+
+
+// Specify the shorthand `columns` property.
+//
+// Example:
+//
+//     @include columns(20em 2)
+@mixin columns($width-and-count) {
+  @include experimental(columns, $width-and-count,
+    -moz, -webkit, -o, -ms, not(-khtml), official
+  );
+}
+
+// Specify the number of columns
+@mixin column-count($count) {
+  @include experimental(column-count, $count,
+    -moz, -webkit, -o, -ms, not(-khtml), official
+  );
+}
+
+// Specify the gap between columns e.g. `20px`
+@mixin column-gap($width) {
+  @include experimental(column-gap, $width,
+    -moz, -webkit, -o, -ms, not(-khtml), official
+  );
+}
+
+// Specify the width of columns e.g. `100px`
+@mixin column-width($width) {
+  @include experimental(column-width, $width,
+    -moz, -webkit, -o, -ms, not(-khtml), official
+  );
+}
+
+// Specify how many columns an element should span across.
+// * legal values are none, all
+@mixin column-span($columns) {
+  @include experimental(column-span, $columns,
+          -moz, -webkit, -o, -ms, not(-khtml), official
+  );
+}
+
+// Specify the width of the rule between columns e.g. `1px`
+@mixin column-rule-width($width) {
+  @include experimental(column-rule-width, $width,
+    -moz, -webkit, -o, -ms, not(-khtml), official
+  );
+}
+
+// Specify the style of the rule between columns e.g. `dotted`.
 // This works like border-style.
 @mixin column-rule-style($style) {
   @include experimental(column-rule-style, unquote($style),
@@ -5714,6 +7033,7 @@ $experimental-support-for-pie          : false !default;
 @mixin column-break($type: before, $value: auto){
    @include experimental("column-break-#{$type}", $value, not(-moz), -webkit, not(-o), not(-ms), not(-khtml), official );
 }
+
 // Usually compass hacks apply to both ie6 & 7 -- set this to false to disable support for both.
 $legacy-support-for-ie: true !default;
 
@@ -5794,12 +7114,17 @@ $experimental-support-for-pie          : false !default;
 }
 
 
+// The default box-sizing model when no argument is provided to the box-sizing mixin: [ content-box | border-box | padding-box ]
+//
+// The browser default is content-box, compass defaults to border-box.
+$default-box-sizing: border-box !default;
+
 // Change the box model for Mozilla, Webkit, IE8 and the future
 //
 // @param $bs
 //   [ content-box | border-box ]
 
-@mixin box-sizing($bs) {
+@mixin box-sizing($bs: $default-box-sizing) {
   $bs: unquote($bs);
   @include experimental(box-sizing, $bs,
     -moz, -webkit, not(-o), not(-ms), not(-khtml), official
@@ -6252,10 +7577,10 @@ $default-has-layout-approach: zoom !default;
   @return $list;
 }
 
-// 
+//
 // A partial implementation of the Ruby cross browser support functions from Compass:
 // https://github.com/Compass/compass/blob/stable/lib/compass/sass_extensions/functions/cross_browser_support.rb
-// 
+//
 
 @function prefixed($prefix, $property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {
   $properties: $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9;
@@ -6434,6 +7759,102 @@ $default-has-layout-approach: zoom !default;
 }
 
 
+//
+// A partial implementation of the Ruby fonts functions from Compass:
+// https://github.com/Compass/compass/blob/stable/core/lib/compass/core/sass_extensions/functions/font_files.rb
+//
+// and several functions from the file:
+// https://github.com/Compass/compass/blob/stable/core/lib/compass/core/sass_extensions/functions/urls.rb
+// -----------------------------------------------------------------------------
+// Helper functions font-files and font-url for font-face mixins.
+// -----------------------------------------------------------------------------
+// use mixin this way:
+//
+// $font-path: "/public/fonts/roboto";
+// @include font-face(
+//   'Roboto',
+//   font_files("roboto.ttf", "truetype", "roboto.woff", "roboto.woff2"),     // or
+//   font_files("roboto.ttf", "roboto.woff", "roboto.woff2"),
+//   "roboto.eot",    // [$eot]
+//   normal,          // [$weight]
+//   normal           // [$style]
+// );
+// -----------------------------------------------------------------------------
+
+
+@function font-url($path) {
+  $font-path: 'fonts' !default;
+  @return url("#{$font-path}/#{$path}");
+}
+
+
+// -----------------------------------------------------------------------------
+// helper function to create a list of font files for the src attribute in @font-face.
+// In the global variable $font-path, you can specify the path to the folder
+// with fonts relative to style files, by default the path to the fonts is "fonts".
+//
+// Usage: font-files ('file-name-w-ext'[, 'format'][,'file-name-w-ext'[, 'format']]...).
+// If the font format is not specified, the function will add the format corresponding to the file extension.
+//
+// for best results use this order: woff, opentype / truetype, svg.
+// -----------------------------------------------------------------------------
+// function ported from Ruby.
+// -----------------------------------------------------------------------------
+@function font-files($font-files...) {
+  $font-path: 'fonts' !default;
+  // types of font formats from module Compass::Core::SassExtensions::Functions::FontFiles.
+  $font-types: (
+    'woff': "woff",
+    'woff2': "woff2",
+    'opentype': "otf",
+    // 'opentype': "opentype",
+    'truetype': "ttf",
+    // 'truetype': "truetype",
+    'svg': "svg",
+    'embedded-opentype': "eot"
+  );
+
+  $full: '';
+  // if the font format is specified after the font file name, skip the next iteration.
+  $skip-next: false;
+  // number of font files including font format.
+  $font-file-length: length($font-files);
+
+  @for $i from 1 through $font-file-length {
+    @if(not $skip-next) {
+      $font-file: nth($font-files, $i);
+      $font-file-next: if($i < $font-file-length, nth($font-files, $i + 1), false);
+
+      // add font url.
+      $full: $full + 'url("#{$font-path}/#{$font-file}")';
+
+      // add the font format if it is specified after the font file name.
+      @if $font-file-next and map-has-key($font-types, $font-file-next) {
+        $full: $full + ' format("#{$font-file-next}")';
+        $skip-next: true;
+      } @else {
+        // add a font format based on the font file name extension.
+        @each $type, $extension in $font-types {
+          $pos: str-index($font-file, '.' + $extension);
+
+          @if($font-file-next == $extension) {
+            $full: $full + ' format("#{$type}")';
+            $skip-next: true;
+          } @else if ($pos and (to-lower-case(str-slice($font-file, $pos + 1)) == $extension)) {
+            $full: $full + ' format("#{$type}")';
+          }
+        }
+      }
+    } @else {
+      $skip-next: false;
+    }
+
+    @if (not $skip-next and $i != $font-file-length) { $full: $full + ', ';}
+  }
+
+  @return unquote($full);
+}
+
 
 
 // Background property support for vendor prefixing within values.
@@ -6458,7 +7879,7 @@ $default-has-layout-approach: zoom !default;
   @if $experimental-support-for-webkit       and prefixed(-webkit, $backgrounds) {      background: -webkit($backgrounds); }
   @if $experimental-support-for-mozilla      and prefixed(-moz,    $backgrounds) {      background:    -moz($backgrounds); }
   @if $experimental-support-for-opera        and prefixed(-o,      $backgrounds) {      background:      -o($backgrounds); }
-  @if $experimental-support-for-pie          and $add-pie-bg                     { -pie-background:    -pie($backgrounds); }
+  @if $experimental-support-for-pie          and $add-pie-bg                     { -pie-background:         $backgrounds ; }
                                                                                         background:         $backgrounds ;
 }
 
@@ -7184,620 +8605,990 @@ $default-scale-y     : $default-scale-x      !default;
 $default-scale-z     : $default-scale-x      !default;
 
 
-// The default angle for rotations
-$default-rotate      : 45deg                 !default;
+// The default angle for rotations
+$default-rotate      : 45deg                 !default;
+
+
+// The default x-vector for the axis of 3d rotations
+$default-vector-x    : 1                     !default;
+// The default y-vector for the axis of 3d rotations
+$default-vector-y    : 1                     !default;
+// The default z-vector for the axis of 3d rotations
+$default-vector-z    : 1                     !default;
+
+
+// The default x-length for translations
+$default-translate-x : 1em                   !default;
+// The default y-length for translations
+$default-translate-y : $default-translate-x  !default;
+// The default z-length for translations
+$default-translate-z : $default-translate-x  !default;
+
+
+// The default x-angle for skewing
+$default-skew-x      : 5deg                  !default;
+// The default y-angle for skewing
+$default-skew-y      : 5deg                  !default;
+
+
+// **Transform-origin**
+// Transform-origin sent as a complete string
+//
+//     @include apply-origin( origin [, 3D-only ] )
+//
+// where 'origin' is a space separated list containing 1-3 (x/y/z) coordinates
+// in percentages, absolute (px, cm, in, em etc..) or relative
+// (left, top, right, bottom, center) units
+//
+// @param only3d Set this to true to only apply this
+// mixin where browsers have 3D support.
+@mixin apply-origin($origin, $only3d) {
+  $only3d: $only3d or -compass-list-size(-compass-list($origin)) > 2;
+  @if $only3d {
+    @include experimental(transform-origin, $origin,
+      -moz, -webkit, -o, -ms, not(-khtml), official
+    );
+  } @else {
+    @include experimental(transform-origin, $origin,
+      -moz, -webkit, -o, -ms, not(-khtml), official
+    );
+  }
+}
+
+// Transform-origin sent as individual arguments:
+//
+//     @include transform-origin( [ origin-x, origin-y, origin-z, 3D-only ] )
+//
+// where the 3 'origin-' arguments represent x/y/z coordinates.
+//
+// **NOTE:** setting z coordinates triggers 3D support list, leave false for 2D support
+@mixin transform-origin(
+  $origin-x: $default-origin-x,
+  $origin-y: $default-origin-y,
+  $origin-z: false,
+  $only3d:   if($origin-z, true, false)
+) {
+  $origin: unquote('');
+  @if $origin-x or $origin-y or $origin-z {
+    @if $origin-x { $origin: $origin-x; } @else { $origin: 50%; }
+    @if $origin-y { $origin: $origin $origin-y; } @else { @if $origin-z { $origin: $origin 50%; }}
+    @if $origin-z { $origin: $origin $origin-z; }
+    @include apply-origin($origin, $only3d);
+  }
+}
+
+
+// Transform sent as a complete string:
+//
+//     @include transform( transforms [, 3D-only ] )
+//
+// where 'transforms' is a space separated list of all the transforms to be applied.
+@mixin transform(
+  $transform,
+  $only3d: false
+) {
+  @if $only3d {
+    @include experimental(transform, $transform,
+      -moz, -webkit, -o, -ms, not(-khtml), official
+    );
+  } @else {
+    @include experimental(transform, $transform,
+      -moz, -webkit, -o, -ms, not(-khtml), official
+    );
+  }
+}
+
+// Shortcut to target all browsers with 2D transform support
+@mixin transform2d($trans) {
+  @include transform($trans, false);
+}
+
+// Shortcut to target only browsers with 3D transform support
+@mixin transform3d($trans) {
+  @include transform($trans, true);
+}
+
+// @doc off
+// 3D Parameters -------------------------------------------------------------
+// @doc on
+
+// Set the perspective of 3D transforms on the children of an element:
+//
+//      @include perspective( perspective )
+//
+// where 'perspective' is a unitless number representing the depth of the
+// z-axis. The higher the perspective, the more exaggerated the foreshortening.
+// values from 500 to 1000 are more-or-less "normal" - a good starting-point.
+@mixin perspective($p) {
+  @include experimental(perspective, $p,
+    -moz, -webkit, -o, -ms, not(-khtml), official
+  );
+}
+
+// Set the origin position for the perspective
+//
+//      @include perspective-origin(origin-x [origin-y])
+//
+// where the two arguments represent x/y coordinates
+@mixin perspective-origin($origin: 50%) {
+  @include experimental(perspective-origin, $origin,
+    -moz, -webkit, -o, -ms, not(-khtml), official
+  );
+}
+
+// Determine whether a 3D objects children also live in the given 3D space
+//
+//      @include transform-style( [ style ] )
+//
+// where `style` can be either `flat` or `preserve-3d`.
+// Browsers default to `flat`, mixin defaults to `preserve-3d`.
+@mixin transform-style($style: preserve-3d) {
+  @include experimental(transform-style, $style,
+    -moz, -webkit, -o, -ms, not(-khtml), official
+  );
+}
+
+// Determine the visibility of an element when it's back is turned
+//
+//     @include backface-visibility( [ visibility ] )
+//
+// where `visibility` can be either `visible` or `hidden`.
+// Browsers default to visible, mixin defaults to hidden
+@mixin backface-visibility($visibility: hidden) {
+  @include experimental(backface-visibility, $visibility,
+    -moz, -webkit, -o, -ms, not(-khtml), official
+  );
+}
 
+// @doc off
+// Transform Partials --------------------------------------------------------
+// These work well on their own, but they don't add to each other, they override.
+// Use along with transform parameter mixins to adjust origin, perspective and style
+// ---------------------------------------------------------------------------
 
-// The default x-vector for the axis of 3d rotations
-$default-vector-x    : 1                     !default;
-// The default y-vector for the axis of 3d rotations
-$default-vector-y    : 1                     !default;
-// The default z-vector for the axis of 3d rotations
-$default-vector-z    : 1                     !default;
 
+// Scale ---------------------------------------------------------------------
+// @doc on
 
-// The default x-length for translations
-$default-translate-x : 1em                   !default;
-// The default y-length for translations
-$default-translate-y : $default-translate-x  !default;
-// The default z-length for translations
-$default-translate-z : $default-translate-x  !default;
+// Scale an object along the x and y axis:
+//
+//      @include scale( [ scale-x, scale-y, perspective, 3D-only ] )
+//
+// where the 'scale-' arguments are unitless multipliers of the x and y dimensions
+// and perspective, which works the same as the stand-alone perspective property/mixin
+// but applies to the individual element (multiplied with any parent perspective)
+//
+// **Note** This mixin cannot be combined with other transform mixins.
+@mixin scale(
+  $scale-x:     $default-scale-x,
+  $scale-y:     $scale-x,
+  $perspective: false,
+  $only3d:      false
+) {
+  $trans: scale($scale-x, $scale-y);
+  @if $perspective { $trans: perspective($perspective) $trans; }
+  @include transform($trans, $only3d);
+}
 
+// Scale an object along the x axis
+// @include scaleX( [ scale-x, perspective, 3D-only ] )
+//
+// **Note** This mixin cannot be combined with other transform mixins.
+@mixin scaleX(
+  $scale:       $default-scale-x,
+  $perspective: false,
+  $only3d:      false
+) {
+  $trans: scaleX($scale);
+  @if $perspective { $trans: perspective($perspective) $trans; }
+  @include transform($trans, $only3d);
+}
 
-// The default x-angle for skewing
-$default-skew-x      : 5deg                  !default;
-// The default y-angle for skewing
-$default-skew-y      : 5deg                  !default;
+// Scale an object along the y axis
+// @include scaleY( [ scale-y, perspective, 3D-only ] )
+//
+// **Note** This mixin cannot be combined with other transform mixins.
+@mixin scaleY(
+  $scale:       $default-scale-y,
+  $perspective: false,
+  $only3d:      false
+) {
+  $trans: scaleY($scale);
+  @if $perspective { $trans: perspective($perspective) $trans; }
+  @include transform($trans, $only3d);
+}
 
+// Scale an object along the z axis
+// @include scaleZ( [ scale-z, perspective ] )
+//
+// **Note** This mixin cannot be combined with other transform mixins.
+@mixin scaleZ(
+  $scale: $default-scale-z,
+  $perspective: false
+) {
+  $trans: scaleZ($scale);
+  @if $perspective { $trans: perspective($perspective) $trans; }
+  @include transform3d($trans);
+}
 
-// **Transform-origin**
-// Transform-origin sent as a complete string
+// Scale and object along all three axis
+// @include scale3d( [ scale-x, scale-y, scale-z, perspective ] )
 //
-//     @include apply-origin( origin [, 3D-only ] )
+// **Note** This mixin cannot be combined with other transform mixins.
+@mixin scale3d(
+  $scale-x:     $default-scale-x,
+  $scale-y:     $default-scale-y,
+  $scale-z:     $default-scale-z,
+  $perspective: false
+) {
+  $trans: scale3d($scale-x, $scale-y, $scale-z);
+  @if $perspective { $trans: perspective($perspective) $trans; }
+  @include transform3d($trans);
+}
+
+// @doc off
+// Rotate --------------------------------------------------------------------
+// @doc on
+
+// Rotate an object around the z axis  (2D)
+// @include rotate( [ rotation, perspective, 3D-only ] )
+// where 'rotation' is an angle set in degrees (deg) or radian (rad) units
 //
-// where 'origin' is a space separated list containing 1-3 (x/y/z) coordinates
-// in percentages, absolute (px, cm, in, em etc..) or relative
-// (left, top, right, bottom, center) units
+// **Note** This mixin cannot be combined with other transform mixins.
+@mixin rotate(
+  $rotate:      $default-rotate,
+  $perspective: false,
+  $only3d:      false
+) {
+  $trans: rotate($rotate);
+  @if $perspective { $trans: perspective($perspective) $trans; }
+  @include transform($trans, $only3d);
+}
+
+// A longcut for 'rotate' in case you forget that 'z' is implied
 //
-// @param only3d Set this to true to only apply this
-// mixin where browsers have 3D support.
-@mixin apply-origin($origin, $only3d) {
-  $only3d: $only3d or -compass-list-size(-compass-list($origin)) > 2;
-  @if $only3d {
-    @include experimental(transform-origin, $origin,
-      -moz, -webkit, -o, -ms, not(-khtml), official
-    );
-  } @else {
-    @include experimental(transform-origin, $origin,
-      -moz, -webkit, -o, -ms, not(-khtml), official
-    );
-  }
+// **Note** This mixin cannot be combined with other transform mixins.
+@mixin rotateZ(
+  $rotate:      $default-rotate,
+  $perspective: false,
+  $only3d:      false
+) {
+  @include rotate($rotate, $perspective, $only3d);
 }
 
-// Transform-origin sent as individual arguments:
+// Rotate an object around the x axis (3D)
+// @include rotateX( [ rotation, perspective ] )
 //
-//     @include transform-origin( [ origin-x, origin-y, origin-z, 3D-only ] )
+// **Note** This mixin cannot be combined with other transform mixins.
+@mixin rotateX(
+  $rotate: $default-rotate,
+  $perspective: false
+) {
+  $trans: rotateX($rotate);
+  @if $perspective { $trans: perspective($perspective) $trans; }
+  @include transform3d($trans);
+}
+
+// Rotate an object around the y axis (3D)
+// @include rotate( [ rotation, perspective ] )
 //
-// where the 3 'origin-' arguments represent x/y/z coordinates.
+// **Note** This mixin cannot be combined with other transform mixins.
+@mixin rotateY(
+  $rotate: $default-rotate,
+  $perspective: false
+) {
+  $trans: rotateY($rotate);
+  @if $perspective { $trans: perspective($perspective) $trans; }
+  @include transform3d($trans);
+}
+
+// Rotate an object around an arbitrary axis (3D)
+// @include rotate( [ vector-x, vector-y, vector-z, rotation, perspective ] )
+// where the 'vector-' arguments accept unitless numbers.
+// These numbers are not important on their own, but in relation to one another
+// creating an axis from your transform-origin, along the axis of Xx = Yy = Zz.
 //
-// **NOTE:** setting z coordinates triggers 3D support list, leave false for 2D support
-@mixin transform-origin(
-  $origin-x: $default-origin-x,
-  $origin-y: $default-origin-y,
-  $origin-z: false,
-  $only3d:   if($origin-z, true, false)
+// **Note** This mixin cannot be combined with other transform mixins.
+@mixin rotate3d(
+  $vector-x: $default-vector-x,
+  $vector-y: $default-vector-y,
+  $vector-z: $default-vector-z,
+  $rotate: $default-rotate,
+  $perspective: false
 ) {
-  $origin: unquote('');
-  @if $origin-x or $origin-y or $origin-z {
-    @if $origin-x { $origin: $origin-x; } @else { $origin: 50%; }
-    @if $origin-y { $origin: $origin $origin-y; } @else { @if $origin-z { $origin: $origin 50%; }}
-    @if $origin-z { $origin: $origin $origin-z; }
-    @include apply-origin($origin, $only3d);
-  }
+  $trans: rotate3d($vector-x, $vector-y, $vector-z, $rotate);
+  @if $perspective { $trans: perspective($perspective) $trans; }
+  @include transform3d($trans);
 }
 
+// @doc off
+// Translate -----------------------------------------------------------------
+// @doc on
+
+// Move an object along the x or y axis (2D)
+// @include translate( [ translate-x, translate-y, perspective, 3D-only ] )
+// where the 'translate-' arguments accept any distance in percentages or absolute (px, cm, in, em etc..) units.
+//
+// **Note** This mixin cannot be combined with other transform mixins.
+@mixin translate(
+  $translate-x: $default-translate-x,
+  $translate-y: $default-translate-y,
+  $perspective: false,
+  $only3d:      false
+) {
+  $trans: translate($translate-x, $translate-y);
+  @if $perspective { $trans: perspective($perspective) $trans; }
+  @include transform($trans, $only3d);
+}
 
-// Transform sent as a complete string:
+// Move an object along the x axis (2D)
+// @include translate( [ translate-x, perspective, 3D-only ] )
 //
-//     @include transform( transforms [, 3D-only ] )
+// **Note** This mixin cannot be combined with other transform mixins.
+@mixin translateX(
+  $trans-x:     $default-translate-x,
+  $perspective: false,
+  $only3d:      false
+) {
+  $trans: translateX($trans-x);
+  @if $perspective { $trans: perspective($perspective) $trans; }
+  @include transform($trans, $only3d);
+}
+
+// Move an object along the y axis (2D)
+// @include translate( [ translate-y, perspective, 3D-only ] )
 //
-// where 'transforms' is a space separated list of all the transforms to be applied.
-@mixin transform(
-  $transform,
-  $only3d: false
+// **Note** This mixin cannot be combined with other transform mixins.
+@mixin translateY(
+  $trans-y:     $default-translate-y,
+  $perspective: false,
+  $only3d:      false
 ) {
-  @if $only3d {
-    @include experimental(transform, $transform,
-      -moz, -webkit, -o, -ms, not(-khtml), official
-    );
-  } @else {
-    @include experimental(transform, $transform,
-      -moz, -webkit, -o, -ms, not(-khtml), official
-    );
-  }
+  $trans: translateY($trans-y);
+  @if $perspective { $trans: perspective($perspective) $trans; }
+  @include transform($trans, $only3d);
 }
 
-// Shortcut to target all browsers with 2D transform support
-@mixin transform2d($trans) {
-  @include transform($trans, false);
+// Move an object along the z axis (3D)
+// @include translate( [ translate-z, perspective ] )
+//
+// **Note** This mixin cannot be combined with other transform mixins.
+@mixin translateZ(
+  $trans-z:     $default-translate-z,
+  $perspective: false
+) {
+  $trans: translateZ($trans-z);
+  @if $perspective { $trans: perspective($perspective) $trans; }
+  @include transform3d($trans);
 }
 
-// Shortcut to target only browsers with 3D transform support
-@mixin transform3d($trans) {
-  @include transform($trans, true);
+// Move an object along the x, y and z axis (3D)
+// @include translate( [ translate-x, translate-y, translate-z, perspective ] )
+//
+// **Note** This mixin cannot be combined with other transform mixins.
+@mixin translate3d(
+  $translate-x: $default-translate-x,
+  $translate-y: $default-translate-y,
+  $translate-z: $default-translate-z,
+  $perspective: false
+) {
+  $trans: translate3d($translate-x, $translate-y, $translate-z);
+  @if $perspective { $trans: perspective($perspective) $trans; }
+  @include transform3d($trans);
 }
 
 // @doc off
-// 3D Parameters -------------------------------------------------------------
+// Skew ----------------------------------------------------------------------
 // @doc on
 
-// Set the perspective of 3D transforms on the children of an element:
-//
-//      @include perspective( perspective )
+// Skew an element:
 //
-// where 'perspective' is a unitless number representing the depth of the
-// z-axis. The higher the perspective, the more exaggerated the foreshortening.
-// values from 500 to 1000 are more-or-less "normal" - a good starting-point.
-@mixin perspective($p) {
-  @include experimental(perspective, $p,
-    -moz, -webkit, -o, -ms, not(-khtml), official
-  );
-}
-
-// Set the origin position for the perspective
+//     @include skew( [ skew-x, skew-y, 3D-only ] )
 //
-//      @include perspective-origin(origin-x [origin-y])
+// where the 'skew-' arguments accept css angles in degrees (deg) or radian (rad) units.
 //
-// where the two arguments represent x/y coordinates
-@mixin perspective-origin($origin: 50%) {
-  @include experimental(perspective-origin, $origin,
-    -moz, -webkit, -o, -ms, not(-khtml), official
-  );
+// **Note** This mixin cannot be combined with other transform mixins.
+@mixin skew(
+  $skew-x: $default-skew-x,
+  $skew-y: $default-skew-y,
+  $only3d: false
+) {
+  $trans: skew($skew-x, $skew-y);
+  @include transform($trans, $only3d);
 }
 
-// Determine whether a 3D objects children also live in the given 3D space
+// Skew an element along the x axiz
 //
-//      @include transform-style( [ style ] )
+//     @include skew( [ skew-x, 3D-only ] )
 //
-// where `style` can be either `flat` or `preserve-3d`.
-// Browsers default to `flat`, mixin defaults to `preserve-3d`.
-@mixin transform-style($style: preserve-3d) {
-  @include experimental(transform-style, $style,
-    -moz, -webkit, -o, -ms, not(-khtml), official
-  );
+// **Note** This mixin cannot be combined with other transform mixins.
+@mixin skewX(
+  $skew-x: $default-skew-x,
+  $only3d: false
+) {
+  $trans: skewX($skew-x);
+  @include transform($trans, $only3d);
 }
 
-// Determine the visibility of an element when it's back is turned
+// Skew an element along the y axis
 //
-//     @include backface-visibility( [ visibility ] )
+//     @include skew( [ skew-y, 3D-only ] )
 //
-// where `visibility` can be either `visible` or `hidden`.
-// Browsers default to visible, mixin defaults to hidden
-@mixin backface-visibility($visibility: hidden) {
-  @include experimental(backface-visibility, $visibility,
-    -moz, -webkit, -o, -ms, not(-khtml), official
-  );
+// **Note** This mixin cannot be combined with other transform mixins.
+@mixin skewY(
+  $skew-y: $default-skew-y,
+  $only3d: false
+) {
+  $trans: skewY($skew-y);
+  @include transform($trans, $only3d);
 }
 
-// @doc off
-// Transform Partials --------------------------------------------------------
-// These work well on their own, but they don't add to each other, they override.
-// Use along with transform parameter mixins to adjust origin, perspective and style
-// ---------------------------------------------------------------------------
-
-
-// Scale ---------------------------------------------------------------------
-// @doc on
 
-// Scale an object along the x and y axis:
-//
-//      @include scale( [ scale-x, scale-y, perspective, 3D-only ] )
+// Full transform mixins
+// For settings any combination of transforms as arguments
+// These are complex and not highly recommended for daily use. They are mainly
+// here for backward-compatibility purposes.
 //
-// where the 'scale-' arguments are unitless multipliers of the x and y dimensions
-// and perspective, which works the same as the stand-alone perspective property/mixin
-// but applies to the individual element (multiplied with any parent perspective)
+// * they include origin adjustments
+// * scale takes a multiplier (unitless), rotate and skew take degrees (deg)
 //
 // **Note** This mixin cannot be combined with other transform mixins.
-@mixin scale(
-  $scale-x:     $default-scale-x,
-  $scale-y:     $scale-x,
+@mixin create-transform(
   $perspective: false,
+  $scale-x:     false,
+  $scale-y:     false,
+  $scale-z:     false,
+  $rotate-x:    false,
+  $rotate-y:    false,
+  $rotate-z:    false,
+  $rotate3d:    false,
+  $trans-x:     false,
+  $trans-y:     false,
+  $trans-z:     false,
+  $skew-x:      false,
+  $skew-y:      false,
+  $origin-x:    false,
+  $origin-y:    false,
+  $origin-z:    false,
   $only3d:      false
 ) {
-  $trans: scale($scale-x, $scale-y);
-  @if $perspective { $trans: perspective($perspective) $trans; }
+  $trans: unquote("");
+
+  // perspective
+  @if $perspective { $trans: perspective($perspective) ; }
+
+  // scale
+  @if $scale-x and $scale-y {
+    @if $scale-z { $trans: $trans scale3d($scale-x, $scale-y, $scale-z); }
+    @else { $trans: $trans scale($scale-x, $scale-y); }
+  } @else {
+    @if $scale-x { $trans: $trans scaleX($scale-x); }
+    @if $scale-y { $trans: $trans scaleY($scale-y); }
+    @if $scale-z { $trans: $trans scaleZ($scale-z); }
+  }
+
+  // rotate
+  @if $rotate-x { $trans: $trans rotateX($rotate-x); }
+  @if $rotate-y { $trans: $trans rotateY($rotate-y); }
+  @if $rotate-z { $trans: $trans rotateZ($rotate-z); }
+  @if $rotate3d { $trans: $trans rotate3d($rotate3d); }
+
+  // translate
+  @if $trans-x and $trans-y {
+    @if $trans-z { $trans: $trans translate3d($trans-x, $trans-y, $trans-z); }
+    @else { $trans: $trans translate($trans-x, $trans-y); }
+  } @else {
+    @if $trans-x { $trans: $trans translateX($trans-x); }
+    @if $trans-y { $trans: $trans translateY($trans-y); }
+    @if $trans-z { $trans: $trans translateZ($trans-z); }
+  }
+
+  // skew
+  @if $skew-x and $skew-y { $trans: $trans skew($skew-x, $skew-y); }
+  @else {
+    @if $skew-x { $trans: $trans skewX($skew-x); }
+    @if $skew-y { $trans: $trans skewY($skew-y); }
+  }
+
+  // apply it!
   @include transform($trans, $only3d);
+  @include transform-origin($origin-x, $origin-y, $origin-z, $only3d);
+}
+
+
+// A simplified set of options
+// backwards-compatible with the previous version of the 'transform' mixin
+@mixin simple-transform(
+  $scale:    false,
+  $rotate:   false,
+  $trans-x:  false,
+  $trans-y:  false,
+  $skew-x:   false,
+  $skew-y:   false,
+  $origin-x: false,
+  $origin-y: false
+) {
+  @include create-transform(
+    false,
+    $scale, $scale, false,
+    false, false, $rotate, false,
+    $trans-x, $trans-y, false,
+    $skew-x, $skew-y,
+    $origin-x, $origin-y, false,
+    false
+  );
 }
 
-// Scale an object along the x axis
-// @include scaleX( [ scale-x, perspective, 3D-only ] )
-//
-// **Note** This mixin cannot be combined with other transform mixins.
-@mixin scaleX(
-  $scale:       $default-scale-x,
-  $perspective: false,
-  $only3d:      false
-) {
-  $trans: scaleX($scale);
-  @if $perspective { $trans: perspective($perspective) $trans; }
-  @include transform($trans, $only3d);
-}
+// Usually compass hacks apply to both ie6 & 7 -- set this to false to disable support for both.
+$legacy-support-for-ie: true !default;
+
+// Setting this to false will result in smaller output, but no support for ie6 hacks
+$legacy-support-for-ie6: $legacy-support-for-ie !default;
+
+// Setting this to false will result in smaller output, but no support for ie7 hacks
+$legacy-support-for-ie7: $legacy-support-for-ie !default;
+
+// Setting this to false will result in smaller output, but no support for legacy ie8 hacks
+$legacy-support-for-ie8: $legacy-support-for-ie !default;
+
+// @private
+// The user can simply set $legacy-support-for-ie and 6, 7, and 8 will be set accordingly,
+// But in case the user set each of those explicitly, we need to sync the value of
+// this combined variable.
+$legacy-support-for-ie: $legacy-support-for-ie6 or $legacy-support-for-ie7 or $legacy-support-for-ie8;
+
+// Whether to output legacy support for mozilla.
+// Usually this means hacks to support Firefox 3.6 or earlier.
+$legacy-support-for-mozilla: true;
+
+// Support for mozilla in experimental css3 properties (-moz).
+$experimental-support-for-mozilla      : true !default;
+// Support for webkit in experimental css3 properties (-webkit).
+$experimental-support-for-webkit       : true !default;
+// Support for webkit's original (non-standard) gradient syntax.
+$support-for-original-webkit-gradients : true !default;
+// Support for opera in experimental css3 properties (-o).
+$experimental-support-for-opera        : true !default;
+// Support for microsoft in experimental css3 properties (-ms).
+$experimental-support-for-microsoft    : true !default;
+// Support for khtml in experimental css3 properties (-khtml).
+$experimental-support-for-khtml        : false !default;
+// Support for svg in experimental css3 properties.
+// Setting this to true might add significant size to your
+// generated stylesheets.
+$experimental-support-for-svg          : false !default;
+// Support for CSS PIE in experimental css3 properties (-pie).
+$experimental-support-for-pie          : false !default;
+
 
-// Scale an object along the y axis
-// @include scaleY( [ scale-y, perspective, 3D-only ] )
-//
-// **Note** This mixin cannot be combined with other transform mixins.
-@mixin scaleY(
-  $scale:       $default-scale-y,
-  $perspective: false,
-  $only3d:      false
+// This mixin provides basic support for CSS3 properties and
+// their corresponding experimental CSS2 properties when
+// the implementations are identical except for the property
+// prefix.
+@mixin experimental($property, $value,
+  $moz      : $experimental-support-for-mozilla,
+  $webkit   : $experimental-support-for-webkit,
+  $o        : $experimental-support-for-opera,
+  $ms       : $experimental-support-for-microsoft,
+  $khtml    : $experimental-support-for-khtml,
+  $official : true
 ) {
-  $trans: scaleY($scale);
-  @if $perspective { $trans: perspective($perspective) $trans; }
-  @include transform($trans, $only3d);
+  @if $webkit  and $experimental-support-for-webkit    { -webkit-#{$property} : $value; }
+  @if $khtml   and $experimental-support-for-khtml     {  -khtml-#{$property} : $value; }
+  @if $moz     and $experimental-support-for-mozilla   {    -moz-#{$property} : $value; }
+  @if $ms      and $experimental-support-for-microsoft {     -ms-#{$property} : $value; }
+  @if $o       and $experimental-support-for-opera     {      -o-#{$property} : $value; }
+  @if $official                                        {         #{$property} : $value; }
 }
 
-// Scale an object along the z axis
-// @include scaleZ( [ scale-z, perspective ] )
-//
-// **Note** This mixin cannot be combined with other transform mixins.
-@mixin scaleZ(
-  $scale: $default-scale-z,
-  $perspective: false
+// Same as experimental(), but for cases when the property is the same and the value is vendorized
+@mixin experimental-value($property, $value,
+  $moz      : $experimental-support-for-mozilla,
+  $webkit   : $experimental-support-for-webkit,
+  $o        : $experimental-support-for-opera,
+  $ms       : $experimental-support-for-microsoft,
+  $khtml    : $experimental-support-for-khtml,
+  $official : true
 ) {
-  $trans: scaleZ($scale);
-  @if $perspective { $trans: perspective($perspective) $trans; }
-  @include transform3d($trans);
+  @if $webkit  and $experimental-support-for-webkit    { #{$property} : -webkit-#{$value}; }
+  @if $khtml   and $experimental-support-for-khtml     { #{$property} :  -khtml-#{$value}; }
+  @if $moz     and $experimental-support-for-mozilla   { #{$property} :    -moz-#{$value}; }
+  @if $ms      and $experimental-support-for-microsoft { #{$property} :     -ms-#{$value}; }
+  @if $o       and $experimental-support-for-opera     { #{$property} :      -o-#{$value}; }
+  @if $official                                        { #{$property} :         #{$value}; }
 }
 
-// Scale and object along all three axis
-// @include scale3d( [ scale-x, scale-y, scale-z, perspective ] )
 //
-// **Note** This mixin cannot be combined with other transform mixins.
-@mixin scale3d(
-  $scale-x:     $default-scale-x,
-  $scale-y:     $default-scale-y,
-  $scale-z:     $default-scale-z,
-  $perspective: false
-) {
-  $trans: scale3d($scale-x, $scale-y, $scale-z);
-  @if $perspective { $trans: perspective($perspective) $trans; }
-  @include transform3d($trans);
-}
+// A partial implementation of the Ruby list functions from Compass:
+// https://github.com/Compass/compass/blob/stable/lib/compass/sass_extensions/functions/lists.rb
+//
 
-// @doc off
-// Rotate --------------------------------------------------------------------
-// @doc on
 
-// Rotate an object around the z axis  (2D)
-// @include rotate( [ rotation, perspective, 3D-only ] )
-// where 'rotation' is an angle set in degrees (deg) or radian (rad) units
-//
-// **Note** This mixin cannot be combined with other transform mixins.
-@mixin rotate(
-  $rotate:      $default-rotate,
-  $perspective: false,
-  $only3d:      false
-) {
-  $trans: rotate($rotate);
-  @if $perspective { $trans: perspective($perspective) $trans; }
-  @include transform($trans, $only3d);
-}
+// compact is part of libsass
 
-// A longcut for 'rotate' in case you forget that 'z' is implied
-//
-// **Note** This mixin cannot be combined with other transform mixins.
-@mixin rotateZ(
-  $rotate:      $default-rotate,
-  $perspective: false,
-  $only3d:      false
-) {
-  @include rotate($rotate, $perspective, $only3d);
+@function -compass-nth($list, $place) {
+  // Yep, Sass-lists are 1-indexed.
+  @if $place == "first" {
+    $place: 1;
+  }
+  @if $place == "last" {
+    $place: length($list);
+  }
+  @return nth($list, $place);
 }
 
-// Rotate an object around the x axis (3D)
-// @include rotateX( [ rotation, perspective ] )
-//
-// **Note** This mixin cannot be combined with other transform mixins.
-@mixin rotateX(
-  $rotate: $default-rotate,
-  $perspective: false
-) {
-  $trans: rotateX($rotate);
-  @if $perspective { $trans: perspective($perspective) $trans; }
-  @include transform3d($trans);
-}
+// compass_list can't be implemented in sass script
 
-// Rotate an object around the y axis (3D)
-// @include rotate( [ rotation, perspective ] )
-//
-// **Note** This mixin cannot be combined with other transform mixins.
-@mixin rotateY(
-  $rotate: $default-rotate,
-  $perspective: false
-) {
-  $trans: rotateY($rotate);
-  @if $perspective { $trans: perspective($perspective) $trans; }
-  @include transform3d($trans);
-}
+@function -compass-space-list($item1, $item2:null, $item3:null, $item4:null, $item5:null, $item6:null, $item7:null, $item8:null, $item9:null) {
+  $items: ();
+  // Support for polymorphism.
+  @if type-of($item1) == 'list' {
+    // Passing a single array of properties.
+    $items: $item1;
+  } @else {
+    $items: $item1 $item2 $item3 $item4 $item5 $item6 $item7 $item8 $item9;
+  }
 
-// Rotate an object around an arbitrary axis (3D)
-// @include rotate( [ vector-x, vector-y, vector-z, rotation, perspective ] )
-// where the 'vector-' arguments accept unitless numbers.
-// These numbers are not important on their own, but in relation to one another
-// creating an axis from your transform-origin, along the axis of Xx = Yy = Zz.
-//
-// **Note** This mixin cannot be combined with other transform mixins.
-@mixin rotate3d(
-  $vector-x: $default-vector-x,
-  $vector-y: $default-vector-y,
-  $vector-z: $default-vector-z,
-  $rotate: $default-rotate,
-  $perspective: false
-) {
-  $trans: rotate3d($vector-x, $vector-y, $vector-z, $rotate);
-  @if $perspective { $trans: perspective($perspective) $trans; }
-  @include transform3d($trans);
-}
+  $full: first-value-of($items);
 
-// @doc off
-// Translate -----------------------------------------------------------------
-// @doc on
+  @for $i from 2 through length($items) {
+    $item: nth($items, $i);
+    @if $item != null {
+      $full: $full $item;
+    }
+  }
 
-// Move an object along the x or y axis (2D)
-// @include translate( [ translate-x, translate-y, perspective, 3D-only ] )
-// where the 'translate-' arguments accept any distance in percentages or absolute (px, cm, in, em etc..) units.
-//
-// **Note** This mixin cannot be combined with other transform mixins.
-@mixin translate(
-  $translate-x: $default-translate-x,
-  $translate-y: $default-translate-y,
-  $perspective: false,
-  $only3d:      false
-) {
-  $trans: translate($translate-x, $translate-y);
-  @if $perspective { $trans: perspective($perspective) $trans; }
-  @include transform($trans, $only3d);
+  @return $full;
 }
 
-// Move an object along the x axis (2D)
-// @include translate( [ translate-x, perspective, 3D-only ] )
-//
-// **Note** This mixin cannot be combined with other transform mixins.
-@mixin translateX(
-  $trans-x:     $default-translate-x,
-  $perspective: false,
-  $only3d:      false
-) {
-  $trans: translateX($trans-x);
-  @if $perspective { $trans: perspective($perspective) $trans; }
-  @include transform($trans, $only3d);
+@function -compass-list-size($list) {
+  @return length($list);
 }
 
-// Move an object along the y axis (2D)
-// @include translate( [ translate-y, perspective, 3D-only ] )
-//
-// **Note** This mixin cannot be combined with other transform mixins.
-@mixin translateY(
-  $trans-y:     $default-translate-y,
-  $perspective: false,
-  $only3d:      false
-) {
-  $trans: translateY($trans-y);
-  @if $perspective { $trans: perspective($perspective) $trans; }
-  @include transform($trans, $only3d);
+@function -compass-slice($list, $start, $end: false) {
+  @if $end == false {
+    $end: length($list);
+  }
+  $full: nth($list, $start);
+  @for $i from $start + 1 through $end {
+    $full: $full, nth($list, $i);
+  }
+  @return $full;
+}
+
+@function reject($list, $reject1, $reject2:null, $reject3:null, $reject4:null, $reject5:null, $reject6:null, $reject7:null, $reject8:null, $reject9:null) {
+  $rejects: $reject1, $reject2, $reject3, $reject4, $reject5, $reject6, $reject7, $reject8, $reject9;
+
+  $full: false;
+  @each $item in $list {
+    @if index($rejects, $item) {}
+    @else {
+      @if $full {
+        $full: $full, $item;
+      }
+      @else {
+        $full: $item;
+      }
+    }
+  }
+  @return $full;
 }
 
-// Move an object along the z axis (3D)
-// @include translate( [ translate-z, perspective ] )
-//
-// **Note** This mixin cannot be combined with other transform mixins.
-@mixin translateZ(
-  $trans-z:     $default-translate-z,
-  $perspective: false
-) {
-  $trans: translateZ($trans-z);
-  @if $perspective { $trans: perspective($perspective) $trans; }
-  @include transform3d($trans);
+@function first-value-of($list) {
+  @return nth($list, 1);
 }
 
-// Move an object along the x, y and z axis (3D)
-// @include translate( [ translate-x, translate-y, translate-z, perspective ] )
-//
-// **Note** This mixin cannot be combined with other transform mixins.
-@mixin translate3d(
-  $translate-x: $default-translate-x,
-  $translate-y: $default-translate-y,
-  $translate-z: $default-translate-z,
-  $perspective: false
-) {
-  $trans: translate3d($translate-x, $translate-y, $translate-z);
-  @if $perspective { $trans: perspective($perspective) $trans; }
-  @include transform3d($trans);
+@function compact($vars...) {
+  $separator: list-separator($vars);
+  $list: ();
+  @each $var in $vars {
+      @if $var {
+          $list: append($list, $var, $separator);
+      }
+  }
+  @return $list;
 }
 
-// @doc off
-// Skew ----------------------------------------------------------------------
-// @doc on
-
-// Skew an element:
-//
-//     @include skew( [ skew-x, skew-y, 3D-only ] )
 //
-// where the 'skew-' arguments accept css angles in degrees (deg) or radian (rad) units.
+// A partial implementation of the Ruby cross browser support functions from Compass:
+// https://github.com/Compass/compass/blob/stable/lib/compass/sass_extensions/functions/cross_browser_support.rb
 //
-// **Note** This mixin cannot be combined with other transform mixins.
-@mixin skew(
-  $skew-x: $default-skew-x,
-  $skew-y: $default-skew-y,
-  $only3d: false
-) {
-  $trans: skew($skew-x, $skew-y);
-  @include transform($trans, $only3d);
+
+@function prefixed($prefix, $property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {
+  $properties: $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9;
+  $prefixed: false;
+  @each $item in $properties {
+    @if type-of($item) == 'string' {
+      $prefixed: $prefixed or str-index($item, 'url') != 1 and str-index($item, 'rgb') != 1 and str-index($item, '#') != 1;
+    } @else if type-of($item) == 'color' {
+    } @else if $item != null {
+      $prefixed: true;
+    }
+  }
+  @return $prefixed;
 }
 
-// Skew an element along the x axiz
-//
-//     @include skew( [ skew-x, 3D-only ] )
-//
-// **Note** This mixin cannot be combined with other transform mixins.
-@mixin skewX(
-  $skew-x: $default-skew-x,
-  $only3d: false
-) {
-  $trans: skewX($skew-x);
-  @include transform($trans, $only3d);
+@function prefix($prefix, $property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {
+  $properties: "";
+
+  // Support for polymorphism.
+  @if type-of($property1) == 'list' {
+    // Passing a single array of properties.
+    $properties: $property1;
+  } @else {
+    // Passing multiple properties.
+    $properties: $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9;
+  }
+
+  $props: false;
+  @each $item in $properties {
+    @if $item == null {}
+    @else {
+      @if prefixed($prefix, $item) {
+        $item: #{$prefix}-#{$item};
+      }
+      @if $props {
+        $props: $props, $item;
+      }
+      @else {
+        $props: $item;
+      }
+    }
+  }
+  @return $props;
 }
 
-// Skew an element along the y axis
-//
-//     @include skew( [ skew-y, 3D-only ] )
-//
-// **Note** This mixin cannot be combined with other transform mixins.
-@mixin skewY(
-  $skew-y: $default-skew-y,
-  $only3d: false
-) {
-  $trans: skewY($skew-y);
-  @include transform($trans, $only3d);
+@function -svg($property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {
+  @return prefix('-svg', $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9);
 }
 
+@function -owg($property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {
+  @return prefix('-owg', $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9);
+}
 
-// Full transform mixins
-// For settings any combination of transforms as arguments
-// These are complex and not highly recommended for daily use. They are mainly
-// here for backward-compatibility purposes.
-//
-// * they include origin adjustments
-// * scale takes a multiplier (unitless), rotate and skew take degrees (deg)
-//
-// **Note** This mixin cannot be combined with other transform mixins.
-@mixin create-transform(
-  $perspective: false,
-  $scale-x:     false,
-  $scale-y:     false,
-  $scale-z:     false,
-  $rotate-x:    false,
-  $rotate-y:    false,
-  $rotate-z:    false,
-  $rotate3d:    false,
-  $trans-x:     false,
-  $trans-y:     false,
-  $trans-z:     false,
-  $skew-x:      false,
-  $skew-y:      false,
-  $origin-x:    false,
-  $origin-y:    false,
-  $origin-z:    false,
-  $only3d:      false
-) {
-  $trans: unquote("");
+@function -webkit($property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {
+  @return prefix('-webkit', $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9);
+}
 
-  // perspective
-  @if $perspective { $trans: perspective($perspective) ; }
+@function -moz($property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {
+  @return prefix('-moz', $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9);
+}
 
-  // scale
-  @if $scale-x and $scale-y {
-    @if $scale-z { $trans: $trans scale3d($scale-x, $scale-y, $scale-z); }
-    @else { $trans: $trans scale($scale-x, $scale-y); }
-  } @else {
-    @if $scale-x { $trans: $trans scaleX($scale-x); }
-    @if $scale-y { $trans: $trans scaleY($scale-y); }
-    @if $scale-z { $trans: $trans scaleZ($scale-z); }
-  }
+@function -o($property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {
+  @return prefix('-o', $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9);
+}
 
-  // rotate
-  @if $rotate-x { $trans: $trans rotateX($rotate-x); }
-  @if $rotate-y { $trans: $trans rotateY($rotate-y); }
-  @if $rotate-z { $trans: $trans rotateZ($rotate-z); }
-  @if $rotate3d { $trans: $trans rotate3d($rotate3d); }
+@function -pie($property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {
+  @return prefix('-pie', $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9);
+}
 
-  // translate
-  @if $trans-x and $trans-y {
-    @if $trans-z { $trans: $trans translate3d($trans-x, $trans-y, $trans-z); }
-    @else { $trans: $trans translate($trans-x, $trans-y); }
-  } @else {
-    @if $trans-x { $trans: $trans translateX($trans-x); }
-    @if $trans-y { $trans: $trans translateY($trans-y); }
-    @if $trans-z { $trans: $trans translateZ($trans-z); }
-  }
+// 
+// A partial implementation of the Ruby gradient support functions from Compass:
+// https://github.com/Compass/compass/blob/v0.12.2/lib/compass/sass_extensions/functions/gradient_support.rb
+// 
 
-  // skew
-  @if $skew-x and $skew-y { $trans: $trans skew($skew-x, $skew-y); }
-  @else {
-    @if $skew-x { $trans: $trans skewX($skew-x); }
-    @if $skew-y { $trans: $trans skewY($skew-y); }
+@function color-stops($item1, $item2:null, $item3:null, $item4:null, $item5:null, $item6:null, $item7:null, $item8:null, $item9:null) {
+  $items: $item2, $item3, $item4, $item5, $item6, $item7, $item8, $item9;
+  $full: $item1;
+  @each $item in $items {
+    @if $item != null {
+      $full: $full, $item;
+    }    
   }
+  @return $full;
+}
+// 
+// A partial implementation of the Ruby constants functions from Compass:
+// https://github.com/Compass/compass/blob/stable/lib/compass/sass_extensions/functions/constants.rb
+// 
 
-  // apply it!
-  @include transform($trans, $only3d);
-  @include transform-origin($origin-x, $origin-y, $origin-z, $only3d);
+@function opposite-position($from) {
+    @if ($from == top) {
+        @return bottom;
+    } @else if ($from == bottom) {
+        @return top;
+    } @else if ($from == left) {
+        @return right;
+    } @else if ($from == right) {
+        @return left;
+    } @else if ($from == center) {
+        @return center;
+    }
+}
+
+// 
+// A partial implementation of the Ruby display functions from Compass:
+// https://github.com/Compass/compass/blob/stable/core/lib/compass/core/sass_extensions/functions/display.rb
+// 
+
+@function elements-of-type($type){
+    @if ($type == block){
+        @return address, article, aside, blockquote, center, dir, div, dd, details, dl, dt, fieldset, figcaption, figure, form, footer, frameset, h1, h2, h3, h4, h5, h6, hr, header, hgroup, isindex, main, menu, nav, noframes, noscript, ol, p, pre, section, summary, ul;
+    } @else if ($type == inline){
+        @return a, abbr, acronym, audio, b, basefont, bdo, big, br, canvas, cite, code, command, datalist, dfn, em, embed, font, i, img, input, keygen, kbd, label, mark, meter, output, progress, q, rp, rt, ruby, s, samp, select, small, span, strike, strong, sub, sup, textarea, time, tt, u, var, video, wbr;
+    } @else if ($type == inline-block){
+        @return img;
+    } @else if ($type == table){
+        @return table;
+    } @else if ($type == list-item){
+        @return li;
+    } @else if ($type == table-row-group){
+        @return tbody;
+    } @else if ($type == table-header-group){
+        @return thead;
+    } @else if ($type == table-footer-group){
+        @return tfoot;
+    } @else if ($type == table-row){
+        @return tr;
+    } @else if ($type == table-cell){
+        @return th, td;
+    } @else if ($type == html5-block){
+        @return article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary;
+    } @else if ($type == html5-inline){
+        @return audio, canvas, command, datalist, embed, keygen, mark, meter, output, progress, rp, rt, ruby, time, video, wbr;
+    } @else if ($type == html5){
+        @return article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, main, mark, menu, meter, nav, output, progress, rp, rt, ruby, section, summary, time, video, wbr;
+    } @else if ($type == text-input){
+        @return input, textarea;
+    }
 }
 
+// 
+// A partial implementation of the Ruby colors functions from Compass:
+// https://github.com/Compass/compass/blob/stable/core/lib/compass/core/sass_extensions/functions/colors.rb
+//
 
-// A simplified set of options
-// backwards-compatible with the previous version of the 'transform' mixin
-@mixin simple-transform(
-  $scale:    false,
-  $rotate:   false,
-  $trans-x:  false,
-  $trans-y:  false,
-  $skew-x:   false,
-  $skew-y:   false,
-  $origin-x: false,
-  $origin-y: false
-) {
-  @include create-transform(
-    false,
-    $scale, $scale, false,
-    false, false, $rotate, false,
-    $trans-x, $trans-y, false,
-    $skew-x, $skew-y,
-    $origin-x, $origin-y, false,
-    false
-  );
+// a genericized version of lighten/darken so that negative values can be used.
+@function adjust-lightness($color, $amount) {
+    @return adjust-color($color, $lightness: $amount);
 }
 
-// Usually compass hacks apply to both ie6 & 7 -- set this to false to disable support for both.
-$legacy-support-for-ie: true !default;
+// Scales a color's lightness by some percentage.
+// If the amount is negative, the color is scaled darker, if positive, it is scaled lighter.
+// This will never return a pure light or dark color unless the amount is 100%.
+@function scale-lightness($color, $amount) {
+    @return scale-color($color, $lightness: $amount);
+}
 
-// Setting this to false will result in smaller output, but no support for ie6 hacks
-$legacy-support-for-ie6: $legacy-support-for-ie !default;
+// a genericized version of saturate/desaturate so that negative values can be used.
+@function adjust-saturation($color, $amount) {
+    @return adjust-color($color, $saturation: $amount);
+}
 
-// Setting this to false will result in smaller output, but no support for ie7 hacks
-$legacy-support-for-ie7: $legacy-support-for-ie !default;
+// Scales a color's saturation by some percentage.
+// If the amount is negative, the color is desaturated, if positive, it is saturated.
+// This will never return a pure saturated or desaturated color unless the amount is 100%.
+@function scale-saturation($color, $amount) {
+    @return scale-color($color, $saturation: $amount);
+}
 
-// Setting this to false will result in smaller output, but no support for legacy ie8 hacks
-$legacy-support-for-ie8: $legacy-support-for-ie !default;
+@function shade($color, $percentage) {
+    @return mix(#000000, $color, $percentage);
+}
 
-// @private
-// The user can simply set $legacy-support-for-ie and 6, 7, and 8 will be set accordingly,
-// But in case the user set each of those explicitly, we need to sync the value of
-// this combined variable.
-$legacy-support-for-ie: $legacy-support-for-ie6 or $legacy-support-for-ie7 or $legacy-support-for-ie8;
+@function tint($color, $percentage) {
+    @return mix(#ffffff, $color, $percentage);
+}
 
-// Whether to output legacy support for mozilla.
-// Usually this means hacks to support Firefox 3.6 or earlier.
-$legacy-support-for-mozilla: true;
 
-// Support for mozilla in experimental css3 properties (-moz).
-$experimental-support-for-mozilla      : true !default;
-// Support for webkit in experimental css3 properties (-webkit).
-$experimental-support-for-webkit       : true !default;
-// Support for webkit's original (non-standard) gradient syntax.
-$support-for-original-webkit-gradients : true !default;
-// Support for opera in experimental css3 properties (-o).
-$experimental-support-for-opera        : true !default;
-// Support for microsoft in experimental css3 properties (-ms).
-$experimental-support-for-microsoft    : true !default;
-// Support for khtml in experimental css3 properties (-khtml).
-$experimental-support-for-khtml        : false !default;
-// Support for svg in experimental css3 properties.
-// Setting this to true might add significant size to your
-// generated stylesheets.
-$experimental-support-for-svg          : false !default;
-// Support for CSS PIE in experimental css3 properties (-pie).
-$experimental-support-for-pie          : false !default;
+//
+// A partial implementation of the Ruby fonts functions from Compass:
+// https://github.com/Compass/compass/blob/stable/core/lib/compass/core/sass_extensions/functions/font_files.rb
+//
+// and several functions from the file:
+// https://github.com/Compass/compass/blob/stable/core/lib/compass/core/sass_extensions/functions/urls.rb
+// -----------------------------------------------------------------------------
+// Helper functions font-files and font-url for font-face mixins.
+// -----------------------------------------------------------------------------
+// use mixin this way:
+//
+// $font-path: "/public/fonts/roboto";
+// @include font-face(
+//   'Roboto',
+//   font_files("roboto.ttf", "truetype", "roboto.woff", "roboto.woff2"),     // or
+//   font_files("roboto.ttf", "roboto.woff", "roboto.woff2"),
+//   "roboto.eot",    // [$eot]
+//   normal,          // [$weight]
+//   normal           // [$style]
+// );
+// -----------------------------------------------------------------------------
+
+
+@function font-url($path) {
+  $font-path: 'fonts' !default;
+  @return url("#{$font-path}/#{$path}");
+}
+
+
+// -----------------------------------------------------------------------------
+// helper function to create a list of font files for the src attribute in @font-face.
+// In the global variable $font-path, you can specify the path to the folder
+// with fonts relative to style files, by default the path to the fonts is "fonts".
+//
+// Usage: font-files ('file-name-w-ext'[, 'format'][,'file-name-w-ext'[, 'format']]...).
+// If the font format is not specified, the function will add the format corresponding to the file extension.
+//
+// for best results use this order: woff, opentype / truetype, svg.
+// -----------------------------------------------------------------------------
+// function ported from Ruby.
+// -----------------------------------------------------------------------------
+@function font-files($font-files...) {
+  $font-path: 'fonts' !default;
+  // types of font formats from module Compass::Core::SassExtensions::Functions::FontFiles.
+  $font-types: (
+    'woff': "woff",
+    'woff2': "woff2",
+    'opentype': "otf",
+    // 'opentype': "opentype",
+    'truetype': "ttf",
+    // 'truetype': "truetype",
+    'svg': "svg",
+    'embedded-opentype': "eot"
+  );
 
+  $full: '';
+  // if the font format is specified after the font file name, skip the next iteration.
+  $skip-next: false;
+  // number of font files including font format.
+  $font-file-length: length($font-files);
+
+  @for $i from 1 through $font-file-length {
+    @if(not $skip-next) {
+      $font-file: nth($font-files, $i);
+      $font-file-next: if($i < $font-file-length, nth($font-files, $i + 1), false);
+
+      // add font url.
+      $full: $full + 'url("#{$font-path}/#{$font-file}")';
+
+      // add the font format if it is specified after the font file name.
+      @if $font-file-next and map-has-key($font-types, $font-file-next) {
+        $full: $full + ' format("#{$font-file-next}")';
+        $skip-next: true;
+      } @else {
+        // add a font format based on the font file name extension.
+        @each $type, $extension in $font-types {
+          $pos: str-index($font-file, '.' + $extension);
+
+          @if($font-file-next == $extension) {
+            $full: $full + ' format("#{$type}")';
+            $skip-next: true;
+          } @else if ($pos and (to-lower-case(str-slice($font-file, $pos + 1)) == $extension)) {
+            $full: $full + ' format("#{$type}")';
+          }
+        }
+      }
+    } @else {
+      $skip-next: false;
+    }
 
-// This mixin provides basic support for CSS3 properties and
-// their corresponding experimental CSS2 properties when
-// the implementations are identical except for the property
-// prefix.
-@mixin experimental($property, $value,
-  $moz      : $experimental-support-for-mozilla,
-  $webkit   : $experimental-support-for-webkit,
-  $o        : $experimental-support-for-opera,
-  $ms       : $experimental-support-for-microsoft,
-  $khtml    : $experimental-support-for-khtml,
-  $official : true
-) {
-  @if $webkit  and $experimental-support-for-webkit    { -webkit-#{$property} : $value; }
-  @if $khtml   and $experimental-support-for-khtml     {  -khtml-#{$property} : $value; }
-  @if $moz     and $experimental-support-for-mozilla   {    -moz-#{$property} : $value; }
-  @if $ms      and $experimental-support-for-microsoft {     -ms-#{$property} : $value; }
-  @if $o       and $experimental-support-for-opera     {      -o-#{$property} : $value; }
-  @if $official                                        {         #{$property} : $value; }
-}
+    @if (not $skip-next and $i != $font-file-length) { $full: $full + ', ';}
+  }
 
-// Same as experimental(), but for cases when the property is the same and the value is vendorized
-@mixin experimental-value($property, $value,
-  $moz      : $experimental-support-for-mozilla,
-  $webkit   : $experimental-support-for-webkit,
-  $o        : $experimental-support-for-opera,
-  $ms       : $experimental-support-for-microsoft,
-  $khtml    : $experimental-support-for-khtml,
-  $official : true
-) {
-  @if $webkit  and $experimental-support-for-webkit    { #{$property} : -webkit-#{$value}; }
-  @if $khtml   and $experimental-support-for-khtml     { #{$property} :  -khtml-#{$value}; }
-  @if $moz     and $experimental-support-for-mozilla   { #{$property} :    -moz-#{$value}; }
-  @if $ms      and $experimental-support-for-microsoft { #{$property} :     -ms-#{$value}; }
-  @if $o       and $experimental-support-for-opera     { #{$property} :      -o-#{$value}; }
-  @if $official                                        { #{$property} :         #{$value}; }
+  @return unquote($full);
 }
 
 
+
 // CSS Transitions
 // Currently only works in Webkit.
 //
@@ -8192,27 +9983,183 @@ $experimental-support-for-pie          : false !default;
   @if $official                                        { #{$property} :         #{$value}; }
 }
 
-
-// Webkit, IE10 and future support for [CSS Regions](http://dev.w3.org/csswg/css3-regions/)
+
+// Webkit, IE10 and future support for [CSS Regions](http://dev.w3.org/csswg/css3-regions/)
+//
+// $target is a value you use to link two regions of your css. Give the source of your content the flow-into property, and give your target container the flow-from property.
+//
+// For a visual explanation, see the diagrams at Chris Coyier's
+// [CSS-Tricks](http://css-tricks.com/content-folding/)
+
+@mixin flow-into($target) {
+  $target: unquote($target);
+  @include experimental(flow-into, $target,
+    not(-moz), -webkit, not(-o), -ms, not(-khtml), not official
+  );
+}
+
+@mixin flow-from($target) {
+  $target: unquote($target);
+  @include experimental(flow-from, $target,
+    not(-moz), -webkit, not(-o), -ms, not(-khtml), not official
+  );
+}
+// Usually compass hacks apply to both ie6 & 7 -- set this to false to disable support for both.
+$legacy-support-for-ie: true !default;
+
+// Setting this to false will result in smaller output, but no support for ie6 hacks
+$legacy-support-for-ie6: $legacy-support-for-ie !default;
+
+// Setting this to false will result in smaller output, but no support for ie7 hacks
+$legacy-support-for-ie7: $legacy-support-for-ie !default;
+
+// Setting this to false will result in smaller output, but no support for legacy ie8 hacks
+$legacy-support-for-ie8: $legacy-support-for-ie !default;
+
+// @private
+// The user can simply set $legacy-support-for-ie and 6, 7, and 8 will be set accordingly,
+// But in case the user set each of those explicitly, we need to sync the value of
+// this combined variable.
+$legacy-support-for-ie: $legacy-support-for-ie6 or $legacy-support-for-ie7 or $legacy-support-for-ie8;
+
+// Whether to output legacy support for mozilla.
+// Usually this means hacks to support Firefox 3.6 or earlier.
+$legacy-support-for-mozilla: true;
+
+// Support for mozilla in experimental css3 properties (-moz).
+$experimental-support-for-mozilla      : true !default;
+// Support for webkit in experimental css3 properties (-webkit).
+$experimental-support-for-webkit       : true !default;
+// Support for webkit's original (non-standard) gradient syntax.
+$support-for-original-webkit-gradients : true !default;
+// Support for opera in experimental css3 properties (-o).
+$experimental-support-for-opera        : true !default;
+// Support for microsoft in experimental css3 properties (-ms).
+$experimental-support-for-microsoft    : true !default;
+// Support for khtml in experimental css3 properties (-khtml).
+$experimental-support-for-khtml        : false !default;
+// Support for svg in experimental css3 properties.
+// Setting this to true might add significant size to your
+// generated stylesheets.
+$experimental-support-for-svg          : false !default;
+// Support for CSS PIE in experimental css3 properties (-pie).
+$experimental-support-for-pie          : false !default;
+
+
+// This mixin provides basic support for CSS3 properties and
+// their corresponding experimental CSS2 properties when
+// the implementations are identical except for the property
+// prefix.
+@mixin experimental($property, $value,
+  $moz      : $experimental-support-for-mozilla,
+  $webkit   : $experimental-support-for-webkit,
+  $o        : $experimental-support-for-opera,
+  $ms       : $experimental-support-for-microsoft,
+  $khtml    : $experimental-support-for-khtml,
+  $official : true
+) {
+  @if $webkit  and $experimental-support-for-webkit    { -webkit-#{$property} : $value; }
+  @if $khtml   and $experimental-support-for-khtml     {  -khtml-#{$property} : $value; }
+  @if $moz     and $experimental-support-for-mozilla   {    -moz-#{$property} : $value; }
+  @if $ms      and $experimental-support-for-microsoft {     -ms-#{$property} : $value; }
+  @if $o       and $experimental-support-for-opera     {      -o-#{$property} : $value; }
+  @if $official                                        {         #{$property} : $value; }
+}
+
+// Same as experimental(), but for cases when the property is the same and the value is vendorized
+@mixin experimental-value($property, $value,
+  $moz      : $experimental-support-for-mozilla,
+  $webkit   : $experimental-support-for-webkit,
+  $o        : $experimental-support-for-opera,
+  $ms       : $experimental-support-for-microsoft,
+  $khtml    : $experimental-support-for-khtml,
+  $official : true
+) {
+  @if $webkit  and $experimental-support-for-webkit    { #{$property} : -webkit-#{$value}; }
+  @if $khtml   and $experimental-support-for-khtml     { #{$property} :  -khtml-#{$value}; }
+  @if $moz     and $experimental-support-for-mozilla   { #{$property} :    -moz-#{$value}; }
+  @if $ms      and $experimental-support-for-microsoft { #{$property} :     -ms-#{$value}; }
+  @if $o       and $experimental-support-for-opera     { #{$property} :      -o-#{$value}; }
+  @if $official                                        { #{$property} :         #{$value}; }
+}
+
+
+// Mixins to support specific CSS Text Level 3 elements
+//
+//
+//
+// Mixin for word-break properties
+// http://www.w3.org/css3-text/#word-break
+// * legal values for $type : normal, keep-all, break-all
+//
+// Example:
+//    p.wordBreak {@include word-break(break-all);}
+//
+// Which generates:
+//    p.wordBreak {
+//      -ms-word-break: break-all;
+//      word-break: break-all;
+//      word-break: break-word;}
+//
+@mixin word-break($value: normal){
+  @if $value == break-all {
+    //Most browsers handle the break-all case the same...
+    @include experimental(word-break, $value,
+      not(-moz), not(-webkit), not(-o), -ms, not(-khtml), official
+    );
+    //Webkit handles break-all differently... as break-word
+    @include experimental(word-break, break-word,
+      not(-moz), not(-webkit), not(-o), not(-ms), not(-khtml), official
+    );
+  }
+  @else {
+    @include experimental(word-break, $value,
+      not(-moz), not(-webkit), not(-o), -ms, not(-khtml), official
+    );
+  }
+}
+
+// Mixin for the hyphens property
 //
-// $target is a value you use to link two regions of your css. Give the source of your content the flow-into property, and give your target container the flow-from property.
+// W3C specification: http://www.w3.org/TR/css3-text/#hyphens
+// * legal values for $type : auto, manual, none
 //
-// For a visual explanation, see the diagrams at Chris Coyier's
-// [CSS-Tricks](http://css-tricks.com/content-folding/)
-
-@mixin flow-into($target) {
-  $target: unquote($target);
-  @include experimental(flow-into, $target,
-    not(-moz), -webkit, not(-o), -ms, not(-khtml), not official
+// Example:
+//  p {
+//    @include hyphens(auto);}
+// Which generates:
+//  p {
+//    -moz-hyphens: auto;
+//    -webkit-hyphens: auto;
+//    hyphens: auto;}
+//
+@mixin hyphens($value: auto){
+  @include experimental(hyphens, $value,
+    -moz, -webkit, not(-o), not(-ms), not(-khtml), official
   );
 }
 
-@mixin flow-from($target) {
-  $target: unquote($target);
-  @include experimental(flow-from, $target,
-    not(-moz), -webkit, not(-o), -ms, not(-khtml), not official
-  );
+// Mixin for x-browser hyphenation based on @auchenberg's post:
+// Removes the need for the <wbr/> HTML tag
+// http://blog.kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/
+//
+//  Example:
+//  div {@include hyphenation;}
+//
+//  Which generates:
+//    div {
+//      -ms-word-break: break-all;
+//      word-break: break-all;
+//      word-break: break-word;
+//      -moz-hyphens: auto;
+//      -webkit-hyphens: auto;
+//      hyphens: auto;}
+//
+@mixin hyphenation{
+  @include word-break(break-all);
+  @include hyphens;
 }
+
 // Usually compass hacks apply to both ie6 & 7 -- set this to false to disable support for both.
 $legacy-support-for-ie: true !default;
 
@@ -8292,163 +10239,377 @@ $experimental-support-for-pie          : false !default;
   @if $official                                        { #{$property} :         #{$value}; }
 }
 
-
-// Mixins to support specific CSS Text Level 3 elements
-//
 //
+// A partial implementation of the Ruby list functions from Compass:
+// https://github.com/Compass/compass/blob/stable/lib/compass/sass_extensions/functions/lists.rb
 //
-// Mixin for word-break properties
-// http://www.w3.org/css3-text/#word-break
-// * legal values for $type : normal, keep-all, break-all
-//
-// Example:
-//    p.wordBreak {@include word-break(break-all);}
+
+
+// compact is part of libsass
+
+@function -compass-nth($list, $place) {
+  // Yep, Sass-lists are 1-indexed.
+  @if $place == "first" {
+    $place: 1;
+  }
+  @if $place == "last" {
+    $place: length($list);
+  }
+  @return nth($list, $place);
+}
+
+// compass_list can't be implemented in sass script
+
+@function -compass-space-list($item1, $item2:null, $item3:null, $item4:null, $item5:null, $item6:null, $item7:null, $item8:null, $item9:null) {
+  $items: ();
+  // Support for polymorphism.
+  @if type-of($item1) == 'list' {
+    // Passing a single array of properties.
+    $items: $item1;
+  } @else {
+    $items: $item1 $item2 $item3 $item4 $item5 $item6 $item7 $item8 $item9;
+  }
+
+  $full: first-value-of($items);
+
+  @for $i from 2 through length($items) {
+    $item: nth($items, $i);
+    @if $item != null {
+      $full: $full $item;
+    }
+  }
+
+  @return $full;
+}
+
+@function -compass-list-size($list) {
+  @return length($list);
+}
+
+@function -compass-slice($list, $start, $end: false) {
+  @if $end == false {
+    $end: length($list);
+  }
+  $full: nth($list, $start);
+  @for $i from $start + 1 through $end {
+    $full: $full, nth($list, $i);
+  }
+  @return $full;
+}
+
+@function reject($list, $reject1, $reject2:null, $reject3:null, $reject4:null, $reject5:null, $reject6:null, $reject7:null, $reject8:null, $reject9:null) {
+  $rejects: $reject1, $reject2, $reject3, $reject4, $reject5, $reject6, $reject7, $reject8, $reject9;
+
+  $full: false;
+  @each $item in $list {
+    @if index($rejects, $item) {}
+    @else {
+      @if $full {
+        $full: $full, $item;
+      }
+      @else {
+        $full: $item;
+      }
+    }
+  }
+  @return $full;
+}
+
+@function first-value-of($list) {
+  @return nth($list, 1);
+}
+
+@function compact($vars...) {
+  $separator: list-separator($vars);
+  $list: ();
+  @each $var in $vars {
+      @if $var {
+          $list: append($list, $var, $separator);
+      }
+  }
+  @return $list;
+}
+
 //
-// Which generates:
-//    p.wordBreak {
-//      -ms-word-break: break-all;
-//      word-break: break-all;
-//      word-break: break-word;}
+// A partial implementation of the Ruby cross browser support functions from Compass:
+// https://github.com/Compass/compass/blob/stable/lib/compass/sass_extensions/functions/cross_browser_support.rb
 //
-@mixin word-break($value: normal){
-  @if $value == break-all {
-    //Most browsers handle the break-all case the same...
-    @include experimental(word-break, $value,
-      not(-moz), not(-webkit), not(-o), -ms, not(-khtml), official
-    );
-    //Webkit handles break-all differently... as break-word
-    @include experimental(word-break, break-word,
-      not(-moz), not(-webkit), not(-o), not(-ms), not(-khtml), official
-    );
+
+@function prefixed($prefix, $property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {
+  $properties: $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9;
+  $prefixed: false;
+  @each $item in $properties {
+    @if type-of($item) == 'string' {
+      $prefixed: $prefixed or str-index($item, 'url') != 1 and str-index($item, 'rgb') != 1 and str-index($item, '#') != 1;
+    } @else if type-of($item) == 'color' {
+    } @else if $item != null {
+      $prefixed: true;
+    }
   }
-  @else {
-    @include experimental(word-break, $value,
-      not(-moz), not(-webkit), not(-o), -ms, not(-khtml), official
-    );
+  @return $prefixed;
+}
+
+@function prefix($prefix, $property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {
+  $properties: "";
+
+  // Support for polymorphism.
+  @if type-of($property1) == 'list' {
+    // Passing a single array of properties.
+    $properties: $property1;
+  } @else {
+    // Passing multiple properties.
+    $properties: $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9;
+  }
+
+  $props: false;
+  @each $item in $properties {
+    @if $item == null {}
+    @else {
+      @if prefixed($prefix, $item) {
+        $item: #{$prefix}-#{$item};
+      }
+      @if $props {
+        $props: $props, $item;
+      }
+      @else {
+        $props: $item;
+      }
+    }
+  }
+  @return $props;
+}
+
+@function -svg($property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {
+  @return prefix('-svg', $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9);
+}
+
+@function -owg($property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {
+  @return prefix('-owg', $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9);
+}
+
+@function -webkit($property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {
+  @return prefix('-webkit', $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9);
+}
+
+@function -moz($property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {
+  @return prefix('-moz', $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9);
+}
+
+@function -o($property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {
+  @return prefix('-o', $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9);
+}
+
+@function -pie($property1, $property2:null, $property3:null, $property4:null, $property5:null, $property6:null, $property7:null, $property8:null, $property9:null) {
+  @return prefix('-pie', $property1, $property2, $property3, $property4, $property5, $property6, $property7, $property8, $property9);
+}
+
+// 
+// A partial implementation of the Ruby gradient support functions from Compass:
+// https://github.com/Compass/compass/blob/v0.12.2/lib/compass/sass_extensions/functions/gradient_support.rb
+// 
+
+@function color-stops($item1, $item2:null, $item3:null, $item4:null, $item5:null, $item6:null, $item7:null, $item8:null, $item9:null) {
+  $items: $item2, $item3, $item4, $item5, $item6, $item7, $item8, $item9;
+  $full: $item1;
+  @each $item in $items {
+    @if $item != null {
+      $full: $full, $item;
+    }    
   }
+  @return $full;
 }
+// 
+// A partial implementation of the Ruby constants functions from Compass:
+// https://github.com/Compass/compass/blob/stable/lib/compass/sass_extensions/functions/constants.rb
+// 
 
-// Mixin for the hyphens property
-//
-// W3C specification: http://www.w3.org/TR/css3-text/#hyphens
-// * legal values for $type : auto, manual, none
-//
-// Example:
-//  p {
-//    @include hyphens(auto);}
-// Which generates:
-//  p {
-//    -moz-hyphens: auto;
-//    -webkit-hyphens: auto;
-//    hyphens: auto;}
-//
-@mixin hyphens($value: auto){
-  @include experimental(hyphens, $value,
-    -moz, -webkit, not(-o), not(-ms), not(-khtml), official
-  );
+@function opposite-position($from) {
+    @if ($from == top) {
+        @return bottom;
+    } @else if ($from == bottom) {
+        @return top;
+    } @else if ($from == left) {
+        @return right;
+    } @else if ($from == right) {
+        @return left;
+    } @else if ($from == center) {
+        @return center;
+    }
 }
 
-// Mixin for x-browser hyphenation based on @auchenberg's post:
-// Removes the need for the <wbr/> HTML tag
-// http://blog.kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/
-//
-//  Example:
-//  div {@include hyphenation;}
-//
-//  Which generates:
-//    div {
-//      -ms-word-break: break-all;
-//      word-break: break-all;
-//      word-break: break-word;
-//      -moz-hyphens: auto;
-//      -webkit-hyphens: auto;
-//      hyphens: auto;}
+// 
+// A partial implementation of the Ruby display functions from Compass:
+// https://github.com/Compass/compass/blob/stable/core/lib/compass/core/sass_extensions/functions/display.rb
+// 
+
+@function elements-of-type($type){
+    @if ($type == block){
+        @return address, article, aside, blockquote, center, dir, div, dd, details, dl, dt, fieldset, figcaption, figure, form, footer, frameset, h1, h2, h3, h4, h5, h6, hr, header, hgroup, isindex, main, menu, nav, noframes, noscript, ol, p, pre, section, summary, ul;
+    } @else if ($type == inline){
+        @return a, abbr, acronym, audio, b, basefont, bdo, big, br, canvas, cite, code, command, datalist, dfn, em, embed, font, i, img, input, keygen, kbd, label, mark, meter, output, progress, q, rp, rt, ruby, s, samp, select, small, span, strike, strong, sub, sup, textarea, time, tt, u, var, video, wbr;
+    } @else if ($type == inline-block){
+        @return img;
+    } @else if ($type == table){
+        @return table;
+    } @else if ($type == list-item){
+        @return li;
+    } @else if ($type == table-row-group){
+        @return tbody;
+    } @else if ($type == table-header-group){
+        @return thead;
+    } @else if ($type == table-footer-group){
+        @return tfoot;
+    } @else if ($type == table-row){
+        @return tr;
+    } @else if ($type == table-cell){
+        @return th, td;
+    } @else if ($type == html5-block){
+        @return article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary;
+    } @else if ($type == html5-inline){
+        @return audio, canvas, command, datalist, embed, keygen, mark, meter, output, progress, rp, rt, ruby, time, video, wbr;
+    } @else if ($type == html5){
+        @return article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, main, mark, menu, meter, nav, output, progress, rp, rt, ruby, section, summary, time, video, wbr;
+    } @else if ($type == text-input){
+        @return input, textarea;
+    }
+}
+
+// 
+// A partial implementation of the Ruby colors functions from Compass:
+// https://github.com/Compass/compass/blob/stable/core/lib/compass/core/sass_extensions/functions/colors.rb
 //
-@mixin hyphenation{
-  @include word-break(break-all);
-  @include hyphens;
+
+// a genericized version of lighten/darken so that negative values can be used.
+@function adjust-lightness($color, $amount) {
+    @return adjust-color($color, $lightness: $amount);
 }
 
-// Usually compass hacks apply to both ie6 & 7 -- set this to false to disable support for both.
-$legacy-support-for-ie: true !default;
+// Scales a color's lightness by some percentage.
+// If the amount is negative, the color is scaled darker, if positive, it is scaled lighter.
+// This will never return a pure light or dark color unless the amount is 100%.
+@function scale-lightness($color, $amount) {
+    @return scale-color($color, $lightness: $amount);
+}
 
-// Setting this to false will result in smaller output, but no support for ie6 hacks
-$legacy-support-for-ie6: $legacy-support-for-ie !default;
+// a genericized version of saturate/desaturate so that negative values can be used.
+@function adjust-saturation($color, $amount) {
+    @return adjust-color($color, $saturation: $amount);
+}
 
-// Setting this to false will result in smaller output, but no support for ie7 hacks
-$legacy-support-for-ie7: $legacy-support-for-ie !default;
+// Scales a color's saturation by some percentage.
+// If the amount is negative, the color is desaturated, if positive, it is saturated.
+// This will never return a pure saturated or desaturated color unless the amount is 100%.
+@function scale-saturation($color, $amount) {
+    @return scale-color($color, $saturation: $amount);
+}
 
-// Setting this to false will result in smaller output, but no support for legacy ie8 hacks
-$legacy-support-for-ie8: $legacy-support-for-ie !default;
+@function shade($color, $percentage) {
+    @return mix(#000000, $color, $percentage);
+}
 
-// @private
-// The user can simply set $legacy-support-for-ie and 6, 7, and 8 will be set accordingly,
-// But in case the user set each of those explicitly, we need to sync the value of
-// this combined variable.
-$legacy-support-for-ie: $legacy-support-for-ie6 or $legacy-support-for-ie7 or $legacy-support-for-ie8;
+@function tint($color, $percentage) {
+    @return mix(#ffffff, $color, $percentage);
+}
 
-// Whether to output legacy support for mozilla.
-// Usually this means hacks to support Firefox 3.6 or earlier.
-$legacy-support-for-mozilla: true;
 
-// Support for mozilla in experimental css3 properties (-moz).
-$experimental-support-for-mozilla      : true !default;
-// Support for webkit in experimental css3 properties (-webkit).
-$experimental-support-for-webkit       : true !default;
-// Support for webkit's original (non-standard) gradient syntax.
-$support-for-original-webkit-gradients : true !default;
-// Support for opera in experimental css3 properties (-o).
-$experimental-support-for-opera        : true !default;
-// Support for microsoft in experimental css3 properties (-ms).
-$experimental-support-for-microsoft    : true !default;
-// Support for khtml in experimental css3 properties (-khtml).
-$experimental-support-for-khtml        : false !default;
-// Support for svg in experimental css3 properties.
-// Setting this to true might add significant size to your
-// generated stylesheets.
-$experimental-support-for-svg          : false !default;
-// Support for CSS PIE in experimental css3 properties (-pie).
-$experimental-support-for-pie          : false !default;
+//
+// A partial implementation of the Ruby fonts functions from Compass:
+// https://github.com/Compass/compass/blob/stable/core/lib/compass/core/sass_extensions/functions/font_files.rb
+//
+// and several functions from the file:
+// https://github.com/Compass/compass/blob/stable/core/lib/compass/core/sass_extensions/functions/urls.rb
+// -----------------------------------------------------------------------------
+// Helper functions font-files and font-url for font-face mixins.
+// -----------------------------------------------------------------------------
+// use mixin this way:
+//
+// $font-path: "/public/fonts/roboto";
+// @include font-face(
+//   'Roboto',
+//   font_files("roboto.ttf", "truetype", "roboto.woff", "roboto.woff2"),     // or
+//   font_files("roboto.ttf", "roboto.woff", "roboto.woff2"),
+//   "roboto.eot",    // [$eot]
+//   normal,          // [$weight]
+//   normal           // [$style]
+// );
+// -----------------------------------------------------------------------------
+
+
+@function font-url($path) {
+  $font-path: 'fonts' !default;
+  @return url("#{$font-path}/#{$path}");
+}
+
+
+// -----------------------------------------------------------------------------
+// helper function to create a list of font files for the src attribute in @font-face.
+// In the global variable $font-path, you can specify the path to the folder
+// with fonts relative to style files, by default the path to the fonts is "fonts".
+//
+// Usage: font-files ('file-name-w-ext'[, 'format'][,'file-name-w-ext'[, 'format']]...).
+// If the font format is not specified, the function will add the format corresponding to the file extension.
+//
+// for best results use this order: woff, opentype / truetype, svg.
+// -----------------------------------------------------------------------------
+// function ported from Ruby.
+// -----------------------------------------------------------------------------
+@function font-files($font-files...) {
+  $font-path: 'fonts' !default;
+  // types of font formats from module Compass::Core::SassExtensions::Functions::FontFiles.
+  $font-types: (
+    'woff': "woff",
+    'woff2': "woff2",
+    'opentype': "otf",
+    // 'opentype': "opentype",
+    'truetype': "ttf",
+    // 'truetype': "truetype",
+    'svg': "svg",
+    'embedded-opentype': "eot"
+  );
 
+  $full: '';
+  // if the font format is specified after the font file name, skip the next iteration.
+  $skip-next: false;
+  // number of font files including font format.
+  $font-file-length: length($font-files);
+
+  @for $i from 1 through $font-file-length {
+    @if(not $skip-next) {
+      $font-file: nth($font-files, $i);
+      $font-file-next: if($i < $font-file-length, nth($font-files, $i + 1), false);
+
+      // add font url.
+      $full: $full + 'url("#{$font-path}/#{$font-file}")';
+
+      // add the font format if it is specified after the font file name.
+      @if $font-file-next and map-has-key($font-types, $font-file-next) {
+        $full: $full + ' format("#{$font-file-next}")';
+        $skip-next: true;
+      } @else {
+        // add a font format based on the font file name extension.
+        @each $type, $extension in $font-types {
+          $pos: str-index($font-file, '.' + $extension);
+
+          @if($font-file-next == $extension) {
+            $full: $full + ' format("#{$type}")';
+            $skip-next: true;
+          } @else if ($pos and (to-lower-case(str-slice($font-file, $pos + 1)) == $extension)) {
+            $full: $full + ' format("#{$type}")';
+          }
+        }
+      }
+    } @else {
+      $skip-next: false;
+    }
 
-// This mixin provides basic support for CSS3 properties and
-// their corresponding experimental CSS2 properties when
-// the implementations are identical except for the property
-// prefix.
-@mixin experimental($property, $value,
-  $moz      : $experimental-support-for-mozilla,
-  $webkit   : $experimental-support-for-webkit,
-  $o        : $experimental-support-for-opera,
-  $ms       : $experimental-support-for-microsoft,
-  $khtml    : $experimental-support-for-khtml,
-  $official : true
-) {
-  @if $webkit  and $experimental-support-for-webkit    { -webkit-#{$property} : $value; }
-  @if $khtml   and $experimental-support-for-khtml     {  -khtml-#{$property} : $value; }
-  @if $moz     and $experimental-support-for-mozilla   {    -moz-#{$property} : $value; }
-  @if $ms      and $experimental-support-for-microsoft {     -ms-#{$property} : $value; }
-  @if $o       and $experimental-support-for-opera     {      -o-#{$property} : $value; }
-  @if $official                                        {         #{$property} : $value; }
-}
+    @if (not $skip-next and $i != $font-file-length) { $full: $full + ', ';}
+  }
 
-// Same as experimental(), but for cases when the property is the same and the value is vendorized
-@mixin experimental-value($property, $value,
-  $moz      : $experimental-support-for-mozilla,
-  $webkit   : $experimental-support-for-webkit,
-  $o        : $experimental-support-for-opera,
-  $ms       : $experimental-support-for-microsoft,
-  $khtml    : $experimental-support-for-khtml,
-  $official : true
-) {
-  @if $webkit  and $experimental-support-for-webkit    { #{$property} : -webkit-#{$value}; }
-  @if $khtml   and $experimental-support-for-khtml     { #{$property} :  -khtml-#{$value}; }
-  @if $moz     and $experimental-support-for-mozilla   { #{$property} :    -moz-#{$value}; }
-  @if $ms      and $experimental-support-for-microsoft { #{$property} :     -ms-#{$value}; }
-  @if $o       and $experimental-support-for-opera     { #{$property} :      -o-#{$value}; }
-  @if $official                                        { #{$property} :         #{$value}; }
+  @return unquote($full);
 }
 
 
+
 // Provides cross-browser support for the upcoming (?) css3 filter property.
 //
 // Each filter argument should adhere to the standard css3 syntax for the
@@ -8876,165 +11037,165 @@ $experimental-support-for-pie          : false !default;
   @include flexbox((align-content: $align-content));
 }
 
- //import required by _mixins
-// Modules
-// Layout Change Breakpoints
-
-$breakpoint-small: 481px;
-$breakpoint-medium: 641px;
-$breakpoint-xmedium: 860px;
-$breakpoint-large: 1025px;
-$breakpoint-xlarge: 1200px;
-$breakpoint-xxlarge: 1441px;
-$breakpoint-xxxlarge: 1921px;
-
-// Font size variables
-$font-size-extra-large:	  32px;
-$font-size-large:				  18px;
-$font-size-md-large:		  16px;
-$font-size-md:            14px;
-$font-size-small:				  12px;
-$font-size-mini:				  10px;
-
-$font-weight-thin: 		    100;
-$font-weight-light: 	    300;
-$font-weight-normal: 	    400;
-$font-weight-medium: 	    500;
-$font-weight-bold: 		    700;
-
-// Colors
-$color-primary: #4D4CFC;
-$color-primary-light: lighten($color-primary, 15%);
-$color-primary-dark: darken($color-primary, 20%);
-$color-primary-darker: desaturate(darken($color-primary, 40%), 60%);
-
-$color-secondary: #AFB3C0;
-$color-secondary-light: lighten($color-secondary, 15%);
-$color-secondary-dark: darken($color-secondary, 15%);
-
-$color-success: #45DFB0;
-$color-success-light: lighten($color-success, 15%);
-$color-success-dark: darken($color-success, 15%);
-
-$color-alert: #FF425E;
-$color-alert-light: lighten($color-alert, 15%);
-$color-alert-dark: darken($color-alert, 15%);
-
-$color-warning: #FFFF00;
-$color-warning-light: lighten($color-warning, 15%);
-$color-warning-dark: darken($color-warning, 15%);
-
-$color-dark-gray: #666666;
-
-$color-text: #434448;
-$color-text: #434448;
-$default-color-hover: #EFF0F3;
-
-$default-background-color-app: #F4F4F5;
-$list-divider-color: #dadce2;
-
-/*#############################################################################
-# FUNCTIONS
-#############################################################################*/
-
-
-// ===========================================================================
-
-// This is the default html and body font-size for the base rem value.
-$rem-base: 16px !default;
-
-// STRIP UNIT
-// It strips the unit of measure and returns it
-@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;
-}
-
-// REM CALC
-@function rem-calc($values, $base-value: $rem-base) {
-  $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;
-}
-
-// ===========================================================================
-
-/*#############################################################################
-# MIXINS
-#############################################################################*/
-
-// Media Queries
-
-@mixin responsive($break-point) {
-
-  @media only screen and (min-width: rem-calc($break-point)) { @content; }
-
-}
-
-@mixin responsive-min-max($min-break-point, $max-break-point) {
-
-  @media only screen and (min-width: rem-calc($min-break-point)) and (max-width: rem-calc($max-break-point)) { @content; }
-
-}
-
-@mixin responsive-max($break-point) {
-
-  @media only screen and (max-width: rem-calc($break-point)) { @content; }
-
-}
-
-@mixin responsive-height($break-point) {
-
-  @media only screen and (min-height: rem-calc($break-point)) { @content; }
-
-}
-
-@mixin responsive-max-height($break-point) {
-
-  @media only screen and (max-height: rem-calc($break-point)) { @content; }
-
-}
-
-
-// ------------------------------------------------
-// Retina display support
-/* Example:
-div.logo {
-  background: url("logo.png") no-repeat;
-  @include background-retina("logo2x.png", 100px, 25px);
-}
-*/
-@mixin background-retina($image, $width, $height) {
-  @media
-  only screen and (-webkit-min-device-pixel-ratio: 1.3),
-  only screen and (-o-min-device-pixel-ratio: 2.6/2),
-  only screen and (min--moz-device-pixel-ratio: 1.3),
-  only screen and (min-device-pixel-ratio: 1.3),
-  only screen and (min-resolution: 1.3dppx) {
-    background-image: url($image);
-    background-size: $width $height;
-  }
-}
-
-
-/*#############################################################################
-# PLACEHOLDERS
-#############################################################################*/
-
-
-%transition-all {
-  @include transition(all 0.2s cubic-bezier(.7, 0, .175, 1) 0s);
-}
-
+ //import required by _mixins
+// Modules
+// Layout Change Breakpoints
+
+$breakpoint-small: 481px;
+$breakpoint-medium: 641px;
+$breakpoint-xmedium: 860px;
+$breakpoint-large: 1025px;
+$breakpoint-xlarge: 1200px;
+$breakpoint-xxlarge: 1441px;
+$breakpoint-xxxlarge: 1921px;
+
+// Font size variables
+$font-size-extra-large:	  32px;
+$font-size-large:				  18px;
+$font-size-md-large:		  16px;
+$font-size-md:            14px;
+$font-size-small:				  12px;
+$font-size-mini:				  10px;
+
+$font-weight-thin: 		    100;
+$font-weight-light: 	    300;
+$font-weight-normal: 	    400;
+$font-weight-medium: 	    500;
+$font-weight-bold: 		    700;
+
+// Colors
+$color-primary: #4D4CFC;
+$color-primary-light: lighten($color-primary, 15%);
+$color-primary-dark: darken($color-primary, 20%);
+$color-primary-darker: desaturate(darken($color-primary, 40%), 60%);
+
+$color-secondary: #AFB3C0;
+$color-secondary-light: lighten($color-secondary, 15%);
+$color-secondary-dark: darken($color-secondary, 15%);
+
+$color-success: #45DFB0;
+$color-success-light: lighten($color-success, 15%);
+$color-success-dark: darken($color-success, 15%);
+
+$color-alert: #FF425E;
+$color-alert-light: lighten($color-alert, 15%);
+$color-alert-dark: darken($color-alert, 15%);
+
+$color-warning: #FFFF00;
+$color-warning-light: lighten($color-warning, 15%);
+$color-warning-dark: darken($color-warning, 15%);
+
+$color-dark-gray: #666666;
+
+$color-text: #434448;
+$color-text: #434448;
+$default-color-hover: #EFF0F3;
+
+$default-background-color-app: #F4F4F5;
+$list-divider-color: #dadce2;
+
+/*#############################################################################
+# FUNCTIONS
+#############################################################################*/
+
+
+// ===========================================================================
+
+// This is the default html and body font-size for the base rem value.
+$rem-base: 16px !default;
+
+// STRIP UNIT
+// It strips the unit of measure and returns it
+@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;
+}
+
+// REM CALC
+@function rem-calc($values, $base-value: $rem-base) {
+  $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;
+}
+
+// ===========================================================================
+
+/*#############################################################################
+# MIXINS
+#############################################################################*/
+
+// Media Queries
+
+@mixin responsive($break-point) {
+
+  @media only screen and (min-width: rem-calc($break-point)) { @content; }
+
+}
+
+@mixin responsive-min-max($min-break-point, $max-break-point) {
+
+  @media only screen and (min-width: rem-calc($min-break-point)) and (max-width: rem-calc($max-break-point)) { @content; }
+
+}
+
+@mixin responsive-max($break-point) {
+
+  @media only screen and (max-width: rem-calc($break-point)) { @content; }
+
+}
+
+@mixin responsive-height($break-point) {
+
+  @media only screen and (min-height: rem-calc($break-point)) { @content; }
+
+}
+
+@mixin responsive-max-height($break-point) {
+
+  @media only screen and (max-height: rem-calc($break-point)) { @content; }
+
+}
+
+
+// ------------------------------------------------
+// Retina display support
+/* Example:
+div.logo {
+  background: url("logo.png") no-repeat;
+  @include background-retina("logo2x.png", 100px, 25px);
+}
+*/
+@mixin background-retina($image, $width, $height) {
+  @media
+  only screen and (-webkit-min-device-pixel-ratio: 1.3),
+  only screen and (-o-min-device-pixel-ratio: 2.6/2),
+  only screen and (min--moz-device-pixel-ratio: 1.3),
+  only screen and (min-device-pixel-ratio: 1.3),
+  only screen and (min-resolution: 1.3dppx) {
+    background-image: url($image);
+    background-size: $width $height;
+  }
+}
+
+
+/*#############################################################################
+# PLACEHOLDERS
+#############################################################################*/
+
+
+%transition-all {
+  @include transition(all 0.2s cubic-bezier(.7, 0, .175, 1) 0s);
+}
+