flint-gs 2.0.3 → 2.0.4

data/tests/input/functions/lib/_support-syntax-bem.scss

@@ -0,0 +1,14 @@
+/*
+ * Parser to support BEM syntax
+ */
+@include describe("[function] support-syntax-bem") {
+
+    $selectors: ".block__element__element--modifier";
+
+    @include it("should expect selector string to be parsed to valid list of BEM selectors") {
+        @include should(expect(
+            flint-support-syntax-bem($selectors)),
+            to(be((".block", ".block__element", ".block__element__element--modifier")))
+        );
+    }
+}

data/tests/input/functions/lib/_support-syntax.scss

@@ -0,0 +1,21 @@
+/*
+ * Support syntax
+ */
+@include describe("[function] support-syntax") {
+
+    $selectors: ".block__element--modifier";
+
+    @include it("should expect truthy value to return from supported syntax") {
+        @include should(expect(
+            flint-support-syntax("BEM", $selectors)),
+            to(be-truthy())
+        );
+    }
+
+    @include it("should expect to return null if invalid syntax is passed") {
+        @include should(expect(
+            flint-support-syntax("OOCSS", $selectors)),
+            to(be((false)))
+        );
+    }
+}

data/tests/input/functions/lib/_types-in-list.scss

@@ -0,0 +1,50 @@
+/*
+ * Checks type of each item in list
+ */
+@include describe("[function] types-in-list") {
+
+    $list-of-numbers: 1, 2, 3, 4, 5;
+    $list-of-strings: "one", "two", "three";
+    $mixed-list: 1, "two", 3, "four";
+    $string: "string";
+
+    @include it("should expect to return false if list is not passed") {
+        @include should(expect(
+            flint-types-in-list($string)),
+            to(be(false))
+        );
+    }
+
+    @include it("should expect types to be asserted in list") {
+        @include should(expect(
+            flint-types-in-list($list-of-numbers)),
+            to(be(true))
+        );
+        @include should(expect(
+            flint-types-in-list($list-of-numbers, "number")),
+            to(be((true)))
+        );
+        @include should(expect(
+            flint-types-in-list($list-of-strings, "string", 3)),
+            to(be((true)))
+        );
+        @include should(expect(
+            flint-types-in-list($mixed-list, "number" "string" "number" "string", 4)),
+            to(be((true)))
+        );
+    }
+
+    @include it("should expect auto asserted types to return false") {
+        @include should(expect(
+            flint-types-in-list($mixed-list)),
+            to(be((false)))
+        );
+    }
+
+    @include it("should expect asserted length to return false") {
+        @include should(expect(
+            flint-types-in-list($list-of-strings, "string", 1)),
+            to(be((false)))
+        );
+    }
+}

data/tests/input/functions/lib/_use-syntax.scss

@@ -0,0 +1,14 @@
+/*
+ * Use global syntax
+ */
+@include describe("[function] use-syntax") {
+
+    $selectors: ".block__element--modifier";
+
+    @include it("should expect to return false unless syntax is set") {
+        @include should(expect(
+            flint-use-syntax($selectors)),
+            to(be(false))
+        );
+    }
+}

data/tests/input/output.scss

@@ -0,0 +1,243 @@
+/**
+ * Configuration map
+ */
+$flint: (
+    "breakpoints": (
+        "desktop": (
+            "columns": 16,
+            "breakpoint": 80em
+        ),
+        "laptop": (
+            "columns": 12,
+            "breakpoint": 60em
+        ),
+        "tablet": (
+            "columns": 8,
+            "breakpoint": 40em
+        ),
+        "mobile": (
+            "columns": 4,
+            "breakpoint": 20em
+        )
+    ),
+    "settings": (
+        "default": "mobile",
+        "grid": "fluid",
+        "gutter": 0.625em,
+        "float-direction": "left",
+        "max-width": true,
+        "center-container": true,
+        "border-box-sizing": true,
+        "instance-maps": true,
+        "support-syntax": false,
+        "debug-mode": false
+    )
+);
+
+// Bootcamp
+@import "../bootcamp/bootcamp";
+
+// Flint
+@import "../../stylesheets/flint";
+
+// Enable development mode
+$flint__development-mode: true !global;
+
+// Test speed improvements
+// $flint__use-ruby-functions: false !global;
+
+/*
+ * BEGIN TESTS
+ * -----------
+ */
+@include runner-start;
+/*
+ * -----------
+ * BEGIN TESTS
+ */
+
+@include it("should expect foundation to not be set") {
+    @include should(expect($flint__foundation),
+        to(be("non-existent"))
+    );
+}
+
+@include _("foundation");
+
+@include it("should expect foundation to be set") {
+    @include should(expect($flint__foundation),
+        to(be("existent"))
+    );
+}
+
+@import "functions/functions";
+
+/*
+ * END TESTS
+ * ---------
+ */
+@include runner-end;
+/*
+ * ---------
+ * END TESTS
+ */
+
+
+
+/*
+ * Visual HTML test
+ */
+$color__blue: #2C3F52;
+$color__blue--dark: #15202A;
+$color__blue--darkest: #0E181E;
+$color__yellow: #FFF87B;
+
+// Pseudo content
+@mixin col-num($i) {
+    &:before {
+        @include _(desktop) {
+            content: "#{$i} of 16";
+        }
+        @include _(laptop) {
+            @if $i > 12 { $i: 12; }
+            content: "#{$i} of 12";
+        }
+        @include _(tablet) {
+            @if $i > 8 { $i: 8; }
+            content: "#{$i} of 8";
+        }
+        @include _(mobile) {
+            @if $i > 4 { $i: 4; }
+            content: "#{$i} of 4";
+        }
+    }
+}
+
+// Generate cols
+@for $i from 1 through 16 {
+    .col-#{$i} {
+
+        @if $i == 16 {
+
+            @include _($i 12 8 4);
+            @include col-num($i);
+
+            .col-#{$i}-child {
+                @include _($i/2 12/2 8/2 4/2, auto);
+                @include col-num($i/2);
+
+                .col-#{$i}-grandchild {
+                    @include _($i/4 12/4 8/4 4/4, auto);
+                    @include col-num($i/4);
+                }
+            }
+
+        } @else if $i > 12 {
+
+            @include _($i 12 8 4);
+            @include col-num($i);
+
+            .col-#{$i}-child {
+                @include _($i/2 12/2 8/2 4/2, auto);
+                @include col-num($i/2);
+            }
+
+        } @else if $i > 8 {
+
+            @include _($i $i 8 4);
+            @include col-num($i);
+
+            .col-#{$i}-child {
+                @include _($i/2 $i/2 8/2 4/2, auto);
+                @include col-num($i/2);
+            }
+
+        } @else if $i > 4 {
+
+            @include _($i $i $i 4);
+            @include col-num($i);
+
+            .col-#{$i}-child {
+                @include _($i/2 $i/2 $i/2 4/2, auto);
+                @include col-num($i/2);
+            }
+
+        } @else {
+
+            @include _($i);
+            @include col-num($i);
+
+            .col-#{$i}-child {
+                @include _($i, auto);
+                @include col-num($i);
+            }
+
+        }
+
+        // background: if($i > 10, darken($color__blue, ($i*0.25)), lighten($color__blue, (16/$i)));
+        clear: both;
+
+        div {
+            // background: if($i > 10, lighten($color__blue, ($i*0.25)), darken($color__blue, (16/$i)));
+            height: 100% !important;
+
+            div {
+                // background: if($i > 10, darken($color__blue, ($i*0.25)), lighten($color__blue, (16/$i)));
+            }
+        }
+    }
+}
+
+.col-third {
+    @include _(16/3 12/3 8/3 4/3);
+    // background: $color__blue;
+
+    &:before { content: "1/3"; }
+}
+
+.col-fourth {
+    @include _(16/4 12/4 8/4 4/4);
+    // background: $color__blue;
+
+    &:before { content: "1/4"; }
+}
+
+.col-fifth {
+    @include _(16/5 12/5 8/5 4/5);
+    // background: $color__blue;
+
+    &:before { content: "1/5"; }
+
+    .col-fifth-child {
+        @include _((16/5)/3 (12/5)/3 (8/5)/3 (4/5)/3, auto);
+        height: 100% !important;
+    }
+}
+
+div[class*="col"] {
+    position: relative;
+    font: 10px Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
+    color: $color__yellow;
+    height: 120px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    padding: 2em 0;
+    outline: lighten($color__blue, 10%) solid 2px;
+
+    &:before {
+        position: absolute;
+        top: 1em;
+        left: 1em;
+    }
+}
+
+section {
+    background: $color__blue--darkest;
+    // & + & { background: darken($color__blue--darkest, 5%); }
+    // & + & + & { background: darken($color__blue--darkest, 10%); }
+    // & + & + & + & { background: darken($color__blue--darkest, 15%); }
+}
+
+.container {
+    @include _(container, clear);
+}

data/tests/output/output.css

@@ -0,0 +1,1900 @@
+@charset "UTF-8";
+*, *:before, *:after {
+  box-sizing: border-box;
+}
+@media (min-width: 60.0625em) {
+  .instance {
+    float: left;
+    width: 23.4375%;
+    margin-right: 0.78125%;
+    margin-left: 0.78125%;
+  }
+}
+
+.parent-instance {
+  float: left;
+  width: 93.75%;
+  margin-right: 3.125%;
+  margin-left: 3.125%;
+}
+@media (min-width: 60.0625em) {
+  .parent-instance {
+    width: 23.4375%;
+    margin-right: 0.78125%;
+    margin-left: 0.78125%;
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .parent-instance {
+    width: 31.25%;
+    margin-right: 1.04167%;
+    margin-left: 1.04167%;
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .parent-instance {
+    width: 46.875%;
+    margin-right: 1.5625%;
+    margin-left: 1.5625%;
+  }
+}
+.parent-instance .child-instance {
+  float: left;
+  width: 43.33333%;
+  margin-right: 3.33333%;
+  margin-left: 3.33333%;
+}
+@media (min-width: 60.0625em) {
+  .parent-instance .child-instance {
+    width: 43.33333%;
+    margin-right: 3.33333%;
+    margin-left: 3.33333%;
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .parent-instance .child-instance {
+    width: 43.33333%;
+    margin-right: 3.33333%;
+    margin-left: 3.33333%;
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .parent-instance .child-instance {
+    width: 43.33333%;
+    margin-right: 3.33333%;
+    margin-left: 3.33333%;
+  }
+}
+
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .parent-instance {
+    float: left;
+    width: 31.25%;
+    margin-right: 1.04167%;
+    margin-left: 1.04167%;
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .parent-instance .child-instance {
+    float: left;
+    width: 14.58333%;
+    margin-right: 1.04167%;
+    margin-left: 1.04167%;
+  }
+}
+
+@media (min-width: 60.0625em) {
+  .parent-instance {
+    float: left;
+    width: 23.4375%;
+    margin-right: 0.78125%;
+    margin-left: 0.78125%;
+  }
+}
+@media (min-width: 60.0625em) {
+  .parent-instance .child-instance {
+    float: left;
+    width: 10.9375%;
+    margin-right: 0.78125%;
+    margin-left: 0.78125%;
+  }
+}
+
+Test Results {
+  Success: true;
+  Stats:  ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔;
+  Tests: 77;
+  Asserts: 177;
+  Passed: 77;
+  Failed: 0;
+  Skipped: 0;
+}
+
+.col-1 {
+  float: left;
+  width: 18.75%;
+  margin-right: 3.125%;
+  margin-left: 3.125%;
+  clear: both;
+}
+@media (min-width: 60.0625em) {
+  .col-1 {
+    width: 4.6875%;
+    margin-right: 0.78125%;
+    margin-left: 0.78125%;
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-1 {
+    width: 6.25%;
+    margin-right: 1.04167%;
+    margin-left: 1.04167%;
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-1 {
+    width: 9.375%;
+    margin-right: 1.5625%;
+    margin-left: 1.5625%;
+  }
+}
+@media (min-width: 60.0625em) {
+  .col-1:before {
+    content: "1 of 16";
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-1:before {
+    content: "1 of 12";
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-1:before {
+    content: "1 of 8";
+  }
+}
+@media (min-width: 0) and (max-width: 20em) {
+  .col-1:before {
+    content: "1 of 4";
+  }
+}
+.col-1 .col-1-child {
+  float: left;
+  width: 66.66667%;
+  margin-right: 16.66667%;
+  margin-left: 16.66667%;
+}
+@media (min-width: 60.0625em) {
+  .col-1 .col-1-child {
+    width: 66.66667%;
+    margin-right: 16.66667%;
+    margin-left: 16.66667%;
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-1 .col-1-child {
+    width: 66.66667%;
+    margin-right: 16.66667%;
+    margin-left: 16.66667%;
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-1 .col-1-child {
+    width: 66.66667%;
+    margin-right: 16.66667%;
+    margin-left: 16.66667%;
+  }
+}
+@media (min-width: 60.0625em) {
+  .col-1 .col-1-child:before {
+    content: "1 of 16";
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-1 .col-1-child:before {
+    content: "1 of 12";
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-1 .col-1-child:before {
+    content: "1 of 8";
+  }
+}
+@media (min-width: 0) and (max-width: 20em) {
+  .col-1 .col-1-child:before {
+    content: "1 of 4";
+  }
+}
+.col-1 div {
+  height: 100% !important;
+}
+
+.col-2 {
+  float: left;
+  width: 43.75%;
+  margin-right: 3.125%;
+  margin-left: 3.125%;
+  clear: both;
+}
+@media (min-width: 60.0625em) {
+  .col-2 {
+    width: 10.9375%;
+    margin-right: 0.78125%;
+    margin-left: 0.78125%;
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-2 {
+    width: 14.58333%;
+    margin-right: 1.04167%;
+    margin-left: 1.04167%;
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-2 {
+    width: 21.875%;
+    margin-right: 1.5625%;
+    margin-left: 1.5625%;
+  }
+}
+@media (min-width: 60.0625em) {
+  .col-2:before {
+    content: "2 of 16";
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-2:before {
+    content: "2 of 12";
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-2:before {
+    content: "2 of 8";
+  }
+}
+@media (min-width: 0) and (max-width: 20em) {
+  .col-2:before {
+    content: "2 of 4";
+  }
+}
+.col-2 .col-2-child {
+  float: left;
+  width: 85.71429%;
+  margin-right: 7.14286%;
+  margin-left: 7.14286%;
+}
+@media (min-width: 60.0625em) {
+  .col-2 .col-2-child {
+    width: 85.71429%;
+    margin-right: 7.14286%;
+    margin-left: 7.14286%;
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-2 .col-2-child {
+    width: 85.71429%;
+    margin-right: 7.14286%;
+    margin-left: 7.14286%;
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-2 .col-2-child {
+    width: 85.71429%;
+    margin-right: 7.14286%;
+    margin-left: 7.14286%;
+  }
+}
+@media (min-width: 60.0625em) {
+  .col-2 .col-2-child:before {
+    content: "2 of 16";
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-2 .col-2-child:before {
+    content: "2 of 12";
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-2 .col-2-child:before {
+    content: "2 of 8";
+  }
+}
+@media (min-width: 0) and (max-width: 20em) {
+  .col-2 .col-2-child:before {
+    content: "2 of 4";
+  }
+}
+.col-2 div {
+  height: 100% !important;
+}
+
+.col-3 {
+  float: left;
+  width: 68.75%;
+  margin-right: 3.125%;
+  margin-left: 3.125%;
+  clear: both;
+}
+@media (min-width: 60.0625em) {
+  .col-3 {
+    width: 17.1875%;
+    margin-right: 0.78125%;
+    margin-left: 0.78125%;
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-3 {
+    width: 22.91667%;
+    margin-right: 1.04167%;
+    margin-left: 1.04167%;
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-3 {
+    width: 34.375%;
+    margin-right: 1.5625%;
+    margin-left: 1.5625%;
+  }
+}
+@media (min-width: 60.0625em) {
+  .col-3:before {
+    content: "3 of 16";
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-3:before {
+    content: "3 of 12";
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-3:before {
+    content: "3 of 8";
+  }
+}
+@media (min-width: 0) and (max-width: 20em) {
+  .col-3:before {
+    content: "3 of 4";
+  }
+}
+.col-3 .col-3-child {
+  float: left;
+  width: 90.90909%;
+  margin-right: 4.54545%;
+  margin-left: 4.54545%;
+}
+@media (min-width: 60.0625em) {
+  .col-3 .col-3-child {
+    width: 90.90909%;
+    margin-right: 4.54545%;
+    margin-left: 4.54545%;
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-3 .col-3-child {
+    width: 90.90909%;
+    margin-right: 4.54545%;
+    margin-left: 4.54545%;
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-3 .col-3-child {
+    width: 90.90909%;
+    margin-right: 4.54545%;
+    margin-left: 4.54545%;
+  }
+}
+@media (min-width: 60.0625em) {
+  .col-3 .col-3-child:before {
+    content: "3 of 16";
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-3 .col-3-child:before {
+    content: "3 of 12";
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-3 .col-3-child:before {
+    content: "3 of 8";
+  }
+}
+@media (min-width: 0) and (max-width: 20em) {
+  .col-3 .col-3-child:before {
+    content: "3 of 4";
+  }
+}
+.col-3 div {
+  height: 100% !important;
+}
+
+.col-4 {
+  float: left;
+  width: 93.75%;
+  margin-right: 3.125%;
+  margin-left: 3.125%;
+  clear: both;
+}
+@media (min-width: 60.0625em) {
+  .col-4 {
+    width: 23.4375%;
+    margin-right: 0.78125%;
+    margin-left: 0.78125%;
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-4 {
+    width: 31.25%;
+    margin-right: 1.04167%;
+    margin-left: 1.04167%;
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-4 {
+    width: 46.875%;
+    margin-right: 1.5625%;
+    margin-left: 1.5625%;
+  }
+}
+@media (min-width: 60.0625em) {
+  .col-4:before {
+    content: "4 of 16";
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-4:before {
+    content: "4 of 12";
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-4:before {
+    content: "4 of 8";
+  }
+}
+@media (min-width: 0) and (max-width: 20em) {
+  .col-4:before {
+    content: "4 of 4";
+  }
+}
+.col-4 .col-4-child {
+  float: left;
+  width: 93.33333%;
+  margin-right: 3.33333%;
+  margin-left: 3.33333%;
+}
+@media (min-width: 60.0625em) {
+  .col-4 .col-4-child {
+    width: 93.33333%;
+    margin-right: 3.33333%;
+    margin-left: 3.33333%;
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-4 .col-4-child {
+    width: 93.33333%;
+    margin-right: 3.33333%;
+    margin-left: 3.33333%;
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-4 .col-4-child {
+    width: 93.33333%;
+    margin-right: 3.33333%;
+    margin-left: 3.33333%;
+  }
+}
+@media (min-width: 60.0625em) {
+  .col-4 .col-4-child:before {
+    content: "4 of 16";
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-4 .col-4-child:before {
+    content: "4 of 12";
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-4 .col-4-child:before {
+    content: "4 of 8";
+  }
+}
+@media (min-width: 0) and (max-width: 20em) {
+  .col-4 .col-4-child:before {
+    content: "4 of 4";
+  }
+}
+.col-4 div {
+  height: 100% !important;
+}
+
+.col-5 {
+  float: left;
+  width: 93.75%;
+  margin-right: 3.125%;
+  margin-left: 3.125%;
+  clear: both;
+}
+@media (min-width: 60.0625em) {
+  .col-5 {
+    width: 29.6875%;
+    margin-right: 0.78125%;
+    margin-left: 0.78125%;
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-5 {
+    width: 39.58333%;
+    margin-right: 1.04167%;
+    margin-left: 1.04167%;
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-5 {
+    width: 59.375%;
+    margin-right: 1.5625%;
+    margin-left: 1.5625%;
+  }
+}
+@media (min-width: 60.0625em) {
+  .col-5:before {
+    content: "5 of 16";
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-5:before {
+    content: "5 of 12";
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-5:before {
+    content: "5 of 8";
+  }
+}
+@media (min-width: 0) and (max-width: 20em) {
+  .col-5:before {
+    content: "4 of 4";
+  }
+}
+.col-5 .col-5-child {
+  float: left;
+  width: 43.33333%;
+  margin-right: 3.33333%;
+  margin-left: 3.33333%;
+}
+@media (min-width: 60.0625em) {
+  .col-5 .col-5-child {
+    width: 44.73684%;
+    margin-right: 2.63158%;
+    margin-left: 2.63158%;
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-5 .col-5-child {
+    width: 44.73684%;
+    margin-right: 2.63158%;
+    margin-left: 2.63158%;
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-5 .col-5-child {
+    width: 44.73684%;
+    margin-right: 2.63158%;
+    margin-left: 2.63158%;
+  }
+}
+@media (min-width: 60.0625em) {
+  .col-5 .col-5-child:before {
+    content: "2.5 of 16";
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-5 .col-5-child:before {
+    content: "2.5 of 12";
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-5 .col-5-child:before {
+    content: "2.5 of 8";
+  }
+}
+@media (min-width: 0) and (max-width: 20em) {
+  .col-5 .col-5-child:before {
+    content: "2.5 of 4";
+  }
+}
+.col-5 div {
+  height: 100% !important;
+}
+
+.col-6 {
+  float: left;
+  width: 93.75%;
+  margin-right: 3.125%;
+  margin-left: 3.125%;
+  clear: both;
+}
+@media (min-width: 60.0625em) {
+  .col-6 {
+    width: 35.9375%;
+    margin-right: 0.78125%;
+    margin-left: 0.78125%;
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-6 {
+    width: 47.91667%;
+    margin-right: 1.04167%;
+    margin-left: 1.04167%;
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-6 {
+    width: 71.875%;
+    margin-right: 1.5625%;
+    margin-left: 1.5625%;
+  }
+}
+@media (min-width: 60.0625em) {
+  .col-6:before {
+    content: "6 of 16";
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-6:before {
+    content: "6 of 12";
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-6:before {
+    content: "6 of 8";
+  }
+}
+@media (min-width: 0) and (max-width: 20em) {
+  .col-6:before {
+    content: "4 of 4";
+  }
+}
+.col-6 .col-6-child {
+  float: left;
+  width: 43.33333%;
+  margin-right: 3.33333%;
+  margin-left: 3.33333%;
+}
+@media (min-width: 60.0625em) {
+  .col-6 .col-6-child {
+    width: 45.65217%;
+    margin-right: 2.17391%;
+    margin-left: 2.17391%;
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-6 .col-6-child {
+    width: 45.65217%;
+    margin-right: 2.17391%;
+    margin-left: 2.17391%;
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-6 .col-6-child {
+    width: 45.65217%;
+    margin-right: 2.17391%;
+    margin-left: 2.17391%;
+  }
+}
+@media (min-width: 60.0625em) {
+  .col-6 .col-6-child:before {
+    content: "3 of 16";
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-6 .col-6-child:before {
+    content: "3 of 12";
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-6 .col-6-child:before {
+    content: "3 of 8";
+  }
+}
+@media (min-width: 0) and (max-width: 20em) {
+  .col-6 .col-6-child:before {
+    content: "3 of 4";
+  }
+}
+.col-6 div {
+  height: 100% !important;
+}
+
+.col-7 {
+  float: left;
+  width: 93.75%;
+  margin-right: 3.125%;
+  margin-left: 3.125%;
+  clear: both;
+}
+@media (min-width: 60.0625em) {
+  .col-7 {
+    width: 42.1875%;
+    margin-right: 0.78125%;
+    margin-left: 0.78125%;
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-7 {
+    width: 56.25%;
+    margin-right: 1.04167%;
+    margin-left: 1.04167%;
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-7 {
+    width: 84.375%;
+    margin-right: 1.5625%;
+    margin-left: 1.5625%;
+  }
+}
+@media (min-width: 60.0625em) {
+  .col-7:before {
+    content: "7 of 16";
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-7:before {
+    content: "7 of 12";
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-7:before {
+    content: "7 of 8";
+  }
+}
+@media (min-width: 0) and (max-width: 20em) {
+  .col-7:before {
+    content: "4 of 4";
+  }
+}
+.col-7 .col-7-child {
+  float: left;
+  width: 43.33333%;
+  margin-right: 3.33333%;
+  margin-left: 3.33333%;
+}
+@media (min-width: 60.0625em) {
+  .col-7 .col-7-child {
+    width: 46.2963%;
+    margin-right: 1.85185%;
+    margin-left: 1.85185%;
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-7 .col-7-child {
+    width: 46.2963%;
+    margin-right: 1.85185%;
+    margin-left: 1.85185%;
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-7 .col-7-child {
+    width: 46.2963%;
+    margin-right: 1.85185%;
+    margin-left: 1.85185%;
+  }
+}
+@media (min-width: 60.0625em) {
+  .col-7 .col-7-child:before {
+    content: "3.5 of 16";
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-7 .col-7-child:before {
+    content: "3.5 of 12";
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-7 .col-7-child:before {
+    content: "3.5 of 8";
+  }
+}
+@media (min-width: 0) and (max-width: 20em) {
+  .col-7 .col-7-child:before {
+    content: "3.5 of 4";
+  }
+}
+.col-7 div {
+  height: 100% !important;
+}
+
+.col-8 {
+  float: left;
+  width: 93.75%;
+  margin-right: 3.125%;
+  margin-left: 3.125%;
+  clear: both;
+}
+@media (min-width: 60.0625em) {
+  .col-8 {
+    width: 48.4375%;
+    margin-right: 0.78125%;
+    margin-left: 0.78125%;
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-8 {
+    width: 64.58333%;
+    margin-right: 1.04167%;
+    margin-left: 1.04167%;
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-8 {
+    width: 96.875%;
+    margin-right: 1.5625%;
+    margin-left: 1.5625%;
+  }
+}
+@media (min-width: 60.0625em) {
+  .col-8:before {
+    content: "8 of 16";
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-8:before {
+    content: "8 of 12";
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-8:before {
+    content: "8 of 8";
+  }
+}
+@media (min-width: 0) and (max-width: 20em) {
+  .col-8:before {
+    content: "4 of 4";
+  }
+}
+.col-8 .col-8-child {
+  float: left;
+  width: 43.33333%;
+  margin-right: 3.33333%;
+  margin-left: 3.33333%;
+}
+@media (min-width: 60.0625em) {
+  .col-8 .col-8-child {
+    width: 46.77419%;
+    margin-right: 1.6129%;
+    margin-left: 1.6129%;
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-8 .col-8-child {
+    width: 46.77419%;
+    margin-right: 1.6129%;
+    margin-left: 1.6129%;
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-8 .col-8-child {
+    width: 46.77419%;
+    margin-right: 1.6129%;
+    margin-left: 1.6129%;
+  }
+}
+@media (min-width: 60.0625em) {
+  .col-8 .col-8-child:before {
+    content: "4 of 16";
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-8 .col-8-child:before {
+    content: "4 of 12";
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-8 .col-8-child:before {
+    content: "4 of 8";
+  }
+}
+@media (min-width: 0) and (max-width: 20em) {
+  .col-8 .col-8-child:before {
+    content: "4 of 4";
+  }
+}
+.col-8 div {
+  height: 100% !important;
+}
+
+.col-9 {
+  float: left;
+  width: 93.75%;
+  margin-right: 3.125%;
+  margin-left: 3.125%;
+  clear: both;
+}
+@media (min-width: 60.0625em) {
+  .col-9 {
+    width: 54.6875%;
+    margin-right: 0.78125%;
+    margin-left: 0.78125%;
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-9 {
+    width: 72.91667%;
+    margin-right: 1.04167%;
+    margin-left: 1.04167%;
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-9 {
+    width: 96.875%;
+    margin-right: 1.5625%;
+    margin-left: 1.5625%;
+  }
+}
+@media (min-width: 60.0625em) {
+  .col-9:before {
+    content: "9 of 16";
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-9:before {
+    content: "9 of 12";
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-9:before {
+    content: "8 of 8";
+  }
+}
+@media (min-width: 0) and (max-width: 20em) {
+  .col-9:before {
+    content: "4 of 4";
+  }
+}
+.col-9 .col-9-child {
+  float: left;
+  width: 43.33333%;
+  margin-right: 3.33333%;
+  margin-left: 3.33333%;
+}
+@media (min-width: 60.0625em) {
+  .col-9 .col-9-child {
+    width: 47.14286%;
+    margin-right: 1.42857%;
+    margin-left: 1.42857%;
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-9 .col-9-child {
+    width: 47.14286%;
+    margin-right: 1.42857%;
+    margin-left: 1.42857%;
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-9 .col-9-child {
+    width: 46.77419%;
+    margin-right: 1.6129%;
+    margin-left: 1.6129%;
+  }
+}
+@media (min-width: 60.0625em) {
+  .col-9 .col-9-child:before {
+    content: "4.5 of 16";
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-9 .col-9-child:before {
+    content: "4.5 of 12";
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-9 .col-9-child:before {
+    content: "4.5 of 8";
+  }
+}
+@media (min-width: 0) and (max-width: 20em) {
+  .col-9 .col-9-child:before {
+    content: "4 of 4";
+  }
+}
+.col-9 div {
+  height: 100% !important;
+}
+
+.col-10 {
+  float: left;
+  width: 93.75%;
+  margin-right: 3.125%;
+  margin-left: 3.125%;
+  clear: both;
+}
+@media (min-width: 60.0625em) {
+  .col-10 {
+    width: 60.9375%;
+    margin-right: 0.78125%;
+    margin-left: 0.78125%;
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-10 {
+    width: 81.25%;
+    margin-right: 1.04167%;
+    margin-left: 1.04167%;
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-10 {
+    width: 96.875%;
+    margin-right: 1.5625%;
+    margin-left: 1.5625%;
+  }
+}
+@media (min-width: 60.0625em) {
+  .col-10:before {
+    content: "10 of 16";
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-10:before {
+    content: "10 of 12";
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-10:before {
+    content: "8 of 8";
+  }
+}
+@media (min-width: 0) and (max-width: 20em) {
+  .col-10:before {
+    content: "4 of 4";
+  }
+}
+.col-10 .col-10-child {
+  float: left;
+  width: 43.33333%;
+  margin-right: 3.33333%;
+  margin-left: 3.33333%;
+}
+@media (min-width: 60.0625em) {
+  .col-10 .col-10-child {
+    width: 47.4359%;
+    margin-right: 1.28205%;
+    margin-left: 1.28205%;
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-10 .col-10-child {
+    width: 47.4359%;
+    margin-right: 1.28205%;
+    margin-left: 1.28205%;
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-10 .col-10-child {
+    width: 46.77419%;
+    margin-right: 1.6129%;
+    margin-left: 1.6129%;
+  }
+}
+@media (min-width: 60.0625em) {
+  .col-10 .col-10-child:before {
+    content: "5 of 16";
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-10 .col-10-child:before {
+    content: "5 of 12";
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-10 .col-10-child:before {
+    content: "5 of 8";
+  }
+}
+@media (min-width: 0) and (max-width: 20em) {
+  .col-10 .col-10-child:before {
+    content: "4 of 4";
+  }
+}
+.col-10 div {
+  height: 100% !important;
+}
+
+.col-11 {
+  float: left;
+  width: 93.75%;
+  margin-right: 3.125%;
+  margin-left: 3.125%;
+  clear: both;
+}
+@media (min-width: 60.0625em) {
+  .col-11 {
+    width: 67.1875%;
+    margin-right: 0.78125%;
+    margin-left: 0.78125%;
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-11 {
+    width: 89.58333%;
+    margin-right: 1.04167%;
+    margin-left: 1.04167%;
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-11 {
+    width: 96.875%;
+    margin-right: 1.5625%;
+    margin-left: 1.5625%;
+  }
+}
+@media (min-width: 60.0625em) {
+  .col-11:before {
+    content: "11 of 16";
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-11:before {
+    content: "11 of 12";
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-11:before {
+    content: "8 of 8";
+  }
+}
+@media (min-width: 0) and (max-width: 20em) {
+  .col-11:before {
+    content: "4 of 4";
+  }
+}
+.col-11 .col-11-child {
+  float: left;
+  width: 43.33333%;
+  margin-right: 3.33333%;
+  margin-left: 3.33333%;
+}
+@media (min-width: 60.0625em) {
+  .col-11 .col-11-child {
+    width: 47.67442%;
+    margin-right: 1.16279%;
+    margin-left: 1.16279%;
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-11 .col-11-child {
+    width: 47.67442%;
+    margin-right: 1.16279%;
+    margin-left: 1.16279%;
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-11 .col-11-child {
+    width: 46.77419%;
+    margin-right: 1.6129%;
+    margin-left: 1.6129%;
+  }
+}
+@media (min-width: 60.0625em) {
+  .col-11 .col-11-child:before {
+    content: "5.5 of 16";
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-11 .col-11-child:before {
+    content: "5.5 of 12";
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-11 .col-11-child:before {
+    content: "5.5 of 8";
+  }
+}
+@media (min-width: 0) and (max-width: 20em) {
+  .col-11 .col-11-child:before {
+    content: "4 of 4";
+  }
+}
+.col-11 div {
+  height: 100% !important;
+}
+
+.col-12 {
+  float: left;
+  width: 93.75%;
+  margin-right: 3.125%;
+  margin-left: 3.125%;
+  clear: both;
+}
+@media (min-width: 60.0625em) {
+  .col-12 {
+    width: 73.4375%;
+    margin-right: 0.78125%;
+    margin-left: 0.78125%;
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-12 {
+    width: 97.91667%;
+    margin-right: 1.04167%;
+    margin-left: 1.04167%;
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-12 {
+    width: 96.875%;
+    margin-right: 1.5625%;
+    margin-left: 1.5625%;
+  }
+}
+@media (min-width: 60.0625em) {
+  .col-12:before {
+    content: "12 of 16";
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-12:before {
+    content: "12 of 12";
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-12:before {
+    content: "8 of 8";
+  }
+}
+@media (min-width: 0) and (max-width: 20em) {
+  .col-12:before {
+    content: "4 of 4";
+  }
+}
+.col-12 .col-12-child {
+  float: left;
+  width: 43.33333%;
+  margin-right: 3.33333%;
+  margin-left: 3.33333%;
+}
+@media (min-width: 60.0625em) {
+  .col-12 .col-12-child {
+    width: 47.87234%;
+    margin-right: 1.06383%;
+    margin-left: 1.06383%;
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-12 .col-12-child {
+    width: 47.87234%;
+    margin-right: 1.06383%;
+    margin-left: 1.06383%;
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-12 .col-12-child {
+    width: 46.77419%;
+    margin-right: 1.6129%;
+    margin-left: 1.6129%;
+  }
+}
+@media (min-width: 60.0625em) {
+  .col-12 .col-12-child:before {
+    content: "6 of 16";
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-12 .col-12-child:before {
+    content: "6 of 12";
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-12 .col-12-child:before {
+    content: "6 of 8";
+  }
+}
+@media (min-width: 0) and (max-width: 20em) {
+  .col-12 .col-12-child:before {
+    content: "4 of 4";
+  }
+}
+.col-12 div {
+  height: 100% !important;
+}
+
+.col-13 {
+  float: left;
+  width: 93.75%;
+  margin-right: 3.125%;
+  margin-left: 3.125%;
+  clear: both;
+}
+@media (min-width: 60.0625em) {
+  .col-13 {
+    width: 79.6875%;
+    margin-right: 0.78125%;
+    margin-left: 0.78125%;
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-13 {
+    width: 97.91667%;
+    margin-right: 1.04167%;
+    margin-left: 1.04167%;
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-13 {
+    width: 96.875%;
+    margin-right: 1.5625%;
+    margin-left: 1.5625%;
+  }
+}
+@media (min-width: 60.0625em) {
+  .col-13:before {
+    content: "13 of 16";
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-13:before {
+    content: "12 of 12";
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-13:before {
+    content: "8 of 8";
+  }
+}
+@media (min-width: 0) and (max-width: 20em) {
+  .col-13:before {
+    content: "4 of 4";
+  }
+}
+.col-13 .col-13-child {
+  float: left;
+  width: 43.33333%;
+  margin-right: 3.33333%;
+  margin-left: 3.33333%;
+}
+@media (min-width: 60.0625em) {
+  .col-13 .col-13-child {
+    width: 48.03922%;
+    margin-right: 0.98039%;
+    margin-left: 0.98039%;
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-13 .col-13-child {
+    width: 47.87234%;
+    margin-right: 1.06383%;
+    margin-left: 1.06383%;
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-13 .col-13-child {
+    width: 46.77419%;
+    margin-right: 1.6129%;
+    margin-left: 1.6129%;
+  }
+}
+@media (min-width: 60.0625em) {
+  .col-13 .col-13-child:before {
+    content: "6.5 of 16";
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-13 .col-13-child:before {
+    content: "6.5 of 12";
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-13 .col-13-child:before {
+    content: "6.5 of 8";
+  }
+}
+@media (min-width: 0) and (max-width: 20em) {
+  .col-13 .col-13-child:before {
+    content: "4 of 4";
+  }
+}
+.col-13 div {
+  height: 100% !important;
+}
+
+.col-14 {
+  float: left;
+  width: 93.75%;
+  margin-right: 3.125%;
+  margin-left: 3.125%;
+  clear: both;
+}
+@media (min-width: 60.0625em) {
+  .col-14 {
+    width: 85.9375%;
+    margin-right: 0.78125%;
+    margin-left: 0.78125%;
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-14 {
+    width: 97.91667%;
+    margin-right: 1.04167%;
+    margin-left: 1.04167%;
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-14 {
+    width: 96.875%;
+    margin-right: 1.5625%;
+    margin-left: 1.5625%;
+  }
+}
+@media (min-width: 60.0625em) {
+  .col-14:before {
+    content: "14 of 16";
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-14:before {
+    content: "12 of 12";
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-14:before {
+    content: "8 of 8";
+  }
+}
+@media (min-width: 0) and (max-width: 20em) {
+  .col-14:before {
+    content: "4 of 4";
+  }
+}
+.col-14 .col-14-child {
+  float: left;
+  width: 43.33333%;
+  margin-right: 3.33333%;
+  margin-left: 3.33333%;
+}
+@media (min-width: 60.0625em) {
+  .col-14 .col-14-child {
+    width: 48.18182%;
+    margin-right: 0.90909%;
+    margin-left: 0.90909%;
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-14 .col-14-child {
+    width: 47.87234%;
+    margin-right: 1.06383%;
+    margin-left: 1.06383%;
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-14 .col-14-child {
+    width: 46.77419%;
+    margin-right: 1.6129%;
+    margin-left: 1.6129%;
+  }
+}
+@media (min-width: 60.0625em) {
+  .col-14 .col-14-child:before {
+    content: "7 of 16";
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-14 .col-14-child:before {
+    content: "7 of 12";
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-14 .col-14-child:before {
+    content: "7 of 8";
+  }
+}
+@media (min-width: 0) and (max-width: 20em) {
+  .col-14 .col-14-child:before {
+    content: "4 of 4";
+  }
+}
+.col-14 div {
+  height: 100% !important;
+}
+
+.col-15 {
+  float: left;
+  width: 93.75%;
+  margin-right: 3.125%;
+  margin-left: 3.125%;
+  clear: both;
+}
+@media (min-width: 60.0625em) {
+  .col-15 {
+    width: 92.1875%;
+    margin-right: 0.78125%;
+    margin-left: 0.78125%;
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-15 {
+    width: 97.91667%;
+    margin-right: 1.04167%;
+    margin-left: 1.04167%;
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-15 {
+    width: 96.875%;
+    margin-right: 1.5625%;
+    margin-left: 1.5625%;
+  }
+}
+@media (min-width: 60.0625em) {
+  .col-15:before {
+    content: "15 of 16";
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-15:before {
+    content: "12 of 12";
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-15:before {
+    content: "8 of 8";
+  }
+}
+@media (min-width: 0) and (max-width: 20em) {
+  .col-15:before {
+    content: "4 of 4";
+  }
+}
+.col-15 .col-15-child {
+  float: left;
+  width: 43.33333%;
+  margin-right: 3.33333%;
+  margin-left: 3.33333%;
+}
+@media (min-width: 60.0625em) {
+  .col-15 .col-15-child {
+    width: 48.30508%;
+    margin-right: 0.84746%;
+    margin-left: 0.84746%;
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-15 .col-15-child {
+    width: 47.87234%;
+    margin-right: 1.06383%;
+    margin-left: 1.06383%;
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-15 .col-15-child {
+    width: 46.77419%;
+    margin-right: 1.6129%;
+    margin-left: 1.6129%;
+  }
+}
+@media (min-width: 60.0625em) {
+  .col-15 .col-15-child:before {
+    content: "7.5 of 16";
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-15 .col-15-child:before {
+    content: "7.5 of 12";
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-15 .col-15-child:before {
+    content: "7.5 of 8";
+  }
+}
+@media (min-width: 0) and (max-width: 20em) {
+  .col-15 .col-15-child:before {
+    content: "4 of 4";
+  }
+}
+.col-15 div {
+  height: 100% !important;
+}
+
+.col-16 {
+  float: left;
+  width: 93.75%;
+  margin-right: 3.125%;
+  margin-left: 3.125%;
+  clear: both;
+}
+@media (min-width: 60.0625em) {
+  .col-16 {
+    width: 98.4375%;
+    margin-right: 0.78125%;
+    margin-left: 0.78125%;
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-16 {
+    width: 97.91667%;
+    margin-right: 1.04167%;
+    margin-left: 1.04167%;
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-16 {
+    width: 96.875%;
+    margin-right: 1.5625%;
+    margin-left: 1.5625%;
+  }
+}
+@media (min-width: 60.0625em) {
+  .col-16:before {
+    content: "16 of 16";
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-16:before {
+    content: "12 of 12";
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-16:before {
+    content: "8 of 8";
+  }
+}
+@media (min-width: 0) and (max-width: 20em) {
+  .col-16:before {
+    content: "4 of 4";
+  }
+}
+.col-16 .col-16-child {
+  float: left;
+  width: 43.33333%;
+  margin-right: 3.33333%;
+  margin-left: 3.33333%;
+}
+@media (min-width: 60.0625em) {
+  .col-16 .col-16-child {
+    width: 48.4127%;
+    margin-right: 0.79365%;
+    margin-left: 0.79365%;
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-16 .col-16-child {
+    width: 47.87234%;
+    margin-right: 1.06383%;
+    margin-left: 1.06383%;
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-16 .col-16-child {
+    width: 46.77419%;
+    margin-right: 1.6129%;
+    margin-left: 1.6129%;
+  }
+}
+@media (min-width: 60.0625em) {
+  .col-16 .col-16-child:before {
+    content: "8 of 16";
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-16 .col-16-child:before {
+    content: "8 of 12";
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-16 .col-16-child:before {
+    content: "8 of 8";
+  }
+}
+@media (min-width: 0) and (max-width: 20em) {
+  .col-16 .col-16-child:before {
+    content: "4 of 4";
+  }
+}
+.col-16 .col-16-child .col-16-grandchild {
+  float: left;
+  width: 34.61538%;
+  margin-right: 7.69231%;
+  margin-left: 7.69231%;
+}
+@media (min-width: 60.0625em) {
+  .col-16 .col-16-child .col-16-grandchild {
+    width: 46.72131%;
+    margin-right: 1.63934%;
+    margin-left: 1.63934%;
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-16 .col-16-child .col-16-grandchild {
+    width: 45.55556%;
+    margin-right: 2.22222%;
+    margin-left: 2.22222%;
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-16 .col-16-child .col-16-grandchild {
+    width: 43.10345%;
+    margin-right: 3.44828%;
+    margin-left: 3.44828%;
+  }
+}
+@media (min-width: 60.0625em) {
+  .col-16 .col-16-child .col-16-grandchild:before {
+    content: "4 of 16";
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-16 .col-16-child .col-16-grandchild:before {
+    content: "4 of 12";
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-16 .col-16-child .col-16-grandchild:before {
+    content: "4 of 8";
+  }
+}
+@media (min-width: 0) and (max-width: 20em) {
+  .col-16 .col-16-child .col-16-grandchild:before {
+    content: "4 of 4";
+  }
+}
+.col-16 div {
+  height: 100% !important;
+}
+
+.col-third {
+  float: left;
+  width: 27.08333%;
+  margin-right: 3.125%;
+  margin-left: 3.125%;
+}
+@media (min-width: 60.0625em) {
+  .col-third {
+    width: 31.77083%;
+    margin-right: 0.78125%;
+    margin-left: 0.78125%;
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-third {
+    width: 31.25%;
+    margin-right: 1.04167%;
+    margin-left: 1.04167%;
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-third {
+    width: 30.20833%;
+    margin-right: 1.5625%;
+    margin-left: 1.5625%;
+  }
+}
+.col-third:before {
+  content: "1/3";
+}
+
+.col-fourth {
+  float: left;
+  width: 18.75%;
+  margin-right: 3.125%;
+  margin-left: 3.125%;
+}
+@media (min-width: 60.0625em) {
+  .col-fourth {
+    width: 23.4375%;
+    margin-right: 0.78125%;
+    margin-left: 0.78125%;
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-fourth {
+    width: 22.91667%;
+    margin-right: 1.04167%;
+    margin-left: 1.04167%;
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-fourth {
+    width: 21.875%;
+    margin-right: 1.5625%;
+    margin-left: 1.5625%;
+  }
+}
+.col-fourth:before {
+  content: "1/4";
+}
+
+.col-fifth {
+  float: left;
+  width: 13.75%;
+  margin-right: 3.125%;
+  margin-left: 3.125%;
+}
+@media (min-width: 60.0625em) {
+  .col-fifth {
+    width: 18.4375%;
+    margin-right: 0.78125%;
+    margin-left: 0.78125%;
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-fifth {
+    width: 17.91667%;
+    margin-right: 1.04167%;
+    margin-left: 1.04167%;
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-fifth {
+    width: 16.875%;
+    margin-right: 1.5625%;
+    margin-left: 1.5625%;
+  }
+}
+.col-fifth:before {
+  content: "1/5";
+}
+.col-fifth .col-fifth-child {
+  float: left;
+  width: -12.12121%;
+  margin-right: 22.72727%;
+  margin-left: 22.72727%;
+  height: 100% !important;
+}
+@media (min-width: 60.0625em) {
+  .col-fifth .col-fifth-child {
+    width: 24.85876%;
+    margin-right: 4.23729%;
+    margin-left: 4.23729%;
+  }
+}
+@media (min-width: 40.0625em) and (max-width: 60em) {
+  .col-fifth .col-fifth-child {
+    width: 21.70543%;
+    margin-right: 5.81395%;
+    margin-left: 5.81395%;
+  }
+}
+@media (min-width: 20.0625em) and (max-width: 40em) {
+  .col-fifth .col-fifth-child {
+    width: 14.81481%;
+    margin-right: 9.25926%;
+    margin-left: 9.25926%;
+  }
+}
+
+div[class*="col"] {
+  position: relative;
+  font: 10px Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
+  color: #FFF87B;
+  height: 120px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  padding: 2em 0;
+  outline: #3e5873 solid 2px;
+}
+div[class*="col"]:before {
+  position: absolute;
+  top: 1em;
+  left: 1em;
+}
+
+section {
+  background: #0E181E;
+}
+
+.container {
+  zoom: 1;
+  float: none;
+  max-width: 80em;
+  margin-right: auto;
+  margin-left: auto;
+}
+.container:before, .container:after {
+  content: "\0020";
+  display: block;
+  height: 0;
+  overflow: hidden;
+}
+.container:after {
+  clear: both;
+}