From 33d92a7ba07f53f54848b2b7e2ec5990e80b137e Mon Sep 17 00:00:00 2001
From: Yvonne Tang <ytang2@stanford.edu>
Date: Tue, 5 Mar 2019 16:22:03 -0800
Subject: [PATCH] 72 main nav (#264)

* 72: first pass of setting up main nav

* fixup! wip.

* fixup! wip.

* Sticky footer mixin.

* Sticky footer mixin.

* 72: fixup

* Update core/scss/utilities/mixins/layout/_sticky-footer.scss

Co-Authored-By: sherakama <sherakama@gmail.com>

* Update core/scss/utilities/mixins/layout/_sticky-footer.scss

Co-Authored-By: sherakama <sherakama@gmail.com>

* Update core/scss/utilities/mixins/layout/_sticky-footer.scss

Co-Authored-By: sherakama <sherakama@gmail.com>

* New grid stuff.

* Sort of refactored.

* Layout - Bricks

* Layout - Basic

* Layout - Battleship.

* 72: put fancy-hover into own mixin file

* Layout - Blastila.

* Layout - Frogger.

* Layout - Pacman.

* Layout - Plakes.

* Layout - Wedge.

* Remove three-column layout from Richard.

* More 2 column layouts.

* Layout - Sunset Delorean.

* Layout - Valmer.

* Refactored Flex Grid with Helpers.

* fixup! wip.

* 72: WIP before vacation

* @mixin sticky-footer now accepts the footer's selector as a parameter

* make styleguide's footer be sticky

* if the brand bar is position:fixed then we really need padding to accommodate it

* fixup! wip.

* grid and breakpoint updates WIP

* Sticky footer and template updates.

* More documentation and comments.

* clean up

* added new modular spacing for 2xl

* Update _alert.scss

* new flex grid approach WIP

* grid column calculation update

* fixup! wip.

* fixup! wip.

* fixup! wip.

* Responsive gutters on flex columns.

* Layout names.

* fixup! wip.

* Grid mixin-a-fied the lockup.

* Solidify layout names.

* 72: WIP

* Update _sticky-footer.scss

* Fix centered column alignment.

* Updates.

* Conditional regions.

* Added type checking and a slightly different parameter to grid-gap.

* 72: WIP with js test

* wip with kss theme.

* 72: WIP and fix CTA icon link

* comment and general cleanup and additions

* 72: WIP

* Refactor KSS theme scss.

* Sort of working new theme.

* More KSS theme tweaks.

* More KSS theme tweaks.

* More KSS theme tweaks.

* Removed debug.

* Update _modular-spacing-get-value.scss

* breakpoints functions folder

* link variants for button options

* rm unstyled button

* empty line CC FIXUP

* CC FIXUP

* CC FIXUP

* 72: clean up and use new grid-media mixin

* Added more documentation.

* worked string comments into kss

* layout FIXUP

* minor layout comment FIXUPs

* wip!.

* Fixers to autoprefixer and updates for IE 11 compatibility.

* More IE Fixes.

* More IE Fixes.

* More IE Fixes.

* More IE Fixes.

* More IE Fixes.

* Update core/scss/components/lockup/_lockup.scss

Co-Authored-By: sherakama <sherakama@gmail.com>

* flexbox layouts for 1col 2col 4col and fw ; 3col to come

* Flex grid behaviour.

* Flex grid behaviour.

* Flex grid behaviour fixes.

* Flex grid behaviour fixes.

* Auto IE fix for lockup to false.

* Fix for repsonsive colors section.

* updated flex grid demo

* fw 1col 2col and 4col FIXUP and intro of 3col layouts with new flexbox and gutters WIP

* Resolve duplicate twig file name issue by md5 hashing template path and name.

* Update template file names.

* Update template file names.

* Updated blastilla right grid scss.

* Updated blastilla right grid scss.

* Flexbox layouts

* Updated NPM packages and fixed dupe template issue.

* --no-outter-gutter class for flex container

* sr-only FIXUP and rm padding class for flex items

* IE11: Fixes for grid gap.

* More IE fixes.

* Remove margin on flex grid display of KSS.

* wip! flex grid padding rething in progress.

* Flex grid margin gap fixes.

* flex container grid row gap.

* Flex grid vertical rows to bottom only.

* Flex grid vertical rows molive and blastila.

* Added menu toggle button functionality and aria attributes changes; remove 3rd level menu code for now

* Added some documentation to layouts section.

* Code climate fixes.

* Change URL on developer resources main nav item to go to wiki page.

* 72: remove aria roles

* Update core/scss/utilities/variables/core/_gutter.scss

Co-Authored-By: josephgknox <jgknox@stanford.edu>

* Update core/scss/utilities/variables/core/_gutter.scss

Co-Authored-By: josephgknox <jgknox@stanford.edu>

* Update core/scss/utilities/variables/core/_gutter.scss

Co-Authored-By: josephgknox <jgknox@stanford.edu>

* Update core/scss/utilities/variables/core/_gutter.scss

Co-Authored-By: josephgknox <jgknox@stanford.edu>

* Update core/scss/utilities/variables/core/_gutter.scss

Co-Authored-By: josephgknox <jgknox@stanford.edu>

* Update core/scss/utilities/variables/core/_gutter.scss

Co-Authored-By: josephgknox <jgknox@stanford.edu>

* Update core/scss/utilities/variables/core/_gutter.scss

Co-Authored-By: sherakama <sherakama@gmail.com>

* Update core/scss/utilities/variables/core/_gutter.scss

Co-Authored-By: sherakama <sherakama@gmail.com>

* Update core/scss/utilities/variables/core/_gutter.scss

Co-Authored-By: sherakama <sherakama@gmail.com>

* Update core/scss/utilities/variables/core/_gutter.scss

Co-Authored-By: sherakama <sherakama@gmail.com>

* Update core/templates/layout/flex/four-column/molive/molive.twig

Co-Authored-By: sherakama <sherakama@gmail.com>

* nom install

* Update core/scss/utilities/variables/core/_grid.scss

Co-Authored-By: sherakama <sherakama@gmail.com>

* 72: refactor fancy-hover; fixup

* 72: fixup

* 72: js WIP

* 72: js WIP

* 72: js WIP add arrows infinite cycling

* 72: js clean up and refactor with ES6 syntax

* 72: js WIP

* 72: js WIP add keydown listeners depending on where current focus is

* 72: add template debounce function for window resize ends for setting menu toggle aria expanded to false if ends on desktop breakpoint

* 72: IE style fixes

* 72: js WIP

* 72: fixup

* 72: clean up if/else statements

* 72: js fixup

* 72: Add aria-expanded on triggering parent links

* 72: pull menu toggle button out of <nav> in anticipation for when search bar will be added to the expanded section (but not inside <nav>)

* 72: refactor css to respond to --expanded class instead of aria-expanded since that's no longer in the li

* 72: WIP variant with site search on mobile; still need further tweak for multiple instances of main nav

* 72: add light theme

* 72: change twig logic and z-index, svg

* refactor main-nav twig to use structured

* 72: WIP multiple instances

* 72: remove li classes and make li modifiers non-level specific; refactored CSS

* 72: WIP css refactor

* 72: add twig whitespace trimming

* 72: WIP css cleanup and change kss brand bar z-index

* 72: refactor fancy-hover to include options for positions and border thickness

* 72: css cleanup and twig whitespace trimming

* 72: accessibility color/font weight change

* 72: nav color change and add outline back for a:focus

* refactor js

* add additional nav options to styleguid

* change the mobile toggle text in the styleguide

* only search the DOM for the top level nav once in the constructor;
tidy up the code a wee bit

* 72: fixup

* if a subnav item is current, it's parent nav item should also be current

* move ESC key handling from NavItem to Nav; make ESC close one level at a time

* 72: begin cc fixes

* 72: more cc fixes

* Nav doesn't need a depth property;
rename topLevelNav as topNav;
add Nav.getParentNav()

* fix behavior of right & left arrows on desktop

* 72: first batch fixup

* 72: more fixup

* 72: fix transitions

* 72: fixup

* 72: did iterable variable check in twig

* fix issue with tab always closing last subnav, even if not on the last item in the subnav

* close the subnav if Shift+Tab on the first item in subnav

* 72: Add styling for parent li with active children

* 72: add margin on left side of main nav for styleguide full screen mode (LG breakpoint and up)

* don't preventDefault() on clicks on subnav items (!)

* allow specifying arbitrary attributes on nav links

* no need to test if list_items is not empty - just throw an error in that case

* 72: modify click behavior so when submenu is open, it doesn't focus on 1st item (only for keyboard users); js spacing tweaks; refactored some em values because of new base font sizes

* Update core/js/decanter.js

Co-Authored-By: yvonnetangsu <ytang2@stanford.edu>

* 72: add enter/spacebar key behavior; more em value refactoring

* 72: desktop CSS fix to accommodate new click behavior; set nav display to block

* 72: more CSS refactor due to different click/keyboard behavior; cleanup

* 72: button styles

* add lots of JSDoc; rewrite one line helper methods as arrow functions

* remove TODO comment

* Enabled ESLint

* Enabled ESLint. Removed filter.

* Enabled ES6 syntax in eslintrc.

* Added to ignore list.

* Added max-len to lintrc

* render nav fully expanded on desktop when no JS - UGLY!!!

* 72: fix error with removing 'no-js'

* 72: when no js, submenu on desktop expands on hover, expand all submenus on mobile; fix multiple main nav z-index in styleguide for no-js

* 72: small fix with z-index in kss scss

* 72: make submenu a bit narrower; give styleguide right-align variant right margin so submenu doesn't get covered up when expanded

* 72: svg and minor css fixup

* Firefox doesn't like arrow functions as class methods

* 72: add toggle modifier classes to center and right align hamburger button

* fix Firefox tab issue

* 72: cc fix

* Removed uglification.

* Removed uglification.

* fixup! cc.

* fixup! cc.

* fixup! cc.

* fixup! cc.

* fixup! cc.

* fixup! cc.

* fixup! cc.

* fixup! cc.

* fixup! cc.

* fixup! cc.

* fixup! cc.

* Update main-nav.twig

* Update main-nav.twig
---
 .codeclimate.yml                              |   6 +-
 .eslintrc                                     |  28 +-
 Gruntfile.js                                  |  15 +-
 core/css/decanter.css                         | 490 ++++++++++-
 core/img/caret-down-black.png                 | Bin 0 -> 293 bytes
 core/img/caret-down-black.svg                 |   3 +
 core/img/caret-down-white.svg                 |   1 +
 core/img/close-black.svg                      |   1 +
 core/img/hamburger-black.svg                  |   5 +
 core/img/minus-black.svg                      |   9 +
 core/img/minus-white.png                      | Bin 0 -> 149 bytes
 core/img/minus-white.svg                      |   9 +
 core/img/plus-black.svg                       |   1 +
 core/img/plus-white.png                       | Bin 0 -> 176 bytes
 core/img/plus-white.svg                       |   3 +
 core/js/decanter.js                           | 776 +++++++++++++++++-
 core/js/decanter.min.js                       |   0
 core/scss/components/index.scss               |   1 +
 .../main-nav/_main-nav--center.scss           |   7 +
 .../components/main-nav/_main-nav--light.scss | 185 +++++
 .../main-nav/_main-nav--mobile-search.scss    |  35 +
 .../components/main-nav/_main-nav--right.scss |   7 +
 core/scss/components/main-nav/_main-nav.scss  | 418 ++++++++++
 core/scss/components/main-nav/index.scss      |  12 +
 .../components/site-search/_site-search.scss  |   4 +-
 .../mixins/animation/_fancy-hover.scss        | 107 +++
 .../utilities/mixins/animation/index.scss     |  11 +
 core/scss/utilities/mixins/index.scss         |   1 +
 .../components/brand-bar/brand-bar.twig       |   2 +-
 core/templates/components/cta/cta.twig        |   8 +-
 core/templates/components/logo/logo.twig      |   2 +-
 .../components/main-nav/main-nav.json         | 114 +++
 .../components/main-nav/main-nav.twig         |  73 ++
 .../components/site-search/site-search.twig   |  10 +-
 kss/builder/decanter/kss-assets/css/kss.css   |  25 +-
 kss/builder/decanter/scss/_brand-bar.scss     |   2 +-
 kss/builder/decanter/scss/_content.scss       |   1 -
 kss/builder/decanter/scss/_fullscreen.scss    |  10 +
 kss/builder/decanter/scss/_main-nav.scss      |  13 +
 kss/kss-config.json                           |   2 +-
 package-lock.json                             | 217 ++---
 41 files changed, 2472 insertions(+), 142 deletions(-)
 create mode 100644 core/img/caret-down-black.png
 create mode 100644 core/img/caret-down-black.svg
 create mode 100644 core/img/caret-down-white.svg
 create mode 100644 core/img/close-black.svg
 create mode 100644 core/img/hamburger-black.svg
 create mode 100644 core/img/minus-black.svg
 create mode 100644 core/img/minus-white.png
 create mode 100644 core/img/minus-white.svg
 create mode 100644 core/img/plus-black.svg
 create mode 100644 core/img/plus-white.png
 create mode 100644 core/img/plus-white.svg
 delete mode 100644 core/js/decanter.min.js
 create mode 100644 core/scss/components/main-nav/_main-nav--center.scss
 create mode 100644 core/scss/components/main-nav/_main-nav--light.scss
 create mode 100644 core/scss/components/main-nav/_main-nav--mobile-search.scss
 create mode 100644 core/scss/components/main-nav/_main-nav--right.scss
 create mode 100644 core/scss/components/main-nav/_main-nav.scss
 create mode 100644 core/scss/components/main-nav/index.scss
 create mode 100644 core/scss/utilities/mixins/animation/_fancy-hover.scss
 create mode 100644 core/scss/utilities/mixins/animation/index.scss
 create mode 100644 core/templates/components/main-nav/main-nav.json
 create mode 100644 core/templates/components/main-nav/main-nav.twig

diff --git a/.codeclimate.yml b/.codeclimate.yml
index b23dff269..e6635d929 100644
--- a/.codeclimate.yml
+++ b/.codeclimate.yml
@@ -3,7 +3,7 @@ engines:
   # https://docs.codeclimate.com/docs/eslint
   # ES Linting requires an .eslintrc file to tweak checks.
   eslint:
-    enabled: false
+    enabled: true
   markdownlint:
     enabled: true
     checks:
@@ -80,5 +80,7 @@ exclude_patterns:
 - "node_modules"
 - "styleguide"
 - "kss/**/*"
-- "core/js"
 - "core/scss/core/_normalize.scss"
+- "Gruntfile.js"
+- "composer.json"
+- "package.json"
diff --git a/.eslintrc b/.eslintrc
index 6276f5334..6739fb255 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -1,13 +1,36 @@
 {
   "extends": "eslint:recommended",
   "env": {
-    "browser": true
+    "browser": true,
+    "es6": true
   },
   "globals": {
     "domready": true
   },
+  "ecmaFeatures": {
+    "arrowFunctions": true,
+    "blockBindings": true,
+    "classes": true,
+    "defaultParameters": true,
+    "destructuring": true,
+    "forOf": true,
+    "generators": true,
+    "modules": true,
+    "objectLiteralComputedProperties": true,
+    "objectLiteralDuplicateProperties": true,
+    "objectLiteralShorthandMethods": true,
+    "objectLiteralShorthandProperties": true,
+    "regexUFlag": true,
+    "regexYFlag": true,
+    "restParams": true,
+    "spread": true,
+    "superInFunctions": true,
+    "templateStrings": true,
+    "unicodeCodePointEscapes": true,
+    "globalReturn": true
+  },
   "rules": {
-    // Errors.
+    "max-len": [2, 80, 2, {"ignoreUrls": true}],
     "array-bracket-spacing": [2, "never"],
     "block-scoped-var": 2,
     "brace-style": [2, "stroustrup", {"allowSingleLine": true}],
@@ -73,7 +96,6 @@
     "spaced-comment": [2, "always"],
     "strict": [2, "function"],
     "yoda": [2, "never"],
-    // Warnings.
     "max-nested-callbacks": [1, 3],
     "valid-jsdoc": [1, {
       "prefer": {
diff --git a/Gruntfile.js b/Gruntfile.js
index f30be0045..09b7e4610 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -46,13 +46,6 @@ module.exports = function(grunt) {
       },
       target: ['core/scss/\*\*/\*.scss']
     },
-    uglify: {
-      my_target: {
-        files: {
-          'core/js/decanter.min.js': 'core/js/decanter.js',
-        }
-      }
-    },
     postcss: {
       options: {
         map: true, // inline sourcemaps
@@ -76,8 +69,7 @@ module.exports = function(grunt) {
         }
       },
       jsmin: {
-        files: ['core/**/*.js'],
-        tasks: ['uglify']
+        files: ['core/**/*.js']
       },
       twig: {
         files: ['**/*.twig', '**/*.json'],
@@ -143,7 +135,6 @@ module.exports = function(grunt) {
   grunt.loadNpmTasks('grunt-run');
   grunt.loadNpmTasks('grunt-browser-sync');
   grunt.loadNpmTasks('grunt-contrib-clean');
-  grunt.loadNpmTasks('grunt-contrib-uglify');
   grunt.loadNpmTasks('grunt-sass');
   grunt.loadNpmTasks('grunt-sass-lint');
   grunt.loadNpmTasks('grunt-contrib-watch');
@@ -152,9 +143,9 @@ module.exports = function(grunt) {
   grunt.loadNpmTasks('grunt-contrib-copy');
 
   grunt.registerTask('deploy', ['styleguide', 'deploy_site:styleguide', 'clean:postdeploy']);
-  grunt.registerTask('styleguide', ['compile', 'uglify', 'clean:styleguide', 'run:styleguide', 'copy:styleguide']);
+  grunt.registerTask('styleguide', ['compile', 'clean:styleguide', 'run:styleguide', 'copy:styleguide']);
   grunt.registerTask('compile', ['sass:dist', 'postcss:dist']);
   grunt.registerTask('dev', ['styleguide', 'browserSync', 'watch']);
-  grunt.registerTask('default', ['watch']);
+  grunt.registerTask('default', ['dev']);
 
 }
diff --git a/core/css/decanter.css b/core/css/decanter.css
index afcfa8a01..156395f8a 100644
--- a/core/css/decanter.css
+++ b/core/css/decanter.css
@@ -1617,7 +1617,7 @@ select {
   -webkit-appearance: none;
   appearance: none;
   background-color: #ffffff;
-  background-image: url("../img/arrow-down.png");
+  background: url("../img/arrow-down.png");
   background-image: url("../img/arrow-down.svg");
   background-position: right 1.3rem center;
   background-repeat: no-repeat;
@@ -1696,7 +1696,7 @@ fieldset {
 
 [type=checkbox]:checked + label::before,
 [type=checkbox]:checked:disabled + label::before {
-  background-image: url("../img/check.png");
+  background: url("../img/check.png");
   background-image: url("../img/check.svg");
   background-position: 50%;
   background-repeat: no-repeat; }
@@ -7642,6 +7642,488 @@ a {
         padding-top: 3px;
         font-size: 27px; } }
 
+.su-main-nav {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-family: "Source Sans Pro", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  display: block;
+  position: relative;
+  z-index: 9999; }
+  .su-main-nav ul {
+    margin-top: 0;
+    margin-bottom: 0;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    width: 100%;
+    list-style: none;
+    background-color: #2e2d29; }
+  .su-main-nav li {
+    margin-bottom: 0; }
+    .su-main-nav li a {
+      text-decoration: none;
+      position: relative;
+      padding: 1.6rem 4.8rem 1.6rem 2.4rem;
+      display: block;
+      color: #ffffff;
+      font-weight: 400;
+      font-size: 1.8rem;
+      border-bottom: #4d4f53 solid 1px;
+      outline: 0; }
+      .su-main-nav li a::before {
+        content: "";
+        position: absolute;
+        visibility: hidden;
+        -webkit-transition: background-color .3s ease-in, -webkit-transform .3s ease-in;
+        transition: background-color .3s ease-in, -webkit-transform .3s ease-in;
+        transition: transform .3s ease-in, background-color .3s ease-in;
+        transition: transform .3s ease-in, background-color .3s ease-in, -webkit-transform .3s ease-in;
+        z-index: 1; }
+      .su-main-nav li a:hover, .su-main-nav li a:focus, .su-main-nav li a:active {
+        text-decoration: none; }
+        .su-main-nav li a:hover::before, .su-main-nav li a:focus::before, .su-main-nav li a:active::before {
+          visibility: visible;
+          -webkit-transition: background-color .3s ease-out, -webkit-transform .3s ease-out;
+          transition: background-color .3s ease-out, -webkit-transform .3s ease-out;
+          transition: transform .3s ease-out, background-color .3s ease-out;
+          transition: transform .3s ease-out, background-color .3s ease-out, -webkit-transform .3s ease-out; }
+      .su-main-nav li a:hover::before, .su-main-nav li a:focus::before {
+        background-color: #ffffff; }
+      .su-main-nav li a:active::before {
+        background-color: #ec0513; }
+      .su-main-nav li a::before {
+        height: 100%;
+        width: 6px;
+        bottom: 0;
+        -webkit-transform: scaleY(0);
+                transform: scaleY(0); }
+      .su-main-nav li a:hover::before, .su-main-nav li a:focus::before, .su-main-nav li a:active::before {
+        -webkit-transform: scaleY(1);
+                transform: scaleY(1); }
+      .su-main-nav li a::before {
+        left: 0; }
+      .su-main-nav li a:active {
+        font-weight: 700; }
+    .su-main-nav li > ul {
+      display: none; }
+    .su-main-nav li.su-main-nav__item--expanded > ul {
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex; }
+    .su-main-nav li.su-main-nav__item--current > a {
+      font-weight: 700; }
+      .su-main-nav li.su-main-nav__item--current > a::before {
+        visibility: visible;
+        -webkit-transform: scaleY(1);
+                transform: scaleY(1);
+        background-color: #ec0513;
+        -webkit-transition: left .1s ease-out;
+        transition: left .1s ease-out; }
+      .su-main-nav li.su-main-nav__item--current > a:hover::before, .su-main-nav li.su-main-nav__item--current > a:focus::before {
+        left: 6px; }
+    .su-main-nav li.su-main-nav__item--parent > a::after {
+      background: url("../img/plus-white.svg") no-repeat 0 0;
+      background-size: 100%;
+      content: "";
+      display: inline-block;
+      position: absolute;
+      right: 2rem;
+      top: 2.06rem;
+      height: 1.8rem;
+      width: 1.8rem; }
+      @media only screen and (min-width: 992px) {
+        .su-main-nav li.su-main-nav__item--parent > a::after {
+          margin-bottom: 1px;
+          margin-left: 6px;
+          background: url("../img/caret-down-black.svg") no-repeat 0 0;
+          background-size: 100%;
+          position: relative;
+          right: 0;
+          top: 0;
+          height: 11px;
+          width: 11px;
+          -webkit-transition: -webkit-transform .3s ease-out;
+          transition: -webkit-transform .3s ease-out;
+          transition: transform .3s ease-out;
+          transition: transform .3s ease-out, -webkit-transform .3s ease-out; } }
+    .su-main-nav li.su-main-nav__item--parent.su-main-nav__item--expanded > a::after {
+      background: url("../img/minus-white.svg") no-repeat 0 0;
+      background-size: 100%; }
+      @media only screen and (min-width: 992px) {
+        .su-main-nav li.su-main-nav__item--parent.su-main-nav__item--expanded > a::after {
+          background: url("../img/caret-down-black.svg") no-repeat 0 0;
+          background-size: 100%;
+          -webkit-transform: rotate(180deg);
+                  transform: rotate(180deg); } }
+    @media (max-width: 991px) {
+      .su-main-nav li.su-main-nav__item--parent.su-main-nav__item--expanded > a::before {
+        background-color: transparent; }
+      .su-main-nav li.su-main-nav__item--parent.su-main-nav__item--expanded > a:hover::before {
+        background-color: #ffffff; }
+      .su-main-nav li.su-main-nav__item--parent.su-main-nav__item--expanded > a:active::before {
+        background-color: #ec0513; } }
+    @media (max-width: 991px) {
+      .su-main-nav li.su-main-nav__item--current.su-main-nav__item--expanded > a {
+        font-weight: 600; }
+        .su-main-nav li.su-main-nav__item--current.su-main-nav__item--expanded > a::before {
+          background-color: #ffffff; } }
+  .su-main-nav > ul > li {
+    margin-bottom: 0; }
+    .su-main-nav > ul > li > a {
+      font-weight: 600; }
+  @media only screen and (min-width: 992px) {
+    .su-main-nav > ul {
+      padding-left: 0;
+      -webkit-box-orient: horizontal;
+      -webkit-box-direction: normal;
+          -ms-flex-direction: row;
+              flex-direction: row;
+      -ms-flex-wrap: wrap;
+          flex-wrap: wrap;
+      background-color: transparent; }
+      .su-main-nav > ul > li > a {
+        text-decoration: none;
+        position: relative;
+        padding-bottom: 0.8em;
+        padding-right: 0;
+        padding-left: 0;
+        margin: 0 1.2em 0 0;
+        font-size: 2.1rem;
+        border-bottom: 0; }
+        .su-main-nav > ul > li > a::before {
+          content: "";
+          position: absolute;
+          visibility: hidden;
+          -webkit-transition: background-color .3s ease-in, -webkit-transform .3s ease-in;
+          transition: background-color .3s ease-in, -webkit-transform .3s ease-in;
+          transition: transform .3s ease-in, background-color .3s ease-in;
+          transition: transform .3s ease-in, background-color .3s ease-in, -webkit-transform .3s ease-in;
+          z-index: 1; }
+        .su-main-nav > ul > li > a:hover, .su-main-nav > ul > li > a:focus, .su-main-nav > ul > li > a:active {
+          text-decoration: none; }
+          .su-main-nav > ul > li > a:hover::before, .su-main-nav > ul > li > a:focus::before, .su-main-nav > ul > li > a:active::before {
+            visibility: visible;
+            -webkit-transition: background-color .3s ease-out, -webkit-transform .3s ease-out;
+            transition: background-color .3s ease-out, -webkit-transform .3s ease-out;
+            transition: transform .3s ease-out, background-color .3s ease-out;
+            transition: transform .3s ease-out, background-color .3s ease-out, -webkit-transform .3s ease-out; }
+        .su-main-nav > ul > li > a:hover::before, .su-main-nav > ul > li > a:focus::before {
+          background-color: #820000; }
+        .su-main-nav > ul > li > a:active::before {
+          background-color: #2e2d29; }
+        .su-main-nav > ul > li > a::before {
+          width: 100%;
+          height: 6px;
+          left: 0;
+          -webkit-transform: scaleX(0);
+                  transform: scaleX(0); }
+        .su-main-nav > ul > li > a:hover::before, .su-main-nav > ul > li > a:focus::before, .su-main-nav > ul > li > a:active::before {
+          -webkit-transform: scaleX(1);
+                  transform: scaleX(1); }
+        .su-main-nav > ul > li > a::before {
+          bottom: 0; }
+        .su-main-nav > ul > li > a:active {
+          font-weight: 600; }
+        .su-main-nav > ul > li > a[aria-expanded="true"]::before {
+          visibility: visible;
+          -webkit-transform: scaleX(1);
+                  transform: scaleX(1);
+          background-color: #2e2d29; }
+      .su-main-nav > ul > li:last-child > a {
+        margin-right: 0; }
+      .su-main-nav > ul > li.su-main-nav__item--current > a {
+        font-weight: 600; }
+      .su-main-nav > ul > li.su-main-nav__item--expanded > a:focus::before {
+        background-color: #2e2d29; }
+      .su-main-nav > ul > li.su-main-nav__item--expanded > a[aria-expanded="true"]:hover::before {
+        background-color: #820000; } }
+  @media (max-width: 991px) {
+    .su-main-nav.no-js .su-main-nav__toggle[aria-expanded="false"] + .su-main-nav__menu-lv1 {
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex; }
+    .su-main-nav.no-js li > ul {
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex; } }
+  @media only screen and (min-width: 992px) {
+    .su-main-nav.no-js li:hover > ul {
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex; } }
+
+@media (max-width: 991px) {
+  .su-main-nav__toggle {
+    text-decoration: none;
+    position: relative;
+    padding-bottom: 0.8em;
+    padding: 0 0 2rem;
+    margin: 0;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: reverse;
+        -ms-flex-direction: column-reverse;
+            flex-direction: column-reverse;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    width: 40px;
+    background-color: transparent;
+    color: #2e2d29;
+    font-size: 1.6rem;
+    font-weight: 400;
+    line-height: .7; }
+    .su-main-nav__toggle::before {
+      content: "";
+      position: absolute;
+      visibility: hidden;
+      -webkit-transition: background-color .3s ease-in, -webkit-transform .3s ease-in;
+      transition: background-color .3s ease-in, -webkit-transform .3s ease-in;
+      transition: transform .3s ease-in, background-color .3s ease-in;
+      transition: transform .3s ease-in, background-color .3s ease-in, -webkit-transform .3s ease-in;
+      z-index: 1; }
+    .su-main-nav__toggle:hover, .su-main-nav__toggle:focus, .su-main-nav__toggle:active {
+      text-decoration: none; }
+      .su-main-nav__toggle:hover::before, .su-main-nav__toggle:focus::before, .su-main-nav__toggle:active::before {
+        visibility: visible;
+        -webkit-transition: background-color .3s ease-out, -webkit-transform .3s ease-out;
+        transition: background-color .3s ease-out, -webkit-transform .3s ease-out;
+        transition: transform .3s ease-out, background-color .3s ease-out;
+        transition: transform .3s ease-out, background-color .3s ease-out, -webkit-transform .3s ease-out; }
+    .su-main-nav__toggle:hover::before, .su-main-nav__toggle:focus::before {
+      background-color: #820000; }
+    .su-main-nav__toggle:active::before {
+      background-color: #2e2d29; }
+    .su-main-nav__toggle::before {
+      width: 100%;
+      height: 6px;
+      left: 0;
+      -webkit-transform: scaleX(0);
+              transform: scaleX(0); }
+    .su-main-nav__toggle:hover::before, .su-main-nav__toggle:focus::before, .su-main-nav__toggle:active::before {
+      -webkit-transform: scaleX(1);
+              transform: scaleX(1); }
+    .su-main-nav__toggle::before {
+      bottom: 0; }
+    .su-main-nav__toggle::after {
+      margin: 0 auto;
+      display: inline-block;
+      width: 30px;
+      height: 26px;
+      background: url("../img/hamburger-black.svg") no-repeat 3px 0;
+      content: ""; }
+    .su-main-nav__toggle[aria-expanded="true"]::before {
+      visibility: visible;
+      -webkit-transform: scaleX(1);
+              transform: scaleX(1);
+      background-color: #2e2d29; }
+    .su-main-nav__toggle[aria-expanded="true"]::after {
+      width: 20px;
+      background: url("../img/close-black.svg") no-repeat 3px 0;
+      background-size: 16px 16px; }
+    .su-main-nav__toggle[aria-expanded="true"]:hover::before {
+      background-color: #820000; }
+    .su-main-nav__toggle[aria-expanded="true"]:active::before {
+      background-color: #2e2d29; }
+    .su-main-nav__toggle:hover, .su-main-nav__toggle:active, .su-main-nav__toggle:focus {
+      background-color: transparent;
+      color: #2e2d29;
+      -webkit-box-shadow: none;
+              box-shadow: none; }
+    .su-main-nav__toggle[aria-expanded="false"] + .su-main-nav__menu-lv1 {
+      display: none; }
+    .su-main-nav__toggle[aria-expanded="true"] + .su-main-nav__menu-lv1 {
+      position: absolute; }
+    .su-main-nav__toggle--center {
+      margin-right: auto;
+      margin-left: auto; }
+    .su-main-nav__toggle--right {
+      margin-right: 0;
+      margin-left: auto; } }
+
+@media only screen and (min-width: 768px) and (max-width: 991px) {
+  .su-main-nav__toggle[aria-expanded="true"] + .su-main-nav__menu-lv1 {
+    max-width: 24em; } }
+
+@media only screen and (min-width: 992px) {
+  .su-main-nav__toggle {
+    display: none; } }
+
+@media only screen and (min-width: 992px) {
+  .su-main-nav__menu-lv1 > li > a {
+    color: #2e2d29;
+    -webkit-transition: color .3s ease-out;
+    transition: color .3s ease-out; }
+    .su-main-nav__menu-lv1 > li > a:hover, .su-main-nav__menu-lv1 > li > a:focus {
+      color: #820000; }
+    .su-main-nav__menu-lv1 > li > a:active, .su-main-nav__menu-lv1 > li > a[aria-expanded="true"] {
+      color: #2e2d29; }
+    .su-main-nav__menu-lv1 > li > a[aria-expanded="true"]:hover {
+      color: #820000; } }
+
+.su-main-nav__menu-lv1 > li.su-main-nav__item--current > a::before {
+  -webkit-transform: scaleY(1);
+          transform: scaleY(1);
+  background-color: #ec0513; }
+
+.su-main-nav__menu-lv1 > li.su-main-nav__item--current > a:hover::before, .su-main-nav__menu-lv1 > li.su-main-nav__item--current > a:focus::before {
+  background-color: #ec0513; }
+
+@media (max-width: 991px) {
+  .su-main-nav__menu-lv1 > li.su-main-nav__item--current.su-main-nav__item--expanded > a:focus::before {
+    left: 0;
+    background-color: #ffffff; }
+  .su-main-nav__menu-lv1 > li.su-main-nav__item--current.su-main-nav__item--expanded > a[aria-expanded="true"]:hover::before {
+    left: 6px; }
+  .su-main-nav__menu-lv1 > li.su-main-nav__item--current.su-main-nav__item--expanded > a[aria-expanded="true"]:active {
+    font-weight: 700; }
+    .su-main-nav__menu-lv1 > li.su-main-nav__item--current.su-main-nav__item--expanded > a[aria-expanded="true"]:active::before {
+      background-color: #ec0513; } }
+
+@media only screen and (min-width: 992px) {
+  .su-main-nav__menu-lv1 > li.su-main-nav__item--current > a::before {
+    background-color: #2e2d29; }
+  .su-main-nav__menu-lv1 > li.su-main-nav__item--current > a:hover::before, .su-main-nav__menu-lv1 > li.su-main-nav__item--current > a:focus::before {
+    left: 0;
+    background-color: #820000; } }
+
+.su-main-nav__menu-lv2 {
+  padding-left: 2rem; }
+  @media only screen and (min-width: 992px) {
+    .su-main-nav__menu-lv2 {
+      padding-top: 1px;
+      padding-left: 1.2rem;
+      margin-left: -1.8rem;
+      border: none;
+      -webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15), 0px 6px 6px rgba(0, 0, 0, 0.2);
+              box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15), 0px 6px 6px rgba(0, 0, 0, 0.2);
+      z-index: 11111;
+      position: absolute;
+      max-width: 30rem; }
+      .su-main-nav__menu-lv2 li:last-child a {
+        border-bottom: 0; } }
+
+.su-main-nav--center ul {
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center; }
+
+.su-main-nav.su-main-nav--light .su-main-nav__toggle[aria-expanded="true"]::before {
+  background-color: #b6b1a9; }
+
+.su-main-nav.su-main-nav--light .su-main-nav__toggle[aria-expanded="true"]:hover::before {
+  background-color: #820000; }
+
+.su-main-nav.su-main-nav--light .su-main-nav__toggle[aria-expanded="true"]:active::before {
+  background-color: #2e2d29; }
+
+.su-main-nav.su-main-nav--light ul {
+  background-color: #ffffff; }
+
+.su-main-nav.su-main-nav--light li a {
+  color: #2e2d29;
+  border-bottom-color: #d9d9d9; }
+  .su-main-nav.su-main-nav--light li a:hover::before, .su-main-nav.su-main-nav--light li a:focus::before {
+    background-color: #2e2d29; }
+  .su-main-nav.su-main-nav--light li a:active {
+    color: #820000; }
+    .su-main-nav.su-main-nav--light li a:active::before {
+      background-color: #820000; }
+
+.su-main-nav.su-main-nav--light li.su-main-nav__item--current > a {
+  color: #820000; }
+  .su-main-nav.su-main-nav--light li.su-main-nav__item--current > a::before {
+    background-color: #820000; }
+
+@media (max-width: 991px) {
+  .su-main-nav.su-main-nav--light li.su-main-nav__item--parent > a::after {
+    background: url("../img/plus-black.svg") no-repeat 0 0;
+    background-size: 100%; }
+  .su-main-nav.su-main-nav--light li.su-main-nav__item--parent.su-main-nav__item--expanded > a ::after {
+    background: url("../img/minus-black.svg") no-repeat 0 0;
+    background-size: 100%; }
+  .su-main-nav.su-main-nav--light li.su-main-nav__item--parent.su-main-nav__item--expanded > a:focus::before {
+    background-color: transparent; }
+  .su-main-nav.su-main-nav--light li.su-main-nav__item--parent.su-main-nav__item--expanded > a[aria-expanded="true"]:hover::before {
+    background-color: #2e2d29; }
+  .su-main-nav.su-main-nav--light li.su-main-nav__item--parent.su-main-nav__item--expanded > a[aria-expanded="true"]:active::before {
+    background-color: #820000; }
+  .su-main-nav.su-main-nav--light li.su-main-nav__item--current.su-main-nav__item--expanded > a {
+    color: #2e2d29; }
+    .su-main-nav.su-main-nav--light li.su-main-nav__item--current.su-main-nav__item--expanded > a::before {
+      background-color: #2e2d29; }
+    .su-main-nav.su-main-nav--light li.su-main-nav__item--current.su-main-nav__item--expanded > a:focus::before {
+      background-color: #2e2d29; }
+    .su-main-nav.su-main-nav--light li.su-main-nav__item--current.su-main-nav__item--expanded > a[aria-expanded="true"]:active {
+      color: #820000; } }
+
+@media only screen and (min-width: 992px) {
+  .su-main-nav.su-main-nav--light > ul {
+    background-color: transparent; }
+    .su-main-nav.su-main-nav--light > ul > li > a:hover, .su-main-nav.su-main-nav--light > ul > li > a:focus {
+      color: #820000; }
+      .su-main-nav.su-main-nav--light > ul > li > a:hover::before, .su-main-nav.su-main-nav--light > ul > li > a:focus::before {
+        background-color: #820000; }
+    .su-main-nav.su-main-nav--light > ul > li > a:active {
+      color: #2e2d29; }
+      .su-main-nav.su-main-nav--light > ul > li > a:active::before {
+        background-color: #2e2d29; }
+    .su-main-nav.su-main-nav--light > ul > li > a[aria-expanded="true"] {
+      color: #2e2d29; }
+      .su-main-nav.su-main-nav--light > ul > li > a[aria-expanded="true"]::before {
+        background-color: #b6b1a9; }
+      .su-main-nav.su-main-nav--light > ul > li > a[aria-expanded="true"]:hover {
+        color: #820000; }
+        .su-main-nav.su-main-nav--light > ul > li > a[aria-expanded="true"]:hover::before {
+          background-color: #820000; }
+    .su-main-nav.su-main-nav--light > ul > li.su-main-nav__item--current > a {
+      color: #2e2d29; }
+      .su-main-nav.su-main-nav--light > ul > li.su-main-nav__item--current > a::before {
+        background-color: #b6b1a9; }
+      .su-main-nav.su-main-nav--light > ul > li.su-main-nav__item--current > a:hover, .su-main-nav.su-main-nav--light > ul > li.su-main-nav__item--current > a:focus {
+        color: #820000; }
+        .su-main-nav.su-main-nav--light > ul > li.su-main-nav__item--current > a:hover::before, .su-main-nav.su-main-nav--light > ul > li.su-main-nav__item--current > a:focus::before {
+          background-color: #820000; }
+    .su-main-nav.su-main-nav--light > ul > li.su-main-nav__item--current.su-main-nav__item--expanded > a:focus {
+      color: #2e2d29; }
+      .su-main-nav.su-main-nav--light > ul > li.su-main-nav__item--current.su-main-nav__item--expanded > a:focus::before {
+        background-color: #b6b1a9; }
+    .su-main-nav.su-main-nav--light > ul > li.su-main-nav__item--current.su-main-nav__item--expanded > a[aria-expanded="true"]:hover {
+      color: #820000; }
+      .su-main-nav.su-main-nav--light > ul > li.su-main-nav__item--current.su-main-nav__item--expanded > a[aria-expanded="true"]:hover::before {
+        background-color: #820000; } }
+
+.su-main-nav--mobile-search .su-site-search {
+  display: none; }
+
+@media (max-width: 991px) {
+  .su-main-nav--mobile-search .su-main-nav__toggle[aria-expanded="true"] + .su-main-nav__menu-lv1 {
+    padding-top: 8rem; }
+    .su-main-nav--mobile-search .su-main-nav__toggle[aria-expanded="true"] + .su-main-nav__menu-lv1 + .su-site-search {
+      padding: 2rem;
+      display: block;
+      position: absolute;
+      width: 100%;
+      background-color: #2e2d29; }
+      .su-main-nav--mobile-search .su-main-nav__toggle[aria-expanded="true"] + .su-main-nav__menu-lv1 + .su-site-search .su-site-search__submit {
+        top: 3.1rem;
+        right: 3.1rem; } }
+
+@media only screen and (min-width: 768px) and (max-width: 991px) {
+  .su-main-nav--mobile-search .su-main-nav__toggle[aria-expanded="true"] + .su-main-nav__menu-lv1 + .su-site-search {
+    width: 24em; } }
+
+.su-main-nav--right ul {
+  -webkit-box-pack: end;
+      -ms-flex-pack: end;
+          justify-content: flex-end; }
+
 .su-quote {
   padding: 1em;
   overflow: hidden; }
@@ -7668,12 +8150,12 @@ a {
 .su-site-search__input {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  padding: 0.3em 1em;
+  padding: 0.6rem 2rem;
   display: inline-block;
   height: 40px;
   max-width: 100%;
   border-radius: 30px;
-  font-size: .8em; }
+  font-size: 1.6rem; }
   .su-site-search__input::-webkit-input-placeholder {
     color: #2e2d29;
     opacity: 1; }
diff --git a/core/img/caret-down-black.png b/core/img/caret-down-black.png
new file mode 100644
index 0000000000000000000000000000000000000000..674d92f3ce6ee587107de6eb02091cf6e7abe9ae
GIT binary patch
literal 293
zcmeAS@N?(olHy`uVBq!ia0vp@K+MCz1|)ZGH@^v_I14-?iy0VLJ3*K+H)HNEpde#$
zkh>GZx^prwfgF}}M_)$<hK>E)e-c@N{9T?djv*C{M<>|w9Wvl?d%Mh_++jl*PiS-@
zOBJ&P<5QIanQcYP>jG9Xi7wj|#&gCYC5bCY>7#k$@*kh8JyROyhl-pG@p@VRs7XQM
z$i_JzZaN-_+}*mmT<Ls_qolyO{7K3hj1KRoo{&60BQrwxX=P-rh>d72qfnZq`{(oP
z7<eyyEXm8;((3y!L2%8|FYZ<+zHHp(Zr3O!el#z$=upn9Ujb#+bN9yit%~j!@$LRv
k#&}<3zeHORNBw$jQD>`ZSJkGh0{Vi%)78&qol`;+0Dw(vp#T5?

literal 0
HcmV?d00001

diff --git a/core/img/caret-down-black.svg b/core/img/caret-down-black.svg
new file mode 100644
index 000000000..667bd42a4
--- /dev/null
+++ b/core/img/caret-down-black.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.4887 5.41566C24.1363 6.00024 24.1737 6.98449 23.5725 7.61404L13.1725 18.5029C12.8697 18.8199 12.4449 19 12 19C11.5551 19 11.1303 18.8199 10.8275 18.5029L0.427538 7.61404C-0.173746 6.98449 -0.136251 6.00024 0.511286 5.41566C1.15882 4.83108 2.17119 4.86753 2.77248 5.49708L12 15.1584L21.2275 5.49708C21.8288 4.86753 22.8412 4.83108 23.4887 5.41566Z" fill="#2E2D29"/>
+</svg>
diff --git a/core/img/caret-down-white.svg b/core/img/caret-down-white.svg
new file mode 100644
index 000000000..b2dadb1cb
--- /dev/null
+++ b/core/img/caret-down-white.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 14"><defs><style>.cls-1{fill:#fff;}</style></defs><title>caret-down-white</title><path class="cls-1" d="M23.49,5.42a1.51,1.51,0,0,1,.08,2.19L13.17,18.5a1.62,1.62,0,0,1-2.34,0L.43,7.61A1.51,1.51,0,0,1,.51,5.42a1.63,1.63,0,0,1,2.26.08L12,15.16,21.23,5.5A1.63,1.63,0,0,1,23.49,5.42Z" transform="translate(0 -5)"/></svg>
\ No newline at end of file
diff --git a/core/img/close-black.svg b/core/img/close-black.svg
new file mode 100644
index 000000000..3c369d3f7
--- /dev/null
+++ b/core/img/close-black.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23.89 23.89"><title>close-black</title><path d="M10.56,12,.32,22.21a1,1,0,0,0,1.41,1.41L12,13.39,22.21,23.62a1,1,0,0,0,1.41-1.41L13.39,12,23.62,1.74a1,1,0,0,0,0-1.42,1,1,0,0,0-1.41,0L12,10.56,1.74.32A1,1,0,0,0,.32,1.74Z" transform="translate(-0.03 -0.03)"/></svg>
\ No newline at end of file
diff --git a/core/img/hamburger-black.svg b/core/img/hamburger-black.svg
new file mode 100644
index 000000000..876be7b4f
--- /dev/null
+++ b/core/img/hamburger-black.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 4.13575C0 3.23201 0.732625 2.49939 1.63636 2.49939H22.3636C23.2674 2.49939 24 3.23201 24 4.13575C24 5.03949 23.2674 5.77212 22.3636 5.77212H1.63636C0.732625 5.77212 0 5.03949 0 4.13575Z" fill="#2E2D29"/>
+<path d="M0 19.4085C0 18.5047 0.732625 17.7721 1.63636 17.7721H22.3636C23.2674 17.7721 24 18.5047 24 19.4085C24 20.3122 23.2674 21.0448 22.3636 21.0448H1.63636C0.732625 21.0448 0 20.3122 0 19.4085Z" fill="#2E2D29"/>
+<path d="M0 11.7721C0 10.8684 0.732625 10.1357 1.63636 10.1357H22.3636C23.2674 10.1357 24 10.8684 24 11.7721C24 12.6758 23.2674 13.4085 22.3636 13.4085H1.63636C0.732625 13.4085 0 12.6758 0 11.7721Z" fill="#2E2D29"/>
+</svg>
diff --git a/core/img/minus-black.svg b/core/img/minus-black.svg
new file mode 100644
index 000000000..ad1b6f2c0
--- /dev/null
+++ b/core/img/minus-black.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;}
+</style>
+<line class="st0" x1="23" y1="11.9" x2="1" y2="11.9"/>
+</svg>
diff --git a/core/img/minus-white.png b/core/img/minus-white.png
new file mode 100644
index 0000000000000000000000000000000000000000..fa8dc13863f8c4914502614614208b9dec2ecf79
GIT binary patch
literal 149
zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`GjoCO|{#S9GG!XV7ZFl!D-1!HlL
zyA#8@b22Z19F}xPUq=Rpjs4tz5?O(KEl(H6kP61PM-2rT3^-U0`cFBsf8~QG2N^}3
pi*K)CVffwmHs1bhhc-io>P3E*2e<z%{tVQ`;OXk;vd$@?2>`z|Dqa8p

literal 0
HcmV?d00001

diff --git a/core/img/minus-white.svg b/core/img/minus-white.svg
new file mode 100644
index 000000000..1910db975
--- /dev/null
+++ b/core/img/minus-white.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;}
+</style>
+<line class="st0" x1="23" y1="11.9" x2="1" y2="11.9"/>
+</svg>
diff --git a/core/img/plus-black.svg b/core/img/plus-black.svg
new file mode 100644
index 000000000..d14ac75f3
--- /dev/null
+++ b/core/img/plus-black.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>plus-black</title><path d="M13,1a1,1,0,0,0-2,0V11H1a1,1,0,0,0,0,2H11V23a1,1,0,0,0,2,0V13H23a1,1,0,0,0,0-2H13Z"/></svg>
\ No newline at end of file
diff --git a/core/img/plus-white.png b/core/img/plus-white.png
new file mode 100644
index 0000000000000000000000000000000000000000..1128a1f2aa1b0932196504c84e95ebcea840c2ff
GIT binary patch
literal 176
zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`GjoCO|{#S9GG!XV7ZFl!D-1!HlL
zyA#8@b22Z19F}xPUq=Rpjs4tz5?O(KS5FtmkP61PS2l7oDDb#kTyN3wTR+vTlOys$
zSHn@;4O9HPSXgFO-dpS~_VoOcnaq3^42#3+FDu_tpYTJ>^1*@Sjjd_|v5y|hPPqMd
R|8k&#44$rjF6*2UngA2dH#h(Q

literal 0
HcmV?d00001

diff --git a/core/img/plus-white.svg b/core/img/plus-white.svg
new file mode 100644
index 000000000..a7e31c31a
--- /dev/null
+++ b/core/img/plus-white.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13 1C13 0.447715 12.5523 0 12 0C11.4477 0 11 0.447715 11 1V11L1 11C0.447716 11 0 11.4477 0 12C0 12.5523 0.447716 13 1 13L11 13V23C11 23.5523 11.4477 24 12 24C12.5523 24 13 23.5523 13 23V13L23 13C23.5523 13 24 12.5523 24 12C24 11.4477 23.5523 11 23 11L13 11V1Z" fill="white"/>
+</svg>
diff --git a/core/js/decanter.js b/core/js/decanter.js
index 6915ef655..5a0d33e4e 100644
--- a/core/js/decanter.js
+++ b/core/js/decanter.js
@@ -1,3 +1,773 @@
-/**
- * Empty until further notice.
- */
+// if NodeList doesn't support forEach, use Array's forEach()
+NodeList.prototype.forEach = NodeList.prototype.forEach || Array.prototype.forEach;
+
+document.addEventListener('DOMContentLoaded', event => {
+
+  // The css class that this following behaviour is applied to.
+  const navClass = 'su-main-nav';
+
+  // ---------------------------------------------------------------------------
+  // Keyboard helper functions
+  // ---------------------------------------------------------------------------
+
+  const isHome = theKey =>
+    (theKey === 'Home' || theKey === 122);
+  const isEnd = theKey =>
+    (theKey === 'End' || theKey === 123);
+  const isTab = theKey =>
+    (theKey === 'Tab' || theKey === 9);
+  const isEsc = theKey =>
+    (theKey === 'Escape' || theKey === 'Esc' || theKey === 27);
+  const isSpace = theKey =>
+    (theKey === ' ' || theKey === 'Spacebar' || theKey === 32);
+  const isEnter = theKey =>
+    (theKey === 'Enter' || theKey === 13);
+  const isLeftArrow = theKey =>
+    (theKey === 'ArrowLeft' || theKey === 'Left' || theKey === 37);
+  const isRightArrow = theKey =>
+    (theKey === 'ArrowRight' || theKey === 'Right' || theKey === 39);
+  const isUpArrow = theKey =>
+    (theKey === 'ArrowUp' || theKey === 'Up' || theKey === 38);
+  const isDownArrow = theKey =>
+    (theKey === 'ArrowDown' || theKey === 'Down' || theKey === 40);
+
+  // ---------------------------------------------------------------------------
+  // Helper classes
+  // ---------------------------------------------------------------------------
+
+  /**
+   * Represent an item in a navigation menu. May be a direct link or a subnav
+   * trigger.
+   *
+   * @prop {HTMLLIElement}   item   - the <li> in the DOM that is the NavItem
+   * @prop {HTMLElement|Nav} nav    - the Nav that contains the element.
+   *                                  May be a main nav (<nav>) or subnav (Nav).
+   * @prop {HTMLLIElement}   link   - the <a> in the DOM that is contained in
+   *                                  item (the <li>).
+   * @prop {Nav}             subNav - if item is the trigger for a subnav, this
+   *                                  is an instonce Nav that models the subnav.
+   */
+  class NavItem {
+
+    /**
+     * Create a NavItem
+     * @param {HTMLLIElement}   item  - The <li> that is the NavItem in the DOM.
+     * @param {HTMLElement|Nav} nav   - The Nav that contains the element. May
+     *                                  be a main nav (<nav>) or a subnav (Nav).
+     */
+    constructor(item, nav) {
+      this.item = item;
+      this.nav = nav;
+      this.link = this.item.querySelector('a');
+      this.subNav = null;
+      this.item.addEventListener('keydown', this);
+
+      if (this.isSubNavTrigger()) {
+        this.subNav = new Nav(this);
+        // Maintain global list of subnavs for closeAllSubNavs().
+        theSubNavs.push(this);
+        this.item.addEventListener('click', this);
+      }
+    }
+
+    // -------------------------------------------------------------------------
+    // Helper Methods.
+    // -------------------------------------------------------------------------
+
+    /**
+     * Is this the first item in the containing Nav?
+     *
+     * @return {Boolean}
+     *  Wether or not the item is the first item.
+     */
+    isFirstItem() {
+      return this.nav.items.indexOf(this) === 0;
+    }
+
+    /**
+     * Is this the last item in the containing Nav?
+     *
+     * @return {Boolean}
+     *  Wether or not the item is the last item.
+     */
+    isLastItem() {
+      return this.nav.items.indexOf(this) === (this.nav.items.length - 1);
+    }
+
+    /**
+     * Is this a trigger that opens / closes a subnav?
+     *
+     * @return {Boolean}
+     *  Wether or not the item is the sub nav trigger item.
+     */
+    isSubNavTrigger() {
+      return this.item.lastElementChild.tagName.toUpperCase() === 'UL';
+    }
+
+    /**
+     * Is this a component of a subnav - either the trigger or a nav item?
+     *
+     * @return {Boolean}
+     *  Wether or not the item is a subnav item.
+     */
+    isSubNavItem() {
+      return (this.isSubNavTrigger() || this.nav.isSubNav());
+    }
+
+    /**
+     * Is this expanded? Can only return TRUE if this is a subnav trigger.
+     *
+     * @return {Boolean}
+     *  Wether or not the item is expanded.
+     */
+    isExpanded() {
+      return this.link.getAttribute('aria-expanded') === 'true';
+    }
+
+    /**
+     * Set whether or not this is expanded.
+     * Only meaningful if this is a subnav trigger.
+     *
+     * @param {String} value - What to set the aria-expanded attribute of this's
+     *                         link to.
+     */
+    setExpanded(value) {
+      this.link.setAttribute('aria-expanded', value);
+    }
+
+    // -------------------------------------------------------------------------
+    // Functional Methods.
+    // -------------------------------------------------------------------------
+
+    /**
+     * Handles the opening of a sub-nav.
+     *
+     * If this is a subnav trigger, open the corresponding subnav.
+     * Optionally force focus on the first element in the subnav
+     * (for keyboard nav).
+     *
+     * @param {Boolean} focusOnFirst - whether or not to also focus on the first
+     *                                 element in the subnav
+     */
+    openSubNav(focusOnFirst = true) {
+      closeAllSubNavs();
+
+      if (this.isSubNavTrigger()) {
+        this.item.classList.add('su-main-nav__item--expanded');
+        this.setExpanded('true');
+        if (focusOnFirst) {
+          this.subNav.focusOn('first');
+        }
+      }
+    }
+
+    /**
+     * Handles the closing of a subnav.
+     *
+     * If this is a subnav trigger or an item in a subnav, close the
+     * corresponding subnav. Optionally force focus on the trigger.
+     *
+     * @param {Boolean} focusOnTrigger - Whether or not to also focus on the
+     *                                 subnav's trigger.
+     */
+    closeSubNav(focusOnTrigger = false) {
+      if (this.isSubNavTrigger()) {
+        this.item.classList.remove('su-main-nav__item--expanded');
+        this.setExpanded('false');
+        if (focusOnTrigger) {
+          this.link.focus();
+        }
+      }
+      else if (this.isSubNavItem()) {
+        // This.nav.elem should be a subNavTrigger.
+        this.nav.elem.closeSubNav(focusOnTrigger);
+      }
+    }
+
+    // -------------------------------------------------------------------------
+    // Event Handlers.
+    // -------------------------------------------------------------------------
+
+    /**
+     * Handler for all events attached to an instance of this class. This method
+     * must exist when events are bound to an instance of a class
+     * (vs a function). This method is called for all events bound to an
+     * instance. It inspects the instance (this) for an appropriate handler
+     * based on the event type. If found, it dispatches the event to the
+     * appropriate handler.
+     *
+     * @param {KeyboardEvent} event - The keyboard event.
+     *
+     * @return {*}
+     *   Whatever the dispatched handler returns (in our case nothing)
+     */
+    handleEvent(event) {
+      event = event || window.event;
+
+      // If this class has an onEvent method (onClick, onKeydown) invoke it.
+      const handler = 'on'
+        + event.type.charAt(0).toUpperCase()
+        + event.type.slice(1);
+
+      if (typeof this[handler] === 'function') {
+        // The element that was clicked.
+        const target = event.target || event.srcElement;
+        return this[handler](event, target);
+      }
+    }
+
+    /**
+     * Handler for keydown events. keydown is bound to all NavItem's.
+     * Dispatched from this.handleEvent().
+     *
+     * @param {KeyboardEvent} event - The keyboard event object.
+     * @param {HTMLElement} target  - The HTML element target.
+     */
+    onKeydown(event, target) {
+      const theKey = event.key || event.keyCode;
+
+      // Handler for the space and enter key.
+      if (isSpace(theKey) || isEnter(theKey)) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.isSubNavTrigger()) {
+          this.openSubNav();
+        }
+        else {
+          window.location = this.link;
+        }
+      }
+      // Handler for the down arrow key.
+      else if (isDownArrow(theKey)) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.nav.isDesktopNav()) {
+          if (this.isSubNavTrigger()) {
+            this.openSubNav();
+          }
+          else {
+            this.nav.focusOn('next', this);
+          }
+        }
+        else {
+          this.nav.focusOn('next', this);
+        }
+      }
+      // Handler for the up arrow key.
+      else if (isUpArrow(theKey)) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.nav.focusOn('prev', this);
+      }
+      // Handler for the left arrow key.
+      else if (isLeftArrow(theKey)) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.nav.isDesktopNav()) {
+          if (this.nav.isSubNav()) {
+            this.closeSubNav();
+            let parent = this.nav.getParentNav();
+            // Focus on the previous item in the parent nav.
+            parent.focusOn('prev', this.nav.elem);
+          }
+          else {
+            this.nav.focusOn('prev', this);
+          }
+        }
+        else {
+          if (this.isSubNavItem()) {
+            // Close the subnav and put the focus on the trigger.
+            this.closeSubNav(true);
+          }
+        }
+      }
+      // Handler for the right arrow key.
+      else if (isRightArrow(theKey)) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.nav.isDesktopNav()) {
+          if (this.nav.isSubNav()) {
+            this.closeSubNav();
+            let parent = this.nav.getParentNav();
+            // Focus on the next item in the parent nav.
+            parent.focusOn('next', this.nav.elem);
+          }
+          else {
+            this.nav.focusOn('next', this);
+          }
+        }
+        else {
+          if (this.isSubNavTrigger()) {
+            this.openSubNav();
+          }
+        }
+      }
+      // Handler for the home key.
+      else if (isHome(theKey)) {
+        this.nav.focusOn('first');
+      }
+      // Handler for the end key.
+      else if (isEnd(theKey)) {
+        this.nav.focusOn('last');
+      }
+      // Handler for the tab key.
+      else if (isTab(theKey)) {
+        event.stopPropagation();
+        const shifted = event.shiftKey;
+        if (this.isSubNavItem()
+          && ((!shifted && this.isLastItem())
+          || (shifted && this.isFirstItem()))
+        ) {
+          this.closeSubNav(true);
+        }
+      }
+    }
+
+    /**
+     * Handler for click events.
+     *
+     * Dispatched from this.handleEvent().
+     * Click is only bound to subnav triggers. However, click bubbles up from
+     * subnav items to the trigger.
+     *
+     * @param {KeyboardEvent} event - The keyboard event object.
+     * @param {HTMLElement} target  - The HTML element target.
+     */
+    onClick(event, target) {
+      if (this.isExpanded()) {
+        this.closeSubNav();
+      }
+      else {
+        this.openSubNav(false);
+      }
+      // If the click is directly on the trigger, then we're done.
+      if (target === this.link) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    }
+
+  }
+
+  /**
+   * Represent a navigation menu. May be the top nav or a subnav.
+   *
+   * @prop {HTMLElement|NavItem} elem       - The element that is the nav. May
+   *                                          be a main nav (<nav>) or a subnav
+   *                                          (NavItem).
+   * @prop {Nav}                 topNav     - The instance of Nav that models
+   *                                          the top nav. If this is the top
+   *                                          nav, topNav === this.
+   * @prop {HTMLButtonElement}   toggle     - The <button> in the DOM that
+   *                                          toggles the menu on mobile. NULL
+   *                                          if this is a subnav.
+   * @prop {String}              toggleText - The initial text of the mobile
+   *                                          toggle (so we can reset it when
+   *                                          the mobile nav is closed).
+   * @prop {Array}               items      - Instances of NavItem that model
+   *                                          each element in the nav
+   */
+  class Nav {
+
+    /**
+     * Create a Nav
+     *
+     * @param {HTMLElement|NavItem} elem - The element that is the nav menu.
+     *                                     May be a main nav (<nav>) or a subnav
+     *                                     (NavItem).
+     */
+    constructor(elem) {
+      this.elem = elem;
+      this.topNav = this.getTopNav();
+      // If this is a subnav, we need the correpsonding HTMLElement for
+      // .querySelector()
+      if (elem instanceof NavItem) {
+        elem = elem.item;
+      }
+      this.toggle = elem.querySelector(elem.tagName + ' > button');
+      this.toggleText = this.toggle ? this.toggle.innerText : '';
+      this.items = [];
+      let items = elem.querySelectorAll(elem.tagName + ' > ul > li');
+      items.forEach(
+        item => {
+          this.items.push(new NavItem(item, this));
+        }
+      );
+
+      elem.addEventListener('keydown', this);
+
+      if (this.toggle) {
+        this.toggle.addEventListener('click', this);
+      }
+    }
+
+    // -------------------------------------------------------------------------
+    // Helper Methods.
+    // -------------------------------------------------------------------------
+
+    /**
+     * Get the instance of Nav that represents the top level nav of this
+     * instance.
+     *
+     * @return {Nav}
+     *  Returns the navigation instance.
+     */
+    getTopNav() {
+      let nav = this;
+      while (nav.elem instanceof NavItem) {
+        // If nav is the main nav, nav.elem will be an HTMLElement
+        // (the <nav> element).
+        // If nav.elem is a NavItem, then this is a subNav, so get the Nav that
+        // contains the NavItem.
+        nav = nav.elem.nav;
+      }
+      return nav;
+    }
+
+    /**
+     * Get the instance of Nav that represents the parent of this instance.
+     * If this is the top nav, return this so you can safely call methods on it.
+     *
+     * @return {Nav}
+     *   Returns the navigation instance.
+     */
+    getParentNav() {
+      return this.isSubNav() ? this.elem.nav : this;
+    }
+
+
+    /**
+     * Is this expanded?
+     * If this is a subnav, ask the subnav (NavItem) if it's expanded.
+     * Otherwise (this is the top nav), check aria-expanded.
+     *
+     * @return {Boolean}
+     *   Returns wether or not the item is expanded.
+     */
+    isExpanded() {
+      if (this.elem instanceof NavItem) {
+        return this.elem.isExpanded();
+      }
+
+      return this.elem.getAttribute('aria-expanded') === 'true';
+    }
+
+    /**
+     * Set whether or not this is expanded.
+     * If this is a subnav, let the subnav (NavItem) handled it.
+     * Otherwise (this is the top nav), set aria-expanded.
+     *
+     * @param {String} value - What to set the aria-expanded attribute of
+     *                         this's link to.
+     */
+    setExpanded(value) {
+      if (this.elem instanceof NavItem) {
+        this.elem.setExpanded(value);
+      }
+      else {
+        this.elem.setAttribute('aria-expanded', value);
+        if (this.toggle) {
+          this.toggle.setAttribute('aria-expanded', value);
+        }
+      }
+    }
+
+    /**
+     * Is this rendering the desktop style for the nav?
+     *
+     * @return {Boolean}
+     *  Returns wether or not it is desktop navigation.
+     */
+    isDesktopNav() {
+      return getComputedStyle(this.topNav.toggle).display === 'none';
+    }
+
+    /**
+     * Is this the top nav?
+     *
+     * @return {Boolean}
+     *  Returns wether or not it is the top nav item.
+     */
+    isTopNav() {
+      return this.topNav === this;
+    }
+
+    /**
+     * Is this a subnav?
+     *
+     * @return {Boolean}
+     *  Returns wether or not this is a subnav item.
+     */
+    isSubNav() {
+      return this.topNav !== this;
+    }
+
+    /**
+     * Get the first item in this nav.
+     *
+     * @return {NavItem}
+     *  Returns wether or not this is the first item.
+     */
+    getFirstItem() {
+      return this.items.length ? this.items[0] : null;
+    }
+
+    /**
+     * Get the last item in this nav.
+     *
+     * @return {NavItem}
+     *  Returns wether or not this is the last item.
+     */
+    getLastItem() {
+      return this.items.length ? this.items[this.items.length - 1] : null;
+    }
+
+    /**
+     * Get the link associated with the first item in this nav.
+     *
+     * @return {HTMLAnchorElement}
+     *  Returns the very first link.
+     */
+    getFirstLink() {
+      return this.items.length ? this.getFirstItem().link : null;
+    }
+
+    /**
+     * Get the link associated with the last item in this nav.
+     *
+     * @return {HTMLAnchorElement}
+     *  Returns the very last link.
+     */
+    getLastLink() {
+      return this.items.length ? this.getLastItem().link : null;
+    }
+
+    // -------------------------------------------------------------------------
+    // Functional methods
+    // -------------------------------------------------------------------------
+
+    /**
+     * Set the focus on the specified link in this nav.
+     *
+     * @param {String|Number} link - 'first' | 'last' | 'next'
+     *                                | 'prev' | numerical index
+     * @param {NavItem} currentItem - If link is 'next' or 'prev', currentItem
+     *                                is the NavItem that next / prev is
+     *                                relative to.
+     */
+    focusOn(link, currentItem = null) {
+      var currentIndex = null;
+      var lastIndex = null;
+      if (currentItem) {
+        currentIndex = this.items.indexOf(currentItem);
+        lastIndex = this.items.length - 1;
+      }
+      switch (link) {
+        case 'first':
+          this.getFirstLink().focus();
+          break;
+
+        case 'last':
+          this.getLastLink().focus();
+          break;
+
+        case 'next':
+          if (currentIndex === lastIndex) {
+            this.getFirstLink().focus();
+          }
+          else {
+            this.items[currentIndex + 1].link.focus();
+          }
+          break;
+
+        case 'prev':
+          if (currentIndex === 0) {
+            this.getLastLink().focus();
+          }
+          else {
+            this.items[currentIndex - 1].link.focus();
+          }
+          break;
+
+        default:
+          if (Number.isInteger(link) && link >= 0 && link < this.items.length) {
+            this.items[link].link.focus();
+          }
+          break;
+      }
+    }
+
+    /**
+     * Close any mobile navs that might be open, then mark this mobile nav open.
+     * Optionally force focus on the first element in the nav (for keyboard nav)
+     *
+     * @param {Boolean} focusOnFirst - Whether or not to also focus on the
+     *                                 first element in the subnav.
+     */
+    openMobileNav(focusOnFirst = true) {
+      closeAllMobileNavs();
+
+      this.setExpanded('true');
+      this.toggle.innerText = 'Close';
+      if (focusOnFirst) {
+        this.focusOn('first'); // Focus on the first top level link
+      }
+    }
+
+    /**
+     * Mark this mobile closed, and restore the button text to what it was
+     * initially.
+     */
+    closeMobileNav() {
+      this.setExpanded('false');
+      this.toggle.innerText = this.toggleText;
+    }
+
+    // -------------------------------------------------------------------------
+    // Event handlers
+    // -------------------------------------------------------------------------
+
+    /**
+     * Handler for all events attached to an instance of this class. This method
+     * must exist when events are bound to an instance of a class
+     * (vs a function). This method is called for all events bound to an
+     * instance. It inspects the instance (this) for an appropriate handler
+     * based on the event type. If found, it dispatches the event to the
+     * appropriate handler.
+     *
+     * @param {KeyboardEvent} event - The keyboard event object.
+     *
+     * @return {*}
+     *  Whatever the dispatched handler returns (in our case nothing)
+     */
+    handleEvent(event) {
+      event = event || window.event;
+      // If this class has an onEvent method, e.g. onClick, onKeydown,
+      // invoke it.
+      const handler = 'on'
+        + event.type.charAt(0).toUpperCase()
+        + event.type.slice(1);
+
+      if (typeof this[handler] === 'function') {
+        // The element that was clicked.
+        const target = event.target || event.srcElement;
+        return this[handler](event, target);
+      }
+    }
+
+    /**
+     * Handler for click events. click is only bound to the mobile toggle.
+     * Dispatched from this.handleEvent().
+     *
+     * @param {KeyboardEvent} event   - The keyboard event object.
+     * @param {HTMLElement}   target  - The HTML Element target object.
+     */
+    onClick(event, target) {
+      if (target === this.toggle) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.isExpanded()) {
+          this.closeMobileNav();
+        }
+        else {
+          this.openMobileNav(false);
+        }
+      }
+    }
+
+    /**
+     * Handler for keydown events. keydown is bound to all Nav's.
+     * Dispatched from this.handleEvent().
+     *
+     * @param {KeyboardEvent} event   - The keyboard event object.
+     * @param {HTMLElement}   target  - The HTML Element target object.
+     */
+    onKeydown(event, target) {
+      const theKey = event.key || event.keyCode;
+
+      if (isEsc(theKey)) {
+        if (this.isTopNav()) {
+          if (!this.isDesktopNav()) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.closeMobileNav();
+            this.toggle.focus();
+          }
+        }
+        else {
+          if (this.isExpanded()) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.elem.closeSubNav(true);
+          }
+        }
+      }
+      else if (isEnter(theKey) || isSpace(theKey)) {
+        if (target === this.toggle) {
+          event.preventDefault();
+          event.stopPropagation();
+          if (!this.isExpanded()) {
+            this.openMobileNav();
+          }
+        }
+      }
+    }
+
+  }
+
+  // ---------------------------------------------------------------------------
+  // Globals.
+  // ---------------------------------------------------------------------------
+
+  // Variables.
+
+  // All main navs.
+  const navs = document.querySelectorAll('.' + navClass);
+  // Global record of all main navs - used by closeAllMobileNavs.
+  let theNavs = [];
+  // Global record of all sub navs - used by closeAllSubNavs.
+  let theSubNavs = [];
+
+  // Functions
+  const closeAllSubNavs = () => {
+    theSubNavs.forEach(
+      subNav => { subNav.closeSubNav(); }
+    );
+  };
+  const closeAllMobileNavs = () => {
+    theNavs.forEach(
+      theNav => { theNav.closeMobileNav(); }
+    );
+  };
+
+
+  // ---------------------------------------------------------------------------
+  // Execution Code.
+  // ---------------------------------------------------------------------------
+
+  // Process each nav.
+  let firstZindex;
+  navs.forEach((nav, index) => {
+    const theNav = new Nav(nav);
+    theNavs.push(theNav);
+
+    if (index === 0) {
+      firstZindex = getComputedStyle(nav, null).zIndex;
+    }
+    else {
+      nav.style.zIndex = firstZindex - 300 * index;
+    }
+  }); // navs.forEach
+
+  // Clicking anywhere outside a nav closes all navs.
+  document.addEventListener('click', event => {
+    // The element that was clicked.
+    const target = event.target || event.srcElement;
+    // If target is not under a main nav close all navs.
+    if (!target.matches('.' + navClass + ' ' + target.tagName)) {
+      closeAllSubNavs();
+      closeAllMobileNavs();
+    }
+  }, false);
+
+}); // on DOMContentLoaded.
diff --git a/core/js/decanter.min.js b/core/js/decanter.min.js
deleted file mode 100644
index e69de29bb..000000000
diff --git a/core/scss/components/index.scss b/core/scss/components/index.scss
index 2235b2f74..253e7e668 100644
--- a/core/scss/components/index.scss
+++ b/core/scss/components/index.scss
@@ -17,6 +17,7 @@
   'link/index',
   'logo/index',
   'lockup/index',
+  'main-nav/index',
   'quote/index',
   'site-search/index',
   'skipnav/index';
diff --git a/core/scss/components/main-nav/_main-nav--center.scss b/core/scss/components/main-nav/_main-nav--center.scss
new file mode 100644
index 000000000..a8c0defcf
--- /dev/null
+++ b/core/scss/components/main-nav/_main-nav--center.scss
@@ -0,0 +1,7 @@
+@charset "UTF-8";
+
+.su-main-nav--center {
+  ul {
+    justify-content: center;
+  }
+}
diff --git a/core/scss/components/main-nav/_main-nav--light.scss b/core/scss/components/main-nav/_main-nav--light.scss
new file mode 100644
index 000000000..e80bc990e
--- /dev/null
+++ b/core/scss/components/main-nav/_main-nav--light.scss
@@ -0,0 +1,185 @@
+@charset "UTF-8";
+
+.su-main-nav.su-main-nav--light {
+  .su-main-nav__toggle {
+    &[aria-expanded="true"] {
+      &::before {
+        background-color: $color-driftwood;
+      }
+
+      &:hover::before {
+        background-color: $color-dark-red;
+      }
+
+      &:active::before {
+        background-color: $color-black;
+      }
+    }
+  }
+
+  // general menu styles
+  ul {
+    background-color: $color-white;
+  }
+
+  li {
+    a {
+      color: $color-black;
+      border-bottom-color: #d9d9d9;
+
+      &:hover,
+      &:focus {
+        &::before {
+          background-color: $color-black;
+        }
+      }
+
+      &:active {
+        color: $color-dark-red;
+
+        &::before {
+          background-color: $color-dark-red;
+        }
+      }
+    }
+
+    &.su-main-nav__item--current {
+      > a {
+        color: $color-dark-red;
+
+        &::before {
+          background-color: $color-dark-red;
+        }
+      }
+    }
+
+    @include grid-media-max('md') {
+      &.su-main-nav__item--parent {
+        > a::after {
+          background: url("#{$image-path}/plus-black.svg") no-repeat 0 0;
+          background-size: 100%;
+        }
+
+        &.su-main-nav__item--expanded > a {
+          ::after {
+            background: url("#{$image-path}/minus-black.svg") no-repeat 0 0;
+            background-size: 100%;
+          }
+
+          &:focus::before {
+            background-color: transparent;
+          }
+
+          &[aria-expanded="true"] {
+            &:hover::before {
+              background-color: $color-black;
+            }
+
+            &:active::before {
+              background-color: $color-dark-red;
+            }
+          }
+        }
+      }
+
+      &.su-main-nav__item--current.su-main-nav__item--expanded {
+        > a {
+          color: $color-black;
+
+          &::before {
+            background-color: $color-black;
+          }
+
+          &:focus::before {
+            background-color: $color-black;
+          }
+
+          &[aria-expanded="true"]:active {
+            color: $color-dark-red;
+          }
+        }
+      }
+    }
+  }
+
+  // desktop first level menu style override
+  > ul {
+    @include grid-media('lg') {
+      background-color: transparent;
+
+      > li {
+        > a {
+          &:hover,
+          &:focus {
+            color: $color-dark-red;
+
+            &::before {
+              background-color: $color-dark-red;
+            }
+          }
+
+          &:active {
+            color: $color-black;
+
+            &::before {
+              background-color: $color-black;
+            }
+          }
+
+          &[aria-expanded="true"] {
+            color: $color-black;
+
+            &::before {
+              background-color: $color-driftwood;
+            }
+
+            &:hover {
+              color: $color-dark-red;
+
+              &::before {
+                background-color: $color-dark-red;
+              }
+            }
+          }
+        }
+
+        &.su-main-nav__item--current {
+          > a {
+            color: $color-black;
+
+            &::before {
+              background-color: $color-driftwood;
+            }
+
+            &:hover,
+            &:focus {
+              color: $color-dark-red;
+
+              &::before {
+                background-color: $color-dark-red;
+              }
+            }
+          }
+
+          &.su-main-nav__item--expanded {
+            > a:focus {
+              color: $color-black;
+
+              &::before {
+                background-color: $color-driftwood;
+              }
+            }
+
+            > a[aria-expanded="true"]:hover {
+              color: $color-dark-red;
+
+              &::before {
+                background-color: $color-dark-red;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/core/scss/components/main-nav/_main-nav--mobile-search.scss b/core/scss/components/main-nav/_main-nav--mobile-search.scss
new file mode 100644
index 000000000..4ba1ae919
--- /dev/null
+++ b/core/scss/components/main-nav/_main-nav--mobile-search.scss
@@ -0,0 +1,35 @@
+@charset "UTF-8";
+
+.su-main-nav--mobile-search {
+  .su-site-search {
+    display: none; //not displayed on desktop
+  }
+
+  .su-main-nav__toggle[aria-expanded="true"] {
+    @include grid-media-max('md') {
+      + .su-main-nav__menu-lv1 {
+        @include padding(8rem null null null);
+        + .su-site-search {
+          @include padding(2rem);
+          display: block;
+          position: absolute;
+          width: 100%;
+          background-color: $color-black;
+
+          .su-site-search__submit {
+            top: 3.1rem;
+            right: 3.1rem;
+          }
+        }
+      }
+    }
+
+    + .su-main-nav__menu-lv1 {
+      + .su-site-search {
+        @include grid-media-only('md') {
+          width: 24em;
+        }
+      }
+    }
+  }
+}
diff --git a/core/scss/components/main-nav/_main-nav--right.scss b/core/scss/components/main-nav/_main-nav--right.scss
new file mode 100644
index 000000000..0b65cc73b
--- /dev/null
+++ b/core/scss/components/main-nav/_main-nav--right.scss
@@ -0,0 +1,7 @@
+@charset "UTF-8";
+
+.su-main-nav--right {
+  ul {
+    justify-content: flex-end;
+  }
+}
diff --git a/core/scss/components/main-nav/_main-nav.scss b/core/scss/components/main-nav/_main-nav.scss
new file mode 100644
index 000000000..a532bbb70
--- /dev/null
+++ b/core/scss/components/main-nav/_main-nav.scss
@@ -0,0 +1,418 @@
+@charset "UTF-8";
+//
+// Main Navigation
+//
+// The primary site navigation that is usually in the header region of a website.
+// It is a horizontal menu bar on larger breakpoints, while on smaller breakpoints,
+// it changes into a vertical menu and the display is toggled by a button.
+//
+// This component is implemented to be accessible. For more information, please see:
+//
+// https://github.com/SU-SWS/decanter/wiki/About-the-Main-Nav-Component
+//
+//**Modifier classes for the Main Nav:**
+// - .su-main-nav--light          - light colored theme
+// - .su-main-nav--mobile-search  - include search form inside the mobile nav
+// - .su-main-nav--center         - center the nav
+// - .su-main-nav--right          - right justify the nav
+//
+//**Modifier classes for the hamburger toggle button:**
+// - .su-main-nav__toggle--center - center the toggle
+// - .su-main-nav__toggle--right - right justify the toggle
+//
+// .su-main-nav--light          - light colored theme
+// .su-main-nav--mobile-search  - include search form inside the mobile nav
+// .su-main-nav--center         - center the nav
+// .su-main-nav--right          - right justify the nav
+//
+// Markup: ../templates/components/main-nav/main-nav.twig
+//
+// Style guide: Components.Main Navigation
+//
+
+$custom-active: #ec0513; //custom high contrast active/current link border for accessibility
+.su-main-nav {
+  @include font-smoothing;
+  @include sans;
+  display: block;
+  position: relative;
+  z-index: 9999;
+
+  // general menu styles
+  ul {
+    @include margin(0 null);
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    list-style: none;
+    background-color: $color-black;
+  }
+
+  li {
+    @include margin(null null 0);
+
+    a {
+      @include fancy-hover($color: $color-white, $active: $custom-active, $position: 'left');
+      @include padding(1.6rem 4.8rem 1.6rem 2.4rem);
+      display: block;
+      color: $color-white;
+      font-weight: $font-normal;
+      font-size: 1.8rem;
+      border-bottom: $color-cool-grey solid 1px;
+      outline: 0;
+
+      &:active {
+        font-weight: $font-x-bold;
+      }
+    }
+
+    > ul {
+      display: none;
+    }
+
+    &.su-main-nav__item--expanded {
+      > ul {
+        display: flex;
+      }
+    }
+
+    &.su-main-nav__item--current > a {
+      font-weight: $font-x-bold;
+
+      &::before {
+        visibility: visible;
+        transform: scaleY(1);
+        background-color: $custom-active;
+        transition: left .1s ease-out;
+      }
+
+      &:hover,
+      &:focus {
+        &::before {
+          left: 6px;
+        }
+      }
+    }
+
+    &.su-main-nav__item--parent {
+      > a::after {
+        background: url("#{$image-path}/plus-white.svg") no-repeat 0 0;
+        background-size: 100%;
+        content: "";
+        display: inline-block;
+        position: absolute;
+        right: 2rem;
+        top: 2.06rem;
+        height: 1.8rem;
+        width: 1.8rem;
+
+        @include grid-media('lg') {
+          @include margin(null null 1px 6px);
+          background: url("#{$image-path}/caret-down-black.svg") no-repeat 0 0;
+          background-size: 100%;
+          position: relative;
+          right: 0;
+          top: 0;
+          height: 11px; //small svg gets chopped off if use em instead of px
+          width: 11px;
+          transition: transform .3s ease-out;
+        }
+      }
+
+      &.su-main-nav__item--expanded > a {
+        &::after {
+          background: url("#{$image-path}/minus-white.svg") no-repeat 0 0;
+          background-size: 100%;
+
+          @include grid-media('lg') {
+            background: url("#{$image-path}/caret-down-black.svg") no-repeat 0 0;
+            background-size: 100%;
+            transform: rotate(180deg);
+          }
+        }
+
+        @include grid-media-max('md') {
+          &::before {
+            background-color: transparent;
+          }
+
+          &:hover::before {
+            background-color: $color-white;
+          }
+
+          &:active::before {
+            background-color: $custom-active;
+          }
+        }
+      }
+    }
+
+    @include grid-media-max('md') {
+      &.su-main-nav__item--current.su-main-nav__item--expanded {
+        > a {
+          font-weight: $font-bold;
+
+          &::before {
+            background-color: $color-white;
+          }
+        }
+      }
+    }
+  }
+
+  //top level menu styles
+  > ul {
+    > li {
+      @include margin(null null 0);
+
+      > a {
+        font-weight: $font-bold;
+      }
+    }
+
+    // top level menu desktop styles
+    @include grid-media('lg') {
+      @include padding(null null null 0);
+      flex-direction: row;
+      flex-wrap: wrap;
+      background-color: transparent;
+
+      > li {
+        > a {
+          @include fancy-hover;
+          @include padding(null 0);
+          @include margin(0 1.2em 0 0);
+          font-size: 2.1rem;
+          border-bottom: 0;
+
+          &:active {
+            font-weight: $font-bold;
+          }
+
+          &[aria-expanded="true"]::before {
+            visibility: visible;
+            transform: scaleX(1);
+            background-color: $color-black;
+          }
+        }
+
+        &:last-child > a {
+          @include margin(null 0 null null);
+        }
+
+        &.su-main-nav__item--current > a {
+          font-weight: $font-bold;
+        }
+
+        &.su-main-nav__item--expanded > a {
+          &:focus::before {
+            background-color: $color-black;
+          }
+
+          &[aria-expanded="true"]:hover::before {
+            background-color: $color-dark-red;
+          }
+        }
+      }
+    }
+  }
+
+  // When js is disabled, submenus is visible when parent trigger is hovered
+  &.no-js {
+    //Expand everything on mobile
+    @include grid-media-max('md') {
+      .su-main-nav__toggle[aria-expanded="false"] + .su-main-nav__menu-lv1 {
+        display: flex;
+      }
+
+      li > ul {
+        display: flex;
+      }
+    }
+
+    //On desktop, if mouse user hovers over a parent menu item, submenu is expanded
+    @include grid-media('lg') {
+      li:hover > ul {
+        display: flex;
+      }
+    }
+  }
+}
+
+.su-main-nav__toggle {
+  @include grid-media-max('md') {
+    @include fancy-hover;
+    @include padding(0 0 2rem);
+    @include margin(0);
+    display: flex;
+    flex-direction: column-reverse;
+    align-items: center;
+    width: 40px;
+    background-color: transparent;
+    color: $color-black;
+    font-size: 1.6rem;
+    font-weight: $font-normal;
+    line-height: .7;
+
+    &::after {
+      @include margin(0 auto);
+      display: inline-block;
+      width: 30px;
+      height: 26px;
+      background: url("#{$image-path}/hamburger-black.svg") no-repeat 3px 0;
+      content: "";
+    }
+
+    &[aria-expanded="true"] {
+      &::before {
+        visibility: visible;
+        transform: scaleX(1);
+        background-color: $color-black;
+      }
+
+      &::after {
+        width: 20px;
+        background: url("#{$image-path}/close-black.svg") no-repeat 3px 0;
+        background-size: 16px 16px;
+      }
+
+      &:hover::before {
+        background-color: $color-dark-red;
+      }
+
+      &:active::before {
+        background-color: $color-black;
+      }
+    }
+
+    &:hover,
+    &:active,
+    &:focus {
+      background-color: transparent;
+      color: $color-black;
+      box-shadow: none;
+    }
+
+    &[aria-expanded="false"] + .su-main-nav__menu-lv1 {
+      display: none;
+    }
+
+    &[aria-expanded="true"] + .su-main-nav__menu-lv1 {
+      position: absolute;
+    }
+
+    //toggle button variants
+    &--center {
+      @include margin(null auto);
+    }
+
+    &--right {
+      @include margin(null 0 null auto);
+    }
+  }
+
+  @include grid-media-only('md') {
+    &[aria-expanded="true"]  + .su-main-nav__menu-lv1 {
+      max-width: 24em;
+    }
+  }
+
+  @include grid-media('lg') {
+    display: none;
+  }
+}
+
+.su-main-nav__menu-lv1 > li {
+  @include grid-media('lg') {
+    > a {
+      color: $color-black;
+      transition: color .3s ease-out;
+
+      &:hover,
+      &:focus {
+        color: $color-dark-red;
+      }
+
+      &:active,
+      &[aria-expanded="true"] {
+        color: $color-black;
+      }
+
+      &[aria-expanded="true"]:hover {
+        color: $color-dark-red;
+      }
+    }
+  }
+
+  &.su-main-nav__item--current {
+    > a {
+      &::before {
+        transform: scaleY(1);
+        background-color: $custom-active;
+      }
+
+      &:hover,
+      &:focus {
+        &::before {
+          background-color: $custom-active;
+        }
+      }
+    }
+
+    @include grid-media-max('md') {
+      &.su-main-nav__item--expanded {
+        > a:focus::before {
+          left: 0;
+          background-color: $color-white;
+        }
+
+        > a[aria-expanded="true"] {
+          &:hover::before {
+            left: 6px;
+          }
+
+          &:active {
+            font-weight: $font-x-bold;
+
+            &::before {
+              background-color: $custom-active;
+            }
+          }
+        }
+      }
+    }
+
+    @include grid-media('lg') {
+      > a {
+        &::before {
+          background-color: $color-black;
+        }
+
+        &:hover,
+        &:focus {
+          &::before {
+            left: 0;
+            background-color: $color-dark-red;
+          }
+        }
+      }
+    }
+  }
+}
+
+.su-main-nav__menu-lv2 {
+  @include padding(null null null 2rem);
+
+  @include grid-media('lg') {
+    @include padding(1px null null 1.2rem);
+    @include margin(null null null -1.8rem);
+    @include box-shadow($depth: 'medium', $stroke: none);
+    z-index: 11111; //When menu wrap to 2nd line make sure dropdown covers up top level links
+    position: absolute;
+    max-width: 30rem;
+
+    li:last-child a {
+      border-bottom: 0;
+    }
+  }
+}
diff --git a/core/scss/components/main-nav/index.scss b/core/scss/components/main-nav/index.scss
new file mode 100644
index 000000000..204c0749f
--- /dev/null
+++ b/core/scss/components/main-nav/index.scss
@@ -0,0 +1,12 @@
+@charset "UTF-8";
+
+///
+/// ROLL UP
+///
+
+@import
+'main-nav',
+'main-nav--center',
+'main-nav--light',
+'main-nav--mobile-search',
+'main-nav--right';
diff --git a/core/scss/components/site-search/_site-search.scss b/core/scss/components/site-search/_site-search.scss
index 8bbb0b25f..a233df43f 100644
--- a/core/scss/components/site-search/_site-search.scss
+++ b/core/scss/components/site-search/_site-search.scss
@@ -15,13 +15,13 @@
 
 .su-site-search__input {
   @include font-smoothing;
-  @include padding(.3em 1em);
+  @include padding(.6rem 2rem);
 
   display: inline-block;
   height: 40px;
   max-width: 100%;
   border-radius: 30px;
-  font-size: .8em;
+  font-size: 1.6rem;
 
   &::placeholder {
     color: $color-black;
diff --git a/core/scss/utilities/mixins/animation/_fancy-hover.scss b/core/scss/utilities/mixins/animation/_fancy-hover.scss
new file mode 100644
index 000000000..0da04b5bf
--- /dev/null
+++ b/core/scss/utilities/mixins/animation/_fancy-hover.scss
@@ -0,0 +1,107 @@
+@charset "UTF-8";
+
+//
+// @fancy-hover($color, $active, $position, $thickness)
+//
+// When an element (e.g., a link) is hovered over, display an animation of a border that expands out from the middle next to the element.
+//
+// $color - Hover/focus border color, e.g., #eeeeee. Defaults to $color-dark-red.
+// $active - Active border color. Defaults to $color-black.
+// $position - The position of the border relative to the element the mixin is applied to. The default is 'bottom' and the other choices are 'top', 'left' and 'right'.
+// $thickness - The thickness of the border, e.g., '3px', '1em'. The default is '6px'.
+//
+// Style guide: Mixins.Animation.Fancyhover
+//
+@mixin fancy-hover($color: $color-dark-red, $active: $color-black, $position: 'bottom', $thickness: '6px') {
+  text-decoration: none;
+  position: relative;
+
+  &::before {
+    content: "";
+    position: absolute;
+    visibility: hidden;
+    transition: transform .3s ease-in, background-color .3s ease-in;
+    z-index: 1;
+  }
+
+  &:hover,
+  &:focus,
+  &:active {
+    text-decoration: none;
+
+    &::before {
+      visibility: visible;
+      transition: transform .3s ease-out, background-color .3s ease-out;
+    }
+  }
+
+  &:hover,
+  &:focus {
+    &::before {
+      background-color: $color;
+    }
+  }
+
+  &:active {
+    &::before {
+      background-color: $active;
+    }
+  }
+
+  @if ($position == 'bottom' or $position == 'top') {
+    &::before {
+      width: 100%;
+      height: #{$thickness};
+      left: 0;
+      transform: scaleX(0);
+    }
+
+    &:hover,
+    &:focus,
+    &:active {
+      &::before {
+        transform: scaleX(1);
+      }
+    }
+
+    @if ($position == 'bottom') {
+      @include padding(null null .8em);
+
+      &::before {
+        bottom: 0;
+      }
+    } @elseif ($position == 'top') {
+      @include padding(.8em null null);
+
+      &::before {
+        top: 0;
+      }
+    }
+
+  } @elseif ($position == 'left' or $position == 'right') {
+    &::before {
+      height: 100%;
+      width: #{$thickness};
+      bottom: 0;
+      transform: scaleY(0);
+    }
+
+    &:hover,
+    &:focus,
+    &:active {
+      &::before {
+        transform: scaleY(1);
+      }
+    }
+
+    @if ($position == 'left') {
+      &::before {
+        left: 0;
+      }
+    } @elseif ($position == 'right') {
+      &::before {
+        right: 0;
+      }
+    }
+  }
+}
diff --git a/core/scss/utilities/mixins/animation/index.scss b/core/scss/utilities/mixins/animation/index.scss
new file mode 100644
index 000000000..19e3c7ba3
--- /dev/null
+++ b/core/scss/utilities/mixins/animation/index.scss
@@ -0,0 +1,11 @@
+@charset "UTF-8";
+
+//
+// Animation
+//
+// Mixins for adding animations
+//
+// Style guide: Mixins.Animation
+//
+
+@import 'fancy-hover';
diff --git a/core/scss/utilities/mixins/index.scss b/core/scss/utilities/mixins/index.scss
index ed9d6958b..dab2d9fd3 100644
--- a/core/scss/utilities/mixins/index.scss
+++ b/core/scss/utilities/mixins/index.scss
@@ -6,6 +6,7 @@
 
 @import
   'accessibility/index',
+  'animation/index',
   'button/index',
   'breakpoint/index',
   'cta/index',
diff --git a/core/templates/components/brand-bar/brand-bar.twig b/core/templates/components/brand-bar/brand-bar.twig
index 11ea534fa..a3cea69ab 100644
--- a/core/templates/components/brand-bar/brand-bar.twig
+++ b/core/templates/components/brand-bar/brand-bar.twig
@@ -15,5 +15,5 @@
  */
 #}
 <section id="su-brand-bar" class="su-brand-bar {{ modifier_class }}">
-  <div class="su-brand-bar__container"><a{{ attributes }} class="su-brand-bar__logo" href="https://stanford.edu">Stanford University</a></div>
+  <div class="su-brand-bar__container"><a {{- attributes }} class="su-brand-bar__logo" href="https://stanford.edu">Stanford University</a></div>
 </section>
\ No newline at end of file
diff --git a/core/templates/components/cta/cta.twig b/core/templates/components/cta/cta.twig
index bcc3514d2..e98798c66 100644
--- a/core/templates/components/cta/cta.twig
+++ b/core/templates/components/cta/cta.twig
@@ -21,13 +21,11 @@
  * - icon_alt: Alt text for the icon image.
  */
 #}
-<a{{ attributes }} href="{{ link|default("https://stanford.edu") }}" class="su-cta {{ modifier_class }}">
+<a {{- attributes }} href="{{ link|default("https://stanford.edu") }}" class="su-cta {{ modifier_class }}">
   <img src="{{ image_src|default("../../../img/hero-banner.png") }}" alt="{{ image_alt|default("Alt text for image") }}" class="su-cta__img" />
-
   {# CTA icon #}
-  {% if icon_src is not empty %}
+  {%- if icon_src is not empty -%}
     <img src="{{ icon_src }}" alt="{{ icon_alt|default("Alt text for icon") }}" class="su-cta__icon" role="presentation" />
-  {% endif %}
-
+  {% endif -%}
   <h2 class="su-cta__button">{{ button_text|default("Button text") }}</h2>
 </a> <!-- cta end -->
diff --git a/core/templates/components/logo/logo.twig b/core/templates/components/logo/logo.twig
index 65706db39..a7a20f36c 100644
--- a/core/templates/components/logo/logo.twig
+++ b/core/templates/components/logo/logo.twig
@@ -12,4 +12,4 @@
  * - logo_text: The text for the ligature logo - either Stanford<br>University or Stanford.
  */
 #}
-<a{{ attributes }} class="su-logo {{ modifier_class }}" href="{{ href|default('https://www.stanford.edu') }}">{{ logo_text|default('Stanford<br>University')|raw }}</a>
+<a {{ attributes }} class="su-logo {{- modifier_class }}" href="{{ href|default('https://www.stanford.edu') }}">{{ logo_text|default('Stanford<br>University')|raw }}</a>
diff --git a/core/templates/components/main-nav/main-nav.json b/core/templates/components/main-nav/main-nav.json
new file mode 100644
index 000000000..dea2880f1
--- /dev/null
+++ b/core/templates/components/main-nav/main-nav.json
@@ -0,0 +1,114 @@
+{
+  "modifier_class": "",
+  "toggle_text": "Menu",
+  "list_items": [
+    {
+      "href": "/",
+      "text": "Home"
+    },
+    {
+      "href": "#",
+      "text": "Useful Websites",
+      "current": true,
+      "lv2": [
+        {
+          "href": "https://www.stanford.edu",
+          "text": "Stanford",
+          "target": "_blank"
+        },
+        {
+          "href": "https://uit.stanford.edu/sws",
+          "text": "Stanford Web Services",
+          "target": "_blank"
+        },
+        {
+          "href": "https://ucomm.stanford.edu/",
+          "text": "University Communications"
+        },
+        {
+          "href": "/section-components.html",
+          "text": "Decanter components",
+          "current": true
+        }
+      ]
+    },
+    {
+      "href": "#",
+      "text": "Tools & Documentation",
+      "lv2": [
+        {
+          "href": "https://www.figma.com/",
+          "text": "Figma",
+          "attributes": [
+            {
+              "attr": "target",
+              "value": "_blank"
+            },
+            {
+              "attr": "rel",
+              "value": "external"
+            }
+          ]
+        },
+        {
+          "href": "https://twig.symfony.com/doc/2.x/",
+          "text": "Twig",
+          "attributes": [
+            {
+              "attr": "target",
+              "value": "_blank"
+            },
+            {
+              "attr": "rel",
+              "value": "external"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "href": "https://stackoverflow.com/",
+      "text": "Developer Help",
+      "attributes": [
+        {
+          "attr": "target",
+          "value": "_blank"
+        },
+        {
+          "attr": "rel",
+          "value": "external"
+        }
+      ]
+    },
+    {
+      "href": "#",
+      "text": "Other Useful Resources",
+      "lv2": [
+        {
+          "href": "https://www.stanford.edu/faculty-staff-gateway/",
+          "text": "Faculty & Staff Gateway"
+        },
+        {
+          "href": "https://www.stanford.edu/student-gateway/",
+          "text": "Student Gateway"
+        },
+        {
+          "href": "https://uit.stanford.edu/launchpad",
+          "text": "What Happens If My Second Level Link Text is Really Really Long"
+        },
+        {
+          "href": "https://uit.stanford.edu/launchpad",
+          "text": "Tools Launchpad"
+        }
+      ]
+    }
+  ],
+  "mobile_search": {
+    "action": "https://www.stanford.edu/search",
+    "method": "get",
+    "search_label": "Search Stanford sites",
+    "placeholder": "Search Stanford sites",
+    "search_input_name": "q",
+    "search_icon_src": "/img/icon-search.svg"
+  }
+}
diff --git a/core/templates/components/main-nav/main-nav.twig b/core/templates/components/main-nav/main-nav.twig
new file mode 100644
index 000000000..1c4d58896
--- /dev/null
+++ b/core/templates/components/main-nav/main-nav.twig
@@ -0,0 +1,73 @@
+{#
++/**
++ * @file
++ * Main Navigation Component
++ *
++ * A navigation menu for the website.
++ *
++ * Available variables:
++ * - attributes: For additional HTML attributes not already provided.
++ * - modifier_class: Additional css classes to change look and behaviour of the component.
++ * - toggle_modifier_class: Additional css classes to change look and behaviour of the toggle.
++ * - aria_label: Aria label for the <nav> element. Default is "main menu". If there are multiple instances of the component on the same page, use a different aria_label for each instance.
++ *
++ */
++#}
+<nav {{- attributes }} class="su-main-nav no-js {{ modifier_class }}" aria-label="{{ aria_label|default('main menu') }}">
+  <button class="su-main-nav__toggle {{- toggle_modifier_class }}" aria-expanded="false">{{ toggle_text }}</button>
+  <ul class="su-main-nav__menu-lv1">
+    {% spaceless %}
+    {% if list_items is iterable %}
+      {# If no custom markup, generate markup based on structured data #}
+      {% for item in list_items %}
+        {% set is_parent = item.lv2 is empty ? false : true %}
+        <li class="{% if is_parent %}su-main-nav__item--parent{% endif %} {% if item.current %}su-main-nav__item--current{% endif %}">
+          {% set the_attrs = "" %}
+          {% if item.attributes is not empty and item.attributes is iterable %}
+            {% for pair in item.attributes %}
+              {% set the_attrs = the_attrs ~ ' ' ~ pair.attr ~ '="' ~ pair.value ~ '"' %}
+            {% endfor %}
+          {% endif %}
+          <a href="{{ item.href }}" {{ the_attrs }}>{{ item.text }}</a>
+          {% if is_parent -%}
+            <ul class="su-main-nav__menu-lv2">
+              {%- for item_lv2 in item.lv2 -%}
+                <li class="{% if item_lv2.current %}su-main-nav__item--current{% endif %}">
+                  {% set the_attrs = "" %}
+                  {% if item_lv2.attributes is not empty and item_lv2.attributes is iterable %}
+                    {% for pair in item_lv2.attributes %}
+                      {% set the_attrs = the_attrs ~ ' ' ~ pair.attr ~ '="' ~ pair.value ~ '"' %}
+                    {% endfor %}
+                  {% endif %}
+                  <a href="{{ item_lv2.href }}" {{ the_attrs }}>{{ item_lv2.text }}</a>
+                </li>
+              {% endfor %}
+            </ul>
+          {% endif -%}
+        </li>
+      {% endfor %}
+    {% else %}
+      {# If custom markup is provided, emit it as is #}
+      {{ list_items }}
+    {% endif %}
+    {% endspaceless %}
+  </ul>
+  {% if "su-main-nav--mobile-search" in modifier_class %}
+    {% include "@decanter/components/site-search/site-search.twig" with
+      {
+        "action": mobile_search.action,
+        "method": mobile_search.method,
+        "search_label": mobile_search.search_label,
+        "placeholder": mobile_search.placeholder,
+        "search_input_name": mobile_search.search_input_name,
+        "search_icon_src": mobile_search.search_icon_src
+      }
+      only
+    %}
+  {% endif %}
+</nav>
+<script>
+  // Do this immediately to minimize FOUC.
+  NodeList.prototype.forEach = NodeList.prototype.forEach || Array.prototype.forEach;
+  document.querySelectorAll('nav.su-main-nav').forEach(nav => { nav.classList.remove('no-js'); } );
+</script>
diff --git a/core/templates/components/site-search/site-search.twig b/core/templates/components/site-search/site-search.twig
index 470b446c9..966bdb6fa 100644
--- a/core/templates/components/site-search/site-search.twig
+++ b/core/templates/components/site-search/site-search.twig
@@ -20,12 +20,12 @@
  *
  */
 #}
-<div{{ attributes }} class="su-site-search {{ modifier_class }}" role="search">
+<div {{- attributes }} class="su-site-search {{ modifier_class }}" role="search">
  <form action="{{ action }}" method="{{ method }}" accept-charset="UTF-8">
   <label class="su-site-search__sr-label" for="{{ search_input_name|default('search-field') }}">{{ search_label|default('Search this site') }}</label>
-  <input{{ input_attributes }} type="text" id="{{ search_input_name|default('search-field') }}" name="{{ search_input_name|default('search-field') }}" class="su-site-search__input" placeholder="{{ placeholder }}" maxlength="128">
-  <button{{ button_attributes }} type="submit" name="submit" class="su-site-search__submit" aria-label="Search"><img src="{{ search_icon_src }}" alt="Search button" /></button>
-  {# Any additional eg. hidden input fields #}
-  {{ additional_fields }}
+  <input {{- input_attributes }} type="text" id="{{ search_input_name|default('search-field') }}" name="{{ search_input_name|default('search-field') }}" class="su-site-search__input" placeholder="{{- placeholder -}}" maxlength="128">
+  <button {{- button_attributes }} type="submit" name="submit" class="su-site-search__submit" aria-label="Search"><img src="{{ search_icon_src }}" alt="Search button" /></button>
+  {#- Any additional eg. hidden input fields -#}
+  {{- additional_fields -}}
  </form>
 </div>
diff --git a/kss/builder/decanter/kss-assets/css/kss.css b/kss/builder/decanter/kss-assets/css/kss.css
index 938a5f819..cb7919319 100644
--- a/kss/builder/decanter/kss-assets/css/kss.css
+++ b/kss/builder/decanter/kss-assets/css/kss.css
@@ -410,7 +410,7 @@ sub {
   #kss-node > .su-brand-bar {
     position: fixed;
     top: 0;
-    z-index: 9999; }
+    z-index: 22222; }
 
 .main-page-layout {
   display: grid;
@@ -764,7 +764,6 @@ sub {
   clear: left;
   border: 2px dashed transparent;
   position: relative;
-  z-index: 0;
   margin: -2px -2px 28px; }
   .kss-modifier__example:last-child {
     margin-bottom: 0; }
@@ -785,6 +784,13 @@ sub {
 #kss-node.kss-fullscreen-mode .main-page-layout {
   display: block; }
 
+@media (min-width: 992px) {
+  #kss-node.kss-fullscreen-mode .su-main-nav {
+    margin-left: 1.6em; }
+    #kss-node.kss-fullscreen-mode .su-main-nav.su-main-nav--right {
+      margin-right: 3em;
+      margin-left: 0; } }
+
 .kss-guides-mode.kss-fullscreen-mode .kss-modifier__example:before {
   left: auto;
   right: 0; }
@@ -1559,6 +1565,21 @@ body {
     .main-nav li:last-child > a {
       margin: 0; }
 
+#kssref-components-main-navigation .kss-modifier__example:nth-child(6) nav {
+  z-index: 9899; }
+
+#kssref-components-main-navigation .kss-modifier__example:nth-child(9) nav {
+  z-index: 9799; }
+
+#kssref-components-main-navigation .kss-modifier__example:nth-child(12) nav {
+  z-index: 9699; }
+
+#kssref-components-main-navigation .kss-modifier__example:nth-child(15) nav {
+  z-index: 9599; }
+
+#kssref-components-main-navigation .kss-modifier__example:nth-child(18) nav {
+  z-index: 9499; }
+
 .kss-markup {
   overflow: scroll;
   margin: 30px 0;
diff --git a/kss/builder/decanter/scss/_brand-bar.scss b/kss/builder/decanter/scss/_brand-bar.scss
index a7c95e66d..0aa8f6d6c 100644
--- a/kss/builder/decanter/scss/_brand-bar.scss
+++ b/kss/builder/decanter/scss/_brand-bar.scss
@@ -6,6 +6,6 @@
   > .su-brand-bar {
     position: fixed;
     top: 0;
-    z-index: 9999;
+    z-index: 22222;
   }
 }
diff --git a/kss/builder/decanter/scss/_content.scss b/kss/builder/decanter/scss/_content.scss
index 851d861f7..33f112631 100644
--- a/kss/builder/decanter/scss/_content.scss
+++ b/kss/builder/decanter/scss/_content.scss
@@ -131,7 +131,6 @@
   clear: left;
   border: 2px dashed transparent;
   position: relative; // Contain the example's absolute positioning.
-  z-index: 0; // Establishes a local stacking context.
   margin: -2px -2px ($kss-vertical-rhythm - 2px);
 
   &:last-child {
diff --git a/kss/builder/decanter/scss/_fullscreen.scss b/kss/builder/decanter/scss/_fullscreen.scss
index c681f1600..749860606 100644
--- a/kss/builder/decanter/scss/_fullscreen.scss
+++ b/kss/builder/decanter/scss/_fullscreen.scss
@@ -13,6 +13,16 @@
     .main-page-layout {
       display: block;
     }
+
+    @include grid-media-min('lg') {
+      .su-main-nav {
+        @include margin(null null null 1.6em);
+
+        &.su-main-nav--right {
+          @include margin(null 3em null 0);
+        }
+      }
+    }
   }
 }
 
diff --git a/kss/builder/decanter/scss/_main-nav.scss b/kss/builder/decanter/scss/_main-nav.scss
index dfd42efe6..79e48b301 100644
--- a/kss/builder/decanter/scss/_main-nav.scss
+++ b/kss/builder/decanter/scss/_main-nav.scss
@@ -40,3 +40,16 @@
     }
   }
 }
+
+//Main Nav Component - fix z-index in styleguide when multiple navs are right on top of each other
+#kssref-components-main-navigation {
+  .kss-modifier__example {
+    @for $i from 2 through 6 {
+      &:nth-child(#{3 * $i}) {
+        nav {
+          z-index: 9999 - 100 * ($i - 1);
+        }
+      }
+    }
+  }
+}
diff --git a/kss/kss-config.json b/kss/kss-config.json
index 469cd4d7f..676436987 100644
--- a/kss/kss-config.json
+++ b/kss/kss-config.json
@@ -5,7 +5,7 @@
     "css/decanter.css"
   ],
   "js": [
-    "js/decanter.min.js"
+    "js/decanter.js"
   ],
   "builder": "builder/decanter",
   "extend-drupal8": true,
diff --git a/package-lock.json b/package-lock.json
index 163852030..e778e15cb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -174,7 +174,7 @@
       "dependencies": {
         "sprintf-js": {
           "version": "1.0.3",
-          "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+          "resolved": "http://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
           "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
           "dev": true
         }
@@ -266,7 +266,7 @@
     },
     "async": {
       "version": "1.5.2",
-      "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz",
+      "resolved": "http://registry.npmjs.org/async/-/async-1.5.2.tgz",
       "integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=",
       "dev": true
     },
@@ -708,7 +708,7 @@
     },
     "camelcase-keys": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
+      "resolved": "http://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
       "integrity": "sha1-MIvur/3ygRkFHvodkyITyRuPkuc=",
       "dev": true,
       "requires": {
@@ -860,7 +860,7 @@
     },
     "colors": {
       "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/colors/-/colors-1.1.2.tgz",
+      "resolved": "http://registry.npmjs.org/colors/-/colors-1.1.2.tgz",
       "integrity": "sha1-FopHAXVran9RoSzgyXv6KMCE7WM=",
       "dev": true
     },
@@ -1557,7 +1557,7 @@
     },
     "eventemitter2": {
       "version": "0.4.14",
-      "resolved": "https://registry.npmjs.org/eventemitter2/-/eventemitter2-0.4.14.tgz",
+      "resolved": "http://registry.npmjs.org/eventemitter2/-/eventemitter2-0.4.14.tgz",
       "integrity": "sha1-j2G3XN4BKy6esoTUVFWDtWQ7Yas=",
       "dev": true
     },
@@ -1640,7 +1640,7 @@
     },
     "expand-range": {
       "version": "1.8.2",
-      "resolved": "https://registry.npmjs.org/expand-range/-/expand-range-1.8.2.tgz",
+      "resolved": "http://registry.npmjs.org/expand-range/-/expand-range-1.8.2.tgz",
       "integrity": "sha1-opnv/TNf4nIeuujiV+x5ZE/IUzc=",
       "dev": true,
       "requires": {
@@ -2085,27 +2085,28 @@
       "dependencies": {
         "abbrev": {
           "version": "1.1.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
           "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
           "dev": true,
           "optional": true
         },
         "ansi-regex": {
           "version": "2.1.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
           "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
           "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==",
           "dev": true,
           "optional": true
         },
         "are-we-there-yet": {
           "version": "1.1.4",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.4.tgz",
           "integrity": "sha1-u13KOCu5TwXhUZQ3PRb9O6HKEQ0=",
           "dev": true,
           "optional": true,
@@ -2116,15 +2117,17 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
           "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
           "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -2132,39 +2135,42 @@
         },
         "chownr": {
           "version": "1.0.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.0.1.tgz",
           "integrity": "sha1-4qdQQqlVGQi+vSW4Uj1fl2nXkYE=",
           "dev": true,
           "optional": true
         },
         "code-point-at": {
           "version": "1.1.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
           "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
           "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
           "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
           "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
           "dev": true,
           "optional": true
         },
         "debug": {
           "version": "2.6.9",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
           "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
           "dev": true,
           "optional": true,
@@ -2181,21 +2187,21 @@
         },
         "delegates": {
           "version": "1.0.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
           "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
           "dev": true,
           "optional": true
         },
         "detect-libc": {
           "version": "1.0.3",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
           "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=",
           "dev": true,
           "optional": true
         },
         "fs-minipass": {
           "version": "1.2.5",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-1.2.5.tgz",
           "integrity": "sha512-JhBl0skXjUPCFH7x6x61gQxrKyXsxB5gcgePLZCwfyCGGsTISMoIeObbrvVeP6Xmyaudw4TT43qV2Gz+iyd2oQ==",
           "dev": true,
           "optional": true,
@@ -2205,14 +2211,14 @@
         },
         "fs.realpath": {
           "version": "1.0.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
           "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
           "dev": true,
           "optional": true
         },
         "gauge": {
           "version": "2.7.4",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
           "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
           "dev": true,
           "optional": true,
@@ -2229,7 +2235,7 @@
         },
         "glob": {
           "version": "7.1.2",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
           "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
           "dev": true,
           "optional": true,
@@ -2244,14 +2250,14 @@
         },
         "has-unicode": {
           "version": "2.0.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
           "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
           "dev": true,
           "optional": true
         },
         "iconv-lite": {
           "version": "0.4.21",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.21.tgz",
           "integrity": "sha512-En5V9za5mBt2oUA03WGD3TwDv0MKAruqsuxstbMUZaj9W9k/m1CV/9py3l0L5kw9Bln8fdHQmzHSYtvpvTLpKw==",
           "dev": true,
           "optional": true,
@@ -2261,7 +2267,7 @@
         },
         "ignore-walk": {
           "version": "3.0.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.1.tgz",
           "integrity": "sha512-DTVlMx3IYPe0/JJcYP7Gxg7ttZZu3IInhuEhbchuqneY9wWe5Ojy2mXLBaQFUQmo0AW2r3qG7m1mg86js+gnlQ==",
           "dev": true,
           "optional": true,
@@ -2271,7 +2277,7 @@
         },
         "inflight": {
           "version": "1.0.6",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
           "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
           "dev": true,
           "optional": true,
@@ -2282,9 +2288,10 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
           "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -2295,40 +2302,44 @@
         },
         "is-fullwidth-code-point": {
           "version": "1.0.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
           "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
         },
         "isarray": {
           "version": "1.0.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
           "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
           "dev": true,
           "optional": true
         },
         "minimatch": {
           "version": "3.0.4",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
           "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
         },
         "minimist": {
           "version": "0.0.8",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
           "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.2.4",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.2.4.tgz",
           "integrity": "sha512-hzXIWWet/BzWhYs2b+u7dRHlruXhwdgvlTMDKC6Cb1U7ps6Ac6yQlR39xsbjWJE377YTCtKwIXIpJ5oP+j5y8g==",
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -2336,7 +2347,7 @@
         },
         "minizlib": {
           "version": "1.1.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-1.1.0.tgz",
           "integrity": "sha512-4T6Ur/GctZ27nHfpt9THOdRZNgyJ9FZchYO1ceg5S8Q3DNLCKYy44nCZzgCJgcvx2UM8czmqak5BCxJMrq37lA==",
           "dev": true,
           "optional": true,
@@ -2346,23 +2357,24 @@
         },
         "mkdirp": {
           "version": "0.5.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
           "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
         },
         "ms": {
           "version": "2.0.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
           "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
           "dev": true,
           "optional": true
         },
         "needle": {
           "version": "2.2.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/needle/-/needle-2.2.0.tgz",
           "integrity": "sha512-eFagy6c+TYayorXw/qtAdSvaUpEbBsDwDyxYFgLZ0lTojfH7K+OdBqAF7TAFwDokJaGpubpSGG0wO3iC0XPi8w==",
           "dev": true,
           "optional": true,
@@ -2393,7 +2405,7 @@
         },
         "nopt": {
           "version": "4.0.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.1.tgz",
           "integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=",
           "dev": true,
           "optional": true,
@@ -2404,14 +2416,14 @@
         },
         "npm-bundled": {
           "version": "1.0.3",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-1.0.3.tgz",
           "integrity": "sha512-ByQ3oJ/5ETLyglU2+8dBObvhfWXX8dtPZDMePCahptliFX2iIuhyEszyFk401PZUNQH20vvdW5MLjJxkwU80Ow==",
           "dev": true,
           "optional": true
         },
         "npm-packlist": {
           "version": "1.1.10",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.1.10.tgz",
           "integrity": "sha512-AQC0Dyhzn4EiYEfIUjCdMl0JJ61I2ER9ukf/sLxJUcZHfo+VyEfz2rMJgLZSS1v30OxPQe1cN0LZA1xbcaVfWA==",
           "dev": true,
           "optional": true,
@@ -2422,7 +2434,7 @@
         },
         "npmlog": {
           "version": "4.1.2",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
           "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
           "dev": true,
           "optional": true,
@@ -2435,43 +2447,45 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
           "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
           "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
           "dev": true,
           "optional": true
         },
         "once": {
           "version": "1.4.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
           "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
         },
         "os-homedir": {
           "version": "1.0.2",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
           "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
           "dev": true,
           "optional": true
         },
         "os-tmpdir": {
           "version": "1.0.2",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
           "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
           "dev": true,
           "optional": true
         },
         "osenv": {
           "version": "0.1.5",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz",
           "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==",
           "dev": true,
           "optional": true,
@@ -2482,14 +2496,14 @@
         },
         "path-is-absolute": {
           "version": "1.0.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
           "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
           "dev": true,
           "optional": true
         },
         "process-nextick-args": {
           "version": "2.0.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz",
           "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==",
           "dev": true,
           "optional": true
@@ -2518,7 +2532,7 @@
         },
         "readable-stream": {
           "version": "2.3.6",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
           "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
           "dev": true,
           "optional": true,
@@ -2534,7 +2548,7 @@
         },
         "rimraf": {
           "version": "2.6.2",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.2.tgz",
           "integrity": "sha512-lreewLK/BlghmxtfH36YYVg1i8IAce4TI7oao75I1g245+6BctqTVQiBP3YUJ9C6DQOXJmkYR9X9fCLtCOJc5w==",
           "dev": true,
           "optional": true,
@@ -2544,50 +2558,52 @@
         },
         "safe-buffer": {
           "version": "5.1.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz",
           "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
           "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
           "dev": true,
           "optional": true
         },
         "sax": {
           "version": "1.2.4",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
           "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
           "dev": true,
           "optional": true
         },
         "semver": {
           "version": "5.5.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.5.0.tgz",
           "integrity": "sha512-4SJ3dm0WAwWy/NVeioZh5AntkdJoWKxHxcmyP622fOkgHa4z3R0TdBJICINyaSDE6uNwVc8gZr+ZinwZAH4xIA==",
           "dev": true,
           "optional": true
         },
         "set-blocking": {
           "version": "2.0.0",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
           "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
           "dev": true,
           "optional": true
         },
         "signal-exit": {
           "version": "3.0.2",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
           "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
           "dev": true,
           "optional": true
         },
         "string-width": {
           "version": "1.0.2",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
           "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -2596,7 +2612,7 @@
         },
         "string_decoder": {
           "version": "1.1.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
           "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
           "dev": true,
           "optional": true,
@@ -2606,9 +2622,10 @@
         },
         "strip-ansi": {
           "version": "3.0.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
           "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -2622,7 +2639,7 @@
         },
         "tar": {
           "version": "4.4.1",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/tar/-/tar-4.4.1.tgz",
           "integrity": "sha512-O+v1r9yN4tOsvl90p5HAP4AEqbYhx4036AGMm075fH9F8Qwi3oJ+v4u50FkT/KkvywNGtwkk0zRI+8eYm1X/xg==",
           "dev": true,
           "optional": true,
@@ -2638,14 +2655,14 @@
         },
         "util-deprecate": {
           "version": "1.0.2",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
           "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
           "dev": true,
           "optional": true
         },
         "wide-align": {
           "version": "1.1.2",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.2.tgz",
           "integrity": "sha512-ijDLlyQ7s6x1JgCLur53osjm/UXUYD9+0PbYKrBsYisYXzCxN+HC3mYDNy/dWdmf3AwqwU3CXwDCvsNgGK1S0w==",
           "dev": true,
           "optional": true,
@@ -2655,15 +2672,17 @@
         },
         "wrappy": {
           "version": "1.0.2",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
           "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.2",
-          "resolved": false,
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.2.tgz",
           "integrity": "sha1-hFK0u36Dx8GI2AQcGoN8dz1ti7k=",
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
@@ -2736,7 +2755,7 @@
     },
     "get-stream": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
+      "resolved": "http://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
       "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=",
       "dev": true
     },
@@ -2958,7 +2977,7 @@
       "dependencies": {
         "grunt-cli": {
           "version": "1.2.0",
-          "resolved": "https://registry.npmjs.org/grunt-cli/-/grunt-cli-1.2.0.tgz",
+          "resolved": "http://registry.npmjs.org/grunt-cli/-/grunt-cli-1.2.0.tgz",
           "integrity": "sha1-VisRnrsGndtGSs4oRVAb6Xs1tqg=",
           "dev": true,
           "requires": {
@@ -3170,7 +3189,7 @@
     "grunt-sass-lint": {
       "version": "0.2.4",
       "resolved": "https://registry.npmjs.org/grunt-sass-lint/-/grunt-sass-lint-0.2.4.tgz",
-      "integrity": "sha1-Bvd2Na2KUEiWjqM8VYS0ChgoHjU=",
+      "integrity": "sha512-jV88yXoxFFvr4R3WVBl0uz4YBzNxXTrCJ7ZBKrYby/SjRCw2sieKPkt5tpWDcQZIj9XrKsOpKuHQn08MaECVwg==",
       "dev": true,
       "requires": {
         "sass-lint": "^1.12.0"
@@ -3532,7 +3551,7 @@
     },
     "is-builtin-module": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-1.0.0.tgz",
+      "resolved": "http://registry.npmjs.org/is-builtin-module/-/is-builtin-module-1.0.0.tgz",
       "integrity": "sha1-VAVy0096wxGfj3bDDLwbHgN6/74=",
       "dev": true,
       "requires": {
@@ -4084,7 +4103,7 @@
     },
     "load-json-file": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
+      "resolved": "http://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
       "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
       "dev": true,
       "requires": {
@@ -4353,7 +4372,7 @@
     },
     "meow": {
       "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/meow/-/meow-3.7.0.tgz",
+      "resolved": "http://registry.npmjs.org/meow/-/meow-3.7.0.tgz",
       "integrity": "sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=",
       "dev": true,
       "requires": {
@@ -4543,7 +4562,7 @@
     },
     "mkdirp": {
       "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
+      "resolved": "http://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
       "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
       "dev": true,
       "requires": {
@@ -4552,7 +4571,7 @@
       "dependencies": {
         "minimist": {
           "version": "0.0.8",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
+          "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
           "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
           "dev": true
         }
@@ -4635,7 +4654,7 @@
       "dependencies": {
         "semver": {
           "version": "5.3.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
+          "resolved": "http://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
           "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8=",
           "dev": true
         }
@@ -4978,13 +4997,13 @@
     },
     "os-homedir": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
+      "resolved": "http://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
       "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
       "dev": true
     },
     "os-locale": {
       "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
+      "resolved": "http://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
       "integrity": "sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=",
       "dev": true,
       "requires": {
@@ -4993,7 +5012,7 @@
     },
     "os-tmpdir": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
+      "resolved": "http://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
       "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
       "dev": true
     },
@@ -5134,7 +5153,7 @@
     },
     "path-is-absolute": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "resolved": "http://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
       "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
       "dev": true
     },
@@ -5175,7 +5194,7 @@
     },
     "pify": {
       "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
       "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
       "dev": true
     },
@@ -5532,7 +5551,7 @@
     },
     "pretty-hrtime": {
       "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
+      "resolved": "http://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
       "integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=",
       "dev": true
     },
@@ -5852,7 +5871,7 @@
     },
     "resolve": {
       "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.1.7.tgz",
+      "resolved": "http://registry.npmjs.org/resolve/-/resolve-1.1.7.tgz",
       "integrity": "sha1-IDEU2CrSxe2ejgQRs5ModeiJ6Xs=",
       "dev": true
     },
@@ -5958,7 +5977,7 @@
     },
     "safe-regex": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz",
+      "resolved": "http://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz",
       "integrity": "sha1-QKNmnzsHfR6UPURinhV91IAjvy4=",
       "dev": true,
       "requires": {
@@ -6635,7 +6654,7 @@
     },
     "strip-ansi": {
       "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+      "resolved": "http://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
       "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
       "dev": true,
       "requires": {
@@ -6653,7 +6672,7 @@
     },
     "strip-eof": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz",
+      "resolved": "http://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz",
       "integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=",
       "dev": true
     },
@@ -6763,7 +6782,7 @@
     },
     "tar": {
       "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-2.2.1.tgz",
+      "resolved": "http://registry.npmjs.org/tar/-/tar-2.2.1.tgz",
       "integrity": "sha1-jk0qJWwOIYXGsYrWlK7JaLg8sdE=",
       "dev": true,
       "requires": {
@@ -7296,7 +7315,7 @@
     },
     "wrap-ansi": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
+      "resolved": "http://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
       "integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=",
       "dev": true,
       "requires": {
@@ -7384,7 +7403,7 @@
     },
     "yargs-parser": {
       "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-4.2.1.tgz",
+      "resolved": "http://registry.npmjs.org/yargs-parser/-/yargs-parser-4.2.1.tgz",
       "integrity": "sha1-KczqwNxPA8bIe0qfIX3RjJ90hxw=",
       "dev": true,
       "requires": {