diff --git a/node_modules/material-design-lite/src/footer/README.md b/node_modules/material-design-lite/src/footer/README.md
new file mode 100755
index 0000000..3913a51
--- /dev/null
+++ b/node_modules/material-design-lite/src/footer/README.md
@@ -0,0 +1,405 @@
+## Introduction
+
+The Material Design Lite (MDL) **footer** component is a comprehensive container intended to present a substantial amount of related content in a visually attractive and logically intuitive area. Although it is called "footer", it may be placed at any appropriate location on a device screen, either before or after other content.
+
+An MDL footer component takes two basic forms: *mega-footer* and *mini-footer*. As the names imply, mega-footers contain more (and more complex) content than mini-footers. A mega-footer presents multiple sections of content separated by horizontal rules, while a mini-footer presents a single section of content. Both footer forms have their own internal structures, including required and optional elements, and typically include both informational and clickable content, such as links.
+
+Footers, as represented by this component, are a fairly new feature in user interfaces, and allow users to view discrete blocks of content in a coherent and consistently organized way. Their design and use is an important factor in the overall user experience.
+
+### To include an MDL **mega-footer** component:
+
+&nbsp;1a. Code a `<footer>` element. Inside the footer, include one `<div>` element for each content section, typically three: *top*, *middle*, and *bottom*.
+```html
+<footer>
+  <div>
+  ...
+  </div>
+  <div>
+  ...
+  </div>
+  <div>
+  ...
+  </div>
+</footer>
+```
+&nbsp;1b. Add the appropriate MDL classes to the footer and divs using the `class` attribute.
+```html
+<footer class="mdl-mega-footer">
+  <div class="mdl-mega-footer__top-section">
+  ...
+  </div>
+  <div class="mdl-mega-footer__middle-section">
+  ...
+  </div>
+  <div class="mdl-mega-footer__bottom-section">
+  ...
+  </div>
+</footer>
+```
+&nbsp;2a. Inside the top section div, code two sibling "inner" divs for the *left* and *right* content sections.
+```html
+<footer class="mdl-mega-footer">
+  <div class="mdl-mega-footer__top-section">
+    <div>
+    ...
+    </div>
+    <div>
+    ...
+    </div>
+  </div>
+  <div class="mdl-mega-footer__middle-section">
+  ...
+  </div>
+  <div class="mdl-mega-footer__bottom-section">
+  ...
+  </div>
+</footer>
+```
+&nbsp;2b. Add the appropriate MDL classes to the two "inner" left and right divs using the `class` attribute.
+```html
+<footer class="mdl-mega-footer">
+  <div class="mdl-mega-footer__top-section">
+    <div class="mdl-mega-footer__left-section">
+    ...
+    </div>
+    <div class="mdl-mega-footer__right-section">
+    ...
+    </div>
+  </div>
+  <div class="mdl-mega-footer__middle-section">
+  ...
+  </div>
+  <div class="mdl-mega-footer__bottom-section">
+  ...
+  </div>
+</footer>
+```
+&nbsp;3a. Inside the middle section div, code one or more sibling "inner" divs for the *drop-down* content sections. That is, for two drop-down sections, you would code two divs.
+```html
+<footer class="mdl-mega-footer">
+  <div class="mdl-mega-footer__top-section">
+    <div class="mdl-mega-footer__left-section">
+    ...
+    </div>
+    <div class="mdl-mega-footer__right-section">
+    ...
+    </div>
+  </div>
+  <div class="mdl-mega-footer__middle-section">
+    <div>
+    ...
+    </div>
+    <div>
+    ...
+    </div>
+  </div>
+  <div class="mdl-mega-footer__bottom-section">
+  ...
+  </div>
+</footer>
+```
+&nbsp;3b. Add the appropriate MDL classes to the two "inner" drop-down divs using the `class` attribute.
+```html
+<footer class="mdl-mega-footer">
+  <div class="mdl-mega-footer__top-section">
+    <div class="mdl-mega-footer__left-section">
+    ...
+    </div>
+    <div class="mdl-mega-footer__right-section">
+    ...
+    </div>
+  </div>
+  <div class="mdl-mega-footer__middle-section">
+    <div class="mdl-mega-footer__drop-down-section">
+    ...
+    </div>
+    <div class="mdl-mega-footer__drop-down-section">
+    ...
+    </div>
+  </div>
+  <div class="mdl-mega-footer__bottom-section">
+  ...
+  </div>
+</footer>
+```
+&nbsp;4a. Inside the bottom section div, code an "inner" div for the section heading and a sibling unordered list for the bottom section links.
+```html
+<footer class="mdl-mega-footer">
+  <div class="mdl-mega-footer__top-section">
+    <div class="mdl-mega-footer__left-section">
+    ...
+    </div>
+    <div class="mdl-mega-footer__right-section">
+    ...
+    </div>
+  </div>
+  <div class="mdl-mega-footer__middle-section">
+    <div class="mdl-mega-footer__drop-down-section">
+    ...
+    </div>
+    <div class="mdl-mega-footer__drop-down-section">
+    ...
+    </div>
+  </div>
+  <div class="mdl-mega-footer__bottom-section">
+    <div>
+      ...
+    </div>
+    <ul>
+      ...
+    </ul>
+  </div>
+</footer>
+```
+&nbsp;4b. Add the appropriate MDL classes to the "inner" div heading and list using the `class` attribute.
+```html
+<footer class="mdl-mega-footer">
+  <div class="mdl-mega-footer__top-section">
+    <div class="mdl-mega-footer__left-section">
+    ...
+    </div>
+    <div class="mdl-mega-footer__right-section">
+    ...
+    </div>
+  </div>
+  <div class="mdl-mega-footer__middle-section">
+    <div class="mdl-mega-footer__drop-down-section">
+    ...
+    </div>
+    <div class="mdl-mega-footer__drop-down-section">
+    ...
+    </div>
+  </div>
+  <div class="mdl-mega-footer__bottom-section">
+    <div class="mdl-logo">
+    </div>
+    <ul class="mdl-mega-footer__link-list">
+      ...
+    </ul>
+  </div>
+</footer>
+```
+&nbsp;5. Add content to the top (left and right), middle (drop-downs), and bottom (text and links) sections of the footer; include any appropriate MDL classes using the `class` attribute.
+```html
+<footer class="mdl-mega-footer">
+  <div class="mdl-mega-footer__top-section">
+    <div class="mdl-mega-footer__left-section">
+      <button class="mdl-mega-footer__social-btn"></button>
+      <button class="mdl-mega-footer__social-btn"></button>
+      <button class="mdl-mega-footer__social-btn"></button>
+    </div>
+    <div class="mdl-mega-footer__right-section">
+      <a href="">Link 1</a>
+      <a href="">Link 2</a>
+      <a href="">Link 3</a>
+    </div>
+  </div>
+  <div class="mdl-mega-footer__middle-section">
+    <div class="mdl-mega-footer__drop-down-section">
+      <h1 class="mdl-mega-footer__heading">Drop-down 1 Heading</h1>
+      <ul class="mdl-mega-footer__link-list">
+        <li><a href="">Link A</a></li>
+        <li><a href="">Link B</a></li>
+        <li><a href="">Link C</a></li>
+        <li><a href="">Link D</a></li>
+      </ul>
+    </div>
+    <div class="mdl-mega-footer__drop-down-section">
+      <h1 class="mdl-mega-footer__heading">Drop-down 2 Heading</h1>
+      <ul class="mdl-mega-footer__link-list">
+        <li><a href="">Link A</a></li>
+        <li><a href="">Link B</a></li>
+        <li><a href="">Link C</a></li>
+      </ul>
+    </div>
+  </div>
+  <div class="mdl-mega-footer__bottom-section">
+    <div class="mdl-logo">
+    Mega-Footer Bottom Section Heading
+    </div>
+    <ul class="mdl-mega-footer__link-list">
+      <li><a href="">Link A</a></li>
+      <li><a href="">Link B</a></li>
+    </ul>
+  </div>
+</footer>
+```
+
+The mega-footer component is ready for use.
+
+#### Examples
+
+A mega-footer component with three sections and two drop-down sections in the middle section.
+```html
+<footer class="mdl-mega-footer">
+  <div class="mdl-mega-footer__top-section">
+    <div class="mdl-mega-footer__left-section">
+      <button class="mdl-mega-footer__social-btn"></button>
+      <button class="mdl-mega-footer__social-btn"></button>
+      <button class="mdl-mega-footer__social-btn"></button>
+    </div>
+    <div class="mdl-mega-footer__right-section">
+      <a href="#">Introduction</a>
+      <a href="#">App Status Dashboard</a>
+      <a href="#">Terms of Service</a>
+    </div>
+  </div>
+  <div class="mdl-mega-footer__middle-section">
+    <div class="mdl-mega-footer__drop-down-section">
+      <h1 class="mdl-mega-footer__heading">Learning and Support</h1>
+      <ul class="mdl-mega-footer__link-list">
+        <li><a href="#">Resource Center</a></li>
+        <li><a href="#">Help Center</a></li>
+        <li><a href="#">Community</a></li>
+        <li><a href="#">Learn with Google</a></li>
+        <li><a href="#">Small Business Community</a></li>
+        <li><a href="#">Think Insights</a></li>
+      </ul>
+    </div>
+    <div class="mdl-mega-footer__drop-down-section">
+      <h1 class="mdl-mega-footer__heading">Just for Developers</h1>
+      <ul class="mdl-mega-footer__link-list">
+        <li><a href="#">Google Developers</a></li>
+        <li><a href="#">AdWords API</a></li>
+        <li><a href="#">AdWords Scipts</a></li>
+        <li><a href="#">AdWords Remarketing Tag</a></li>
+      </ul>
+    </div>
+  </div>
+  <div class="mdl-mega-footer__bottom-section">
+    <div class="mdl-logo">
+      More Information
+    </div>
+    <ul class="mdl-mega-footer__link-list">
+      <li><a href="#">Help</a></li>
+      <li><a href="#">Privacy and Terms</a></li>
+    </ul>
+  </div>
+</footer>
+```
+
+### To include an MDL **mini-footer** component:
+
+&nbsp;1a. Code a `<footer>` element. Inside the footer, code two `<div>` elements, one for the *left* section and one for the *right* section.
+```html
+<footer>
+  <div>
+  ...
+  </div>
+  <div>
+  ...
+  </div>
+</footer>
+```
+&nbsp;1b. Add the appropriate MDL classes to the footer and divs using the `class` attribute.
+```html
+<footer class="mdl-mini-footer">
+  <div class="mdl-mini-footer__left-section">
+  ...
+  </div>
+  <div class="mdl-mini-footer__right-section">
+  ...
+  </div>
+</footer>
+```
+&nbsp;2a. Inside the left section div, code an "inner" div for the section heading and a sibling unordered list for the left section links.
+```html
+<footer class="mdl-mini-footer">
+  <div class="mdl-mini-footer__left-section">
+    <div>
+      ...
+    </div>
+    <ul>
+      ...
+    </ul>
+  </div>
+  <div class="mdl-mini-footer__right-section">
+  ...
+  </div>
+</footer>
+```
+&nbsp;2b. Add the appropriate MDL classes to the "inner" div and list using the `class` attribute.
+```html
+<footer class="mdl-mini-footer">
+  <div class="mdl-mini-footer__left-section">
+    <div class="mdl-logo">
+      ...
+    </div>
+    <ul class="mdl-mini-footer__link-list">
+      ...
+    </ul>
+  </div>
+  <div class="mdl-mini-footer__right-section">
+  ...
+  </div>
+</footer>
+```
+&nbsp;3. Add content to the left (text and links) and right (text or decoration) sections of the footer; include any appropriate MDL classes using the `class` attribute.
+```html
+<footer class="mdl-mini-footer">
+  <div class="mdl-mini-footer__left-section">
+    <div class="mdl-logo">
+      Mini-footer Heading
+    </div>
+    <ul class="mdl-mini-footer__link-list">
+      <li><a href="">Link 1</a></li>
+      <li><a href="">Link 2</a></li>
+      <li><a href="">Link 3</a></li>
+    </ul>
+  </div>
+  <div class="mdl-mini-footer__right-section">
+    <button class="mdl-mini-footer__social-btn"></button>
+    <button class="mdl-mini-footer__social-btn"></button>
+    <button class="mdl-mini-footer__social-btn"></button>
+  </div>
+</footer>
+```
+
+The mini-footer component is ready for use.
+
+#### Examples
+
+A mini-footer with left and right sections.
+
+```html
+<footer class="mdl-mini-footer">
+  <div class="mdl-mini-footer__left-section">
+    <div class="mdl-logo">
+      More Information
+    </div>
+    <ul class="mdl-mini-footer__link-list">
+      <li><a href="#">Help</a></li>
+      <li><a href="#">Privacy and Terms</a></li>
+      <li><a href="#">User Agreement</a></li>
+    </ul>
+  </div>
+  <div class="mdl-mini-footer__right-section">
+    <button class="mdl-mini-footer__social-btn"></button>
+    <button class="mdl-mini-footer__social-btn"></button>
+    <button class="mdl-mini-footer__social-btn"></button>
+  </div>
+</footer>
+```
+
+## Configuration options
+
+The MDL CSS classes apply various predefined visual enhancements to the footer. The table below lists the available classes and their effects.
+
+| MDL class | Effect | Remarks |
+|-----------|--------|---------|
+| `mdl-mega-footer` | Defines container as an MDL mega-footer component | Required on footer element |
+| `mdl-mega-footer__top-section` | Defines container as a footer top section | Required on top section "outer" div element |
+| `mdl-mega-footer__left-section` | Defines container as a left section | Required on left section "inner" div element |
+| `mdl-mega-footer__social-btn` | Defines a decorative square within mega-footer | Required on button element (if used) |
+| `mdl-mega-footer__right-section` | Defines container as a right section | Required on right section "inner" div element |
+| `mdl-mega-footer__middle-section` | Defines container as a footer middle section | Required on middle section "outer" div element |
+| `mdl-mega-footer__drop-down-section` | Defines container as a drop-down (vertical) content area | Required on drop-down "inner" div elements |
+| `mdl-mega-footer__heading` | Defines a heading as a mega-footer heading | Required on h1 element inside drop-down section |
+| `mdl-mega-footer__link-list` | Defines an unordered list as a drop-down (vertical) list | Required on ul element inside drop-down section |
+| `mdl-mega-footer__bottom-section` | Defines container as a footer bottom section | Required on bottom section "outer" div element |
+| `mdl-logo` | Defines a container as a styled section heading | Required on "inner" div element in mega-footer bottom-section or mini-footer left-section |
+| `mdl-mini-footer` | Defines container as an MDL mini-footer component | Required on footer element |
+| `mdl-mini-footer__left-section` | Defines container as a left section | Required on left section "inner" div element |
+| `mdl-mini-footer__link-list` | Defines an unordered list as an inline (horizontal) list | Required on ul element sibling to "mdl-logo" div element |
+| `mdl-mini-footer__right-section` | Defines container as a right section | Required on right section "inner" div element |
+| `mdl-mini-footer__social-btn` | Defines a decorative square within mini-footer | Required on button element (if used) |
diff --git a/node_modules/material-design-lite/src/footer/_mega_footer.scss b/node_modules/material-design-lite/src/footer/_mega_footer.scss
new file mode 100644
index 0000000..49ea23a
--- /dev/null
+++ b/node_modules/material-design-lite/src/footer/_mega_footer.scss
@@ -0,0 +1,321 @@
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import "../variables";
+@import "../mixins";
+
+.mdl-mega-footer {
+  padding: $footer-min-padding $footer-padding-sides;
+
+  color: $footer-color;
+  background-color: $footer-bg-color;
+}
+
+
+.mdl-mega-footer--top-section:after,
+.mdl-mega-footer--middle-section:after,
+.mdl-mega-footer--bottom-section:after,
+.mdl-mega-footer__top-section:after,
+.mdl-mega-footer__middle-section:after,
+.mdl-mega-footer__bottom-section:after {
+  content: '';
+  display: block;
+  clear: both;
+}
+
+.mdl-mega-footer--left-section,
+.mdl-mega-footer__left-section {
+  margin-bottom: $footer-min-padding;
+}
+
+.mdl-mega-footer--right-section,
+.mdl-mega-footer__right-section {
+  margin-bottom: $footer-min-padding;
+}
+
+.mdl-mega-footer--right-section a,
+.mdl-mega-footer__right-section a {
+  display: block;
+
+  margin-bottom: $footer-min-padding;
+
+  color: inherit;
+  text-decoration: none;
+}
+
+@media screen and (min-width: 760px) {
+  .mdl-mega-footer--left-section,
+  .mdl-mega-footer__left-section {
+    float: left;
+  }
+
+  .mdl-mega-footer--right-section,
+  .mdl-mega-footer__right-section {
+    float: right;
+  }
+
+  .mdl-mega-footer--right-section a,
+  .mdl-mega-footer__right-section a {
+    display: inline-block;
+
+    margin-left: $footer-min-padding;
+
+    line-height: $footer-btn-size;
+    vertical-align: middle;
+  }
+}
+
+.mdl-mega-footer--social-btn,
+.mdl-mega-footer__social-btn {
+  width: $footer-btn-size;
+  height: $footer-btn-size;
+
+  padding: 0;
+  margin: 0;
+
+  background-color: $footer-button-fill-color;
+
+  border: none;
+}
+
+.mdl-mega-footer--drop-down-section,
+.mdl-mega-footer__drop-down-section {
+  display: block;
+
+  position: relative;
+}
+
+@media screen and (min-width: 760px) {
+  .mdl-mega-footer--drop-down-section,
+  .mdl-mega-footer__drop-down-section {
+    width: 33%;
+  }
+
+  .mdl-mega-footer--drop-down-section:nth-child(1),
+  .mdl-mega-footer--drop-down-section:nth-child(2),
+  .mdl-mega-footer__drop-down-section:nth-child(1),
+  .mdl-mega-footer__drop-down-section:nth-child(2) {
+    float: left;
+  }
+
+  .mdl-mega-footer--drop-down-section:nth-child(3),
+  .mdl-mega-footer__drop-down-section:nth-child(3) {
+    float: right;
+
+    &:after {
+      clear: right;
+    }
+  }
+
+  .mdl-mega-footer--drop-down-section:nth-child(4),
+  .mdl-mega-footer__drop-down-section:nth-child(4) {
+    clear: right;
+    float: right;
+  }
+
+  .mdl-mega-footer--middle-section:after,
+  .mdl-mega-footer__middle-section:after {
+    content: '';
+
+    display: block;
+
+    clear: both;
+  }
+
+  .mdl-mega-footer--bottom-section,
+  .mdl-mega-footer__bottom-section {
+    padding-top: 0;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  .mdl-mega-footer--drop-down-section,
+  .mdl-mega-footer--drop-down-section:nth-child(3),
+  .mdl-mega-footer--drop-down-section:nth-child(4),
+  .mdl-mega-footer__drop-down-section,
+  .mdl-mega-footer__drop-down-section:nth-child(3),
+  .mdl-mega-footer__drop-down-section:nth-child(4) {
+    width: 24%;
+
+    float: left;
+  }
+}
+
+.mdl-mega-footer--heading-checkbox,
+.mdl-mega-footer__heading-checkbox {
+  position: absolute;
+  width: 100%;
+  height: $footer-heading-line-height + ($footer-min-padding * 2);
+
+  padding: ($footer-min-padding * 2);
+  margin: 0;
+  margin-top: -$footer-min-padding;
+
+  cursor: pointer;
+
+  z-index: 1;
+  opacity: 0;
+
+  & + .mdl-mega-footer--heading:after,
+  & + .mdl-mega-footer__heading:after {
+    font-family: 'Material Icons';
+    content: '\E5CE'
+  }
+}
+
+.mdl-mega-footer--heading-checkbox:checked,
+.mdl-mega-footer__heading-checkbox:checked {
+  // WebViews in iOS 9 break the "~" operator, and WebViews in OS X 10.10
+  // break consecutive "+" operators in some cases. Therefore, we need to use
+  // both here to cover all the bases.
+  & ~ .mdl-mega-footer--link-list,
+  & ~ .mdl-mega-footer__link-list,
+  & + .mdl-mega-footer--heading + .mdl-mega-footer--link-list,
+  & + .mdl-mega-footer__heading + .mdl-mega-footer__link-list {
+    display: none;
+  }
+
+  & + .mdl-mega-footer--heading:after,
+  & + .mdl-mega-footer__heading:after {
+    font-family: 'Material Icons';
+    content: '\E5CF'
+  }
+}
+
+.mdl-mega-footer--heading,
+.mdl-mega-footer__heading {
+  position: relative;
+  width: 100%;
+
+  padding-right: $footer-heading-line-height + $footer-min-padding;
+  margin-bottom: $footer-min-padding;
+
+  box-sizing:border-box;
+
+  font-size: $footer-heading-font-size;
+  line-height: $footer-heading-line-height;
+
+  font-weight: 500;
+
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+
+  color: $footer-heading-color;
+}
+
+.mdl-mega-footer--heading:after,
+.mdl-mega-footer__heading:after {
+  content: '';
+
+  position: absolute;
+  top: 0;
+  right: 0;
+
+  display: block;
+
+  width: $footer-heading-line-height;
+  height: $footer-heading-line-height;
+
+  background-size: cover;
+}
+
+.mdl-mega-footer--link-list,
+.mdl-mega-footer__link-list {
+  list-style: none;
+
+  margin: 0;
+  padding: 0;
+
+  margin-bottom: $footer-min-padding * 2;
+  &:after {
+    clear: both;
+    display: block;
+    content: '';
+  }
+}
+
+.mdl-mega-footer--link-list li,
+.mdl-mega-footer__link-list li {
+  @include typo-body-1();
+  line-height: 20px;
+}
+
+.mdl-mega-footer--link-list a,
+.mdl-mega-footer__link-list a {
+  color: inherit;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+@media screen and (min-width: 760px) {
+  .mdl-mega-footer--heading-checkbox,
+  .mdl-mega-footer__heading-checkbox {
+    display: none;
+
+    & + .mdl-mega-footer--heading:after,
+    & + .mdl-mega-footer__heading:after {
+      content: '';
+    }
+  }
+  .mdl-mega-footer--heading-checkbox:checked,
+  .mdl-mega-footer__heading-checkbox:checked {
+    // WebViews in iOS 9 break the "~" operator, and WebViews in OS X 10.10
+    // break consecutive "+" operators in some cases. Therefore, we need to use
+    // both here to cover all the bases.
+    & ~ .mdl-mega-footer--link-list,
+    & ~ .mdl-mega-footer__link-list,
+    & + .mdl-mega-footer__heading + .mdl-mega-footer__link-list,
+    & + .mdl-mega-footer--heading + .mdl-mega-footer--link-list {
+      display: block;
+    }
+
+    & + .mdl-mega-footer--heading:after,
+    & + .mdl-mega-footer__heading:after {
+      content: '';
+    }
+  }
+}
+
+.mdl-mega-footer--bottom-section,
+.mdl-mega-footer__bottom-section {
+  padding-top: $footer-min-padding;
+  margin-bottom: $footer-min-padding;
+}
+
+.mdl-logo {
+  margin-bottom: $footer-min-padding;
+  color: white;
+}
+
+.mdl-mega-footer--bottom-section .mdl-mega-footer--link-list li,
+.mdl-mega-footer__bottom-section .mdl-mega-footer__link-list li {
+  float: left;
+
+  margin-bottom: 0;
+  margin-right: $footer-min-padding;
+}
+
+
+
+@media screen and (min-width: 760px) {
+  .mdl-logo {
+    float: left;
+
+    margin-bottom: 0;
+    margin-right: $footer-min-padding;
+  }
+}
diff --git a/node_modules/material-design-lite/src/footer/_mini_footer.scss b/node_modules/material-design-lite/src/footer/_mini_footer.scss
new file mode 100644
index 0000000..6a1c8ed
--- /dev/null
+++ b/node_modules/material-design-lite/src/footer/_mini_footer.scss
@@ -0,0 +1,88 @@
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import "../variables";
+
+.mdl-mini-footer {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-between;
+
+  padding: ($padding * 2) $padding;
+
+  color: $footer-color;
+  background-color: $footer-bg-color;
+
+  &:after {
+    content: '';
+    display: block;
+  }
+
+  & .mdl-logo {
+    line-height: $footer-btn-size;
+  }
+}
+
+.mdl-mini-footer--link-list,
+.mdl-mini-footer__link-list {
+  display: flex;
+  flex-flow: row nowrap;
+
+  list-style: none;
+
+  margin: 0;
+  padding: 0;
+
+  & li {
+    margin-bottom: 0;
+    margin-right: $padding;
+
+    @media screen and (min-width: 760px) {
+      line-height: $footer-btn-size;
+    }
+  }
+
+  & a {
+    color: inherit;
+    text-decoration: none;
+    white-space: nowrap;
+  }
+}
+
+.mdl-mini-footer--left-section,
+.mdl-mini-footer__left-section {
+  display: inline-block;
+  order: 0;
+}
+
+.mdl-mini-footer--right-section,
+.mdl-mini-footer__right-section {
+  display: inline-block;
+  order: 1;
+}
+
+.mdl-mini-footer--social-btn,
+.mdl-mini-footer__social-btn {
+  width: $footer-btn-size;
+  height: $footer-btn-size;
+
+  padding: 0;
+  margin: 0;
+
+  background-color: $footer-button-fill-color;
+
+  border: none;
+}
diff --git a/node_modules/material-design-lite/src/footer/snippets/mega-footer.html b/node_modules/material-design-lite/src/footer/snippets/mega-footer.html
new file mode 100644
index 0000000..edd2f7d
--- /dev/null
+++ b/node_modules/material-design-lite/src/footer/snippets/mega-footer.html
@@ -0,0 +1,57 @@
+<footer class="mdl-mega-footer">
+  <div class="mdl-mega-footer__middle-section">
+
+    <div class="mdl-mega-footer__drop-down-section">
+      <input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked>
+      <h1 class="mdl-mega-footer__heading">Features</h1>
+      <ul class="mdl-mega-footer__link-list">
+        <li><a href="#">About</a></li>
+        <li><a href="#">Terms</a></li>
+        <li><a href="#">Partners</a></li>
+        <li><a href="#">Updates</a></li>
+      </ul>
+    </div>
+
+    <div class="mdl-mega-footer__drop-down-section">
+      <input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked>
+      <h1 class="mdl-mega-footer__heading">Details</h1>
+      <ul class="mdl-mega-footer__link-list">
+        <li><a href="#">Specs</a></li>
+        <li><a href="#">Tools</a></li>
+        <li><a href="#">Resources</a></li>
+      </ul>
+    </div>
+
+    <div class="mdl-mega-footer__drop-down-section">
+      <input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked>
+      <h1 class="mdl-mega-footer__heading">Technology</h1>
+      <ul class="mdl-mega-footer__link-list">
+        <li><a href="#">How it works</a></li>
+        <li><a href="#">Patterns</a></li>
+        <li><a href="#">Usage</a></li>
+        <li><a href="#">Products</a></li>
+        <li><a href="#">Contracts</a></li>
+      </ul>
+    </div>
+
+    <div class="mdl-mega-footer__drop-down-section">
+      <input class="mdl-mega-footer__heading-checkbox" type="checkbox" checked>
+      <h1 class="mdl-mega-footer__heading">FAQ</h1>
+      <ul class="mdl-mega-footer__link-list">
+        <li><a href="#">Questions</a></li>
+        <li><a href="#">Answers</a></li>
+        <li><a href="#">Contact us</a></li>
+      </ul>
+    </div>
+
+  </div>
+
+  <div class="mdl-mega-footer__bottom-section">
+    <div class="mdl-logo">Title</div>
+    <ul class="mdl-mega-footer__link-list">
+      <li><a href="#">Help</a></li>
+      <li><a href="#">Privacy &amp; Terms</a></li>
+    </ul>
+  </div>
+
+</footer>
diff --git a/node_modules/material-design-lite/src/footer/snippets/mini-footer.html b/node_modules/material-design-lite/src/footer/snippets/mini-footer.html
new file mode 100644
index 0000000..1d78b27
--- /dev/null
+++ b/node_modules/material-design-lite/src/footer/snippets/mini-footer.html
@@ -0,0 +1,9 @@
+<footer class="mdl-mini-footer">
+  <div class="mdl-mini-footer__left-section">
+    <div class="mdl-logo">Title</div>
+    <ul class="mdl-mini-footer__link-list">
+      <li><a href="#">Help</a></li>
+      <li><a href="#">Privacy &amp; Terms</a></li>
+    </ul>
+  </div>
+</footer>