diff --git a/.travis.yml b/.travis.yml
index 8ff3a8d..7ceeb4d 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -3,7 +3,6 @@ notifications:
 language: node_js
 sudo: false
 node_js: stable
-before_script:
-  - npm install -g polymer-cli
-  - polymer install
+before_script: npm install -g polymer-cli
 script: npm run lint
+
diff --git a/bower.json b/bower.json
deleted file mode 100644
index c15a8b1..0000000
--- a/bower.json
+++ /dev/null
@@ -1,37 +0,0 @@
-{
-  "name": "skin-styles",
-  "version": "2.0.0",
-  "license": "BSD-3-Clause",
-  "private": true,
-  "authors": [
-    "The FabricElements Authors"
-  ],
-  "description": "Extend paper-styles with useful styles",
-  "keywords": [
-    "web-components",
-    "polymer",
-    "styles",
-    "FabricElements",
-    "css",
-    "buttons",
-    "typography",
-    "grid",
-    "animations"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git@github.com:FabricElements/skin-styles.git"
-  },
-  "main": "skin-styles.html",
-  "dependencies": {
-    "polymer": "Polymer/polymer#^2.0.0",
-    "paper-styles": "PolymerElements/paper-styles#^2.0.0"
-  },
-  "devDependencies": {
-    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^2.0.0",
-    "web-component-tester": "Polymer/web-component-tester#^6.0.0",
-    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0",
-    "iron-test-helpers": "PolymerElements/iron-test-helpers#^2.0.0",
-    "paper-button": "PolymerElements/paper-button#^2.0.0"
-  }
-}
diff --git a/classes.html b/classes.html
deleted file mode 100644
index 5a660bd..0000000
--- a/classes.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<!--
-@license
-Copyright (c) 2017 FabricElements. All rights reserved.
-
-skin-styles Styles
--->
-<link rel="import" href="classes/buttons.html">
-<link rel="import" href="classes/typography.html">
-<link rel="import" href="classes/grid.html">
-<link rel="import" href="classes/bootstrap.html">
-
-<dom-module id="skin-styles">
-  <template>
-    <style include="skin-typography skin-buttons"></style>
-  </template>
-</dom-module>
diff --git a/classes.js b/classes.js
new file mode 100644
index 0000000..464366f
--- /dev/null
+++ b/classes.js
@@ -0,0 +1,21 @@
+/**
+ @license
+ Copyright (c) FabricElements. All rights reserved.
+
+ skin-styles Styles
+ */
+import './classes/buttons.js';
+import './classes/typography.js';
+import './classes/grid.js';
+import './classes/bootstrap.js';
+
+const styleElement = document.createElement('dom-module');
+styleElement.innerHTML = `
+<template>
+  <!--suppress CssInvalidPseudoSelector -->
+  <!--suppress CssUnresolvedCustomProperty -->
+  <!--suppress CssUnresolvedCustomPropertySet -->
+  <style include="skin-typography skin-buttons"></style>
+</template>
+`;
+styleElement.register('skin-styles');
diff --git a/classes/animate.html b/classes/animate.html
index fe6d15c..1052ed1 100644
--- a/classes/animate.html
+++ b/classes/animate.html
@@ -1,6 +1,6 @@
 <!--
 @license
-Copyright (c) 2017 FabricElements. All rights reserved.
+Copyright (c) FabricElements. All rights reserved.
 
 `animate`
 Animate
diff --git a/classes/bootstrap.html b/classes/bootstrap.js
similarity index 99%
rename from classes/bootstrap.html
rename to classes/bootstrap.js
index 3c82249..cc27d9d 100644
--- a/classes/bootstrap.html
+++ b/classes/bootstrap.js
@@ -1,15 +1,7 @@
-<!--
-@license
-Copyright (c) 2017 FabricElements. All rights reserved.
+const $_documentContainer = document.createElement('template');
+$_documentContainer.setAttribute('style', 'display: none;');
 
-`skin-styles-bootstrap` is a supercharged Bootstrap grid.
-https://github.com/twbs/bootstrap/blob/v4-dev/dist/css/bootstrap.css
-
-@group Skin Styles
-@demo demo/grid.html bootstrap
--->
-
-<style>
+$_documentContainer.innerHTML = `<style>
   .align-baseline {
     vertical-align: baseline !important;
   }
@@ -3755,4 +3747,23 @@
       display: none !important;
     }
   }
-</style>
+</style>`;
+
+document.head.appendChild($_documentContainer.content);
+
+/**
+ @license
+ Copyright (c) FabricElements. All rights reserved.
+
+ `skin-styles-bootstrap` is a supercharged Bootstrap grid.
+ https://github.com/twbs/bootstrap/blob/v4-dev/dist/css/bootstrap.css
+
+ @group Skin Styles
+ @demo demo/grid.html bootstrap
+ */
+/*
+  FIXME(polymer-modulizer): the above comments were extracted
+  from HTML and may be out of place here. Review them and
+  then delete this comment!
+*/
+;
diff --git a/classes/buttons.html b/classes/buttons.html
deleted file mode 100644
index a6bd2bf..0000000
--- a/classes/buttons.html
+++ /dev/null
@@ -1,182 +0,0 @@
-<link rel="import" href="../../polymer/polymer.html">
-<link rel="import" href="../styles/buttons.html">
-
-<!--
-@license
-Copyright (c) 2017 FabricElements. All rights reserved.
-
-`buttons`
-App color themes
-
-@group Skin Styles
-@demo demo/buttons.html skin-buttons
--->
-
-<dom-module id="skin-buttons">
-  <template>
-    <style is="custom-style">
-      /*noinspection ALL*/
-      a,
-      a > paper-button {
-        text-decoration: none;
-        color: inherit;
-      }
-
-      /*noinspection ALL*/
-      paper-button {
-        text-decoration: none;
-      }
-
-      /* ===========================
-      Buttons
-      =============================*/
-      /*noinspection ALL*/
-      .btn-rounded {
-        @apply(--btn-rounded);
-      }
-
-      /* primary-color ==============================================================*/
-      /*noinspection ALL*/
-      .btn--primary-color:not([disabled]) {
-        @apply(--btn--primary-color);
-      }
-
-      /*noinspection ALL*/
-      .btn-fill--primary-color:not([disabled]) {
-        @apply(--btn-fill--primary-color);
-      }
-
-      /*noinspection ALL*/
-      .btn--light-primary-color:not([disabled]) {
-        @apply(--btn--light-primary-color);
-      }
-
-      /*noinspection ALL*/
-      .btn-fill--light-primary-color:not([disabled]) {
-        @apply(--btn-fill--light-primary-color);
-      }
-
-      /*noinspection ALL*/
-      .btn--dark-primary-color:not([disabled]) {
-        @apply(--btn--dark-primary-color);
-      }
-
-      /*noinspection ALL*/
-      .btn-fill--dark-primary-color:not([disabled]) {
-        @apply(--btn-fill--dark-primary-color);
-      }
-
-      /*noinspection ALL*/
-      .btn--accent-color:not([disabled]) {
-        @apply(--btn--accent-color);
-      }
-
-      /*noinspection ALL*/
-      .btn-fill--accent-color:not([disabled]) {
-        @apply(--btn-fill--accent-color);
-      }
-
-      /*noinspection ALL*/
-      .btn--light-accent-color:not([disabled]) {
-        @apply(--btn--light-accent-color);
-      }
-
-      /*noinspection ALL*/
-      .btn-fill--light-accent-color:not([disabled]) {
-        @apply(--btn-fill--light-accent-color);
-      }
-
-      /*noinspection ALL*/
-      .btn--dark-accent-color:not([disabled]) {
-        @apply(--btn--dark-accent-color);
-      }
-
-      /*noinspection ALL*/
-      .btn-fill--dark-accent-color:not([disabled]) {
-        @apply(--btn-fill--dark-accent-color);
-      }
-
-      /* secondary-color ==============================================================*/
-      /*noinspection ALL*/
-      .btn--secondary-color:not([disabled]) {
-        @apply(--btn--secondary-color);
-      }
-
-      /*noinspection ALL*/
-      .btn-fill--secondary-color:not([disabled]) {
-        @apply(--btn-fill--secondary-color);
-      }
-
-      /*noinspection ALL*/
-      .btn--light-secondary-color:not([disabled]) {
-        @apply(--btn--light-secondary-color);
-      }
-
-      /*noinspection ALL*/
-      .btn-fill--light-secondary-color:not([disabled]) {
-        @apply(--btn-fill--light-secondary-color);
-      }
-
-      /*noinspection ALL*/
-      .btn--dark-secondary-color:not([disabled]) {
-        @apply(--btn--dark-secondary-color);
-      }
-
-      /*noinspection ALL*/
-      .btn-fill--dark-secondary-color:not([disabled]) {
-        @apply(--btn-fill--dark-secondary-color);
-      }
-
-      /*noinspection ALL*/
-      .btn--accent-secondary-color:not([disabled]) {
-        @apply(--btn--accent-secondary-color);
-      }
-
-      /*noinspection ALL*/
-      .btn-fill--accent-secondary-color:not([disabled]) {
-        @apply(--btn-fill--accent-secondary-color);
-      }
-
-      /*noinspection ALL*/
-      .btn--light-accent-secondary-color:not([disabled]) {
-        @apply(--btn--light-accent-secondary-color);
-      }
-
-      /*noinspection ALL*/
-      .btn-fill--light-accent-secondary-color:not([disabled]) {
-        @apply(--btn-fill--light-accent-secondary-color);
-      }
-
-      /*noinspection ALL*/
-      .btn--dark-accent-secondary-color:not([disabled]) {
-        @apply(--btn--dark-accent-secondary-color);
-      }
-
-      /*noinspection ALL*/
-      .btn-fill--dark-accent-secondary-color:not([disabled]) {
-        @apply(--btn-fill--dark-accent-secondary-color);
-      }
-
-      /*=====================================*/
-      /*noinspection ALL*/
-      .btn-light:not([disabled]) {
-        @apply(--btn-light);
-      }
-
-      /*noinspection ALL*/
-      .btn-light-white:not([disabled]) {
-        @apply(--btn-light-white);
-      }
-
-      /*noinspection ALL*/
-      .btn--mid--dark:not([disabled]) {
-        @apply(--btn--mid--dark);
-      }
-
-      /*noinspection ALL*/
-      .btn--dark:not([disabled]) {
-        @apply(--btn--dark);
-      }
-    </style>
-  </template>
-</dom-module>
diff --git a/classes/buttons.js b/classes/buttons.js
new file mode 100644
index 0000000..83094af
--- /dev/null
+++ b/classes/buttons.js
@@ -0,0 +1,187 @@
+/**
+ @license
+ Copyright (c) FabricElements. All rights reserved.
+
+ `buttons`
+ App color themes
+
+ @group Skin Styles
+ @demo demo/buttons.html skin-buttons
+ */
+import '@polymer/polymer/polymer-legacy.js';
+import '../styles/buttons.js';
+
+const styleElement = document.createElement('dom-module');
+styleElement.innerHTML = `
+<template>
+  <!--suppress CssInvalidPseudoSelector -->
+  <!--suppress CssUnresolvedCustomProperty -->
+  <!--suppress CssUnresolvedCustomPropertySet -->
+  <style>
+    /*noinspection ALL*/
+    a,
+    a > paper-button {
+      text-decoration: none;
+      color: inherit;
+    }
+
+    /*noinspection ALL*/
+    paper-button {
+      text-decoration: none;
+    }
+
+    /* ===========================
+    Buttons
+    =============================*/
+    /*noinspection ALL*/
+    .btn-rounded {
+      @apply --btn-rounded;
+    }
+
+    /* primary-color ==============================================================*/
+    /*noinspection ALL*/
+    .btn--primary-color:not([disabled]) {
+      @apply --btn--primary-color;
+    }
+
+    /*noinspection ALL*/
+    .btn-fill--primary-color:not([disabled]) {
+      @apply --btn-fill--primary-color;
+    }
+
+    /*noinspection ALL*/
+    .btn--light-primary-color:not([disabled]) {
+      @apply --btn--light-primary-color;
+    }
+
+    /*noinspection ALL*/
+    .btn-fill--light-primary-color:not([disabled]) {
+      @apply --btn-fill--light-primary-color;
+    }
+
+    /*noinspection ALL*/
+    .btn--dark-primary-color:not([disabled]) {
+      @apply --btn--dark-primary-color;
+    }
+
+    /*noinspection ALL*/
+    .btn-fill--dark-primary-color:not([disabled]) {
+      @apply --btn-fill--dark-primary-color;
+    }
+
+    /*noinspection ALL*/
+    .btn--accent-color:not([disabled]) {
+      @apply --btn--accent-color;
+    }
+
+    /*noinspection ALL*/
+    .btn-fill--accent-color:not([disabled]) {
+      @apply --btn-fill--accent-color;
+    }
+
+    /*noinspection ALL*/
+    .btn--light-accent-color:not([disabled]) {
+      @apply --btn--light-accent-color;
+    }
+
+    /*noinspection ALL*/
+    .btn-fill--light-accent-color:not([disabled]) {
+      @apply --btn-fill--light-accent-color;
+    }
+
+    /*noinspection ALL*/
+    .btn--dark-accent-color:not([disabled]) {
+      @apply --btn--dark-accent-color;
+    }
+
+    /*noinspection ALL*/
+    .btn-fill--dark-accent-color:not([disabled]) {
+      @apply --btn-fill--dark-accent-color;
+    }
+
+    /* secondary-color ==============================================================*/
+    /*noinspection ALL*/
+    .btn--secondary-color:not([disabled]) {
+      @apply --btn--secondary-color;
+    }
+
+    /*noinspection ALL*/
+    .btn-fill--secondary-color:not([disabled]) {
+      @apply --btn-fill--secondary-color;
+    }
+
+    /*noinspection ALL*/
+    .btn--light-secondary-color:not([disabled]) {
+      @apply --btn--light-secondary-color;
+    }
+
+    /*noinspection ALL*/
+    .btn-fill--light-secondary-color:not([disabled]) {
+      @apply --btn-fill--light-secondary-color;
+    }
+
+    /*noinspection ALL*/
+    .btn--dark-secondary-color:not([disabled]) {
+      @apply --btn--dark-secondary-color;
+    }
+
+    /*noinspection ALL*/
+    .btn-fill--dark-secondary-color:not([disabled]) {
+      @apply --btn-fill--dark-secondary-color;
+    }
+
+    /*noinspection ALL*/
+    .btn--accent-secondary-color:not([disabled]) {
+      @apply --btn--accent-secondary-color;
+    }
+
+    /*noinspection ALL*/
+    .btn-fill--accent-secondary-color:not([disabled]) {
+      @apply --btn-fill--accent-secondary-color;
+    }
+
+    /*noinspection ALL*/
+    .btn--light-accent-secondary-color:not([disabled]) {
+      @apply --btn--light-accent-secondary-color;
+    }
+
+    /*noinspection ALL*/
+    .btn-fill--light-accent-secondary-color:not([disabled]) {
+      @apply --btn-fill--light-accent-secondary-color;
+    }
+
+    /*noinspection ALL*/
+    .btn--dark-accent-secondary-color:not([disabled]) {
+      @apply --btn--dark-accent-secondary-color;
+    }
+
+    /*noinspection ALL*/
+    .btn-fill--dark-accent-secondary-color:not([disabled]) {
+    background-color: red;
+      @apply --btn-fill--dark-accent-secondary-color;
+    }
+
+    /*=====================================*/
+    /*noinspection ALL*/
+    .btn-light:not([disabled]) {
+      @apply --btn-light;
+    }
+
+    /*noinspection ALL*/
+    .btn-light-white:not([disabled]) {
+      @apply --btn-light-white;
+    }
+
+    /*noinspection ALL*/
+    .btn--mid--dark:not([disabled]) {
+      @apply --btn--mid--dark;
+    }
+
+    /*noinspection ALL*/
+    .btn--dark:not([disabled]) {
+      @apply --btn--dark;
+    }
+  </style>
+</template>
+`;
+styleElement.register('skin-buttons');
diff --git a/classes/grid.html b/classes/grid.html
deleted file mode 100644
index 819976f..0000000
--- a/classes/grid.html
+++ /dev/null
@@ -1,1575 +0,0 @@
-<!--
-@license
-Copyright (c) 2017 FabricElements. All rights reserved.
-
-`skin-styles-grid` is a supercharged Bootstrap grid.
-https://github.com/twbs/bootstrap/blob/v4-dev/dist/css/bootstrap-grid.css
-
-@group Skin Styles
-@demo demo/grid.html grid
--->
-
-<style>
-  [hidden] {
-    display: none !important;
-  }
-
-  .container-fluid {
-    max-width: 100%;
-  }
-
-  .container,
-  .container-fluid,
-  .row,
-  [class*="col-"] {
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-  }
-
-  /**
-  Default Bootstrap grid
-  **/
-  /*noinspection ALL*/
-  @-ms-viewport {
-    width: device-width;
-  }
-
-  html {
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    -ms-overflow-style: scrollbar;
-  }
-
-  *,
-  *::before,
-  *::after {
-    -webkit-box-sizing: inherit;
-    box-sizing: inherit;
-  }
-
-  .container {
-    position: relative;
-    margin-left: auto;
-    margin-right: auto;
-    padding-right: 15px;
-    padding-left: 15px;
-  }
-
-  @media (min-width: 576px) {
-    .container {
-      padding-right: 15px;
-      padding-left: 15px;
-    }
-  }
-
-  @media (min-width: 768px) {
-    .container {
-      padding-right: 15px;
-      padding-left: 15px;
-    }
-  }
-
-  @media (min-width: 992px) {
-    .container {
-      padding-right: 15px;
-      padding-left: 15px;
-    }
-  }
-
-  @media (min-width: 1200px) {
-    .container {
-      padding-right: 15px;
-      padding-left: 15px;
-    }
-  }
-
-  @media (min-width: 576px) {
-    .container {
-      width: 540px;
-      max-width: 100%;
-    }
-  }
-
-  @media (min-width: 768px) {
-    .container {
-      width: 720px;
-      max-width: 100%;
-    }
-  }
-
-  @media (min-width: 992px) {
-    .container {
-      width: 960px;
-      max-width: 100%;
-    }
-  }
-
-  @media (min-width: 1200px) {
-    .container {
-      width: 1140px;
-      max-width: 100%;
-    }
-  }
-
-  .container-fluid {
-    position: relative;
-    margin-left: auto;
-    margin-right: auto;
-    padding-right: 15px;
-    padding-left: 15px;
-  }
-
-  @media (min-width: 576px) {
-    .container-fluid {
-      padding-right: 15px;
-      padding-left: 15px;
-    }
-  }
-
-  @media (min-width: 768px) {
-    .container-fluid {
-      padding-right: 15px;
-      padding-left: 15px;
-    }
-  }
-
-  @media (min-width: 992px) {
-    .container-fluid {
-      padding-right: 15px;
-      padding-left: 15px;
-    }
-  }
-
-  @media (min-width: 1200px) {
-    .container-fluid {
-      padding-right: 15px;
-      padding-left: 15px;
-    }
-  }
-
-  .row {
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-flex-wrap: wrap;
-    -ms-flex-wrap: wrap;
-    flex-wrap: wrap;
-    margin-right: -15px;
-    margin-left: -15px;
-  }
-
-  @media (min-width: 576px) {
-    .row {
-      margin-right: -15px;
-      margin-left: -15px;
-    }
-  }
-
-  @media (min-width: 768px) {
-    .row {
-      margin-right: -15px;
-      margin-left: -15px;
-    }
-  }
-
-  @media (min-width: 992px) {
-    .row {
-      margin-right: -15px;
-      margin-left: -15px;
-    }
-  }
-
-  @media (min-width: 1200px) {
-    .row {
-      margin-right: -15px;
-      margin-left: -15px;
-    }
-  }
-
-  .no-gutters {
-    margin-right: 0;
-    margin-left: 0;
-  }
-
-  .no-gutters > .col,
-  .no-gutters > [class*="col-"] {
-    padding-right: 0;
-    padding-left: 0;
-  }
-
-  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl {
-    position: relative;
-    width: 100%;
-    min-height: 1px;
-    padding-right: 15px;
-    padding-left: 15px;
-  }
-
-  @media (min-width: 576px) {
-    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl {
-      padding-right: 15px;
-      padding-left: 15px;
-    }
-  }
-
-  @media (min-width: 768px) {
-    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl {
-      padding-right: 15px;
-      padding-left: 15px;
-    }
-  }
-
-  @media (min-width: 992px) {
-    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl {
-      padding-right: 15px;
-      padding-left: 15px;
-    }
-  }
-
-  @media (min-width: 1200px) {
-    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl {
-      padding-right: 15px;
-      padding-left: 15px;
-    }
-  }
-
-  .col {
-    -webkit-flex-basis: 0;
-    -ms-flex-preferred-size: 0;
-    flex-basis: 0;
-    -webkit-box-flex: 1;
-    -webkit-flex-grow: 1;
-    -ms-flex-positive: 1;
-    flex-grow: 1;
-    max-width: 100%;
-  }
-
-  .col-auto {
-    -webkit-box-flex: 0;
-    -webkit-flex: 0 0 auto;
-    -ms-flex: 0 0 auto;
-    flex: 0 0 auto;
-    width: auto;
-  }
-
-  .col-1 {
-    -webkit-box-flex: 0;
-    -webkit-flex: 0 0 8.333333%;
-    -ms-flex: 0 0 8.333333%;
-    flex: 0 0 8.333333%;
-    max-width: 8.333333%;
-  }
-
-  .col-2 {
-    -webkit-box-flex: 0;
-    -webkit-flex: 0 0 16.666667%;
-    -ms-flex: 0 0 16.666667%;
-    flex: 0 0 16.666667%;
-    max-width: 16.666667%;
-  }
-
-  .col-3 {
-    -webkit-box-flex: 0;
-    -webkit-flex: 0 0 25%;
-    -ms-flex: 0 0 25%;
-    flex: 0 0 25%;
-    max-width: 25%;
-  }
-
-  .col-4 {
-    -webkit-box-flex: 0;
-    -webkit-flex: 0 0 33.333333%;
-    -ms-flex: 0 0 33.333333%;
-    flex: 0 0 33.333333%;
-    max-width: 33.333333%;
-  }
-
-  .col-5 {
-    -webkit-box-flex: 0;
-    -webkit-flex: 0 0 41.666667%;
-    -ms-flex: 0 0 41.666667%;
-    flex: 0 0 41.666667%;
-    max-width: 41.666667%;
-  }
-
-  .col-6 {
-    -webkit-box-flex: 0;
-    -webkit-flex: 0 0 50%;
-    -ms-flex: 0 0 50%;
-    flex: 0 0 50%;
-    max-width: 50%;
-  }
-
-  .col-7 {
-    -webkit-box-flex: 0;
-    -webkit-flex: 0 0 58.333333%;
-    -ms-flex: 0 0 58.333333%;
-    flex: 0 0 58.333333%;
-    max-width: 58.333333%;
-  }
-
-  .col-8 {
-    -webkit-box-flex: 0;
-    -webkit-flex: 0 0 66.666667%;
-    -ms-flex: 0 0 66.666667%;
-    flex: 0 0 66.666667%;
-    max-width: 66.666667%;
-  }
-
-  .col-9 {
-    -webkit-box-flex: 0;
-    -webkit-flex: 0 0 75%;
-    -ms-flex: 0 0 75%;
-    flex: 0 0 75%;
-    max-width: 75%;
-  }
-
-  .col-10 {
-    -webkit-box-flex: 0;
-    -webkit-flex: 0 0 83.333333%;
-    -ms-flex: 0 0 83.333333%;
-    flex: 0 0 83.333333%;
-    max-width: 83.333333%;
-  }
-
-  .col-11 {
-    -webkit-box-flex: 0;
-    -webkit-flex: 0 0 91.666667%;
-    -ms-flex: 0 0 91.666667%;
-    flex: 0 0 91.666667%;
-    max-width: 91.666667%;
-  }
-
-  .col-12 {
-    -webkit-box-flex: 0;
-    -webkit-flex: 0 0 100%;
-    -ms-flex: 0 0 100%;
-    flex: 0 0 100%;
-    max-width: 100%;
-  }
-
-  .pull-0 {
-    right: auto;
-  }
-
-  .pull-1 {
-    right: 8.333333%;
-  }
-
-  .pull-2 {
-    right: 16.666667%;
-  }
-
-  .pull-3 {
-    right: 25%;
-  }
-
-  .pull-4 {
-    right: 33.333333%;
-  }
-
-  .pull-5 {
-    right: 41.666667%;
-  }
-
-  .pull-6 {
-    right: 50%;
-  }
-
-  .pull-7 {
-    right: 58.333333%;
-  }
-
-  .pull-8 {
-    right: 66.666667%;
-  }
-
-  .pull-9 {
-    right: 75%;
-  }
-
-  .pull-10 {
-    right: 83.333333%;
-  }
-
-  .pull-11 {
-    right: 91.666667%;
-  }
-
-  .pull-12 {
-    right: 100%;
-  }
-
-  .push-0 {
-    left: auto;
-  }
-
-  .push-1 {
-    left: 8.333333%;
-  }
-
-  .push-2 {
-    left: 16.666667%;
-  }
-
-  .push-3 {
-    left: 25%;
-  }
-
-  .push-4 {
-    left: 33.333333%;
-  }
-
-  .push-5 {
-    left: 41.666667%;
-  }
-
-  .push-6 {
-    left: 50%;
-  }
-
-  .push-7 {
-    left: 58.333333%;
-  }
-
-  .push-8 {
-    left: 66.666667%;
-  }
-
-  .push-9 {
-    left: 75%;
-  }
-
-  .push-10 {
-    left: 83.333333%;
-  }
-
-  .push-11 {
-    left: 91.666667%;
-  }
-
-  .push-12 {
-    left: 100%;
-  }
-
-  .offset-1 {
-    margin-left: 8.333333%;
-  }
-
-  .offset-2 {
-    margin-left: 16.666667%;
-  }
-
-  .offset-3 {
-    margin-left: 25%;
-  }
-
-  .offset-4 {
-    margin-left: 33.333333%;
-  }
-
-  .offset-5 {
-    margin-left: 41.666667%;
-  }
-
-  .offset-6 {
-    margin-left: 50%;
-  }
-
-  .offset-7 {
-    margin-left: 58.333333%;
-  }
-
-  .offset-8 {
-    margin-left: 66.666667%;
-  }
-
-  .offset-9 {
-    margin-left: 75%;
-  }
-
-  .offset-10 {
-    margin-left: 83.333333%;
-  }
-
-  .offset-11 {
-    margin-left: 91.666667%;
-  }
-
-  @media (min-width: 576px) {
-    .col-sm {
-      -webkit-flex-basis: 0;
-      -ms-flex-preferred-size: 0;
-      flex-basis: 0;
-      -webkit-box-flex: 1;
-      -webkit-flex-grow: 1;
-      -ms-flex-positive: 1;
-      flex-grow: 1;
-      max-width: 100%;
-    }
-
-    .col-sm-auto {
-      -webkit-box-flex: 0;
-      -webkit-flex: 0 0 auto;
-      -ms-flex: 0 0 auto;
-      flex: 0 0 auto;
-      width: auto;
-    }
-
-    .col-sm-1 {
-      -webkit-box-flex: 0;
-      -webkit-flex: 0 0 8.333333%;
-      -ms-flex: 0 0 8.333333%;
-      flex: 0 0 8.333333%;
-      max-width: 8.333333%;
-    }
-
-    .col-sm-2 {
-      -webkit-box-flex: 0;
-      -webkit-flex: 0 0 16.666667%;
-      -ms-flex: 0 0 16.666667%;
-      flex: 0 0 16.666667%;
-      max-width: 16.666667%;
-    }
-
-    .col-sm-3 {
-      -webkit-box-flex: 0;
-      -webkit-flex: 0 0 25%;
-      -ms-flex: 0 0 25%;
-      flex: 0 0 25%;
-      max-width: 25%;
-    }
-
-    .col-sm-4 {
-      -webkit-box-flex: 0;
-      -webkit-flex: 0 0 33.333333%;
-      -ms-flex: 0 0 33.333333%;
-      flex: 0 0 33.333333%;
-      max-width: 33.333333%;
-    }
-
-    .col-sm-5 {
-      -webkit-box-flex: 0;
-      -webkit-flex: 0 0 41.666667%;
-      -ms-flex: 0 0 41.666667%;
-      flex: 0 0 41.666667%;
-      max-width: 41.666667%;
-    }
-
-    .col-sm-6 {
-      -webkit-box-flex: 0;
-      -webkit-flex: 0 0 50%;
-      -ms-flex: 0 0 50%;
-      flex: 0 0 50%;
-      max-width: 50%;
-    }
-
-    .col-sm-7 {
-      -webkit-box-flex: 0;
-      -webkit-flex: 0 0 58.333333%;
-      -ms-flex: 0 0 58.333333%;
-      flex: 0 0 58.333333%;
-      max-width: 58.333333%;
-    }
-
-    .col-sm-8 {
-      -webkit-box-flex: 0;
-      -webkit-flex: 0 0 66.666667%;
-      -ms-flex: 0 0 66.666667%;
-      flex: 0 0 66.666667%;
-      max-width: 66.666667%;
-    }
-
-    .col-sm-9 {
-      -webkit-box-flex: 0;
-      -webkit-flex: 0 0 75%;
-      -ms-flex: 0 0 75%;
-      flex: 0 0 75%;
-      max-width: 75%;
-    }
-
-    .col-sm-10 {
-      -webkit-box-flex: 0;
-      -webkit-flex: 0 0 83.333333%;
-      -ms-flex: 0 0 83.333333%;
-      flex: 0 0 83.333333%;
-      max-width: 83.333333%;
-    }
-
-    .col-sm-11 {
-      -webkit-box-flex: 0;
-      -webkit-flex: 0 0 91.666667%;
-      -ms-flex: 0 0 91.666667%;
-      flex: 0 0 91.666667%;
-      max-width: 91.666667%;
-    }
-
-    .col-sm-12 {
-      -webkit-box-flex: 0;
-      -webkit-flex: 0 0 100%;
-      -ms-flex: 0 0 100%;
-      flex: 0 0 100%;
-      max-width: 100%;
-    }
-
-    .pull-sm-0 {
-      right: auto;
-    }
-
-    .pull-sm-1 {
-      right: 8.333333%;
-    }
-
-    .pull-sm-2 {
-      right: 16.666667%;
-    }
-
-    .pull-sm-3 {
-      right: 25%;
-    }
-
-    .pull-sm-4 {
-      right: 33.333333%;
-    }
-
-    .pull-sm-5 {
-      right: 41.666667%;
-    }
-
-    .pull-sm-6 {
-      right: 50%;
-    }
-
-    .pull-sm-7 {
-      right: 58.333333%;
-    }
-
-    .pull-sm-8 {
-      right: 66.666667%;
-    }
-
-    .pull-sm-9 {
-      right: 75%;
-    }
-
-    .pull-sm-10 {
-      right: 83.333333%;
-    }
-
-    .pull-sm-11 {
-      right: 91.666667%;
-    }
-
-    .pull-sm-12 {
-      right: 100%;
-    }
-
-    .push-sm-0 {
-      left: auto;
-    }
-
-    .push-sm-1 {
-      left: 8.333333%;
-    }
-
-    .push-sm-2 {
-      left: 16.666667%;
-    }
-
-    .push-sm-3 {
-      left: 25%;
-    }
-
-    .push-sm-4 {
-      left: 33.333333%;
-    }
-
-    .push-sm-5 {
-      left: 41.666667%;
-    }
-
-    .push-sm-6 {
-      left: 50%;
-    }
-
-    .push-sm-7 {
-      left: 58.333333%;
-    }
-
-    .push-sm-8 {
-      left: 66.666667%;
-    }
-
-    .push-sm-9 {
-      left: 75%;
-    }
-
-    .push-sm-10 {
-      left: 83.333333%;
-    }
-
-    .push-sm-11 {
-      left: 91.666667%;
-    }
-
-    .push-sm-12 {
-      left: 100%;
-    }
-
-    .offset-sm-0 {
-      margin-left: 0%;
-    }
-
-    .offset-sm-1 {
-      margin-left: 8.333333%;
-    }
-
-    .offset-sm-2 {
-      margin-left: 16.666667%;
-    }
-
-    .offset-sm-3 {
-      margin-left: 25%;
-    }
-
-    .offset-sm-4 {
-      margin-left: 33.333333%;
-    }
-
-    .offset-sm-5 {
-      margin-left: 41.666667%;
-    }
-
-    .offset-sm-6 {
-      margin-left: 50%;
-    }
-
-    .offset-sm-7 {
-      margin-left: 58.333333%;
-    }
-
-    .offset-sm-8 {
-      margin-left: 66.666667%;
-    }
-
-    .offset-sm-9 {
-      margin-left: 75%;
-    }
-
-    .offset-sm-10 {
-      margin-left: 83.333333%;
-    }
-
-    .offset-sm-11 {
-      margin-left: 91.666667%;
-    }
-  }
-
-  @media (min-width: 768px) {
-    .col-md {
-      -webkit-flex-basis: 0;
-      -ms-flex-preferred-size: 0;
-      flex-basis: 0;
-      -webkit-box-flex: 1;
-      -webkit-flex-grow: 1;
-      -ms-flex-positive: 1;
-      flex-grow: 1;
-      max-width: 100%;
-    }
-
-    .col-md-auto {
-      -webkit-box-flex: 0;
-      -webkit-flex: 0 0 auto;
-      -ms-flex: 0 0 auto;
-      flex: 0 0 auto;
-      width: auto;
-    }
-
-    .col-md-1 {
-      -webkit-box-flex: 0;
-      -webkit-flex: 0 0 8.333333%;
-      -ms-flex: 0 0 8.333333%;
-      flex: 0 0 8.333333%;
-      max-width: 8.333333%;
-    }
-
-    .col-md-2 {
-      -webkit-box-flex: 0;
-      -webkit-flex: 0 0 16.666667%;
-      -ms-flex: 0 0 16.666667%;
-      flex: 0 0 16.666667%;
-      max-width: 16.666667%;
-    }
-
-    .col-md-3 {
-      -webkit-box-flex: 0;
-      -webkit-flex: 0 0 25%;
-      -ms-flex: 0 0 25%;
-      flex: 0 0 25%;
-      max-width: 25%;
-    }
-
-    .col-md-4 {
-      -webkit-box-flex: 0;
-      -webkit-flex: 0 0 33.333333%;
-      -ms-flex: 0 0 33.333333%;
-      flex: 0 0 33.333333%;
-      max-width: 33.333333%;
-    }
-
-    .col-md-5 {
-      -webkit-box-flex: 0;
-      -webkit-flex: 0 0 41.666667%;
-      -ms-flex: 0 0 41.666667%;
-      flex: 0 0 41.666667%;
-      max-width: 41.666667%;
-    }
-
-    .col-md-6 {
-      -webkit-box-flex: 0;
-      -webkit-flex: 0 0 50%;
-      -ms-flex: 0 0 50%;
-      flex: 0 0 50%;
-      max-width: 50%;
-    }
-
-    .col-md-7 {
-      -webkit-box-flex: 0;
-      -webkit-flex: 0 0 58.333333%;
-      -ms-flex: 0 0 58.333333%;
-      flex: 0 0 58.333333%;
-      max-width: 58.333333%;
-    }
-
-    .col-md-8 {
-      -webkit-box-flex: 0;
-      -webkit-flex: 0 0 66.666667%;
-      -ms-flex: 0 0 66.666667%;
-      flex: 0 0 66.666667%;
-      max-width: 66.666667%;
-    }
-
-    .col-md-9 {
-      -webkit-box-flex: 0;
-      -webkit-flex: 0 0 75%;
-      -ms-flex: 0 0 75%;
-      flex: 0 0 75%;
-      max-width: 75%;
-    }
-
-    .col-md-10 {
-      -webkit-box-flex: 0;
-      -webkit-flex: 0 0 83.333333%;
-      -ms-flex: 0 0 83.333333%;
-      flex: 0 0 83.333333%;
-      max-width: 83.333333%;
-    }
-
-    .col-md-11 {
-      -webkit-box-flex: 0;
-      -webkit-flex: 0 0 91.666667%;
-      -ms-flex: 0 0 91.666667%;
-      flex: 0 0 91.666667%;
-      max-width: 91.666667%;
-    }
-
-    .col-md-12 {
-      -webkit-box-flex: 0;
-      -webkit-flex: 0 0 100%;
-      -ms-flex: 0 0 100%;
-      flex: 0 0 100%;
-      max-width: 100%;
-    }
-
-    .pull-md-0 {
-      right: auto;
-    }
-
-    .pull-md-1 {
-      right: 8.333333%;
-    }
-
-    .pull-md-2 {
-      right: 16.666667%;
-    }
-
-    .pull-md-3 {
-      right: 25%;
-    }
-
-    .pull-md-4 {
-      right: 33.333333%;
-    }
-
-    .pull-md-5 {
-      right: 41.666667%;
-    }
-
-    .pull-md-6 {
-      right: 50%;
-    }
-
-    .pull-md-7 {
-      right: 58.333333%;
-    }
-
-    .pull-md-8 {
-      right: 66.666667%;
-    }
-
-    .pull-md-9 {
-      right: 75%;
-    }
-
-    .pull-md-10 {
-      right: 83.333333%;
-    }
-
-    .pull-md-11 {
-      right: 91.666667%;
-    }
-
-    .pull-md-12 {
-      right: 100%;
-    }
-
-    .push-md-0 {
-      left: auto;
-    }
-
-    .push-md-1 {
-      left: 8.333333%;
-    }
-
-    .push-md-2 {
-      left: 16.666667%;
-    }
-
-    .push-md-3 {
-      left: 25%;
-    }
-
-    .push-md-4 {
-      left: 33.333333%;
-    }
-
-    .push-md-5 {
-      left: 41.666667%;
-    }
-
-    .push-md-6 {
-      left: 50%;
-    }
-
-    .push-md-7 {
-      left: 58.333333%;
-    }
-
-    .push-md-8 {
-      left: 66.666667%;
-    }
-
-    .push-md-9 {
-      left: 75%;
-    }
-
-    .push-md-10 {
-      left: 83.333333%;
-    }
-
-    .push-md-11 {
-      left: 91.666667%;
-    }
-
-    .push-md-12 {
-      left: 100%;
-    }
-
-    .offset-md-0 {
-      margin-left: 0%;
-    }
-
-    .offset-md-1 {
-      margin-left: 8.333333%;
-    }
-
-    .offset-md-2 {
-      margin-left: 16.666667%;
-    }
-
-    .offset-md-3 {
-      margin-left: 25%;
-    }
-
-    .offset-md-4 {
-      margin-left: 33.333333%;
-    }
-
-    .offset-md-5 {
-      margin-left: 41.666667%;
-    }
-
-    .offset-md-6 {
-      margin-left: 50%;
-    }
-
-    .offset-md-7 {
-      margin-left: 58.333333%;
-    }
-
-    .offset-md-8 {
-      margin-left: 66.666667%;
-    }
-
-    .offset-md-9 {
-      margin-left: 75%;
-    }
-
-    .offset-md-10 {
-      margin-left: 83.333333%;
-    }
-
-    .offset-md-11 {
-      margin-left: 91.666667%;
-    }
-  }
-
-  @media (min-width: 992px) {
-    .col-lg {
-      -webkit-flex-basis: 0;
-      -ms-flex-preferred-size: 0;
-      flex-basis: 0;
-      -webkit-box-flex: 1;
-      -webkit-flex-grow: 1;
-      -ms-flex-positive: 1;
-      flex-grow: 1;
-      max-width: 100%;
-    }
-
-    .col-lg-auto {
-      -webkit-box-flex: 0;
-      -webkit-flex: 0 0 auto;
-      -ms-flex: 0 0 auto;
-      flex: 0 0 auto;
-      width: auto;
-    }
-
-    .col-lg-1 {
-      -webkit-box-flex: 0;
-      -webkit-flex: 0 0 8.333333%;
-      -ms-flex: 0 0 8.333333%;
-      flex: 0 0 8.333333%;
-      max-width: 8.333333%;
-    }
-
-    .col-lg-2 {
-      -webkit-box-flex: 0;
-      -webkit-flex: 0 0 16.666667%;
-      -ms-flex: 0 0 16.666667%;
-      flex: 0 0 16.666667%;
-      max-width: 16.666667%;
-    }
-
-    .col-lg-3 {
-      -webkit-box-flex: 0;
-      -webkit-flex: 0 0 25%;
-      -ms-flex: 0 0 25%;
-      flex: 0 0 25%;
-      max-width: 25%;
-    }
-
-    .col-lg-4 {
-      -webkit-box-flex: 0;
-      -webkit-flex: 0 0 33.333333%;
-      -ms-flex: 0 0 33.333333%;
-      flex: 0 0 33.333333%;
-      max-width: 33.333333%;
-    }
-
-    .col-lg-5 {
-      -webkit-box-flex: 0;
-      -webkit-flex: 0 0 41.666667%;
-      -ms-flex: 0 0 41.666667%;
-      flex: 0 0 41.666667%;
-      max-width: 41.666667%;
-    }
-
-    .col-lg-6 {
-      -webkit-box-flex: 0;
-      -webkit-flex: 0 0 50%;
-      -ms-flex: 0 0 50%;
-      flex: 0 0 50%;
-      max-width: 50%;
-    }
-
-    .col-lg-7 {
-      -webkit-box-flex: 0;
-      -webkit-flex: 0 0 58.333333%;
-      -ms-flex: 0 0 58.333333%;
-      flex: 0 0 58.333333%;
-      max-width: 58.333333%;
-    }
-
-    .col-lg-8 {
-      -webkit-box-flex: 0;
-      -webkit-flex: 0 0 66.666667%;
-      -ms-flex: 0 0 66.666667%;
-      flex: 0 0 66.666667%;
-      max-width: 66.666667%;
-    }
-
-    .col-lg-9 {
-      -webkit-box-flex: 0;
-      -webkit-flex: 0 0 75%;
-      -ms-flex: 0 0 75%;
-      flex: 0 0 75%;
-      max-width: 75%;
-    }
-
-    .col-lg-10 {
-      -webkit-box-flex: 0;
-      -webkit-flex: 0 0 83.333333%;
-      -ms-flex: 0 0 83.333333%;
-      flex: 0 0 83.333333%;
-      max-width: 83.333333%;
-    }
-
-    .col-lg-11 {
-      -webkit-box-flex: 0;
-      -webkit-flex: 0 0 91.666667%;
-      -ms-flex: 0 0 91.666667%;
-      flex: 0 0 91.666667%;
-      max-width: 91.666667%;
-    }
-
-    .col-lg-12 {
-      -webkit-box-flex: 0;
-      -webkit-flex: 0 0 100%;
-      -ms-flex: 0 0 100%;
-      flex: 0 0 100%;
-      max-width: 100%;
-    }
-
-    .pull-lg-0 {
-      right: auto;
-    }
-
-    .pull-lg-1 {
-      right: 8.333333%;
-    }
-
-    .pull-lg-2 {
-      right: 16.666667%;
-    }
-
-    .pull-lg-3 {
-      right: 25%;
-    }
-
-    .pull-lg-4 {
-      right: 33.333333%;
-    }
-
-    .pull-lg-5 {
-      right: 41.666667%;
-    }
-
-    .pull-lg-6 {
-      right: 50%;
-    }
-
-    .pull-lg-7 {
-      right: 58.333333%;
-    }
-
-    .pull-lg-8 {
-      right: 66.666667%;
-    }
-
-    .pull-lg-9 {
-      right: 75%;
-    }
-
-    .pull-lg-10 {
-      right: 83.333333%;
-    }
-
-    .pull-lg-11 {
-      right: 91.666667%;
-    }
-
-    .pull-lg-12 {
-      right: 100%;
-    }
-
-    .push-lg-0 {
-      left: auto;
-    }
-
-    .push-lg-1 {
-      left: 8.333333%;
-    }
-
-    .push-lg-2 {
-      left: 16.666667%;
-    }
-
-    .push-lg-3 {
-      left: 25%;
-    }
-
-    .push-lg-4 {
-      left: 33.333333%;
-    }
-
-    .push-lg-5 {
-      left: 41.666667%;
-    }
-
-    .push-lg-6 {
-      left: 50%;
-    }
-
-    .push-lg-7 {
-      left: 58.333333%;
-    }
-
-    .push-lg-8 {
-      left: 66.666667%;
-    }
-
-    .push-lg-9 {
-      left: 75%;
-    }
-
-    .push-lg-10 {
-      left: 83.333333%;
-    }
-
-    .push-lg-11 {
-      left: 91.666667%;
-    }
-
-    .push-lg-12 {
-      left: 100%;
-    }
-
-    .offset-lg-0 {
-      margin-left: 0%;
-    }
-
-    .offset-lg-1 {
-      margin-left: 8.333333%;
-    }
-
-    .offset-lg-2 {
-      margin-left: 16.666667%;
-    }
-
-    .offset-lg-3 {
-      margin-left: 25%;
-    }
-
-    .offset-lg-4 {
-      margin-left: 33.333333%;
-    }
-
-    .offset-lg-5 {
-      margin-left: 41.666667%;
-    }
-
-    .offset-lg-6 {
-      margin-left: 50%;
-    }
-
-    .offset-lg-7 {
-      margin-left: 58.333333%;
-    }
-
-    .offset-lg-8 {
-      margin-left: 66.666667%;
-    }
-
-    .offset-lg-9 {
-      margin-left: 75%;
-    }
-
-    .offset-lg-10 {
-      margin-left: 83.333333%;
-    }
-
-    .offset-lg-11 {
-      margin-left: 91.666667%;
-    }
-  }
-
-  @media (min-width: 1200px) {
-    .col-xl {
-      -webkit-flex-basis: 0;
-      -ms-flex-preferred-size: 0;
-      flex-basis: 0;
-      -webkit-box-flex: 1;
-      -webkit-flex-grow: 1;
-      -ms-flex-positive: 1;
-      flex-grow: 1;
-      max-width: 100%;
-    }
-
-    .col-xl-auto {
-      -webkit-box-flex: 0;
-      -webkit-flex: 0 0 auto;
-      -ms-flex: 0 0 auto;
-      flex: 0 0 auto;
-      width: auto;
-    }
-
-    .col-xl-1 {
-      -webkit-box-flex: 0;
-      -webkit-flex: 0 0 8.333333%;
-      -ms-flex: 0 0 8.333333%;
-      flex: 0 0 8.333333%;
-      max-width: 8.333333%;
-    }
-
-    .col-xl-2 {
-      -webkit-box-flex: 0;
-      -webkit-flex: 0 0 16.666667%;
-      -ms-flex: 0 0 16.666667%;
-      flex: 0 0 16.666667%;
-      max-width: 16.666667%;
-    }
-
-    .col-xl-3 {
-      -webkit-box-flex: 0;
-      -webkit-flex: 0 0 25%;
-      -ms-flex: 0 0 25%;
-      flex: 0 0 25%;
-      max-width: 25%;
-    }
-
-    .col-xl-4 {
-      -webkit-box-flex: 0;
-      -webkit-flex: 0 0 33.333333%;
-      -ms-flex: 0 0 33.333333%;
-      flex: 0 0 33.333333%;
-      max-width: 33.333333%;
-    }
-
-    .col-xl-5 {
-      -webkit-box-flex: 0;
-      -webkit-flex: 0 0 41.666667%;
-      -ms-flex: 0 0 41.666667%;
-      flex: 0 0 41.666667%;
-      max-width: 41.666667%;
-    }
-
-    .col-xl-6 {
-      -webkit-box-flex: 0;
-      -webkit-flex: 0 0 50%;
-      -ms-flex: 0 0 50%;
-      flex: 0 0 50%;
-      max-width: 50%;
-    }
-
-    .col-xl-7 {
-      -webkit-box-flex: 0;
-      -webkit-flex: 0 0 58.333333%;
-      -ms-flex: 0 0 58.333333%;
-      flex: 0 0 58.333333%;
-      max-width: 58.333333%;
-    }
-
-    .col-xl-8 {
-      -webkit-box-flex: 0;
-      -webkit-flex: 0 0 66.666667%;
-      -ms-flex: 0 0 66.666667%;
-      flex: 0 0 66.666667%;
-      max-width: 66.666667%;
-    }
-
-    .col-xl-9 {
-      -webkit-box-flex: 0;
-      -webkit-flex: 0 0 75%;
-      -ms-flex: 0 0 75%;
-      flex: 0 0 75%;
-      max-width: 75%;
-    }
-
-    .col-xl-10 {
-      -webkit-box-flex: 0;
-      -webkit-flex: 0 0 83.333333%;
-      -ms-flex: 0 0 83.333333%;
-      flex: 0 0 83.333333%;
-      max-width: 83.333333%;
-    }
-
-    .col-xl-11 {
-      -webkit-box-flex: 0;
-      -webkit-flex: 0 0 91.666667%;
-      -ms-flex: 0 0 91.666667%;
-      flex: 0 0 91.666667%;
-      max-width: 91.666667%;
-    }
-
-    .col-xl-12 {
-      -webkit-box-flex: 0;
-      -webkit-flex: 0 0 100%;
-      -ms-flex: 0 0 100%;
-      flex: 0 0 100%;
-      max-width: 100%;
-    }
-
-    .pull-xl-0 {
-      right: auto;
-    }
-
-    .pull-xl-1 {
-      right: 8.333333%;
-    }
-
-    .pull-xl-2 {
-      right: 16.666667%;
-    }
-
-    .pull-xl-3 {
-      right: 25%;
-    }
-
-    .pull-xl-4 {
-      right: 33.333333%;
-    }
-
-    .pull-xl-5 {
-      right: 41.666667%;
-    }
-
-    .pull-xl-6 {
-      right: 50%;
-    }
-
-    .pull-xl-7 {
-      right: 58.333333%;
-    }
-
-    .pull-xl-8 {
-      right: 66.666667%;
-    }
-
-    .pull-xl-9 {
-      right: 75%;
-    }
-
-    .pull-xl-10 {
-      right: 83.333333%;
-    }
-
-    .pull-xl-11 {
-      right: 91.666667%;
-    }
-
-    .pull-xl-12 {
-      right: 100%;
-    }
-
-    .push-xl-0 {
-      left: auto;
-    }
-
-    .push-xl-1 {
-      left: 8.333333%;
-    }
-
-    .push-xl-2 {
-      left: 16.666667%;
-    }
-
-    .push-xl-3 {
-      left: 25%;
-    }
-
-    .push-xl-4 {
-      left: 33.333333%;
-    }
-
-    .push-xl-5 {
-      left: 41.666667%;
-    }
-
-    .push-xl-6 {
-      left: 50%;
-    }
-
-    .push-xl-7 {
-      left: 58.333333%;
-    }
-
-    .push-xl-8 {
-      left: 66.666667%;
-    }
-
-    .push-xl-9 {
-      left: 75%;
-    }
-
-    .push-xl-10 {
-      left: 83.333333%;
-    }
-
-    .push-xl-11 {
-      left: 91.666667%;
-    }
-
-    .push-xl-12 {
-      left: 100%;
-    }
-
-    .offset-xl-0 {
-      margin-left: 0%;
-    }
-
-    .offset-xl-1 {
-      margin-left: 8.333333%;
-    }
-
-    .offset-xl-2 {
-      margin-left: 16.666667%;
-    }
-
-    .offset-xl-3 {
-      margin-left: 25%;
-    }
-
-    .offset-xl-4 {
-      margin-left: 33.333333%;
-    }
-
-    .offset-xl-5 {
-      margin-left: 41.666667%;
-    }
-
-    .offset-xl-6 {
-      margin-left: 50%;
-    }
-
-    .offset-xl-7 {
-      margin-left: 58.333333%;
-    }
-
-    .offset-xl-8 {
-      margin-left: 66.666667%;
-    }
-
-    .offset-xl-9 {
-      margin-left: 75%;
-    }
-
-    .offset-xl-10 {
-      margin-left: 83.333333%;
-    }
-
-    .offset-xl-11 {
-      margin-left: 91.666667%;
-    }
-  }
-</style>
diff --git a/classes/grid.js b/classes/grid.js
new file mode 100644
index 0000000..58ff278
--- /dev/null
+++ b/classes/grid.js
@@ -0,0 +1,1585 @@
+/**
+ @license
+ Copyright (c) FabricElements. All rights reserved.
+
+ `skin-grid` is a supercharged Bootstrap grid.
+ https://github.com/twbs/bootstrap/blob/v4-dev/dist/css/bootstrap-grid.css
+
+ @group Skin Styles
+ @demo demo/grid.html skin-grid
+ */
+import '@polymer/polymer/polymer-legacy.js';
+
+const styleElement = document.createElement('dom-module');
+styleElement.innerHTML = `
+<template>
+  <!--suppress CssInvalidPseudoSelector -->
+  <!--suppress CssUnresolvedCustomProperty -->
+  <!--suppress CssUnresolvedCustomPropertySet -->
+  <style>
+    [hidden] {
+      display: none !important;
+    }
+  
+    .container-fluid {
+      max-width: 100%;
+    }
+  
+    .container,
+    .container-fluid,
+    .row,
+    [class*="col-"] {
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+    }
+  
+    /**
+    Default Bootstrap grid
+    **/
+    /*noinspection ALL*/
+    @-ms-viewport {
+      width: device-width;
+    }
+  
+    html {
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+      -ms-overflow-style: scrollbar;
+    }
+  
+    *,
+    *::before,
+    *::after {
+      -webkit-box-sizing: inherit;
+      box-sizing: inherit;
+    }
+  
+    .container {
+      position: relative;
+      margin-left: auto;
+      margin-right: auto;
+      padding-right: 15px;
+      padding-left: 15px;
+    }
+  
+    @media (min-width: 576px) {
+      .container {
+        padding-right: 15px;
+        padding-left: 15px;
+      }
+    }
+  
+    @media (min-width: 768px) {
+      .container {
+        padding-right: 15px;
+        padding-left: 15px;
+      }
+    }
+  
+    @media (min-width: 992px) {
+      .container {
+        padding-right: 15px;
+        padding-left: 15px;
+      }
+    }
+  
+    @media (min-width: 1200px) {
+      .container {
+        padding-right: 15px;
+        padding-left: 15px;
+      }
+    }
+  
+    @media (min-width: 576px) {
+      .container {
+        width: 540px;
+        max-width: 100%;
+      }
+    }
+  
+    @media (min-width: 768px) {
+      .container {
+        width: 720px;
+        max-width: 100%;
+      }
+    }
+  
+    @media (min-width: 992px) {
+      .container {
+        width: 960px;
+        max-width: 100%;
+      }
+    }
+  
+    @media (min-width: 1200px) {
+      .container {
+        width: 1140px;
+        max-width: 100%;
+      }
+    }
+  
+    .container-fluid {
+      position: relative;
+      margin-left: auto;
+      margin-right: auto;
+      padding-right: 15px;
+      padding-left: 15px;
+    }
+  
+    @media (min-width: 576px) {
+      .container-fluid {
+        padding-right: 15px;
+        padding-left: 15px;
+      }
+    }
+  
+    @media (min-width: 768px) {
+      .container-fluid {
+        padding-right: 15px;
+        padding-left: 15px;
+      }
+    }
+  
+    @media (min-width: 992px) {
+      .container-fluid {
+        padding-right: 15px;
+        padding-left: 15px;
+      }
+    }
+  
+    @media (min-width: 1200px) {
+      .container-fluid {
+        padding-right: 15px;
+        padding-left: 15px;
+      }
+    }
+  
+    .row {
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-flex-wrap: wrap;
+      -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+      margin-right: -15px;
+      margin-left: -15px;
+    }
+  
+    @media (min-width: 576px) {
+      .row {
+        margin-right: -15px;
+        margin-left: -15px;
+      }
+    }
+  
+    @media (min-width: 768px) {
+      .row {
+        margin-right: -15px;
+        margin-left: -15px;
+      }
+    }
+  
+    @media (min-width: 992px) {
+      .row {
+        margin-right: -15px;
+        margin-left: -15px;
+      }
+    }
+  
+    @media (min-width: 1200px) {
+      .row {
+        margin-right: -15px;
+        margin-left: -15px;
+      }
+    }
+  
+    .no-gutters {
+      margin-right: 0;
+      margin-left: 0;
+    }
+  
+    .no-gutters &gt; .col,
+    .no-gutters &gt; [class*="col-"] {
+      padding-right: 0;
+      padding-left: 0;
+    }
+  
+    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl {
+      position: relative;
+      width: 100%;
+      min-height: 1px;
+      padding-right: 15px;
+      padding-left: 15px;
+    }
+  
+    @media (min-width: 576px) {
+      .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl {
+        padding-right: 15px;
+        padding-left: 15px;
+      }
+    }
+  
+    @media (min-width: 768px) {
+      .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl {
+        padding-right: 15px;
+        padding-left: 15px;
+      }
+    }
+  
+    @media (min-width: 992px) {
+      .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl {
+        padding-right: 15px;
+        padding-left: 15px;
+      }
+    }
+  
+    @media (min-width: 1200px) {
+      .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl {
+        padding-right: 15px;
+        padding-left: 15px;
+      }
+    }
+  
+    .col {
+      -webkit-flex-basis: 0;
+      -ms-flex-preferred-size: 0;
+      flex-basis: 0;
+      -webkit-box-flex: 1;
+      -webkit-flex-grow: 1;
+      -ms-flex-positive: 1;
+      flex-grow: 1;
+      max-width: 100%;
+    }
+  
+    .col-auto {
+      -webkit-box-flex: 0;
+      -webkit-flex: 0 0 auto;
+      -ms-flex: 0 0 auto;
+      flex: 0 0 auto;
+      width: auto;
+    }
+  
+    .col-1 {
+      -webkit-box-flex: 0;
+      -webkit-flex: 0 0 8.333333%;
+      -ms-flex: 0 0 8.333333%;
+      flex: 0 0 8.333333%;
+      max-width: 8.333333%;
+    }
+  
+    .col-2 {
+      -webkit-box-flex: 0;
+      -webkit-flex: 0 0 16.666667%;
+      -ms-flex: 0 0 16.666667%;
+      flex: 0 0 16.666667%;
+      max-width: 16.666667%;
+    }
+  
+    .col-3 {
+      -webkit-box-flex: 0;
+      -webkit-flex: 0 0 25%;
+      -ms-flex: 0 0 25%;
+      flex: 0 0 25%;
+      max-width: 25%;
+    }
+  
+    .col-4 {
+      -webkit-box-flex: 0;
+      -webkit-flex: 0 0 33.333333%;
+      -ms-flex: 0 0 33.333333%;
+      flex: 0 0 33.333333%;
+      max-width: 33.333333%;
+    }
+  
+    .col-5 {
+      -webkit-box-flex: 0;
+      -webkit-flex: 0 0 41.666667%;
+      -ms-flex: 0 0 41.666667%;
+      flex: 0 0 41.666667%;
+      max-width: 41.666667%;
+    }
+  
+    .col-6 {
+      -webkit-box-flex: 0;
+      -webkit-flex: 0 0 50%;
+      -ms-flex: 0 0 50%;
+      flex: 0 0 50%;
+      max-width: 50%;
+    }
+  
+    .col-7 {
+      -webkit-box-flex: 0;
+      -webkit-flex: 0 0 58.333333%;
+      -ms-flex: 0 0 58.333333%;
+      flex: 0 0 58.333333%;
+      max-width: 58.333333%;
+    }
+  
+    .col-8 {
+      -webkit-box-flex: 0;
+      -webkit-flex: 0 0 66.666667%;
+      -ms-flex: 0 0 66.666667%;
+      flex: 0 0 66.666667%;
+      max-width: 66.666667%;
+    }
+  
+    .col-9 {
+      -webkit-box-flex: 0;
+      -webkit-flex: 0 0 75%;
+      -ms-flex: 0 0 75%;
+      flex: 0 0 75%;
+      max-width: 75%;
+    }
+  
+    .col-10 {
+      -webkit-box-flex: 0;
+      -webkit-flex: 0 0 83.333333%;
+      -ms-flex: 0 0 83.333333%;
+      flex: 0 0 83.333333%;
+      max-width: 83.333333%;
+    }
+  
+    .col-11 {
+      -webkit-box-flex: 0;
+      -webkit-flex: 0 0 91.666667%;
+      -ms-flex: 0 0 91.666667%;
+      flex: 0 0 91.666667%;
+      max-width: 91.666667%;
+    }
+  
+    .col-12 {
+      -webkit-box-flex: 0;
+      -webkit-flex: 0 0 100%;
+      -ms-flex: 0 0 100%;
+      flex: 0 0 100%;
+      max-width: 100%;
+    }
+  
+    .pull-0 {
+      right: auto;
+    }
+  
+    .pull-1 {
+      right: 8.333333%;
+    }
+  
+    .pull-2 {
+      right: 16.666667%;
+    }
+  
+    .pull-3 {
+      right: 25%;
+    }
+  
+    .pull-4 {
+      right: 33.333333%;
+    }
+  
+    .pull-5 {
+      right: 41.666667%;
+    }
+  
+    .pull-6 {
+      right: 50%;
+    }
+  
+    .pull-7 {
+      right: 58.333333%;
+    }
+  
+    .pull-8 {
+      right: 66.666667%;
+    }
+  
+    .pull-9 {
+      right: 75%;
+    }
+  
+    .pull-10 {
+      right: 83.333333%;
+    }
+  
+    .pull-11 {
+      right: 91.666667%;
+    }
+  
+    .pull-12 {
+      right: 100%;
+    }
+  
+    .push-0 {
+      left: auto;
+    }
+  
+    .push-1 {
+      left: 8.333333%;
+    }
+  
+    .push-2 {
+      left: 16.666667%;
+    }
+  
+    .push-3 {
+      left: 25%;
+    }
+  
+    .push-4 {
+      left: 33.333333%;
+    }
+  
+    .push-5 {
+      left: 41.666667%;
+    }
+  
+    .push-6 {
+      left: 50%;
+    }
+  
+    .push-7 {
+      left: 58.333333%;
+    }
+  
+    .push-8 {
+      left: 66.666667%;
+    }
+  
+    .push-9 {
+      left: 75%;
+    }
+  
+    .push-10 {
+      left: 83.333333%;
+    }
+  
+    .push-11 {
+      left: 91.666667%;
+    }
+  
+    .push-12 {
+      left: 100%;
+    }
+  
+    .offset-1 {
+      margin-left: 8.333333%;
+    }
+  
+    .offset-2 {
+      margin-left: 16.666667%;
+    }
+  
+    .offset-3 {
+      margin-left: 25%;
+    }
+  
+    .offset-4 {
+      margin-left: 33.333333%;
+    }
+  
+    .offset-5 {
+      margin-left: 41.666667%;
+    }
+  
+    .offset-6 {
+      margin-left: 50%;
+    }
+  
+    .offset-7 {
+      margin-left: 58.333333%;
+    }
+  
+    .offset-8 {
+      margin-left: 66.666667%;
+    }
+  
+    .offset-9 {
+      margin-left: 75%;
+    }
+  
+    .offset-10 {
+      margin-left: 83.333333%;
+    }
+  
+    .offset-11 {
+      margin-left: 91.666667%;
+    }
+  
+    @media (min-width: 576px) {
+      .col-sm {
+        -webkit-flex-basis: 0;
+        -ms-flex-preferred-size: 0;
+        flex-basis: 0;
+        -webkit-box-flex: 1;
+        -webkit-flex-grow: 1;
+        -ms-flex-positive: 1;
+        flex-grow: 1;
+        max-width: 100%;
+      }
+  
+      .col-sm-auto {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 auto;
+        -ms-flex: 0 0 auto;
+        flex: 0 0 auto;
+        width: auto;
+      }
+  
+      .col-sm-1 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 8.333333%;
+        -ms-flex: 0 0 8.333333%;
+        flex: 0 0 8.333333%;
+        max-width: 8.333333%;
+      }
+  
+      .col-sm-2 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 16.666667%;
+        -ms-flex: 0 0 16.666667%;
+        flex: 0 0 16.666667%;
+        max-width: 16.666667%;
+      }
+  
+      .col-sm-3 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 25%;
+        -ms-flex: 0 0 25%;
+        flex: 0 0 25%;
+        max-width: 25%;
+      }
+  
+      .col-sm-4 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 33.333333%;
+        -ms-flex: 0 0 33.333333%;
+        flex: 0 0 33.333333%;
+        max-width: 33.333333%;
+      }
+  
+      .col-sm-5 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 41.666667%;
+        -ms-flex: 0 0 41.666667%;
+        flex: 0 0 41.666667%;
+        max-width: 41.666667%;
+      }
+  
+      .col-sm-6 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 50%;
+        -ms-flex: 0 0 50%;
+        flex: 0 0 50%;
+        max-width: 50%;
+      }
+  
+      .col-sm-7 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 58.333333%;
+        -ms-flex: 0 0 58.333333%;
+        flex: 0 0 58.333333%;
+        max-width: 58.333333%;
+      }
+  
+      .col-sm-8 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 66.666667%;
+        -ms-flex: 0 0 66.666667%;
+        flex: 0 0 66.666667%;
+        max-width: 66.666667%;
+      }
+  
+      .col-sm-9 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 75%;
+        -ms-flex: 0 0 75%;
+        flex: 0 0 75%;
+        max-width: 75%;
+      }
+  
+      .col-sm-10 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 83.333333%;
+        -ms-flex: 0 0 83.333333%;
+        flex: 0 0 83.333333%;
+        max-width: 83.333333%;
+      }
+  
+      .col-sm-11 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 91.666667%;
+        -ms-flex: 0 0 91.666667%;
+        flex: 0 0 91.666667%;
+        max-width: 91.666667%;
+      }
+  
+      .col-sm-12 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 100%;
+        -ms-flex: 0 0 100%;
+        flex: 0 0 100%;
+        max-width: 100%;
+      }
+  
+      .pull-sm-0 {
+        right: auto;
+      }
+  
+      .pull-sm-1 {
+        right: 8.333333%;
+      }
+  
+      .pull-sm-2 {
+        right: 16.666667%;
+      }
+  
+      .pull-sm-3 {
+        right: 25%;
+      }
+  
+      .pull-sm-4 {
+        right: 33.333333%;
+      }
+  
+      .pull-sm-5 {
+        right: 41.666667%;
+      }
+  
+      .pull-sm-6 {
+        right: 50%;
+      }
+  
+      .pull-sm-7 {
+        right: 58.333333%;
+      }
+  
+      .pull-sm-8 {
+        right: 66.666667%;
+      }
+  
+      .pull-sm-9 {
+        right: 75%;
+      }
+  
+      .pull-sm-10 {
+        right: 83.333333%;
+      }
+  
+      .pull-sm-11 {
+        right: 91.666667%;
+      }
+  
+      .pull-sm-12 {
+        right: 100%;
+      }
+  
+      .push-sm-0 {
+        left: auto;
+      }
+  
+      .push-sm-1 {
+        left: 8.333333%;
+      }
+  
+      .push-sm-2 {
+        left: 16.666667%;
+      }
+  
+      .push-sm-3 {
+        left: 25%;
+      }
+  
+      .push-sm-4 {
+        left: 33.333333%;
+      }
+  
+      .push-sm-5 {
+        left: 41.666667%;
+      }
+  
+      .push-sm-6 {
+        left: 50%;
+      }
+  
+      .push-sm-7 {
+        left: 58.333333%;
+      }
+  
+      .push-sm-8 {
+        left: 66.666667%;
+      }
+  
+      .push-sm-9 {
+        left: 75%;
+      }
+  
+      .push-sm-10 {
+        left: 83.333333%;
+      }
+  
+      .push-sm-11 {
+        left: 91.666667%;
+      }
+  
+      .push-sm-12 {
+        left: 100%;
+      }
+  
+      .offset-sm-0 {
+        margin-left: 0%;
+      }
+  
+      .offset-sm-1 {
+        margin-left: 8.333333%;
+      }
+  
+      .offset-sm-2 {
+        margin-left: 16.666667%;
+      }
+  
+      .offset-sm-3 {
+        margin-left: 25%;
+      }
+  
+      .offset-sm-4 {
+        margin-left: 33.333333%;
+      }
+  
+      .offset-sm-5 {
+        margin-left: 41.666667%;
+      }
+  
+      .offset-sm-6 {
+        margin-left: 50%;
+      }
+  
+      .offset-sm-7 {
+        margin-left: 58.333333%;
+      }
+  
+      .offset-sm-8 {
+        margin-left: 66.666667%;
+      }
+  
+      .offset-sm-9 {
+        margin-left: 75%;
+      }
+  
+      .offset-sm-10 {
+        margin-left: 83.333333%;
+      }
+  
+      .offset-sm-11 {
+        margin-left: 91.666667%;
+      }
+    }
+  
+    @media (min-width: 768px) {
+      .col-md {
+        -webkit-flex-basis: 0;
+        -ms-flex-preferred-size: 0;
+        flex-basis: 0;
+        -webkit-box-flex: 1;
+        -webkit-flex-grow: 1;
+        -ms-flex-positive: 1;
+        flex-grow: 1;
+        max-width: 100%;
+      }
+  
+      .col-md-auto {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 auto;
+        -ms-flex: 0 0 auto;
+        flex: 0 0 auto;
+        width: auto;
+      }
+  
+      .col-md-1 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 8.333333%;
+        -ms-flex: 0 0 8.333333%;
+        flex: 0 0 8.333333%;
+        max-width: 8.333333%;
+      }
+  
+      .col-md-2 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 16.666667%;
+        -ms-flex: 0 0 16.666667%;
+        flex: 0 0 16.666667%;
+        max-width: 16.666667%;
+      }
+  
+      .col-md-3 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 25%;
+        -ms-flex: 0 0 25%;
+        flex: 0 0 25%;
+        max-width: 25%;
+      }
+  
+      .col-md-4 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 33.333333%;
+        -ms-flex: 0 0 33.333333%;
+        flex: 0 0 33.333333%;
+        max-width: 33.333333%;
+      }
+  
+      .col-md-5 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 41.666667%;
+        -ms-flex: 0 0 41.666667%;
+        flex: 0 0 41.666667%;
+        max-width: 41.666667%;
+      }
+  
+      .col-md-6 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 50%;
+        -ms-flex: 0 0 50%;
+        flex: 0 0 50%;
+        max-width: 50%;
+      }
+  
+      .col-md-7 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 58.333333%;
+        -ms-flex: 0 0 58.333333%;
+        flex: 0 0 58.333333%;
+        max-width: 58.333333%;
+      }
+  
+      .col-md-8 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 66.666667%;
+        -ms-flex: 0 0 66.666667%;
+        flex: 0 0 66.666667%;
+        max-width: 66.666667%;
+      }
+  
+      .col-md-9 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 75%;
+        -ms-flex: 0 0 75%;
+        flex: 0 0 75%;
+        max-width: 75%;
+      }
+  
+      .col-md-10 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 83.333333%;
+        -ms-flex: 0 0 83.333333%;
+        flex: 0 0 83.333333%;
+        max-width: 83.333333%;
+      }
+  
+      .col-md-11 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 91.666667%;
+        -ms-flex: 0 0 91.666667%;
+        flex: 0 0 91.666667%;
+        max-width: 91.666667%;
+      }
+  
+      .col-md-12 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 100%;
+        -ms-flex: 0 0 100%;
+        flex: 0 0 100%;
+        max-width: 100%;
+      }
+  
+      .pull-md-0 {
+        right: auto;
+      }
+  
+      .pull-md-1 {
+        right: 8.333333%;
+      }
+  
+      .pull-md-2 {
+        right: 16.666667%;
+      }
+  
+      .pull-md-3 {
+        right: 25%;
+      }
+  
+      .pull-md-4 {
+        right: 33.333333%;
+      }
+  
+      .pull-md-5 {
+        right: 41.666667%;
+      }
+  
+      .pull-md-6 {
+        right: 50%;
+      }
+  
+      .pull-md-7 {
+        right: 58.333333%;
+      }
+  
+      .pull-md-8 {
+        right: 66.666667%;
+      }
+  
+      .pull-md-9 {
+        right: 75%;
+      }
+  
+      .pull-md-10 {
+        right: 83.333333%;
+      }
+  
+      .pull-md-11 {
+        right: 91.666667%;
+      }
+  
+      .pull-md-12 {
+        right: 100%;
+      }
+  
+      .push-md-0 {
+        left: auto;
+      }
+  
+      .push-md-1 {
+        left: 8.333333%;
+      }
+  
+      .push-md-2 {
+        left: 16.666667%;
+      }
+  
+      .push-md-3 {
+        left: 25%;
+      }
+  
+      .push-md-4 {
+        left: 33.333333%;
+      }
+  
+      .push-md-5 {
+        left: 41.666667%;
+      }
+  
+      .push-md-6 {
+        left: 50%;
+      }
+  
+      .push-md-7 {
+        left: 58.333333%;
+      }
+  
+      .push-md-8 {
+        left: 66.666667%;
+      }
+  
+      .push-md-9 {
+        left: 75%;
+      }
+  
+      .push-md-10 {
+        left: 83.333333%;
+      }
+  
+      .push-md-11 {
+        left: 91.666667%;
+      }
+  
+      .push-md-12 {
+        left: 100%;
+      }
+  
+      .offset-md-0 {
+        margin-left: 0%;
+      }
+  
+      .offset-md-1 {
+        margin-left: 8.333333%;
+      }
+  
+      .offset-md-2 {
+        margin-left: 16.666667%;
+      }
+  
+      .offset-md-3 {
+        margin-left: 25%;
+      }
+  
+      .offset-md-4 {
+        margin-left: 33.333333%;
+      }
+  
+      .offset-md-5 {
+        margin-left: 41.666667%;
+      }
+  
+      .offset-md-6 {
+        margin-left: 50%;
+      }
+  
+      .offset-md-7 {
+        margin-left: 58.333333%;
+      }
+  
+      .offset-md-8 {
+        margin-left: 66.666667%;
+      }
+  
+      .offset-md-9 {
+        margin-left: 75%;
+      }
+  
+      .offset-md-10 {
+        margin-left: 83.333333%;
+      }
+  
+      .offset-md-11 {
+        margin-left: 91.666667%;
+      }
+    }
+  
+    @media (min-width: 992px) {
+      .col-lg {
+        -webkit-flex-basis: 0;
+        -ms-flex-preferred-size: 0;
+        flex-basis: 0;
+        -webkit-box-flex: 1;
+        -webkit-flex-grow: 1;
+        -ms-flex-positive: 1;
+        flex-grow: 1;
+        max-width: 100%;
+      }
+  
+      .col-lg-auto {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 auto;
+        -ms-flex: 0 0 auto;
+        flex: 0 0 auto;
+        width: auto;
+      }
+  
+      .col-lg-1 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 8.333333%;
+        -ms-flex: 0 0 8.333333%;
+        flex: 0 0 8.333333%;
+        max-width: 8.333333%;
+      }
+  
+      .col-lg-2 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 16.666667%;
+        -ms-flex: 0 0 16.666667%;
+        flex: 0 0 16.666667%;
+        max-width: 16.666667%;
+      }
+  
+      .col-lg-3 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 25%;
+        -ms-flex: 0 0 25%;
+        flex: 0 0 25%;
+        max-width: 25%;
+      }
+  
+      .col-lg-4 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 33.333333%;
+        -ms-flex: 0 0 33.333333%;
+        flex: 0 0 33.333333%;
+        max-width: 33.333333%;
+      }
+  
+      .col-lg-5 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 41.666667%;
+        -ms-flex: 0 0 41.666667%;
+        flex: 0 0 41.666667%;
+        max-width: 41.666667%;
+      }
+  
+      .col-lg-6 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 50%;
+        -ms-flex: 0 0 50%;
+        flex: 0 0 50%;
+        max-width: 50%;
+      }
+  
+      .col-lg-7 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 58.333333%;
+        -ms-flex: 0 0 58.333333%;
+        flex: 0 0 58.333333%;
+        max-width: 58.333333%;
+      }
+  
+      .col-lg-8 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 66.666667%;
+        -ms-flex: 0 0 66.666667%;
+        flex: 0 0 66.666667%;
+        max-width: 66.666667%;
+      }
+  
+      .col-lg-9 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 75%;
+        -ms-flex: 0 0 75%;
+        flex: 0 0 75%;
+        max-width: 75%;
+      }
+  
+      .col-lg-10 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 83.333333%;
+        -ms-flex: 0 0 83.333333%;
+        flex: 0 0 83.333333%;
+        max-width: 83.333333%;
+      }
+  
+      .col-lg-11 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 91.666667%;
+        -ms-flex: 0 0 91.666667%;
+        flex: 0 0 91.666667%;
+        max-width: 91.666667%;
+      }
+  
+      .col-lg-12 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 100%;
+        -ms-flex: 0 0 100%;
+        flex: 0 0 100%;
+        max-width: 100%;
+      }
+  
+      .pull-lg-0 {
+        right: auto;
+      }
+  
+      .pull-lg-1 {
+        right: 8.333333%;
+      }
+  
+      .pull-lg-2 {
+        right: 16.666667%;
+      }
+  
+      .pull-lg-3 {
+        right: 25%;
+      }
+  
+      .pull-lg-4 {
+        right: 33.333333%;
+      }
+  
+      .pull-lg-5 {
+        right: 41.666667%;
+      }
+  
+      .pull-lg-6 {
+        right: 50%;
+      }
+  
+      .pull-lg-7 {
+        right: 58.333333%;
+      }
+  
+      .pull-lg-8 {
+        right: 66.666667%;
+      }
+  
+      .pull-lg-9 {
+        right: 75%;
+      }
+  
+      .pull-lg-10 {
+        right: 83.333333%;
+      }
+  
+      .pull-lg-11 {
+        right: 91.666667%;
+      }
+  
+      .pull-lg-12 {
+        right: 100%;
+      }
+  
+      .push-lg-0 {
+        left: auto;
+      }
+  
+      .push-lg-1 {
+        left: 8.333333%;
+      }
+  
+      .push-lg-2 {
+        left: 16.666667%;
+      }
+  
+      .push-lg-3 {
+        left: 25%;
+      }
+  
+      .push-lg-4 {
+        left: 33.333333%;
+      }
+  
+      .push-lg-5 {
+        left: 41.666667%;
+      }
+  
+      .push-lg-6 {
+        left: 50%;
+      }
+  
+      .push-lg-7 {
+        left: 58.333333%;
+      }
+  
+      .push-lg-8 {
+        left: 66.666667%;
+      }
+  
+      .push-lg-9 {
+        left: 75%;
+      }
+  
+      .push-lg-10 {
+        left: 83.333333%;
+      }
+  
+      .push-lg-11 {
+        left: 91.666667%;
+      }
+  
+      .push-lg-12 {
+        left: 100%;
+      }
+  
+      .offset-lg-0 {
+        margin-left: 0%;
+      }
+  
+      .offset-lg-1 {
+        margin-left: 8.333333%;
+      }
+  
+      .offset-lg-2 {
+        margin-left: 16.666667%;
+      }
+  
+      .offset-lg-3 {
+        margin-left: 25%;
+      }
+  
+      .offset-lg-4 {
+        margin-left: 33.333333%;
+      }
+  
+      .offset-lg-5 {
+        margin-left: 41.666667%;
+      }
+  
+      .offset-lg-6 {
+        margin-left: 50%;
+      }
+  
+      .offset-lg-7 {
+        margin-left: 58.333333%;
+      }
+  
+      .offset-lg-8 {
+        margin-left: 66.666667%;
+      }
+  
+      .offset-lg-9 {
+        margin-left: 75%;
+      }
+  
+      .offset-lg-10 {
+        margin-left: 83.333333%;
+      }
+  
+      .offset-lg-11 {
+        margin-left: 91.666667%;
+      }
+    }
+  
+    @media (min-width: 1200px) {
+      .col-xl {
+        -webkit-flex-basis: 0;
+        -ms-flex-preferred-size: 0;
+        flex-basis: 0;
+        -webkit-box-flex: 1;
+        -webkit-flex-grow: 1;
+        -ms-flex-positive: 1;
+        flex-grow: 1;
+        max-width: 100%;
+      }
+  
+      .col-xl-auto {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 auto;
+        -ms-flex: 0 0 auto;
+        flex: 0 0 auto;
+        width: auto;
+      }
+  
+      .col-xl-1 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 8.333333%;
+        -ms-flex: 0 0 8.333333%;
+        flex: 0 0 8.333333%;
+        max-width: 8.333333%;
+      }
+  
+      .col-xl-2 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 16.666667%;
+        -ms-flex: 0 0 16.666667%;
+        flex: 0 0 16.666667%;
+        max-width: 16.666667%;
+      }
+  
+      .col-xl-3 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 25%;
+        -ms-flex: 0 0 25%;
+        flex: 0 0 25%;
+        max-width: 25%;
+      }
+  
+      .col-xl-4 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 33.333333%;
+        -ms-flex: 0 0 33.333333%;
+        flex: 0 0 33.333333%;
+        max-width: 33.333333%;
+      }
+  
+      .col-xl-5 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 41.666667%;
+        -ms-flex: 0 0 41.666667%;
+        flex: 0 0 41.666667%;
+        max-width: 41.666667%;
+      }
+  
+      .col-xl-6 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 50%;
+        -ms-flex: 0 0 50%;
+        flex: 0 0 50%;
+        max-width: 50%;
+      }
+  
+      .col-xl-7 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 58.333333%;
+        -ms-flex: 0 0 58.333333%;
+        flex: 0 0 58.333333%;
+        max-width: 58.333333%;
+      }
+  
+      .col-xl-8 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 66.666667%;
+        -ms-flex: 0 0 66.666667%;
+        flex: 0 0 66.666667%;
+        max-width: 66.666667%;
+      }
+  
+      .col-xl-9 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 75%;
+        -ms-flex: 0 0 75%;
+        flex: 0 0 75%;
+        max-width: 75%;
+      }
+  
+      .col-xl-10 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 83.333333%;
+        -ms-flex: 0 0 83.333333%;
+        flex: 0 0 83.333333%;
+        max-width: 83.333333%;
+      }
+  
+      .col-xl-11 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 91.666667%;
+        -ms-flex: 0 0 91.666667%;
+        flex: 0 0 91.666667%;
+        max-width: 91.666667%;
+      }
+  
+      .col-xl-12 {
+        -webkit-box-flex: 0;
+        -webkit-flex: 0 0 100%;
+        -ms-flex: 0 0 100%;
+        flex: 0 0 100%;
+        max-width: 100%;
+      }
+  
+      .pull-xl-0 {
+        right: auto;
+      }
+  
+      .pull-xl-1 {
+        right: 8.333333%;
+      }
+  
+      .pull-xl-2 {
+        right: 16.666667%;
+      }
+  
+      .pull-xl-3 {
+        right: 25%;
+      }
+  
+      .pull-xl-4 {
+        right: 33.333333%;
+      }
+  
+      .pull-xl-5 {
+        right: 41.666667%;
+      }
+  
+      .pull-xl-6 {
+        right: 50%;
+      }
+  
+      .pull-xl-7 {
+        right: 58.333333%;
+      }
+  
+      .pull-xl-8 {
+        right: 66.666667%;
+      }
+  
+      .pull-xl-9 {
+        right: 75%;
+      }
+  
+      .pull-xl-10 {
+        right: 83.333333%;
+      }
+  
+      .pull-xl-11 {
+        right: 91.666667%;
+      }
+  
+      .pull-xl-12 {
+        right: 100%;
+      }
+  
+      .push-xl-0 {
+        left: auto;
+      }
+  
+      .push-xl-1 {
+        left: 8.333333%;
+      }
+  
+      .push-xl-2 {
+        left: 16.666667%;
+      }
+  
+      .push-xl-3 {
+        left: 25%;
+      }
+  
+      .push-xl-4 {
+        left: 33.333333%;
+      }
+  
+      .push-xl-5 {
+        left: 41.666667%;
+      }
+  
+      .push-xl-6 {
+        left: 50%;
+      }
+  
+      .push-xl-7 {
+        left: 58.333333%;
+      }
+  
+      .push-xl-8 {
+        left: 66.666667%;
+      }
+  
+      .push-xl-9 {
+        left: 75%;
+      }
+  
+      .push-xl-10 {
+        left: 83.333333%;
+      }
+  
+      .push-xl-11 {
+        left: 91.666667%;
+      }
+  
+      .push-xl-12 {
+        left: 100%;
+      }
+  
+      .offset-xl-0 {
+        margin-left: 0%;
+      }
+  
+      .offset-xl-1 {
+        margin-left: 8.333333%;
+      }
+  
+      .offset-xl-2 {
+        margin-left: 16.666667%;
+      }
+  
+      .offset-xl-3 {
+        margin-left: 25%;
+      }
+  
+      .offset-xl-4 {
+        margin-left: 33.333333%;
+      }
+  
+      .offset-xl-5 {
+        margin-left: 41.666667%;
+      }
+  
+      .offset-xl-6 {
+        margin-left: 50%;
+      }
+  
+      .offset-xl-7 {
+        margin-left: 58.333333%;
+      }
+  
+      .offset-xl-8 {
+        margin-left: 66.666667%;
+      }
+  
+      .offset-xl-9 {
+        margin-left: 75%;
+      }
+  
+      .offset-xl-10 {
+        margin-left: 83.333333%;
+      }
+  
+      .offset-xl-11 {
+        margin-left: 91.666667%;
+      }
+    }
+  </style>
+</template>
+`;
+styleElement.register('skin-grid');
diff --git a/classes/typography.html b/classes/typography.html
deleted file mode 100644
index 83f87fe..0000000
--- a/classes/typography.html
+++ /dev/null
@@ -1,635 +0,0 @@
-<link rel="import" href="../../polymer/polymer.html">
-<link rel="import" href="../../paper-styles/classes/typography.html">
-<link rel="import" href="../../paper-styles/typography.html">
-
-<!--
-@license
-Copyright (c) 2017 FabricElements. All rights reserved.
-
-`skin-typography`
-Typography Sizes applied to paper classes.
-
-@group Skin Styles
-@demo demo/typography.html skin-typography
--->
-
-<dom-module id="skin-typography">
-  <template>
-    <style is="custom-style">
-      /*
-      * Reset browser fonts
-      */
-      h1,
-      h2,
-      h3,
-      h4,
-      h5,
-      h6,
-      p,
-      span,
-      li {
-        @apply --paper-font-common-base;
-        @apply --paper-font-body1;
-        margin: 0;
-        padding: 0;
-      }
-
-      /*
-      "Line wrapping only applies to Body, Subhead, Headline, and the smaller Display
-      styles. All other styles should exist as single lines."
-      */
-
-      .light.paper-font-display4 {
-        color: var(--light-theme-font-display4, #000000);
-      }
-
-      .light.paper-font-display3 {
-        color: var(--light-theme-font-display3, #000000);
-      }
-
-      .light.paper-font-display2 {
-        color: var(--light-theme-font-display2, #000000);
-      }
-
-      .light.paper-font-display1 {
-        color: var(--light-theme-font-display1, #000000);
-      }
-
-      .light.paper-font-headline {
-        color: var(--light-theme-font-headline, #000000);
-      }
-
-      .light.paper-font-title {
-        color: var(--light-theme-font-title, #000000);
-      }
-
-      .light.paper-font-subhead {
-        color: var(--light-theme-font-subhead, #000000);
-      }
-
-      .light.paper-font-body2 {
-        color: var(--light-theme-font-body2, #000000);
-      }
-
-      .light.paper-font-body1 {
-        color: var(--light-theme-font-body1, #000000);
-      }
-
-      .light.paper-font-caption {
-        color: var(--light-theme-font-caption, #000000);
-      }
-
-      .light.paper-font-menu {
-        color: var(--light-theme-font-menu, #000000);
-      }
-
-      .light.paper-font-button {
-        color: var(--light-theme-font-button, #000000);
-      }
-
-      .light.paper-font-code2 {
-        color: var(--light-theme-font-code2, #000000);
-      }
-
-      .light.paper-font-code1 {
-        color: var(--light-theme-font-code1, #000000);
-      }
-
-      /*
-      "Line wrapping only applies to Body, Subhead, Headline, and the smaller Display
-      styles. All other styles should exist as single lines."
-      */
-
-      .dark.paper-font-display4 {
-        color: var(--dark-theme-font-display4, #FFFFFF);
-      }
-
-      .dark.paper-font-display3 {
-        color: var(--dark-theme-font-display3, #FFFFFF);
-      }
-
-      .dark.paper-font-display2 {
-        color: var(--dark-theme-font-display2, #FFFFFF);
-      }
-
-      .dark.paper-font-display1 {
-        color: var(--dark-theme-font-display1, #FFFFFF);
-      }
-
-      .dark.paper-font-headline {
-        color: var(--dark-theme-font-headline, #FFFFFF);
-      }
-
-      .dark.paper-font-title {
-        color: var(--dark-theme-font-title, #FFFFFF);
-      }
-
-      .dark.paper-font-subhead {
-        color: var(--dark-theme-font-subhead, #FFFFFF);
-      }
-
-      .dark.paper-font-body2 {
-        color: var(--dark-theme-font-body2, #FFFFFF);
-      }
-
-      .dark.paper-font-body1 {
-        color: var(--dark-theme-font-body1, #FFFFFF);
-      }
-
-      .dark.paper-font-caption {
-        color: var(--dark-theme-font-caption, #FFFFFF);
-      }
-
-      .dark.paper-font-menu {
-        color: var(--dark-theme-font-menu, #FFFFFF);
-      }
-
-      .dark.paper-font-button {
-        color: var(--dark-theme-font-button, #FFFFFF);
-      }
-
-      .dark.paper-font-code2 {
-        color: var(--dark-theme-font-code2, #FFFFFF);
-      }
-
-      .dark.paper-font-code1 {
-        color: var(--dark-theme-font-code1, #FFFFFF);
-      }
-
-      /*
-      "Line wrapping only applies to Body, Subhead, Headline, and the smaller Display
-      styles. All other styles should exist as single lines."
-      */
-
-      /*noinspection ALL*/
-      .paper-font-display4,
-      .paper-font-display3,
-      .paper-font-display2,
-      .paper-font-display1,
-      .paper-font-headline,
-      .paper-font-title,
-      .paper-font-subhead,
-      .paper-font-body2,
-      .paper-font-body1,
-      .paper-font-caption,
-      .paper-font-menu,
-      .paper-font-button {
-      }
-
-      /*noinspection ALL*/
-      .paper-font-code2,
-      .paper-font-code1 {
-      }
-
-      /*
-      "Line wrapping only applies to Body, Subhead, Headline, and the smaller Display
-      styles. All other styles should exist as single lines."
-      */
-
-      /*noinspection ALL*/
-      .paper-font-display4 {
-        @apply --paper-font-display4;
-      }
-
-      /*noinspection ALL*/
-      .paper-font-display3 {
-        @apply --paper-font-display3;
-      }
-
-      /*noinspection ALL*/
-      .paper-font-display2 {
-        @apply --paper-font-display2;
-      }
-
-      /*noinspection ALL*/
-      .paper-font-display1 {
-        @apply --paper-font-display1;
-      }
-
-      /*noinspection ALL*/
-      .paper-font-headline {
-        @apply --paper-font-headline;
-      }
-
-      /*noinspection ALL*/
-      .paper-font-title {
-        @apply --paper-font-title;
-      }
-
-      /*noinspection ALL*/
-      .paper-font-subhead {
-        @apply --paper-font-subhead;
-      }
-
-      /*noinspection ALL*/
-      .paper-font-body2 {
-        @apply --paper-font-body2;
-      }
-
-      /*noinspection ALL*/
-      .paper-font-body1 {
-        @apply --paper-font-body2;
-      }
-
-      /*noinspection ALL*/
-      .paper-font-caption {
-        @apply --paper-font-caption;
-      }
-
-      /*noinspection ALL*/
-      .paper-font-menu {
-        @apply --paper-font-menu;
-      }
-
-      /*noinspection ALL*/
-      .paper-font-button {
-        @apply --paper-font-button;
-      }
-
-      /*noinspection ALL*/
-      .paper-font-code2 {
-        @apply --paper-font-code2;
-      }
-
-      /*noinspection ALL*/
-      .paper-font-code1 {
-        @apply --paper-font-code1;
-      }
-
-      /* ===========================
-      media-breakpoint-up
-      ============================== */
-
-      @media (min-width: 0) {
-        /* media-breakpoint-up-xs */
-        .paper-font-display4 {
-        }
-
-        /*noinspection ALL*/
-        .paper-font-display3 {
-        }
-
-        /*noinspection ALL*/
-        .paper-font-display2 {
-        }
-
-        /*noinspection ALL*/
-        .paper-font-display1 {
-        }
-
-        /*noinspection ALL*/
-        .paper-font-headline {
-        }
-
-        /*noinspection ALL*/
-        .paper-font-title {
-        }
-
-        /*noinspection ALL*/
-        .paper-font-subhead {
-        }
-
-        /*noinspection ALL*/
-        .paper-font-body2 {
-        }
-
-        /*noinspection ALL*/
-        .paper-font-body1 {
-        }
-
-        /*noinspection ALL*/
-        .paper-font-caption {
-        }
-
-        /*noinspection ALL*/
-        .paper-font-menu {
-        }
-
-        /*noinspection ALL*/
-        .paper-font-button {
-        }
-
-        /*noinspection ALL*/
-        .paper-font-code2 {
-        }
-
-        /*noinspection ALL*/
-        .paper-font-code1 {
-        }
-      }
-
-      @media (min-width: 544px) {
-        /* media-breakpoint-up-sm */
-        /*noinspection ALL*/
-        .paper-font-display4 {
-        }
-
-        /*noinspection ALL*/
-        .paper-font-display3 {
-        }
-
-        /*noinspection ALL*/
-        .paper-font-display2 {
-        }
-
-        /*noinspection ALL*/
-        .paper-font-display1 {
-        }
-
-        /*noinspection ALL*/
-        .paper-font-headline {
-        }
-
-        /*noinspection ALL*/
-        .paper-font-title {
-        }
-
-        /*noinspection ALL*/
-        .paper-font-subhead {
-        }
-
-        /*noinspection ALL*/
-        .paper-font-body2 {
-        }
-
-        /*noinspection ALL*/
-        .paper-font-body1 {
-        }
-
-        /*noinspection ALL*/
-        .paper-font-caption {
-        }
-
-        /*noinspection ALL*/
-        .paper-font-menu {
-        }
-
-        /*noinspection ALL*/
-        .paper-font-button {
-        }
-
-        /*noinspection ALL*/
-        .paper-font-code2 {
-        }
-
-        /*noinspection ALL*/
-        .paper-font-code1 {
-        }
-      }
-
-      @media (min-width: 768px) {
-        /* media-breakpoint-up-md */
-        /*noinspection ALL*/
-        .paper-font-display4 {
-
-        }
-
-        /*noinspection ALL*/
-        .paper-font-display3 {
-          font-size: 70px;
-          font-weight: 400;
-          letter-spacing: -.028em;
-          line-height: 85px;
-        }
-
-        /*noinspection ALL*/
-        .paper-font-display2 {
-          font-size: 56px;
-          font-weight: 400;
-          letter-spacing: -.026em;
-          line-height: 60px;
-        }
-
-        /*noinspection ALL*/
-        .paper-font-display1 {
-          font-size: 45px;
-          font-weight: 400;
-          letter-spacing: -.018em;
-          line-height: 48px;
-        }
-
-        /*noinspection ALL*/
-        .paper-font-headline {
-          font-size: 34px;
-          font-weight: 400;
-          letter-spacing: -.01em;
-          line-height: 40px;
-        }
-
-        /*noinspection ALL*/
-        .paper-font-title {
-          font-size: 24px;
-          font-weight: 500;
-          letter-spacing: -.012em;
-          line-height: 32px;
-        }
-
-        /*noinspection ALL*/
-        .paper-font-subhead {
-          font-size: 20px;
-          font-weight: 400;
-          line-height: 28px;
-        }
-
-        /*noinspection ALL*/
-        .paper-font-body2 {
-          font-size: 16px;
-          font-weight: 500;
-          line-height: 30px;
-        }
-
-        /*noinspection ALL*/
-        .paper-font-body1 {
-          font-size: 16px;
-          font-weight: 400;
-          line-height: 24px;
-        }
-
-        /*noinspection ALL*/
-        .paper-font-caption {
-          font-size: 14px;
-          font-weight: 400;
-          line-height: 20px;
-        }
-
-        /*noinspection ALL*/
-        .paper-font-menu {
-        }
-
-        /*noinspection ALL*/
-        .paper-font-button {
-        }
-
-        /*noinspection ALL*/
-        .paper-font-code2 {
-        }
-
-        /*noinspection ALL*/
-        .paper-font-code1 {
-        }
-      }
-
-      @media (min-width: 992px) {
-        /* media-breakpoint-up-lg */
-        /*noinspection ALL*/
-        .paper-font-display4 {
-        }
-
-        /*noinspection ALL*/
-        .paper-font-display3 {
-        }
-
-        /*noinspection ALL*/
-        .paper-font-display2 {
-        }
-
-        /*noinspection ALL*/
-        .paper-font-display1 {
-        }
-
-        /*noinspection ALL*/
-        .paper-font-headline {
-        }
-
-        /*noinspection ALL*/
-        .paper-font-title {
-        }
-
-        /*noinspection ALL*/
-        .paper-font-subhead {
-        }
-
-        /*noinspection ALL*/
-        .paper-font-body2 {
-        }
-
-        /*noinspection ALL*/
-        .paper-font-body1 {
-        }
-
-        /*noinspection ALL*/
-        .paper-font-caption {
-        }
-
-        /*noinspection ALL*/
-        .paper-font-menu {
-        }
-
-        /*noinspection ALL*/
-        .paper-font-button {
-        }
-
-        /*noinspection ALL*/
-        .paper-font-code2 {
-        }
-
-        /*noinspection ALL*/
-        .paper-font-code1 {
-        }
-      }
-
-      @media (min-width: 1200px) {
-        /* media-breakpoint-up-xl */
-        /*noinspection ALL*/
-        .paper-font-display4 {
-        }
-
-        /*noinspection ALL*/
-        .paper-font-display3 {
-        }
-
-        /*noinspection ALL*/
-        .paper-font-display2 {
-        }
-
-        /*noinspection ALL*/
-        .paper-font-display1 {
-        }
-
-        /*noinspection ALL*/
-        .paper-font-headline {
-        }
-
-        /*noinspection ALL*/
-        .paper-font-title {
-        }
-
-        /*noinspection ALL*/
-        .paper-font-subhead {
-        }
-
-        /*noinspection ALL*/
-        .paper-font-body2 {
-        }
-
-        /*noinspection ALL*/
-        .paper-font-body1 {
-        }
-
-        /*noinspection ALL*/
-        .paper-font-caption {
-        }
-
-        /*noinspection ALL*/
-        .paper-font-menu {
-        }
-
-        /*noinspection ALL*/
-        .paper-font-button {
-        }
-
-        /*noinspection ALL*/
-        .paper-font-code2 {
-        }
-
-        /*noinspection ALL*/
-        .paper-font-code1 {
-        }
-      }
-
-      /* ===========================
-      media-breakpoint-down
-      =============================*/
-
-      @media (max-width: 543px) {
-        /* media-breakpoint-up-xs */
-
-      }
-
-      @media (max-width: 767px) {
-        /* media-breakpoint-down-sm */
-        paper-button {
-          font-size: 13px;
-        }
-      }
-
-      @media (max-width: 991px) {
-        /* media-breakpoint-down-md */
-      }
-
-      @media (max-width: 1199px) {
-        /* media-breakpoint-down-lg */
-      }
-
-      /* ===========================
-      media-breakpoint-only
-      =============================*/
-
-      @media (min-width: 0) and (max-width: 543px) {
-        /* media-breakpoint-only-xs */
-      }
-
-      @media (min-width: 544px) and (max-width: 767px) {
-        /* media-breakpoint-only-sm */
-      }
-
-      @media (min-width: 768px) and (max-width: 991px) {
-        /* media-breakpoint-only-md */
-      }
-
-      @media (min-width: 992px) and (max-width: 1199px) {
-        /* media-breakpoint-only-lg */
-      }
-    </style>
-  </template>
-</dom-module>
diff --git a/classes/typography.js b/classes/typography.js
new file mode 100644
index 0000000..92e207b
--- /dev/null
+++ b/classes/typography.js
@@ -0,0 +1,637 @@
+/**
+ @license
+ Copyright (c) FabricElements. All rights reserved.
+ `skin-typography`
+ Typography Sizes applied to paper classes.
+ @group Skin Styles
+ @demo demo/typography.html skin-typography
+ */
+import '@polymer/polymer/polymer-legacy.js';
+import '@polymer/paper-styles/classes/typography.js';
+import '@polymer/paper-styles/typography.js';
+
+const styleElement = document.createElement('dom-module');
+styleElement.innerHTML = `
+<template>
+  <!--suppress CssInvalidPseudoSelector -->
+  <!--suppress CssUnresolvedCustomProperty -->
+  <!--suppress CssUnresolvedCustomPropertySet -->
+  <style>
+    /*
+    * Reset browser fonts
+    */
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    p,
+    span,
+    li {
+      @apply --paper-font-common-base;
+      @apply --paper-font-body1;
+      margin: 0;
+      padding: 0;
+    }
+
+    /*
+    "Line wrapping only applies to Body, Subhead, Headline, and the smaller Display
+    styles. All other styles should exist as single lines."
+    */
+
+    .light.paper-font-display4 {
+      color: var(--light-theme-font-display4, #000000);
+    }
+
+    .light.paper-font-display3 {
+      color: var(--light-theme-font-display3, #000000);
+    }
+
+    .light.paper-font-display2 {
+      color: var(--light-theme-font-display2, #000000);
+    }
+
+    .light.paper-font-display1 {
+      color: var(--light-theme-font-display1, #000000);
+    }
+
+    .light.paper-font-headline {
+      color: var(--light-theme-font-headline, #000000);
+    }
+
+    .light.paper-font-title {
+      color: var(--light-theme-font-title, #000000);
+    }
+
+    .light.paper-font-subhead {
+      color: var(--light-theme-font-subhead, #000000);
+    }
+
+    .light.paper-font-body2 {
+      color: var(--light-theme-font-body2, #000000);
+    }
+
+    .light.paper-font-body1 {
+      color: var(--light-theme-font-body1, #000000);
+    }
+
+    .light.paper-font-caption {
+      color: var(--light-theme-font-caption, #000000);
+    }
+
+    .light.paper-font-menu {
+      color: var(--light-theme-font-menu, #000000);
+    }
+
+    .light.paper-font-button {
+      color: var(--light-theme-font-button, #000000);
+    }
+
+    .light.paper-font-code2 {
+      color: var(--light-theme-font-code2, #000000);
+    }
+
+    .light.paper-font-code1 {
+      color: var(--light-theme-font-code1, #000000);
+    }
+
+    /*
+    "Line wrapping only applies to Body, Subhead, Headline, and the smaller Display
+    styles. All other styles should exist as single lines."
+    */
+
+    .dark.paper-font-display4 {
+      color: var(--dark-theme-font-display4, #FFFFFF);
+    }
+
+    .dark.paper-font-display3 {
+      color: var(--dark-theme-font-display3, #FFFFFF);
+    }
+
+    .dark.paper-font-display2 {
+      color: var(--dark-theme-font-display2, #FFFFFF);
+    }
+
+    .dark.paper-font-display1 {
+      color: var(--dark-theme-font-display1, #FFFFFF);
+    }
+
+    .dark.paper-font-headline {
+      color: var(--dark-theme-font-headline, #FFFFFF);
+    }
+
+    .dark.paper-font-title {
+      color: var(--dark-theme-font-title, #FFFFFF);
+    }
+
+    .dark.paper-font-subhead {
+      color: var(--dark-theme-font-subhead, #FFFFFF);
+    }
+
+    .dark.paper-font-body2 {
+      color: var(--dark-theme-font-body2, #FFFFFF);
+    }
+
+    .dark.paper-font-body1 {
+      color: var(--dark-theme-font-body1, #FFFFFF);
+    }
+
+    .dark.paper-font-caption {
+      color: var(--dark-theme-font-caption, #FFFFFF);
+    }
+
+    .dark.paper-font-menu {
+      color: var(--dark-theme-font-menu, #FFFFFF);
+    }
+
+    .dark.paper-font-button {
+      color: var(--dark-theme-font-button, #FFFFFF);
+    }
+
+    .dark.paper-font-code2 {
+      color: var(--dark-theme-font-code2, #FFFFFF);
+    }
+
+    .dark.paper-font-code1 {
+      color: var(--dark-theme-font-code1, #FFFFFF);
+    }
+
+    /*
+    "Line wrapping only applies to Body, Subhead, Headline, and the smaller Display
+    styles. All other styles should exist as single lines."
+    */
+
+    /*noinspection ALL*/
+    .paper-font-display4,
+    .paper-font-display3,
+    .paper-font-display2,
+    .paper-font-display1,
+    .paper-font-headline,
+    .paper-font-title,
+    .paper-font-subhead,
+    .paper-font-body2,
+    .paper-font-body1,
+    .paper-font-caption,
+    .paper-font-menu,
+    .paper-font-button {
+    }
+
+    /*noinspection ALL*/
+    .paper-font-code2,
+    .paper-font-code1 {
+    }
+
+    /*
+    "Line wrapping only applies to Body, Subhead, Headline, and the smaller Display
+    styles. All other styles should exist as single lines."
+    */
+
+    /*noinspection ALL*/
+    .paper-font-display4 {
+      @apply --paper-font-display4;
+    }
+
+    /*noinspection ALL*/
+    .paper-font-display3 {
+      @apply --paper-font-display3;
+    }
+
+    /*noinspection ALL*/
+    .paper-font-display2 {
+      @apply --paper-font-display2;
+    }
+
+    /*noinspection ALL*/
+    .paper-font-display1 {
+      @apply --paper-font-display1;
+    }
+
+    /*noinspection ALL*/
+    .paper-font-headline {
+      @apply --paper-font-headline;
+    }
+
+    /*noinspection ALL*/
+    .paper-font-title {
+      @apply --paper-font-title;
+    }
+
+    /*noinspection ALL*/
+    .paper-font-subhead {
+      @apply --paper-font-subhead;
+    }
+
+    /*noinspection ALL*/
+    .paper-font-body2 {
+      @apply --paper-font-body2;
+    }
+
+    /*noinspection ALL*/
+    .paper-font-body1 {
+      @apply --paper-font-body2;
+    }
+
+    /*noinspection ALL*/
+    .paper-font-caption {
+      @apply --paper-font-caption;
+    }
+
+    /*noinspection ALL*/
+    .paper-font-menu {
+      @apply --paper-font-menu;
+    }
+
+    /*noinspection ALL*/
+    .paper-font-button {
+      @apply --paper-font-button;
+    }
+
+    /*noinspection ALL*/
+    .paper-font-code2 {
+      @apply --paper-font-code2;
+    }
+
+    /*noinspection ALL*/
+    .paper-font-code1 {
+      @apply --paper-font-code1;
+    }
+
+    /* ===========================
+    media-breakpoint-up
+    ============================== */
+
+    @media (min-width: 0) {
+      /* media-breakpoint-up-xs */
+      .paper-font-display4 {
+      }
+
+      /*noinspection ALL*/
+      .paper-font-display3 {
+      }
+
+      /*noinspection ALL*/
+      .paper-font-display2 {
+      }
+
+      /*noinspection ALL*/
+      .paper-font-display1 {
+      }
+
+      /*noinspection ALL*/
+      .paper-font-headline {
+      }
+
+      /*noinspection ALL*/
+      .paper-font-title {
+      }
+
+      /*noinspection ALL*/
+      .paper-font-subhead {
+      }
+
+      /*noinspection ALL*/
+      .paper-font-body2 {
+      }
+
+      /*noinspection ALL*/
+      .paper-font-body1 {
+      }
+
+      /*noinspection ALL*/
+      .paper-font-caption {
+      }
+
+      /*noinspection ALL*/
+      .paper-font-menu {
+      }
+
+      /*noinspection ALL*/
+      .paper-font-button {
+      }
+
+      /*noinspection ALL*/
+      .paper-font-code2 {
+      }
+
+      /*noinspection ALL*/
+      .paper-font-code1 {
+      }
+    }
+
+    @media (min-width: 544px) {
+      /* media-breakpoint-up-sm */
+      /*noinspection ALL*/
+      .paper-font-display4 {
+      }
+
+      /*noinspection ALL*/
+      .paper-font-display3 {
+      }
+
+      /*noinspection ALL*/
+      .paper-font-display2 {
+      }
+
+      /*noinspection ALL*/
+      .paper-font-display1 {
+      }
+
+      /*noinspection ALL*/
+      .paper-font-headline {
+      }
+
+      /*noinspection ALL*/
+      .paper-font-title {
+      }
+
+      /*noinspection ALL*/
+      .paper-font-subhead {
+      }
+
+      /*noinspection ALL*/
+      .paper-font-body2 {
+      }
+
+      /*noinspection ALL*/
+      .paper-font-body1 {
+      }
+
+      /*noinspection ALL*/
+      .paper-font-caption {
+      }
+
+      /*noinspection ALL*/
+      .paper-font-menu {
+      }
+
+      /*noinspection ALL*/
+      .paper-font-button {
+      }
+
+      /*noinspection ALL*/
+      .paper-font-code2 {
+      }
+
+      /*noinspection ALL*/
+      .paper-font-code1 {
+      }
+    }
+
+    @media (min-width: 768px) {
+      /* media-breakpoint-up-md */
+      /*noinspection ALL*/
+      .paper-font-display4 {
+
+      }
+
+      /*noinspection ALL*/
+      .paper-font-display3 {
+        font-size: 70px;
+        font-weight: 400;
+        letter-spacing: -.028em;
+        line-height: 85px;
+      }
+
+      /*noinspection ALL*/
+      .paper-font-display2 {
+        font-size: 56px;
+        font-weight: 400;
+        letter-spacing: -.026em;
+        line-height: 60px;
+      }
+
+      /*noinspection ALL*/
+      .paper-font-display1 {
+        font-size: 45px;
+        font-weight: 400;
+        letter-spacing: -.018em;
+        line-height: 48px;
+      }
+
+      /*noinspection ALL*/
+      .paper-font-headline {
+        font-size: 34px;
+        font-weight: 400;
+        letter-spacing: -.01em;
+        line-height: 40px;
+      }
+
+      /*noinspection ALL*/
+      .paper-font-title {
+        font-size: 24px;
+        font-weight: 500;
+        letter-spacing: -.012em;
+        line-height: 32px;
+      }
+
+      /*noinspection ALL*/
+      .paper-font-subhead {
+        font-size: 20px;
+        font-weight: 400;
+        line-height: 28px;
+      }
+
+      /*noinspection ALL*/
+      .paper-font-body2 {
+        font-size: 16px;
+        font-weight: 500;
+        line-height: 30px;
+      }
+
+      /*noinspection ALL*/
+      .paper-font-body1 {
+        font-size: 16px;
+        font-weight: 400;
+        line-height: 24px;
+      }
+
+      /*noinspection ALL*/
+      .paper-font-caption {
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 20px;
+      }
+
+      /*noinspection ALL*/
+      .paper-font-menu {
+      }
+
+      /*noinspection ALL*/
+      .paper-font-button {
+      }
+
+      /*noinspection ALL*/
+      .paper-font-code2 {
+      }
+
+      /*noinspection ALL*/
+      .paper-font-code1 {
+      }
+    }
+
+    @media (min-width: 992px) {
+      /* media-breakpoint-up-lg */
+      /*noinspection ALL*/
+      .paper-font-display4 {
+      }
+
+      /*noinspection ALL*/
+      .paper-font-display3 {
+      }
+
+      /*noinspection ALL*/
+      .paper-font-display2 {
+      }
+
+      /*noinspection ALL*/
+      .paper-font-display1 {
+      }
+
+      /*noinspection ALL*/
+      .paper-font-headline {
+      }
+
+      /*noinspection ALL*/
+      .paper-font-title {
+      }
+
+      /*noinspection ALL*/
+      .paper-font-subhead {
+      }
+
+      /*noinspection ALL*/
+      .paper-font-body2 {
+      }
+
+      /*noinspection ALL*/
+      .paper-font-body1 {
+      }
+
+      /*noinspection ALL*/
+      .paper-font-caption {
+      }
+
+      /*noinspection ALL*/
+      .paper-font-menu {
+      }
+
+      /*noinspection ALL*/
+      .paper-font-button {
+      }
+
+      /*noinspection ALL*/
+      .paper-font-code2 {
+      }
+
+      /*noinspection ALL*/
+      .paper-font-code1 {
+      }
+    }
+
+    @media (min-width: 1200px) {
+      /* media-breakpoint-up-xl */
+      /*noinspection ALL*/
+      .paper-font-display4 {
+      }
+
+      /*noinspection ALL*/
+      .paper-font-display3 {
+      }
+
+      /*noinspection ALL*/
+      .paper-font-display2 {
+      }
+
+      /*noinspection ALL*/
+      .paper-font-display1 {
+      }
+
+      /*noinspection ALL*/
+      .paper-font-headline {
+      }
+
+      /*noinspection ALL*/
+      .paper-font-title {
+      }
+
+      /*noinspection ALL*/
+      .paper-font-subhead {
+      }
+
+      /*noinspection ALL*/
+      .paper-font-body2 {
+      }
+
+      /*noinspection ALL*/
+      .paper-font-body1 {
+      }
+
+      /*noinspection ALL*/
+      .paper-font-caption {
+      }
+
+      /*noinspection ALL*/
+      .paper-font-menu {
+      }
+
+      /*noinspection ALL*/
+      .paper-font-button {
+      }
+
+      /*noinspection ALL*/
+      .paper-font-code2 {
+      }
+
+      /*noinspection ALL*/
+      .paper-font-code1 {
+      }
+    }
+
+    /* ===========================
+    media-breakpoint-down
+    =============================*/
+
+    @media (max-width: 543px) {
+      /* media-breakpoint-up-xs */
+
+    }
+
+    @media (max-width: 767px) {
+      /* media-breakpoint-down-sm */
+      paper-button {
+        font-size: 13px;
+      }
+    }
+
+    @media (max-width: 991px) {
+      /* media-breakpoint-down-md */
+    }
+
+    @media (max-width: 1199px) {
+      /* media-breakpoint-down-lg */
+    }
+
+    /* ===========================
+    media-breakpoint-only
+    =============================*/
+
+    @media (min-width: 0) and (max-width: 543px) {
+      /* media-breakpoint-only-xs */
+    }
+
+    @media (min-width: 544px) and (max-width: 767px) {
+      /* media-breakpoint-only-sm */
+    }
+
+    @media (min-width: 768px) and (max-width: 991px) {
+      /* media-breakpoint-only-md */
+    }
+
+    @media (min-width: 992px) and (max-width: 1199px) {
+      /* media-breakpoint-only-lg */
+    }
+  </style>
+</template>
+`;
+styleElement.register('skin-typography');
diff --git a/demo/buttons.html b/demo/buttons.html
index 931a791..4383c41 100644
--- a/demo/buttons.html
+++ b/demo/buttons.html
@@ -2,7 +2,7 @@
 
 <!--
 @license
-Copyright (c) 2017 FabricElements. All rights reserved.
+Copyright (c) FabricElements. All rights reserved.
 -->
 
 <html>
@@ -13,14 +13,12 @@
 
   <title>skin-buttons demo</title>
 
-  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
-  <link rel="import" href="../../polymer/lib/elements/custom-style.html">
-
-  <link rel="import" href="../../paper-styles/demo-pages.html">
-  <link rel="import" href="../../paper-button/paper-button.html">
-  <link rel="import" href="../classes/buttons.html">
-  <link rel="import" href="../styles/default-theme.html">
-
+  <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
+  <script type="module" src="../classes/buttons.js"></script>
+  <script type="module" src="../styles/default-theme.js"></script>
+  <script type="module">
+    import '@polymer/paper-button/paper-button.js';
+    import '@polymer/polymer/lib/elements/custom-style.js';</script>
   <custom-style>
     <style include="skin-buttons">
       body {
@@ -36,16 +34,12 @@
     </style>
   </custom-style>
 </head>
-
 <body>
-<h1>skin-buttons</h1>
-
-<section is="buttons">
+<section id="buttons">
   <h2>buttons.html</h2>
   <p>Use paper-button attributes like "raised" to continue manipulating the styles</p>
   <br>
   <br>
-
   <article>
     <h3>btn-rounded</h3>
     <paper-button raised class="btn-rounded">
@@ -76,7 +70,6 @@ <h3>btn--primary-color</h3>
     </paper-button>
     <br>
     <br>
-
     <h3>btn-fill--primary-color</h3>
     <paper-button class="btn-fill--primary-color">
       hello
@@ -87,7 +80,6 @@ <h3>btn-fill--primary-color</h3>
     <br>
     <br>
     <hr>
-
     <h3>btn--light-primary-color</h3>
     <paper-button class="btn--light-primary-color">
       hello
@@ -97,7 +89,6 @@ <h3>btn--light-primary-color</h3>
     </paper-button>
     <br>
     <br>
-
     <h3>btn-fill--light-primary-color</h3>
     <paper-button class="btn-fill--light-primary-color">
       hello
@@ -108,7 +99,6 @@ <h3>btn-fill--light-primary-color</h3>
     <br>
     <br>
     <hr>
-
     <h3>btn--dark-primary-color</h3>
     <paper-button class="btn--dark-primary-color">
       hello
@@ -118,7 +108,6 @@ <h3>btn--dark-primary-color</h3>
     </paper-button>
     <br>
     <br>
-
     <h3>btn-fill--dark-primary-color</h3>
     <paper-button class="btn-fill--dark-primary-color">
       hello
@@ -129,7 +118,6 @@ <h3>btn-fill--dark-primary-color</h3>
     <br>
     <br>
     <hr>
-
     <h3>btn--accent-color</h3>
     <paper-button class="btn--accent-color">
       hello
@@ -139,7 +127,6 @@ <h3>btn--accent-color</h3>
     </paper-button>
     <br>
     <br>
-
     <h3>btn-fill--accent-color</h3>
     <paper-button class="btn-fill--accent-color">
       hello
@@ -150,7 +137,6 @@ <h3>btn-fill--accent-color</h3>
     <br>
     <br>
     <hr>
-
     <h3>btn--light-accent-color</h3>
     <paper-button class="btn--light-accent-color">
       hello
@@ -160,7 +146,6 @@ <h3>btn--light-accent-color</h3>
     </paper-button>
     <br>
     <br>
-
     <h3>btn-fill--light-accent-color</h3>
     <paper-button class="btn-fill--light-accent-color">
       hello
@@ -171,7 +156,6 @@ <h3>btn-fill--light-accent-color</h3>
     <br>
     <br>
     <hr>
-
     <h3>btn--dark-accent-color</h3>
     <paper-button class="btn--dark-accent-color">
       hello
@@ -181,7 +165,6 @@ <h3>btn--dark-accent-color</h3>
     </paper-button>
     <br>
     <br>
-
     <h3>btn-fill--dark-accent-color</h3>
     <paper-button class="btn-fill--dark-accent-color">
       hello
@@ -192,8 +175,6 @@ <h3>btn-fill--dark-accent-color</h3>
     <br>
     <br>
     <hr>
-
-
   </article>
   <br>
   <article>
@@ -206,7 +187,6 @@ <h3>btn--secondary-color</h3>
     </paper-button>
     <br>
     <br>
-
     <h3>btn-fill--secondary-color</h3>
     <paper-button class="btn-fill--secondary-color">
       hello
@@ -217,7 +197,6 @@ <h3>btn-fill--secondary-color</h3>
     <br>
     <br>
     <hr>
-
     <h3>btn--light-secondary-color</h3>
     <paper-button class="btn--light-secondary-color">
       hello
@@ -227,7 +206,6 @@ <h3>btn--light-secondary-color</h3>
     </paper-button>
     <br>
     <br>
-
     <h3>btn-fill--light-secondary-color</h3>
     <paper-button class="btn-fill--light-secondary-color">
       hello
@@ -238,7 +216,6 @@ <h3>btn-fill--light-secondary-color</h3>
     <br>
     <br>
     <hr>
-
     <h3>btn--dark-secondary-color</h3>
     <paper-button class="btn--dark-secondary-color">
       hello
@@ -248,7 +225,6 @@ <h3>btn--dark-secondary-color</h3>
     </paper-button>
     <br>
     <br>
-
     <h3>btn-fill--dark-secondary-color</h3>
     <paper-button class="btn-fill--dark-secondary-color">
       hello
@@ -259,7 +235,6 @@ <h3>btn-fill--dark-secondary-color</h3>
     <br>
     <br>
     <hr>
-
     <h3>btn--accent-secondary-color</h3>
     <paper-button class="btn--accent-secondary-color">
       hello
@@ -269,7 +244,6 @@ <h3>btn--accent-secondary-color</h3>
     </paper-button>
     <br>
     <br>
-
     <h3>btn-fill--accent-secondary-color</h3>
     <paper-button class="btn-fill--accent-secondary-color">
       hello
@@ -280,7 +254,6 @@ <h3>btn-fill--accent-secondary-color</h3>
     <br>
     <br>
     <hr>
-
     <h3>btn--light-accent-secondary-color</h3>
     <paper-button class="btn--light-accent-secondary-color">
       hello
@@ -290,7 +263,6 @@ <h3>btn--light-accent-secondary-color</h3>
     </paper-button>
     <br>
     <br>
-
     <h3>btn-fill--light-accent-secondary-color</h3>
     <paper-button class="btn-fill--light-accent-secondary-color">
       hello
@@ -301,7 +273,6 @@ <h3>btn-fill--light-accent-secondary-color</h3>
     <br>
     <br>
     <hr>
-
     <h3>btn--dark-accent-secondary-color</h3>
     <paper-button class="btn--dark-accent-secondary-color">
       hello
@@ -311,7 +282,6 @@ <h3>btn--dark-accent-secondary-color</h3>
     </paper-button>
     <br>
     <br>
-
     <h3>btn-fill--dark-accent-secondary-color</h3>
     <paper-button class="btn-fill--dark-accent-secondary-color">
       hello
@@ -323,8 +293,6 @@ <h3>btn-fill--dark-accent-secondary-color</h3>
     <br>
     <hr>
   </article>
-
 </section>
-
 </body>
 </html>
diff --git a/demo/grid.html b/demo/grid.html
index b72ccd6..3d117f5 100644
--- a/demo/grid.html
+++ b/demo/grid.html
@@ -2,7 +2,7 @@
 
 <!--
 @license
-Copyright (c) 2017 FabricElements. All rights reserved.
+Copyright (c) FabricElements. All rights reserved.
 -->
 
 <!--suppress ALL -->
@@ -13,13 +13,13 @@
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 
   <title>skin-styles-grid demo</title>
+  <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
+  <script type="module">
+    import '@polymer/polymer/lib/elements/custom-style.js';</script>
+  <script type="module" src="../classes/grid.js"></script>
 
-  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
-  <link rel="import" href="../../polymer/lib/elements/custom-style.html">
-
-  <link rel="import" href="../classes/grid.html">
   <custom-style>
-    <style>
+    <style include="skin-grid">
       body {
         margin: 0;
         padding: 0;
@@ -223,7 +223,6 @@ <h3>Offset, push, and pull resets</h3>
     </div>
   </div>
 
-</div> <!-- /container -->
-
+</div>
 </body>
 </html>
diff --git a/demo/typography.html b/demo/typography.html
index af7ae24..b2ff68f 100644
--- a/demo/typography.html
+++ b/demo/typography.html
@@ -2,7 +2,7 @@
 
 <!--
 @license
-Copyright (c) 2017 FabricElements. All rights reserved.
+Copyright (c) FabricElements. All rights reserved.
 -->
 
 <html>
@@ -13,12 +13,11 @@
 
   <title>skin-typography demo</title>
 
-  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
-  <link rel="import" href="../../polymer/lib/elements/custom-style.html">
-
-  <link rel="import" href="../../paper-button/paper-button.html">
-  <link rel="import" href="../classes/typography.html">
-  <link rel="import" href="../styles/default-theme.html">
+  <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
+  <script type="module">
+    import '@polymer/polymer/lib/elements/custom-style.js';</script>
+  <script type="module" src="../classes/typography.js"></script>
+  <script type="module" src="../styles/default-theme.js"></script>
 
   <custom-style>
     <style include="skin-typography">
@@ -51,7 +50,7 @@
 
         background: var(--default-primary-color);
         color: var(--text-primary-color);
-        @apply(--paper-font-display1);
+        @apply --paper-font-display1;
       }
 
       .item, .disabled-item {
@@ -65,19 +64,19 @@
       .item .primary {
         color: var(--primary-text-color);
 
-        @apply(--paper-font-body2);
+        @apply --paper-font-body2;
       }
 
       .item .secondary {
         color: var(--secondary-text-color);
 
-        @apply(--paper-font-body1);
+        @apply --paper-font-body1;
       }
 
       .disabled-item {
         color: var(--disabled-text-color);
 
-        @apply(--paper-font-body2);
+        @apply --paper-font-body2;
       }
 
       .fab {
@@ -93,7 +92,7 @@
 
         background: var(--accent-color);
         color: var(--text-primary-color);
-        @apply(--paper-font-display1);
+        @apply --paper-font-display1;
       }
 
       section {
@@ -104,7 +103,7 @@
   </custom-style>
 </head>
 <body>
-<h1>skin-typography</h1>
+
 
 <section id="default-theme">
   <h2>default-theme.html</h2>
@@ -124,7 +123,6 @@ <h2>default-theme.html</h2>
   </article>
 </section>
 
-
 <section id="typography-light">
   <h2>typography-light.html</h2>
   <p>
@@ -186,9 +184,6 @@ <h4>body1</h4>
   </article>
 </section>
 
-<br>
-<hr>
-
 <section id="typography-dark">
   <h2>typography-dark.html</h2>
   <p>
diff --git a/package-lock.json b/package-lock.json
index 8b7de92..a2e4bf4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,9 +1,213 @@
 {
-  "name": "name",
-  "version": "0.0.1",
+  "name": "skin-styles",
+  "version": "2.0.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "@polymer/font-roboto": {
+      "version": "3.0.0-pre.19",
+      "resolved": "https://registry.npmjs.org/@polymer/font-roboto/-/font-roboto-3.0.0-pre.19.tgz",
+      "integrity": "sha512-brLUbgLGzBVNlmHhpDHnWdPI6KNkHmTjtX+82dvHpeuUjPsey2uH4fFofWC+m29/yxY+GH5RGv493AfRUDcokQ=="
+    },
+    "@polymer/iron-a11y-keys-behavior": {
+      "version": "3.0.0-pre.19",
+      "resolved": "https://registry.npmjs.org/@polymer/iron-a11y-keys-behavior/-/iron-a11y-keys-behavior-3.0.0-pre.19.tgz",
+      "integrity": "sha512-jti4YDsjxTny2AJJxAQ89Gwq7+AMblOZLWBOQiciqDuRdj+nEelf227DAUwIejoII6cYQCV/Knw+Qit5zZx2kQ==",
+      "dev": true,
+      "requires": {
+        "@polymer/polymer": "^3.0.0"
+      }
+    },
+    "@polymer/iron-behaviors": {
+      "version": "3.0.0-pre.19",
+      "resolved": "https://registry.npmjs.org/@polymer/iron-behaviors/-/iron-behaviors-3.0.0-pre.19.tgz",
+      "integrity": "sha512-pxiCO2sN5by1Xmx9aVG9+t/Mpx7HRVXPUt1Aj8qxgF6lE+LlkiHWtOkl1WYqeun1F4Yh38x5LztWnCUvxe5sEw==",
+      "dev": true,
+      "requires": {
+        "@polymer/iron-a11y-keys-behavior": "^3.0.0-pre.19",
+        "@polymer/polymer": "^3.0.0"
+      }
+    },
+    "@polymer/iron-checked-element-behavior": {
+      "version": "3.0.0-pre.19",
+      "resolved": "https://registry.npmjs.org/@polymer/iron-checked-element-behavior/-/iron-checked-element-behavior-3.0.0-pre.19.tgz",
+      "integrity": "sha512-NEEaAhjtGvSffeqep2a0GXpTqc0K3wcgO1lR5NAMOQjNcnbh62twdkTPJyw1EGs9l+PL0IpepUAYTOI305MWXg==",
+      "dev": true,
+      "requires": {
+        "@polymer/iron-form-element-behavior": "^3.0.0-pre.19",
+        "@polymer/iron-validatable-behavior": "^3.0.0-pre.19",
+        "@polymer/polymer": "^3.0.0"
+      }
+    },
+    "@polymer/iron-demo-helpers": {
+      "version": "3.0.0-pre.19",
+      "resolved": "https://registry.npmjs.org/@polymer/iron-demo-helpers/-/iron-demo-helpers-3.0.0-pre.19.tgz",
+      "integrity": "sha512-FHSqM63dVFJWxO9p1rZLWfyISTN/Qc4uCKOppFsz6ipJAu/JWFdYEoPipCl5Em3YOfhY90TFDC6Xy06kA5Lkig==",
+      "dev": true,
+      "requires": {
+        "@polymer/font-roboto": "^3.0.0-pre.19",
+        "@polymer/iron-flex-layout": "^3.0.0-pre.19",
+        "@polymer/iron-location": "^3.0.0-pre.19",
+        "@polymer/marked-element": "^3.0.0-pre.19",
+        "@polymer/polymer": "^3.0.0",
+        "@polymer/prism-element": "^3.0.0-pre.19"
+      }
+    },
+    "@polymer/iron-flex-layout": {
+      "version": "3.0.0-pre.19",
+      "resolved": "https://registry.npmjs.org/@polymer/iron-flex-layout/-/iron-flex-layout-3.0.0-pre.19.tgz",
+      "integrity": "sha512-EZ25vUjmZXLc0hKJj338Ec1fQwemBsfe+Zo5d6ThzJzoSq72uGlZ8deLYNiAhIw6UZZxWttXcN6c/2kZ4qV18A==",
+      "requires": {
+        "@polymer/polymer": "^3.0.0"
+      }
+    },
+    "@polymer/iron-form-element-behavior": {
+      "version": "3.0.0-pre.19",
+      "resolved": "https://registry.npmjs.org/@polymer/iron-form-element-behavior/-/iron-form-element-behavior-3.0.0-pre.19.tgz",
+      "integrity": "sha512-ZiJ65MFcuFk2kJZqgY8ogspeV8mcrhlIOkwSaT/RWkhakeQ5WZ3++jhmjmNVQqUbYBPr0eLtZQp/TqGjd1UGyg==",
+      "dev": true,
+      "requires": {
+        "@polymer/polymer": "^3.0.0"
+      }
+    },
+    "@polymer/iron-location": {
+      "version": "3.0.0-pre.19",
+      "resolved": "https://registry.npmjs.org/@polymer/iron-location/-/iron-location-3.0.0-pre.19.tgz",
+      "integrity": "sha512-VGL1TGrnSPXmbMtHo2pazY8fhg3lKLGC6pOeMdwk8fMHDurfO7atVHjlcVLKrCDB7L38rqNN+af6HRSCrHJ7/A==",
+      "dev": true,
+      "requires": {
+        "@polymer/polymer": "^3.0.0"
+      }
+    },
+    "@polymer/iron-meta": {
+      "version": "3.0.0-pre.19",
+      "resolved": "https://registry.npmjs.org/@polymer/iron-meta/-/iron-meta-3.0.0-pre.19.tgz",
+      "integrity": "sha512-rZk6W37srfnB1MqlYq3sbg/mZiGSYf/xpjc7xf7uJUUvX+oe0o65o4T4b1BwthVE6uqffO43p2MjFt2kDXDrjA==",
+      "dev": true,
+      "requires": {
+        "@polymer/polymer": "^3.0.0"
+      }
+    },
+    "@polymer/iron-test-helpers": {
+      "version": "3.0.0-pre.19",
+      "resolved": "https://registry.npmjs.org/@polymer/iron-test-helpers/-/iron-test-helpers-3.0.0-pre.19.tgz",
+      "integrity": "sha512-ML16oZp17Qbb2AK3xoLgZiqen/1l0ttet4RiITZNRQnURQm/06xodkudqMEVLMjs1dfopUA9U2MDTU68Gco6uA==",
+      "dev": true,
+      "requires": {
+        "@polymer/polymer": "^3.0.0"
+      }
+    },
+    "@polymer/iron-validatable-behavior": {
+      "version": "3.0.0-pre.19",
+      "resolved": "https://registry.npmjs.org/@polymer/iron-validatable-behavior/-/iron-validatable-behavior-3.0.0-pre.19.tgz",
+      "integrity": "sha512-lUC48m8u4+eLxcGJbaIYr3HQepP1Bn9bVeEfrVa3PlUHVkqdj8xOYxtI2fBm1UxQpmxA+I0KWwbL9zqpD1ozuA==",
+      "dev": true,
+      "requires": {
+        "@polymer/iron-meta": "^3.0.0-pre.19",
+        "@polymer/polymer": "^3.0.0"
+      }
+    },
+    "@polymer/marked-element": {
+      "version": "3.0.0-pre.19",
+      "resolved": "https://registry.npmjs.org/@polymer/marked-element/-/marked-element-3.0.0-pre.19.tgz",
+      "integrity": "sha512-8MBsM7vXVTvu6rQ7LaGy2Ti1d9su1jYcCLl1XUl7Xd/pcdXlpPvlZflT03Wp9QiCJt76igdl6n4DIkPLhSmvzw==",
+      "dev": true,
+      "requires": {
+        "@polymer/polymer": "^3.0.0",
+        "marked": "~0.3.9"
+      }
+    },
+    "@polymer/paper-behaviors": {
+      "version": "3.0.0-pre.19",
+      "resolved": "https://registry.npmjs.org/@polymer/paper-behaviors/-/paper-behaviors-3.0.0-pre.19.tgz",
+      "integrity": "sha512-j3/5AstflXixK3qCInVcREEm9Wz/Ay0/xAqzKI7Hz9FvOWhsbl64f+4FJTcdaKhXpb0dXbl5hPsqsf7cN+CQOg==",
+      "dev": true,
+      "requires": {
+        "@polymer/iron-behaviors": "^3.0.0-pre.19",
+        "@polymer/iron-checked-element-behavior": "^3.0.0-pre.19",
+        "@polymer/paper-ripple": "^3.0.0-pre.19",
+        "@polymer/polymer": "^3.0.0"
+      }
+    },
+    "@polymer/paper-button": {
+      "version": "3.0.0-pre.19",
+      "resolved": "https://registry.npmjs.org/@polymer/paper-button/-/paper-button-3.0.0-pre.19.tgz",
+      "integrity": "sha512-bhjq3b4ExLhQaV7nbwXvUZNRx/hKRykAK9NAyJWWUb+9UJlA/ah41zIivSy+jO7/NzH7wFgXXWQGlcMWsJTnxg==",
+      "dev": true,
+      "requires": {
+        "@polymer/iron-flex-layout": "^3.0.0-pre.19",
+        "@polymer/paper-behaviors": "^3.0.0-pre.19",
+        "@polymer/paper-styles": "^3.0.0-pre.19",
+        "@polymer/polymer": "^3.0.0"
+      }
+    },
+    "@polymer/paper-ripple": {
+      "version": "3.0.0-pre.19",
+      "resolved": "https://registry.npmjs.org/@polymer/paper-ripple/-/paper-ripple-3.0.0-pre.19.tgz",
+      "integrity": "sha512-VpaTIVf8p39ARrUffeXv+C8xCKpM9tZdVlkYBXrvvHe1ERO995BW8i71p34yarYJccbl2SZq1qhdiNLZALqTNw==",
+      "dev": true,
+      "requires": {
+        "@polymer/iron-a11y-keys-behavior": "^3.0.0-pre.19",
+        "@polymer/polymer": "^3.0.0"
+      }
+    },
+    "@polymer/paper-styles": {
+      "version": "3.0.0-pre.19",
+      "resolved": "https://registry.npmjs.org/@polymer/paper-styles/-/paper-styles-3.0.0-pre.19.tgz",
+      "integrity": "sha512-ASspmHr6GJjDiPxOVsqR2mFSQim13nGy03iLeyBXxX9QQa1rXI6r16/HShBvg8MrncQSRRUHqkFCfRWO3CKpwA==",
+      "requires": {
+        "@polymer/font-roboto": "^3.0.0-pre.19",
+        "@polymer/iron-flex-layout": "^3.0.0-pre.19",
+        "@polymer/polymer": "^3.0.0"
+      }
+    },
+    "@polymer/polymer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@polymer/polymer/-/polymer-3.0.2.tgz",
+      "integrity": "sha512-ow8AAjTe9ps8bantY9IvL0PT+xHf5VN3Cjahfr7gBJAc0lv3jTwGBv7pso65SHyrUJEEHeakhx6iPMl7qY4tfw==",
+      "requires": {
+        "@webcomponents/shadycss": "^1.2.0"
+      }
+    },
+    "@polymer/prism-element": {
+      "version": "3.0.0-pre.19",
+      "resolved": "https://registry.npmjs.org/@polymer/prism-element/-/prism-element-3.0.0-pre.19.tgz",
+      "integrity": "sha512-daEXazFW4sjF+HP9M1kmaRV3oVqwl28g2D6uqzd2KpSse6GFuZJx+wRlisv24zF6xg5vMRaxPCdC6jdS7psoFg==",
+      "dev": true,
+      "requires": {
+        "@polymer/polymer": "^3.0.0",
+        "prismjs": "^1.11.0"
+      }
+    },
+    "@polymer/sinonjs": {
+      "version": "1.17.1",
+      "resolved": "https://registry.npmjs.org/@polymer/sinonjs/-/sinonjs-1.17.1.tgz",
+      "integrity": "sha512-/U8F/cOTrbF2iVVYgINYmvKbtbexs+89Q3v8AaHADRYabTg7aOZGOb0RyWpOI+sUJt04kj63U4FwMhzW5r4wZA==",
+      "dev": true
+    },
+    "@polymer/test-fixture": {
+      "version": "3.0.0-pre.19",
+      "resolved": "https://registry.npmjs.org/@polymer/test-fixture/-/test-fixture-3.0.0-pre.19.tgz",
+      "integrity": "sha512-oyltfPEEPF8gzLxSv/CjieO9n0Uani567pcpmAk3IZeOMsFh9OFddZDYCwKx1e9I6lFe9557MaxQHM7EGhLaOQ==",
+      "dev": true
+    },
+    "@webcomponents/shadycss": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@webcomponents/shadycss/-/shadycss-1.3.0.tgz",
+      "integrity": "sha512-xw8WHLmICuB+BzdFLoKnyfL94+RqYMQSpzqmkEIL4B0CZ8vganMbzhYNC1BN/EoLby4TbuS4YVTt8vydwbtGPQ=="
+    },
+    "@webcomponents/webcomponentsjs": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@webcomponents/webcomponentsjs/-/webcomponentsjs-2.0.0.tgz",
+      "integrity": "sha512-f6izmesHd8E+rL32tftlXZmz1EAL+lLn8AUex0mJFLe39z53iTFNCqxAYsMmCA/QSGP+8X6D1it/JbuVl1jOHA==",
+      "dev": true
+    },
+    "accessibility-developer-tools": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/accessibility-developer-tools/-/accessibility-developer-tools-2.12.0.tgz",
+      "integrity": "sha1-PaDM6dbsY3OWS4TzXbfPw996tRQ=",
+      "dev": true
+    },
     "acorn": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.1.1.tgz",
@@ -128,6 +332,18 @@
       "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=",
       "dev": true
     },
+    "assertion-error": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-1.1.0.tgz",
+      "integrity": "sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==",
+      "dev": true
+    },
+    "async": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz",
+      "integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=",
+      "dev": true
+    },
     "babel-code-frame": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
@@ -168,6 +384,12 @@
         "repeat-element": "1.1.2"
       }
     },
+    "browser-stdout": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/browser-stdout/-/browser-stdout-1.3.0.tgz",
+      "integrity": "sha1-81HTKWnTL6XXpVZxVCY9korjvR8=",
+      "dev": true
+    },
     "caller-path": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/caller-path/-/caller-path-0.1.0.tgz",
@@ -183,6 +405,17 @@
       "integrity": "sha1-r6uWJikQp/M8GaV3WCXGnzTjUMo=",
       "dev": true
     },
+    "chai": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-3.5.0.tgz",
+      "integrity": "sha1-TQJjewZ/6Vi9v906QOxW/vc3Mkc=",
+      "dev": true,
+      "requires": {
+        "assertion-error": "^1.0.1",
+        "deep-eql": "^0.1.3",
+        "type-detect": "^1.0.0"
+      }
+    },
     "chalk": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
@@ -216,6 +449,18 @@
       "integrity": "sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk=",
       "dev": true
     },
+    "clipboard": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.1.tgz",
+      "integrity": "sha512-7yhQBmtN+uYZmfRjjVjKa0dZdWuabzpSKGtyQZN+9C8xlC788SSJjOHWh7tzurfwTqTD5UDYAhIv5fRJg3sHjQ==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "good-listener": "^1.2.2",
+        "select": "^1.1.2",
+        "tiny-emitter": "^2.0.0"
+      }
+    },
     "clone": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.2.tgz",
@@ -247,6 +492,15 @@
       "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
       "dev": true
     },
+    "commander": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.9.0.tgz",
+      "integrity": "sha1-nJkJQXbhIkDLItbFFGCYQA/g99Q=",
+      "dev": true,
+      "requires": {
+        "graceful-readlink": ">= 1.0.0"
+      }
+    },
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -337,6 +591,23 @@
         "ms": "2.0.0"
       }
     },
+    "deep-eql": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-0.1.3.tgz",
+      "integrity": "sha1-71WKyrjeJSBs1xOQbXTlaTDrafI=",
+      "dev": true,
+      "requires": {
+        "type-detect": "0.1.1"
+      },
+      "dependencies": {
+        "type-detect": {
+          "version": "0.1.1",
+          "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-0.1.1.tgz",
+          "integrity": "sha1-C6XsKohWQORw6k6FBZcZANrFiCI=",
+          "dev": true
+        }
+      }
+    },
     "deep-is": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz",
@@ -374,6 +645,13 @@
         }
       }
     },
+    "delegate": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
+      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==",
+      "dev": true,
+      "optional": true
+    },
     "deprecated": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/deprecated/-/deprecated-0.0.1.tgz",
@@ -387,6 +665,12 @@
         "fs-exists-sync": "0.1.0"
       }
     },
+    "diff": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-3.2.0.tgz",
+      "integrity": "sha1-yc45Okt8vQsFinJck98pkCeGj/k=",
+      "dev": true
+    },
     "doctrine": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.0.0.tgz",
@@ -875,6 +1159,15 @@
         "for-in": "1.0.2"
       }
     },
+    "formatio": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/formatio/-/formatio-1.1.1.tgz",
+      "integrity": "sha1-XtPM1jZVEJc4NGXZlhmRAOhhYek=",
+      "dev": true,
+      "requires": {
+        "samsam": "~1.1"
+      }
+    },
     "fs-exists-sync": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/fs-exists-sync/-/fs-exists-sync-0.1.0.tgz",
@@ -1099,6 +1392,16 @@
         "sparkles": "1.0.0"
       }
     },
+    "good-listener": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
+      "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "delegate": "^3.1.2"
+      }
+    },
     "graceful-fs": {
       "version": "3.0.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-3.0.11.tgz",
@@ -1107,6 +1410,18 @@
         "natives": "1.1.0"
       }
     },
+    "graceful-readlink": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/graceful-readlink/-/graceful-readlink-1.0.1.tgz",
+      "integrity": "sha1-TK+tdrxi8C+gObL5Tpo906ORpyU=",
+      "dev": true
+    },
+    "growl": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/growl/-/growl-1.9.2.tgz",
+      "integrity": "sha1-Dqd0NxXbjY3ixe3hd14bRayFwC8=",
+      "dev": true
+    },
     "gulp": {
       "version": "3.9.1",
       "resolved": "https://registry.npmjs.org/gulp/-/gulp-3.9.1.tgz",
@@ -1182,6 +1497,12 @@
         "sparkles": "1.0.0"
       }
     },
+    "he": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/he/-/he-1.1.1.tgz",
+      "integrity": "sha1-k0EP0hsAlzUVH4howvJx80J+I/0=",
+      "dev": true
+    },
     "homedir-polyfill": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.1.tgz",
@@ -1563,6 +1884,12 @@
         "jsonify": "0.0.0"
       }
     },
+    "json3": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/json3/-/json3-3.3.2.tgz",
+      "integrity": "sha1-PAQ0dD35Pi9cQq7nsZvLSDV19OE=",
+      "dev": true
+    },
     "jsonify": {
       "version": "0.0.0",
       "resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.0.tgz",
@@ -1608,11 +1935,27 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-1.0.2.tgz",
       "integrity": "sha1-j1dWDIO1n8JwvT1WG2kAQ0MOJVE="
     },
+    "lodash._baseassign": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/lodash._baseassign/-/lodash._baseassign-3.2.0.tgz",
+      "integrity": "sha1-jDigmVAPIVrQnlnxci/QxSv+Ck4=",
+      "dev": true,
+      "requires": {
+        "lodash._basecopy": "^3.0.0",
+        "lodash.keys": "^3.0.0"
+      }
+    },
     "lodash._basecopy": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz",
       "integrity": "sha1-jaDmqHbPNEwK2KVIghEd08XHyjY="
     },
+    "lodash._basecreate": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash._basecreate/-/lodash._basecreate-3.0.3.tgz",
+      "integrity": "sha1-G8ZhYU2qf8MRt9A78WgGoCE8+CE=",
+      "dev": true
+    },
     "lodash._basetostring": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/lodash._basetostring/-/lodash._basetostring-3.0.1.tgz",
@@ -1653,6 +1996,17 @@
       "resolved": "https://registry.npmjs.org/lodash._root/-/lodash._root-3.0.1.tgz",
       "integrity": "sha1-+6HEUkwZ7ppfgTa0YJ8BfPTe1pI="
     },
+    "lodash.create": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.create/-/lodash.create-3.1.1.tgz",
+      "integrity": "sha1-1/KEnw29p+BGgruM1yqwIkYd6+c=",
+      "dev": true,
+      "requires": {
+        "lodash._baseassign": "^3.0.0",
+        "lodash._basecreate": "^3.0.0",
+        "lodash._isiterateecall": "^3.0.0"
+      }
+    },
     "lodash.escape": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-3.2.0.tgz",
@@ -1726,6 +2080,12 @@
         "lodash.escape": "3.2.0"
       }
     },
+    "lolex": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/lolex/-/lolex-1.3.2.tgz",
+      "integrity": "sha1-fD2mL/yzDw9agKJWbKJORdigHzE=",
+      "dev": true
+    },
     "lru-cache": {
       "version": "2.7.3",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-2.7.3.tgz",
@@ -1736,6 +2096,12 @@
       "resolved": "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz",
       "integrity": "sha1-wyq9C9ZSXZsFFkW7TyasXcmKDb8="
     },
+    "marked": {
+      "version": "0.3.19",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-0.3.19.tgz",
+      "integrity": "sha512-ea2eGWOqNxPcXv8dyERdSr/6FmzvWwzjMxpfGB/sbMccXoct+xY+YukPD+QTUZwyvK7BZwcr4m21WBOW41pAkg==",
+      "dev": true
+    },
     "micromatch": {
       "version": "2.3.11",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-2.3.11.tgz",
@@ -1790,6 +2156,66 @@
         }
       }
     },
+    "mocha": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/mocha/-/mocha-3.5.3.tgz",
+      "integrity": "sha512-/6na001MJWEtYxHOV1WLfsmR4YIynkUEhBwzsb+fk2qmQ3iqsi258l/Q2MWHJMImAcNpZ8DEdYAK72NHoIQ9Eg==",
+      "dev": true,
+      "requires": {
+        "browser-stdout": "1.3.0",
+        "commander": "2.9.0",
+        "debug": "2.6.8",
+        "diff": "3.2.0",
+        "escape-string-regexp": "1.0.5",
+        "glob": "7.1.1",
+        "growl": "1.9.2",
+        "he": "1.1.1",
+        "json3": "3.3.2",
+        "lodash.create": "3.1.1",
+        "mkdirp": "0.5.1",
+        "supports-color": "3.1.2"
+      },
+      "dependencies": {
+        "glob": {
+          "version": "7.1.1",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.1.tgz",
+          "integrity": "sha1-gFIR3wT6rxxjo2ADBs31reULLsg=",
+          "dev": true,
+          "requires": {
+            "fs.realpath": "^1.0.0",
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "^3.0.2",
+            "once": "^1.3.0",
+            "path-is-absolute": "^1.0.0"
+          }
+        },
+        "has-flag": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz",
+          "integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=",
+          "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.7"
+          }
+        },
+        "supports-color": {
+          "version": "3.1.2",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.1.2.tgz",
+          "integrity": "sha1-cqJiiU2dQIuVbKBf83su2KbiotU=",
+          "dev": true,
+          "requires": {
+            "has-flag": "^1.0.0"
+          }
+        }
+      }
+    },
     "ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
@@ -2040,6 +2466,15 @@
       "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
       "integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE="
     },
+    "prismjs": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.14.0.tgz",
+      "integrity": "sha512-sa2s4m60bXs+kU3jcuUwx3ZCrUH7o0kuqnOOINbODqlRrDB7KY8SRx+xR/D7nHLlgfDdG7zXbRO8wJ+su5Ls0A==",
+      "dev": true,
+      "requires": {
+        "clipboard": "^2.0.0"
+      }
+    },
     "process-nextick-args": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-1.0.7.tgz",
@@ -2248,6 +2683,19 @@
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz",
       "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg=="
     },
+    "samsam": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/samsam/-/samsam-1.1.2.tgz",
+      "integrity": "sha1-vsEf3IOp/aBjQBIQ5AF2wwJNFWc=",
+      "dev": true
+    },
+    "select": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
+      "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=",
+      "dev": true,
+      "optional": true
+    },
     "semver": {
       "version": "4.3.6",
       "resolved": "https://registry.npmjs.org/semver/-/semver-4.3.6.tgz",
@@ -2284,6 +2732,24 @@
       "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
       "dev": true
     },
+    "sinon": {
+      "version": "1.17.7",
+      "resolved": "https://registry.npmjs.org/sinon/-/sinon-1.17.7.tgz",
+      "integrity": "sha1-RUKk9JugxFwF6y6d2dID4rjv4L8=",
+      "dev": true,
+      "requires": {
+        "formatio": "1.1.1",
+        "lolex": "1.3.2",
+        "samsam": "1.1.2",
+        "util": ">=0.10.3 <1"
+      }
+    },
+    "sinon-chai": {
+      "version": "2.14.0",
+      "resolved": "https://registry.npmjs.org/sinon-chai/-/sinon-chai-2.14.0.tgz",
+      "integrity": "sha512-9stIF1utB0ywNHNT7RgiXbdmen8QDCRsrTjw+G9TgKt1Yexjiv8TOWZ6WHsTPz57Yky3DIswZvEqX8fpuHNDtQ==",
+      "dev": true
+    },
     "slice-ansi": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-0.0.4.tgz",
@@ -2301,16 +2767,29 @@
       "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
       "dev": true
     },
+    "stacky": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/stacky/-/stacky-1.3.1.tgz",
+      "integrity": "sha1-PxF+UYe5pz0j+HbWnwXIWxGAShI=",
+      "dev": true,
+      "requires": {
+        "chalk": "^1.1.1",
+        "lodash": "^3.0.0"
+      },
+      "dependencies": {
+        "lodash": {
+          "version": "3.10.1",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-3.10.1.tgz",
+          "integrity": "sha1-W/Rejkm6QYnhfUgnid/RW9FAt7Y=",
+          "dev": true
+        }
+      }
+    },
     "stream-consume": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/stream-consume/-/stream-consume-0.1.0.tgz",
       "integrity": "sha1-pB6tGm1ggc63n2WwYZAbbY89HQ8="
     },
-    "string_decoder": {
-      "version": "0.10.31",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-      "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ="
-    },
     "string-width": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
@@ -2338,6 +2817,11 @@
         }
       }
     },
+    "string_decoder": {
+      "version": "0.10.31",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+      "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ="
+    },
     "strip-ansi": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
@@ -2461,6 +2945,13 @@
       "resolved": "https://registry.npmjs.org/time-stamp/-/time-stamp-1.1.0.tgz",
       "integrity": "sha1-dkpaEa9QVhkhsTPztE5hhofg9cM="
     },
+    "tiny-emitter": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.0.2.tgz",
+      "integrity": "sha512-2NM0auVBGft5tee/OxP4PI3d8WItkDM+fPnaRAVo6xTDI2knbz9eC5ArWGqtGlYqiH3RU5yMpdyTTO7MguC4ow==",
+      "dev": true,
+      "optional": true
+    },
     "tmp": {
       "version": "0.0.31",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.31.tgz",
@@ -2485,6 +2976,12 @@
         "prelude-ls": "1.1.2"
       }
     },
+    "type-detect": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-1.0.0.tgz",
+      "integrity": "sha1-diIXzAbbJY7EiQihKY6LlRIejqI=",
+      "dev": true
+    },
     "typedarray": {
       "version": "0.0.6",
       "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
@@ -2506,6 +3003,15 @@
       "resolved": "https://registry.npmjs.org/user-home/-/user-home-1.1.1.tgz",
       "integrity": "sha1-K1viOjK2Onyd640PKNSFcko98ZA="
     },
+    "util": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/util/-/util-0.11.0.tgz",
+      "integrity": "sha512-5n12uMzKCjvB2HPFHnbQSjaqAa98L5iIXmHrZCLavuZVe0qe/SJGbDGWlpaHk5lnBkWRDO+dRu1/PgmUYKPPTw==",
+      "dev": true,
+      "requires": {
+        "inherits": "2.0.3"
+      }
+    },
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -2580,6 +3086,40 @@
         }
       }
     },
+    "wct-browser-legacy": {
+      "version": "0.0.1-pre.12",
+      "resolved": "https://registry.npmjs.org/wct-browser-legacy/-/wct-browser-legacy-0.0.1-pre.12.tgz",
+      "integrity": "sha512-wY7QEj0XDKnu3S//VaYB4xWilyB8b0h7nS9k1kLbojK51aJkqXg3soydzJPatazqad/FcJi/8uxU5QXlPnmu7A==",
+      "dev": true,
+      "requires": {
+        "@polymer/polymer": "^3.0.0-pre.1",
+        "@polymer/sinonjs": "^1.14.1",
+        "@polymer/test-fixture": "^3.0.0-pre.1",
+        "@webcomponents/webcomponentsjs": "^1.0.7",
+        "accessibility-developer-tools": "^2.12.0",
+        "async": "^1.5.2",
+        "chai": "^3.5.0",
+        "lodash": "^3.10.1",
+        "mocha": "^3.4.2",
+        "sinon": "^1.17.1",
+        "sinon-chai": "^2.10.0",
+        "stacky": "^1.3.1"
+      },
+      "dependencies": {
+        "@webcomponents/webcomponentsjs": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/@webcomponents/webcomponentsjs/-/webcomponentsjs-1.2.0.tgz",
+          "integrity": "sha512-P9JWydfpBR+CK12UwtBaoD/lYF3PR9XBArAWk5J9nfPaJwA3OUox4StZmyFSVDLsvpFq5HsEtxU/OdHAlAWPnw==",
+          "dev": true
+        },
+        "lodash": {
+          "version": "3.10.1",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-3.10.1.tgz",
+          "integrity": "sha1-W/Rejkm6QYnhfUgnid/RW9FAt7Y=",
+          "dev": true
+        }
+      }
+    },
     "which": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/which/-/which-1.3.0.tgz",
diff --git a/package.json b/package.json
index f73b729..8cc4983 100644
--- a/package.json
+++ b/package.json
@@ -1,11 +1,32 @@
 {
-  "name": "skin-styles",
-  "version": "2.0.0",
+  "description": "Extend paper-styles with useful styles",
+  "keywords": [
+    "web-components",
+    "polymer",
+    "styles",
+    "FabricElements",
+    "css",
+    "buttons",
+    "typography",
+    "grid",
+    "animations"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:FabricElements/skin-styles.git"
+  },
+  "name": "@fabricelements/skin-styles",
+  "version": "3.0.0",
   "license": "BSD-3-Clause",
   "devDependencies": {
     "eslint": "^4.5.0",
     "eslint-config-google": "^0.9.1",
-    "eslint-plugin-html": "^3.2.0"
+    "eslint-plugin-html": "^3.2.0",
+    "@polymer/iron-demo-helpers": "^3.0.0-pre.18",
+    "wct-browser-legacy": "^0.0.1-pre.11",
+    "@webcomponents/webcomponentsjs": "^2.0.0",
+    "@polymer/iron-test-helpers": "^3.0.0-pre.18",
+    "@polymer/paper-button": "^3.0.0-pre.18"
   },
   "scripts": {
     "lint": "npm run lint:javascript && polymer lint",
@@ -13,6 +34,17 @@
     "test:integration": "polymer build # test that psk builds without error with the CLI"
   },
   "dependencies": {
-    "gulp": "^3.9.1"
-  }
+    "gulp": "^3.9.1",
+    "@polymer/polymer": "^3.0.0",
+    "@polymer/paper-styles": "^3.0.0-pre.18"
+  },
+  "resolutions": {
+    "inherits": "2.0.3",
+    "samsam": "1.1.3",
+    "supports-color": "3.1.2",
+    "type-detect": "1.0.0",
+    "@webcomponents/webcomponentsjs": "2.0.0-beta.2"
+  },
+  "main": "skin-styles.js",
+  "author": "The FabricElements Authors"
 }
diff --git a/polymer.json b/polymer.json
index 8ee8af0..971fd9d 100644
--- a/polymer.json
+++ b/polymer.json
@@ -1,7 +1,7 @@
 {
   "lint": {
     "rules": [
-      "polymer-2"
+      "polymer-3"
     ],
     "ignoreWarnings": [
       "element-before-dom-module"
diff --git a/skin-styles.html b/skin-styles.js
similarity index 86%
rename from skin-styles.html
rename to skin-styles.js
index 1109c49..bebda69 100644
--- a/skin-styles.html
+++ b/skin-styles.js
@@ -1,6 +1,9 @@
-<!--
+import './styles.js';
+import './classes.js';
+
+/**
 @license
-Copyright (c) 2017 FabricElements. All rights reserved.
+Copyright (c) FabricElements. All rights reserved.
 
 The `<skin-styles>` component provides simple ways to use Material Design CSS styles
 in your application. The following imports are available:
@@ -20,6 +23,4 @@
 @pseudoElement skin-styles
 @demo demo/buttons.html skin-buttons
 @demo demo/typography.html skin-typography
--->
-<link rel="import" href="styles.html">
-<link rel="import" href="classes.html">
+*/
diff --git a/styles.html b/styles.html
deleted file mode 100644
index 75e3141..0000000
--- a/styles.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<!--
-@license
-Copyright (c) 2017 FabricElements. All rights reserved.
-
-skin-styles Styles
--->
-<link rel="import" href="../paper-styles/paper-styles.html">
-<link rel="import" href="styles/default-theme.html">
-<link rel="import" href="styles/buttons.html">
diff --git a/styles.js b/styles.js
new file mode 100644
index 0000000..543cb5c
--- /dev/null
+++ b/styles.js
@@ -0,0 +1,10 @@
+import '@polymer/paper-styles/paper-styles.js';
+import './styles/default-theme.js';
+import './styles/buttons.js';
+
+/**
+ @license
+ Copyright (c) FabricElements. All rights reserved.
+
+ skin-styles Styles
+ */
diff --git a/styles/buttons.html b/styles/buttons.js
similarity index 90%
rename from styles/buttons.html
rename to styles/buttons.js
index 34a98cc..073df40 100644
--- a/styles/buttons.html
+++ b/styles/buttons.js
@@ -1,15 +1,18 @@
-<!--
-@license
-Copyright (c) 2017 FabricElements. All rights reserved.
--->
-
-<link rel="import" href="../../polymer/polymer.html">
-<link rel="import" href="default-theme.html">
-
+/**
+ @license
+ Copyright (c) FabricElements. All rights reserved.
+ */
+import '@polymer/polymer/lib/elements/custom-style.js';
+import './default-theme';
+
+const styleElement = document.createElement('template');
+styleElement.innerHTML = `
 <custom-style>
+  <!--suppress CssInvalidPseudoSelector -->
+  <!--suppress CssUnresolvedCustomProperty -->
+  <!--suppress CssUnresolvedCustomPropertySet -->
   <style is="custom-style">
     html {
-
       --btn-rounded: {
         border-radius: 200px;
         padding-left: 16px;
@@ -158,8 +161,10 @@
         background-color: var(--paper-grey-900);
         color: white;
       };
-
     }
-
   </style>
 </custom-style>
+`;
+
+document.head.appendChild(styleElement.content);
+
diff --git a/styles/default-theme.html b/styles/default-theme.js
similarity index 87%
rename from styles/default-theme.html
rename to styles/default-theme.js
index 0e00ca4..7120a5c 100644
--- a/styles/default-theme.html
+++ b/styles/default-theme.js
@@ -1,21 +1,23 @@
-<link rel="import" href="../../polymer/polymer.html">
+/**
+ @license
+ Copyright (c) FabricElements. All rights reserved.
+ */
+import '@polymer/polymer/lib/elements/custom-style.js';
+import '@polymer/paper-styles/color.js';
 
-<!--
-@license
-Copyright (c) 2017 FabricElements. All rights reserved.
--->
-
-<link rel="import" href="../../paper-styles/color.html">
-
-<!-- Taken from https://www.google.com/design/spec/style/color.html#color-ui-color-application -->
+const styleElement = document.createElement('template');
+styleElement.innerHTML = `
 <custom-style>
+  <!--suppress CssInvalidPseudoSelector -->
+  <!--suppress CssUnresolvedCustomProperty -->
+  <!--suppress CssUnresolvedCustomPropertySet -->
   <style is="custom-style">
     html {
       /*
        * You can use these generic variables in your elements for easy theming.
-       * For example, if all your elements use `--primary-text-color` as its main
+       * For example, if all your elements use \`--primary-text-color\` as its main
        * color, then switching from a light to a dark theme is just a matter of
-       * changing the value of `--primary-text-color` in your application.
+       * changing the value of \`--primary-text-color\` in your application.
        */
       --primary-text-color: var(--light-theme-text-color);
       --primary-background-color: var(--light-theme-background-color);
@@ -110,3 +112,6 @@
     }
   </style>
 </custom-style>
+`;
+
+document.head.appendChild(styleElement.content);