97 files changed, 6786 insertions, 2220 deletions

diff --git a/.csscomb.json b/.csscomb.json
index 47b0826..270371d 100644
--- a/.csscomb.json
+++ b/.csscomb.json
@@ -23,8 +23,8 @@
   "tab-size": true,
   "unitless-zero": true,
   "sort-order": [[
-      "$variable",
-      "$include",
-      "$import"
+    "$variable",
+    "$include",
+    "$import"
   ]]
 }
diff --git a/.gitignore b/.gitignore
index 43ce0d6..e111f34 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,6 +2,8 @@
 /dist/
 node_modules/
 .*
+!.csscomb.json
 !.gitignore
 !.gitattributes
-!.csscomb.json
+!.hound.yml
+!.scss-lint.yml
diff --git a/.hound.yml b/.hound.yml
new file mode 100644
index 0000000..dc8c607
--- /dev/null
+++ b/.hound.yml
@@ -0,0 +1,2 @@
+scss:
+  config_file: .scss-lint.yml
\ No newline at end of file
diff --git a/.scss-lint.yml b/.scss-lint.yml
new file mode 100644
index 0000000..a59b85a
--- /dev/null
+++ b/.scss-lint.yml
@@ -0,0 +1,253 @@
+# Default application configuration that all configurations inherit from.
+
+scss_files: "**/*.scss"
+plugin_directories: ['.scss-linters']
+
+# List of gem names to load custom linters from (make sure they are already
+# installed)
+plugin_gems: []
+
+# Default severity of all linters.
+severity: warning
+
+linters:
+  BangFormat:
+    enabled: true
+    space_before_bang: true
+    space_after_bang: false
+
+  BemDepth:
+    enabled: false
+    max_elements: 1
+
+  BorderZero:
+    enabled: true
+    convention: zero # or `none`
+
+  ChainedClasses:
+    enabled: false
+
+  ColorKeyword:
+    enabled: true
+
+  ColorVariable:
+    enabled: true
+
+  Comment:
+    enabled: false
+    style: silent
+
+  DebugStatement:
+    enabled: true
+
+  DeclarationOrder:
+    enabled: true
+
+  DisableLinterReason:
+    enabled: false
+
+  DuplicateProperty:
+    enabled: true
+
+  ElsePlacement:
+    enabled: true
+    style: same_line # or 'new_line'
+
+  EmptyLineBetweenBlocks:
+    enabled: true
+    ignore_single_line_blocks: true
+
+  EmptyRule:
+    enabled: true
+
+  ExtendDirective:
+    enabled: false
+
+  FinalNewline:
+    enabled: true
+    present: true
+
+  HexLength:
+    enabled: false
+    style: short # or 'long'
+
+  HexNotation:
+    enabled: true
+    style: lowercase # or 'uppercase'
+
+  HexValidation:
+    enabled: true
+
+  IdSelector:
+    enabled: true
+
+  ImportantRule:
+    enabled: true
+
+  ImportPath:
+    enabled: true
+    leading_underscore: false
+    filename_extension: false
+
+  Indentation:
+    enabled: true
+    allow_non_nested_indentation: false
+    character: space # or 'tab'
+    width: 2
+
+  LeadingZero:
+    enabled: true
+    style: exclude_zero # or 'include_zero'
+
+  MergeableSelector:
+    enabled: true
+    force_nesting: true
+
+  NameFormat:
+    enabled: true
+    allow_leading_underscore: true
+    convention: hyphenated_lowercase # or 'camel_case', or 'snake_case', or a regex pattern
+
+  NestingDepth:
+    enabled: true
+    max_depth: 4
+    ignore_parent_selectors: false
+
+  PlaceholderInExtend:
+    enabled: false
+
+  PrivateNamingConvention:
+    enabled: false
+    prefix: _
+
+  PropertyCount:
+    enabled: true
+    include_nested: false
+    max_properties: 10
+
+  PropertySortOrder:
+    enabled: true
+    ignore_unspecified: false
+    min_properties: 2
+    separate_groups: false
+
+  PropertySpelling:
+    enabled: true
+    extra_properties: []
+    disabled_properties: []
+
+  PropertyUnits:
+    enabled: true
+    global: [
+      'ch', 'em', 'ex', 'rem',                 # Font-relative lengths
+      'cm', 'in', 'mm', 'pc', 'pt', 'px', 'q', # Absolute lengths
+      'vh', 'vw', 'vmin', 'vmax',              # Viewport-percentage lengths
+      'deg', 'grad', 'rad', 'turn',            # Angle
+      'ms', 's',                               # Duration
+      'Hz', 'kHz',                             # Frequency
+      'dpi', 'dpcm', 'dppx',                   # Resolution
+      '%']                                     # Other
+    properties: {}
+
+  PseudoElement:
+    enabled: true
+
+  QualifyingElement:
+    enabled: true
+    allow_element_with_attribute: false
+    allow_element_with_class: false
+    allow_element_with_id: false
+
+  SelectorDepth:
+    enabled: true
+    max_depth: 2
+
+  SelectorFormat:
+    enabled: true
+    convention: hyphenated_lowercase # or 'strict_BEM', or 'hyphenated_BEM', or 'snake_case', or 'camel_case', or a regex pattern
+
+  Shorthand:
+    enabled: false
+    allowed_shorthands: [1, 2, 3, 4]
+
+  SingleLinePerProperty:
+    enabled: true
+    allow_single_line_rule_sets: true
+
+  SingleLinePerSelector:
+    enabled: true
+
+  SpaceAfterComma:
+    enabled: true
+    style: one_space # or 'no_space', or 'at_least_one_space'
+
+  SpaceAfterPropertyColon:
+    enabled: true
+    style: one_space # or 'no_space', or 'at_least_one_space', or 'aligned'
+
+  SpaceAfterPropertyName:
+    enabled: true
+
+  SpaceAfterVariableColon:
+    enabled: false
+    style: one_space # or 'no_space', 'at_least_one_space' or 'one_space_or_newline'
+
+  SpaceAfterVariableName:
+    enabled: true
+
+  SpaceAroundOperator:
+    enabled: true
+    style: one_space # or 'at_least_one_space', or 'no_space'
+
+  SpaceBeforeBrace:
+    enabled: true
+    style: space # or 'new_line'
+    allow_single_line_padding: false
+
+  SpaceBetweenParens:
+    enabled: true
+    spaces: 0
+
+  StringQuotes:
+    enabled: true
+    style: double_quotes # or single_quotes
+
+  TrailingSemicolon:
+    enabled: true
+
+  TrailingWhitespace:
+    enabled: true
+
+  TrailingZero:
+    enabled: false
+
+  TransitionAll:
+    enabled: false
+
+  UnnecessaryMantissa:
+    enabled: true
+
+  UnnecessaryParentReference:
+    enabled: true
+
+  UrlFormat:
+    enabled: true
+
+  UrlQuotes:
+    enabled: true
+
+  VariableForProperty:
+    enabled: false
+    properties: []
+
+  VendorPrefix:
+    enabled: true
+    identifier_list: base
+    additional_identifiers: []
+    excluded_identifiers: []
+
+  ZeroUnit:
+    enabled: true
+
+  Compass::*:
+    enabled: false
\ No newline at end of file
diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 0000000..5fa1dc3
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,150 @@
+## Spectre.css Changelog
+
+### [v0.4.0](https://github.com/picturepan2/spectre/releases/tag/v0.4.0)
+
+- Switch from LESS to SASS
+- Add Cursor utilities
+
+### [v0.3.2](https://github.com/picturepan2/spectre/releases/tag/v0.3.2)
+
+- Add label-rounded classes
+- Add Avatars presence status code
+- Add Typography Fonts Docs
+- Add Button variant mixins
+- Update Autocomplete style
+- Update Autoprefixer rules
+- Update label mixin and code mono font family
+
+### [v0.3.1](https://github.com/picturepan2/spectre/releases/tag/v0.3.1)
+
+*IMPORTANT*: The default root font-size has been changed to `20px`, please update your `rem` numbers if you're using the custom sizes. [Learn more](https://picturepan2.github.io/spectre/getting-started.html#variables-sizes).
+
+- Fix margin and padding utilities bug
+- Add grid offset
+- Rename Display utilities class names
+- Move Panels and Empty states to Components from Layout
+- Fix Docs bugs and cleanup codes
+
+### [v0.2.15](https://github.com/picturepan2/spectre/releases/tag/v0.2.15)
+
+- BIG Update to the Docs experience, completely rewritten and improved #240 
+- Add Text and Background colors utilities #205 #219 
+- Add Install from CDN option #191 
+- Add unit size (4px) and unit size variables
+- Add Responsive container (max width container) #222
+- Add error and success states to checkbox, radio and switch #246 
+- Fix Rem unit issue in East Asian Chrome #110 
+- Fix icon direction bug #218
+- Fix Dropdown menu max items/height #226 
+
+## [v0.2.14](https://github.com/picturepan2/spectre/releases/tag/v0.2.14)
+
+- Add vertical divider
+- Add Form icon support
+- Add Accordions
+- Add anchor links to Docs
+- Add new container grid size
+- Fix link error and typo
+
+### [v0.2.13](https://github.com/picturepan2/spectre/releases/tag/v0.2.13)
+
+- Add Timelines code
+- Add input readonly style
+- Change Gulp building process and ignore /dist
+- Change naming `danger` to `error`
+- Change label-variant mixin
+- Fix dropdown-toggle border radius in button groups
+- Fix Calendars date item width bug under Firefox
+
+### [v0.2.12](https://github.com/picturepan2/spectre/releases/tag/v0.2.12)
+
+- Add pure CSS Comparison Sliders
+- Add pure CSS content Filters
+- Add Avatars badge support
+- Add more icons
+- Change :focus support
+- Change Docs image sizes and add object-fit support
+- Update Navbar code
+- Fix typos, Modals bugs
+
+### [v0.2.11](https://github.com/picturepan2/spectre/releases/tag/v0.2.11)
+
+- Add pure CSS Popovers
+- Add pure CSS Icons 
+- Add Slider bars
+- Add tvOS Parallax effect text layer
+- Update shadow mixin
+
+### [v0.2.10](https://github.com/picturepan2/spectre/releases/tag/v0.2.10)
+
+- Add Shadows and Z-index variables
+- Add Divider text
+- Improve color variables
+- Cleanup components code
+- Remove the Responsive Resizer tool (Moved to https://github.com/picturepan2/responsive-resizer)
+
+### [v0.2.9](https://github.com/picturepan2/spectre/releases/tag/v0.2.9)
+
+- Add Panels layout: flexible view container layout with auto-expand content section
+- Update Navbar layout
+- Update docs and examples
+
+### [v0.2.8](https://github.com/picturepan2/spectre/releases/tag/v0.2.8)
+
+- Add Carousels previous and next buttons
+- Improve disabled state for forms
+- Improve calendar events style
+- Improve Sliders disabled style
+- Improve Autocomplete menu position
+- Merge Menus and Dropdowns
+
+### [v0.2.7](https://github.com/picturepan2/spectre/releases/tag/v0.2.7)
+
+- Add Calendars experimental support
+- Add tabindex note to the dropdowns docs
+- Add shrink-to-fit=no to head meta
+- Add Colors docs and update colors
+- Fix wrong shadow colors with form-select
+- Fix grid-480
+
+### [v0.2.6](https://github.com/picturepan2/spectre/releases/tag/v0.2.6)
+
+- Add Carousels initial experimental version
+- Add Spectre.css Twitter account (@spectrecss) link
+- Improve Docs experience and navbar
+- Fix the bug of form input focus colors
+
+### [v0.2.5](https://github.com/picturepan2/spectre/releases/tag/v0.2.5)
+
+- Improve color variables completely
+- Add Menu badges
+- Add Responsive visibility (show-x)
+- Add Parallax effect (pure CSS)
+- Fix elements and components
+- Update empty state layout code
+
+### [v0.2.4](https://github.com/picturepan2/spectre/releases/tag/v0.2.4)
+
+- ADD: Meters element experimental support
+- ADD: Progress indeterminate animation
+- ADD: Text-decoration-skip support
+- CHG: Split Codes and improve docs codes
+- FIX: Steps with tooltips z-index bug
+
+### [v0.2.3](https://github.com/picturepan2/spectre/releases/tag/v0.2.3)
+
+- Bars component
+- Badges for buttons
+- Experimentals CSS and docs
+- Sliders experimental component
+- A number of fixes as usual
+
+### [v0.2.1](https://github.com/picturepan2/spectre/releases/tag/v0.2.1)
+
+I have updated the whole Spectre.css documents experience and bumped the version to v0.2.x. The new Docs can be viewed at https://picturepan2.github.io/spectre/. Here are the new things added:
+- New Docs experience with better navigations and better mobile off-canvas menu
+- New components: Tiles, Steps and Navs (part of Navigation)
+- Improvements: Action button, Autocomplete, Pagination, Tabs, Breadcrumbs, Badges, Cards,  new Progress experimental support and better focus style
+- Fixes
+
+Thank you. ♥
\ No newline at end of file
diff --git a/bower.json b/bower.json
index 23354af..5ac3e8f 100644
--- a/bower.json
+++ b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "spectre.css",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "description": "Spectre.css: a lightweight, responsive and modern CSS framework.",
   "homepage": "http://picturepan2.github.io/spectre",
   "repository": "picturepan2/spectre",
@@ -14,7 +14,7 @@
     "responsive",
     "mobile-friendly",
     "front-end",
-    "less",
+    "sass",
     "modern"
   ],
   "ignore": [
diff --git a/docs/components.html b/docs/components.html
index ec965a1..98ceca1 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -1,10 +1,10 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8" />
+  <meta charset="utf-8" />
   <meta name="robots" content="index, follow" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
-  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta http-equiv="x-ua-compatible" content="ie=edge" />
   <meta name="author" content="https://github.com/picturepan2/" />
   <title>Components - Spectre.css CSS Framework</title>
   <link rel="stylesheet" href="dist/spectre.css" />
@@ -14,24 +14,18 @@
 <body>
   <div class="s-container container">
     <div class="columns">
-      <div class="s-brand">
-        <a href="index.html" class="s-logo tooltip tooltip-bottom" data-tooltip="Spectre.css CSS Framework">
-          <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework" />
-          <h2>Spectre.css</h2>
-        </a>
-        <div class="menu-btn">
-          <a href="#sidebar" class="btn btn-link btn-action"><i class="icon icon-menu"></i></a>
-        </div>
-        <div class="float-btn">
-          <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a>
-        </div>
-      </div>
       <div id="sidebar" class="s-sidebar">
+        <div class="s-brand">
+          <a href="index.html" class="s-logo">
+            <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework" />
+            <h2>Spectre.css</h2>
+          </a>
+        </div>
         <div class="s-nav">
           <div class="accordion">
             <div class="accordion-item">
               <input type="checkbox" id="docs-accordion-1" name="docs-accordion-checkbox" hidden />
-              <label class="accordion-header hand" for="docs-accordion-1">
+              <label class="accordion-header c-hand" for="docs-accordion-1">
                 Getting started
               </label>
               <div class="accordion-body">
@@ -56,7 +50,7 @@
             </div>
             <div class="accordion-item">
               <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden />
-              <label class="accordion-header hand" for="docs-accordion-2">
+              <label class="accordion-header c-hand" for="docs-accordion-2">
                 Elements
               </label>
               <div class="accordion-body">
@@ -90,7 +84,7 @@
             </div>
             <div class="accordion-item">
               <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden />
-              <label class="accordion-header hand" for="docs-accordion-3">
+              <label class="accordion-header c-hand" for="docs-accordion-3">
                 Layout
               </label>
               <div class="accordion-body">
@@ -109,7 +103,7 @@
             </div>
             <div class="accordion-item">
               <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden checked />
-              <label class="accordion-header hand" for="docs-accordion-4">
+              <label class="accordion-header c-hand" for="docs-accordion-4">
                 Components
               </label>
               <div class="accordion-body">
@@ -179,7 +173,7 @@
             </div>
             <div class="accordion-item">
               <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden />
-              <label class="accordion-header hand" for="docs-accordion-5">
+              <label class="accordion-header c-hand" for="docs-accordion-5">
                 Utilities
               </label>
               <div class="accordion-body">
@@ -188,6 +182,9 @@
                     <a href="utilities.html#colors">Colors</a>
                   </li>
                   <li class="menu-item">
+                    <a href="utilities.html#cursors">Cursors</a>
+                  </li>
+                  <li class="menu-item">
                     <a href="utilities.html#display">Display</a>
                   </li>
                   <li class="menu-item">
@@ -210,7 +207,7 @@
             </div>
             <div class="accordion-item">
               <input type="checkbox" id="docs-accordion-6" name="docs-accordion-checkbox" hidden />
-              <label class="accordion-header hand" for="docs-accordion-6">
+              <label class="accordion-header c-hand" for="docs-accordion-6">
                 Experimentals
               </label>
               <div class="accordion-body">
@@ -250,6 +247,18 @@
       </div>
       <a href="#sidebar-close" id="sidebar-close" class="docs-nav-clear"></a>
 
+      <div class="s-navbar">
+        <div class="menu-btn">
+          <a href="#sidebar" class="btn btn-link btn-action"><i class="icon icon-menu"></i></a>
+        </div>
+        <a href="index.html" class="s-logo">
+          <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework" />
+        </a>
+        <div class="float-btn">
+          <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a>
+        </div>
+      </div>
+
       <div id="content" class="s-content">
         <div id="accordions" class="container">
           <h3 class="s-title"><a href="#accordions" class="anchor" aria-hidden="true">#</a>Accordions</h3>
@@ -261,7 +270,7 @@
               <div class="accordion">
                 <div class="accordion-item">
                   <input type="radio" id="accordion-1" name="accordion-radio" hidden checked />
-                  <label class="accordion-header hand" for="accordion-1">
+                  <label class="accordion-header c-hand" for="accordion-1">
                     <i class="icon icon-arrow-right mr-5"></i>
                     Elements
                   </label>
@@ -278,7 +287,7 @@
                 </div>
                 <div class="accordion-item">
                   <input type="radio" id="accordion-2" name="accordion-radio" hidden />
-                  <label class="accordion-header hand" for="accordion-2">
+                  <label class="accordion-header c-hand" for="accordion-2">
                     <i class="icon icon-arrow-right mr-5"></i>
                     Layout
                   </label>
@@ -295,7 +304,7 @@
                 </div>
                 <div class="accordion-item">
                   <input type="radio" id="accordion-3" name="accordion-radio" hidden />
-                  <label class="accordion-header hand" for="accordion-3">
+                  <label class="accordion-header c-hand" for="accordion-3">
                     <i class="icon icon-arrow-right mr-5"></i>
                     Components
                   </label>
@@ -316,7 +325,7 @@
               <div class="accordion">
                 <div class="accordion-item">
                   <input type="checkbox" id="accordion-4" name="accordion-checkbox" hidden checked />
-                  <label class="accordion-header hand" for="accordion-4">
+                  <label class="accordion-header c-hand" for="accordion-4">
                     <i class="icon icon-arrow-right mr-5"></i>
                     Elements
                   </label>
@@ -333,7 +342,7 @@
                 </div>
                 <div class="accordion-item">
                   <input type="checkbox" id="accordion-5" name="accordion-checkbox" hidden />
-                  <label class="accordion-header hand" for="accordion-5">
+                  <label class="accordion-header c-hand" for="accordion-5">
                     <i class="icon icon-arrow-right mr-5"></i>
                     Layout
                   </label>
@@ -350,7 +359,7 @@
                 </div>
                 <div class="accordion-item">
                   <input type="checkbox" id="accordion-6" name="accordion-checkbox" hidden />
-                  <label class="accordion-header hand" for="accordion-6">
+                  <label class="accordion-header c-hand" for="accordion-6">
                     <i class="icon icon-arrow-right mr-5"></i>
                     Components
                   </label>
diff --git a/docs/css/docs.css b/docs/css/docs.css
index f5668bc..0441f30 100644
--- a/docs/css/docs.css
+++ b/docs/css/docs.css
@@ -1,14 +1,16 @@
 /*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */
 /* Spectre version */
 .version::after {
-  content: "0.3.2";
+  content: "0.4.0";
 }
+
 /* Spectre New Docs */
 .s-container > .columns {
   -ms-flex-flow: nowrap;
   flex-flow: nowrap;
   min-height: 100vh;
 }
+
 .s-sidebar {
   background: #f8f9fa;
   -ms-flex: 0 0 auto;
@@ -16,6 +18,7 @@
   padding: 1.5rem 0 1.5rem 1.5rem;
   width: 12rem;
 }
+
 .s-sidebar .s-nav {
   bottom: 1.5rem;
   overflow-y: auto;
@@ -23,36 +26,44 @@
   top: 5rem;
   width: 10.5rem;
 }
+
 .s-sidebar .accordion .accordion-item {
   margin-bottom: .75rem;
 }
+
 .s-sidebar .accordion input ~ .accordion-header {
   color: #5b657a;
   font-size: .6rem;
   font-weight: 600;
   text-transform: uppercase;
 }
+
 .s-sidebar .accordion input:checked ~ .accordion-header {
-  color: #5b657a;
+  color: #667189;
 }
+
 .s-sidebar .accordion .menu .menu-item {
   padding-left: 1rem;
 }
+
 .s-sidebar .accordion .menu .menu-item > a {
   background: transparent;
   color: #727e96;
   display: inline-block;
 }
+
 .s-content {
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
-  max-width: 920px;
-  padding: 0 3rem;
+  max-width: 960px;
+  padding: 0 4rem;
   width: calc(100vw - 12rem);
 }
+
 .s-content > .container {
   padding-bottom: 1.5rem;
 }
+
 .s-content .anchor {
   color: #626fca;
   height: 0;
@@ -64,6 +75,7 @@
   width: 0;
   z-index: 100;
 }
+
 .s-content .anchor:focus,
 .s-content .anchor:hover {
   box-shadow: none;
@@ -71,6 +83,7 @@
   text-decoration: none;
   width: 2em;
 }
+
 .s-content .s-title,
 .s-content .s-subtitle {
   line-height: 1.6rem;
@@ -79,6 +92,7 @@
   padding-top: 1.5rem;
   position: static;
 }
+
 @supports ((position: -webkit-sticky) or (position: sticky)) {
   .s-content .s-title,
   .s-content .s-subtitle {
@@ -100,34 +114,42 @@
     z-index: -1;
   }
 }
+
 .s-content .s-title:hover .anchor,
 .s-content .s-subtitle:hover .anchor {
   height: auto;
   width: 1em;
 }
+
 .s-content .s-title + .docs-note,
 .s-content .s-subtitle + .docs-note {
   margin-top: .4rem;
 }
+
 .s-content .docs-note {
   margin: 1.5rem 0;
 }
+
 .s-content .column {
   padding: .4rem;
 }
+
 .s-content .docs-block {
   border-radius: .1rem;
   padding: .4rem;
 }
+
 .s-content .docs-block.bg-gray {
   background: #f0f1f4;
 }
+
 .s-content .docs-shape {
   height: 4.8rem;
   line-height: 1.2rem;
   padding: 1.8rem 0;
   width: 4.8rem;
 }
+
 .s-content .docs-dot {
   border-radius: 50%;
   display: inline-block;
@@ -135,49 +157,63 @@
   padding: 0;
   width: .5rem;
 }
+
 .s-content .docs-table th,
 .s-content .docs-table td {
   padding: .75rem .25rem;
 }
+
 .s-content .docs-color {
   border-radius: .1rem;
   margin: .25rem 0;
   padding: .5rem;
 }
+
 .s-content .docs-color .color-subtitle {
   font-size: .6rem;
   opacity: .75;
 }
+
 .s-content .panel {
   height: 75vh;
 }
+
 .s-content .panel .tile {
   margin: .75rem 0;
 }
+
 .s-content .parallax {
   margin: 2rem auto;
 }
+
 .s-content .code {
   color: #667189;
 }
+
 .s-content .code .com {
   color: #acb3c2;
 }
+
 .s-content .code .tag {
   color: #5764c6;
 }
+
 .s-content .code .atn {
   color: #667189;
 }
+
 .s-content .code .atv {
   color: #e06870;
 }
+
 .s-content .empty .icon {
   font-size: 2rem;
 }
+
 .s-content .form-autocomplete .menu {
   position: static;
 }
+
 .s-content .example-tile-icon {
   align-content: space-around;
   align-items: center;
@@ -192,23 +228,29 @@
   height: 2rem;
   width: 2rem;
 }
+
 .s-content .example-tile-icon .icon {
   margin: auto;
 }
+
 .s-content .comparison-slider {
   height: auto;
   padding-bottom: 56.2222%;
 }
+
 .s-content .comparison-slider .filter-grayscale {
   -webkit-filter: grayscale(75%);
   filter: grayscale(75%);
 }
+
 .s-brand {
   color: #5764c6;
+  left: 0;
   padding: 0 1.5rem;
   position: fixed;
   top: 1.3rem;
 }
+
 .s-brand .s-logo {
   align-items: center;
   border-radius: .1rem;
@@ -219,80 +261,95 @@
   padding: .2rem;
   width: auto;
 }
+
 .s-brand .s-logo:focus,
 .s-brand .s-logo:hover {
   text-decoration: none;
 }
+
 .s-brand .s-logo img {
   display: inline;
   height: auto;
   width: 1.6rem;
 }
+
 .s-brand .s-logo h2 {
   display: inline;
   font-size: .8rem;
+  font-weight: 500;
   margin-bottom: 0;
   margin-left: .5rem;
   margin-right: .5rem;
 }
-.s-brand .float-btn {
-  position: fixed;
-  right: 4.5rem;
-  top: 1.5rem;
-}
+
 .s-footer {
   color: #acb3c2;
   padding: .5rem .5rem 1.5rem .5rem;
 }
+
 .s-footer a {
   color: #727e96;
 }
+
 /* Spectre Homepage style */
 .section-hero {
   padding: 1rem .5rem;
-  position: relative;
 }
+
 .section-hero .s-brand {
   position: absolute;
+  top: .5rem;
 }
+
 .section-hero .s-brand h2 {
   color: #5764c6;
 }
+
 .section-hero .column {
   padding: .4rem;
 }
+
 .section-updates {
   padding: 4.5rem .5rem 3.5rem .5rem;
 }
+
 .section-updates .card {
   border: 0;
   color: #727e96;
   margin-bottom: 1rem;
 }
+
 .section-features {
   padding: 4.5rem .5rem;
 }
+
 .section-features .column {
   padding: .4rem;
 }
+
 .section-footer {
   color: #acb3c2;
   padding: 1.8rem .75rem 1rem .75rem;
   position: relative;
   z-index: 200;
 }
+
 .section-footer a {
   color: #727e96;
 }
+
 .grid-hero {
-  margin-bottom: 2rem;
-  margin-top: 6rem;
+  padding-bottom: 2rem;
+  padding-top: 6rem;
+  position: relative;
 }
+
 .grid-hero h1 {
   color: #50596c;
   font-size: 1.6rem;
   margin-bottom: 1.5rem;
 }
+
 .grid-hero h2 {
   color: #5b657a;
   font-size: .9rem;
@@ -300,27 +357,51 @@
   line-height: 1.5rem;
   margin-bottom: 1.5rem;
 }
+
 .grid-hero h2 u {
   border-bottom: .1rem solid currentColor;
   padding-bottom: .05rem;
   text-decoration: none;
 }
+
 .grid-hero .card {
   background: none;
   border: 0;
   color: #727e96;
   padding: .5rem;
 }
+
 .grid-hero .card .card-title {
   color: #5764c6;
   font-size: .9rem;
   margin-bottom: 0;
 }
-.menu-btn,
+
 .docs-nav-clear {
   display: none;
 }
-@media screen and (max-width: 880px) {
+
+.s-navbar {
+  height: 3.5rem;
+  left: 0;
+  padding: .75rem 1.5rem;
+  position: fixed;
+  text-align: center;
+  z-index: 400;
+}
+
+.s-navbar .s-logo,
+.s-navbar .menu-btn {
+  display: none;
+}
+
+.s-navbar .float-btn {
+  position: fixed;
+  right: 4rem;
+  top: 1.5rem;
+}
+
+@media (max-width: 880px) {
   .s-sidebar {
     background: #f8f9fa;
     bottom: 0;
@@ -329,48 +410,49 @@
     padding: 3rem 1.5rem;
     position: fixed;
     top: 0;
-    -ms-transform: translateX(-100%);
     transform: translateX(-100%);
     transition: transform .2s ease;
     z-index: 400;
   }
   .s-sidebar:target {
-    -ms-transform: translateX(0);
     transform: translateX(0);
     transition: transform .2s ease;
   }
   .s-sidebar:target + .docs-nav-clear {
     display: block;
   }
-  .s-sidebar .s-nav {
-    top: 1.5rem;
+  .s-sidebar .menu .menu-item > a {
+    padding: .3rem .4rem;
   }
-  .s-brand {
+  .s-navbar {
     -webkit-backdrop-filter: blur(10px);
     backdrop-filter: blur(10px);
-    background: rgba(248, 249, 250, .8);
-    height: 3.5rem;
-    left: 0;
-    padding: .75rem .5rem;
+    background: rgba(248, 249, 250, .65);
     right: 0;
-    text-align: center;
     top: 0;
-    z-index: 300;
-  }
-  .s-brand .s-logo h2 {
-    display: none;
+    z-index: 200;
   }
-  .s-brand .menu-btn {
+  .s-navbar .menu-btn {
     display: block;
-    left: .65rem;
+    left: 2.6rem;
     position: fixed;
     top: .95rem;
   }
-  .s-brand .menu-btn .btn {
+  .s-navbar .menu-btn .btn {
     font-size: 1rem;
   }
-  .s-brand .float-btn {
-    right: 1rem;
+  .s-navbar .s-logo {
+    align-items: center;
+    border-radius: .1rem;
+    display: inline-flex;
+    display: -ms-inline-flexbox;
+    -ms-flex-align: center;
+    height: 2rem;
+    padding: .2rem;
+    width: auto;
+  }
+  .s-navbar .float-btn {
+    right: 2.9rem;
     top: .95rem;
   }
   .docs-nav-clear {
@@ -386,7 +468,7 @@
   }
   .s-content {
     min-width: auto;
-    padding: 3.5rem 2.5rem 0 2.5rem;
+    padding: 0 2.5rem;
     width: 100%;
   }
   .s-content .s-title,
@@ -396,11 +478,13 @@
   }
   .s-content .s-title::before,
   .s-content .s-subtitle::before {
-    display: none;
+    content: none;
   }
   .section-hero .s-brand {
     height: 5rem;
     padding: 1.5rem .5rem;
+    text-align: center;
+    width: 100%;
   }
   .section-hero .s-brand .s-logo {
     height: auto;
@@ -409,8 +493,12 @@
     height: 3.2rem;
     width: 3.2rem;
   }
+  .section-hero .s-brand h2 {
+    display: none;
+  }
 }
-@media screen and (max-width: 600px) {
+
+@media (max-width: 600px) {
   .grid-hero h2 {
     font-size: .9rem;
   }
@@ -426,4 +514,10 @@
   .s-content .anchor {
     display: none;
   }
+  .s-navbar .menu-btn {
+    left: .65rem;
+  }
+  .s-navbar .float-btn {
+    right: 1rem;
+  }
 }
\ No newline at end of file
diff --git a/docs/dist/spectre-exp.css b/docs/dist/spectre-exp.css
index 1b9b6cc..8af3a78 100644
--- a/docs/dist/spectre-exp.css
+++ b/docs/dist/spectre-exp.css
@@ -6,6 +6,7 @@
   min-width: 280px;
   text-align: center;
 }
+
 .calendar .calendar-nav {
   align-items: center;
   background: #f8f9fa;
@@ -17,6 +18,7 @@
   font-size: .8rem;
   padding: .4rem;
 }
+
 .calendar .calendar-header,
 .calendar .calendar-body {
   display: flex;
@@ -27,25 +29,30 @@
   justify-content: center;
   padding: .4rem 0;
 }
+
 .calendar .calendar-header .calendar-date,
 .calendar .calendar-body .calendar-date {
   -ms-flex: 0 0 14.28%;
   flex: 0 0 14.28%;
   max-width: 14.28%;
 }
+
 .calendar .calendar-header {
   background: #f8f9fa;
   border-bottom: .05rem solid #e7e9ed;
   color: #acb3c2;
   font-size: .6rem;
 }
+
 .calendar .calendar-body {
   color: #727e96;
 }
+
 .calendar .calendar-date {
   border: 0;
   padding: .2rem;
 }
+
 .calendar .calendar-date .date-item {
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -67,13 +74,16 @@
   white-space: nowrap;
   width: 1.4rem;
 }
+
 .calendar .calendar-date .date-item.date-today {
   border-color: #e4e6f6;
   color: #5764c6;
 }
+
 .calendar .calendar-date .date-item:focus {
   box-shadow: 0 0 0 .1rem rgba(87, 100, 198, .2);
 }
+
 .calendar .calendar-date .date-item:focus,
 .calendar .calendar-date .date-item:hover {
   background: #fbfbfe;
@@ -81,19 +91,21 @@
   color: #5764c6;
   text-decoration: none;
 }
+
 .calendar .calendar-date .date-item:active,
 .calendar .calendar-date .date-item.active {
   background: #4c59c2;
   border-color: #3e4cb6;
   color: #fff;
 }
+
 .calendar .calendar-date .date-item.badge::after {
   position: absolute;
   right: 3px;
   top: 3px;
-  -ms-transform: translate(50%, -50%);
   transform: translate(50%, -50%);
 }
+
 .calendar .calendar-date.disabled .date-item,
 .calendar .calendar-date.disabled .calendar-event,
 .calendar .calendar-date .date-item:disabled,
@@ -102,9 +114,11 @@
   opacity: .25;
   pointer-events: none;
 }
+
 .calendar .calendar-range {
   position: relative;
 }
+
 .calendar .calendar-range::before {
   background: #eff1fa;
   content: "";
@@ -113,21 +127,25 @@
   position: absolute;
   right: 0;
   top: 50%;
-  -ms-transform: translateY(-50%);
   transform: translateY(-50%);
 }
+
 .calendar .calendar-range.range-start::before {
   left: 50%;
 }
+
 .calendar .calendar-range.range-end::before {
   right: 50%;
 }
+
 .calendar .calendar-range .date-item {
   color: #5764c6;
 }
+
 .calendar.calendar-lg .calendar-body {
   padding: 0;
 }
+
 .calendar.calendar-lg .calendar-body .calendar-date {
   border-bottom: .05rem solid #e7e9ed;
   border-right: .05rem solid #e7e9ed;
@@ -138,12 +156,15 @@
   height: 5.5rem;
   padding: 0;
 }
+
 .calendar.calendar-lg .calendar-body .calendar-date:nth-child(7n) {
   border-right: 0;
 }
+
 .calendar.calendar-lg .calendar-body .calendar-date:nth-last-child(-n+7) {
   border-bottom: 0;
 }
+
 .calendar.calendar-lg .date-item {
   align-self: flex-end;
   -ms-flex-item-align: end;
@@ -151,16 +172,20 @@
   margin-right: .2rem;
   margin-top: .2rem;
 }
+
 .calendar.calendar-lg .calendar-range::before {
   top: 19px;
 }
+
 .calendar.calendar-lg .calendar-range.range-start::before {
   left: auto;
   width: 19px;
 }
+
 .calendar.calendar-lg .calendar-range.range-end::before {
   right: 19px;
 }
+
 .calendar.calendar-lg .calendar-events {
   flex-grow: 1;
   -ms-flex-positive: 1;
@@ -168,6 +193,7 @@
   overflow-y: auto;
   padding: .2rem;
 }
+
 .calendar.calendar-lg .calendar-event {
   background: #eff1fa;
   border-radius: .1rem;
@@ -179,9 +205,9 @@
   padding: 3px 4px;
   text-align: left;
   text-overflow: ellipsis;
-  vertical-align: baseline;
   white-space: nowrap;
 }
+
 .carousel {
   background: #f8f9fa;
   display: block;
@@ -189,16 +215,19 @@
   position: relative;
   width: 100%;
 }
+
 .carousel .carousel-container {
   height: 100%;
   left: 0;
   position: relative;
 }
+
 .carousel .carousel-container::before {
   content: "";
   display: block;
   padding-bottom: 56.25%;
 }
+
 .carousel .carousel-container .carousel-item {
   animation: carousel-slideout 1s ease-in-out 1;
   height: 100%;
@@ -209,10 +238,12 @@
   top: 0;
   width: 100%;
 }
+
 .carousel .carousel-container .carousel-item:hover .item-prev,
 .carousel .carousel-container .carousel-item:hover .item-next {
   opacity: 1;
 }
+
 .carousel .carousel-container .item-prev,
 .carousel .carousel-container .item-next {
   background: rgba(231, 233, 237, .25);
@@ -221,17 +252,19 @@
   opacity: 0;
   position: absolute;
   top: 50%;
-  -ms-transform: translateY(-50%);
   transform: translateY(-50%);
   transition: all .4s ease;
   z-index: 200;
 }
+
 .carousel .carousel-container .item-prev {
   left: 1rem;
 }
+
 .carousel .carousel-container .item-next {
   right: 1rem;
 }
+
 .carousel .carousel-locator:nth-of-type(1):checked ~ .carousel-container .carousel-item:nth-of-type(1),
 .carousel .carousel-locator:nth-of-type(2):checked ~ .carousel-container .carousel-item:nth-of-type(2),
 .carousel .carousel-locator:nth-of-type(3):checked ~ .carousel-container .carousel-item:nth-of-type(3),
@@ -240,25 +273,27 @@
   opacity: 1;
   z-index: 100;
 }
+
 .carousel .carousel-locator:nth-of-type(1):checked ~ .carousel-nav .nav-item:nth-of-type(1),
 .carousel .carousel-locator:nth-of-type(2):checked ~ .carousel-nav .nav-item:nth-of-type(2),
 .carousel .carousel-locator:nth-of-type(3):checked ~ .carousel-nav .nav-item:nth-of-type(3),
 .carousel .carousel-locator:nth-of-type(4):checked ~ .carousel-nav .nav-item:nth-of-type(4) {
   color: #e7e9ed;
 }
+
 .carousel .carousel-nav {
   bottom: .4rem;
-  display: -ms-flexbox;
   display: flex;
+  display: -ms-flexbox;
   -ms-flex-pack: center;
   justify-content: center;
   left: 50%;
   position: absolute;
-  -ms-transform: translateX(-50%);
   transform: translateX(-50%);
   width: 10rem;
   z-index: 200;
 }
+
 .carousel .carousel-nav .nav-item {
   color: rgba(231, 233, 237, .5);
   display: block;
@@ -269,6 +304,7 @@
   max-width: 2.5rem;
   position: relative;
 }
+
 .carousel .carousel-nav .nav-item::before {
   background: currentColor;
   content: "";
@@ -278,6 +314,7 @@
   top: .5rem;
   width: 100%;
 }
+
 @keyframes carousel-slidein {
   0% {
     transform: translateX(100%);
@@ -286,6 +323,7 @@
     transform: translateX(0);
   }
 }
+
 @keyframes carousel-slideout {
   0% {
     opacity: 1;
@@ -296,12 +334,14 @@
     transform: translateX(-50%);
   }
 }
+
 .comparison-slider {
   height: 50vh;
   overflow: hidden;
   position: relative;
   width: 100%;
 }
+
 .comparison-slider .comparison-before,
 .comparison-slider .comparison-after {
   height: 100%;
@@ -311,6 +351,7 @@
   position: absolute;
   top: 0;
 }
+
 .comparison-slider .comparison-before img,
 .comparison-slider .comparison-after img {
   height: 100%;
@@ -319,18 +360,22 @@
   position: absolute;
   width: 100%;
 }
+
 .comparison-slider .comparison-before {
   width: 100%;
   z-index: 1;
 }
+
 .comparison-slider .comparison-before .comparison-label {
   right: .8rem;
 }
+
 .comparison-slider .comparison-after {
   max-width: 100%;
   min-width: 0;
   z-index: 2;
 }
+
 .comparison-slider .comparison-after::before {
   background: transparent;
   content: "";
@@ -342,6 +387,7 @@
   top: 0;
   z-index: 1;
 }
+
 .comparison-slider .comparison-after::after {
   background: currentColor;
   border-radius: 50%;
@@ -352,13 +398,14 @@
   position: absolute;
   right: .4rem;
   top: 50%;
-  -ms-transform: translate(50%, -50%);
   transform: translate(50%, -50%);
   width: 3px;
 }
+
 .comparison-slider .comparison-after .comparison-label {
   left: .8rem;
 }
+
 .comparison-slider .comparison-resizer {
   animation: first-run 1.5s 1 ease-in-out;
   cursor: ew-resize;
@@ -371,10 +418,10 @@
   position: relative;
   resize: horizontal;
   top: 50%;
-  -ms-transform: translateY(-50%) scaleY(30);
   transform: translateY(-50%) scaleY(30);
   width: 0;
 }
+
 .comparison-slider .comparison-label {
   background: rgba(69, 77, 93, .5);
   bottom: .8rem;
@@ -386,6 +433,7 @@
   -ms-user-select: none;
   user-select: none;
 }
+
 @keyframes first-run {
   0% {
     width: 0;
@@ -403,15 +451,18 @@
     width: 0;
   }
 }
+
 .filter .filter-nav {
   margin: .4rem 0;
 }
+
 .filter .filter-body {
   display: flex;
   display: -ms-flexbox;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
 }
+
 .filter .filter-tag#tag-all:checked ~ .filter-nav .chip[for="tag-all"],
 .filter .filter-tag#tag-action:checked ~ .filter-nav .chip[for="tag-action"],
 .filter .filter-tag#tag-roleplaying:checked ~ .filter-nav .chip[for="tag-roleplaying"],
@@ -420,12 +471,14 @@
   background: #5764c6;
   color: #fff;
 }
+
 .filter .filter-tag#tag-action:checked ~ .filter-body .column:not([data-tag~="tag-action"]),
 .filter .filter-tag#tag-roleplaying:checked ~ .filter-body .column:not([data-tag~="tag-roleplaying"]),
 .filter .filter-tag#tag-shooter:checked ~ .filter-body .column:not([data-tag~="tag-shooter"]),
 .filter .filter-tag#tag-sports:checked ~ .filter-body .column:not([data-tag~="tag-sports"]) {
   display: none;
 }
+
 .meter {
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -434,51 +487,63 @@
   border: 0;
   border-radius: .1rem;
   display: block;
-  height: .8rem;
+  height: .8rem; 
   width: 100%;
 }
+
 .meter::-webkit-meter-inner-element {
   display: block;
 }
+
 .meter::-webkit-meter-bar,
 .meter::-webkit-meter-optimum-value,
 .meter::-webkit-meter-suboptimum-value,
 .meter::-webkit-meter-even-less-good-value {
   border-radius: .1rem;
 }
+
 .meter::-webkit-meter-bar {
   background: #f8f9fa;
 }
+
 .meter::-webkit-meter-optimum-value {
   background: #32b643;
 }
+
 .meter::-webkit-meter-suboptimum-value {
   background: #ffb700;
 }
+
 .meter::-webkit-meter-even-less-good-value {
   background: #e85600;
 }
+
 .meter::-moz-meter-bar,
 .meter:-moz-meter-optimum,
 .meter:-moz-meter-sub-optimum,
 .meter:-moz-meter-sub-sub-optimum {
   border-radius: .1rem;
 }
+
 .meter:-moz-meter-optimum::-moz-meter-bar {
   background: #32b643;
 }
+
 .meter:-moz-meter-sub-optimum::-moz-meter-bar {
   background: #ffb700;
 }
+
 .meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
   background: #e85600;
 }
+
 .parallax {
   display: block;
   height: auto;
   position: relative;
   width: auto;
 }
+
 .parallax .parallax-content {
   box-shadow: 0 1rem 2.1rem rgba(69, 77, 93, .3);
   height: auto;
@@ -487,6 +552,7 @@
   transition: all .4s ease;
   width: 100%;
 }
+
 .parallax .parallax-content::before {
   content: "";
   display: block;
@@ -496,6 +562,7 @@
   top: 0;
   width: 100%;
 }
+
 .parallax .parallax-front {
   align-items: center;
   color: #fff;
@@ -508,81 +575,98 @@
   left: 0;
   position: absolute;
   text-align: center;
-  text-shadow: 0 0 20px rgba(69, 77, 93, .5);
+  text-shadow: 0 0 20px rgba(69, 77, 93, .75);
   top: 0;
-  transform: translateZ(100px) scale(.9);
+  transform: translateZ(50px) scale(.95);
   transition: all .4s ease;
   width: 100%;
   z-index: 1;
 }
+
 .parallax .parallax-top-left {
   height: 50%;
   left: 0;
   position: absolute;
-  top: 0;
+  top: 0; 
   width: 50%;
-  z-index: 300;
+  z-index: 100;
 }
+
 .parallax .parallax-top-left:hover ~ .parallax-content {
-  transform: perspective(1000px) rotateX(-3deg) rotateY(3deg);
+  transform: perspective(1000px) rotateX(3deg) rotateY(-3deg);
 }
+
 .parallax .parallax-top-left:hover ~ .parallax-content::before {
-  background: linear-gradient(135deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, 0) 50%);
+  background: linear-gradient(135deg, rgba(255, 255, 255, .35) 0%, transparent 50%);
 }
+
 .parallax .parallax-top-left:hover ~ .parallax-content .parallax-front {
-  transform: translate3d(-6.5px, -6.5px, 100px) scale(.9);
+  transform: translate3d(4.5px, 4.5px, 50px) scale(.95);
 }
+
 .parallax .parallax-top-right {
   height: 50%;
   position: absolute;
   right: 0;
-  top: 0;
+  top: 0; 
   width: 50%;
-  z-index: 300;
+  z-index: 100;
 }
+
 .parallax .parallax-top-right:hover ~ .parallax-content {
-  transform: perspective(1000px) rotateX(-3deg) rotateY(-3deg);
+  transform: perspective(1000px) rotateX(3deg) rotateY(3deg);
 }
+
 .parallax .parallax-top-right:hover ~ .parallax-content::before {
-  background: linear-gradient(-135deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, 0) 50%);
+  background: linear-gradient(-135deg, rgba(255, 255, 255, .35) 0%, transparent 50%);
 }
+
 .parallax .parallax-top-right:hover ~ .parallax-content .parallax-front {
-  transform: translate3d(6.5px, -6.5px, 100px) scale(.9);
+  transform: translate3d(-4.5px, 4.5px, 50px) scale(.95);
 }
+
 .parallax .parallax-bottom-left {
   bottom: 0;
   height: 50%;
-  left: 0;
+  left: 0; 
   position: absolute;
   width: 50%;
-  z-index: 300;
+  z-index: 100;
 }
+
 .parallax .parallax-bottom-left:hover ~ .parallax-content {
-  transform: perspective(1000px) rotateX(3deg) rotateY(3deg);
+  transform: perspective(1000px) rotateX(-3deg) rotateY(-3deg);
 }
+
 .parallax .parallax-bottom-left:hover ~ .parallax-content::before {
-  background: linear-gradient(45deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, 0) 50%);
+  background: linear-gradient(45deg, rgba(255, 255, 255, .35) 0%, transparent 50%);
 }
+
 .parallax .parallax-bottom-left:hover ~ .parallax-content .parallax-front {
-  transform: translate3d(-6.5px, 6.5px, 100px) scale(.9);
+  transform: translate3d(4.5px, -4.5px, 50px) scale(.95);
 }
+
 .parallax .parallax-bottom-right {
   bottom: 0;
   height: 50%;
   position: absolute;
-  right: 0;
+  right: 0; 
   width: 50%;
-  z-index: 300;
+  z-index: 100;
 }
+
 .parallax .parallax-bottom-right:hover ~ .parallax-content {
-  transform: perspective(1000px) rotateX(3deg) rotateY(-3deg);
+  transform: perspective(1000px) rotateX(-3deg) rotateY(3deg);
 }
+
 .parallax .parallax-bottom-right:hover ~ .parallax-content::before {
-  background: linear-gradient(-45deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, 0) 50%);
+  background: linear-gradient(-45deg, rgba(255, 255, 255, .35) 0%, transparent 50%);
 }
+
 .parallax .parallax-bottom-right:hover ~ .parallax-content .parallax-front {
-  transform: translate3d(6.5px, 6.5px, 100px) scale(.9);
+  transform: translate3d(-4.5px, -4.5px, 50px) scale(.95);
 }
+
 .progress {
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -595,25 +679,31 @@
   position: relative;
   width: 100%;
 }
+
 .progress::-webkit-progress-bar {
   background: transparent;
   border-radius: .1rem;
 }
+
 .progress::-webkit-progress-value {
   background: #5764c6;
   border-radius: .1rem;
 }
+
 .progress::-moz-progress-bar {
   background: #5764c6;
   border-radius: .1rem;
 }
+
 .progress:indeterminate {
   animation: progress-indeterminate 1.5s linear infinite;
-  background: #f0f1f4 linear-gradient(to right, #5764c6 30%, #f0f1f4 30%) top left / 150% 150% no-repeat;
+  background: #f0f1f4 linear-gradient(to right, #5764c6 30%, #f0f1f4 30%) top left/150% 150% no-repeat;
 }
+
 .progress:indeterminate::-moz-progress-bar {
   background: transparent;
 }
+
 @keyframes progress-indeterminate {
   0% {
     background-position: 200% 0;
@@ -622,19 +712,22 @@
     background-position: -200% 0;
   }
 }
+
 .slider {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   background: transparent;
   display: block;
-  height: 1.2rem;
+  height: 1.2rem; 
   width: 100%;
 }
+
 .slider:focus {
   box-shadow: 0 0 0 .1rem rgba(87, 100, 198, .2);
   outline: none;
 }
+
 .slider::-webkit-slider-thumb {
   -webkit-appearance: none;
   background: #5764c6;
@@ -645,6 +738,7 @@
   transition: transform .2s ease;
   width: .6rem;
 }
+
 .slider::-moz-range-thumb {
   background: #5764c6;
   border: 0;
@@ -653,6 +747,7 @@
   transition: transform .2s ease;
   width: .6rem;
 }
+
 .slider::-ms-thumb {
   background: #5764c6;
   border: 0;
@@ -661,59 +756,69 @@
   transition: transform .2s ease;
   width: .6rem;
 }
+
 .slider:active::-webkit-slider-thumb {
   transform: scale(1.25);
 }
+
 .slider:active::-moz-range-thumb {
   transform: scale(1.25);
 }
+
 .slider:active::-ms-thumb {
-  -ms-transform: scale(1.25);
   transform: scale(1.25);
 }
+
 .slider:disabled::-webkit-slider-thumb,
 .slider.disabled::-webkit-slider-thumb {
   background: #e7e9ed;
   transform: scale(1);
 }
+
 .slider:disabled::-moz-range-thumb,
 .slider.disabled::-moz-range-thumb {
   background: #e7e9ed;
   transform: scale(1);
 }
+
 .slider:disabled::-ms-thumb,
 .slider.disabled::-ms-thumb {
   background: #e7e9ed;
-  -ms-transform: scale(1);
   transform: scale(1);
 }
+
 .slider::-webkit-slider-runnable-track {
   background: #f0f1f4;
   border-radius: .1rem;
   height: .1rem;
   width: 100%;
 }
+
 .slider::-moz-range-track {
   background: #f0f1f4;
   border-radius: .1rem;
   height: .1rem;
   width: 100%;
 }
+
 .slider::-ms-track {
   background: #f0f1f4;
   border-radius: .1rem;
   height: .1rem;
   width: 100%;
 }
+
 .slider::-ms-fill-lower {
   background: #5764c6;
 }
+
 .timeline .timeline-item {
   display: flex;
   display: -ms-flexbox;
   margin-bottom: 1.2rem;
   position: relative;
 }
+
 .timeline .timeline-item::before {
   background: #e7e9ed;
   content: "";
@@ -723,15 +828,18 @@
   top: 1.2rem;
   width: 2px;
 }
+
 .timeline .timeline-item .timeline-left {
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
 }
+
 .timeline .timeline-item .timeline-content {
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
   padding: 2px 0 2px .8rem;
 }
+
 .timeline .timeline-item .timeline-icon {
   border-radius: 50%;
   color: #fff;
@@ -740,6 +848,7 @@
   text-align: center;
   width: 1.2rem;
 }
+
 .timeline .timeline-item .timeline-icon::before {
   border: .1rem solid #5764c6;
   border-radius: 50%;
@@ -751,11 +860,13 @@
   top: .4rem;
   width: .4rem;
 }
+
 .timeline .timeline-item .timeline-icon.icon-lg {
   background: #5764c6;
   font-size: .8rem;
   line-height: 1rem;
 }
+
 .timeline .timeline-item .timeline-icon.icon-lg::before {
   content: none;
 }
\ No newline at end of file
diff --git a/docs/dist/spectre-exp.min.css b/docs/dist/spectre-exp.min.css
index 9470732..2b1e5cc 100644
--- a/docs/dist/spectre-exp.min.css
+++ b/docs/dist/spectre-exp.min.css
@@ -1 +1 @@
-/*! Spectre.css Experimentals | MIT License | github.com/picturepan2/spectre */.calendar{border:.05rem solid #e7e9ed;border-radius:.1rem;display:block;min-width:280px;text-align:center}.calendar .calendar-nav{align-items:center;background:#f8f9fa;border-top-left-radius:.1rem;border-top-right-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-align:center;font-size:.8rem;padding:.4rem}.calendar .calendar-body,.calendar .calendar-header{display:flex;display:-ms-flexbox;-ms-flex-pack:center;-ms-flex-wrap:wrap;flex-wrap:wrap;justify-content:center;padding:.4rem 0}.calendar .calendar-body .calendar-date,.calendar .calendar-header .calendar-date{-ms-flex:0 0 14.28%;flex:0 0 14.28%;max-width:14.28%}.calendar .calendar-header{background:#f8f9fa;border-bottom:.05rem solid #e7e9ed;color:#acb3c2;font-size:.6rem}.calendar .calendar-body{color:#727e96}.calendar .calendar-date{border:0;padding:.2rem}.calendar .calendar-date .date-item{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;border:.05rem solid transparent;border-radius:50%;color:#727e96;cursor:pointer;height:1.4rem;line-height:1rem;outline:0;padding:.1rem;position:relative;text-align:center;text-decoration:none;transition:all .2s ease;vertical-align:middle;white-space:nowrap;width:1.4rem}.calendar .calendar-date .date-item.date-today{border-color:#e4e6f6;color:#5764c6}.calendar .calendar-date .date-item:focus{box-shadow:0 0 0 .1rem rgba(87,100,198,.2)}.calendar .calendar-date .date-item:focus,.calendar .calendar-date .date-item:hover{background:#fbfbfe;border-color:#e4e6f6;color:#5764c6;text-decoration:none}.calendar .calendar-date .date-item.active,.calendar .calendar-date .date-item:active{background:#4c59c2;border-color:#3e4cb6;color:#fff}.calendar .calendar-date .date-item.badge::after{position:absolute;right:3px;top:3px;-ms-transform:translate(50%,-50%);transform:translate(50%,-50%)}.calendar .calendar-date .calendar-event:disabled,.calendar .calendar-date .date-item:disabled,.calendar .calendar-date.disabled .calendar-event,.calendar .calendar-date.disabled .date-item{cursor:default;opacity:.25;pointer-events:none}.calendar .calendar-range{position:relative}.calendar .calendar-range::before{background:#eff1fa;content:"";height:1.4rem;left:0;position:absolute;right:0;top:50%;-ms-transform:translateY(-50%);transform:translateY(-50%)}.calendar .calendar-range.range-start::before{left:50%}.calendar .calendar-range.range-end::before{right:50%}.calendar .calendar-range .date-item{color:#5764c6}.calendar.calendar-lg .calendar-body{padding:0}.calendar.calendar-lg .calendar-body .calendar-date{border-bottom:.05rem solid #e7e9ed;border-right:.05rem solid #e7e9ed;display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column;height:5.5rem;padding:0}.calendar.calendar-lg .calendar-body .calendar-date:nth-child(7n){border-right:0}.calendar.calendar-lg .calendar-body .calendar-date:nth-last-child(-n+7){border-bottom:0}.calendar.calendar-lg .date-item{align-self:flex-end;-ms-flex-item-align:end;height:1.4rem;margin-right:.2rem;margin-top:.2rem}.calendar.calendar-lg .calendar-range::before{top:19px}.calendar.calendar-lg .calendar-range.range-start::before{left:auto;width:19px}.calendar.calendar-lg .calendar-range.range-end::before{right:19px}.calendar.calendar-lg .calendar-events{flex-grow:1;-ms-flex-positive:1;line-height:1;overflow-y:auto;padding:.2rem}.calendar.calendar-lg .calendar-event{background:#eff1fa;border-radius:.1rem;color:#5764c6;display:block;font-size:.6rem;margin:.1rem auto;overflow:hidden;padding:3px 4px;text-align:left;text-overflow:ellipsis;vertical-align:baseline;white-space:nowrap}.carousel{background:#f8f9fa;display:block;overflow:hidden;position:relative;width:100%}.carousel .carousel-container{height:100%;left:0;position:relative}.carousel .carousel-container::before{content:"";display:block;padding-bottom:56.25%}.carousel .carousel-container .carousel-item{animation:carousel-slideout 1s ease-in-out 1;height:100%;left:0;margin:0;opacity:0;position:absolute;top:0;width:100%}.carousel .carousel-container .carousel-item:hover .item-next,.carousel .carousel-container .carousel-item:hover .item-prev{opacity:1}.carousel .carousel-container .item-next,.carousel .carousel-container .item-prev{background:rgba(231,233,237,.25);border-color:rgba(231,233,237,.5);color:#e7e9ed;opacity:0;position:absolute;top:50%;-ms-transform:translateY(-50%);transform:translateY(-50%);transition:all .4s ease;z-index:200}.carousel .carousel-container .item-prev{left:1rem}.carousel .carousel-container .item-next{right:1rem}.carousel .carousel-locator:nth-of-type(1):checked~.carousel-container .carousel-item:nth-of-type(1),.carousel .carousel-locator:nth-of-type(2):checked~.carousel-container .carousel-item:nth-of-type(2),.carousel .carousel-locator:nth-of-type(3):checked~.carousel-container .carousel-item:nth-of-type(3),.carousel .carousel-locator:nth-of-type(4):checked~.carousel-container .carousel-item:nth-of-type(4){animation:carousel-slidein .75s ease-in-out 1;opacity:1;z-index:100}.carousel .carousel-locator:nth-of-type(1):checked~.carousel-nav .nav-item:nth-of-type(1),.carousel .carousel-locator:nth-of-type(2):checked~.carousel-nav .nav-item:nth-of-type(2),.carousel .carousel-locator:nth-of-type(3):checked~.carousel-nav .nav-item:nth-of-type(3),.carousel .carousel-locator:nth-of-type(4):checked~.carousel-nav .nav-item:nth-of-type(4){color:#e7e9ed}.carousel .carousel-nav{bottom:.4rem;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;left:50%;position:absolute;-ms-transform:translateX(-50%);transform:translateX(-50%);width:10rem;z-index:200}.carousel .carousel-nav .nav-item{color:rgba(231,233,237,.5);display:block;-ms-flex:1 0 auto;flex:1 0 auto;height:1.6rem;margin:.2rem;max-width:2.5rem;position:relative}.carousel .carousel-nav .nav-item::before{background:currentColor;content:"";display:block;height:.1rem;position:absolute;top:.5rem;width:100%}@keyframes carousel-slidein{0%{transform:translateX(100%)}100%{transform:translateX(0)}}@keyframes carousel-slideout{0%{opacity:1;transform:translateX(0)}100%{opacity:1;transform:translateX(-50%)}}.comparison-slider{height:50vh;overflow:hidden;position:relative;width:100%}.comparison-slider .comparison-after,.comparison-slider .comparison-before{height:100%;left:0;margin:0;overflow:hidden;position:absolute;top:0}.comparison-slider .comparison-after img,.comparison-slider .comparison-before img{height:100%;object-fit:none;object-position:left center;position:absolute;width:100%}.comparison-slider .comparison-before{width:100%;z-index:1}.comparison-slider .comparison-before .comparison-label{right:.8rem}.comparison-slider .comparison-after{max-width:100%;min-width:0;z-index:2}.comparison-slider .comparison-after::before{background:0 0;content:"";cursor:default;height:100%;left:0;position:absolute;right:.8rem;top:0;z-index:1}.comparison-slider .comparison-after::after{background:currentColor;border-radius:50%;box-shadow:0 -5px,0 5px;color:#fff;content:"";height:3px;position:absolute;right:.4rem;top:50%;-ms-transform:translate(50%,-50%);transform:translate(50%,-50%);width:3px}.comparison-slider .comparison-after .comparison-label{left:.8rem}.comparison-slider .comparison-resizer{animation:first-run 1.5s 1 ease-in-out;cursor:ew-resize;height:.8rem;left:0;max-width:100%;min-width:.8rem;opacity:0;outline:0;position:relative;resize:horizontal;top:50%;-ms-transform:translateY(-50%) scaleY(30);transform:translateY(-50%) scaleY(30);width:0}.comparison-slider .comparison-label{background:rgba(69,77,93,.5);bottom:.8rem;color:#fff;padding:.2rem .4rem;position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@keyframes first-run{0%{width:0}25%{width:2.4rem}50%{width:.8rem}75%{width:1.2rem}100%{width:0}}.filter .filter-nav{margin:.4rem 0}.filter .filter-body{display:flex;display:-ms-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap}.filter .filter-tag#tag-action:checked~.filter-nav .chip[for=tag-action],.filter .filter-tag#tag-all:checked~.filter-nav .chip[for=tag-all],.filter .filter-tag#tag-roleplaying:checked~.filter-nav .chip[for=tag-roleplaying],.filter .filter-tag#tag-shooter:checked~.filter-nav .chip[for=tag-shooter],.filter .filter-tag#tag-sports:checked~.filter-nav .chip[for=tag-sports]{background:#5764c6;color:#fff}.filter .filter-tag#tag-action:checked~.filter-body .column:not([data-tag~=tag-action]),.filter .filter-tag#tag-roleplaying:checked~.filter-body .column:not([data-tag~=tag-roleplaying]),.filter .filter-tag#tag-shooter:checked~.filter-body .column:not([data-tag~=tag-shooter]),.filter .filter-tag#tag-sports:checked~.filter-body .column:not([data-tag~=tag-sports]){display:none}.meter{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f8f9fa;border:0;border-radius:.1rem;display:block;height:.8rem;width:100%}.meter::-webkit-meter-inner-element{display:block}.meter::-webkit-meter-bar,.meter::-webkit-meter-even-less-good-value,.meter::-webkit-meter-optimum-value,.meter::-webkit-meter-suboptimum-value{border-radius:.1rem}.meter::-webkit-meter-bar{background:#f8f9fa}.meter::-webkit-meter-optimum-value{background:#32b643}.meter::-webkit-meter-suboptimum-value{background:#ffb700}.meter::-webkit-meter-even-less-good-value{background:#e85600}.meter:-moz-meter-optimum,.meter:-moz-meter-sub-optimum,.meter:-moz-meter-sub-sub-optimum,.meter::-moz-meter-bar{border-radius:.1rem}.meter:-moz-meter-optimum::-moz-meter-bar{background:#32b643}.meter:-moz-meter-sub-optimum::-moz-meter-bar{background:#ffb700}.meter:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:#e85600}.parallax{display:block;height:auto;position:relative;width:auto}.parallax .parallax-content{box-shadow:0 1rem 2.1rem rgba(69,77,93,.3);height:auto;transform:perspective(1000px);transform-style:preserve-3d;transition:all .4s ease;width:100%}.parallax .parallax-content::before{content:"";display:block;height:100%;left:0;position:absolute;top:0;width:100%}.parallax .parallax-front{align-items:center;color:#fff;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-pack:center;height:100%;justify-content:center;left:0;position:absolute;text-align:center;text-shadow:0 0 20px rgba(69,77,93,.5);top:0;transform:translateZ(100px) scale(.9);transition:all .4s ease;width:100%;z-index:1}.parallax .parallax-top-left{height:50%;left:0;position:absolute;top:0;width:50%;z-index:300}.parallax .parallax-top-left:hover~.parallax-content{transform:perspective(1000px) rotateX(-3deg) rotateY(3deg)}.parallax .parallax-top-left:hover~.parallax-content::before{background:linear-gradient(135deg,rgba(255,255,255,.25) 0,rgba(255,255,255,0) 50%)}.parallax .parallax-top-left:hover~.parallax-content .parallax-front{transform:translate3d(-6.5px,-6.5px,100px) scale(.9)}.parallax .parallax-top-right{height:50%;position:absolute;right:0;top:0;width:50%;z-index:300}.parallax .parallax-top-right:hover~.parallax-content{transform:perspective(1000px) rotateX(-3deg) rotateY(-3deg)}.parallax .parallax-top-right:hover~.parallax-content::before{background:linear-gradient(-135deg,rgba(255,255,255,.25) 0,rgba(255,255,255,0) 50%)}.parallax .parallax-top-right:hover~.parallax-content .parallax-front{transform:translate3d(6.5px,-6.5px,100px) scale(.9)}.parallax .parallax-bottom-left{bottom:0;height:50%;left:0;position:absolute;width:50%;z-index:300}.parallax .parallax-bottom-left:hover~.parallax-content{transform:perspective(1000px) rotateX(3deg) rotateY(3deg)}.parallax .parallax-bottom-left:hover~.parallax-content::before{background:linear-gradient(45deg,rgba(255,255,255,.25) 0,rgba(255,255,255,0) 50%)}.parallax .parallax-bottom-left:hover~.parallax-content .parallax-front{transform:translate3d(-6.5px,6.5px,100px) scale(.9)}.parallax .parallax-bottom-right{bottom:0;height:50%;position:absolute;right:0;width:50%;z-index:300}.parallax .parallax-bottom-right:hover~.parallax-content{transform:perspective(1000px) rotateX(3deg) rotateY(-3deg)}.parallax .parallax-bottom-right:hover~.parallax-content::before{background:linear-gradient(-45deg,rgba(255,255,255,.25) 0,rgba(255,255,255,0) 50%)}.parallax .parallax-bottom-right:hover~.parallax-content .parallax-front{transform:translate3d(6.5px,6.5px,100px) scale(.9)}.progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f0f1f4;border:0;border-radius:.1rem;color:#5764c6;height:.2rem;position:relative;width:100%}.progress::-webkit-progress-bar{background:0 0;border-radius:.1rem}.progress::-webkit-progress-value{background:#5764c6;border-radius:.1rem}.progress::-moz-progress-bar{background:#5764c6;border-radius:.1rem}.progress:indeterminate{animation:progress-indeterminate 1.5s linear infinite;background:#f0f1f4 linear-gradient(to right,#5764c6 30%,#f0f1f4 30%) top left/150% 150% no-repeat}.progress:indeterminate::-moz-progress-bar{background:0 0}@keyframes progress-indeterminate{0%{background-position:200% 0}100%{background-position:-200% 0}}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;display:block;height:1.2rem;width:100%}.slider:focus{box-shadow:0 0 0 .1rem rgba(87,100,198,.2);outline:0}.slider::-webkit-slider-thumb{-webkit-appearance:none;background:#5764c6;border:0;border-radius:50%;height:.6rem;margin-top:-.25rem;transition:transform .2s ease;width:.6rem}.slider::-moz-range-thumb{background:#5764c6;border:0;border-radius:50%;height:.6rem;transition:transform .2s ease;width:.6rem}.slider::-ms-thumb{background:#5764c6;border:0;border-radius:50%;height:.6rem;transition:transform .2s ease;width:.6rem}.slider:active::-webkit-slider-thumb{transform:scale(1.25)}.slider:active::-moz-range-thumb{transform:scale(1.25)}.slider:active::-ms-thumb{-ms-transform:scale(1.25);transform:scale(1.25)}.slider.disabled::-webkit-slider-thumb,.slider:disabled::-webkit-slider-thumb{background:#e7e9ed;transform:scale(1)}.slider.disabled::-moz-range-thumb,.slider:disabled::-moz-range-thumb{background:#e7e9ed;transform:scale(1)}.slider.disabled::-ms-thumb,.slider:disabled::-ms-thumb{background:#e7e9ed;-ms-transform:scale(1);transform:scale(1)}.slider::-webkit-slider-runnable-track{background:#f0f1f4;border-radius:.1rem;height:.1rem;width:100%}.slider::-moz-range-track{background:#f0f1f4;border-radius:.1rem;height:.1rem;width:100%}.slider::-ms-track{background:#f0f1f4;border-radius:.1rem;height:.1rem;width:100%}.slider::-ms-fill-lower{background:#5764c6}.timeline .timeline-item{display:flex;display:-ms-flexbox;margin-bottom:1.2rem;position:relative}.timeline .timeline-item::before{background:#e7e9ed;content:"";height:100%;left:11px;position:absolute;top:1.2rem;width:2px}.timeline .timeline-item .timeline-left{-ms-flex:0 0 auto;flex:0 0 auto}.timeline .timeline-item .timeline-content{-ms-flex:1 1 auto;flex:1 1 auto;padding:2px 0 2px .8rem}.timeline .timeline-item .timeline-icon{border-radius:50%;color:#fff;display:block;height:1.2rem;text-align:center;width:1.2rem}.timeline .timeline-item .timeline-icon::before{border:.1rem solid #5764c6;border-radius:50%;content:"";display:block;height:.4rem;left:.4rem;position:absolute;top:.4rem;width:.4rem}.timeline .timeline-item .timeline-icon.icon-lg{background:#5764c6;font-size:.8rem;line-height:1rem}.timeline .timeline-item .timeline-icon.icon-lg::before{content:none}
\ No newline at end of file
+/*! Spectre.css Experimentals | MIT License | github.com/picturepan2/spectre */.calendar{border:.05rem solid #e7e9ed;border-radius:.1rem;display:block;min-width:280px;text-align:center}.calendar .calendar-nav{align-items:center;background:#f8f9fa;border-top-left-radius:.1rem;border-top-right-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-align:center;font-size:.8rem;padding:.4rem}.calendar .calendar-body,.calendar .calendar-header{display:flex;display:-ms-flexbox;-ms-flex-pack:center;-ms-flex-wrap:wrap;flex-wrap:wrap;justify-content:center;padding:.4rem 0}.calendar .calendar-body .calendar-date,.calendar .calendar-header .calendar-date{-ms-flex:0 0 14.28%;flex:0 0 14.28%;max-width:14.28%}.calendar .calendar-header{background:#f8f9fa;border-bottom:.05rem solid #e7e9ed;color:#acb3c2;font-size:.6rem}.calendar .calendar-body{color:#727e96}.calendar .calendar-date{border:0;padding:.2rem}.calendar .calendar-date .date-item{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;border:.05rem solid transparent;border-radius:50%;color:#727e96;cursor:pointer;height:1.4rem;line-height:1rem;outline:0;padding:.1rem;position:relative;text-align:center;text-decoration:none;transition:all .2s ease;vertical-align:middle;white-space:nowrap;width:1.4rem}.calendar .calendar-date .date-item.date-today{border-color:#e4e6f6;color:#5764c6}.calendar .calendar-date .date-item:focus{box-shadow:0 0 0 .1rem rgba(87,100,198,.2)}.calendar .calendar-date .date-item:focus,.calendar .calendar-date .date-item:hover{background:#fbfbfe;border-color:#e4e6f6;color:#5764c6;text-decoration:none}.calendar .calendar-date .date-item.active,.calendar .calendar-date .date-item:active{background:#4c59c2;border-color:#3e4cb6;color:#fff}.calendar .calendar-date .date-item.badge::after{position:absolute;right:3px;top:3px;transform:translate(50%,-50%)}.calendar .calendar-date .calendar-event:disabled,.calendar .calendar-date .date-item:disabled,.calendar .calendar-date.disabled .calendar-event,.calendar .calendar-date.disabled .date-item{cursor:default;opacity:.25;pointer-events:none}.calendar .calendar-range{position:relative}.calendar .calendar-range::before{background:#eff1fa;content:"";height:1.4rem;left:0;position:absolute;right:0;top:50%;transform:translateY(-50%)}.calendar .calendar-range.range-start::before{left:50%}.calendar .calendar-range.range-end::before{right:50%}.calendar .calendar-range .date-item{color:#5764c6}.calendar.calendar-lg .calendar-body{padding:0}.calendar.calendar-lg .calendar-body .calendar-date{border-bottom:.05rem solid #e7e9ed;border-right:.05rem solid #e7e9ed;display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column;height:5.5rem;padding:0}.calendar.calendar-lg .calendar-body .calendar-date:nth-child(7n){border-right:0}.calendar.calendar-lg .calendar-body .calendar-date:nth-last-child(-n+7){border-bottom:0}.calendar.calendar-lg .date-item{align-self:flex-end;-ms-flex-item-align:end;height:1.4rem;margin-right:.2rem;margin-top:.2rem}.calendar.calendar-lg .calendar-range::before{top:19px}.calendar.calendar-lg .calendar-range.range-start::before{left:auto;width:19px}.calendar.calendar-lg .calendar-range.range-end::before{right:19px}.calendar.calendar-lg .calendar-events{flex-grow:1;-ms-flex-positive:1;line-height:1;overflow-y:auto;padding:.2rem}.calendar.calendar-lg .calendar-event{background:#eff1fa;border-radius:.1rem;color:#5764c6;display:block;font-size:.6rem;margin:.1rem auto;overflow:hidden;padding:3px 4px;text-align:left;text-overflow:ellipsis;white-space:nowrap}.carousel{background:#f8f9fa;display:block;overflow:hidden;position:relative;width:100%}.carousel .carousel-container{height:100%;left:0;position:relative}.carousel .carousel-container::before{content:"";display:block;padding-bottom:56.25%}.carousel .carousel-container .carousel-item{animation:carousel-slideout 1s ease-in-out 1;height:100%;left:0;margin:0;opacity:0;position:absolute;top:0;width:100%}.carousel .carousel-container .carousel-item:hover .item-next,.carousel .carousel-container .carousel-item:hover .item-prev{opacity:1}.carousel .carousel-container .item-next,.carousel .carousel-container .item-prev{background:rgba(231,233,237,.25);border-color:rgba(231,233,237,.5);color:#e7e9ed;opacity:0;position:absolute;top:50%;transform:translateY(-50%);transition:all .4s ease;z-index:200}.carousel .carousel-container .item-prev{left:1rem}.carousel .carousel-container .item-next{right:1rem}.carousel .carousel-locator:nth-of-type(1):checked~.carousel-container .carousel-item:nth-of-type(1),.carousel .carousel-locator:nth-of-type(2):checked~.carousel-container .carousel-item:nth-of-type(2),.carousel .carousel-locator:nth-of-type(3):checked~.carousel-container .carousel-item:nth-of-type(3),.carousel .carousel-locator:nth-of-type(4):checked~.carousel-container .carousel-item:nth-of-type(4){animation:carousel-slidein .75s ease-in-out 1;opacity:1;z-index:100}.carousel .carousel-locator:nth-of-type(1):checked~.carousel-nav .nav-item:nth-of-type(1),.carousel .carousel-locator:nth-of-type(2):checked~.carousel-nav .nav-item:nth-of-type(2),.carousel .carousel-locator:nth-of-type(3):checked~.carousel-nav .nav-item:nth-of-type(3),.carousel .carousel-locator:nth-of-type(4):checked~.carousel-nav .nav-item:nth-of-type(4){color:#e7e9ed}.carousel .carousel-nav{bottom:.4rem;display:flex;display:-ms-flexbox;-ms-flex-pack:center;justify-content:center;left:50%;position:absolute;transform:translateX(-50%);width:10rem;z-index:200}.carousel .carousel-nav .nav-item{color:rgba(231,233,237,.5);display:block;-ms-flex:1 0 auto;flex:1 0 auto;height:1.6rem;margin:.2rem;max-width:2.5rem;position:relative}.carousel .carousel-nav .nav-item::before{background:currentColor;content:"";display:block;height:.1rem;position:absolute;top:.5rem;width:100%}@keyframes carousel-slidein{0%{transform:translateX(100%)}100%{transform:translateX(0)}}@keyframes carousel-slideout{0%{opacity:1;transform:translateX(0)}100%{opacity:1;transform:translateX(-50%)}}.comparison-slider{height:50vh;overflow:hidden;position:relative;width:100%}.comparison-slider .comparison-after,.comparison-slider .comparison-before{height:100%;left:0;margin:0;overflow:hidden;position:absolute;top:0}.comparison-slider .comparison-after img,.comparison-slider .comparison-before img{height:100%;object-fit:none;object-position:left center;position:absolute;width:100%}.comparison-slider .comparison-before{width:100%;z-index:1}.comparison-slider .comparison-before .comparison-label{right:.8rem}.comparison-slider .comparison-after{max-width:100%;min-width:0;z-index:2}.comparison-slider .comparison-after::before{background:0 0;content:"";cursor:default;height:100%;left:0;position:absolute;right:.8rem;top:0;z-index:1}.comparison-slider .comparison-after::after{background:currentColor;border-radius:50%;box-shadow:0 -5px,0 5px;color:#fff;content:"";height:3px;position:absolute;right:.4rem;top:50%;transform:translate(50%,-50%);width:3px}.comparison-slider .comparison-after .comparison-label{left:.8rem}.comparison-slider .comparison-resizer{animation:first-run 1.5s 1 ease-in-out;cursor:ew-resize;height:.8rem;left:0;max-width:100%;min-width:.8rem;opacity:0;outline:0;position:relative;resize:horizontal;top:50%;transform:translateY(-50%) scaleY(30);width:0}.comparison-slider .comparison-label{background:rgba(69,77,93,.5);bottom:.8rem;color:#fff;padding:.2rem .4rem;position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@keyframes first-run{0%{width:0}25%{width:2.4rem}50%{width:.8rem}75%{width:1.2rem}100%{width:0}}.filter .filter-nav{margin:.4rem 0}.filter .filter-body{display:flex;display:-ms-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap}.filter .filter-tag#tag-action:checked~.filter-nav .chip[for=tag-action],.filter .filter-tag#tag-all:checked~.filter-nav .chip[for=tag-all],.filter .filter-tag#tag-roleplaying:checked~.filter-nav .chip[for=tag-roleplaying],.filter .filter-tag#tag-shooter:checked~.filter-nav .chip[for=tag-shooter],.filter .filter-tag#tag-sports:checked~.filter-nav .chip[for=tag-sports]{background:#5764c6;color:#fff}.filter .filter-tag#tag-action:checked~.filter-body .column:not([data-tag~=tag-action]),.filter .filter-tag#tag-roleplaying:checked~.filter-body .column:not([data-tag~=tag-roleplaying]),.filter .filter-tag#tag-shooter:checked~.filter-body .column:not([data-tag~=tag-shooter]),.filter .filter-tag#tag-sports:checked~.filter-body .column:not([data-tag~=tag-sports]){display:none}.meter{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f8f9fa;border:0;border-radius:.1rem;display:block;height:.8rem;width:100%}.meter::-webkit-meter-inner-element{display:block}.meter::-webkit-meter-bar,.meter::-webkit-meter-even-less-good-value,.meter::-webkit-meter-optimum-value,.meter::-webkit-meter-suboptimum-value{border-radius:.1rem}.meter::-webkit-meter-bar{background:#f8f9fa}.meter::-webkit-meter-optimum-value{background:#32b643}.meter::-webkit-meter-suboptimum-value{background:#ffb700}.meter::-webkit-meter-even-less-good-value{background:#e85600}.meter:-moz-meter-optimum,.meter:-moz-meter-sub-optimum,.meter:-moz-meter-sub-sub-optimum,.meter::-moz-meter-bar{border-radius:.1rem}.meter:-moz-meter-optimum::-moz-meter-bar{background:#32b643}.meter:-moz-meter-sub-optimum::-moz-meter-bar{background:#ffb700}.meter:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:#e85600}.parallax{display:block;height:auto;position:relative;width:auto}.parallax .parallax-content{box-shadow:0 1rem 2.1rem rgba(69,77,93,.3);height:auto;transform:perspective(1000px);transform-style:preserve-3d;transition:all .4s ease;width:100%}.parallax .parallax-content::before{content:"";display:block;height:100%;left:0;position:absolute;top:0;width:100%}.parallax .parallax-front{align-items:center;color:#fff;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-pack:center;height:100%;justify-content:center;left:0;position:absolute;text-align:center;text-shadow:0 0 20px rgba(69,77,93,.75);top:0;transform:translateZ(50px) scale(.95);transition:all .4s ease;width:100%;z-index:1}.parallax .parallax-top-left{height:50%;left:0;position:absolute;top:0;width:50%;z-index:100}.parallax .parallax-top-left:hover~.parallax-content{transform:perspective(1000px) rotateX(3deg) rotateY(-3deg)}.parallax .parallax-top-left:hover~.parallax-content::before{background:linear-gradient(135deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-top-left:hover~.parallax-content .parallax-front{transform:translate3d(4.5px,4.5px,50px) scale(.95)}.parallax .parallax-top-right{height:50%;position:absolute;right:0;top:0;width:50%;z-index:100}.parallax .parallax-top-right:hover~.parallax-content{transform:perspective(1000px) rotateX(3deg) rotateY(3deg)}.parallax .parallax-top-right:hover~.parallax-content::before{background:linear-gradient(-135deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-top-right:hover~.parallax-content .parallax-front{transform:translate3d(-4.5px,4.5px,50px) scale(.95)}.parallax .parallax-bottom-left{bottom:0;height:50%;left:0;position:absolute;width:50%;z-index:100}.parallax .parallax-bottom-left:hover~.parallax-content{transform:perspective(1000px) rotateX(-3deg) rotateY(-3deg)}.parallax .parallax-bottom-left:hover~.parallax-content::before{background:linear-gradient(45deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-bottom-left:hover~.parallax-content .parallax-front{transform:translate3d(4.5px,-4.5px,50px) scale(.95)}.parallax .parallax-bottom-right{bottom:0;height:50%;position:absolute;right:0;width:50%;z-index:100}.parallax .parallax-bottom-right:hover~.parallax-content{transform:perspective(1000px) rotateX(-3deg) rotateY(3deg)}.parallax .parallax-bottom-right:hover~.parallax-content::before{background:linear-gradient(-45deg,rgba(255,255,255,.35) 0,transparent 50%)}.parallax .parallax-bottom-right:hover~.parallax-content .parallax-front{transform:translate3d(-4.5px,-4.5px,50px) scale(.95)}.progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f0f1f4;border:0;border-radius:.1rem;color:#5764c6;height:.2rem;position:relative;width:100%}.progress::-webkit-progress-bar{background:0 0;border-radius:.1rem}.progress::-webkit-progress-value{background:#5764c6;border-radius:.1rem}.progress::-moz-progress-bar{background:#5764c6;border-radius:.1rem}.progress:indeterminate{animation:progress-indeterminate 1.5s linear infinite;background:#f0f1f4 linear-gradient(to right,#5764c6 30%,#f0f1f4 30%) top left/150% 150% no-repeat}.progress:indeterminate::-moz-progress-bar{background:0 0}@keyframes progress-indeterminate{0%{background-position:200% 0}100%{background-position:-200% 0}}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;display:block;height:1.2rem;width:100%}.slider:focus{box-shadow:0 0 0 .1rem rgba(87,100,198,.2);outline:0}.slider::-webkit-slider-thumb{-webkit-appearance:none;background:#5764c6;border:0;border-radius:50%;height:.6rem;margin-top:-.25rem;transition:transform .2s ease;width:.6rem}.slider::-moz-range-thumb{background:#5764c6;border:0;border-radius:50%;height:.6rem;transition:transform .2s ease;width:.6rem}.slider::-ms-thumb{background:#5764c6;border:0;border-radius:50%;height:.6rem;transition:transform .2s ease;width:.6rem}.slider:active::-webkit-slider-thumb{transform:scale(1.25)}.slider:active::-moz-range-thumb{transform:scale(1.25)}.slider:active::-ms-thumb{transform:scale(1.25)}.slider.disabled::-webkit-slider-thumb,.slider:disabled::-webkit-slider-thumb{background:#e7e9ed;transform:scale(1)}.slider.disabled::-moz-range-thumb,.slider:disabled::-moz-range-thumb{background:#e7e9ed;transform:scale(1)}.slider.disabled::-ms-thumb,.slider:disabled::-ms-thumb{background:#e7e9ed;transform:scale(1)}.slider::-webkit-slider-runnable-track{background:#f0f1f4;border-radius:.1rem;height:.1rem;width:100%}.slider::-moz-range-track{background:#f0f1f4;border-radius:.1rem;height:.1rem;width:100%}.slider::-ms-track{background:#f0f1f4;border-radius:.1rem;height:.1rem;width:100%}.slider::-ms-fill-lower{background:#5764c6}.timeline .timeline-item{display:flex;display:-ms-flexbox;margin-bottom:1.2rem;position:relative}.timeline .timeline-item::before{background:#e7e9ed;content:"";height:100%;left:11px;position:absolute;top:1.2rem;width:2px}.timeline .timeline-item .timeline-left{-ms-flex:0 0 auto;flex:0 0 auto}.timeline .timeline-item .timeline-content{-ms-flex:1 1 auto;flex:1 1 auto;padding:2px 0 2px .8rem}.timeline .timeline-item .timeline-icon{border-radius:50%;color:#fff;display:block;height:1.2rem;text-align:center;width:1.2rem}.timeline .timeline-item .timeline-icon::before{border:.1rem solid #5764c6;border-radius:50%;content:"";display:block;height:.4rem;left:.4rem;position:absolute;top:.4rem;width:.4rem}.timeline .timeline-item .timeline-icon.icon-lg{background:#5764c6;font-size:.8rem;line-height:1rem}.timeline .timeline-item .timeline-icon.icon-lg::before{content:none}
\ No newline at end of file
diff --git a/docs/dist/spectre-icons.css b/docs/dist/spectre-icons.css
index f2be32f..252fff2 100644
--- a/docs/dist/spectre-icons.css
+++ b/docs/dist/spectre-icons.css
@@ -10,15 +10,16 @@
   vertical-align: middle;
   width: 1em;
 }
+
 .icon::before,
 .icon::after {
   display: block;
   left: 50%;
   position: absolute;
   top: 50%;
-  -ms-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
 }
+
 .icon-arrow-down::before,
 .icon-arrow-left::before,
 .icon-arrow-right::before,
@@ -34,22 +35,23 @@
   height: .65em;
   width: .65em;
 }
+
 .icon-arrow-down::before {
-  -ms-transform: translate(-50%, -75%) rotate(225deg);
   transform: translate(-50%, -75%) rotate(225deg);
 }
+
 .icon-arrow-left::before {
-  -ms-transform: translate(-25%, -50%) rotate(-45deg);
   transform: translate(-25%, -50%) rotate(-45deg);
 }
+
 .icon-arrow-right::before {
-  -ms-transform: translate(-75%, -50%) rotate(135deg);
   transform: translate(-75%, -50%) rotate(135deg);
 }
+
 .icon-arrow-up::before {
-  -ms-transform: translate(-50%, -25%) rotate(45deg);
   transform: translate(-50%, -25%) rotate(45deg);
 }
+
 .icon-back::after,
 .icon-forward::after {
   background: currentColor;
@@ -57,6 +59,7 @@
   height: .1rem;
   width: .8em;
 }
+
 .icon-downward::after,
 .icon-upward::after {
   background: currentColor;
@@ -64,44 +67,49 @@
   height: .8em;
   width: .1rem;
 }
+
 .icon-back::after {
   left: 55%;
 }
+
 .icon-back::before {
-  -ms-transform: translate(-50%, -50%) rotate(-45deg);
   transform: translate(-50%, -50%) rotate(-45deg);
 }
+
 .icon-downward::after {
   top: 45%;
 }
+
 .icon-downward::before {
-  -ms-transform: translate(-50%, -50%) rotate(-135deg);
   transform: translate(-50%, -50%) rotate(-135deg);
 }
+
 .icon-forward::after {
   left: 45%;
 }
+
 .icon-forward::before {
-  -ms-transform: translate(-50%, -50%) rotate(135deg);
   transform: translate(-50%, -50%) rotate(135deg);
 }
+
 .icon-upward::after {
   top: 55%;
 }
+
 .icon-upward::before {
-  -ms-transform: translate(-50%, -50%) rotate(45deg);
   transform: translate(-50%, -50%) rotate(45deg);
 }
+
 .icon-caret::before {
   border-left: .3em solid transparent;
   border-right: .3em solid transparent;
   border-top: .3em solid currentColor;
   content: "";
   height: 0;
-  -ms-transform: translate(-50%, -25%);
-  transform: translate(-50%, -25%);
+  transform: translate(-50%, -25%); 
   width: 0;
 }
+
 .icon-menu::before {
   background: currentColor;
   box-shadow: 0 -.35em, 0 .35em;
@@ -109,6 +117,7 @@
   height: .1rem;
   width: 100%;
 }
+
 .icon-apps::before {
   background: currentColor;
   box-shadow: -.35em -.35em, -.35em 0, -.35em .35em, 0 -.35em, 0 .35em, .35em -.35em, .35em 0, .35em .35em;
@@ -116,9 +125,10 @@
   height: 3px;
   width: 3px;
 }
+
 .icon-resize-horiz::before,
-.icon-resize-vert::before,
 .icon-resize-horiz::after,
+.icon-resize-vert::before,
 .icon-resize-vert::after {
   border: .1rem solid currentColor;
   border-bottom: 0;
@@ -127,24 +137,25 @@
   height: .45em;
   width: .45em;
 }
+
 .icon-resize-horiz::before,
 .icon-resize-vert::before {
-  -ms-transform: translate(-50%, -90%) rotate(45deg);
   transform: translate(-50%, -90%) rotate(45deg);
 }
+
 .icon-resize-horiz::after,
 .icon-resize-vert::after {
-  -ms-transform: translate(-50%, -10%) rotate(225deg);
   transform: translate(-50%, -10%) rotate(225deg);
 }
+
 .icon-resize-horiz::before {
-  -ms-transform: translate(-90%, -50%) rotate(-45deg);
   transform: translate(-90%, -50%) rotate(-45deg);
 }
+
 .icon-resize-horiz::after {
-  -ms-transform: translate(-10%, -50%) rotate(135deg);
   transform: translate(-10%, -50%) rotate(135deg);
 }
+
 .icon-more-horiz::before,
 .icon-more-vert::before {
   background: currentColor;
@@ -154,9 +165,11 @@
   height: 3px;
   width: 3px;
 }
+
 .icon-more-vert::before {
   box-shadow: 0 -.4em, 0 .4em;
 }
+
 .icon-plus::before,
 .icon-minus::before,
 .icon-cross::before {
@@ -165,6 +178,7 @@
   height: .1rem;
   width: 100%;
 }
+
 .icon-plus::after,
 .icon-cross::after {
   background: currentColor;
@@ -172,44 +186,49 @@
   height: 100%;
   width: .1rem;
 }
+
 .icon-cross::before {
   width: 100%;
 }
+
 .icon-cross::after {
   height: 100%;
 }
+
 .icon-cross::before,
 .icon-cross::after {
-  -ms-transform: translate(-50%, -50%) rotate(45deg);
   transform: translate(-50%, -50%) rotate(45deg);
 }
+
 .icon-check::before {
   border: .1rem solid currentColor;
   border-right: 0;
   border-top: 0;
   content: "";
   height: .5em;
-  -ms-transform: translate(-50%, -75%) rotate(-45deg);
-  transform: translate(-50%, -75%) rotate(-45deg);
+  transform: translate(-50%, -75%) rotate(-45deg); 
   width: .9em;
 }
+
 .icon-stop {
   border: .1rem solid currentColor;
   border-radius: 50%;
 }
+
 .icon-stop::before {
   background: currentColor;
   content: "";
   height: .1rem;
-  -ms-transform: translate(-50%, -50%) rotate(45deg);
   transform: translate(-50%, -50%) rotate(45deg);
   width: 1em;
 }
+
 .icon-shutdown {
   border: .1rem solid currentColor;
   border-radius: 50%;
   border-top-color: transparent;
 }
+
 .icon-shutdown::before {
   background: currentColor;
   content: "";
@@ -217,6 +236,7 @@
   top: .1em;
   width: .1rem;
 }
+
 .icon-refresh::before {
   border: .1rem solid currentColor;
   border-radius: 50%;
@@ -225,6 +245,7 @@
   height: 1em;
   width: 1em;
 }
+
 .icon-refresh::after {
   border: .2em solid currentColor;
   border-left-color: transparent;
@@ -235,6 +256,7 @@
   top: 20%;
   width: 0;
 }
+
 .icon-search::before {
   border: .1rem solid currentColor;
   border-radius: 50%;
@@ -242,28 +264,28 @@
   height: .75em;
   left: 5%;
   top: 5%;
-  -ms-transform: translate(0, 0) rotate(45deg);
   transform: translate(0, 0) rotate(45deg);
   width: .75em;
 }
+
 .icon-search::after {
   background: currentColor;
   content: "";
   height: .1rem;
   left: 80%;
   top: 80%;
-  -ms-transform: translate(-50%, -50%) rotate(45deg);
   transform: translate(-50%, -50%) rotate(45deg);
   width: .4em;
 }
+
 .icon-edit::before {
   border: .1rem solid currentColor;
   content: "";
   height: .4em;
-  -ms-transform: translate(-40%, -60%) rotate(-45deg);
   transform: translate(-40%, -60%) rotate(-45deg);
   width: .85em;
 }
+
 .icon-edit::after {
   border: .15em solid currentColor;
   border-right-color: transparent;
@@ -272,10 +294,10 @@
   height: 0;
   left: 5%;
   top: 95%;
-  -ms-transform: translate(0, -100%);
   transform: translate(0, -100%);
   width: 0;
 }
+
 .icon-delete::before {
   border: .1rem solid currentColor;
   border-bottom-left-radius: .1rem;
@@ -286,6 +308,7 @@
   top: 60%;
   width: .75em;
 }
+
 .icon-delete::after {
   background: currentColor;
   box-shadow: -.25em .2em, .25em .2em;
@@ -294,12 +317,14 @@
   top: .05rem;
   width: .5em;
 }
+
 .icon-share {
   border: .1rem solid currentColor;
   border-radius: .1rem;
   border-right: 0;
   border-top: 0;
 }
+
 .icon-share::before {
   border: .1rem solid currentColor;
   border-left: 0;
@@ -308,10 +333,10 @@
   height: .4em;
   left: 100%;
   top: .25em;
-  -ms-transform: translate(-125%, -50%) rotate(-45deg);
   transform: translate(-125%, -50%) rotate(-45deg);
   width: .4em;
 }
+
 .icon-share::after {
   border: .1rem solid currentColor;
   border-bottom: 0;
@@ -321,6 +346,7 @@
   height: .5em;
   width: .6em;
 }
+
 .icon-flag::before {
   background: currentColor;
   content: "";
@@ -328,6 +354,7 @@
   left: 15%;
   width: .1rem;
 }
+
 .icon-flag::after {
   border: .1rem solid currentColor;
   border-bottom-right-radius: .1rem;
@@ -339,6 +366,7 @@
   top: 35%;
   width: .8em;
 }
+
 .icon-bookmark::before {
   border: .1rem solid currentColor;
   border-bottom: 0;
@@ -348,6 +376,7 @@
   height: .9em;
   width: .8em;
 }
+
 .icon-bookmark::after {
   border: .1rem solid currentColor;
   border-bottom: 0;
@@ -355,14 +384,15 @@
   border-radius: .1rem;
   content: "";
   height: .5em;
-  -ms-transform: translate(-50%, 35%) rotate(-45deg) skew(15deg, 15deg);
   transform: translate(-50%, 35%) rotate(-45deg) skew(15deg, 15deg);
   width: .5em;
 }
+
 .icon-download,
 .icon-upload {
   border-bottom: .1rem solid currentColor;
 }
+
 .icon-download::before,
 .icon-upload::before {
   border: .1rem solid currentColor;
@@ -370,10 +400,10 @@
   border-right: 0;
   content: "";
   height: .5em;
-  -ms-transform: translate(-50%, -60%) rotate(-135deg);
-  transform: translate(-50%, -60%) rotate(-135deg);
+  transform: translate(-50%, -60%) rotate(-135deg); 
   width: .5em;
 }
+
 .icon-download::after,
 .icon-upload::after {
   background: currentColor;
@@ -382,35 +412,37 @@
   top: 40%;
   width: .1rem;
 }
+
 .icon-upload::before {
-  -ms-transform: translate(-50%, -60%) rotate(45deg);
   transform: translate(-50%, -60%) rotate(45deg);
 }
+
 .icon-upload::after {
   top: 50%;
 }
+
 .icon-time {
   border: .1rem solid currentColor;
   border-radius: 50%;
 }
+
 .icon-time::before {
   background: currentColor;
   content: "";
   height: .4em;
-  -ms-transform: translate(-50%, -75%);
   transform: translate(-50%, -75%);
   width: .1rem;
 }
+
 .icon-time::after {
   background: currentColor;
   content: "";
   height: .3em;
-  -ms-transform: translate(-50%, -75%) rotate(90deg);
   transform: translate(-50%, -75%) rotate(90deg);
-  -ms-transform-origin: 50% 90%;
   transform-origin: 50% 90%;
   width: .1rem;
 }
+
 .icon-mail::before {
   border: .1rem solid currentColor;
   border-radius: .1rem;
@@ -418,16 +450,17 @@
   height: .8em;
   width: 1em;
 }
+
 .icon-mail::after {
   border: .1rem solid currentColor;
   border-right: 0;
   border-top: 0;
   content: "";
   height: .5em;
-  -ms-transform: translate(-50%, -90%) rotate(-45deg) skew(10deg, 10deg);
   transform: translate(-50%, -90%) rotate(-45deg) skew(10deg, 10deg);
   width: .5em;
 }
+
 .icon-people::before {
   border: .1rem solid currentColor;
   border-radius: 50%;
@@ -436,6 +469,7 @@
   top: 25%;
   width: .45em;
 }
+
 .icon-people::after {
   border: .1rem solid currentColor;
   border-radius: 50% 50% 0 0;
@@ -444,12 +478,14 @@
   top: 75%;
   width: .9em;
 }
+
 .icon-message {
   border: .1rem solid currentColor;
   border-bottom: 0;
   border-radius: .1rem;
   border-right: 0;
 }
+
 .icon-message::before {
   border: .1rem solid currentColor;
   border-bottom-right-radius: .1rem;
@@ -461,6 +497,7 @@
   top: 40%;
   width: .7em;
 }
+
 .icon-message::after {
   background: currentColor;
   border-radius: .1rem;
@@ -468,14 +505,15 @@
   height: .3em;
   left: 10%;
   top: 100%;
-  -ms-transform: translate(0, -90%) rotate(45deg);
   transform: translate(0, -90%) rotate(45deg);
   width: .1rem;
 }
+
 .icon-photo {
   border: .1rem solid currentColor;
   border-radius: .1rem;
 }
+
 .icon-photo::before {
   border: .1rem solid currentColor;
   border-radius: 50%;
@@ -485,6 +523,7 @@
   top: 35%;
   width: .25em;
 }
+
 .icon-photo::after {
   border: .1rem solid currentColor;
   border-bottom: 0;
@@ -492,10 +531,10 @@
   content: "";
   height: .5em;
   left: 60%;
-  -ms-transform: translate(-50%, 25%) rotate(-45deg);
   transform: translate(-50%, 25%) rotate(-45deg);
   width: .5em;
 }
+
 .icon-link::before,
 .icon-link::after {
   border: .1rem solid currentColor;
@@ -505,36 +544,38 @@
   height: .5em;
   width: .75em;
 }
+
 .icon-link::before {
-  -ms-transform: translate(-70%, -45%) rotate(-45deg);
   transform: translate(-70%, -45%) rotate(-45deg);
 }
+
 .icon-link::after {
-  -ms-transform: translate(-30%, -55%) rotate(135deg);
   transform: translate(-30%, -55%) rotate(135deg);
 }
+
 .icon-location::before {
   border: .1rem solid currentColor;
   border-radius: 50% 50% 50% 0;
   content: "";
   height: .8em;
-  -ms-transform: translate(-50%, -60%) rotate(-45deg);
   transform: translate(-50%, -60%) rotate(-45deg);
   width: .8em;
 }
+
 .icon-location::after {
   border: .1rem solid currentColor;
   border-radius: 50%;
   content: "";
   height: .2em;
-  -ms-transform: translate(-50%, -80%);
   transform: translate(-50%, -80%);
   width: .2em;
 }
+
 .icon-emoji {
   border: .1rem solid currentColor;
   border-radius: 50%;
 }
+
 .icon-emoji::before {
   border-radius: 50%;
   box-shadow: -.17em -.15em, .17em -.15em;
@@ -542,6 +583,7 @@
   height: .1em;
   width: .1em;
 }
+
 .icon-emoji::after {
   border: .1rem solid currentColor;
   border-bottom-color: transparent;
@@ -549,10 +591,10 @@
   border-right-color: transparent;
   content: "";
   height: .5em;
-  -ms-transform: translate(-50%, -40%) rotate(-135deg);
   transform: translate(-50%, -40%) rotate(-135deg);
   width: .5em;
 }
+
 .accordion .icon,
 .btn .icon,
 .toast .icon,
diff --git a/docs/dist/spectre-icons.min.css b/docs/dist/spectre-icons.min.css
index 3bf210b..aeffa58 100644
--- a/docs/dist/spectre-icons.min.css
+++ b/docs/dist/spectre-icons.min.css
@@ -1 +1 @@
-/*! Spectre.css Icons | MIT License | github.com/picturepan2/spectre */.icon{box-sizing:border-box;display:inline-block;font-size:inherit;font-style:normal;height:1em;position:relative;text-indent:-9999px;vertical-align:middle;width:1em}.icon::after,.icon::before{display:block;left:50%;position:absolute;top:50%;-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.icon-arrow-down::before,.icon-arrow-left::before,.icon-arrow-right::before,.icon-arrow-up::before,.icon-back::before,.icon-downward::before,.icon-forward::before,.icon-upward::before{border:.1rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.65em;width:.65em}.icon-arrow-down::before{-ms-transform:translate(-50%,-75%) rotate(225deg);transform:translate(-50%,-75%) rotate(225deg)}.icon-arrow-left::before{-ms-transform:translate(-25%,-50%) rotate(-45deg);transform:translate(-25%,-50%) rotate(-45deg)}.icon-arrow-right::before{-ms-transform:translate(-75%,-50%) rotate(135deg);transform:translate(-75%,-50%) rotate(135deg)}.icon-arrow-up::before{-ms-transform:translate(-50%,-25%) rotate(45deg);transform:translate(-50%,-25%) rotate(45deg)}.icon-back::after,.icon-forward::after{background:currentColor;content:"";height:.1rem;width:.8em}.icon-downward::after,.icon-upward::after{background:currentColor;content:"";height:.8em;width:.1rem}.icon-back::after{left:55%}.icon-back::before{-ms-transform:translate(-50%,-50%) rotate(-45deg);transform:translate(-50%,-50%) rotate(-45deg)}.icon-downward::after{top:45%}.icon-downward::before{-ms-transform:translate(-50%,-50%) rotate(-135deg);transform:translate(-50%,-50%) rotate(-135deg)}.icon-forward::after{left:45%}.icon-forward::before{-ms-transform:translate(-50%,-50%) rotate(135deg);transform:translate(-50%,-50%) rotate(135deg)}.icon-upward::after{top:55%}.icon-upward::before{-ms-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg)}.icon-caret::before{border-left:.3em solid transparent;border-right:.3em solid transparent;border-top:.3em solid currentColor;content:"";height:0;-ms-transform:translate(-50%,-25%);transform:translate(-50%,-25%);width:0}.icon-menu::before{background:currentColor;box-shadow:0 -.35em,0 .35em;content:"";height:.1rem;width:100%}.icon-apps::before{background:currentColor;box-shadow:-.35em -.35em,-.35em 0,-.35em .35em,0 -.35em,0 .35em,.35em -.35em,.35em 0,.35em .35em;content:"";height:3px;width:3px}.icon-resize-horiz::after,.icon-resize-horiz::before,.icon-resize-vert::after,.icon-resize-vert::before{border:.1rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.45em;width:.45em}.icon-resize-horiz::before,.icon-resize-vert::before{-ms-transform:translate(-50%,-90%) rotate(45deg);transform:translate(-50%,-90%) rotate(45deg)}.icon-resize-horiz::after,.icon-resize-vert::after{-ms-transform:translate(-50%,-10%) rotate(225deg);transform:translate(-50%,-10%) rotate(225deg)}.icon-resize-horiz::before{-ms-transform:translate(-90%,-50%) rotate(-45deg);transform:translate(-90%,-50%) rotate(-45deg)}.icon-resize-horiz::after{-ms-transform:translate(-10%,-50%) rotate(135deg);transform:translate(-10%,-50%) rotate(135deg)}.icon-more-horiz::before,.icon-more-vert::before{background:currentColor;border-radius:50%;box-shadow:-.4em 0,.4em 0;content:"";height:3px;width:3px}.icon-more-vert::before{box-shadow:0 -.4em,0 .4em}.icon-cross::before,.icon-minus::before,.icon-plus::before{background:currentColor;content:"";height:.1rem;width:100%}.icon-cross::after,.icon-plus::after{background:currentColor;content:"";height:100%;width:.1rem}.icon-cross::before{width:100%}.icon-cross::after{height:100%}.icon-cross::after,.icon-cross::before{-ms-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg)}.icon-check::before{border:.1rem solid currentColor;border-right:0;border-top:0;content:"";height:.5em;-ms-transform:translate(-50%,-75%) rotate(-45deg);transform:translate(-50%,-75%) rotate(-45deg);width:.9em}.icon-stop{border:.1rem solid currentColor;border-radius:50%}.icon-stop::before{background:currentColor;content:"";height:.1rem;-ms-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg);width:1em}.icon-shutdown{border:.1rem solid currentColor;border-radius:50%;border-top-color:transparent}.icon-shutdown::before{background:currentColor;content:"";height:.5em;top:.1em;width:.1rem}.icon-refresh::before{border:.1rem solid currentColor;border-radius:50%;border-right-color:transparent;content:"";height:1em;width:1em}.icon-refresh::after{border:.2em solid currentColor;border-left-color:transparent;border-top-color:transparent;content:"";height:0;left:80%;top:20%;width:0}.icon-search::before{border:.1rem solid currentColor;border-radius:50%;content:"";height:.75em;left:5%;top:5%;-ms-transform:translate(0,0) rotate(45deg);transform:translate(0,0) rotate(45deg);width:.75em}.icon-search::after{background:currentColor;content:"";height:.1rem;left:80%;top:80%;-ms-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg);width:.4em}.icon-edit::before{border:.1rem solid currentColor;content:"";height:.4em;-ms-transform:translate(-40%,-60%) rotate(-45deg);transform:translate(-40%,-60%) rotate(-45deg);width:.85em}.icon-edit::after{border:.15em solid currentColor;border-right-color:transparent;border-top-color:transparent;content:"";height:0;left:5%;top:95%;-ms-transform:translate(0,-100%);transform:translate(0,-100%);width:0}.icon-delete::before{border:.1rem solid currentColor;border-bottom-left-radius:.1rem;border-bottom-right-radius:.1rem;border-top:0;content:"";height:.75em;top:60%;width:.75em}.icon-delete::after{background:currentColor;box-shadow:-.25em .2em,.25em .2em;content:"";height:.1rem;top:.05rem;width:.5em}.icon-share{border:.1rem solid currentColor;border-radius:.1rem;border-right:0;border-top:0}.icon-share::before{border:.1rem solid currentColor;border-left:0;border-top:0;content:"";height:.4em;left:100%;top:.25em;-ms-transform:translate(-125%,-50%) rotate(-45deg);transform:translate(-125%,-50%) rotate(-45deg);width:.4em}.icon-share::after{border:.1rem solid currentColor;border-bottom:0;border-radius:75% 0;border-right:0;content:"";height:.5em;width:.6em}.icon-flag::before{background:currentColor;content:"";height:1em;left:15%;width:.1rem}.icon-flag::after{border:.1rem solid currentColor;border-bottom-right-radius:.1rem;border-left:0;border-top-right-radius:.1rem;content:"";height:.65em;left:60%;top:35%;width:.8em}.icon-bookmark::before{border:.1rem solid currentColor;border-bottom:0;border-top-left-radius:.1rem;border-top-right-radius:.1rem;content:"";height:.9em;width:.8em}.icon-bookmark::after{border:.1rem solid currentColor;border-bottom:0;border-left:0;border-radius:.1rem;content:"";height:.5em;-ms-transform:translate(-50%,35%) rotate(-45deg) skew(15deg,15deg);transform:translate(-50%,35%) rotate(-45deg) skew(15deg,15deg);width:.5em}.icon-download,.icon-upload{border-bottom:.1rem solid currentColor}.icon-download::before,.icon-upload::before{border:.1rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.5em;-ms-transform:translate(-50%,-60%) rotate(-135deg);transform:translate(-50%,-60%) rotate(-135deg);width:.5em}.icon-download::after,.icon-upload::after{background:currentColor;content:"";height:.6em;top:40%;width:.1rem}.icon-upload::before{-ms-transform:translate(-50%,-60%) rotate(45deg);transform:translate(-50%,-60%) rotate(45deg)}.icon-upload::after{top:50%}.icon-time{border:.1rem solid currentColor;border-radius:50%}.icon-time::before{background:currentColor;content:"";height:.4em;-ms-transform:translate(-50%,-75%);transform:translate(-50%,-75%);width:.1rem}.icon-time::after{background:currentColor;content:"";height:.3em;-ms-transform:translate(-50%,-75%) rotate(90deg);transform:translate(-50%,-75%) rotate(90deg);-ms-transform-origin:50% 90%;transform-origin:50% 90%;width:.1rem}.icon-mail::before{border:.1rem solid currentColor;border-radius:.1rem;content:"";height:.8em;width:1em}.icon-mail::after{border:.1rem solid currentColor;border-right:0;border-top:0;content:"";height:.5em;-ms-transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);width:.5em}.icon-people::before{border:.1rem solid currentColor;border-radius:50%;content:"";height:.45em;top:25%;width:.45em}.icon-people::after{border:.1rem solid currentColor;border-radius:50% 50% 0 0;content:"";height:.4em;top:75%;width:.9em}.icon-message{border:.1rem solid currentColor;border-bottom:0;border-radius:.1rem;border-right:0}.icon-message::before{border:.1rem solid currentColor;border-bottom-right-radius:.1rem;border-left:0;border-top:0;content:"";height:.8em;left:65%;top:40%;width:.7em}.icon-message::after{background:currentColor;border-radius:.1rem;content:"";height:.3em;left:10%;top:100%;-ms-transform:translate(0,-90%) rotate(45deg);transform:translate(0,-90%) rotate(45deg);width:.1rem}.icon-photo{border:.1rem solid currentColor;border-radius:.1rem}.icon-photo::before{border:.1rem solid currentColor;border-radius:50%;content:"";height:.25em;left:35%;top:35%;width:.25em}.icon-photo::after{border:.1rem solid currentColor;border-bottom:0;border-left:0;content:"";height:.5em;left:60%;-ms-transform:translate(-50%,25%) rotate(-45deg);transform:translate(-50%,25%) rotate(-45deg);width:.5em}.icon-link::after,.icon-link::before{border:.1rem solid currentColor;border-radius:5em 0 0 5em;border-right:0;content:"";height:.5em;width:.75em}.icon-link::before{-ms-transform:translate(-70%,-45%) rotate(-45deg);transform:translate(-70%,-45%) rotate(-45deg)}.icon-link::after{-ms-transform:translate(-30%,-55%) rotate(135deg);transform:translate(-30%,-55%) rotate(135deg)}.icon-location::before{border:.1rem solid currentColor;border-radius:50% 50% 50% 0;content:"";height:.8em;-ms-transform:translate(-50%,-60%) rotate(-45deg);transform:translate(-50%,-60%) rotate(-45deg);width:.8em}.icon-location::after{border:.1rem solid currentColor;border-radius:50%;content:"";height:.2em;-ms-transform:translate(-50%,-80%);transform:translate(-50%,-80%);width:.2em}.icon-emoji{border:.1rem solid currentColor;border-radius:50%}.icon-emoji::before{border-radius:50%;box-shadow:-.17em -.15em,.17em -.15em;content:"";height:.1em;width:.1em}.icon-emoji::after{border:.1rem solid currentColor;border-bottom-color:transparent;border-radius:50%;border-right-color:transparent;content:"";height:.5em;-ms-transform:translate(-50%,-40%) rotate(-135deg);transform:translate(-50%,-40%) rotate(-135deg);width:.5em}.accordion .icon,.btn .icon,.menu .icon,.toast .icon{vertical-align:-10%}
\ No newline at end of file
+/*! Spectre.css Icons | MIT License | github.com/picturepan2/spectre */.icon{box-sizing:border-box;display:inline-block;font-size:inherit;font-style:normal;height:1em;position:relative;text-indent:-9999px;vertical-align:middle;width:1em}.icon::after,.icon::before{display:block;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.icon-arrow-down::before,.icon-arrow-left::before,.icon-arrow-right::before,.icon-arrow-up::before,.icon-back::before,.icon-downward::before,.icon-forward::before,.icon-upward::before{border:.1rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.65em;width:.65em}.icon-arrow-down::before{transform:translate(-50%,-75%) rotate(225deg)}.icon-arrow-left::before{transform:translate(-25%,-50%) rotate(-45deg)}.icon-arrow-right::before{transform:translate(-75%,-50%) rotate(135deg)}.icon-arrow-up::before{transform:translate(-50%,-25%) rotate(45deg)}.icon-back::after,.icon-forward::after{background:currentColor;content:"";height:.1rem;width:.8em}.icon-downward::after,.icon-upward::after{background:currentColor;content:"";height:.8em;width:.1rem}.icon-back::after{left:55%}.icon-back::before{transform:translate(-50%,-50%) rotate(-45deg)}.icon-downward::after{top:45%}.icon-downward::before{transform:translate(-50%,-50%) rotate(-135deg)}.icon-forward::after{left:45%}.icon-forward::before{transform:translate(-50%,-50%) rotate(135deg)}.icon-upward::after{top:55%}.icon-upward::before{transform:translate(-50%,-50%) rotate(45deg)}.icon-caret::before{border-left:.3em solid transparent;border-right:.3em solid transparent;border-top:.3em solid currentColor;content:"";height:0;transform:translate(-50%,-25%);width:0}.icon-menu::before{background:currentColor;box-shadow:0 -.35em,0 .35em;content:"";height:.1rem;width:100%}.icon-apps::before{background:currentColor;box-shadow:-.35em -.35em,-.35em 0,-.35em .35em,0 -.35em,0 .35em,.35em -.35em,.35em 0,.35em .35em;content:"";height:3px;width:3px}.icon-resize-horiz::after,.icon-resize-horiz::before,.icon-resize-vert::after,.icon-resize-vert::before{border:.1rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.45em;width:.45em}.icon-resize-horiz::before,.icon-resize-vert::before{transform:translate(-50%,-90%) rotate(45deg)}.icon-resize-horiz::after,.icon-resize-vert::after{transform:translate(-50%,-10%) rotate(225deg)}.icon-resize-horiz::before{transform:translate(-90%,-50%) rotate(-45deg)}.icon-resize-horiz::after{transform:translate(-10%,-50%) rotate(135deg)}.icon-more-horiz::before,.icon-more-vert::before{background:currentColor;border-radius:50%;box-shadow:-.4em 0,.4em 0;content:"";height:3px;width:3px}.icon-more-vert::before{box-shadow:0 -.4em,0 .4em}.icon-cross::before,.icon-minus::before,.icon-plus::before{background:currentColor;content:"";height:.1rem;width:100%}.icon-cross::after,.icon-plus::after{background:currentColor;content:"";height:100%;width:.1rem}.icon-cross::before{width:100%}.icon-cross::after{height:100%}.icon-cross::after,.icon-cross::before{transform:translate(-50%,-50%) rotate(45deg)}.icon-check::before{border:.1rem solid currentColor;border-right:0;border-top:0;content:"";height:.5em;transform:translate(-50%,-75%) rotate(-45deg);width:.9em}.icon-stop{border:.1rem solid currentColor;border-radius:50%}.icon-stop::before{background:currentColor;content:"";height:.1rem;transform:translate(-50%,-50%) rotate(45deg);width:1em}.icon-shutdown{border:.1rem solid currentColor;border-radius:50%;border-top-color:transparent}.icon-shutdown::before{background:currentColor;content:"";height:.5em;top:.1em;width:.1rem}.icon-refresh::before{border:.1rem solid currentColor;border-radius:50%;border-right-color:transparent;content:"";height:1em;width:1em}.icon-refresh::after{border:.2em solid currentColor;border-left-color:transparent;border-top-color:transparent;content:"";height:0;left:80%;top:20%;width:0}.icon-search::before{border:.1rem solid currentColor;border-radius:50%;content:"";height:.75em;left:5%;top:5%;transform:translate(0,0) rotate(45deg);width:.75em}.icon-search::after{background:currentColor;content:"";height:.1rem;left:80%;top:80%;transform:translate(-50%,-50%) rotate(45deg);width:.4em}.icon-edit::before{border:.1rem solid currentColor;content:"";height:.4em;transform:translate(-40%,-60%) rotate(-45deg);width:.85em}.icon-edit::after{border:.15em solid currentColor;border-right-color:transparent;border-top-color:transparent;content:"";height:0;left:5%;top:95%;transform:translate(0,-100%);width:0}.icon-delete::before{border:.1rem solid currentColor;border-bottom-left-radius:.1rem;border-bottom-right-radius:.1rem;border-top:0;content:"";height:.75em;top:60%;width:.75em}.icon-delete::after{background:currentColor;box-shadow:-.25em .2em,.25em .2em;content:"";height:.1rem;top:.05rem;width:.5em}.icon-share{border:.1rem solid currentColor;border-radius:.1rem;border-right:0;border-top:0}.icon-share::before{border:.1rem solid currentColor;border-left:0;border-top:0;content:"";height:.4em;left:100%;top:.25em;transform:translate(-125%,-50%) rotate(-45deg);width:.4em}.icon-share::after{border:.1rem solid currentColor;border-bottom:0;border-radius:75% 0;border-right:0;content:"";height:.5em;width:.6em}.icon-flag::before{background:currentColor;content:"";height:1em;left:15%;width:.1rem}.icon-flag::after{border:.1rem solid currentColor;border-bottom-right-radius:.1rem;border-left:0;border-top-right-radius:.1rem;content:"";height:.65em;left:60%;top:35%;width:.8em}.icon-bookmark::before{border:.1rem solid currentColor;border-bottom:0;border-top-left-radius:.1rem;border-top-right-radius:.1rem;content:"";height:.9em;width:.8em}.icon-bookmark::after{border:.1rem solid currentColor;border-bottom:0;border-left:0;border-radius:.1rem;content:"";height:.5em;transform:translate(-50%,35%) rotate(-45deg) skew(15deg,15deg);width:.5em}.icon-download,.icon-upload{border-bottom:.1rem solid currentColor}.icon-download::before,.icon-upload::before{border:.1rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.5em;transform:translate(-50%,-60%) rotate(-135deg);width:.5em}.icon-download::after,.icon-upload::after{background:currentColor;content:"";height:.6em;top:40%;width:.1rem}.icon-upload::before{transform:translate(-50%,-60%) rotate(45deg)}.icon-upload::after{top:50%}.icon-time{border:.1rem solid currentColor;border-radius:50%}.icon-time::before{background:currentColor;content:"";height:.4em;transform:translate(-50%,-75%);width:.1rem}.icon-time::after{background:currentColor;content:"";height:.3em;transform:translate(-50%,-75%) rotate(90deg);transform-origin:50% 90%;width:.1rem}.icon-mail::before{border:.1rem solid currentColor;border-radius:.1rem;content:"";height:.8em;width:1em}.icon-mail::after{border:.1rem solid currentColor;border-right:0;border-top:0;content:"";height:.5em;transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);width:.5em}.icon-people::before{border:.1rem solid currentColor;border-radius:50%;content:"";height:.45em;top:25%;width:.45em}.icon-people::after{border:.1rem solid currentColor;border-radius:50% 50% 0 0;content:"";height:.4em;top:75%;width:.9em}.icon-message{border:.1rem solid currentColor;border-bottom:0;border-radius:.1rem;border-right:0}.icon-message::before{border:.1rem solid currentColor;border-bottom-right-radius:.1rem;border-left:0;border-top:0;content:"";height:.8em;left:65%;top:40%;width:.7em}.icon-message::after{background:currentColor;border-radius:.1rem;content:"";height:.3em;left:10%;top:100%;transform:translate(0,-90%) rotate(45deg);width:.1rem}.icon-photo{border:.1rem solid currentColor;border-radius:.1rem}.icon-photo::before{border:.1rem solid currentColor;border-radius:50%;content:"";height:.25em;left:35%;top:35%;width:.25em}.icon-photo::after{border:.1rem solid currentColor;border-bottom:0;border-left:0;content:"";height:.5em;left:60%;transform:translate(-50%,25%) rotate(-45deg);width:.5em}.icon-link::after,.icon-link::before{border:.1rem solid currentColor;border-radius:5em 0 0 5em;border-right:0;content:"";height:.5em;width:.75em}.icon-link::before{transform:translate(-70%,-45%) rotate(-45deg)}.icon-link::after{transform:translate(-30%,-55%) rotate(135deg)}.icon-location::before{border:.1rem solid currentColor;border-radius:50% 50% 50% 0;content:"";height:.8em;transform:translate(-50%,-60%) rotate(-45deg);width:.8em}.icon-location::after{border:.1rem solid currentColor;border-radius:50%;content:"";height:.2em;transform:translate(-50%,-80%);width:.2em}.icon-emoji{border:.1rem solid currentColor;border-radius:50%}.icon-emoji::before{border-radius:50%;box-shadow:-.17em -.15em,.17em -.15em;content:"";height:.1em;width:.1em}.icon-emoji::after{border:.1rem solid currentColor;border-bottom-color:transparent;border-radius:50%;border-right-color:transparent;content:"";height:.5em;transform:translate(-50%,-40%) rotate(-135deg);width:.5em}.accordion .icon,.btn .icon,.menu .icon,.toast .icon{vertical-align:-10%}
\ No newline at end of file
diff --git a/docs/dist/spectre.css b/docs/dist/spectre.css
index 8fe2f97..3beb070 100644
--- a/docs/dist/spectre.css
+++ b/docs/dist/spectre.css
@@ -1,33 +1,21 @@
 /*! Spectre.css | MIT License | github.com/picturepan2/spectre */
 /* Manually forked from Normalize.css */
 /* normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
-/**
- * 1. Change the default font family in all browsers (opinionated).
- * 2. Correct the line height in all browsers.
- * 3. Prevent adjustments of font size after orientation changes in
- *    IE on Windows Phone and in iOS.
- */
-/* Document
-   ========================================================================== */
+/** 1. Change the default font family in all browsers (opinionated). 2. Correct the line height in all browsers. 3. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS. */
+/* Document ========================================================================== */
 html {
-  font-family: sans-serif;
-  /* 3 */
-  -webkit-text-size-adjust: 100%;
-  /* 1 */
-  -ms-text-size-adjust: 100%;
-  /* 3 */
+  font-family: sans-serif; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 3 */ 
+  -ms-text-size-adjust: 100%; /* 3 */
 }
-/* Sections
-   ========================================================================== */
-/**
- * Remove the margin in all browsers (opinionated).
- */
+
+/* Sections ========================================================================== */
+/** Remove the margin in all browsers (opinionated). */
 body {
   margin: 0;
 }
-/**
- * Add the correct display in IE 9-.
- */
+
+/** Add the correct display in IE 9-. */
 article,
 aside,
 footer,
@@ -36,117 +24,78 @@ nav,
 section {
   display: block;
 }
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
+
+/** Correct the font size and margin on `h1` elements within `section` and `article` contexts in Chrome, Firefox, and Safari. */
 h1 {
   font-size: 2em;
   margin: .67em 0;
 }
-/* Grouping content
-   ========================================================================== */
-/**
- * Add the correct display in IE 9-.
- * 1. Add the correct display in IE.
- */
+
+/* Grouping content ========================================================================== */
+/** Add the correct display in IE 9-. 1. Add the correct display in IE. */
 figcaption,
 figure,
 main {
-  /* 1 */
-  display: block;
+  /* 1 */ display: block;
 }
-/**
- * Add the correct margin in IE 8 (removed).
- */
-/**
- * 1. Add the correct box sizing in Firefox.
- * 2. Show the overflow in Edge and IE.
- */
+
+/** Add the correct margin in IE 8 (removed). */
+/** 1. Add the correct box sizing in Firefox. 2. Show the overflow in Edge and IE. */
 hr {
-  box-sizing: content-box;
-  /* 1 */
-  height: 0;
-  /* 1 */
-  overflow: visible;
-  /* 2 */
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
 }
-/**
- * 1. Correct the inheritance and scaling of font size in all browsers. (removed)
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-/* Text-level semantics
-   ========================================================================== */
-/**
- * 1. Remove the gray background on active links in IE 10.
- * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
- */
+
+/** 1. Correct the inheritance and scaling of font size in all browsers. (removed) 2. Correct the odd `em` font sizing in all browsers. */
+/* Text-level semantics ========================================================================== */
+/** 1. Remove the gray background on active links in IE 10. 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */
 a {
-  background-color: transparent;
-  /* 1 */
-  -webkit-text-decoration-skip: objects;
-  /* 2 */
+  background-color: transparent; /* 1 */
+  -webkit-text-decoration-skip: objects; /* 2 */
 }
-/**
- * Remove the outline on focused links when they are also active or hovered
- * in all browsers (opinionated).
- */
+
+/** Remove the outline on focused links when they are also active or hovered in all browsers (opinionated). */
 a:active,
 a:hover {
   outline-width: 0;
 }
-/**
- * 1. Remove the bottom border in Firefox 39-.
- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. (removed)
- */
-/**
- * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
- */
+
+/** 1. Remove the bottom border in Firefox 39-. 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. (removed) */
+/** Prevent the duplicate application of `bolder` by the next rule in Safari 6. */
 b,
 strong {
   font-weight: inherit;
 }
-/**
- * Add the correct font weight in Chrome, Edge, and Safari.
- */
+
+/** Add the correct font weight in Chrome, Edge, and Safari. */
 b,
 strong {
   font-weight: bolder;
 }
-/**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
+
+/** 1. Correct the inheritance and scaling of font size in all browsers. 2. Correct the odd `em` font sizing in all browsers. */
 code,
 kbd,
 pre,
 samp {
-  font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace;
-  /* 1 (changed) */
-  font-size: 1em;
-  /* 2 */
+  font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace; /* 1 (changed) */
+  font-size: 1em; /* 2 */
 }
-/**
- * Add the correct font style in Android 4.3-.
- */
+
+/** Add the correct font style in Android 4.3-. */
 dfn {
   font-style: italic;
 }
-/**
- * Add the correct background and color in IE 9-. (Removed)
- */
-/**
- * Add the correct font size in all browsers.
- */
+
+/** Add the correct background and color in IE 9-. (Removed) */
+/** Add the correct font size in all browsers. */
 small {
   font-size: 80%;
-  font-weight: 400;
-  /* (added) */
+  font-weight: 400; /* (added) */
 }
-/**
- * Prevent `sub` and `sup` elements from affecting the line height in
- * all browsers.
- */
+
+/** Prevent `sub` and `sup` elements from affecting the line height in all browsers. */
 sub,
 sup {
   font-size: 75%;
@@ -154,93 +103,72 @@ sup {
   position: relative;
   vertical-align: baseline;
 }
+
 sub {
   bottom: -.25em;
 }
+
 sup {
   top: -.5em;
 }
-/* Embedded content
-   ========================================================================== */
-/**
- * Add the correct display in IE 9-.
- */
+
+/* Embedded content ========================================================================== */
+/** Add the correct display in IE 9-. */
 audio,
 video {
   display: inline-block;
 }
-/**
- * Add the correct display in iOS 4-7.
- */
+
+/** Add the correct display in iOS 4-7. */
 audio:not([controls]) {
   display: none;
   height: 0;
 }
-/**
- * Remove the border on images inside links in IE 10-.
- */
+
+/** Remove the border on images inside links in IE 10-. */
 img {
   border-style: none;
 }
-/**
- * Hide the overflow in IE.
- */
+
+/** Hide the overflow in IE. */
 svg:not(:root) {
   overflow: hidden;
 }
-/* Forms
-   ========================================================================== */
-/**
- * 1. Change the font styles in all browsers (opinionated).
- * 2. Remove the margin in Firefox and Safari.
- */
+
+/* Forms ========================================================================== */
+/** 1. Change the font styles in all browsers (opinionated). 2. Remove the margin in Firefox and Safari. */
 button,
 input,
 optgroup,
 select,
 textarea {
-  font-family: inherit;
-  /* 1 (changed) */
-  font-size: inherit;
-  /* 1 (changed) */
-  line-height: inherit;
-  /* 1 (changed) */
-  margin: 0;
-  /* 2 */
+  font-family: inherit; /* 1 (changed) */
+  font-size: inherit; /* 1 (changed) */
+  line-height: inherit; /* 1 (changed) */
+  margin: 0; /* 2 */
 }
-/**
- * Show the overflow in IE.
- * 1. Show the overflow in Edge.
- */
+
+/** Show the overflow in IE. 1. Show the overflow in Edge. */
 button,
 input {
-  /* 1 */
-  overflow: visible;
+  /* 1 */ overflow: visible;
 }
-/**
- * Remove the inheritance of text transform in Edge, Firefox, and IE.
- * 1. Remove the inheritance of text transform in Firefox.
- */
+
+/** Remove the inheritance of text transform in Edge, Firefox, and IE. 1. Remove the inheritance of text transform in Firefox. */
 button,
 select {
-  /* 1 */
-  text-transform: none;
+  /* 1 */ text-transform: none;
 }
-/**
- * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
- *    controls in Android 4.
- * 2. Correct the inability to style clickable types in iOS and Safari.
- */
+
+/** 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` controls in Android 4. 2. Correct the inability to style clickable types in iOS and Safari. */
 button,
 html [type="button"],
 [type="reset"],
 [type="submit"] {
-  -webkit-appearance: button;
-  /* 2 */
+  -webkit-appearance: button; /* 2 */
 }
-/**
- * Remove the inner border and padding in Firefox.
- */
+
+/** Remove the inner border and padding in Firefox. */
 button::-moz-focus-inner,
 [type="button"]::-moz-focus-inner,
 [type="reset"]::-moz-focus-inner,
@@ -248,147 +176,109 @@ button::-moz-focus-inner,
   border-style: none;
   padding: 0;
 }
-/**
- * Restore the focus styles unset by the previous rule (removed).
- */
-/**
- * Change the border, margin, and padding in all browsers (opinionated) (changed).
- */
+
+/** Restore the focus styles unset by the previous rule (removed). */
+/** Change the border, margin, and padding in all browsers (opinionated) (changed). */
 fieldset {
   border: 0;
   margin: 0;
   padding: 0;
 }
-/**
- * 1. Correct the text wrapping in Edge and IE.
- * 2. Correct the color inheritance from `fieldset` elements in IE.
- * 3. Remove the padding so developers are not caught out when they zero out
- *    `fieldset` elements in all browsers.
- */
+
+/** 1. Correct the text wrapping in Edge and IE. 2. Correct the color inheritance from `fieldset` elements in IE. 3. Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers. */
 legend {
-  box-sizing: border-box;
-  /* 1 */
-  color: inherit;
-  /* 2 */
-  display: table;
-  /* 1 */
-  max-width: 100%;
-  /* 1 */
-  padding: 0;
-  /* 3 */
-  white-space: normal;
-  /* 1 */
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
 }
-/**
- * 1. Add the correct display in IE 9-.
- * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
- */
+
+/** 1. Add the correct display in IE 9-. 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. */
 progress {
-  display: inline-block;
-  /* 1 */
-  vertical-align: baseline;
-  /* 2 */
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
 }
-/**
- * Remove the default vertical scrollbar in IE.
- */
+
+/** Remove the default vertical scrollbar in IE. */
 textarea {
   overflow: auto;
 }
-/**
- * 1. Add the correct box sizing in IE 10-.
- * 2. Remove the padding in IE 10-.
- */
+
+/** 1. Add the correct box sizing in IE 10-. 2. Remove the padding in IE 10-. */
 [type="checkbox"],
 [type="radio"] {
-  box-sizing: border-box;
-  /* 1 */
-  padding: 0;
-  /* 2 */
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
 }
-/**
- * Correct the cursor style of increment and decrement buttons in Chrome.
- */
+
+/** Correct the cursor style of increment and decrement buttons in Chrome. */
 [type="number"]::-webkit-inner-spin-button,
 [type="number"]::-webkit-outer-spin-button {
   height: auto;
 }
-/**
- * 1. Correct the odd appearance in Chrome and Safari.
- * 2. Correct the outline style in Safari.
- */
+
+/** 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari. */
 [type="search"] {
-  -webkit-appearance: textfield;
-  /* 1 */
-  outline-offset: -2px;
-  /* 2 */
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
 }
-/**
- * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
- */
+
+/** Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */
 [type="search"]::-webkit-search-cancel-button,
 [type="search"]::-webkit-search-decoration {
   -webkit-appearance: none;
 }
-/**
- * 1. Correct the inability to style clickable types in iOS and Safari.
- * 2. Change font properties to `inherit` in Safari.
- */
+
+/** 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to `inherit` in Safari. */
 ::-webkit-file-upload-button {
-  -webkit-appearance: button;
-  /* 1 */
-  font: inherit;
-  /* 2 */
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
 }
-/* Interactive
-   ========================================================================== */
-/*
- * Add the correct display in IE 9-.
- * 1. Add the correct display in Edge, IE, and Firefox.
- */
+
+/* Interactive ========================================================================== */
+/* Add the correct display in IE 9-. 1. Add the correct display in Edge, IE, and Firefox. */
 details,
 menu {
   display: block;
 }
-/*
- * Add the correct display in all browsers.
- */
+
+/* Add the correct display in all browsers. */
 summary {
   display: list-item;
 }
-/* Scripting
-   ========================================================================== */
-/**
- * Add the correct display in IE 9-.
- */
+
+/* Scripting ========================================================================== */
+/** Add the correct display in IE 9-. */
 canvas {
   display: inline-block;
 }
-/**
- * Add the correct display in IE.
- */
+
+/** Add the correct display in IE. */
 template {
   display: none;
 }
-/* Hidden
-   ========================================================================== */
-/**
- * Add the correct display in IE 10-.
- */
+
+/* Hidden ========================================================================== */
+/** Add the correct display in IE 10-. */
 [hidden] {
   display: none;
 }
+
 *,
 *::before,
 *::after {
   box-sizing: inherit;
 }
+
 html {
   box-sizing: border-box;
   font-size: 20px;
-  line-height: 1.42857143;
+  line-height: 1.428571429;
   -webkit-tap-highlight-color: transparent;
 }
+
 body {
   background: #fff;
   color: #50596c;
@@ -397,14 +287,17 @@ body {
   overflow-x: hidden;
   text-rendering: optimizeLegibility;
 }
+
 a {
   color: #5764c6;
   outline: none;
   text-decoration: none;
 }
+
 a:focus {
   box-shadow: 0 0 0 .1rem rgba(87, 100, 198, .2);
 }
+
 a:focus,
 a:hover,
 a:active,
@@ -412,6 +305,7 @@ a.active {
   color: #4452c0;
   text-decoration: underline;
 }
+
 h1,
 h2,
 h3,
@@ -424,6 +318,7 @@ h6 {
   margin-bottom: .25em;
   margin-top: 0;
 }
+
 .h1,
 .h2,
 .h3,
@@ -432,168 +327,202 @@ h6 {
 .h6 {
   font-weight: 500;
 }
+
 h1,
 .h1 {
   font-size: 2rem;
 }
+
 h2,
 .h2 {
   font-size: 1.6rem;
 }
+
 h3,
 .h3 {
   font-size: 1.4rem;
 }
+
 h4,
 .h4 {
   font-size: 1.2rem;
 }
+
 h5,
 .h5 {
   font-size: 1rem;
 }
+
 h6,
 .h6 {
   font-size: .8rem;
 }
+
 p {
   line-height: 1.2rem;
   margin: 0 0 .8rem;
 }
+
 a,
 ins,
 u {
   -webkit-text-decoration-skip: ink edges;
   text-decoration-skip: ink edges;
 }
+
 abbr[title] {
   border-bottom: .05rem dotted;
   cursor: help;
   text-decoration: none;
 }
+
 kbd {
   background: #454d5d;
   border-radius: .1rem;
   color: #fff;
+  font-size: .65rem; 
   line-height: 1;
-  padding: .15rem .2rem;
+  padding: .15rem;
 }
+
 mark {
   background: #ffe9b3;
   border-radius: .1rem;
   color: #50596c;
-  line-height: 1;
-  padding: .15rem .2rem;
+  padding: .05rem;
 }
+
 blockquote {
   border-left: .1rem solid #e7e9ed;
   margin-left: 0;
   padding: .4rem .8rem;
 }
+
 blockquote p:last-child {
   margin-bottom: 0;
 }
+
 ul,
 ol {
   margin: .8rem 0 .8rem .8rem;
   padding: 0;
 }
+
 ul ul,
-ol ul,
 ul ol,
+ol ul,
 ol ol {
   margin: .8rem 0 .8rem .8rem;
 }
+
 ul li,
 ol li {
   margin-top: .4rem;
 }
+
 ul {
   list-style: disc inside;
 }
+
 ul ul {
   list-style-type: circle;
 }
+
 ol {
   list-style: decimal inside;
 }
+
 ol ol {
   list-style-type: lower-alpha;
 }
+
 dl dt {
   font-weight: bold;
 }
+
 dl dd {
   margin: .4rem 0 .8rem 0;
 }
+
 :lang(zh) {
   font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;
 }
+
 :lang(ja) {
   font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, "Helvetica Neue", sans-serif;
 }
+
 :lang(ko) {
   font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Malgun Gothic", "Helvetica Neue", sans-serif;
 }
+
 :lang(zh) ins,
-:lang(ja) ins,
-.cjk ins,
 :lang(zh) u,
+:lang(ja) ins,
 :lang(ja) u,
+.cjk ins,
 .cjk u {
   border-bottom: .05rem solid;
   text-decoration: none;
 }
+
 :lang(zh) del + del,
-:lang(ja) del + del,
-.cjk del + del,
 :lang(zh) del + s,
-:lang(ja) del + s,
-.cjk del + s,
 :lang(zh) ins + ins,
-:lang(ja) ins + ins,
-.cjk ins + ins,
 :lang(zh) ins + u,
-:lang(ja) ins + u,
-.cjk ins + u,
 :lang(zh) s + del,
-:lang(ja) s + del,
-.cjk s + del,
 :lang(zh) s + s,
-:lang(ja) s + s,
-.cjk s + s,
 :lang(zh) u + ins,
-:lang(ja) u + ins,
-.cjk u + ins,
 :lang(zh) u + u,
+:lang(ja) del + del,
+:lang(ja) del + s,
+:lang(ja) ins + ins,
+:lang(ja) ins + u,
+:lang(ja) s + del,
+:lang(ja) s + s,
+:lang(ja) u + ins,
 :lang(ja) u + u,
+.cjk del + del,
+.cjk del + s,
+.cjk ins + ins,
+.cjk ins + u,
+.cjk s + del,
+.cjk s + s,
+.cjk u + ins,
 .cjk u + u {
   margin-left: .125em;
 }
+
 .table {
   border-collapse: collapse;
   border-spacing: 0;
   text-align: left;
   width: 100%;
 }
+
 .table.table-striped tbody tr:nth-of-type(odd) {
   background: #f8f9fa;
 }
+
 .table.table-hover tbody tr:hover {
   background: #f0f1f4;
 }
+
 .table tbody tr.active,
 .table.table-striped tbody tr.active {
   background: #f0f1f4;
 }
+
 .table td,
 .table th {
   border-bottom: .05rem solid #e7e9ed;
   padding: .6rem .4rem;
 }
+
 .table th {
   border-bottom-width: .1rem;
 }
+
 .btn {
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -619,15 +548,18 @@ dl dd {
   vertical-align: middle;
   white-space: nowrap;
 }
+
 .btn:focus {
   box-shadow: 0 0 0 .1rem rgba(87, 100, 198, .2);
 }
+
 .btn:focus,
 .btn:hover {
   background: #eff1fa;
   border-color: #4c59c2;
   text-decoration: none;
 }
+
 .btn:active,
 .btn.active {
   background: #4c59c2;
@@ -635,11 +567,13 @@ dl dd {
   color: #fff;
   text-decoration: none;
 }
+
 .btn:active.loading::after,
 .btn.active.loading::after {
   border-bottom-color: #fff;
   border-left-color: #fff;
 }
+
 .btn[disabled],
 .btn:disabled,
 .btn.disabled {
@@ -647,63 +581,76 @@ dl dd {
   opacity: .5;
   pointer-events: none;
 }
+
 .btn.btn-primary {
   background: #5764c6;
   border-color: #4c59c2;
   color: #fff;
 }
+
 .btn.btn-primary:focus,
 .btn.btn-primary:hover {
   background: #4452c0;
   border-color: #3e4cb6;
   color: #fff;
 }
+
 .btn.btn-primary:active,
 .btn.btn-primary.active {
   background: #3f4eba;
   border-color: #3b49af;
   color: #fff;
 }
+
 .btn.btn-primary.loading::after {
   border-bottom-color: #fff;
   border-left-color: #fff;
 }
+
 .btn.btn-link {
   background: transparent;
   border-color: transparent;
   color: #5764c6;
 }
+
 .btn.btn-link:focus,
 .btn.btn-link:hover,
 .btn.btn-link:active,
 .btn.btn-link.active {
   color: #4452c0;
 }
+
 .btn.btn-sm {
   font-size: .6rem;
   height: 1.2rem;
   padding: .05rem .3rem;
 }
+
 .btn.btn-lg {
   font-size: .8rem;
   height: 2rem;
   padding: .45rem .6rem;
 }
+
 .btn.btn-block {
   display: block;
   width: 100%;
 }
+
 .btn.btn-action {
   padding-left: 0;
-  padding-right: 0;
+  padding-right: 0; 
   width: 1.6rem;
 }
+
 .btn.btn-action.btn-sm {
   width: 1.2rem;
 }
+
 .btn.btn-action.btn-lg {
   width: 2rem;
 }
+
 .btn.btn-clear {
   background: transparent;
   border: 0;
@@ -717,70 +664,87 @@ dl dd {
   text-decoration: none;
   width: .8rem;
 }
+
 .btn.btn-clear:hover {
   opacity: .85;
 }
+
 .btn.btn-clear::before {
   content: "\2715";
 }
+
 .btn-group {
   display: inline-flex;
   display: -ms-inline-flexbox;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
 }
+
 .btn-group .btn {
   -ms-flex: 1 0 auto;
   flex: 1 0 auto;
 }
+
 .btn-group .btn:first-child:not(:last-child) {
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
 }
+
 .btn-group .btn:not(:first-child):not(:last-child) {
   border-radius: 0;
   margin-left: -.05rem;
 }
+
 .btn-group .btn:last-child:not(:first-child) {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
   margin-left: -.05rem;
 }
+
 .btn-group .btn:focus,
 .btn-group .btn:hover,
 .btn-group .btn:active,
 .btn-group .btn.active {
   z-index: 1;
 }
+
 .btn-group.btn-group-block {
-  display: flex;
+  display: flex; 
   display: -ms-flexbox;
 }
+
 .btn-group.btn-group-block .btn {
   -ms-flex: 1 0 0;
   flex: 1 0 0;
 }
+
 .form-group:not(:last-child) {
   margin-bottom: .4rem;
 }
+
 fieldset {
   margin-bottom: .8rem;
 }
+
 legend {
   font-size: .8rem;
   font-weight: 500;
   margin-bottom: .8rem;
 }
+
 .form-label {
   display: block;
   padding: .3rem 0;
 }
+
 .form-label.label-sm {
   padding: .1rem 0;
 }
+
 .form-label.label-lg {
   padding: .5rem 0;
 }
+
 .form-input {
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -801,53 +765,66 @@ legend {
   transition: all .2s ease;
   width: 100%;
 }
+
 .form-input:focus {
-  border-color: #5764c6;
+  border-color: #5764c6; 
   box-shadow: 0 0 0 .1rem rgba(87, 100, 198, .2);
 }
+
 .form-input::-webkit-input-placeholder {
   color: #acb3c2;
 }
+
 .form-input:-ms-input-placeholder {
   color: #acb3c2;
 }
+
 .form-input::placeholder {
   color: #acb3c2;
 }
+
 .form-input.input-sm {
   font-size: .6rem;
   height: 1.2rem;
   padding: .05rem .4rem;
 }
+
 .form-input.input-lg {
   font-size: .8rem;
   height: 2rem;
   padding: .45rem .4rem;
 }
+
 .form-input.input-inline {
   display: inline-block;
   vertical-align: middle;
   width: auto;
 }
-textarea.form-input {
+
+.form-input[type="file"] {
   height: auto;
 }
-.form-input[type="file"] {
+
+textarea.form-input {
   height: auto;
 }
+
 .form-input-hint {
   color: #acb3c2;
   font-size: .6rem;
   margin-top: .2rem;
 }
+
 .has-success .form-input-hint,
 .is-success + .form-input-hint {
   color: #32b643;
 }
+
 .has-error .form-input-hint,
 .is-error + .form-input-hint {
   color: #e85600;
 }
+
 .form-select {
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -863,61 +840,74 @@ textarea.form-input {
   vertical-align: middle;
   width: 100%;
 }
+
 .form-select[size],
 .form-select[multiple] {
   height: auto;
 }
+
 .form-select[size] option,
 .form-select[multiple] option {
   padding: .1rem .2rem;
 }
+
 .form-select:not([multiple]):not([size]) {
-  background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23667189' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .35rem center / .4rem .5rem;
+  background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23667189' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .35rem center/.4rem .5rem;
   padding-right: 1.1rem;
 }
+
 .form-select:focus {
-  border-color: #5764c6;
+  border-color: #5764c6; 
   box-shadow: 0 0 0 .1rem rgba(87, 100, 198, .2);
 }
+
 .form-select::-ms-expand {
   display: none;
 }
+
 .form-select.select-sm {
   font-size: .6rem;
   height: 1.2rem;
   padding: .05rem 1.1rem .05rem .4rem;
 }
+
 .form-select.select-lg {
   font-size: .8rem;
   height: 2rem;
   padding: .45rem 1.1rem .45rem .4rem;
 }
+
 .has-icon-left,
 .has-icon-right {
   position: relative;
 }
+
 .has-icon-left .form-icon,
 .has-icon-right .form-icon {
   height: .7rem;
   margin: 0 .25rem;
   position: absolute;
   top: 50%;
-  -ms-transform: translateY(-50%);
   transform: translateY(-50%);
   width: .7rem;
 }
+
 .has-icon-left .form-icon {
   left: .05rem;
 }
+
 .has-icon-left .form-input {
   padding-left: 1.2rem;
 }
+
 .has-icon-right .form-icon {
   right: .05rem;
 }
+
 .has-icon-right .form-input {
   padding-right: 1.2rem;
 }
+
 .form-checkbox,
 .form-radio,
 .form-switch {
@@ -926,6 +916,7 @@ textarea.form-input {
   padding: .1rem 1.1rem;
   position: relative;
 }
+
 .form-checkbox input,
 .form-radio input,
 .form-switch input {
@@ -936,27 +927,31 @@ textarea.form-input {
   position: absolute;
   width: 1px;
 }
+
 .form-checkbox input:focus + .form-icon,
 .form-radio input:focus + .form-icon,
 .form-switch input:focus + .form-icon {
-  border-color: #5764c6;
+  border-color: #5764c6; 
   box-shadow: 0 0 0 .1rem rgba(87, 100, 198, .2);
 }
+
 .form-checkbox input:checked + .form-icon,
 .form-radio input:checked + .form-icon,
 .form-switch input:checked + .form-icon {
   background: #5764c6;
   border-color: #5764c6;
 }
+
 .form-checkbox .form-icon,
 .form-radio .form-icon,
 .form-switch .form-icon {
   border: .05rem solid #caced7;
   cursor: pointer;
   display: inline-block;
-  position: absolute;
+  position: absolute; 
   transition: all .2s ease;
 }
+
 .form-checkbox .form-icon,
 .form-radio .form-icon {
   background: #fff;
@@ -965,13 +960,16 @@ textarea.form-input {
   top: .25rem;
   width: .7rem;
 }
+
 .form-checkbox input:active + .form-icon,
 .form-radio input:active + .form-icon {
   background: #f0f1f4;
 }
+
 .form-checkbox .form-icon {
   border-radius: .1rem;
 }
+
 .form-checkbox input:checked + .form-icon::before {
   background-clip: padding-box;
   border: .1rem solid #fff;
@@ -984,14 +982,15 @@ textarea.form-input {
   margin-top: -6px;
   position: absolute;
   top: 50%;
-  -ms-transform: rotate(45deg);
   transform: rotate(45deg);
   width: 6px;
 }
+
 .form-checkbox input:indeterminate + .form-icon {
   background: #5764c6;
   border-color: #5764c6;
 }
+
 .form-checkbox input:indeterminate + .form-icon::before {
   background: #fff;
   content: "";
@@ -1003,9 +1002,11 @@ textarea.form-input {
   top: 50%;
   width: 10px;
 }
+
 .form-radio .form-icon {
   border-radius: .35rem;
 }
+
 .form-radio input:checked + .form-icon::before {
   background: #fff;
   border-radius: .1rem;
@@ -1018,9 +1019,11 @@ textarea.form-input {
   top: 50%;
   width: 4px;
 }
+
 .form-switch {
   padding-left: 2rem;
 }
+
 .form-switch .form-icon {
   background: #e7e9ed;
   background-clip: padding-box;
@@ -1030,6 +1033,7 @@ textarea.form-input {
   top: .15rem;
   width: 1.6rem;
 }
+
 .form-switch .form-icon::before {
   background: #fff;
   border-radius: .4rem;
@@ -1042,16 +1046,20 @@ textarea.form-input {
   transition: all .2s ease;
   width: .8rem;
 }
+
 .form-switch input:checked + .form-icon::before {
   left: 14px;
 }
+
 .form-switch input:active + .form-icon::before {
   background: #f8f9fa;
 }
+
 .input-group {
-  display: flex;
+  display: flex; 
   display: -ms-flexbox;
 }
+
 .input-group .input-group-addon {
   background: #f8f9fa;
   border: .05rem solid #caced7;
@@ -1059,22 +1067,27 @@ textarea.form-input {
   line-height: 1rem;
   padding: .25rem .4rem;
 }
+
 .input-group .input-group-addon.addon-sm {
   font-size: .6rem;
   padding: .05rem .4rem;
 }
+
 .input-group .input-group-addon.addon-lg {
   font-size: .8rem;
   padding: .45rem .4rem;
 }
+
 .input-group .form-input,
 .input-group .form-select {
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
 }
+
 .input-group .input-group-btn {
   z-index: 1;
 }
+
 .input-group .form-input:first-child:not(:last-child),
 .input-group .form-select:first-child:not(:last-child),
 .input-group .input-group-addon:first-child:not(:last-child),
@@ -1082,6 +1095,7 @@ textarea.form-input {
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
 }
+
 .input-group .form-input:not(:first-child):not(:last-child),
 .input-group .form-select:not(:first-child):not(:last-child),
 .input-group .input-group-addon:not(:first-child):not(:last-child),
@@ -1089,6 +1103,7 @@ textarea.form-input {
   border-radius: 0;
   margin-left: -.05rem;
 }
+
 .input-group .form-input:last-child:not(:first-child),
 .input-group .form-select:last-child:not(:first-child),
 .input-group .input-group-addon:last-child:not(:first-child),
@@ -1097,158 +1112,188 @@ textarea.form-input {
   border-top-left-radius: 0;
   margin-left: -.05rem;
 }
+
 .input-group .form-input:focus,
 .input-group .form-select:focus,
 .input-group .input-group-addon:focus,
 .input-group .input-group-btn:focus {
   z-index: 2;
 }
+
 .input-group .form-select {
   width: auto;
 }
+
 .input-group.input-inline {
-  display: inline-flex;
+  display: inline-flex; 
   display: -ms-inline-flexbox;
 }
+
 .has-success .form-input,
-.has-success .form-select,
 .form-input.is-success,
+.has-success .form-select,
 .form-select.is-success {
   border-color: #32b643;
 }
+
 .has-success .form-input:focus,
-.has-success .form-select:focus,
 .form-input.is-success:focus,
+.has-success .form-select:focus,
 .form-select.is-success:focus {
   box-shadow: 0 0 0 .1rem rgba(50, 182, 67, .2);
 }
+
 .has-error .form-input,
-.has-error .form-select,
 .form-input.is-error,
+.has-error .form-select,
 .form-select.is-error {
   border-color: #e85600;
 }
+
 .has-error .form-input:focus,
-.has-error .form-select:focus,
 .form-input.is-error:focus,
+.has-error .form-select:focus,
 .form-select.is-error:focus {
   box-shadow: 0 0 0 .1rem rgba(232, 86, 0, .2);
 }
+
 .has-error .form-checkbox .form-icon,
-.has-error .form-radio .form-icon,
-.has-error .form-switch .form-icon,
 .form-checkbox.is-error .form-icon,
+.has-error .form-radio .form-icon,
 .form-radio.is-error .form-icon,
+.has-error .form-switch .form-icon,
 .form-switch.is-error .form-icon {
   border-color: #e85600;
 }
+
 .has-error .form-checkbox input:checked + .form-icon,
-.has-error .form-radio input:checked + .form-icon,
-.has-error .form-switch input:checked + .form-icon,
 .form-checkbox.is-error input:checked + .form-icon,
+.has-error .form-radio input:checked + .form-icon,
 .form-radio.is-error input:checked + .form-icon,
+.has-error .form-switch input:checked + .form-icon,
 .form-switch.is-error input:checked + .form-icon {
   background: #e85600;
   border-color: #e85600;
 }
+
 .has-error .form-checkbox input:focus + .form-icon,
-.has-error .form-radio input:focus + .form-icon,
-.has-error .form-switch input:focus + .form-icon,
 .form-checkbox.is-error input:focus + .form-icon,
+.has-error .form-radio input:focus + .form-icon,
 .form-radio.is-error input:focus + .form-icon,
+.has-error .form-switch input:focus + .form-icon,
 .form-switch.is-error input:focus + .form-icon {
-  border-color: #e85600;
+  border-color: #e85600; 
   box-shadow: 0 0 0 .1rem rgba(232, 86, 0, .2);
 }
+
 .form-input:not(:placeholder-shown):invalid {
   border-color: #e85600;
 }
+
 .form-input:not(:placeholder-shown):invalid:focus {
   box-shadow: 0 0 0 .1rem rgba(232, 86, 0, .2);
 }
+
 .form-input:not(:placeholder-shown):invalid + .form-input-hint {
   color: #e85600;
 }
+
 .form-input:disabled,
-.form-select:disabled,
 .form-input.disabled,
+.form-select:disabled,
 .form-select.disabled {
   background-color: #f0f1f4;
   cursor: not-allowed;
   opacity: .5;
 }
+
 .form-input[readonly] {
   background-color: #f8f9fa;
 }
+
 input:disabled + .form-icon,
 input.disabled + .form-icon {
   background: #f0f1f4;
   cursor: not-allowed;
   opacity: .5;
 }
+
 .form-switch input:disabled + .form-icon::before,
 .form-switch input.disabled + .form-icon::before {
   background: #fff;
 }
+
 .form-horizontal {
   padding: .4rem;
 }
+
 .form-horizontal .form-group {
-  display: flex;
+  display: flex; 
   display: -ms-flexbox;
 }
+
 .form-horizontal .form-checkbox,
 .form-horizontal .form-radio,
 .form-horizontal .form-switch {
   margin: .2rem 0;
 }
+
 .label {
   background: #f8f9fa;
   border-radius: .1rem;
   color: #5b657a;
-  display: inline-block;
+  display: inline-block; 
   line-height: 1;
-  padding: .15rem .2rem;
+  padding: .15rem;
 }
+
 .label.label-rounded {
   border-radius: 5rem;
   padding-left: .4rem;
   padding-right: .4rem;
 }
+
 .label.label-primary {
   background: #5764c6;
   color: #fff;
 }
+
 .label.label-secondary {
   background: #eff1fa;
   color: #5764c6;
 }
+
 .label.label-success {
   background: #32b643;
   color: #fff;
 }
+
 .label.label-warning {
   background: #ffb700;
   color: #fff;
 }
+
 .label.label-error {
   background: #e85600;
   color: #fff;
 }
+
 code {
   background: #fdf4f4;
   border-radius: .1rem;
   color: #e06870;
-  font-size: .65rem;
+  font-size: .65rem; 
   line-height: 1;
-  padding: .15rem .2rem;
+  padding: .15rem;
 }
+
 .code {
   border-radius: .1rem;
   color: #50596c;
   line-height: 1rem;
   position: relative;
 }
+
 .code::before {
   color: #acb3c2;
   content: attr(data-lang);
@@ -1257,6 +1302,7 @@ code {
   right: .4rem;
   top: .1rem;
 }
+
 .code code {
   background: #f8f9fa;
   color: inherit;
@@ -1266,17 +1312,21 @@ code {
   padding: 1rem;
   width: 100%;
 }
+
 .img-responsive {
   display: block;
   height: auto;
   max-width: 100%;
 }
+
 .img-fit-cover {
   object-fit: cover;
 }
+
 .img-fit-contain {
   object-fit: contain;
 }
+
 .video-responsive {
   display: block;
   overflow: hidden;
@@ -1284,11 +1334,13 @@ code {
   position: relative;
   width: 100%;
 }
+
 .video-responsive::before {
   content: "";
   display: block;
   padding-bottom: 56.25%;
 }
+
 .video-responsive iframe,
 .video-responsive object,
 .video-responsive embed {
@@ -1301,24 +1353,30 @@ code {
   top: 0;
   width: 100%;
 }
+
 .video-responsive video {
   height: auto;
   max-width: 100%;
   width: 100%;
 }
+
 .video-responsive-4-3::before {
   padding-bottom: 75%;
 }
+
 .video-responsive-1-1::before {
   padding-bottom: 100%;
 }
+
 .figure {
   margin: 0 0 .4rem 0;
 }
+
 .figure .figure-caption {
   color: #727e96;
   margin-top: .4rem;
 }
+
 .container {
   margin-left: auto;
   margin-right: auto;
@@ -1326,21 +1384,27 @@ code {
   padding-right: .4rem;
   width: 100%;
 }
+
 .container.grid-xl {
   max-width: 1296px;
 }
+
 .container.grid-lg {
   max-width: 976px;
 }
+
 .container.grid-md {
   max-width: 856px;
 }
+
 .container.grid-sm {
   max-width: 616px;
 }
+
 .container.grid-xs {
   max-width: 496px;
 }
+
 .show-xs,
 .show-sm,
 .show-md,
@@ -1348,6 +1412,7 @@ code {
 .show-xl {
   display: none !important;
 }
+
 .columns {
   display: flex;
   display: -ms-flexbox;
@@ -1356,19 +1421,23 @@ code {
   margin-left: -.4rem;
   margin-right: -.4rem;
 }
+
 .columns.col-gapless {
   margin-left: 0;
   margin-right: 0;
 }
+
 .columns.col-gapless > .column {
   padding-left: 0;
   padding-right: 0;
 }
+
 .columns.col-oneline {
   -ms-flex-wrap: nowrap;
   flex-wrap: nowrap;
   overflow-x: auto;
 }
+
 .column {
   -ms-flex: 1;
   flex: 1;
@@ -1376,6 +1445,7 @@ code {
   padding-left: .4rem;
   padding-right: .4rem;
 }
+
 .column.col-12,
 .column.col-11,
 .column.col-10,
@@ -1391,59 +1461,76 @@ code {
   -ms-flex: none;
   flex: none;
 }
+
 .col-12 {
   width: 100%;
 }
+
 .col-11 {
   width: 91.66666667%;
 }
+
 .col-10 {
   width: 83.33333333%;
 }
+
 .col-9 {
   width: 75%;
 }
+
 .col-8 {
   width: 66.66666667%;
 }
+
 .col-7 {
   width: 58.33333333%;
 }
+
 .col-6 {
   width: 50%;
 }
+
 .col-5 {
   width: 41.66666667%;
 }
+
 .col-4 {
   width: 33.33333333%;
 }
+
 .col-3 {
   width: 25%;
 }
+
 .col-2 {
   width: 16.66666667%;
 }
+
 .col-1 {
   width: 8.33333333%;
 }
+
 .col-auto {
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
   max-width: none;
   width: auto;
 }
+
 .col-mx-auto {
   margin-left: auto;
   margin-right: auto;
 }
+
 .col-ml-auto {
   margin-left: auto;
 }
+
 .col-mr-auto {
   margin-right: auto;
 }
-@media screen and (max-width: 1280px) {
+
+@media (max-width: 1280px) {
   .col-xl-12,
   .col-xl-11,
   .col-xl-10,
@@ -1502,7 +1589,8 @@ code {
     display: block !important;
   }
 }
-@media screen and (max-width: 960px) {
+
+@media (max-width: 960px) {
   .col-lg-12,
   .col-lg-11,
   .col-lg-10,
@@ -1561,7 +1649,8 @@ code {
     display: block !important;
   }
 }
-@media screen and (max-width: 840px) {
+
+@media (max-width: 840px) {
   .col-md-12,
   .col-md-11,
   .col-md-10,
@@ -1620,7 +1709,8 @@ code {
     display: block !important;
   }
 }
-@media screen and (max-width: 600px) {
+
+@media (max-width: 600px) {
   .col-sm-12,
   .col-sm-11,
   .col-sm-10,
@@ -1679,7 +1769,8 @@ code {
     display: block !important;
   }
 }
-@media screen and (max-width: 480px) {
+
+@media (max-width: 480px) {
   .col-xs-12,
   .col-xs-11,
   .col-xs-10,
@@ -1738,6 +1829,7 @@ code {
     display: block !important;
   }
 }
+
 .navbar {
   align-items: stretch;
   display: flex;
@@ -1748,95 +1840,64 @@ code {
   flex-wrap: wrap;
   justify-content: space-between;
 }
+
 .navbar .navbar-section {
   align-items: center;
   display: flex;
   display: -ms-flexbox;
   -ms-flex: 1 0 0;
-  flex: 1 0 0;
+  flex: 1 0 0; 
   -ms-flex-align: center;
 }
+
 .navbar .navbar-section:last-child {
   -ms-flex-pack: end;
   justify-content: flex-end;
 }
+
 .navbar .navbar-center {
   align-items: center;
   display: flex;
   display: -ms-flexbox;
   -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
+  flex: 0 0 auto; 
   -ms-flex-align: center;
 }
+
 .navbar .navbar-brand {
   font-size: .8rem;
   font-weight: 500;
   text-decoration: none;
 }
-.panel {
-  border: .05rem solid #e7e9ed;
-  border-radius: .1rem;
-  display: flex;
-  display: -ms-flexbox;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-.panel .panel-header,
-.panel .panel-footer {
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-  padding: .8rem;
-}
-.panel .panel-nav {
-  -ms-flex: 0 0 auto;
-  flex: 0 0 auto;
-}
-.panel .panel-body {
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
-  overflow-y: auto;
-  padding: 0 .8rem;
-}
-.empty {
-  background: #f8f9fa;
-  border-radius: .1rem;
-  color: #727e96;
-  padding: 1.6rem;
-  text-align: center;
-}
-.empty .empty-icon {
-  margin-bottom: .8rem;
-}
-.empty .empty-title,
-.empty .empty-subtitle {
-  margin: .4rem auto;
-}
-.empty .empty-action {
-  margin-top: .8rem;
-}
+
 .accordion .accordion-item input:checked ~ .accordion-header .icon {
-  -ms-transform: rotate(90deg);
   transform: rotate(90deg);
 }
+
 .accordion .accordion-item input:checked ~ .accordion-body {
-  max-height: 1000px;
+  max-height: 50rem;
 }
+
 .accordion .accordion-item .accordion-header {
   display: block;
   padding: .2rem .4rem;
 }
+
 .accordion .accordion-item .accordion-header .icon {
   transition: all .2s ease;
 }
+
 .accordion .accordion-item .accordion-body {
   margin-bottom: .4rem;
   max-height: 0;
   overflow: hidden;
   transition: max-height .2s ease;
 }
+
 .form-autocomplete {
   position: relative;
 }
+
 .form-autocomplete .form-autocomplete-input {
   align-content: flex-start;
   display: flex;
@@ -1848,10 +1909,12 @@ code {
   min-height: 1.6rem;
   padding: .1rem;
 }
+
 .form-autocomplete .form-autocomplete-input.is-focused {
-  border-color: #5764c6;
+  border-color: #5764c6; 
   box-shadow: 0 0 0 .1rem rgba(87, 100, 198, .2);
 }
+
 .form-autocomplete .form-autocomplete-input .form-input {
   border-color: transparent;
   box-shadow: none;
@@ -1863,16 +1926,14 @@ code {
   margin: .1rem;
   width: auto;
 }
-.form-autocomplete mark {
-  font-size: 1;
-  padding: .1em 0;
-}
+
 .form-autocomplete .menu {
   left: 0;
   position: absolute;
   top: 100%;
   width: 100%;
 }
+
 .avatar {
   background: #5764c6;
   border-radius: 50%;
@@ -1884,29 +1945,34 @@ code {
   line-height: 1;
   margin: 0;
   position: relative;
-  vertical-align: middle;
+  vertical-align: middle; 
   width: 1.6rem;
 }
+
 .avatar.avatar-xs {
   font-size: .4rem;
   height: .8rem;
   width: .8rem;
 }
+
 .avatar.avatar-sm {
   font-size: .6rem;
   height: 1.2rem;
   width: 1.2rem;
 }
+
 .avatar.avatar-lg {
   font-size: 1.2rem;
   height: 2.4rem;
   width: 2.4rem;
 }
+
 .avatar.avatar-xl {
   font-size: 1.6rem;
   height: 3.2rem;
   width: 3.2rem;
 }
+
 .avatar img {
   border-radius: 50%;
   height: 100%;
@@ -1914,6 +1980,7 @@ code {
   width: 100%;
   z-index: 1;
 }
+
 .avatar .avatar-icon,
 .avatar .avatar-presence {
   background: #fff;
@@ -1922,11 +1989,11 @@ code {
   padding: .1rem;
   position: absolute;
   right: 14.64%;
-  -ms-transform: translate(50%, 50%);
   transform: translate(50%, 50%);
   width: 50%;
   z-index: 2;
 }
+
 .avatar .avatar-presence {
   background: #acb3c2;
   border-radius: 50%;
@@ -1934,29 +2001,34 @@ code {
   height: .5em;
   width: .5em;
 }
+
 .avatar .avatar-presence.online {
   background: #32b643;
 }
+
 .avatar .avatar-presence.busy {
   background: #e85600;
 }
+
 .avatar .avatar-presence.away {
   background: #ffb700;
 }
+
 .avatar[data-initial]::before {
   color: currentColor;
   content: attr(data-initial);
   left: 50%;
   position: absolute;
   top: 50%;
-  -ms-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
   z-index: 1;
 }
+
 .badge {
   position: relative;
   white-space: nowrap;
 }
+
 .badge[data-badge]::after,
 .badge:not([data-badge])::after {
   background: #5764c6;
@@ -1966,9 +2038,9 @@ code {
   color: #fff;
   content: attr(data-badge);
   display: inline-block;
-  -ms-transform: translate(-.1rem, -.5rem);
   transform: translate(-.1rem, -.5rem);
 }
+
 .badge[data-badge]::after {
   font-size: .6rem;
   height: 18px;
@@ -1978,6 +2050,7 @@ code {
   text-align: center;
   white-space: nowrap;
 }
+
 .badge:not([data-badge])::after,
 .badge[data-badge=""]::after {
   height: 6px;
@@ -1985,21 +2058,22 @@ code {
   padding: 0;
   width: 6px;
 }
+
 .badge.btn::after {
   position: absolute;
   right: 0;
   top: 0;
-  -ms-transform: translate(50%, -50%);
   transform: translate(50%, -50%);
 }
+
 .badge.avatar::after {
   position: absolute;
   right: 14.64%;
   top: 14.64%;
-  -ms-transform: translate(50%, -50%);
   transform: translate(50%, -50%);
   z-index: 100;
 }
+
 .badge.avatar-xs::after {
   content: "";
   height: .4rem;
@@ -2007,28 +2081,34 @@ code {
   padding: 0;
   width: .4rem;
 }
+
 .breadcrumb {
   list-style: none;
   margin: .2rem 0;
   padding: .2rem 0;
 }
+
 .breadcrumb .breadcrumb-item {
   color: #727e96;
   display: inline-block;
   margin: 0;
   padding: .2rem 0;
 }
+
 .breadcrumb .breadcrumb-item:not(:last-child) {
   margin-right: .2rem;
 }
+
 .breadcrumb .breadcrumb-item:not(:last-child) a {
   color: #727e96;
 }
+
 .breadcrumb .breadcrumb-item:not(:first-child)::before {
   color: #e7e9ed;
   content: "/";
   padding-right: .2rem;
 }
+
 .bar {
   background: #f0f1f4;
   border-radius: .1rem;
@@ -2039,9 +2119,11 @@ code {
   height: .8rem;
   width: 100%;
 }
+
 .bar.bar-sm {
   height: .2rem;
 }
+
 .bar .bar-item {
   background: #5764c6;
   color: #fff;
@@ -2055,30 +2137,36 @@ code {
   text-align: center;
   width: 0;
 }
+
 .bar .bar-item:first-child {
   border-bottom-left-radius: .1rem;
   border-top-left-radius: .1rem;
 }
+
 .bar .bar-item:last-child {
   border-bottom-right-radius: .1rem;
   border-top-right-radius: .1rem;
   -ms-flex-negative: 1;
   flex-shrink: 1;
 }
+
 .bar-slider {
   height: .1rem;
   margin: .4rem 0;
   position: relative;
 }
+
 .bar-slider .bar-item {
   left: 0;
   padding: 0;
   position: absolute;
 }
+
 .bar-slider .bar-item:not(:last-child):first-child {
   background: #f0f1f4;
   z-index: 1;
 }
+
 .bar-slider .bar-slider-btn {
   background: #5764c6;
   border: 0;
@@ -2088,13 +2176,14 @@ code {
   position: absolute;
   right: 0;
   top: 50%;
-  -ms-transform: translate(50%, -50%);
   transform: translate(50%, -50%);
   width: .6rem;
 }
+
 .bar-slider .bar-slider-btn:active {
   box-shadow: 0 0 0 .1rem #5764c6;
 }
+
 .card {
   background: #fff;
   border: .05rem solid #e7e9ed;
@@ -2104,31 +2193,38 @@ code {
   -ms-flex-direction: column;
   flex-direction: column;
 }
+
 .card .card-header,
 .card .card-body,
 .card .card-footer {
   padding: .8rem;
   padding-bottom: 0;
 }
+
 .card .card-header:last-child,
 .card .card-body:last-child,
 .card .card-footer:last-child {
   padding-bottom: .8rem;
 }
+
 .card .card-image {
   padding-top: .8rem;
 }
+
 .card .card-image:first-child {
   padding-top: 0;
 }
+
 .card .card-image:first-child img {
   border-top-left-radius: .1rem;
   border-top-right-radius: .1rem;
 }
+
 .card .card-image:last-child img {
   border-bottom-left-radius: .1rem;
   border-bottom-right-radius: .1rem;
 }
+
 .chip {
   align-items: center;
   background: #f0f1f4;
@@ -2144,18 +2240,22 @@ code {
   text-decoration: none;
   vertical-align: middle;
 }
+
 .chip.active {
   background: #5764c6;
   color: #fff;
 }
+
 .chip .avatar {
   margin-left: -.5rem;
   margin-right: .2rem;
 }
+
 .dropdown {
   display: inline-block;
   position: relative;
 }
+
 .dropdown .menu {
   animation: slide-down .15s ease 1;
   display: none;
@@ -2165,19 +2265,44 @@ code {
   position: absolute;
   top: 100%;
 }
+
 .dropdown.dropdown-right .menu {
   left: auto;
   right: 0;
 }
+
 .dropdown.active .menu,
 .dropdown .dropdown-toggle:focus + .menu,
 .dropdown .menu:hover {
   display: block;
 }
+
 .dropdown .btn-group .dropdown-toggle:nth-last-child(2) {
   border-bottom-right-radius: .1rem;
   border-top-right-radius: .1rem;
 }
+
+.empty {
+  background: #f8f9fa;
+  border-radius: .1rem;
+  color: #727e96;
+  padding: 1.6rem; 
+  text-align: center;
+}
+
+.empty .empty-icon {
+  margin-bottom: .8rem;
+}
+
+.empty .empty-title,
+.empty .empty-subtitle {
+  margin: .4rem auto;
+}
+
+.empty .empty-action {
+  margin-top: .8rem;
+}
+
 .menu {
   background: #fff;
   border-radius: .1rem;
@@ -2186,14 +2311,15 @@ code {
   margin: 0;
   min-width: 180px;
   padding: .4rem;
-  -ms-transform: translateY(.2rem);
   transform: translateY(.2rem);
   z-index: 100;
 }
+
 .menu.menu-nav {
   background: transparent;
   box-shadow: none;
 }
+
 .menu .menu-item {
   margin-top: 0;
   padding: 0 .4rem;
@@ -2203,6 +2329,7 @@ code {
   -ms-user-select: none;
   user-select: none;
 }
+
 .menu .menu-item > a {
   border-radius: .1rem;
   color: inherit;
@@ -2211,26 +2338,32 @@ code {
   padding: .2rem .4rem;
   text-decoration: none;
 }
+
 .menu .menu-item > a:focus,
 .menu .menu-item > a:hover {
   background: #eff1fa;
   color: #5764c6;
 }
+
 .menu .menu-item > a:active,
 .menu .menu-item > a.active {
   background: #eff1fa;
   color: #5764c6;
 }
+
 .menu .menu-item + .menu-item {
   margin-top: .2rem;
 }
+
 .menu .menu-badge {
   float: right;
   padding: .2rem 0;
 }
+
 .menu .menu-badge .btn {
   margin-top: -.1rem;
 }
+
 .modal {
   align-items: center;
   bottom: 0;
@@ -2246,6 +2379,7 @@ code {
   right: 0;
   top: 0;
 }
+
 .modal:target,
 .modal.active {
   display: flex;
@@ -2253,6 +2387,7 @@ code {
   opacity: 1;
   z-index: 400;
 }
+
 .modal:target .modal-overlay,
 .modal.active .modal-overlay {
   background: rgba(248, 249, 250, .75);
@@ -2264,15 +2399,18 @@ code {
   right: 0;
   top: 0;
 }
+
 .modal:target .modal-container,
 .modal.active .modal-container {
   animation: slide-down .2s ease 1;
   max-width: 640px;
   z-index: 1;
 }
+
 .modal.modal-sm .modal-container {
   max-width: 320px;
 }
+
 .modal-container {
   background: #fff;
   border-radius: .1rem;
@@ -2281,22 +2419,27 @@ code {
   padding: 0;
   text-align: left;
 }
+
 .modal-container .modal-header {
   padding: .8rem;
 }
+
 .modal-container .modal-header .modal-title {
   margin: 0;
 }
+
 .modal-container .modal-body {
   max-height: 50vh;
   overflow-y: auto;
   padding: .8rem;
   position: relative;
 }
+
 .modal-container .modal-footer {
   padding: .8rem;
   text-align: right;
 }
+
 .nav {
   display: flex;
   display: -ms-flexbox;
@@ -2305,27 +2448,33 @@ code {
   list-style: none;
   margin: .2rem 0;
 }
+
 .nav .nav-item a {
   color: #727e96;
   padding: .2rem .4rem;
   text-decoration: none;
 }
+
 .nav .nav-item a:focus,
 .nav .nav-item a:hover {
   color: #5764c6;
 }
+
 .nav .nav-item.active > a {
   color: #5b657a;
   font-weight: bold;
 }
+
 .nav .nav-item.active > a:focus,
 .nav .nav-item.active > a:hover {
   color: #5764c6;
 }
+
 .nav .nav {
   margin-bottom: .4rem;
   margin-left: .8rem;
 }
+
 .pagination {
   display: flex;
   display: -ms-flexbox;
@@ -2333,13 +2482,16 @@ code {
   margin: .2rem 0;
   padding: .2rem 0;
 }
+
 .pagination .page-item {
   margin: .2rem .05rem;
 }
+
 .pagination .page-item span {
   display: inline-block;
   padding: .2rem .2rem;
 }
+
 .pagination .page-item a {
   border-radius: .1rem;
   color: #727e96;
@@ -2347,38 +2499,75 @@ code {
   padding: .2rem .4rem;
   text-decoration: none;
 }
+
 .pagination .page-item a:focus,
 .pagination .page-item a:hover {
   color: #5764c6;
 }
+
 .pagination .page-item.disabled a {
   cursor: default;
   opacity: .5;
   pointer-events: none;
 }
+
 .pagination .page-item.active a {
   background: #5764c6;
   color: #fff;
 }
+
 .pagination .page-item.page-prev,
 .pagination .page-item.page-next {
   -ms-flex: 1 0 50%;
   flex: 1 0 50%;
 }
+
 .pagination .page-item.page-next {
   text-align: right;
 }
+
 .pagination .page-item .page-item-title {
   margin: 0;
 }
+
 .pagination .page-item .page-item-subtitle {
   margin: 0;
   opacity: .5;
 }
+
+.panel {
+  border: .05rem solid #e7e9ed;
+  border-radius: .1rem;
+  display: flex;
+  display: -ms-flexbox;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.panel .panel-header,
+.panel .panel-footer {
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding: .8rem;
+}
+
+.panel .panel-nav {
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+}
+
+.panel .panel-body {
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  overflow-y: auto;
+  padding: 0 .8rem;
+}
+
 .popover {
   display: inline-block;
   position: relative;
 }
+
 .popover .popover-container {
   content: attr(data-tooltip);
   left: 50%;
@@ -2386,54 +2575,58 @@ code {
   padding: .4rem;
   position: absolute;
   top: 0;
-  -ms-transform: translate(-50%, -50%) scale(0);
   transform: translate(-50%, -50%) scale(0);
   transition: transform .2s ease;
   width: 320px;
   z-index: 400;
 }
+
 .popover :focus + .popover-container,
 .popover:hover .popover-container,
 .popover .popover-container:hover {
   display: block;
   opacity: 1;
-  -ms-transform: translate(-50%, -100%) scale(1);
   transform: translate(-50%, -100%) scale(1);
 }
+
 .popover.popover-right .popover-container {
   left: 100%;
   top: 50%;
 }
+
 .popover.popover-right :focus + .popover-container,
 .popover.popover-right:hover .popover-container,
 .popover.popover-right .popover-container:hover {
-  -ms-transform: translate(0, -50%) scale(1);
   transform: translate(0, -50%) scale(1);
 }
+
 .popover.popover-bottom .popover-container {
   left: 50%;
   top: 100%;
 }
+
 .popover.popover-bottom :focus + .popover-container,
 .popover.popover-bottom:hover .popover-container,
 .popover.popover-bottom .popover-container:hover {
-  -ms-transform: translate(-50%, 0) scale(1);
   transform: translate(-50%, 0) scale(1);
 }
+
 .popover.popover-left .popover-container {
   left: 0;
   top: 50%;
 }
+
 .popover.popover-left :focus + .popover-container,
 .popover.popover-left:hover .popover-container,
 .popover.popover-left .popover-container:hover {
-  -ms-transform: translate(-100%, -50%) scale(1);
   transform: translate(-100%, -50%) scale(1);
 }
+
 .popover .card {
-  border: 0;
+  border: 0; 
   box-shadow: 0 .2rem .5rem rgba(69, 77, 93, .3);
 }
+
 .step {
   display: flex;
   display: -ms-flexbox;
@@ -2443,14 +2636,16 @@ code {
   margin: .2rem 0;
   width: 100%;
 }
+
 .step .step-item {
   -ms-flex: 1 1 0;
   flex: 1 1 0;
   margin-top: 0;
-  min-height: 20px;
-  position: relative;
+  min-height: 1rem;
+  position: relative; 
   text-align: center;
 }
+
 .step .step-item:not(:first-child)::before {
   background: #5764c6;
   content: "";
@@ -2460,12 +2655,14 @@ code {
   top: 9px;
   width: 100%;
 }
+
 .step .step-item a {
   color: #acb3c2;
   display: inline-block;
   padding: 20px 10px 0;
   text-decoration: none;
 }
+
 .step .step-item a::before {
   background: #5764c6;
   border: .1rem solid #fff;
@@ -2476,21 +2673,24 @@ code {
   left: 50%;
   position: absolute;
   top: .2rem;
-  -ms-transform: translateX(-50%);
   transform: translateX(-50%);
   width: .6rem;
   z-index: 1;
 }
+
 .step .step-item.active a::before {
   background: #fff;
   border: .1rem solid #5764c6;
 }
+
 .step .step-item.active ~ .step-item::before {
   background: #e7e9ed;
 }
+
 .step .step-item.active ~ .step-item a::before {
   background: #e7e9ed;
 }
+
 .tab {
   align-items: center;
   border-bottom: .05rem solid #e7e9ed;
@@ -2502,14 +2702,17 @@ code {
   list-style: none;
   margin: .2rem 0 .15rem 0;
 }
+
 .tab .tab-item {
   margin-top: 0;
 }
+
 .tab .tab-item.tab-action {
   -ms-flex: 1 0 auto;
   flex: 1 0 auto;
   text-align: right;
 }
+
 .tab .tab-item a {
   border-bottom: .1rem solid transparent;
   color: inherit;
@@ -2518,74 +2721,89 @@ code {
   padding: .4rem .2rem .3rem .2rem;
   text-decoration: none;
 }
+
 .tab .tab-item a:focus,
 .tab .tab-item a:hover {
   color: #5764c6;
 }
+
 .tab .tab-item.active a,
 .tab .tab-item a.active {
   border-bottom-color: #5764c6;
   color: #5764c6;
 }
+
 .tab.tab-block .tab-item {
   -ms-flex: 1 0 0;
   flex: 1 0 0;
   text-align: center;
 }
+
 .tab.tab-block .tab-item a {
   margin: 0;
 }
+
 .tab.tab-block .tab-item .badge[data-badge]::after {
   position: absolute;
   right: -4px;
   top: -4px;
-  -ms-transform: translate(0, 0);
   transform: translate(0, 0);
 }
+
 .tab:not(.tab-block) .badge {
   padding-right: 2px;
 }
+
 .tile {
   align-content: space-between;
   align-items: flex-start;
-  display: flex;
+  display: flex; 
   display: -ms-flexbox;
   -ms-flex-align: start;
   -ms-flex-line-pack: justify;
 }
+
 .tile .tile-icon,
 .tile .tile-action {
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
 }
+
 .tile .tile-content {
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
 }
+
 .tile .tile-content:not(:first-child) {
   padding-left: .4rem;
 }
+
 .tile .tile-content:not(:last-child) {
   padding-right: .4rem;
 }
+
 .tile .tile-title,
 .tile .tile-subtitle {
   line-height: 1rem;
 }
+
 .tile.tile-centered {
-  align-items: center;
+  align-items: center; 
   -ms-flex-align: center;
 }
+
 .tile.tile-centered .tile-content {
   overflow: hidden;
 }
+
 .tile.tile-centered .tile-title,
 .tile.tile-centered .tile-subtitle {
-  margin-bottom: 0;
+  margin-bottom: 0; 
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
 .toast {
   background: rgba(69, 77, 93, .9);
   border: .05rem solid #454d5d;
@@ -2596,38 +2814,47 @@ code {
   padding: .4rem;
   width: 100%;
 }
+
 .toast.toast-primary {
   background: rgba(87, 100, 198, .9);
   border-color: #5764c6;
 }
+
 .toast.toast-success {
   background: rgba(50, 182, 67, .9);
   border-color: #32b643;
 }
+
 .toast.toast-warning {
   background: rgba(255, 183, 0, .9);
   border-color: #ffb700;
 }
+
 .toast.toast-error {
   background: rgba(232, 86, 0, .9);
   border-color: #e85600;
 }
+
 .toast a {
   color: #fff;
   text-decoration: underline;
 }
+
 .toast a:focus,
 .toast a:hover,
 .toast a:active,
 .toast a.active {
   opacity: .75;
 }
+
 .toast .btn-clear {
   margin: 2px -2px 2px 4px;
 }
+
 .tooltip {
   position: relative;
 }
+
 .tooltip::after {
   background: rgba(69, 77, 93, .9);
   border-radius: .1rem;
@@ -2644,56 +2871,57 @@ code {
   pointer-events: none;
   position: absolute;
   text-overflow: ellipsis;
-  -ms-transform: translate(-50%, .4rem);
   transform: translate(-50%, .4rem);
   transition: all .2s ease;
   white-space: nowrap;
   z-index: 300;
 }
+
 .tooltip:focus::after,
 .tooltip:hover::after {
   opacity: 1;
-  -ms-transform: translate(-50%, -.2rem);
   transform: translate(-50%, -.2rem);
 }
+
 .tooltip[disabled],
 .tooltip.disabled {
   pointer-events: auto;
 }
+
 .tooltip.tooltip-right::after {
   bottom: 50%;
   left: 100%;
-  -ms-transform: translate(-.2rem, 50%);
   transform: translate(-.2rem, 50%);
 }
+
 .tooltip.tooltip-right:focus::after,
 .tooltip.tooltip-right:hover::after {
-  -ms-transform: translate(.2rem, 50%);
   transform: translate(.2rem, 50%);
 }
+
 .tooltip.tooltip-bottom::after {
   bottom: auto;
   top: 100%;
-  -ms-transform: translate(-50%, -.4rem);
   transform: translate(-50%, -.4rem);
 }
+
 .tooltip.tooltip-bottom:focus::after,
 .tooltip.tooltip-bottom:hover::after {
-  -ms-transform: translate(-50%, .2rem);
   transform: translate(-50%, .2rem);
 }
+
 .tooltip.tooltip-left::after {
   bottom: 50%;
   left: auto;
   right: 100%;
-  -ms-transform: translate(.4rem, 50%);
   transform: translate(.4rem, 50%);
 }
+
 .tooltip.tooltip-left:focus::after,
 .tooltip.tooltip-left:hover::after {
-  -ms-transform: translate(-.2rem, 50%);
   transform: translate(-.2rem, 50%);
 }
+
 @keyframes loading {
   0% {
     transform: rotate(0deg);
@@ -2702,6 +2930,7 @@ code {
     transform: rotate(360deg);
   }
 }
+
 @keyframes slide-down {
   0% {
     opacity: 0;
@@ -2712,103 +2941,157 @@ code {
     transform: translateY(0);
   }
 }
+
 .text-primary {
   color: #5764c6;
 }
+
 a.text-primary:focus,
 a.text-primary:hover {
   color: #4452c0;
 }
+
 .text-secondary {
   color: #e4e6f6;
 }
+
 a.text-secondary:focus,
 a.text-secondary:hover {
   color: #d1d4ef;
 }
+
 .text-gray {
   color: #acb3c2;
 }
+
 a.text-gray:focus,
 a.text-gray:hover {
   color: #9ea6b7;
 }
+
 .text-light {
   color: #fff;
 }
+
 a.text-light:focus,
 a.text-light:hover {
   color: #f2f2f2;
 }
+
 .text-success {
   color: #32b643;
 }
+
 a.text-success:focus,
 a.text-success:hover {
   color: #2da23c;
 }
+
 .text-warning {
   color: #ffb700;
 }
+
 a.text-warning:focus,
 a.text-warning:hover {
   color: #e6a500;
 }
+
 .text-error {
   color: #e85600;
 }
+
 a.text-error:focus,
 a.text-error:hover {
   color: #cf4d00;
 }
+
 .bg-primary {
   background: #5764c6;
 }
+
 .bg-secondary {
   background: #eff1fa;
 }
+
 .bg-dark {
   background: #454d5d;
 }
+
 .bg-gray {
   background: #f8f9fa;
 }
+
 .bg-success {
   background: #32b643;
 }
+
 .bg-warning {
   background: #ffb700;
 }
+
 .bg-error {
   background: #e85600;
 }
+
+.c-hand {
+  cursor: pointer;
+}
+
+.c-move {
+  cursor: move;
+}
+
+.c-zoom-in {
+  cursor: zoom-in;
+}
+
+.c-zoom-out {
+  cursor: zoom-out;
+}
+
+.c-not-allowed {
+  cursor: not-allowed;
+}
+
+.c-auto {
+  cursor: auto;
+}
+
 .d-block {
   display: block;
 }
+
 .d-inline {
   display: inline;
 }
+
 .d-inline-block {
   display: inline-block;
 }
+
 .d-flex {
-  display: flex;
+  display: flex; 
   display: -ms-flexbox;
 }
+
 .d-inline-flex {
-  display: inline-flex;
+  display: inline-flex; 
   display: -ms-inline-flexbox;
 }
+
 .d-none,
-.hide {
+.d-hide {
   display: none !important;
 }
+
 .d-visible {
   visibility: visible;
 }
+
 .d-invisible {
   visibility: hidden;
 }
+
 .text-hide {
   background: transparent;
   border: 0;
@@ -2817,6 +3100,7 @@ a.text-error:hover {
   line-height: 0;
   text-shadow: none;
 }
+
 .text-assistive {
   border: 0;
   clip: rect(0, 0, 0, 0);
@@ -2827,14 +3111,13 @@ a.text-error:hover {
   position: absolute;
   width: 1px;
 }
-.hand {
-  cursor: pointer;
-}
+
 .divider,
 .divider-vert {
   display: block;
   position: relative;
 }
+
 .divider[data-content]::after,
 .divider-vert[data-content]::after {
   background: #fff;
@@ -2843,21 +3126,24 @@ a.text-error:hover {
   display: inline-block;
   font-size: .6rem;
   padding: 0 .4rem;
-  -ms-transform: translateY(-.55rem);
   transform: translateY(-.55rem);
 }
+
 .divider {
   border-top: .05rem solid #e7e9ed;
   height: .05rem;
   margin: .4rem 0;
 }
+
 .divider[data-content] {
   margin: .8rem 0;
 }
+
 .divider-vert {
   display: block;
   padding: .8rem;
 }
+
 .divider-vert::before {
   border-left: .05rem solid #e7e9ed;
   bottom: .4rem;
@@ -2866,23 +3152,24 @@ a.text-error:hover {
   left: 50%;
   position: absolute;
   top: .4rem;
-  -ms-transform: translateX(-50%);
   transform: translateX(-50%);
 }
+
 .divider-vert[data-content]::after {
   left: 50%;
   padding: .2rem 0;
   position: absolute;
   top: 50%;
-  -ms-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
 }
+
 .loading {
   color: transparent !important;
   min-height: .8rem;
   pointer-events: none;
   position: relative;
 }
+
 .loading::after {
   animation: loading 500ms infinite linear;
   border: .1rem solid #5764c6;
@@ -2900,229 +3187,296 @@ a.text-error:hover {
   width: .8rem;
   z-index: 1;
 }
+
 .loading.loading-lg {
   min-height: 2rem;
 }
+
 .loading.loading-lg::after {
   height: 1.6rem;
   margin-left: -.8rem;
   margin-top: -.8rem;
   width: 1.6rem;
 }
+
 .clearfix::after,
 .container::after {
   clear: both;
   content: "";
   display: table;
 }
+
 .float-left {
   float: left !important;
 }
+
 .float-right {
   float: right !important;
 }
+
 .relative {
   position: relative;
 }
+
 .absolute {
   position: absolute;
 }
+
 .fixed {
   position: fixed;
 }
+
 .centered {
   display: block;
   float: none;
   margin-left: auto;
   margin-right: auto;
 }
+
 .m-0 {
   margin: 0;
 }
+
 .mb-0 {
   margin-bottom: 0;
 }
+
 .ml-0 {
   margin-left: 0;
 }
+
 .mr-0 {
   margin-right: 0;
 }
+
 .mt-0 {
   margin-top: 0;
 }
+
 .mx-0 {
   margin-left: 0;
   margin-right: 0;
 }
+
 .my-0 {
   margin-bottom: 0;
   margin-top: 0;
 }
+
 .m-1 {
   margin: .2rem;
 }
+
 .mb-1 {
   margin-bottom: .2rem;
 }
+
 .ml-1 {
   margin-left: .2rem;
 }
+
 .mr-1 {
   margin-right: .2rem;
 }
+
 .mt-1 {
   margin-top: .2rem;
 }
+
 .mx-1 {
   margin-left: .2rem;
   margin-right: .2rem;
 }
+
 .my-1 {
   margin-bottom: .2rem;
   margin-top: .2rem;
 }
+
 .m-2 {
   margin: .4rem;
 }
+
 .mb-2 {
   margin-bottom: .4rem;
 }
+
 .ml-2 {
   margin-left: .4rem;
 }
+
 .mr-2 {
   margin-right: .4rem;
 }
+
 .mt-2 {
   margin-top: .4rem;
 }
+
 .mx-2 {
   margin-left: .4rem;
   margin-right: .4rem;
 }
+
 .my-2 {
   margin-bottom: .4rem;
   margin-top: .4rem;
 }
+
 .p-0 {
   padding: 0;
 }
+
 .pb-0 {
   padding-bottom: 0;
 }
+
 .pl-0 {
   padding-left: 0;
 }
+
 .pr-0 {
   padding-right: 0;
 }
+
 .pt-0 {
   padding-top: 0;
 }
+
 .px-0 {
   padding-left: 0;
   padding-right: 0;
 }
+
 .py-0 {
   padding-bottom: 0;
   padding-top: 0;
 }
+
 .p-1 {
   padding: .2rem;
 }
+
 .pb-1 {
   padding-bottom: .2rem;
 }
+
 .pl-1 {
   padding-left: .2rem;
 }
+
 .pr-1 {
   padding-right: .2rem;
 }
+
 .pt-1 {
   padding-top: .2rem;
 }
+
 .px-1 {
   padding-left: .2rem;
   padding-right: .2rem;
 }
+
 .py-1 {
   padding-bottom: .2rem;
   padding-top: .2rem;
 }
+
 .p-2 {
   padding: .4rem;
 }
+
 .pb-2 {
   padding-bottom: .4rem;
 }
+
 .pl-2 {
   padding-left: .4rem;
 }
+
 .pr-2 {
   padding-right: .4rem;
 }
+
 .pt-2 {
   padding-top: .4rem;
 }
+
 .px-2 {
   padding-left: .4rem;
   padding-right: .4rem;
 }
+
 .py-2 {
   padding-bottom: .4rem;
   padding-top: .4rem;
 }
+
 .rounded {
   border-radius: .1rem;
 }
+
 .circle {
   border-radius: 50%;
 }
+
 .text-left {
   text-align: left;
 }
+
 .text-right {
   text-align: right;
 }
+
 .text-center {
   text-align: center;
 }
+
 .text-justify {
   text-align: justify;
 }
+
 .text-lowercase {
   text-transform: lowercase;
 }
+
 .text-uppercase {
   text-transform: uppercase;
 }
+
 .text-capitalize {
   text-transform: capitalize;
 }
+
 .text-normal {
   font-weight: normal;
 }
+
 .text-bold {
   font-weight: bold;
 }
+
 .text-italic {
   font-style: italic;
 }
+
 .text-large {
   font-size: 1.2em;
 }
+
 .text-ellipsis {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
 .text-clip {
   overflow: hidden;
   text-overflow: clip;
   white-space: nowrap;
 }
+
 .text-break {
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
diff --git a/docs/dist/spectre.min.css b/docs/dist/spectre.min.css
index 5a8f4c3..347115c 100644
--- a/docs/dist/spectre.min.css
+++ b/docs/dist/spectre.min.css
@@ -1 +1 @@
-/*! Spectre.css | MIT License | github.com/picturepan2/spectre */html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:"SF Mono","Segoe UI Mono","Roboto Mono",Menlo,Courier,monospace;font-size:1em}dfn{font-style:italic}small{font-size:80%;font-weight:400}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}fieldset{border:0;margin:0;padding:0}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}*,::after,::before{box-sizing:inherit}html{box-sizing:border-box;font-size:20px;line-height:1.42857143;-webkit-tap-highlight-color:transparent}body{background:#fff;color:#50596c;font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;font-size:.7rem;overflow-x:hidden;text-rendering:optimizeLegibility}a{color:#5764c6;outline:0;text-decoration:none}a:focus{box-shadow:0 0 0 .1rem rgba(87,100,198,.2)}a.active,a:active,a:focus,a:hover{color:#4452c0;text-decoration:underline}h1,h2,h3,h4,h5,h6{color:inherit;font-weight:500;line-height:1.2;margin-bottom:.25em;margin-top:0}.h1,.h2,.h3,.h4,.h5,.h6{font-weight:500}.h1,h1{font-size:2rem}.h2,h2{font-size:1.6rem}.h3,h3{font-size:1.4rem}.h4,h4{font-size:1.2rem}.h5,h5{font-size:1rem}.h6,h6{font-size:.8rem}p{line-height:1.2rem;margin:0 0 .8rem}a,ins,u{-webkit-text-decoration-skip:ink edges;text-decoration-skip:ink edges}abbr[title]{border-bottom:.05rem dotted;cursor:help;text-decoration:none}kbd{background:#454d5d;border-radius:.1rem;color:#fff;line-height:1;padding:.15rem .2rem}mark{background:#ffe9b3;border-radius:.1rem;color:#50596c;line-height:1;padding:.15rem .2rem}blockquote{border-left:.1rem solid #e7e9ed;margin-left:0;padding:.4rem .8rem}blockquote p:last-child{margin-bottom:0}ol,ul{margin:.8rem 0 .8rem .8rem;padding:0}ol ol,ol ul,ul ol,ul ul{margin:.8rem 0 .8rem .8rem}ol li,ul li{margin-top:.4rem}ul{list-style:disc inside}ul ul{list-style-type:circle}ol{list-style:decimal inside}ol ol{list-style-type:lower-alpha}dl dt{font-weight:700}dl dd{margin:.4rem 0 .8rem 0}:lang(zh){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",sans-serif}:lang(ja){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Hiragino Sans","Hiragino Kaku Gothic Pro","Yu Gothic",YuGothic,Meiryo,"Helvetica Neue",sans-serif}:lang(ko){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Malgun Gothic","Helvetica Neue",sans-serif}.cjk ins,.cjk u,:lang(ja) ins,:lang(ja) u,:lang(zh) ins,:lang(zh) u{border-bottom:.05rem solid;text-decoration:none}.cjk del+del,.cjk del+s,.cjk ins+ins,.cjk ins+u,.cjk s+del,.cjk s+s,.cjk u+ins,.cjk u+u,:lang(ja) del+del,:lang(ja) del+s,:lang(ja) ins+ins,:lang(ja) ins+u,:lang(ja) s+del,:lang(ja) s+s,:lang(ja) u+ins,:lang(ja) u+u,:lang(zh) del+del,:lang(zh) del+s,:lang(zh) ins+ins,:lang(zh) ins+u,:lang(zh) s+del,:lang(zh) s+s,:lang(zh) u+ins,:lang(zh) u+u{margin-left:.125em}.table{border-collapse:collapse;border-spacing:0;text-align:left;width:100%}.table.table-striped tbody tr:nth-of-type(odd){background:#f8f9fa}.table.table-hover tbody tr:hover{background:#f0f1f4}.table tbody tr.active,.table.table-striped tbody tr.active{background:#f0f1f4}.table td,.table th{border-bottom:.05rem solid #e7e9ed;padding:.6rem .4rem}.table th{border-bottom-width:.1rem}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;border:.05rem solid #5764c6;border-radius:.1rem;color:#5764c6;cursor:pointer;display:inline-block;font-size:.7rem;height:1.6rem;line-height:1rem;outline:0;padding:.25rem .4rem;text-align:center;text-decoration:none;transition:all .2s ease;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap}.btn:focus{box-shadow:0 0 0 .1rem rgba(87,100,198,.2)}.btn:focus,.btn:hover{background:#eff1fa;border-color:#4c59c2;text-decoration:none}.btn.active,.btn:active{background:#4c59c2;border-color:#3e4cb6;color:#fff;text-decoration:none}.btn.active.loading::after,.btn:active.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.disabled,.btn:disabled,.btn[disabled]{cursor:default;opacity:.5;pointer-events:none}.btn.btn-primary{background:#5764c6;border-color:#4c59c2;color:#fff}.btn.btn-primary:focus,.btn.btn-primary:hover{background:#4452c0;border-color:#3e4cb6;color:#fff}.btn.btn-primary.active,.btn.btn-primary:active{background:#3f4eba;border-color:#3b49af;color:#fff}.btn.btn-primary.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.btn-link{background:0 0;border-color:transparent;color:#5764c6}.btn.btn-link.active,.btn.btn-link:active,.btn.btn-link:focus,.btn.btn-link:hover{color:#4452c0}.btn.btn-sm{font-size:.6rem;height:1.2rem;padding:.05rem .3rem}.btn.btn-lg{font-size:.8rem;height:2rem;padding:.45rem .6rem}.btn.btn-block{display:block;width:100%}.btn.btn-action{padding-left:0;padding-right:0;width:1.6rem}.btn.btn-action.btn-sm{width:1.2rem}.btn.btn-action.btn-lg{width:2rem}.btn.btn-clear{background:0 0;border:0;color:currentColor;height:.8rem;line-height:.8rem;margin-left:.2rem;margin-right:-2px;opacity:.45;padding:0 2px;text-decoration:none;width:.8rem}.btn.btn-clear:hover{opacity:.85}.btn.btn-clear::before{content:"\2715"}.btn-group{display:inline-flex;display:-ms-inline-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap}.btn-group .btn{-ms-flex:1 0 auto;flex:1 0 auto}.btn-group .btn:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.btn-group .btn:not(:first-child):not(:last-child){border-radius:0;margin-left:-.05rem}.btn-group .btn:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-.05rem}.btn-group .btn.active,.btn-group .btn:active,.btn-group .btn:focus,.btn-group .btn:hover{z-index:1}.btn-group.btn-group-block{display:flex;display:-ms-flexbox}.btn-group.btn-group-block .btn{-ms-flex:1 0 0;flex:1 0 0}.form-group:not(:last-child){margin-bottom:.4rem}fieldset{margin-bottom:.8rem}legend{font-size:.8rem;font-weight:500;margin-bottom:.8rem}.form-label{display:block;padding:.3rem 0}.form-label.label-sm{padding:.1rem 0}.form-label.label-lg{padding:.5rem 0}.form-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;background-image:none;border:.05rem solid #caced7;border-radius:.1rem;color:#50596c;display:block;font-size:.7rem;height:1.6rem;line-height:1rem;max-width:100%;outline:0;padding:.25rem .4rem;position:relative;transition:all .2s ease;width:100%}.form-input:focus{border-color:#5764c6;box-shadow:0 0 0 .1rem rgba(87,100,198,.2)}.form-input::-webkit-input-placeholder{color:#acb3c2}.form-input:-ms-input-placeholder{color:#acb3c2}.form-input::placeholder{color:#acb3c2}.form-input.input-sm{font-size:.6rem;height:1.2rem;padding:.05rem .4rem}.form-input.input-lg{font-size:.8rem;height:2rem;padding:.45rem .4rem}.form-input.input-inline{display:inline-block;vertical-align:middle;width:auto}textarea.form-input{height:auto}.form-input[type=file]{height:auto}.form-input-hint{color:#acb3c2;font-size:.6rem;margin-top:.2rem}.has-success .form-input-hint,.is-success+.form-input-hint{color:#32b643}.has-error .form-input-hint,.is-error+.form-input-hint{color:#e85600}.form-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:.05rem solid #caced7;border-radius:.1rem;color:inherit;font-size:.7rem;height:1.6rem;line-height:1rem;outline:0;padding:.25rem .4rem;vertical-align:middle;width:100%}.form-select[multiple],.form-select[size]{height:auto}.form-select[multiple] option,.form-select[size] option{padding:.1rem .2rem}.form-select:not([multiple]):not([size]){background:#fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23667189' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .35rem center/.4rem .5rem;padding-right:1.1rem}.form-select:focus{border-color:#5764c6;box-shadow:0 0 0 .1rem rgba(87,100,198,.2)}.form-select::-ms-expand{display:none}.form-select.select-sm{font-size:.6rem;height:1.2rem;padding:.05rem 1.1rem .05rem .4rem}.form-select.select-lg{font-size:.8rem;height:2rem;padding:.45rem 1.1rem .45rem .4rem}.has-icon-left,.has-icon-right{position:relative}.has-icon-left .form-icon,.has-icon-right .form-icon{height:.7rem;margin:0 .25rem;position:absolute;top:50%;-ms-transform:translateY(-50%);transform:translateY(-50%);width:.7rem}.has-icon-left .form-icon{left:.05rem}.has-icon-left .form-input{padding-left:1.2rem}.has-icon-right .form-icon{right:.05rem}.has-icon-right .form-input{padding-right:1.2rem}.form-checkbox,.form-radio,.form-switch{display:inline-block;line-height:1rem;padding:.1rem 1.1rem;position:relative}.form-checkbox input,.form-radio input,.form-switch input{clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;position:absolute;width:1px}.form-checkbox input:focus+.form-icon,.form-radio input:focus+.form-icon,.form-switch input:focus+.form-icon{border-color:#5764c6;box-shadow:0 0 0 .1rem rgba(87,100,198,.2)}.form-checkbox input:checked+.form-icon,.form-radio input:checked+.form-icon,.form-switch input:checked+.form-icon{background:#5764c6;border-color:#5764c6}.form-checkbox .form-icon,.form-radio .form-icon,.form-switch .form-icon{border:.05rem solid #caced7;cursor:pointer;display:inline-block;position:absolute;transition:all .2s ease}.form-checkbox .form-icon,.form-radio .form-icon{background:#fff;height:.7rem;left:0;top:.25rem;width:.7rem}.form-checkbox input:active+.form-icon,.form-radio input:active+.form-icon{background:#f0f1f4}.form-checkbox .form-icon{border-radius:.1rem}.form-checkbox input:checked+.form-icon::before{background-clip:padding-box;border:.1rem solid #fff;border-left-width:0;border-top-width:0;content:"";height:10px;left:50%;margin-left:-3px;margin-top:-6px;position:absolute;top:50%;-ms-transform:rotate(45deg);transform:rotate(45deg);width:6px}.form-checkbox input:indeterminate+.form-icon{background:#5764c6;border-color:#5764c6}.form-checkbox input:indeterminate+.form-icon::before{background:#fff;content:"";height:2px;left:50%;margin-left:-5px;margin-top:-1px;position:absolute;top:50%;width:10px}.form-radio .form-icon{border-radius:.35rem}.form-radio input:checked+.form-icon::before{background:#fff;border-radius:.1rem;content:"";height:4px;left:50%;margin-left:-2px;margin-top:-2px;position:absolute;top:50%;width:4px}.form-switch{padding-left:2rem}.form-switch .form-icon{background:#e7e9ed;background-clip:padding-box;border-radius:.45rem;height:.9rem;left:0;top:.15rem;width:1.6rem}.form-switch .form-icon::before{background:#fff;border-radius:.4rem;content:"";display:block;height:.8rem;left:0;position:absolute;top:0;transition:all .2s ease;width:.8rem}.form-switch input:checked+.form-icon::before{left:14px}.form-switch input:active+.form-icon::before{background:#f8f9fa}.input-group{display:flex;display:-ms-flexbox}.input-group .input-group-addon{background:#f8f9fa;border:.05rem solid #caced7;border-radius:.1rem;line-height:1rem;padding:.25rem .4rem}.input-group .input-group-addon.addon-sm{font-size:.6rem;padding:.05rem .4rem}.input-group .input-group-addon.addon-lg{font-size:.8rem;padding:.45rem .4rem}.input-group .form-input,.input-group .form-select{-ms-flex:1 1 auto;flex:1 1 auto}.input-group .input-group-btn{z-index:1}.input-group .form-input:first-child:not(:last-child),.input-group .form-select:first-child:not(:last-child),.input-group .input-group-addon:first-child:not(:last-child),.input-group .input-group-btn:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.input-group .form-input:not(:first-child):not(:last-child),.input-group .form-select:not(:first-child):not(:last-child),.input-group .input-group-addon:not(:first-child):not(:last-child),.input-group .input-group-btn:not(:first-child):not(:last-child){border-radius:0;margin-left:-.05rem}.input-group .form-input:last-child:not(:first-child),.input-group .form-select:last-child:not(:first-child),.input-group .input-group-addon:last-child:not(:first-child),.input-group .input-group-btn:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-.05rem}.input-group .form-input:focus,.input-group .form-select:focus,.input-group .input-group-addon:focus,.input-group .input-group-btn:focus{z-index:2}.input-group .form-select{width:auto}.input-group.input-inline{display:inline-flex;display:-ms-inline-flexbox}.form-input.is-success,.form-select.is-success,.has-success .form-input,.has-success .form-select{border-color:#32b643}.form-input.is-success:focus,.form-select.is-success:focus,.has-success .form-input:focus,.has-success .form-select:focus{box-shadow:0 0 0 .1rem rgba(50,182,67,.2)}.form-input.is-error,.form-select.is-error,.has-error .form-input,.has-error .form-select{border-color:#e85600}.form-input.is-error:focus,.form-select.is-error:focus,.has-error .form-input:focus,.has-error .form-select:focus{box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-checkbox.is-error .form-icon,.form-radio.is-error .form-icon,.form-switch.is-error .form-icon,.has-error .form-checkbox .form-icon,.has-error .form-radio .form-icon,.has-error .form-switch .form-icon{border-color:#e85600}.form-checkbox.is-error input:checked+.form-icon,.form-radio.is-error input:checked+.form-icon,.form-switch.is-error input:checked+.form-icon,.has-error .form-checkbox input:checked+.form-icon,.has-error .form-radio input:checked+.form-icon,.has-error .form-switch input:checked+.form-icon{background:#e85600;border-color:#e85600}.form-checkbox.is-error input:focus+.form-icon,.form-radio.is-error input:focus+.form-icon,.form-switch.is-error input:focus+.form-icon,.has-error .form-checkbox input:focus+.form-icon,.has-error .form-radio input:focus+.form-icon,.has-error .form-switch input:focus+.form-icon{border-color:#e85600;box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-input:not(:placeholder-shown):invalid{border-color:#e85600}.form-input:not(:placeholder-shown):invalid:focus{box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-input:not(:placeholder-shown):invalid+.form-input-hint{color:#e85600}.form-input.disabled,.form-input:disabled,.form-select.disabled,.form-select:disabled{background-color:#f0f1f4;cursor:not-allowed;opacity:.5}.form-input[readonly]{background-color:#f8f9fa}input.disabled+.form-icon,input:disabled+.form-icon{background:#f0f1f4;cursor:not-allowed;opacity:.5}.form-switch input.disabled+.form-icon::before,.form-switch input:disabled+.form-icon::before{background:#fff}.form-horizontal{padding:.4rem}.form-horizontal .form-group{display:flex;display:-ms-flexbox}.form-horizontal .form-checkbox,.form-horizontal .form-radio,.form-horizontal .form-switch{margin:.2rem 0}.label{background:#f8f9fa;border-radius:.1rem;color:#5b657a;display:inline-block;line-height:1;padding:.15rem .2rem}.label.label-rounded{border-radius:5rem;padding-left:.4rem;padding-right:.4rem}.label.label-primary{background:#5764c6;color:#fff}.label.label-secondary{background:#eff1fa;color:#5764c6}.label.label-success{background:#32b643;color:#fff}.label.label-warning{background:#ffb700;color:#fff}.label.label-error{background:#e85600;color:#fff}code{background:#fdf4f4;border-radius:.1rem;color:#e06870;font-size:.65rem;line-height:1;padding:.15rem .2rem}.code{border-radius:.1rem;color:#50596c;line-height:1rem;position:relative}.code::before{color:#acb3c2;content:attr(data-lang);font-size:.6rem;position:absolute;right:.4rem;top:.1rem}.code code{background:#f8f9fa;color:inherit;display:block;line-height:inherit;overflow-x:auto;padding:1rem;width:100%}.img-responsive{display:block;height:auto;max-width:100%}.img-fit-cover{object-fit:cover}.img-fit-contain{object-fit:contain}.video-responsive{display:block;overflow:hidden;padding:0;position:relative;width:100%}.video-responsive::before{content:"";display:block;padding-bottom:56.25%}.video-responsive embed,.video-responsive iframe,.video-responsive object{border:0;bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.video-responsive video{height:auto;max-width:100%;width:100%}.video-responsive-4-3::before{padding-bottom:75%}.video-responsive-1-1::before{padding-bottom:100%}.figure{margin:0 0 .4rem 0}.figure .figure-caption{color:#727e96;margin-top:.4rem}.container{margin-left:auto;margin-right:auto;padding-left:.4rem;padding-right:.4rem;width:100%}.container.grid-xl{max-width:1296px}.container.grid-lg{max-width:976px}.container.grid-md{max-width:856px}.container.grid-sm{max-width:616px}.container.grid-xs{max-width:496px}.show-lg,.show-md,.show-sm,.show-xl,.show-xs{display:none!important}.columns{display:flex;display:-ms-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:-.4rem;margin-right:-.4rem}.columns.col-gapless{margin-left:0;margin-right:0}.columns.col-gapless>.column{padding-left:0;padding-right:0}.columns.col-oneline{-ms-flex-wrap:nowrap;flex-wrap:nowrap;overflow-x:auto}.column{-ms-flex:1;flex:1;max-width:100%;padding-left:.4rem;padding-right:.4rem}.column.col-1,.column.col-10,.column.col-11,.column.col-12,.column.col-2,.column.col-3,.column.col-4,.column.col-5,.column.col-6,.column.col-7,.column.col-8,.column.col-9{-ms-flex:none;flex:none}.col-12{width:100%}.col-11{width:91.66666667%}.col-10{width:83.33333333%}.col-9{width:75%}.col-8{width:66.66666667%}.col-7{width:58.33333333%}.col-6{width:50%}.col-5{width:41.66666667%}.col-4{width:33.33333333%}.col-3{width:25%}.col-2{width:16.66666667%}.col-1{width:8.33333333%}.col-auto{-ms-flex:0 0 auto;flex:0 0 auto;max-width:none;width:auto}.col-mx-auto{margin-left:auto;margin-right:auto}.col-ml-auto{margin-left:auto}.col-mr-auto{margin-right:auto}@media screen and (max-width:1280px){.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9{-ms-flex:none;flex:none}.col-xl-12{width:100%}.col-xl-11{width:91.66666667%}.col-xl-10{width:83.33333333%}.col-xl-9{width:75%}.col-xl-8{width:66.66666667%}.col-xl-7{width:58.33333333%}.col-xl-6{width:50%}.col-xl-5{width:41.66666667%}.col-xl-4{width:33.33333333%}.col-xl-3{width:25%}.col-xl-2{width:16.66666667%}.col-xl-1{width:8.33333333%}.hide-xl{display:none!important}.show-xl{display:block!important}}@media screen and (max-width:960px){.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9{-ms-flex:none;flex:none}.col-lg-12{width:100%}.col-lg-11{width:91.66666667%}.col-lg-10{width:83.33333333%}.col-lg-9{width:75%}.col-lg-8{width:66.66666667%}.col-lg-7{width:58.33333333%}.col-lg-6{width:50%}.col-lg-5{width:41.66666667%}.col-lg-4{width:33.33333333%}.col-lg-3{width:25%}.col-lg-2{width:16.66666667%}.col-lg-1{width:8.33333333%}.hide-lg{display:none!important}.show-lg{display:block!important}}@media screen and (max-width:840px){.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{-ms-flex:none;flex:none}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}.hide-md{display:none!important}.show-md{display:block!important}}@media screen and (max-width:600px){.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9{-ms-flex:none;flex:none}.col-sm-12{width:100%}.col-sm-11{width:91.66666667%}.col-sm-10{width:83.33333333%}.col-sm-9{width:75%}.col-sm-8{width:66.66666667%}.col-sm-7{width:58.33333333%}.col-sm-6{width:50%}.col-sm-5{width:41.66666667%}.col-sm-4{width:33.33333333%}.col-sm-3{width:25%}.col-sm-2{width:16.66666667%}.col-sm-1{width:8.33333333%}.hide-sm{display:none!important}.show-sm{display:block!important}}@media screen and (max-width:480px){.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{-ms-flex:none;flex:none}.col-xs-12{width:100%}.col-xs-11{width:91.66666667%}.col-xs-10{width:83.33333333%}.col-xs-9{width:75%}.col-xs-8{width:66.66666667%}.col-xs-7{width:58.33333333%}.col-xs-6{width:50%}.col-xs-5{width:41.66666667%}.col-xs-4{width:33.33333333%}.col-xs-3{width:25%}.col-xs-2{width:16.66666667%}.col-xs-1{width:8.33333333%}.hide-xs{display:none!important}.show-xs{display:block!important}}.navbar{align-items:stretch;display:flex;display:-ms-flexbox;-ms-flex-align:stretch;-ms-flex-pack:justify;-ms-flex-wrap:wrap;flex-wrap:wrap;justify-content:space-between}.navbar .navbar-section{align-items:center;display:flex;display:-ms-flexbox;-ms-flex:1 0 0;flex:1 0 0;-ms-flex-align:center}.navbar .navbar-section:last-child{-ms-flex-pack:end;justify-content:flex-end}.navbar .navbar-center{align-items:center;display:flex;display:-ms-flexbox;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-align:center}.navbar .navbar-brand{font-size:.8rem;font-weight:500;text-decoration:none}.panel{border:.05rem solid #e7e9ed;border-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column}.panel .panel-footer,.panel .panel-header{-ms-flex:0 0 auto;flex:0 0 auto;padding:.8rem}.panel .panel-nav{-ms-flex:0 0 auto;flex:0 0 auto}.panel .panel-body{-ms-flex:1 1 auto;flex:1 1 auto;overflow-y:auto;padding:0 .8rem}.empty{background:#f8f9fa;border-radius:.1rem;color:#727e96;padding:1.6rem;text-align:center}.empty .empty-icon{margin-bottom:.8rem}.empty .empty-subtitle,.empty .empty-title{margin:.4rem auto}.empty .empty-action{margin-top:.8rem}.accordion .accordion-item input:checked~.accordion-header .icon{-ms-transform:rotate(90deg);transform:rotate(90deg)}.accordion .accordion-item input:checked~.accordion-body{max-height:1000px}.accordion .accordion-item .accordion-header{display:block;padding:.2rem .4rem}.accordion .accordion-item .accordion-header .icon{transition:all .2s ease}.accordion .accordion-item .accordion-body{margin-bottom:.4rem;max-height:0;overflow:hidden;transition:max-height .2s ease}.form-autocomplete{position:relative}.form-autocomplete .form-autocomplete-input{align-content:flex-start;display:flex;display:-ms-flexbox;-ms-flex-line-pack:start;-ms-flex-wrap:wrap;flex-wrap:wrap;height:auto;min-height:1.6rem;padding:.1rem}.form-autocomplete .form-autocomplete-input.is-focused{border-color:#5764c6;box-shadow:0 0 0 .1rem rgba(87,100,198,.2)}.form-autocomplete .form-autocomplete-input .form-input{border-color:transparent;box-shadow:none;display:inline-block;-ms-flex:1 0 auto;flex:1 0 auto;height:1.2rem;line-height:.8rem;margin:.1rem;width:auto}.form-autocomplete mark{font-size:1;padding:.1em 0}.form-autocomplete .menu{left:0;position:absolute;top:100%;width:100%}.avatar{background:#5764c6;border-radius:50%;color:rgba(255,255,255,.85);display:inline-block;font-size:.8rem;font-weight:300;height:1.6rem;line-height:1;margin:0;position:relative;vertical-align:middle;width:1.6rem}.avatar.avatar-xs{font-size:.4rem;height:.8rem;width:.8rem}.avatar.avatar-sm{font-size:.6rem;height:1.2rem;width:1.2rem}.avatar.avatar-lg{font-size:1.2rem;height:2.4rem;width:2.4rem}.avatar.avatar-xl{font-size:1.6rem;height:3.2rem;width:3.2rem}.avatar img{border-radius:50%;height:100%;position:relative;width:100%;z-index:1}.avatar .avatar-icon,.avatar .avatar-presence{background:#fff;bottom:14.64%;height:50%;padding:.1rem;position:absolute;right:14.64%;-ms-transform:translate(50%,50%);transform:translate(50%,50%);width:50%;z-index:2}.avatar .avatar-presence{background:#acb3c2;border-radius:50%;box-shadow:0 0 0 .1rem #fff;height:.5em;width:.5em}.avatar .avatar-presence.online{background:#32b643}.avatar .avatar-presence.busy{background:#e85600}.avatar .avatar-presence.away{background:#ffb700}.avatar[data-initial]::before{color:currentColor;content:attr(data-initial);left:50%;position:absolute;top:50%;-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:1}.badge{position:relative;white-space:nowrap}.badge:not([data-badge])::after,.badge[data-badge]::after{background:#5764c6;background-clip:padding-box;border-radius:.5rem;box-shadow:0 0 0 .1rem #fff;color:#fff;content:attr(data-badge);display:inline-block;-ms-transform:translate(-.1rem,-.5rem);transform:translate(-.1rem,-.5rem)}.badge[data-badge]::after{font-size:.6rem;height:18px;line-height:1;min-width:18px;padding:3px 5px;text-align:center;white-space:nowrap}.badge:not([data-badge])::after,.badge[data-badge=""]::after{height:6px;min-width:6px;padding:0;width:6px}.badge.btn::after{position:absolute;right:0;top:0;-ms-transform:translate(50%,-50%);transform:translate(50%,-50%)}.badge.avatar::after{position:absolute;right:14.64%;top:14.64%;-ms-transform:translate(50%,-50%);transform:translate(50%,-50%);z-index:100}.badge.avatar-xs::after{content:"";height:.4rem;min-width:.4rem;padding:0;width:.4rem}.breadcrumb{list-style:none;margin:.2rem 0;padding:.2rem 0}.breadcrumb .breadcrumb-item{color:#727e96;display:inline-block;margin:0;padding:.2rem 0}.breadcrumb .breadcrumb-item:not(:last-child){margin-right:.2rem}.breadcrumb .breadcrumb-item:not(:last-child) a{color:#727e96}.breadcrumb .breadcrumb-item:not(:first-child)::before{color:#e7e9ed;content:"/";padding-right:.2rem}.bar{background:#f0f1f4;border-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-wrap:nowrap;flex-wrap:nowrap;height:.8rem;width:100%}.bar.bar-sm{height:.2rem}.bar .bar-item{background:#5764c6;color:#fff;display:block;-ms-flex-negative:0;flex-shrink:0;font-size:.6rem;height:100%;line-height:.8rem;position:relative;text-align:center;width:0}.bar .bar-item:first-child{border-bottom-left-radius:.1rem;border-top-left-radius:.1rem}.bar .bar-item:last-child{border-bottom-right-radius:.1rem;border-top-right-radius:.1rem;-ms-flex-negative:1;flex-shrink:1}.bar-slider{height:.1rem;margin:.4rem 0;position:relative}.bar-slider .bar-item{left:0;padding:0;position:absolute}.bar-slider .bar-item:not(:last-child):first-child{background:#f0f1f4;z-index:1}.bar-slider .bar-slider-btn{background:#5764c6;border:0;border-radius:50%;height:.6rem;padding:0;position:absolute;right:0;top:50%;-ms-transform:translate(50%,-50%);transform:translate(50%,-50%);width:.6rem}.bar-slider .bar-slider-btn:active{box-shadow:0 0 0 .1rem #5764c6}.card{background:#fff;border:.05rem solid #e7e9ed;border-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column}.card .card-body,.card .card-footer,.card .card-header{padding:.8rem;padding-bottom:0}.card .card-body:last-child,.card .card-footer:last-child,.card .card-header:last-child{padding-bottom:.8rem}.card .card-image{padding-top:.8rem}.card .card-image:first-child{padding-top:0}.card .card-image:first-child img{border-top-left-radius:.1rem;border-top-right-radius:.1rem}.card .card-image:last-child img{border-bottom-left-radius:.1rem;border-bottom-right-radius:.1rem}.chip{align-items:center;background:#f0f1f4;border-radius:5rem;color:#727e96;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;height:1.2rem;margin:.1rem;max-width:100%;padding:.1rem .5rem;text-decoration:none;vertical-align:middle}.chip.active{background:#5764c6;color:#fff}.chip .avatar{margin-left:-.5rem;margin-right:.2rem}.dropdown{display:inline-block;position:relative}.dropdown .menu{animation:slide-down .15s ease 1;display:none;left:0;max-height:50vh;overflow-y:auto;position:absolute;top:100%}.dropdown.dropdown-right .menu{left:auto;right:0}.dropdown .dropdown-toggle:focus+.menu,.dropdown .menu:hover,.dropdown.active .menu{display:block}.dropdown .btn-group .dropdown-toggle:nth-last-child(2){border-bottom-right-radius:.1rem;border-top-right-radius:.1rem}.menu{background:#fff;border-radius:.1rem;box-shadow:0 .05rem .2rem rgba(69,77,93,.3);list-style:none;margin:0;min-width:180px;padding:.4rem;-ms-transform:translateY(.2rem);transform:translateY(.2rem);z-index:100}.menu.menu-nav{background:0 0;box-shadow:none}.menu .menu-item{margin-top:0;padding:0 .4rem;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.menu .menu-item>a{border-radius:.1rem;color:inherit;display:block;margin:0 -.4rem;padding:.2rem .4rem;text-decoration:none}.menu .menu-item>a:focus,.menu .menu-item>a:hover{background:#eff1fa;color:#5764c6}.menu .menu-item>a.active,.menu .menu-item>a:active{background:#eff1fa;color:#5764c6}.menu .menu-item+.menu-item{margin-top:.2rem}.menu .menu-badge{float:right;padding:.2rem 0}.menu .menu-badge .btn{margin-top:-.1rem}.modal{align-items:center;bottom:0;display:none;-ms-flex-align:center;-ms-flex-pack:center;justify-content:center;left:0;opacity:0;overflow:hidden;padding:.4rem;position:fixed;right:0;top:0}.modal.active,.modal:target{display:flex;display:-ms-flexbox;opacity:1;z-index:400}.modal.active .modal-overlay,.modal:target .modal-overlay{background:rgba(248,249,250,.75);bottom:0;cursor:default;display:block;left:0;position:absolute;right:0;top:0}.modal.active .modal-container,.modal:target .modal-container{animation:slide-down .2s ease 1;max-width:640px;z-index:1}.modal.modal-sm .modal-container{max-width:320px}.modal-container{background:#fff;border-radius:.1rem;box-shadow:0 .2rem .5rem rgba(69,77,93,.3);display:block;padding:0;text-align:left}.modal-container .modal-header{padding:.8rem}.modal-container .modal-header .modal-title{margin:0}.modal-container .modal-body{max-height:50vh;overflow-y:auto;padding:.8rem;position:relative}.modal-container .modal-footer{padding:.8rem;text-align:right}.nav{display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column;list-style:none;margin:.2rem 0}.nav .nav-item a{color:#727e96;padding:.2rem .4rem;text-decoration:none}.nav .nav-item a:focus,.nav .nav-item a:hover{color:#5764c6}.nav .nav-item.active>a{color:#5b657a;font-weight:700}.nav .nav-item.active>a:focus,.nav .nav-item.active>a:hover{color:#5764c6}.nav .nav{margin-bottom:.4rem;margin-left:.8rem}.pagination{display:flex;display:-ms-flexbox;list-style:none;margin:.2rem 0;padding:.2rem 0}.pagination .page-item{margin:.2rem .05rem}.pagination .page-item span{display:inline-block;padding:.2rem .2rem}.pagination .page-item a{border-radius:.1rem;color:#727e96;display:inline-block;padding:.2rem .4rem;text-decoration:none}.pagination .page-item a:focus,.pagination .page-item a:hover{color:#5764c6}.pagination .page-item.disabled a{cursor:default;opacity:.5;pointer-events:none}.pagination .page-item.active a{background:#5764c6;color:#fff}.pagination .page-item.page-next,.pagination .page-item.page-prev{-ms-flex:1 0 50%;flex:1 0 50%}.pagination .page-item.page-next{text-align:right}.pagination .page-item .page-item-title{margin:0}.pagination .page-item .page-item-subtitle{margin:0;opacity:.5}.popover{display:inline-block;position:relative}.popover .popover-container{content:attr(data-tooltip);left:50%;opacity:0;padding:.4rem;position:absolute;top:0;-ms-transform:translate(-50%,-50%) scale(0);transform:translate(-50%,-50%) scale(0);transition:transform .2s ease;width:320px;z-index:400}.popover .popover-container:hover,.popover :focus+.popover-container,.popover:hover .popover-container{display:block;opacity:1;-ms-transform:translate(-50%,-100%) scale(1);transform:translate(-50%,-100%) scale(1)}.popover.popover-right .popover-container{left:100%;top:50%}.popover.popover-right .popover-container:hover,.popover.popover-right :focus+.popover-container,.popover.popover-right:hover .popover-container{-ms-transform:translate(0,-50%) scale(1);transform:translate(0,-50%) scale(1)}.popover.popover-bottom .popover-container{left:50%;top:100%}.popover.popover-bottom .popover-container:hover,.popover.popover-bottom :focus+.popover-container,.popover.popover-bottom:hover .popover-container{-ms-transform:translate(-50%,0) scale(1);transform:translate(-50%,0) scale(1)}.popover.popover-left .popover-container{left:0;top:50%}.popover.popover-left .popover-container:hover,.popover.popover-left :focus+.popover-container,.popover.popover-left:hover .popover-container{-ms-transform:translate(-100%,-50%) scale(1);transform:translate(-100%,-50%) scale(1)}.popover .card{border:0;box-shadow:0 .2rem .5rem rgba(69,77,93,.3)}.step{display:flex;display:-ms-flexbox;-ms-flex-wrap:nowrap;flex-wrap:nowrap;list-style:none;margin:.2rem 0;width:100%}.step .step-item{-ms-flex:1 1 0;flex:1 1 0;margin-top:0;min-height:20px;position:relative;text-align:center}.step .step-item:not(:first-child)::before{background:#5764c6;content:"";height:2px;left:-50%;position:absolute;top:9px;width:100%}.step .step-item a{color:#acb3c2;display:inline-block;padding:20px 10px 0;text-decoration:none}.step .step-item a::before{background:#5764c6;border:.1rem solid #fff;border-radius:50%;content:"";display:block;height:.6rem;left:50%;position:absolute;top:.2rem;-ms-transform:translateX(-50%);transform:translateX(-50%);width:.6rem;z-index:1}.step .step-item.active a::before{background:#fff;border:.1rem solid #5764c6}.step .step-item.active~.step-item::before{background:#e7e9ed}.step .step-item.active~.step-item a::before{background:#e7e9ed}.tab{align-items:center;border-bottom:.05rem solid #e7e9ed;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-wrap:wrap;flex-wrap:wrap;list-style:none;margin:.2rem 0 .15rem 0}.tab .tab-item{margin-top:0}.tab .tab-item.tab-action{-ms-flex:1 0 auto;flex:1 0 auto;text-align:right}.tab .tab-item a{border-bottom:.1rem solid transparent;color:inherit;display:block;margin:0 .4rem 0 0;padding:.4rem .2rem .3rem .2rem;text-decoration:none}.tab .tab-item a:focus,.tab .tab-item a:hover{color:#5764c6}.tab .tab-item a.active,.tab .tab-item.active a{border-bottom-color:#5764c6;color:#5764c6}.tab.tab-block .tab-item{-ms-flex:1 0 0;flex:1 0 0;text-align:center}.tab.tab-block .tab-item a{margin:0}.tab.tab-block .tab-item .badge[data-badge]::after{position:absolute;right:-4px;top:-4px;-ms-transform:translate(0,0);transform:translate(0,0)}.tab:not(.tab-block) .badge{padding-right:2px}.tile{align-content:space-between;align-items:flex-start;display:flex;display:-ms-flexbox;-ms-flex-align:start;-ms-flex-line-pack:justify}.tile .tile-action,.tile .tile-icon{-ms-flex:0 0 auto;flex:0 0 auto}.tile .tile-content{-ms-flex:1 1 auto;flex:1 1 auto}.tile .tile-content:not(:first-child){padding-left:.4rem}.tile .tile-content:not(:last-child){padding-right:.4rem}.tile .tile-subtitle,.tile .tile-title{line-height:1rem}.tile.tile-centered{align-items:center;-ms-flex-align:center}.tile.tile-centered .tile-content{overflow:hidden}.tile.tile-centered .tile-subtitle,.tile.tile-centered .tile-title{margin-bottom:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.toast{background:rgba(69,77,93,.9);border:.05rem solid #454d5d;border-color:#454d5d;border-radius:.1rem;color:#fff;display:block;padding:.4rem;width:100%}.toast.toast-primary{background:rgba(87,100,198,.9);border-color:#5764c6}.toast.toast-success{background:rgba(50,182,67,.9);border-color:#32b643}.toast.toast-warning{background:rgba(255,183,0,.9);border-color:#ffb700}.toast.toast-error{background:rgba(232,86,0,.9);border-color:#e85600}.toast a{color:#fff;text-decoration:underline}.toast a.active,.toast a:active,.toast a:focus,.toast a:hover{opacity:.75}.toast .btn-clear{margin:2px -2px 2px 4px}.tooltip{position:relative}.tooltip::after{background:rgba(69,77,93,.9);border-radius:.1rem;bottom:100%;color:#fff;content:attr(data-tooltip);display:block;font-size:.6rem;left:50%;max-width:320px;opacity:0;overflow:hidden;padding:.2rem .4rem;pointer-events:none;position:absolute;text-overflow:ellipsis;-ms-transform:translate(-50%,.4rem);transform:translate(-50%,.4rem);transition:all .2s ease;white-space:nowrap;z-index:300}.tooltip:focus::after,.tooltip:hover::after{opacity:1;-ms-transform:translate(-50%,-.2rem);transform:translate(-50%,-.2rem)}.tooltip.disabled,.tooltip[disabled]{pointer-events:auto}.tooltip.tooltip-right::after{bottom:50%;left:100%;-ms-transform:translate(-.2rem,50%);transform:translate(-.2rem,50%)}.tooltip.tooltip-right:focus::after,.tooltip.tooltip-right:hover::after{-ms-transform:translate(.2rem,50%);transform:translate(.2rem,50%)}.tooltip.tooltip-bottom::after{bottom:auto;top:100%;-ms-transform:translate(-50%,-.4rem);transform:translate(-50%,-.4rem)}.tooltip.tooltip-bottom:focus::after,.tooltip.tooltip-bottom:hover::after{-ms-transform:translate(-50%,.2rem);transform:translate(-50%,.2rem)}.tooltip.tooltip-left::after{bottom:50%;left:auto;right:100%;-ms-transform:translate(.4rem,50%);transform:translate(.4rem,50%)}.tooltip.tooltip-left:focus::after,.tooltip.tooltip-left:hover::after{-ms-transform:translate(-.2rem,50%);transform:translate(-.2rem,50%)}@keyframes loading{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes slide-down{0%{opacity:0;transform:translateY(-1.6rem)}100%{opacity:1;transform:translateY(0)}}.text-primary{color:#5764c6}a.text-primary:focus,a.text-primary:hover{color:#4452c0}.text-secondary{color:#e4e6f6}a.text-secondary:focus,a.text-secondary:hover{color:#d1d4ef}.text-gray{color:#acb3c2}a.text-gray:focus,a.text-gray:hover{color:#9ea6b7}.text-light{color:#fff}a.text-light:focus,a.text-light:hover{color:#f2f2f2}.text-success{color:#32b643}a.text-success:focus,a.text-success:hover{color:#2da23c}.text-warning{color:#ffb700}a.text-warning:focus,a.text-warning:hover{color:#e6a500}.text-error{color:#e85600}a.text-error:focus,a.text-error:hover{color:#cf4d00}.bg-primary{background:#5764c6}.bg-secondary{background:#eff1fa}.bg-dark{background:#454d5d}.bg-gray{background:#f8f9fa}.bg-success{background:#32b643}.bg-warning{background:#ffb700}.bg-error{background:#e85600}.d-block{display:block}.d-inline{display:inline}.d-inline-block{display:inline-block}.d-flex{display:flex;display:-ms-flexbox}.d-inline-flex{display:inline-flex;display:-ms-inline-flexbox}.d-none,.hide{display:none!important}.d-visible{visibility:visible}.d-invisible{visibility:hidden}.text-hide{background:0 0;border:0;color:transparent;font-size:0;line-height:0;text-shadow:none}.text-assistive{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.hand{cursor:pointer}.divider,.divider-vert{display:block;position:relative}.divider-vert[data-content]::after,.divider[data-content]::after{background:#fff;color:#acb3c2;content:attr(data-content);display:inline-block;font-size:.6rem;padding:0 .4rem;-ms-transform:translateY(-.55rem);transform:translateY(-.55rem)}.divider{border-top:.05rem solid #e7e9ed;height:.05rem;margin:.4rem 0}.divider[data-content]{margin:.8rem 0}.divider-vert{display:block;padding:.8rem}.divider-vert::before{border-left:.05rem solid #e7e9ed;bottom:.4rem;content:"";display:block;left:50%;position:absolute;top:.4rem;-ms-transform:translateX(-50%);transform:translateX(-50%)}.divider-vert[data-content]::after{left:50%;padding:.2rem 0;position:absolute;top:50%;-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.loading{color:transparent!important;min-height:.8rem;pointer-events:none;position:relative}.loading::after{animation:loading .5s infinite linear;border:.1rem solid #5764c6;border-radius:50%;border-right-color:transparent;border-top-color:transparent;content:"";display:block;height:.8rem;left:50%;margin-left:-.4rem;margin-top:-.4rem;position:absolute;top:50%;width:.8rem;z-index:1}.loading.loading-lg{min-height:2rem}.loading.loading-lg::after{height:1.6rem;margin-left:-.8rem;margin-top:-.8rem;width:1.6rem}.clearfix::after,.container::after{clear:both;content:"";display:table}.float-left{float:left!important}.float-right{float:right!important}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.centered{display:block;float:none;margin-left:auto;margin-right:auto}.m-0{margin:0}.mb-0{margin-bottom:0}.ml-0{margin-left:0}.mr-0{margin-right:0}.mt-0{margin-top:0}.mx-0{margin-left:0;margin-right:0}.my-0{margin-bottom:0;margin-top:0}.m-1{margin:.2rem}.mb-1{margin-bottom:.2rem}.ml-1{margin-left:.2rem}.mr-1{margin-right:.2rem}.mt-1{margin-top:.2rem}.mx-1{margin-left:.2rem;margin-right:.2rem}.my-1{margin-bottom:.2rem;margin-top:.2rem}.m-2{margin:.4rem}.mb-2{margin-bottom:.4rem}.ml-2{margin-left:.4rem}.mr-2{margin-right:.4rem}.mt-2{margin-top:.4rem}.mx-2{margin-left:.4rem;margin-right:.4rem}.my-2{margin-bottom:.4rem;margin-top:.4rem}.p-0{padding:0}.pb-0{padding-bottom:0}.pl-0{padding-left:0}.pr-0{padding-right:0}.pt-0{padding-top:0}.px-0{padding-left:0;padding-right:0}.py-0{padding-bottom:0;padding-top:0}.p-1{padding:.2rem}.pb-1{padding-bottom:.2rem}.pl-1{padding-left:.2rem}.pr-1{padding-right:.2rem}.pt-1{padding-top:.2rem}.px-1{padding-left:.2rem;padding-right:.2rem}.py-1{padding-bottom:.2rem;padding-top:.2rem}.p-2{padding:.4rem}.pb-2{padding-bottom:.4rem}.pl-2{padding-left:.4rem}.pr-2{padding-right:.4rem}.pt-2{padding-top:.4rem}.px-2{padding-left:.4rem;padding-right:.4rem}.py-2{padding-bottom:.4rem;padding-top:.4rem}.rounded{border-radius:.1rem}.circle{border-radius:50%}.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}.text-justify{text-align:justify}.text-lowercase{text-transform:lowercase}.text-uppercase{text-transform:uppercase}.text-capitalize{text-transform:capitalize}.text-normal{font-weight:400}.text-bold{font-weight:700}.text-italic{font-style:italic}.text-large{font-size:1.2em}.text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-clip{overflow:hidden;text-overflow:clip;white-space:nowrap}.text-break{-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;word-break:break-word;word-wrap:break-word}
\ No newline at end of file
+/*! Spectre.css | MIT License | github.com/picturepan2/spectre */html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:"SF Mono","Segoe UI Mono","Roboto Mono",Menlo,Courier,monospace;font-size:1em}dfn{font-style:italic}small{font-size:80%;font-weight:400}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}fieldset{border:0;margin:0;padding:0}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}*,::after,::before{box-sizing:inherit}html{box-sizing:border-box;font-size:20px;line-height:1.428571429;-webkit-tap-highlight-color:transparent}body{background:#fff;color:#50596c;font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;font-size:.7rem;overflow-x:hidden;text-rendering:optimizeLegibility}a{color:#5764c6;outline:0;text-decoration:none}a:focus{box-shadow:0 0 0 .1rem rgba(87,100,198,.2)}a.active,a:active,a:focus,a:hover{color:#4452c0;text-decoration:underline}h1,h2,h3,h4,h5,h6{color:inherit;font-weight:500;line-height:1.2;margin-bottom:.25em;margin-top:0}.h1,.h2,.h3,.h4,.h5,.h6{font-weight:500}.h1,h1{font-size:2rem}.h2,h2{font-size:1.6rem}.h3,h3{font-size:1.4rem}.h4,h4{font-size:1.2rem}.h5,h5{font-size:1rem}.h6,h6{font-size:.8rem}p{line-height:1.2rem;margin:0 0 .8rem}a,ins,u{-webkit-text-decoration-skip:ink edges;text-decoration-skip:ink edges}abbr[title]{border-bottom:.05rem dotted;cursor:help;text-decoration:none}kbd{background:#454d5d;border-radius:.1rem;color:#fff;font-size:.65rem;line-height:1;padding:.15rem}mark{background:#ffe9b3;border-radius:.1rem;color:#50596c;padding:.05rem}blockquote{border-left:.1rem solid #e7e9ed;margin-left:0;padding:.4rem .8rem}blockquote p:last-child{margin-bottom:0}ol,ul{margin:.8rem 0 .8rem .8rem;padding:0}ol ol,ol ul,ul ol,ul ul{margin:.8rem 0 .8rem .8rem}ol li,ul li{margin-top:.4rem}ul{list-style:disc inside}ul ul{list-style-type:circle}ol{list-style:decimal inside}ol ol{list-style-type:lower-alpha}dl dt{font-weight:700}dl dd{margin:.4rem 0 .8rem 0}:lang(zh){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",sans-serif}:lang(ja){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Hiragino Sans","Hiragino Kaku Gothic Pro","Yu Gothic",YuGothic,Meiryo,"Helvetica Neue",sans-serif}:lang(ko){font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Malgun Gothic","Helvetica Neue",sans-serif}.cjk ins,.cjk u,:lang(ja) ins,:lang(ja) u,:lang(zh) ins,:lang(zh) u{border-bottom:.05rem solid;text-decoration:none}.cjk del+del,.cjk del+s,.cjk ins+ins,.cjk ins+u,.cjk s+del,.cjk s+s,.cjk u+ins,.cjk u+u,:lang(ja) del+del,:lang(ja) del+s,:lang(ja) ins+ins,:lang(ja) ins+u,:lang(ja) s+del,:lang(ja) s+s,:lang(ja) u+ins,:lang(ja) u+u,:lang(zh) del+del,:lang(zh) del+s,:lang(zh) ins+ins,:lang(zh) ins+u,:lang(zh) s+del,:lang(zh) s+s,:lang(zh) u+ins,:lang(zh) u+u{margin-left:.125em}.table{border-collapse:collapse;border-spacing:0;text-align:left;width:100%}.table.table-striped tbody tr:nth-of-type(odd){background:#f8f9fa}.table.table-hover tbody tr:hover{background:#f0f1f4}.table tbody tr.active,.table.table-striped tbody tr.active{background:#f0f1f4}.table td,.table th{border-bottom:.05rem solid #e7e9ed;padding:.6rem .4rem}.table th{border-bottom-width:.1rem}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;border:.05rem solid #5764c6;border-radius:.1rem;color:#5764c6;cursor:pointer;display:inline-block;font-size:.7rem;height:1.6rem;line-height:1rem;outline:0;padding:.25rem .4rem;text-align:center;text-decoration:none;transition:all .2s ease;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap}.btn:focus{box-shadow:0 0 0 .1rem rgba(87,100,198,.2)}.btn:focus,.btn:hover{background:#eff1fa;border-color:#4c59c2;text-decoration:none}.btn.active,.btn:active{background:#4c59c2;border-color:#3e4cb6;color:#fff;text-decoration:none}.btn.active.loading::after,.btn:active.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.disabled,.btn:disabled,.btn[disabled]{cursor:default;opacity:.5;pointer-events:none}.btn.btn-primary{background:#5764c6;border-color:#4c59c2;color:#fff}.btn.btn-primary:focus,.btn.btn-primary:hover{background:#4452c0;border-color:#3e4cb6;color:#fff}.btn.btn-primary.active,.btn.btn-primary:active{background:#3f4eba;border-color:#3b49af;color:#fff}.btn.btn-primary.loading::after{border-bottom-color:#fff;border-left-color:#fff}.btn.btn-link{background:0 0;border-color:transparent;color:#5764c6}.btn.btn-link.active,.btn.btn-link:active,.btn.btn-link:focus,.btn.btn-link:hover{color:#4452c0}.btn.btn-sm{font-size:.6rem;height:1.2rem;padding:.05rem .3rem}.btn.btn-lg{font-size:.8rem;height:2rem;padding:.45rem .6rem}.btn.btn-block{display:block;width:100%}.btn.btn-action{padding-left:0;padding-right:0;width:1.6rem}.btn.btn-action.btn-sm{width:1.2rem}.btn.btn-action.btn-lg{width:2rem}.btn.btn-clear{background:0 0;border:0;color:currentColor;height:.8rem;line-height:.8rem;margin-left:.2rem;margin-right:-2px;opacity:.45;padding:0 2px;text-decoration:none;width:.8rem}.btn.btn-clear:hover{opacity:.85}.btn.btn-clear::before{content:"\2715"}.btn-group{display:inline-flex;display:-ms-inline-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap}.btn-group .btn{-ms-flex:1 0 auto;flex:1 0 auto}.btn-group .btn:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.btn-group .btn:not(:first-child):not(:last-child){border-radius:0;margin-left:-.05rem}.btn-group .btn:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-.05rem}.btn-group .btn.active,.btn-group .btn:active,.btn-group .btn:focus,.btn-group .btn:hover{z-index:1}.btn-group.btn-group-block{display:flex;display:-ms-flexbox}.btn-group.btn-group-block .btn{-ms-flex:1 0 0;flex:1 0 0}.form-group:not(:last-child){margin-bottom:.4rem}fieldset{margin-bottom:.8rem}legend{font-size:.8rem;font-weight:500;margin-bottom:.8rem}.form-label{display:block;padding:.3rem 0}.form-label.label-sm{padding:.1rem 0}.form-label.label-lg{padding:.5rem 0}.form-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff;background-image:none;border:.05rem solid #caced7;border-radius:.1rem;color:#50596c;display:block;font-size:.7rem;height:1.6rem;line-height:1rem;max-width:100%;outline:0;padding:.25rem .4rem;position:relative;transition:all .2s ease;width:100%}.form-input:focus{border-color:#5764c6;box-shadow:0 0 0 .1rem rgba(87,100,198,.2)}.form-input::-webkit-input-placeholder{color:#acb3c2}.form-input:-ms-input-placeholder{color:#acb3c2}.form-input::placeholder{color:#acb3c2}.form-input.input-sm{font-size:.6rem;height:1.2rem;padding:.05rem .4rem}.form-input.input-lg{font-size:.8rem;height:2rem;padding:.45rem .4rem}.form-input.input-inline{display:inline-block;vertical-align:middle;width:auto}.form-input[type=file]{height:auto}textarea.form-input{height:auto}.form-input-hint{color:#acb3c2;font-size:.6rem;margin-top:.2rem}.has-success .form-input-hint,.is-success+.form-input-hint{color:#32b643}.has-error .form-input-hint,.is-error+.form-input-hint{color:#e85600}.form-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:.05rem solid #caced7;border-radius:.1rem;color:inherit;font-size:.7rem;height:1.6rem;line-height:1rem;outline:0;padding:.25rem .4rem;vertical-align:middle;width:100%}.form-select[multiple],.form-select[size]{height:auto}.form-select[multiple] option,.form-select[size] option{padding:.1rem .2rem}.form-select:not([multiple]):not([size]){background:#fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23667189' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .35rem center/.4rem .5rem;padding-right:1.1rem}.form-select:focus{border-color:#5764c6;box-shadow:0 0 0 .1rem rgba(87,100,198,.2)}.form-select::-ms-expand{display:none}.form-select.select-sm{font-size:.6rem;height:1.2rem;padding:.05rem 1.1rem .05rem .4rem}.form-select.select-lg{font-size:.8rem;height:2rem;padding:.45rem 1.1rem .45rem .4rem}.has-icon-left,.has-icon-right{position:relative}.has-icon-left .form-icon,.has-icon-right .form-icon{height:.7rem;margin:0 .25rem;position:absolute;top:50%;transform:translateY(-50%);width:.7rem}.has-icon-left .form-icon{left:.05rem}.has-icon-left .form-input{padding-left:1.2rem}.has-icon-right .form-icon{right:.05rem}.has-icon-right .form-input{padding-right:1.2rem}.form-checkbox,.form-radio,.form-switch{display:inline-block;line-height:1rem;padding:.1rem 1.1rem;position:relative}.form-checkbox input,.form-radio input,.form-switch input{clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;position:absolute;width:1px}.form-checkbox input:focus+.form-icon,.form-radio input:focus+.form-icon,.form-switch input:focus+.form-icon{border-color:#5764c6;box-shadow:0 0 0 .1rem rgba(87,100,198,.2)}.form-checkbox input:checked+.form-icon,.form-radio input:checked+.form-icon,.form-switch input:checked+.form-icon{background:#5764c6;border-color:#5764c6}.form-checkbox .form-icon,.form-radio .form-icon,.form-switch .form-icon{border:.05rem solid #caced7;cursor:pointer;display:inline-block;position:absolute;transition:all .2s ease}.form-checkbox .form-icon,.form-radio .form-icon{background:#fff;height:.7rem;left:0;top:.25rem;width:.7rem}.form-checkbox input:active+.form-icon,.form-radio input:active+.form-icon{background:#f0f1f4}.form-checkbox .form-icon{border-radius:.1rem}.form-checkbox input:checked+.form-icon::before{background-clip:padding-box;border:.1rem solid #fff;border-left-width:0;border-top-width:0;content:"";height:10px;left:50%;margin-left:-3px;margin-top:-6px;position:absolute;top:50%;transform:rotate(45deg);width:6px}.form-checkbox input:indeterminate+.form-icon{background:#5764c6;border-color:#5764c6}.form-checkbox input:indeterminate+.form-icon::before{background:#fff;content:"";height:2px;left:50%;margin-left:-5px;margin-top:-1px;position:absolute;top:50%;width:10px}.form-radio .form-icon{border-radius:.35rem}.form-radio input:checked+.form-icon::before{background:#fff;border-radius:.1rem;content:"";height:4px;left:50%;margin-left:-2px;margin-top:-2px;position:absolute;top:50%;width:4px}.form-switch{padding-left:2rem}.form-switch .form-icon{background:#e7e9ed;background-clip:padding-box;border-radius:.45rem;height:.9rem;left:0;top:.15rem;width:1.6rem}.form-switch .form-icon::before{background:#fff;border-radius:.4rem;content:"";display:block;height:.8rem;left:0;position:absolute;top:0;transition:all .2s ease;width:.8rem}.form-switch input:checked+.form-icon::before{left:14px}.form-switch input:active+.form-icon::before{background:#f8f9fa}.input-group{display:flex;display:-ms-flexbox}.input-group .input-group-addon{background:#f8f9fa;border:.05rem solid #caced7;border-radius:.1rem;line-height:1rem;padding:.25rem .4rem}.input-group .input-group-addon.addon-sm{font-size:.6rem;padding:.05rem .4rem}.input-group .input-group-addon.addon-lg{font-size:.8rem;padding:.45rem .4rem}.input-group .form-input,.input-group .form-select{-ms-flex:1 1 auto;flex:1 1 auto}.input-group .input-group-btn{z-index:1}.input-group .form-input:first-child:not(:last-child),.input-group .form-select:first-child:not(:last-child),.input-group .input-group-addon:first-child:not(:last-child),.input-group .input-group-btn:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.input-group .form-input:not(:first-child):not(:last-child),.input-group .form-select:not(:first-child):not(:last-child),.input-group .input-group-addon:not(:first-child):not(:last-child),.input-group .input-group-btn:not(:first-child):not(:last-child){border-radius:0;margin-left:-.05rem}.input-group .form-input:last-child:not(:first-child),.input-group .form-select:last-child:not(:first-child),.input-group .input-group-addon:last-child:not(:first-child),.input-group .input-group-btn:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0;margin-left:-.05rem}.input-group .form-input:focus,.input-group .form-select:focus,.input-group .input-group-addon:focus,.input-group .input-group-btn:focus{z-index:2}.input-group .form-select{width:auto}.input-group.input-inline{display:inline-flex;display:-ms-inline-flexbox}.form-input.is-success,.form-select.is-success,.has-success .form-input,.has-success .form-select{border-color:#32b643}.form-input.is-success:focus,.form-select.is-success:focus,.has-success .form-input:focus,.has-success .form-select:focus{box-shadow:0 0 0 .1rem rgba(50,182,67,.2)}.form-input.is-error,.form-select.is-error,.has-error .form-input,.has-error .form-select{border-color:#e85600}.form-input.is-error:focus,.form-select.is-error:focus,.has-error .form-input:focus,.has-error .form-select:focus{box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-checkbox.is-error .form-icon,.form-radio.is-error .form-icon,.form-switch.is-error .form-icon,.has-error .form-checkbox .form-icon,.has-error .form-radio .form-icon,.has-error .form-switch .form-icon{border-color:#e85600}.form-checkbox.is-error input:checked+.form-icon,.form-radio.is-error input:checked+.form-icon,.form-switch.is-error input:checked+.form-icon,.has-error .form-checkbox input:checked+.form-icon,.has-error .form-radio input:checked+.form-icon,.has-error .form-switch input:checked+.form-icon{background:#e85600;border-color:#e85600}.form-checkbox.is-error input:focus+.form-icon,.form-radio.is-error input:focus+.form-icon,.form-switch.is-error input:focus+.form-icon,.has-error .form-checkbox input:focus+.form-icon,.has-error .form-radio input:focus+.form-icon,.has-error .form-switch input:focus+.form-icon{border-color:#e85600;box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-input:not(:placeholder-shown):invalid{border-color:#e85600}.form-input:not(:placeholder-shown):invalid:focus{box-shadow:0 0 0 .1rem rgba(232,86,0,.2)}.form-input:not(:placeholder-shown):invalid+.form-input-hint{color:#e85600}.form-input.disabled,.form-input:disabled,.form-select.disabled,.form-select:disabled{background-color:#f0f1f4;cursor:not-allowed;opacity:.5}.form-input[readonly]{background-color:#f8f9fa}input.disabled+.form-icon,input:disabled+.form-icon{background:#f0f1f4;cursor:not-allowed;opacity:.5}.form-switch input.disabled+.form-icon::before,.form-switch input:disabled+.form-icon::before{background:#fff}.form-horizontal{padding:.4rem}.form-horizontal .form-group{display:flex;display:-ms-flexbox}.form-horizontal .form-checkbox,.form-horizontal .form-radio,.form-horizontal .form-switch{margin:.2rem 0}.label{background:#f8f9fa;border-radius:.1rem;color:#5b657a;display:inline-block;line-height:1;padding:.15rem}.label.label-rounded{border-radius:5rem;padding-left:.4rem;padding-right:.4rem}.label.label-primary{background:#5764c6;color:#fff}.label.label-secondary{background:#eff1fa;color:#5764c6}.label.label-success{background:#32b643;color:#fff}.label.label-warning{background:#ffb700;color:#fff}.label.label-error{background:#e85600;color:#fff}code{background:#fdf4f4;border-radius:.1rem;color:#e06870;font-size:.65rem;line-height:1;padding:.15rem}.code{border-radius:.1rem;color:#50596c;line-height:1rem;position:relative}.code::before{color:#acb3c2;content:attr(data-lang);font-size:.6rem;position:absolute;right:.4rem;top:.1rem}.code code{background:#f8f9fa;color:inherit;display:block;line-height:inherit;overflow-x:auto;padding:1rem;width:100%}.img-responsive{display:block;height:auto;max-width:100%}.img-fit-cover{object-fit:cover}.img-fit-contain{object-fit:contain}.video-responsive{display:block;overflow:hidden;padding:0;position:relative;width:100%}.video-responsive::before{content:"";display:block;padding-bottom:56.25%}.video-responsive embed,.video-responsive iframe,.video-responsive object{border:0;bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.video-responsive video{height:auto;max-width:100%;width:100%}.video-responsive-4-3::before{padding-bottom:75%}.video-responsive-1-1::before{padding-bottom:100%}.figure{margin:0 0 .4rem 0}.figure .figure-caption{color:#727e96;margin-top:.4rem}.container{margin-left:auto;margin-right:auto;padding-left:.4rem;padding-right:.4rem;width:100%}.container.grid-xl{max-width:1296px}.container.grid-lg{max-width:976px}.container.grid-md{max-width:856px}.container.grid-sm{max-width:616px}.container.grid-xs{max-width:496px}.show-lg,.show-md,.show-sm,.show-xl,.show-xs{display:none!important}.columns{display:flex;display:-ms-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:-.4rem;margin-right:-.4rem}.columns.col-gapless{margin-left:0;margin-right:0}.columns.col-gapless>.column{padding-left:0;padding-right:0}.columns.col-oneline{-ms-flex-wrap:nowrap;flex-wrap:nowrap;overflow-x:auto}.column{-ms-flex:1;flex:1;max-width:100%;padding-left:.4rem;padding-right:.4rem}.column.col-1,.column.col-10,.column.col-11,.column.col-12,.column.col-2,.column.col-3,.column.col-4,.column.col-5,.column.col-6,.column.col-7,.column.col-8,.column.col-9{-ms-flex:none;flex:none}.col-12{width:100%}.col-11{width:91.66666667%}.col-10{width:83.33333333%}.col-9{width:75%}.col-8{width:66.66666667%}.col-7{width:58.33333333%}.col-6{width:50%}.col-5{width:41.66666667%}.col-4{width:33.33333333%}.col-3{width:25%}.col-2{width:16.66666667%}.col-1{width:8.33333333%}.col-auto{-ms-flex:0 0 auto;flex:0 0 auto;max-width:none;width:auto}.col-mx-auto{margin-left:auto;margin-right:auto}.col-ml-auto{margin-left:auto}.col-mr-auto{margin-right:auto}@media (max-width:1280px){.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9{-ms-flex:none;flex:none}.col-xl-12{width:100%}.col-xl-11{width:91.66666667%}.col-xl-10{width:83.33333333%}.col-xl-9{width:75%}.col-xl-8{width:66.66666667%}.col-xl-7{width:58.33333333%}.col-xl-6{width:50%}.col-xl-5{width:41.66666667%}.col-xl-4{width:33.33333333%}.col-xl-3{width:25%}.col-xl-2{width:16.66666667%}.col-xl-1{width:8.33333333%}.hide-xl{display:none!important}.show-xl{display:block!important}}@media (max-width:960px){.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9{-ms-flex:none;flex:none}.col-lg-12{width:100%}.col-lg-11{width:91.66666667%}.col-lg-10{width:83.33333333%}.col-lg-9{width:75%}.col-lg-8{width:66.66666667%}.col-lg-7{width:58.33333333%}.col-lg-6{width:50%}.col-lg-5{width:41.66666667%}.col-lg-4{width:33.33333333%}.col-lg-3{width:25%}.col-lg-2{width:16.66666667%}.col-lg-1{width:8.33333333%}.hide-lg{display:none!important}.show-lg{display:block!important}}@media (max-width:840px){.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{-ms-flex:none;flex:none}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}.hide-md{display:none!important}.show-md{display:block!important}}@media (max-width:600px){.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9{-ms-flex:none;flex:none}.col-sm-12{width:100%}.col-sm-11{width:91.66666667%}.col-sm-10{width:83.33333333%}.col-sm-9{width:75%}.col-sm-8{width:66.66666667%}.col-sm-7{width:58.33333333%}.col-sm-6{width:50%}.col-sm-5{width:41.66666667%}.col-sm-4{width:33.33333333%}.col-sm-3{width:25%}.col-sm-2{width:16.66666667%}.col-sm-1{width:8.33333333%}.hide-sm{display:none!important}.show-sm{display:block!important}}@media (max-width:480px){.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{-ms-flex:none;flex:none}.col-xs-12{width:100%}.col-xs-11{width:91.66666667%}.col-xs-10{width:83.33333333%}.col-xs-9{width:75%}.col-xs-8{width:66.66666667%}.col-xs-7{width:58.33333333%}.col-xs-6{width:50%}.col-xs-5{width:41.66666667%}.col-xs-4{width:33.33333333%}.col-xs-3{width:25%}.col-xs-2{width:16.66666667%}.col-xs-1{width:8.33333333%}.hide-xs{display:none!important}.show-xs{display:block!important}}.navbar{align-items:stretch;display:flex;display:-ms-flexbox;-ms-flex-align:stretch;-ms-flex-pack:justify;-ms-flex-wrap:wrap;flex-wrap:wrap;justify-content:space-between}.navbar .navbar-section{align-items:center;display:flex;display:-ms-flexbox;-ms-flex:1 0 0;flex:1 0 0;-ms-flex-align:center}.navbar .navbar-section:last-child{-ms-flex-pack:end;justify-content:flex-end}.navbar .navbar-center{align-items:center;display:flex;display:-ms-flexbox;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-align:center}.navbar .navbar-brand{font-size:.8rem;font-weight:500;text-decoration:none}.accordion .accordion-item input:checked~.accordion-header .icon{transform:rotate(90deg)}.accordion .accordion-item input:checked~.accordion-body{max-height:50rem}.accordion .accordion-item .accordion-header{display:block;padding:.2rem .4rem}.accordion .accordion-item .accordion-header .icon{transition:all .2s ease}.accordion .accordion-item .accordion-body{margin-bottom:.4rem;max-height:0;overflow:hidden;transition:max-height .2s ease}.form-autocomplete{position:relative}.form-autocomplete .form-autocomplete-input{align-content:flex-start;display:flex;display:-ms-flexbox;-ms-flex-line-pack:start;-ms-flex-wrap:wrap;flex-wrap:wrap;height:auto;min-height:1.6rem;padding:.1rem}.form-autocomplete .form-autocomplete-input.is-focused{border-color:#5764c6;box-shadow:0 0 0 .1rem rgba(87,100,198,.2)}.form-autocomplete .form-autocomplete-input .form-input{border-color:transparent;box-shadow:none;display:inline-block;-ms-flex:1 0 auto;flex:1 0 auto;height:1.2rem;line-height:.8rem;margin:.1rem;width:auto}.form-autocomplete .menu{left:0;position:absolute;top:100%;width:100%}.avatar{background:#5764c6;border-radius:50%;color:rgba(255,255,255,.85);display:inline-block;font-size:.8rem;font-weight:300;height:1.6rem;line-height:1;margin:0;position:relative;vertical-align:middle;width:1.6rem}.avatar.avatar-xs{font-size:.4rem;height:.8rem;width:.8rem}.avatar.avatar-sm{font-size:.6rem;height:1.2rem;width:1.2rem}.avatar.avatar-lg{font-size:1.2rem;height:2.4rem;width:2.4rem}.avatar.avatar-xl{font-size:1.6rem;height:3.2rem;width:3.2rem}.avatar img{border-radius:50%;height:100%;position:relative;width:100%;z-index:1}.avatar .avatar-icon,.avatar .avatar-presence{background:#fff;bottom:14.64%;height:50%;padding:.1rem;position:absolute;right:14.64%;transform:translate(50%,50%);width:50%;z-index:2}.avatar .avatar-presence{background:#acb3c2;border-radius:50%;box-shadow:0 0 0 .1rem #fff;height:.5em;width:.5em}.avatar .avatar-presence.online{background:#32b643}.avatar .avatar-presence.busy{background:#e85600}.avatar .avatar-presence.away{background:#ffb700}.avatar[data-initial]::before{color:currentColor;content:attr(data-initial);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:1}.badge{position:relative;white-space:nowrap}.badge:not([data-badge])::after,.badge[data-badge]::after{background:#5764c6;background-clip:padding-box;border-radius:.5rem;box-shadow:0 0 0 .1rem #fff;color:#fff;content:attr(data-badge);display:inline-block;transform:translate(-.1rem,-.5rem)}.badge[data-badge]::after{font-size:.6rem;height:18px;line-height:1;min-width:18px;padding:3px 5px;text-align:center;white-space:nowrap}.badge:not([data-badge])::after,.badge[data-badge=""]::after{height:6px;min-width:6px;padding:0;width:6px}.badge.btn::after{position:absolute;right:0;top:0;transform:translate(50%,-50%)}.badge.avatar::after{position:absolute;right:14.64%;top:14.64%;transform:translate(50%,-50%);z-index:100}.badge.avatar-xs::after{content:"";height:.4rem;min-width:.4rem;padding:0;width:.4rem}.breadcrumb{list-style:none;margin:.2rem 0;padding:.2rem 0}.breadcrumb .breadcrumb-item{color:#727e96;display:inline-block;margin:0;padding:.2rem 0}.breadcrumb .breadcrumb-item:not(:last-child){margin-right:.2rem}.breadcrumb .breadcrumb-item:not(:last-child) a{color:#727e96}.breadcrumb .breadcrumb-item:not(:first-child)::before{color:#e7e9ed;content:"/";padding-right:.2rem}.bar{background:#f0f1f4;border-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-wrap:nowrap;flex-wrap:nowrap;height:.8rem;width:100%}.bar.bar-sm{height:.2rem}.bar .bar-item{background:#5764c6;color:#fff;display:block;-ms-flex-negative:0;flex-shrink:0;font-size:.6rem;height:100%;line-height:.8rem;position:relative;text-align:center;width:0}.bar .bar-item:first-child{border-bottom-left-radius:.1rem;border-top-left-radius:.1rem}.bar .bar-item:last-child{border-bottom-right-radius:.1rem;border-top-right-radius:.1rem;-ms-flex-negative:1;flex-shrink:1}.bar-slider{height:.1rem;margin:.4rem 0;position:relative}.bar-slider .bar-item{left:0;padding:0;position:absolute}.bar-slider .bar-item:not(:last-child):first-child{background:#f0f1f4;z-index:1}.bar-slider .bar-slider-btn{background:#5764c6;border:0;border-radius:50%;height:.6rem;padding:0;position:absolute;right:0;top:50%;transform:translate(50%,-50%);width:.6rem}.bar-slider .bar-slider-btn:active{box-shadow:0 0 0 .1rem #5764c6}.card{background:#fff;border:.05rem solid #e7e9ed;border-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column}.card .card-body,.card .card-footer,.card .card-header{padding:.8rem;padding-bottom:0}.card .card-body:last-child,.card .card-footer:last-child,.card .card-header:last-child{padding-bottom:.8rem}.card .card-image{padding-top:.8rem}.card .card-image:first-child{padding-top:0}.card .card-image:first-child img{border-top-left-radius:.1rem;border-top-right-radius:.1rem}.card .card-image:last-child img{border-bottom-left-radius:.1rem;border-bottom-right-radius:.1rem}.chip{align-items:center;background:#f0f1f4;border-radius:5rem;color:#727e96;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;height:1.2rem;margin:.1rem;max-width:100%;padding:.1rem .5rem;text-decoration:none;vertical-align:middle}.chip.active{background:#5764c6;color:#fff}.chip .avatar{margin-left:-.5rem;margin-right:.2rem}.dropdown{display:inline-block;position:relative}.dropdown .menu{animation:slide-down .15s ease 1;display:none;left:0;max-height:50vh;overflow-y:auto;position:absolute;top:100%}.dropdown.dropdown-right .menu{left:auto;right:0}.dropdown .dropdown-toggle:focus+.menu,.dropdown .menu:hover,.dropdown.active .menu{display:block}.dropdown .btn-group .dropdown-toggle:nth-last-child(2){border-bottom-right-radius:.1rem;border-top-right-radius:.1rem}.empty{background:#f8f9fa;border-radius:.1rem;color:#727e96;padding:1.6rem;text-align:center}.empty .empty-icon{margin-bottom:.8rem}.empty .empty-subtitle,.empty .empty-title{margin:.4rem auto}.empty .empty-action{margin-top:.8rem}.menu{background:#fff;border-radius:.1rem;box-shadow:0 .05rem .2rem rgba(69,77,93,.3);list-style:none;margin:0;min-width:180px;padding:.4rem;transform:translateY(.2rem);z-index:100}.menu.menu-nav{background:0 0;box-shadow:none}.menu .menu-item{margin-top:0;padding:0 .4rem;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.menu .menu-item>a{border-radius:.1rem;color:inherit;display:block;margin:0 -.4rem;padding:.2rem .4rem;text-decoration:none}.menu .menu-item>a:focus,.menu .menu-item>a:hover{background:#eff1fa;color:#5764c6}.menu .menu-item>a.active,.menu .menu-item>a:active{background:#eff1fa;color:#5764c6}.menu .menu-item+.menu-item{margin-top:.2rem}.menu .menu-badge{float:right;padding:.2rem 0}.menu .menu-badge .btn{margin-top:-.1rem}.modal{align-items:center;bottom:0;display:none;-ms-flex-align:center;-ms-flex-pack:center;justify-content:center;left:0;opacity:0;overflow:hidden;padding:.4rem;position:fixed;right:0;top:0}.modal.active,.modal:target{display:flex;display:-ms-flexbox;opacity:1;z-index:400}.modal.active .modal-overlay,.modal:target .modal-overlay{background:rgba(248,249,250,.75);bottom:0;cursor:default;display:block;left:0;position:absolute;right:0;top:0}.modal.active .modal-container,.modal:target .modal-container{animation:slide-down .2s ease 1;max-width:640px;z-index:1}.modal.modal-sm .modal-container{max-width:320px}.modal-container{background:#fff;border-radius:.1rem;box-shadow:0 .2rem .5rem rgba(69,77,93,.3);display:block;padding:0;text-align:left}.modal-container .modal-header{padding:.8rem}.modal-container .modal-header .modal-title{margin:0}.modal-container .modal-body{max-height:50vh;overflow-y:auto;padding:.8rem;position:relative}.modal-container .modal-footer{padding:.8rem;text-align:right}.nav{display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column;list-style:none;margin:.2rem 0}.nav .nav-item a{color:#727e96;padding:.2rem .4rem;text-decoration:none}.nav .nav-item a:focus,.nav .nav-item a:hover{color:#5764c6}.nav .nav-item.active>a{color:#5b657a;font-weight:700}.nav .nav-item.active>a:focus,.nav .nav-item.active>a:hover{color:#5764c6}.nav .nav{margin-bottom:.4rem;margin-left:.8rem}.pagination{display:flex;display:-ms-flexbox;list-style:none;margin:.2rem 0;padding:.2rem 0}.pagination .page-item{margin:.2rem .05rem}.pagination .page-item span{display:inline-block;padding:.2rem .2rem}.pagination .page-item a{border-radius:.1rem;color:#727e96;display:inline-block;padding:.2rem .4rem;text-decoration:none}.pagination .page-item a:focus,.pagination .page-item a:hover{color:#5764c6}.pagination .page-item.disabled a{cursor:default;opacity:.5;pointer-events:none}.pagination .page-item.active a{background:#5764c6;color:#fff}.pagination .page-item.page-next,.pagination .page-item.page-prev{-ms-flex:1 0 50%;flex:1 0 50%}.pagination .page-item.page-next{text-align:right}.pagination .page-item .page-item-title{margin:0}.pagination .page-item .page-item-subtitle{margin:0;opacity:.5}.panel{border:.05rem solid #e7e9ed;border-radius:.1rem;display:flex;display:-ms-flexbox;-ms-flex-direction:column;flex-direction:column}.panel .panel-footer,.panel .panel-header{-ms-flex:0 0 auto;flex:0 0 auto;padding:.8rem}.panel .panel-nav{-ms-flex:0 0 auto;flex:0 0 auto}.panel .panel-body{-ms-flex:1 1 auto;flex:1 1 auto;overflow-y:auto;padding:0 .8rem}.popover{display:inline-block;position:relative}.popover .popover-container{content:attr(data-tooltip);left:50%;opacity:0;padding:.4rem;position:absolute;top:0;transform:translate(-50%,-50%) scale(0);transition:transform .2s ease;width:320px;z-index:400}.popover .popover-container:hover,.popover :focus+.popover-container,.popover:hover .popover-container{display:block;opacity:1;transform:translate(-50%,-100%) scale(1)}.popover.popover-right .popover-container{left:100%;top:50%}.popover.popover-right .popover-container:hover,.popover.popover-right :focus+.popover-container,.popover.popover-right:hover .popover-container{transform:translate(0,-50%) scale(1)}.popover.popover-bottom .popover-container{left:50%;top:100%}.popover.popover-bottom .popover-container:hover,.popover.popover-bottom :focus+.popover-container,.popover.popover-bottom:hover .popover-container{transform:translate(-50%,0) scale(1)}.popover.popover-left .popover-container{left:0;top:50%}.popover.popover-left .popover-container:hover,.popover.popover-left :focus+.popover-container,.popover.popover-left:hover .popover-container{transform:translate(-100%,-50%) scale(1)}.popover .card{border:0;box-shadow:0 .2rem .5rem rgba(69,77,93,.3)}.step{display:flex;display:-ms-flexbox;-ms-flex-wrap:nowrap;flex-wrap:nowrap;list-style:none;margin:.2rem 0;width:100%}.step .step-item{-ms-flex:1 1 0;flex:1 1 0;margin-top:0;min-height:1rem;position:relative;text-align:center}.step .step-item:not(:first-child)::before{background:#5764c6;content:"";height:2px;left:-50%;position:absolute;top:9px;width:100%}.step .step-item a{color:#acb3c2;display:inline-block;padding:20px 10px 0;text-decoration:none}.step .step-item a::before{background:#5764c6;border:.1rem solid #fff;border-radius:50%;content:"";display:block;height:.6rem;left:50%;position:absolute;top:.2rem;transform:translateX(-50%);width:.6rem;z-index:1}.step .step-item.active a::before{background:#fff;border:.1rem solid #5764c6}.step .step-item.active~.step-item::before{background:#e7e9ed}.step .step-item.active~.step-item a::before{background:#e7e9ed}.tab{align-items:center;border-bottom:.05rem solid #e7e9ed;display:flex;display:-ms-flexbox;-ms-flex-align:center;-ms-flex-wrap:wrap;flex-wrap:wrap;list-style:none;margin:.2rem 0 .15rem 0}.tab .tab-item{margin-top:0}.tab .tab-item.tab-action{-ms-flex:1 0 auto;flex:1 0 auto;text-align:right}.tab .tab-item a{border-bottom:.1rem solid transparent;color:inherit;display:block;margin:0 .4rem 0 0;padding:.4rem .2rem .3rem .2rem;text-decoration:none}.tab .tab-item a:focus,.tab .tab-item a:hover{color:#5764c6}.tab .tab-item a.active,.tab .tab-item.active a{border-bottom-color:#5764c6;color:#5764c6}.tab.tab-block .tab-item{-ms-flex:1 0 0;flex:1 0 0;text-align:center}.tab.tab-block .tab-item a{margin:0}.tab.tab-block .tab-item .badge[data-badge]::after{position:absolute;right:-4px;top:-4px;transform:translate(0,0)}.tab:not(.tab-block) .badge{padding-right:2px}.tile{align-content:space-between;align-items:flex-start;display:flex;display:-ms-flexbox;-ms-flex-align:start;-ms-flex-line-pack:justify}.tile .tile-action,.tile .tile-icon{-ms-flex:0 0 auto;flex:0 0 auto}.tile .tile-content{-ms-flex:1 1 auto;flex:1 1 auto}.tile .tile-content:not(:first-child){padding-left:.4rem}.tile .tile-content:not(:last-child){padding-right:.4rem}.tile .tile-subtitle,.tile .tile-title{line-height:1rem}.tile.tile-centered{align-items:center;-ms-flex-align:center}.tile.tile-centered .tile-content{overflow:hidden}.tile.tile-centered .tile-subtitle,.tile.tile-centered .tile-title{margin-bottom:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.toast{background:rgba(69,77,93,.9);border:.05rem solid #454d5d;border-color:#454d5d;border-radius:.1rem;color:#fff;display:block;padding:.4rem;width:100%}.toast.toast-primary{background:rgba(87,100,198,.9);border-color:#5764c6}.toast.toast-success{background:rgba(50,182,67,.9);border-color:#32b643}.toast.toast-warning{background:rgba(255,183,0,.9);border-color:#ffb700}.toast.toast-error{background:rgba(232,86,0,.9);border-color:#e85600}.toast a{color:#fff;text-decoration:underline}.toast a.active,.toast a:active,.toast a:focus,.toast a:hover{opacity:.75}.toast .btn-clear{margin:2px -2px 2px 4px}.tooltip{position:relative}.tooltip::after{background:rgba(69,77,93,.9);border-radius:.1rem;bottom:100%;color:#fff;content:attr(data-tooltip);display:block;font-size:.6rem;left:50%;max-width:320px;opacity:0;overflow:hidden;padding:.2rem .4rem;pointer-events:none;position:absolute;text-overflow:ellipsis;transform:translate(-50%,.4rem);transition:all .2s ease;white-space:nowrap;z-index:300}.tooltip:focus::after,.tooltip:hover::after{opacity:1;transform:translate(-50%,-.2rem)}.tooltip.disabled,.tooltip[disabled]{pointer-events:auto}.tooltip.tooltip-right::after{bottom:50%;left:100%;transform:translate(-.2rem,50%)}.tooltip.tooltip-right:focus::after,.tooltip.tooltip-right:hover::after{transform:translate(.2rem,50%)}.tooltip.tooltip-bottom::after{bottom:auto;top:100%;transform:translate(-50%,-.4rem)}.tooltip.tooltip-bottom:focus::after,.tooltip.tooltip-bottom:hover::after{transform:translate(-50%,.2rem)}.tooltip.tooltip-left::after{bottom:50%;left:auto;right:100%;transform:translate(.4rem,50%)}.tooltip.tooltip-left:focus::after,.tooltip.tooltip-left:hover::after{transform:translate(-.2rem,50%)}@keyframes loading{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes slide-down{0%{opacity:0;transform:translateY(-1.6rem)}100%{opacity:1;transform:translateY(0)}}.text-primary{color:#5764c6}a.text-primary:focus,a.text-primary:hover{color:#4452c0}.text-secondary{color:#e4e6f6}a.text-secondary:focus,a.text-secondary:hover{color:#d1d4ef}.text-gray{color:#acb3c2}a.text-gray:focus,a.text-gray:hover{color:#9ea6b7}.text-light{color:#fff}a.text-light:focus,a.text-light:hover{color:#f2f2f2}.text-success{color:#32b643}a.text-success:focus,a.text-success:hover{color:#2da23c}.text-warning{color:#ffb700}a.text-warning:focus,a.text-warning:hover{color:#e6a500}.text-error{color:#e85600}a.text-error:focus,a.text-error:hover{color:#cf4d00}.bg-primary{background:#5764c6}.bg-secondary{background:#eff1fa}.bg-dark{background:#454d5d}.bg-gray{background:#f8f9fa}.bg-success{background:#32b643}.bg-warning{background:#ffb700}.bg-error{background:#e85600}.c-hand{cursor:pointer}.c-move{cursor:move}.c-zoom-in{cursor:zoom-in}.c-zoom-out{cursor:zoom-out}.c-not-allowed{cursor:not-allowed}.c-auto{cursor:auto}.d-block{display:block}.d-inline{display:inline}.d-inline-block{display:inline-block}.d-flex{display:flex;display:-ms-flexbox}.d-inline-flex{display:inline-flex;display:-ms-inline-flexbox}.d-hide,.d-none{display:none!important}.d-visible{visibility:visible}.d-invisible{visibility:hidden}.text-hide{background:0 0;border:0;color:transparent;font-size:0;line-height:0;text-shadow:none}.text-assistive{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.divider,.divider-vert{display:block;position:relative}.divider-vert[data-content]::after,.divider[data-content]::after{background:#fff;color:#acb3c2;content:attr(data-content);display:inline-block;font-size:.6rem;padding:0 .4rem;transform:translateY(-.55rem)}.divider{border-top:.05rem solid #e7e9ed;height:.05rem;margin:.4rem 0}.divider[data-content]{margin:.8rem 0}.divider-vert{display:block;padding:.8rem}.divider-vert::before{border-left:.05rem solid #e7e9ed;bottom:.4rem;content:"";display:block;left:50%;position:absolute;top:.4rem;transform:translateX(-50%)}.divider-vert[data-content]::after{left:50%;padding:.2rem 0;position:absolute;top:50%;transform:translate(-50%,-50%)}.loading{color:transparent!important;min-height:.8rem;pointer-events:none;position:relative}.loading::after{animation:loading .5s infinite linear;border:.1rem solid #5764c6;border-radius:50%;border-right-color:transparent;border-top-color:transparent;content:"";display:block;height:.8rem;left:50%;margin-left:-.4rem;margin-top:-.4rem;position:absolute;top:50%;width:.8rem;z-index:1}.loading.loading-lg{min-height:2rem}.loading.loading-lg::after{height:1.6rem;margin-left:-.8rem;margin-top:-.8rem;width:1.6rem}.clearfix::after,.container::after{clear:both;content:"";display:table}.float-left{float:left!important}.float-right{float:right!important}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.centered{display:block;float:none;margin-left:auto;margin-right:auto}.m-0{margin:0}.mb-0{margin-bottom:0}.ml-0{margin-left:0}.mr-0{margin-right:0}.mt-0{margin-top:0}.mx-0{margin-left:0;margin-right:0}.my-0{margin-bottom:0;margin-top:0}.m-1{margin:.2rem}.mb-1{margin-bottom:.2rem}.ml-1{margin-left:.2rem}.mr-1{margin-right:.2rem}.mt-1{margin-top:.2rem}.mx-1{margin-left:.2rem;margin-right:.2rem}.my-1{margin-bottom:.2rem;margin-top:.2rem}.m-2{margin:.4rem}.mb-2{margin-bottom:.4rem}.ml-2{margin-left:.4rem}.mr-2{margin-right:.4rem}.mt-2{margin-top:.4rem}.mx-2{margin-left:.4rem;margin-right:.4rem}.my-2{margin-bottom:.4rem;margin-top:.4rem}.p-0{padding:0}.pb-0{padding-bottom:0}.pl-0{padding-left:0}.pr-0{padding-right:0}.pt-0{padding-top:0}.px-0{padding-left:0;padding-right:0}.py-0{padding-bottom:0;padding-top:0}.p-1{padding:.2rem}.pb-1{padding-bottom:.2rem}.pl-1{padding-left:.2rem}.pr-1{padding-right:.2rem}.pt-1{padding-top:.2rem}.px-1{padding-left:.2rem;padding-right:.2rem}.py-1{padding-bottom:.2rem;padding-top:.2rem}.p-2{padding:.4rem}.pb-2{padding-bottom:.4rem}.pl-2{padding-left:.4rem}.pr-2{padding-right:.4rem}.pt-2{padding-top:.4rem}.px-2{padding-left:.4rem;padding-right:.4rem}.py-2{padding-bottom:.4rem;padding-top:.4rem}.rounded{border-radius:.1rem}.circle{border-radius:50%}.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}.text-justify{text-align:justify}.text-lowercase{text-transform:lowercase}.text-uppercase{text-transform:uppercase}.text-capitalize{text-transform:capitalize}.text-normal{font-weight:400}.text-bold{font-weight:700}.text-italic{font-style:italic}.text-large{font-size:1.2em}.text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-clip{overflow:hidden;text-overflow:clip;white-space:nowrap}.text-break{-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;word-break:break-word;word-wrap:break-word}
\ No newline at end of file
diff --git a/docs/elements.html b/docs/elements.html
index cfcdcd6..283174f 100644
--- a/docs/elements.html
+++ b/docs/elements.html
@@ -1,10 +1,10 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8" />
+  <meta charset="utf-8" />
   <meta name="robots" content="index, follow" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
-  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta http-equiv="x-ua-compatible" content="ie=edge" />
   <meta name="author" content="https://github.com/picturepan2/" />
   <title>Elements - Spectre.css CSS Framework</title>
   <link rel="stylesheet" href="dist/spectre.css" />
@@ -14,24 +14,18 @@
 <body>
   <div class="s-container container">
     <div class="columns">
-      <div class="s-brand">
-        <a href="index.html" class="s-logo tooltip tooltip-bottom" data-tooltip="Spectre.css CSS Framework">
-          <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework" />
-          <h2>Spectre.css</h2>
-        </a>
-        <div class="menu-btn">
-          <a href="#sidebar" class="btn btn-link btn-action"><i class="icon icon-menu"></i></a>
-        </div>
-        <div class="float-btn">
-          <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a>
-        </div>
-      </div>
       <div id="sidebar" class="s-sidebar">
+        <div class="s-brand">
+          <a href="index.html" class="s-logo">
+            <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework" />
+            <h2>Spectre.css</h2>
+          </a>
+        </div>
         <div class="s-nav">
           <div class="accordion">
             <div class="accordion-item">
               <input type="checkbox" id="docs-accordion-1" name="docs-accordion-checkbox" hidden />
-              <label class="accordion-header hand" for="docs-accordion-1">
+              <label class="accordion-header c-hand" for="docs-accordion-1">
                 Getting started
               </label>
               <div class="accordion-body">
@@ -56,7 +50,7 @@
             </div>
             <div class="accordion-item">
               <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden checked />
-              <label class="accordion-header hand" for="docs-accordion-2">
+              <label class="accordion-header c-hand" for="docs-accordion-2">
                 Elements
               </label>
               <div class="accordion-body">
@@ -90,7 +84,7 @@
             </div>
             <div class="accordion-item">
               <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden />
-              <label class="accordion-header hand" for="docs-accordion-3">
+              <label class="accordion-header c-hand" for="docs-accordion-3">
                 Layout
               </label>
               <div class="accordion-body">
@@ -109,7 +103,7 @@
             </div>
             <div class="accordion-item">
               <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden />
-              <label class="accordion-header hand" for="docs-accordion-4">
+              <label class="accordion-header c-hand" for="docs-accordion-4">
                 Components
               </label>
               <div class="accordion-body">
@@ -179,7 +173,7 @@
             </div>
             <div class="accordion-item">
               <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden />
-              <label class="accordion-header hand" for="docs-accordion-5">
+              <label class="accordion-header c-hand" for="docs-accordion-5">
                 Utilities
               </label>
               <div class="accordion-body">
@@ -188,6 +182,9 @@
                     <a href="utilities.html#colors">Colors</a>
                   </li>
                   <li class="menu-item">
+                    <a href="utilities.html#cursors">Cursors</a>
+                  </li>
+                  <li class="menu-item">
                     <a href="utilities.html#display">Display</a>
                   </li>
                   <li class="menu-item">
@@ -210,7 +207,7 @@
             </div>
             <div class="accordion-item">
               <input type="checkbox" id="docs-accordion-6" name="docs-accordion-checkbox" hidden />
-              <label class="accordion-header hand" for="docs-accordion-6">
+              <label class="accordion-header c-hand" for="docs-accordion-6">
                 Experimentals
               </label>
               <div class="accordion-body">
@@ -249,6 +246,17 @@
         </div>
       </div>
       <a href="#sidebar-close" id="sidebar-close" class="docs-nav-clear"></a>
+      <div class="s-navbar">
+        <div class="menu-btn">
+          <a href="#sidebar" class="btn btn-link btn-action"><i class="icon icon-menu"></i></a>
+        </div>
+        <a href="index.html" class="s-logo">
+          <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework" />
+        </a>
+        <div class="float-btn">
+          <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a>
+        </div>
+      </div>
 
       <div id="content" class="s-content">
         <div id="typography" class="container">
@@ -297,78 +305,78 @@
 
           <h4 id="typography-semantic-text" class="s-subtitle">Semantic text elements</h4>
           <div class="columns">
-            <div class="column col-4 col-xs-12">
+            <div class="column col-6 col-xs-12">
               <abbr title="Internationalization">I18N</abbr>
               <code class="ml-10">&lt;abbr&gt;</code>
             </div>
-            <div class="column col-4 col-xs-12">
+            <div class="column col-6 col-xs-12">
               <strong>Bold</strong>
               <code class="ml-10">&lt;strong&gt;</code> <code>&lt;b&gt;</code>
             </div>
-            <div class="column col-4 col-xs-12">
+            <div class="column col-6 col-xs-12">
               <cite>Citation</cite>
               <code class="ml-10">&lt;cite&gt;</code>
             </div>
-            <div class="column col-4 col-xs-12">
+            <div class="column col-6 col-xs-12">
               <code>Hello World!</code>
               <code class="ml-10">&lt;code&gt;</code>
             </div>
-            <div class="column col-4 col-xs-12">
+            <div class="column col-6 col-xs-12">
               <del>Deleted</del>
               <code class="ml-10">&lt;del&gt;</code>
             </div>
-            <div class="column col-4 col-xs-12">
+            <div class="column col-6 col-xs-12">
               <em>Emphasis</em>
               <code class="ml-10">&lt;em&gt;</code>
             </div>
-            <div class="column col-4 col-xs-12">
+            <div class="column col-6 col-xs-12">
               <i>Italic</i>
               <code class="ml-10">&lt;i&gt;</code>
             </div>
-            <div class="column col-4 col-xs-12">
+            <div class="column col-6 col-xs-12">
               <ins>Inserted</ins>
               <code class="ml-10">&lt;ins&gt;</code>
             </div>
-            <div class="column col-4 col-xs-12">
+            <div class="column col-6 col-xs-12">
               <kbd>Ctrl + S</kbd>
               <code class="ml-10">&lt;kbd&gt;</code>
             </div>
-            <div class="column col-4 col-xs-12">
+            <div class="column col-6 col-xs-12">
               <mark>Highlighted</mark>
               <code class="ml-10">&lt;mark&gt;</code>
             </div>
-            <div class="column col-4 col-xs-12">
+            <div class="column col-6 col-xs-12">
               <ruby>
                 漢 <rt>kan</rt>
                 字 <rt>ji</rt>
               </ruby>
               <code class="ml-10">&lt;ruby&gt;</code>
             </div>
-            <div class="column col-4 col-xs-12">
+            <div class="column col-6 col-xs-12">
               <s>Strikethrough</s>
               <code class="ml-10">&lt;s&gt;</code>
             </div>
-            <div class="column col-4 col-xs-12">
+            <div class="column col-6 col-xs-12">
               <samp>Sample</samp>
               <code class="ml-10">&lt;samp&gt;</code>
             </div>
-            <div class="column col-4 col-xs-12">
+            <div class="column col-6 col-xs-12">
               Text <sub>Subscripted</sub>
               <code class="ml-10">&lt;sub&gt;</code>
             </div>
-            <div class="column col-4 col-xs-12">
+            <div class="column col-6 col-xs-12">
               Text <sup>Superscripted</sup>
               <code class="ml-10">&lt;sup&gt;</code>
             </div>
-            <div class="column col-4 col-xs-12">
+            <div class="column col-6 col-xs-12">
               <time>20:00</time>
               <code class="ml-10">&lt;time&gt;</code>
             </div>
-            <div class="column col-4 col-xs-12">
+            <div class="column col-6 col-xs-12">
               <u>Underline</u>
               <code class="ml-10">&lt;u&gt;</code>
             </div>
-            <div class="column col-4 col-xs-12">
+            <div class="column col-6 col-xs-12">
               <var>x</var> = <var>y</var> + 2
               <code class="ml-10">&lt;var&gt;</code>
             </div>
@@ -377,13 +385,13 @@
           <h4 id="typography-east-asian" class="s-subtitle">Optimized for east asian fonts</h4>
           <h5><small lang="zh-Hans">你好</small>, <small lang="ja">こんにちは</small>, <small lang="ko">안녕하세요</small></h5>
           <div class="docs-note">
-            <h6>Chinese (Simplified)</h6>
+            <p class="h6">Chinese (Simplified)</p>
             <p lang="zh-Hans">革命不是请客吃饭，不是做文章，不是绘画绣花，不能那样雅致，那样从容不迫，“文质彬彬”，那样“温良恭俭让”。革命就是暴动，是一个阶级推翻一个阶级的暴烈的行动。</p>
-            <h6>Chinese (Tranditional)</h6>
+            <p class="h6">Chinese (Tranditional)</p>
             <p lang="zh-Hant">山不在高，有仙則名；水不在深，有龍則靈。斯是陋室，惟吾德馨。苔痕上階綠，草色入簾青；談笑有鴻儒，往來無白丁。可以調素琴，閱金經。無絲竹之亂耳，無案牘之勞形。南陽諸葛廬，西蜀子雲亭。孔子云：「何陋之有？」</p>
-            <h6>Japanese</h6>
+            <p class="h6">Japanese</p>
             <p lang="ja">祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。おごれる人も久しからず。ただ春の夜の夢のごとし。たけき者も遂にはほろびぬ、ひとへ‌​に風の前の塵に同じ。</p>
-            <h6>Korean</h6>
+            <p class="h6">Korean</p>
             <p lang="ko">나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로, 어리석은 백성들이 말하고자 하는 바가 있어도, 끝내 제 뜻을 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨, 새로 스물 여덟 글자를 만드니, 사람마다 하여금 쉽게 익혀, 날마다 씀에 편하게 하고자 할 따름이다.</p>
           </div>
           <div class="docs-note">
diff --git a/docs/examples/starter.html b/docs/examples/starter.html
new file mode 100644
index 0000000..cbeca2d
--- /dev/null
+++ b/docs/examples/starter.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="robots" content="index, follow" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
+  <meta http-equiv="x-ua-compatible" content="ie=edge" />
+  <title>Starter Page Example</title>
+  <!-- Spectre.css CSS -->
+  <link rel="stylesheet" href="../dist/spectre.css" />
+</head>
+<body>
+  <div class="bg-gray text-center p-2">
+    <h2>Starter Page Example</h2>
+    <p>Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development.</p>
+  </div>
+
+  <!-- Google Analytics tracking code -->
+  <script>
+    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+                (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+    ga('create', 'UA-2702768-8', 'auto');
+    ga('send', 'pageview');
+  </script>
+</body>
+</html>
diff --git a/docs/experimentals.html b/docs/experimentals.html
index 5223619..1a34fe8 100644
--- a/docs/experimentals.html
+++ b/docs/experimentals.html
@@ -1,10 +1,10 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8" />
+  <meta charset="utf-8" />
   <meta name="robots" content="index, follow" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
-  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta http-equiv="x-ua-compatible" content="ie=edge" />
   <meta name="author" content="https://github.com/picturepan2/" />
   <title>Experimentals - Spectre.css CSS Framework</title>
   <link rel="stylesheet" href="dist/spectre.css" />
@@ -15,24 +15,18 @@
 <body>
   <div class="s-container container">
     <div class="columns">
-      <div class="s-brand">
-        <a href="index.html" class="s-logo tooltip tooltip-bottom" data-tooltip="Spectre.css CSS Framework">
-          <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework" />
-          <h2>Spectre.css</h2>
-        </a>
-        <div class="menu-btn">
-          <a href="#sidebar" class="btn btn-link btn-action"><i class="icon icon-menu"></i></a>
-        </div>
-        <div class="float-btn">
-          <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a>
-        </div>
-      </div>
       <div id="sidebar" class="s-sidebar">
+        <div class="s-brand">
+          <a href="index.html" class="s-logo">
+            <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework" />
+            <h2>Spectre.css</h2>
+          </a>
+        </div>
         <div class="s-nav">
           <div class="accordion">
             <div class="accordion-item">
               <input type="checkbox" id="docs-accordion-1" name="docs-accordion-checkbox" hidden />
-              <label class="accordion-header hand" for="docs-accordion-1">
+              <label class="accordion-header c-hand" for="docs-accordion-1">
                 Getting started
               </label>
               <div class="accordion-body">
@@ -57,7 +51,7 @@
             </div>
             <div class="accordion-item">
               <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden />
-              <label class="accordion-header hand" for="docs-accordion-2">
+              <label class="accordion-header c-hand" for="docs-accordion-2">
                 Elements
               </label>
               <div class="accordion-body">
@@ -91,7 +85,7 @@
             </div>
             <div class="accordion-item">
               <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden />
-              <label class="accordion-header hand" for="docs-accordion-3">
+              <label class="accordion-header c-hand" for="docs-accordion-3">
                 Layout
               </label>
               <div class="accordion-body">
@@ -110,7 +104,7 @@
             </div>
             <div class="accordion-item">
               <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden />
-              <label class="accordion-header hand" for="docs-accordion-4">
+              <label class="accordion-header c-hand" for="docs-accordion-4">
                 Components
               </label>
               <div class="accordion-body">
@@ -180,7 +174,7 @@
             </div>
             <div class="accordion-item">
               <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden />
-              <label class="accordion-header hand" for="docs-accordion-5">
+              <label class="accordion-header c-hand" for="docs-accordion-5">
                 Utilities
               </label>
               <div class="accordion-body">
@@ -189,6 +183,9 @@
                     <a href="utilities.html#colors">Colors</a>
                   </li>
                   <li class="menu-item">
+                    <a href="utilities.html#cursors">Cursors</a>
+                  </li>
+                  <li class="menu-item">
                     <a href="utilities.html#display">Display</a>
                   </li>
                   <li class="menu-item">
@@ -211,7 +208,7 @@
             </div>
             <div class="accordion-item">
               <input type="checkbox" id="docs-accordion-6" name="docs-accordion-checkbox" hidden checked />
-              <label class="accordion-header hand" for="docs-accordion-6">
+              <label class="accordion-header c-hand" for="docs-accordion-6">
                 Experimentals
               </label>
               <div class="accordion-body">
@@ -250,6 +247,17 @@
         </div>
       </div>
       <a href="#sidebar-close" id="sidebar-close" class="docs-nav-clear"></a>
+      <div class="s-navbar">
+        <div class="menu-btn">
+          <a href="#sidebar" class="btn btn-link btn-action"><i class="icon icon-menu"></i></a>
+        </div>
+        <a href="index.html" class="s-logo">
+          <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework" />
+        </a>
+        <div class="float-btn">
+          <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a>
+        </div>
+      </div>
 
       <div id="content" class="s-content">
         <div id="experimentals" class="container">
@@ -476,10 +484,10 @@
                   </figure>
                 </div>
                 <div class="carousel-nav">
-                  <label class="nav-item text-hide hand" for="slide-1">1</label>
-                  <label class="nav-item text-hide hand" for="slide-2">2</label>
-                  <label class="nav-item text-hide hand" for="slide-3">3</label>
-                  <label class="nav-item text-hide hand" for="slide-4">4</label>
+                  <label class="nav-item text-hide c-hand" for="slide-1">1</label>
+                  <label class="nav-item text-hide c-hand" for="slide-2">2</label>
+                  <label class="nav-item text-hide c-hand" for="slide-3">3</label>
+                  <label class="nav-item text-hide c-hand" for="slide-4">4</label>
                 </div>
               </div>
             </div>
@@ -715,7 +723,7 @@
             <p>The Parallax acts like Apple TV/tvOS hover parallax effect. It is built in pure CSS.</p>
           </div>
           <div class="columns">
-            <div class="column col-sm-12 col-8 centered">
+            <div class="column col-sm-12 col-8 col-mx-auto">
               <div class="parallax">
                 <div class="parallax-top-left"></div>
                 <div class="parallax-top-right"></div>
@@ -744,7 +752,7 @@
       &lt;<span class="tag">h2</span>&gt;tvOS parallax demo&lt;<span class="tag">/h2</span>&gt;
     &lt;<span class="tag">/div</span>&gt;
     &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;parallax-back&quot;</span>&gt;
-      &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/osx-el-capitan.jpg&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;img-responsive rounded&quot;</span> <span class="atn">alt</span>=<span class="atv">&quot;macOS El Capitan Wallpaper&quot;</span> /&gt;
+      &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/osx-el-capitan.jpg&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;img-responsive rounded&quot;</span> ... /&gt;
     &lt;<span class="tag">/div</span>&gt;
   &lt;<span class="tag">/div</span>&gt;
 &lt;<span class="tag">/div</span>&gt;
diff --git a/docs/getting-started.html b/docs/getting-started.html
index e57c652..e7ae157 100644
--- a/docs/getting-started.html
+++ b/docs/getting-started.html
@@ -1,10 +1,10 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8" />
+  <meta charset="utf-8" />
   <meta name="robots" content="index, follow" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
-  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta http-equiv="x-ua-compatible" content="ie=edge" />
   <meta name="author" content="https://github.com/picturepan2/" />
   <title>Getting started - Spectre.css CSS Framework</title>
   <link rel="stylesheet" href="dist/spectre.css" />
@@ -14,24 +14,18 @@
 <body>
   <div class="s-container container">
     <div class="columns">
-      <div class="s-brand">
-        <a href="index.html" class="s-logo tooltip tooltip-bottom" data-tooltip="Spectre.css CSS Framework">
-          <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework" />
-          <h2>Spectre.css</h2>
-        </a>
-        <div class="menu-btn">
-          <a href="#sidebar" class="btn btn-link btn-action"><i class="icon icon-menu"></i></a>
-        </div>
-        <div class="float-btn">
-          <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a>
-        </div>
-      </div>
       <div id="sidebar" class="s-sidebar">
+        <div class="s-brand">
+          <a href="index.html" class="s-logo">
+            <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework" />
+            <h2>Spectre.css</h2>
+          </a>
+        </div>
         <div class="s-nav">
           <div class="accordion">
             <div class="accordion-item">
               <input type="checkbox" id="docs-accordion-1" name="docs-accordion-checkbox" hidden checked />
-              <label class="accordion-header hand" for="docs-accordion-1">
+              <label class="accordion-header c-hand" for="docs-accordion-1">
                 Getting started
               </label>
               <div class="accordion-body">
@@ -56,7 +50,7 @@
             </div>
             <div class="accordion-item">
               <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden />
-              <label class="accordion-header hand" for="docs-accordion-2">
+              <label class="accordion-header c-hand" for="docs-accordion-2">
                 Elements
               </label>
               <div class="accordion-body">
@@ -90,7 +84,7 @@
             </div>
             <div class="accordion-item">
               <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden />
-              <label class="accordion-header hand" for="docs-accordion-3">
+              <label class="accordion-header c-hand" for="docs-accordion-3">
                 Layout
               </label>
               <div class="accordion-body">
@@ -109,7 +103,7 @@
             </div>
             <div class="accordion-item">
               <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden />
-              <label class="accordion-header hand" for="docs-accordion-4">
+              <label class="accordion-header c-hand" for="docs-accordion-4">
                 Components
               </label>
               <div class="accordion-body">
@@ -179,7 +173,7 @@
             </div>
             <div class="accordion-item">
               <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden />
-              <label class="accordion-header hand" for="docs-accordion-5">
+              <label class="accordion-header c-hand" for="docs-accordion-5">
                 Utilities
               </label>
               <div class="accordion-body">
@@ -188,6 +182,9 @@
                     <a href="utilities.html#colors">Colors</a>
                   </li>
                   <li class="menu-item">
+                    <a href="utilities.html#cursors">Cursors</a>
+                  </li>
+                  <li class="menu-item">
                     <a href="utilities.html#display">Display</a>
                   </li>
                   <li class="menu-item">
@@ -210,7 +207,7 @@
             </div>
             <div class="accordion-item">
               <input type="checkbox" id="docs-accordion-6" name="docs-accordion-checkbox" hidden />
-              <label class="accordion-header hand" for="docs-accordion-6">
+              <label class="accordion-header c-hand" for="docs-accordion-6">
                 Experimentals
               </label>
               <div class="accordion-body">
@@ -249,6 +246,17 @@
         </div>
       </div>
       <a href="#sidebar-close" id="sidebar-close" class="docs-nav-clear"></a>
+      <div class="s-navbar">
+        <div class="menu-btn">
+          <a href="#sidebar" class="btn btn-link btn-action"><i class="icon icon-menu"></i></a>
+        </div>
+        <a href="index.html" class="s-logo">
+          <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework" />
+        </a>
+        <div class="float-btn">
+          <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a>
+        </div>
+      </div>
 
       <div id="content" class="s-content">
         <div id="introduction" class="container">
@@ -265,7 +273,7 @@
             <p>There are 5 ways to get started with Spectre CSS framework in your projects. You can either install manually, from CDN or use NPM, Yarn and Bower.</p>
           </div>
           <div class="docs-note">
-            <h5>Install manually</h5>
+            <p class="h5">Install manually</p>
             <p>Download the compiled and minified <a href="https://github.com/picturepan2/spectre/releases" target="_blank">Spectre CSS file</a> (core ~10KB min+gzip):</p>
             <p><a href="https://github.com/picturepan2/spectre/releases" target="_blank" class="btn btn-primary">Download Spectre.css</a></p>
             <p>Include <code>spectre.css</code> located in <strong>/docs/dist</strong> in your website or Web app &lt;head&gt;. Also, you can add <code>spectre-icons.css</code> and <code>spectre-exp.css</code> accordingly.</p>
@@ -278,45 +286,49 @@
 </code></pre>
 
           <div class="docs-note">
-            <h5>Install from CDN</h5>
-            <p>Alternatively, you can use the <a href="https://unpkg.com/" target="_blank">unpkg</a> CDN to load compiled Spectre.css.</p>
+            <p class="h5">Install from CDN</p>
+            <p>Alternatively, you can use the <a href="https://unpkg.com/" target="_blank">unpkg</a> or <a href="https://cdnjs.com/libraries/spectre.css" target="_blank">cdnjs</a> CDN to load compiled Spectre.css.</p>
           </div>
 
 <!-- install from CDN example -->
 <pre class="code"><code>&lt;<span class="tag">link</span> <span class="atn">rel</span>=<span class="atv">&quot;stylesheet&quot;</span> <span class="atn">href</span>=<span class="atv">&quot;https://unpkg.com/spectre.css/dist/spectre.min.css&quot;</span> /&gt;
+&lt;<span class="tag">link</span> <span class="atn">rel</span>=<span class="atv">&quot;stylesheet&quot;</span> <span class="atn">href</span>=<span class="atv">&quot;https://unpkg.com/spectre.css/dist/spectre-exp.min.css&quot;</span> /&gt;
+&lt;<span class="tag">link</span> <span class="atn">rel</span>=<span class="atv">&quot;stylesheet&quot;</span> <span class="atn">href</span>=<span class="atv">&quot;https://unpkg.com/spectre.css/dist/spectre-icons.min.css&quot;</span> /&gt;
 </code></pre>
 
           <div class="docs-note">
-            <h5>Install with NPM</h5>
+            <p class="h5">Install with NPM</p>
+          </div>
 
 <!-- install with npm example -->
 <pre class="code"><code><span class="tag">$</span> npm install <span class="atv">spectre.css</span> --save
 </code></pre>
 
-          </div>
           <div class="docs-note">
-            <h5>Install with Yarn</h5>
+            <p class="h5">Install with Yarn</p>
+          </div>
 
 <!-- install with yarn example -->
 <pre class="code"><code><span class="tag">$</span> yarn add <span class="atv">spectre.css</span>
 </code></pre>
 
-          </div>
           <div class="docs-note">
-            <h5>Install with Bower</h5>
+            <p class="h5">Install with Bower</p>
+          </div>
 
 <!-- install with bower example -->
 <pre class="code"><code><span class="tag">$</span> bower install <span class="atv">spectre.css</span> --save
 </code></pre>
 
-          </div>
         </div>
 
         <div id="compiling" class="container">
           <h3 class="s-title"><a href="#comiling" class="anchor" aria-hidden="true">#</a>Custom version</h3>
           <div class="docs-note">
-            <p>You can customize your version of Spectre.css by editing LESS files in <code>/src</code> directory or removing unneeded components from <code>.less</code> source files.</p>
-            <p><a href="https://github.com/picturepan2/spectre/" target="_blank" class="btn btn-primary">Spectre.css Source Code</a></p>
+            <p>You can customize your version of Spectre.css by editing SASS files in <code>/src</code> directory or removing unneeded components from <code>.scss</code> source files.</p>
+            <p><a href="https://github.com/picturepan2/spectre/" target="_blank" class="btn btn-primary">SASS Source Code</a></p>
+            <p>If you are looking for LESS version of Spectre.css, please switch to <code>LESS</code> branch.</p>
+            <p><a href="https://github.com/picturepan2/spectre/tree/less" target="_blank" class="btn">LESS Branch</a></p>
           </div>
           <h4 id="compiling-steps" class="s-subtitle">Compiling CSS</h4>
           <div class="docs-note">
@@ -325,12 +337,12 @@
             <ol>
               <li>Navigate to the root directory of Spectre.</li>
               <li>Run <code>npm install</code>. NPM will install all dev dependencies as listed in package.json.</li>
-              <li>When completed, run <code>gulp build</code> task to compile LESS to CSS and minify files.</li>
+              <li>When completed, run <code>gulp build</code> task to compile SASS to CSS and minify files.</li>
               <li>You can find compiled CSS files in <code>/dist</code> directory.</li>
             </ol>
             <p>All available Gulp tasks:</p>
             <ul>
-              <li><code>gulp build</code> - compile LESS to CSS and minify files (default)</li>
+              <li><code>gulp build</code> - compile SASS to CSS and minify files (default)</li>
               <li><code>gulp docs</code> - compile Docs related files</li>
               <li><code>gulp watch</code> - watch file changes and re-compile CSS files</li>
             </ul>
@@ -340,7 +352,7 @@
 
 <!-- folder structure -->
 <pre class="code"><code>spectre/
-├── dist/                               <span class="com">// Build folder (Git ignored)</span>
+├── dist/                           <span class="com">// Build folder (Git ignored)</span>
 │   ├── spectre-exp.css
 │   ├── spectre-exp.min.css
 │   ├── spectre-icons.css
@@ -349,34 +361,39 @@
 │   └── spectre.min.css
 │
 ├── docs/
-│   ├── dist/                           <span class="com">// Pre-built CSS folder</span>
+│   ├── dist/                       <span class="com">// Pre-built CSS folder</span>
 │   │   ├── spectre-exp.css
 │   │   ├── spectre-exp.min.css
 │   │   ├── spectre-icons.css
 │   │   ├── spectre-icons.min.css
 │   │   ├── spectre.css
 │   │   └── spectre.min.css
-|   ├── css/                            <span class="com">// Docs CSS file</span>
+|   ├── css/                        <span class="com">// Docs CSS file</span>
 │   │   └── docs.css
 |   ├── src/
-│   │   └── docs.less
+│   │   └── docs.scss
+│   ├── examples/                   <span class="com">// Example tempalte</span>
+│   │   └── starter.html
 │   ├── ../
 │   ├── index.html
 │   └── ...
 │
-├── src/                                <span class="com">// Source LESS files</span>
-│   ├── mixins.less
-│   ├── variables.less
+├── src/                            <span class="com">// Source SASS files</span>
+│   ├── spectre.scss
+│   ├── spectre-icons.scss
+│   ├── spectre-exp.scss
+│   ├── _mixins.scss
+│   ├── _variables.scss
 │   └── ...
 │
-├── spectre-exp.less
-├── spectre-icons.less
-└── spectre.less
+├── gulpfile.js
+├── package.json
+└── ...
 </code></pre>
 
           <h4 id="variables" class="s-subtitle"><a href="#variables" class="anchor" aria-hidden="true">#</a>Variables</h4>
           <div class="docs-note">
-            <p>Spectre.css is designed with consistent design language. You can modify <code>variables.less</code> to create your new or match existing design.</p>
+            <p>Spectre.css is designed with consistent design language. You can modify <code>_variables.scss</code> to create your new or match existing design.</p>
           </div>
           <h5 id="variables-colors" class="s-subtitle">Colors</h5>
           <div class="columns">
@@ -395,6 +412,26 @@
           </div>
           <div class="columns">
             <div class="column col-3 col-md-6">
+              <div class="docs-color" style="background:#32b643;color:#fff;">
+                <div class="color-title">#32b643</div>
+                <div class="color-subtitle">Success</div>
+              </div>
+            </div>
+            <div class="column col-3 col-md-6">
+              <div class="docs-color" style="background:#ffb700;color:#fff;">
+                <div class="color-title">#ffb700</div>
+                <div class="color-subtitle">Warning</div>
+              </div>
+            </div>
+            <div class="column col-3 col-md-6">
+              <div class="docs-color" style="background:#e85600;color:#fff;">
+                <div class="color-title">#e85600</div>
+                <div class="color-subtitle">Error</div>
+              </div>
+            </div>
+          </div>
+          <div class="columns">
+            <div class="column col-3 col-md-6">
               <div class="docs-color" style="background:#454d5d;color:#fff;">
                 <div class="color-title">#454d5d</div>
                 <div class="color-subtitle">Dark</div>
@@ -437,44 +474,24 @@
               </div>
             </div>
           </div>
-          <div class="columns">
-            <div class="column col-3 col-md-6">
-              <div class="docs-color" style="background:#32b643;color:#fff;">
-                <div class="color-title">#32b643</div>
-                <div class="color-subtitle">Success</div>
-              </div>
-            </div>
-            <div class="column col-3 col-md-6">
-              <div class="docs-color" style="background:#ffb700;color:#fff;">
-                <div class="color-title">#ffb700</div>
-                <div class="color-subtitle">Warning</div>
-              </div>
-            </div>
-            <div class="column col-3 col-md-6">
-              <div class="docs-color" style="background:#e85600;color:#fff;">
-                <div class="color-title">#e85600</div>
-                <div class="color-subtitle">Error</div>
-              </div>
-            </div>
-          </div>
 
           <h5 id="variables-buttons" class="s-subtitle">Buttons</h5>
           <div class="docs-note">
-            <p>There are 2 button variant mixins in <code>mixins.less</code> to generate different color variants. </p>
+            <p>There are 2 button variant mixins in <code>_mixins.scss</code> to generate different color variants. </p>
             <ul>
-              <li>.button-variant(<code>@color</code>: @primary-color);</li>
-              <li>.button-outline-variant(<code>@color</code>: @primary-color);</li>
+              <li>@mixin button-variant(<code>$color</code>: $primary-color);</li>
+              <li>@mixin button-outline-variant(<code>$color</code>: $primary-color);</li>
             </ul>
 
 <!-- button variables example -->
-<pre class="code" data-lang="LESS"><code><span class="com">&lt;!-- filled button with the success color --&gt;</span>
+<pre class="code" data-lang="SASS"><code><span class="com">&lt;!-- filled button with the success color --&gt;</span>
 <span class="tag">.btn-success</span> {
-  .button-variant(<span class="atv">@success-color</span>);
+  <span class="tag">@include</span> button-variant(<span class="atv">$success-color</span>);
 }
 
 <span class="com">&lt;!-- outlined button with the success color --&gt;</span>
 <span class="tag">.btn-outline-success</span> {
-  .button-outline-variant(<span class="atv">@success-color</span>);
+  <span class="tag">@include</span> button-outline-variant(<span class="atv">$success-color</span>);
 }
 </code></pre>
           </div>
@@ -525,7 +542,7 @@ gulp.task('prefix', function() {
             <ul>
               <li>Chrome <small class="label label-success">LAST 4</small></li>
               <li>Microsoft Edge <small class="label label-success">LAST 4</small></li>
-              <li>Firefox <small class="label label-success">LAST 4</small></li>
+              <li>Firefox <small class="label label-success text-uppercase">Extended Support Release</small></li>
               <li>Safari <small class="label label-success">LAST 4</small></li>
               <li>Opera <small class="label label-success">LAST 4</small></li>
               <li>Internet Explorer 10+</li>
@@ -539,6 +556,9 @@ gulp.task('prefix', function() {
             <p><strong>August 2017</strong></p>
             <ul>
               <li>
+                <a href="getting-started.html">Switch to SASS</a> <small class="label label-primary">NEW</small>
+              </li>
+              <li>
                 <a href="getting-started.html">New Docs Experience</a> <small class="label label-primary">NEW</small>
               </li>
             </ul>
diff --git a/docs/index.html b/docs/index.html
index e98754d..4eade3f 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1,10 +1,10 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8" />
+  <meta charset="utf-8" />
   <meta name="robots" content="index, follow" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
-  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta http-equiv="x-ua-compatible" content="ie=edge" />
   <meta name="author" content="https://github.com/picturepan2/" />
   <title>Spectre.css - A lightweight, responsive and modern CSS framework</title>
   <link rel="stylesheet" href="dist/spectre.css" />
diff --git a/docs/layout.html b/docs/layout.html
index 15a9dec..ed964ef 100644
--- a/docs/layout.html
+++ b/docs/layout.html
@@ -1,10 +1,10 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8" />
+  <meta charset="utf-8" />
   <meta name="robots" content="index, follow" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
-  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta http-equiv="x-ua-compatible" content="ie=edge" />
   <meta name="author" content="https://github.com/picturepan2/" />
   <title>Layout - Spectre.css CSS Framework</title>
   <link rel="stylesheet" href="dist/spectre.css" />
@@ -14,24 +14,18 @@
 <body>
   <div class="s-container container">
     <div class="columns">
-      <div class="s-brand">
-        <a href="index.html" class="s-logo tooltip tooltip-bottom" data-tooltip="Spectre.css CSS Framework">
-          <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework" />
-          <h2>Spectre.css</h2>
-        </a>
-        <div class="menu-btn">
-          <a href="#sidebar" class="btn btn-link btn-action"><i class="icon icon-menu"></i></a>
-        </div>
-        <div class="float-btn">
-          <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a>
-        </div>
-      </div>
       <div id="sidebar" class="s-sidebar">
+        <div class="s-brand">
+          <a href="index.html" class="s-logo">
+            <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework" />
+            <h2>Spectre.css</h2>
+          </a>
+        </div>
         <div class="s-nav">
           <div class="accordion">
             <div class="accordion-item">
               <input type="checkbox" id="docs-accordion-1" name="docs-accordion-checkbox" hidden />
-              <label class="accordion-header hand" for="docs-accordion-1">
+              <label class="accordion-header c-hand" for="docs-accordion-1">
                 Getting started
               </label>
               <div class="accordion-body">
@@ -56,7 +50,7 @@
             </div>
             <div class="accordion-item">
               <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden />
-              <label class="accordion-header hand" for="docs-accordion-2">
+              <label class="accordion-header c-hand" for="docs-accordion-2">
                 Elements
               </label>
               <div class="accordion-body">
@@ -90,7 +84,7 @@
             </div>
             <div class="accordion-item">
               <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden checked />
-              <label class="accordion-header hand" for="docs-accordion-3">
+              <label class="accordion-header c-hand" for="docs-accordion-3">
                 Layout
               </label>
               <div class="accordion-body">
@@ -109,7 +103,7 @@
             </div>
             <div class="accordion-item">
               <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden />
-              <label class="accordion-header hand" for="docs-accordion-4">
+              <label class="accordion-header c-hand" for="docs-accordion-4">
                 Components
               </label>
               <div class="accordion-body">
@@ -179,7 +173,7 @@
             </div>
             <div class="accordion-item">
               <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden />
-              <label class="accordion-header hand" for="docs-accordion-5">
+              <label class="accordion-header c-hand" for="docs-accordion-5">
                 Utilities
               </label>
               <div class="accordion-body">
@@ -188,6 +182,9 @@
                     <a href="utilities.html#colors">Colors</a>
                   </li>
                   <li class="menu-item">
+                    <a href="utilities.html#cursors">Cursors</a>
+                  </li>
+                  <li class="menu-item">
                     <a href="utilities.html#display">Display</a>
                   </li>
                   <li class="menu-item">
@@ -210,7 +207,7 @@
             </div>
             <div class="accordion-item">
               <input type="checkbox" id="docs-accordion-6" name="docs-accordion-checkbox" hidden />
-              <label class="accordion-header hand" for="docs-accordion-6">
+              <label class="accordion-header c-hand" for="docs-accordion-6">
                 Experimentals
               </label>
               <div class="accordion-body">
@@ -249,6 +246,17 @@
         </div>
       </div>
       <a href="#sidebar-close" id="sidebar-close" class="docs-nav-clear"></a>
+      <div class="s-navbar">
+        <div class="menu-btn">
+          <a href="#sidebar" class="btn btn-link btn-action"><i class="icon icon-menu"></i></a>
+        </div>
+        <a href="index.html" class="s-logo">
+          <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework" />
+        </a>
+        <div class="float-btn">
+          <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a>
+        </div>
+      </div>
 
       <div id="content" class="s-content">
         <div id="grid" class="container">
diff --git a/docs/src/docs.less b/docs/src/docs.scss
index 432096c..4f4bbb4 100644
--- a/docs/src/docs.less
+++ b/docs/src/docs.scss
@@ -1,11 +1,11 @@
 /*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */
 /* Spectre version */
 .version::after {
-  content: "0.3.2";
+  content: "0.4.0";
 }
 // Core variables and mixins
-@import '../../src/variables.less';
-@import '../../src/mixins.less';
+@import '../../src/variables';
+@import '../../src/mixins';
 
 /* Spectre New Docs */
 .s-container {
@@ -16,7 +16,7 @@
 }
 
 .s-sidebar {
-  background: @bg-color;
+  background: $bg-color;
   flex: 0 0 auto;
   padding: 1.5rem 0 1.5rem 1.5rem;
   width: 12rem;
@@ -36,14 +36,14 @@
 
     input {
       & ~ .accordion-header {
-        color: darken(@gray-color-dark, 10%);
-        font-size: @font-size-sm;
+        color: lighten($dark-color, 10%);
+        font-size: $font-size-sm;
         font-weight: 600;
         text-transform: uppercase;
       }
       &:checked {
         & ~ .accordion-header {
-          color: darken(@gray-color-dark, 10%);
+          color: lighten($dark-color, 15%);
         }
       }
     }
@@ -54,7 +54,7 @@
         
         & > a {
           background: transparent;
-          color: @gray-color-dark;
+          color: $gray-color-dark;
           display: inline-block;
         }
       }
@@ -64,16 +64,16 @@
 
 .s-content {
   flex: 1 1 auto;
-  max-width: 920px;
-  padding: 0 3rem;
-  width: ~"calc(100vw - 12rem)";
+  max-width: 960px;
+  padding: 0 4rem;
+  width: calc(100vw - 12rem);
 
   & > .container {
     padding-bottom: 1.5rem;
   }
 
   .anchor {
-    color: @primary-color-light;
+    color: $primary-color-light;
     height: 0;
     margin-left: -2em;
     overflow: hidden;
@@ -81,7 +81,7 @@
     position: absolute;
     text-align: center;
     width: 0;
-    z-index: @zindex-1;
+    z-index: $zindex-1;
     &:focus,
     &:hover {
       box-shadow: none;
@@ -102,10 +102,10 @@
     @supports (position: sticky) {
       position: sticky;
       top: 0;
-      z-index: @zindex-2;
+      z-index: $zindex-2;
 
       &::before {
-        background: @light-color;      
+        background: $light-color;      
         bottom: 0;
         content: "";
         display: block;
@@ -113,7 +113,7 @@
         position: absolute;
         right: -10px;
         top: -5px;
-        z-index: -@zindex-0;
+        z-index: -$zindex-0;
       }
     }
 
@@ -134,15 +134,15 @@
   }
 
   .column {
-    padding: @layout-spacing;
+    padding: $layout-spacing;
   }
 
   .docs-block {
-    border-radius: @border-radius;
-    padding: @unit-2;
+    border-radius: $border-radius;
+    padding: $unit-2;
 
     &.bg-gray {
-      background: @bg-color-dark;
+      background: $bg-color-dark;
     }
   }
 
@@ -169,12 +169,12 @@
   }
 
   .docs-color {
-    border-radius: @border-radius;
+    border-radius: $border-radius;
     margin: .25rem 0;
     padding: .5rem;
 
     .color-subtitle {
-      font-size: @font-size-sm;
+      font-size: $font-size-sm;
       opacity: .75;
     }
   }
@@ -192,16 +192,16 @@
   }
 
   .code {
-    color: lighten(@body-font-color, 10%);
+    color: lighten($body-font-color, 10%);
 
     .com {
-      color: @gray-color;
+      color: $gray-color;
     }
     .tag {
-      color: @primary-color;
+      color: $primary-color;
     }
     .atn {
-      color: lighten(@body-font-color, 10%);
+      color: lighten($body-font-color, 10%);
     }
     .atv {
       color: #e06870;
@@ -219,9 +219,9 @@
   .example-tile-icon {
     align-content: space-around;
     align-items: center;
-    background: @primary-color;
-    border-radius: @border-radius;
-    color: @light-color;
+    background: $primary-color;
+    border-radius: $border-radius;
+    color: $light-color;
     display: flex;
     font-size: 1.2rem;
     height: 2rem;
@@ -243,14 +243,15 @@
 }
 
 .s-brand {
-  color: @primary-color;
+  color: $primary-color;
+  left: 0;
   padding: 0 1.5rem;
   position: fixed;
   top: 1.3rem;
 
   .s-logo {
     align-items: center;
-    border-radius: @border-radius;
+    border-radius: $border-radius;
     display: inline-flex;
     height: 2rem;
     padding: .2rem;
@@ -260,53 +261,48 @@
     &:hover {
       text-decoration: none;
     }
-
+  
     img {
       display: inline;
       height: auto;
       width: 1.6rem;
     }
-
+  
     h2 {
       display: inline;
-      font-size: .8rem;  
+      font-size: .8rem;
+      font-weight: 500;
       margin-bottom: 0;
       margin-left: .5rem;
       margin-right: .5rem;
     }
   }
-
-  .float-btn {
-    position: fixed;
-    right: 4.5rem;
-    top: 1.5rem;
-  }
 }
 
 .s-footer {
-  color: @gray-color;
+  color: $gray-color;
   padding: .5rem .5rem 1.5rem .5rem;
 
   a {
-    color: @gray-color-dark;
+    color: $gray-color-dark;
   }
 }
 
 /* Spectre Homepage style */
 .section-hero {
   padding: 1rem .5rem;
-  position: relative;
 
   .s-brand {
     position: absolute;
+    top: .5rem;
 
     h2 {
-      color: @primary-color;
+      color: $primary-color;
     }
   }
 
   .column {
-    padding: @layout-spacing;
+    padding: $layout-spacing;
   }
 }
 
@@ -315,7 +311,7 @@
 
   .card {
     border: 0;
-    color: lighten(@body-font-color, 15%);
+    color: lighten($body-font-color, 15%);
     margin-bottom: 1rem;
   }
 }
@@ -324,41 +320,42 @@
   padding: 4.5rem .5rem;
 
   .column {
-    padding: @layout-spacing;
+    padding: $layout-spacing;
   }
 }
 
 .section-footer {
-  color: @gray-color;
+  color: $gray-color;
   padding: 1.8rem .75rem 1rem .75rem;
   position: relative;
   z-index: 200;
 
   a {
-    color: @gray-color-dark;
+    color: $gray-color-dark;
   }
 }
 
 .grid-hero {
-  margin-top: 6rem;
-  margin-bottom: 2rem;
+  padding-bottom: 2rem;
+  padding-top: 6rem;
+  position: relative;
 
   h1 {
-    color: @body-font-color;
+    color: $body-font-color;
     font-size: 1.6rem;
     margin-bottom: 1.5rem;
   }
 
   h2 {
-    color: lighten(@body-font-color, 5%);
+    color: lighten($body-font-color, 5%);
     font-size: .9rem;
     font-weight: 400;
     line-height: 1.5rem;
     margin-bottom: 1.5rem;
 
     u {
-      border-bottom: @border-width-lg solid currentColor;
-      padding-bottom: @unit-o;
+      border-bottom: $border-width-lg solid currentColor;
+      padding-bottom: $unit-o;
       text-decoration: none;
     }
   }
@@ -366,25 +363,44 @@
   .card {
     background: none;
     border: 0;
-    color: lighten(@body-font-color, 15%);
+    color: lighten($body-font-color, 15%);
     padding: .5rem;
 
     .card-title {
-      color: @primary-color;
+      color: $primary-color;
       font-size: .9rem;
       margin-bottom: 0;
     }
   }
 }
 
-.menu-btn,
 .docs-nav-clear {
   display: none;
 }
 
-@media screen and (max-width: 880px) {
+.s-navbar {
+  height: 3.5rem;
+  left: 0;
+  padding: .75rem 1.5rem;
+  position: fixed;
+  text-align: center;
+  z-index: $zindex-4;
+
+  .s-logo,
+  .menu-btn {
+    display: none;
+  }
+
+  .float-btn {
+    position: fixed;
+    right: 4rem;
+    top: 1.5rem;
+  }
+}
+
+@media (max-width: 880px) {
   .s-sidebar {
-    background: @bg-color;
+    background: $bg-color;
     bottom: 0;
     overflow-y: auto;
     padding: 3rem 1.5rem;
@@ -404,31 +420,21 @@
       }
     }
 
-    .s-nav {
-      top: 1.5rem;
+    .menu .menu-item > a {
+      padding: .3rem .4rem;
     }
   }
 
-  .s-brand {
-    backdrop-filter: blur(10px); // Safari only feature
-    background: fade(@bg-color, 80%);
-    height: 3.5rem;
-    left: 0;
-    padding: .75rem .5rem;
-    text-align: center;
-    top: 0;
+  .s-navbar {
+    backdrop-filter: blur(10px);
+    background: rgba($bg-color, .65);
     right: 0;
-    z-index: @zindex-3;
-
-    .s-logo {
-      h2 {
-        display: none;
-      }
-    }
+    top: 0;
+    z-index: $zindex-2;
 
     .menu-btn {
       display: block;
-      left: .65rem;
+      left: 2.6rem;
       position: fixed;
       top: .95rem;
 
@@ -437,8 +443,17 @@
       }
     }
 
+    .s-logo {
+      align-items: center;
+      border-radius: $border-radius;
+      display: inline-flex;
+      height: 2rem;
+      padding: .2rem;
+      width: auto;
+    }
+
     .float-btn {
-      right: 1rem;
+      right: 2.9rem;
       top: .95rem;
     }
   }
@@ -452,12 +467,12 @@
     top: 0;
     position: fixed;
     width: 100%;
-    z-index: @zindex-3;
+    z-index: $zindex-3;
   }
 
   .s-content {
     min-width: auto;
-    padding: 3.5rem 2.5rem 0 2.5rem;
+    padding: 0 2.5rem;
     width: 100%;
 
     .s-title,
@@ -466,7 +481,7 @@
       position: static;
 
       &::before {
-        display: none;
+        content: none;
       }
     }
   }
@@ -475,6 +490,8 @@
     .s-brand {
       height: 5rem;
       padding: 1.5rem .5rem;
+      text-align: center;
+      width: 100%;
 
       .s-logo {
         height: auto;
@@ -484,11 +501,15 @@
         height: 3.2rem;
         width: 3.2rem;
       }
+
+      h2 {
+        display: none;
+      }
     }
   }
 }
 
-@media screen and (max-width: 600px) {
+@media (max-width: 600px) {
   .grid-hero {
     h2 {
       font-size: .9rem;
@@ -502,11 +523,21 @@
     padding: 3.5rem .5rem 0 .5rem;
 
     .docs-block {
-      padding: @unit-2 @unit-h;
+      padding: $unit-2 $unit-h;
     }
 
     .anchor {
       display: none;
     }
   }
+
+  .s-navbar {
+    .menu-btn {
+      left: .65rem;
+    }
+
+    .float-btn {
+      right: 1rem;
+    }
+  }
 }
\ No newline at end of file
diff --git a/docs/utilities.html b/docs/utilities.html
index d502712..5c45ae6 100644
--- a/docs/utilities.html
+++ b/docs/utilities.html
@@ -1,10 +1,10 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8" />
+  <meta charset="utf-8" />
   <meta name="robots" content="index, follow" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
-  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta http-equiv="x-ua-compatible" content="ie=edge" />
   <meta name="author" content="https://github.com/picturepan2/" />
   <title>Utilities - Spectre.css CSS Framework</title>
   <link rel="stylesheet" href="dist/spectre.css" />
@@ -14,24 +14,18 @@
 <body>
   <div class="s-container container">
     <div class="columns">
-      <div class="s-brand">
-        <a href="index.html" class="s-logo tooltip tooltip-bottom" data-tooltip="Spectre.css CSS Framework">
-          <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework" />
-          <h2>Spectre.css</h2>
-        </a>
-        <div class="menu-btn">
-          <a href="#sidebar" class="btn btn-link btn-action"><i class="icon icon-menu"></i></a>
-        </div>
-        <div class="float-btn">
-          <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a>
-        </div>
-      </div>
       <div id="sidebar" class="s-sidebar">
+        <div class="s-brand">
+          <a href="index.html" class="s-logo">
+            <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework" />
+            <h2>Spectre.css</h2>
+          </a>
+        </div>
         <div class="s-nav">
           <div class="accordion">
             <div class="accordion-item">
               <input type="checkbox" id="docs-accordion-1" name="docs-accordion-checkbox" hidden />
-              <label class="accordion-header hand" for="docs-accordion-1">
+              <label class="accordion-header c-hand" for="docs-accordion-1">
                 Getting started
               </label>
               <div class="accordion-body">
@@ -56,7 +50,7 @@
             </div>
             <div class="accordion-item">
               <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden />
-              <label class="accordion-header hand" for="docs-accordion-2">
+              <label class="accordion-header c-hand" for="docs-accordion-2">
                 Elements
               </label>
               <div class="accordion-body">
@@ -90,7 +84,7 @@
             </div>
             <div class="accordion-item">
               <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden />
-              <label class="accordion-header hand" for="docs-accordion-3">
+              <label class="accordion-header c-hand" for="docs-accordion-3">
                 Layout
               </label>
               <div class="accordion-body">
@@ -109,7 +103,7 @@
             </div>
             <div class="accordion-item">
               <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden />
-              <label class="accordion-header hand" for="docs-accordion-4">
+              <label class="accordion-header c-hand" for="docs-accordion-4">
                 Components
               </label>
               <div class="accordion-body">
@@ -179,7 +173,7 @@
             </div>
             <div class="accordion-item">
               <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden checked />
-              <label class="accordion-header hand" for="docs-accordion-5">
+              <label class="accordion-header c-hand" for="docs-accordion-5">
                 Utilities
               </label>
               <div class="accordion-body">
@@ -188,6 +182,9 @@
                     <a href="utilities.html#colors">Colors</a>
                   </li>
                   <li class="menu-item">
+                    <a href="utilities.html#cursors">Cursors</a>
+                  </li>
+                  <li class="menu-item">
                     <a href="utilities.html#display">Display</a>
                   </li>
                   <li class="menu-item">
@@ -210,7 +207,7 @@
             </div>
             <div class="accordion-item">
               <input type="checkbox" id="docs-accordion-6" name="docs-accordion-checkbox" hidden />
-              <label class="accordion-header hand" for="docs-accordion-6">
+              <label class="accordion-header c-hand" for="docs-accordion-6">
                 Experimentals
               </label>
               <div class="accordion-body">
@@ -249,6 +246,17 @@
         </div>
       </div>
       <a href="#sidebar-close" id="sidebar-close" class="docs-nav-clear"></a>
+      <div class="s-navbar">
+        <div class="menu-btn">
+          <a href="#sidebar" class="btn btn-link btn-action"><i class="icon icon-menu"></i></a>
+        </div>
+        <a href="index.html" class="s-logo">
+          <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework" />
+        </a>
+        <div class="float-btn">
+          <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a>
+        </div>
+      </div>
 
       <div id="content" class="s-content">
         <div id="colors" class="container">
@@ -320,6 +328,49 @@
 
         </div>
 
+        <div id="cursors" class="container">
+          <h3 class="s-title"><a href="#cursors" class="anchor" aria-hidden="true">#</a>Cursor utilities</h3>
+          <div class="docs-note">
+            <p>Cursor utilities specify which mouse cursor to display when mouseover.</p>
+          </div>
+          <div class="columns">
+            <div class="column">
+              <div class="bg-gray docs-block c-hand">c-hand</div>
+            </div>
+            <div class="column">
+              <div class="bg-gray docs-block c-move">c-move</div>
+            </div>
+            <div class="column">
+              <div class="bg-gray docs-block c-zoom-in">c-zoom-in</div>
+            </div>
+            <div class="column">
+              <div class="bg-gray docs-block c-zoom-out">c-zoom-out</div>
+            </div>
+            <div class="column">
+              <div class="bg-gray docs-block c-not-allowed">c-not-allowed</div>
+            </div>
+            <div class="column">
+              <div class="bg-gray docs-block c-auto">c-auto</div>
+            </div>
+          </div>
+
+<!-- display utilities example -->
+<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- cursor: hand; --&gt;</span>
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;c-hand&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+<span class="com">&lt;!-- cursor: move; --&gt;</span>
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;c-move&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+<span class="com">&lt;!-- cursor: zoom-in; --&gt;</span>
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;c-zoom-in&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+<span class="com">&lt;!-- cursor: zoom-out; --&gt;</span>
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;c-zoom-out&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+<span class="com">&lt;!-- cursor: not-allowed; --&gt;</span>
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;c-not-allowed&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+<span class="com">&lt;!-- cursor: auto; --&gt;</span>
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;c-auto&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+</code></pre>
+
+        </div>
+
         <div id="display" class="container">
           <h3 class="s-title"><a href="#display" class="anchor" aria-hidden="true">#</a>Display utilities</h3>
           <div class="docs-note">
@@ -442,7 +493,6 @@
           <div class="columns">
             <div class="column col-12 text-center">
               <div class="loading loading-lg"></div>
-              <p class="text-gray">Loading</p>
             </div>
           </div>
 
@@ -472,6 +522,7 @@
 &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;fixed&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
 <span class="com">&lt;!-- centered block --&gt;</span>
 &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;centered&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+
 <span class="com">&lt;!-- m-1 {margin: 4px;} m-2 {margin: 8px;} --&gt;</span>
 &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;m-1&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
 &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;m-2&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
diff --git a/gulpfile.js b/gulpfile.js
index e17b93a..f1bd88b 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -1,49 +1,49 @@
 var gulp = require('gulp');
-var less = require('gulp-less');
+var sass = require('gulp-sass');
 var cleancss = require('gulp-clean-css');
 var csscomb = require('gulp-csscomb');
 var rename = require('gulp-rename');
-var LessPluginAutoPrefix = require('less-plugin-autoprefix');
+var autoprefixer = require('gulp-autoprefixer');
 
-var autoprefix= new LessPluginAutoPrefix({ browsers: ["last 4 versions", "Explorer >= 10", "Firefox ESR"] });
+var paths = {
+  source: './src/*.scss',
+  doc: './docs/src/*.scss'
+};
 
 gulp.task('watch', function() {
-    gulp.watch('./**/*.less', ['build']);
-    gulp.watch('./**/*.less', ['docs']);
+  gulp.watch('./**/*.scss', ['build']);
+  gulp.watch('./**/*.scss', ['docs']);
 });
 
 gulp.task('build', function() {
-    gulp.src('./*.less')
-        .pipe(less({
-            plugins: [autoprefix]
-        }))
-        .pipe(csscomb())
-        .pipe(gulp.dest('./dist'))
-        .pipe(cleancss())
-        .pipe(rename({
-            suffix: '.min'
-        }))
-        .pipe(gulp.dest('./dist'));
+  gulp.src(paths.source)
+    .pipe(sass({outputStyle: 'compact', precision: 10}))
+    .pipe(autoprefixer())
+    .pipe(csscomb())
+    .pipe(gulp.dest('./dist'))
+    .pipe(cleancss())
+    .pipe(rename({
+      suffix: '.min'
+    }))
+    .pipe(gulp.dest('./dist'));
 });
 
 gulp.task('docs', function() {
-    gulp.src('./docs/src/*.less')
-        .pipe(less({
-            plugins: [autoprefix]
-        }))
-        .pipe(csscomb())
-        .pipe(gulp.dest('./docs/css'));
-    gulp.src('./*.less')
-        .pipe(less({
-            plugins: [autoprefix]
-        }))
-        .pipe(csscomb())
-        .pipe(gulp.dest('./docs/dist'))
-        .pipe(cleancss())
-        .pipe(rename({
-            suffix: '.min'
-        }))
-        .pipe(gulp.dest('./docs/dist'));
+  gulp.src(paths.doc)
+    .pipe(sass({outputStyle: 'compact', precision: 10}))
+    .pipe(autoprefixer())
+    .pipe(csscomb())
+    .pipe(gulp.dest('./docs/css'));
+  gulp.src(paths.source)
+    .pipe(sass({outputStyle: 'compact', precision: 10}))
+    .pipe(autoprefixer())
+    .pipe(csscomb())
+    .pipe(gulp.dest('./docs/dist'))
+    .pipe(cleancss())
+    .pipe(rename({
+      suffix: '.min'
+    }))
+    .pipe(gulp.dest('./docs/dist'));
 });
 
 gulp.task('default', ['build']);
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..eb01640
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,3349 @@
+{
+  "name": "spectre.css",
+  "version": "0.4.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "abbrev": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.0.tgz",
+      "integrity": "sha1-0FVMIlZjbi9W58LlrRg/hZQo2B8=",
+      "dev": true
+    },
+    "ajv": {
+      "version": "4.11.8",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-4.11.8.tgz",
+      "integrity": "sha1-gv+wKynmYq5TvcIK8VlHcGc5xTY=",
+      "dev": true,
+      "requires": {
+        "co": "4.6.0",
+        "json-stable-stringify": "1.0.1"
+      }
+    },
+    "amdefine": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
+      "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
+      "dev": true
+    },
+    "ansi-regex": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+      "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
+      "dev": true
+    },
+    "ansi-styles": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+      "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
+      "dev": true
+    },
+    "aproba": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.1.2.tgz",
+      "integrity": "sha512-ZpYajIfO0j2cOFTO955KUMIKNmj6zhX8kVztMAxFsDaMwz+9Z9SV0uou2pC9HJqcfpffOsjnbrDMvkNy+9RXPw==",
+      "dev": true
+    },
+    "archy": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/archy/-/archy-1.0.0.tgz",
+      "integrity": "sha1-+cjBN1fMHde8N5rHeyxipcKGjEA=",
+      "dev": true
+    },
+    "are-we-there-yet": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.4.tgz",
+      "integrity": "sha1-u13KOCu5TwXhUZQ3PRb9O6HKEQ0=",
+      "dev": true,
+      "requires": {
+        "delegates": "1.0.0",
+        "readable-stream": "2.3.3"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
+          "dev": true
+        },
+        "readable-stream": {
+          "version": "2.3.3",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.3.tgz",
+          "integrity": "sha512-m+qzzcn7KUxEmd1gMbchF+Y2eIUbieUaxkWtptyHywrX0rE8QEYqPC07Vuy4Wm32/xE16NcdBctb8S0Xe/5IeQ==",
+          "dev": true,
+          "requires": {
+            "core-util-is": "1.0.2",
+            "inherits": "2.0.3",
+            "isarray": "1.0.0",
+            "process-nextick-args": "1.0.7",
+            "safe-buffer": "5.1.1",
+            "string_decoder": "1.0.3",
+            "util-deprecate": "1.0.2"
+          }
+        },
+        "string_decoder": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
+          "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
+          "dev": true,
+          "requires": {
+            "safe-buffer": "5.1.1"
+          }
+        }
+      }
+    },
+    "arr-diff": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-2.0.0.tgz",
+      "integrity": "sha1-jzuCf5Vai9ZpaX5KQlasPOrjVs8=",
+      "dev": true,
+      "requires": {
+        "arr-flatten": "1.1.0"
+      }
+    },
+    "arr-flatten": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/arr-flatten/-/arr-flatten-1.1.0.tgz",
+      "integrity": "sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg==",
+      "dev": true
+    },
+    "array-differ": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-1.0.0.tgz",
+      "integrity": "sha1-7/UuN1gknTO+QCuLuOVkuytdQDE=",
+      "dev": true
+    },
+    "array-each": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/array-each/-/array-each-1.0.1.tgz",
+      "integrity": "sha1-p5SvDAWrF1KEbudTofIRoFugxE8=",
+      "dev": true
+    },
+    "array-find-index": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/array-find-index/-/array-find-index-1.0.2.tgz",
+      "integrity": "sha1-3wEKoSh+Fku9pvlyOwqWoexBh6E=",
+      "dev": true
+    },
+    "array-slice": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/array-slice/-/array-slice-1.0.0.tgz",
+      "integrity": "sha1-5zA08A3MH0CHYAj9IP6ud71LfC8=",
+      "dev": true
+    },
+    "array-uniq": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz",
+      "integrity": "sha1-r2rId6Jcx/dOBYiUdThY39sk/bY=",
+      "dev": true
+    },
+    "array-unique": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.2.1.tgz",
+      "integrity": "sha1-odl8yvy8JiXMcPrc6zalDFiwGlM=",
+      "dev": true
+    },
+    "asn1": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.3.tgz",
+      "integrity": "sha1-2sh4dxPJlmhJ/IGAd36+nB3fO4Y=",
+      "dev": true
+    },
+    "assert-plus": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-0.2.0.tgz",
+      "integrity": "sha1-104bh+ev/A24qttwIfP+SBAasjQ=",
+      "dev": true
+    },
+    "async-foreach": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/async-foreach/-/async-foreach-0.1.3.tgz",
+      "integrity": "sha1-NhIfhFwFeBct5Bmpfb6x0W7DRUI=",
+      "dev": true
+    },
+    "asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=",
+      "dev": true
+    },
+    "autoprefixer": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-7.1.3.tgz",
+      "integrity": "sha512-zGy6aRrZjWhR+25n89jYkpLXutg6xdDGKKnVNzkfamnnhK3mYchkKj5GJR14aJiU0x4UqZ1+N728tkFNUL5N2g==",
+      "dev": true,
+      "requires": {
+        "browserslist": "2.4.0",
+        "caniuse-lite": "1.0.30000718",
+        "normalize-range": "0.1.2",
+        "num2fraction": "1.2.2",
+        "postcss": "6.0.10",
+        "postcss-value-parser": "3.3.0"
+      }
+    },
+    "aws-sign2": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.6.0.tgz",
+      "integrity": "sha1-FDQt0428yU0OW4fXY81jYSwOeU8=",
+      "dev": true
+    },
+    "aws4": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.6.0.tgz",
+      "integrity": "sha1-g+9cqGCysy5KDe7e6MdxudtXRx4=",
+      "dev": true
+    },
+    "balanced-match": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
+      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
+      "dev": true
+    },
+    "bcrypt-pbkdf": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.1.tgz",
+      "integrity": "sha1-Y7xdy2EzG5K8Bf1SiVPDNGKgb40=",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "tweetnacl": "0.14.5"
+      }
+    },
+    "beeper": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/beeper/-/beeper-1.1.1.tgz",
+      "integrity": "sha1-5tXqjF2tABMEpwsiY4RH9pyy+Ak=",
+      "dev": true
+    },
+    "block-stream": {
+      "version": "0.0.9",
+      "resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz",
+      "integrity": "sha1-E+v+d4oDIFz+A3UUgeu0szAMEmo=",
+      "dev": true,
+      "requires": {
+        "inherits": "2.0.3"
+      }
+    },
+    "boom": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/boom/-/boom-2.10.1.tgz",
+      "integrity": "sha1-OciRjO/1eZ+D+UkqhI9iWt0Mdm8=",
+      "dev": true,
+      "requires": {
+        "hoek": "2.16.3"
+      }
+    },
+    "brace-expansion": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.8.tgz",
+      "integrity": "sha1-wHshHHyVLsH479Uad+8NHTmQopI=",
+      "dev": true,
+      "requires": {
+        "balanced-match": "1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "braces": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-1.8.5.tgz",
+      "integrity": "sha1-uneWLhLf+WnWt2cR6RS3N4V79qc=",
+      "dev": true,
+      "requires": {
+        "expand-range": "1.8.2",
+        "preserve": "0.2.0",
+        "repeat-element": "1.1.2"
+      }
+    },
+    "browserslist": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-2.4.0.tgz",
+      "integrity": "sha512-aM2Gt4x9bVlCUteADBS6JP0F+2tMWKM1jQzUulVROtdFWFIcIVvY76AJbr7GDqy0eDhn+PcnpzzivGxY4qiaKQ==",
+      "dev": true,
+      "requires": {
+        "caniuse-lite": "1.0.30000718",
+        "electron-to-chromium": "1.3.18"
+      }
+    },
+    "builtin-modules": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-1.1.1.tgz",
+      "integrity": "sha1-Jw8HbFpywC9bZaR9+Uxf46J4iS8=",
+      "dev": true
+    },
+    "camelcase": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-2.1.1.tgz",
+      "integrity": "sha1-fB0W1nmhu+WcoCys7PsBHiAfWh8=",
+      "dev": true
+    },
+    "camelcase-keys": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
+      "integrity": "sha1-MIvur/3ygRkFHvodkyITyRuPkuc=",
+      "dev": true,
+      "requires": {
+        "camelcase": "2.1.1",
+        "map-obj": "1.0.1"
+      }
+    },
+    "caniuse-lite": {
+      "version": "1.0.30000718",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000718.tgz",
+      "integrity": "sha1-DdJCkL6xExCy2A9rcKgjwqZab60=",
+      "dev": true
+    },
+    "caseless": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
+      "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=",
+      "dev": true
+    },
+    "chalk": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+      "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+      "dev": true,
+      "requires": {
+        "ansi-styles": "2.2.1",
+        "escape-string-regexp": "1.0.5",
+        "has-ansi": "2.0.0",
+        "strip-ansi": "3.0.1",
+        "supports-color": "2.0.0"
+      }
+    },
+    "clean-css": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.1.7.tgz",
+      "integrity": "sha1-ua6k+FZ5iJzz6ui0A0nsTr390DI=",
+      "dev": true,
+      "requires": {
+        "source-map": "0.5.6"
+      }
+    },
+    "cliui": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz",
+      "integrity": "sha1-EgYBU3qRbSmUD5NNo7SNWFo5IT0=",
+      "dev": true,
+      "requires": {
+        "string-width": "1.0.2",
+        "strip-ansi": "3.0.1",
+        "wrap-ansi": "2.1.0"
+      }
+    },
+    "clone": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.2.tgz",
+      "integrity": "sha1-Jgt6meux7f4kdTgXX3gyQ8sZ0Uk=",
+      "dev": true
+    },
+    "clone-stats": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/clone-stats/-/clone-stats-0.0.1.tgz",
+      "integrity": "sha1-uI+UqCzzi4eR1YBG6kAprYjKmdE=",
+      "dev": true
+    },
+    "co": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
+      "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=",
+      "dev": true
+    },
+    "code-point-at": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
+      "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
+      "dev": true
+    },
+    "color-convert": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.0.tgz",
+      "integrity": "sha1-Gsz5fdc5uYO/mU1W/sj5WFNkG3o=",
+      "dev": true,
+      "requires": {
+        "color-name": "1.1.3"
+      }
+    },
+    "color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+      "dev": true
+    },
+    "combined-stream": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.5.tgz",
+      "integrity": "sha1-k4NwpXtKUd6ix3wV1cX9+JUWQAk=",
+      "dev": true,
+      "requires": {
+        "delayed-stream": "1.0.0"
+      }
+    },
+    "commander": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.0.0.tgz",
+      "integrity": "sha1-0bhvkB+LZL2UG96tr5JFMDk76Sg=",
+      "dev": true
+    },
+    "concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
+      "dev": true
+    },
+    "console-control-strings": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
+      "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
+      "dev": true
+    },
+    "core-util-is": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
+      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
+      "dev": true
+    },
+    "cross-spawn": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-3.0.1.tgz",
+      "integrity": "sha1-ElYDfsufDF9549bvE14wdwGEuYI=",
+      "dev": true,
+      "requires": {
+        "lru-cache": "4.1.1",
+        "which": "1.3.0"
+      },
+      "dependencies": {
+        "lru-cache": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.1.tgz",
+          "integrity": "sha512-q4spe4KTfsAS1SUHLO0wz8Qiyf1+vMIAgpRYioFYDMNqKfHQbg+AVDH3i4fvpl71/P1L0dBl+fQi+P37UYf0ew==",
+          "dev": true,
+          "requires": {
+            "pseudomap": "1.0.2",
+            "yallist": "2.1.2"
+          }
+        }
+      }
+    },
+    "cryptiles": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-2.0.5.tgz",
+      "integrity": "sha1-O9/s3GCBR8HGcgL6KR59ylnqo7g=",
+      "dev": true,
+      "requires": {
+        "boom": "2.10.1"
+      }
+    },
+    "csscomb": {
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/csscomb/-/csscomb-3.1.8.tgz",
+      "integrity": "sha1-qKc4iE9Am6817JRhr8UuHHW9I6I=",
+      "dev": true,
+      "requires": {
+        "commander": "2.0.0",
+        "csscomb-core": "3.0.0-3.1",
+        "gonzales-pe": "3.0.0-28",
+        "vow": "0.4.4"
+      }
+    },
+    "csscomb-core": {
+      "version": "3.0.0-3.1",
+      "resolved": "https://registry.npmjs.org/csscomb-core/-/csscomb-core-3.0.0-3.1.tgz",
+      "integrity": "sha1-tBHI18/g3z8v4d+E0b1kpvAEbGg=",
+      "dev": true,
+      "requires": {
+        "gonzales-pe": "3.0.0-28",
+        "minimatch": "0.2.12",
+        "vow": "0.4.4",
+        "vow-fs": "0.3.2"
+      },
+      "dependencies": {
+        "minimatch": {
+          "version": "0.2.12",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-0.2.12.tgz",
+          "integrity": "sha1-6oKgEqxmLH3fqhRPHBR+aUb12vs=",
+          "dev": true,
+          "requires": {
+            "lru-cache": "2.7.3",
+            "sigmund": "1.0.1"
+          }
+        }
+      }
+    },
+    "currently-unhandled": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz",
+      "integrity": "sha1-mI3zP+qxke95mmE2nddsF635V+o=",
+      "dev": true,
+      "requires": {
+        "array-find-index": "1.0.2"
+      }
+    },
+    "dashdash": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
+      "integrity": "sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=",
+      "dev": true,
+      "requires": {
+        "assert-plus": "1.0.0"
+      },
+      "dependencies": {
+        "assert-plus": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+          "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
+          "dev": true
+        }
+      }
+    },
+    "dateformat": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-2.0.0.tgz",
+      "integrity": "sha1-J0Pjq7XD/CRi5SfcpEXgTp9N7hc=",
+      "dev": true
+    },
+    "decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=",
+      "dev": true
+    },
+    "defaults": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.3.tgz",
+      "integrity": "sha1-xlYFHpgX2f8I7YgUd/P+QBnz730=",
+      "dev": true,
+      "requires": {
+        "clone": "1.0.2"
+      }
+    },
+    "delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
+      "dev": true
+    },
+    "delegates": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
+      "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
+      "dev": true
+    },
+    "deprecated": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/deprecated/-/deprecated-0.0.1.tgz",
+      "integrity": "sha1-+cmvVGSvoeepcUWKi97yqpTVuxk=",
+      "dev": true
+    },
+    "detect-file": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/detect-file/-/detect-file-0.1.0.tgz",
+      "integrity": "sha1-STXe39lIhkjgBrASlWbpOGcR6mM=",
+      "dev": true,
+      "requires": {
+        "fs-exists-sync": "0.1.0"
+      }
+    },
+    "duplexer2": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.0.2.tgz",
+      "integrity": "sha1-xhTc9n4vsUmVqRcR5aYX6KYKMds=",
+      "dev": true,
+      "requires": {
+        "readable-stream": "1.1.14"
+      }
+    },
+    "ecc-jsbn": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz",
+      "integrity": "sha1-D8c6ntXw1Tw4GTOYUj735UN3dQU=",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "jsbn": "0.1.1"
+      }
+    },
+    "electron-to-chromium": {
+      "version": "1.3.18",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.18.tgz",
+      "integrity": "sha1-PcyZ2j5rZl9qu8ccKK1Ros1zGpw=",
+      "dev": true
+    },
+    "end-of-stream": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-0.1.5.tgz",
+      "integrity": "sha1-jhdyBsPICDfYVjLouTWd/osvbq8=",
+      "dev": true,
+      "requires": {
+        "once": "1.3.3"
+      }
+    },
+    "error-ex": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.1.tgz",
+      "integrity": "sha1-+FWobOYa3E6GIcPNoh56dhLDqNw=",
+      "dev": true,
+      "requires": {
+        "is-arrayish": "0.2.1"
+      }
+    },
+    "escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
+      "dev": true
+    },
+    "expand-brackets": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-0.1.5.tgz",
+      "integrity": "sha1-3wcoTjQqgHzXM6xa9yQR5YHRF3s=",
+      "dev": true,
+      "requires": {
+        "is-posix-bracket": "0.1.1"
+      }
+    },
+    "expand-range": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/expand-range/-/expand-range-1.8.2.tgz",
+      "integrity": "sha1-opnv/TNf4nIeuujiV+x5ZE/IUzc=",
+      "dev": true,
+      "requires": {
+        "fill-range": "2.2.3"
+      }
+    },
+    "expand-tilde": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/expand-tilde/-/expand-tilde-1.2.2.tgz",
+      "integrity": "sha1-C4HrqJflo9MdHD0QL48BRB5VlEk=",
+      "dev": true,
+      "requires": {
+        "os-homedir": "1.0.2"
+      }
+    },
+    "extend": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.1.tgz",
+      "integrity": "sha1-p1Xqe8Gt/MWjHOfnYtuq3F5jZEQ=",
+      "dev": true
+    },
+    "extglob": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/extglob/-/extglob-0.3.2.tgz",
+      "integrity": "sha1-Lhj/PS9JqydlzskCPwEdqo2DSaE=",
+      "dev": true,
+      "requires": {
+        "is-extglob": "1.0.0"
+      }
+    },
+    "extsprintf": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
+      "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=",
+      "dev": true
+    },
+    "fancy-log": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/fancy-log/-/fancy-log-1.3.0.tgz",
+      "integrity": "sha1-Rb4X0Cu5kX1gzP/UmVyZnmyMmUg=",
+      "dev": true,
+      "requires": {
+        "chalk": "1.1.3",
+        "time-stamp": "1.1.0"
+      }
+    },
+    "filename-regex": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/filename-regex/-/filename-regex-2.0.1.tgz",
+      "integrity": "sha1-wcS5vuPglyXdsQa3XB4wH+LxiyY=",
+      "dev": true
+    },
+    "fill-range": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-2.2.3.tgz",
+      "integrity": "sha1-ULd9/X5Gm8dJJHCWNpn+eoSFpyM=",
+      "dev": true,
+      "requires": {
+        "is-number": "2.1.0",
+        "isobject": "2.1.0",
+        "randomatic": "1.1.7",
+        "repeat-element": "1.1.2",
+        "repeat-string": "1.6.1"
+      }
+    },
+    "find-index": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/find-index/-/find-index-0.1.1.tgz",
+      "integrity": "sha1-Z101iyyjiS15Whq0cjL4tuLg3eQ=",
+      "dev": true
+    },
+    "find-up": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz",
+      "integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=",
+      "dev": true,
+      "requires": {
+        "path-exists": "2.1.0",
+        "pinkie-promise": "2.0.1"
+      }
+    },
+    "findup-sync": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/findup-sync/-/findup-sync-0.4.3.tgz",
+      "integrity": "sha1-QAQ5Kee8YK3wt/SCfExudaDeyhI=",
+      "dev": true,
+      "requires": {
+        "detect-file": "0.1.0",
+        "is-glob": "2.0.1",
+        "micromatch": "2.3.11",
+        "resolve-dir": "0.1.1"
+      }
+    },
+    "fined": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/fined/-/fined-1.1.0.tgz",
+      "integrity": "sha1-s33IRLdqL15wgeiE98CuNE8VNHY=",
+      "dev": true,
+      "requires": {
+        "expand-tilde": "2.0.2",
+        "is-plain-object": "2.0.4",
+        "object.defaults": "1.1.0",
+        "object.pick": "1.3.0",
+        "parse-filepath": "1.0.1"
+      },
+      "dependencies": {
+        "expand-tilde": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/expand-tilde/-/expand-tilde-2.0.2.tgz",
+          "integrity": "sha1-l+gBqgUt8CRU3kawK/YhZCzchQI=",
+          "dev": true,
+          "requires": {
+            "homedir-polyfill": "1.0.1"
+          }
+        }
+      }
+    },
+    "first-chunk-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/first-chunk-stream/-/first-chunk-stream-1.0.0.tgz",
+      "integrity": "sha1-Wb+1DNkF9g18OUzT2ayqtOatk04=",
+      "dev": true
+    },
+    "flagged-respawn": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/flagged-respawn/-/flagged-respawn-0.3.2.tgz",
+      "integrity": "sha1-/xke3c1wiKZ1smEP/8l2vpuAdLU=",
+      "dev": true
+    },
+    "for-in": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
+      "integrity": "sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=",
+      "dev": true
+    },
+    "for-own": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/for-own/-/for-own-0.1.5.tgz",
+      "integrity": "sha1-UmXGgaTylNq78XyVCbZ2OqhFEM4=",
+      "dev": true,
+      "requires": {
+        "for-in": "1.0.2"
+      }
+    },
+    "forever-agent": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
+      "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=",
+      "dev": true
+    },
+    "form-data": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.1.4.tgz",
+      "integrity": "sha1-M8GDrPGTJ27KqYFDpp6Uv+4XUNE=",
+      "dev": true,
+      "requires": {
+        "asynckit": "0.4.0",
+        "combined-stream": "1.0.5",
+        "mime-types": "2.1.16"
+      }
+    },
+    "fs-exists-sync": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/fs-exists-sync/-/fs-exists-sync-0.1.0.tgz",
+      "integrity": "sha1-mC1ok6+RjnLQjeyehnP/K1qNat0=",
+      "dev": true
+    },
+    "fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
+      "dev": true
+    },
+    "fstream": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.11.tgz",
+      "integrity": "sha1-XB+x8RdHcRTwYyoOtLcbPLD9MXE=",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "4.1.11",
+        "inherits": "2.0.3",
+        "mkdirp": "0.5.1",
+        "rimraf": "2.6.1"
+      },
+      "dependencies": {
+        "graceful-fs": {
+          "version": "4.1.11",
+          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
+          "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=",
+          "dev": true
+        }
+      }
+    },
+    "gauge": {
+      "version": "2.7.4",
+      "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
+      "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
+      "dev": true,
+      "requires": {
+        "aproba": "1.1.2",
+        "console-control-strings": "1.1.0",
+        "has-unicode": "2.0.1",
+        "object-assign": "4.1.1",
+        "signal-exit": "3.0.2",
+        "string-width": "1.0.2",
+        "strip-ansi": "3.0.1",
+        "wide-align": "1.1.2"
+      },
+      "dependencies": {
+        "object-assign": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+          "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+          "dev": true
+        }
+      }
+    },
+    "gaze": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/gaze/-/gaze-0.5.2.tgz",
+      "integrity": "sha1-QLcJU30k0dRXZ9takIaJ3+aaxE8=",
+      "dev": true,
+      "requires": {
+        "globule": "0.1.0"
+      }
+    },
+    "get-caller-file": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.2.tgz",
+      "integrity": "sha1-9wLmMSfn4jHBYKgMFVSstw1QR+U=",
+      "dev": true
+    },
+    "get-stdin": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
+      "integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4=",
+      "dev": true
+    },
+    "getpass": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
+      "integrity": "sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=",
+      "dev": true,
+      "requires": {
+        "assert-plus": "1.0.0"
+      },
+      "dependencies": {
+        "assert-plus": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+          "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
+          "dev": true
+        }
+      }
+    },
+    "glob": {
+      "version": "4.5.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-4.5.3.tgz",
+      "integrity": "sha1-xstz0yJsHv7wTePFbQEvAzd+4V8=",
+      "dev": true,
+      "requires": {
+        "inflight": "1.0.6",
+        "inherits": "2.0.3",
+        "minimatch": "2.0.10",
+        "once": "1.3.3"
+      }
+    },
+    "glob-base": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/glob-base/-/glob-base-0.3.0.tgz",
+      "integrity": "sha1-27Fk9iIbHAscz4Kuoyi0l98Oo8Q=",
+      "dev": true,
+      "requires": {
+        "glob-parent": "2.0.0",
+        "is-glob": "2.0.1"
+      }
+    },
+    "glob-parent": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-2.0.0.tgz",
+      "integrity": "sha1-gTg9ctsFT8zPUzbaqQLxgvbtuyg=",
+      "dev": true,
+      "requires": {
+        "is-glob": "2.0.1"
+      }
+    },
+    "glob-stream": {
+      "version": "3.1.18",
+      "resolved": "https://registry.npmjs.org/glob-stream/-/glob-stream-3.1.18.tgz",
+      "integrity": "sha1-kXCl8St5Awb9/lmPMT+PeVT9FDs=",
+      "dev": true,
+      "requires": {
+        "glob": "4.5.3",
+        "glob2base": "0.0.12",
+        "minimatch": "2.0.10",
+        "ordered-read-streams": "0.1.0",
+        "through2": "0.6.5",
+        "unique-stream": "1.0.0"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "1.0.34",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
+          "integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=",
+          "dev": true,
+          "requires": {
+            "core-util-is": "1.0.2",
+            "inherits": "2.0.3",
+            "isarray": "0.0.1",
+            "string_decoder": "0.10.31"
+          }
+        },
+        "through2": {
+          "version": "0.6.5",
+          "resolved": "https://registry.npmjs.org/through2/-/through2-0.6.5.tgz",
+          "integrity": "sha1-QaucZ7KdVyCQcUEOHXp6lozTrUg=",
+          "dev": true,
+          "requires": {
+            "readable-stream": "1.0.34",
+            "xtend": "4.0.1"
+          }
+        }
+      }
+    },
+    "glob-watcher": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/glob-watcher/-/glob-watcher-0.0.6.tgz",
+      "integrity": "sha1-uVtKjfdLOcgymLDAXJeLTZo7cQs=",
+      "dev": true,
+      "requires": {
+        "gaze": "0.5.2"
+      }
+    },
+    "glob2base": {
+      "version": "0.0.12",
+      "resolved": "https://registry.npmjs.org/glob2base/-/glob2base-0.0.12.tgz",
+      "integrity": "sha1-nUGbPijxLoOjYhZKJ3BVkiycDVY=",
+      "dev": true,
+      "requires": {
+        "find-index": "0.1.1"
+      }
+    },
+    "global-modules": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-0.2.3.tgz",
+      "integrity": "sha1-6lo77ULG1s6ZWk+KEmm12uIjgo0=",
+      "dev": true,
+      "requires": {
+        "global-prefix": "0.1.5",
+        "is-windows": "0.2.0"
+      }
+    },
+    "global-prefix": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-0.1.5.tgz",
+      "integrity": "sha1-jTvGuNo8qBEqFg2NSW/wRiv+948=",
+      "dev": true,
+      "requires": {
+        "homedir-polyfill": "1.0.1",
+        "ini": "1.3.4",
+        "is-windows": "0.2.0",
+        "which": "1.3.0"
+      }
+    },
+    "globule": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/globule/-/globule-0.1.0.tgz",
+      "integrity": "sha1-2cjt3h2nnRJaFRt5UzuXhnY0auU=",
+      "dev": true,
+      "requires": {
+        "glob": "3.1.21",
+        "lodash": "1.0.2",
+        "minimatch": "0.2.14"
+      },
+      "dependencies": {
+        "glob": {
+          "version": "3.1.21",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-3.1.21.tgz",
+          "integrity": "sha1-0p4KBV3qUTj00H7UDomC6DwgZs0=",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "1.2.3",
+            "inherits": "1.0.2",
+            "minimatch": "0.2.14"
+          }
+        },
+        "graceful-fs": {
+          "version": "1.2.3",
+          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-1.2.3.tgz",
+          "integrity": "sha1-FaSAaldUfLLS2/J/QuiajDRRs2Q=",
+          "dev": true
+        },
+        "inherits": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-1.0.2.tgz",
+          "integrity": "sha1-ykMJ2t7mtUzAuNJH6NfHoJdb3Js=",
+          "dev": true
+        },
+        "minimatch": {
+          "version": "0.2.14",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-0.2.14.tgz",
+          "integrity": "sha1-x054BXT2PG+aCQ6Q775u9TpqdWo=",
+          "dev": true,
+          "requires": {
+            "lru-cache": "2.7.3",
+            "sigmund": "1.0.1"
+          }
+        }
+      }
+    },
+    "glogg": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/glogg/-/glogg-1.0.0.tgz",
+      "integrity": "sha1-f+DxmfV6yQbPUS/urY+Q7kooT8U=",
+      "dev": true,
+      "requires": {
+        "sparkles": "1.0.0"
+      }
+    },
+    "gonzales-pe": {
+      "version": "3.0.0-28",
+      "resolved": "https://registry.npmjs.org/gonzales-pe/-/gonzales-pe-3.0.0-28.tgz",
+      "integrity": "sha1-3VC0HdFbaCooxA5fD/IAeQGsYr0=",
+      "dev": true
+    },
+    "graceful-fs": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-3.0.11.tgz",
+      "integrity": "sha1-dhPHeKGv6mLyXGMKCG1/Osu92Bg=",
+      "dev": true,
+      "requires": {
+        "natives": "1.1.0"
+      }
+    },
+    "gulp": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/gulp/-/gulp-3.9.1.tgz",
+      "integrity": "sha1-VxzkWSjdQK9lFPxAEYZgFsE4RbQ=",
+      "dev": true,
+      "requires": {
+        "archy": "1.0.0",
+        "chalk": "1.1.3",
+        "deprecated": "0.0.1",
+        "gulp-util": "3.0.8",
+        "interpret": "1.0.3",
+        "liftoff": "2.3.0",
+        "minimist": "1.2.0",
+        "orchestrator": "0.3.8",
+        "pretty-hrtime": "1.0.3",
+        "semver": "4.3.6",
+        "tildify": "1.2.0",
+        "v8flags": "2.1.1",
+        "vinyl-fs": "0.3.14"
+      }
+    },
+    "gulp-autoprefixer": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/gulp-autoprefixer/-/gulp-autoprefixer-4.0.0.tgz",
+      "integrity": "sha1-4AqMVxuF0GUWrCY0G+kN/Z/B6rA=",
+      "dev": true,
+      "requires": {
+        "autoprefixer": "7.1.3",
+        "gulp-util": "3.0.8",
+        "postcss": "6.0.10",
+        "through2": "2.0.3",
+        "vinyl-sourcemaps-apply": "0.2.1"
+      }
+    },
+    "gulp-clean-css": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/gulp-clean-css/-/gulp-clean-css-3.7.0.tgz",
+      "integrity": "sha1-VLM1JtyJmTCUn7N7TKz4UcXV2Ts=",
+      "dev": true,
+      "requires": {
+        "clean-css": "4.1.7",
+        "gulp-util": "3.0.8",
+        "through2": "2.0.3",
+        "vinyl-sourcemaps-apply": "0.2.1"
+      }
+    },
+    "gulp-csscomb": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/gulp-csscomb/-/gulp-csscomb-3.0.8.tgz",
+      "integrity": "sha1-3zSCSlgKTH0zUcHo67ateh1aibc=",
+      "dev": true,
+      "requires": {
+        "csscomb": "3.1.8",
+        "gulp-util": "3.0.8",
+        "through2": "2.0.3"
+      }
+    },
+    "gulp-rename": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/gulp-rename/-/gulp-rename-1.2.2.tgz",
+      "integrity": "sha1-OtRCh2PwXidk3sHGfYaNsnVoeBc=",
+      "dev": true
+    },
+    "gulp-sass": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/gulp-sass/-/gulp-sass-3.1.0.tgz",
+      "integrity": "sha1-U9xLaKH13f5EJKtMJHZVJpqLdLc=",
+      "dev": true,
+      "requires": {
+        "gulp-util": "3.0.8",
+        "lodash.clonedeep": "4.5.0",
+        "node-sass": "4.5.3",
+        "through2": "2.0.3",
+        "vinyl-sourcemaps-apply": "0.2.1"
+      }
+    },
+    "gulp-util": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/gulp-util/-/gulp-util-3.0.8.tgz",
+      "integrity": "sha1-AFTh50RQLifATBh8PsxQXdVLu08=",
+      "dev": true,
+      "requires": {
+        "array-differ": "1.0.0",
+        "array-uniq": "1.0.3",
+        "beeper": "1.1.1",
+        "chalk": "1.1.3",
+        "dateformat": "2.0.0",
+        "fancy-log": "1.3.0",
+        "gulplog": "1.0.0",
+        "has-gulplog": "0.1.0",
+        "lodash._reescape": "3.0.0",
+        "lodash._reevaluate": "3.0.0",
+        "lodash._reinterpolate": "3.0.0",
+        "lodash.template": "3.6.2",
+        "minimist": "1.2.0",
+        "multipipe": "0.1.2",
+        "object-assign": "3.0.0",
+        "replace-ext": "0.0.1",
+        "through2": "2.0.3",
+        "vinyl": "0.5.3"
+      }
+    },
+    "gulplog": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/gulplog/-/gulplog-1.0.0.tgz",
+      "integrity": "sha1-4oxNRdBey77YGDY86PnFkmIp/+U=",
+      "dev": true,
+      "requires": {
+        "glogg": "1.0.0"
+      }
+    },
+    "har-schema": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-1.0.5.tgz",
+      "integrity": "sha1-0mMTX0MwfALGAq/I/pWXDAFRNp4=",
+      "dev": true
+    },
+    "har-validator": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-4.2.1.tgz",
+      "integrity": "sha1-M0gdDxu/9gDdID11gSpqX7oALio=",
+      "dev": true,
+      "requires": {
+        "ajv": "4.11.8",
+        "har-schema": "1.0.5"
+      }
+    },
+    "has-ansi": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
+      "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=",
+      "dev": true,
+      "requires": {
+        "ansi-regex": "2.1.1"
+      }
+    },
+    "has-flag": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-2.0.0.tgz",
+      "integrity": "sha1-6CB68cx7MNRGzHC3NLXovhj4jVE=",
+      "dev": true
+    },
+    "has-gulplog": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/has-gulplog/-/has-gulplog-0.1.0.tgz",
+      "integrity": "sha1-ZBTIKRNpfaUVkDl9r7EvIpZ4Ec4=",
+      "dev": true,
+      "requires": {
+        "sparkles": "1.0.0"
+      }
+    },
+    "has-unicode": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
+      "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
+      "dev": true
+    },
+    "hawk": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/hawk/-/hawk-3.1.3.tgz",
+      "integrity": "sha1-B4REvXwWQLD+VA0sm3PVlnjo4cQ=",
+      "dev": true,
+      "requires": {
+        "boom": "2.10.1",
+        "cryptiles": "2.0.5",
+        "hoek": "2.16.3",
+        "sntp": "1.0.9"
+      }
+    },
+    "hoek": {
+      "version": "2.16.3",
+      "resolved": "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz",
+      "integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0=",
+      "dev": true
+    },
+    "homedir-polyfill": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.1.tgz",
+      "integrity": "sha1-TCu8inWJmP7r9e1oWA921GdotLw=",
+      "dev": true,
+      "requires": {
+        "parse-passwd": "1.0.0"
+      }
+    },
+    "hosted-git-info": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.5.0.tgz",
+      "integrity": "sha512-pNgbURSuab90KbTqvRPsseaTxOJCZBD0a7t+haSN33piP9cCM4l0CqdzAif2hUqm716UovKB2ROmiabGAKVXyg==",
+      "dev": true
+    },
+    "http-signature": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.1.1.tgz",
+      "integrity": "sha1-33LiZwZs0Kxn+3at+OE0qPvPkb8=",
+      "dev": true,
+      "requires": {
+        "assert-plus": "0.2.0",
+        "jsprim": "1.4.1",
+        "sshpk": "1.13.1"
+      }
+    },
+    "in-publish": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/in-publish/-/in-publish-2.0.0.tgz",
+      "integrity": "sha1-4g/146KvwmkDILbcVSaCqcf631E=",
+      "dev": true
+    },
+    "indent-string": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-2.1.0.tgz",
+      "integrity": "sha1-ji1INIdCEhtKghi3oTfppSBJ3IA=",
+      "dev": true,
+      "requires": {
+        "repeating": "2.0.1"
+      }
+    },
+    "inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
+      "dev": true,
+      "requires": {
+        "once": "1.3.3",
+        "wrappy": "1.0.2"
+      }
+    },
+    "inherits": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
+      "dev": true
+    },
+    "ini": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.4.tgz",
+      "integrity": "sha1-BTfLedr1m1mhpRff9wbIbsA5Fi4=",
+      "dev": true
+    },
+    "interpret": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.0.3.tgz",
+      "integrity": "sha1-y8NcYu7uc/Gat7EKgBURQBr8D5A=",
+      "dev": true
+    },
+    "invert-kv": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-1.0.0.tgz",
+      "integrity": "sha1-EEqOSqym09jNFXqO+L+rLXo//bY=",
+      "dev": true
+    },
+    "is-absolute": {
+      "version": "0.2.6",
+      "resolved": "https://registry.npmjs.org/is-absolute/-/is-absolute-0.2.6.tgz",
+      "integrity": "sha1-IN5p89uULvLYe5wto28XIjWxtes=",
+      "dev": true,
+      "requires": {
+        "is-relative": "0.2.1",
+        "is-windows": "0.2.0"
+      }
+    },
+    "is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=",
+      "dev": true
+    },
+    "is-buffer": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.5.tgz",
+      "integrity": "sha1-Hzsm72E7IUuIy8ojzGwB2Hlh7sw=",
+      "dev": true
+    },
+    "is-builtin-module": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-1.0.0.tgz",
+      "integrity": "sha1-VAVy0096wxGfj3bDDLwbHgN6/74=",
+      "dev": true,
+      "requires": {
+        "builtin-modules": "1.1.1"
+      }
+    },
+    "is-dotfile": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/is-dotfile/-/is-dotfile-1.0.3.tgz",
+      "integrity": "sha1-pqLzL/0t+wT1yiXs0Pa4PPeYoeE=",
+      "dev": true
+    },
+    "is-equal-shallow": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/is-equal-shallow/-/is-equal-shallow-0.1.3.tgz",
+      "integrity": "sha1-IjgJj8Ih3gvPpdnqxMRdY4qhxTQ=",
+      "dev": true,
+      "requires": {
+        "is-primitive": "2.0.0"
+      }
+    },
+    "is-extendable": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
+      "integrity": "sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik=",
+      "dev": true
+    },
+    "is-extglob": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz",
+      "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=",
+      "dev": true
+    },
+    "is-finite": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-finite/-/is-finite-1.0.2.tgz",
+      "integrity": "sha1-zGZ3aVYCvlUO8R6LSqYwU0K20Ko=",
+      "dev": true,
+      "requires": {
+        "number-is-nan": "1.0.1"
+      }
+    },
+    "is-fullwidth-code-point": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
+      "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
+      "dev": true,
+      "requires": {
+        "number-is-nan": "1.0.1"
+      }
+    },
+    "is-glob": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz",
+      "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=",
+      "dev": true,
+      "requires": {
+        "is-extglob": "1.0.0"
+      }
+    },
+    "is-number": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-2.1.0.tgz",
+      "integrity": "sha1-Afy7s5NGOlSPL0ZszhbezknbkI8=",
+      "dev": true,
+      "requires": {
+        "kind-of": "3.2.2"
+      }
+    },
+    "is-plain-object": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
+      "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
+      "dev": true,
+      "requires": {
+        "isobject": "3.0.1"
+      },
+      "dependencies": {
+        "isobject": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
+          "dev": true
+        }
+      }
+    },
+    "is-posix-bracket": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/is-posix-bracket/-/is-posix-bracket-0.1.1.tgz",
+      "integrity": "sha1-MzTceXdDaOkvAW5vvAqI9c1ua8Q=",
+      "dev": true
+    },
+    "is-primitive": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-primitive/-/is-primitive-2.0.0.tgz",
+      "integrity": "sha1-IHurkWOEmcB7Kt8kCkGochADRXU=",
+      "dev": true
+    },
+    "is-relative": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-relative/-/is-relative-0.2.1.tgz",
+      "integrity": "sha1-0n9MfVFtF1+2ENuEu+7yPDvJeqU=",
+      "dev": true,
+      "requires": {
+        "is-unc-path": "0.1.2"
+      }
+    },
+    "is-typedarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
+      "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=",
+      "dev": true
+    },
+    "is-unc-path": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/is-unc-path/-/is-unc-path-0.1.2.tgz",
+      "integrity": "sha1-arBTpyVzwQJQ/0FqOBTDUXivObk=",
+      "dev": true,
+      "requires": {
+        "unc-path-regex": "0.1.2"
+      }
+    },
+    "is-utf8": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz",
+      "integrity": "sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=",
+      "dev": true
+    },
+    "is-windows": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-0.2.0.tgz",
+      "integrity": "sha1-3hqm1j6indJIc3tp8f+LgALSEIw=",
+      "dev": true
+    },
+    "isarray": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+      "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=",
+      "dev": true
+    },
+    "isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
+      "dev": true
+    },
+    "isobject": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/isobject/-/isobject-2.1.0.tgz",
+      "integrity": "sha1-8GVWEJaj8dou9GJy+BXIQNh+DIk=",
+      "dev": true,
+      "requires": {
+        "isarray": "1.0.0"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
+          "dev": true
+        }
+      }
+    },
+    "isstream": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
+      "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
+      "dev": true
+    },
+    "js-base64": {
+      "version": "2.1.9",
+      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.1.9.tgz",
+      "integrity": "sha1-8OgK4DmkvWVLXygfyT8EqRSn/M4=",
+      "dev": true
+    },
+    "jsbn": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
+      "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM=",
+      "dev": true,
+      "optional": true
+    },
+    "json-schema": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz",
+      "integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM=",
+      "dev": true
+    },
+    "json-stable-stringify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz",
+      "integrity": "sha1-mnWdOcXy/1A/1TAGRu1EX4jE+a8=",
+      "dev": true,
+      "requires": {
+        "jsonify": "0.0.0"
+      }
+    },
+    "json-stringify-safe": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
+      "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=",
+      "dev": true
+    },
+    "jsonify": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.0.tgz",
+      "integrity": "sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM=",
+      "dev": true
+    },
+    "jsprim": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz",
+      "integrity": "sha1-MT5mvB5cwG5Di8G3SZwuXFastqI=",
+      "dev": true,
+      "requires": {
+        "assert-plus": "1.0.0",
+        "extsprintf": "1.3.0",
+        "json-schema": "0.2.3",
+        "verror": "1.10.0"
+      },
+      "dependencies": {
+        "assert-plus": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+          "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
+          "dev": true
+        }
+      }
+    },
+    "kind-of": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+      "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+      "dev": true,
+      "requires": {
+        "is-buffer": "1.1.5"
+      }
+    },
+    "lcid": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/lcid/-/lcid-1.0.0.tgz",
+      "integrity": "sha1-MIrMr6C8SDo4Z7S28rlQYlHRuDU=",
+      "dev": true,
+      "requires": {
+        "invert-kv": "1.0.0"
+      }
+    },
+    "liftoff": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/liftoff/-/liftoff-2.3.0.tgz",
+      "integrity": "sha1-qY8v9nGD2Lp8+soQVIvX/wVQs4U=",
+      "dev": true,
+      "requires": {
+        "extend": "3.0.1",
+        "findup-sync": "0.4.3",
+        "fined": "1.1.0",
+        "flagged-respawn": "0.3.2",
+        "lodash.isplainobject": "4.0.6",
+        "lodash.isstring": "4.0.1",
+        "lodash.mapvalues": "4.6.0",
+        "rechoir": "0.6.2",
+        "resolve": "1.4.0"
+      }
+    },
+    "load-json-file": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
+      "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "4.1.11",
+        "parse-json": "2.2.0",
+        "pify": "2.3.0",
+        "pinkie-promise": "2.0.1",
+        "strip-bom": "2.0.0"
+      },
+      "dependencies": {
+        "graceful-fs": {
+          "version": "4.1.11",
+          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
+          "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=",
+          "dev": true
+        },
+        "strip-bom": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz",
+          "integrity": "sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=",
+          "dev": true,
+          "requires": {
+            "is-utf8": "0.2.1"
+          }
+        }
+      }
+    },
+    "lodash": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-1.0.2.tgz",
+      "integrity": "sha1-j1dWDIO1n8JwvT1WG2kAQ0MOJVE=",
+      "dev": true
+    },
+    "lodash._basecopy": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz",
+      "integrity": "sha1-jaDmqHbPNEwK2KVIghEd08XHyjY=",
+      "dev": true
+    },
+    "lodash._basetostring": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/lodash._basetostring/-/lodash._basetostring-3.0.1.tgz",
+      "integrity": "sha1-0YYdh3+CSlL2aYMtyvPuFVZqB9U=",
+      "dev": true
+    },
+    "lodash._basevalues": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/lodash._basevalues/-/lodash._basevalues-3.0.0.tgz",
+      "integrity": "sha1-W3dXYoAr3j0yl1A+JjAIIP32Ybc=",
+      "dev": true
+    },
+    "lodash._getnative": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/lodash._getnative/-/lodash._getnative-3.9.1.tgz",
+      "integrity": "sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U=",
+      "dev": true
+    },
+    "lodash._isiterateecall": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/lodash._isiterateecall/-/lodash._isiterateecall-3.0.9.tgz",
+      "integrity": "sha1-UgOte6Ql+uhCRg5pbbnPPmqsBXw=",
+      "dev": true
+    },
+    "lodash._reescape": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/lodash._reescape/-/lodash._reescape-3.0.0.tgz",
+      "integrity": "sha1-Kx1vXf4HyKNVdT5fJ/rH8c3hYWo=",
+      "dev": true
+    },
+    "lodash._reevaluate": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/lodash._reevaluate/-/lodash._reevaluate-3.0.0.tgz",
+      "integrity": "sha1-WLx0xAZklTrgsSTYBpltrKQx4u0=",
+      "dev": true
+    },
+    "lodash._reinterpolate": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
+      "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=",
+      "dev": true
+    },
+    "lodash._root": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/lodash._root/-/lodash._root-3.0.1.tgz",
+      "integrity": "sha1-+6HEUkwZ7ppfgTa0YJ8BfPTe1pI=",
+      "dev": true
+    },
+    "lodash.assign": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz",
+      "integrity": "sha1-DZnzzNem0mHRm9rrkkUAXShYCOc=",
+      "dev": true
+    },
+    "lodash.clonedeep": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
+      "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=",
+      "dev": true
+    },
+    "lodash.escape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-3.2.0.tgz",
+      "integrity": "sha1-mV7g3BjBtIzJLv+ucaEKq1tIdpg=",
+      "dev": true,
+      "requires": {
+        "lodash._root": "3.0.1"
+      }
+    },
+    "lodash.isarguments": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz",
+      "integrity": "sha1-L1c9hcaiQon/AGY7SRwdM4/zRYo=",
+      "dev": true
+    },
+    "lodash.isarray": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.4.tgz",
+      "integrity": "sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U=",
+      "dev": true
+    },
+    "lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs=",
+      "dev": true
+    },
+    "lodash.isstring": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
+      "integrity": "sha1-1SfftUVuynzJu5XV2ur4i6VKVFE=",
+      "dev": true
+    },
+    "lodash.keys": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.1.2.tgz",
+      "integrity": "sha1-TbwEcrFWvlCgsoaFXRvQsMZWCYo=",
+      "dev": true,
+      "requires": {
+        "lodash._getnative": "3.9.1",
+        "lodash.isarguments": "3.1.0",
+        "lodash.isarray": "3.0.4"
+      }
+    },
+    "lodash.mapvalues": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.mapvalues/-/lodash.mapvalues-4.6.0.tgz",
+      "integrity": "sha1-G6+lAF3p3W9PJmaMMMo3IwzJaJw=",
+      "dev": true
+    },
+    "lodash.mergewith": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.mergewith/-/lodash.mergewith-4.6.0.tgz",
+      "integrity": "sha1-FQzwoWeR9ZA7iJHqsVRgknS96lU=",
+      "dev": true
+    },
+    "lodash.restparam": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/lodash.restparam/-/lodash.restparam-3.6.1.tgz",
+      "integrity": "sha1-k2pOMJ7zMKdkXtQUWYbIWuWyCAU=",
+      "dev": true
+    },
+    "lodash.template": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-3.6.2.tgz",
+      "integrity": "sha1-+M3sxhaaJVvpCYrosMU9N4kx0U8=",
+      "dev": true,
+      "requires": {
+        "lodash._basecopy": "3.0.1",
+        "lodash._basetostring": "3.0.1",
+        "lodash._basevalues": "3.0.0",
+        "lodash._isiterateecall": "3.0.9",
+        "lodash._reinterpolate": "3.0.0",
+        "lodash.escape": "3.2.0",
+        "lodash.keys": "3.1.2",
+        "lodash.restparam": "3.6.1",
+        "lodash.templatesettings": "3.1.1"
+      }
+    },
+    "lodash.templatesettings": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-3.1.1.tgz",
+      "integrity": "sha1-+zB4RHU7Zrnxr6VOJix0UwfbqOU=",
+      "dev": true,
+      "requires": {
+        "lodash._reinterpolate": "3.0.0",
+        "lodash.escape": "3.2.0"
+      }
+    },
+    "loud-rejection": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/loud-rejection/-/loud-rejection-1.6.0.tgz",
+      "integrity": "sha1-W0b4AUft7leIcPCG0Eghz5mOVR8=",
+      "dev": true,
+      "requires": {
+        "currently-unhandled": "0.4.1",
+        "signal-exit": "3.0.2"
+      }
+    },
+    "lru-cache": {
+      "version": "2.7.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.7.3.tgz",
+      "integrity": "sha1-bUUk6LlV+V1PW1iFHOId1y+06VI=",
+      "dev": true
+    },
+    "map-cache": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz",
+      "integrity": "sha1-wyq9C9ZSXZsFFkW7TyasXcmKDb8=",
+      "dev": true
+    },
+    "map-obj": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
+      "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=",
+      "dev": true
+    },
+    "meow": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/meow/-/meow-3.7.0.tgz",
+      "integrity": "sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=",
+      "dev": true,
+      "requires": {
+        "camelcase-keys": "2.1.0",
+        "decamelize": "1.2.0",
+        "loud-rejection": "1.6.0",
+        "map-obj": "1.0.1",
+        "minimist": "1.2.0",
+        "normalize-package-data": "2.4.0",
+        "object-assign": "4.1.1",
+        "read-pkg-up": "1.0.1",
+        "redent": "1.0.0",
+        "trim-newlines": "1.0.0"
+      },
+      "dependencies": {
+        "object-assign": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+          "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+          "dev": true
+        }
+      }
+    },
+    "micromatch": {
+      "version": "2.3.11",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-2.3.11.tgz",
+      "integrity": "sha1-hmd8l9FyCzY0MdBNDRUpO9OMFWU=",
+      "dev": true,
+      "requires": {
+        "arr-diff": "2.0.0",
+        "array-unique": "0.2.1",
+        "braces": "1.8.5",
+        "expand-brackets": "0.1.5",
+        "extglob": "0.3.2",
+        "filename-regex": "2.0.1",
+        "is-extglob": "1.0.0",
+        "is-glob": "2.0.1",
+        "kind-of": "3.2.2",
+        "normalize-path": "2.1.1",
+        "object.omit": "2.0.1",
+        "parse-glob": "3.0.4",
+        "regex-cache": "0.4.3"
+      }
+    },
+    "mime-db": {
+      "version": "1.29.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.29.0.tgz",
+      "integrity": "sha1-SNJtI1WJZRcErFkWygYAGRQmaHg=",
+      "dev": true
+    },
+    "mime-types": {
+      "version": "2.1.16",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.16.tgz",
+      "integrity": "sha1-K4WKUuXs1RbbiXrCvodIeDBpjiM=",
+      "dev": true,
+      "requires": {
+        "mime-db": "1.29.0"
+      }
+    },
+    "minimatch": {
+      "version": "2.0.10",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-2.0.10.tgz",
+      "integrity": "sha1-jQh8OcazjAAbl/ynzm0OHoCvusc=",
+      "dev": true,
+      "requires": {
+        "brace-expansion": "1.1.8"
+      }
+    },
+    "minimist": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+      "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
+      "dev": true
+    },
+    "mkdirp": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
+      "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
+      "dev": true,
+      "requires": {
+        "minimist": "0.0.8"
+      },
+      "dependencies": {
+        "minimist": {
+          "version": "0.0.8",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
+          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
+          "dev": true
+        }
+      }
+    },
+    "multipipe": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/multipipe/-/multipipe-0.1.2.tgz",
+      "integrity": "sha1-Ko8t33Du1WTf8tV/HhoTfZ8FB4s=",
+      "dev": true,
+      "requires": {
+        "duplexer2": "0.0.2"
+      }
+    },
+    "nan": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.6.2.tgz",
+      "integrity": "sha1-5P805slf37WuzAjeZZb0NgWn20U=",
+      "dev": true
+    },
+    "natives": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/natives/-/natives-1.1.0.tgz",
+      "integrity": "sha1-6f+EFBimsux6SV6TmYT3jxY+bjE=",
+      "dev": true
+    },
+    "node-gyp": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-3.6.2.tgz",
+      "integrity": "sha1-m/vlRWIoYoSDjnUOrAUpWFP6HGA=",
+      "dev": true,
+      "requires": {
+        "fstream": "1.0.11",
+        "glob": "7.1.2",
+        "graceful-fs": "4.1.11",
+        "minimatch": "3.0.4",
+        "mkdirp": "0.5.1",
+        "nopt": "3.0.6",
+        "npmlog": "4.1.2",
+        "osenv": "0.1.4",
+        "request": "2.81.0",
+        "rimraf": "2.6.1",
+        "semver": "5.3.0",
+        "tar": "2.2.1",
+        "which": "1.3.0"
+      },
+      "dependencies": {
+        "glob": {
+          "version": "7.1.2",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
+          "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
+          "dev": true,
+          "requires": {
+            "fs.realpath": "1.0.0",
+            "inflight": "1.0.6",
+            "inherits": "2.0.3",
+            "minimatch": "3.0.4",
+            "once": "1.3.3",
+            "path-is-absolute": "1.0.1"
+          }
+        },
+        "graceful-fs": {
+          "version": "4.1.11",
+          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
+          "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=",
+          "dev": true
+        },
+        "minimatch": {
+          "version": "3.0.4",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
+          "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+          "dev": true,
+          "requires": {
+            "brace-expansion": "1.1.8"
+          }
+        },
+        "semver": {
+          "version": "5.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
+          "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8=",
+          "dev": true
+        }
+      }
+    },
+    "node-sass": {
+      "version": "4.5.3",
+      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.5.3.tgz",
+      "integrity": "sha1-0JydEXlkEjnRuX/8YjH9zsU+FWg=",
+      "dev": true,
+      "requires": {
+        "async-foreach": "0.1.3",
+        "chalk": "1.1.3",
+        "cross-spawn": "3.0.1",
+        "gaze": "1.1.2",
+        "get-stdin": "4.0.1",
+        "glob": "7.1.2",
+        "in-publish": "2.0.0",
+        "lodash.assign": "4.2.0",
+        "lodash.clonedeep": "4.5.0",
+        "lodash.mergewith": "4.6.0",
+        "meow": "3.7.0",
+        "mkdirp": "0.5.1",
+        "nan": "2.6.2",
+        "node-gyp": "3.6.2",
+        "npmlog": "4.1.2",
+        "request": "2.81.0",
+        "sass-graph": "2.2.4",
+        "stdout-stream": "1.4.0"
+      },
+      "dependencies": {
+        "gaze": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/gaze/-/gaze-1.1.2.tgz",
+          "integrity": "sha1-hHIkZ3rbiHDWeSV+0ziP22HkAQU=",
+          "dev": true,
+          "requires": {
+            "globule": "1.2.0"
+          }
+        },
+        "glob": {
+          "version": "7.1.2",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
+          "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
+          "dev": true,
+          "requires": {
+            "fs.realpath": "1.0.0",
+            "inflight": "1.0.6",
+            "inherits": "2.0.3",
+            "minimatch": "3.0.4",
+            "once": "1.3.3",
+            "path-is-absolute": "1.0.1"
+          }
+        },
+        "globule": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/globule/-/globule-1.2.0.tgz",
+          "integrity": "sha1-HcScaCLdnoovoAuiopUAboZkvQk=",
+          "dev": true,
+          "requires": {
+            "glob": "7.1.2",
+            "lodash": "4.17.4",
+            "minimatch": "3.0.4"
+          }
+        },
+        "lodash": {
+          "version": "4.17.4",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz",
+          "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4=",
+          "dev": true
+        },
+        "minimatch": {
+          "version": "3.0.4",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
+          "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+          "dev": true,
+          "requires": {
+            "brace-expansion": "1.1.8"
+          }
+        }
+      }
+    },
+    "node-uuid": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/node-uuid/-/node-uuid-1.4.0.tgz",
+      "integrity": "sha1-B/myM3Vy/2J1x3Xh1IUT86RdemU=",
+      "dev": true
+    },
+    "nopt": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-3.0.6.tgz",
+      "integrity": "sha1-xkZdvwirzU2zWTF/eaxopkayj/k=",
+      "dev": true,
+      "requires": {
+        "abbrev": "1.1.0"
+      }
+    },
+    "normalize-package-data": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.4.0.tgz",
+      "integrity": "sha512-9jjUFbTPfEy3R/ad/2oNbKtW9Hgovl5O1FvFWKkKblNXoN/Oou6+9+KKohPK13Yc3/TyunyWhJp6gvRNR/PPAw==",
+      "dev": true,
+      "requires": {
+        "hosted-git-info": "2.5.0",
+        "is-builtin-module": "1.0.0",
+        "semver": "4.3.6",
+        "validate-npm-package-license": "3.0.1"
+      }
+    },
+    "normalize-path": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
+      "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=",
+      "dev": true,
+      "requires": {
+        "remove-trailing-separator": "1.1.0"
+      }
+    },
+    "normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
+      "dev": true
+    },
+    "npmlog": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
+      "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
+      "dev": true,
+      "requires": {
+        "are-we-there-yet": "1.1.4",
+        "console-control-strings": "1.1.0",
+        "gauge": "2.7.4",
+        "set-blocking": "2.0.0"
+      }
+    },
+    "num2fraction": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
+      "integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=",
+      "dev": true
+    },
+    "number-is-nan": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
+      "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
+      "dev": true
+    },
+    "oauth-sign": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.8.2.tgz",
+      "integrity": "sha1-Rqarfwrq2N6unsBWV4C31O/rnUM=",
+      "dev": true
+    },
+    "object-assign": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-3.0.0.tgz",
+      "integrity": "sha1-m+3VygiXlJvKR+f/QIBi1Un1h/I=",
+      "dev": true
+    },
+    "object.defaults": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/object.defaults/-/object.defaults-1.1.0.tgz",
+      "integrity": "sha1-On+GgzS0B96gbaFtiNXNKeQ1/s8=",
+      "dev": true,
+      "requires": {
+        "array-each": "1.0.1",
+        "array-slice": "1.0.0",
+        "for-own": "1.0.0",
+        "isobject": "3.0.1"
+      },
+      "dependencies": {
+        "for-own": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/for-own/-/for-own-1.0.0.tgz",
+          "integrity": "sha1-xjMy9BXO3EsE2/5wz4NklMU8tEs=",
+          "dev": true,
+          "requires": {
+            "for-in": "1.0.2"
+          }
+        },
+        "isobject": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
+          "dev": true
+        }
+      }
+    },
+    "object.omit": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/object.omit/-/object.omit-2.0.1.tgz",
+      "integrity": "sha1-Gpx0SCnznbuFjHbKNXmuKlTr0fo=",
+      "dev": true,
+      "requires": {
+        "for-own": "0.1.5",
+        "is-extendable": "0.1.1"
+      }
+    },
+    "object.pick": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/object.pick/-/object.pick-1.3.0.tgz",
+      "integrity": "sha1-h6EKxMFpS9Lhy/U1kaZhQftd10c=",
+      "dev": true,
+      "requires": {
+        "isobject": "3.0.1"
+      },
+      "dependencies": {
+        "isobject": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
+          "dev": true
+        }
+      }
+    },
+    "once": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.3.3.tgz",
+      "integrity": "sha1-suJhVXzkwxTsgwTz+oJmPkKXyiA=",
+      "dev": true,
+      "requires": {
+        "wrappy": "1.0.2"
+      }
+    },
+    "orchestrator": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/orchestrator/-/orchestrator-0.3.8.tgz",
+      "integrity": "sha1-FOfp4nZPcxX7rBhOUGx6pt+UrX4=",
+      "dev": true,
+      "requires": {
+        "end-of-stream": "0.1.5",
+        "sequencify": "0.0.7",
+        "stream-consume": "0.1.0"
+      }
+    },
+    "ordered-read-streams": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/ordered-read-streams/-/ordered-read-streams-0.1.0.tgz",
+      "integrity": "sha1-/VZamvjrRHO6abbtijQ1LLVS8SY=",
+      "dev": true
+    },
+    "os-homedir": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
+      "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
+      "dev": true
+    },
+    "os-locale": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
+      "integrity": "sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=",
+      "dev": true,
+      "requires": {
+        "lcid": "1.0.0"
+      }
+    },
+    "os-tmpdir": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
+      "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
+      "dev": true
+    },
+    "osenv": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.4.tgz",
+      "integrity": "sha1-Qv5tWVPfBsgGS+bxdsPQWqqjRkQ=",
+      "dev": true,
+      "requires": {
+        "os-homedir": "1.0.2",
+        "os-tmpdir": "1.0.2"
+      }
+    },
+    "parse-filepath": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parse-filepath/-/parse-filepath-1.0.1.tgz",
+      "integrity": "sha1-FZ1hVdQ5BNFsEO9piRHaHpGWm3M=",
+      "dev": true,
+      "requires": {
+        "is-absolute": "0.2.6",
+        "map-cache": "0.2.2",
+        "path-root": "0.1.1"
+      }
+    },
+    "parse-glob": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/parse-glob/-/parse-glob-3.0.4.tgz",
+      "integrity": "sha1-ssN2z7EfNVE7rdFz7wu246OIORw=",
+      "dev": true,
+      "requires": {
+        "glob-base": "0.3.0",
+        "is-dotfile": "1.0.3",
+        "is-extglob": "1.0.0",
+        "is-glob": "2.0.1"
+      }
+    },
+    "parse-json": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz",
+      "integrity": "sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=",
+      "dev": true,
+      "requires": {
+        "error-ex": "1.3.1"
+      }
+    },
+    "parse-passwd": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/parse-passwd/-/parse-passwd-1.0.0.tgz",
+      "integrity": "sha1-bVuTSkVpk7I9N/QKOC1vFmao5cY=",
+      "dev": true
+    },
+    "path-exists": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz",
+      "integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=",
+      "dev": true,
+      "requires": {
+        "pinkie-promise": "2.0.1"
+      }
+    },
+    "path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
+      "dev": true
+    },
+    "path-parse": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.5.tgz",
+      "integrity": "sha1-PBrfhx6pzWyUMbbqK9dKD/BVxME=",
+      "dev": true
+    },
+    "path-root": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/path-root/-/path-root-0.1.1.tgz",
+      "integrity": "sha1-mkpoFMrBwM1zNgqV8yCDyOpHRbc=",
+      "dev": true,
+      "requires": {
+        "path-root-regex": "0.1.2"
+      }
+    },
+    "path-root-regex": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/path-root-regex/-/path-root-regex-0.1.2.tgz",
+      "integrity": "sha1-v8zcjfWxLcUsi0PsONGNcsBLqW0=",
+      "dev": true
+    },
+    "path-type": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz",
+      "integrity": "sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "4.1.11",
+        "pify": "2.3.0",
+        "pinkie-promise": "2.0.1"
+      },
+      "dependencies": {
+        "graceful-fs": {
+          "version": "4.1.11",
+          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
+          "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=",
+          "dev": true
+        }
+      }
+    },
+    "performance-now": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-0.2.0.tgz",
+      "integrity": "sha1-M+8wxcd9TqIcWlOGnZG1bY8lVeU=",
+      "dev": true
+    },
+    "pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
+      "dev": true
+    },
+    "pinkie": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
+      "integrity": "sha1-clVrgM+g1IqXToDnckjoDtT3+HA=",
+      "dev": true
+    },
+    "pinkie-promise": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz",
+      "integrity": "sha1-ITXW36ejWMBprJsXh3YogihFD/o=",
+      "dev": true,
+      "requires": {
+        "pinkie": "2.0.4"
+      }
+    },
+    "postcss": {
+      "version": "6.0.10",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.10.tgz",
+      "integrity": "sha512-7WOpqea/cQHH1XUXdN1mqoFFmhigW3KAXJ+ssMOk/f6mKmwqFgqqdwsnjLGH+wuY+kwaJvT4whHcfKt5kWga0A==",
+      "dev": true,
+      "requires": {
+        "chalk": "2.1.0",
+        "source-map": "0.5.7",
+        "supports-color": "4.2.1"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.0.tgz",
+          "integrity": "sha512-NnSOmMEYtVR2JVMIGTzynRkkaxtiq1xnFBcdQD/DnNCYPoEPsVJhM98BDyaoNOQIi7p4okdi3E27eN7GQbsUug==",
+          "dev": true,
+          "requires": {
+            "color-convert": "1.9.0"
+          }
+        },
+        "chalk": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.1.0.tgz",
+          "integrity": "sha512-LUHGS/dge4ujbXMJrnihYMcL4AoOweGnw9Tp3kQuqy1Kx5c1qKjqvMJZ6nVJPMWJtKCTN72ZogH3oeSO9g9rXQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "3.2.0",
+            "escape-string-regexp": "1.0.5",
+            "supports-color": "4.2.1"
+          }
+        },
+        "source-map": {
+          "version": "0.5.7",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "4.2.1",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.2.1.tgz",
+          "integrity": "sha512-qxzYsob3yv6U+xMzPrv170y8AwGP7i74g+pbixCfD6rgso8BscLT2qXIuz6TpOaiJZ3mFgT5O9lyT9nMU4LfaA==",
+          "dev": true,
+          "requires": {
+            "has-flag": "2.0.0"
+          }
+        }
+      }
+    },
+    "postcss-value-parser": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz",
+      "integrity": "sha1-h/OPnxj3dKSrTIojL1xc6IcqnRU=",
+      "dev": true
+    },
+    "preserve": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/preserve/-/preserve-0.2.0.tgz",
+      "integrity": "sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks=",
+      "dev": true
+    },
+    "pretty-hrtime": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
+      "integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=",
+      "dev": true
+    },
+    "process-nextick-args": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-1.0.7.tgz",
+      "integrity": "sha1-FQ4gt1ZZCtP5EJPyWk8q2L/zC6M=",
+      "dev": true
+    },
+    "pseudomap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
+      "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM=",
+      "dev": true
+    },
+    "punycode": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
+      "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4=",
+      "dev": true
+    },
+    "qs": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.4.0.tgz",
+      "integrity": "sha1-E+JtKK1rD/qpExLNO/cI7TUecjM=",
+      "dev": true
+    },
+    "randomatic": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/randomatic/-/randomatic-1.1.7.tgz",
+      "integrity": "sha512-D5JUjPyJbaJDkuAazpVnSfVkLlpeO3wDlPROTMLGKG1zMFNFRgrciKo1ltz/AzNTkqE0HzDx655QOL51N06how==",
+      "dev": true,
+      "requires": {
+        "is-number": "3.0.0",
+        "kind-of": "4.0.0"
+      },
+      "dependencies": {
+        "is-number": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
+          "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
+          "dev": true,
+          "requires": {
+            "kind-of": "3.2.2"
+          },
+          "dependencies": {
+            "kind-of": {
+              "version": "3.2.2",
+              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+              "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+              "dev": true,
+              "requires": {
+                "is-buffer": "1.1.5"
+              }
+            }
+          }
+        },
+        "kind-of": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-4.0.0.tgz",
+          "integrity": "sha1-IIE989cSkosgc3hpGkUGb65y3Vc=",
+          "dev": true,
+          "requires": {
+            "is-buffer": "1.1.5"
+          }
+        }
+      }
+    },
+    "read-pkg": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
+      "integrity": "sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=",
+      "dev": true,
+      "requires": {
+        "load-json-file": "1.1.0",
+        "normalize-package-data": "2.4.0",
+        "path-type": "1.1.0"
+      }
+    },
+    "read-pkg-up": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-1.0.1.tgz",
+      "integrity": "sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=",
+      "dev": true,
+      "requires": {
+        "find-up": "1.1.2",
+        "read-pkg": "1.1.0"
+      }
+    },
+    "readable-stream": {
+      "version": "1.1.14",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz",
+      "integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=",
+      "dev": true,
+      "requires": {
+        "core-util-is": "1.0.2",
+        "inherits": "2.0.3",
+        "isarray": "0.0.1",
+        "string_decoder": "0.10.31"
+      }
+    },
+    "rechoir": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz",
+      "integrity": "sha1-hSBLVNuoLVdC4oyWdW70OvUOM4Q=",
+      "dev": true,
+      "requires": {
+        "resolve": "1.4.0"
+      }
+    },
+    "redent": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/redent/-/redent-1.0.0.tgz",
+      "integrity": "sha1-z5Fqsf1fHxbfsggi3W7H9zDCr94=",
+      "dev": true,
+      "requires": {
+        "indent-string": "2.1.0",
+        "strip-indent": "1.0.1"
+      }
+    },
+    "regex-cache": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/regex-cache/-/regex-cache-0.4.3.tgz",
+      "integrity": "sha1-mxpsNdTQ3871cRrmUejp09cRQUU=",
+      "dev": true,
+      "requires": {
+        "is-equal-shallow": "0.1.3",
+        "is-primitive": "2.0.0"
+      }
+    },
+    "remove-trailing-separator": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
+      "integrity": "sha1-wkvOKig62tW8P1jg1IJJuSN52O8=",
+      "dev": true
+    },
+    "repeat-element": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/repeat-element/-/repeat-element-1.1.2.tgz",
+      "integrity": "sha1-7wiaF40Ug7quTZPrmLT55OEdmQo=",
+      "dev": true
+    },
+    "repeat-string": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
+      "integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc=",
+      "dev": true
+    },
+    "repeating": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/repeating/-/repeating-2.0.1.tgz",
+      "integrity": "sha1-UhTFOpJtNVJwdSf7q0FdvAjQbdo=",
+      "dev": true,
+      "requires": {
+        "is-finite": "1.0.2"
+      }
+    },
+    "replace-ext": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-0.0.1.tgz",
+      "integrity": "sha1-KbvZIHinOfC8zitO5B6DeVNSKSQ=",
+      "dev": true
+    },
+    "request": {
+      "version": "2.81.0",
+      "resolved": "https://registry.npmjs.org/request/-/request-2.81.0.tgz",
+      "integrity": "sha1-xpKJRqDgbF+Nb4qTM0af/aRimKA=",
+      "dev": true,
+      "requires": {
+        "aws-sign2": "0.6.0",
+        "aws4": "1.6.0",
+        "caseless": "0.12.0",
+        "combined-stream": "1.0.5",
+        "extend": "3.0.1",
+        "forever-agent": "0.6.1",
+        "form-data": "2.1.4",
+        "har-validator": "4.2.1",
+        "hawk": "3.1.3",
+        "http-signature": "1.1.1",
+        "is-typedarray": "1.0.0",
+        "isstream": "0.1.2",
+        "json-stringify-safe": "5.0.1",
+        "mime-types": "2.1.16",
+        "oauth-sign": "0.8.2",
+        "performance-now": "0.2.0",
+        "qs": "6.4.0",
+        "safe-buffer": "5.1.1",
+        "stringstream": "0.0.5",
+        "tough-cookie": "2.3.2",
+        "tunnel-agent": "0.6.0",
+        "uuid": "3.1.0"
+      }
+    },
+    "require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=",
+      "dev": true
+    },
+    "require-main-filename": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-1.0.1.tgz",
+      "integrity": "sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE=",
+      "dev": true
+    },
+    "resolve": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.4.0.tgz",
+      "integrity": "sha512-aW7sVKPufyHqOmyyLzg/J+8606v5nevBgaliIlV7nUpVMsDnoBGV/cbSLNjZAg9q0Cfd/+easKVKQ8vOu8fn1Q==",
+      "dev": true,
+      "requires": {
+        "path-parse": "1.0.5"
+      }
+    },
+    "resolve-dir": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/resolve-dir/-/resolve-dir-0.1.1.tgz",
+      "integrity": "sha1-shklmlYC+sXFxJatiUpujMQwJh4=",
+      "dev": true,
+      "requires": {
+        "expand-tilde": "1.2.2",
+        "global-modules": "0.2.3"
+      }
+    },
+    "rimraf": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.1.tgz",
+      "integrity": "sha1-wjOOxkPfeht/5cVPqG9XQopV8z0=",
+      "dev": true,
+      "requires": {
+        "glob": "7.1.2"
+      },
+      "dependencies": {
+        "glob": {
+          "version": "7.1.2",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
+          "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
+          "dev": true,
+          "requires": {
+            "fs.realpath": "1.0.0",
+            "inflight": "1.0.6",
+            "inherits": "2.0.3",
+            "minimatch": "3.0.4",
+            "once": "1.3.3",
+            "path-is-absolute": "1.0.1"
+          }
+        },
+        "minimatch": {
+          "version": "3.0.4",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
+          "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+          "dev": true,
+          "requires": {
+            "brace-expansion": "1.1.8"
+          }
+        }
+      }
+    },
+    "safe-buffer": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz",
+      "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==",
+      "dev": true
+    },
+    "sass-graph": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-2.2.4.tgz",
+      "integrity": "sha1-E/vWPNHK8JCLn9k0dq1DpR0eC0k=",
+      "dev": true,
+      "requires": {
+        "glob": "7.1.2",
+        "lodash": "4.17.4",
+        "scss-tokenizer": "0.2.3",
+        "yargs": "7.1.0"
+      },
+      "dependencies": {
+        "glob": {
+          "version": "7.1.2",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
+          "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
+          "dev": true,
+          "requires": {
+            "fs.realpath": "1.0.0",
+            "inflight": "1.0.6",
+            "inherits": "2.0.3",
+            "minimatch": "3.0.4",
+            "once": "1.3.3",
+            "path-is-absolute": "1.0.1"
+          }
+        },
+        "lodash": {
+          "version": "4.17.4",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz",
+          "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4=",
+          "dev": true
+        },
+        "minimatch": {
+          "version": "3.0.4",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
+          "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+          "dev": true,
+          "requires": {
+            "brace-expansion": "1.1.8"
+          }
+        }
+      }
+    },
+    "scss-tokenizer": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz",
+      "integrity": "sha1-jrBtualyMzOCTT9VMGQRSYR85dE=",
+      "dev": true,
+      "requires": {
+        "js-base64": "2.1.9",
+        "source-map": "0.4.4"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.4.4",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
+          "integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=",
+          "dev": true,
+          "requires": {
+            "amdefine": "1.0.1"
+          }
+        }
+      }
+    },
+    "semver": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-4.3.6.tgz",
+      "integrity": "sha1-MAvG4OhjdPe6YQaLWx7NV/xlMto=",
+      "dev": true
+    },
+    "sequencify": {
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/sequencify/-/sequencify-0.0.7.tgz",
+      "integrity": "sha1-kM/xnQLgcCf9dn9erT57ldHnOAw=",
+      "dev": true
+    },
+    "set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
+      "dev": true
+    },
+    "sigmund": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/sigmund/-/sigmund-1.0.1.tgz",
+      "integrity": "sha1-P/IfGYytIXX587eBhT/ZTQ0ZtZA=",
+      "dev": true
+    },
+    "signal-exit": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
+      "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
+      "dev": true
+    },
+    "sntp": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/sntp/-/sntp-1.0.9.tgz",
+      "integrity": "sha1-ZUEYTMkK7qbG57NeJlkIJEPGYZg=",
+      "dev": true,
+      "requires": {
+        "hoek": "2.16.3"
+      }
+    },
+    "source-map": {
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz",
+      "integrity": "sha1-dc449SvwczxafwwRjYEzSiu19BI=",
+      "dev": true
+    },
+    "sparkles": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/sparkles/-/sparkles-1.0.0.tgz",
+      "integrity": "sha1-Gsu/tZJDbRC76PeFt8xvgoFQEsM=",
+      "dev": true
+    },
+    "spdx-correct": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-1.0.2.tgz",
+      "integrity": "sha1-SzBz2TP/UfORLwOsVRlJikFQ20A=",
+      "dev": true,
+      "requires": {
+        "spdx-license-ids": "1.2.2"
+      }
+    },
+    "spdx-expression-parse": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-1.0.4.tgz",
+      "integrity": "sha1-m98vIOH0DtRH++JzJmGR/O1RYmw=",
+      "dev": true
+    },
+    "spdx-license-ids": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-1.2.2.tgz",
+      "integrity": "sha1-yd96NCRZSt5r0RkA1ZZpbcBrrFc=",
+      "dev": true
+    },
+    "sshpk": {
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.13.1.tgz",
+      "integrity": "sha1-US322mKHFEMW3EwY/hzx2UBzm+M=",
+      "dev": true,
+      "requires": {
+        "asn1": "0.2.3",
+        "assert-plus": "1.0.0",
+        "bcrypt-pbkdf": "1.0.1",
+        "dashdash": "1.14.1",
+        "ecc-jsbn": "0.1.1",
+        "getpass": "0.1.7",
+        "jsbn": "0.1.1",
+        "tweetnacl": "0.14.5"
+      },
+      "dependencies": {
+        "assert-plus": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+          "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
+          "dev": true
+        }
+      }
+    },
+    "stdout-stream": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/stdout-stream/-/stdout-stream-1.4.0.tgz",
+      "integrity": "sha1-osfIWH5U2UJ+qe2zrD8s1SLfN4s=",
+      "dev": true,
+      "requires": {
+        "readable-stream": "2.3.3"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
+          "dev": true
+        },
+        "readable-stream": {
+          "version": "2.3.3",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.3.tgz",
+          "integrity": "sha512-m+qzzcn7KUxEmd1gMbchF+Y2eIUbieUaxkWtptyHywrX0rE8QEYqPC07Vuy4Wm32/xE16NcdBctb8S0Xe/5IeQ==",
+          "dev": true,
+          "requires": {
+            "core-util-is": "1.0.2",
+            "inherits": "2.0.3",
+            "isarray": "1.0.0",
+            "process-nextick-args": "1.0.7",
+            "safe-buffer": "5.1.1",
+            "string_decoder": "1.0.3",
+            "util-deprecate": "1.0.2"
+          }
+        },
+        "string_decoder": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
+          "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
+          "dev": true,
+          "requires": {
+            "safe-buffer": "5.1.1"
+          }
+        }
+      }
+    },
+    "stream-consume": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/stream-consume/-/stream-consume-0.1.0.tgz",
+      "integrity": "sha1-pB6tGm1ggc63n2WwYZAbbY89HQ8=",
+      "dev": true
+    },
+    "string_decoder": {
+      "version": "0.10.31",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+      "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=",
+      "dev": true
+    },
+    "string-width": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+      "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
+      "dev": true,
+      "requires": {
+        "code-point-at": "1.1.0",
+        "is-fullwidth-code-point": "1.0.0",
+        "strip-ansi": "3.0.1"
+      }
+    },
+    "stringstream": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz",
+      "integrity": "sha1-TkhM1N5aC7vuGORjB3EKioFiGHg=",
+      "dev": true
+    },
+    "strip-ansi": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+      "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+      "dev": true,
+      "requires": {
+        "ansi-regex": "2.1.1"
+      }
+    },
+    "strip-bom": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-1.0.0.tgz",
+      "integrity": "sha1-hbiGLzhEtabV7IRnqTWYFzo295Q=",
+      "dev": true,
+      "requires": {
+        "first-chunk-stream": "1.0.0",
+        "is-utf8": "0.2.1"
+      }
+    },
+    "strip-indent": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-1.0.1.tgz",
+      "integrity": "sha1-DHlipq3vp7vUrDZkYKY4VSrhoKI=",
+      "dev": true,
+      "requires": {
+        "get-stdin": "4.0.1"
+      }
+    },
+    "supports-color": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+      "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
+      "dev": true
+    },
+    "tar": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-2.2.1.tgz",
+      "integrity": "sha1-jk0qJWwOIYXGsYrWlK7JaLg8sdE=",
+      "dev": true,
+      "requires": {
+        "block-stream": "0.0.9",
+        "fstream": "1.0.11",
+        "inherits": "2.0.3"
+      }
+    },
+    "through2": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.3.tgz",
+      "integrity": "sha1-AARWmzfHx0ujnEPzzteNGtlBQL4=",
+      "dev": true,
+      "requires": {
+        "readable-stream": "2.3.3",
+        "xtend": "4.0.1"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
+          "dev": true
+        },
+        "readable-stream": {
+          "version": "2.3.3",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.3.tgz",
+          "integrity": "sha512-m+qzzcn7KUxEmd1gMbchF+Y2eIUbieUaxkWtptyHywrX0rE8QEYqPC07Vuy4Wm32/xE16NcdBctb8S0Xe/5IeQ==",
+          "dev": true,
+          "requires": {
+            "core-util-is": "1.0.2",
+            "inherits": "2.0.3",
+            "isarray": "1.0.0",
+            "process-nextick-args": "1.0.7",
+            "safe-buffer": "5.1.1",
+            "string_decoder": "1.0.3",
+            "util-deprecate": "1.0.2"
+          }
+        },
+        "string_decoder": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
+          "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
+          "dev": true,
+          "requires": {
+            "safe-buffer": "5.1.1"
+          }
+        }
+      }
+    },
+    "tildify": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/tildify/-/tildify-1.2.0.tgz",
+      "integrity": "sha1-3OwD9V3Km3qj5bBPIYF+tW5jWIo=",
+      "dev": true,
+      "requires": {
+        "os-homedir": "1.0.2"
+      }
+    },
+    "time-stamp": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/time-stamp/-/time-stamp-1.1.0.tgz",
+      "integrity": "sha1-dkpaEa9QVhkhsTPztE5hhofg9cM=",
+      "dev": true
+    },
+    "tough-cookie": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.3.2.tgz",
+      "integrity": "sha1-8IH3bkyFcg5sN6X6ztc3FQ2EByo=",
+      "dev": true,
+      "requires": {
+        "punycode": "1.4.1"
+      }
+    },
+    "trim-newlines": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-1.0.0.tgz",
+      "integrity": "sha1-WIeWa7WCpFA6QetST301ARgVphM=",
+      "dev": true
+    },
+    "tunnel-agent": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
+      "integrity": "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "5.1.1"
+      }
+    },
+    "tweetnacl": {
+      "version": "0.14.5",
+      "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
+      "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=",
+      "dev": true,
+      "optional": true
+    },
+    "unc-path-regex": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/unc-path-regex/-/unc-path-regex-0.1.2.tgz",
+      "integrity": "sha1-5z3T17DXxe2G+6xrCufYxqadUPo=",
+      "dev": true
+    },
+    "unique-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unique-stream/-/unique-stream-1.0.0.tgz",
+      "integrity": "sha1-1ZpKdUJ0R9mqbJHnAmP40mpLEEs=",
+      "dev": true
+    },
+    "user-home": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/user-home/-/user-home-1.1.1.tgz",
+      "integrity": "sha1-K1viOjK2Onyd640PKNSFcko98ZA=",
+      "dev": true
+    },
+    "util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
+      "dev": true
+    },
+    "uuid": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.1.0.tgz",
+      "integrity": "sha512-DIWtzUkw04M4k3bf1IcpS2tngXEL26YUD2M0tMDUpnUrz2hgzUBlD55a4FjdLGPvfHxS6uluGWvaVEqgBcVa+g==",
+      "dev": true
+    },
+    "v8flags": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/v8flags/-/v8flags-2.1.1.tgz",
+      "integrity": "sha1-qrGh+jDUX4jdMhFIh1rALAtV5bQ=",
+      "dev": true,
+      "requires": {
+        "user-home": "1.1.1"
+      }
+    },
+    "validate-npm-package-license": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.1.tgz",
+      "integrity": "sha1-KAS6vnEq0zeUWaz74kdGqywwP7w=",
+      "dev": true,
+      "requires": {
+        "spdx-correct": "1.0.2",
+        "spdx-expression-parse": "1.0.4"
+      }
+    },
+    "verror": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
+      "integrity": "sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=",
+      "dev": true,
+      "requires": {
+        "assert-plus": "1.0.0",
+        "core-util-is": "1.0.2",
+        "extsprintf": "1.3.0"
+      },
+      "dependencies": {
+        "assert-plus": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+          "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
+          "dev": true
+        }
+      }
+    },
+    "vinyl": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/vinyl/-/vinyl-0.5.3.tgz",
+      "integrity": "sha1-sEVbOPxeDPMNQyUTLkYZcMIJHN4=",
+      "dev": true,
+      "requires": {
+        "clone": "1.0.2",
+        "clone-stats": "0.0.1",
+        "replace-ext": "0.0.1"
+      }
+    },
+    "vinyl-fs": {
+      "version": "0.3.14",
+      "resolved": "https://registry.npmjs.org/vinyl-fs/-/vinyl-fs-0.3.14.tgz",
+      "integrity": "sha1-mmhRzhysHBzqX+hsCTHWIMLPqeY=",
+      "dev": true,
+      "requires": {
+        "defaults": "1.0.3",
+        "glob-stream": "3.1.18",
+        "glob-watcher": "0.0.6",
+        "graceful-fs": "3.0.11",
+        "mkdirp": "0.5.1",
+        "strip-bom": "1.0.0",
+        "through2": "0.6.5",
+        "vinyl": "0.4.6"
+      },
+      "dependencies": {
+        "clone": {
+          "version": "0.2.0",
+          "resolved": "https://registry.npmjs.org/clone/-/clone-0.2.0.tgz",
+          "integrity": "sha1-xhJqkK1Pctv1rNskPMN3JP6T/B8=",
+          "dev": true
+        },
+        "readable-stream": {
+          "version": "1.0.34",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
+          "integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=",
+          "dev": true,
+          "requires": {
+            "core-util-is": "1.0.2",
+            "inherits": "2.0.3",
+            "isarray": "0.0.1",
+            "string_decoder": "0.10.31"
+          }
+        },
+        "through2": {
+          "version": "0.6.5",
+          "resolved": "https://registry.npmjs.org/through2/-/through2-0.6.5.tgz",
+          "integrity": "sha1-QaucZ7KdVyCQcUEOHXp6lozTrUg=",
+          "dev": true,
+          "requires": {
+            "readable-stream": "1.0.34",
+            "xtend": "4.0.1"
+          }
+        },
+        "vinyl": {
+          "version": "0.4.6",
+          "resolved": "https://registry.npmjs.org/vinyl/-/vinyl-0.4.6.tgz",
+          "integrity": "sha1-LzVsh6VQolVGHza76ypbqL94SEc=",
+          "dev": true,
+          "requires": {
+            "clone": "0.2.0",
+            "clone-stats": "0.0.1"
+          }
+        }
+      }
+    },
+    "vinyl-sourcemaps-apply": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/vinyl-sourcemaps-apply/-/vinyl-sourcemaps-apply-0.2.1.tgz",
+      "integrity": "sha1-q2VJ1h0XLCsbh75cUI0jnI74dwU=",
+      "dev": true,
+      "requires": {
+        "source-map": "0.5.6"
+      }
+    },
+    "vow": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/vow/-/vow-0.4.4.tgz",
+      "integrity": "sha1-yf5GCRKdf1qmIVCOvmS1HJW8e5g=",
+      "dev": true
+    },
+    "vow-fs": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/vow-fs/-/vow-fs-0.3.2.tgz",
+      "integrity": "sha1-6isDTYXh24wnfrLpqG0cFfXTjno=",
+      "dev": true,
+      "requires": {
+        "glob": "3.2.8",
+        "node-uuid": "1.4.0",
+        "vow": "0.4.4",
+        "vow-queue": "0.3.1"
+      },
+      "dependencies": {
+        "glob": {
+          "version": "3.2.8",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-3.2.8.tgz",
+          "integrity": "sha1-VQb0MRchvMYYx9jboUQYh1AwcHM=",
+          "dev": true,
+          "requires": {
+            "inherits": "2.0.3",
+            "minimatch": "0.2.14"
+          }
+        },
+        "minimatch": {
+          "version": "0.2.14",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-0.2.14.tgz",
+          "integrity": "sha1-x054BXT2PG+aCQ6Q775u9TpqdWo=",
+          "dev": true,
+          "requires": {
+            "lru-cache": "2.7.3",
+            "sigmund": "1.0.1"
+          }
+        }
+      }
+    },
+    "vow-queue": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/vow-queue/-/vow-queue-0.3.1.tgz",
+      "integrity": "sha1-WYxRoVsKgabV/AX0dhzrRi3h6Gg=",
+      "dev": true,
+      "requires": {
+        "vow": "0.4.4"
+      }
+    },
+    "which": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/which/-/which-1.3.0.tgz",
+      "integrity": "sha512-xcJpopdamTuY5duC/KnTTNBraPK54YwpenP4lzxU8H91GudWpFv38u0CKjclE1Wi2EH2EDz5LRcHcKbCIzqGyg==",
+      "dev": true,
+      "requires": {
+        "isexe": "2.0.0"
+      }
+    },
+    "which-module": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/which-module/-/which-module-1.0.0.tgz",
+      "integrity": "sha1-u6Y8qGGUiZT/MHc2CJ47lgJsKk8=",
+      "dev": true
+    },
+    "wide-align": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.2.tgz",
+      "integrity": "sha512-ijDLlyQ7s6x1JgCLur53osjm/UXUYD9+0PbYKrBsYisYXzCxN+HC3mYDNy/dWdmf3AwqwU3CXwDCvsNgGK1S0w==",
+      "dev": true,
+      "requires": {
+        "string-width": "1.0.2"
+      }
+    },
+    "wrap-ansi": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
+      "integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=",
+      "dev": true,
+      "requires": {
+        "string-width": "1.0.2",
+        "strip-ansi": "3.0.1"
+      }
+    },
+    "wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
+      "dev": true
+    },
+    "xtend": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.1.tgz",
+      "integrity": "sha1-pcbVMr5lbiPbgg77lDofBJmNY68=",
+      "dev": true
+    },
+    "y18n": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz",
+      "integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE=",
+      "dev": true
+    },
+    "yallist": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
+      "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=",
+      "dev": true
+    },
+    "yargs": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-7.1.0.tgz",
+      "integrity": "sha1-a6MY6xaWFyf10oT46gA+jWFU0Mg=",
+      "dev": true,
+      "requires": {
+        "camelcase": "3.0.0",
+        "cliui": "3.2.0",
+        "decamelize": "1.2.0",
+        "get-caller-file": "1.0.2",
+        "os-locale": "1.4.0",
+        "read-pkg-up": "1.0.1",
+        "require-directory": "2.1.1",
+        "require-main-filename": "1.0.1",
+        "set-blocking": "2.0.0",
+        "string-width": "1.0.2",
+        "which-module": "1.0.0",
+        "y18n": "3.2.1",
+        "yargs-parser": "5.0.0"
+      },
+      "dependencies": {
+        "camelcase": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-3.0.0.tgz",
+          "integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo=",
+          "dev": true
+        }
+      }
+    },
+    "yargs-parser": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-5.0.0.tgz",
+      "integrity": "sha1-J17PDX/+Bcd+ZOfIbkzZS/DhIoo=",
+      "dev": true,
+      "requires": {
+        "camelcase": "3.0.0"
+      },
+      "dependencies": {
+        "camelcase": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-3.0.0.tgz",
+          "integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo=",
+          "dev": true
+        }
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
index c93fec8..257b81a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "spectre.css",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "homepage": "http://picturepan2.github.io/spectre",
   "author": "Yan Zhu <picturepan2@hotmail.com>",
   "description": "Spectre.css: a lightweight, responsive and modern CSS framework.",
@@ -13,7 +13,7 @@
     "dist",
     "docs",
     "src",
-    "**/*.less",
+    "**/*.scss",
     "gulpfile.js"
   ],
   "license": "MIT",
@@ -24,18 +24,26 @@
     "responsive",
     "mobile-friendly",
     "front-end",
-    "less",
+    "sass",
     "modern"
   ],
   "bugs": {
     "url": "https://github.com/picturepan2/spectre/issues"
   },
   "devDependencies": {
-    "gulp": "^3.9.1",
+    "gulp": "latest",
+    "gulp-autoprefixer": "latest",
     "gulp-clean-css": "^3.7.0",
     "gulp-csscomb": "^3.0.8",
-    "gulp-less": "^3.3.2",
     "gulp-rename": "^1.2.2",
-    "less-plugin-autoprefix": "^1.5.1"
-  }
+    "gulp-sass": "latest"
+  },
+  "browserslist": [
+    "last 4 Chrome versions",
+    "Edge >= 12",
+    "Firefox ESR",
+    "last 4 Safari versions",
+    "last 4 Opera versions",
+    "Explorer >= 10"
+  ]
 }
diff --git a/spectre-exp.less b/spectre-exp.less
deleted file mode 100644
index 5ff5a88..0000000
--- a/spectre-exp.less
+++ /dev/null
@@ -1,16 +0,0 @@
-/*! Spectre.css Experimentals | MIT License | github.com/picturepan2/spectre */
-
-// Core variables and mixins
-@import 'src/variables.less';
-@import 'src/mixins.less';
-
-// Experimentals
-@import 'src/calendars.less';
-@import 'src/carousels.less';
-@import 'src/comparison-sliders.less';
-@import 'src/filters.less';
-@import 'src/meters.less';
-@import 'src/parallax.less';
-@import 'src/progress.less';
-@import 'src/sliders.less';
-@import 'src/timelines.less';
diff --git a/spectre.less b/spectre.less
deleted file mode 100644
index 14c150d..0000000
--- a/spectre.less
+++ /dev/null
@@ -1,50 +0,0 @@
-/*! Spectre.css | MIT License | github.com/picturepan2/spectre */
-
-// Core variables and mixins
-@import 'src/variables.less';
-@import 'src/mixins.less';
-
-// Reset and dependencies
-@import 'src/normalize.less';
-@import 'src/base.less';
-
-// Core classes
-@import 'src/typography.less';
-@import 'src/asian.less';
-@import 'src/tables.less';
-@import 'src/buttons.less';
-@import 'src/forms.less';
-@import 'src/labels.less';
-@import 'src/codes.less';
-@import 'src/media.less';
-
-// Layout
-@import 'src/layout.less';
-@import 'src/navbar.less';
-@import 'src/panels.less';
-@import 'src/empty.less';
-
-// Components
-@import 'src/accordions.less';
-@import 'src/autocomplete.less';
-@import 'src/avatars.less';
-@import 'src/badges.less';
-@import 'src/breadcrumbs.less';
-@import 'src/bars.less';
-@import 'src/cards.less';
-@import 'src/chips.less';
-@import 'src/dropdowns.less';
-@import 'src/menus.less';
-@import 'src/modals.less';
-@import 'src/navs.less';
-@import 'src/pagination.less';
-@import 'src/popovers.less';
-@import 'src/steps.less';
-@import 'src/tabs.less';
-@import 'src/tiles.less';
-@import 'src/toasts.less';
-@import 'src/tooltips.less';
-
-// Utility classes
-@import 'src/animations.less';
-@import 'src/utilities.less';
diff --git a/src/accordions.less b/src/_accordions.scss
index 810d264..685c9a5 100644
--- a/src/accordions.less
+++ b/src/_accordions.scss
@@ -10,14 +10,14 @@
           }
         }
         & ~ .accordion-body {
-          max-height: 1000px;
+          max-height: 50rem;
         }
       }
     }
 
     .accordion-header {
       display: block;
-      padding: @unit-1 @unit-2;
+      padding: $unit-1 $unit-2;
 
       .icon {
         transition: all .2s ease;
@@ -25,7 +25,7 @@
     }
 
     .accordion-body {
-      margin-bottom: @layout-spacing;
+      margin-bottom: $layout-spacing;
       max-height: 0;
       overflow: hidden;
       transition: max-height .2s ease;
diff --git a/src/animations.less b/src/_animations.scss
index f6b8724..e7fde1a 100644
--- a/src/animations.less
+++ b/src/_animations.scss
@@ -11,7 +11,7 @@
 @keyframes slide-down {
   0% {
     opacity: 0;
-    transform: translateY(-@unit-8);
+    transform: translateY(-$unit-8);
   }
   100% {
     opacity: 1;
diff --git a/src/asian.less b/src/_asian.scss
index a68cb39..5f7533e 100644
--- a/src/asian.less
+++ b/src/_asian.scss
@@ -1,14 +1,14 @@
 // Optimized for East Asian CJK
 :lang(zh) {
-  font-family: @cjk-zh-font-family;
+  font-family: $cjk-zh-font-family;
 }
 
 :lang(ja) {
-  font-family: @cjk-jp-font-family;
+  font-family: $cjk-jp-font-family;
 }
 
 :lang(ko) {
-  font-family: @cjk-ko-font-family;
+  font-family: $cjk-ko-font-family;
 }
 
 :lang(zh),
@@ -16,7 +16,7 @@
 .cjk {
   ins,
   u {
-    border-bottom: @border-width solid;
+    border-bottom: $border-width solid;
     text-decoration: none;
   }
 
diff --git a/src/autocomplete.less b/src/_autocomplete.scss
index 111ecf6..0101493 100644
--- a/src/autocomplete.less
+++ b/src/_autocomplete.scss
@@ -7,12 +7,12 @@
     display: flex;
     flex-wrap: wrap;
     height: auto;
-    min-height: @unit-8;
-    padding: @unit-h;
+    min-height: $unit-8;
+    padding: $unit-h;
 
     &.is-focused {
-      border-color: @primary-color;
-      .control-shadow();
+      @include control-shadow();
+      border-color: $primary-color;
     }
 
     .form-input {
@@ -20,18 +20,13 @@
       box-shadow: none;
       display: inline-block;
       flex: 1 0 auto;
-      height: @unit-6;
-      line-height: @unit-4;
-      margin: @unit-h;
+      height: $unit-6;
+      line-height: $unit-4;
+      margin: $unit-h;
       width: auto;
     }
   }
 
-  mark {
-    font-size: 1;
-    padding: .1em 0;
-  }
-
   .menu {
     left: 0;
     position: absolute;
diff --git a/src/avatars.less b/src/_avatars.scss
index 1fa075a..53bda1d 100644
--- a/src/avatars.less
+++ b/src/_avatars.scss
@@ -1,9 +1,9 @@
 // Avatars
 .avatar {
-  .avatar-base();
-  background: @primary-color;
+  @include avatar-base();
+  background: $primary-color;
   border-radius: 50%;
-  color: fade(@light-color, 85%);
+  color: rgba($light-color, .85);
   display: inline-block;
   font-weight: 300;
   line-height: 1;
@@ -12,16 +12,16 @@
   vertical-align: middle;
 
   &.avatar-xs {
-    .avatar-base(@unit-4);
+    @include avatar-base($unit-4);
   }
   &.avatar-sm {
-    .avatar-base(@unit-6);
+    @include avatar-base($unit-6);
   }
   &.avatar-lg {
-    .avatar-base(@unit-12);
+    @include avatar-base($unit-12);
   }
   &.avatar-xl {
-    .avatar-base(@unit-16);
+    @include avatar-base($unit-16);
   }
 
   img {
@@ -29,39 +29,39 @@
     height: 100%;
     position: relative;
     width: 100%;
-    z-index: @zindex-0;
+    z-index: $zindex-0;
   }
 
   .avatar-icon,
   .avatar-presence {
-    background: @bg-color-light;
+    background: $bg-color-light;
     bottom: 14.64%;
     height: 50%;
-    padding: @border-width-lg;
+    padding: $border-width-lg;
     position: absolute;
     right: 14.64%;
     transform: translate(50%, 50%);
     width: 50%;
-    z-index: @zindex-0 + 1;
+    z-index: $zindex-0 + 1;
   }
 
   .avatar-presence {
-    background: @gray-color;
-    box-shadow: 0 0 0 @border-width-lg @light-color;
+    background: $gray-color;
+    box-shadow: 0 0 0 $border-width-lg $light-color;
     border-radius: 50%;
     height: .5em;
     width: .5em;
 
     &.online {
-      background: @success-color;
+      background: $success-color;
     }
 
     &.busy {
-      background: @error-color;
+      background: $error-color;
     }
 
     &.away {
-      background: @warning-color;
+      background: $warning-color;
     }
   }
 
@@ -72,6 +72,6 @@
     position: absolute;
     top: 50%;
     transform: translate(-50%, -50%);
-    z-index: @zindex-0;
+    z-index: $zindex-0;
   }
 }
diff --git a/src/badges.less b/src/_badges.scss
index c62df9d..9f1d734 100644
--- a/src/badges.less
+++ b/src/_badges.scss
@@ -6,11 +6,11 @@
   &[data-badge],
   &:not([data-badge]) {
     &::after {
-      background: @primary-color;
+      background: $primary-color;
       background-clip: padding-box;
       border-radius: .5rem;
-      box-shadow: 0 0 0 .1rem @bg-color-light;
-      color: @light-color;
+      box-shadow: 0 0 0 .1rem $bg-color-light;
+      color: $light-color;
       content: attr(data-badge);
       display: inline-block;
       transform: translate(-.1rem, -.5rem);
@@ -18,7 +18,7 @@
   }
   &[data-badge] {
     &::after {
-      font-size: @font-size-sm;
+      font-size: $font-size-sm;
       height: 18px;
       line-height: 1;
       min-width: 18px;
@@ -54,17 +54,17 @@
       top: 14.64%;
       right: 14.64%;
       transform: translate(50%, -50%);
-      z-index: @zindex-1;
+      z-index: $zindex-1;
     }
   }
 
   &.avatar-xs {
     &::after {
       content: "";
-      height: @unit-2;
-      min-width: @unit-2;
+      height: $unit-2;
+      min-width: $unit-2;
       padding: 0;
-      width: @unit-2;
+      width: $unit-2;
     }
   }
 }
diff --git a/src/bars.less b/src/_bars.scss
index 4c3824a..47e21c9 100644
--- a/src/bars.less
+++ b/src/_bars.scss
@@ -1,36 +1,36 @@
 // Bars
 .bar {
-  background: @bg-color-dark;
-  border-radius: @border-radius;
+  background: $bg-color-dark;
+  border-radius: $border-radius;
   display: flex;
   flex-wrap: nowrap;
-  height: @unit-4;
+  height: $unit-4;
   width: 100%;
 
   &.bar-sm {
-    height: @unit-1;
+    height: $unit-1;
   }
 
   // TODO: attr() support
   .bar-item {
-    background: @primary-color;
-    color: @light-color;
+    background: $primary-color;
+    color: $light-color;
     display: block;
-    font-size: @font-size-sm;
+    font-size: $font-size-sm;
     flex-shrink: 0;
-    line-height: @unit-4;
+    line-height: $unit-4;
     height: 100%;
     position: relative;
     text-align: center;
     width: 0;
 
     &:first-child {
-      border-bottom-left-radius: @border-radius;
-      border-top-left-radius: @border-radius;
+      border-bottom-left-radius: $border-radius;
+      border-top-left-radius: $border-radius;
     }
     &:last-child {
-      border-bottom-right-radius: @border-radius;
-      border-top-right-radius: @border-radius;
+      border-bottom-right-radius: $border-radius;
+      border-top-right-radius: $border-radius;
       flex-shrink: 1;
     }
   }
@@ -38,8 +38,8 @@
 
 // Slider bar
 .bar-slider {
-  height: @border-width-lg;
-  margin: @layout-spacing 0;
+  height: $border-width-lg;
+  margin: $layout-spacing 0;
   position: relative;
 
   .bar-item {
@@ -47,25 +47,25 @@
     padding: 0;
     position: absolute;
     &:not(:last-child):first-child {
-      background: @bg-color-dark;
-      z-index: @zindex-0;
+      background: $bg-color-dark;
+      z-index: $zindex-0;
     }
   }
 
   .bar-slider-btn {
-    background: @primary-color;
+    background: $primary-color;
     border: 0;
     border-radius: 50%;
-    height: @unit-3;
+    height: $unit-3;
     padding: 0;
     position: absolute;
     right: 0;
     top: 50%;
     transform: translate(50%, -50%);
-    width: @unit-3;
+    width: $unit-3;
 
     &:active {
-      box-shadow: 0 0 0 .1rem @primary-color;
+      box-shadow: 0 0 0 .1rem $primary-color;
     }
   }
 }
diff --git a/src/base.less b/src/_base.scss
index ba21bee..5f5a8d0 100644
--- a/src/base.less
+++ b/src/_base.scss
@@ -7,34 +7,34 @@
 
 html {
   box-sizing: border-box;
-  font-size: @html-font-size;
-  line-height: @html-line-height;
+  font-size: $html-font-size;
+  line-height: $html-line-height;
   -webkit-tap-highlight-color: transparent;
 }
 
 body {
-  background: @body-bg;
-  color: @body-font-color;
-  font-family: @body-font-family;
-  font-size: @font-size;
+  background: $body-bg;
+  color: $body-font-color;
+  font-family: $body-font-family;
+  font-size: $font-size;
   overflow-x: hidden;
   text-rendering: optimizeLegibility;
 }
 
 a {
-  color: @link-color;
+  color: $link-color;
   outline: none;
   text-decoration: none;
 
   &:focus {
-    .control-shadow();
+    @include control-shadow();
   }
 
   &:focus,
   &:hover,
   &:active,
   &.active {
-    color: @link-color-dark;
+    color: $link-color-dark;
     text-decoration: underline;
   }
 }
diff --git a/src/breadcrumbs.less b/src/_breadcrumbs.scss
index 0b0f757..876eae8 100644
--- a/src/breadcrumbs.less
+++ b/src/_breadcrumbs.scss
@@ -1,28 +1,28 @@
 // Breadcrumbs
 .breadcrumb {
   list-style: none;
-  margin: @unit-1 0;
-  padding: @unit-1 0;
+  margin: $unit-1 0;
+  padding: $unit-1 0;
 
   .breadcrumb-item {
-    color: @gray-color-dark;
+    color: $gray-color-dark;
     display: inline-block;
     margin: 0;
-    padding: @unit-1 0;
+    padding: $unit-1 0;
 
     &:not(:last-child) {
-      margin-right: @unit-1;
+      margin-right: $unit-1;
 
       a {
-        color: @gray-color-dark;
+        color: $gray-color-dark;
       }
     }
 
     &:not(:first-child) {
       &::before {
-        color: @gray-color-light;
+        color: $gray-color-light;
         content: "/";
-        padding-right: @unit-1;
+        padding-right: $unit-1;
       }
     }
   }
diff --git a/src/buttons.less b/src/_buttons.scss
index 0c15d9e..0c9540d 100644
--- a/src/buttons.less
+++ b/src/_buttons.scss
@@ -1,42 +1,42 @@
 // Buttons
 .btn {
+  @include control-transition();
   appearance: none;
-  background: @bg-color-light;
-  border: @border-width solid @primary-color;
-  border-radius: @border-radius;
-  color: @primary-color;
-  .control-transition();
+  background: $bg-color-light;
+  border: $border-width solid $primary-color;
+  border-radius: $border-radius;
+  color: $primary-color;
   cursor: pointer;
   display: inline-block;
-  font-size: @font-size;
-  height: @control-size;
-  line-height: @line-height;
+  font-size: $font-size;
+  height: $control-size;
+  line-height: $line-height;
   outline: none;
-  padding: @control-padding-v @control-padding-h;
+  padding: $control-padding-v $control-padding-h;
   text-align: center;
   text-decoration: none;
   user-select: none;
   vertical-align: middle;
   white-space: nowrap;
   &:focus {
-    .control-shadow();
+    @include control-shadow();
   }
   &:focus,
   &:hover {
-    background: @secondary-color;
-    border-color: @primary-color-dark;
+    background: $secondary-color;
+    border-color: $primary-color-dark;
     text-decoration: none;
   }
   &:active,
   &.active {
-    background: @primary-color-dark;
-    border-color: darken(@primary-color-dark, 5%);
-    color: @light-color;
+    background: $primary-color-dark;
+    border-color: darken($primary-color-dark, 5%);
+    color: $light-color;
     text-decoration: none;
     &.loading {
       &::after {
-        border-bottom-color: @light-color;
-        border-left-color: @light-color;
+        border-bottom-color: $light-color;
+        border-left-color: $light-color;
       }
     }
   }
@@ -50,25 +50,25 @@
 
   // Button Primary
   &.btn-primary {
-    background: @primary-color;
-    border-color: @primary-color-dark;
-    color: @light-color;
+    background: $primary-color;
+    border-color: $primary-color-dark;
+    color: $light-color;
     &:focus,
     &:hover {
-      background: darken(@primary-color-dark, 2%);
-      border-color: darken(@primary-color-dark, 5%);
-      color: @light-color;
+      background: darken($primary-color-dark, 2%);
+      border-color: darken($primary-color-dark, 5%);
+      color: $light-color;
     }
     &:active,
     &.active {
-      background: darken(@primary-color-dark, 4%);
-      border-color: darken(@primary-color-dark, 7%);
-      color: @light-color;
+      background: darken($primary-color-dark, 4%);
+      border-color: darken($primary-color-dark, 7%);
+      color: $light-color;
     }
     &.loading {
       &::after {
-        border-bottom-color: @light-color;
-        border-left-color: @light-color;
+        border-bottom-color: $light-color;
+        border-left-color: $light-color;
       }
     }
   }
@@ -77,26 +77,26 @@
   &.btn-link {
     background: transparent;
     border-color: transparent;
-    color: @link-color;
+    color: $link-color;
     &:focus,
     &:hover,
     &:active,
     &.active {
-      color: @link-color-dark;
+      color: $link-color-dark;
     }
   }
 
   // Button Sizes
   &.btn-sm {
-    font-size: @font-size-sm;
-    height: @control-size-sm;
-    padding: @control-padding-v-sm @control-padding-h * .75;
+    font-size: $font-size-sm;
+    height: $control-size-sm;
+    padding: $control-padding-v-sm $control-padding-h * .75;
   }
 
   &.btn-lg {
-    font-size: @font-size-lg;
-    height: @control-size-lg;
-    padding: @control-padding-v-lg @control-padding-h * 1.5;
+    font-size: $font-size-lg;
+    height: $control-size-lg;
+    padding: $control-padding-v-lg $control-padding-h * 1.5;
   }
 
   // Button Block
@@ -107,16 +107,16 @@
 
   // Button Action
   &.btn-action {
-    width: @control-size;
+    width: $control-size;
     padding-left: 0;
     padding-right: 0;
 
     &.btn-sm {
-      width: @control-size-sm;
+      width: $control-size-sm;
     }
 
     &.btn-lg {
-      width: @control-size-lg;
+      width: $control-size-lg;
     }
   }
 
@@ -125,14 +125,14 @@
     background: transparent;
     border: 0;
     color: currentColor;
-    height: @unit-4;
-    line-height: @unit-4;
-    margin-left: @unit-1;
+    height: $unit-4;
+    line-height: $unit-4;
+    margin-left: $unit-1;
     margin-right: -2px;
     opacity: .45;
     padding: 0 2px;
     text-decoration: none;
-    width: @unit-4;
+    width: $unit-4;
 
     &:hover {
       opacity: .85;
@@ -157,18 +157,18 @@
     }
     &:not(:first-child):not(:last-child) {
       border-radius: 0;
-      margin-left: -@border-width;
+      margin-left: -$border-width;
     }
     &:last-child:not(:first-child) {
       border-bottom-left-radius: 0;
       border-top-left-radius: 0;
-      margin-left: -@border-width;
+      margin-left: -$border-width;
     }
     &:focus,
     &:hover,
     &:active,
     &.active {
-      z-index: @zindex-0;
+      z-index: $zindex-0;
     }
   }
 
diff --git a/src/calendars.less b/src/_calendars.scss
index e5764ea..05606dd 100644
--- a/src/calendars.less
+++ b/src/_calendars.scss
@@ -1,19 +1,19 @@
 // Calendars
 .calendar {
-  border: @border-width solid @border-color;
-  border-radius: @border-radius;
+  border: $border-width solid $border-color;
+  border-radius: $border-radius;
   display: block;
   min-width: 280px;
   text-align: center;
 
   .calendar-nav {
     align-items: center;
-    background: @bg-color;
-    border-top-left-radius: @border-radius;
-    border-top-right-radius: @border-radius;
+    background: $bg-color;
+    border-top-left-radius: $border-radius;
+    border-top-right-radius: $border-radius;
     display: flex;
-    font-size: @font-size-lg;
-    padding: @layout-spacing;
+    font-size: $font-size-lg;
+    padding: $layout-spacing;
   }
 
   .calendar-header,
@@ -21,7 +21,7 @@
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
-    padding: @layout-spacing 0;
+    padding: $layout-spacing 0;
 
     .calendar-date {
       flex: 0 0 14.28%; // 7 calendar-items each row
@@ -30,60 +30,60 @@
   }
 
   .calendar-header {
-    background: @bg-color;
-    border-bottom: @border-width solid @border-color;
-    color: @gray-color;
-    font-size: @font-size-sm;
+    background: $bg-color;
+    border-bottom: $border-width solid $border-color;
+    color: $gray-color;
+    font-size: $font-size-sm;
   }
 
   .calendar-body {
-    color: @gray-color-dark;
+    color: $gray-color-dark;
   }
 
   .calendar-date {
     border: 0;
-    padding: @unit-1;
+    padding: $unit-1;
 
     .date-item {
+      @include control-transition();
       appearance: none;
       background: transparent;
-      border: @border-width solid transparent;
+      border: $border-width solid transparent;
       border-radius: 50%;
-      color: @gray-color-dark;
-      .control-transition();
+      color: $gray-color-dark;
       cursor: pointer;
-      height: @unit-7;
-      line-height: @unit-5;
+      height: $unit-7;
+      line-height: $unit-5;
       outline: none;
-      padding: @unit-h;
+      padding: $unit-h;
       position: relative;
       text-align: center;
       text-decoration: none;
       vertical-align: middle;
       white-space: nowrap;
-      width: @unit-7;
+      width: $unit-7;
 
       &.date-today {
-        border-color: @secondary-color-dark;
-        color: @primary-color;
+        border-color: $secondary-color-dark;
+        color: $primary-color;
       }
 
       &:focus {
-        .control-shadow();
+        @include control-shadow();
       }
 
       &:focus,
       &:hover {
-        background: @secondary-color-light;
-        border-color: @secondary-color-dark;
-        color: @primary-color;
+        background: $secondary-color-light;
+        border-color: $secondary-color-dark;
+        color: $primary-color;
         text-decoration: none;
       }
       &:active,
       &.active {
-        background: @primary-color-dark;
-        border-color: darken(@primary-color-dark, 5%);
-        color: @light-color;
+        background: $primary-color-dark;
+        border-color: darken($primary-color-dark, 5%);
+        color: $light-color;
       }
 
       // Calendar badge support
@@ -111,9 +111,9 @@
     position: relative;
 
     &::before {
-      background: @secondary-color;
+      background: $secondary-color;
       content: "";
-      height: @unit-7;
+      height: $unit-7;
       left: 0;
       position: absolute;
       right: 0;
@@ -132,7 +132,7 @@
     }
 
     .date-item {
-      color: @primary-color;
+      color: $primary-color;
     }
   }
 
@@ -141,8 +141,8 @@
       padding: 0;
 
       .calendar-date {
-        border-bottom: @border-width solid @border-color;
-        border-right: @border-width solid @border-color;
+        border-bottom: $border-width solid $border-color;
+        border-right: $border-width solid $border-color;
         display: flex;
         flex-direction: column;
         height: 5.5rem;
@@ -159,9 +159,9 @@
 
     .date-item {
       align-self: flex-end;
-      height: @unit-7;
-      margin-right: @layout-spacing-sm;
-      margin-top: @layout-spacing-sm;
+      height: $unit-7;
+      margin-right: $layout-spacing-sm;
+      margin-top: $layout-spacing-sm;
     }
 
     .calendar-range {
@@ -185,21 +185,20 @@
       flex-grow: 1;
       line-height: 1;
       overflow-y: auto;
-      padding: @layout-spacing-sm;
+      padding: $layout-spacing-sm;
     }
 
     .calendar-event {
-      background: @secondary-color;
-      border-radius: @border-radius;
-      color: @primary-color;
-      font-size: @font-size-sm;
+      background: $secondary-color;
+      border-radius: $border-radius;
+      color: $primary-color;
+      font-size: $font-size-sm;
       display: block;
-      margin: @unit-h auto;
+      margin: $unit-h auto;
       overflow: hidden;
       padding: 3px 4px;
       text-align: left;
       text-overflow: ellipsis;
-      vertical-align: baseline;
       white-space: nowrap;
     }
   }
diff --git a/src/_cards.scss b/src/_cards.scss
new file mode 100644
index 0000000..3ecdc0a
--- /dev/null
+++ b/src/_cards.scss
@@ -0,0 +1,39 @@
+// Cards
+.card {
+  background: $bg-color-light;
+  border: $border-width solid $border-color;
+  border-radius: $border-radius;
+  display: flex;
+  flex-direction: column;
+
+  .card-header,
+  .card-body,
+  .card-footer {
+    padding: $layout-spacing-lg;
+    padding-bottom: 0;
+
+    &:last-child {
+      padding-bottom: $layout-spacing-lg;
+    }
+  }
+
+  .card-image {
+    padding-top: $layout-spacing-lg;
+
+    &:first-child {
+      padding-top: 0;
+
+      img {
+        border-top-left-radius: $border-radius;
+        border-top-right-radius: $border-radius;
+      }
+    }
+
+    &:last-child {
+      img {
+        border-bottom-left-radius: $border-radius;
+        border-bottom-right-radius: $border-radius;
+      }
+    }
+  }
+}
diff --git a/src/carousels.less b/src/_carousels.scss
index 276bc1f..d68c40a 100644
--- a/src/carousels.less
+++ b/src/_carousels.scss
@@ -1,6 +1,6 @@
 // Carousels
 .carousel {
-  background: @bg-color;
+  background: $bg-color;
   display: block;
   overflow: hidden;
   position: relative;
@@ -36,15 +36,15 @@
 
     .item-prev,
     .item-next {
-      background: fade(@gray-color-light, 25%);
-      border-color: fade(@gray-color-light, 50%);
-      color: @gray-color-light;
+      background: rgba($gray-color-light, .25);
+      border-color: rgba($gray-color-light, .5);
+      color: $gray-color-light;
       opacity: 0;
       position: absolute;
       top: 50%;
       transition: all .4s ease;
       transform: translateY(-50%);
-      z-index: @zindex-2;
+      z-index: $zindex-2;
     }
     .item-prev {
       left: 1rem;
@@ -61,32 +61,32 @@
     &:nth-of-type(4):checked ~ .carousel-container .carousel-item:nth-of-type(4) {
       animation: carousel-slidein .75s ease-in-out 1;
       opacity: 1;
-      z-index: @zindex-1;
+      z-index: $zindex-1;
     }
     &:nth-of-type(1):checked ~ .carousel-nav .nav-item:nth-of-type(1),
     &:nth-of-type(2):checked ~ .carousel-nav .nav-item:nth-of-type(2),
     &:nth-of-type(3):checked ~ .carousel-nav .nav-item:nth-of-type(3),
     &:nth-of-type(4):checked ~ .carousel-nav .nav-item:nth-of-type(4) {
-      color: @gray-color-light;
+      color: $gray-color-light;
     }
   }
 
   .carousel-nav {
-    bottom: @layout-spacing;
+    bottom: $layout-spacing;
     display: flex;
     justify-content: center;
     left: 50%;
     position: absolute;
     transform: translateX(-50%);
     width: 10rem;
-    z-index: @zindex-2;
+    z-index: $zindex-2;
 
     .nav-item {
-      color: fade(@gray-color-light, 50%);
+      color: rgba($gray-color-light, .5);
       display: block;
       flex: 1 0 auto;
-      height: @unit-8;
-      margin: @unit-1;
+      height: $unit-8;
+      margin: $unit-1;
       max-width: 2.5rem;
       position: relative;
 
@@ -94,7 +94,7 @@
         background: currentColor;
         content: "";
         display: block;
-        height: @border-width-lg;
+        height: $border-width-lg;
         position: absolute;
         top: .5rem;
         width: 100%;
diff --git a/src/_chips.scss b/src/_chips.scss
new file mode 100644
index 0000000..0610470
--- /dev/null
+++ b/src/_chips.scss
@@ -0,0 +1,24 @@
+// Chips
+.chip {
+  align-items: center;
+  background: $bg-color-dark;
+  border-radius: 5rem;
+  color: $gray-color-dark;
+  display: inline-flex;
+  height: $unit-6;
+  margin: $unit-h;
+  max-width: 100%;
+  padding: $unit-h ($unit-2 + $unit-h);
+  text-decoration: none;
+  vertical-align: middle;
+
+  &.active {
+    background: $primary-color;
+    color: $light-color;
+  }
+
+  .avatar {
+    margin-left: -($unit-2 + $unit-h);
+    margin-right: $unit-1;
+  }
+}
diff --git a/src/_codes.scss b/src/_codes.scss
new file mode 100644
index 0000000..3d2cc10
--- /dev/null
+++ b/src/_codes.scss
@@ -0,0 +1,32 @@
+// Codes
+code {
+  @include label-base();
+  @include label-variant($code-color, lighten($code-color, 33%));
+  font-size: .65rem;
+}
+
+.code {
+  border-radius: $border-radius;
+  color: $body-font-color;
+  line-height: $line-height;
+  position: relative;
+
+  &::before {
+    content: attr(data-lang);
+    color: $gray-color;
+    font-size: $font-size-sm;
+    position: absolute;
+    right: $layout-spacing;
+    top: $unit-h;
+  }
+
+  code {
+    background: $bg-color;
+    color: inherit;
+    display: block;
+    line-height: inherit;
+    overflow-x: auto;
+    padding: 1rem;
+    width: 100%;
+  }
+}
diff --git a/src/comparison-sliders.less b/src/_comparison-sliders.scss
index 169caf4..a219863 100644
--- a/src/comparison-sliders.less
+++ b/src/_comparison-sliders.scss
@@ -29,7 +29,7 @@
     z-index: 1;
 
     .comparison-label {
-      right: @unit-4;
+      right: $unit-4;
     }
   }
 
@@ -45,37 +45,37 @@
       height: 100%;
       left: 0;
       position: absolute;
-      right: @unit-4;
+      right: $unit-4;
       top: 0;
-      z-index: @zindex-0;
+      z-index: $zindex-0;
     }
 
     &::after {
       background: currentColor;
       border-radius: 50%;
       box-shadow: 0 -5px, 0 5px;
-      color: @light-color;
+      color: $light-color;
       content: "";
       height: 3px;
       position: absolute;
-      right: @unit-2;
+      right: $unit-2;
       top: 50%;
       transform: translate(50%, -50%);
       width: 3px;
     }
 
     .comparison-label {
-      left: @unit-4;
+      left: $unit-4;
     }
   }
 
   .comparison-resizer {
     animation: first-run 1.5s 1 ease-in-out;
     cursor: ew-resize;
-    height: @unit-4;
+    height: $unit-4;
     left: 0;
     max-width: 100%;
-    min-width: @unit-4;
+    min-width: $unit-4;
     opacity: 0;
     outline: none;
     position: relative;
@@ -86,10 +86,10 @@
   }
 
   .comparison-label {
-    background: fade(@dark-color, 50%);
-    bottom: @unit-4;
-    color: @light-color;
-    padding: @unit-1 @unit-2;
+    background: rgba($dark-color, .5);
+    bottom: $unit-4;
+    color: $light-color;
+    padding: $unit-1 $unit-2;
     position: absolute;
     user-select: none;
   }
@@ -100,13 +100,13 @@
     width: 0;
   }
   25% {
-    width: @unit-12;
+    width: $unit-12;
   }
   50% {
-    width: @unit-4;
+    width: $unit-4;
   }
   75% {
-    width: @unit-6;
+    width: $unit-6;
   }
   100% {
     width: 0;
diff --git a/src/dropdowns.less b/src/_dropdowns.scss
index c1684a0..324440b 100644
--- a/src/dropdowns.less
+++ b/src/_dropdowns.scss
@@ -29,8 +29,8 @@
   // Fix dropdown-toggle border radius in button groups
   .btn-group {
     .dropdown-toggle:nth-last-child(2) {
-      border-bottom-right-radius: @border-radius;
-      border-top-right-radius: @border-radius;
+      border-bottom-right-radius: $border-radius;
+      border-top-right-radius: $border-radius;
     }
   }
 }
diff --git a/src/_empty.scss b/src/_empty.scss
new file mode 100644
index 0000000..29cddac
--- /dev/null
+++ b/src/_empty.scss
@@ -0,0 +1,21 @@
+// Empty states (or Blank slates)
+.empty {
+  background: $bg-color;
+  border-radius: $border-radius;
+  color: $gray-color-dark;
+  text-align: center;
+  padding: 4 * $layout-spacing;
+
+  .empty-icon {
+    margin-bottom: $layout-spacing-lg;
+  }
+
+  .empty-title,
+  .empty-subtitle {
+    margin: $layout-spacing auto;
+  }
+
+  .empty-action {
+    margin-top: $layout-spacing-lg;
+  }
+}
diff --git a/src/filters.less b/src/_filters.scss
index e417081..965dfa3 100644
--- a/src/filters.less
+++ b/src/_filters.scss
@@ -1,7 +1,7 @@
 // Filters
 .filter {
   .filter-nav {
-    margin: @layout-spacing 0;
+    margin: $layout-spacing 0;
   }
 
   .filter-body {
@@ -15,8 +15,8 @@
     &#tag-roleplaying:checked ~ .filter-nav .chip[for="tag-roleplaying"],
     &#tag-shooter:checked ~ .filter-nav .chip[for="tag-shooter"],
     &#tag-sports:checked ~ .filter-nav .chip[for="tag-sports"] {
-      background: @primary-color;
-      color: @light-color;
+      background: $primary-color;
+      color: $light-color;
     }
 
     &#tag-action:checked ~ .filter-body .column:not([data-tag~="tag-action"]),
diff --git a/src/forms.less b/src/_forms.scss
index 7ed91e6..58e958b 100644
--- a/src/forms.less
+++ b/src/_forms.scss
@@ -1,71 +1,71 @@
 // Forms
 .form-group {
   &:not(:last-child) {
-    margin-bottom: @layout-spacing;
+    margin-bottom: $layout-spacing;
   }
 }
 
 fieldset {
-  margin-bottom: @layout-spacing-lg;
+  margin-bottom: $layout-spacing-lg;
 }
 
 legend {
-  font-size: @font-size-lg;
+  font-size: $font-size-lg;
   font-weight: 500;
-  margin-bottom: @layout-spacing-lg;
+  margin-bottom: $layout-spacing-lg;
 }
 
 // Form element: Label
 .form-label {
   display: block;
-  padding: @control-padding-v + @border-width 0;
+  padding: $control-padding-v + $border-width 0;
 
   &.label-sm {
-    padding: @control-padding-v-sm + @border-width 0;
+    padding: $control-padding-v-sm + $border-width 0;
   }
 
   &.label-lg {
-    padding: @control-padding-v-lg + @border-width 0;
+    padding: $control-padding-v-lg + $border-width 0;
   }
 }
 
 // Form element: Input
 .form-input {
+  @include control-transition();
   appearance: none;
-  background: @bg-color-light;
+  background: $bg-color-light;
   background-image: none;
-  border: @border-width solid @border-color-dark;
-  border-radius: @border-radius;
-  color: @body-font-color;
-  .control-transition();
+  border: $border-width solid $border-color-dark;
+  border-radius: $border-radius;
+  color: $body-font-color;
   display: block;
-  font-size: @font-size;
-  height: @control-size;
-  line-height: @line-height;
+  font-size: $font-size;
+  height: $control-size;
+  line-height: $line-height;
   max-width: 100%;
   outline: none;
-  padding: @control-padding-v @control-padding-h;
+  padding: $control-padding-v $control-padding-h;
   position: relative;
   width: 100%;
   &:focus {
-    border-color: @primary-color;
-    .control-shadow();
+    @include control-shadow();
+    border-color: $primary-color;
   }
   &::placeholder {
-    color: @gray-color;
+    color: $gray-color;
   }
 
   // Input sizes
   &.input-sm {
-    font-size: @font-size-sm;
-    height: @control-size-sm;
-    padding: @control-padding-v-sm @control-padding-h;
+    font-size: $font-size-sm;
+    height: $control-size-sm;
+    padding: $control-padding-v-sm $control-padding-h;
   }
 
   &.input-lg {
-    font-size: @font-size-lg;
-    height: @control-size-lg;
-    padding: @control-padding-v-lg @control-padding-h;
+    font-size: $font-size-lg;
+    height: $control-size-lg;
+    padding: $control-padding-v-lg $control-padding-h;
   }
 
   &.input-inline {
@@ -74,45 +74,45 @@ legend {
     width: auto;
   }
 
-  // Textarea
-  textarea& {
-    height: auto;
-  }
-
   // Input types
   &[type="file"] {
     height: auto;
   }
 }
 
+// Form element: Textarea
+textarea.form-input {
+  height: auto;
+}
+
 // Form element: Input hint
 .form-input-hint {
-  color: @gray-color;
-  font-size: @font-size-sm;
-  margin-top: @unit-1;
+  color: $gray-color;
+  font-size: $font-size-sm;
+  margin-top: $unit-1;
 
   .has-success &,
   .is-success + & {
-    color: @success-color;
+    color: $success-color;
   }
 
   .has-error &,
   .is-error + & {
-    color: @error-color;
+    color: $error-color;
   }
 }
 
 // Form element: Select
 .form-select {
   appearance: none;
-  border: @border-width solid @border-color-dark;
-  border-radius: @border-radius;
+  border: $border-width solid $border-color-dark;
+  border-radius: $border-radius;
   color: inherit;
-  font-size: @font-size;
-  height: @control-size;
-  line-height: @line-height;
+  font-size: $font-size;
+  height: $control-size;
+  line-height: $line-height;
   outline: none;
-  padding: @control-padding-v @control-padding-h;
+  padding: $control-padding-v $control-padding-h;
   vertical-align: middle;
   width: 100%;
 
@@ -121,16 +121,16 @@ legend {
     height: auto;
     
     option {
-      padding: @unit-h @unit-1;
+      padding: $unit-h $unit-1;
     }
   }
   &:not([multiple]):not([size]) {
-    background: @bg-color-light url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23667189' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right (@control-icon-size / 2) center / .4rem .5rem;
-    padding-right: @control-icon-size + @control-padding-h;
+    background: $bg-color-light url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23667189' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right ($control-icon-size / 2) center / .4rem .5rem;
+    padding-right: $control-icon-size + $control-padding-h;
   }
   &:focus {
-    border-color: @primary-color;
-    .control-shadow();
+    @include control-shadow();
+    border-color: $primary-color;
   }
   &::-ms-expand {
     display: none;
@@ -138,15 +138,15 @@ legend {
 
   // Select sizes
   &.select-sm {
-    font-size: @font-size-sm;
-    height: @control-size-sm;
-    padding: @control-padding-v-sm (@control-icon-size + @control-padding-h) @control-padding-v-sm @control-padding-h;
+    font-size: $font-size-sm;
+    height: $control-size-sm;
+    padding: $control-padding-v-sm ($control-icon-size + $control-padding-h) $control-padding-v-sm $control-padding-h;
   }
 
   &.select-lg {
-    font-size: @font-size-lg;
-    height: @control-size-lg;
-    padding: @control-padding-v-lg (@control-icon-size + @control-padding-h) @control-padding-v-lg @control-padding-h;
+    font-size: $font-size-lg;
+    height: $control-size-lg;
+    padding: $control-padding-v-lg ($control-icon-size + $control-padding-h) $control-padding-v-lg $control-padding-h;
   }
 }
 
@@ -156,32 +156,32 @@ legend {
   position: relative;
 
   .form-icon {
-    height: @control-icon-size;
-    margin: 0 @control-padding-v;
+    height: $control-icon-size;
+    margin: 0 $control-padding-v;
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
-    width: @control-icon-size;
+    width: $control-icon-size;
   }
 }
 
 .has-icon-left {
   .form-icon {
-    left: @border-width;
+    left: $border-width;
   }
 
   .form-input {
-    padding-left: @control-icon-size + @control-padding-v * 2;
+    padding-left: $control-icon-size + $control-padding-v * 2;
   }
 }
 
 .has-icon-right {
   .form-icon {
-    right: @border-width;
+    right: $border-width;
   }
 
   .form-input {
-    padding-right: @control-icon-size + @control-padding-v * 2;
+    padding-right: $control-icon-size + $control-padding-v * 2;
   }
 }
 
@@ -190,8 +190,8 @@ legend {
 .form-radio,
 .form-switch {
   display: inline-block;
-  line-height: @line-height;
-  padding: (@control-size-sm - @line-height) / 2  (@control-icon-size + @control-padding-h);
+  line-height: $line-height;
+  padding: ($control-size-sm - $line-height) / 2  ($control-icon-size + $control-padding-h);
   position: relative;
 
   input {
@@ -202,18 +202,18 @@ legend {
     position: absolute;
     width: 1px;
     &:focus + .form-icon {
-      border-color: @primary-color;
-      .control-shadow();
+      @include control-shadow();
+      border-color: $primary-color;
     }
     &:checked + .form-icon {
-      background: @primary-color;
-      border-color: @primary-color;
+      background: $primary-color;
+      border-color: $primary-color;
     }
   }
 
   .form-icon {
-    border: @border-width solid @border-color-dark;
-    .control-transition();
+    @include control-transition();
+    border: $border-width solid $border-color-dark;
     cursor: pointer;
     display: inline-block;
     position: absolute;
@@ -223,29 +223,29 @@ legend {
 .form-checkbox,
 .form-radio {
   .form-icon {
-    background: @bg-color-light;
-    height: @control-icon-size;
+    background: $bg-color-light;
+    height: $control-icon-size;
     left: 0;
-    top: (@control-size-sm - @control-icon-size) / 2;
-    width: @control-icon-size;
+    top: ($control-size-sm - $control-icon-size) / 2;
+    width: $control-icon-size;
   }
 
   input {
     &:active + .form-icon {
-      background: @bg-color-dark;
+      background: $bg-color-dark;
     }
   }
 }
 .form-checkbox {
   .form-icon {
-    border-radius: @border-radius;
+    border-radius: $border-radius;
   }
 
   input {
     &:checked + .form-icon {
       &::before {
         background-clip: padding-box;
-        border: @border-width-lg solid @light-color;
+        border: $border-width-lg solid $light-color;
         border-left-width: 0;
         border-top-width: 0;
         content: "";
@@ -260,10 +260,10 @@ legend {
       }
     }
     &:indeterminate + .form-icon {
-      background: @primary-color;
-      border-color: @primary-color;
+      background: $primary-color;
+      border-color: $primary-color;
       &::before {
-        background: @bg-color-light;
+        background: $bg-color-light;
         content: "";
         height: 2px;
         left: 50%;
@@ -278,14 +278,14 @@ legend {
 }
 .form-radio {
   .form-icon {
-    border-radius: @control-icon-size / 2;
+    border-radius: $control-icon-size / 2;
   }
 
   input {
     &:checked + .form-icon {
       &::before {
-        background: @bg-color-light;
-        border-radius: @border-radius;
+        background: $bg-color-light;
+        border-radius: $border-radius;
         content: "";
         height: 4px;
         left: 50%;
@@ -301,27 +301,27 @@ legend {
 
 // Form element: Switch
 .form-switch {
-  padding-left: (@unit-8 + @control-padding-h);
+  padding-left: ($unit-8 + $control-padding-h);
 
   .form-icon {
-    background: @gray-color-light;
+    background: $gray-color-light;
     background-clip: padding-box;
-    border-radius: @unit-2 + @border-width;
-    height: @unit-4 + @border-width * 2;
+    border-radius: $unit-2 + $border-width;
+    height: $unit-4 + $border-width * 2;
     left: 0;
-    top: (@control-size-sm - @unit-4) / 2 - @border-width;
-    width: @unit-8;
+    top: ($control-size-sm - $unit-4) / 2 - $border-width;
+    width: $unit-8;
     &::before {
-      background: @bg-color-light;
-      border-radius: @unit-2;
+      @include control-transition();
+      background: $bg-color-light;
+      border-radius: $unit-2;
       content: "";
       display: block;
-      height: @unit-4;
+      height: $unit-4;
       left: 0;
       position: absolute;
       top: 0;
-      .control-transition();
-      width: @unit-4;
+      width: $unit-4;
     }
   }
 
@@ -333,7 +333,7 @@ legend {
     }
     &:active + .form-icon {
       &::before {
-        background: @bg-color;
+        background: $bg-color;
       }
     }
   }
@@ -344,19 +344,19 @@ legend {
   display: flex;
 
   .input-group-addon {
-    background: @bg-color;
-    border: @border-width solid @border-color-dark;
-    border-radius: @border-radius;
-    line-height: @line-height;
-    padding: @control-padding-v @control-padding-h;
+    background: $bg-color;
+    border: $border-width solid $border-color-dark;
+    border-radius: $border-radius;
+    line-height: $line-height;
+    padding: $control-padding-v $control-padding-h;
 
     &.addon-sm {
-      font-size: @font-size-sm;
-      padding: @control-padding-v-sm @control-padding-h;
+      font-size: $font-size-sm;
+      padding: $control-padding-v-sm $control-padding-h;
     }
     &.addon-lg {
-      font-size: @font-size-lg;
-      padding: @control-padding-v-lg @control-padding-h;
+      font-size: $font-size-lg;
+      padding: $control-padding-v-lg $control-padding-h;
     }
   }
 
@@ -366,7 +366,7 @@ legend {
   }
 
   .input-group-btn {
-    z-index: @zindex-0;
+    z-index: $zindex-0;
   }
 
   .form-input,
@@ -379,15 +379,15 @@ legend {
     }
     &:not(:first-child):not(:last-child) {
       border-radius: 0;
-      margin-left: -@border-width;
+      margin-left: -$border-width;
     }
     &:last-child:not(:first-child) {
       border-bottom-left-radius: 0;
       border-top-left-radius: 0;
-      margin-left: -@border-width;
+      margin-left: -$border-width;
     }
     &:focus {
-      z-index: @zindex-0 + 1;
+      z-index: $zindex-0 + 1;
     }
   }
 
@@ -405,17 +405,17 @@ legend {
 .form-select {
   .has-success &,
   &.is-success {
-    border-color: @success-color;
+    border-color: $success-color;
     &:focus {
-      .control-shadow(@success-color);
+      @include control-shadow($success-color);
     }
   }
 
   .has-error &,
   &.is-error {
-    border-color: @error-color;
+    border-color: $error-color;
     &:focus {
-      .control-shadow(@error-color);
+      @include control-shadow($error-color);
     }
   }
 }
@@ -426,18 +426,18 @@ legend {
   .has-error &,
   &.is-error {
     .form-icon {
-      border-color: @error-color;
+      border-color: $error-color;
     }
     
     input {
       &:checked + .form-icon {
-        background: @error-color;
-        border-color: @error-color;
+        background: $error-color;
+        border-color: $error-color;
       }
 
       &:focus + .form-icon {
-        border-color: @error-color;
-        .control-shadow(@error-color);
+        @include control-shadow($error-color);
+        border-color: $error-color;
       }
     }
   }
@@ -447,13 +447,13 @@ legend {
 .form-input {
   &:not(:placeholder-shown) {
     &:invalid {
-      border-color: @error-color;
+      border-color: $error-color;
       &:focus {
-        .control-shadow(@error-color);
+        @include control-shadow($error-color);
       }
 
       & + .form-input-hint {
-        color: @error-color;
+        color: $error-color;
       }
     }
   }
@@ -464,7 +464,7 @@ legend {
 .form-select {
   &:disabled,
   &.disabled {
-    background-color: @bg-color-dark;
+    background-color: $bg-color-dark;
     cursor: not-allowed;
     opacity: .5;
   }
@@ -472,7 +472,7 @@ legend {
 
 .form-input {
   &[readonly] {
-    background-color: @bg-color;
+    background-color: $bg-color;
   }
 }
 
@@ -480,7 +480,7 @@ input {
   &:disabled,
   &.disabled {
     & + .form-icon {
-      background: @bg-color-dark;
+      background: $bg-color-dark;
       cursor: not-allowed;
       opacity: .5;
     }
@@ -492,7 +492,7 @@ input {
     &:disabled,
     &.disabled {
       & + .form-icon::before {
-        background: @bg-color-light;
+        background: $bg-color-light;
       }
     }
   }
@@ -500,7 +500,7 @@ input {
 
 // Form Horizontal
 .form-horizontal {
-  padding: @layout-spacing;
+  padding: $layout-spacing;
 
   .form-group {
     display: flex;
@@ -509,6 +509,6 @@ input {
   .form-checkbox,
   .form-radio,
   .form-switch {
-    margin: (@control-size - @control-size-sm) / 2 0;
+    margin: ($control-size - $control-size-sm) / 2 0;
   }
 }
diff --git a/src/icons.less b/src/_icons.scss
index ca7672d..ad092b8 100644
--- a/src/icons.less
+++ b/src/_icons.scss
@@ -1,5 +1,5 @@
 // CSS Icons
-@icon-border-width: @border-width-lg;
+$icon-border-width: $border-width-lg;
 
 .icon {
   box-sizing: border-box;
@@ -31,7 +31,7 @@
 .icon-forward,
 .icon-upward {
   &::before {
-    border: @icon-border-width solid currentColor;
+    border: $icon-border-width solid currentColor;
     border-bottom: 0;
     border-right: 0;
     content: "";
@@ -69,7 +69,7 @@
   &::after {
     background: currentColor;
     content: "";
-    height: @icon-border-width;
+    height: $icon-border-width;
     width: .8em;
   }
 }
@@ -80,7 +80,7 @@
     background: currentColor;
     content: "";
     height: .8em;
-    width: @icon-border-width;
+    width: $icon-border-width;
   }
 }
 
@@ -139,7 +139,7 @@
     background: currentColor;
     box-shadow: 0 -.35em, 0 .35em;
     content: "";
-    height: @icon-border-width;
+    height: $icon-border-width;
     width: 100%;
   }
 }
@@ -160,7 +160,7 @@
 .icon-resize-vert {
   &::before,
   &::after {
-    border: @icon-border-width solid currentColor;
+    border: $icon-border-width solid currentColor;
     border-bottom: 0;
     border-right: 0;
     content: "";
@@ -209,7 +209,7 @@
   &::before {
     background: currentColor;
     content: "";
-    height: @icon-border-width;
+    height: $icon-border-width;
     width: 100%;
   }
 }
@@ -219,7 +219,7 @@
     background: currentColor;
     content: "";
     height: 100%;
-    width: @icon-border-width;
+    width: $icon-border-width;
   }
 }
 .icon-cross {
@@ -238,7 +238,7 @@
 // Icon check
 .icon-check {
   &::before {
-    border: @icon-border-width solid currentColor;
+    border: $icon-border-width solid currentColor;
     border-right: 0;
     border-top: 0;
     content: "";
@@ -250,12 +250,12 @@
 
 // Icon stop
 .icon-stop {
-  border: @icon-border-width solid currentColor;
+  border: $icon-border-width solid currentColor;
   border-radius: 50%;
   &::before {
     background: currentColor;
     content: "";
-    height: @icon-border-width;
+    height: $icon-border-width;
     transform: translate(-50%, -50%) rotate(45deg);
     width: 1em;
   }
@@ -263,7 +263,7 @@
 
 // Icon shutdown
 .icon-shutdown {
-  border: @icon-border-width solid currentColor;
+  border: $icon-border-width solid currentColor;
   border-radius: 50%;
   border-top-color: transparent;
   &::before {
@@ -271,14 +271,14 @@
     content: "";
     height: .5em;
     top: .1em;
-    width: @icon-border-width;
+    width: $icon-border-width;
   }
 }
 
 // Icon refresh
 .icon-refresh {
   &::before {
-    border: @icon-border-width solid currentColor;
+    border: $icon-border-width solid currentColor;
     border-radius: 50%;
     border-right-color: transparent;
     content: "";
@@ -300,7 +300,7 @@
 // Icon search
 .icon-search {
   &::before {
-    border: @icon-border-width solid currentColor;
+    border: $icon-border-width solid currentColor;
     border-radius: 50%;
     content: "";
     height: .75em;
@@ -312,7 +312,7 @@
   &::after {
     background: currentColor;
     content: "";
-    height: @icon-border-width;
+    height: $icon-border-width;
     left: 80%;
     top: 80%;
     transform: translate(-50%, -50%) rotate(45deg);
@@ -323,7 +323,7 @@
 // Icon edit
 .icon-edit {
   &::before {
-    border: @icon-border-width solid currentColor;
+    border: $icon-border-width solid currentColor;
     content: "";
     height: .4em;
     transform: translate(-40%, -60%) rotate(-45deg);
@@ -345,9 +345,9 @@
 // Icon delete
 .icon-delete {
   &::before {
-    border: @icon-border-width solid currentColor;
-    border-bottom-left-radius: @border-radius;
-    border-bottom-right-radius: @border-radius;
+    border: $icon-border-width solid currentColor;
+    border-bottom-left-radius: $border-radius;
+    border-bottom-right-radius: $border-radius;
     border-top: 0;
     content: "";
     height: .75em;
@@ -358,20 +358,20 @@
     background: currentColor;
     box-shadow: -.25em .2em, .25em .2em;
     content: "";
-    height: @icon-border-width;
-    top: @icon-border-width/2;
+    height: $icon-border-width;
+    top: $icon-border-width/2;
     width: .5em;
   }
 }
 
 // Icon share
 .icon-share {
-  border: @icon-border-width solid currentColor;
-  border-radius: @border-radius;
+  border: $icon-border-width solid currentColor;
+  border-radius: $border-radius;
   border-right: 0;
   border-top: 0;
   &::before {
-    border: @icon-border-width solid currentColor;
+    border: $icon-border-width solid currentColor;
     border-left: 0;
     border-top: 0;
     content: "";
@@ -382,7 +382,7 @@
     width: .4em;
   }
   &::after {
-    border: @icon-border-width solid currentColor;
+    border: $icon-border-width solid currentColor;
     border-bottom: 0;
     border-right: 0;
     border-radius: 75% 0;
@@ -399,13 +399,13 @@
     content: "";
     height: 1em;
     left: 15%;
-    width: @icon-border-width;
+    width: $icon-border-width;
   }
   &::after {
-    border: @icon-border-width solid currentColor;
-    border-bottom-right-radius: @border-radius;
+    border: $icon-border-width solid currentColor;
+    border-bottom-right-radius: $border-radius;
     border-left: 0;
-    border-top-right-radius: @border-radius;
+    border-top-right-radius: $border-radius;
     content: "";
     height: .65em;
     top: 35%;
@@ -417,19 +417,19 @@
 // Icon bookmark
 .icon-bookmark {
   &::before {
-    border: @icon-border-width solid currentColor;
+    border: $icon-border-width solid currentColor;
     border-bottom: 0;
-    border-top-left-radius: @border-radius;
-    border-top-right-radius: @border-radius;
+    border-top-left-radius: $border-radius;
+    border-top-right-radius: $border-radius;
     content: "";
     height: .9em;
     width: .8em;
   }
   &::after {
-    border: @icon-border-width solid currentColor;
+    border: $icon-border-width solid currentColor;
     border-bottom: 0;
     border-left: 0;
-    border-radius: @border-radius;
+    border-radius: $border-radius;
     content: "";
     height: .5em;
     transform: translate(-50%, 35%) rotate(-45deg) skew(15deg, 15deg);
@@ -440,9 +440,9 @@
 // Icon download & upload
 .icon-download,
 .icon-upload {
-  border-bottom: @icon-border-width solid currentColor;
+  border-bottom: $icon-border-width solid currentColor;
   &::before {
-    border: @icon-border-width solid currentColor;
+    border: $icon-border-width solid currentColor;
     border-bottom: 0;
     border-right: 0;
     content: "";
@@ -455,7 +455,7 @@
     content: "";
     height: .6em;
     top: 40%;
-    width: @icon-border-width;
+    width: $icon-border-width;
   }
 }
 
@@ -470,14 +470,14 @@
 
 // Icon time
 .icon-time {
-  border: @icon-border-width solid currentColor;
+  border: $icon-border-width solid currentColor;
   border-radius: 50%;
   &::before {
     background: currentColor;
     content: "";
     height: .4em;
     transform: translate(-50%, -75%);
-    width: @icon-border-width;
+    width: $icon-border-width;
   }
   &::after {
     background: currentColor;
@@ -485,21 +485,21 @@
     height: .3em;
     transform: translate(-50%, -75%) rotate(90deg);
     transform-origin: 50% 90%;
-    width: @icon-border-width;
+    width: $icon-border-width;
   }
 }
 
 // Icon mail
 .icon-mail {
   &::before {
-    border: @icon-border-width solid currentColor;
-    border-radius: @border-radius;
+    border: $icon-border-width solid currentColor;
+    border-radius: $border-radius;
     content: "";
     height: .8em;
     width: 1em;
   }
   &::after {
-    border: @icon-border-width solid currentColor;
+    border: $icon-border-width solid currentColor;
     border-right: 0;
     border-top: 0;
     content: "";
@@ -512,7 +512,7 @@
 // Icon people
 .icon-people {
   &::before {
-    border: @icon-border-width solid currentColor;
+    border: $icon-border-width solid currentColor;
     border-radius: 50%;
     content: "";
     height: .45em;
@@ -520,7 +520,7 @@
     width: .45em;
   }
   &::after {
-    border: @icon-border-width solid currentColor;
+    border: $icon-border-width solid currentColor;
     border-radius: 50% 50% 0 0;
     content: "";
     height: .4em;
@@ -531,14 +531,14 @@
 
 // Icon message
 .icon-message {
-  border: @icon-border-width solid currentColor;
+  border: $icon-border-width solid currentColor;
   border-bottom: 0;
-  border-radius: @border-radius;
+  border-radius: $border-radius;
   border-right: 0;
   &::before {
-    border: @icon-border-width solid currentColor;
+    border: $icon-border-width solid currentColor;
     border-left: 0;
-    border-bottom-right-radius: @border-radius;
+    border-bottom-right-radius: $border-radius;
     border-top: 0;
     content: "";
     height: .8em;
@@ -548,22 +548,22 @@
   }
   &::after {
     background: currentColor;
-    border-radius: @border-radius;
+    border-radius: $border-radius;
     content: "";
     height: .3em;
     left: 10%;
     top: 100%;
     transform: translate(0, -90%) rotate(45deg);
-    width: @icon-border-width;
+    width: $icon-border-width;
   }
 }
 
 // Icon photo
 .icon-photo {
-  border: @icon-border-width solid currentColor;
-  border-radius: @border-radius;
+  border: $icon-border-width solid currentColor;
+  border-radius: $border-radius;
   &::before {
-    border: @icon-border-width solid currentColor;
+    border: $icon-border-width solid currentColor;
     border-radius: 50%;
     content: "";
     height: .25em;
@@ -572,7 +572,7 @@
     width: .25em;
   }
   &::after {
-    border: @icon-border-width solid currentColor;
+    border: $icon-border-width solid currentColor;
     border-bottom: 0;
     border-left: 0;
     content: "";
@@ -587,7 +587,7 @@
 .icon-link {
   &::before,
   &::after {
-    border: @icon-border-width solid currentColor;
+    border: $icon-border-width solid currentColor;
     border-radius: 5em 0 0 5em;
     border-right: 0;
     content: "";
@@ -605,7 +605,7 @@
 // Icon location
 .icon-location {
   &::before {
-    border: @icon-border-width solid currentColor;
+    border: $icon-border-width solid currentColor;
     border-radius: 50% 50% 50% 0;
     content: "";
     height: .8em;
@@ -613,7 +613,7 @@
     width: .8em;
   }
   &::after {
-    border: @icon-border-width solid currentColor;
+    border: $icon-border-width solid currentColor;
     border-radius: 50%;
     content: "";
     height: .2em;
@@ -624,7 +624,7 @@
 
 // Icon emoji
 .icon-emoji {
-  border: @icon-border-width solid currentColor;
+  border: $icon-border-width solid currentColor;
   border-radius: 50%;
   &::before {
     border-radius: 50%;
@@ -634,7 +634,7 @@
     width: .1em;
   }
   &::after {
-    border: @icon-border-width solid currentColor;
+    border: $icon-border-width solid currentColor;
     border-bottom-color: transparent;
     border-radius: 50%;
     border-right-color: transparent;
diff --git a/src/_labels.scss b/src/_labels.scss
new file mode 100644
index 0000000..271c6f0
--- /dev/null
+++ b/src/_labels.scss
@@ -0,0 +1,32 @@
+// Labels
+.label {
+  @include label-base();
+  @include label-variant(lighten($body-font-color, 5%), $bg-color);
+  display: inline-block;
+
+  &.label-rounded {
+    border-radius: 5rem;
+    padding-left: .4rem;
+    padding-right: .4rem; 
+  }
+
+  &.label-primary {
+    @include label-variant($light-color, $primary-color);
+  }
+
+  &.label-secondary {
+    @include label-variant($primary-color, $secondary-color);
+  }
+
+  &.label-success {
+    @include label-variant($light-color, $success-color);
+  }
+
+  &.label-warning {
+    @include label-variant($light-color, $warning-color);
+  }
+
+  &.label-error {
+    @include label-variant($light-color, $error-color);
+  }
+}
diff --git a/src/layout.less b/src/_layout.scss
index 7fd2c60..83e2c18 100644
--- a/src/layout.less
+++ b/src/_layout.scss
@@ -2,29 +2,31 @@
 .container {
   margin-left: auto;
   margin-right: auto;
-  padding-left: @layout-spacing;
-  padding-right: @layout-spacing;
+  padding-left: $layout-spacing;
+  padding-right: $layout-spacing;
   width: 100%;
-  &:extend(.clearfix all);
+  @extend .clearfix;
+
+  $grid-spacing: ($layout-spacing / ($layout-spacing * 0 + 1)) * $html-font-size;
 
   &.grid-xl {
-    max-width: @size-xl + 2 * @layout-spacing * @html-font-size;
+    max-width: $grid-spacing * 2 + $size-xl;
   }
 
   &.grid-lg {
-    max-width: @size-lg + 2 * @layout-spacing * @html-font-size;
+    max-width: $grid-spacing * 2 + $size-lg;
   }
 
   &.grid-md {
-    max-width: @size-md + 2 * @layout-spacing * @html-font-size;
+    max-width: $grid-spacing * 2 + $size-md;
   }
 
   &.grid-sm {
-    max-width: @size-sm + 2 * @layout-spacing * @html-font-size;
+    max-width: $grid-spacing * 2 + $size-sm;
   }
 
   &.grid-xs {
-    max-width: @size-xs + 2 * @layout-spacing * @html-font-size;
+    max-width: $grid-spacing * 2 + $size-xs;
   }
 }
 
@@ -41,8 +43,8 @@
 .columns {
   display: flex;
   flex-wrap: wrap;
-  margin-left: -@layout-spacing;
-  margin-right: -@layout-spacing;
+  margin-left: -$layout-spacing;
+  margin-right: -$layout-spacing;
 
   &.col-gapless {
     margin-left: 0;
@@ -61,8 +63,8 @@
 .column {
   flex: 1;
   max-width: 100%;
-  padding-left: @layout-spacing;
-  padding-right: @layout-spacing;
+  padding-left: $layout-spacing;
+  padding-right: $layout-spacing;
 
   &.col-12,
   &.col-11,
@@ -130,7 +132,7 @@
 .col-mr-auto {
   margin-right: auto;
 }
-@media screen and (max-width: @size-xl ) {
+@media (max-width: $size-xl) {
   .col-xl-12,
   .col-xl-11,
   .col-xl-10,
@@ -188,7 +190,7 @@
     display: block !important;
   }
 }
-@media screen and (max-width: @size-lg ) {
+@media (max-width: $size-lg) {
   .col-lg-12,
   .col-lg-11,
   .col-lg-10,
@@ -246,7 +248,7 @@
     display: block !important;
   }
 }
-@media screen and (max-width: @size-md ) {
+@media (max-width: $size-md) {
   .col-md-12,
   .col-md-11,
   .col-md-10,
@@ -304,7 +306,7 @@
     display: block !important;
   }
 }
-@media screen and (max-width: @size-sm ) {
+@media (max-width: $size-sm) {
   .col-sm-12,
   .col-sm-11,
   .col-sm-10,
@@ -362,7 +364,7 @@
     display: block !important;
   }
 }
-@media screen and (max-width: @size-xs) {
+@media (max-width: $size-xs) {
   .col-xs-12,
   .col-xs-11,
   .col-xs-10,
diff --git a/src/media.less b/src/_media.scss
index a55b8cb..9b6aa1d 100644
--- a/src/media.less
+++ b/src/_media.scss
@@ -22,7 +22,6 @@
   padding: 0;
   position: relative;
   width: 100%;
-
   &::before {
     content: "";
     display: block;
@@ -41,6 +40,7 @@
     top: 0;
     width: 100%;
   }
+
   video {
     height: auto;
     max-width: 100%;
@@ -61,10 +61,10 @@
 }
 
 .figure {
-  margin: 0 0 @layout-spacing 0;
+  margin: 0 0 $layout-spacing 0;
 
   .figure-caption {
-    color: @gray-color-dark;
-    margin-top: @layout-spacing;
+    color: $gray-color-dark;
+    margin-top: $layout-spacing;
   }
 }
diff --git a/src/_menus.scss b/src/_menus.scss
new file mode 100644
index 0000000..bec6afc
--- /dev/null
+++ b/src/_menus.scss
@@ -0,0 +1,56 @@
+// Menus
+.menu {
+  @include shadow-variant(.05rem);
+  background: $bg-color-light;
+  border-radius: $border-radius;
+  list-style: none;
+  margin: 0;
+  min-width: $control-min-width;
+  padding: $unit-2;
+  transform: translateY($layout-spacing-sm);
+  z-index: $zindex-1;
+
+  &.menu-nav {
+    background: transparent;
+    box-shadow: none;
+  }
+
+  .menu-item {
+    margin-top: 0;
+    padding: 0 $unit-2;
+    text-decoration: none;
+    user-select: none;
+
+    & > a {
+      border-radius: $border-radius;
+      color: inherit;
+      display: block;
+      margin: 0 (-$unit-2);
+      padding: $unit-1 $unit-2;
+      text-decoration: none;
+      &:focus,
+      &:hover {
+        background: $secondary-color;
+        color: $primary-color;
+      }
+      &:active,
+      &.active {
+        background: $secondary-color;
+        color: $primary-color;
+      }
+    }
+
+    & + .menu-item {
+      margin-top: $unit-1;
+    }
+  }
+
+  .menu-badge {
+    float: right;
+    padding: $unit-1 0;
+
+    .btn {
+      margin-top: -$unit-h;
+    }
+  }
+}
diff --git a/src/meters.less b/src/_meters.scss
index d0b2b59..9fd98b0 100644
--- a/src/meters.less
+++ b/src/_meters.scss
@@ -2,12 +2,12 @@
 // Credit: https://css-tricks.com/html5-meter-element/
 .meter {
   appearance: none;
-  background: @bg-color;
+  background: $bg-color;
   border: 0;
-  border-radius: @border-radius;
+  border-radius: $border-radius;
   display: block;
   width: 100%;
-  height: @unit-4;
+  height: $unit-4;
 
   &::-webkit-meter-inner-element {
     display: block;
@@ -17,41 +17,41 @@
   &::-webkit-meter-optimum-value,
   &::-webkit-meter-suboptimum-value,
   &::-webkit-meter-even-less-good-value {
-    border-radius: @border-radius;
+    border-radius: $border-radius;
   }
 
   &::-webkit-meter-bar {
-    background: @bg-color;
+    background: $bg-color;
   }
 
   &::-webkit-meter-optimum-value {
-    background: @success-color;
+    background: $success-color;
   }
 
   &::-webkit-meter-suboptimum-value {
-    background: @warning-color;
+    background: $warning-color;
   }
 
   &::-webkit-meter-even-less-good-value {
-    background: @error-color;
+    background: $error-color;
   }
 
   &::-moz-meter-bar,
   &:-moz-meter-optimum,
   &:-moz-meter-sub-optimum,
   &:-moz-meter-sub-sub-optimum {
-    border-radius: @border-radius;
+    border-radius: $border-radius;
   }
 
   &:-moz-meter-optimum::-moz-meter-bar {
-    background: @success-color;
+    background: $success-color;
   }
 
   &:-moz-meter-sub-optimum::-moz-meter-bar {
-    background: @warning-color;
+    background: $warning-color;
   }
 
   &:-moz-meter-sub-sub-optimum::-moz-meter-bar {
-    background: @error-color;
+    background: $error-color;
   }
 }
diff --git a/src/_mixins.scss b/src/_mixins.scss
new file mode 100644
index 0000000..93788d2
--- /dev/null
+++ b/src/_mixins.scss
@@ -0,0 +1,186 @@
+// Mixins
+// Avatar mixin
+@mixin avatar-base($size: $unit-8) {
+  font-size: $size / 2;
+  height: $size;
+  width: $size;
+}
+
+// Background color utility mixin
+@mixin bg-color-variant($name: ".bg-primary", $color: $primary-color) {
+  #{$name} {
+    background: $color;
+  }
+}
+
+// Button variant mixin
+@mixin button-variant($color: $primary-color) {
+  background: $color;
+  border-color: darken($color, 3%);
+  color: $light-color;
+  &:focus {
+    @include control-shadow($color);
+  }
+  &:focus,
+  &:hover {
+    background: darken($color, 2%);
+    border-color: darken($color, 5%);
+    color: $light-color;
+  }
+  &:active,
+  &.active {
+    background: darken($color, 7%);
+    border-color: darken($color, 10%);
+    color: $light-color;
+  }
+  &.loading {
+    &::after {
+      border-bottom-color: $light-color;
+      border-left-color: $light-color;
+    }
+  }
+}
+
+@mixin button-outline-variant($color: $primary-color) {
+  background: $light-color;
+  border-color: $color;
+  color: $color;
+  &:focus {
+    @include control-shadow($color);
+  }
+  &:focus,
+  &:hover {
+    background: lighten($color, 50%);
+    border-color: darken($color, 2%);
+    color: $color;
+  }
+  &:active,
+  &.active {
+    background: $color;
+    border-color: darken($color, 5%);
+    color: $light-color;
+  }
+  &.loading {
+    &::after {
+      border-bottom-color: $color;
+      border-left-color: $color;
+    }
+  }
+}
+
+// Clearfix mixin
+@mixin clearfix() {
+  &::after {
+    clear: both;
+    content: "";
+    display: table;
+  }
+}
+
+// Component focus shadow
+@mixin control-shadow($color: $primary-color) {
+  box-shadow: 0 0 0 .1rem rgba($color, .2);
+}
+
+// Component transition
+@mixin control-transition() {
+  transition: all .2s ease;
+}
+
+// Label base style
+@mixin label-base() {
+  border-radius: $border-radius;
+  line-height: 1;
+  padding: .15rem;
+}
+
+@mixin label-variant($color: $light-color, $bg-color: $primary-color) {
+  background: $bg-color;
+  color: $color;
+}
+
+// Margin utility mixin
+@mixin margin-variant($id: 1, $size: $unit-1) {
+  .m-#{$id} {
+    margin: $size;
+  }
+  .mb-#{$id} {
+    margin-bottom: $size;
+  }
+  .ml-#{$id} {
+    margin-left: $size;
+  }
+  .mr-#{$id} {
+    margin-right: $size;
+  }
+  .mt-#{$id} {
+    margin-top: $size;
+  }
+  .mx-#{$id} {
+    margin-left: $size;
+    margin-right: $size;
+  }
+  .my-#{$id} {
+    margin-bottom: $size;
+    margin-top: $size;
+  }
+}
+
+// Padding utility mixin
+@mixin padding-variant($id: 1, $size: $unit-1) {
+  .p-#{$id} {
+    padding: $size;
+  }
+  .pb-#{$id} {
+    padding-bottom: $size;
+  }
+  .pl-#{$id} {
+    padding-left: $size;
+  }
+  .pr-#{$id} {
+    padding-right: $size;
+  }
+  .pt-#{$id} {
+    padding-top: $size;
+  }
+  .px-#{$id} {
+    padding-left: $size;
+    padding-right: $size;
+  }
+  .py-#{$id} {
+    padding-bottom: $size;
+    padding-top: $size;
+  }
+}
+
+// Shadow mixin
+@mixin shadow-variant($offset) {
+  box-shadow: 0 $offset ($offset + .05rem) * 2 rgba($dark-color, .3);
+}
+
+// Text color utility mixin
+@mixin text-color-variant($name: ".text-primary", $color: $primary-color) {
+  #{$name} {
+    color: $color;
+  }
+
+  a#{$name} {
+    &:focus,
+    &:hover {
+      color: darken($color, 5%);
+    }
+  }
+}
+
+// Text Ellipsis
+@mixin text-ellipsis() {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// Toast variant mixin
+@mixin toast-variant($color: $dark-color) {
+  background: rgba($color, .9);
+  border-color: $color;
+}
diff --git a/src/modals.less b/src/_modals.scss
index fb5cdf9..21d6ed8 100644
--- a/src/modals.less
+++ b/src/_modals.scss
@@ -7,7 +7,7 @@
   left: 0;
   opacity: 0;
   overflow: hidden;
-  padding: @layout-spacing;
+  padding: $layout-spacing;
   position: fixed;
   right: 0;
   top: 0;
@@ -16,10 +16,10 @@
   &.active {
     display: flex;
     opacity: 1;
-    z-index: @zindex-4;
+    z-index: $zindex-4;
 
     .modal-overlay {
-      background: fade(@bg-color, 75%);
+      background: rgba($bg-color, .75);
       bottom: 0;
       cursor: default;
       display: block;
@@ -32,27 +32,27 @@
     .modal-container {
       animation: slide-down .2s ease 1;
       max-width: 640px;
-      z-index: @zindex-0;
+      z-index: $zindex-0;
     }
   }
 
   &.modal-sm {
     .modal-container {
-      max-width: @control-max-width;
+      max-width: $control-max-width;
     }
   }
 }
 
 .modal-container {
-  background: @bg-color-light;
-  border-radius: @border-radius;
+  @include shadow-variant(.2rem);
+  background: $bg-color-light;
+  border-radius: $border-radius;
   display: block;
   padding: 0;
-  .shadow-variant(.2rem);
   text-align: left;
 
   .modal-header {
-    padding: @layout-spacing-lg;
+    padding: $layout-spacing-lg;
 
     .modal-title {
       margin: 0;
@@ -62,12 +62,12 @@
   .modal-body {
     max-height: 50vh;
     overflow-y: auto;
-    padding: @layout-spacing-lg;
+    padding: $layout-spacing-lg;
     position: relative;
   }
 
   .modal-footer {
-    padding: @layout-spacing-lg;
+    padding: $layout-spacing-lg;
     text-align: right;
   }
 }
diff --git a/src/navbar.less b/src/_navbar.scss
index 3e212c0..a90b6e6 100755
--- a/src/navbar.less
+++ b/src/_navbar.scss
@@ -22,7 +22,7 @@
   }
 
   .navbar-brand {
-    font-size: @font-size-lg;
+    font-size: $font-size-lg;
     font-weight: 500;
     text-decoration: none;
   }
diff --git a/src/navs.less b/src/_navs.scss
index 5f471b0..4bedc27 100644
--- a/src/navs.less
+++ b/src/_navs.scss
@@ -3,32 +3,32 @@
   display: flex;
   flex-direction: column;
   list-style: none;
-  margin: @unit-1 0;
+  margin: $unit-1 0;
 
   .nav-item {
     a {
-      color: @gray-color-dark;
-      padding: @unit-1 @unit-2;
+      color: $gray-color-dark;
+      padding: $unit-1 $unit-2;
       text-decoration: none;
       &:focus,
       &:hover {
-        color: @primary-color;
+        color: $primary-color;
       }
     }
     &.active {
       & > a {
-        color: darken(@gray-color-dark, 10%);
+        color: darken($gray-color-dark, 10%);
         font-weight: bold;
         &:focus,
         &:hover {
-          color: @primary-color;
+          color: $primary-color;
         }
       }
     }
   }
 
   & .nav {
-    margin-bottom: @unit-2;
-    margin-left: @unit-4;
+    margin-bottom: $unit-2;
+    margin-left: $unit-4;
   }
 }
diff --git a/src/normalize.less b/src/_normalize.scss
index 28ed4d7..f157a8c 100644
--- a/src/normalize.less
+++ b/src/_normalize.scss
@@ -140,7 +140,7 @@ code,
 kbd,
 pre,
 samp {
-  font-family: @mono-font-family; /* 1 (changed) */
+  font-family: $mono-font-family; /* 1 (changed) */
   font-size: 1em; /* 2 */
 }
 
diff --git a/src/pagination.less b/src/_pagination.scss
index 596651b..6efc7ba 100644
--- a/src/pagination.less
+++ b/src/_pagination.scss
@@ -2,26 +2,26 @@
 .pagination {
   display: flex;
   list-style: none;
-  margin: @unit-1 0;
-  padding: @unit-1 0;
+  margin: $unit-1 0;
+  padding: $unit-1 0;
 
   .page-item {
-    margin: @unit-1 @unit-o;
+    margin: $unit-1 $unit-o;
 
     span {
       display: inline-block;
-      padding: @unit-1 @unit-1;
+      padding: $unit-1 $unit-1;
     }
 
     a {
-      border-radius: @border-radius;
-      color: @gray-color-dark;
+      border-radius: $border-radius;
+      color: $gray-color-dark;
       display: inline-block;
-      padding: @unit-1 @unit-2;
+      padding: $unit-1 $unit-2;
       text-decoration: none;
       &:focus,
       &:hover {
-        color: @primary-color;
+        color: $primary-color;
       }
     }
 
@@ -35,8 +35,8 @@
 
     &.active {
       a {
-        background: @primary-color;
-        color: @light-color;
+        background: $primary-color;
+        color: $light-color;
       }
     }
 
diff --git a/src/panels.less b/src/_panels.scss
index 3c6bae8..386f96e 100644
--- a/src/panels.less
+++ b/src/_panels.scss
@@ -1,14 +1,14 @@
 // Panels
 .panel {
-  border: @border-width solid @border-color;
-  border-radius: @border-radius;
+  border: $border-width solid $border-color;
+  border-radius: $border-radius;
   display: flex;
   flex-direction: column;
 
   .panel-header,
   .panel-footer {
     flex: 0 0 auto;
-    padding: @layout-spacing-lg;
+    padding: $layout-spacing-lg;
   }
 
   .panel-nav {
@@ -18,6 +18,6 @@
   .panel-body {
     flex: 1 1 auto;
     overflow-y: auto;
-    padding: 0 @layout-spacing-lg;
+    padding: 0 $layout-spacing-lg;
   }
 }
diff --git a/src/_parallax.scss b/src/_parallax.scss
new file mode 100644
index 0000000..fcde262
--- /dev/null
+++ b/src/_parallax.scss
@@ -0,0 +1,129 @@
+// Parallax
+$parallax-deg: 3deg;
+$parallax-offset: 4.5px;
+$parallax-offset-z: 50px;
+$parallax-perspective: 1000px;
+$parallax-scale: .95;
+
+// Mixin: Parallax direction
+@mixin parallax-dir() {
+  height: 50%;
+  position: absolute;
+  width: 50%;
+  z-index: $zindex-1;
+}
+
+.parallax {
+  display: block;
+  height: auto;
+  position: relative;
+  width: auto;
+
+  .parallax-content {
+    @include shadow-variant(1rem);
+    height: auto;
+    transform: perspective($parallax-perspective);
+    transform-style: preserve-3d;
+    transition: all .4s ease;
+    width: 100%;
+
+    &::before {
+      content: "";
+      display: block;
+      height: 100%;
+      left: 0;
+      position: absolute;
+      top: 0;
+      width: 100%;
+    }
+  }
+
+  .parallax-front {
+    align-items: center;
+    color: $light-color;
+    display: flex;
+    height: 100%;
+    justify-content: center;
+    left: 0;
+    position: absolute;
+    text-align: center;
+    text-shadow: 0 0 20px rgba($dark-color, .75);
+    top: 0;
+    transform: translateZ($parallax-offset-z) scale($parallax-scale);
+    transition: all .4s ease;
+    width: 100%;
+    z-index: $zindex-0;
+  }
+
+  .parallax-top-left {
+    @include parallax-dir();
+    left: 0;
+    top: 0;
+
+    &:hover ~ .parallax-content {
+      transform: perspective($parallax-perspective) rotateX($parallax-deg) rotateY(-$parallax-deg);
+
+      &::before {
+        background: linear-gradient(135deg, rgba(255, 255, 255, .35) 0%, transparent 50%);
+      }
+
+      .parallax-front {
+        transform: translate3d($parallax-offset, $parallax-offset, $parallax-offset-z) scale($parallax-scale);
+      }
+    }
+  }
+
+  .parallax-top-right {
+    @include parallax-dir();
+    right: 0;
+    top: 0;
+
+    &:hover ~ .parallax-content {
+      transform: perspective($parallax-perspective) rotateX($parallax-deg) rotateY($parallax-deg);
+
+      &::before {
+        background: linear-gradient(-135deg, rgba(255, 255, 255, .35) 0%, transparent 50%);
+      }
+
+      .parallax-front {
+        transform: translate3d(-$parallax-offset, $parallax-offset, $parallax-offset-z) scale($parallax-scale);
+      }
+    }
+  }
+
+  .parallax-bottom-left {
+    @include parallax-dir();
+    bottom: 0;
+    left: 0;
+
+    &:hover ~ .parallax-content {
+      transform: perspective($parallax-perspective) rotateX(-$parallax-deg) rotateY(-$parallax-deg);
+
+      &::before {
+        background: linear-gradient(45deg, rgba(255, 255, 255, .35) 0%, transparent 50%);
+      }
+
+      .parallax-front {
+        transform: translate3d($parallax-offset, -$parallax-offset, $parallax-offset-z) scale($parallax-scale);
+      }
+    }
+  }
+
+  .parallax-bottom-right {
+    @include parallax-dir();
+    bottom: 0;
+    right: 0;
+
+    &:hover ~ .parallax-content {
+      transform: perspective($parallax-perspective) rotateX(-$parallax-deg) rotateY($parallax-deg);
+
+      &::before {
+        background: linear-gradient(-45deg, rgba(255, 255, 255, .35) 0%, transparent 50%);
+      }
+
+      .parallax-front {
+        transform: translate3d(-$parallax-offset, -$parallax-offset, $parallax-offset-z) scale($parallax-scale);
+      }
+    }
+  }
+}
diff --git a/src/popovers.less b/src/_popovers.scss
index 0ba28a0..6a9a2e5 100644
--- a/src/popovers.less
+++ b/src/_popovers.scss
@@ -7,13 +7,13 @@
     content: attr(data-tooltip);
     opacity: 0;
     left: 50%;
-    padding: @layout-spacing;
+    padding: $layout-spacing;
     position: absolute;
     top: 0;
     transform: translate(-50%, -50%) scale(0);
     transition: transform .2s ease;
-    width: @control-max-width;
-    z-index: @zindex-4;
+    width: $control-max-width;
+    z-index: $zindex-4;
   }
 
   :focus + .popover-container,
@@ -64,7 +64,7 @@
   }
 
   .card {
+    @include shadow-variant(.2rem);
     border: 0;
-    .shadow-variant(.2rem);
   }
 }
diff --git a/src/progress.less b/src/_progress.scss
index cf9e34b..f173772 100644
--- a/src/progress.less
+++ b/src/_progress.scss
@@ -2,32 +2,32 @@
 // Credit: https://css-tricks.com/html5-progress-element/
 .progress {
   appearance: none;
-  background: @bg-color-dark;
+  background: $bg-color-dark;
   border: 0;
-  border-radius: @border-radius;
-  color: @primary-color;
-  height: @unit-1;
+  border-radius: $border-radius;
+  color: $primary-color;
+  height: $unit-1;
   position: relative;
   width: 100%;
 
   &::-webkit-progress-bar {
     background: transparent;
-    border-radius: @border-radius;
+    border-radius: $border-radius;
   }
 
   &::-webkit-progress-value {
-    background: @primary-color;
-    border-radius: @border-radius;
+    background: $primary-color;
+    border-radius: $border-radius;
   }
 
   &::-moz-progress-bar {
-    background: @primary-color;
-    border-radius: @border-radius;
+    background: $primary-color;
+    border-radius: $border-radius;
   }
 
   &:indeterminate {
     animation: progress-indeterminate 1.5s linear infinite;
-    background: @bg-color-dark linear-gradient(to right, @primary-color 30%, @bg-color-dark 30%) top left / 150% 150% no-repeat;
+    background: $bg-color-dark linear-gradient(to right, $primary-color 30%, $bg-color-dark 30%) top left / 150% 150% no-repeat;
 
     &::-moz-progress-bar {
       background: transparent;
diff --git a/src/sliders.less b/src/_sliders.scss
index bf5ce96..da80a83 100644
--- a/src/sliders.less
+++ b/src/_sliders.scss
@@ -5,39 +5,39 @@
   background: transparent;
   display: block;
   width: 100%;
-  height: @unit-6;
+  height: $unit-6;
 
   &:focus {
-    .control-shadow();
+    @include control-shadow();
     outline: none;
   }
 
   // Slider Thumb
   &::-webkit-slider-thumb {
     -webkit-appearance: none;
-    background: @primary-color;
+    background: $primary-color;
     border: 0;
     border-radius: 50%;
-    height: @unit-3;
-    margin-top: -(@unit-3 - @unit-h) / 2 ;
+    height: $unit-3;
+    margin-top: -($unit-3 - $unit-h) / 2;
     transition: transform .2s ease;
-    width: @unit-3;
+    width: $unit-3;
   }
   &::-moz-range-thumb {
-    background: @primary-color;
+    background: $primary-color;
     border: 0;
     border-radius: 50%;
-    height: @unit-3;
+    height: $unit-3;
     transition: transform .2s ease;
-    width: @unit-3;
+    width: $unit-3;
   }
   &::-ms-thumb {
-    background: @primary-color;
+    background: $primary-color;
     border: 0;
     border-radius: 50%;
-    height: @unit-3;
+    height: $unit-3;
     transition: transform .2s ease;
-    width: @unit-3;
+    width: $unit-3;
   }
 
   &:active {
@@ -55,39 +55,39 @@
   &:disabled,
   &.disabled {
     &::-webkit-slider-thumb {
-      background: @gray-color-light;
+      background: $gray-color-light;
       transform: scale(1);
     }
     &::-moz-range-thumb {
-      background: @gray-color-light;
+      background: $gray-color-light;
       transform: scale(1);
     }
     &::-ms-thumb {
-      background: @gray-color-light;
+      background: $gray-color-light;
       transform: scale(1);
     }
   }
 
   // Slider Track
   &::-webkit-slider-runnable-track {
-    background: @bg-color-dark;
-    border-radius: @border-radius;
-    height: @unit-h;
+    background: $bg-color-dark;
+    border-radius: $border-radius;
+    height: $unit-h;
     width: 100%;
   }
   &::-moz-range-track {
-    background: @bg-color-dark;
-    border-radius: @border-radius;
-    height: @unit-h;
+    background: $bg-color-dark;
+    border-radius: $border-radius;
+    height: $unit-h;
     width: 100%;
   }
   &::-ms-track {
-    background: @bg-color-dark;
-    border-radius: @border-radius;
-    height: @unit-h;
+    background: $bg-color-dark;
+    border-radius: $border-radius;
+    height: $unit-h;
     width: 100%;
   }
   &::-ms-fill-lower {
-    background: @primary-color;
+    background: $primary-color;
   }
 }
diff --git a/src/steps.less b/src/_steps.scss
index fa0167f..d5ddc6e 100644
--- a/src/steps.less
+++ b/src/_steps.scss
@@ -3,18 +3,18 @@
   display: flex;
   flex-wrap: nowrap;
   list-style: none;
-  margin: @unit-1 0;
+  margin: $unit-1 0;
   width: 100%;
 
   .step-item {
     flex: 1 1 0;
     margin-top: 0;
-    min-height: 20px;
+    min-height: 1rem;
     text-align: center;
     position: relative;
 
     &:not(:first-child)::before {
-      background: @primary-color;
+      background: $primary-color;
       content: "";
       height: 2px;
       left: -50%;
@@ -24,44 +24,44 @@
     }
 
     a {
-      color: @gray-color;
+      color: $gray-color;
       display: inline-block;
       padding: 20px 10px 0;
       text-decoration: none;
 
       &::before {
-        background: @primary-color;
-        border: @border-width-lg solid @light-color;
+        background: $primary-color;
+        border: $border-width-lg solid $light-color;
         border-radius: 50%;
         content: "";
         display: block;
-        height: @unit-3;
+        height: $unit-3;
         left: 50%;
         position: absolute;
-        top: @unit-1;
+        top: $unit-1;
         transform: translateX(-50%);
-        width: @unit-3;
-        z-index: @zindex-0;
+        width: $unit-3;
+        z-index: $zindex-0;
       }
     }
 
     &.active {
       a {
         &::before {
-          background: @light-color;
-          border: @border-width-lg solid @primary-color;
+          background: $light-color;
+          border: $border-width-lg solid $primary-color;
         }
       }
 
       & ~ .step-item {
         &::before {
-          background: @border-color;
+          background: $border-color;
         }
 
         a {
 
           &::before {
-            background: @gray-color-light;
+            background: $gray-color-light;
           }
         }
       }
diff --git a/src/tables.less b/src/_tables.scss
index e9f747d..63a163a 100644
--- a/src/tables.less
+++ b/src/_tables.scss
@@ -8,7 +8,7 @@
   &.table-striped {
     tbody {
       tr:nth-of-type(odd) {
-        background: @bg-color;
+        background: $bg-color;
       }
     }
   }
@@ -17,7 +17,7 @@
     tbody {
       tr {
         &:hover {
-          background: @bg-color-dark;
+          background: $bg-color-dark;
         }
       }
     }
@@ -28,7 +28,7 @@
     tbody {
       tr {
         &.active {
-          background: @bg-color-dark;
+          background: $bg-color-dark;
         }
       }
     }
@@ -36,10 +36,10 @@
 
   td,
   th {
-    border-bottom: @border-width solid @border-color;
-    padding: @unit-3 @unit-2;
+    border-bottom: $border-width solid $border-color;
+    padding: $unit-3 $unit-2;
   }
   th {
-    border-bottom-width: @border-width-lg;
+    border-bottom-width: $border-width-lg;
   }
 }
diff --git a/src/tabs.less b/src/_tabs.scss
index c5af2b6..e9f9e2e 100644
--- a/src/tabs.less
+++ b/src/_tabs.scss
@@ -1,11 +1,11 @@
 // Tabs
 .tab {
   align-items: center;
-  border-bottom: @border-width solid @border-color;
+  border-bottom: $border-width solid $border-color;
   display: flex;
   flex-wrap: wrap;
   list-style: none;
-  margin: @unit-1 0 @unit-1 - @border-width 0;
+  margin: $unit-1 0 ($unit-1 - $border-width) 0;
 
   .tab-item {
     margin-top: 0;
@@ -16,21 +16,21 @@
     }
 
     a {
-      border-bottom: @border-width-lg solid transparent;
+      border-bottom: $border-width-lg solid transparent;
       color: inherit;
       display: block;
-      margin: 0 @unit-2 0 0;
-      padding: @unit-2 @unit-1 @unit-2 - @border-width-lg @unit-1;
+      margin: 0 $unit-2 0 0;
+      padding: $unit-2 $unit-1 $unit-2 - $border-width-lg $unit-1;
       text-decoration: none;
       &:focus,
       &:hover {
-        color: @link-color;
+        color: $link-color;
       }
     }
     &.active a,
     a.active {
-      border-bottom-color: @primary-color;
-      color: @link-color;
+      border-bottom-color: $primary-color;
+      color: $link-color;
     }
   }
 
diff --git a/src/tiles.less b/src/_tiles.scss
index a99540e..742bbae 100644
--- a/src/tiles.less
+++ b/src/_tiles.scss
@@ -11,15 +11,15 @@
   .tile-content {
     flex: 1 1 auto;
     &:not(:first-child) {
-      padding-left: @unit-2;
+      padding-left: $unit-2;
     }
     &:not(:last-child) {
-      padding-right: @unit-2;
+      padding-right: $unit-2;
     }
   }
   .tile-title,
   .tile-subtitle {
-    line-height: @line-height;
+    line-height: $line-height;
   }
 
   &.tile-centered {
@@ -31,8 +31,8 @@
 
     .tile-title,
     .tile-subtitle {
+      @include text-ellipsis();
       margin-bottom: 0;
-      .text-ellipsis;
     }
   }
 }
diff --git a/src/timelines.less b/src/_timelines.scss
index 02b421e..88cae04 100644
--- a/src/timelines.less
+++ b/src/_timelines.scss
@@ -2,15 +2,15 @@
 .timeline {
   .timeline-item {
     display: flex;
-    margin-bottom: @unit-6;
+    margin-bottom: $unit-6;
     position: relative;
     &::before {
-      background: @border-color;
+      background: $border-color;
       content: "";
       height: 100%;
       left: 11px;
       position: absolute;
-      top: @unit-6;
+      top: $unit-6;
       width: 2px;
     }
 
@@ -20,32 +20,32 @@
 
     .timeline-content {
       flex: 1 1 auto;
-      padding: 2px 0 2px @layout-spacing-lg;
+      padding: 2px 0 2px $layout-spacing-lg;
     }
 
     .timeline-icon {
       border-radius: 50%;
-      color: @light-color;
+      color: $light-color;
       display: block;
-      height: @unit-6;
+      height: $unit-6;
       text-align: center;
-      width: @unit-6;
+      width: $unit-6;
       &::before {
-        border: @border-width-lg solid @primary-color;
+        border: $border-width-lg solid $primary-color;
         border-radius: 50%;
         content: "";
         display: block;
-        height: @unit-2;
-        left: @unit-2;
+        height: $unit-2;
+        left: $unit-2;
         position: absolute;
-        top: @unit-2;
-        width: @unit-2;
+        top: $unit-2;
+        width: $unit-2;
       }
 
       &.icon-lg {
-        background: @primary-color;
-        font-size: @font-size-lg;
-        line-height: @line-height;
+        background: $primary-color;
+        font-size: $font-size-lg;
+        line-height: $line-height;
         &::before {
           content: none;
         }
diff --git a/src/_toasts.scss b/src/_toasts.scss
new file mode 100644
index 0000000..99b2e2a
--- /dev/null
+++ b/src/_toasts.scss
@@ -0,0 +1,42 @@
+// Toasts
+.toast {
+  @include toast-variant($dark-color);
+  border: $border-width solid $dark-color;
+  border-radius: $border-radius;
+  color: $light-color;
+  display: block;
+  padding: $layout-spacing;
+  width: 100%;
+
+  &.toast-primary {
+    @include toast-variant($primary-color);
+  }
+
+  &.toast-success {
+    @include toast-variant($success-color);
+  }
+
+  &.toast-warning {
+    @include toast-variant($warning-color);
+  }
+
+  &.toast-error {
+    @include toast-variant($error-color);
+  }
+
+  a {
+    color: $light-color;
+    text-decoration: underline;
+    
+    &:focus,
+    &:hover,
+    &:active,
+    &.active {
+      opacity: .75;
+    }
+  }
+
+  .btn-clear {
+    margin: 2px -2px 2px 4px;
+  }
+}
diff --git a/src/tooltips.less b/src/_tooltips.scss
index 02dc201..1ee4d97 100644
--- a/src/tooltips.less
+++ b/src/_tooltips.scss
@@ -2,31 +2,31 @@
 .tooltip {
   position: relative;
   &::after {
-    background: fade(@dark-color, 90%);
-    border-radius: @border-radius;
+    background: rgba($dark-color, .9);
+    border-radius: $border-radius;
     bottom: 100%;
-    color: @light-color;
+    color: $light-color;
     content: attr(data-tooltip);
     display: block;
-    font-size: @font-size-sm;
+    font-size: $font-size-sm;
     left: 50%;
-    max-width: @control-max-width;
+    max-width: $control-max-width;
     opacity: 0;
     overflow: hidden;
-    padding: @unit-1 @unit-2;
+    padding: $unit-1 $unit-2;
     pointer-events: none;
     position: absolute;
     text-overflow: ellipsis;
-    transform: translate(-50%, @unit-2);
+    transform: translate(-50%, $unit-2);
     transition: all .2s ease;
     white-space: nowrap;
-    z-index: @zindex-3;
+    z-index: $zindex-3;
   }
   &:focus,
   &:hover {
     &::after {
       opacity: 1;
-      transform: translate(-50%, -@unit-1);
+      transform: translate(-50%, -$unit-1);
     }
   }
   &[disabled],
@@ -38,39 +38,41 @@
     &::after {
       bottom: 50%;
       left: 100%;
-      transform: translate(-@unit-1, 50%);
+      transform: translate(-$unit-1, 50%);
     }
     &:focus,
     &:hover {
       &::after {
-        transform: translate(@unit-1, 50%);
+        transform: translate($unit-1, 50%);
       }
     }
   }
+
   &.tooltip-bottom {
     &::after {
       bottom: auto;
       top: 100%;
-      transform: translate(-50%, -@unit-2);
+      transform: translate(-50%, -$unit-2);
     }
     &:focus,
     &:hover {
       &::after {
-        transform: translate(-50%, @unit-1);
+        transform: translate(-50%, $unit-1);
       }
     }
   }
+  
   &.tooltip-left {
     &::after {
       bottom: 50%;
       left: auto;
       right: 100%;
-      transform: translate(@unit-2, 50%);
+      transform: translate($unit-2, 50%);
     }
     &:focus,
     &:hover {
       &::after {
-        transform: translate(-@unit-1, 50%);
+        transform: translate(-$unit-1, 50%);
       }
     }
   }
diff --git a/src/typography.less b/src/_typography.scss
index 5fd152f..17b7f7c 100644
--- a/src/typography.less
+++ b/src/_typography.scss
@@ -47,8 +47,8 @@ h6,
 
 // Paragraphs
 p {
-  line-height: 1.2 * @line-height;
-  margin: 0 0 @unit-4;
+  line-height: 1.2 * $line-height;
+  margin: 0 0 $unit-4;
 }
 
 // Semantic text elements
@@ -59,26 +59,28 @@ u {
 }
 
 abbr[title] {
-  border-bottom: @border-width dotted;
+  border-bottom: $border-width dotted;
   cursor: help;
   text-decoration: none;
 }
 
 kbd {
-  .label-base();
-  .label-variant(@light-color, @dark-color);
+  @include label-base();
+  @include label-variant($light-color, $dark-color);
+  font-size: .65rem;
 }
 
 mark {
-  .label-base();
-  .label-variant(@body-font-color, @highlight-color);
+  @include label-variant($body-font-color, $highlight-color);
+  border-radius: $border-radius;
+  padding: .05rem;
 }
 
 // Blockquote
 blockquote {
-  border-left: @border-width-lg solid @border-color;
+  border-left: $border-width-lg solid $border-color;
   margin-left: 0;
-  padding: @unit-2 @unit-4;
+  padding: $unit-2 $unit-4;
 
   p:last-child {
     margin-bottom: 0;
@@ -88,16 +90,16 @@ blockquote {
 // Lists
 ul,
 ol {
-  margin: @unit-4 0 @unit-4 @unit-4;
+  margin: $unit-4 0 $unit-4 $unit-4;
   padding: 0;
 
   ul,
   ol {
-    margin: @unit-4 0 @unit-4 @unit-4;
+    margin: $unit-4 0 $unit-4 $unit-4;
   }
 
   li {
-    margin-top: @unit-2;
+    margin-top: $unit-2;
   }
 }
 
@@ -122,6 +124,6 @@ dl {
     font-weight: bold;
   }
   dd {
-    margin: @unit-2 0 @unit-4 0;
+    margin: $unit-2 0 $unit-4 0;
   }
 }
diff --git a/src/_utilities.scss b/src/_utilities.scss
new file mode 100644
index 0000000..80f1e0b
--- /dev/null
+++ b/src/_utilities.scss
@@ -0,0 +1,8 @@
+@import "utilities/colors";
+@import "utilities/cursors";
+@import "utilities/display";
+@import "utilities/divider";
+@import "utilities/loading";
+@import "utilities/position";
+@import "utilities/shapes";
+@import "utilities/text";
diff --git a/src/_variables.scss b/src/_variables.scss
new file mode 100644
index 0000000..15f2903
--- /dev/null
+++ b/src/_variables.scss
@@ -0,0 +1,103 @@
+// Core variables
+// Colors
+// Core colors
+$primary-color: #5764c6;
+$primary-color-dark: darken($primary-color, 3%);
+$primary-color-light: lighten($primary-color, 3%);
+$secondary-color: lighten($primary-color, 40%);
+$secondary-color-dark: darken($secondary-color, 3%);
+$secondary-color-light: lighten($secondary-color, 3%);
+
+$link-color: $primary-color;
+$link-color-dark: darken($link-color, 5%);
+
+// Gray colors
+$dark-color: #454d5d;
+$light-color: #fff;
+$gray-color: lighten($dark-color, 40%);
+$gray-color-dark: darken($gray-color, 20%);
+$gray-color-light: lighten($gray-color, 20%);
+
+$border-color: lighten($dark-color, 60%);
+$border-color-dark: darken($border-color, 10%);
+$bg-color: lighten($dark-color, 66%);
+$bg-color-dark: darken($bg-color, 3%);
+$bg-color-light: $light-color;
+
+// Control colors
+$success-color: #32b643;
+$warning-color: #ffb700;
+$error-color: #e85600;
+
+// Other colors
+$code-color: #e06870;
+$highlight-color: #ffe9b3;
+$body-bg: $bg-color-light;
+$body-font-color: lighten($dark-color, 5%);
+
+// Fonts
+// Credit: https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
+$base-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto;
+$mono-font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace;
+$fallback-font-family: "Helvetica Neue", sans-serif;
+$cjk-zh-font-family: $base-font-family, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", $fallback-font-family;
+$cjk-jp-font-family: $base-font-family, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, $fallback-font-family;
+$cjk-ko-font-family: $base-font-family, "Malgun Gothic", $fallback-font-family;
+$body-font-family: $base-font-family, $fallback-font-family;
+
+// Unit sizes
+$unit-o: .05rem;
+$unit-h: .1rem;
+$unit-1: .2rem;
+$unit-2: .4rem;
+$unit-3: .6rem;
+$unit-4: .8rem;
+$unit-5: 1rem;
+$unit-6: 1.2rem;
+$unit-7: 1.4rem;
+$unit-8: 1.6rem;
+$unit-9: 1.8rem;
+$unit-10: 2rem;
+$unit-12: 2.4rem;
+$unit-16: 3.2rem;
+
+// Font sizes
+$html-font-size: 20px;
+$html-line-height: 1.428571429;
+$font-size: .7rem;
+$font-size-sm: .6rem;
+$font-size-lg: .8rem;
+$line-height: 1rem;
+
+// Sizes
+$layout-spacing: $unit-2;
+$layout-spacing-sm: $unit-1;
+$layout-spacing-lg: $unit-4;
+$border-radius: $unit-h;
+$border-width: $unit-o;
+$border-width-lg: $unit-h;
+$control-size: $unit-8;
+$control-size-sm: $unit-6;
+$control-size-lg: $unit-10;
+$control-padding-h: $unit-2;
+$control-padding-v: ($control-size - $line-height) / 2 - $border-width;
+$control-padding-v-sm: ($control-size-sm - $line-height) / 2 - $border-width;
+$control-padding-v-lg: ($control-size-lg - $line-height) / 2 - $border-width;
+$control-icon-size: .7rem; 
+$control-min-width: 180px;
+$control-max-width: 320px;
+
+// Responsive breakpoints
+$size-xs: 480px;
+$size-sm: 600px;
+$size-md: 840px;
+$size-lg: 960px;
+$size-xl: 1280px;
+$size-2x: 1440px;
+
+// Z-index
+$zindex-0: 1;
+$zindex-1: 100;
+$zindex-2: 200;
+$zindex-3: 300;
+$zindex-4: 400;
diff --git a/src/cards.less b/src/cards.less
deleted file mode 100644
index dadfa8b..0000000
--- a/src/cards.less
+++ /dev/null
@@ -1,39 +0,0 @@
-// Cards
-.card {
-  background: @bg-color-light;
-  border: @border-width solid @border-color;
-  border-radius: @border-radius;
-  display: flex;
-  flex-direction: column;
-
-  .card-header,
-  .card-body,
-  .card-footer {
-    padding: @layout-spacing-lg;
-    padding-bottom: 0;
-
-    &:last-child {
-      padding-bottom: @layout-spacing-lg;
-    }
-  }
-
-  .card-image {
-    padding-top: @layout-spacing-lg;
-
-    &:first-child {
-      padding-top: 0;
-
-      img {
-        border-top-left-radius: @border-radius;
-        border-top-right-radius: @border-radius;
-      }
-    }
-
-    &:last-child {
-      img {
-        border-bottom-left-radius: @border-radius;
-        border-bottom-right-radius: @border-radius;
-      }
-    }
-  }
-}
\ No newline at end of file
diff --git a/src/chips.less b/src/chips.less
deleted file mode 100644
index 60ab726..0000000
--- a/src/chips.less
+++ /dev/null
@@ -1,24 +0,0 @@
-// Chips
-.chip {
-  align-items: center;
-  background: @bg-color-dark;
-  border-radius: 5rem;
-  color: @gray-color-dark;
-  display: inline-flex;
-  height: @unit-6;
-  margin: @unit-h;
-  max-width: 100%;
-  padding: @unit-h @unit-2 + @unit-h;
-  text-decoration: none;
-  vertical-align: middle;
-
-  &.active {
-    background: @primary-color;
-    color: @light-color;
-  }
-
-  .avatar {
-    margin-left: -(@unit-2 + @unit-h);
-    margin-right: @unit-1;
-  }
-}
diff --git a/src/codes.less b/src/codes.less
deleted file mode 100644
index e982e2b..0000000
--- a/src/codes.less
+++ /dev/null
@@ -1,32 +0,0 @@
-// Codes
-code {
-  font-size: .65rem;
-  .label-base();
-  .label-variant(@code-color, lighten(@code-color, 33%));
-}
-
-.code {
-  border-radius: @border-radius;
-  color: @body-font-color;
-  line-height: @line-height;
-  position: relative;
-
-  &::before {
-    content: attr(data-lang);
-    color: @gray-color;
-    font-size: @font-size-sm;
-    position: absolute;
-    right: @layout-spacing;
-    top: @unit-h;
-  }
-
-  code {
-    background: @bg-color;
-    color: inherit;
-    display: block;
-    line-height: inherit;
-    overflow-x: auto;
-    padding: 1rem;
-    width: 100%;
-  }
-}
diff --git a/src/empty.less b/src/empty.less
deleted file mode 100644
index b6cb1ae..0000000
--- a/src/empty.less
+++ /dev/null
@@ -1,21 +0,0 @@
-// Empty states (or Blank slates)
-.empty {
-  background: @bg-color;
-  border-radius: @border-radius;
-  color: @gray-color-dark;
-  text-align: center;
-  padding: 4 * @layout-spacing;
-
-  .empty-icon {
-    margin-bottom: @layout-spacing-lg;
-  }
-
-  .empty-title,
-  .empty-subtitle {
-    margin: @layout-spacing auto;
-  }
-
-  .empty-action {
-    margin-top: @layout-spacing-lg;
-  }
-}
diff --git a/src/labels.less b/src/labels.less
deleted file mode 100644
index efeb89d..0000000
--- a/src/labels.less
+++ /dev/null
@@ -1,33 +0,0 @@
-// Labels
-.label {
-  display: inline-block;
-  .label-base();
-  .label-variant(lighten(@body-font-color, 5%), @bg-color);
-  line-height: 1;
-
-  &.label-rounded {
-    border-radius: 5rem;
-    padding-left: .4rem;
-    padding-right: .4rem; 
-  }
-
-  &.label-primary {
-    .label-variant(@light-color, @primary-color);
-  }
-
-  &.label-secondary {
-    .label-variant(@primary-color, @secondary-color);
-  }
-
-  &.label-success {
-    .label-variant(@light-color, @success-color);
-  }
-
-  &.label-warning {
-    .label-variant(@light-color, @warning-color);
-  }
-
-  &.label-error {
-    .label-variant(@light-color, @error-color);
-  }
-}
diff --git a/src/menus.less b/src/menus.less
deleted file mode 100644
index 109dc92..0000000
--- a/src/menus.less
+++ /dev/null
@@ -1,56 +0,0 @@
-// Menus
-.menu {
-  background: @bg-color-light;
-  border-radius: @border-radius;
-  list-style: none;
-  margin: 0;
-  min-width: @control-min-width;
-  padding: @unit-2;
-  .shadow-variant(.05rem);
-  transform: translateY(@layout-spacing-sm);
-  z-index: @zindex-1;
-
-  &.menu-nav {
-    background: transparent;
-    box-shadow: none;
-  }
-
-  .menu-item {
-    margin-top: 0;
-    padding: 0 @unit-2;
-    text-decoration: none;
-    user-select: none;
-
-    & > a {
-      border-radius: @border-radius;
-      color: inherit;
-      display: block;
-      margin: 0 -@unit-2;
-      padding: @unit-1 @unit-2;
-      text-decoration: none;
-      &:focus,
-      &:hover {
-        background: @secondary-color;
-        color: @primary-color;
-      }
-      &:active,
-      &.active {
-        background: @secondary-color;
-        color: @primary-color;
-      }
-    }
-
-    & + .menu-item {
-      margin-top: @unit-1;
-    }
-  }
-
-  .menu-badge {
-    float: right;
-    padding: @unit-1 0;
-
-    .btn {
-      margin-top: -@unit-h;
-    }
-  }
-}
diff --git a/src/mixins.less b/src/mixins.less
deleted file mode 100644
index 8cbb3f5..0000000
--- a/src/mixins.less
+++ /dev/null
@@ -1,175 +0,0 @@
-// Mixins
-// Avatar mixin
-.avatar-base(@size: @unit-8) {
-  font-size: @size / 2;
-  height: @size;
-  width: @size;
-}
-
-// Background color utility mixin
-.bg-color-variant(@color: @primary-color) {
-  background: @color;
-}
-
-// Button variant mixin
-.button-variant(@color: @primary-color) {
-  background: @color;
-  border-color: darken(@color, 3%);
-  color: @light-color;
-  &:focus {
-    .control-shadow(@color);
-  }
-  &:focus,
-  &:hover {
-    background: darken(@color, 2%);
-    border-color: darken(@color, 5%);
-    color: @light-color;
-  }
-  &:active,
-  &.active {
-    background: darken(@color, 7%);
-    border-color: darken(@color, 10%);
-    color: @light-color;
-  }
-  &.loading {
-    &::after {
-      border-bottom-color: @light-color;
-      border-left-color: @light-color;
-    }
-  }
-}
-
-.button-outline-variant(@color: @primary-color) {
-  background: @light-color;
-  border-color: @color;
-  color: @color;
-  &:focus {
-    .control-shadow(@color);
-  }
-  &:focus,
-  &:hover {
-    background: lighten(@color, 50%);
-    border-color: darken(@color, 2%);
-    color: @color;
-  }
-  &:active,
-  &.active {
-    background: @color;
-    border-color: darken(@color, 5%);
-    color: @light-color;
-  }
-  &.loading {
-    &::after {
-      border-bottom-color: @color;
-      border-left-color: @color;
-    }
-  }
-}
-
-// Clearfix mixin
-.clearfix() {
-  &::after {
-    clear: both;
-    content: "";
-    display: table;
-  }
-}
-
-// Component focus shadow
-.control-shadow(@color: @primary-color) {
-  box-shadow: 0 0 0 .1rem fade(@color, 20%);
-}
-
-// Component transition
-.control-transition() {
-  transition: all .2s ease;
-}
-
-// Label base style
-.label-base() {
-  border-radius: @border-radius;
-  line-height: 1;
-  padding: .15rem .2rem;
-}
-
-.label-variant(@color: @light-color, @bg-color: @primary-color) {
-  background: @bg-color;
-  color: @color;
-}
-
-// Margin utility mixin
-.margin-variant(@id: 1, @size: 1) {
-  .m-@{id} {
-    margin: @size;
-  }
-  .mb-@{id} {
-    margin-bottom: @size;
-  }
-  .ml-@{id} {
-    margin-left: @size;
-  }
-  .mr-@{id} {
-    margin-right: @size;
-  }
-  .mt-@{id} {
-    margin-top: @size;
-  }
-  .mx-@{id} {
-    margin-left: @size;
-    margin-right: @size;
-  }
-  .my-@{id} {
-    margin-bottom: @size;
-    margin-top: @size;
-  }
-}
-
-// Padding utility mixin
-.padding-variant(@id: 1, @size: 1) {
-  .p-@{id} {
-    padding: @size;
-  }
-  .pb-@{id} {
-    padding-bottom: @size;
-  }
-  .pl-@{id} {
-    padding-left: @size;
-  }
-  .pr-@{id} {
-    padding-right: @size;
-  }
-  .pt-@{id} {
-    padding-top: @size;
-  }
-  .px-@{id} {
-    padding-left: @size;
-    padding-right: @size;
-  }
-  .py-@{id} {
-    padding-bottom: @size;
-    padding-top: @size;
-  }
-}
-
-// Shadow mixin
-.shadow-variant(@offset) {
-  box-shadow: 0 @offset (@offset + .05rem) * 2 fade(@dark-color, 30%);
-}
-
-// Text color utility mixin
-.text-color-variant(@color: @primary-color) {
-  color: @color;
-
-  a& {
-    &:focus,
-    &:hover {
-      color: darken(@color, 5%);
-    }
-  }
-}
-
-// Toast variant mixin
-.toast-variant(@color: @dark-color) {
-  background: fade(@color, 90%);
-  border-color: @color;
-}
\ No newline at end of file
diff --git a/src/parallax.less b/src/parallax.less
deleted file mode 100644
index e353fd4..0000000
--- a/src/parallax.less
+++ /dev/null
@@ -1,129 +0,0 @@
-// Parallax
-@parallax-deg: 3deg;
-@parallax-offset: 6.5px;
-@parallax-offset-z: 100px;
-@parallax-perspective: 1000px;
-@parallax-scale: 1 - unit(@parallax-offset-z / @parallax-perspective);
-
-.parallax {
-  display: block;
-  height: auto;
-  position: relative;
-  width: auto;
-
-  .parallax-content {
-    height: auto;
-    .shadow-variant(1rem);
-    transform: perspective(@parallax-perspective);
-    transform-style: preserve-3d;
-    transition: all .4s ease;
-    width: 100%;
-
-    &::before {
-      content: "";
-      display: block;
-      height: 100%;
-      left: 0;
-      position: absolute;
-      top: 0;
-      width: 100%;
-    }
-  }
-
-  .parallax-front {
-    align-items: center;
-    color: @light-color;
-    display: flex;
-    height: 100%;
-    justify-content: center;
-    left: 0;
-    position: absolute;
-    text-align: center;
-    text-shadow: 0 0 20px fade(@dark-color, 50%);
-    top: 0;
-    transform: translateZ(@parallax-offset-z) scale(@parallax-scale);
-    transition: all .4s ease;
-    width: 100%;
-    z-index: @zindex-0;
-  }
-
-  .parallax-top-left {
-    .parallax-dir();
-    left: 0;
-    top: 0;
-
-    &:hover ~ .parallax-content {
-      transform: perspective(@parallax-perspective) rotateX(-@parallax-deg) rotateY(@parallax-deg);
-
-      &::before {
-        background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 50%);
-      }
-
-      .parallax-front {
-        transform: translate3d(-@parallax-offset, -@parallax-offset, @parallax-offset-z) scale(@parallax-scale);
-      }
-    }
-  }
-
-  .parallax-top-right {
-    .parallax-dir();
-    right: 0;
-    top: 0;
-
-    &:hover ~ .parallax-content {
-      transform: perspective(@parallax-perspective) rotateX(-@parallax-deg) rotateY(-@parallax-deg);
-
-      &::before {
-        background: linear-gradient(-135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 50%);
-      }
-
-      .parallax-front {
-        transform: translate3d(@parallax-offset, -@parallax-offset, @parallax-offset-z) scale(@parallax-scale);
-      }
-    }
-  }
-
-  .parallax-bottom-left {
-    .parallax-dir();
-    bottom: 0;
-    left: 0;
-
-    &:hover ~ .parallax-content {
-      transform: perspective(@parallax-perspective) rotateX(@parallax-deg) rotateY(@parallax-deg);
-
-      &::before {
-        background: linear-gradient(45deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 50%);
-      }
-
-      .parallax-front {
-        transform: translate3d(-@parallax-offset, @parallax-offset, @parallax-offset-z) scale(@parallax-scale);
-      }
-    }
-  }
-
-  .parallax-bottom-right {
-    .parallax-dir();
-    bottom: 0;
-    right: 0;
-
-    &:hover ~ .parallax-content {
-      transform: perspective(@parallax-perspective) rotateX(@parallax-deg) rotateY(-@parallax-deg);
-
-      &::before {
-        background: linear-gradient(-45deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 50%);
-      }
-
-      .parallax-front {
-        transform: translate3d(@parallax-offset, @parallax-offset, @parallax-offset-z) scale(@parallax-scale);
-      }
-    }
-  }
-}
-
-// Mixin: Parallax direction
-.parallax-dir() {
-  height: 50%;
-  position: absolute;
-  width: 50%;
-  z-index: @zindex-3;
-}
diff --git a/src/spectre-exp.scss b/src/spectre-exp.scss
new file mode 100644
index 0000000..c83b1a3
--- /dev/null
+++ b/src/spectre-exp.scss
@@ -0,0 +1,16 @@
+/*! Spectre.css Experimentals | MIT License | github.com/picturepan2/spectre */
+
+// Core variables and mixins
+@import "variables";
+@import "mixins";
+
+// Experimentals
+@import "calendars";
+@import "carousels";
+@import "comparison-sliders";
+@import "filters";
+@import "meters";
+@import "parallax";
+@import "progress";
+@import "sliders";
+@import "timelines";
diff --git a/spectre-icons.less b/src/spectre-icons.scss
index a366e7d..137fe70 100644
--- a/spectre-icons.less
+++ b/src/spectre-icons.scss
@@ -1,8 +1,8 @@
 /*! Spectre.css Icons | MIT License | github.com/picturepan2/spectre */
 
 // Core variables and mixins
-@import 'src/variables.less';
-@import 'src/mixins.less';
+@import "variables";
+@import "mixins";
 
 // Icons
-@import 'src/icons.less';
+@import "icons";
diff --git a/src/spectre.scss b/src/spectre.scss
new file mode 100644
index 0000000..2942147
--- /dev/null
+++ b/src/spectre.scss
@@ -0,0 +1,49 @@
+/*! Spectre.css | MIT License | github.com/picturepan2/spectre */
+// Core variables and mixins
+@import "variables";
+@import "mixins";
+
+// Reset and dependencies
+@import "normalize";
+@import "base";
+
+// Core classes
+@import "typography";
+@import "asian";
+@import "tables";
+@import "buttons";
+@import "forms";
+@import "labels";
+@import "codes";
+@import "media";
+
+// Layout
+@import "layout";
+@import "navbar";
+
+// Components
+@import "accordions";
+@import "autocomplete";
+@import "avatars";
+@import "badges";
+@import "breadcrumbs";
+@import "bars";
+@import "cards";
+@import "chips";
+@import "dropdowns";
+@import "empty";
+@import "menus";
+@import "modals";
+@import "navs";
+@import "pagination";
+@import "panels";
+@import "popovers";
+@import "steps";
+@import "tabs";
+@import "tiles";
+@import "toasts";
+@import "tooltips";
+
+// Utility classes
+@import "animations";
+@import "utilities";
diff --git a/src/toasts.less b/src/toasts.less
deleted file mode 100644
index 0bc61d6..0000000
--- a/src/toasts.less
+++ /dev/null
@@ -1,41 +0,0 @@
-// Toasts
-.toast {
-  border: @border-width solid @dark-color;
-  border-radius: @border-radius;
-  color: @light-color;
-  display: block;
-  padding: @layout-spacing;
-  .toast-variant(@dark-color);
-  width: 100%;
-
-  &.toast-primary {
-    .toast-variant(@primary-color);
-  }
-
-  &.toast-success {
-    .toast-variant(@success-color);
-  }
-
-  &.toast-warning {
-    .toast-variant(@warning-color);
-  }
-
-  &.toast-error {
-    .toast-variant(@error-color);
-  }
-
-  a {
-    color: @light-color;
-    text-decoration: underline;
-    &:focus,
-    &:hover,
-    &:active,
-    &.active {
-      opacity: .75;
-    }
-  }
-
-  .btn-clear {
-    margin: 2px -2px 2px 4px;
-  }
-}
diff --git a/src/utilities.less b/src/utilities.less
deleted file mode 100644
index 676beb0..0000000
--- a/src/utilities.less
+++ /dev/null
@@ -1,7 +0,0 @@
-@import 'utilities/colors.less';
-@import 'utilities/display.less';
-@import 'utilities/divider.less';
-@import 'utilities/loading.less';
-@import 'utilities/position.less';
-@import 'utilities/shapes.less';
-@import 'utilities/text.less';
\ No newline at end of file
diff --git a/src/utilities/_colors.scss b/src/utilities/_colors.scss
new file mode 100644
index 0000000..eced5ad
--- /dev/null
+++ b/src/utilities/_colors.scss
@@ -0,0 +1,29 @@
+// Text colors
+@include text-color-variant(".text-primary", $primary-color);
+
+@include text-color-variant(".text-secondary", $secondary-color-dark);
+
+@include text-color-variant(".text-gray", $gray-color);
+
+@include text-color-variant(".text-light", $light-color);
+
+@include text-color-variant(".text-success", $success-color);
+
+@include text-color-variant(".text-warning", $warning-color);
+
+@include text-color-variant(".text-error", $error-color);
+
+// Background colors
+@include bg-color-variant(".bg-primary", $primary-color);
+
+@include bg-color-variant(".bg-secondary", $secondary-color);
+
+@include bg-color-variant(".bg-dark", $dark-color);
+
+@include bg-color-variant(".bg-gray", $bg-color);
+
+@include bg-color-variant(".bg-success", $success-color);
+
+@include bg-color-variant(".bg-warning", $warning-color);
+
+@include bg-color-variant(".bg-error", $error-color);
diff --git a/src/utilities/_cursors.scss b/src/utilities/_cursors.scss
new file mode 100644
index 0000000..bfc4c6b
--- /dev/null
+++ b/src/utilities/_cursors.scss
@@ -0,0 +1,24 @@
+// Cursors
+.c-hand {
+  cursor: pointer;
+}
+
+.c-move {
+  cursor: move;
+}
+
+.c-zoom-in {
+  cursor: zoom-in;
+}
+
+.c-zoom-out {
+  cursor: zoom-out;
+}
+
+.c-not-allowed {
+  cursor: not-allowed;
+}
+
+.c-auto {
+  cursor: auto;
+}
diff --git a/src/utilities/display.less b/src/utilities/_display.scss
index 26e611e..c6248e0 100644
--- a/src/utilities/display.less
+++ b/src/utilities/_display.scss
@@ -15,7 +15,7 @@
   display: inline-flex;
 }
 .d-none,
-.hide {
+.d-hide {
   display: none !important;
 }
 .d-visible {
@@ -42,6 +42,3 @@
   position: absolute;
   width: 1px;
 }
-.hand {
-  cursor: pointer;
-}
diff --git a/src/utilities/divider.less b/src/utilities/_divider.scss
index a5cb45b..5d0feb2 100644
--- a/src/utilities/divider.less
+++ b/src/utilities/_divider.scss
@@ -5,44 +5,44 @@
   position: relative;
 
   &[data-content]::after {
-    background: @bg-color-light;
-    color: @gray-color;
+    background: $bg-color-light;
+    color: $gray-color;
     content: attr(data-content);
     display: inline-block;
-    font-size: @font-size-sm;
-    padding: 0 @unit-2;
-    transform: translateY(-@font-size-sm + @border-width);
+    font-size: $font-size-sm;
+    padding: 0 $unit-2;
+    transform: translateY(-$font-size-sm + $border-width);
   }
 }
 
 .divider {
-  border-top: @border-width solid @border-color;
-  height: @border-width;
-  margin: @unit-2 0;
+  border-top: $border-width solid $border-color;
+  height: $border-width;
+  margin: $unit-2 0;
 
   &[data-content] {
-    margin: @unit-4 0;
+    margin: $unit-4 0;
   }
 }
 
 .divider-vert {
   display: block;
-  padding: @unit-4;
+  padding: $unit-4;
 
   &::before {
-    border-left: @border-width solid @border-color;
-    bottom: @unit-2;
+    border-left: $border-width solid $border-color;
+    bottom: $unit-2;
     content: "";
     display: block;
     left: 50%;
     position: absolute;
-    top: @unit-2;
+    top: $unit-2;
     transform: translateX(-50%);
   }
 
   &[data-content]::after {
     left: 50%;
-    padding: @unit-1 0;
+    padding: $unit-1 0;
     position: absolute;
     top: 50%;
     transform: translate(-50%, -50%);
diff --git a/src/utilities/loading.less b/src/utilities/_loading.scss
index 767ec9e..1b4ea60 100644
--- a/src/utilities/loading.less
+++ b/src/utilities/_loading.scss
@@ -1,34 +1,34 @@
 // Loading
 .loading {
   color: transparent !important;
-  min-height: @unit-4;
+  min-height: $unit-4;
   pointer-events: none;
   position: relative;
   &::after {
     animation: loading 500ms infinite linear;
-    border: @border-width-lg solid @primary-color;
+    border: $border-width-lg solid $primary-color;
     border-radius: 50%;
     border-right-color: transparent;
     border-top-color: transparent;
     content: "";
     display: block;
-    height: @unit-4;
+    height: $unit-4;
     left: 50%;
-    margin-left: -@unit-2;
-    margin-top: -@unit-2;
+    margin-left: -$unit-2;
+    margin-top: -$unit-2;
     position: absolute;
     top: 50%;
-    width: @unit-4;
-    z-index: @zindex-0;
+    width: $unit-4;
+    z-index: $zindex-0;
   }
 
   &.loading-lg {
-    min-height: @unit-10;
+    min-height: $unit-10;
     &::after {
-      height: @unit-8;
-      width: @unit-8;
-      margin-left: -@unit-4;
-      margin-top: -@unit-4;
+      height: $unit-8;
+      margin-left: -$unit-4;
+      margin-top: -$unit-4;
+      width: $unit-8;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/utilities/position.less b/src/utilities/_position.scss
index 235d6a6..1f4c5e8 100644
--- a/src/utilities/position.less
+++ b/src/utilities/_position.scss
@@ -1,10 +1,12 @@
 // Position
 .clearfix {
-  .clearfix();
+  @include clearfix();
 }
+
 .float-left {
   float: left !important;
 }
+
 .float-right {
   float: right !important;
 }
@@ -12,12 +14,15 @@
 .relative {
   position: relative;
 }
+
 .absolute {
   position: absolute;
 }
+
 .fixed {
   position: fixed;
 }
+
 .centered {
   display: block;
   float: none;
@@ -26,10 +31,14 @@
 }
 
 // Spacing
-.margin-variant(0, 0);
-.margin-variant(1, @unit-1);
-.margin-variant(2, @unit-2);
+@include margin-variant(0, 0);
+
+@include margin-variant(1, $unit-1);
+
+@include margin-variant(2, $unit-2);
+
+@include padding-variant(0, 0);
+
+@include padding-variant(1, $unit-1);
 
-.padding-variant(0, 0);
-.padding-variant(1, @unit-1);
-.padding-variant(2, @unit-2);
\ No newline at end of file
+@include padding-variant(2, $unit-2);
diff --git a/src/utilities/shapes.less b/src/utilities/_shapes.scss
index e9f63bc..c11d5df 100644
--- a/src/utilities/shapes.less
+++ b/src/utilities/_shapes.scss
@@ -1,7 +1,8 @@
 // Shapes
 .rounded {
-  border-radius: @border-radius;
+  border-radius: $border-radius;
 }
+
 .circle {
   border-radius: 50%;
 }
diff --git a/src/utilities/text.less b/src/utilities/_text.scss
index f571613..67793ac 100644
--- a/src/utilities/text.less
+++ b/src/utilities/_text.scss
@@ -1,50 +1,62 @@
 // Text
+// Text alignment utilities
 .text-left {
   text-align: left;
 }
+
 .text-right {
   text-align: right;
 }
+
 .text-center {
   text-align: center;
 }
+
 .text-justify {
   text-align: justify;
 }
 
+// Text transform utilities
 .text-lowercase {
   text-transform: lowercase;
 }
+
 .text-uppercase {
   text-transform: uppercase;
 }
+
 .text-capitalize {
   text-transform: capitalize;
 }
 
+// Text style utilities
 .text-normal {
   font-weight: normal;
 }
+
 .text-bold {
   font-weight: bold;
 }
+
 .text-italic {
   font-style: italic;
 }
+
 .text-large {
   font-size: 1.2em;
 }
 
+// Text overflow utilities
 .text-ellipsis {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  @include text-ellipsis();
 }
+
 .text-clip {
   overflow: hidden;
   text-overflow: clip;
   white-space: nowrap;
 }
+
 .text-break {
   hyphens: auto;
   word-break: break-word;
diff --git a/src/utilities/colors.less b/src/utilities/colors.less
deleted file mode 100644
index 9571241..0000000
--- a/src/utilities/colors.less
+++ /dev/null
@@ -1,45 +0,0 @@
-// Text colors
-.text-primary {
-  .text-color-variant(@primary-color);
-}
-.text-secondary {
-  .text-color-variant(@secondary-color-dark);
-}
-.text-gray {
-  .text-color-variant(@gray-color);
-}
-.text-light {
-  .text-color-variant(@light-color);
-}
-.text-success {
-  .text-color-variant(@success-color);
-}
-.text-warning {
-  .text-color-variant(@warning-color);
-}
-.text-error {
-  .text-color-variant(@error-color);
-}
-
-// Background colors
-.bg-primary {
-  .bg-color-variant(@primary-color);
-}
-.bg-secondary {
-  .bg-color-variant(@secondary-color);
-}
-.bg-dark {
-  .bg-color-variant(@dark-color);
-}
-.bg-gray {
-  .bg-color-variant(@bg-color);
-}
-.bg-success {
-  .bg-color-variant(@success-color);
-}
-.bg-warning {
-  .bg-color-variant(@warning-color);
-}
-.bg-error {
-  .bg-color-variant(@error-color);
-}
diff --git a/src/variables.less b/src/variables.less
deleted file mode 100644
index d146459..0000000
--- a/src/variables.less
+++ /dev/null
@@ -1,104 +0,0 @@
-// Core variables
-
-// Global
-@html-font-size: 20px;
-@html-line-height: 1.428571429;
-@body-bg: @bg-color-light;
-@body-font-color: lighten(@dark-color, 5%);
-@font-size: .7rem;
-@font-size-sm: .6rem;
-@font-size-lg: .8rem;
-@line-height: 1rem;
-
-// Fonts
-// Credit: https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
-@base-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto;
-@mono-font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace;
-@fallback-font-family: "Helvetica Neue", sans-serif;
-@cjk-zh-font-family: @base-font-family, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", @fallback-font-family;
-@cjk-jp-font-family: @base-font-family, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, @fallback-font-family;
-@cjk-ko-font-family: @base-font-family, "Malgun Gothic", @fallback-font-family;
-@body-font-family: @base-font-family, @fallback-font-family;
-
-// Unit sizes
-@unit-o: .05rem;
-@unit-h: .1rem;
-@unit-1: .2rem;
-@unit-2: .4rem;
-@unit-3: .6rem;
-@unit-4: .8rem;
-@unit-5: 1rem;
-@unit-6: 1.2rem;
-@unit-7: 1.4rem;
-@unit-8: 1.6rem;
-@unit-9: 1.8rem;
-@unit-10: 2rem;
-@unit-12: 2.4rem;
-@unit-16: 3.2rem;
-
-// Sizes
-@layout-spacing: @unit-2;
-@layout-spacing-sm: @unit-1;
-@layout-spacing-lg: @unit-4;
-@control-size: @unit-8;
-@control-size-sm: @unit-6;
-@control-size-lg: @unit-10;
-@control-padding-h: @unit-2;
-@control-padding-v: (@control-size - @line-height) / 2 - @border-width;
-@control-padding-v-sm: (@control-size-sm - @line-height) / 2 - @border-width;
-@control-padding-v-lg: (@control-size-lg - @line-height) / 2 - @border-width;
-@control-icon-size: .7rem; 
-@control-min-width: 180px;
-@control-max-width: 320px;
-@border-radius: @unit-h;
-@border-width: @unit-o;
-@border-width-lg: @unit-h;
-
-// Colors
-// Core colors
-@primary-color: #5764c6;
-@primary-color-dark: darken(@primary-color, 3%);
-@primary-color-light: lighten(@primary-color, 3%);
-@secondary-color: lighten(@primary-color, 40%);
-@secondary-color-dark: darken(@secondary-color, 3%);
-@secondary-color-light: lighten(@secondary-color, 3%);
-
-@link-color: @primary-color;
-@link-color-dark: darken(@link-color, 5%);
-
-// Gray colors
-@dark-color: #454d5d;
-@light-color: #fff;
-@gray-color: lighten(@dark-color, 40%);
-@gray-color-dark: darken(@gray-color, 20%);
-@gray-color-light: lighten(@gray-color, 20%);
-
-@border-color: lighten(@dark-color, 60%);
-@border-color-dark: darken(@border-color, 10%);
-@bg-color: lighten(@dark-color, 66%);
-@bg-color-dark: darken(@bg-color, 3%);
-@bg-color-light: @light-color;
-
-// Control colors
-@success-color: #32b643;
-@warning-color: #ffb700;
-@error-color: #e85600;
-
-// Other colors
-@code-color: #e06870;
-@highlight-color: #ffe9b3;
-
-// Responsive breakpoints
-@size-xs: 480px;
-@size-sm: 600px;
-@size-md: 840px;
-@size-lg: 960px;
-@size-xl: 1280px;
-@size-2x: 1440px;
-
-// Z-index
-@zindex-0: 1;
-@zindex-1: 100;
-@zindex-2: 200;
-@zindex-3: 300;
-@zindex-4: 400;