micahstubbs · June 14, 2016 23:05
diff --git a/.block b/.block
 license: CC0-1.0
diff --git a/components.css b/components.css
 /**
 *
 * 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 {
  -moz-osx-font-smoothing: grayscale;
  -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;
 }

 body {
  font-family: 'Ubuntu', sans-serif;
 }

 .summary-header {
  background: rgba(0, 0, 0, 0.87);
  color: white;
  border-bottom: 2px solid #e51c23;
  border-top: 2px solid #e51c23;
  box-shadow: none;
 }

 ol.list-links li a::before {
  color: #e51c23;
  font-weight: 500;
  content: counter(list);
  text-align: right;
  width: 20px;
 }

 ul li::before {
  color: #e51c23;
 }

 ol > li::before {
  color: #e51c23;
  font-weight: 500;
  content: counter(list);
  text-align: right;
  width: 20px;
 }

 a {
  color: #be0e0e;
 }

 .cta--primary {
  color: #be0e0e;
 }

 .cta--secondary {
  color: #be0e0e;
 }

 .article-nav-link::before {
  top: 25px;
  font-size: 26px;
  display: block;
  padding: 13px 10px;
  color: white;
  background: #b83232;
 }

 .list-lessons .current .icon {
  font-size: 13px;
  display: inline-block;
  background: rgba(236, 19, 19, 0.7);
  border-radius: 100%;
  width: 26px;
  line-height: 26px;
  text-align: center;
  margin-left: 7px;
 }

 table thead {
  background: #a19b9b;
  color: white;
 }

 .ubuntu {
  font-family: 'Ubuntu', sans-serif;
 }

 .roboto {
  font-family: 'Roboto', sans-serif;
 }

 .oswald {
  font-family: 'Oswald', sans-serif;
 }

 .cody {
  font-family: 'Codystar', sans-serif;
 }

 .tulpen {
  font-family: 'Tulpen One', sans-serif;
 }

 .expletus {
  font-family: 'Expletus Sans', sans-serif;
 }

 .huge {
  font-size: 40px;
 }

 .huge, .xxlarge, .xlarge {
  text-transform: uppercase;
 }

 .banner {
  background: rgba(0, 0, 0, 0.87);
  padding: 0.125em;
  padding-left: 0.25em;
  margin-left: -0.25em;
  color: #e3e3e3;
  margin-top: 0.5em;
 }

 .red {
  color: #e51c23;
 }

 .thick {
  font-weight: 500;
 }

 .thin {
  font-family: 'Roboto', sans-serif;
  font-style: normal;
  font-weight: 100;
  letter-spacing: -0.08em;
 }

 .button--primary {
  background: #cb4437;
  color: white;
  border: 1px solid #a4352b;
 }

 .button--secondary {
  background: white;
  color: #e51c23;
  border: 1px solid #e6e6e6;
 }

 .button--secondary-variation {
  background: white;
  color: #e51c23;
  border: 1px solid #e6e6e6;
  border-color: transparent;
 }

 /**
 *
 * 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/data.csv b/data.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <meta charset="utf-8">
 <link href='https://fonts.googleapis.com/css?family=Codystar:300,400|Ubuntu:300,400,500,700|Tulpen+One|Expletus+Sans:400,600,500,700|Roboto:500,900,100,300,700,400|Oswald:400,300,700' rel='stylesheet' type='text/css'>
 <link rel="stylesheet" href="components.css">
 <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">


 <!-- Example based on http://bl.ocks.org/mbostock/3887118 -->
 <!-- Tooltip example from http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html -->

 <style>

 body {
  font: 11px sans-serif;
 }

 .axis path,
 .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
 }

 .dot {
  stroke: #000;
 }

 .tooltip {
  position: absolute;
  width: 300px;
  height: 28px;
  pointer-events: none;
  background:white;
 }

 </style>
 <body>
 <div class="ui" id="ui-container">
  <!-- <h1 class="xlarge oswald">CMS Medicare data (FY 2011)</h1> -->

 </div>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.9.3/lodash.min.js"></script>
 <script src="https://d3js.org/d3.v3.min.js"></script>

 <script>
 var margin = {top: 20, right: 20, bottom: 30, left: 60},
    width = window.innerWidth*0.9 - margin.left - margin.right,
    height = window.innerHeight*0.9 - margin.top - margin.bottom;

 /* 
 * value accessor - returns the value to encode for a given data object.
 * scale - maps value to a visual display encoding, such as a pixel position.
 * map function - maps from data value to display value
 * axis - sets up axis
    d.AverageTotalPayments = +d.AverageTotalPayments;
    d.AveragedCoveredCharges = +d.AveragedCoveredCharges;
    d.TotalDischarges = +d.TotalDischarges;
 */ 

 var format = d3.format("$,.2f");

 // setup x 
 var xValue = function(d) { return d.AverageTotalPayments;}, // data -> value
    xScale = d3.scale.linear()
                     .range([0, width]), // value -> display

    xMap = function(d) { return xScale(xValue(d));}, // data -> display
    xAxis = d3.svg.axis().scale(xScale).orient("bottom");

 var areas = [];
 var data;
 // setup y
 var yValue = function(d) { return d["AveragedCoveredCharges"];}, // data -> value
    yScale = d3.scale.linear().range([height, 0]), // value -> display
    
    yMap = function(d) { return yScale(yValue(d));}, // data -> display
    yAxis = d3.svg.axis().scale(yScale).orient("left");

 // setup fill color
 var cValue = function(d) { return d.Name;},
    color = d3.scale.category20();

 // add the graph canvas to the body of the webpage
 var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

 // add the tooltip area to the webpage
 var tooltip = d3.select("body").append("div")
    .attr("class", "tooltip")
    .style("opacity", 0);

 // load data
 d3.csv("data.csv", function(error, _data) {

    data = _data;
    // change string (from CSV) into number format
      data.forEach(function(d) {
        d.AverageTotalPayments = +d.AverageTotalPayments;
        d.AveragedCoveredCharges = +d.AveragedCoveredCharges;
        d.TotalDischarges = +d.TotalDischarges;
    //  console.log(d);
  });

 areas.push("Choose a Diagnoses Related Group");

 data.forEach(function(link) {
    console.log(link);
    areas.push(link.DRG);
 });

 areas = _.uniq(areas);

 var selector = d3.select("#ui-container")
    .append("select")
    .attr("id", "branch-selector")
    .attr("class", "form-control")
    .selectAll("option")
    .data(areas)
    .enter().append("option")
    .text(function(d) { return d; })
    .attr("value", function (d, i) {
        return d;
    });

    d3.select("#branch-selector").property("selectedIndex", 0);
    d3.select("#branch-selector")
        .on("change", function(d) {
            index = this.value;
            update(index);
        })

  // don't want dots overlapping axis, so add in buffer to data domain
  xScale.domain([d3.min(data, xValue)-1, d3.max(data, xValue)+1]);
  yScale.domain([d3.min(data, yValue)-1, d3.max(data, yValue)+1]);

  // x-axis
  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
    .append("text")
      .attr("class", "label")
      .attr("x", width)
      .attr("y", -6)
      .style("text-anchor", "end")
      .text("Average Total Payments");

  // y-axis
  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("class", "label")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Average Charges Billed"); // Average Covered Charges


 function update(index){

  var subdata = [];
  
  data.forEach(function(d) {
    if(d.DRG == index){
      subdata.push(d);
    }
  });
  
  var dots = svg.selectAll(".dot")
        .data(subdata);
  
  dots.exit().remove();
  // draw dots

  // update the scales
  xScale.domain([d3.min(subdata, xValue)-1, d3.max(subdata, xValue)+1]);
  yScale.domain([d3.min(subdata, yValue)-1, d3.max(subdata, yValue)+1]);

  d3.selectAll(".x.axis")
    .transition().delay(400).ease('quad').duration(500)
    .call(xAxis);

  d3.selectAll(".y.axis")
    .transition().delay(400).ease('cubic').duration(500)
    .call(yAxis);
  
  dots.enter().append("circle")
      .attr({
          'r': 5,
          'cx': width/2,
          'cy': height/2,
          'opacity': 0,
          "class": "dot"
      })

  dots.transition()
      .delay(function (d,i){ return 700 + (i * 30);}).ease('quad').duration(500)
      .attr("r", function(d){ return d.TotalDischarges*0.1;  })
      .attr("cx", xMap)
      .attr("cy", yMap)
      .style("fill", function(d) { return color(cValue(d));}) 
      .style("opacity", 0.7)
      .attr("stroke-width", 0)
     
  dots.on("mouseover", function(d) {
          tooltip.transition()
               .duration(200)
               .style("opacity", .9);
          tooltip.html(d["Name"] + "<br/>" + "billed " + format(yValue(d)) + ", " + "paid " +  format(xValue(d)) + "<br/>" + d.TotalDischarges + " total discharges")
               .style("left", (d3.event.pageX + 15) + "px")
               .style("top", (d3.event.pageY - 45) + "px");
      })
      .on("mouseout", function(d) {
          tooltip.transition()
               .duration(500)
               .style("opacity", 0);
      }); 

 }
 });

 </script>
 </body>
 </html>
diff --git a/thumbnail.png b/thumbnail.png
	<!DOCTYPE html>
	<html>
	<meta charset="utf-8">
	<link href='https://fonts.googleapis.com/css?family=Codystar:300,400\|Ubuntu:300,400,500,700\|Tulpen+One\|Expletus+Sans:400,600,500,700\|Roboto:500,900,100,300,700,400\|Oswald:400,300,700' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="components.css">
	<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">


	<!-- Example based on http://bl.ocks.org/mbostock/3887118 -->
	<!-- Tooltip example from http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html -->

	<style>

	body {
	font: 11px sans-serif;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	.dot {
	stroke: #000;
	}

	.tooltip {
	position: absolute;
	width: 300px;
	height: 28px;
	pointer-events: none;
	background:white;
	}

	</style>
	<body>
	<div class="ui" id="ui-container">
	<!-- <h1 class="xlarge oswald">CMS Medicare data (FY 2011)</h1> -->

	</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.9.3/lodash.min.js"></script>
	<script src="https://d3js.org/d3.v3.min.js"></script>

	<script>
	var margin = {top: 20, right: 20, bottom: 30, left: 60},
	width = window.innerWidth*0.9 - margin.left - margin.right,
	height = window.innerHeight*0.9 - margin.top - margin.bottom;

	/*
	* value accessor - returns the value to encode for a given data object.
	* scale - maps value to a visual display encoding, such as a pixel position.
	* map function - maps from data value to display value
	* axis - sets up axis
	d.AverageTotalPayments = +d.AverageTotalPayments;
	d.AveragedCoveredCharges = +d.AveragedCoveredCharges;
	d.TotalDischarges = +d.TotalDischarges;
	*/

	var format = d3.format("$,.2f");

	// setup x
	var xValue = function(d) { return d.AverageTotalPayments;}, // data -> value
	xScale = d3.scale.linear()
	.range([0, width]), // value -> display

	xMap = function(d) { return xScale(xValue(d));}, // data -> display
	xAxis = d3.svg.axis().scale(xScale).orient("bottom");

	var areas = [];
	var data;
	// setup y
	var yValue = function(d) { return d["AveragedCoveredCharges"];}, // data -> value
	yScale = d3.scale.linear().range([height, 0]), // value -> display

	yMap = function(d) { return yScale(yValue(d));}, // data -> display
	yAxis = d3.svg.axis().scale(yScale).orient("left");

	// setup fill color
	var cValue = function(d) { return d.Name;},
	color = d3.scale.category20();

	// add the graph canvas to the body of the webpage
	var svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	// add the tooltip area to the webpage
	var tooltip = d3.select("body").append("div")
	.attr("class", "tooltip")
	.style("opacity", 0);

	// load data
	d3.csv("data.csv", function(error, _data) {

	data = _data;
	// change string (from CSV) into number format
	data.forEach(function(d) {
	d.AverageTotalPayments = +d.AverageTotalPayments;
	d.AveragedCoveredCharges = +d.AveragedCoveredCharges;
	d.TotalDischarges = +d.TotalDischarges;
	// console.log(d);
	});

	areas.push("Choose a Diagnoses Related Group");

	data.forEach(function(link) {
	console.log(link);
	areas.push(link.DRG);
	});

	areas = _.uniq(areas);

	var selector = d3.select("#ui-container")
	.append("select")
	.attr("id", "branch-selector")
	.attr("class", "form-control")
	.selectAll("option")
	.data(areas)
	.enter().append("option")
	.text(function(d) { return d; })
	.attr("value", function (d, i) {
	return d;
	});

	d3.select("#branch-selector").property("selectedIndex", 0);
	d3.select("#branch-selector")
	.on("change", function(d) {
	index = this.value;
	update(index);
	})

	// don't want dots overlapping axis, so add in buffer to data domain
	xScale.domain([d3.min(data, xValue)-1, d3.max(data, xValue)+1]);
	yScale.domain([d3.min(data, yValue)-1, d3.max(data, yValue)+1]);

	// x-axis
	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis)
	.append("text")
	.attr("class", "label")
	.attr("x", width)
	.attr("y", -6)
	.style("text-anchor", "end")
	.text("Average Total Payments");

	// y-axis
	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis)
	.append("text")
	.attr("class", "label")
	.attr("transform", "rotate(-90)")
	.attr("y", 6)
	.attr("dy", ".71em")
	.style("text-anchor", "end")
	.text("Average Charges Billed"); // Average Covered Charges


	function update(index){

	var subdata = [];

	data.forEach(function(d) {
	if(d.DRG == index){
	subdata.push(d);
	}
	});

	var dots = svg.selectAll(".dot")
	.data(subdata);

	dots.exit().remove();
	// draw dots

	// update the scales
	xScale.domain([d3.min(subdata, xValue)-1, d3.max(subdata, xValue)+1]);
	yScale.domain([d3.min(subdata, yValue)-1, d3.max(subdata, yValue)+1]);

	d3.selectAll(".x.axis")
	.transition().delay(400).ease('quad').duration(500)
	.call(xAxis);

	d3.selectAll(".y.axis")
	.transition().delay(400).ease('cubic').duration(500)
	.call(yAxis);

	dots.enter().append("circle")
	.attr({
	'r': 5,
	'cx': width/2,
	'cy': height/2,
	'opacity': 0,
	"class": "dot"
	})

	dots.transition()
	.delay(function (d,i){ return 700 + (i * 30);}).ease('quad').duration(500)
	.attr("r", function(d){ return d.TotalDischarges*0.1; })
	.attr("cx", xMap)
	.attr("cy", yMap)
	.style("fill", function(d) { return color(cValue(d));})
	.style("opacity", 0.7)
	.attr("stroke-width", 0)

	dots.on("mouseover", function(d) {
	tooltip.transition()
	.duration(200)
	.style("opacity", .9);
	tooltip.html(d["Name"] + "<br/>" + "billed " + format(yValue(d)) + ", " + "paid " + format(xValue(d)) + "<br/>" + d.TotalDischarges + " total discharges")
	.style("left", (d3.event.pageX + 15) + "px")
	.style("top", (d3.event.pageY - 45) + "px");
	})
	.on("mouseout", function(d) {
	tooltip.transition()
	.duration(500)
	.style("opacity", 0);
	});

	}
	});

	</script>
	</body>
	</html>