diff --git a/docs/_includes/changelog.html b/docs/_includes/changelog.html
index e018e03..d77b6fc 100644
--- a/docs/_includes/changelog.html
+++ b/docs/_includes/changelog.html
@@ -1,4 +1,5 @@
 <h2>Changes<a href="#changelog"></a></h2>
+<p>For more detailed changes, visit <a href="https://github.com/Vestride/Shuffle/releases">the latest releases</a> on GitHub.</p>
 <ul>
   <li><code>v5.0.0</code> x/x/17 - Change global export from <code>shuffle</code> to <code>Shuffle</code>. Remove bower support. Expect ES6 environment. Make Shuffle instances Event Emitters instead of dispatching <code>CustomEvent</code>.</li>
   <li><code>v4.2.0</code> 5/10/17 - Replace <code>webpack</code> build with <code>rollup</code>. Replace <code>jshint</code> and <code>jscs</code> with <code>eslint</code>. Add <code>filterMode</code> option.</li>
diff --git a/docs/_includes/events.html b/docs/_includes/events.html
index f054c00..6538382 100644
--- a/docs/_includes/events.html
+++ b/docs/_includes/events.html
@@ -1,5 +1,5 @@
 <h2>Events<a href="#events"></a></h2>
-<p>Shuffle is a subclass of <a href="https://www.npmjs.com/package/tiny-emitter">TinyEmitter</a>. It emits an event when a layout happens and when elements are removed. The event names are <code class="language-javascript">Shuffle.EventType.LAYOUT</code> and <code class="language-javascript">Shuffle.EventType.REMOVED</code>.</p>
+<p>Shuffle is a subclass of <a href="https://www.npmjs.com/package/tiny-emitter">TinyEmitter</a>. It emits an event when a layout happens and when elements are removed. The event names are <code>Shuffle.EventType.LAYOUT</code> and <code>Shuffle.EventType.REMOVED</code>.</p>
 
 <h3>Get notified when a layout happens</h3>
 <div class="code-block">
diff --git a/docs/_includes/install.html b/docs/_includes/install.html
index aef22c3..cf7a136 100644
--- a/docs/_includes/install.html
+++ b/docs/_includes/install.html
@@ -1,18 +1,14 @@
-<div class="row">
-  <div class="col-12@sm">
-    <h2>Install<a href="#install"></a></h2>
-  </div>
-  <div class="col-12@sm">
-    <div class="code-block">
-      <pre><code class="language">npm install shufflejs</code></pre>
-    </div>
-  </div>
-  <div class="col-6@sm">
-    <nav>
-      <a href="http://codepen.io/pen?template=qrjOpX" target="_blank" rel="noopener">Start a CodePen with a Shuffle template</a>
-      <a href="https://github.com/Vestride/Shuffle/releases">See the latest releases</a>
-    </nav>
+<div class="col-12@sm">
+  <h2>Install<a href="#install"></a></h2>
+</div>
+<div class="col-12@sm">
+  <div class="code-block">
+    <pre><code class="language-bash">npm install shufflejs</code></pre>
   </div>
 </div>
-<div class="row">
+<div class="col-6@sm">
+  <nav>
+    <a href="http://codepen.io/pen?template=qrjOpX" target="_blank" rel="noopener">Start a CodePen with a Shuffle template</a>
+    <a href="https://github.com/Vestride/Shuffle/releases">See the latest releases</a>
+  </nav>
 </div>
diff --git a/docs/_includes/sorting.html b/docs/_includes/sorting.html
index 6de94ee..437c342 100644
--- a/docs/_includes/sorting.html
+++ b/docs/_includes/sorting.html
@@ -46,12 +46,12 @@ Demo.prototype._handleSortChange = function (evt) {
 };</code>
 </div>
 
-<p>The <code class="language-javascript">options</code> object can contain three properties:</p>
+<p>The <code>options</code> object can contain three properties:</p>
 <ul>
-  <li><code class="language-javascript">reverse</code>: a boolean which will reverse the resulting order.</li>
-  <li><code class="language-javascript">by</code>: a function with an element as the parameter. Above, we&rsquo;re returning the value of the <code class="language-markup">data-date-created</code> or <code class="language-markup">data-title</code> attribute.</li>
-  <li><code class="language-javascript">randomize</code>: Make the order random.</li>
+  <li><code>reverse</code>: a boolean which will reverse the resulting order.</li>
+  <li><code>by</code>: a function with an element as the parameter. Above, we&rsquo;re returning the value of the <code>data-date-created</code> or <code>data-title</code> attribute.</li>
+  <li><code>randomize</code>: Make the order random.</li>
 </ul>
-<p>Returning <code class="language-javascript">undefined</code> from the <code class="language-javascript">by</code> function will reset the order to DOM order.</p>
+<p>Returning <code>undefined</code> from the <code>by</code> function will reset the order to DOM order.</p>
 <p>Calling sort with an empty object will reset the elements to DOM order.</p>
 <p class="demo-link-container">Check out the <a href="#demo">demo</a>.</p>
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
index a3a63ac..fa7e59d 100644
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@@ -10,7 +10,7 @@
   </div>
 </header>
 {% endif %}
-<main role="main" id="main" class="language-markup">
+<main role="main" id="main">
   {{ content }}
 </main>
 {% include scripts.html %}
diff --git a/docs/_posts/2013-05-02-compound-filters.html b/docs/_posts/2013-05-02-compound-filters.html
index 32c5243..cc66137 100644
--- a/docs/_posts/2013-05-02-compound-filters.html
+++ b/docs/_posts/2013-05-02-compound-filters.html
@@ -19,7 +19,7 @@ prism: true
 
     <div class="col-6@sm">
       <div class="filter-group filter-group--compound js-colors">
-        <h5 class="filter-group__label filter-group__label--compound">Colors</h5>
+        <p class="filter-label">Colors</p>
         <button class="btn btn--go" data-value="green"><span class="visuallyhidden">Green</span></button>
         <button class="btn btn--primary" data-value="blue"><span class="visuallyhidden">Blue</span></button>
         <button class="btn btn--danger" data-value="red"><span class="visuallyhidden">Red</span></button>
@@ -29,7 +29,7 @@ prism: true
 
     <div class="col-6@sm">
       <div class="filter-group filter-group--compound js-shapes">
-        <h5 class="filter-group__label filter-group__label--compound">Shapes</h5>
+        <p class="filter-label">Shapes</p>
         <span class="ib">
           <input type="checkbox" value="circle" id="cb-circle"> <label for="cb-circle">Circle</label>
         </span>
diff --git a/docs/_posts/2013-06-19-adding-removing.html b/docs/_posts/2013-06-19-adding-removing.html
index 48b2dab..ffc0d3b 100644
--- a/docs/_posts/2013-06-19-adding-removing.html
+++ b/docs/_posts/2013-06-19-adding-removing.html
@@ -83,9 +83,9 @@ prism: true
   <div class="row">
     <div class="col-12@sm">
 
-      <div id="sorter">
-        <p class="filter__label">Sort</p>
-        <div class="btn-group">
+      <div>
+        <p class="filter-label">Sort</p>
+        <div class="btn-group" id="sorter">
           <label class="btn active">
             <input type="radio" name="sort-value" value="dom" /> DOM Order
           </label>
@@ -100,7 +100,7 @@ prism: true
 
       <div>
         <br>
-        <p class="filter__label">Actions</p>
+        <p class="filter-label">Actions</p>
         <div class="btn-group">
           <button class="btn" id="prepend">Prepend 5 Boxes</button>
           <button class="btn" id="append">Append 5 Boxes</button>
diff --git a/docs/_posts/2013-07-16-faq.html b/docs/_posts/2013-07-16-faq.html
index cb6b052..00e476f 100644
--- a/docs/_posts/2013-07-16-faq.html
+++ b/docs/_posts/2013-07-16-faq.html
@@ -15,7 +15,7 @@ extraJS: [ "faq.js" ]
 <section class="container search-section">
   <div class="row">
     <div class="col-6@sm">
-      <input type="search" placeholder="Search..." aria-label="Search frequently asked questions" class="textfield" id="search" />
+      <input type="search" placeholder="Search..." aria-label="Search frequently asked questions" class="textfield textfield--large" id="search" />
     </div>
   </div>
 </section>
diff --git a/docs/_posts/2014-03-08-bootstrap3-grid.html b/docs/_posts/2014-03-08-bootstrap3-grid.html
index 3581096..87e2a08 100644
--- a/docs/_posts/2014-03-08-bootstrap3-grid.html
+++ b/docs/_posts/2014-03-08-bootstrap3-grid.html
@@ -49,7 +49,7 @@ extraJS: [ "demos/padding-grid.js" ]
     <div class="col-xs-12">
       <h2>Bootstrap 3 Grid</h2>
       <p>
-        On this page, I have added the minified bootstrap css file from the <a href="https://www.bootstrapcdn.com/">Bootstrap CDN</a> (which is also why some of the site-styles are being overriden).
+        On this page, I have added the minified bootstrap css file from the <a href="https://www.bootstrapcdn.com/">Bootstrap CDN</a> (which is also why some of the site-styles are being overridden).
         <br>
         The <a href="http://getbootstrap.com/css/#grid">Bootstrap 3 grid</a> system uses padding for gutters instead of margins. This page demonstrates one way to use Shuffle with these types of grids, as well as showing you don't have to use the full width of the page with Shuffle.
       </p>
diff --git a/docs/_scss/components/_buttons.scss b/docs/_scss/components/_buttons.scss
index f495311..79a08cc 100644
--- a/docs/_scss/components/_buttons.scss
+++ b/docs/_scss/components/_buttons.scss
@@ -28,14 +28,15 @@
 .btn {
   display: inline-block;
   padding: .75em .8em;
-  -webkit-appearance: none;
   text-align: center;
   border-radius: 3px;
   border: 1px solid $gray20;
   color: $gray20;
+  font-size: 1rem;
   background-color: rgba($gray20, 0);
   transition: .2s ease-out;
   cursor: pointer;
+  -webkit-appearance: none;
 
   &:hover {
     color: white;
diff --git a/docs/_scss/components/_demo-list.scss b/docs/_scss/components/_demo-list.scss
index 71ad4ff..e5d1ea8 100644
--- a/docs/_scss/components/_demo-list.scss
+++ b/docs/_scss/components/_demo-list.scss
@@ -37,6 +37,7 @@
 }
 
 .demo-list .figure-wrap figcaption {
+  height: 2em;
   margin-top: .5em;
   margin-bottom: 1em;
 }
diff --git a/docs/_scss/components/_site-nav.scss b/docs/_scss/components/_site-nav.scss
index 5b14a78..a8b5e81 100644
--- a/docs/_scss/components/_site-nav.scss
+++ b/docs/_scss/components/_site-nav.scss
@@ -1,6 +1,7 @@
 .site-nav {
   padding: 10px 0;
   border-bottom: 1px solid $gray90;
+  margin-bottom: 28px;
   background: $gray95;
 }
 
diff --git a/docs/_scss/extensions/_variables.scss b/docs/_scss/extensions/_variables.scss
index 3582d22..5f3c173 100644
--- a/docs/_scss/extensions/_variables.scss
+++ b/docs/_scss/extensions/_variables.scss
@@ -32,8 +32,8 @@ $black: #000;
 $gray10: $midnightBlue;
 $gray20: $wet-asphalt;
 $gray30: #5D6D77;
-$gray40: $concrete;
 $gray50: $asbestos;
+$gray60: $concrete;
 $gray80: $silver;
 $gray90: #E1E5E6;
 $gray95: $clouds;
diff --git a/docs/_scss/global-rules/_forms.scss b/docs/_scss/global-rules/_forms.scss
index 8c48fa8..f543678 100644
--- a/docs/_scss/global-rules/_forms.scss
+++ b/docs/_scss/global-rules/_forms.scss
@@ -2,20 +2,20 @@
   -webkit-appearance: searchfield;
   box-sizing: border-box;
   width: 100%;
-  border: 2px solid $gray40;
+  border: 2px solid $gray60;
   border-radius: 4px;
   padding: 0.5em;
-  font-size: 1.125em;
-  color: $gray40;
+  font-size: 1rem;
+  color: $gray20;
   transition: .15s;
 
   &::placeholder {
-    color: $gray40;
+    color: $gray60;
     transition: .15s;
   }
 
   &:hover {
-    outline: 0;
+    outline-width: 0;
     color: $gray30;
     border-color: $gray30;
 
@@ -25,12 +25,16 @@
   }
 
   &:focus {
-    outline: 0;
-    color: $nephritis;
-    border-color: $nephritis;
+    outline-width: 0;
+    // color: $gray20;
+    border-color: $gray20;
 
     &::placeholder {
-      color: $nephritis;
+      color: $gray20;
     }
   }
 }
+
+.textfield--large {
+  font-size: 1.125em;
+}
diff --git a/docs/_scss/global-rules/_global.scss b/docs/_scss/global-rules/_global.scss
index a444e50..a37e9dd 100644
--- a/docs/_scss/global-rules/_global.scss
+++ b/docs/_scss/global-rules/_global.scss
@@ -36,17 +36,15 @@ li {
   line-height: 1.4;
 }
 
+li + li {
+  margin-top: 4px;
+}
+
 nav > a {
   display: block;
   margin: 5px 0;
 }
 
-.breathable-list li {
-  line-height: 1.7;
-}
-
-#be-social {
-  h2 {
-    margin-bottom: 32px;
-  }
+#demos {
+  margin-top: 1em;
 }
diff --git a/docs/_scss/global-rules/_grid.scss b/docs/_scss/global-rules/_grid.scss
index 8758d1c..00dc7c7 100644
--- a/docs/_scss/global-rules/_grid.scss
+++ b/docs/_scss/global-rules/_grid.scss
@@ -81,8 +81,10 @@
 .code-block {
   position: relative;
   overflow: visible;
-  margin-left: calc(-3.5vw - #{($grid-gutter-width / 2)});
+  margin-top: 0.5em;
   margin-right: calc(-3.5vw - #{($grid-gutter-width / 2)});
+  margin-bottom: 0.5em;
+  margin-left: calc(-3.5vw - #{($grid-gutter-width / 2)});
 
   pre {
     position: relative;
@@ -92,7 +94,7 @@
     padding-bottom: 1em;
     padding-left: calc(3.5vw + #{($grid-gutter-width / 2)});
     padding-right: calc(3.5vw + #{($grid-gutter-width / 2)});
-    margin: .5em 0;
+    margin: 0;
   }
 }
 
diff --git a/docs/_scss/global-rules/_type.scss b/docs/_scss/global-rules/_type.scss
index 0a0b642..9b67aff 100644
--- a/docs/_scss/global-rules/_type.scss
+++ b/docs/_scss/global-rules/_type.scss
@@ -31,77 +31,76 @@ h6 {
   font-weight: 400;
 }
 
-
-// Headers
 h1 {
-  margin: 0.5em 0 0.25em;
+  margin: 3vw 0;
+  font-size: 10vw;
   font-weight: 300;
-  font-size: 3.5em;
   line-height: 1;
 }
 
 h2 {
   position: relative;
-  font-size: 2.5em;
-  margin-bottom: 18px;
-
-  // Bottom border BEHIND the descenders!
-  &::after {
-    content: '';
-    position: absolute;
-    bottom: 0.1em;
-    left: 0;
-    z-index: -1;
-    width: 100%;
-    height: 2px;
-    background-color: $emerald;
-    transform: translateZ(0);
-  }
+  font-size: 7vw;
+  margin: 3vw 0;
 }
 
 h3 {
-  margin: .6667em 0 0.5em;
-  font-size: 1.5em;
+  font-size: 6vw;
+  margin: 2vw 0;
 }
 
 h4 {
   font-size: 1.25em;
 }
 
-@include breakpoint(sm, true) {
+p {
+  margin: 1em 0;
+  line-height: 1.4;
+}
+
+.intro-text {
+  margin: 0.7em 0;
+  font-size: 1.125em;
+}
+
+@include breakpoint(sm) {
   h1 {
-    font-size: 8vw;
-    margin: 3vw 0;
+    margin: 0.5em 0 0.25em;
+    font-size: 3.5em;
   }
+
   h2 {
-    font-size: 6vw;
-    margin: 2vw 0;
+    margin: 0.45em 0;
+    font-size: 2.5em;
   }
-}
 
-h1 > a,
-h2 > a,
-h3 > a {
-  display: none;
-}
+  h3 {
+    margin: 0.8em 0 0.5em;
+    font-size: 1.5em;
+  }
 
-h1:hover > a,
-h2:hover > a,
-h3:hover > a {
-  position: absolute;
-  display: block;
-  top: 0;
-  left: -40px;
-  height: 50px;
-  width: 50px;
-  background: url('../img/link.svg') no-repeat;
-  overflow: hidden;
-  text-indent: -999em;
-}
+  h1 > a,
+  h2 > a,
+  h3 > a {
+    display: none;
+  }
 
-.intro-text {
-  margin: 0.7em 0;
-  font-size: 1.25em;
+  h1:hover > a,
+  h2:hover > a,
+  h3:hover > a {
+    position: absolute;
+    display: inline-block;
+    top: 0;
+    height: 50px;
+    width: 50px;
+    background: url('../img/link.svg') no-repeat;
+    overflow: hidden;
+    text-indent: -999em;
+  }
+
+  .intro-text {
+    font-size: 1.25em;
+  }
 }
 
 .unstyled {
@@ -110,19 +109,20 @@ h3:hover > a {
   margin: 0;
 }
 
-:not(pre) > code {
+code:not([class*="language"]) {
   padding: 0;
   padding-top: 0.2em;
   padding-bottom: 0.2em;
   margin: 0;
   font-size: 85%;
-  color: get-color(black);
-  background-color: rgba(0,0,0,0.04);
+  color: $gray10;
+  background-color: rgba(27,31,35,0.05);
   border-radius: 3px;
+  font-family: Menlo, Consolas, "Liberation Mono", Courier, monospace;
+}
 
-  &::before,
-  &::after {
-    letter-spacing: -0.2em;
-    content: "\00a0";
-  }
+code:not([class*="language"])::before,
+code:not([class*="language"])::after {
+  content: "\00a0";
+  letter-spacing: -.2em;
 }
diff --git a/docs/_scss/pages/_compound-filters.scss b/docs/_scss/pages/_compound-filters.scss
index a9b08ae..adf03e3 100644
--- a/docs/_scss/pages/_compound-filters.scss
+++ b/docs/_scss/pages/_compound-filters.scss
@@ -24,10 +24,6 @@
   }
 }
 
-.filter-group__label--compound {
-  margin: 0 0 5px;
-}
-
 .shape-shuffle-container {
   position: relative;
   overflow: hidden;
diff --git a/docs/_scss/pages/_homepage-filters.scss b/docs/_scss/pages/_homepage-filters.scss
index 4fe74c0..0f0da87 100644
--- a/docs/_scss/pages/_homepage-filters.scss
+++ b/docs/_scss/pages/_homepage-filters.scss
@@ -1,15 +1,12 @@
 
 // Filters
-.filter__label {
-  color: $gray80;
-  margin: 0 0 3px;
+.filter-label {
+  display: block;
+  margin-top: 0;
+  margin-bottom: 4px;
+  color: $gray60;
 }
 
-.filter__search {
-  margin: 5px 0;
-}
-
-
-.sort-options {
-  margin-top: 10px;
+.filters-group {
+  margin-bottom: 4px;
 }
diff --git a/docs/css/normalize.css b/docs/css/normalize.css
index c5785a8..e04d10a 100644
--- a/docs/css/normalize.css
+++ b/docs/css/normalize.css
@@ -1,2 +1,3 @@
 /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
-html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}
+/* search cancel styles removed */
+html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}
diff --git a/docs/css/style.css b/docs/css/style.css
index f3541aa..2c532b6 100644
--- a/docs/css/style.css
+++ b/docs/css/style.css
@@ -1 +1 @@
-@charset "UTF-8";*,:after,:before{box-sizing:border-box}main{overflow:hidden}pre.max-height{max-height:30em}img,picture{display:block}img{max-width:100%;height:auto}figure,ul ul{margin:0}ul ul{padding-left:1.25em;list-style-type:circle}li{line-height:1.4}nav>a{display:block;margin:5px 0}.breathable-list li{line-height:1.7}#be-social h2{margin-bottom:32px}body{font-family:Open Sans,Helvetica Neue,Helvetica,sans-serif;color:#5d6d77}a{text-decoration:none}a,a:visited{color:#3498db}a:hover{text-decoration:underline}a:active{color:#2ecc71}h1,h2,h3,h4,h5,h6{color:#34495e;font-weight:400}h1{margin:.5em 0 .25em;font-weight:300;font-size:3.5em;line-height:1}h2{position:relative;font-size:2.5em;margin-bottom:18px}h2:after{content:"";position:absolute;bottom:.1em;left:0;z-index:-1;width:100%;height:2px;background-color:#2ecc71;-webkit-transform:translateZ(0);transform:translateZ(0)}h3{margin:.6667em 0 .5em;font-size:1.5em}h4{font-size:1.25em}@media screen and (max-width:767px){h1{font-size:8vw;margin:3vw 0}h2{font-size:6vw;margin:2vw 0}}h1>a,h2>a,h3>a{display:none}h1:hover>a,h2:hover>a,h3:hover>a{position:absolute;display:block;top:0;left:-40px;height:50px;width:50px;background:url(../img/link.svg) no-repeat;overflow:hidden;text-indent:-999em}.intro-text{margin:.7em 0;font-size:1.25em}.unstyled{list-style-type:none;padding:0;margin:0}:not(pre)>code{padding:.2em 0;margin:0;font-size:85%;color:get-color(#000);background-color:rgba(0,0,0,.04);border-radius:3px}:not(pre)>code:after,:not(pre)>code:before{letter-spacing:-.2em;content:"\00a0"}.container{padding-left:3.5%;padding-right:3.5%}.container:after,.container:before{content:" ";display:table}.container:after{clear:both}.row{margin-left:auto;margin-right:auto}.row:after,.row:before{content:" ";display:table}.row:after{clear:both}.row .row{margin-left:-8px;margin-right:-8px}.row--centered{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.aspect{position:relative;width:100%;height:0;overflow:hidden;padding-bottom:100%}.aspect--16x9{padding-bottom:56.25%}.aspect--9x16{padding-bottom:177.77778%}.aspect--4x3{padding-bottom:75%}.aspect--3x4{padding-bottom:133.33333%}.aspect--3x2{padding-bottom:66.66667%}.aspect--3x1{padding-bottom:33.33333%}.aspect--2x3{padding-bottom:150%}.aspect--2x1{padding-bottom:50%}.aspect--1x2{padding-bottom:200%}.aspect--1x1{padding-bottom:100%}.aspect--none{height:auto;padding-bottom:0;overflow:visible}.aspect--none>.aspect__inner{position:static}.aspect>div,.aspect__inner{position:absolute;top:0;left:0;right:0;bottom:0}.col-1\@lg,.col-1\@md,.col-1\@sm,.col-1\@xs,.col-2\@lg,.col-2\@md,.col-2\@sm,.col-2\@xs,.col-3\@lg,.col-3\@md,.col-3\@sm,.col-3\@xs,.col-4\@lg,.col-4\@md,.col-4\@sm,.col-4\@xs,.col-5\@lg,.col-5\@md,.col-5\@sm,.col-5\@xs,.col-6\@lg,.col-6\@md,.col-6\@sm,.col-6\@xs,.col-7\@lg,.col-7\@md,.col-7\@sm,.col-7\@xs,.col-8\@lg,.col-8\@md,.col-8\@sm,.col-8\@xs,.col-9\@lg,.col-9\@md,.col-9\@sm,.col-9\@xs,.col-10\@lg,.col-10\@md,.col-10\@sm,.col-10\@xs,.col-11\@lg,.col-11\@md,.col-11\@sm,.col-11\@xs,.col-12\@lg,.col-12\@md,.col-12\@sm,.col-12\@xs{position:relative;box-sizing:border-box;min-height:1px;padding-left:8px;padding-right:8px}.col-1\@xs,.col-2\@xs,.col-3\@xs,.col-4\@xs,.col-5\@xs,.col-6\@xs,.col-7\@xs,.col-8\@xs,.col-9\@xs,.col-10\@xs,.col-11\@xs,.col-12\@xs{float:left}.aspect--16x9\@xs{padding-bottom:56.25%}.aspect--9x16\@xs{padding-bottom:177.77778%}.aspect--4x3\@xs{padding-bottom:75%}.aspect--3x4\@xs{padding-bottom:133.33333%}.aspect--3x2\@xs{padding-bottom:66.66667%}.aspect--3x1\@xs{padding-bottom:33.33333%}.aspect--2x3\@xs{padding-bottom:150%}.aspect--2x1\@xs{padding-bottom:50%}.aspect--1x2\@xs{padding-bottom:200%}.aspect--1x1\@xs{padding-bottom:100%}.aspect--none\@xs{height:auto;padding-bottom:0;overflow:visible}.aspect--none\@xs>.aspect__inner{position:static}.col-1\@xs{width:16.66667%}.col-2\@xs{width:33.33333%}.col-3\@xs{width:50%}.col-4\@xs{width:66.66667%}.col-5\@xs{width:83.33333%}.col-6\@xs{width:100%}.col-pull-0\@xs{right:auto}.col-pull-1\@xs{right:16.66667%}.col-pull-2\@xs{right:33.33333%}.col-pull-3\@xs{right:50%}.col-pull-4\@xs{right:66.66667%}.col-pull-5\@xs{right:83.33333%}.col-pull-6\@xs{right:100%}.col-push-0\@xs{left:auto}.col-push-1\@xs{left:16.66667%}.col-push-2\@xs{left:33.33333%}.col-push-3\@xs{left:50%}.col-push-4\@xs{left:66.66667%}.col-push-5\@xs{left:83.33333%}.col-push-6\@xs{left:100%}.col-offset-0\@xs{margin-left:0}.col-offset-1\@xs{margin-left:16.66667%}.col-offset-2\@xs{margin-left:33.33333%}.col-offset-3\@xs{margin-left:50%}.col-offset-4\@xs{margin-left:66.66667%}.col-offset-5\@xs{margin-left:83.33333%}.col-offset-6\@xs{margin-left:100%}@media screen and (min-width:768px){.col-1\@sm,.col-2\@sm,.col-3\@sm,.col-4\@sm,.col-5\@sm,.col-6\@sm,.col-7\@sm,.col-8\@sm,.col-9\@sm,.col-10\@sm,.col-11\@sm,.col-12\@sm{float:left}.aspect--16x9\@sm{padding-bottom:56.25%}.aspect--9x16\@sm{padding-bottom:177.77778%}.aspect--4x3\@sm{padding-bottom:75%}.aspect--3x4\@sm{padding-bottom:133.33333%}.aspect--3x2\@sm{padding-bottom:66.66667%}.aspect--3x1\@sm{padding-bottom:33.33333%}.aspect--2x3\@sm{padding-bottom:150%}.aspect--2x1\@sm{padding-bottom:50%}.aspect--1x2\@sm{padding-bottom:200%}.aspect--1x1\@sm{padding-bottom:100%}.aspect--none\@sm{height:auto;padding-bottom:0;overflow:visible}.aspect--none\@sm>.aspect__inner{position:static}.col-1\@sm{width:8.33333%}.col-2\@sm{width:16.66667%}.col-3\@sm{width:25%}.col-4\@sm{width:33.33333%}.col-5\@sm{width:41.66667%}.col-6\@sm{width:50%}.col-7\@sm{width:58.33333%}.col-8\@sm{width:66.66667%}.col-9\@sm{width:75%}.col-10\@sm{width:83.33333%}.col-11\@sm{width:91.66667%}.col-12\@sm{width:100%}.col-pull-0\@sm{right:auto}.col-pull-1\@sm{right:8.33333%}.col-pull-2\@sm{right:16.66667%}.col-pull-3\@sm{right:25%}.col-pull-4\@sm{right:33.33333%}.col-pull-5\@sm{right:41.66667%}.col-pull-6\@sm{right:50%}.col-pull-7\@sm{right:58.33333%}.col-pull-8\@sm{right:66.66667%}.col-pull-9\@sm{right:75%}.col-pull-10\@sm{right:83.33333%}.col-pull-11\@sm{right:91.66667%}.col-pull-12\@sm{right:100%}.col-push-0\@sm{left:auto}.col-push-1\@sm{left:8.33333%}.col-push-2\@sm{left:16.66667%}.col-push-3\@sm{left:25%}.col-push-4\@sm{left:33.33333%}.col-push-5\@sm{left:41.66667%}.col-push-6\@sm{left:50%}.col-push-7\@sm{left:58.33333%}.col-push-8\@sm{left:66.66667%}.col-push-9\@sm{left:75%}.col-push-10\@sm{left:83.33333%}.col-push-11\@sm{left:91.66667%}.col-push-12\@sm{left:100%}.col-offset-0\@sm{margin-left:0}.col-offset-1\@sm{margin-left:8.33333%}.col-offset-2\@sm{margin-left:16.66667%}.col-offset-3\@sm{margin-left:25%}.col-offset-4\@sm{margin-left:33.33333%}.col-offset-5\@sm{margin-left:41.66667%}.col-offset-6\@sm{margin-left:50%}.col-offset-7\@sm{margin-left:58.33333%}.col-offset-8\@sm{margin-left:66.66667%}.col-offset-9\@sm{margin-left:75%}.col-offset-10\@sm{margin-left:83.33333%}.col-offset-11\@sm{margin-left:91.66667%}.col-offset-12\@sm{margin-left:100%}.container{padding-left:7%;padding-right:7%}.row{max-width:1200px}}@media screen and (min-width:1024px){.col-1\@md,.col-2\@md,.col-3\@md,.col-4\@md,.col-5\@md,.col-6\@md,.col-7\@md,.col-8\@md,.col-9\@md,.col-10\@md,.col-11\@md,.col-12\@md{float:left}.aspect--16x9\@md{padding-bottom:56.25%}.aspect--9x16\@md{padding-bottom:177.77778%}.aspect--4x3\@md{padding-bottom:75%}.aspect--3x4\@md{padding-bottom:133.33333%}.aspect--3x2\@md{padding-bottom:66.66667%}.aspect--3x1\@md{padding-bottom:33.33333%}.aspect--2x3\@md{padding-bottom:150%}.aspect--2x1\@md{padding-bottom:50%}.aspect--1x2\@md{padding-bottom:200%}.aspect--1x1\@md{padding-bottom:100%}.aspect--none\@md{height:auto;padding-bottom:0;overflow:visible}.aspect--none\@md>.aspect__inner{position:static}.col-1\@md{width:8.33333%}.col-2\@md{width:16.66667%}.col-3\@md{width:25%}.col-4\@md{width:33.33333%}.col-5\@md{width:41.66667%}.col-6\@md{width:50%}.col-7\@md{width:58.33333%}.col-8\@md{width:66.66667%}.col-9\@md{width:75%}.col-10\@md{width:83.33333%}.col-11\@md{width:91.66667%}.col-12\@md{width:100%}.col-pull-0\@md{right:auto}.col-pull-1\@md{right:8.33333%}.col-pull-2\@md{right:16.66667%}.col-pull-3\@md{right:25%}.col-pull-4\@md{right:33.33333%}.col-pull-5\@md{right:41.66667%}.col-pull-6\@md{right:50%}.col-pull-7\@md{right:58.33333%}.col-pull-8\@md{right:66.66667%}.col-pull-9\@md{right:75%}.col-pull-10\@md{right:83.33333%}.col-pull-11\@md{right:91.66667%}.col-pull-12\@md{right:100%}.col-push-0\@md{left:auto}.col-push-1\@md{left:8.33333%}.col-push-2\@md{left:16.66667%}.col-push-3\@md{left:25%}.col-push-4\@md{left:33.33333%}.col-push-5\@md{left:41.66667%}.col-push-6\@md{left:50%}.col-push-7\@md{left:58.33333%}.col-push-8\@md{left:66.66667%}.col-push-9\@md{left:75%}.col-push-10\@md{left:83.33333%}.col-push-11\@md{left:91.66667%}.col-push-12\@md{left:100%}.col-offset-0\@md{margin-left:0}.col-offset-1\@md{margin-left:8.33333%}.col-offset-2\@md{margin-left:16.66667%}.col-offset-3\@md{margin-left:25%}.col-offset-4\@md{margin-left:33.33333%}.col-offset-5\@md{margin-left:41.66667%}.col-offset-6\@md{margin-left:50%}.col-offset-7\@md{margin-left:58.33333%}.col-offset-8\@md{margin-left:66.66667%}.col-offset-9\@md{margin-left:75%}.col-offset-10\@md{margin-left:83.33333%}.col-offset-11\@md{margin-left:91.66667%}.col-offset-12\@md{margin-left:100%}}.code-block{position:relative;overflow:visible;margin-left:calc(-3.5vw - 8px);margin-right:calc(-3.5vw - 8px)}.code-block pre{position:relative;z-index:1;min-height:56px;padding:1em calc(3.5vw + 8px);margin:.5em 0}@media screen and (min-width:768px){.code-block{margin-left:calc(-7vw - 8px);margin-right:calc(-7vw - 8px)}.code-block pre{position:relative;z-index:1;padding-left:calc(7vw + 8px);padding-right:calc(7vw + 8px)}}@media (min-width:1395px){.code-block{margin-left:calc(-50vw + 592px);margin-right:calc(-50vw + 592px)}.code-block pre{padding-left:calc(50vw - 592px);padding-right:calc(50vw - 592px)}}.textfield{-webkit-appearance:searchfield;box-sizing:border-box;width:100%;border:2px solid #95a5a6;border-radius:4px;padding:.5em;font-size:1.125em;color:#95a5a6;transition:.15s}.textfield::-webkit-input-placeholder{color:#95a5a6;transition:.15s}.textfield:-ms-input-placeholder{color:#95a5a6;transition:.15s}.textfield::placeholder{color:#95a5a6;transition:.15s}.textfield:hover{outline:0;color:#5d6d77;border-color:#5d6d77}.textfield:hover::-webkit-input-placeholder{color:#5d6d77}.textfield:hover:-ms-input-placeholder{color:#5d6d77}.textfield:hover::placeholder{color:#5d6d77}.textfield:focus{outline:0;color:#27ae60;border-color:#27ae60}.textfield:focus::-webkit-input-placeholder{color:#27ae60}.textfield:focus:-ms-input-placeholder{color:#27ae60}.textfield:focus::placeholder{color:#27ae60}.text-center{text-align:center}.ib{display:inline-block}@media screen and (max-width:767px){.hidden\@xs{display:none}}.hidden{display:none!important;visibility:hidden}.visuallyhidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.clearfix,.clearfix:after{content:" ";display:table;clear:both}.pull-left{float:left}.pull-right{float:right}.full-width{width:100%}.full-height{height:100%}.hide-text{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.table-center-wrap{display:table;table-layout:fixed}.table-center{display:table-cell;vertical-align:middle}.btn-group:after,.btn-group:before{content:" ";display:table}.btn-group:after{clear:both}.btn-group .btn{float:left;border-radius:0}.btn-group .btn:first-child{border-radius:3px 0 0 3px}.btn-group .btn:not(:first-child){margin-left:-1px}.btn-group .btn:last-child{border-radius:0 3px 3px 0}.btn-group label.btn input[type=radio]{position:absolute;clip:rect(0,0,0,0);pointer-events:none}.btn{display:inline-block;padding:.75em .8em;-webkit-appearance:none;text-align:center;border-radius:3px;border:1px solid #34495e;color:#34495e;background-color:rgba(52,73,94,0);transition:.2s ease-out;cursor:pointer}.btn:hover{color:#fff;text-decoration:none;background-color:#34495e}.btn:focus{outline-width:0;box-shadow:0 0 0 2px rgba(52,73,94,.4)}.btn.active,.btn:active{box-shadow:inset 0 1px 2px rgba(0,0,0,.3);color:#fff;background-color:#34495e}.btn:focus.active{box-shadow:inset 0 1px 2px rgba(0,0,0,.3),0 0 0 2px rgba(52,73,94,.4)}.btn--warning{color:#e67e22;border-color:#e67e22;background-color:rgba(230,126,34,0)}.btn--warning:hover{background-color:#e67e22}.btn--warning:focus{box-shadow:0 0 0 2px rgba(230,126,34,.4)}.btn--warning.active,.btn--warning:active{background-color:#e67e22}.btn--warning:focus.active{box-shadow:inset 0 1px 2px rgba(0,0,0,.3),0 0 0 2px rgba(230,126,34,.4)}.btn--primary{color:#3498db;border-color:#3498db;background-color:rgba(52,152,219,0)}.btn--primary:hover{background-color:#3498db}.btn--primary:focus{box-shadow:0 0 0 2px rgba(52,152,219,.4)}.btn--primary.active,.btn--primary:active{background-color:#3498db}.btn--primary:focus.active{box-shadow:inset 0 1px 2px rgba(0,0,0,.3),0 0 0 2px rgba(52,152,219,.4)}.btn--danger{color:#e74c3c;border-color:#e74c3c;background-color:rgba(231,76,60,0)}.btn--danger:hover{background-color:#e74c3c}.btn--danger:focus{box-shadow:0 0 0 2px rgba(231,76,60,.4)}.btn--danger.active,.btn--danger:active{background-color:#e74c3c}.btn--danger:focus.active{box-shadow:inset 0 1px 2px rgba(0,0,0,.3),0 0 0 2px rgba(231,76,60,.4)}.btn--go{color:#2ecc71;border-color:#2ecc71;background-color:rgba(46,204,113,0)}.btn--go:hover{background-color:#2ecc71}.btn--go:focus{box-shadow:0 0 0 2px rgba(46,204,113,.4)}.btn--go.active,.btn--go:active{background-color:#2ecc71}.btn--go:focus.active{box-shadow:inset 0 1px 2px rgba(0,0,0,.3),0 0 0 2px rgba(46,204,113,.4)}.filter-group .btn{position:relative}.filter-group .btn.active:after,.filter-group .btn.active:before{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:50%;background-repeat:no-repeat;background-image:url(../img/check.svg)}.filter-group .btn.active:after,.filter-group .btn.active:before{opacity:1}.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);transition:.1s ease}.demo-list:hover .figure-wrap{-webkit-transform:scaleX(1);transform:scaleX(1)}.demo-list:hover .figure-wrap img{-webkit-filter:grayscale(1);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}.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:#2ecc71;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}}.site-nav{padding:10px 0;border-bottom:1px solid #e1e5e6;background:#ecf0f1}.site-nav__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.site-nav__logo{font-size:20px}.site-nav__logo,.site-nav__logo:visited{color:#34495e}.site-nav__logo:hover,.site-nav__logo:visited:hover{text-decoration:none}.site-nav__links,.site-nav__logo{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.site-nav__logo svg{display:block;width:24px;height:24px;margin-right:4px}.site-nav__logo rect{transition:.18s cubic-bezier(.4,0,.2,1)}.site-nav__link{position:relative;z-index:3}.site-nav__link:not(:last-child){margin-right:8px}.site-nav__link--dropdown{position:relative}.site-nav__dropdown{position:absolute;z-index:2;top:40px;right:0;opacity:0;visibility:hidden;max-height:100vh;transition:.3s cubic-bezier(.165,.84,.44,1);background-color:#fff;-webkit-transform:translateY(10px);transform:translateY(10px)}.site-nav__dropdown:before{content:"";position:absolute;top:-8px;right:32px;display:block;border-bottom:8px solid #fff;border-left:9px solid transparent;border-right:9px solid transparent}.site-nav__dropdown li+li{margin-top:8px}.site-nav__dropdown a{display:block;color:#5d6d77}.site-nav__dropdown a:hover{background-color:#ecf0f1;text-decoration:none;color:#5d6d77}.site-nav__dropdown figure{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.site-nav__dropdown picture{-ms-flex-negative:0;flex-shrink:0;width:100px;height:75px}.site-nav__dropdown figcaption{padding-left:8px;padding-right:8px}.site-nav__link-toggle{padding:5px;border:1px solid transparent;background:none;border-radius:3px;cursor:pointer}.site-nav__link-toggle:after{content:"";display:inline-block;vertical-align:middle;margin-top:-1px;margin-left:2px;border-top:6px solid #34495e;border-left:5px solid transparent;border-right:5px solid transparent;transition:-webkit-transform .18s cubic-bezier(.4,0,.2,1);transition:transform .18s cubic-bezier(.4,0,.2,1);transition:transform .18s cubic-bezier(.4,0,.2,1),-webkit-transform .18s cubic-bezier(.4,0,.2,1)}.site-nav__link--dropdown-active .site-nav__link-toggle{border-color:#bdc3c7}.site-nav__link--dropdown-active .site-nav__link-toggle:after{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}.site-nav__link--dropdown-active .site-nav__dropdown{visibility:visible;opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}@media (-moz-touch-enabled:0),(pointer:fine){.site-nav__logo:hover rect:first-of-type{-webkit-transform:translate(20px,10px);transform:translate(20px,10px);transition-delay:0ms}.site-nav__logo:hover rect:nth-of-type(2){-webkit-transform:translateY(20px);transform:translateY(20px);transition-delay:10ms}.site-nav__logo:hover rect:nth-of-type(3){-webkit-transform:translate(-20px,6px);transform:translate(-20px,6px);transition-delay:20ms}.site-nav__logo:hover rect:nth-of-type(4){-webkit-transform:translate(10px,-10px);transform:translate(10px,-10px);transition-delay:30ms}.site-nav__logo:hover rect:nth-of-type(5){-webkit-transform:translate(-10px,10px);transform:translate(-10px,10px);transition-delay:40ms}.site-nav__logo:hover rect:nth-of-type(6){-webkit-transform:translate(-20px,-14px);transform:translate(-20px,-14px);transition-delay:50ms}.site-nav__logo:hover rect:nth-of-type(7){-webkit-transform:translateY(-20px);transform:translateY(-20px);transition-delay:60ms}.site-nav__link-toggle:hover{border-color:#34495e}}@media screen and (max-width:767px){body.site-nav--open{padding-top:51px}body.site-nav--open .site-nav{position:fixed;z-index:4;top:0;left:0;width:100%}.site-nav__dropdown{position:fixed;left:0;right:0;top:51px;width:100vw;padding:8px calc(3.5vw + 8px);overflow:auto;-webkit-overflow-scrolling:touch}}@media screen and (min-width:768px){.site-nav{padding:16px 0}.site-nav__logo{font-size:24px}.site-nav__logo svg{width:32px;height:32px}.site-nav__link:not(:last-child){margin-right:16px}.site-nav__dropdown{max-height:none!important;right:-100px;padding:16px;box-shadow:0 0 10px rgba(0,0,0,.12)}.site-nav__dropdown:before{right:132px}.site-nav__dropdown ul{-webkit-column-count:2;column-count:2;-webkit-column-gap:16px;column-gap:16px}.site-nav__dropdown li{-webkit-column-break-inside:avoid;break-inside:avoid}.site-nav__dropdown figcaption{white-space:nowrap}@supports ((-webkit-filter:drop-shadow(0 0 5px rgba(0,0,0,0.12))) or (filter:drop-shadow(0 0 5px rgba(0,0,0,0.12)))){.site-nav__dropdown{box-shadow:none;-webkit-filter:drop-shadow(0 0 5px rgba(0,0,0,.12));filter:drop-shadow(0 0 5px rgba(0,0,0,.12))}}.site-nav__link-img{width:24px;height:24px}}@media screen and (min-width:1024px){.site-nav__dropdown{right:0}.site-nav__dropdown:before{right:32px}}.site-footer{margin-top:2em;padding:1em 0;background-color:#34495e}.has-code-block .code-block pre{margin-bottom:0}.has-code-block+.site-footer{margin-top:0}.site-footer__credit{margin:0;text-align:right}.light-text-dark-box a,.light-text-dark-box p{color:#ecf0f1}.light-text-dark-box a:hover{color:#fff}.filter__label{color:#bdc3c7;margin:0 0 3px}.filter__search{margin:5px 0}.sort-options{margin-top:10px}.compound-filter-options{margin-top:20px;margin-bottom:40px}.filter-group--compound button{width:40px;height:40px;padding:0;background-color:currentColor}.filter-group--compound label{cursor:pointer}.filter-group--compound .ib+.ib{margin-left:8px}.filter-group__label--compound{margin:0 0 5px}.shape-shuffle-container{position:relative;overflow:hidden}.shape{position:relative;margin-left:0;margin-top:10px}.shape .shape__space{width:100%;height:100%;background-color:#000;border:0 solid transparent}.shape--blue .shape__space{background-color:#3498db;border-bottom-color:#3498db}.shape--red .shape__space{background-color:#e74c3c;border-bottom-color:#e74c3c}.shape--orange .shape__space{background-color:#f39c12;border-bottom-color:#f39c12}.shape--green .shape__space{background-color:#2ecc71;border-bottom-color:#2ecc71}.shape--circle .shape__space{border-radius:50%}.shape--diamond .shape__space{-webkit-transform:rotate(45deg) scale(.70711);transform:rotate(45deg) scale(.70711)}.shape--triangle .shape__space{padding-top:9px;height:0;width:0;border-width:0 66px 114px;background-color:transparent;margin:auto}@media (min-width:425px){.shape--triangle .shape__space{padding-top:12px;height:0;width:0;border-width:0 90px 156px}}@media (min-width:600px){.shape--triangle .shape__space{padding-top:17.5px;height:0;width:0;border-width:0 131px 227px}}@media (min-width:768px){.shape--triangle .shape__space{padding-top:10px;height:0;width:0;border-width:0 74px 128px}}@media (min-width:1024px){.shape--triangle .shape__space{padding-top:13.5px;height:0;width:0;border-width:0 102px 177px}}@media (min-width:1200px){.shape--triangle .shape__space{padding-top:18px;height:0;width:0;border-width:0 135px 234px}}@media (min-width:1392px){.shape--triangle .shape__space{padding-top:19px;height:0;width:0;border-width:0 142px 246px}}.search-section{margin-top:1em;margin-bottom:1em}.question{float:none;margin:2em 0;overflow:hidden;transition:.2s ease-out}.question--collapsed{height:0!important;margin:0;border-width:0}.question--collapsed+.question{margin-top:0}.question--unanswered{padding-top:1.25em;border-top:2px solid #2ecc71}.question__title{margin-top:0}.question__answer{padding-bottom:1px;margin-bottom:0}
\ No newline at end of file
+@charset "UTF-8";*,:after,:before{box-sizing:border-box}main{overflow:hidden}pre.max-height{max-height:30em}img,picture{display:block}img{max-width:100%;height:auto}figure,ul ul{margin:0}ul ul{padding-left:1.25em;list-style-type:circle}li{line-height:1.4}li+li{margin-top:4px}nav>a{display:block;margin:5px 0}#demos{margin-top:1em}body{font-family:Open Sans,Helvetica Neue,Helvetica,sans-serif;color:#5d6d77}a{text-decoration:none}a,a:visited{color:#3498db}a:hover{text-decoration:underline}a:active{color:#2ecc71}h1,h2,h3,h4,h5,h6{color:#34495e;font-weight:400}h1{font-size:10vw;font-weight:300;line-height:1}h1,h2{margin:3vw 0}h2{position:relative;font-size:7vw}h3{font-size:6vw;margin:2vw 0}h4{font-size:1.25em}p{margin:1em 0;line-height:1.4}.intro-text{margin:.7em 0;font-size:1.125em}@media screen and (min-width:768px){h1{margin:.5em 0 .25em;font-size:3.5em}h2{margin:.45em 0;font-size:2.5em}h3{margin:.8em 0 .5em;font-size:1.5em}h1>a,h2>a,h3>a{display:none}h1:hover>a,h2:hover>a,h3:hover>a{position:absolute;display:inline-block;top:0;height:50px;width:50px;background:url(../img/link.svg) no-repeat;overflow:hidden;text-indent:-999em}.intro-text{font-size:1.25em}}.unstyled{list-style-type:none;padding:0;margin:0}code:not([class*=language]){padding:.2em 0;margin:0;font-size:85%;color:#2c3e50;background-color:rgba(27,31,35,.05);border-radius:3px;font-family:Menlo,Consolas,Liberation Mono,Courier,monospace}code:not([class*=language]):after,code:not([class*=language]):before{content:"\00a0";letter-spacing:-.2em}.container{padding-left:3.5%;padding-right:3.5%}.container:after,.container:before{content:" ";display:table}.container:after{clear:both}.row{margin-left:auto;margin-right:auto}.row:after,.row:before{content:" ";display:table}.row:after{clear:both}.row .row{margin-left:-8px;margin-right:-8px}.row--centered{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.aspect{position:relative;width:100%;height:0;overflow:hidden;padding-bottom:100%}.aspect--16x9{padding-bottom:56.25%}.aspect--9x16{padding-bottom:177.77778%}.aspect--4x3{padding-bottom:75%}.aspect--3x4{padding-bottom:133.33333%}.aspect--3x2{padding-bottom:66.66667%}.aspect--3x1{padding-bottom:33.33333%}.aspect--2x3{padding-bottom:150%}.aspect--2x1{padding-bottom:50%}.aspect--1x2{padding-bottom:200%}.aspect--1x1{padding-bottom:100%}.aspect--none{height:auto;padding-bottom:0;overflow:visible}.aspect--none>.aspect__inner{position:static}.aspect>div,.aspect__inner{position:absolute;top:0;left:0;right:0;bottom:0}.col-1\@lg,.col-1\@md,.col-1\@sm,.col-1\@xs,.col-2\@lg,.col-2\@md,.col-2\@sm,.col-2\@xs,.col-3\@lg,.col-3\@md,.col-3\@sm,.col-3\@xs,.col-4\@lg,.col-4\@md,.col-4\@sm,.col-4\@xs,.col-5\@lg,.col-5\@md,.col-5\@sm,.col-5\@xs,.col-6\@lg,.col-6\@md,.col-6\@sm,.col-6\@xs,.col-7\@lg,.col-7\@md,.col-7\@sm,.col-7\@xs,.col-8\@lg,.col-8\@md,.col-8\@sm,.col-8\@xs,.col-9\@lg,.col-9\@md,.col-9\@sm,.col-9\@xs,.col-10\@lg,.col-10\@md,.col-10\@sm,.col-10\@xs,.col-11\@lg,.col-11\@md,.col-11\@sm,.col-11\@xs,.col-12\@lg,.col-12\@md,.col-12\@sm,.col-12\@xs{position:relative;box-sizing:border-box;min-height:1px;padding-left:8px;padding-right:8px}.col-1\@xs,.col-2\@xs,.col-3\@xs,.col-4\@xs,.col-5\@xs,.col-6\@xs,.col-7\@xs,.col-8\@xs,.col-9\@xs,.col-10\@xs,.col-11\@xs,.col-12\@xs{float:left}.aspect--16x9\@xs{padding-bottom:56.25%}.aspect--9x16\@xs{padding-bottom:177.77778%}.aspect--4x3\@xs{padding-bottom:75%}.aspect--3x4\@xs{padding-bottom:133.33333%}.aspect--3x2\@xs{padding-bottom:66.66667%}.aspect--3x1\@xs{padding-bottom:33.33333%}.aspect--2x3\@xs{padding-bottom:150%}.aspect--2x1\@xs{padding-bottom:50%}.aspect--1x2\@xs{padding-bottom:200%}.aspect--1x1\@xs{padding-bottom:100%}.aspect--none\@xs{height:auto;padding-bottom:0;overflow:visible}.aspect--none\@xs>.aspect__inner{position:static}.col-1\@xs{width:16.66667%}.col-2\@xs{width:33.33333%}.col-3\@xs{width:50%}.col-4\@xs{width:66.66667%}.col-5\@xs{width:83.33333%}.col-6\@xs{width:100%}.col-pull-0\@xs{right:auto}.col-pull-1\@xs{right:16.66667%}.col-pull-2\@xs{right:33.33333%}.col-pull-3\@xs{right:50%}.col-pull-4\@xs{right:66.66667%}.col-pull-5\@xs{right:83.33333%}.col-pull-6\@xs{right:100%}.col-push-0\@xs{left:auto}.col-push-1\@xs{left:16.66667%}.col-push-2\@xs{left:33.33333%}.col-push-3\@xs{left:50%}.col-push-4\@xs{left:66.66667%}.col-push-5\@xs{left:83.33333%}.col-push-6\@xs{left:100%}.col-offset-0\@xs{margin-left:0}.col-offset-1\@xs{margin-left:16.66667%}.col-offset-2\@xs{margin-left:33.33333%}.col-offset-3\@xs{margin-left:50%}.col-offset-4\@xs{margin-left:66.66667%}.col-offset-5\@xs{margin-left:83.33333%}.col-offset-6\@xs{margin-left:100%}@media screen and (min-width:768px){.col-1\@sm,.col-2\@sm,.col-3\@sm,.col-4\@sm,.col-5\@sm,.col-6\@sm,.col-7\@sm,.col-8\@sm,.col-9\@sm,.col-10\@sm,.col-11\@sm,.col-12\@sm{float:left}.aspect--16x9\@sm{padding-bottom:56.25%}.aspect--9x16\@sm{padding-bottom:177.77778%}.aspect--4x3\@sm{padding-bottom:75%}.aspect--3x4\@sm{padding-bottom:133.33333%}.aspect--3x2\@sm{padding-bottom:66.66667%}.aspect--3x1\@sm{padding-bottom:33.33333%}.aspect--2x3\@sm{padding-bottom:150%}.aspect--2x1\@sm{padding-bottom:50%}.aspect--1x2\@sm{padding-bottom:200%}.aspect--1x1\@sm{padding-bottom:100%}.aspect--none\@sm{height:auto;padding-bottom:0;overflow:visible}.aspect--none\@sm>.aspect__inner{position:static}.col-1\@sm{width:8.33333%}.col-2\@sm{width:16.66667%}.col-3\@sm{width:25%}.col-4\@sm{width:33.33333%}.col-5\@sm{width:41.66667%}.col-6\@sm{width:50%}.col-7\@sm{width:58.33333%}.col-8\@sm{width:66.66667%}.col-9\@sm{width:75%}.col-10\@sm{width:83.33333%}.col-11\@sm{width:91.66667%}.col-12\@sm{width:100%}.col-pull-0\@sm{right:auto}.col-pull-1\@sm{right:8.33333%}.col-pull-2\@sm{right:16.66667%}.col-pull-3\@sm{right:25%}.col-pull-4\@sm{right:33.33333%}.col-pull-5\@sm{right:41.66667%}.col-pull-6\@sm{right:50%}.col-pull-7\@sm{right:58.33333%}.col-pull-8\@sm{right:66.66667%}.col-pull-9\@sm{right:75%}.col-pull-10\@sm{right:83.33333%}.col-pull-11\@sm{right:91.66667%}.col-pull-12\@sm{right:100%}.col-push-0\@sm{left:auto}.col-push-1\@sm{left:8.33333%}.col-push-2\@sm{left:16.66667%}.col-push-3\@sm{left:25%}.col-push-4\@sm{left:33.33333%}.col-push-5\@sm{left:41.66667%}.col-push-6\@sm{left:50%}.col-push-7\@sm{left:58.33333%}.col-push-8\@sm{left:66.66667%}.col-push-9\@sm{left:75%}.col-push-10\@sm{left:83.33333%}.col-push-11\@sm{left:91.66667%}.col-push-12\@sm{left:100%}.col-offset-0\@sm{margin-left:0}.col-offset-1\@sm{margin-left:8.33333%}.col-offset-2\@sm{margin-left:16.66667%}.col-offset-3\@sm{margin-left:25%}.col-offset-4\@sm{margin-left:33.33333%}.col-offset-5\@sm{margin-left:41.66667%}.col-offset-6\@sm{margin-left:50%}.col-offset-7\@sm{margin-left:58.33333%}.col-offset-8\@sm{margin-left:66.66667%}.col-offset-9\@sm{margin-left:75%}.col-offset-10\@sm{margin-left:83.33333%}.col-offset-11\@sm{margin-left:91.66667%}.col-offset-12\@sm{margin-left:100%}.container{padding-left:7%;padding-right:7%}.row{max-width:1200px}}@media screen and (min-width:1024px){.col-1\@md,.col-2\@md,.col-3\@md,.col-4\@md,.col-5\@md,.col-6\@md,.col-7\@md,.col-8\@md,.col-9\@md,.col-10\@md,.col-11\@md,.col-12\@md{float:left}.aspect--16x9\@md{padding-bottom:56.25%}.aspect--9x16\@md{padding-bottom:177.77778%}.aspect--4x3\@md{padding-bottom:75%}.aspect--3x4\@md{padding-bottom:133.33333%}.aspect--3x2\@md{padding-bottom:66.66667%}.aspect--3x1\@md{padding-bottom:33.33333%}.aspect--2x3\@md{padding-bottom:150%}.aspect--2x1\@md{padding-bottom:50%}.aspect--1x2\@md{padding-bottom:200%}.aspect--1x1\@md{padding-bottom:100%}.aspect--none\@md{height:auto;padding-bottom:0;overflow:visible}.aspect--none\@md>.aspect__inner{position:static}.col-1\@md{width:8.33333%}.col-2\@md{width:16.66667%}.col-3\@md{width:25%}.col-4\@md{width:33.33333%}.col-5\@md{width:41.66667%}.col-6\@md{width:50%}.col-7\@md{width:58.33333%}.col-8\@md{width:66.66667%}.col-9\@md{width:75%}.col-10\@md{width:83.33333%}.col-11\@md{width:91.66667%}.col-12\@md{width:100%}.col-pull-0\@md{right:auto}.col-pull-1\@md{right:8.33333%}.col-pull-2\@md{right:16.66667%}.col-pull-3\@md{right:25%}.col-pull-4\@md{right:33.33333%}.col-pull-5\@md{right:41.66667%}.col-pull-6\@md{right:50%}.col-pull-7\@md{right:58.33333%}.col-pull-8\@md{right:66.66667%}.col-pull-9\@md{right:75%}.col-pull-10\@md{right:83.33333%}.col-pull-11\@md{right:91.66667%}.col-pull-12\@md{right:100%}.col-push-0\@md{left:auto}.col-push-1\@md{left:8.33333%}.col-push-2\@md{left:16.66667%}.col-push-3\@md{left:25%}.col-push-4\@md{left:33.33333%}.col-push-5\@md{left:41.66667%}.col-push-6\@md{left:50%}.col-push-7\@md{left:58.33333%}.col-push-8\@md{left:66.66667%}.col-push-9\@md{left:75%}.col-push-10\@md{left:83.33333%}.col-push-11\@md{left:91.66667%}.col-push-12\@md{left:100%}.col-offset-0\@md{margin-left:0}.col-offset-1\@md{margin-left:8.33333%}.col-offset-2\@md{margin-left:16.66667%}.col-offset-3\@md{margin-left:25%}.col-offset-4\@md{margin-left:33.33333%}.col-offset-5\@md{margin-left:41.66667%}.col-offset-6\@md{margin-left:50%}.col-offset-7\@md{margin-left:58.33333%}.col-offset-8\@md{margin-left:66.66667%}.col-offset-9\@md{margin-left:75%}.col-offset-10\@md{margin-left:83.33333%}.col-offset-11\@md{margin-left:91.66667%}.col-offset-12\@md{margin-left:100%}}.code-block{position:relative;overflow:visible;margin:.5em calc(-3.5vw - 8px)}.code-block pre{position:relative;z-index:1;min-height:56px;padding:1em calc(3.5vw + 8px);margin:0}@media screen and (min-width:768px){.code-block{margin-left:calc(-7vw - 8px);margin-right:calc(-7vw - 8px)}.code-block pre{position:relative;z-index:1;padding-left:calc(7vw + 8px);padding-right:calc(7vw + 8px)}}@media (min-width:1395px){.code-block{margin-left:calc(-50vw + 592px);margin-right:calc(-50vw + 592px)}.code-block pre{padding-left:calc(50vw - 592px);padding-right:calc(50vw - 592px)}}.textfield{-webkit-appearance:searchfield;box-sizing:border-box;width:100%;border:2px solid #95a5a6;border-radius:4px;padding:.5em;font-size:1rem;color:#34495e;transition:.15s}.textfield::-webkit-input-placeholder{color:#95a5a6;transition:.15s}.textfield:-ms-input-placeholder{color:#95a5a6;transition:.15s}.textfield::placeholder{color:#95a5a6;transition:.15s}.textfield:hover{outline-width:0;color:#5d6d77;border-color:#5d6d77}.textfield:hover::-webkit-input-placeholder{color:#5d6d77}.textfield:hover:-ms-input-placeholder{color:#5d6d77}.textfield:hover::placeholder{color:#5d6d77}.textfield:focus{outline-width:0;border-color:#34495e}.textfield:focus::-webkit-input-placeholder{color:#34495e}.textfield:focus:-ms-input-placeholder{color:#34495e}.textfield:focus::placeholder{color:#34495e}.textfield--large{font-size:1.125em}.text-center{text-align:center}.ib{display:inline-block}@media screen and (max-width:767px){.hidden\@xs{display:none}}.hidden{display:none!important;visibility:hidden}.visuallyhidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.clearfix,.clearfix:after{content:" ";display:table;clear:both}.pull-left{float:left}.pull-right{float:right}.full-width{width:100%}.full-height{height:100%}.hide-text{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.table-center-wrap{display:table;table-layout:fixed}.table-center{display:table-cell;vertical-align:middle}.btn-group:after,.btn-group:before{content:" ";display:table}.btn-group:after{clear:both}.btn-group .btn{float:left;border-radius:0}.btn-group .btn:first-child{border-radius:3px 0 0 3px}.btn-group .btn:not(:first-child){margin-left:-1px}.btn-group .btn:last-child{border-radius:0 3px 3px 0}.btn-group label.btn input[type=radio]{position:absolute;clip:rect(0,0,0,0);pointer-events:none}.btn{display:inline-block;padding:.75em .8em;text-align:center;border-radius:3px;border:1px solid #34495e;color:#34495e;font-size:1rem;background-color:rgba(52,73,94,0);transition:.2s ease-out;cursor:pointer;-webkit-appearance:none}.btn:hover{color:#fff;text-decoration:none;background-color:#34495e}.btn:focus{outline-width:0;box-shadow:0 0 0 2px rgba(52,73,94,.4)}.btn.active,.btn:active{box-shadow:inset 0 1px 2px rgba(0,0,0,.3);color:#fff;background-color:#34495e}.btn:focus.active{box-shadow:inset 0 1px 2px rgba(0,0,0,.3),0 0 0 2px rgba(52,73,94,.4)}.btn--warning{color:#e67e22;border-color:#e67e22;background-color:rgba(230,126,34,0)}.btn--warning:hover{background-color:#e67e22}.btn--warning:focus{box-shadow:0 0 0 2px rgba(230,126,34,.4)}.btn--warning.active,.btn--warning:active{background-color:#e67e22}.btn--warning:focus.active{box-shadow:inset 0 1px 2px rgba(0,0,0,.3),0 0 0 2px rgba(230,126,34,.4)}.btn--primary{color:#3498db;border-color:#3498db;background-color:rgba(52,152,219,0)}.btn--primary:hover{background-color:#3498db}.btn--primary:focus{box-shadow:0 0 0 2px rgba(52,152,219,.4)}.btn--primary.active,.btn--primary:active{background-color:#3498db}.btn--primary:focus.active{box-shadow:inset 0 1px 2px rgba(0,0,0,.3),0 0 0 2px rgba(52,152,219,.4)}.btn--danger{color:#e74c3c;border-color:#e74c3c;background-color:rgba(231,76,60,0)}.btn--danger:hover{background-color:#e74c3c}.btn--danger:focus{box-shadow:0 0 0 2px rgba(231,76,60,.4)}.btn--danger.active,.btn--danger:active{background-color:#e74c3c}.btn--danger:focus.active{box-shadow:inset 0 1px 2px rgba(0,0,0,.3),0 0 0 2px rgba(231,76,60,.4)}.btn--go{color:#2ecc71;border-color:#2ecc71;background-color:rgba(46,204,113,0)}.btn--go:hover{background-color:#2ecc71}.btn--go:focus{box-shadow:0 0 0 2px rgba(46,204,113,.4)}.btn--go.active,.btn--go:active{background-color:#2ecc71}.btn--go:focus.active{box-shadow:inset 0 1px 2px rgba(0,0,0,.3),0 0 0 2px rgba(46,204,113,.4)}.filter-group .btn{position:relative}.filter-group .btn.active:after,.filter-group .btn.active:before{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:50%;background-repeat:no-repeat;background-image:url(../img/check.svg)}.filter-group .btn.active:after,.filter-group .btn.active:before{opacity:1}.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);transition:.1s ease}.demo-list:hover .figure-wrap{-webkit-transform:scaleX(1);transform:scaleX(1)}.demo-list:hover .figure-wrap img{-webkit-filter:grayscale(1);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}.demo-list .figure-wrap:nth-child(4n+1){margin-left:0}.demo-list .figure-wrap>a{display:block}.demo-list .figure-wrap figcaption{height:2em;margin-top:.5em;margin-bottom:1em}.demo-link-container:before{content:"➜";color:#2ecc71;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}}.site-nav{padding:10px 0;border-bottom:1px solid #e1e5e6;margin-bottom:28px;background:#ecf0f1}.site-nav__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.site-nav__logo{font-size:20px}.site-nav__logo,.site-nav__logo:visited{color:#34495e}.site-nav__logo:hover,.site-nav__logo:visited:hover{text-decoration:none}.site-nav__links,.site-nav__logo{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.site-nav__logo svg{display:block;width:24px;height:24px;margin-right:4px}.site-nav__logo rect{transition:.18s cubic-bezier(.4,0,.2,1)}.site-nav__link{position:relative;z-index:3}.site-nav__link:not(:last-child){margin-right:8px}.site-nav__link--dropdown{position:relative}.site-nav__dropdown{position:absolute;z-index:2;top:40px;right:0;opacity:0;visibility:hidden;max-height:100vh;transition:.3s cubic-bezier(.165,.84,.44,1);background-color:#fff;-webkit-transform:translateY(10px);transform:translateY(10px)}.site-nav__dropdown:before{content:"";position:absolute;top:-8px;right:32px;display:block;border-bottom:8px solid #fff;border-left:9px solid transparent;border-right:9px solid transparent}.site-nav__dropdown li+li{margin-top:8px}.site-nav__dropdown a{display:block;color:#5d6d77}.site-nav__dropdown a:hover{background-color:#ecf0f1;text-decoration:none;color:#5d6d77}.site-nav__dropdown figure{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.site-nav__dropdown picture{-ms-flex-negative:0;flex-shrink:0;width:100px;height:75px}.site-nav__dropdown figcaption{padding-left:8px;padding-right:8px}.site-nav__link-toggle{padding:5px;border:1px solid transparent;background:none;border-radius:3px;cursor:pointer}.site-nav__link-toggle:after{content:"";display:inline-block;vertical-align:middle;margin-top:-1px;margin-left:2px;border-top:6px solid #34495e;border-left:5px solid transparent;border-right:5px solid transparent;transition:-webkit-transform .18s cubic-bezier(.4,0,.2,1);transition:transform .18s cubic-bezier(.4,0,.2,1);transition:transform .18s cubic-bezier(.4,0,.2,1),-webkit-transform .18s cubic-bezier(.4,0,.2,1)}.site-nav__link--dropdown-active .site-nav__link-toggle{border-color:#bdc3c7}.site-nav__link--dropdown-active .site-nav__link-toggle:after{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}.site-nav__link--dropdown-active .site-nav__dropdown{visibility:visible;opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}@media (-moz-touch-enabled:0),(pointer:fine){.site-nav__logo:hover rect:first-of-type{-webkit-transform:translate(20px,10px);transform:translate(20px,10px);transition-delay:0ms}.site-nav__logo:hover rect:nth-of-type(2){-webkit-transform:translateY(20px);transform:translateY(20px);transition-delay:10ms}.site-nav__logo:hover rect:nth-of-type(3){-webkit-transform:translate(-20px,6px);transform:translate(-20px,6px);transition-delay:20ms}.site-nav__logo:hover rect:nth-of-type(4){-webkit-transform:translate(10px,-10px);transform:translate(10px,-10px);transition-delay:30ms}.site-nav__logo:hover rect:nth-of-type(5){-webkit-transform:translate(-10px,10px);transform:translate(-10px,10px);transition-delay:40ms}.site-nav__logo:hover rect:nth-of-type(6){-webkit-transform:translate(-20px,-14px);transform:translate(-20px,-14px);transition-delay:50ms}.site-nav__logo:hover rect:nth-of-type(7){-webkit-transform:translateY(-20px);transform:translateY(-20px);transition-delay:60ms}.site-nav__link-toggle:hover{border-color:#34495e}}@media screen and (max-width:767px){body.site-nav--open{padding-top:51px}body.site-nav--open .site-nav{position:fixed;z-index:4;top:0;left:0;width:100%}.site-nav__dropdown{position:fixed;left:0;right:0;top:51px;width:100vw;padding:8px calc(3.5vw + 8px);overflow:auto;-webkit-overflow-scrolling:touch}}@media screen and (min-width:768px){.site-nav{padding:16px 0}.site-nav__logo{font-size:24px}.site-nav__logo svg{width:32px;height:32px}.site-nav__link:not(:last-child){margin-right:16px}.site-nav__dropdown{max-height:none!important;right:-100px;padding:16px;box-shadow:0 0 10px rgba(0,0,0,.12)}.site-nav__dropdown:before{right:132px}.site-nav__dropdown ul{-webkit-column-count:2;column-count:2;-webkit-column-gap:16px;column-gap:16px}.site-nav__dropdown li{-webkit-column-break-inside:avoid;break-inside:avoid}.site-nav__dropdown figcaption{white-space:nowrap}@supports ((-webkit-filter:drop-shadow(0 0 5px rgba(0,0,0,0.12))) or (filter:drop-shadow(0 0 5px rgba(0,0,0,0.12)))){.site-nav__dropdown{box-shadow:none;-webkit-filter:drop-shadow(0 0 5px rgba(0,0,0,.12));filter:drop-shadow(0 0 5px rgba(0,0,0,.12))}}.site-nav__link-img{width:24px;height:24px}}@media screen and (min-width:1024px){.site-nav__dropdown{right:0}.site-nav__dropdown:before{right:32px}}.site-footer{margin-top:2em;padding:1em 0;background-color:#34495e}.has-code-block .code-block pre{margin-bottom:0}.has-code-block+.site-footer{margin-top:0}.site-footer__credit{margin:0;text-align:right}.light-text-dark-box a,.light-text-dark-box p{color:#ecf0f1}.light-text-dark-box a:hover{color:#fff}.filter-label{display:block;margin-top:0;color:#95a5a6}.filter-label,.filters-group{margin-bottom:4px}.compound-filter-options{margin-top:20px;margin-bottom:40px}.filter-group--compound button{width:40px;height:40px;padding:0;background-color:currentColor}.filter-group--compound label{cursor:pointer}.filter-group--compound .ib+.ib{margin-left:8px}.shape-shuffle-container{position:relative;overflow:hidden}.shape{position:relative;margin-left:0;margin-top:10px}.shape .shape__space{width:100%;height:100%;background-color:#000;border:0 solid transparent}.shape--blue .shape__space{background-color:#3498db;border-bottom-color:#3498db}.shape--red .shape__space{background-color:#e74c3c;border-bottom-color:#e74c3c}.shape--orange .shape__space{background-color:#f39c12;border-bottom-color:#f39c12}.shape--green .shape__space{background-color:#2ecc71;border-bottom-color:#2ecc71}.shape--circle .shape__space{border-radius:50%}.shape--diamond .shape__space{-webkit-transform:rotate(45deg) scale(.70711);transform:rotate(45deg) scale(.70711)}.shape--triangle .shape__space{padding-top:9px;height:0;width:0;border-width:0 66px 114px;background-color:transparent;margin:auto}@media (min-width:425px){.shape--triangle .shape__space{padding-top:12px;height:0;width:0;border-width:0 90px 156px}}@media (min-width:600px){.shape--triangle .shape__space{padding-top:17.5px;height:0;width:0;border-width:0 131px 227px}}@media (min-width:768px){.shape--triangle .shape__space{padding-top:10px;height:0;width:0;border-width:0 74px 128px}}@media (min-width:1024px){.shape--triangle .shape__space{padding-top:13.5px;height:0;width:0;border-width:0 102px 177px}}@media (min-width:1200px){.shape--triangle .shape__space{padding-top:18px;height:0;width:0;border-width:0 135px 234px}}@media (min-width:1392px){.shape--triangle .shape__space{padding-top:19px;height:0;width:0;border-width:0 142px 246px}}.search-section{margin-top:1em;margin-bottom:1em}.question{float:none;margin:2em 0;overflow:hidden;transition:.2s ease-out}.question--collapsed{height:0!important;margin:0;border-width:0}.question--collapsed+.question{margin-top:0}.question--unanswered{padding-top:1.25em;border-top:2px solid #2ecc71}.question__title{margin-top:0}.question__answer{padding-bottom:1px;margin-bottom:0}
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
index 77db1ba..44b9ea7 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -23,31 +23,40 @@ prism: true
     </div>
   </div>
 
-  <div class="container filter">
+  <div class="container">
 
     <div class="row">
-      <div class="col-12@sm">
-        <input class="textfield filter__search js-shuffle-search" type="search" placeholder="Search..." />
+
+      <div class="col-4@sm col-3@md filters-group">
+        <label for="filters-search-input" class="filter-label">Search</label>
+        <input class="textfield filter__search js-shuffle-search" type="search" id="filters-search-input" />
       </div>
+
     </div>
     <div class="row">
-      <div class="col-9@sm">
-        <p class="filter__label">Filter</p>
-        <div class="filter-options btn-group">
-          <button class="btn btn--warning" data-group="wallpaper">Wallpapers</button>
-          <button class="btn btn--warning" data-group="graphics">Graphic Design</button>
-          <button class="btn btn--warning" data-group="photography">Photos</button>
-          <button class="btn btn--warning" data-group="3d">3D Renders</button>
+
+      <div class="col-12@sm col-9@md filters-group">
+        <p class="filter-label">Filter</p>
+        <div class="btn-group filter-options">
+          <button class="btn btn--primary" data-group="wallpaper">Wallpapers</button>
+          <button class="btn btn--primary" data-group="graphics">Graphic Design</button>
+          <button class="btn btn--primary" data-group="photography">Photos</button>
+          <button class="btn btn--primary" data-group="3d">3D Renders</button>
         </div>
       </div>
-      <div class="col-3@sm">
-        <div class="m-nofloat pull-right">
-          <p class="filter__label">Sort</p>
-          <select class="sort-options">
-            <option value>Default</option>
-            <option value="title">Title</option>
-            <option value="date-created">Date Created</option>
-          </select>
+
+      <div class="col-12@sm col-3@md filters-group">
+        <p class="filter-label">Sort</p>
+        <div class="btn-group sort-options">
+          <label class="btn active">
+            <input type="radio" name="sort-value" value="dom" /> Default
+          </label>
+          <label class="btn">
+            <input type="radio" name="sort-value" value="title" /> Title
+          </label>
+          <label class="btn">
+            <input type="radio" name="sort-value" value="date-created" /> Date Created
+          </label>
         </div>
       </div>
     </div>
diff --git a/docs/js/demos/adding-removing.js b/docs/js/demos/adding-removing.js
index 7ecd442..6c26752 100644
--- a/docs/js/demos/adding-removing.js
+++ b/docs/js/demos/adding-removing.js
@@ -175,8 +175,7 @@ Demo.prototype.onRandomize = function () {
 
 Demo.prototype.onSortChange = function (evt) {
   // Add and remove `active` class from buttons.
-  var wrapper = evt.currentTarget;
-  var buttons = Array.from(wrapper.querySelector('.btn-group').children);
+  var buttons = Array.from(evt.currentTarget.children);
   buttons.forEach(function (button) {
     if (button.querySelector('input').value === evt.target.value) {
       button.classList.add('active');
diff --git a/docs/js/demos/homepage.js b/docs/js/demos/homepage.js
index bc8a603..85fbfda 100644
--- a/docs/js/demos/homepage.js
+++ b/docs/js/demos/homepage.js
@@ -105,16 +105,28 @@ Demo.prototype._removeActiveClassFromChildren = function (parent) {
 };
 
 Demo.prototype.addSorting = function () {
-  var menu = document.querySelector('.sort-options');
+  var buttonGroup = document.querySelector('.sort-options');
 
-  if (!menu) {
+  if (!buttonGroup) {
     return;
   }
 
-  menu.addEventListener('change', this._handleSortChange.bind(this));
+  buttonGroup.addEventListener('change', this._handleSortChange.bind(this));
 };
 
 Demo.prototype._handleSortChange = function (evt) {
+  // Add and remove `active` class from buttons.
+  var wrapper = evt.currentTarget;
+  var buttons = Array.from(evt.currentTarget.children);
+  buttons.forEach(function (button) {
+    if (button.querySelector('input').value === evt.target.value) {
+      button.classList.add('active');
+    } else {
+      button.classList.remove('active');
+    }
+  });
+
+  // Create the sort options to give to Shuffle.
   var value = evt.target.value;
   var options = {};