diff --git a/Gulpfile.js b/Gulpfile.js
index 8a46bca..f3f81eb 100644
--- a/Gulpfile.js
+++ b/Gulpfile.js
@@ -20,6 +20,7 @@ gulp.task('style', function () {
     'use strict';
     gulp.src(config.scssDir + '/*.scss')
         .pipe(sass())
+        .on('error', sass.logError)
         .pipe(autoprefixer({browsers: ['last 2 versions', 'ie >= 9']}))
         .pipe(cssnano())
         .pipe(gulp.dest(config.cssDir));
@@ -29,6 +30,7 @@ gulp.task('style-dev', function () {
     gulp.src(config.scssDir + '/*.scss')
         .pipe(sourcemaps.init())
         .pipe(sass({outputStyle: "expanded"}))
+        .on('error', sass.logError)
         .pipe(autoprefixer({browsers: ['last 2 versions', 'ie >= 9']}))
         .pipe(sourcemaps.write('maps'))
         .pipe(gulp.dest(config.cssDir));
diff --git a/bower.json b/bower.json
index 55b2444..3d5e696 100644
--- a/bower.json
+++ b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "hoisin.scss",
-  "version": "0.9.14",
+  "version": "0.9.15",
   "description": "A simple responsive mini framework to kick start your project.",
   "main": ["scss/styles.scss", "scss/responsive.scss"],
   "keywords": [
diff --git a/css/ie.css b/css/ie.css
index 25daa08..aa8b399 100644
--- a/css/ie.css
+++ b/css/ie.css
@@ -2,7 +2,7 @@
  * Hoisin.scss
  * CSS responsive framework boilerplate
  * Create your own grids, plugin anything
- * Version: 0.9.14
+ * Version: 0.9.15
  * Created by: Cyber-Duck Ltd <info@cyber-duck.co.uk>,
  *             Ramon Lapenta <me@ramonlapenta.com>
  *
diff --git a/css/maps/ie.css.map b/css/maps/ie.css.map
index 3a986e8..943764b 100644
--- a/css/maps/ie.css.map
+++ b/css/maps/ie.css.map
@@ -1 +1 @@
-{"version":3,"sources":["_version.scss","ie.scss"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;ACJH;;;;;;;;;;EAUI,eAAe;CAClB;;AAID;EACI,eAAe;EACf,aAAY;CACf;;AAGG;EACI,YAAY;EACZ,eAAiB;EACjB,aAAkB;CACrB;;AAJD;EACI,YAAY;EACZ,eAAiB;EACjB,aAAkB;CACrB;;AAJD;EACI,YAAY;EACZ,eAAiB;EACjB,aAAkB;CACrB;;AAJD;EACI,YAAY;EACZ,eAAiB;EACjB,aAAkB;CACrB;;AAJD;EACI,YAAY;EACZ,eAAiB;EACjB,aAAkB;CACrB;;AAJD;EACI,YAAY;EACZ,eAAiB;EACjB,aAAkB;CACrB;;AAJD;EACI,YAAY;EACZ,eAAiB;EACjB,aAAkB;CACrB;;AAJD;EACI,YAAY;EACZ,eAAiB;EACjB,aAAkB;CACrB;;AAJD;EACI,YAAY;EACZ,eAAiB;EACjB,aAAkB;CACrB;;AAJD;EACI,YAAY;EACZ,eAAiB;EACjB,aAAkB;CACrB;;AAJD;EACI,YAAY;EACZ,eAAiB;EACjB,aAAkB;CACrB;;AAID;EACI,mBAAyB;CAC5B;;AAFD;EACI,oBAAyB;CAC5B;;AAFD;EACI,oBAAyB;CAC5B;;AAFD;EACI,oBAAyB;CAC5B;;AAFD;EACI,oBAAyB;CAC5B;;AAFD;EACI,oBAAyB;CAC5B;;AAFD;EACI,oBAAyB;CAC5B;;AAFD;EACI,oBAAyB;CAC5B;;AAFD;EACI,oBAAyB;CAC5B;;AAFD;EACI,oBAAyB;CAC5B;;AAFD;EACI,oBAAyB;CAC5B;;AAID;EACI,oBAA0B;CAC7B;;AAFD;EACI,qBAA0B;CAC7B;;AAFD;EACI,qBAA0B;CAC7B;;AAFD;EACI,qBAA0B;CAC7B;;AAFD;EACI,qBAA0B;CAC7B;;AAFD;EACI,qBAA0B;CAC7B;;AAFD;EACI,qBAA0B;CAC7B;;AAFD;EACI,qBAA0B;CAC7B;;AAFD;EACI,qBAA0B;CAC7B;;AAFD;EACI,qBAA0B;CAC7B;;AAFD;EACI,qBAA0B;CAC7B;;AAIL;EACI,aAAa;EACb,eAAiB;CACpB;;AAED;EACI,eAAe;CAClB;;AAED;EACI,gBAAgB;CACnB;;AAED;EACI,YAAY;CACf;;AAED;EACI,YAAY;EACZ,eAAe;CAClB","file":"ie.css","sourcesContent":["/*\n * Hoisin.scss\n * CSS responsive framework boilerplate\n * Create your own grids, plugin anything\n * Version: 0.9.14\n * Created by: Cyber-Duck Ltd <info@cyber-duck.co.uk>,\n *             Ramon Lapenta <me@ramonlapenta.com>\n *\n */\n ","@import 'version';\n@import 'vars';\n@import 'mixins';\n\narticle, \naside, \ndetails, \nfigcaption, \nfigure, \nfooter, \nheader, \nhgroup, \nnav, \nsection { \n    display: block; \n}\n\n$wrap: $col-width * $col-qty + $gutter * ($col-qty - 1);\n\n.container {\n    margin: 0 auto;\n    width: $wrap + $gutter;\n}\n\n@for $i from 2 through $col-qty {\n    .col#{$i} {\n        float: left;\n        margin: 0 $gutter/2;\n        width: ($col-width * $i) + ($gutter * $i) - $gutter;\n    }\n}\n\n@for $i from 1 through ($col-qty - 1) {\n    .pre#{$i} {\n        padding-left: ($col-width * $i) + ($gutter * $i);\n    }\n}\n\n@for $i from 1 through ($col-qty - 1) {\n    .suf#{$i} {\n        padding-right: ($col-width * $i) + ($gutter * $i);\n    }\n}\n\n// Grid utilities\n.colr {\n    float: right;\n    margin: 0 $gutter/2;\n}\n\n.alpha {\n    margin-left: 0;\n}\n\n.omega {\n    margin-right: 0;\n}\n\n.clear {\n    clear: both;\n}\n\n.center {\n    float: none;\n    margin: 0 auto;\n}\n"],"sourceRoot":"/source/"}
\ No newline at end of file
+{"version":3,"sources":["_version.scss","ie.scss"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;ACJH;;;;;;;;;;EAUI,eAAe;CAClB;;AAID;EACI,eAAe;EACf,aAAY;CACf;;AAGG;EACI,YAAY;EACZ,eAAiB;EACjB,aAAkB;CACrB;;AAJD;EACI,YAAY;EACZ,eAAiB;EACjB,aAAkB;CACrB;;AAJD;EACI,YAAY;EACZ,eAAiB;EACjB,aAAkB;CACrB;;AAJD;EACI,YAAY;EACZ,eAAiB;EACjB,aAAkB;CACrB;;AAJD;EACI,YAAY;EACZ,eAAiB;EACjB,aAAkB;CACrB;;AAJD;EACI,YAAY;EACZ,eAAiB;EACjB,aAAkB;CACrB;;AAJD;EACI,YAAY;EACZ,eAAiB;EACjB,aAAkB;CACrB;;AAJD;EACI,YAAY;EACZ,eAAiB;EACjB,aAAkB;CACrB;;AAJD;EACI,YAAY;EACZ,eAAiB;EACjB,aAAkB;CACrB;;AAJD;EACI,YAAY;EACZ,eAAiB;EACjB,aAAkB;CACrB;;AAJD;EACI,YAAY;EACZ,eAAiB;EACjB,aAAkB;CACrB;;AAID;EACI,mBAAyB;CAC5B;;AAFD;EACI,oBAAyB;CAC5B;;AAFD;EACI,oBAAyB;CAC5B;;AAFD;EACI,oBAAyB;CAC5B;;AAFD;EACI,oBAAyB;CAC5B;;AAFD;EACI,oBAAyB;CAC5B;;AAFD;EACI,oBAAyB;CAC5B;;AAFD;EACI,oBAAyB;CAC5B;;AAFD;EACI,oBAAyB;CAC5B;;AAFD;EACI,oBAAyB;CAC5B;;AAFD;EACI,oBAAyB;CAC5B;;AAID;EACI,oBAA0B;CAC7B;;AAFD;EACI,qBAA0B;CAC7B;;AAFD;EACI,qBAA0B;CAC7B;;AAFD;EACI,qBAA0B;CAC7B;;AAFD;EACI,qBAA0B;CAC7B;;AAFD;EACI,qBAA0B;CAC7B;;AAFD;EACI,qBAA0B;CAC7B;;AAFD;EACI,qBAA0B;CAC7B;;AAFD;EACI,qBAA0B;CAC7B;;AAFD;EACI,qBAA0B;CAC7B;;AAFD;EACI,qBAA0B;CAC7B;;AAIL;EACI,aAAa;EACb,eAAiB;CACpB;;AAED;EACI,eAAe;CAClB;;AAED;EACI,gBAAgB;CACnB;;AAED;EACI,YAAY;CACf;;AAED;EACI,YAAY;EACZ,eAAe;CAClB","file":"ie.css","sourcesContent":["/*\n * Hoisin.scss\n * CSS responsive framework boilerplate\n * Create your own grids, plugin anything\n * Version: 0.9.15\n * Created by: Cyber-Duck Ltd <info@cyber-duck.co.uk>,\n *             Ramon Lapenta <me@ramonlapenta.com>\n *\n */\n ","@import 'version';\n@import 'vars';\n@import 'mixins';\n\narticle, \naside, \ndetails, \nfigcaption, \nfigure, \nfooter, \nheader, \nhgroup, \nnav, \nsection { \n    display: block; \n}\n\n$wrap: $col-width * $col-qty + $gutter * ($col-qty - 1);\n\n.container {\n    margin: 0 auto;\n    width: $wrap + $gutter;\n}\n\n@for $i from 2 through $col-qty {\n    .col#{$i} {\n        float: left;\n        margin: 0 $gutter/2;\n        width: ($col-width * $i) + ($gutter * $i) - $gutter;\n    }\n}\n\n@for $i from 1 through ($col-qty - 1) {\n    .pre#{$i} {\n        padding-left: ($col-width * $i) + ($gutter * $i);\n    }\n}\n\n@for $i from 1 through ($col-qty - 1) {\n    .suf#{$i} {\n        padding-right: ($col-width * $i) + ($gutter * $i);\n    }\n}\n\n// Grid utilities\n.colr {\n    float: right;\n    margin: 0 $gutter/2;\n}\n\n.alpha {\n    margin-left: 0;\n}\n\n.omega {\n    margin-right: 0;\n}\n\n.clear {\n    clear: both;\n}\n\n.center {\n    float: none;\n    margin: 0 auto;\n}\n"],"sourceRoot":"/source/"}
\ No newline at end of file
diff --git a/css/maps/sample.css.map b/css/maps/sample.css.map
index 3821da9..45e078d 100644
--- a/css/maps/sample.css.map
+++ b/css/maps/sample.css.map
@@ -1 +1 @@
-{"version":3,"sources":["_version.scss","_grid.scss","l/_base.scss","sample.css","l/_xl.scss","m/_base.scss","s/_base.scss","components/_body.scss","_vars.scss","_functions.scss","components/_sample.scss","_mixins.scss"],"names":[],"mappings":"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","file":"sample.css","sourcesContent":["/*\n * Hoisin.scss\n * CSS responsive framework boilerplate\n * Create your own grids, plugin anything\n * Version: 0.9.14\n * Created by: Cyber-Duck Ltd <info@cyber-duck.co.uk>,\n *             Ramon Lapenta <me@ramonlapenta.com>\n *\n */\n ","@import 'vars';\n@import 'mixins';\n\n@media (min-width: $bp-l) {\n\n    @import 'l/base';\n\n}\n@media (min-width: $bp-xl) {\n\n    @import 'l/xl';\n\n}\n@media (min-width: $bp-m) and (max-width: ($bp-l - 1)) {\n\n    @import 'm/base';\n\n}\n@media (min-width: $bp-s) and (max-width: ($bp-m - 1)) {\n\n    @import 's/base';\n\n}\n","// * Large screens grid system\n// *\n\n// * Empty declaration as a base for all spans common styles\n%base-col {\n    float: left;\n    margin: 0 $gutter/2;\n}\n\n///* \n// * Cols\n// * Mixin to create the col spans using the previous empty % declaration\n// *\n// * @include cols;\n// */\n@mixin cols {\n    @for $i from 1 through $col-qty {\n        .col#{$i} { @extend %base-col; }\n    }\n}\n\n// Output the grid only if variable set to true\n@if ($include-grid) {\n\n    // * Define the size of the container using variables\n    $wrap: ($col-width * $col-qty) + $gutter * ($col-qty - 1);\n\n    .container {\n        margin: 0 auto;\n        width: $wrap + $gutter;\n\n        &:after {\n            clear: both;\n            content: '';\n            display: block;\n        }\n    }\n\n    // * Loop through the cols to generate size of nested containers\n    @for $i from 2 through $col-qty {\n        .col#{$i} > .container {\n            margin: 0 0 0 0 -($gutter/2);\n            width: ($col-width * $i) + ($gutter * $i);\n        }\n    }\n\n    // * Output all the spans common styles\n    @include cols;\n\n    // * Loop to generate each span \n    @for $i from 2 through $col-qty {\n        .col#{$i} {\n            width: ($col-width * $i) + ($gutter * $i) - $gutter;\n        }\n    }\n\n    @for $i from 1 through ($col-qty - 2) {\n        .pre#{$i} {\n            margin-left: ($col-width * $i) + ($gutter * $i) + ($gutter / 2);\n        }\n    }\n\n    @for $i from 1 through ($col-qty - 2) {\n        .suf#{$i} {\n            margin-right: ($col-width * $i) + ($gutter * $i);\n        }\n    }\n\n    // *\n    // * Additional grid utilities\n    // *\n\n    // * Force float a span to the right\n    .colr {\n        float: right;\n        margin: 0 $gutter/2;\n    }\n\n    // * Remove left margin from span\n    .alpha {\n        margin-left: 0;\n    }\n\n    // * Remove right margin from span\n    .omega {\n        margin-right: 0;\n    }\n\n    // * Clear helper\n    .clear {\n        clear: both;\n    }\n\n    // * center span in container\n    .center {\n        float: none;\n        margin: 0 auto;\n    }\n}\n","/*\n * Hoisin.scss\n * CSS responsive framework boilerplate\n * Create your own grids, plugin anything\n * Version: 0.9.14\n * Created by: Cyber-Duck Ltd <info@cyber-duck.co.uk>,\n *             Ramon Lapenta <me@ramonlapenta.com>\n *\n */\n@media (min-width: 1024px) {\n  .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {\n    float: left;\n    margin: 0 10px;\n  }\n  .container {\n    margin: 0 auto;\n    width: 960px;\n  }\n  .container:after {\n    clear: both;\n    content: '';\n    display: block;\n  }\n  .col2 > .container {\n    margin: 0 0 0 -10px;\n    width: 160px;\n  }\n  .col3 > .container {\n    margin: 0 0 0 -10px;\n    width: 240px;\n  }\n  .col4 > .container {\n    margin: 0 0 0 -10px;\n    width: 320px;\n  }\n  .col5 > .container {\n    margin: 0 0 0 -10px;\n    width: 400px;\n  }\n  .col6 > .container {\n    margin: 0 0 0 -10px;\n    width: 480px;\n  }\n  .col7 > .container {\n    margin: 0 0 0 -10px;\n    width: 560px;\n  }\n  .col8 > .container {\n    margin: 0 0 0 -10px;\n    width: 640px;\n  }\n  .col9 > .container {\n    margin: 0 0 0 -10px;\n    width: 720px;\n  }\n  .col10 > .container {\n    margin: 0 0 0 -10px;\n    width: 800px;\n  }\n  .col11 > .container {\n    margin: 0 0 0 -10px;\n    width: 880px;\n  }\n  .col12 > .container {\n    margin: 0 0 0 -10px;\n    width: 960px;\n  }\n  .col2 {\n    width: 140px;\n  }\n  .col3 {\n    width: 220px;\n  }\n  .col4 {\n    width: 300px;\n  }\n  .col5 {\n    width: 380px;\n  }\n  .col6 {\n    width: 460px;\n  }\n  .col7 {\n    width: 540px;\n  }\n  .col8 {\n    width: 620px;\n  }\n  .col9 {\n    width: 700px;\n  }\n  .col10 {\n    width: 780px;\n  }\n  .col11 {\n    width: 860px;\n  }\n  .col12 {\n    width: 940px;\n  }\n  .pre1 {\n    margin-left: 90px;\n  }\n  .pre2 {\n    margin-left: 170px;\n  }\n  .pre3 {\n    margin-left: 250px;\n  }\n  .pre4 {\n    margin-left: 330px;\n  }\n  .pre5 {\n    margin-left: 410px;\n  }\n  .pre6 {\n    margin-left: 490px;\n  }\n  .pre7 {\n    margin-left: 570px;\n  }\n  .pre8 {\n    margin-left: 650px;\n  }\n  .pre9 {\n    margin-left: 730px;\n  }\n  .pre10 {\n    margin-left: 810px;\n  }\n  .suf1 {\n    margin-right: 80px;\n  }\n  .suf2 {\n    margin-right: 160px;\n  }\n  .suf3 {\n    margin-right: 240px;\n  }\n  .suf4 {\n    margin-right: 320px;\n  }\n  .suf5 {\n    margin-right: 400px;\n  }\n  .suf6 {\n    margin-right: 480px;\n  }\n  .suf7 {\n    margin-right: 560px;\n  }\n  .suf8 {\n    margin-right: 640px;\n  }\n  .suf9 {\n    margin-right: 720px;\n  }\n  .suf10 {\n    margin-right: 800px;\n  }\n  .colr {\n    float: right;\n    margin: 0 10px;\n  }\n  .alpha {\n    margin-left: 0;\n  }\n  .omega {\n    margin-right: 0;\n  }\n  .clear {\n    clear: both;\n  }\n  .center {\n    float: none;\n    margin: 0 auto;\n  }\n}\n\n@media (min-width: 1360px) {\n  .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10 {\n    float: left;\n    margin: 0 15px;\n  }\n  .col12 {\n    margin: 0 15px;\n    width: 1170px;\n  }\n  .col2 {\n    width: 170px;\n  }\n  .col3 {\n    width: 270px;\n  }\n  .col4 {\n    width: 370px;\n  }\n  .col5 {\n    width: 470px;\n  }\n  .col6 {\n    width: 570px;\n  }\n  .col7 {\n    width: 670px;\n  }\n  .col8 {\n    width: 770px;\n  }\n  .col9 {\n    width: 870px;\n  }\n  .col10 {\n    width: 970px;\n  }\n  .col11 {\n    width: 1070px;\n  }\n  .pre1 {\n    margin-left: 115px;\n  }\n  .pre2 {\n    margin-left: 215px;\n  }\n  .pre3 {\n    margin-left: 315px;\n  }\n  .pre4 {\n    margin-left: 415px;\n  }\n  .pre5 {\n    margin-left: 515px;\n  }\n  .pre6 {\n    margin-left: 615px;\n  }\n  .pre7 {\n    margin-left: 715px;\n  }\n  .pre8 {\n    margin-left: 815px;\n  }\n  .pre9 {\n    margin-left: 915px;\n  }\n  .pre10 {\n    margin-left: 1015px;\n  }\n  .suf1 {\n    margin-right: 115px;\n  }\n  .suf2 {\n    margin-right: 215px;\n  }\n  .suf3 {\n    margin-right: 315px;\n  }\n  .suf4 {\n    margin-right: 415px;\n  }\n  .suf5 {\n    margin-right: 515px;\n  }\n  .suf6 {\n    margin-right: 615px;\n  }\n  .suf7 {\n    margin-right: 715px;\n  }\n  .suf8 {\n    margin-right: 815px;\n  }\n  .suf9 {\n    margin-right: 915px;\n  }\n  .suf10 {\n    margin-right: 1015px;\n  }\n  .container {\n    width: 1200px;\n  }\n  .col2 > .container {\n    margin: 0 0 0 -15px;\n    width: 200px;\n  }\n  .col3 > .container {\n    margin: 0 0 0 -15px;\n    width: 300px;\n  }\n  .col4 > .container {\n    margin: 0 0 0 -15px;\n    width: 400px;\n  }\n  .col5 > .container {\n    margin: 0 0 0 -15px;\n    width: 500px;\n  }\n  .col6 > .container {\n    margin: 0 0 0 -15px;\n    width: 600px;\n  }\n  .col7 > .container {\n    margin: 0 0 0 -15px;\n    width: 700px;\n  }\n  .col8 > .container {\n    margin: 0 0 0 -15px;\n    width: 800px;\n  }\n  .col9 > .container {\n    margin: 0 0 0 -15px;\n    width: 900px;\n  }\n  .col10 > .container {\n    margin: 0 0 0 -15px;\n    width: 1000px;\n  }\n  .col11 > .container {\n    margin: 0 0 0 -15px;\n    width: 1100px;\n  }\n  .col12 > .container {\n    margin: 0 0 0 -15px;\n    width: 1200px;\n  }\n  .colr {\n    float: right;\n    margin: 0 15px;\n  }\n  .alpha {\n    margin-left: 0;\n  }\n  .omega {\n    margin-right: 0;\n  }\n  .clear {\n    clear: both;\n  }\n  .center {\n    float: none;\n    margin: 0 auto;\n  }\n}\n\n@media (min-width: 680px) and (max-width: 1023px) {\n  .wrap {\n    overflow: hidden;\n    width: 100%;\n  }\n  .container {\n    width: 100%;\n    padding: 0 5px;\n    box-sizing: border-box;\n  }\n  .container::after {\n    clear: both;\n    content: '';\n    display: block;\n  }\n  .container .container {\n    width: 102%;\n    width: calc(100% + 20px);\n    margin-left: -10px;\n  }\n  .col12,\n  .col11,\n  .col10,\n  .col9,\n  .col8,\n  .col7 {\n    margin: 0;\n    padding: 0 5px;\n    width: 100%;\n    box-sizing: border-box;\n  }\n  .col6,\n  .col5,\n  .col4,\n  .col3 {\n    float: left;\n    margin: 0;\n    padding: 0 5px;\n    width: 50%;\n    box-sizing: border-box;\n  }\n  .col2 {\n    float: left;\n    margin: 0;\n    padding: 0 5px;\n    width: 33.33%;\n    box-sizing: border-box;\n  }\n  .m-full {\n    width: 100%;\n  }\n  .m-full.colr {\n    float: none;\n  }\n  .m-half {\n    float: left;\n    width: 50%;\n  }\n  .m-1_3 {\n    float: left;\n    width: 33.33%;\n  }\n  .m-2_3 {\n    float: left;\n    width: 66.66%;\n  }\n  .colr {\n    float: right;\n  }\n  .alpha {\n    margin-left: 0;\n  }\n  .omega {\n    margin-right: 0;\n  }\n  .clear {\n    clear: both;\n  }\n  .center {\n    float: none;\n    margin: 0 auto;\n  }\n}\n\n@media (min-width: 120px) and (max-width: 679px) {\n  .wrap {\n    overflow: hidden;\n    width: 100%;\n  }\n  .container {\n    width: 100%;\n    padding: 0 5px;\n    box-sizing: border-box;\n  }\n  .container:after {\n    clear: both;\n    content: '';\n    display: block;\n  }\n  .container .container {\n    width: 102%;\n    width: calc(100% + 20px);\n    margin-left: -10px;\n  }\n  .col12,\n  .col11,\n  .col10,\n  .col9,\n  .col8,\n  .col7,\n  .col6,\n  .col5,\n  .col4,\n  .col3 {\n    margin: 0;\n    padding: 0 5px;\n    width: 100%;\n    box-sizing: border-box;\n  }\n  .col2 {\n    float: left;\n    margin: 0;\n    padding: 0 5px;\n    width: 50%;\n    box-sizing: border-box;\n  }\n  .s-full {\n    float: none;\n    margin: 0;\n    padding: 0 5px;\n    width: 100%;\n    box-sizing: border-box;\n  }\n  .s-half {\n    float: left;\n    margin: 0;\n    padding: 0 5px;\n    width: 50%;\n    box-sizing: border-box;\n  }\n  .clear {\n    clear: both;\n  }\n}\n\nbody {\n  margin: 0;\n  padding: 0;\n  font-family: sans-serif;\n}\n\n.red {\n  color: red;\n}\n\n.red-light {\n  color: #ffb3b3;\n}\n\n.red-dark {\n  color: maroon;\n}\n\n@media (min-width: 1024px) {\n  body {\n    font-size: 18px;\n  }\n}\n\n@media (min-width: 680px) and (max-width: 1023px) {\n  body {\n    font-size: 16px;\n  }\n}\n\n@media (min-width: 120px) and (max-width: 679px) {\n  body {\n    font-size: 14px;\n  }\n}\n\nbody {\n  color: #666;\n  margin: 0;\n  padding: 50px 0;\n  font-family: \"Roboto Condensed\", sans-serif;\n  font-size: 18px;\n  font-weight: 300;\n  background: white;\n}\n\nh2 {\n  color: #d8531e;\n  font-weight: 300;\n  margin: 0;\n  font-size: 48px;\n  font-size: 48px;\n}\n\nh3 {\n  color: #333;\n  font-weight: 300;\n  margin: 0;\n  font-size: 36px;\n  line-height: 36px;\n  padding: 12px 0;\n}\n\np {\n  margin: 0 0 21px 0;\n}\n\na {\n  color: #d8531e;\n}\n\nsection {\n  margin-bottom: 50px;\n}\n\n.box {\n  margin: 0 0 10px 0;\n  padding: 10px;\n  background: #F5F5F5;\n}\n\n@media (min-width: 1024px) {\n  .box {\n    margin-bottom: 20px;\n    padding: 20px;\n  }\n}\n\n@media (min-width: 1360px) {\n  .box {\n    margin-bottom: 30px;\n    padding: 30px;\n  }\n}\n\n.box p {\n  margin: 0;\n}\n\n.code {\n  font-family: \"Courier New\", serif;\n  font-size: 14px;\n}\n\n.nesting {\n  background-color: #FFFFDF;\n  margin-bottom: 20px;\n}\n\n.nesting .nesting {\n  background-color: #FFE7DF;\n}\n\npre {\n  border: 1px solid #CCC;\n  background-color: #F9F9F9;\n  padding: 10px;\n  margin: 0;\n  overflow: auto;\n}\n\n@media (min-width: 1024px) {\n  .content {\n    float: left;\n    margin: 0 10px;\n    width: 620px;\n  }\n}\n\n@media (min-width: 1360px) {\n  .content {\n    margin: 0 15px;\n    width: 770px;\n  }\n}\n\n@media (min-width: 680px) and (max-width: 1023px) {\n  .content {\n    float: left;\n    padding: 0 5px;\n    width: 66.66%;\n    box-sizing: border-box;\n  }\n}\n\n@media (min-width: 680px) and (max-width: 1023px) {\n  .content {\n    float: left;\n    padding: 0 5px;\n    width: 66.66%;\n    box-sizing: border-box;\n  }\n}\n\n@media (min-width: 1024px) {\n  .sidebar {\n    float: right;\n    margin: 0 10px;\n    width: 300px;\n  }\n}\n\n@media (min-width: 1360px) {\n  .sidebar {\n    margin: 0 15px;\n    width: 370px;\n  }\n}\n\n@media (min-width: 680px) and (max-width: 1023px) {\n  .sidebar {\n    float: right;\n    padding: 0 5px;\n    width: 33.33%;\n    box-sizing: border-box;\n  }\n}\n\n@media (max-width: 680px) {\n  .sidebar {\n    padding: 0 5px;\n    box-sizing: border-box;\n  }\n}\n\n@media (max-width: 680px) {\n  .test {\n    padding: 0 5px;\n    box-sizing: border-box;\n  }\n}\n","// *\n// * Grid system\n// * Define the size of the container using extra large variables\n// *\n\n// * Generate a common style for all spans\n%base-xl-col {\n    float: left;\n    margin: 0 $xl-gutter/2;\n}\n\n///* \n// * Cols\n// * Mixin to create the col spans using the previous empty % declaration\n// *\n// * @include cols;\n// */\n@mixin cols {\n    @for $i from 1 to $col-qty - 1 {\n        .col#{$i} { @extend %base-xl-col; }\n    }\n}\n\n// Output the grid only if variable set to true\n@if ($include-grid) {\n    $wrap: $xl-col-width * 12 + $xl-gutter * 11;\n\n    // * Output the common span styles\n    @include cols;\n\n    // Define widths for each span\n    .col#{$col-qty} {\n        margin: 0 $xl-gutter/2; // Full width, doesn't need float\n        width: ($xl-col-width * $col-qty) + ($xl-gutter * $col-qty) - $xl-gutter;\n    }\n\n    @for $i from 2 to $col-qty {\n        .col#{$i} {\n            width: $xl-col-width * $i + $xl-gutter * $i - $xl-gutter;\n        }\n    }\n\n    @for $i from 1 through 10 {\n        .pre#{$i} {\n            margin-left: ($xl-col-width * $i) + ($xl-gutter * $i) + ($xl-gutter / 2);\n        }\n    }\n\n    @for $i from 1 through 10 {\n        .suf#{$i} {\n            margin-right: ($xl-col-width * $i) + ($xl-gutter * $i) + ($xl-gutter / 2);\n        }\n    }\n\n    .container {\n        width: $wrap + $xl-gutter;\n    }\n\n    @for $i from 2 through $col-qty {\n        .col#{$i} > .container {\n            margin: 0 0 0 0 -($xl-gutter/2);\n            width: ($xl-col-width * $i) + ($xl-gutter * $i);\n        }\n    }\n\n    // * Grid utilities\n    .colr {\n        float: right;\n        margin: 0 $xl-gutter/2;\n    }\n\n    .alpha {\n        margin-left: 0;\n    }\n\n    .omega {\n        margin-right: 0;\n    }\n\n    .clear {\n        clear: both;\n    }\n\n    .center {\n        float: none;\n        margin: 0 auto;\n    }\n}\n","// * Grid system\n// * Define the properties of the flexible container\n// *\n\n// Output the grid only if variable set to true\n@if ($include-grid) {\n    .wrap {\n        overflow: hidden;\n        width: 100%;\n    }\n\n    .container {\n        width: 100%;\n        padding: 0 ($gutter/4);\n        box-sizing: border-box;\n        \n        &::after {\n            clear: both;\n            content: '';\n            display: block;\n        }\n\n        .container {\n            width: 102%;\n            width: calc(100% + #{$gutter});\n            margin-left: -($gutter/2);\n        }\n    }\n\n    .col12, \n    .col11, \n    .col10, \n    .col9, \n    .col8, \n    .col7 {\n        margin: 0;\n        padding: 0 ($gutter/4);\n        width: 100%;\n        box-sizing: border-box;\n    }\n\n    .col6, \n    .col5, \n    .col4, \n    .col3 {\n        float: left;\n        margin: 0;\n        padding: 0 ($gutter/4);\n        width: 50%;\n        box-sizing: border-box;\n    }\n\n    .col2 {\n        float: left;\n        margin: 0;\n        padding: 0 ($gutter/4);\n        width: 33.33%;\n        box-sizing: border-box;\n    }\n\n    .m-full {\n        width: 100%;\n        &.colr {\n            float: none;\n        }\n    }\n\n    .m-half {\n        float: left;\n        width: 50%;\n    }\n\n    .m-1_3 {\n        float: left;\n        width: 33.33%;\n    }\n\n    .m-2_3 {\n        float: left;\n        width: 66.66%;\n    }\n\n    // * Additional grid utilities\n    .colr {\n        float: right;\n    }\n\n    .alpha {\n        margin-left: 0;\n    }\n\n    .omega {\n        margin-right: 0;\n    }\n\n    .clear {\n        clear: both;\n    }\n\n    .center {\n        float: none;\n        margin: 0 auto;\n    }\n}","// * Grid system\n// * Define the properties of the flexible container\n// *\n\n// Output the grid only if variable set to true\n@if ($include-grid) {\n    .wrap {\n        overflow: hidden;\n        width: 100%;\n    }\n\n    .container {\n        width: 100%;\n        padding: 0 ($gutter/4);\n        box-sizing: border-box;\n\n        &:after {\n            clear: both;\n            content: '';\n            display: block;\n        }\n        \n        .container {\n            width: 102%;\n            width: calc(100% + #{$gutter});\n            margin-left: -($gutter/2);\n        }\n    }\n\n    .col12, \n    .col11, \n    .col10, \n    .col9, \n    .col8, \n    .col7, \n    .col6, \n    .col5, \n    .col4, \n    .col3 {\n        margin: 0;\n        padding: 0 ($gutter/4);\n        width: 100%;\n        box-sizing: border-box;\n    }\n\n    .col2 {\n        float: left;\n        margin: 0;\n        padding: 0 ($gutter/4);\n        width: 50%;\n        box-sizing: border-box;\n    }\n\n    .s-full {\n        float: none;\n        margin: 0;\n        padding: 0 ($gutter/4);\n        width: 100%;\n        box-sizing: border-box;\n    }\n\n    .s-half {\n        float: left;\n        margin: 0;\n        padding: 0 ($gutter/4);\n        width: 50%;\n        box-sizing: border-box;\n    }\n\n    .clear {\n        clear: both;\n    }\n}\n","// Body\nbody {\n    margin: 0;\n    padding: 0;\n    font-family: $body-font;\n}\n$red: red;\n.red {\n    color: $red;\n}\n.red-light {\n    color: light($red, 70%);\n}\n.red-dark {\n    color: dark($red, 50%);\n}\n\n@media (min-width: $bp-l) {\n\n    body {\n        font-size: 18px;\n    }\n\n}\n@media (min-width: $bp-m) and (max-width: ($bp-l - 1)) {\n\n    body {\n        font-size: 16px;\n    }\n\n}\n@media (min-width: $bp-s) and (max-width: ($bp-m - 1)) {\n\n    body {\n        font-size: 14px;\n    }\n\n}","// Colours\n$highlight:                     #fa9200;\n\n$error:                         #f00;\n$error-bg:                      #ffe5e5;\n\n$success:                       #390;\n$success-bg:                    #eaf5e5;\n\n$info:                          #39f;\n$info-bg:                       #eaf5ff;\n\n$warning:                       #ff0;\n$warning-bg:                    #ffffe5;\n\n$black:                         #000;\n$white:                         #fff;\n$text:                          #000;\n$title:                         #000;\n\n\n// Grid\n$include-grid:                  true;\n$col-qty:                       12;\n$col-width:                     60px;\n$gutter:                        20px;\n\n// Large desktop grid\n$xl-col-width:                  70px;\n$xl-gutter:                     30px;\n\n\n// Breakpoints\n$bp-xl:                 \t\t1360px;\n$bp-l:              \t\t\t1024px;\n$bp-m:             \t\t\t\t680px;\n$bp-s:              \t\t\t120px;\n\n\n// Paths\n$img:                           '../img/';\n$sprite:                        '../img/sprite.png';\n$fonts:                         '../fonts/';\n\n    \n// Typography\n$body-font:                     sans-serif;\n$title-font:                    serif;\n","///*\n// * Hoisin.scss\n// * Functions library\n// */\n\n\n\n///* \n// * Darken colors\n// * \n// * This function uses mix to have a more granular control of the darkening.\n// * @param $color ($variable | #HEX);\n// * @param $value (percentage);\n// *\n// * dark($blue, 20%);\n// */\n@function dark($color, $value: 10%) {\n    @return mix($black, $color, $value);\n}\n\n\n\n///* \n// * Lighten colors\n// * \n// * This function uses mix to have a more granular control of the darkening.\n// * @param $color ($variable | #HEX);\n// * @param $value (percentage);\n// *\n// * light($blue, 20%);\n// */\n@function light($color, $value: 10%) {\n    @return mix($white, $color, $value);\n}\n\n\n\n\n///* \n// * Flexible Span \n// * \n// * This function generates a width value based on the parameter given, using \n// * details from the medium size grid.\n// *\n// * @param $width ($width);\n// *\n// * span-fw('m-2_3');\n// */\n@function span-fw($width) {\n    @if $width == 'm-2_3' {\n        @return 66.66%;\n    } @else if $width == 'm-half' {\n        @return 50%;\n    } @else if $width == 'm-1_3' {\n        @return 33.33%;\n    } @else if $width == 'm-4_4' {\n        @return 25%;\n    } @else {\n        @return 100%;\n    }\n}\n\n\n\n\n///* \n// * Span\n// * \n// * This function generates a width value based on the parameter given, using \n// * details from the $gutter and $col global variables.\n// *\n// * @param $cols ($cols);\n// *\n// * span(8);\n// */\n@function span($cols: 12) {\n    @return ($cols * $col-width) + (($cols - 1) * $gutter);\n}\n\n\n\n///* \n// * Span XL\n// * \n// * This function generates a width value based on the parameter given, using \n// * details from the $xl-gutter and $xl-col global variables.\n// *\n// * @param $cols ($cols);\n// *\n// * span-xl(8);\n// */\n@function span-xl($cols: 12) {\n    @return ($cols * $xl-col-width) + (($cols - 1) * $xl-gutter);\n}\n","// Component name\nbody {\n    color: #666;\n    margin: 0;\n    padding: 50px 0;\n    font-family: \"Roboto Condensed\", sans-serif;\n    font-size: 18px;\n    font-weight: 300;\n    background: white;\n}\nh2 {\n    color: #d8531e;\n    font-weight: 300;\n    margin: 0;\n    font-size: 48px;\n    font-size: 48px;\n}\nh3 {\n    color: #333;\n    font-weight: 300;\n    margin: 0;\n    font-size: 36px;\n    line-height: 36px;\n    padding: 12px 0; \n}\np {\n    margin: 0 0 21px 0;\n}\na {\n    color: #d8531e;\n}\nsection {\n    margin-bottom: 50px;\n}\n.box {\n    margin: 0 0 ($gutter / 2) 0;\n    padding: ($gutter / 2);\n    background: #F5F5F5;\n\n    @include respond-to(l) {\n        margin-bottom: $gutter;\n        padding: $gutter;\n    }\n    @include respond-to(xl) {\n        margin-bottom: $xl-gutter;\n        padding: $xl-gutter;\n    }\n\n    p {\n        margin: 0;\n    }\n}\n\n.code {\n    font-family: \"Courier New\", serif;\n    font-size: 14px;\n}\n.nesting {\n    background-color: #FFFFDF;\n    margin-bottom: 20px;\n    .nesting {\n        background-color: #FFE7DF;\n    }\n}\n\npre {\n    border: 1px solid #CCC;\n    background-color: #F9F9F9;\n    padding: 10px;\n    margin: 0;\n    overflow: auto;\n}\n\n.content {\n    @include respond-to(l) {\n        float: left;\n        margin: 0 ($gutter / 2);\n        width: span(8);\n    }\n    @include respond-to(xl) {       \n        margin: 0 ($xl-gutter / 2);\n        width: span-xl(8);\n    }\n    @include respond-to(m) {\n        float: left;\n        padding: 0 ($gutter / 4);\n        width: span-fw(m-2_3);\n        box-sizing: border-box;\n    }\n    @include respond-to(m) {\n        float: left;\n        padding: 0 ($gutter / 4);\n        width: span-fw(m-2_3);\n        box-sizing: border-box;\n    }\n}\n\n.sidebar {\n    @include respond-to(l) {\n        float: right;\n        margin: 0 ($gutter / 2);\n        width: span(4);\n    }\n    @include respond-to(xl) {\n        margin: 0 ($xl-gutter / 2);\n        width: span-xl(4);\n    }\n    @include respond-to(m) {\n        float: right;\n        padding: 0 ($gutter / 4);\n        width: span-fw(m-1_3);\n        box-sizing: border-box;\n    }\n    @include respond-to(s) {\n        padding: 0 ($gutter / 4);\n        box-sizing: border-box;\n    }\n}\n\n@include respond-to(s) {\n    .test {\n        padding: 0 ($gutter / 4);\n        box-sizing: border-box;\n    }\n}\n","///*\n// * Hoisin.scss\n// * Mixins library\n// *\n// * Vendor prefixes are handled by gulp-autoprefixer.\n// * All prefixer mixins will be removed in future versions\n// */\n\n\n\n///* \n// * Respond to\n// * @param $breakpoint (s | m | m-up | m-down | l | xl);\n// *\n// * @include respond-to(m) {\n// *      property: value;\n// * }\n// */\n@mixin respond-to($bp) {\n    @if $bp == \"s\" {\n        @media (max-width: $bp-m) {\n            @content;\n        }\n    }\n    @else if $bp == \"m\" {\n        @media (min-width: $bp-m) and (max-width: ($bp-l - 1)) {\n            @content;\n        }\n    }\n    @else if $bp == \"m-up\" {\n        @media (min-width: $bp-m) {\n            @content;\n        }\n    }\n    @else if $bp == \"m-down\" {\n        @media (max-width: ($bp-l - 1)) {\n            @content;\n        }\n    }\n    @else if $bp == \"l\" {\n        @media (min-width: $bp-l) {\n            @content;\n        }\n    }\n    @else if $bp == \"xl\" {\n        @media (min-width: $bp-xl) {\n            @content;\n        }\n    }\n}\n\n\n\n///* \n// * Box shadow\n// * @param $value ($h-offset $v-offset $blur $spread $color | inset | initial | inherit);\n// *\n// * @include box-shadow(2px 2px 2px 2px rgba(0,0,0,0.2));\n// */\n@mixin box-shadow($value: 0 0 4px 0 rgba(0, 0, 0, .5)) {\n    @include prefixer(box-shadow, $value, webkit);\n}\n\n\n\n///* \n// * Two colors vertical linear gradient\n// * @param $value ($initial-color);\n// * @param $value ($final-color);\n// *\n// * @include gradients(#FF0, #F00);\n// */\n@mixin gradients($first, $second) {\n    background-color: $first;\n    background-image: -o-linear-gradient(top, $first 0%, $second 100%);\n    background-image: -ms-linear-gradient(top, $first 0%, $second 100%);\n    background-image: -moz-linear-gradient(top, $first, $second);\n    background-image: -webkit-gradient(linear, left top, left bottom, from($first), to($second));\n    background-image: linear-gradient(top, $first 0%, $second 100%);\n}\n\n\n\n///* \n// * Box model (defaults to border-box)\n// * @param $type ($box-model);\n// *\n// * @include box-sizing;\n// */\n@mixin box-sizing($type: border-box) {\n    @include prefixer(box-sizing, $type, moz webkit);\n}\n\n\n\n// *\n// * Opacity (Old IE disabled by default)\n// * @param $opac ($opacity);\n// * @param $ie (true);\n// *\n// * @include opacity(0.7, true);\n// */\n@mixin opacity($opac, $ie: false) {\n    @if $ie {\n        -ms-filter: alpha(opacity=$opac * 100);\n        filter: alpha(opacity=$opac * 100);\n    }\n    opacity: $opac;\n}\n\n\n\n///*\n// * Transition (defaults to .15 sec)\n// * @param $value ($speed | $property | $easing);\n// *\n// * @include transition(height 200ms ease-out);\n// */\n@mixin transition($value: .15s) {\n    @include prefixer(transition, $value, webkit);\n}\n\n\n\n///* \n// * Rotate (Origin defaults to center of element)\n// * @param $deg ($degrees);\n// * @param $orig ($h-origin $v-origin);\n// *\n// * @include rotate(45deg);\n// */\n@mixin rotate($deg, $orig: 50% 50%) {\n    @include prefixer(transform, rotate(#{$deg}), webkit ms);\n    @if $orig != 50% and $orig != (50% 50%) \n    and $orig != center and $orig != (center center) {\n        @include prefixer(transform-origin, $orig, webkit ms);\n    }\n}\n\n\n\n///*\n// * Translate \n// * @param $hdist ($distance);\n// * @param $vdist ($distance);\n// *\n// * @include translate(20px, 20px);\n// */\n@mixin translate($hdist: 0, $vdist: 0) {\n    @include prefixer(transform, translate(#{$hdist}, #{$vdist}), webkit ms);\n}\n\n\n\n///* \n// * Animation (defaults to .15 sec)\n// * @param $options ($animation-name $duration | $iteration);\n// *\n// * @include animation(myanimation 2s 3);\n// */\n@mixin animation($options) {\n    @include prefixer(animation, $options);\n}\n\n\n\n///*\n// * Placeholder text color\n// * @param $color ($color);\n// *\n// * @include placeholder(#999);\n// */\n@mixin placeholder($color) {\n    &::-webkit-input-placeholder {\n        color: $color;\n    }\n\n    &::-moz-placeholder {\n        color: $color; \n    }\n\n    &::-ms-input-placeholder {\n        color: $color;\n    }\n}\n\n\n///*\n// * Disallow user selection\n// *\n// * @include noselect;\n// */\n@mixin noselect {\n    -webkit-touch-callout: none;\n    @include prefixer(user-select, none, webkit ms);\n}\n\n\n\n///*\n// * Prefixer\n// * @param $property ($name);\n// * @param $value ($value);\n// * @param $prefixes (webkit | moz | ms | o);\n// *\n// * @include prefixer(animation, $options);\n// */\n@mixin prefixer($property, $value, $prefixes: webkit moz ms o) {\n    @each $prefix in $prefixes {\n        #{'-' + $prefix + '-' + $property}: #{$value};\n    }\n    #{$property}: #{$value};\n}\n"],"sourceRoot":"/source/"}
\ No newline at end of file
+{"version":3,"sources":["_version.scss","_grid.scss","l/_base.scss","sample.css","l/_xl.scss","m/_base.scss","s/_base.scss","components/_body.scss","_vars.scss","_functions.scss","components/_sample.scss","_mixins.scss"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;ACLH;ECCA;IACI,YAAY;IACZ,eAAiB;GACpB;EAoBG;IACI,eAAe;IACf,aAAY;GAOf;EATD;IAKQ,YAAY;IACZ,YAAY;IACZ,eAAe;GAClB;EAKD;IACI,oBAAe;IACf,aAAkB;GACrB;EAHD;IACI,oBAAe;IACf,aAAkB;GACrB;EAHD;IACI,oBAAe;IACf,aAAkB;GACrB;EAHD;IACI,oBAAe;IACf,aAAkB;GACrB;EAHD;IACI,oBAAe;IACf,aAAkB;GACrB;EAHD;IACI,oBAAe;IACf,aAAkB;GACrB;EAHD;IACI,oBAAe;IACf,aAAkB;GACrB;EAHD;IACI,oBAAe;IACf,aAAkB;GACrB;EAHD;IACI,oBAAe;IACf,aAAkB;GACrB;EAHD;IACI,oBAAe;IACf,aAAkB;GACrB;EAHD;IACI,oBAAe;IACf,aAAkB;GACrB;EAQD;IACI,aAAkB;GACrB;EAFD;IACI,aAAkB;GACrB;EAFD;IACI,aAAkB;GACrB;EAFD;IACI,aAAkB;GACrB;EAFD;IACI,aAAkB;GACrB;EAFD;IACI,aAAkB;GACrB;EAFD;IACI,aAAkB;GACrB;EAFD;IACI,aAAkB;GACrB;EAFD;IACI,aAAkB;GACrB;EAFD;IACI,aAAkB;GACrB;EAFD;IACI,aAAkB;GACrB;EAID;IACI,kBAAwB;GAC3B;EAFD;IACI,mBAAwB;GAC3B;EAFD;IACI,mBAAwB;GAC3B;EAFD;IACI,mBAAwB;GAC3B;EAFD;IACI,mBAAwB;GAC3B;EAFD;IACI,mBAAwB;GAC3B;EAFD;IACI,mBAAwB;GAC3B;EAFD;IACI,mBAAwB;GAC3B;EAFD;IACI,mBAAwB;GAC3B;EAFD;IACI,mBAAwB;GAC3B;EAID;IACI,mBAAyB;GAC5B;EAFD;IACI,oBAAyB;GAC5B;EAFD;IACI,oBAAyB;GAC5B;EAFD;IACI,oBAAyB;GAC5B;EAFD;IACI,oBAAyB;GAC5B;EAFD;IACI,oBAAyB;GAC5B;EAFD;IACI,oBAAyB;GAC5B;EAFD;IACI,oBAAyB;GAC5B;EAFD;IACI,oBAAyB;GAC5B;EAFD;IACI,oBAAyB;GAC5B;EAQL;IACI,aAAa;IACb,eAAiB;GACpB;EAGD;IACI,eAAe;GAClB;EAGD;IACI,gBAAgB;GACnB;EAGD;IACI,YAAY;GACf;EAGD;IACI,YAAY;IACZ,eAAe;GAClB;CCgFJ;;AFzKD;EGFA;IACI,YAAY;IACZ,eAAoB;GACvB;EAsBG;IACI,eAAoB;IACpB,cAAqB;GACxB;EAGG;IACI,aAAoB;GACvB;EAFD;IACI,aAAoB;GACvB;EAFD;IACI,aAAoB;GACvB;EAFD;IACI,aAAoB;GACvB;EAFD;IACI,aAAoB;GACvB;EAFD;IACI,aAAoB;GACvB;EAFD;IACI,aAAoB;GACvB;EAFD;IACI,aAAoB;GACvB;EAFD;IACI,aAAoB;GACvB;EAFD;IACI,cAAoB;GACvB;EAID;IACI,mBAA2B;GAC9B;EAFD;IACI,mBAA2B;GAC9B;EAFD;IACI,mBAA2B;GAC9B;EAFD;IACI,mBAA2B;GAC9B;EAFD;IACI,mBAA2B;GAC9B;EAFD;IACI,mBAA2B;GAC9B;EAFD;IACI,mBAA2B;GAC9B;EAFD;IACI,mBAA2B;GAC9B;EAFD;IACI,mBAA2B;GAC9B;EAFD;IACI,oBAA2B;GAC9B;EAID;IACI,oBAA4B;GAC/B;EAFD;IACI,oBAA4B;GAC/B;EAFD;IACI,oBAA4B;GAC/B;EAFD;IACI,oBAA4B;GAC/B;EAFD;IACI,oBAA4B;GAC/B;EAFD;IACI,oBAA4B;GAC/B;EAFD;IACI,oBAA4B;GAC/B;EAFD;IACI,oBAA4B;GAC/B;EAFD;IACI,oBAA4B;GAC/B;EAFD;IACI,qBAA4B;GAC/B;EAGL;IACI,cAAY;GACf;EAGG;IACI,oBAAe;IACf,aAAqB;GACxB;EAHD;IACI,oBAAe;IACf,aAAqB;GACxB;EAHD;IACI,oBAAe;IACf,aAAqB;GACxB;EAHD;IACI,oBAAe;IACf,aAAqB;GACxB;EAHD;IACI,oBAAe;IACf,aAAqB;GACxB;EAHD;IACI,oBAAe;IACf,aAAqB;GACxB;EAHD;IACI,oBAAe;IACf,aAAqB;GACxB;EAHD;IACI,oBAAe;IACf,aAAqB;GACxB;EAHD;IACI,oBAAe;IACf,cAAqB;GACxB;EAHD;IACI,oBAAe;IACf,cAAqB;GACxB;EAHD;IACI,oBAAe;IACf,cAAqB;GACxB;EAIL;IACI,aAAa;IACb,eAAoB;GACvB;EAED;IACI,eAAe;GAClB;EAED;IACI,gBAAgB;GACnB;EAED;IACI,YAAY;GACf;EAED;IACI,YAAY;IACZ,eAAe;GAClB;CDgQJ;;AFzUD;EIPI;IACI,iBAAiB;IACjB,YAAY;GACf;EAED;IACI,YAAY;IACZ,eAAmB;IACnB,uBAAuB;GAa1B;EAhBD;IAMQ,YAAY;IACZ,YAAY;IACZ,eAAe;GAClB;EATL;IAYQ,YAAY;IACZ,yBAAW;IACX,mBAAsB;GACzB;EAGL;;;;;;IAMI,UAAU;IACV,eAAmB;IACnB,YAAY;IACZ,uBAAuB;GAC1B;EAED;;;;IAII,YAAY;IACZ,UAAU;IACV,eAAmB;IACnB,WAAW;IACX,uBAAuB;GAC1B;EAED;IACI,YAAY;IACZ,UAAU;IACV,eAAmB;IACnB,cAAc;IACd,uBAAuB;GAC1B;EAED;IACI,YAAY;GAIf;EALD;IAGQ,YAAY;GACf;EAGL;IACI,YAAY;IACZ,WAAW;GACd;EAED;IACI,YAAY;IACZ,cAAc;GACjB;EAED;IACI,YAAY;IACZ,cAAc;GACjB;EAGD;IACI,aAAa;GAChB;EAED;IACI,eAAe;GAClB;EAED;IACI,gBAAgB;GACnB;EAED;IACI,YAAY;GACf;EAED;IACI,YAAY;IACZ,eAAe;GAClB;CFoUJ;;AFxZD;EKZI;IACI,iBAAiB;IACjB,YAAY;GACf;EAED;IACI,YAAY;IACZ,eAAmB;IACnB,uBAAuB;GAa1B;EAhBD;IAMQ,YAAY;IACZ,YAAY;IACZ,eAAe;GAClB;EATL;IAYQ,YAAY;IACZ,yBAAW;IACX,mBAAsB;GACzB;EAGL;;;;;;;;;;IAUI,UAAU;IACV,eAAmB;IACnB,YAAY;IACZ,uBAAuB;GAC1B;EAED;IACI,YAAY;IACZ,UAAU;IACV,eAAmB;IACnB,WAAW;IACX,uBAAuB;GAC1B;EAED;IACI,YAAY;IACZ,UAAU;IACV,eAAmB;IACnB,YAAY;IACZ,uBAAuB;GAC1B;EAED;IACI,YAAY;IACZ,UAAU;IACV,eAAmB;IACnB,WAAW;IACX,uBAAuB;GAC1B;EAED;IACI,YAAY;GACf;CHgaJ;;AIteD;EACI,UAAU;EACV,WAAW;EACX,wBC0CsC;CDzCzC;;AAED;EACI,WAFK;CAGR;;AACD;EACI,eEqBW;CFpBd;;AACD;EACI,cEGW;CFFd;;AAED;EAEI;IACI,gBAAgB;GACnB;CJ0eJ;;AIveD;EAEI;IACI,gBAAgB;GACnB;CJyeJ;;AIteD;EAEI;IACI,gBAAgB;GACnB;CJweJ;;AO1gBD;EACI,YAAY;EACZ,UAAU;EACV,gBAAgB;EAChB,4CAA4C;EAC5C,gBAAgB;EAChB,iBAAiB;EACjB,kBAAkB;CACrB;;AACD;EACI,eAAe;EACf,iBAAiB;EACjB,UAAU;EACV,gBAAgB;EAChB,gBAAgB;CACnB;;AACD;EACI,YAAY;EACZ,iBAAiB;EACjB,UAAU;EACV,gBAAgB;EAChB,kBAAkB;EAClB,gBAAgB;CACnB;;AACD;EACI,mBAAmB;CACtB;;AACD;EACI,eAAe;CAClB;;AACD;EACI,oBAAoB;CACvB;;AACD;EACI,mBAA2B;EAC3B,cAAiB;EACjB,oBAAoB;CAcvB;;ACXO;EDNR;IAMQ,oBFf4B;IEgB5B,cFhB4B;GE0BnC;CP4gBA;;AQlhBO;EDXR;IAUQ,oBFf4B;IEgB5B,cFhB4B;GEsBnC;CPmhBA;;AOpiBD;EAeQ,UAAU;CACb;;AAGL;EACI,kCAAkC;EAClC,gBAAgB;CACnB;;AACD;EACI,0BAA0B;EAC1B,oBAAoB;CAIvB;;AAND;EAIQ,0BAA0B;CAC7B;;AAGL;EACI,uBAAuB;EACvB,0BAA0B;EAC1B,cAAc;EACd,UAAU;EACV,eAAe;CAClB;;AC/BO;EDiCR;IAEQ,YAAY;IACZ,eAAkB;IAClB,aDDU;GCmBjB;CPygBA;;AQ3jBO;ED4BR;IAOQ,eAAqB;IACrB,aDWU;GCGjB;CPghBA;;AQtlBO;EDgDR;IAWQ,YAAY;IACZ,eAAmB;IACnB,cDpCc;ICqCd,uBAAuB;GAQ9B;CPyhBA;;AQ/lBO;EDgDR;IAiBQ,YAAY;IACZ,eAAmB;IACnB,cD1Cc;IC2Cd,uBAAuB;GAE9B;CPkiBA;;AQzlBO;EDyDR;IAEQ,aAAa;IACb,eAAkB;IAClB,aDzBU;GCyCjB;CPohBA;;AQ5lBO;EDoDR;IAOQ,eAAqB;IACrB,aDbU;GCyBjB;CP2hBA;;AQvnBO;EDwER;IAWQ,aAAa;IACb,eAAmB;IACnB,cDxDc;ICyDd,uBAAuB;GAM9B;CPoiBA;;AQroBO;ED6ER;IAiBQ,eAAmB;IACnB,uBAAuB;GAE9B;CP2iBA;;AQ5oBO;EDoGJ;IACI,eAAmB;IACnB,uBAAuB;GAC1B;CP4iBJ","file":"sample.css","sourcesContent":["/*\n * Hoisin.scss\n * CSS responsive framework boilerplate\n * Create your own grids, plugin anything\n * Version: 0.9.15\n * Created by: Cyber-Duck Ltd <info@cyber-duck.co.uk>,\n *             Ramon Lapenta <me@ramonlapenta.com>\n *\n */\n ","@import 'vars';\n@import 'mixins';\n\n@media (min-width: $bp-l) {\n\n    @import 'l/base';\n\n}\n@media (min-width: $bp-xl) {\n\n    @import 'l/xl';\n\n}\n@media (min-width: $bp-m) and (max-width: ($bp-l - 1)) {\n\n    @import 'm/base';\n\n}\n@media (min-width: $bp-s) and (max-width: ($bp-m - 1)) {\n\n    @import 's/base';\n\n}\n","// * Large screens grid system\n// *\n\n// * Empty declaration as a base for all spans common styles\n%base-col {\n    float: left;\n    margin: 0 $gutter/2;\n}\n\n///* \n// * Cols\n// * Mixin to create the col spans using the previous empty % declaration\n// *\n// * @include cols;\n// */\n@mixin cols {\n    @for $i from 1 through $col-qty {\n        .col#{$i} { @extend %base-col; }\n    }\n}\n\n// Output the grid only if variable set to true\n@if ($include-grid) {\n\n    // * Define the size of the container using variables\n    $wrap: ($col-width * $col-qty) + $gutter * ($col-qty - 1);\n\n    .container {\n        margin: 0 auto;\n        width: $wrap + $gutter;\n\n        &:after {\n            clear: both;\n            content: '';\n            display: block;\n        }\n    }\n\n    // * Loop through the cols to generate size of nested containers\n    @for $i from 2 through $col-qty {\n        .col#{$i} > .container {\n            margin: 0 0 0 0 -($gutter/2);\n            width: ($col-width * $i) + ($gutter * $i);\n        }\n    }\n\n    // * Output all the spans common styles\n    @include cols;\n\n    // * Loop to generate each span \n    @for $i from 2 through $col-qty {\n        .col#{$i} {\n            width: ($col-width * $i) + ($gutter * $i) - $gutter;\n        }\n    }\n\n    @for $i from 1 through ($col-qty - 2) {\n        .pre#{$i} {\n            margin-left: ($col-width * $i) + ($gutter * $i) + ($gutter / 2);\n        }\n    }\n\n    @for $i from 1 through ($col-qty - 2) {\n        .suf#{$i} {\n            margin-right: ($col-width * $i) + ($gutter * $i);\n        }\n    }\n\n    // *\n    // * Additional grid utilities\n    // *\n\n    // * Force float a span to the right\n    .colr {\n        float: right;\n        margin: 0 $gutter/2;\n    }\n\n    // * Remove left margin from span\n    .alpha {\n        margin-left: 0;\n    }\n\n    // * Remove right margin from span\n    .omega {\n        margin-right: 0;\n    }\n\n    // * Clear helper\n    .clear {\n        clear: both;\n    }\n\n    // * center span in container\n    .center {\n        float: none;\n        margin: 0 auto;\n    }\n}\n","/*\n * Hoisin.scss\n * CSS responsive framework boilerplate\n * Create your own grids, plugin anything\n * Version: 0.9.15\n * Created by: Cyber-Duck Ltd <info@cyber-duck.co.uk>,\n *             Ramon Lapenta <me@ramonlapenta.com>\n *\n */\n@media (min-width: 1024px) {\n  .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {\n    float: left;\n    margin: 0 10px;\n  }\n  .container {\n    margin: 0 auto;\n    width: 960px;\n  }\n  .container:after {\n    clear: both;\n    content: '';\n    display: block;\n  }\n  .col2 > .container {\n    margin: 0 0 0 -10px;\n    width: 160px;\n  }\n  .col3 > .container {\n    margin: 0 0 0 -10px;\n    width: 240px;\n  }\n  .col4 > .container {\n    margin: 0 0 0 -10px;\n    width: 320px;\n  }\n  .col5 > .container {\n    margin: 0 0 0 -10px;\n    width: 400px;\n  }\n  .col6 > .container {\n    margin: 0 0 0 -10px;\n    width: 480px;\n  }\n  .col7 > .container {\n    margin: 0 0 0 -10px;\n    width: 560px;\n  }\n  .col8 > .container {\n    margin: 0 0 0 -10px;\n    width: 640px;\n  }\n  .col9 > .container {\n    margin: 0 0 0 -10px;\n    width: 720px;\n  }\n  .col10 > .container {\n    margin: 0 0 0 -10px;\n    width: 800px;\n  }\n  .col11 > .container {\n    margin: 0 0 0 -10px;\n    width: 880px;\n  }\n  .col12 > .container {\n    margin: 0 0 0 -10px;\n    width: 960px;\n  }\n  .col2 {\n    width: 140px;\n  }\n  .col3 {\n    width: 220px;\n  }\n  .col4 {\n    width: 300px;\n  }\n  .col5 {\n    width: 380px;\n  }\n  .col6 {\n    width: 460px;\n  }\n  .col7 {\n    width: 540px;\n  }\n  .col8 {\n    width: 620px;\n  }\n  .col9 {\n    width: 700px;\n  }\n  .col10 {\n    width: 780px;\n  }\n  .col11 {\n    width: 860px;\n  }\n  .col12 {\n    width: 940px;\n  }\n  .pre1 {\n    margin-left: 90px;\n  }\n  .pre2 {\n    margin-left: 170px;\n  }\n  .pre3 {\n    margin-left: 250px;\n  }\n  .pre4 {\n    margin-left: 330px;\n  }\n  .pre5 {\n    margin-left: 410px;\n  }\n  .pre6 {\n    margin-left: 490px;\n  }\n  .pre7 {\n    margin-left: 570px;\n  }\n  .pre8 {\n    margin-left: 650px;\n  }\n  .pre9 {\n    margin-left: 730px;\n  }\n  .pre10 {\n    margin-left: 810px;\n  }\n  .suf1 {\n    margin-right: 80px;\n  }\n  .suf2 {\n    margin-right: 160px;\n  }\n  .suf3 {\n    margin-right: 240px;\n  }\n  .suf4 {\n    margin-right: 320px;\n  }\n  .suf5 {\n    margin-right: 400px;\n  }\n  .suf6 {\n    margin-right: 480px;\n  }\n  .suf7 {\n    margin-right: 560px;\n  }\n  .suf8 {\n    margin-right: 640px;\n  }\n  .suf9 {\n    margin-right: 720px;\n  }\n  .suf10 {\n    margin-right: 800px;\n  }\n  .colr {\n    float: right;\n    margin: 0 10px;\n  }\n  .alpha {\n    margin-left: 0;\n  }\n  .omega {\n    margin-right: 0;\n  }\n  .clear {\n    clear: both;\n  }\n  .center {\n    float: none;\n    margin: 0 auto;\n  }\n}\n\n@media (min-width: 1360px) {\n  .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10 {\n    float: left;\n    margin: 0 15px;\n  }\n  .col12 {\n    margin: 0 15px;\n    width: 1170px;\n  }\n  .col2 {\n    width: 170px;\n  }\n  .col3 {\n    width: 270px;\n  }\n  .col4 {\n    width: 370px;\n  }\n  .col5 {\n    width: 470px;\n  }\n  .col6 {\n    width: 570px;\n  }\n  .col7 {\n    width: 670px;\n  }\n  .col8 {\n    width: 770px;\n  }\n  .col9 {\n    width: 870px;\n  }\n  .col10 {\n    width: 970px;\n  }\n  .col11 {\n    width: 1070px;\n  }\n  .pre1 {\n    margin-left: 115px;\n  }\n  .pre2 {\n    margin-left: 215px;\n  }\n  .pre3 {\n    margin-left: 315px;\n  }\n  .pre4 {\n    margin-left: 415px;\n  }\n  .pre5 {\n    margin-left: 515px;\n  }\n  .pre6 {\n    margin-left: 615px;\n  }\n  .pre7 {\n    margin-left: 715px;\n  }\n  .pre8 {\n    margin-left: 815px;\n  }\n  .pre9 {\n    margin-left: 915px;\n  }\n  .pre10 {\n    margin-left: 1015px;\n  }\n  .suf1 {\n    margin-right: 115px;\n  }\n  .suf2 {\n    margin-right: 215px;\n  }\n  .suf3 {\n    margin-right: 315px;\n  }\n  .suf4 {\n    margin-right: 415px;\n  }\n  .suf5 {\n    margin-right: 515px;\n  }\n  .suf6 {\n    margin-right: 615px;\n  }\n  .suf7 {\n    margin-right: 715px;\n  }\n  .suf8 {\n    margin-right: 815px;\n  }\n  .suf9 {\n    margin-right: 915px;\n  }\n  .suf10 {\n    margin-right: 1015px;\n  }\n  .container {\n    width: 1200px;\n  }\n  .col2 > .container {\n    margin: 0 0 0 -15px;\n    width: 200px;\n  }\n  .col3 > .container {\n    margin: 0 0 0 -15px;\n    width: 300px;\n  }\n  .col4 > .container {\n    margin: 0 0 0 -15px;\n    width: 400px;\n  }\n  .col5 > .container {\n    margin: 0 0 0 -15px;\n    width: 500px;\n  }\n  .col6 > .container {\n    margin: 0 0 0 -15px;\n    width: 600px;\n  }\n  .col7 > .container {\n    margin: 0 0 0 -15px;\n    width: 700px;\n  }\n  .col8 > .container {\n    margin: 0 0 0 -15px;\n    width: 800px;\n  }\n  .col9 > .container {\n    margin: 0 0 0 -15px;\n    width: 900px;\n  }\n  .col10 > .container {\n    margin: 0 0 0 -15px;\n    width: 1000px;\n  }\n  .col11 > .container {\n    margin: 0 0 0 -15px;\n    width: 1100px;\n  }\n  .col12 > .container {\n    margin: 0 0 0 -15px;\n    width: 1200px;\n  }\n  .colr {\n    float: right;\n    margin: 0 15px;\n  }\n  .alpha {\n    margin-left: 0;\n  }\n  .omega {\n    margin-right: 0;\n  }\n  .clear {\n    clear: both;\n  }\n  .center {\n    float: none;\n    margin: 0 auto;\n  }\n}\n\n@media (min-width: 680px) and (max-width: 1023px) {\n  .wrap {\n    overflow: hidden;\n    width: 100%;\n  }\n  .container {\n    width: 100%;\n    padding: 0 5px;\n    box-sizing: border-box;\n  }\n  .container::after {\n    clear: both;\n    content: '';\n    display: block;\n  }\n  .container .container {\n    width: 102%;\n    width: calc(100% + 20px);\n    margin-left: -10px;\n  }\n  .col12,\n  .col11,\n  .col10,\n  .col9,\n  .col8,\n  .col7 {\n    margin: 0;\n    padding: 0 5px;\n    width: 100%;\n    box-sizing: border-box;\n  }\n  .col6,\n  .col5,\n  .col4,\n  .col3 {\n    float: left;\n    margin: 0;\n    padding: 0 5px;\n    width: 50%;\n    box-sizing: border-box;\n  }\n  .col2 {\n    float: left;\n    margin: 0;\n    padding: 0 5px;\n    width: 33.33%;\n    box-sizing: border-box;\n  }\n  .m-full {\n    width: 100%;\n  }\n  .m-full.colr {\n    float: none;\n  }\n  .m-half {\n    float: left;\n    width: 50%;\n  }\n  .m-1_3 {\n    float: left;\n    width: 33.33%;\n  }\n  .m-2_3 {\n    float: left;\n    width: 66.66%;\n  }\n  .colr {\n    float: right;\n  }\n  .alpha {\n    margin-left: 0;\n  }\n  .omega {\n    margin-right: 0;\n  }\n  .clear {\n    clear: both;\n  }\n  .center {\n    float: none;\n    margin: 0 auto;\n  }\n}\n\n@media (min-width: 120px) and (max-width: 679px) {\n  .wrap {\n    overflow: hidden;\n    width: 100%;\n  }\n  .container {\n    width: 100%;\n    padding: 0 5px;\n    box-sizing: border-box;\n  }\n  .container:after {\n    clear: both;\n    content: '';\n    display: block;\n  }\n  .container .container {\n    width: 102%;\n    width: calc(100% + 20px);\n    margin-left: -10px;\n  }\n  .col12,\n  .col11,\n  .col10,\n  .col9,\n  .col8,\n  .col7,\n  .col6,\n  .col5,\n  .col4,\n  .col3 {\n    margin: 0;\n    padding: 0 5px;\n    width: 100%;\n    box-sizing: border-box;\n  }\n  .col2 {\n    float: left;\n    margin: 0;\n    padding: 0 5px;\n    width: 50%;\n    box-sizing: border-box;\n  }\n  .s-full {\n    float: none;\n    margin: 0;\n    padding: 0 5px;\n    width: 100%;\n    box-sizing: border-box;\n  }\n  .s-half {\n    float: left;\n    margin: 0;\n    padding: 0 5px;\n    width: 50%;\n    box-sizing: border-box;\n  }\n  .clear {\n    clear: both;\n  }\n}\n\nbody {\n  margin: 0;\n  padding: 0;\n  font-family: sans-serif;\n}\n\n.red {\n  color: red;\n}\n\n.red-light {\n  color: #ffb3b3;\n}\n\n.red-dark {\n  color: maroon;\n}\n\n@media (min-width: 1024px) {\n  body {\n    font-size: 18px;\n  }\n}\n\n@media (min-width: 680px) and (max-width: 1023px) {\n  body {\n    font-size: 16px;\n  }\n}\n\n@media (min-width: 120px) and (max-width: 679px) {\n  body {\n    font-size: 14px;\n  }\n}\n\nbody {\n  color: #666;\n  margin: 0;\n  padding: 50px 0;\n  font-family: \"Roboto Condensed\", sans-serif;\n  font-size: 18px;\n  font-weight: 300;\n  background: white;\n}\n\nh2 {\n  color: #d8531e;\n  font-weight: 300;\n  margin: 0;\n  font-size: 48px;\n  font-size: 48px;\n}\n\nh3 {\n  color: #333;\n  font-weight: 300;\n  margin: 0;\n  font-size: 36px;\n  line-height: 36px;\n  padding: 12px 0;\n}\n\np {\n  margin: 0 0 21px 0;\n}\n\na {\n  color: #d8531e;\n}\n\nsection {\n  margin-bottom: 50px;\n}\n\n.box {\n  margin: 0 0 10px 0;\n  padding: 10px;\n  background: #F5F5F5;\n}\n\n@media (min-width: 1024px) {\n  .box {\n    margin-bottom: 20px;\n    padding: 20px;\n  }\n}\n\n@media (min-width: 1360px) {\n  .box {\n    margin-bottom: 30px;\n    padding: 30px;\n  }\n}\n\n.box p {\n  margin: 0;\n}\n\n.code {\n  font-family: \"Courier New\", serif;\n  font-size: 14px;\n}\n\n.nesting {\n  background-color: #FFFFDF;\n  margin-bottom: 20px;\n}\n\n.nesting .nesting {\n  background-color: #FFE7DF;\n}\n\npre {\n  border: 1px solid #CCC;\n  background-color: #F9F9F9;\n  padding: 10px;\n  margin: 0;\n  overflow: auto;\n}\n\n@media (min-width: 1024px) {\n  .content {\n    float: left;\n    margin: 0 10px;\n    width: 620px;\n  }\n}\n\n@media (min-width: 1360px) {\n  .content {\n    margin: 0 15px;\n    width: 770px;\n  }\n}\n\n@media (min-width: 680px) and (max-width: 1023px) {\n  .content {\n    float: left;\n    padding: 0 5px;\n    width: 66.66%;\n    box-sizing: border-box;\n  }\n}\n\n@media (min-width: 680px) and (max-width: 1023px) {\n  .content {\n    float: left;\n    padding: 0 5px;\n    width: 66.66%;\n    box-sizing: border-box;\n  }\n}\n\n@media (min-width: 1024px) {\n  .sidebar {\n    float: right;\n    margin: 0 10px;\n    width: 300px;\n  }\n}\n\n@media (min-width: 1360px) {\n  .sidebar {\n    margin: 0 15px;\n    width: 370px;\n  }\n}\n\n@media (min-width: 680px) and (max-width: 1023px) {\n  .sidebar {\n    float: right;\n    padding: 0 5px;\n    width: 33.33%;\n    box-sizing: border-box;\n  }\n}\n\n@media (max-width: 680px) {\n  .sidebar {\n    padding: 0 5px;\n    box-sizing: border-box;\n  }\n}\n\n@media (max-width: 680px) {\n  .test {\n    padding: 0 5px;\n    box-sizing: border-box;\n  }\n}\n","// *\n// * Grid system\n// * Define the size of the container using extra large variables\n// *\n\n// * Generate a common style for all spans\n%base-xl-col {\n    float: left;\n    margin: 0 $xl-gutter/2;\n}\n\n///* \n// * Cols\n// * Mixin to create the col spans using the previous empty % declaration\n// *\n// * @include cols;\n// */\n@mixin cols {\n    @for $i from 1 to $col-qty - 1 {\n        .col#{$i} { @extend %base-xl-col; }\n    }\n}\n\n// Output the grid only if variable set to true\n@if ($include-grid) {\n    $wrap: $xl-col-width * 12 + $xl-gutter * 11;\n\n    // * Output the common span styles\n    @include cols;\n\n    // Define widths for each span\n    .col#{$col-qty} {\n        margin: 0 $xl-gutter/2; // Full width, doesn't need float\n        width: ($xl-col-width * $col-qty) + ($xl-gutter * $col-qty) - $xl-gutter;\n    }\n\n    @for $i from 2 to $col-qty {\n        .col#{$i} {\n            width: $xl-col-width * $i + $xl-gutter * $i - $xl-gutter;\n        }\n    }\n\n    @for $i from 1 through 10 {\n        .pre#{$i} {\n            margin-left: ($xl-col-width * $i) + ($xl-gutter * $i) + ($xl-gutter / 2);\n        }\n    }\n\n    @for $i from 1 through 10 {\n        .suf#{$i} {\n            margin-right: ($xl-col-width * $i) + ($xl-gutter * $i) + ($xl-gutter / 2);\n        }\n    }\n\n    .container {\n        width: $wrap + $xl-gutter;\n    }\n\n    @for $i from 2 through $col-qty {\n        .col#{$i} > .container {\n            margin: 0 0 0 0 -($xl-gutter/2);\n            width: ($xl-col-width * $i) + ($xl-gutter * $i);\n        }\n    }\n\n    // * Grid utilities\n    .colr {\n        float: right;\n        margin: 0 $xl-gutter/2;\n    }\n\n    .alpha {\n        margin-left: 0;\n    }\n\n    .omega {\n        margin-right: 0;\n    }\n\n    .clear {\n        clear: both;\n    }\n\n    .center {\n        float: none;\n        margin: 0 auto;\n    }\n}\n","// * Grid system\n// * Define the properties of the flexible container\n// *\n\n// Output the grid only if variable set to true\n@if ($include-grid) {\n    .wrap {\n        overflow: hidden;\n        width: 100%;\n    }\n\n    .container {\n        width: 100%;\n        padding: 0 ($gutter/4);\n        box-sizing: border-box;\n        \n        &::after {\n            clear: both;\n            content: '';\n            display: block;\n        }\n\n        .container {\n            width: 102%;\n            width: calc(100% + #{$gutter});\n            margin-left: -($gutter/2);\n        }\n    }\n\n    .col12, \n    .col11, \n    .col10, \n    .col9, \n    .col8, \n    .col7 {\n        margin: 0;\n        padding: 0 ($gutter/4);\n        width: 100%;\n        box-sizing: border-box;\n    }\n\n    .col6, \n    .col5, \n    .col4, \n    .col3 {\n        float: left;\n        margin: 0;\n        padding: 0 ($gutter/4);\n        width: 50%;\n        box-sizing: border-box;\n    }\n\n    .col2 {\n        float: left;\n        margin: 0;\n        padding: 0 ($gutter/4);\n        width: 33.33%;\n        box-sizing: border-box;\n    }\n\n    .m-full {\n        width: 100%;\n        &.colr {\n            float: none;\n        }\n    }\n\n    .m-half {\n        float: left;\n        width: 50%;\n    }\n\n    .m-1_3 {\n        float: left;\n        width: 33.33%;\n    }\n\n    .m-2_3 {\n        float: left;\n        width: 66.66%;\n    }\n\n    // * Additional grid utilities\n    .colr {\n        float: right;\n    }\n\n    .alpha {\n        margin-left: 0;\n    }\n\n    .omega {\n        margin-right: 0;\n    }\n\n    .clear {\n        clear: both;\n    }\n\n    .center {\n        float: none;\n        margin: 0 auto;\n    }\n}","// * Grid system\n// * Define the properties of the flexible container\n// *\n\n// Output the grid only if variable set to true\n@if ($include-grid) {\n    .wrap {\n        overflow: hidden;\n        width: 100%;\n    }\n\n    .container {\n        width: 100%;\n        padding: 0 ($gutter/4);\n        box-sizing: border-box;\n\n        &:after {\n            clear: both;\n            content: '';\n            display: block;\n        }\n        \n        .container {\n            width: 102%;\n            width: calc(100% + #{$gutter});\n            margin-left: -($gutter/2);\n        }\n    }\n\n    .col12, \n    .col11, \n    .col10, \n    .col9, \n    .col8, \n    .col7, \n    .col6, \n    .col5, \n    .col4, \n    .col3 {\n        margin: 0;\n        padding: 0 ($gutter/4);\n        width: 100%;\n        box-sizing: border-box;\n    }\n\n    .col2 {\n        float: left;\n        margin: 0;\n        padding: 0 ($gutter/4);\n        width: 50%;\n        box-sizing: border-box;\n    }\n\n    .s-full {\n        float: none;\n        margin: 0;\n        padding: 0 ($gutter/4);\n        width: 100%;\n        box-sizing: border-box;\n    }\n\n    .s-half {\n        float: left;\n        margin: 0;\n        padding: 0 ($gutter/4);\n        width: 50%;\n        box-sizing: border-box;\n    }\n\n    .clear {\n        clear: both;\n    }\n}\n","// Body\nbody {\n    margin: 0;\n    padding: 0;\n    font-family: $body-font;\n}\n$red: red;\n.red {\n    color: $red;\n}\n.red-light {\n    color: light($red, 70%);\n}\n.red-dark {\n    color: dark($red, 50%);\n}\n\n@media (min-width: $bp-l) {\n\n    body {\n        font-size: 18px;\n    }\n\n}\n@media (min-width: $bp-m) and (max-width: ($bp-l - 1)) {\n\n    body {\n        font-size: 16px;\n    }\n\n}\n@media (min-width: $bp-s) and (max-width: ($bp-m - 1)) {\n\n    body {\n        font-size: 14px;\n    }\n\n}","// Colours\n$highlight:                     #fa9200;\n\n$error:                         #f00;\n$error-bg:                      #ffe5e5;\n\n$success:                       #390;\n$success-bg:                    #eaf5e5;\n\n$info:                          #39f;\n$info-bg:                       #eaf5ff;\n\n$warning:                       #ff0;\n$warning-bg:                    #ffffe5;\n\n$black:                         #000;\n$white:                         #fff;\n$text:                          #000;\n$title:                         #000;\n\n\n// Grid\n$include-grid:                  true;\n$col-qty:                       12;\n$col-width:                     60px;\n$gutter:                        20px;\n\n// Large desktop grid\n$xl-col-width:                  70px;\n$xl-gutter:                     30px;\n\n\n// Breakpoints\n$bp-xl:                 \t\t1360px;\n$bp-l:              \t\t\t1024px;\n$bp-m:             \t\t\t\t680px;\n$bp-s:              \t\t\t120px;\n\n\n// Paths\n$img:                           '../img/';\n$sprite:                        '../img/sprite.png';\n$fonts:                         '../fonts/';\n\n    \n// Typography\n$body-font:                     sans-serif;\n$title-font:                    serif;\n","///*\n// * Hoisin.scss\n// * Functions library\n// */\n\n\n\n///* \n// * Darken colors\n// * \n// * This function uses mix to have a more granular control of the darkening.\n// * @param $color ($variable | #HEX);\n// * @param $value (percentage);\n// *\n// * dark($blue, 20%);\n// */\n@function dark($color, $value: 10%) {\n    @return mix($black, $color, $value);\n}\n\n\n\n///* \n// * Lighten colors\n// * \n// * This function uses mix to have a more granular control of the darkening.\n// * @param $color ($variable | #HEX);\n// * @param $value (percentage);\n// *\n// * light($blue, 20%);\n// */\n@function light($color, $value: 10%) {\n    @return mix($white, $color, $value);\n}\n\n\n\n\n///* \n// * Flexible Span \n// * \n// * This function generates a width value based on the parameter given, using \n// * details from the medium size grid.\n// *\n// * @param $width ($width);\n// *\n// * span-fw('m-2_3');\n// */\n@function span-fw($width) {\n    @if $width == 'm-2_3' {\n        @return 66.66%;\n    } @else if $width == 'm-half' {\n        @return 50%;\n    } @else if $width == 'm-1_3' {\n        @return 33.33%;\n    } @else if $width == 'm-4_4' {\n        @return 25%;\n    } @else {\n        @return 100%;\n    }\n}\n\n\n\n\n///* \n// * Span\n// * \n// * This function generates a width value based on the parameter given, using \n// * details from the $gutter and $col global variables.\n// *\n// * @param $cols ($cols);\n// *\n// * span(8);\n// */\n@function span($cols: 12) {\n    @return ($cols * $col-width) + (($cols - 1) * $gutter);\n}\n\n\n\n///* \n// * Span XL\n// * \n// * This function generates a width value based on the parameter given, using \n// * details from the $xl-gutter and $xl-col global variables.\n// *\n// * @param $cols ($cols);\n// *\n// * span-xl(8);\n// */\n@function span-xl($cols: 12) {\n    @return ($cols * $xl-col-width) + (($cols - 1) * $xl-gutter);\n}\n","// Component name\nbody {\n    color: #666;\n    margin: 0;\n    padding: 50px 0;\n    font-family: \"Roboto Condensed\", sans-serif;\n    font-size: 18px;\n    font-weight: 300;\n    background: white;\n}\nh2 {\n    color: #d8531e;\n    font-weight: 300;\n    margin: 0;\n    font-size: 48px;\n    font-size: 48px;\n}\nh3 {\n    color: #333;\n    font-weight: 300;\n    margin: 0;\n    font-size: 36px;\n    line-height: 36px;\n    padding: 12px 0; \n}\np {\n    margin: 0 0 21px 0;\n}\na {\n    color: #d8531e;\n}\nsection {\n    margin-bottom: 50px;\n}\n.box {\n    margin: 0 0 ($gutter / 2) 0;\n    padding: ($gutter / 2);\n    background: #F5F5F5;\n\n    @include respond-to(l) {\n        margin-bottom: $gutter;\n        padding: $gutter;\n    }\n    @include respond-to(xl) {\n        margin-bottom: $xl-gutter;\n        padding: $xl-gutter;\n    }\n\n    p {\n        margin: 0;\n    }\n}\n\n.code {\n    font-family: \"Courier New\", serif;\n    font-size: 14px;\n}\n.nesting {\n    background-color: #FFFFDF;\n    margin-bottom: 20px;\n    .nesting {\n        background-color: #FFE7DF;\n    }\n}\n\npre {\n    border: 1px solid #CCC;\n    background-color: #F9F9F9;\n    padding: 10px;\n    margin: 0;\n    overflow: auto;\n}\n\n.content {\n    @include respond-to(l) {\n        float: left;\n        margin: 0 ($gutter / 2);\n        width: span(8);\n    }\n    @include respond-to(xl) {       \n        margin: 0 ($xl-gutter / 2);\n        width: span-xl(8);\n    }\n    @include respond-to(m) {\n        float: left;\n        padding: 0 ($gutter / 4);\n        width: span-fw(m-2_3);\n        box-sizing: border-box;\n    }\n    @include respond-to(m) {\n        float: left;\n        padding: 0 ($gutter / 4);\n        width: span-fw(m-2_3);\n        box-sizing: border-box;\n    }\n}\n\n.sidebar {\n    @include respond-to(l) {\n        float: right;\n        margin: 0 ($gutter / 2);\n        width: span(4);\n    }\n    @include respond-to(xl) {\n        margin: 0 ($xl-gutter / 2);\n        width: span-xl(4);\n    }\n    @include respond-to(m) {\n        float: right;\n        padding: 0 ($gutter / 4);\n        width: span-fw(m-1_3);\n        box-sizing: border-box;\n    }\n    @include respond-to(s) {\n        padding: 0 ($gutter / 4);\n        box-sizing: border-box;\n    }\n}\n\n@include respond-to(s) {\n    .test {\n        padding: 0 ($gutter / 4);\n        box-sizing: border-box;\n    }\n}\n","///*\n// * Hoisin.scss\n// * Mixins library\n// *\n// * Vendor prefixes are handled by gulp-autoprefixer.\n// * All prefixer mixins will be removed in future versions\n// */\n\n\n\n///* \n// * Respond to\n// * @param $breakpoint (s | m | m-up | m-down | l | xl);\n// *\n// * @include respond-to(m) {\n// *      property: value;\n// * }\n// */\n@mixin respond-to($bp) {\n    @if $bp == \"s\" {\n        @media (max-width: $bp-m) {\n            @content;\n        }\n    }\n    @else if $bp == \"m\" {\n        @media (min-width: $bp-m) and (max-width: ($bp-l - 1)) {\n            @content;\n        }\n    }\n    @else if $bp == \"m-up\" {\n        @media (min-width: $bp-m) {\n            @content;\n        }\n    }\n    @else if $bp == \"m-down\" {\n        @media (max-width: ($bp-l - 1)) {\n            @content;\n        }\n    }\n    @else if $bp == \"l\" {\n        @media (min-width: $bp-l) {\n            @content;\n        }\n    }\n    @else if $bp == \"xl\" {\n        @media (min-width: $bp-xl) {\n            @content;\n        }\n    }\n}\n\n\n\n///* \n// * Box shadow\n// * @param $value ($h-offset $v-offset $blur $spread $color | inset | initial | inherit);\n// *\n// * @include box-shadow(2px 2px 2px 2px rgba(0,0,0,0.2));\n// */\n@mixin box-shadow($value: 0 0 4px 0 rgba(0, 0, 0, .5)) {\n    @include prefixer(box-shadow, $value, webkit);\n}\n\n\n\n///* \n// * Two colors vertical linear gradient\n// * @param $value ($initial-color);\n// * @param $value ($final-color);\n// *\n// * @include gradients(#FF0, #F00);\n// */\n@mixin gradients($first, $second) {\n    background-color: $first;\n    background-image: -o-linear-gradient(top, $first 0%, $second 100%);\n    background-image: -ms-linear-gradient(top, $first 0%, $second 100%);\n    background-image: -moz-linear-gradient(top, $first, $second);\n    background-image: -webkit-gradient(linear, left top, left bottom, from($first), to($second));\n    background-image: linear-gradient(top, $first 0%, $second 100%);\n}\n\n\n\n///* \n// * Box model (defaults to border-box)\n// * @param $type ($box-model);\n// *\n// * @include box-sizing;\n// */\n@mixin box-sizing($type: border-box) {\n    @include prefixer(box-sizing, $type, moz webkit);\n}\n\n\n\n// *\n// * Opacity (Old IE disabled by default)\n// * @param $opac ($opacity);\n// * @param $ie (true);\n// *\n// * @include opacity(0.7, true);\n// */\n@mixin opacity($opac, $ie: false) {\n    @if $ie {\n        -ms-filter: alpha(opacity=$opac * 100);\n        filter: alpha(opacity=$opac * 100);\n    }\n    opacity: $opac;\n}\n\n\n\n///*\n// * Transition (defaults to .15 sec)\n// * @param $value ($speed | $property | $easing);\n// *\n// * @include transition(height 200ms ease-out);\n// */\n@mixin transition($value: .15s) {\n    @include prefixer(transition, $value, webkit);\n}\n\n\n\n///* \n// * Rotate (Origin defaults to center of element)\n// * @param $deg ($degrees);\n// * @param $orig ($h-origin $v-origin);\n// *\n// * @include rotate(45deg);\n// */\n@mixin rotate($deg, $orig: 50% 50%) {\n    @include prefixer(transform, rotate(#{$deg}), webkit ms);\n    @if $orig != 50% and $orig != (50% 50%) \n    and $orig != center and $orig != (center center) {\n        @include prefixer(transform-origin, $orig, webkit ms);\n    }\n}\n\n\n\n///*\n// * Translate \n// * @param $hdist ($distance);\n// * @param $vdist ($distance);\n// *\n// * @include translate(20px, 20px);\n// */\n@mixin translate($hdist: 0, $vdist: 0) {\n    @include prefixer(transform, translate(#{$hdist}, #{$vdist}), webkit ms);\n}\n\n\n\n///* \n// * Animation (defaults to .15 sec)\n// * @param $options ($animation-name $duration | $iteration);\n// *\n// * @include animation(myanimation 2s 3);\n// */\n@mixin animation($options) {\n    @include prefixer(animation, $options);\n}\n\n\n\n///*\n// * Placeholder text color\n// * @param $color ($color);\n// *\n// * @include placeholder(#999);\n// */\n@mixin placeholder($color) {\n    &::-webkit-input-placeholder {\n        color: $color;\n    }\n\n    &::-moz-placeholder {\n        color: $color; \n    }\n\n    &::-ms-input-placeholder {\n        color: $color;\n    }\n}\n\n\n///*\n// * Disallow user selection\n// *\n// * @include noselect;\n// */\n@mixin noselect {\n    -webkit-touch-callout: none;\n    @include prefixer(user-select, none, webkit ms);\n}\n\n\n\n///*\n// * Prefixer\n// * @param $property ($name);\n// * @param $value ($value);\n// * @param $prefixes (webkit | moz | ms | o);\n// *\n// * @include prefixer(animation, $options);\n// */\n@mixin prefixer($property, $value, $prefixes: webkit moz ms o) {\n    @each $prefix in $prefixes {\n        #{'-' + $prefix + '-' + $property}: #{$value};\n    }\n    #{$property}: #{$value};\n}\n"],"sourceRoot":"/source/"}
\ No newline at end of file
diff --git a/css/maps/style.css.map b/css/maps/style.css.map
index 028eede..e41e06f 100644
--- a/css/maps/style.css.map
+++ b/css/maps/style.css.map
@@ -1 +1 @@
-{"version":3,"sources":["_version.scss","_grid.scss","l/_base.scss","style.css","l/_xl.scss","m/_base.scss","s/_base.scss"],"names":[],"mappings":"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","file":"style.css","sourcesContent":["/*\n * Hoisin.scss\n * CSS responsive framework boilerplate\n * Create your own grids, plugin anything\n * Version: 0.9.14\n * Created by: Cyber-Duck Ltd <info@cyber-duck.co.uk>,\n *             Ramon Lapenta <me@ramonlapenta.com>\n *\n */\n ","@import 'vars';\n@import 'mixins';\n\n@media (min-width: $bp-l) {\n\n    @import 'l/base';\n\n}\n@media (min-width: $bp-xl) {\n\n    @import 'l/xl';\n\n}\n@media (min-width: $bp-m) and (max-width: ($bp-l - 1)) {\n\n    @import 'm/base';\n\n}\n@media (min-width: $bp-s) and (max-width: ($bp-m - 1)) {\n\n    @import 's/base';\n\n}\n","// * Large screens grid system\n// *\n\n// * Empty declaration as a base for all spans common styles\n%base-col {\n    float: left;\n    margin: 0 $gutter/2;\n}\n\n///* \n// * Cols\n// * Mixin to create the col spans using the previous empty % declaration\n// *\n// * @include cols;\n// */\n@mixin cols {\n    @for $i from 1 through $col-qty {\n        .col#{$i} { @extend %base-col; }\n    }\n}\n\n// Output the grid only if variable set to true\n@if ($include-grid) {\n\n    // * Define the size of the container using variables\n    $wrap: ($col-width * $col-qty) + $gutter * ($col-qty - 1);\n\n    .container {\n        margin: 0 auto;\n        width: $wrap + $gutter;\n\n        &:after {\n            clear: both;\n            content: '';\n            display: block;\n        }\n    }\n\n    // * Loop through the cols to generate size of nested containers\n    @for $i from 2 through $col-qty {\n        .col#{$i} > .container {\n            margin: 0 0 0 0 -($gutter/2);\n            width: ($col-width * $i) + ($gutter * $i);\n        }\n    }\n\n    // * Output all the spans common styles\n    @include cols;\n\n    // * Loop to generate each span \n    @for $i from 2 through $col-qty {\n        .col#{$i} {\n            width: ($col-width * $i) + ($gutter * $i) - $gutter;\n        }\n    }\n\n    @for $i from 1 through ($col-qty - 2) {\n        .pre#{$i} {\n            margin-left: ($col-width * $i) + ($gutter * $i) + ($gutter / 2);\n        }\n    }\n\n    @for $i from 1 through ($col-qty - 2) {\n        .suf#{$i} {\n            margin-right: ($col-width * $i) + ($gutter * $i);\n        }\n    }\n\n    // *\n    // * Additional grid utilities\n    // *\n\n    // * Force float a span to the right\n    .colr {\n        float: right;\n        margin: 0 $gutter/2;\n    }\n\n    // * Remove left margin from span\n    .alpha {\n        margin-left: 0;\n    }\n\n    // * Remove right margin from span\n    .omega {\n        margin-right: 0;\n    }\n\n    // * Clear helper\n    .clear {\n        clear: both;\n    }\n\n    // * center span in container\n    .center {\n        float: none;\n        margin: 0 auto;\n    }\n}\n","/*\n * Hoisin.scss\n * CSS responsive framework boilerplate\n * Create your own grids, plugin anything\n * Version: 0.9.14\n * Created by: Cyber-Duck Ltd <info@cyber-duck.co.uk>,\n *             Ramon Lapenta <me@ramonlapenta.com>\n *\n */\n@media (min-width: 1024px) {\n  .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {\n    float: left;\n    margin: 0 10px;\n  }\n  .container {\n    margin: 0 auto;\n    width: 960px;\n  }\n  .container:after {\n    clear: both;\n    content: '';\n    display: block;\n  }\n  .col2 > .container {\n    margin: 0 0 0 -10px;\n    width: 160px;\n  }\n  .col3 > .container {\n    margin: 0 0 0 -10px;\n    width: 240px;\n  }\n  .col4 > .container {\n    margin: 0 0 0 -10px;\n    width: 320px;\n  }\n  .col5 > .container {\n    margin: 0 0 0 -10px;\n    width: 400px;\n  }\n  .col6 > .container {\n    margin: 0 0 0 -10px;\n    width: 480px;\n  }\n  .col7 > .container {\n    margin: 0 0 0 -10px;\n    width: 560px;\n  }\n  .col8 > .container {\n    margin: 0 0 0 -10px;\n    width: 640px;\n  }\n  .col9 > .container {\n    margin: 0 0 0 -10px;\n    width: 720px;\n  }\n  .col10 > .container {\n    margin: 0 0 0 -10px;\n    width: 800px;\n  }\n  .col11 > .container {\n    margin: 0 0 0 -10px;\n    width: 880px;\n  }\n  .col12 > .container {\n    margin: 0 0 0 -10px;\n    width: 960px;\n  }\n  .col2 {\n    width: 140px;\n  }\n  .col3 {\n    width: 220px;\n  }\n  .col4 {\n    width: 300px;\n  }\n  .col5 {\n    width: 380px;\n  }\n  .col6 {\n    width: 460px;\n  }\n  .col7 {\n    width: 540px;\n  }\n  .col8 {\n    width: 620px;\n  }\n  .col9 {\n    width: 700px;\n  }\n  .col10 {\n    width: 780px;\n  }\n  .col11 {\n    width: 860px;\n  }\n  .col12 {\n    width: 940px;\n  }\n  .pre1 {\n    margin-left: 90px;\n  }\n  .pre2 {\n    margin-left: 170px;\n  }\n  .pre3 {\n    margin-left: 250px;\n  }\n  .pre4 {\n    margin-left: 330px;\n  }\n  .pre5 {\n    margin-left: 410px;\n  }\n  .pre6 {\n    margin-left: 490px;\n  }\n  .pre7 {\n    margin-left: 570px;\n  }\n  .pre8 {\n    margin-left: 650px;\n  }\n  .pre9 {\n    margin-left: 730px;\n  }\n  .pre10 {\n    margin-left: 810px;\n  }\n  .suf1 {\n    margin-right: 80px;\n  }\n  .suf2 {\n    margin-right: 160px;\n  }\n  .suf3 {\n    margin-right: 240px;\n  }\n  .suf4 {\n    margin-right: 320px;\n  }\n  .suf5 {\n    margin-right: 400px;\n  }\n  .suf6 {\n    margin-right: 480px;\n  }\n  .suf7 {\n    margin-right: 560px;\n  }\n  .suf8 {\n    margin-right: 640px;\n  }\n  .suf9 {\n    margin-right: 720px;\n  }\n  .suf10 {\n    margin-right: 800px;\n  }\n  .colr {\n    float: right;\n    margin: 0 10px;\n  }\n  .alpha {\n    margin-left: 0;\n  }\n  .omega {\n    margin-right: 0;\n  }\n  .clear {\n    clear: both;\n  }\n  .center {\n    float: none;\n    margin: 0 auto;\n  }\n}\n\n@media (min-width: 1360px) {\n  .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10 {\n    float: left;\n    margin: 0 15px;\n  }\n  .col12 {\n    margin: 0 15px;\n    width: 1170px;\n  }\n  .col2 {\n    width: 170px;\n  }\n  .col3 {\n    width: 270px;\n  }\n  .col4 {\n    width: 370px;\n  }\n  .col5 {\n    width: 470px;\n  }\n  .col6 {\n    width: 570px;\n  }\n  .col7 {\n    width: 670px;\n  }\n  .col8 {\n    width: 770px;\n  }\n  .col9 {\n    width: 870px;\n  }\n  .col10 {\n    width: 970px;\n  }\n  .col11 {\n    width: 1070px;\n  }\n  .pre1 {\n    margin-left: 115px;\n  }\n  .pre2 {\n    margin-left: 215px;\n  }\n  .pre3 {\n    margin-left: 315px;\n  }\n  .pre4 {\n    margin-left: 415px;\n  }\n  .pre5 {\n    margin-left: 515px;\n  }\n  .pre6 {\n    margin-left: 615px;\n  }\n  .pre7 {\n    margin-left: 715px;\n  }\n  .pre8 {\n    margin-left: 815px;\n  }\n  .pre9 {\n    margin-left: 915px;\n  }\n  .pre10 {\n    margin-left: 1015px;\n  }\n  .suf1 {\n    margin-right: 115px;\n  }\n  .suf2 {\n    margin-right: 215px;\n  }\n  .suf3 {\n    margin-right: 315px;\n  }\n  .suf4 {\n    margin-right: 415px;\n  }\n  .suf5 {\n    margin-right: 515px;\n  }\n  .suf6 {\n    margin-right: 615px;\n  }\n  .suf7 {\n    margin-right: 715px;\n  }\n  .suf8 {\n    margin-right: 815px;\n  }\n  .suf9 {\n    margin-right: 915px;\n  }\n  .suf10 {\n    margin-right: 1015px;\n  }\n  .container {\n    width: 1200px;\n  }\n  .col2 > .container {\n    margin: 0 0 0 -15px;\n    width: 200px;\n  }\n  .col3 > .container {\n    margin: 0 0 0 -15px;\n    width: 300px;\n  }\n  .col4 > .container {\n    margin: 0 0 0 -15px;\n    width: 400px;\n  }\n  .col5 > .container {\n    margin: 0 0 0 -15px;\n    width: 500px;\n  }\n  .col6 > .container {\n    margin: 0 0 0 -15px;\n    width: 600px;\n  }\n  .col7 > .container {\n    margin: 0 0 0 -15px;\n    width: 700px;\n  }\n  .col8 > .container {\n    margin: 0 0 0 -15px;\n    width: 800px;\n  }\n  .col9 > .container {\n    margin: 0 0 0 -15px;\n    width: 900px;\n  }\n  .col10 > .container {\n    margin: 0 0 0 -15px;\n    width: 1000px;\n  }\n  .col11 > .container {\n    margin: 0 0 0 -15px;\n    width: 1100px;\n  }\n  .col12 > .container {\n    margin: 0 0 0 -15px;\n    width: 1200px;\n  }\n  .colr {\n    float: right;\n    margin: 0 15px;\n  }\n  .alpha {\n    margin-left: 0;\n  }\n  .omega {\n    margin-right: 0;\n  }\n  .clear {\n    clear: both;\n  }\n  .center {\n    float: none;\n    margin: 0 auto;\n  }\n}\n\n@media (min-width: 680px) and (max-width: 1023px) {\n  .wrap {\n    overflow: hidden;\n    width: 100%;\n  }\n  .container {\n    width: 100%;\n    padding: 0 5px;\n    box-sizing: border-box;\n  }\n  .container::after {\n    clear: both;\n    content: '';\n    display: block;\n  }\n  .container .container {\n    width: 102%;\n    width: calc(100% + 20px);\n    margin-left: -10px;\n  }\n  .col12,\n  .col11,\n  .col10,\n  .col9,\n  .col8,\n  .col7 {\n    margin: 0;\n    padding: 0 5px;\n    width: 100%;\n    box-sizing: border-box;\n  }\n  .col6,\n  .col5,\n  .col4,\n  .col3 {\n    float: left;\n    margin: 0;\n    padding: 0 5px;\n    width: 50%;\n    box-sizing: border-box;\n  }\n  .col2 {\n    float: left;\n    margin: 0;\n    padding: 0 5px;\n    width: 33.33%;\n    box-sizing: border-box;\n  }\n  .m-full {\n    width: 100%;\n  }\n  .m-full.colr {\n    float: none;\n  }\n  .m-half {\n    float: left;\n    width: 50%;\n  }\n  .m-1_3 {\n    float: left;\n    width: 33.33%;\n  }\n  .m-2_3 {\n    float: left;\n    width: 66.66%;\n  }\n  .colr {\n    float: right;\n  }\n  .alpha {\n    margin-left: 0;\n  }\n  .omega {\n    margin-right: 0;\n  }\n  .clear {\n    clear: both;\n  }\n  .center {\n    float: none;\n    margin: 0 auto;\n  }\n}\n\n@media (min-width: 120px) and (max-width: 679px) {\n  .wrap {\n    overflow: hidden;\n    width: 100%;\n  }\n  .container {\n    width: 100%;\n    padding: 0 5px;\n    box-sizing: border-box;\n  }\n  .container:after {\n    clear: both;\n    content: '';\n    display: block;\n  }\n  .container .container {\n    width: 102%;\n    width: calc(100% + 20px);\n    margin-left: -10px;\n  }\n  .col12,\n  .col11,\n  .col10,\n  .col9,\n  .col8,\n  .col7,\n  .col6,\n  .col5,\n  .col4,\n  .col3 {\n    margin: 0;\n    padding: 0 5px;\n    width: 100%;\n    box-sizing: border-box;\n  }\n  .col2 {\n    float: left;\n    margin: 0;\n    padding: 0 5px;\n    width: 50%;\n    box-sizing: border-box;\n  }\n  .s-full {\n    float: none;\n    margin: 0;\n    padding: 0 5px;\n    width: 100%;\n    box-sizing: border-box;\n  }\n  .s-half {\n    float: left;\n    margin: 0;\n    padding: 0 5px;\n    width: 50%;\n    box-sizing: border-box;\n  }\n  .clear {\n    clear: both;\n  }\n}\n","// *\n// * Grid system\n// * Define the size of the container using extra large variables\n// *\n\n// * Generate a common style for all spans\n%base-xl-col {\n    float: left;\n    margin: 0 $xl-gutter/2;\n}\n\n///* \n// * Cols\n// * Mixin to create the col spans using the previous empty % declaration\n// *\n// * @include cols;\n// */\n@mixin cols {\n    @for $i from 1 to $col-qty - 1 {\n        .col#{$i} { @extend %base-xl-col; }\n    }\n}\n\n// Output the grid only if variable set to true\n@if ($include-grid) {\n    $wrap: $xl-col-width * 12 + $xl-gutter * 11;\n\n    // * Output the common span styles\n    @include cols;\n\n    // Define widths for each span\n    .col#{$col-qty} {\n        margin: 0 $xl-gutter/2; // Full width, doesn't need float\n        width: ($xl-col-width * $col-qty) + ($xl-gutter * $col-qty) - $xl-gutter;\n    }\n\n    @for $i from 2 to $col-qty {\n        .col#{$i} {\n            width: $xl-col-width * $i + $xl-gutter * $i - $xl-gutter;\n        }\n    }\n\n    @for $i from 1 through 10 {\n        .pre#{$i} {\n            margin-left: ($xl-col-width * $i) + ($xl-gutter * $i) + ($xl-gutter / 2);\n        }\n    }\n\n    @for $i from 1 through 10 {\n        .suf#{$i} {\n            margin-right: ($xl-col-width * $i) + ($xl-gutter * $i) + ($xl-gutter / 2);\n        }\n    }\n\n    .container {\n        width: $wrap + $xl-gutter;\n    }\n\n    @for $i from 2 through $col-qty {\n        .col#{$i} > .container {\n            margin: 0 0 0 0 -($xl-gutter/2);\n            width: ($xl-col-width * $i) + ($xl-gutter * $i);\n        }\n    }\n\n    // * Grid utilities\n    .colr {\n        float: right;\n        margin: 0 $xl-gutter/2;\n    }\n\n    .alpha {\n        margin-left: 0;\n    }\n\n    .omega {\n        margin-right: 0;\n    }\n\n    .clear {\n        clear: both;\n    }\n\n    .center {\n        float: none;\n        margin: 0 auto;\n    }\n}\n","// * Grid system\n// * Define the properties of the flexible container\n// *\n\n// Output the grid only if variable set to true\n@if ($include-grid) {\n    .wrap {\n        overflow: hidden;\n        width: 100%;\n    }\n\n    .container {\n        width: 100%;\n        padding: 0 ($gutter/4);\n        box-sizing: border-box;\n        \n        &::after {\n            clear: both;\n            content: '';\n            display: block;\n        }\n\n        .container {\n            width: 102%;\n            width: calc(100% + #{$gutter});\n            margin-left: -($gutter/2);\n        }\n    }\n\n    .col12, \n    .col11, \n    .col10, \n    .col9, \n    .col8, \n    .col7 {\n        margin: 0;\n        padding: 0 ($gutter/4);\n        width: 100%;\n        box-sizing: border-box;\n    }\n\n    .col6, \n    .col5, \n    .col4, \n    .col3 {\n        float: left;\n        margin: 0;\n        padding: 0 ($gutter/4);\n        width: 50%;\n        box-sizing: border-box;\n    }\n\n    .col2 {\n        float: left;\n        margin: 0;\n        padding: 0 ($gutter/4);\n        width: 33.33%;\n        box-sizing: border-box;\n    }\n\n    .m-full {\n        width: 100%;\n        &.colr {\n            float: none;\n        }\n    }\n\n    .m-half {\n        float: left;\n        width: 50%;\n    }\n\n    .m-1_3 {\n        float: left;\n        width: 33.33%;\n    }\n\n    .m-2_3 {\n        float: left;\n        width: 66.66%;\n    }\n\n    // * Additional grid utilities\n    .colr {\n        float: right;\n    }\n\n    .alpha {\n        margin-left: 0;\n    }\n\n    .omega {\n        margin-right: 0;\n    }\n\n    .clear {\n        clear: both;\n    }\n\n    .center {\n        float: none;\n        margin: 0 auto;\n    }\n}","// * Grid system\n// * Define the properties of the flexible container\n// *\n\n// Output the grid only if variable set to true\n@if ($include-grid) {\n    .wrap {\n        overflow: hidden;\n        width: 100%;\n    }\n\n    .container {\n        width: 100%;\n        padding: 0 ($gutter/4);\n        box-sizing: border-box;\n\n        &:after {\n            clear: both;\n            content: '';\n            display: block;\n        }\n        \n        .container {\n            width: 102%;\n            width: calc(100% + #{$gutter});\n            margin-left: -($gutter/2);\n        }\n    }\n\n    .col12, \n    .col11, \n    .col10, \n    .col9, \n    .col8, \n    .col7, \n    .col6, \n    .col5, \n    .col4, \n    .col3 {\n        margin: 0;\n        padding: 0 ($gutter/4);\n        width: 100%;\n        box-sizing: border-box;\n    }\n\n    .col2 {\n        float: left;\n        margin: 0;\n        padding: 0 ($gutter/4);\n        width: 50%;\n        box-sizing: border-box;\n    }\n\n    .s-full {\n        float: none;\n        margin: 0;\n        padding: 0 ($gutter/4);\n        width: 100%;\n        box-sizing: border-box;\n    }\n\n    .s-half {\n        float: left;\n        margin: 0;\n        padding: 0 ($gutter/4);\n        width: 50%;\n        box-sizing: border-box;\n    }\n\n    .clear {\n        clear: both;\n    }\n}\n"],"sourceRoot":"/source/"}
\ No newline at end of file
+{"version":3,"sources":["_version.scss","_grid.scss","l/_base.scss","style.css","l/_xl.scss","m/_base.scss","s/_base.scss"],"names":[],"mappings":"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","file":"style.css","sourcesContent":["/*\n * Hoisin.scss\n * CSS responsive framework boilerplate\n * Create your own grids, plugin anything\n * Version: 0.9.15\n * Created by: Cyber-Duck Ltd <info@cyber-duck.co.uk>,\n *             Ramon Lapenta <me@ramonlapenta.com>\n *\n */\n ","@import 'vars';\n@import 'mixins';\n\n@media (min-width: $bp-l) {\n\n    @import 'l/base';\n\n}\n@media (min-width: $bp-xl) {\n\n    @import 'l/xl';\n\n}\n@media (min-width: $bp-m) and (max-width: ($bp-l - 1)) {\n\n    @import 'm/base';\n\n}\n@media (min-width: $bp-s) and (max-width: ($bp-m - 1)) {\n\n    @import 's/base';\n\n}\n","// * Large screens grid system\n// *\n\n// * Empty declaration as a base for all spans common styles\n%base-col {\n    float: left;\n    margin: 0 $gutter/2;\n}\n\n///* \n// * Cols\n// * Mixin to create the col spans using the previous empty % declaration\n// *\n// * @include cols;\n// */\n@mixin cols {\n    @for $i from 1 through $col-qty {\n        .col#{$i} { @extend %base-col; }\n    }\n}\n\n// Output the grid only if variable set to true\n@if ($include-grid) {\n\n    // * Define the size of the container using variables\n    $wrap: ($col-width * $col-qty) + $gutter * ($col-qty - 1);\n\n    .container {\n        margin: 0 auto;\n        width: $wrap + $gutter;\n\n        &:after {\n            clear: both;\n            content: '';\n            display: block;\n        }\n    }\n\n    // * Loop through the cols to generate size of nested containers\n    @for $i from 2 through $col-qty {\n        .col#{$i} > .container {\n            margin: 0 0 0 0 -($gutter/2);\n            width: ($col-width * $i) + ($gutter * $i);\n        }\n    }\n\n    // * Output all the spans common styles\n    @include cols;\n\n    // * Loop to generate each span \n    @for $i from 2 through $col-qty {\n        .col#{$i} {\n            width: ($col-width * $i) + ($gutter * $i) - $gutter;\n        }\n    }\n\n    @for $i from 1 through ($col-qty - 2) {\n        .pre#{$i} {\n            margin-left: ($col-width * $i) + ($gutter * $i) + ($gutter / 2);\n        }\n    }\n\n    @for $i from 1 through ($col-qty - 2) {\n        .suf#{$i} {\n            margin-right: ($col-width * $i) + ($gutter * $i);\n        }\n    }\n\n    // *\n    // * Additional grid utilities\n    // *\n\n    // * Force float a span to the right\n    .colr {\n        float: right;\n        margin: 0 $gutter/2;\n    }\n\n    // * Remove left margin from span\n    .alpha {\n        margin-left: 0;\n    }\n\n    // * Remove right margin from span\n    .omega {\n        margin-right: 0;\n    }\n\n    // * Clear helper\n    .clear {\n        clear: both;\n    }\n\n    // * center span in container\n    .center {\n        float: none;\n        margin: 0 auto;\n    }\n}\n","/*\n * Hoisin.scss\n * CSS responsive framework boilerplate\n * Create your own grids, plugin anything\n * Version: 0.9.15\n * Created by: Cyber-Duck Ltd <info@cyber-duck.co.uk>,\n *             Ramon Lapenta <me@ramonlapenta.com>\n *\n */\n@media (min-width: 1024px) {\n  .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {\n    float: left;\n    margin: 0 10px;\n  }\n  .container {\n    margin: 0 auto;\n    width: 960px;\n  }\n  .container:after {\n    clear: both;\n    content: '';\n    display: block;\n  }\n  .col2 > .container {\n    margin: 0 0 0 -10px;\n    width: 160px;\n  }\n  .col3 > .container {\n    margin: 0 0 0 -10px;\n    width: 240px;\n  }\n  .col4 > .container {\n    margin: 0 0 0 -10px;\n    width: 320px;\n  }\n  .col5 > .container {\n    margin: 0 0 0 -10px;\n    width: 400px;\n  }\n  .col6 > .container {\n    margin: 0 0 0 -10px;\n    width: 480px;\n  }\n  .col7 > .container {\n    margin: 0 0 0 -10px;\n    width: 560px;\n  }\n  .col8 > .container {\n    margin: 0 0 0 -10px;\n    width: 640px;\n  }\n  .col9 > .container {\n    margin: 0 0 0 -10px;\n    width: 720px;\n  }\n  .col10 > .container {\n    margin: 0 0 0 -10px;\n    width: 800px;\n  }\n  .col11 > .container {\n    margin: 0 0 0 -10px;\n    width: 880px;\n  }\n  .col12 > .container {\n    margin: 0 0 0 -10px;\n    width: 960px;\n  }\n  .col2 {\n    width: 140px;\n  }\n  .col3 {\n    width: 220px;\n  }\n  .col4 {\n    width: 300px;\n  }\n  .col5 {\n    width: 380px;\n  }\n  .col6 {\n    width: 460px;\n  }\n  .col7 {\n    width: 540px;\n  }\n  .col8 {\n    width: 620px;\n  }\n  .col9 {\n    width: 700px;\n  }\n  .col10 {\n    width: 780px;\n  }\n  .col11 {\n    width: 860px;\n  }\n  .col12 {\n    width: 940px;\n  }\n  .pre1 {\n    margin-left: 90px;\n  }\n  .pre2 {\n    margin-left: 170px;\n  }\n  .pre3 {\n    margin-left: 250px;\n  }\n  .pre4 {\n    margin-left: 330px;\n  }\n  .pre5 {\n    margin-left: 410px;\n  }\n  .pre6 {\n    margin-left: 490px;\n  }\n  .pre7 {\n    margin-left: 570px;\n  }\n  .pre8 {\n    margin-left: 650px;\n  }\n  .pre9 {\n    margin-left: 730px;\n  }\n  .pre10 {\n    margin-left: 810px;\n  }\n  .suf1 {\n    margin-right: 80px;\n  }\n  .suf2 {\n    margin-right: 160px;\n  }\n  .suf3 {\n    margin-right: 240px;\n  }\n  .suf4 {\n    margin-right: 320px;\n  }\n  .suf5 {\n    margin-right: 400px;\n  }\n  .suf6 {\n    margin-right: 480px;\n  }\n  .suf7 {\n    margin-right: 560px;\n  }\n  .suf8 {\n    margin-right: 640px;\n  }\n  .suf9 {\n    margin-right: 720px;\n  }\n  .suf10 {\n    margin-right: 800px;\n  }\n  .colr {\n    float: right;\n    margin: 0 10px;\n  }\n  .alpha {\n    margin-left: 0;\n  }\n  .omega {\n    margin-right: 0;\n  }\n  .clear {\n    clear: both;\n  }\n  .center {\n    float: none;\n    margin: 0 auto;\n  }\n}\n\n@media (min-width: 1360px) {\n  .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10 {\n    float: left;\n    margin: 0 15px;\n  }\n  .col12 {\n    margin: 0 15px;\n    width: 1170px;\n  }\n  .col2 {\n    width: 170px;\n  }\n  .col3 {\n    width: 270px;\n  }\n  .col4 {\n    width: 370px;\n  }\n  .col5 {\n    width: 470px;\n  }\n  .col6 {\n    width: 570px;\n  }\n  .col7 {\n    width: 670px;\n  }\n  .col8 {\n    width: 770px;\n  }\n  .col9 {\n    width: 870px;\n  }\n  .col10 {\n    width: 970px;\n  }\n  .col11 {\n    width: 1070px;\n  }\n  .pre1 {\n    margin-left: 115px;\n  }\n  .pre2 {\n    margin-left: 215px;\n  }\n  .pre3 {\n    margin-left: 315px;\n  }\n  .pre4 {\n    margin-left: 415px;\n  }\n  .pre5 {\n    margin-left: 515px;\n  }\n  .pre6 {\n    margin-left: 615px;\n  }\n  .pre7 {\n    margin-left: 715px;\n  }\n  .pre8 {\n    margin-left: 815px;\n  }\n  .pre9 {\n    margin-left: 915px;\n  }\n  .pre10 {\n    margin-left: 1015px;\n  }\n  .suf1 {\n    margin-right: 115px;\n  }\n  .suf2 {\n    margin-right: 215px;\n  }\n  .suf3 {\n    margin-right: 315px;\n  }\n  .suf4 {\n    margin-right: 415px;\n  }\n  .suf5 {\n    margin-right: 515px;\n  }\n  .suf6 {\n    margin-right: 615px;\n  }\n  .suf7 {\n    margin-right: 715px;\n  }\n  .suf8 {\n    margin-right: 815px;\n  }\n  .suf9 {\n    margin-right: 915px;\n  }\n  .suf10 {\n    margin-right: 1015px;\n  }\n  .container {\n    width: 1200px;\n  }\n  .col2 > .container {\n    margin: 0 0 0 -15px;\n    width: 200px;\n  }\n  .col3 > .container {\n    margin: 0 0 0 -15px;\n    width: 300px;\n  }\n  .col4 > .container {\n    margin: 0 0 0 -15px;\n    width: 400px;\n  }\n  .col5 > .container {\n    margin: 0 0 0 -15px;\n    width: 500px;\n  }\n  .col6 > .container {\n    margin: 0 0 0 -15px;\n    width: 600px;\n  }\n  .col7 > .container {\n    margin: 0 0 0 -15px;\n    width: 700px;\n  }\n  .col8 > .container {\n    margin: 0 0 0 -15px;\n    width: 800px;\n  }\n  .col9 > .container {\n    margin: 0 0 0 -15px;\n    width: 900px;\n  }\n  .col10 > .container {\n    margin: 0 0 0 -15px;\n    width: 1000px;\n  }\n  .col11 > .container {\n    margin: 0 0 0 -15px;\n    width: 1100px;\n  }\n  .col12 > .container {\n    margin: 0 0 0 -15px;\n    width: 1200px;\n  }\n  .colr {\n    float: right;\n    margin: 0 15px;\n  }\n  .alpha {\n    margin-left: 0;\n  }\n  .omega {\n    margin-right: 0;\n  }\n  .clear {\n    clear: both;\n  }\n  .center {\n    float: none;\n    margin: 0 auto;\n  }\n}\n\n@media (min-width: 680px) and (max-width: 1023px) {\n  .wrap {\n    overflow: hidden;\n    width: 100%;\n  }\n  .container {\n    width: 100%;\n    padding: 0 5px;\n    box-sizing: border-box;\n  }\n  .container::after {\n    clear: both;\n    content: '';\n    display: block;\n  }\n  .container .container {\n    width: 102%;\n    width: calc(100% + 20px);\n    margin-left: -10px;\n  }\n  .col12,\n  .col11,\n  .col10,\n  .col9,\n  .col8,\n  .col7 {\n    margin: 0;\n    padding: 0 5px;\n    width: 100%;\n    box-sizing: border-box;\n  }\n  .col6,\n  .col5,\n  .col4,\n  .col3 {\n    float: left;\n    margin: 0;\n    padding: 0 5px;\n    width: 50%;\n    box-sizing: border-box;\n  }\n  .col2 {\n    float: left;\n    margin: 0;\n    padding: 0 5px;\n    width: 33.33%;\n    box-sizing: border-box;\n  }\n  .m-full {\n    width: 100%;\n  }\n  .m-full.colr {\n    float: none;\n  }\n  .m-half {\n    float: left;\n    width: 50%;\n  }\n  .m-1_3 {\n    float: left;\n    width: 33.33%;\n  }\n  .m-2_3 {\n    float: left;\n    width: 66.66%;\n  }\n  .colr {\n    float: right;\n  }\n  .alpha {\n    margin-left: 0;\n  }\n  .omega {\n    margin-right: 0;\n  }\n  .clear {\n    clear: both;\n  }\n  .center {\n    float: none;\n    margin: 0 auto;\n  }\n}\n\n@media (min-width: 120px) and (max-width: 679px) {\n  .wrap {\n    overflow: hidden;\n    width: 100%;\n  }\n  .container {\n    width: 100%;\n    padding: 0 5px;\n    box-sizing: border-box;\n  }\n  .container:after {\n    clear: both;\n    content: '';\n    display: block;\n  }\n  .container .container {\n    width: 102%;\n    width: calc(100% + 20px);\n    margin-left: -10px;\n  }\n  .col12,\n  .col11,\n  .col10,\n  .col9,\n  .col8,\n  .col7,\n  .col6,\n  .col5,\n  .col4,\n  .col3 {\n    margin: 0;\n    padding: 0 5px;\n    width: 100%;\n    box-sizing: border-box;\n  }\n  .col2 {\n    float: left;\n    margin: 0;\n    padding: 0 5px;\n    width: 50%;\n    box-sizing: border-box;\n  }\n  .s-full {\n    float: none;\n    margin: 0;\n    padding: 0 5px;\n    width: 100%;\n    box-sizing: border-box;\n  }\n  .s-half {\n    float: left;\n    margin: 0;\n    padding: 0 5px;\n    width: 50%;\n    box-sizing: border-box;\n  }\n  .clear {\n    clear: both;\n  }\n}\n","// *\n// * Grid system\n// * Define the size of the container using extra large variables\n// *\n\n// * Generate a common style for all spans\n%base-xl-col {\n    float: left;\n    margin: 0 $xl-gutter/2;\n}\n\n///* \n// * Cols\n// * Mixin to create the col spans using the previous empty % declaration\n// *\n// * @include cols;\n// */\n@mixin cols {\n    @for $i from 1 to $col-qty - 1 {\n        .col#{$i} { @extend %base-xl-col; }\n    }\n}\n\n// Output the grid only if variable set to true\n@if ($include-grid) {\n    $wrap: $xl-col-width * 12 + $xl-gutter * 11;\n\n    // * Output the common span styles\n    @include cols;\n\n    // Define widths for each span\n    .col#{$col-qty} {\n        margin: 0 $xl-gutter/2; // Full width, doesn't need float\n        width: ($xl-col-width * $col-qty) + ($xl-gutter * $col-qty) - $xl-gutter;\n    }\n\n    @for $i from 2 to $col-qty {\n        .col#{$i} {\n            width: $xl-col-width * $i + $xl-gutter * $i - $xl-gutter;\n        }\n    }\n\n    @for $i from 1 through 10 {\n        .pre#{$i} {\n            margin-left: ($xl-col-width * $i) + ($xl-gutter * $i) + ($xl-gutter / 2);\n        }\n    }\n\n    @for $i from 1 through 10 {\n        .suf#{$i} {\n            margin-right: ($xl-col-width * $i) + ($xl-gutter * $i) + ($xl-gutter / 2);\n        }\n    }\n\n    .container {\n        width: $wrap + $xl-gutter;\n    }\n\n    @for $i from 2 through $col-qty {\n        .col#{$i} > .container {\n            margin: 0 0 0 0 -($xl-gutter/2);\n            width: ($xl-col-width * $i) + ($xl-gutter * $i);\n        }\n    }\n\n    // * Grid utilities\n    .colr {\n        float: right;\n        margin: 0 $xl-gutter/2;\n    }\n\n    .alpha {\n        margin-left: 0;\n    }\n\n    .omega {\n        margin-right: 0;\n    }\n\n    .clear {\n        clear: both;\n    }\n\n    .center {\n        float: none;\n        margin: 0 auto;\n    }\n}\n","// * Grid system\n// * Define the properties of the flexible container\n// *\n\n// Output the grid only if variable set to true\n@if ($include-grid) {\n    .wrap {\n        overflow: hidden;\n        width: 100%;\n    }\n\n    .container {\n        width: 100%;\n        padding: 0 ($gutter/4);\n        box-sizing: border-box;\n        \n        &::after {\n            clear: both;\n            content: '';\n            display: block;\n        }\n\n        .container {\n            width: 102%;\n            width: calc(100% + #{$gutter});\n            margin-left: -($gutter/2);\n        }\n    }\n\n    .col12, \n    .col11, \n    .col10, \n    .col9, \n    .col8, \n    .col7 {\n        margin: 0;\n        padding: 0 ($gutter/4);\n        width: 100%;\n        box-sizing: border-box;\n    }\n\n    .col6, \n    .col5, \n    .col4, \n    .col3 {\n        float: left;\n        margin: 0;\n        padding: 0 ($gutter/4);\n        width: 50%;\n        box-sizing: border-box;\n    }\n\n    .col2 {\n        float: left;\n        margin: 0;\n        padding: 0 ($gutter/4);\n        width: 33.33%;\n        box-sizing: border-box;\n    }\n\n    .m-full {\n        width: 100%;\n        &.colr {\n            float: none;\n        }\n    }\n\n    .m-half {\n        float: left;\n        width: 50%;\n    }\n\n    .m-1_3 {\n        float: left;\n        width: 33.33%;\n    }\n\n    .m-2_3 {\n        float: left;\n        width: 66.66%;\n    }\n\n    // * Additional grid utilities\n    .colr {\n        float: right;\n    }\n\n    .alpha {\n        margin-left: 0;\n    }\n\n    .omega {\n        margin-right: 0;\n    }\n\n    .clear {\n        clear: both;\n    }\n\n    .center {\n        float: none;\n        margin: 0 auto;\n    }\n}","// * Grid system\n// * Define the properties of the flexible container\n// *\n\n// Output the grid only if variable set to true\n@if ($include-grid) {\n    .wrap {\n        overflow: hidden;\n        width: 100%;\n    }\n\n    .container {\n        width: 100%;\n        padding: 0 ($gutter/4);\n        box-sizing: border-box;\n\n        &:after {\n            clear: both;\n            content: '';\n            display: block;\n        }\n        \n        .container {\n            width: 102%;\n            width: calc(100% + #{$gutter});\n            margin-left: -($gutter/2);\n        }\n    }\n\n    .col12, \n    .col11, \n    .col10, \n    .col9, \n    .col8, \n    .col7, \n    .col6, \n    .col5, \n    .col4, \n    .col3 {\n        margin: 0;\n        padding: 0 ($gutter/4);\n        width: 100%;\n        box-sizing: border-box;\n    }\n\n    .col2 {\n        float: left;\n        margin: 0;\n        padding: 0 ($gutter/4);\n        width: 50%;\n        box-sizing: border-box;\n    }\n\n    .s-full {\n        float: none;\n        margin: 0;\n        padding: 0 ($gutter/4);\n        width: 100%;\n        box-sizing: border-box;\n    }\n\n    .s-half {\n        float: left;\n        margin: 0;\n        padding: 0 ($gutter/4);\n        width: 50%;\n        box-sizing: border-box;\n    }\n\n    .clear {\n        clear: both;\n    }\n}\n"],"sourceRoot":"/source/"}
\ No newline at end of file
diff --git a/css/sample.css b/css/sample.css
index 4bf94b5..0ef3447 100644
--- a/css/sample.css
+++ b/css/sample.css
@@ -2,7 +2,7 @@
  * Hoisin.scss
  * CSS responsive framework boilerplate
  * Create your own grids, plugin anything
- * Version: 0.9.14
+ * Version: 0.9.15
  * Created by: Cyber-Duck Ltd <info@cyber-duck.co.uk>,
  *             Ramon Lapenta <me@ramonlapenta.com>
  *
diff --git a/css/style.css b/css/style.css
index d37efae..fdb14cd 100644
--- a/css/style.css
+++ b/css/style.css
@@ -2,7 +2,7 @@
  * Hoisin.scss
  * CSS responsive framework boilerplate
  * Create your own grids, plugin anything
- * Version: 0.9.14
+ * Version: 0.9.15
  * Created by: Cyber-Duck Ltd <info@cyber-duck.co.uk>,
  *             Ramon Lapenta <me@ramonlapenta.com>
  *
diff --git a/package.json b/package.json
index 82565d8..8d25619 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "hoisin.scss",
   "title": "Hoisin.scss",
   "description": "A simple responsive mini framework to kick start your project.",
-  "version": "0.9.14",
+  "version": "0.9.15",
   "homepage": "https://github.com/Cyber-Duck/hoisin.scss",
   "license": "ISC",
   "author": {
diff --git a/scss/_version.scss b/scss/_version.scss
index cf961b4..221a680 100644
--- a/scss/_version.scss
+++ b/scss/_version.scss
@@ -2,7 +2,7 @@
  * Hoisin.scss
  * CSS responsive framework boilerplate
  * Create your own grids, plugin anything
- * Version: 0.9.14
+ * Version: 0.9.15
  * Created by: Cyber-Duck Ltd <info@cyber-duck.co.uk>,
  *             Ramon Lapenta <me@ramonlapenta.com>
  *