From a044a201faa58adabf743f371ef7465da4de2a84 Mon Sep 17 00:00:00 2001
From: Glen Cheney <cheney.glen@gmail.com>
Date: Tue, 8 Mar 2016 18:29:56 +1100
Subject: [PATCH] Refactor more docs javascript and add css compilation with
 gulp.

---
 _config.yml                            |    2 +-
 _posts/2013-07-16-faq.html             |    7 -
 _posts/2014-03-08-bootstrap3-grid.html |    2 +-
 _posts/2014-04-09-requirejs.html       |    5 +-
 _scss/_demo-list.scss                  |   69 ++
 _scss/_faq.scss                        |   73 ++
 _scss/_global.scss                     |   73 ++
 _scss/_helpers.scss                    |   53 +-
 _scss/_main.scss                       |  293 ------
 _scss/_normalize.scss                  |  348 ++++----
 _scss/_site-nav.scss                   |   68 ++
 _scss/_variables.scss                  |   21 +-
 _scss/style.scss                       |    5 +-
 css/gallery.css                        |   44 +-
 css/shuffle-styles.css                 |  103 +--
 css/style.css                          | 1126 +++++++++++-------------
 gulpfile.js                            |   15 +-
 js/demos/animate-in.js                 |  154 ++--
 js/demos/bootstrap3grid.js             |   22 -
 js/demos/padding-grid.js               |    6 +
 js/evenheights.js                      |    2 +
 js/faq.js                              |   90 +-
 js/page.js                             |   23 +-
 js/require-main.js                     |   48 +-
 24 files changed, 1252 insertions(+), 1400 deletions(-)
 create mode 100644 _scss/_demo-list.scss
 create mode 100644 _scss/_faq.scss
 create mode 100644 _scss/_global.scss
 create mode 100644 _scss/_site-nav.scss
 delete mode 100644 js/demos/bootstrap3grid.js
 create mode 100644 js/demos/padding-grid.js

diff --git a/_config.yml b/_config.yml
index 9cf2932..bb85c72 100644
--- a/_config.yml
+++ b/_config.yml
@@ -34,7 +34,7 @@ defaultTitle: 'Shuffle.js'
 defaultDescription: 'Categorize, sort, and filter a responsive grid of items'
 defaultImage: '/img/shuffle.png'
 
-longDescription: 'Shuffle.js is a jQuery plugin for sorting, filtering, and laying out a group of items. It&rsquo;s performant, responsive, and fast. Check out the demos!'
+longDescription: 'Shuffle.js is a package for sorting, filtering, and laying out a group of items. It&rsquo;s performant, responsive, and fast. Check out the demos!'
 
 demos:
   - url: 'demos/2013-05-01-basic'
diff --git a/_posts/2013-07-16-faq.html b/_posts/2013-07-16-faq.html
index 161202c..37d30fd 100644
--- a/_posts/2013-07-16-faq.html
+++ b/_posts/2013-07-16-faq.html
@@ -63,13 +63,6 @@ extraJS: [ "faq.js" ]
       </div>
     </article>
 
-    <article id="zepto" class="question js-question">
-      <div class="question__inner">
-        <h3 class="question__title">Does Shuffle work with Zepto?</h3>
-        <p class="question__answer">Not at the moment.</p>
-      </div>
-    </article>
-
     <article id="padding" class="question js-question">
       <div class="question__inner">
         <h3 class="question__title">Padding isn&rsquo;t working on the shuffle element.</h3>
diff --git a/_posts/2014-03-08-bootstrap3-grid.html b/_posts/2014-03-08-bootstrap3-grid.html
index 6b1d172..18d478b 100644
--- a/_posts/2014-03-08-bootstrap3-grid.html
+++ b/_posts/2014-03-08-bootstrap3-grid.html
@@ -4,7 +4,7 @@ title: Bootstrap 3 Grid Demo
 description: Demonstrating how Shuffle can be used with a grid system which uses padding for gutters instead of margins.
 image: /demos/bootstrap3grid.jpg
 externalCSS: [ "http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" ]
-extraJS: [ "demos/bootstrap3grid.js" ]
+extraJS: [ "demos/padding-grid.js" ]
 ---
 <style>
 
diff --git a/_posts/2014-04-09-requirejs.html b/_posts/2014-04-09-requirejs.html
index ab79596..1c54788 100644
--- a/_posts/2014-04-09-requirejs.html
+++ b/_posts/2014-04-09-requirejs.html
@@ -13,10 +13,7 @@ pagejs: false
 <div class="container-fluid">
   <h2>RequireJS!</h2>
   <p>
-    Shuffle is compatible with AMD loaders like <a href="http://requirejs.org">RequireJS</a>.
-    You can take a peek at the <a href="{{ site.baseurl }}/js/require-main.js">config file</a> used on this page.
-    Just remember, Shuffle needs Modernizr to work!
-    I also don't recommend using the "jquery.shuffle.modernizr.js" file with RequireJS because Modernizr doesn't have an AMD defintion block.
+    Shuffle uses a UMD wrapper, so it is compatible with AMD loaders like <a href="http://requirejs.org">RequireJS</a>. The UMD wrapper also allows Shuffle to work with CommonJS modules. You can take a peek at the <a href="{{ site.baseurl }}/js/require-main.js">config file</a> used on this page.
   </p>
 </div>
 
diff --git a/_scss/_demo-list.scss b/_scss/_demo-list.scss
new file mode 100644
index 0000000..71ad4ff
--- /dev/null
+++ b/_scss/_demo-list.scss
@@ -0,0 +1,69 @@
+.demo-list .figure-wrap {
+  position: relative;
+  z-index: 1;
+}
+
+.demo-list .figure-wrap,
+.demo-list .figure-wrap img {
+  // Promote to its own layer. makes filters look ok on retina with images
+  transform: translateZ(0);
+  transition: .1s ease;
+}
+
+.demo-list:hover .figure-wrap {
+  transform: scale3d( 1, 1, 1 );
+
+  img {
+
+    filter: grayscale(1);
+  }
+}
+
+.demo-list:hover .figure-wrap:hover {
+  z-index: 2;
+  transform: scale3d( 1.05, 1.05, 1 );
+
+  img {
+    filter: none;
+  }
+}
+
+.demo-list .figure-wrap:nth-child(4n + 1) {
+  margin-left: 0;
+}
+
+.demo-list .figure-wrap > a {
+  display: block;
+}
+
+.demo-list .figure-wrap figcaption {
+  margin-top: .5em;
+  margin-bottom: 1em;
+}
+
+
+.demo-link-container::before {
+  content: '➜';
+  color: $emerald;
+  margin-right: 5px;
+}
+
+
+span.demo-link-container::before {
+  margin-left: 5px;
+}
+
+@media screen and (max-width: 47.9375em) {
+
+  .demo-list + .demo-list {
+    margin-top: 1em;
+  }
+
+  .figure-wrap:nth-child(odd) {
+    margin-left: 0;
+  }
+
+  .figure-wrap:nth-child(n + 3) {
+    margin-top: 1em;
+  }
+}
diff --git a/_scss/_faq.scss b/_scss/_faq.scss
new file mode 100644
index 0000000..be7c9ea
--- /dev/null
+++ b/_scss/_faq.scss
@@ -0,0 +1,73 @@
+// FAQ
+
+.search-section {
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+
+input.faq-search {
+  -webkit-appearance: searchfield;
+  box-sizing: border-box;
+  width: 100%;
+  border: 2px solid $gray40;
+  border-radius: 4px;
+  padding: 0.5em;
+  font-size: 1.125em;
+  color: $gray40;
+  transition: .15s;
+
+  &::placeholder {
+    color: $gray40;
+    transition: .15s;
+  }
+
+  &:hover {
+    outline: 0;
+    color: $gray30;
+    border-color: $gray30;
+
+    &::placeholder {
+      color: $gray30;
+    }
+  }
+
+  &:focus {
+    outline: 0;
+    color: $nephritis;
+    border-color: $nephritis;
+
+    &::placeholder {
+      color: $nephritis;
+    }
+  }
+}
+
+
+.question {
+  margin: 2em 0;
+  overflow: hidden;
+  transition: .2s ease-out;
+}
+
+.question--collapsed {
+  height: 0 !important; // Needs to override inline style
+  margin: 0;
+  border-width: 0;
+}
+
+.question--collapsed + .question  {
+  margin-top: 0;
+}
+
+.question--unanswered {
+  padding-top: 1.25em;
+  border-top: 2px solid $emerald;
+}
+
+.question__title {
+  margin-top: 0;
+}
+
+.question__answer {
+  margin-bottom: 0;
+}
diff --git a/_scss/_global.scss b/_scss/_global.scss
new file mode 100644
index 0000000..55abbff
--- /dev/null
+++ b/_scss/_global.scss
@@ -0,0 +1,73 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+pre {
+  max-height: 30em;
+}
+
+picture {
+  display: block;
+}
+
+img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+figure {
+  margin: 0;
+}
+
+ul ul {
+  padding-left: 1.25em;
+  margin: 0;
+  list-style-type: circle;
+}
+
+li {
+  line-height: 1.4;
+}
+
+nav > a {
+  display: block;
+  margin: 5px 0;
+}
+
+.container-fluid {
+  width: 93%;
+  max-width: 1200px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.row.row--full {
+  margin-left: 0;
+}
+
+.breathable-list li {
+  line-height: 1.7;
+}
+
+// Filters
+.filter__label {
+  margin: 0 0 3px;
+}
+
+.filter__search {
+  margin: 5px 0;
+}
+
+
+.sort-options {
+  margin-top: 10px;
+}
+
+#be-social {
+  h2 {
+    margin-bottom: 32px;
+  }
+}
diff --git a/_scss/_helpers.scss b/_scss/_helpers.scss
index 20062e1..6999d51 100644
--- a/_scss/_helpers.scss
+++ b/_scss/_helpers.scss
@@ -4,7 +4,7 @@
   display: inline-block;
 }
 
-
+.aspect,
 .keep-ratio {
   position: relative;
   width: 100%;
@@ -17,15 +17,21 @@
   }
 }
 
+.aspect--4x3 {
+  padding-bottom: 75%;
+}
 
+.aspect--16x9 {
+  padding-bottom: 56.25%;
+}
 
-// Hide from both screenreaders and browsers: h5bp.com/u
+// Hide from both screenreaders and browsers.
 .hidden {
   display: none !important;
   visibility: hidden;
 }
 
-// Hide only visually, but have it available for screenreaders: h5bp.com/v
+// Hide only visually, but have it available for screenreaders.
 .visuallyhidden {
   border: 0;
   clip: rect(0 0 0 0);
@@ -37,40 +43,17 @@
   width: 1px;
 }
 
-/*
- * Clearfix: contain floats
- *
- * For modern browsers
- * 1. The space content is one way to avoid an Opera bug when the
- *    `contenteditable` attribute is included anywhere else in the document.
- *    Otherwise it causes space to appear at the top and bottom of elements
- *    that receive the `clearfix` class.
- * 2. The use of `table` rather than `block` is only necessary if using
- *    `:before` to contain the top-margins of child elements.
- */
-
-.clearfix:before,
-.clearfix:after {
-    content: " "; /* 1 */
-    display: table; /* 2 */
-}
-
-.clearfix:after {
-    clear: both;
-}
-
-/*
- * For IE 6/7 only
- * Include this rule to trigger hasLayout and contain floats.
- */
-
-.clearfix {
-    *zoom: 1;
+.clearfix,
+.clearfix::after {
+  content: " ";
+  display: table;
+  clear: both;
 }
 
 .pull-left {
   float: left;
 }
+
 .pull-right {
   float: right;
 }
@@ -82,12 +65,6 @@
   background-color: transparent;
   border: 0;
 }
-.input-block-level {
-  display: block;
-  width: 100%;
-  min-height: 30px;
-  box-sizing: border-box;
-}
 
 .table-center-wrap {
   display: table;
diff --git a/_scss/_main.scss b/_scss/_main.scss
index c69b687..e69de29 100644
--- a/_scss/_main.scss
+++ b/_scss/_main.scss
@@ -1,293 +0,0 @@
-@import "variables";
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-pre {
-  max-height: 30em;
-}
-
-picture {
-  display: block;
-}
-
-img {
-  display: block;
-  max-width: 100%;
-  height: auto;
-}
-
-/* lets have some constraints shall we */
-.container-fluid {
-  width: 93%;
-  max-width: 1200px;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.row.row--full {
-  margin-left: 0;
-}
-
-ul ul {
-  padding-left: 1.25em;
-  margin: 0;
-  list-style-type: circle;
-}
-
-li {
-  line-height: 1.4;
-}
-
-.breathable-list li {
-  line-height: 1.7;
-}
-
-
-.site-nav {
-
-  .site-nav__title {
-    color: $clouds;
-
-    &:first-child {
-      margin-top: 0;
-    }
-  }
-
-  .btn {
-    width: 100%;
-  }
-
-  .site-nav__tray {
-    transition: .2s;
-    overflow: hidden;
-    height: 300px;
-    background-color: $wetAsphalt;
-  }
-
-  .site-nav__tray-inner {
-    padding: 30px 0;
-  }
-
-  &.collapsed .site-nav__tray {
-    height: 0;
-
-    // IE7 wtf
-    .lt-ie8 & {
-      display: none;
-    }
-  }
-
-
-  .site-nav__band {
-    position: relative;
-
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 4px;
-      background: $wetAsphalt;
-    }
-  }
-
-}
-
-.site-footer {
-  margin-top: 2em;
-  padding: 1em 0;
-  background-color: $wetAsphalt;
-}
-
-.site-footer__credit {
-  margin: 0;
-  text-align: right;
-}
-
-nav > a {
-  display: block;
-  margin: 5px 0;
-}
-
-
-.demo-list .figure-wrap {
-  position: relative;
-  z-index: 1;
-}
-
-.demo-list .figure-wrap,
-.demo-list .figure-wrap img {
-  // Promote to its own layer. makes filters look ok on retina with images
-  transform: translateZ(0);
-  transition: .1s ease;
-}
-
-.demo-list:hover .figure-wrap {
-  transform: scale3d( 1, 1, 1 );
-
-  img {
-
-    filter: grayscale(1);
-  }
-}
-
-.demo-list:hover .figure-wrap:hover {
-  z-index: 2;
-  transform: scale3d( 1.05, 1.05, 1 );
-
-  img {
-    filter: none;
-  }
-}
-
-.demo-list .figure-wrap:nth-child(4n + 1) {
-  margin-left: 0;
-}
-
-.demo-list .figure-wrap > a {
-  display: block;
-}
-
-.demo-list .figure-wrap figcaption {
-  margin-top: .5em;
-  margin-bottom: 1em;
-}
-
-
-.demo-link-container::before {
-  content: '➜';
-  color: $emerald;
-  margin-right: 5px;
-}
-
-
-span.demo-link-container::before {
-  margin-left: 5px;
-}
-
-
-
-// Filters
-.filter__label {
-  margin: 0 0 3px;
-}
-
-.filter__search {
-  margin: 5px 0;
-}
-
-
-.sort-options {
-  margin-top: 10px;
-}
-
-#be-social {
-  h2 {
-    margin-bottom: 32px;
-  }
-}
-
-
-// FAQ
-
-.search-section {
-  margin-top: 1em;
-  margin-bottom: 1em;
-}
-
-input.faq-search {
-  width: 100%;
-  -webkit-appearance: none;
-          appearance: none;
-  border: 2px solid $gray40;
-  border-radius: 4px;
-  padding: 0.5em;
-  font-size: 1.125em;
-  color: $gray40;
-  transition: .15s;
-
-  @include placeholder() {
-    color: $gray40;
-    transition: .15s;
-  }
-
-  &:hover {
-    outline: 0;
-    color: $gray30;
-    border-color: $gray30;
-
-    @include placeholder() {
-      color: $gray30;
-    }
-  }
-
-  &:focus {
-    outline: 0;
-    color: $nephritis;
-    border-color: $nephritis;
-
-    @include placeholder() {
-      color: $nephritis;
-    }
-  }
-}
-
-
-.question {
-  margin: 2em 0;
-  overflow: hidden;
-
-  // For transition
-  transition: .2s ease-out;
-
-  &.collapsed {
-    height: 0 !important; // Needs to override inline style
-    margin: 0;
-    border-width: 0;
-  }
-
-  &.collapsed + .question  {
-    margin-top: 0;
-  }
-}
-
-.question--unanswered {
-  padding-top: 1.25em;
-  border-top: 2px solid $emerald;
-}
-
-.question__title {
-  margin-top: 0;
-}
-
-.question__answer {
-  margin-bottom: 0;
-}
-
-
-
-
-
-@media ( max-width: 47.9375em ) {
-
-  .demo-list + .demo-list {
-    margin-top: 1em;
-  }
-
-  .figure-wrap:nth-child(odd) {
-    margin-left: 0;
-  }
-
-  .figure-wrap:nth-child(n + 3) {
-    margin-top: 1em;
-  }
-
-  .site-nav .btn {
-    margin-bottom: 5px;
-  }
-}
diff --git a/_scss/_normalize.scss b/_scss/_normalize.scss
index 3cb2b3d..6ad3879 100644
--- a/_scss/_normalize.scss
+++ b/_scss/_normalize.scss
@@ -1,11 +1,33 @@
-/*! normalize.css v2.1.2 | MIT License | git.io/normalize */
+/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
 
-/* ==========================================================================
-   HTML5 display definitions
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS and IE text size adjust after device orientation change,
+ *    without disabling user zoom.
+ */
+
+html {
+  font-family: sans-serif; /* 1 */
+  -ms-text-size-adjust: 100%; /* 2 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+  margin: 0;
+}
+
+/* HTML5 display definitions
    ========================================================================== */
 
 /**
- * Correct `block` display not defined in IE 8/9.
+ * Correct `block` display not defined for any HTML5 element in IE 8/9.
+ * Correct `block` display not defined for `details` or `summary` in IE 10/11
+ * and Firefox.
+ * Correct `block` display not defined for `main` in IE 11.
  */
 
 article,
@@ -17,20 +39,24 @@ footer,
 header,
 hgroup,
 main,
+menu,
 nav,
 section,
 summary {
-    display: block;
+  display: block;
 }
 
 /**
- * Correct `inline-block` display not defined in IE 8/9.
+ * 1. Correct `inline-block` display not defined in IE 8/9.
+ * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
  */
 
 audio,
 canvas,
+progress,
 video {
-    display: inline-block;
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
 }
 
 /**
@@ -39,110 +65,77 @@ video {
  */
 
 audio:not([controls]) {
-    display: none;
-    height: 0;
+  display: none;
+  height: 0;
 }
 
 /**
- * Address styling not present in IE 8/9.
+ * Address `[hidden]` styling not present in IE 8/9/10.
+ * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
  */
 
-[hidden] {
-    display: none;
+[hidden],
+template {
+  display: none;
 }
 
-/* ==========================================================================
-   Base
+/* Links
    ========================================================================== */
 
 /**
- * 1. Set default font family to sans-serif.
- * 2. Prevent iOS text size adjust after orientation change, without disabling
- *    user zoom.
- */
-
-html {
-    font-family: sans-serif; /* 1 */
-    -ms-text-size-adjust: 100%; /* 2 */
-    -webkit-text-size-adjust: 100%; /* 2 */
-}
-
-/**
- * Remove default margin.
+ * Remove the gray background color from active links in IE 10.
  */
 
-body {
-    margin: 0;
+a {
+  background-color: transparent;
 }
 
-/* ==========================================================================
-   Links
-   ========================================================================== */
-
 /**
- * Address `outline` inconsistency between Chrome and other browsers.
- */
-
-a:focus {
-    outline: thin dotted;
-}
-
-/**
- * Improve readability when focused and also mouse hovered in all browsers.
+ * Improve readability of focused elements when they are also in an
+ * active/hover state.
  */
 
 a:active,
 a:hover {
-    outline: 0;
+  outline: 0;
 }
 
-/* ==========================================================================
-   Typography
+/* Text-level semantics
    ========================================================================== */
 
-// /**
-//  * Address variable `h1` font-size and margin within `section` and `article`
-//  * contexts in Firefox 4+, Safari 5, and Chrome.
-//  */
-
-// h1 {
-//     font-size: 2em;
-//     margin: 0.67em 0;
-// }
-
 /**
- * Address styling not present in IE 8/9, Safari 5, and Chrome.
+ * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
  */
 
 abbr[title] {
-    border-bottom: 1px dotted;
+  border-bottom: 1px dotted;
 }
 
 /**
- * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
+ * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
  */
 
 b,
 strong {
-    font-weight: bold;
+  font-weight: bold;
 }
 
 /**
- * Address styling not present in Safari 5 and Chrome.
+ * Address styling not present in Safari and Chrome.
  */
 
 dfn {
-    font-style: italic;
+  font-style: italic;
 }
 
 /**
- * Address differences between Firefox and other browsers.
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari, and Chrome.
  */
 
-hr {
-    -moz-box-sizing: content-box;
-    box-sizing: content-box;
-    height: 0;
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
 }
 
 /**
@@ -150,36 +143,8 @@ hr {
  */
 
 mark {
-    background: #ff0;
-    color: #000;
-}
-
-/**
- * Correct font family set oddly in Safari 5 and Chrome.
- */
-
-code,
-kbd,
-pre,
-samp {
-    font-family: monospace, serif;
-    font-size: 1em;
-}
-
-/**
- * Improve readability of pre-formatted text in all browsers.
- */
-
-pre {
-    white-space: pre-wrap;
-}
-
-/**
- * Set consistent quote types.
- */
-
-q {
-    quotes: "\201C" "\201D" "\2018" "\2019";
+  background: #ff0;
+  color: #000;
 }
 
 /**
@@ -187,7 +152,7 @@ q {
  */
 
 small {
-    font-size: 80%;
+  font-size: 80%;
 }
 
 /**
@@ -196,111 +161,122 @@ small {
 
 sub,
 sup {
-    font-size: 75%;
-    line-height: 0;
-    position: relative;
-    vertical-align: baseline;
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
 }
 
 sup {
-    top: -0.5em;
+  top: -0.5em;
 }
 
 sub {
-    bottom: -0.25em;
+  bottom: -0.25em;
 }
 
-/* ==========================================================================
-   Embedded content
+/* Embedded content
    ========================================================================== */
 
 /**
- * Remove border when inside `a` element in IE 8/9.
+ * Remove border when inside `a` element in IE 8/9/10.
  */
 
 img {
-    border: 0;
+  border: 0;
 }
 
 /**
- * Correct overflow displayed oddly in IE 9.
+ * Correct overflow not hidden in IE 9/10/11.
  */
 
 svg:not(:root) {
-    overflow: hidden;
+  overflow: hidden;
 }
 
-/* ==========================================================================
-   Figures
+/* Grouping content
    ========================================================================== */
 
 /**
- * Address margin not present in IE 8/9 and Safari 5.
+ * Address margin not present in IE 8/9 and Safari.
  */
 
 figure {
-    margin: 0;
+  margin: 1em 40px;
 }
 
-/* ==========================================================================
-   Forms
-   ========================================================================== */
+/**
+ * Address differences between Firefox and other browsers.
+ */
+
+hr {
+  box-sizing: content-box;
+  height: 0;
+}
 
 /**
- * Define consistent border, margin, and padding.
+ * Contain overflow in all browsers.
  */
 
-fieldset {
-    border: 1px solid #c0c0c0;
-    margin: 0 2px;
-    padding: 0.35em 0.625em 0.75em;
+pre {
+  overflow: auto;
 }
 
 /**
- * 1. Correct `color` not being inherited in IE 8/9.
- * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ * Address odd `em`-unit font size rendering in all browsers.
  */
 
-legend {
-    border: 0; /* 1 */
-    padding: 0; /* 2 */
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
 }
 
+/* Forms
+   ========================================================================== */
+
+/**
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
+ * styling of `select`, unless a `border` property is set.
+ */
+
 /**
- * 1. Correct font family not being inherited in all browsers.
- * 2. Correct font size not being inherited in all browsers.
- * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
+ * 1. Correct color not being inherited.
+ *    Known issue: affects color of disabled elements.
+ * 2. Correct font properties not being inherited.
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
  */
 
 button,
 input,
+optgroup,
 select,
 textarea {
-    font-family: inherit; /* 1 */
-    font-size: 100%; /* 2 */
-    margin: 0; /* 3 */
+  color: inherit; /* 1 */
+  font: inherit; /* 2 */
+  margin: 0; /* 3 */
 }
 
 /**
- * Address Firefox 4+ setting `line-height` on `input` using `!important` in
- * the UA stylesheet.
+ * Address `overflow` set to `hidden` in IE 8/9/10/11.
  */
 
-button,
-input {
-    line-height: normal;
+button {
+  overflow: visible;
 }
 
 /**
  * Address inconsistent `text-transform` inheritance for `button` and `select`.
  * All other form control elements do not inherit `text-transform` values.
- * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
- * Correct `select` style inheritance in Firefox 4+ and Opera.
+ * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+ * Correct `select` style inheritance in Firefox.
  */
 
 button,
 select {
-    text-transform: none;
+  text-transform: none;
 }
 
 /**
@@ -315,8 +291,8 @@ button,
 html input[type="button"], /* 1 */
 input[type="reset"],
 input[type="submit"] {
-    -webkit-appearance: button; /* 2 */
-    cursor: pointer; /* 3 */
+  -webkit-appearance: button; /* 2 */
+  cursor: pointer; /* 3 */
 }
 
 /**
@@ -325,60 +301,91 @@ input[type="submit"] {
 
 button[disabled],
 html input[disabled] {
-    cursor: default;
+  cursor: default;
 }
 
 /**
- * 1. Address box sizing set to `content-box` in IE 8/9.
- * 2. Remove excess padding in IE 8/9.
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+input {
+  line-height: normal;
+}
+
+/**
+ * It's recommended that you don't attempt to style these elements.
+ * Firefox's implementation doesn't respect box-sizing, padding, or width.
+ *
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
  */
 
 input[type="checkbox"],
 input[type="radio"] {
-    box-sizing: border-box; /* 1 */
-    padding: 0; /* 2 */
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
 }
 
 /**
- * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+ * `font-size` values of the `input`, it causes the cursor style of the
+ * decrement button to change from `default` to `text`.
  */
 
-input[type="search"] {
-    -webkit-appearance: textfield; /* 1 */
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  height: auto;
 }
 
 /**
- * Remove inner padding and search cancel button in Safari 5 and Chrome
- * on OS X.
+ * Define consistent border, margin, and padding.
  */
 
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-decoration {
-    -webkit-appearance: none;
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
 }
 
 /**
- * Remove inner padding and border in Firefox 4+.
+ * 1. Correct `color` not being inherited in IE 8/9/10/11.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
  */
 
-button::-moz-focus-inner,
-input::-moz-focus-inner {
-    border: 0;
-    padding: 0;
+legend {
+  border: 0; /* 1 */
+  padding: 0; /* 2 */
 }
 
 /**
- * 1. Remove default vertical scrollbar in IE 8/9.
- * 2. Improve readability and alignment in all browsers.
+ * Remove default vertical scrollbar in IE 8/9/10/11.
  */
 
 textarea {
-    overflow: auto; /* 1 */
-    vertical-align: top; /* 2 */
+  overflow: auto;
 }
 
-/* ==========================================================================
-   Tables
+/**
+ * Don't inherit the `font-weight` (applied by a rule above).
+ * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+ */
+
+optgroup {
+  font-weight: bold;
+}
+
+/* Tables
    ========================================================================== */
 
 /**
@@ -386,6 +393,11 @@ textarea {
  */
 
 table {
-    border-collapse: collapse;
-    border-spacing: 0;
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+td,
+th {
+  padding: 0;
 }
diff --git a/_scss/_site-nav.scss b/_scss/_site-nav.scss
new file mode 100644
index 0000000..f95ebb2
--- /dev/null
+++ b/_scss/_site-nav.scss
@@ -0,0 +1,68 @@
+.site-nav {
+
+  .site-nav__title {
+    color: $clouds;
+
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+
+  .btn {
+    width: 100%;
+  }
+
+  .site-nav__tray {
+    transition: .2s;
+    overflow: hidden;
+    height: 300px;
+    background-color: $wetAsphalt;
+  }
+
+  .site-nav__tray-inner {
+    padding: 30px 0;
+  }
+
+  &.collapsed .site-nav__tray {
+    height: 0;
+
+    // IE7 wtf
+    .lt-ie8 & {
+      display: none;
+    }
+  }
+
+
+  .site-nav__band {
+    position: relative;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 4px;
+      background: $wetAsphalt;
+    }
+  }
+
+}
+
+.site-footer {
+  margin-top: 2em;
+  padding: 1em 0;
+  background-color: $wetAsphalt;
+}
+
+.site-footer__credit {
+  margin: 0;
+  text-align: right;
+}
+
+@media screen and (max-width: 47.9375em) {
+
+  .site-nav .btn {
+    margin-bottom: 5px;
+  }
+}
diff --git a/_scss/_variables.scss b/_scss/_variables.scss
index 5a495a1..cdf0a6c 100644
--- a/_scss/_variables.scss
+++ b/_scss/_variables.scss
@@ -44,28 +44,9 @@ $white: #FFF;
 
 @mixin clearfix() {
 
-  &:before,
-  &:after {
+  &::after {
     content: " ";
     display: table;
-  }
-
-  &:after {
     clear: both;
   }
-
-
-  & {
-    *zoom: 1;
-  }
 }
-
-@mixin placeholder() {
-  &::-webkit-input-placeholder {
-    @content;
-  }
-  &::-moz-input-placeholder {
-    @content;
-  }
-}
-
diff --git a/_scss/style.scss b/_scss/style.scss
index 8ed9f30..39e72d4 100644
--- a/_scss/style.scss
+++ b/_scss/style.scss
@@ -3,6 +3,9 @@
 @import "type";
 @import "bootstrap";
 @import "mobile-grid";
-@import "main";
+@import "global";
+@import "site-nav";
+@import "demo-list";
+@import "faq";
 @import "buttons";
 @import "helpers";
diff --git a/css/gallery.css b/css/gallery.css
index b57c0c7..d40da9c 100644
--- a/css/gallery.css
+++ b/css/gallery.css
@@ -4,10 +4,12 @@
 
 .filter-group .filter-group__label {
   margin: 0 0 5px; }
+
 .filter-group button {
   width: 40px;
   height: 40px;
   padding: 0; }
+
 .filter-group label {
   cursor: pointer; }
 
@@ -19,19 +21,19 @@
   position: relative;
   margin-left: 0;
   margin-top: 10px; }
-.shape .shape__inner {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0; }
-.shape .shape__space {
-  width: 100%;
-  height: 100%;
-  background-color: black;
-  border-style: solid;
-  border-width: 0;
-  border-color: transparent; }
+  .shape .shape__inner {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0; }
+  .shape .shape__space {
+    width: 100%;
+    height: 100%;
+    background-color: black;
+    border-style: solid;
+    border-width: 0;
+    border-color: transparent; }
 
 .shape--blue .shape__space {
   background-color: #3498DB;
@@ -53,9 +55,7 @@
   border-radius: 50%; }
 
 .shape--diamond .shape__space {
-  -webkit-transform: rotate(45deg) scale(0.70711);
-      -ms-transform: rotate(45deg) scale(0.70711);
-          transform: rotate(45deg) scale(0.70711); }
+  transform: rotate(45deg) scale(0.70711); }
 
 .shape--triangle .shape__space {
   padding-top: 14.5px;
@@ -70,6 +70,7 @@
   height: 250px;
   overflow: visible;
   padding-bottom: 0; }
+
 .lt-ie9 .shape .shape__inner {
   position: static;
   width: 100%;
@@ -81,12 +82,14 @@
     height: 0;
     width: 0;
     border-width: 0 135px 234px 135px; } }
+
 @media (min-width: 768px) and (max-width: 979px) {
   .shape--triangle .shape__space {
     padding-top: 11px;
     height: 0;
     width: 0;
     border-width: 0 83px 144px 83px; } }
+
 @media (max-width: 767px) {
   .shape--triangle .shape__space {
     padding-top: 40px;
@@ -94,18 +97,21 @@
     width: 0;
     border-width: 0 300px 520px 300px;
     margin: auto; } }
+
 @media (max-width: 600px) {
   .shape--triangle .shape__space {
     padding-top: 32px;
     height: 0;
     width: 0;
     border-width: 0 240px 416px 240px; } }
+
 @media (max-width: 480px) {
   .shape--triangle .shape__space {
     padding-top: 21.5px;
     height: 0;
     width: 0;
     border-width: 0 160px 277px 160px; } }
+
 body::before {
   content: 'Default - 940px';
   position: fixed;
@@ -115,21 +121,23 @@ body::before {
   width: 100%;
   height: 25px;
   background-color: rgba(119, 204, 102, 0.6);
-  -webkit-transition: background .2s ease;
-          transition: background .2s ease; }
+  transition: background .2s ease; }
 
 @media (min-width: 1200px) {
   body::before {
     content: 'Large Desktop - 1200px+';
     background-color: rgba(204, 119, 102, 0.6); } }
+
 @media (min-width: 768px) and (max-width: 979px) {
   body::before {
     content: 'Portrait tablet to landscape and desktop - > 768px && < 979px';
     background-color: rgba(204, 187, 102, 0.6); } }
+
 @media (max-width: 767px) {
   body::before {
     content: 'Phones to Tablets - < 767px';
     background-color: rgba(102, 153, 204, 0.6); } }
+
 @media (max-width: 480px) {
   body::before {
     content: 'Phones - < 480px';
diff --git a/css/shuffle-styles.css b/css/shuffle-styles.css
index 6f95193..af693dc 100644
--- a/css/shuffle-styles.css
+++ b/css/shuffle-styles.css
@@ -1,44 +1,44 @@
-/*=============================================*\
- Some styles to show off masonry layout
+/*=============================================* Some styles to show off masonry layout
 \*=============================================*/
 .picture-item {
   height: 220px;
   margin-top: 24px; }
-.picture-item.shuffle-item {
-  margin-left: 0
-  /* shuffle items shouldn't have a left margin*/ }
-.picture-item.picture-item--h2 {
-  height: 464px
-  /* 2x the height + 1 gutter */ }
-.picture-item.span6:not(.picture-item--h2) .picture-item__details {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  background-color: #333;
-  background-color: rgba(0, 0, 0, 0.6);
-  color: white;
-  overflow: hidden; }
-.picture-item.span6:not(.picture-item--h2) .picture-item__description {
-  display: none; }
-.picture-item .picture-item__inner {
-  background: #ECF0F1;
-  height: 100%;
-  overflow: hidden; }
-.picture-item img {
-  display: block;
-  width: 100%;
-  height: auto; }
-.picture-item .picture-item__blur {
-  display: none; }
-.picture-item .picture-item__details, .picture-item .picture-item__description {
-  padding: 1em; }
-.picture-item .picture-item__description {
-  margin: 0;
-  padding-top: 0;
-  padding-right: 2em; }
-.picture-item .picture-item__tags {
-  margin: 0; }
+  .picture-item.shuffle-item {
+    margin-left: 0;
+    /* shuffle items shouldn't have a left margin*/ }
+  .picture-item.picture-item--h2 {
+    height: 464px;
+    /* 2x the height + 1 gutter */ }
+  .picture-item.span6:not(.picture-item--h2) .picture-item__details {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    background-color: #333;
+    background-color: rgba(0, 0, 0, 0.6);
+    color: white;
+    overflow: hidden; }
+  .picture-item.span6:not(.picture-item--h2) .picture-item__description {
+    display: none; }
+  .picture-item .picture-item__inner {
+    background: #ECF0F1;
+    height: 100%;
+    overflow: hidden; }
+  .picture-item img {
+    display: block;
+    width: 100%;
+    height: auto; }
+  .picture-item .picture-item__blur {
+    display: none; }
+  .picture-item .picture-item__details,
+  .picture-item .picture-item__description {
+    padding: 1em; }
+  .picture-item .picture-item__description {
+    margin: 0;
+    padding-top: 0;
+    padding-right: 2em; }
+  .picture-item .picture-item__tags {
+    margin: 0; }
 
 /* autoprefixer: off */
 @supports (filter: blur(1px)) or (-webkit-filter: blur(1px)) {
@@ -49,13 +49,14 @@
     top: calc(50px - 220px);
     left: 0;
     display: block;
-    -webkit-filter: blur(7px);
-            filter: blur(7px); }
+    filter: blur(7px); }
   .picture-item.span6:not(.picture-item--h2) .picture-item__details {
     background: none; }
-  .picture-item.span6:not(.picture-item--h2) .picture-item__tags, .picture-item.span6:not(.picture-item--h2) .picture-item__title {
+  .picture-item.span6:not(.picture-item--h2) .picture-item__tags,
+  .picture-item.span6:not(.picture-item--h2) .picture-item__title {
     position: relative;
     z-index: 2; } }
+
 /*
   Shuffle needs either relative or absolute positioning on the container
   It will set it for you, but it'll cause another style recalculation and layout.
@@ -89,17 +90,17 @@
   .picture-item {
     height: auto;
     margin-top: 20px; }
-  .picture-item.picture-item--h2 {
-    height: auto; }
-  .picture-item .picture-item__details, .picture-item .picture-item__description {
-    font-size: .875em;
-    padding: .625em; }
-  .picture-item .picture-item__description {
-    padding-right: .875em;
-    padding-bottom: 1.25em; }
-
-  .filter > .row-fluid, .filter > .row-fluid > div {
+    .picture-item.picture-item--h2 {
+      height: auto; }
+    .picture-item .picture-item__details,
+    .picture-item .picture-item__description {
+      font-size: .875em;
+      padding: .625em; }
+    .picture-item .picture-item__description {
+      padding-right: .875em;
+      padding-bottom: 1.25em; }
+  .filter > .row-fluid,
+  .filter > .row-fluid > div {
     margin: 10px 0; }
-
   .m-nofloat {
     float: none; } }
diff --git a/css/style.css b/css/style.css
index 81e3e3a..3ccfb24 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,19 +1,59 @@
 @charset "UTF-8";
-/*! normalize.css v2.1.2 | MIT License | git.io/normalize */
-/* ==========================================================================
-   HTML5 display definitions
+/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS and IE text size adjust after device orientation change,
+ *    without disabling user zoom.
+ */
+html {
+  font-family: sans-serif;
+  /* 1 */
+  -ms-text-size-adjust: 100%;
+  /* 2 */
+  -webkit-text-size-adjust: 100%;
+  /* 2 */ }
+
+/**
+ * Remove default margin.
+ */
+body {
+  margin: 0; }
+
+/* HTML5 display definitions
    ========================================================================== */
 /**
- * Correct `block` display not defined in IE 8/9.
+ * Correct `block` display not defined for any HTML5 element in IE 8/9.
+ * Correct `block` display not defined for `details` or `summary` in IE 10/11
+ * and Firefox.
+ * Correct `block` display not defined for `main` in IE 11.
  */
-article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
   display: block; }
 
 /**
- * Correct `inline-block` display not defined in IE 8/9.
+ * 1. Correct `inline-block` display not defined in IE 8/9.
+ * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
  */
-audio, canvas, video {
-  display: inline-block; }
+audio,
+canvas,
+progress,
+video {
+  display: inline-block;
+  /* 1 */
+  vertical-align: baseline;
+  /* 2 */ }
 
 /**
  * Prevent modern browsers from displaying `audio` without controls.
@@ -24,75 +64,57 @@ audio:not([controls]) {
   height: 0; }
 
 /**
- * Address styling not present in IE 8/9.
+ * Address `[hidden]` styling not present in IE 8/9/10.
+ * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
  */
-[hidden] {
+[hidden],
+template {
   display: none; }
 
-/* ==========================================================================
-   Base
-   ========================================================================== */
-/**
- * 1. Set default font family to sans-serif.
- * 2. Prevent iOS text size adjust after orientation change, without disabling
- *    user zoom.
- */
-html {
-  font-family: sans-serif;
-  /* 1 */
-  -ms-text-size-adjust: 100%;
-  /* 2 */
-  -webkit-text-size-adjust: 100%
-  /* 2 */ }
-
-/**
- * Remove default margin.
- */
-body {
-  margin: 0; }
-
-/* ==========================================================================
-   Links
+/* Links
    ========================================================================== */
 /**
- * Address `outline` inconsistency between Chrome and other browsers.
+ * Remove the gray background color from active links in IE 10.
  */
-a:focus {
-  outline: thin dotted; }
+a {
+  background-color: transparent; }
 
 /**
- * Improve readability when focused and also mouse hovered in all browsers.
+ * Improve readability of focused elements when they are also in an
+ * active/hover state.
  */
-a:active, a:hover {
+a:active,
+a:hover {
   outline: 0; }
 
-/* ==========================================================================
-   Typography
+/* Text-level semantics
    ========================================================================== */
 /**
- * Address styling not present in IE 8/9, Safari 5, and Chrome.
+ * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
  */
 abbr[title] {
   border-bottom: 1px dotted; }
 
 /**
- * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
+ * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
  */
-b, strong {
+b,
+strong {
   font-weight: bold; }
 
 /**
- * Address styling not present in Safari 5 and Chrome.
+ * Address styling not present in Safari and Chrome.
  */
 dfn {
   font-style: italic; }
 
 /**
- * Address differences between Firefox and other browsers.
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari, and Chrome.
  */
-hr {
-  box-sizing: content-box;
-  height: 0; }
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0; }
 
 /**
  * Address styling not present in IE 8/9.
@@ -101,25 +123,6 @@ mark {
   background: #ff0;
   color: #000; }
 
-/**
- * Correct font family set oddly in Safari 5 and Chrome.
- */
-code, kbd, pre, samp {
-  font-family: monospace, serif;
-  font-size: 1em; }
-
-/**
- * Improve readability of pre-formatted text in all browsers.
- */
-pre {
-  white-space: pre-wrap; }
-
-/**
- * Set consistent quote types.
- */
-q {
-  quotes: "\201C" "\201D" "\2018" "\2019"; }
-
 /**
  * Address inconsistent and variable font size in all browsers.
  */
@@ -129,7 +132,8 @@ small {
 /**
  * Prevent `sub` and `sup` affecting `line-height` in all browsers.
  */
-sub, sup {
+sub,
+sup {
   font-size: 75%;
   line-height: 0;
   position: relative;
@@ -141,78 +145,89 @@ sup {
 sub {
   bottom: -0.25em; }
 
-/* ==========================================================================
-   Embedded content
+/* Embedded content
    ========================================================================== */
 /**
- * Remove border when inside `a` element in IE 8/9.
+ * Remove border when inside `a` element in IE 8/9/10.
  */
 img {
   border: 0; }
 
 /**
- * Correct overflow displayed oddly in IE 9.
+ * Correct overflow not hidden in IE 9/10/11.
  */
 svg:not(:root) {
   overflow: hidden; }
 
-/* ==========================================================================
-   Figures
+/* Grouping content
    ========================================================================== */
 /**
- * Address margin not present in IE 8/9 and Safari 5.
+ * Address margin not present in IE 8/9 and Safari.
  */
 figure {
-  margin: 0; }
+  margin: 1em 40px; }
 
-/* ==========================================================================
-   Forms
-   ========================================================================== */
 /**
- * Define consistent border, margin, and padding.
+ * Address differences between Firefox and other browsers.
  */
-fieldset {
-  border: 1px solid #c0c0c0;
-  margin: 0 2px;
-  padding: 0.35em 0.625em 0.75em; }
+hr {
+  box-sizing: content-box;
+  height: 0; }
 
 /**
- * 1. Correct `color` not being inherited in IE 8/9.
- * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ * Contain overflow in all browsers.
  */
-legend {
-  border: 0;
-  /* 1 */
-  padding: 0
-  /* 2 */ }
+pre {
+  overflow: auto; }
 
 /**
- * 1. Correct font family not being inherited in all browsers.
- * 2. Correct font size not being inherited in all browsers.
- * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
+ * Address odd `em`-unit font size rendering in all browsers.
+ */
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em; }
+
+/* Forms
+   ========================================================================== */
+/**
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
+ * styling of `select`, unless a `border` property is set.
+ */
+/**
+ * 1. Correct color not being inherited.
+ *    Known issue: affects color of disabled elements.
+ * 2. Correct font properties not being inherited.
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
  */
-button, input, select, textarea {
-  font-family: inherit;
+button,
+input,
+optgroup,
+select,
+textarea {
+  color: inherit;
   /* 1 */
-  font-size: 100%;
+  font: inherit;
   /* 2 */
-  margin: 0
+  margin: 0;
   /* 3 */ }
 
 /**
- * Address Firefox 4+ setting `line-height` on `input` using `!important` in
- * the UA stylesheet.
+ * Address `overflow` set to `hidden` in IE 8/9/10/11.
  */
-button, input {
-  line-height: normal; }
+button {
+  overflow: visible; }
 
 /**
  * Address inconsistent `text-transform` inheritance for `button` and `select`.
  * All other form control elements do not inherit `text-transform` values.
- * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
- * Correct `select` style inheritance in Firefox 4+ and Opera.
+ * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+ * Correct `select` style inheritance in Firefox.
  */
-button, select {
+button,
+select {
   text-transform: none; }
 
 /**
@@ -222,61 +237,92 @@ button, select {
  * 3. Improve usability and consistency of cursor style between image-type
  *    `input` and others.
  */
-button, html input[type="button"], input[type="reset"], input[type="submit"] {
+button,
+html input[type="button"],
+input[type="reset"],
+input[type="submit"] {
   -webkit-appearance: button;
   /* 2 */
-  cursor: pointer
+  cursor: pointer;
   /* 3 */ }
 
 /**
  * Re-set default cursor for disabled elements.
  */
-button[disabled], html input[disabled] {
+button[disabled],
+html input[disabled] {
   cursor: default; }
 
 /**
- * 1. Address box sizing set to `content-box` in IE 8/9.
- * 2. Remove excess padding in IE 8/9.
+ * Remove inner padding and border in Firefox 4+.
+ */
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0; }
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
  */
-input[type="checkbox"], input[type="radio"] {
+input {
+  line-height: normal; }
+
+/**
+ * It's recommended that you don't attempt to style these elements.
+ * Firefox's implementation doesn't respect box-sizing, padding, or width.
+ *
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ */
+input[type="checkbox"],
+input[type="radio"] {
   box-sizing: border-box;
   /* 1 */
-  padding: 0
+  padding: 0;
   /* 2 */ }
 
 /**
- * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+ * `font-size` values of the `input`, it causes the cursor style of the
+ * decrement button to change from `default` to `text`.
  */
-input[type="search"] {
-  -webkit-appearance: textfield
-  /* 1 */ }
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  height: auto; }
 
 /**
- * Remove inner padding and search cancel button in Safari 5 and Chrome
- * on OS X.
+ * Define consistent border, margin, and padding.
  */
-input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none; }
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em; }
 
 /**
- * Remove inner padding and border in Firefox 4+.
+ * 1. Correct `color` not being inherited in IE 8/9/10/11.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
  */
-button::-moz-focus-inner, input::-moz-focus-inner {
+legend {
   border: 0;
-  padding: 0; }
+  /* 1 */
+  padding: 0;
+  /* 2 */ }
 
 /**
- * 1. Remove default vertical scrollbar in IE 8/9.
- * 2. Improve readability and alignment in all browsers.
+ * Remove default vertical scrollbar in IE 8/9/10/11.
  */
 textarea {
-  overflow: auto;
-  /* 1 */
-  vertical-align: top
-  /* 2 */ }
+  overflow: auto; }
 
-/* ==========================================================================
-   Tables
+/**
+ * Don't inherit the `font-weight` (applied by a rule above).
+ * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+ */
+optgroup {
+  font-weight: bold; }
+
+/* Tables
    ========================================================================== */
 /**
  * Remove most spacing between table cells.
@@ -285,20 +331,28 @@ table {
   border-collapse: collapse;
   border-spacing: 0; }
 
+td,
+th {
+  padding: 0; }
+
 body {
   font-family: 'Ubuntu', Verdana, sans-serif;
   color: #5D6D77; }
 
 a {
   text-decoration: none; }
-a, a:visited {
-  color: #3498DB; }
-a:hover {
-  text-decoration: underline; }
-a:active {
-  color: #2ECC71; }
-
-h2, h3, h4, h5, h6 {
+  a, a:visited {
+    color: #3498DB; }
+  a:hover {
+    text-decoration: underline; }
+  a:active {
+    color: #2ECC71; }
+
+h2,
+h3,
+h4,
+h5,
+h6 {
   color: #34495E; }
 
 h1 {
@@ -312,15 +366,15 @@ h2 {
   position: relative;
   font-size: 2.5em;
   margin-bottom: 18px; }
-h2::after {
-  content: '';
-  position: absolute;
-  bottom: 4px;
-  left: 0;
-  z-index: -1;
-  width: 100%;
-  height: 2px;
-  background-color: #2ECC71; }
+  h2::after {
+    content: '';
+    position: absolute;
+    bottom: 4px;
+    left: 0;
+    z-index: -1;
+    width: 100%;
+    height: 2px;
+    background-color: #2ECC71; }
 
 h3 {
   margin: .6667em 0 0.5em;
@@ -333,14 +387,18 @@ h4 {
   h1 {
     font-size: 8vw;
     margin: 3vw 0; }
-
   h2 {
     font-size: 6vw;
     margin: 2vw 0; } }
-h1 > a, h2 > a, h3 > a {
+
+h1 > a,
+h2 > a,
+h3 > a {
   display: none; }
 
-h1:hover > a, h2:hover > a, h3:hover > a {
+h1:hover > a,
+h2:hover > a,
+h3:hover > a {
   position: absolute;
   display: block;
   top: 0;
@@ -358,10 +416,11 @@ h1:hover > a, h2:hover > a, h3:hover > a {
 
 .light-text-dark-box p {
   color: #ECF0F1; }
+
 .light-text-dark-box a {
   color: #ECF0F1; }
-.light-text-dark-box a:hover {
-  color: white; }
+  .light-text-dark-box a:hover {
+    color: white; }
 
 /*!
  * Bootstrap v2.3.2
@@ -376,7 +435,8 @@ h1:hover > a, h2:hover > a, h3:hover > a {
   margin-left: -20px;
   *zoom: 1; }
 
-.row:before, .row:after {
+.row:before,
+.row:after {
   display: table;
   content: "";
   line-height: 0; }
@@ -389,7 +449,10 @@ h1:hover > a, h2:hover > a, h3:hover > a {
   min-height: 1px;
   margin-left: 20px; }
 
-.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
+.container,
+.navbar-static-top .container,
+.navbar-fixed-top .container,
+.navbar-fixed-bottom .container {
   width: 940px; }
 
 .span12 {
@@ -468,7 +531,8 @@ h1:hover > a, h2:hover > a, h3:hover > a {
   width: 100%;
   *zoom: 1; }
 
-.row-fluid:before, .row-fluid:after {
+.row-fluid:before,
+.row-fluid:after {
   display: table;
   content: "";
   line-height: 0; }
@@ -480,6 +544,8 @@ h1:hover > a, h2:hover > a, h3:hover > a {
   display: block;
   width: 100%;
   min-height: 30px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
   box-sizing: border-box;
   float: left;
   margin-left: 2.127659574468085%;
@@ -635,10 +701,12 @@ h1:hover > a, h2:hover > a, h3:hover > a {
   margin-left: 8.51063829787234%;
   *margin-left: 8.404255319148938%; }
 
-[class*="span"].hide, .row-fluid [class*="span"].hide {
+[class*="span"].hide,
+.row-fluid [class*="span"].hide {
   display: none; }
 
-[class*="span"].pull-right, .row-fluid [class*="span"].pull-right {
+[class*="span"].pull-right,
+.row-fluid [class*="span"].pull-right {
   float: right; }
 
 .container {
@@ -646,7 +714,8 @@ h1:hover > a, h2:hover > a, h3:hover > a {
   margin-left: auto;
   *zoom: 1; }
 
-.container:before, .container:after {
+.container:before,
+.container:after {
   display: table;
   content: "";
   line-height: 0; }
@@ -657,7 +726,8 @@ h1:hover > a, h2:hover > a, h3:hover > a {
 .container-fluid {
   *zoom: 1; }
 
-.container-fluid:before, .container-fluid:after {
+.container-fluid:before,
+.container-fluid:after {
   display: table;
   content: "";
   line-height: 0; }
@@ -666,62 +736,69 @@ h1:hover > a, h2:hover > a, h3:hover > a {
   clear: both; }
 
 @media (max-width: 47.9375em) {
-  .navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top {
+  .navbar-fixed-top,
+  .navbar-fixed-bottom,
+  .navbar-static-top {
     margin-left: -20px;
     margin-right: -20px; }
-
   .container-fluid {
     padding: 0; }
-
   .dl-horizontal dt {
     float: none;
     clear: none;
     width: auto;
     text-align: left; }
-
   .dl-horizontal dd {
     margin-left: 0; }
-
   .container {
     width: auto; }
-
   .row-fluid {
     width: 100%; }
-
-  .row, .thumbnails {
+  .row,
+  .thumbnails {
     margin-left: 0; }
-
   .thumbnails > li {
     float: none;
     margin-left: 0; }
-
-  [class*="span"], .uneditable-input[class*="span"], .row-fluid [class*="span"] {
+  [class*="span"],
+  .uneditable-input[class*="span"],
+  .row-fluid [class*="span"] {
     float: none;
     display: block;
     width: 100%;
     margin-left: 0;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
     box-sizing: border-box; }
-
-  .span12, .row-fluid .span12 {
+  .span12,
+  .row-fluid .span12 {
     width: 100%;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
     box-sizing: border-box; }
-
   .row-fluid [class*="offset"]:first-child {
     margin-left: 0; }
-
-  .input-large, .input-xlarge, .input-xxlarge, input[class*="span"], select[class*="span"], textarea[class*="span"], .uneditable-input {
+  .input-large,
+  .input-xlarge,
+  .input-xxlarge,
+  input[class*="span"],
+  select[class*="span"],
+  textarea[class*="span"],
+  .uneditable-input {
     display: block;
     width: 100%;
     min-height: 30px;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
     box-sizing: border-box; }
-
-  .input-prepend input, .input-append input, .input-prepend input[class*="span"], .input-append input[class*="span"] {
+  .input-prepend input,
+  .input-append input,
+  .input-prepend input[class*="span"],
+  .input-append input[class*="span"] {
     display: inline-block;
     width: auto; }
-
   .controls-row [class*="span"] + [class*="span"] {
     margin-left: 0; }
-
   .modal {
     position: fixed;
     top: 20px;
@@ -729,684 +806,572 @@ h1:hover > a, h2:hover > a, h3:hover > a {
     right: 20px;
     width: auto;
     margin: 0; }
-
   .modal.fade {
     top: -100px; }
-
   .modal.fade.in {
     top: 20px; } }
+
 @media (max-width: 30em) {
   .nav-collapse {
     -webkit-transform: translate3d(0, 0, 0); }
-
   .page-header h1 small {
     display: block;
     line-height: 20px; }
-
-  input[type="checkbox"], input[type="radio"] {
+  input[type="checkbox"],
+  input[type="radio"] {
     border: 1px solid #ccc; }
-
   .form-horizontal .control-label {
     float: none;
     width: auto;
     padding-top: 0;
     text-align: left; }
-
   .form-horizontal .controls {
     margin-left: 0; }
-
   .form-horizontal .control-list {
     padding-top: 0; }
-
   .form-horizontal .form-actions {
     padding-left: 10px;
     padding-right: 10px; }
-
-  .media .pull-left, .media .pull-right {
+  .media .pull-left,
+  .media .pull-right {
     float: none;
     display: block;
     margin-bottom: 10px; }
-
   .media-object {
     margin-right: 0;
     margin-left: 0; }
-
   .modal {
     top: 10px;
     left: 10px;
     right: 10px; }
-
   .modal-header .close {
     padding: 10px;
     margin: -10px; }
-
   .carousel-caption {
     position: static; } }
+
 @media (min-width: 48em) and (max-width: 61.1875em) {
   .row {
     margin-left: -20px;
     *zoom: 1; }
-
-  .row:before, .row:after {
+  .row:before,
+  .row:after {
     display: table;
     content: "";
     line-height: 0; }
-
   .row:after {
     clear: both; }
-
   [class*="span"] {
     float: left;
     min-height: 1px;
     margin-left: 20px; }
-
-  .container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
+  .container,
+  .navbar-static-top .container,
+  .navbar-fixed-top .container,
+  .navbar-fixed-bottom .container {
     width: 724px; }
-
   .span12 {
     width: 724px; }
-
   .span11 {
     width: 662px; }
-
   .span10 {
     width: 600px; }
-
   .span9 {
     width: 538px; }
-
   .span8 {
     width: 476px; }
-
   .span7 {
     width: 414px; }
-
   .span6 {
     width: 352px; }
-
   .span5 {
     width: 290px; }
-
   .span4 {
     width: 228px; }
-
   .span3 {
     width: 166px; }
-
   .span2 {
     width: 104px; }
-
   .span1 {
     width: 42px; }
-
   .offset12 {
     margin-left: 764px; }
-
   .offset11 {
     margin-left: 702px; }
-
   .offset10 {
     margin-left: 640px; }
-
   .offset9 {
     margin-left: 578px; }
-
   .offset8 {
     margin-left: 516px; }
-
   .offset7 {
     margin-left: 454px; }
-
   .offset6 {
     margin-left: 392px; }
-
   .offset5 {
     margin-left: 330px; }
-
   .offset4 {
     margin-left: 268px; }
-
   .offset3 {
     margin-left: 206px; }
-
   .offset2 {
     margin-left: 144px; }
-
   .offset1 {
     margin-left: 82px; }
-
   .row-fluid {
     width: 100%;
     *zoom: 1; }
-
-  .row-fluid:before, .row-fluid:after {
+  .row-fluid:before,
+  .row-fluid:after {
     display: table;
     content: "";
     line-height: 0; }
-
   .row-fluid:after {
     clear: both; }
-
   .row-fluid [class*="span"] {
     display: block;
     width: 100%;
     min-height: 30px;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
     box-sizing: border-box;
     float: left;
     margin-left: 2.7624309392265194%;
     *margin-left: 2.709239449864817%; }
-
   .row-fluid [class*="span"]:first-child {
     margin-left: 0; }
-
   .row-fluid .controls-row [class*="span"] + [class*="span"] {
     margin-left: 2.7624309392265194%; }
-
   .row-fluid .span12 {
     width: 100%;
     *width: 99.94680851063829%; }
-
   .row-fluid .span11 {
     width: 91.43646408839778%;
     *width: 91.38327259903608%; }
-
   .row-fluid .span10 {
     width: 82.87292817679558%;
     *width: 82.81973668743387%; }
-
   .row-fluid .span9 {
     width: 74.30939226519337%;
     *width: 74.25620077583166%; }
-
   .row-fluid .span8 {
     width: 65.74585635359117%;
     *width: 65.69266486422946%; }
-
   .row-fluid .span7 {
     width: 57.18232044198895%;
     *width: 57.12912895262725%; }
-
   .row-fluid .span6 {
     width: 48.61878453038674%;
     *width: 48.56559304102504%; }
-
   .row-fluid .span5 {
     width: 40.05524861878453%;
     *width: 40.00205712942283%; }
-
   .row-fluid .span4 {
     width: 31.491712707182323%;
     *width: 31.43852121782062%; }
-
   .row-fluid .span3 {
     width: 22.92817679558011%;
     *width: 22.87498530621841%; }
-
   .row-fluid .span2 {
     width: 14.3646408839779%;
     *width: 14.311449394616199%; }
-
   .row-fluid .span1 {
     width: 5.801104972375691%;
     *width: 5.747913483013988%; }
-
   .row-fluid .offset12 {
     margin-left: 105.52486187845304%;
     *margin-left: 105.41847889972962%; }
-
   .row-fluid .offset12:first-child {
     margin-left: 102.76243093922652%;
     *margin-left: 102.6560479605031%; }
-
   .row-fluid .offset11 {
     margin-left: 96.96132596685082%;
     *margin-left: 96.8549429881274%; }
-
   .row-fluid .offset11:first-child {
     margin-left: 94.1988950276243%;
     *margin-left: 94.09251204890089%; }
-
   .row-fluid .offset10 {
     margin-left: 88.39779005524862%;
     *margin-left: 88.2914070765252%; }
-
   .row-fluid .offset10:first-child {
     margin-left: 85.6353591160221%;
     *margin-left: 85.52897613729868%; }
-
   .row-fluid .offset9 {
     margin-left: 79.8342541436464%;
     *margin-left: 79.72787116492299%; }
-
   .row-fluid .offset9:first-child {
     margin-left: 77.07182320441989%;
     *margin-left: 76.96544022569647%; }
-
   .row-fluid .offset8 {
     margin-left: 71.2707182320442%;
     *margin-left: 71.16433525332079%; }
-
   .row-fluid .offset8:first-child {
     margin-left: 68.50828729281768%;
     *margin-left: 68.40190431409427%; }
-
   .row-fluid .offset7 {
     margin-left: 62.70718232044199%;
     *margin-left: 62.600799341718584%; }
-
   .row-fluid .offset7:first-child {
     margin-left: 59.94475138121547%;
     *margin-left: 59.838368402492065%; }
-
   .row-fluid .offset6 {
     margin-left: 54.14364640883978%;
     *margin-left: 54.037263430116376%; }
-
   .row-fluid .offset6:first-child {
     margin-left: 51.38121546961326%;
     *margin-left: 51.27483249088986%; }
-
   .row-fluid .offset5 {
     margin-left: 45.58011049723757%;
     *margin-left: 45.47372751851417%; }
-
   .row-fluid .offset5:first-child {
     margin-left: 42.81767955801105%;
     *margin-left: 42.71129657928765%; }
-
   .row-fluid .offset4 {
     margin-left: 37.01657458563536%;
     *margin-left: 36.91019160691196%; }
-
   .row-fluid .offset4:first-child {
     margin-left: 34.25414364640884%;
     *margin-left: 34.14776066768544%; }
-
   .row-fluid .offset3 {
     margin-left: 28.45303867403315%;
     *margin-left: 28.346655695309746%; }
-
   .row-fluid .offset3:first-child {
     margin-left: 25.69060773480663%;
     *margin-left: 25.584224756083227%; }
-
   .row-fluid .offset2 {
     margin-left: 19.88950276243094%;
     *margin-left: 19.783119783707537%; }
-
   .row-fluid .offset2:first-child {
     margin-left: 17.12707182320442%;
     *margin-left: 17.02068884448102%; }
-
   .row-fluid .offset1 {
     margin-left: 11.32596685082873%;
     *margin-left: 11.219583872105325%; }
-
   .row-fluid .offset1:first-child {
     margin-left: 8.56353591160221%;
     *margin-left: 8.457152932878806%; }
-
-  input, textarea, .uneditable-input {
+  input,
+  textarea,
+  .uneditable-input {
     margin-left: 0; }
-
   .controls-row [class*="span"] + [class*="span"] {
     margin-left: 20px; }
-
-  input.span12, textarea.span12, .uneditable-input.span12 {
+  input.span12,
+  textarea.span12,
+  .uneditable-input.span12 {
     width: 710px; }
-
-  input.span11, textarea.span11, .uneditable-input.span11 {
+  input.span11,
+  textarea.span11,
+  .uneditable-input.span11 {
     width: 648px; }
-
-  input.span10, textarea.span10, .uneditable-input.span10 {
+  input.span10,
+  textarea.span10,
+  .uneditable-input.span10 {
     width: 586px; }
-
-  input.span9, textarea.span9, .uneditable-input.span9 {
+  input.span9,
+  textarea.span9,
+  .uneditable-input.span9 {
     width: 524px; }
-
-  input.span8, textarea.span8, .uneditable-input.span8 {
+  input.span8,
+  textarea.span8,
+  .uneditable-input.span8 {
     width: 462px; }
-
-  input.span7, textarea.span7, .uneditable-input.span7 {
+  input.span7,
+  textarea.span7,
+  .uneditable-input.span7 {
     width: 400px; }
-
-  input.span6, textarea.span6, .uneditable-input.span6 {
+  input.span6,
+  textarea.span6,
+  .uneditable-input.span6 {
     width: 338px; }
-
-  input.span5, textarea.span5, .uneditable-input.span5 {
+  input.span5,
+  textarea.span5,
+  .uneditable-input.span5 {
     width: 276px; }
-
-  input.span4, textarea.span4, .uneditable-input.span4 {
+  input.span4,
+  textarea.span4,
+  .uneditable-input.span4 {
     width: 214px; }
-
-  input.span3, textarea.span3, .uneditable-input.span3 {
+  input.span3,
+  textarea.span3,
+  .uneditable-input.span3 {
     width: 152px; }
-
-  input.span2, textarea.span2, .uneditable-input.span2 {
+  input.span2,
+  textarea.span2,
+  .uneditable-input.span2 {
     width: 90px; }
-
-  input.span1, textarea.span1, .uneditable-input.span1 {
+  input.span1,
+  textarea.span1,
+  .uneditable-input.span1 {
     width: 28px; } }
+
 @media (min-width: 75em) {
   .row {
     margin-left: -30px;
     *zoom: 1; }
-
-  .row:before, .row:after {
+  .row:before,
+  .row:after {
     display: table;
     content: "";
     line-height: 0; }
-
   .row:after {
     clear: both; }
-
   [class*="span"] {
     float: left;
     min-height: 1px;
     margin-left: 30px; }
-
-  .container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
+  .container,
+  .navbar-static-top .container,
+  .navbar-fixed-top .container,
+  .navbar-fixed-bottom .container {
     width: 1170px; }
-
   .span12 {
     width: 1170px; }
-
   .span11 {
     width: 1070px; }
-
   .span10 {
     width: 970px; }
-
   .span9 {
     width: 870px; }
-
   .span8 {
     width: 770px; }
-
   .span7 {
     width: 670px; }
-
   .span6 {
     width: 570px; }
-
   .span5 {
     width: 470px; }
-
   .span4 {
     width: 370px; }
-
   .span3 {
     width: 270px; }
-
   .span2 {
     width: 170px; }
-
   .span1 {
     width: 70px; }
-
   .offset12 {
     margin-left: 1230px; }
-
   .offset11 {
     margin-left: 1130px; }
-
   .offset10 {
     margin-left: 1030px; }
-
   .offset9 {
     margin-left: 930px; }
-
   .offset8 {
     margin-left: 830px; }
-
   .offset7 {
     margin-left: 730px; }
-
   .offset6 {
     margin-left: 630px; }
-
   .offset5 {
     margin-left: 530px; }
-
   .offset4 {
     margin-left: 430px; }
-
   .offset3 {
     margin-left: 330px; }
-
   .offset2 {
     margin-left: 230px; }
-
   .offset1 {
     margin-left: 130px; }
-
   .row-fluid {
     width: 100%;
     *zoom: 1; }
-
-  .row-fluid:before, .row-fluid:after {
+  .row-fluid:before,
+  .row-fluid:after {
     display: table;
     content: "";
     line-height: 0; }
-
   .row-fluid:after {
     clear: both; }
-
   .row-fluid [class*="span"] {
     display: block;
     width: 100%;
     min-height: 30px;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
     box-sizing: border-box;
     float: left;
     margin-left: 2.564102564102564%;
     *margin-left: 2.5109110747408616%; }
-
   .row-fluid [class*="span"]:first-child {
     margin-left: 0; }
-
   .row-fluid .controls-row [class*="span"] + [class*="span"] {
     margin-left: 2.564102564102564%; }
-
   .row-fluid .span12 {
     width: 100%;
     *width: 99.94680851063829%; }
-
   .row-fluid .span11 {
     width: 91.45299145299145%;
     *width: 91.39979996362975%; }
-
   .row-fluid .span10 {
     width: 82.90598290598291%;
     *width: 82.8527914166212%; }
-
   .row-fluid .span9 {
     width: 74.35897435897436%;
     *width: 74.30578286961266%; }
-
   .row-fluid .span8 {
     width: 65.81196581196582%;
     *width: 65.75877432260411%; }
-
   .row-fluid .span7 {
     width: 57.26495726495726%;
     *width: 57.21176577559556%; }
-
   .row-fluid .span6 {
     width: 48.717948717948715%;
     *width: 48.664757228587014%; }
-
   .row-fluid .span5 {
     width: 40.17094017094017%;
     *width: 40.11774868157847%; }
-
   .row-fluid .span4 {
     width: 31.623931623931625%;
     *width: 31.570740134569924%; }
-
   .row-fluid .span3 {
     width: 23.076923076923077%;
     *width: 23.023731587561375%; }
-
   .row-fluid .span2 {
     width: 14.52991452991453%;
     *width: 14.476723040552828%; }
-
   .row-fluid .span1 {
     width: 5.982905982905983%;
     *width: 5.929714493544281%; }
-
   .row-fluid .offset12 {
     margin-left: 105.12820512820512%;
     *margin-left: 105.02182214948171%; }
-
   .row-fluid .offset12:first-child {
     margin-left: 102.56410256410257%;
     *margin-left: 102.45771958537915%; }
-
   .row-fluid .offset11 {
     margin-left: 96.58119658119658%;
     *margin-left: 96.47481360247316%; }
-
   .row-fluid .offset11:first-child {
     margin-left: 94.01709401709402%;
     *margin-left: 93.91071103837061%; }
-
   .row-fluid .offset10 {
     margin-left: 88.03418803418803%;
     *margin-left: 87.92780505546462%; }
-
   .row-fluid .offset10:first-child {
     margin-left: 85.47008547008548%;
     *margin-left: 85.36370249136206%; }
-
   .row-fluid .offset9 {
     margin-left: 79.48717948717949%;
     *margin-left: 79.38079650845607%; }
-
   .row-fluid .offset9:first-child {
     margin-left: 76.92307692307693%;
     *margin-left: 76.81669394435352%; }
-
   .row-fluid .offset8 {
     margin-left: 70.94017094017094%;
     *margin-left: 70.83378796144753%; }
-
   .row-fluid .offset8:first-child {
     margin-left: 68.37606837606839%;
     *margin-left: 68.26968539734497%; }
-
   .row-fluid .offset7 {
     margin-left: 62.393162393162385%;
     *margin-left: 62.28677941443899%; }
-
   .row-fluid .offset7:first-child {
     margin-left: 59.82905982905982%;
     *margin-left: 59.72267685033642%; }
-
   .row-fluid .offset6 {
     margin-left: 53.84615384615384%;
     *margin-left: 53.739770867430444%; }
-
   .row-fluid .offset6:first-child {
     margin-left: 51.28205128205128%;
     *margin-left: 51.175668303327875%; }
-
   .row-fluid .offset5 {
     margin-left: 45.299145299145295%;
     *margin-left: 45.1927623204219%; }
-
   .row-fluid .offset5:first-child {
     margin-left: 42.73504273504273%;
     *margin-left: 42.62865975631933%; }
-
   .row-fluid .offset4 {
     margin-left: 36.75213675213675%;
     *margin-left: 36.645753773413354%; }
-
   .row-fluid .offset4:first-child {
     margin-left: 34.18803418803419%;
     *margin-left: 34.081651209310785%; }
-
   .row-fluid .offset3 {
     margin-left: 28.205128205128204%;
     *margin-left: 28.0987452264048%; }
-
   .row-fluid .offset3:first-child {
     margin-left: 25.641025641025642%;
     *margin-left: 25.53464266230224%; }
-
   .row-fluid .offset2 {
     margin-left: 19.65811965811966%;
     *margin-left: 19.551736679396257%; }
-
   .row-fluid .offset2:first-child {
     margin-left: 17.094017094017094%;
     *margin-left: 16.98763411529369%; }
-
   .row-fluid .offset1 {
     margin-left: 11.11111111111111%;
     *margin-left: 11.004728132387708%; }
-
   .row-fluid .offset1:first-child {
     margin-left: 8.547008547008547%;
     *margin-left: 8.440625568285142%; }
-
-  input, textarea, .uneditable-input {
+  input,
+  textarea,
+  .uneditable-input {
     margin-left: 0; }
-
   .controls-row [class*="span"] + [class*="span"] {
     margin-left: 30px; }
-
-  input.span12, textarea.span12, .uneditable-input.span12 {
+  input.span12,
+  textarea.span12,
+  .uneditable-input.span12 {
     width: 1156px; }
-
-  input.span11, textarea.span11, .uneditable-input.span11 {
+  input.span11,
+  textarea.span11,
+  .uneditable-input.span11 {
     width: 1056px; }
-
-  input.span10, textarea.span10, .uneditable-input.span10 {
+  input.span10,
+  textarea.span10,
+  .uneditable-input.span10 {
     width: 956px; }
-
-  input.span9, textarea.span9, .uneditable-input.span9 {
+  input.span9,
+  textarea.span9,
+  .uneditable-input.span9 {
     width: 856px; }
-
-  input.span8, textarea.span8, .uneditable-input.span8 {
+  input.span8,
+  textarea.span8,
+  .uneditable-input.span8 {
     width: 756px; }
-
-  input.span7, textarea.span7, .uneditable-input.span7 {
+  input.span7,
+  textarea.span7,
+  .uneditable-input.span7 {
     width: 656px; }
-
-  input.span6, textarea.span6, .uneditable-input.span6 {
+  input.span6,
+  textarea.span6,
+  .uneditable-input.span6 {
     width: 556px; }
-
-  input.span5, textarea.span5, .uneditable-input.span5 {
+  input.span5,
+  textarea.span5,
+  .uneditable-input.span5 {
     width: 456px; }
-
-  input.span4, textarea.span4, .uneditable-input.span4 {
+  input.span4,
+  textarea.span4,
+  .uneditable-input.span4 {
     width: 356px; }
-
-  input.span3, textarea.span3, .uneditable-input.span3 {
+  input.span3,
+  textarea.span3,
+  .uneditable-input.span3 {
     width: 256px; }
-
-  input.span2, textarea.span2, .uneditable-input.span2 {
+  input.span2,
+  textarea.span2,
+  .uneditable-input.span2 {
     width: 156px; }
-
-  input.span1, textarea.span1, .uneditable-input.span1 {
+  input.span1,
+  textarea.span1,
+  .uneditable-input.span1 {
     width: 56px; }
-
   .thumbnails {
     margin-left: -30px; }
-
   .thumbnails > li {
     margin-left: 30px; }
-
   .row-fluid .thumbnails {
     margin-left: 0; } }
+
 @media (max-width: 47.9375em) {
   .m-row [class*="m-span"] {
     float: left;
     margin-left: 2%; }
-  .m-row [class*="m-span"]:first-child {
-    margin-left: 0; }
+    .m-row [class*="m-span"]:first-child {
+      margin-left: 0; }
   .m-row .m-span1 {
     width: 15%; }
   .m-row .m-span2 {
@@ -1419,25 +1384,25 @@ h1:hover > a, h2:hover > a, h3:hover > a {
     width: 83%; }
   .m-row .m-span6 {
     width: 100%; } }
-* {
+
+*,
+*::before,
+*::after {
   box-sizing: border-box; }
 
 pre {
   max-height: 30em; }
 
+picture {
+  display: block; }
+
 img {
+  display: block;
   max-width: 100%;
   height: auto; }
 
-/* lets have some constraints shall we */
-.container-fluid {
-  width: 93%;
-  max-width: 1200px;
-  margin-left: auto;
-  margin-right: auto; }
-
-.row.row--full {
-  margin-left: 0; }
+figure {
+  margin: 0; }
 
 ul ul {
   padding-left: 1.25em;
@@ -1447,37 +1412,66 @@ ul ul {
 li {
   line-height: 1.4; }
 
+nav > a {
+  display: block;
+  margin: 5px 0; }
+
+.container-fluid {
+  width: 93%;
+  max-width: 1200px;
+  margin-left: auto;
+  margin-right: auto; }
+
+.row.row--full {
+  margin-left: 0; }
+
 .breathable-list li {
   line-height: 1.7; }
 
+.filter__label {
+  margin: 0 0 3px; }
+
+.filter__search {
+  margin: 5px 0; }
+
+.sort-options {
+  margin-top: 10px; }
+
+#be-social h2 {
+  margin-bottom: 32px; }
+
 .site-nav .site-nav__title {
   color: #ECF0F1; }
-.site-nav .site-nav__title:first-child {
-  margin-top: 0; }
+  .site-nav .site-nav__title:first-child {
+    margin-top: 0; }
+
 .site-nav .btn {
   width: 100%; }
+
 .site-nav .site-nav__tray {
-  -webkit-transition: .2s;
-          transition: .2s;
+  transition: .2s;
   overflow: hidden;
   height: 300px;
   background-color: #34495E; }
+
 .site-nav .site-nav__tray-inner {
   padding: 30px 0; }
+
 .site-nav.collapsed .site-nav__tray {
   height: 0; }
-.lt-ie8 .site-nav.collapsed .site-nav__tray {
-  display: none; }
+  .lt-ie8 .site-nav.collapsed .site-nav__tray {
+    display: none; }
+
 .site-nav .site-nav__band {
   position: relative; }
-.site-nav .site-nav__band::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 4px;
-  background: #34495E; }
+  .site-nav .site-nav__band::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 4px;
+    background: #34495E; }
 
 .site-footer {
   margin-top: 2em;
@@ -1488,34 +1482,29 @@ li {
   margin: 0;
   text-align: right; }
 
-nav > a {
-  display: block;
-  margin: 5px 0; }
+@media screen and (max-width: 47.9375em) {
+  .site-nav .btn {
+    margin-bottom: 5px; } }
 
 .demo-list .figure-wrap {
   position: relative;
   z-index: 1; }
 
-.demo-list .figure-wrap, .demo-list .figure-wrap img {
-  -webkit-transform: translateZ(0);
-          transform: translateZ(0);
-  -webkit-transition: .1s ease;
-          transition: .1s ease; }
+.demo-list .figure-wrap,
+.demo-list .figure-wrap img {
+  transform: translateZ(0);
+  transition: .1s ease; }
 
 .demo-list:hover .figure-wrap {
-  -webkit-transform: scale3d(1, 1, 1);
-          transform: scale3d(1, 1, 1); }
-.demo-list:hover .figure-wrap img {
-  -webkit-filter: grayscale(1);
-          filter: grayscale(1); }
+  transform: scale3d(1, 1, 1); }
+  .demo-list:hover .figure-wrap img {
+    filter: grayscale(1); }
 
 .demo-list:hover .figure-wrap:hover {
   z-index: 2;
-  -webkit-transform: scale3d(1.05, 1.05, 1);
-          transform: scale3d(1.05, 1.05, 1); }
-.demo-list:hover .figure-wrap:hover img {
-  -webkit-filter: none;
-          filter: none; }
+  transform: scale3d(1.05, 1.05, 1); }
+  .demo-list:hover .figure-wrap:hover img {
+    filter: none; }
 
 .demo-list .figure-wrap:nth-child(4n + 1) {
   margin-left: 0; }
@@ -1535,67 +1524,55 @@ nav > a {
 span.demo-link-container::before {
   margin-left: 5px; }
 
-.filter__label {
-  margin: 0 0 3px; }
-
-.filter__search {
-  margin: 5px 0; }
-
-.sort-options {
-  margin-top: 10px; }
-
-#be-social h2 {
-  margin-bottom: 32px; }
+@media screen and (max-width: 47.9375em) {
+  .demo-list + .demo-list {
+    margin-top: 1em; }
+  .figure-wrap:nth-child(odd) {
+    margin-left: 0; }
+  .figure-wrap:nth-child(n + 3) {
+    margin-top: 1em; } }
 
 .search-section {
   margin-top: 1em;
   margin-bottom: 1em; }
 
 input.faq-search {
+  -webkit-appearance: searchfield;
+  box-sizing: border-box;
   width: 100%;
-  -webkit-appearance: none;
-  appearance: none;
   border: 2px solid #95A5A6;
   border-radius: 4px;
   padding: 0.5em;
   font-size: 1.125em;
-  color: #95A5A6;
-  -webkit-transition: .15s;
-          transition: .15s; }
-input.faq-search::-webkit-input-placeholder {
-  color: #95A5A6;
-  -webkit-transition: .15s;
-          transition: .15s; }
-input.faq-search::-moz-input-placeholder {
   color: #95A5A6;
   transition: .15s; }
-input.faq-search:hover {
-  outline: 0;
-  color: #5D6D77;
-  border-color: #5D6D77; }
-input.faq-search:hover::-webkit-input-placeholder {
-  color: #5D6D77; }
-input.faq-search:hover::-moz-input-placeholder {
-  color: #5D6D77; }
-input.faq-search:focus {
-  outline: 0;
-  color: #27AE60;
-  border-color: #27AE60; }
-input.faq-search:focus::-webkit-input-placeholder {
-  color: #27AE60; }
-input.faq-search:focus::-moz-input-placeholder {
-  color: #27AE60; }
+  input.faq-search::placeholder {
+    color: #95A5A6;
+    transition: .15s; }
+  input.faq-search:hover {
+    outline: 0;
+    color: #5D6D77;
+    border-color: #5D6D77; }
+    input.faq-search:hover::placeholder {
+      color: #5D6D77; }
+  input.faq-search:focus {
+    outline: 0;
+    color: #27AE60;
+    border-color: #27AE60; }
+    input.faq-search:focus::placeholder {
+      color: #27AE60; }
 
 .question {
   margin: 2em 0;
   overflow: hidden;
-  -webkit-transition: .2s ease-out;
-          transition: .2s ease-out; }
-.question.collapsed {
+  transition: .2s ease-out; }
+
+.question--collapsed {
   height: 0 !important;
   margin: 0;
   border-width: 0; }
-.question.collapsed + .question {
+
+.question--collapsed + .question {
   margin-top: 0; }
 
 .question--unanswered {
@@ -1608,34 +1585,21 @@ input.faq-search:focus::-moz-input-placeholder {
 .question__answer {
   margin-bottom: 0; }
 
-@media (max-width: 47.9375em) {
-  .demo-list + .demo-list {
-    margin-top: 1em; }
-
-  .figure-wrap:nth-child(odd) {
-    margin-left: 0; }
-
-  .figure-wrap:nth-child(n + 3) {
-    margin-top: 1em; }
-
-  .site-nav .btn {
-    margin-bottom: 5px; } }
-.btn-group:before, .btn-group:after {
+.btn-group::after {
   content: " ";
-  display: table; }
-.btn-group:after {
+  display: table;
   clear: both; }
-.btn-group {
-  *zoom: 1; }
+
 .btn-group .btn {
   float: left;
   border-radius: 0; }
-.btn-group .btn:first-child {
-  border-radius: 6px 0 0 6px; }
-.btn-group .btn:last-child {
-  border-radius: 0 6px 6px 0; }
+  .btn-group .btn:first-child {
+    border-radius: 6px 0 0 6px; }
+  .btn-group .btn:last-child {
+    border-radius: 0 6px 6px 0; }
 
-.btn, button {
+.btn,
+button {
   display: inline-block;
   padding: .75em .375em;
   -webkit-appearance: none;
@@ -1644,92 +1608,105 @@ input.faq-search:focus::-moz-input-placeholder {
   border-radius: .0625em;
   border: 0;
   background-color: #34495E;
-  -webkit-transition: .2s ease-out;
-          transition: .2s ease-out; }
-.btn:hover, button:hover {
-  background-color: #4a6885;
-  text-decoration: none; }
-.btn.active, .btn:active, button.active, button:active {
-  background-color: #2C3E50;
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3); }
-.btn:active, button:active {
-  -webkit-transition: none;
-          transition: none; }
+  transition: .2s ease-out; }
+  .btn:hover,
+  button:hover {
+    background-color: #4a6885;
+    text-decoration: none; }
+  .btn.active, .btn:active,
+  button.active,
+  button:active {
+    background-color: #2C3E50;
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3); }
+  .btn:active,
+  button:active {
+    transition: none; }
 
 .btn--warning {
   background-color: #E67E22; }
-.btn--warning:hover {
-  background-color: #ea9347; }
-.btn--warning.active, .btn--warning:active {
-  background-color: #D35400; }
+  .btn--warning:hover {
+    background-color: #ea9347; }
+  .btn--warning.active, .btn--warning:active {
+    background-color: #D35400; }
 
 .btn--primary {
   background-color: #3498DB; }
-.btn--primary:hover {
-  background-color: #57aae1; }
-.btn--primary.active, .btn--primary:active {
-  background-color: #3498DB; }
+  .btn--primary:hover {
+    background-color: #57aae1; }
+  .btn--primary.active, .btn--primary:active {
+    background-color: #3498DB; }
 
 .btn--danger {
   background-color: #E74C3C; }
-.btn--danger:hover {
-  background-color: #eb6d60; }
-.btn--danger.active, .btn--danger:active {
-  background-color: #E74C3C; }
+  .btn--danger:hover {
+    background-color: #eb6d60; }
+  .btn--danger.active, .btn--danger:active {
+    background-color: #E74C3C; }
 
 .btn--go {
   background-color: #2ECC71; }
-.btn--go:hover {
-  background-color: #4cd787; }
-.btn--go.active, .btn--go:active {
-  background-color: #2ECC71; }
+  .btn--go:hover {
+    background-color: #4cd787; }
+  .btn--go.active, .btn--go:active {
+    background-color: #2ECC71; }
 
 .filter-group .btn {
   position: relative; }
-.filter-group .btn.active:before, .filter-group .btn.active:after {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 20px;
-  height: 20px;
-  margin-left: -10px;
-  margin-top: -10px;
-  opacity: 0;
-  -webkit-transition: .2s;
-          transition: .2s; }
-.filter-group .btn:before {
-  background-color: #2C3E50;
-  border-radius: 50%; }
-.filter-group .btn:after {
-  background-size: 60%;
-  background-position: center center;
-  background-repeat: no-repeat;
-  background-image: url(../img/check.svg); }
-.filter-group .btn.active:before, .filter-group .btn.active:after {
-  opacity: 1; }
+  .filter-group .btn.active:before, .filter-group .btn.active:after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 20px;
+    height: 20px;
+    margin-left: -10px;
+    margin-top: -10px;
+    opacity: 0;
+    transition: .2s; }
+  .filter-group .btn:before {
+    background-color: #2C3E50;
+    border-radius: 50%; }
+  .filter-group .btn:after {
+    background-size: 60%;
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-image: url(../img/check.svg); }
+  .filter-group .btn.active:before, .filter-group .btn.active:after {
+    opacity: 1; }
 
 @media (max-width: 47.9375em) {
-  .btn, button {
+  .btn,
+  button {
     font-size: .875em; } }
+
 @media (max-width: 30em) {
-  .btn, button {
+  .btn,
+  button {
     font-size: .75em; } }
+
 .text-center {
   text-align: center; }
 
 .ib {
   display: inline-block; }
 
+.aspect,
 .keep-ratio {
   position: relative;
   width: 100%;
   height: 0;
   overflow: hidden;
   padding-bottom: 100%; }
-.keep-ratio.four-three {
+  .aspect.four-three,
+  .keep-ratio.four-three {
+    padding-bottom: 75%; }
+
+.aspect--4x3 {
   padding-bottom: 75%; }
 
+.aspect--16x9 {
+  padding-bottom: 56.25%; }
+
 .hidden {
   display: none !important;
   visibility: hidden; }
@@ -1744,33 +1721,12 @@ input.faq-search:focus::-moz-input-placeholder {
   position: absolute;
   width: 1px; }
 
-/*
- * Clearfix: contain floats
- *
- * For modern browsers
- * 1. The space content is one way to avoid an Opera bug when the
- *    `contenteditable` attribute is included anywhere else in the document.
- *    Otherwise it causes space to appear at the top and bottom of elements
- *    that receive the `clearfix` class.
- * 2. The use of `table` rather than `block` is only necessary if using
- *    `:before` to contain the top-margins of child elements.
- */
-.clearfix:before, .clearfix:after {
+.clearfix,
+.clearfix::after {
   content: " ";
-  /* 1 */
-  display: table
-  /* 2 */ }
-
-.clearfix:after {
+  display: table;
   clear: both; }
 
-/*
- * For IE 6/7 only
- * Include this rule to trigger hasLayout and contain floats.
- */
-.clearfix {
-  *zoom: 1; }
-
 .pull-left {
   float: left; }
 
@@ -1784,12 +1740,6 @@ input.faq-search:focus::-moz-input-placeholder {
   background-color: transparent;
   border: 0; }
 
-.input-block-level {
-  display: block;
-  width: 100%;
-  min-height: 30px;
-  box-sizing: border-box; }
-
 .table-center-wrap {
   display: table;
   table-layout: fixed; }
diff --git a/gulpfile.js b/gulpfile.js
index af1e6ac..68a6b64 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -4,6 +4,7 @@ const gulp = require('gulp');
 const gutil = require('gulp-util');
 const webpack = require('webpack');
 const shell = require('gulp-shell');
+const sass = require('gulp-sass');
 
 let config = {
   watch: false,
@@ -44,9 +45,20 @@ function jekyll() {
 
 function setWatching(done) {
   config.watch = true;
+  gulp.watch('_scss/*.scss', css);
   done();
 }
 
+function css() {
+  return gulp.src([
+    './_scss/gallery.scss',
+    './_scss/shuffle-styles.scss',
+    './_scss/style.scss',
+  ])
+  .pipe(sass())
+  .pipe(gulp.dest('./css/'));
+}
+
 // function test() {
 //   return gulp.src('test/specs.js')
 //     .pipe(jasmine());
@@ -56,11 +68,12 @@ function setWatching(done) {
 gulp.task('scripts', compile);
 gulp.task('set-watching', setWatching);
 
+gulp.task(css);
 gulp.task(jekyll);
 
 gulp.task('watch', gulp.series(
   'set-watching',
-  'scripts',
+  gulp.parallel('css', 'scripts'),
   'jekyll'
 ));
 
diff --git a/js/demos/animate-in.js b/js/demos/animate-in.js
index 69988ea..9be0d51 100644
--- a/js/demos/animate-in.js
+++ b/js/demos/animate-in.js
@@ -1,99 +1,77 @@
-var DEMO = (function( $, Viewport ) {
-  'use strict';
+'use strict';
 
-  var $grid = $('#grid'),
-      $gridItems = $grid.find('.picture-item'),
-      $sizer = $grid.find('.shuffle__sizer'),
-      shuffle,
+var Shuffle = window.shuffle;
+var Viewport = window.viewport;
 
-  init = function() {
+function toArray(arrayLike) {
+  if ('from' in Array) {
+    return Array.from(arrayLike);
+  }
 
+  return Array.prototype.slice.call(arrayLike);
+}
 
-    // instantiate the plugin
-    $grid.shuffle({
-      itemSelector: '.picture-item',
-      sizer: $sizer
-    });
-
-    shuffle = $grid.data('shuffle');
-
-    addViewportItems();
-
-    setTimeout(function() {
-      listen();
-      addTransitionToItems();
-    }, 100);
-  },
-
-  addViewportItems = function() {
-    $gridItems.each(function() {
-      Viewport.add({
-        element: this,
-        threshold: 130,
-        enter: showItemsInViewport
-      });
-    });
-  },
-
-  // Only the items out of the viewport should transition. This way, the first visible ones
-  // will snap into place.
-  addTransitionToItems = function() {
-    $gridItems.find('.picture-item__inner').addClass('picture-item__inner--transition');
-  },
-
-  showItemsInViewport = function() {
-    $(this).addClass('in');
-  },
+var Demo = function () {
+  this.element = document.getElementById('grid');
+  this.gridItems = toArray(this.element.querySelectorAll('.picture-item'));
+  this.sizer = this.element.querySelector('.shuffle__sizer');
 
-  // Re layout shuffle when images load. This is only needed
-  // below 768 pixels because the .picture-item height is auto and therefore
-  // the height of the picture-item is dependent on the image
-  // I recommend using imagesloaded to determine when an image is loaded
-  // but that doesn't support IE7
-  listen = function() {
+  this.shuffle = new Shuffle(this.element, {
+    itemSelector: '.picture-item',
+    sizer: this.sizer,
+  });
 
-    var debouncedLayout = $.throttle( 300, function() {
-      $grid.shuffle('update');
-      Viewport.refresh();
-    });
-
-    var $imgs = $grid.find('img');
+  this.addViewportItems();
 
-    // Get all images inside shuffle
-    $imgs.each(function() {
-      var proxyImage;
+  setTimeout(function () {
+    this.addTransitionToItems();
+  }.bind(this), 100);
+};
 
-      // Image already loaded
-      if ( this.complete && this.naturalWidth !== undefined ) {
-        return;
-      }
+Demo.prototype.addViewportItems = function () {
+  var handler = this.showItemsInViewport;
 
-      // If none of the checks above matched, simulate loading on detached element.
-      proxyImage = new Image();
-      $( proxyImage ).on('load', function() {
-        $(this).off('load');
-        debouncedLayout();
-      });
-
-      proxyImage.src = this.src;
+  this.gridItems.forEach(function () {
+    Viewport.add({
+      element: this,
+      threshold: 130,
+      enter: handler,
     });
-
-    // Because this method doesn't seem to be perfect.
-    setTimeout(function() {
-      debouncedLayout();
-    }, 500);
-  };
-
-  return {
-    init: init,
-    getShuffle: function() {
-      return shuffle;
-    }
-  };
-}( jQuery, window.Viewport ));
-
-
-
-$(document).ready(function() {
-  DEMO.init();
+  });
+};
+
+Demo.prototype.showItemsInViewport = function () {
+  this.classList.add('in');
+};
+
+/**
+ * Only the items out of the viewport should transition. This way, the first
+ * visible ones will snap into place.
+ */
+Demo.prototype.addTransitionToItems = function () {
+  this.gridItems.forEach(function (item) {
+    item.querySelector('.picture-item__inner').classList.add('picture-item__inner--transition');
+  });
+};
+
+/**
+ * Re-layout shuffle when images load. This is only needed below 768 pixels
+ * because the .picture-item height is auto and therefore the height of the
+ * picture-item is dependent on the image. I recommend using imagesloaded by
+ * desandro to determine when all your images have loaded.
+ */
+Demo.prototype.listenForImageLoads = function () {
+  var imgs = this.element.querySelectorAll('img');
+  var handler = function () {
+    this.shuffle.update();
+    Viewport.refresh();
+  }.bind(this);
+
+  for (var i = imgs.length - 1; i >= 0; i--) {
+    imgs[i].addEventListener('load', handler, false);
+  }
+};
+
+document.addEventListener('DOMContentLoaded', function () {
+  window.demo = new Demo();
 });
diff --git a/js/demos/bootstrap3grid.js b/js/demos/bootstrap3grid.js
deleted file mode 100644
index cdef78c..0000000
--- a/js/demos/bootstrap3grid.js
+++ /dev/null
@@ -1,22 +0,0 @@
-var DEMO = (function( $ ) {
-  'use strict';
-
-  var init = function() {
-    var $grid = $('#grid'),
-        $sizer = $grid.find('.shuffle__sizer');
-
-    $grid.shuffle({
-      itemSelector: '.grid__brick',
-      sizer: $sizer
-    });
-  };
-
-  return {
-    init: init
-  };
-}( jQuery ));
-
-
-$(document).ready(function() {
-  DEMO.init();
-});
diff --git a/js/demos/padding-grid.js b/js/demos/padding-grid.js
new file mode 100644
index 0000000..34bdce5
--- /dev/null
+++ b/js/demos/padding-grid.js
@@ -0,0 +1,6 @@
+'use strict';
+
+window.demo = new window.shuffle(document.getElementById('grid'), {
+  itemSelector: '.grid__brick',
+  sizer: document.querySelector('#grid .shuffle__sizer'),
+});
diff --git a/js/evenheights.js b/js/evenheights.js
index 6ba7244..e817a19 100644
--- a/js/evenheights.js
+++ b/js/evenheights.js
@@ -60,6 +60,8 @@ window.evenHeights = (function () {
     groups.forEach(function (elements, i) {
       setAllHeights(elements, tallests[i] + 'px');
     });
+
+    return tallests;
   }
 
   return evenHeights;
diff --git a/js/faq.js b/js/faq.js
index 6e6e711..e75fe06 100644
--- a/js/faq.js
+++ b/js/faq.js
@@ -1,69 +1,59 @@
+(function () {
+  'use strict';
 
-// Requires jQuery and jQuery.debounce
+  var Questions = function () {
+    this.searchInput = document.querySelector('#search');
+    this.questions = document.querySelectorAll('.js-question');
 
-(function( $ ) {
+    if (!this.searchInput) {
+      return;
+    }
 
-  var collapsedClass = 'collapsed',
-      $searchInput = $('#search'),
-      $questions = $('.js-question'),
-      $questionInners = $questions.find('.question__inner'),
-      $questionTitles = $questions.find('.question__title'),
+    var handler = this._handleInput.bind(this);
+    this.searchInput.addEventListener('keyup', handler);
+    this.searchInput.addEventListener('change', handler);
+    window.addEventListener('resize', this.onWindowResize.bind(this));
 
-  keyup = function() {
-    // Value they've entered
-    var val = this.value.toLowerCase();
+    this.setHeights();
+  };
+
+  Questions.prototype._handleInput = function (evt) {
+    var val = evt.target.value.toLowerCase();
 
     // Filter elements based on if their string exists in the product model
-    $questions.each(function( i, el ) {
-      var $el = $( el ),
-          text = $.trim( $questionTitles.eq( i ).text() ).toLowerCase(),
-          passes = text.indexOf( val ) !== -1;
+    for (var i = 0, len = this.questions.length; i < len; i++) {
+      var el = this.questions[i];
+      var title = el.querySelector('.question__title').textContent;
+      var text = title.trim().toLowerCase();
 
-      if ( passes ) {
-        if ( $el.hasClass( collapsedClass ) ) {
-          $el.removeClass( collapsedClass );
-        }
+      if (text.indexOf(val) === -1) {
+        el.classList.add('question--collapsed');
       } else {
-        if ( !$el.hasClass( collapsedClass ) ) {
-          $el.addClass( collapsedClass );
-        }
+        el.classList.remove('question--collapsed');
       }
+    }
+  };
 
-    });
-  },
-
-  debouncedKeyup = $.debounce( 100, keyup ),
-
-  // Height cannot be transitioned from auto to zero, so it must be set.
-  setHeights = function() {
-    var heights = [];
-
-    // Remove current hegith
-    $questions.css( 'height', '' );
+  Questions.prototype.setHeights = function () {
+    var elements = [].slice.call(this.questions);
 
-    // Get new heights
-    // Inner div needed because setting a height on the elements
-    // self doesn't get the correct new height :\
-    $questionInners.each(function() {
-      heights.push( $( this ).css( 'height' ) );
+    elements.forEach(function (element) {
+      element.style.height = '';
     });
 
-    // Set new heights
-    $questions.each(function( i ) {
-      $( this ).css( 'height', heights[ i ] );
+    var heights = elements.map(function (element) {
+      return element.firstElementChild.offsetHeight;
     });
-  },
 
-  onWindowResize = function() {
-    setHeights();
+    elements.forEach(function (element, i) {
+      element.style.height = heights[i] + 'px';
+    });
   };
 
-  if ( !$searchInput.length ) {
-    return;
-  }
+  Questions.prototype.onWindowResize = function () {
+    this.setHeights();
+  };
 
-  $searchInput.on( 'keyup change', debouncedKeyup );
-  $( window ).on( 'resize', $.debounce( 250, onWindowResize ) );
-  onWindowResize();
+  new Questions();
+}());
 
-}( jQuery ));
diff --git a/js/page.js b/js/page.js
index d191830..f9445fb 100644
--- a/js/page.js
+++ b/js/page.js
@@ -1,26 +1,5 @@
 'use strict';
 
-/*
- * jQuery throttle / debounce - v1.1 - 3/7/2010
- * http://benalman.com/projects/jquery-throttle-debounce-plugin/
- *
- * Copyright (c) 2010 "Cowboy" Ben Alman
- * Dual licensed under the MIT and GPL licenses.
- * http://benalman.com/about/license/
- */
-// (function (b, c) {
-//   var $ = b.jQuery || b.Cowboy || (b.Cowboy = {}), a;$.throttle = a = function (e, f, j, i) {
-//     var h, d = 0;if (typeof f !== 'boolean') {
-//       i = j;j = f;f = c;
-//     }function g() {
-
-//       var o = this, m = +new Date() - d, n = arguments;function l() {
-//         d = +new Date();j.apply(o, n);
-//       }function k() {h = c;}if (i && !h) {l();}h && clearTimeout(h);if (i === c && m > e) {l();}else {if (f !== true) {h = setTimeout(i ? k : l, i === c ? e - m : e);}}
-//     }if ($.guid) {g.guid = j.guid = j.guid || $.guid++;}return g;
-//   };$.debounce = function (d, e, f) {return f === c ? a(d, e, false) : a(d, f, e !== false);};
-// })(this);
-
 var Modules = {};
 
 Modules.NavTray = (function () {
@@ -269,7 +248,7 @@ document.addEventListener('DOMContentLoaded', function () {
 
   // Only animate the favicon on the homepage so that
   // timeline tests aren't filled with junk
-  if (true || window.location.pathname === '/Shuffle/') {
+  if (window.location.pathname === '/Shuffle/') {
     var src = site_url + '/img/favicon-sprite.png';
     new Modules.Favicon(src, 21, 7, 3000 * 1);
   }
diff --git a/js/require-main.js b/js/require-main.js
index 6908c59..878fd14 100644
--- a/js/require-main.js
+++ b/js/require-main.js
@@ -1,51 +1,45 @@
 requirejs.config({
   baseUrl: site_url + '/js',
   paths: {
-    jquery: '//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min',
-    shuffle: '../dist/jquery.shuffle',
-    modernizr: '../dist/modernizr.custom.min'
+    shuffle: '../dist/shuffle',
   },
 
-
   // Shimming other page javascript.
   shim: {
-    evenheights: {
-      deps: ['jquery'],
-      exports: 'jQuery.fn.evenHeights'
-    },
     page: {
-      deps: ['jquery', 'evenheights'],
-      exports: 'Modules'
-    }
-  }
+      deps: ['evenheights'],
+      exports: 'Modules',
+    },
+  },
 });
 
-// A hack for Modernizr and AMD. This lets Modernizr be in the <head> and also
-// compatible with other modules.
-define('modernizr', [], window.Modernizr);
-
-
-define(function(require) {
-  // Get jQuery.
-  var $ = require('jquery');
+define(function (require) {
+  'use strict';
 
   // Get Shuffle.
   var Shuffle = require('shuffle');
 
   // Page-level JavaScript used for the demo pages.
-  var jqEvenHeights = require('evenheights');
-  var Page = require('page');
+  require('evenheights');
+  require('page');
 
   // Create a new shuffle instance.
-  var shuffle = new Shuffle($('#grid').get(0), {
+  var element = document.getElementById('grid');
+  var shuffle = new Shuffle(element, {
     itemSelector: '.js-item',
-    sizer: $('#js-sizer')
+    sizer: document.getElementById('js-sizer'),
   });
 
   // DO NOT use this for determining when images load.
   // See http://vestride.github.io/Shuffle/images/
   // Use something like imagesLoaded.
-  $('#grid img').on('load', function() {
-    shuffle.layout();
-  });
+  var imgs = this.element.querySelectorAll('img');
+
+  var handler = function () {
+    shuffle.update();
+  };
+
+  for (var i = imgs.length - 1; i >= 0; i--) {
+    imgs[i].addEventListener('load', handler, false);
+  }
 });