diff --git a/app/basic.html b/app/basic.html
index 4689e748..13d06147 100644
--- a/app/basic.html
+++ b/app/basic.html
@@ -26,9 +26,7 @@
     <link rel="canonical" href="http://www.example.com/">
     -->
 
-    <!-- build:css styles/components/main.min.css -->
-    <link rel="stylesheet" href="styles/h5bp.css">
-    <!-- endbuild -->
+    <link rel="stylesheet" href="styles/basic.css">
   </head>
   <body>
     <!-- Add your site or app content here -->
diff --git a/app/index.html b/app/index.html
index 516f1443..01d20f3a 100644
--- a/app/index.html
+++ b/app/index.html
@@ -26,15 +26,8 @@
     <link rel="canonical" href="http://www.example.com/">
     -->
 
-    <!-- build:css styles/components/main.min.css -->
-    <!-- HTML5 Boilerplate base styles -->
-    <link rel="stylesheet" href="styles/h5bp.css">
-    <!-- Visual Style Guide styles -->
-    <!-- Remove if you prefer to use a CSS library, like Bootstrap -->
-    <link rel="stylesheet" href="styles/components/components.css">
     <!-- Page styles -->
     <link rel="stylesheet" href="styles/main.css">
-    <!-- endbuild -->
   </head>
   <body>
     <header class="app-bar promote-layer">
@@ -53,7 +46,7 @@
       <ul>
         <li><a href="#hello">Hello</a></li>
         <li><a href="#get-started">Get Started</a></li>
-        <li><a href="styleguide/index.html">Style Guide</a></li>
+        <li><a href="styleguide.html">Style Guide</a></li>
       </ul>
     </nav>
 
@@ -62,7 +55,7 @@
       <p>Welcome to Web Starter Kit.</p>
 
       <h2 id="get-started">Get Started.</h2>
-      <p>Read how to <a href="http://developers.google.com/web/starter-kit">Get Started</a> or check out the <a href="styleguide/index.html">Style Guide</a>.</p>
+      <p>Read how to <a href="http://developers.google.com/web/starter-kit">Get Started</a> or check out the <a href="styleguide.html">Style Guide</a>.</p>
     </main>
 
     <!-- build:js scripts/main.min.js -->
diff --git a/app/styleguide/index.html b/app/styleguide.html
similarity index 99%
rename from app/styleguide/index.html
rename to app/styleguide.html
index 60e99d0d..4b0cd4a1 100644
--- a/app/styleguide/index.html
+++ b/app/styleguide.html
@@ -7,8 +7,9 @@
     <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1">
     <meta itemprop="name" content="Visual Style Guide — Web Starter Kit">
     <meta itemprop="description" content="Visual style guide used by this site.">
-    <link rel="stylesheet" href="../styles/components/components.css">
-    <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700'>
+
+    <link rel="stylesheet" href="styles/components.css">
+
     <title>Visual Style Guide — Web Starter Kit</title>
     <style>
       .auto-gen-code-snippet {
@@ -1041,7 +1042,7 @@
           <div class="container-medium">
             <div class="featured-spotlight__container g--pull-half">
               <div class="featured-spotlight__img">
-                <img src="../images/icons/placeholder--wide.png" alt="wide image placeholder example">
+                <img src="images/icons/placeholder--wide.png" alt="wide image placeholder example">
               </div>
 
               <div class="container-small">
@@ -1074,7 +1075,7 @@
                   </div>
                   <div class="featured-list__img-wrapper g--half g--last">
                     <div class="featured-list__img">
-                      <img src="../images/icons/placeholder--small.png" alt="small image placeholder example">
+                      <img src="images/icons/placeholder--small.png" alt="small image placeholder example">
                     </div>
                   </div>
                 </div>
@@ -1088,7 +1089,7 @@
                   </div>
                   <div class="featured-list__img-wrapper g--half g--last">
                     <div class="featured-list__img">
-                      <img src="../images/icons/placeholder--small.png" alt="small image placeholder example">
+                      <img src="images/icons/placeholder--small.png" alt="small image placeholder example">
                     </div>
                   </div>
                 </div>
diff --git a/app/styles/h5bp.css b/app/styles/_h5bp.scss
similarity index 100%
rename from app/styles/h5bp.css
rename to app/styles/_h5bp.scss
diff --git a/app/styles/basic.scss b/app/styles/basic.scss
new file mode 100644
index 00000000..4aa670ca
--- /dev/null
+++ b/app/styles/basic.scss
@@ -0,0 +1 @@
+@import "_h5bp";
diff --git a/app/styles/components/_components/_icons.scss b/app/styles/components/_components/_icons.scss
index d0fdbeac..cf3f71a3 100644
--- a/app/styles/components/_components/_icons.scss
+++ b/app/styles/components/_components/_icons.scss
@@ -1,11 +1,11 @@
 @font-face {
   font-family:"icons";
-  src:url("../../images/icons/icons.eot");
-  src:url("../../images/icons/icons.eot?#iefix") format("embedded-opentype"),
-    url("../../images/icons/icons.woff2") format("woff2"),
-    url("../../images/icons/icons.woff") format("woff"),
-    url("../../images/icons/icons.ttf") format("truetype"),
-    url("../../images/icons/icons.svg?#icons") format("svg");
+  src:url("../images/icons/icons.eot");
+  src:url("../images/icons/icons.eot?#iefix") format("embedded-opentype"),
+    url("../images/icons/icons.woff2") format("woff2"),
+    url("../images/icons/icons.woff") format("woff"),
+    url("../images/icons/icons.ttf") format("truetype"),
+    url("../images/icons/icons.svg?#icons") format("svg");
   font-weight:normal;
   font-style:normal;
 }
diff --git a/app/styles/components/components.css b/app/styles/components/components.css
deleted file mode 100755
index fbc123c8..00000000
--- a/app/styles/components/components.css
+++ /dev/null
@@ -1,3504 +0,0 @@
-/**
-*
-* Main Stylesheet For Visual Style Guide
-*
-**/
-/**
-*
-* Utils
-*
-**/
-/*==========  VARIABLES  ==========*/
-/*==========  FUNCTIONS  ==========*/
-/*==========  MIXINS  ==========*/
-/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
-/**
- * 1. Set default font family to sans-serif.
- * 2. Prevent iOS text size adjust after orientation change, without disabling
- *    user zoom.
- */
-html {
-  font-family: sans-serif;
-  /* 1 */
-  -ms-text-size-adjust: 100%;
-  /* 2 */
-  -webkit-text-size-adjust: 100%;
-  /* 2 */
-}
-
-/**
- * Remove default margin.
- */
-body {
-  margin: 0;
-}
-
-/* HTML5 display definitions
-   ========================================================================== */
-/**
- * Correct `block` display not defined for any HTML5 element in IE 8/9.
- * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
- * Correct `block` display not defined for `main` in IE 11.
- */
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-main,
-nav,
-section,
-summary {
-  display: block;
-}
-
-/**
- * 1. Correct `inline-block` display not defined in IE 8/9.
- * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
- */
-audio,
-canvas,
-progress,
-video {
-  display: inline-block;
-  /* 1 */
-  vertical-align: baseline;
-  /* 2 */
-}
-
-/**
- * Prevent modern browsers from displaying `audio` without controls.
- * Remove excess height in iOS 5 devices.
- */
-audio:not([controls]) {
-  display: none;
-  height: 0;
-}
-
-/**
- * Address `[hidden]` styling not present in IE 8/9/10.
- * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
- */
-[hidden],
-template {
-  display: none;
-}
-
-/* Links
-   ========================================================================== */
-/**
- * Remove the gray background color from active links in IE 10.
- */
-a {
-  background: transparent;
-}
-
-/**
- * Improve readability when focused and also mouse hovered in all browsers.
- */
-a:active,
-a:hover {
-  outline: 0;
-}
-
-/* Text-level semantics
-   ========================================================================== */
-/**
- * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
- */
-abbr[title] {
-  border-bottom: 1px dotted;
-}
-
-/**
- * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
- */
-b,
-strong {
-  font-weight: bold;
-}
-
-/**
- * Address styling not present in Safari and Chrome.
- */
-dfn {
-  font-style: italic;
-}
-
-/**
- * Address styling not present in IE 8/9.
- */
-mark {
-  background: #ff0;
-  color: #000;
-}
-
-/**
- * Prevent `sub` and `sup` affecting `line-height` in all browsers.
- */
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sup {
-  top: -0.5em;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-/* Embedded content
-   ========================================================================== */
-/**
- * Remove border when inside `a` element in IE 8/9/10.
- */
-img {
-  border: 0;
-}
-
-/**
- * Correct overflow not hidden in IE 9/10/11.
- */
-svg:not(:root) {
-  overflow: hidden;
-}
-
-/* Grouping content
-   ========================================================================== */
-/**
- * Remove margin
- */
-figure {
-  margin: 0;
-}
-
-/**
- * Address differences between Firefox and other browsers.
- */
-hr {
-  box-sizing: content-box;
-  height: 0;
-}
-
-/**
- * Contain overflow in all browsers.
- */
-pre {
-  overflow: auto;
-}
-
-/**
- * Address odd `em`-unit font size rendering in all browsers.
- */
-code,
-kbd,
-pre,
-samp {
-  font-family: monospace, monospace;
-  font-size: 1em;
-}
-
-/* Forms
-   ========================================================================== */
-/**
- * Known limitation: by default, Chrome and Safari on OS X allow very limited
- * styling of `select`, unless a `border` property is set.
- */
-/**
- * 1. Correct color not being inherited.
- *    Known issue: affects color of disabled elements.
- * 2. Correct font properties not being inherited.
- * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
- */
-button,
-input,
-optgroup,
-select,
-textarea {
-  color: inherit;
-  /* 1 */
-  font: inherit;
-  /* 2 */
-  margin: 0;
-  /* 3 */
-}
-
-/**
- * Address `overflow` set to `hidden` in IE 8/9/10/11.
- */
-button {
-  overflow: visible;
-}
-
-/**
- * Address inconsistent `text-transform` inheritance for `button` and `select`.
- * All other form control elements do not inherit `text-transform` values.
- * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
- * Correct `select` style inheritance in Firefox.
- */
-button,
-select {
-  text-transform: none;
-}
-
-/**
- * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
- *    and `video` controls.
- * 2. Correct inability to style clickable `input` types in iOS.
- * 3. Improve usability and consistency of cursor style between image-type
- *    `input` and others.
- */
-button,
-html input[type="button"],
-input[type="reset"],
-input[type="submit"] {
-  -webkit-appearance: button;
-  /* 2 */
-  cursor: pointer;
-  /* 3 */
-}
-
-/**
- * Re-set default cursor for disabled elements.
- */
-button[disabled],
-html input[disabled] {
-  cursor: default;
-}
-
-/**
- * Remove inner padding and border in Firefox 4+.
- */
-button::-moz-focus-inner,
-input::-moz-focus-inner {
-  border: 0;
-  padding: 0;
-}
-
-/**
- * Address Firefox 4+ setting `line-height` on `input` using `!important` in
- * the UA stylesheet.
- */
-input {
-  line-height: normal;
-}
-
-/**
- * It's recommended that you don't attempt to style these elements.
- * Firefox's implementation doesn't respect box-sizing, padding, or width.
- *
- * 1. Address box sizing set to `content-box` in IE 8/9/10.
- * 2. Remove excess padding in IE 8/9/10.
- */
-input[type="checkbox"],
-input[type="radio"] {
-  box-sizing: border-box;
-  /* 1 */
-  padding: 0;
-  /* 2 */
-}
-
-/**
- * Fix the cursor style for Chrome's increment/decrement buttons. For certain
- * `font-size` values of the `input`, it causes the cursor style of the
- * decrement button to change from `default` to `text`.
- */
-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
-  height: auto;
-}
-
-/**
- * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
- * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
- *    (include `-moz` to future-proof).
- */
-input[type="search"] {
-  -webkit-appearance: textfield;
-  /* 1 */
-  /* 2 */
-  box-sizing: content-box;
-}
-
-/**
- * Remove inner padding and search cancel button in Safari and Chrome on OS X.
- * Safari (but not Chrome) clips the cancel button when the search input has
- * padding (and `textfield` appearance).
- */
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-/**
- * 1. Correct `color` not being inherited in IE 8/9/10/11.
- * 2. Remove padding so people aren't caught out if they zero out fieldsets.
- */
-legend {
-  border: 0;
-  /* 1 */
-  padding: 0;
-  /* 2 */
-}
-
-/**
- * Remove default vertical scrollbar in IE 8/9/10/11.
- */
-textarea {
-  overflow: auto;
-}
-
-/**
- * Don't inherit the `font-weight` (applied by a rule above).
- * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
- */
-optgroup {
-  font-weight: bold;
-}
-
-/* Tables
-   ========================================================================== */
-/**
- * Remove most spacing between table cells.
- */
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-td,
-th {
-  padding: 0;
-}
-
-/* Blockquote
-   ========================================================================== */
-blockquote {
-  margin: 0;
-}
-
-/**
-*
-* Global
-*
-**/
-*, *::before, *::after {
-  box-sizing: border-box;
-}
-
-html, body, button {
-  -webkit-font-smoothing: antialiased;
-  font-smoothing: antialiased;
-}
-
-body {
-  font-family: Helvetica, Arial, sans-serif;
-  font-size: 16px;
-  line-height: 1.6250em;
-  /* 26px */
-  font-weight: 300;
-  color: #404040;
-  position: relative;
-}
-body::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  width: 100%;
-  z-index: 9;
-  display: none;
-  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.15) 95%, rgba(0, 0, 0, 0.15) 100%);
-  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 95%, rgba(0, 0, 0, 0.15) 100%);
-  background-size: 100% 26px;
-}
-body.debug::after {
-  display: block;
-  pointer-events: none;
-}
-
-pre {
-  background: #f0f0f0;
-  padding: 13px;
-}
-
-.main-container {
-  box-sizing: content-box;
-  position: relative;
-  padding-left: 5%;
-  padding-right: 5%;
-  margin-left: auto;
-  margin-right: auto;
-}
-@media only screen and (min-width: 620px) {
-  .main-container {
-    padding-left: 4.8%;
-    padding-right: 4.8%;
-    max-width: 688px;
-  }
-}
-@media only screen and (min-width: 800px) {
-  .main-container {
-    padding-left: 4.4%;
-    padding-right: 4.4%;
-    max-width: 864px;
-  }
-}
-
-.container {
-  box-sizing: content-box;
-  position: relative;
-  padding-left: 5%;
-  padding-right: 5%;
-  margin-left: auto;
-  margin-right: auto;
-}
-@media only screen and (min-width: 620px) {
-  .container {
-    padding-left: 4.8%;
-    padding-right: 4.8%;
-    max-width: 688px;
-  }
-}
-@media only screen and (min-width: 800px) {
-  .container {
-    padding-left: 4.4%;
-    padding-right: 4.4%;
-    max-width: 864px;
-  }
-}
-
-@media only screen and (min-width: 620px) {
-  .container-medium {
-    box-sizing: content-box;
-    position: relative;
-    padding-left: 5%;
-    padding-right: 5%;
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
-@media only screen and (min-width: 620px) and (min-width: 620px) {
-  .container-medium {
-    padding-left: 4.8%;
-    padding-right: 4.8%;
-    max-width: 688px;
-  }
-}
-@media only screen and (min-width: 620px) and (min-width: 800px) {
-  .container-medium {
-    padding-left: 4.4%;
-    padding-right: 4.4%;
-    max-width: 864px;
-  }
-}
-
-@media only screen and (max-width: 619px) {
-  .container-small {
-    box-sizing: content-box;
-    position: relative;
-    padding-left: 5%;
-    padding-right: 5%;
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
-@media only screen and (max-width: 619px) and (min-width: 620px) {
-  .container-small {
-    padding-left: 4.8%;
-    padding-right: 4.8%;
-    max-width: 688px;
-  }
-}
-@media only screen and (max-width: 619px) and (min-width: 800px) {
-  .container-small {
-    padding-left: 4.4%;
-    padding-right: 4.4%;
-    max-width: 864px;
-  }
-}
-
-@media only screen and (min-width: 800px) {
-  .content {
-    margin-right: 25.9%;
-  }
-  .content pre {
-    margin-right: -25.9%;
-  }
-}
-
-@font-face {
-  font-family: "icons";
-  src: url("../../images/icons/icons.eot");
-  src: url("../../images/icons/icons.eot?#iefix") format("embedded-opentype"), url("../../images/icons/icons.woff2") format("woff2"), url("../../images/icons/icons.woff") format("woff"), url("../../images/icons/icons.ttf") format("truetype"), url("../../images/icons/icons.svg?#icons") format("svg");
-  font-weight: normal;
-  font-style: normal;
-}
-
-.icon {
-  font-family: "icons";
-  display: inline-block;
-  vertical-align: top;
-  line-height: 1;
-  font-weight: normal;
-  font-style: normal;
-  speak: none;
-  text-decoration: inherit;
-  text-transform: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.icon-bullet::before, ul li::before, ul.list-links a::before, .list-anchor a::before {
-  content: "\e001";
-}
-
-.icon-chevron-down::before {
-  content: "\e002";
-}
-
-.icon-chevron-large::before {
-  content: "\e003";
-}
-
-.icon-chevron-left::before, .article-nav-link--prev::before {
-  content: "\e004";
-}
-
-.icon-chevron-right::before, .article-nav-link--next::before, ul.list-links.list-links--primary a::before {
-  content: "\e005";
-}
-
-.icon-chevron-up::before {
-  content: "\e006";
-}
-
-.icon-close::before {
-  content: "\e007";
-}
-
-.icon-cog::before {
-  content: "\e008";
-}
-
-.icon-diamond::before {
-  content: "\e009";
-}
-
-.icon-exclamation::before {
-  content: "\e00a";
-}
-
-.icon-google-dev::before {
-  content: "\e00b";
-}
-
-.icon-hash::before {
-  content: "\e00c";
-}
-
-.icon-introduction-to-media::before {
-  content: "\e00d";
-}
-
-.icon-lessons::before {
-  content: "\e00e";
-}
-
-.icon-menu::before {
-  content: "\e00f";
-}
-
-.icon-minus::before {
-  content: "\e010";
-}
-
-.icon-multi-device-layouts::before {
-  content: "\e011";
-}
-
-.icon-performance::before {
-  content: "\e012";
-}
-
-.icon-plus::before {
-  content: "\e013";
-}
-
-.icon-question::before {
-  content: "\e014";
-}
-
-.icon-slash::before {
-  content: "\e015";
-}
-
-.icon-star::before {
-  content: "\e016";
-}
-
-.icon-tick::before {
-  content: "\e017";
-}
-
-.icon-user-input::before {
-  content: "\e018";
-}
-
-/**
-*
-* Material design color palettes.
-* @see http://www.google.com/design/spec/style/color.html
-*
-**/
-/* ==========  Blacks  ========== */
-/* ==========  Color Palettes  ========== */
-/* ==========  Color definitions  ========== */
-/**
-*
-* Highlight
-*
-**/
-.highlight-module {
-  overflow: hidden;
-  margin-top: 52px;
-  margin-bottom: 26px;
-  position: relative;
-}
-.highlight-module::after {
-  background: #f0f0f0;
-  content: "";
-  height: 100%;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  z-index: 0;
-  width: 100%;
-  right: 0;
-  left: 0;
-}
-.highlight-module ul,
-.highlight-module ol {
-  padding-left: 0;
-}
-
-.highlight-module__container {
-  box-sizing: content-box;
-  padding-left: 5%;
-  padding-right: 5%;
-  margin-left: auto;
-  margin-right: auto;
-  padding-bottom: 78px;
-  z-index: 1;
-  position: relative;
-}
-@media only screen and (min-width: 620px) {
-  .highlight-module__container {
-    padding-left: 4.8%;
-    padding-right: 4.8%;
-    max-width: 688px;
-  }
-}
-@media only screen and (min-width: 800px) {
-  .highlight-module__container {
-    padding-left: 4.4%;
-    padding-right: 4.4%;
-    max-width: 864px;
-  }
-}
-.highlight-module__container::before {
-  display: none;
-}
-@media only screen and (min-width: 620px) {
-  .highlight-module__container::before {
-    display: block;
-    position: absolute;
-    top: 106px;
-    right: 45px;
-    font-family: "icons";
-    font-size: 130px;
-    line-height: 1px;
-    text-align: center;
-    height: 100%;
-    width: 30.3%;
-    color: #ffffff;
-  }
-}
-.highlight-module--left .highlight-module__container::before {
-  right: auto;
-  left: 45px;
-}
-@media only screen and (min-width: 800px) {
-  .highlight-module__container::before {
-    top: 134px;
-    width: 22.2%;
-    font-size: 180px;
-  }
-  .highlight-module--large .highlight-module__container::before {
-    font-size: 430px;
-  }
-}
-@media only screen and (min-width: 620px) {
-  .highlight-module__container {
-    padding-bottom: 52px;
-  }
-}
-@media only screen and (min-width: 800px) {
-  .highlight-module__container {
-    min-height: 208px;
-  }
-}
-
-.highlight-module__title {
-  font-family: "Roboto Condensed", Helvetica, sans-serif;
-  font-size: 68px;
-  font-weight: 300;
-  line-height: 1.1471em;
-  /* 78px */
-  padding-top: 0.3824em;
-  padding-bottom: 0;
-  padding-top: 26px;
-}
-@media only screen and (min-width: 800px) {
-  .highlight-module__title {
-    font-family: "Roboto Condensed", Helvetica, sans-serif;
-    font-size: 110px;
-    font-weight: 300;
-    line-height: 1.19em;
-    /* 130px */
-    padding-top: 0.2364em;
-    padding-bottom: 0;
-  }
-}
-@media only screen and (min-width: 800px) {
-  .highlight-module__title {
-    font-family: "Roboto Condensed", Helvetica, sans-serif;
-    font-size: 42px;
-    font-weight: 300;
-    line-height: 1.2381em;
-    /* 52px */
-    padding-top: 0.6190em;
-    padding-bottom: 0;
-  }
-}
-@media only screen and (min-width: 800px) and (min-width: 800px) {
-  .highlight-module__title {
-    font-family: "Roboto Condensed", Helvetica, sans-serif;
-    font-size: 68px;
-    font-weight: 300;
-    line-height: 1.1471em;
-    /* 78px */
-    padding-top: 0.3824em;
-    padding-bottom: 0;
-  }
-}
-
-.highlight-module__cta {
-  display: block;
-}
-
-/*==========  LEARNING  ==========*/
-.highlight-module--learning {
-  color: #ffffff;
-}
-.highlight-module--learning::after {
-  background-color: #da2e75;
-}
-.highlight-module--learning a {
-  color: #ffffff;
-  text-decoration: underline;
-}
-
-/*==========  REMEMBER  ==========*/
-.highlight-module--remember {
-  color: #ffffff;
-}
-.highlight-module--remember::after {
-  background-color: #09829a;
-}
-.highlight-module--remember a {
-  color: #ffffff;
-  text-decoration: underline;
-}
-
-/*==========  CODE  ==========*/
-.highlight-module--code {
-  overflow: visible;
-  margin-bottom: 52px;
-}
-.highlight-module--code pre {
-  margin: 0;
-  padding-top: 26px;
-  font-size: 14px;
-  line-height: 26px;
-  padding-bottom: 0;
-  padding-left: 0;
-  padding-right: 0;
-}
-.highlight-module--code pre span {
-  margin: 0;
-  padding: 0;
-  display: inline-block;
-}
-.highlight-module--code code {
-  margin: 0;
-  padding: 0;
-  word-spacing: -2px;
-  display: block;
-}
-.highlight-module--code .highlight-module__container {
-  padding-bottom: 0;
-}
-.highlight-module--code .highlight-module__cta {
-  position: absolute;
-  bottom: -26px;
-}
-
-/*==========  LEFT  ==========*/
-@media only screen and (min-width: 800px) {
-  .highlight-module--left::after {
-    width: 80%;
-    right: 20%;
-  }
-}
-
-/*==========  RIGHT  ==========*/
-@media only screen and (min-width: 800px) {
-  .highlight-module--right::after {
-    width: 80%;
-    left: 20%;
-  }
-}
-@media only screen and (min-width: 800px) {
-  .highlight-module--right.highlight-module--code::after {
-    width: 100%;
-    left: 0;
-  }
-}
-
-/*==========  INLINE  ==========*/
-.highlight-module--inline {
-  color: #404040;
-  overflow: visible;
-  margin: 26px 0 0;
-}
-.highlight-module--inline .highlight-module__container {
-  padding-bottom: 0;
-}
-.highlight-module--inline .highlight-module__container::before {
-  display: none;
-}
-.highlight-module--inline .highlight-module__content {
-  border-color: #e0e0e0;
-  border-style: solid;
-  border-width: 1px;
-  border-left-width: 0;
-  border-right-width: 0;
-  margin-bottom: -2px;
-  padding: 0 0 26px;
-}
-.highlight-module--inline .highlight-module__title {
-  font-size: 20px;
-  font-weight: 300;
-  line-height: 1.3000em;
-  /* 26px */
-  padding-top: 1.3000em;
-  padding-bottom: 0;
-}
-@media only screen and (min-width: 800px) {
-  .highlight-module--inline .highlight-module__title {
-    font-family: "Roboto Condensed", Helvetica, sans-serif;
-    font-size: 26px;
-    font-weight: 300;
-    line-height: 1.0000em;
-    /* 26px */
-    padding-top: 1.0000em;
-    padding-bottom: 0;
-  }
-}
-.highlight-module--inline.highlight-module--remember .highlight-module__title, .highlight-module--inline.highlight-module--remember li::before {
-  color: #09829a;
-}
-.highlight-module--inline.highlight-module--learning .highlight-module__title, .highlight-module--inline.highlight-module--learning li::before {
-  color: #da2e75;
-}
-.highlight-module--inline::after {
-  display: none !important;
-}
-
-/*==========  COLORS  ==========*/
-div.highlight > pre > code, code .highlight {
-  background: transparent;
-}
-
-div.highlight > pre > code .c, code .highlight .c {
-  color: #999988;
-  font-style: italic;
-}
-
-/* Comment */
-div.highlight > pre > code .err, code .highlight .err {
-  color: #a61717;
-  background-color: #e3d2d2;
-}
-
-/* Error */
-/* Keyword */
-/* Operator */
-div.highlight > pre > code .cm, code .highlight .cm {
-  color: #999988;
-  font-style: italic;
-}
-
-/* Comment.Multiline */
-div.highlight > pre > code .cp, code .highlight .cp {
-  color: rgba(0, 0, 0, 0.54);
-}
-
-/* Comment.Preproc */
-div.highlight > pre > code .c1, code .highlight .c1 {
-  color: #999988;
-  font-style: italic;
-}
-
-/* Comment.Single */
-div.highlight > pre > code .cs, code .highlight .cs {
-  color: rgba(0, 0, 0, 0.54);
-  font-style: italic;
-}
-
-/* Comment.Special */
-div.highlight > pre > code .gs, code .highlight .gd {
-  color: #000000;
-  background-color: #ffdddd;
-}
-
-/* Generic.Deleted */
-div.highlight > pre > code .gd .x, code .highlight .gd .x {
-  color: #000000;
-  background-color: #ffaaaa;
-}
-
-/* Generic.Deleted.Specific */
-div.highlight > pre > code .ge, code .highlight .ge {
-  font-style: italic;
-}
-
-/* Generic.Emph */
-div.highlight > pre > code .gr, code .highlight .gr {
-  color: #aa0000;
-}
-
-/* Generic.Error */
-div.highlight > pre > code .gh, code .highlight .gh {
-  color: rgba(0, 0, 0, 0.54);
-}
-
-/* Generic.Heading */
-div.highlight > pre > code .gi, code .highlight .gi {
-  color: #000000;
-  background-color: #ddffdd;
-}
-
-/* Generic.Inserted */
-div.highlight > pre > code .gi .x, code .highlight .gi .x {
-  color: #000000;
-  background-color: #aaffaa;
-}
-
-/* Generic.Inserted.Specific */
-div.highlight > pre > code .go, code .highlight .go {
-  color: #888888;
-}
-
-/* Generic.Output */
-div.highlight > pre > code .gp, code .highlight .gp {
-  color: #555555;
-}
-
-/* Generic.Prompt */
-/* Generic.Strong */
-div.highlight > pre > code .gu, code .highlight .gu {
-  color: #aaaaaa;
-}
-
-/* Generic.Subheading */
-div.highlight > pre > code .gt, code .highlight .gt {
-  color: #aa0000;
-}
-
-/* Generic.Traceback */
-/* Keyword.Constant */
-/* Keyword.Declaration */
-/* Keyword.Pseudo */
-/* Keyword.Reserved */
-div.highlight > pre > code .kt, code .highlight .kt {
-  color: #445588;
-}
-
-/* Keyword.Type */
-div.highlight > pre > code .m, code .highlight .m {
-  color: #009999;
-}
-
-/* Literal.Number */
-div.highlight > pre > code .s, code .highlight .s {
-  color: #da2e75;
-}
-
-/* Literal.String */
-div.highlight > pre > code .na, code .highlight .na {
-  color: teal;
-}
-
-/* Name.Attribute */
-div.highlight > pre > code .nb, code .highlight .nb {
-  color: #0086b3;
-}
-
-/* Name.Builtin */
-div.highlight > pre > code .nc, code .highlight .nc {
-  color: #445588;
-}
-
-/* Name.Class */
-div.highlight > pre > code .no, code .highlight .no {
-  color: teal;
-}
-
-/* Name.Constant */
-div.highlight > pre > code .ni, code .highlight .ni {
-  color: purple;
-}
-
-/* Name.Entity */
-div.highlight > pre > code .ne, code .highlight .ne {
-  color: #990000;
-}
-
-/* Name.Exception */
-div.highlight > pre > code .nf, code .highlight .nf {
-  color: #990000;
-}
-
-/* Name.Function */
-div.highlight > pre > code .nn, code .highlight .nn {
-  color: #555555;
-}
-
-/* Name.Namespace */
-div.highlight > pre > code .nt, code .highlight .nt {
-  color: #09829a;
-}
-
-/* Name.Tag */
-div.highlight > pre > code .nv, code .highlight .nv {
-  color: teal;
-}
-
-/* Name.Variable */
-/* Operator.Word */
-div.highlight > pre > code .w, code .highlight .w {
-  color: #bbbbbb;
-}
-
-/* Text.Whitespace */
-div.highlight > pre > code .mf, code .highlight .mf {
-  color: #009999;
-}
-
-/* Literal.Number.Float */
-div.highlight > pre > code .mh, code .highlight .mh {
-  color: #009999;
-}
-
-/* Literal.Number.Hex */
-div.highlight > pre > code .mi, code .highlight .mi {
-  color: #009999;
-}
-
-/* Literal.Number.Integer */
-div.highlight > pre > code .mo, code .highlight .mo {
-  color: #009999;
-}
-
-/* Literal.Number.Oct */
-div.highlight > pre > code .sb, code .highlight .sb {
-  color: #da2e75;
-}
-
-/* Literal.String.Backtick */
-div.highlight > pre > code .sc, code .highlight .sc {
-  color: #da2e75;
-}
-
-/* Literal.String.Char */
-div.highlight > pre > code .sd, code .highlight .sd {
-  color: #da2e75;
-}
-
-/* Literal.String.Doc */
-div.highlight > pre > code .s2, code .highlight .s2 {
-  color: #da2e75;
-}
-
-/* Literal.String.Double */
-div.highlight > pre > code .se, code .highlight .se {
-  color: #da2e75;
-}
-
-/* Literal.String.Escape */
-div.highlight > pre > code .sh, code .highlight .sh {
-  color: #da2e75;
-}
-
-/* Literal.String.Heredoc */
-div.highlight > pre > code .si, code .highlight .si {
-  color: #da2e75;
-}
-
-/* Literal.String.Interpol */
-div.highlight > pre > code .sx, code .highlight .sx {
-  color: #da2e75;
-}
-
-/* Literal.String.Other */
-div.highlight > pre > code .sr, code .highlight .sr {
-  color: #009926;
-}
-
-/* Literal.String.Regex */
-div.highlight > pre > code .s1, code .highlight .s1 {
-  color: #da2e75;
-}
-
-/* Literal.String.Single */
-div.highlight > pre > code .ss, code .highlight .ss {
-  color: #990073;
-}
-
-/* Literal.String.Symbol */
-div.highlight > pre > code .bp, code .highlight .bp {
-  color: rgba(0, 0, 0, 0.54);
-}
-
-/* Name.Builtin.Pseudo */
-div.highlight > pre > code .vc, code .highlight .vc {
-  color: teal;
-}
-
-/* Name.Variable.Class */
-div.highlight > pre > code .vg, code .highlight .vg {
-  color: teal;
-}
-
-/* Name.Variable.Global */
-div.highlight > pre > code .vi, code .highlight .vi {
-  color: teal;
-}
-
-/* Name.Variable.Instance */
-div.highlight > pre > code .il, code .highlight .il {
-  color: #009999;
-}
-
-/* Literal.Number.Integer.Long */
-/**
-*
-* Editorial Header
-*
-**/
-.editorial-header {
-  overflow: hidden;
-}
-.editorial-header .breadcrumbs {
-  color: #3372df;
-}
-.editorial-header .breadcrumbs a {
-  color: #3372df;
-}
-@media only screen and (min-width: 620px) {
-  .editorial-header .container {
-    position: relative;
-  }
-  .editorial-header .container::before {
-    content: "\e003";
-    font-family: "icons";
-    font-size: 1000px;
-    line-height: 0;
-    display: block;
-    position: absolute;
-    top: 0;
-    right: 100%;
-    color: #f0f0f0;
-    margin: 168px -35px 0 0;
-  }
-}
-
-.editorial-header__excerpt {
-  font-size: 20px;
-  font-weight: 300;
-  line-height: 1.3000em;
-  /* 26px */
-  padding-top: 1.3000em;
-  padding-bottom: 0;
-  font-family: "Roboto Condensed", Helvetica, sans-serif;
-}
-
-.editorial-header .tag {
-  padding-top: 52px;
-}
-
-.editorial-header__subtitle {
-  font-family: "Roboto Condensed", Helvetica, sans-serif;
-  font-size: 42px;
-  font-weight: 300;
-  line-height: 1.2381em;
-  /* 52px */
-  padding-top: 0.6190em;
-  padding-bottom: 0;
-  padding-top: 0;
-  color: #3372df;
-}
-@media only screen and (min-width: 800px) {
-  .editorial-header__subtitle {
-    font-family: "Roboto Condensed", Helvetica, sans-serif;
-    font-size: 68px;
-    font-weight: 300;
-    line-height: 1.1471em;
-    /* 78px */
-    padding-top: 0.3824em;
-    padding-bottom: 0;
-  }
-}
-@media only screen and (min-width: 620px) {
-  .editorial-header__subtitle {
-    padding-top: 0;
-    padding-bottom: 26px;
-  }
-}
-
-.editorial-header__toc {
-  margin-top: 26px;
-}
-.editorial-header__toc ol {
-  padding-top: 0;
-}
-@media only screen and (min-width: 620px) {
-  .editorial-header__toc ol {
-    padding-top: 0;
-  }
-}
-
-.editorial-header__toc-title {
-  font-family: "Roboto Condensed", Helvetica, sans-serif;
-  border-bottom: 1px solid #e0e0e0;
-  margin-bottom: 13px;
-  padding-bottom: 13px !important;
-  color: #3372df;
-}
-
-/**
-*
-* Editorial Header
-*
-**/
-.summary-header {
-  background-color: #3372df;
-  padding-bottom: 78px;
-  color: #ffffff;
-  margin-bottom: 26px;
-  box-shadow: inset 0 2px 0 0 #fff;
-}
-.summary-header .breadcrumbs__link {
-  color: #ffffff;
-}
-
-.summary-header__anchor-list {
-  margin-top: 52px;
-}
-
-.summary-header__anchors-item a {
-  color: #ffffff;
-}
-
-/**
-*
-* Related items
-*
-**/
-.related-guides {
-  margin-top: 78px;
-  padding-bottom: 50px;
-  border-top: 2px solid #e0e0e0;
-  padding-top: 50px;
-}
-
-.related-guides__list .list-links {
-  padding-top: 0;
-}
-.related-guides__list a {
-  display: block;
-}
-
-.related-guides__title {
-  font-family: "Roboto Condensed", Helvetica, sans-serif;
-  font-size: 26px;
-  font-weight: 300;
-  line-height: 1.0000em;
-  /* 26px */
-  padding-top: 1.0000em;
-  padding-bottom: 0;
-  padding-top: 0;
-}
-@media only screen and (min-width: 800px) {
-  .related-guides__title {
-    font-family: "Roboto Condensed", Helvetica, sans-serif;
-    font-size: 42px;
-    font-weight: 300;
-    line-height: 1.2381em;
-    /* 52px */
-    padding-top: 0.6190em;
-    padding-bottom: 0;
-  }
-}
-@media only screen and (min-width: 620px) {
-  .related-guides__title {
-    padding-top: 0;
-  }
-}
-
-.related-guides__main-link {
-  text-transform: uppercase;
-}
-.related-guides__main-link::before {
-  content: "#";
-  display: inline-block;
-  padding-right: 2px;
-}
-
-/**
-*
-* In this guide
-*
-**/
-.in-this-guide {
-  margin-top: -78px;
-}
-
-.in-this-guide__title {
-  font-size: 20px;
-  font-weight: 300;
-  line-height: 1.3000em;
-  /* 26px */
-  padding-top: 1.3000em;
-  padding-bottom: 0;
-  font-family: "Roboto Condensed", Helvetica, sans-serif;
-  margin-bottom: 26px;
-}
-
-/**
-*
-* Articles section
-*
-**/
-.articles-section {
-  background: #f0f0f0;
-  text-align: center;
-  padding: 26px 0 104px;
-}
-
-.articles-count {
-  color: #3372df;
-  font-family: "Roboto Condensed", Helvetica, sans-serif;
-  font-weight: 400;
-}
-
-.article-section__icon {
-  top: -26px;
-}
-@media only screen and (min-width: 620px) {
-  .article-section__icon {
-    top: -39px;
-  }
-}
-
-.guides-section {
-  background: #f0f0f0;
-  text-align: center;
-  padding: 26px 0 104px;
-}
-
-/**
-*
-* Page header
-*
-**/
-.page-header {
-  text-align: center;
-}
-.page-header .breadcrumbs {
-  text-align: left;
-  color: #3372df;
-}
-.page-header .breadcrumbs a {
-  color: #3372df;
-}
-.page-header h3 {
-  color: rgba(0, 0, 0, 0.87);
-  padding-top: 52px;
-}
-
-.page-header__excerpt {
-  position: relative;
-  padding-top: 0;
-}
-.page-header__excerpt:last-child {
-  padding-bottom: 78px;
-}
-
-/**
-*
-* Editorial Header
-*
-**/
-.featured-section {
-  background: #f0f0f0;
-}
-
-/**
-*
-* Editorial Header
-*
-**/
-.featured-spotlight {
-  background: rgba(0, 0, 0, 0.87);
-  color: #ffffff;
-  overflow: hidden;
-  padding-bottom: 77px;
-  margin-top: 52px;
-}
-.featured-spotlight p {
-  padding-bottom: 26px;
-}
-.featured-spotlight .cta--primary {
-  color: #ffffff;
-}
-.featured-spotlight .cta--primary:hover {
-  color: #ffffff;
-}
-
-.featured-spotlight__container {
-  position: relative;
-}
-
-@media only screen and (max-width: 619px) {
-  .featured-spotlight__img {
-    padding-top: 58.4%;
-    padding-bottom: 0;
-    height: 0;
-    overflow: hidden;
-    position: relative;
-    width: 100%;
-  }
-}
-.featured-spotlight__img img {
-  margin: 0 auto;
-  display: block;
-  width: 100%;
-  position: absolute;
-  left: 0;
-  top: 0;
-  margin: 0;
-}
-@media only screen and (min-width: 620px) {
-  .featured-spotlight__img img {
-    width: auto;
-    max-width: none;
-    left: 109%;
-  }
-}
-@media only screen and (min-width: 800px) {
-  .featured-spotlight__img img {
-    left: 107.4%;
-  }
-}
-
-/**
-*
-* Quote
-*
-**/
-.quote__content {
-  position: relative;
-  font-family: "Roboto Condensed", Helvetica, sans-serif;
-  font-size: 16px;
-  line-height: 1.6250em;
-  /* 26px */
-  padding-top: 1.6250em;
-  padding-bottom: 0;
-  padding-top: 104px;
-  padding-left: 26px;
-}
-@media only screen and (min-width: 800px) {
-  .quote__content {
-    font-size: 20px;
-    font-weight: 300;
-    line-height: 1.3000em;
-    /* 26px */
-    padding-top: 1.3000em;
-    padding-bottom: 0;
-  }
-}
-@media only screen and (min-width: 620px) {
-  .quote__content {
-    padding-top: 52px;
-    padding-left: 0;
-  }
-}
-.quote__content p {
-  border-top: 1px solid #e0e0e0;
-  text-align: right;
-  font-weight: 500;
-  margin-top: 12px;
-  padding-top: 13px;
-}
-.quote__content::before {
-  content: open-quote;
-  display: block;
-  position: absolute;
-  font-family: "Roboto Condensed", Helvetica, sans-serif;
-  font-weight: 700;
-  color: #f0f0f0;
-  top: 90px;
-  left: 26px;
-  font-size: 260px;
-}
-@media only screen and (min-width: 620px) {
-  .quote__content::before {
-    top: 225px;
-    left: -210px;
-    font-size: 540px;
-  }
-}
-
-/**
-*
-* Article nav
-*
-**/
-.article-nav {
-  overflow: hidden;
-  position: relative;
-}
-.article-nav::before {
-  content: "";
-  border-left: 2px solid #e0e0e0;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 50%;
-}
-
-.article-nav-link {
-  padding: 26px 32px;
-  float: left;
-  width: 50%;
-  position: relative;
-}
-.article-nav-link::before {
-  position: absolute;
-  top: 21px;
-  font-family: "Roboto Condensed", Helvetica, sans-serif;
-  font-size: 20px;
-  font-weight: 400;
-}
-@media only screen and (min-width: 620px) {
-  .article-nav-link::before {
-    top: 25px;
-    font-size: 26px;
-    display: block;
-    padding: 13px 10px;
-    color: #ffffff;
-    background: #3372df;
-  }
-}
-
-.article-nav p {
-  padding: 0;
-  margin: 0;
-}
-
-.article-nav-link--prev {
-  text-align: right;
-}
-.article-nav-link--prev::before {
-  font-family: "icons";
-  left: 32px;
-}
-@media only screen and (min-width: 620px) {
-  .article-nav-link--prev p {
-    padding-left: 52px;
-  }
-}
-
-.article-nav-link--next::before {
-  font-family: "icons";
-  right: 32px;
-}
-@media only screen and (min-width: 620px) {
-  .article-nav-link--next p {
-    padding-right: 52px;
-  }
-}
-
-.article-nav-count {
-  font-size: 20px;
-  font-weight: 300;
-  line-height: 1.3000em;
-  /* 26px */
-  padding-top: 1.3000em;
-  padding-bottom: 0;
-  font-weight: 700;
-}
-@media only screen and (min-width: 800px) {
-  .article-nav-count {
-    font-family: "Roboto Condensed", Helvetica, sans-serif;
-    font-size: 26px;
-    font-weight: 300;
-    line-height: 1.0000em;
-    /* 26px */
-    padding-top: 1.0000em;
-    padding-bottom: 0;
-  }
-}
-@media only screen and (min-width: 620px) {
-  .article-nav-count {
-    font-weight: 400;
-  }
-}
-
-/**
-*
-* Text module
-*
-**/
-@media only screen and (min-width: 620px) {
-  .did-you-know ol {
-    padding-top: 0 !important;
-  }
-}
-.did-you-know .cta--primary {
-  margin-top: 26px;
-  font-weight: 500;
-}
-.did-you-know > .g--half {
-  position: relative;
-  padding-left: 0;
-}
-@media only screen and (min-width: 620px) {
-  .did-you-know > .g--half {
-    padding-left: 32px;
-  }
-}
-
-.did-you-know__symbol {
-  padding-bottom: 312px;
-}
-@media only screen and (min-width: 620px) {
-  .did-you-know__symbol {
-    padding-bottom: 26px;
-  }
-}
-.did-you-know__symbol::after {
-  content: "\e014";
-  color: #3372df;
-  font-family: "icons";
-  font-size: 300px;
-  top: 150px;
-  left: 30%;
-  position: relative;
-  display: block;
-  width: 0;
-}
-@media only screen and (min-width: 620px) {
-  .did-you-know__symbol::after {
-    position: absolute;
-    font-size: 400px;
-    top: 200px;
-    left: 110%;
-  }
-}
-@media only screen and (min-width: 800px) {
-  .did-you-know__symbol::after {
-    position: absolute;
-    font-size: 400px;
-    top: 200px;
-    left: 124%;
-  }
-}
-
-/**
-*
-* Table of contents
-*
-**/
-.toc__title {
-  font-size: 16px;
-  line-height: 1.6250em;
-  /* 26px */
-  padding-top: 1.6250em;
-  padding-bottom: 0;
-  font-family: "Roboto Condensed", Helvetica, sans-serif;
-  padding-bottom: 13px;
-  margin-bottom: 12px;
-  border-bottom: 1px solid #e0e0e0;
-}
-@media only screen and (min-width: 800px) {
-  .toc__title {
-    font-size: 20px;
-    font-weight: 300;
-    line-height: 1.3000em;
-    /* 26px */
-    padding-top: 1.3000em;
-    padding-bottom: 0;
-  }
-}
-@media only screen and (min-width: 620px) {
-  .toc__title {
-    padding-bottom: 13px;
-    margin-bottom: 13px;
-  }
-}
-
-.toc__list {
-  padding-top: 0;
-  border-bottom: 1px solid #e0e0e0;
-  padding-bottom: 12px;
-  margin-bottom: 13px;
-}
-.toc__list a {
-  display: block;
-}
-
-.toc__sublist {
-  padding-top: 0;
-}
-
-/**
-*
-* Next Lessons
-*
-**/
-.next-lessons {
-  background: rgba(0, 0, 0, 0.87);
-  padding: 26px 26px 52px;
-  margin-top: 26px;
-  color: #ffffff;
-  position: relative;
-}
-@media only screen and (min-width: 620px) {
-  .next-lessons h3 i {
-    display: none;
-  }
-}
-.next-lessons::before, .next-lessons::after {
-  color: rgba(255, 255, 255, 0.5);
-  position: absolute;
-  display: none;
-}
-@media only screen and (min-width: 620px) {
-  .next-lessons::before, .next-lessons::after {
-    display: inline-block;
-  }
-}
-@media only screen and (min-width: 620px) {
-  .next-lessons::before {
-    content: attr(data-current-lesson);
-    font-family: "Roboto Condensed", Helvetica, sans-serif;
-    font-size: 16px;
-    font-weight: 400;
-    line-height: 1;
-    background: rgba(0, 0, 0, 0.87);
-    display: inline-block;
-    padding: 5px 7px;
-    right: 127px;
-    top: 143px;
-    z-index: 1;
-    color: rgba(255, 255, 255, 0.5);
-  }
-}
-@media only screen and (min-width: 800px) {
-  .next-lessons::before {
-    font-size: 20px;
-    padding-left: 15px;
-    padding-right: 15px;
-    top: 126px;
-    right: 230px;
-  }
-}
-@media only screen and (min-width: 620px) {
-  .next-lessons::after {
-    content: "\e00e";
-    font-family: "icons";
-    font-size: 150px;
-    right: 40px;
-    top: 185px;
-  }
-}
-@media only screen and (min-width: 800px) {
-  .next-lessons::after {
-    font-size: 210px;
-    right: 120px;
-  }
-}
-
-/**
-*
-* Grid
-*
-**/
-@media only screen and (min-width: 620px) and (max-width: 799px) {
-  .g-medium--1 {
-    float: left;
-    margin-right: 4.5%;
-    width: 30.3%;
-  }
-
-  .g-medium--push-1 {
-    margin-left: 34.8%;
-  }
-
-  .g-medium--pull-1 {
-    margin-right: 34.8%;
-  }
-
-  .g-medium--2 {
-    float: left;
-    margin-right: 4.5%;
-    width: 65.1%;
-  }
-
-  .g-medium--push-2 {
-    margin-left: 69.6%;
-  }
-
-  .g-medium--pull-2 {
-    margin-right: 69.6%;
-  }
-
-  .g-medium--3 {
-    float: left;
-    margin-right: 4.5%;
-    width: 99.9%;
-    margin-right: 0;
-  }
-
-  .g-medium--full {
-    float: left;
-    margin-right: 4.5%;
-    margin-right: 0;
-    width: 100%;
-  }
-
-  .g--third {
-    float: left;
-    margin-right: 4.5%;
-    width: 30.3%;
-  }
-
-  .g--half,
-  .g-medium--half {
-    float: left;
-    margin-right: 4.5%;
-    width: 47.75%;
-  }
-
-  .g-medium--last {
-    margin-right: 0;
-  }
-
-  .g-medium--last + .g-medium--half {
-    clear: left;
-  }
-
-  .g--pull-half {
-    margin-right: 52.25%;
-  }
-}
-@media only screen and (min-width: 800px) {
-  .g-wide--1 {
-    float: left;
-    margin-right: 3.7%;
-    width: 22.2%;
-  }
-
-  .g-wide--push-1 {
-    margin-left: 25.9%;
-  }
-
-  .g-wide--pull-1 {
-    margin-right: 25.9%;
-  }
-
-  .g-wide--2 {
-    float: left;
-    margin-right: 3.7%;
-    width: 48.1%;
-  }
-
-  .g-wide--push-2 {
-    margin-left: 51.8%;
-  }
-
-  .g-wide--pull-2 {
-    margin-right: 51.8%;
-  }
-
-  .g-wide--3 {
-    float: left;
-    margin-right: 3.7%;
-    width: 74%;
-  }
-
-  .g-wide--push-3 {
-    margin-left: 77.7%;
-  }
-
-  .g-wide--pull-3 {
-    margin-right: 77.7%;
-  }
-
-  .g-wide--4 {
-    float: left;
-    margin-right: 3.7%;
-    width: 99.9%;
-    margin-right: 0;
-  }
-
-  .g-wide--last {
-    margin-right: 0;
-  }
-
-  .g-wide--full {
-    float: left;
-    margin-right: 3.7%;
-    margin-right: 0;
-    width: 100%;
-  }
-
-  .g--third {
-    float: left;
-    margin-right: 3.7%;
-    width: 30.8%;
-  }
-
-  .g--half,
-  .g-wide--half {
-    float: left;
-    margin-right: 3.7%;
-    width: 48.15%;
-  }
-
-  .g--pull-half {
-    margin-right: 51.85%;
-  }
-}
-.g--last {
-  margin-right: 0;
-}
-
-.g--centered {
-  float: none;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.grid-overlay {
-  display: none;
-  pointer-events: none;
-}
-.debug .grid-overlay {
-  box-sizing: content-box;
-  position: relative;
-  padding-left: 5%;
-  padding-right: 5%;
-  margin-left: auto;
-  margin-right: auto;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 100%;
-  display: block;
-}
-@media only screen and (min-width: 620px) {
-  .debug .grid-overlay {
-    padding-left: 4.8%;
-    padding-right: 4.8%;
-    max-width: 688px;
-  }
-}
-@media only screen and (min-width: 800px) {
-  .debug .grid-overlay {
-    padding-left: 4.4%;
-    padding-right: 4.4%;
-    max-width: 864px;
-  }
-}
-.debug .grid-overlay [class*="g-"] {
-  height: 100%;
-  background-color: rgba(89, 89, 89, 0.2);
-}
-@media only screen and (min-width: 620px) and (max-width: 799px) {
-  .debug .grid-overlay .g-wide--last {
-    display: none;
-  }
-}
-@media only screen and (max-width: 619px) {
-  .debug .grid-overlay {
-    display: none;
-  }
-}
-
-/**
-*
-* Typography
-*
-**/
-h1, h2, h3, h4, h5, p {
-  margin: 0;
-}
-
-.small,
-small {
-  font-size: 13px;
-  line-height: 2.0000em;
-  /* 26px */
-  padding-top: 2.0000em;
-  padding-bottom: 0;
-}
-
-.base,
-p,
-ul,
-ol {
-  font-size: 16px;
-  line-height: 1.6250em;
-  /* 26px */
-  padding-top: 1.6250em;
-  padding-bottom: 0;
-}
-
-.medium,
-h4 {
-  font-size: 16px;
-  line-height: 1.6250em;
-  /* 26px */
-  padding-top: 1.6250em;
-  padding-bottom: 0;
-}
-@media only screen and (min-width: 800px) {
-  .medium,
-  h4 {
-    font-size: 20px;
-    font-weight: 300;
-    line-height: 1.3000em;
-    /* 26px */
-    padding-top: 1.3000em;
-    padding-bottom: 0;
-  }
-}
-
-.large,
-h3 {
-  font-size: 20px;
-  font-weight: 300;
-  line-height: 1.3000em;
-  /* 26px */
-  padding-top: 1.3000em;
-  padding-bottom: 0;
-}
-@media only screen and (min-width: 800px) {
-  .large,
-  h3 {
-    font-family: "Roboto Condensed", Helvetica, sans-serif;
-    font-size: 26px;
-    font-weight: 300;
-    line-height: 1.0000em;
-    /* 26px */
-    padding-top: 1.0000em;
-    padding-bottom: 0;
-  }
-}
-
-.xlarge,
-h2 {
-  font-family: "Roboto Condensed", Helvetica, sans-serif;
-  font-size: 26px;
-  font-weight: 300;
-  line-height: 1.0000em;
-  /* 26px */
-  padding-top: 1.0000em;
-  padding-bottom: 0;
-}
-@media only screen and (min-width: 800px) {
-  .xlarge,
-  h2 {
-    font-family: "Roboto Condensed", Helvetica, sans-serif;
-    font-size: 42px;
-    font-weight: 300;
-    line-height: 1.2381em;
-    /* 52px */
-    padding-top: 0.6190em;
-    padding-bottom: 0;
-  }
-}
-
-.xxlarge,
-h1 {
-  font-family: "Roboto Condensed", Helvetica, sans-serif;
-  font-size: 42px;
-  font-weight: 300;
-  line-height: 1.2381em;
-  /* 52px */
-  padding-top: 0.6190em;
-  padding-bottom: 0;
-}
-@media only screen and (min-width: 800px) {
-  .xxlarge,
-  h1 {
-    font-family: "Roboto Condensed", Helvetica, sans-serif;
-    font-size: 68px;
-    font-weight: 300;
-    line-height: 1.1471em;
-    /* 78px */
-    padding-top: 0.3824em;
-    padding-bottom: 0;
-  }
-}
-
-.huge {
-  font-family: "Roboto Condensed", Helvetica, sans-serif;
-  font-size: 68px;
-  font-weight: 300;
-  line-height: 1.1471em;
-  /* 78px */
-  padding-top: 0.3824em;
-  padding-bottom: 0;
-}
-@media only screen and (min-width: 800px) {
-  .huge {
-    font-family: "Roboto Condensed", Helvetica, sans-serif;
-    font-size: 110px;
-    font-weight: 300;
-    line-height: 1.19em;
-    /* 130px */
-    padding-top: 0.2364em;
-    padding-bottom: 0;
-  }
-}
-
-li > p {
-  padding-top: 0;
-}
-
-/**
-*
-* Button
-*
-**/
-.button, .button--primary, .button--secondary, .button--secondary-variation {
-  display: inline-block;
-  padding: 12px 32px;
-  margin-bottom: 13px;
-  margin-top: 13px;
-  min-height: 26px;
-  text-align: center;
-  font-family: "Roboto Condensed", Helvetica, sans-serif;
-  font-weight: 600;
-  text-decoration: none;
-  outline: 0;
-  -webkit-transition: none;
-          transition: none;
-}
-.button:hover, .button--primary:hover, .button--secondary:hover, .button--secondary-variation:hover {
-  background: #4d4d4d;
-  color: #ffffff;
-  border: 1px solid #4d4d4d;
-  text-decoration: none;
-}
-
-.button--primary {
-  background: #4285f4;
-  color: white;
-  border: 1px solid #1266f1;
-}
-
-.button--secondary {
-  background: white;
-  color: #3372df;
-  border: 1px solid #e6e6e6;
-}
-
-.button--secondary-variation {
-  background: white;
-  color: #3372df;
-  border: 1px solid #e6e6e6;
-  border-color: transparent;
-}
-
-/**
-*
-* List
-*
-**/
-ul,
-ol {
-  list-style: none;
-  margin: 0;
-}
-@media only screen and (max-width: 619px) {
-  ul,
-  ol {
-    padding-left: 0;
-  }
-}
-
-ul li {
-  position: relative;
-  padding-left: 16px;
-}
-ul li::before {
-  font-family: "icons";
-  font-size: 13px;
-  display: block;
-  font-weight: 400;
-  position: absolute;
-  top: 0;
-  left: 0;
-  line-height: 26px;
-}
-ul li::before {
-  font-size: 4px;
-}
-
-ol {
-  counter-reset: list;
-}
-ol > li {
-  position: relative;
-  padding-left: 32px;
-}
-ol > li::before {
-  counter-increment: list;
-  content: "0" counter(list);
-  color: inherit;
-  font-weight: 400;
-  display: inline-block;
-  position: absolute;
-  left: 0;
-}
-ol > li:nth-child(10n) ~ li::before, ol > li:nth-child(10n)::before {
-  content: counter(list);
-}
-
-ul ol,
-ol ul {
-  padding-top: 0;
-}
-
-/*==========  LIST LINKS  ==========*/
-ul.list-links li::before {
-  display: none;
-}
-ul.list-links a {
-  font-weight: 400;
-}
-ul.list-links a::before {
-  font-family: "icons";
-  font-size: 13px;
-  display: block;
-  font-weight: 400;
-  position: absolute;
-  top: 0;
-  left: 0;
-  line-height: 26px;
-}
-ul.list-links a::before {
-  font-size: 4px;
-}
-ul.list-links.list-links--primary a {
-  font-weight: 400;
-  font-family: "Roboto Condensed", Helvetica, sans-serif;
-  line-height: 1;
-  text-decoration: none;
-}
-ul.list-links.list-links--primary a::before {
-  font-family: "icons";
-  font-size: 13px;
-  display: block;
-  font-weight: 400;
-  position: absolute;
-  top: 0;
-  left: 0;
-  line-height: 26px;
-}
-
-ol.list-links li::before {
-  display: none;
-}
-ol.list-links li a {
-  display: inline-block;
-  font-weight: 300;
-}
-ol.list-links li a::before {
-  counter-increment: list;
-  content: "0" counter(list);
-  color: inherit;
-  font-weight: 400;
-  display: inline-block;
-  position: absolute;
-  left: 0;
-}
-ol.list-links li:nth-child(10n) ~ li a::before, ol.list-links li:nth-child(10n) a::before {
-  content: counter(list);
-}
-ol.list-links.list-links--secondary a::before {
-  display: none;
-}
-
-.list-links--secondary {
-  font-size: 16px;
-  line-height: 1.6250em;
-  /* 26px */
-  padding-top: 1.6250em;
-  padding-bottom: 0;
-  padding-left: 0;
-}
-.list-links--secondary li {
-  padding-left: 0;
-}
-
-/*==========  ANCHOR LIST  ==========*/
-.list-anchor {
-  padding-left: 0;
-}
-.list-anchor li {
-  font-size: 16px;
-  line-height: 1.6250em;
-  /* 26px */
-  padding-top: 1.6250em;
-  padding-bottom: 0;
-  padding-top: 0;
-  padding-left: 0;
-}
-.list-anchor li::before {
-  display: none;
-}
-.list-anchor a {
-  line-height: 1;
-  display: inline-block;
-  padding-left: 16px;
-}
-.list-anchor a::before {
-  font-family: "icons";
-  font-size: 13px;
-  display: block;
-  font-weight: 400;
-  position: absolute;
-  top: 0;
-  left: 0;
-  line-height: 26px;
-}
-.list-anchor a::before {
-  font-size: 4px;
-}
-
-/*==========  SMALL LIST  ==========*/
-@media only screen and (min-width: 620px) {
-  .list-small li {
-    font-size: 13px;
-    line-height: 2.0000em;
-    /* 26px */
-    padding-top: 2.0000em;
-    padding-bottom: 0;
-    padding-top: 0;
-  }
-}
-
-/*==========  CENTERED LIST  ==========*/
-.list-centered {
-  text-align: center;
-  padding-left: 0;
-}
-
-/*==========  FEATURED LIST  ==========*/
-.featured-list {
-  padding-top: 78px;
-  padding-bottom: 78px;
-}
-
-.featured-list__item {
-  background: #ffffff;
-  padding-left: 0;
-  padding-top: 26px;
-  padding-bottom: 26px;
-  margin-top: 26px;
-}
-@media only screen and (min-width: 620px) {
-  .featured-list__item {
-    min-height: 338px;
-    padding: 52px 32px;
-  }
-}
-.featured-list__item:first-child {
-  margin-top: 0;
-}
-.featured-list__item p {
-  margin-bottom: 26px;
-}
-
-.featured-list__img-wrapper {
-  display: none;
-  position: relative;
-  padding-top: 26px;
-  margin: 0 -5%;
-}
-@media only screen and (min-width: 620px) {
-  .featured-list__img-wrapper {
-    display: block;
-    padding-top: 0;
-    margin: 0;
-  }
-}
-
-@media only screen and (min-width: 620px) {
-  .featured-list__img {
-    padding-top: 60.8%;
-    padding-bottom: 0;
-    height: 0;
-    overflow: hidden;
-    position: absolute;
-    width: 100%;
-  }
-}
-.featured-list__img img {
-  display: block;
-  margin: 0 auto;
-  max-width: 100%;
-}
-@media only screen and (min-width: 620px) {
-  .featured-list__img img {
-    margin: 0;
-    position: absolute;
-    top: 0;
-    height: 100%;
-    width: 100%;
-    left: 0;
-  }
-}
-
-/*==========  RELATED GUIDES LIST  ==========*/
-.related-guides-list {
-  font-family: "Roboto Condensed", Helvetica, sans-serif;
-  padding-top: 0;
-  padding-left: 0;
-}
-@media only screen and (min-width: 620px) {
-  .related-guides-list {
-    padding-top: 26px;
-  }
-}
-@media only screen and (min-width: 800px) {
-  .related-guides-list {
-    padding-top: 0;
-  }
-}
-.related-guides-list p {
-  padding-top: 0;
-}
-.related-guides-list .tag {
-  padding-top: 0;
-}
-.related-guides-list li {
-  padding-top: 26px;
-  padding-bottom: 25px;
-  border-bottom: 1px solid #e0e0e0;
-}
-.related-guides-list li:last-child {
-  border-color: transparent;
-}
-@media only screen and (min-width: 620px) {
-  .related-guides-list li {
-    padding-top: 0;
-    padding-bottom: 0;
-    border-color: transparent;
-  }
-}
-
-/*==========  LIST RESET  ==========*/
-.list--reset {
-  padding-left: 0;
-}
-.list--reset li {
-  padding-left: 0;
-}
-.list--reset.list-links a::before, .list--reset li::before {
-  display: none !important;
-}
-
-/*==========  LESSONS  ==========*/
-.list-lessons {
-  padding-left: 0;
-}
-.list-lessons a {
-  color: #ffffff;
-}
-.list-lessons .current,
-.list-lessons .current a {
-  text-decoration: none;
-  cursor: default;
-}
-.list-lessons .current .icon {
-  font-size: 13px;
-  display: inline-block;
-  background: rgba(0, 0, 0, 0.2);
-  border-radius: 100%;
-  width: 26px;
-  line-height: 26px;
-  text-align: center;
-  margin-left: 7px;
-}
-
-/*==========  GUIDES INTO - used on homepage  ==========*/
-.list-guides-intro {
-  margin-bottom: 52px;
-}
-@media only screen and (max-width: 619px) {
-  .list-guides-intro {
-    padding-top: 52px;
-  }
-}
-.list-guides-intro li {
-  border-bottom: 1px solid #e0e0e0;
-  padding-bottom: 51px;
-  margin-bottom: 52px;
-}
-@media only screen and (min-width: 620px) {
-  .list-guides-intro li {
-    border-color: transparent;
-    padding-bottom: 0;
-  }
-}
-.list-guides-intro li:last-child {
-  border-bottom: transparent;
-  margin-bottom: 0;
-}
-
-/**
-*
-* Link
-*
-**/
-a {
-  color: #3372df;
-}
-
-a:hover {
-  text-decoration: none;
-}
-
-.cta--primary {
-  font-family: "Roboto Condensed", Helvetica, sans-serif;
-  color: #3372df;
-  font-weight: 400;
-  display: inline-block;
-  line-height: 1;
-  text-decoration: none;
-}
-.cta--primary:hover {
-  color: rgba(0, 0, 0, 0.87);
-}
-.cta--primary::before {
-  display: inline-block;
-  padding-right: 10px;
-  font-family: "icons";
-  line-height: 25px;
-  font-size: 13px;
-  content: "\e005";
-}
-
-.cta--secondary {
-  font-family: "Roboto Condensed", Helvetica, sans-serif;
-  color: #3372df;
-  font-weight: 400;
-  display: inline-block;
-  line-height: 1;
-}
-.cta--secondary:hover {
-  color: rgba(0, 0, 0, 0.87);
-}
-
-/**
-*
-* Table
-*
-**/
-table {
-  margin-top: 26px;
-  width: 100%;
-}
-table thead {
-  background: #3372df;
-  color: #ffffff;
-}
-table th {
-  text-align: center;
-  display: none;
-  font-family: "Roboto Condensed", Helvetica, sans-serif;
-  font-size: 16px;
-  line-height: 1.6250em;
-  /* 26px */
-  padding-top: 1.6250em;
-  padding-bottom: 0;
-}
-@media only screen and (min-width: 800px) {
-  table th {
-    font-size: 20px;
-    font-weight: 300;
-    line-height: 1.3000em;
-    /* 26px */
-    padding-top: 1.3000em;
-    padding-bottom: 0;
-  }
-}
-@media only screen and (min-width: 620px) {
-  table tr {
-    border-bottom: 1px solid #ffffff;
-  }
-}
-table tbody {
-  background: #f0f0f0;
-}
-table td {
-  display: block;
-  padding-top: 13px;
-  padding-bottom: 13px;
-}
-table td::before {
-  content: attr(data-th) " :";
-  display: inline-block;
-  color: #ffffff;
-  background: #3372df;
-  border-right: 2px solid #ffffff;
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  width: 100px;
-  max-height: 100%;
-  font-family: "Roboto Condensed", Helvetica, sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  padding-left: 13px;
-  padding-top: 13px;
-}
-@media only screen and (min-width: 620px) {
-  table td::before {
-    display: none;
-  }
-}
-table th,
-table td {
-  position: relative;
-  padding-left: 140px;
-}
-@media only screen and (min-width: 620px) {
-  table th,
-  table td {
-    display: table-cell;
-  }
-}
-@media only screen and (min-width: 620px) {
-  table th {
-    padding: 26px;
-    padding-top: 13px;
-    padding-bottom: 12px;
-  }
-}
-@media only screen and (min-width: 620px) {
-  table td {
-    padding: 26px;
-    padding-bottom: 25px;
-  }
-}
-
-td:last-child::after {
-  content: "";
-  display: block;
-  background: #ffffff;
-  height: 1px;
-  left: 0;
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-}
-@media only screen and (min-width: 620px) {
-  td:last-child::after {
-    display: none;
-  }
-}
-
-.table-2 col {
-  width: 344px;
-}
-@media only screen and (min-width: 800px) {
-  .table-2 col {
-    width: 432px;
-  }
-}
-@media only screen and (min-width: 620px) {
-  .table-2 th:first-child,
-  .table-2 td:first-child {
-    border-right: 2px solid #ffffff;
-  }
-}
-
-.table-3 col {
-  width: 229.3333333333px;
-}
-@media only screen and (min-width: 800px) {
-  .table-3 col {
-    width: 288px;
-  }
-}
-@media only screen and (min-width: 620px) {
-  .table-3 th:nth-child(2),
-  .table-3 td:nth-child(2) {
-    border-left: 2px solid #ffffff;
-    border-right: 2px solid #ffffff;
-  }
-}
-
-.table-4 col {
-  width: 172px;
-}
-@media only screen and (min-width: 800px) {
-  .table-4 col {
-    width: 216px;
-  }
-}
-@media only screen and (min-width: 620px) {
-  .table-4 th:nth-child(2), .table-4 th:nth-child(3),
-  .table-4 td:nth-child(2),
-  .table-4 td:nth-child(3) {
-    border-left: 2px solid #ffffff;
-    border-right: 2px solid #ffffff;
-  }
-}
-
-/**
-*
-* Media - imgs/videos
-*
-**/
-img,
-video,
-object {
-  max-width: 100%;
-}
-
-.content img {
-  margin-top: 26px;
-  margin-bottom: 26px;
-}
-
-/**
-*
-* Breadcrumb
-*
-**/
-.breadcrumbs {
-  display: none;
-  position: relative;
-  z-index: 1;
-}
-@media only screen and (min-width: 620px) {
-  .breadcrumbs {
-    display: block;
-  }
-}
-
-.breadcrumbs p {
-  font-size: 13px;
-  line-height: 2.0000em;
-  /* 26px */
-  padding-top: 2.0000em;
-  padding-bottom: 0;
-  padding-top: 26px;
-}
-
-.breadcrumbs__link {
-  font-size: 13px;
-  line-height: 2.0000em;
-  /* 26px */
-  padding-top: 2.0000em;
-  padding-bottom: 0;
-  color: black;
-  font-weight: 400;
-  padding-top: 0;
-}
-@media only screen and (min-width: 620px) {
-  .breadcrumbs__link {
-    padding-top: 0;
-  }
-}
-
-/**
-*
-* subsection__title
-*
-**/
-.subsection-title {
-  color: rgba(0, 0, 0, 0.87);
-  margin-top: 52px;
-}
-
-.subsection-number {
-  font-size: 16px;
-  line-height: 1.6250em;
-  /* 26px */
-  padding-top: 1.6250em;
-  padding-bottom: 0;
-  padding-top: 0;
-  display: block;
-}
-
-/**
-*
-* Articles list
-*
-**/
-.articles-list {
-  padding-left: 0;
-}
-
-.articles-list__item {
-  padding-bottom: 52px;
-  padding-left: 0;
-}
-.articles-list__item:last-child {
-  padding-bottom: 53px;
-}
-.articles-list__item::before {
-  content: "";
-  display: block;
-  width: 40%;
-  height: 1px;
-  box-shadow: inset 0 1px 0 0 #e0e0e0;
-  margin-right: 0;
-  margin-left: 30%;
-}
-.articles-list__item h3 a:hover {
-  text-decoration: none;
-}
-.articles-list__item p {
-  margin-top: 26px;
-  margin-bottom: 26px;
-}
-.articles-list__item:first-child {
-  padding-top: 0;
-}
-@media only screen and (min-width: 620px) {
-  .articles-list__item:first-child {
-    padding-top: 24px;
-  }
-}
-.articles-list__item:first-child::before {
-  display: none;
-}
-
-/**
-*
-* Guides List
-*
-**/
-.guides-list {
-  overflow: hidden;
-}
-@media only screen and (min-width: 620px) {
-  .guides-list {
-    display: -webkit-flex;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-justify-content: space-between;
-        -ms-flex-pack: justify;
-            justify-content: space-between;
-    -webkit-flex-wrap: wrap;
-        -ms-flex-wrap: wrap;
-            flex-wrap: wrap;
-    padding-top: 52px;
-  }
-}
-
-.guides-list__item {
-  padding: 0;
-  background: #ffffff;
-  margin-top: 26px;
-  margin-bottom: 0;
-}
-@media only screen and (min-width: 620px) {
-  .guides-list__item {
-    display: -webkit-flex;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-flex-direction: column;
-        -ms-flex-direction: column;
-            flex-direction: column;
-    -webkit-flex-wrap: wrap;
-        -ms-flex-wrap: wrap;
-            flex-wrap: wrap;
-  }
-}
-.guides-list__item h3 {
-  margin: 0 32px;
-}
-.guides-list__item p {
-  margin: 26px 32px 0;
-}
-@media only screen and (min-width: 620px) {
-  .guides-list__item .primary-content {
-    -webkit-flex: 1;
-        -ms-flex: 1;
-            flex: 1;
-  }
-}
-.guides-list__item .secondary-content {
-  position: relative;
-  margin-top: 51px;
-  border-top: 1px solid #e0e0e0;
-}
-@media only screen and (min-width: 620px) {
-  .guides-list__item .secondary-content {
-    width: 100%;
-  }
-}
-.guides-list__item .secondary-content .icon-circle {
-  position: absolute;
-  top: -28px;
-  left: 50%;
-  margin-left: -21px;
-  border: 2px solid #ffffff;
-}
-.guides-list__item .secondary-content .icon-circle i {
-  font-size: 23px;
-}
-.guides-list__item ol {
-  margin: 26px 0 0;
-  padding: 52px 0 52px;
-  margin-top: 0;
-}
-.guides-list__item::before {
-  display: none;
-}
-
-/**
-*
-* Icon Circle
-*
-**/
-.icon-circle,
-.icon-circle--large {
-  height: 0;
-  width: 0;
-  background: rgba(0, 0, 0, 0.54);
-  display: block;
-  position: relative;
-  border-radius: 100%;
-  font-size: 0;
-  padding: 22px;
-  margin: 4px auto;
-}
-.icon-circle i,
-.icon-circle span,
-.icon-circle--large i,
-.icon-circle--large span {
-  position: absolute;
-  line-height: 0px;
-  top: 50%;
-  width: 100%;
-  left: 0;
-  text-align: center;
-  color: #ffffff;
-  font-size: 26px;
-}
-.icon-circle span,
-.icon-circle--large span {
-  font-family: "Roboto Condensed", Helvetica, sans-serif;
-  font-size: 26px;
-  font-weight: 700;
-}
-@media only screen and (min-width: 620px) {
-  .icon-circle span,
-  .icon-circle--large span {
-    font-size: 42px;
-  }
-}
-
-.icon-circle--large {
-  margin-top: 0;
-  margin-bottom: 0;
-  padding: 26px;
-  position: relative;
-}
-.icon-circle--large i {
-  font-size: 26px;
-}
-@media only screen and (min-width: 620px) {
-  .icon-circle--large i {
-    font-size: 42px;
-  }
-}
-@media only screen and (min-width: 620px) {
-  .icon-circle--large {
-    padding: 37px;
-    border: 2px solid #ffffff;
-  }
-  a .icon-circle--large {
-    padding: 38px;
-    box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.42);
-    border: 1px solid;
-    -webkit-transition: all 100ms linear;
-            transition: all 100ms linear;
-    -webkit-transform: translateZ(0);
-            transform: translateZ(0);
-  }
-  .no-touch a:hover .icon-circle--large {
-    box-shadow: inset 0px 0px 0px 1px #ffffff;
-    -webkit-transform: scale(1.1);
-            transform: scale(1.1);
-  }
-}
-
-.icon-circle--nav {
-  height: 0;
-  width: 0;
-  background: rgba(0, 0, 0, 0.54);
-  display: block;
-  position: relative;
-  border-radius: 100%;
-  font-size: 0;
-  padding: 13px;
-  margin: 0 auto;
-}
-@media only screen and (min-width: 620px) {
-  .icon-circle--nav {
-    padding: 22px;
-    margin-top: 4px;
-    margin-bottom: 4px;
-  }
-}
-.icon-circle--nav i {
-  position: absolute;
-  line-height: 1px;
-  top: 50%;
-  width: 100%;
-  left: 0;
-  text-align: center;
-  color: #ffffff;
-  font-size: 16px;
-}
-@media only screen and (min-width: 620px) {
-  .icon-circle--nav i {
-    font-size: 26px;
-  }
-}
-
-/**
-*
-* Themed styles
-*
-**/
-.theme--multi-device-layouts .themed {
-  color: #297ea9;
-}
-.theme--introduction-to-media .themed {
-  color: #cf423a;
-}
-.theme--user-input .themed {
-  color: #2c8566;
-}
-.theme--performance .themed {
-  color: #7b5294;
-}
-
-.theme--multi-device-layouts .themed--background, .theme--multi-device-layouts .themed--background.next-lessons::before {
-  background-color: #297ea9;
-}
-.theme--introduction-to-media .themed--background, .theme--introduction-to-media .themed--background.next-lessons::before {
-  background-color: #cf423a;
-}
-.theme--user-input .themed--background, .theme--user-input .themed--background.next-lessons::before {
-  background-color: #2c8566;
-}
-.theme--performance .themed--background, .theme--performance .themed--background.next-lessons::before {
-  background-color: #7b5294;
-}
-
-.theme--multi-device-layouts .themed--hover:hover {
-  color: #297ea9;
-}
-.theme--introduction-to-media .themed--hover:hover {
-  color: #cf423a;
-}
-.theme--user-input .themed--hover:hover {
-  color: #2c8566;
-}
-.theme--performance .themed--hover:hover {
-  color: #7b5294;
-}
-
-.theme--multi-device-layouts .themed--hover-secondary:hover {
-  color: #89c4e2;
-}
-.theme--introduction-to-media .themed--hover-secondary:hover {
-  color: #edb8b5;
-}
-.theme--user-input .themed--hover-secondary:hover {
-  color: #78d2b3;
-}
-.theme--performance .themed--hover-secondary:hover {
-  color: #c4add2;
-}
-
-.article--multi-device-layouts .article-container h1, .article--multi-device-layouts
-.article-container h2 {
-  color: #297ea9;
-}
-.article--introduction-to-media .article-container h1, .article--introduction-to-media
-.article-container h2 {
-  color: #cf423a;
-}
-.article--user-input .article-container h1, .article--user-input
-.article-container h2 {
-  color: #2c8566;
-}
-.article--performance .article-container h1, .article--performance
-.article-container h2 {
-  color: #7b5294;
-}
-
-.nav-theme--multi-device-layouts .themed--hover:hover {
-  color: #297ea9;
-}
-.nav-theme--introduction-to-media .themed--hover:hover {
-  color: #cf423a;
-}
-.nav-theme--user-input .themed--hover:hover {
-  color: #2c8566;
-}
-.nav-theme--performance .themed--hover:hover {
-  color: #7b5294;
-}
-
-.nav-theme--multi-device-layouts .themed {
-  color: #297ea9;
-}
-.nav-theme--introduction-to-media .themed {
-  color: #cf423a;
-}
-.nav-theme--user-input .themed {
-  color: #2c8566;
-}
-.nav-theme--performance .themed {
-  color: #7b5294;
-}
-
-.nav-theme--multi-device-layouts .themed--background {
-  background-color: #297ea9;
-}
-.nav-theme--introduction-to-media .themed--background {
-  background-color: #cf423a;
-}
-.nav-theme--user-input .themed--background {
-  background-color: #2c8566;
-}
-.nav-theme--performance .themed--background {
-  background-color: #7b5294;
-}
-
-/**
-*
-* Styleguide
-*
-**/
-.page--styleguide .styleguide__module-title {
-  margin-bottom: 26px;
-}
-.page--styleguide section {
-  margin-bottom: 52px;
-  border-bottom: 1px solid #ccc;
-  padding-bottom: 77px;
-}
-.page--styleguide .styleguide__color-list {
-  text-align: center;
-}
-.page--styleguide .styleguide__color-list li {
-  border-bottom: 52px solid;
-  margin-bottom: 26px;
-  position: relative;
-}
-.page--styleguide .styleguide__breadcrumb .breadcrumbs {
-  display: block;
-}
-.page--styleguide .styleguide__lists ul,
-.page--styleguide .styleguide__lists ol {
-  margin-bottom: 26px;
-}
-.page--styleguide .styleguide__inverted-block {
-  background: #e8e8e8;
-  padding: 0 13px;
-}
-.page--styleguide .styleguide__theme-block {
-  background: #297ea9;
-  padding: 0 13px;
-}
-
-.demo {
-  margin-bottom: 26px;
-  margin-top: 26px;
-}
-
-.demo [class*="g-"] {
-  background-color: rgba(0, 0, 0, 0.26);
-  position: relative;
-  margin-bottom: 26px;
-  min-height: 156px;
-}
-.demo [class*="g-"]::before, .demo [class*="g-"]::after {
-  font-size: 13px;
-  line-height: 2.0000em;
-  /* 26px */
-  padding-top: 2.0000em;
-  padding-bottom: 0;
-  display: block;
-  margin: 0 10px;
-}
-.demo [class*="g-"]::before {
-  content: "HTML classes: ";
-  font-weight: 700;
-}
-.demo [class*="g-"]::after {
-  content: attr(class);
-  word-spacing: 15px;
-}
-
-/**
-*
-* Resources page
-*
-**/
-.page--resources .article-section__icon, .page--resources .articles-count, .page--resources .guides-list__item .secondary-content {
-  display: none;
-}
-.page--resources .primary-content {
-  padding-top: 26px;
-  padding-bottom: 52px;
-}
-.page--resources .primary-content p {
-  margin-top: 0;
-}
-
-/**
-*
-* Helper
-*
-**/
-.clear::before, .clear::after {
-  content: "";
-  display: table;
-}
-.clear::after {
-  clear: both;
-}
-
-/*==========  COLORS  ==========*/
-.color--blue {
-  color: #3372df;
-}
-
-.color--red {
-  color: #cb4437;
-}
-
-.color--green {
-  color: #0f9d58;
-}
-
-.color--yellow {
-  color: #f4b400;
-}
-
-.color--blue-secondary {
-  color: #b7cdf4;
-}
-
-.color--red-secondary {
-  color: #ebb6b0;
-}
-
-.color--green-secondary {
-  color: #56efa5;
-}
-
-.color--yellow-secondary {
-  color: #ffd45b;
-}
-
-.color--gray-background {
-  color: #f0f0f0;
-}
-
-.color--gray-keyline {
-  color: #e0e0e0;
-}
-
-.color--gray {
-  color: rgba(0, 0, 0, 0.54);
-}
-
-.color--gray-dark {
-  color: rgba(0, 0, 0, 0.87);
-}
-
-.color--text {
-  color: #404040;
-}
-
-.color--highlight {
-  color: #3372df;
-}
-
-.color--warning {
-  color: #ffd45b;
-}
-
-.color--danger {
-  color: #cb4437;
-}
-
-.color--muted {
-  color: #737373;
-}
-
-.color--remember {
-  color: #09829a;
-}
-
-.color--learning {
-  color: #da2e75;
-}
-
-.color--layouts {
-  color: #297ea9;
-}
-
-.color--user {
-  color: #2c8566;
-}
-
-.color--media {
-  color: #cf423a;
-}
-
-.color--performance {
-  color: #7b5294;
-}
-
-.color--layouts-secondary {
-  color: #89c4e2;
-}
-
-.color--user-secondary {
-  color: #78d2b3;
-}
-
-.color--media-secondary {
-  color: #edb8b5;
-}
-
-.color--performance-secondary {
-  color: #c4add2;
-}
-
-/*==========  TEXT DIVIDER  ==========*/
-.text-divider {
-  position: relative;
-  margin-bottom: 26px;
-}
-.text-divider::after {
-  content: "";
-  display: block;
-  position: absolute;
-  width: 40%;
-  height: 1px;
-  box-shadow: 0 1px 0 0 #e0e0e0;
-  left: 30%;
-  bottom: -13px;
-}
-.text-divider.xlarge {
-  margin-bottom: 52px;
-}
-.text-divider.xlarge::after {
-  bottom: -26px;
-}
-.text-divider.xxlarge {
-  margin-bottom: 78px;
-}
-.text-divider.xxlarge::after {
-  bottom: -39px;
-}
-.text-divider.huge {
-  margin-bottom: 78px;
-}
-.text-divider.huge::after {
-  bottom: -39px;
-}
-
-/*==========  GENERIC  ==========*/
-.centered {
-  text-align: center;
-}
-
-/*==========  TAG  ==========*/
-.tag {
-  font-size: 13px;
-  line-height: 2.0000em;
-  /* 26px */
-  padding-top: 2.0000em;
-  padding-bottom: 0;
-  font-family: "Roboto Condensed", Helvetica, sans-serif;
-  text-transform: uppercase;
-  font-weight: 700;
-  display: inline-block;
-  text-decoration: none;
-}
-.tag:hover {
-  color: rgba(0, 0, 0, 0.87);
-}
-.tag::before {
-  content: "# ";
-  display: inline-block;
-}
diff --git a/app/styles/main.css b/app/styles/main.scss
similarity index 97%
rename from app/styles/main.css
rename to app/styles/main.scss
index 0b934352..81de2f06 100644
--- a/app/styles/main.css
+++ b/app/styles/main.scss
@@ -5,7 +5,13 @@
  * Web Starter Kit team.
  *
  */
+@import "_h5bp";
 
+/*
+ * Visual Style Guide styles
+ * Remove if you prefer to use a CSS library, like Bootstrap
+ */
+@import "components/components";
 
 html,
 body {
@@ -161,7 +167,7 @@ body.open {
 
 .navdrawer-container h4,
 .navdrawer-container ul li a {
-  height: auto;
+  height: 60px;
   padding: 17px 20px;
   line-height: 1.4;
 }
diff --git a/gulpfile.js b/gulpfile.js
index 79cae33e..50131a19 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -87,15 +87,16 @@ gulp.task('styles', function () {
       'app/styles/**/*.css',
       'app/styles/components/components.scss'
     ])
-    .pipe($.changed('.tmp/styles', {extension: '.css'}))
-    .pipe($.if('*.scss', $.rubySass({
-      style: 'expanded',
-      precision: 10
-    })
-    .on('error', console.error.bind(console))
-    ))
+    .pipe($.changed('styles', {extension: '.scss'}))
+    .pipe($.rubySass({
+        style: 'expanded',
+        precision: 10
+      })
+      .on('error', console.error.bind(console))
+    )
     .pipe($.autoprefixer(AUTOPREFIXER_BROWSERS))
     .pipe(gulp.dest('.tmp/styles'))
+    .pipe(gulp.dest('dist/styles'))
     .pipe($.size({title: 'styles'}));
 });
 
@@ -113,7 +114,7 @@ gulp.task('html', function () {
     .pipe($.if('*.css', $.uncss({
       html: [
         'app/index.html',
-        'app/styleguide/index.html'
+        'app/styleguide.html'
       ],
       // CSS Selectors for UnCSS to ignore
       ignore: [
