From 5e590d8b81bdc56268de6eeff9ad4c0ef9f12041 Mon Sep 17 00:00:00 2001
From: Yan Zhu <picturepan2@hotmail.com>
Date: Sun, 26 Mar 2017 22:26:41 +0800
Subject: Add more icons

---
 docs/css/docs.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'docs/css/docs.css')

diff --git a/docs/css/docs.css b/docs/css/docs.css
index 45ef9c6..2502c44 100644
--- a/docs/css/docs.css
+++ b/docs/css/docs.css
@@ -216,7 +216,7 @@
     padding: 0;
   }
   .docs-sidebar {
-    background: bg-color-light;
+    background: #fff;
     height: 100%;
     left: 0;
     overflow-y: auto;
-- 
cgit v1.3.1-23-gd82d


From 2ced542b8ca284c6de5cc063cf00062f8ceaa25f Mon Sep 17 00:00:00 2001
From: Yan Zhu <picturepan2@hotmail.com>
Date: Tue, 28 Mar 2017 17:44:21 +0800
Subject: Improve icons

---
 dist/spectre-icons.css         | 149 ++++++++++++++++++++++++++++++++++++-----
 dist/spectre-icons.min.css     |   2 +-
 docs/components.html           |   2 +-
 docs/css/docs.css              |   3 +
 docs/css/docs.min.css          |   2 +-
 docs/css/spectre-icons.css     | 131 ++++++++++++++++++++++++++++++------
 docs/css/spectre-icons.min.css |   2 +-
 docs/elements.html             |  20 +++++-
 docs/experimentals.html        |   2 +-
 docs/index.html                |  13 ++--
 docs/src/docs.less             |   4 ++
 spectre-icons.less             |   1 +
 src/component-icons.less       |   8 +++
 src/icons.less                 | 136 ++++++++++++++++++++++++++++++-------
 14 files changed, 400 insertions(+), 75 deletions(-)
 create mode 100644 src/component-icons.less

(limited to 'docs/css/docs.css')

diff --git a/dist/spectre-icons.css b/dist/spectre-icons.css
index 535b06c..469f7a7 100644
--- a/dist/spectre-icons.css
+++ b/dist/spectre-icons.css
@@ -71,7 +71,7 @@
   content: "";
   height: .2rem;
   left: 60%;
-  width: .8em;
+  width: .9em;
 }
 .icon-caret::before {
   border-left: .3em solid transparent;
@@ -91,14 +91,21 @@
   height: .2rem;
   width: 100%;
 }
+.icon-apps::before {
+  background: currentColor;
+  box-shadow: -.35em -.35em, -.35em 0, -.35em .35em, 0 -.35em, 0 .35em, .35em -.35em, .35em 0, .35em .35em;
+  content: "";
+  height: .3rem;
+  width: .3rem;
+}
 .icon-more-horiz::before,
 .icon-more-vert::before {
   background: currentColor;
   border-radius: 50%;
   box-shadow: -.4em 0, .4em 0;
   content: "";
-  height: .4rem;
-  width: .4rem;
+  height: .3rem;
+  width: .3rem;
 }
 .icon-more-vert::before {
   box-shadow: 0 -.4em, 0 .4em;
@@ -197,13 +204,85 @@
   border-top-color: transparent;
   content: "";
   height: 0;
-  left: 10%;
+  left: 5%;
   top: 95%;
   -webkit-transform: translate(0, -100%);
   -ms-transform: translate(0, -100%);
   transform: translate(0, -100%);
   width: 0;
 }
+.icon-delete {
+  height: .7em;
+  margin: .15em .1em;
+  width: .8em;
+}
+.icon-delete::before {
+  border: .2rem solid currentColor;
+  border-bottom-left-radius: .2rem;
+  border-bottom-right-radius: .2rem;
+  border-top: 0;
+  content: "";
+  height: .7em;
+  top: 65%;
+  width: .75em;
+}
+.icon-delete::after {
+  background: currentColor;
+  content: "";
+  height: .2rem;
+  top: 10%;
+  width: .9em;
+}
+.icon-share {
+  border: .2rem solid currentColor;
+  border-radius: .2rem;
+  border-right: 0;
+  border-top: 0;
+}
+.icon-share::before {
+  border: .2rem solid currentColor;
+  border-bottom: 0;
+  border-right: 0;
+  content: "";
+  height: .45em;
+  left: 100%;
+  top: 36%;
+  -webkit-transform: translate(-125%, -50%) rotate(135deg);
+  -ms-transform: translate(-125%, -50%) rotate(135deg);
+  transform: translate(-125%, -50%) rotate(135deg);
+  width: .45em;
+}
+.icon-share::after {
+  border: .2rem solid currentColor;
+  border-bottom: 0;
+  border-radius: 75% 5%;
+  border-right: 0;
+  content: "";
+  height: .4em;
+  width: .6em;
+}
+.icon-flag::before {
+  background: currentColor;
+  content: "";
+  height: 1em;
+  left: 10%;
+  width: .2rem;
+}
+.icon-flag::after {
+  border: .2rem solid currentColor;
+  border-bottom-right-radius: .2rem;
+  border-left: 0;
+  border-top-right-radius: .2rem;
+  content: "";
+  height: .65em;
+  left: 55%;
+  top: 35%;
+  width: .75em;
+}
+.icon-download,
+.icon-upload {
+  border-bottom: .2rem solid currentColor;
+}
 .icon-download::before,
 .icon-upload::before {
   border: .2rem solid currentColor;
@@ -211,9 +290,9 @@
   border-right: 0;
   content: "";
   height: .5em;
-  -webkit-transform: translate(-50%, -50%) rotate(-135deg);
-  -ms-transform: translate(-50%, -50%) rotate(-135deg);
-  transform: translate(-50%, -50%) rotate(-135deg);
+  -webkit-transform: translate(-50%, -60%) rotate(-135deg);
+  -ms-transform: translate(-50%, -60%) rotate(-135deg);
+  transform: translate(-50%, -60%) rotate(-135deg);
   width: .5em;
 }
 .icon-download::after,
@@ -224,19 +303,38 @@
   top: 40%;
   width: .2rem;
 }
-.icon-download {
-  border-bottom: .2rem solid currentColor;
-}
-.icon-upload {
-  border-top: .2rem solid currentColor;
-}
 .icon-upload::before {
-  -webkit-transform: translate(-50%, -50%) rotate(45deg);
-  -ms-transform: translate(-50%, -50%) rotate(45deg);
-  transform: translate(-50%, -50%) rotate(45deg);
+  -webkit-transform: translate(-50%, -60%) rotate(45deg);
+  -ms-transform: translate(-50%, -60%) rotate(45deg);
+  transform: translate(-50%, -60%) rotate(45deg);
 }
 .icon-upload::after {
-  top: 60%;
+  top: 50%;
+}
+.icon-time {
+  border: .2rem solid currentColor;
+  border-radius: 50%;
+}
+.icon-time::before {
+  background: currentColor;
+  content: "";
+  height: .4em;
+  -webkit-transform: translate(-50%, -75%);
+  -ms-transform: translate(-50%, -75%);
+  transform: translate(-50%, -75%);
+  width: .2rem;
+}
+.icon-time::after {
+  background: currentColor;
+  content: "";
+  height: .3em;
+  -webkit-transform: translate(-50%, -75%) rotate(90deg);
+  -ms-transform: translate(-50%, -75%) rotate(90deg);
+  transform: translate(-50%, -75%) rotate(90deg);
+  -webkit-transform-origin: 50% 90%;
+  -ms-transform-origin: 50% 90%;
+  transform-origin: 50% 90%;
+  width: .2rem;
 }
 .icon-mail::before {
   border: .2rem solid currentColor;
@@ -272,6 +370,23 @@
   top: 75%;
   width: .9em;
 }
+.icon-file::before {
+  border: .2rem solid currentColor;
+  border-radius: .2rem .4em .2rem .2rem;
+  content: "";
+  height: 1em;
+  width: .9em;
+}
+.icon-file::after {
+  border: .2em solid currentColor;
+  border-right-color: transparent;
+  border-top-color: transparent;
+  content: "";
+  height: 0;
+  left: .8em;
+  top: .2em;
+  width: 0;
+}
 .icon-link::before,
 .icon-link::after {
   border: .2rem solid currentColor;
diff --git a/dist/spectre-icons.min.css b/dist/spectre-icons.min.css
index ad7b3d3..6aa12b5 100644
--- a/dist/spectre-icons.min.css
+++ b/dist/spectre-icons.min.css
@@ -1 +1 @@
-/*! Spectre.css Icons | MIT License | github.com/picturepan2/spectre */.icon{box-sizing:border-box;display:inline-block;font-size:inherit;height:1em;position:relative;text-indent:-999rem;vertical-align:middle;width:1em}.icon::after,.icon::before{display:block;left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.icon-arrow-down::before,.icon-arrow-left::before,.icon-arrow-right::before,.icon-arrow-up::before,.icon-back::before,.icon-downward::before,.icon-forward::before,.icon-upward::before{border:.2rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.65em;-webkit-transform:translate(-25%,-50%) rotate(-45deg);-ms-transform:translate(-25%,-50%) rotate(-45deg);transform:translate(-25%,-50%) rotate(-45deg);width:.65em}.icon-arrow-down,.icon-downward{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.icon-arrow-right,.icon-forward{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.icon-arrow-up,.icon-upward{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.icon-back::before,.icon-downward::before,.icon-forward::before,.icon-upward::before{-webkit-transform:translate(-50%,-50%) rotate(-45deg);-ms-transform:translate(-50%,-50%) rotate(-45deg);transform:translate(-50%,-50%) rotate(-45deg)}.icon-back::after,.icon-downward::after,.icon-forward::after,.icon-upward::after{background:currentColor;content:"";height:.2rem;left:60%;width:.8em}.icon-caret::before{border-left:.3em solid transparent;border-right:.3em solid transparent;border-top:.3em solid currentColor;content:"";height:0;-webkit-transform:translate(-50%,-25%);-ms-transform:translate(-50%,-25%);transform:translate(-50%,-25%);width:0}.icon-menu::before{background:currentColor;box-shadow:0 -.35em,0 .35em;content:"";height:.2rem;width:100%}.icon-more-horiz::before,.icon-more-vert::before{background:currentColor;border-radius:50%;box-shadow:-.4em 0,.4em 0;content:"";height:.4rem;width:.4rem}.icon-more-vert::before{box-shadow:0 -.4em,0 .4em}.icon-cross::before,.icon-minus::before,.icon-plus::before{background:currentColor;content:"";height:.2rem;width:90%}.icon-cross::after,.icon-plus::after{background:currentColor;content:"";height:90%;width:.2rem}.icon-cross::before{width:100%}.icon-cross::after{height:100%}.icon-cross::after,.icon-cross::before{-webkit-transform:translate(-50%,-50%) rotate(45deg);-ms-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg)}.icon-check::before{border:.2rem solid currentColor;border-right:0;border-top:0;content:"";height:.5em;-webkit-transform:translate(-50%,-75%) rotate(-45deg);-ms-transform:translate(-50%,-75%) rotate(-45deg);transform:translate(-50%,-75%) rotate(-45deg);width:.9em}.icon-refresh::before{border:.2rem solid currentColor;border-radius:50%;border-right-color:transparent;content:"";height:.9em;width:.9em}.icon-refresh::after{border:.2em solid currentColor;border-left-color:transparent;border-top-color:transparent;content:"";height:0;left:75%;top:25%;width:0}.icon-search::before{border:.2rem solid currentColor;border-radius:50%;content:"";height:.75em;left:5%;top:5%;-webkit-transform:translate(0,0) rotate(45deg);-ms-transform:translate(0,0) rotate(45deg);transform:translate(0,0) rotate(45deg);width:.75em}.icon-search::after{background:currentColor;content:"";height:.2rem;left:80%;top:80%;-webkit-transform:translate(-50%,-50%) rotate(45deg);-ms-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg);width:.4em}.icon-edit::before{border:.2rem solid currentColor;content:"";height:.4em;-webkit-transform:translate(-40%,-60%) rotate(-45deg);-ms-transform:translate(-40%,-60%) rotate(-45deg);transform:translate(-40%,-60%) rotate(-45deg);width:.85em}.icon-edit::after{border:.15em solid currentColor;border-right-color:transparent;border-top-color:transparent;content:"";height:0;left:10%;top:95%;-webkit-transform:translate(0,-100%);-ms-transform:translate(0,-100%);transform:translate(0,-100%);width:0}.icon-download::before,.icon-upload::before{border:.2rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.5em;-webkit-transform:translate(-50%,-50%) rotate(-135deg);-ms-transform:translate(-50%,-50%) rotate(-135deg);transform:translate(-50%,-50%) rotate(-135deg);width:.5em}.icon-download::after,.icon-upload::after{background:currentColor;content:"";height:.6em;top:40%;width:.2rem}.icon-download{border-bottom:.2rem solid currentColor}.icon-upload{border-top:.2rem solid currentColor}.icon-upload::before{-webkit-transform:translate(-50%,-50%) rotate(45deg);-ms-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg)}.icon-upload::after{top:60%}.icon-mail::before{border:.2rem solid currentColor;border-radius:.2rem;content:"";height:.8em;width:1em}.icon-mail::after{border:.2rem solid currentColor;border-right:0;border-top:0;content:"";height:.5em;-webkit-transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);-ms-transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);width:.5em}.icon-people::before{border:.2rem solid currentColor;border-radius:50%;content:"";height:.45em;top:25%;width:.45em}.icon-people::after{border:.2rem solid currentColor;border-radius:50% 50% 0 0;content:"";height:.4em;top:75%;width:.9em}.icon-link::after,.icon-link::before{border:.2rem solid currentColor;border-radius:5em;border-right-color:transparent;content:"";height:.5em;width:.75em}.icon-link::before{-webkit-transform:translate(-70%,-45%) rotate(-45deg);-ms-transform:translate(-70%,-45%) rotate(-45deg);transform:translate(-70%,-45%) rotate(-45deg)}.icon-link::after{-webkit-transform:translate(-30%,-55%) rotate(135deg);-ms-transform:translate(-30%,-55%) rotate(135deg);transform:translate(-30%,-55%) rotate(135deg)}.btn .icon,.menu .icon,.toast .icon{vertical-align:-10%}
\ No newline at end of file
+/*! Spectre.css Icons | MIT License | github.com/picturepan2/spectre */.icon{box-sizing:border-box;display:inline-block;font-size:inherit;height:1em;position:relative;text-indent:-999rem;vertical-align:middle;width:1em}.icon::after,.icon::before{display:block;left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.icon-arrow-down::before,.icon-arrow-left::before,.icon-arrow-right::before,.icon-arrow-up::before,.icon-back::before,.icon-downward::before,.icon-forward::before,.icon-upward::before{border:.2rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.65em;-webkit-transform:translate(-25%,-50%) rotate(-45deg);-ms-transform:translate(-25%,-50%) rotate(-45deg);transform:translate(-25%,-50%) rotate(-45deg);width:.65em}.icon-arrow-down,.icon-downward{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.icon-arrow-right,.icon-forward{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.icon-arrow-up,.icon-upward{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.icon-back::before,.icon-downward::before,.icon-forward::before,.icon-upward::before{-webkit-transform:translate(-50%,-50%) rotate(-45deg);-ms-transform:translate(-50%,-50%) rotate(-45deg);transform:translate(-50%,-50%) rotate(-45deg)}.icon-back::after,.icon-downward::after,.icon-forward::after,.icon-upward::after{background:currentColor;content:"";height:.2rem;left:60%;width:.9em}.icon-caret::before{border-left:.3em solid transparent;border-right:.3em solid transparent;border-top:.3em solid currentColor;content:"";height:0;-webkit-transform:translate(-50%,-25%);-ms-transform:translate(-50%,-25%);transform:translate(-50%,-25%);width:0}.icon-menu::before{background:currentColor;box-shadow:0 -.35em,0 .35em;content:"";height:.2rem;width:100%}.icon-apps::before{background:currentColor;box-shadow:-.35em -.35em,-.35em 0,-.35em .35em,0 -.35em,0 .35em,.35em -.35em,.35em 0,.35em .35em;content:"";height:.3rem;width:.3rem}.icon-more-horiz::before,.icon-more-vert::before{background:currentColor;border-radius:50%;box-shadow:-.4em 0,.4em 0;content:"";height:.3rem;width:.3rem}.icon-more-vert::before{box-shadow:0 -.4em,0 .4em}.icon-cross::before,.icon-minus::before,.icon-plus::before{background:currentColor;content:"";height:.2rem;width:90%}.icon-cross::after,.icon-plus::after{background:currentColor;content:"";height:90%;width:.2rem}.icon-cross::before{width:100%}.icon-cross::after{height:100%}.icon-cross::after,.icon-cross::before{-webkit-transform:translate(-50%,-50%) rotate(45deg);-ms-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg)}.icon-check::before{border:.2rem solid currentColor;border-right:0;border-top:0;content:"";height:.5em;-webkit-transform:translate(-50%,-75%) rotate(-45deg);-ms-transform:translate(-50%,-75%) rotate(-45deg);transform:translate(-50%,-75%) rotate(-45deg);width:.9em}.icon-refresh::before{border:.2rem solid currentColor;border-radius:50%;border-right-color:transparent;content:"";height:.9em;width:.9em}.icon-refresh::after{border:.2em solid currentColor;border-left-color:transparent;border-top-color:transparent;content:"";height:0;left:75%;top:25%;width:0}.icon-search::before{border:.2rem solid currentColor;border-radius:50%;content:"";height:.75em;left:5%;top:5%;-webkit-transform:translate(0,0) rotate(45deg);-ms-transform:translate(0,0) rotate(45deg);transform:translate(0,0) rotate(45deg);width:.75em}.icon-search::after{background:currentColor;content:"";height:.2rem;left:80%;top:80%;-webkit-transform:translate(-50%,-50%) rotate(45deg);-ms-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg);width:.4em}.icon-edit::before{border:.2rem solid currentColor;content:"";height:.4em;-webkit-transform:translate(-40%,-60%) rotate(-45deg);-ms-transform:translate(-40%,-60%) rotate(-45deg);transform:translate(-40%,-60%) rotate(-45deg);width:.85em}.icon-edit::after{border:.15em solid currentColor;border-right-color:transparent;border-top-color:transparent;content:"";height:0;left:5%;top:95%;-webkit-transform:translate(0,-100%);-ms-transform:translate(0,-100%);transform:translate(0,-100%);width:0}.icon-delete{height:.7em;margin:.15em .1em;width:.8em}.icon-delete::before{border:.2rem solid currentColor;border-bottom-left-radius:.2rem;border-bottom-right-radius:.2rem;border-top:0;content:"";height:.7em;top:65%;width:.75em}.icon-delete::after{background:currentColor;content:"";height:.2rem;top:10%;width:.9em}.icon-share{border:.2rem solid currentColor;border-radius:.2rem;border-right:0;border-top:0}.icon-share::before{border:.2rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.45em;left:100%;top:36%;-webkit-transform:translate(-125%,-50%) rotate(135deg);-ms-transform:translate(-125%,-50%) rotate(135deg);transform:translate(-125%,-50%) rotate(135deg);width:.45em}.icon-share::after{border:.2rem solid currentColor;border-bottom:0;border-radius:75% 5%;border-right:0;content:"";height:.4em;width:.6em}.icon-flag::before{background:currentColor;content:"";height:1em;left:10%;width:.2rem}.icon-flag::after{border:.2rem solid currentColor;border-bottom-right-radius:.2rem;border-left:0;border-top-right-radius:.2rem;content:"";height:.65em;left:55%;top:35%;width:.75em}.icon-download,.icon-upload{border-bottom:.2rem solid currentColor}.icon-download::before,.icon-upload::before{border:.2rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.5em;-webkit-transform:translate(-50%,-60%) rotate(-135deg);-ms-transform:translate(-50%,-60%) rotate(-135deg);transform:translate(-50%,-60%) rotate(-135deg);width:.5em}.icon-download::after,.icon-upload::after{background:currentColor;content:"";height:.6em;top:40%;width:.2rem}.icon-upload::before{-webkit-transform:translate(-50%,-60%) rotate(45deg);-ms-transform:translate(-50%,-60%) rotate(45deg);transform:translate(-50%,-60%) rotate(45deg)}.icon-upload::after{top:50%}.icon-time{border:.2rem solid currentColor;border-radius:50%}.icon-time::before{background:currentColor;content:"";height:.4em;-webkit-transform:translate(-50%,-75%);-ms-transform:translate(-50%,-75%);transform:translate(-50%,-75%);width:.2rem}.icon-time::after{background:currentColor;content:"";height:.3em;-webkit-transform:translate(-50%,-75%) rotate(90deg);-ms-transform:translate(-50%,-75%) rotate(90deg);transform:translate(-50%,-75%) rotate(90deg);-webkit-transform-origin:50% 90%;-ms-transform-origin:50% 90%;transform-origin:50% 90%;width:.2rem}.icon-mail::before{border:.2rem solid currentColor;border-radius:.2rem;content:"";height:.8em;width:1em}.icon-mail::after{border:.2rem solid currentColor;border-right:0;border-top:0;content:"";height:.5em;-webkit-transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);-ms-transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);width:.5em}.icon-people::before{border:.2rem solid currentColor;border-radius:50%;content:"";height:.45em;top:25%;width:.45em}.icon-people::after{border:.2rem solid currentColor;border-radius:50% 50% 0 0;content:"";height:.4em;top:75%;width:.9em}.icon-file::before{border:.2rem solid currentColor;border-radius:.2rem .4em .2rem .2rem;content:"";height:1em;width:.9em}.icon-file::after{border:.2em solid currentColor;border-right-color:transparent;border-top-color:transparent;content:"";height:0;left:.8em;top:.2em;width:0}.icon-link::after,.icon-link::before{border:.2rem solid currentColor;border-radius:5em;border-right-color:transparent;content:"";height:.5em;width:.75em}.icon-link::before{-webkit-transform:translate(-70%,-45%) rotate(-45deg);-ms-transform:translate(-70%,-45%) rotate(-45deg);transform:translate(-70%,-45%) rotate(-45deg)}.icon-link::after{-webkit-transform:translate(-30%,-55%) rotate(135deg);-ms-transform:translate(-30%,-55%) rotate(135deg);transform:translate(-30%,-55%) rotate(135deg)}.btn .icon,.menu .icon,.toast .icon{vertical-align:-10%}
\ No newline at end of file
diff --git a/docs/components.html b/docs/components.html
index 3d074b2..80e3a5b 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -1628,7 +1628,7 @@
               <div class="tile tile-centered">
                 <div class="tile-icon">
                   <div class="example-tile-icon">
-                    <i class="icon icon-file centered"></i>
+                    <i class="icon icon-mail centered"></i>
                   </div>
                 </div>
                 <div class="tile-content">
diff --git a/docs/css/docs.css b/docs/css/docs.css
index 2502c44..24af3bb 100644
--- a/docs/css/docs.css
+++ b/docs/css/docs.css
@@ -184,6 +184,9 @@
   height: 4rem;
   width: 4rem;
 }
+.docs-content .example-tile-icon .icon {
+  margin: auto;
+}
 @media screen and (min-width: 601px) {
   .section-header .navbar-section {
     padding: 0 .5rem;
diff --git a/docs/css/docs.min.css b/docs/css/docs.min.css
index 1cde555..b5effd3 100644
--- a/docs/css/docs.min.css
+++ b/docs/css/docs.min.css
@@ -1 +1 @@
-/*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */.version::after{content:"0.2.9"}.bg-gray{background:#f8f9fa;color:#667189;padding:1rem}.bg-dark{background:#50596c;color:#fff;padding:1rem}.bg-primary{background:#5764c6;color:#fff;padding:1rem}.section-header{padding:1rem .5rem;position:fixed;top:0;width:100%;z-index:200}.section-hero{position:relative;z-index:300}.grid-header .navbar{height:4rem}.grid-header .navbar-section{padding:0}.grid-header .navbar-brand{color:#50596c}.grid-header .btn-link{color:#667189;padding-left:.6rem;padding-right:.6rem}.grid-header .btn-link:active,.grid-header .btn-link:focus,.grid-header .btn-link:hover{color:#50596c;opacity:.75}.grid-hero{margin-bottom:4rem;margin-top:10rem}.grid-hero h1{color:#5b657a;font-size:3.2rem;font-weight:400}.grid-hero h2{color:#5b657a;font-size:1.8rem;font-weight:400;line-height:3rem;margin-bottom:3rem}.grid-hero h2 u{border-bottom:.2rem solid #5b657a;padding-bottom:.1rem;text-decoration:none}.grid-hero .card{background:0 0;border:0;color:#667189;padding:1rem}.grid-hero .card .card-title{color:#5764c6;font-size:1.8rem;margin-bottom:0}.grid-footer{color:#acb3c2;margin-bottom:3rem;margin-top:4rem}.grid-footer a{color:#727e96}.docs-content{color:#667189;padding-top:0}.docs-content .container{padding:1rem}.docs-content header{color:#50596c;padding-top:6rem}.docs-content .notes{margin:4rem 0}.docs-content .docs-block{border-radius:.2rem;padding:1rem .5rem}.docs-content .docs-dot{border-radius:50%;display:inline-block;height:1rem;padding:0;width:1rem}.docs-content .docs-table td,.docs-content .docs-table th{padding:1.5rem .5rem}.docs-content h1,.docs-content h2,.docs-content h3,.docs-content h4,.docs-content h5,.docs-content h6{margin-bottom:2rem;margin-top:2rem}.docs-content .docs-color{border-radius:.2rem;margin:.5rem 0;padding:1rem}.docs-content .docs-color .color-subtitle{font-size:1.2rem;opacity:.75}.docs-content .panel{height:75vh}.docs-content .panel .tile{margin:1.5rem 0}.docs-content .code{color:#667189}.docs-content .code .com{color:#acb3c2}.docs-content .code .tag{color:#5764c6}.docs-content .code .atn{color:#667189}.docs-content .code .atv{color:#e06870}.docs-content .empty .icon{font-size:4rem}.docs-content .navbar-brand .icon{font-size:3rem}.docs-content .form-autocomplete .menu{position:static}.docs-content .example-tile-icon{-webkit-align-content:space-around;align-content:space-around;-webkit-align-items:center;align-items:center;background:#5764c6;border-radius:.2rem;color:#fff;display:flex;display:-ms-flexbox;display:-webkit-flex;-ms-flex-align:center;-ms-flex-line-pack:distribute;font-size:2.4rem;height:4rem;width:4rem}@media screen and (min-width:601px){.section-header .navbar-section{padding:0 .5rem}.docs-sidebar{padding:7rem 1rem 3.5rem 1rem}.docs-sidebar .docs-nav{position:relative}@supports ((position:-webkit-sticky) or (position:sticky)){.docs-sidebar .docs-nav{position:sticky;position:-webkit-sticky;top:8rem}.docs-sidebar .docs-nav .nav-item a:focus{box-shadow:none}}}.docs-nav-clear{display:none}@media screen and (max-width:600px){.grid-hero h2{font-size:1.8rem}.grid-hero .card{padding:0}.docs-sidebar{background:#fff;height:100%;left:0;overflow-y:auto;padding:6rem 3rem;position:fixed;top:0;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:24rem;z-index:400}.docs-sidebar:target{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease}.docs-sidebar:target+.docs-nav-clear{display:block}.docs-nav-clear{background:rgba(0,0,0,.15);display:none;height:100%;left:0;position:fixed;right:0;top:0;width:100%;z-index:300}}
\ No newline at end of file
+/*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */.version::after{content:"0.2.9"}.bg-gray{background:#f8f9fa;color:#667189;padding:1rem}.bg-dark{background:#50596c;color:#fff;padding:1rem}.bg-primary{background:#5764c6;color:#fff;padding:1rem}.section-header{padding:1rem .5rem;position:fixed;top:0;width:100%;z-index:200}.section-hero{position:relative;z-index:300}.grid-header .navbar{height:4rem}.grid-header .navbar-section{padding:0}.grid-header .navbar-brand{color:#50596c}.grid-header .btn-link{color:#667189;padding-left:.6rem;padding-right:.6rem}.grid-header .btn-link:active,.grid-header .btn-link:focus,.grid-header .btn-link:hover{color:#50596c;opacity:.75}.grid-hero{margin-bottom:4rem;margin-top:10rem}.grid-hero h1{color:#5b657a;font-size:3.2rem;font-weight:400}.grid-hero h2{color:#5b657a;font-size:1.8rem;font-weight:400;line-height:3rem;margin-bottom:3rem}.grid-hero h2 u{border-bottom:.2rem solid #5b657a;padding-bottom:.1rem;text-decoration:none}.grid-hero .card{background:0 0;border:0;color:#667189;padding:1rem}.grid-hero .card .card-title{color:#5764c6;font-size:1.8rem;margin-bottom:0}.grid-footer{color:#acb3c2;margin-bottom:3rem;margin-top:4rem}.grid-footer a{color:#727e96}.docs-content{color:#667189;padding-top:0}.docs-content .container{padding:1rem}.docs-content header{color:#50596c;padding-top:6rem}.docs-content .notes{margin:4rem 0}.docs-content .docs-block{border-radius:.2rem;padding:1rem .5rem}.docs-content .docs-dot{border-radius:50%;display:inline-block;height:1rem;padding:0;width:1rem}.docs-content .docs-table td,.docs-content .docs-table th{padding:1.5rem .5rem}.docs-content h1,.docs-content h2,.docs-content h3,.docs-content h4,.docs-content h5,.docs-content h6{margin-bottom:2rem;margin-top:2rem}.docs-content .docs-color{border-radius:.2rem;margin:.5rem 0;padding:1rem}.docs-content .docs-color .color-subtitle{font-size:1.2rem;opacity:.75}.docs-content .panel{height:75vh}.docs-content .panel .tile{margin:1.5rem 0}.docs-content .code{color:#667189}.docs-content .code .com{color:#acb3c2}.docs-content .code .tag{color:#5764c6}.docs-content .code .atn{color:#667189}.docs-content .code .atv{color:#e06870}.docs-content .empty .icon{font-size:4rem}.docs-content .navbar-brand .icon{font-size:3rem}.docs-content .form-autocomplete .menu{position:static}.docs-content .example-tile-icon{-webkit-align-content:space-around;align-content:space-around;-webkit-align-items:center;align-items:center;background:#5764c6;border-radius:.2rem;color:#fff;display:flex;display:-ms-flexbox;display:-webkit-flex;-ms-flex-align:center;-ms-flex-line-pack:distribute;font-size:2.4rem;height:4rem;width:4rem}.docs-content .example-tile-icon .icon{margin:auto}@media screen and (min-width:601px){.section-header .navbar-section{padding:0 .5rem}.docs-sidebar{padding:7rem 1rem 3.5rem 1rem}.docs-sidebar .docs-nav{position:relative}@supports ((position:-webkit-sticky) or (position:sticky)){.docs-sidebar .docs-nav{position:sticky;position:-webkit-sticky;top:8rem}.docs-sidebar .docs-nav .nav-item a:focus{box-shadow:none}}}.docs-nav-clear{display:none}@media screen and (max-width:600px){.grid-hero h2{font-size:1.8rem}.grid-hero .card{padding:0}.docs-sidebar{background:#fff;height:100%;left:0;overflow-y:auto;padding:6rem 3rem;position:fixed;top:0;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:24rem;z-index:400}.docs-sidebar:target{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease}.docs-sidebar:target+.docs-nav-clear{display:block}.docs-nav-clear{background:rgba(0,0,0,.15);display:none;height:100%;left:0;position:fixed;right:0;top:0;width:100%;z-index:300}}
\ No newline at end of file
diff --git a/docs/css/spectre-icons.css b/docs/css/spectre-icons.css
index f6f8325..469f7a7 100644
--- a/docs/css/spectre-icons.css
+++ b/docs/css/spectre-icons.css
@@ -71,7 +71,7 @@
   content: "";
   height: .2rem;
   left: 60%;
-  width: .8em;
+  width: .9em;
 }
 .icon-caret::before {
   border-left: .3em solid transparent;
@@ -91,14 +91,21 @@
   height: .2rem;
   width: 100%;
 }
+.icon-apps::before {
+  background: currentColor;
+  box-shadow: -.35em -.35em, -.35em 0, -.35em .35em, 0 -.35em, 0 .35em, .35em -.35em, .35em 0, .35em .35em;
+  content: "";
+  height: .3rem;
+  width: .3rem;
+}
 .icon-more-horiz::before,
 .icon-more-vert::before {
   background: currentColor;
   border-radius: 50%;
   box-shadow: -.4em 0, .4em 0;
   content: "";
-  height: .4rem;
-  width: .4rem;
+  height: .3rem;
+  width: .3rem;
 }
 .icon-more-vert::before {
   box-shadow: 0 -.4em, 0 .4em;
@@ -197,13 +204,35 @@
   border-top-color: transparent;
   content: "";
   height: 0;
-  left: 10%;
+  left: 5%;
   top: 95%;
   -webkit-transform: translate(0, -100%);
   -ms-transform: translate(0, -100%);
   transform: translate(0, -100%);
   width: 0;
 }
+.icon-delete {
+  height: .7em;
+  margin: .15em .1em;
+  width: .8em;
+}
+.icon-delete::before {
+  border: .2rem solid currentColor;
+  border-bottom-left-radius: .2rem;
+  border-bottom-right-radius: .2rem;
+  border-top: 0;
+  content: "";
+  height: .7em;
+  top: 65%;
+  width: .75em;
+}
+.icon-delete::after {
+  background: currentColor;
+  content: "";
+  height: .2rem;
+  top: 10%;
+  width: .9em;
+}
 .icon-share {
   border: .2rem solid currentColor;
   border-radius: .2rem;
@@ -215,22 +244,44 @@
   border-bottom: 0;
   border-right: 0;
   content: "";
-  height: .4em;
+  height: .45em;
   left: 100%;
-  top: 35%;
+  top: 36%;
   -webkit-transform: translate(-125%, -50%) rotate(135deg);
   -ms-transform: translate(-125%, -50%) rotate(135deg);
   transform: translate(-125%, -50%) rotate(135deg);
-  width: .4em;
+  width: .45em;
 }
 .icon-share::after {
   border: .2rem solid currentColor;
   border-bottom: 0;
+  border-radius: 75% 5%;
   border-right: 0;
-  border-top-left-radius: 50%;
   content: "";
   height: .4em;
-  width: .5em;
+  width: .6em;
+}
+.icon-flag::before {
+  background: currentColor;
+  content: "";
+  height: 1em;
+  left: 10%;
+  width: .2rem;
+}
+.icon-flag::after {
+  border: .2rem solid currentColor;
+  border-bottom-right-radius: .2rem;
+  border-left: 0;
+  border-top-right-radius: .2rem;
+  content: "";
+  height: .65em;
+  left: 55%;
+  top: 35%;
+  width: .75em;
+}
+.icon-download,
+.icon-upload {
+  border-bottom: .2rem solid currentColor;
 }
 .icon-download::before,
 .icon-upload::before {
@@ -239,9 +290,9 @@
   border-right: 0;
   content: "";
   height: .5em;
-  -webkit-transform: translate(-50%, -50%) rotate(-135deg);
-  -ms-transform: translate(-50%, -50%) rotate(-135deg);
-  transform: translate(-50%, -50%) rotate(-135deg);
+  -webkit-transform: translate(-50%, -60%) rotate(-135deg);
+  -ms-transform: translate(-50%, -60%) rotate(-135deg);
+  transform: translate(-50%, -60%) rotate(-135deg);
   width: .5em;
 }
 .icon-download::after,
@@ -252,19 +303,38 @@
   top: 40%;
   width: .2rem;
 }
-.icon-download {
-  border-bottom: .2rem solid currentColor;
-}
-.icon-upload {
-  border-top: .2rem solid currentColor;
-}
 .icon-upload::before {
-  -webkit-transform: translate(-50%, -50%) rotate(45deg);
-  -ms-transform: translate(-50%, -50%) rotate(45deg);
-  transform: translate(-50%, -50%) rotate(45deg);
+  -webkit-transform: translate(-50%, -60%) rotate(45deg);
+  -ms-transform: translate(-50%, -60%) rotate(45deg);
+  transform: translate(-50%, -60%) rotate(45deg);
 }
 .icon-upload::after {
-  top: 60%;
+  top: 50%;
+}
+.icon-time {
+  border: .2rem solid currentColor;
+  border-radius: 50%;
+}
+.icon-time::before {
+  background: currentColor;
+  content: "";
+  height: .4em;
+  -webkit-transform: translate(-50%, -75%);
+  -ms-transform: translate(-50%, -75%);
+  transform: translate(-50%, -75%);
+  width: .2rem;
+}
+.icon-time::after {
+  background: currentColor;
+  content: "";
+  height: .3em;
+  -webkit-transform: translate(-50%, -75%) rotate(90deg);
+  -ms-transform: translate(-50%, -75%) rotate(90deg);
+  transform: translate(-50%, -75%) rotate(90deg);
+  -webkit-transform-origin: 50% 90%;
+  -ms-transform-origin: 50% 90%;
+  transform-origin: 50% 90%;
+  width: .2rem;
 }
 .icon-mail::before {
   border: .2rem solid currentColor;
@@ -300,6 +370,23 @@
   top: 75%;
   width: .9em;
 }
+.icon-file::before {
+  border: .2rem solid currentColor;
+  border-radius: .2rem .4em .2rem .2rem;
+  content: "";
+  height: 1em;
+  width: .9em;
+}
+.icon-file::after {
+  border: .2em solid currentColor;
+  border-right-color: transparent;
+  border-top-color: transparent;
+  content: "";
+  height: 0;
+  left: .8em;
+  top: .2em;
+  width: 0;
+}
 .icon-link::before,
 .icon-link::after {
   border: .2rem solid currentColor;
diff --git a/docs/css/spectre-icons.min.css b/docs/css/spectre-icons.min.css
index a9735de..6aa12b5 100644
--- a/docs/css/spectre-icons.min.css
+++ b/docs/css/spectre-icons.min.css
@@ -1 +1 @@
-/*! Spectre.css Icons | MIT License | github.com/picturepan2/spectre */.icon{box-sizing:border-box;display:inline-block;font-size:inherit;height:1em;position:relative;text-indent:-999rem;vertical-align:middle;width:1em}.icon::after,.icon::before{display:block;left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.icon-arrow-down::before,.icon-arrow-left::before,.icon-arrow-right::before,.icon-arrow-up::before,.icon-back::before,.icon-downward::before,.icon-forward::before,.icon-upward::before{border:.2rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.65em;-webkit-transform:translate(-25%,-50%) rotate(-45deg);-ms-transform:translate(-25%,-50%) rotate(-45deg);transform:translate(-25%,-50%) rotate(-45deg);width:.65em}.icon-arrow-down,.icon-downward{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.icon-arrow-right,.icon-forward{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.icon-arrow-up,.icon-upward{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.icon-back::before,.icon-downward::before,.icon-forward::before,.icon-upward::before{-webkit-transform:translate(-50%,-50%) rotate(-45deg);-ms-transform:translate(-50%,-50%) rotate(-45deg);transform:translate(-50%,-50%) rotate(-45deg)}.icon-back::after,.icon-downward::after,.icon-forward::after,.icon-upward::after{background:currentColor;content:"";height:.2rem;left:60%;width:.8em}.icon-caret::before{border-left:.3em solid transparent;border-right:.3em solid transparent;border-top:.3em solid currentColor;content:"";height:0;-webkit-transform:translate(-50%,-25%);-ms-transform:translate(-50%,-25%);transform:translate(-50%,-25%);width:0}.icon-menu::before{background:currentColor;box-shadow:0 -.35em,0 .35em;content:"";height:.2rem;width:100%}.icon-more-horiz::before,.icon-more-vert::before{background:currentColor;border-radius:50%;box-shadow:-.4em 0,.4em 0;content:"";height:.4rem;width:.4rem}.icon-more-vert::before{box-shadow:0 -.4em,0 .4em}.icon-cross::before,.icon-minus::before,.icon-plus::before{background:currentColor;content:"";height:.2rem;width:90%}.icon-cross::after,.icon-plus::after{background:currentColor;content:"";height:90%;width:.2rem}.icon-cross::before{width:100%}.icon-cross::after{height:100%}.icon-cross::after,.icon-cross::before{-webkit-transform:translate(-50%,-50%) rotate(45deg);-ms-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg)}.icon-check::before{border:.2rem solid currentColor;border-right:0;border-top:0;content:"";height:.5em;-webkit-transform:translate(-50%,-75%) rotate(-45deg);-ms-transform:translate(-50%,-75%) rotate(-45deg);transform:translate(-50%,-75%) rotate(-45deg);width:.9em}.icon-refresh::before{border:.2rem solid currentColor;border-radius:50%;border-right-color:transparent;content:"";height:.9em;width:.9em}.icon-refresh::after{border:.2em solid currentColor;border-left-color:transparent;border-top-color:transparent;content:"";height:0;left:75%;top:25%;width:0}.icon-search::before{border:.2rem solid currentColor;border-radius:50%;content:"";height:.75em;left:5%;top:5%;-webkit-transform:translate(0,0) rotate(45deg);-ms-transform:translate(0,0) rotate(45deg);transform:translate(0,0) rotate(45deg);width:.75em}.icon-search::after{background:currentColor;content:"";height:.2rem;left:80%;top:80%;-webkit-transform:translate(-50%,-50%) rotate(45deg);-ms-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg);width:.4em}.icon-edit::before{border:.2rem solid currentColor;content:"";height:.4em;-webkit-transform:translate(-40%,-60%) rotate(-45deg);-ms-transform:translate(-40%,-60%) rotate(-45deg);transform:translate(-40%,-60%) rotate(-45deg);width:.85em}.icon-edit::after{border:.15em solid currentColor;border-right-color:transparent;border-top-color:transparent;content:"";height:0;left:10%;top:95%;-webkit-transform:translate(0,-100%);-ms-transform:translate(0,-100%);transform:translate(0,-100%);width:0}.icon-share{border:.2rem solid currentColor;border-radius:.2rem;border-right:0;border-top:0}.icon-share::before{border:.2rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.4em;left:100%;top:35%;-webkit-transform:translate(-125%,-50%) rotate(135deg);-ms-transform:translate(-125%,-50%) rotate(135deg);transform:translate(-125%,-50%) rotate(135deg);width:.4em}.icon-share::after{border:.2rem solid currentColor;border-bottom:0;border-right:0;border-top-left-radius:50%;content:"";height:.4em;width:.5em}.icon-download::before,.icon-upload::before{border:.2rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.5em;-webkit-transform:translate(-50%,-50%) rotate(-135deg);-ms-transform:translate(-50%,-50%) rotate(-135deg);transform:translate(-50%,-50%) rotate(-135deg);width:.5em}.icon-download::after,.icon-upload::after{background:currentColor;content:"";height:.6em;top:40%;width:.2rem}.icon-download{border-bottom:.2rem solid currentColor}.icon-upload{border-top:.2rem solid currentColor}.icon-upload::before{-webkit-transform:translate(-50%,-50%) rotate(45deg);-ms-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg)}.icon-upload::after{top:60%}.icon-mail::before{border:.2rem solid currentColor;border-radius:.2rem;content:"";height:.8em;width:1em}.icon-mail::after{border:.2rem solid currentColor;border-right:0;border-top:0;content:"";height:.5em;-webkit-transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);-ms-transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);width:.5em}.icon-people::before{border:.2rem solid currentColor;border-radius:50%;content:"";height:.45em;top:25%;width:.45em}.icon-people::after{border:.2rem solid currentColor;border-radius:50% 50% 0 0;content:"";height:.4em;top:75%;width:.9em}.icon-link::after,.icon-link::before{border:.2rem solid currentColor;border-radius:5em;border-right-color:transparent;content:"";height:.5em;width:.75em}.icon-link::before{-webkit-transform:translate(-70%,-45%) rotate(-45deg);-ms-transform:translate(-70%,-45%) rotate(-45deg);transform:translate(-70%,-45%) rotate(-45deg)}.icon-link::after{-webkit-transform:translate(-30%,-55%) rotate(135deg);-ms-transform:translate(-30%,-55%) rotate(135deg);transform:translate(-30%,-55%) rotate(135deg)}.btn .icon,.menu .icon,.toast .icon{vertical-align:-10%}
\ No newline at end of file
+/*! Spectre.css Icons | MIT License | github.com/picturepan2/spectre */.icon{box-sizing:border-box;display:inline-block;font-size:inherit;height:1em;position:relative;text-indent:-999rem;vertical-align:middle;width:1em}.icon::after,.icon::before{display:block;left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.icon-arrow-down::before,.icon-arrow-left::before,.icon-arrow-right::before,.icon-arrow-up::before,.icon-back::before,.icon-downward::before,.icon-forward::before,.icon-upward::before{border:.2rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.65em;-webkit-transform:translate(-25%,-50%) rotate(-45deg);-ms-transform:translate(-25%,-50%) rotate(-45deg);transform:translate(-25%,-50%) rotate(-45deg);width:.65em}.icon-arrow-down,.icon-downward{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.icon-arrow-right,.icon-forward{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.icon-arrow-up,.icon-upward{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.icon-back::before,.icon-downward::before,.icon-forward::before,.icon-upward::before{-webkit-transform:translate(-50%,-50%) rotate(-45deg);-ms-transform:translate(-50%,-50%) rotate(-45deg);transform:translate(-50%,-50%) rotate(-45deg)}.icon-back::after,.icon-downward::after,.icon-forward::after,.icon-upward::after{background:currentColor;content:"";height:.2rem;left:60%;width:.9em}.icon-caret::before{border-left:.3em solid transparent;border-right:.3em solid transparent;border-top:.3em solid currentColor;content:"";height:0;-webkit-transform:translate(-50%,-25%);-ms-transform:translate(-50%,-25%);transform:translate(-50%,-25%);width:0}.icon-menu::before{background:currentColor;box-shadow:0 -.35em,0 .35em;content:"";height:.2rem;width:100%}.icon-apps::before{background:currentColor;box-shadow:-.35em -.35em,-.35em 0,-.35em .35em,0 -.35em,0 .35em,.35em -.35em,.35em 0,.35em .35em;content:"";height:.3rem;width:.3rem}.icon-more-horiz::before,.icon-more-vert::before{background:currentColor;border-radius:50%;box-shadow:-.4em 0,.4em 0;content:"";height:.3rem;width:.3rem}.icon-more-vert::before{box-shadow:0 -.4em,0 .4em}.icon-cross::before,.icon-minus::before,.icon-plus::before{background:currentColor;content:"";height:.2rem;width:90%}.icon-cross::after,.icon-plus::after{background:currentColor;content:"";height:90%;width:.2rem}.icon-cross::before{width:100%}.icon-cross::after{height:100%}.icon-cross::after,.icon-cross::before{-webkit-transform:translate(-50%,-50%) rotate(45deg);-ms-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg)}.icon-check::before{border:.2rem solid currentColor;border-right:0;border-top:0;content:"";height:.5em;-webkit-transform:translate(-50%,-75%) rotate(-45deg);-ms-transform:translate(-50%,-75%) rotate(-45deg);transform:translate(-50%,-75%) rotate(-45deg);width:.9em}.icon-refresh::before{border:.2rem solid currentColor;border-radius:50%;border-right-color:transparent;content:"";height:.9em;width:.9em}.icon-refresh::after{border:.2em solid currentColor;border-left-color:transparent;border-top-color:transparent;content:"";height:0;left:75%;top:25%;width:0}.icon-search::before{border:.2rem solid currentColor;border-radius:50%;content:"";height:.75em;left:5%;top:5%;-webkit-transform:translate(0,0) rotate(45deg);-ms-transform:translate(0,0) rotate(45deg);transform:translate(0,0) rotate(45deg);width:.75em}.icon-search::after{background:currentColor;content:"";height:.2rem;left:80%;top:80%;-webkit-transform:translate(-50%,-50%) rotate(45deg);-ms-transform:translate(-50%,-50%) rotate(45deg);transform:translate(-50%,-50%) rotate(45deg);width:.4em}.icon-edit::before{border:.2rem solid currentColor;content:"";height:.4em;-webkit-transform:translate(-40%,-60%) rotate(-45deg);-ms-transform:translate(-40%,-60%) rotate(-45deg);transform:translate(-40%,-60%) rotate(-45deg);width:.85em}.icon-edit::after{border:.15em solid currentColor;border-right-color:transparent;border-top-color:transparent;content:"";height:0;left:5%;top:95%;-webkit-transform:translate(0,-100%);-ms-transform:translate(0,-100%);transform:translate(0,-100%);width:0}.icon-delete{height:.7em;margin:.15em .1em;width:.8em}.icon-delete::before{border:.2rem solid currentColor;border-bottom-left-radius:.2rem;border-bottom-right-radius:.2rem;border-top:0;content:"";height:.7em;top:65%;width:.75em}.icon-delete::after{background:currentColor;content:"";height:.2rem;top:10%;width:.9em}.icon-share{border:.2rem solid currentColor;border-radius:.2rem;border-right:0;border-top:0}.icon-share::before{border:.2rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.45em;left:100%;top:36%;-webkit-transform:translate(-125%,-50%) rotate(135deg);-ms-transform:translate(-125%,-50%) rotate(135deg);transform:translate(-125%,-50%) rotate(135deg);width:.45em}.icon-share::after{border:.2rem solid currentColor;border-bottom:0;border-radius:75% 5%;border-right:0;content:"";height:.4em;width:.6em}.icon-flag::before{background:currentColor;content:"";height:1em;left:10%;width:.2rem}.icon-flag::after{border:.2rem solid currentColor;border-bottom-right-radius:.2rem;border-left:0;border-top-right-radius:.2rem;content:"";height:.65em;left:55%;top:35%;width:.75em}.icon-download,.icon-upload{border-bottom:.2rem solid currentColor}.icon-download::before,.icon-upload::before{border:.2rem solid currentColor;border-bottom:0;border-right:0;content:"";height:.5em;-webkit-transform:translate(-50%,-60%) rotate(-135deg);-ms-transform:translate(-50%,-60%) rotate(-135deg);transform:translate(-50%,-60%) rotate(-135deg);width:.5em}.icon-download::after,.icon-upload::after{background:currentColor;content:"";height:.6em;top:40%;width:.2rem}.icon-upload::before{-webkit-transform:translate(-50%,-60%) rotate(45deg);-ms-transform:translate(-50%,-60%) rotate(45deg);transform:translate(-50%,-60%) rotate(45deg)}.icon-upload::after{top:50%}.icon-time{border:.2rem solid currentColor;border-radius:50%}.icon-time::before{background:currentColor;content:"";height:.4em;-webkit-transform:translate(-50%,-75%);-ms-transform:translate(-50%,-75%);transform:translate(-50%,-75%);width:.2rem}.icon-time::after{background:currentColor;content:"";height:.3em;-webkit-transform:translate(-50%,-75%) rotate(90deg);-ms-transform:translate(-50%,-75%) rotate(90deg);transform:translate(-50%,-75%) rotate(90deg);-webkit-transform-origin:50% 90%;-ms-transform-origin:50% 90%;transform-origin:50% 90%;width:.2rem}.icon-mail::before{border:.2rem solid currentColor;border-radius:.2rem;content:"";height:.8em;width:1em}.icon-mail::after{border:.2rem solid currentColor;border-right:0;border-top:0;content:"";height:.5em;-webkit-transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);-ms-transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);transform:translate(-50%,-90%) rotate(-45deg) skew(10deg,10deg);width:.5em}.icon-people::before{border:.2rem solid currentColor;border-radius:50%;content:"";height:.45em;top:25%;width:.45em}.icon-people::after{border:.2rem solid currentColor;border-radius:50% 50% 0 0;content:"";height:.4em;top:75%;width:.9em}.icon-file::before{border:.2rem solid currentColor;border-radius:.2rem .4em .2rem .2rem;content:"";height:1em;width:.9em}.icon-file::after{border:.2em solid currentColor;border-right-color:transparent;border-top-color:transparent;content:"";height:0;left:.8em;top:.2em;width:0}.icon-link::after,.icon-link::before{border:.2rem solid currentColor;border-radius:5em;border-right-color:transparent;content:"";height:.5em;width:.75em}.icon-link::before{-webkit-transform:translate(-70%,-45%) rotate(-45deg);-ms-transform:translate(-70%,-45%) rotate(-45deg);transform:translate(-70%,-45%) rotate(-45deg)}.icon-link::after{-webkit-transform:translate(-30%,-55%) rotate(135deg);-ms-transform:translate(-30%,-55%) rotate(135deg);transform:translate(-30%,-55%) rotate(135deg)}.btn .icon,.menu .icon,.toast .icon{vertical-align:-10%}
\ No newline at end of file
diff --git a/docs/elements.html b/docs/elements.html
index 12b0dd2..cde99eb 100644
--- a/docs/elements.html
+++ b/docs/elements.html
@@ -1014,7 +1014,7 @@
         <section id="icons" class="container">
           <header class="text-center"><h3>Icons <small class="label">experimental</small></h3></header>
           <section class="notes">
-            <p><strong>Icons</strong> are pure CSS icons. You can include <code>spectre-icons.css</code> in the <code>dist</code> folder to your web &lt;head&gt; to have these CSS icons.</p>
+            <p><strong>Icons</strong> are single-element, responsive and pure CSS icons. You can include <code>spectre-icons.css</code> located in the <code>dist</code> folder to your web &lt;head&gt; to have these CSS icons.</p>
           </section>
           <div class="columns">
             <div class="column col-3 col-md-6">
@@ -1071,6 +1071,12 @@
               </button>
               <p>icon-menu</p>
             </div>
+            <div class="column col-3 col-md-6">
+              <button class="btn btn-primary btn-action btn-lg">
+                <i class="icon icon-apps"></i>
+              </button>
+              <p>icon-apps</p>
+            </div>
             <div class="column col-3 col-md-6">
               <button class="btn btn-primary btn-action btn-lg">
                 <i class="icon icon-caret"></i>
@@ -1125,6 +1131,12 @@
               </button>
               <p>icon-search</p>
             </div>
+            <div class="column col-3 col-md-6">
+              <button class="btn btn-primary btn-action btn-lg">
+                <i class="icon icon-flag"></i>
+              </button>
+              <p>icon-flag</p>
+            </div>
             <div class="column col-3 col-md-6">
               <button class="btn btn-primary btn-action btn-lg">
                 <i class="icon icon-edit"></i>
@@ -1149,6 +1161,12 @@
               </button>
               <p>icon-upload</p>
             </div>
+            <div class="column col-3 col-md-6">
+              <button class="btn btn-primary btn-action btn-lg">
+                <i class="icon icon-time"></i>
+              </button>
+              <p>icon-time</p>
+            </div>
             <div class="column col-3 col-md-6">
               <button class="btn btn-primary btn-action btn-lg">
                 <i class="icon icon-mail"></i>
diff --git a/docs/experimentals.html b/docs/experimentals.html
index f9f7b5f..4f3f5fa 100644
--- a/docs/experimentals.html
+++ b/docs/experimentals.html
@@ -186,7 +186,7 @@
                     <div class="calendar-date current-month"><button class="date-item">1</button></div>
                     <div class="calendar-date current-month"><button class="date-item">2</button></div>
                     <div class="calendar-date current-month"><button class="date-item">3</button></div>
-                    <div class="calendar-date current-month"><button class="date-item date-today">4</button></div>
+                    <div class="calendar-date current-month tooltip" data-tooltip="Today"><button class="date-item date-today">4</button></div>
                     <div class="calendar-date current-month"><button class="date-item" disabled>5</button></div>
                     <div class="calendar-date current-month"><button class="date-item">6</button></div>
                     <div class="calendar-date current-month"><button class="date-item">7</button></div>
diff --git a/docs/index.html b/docs/index.html
index ad39d67..42ba080 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -298,11 +298,11 @@
           <section class="notes">
             <p>Spectre uses <a href="https://github.com/postcss/autoprefixer" target="_blank">Autoprefixer</a> to make most styles compatible with earlier browsers and <a href="https://necolas.github.io/normalize.css/" target="_blank">Normalize.css</a> for CSS resets. Spectre is designed for modern browsers. For best compatibility, these browsers are recommended:</p>
             <ul>
-              <li>Chrome (last 4)</li>
-              <li>Microsoft Edge (last 4)</li>
-              <li>Firefox (last 4)</li>
-              <li>Safari (last 4)</li>
-              <li>Opera (last 4)</li>
+              <li>Chrome <span class="label label-success">Last 4</span></li>
+              <li>Microsoft Edge <span class="label label-success">Last 4</span></li>
+              <li>Firefox <span class="label label-success">Last 4</span></li>
+              <li>Safari <span class="label label-success">Last 4</span></li>
+              <li>Opera <span class="label label-success">Last 4</span></li>
               <li>Internet Explorer 10+</li>
             </ul>
           </section>
@@ -313,6 +313,9 @@
           <section class="notes">
             <p><strong>March 2017</strong></p>
             <ul>
+              <li>
+                <a href="elements.html#icons">Icons</a>: single-element, responsive and pure CSS icons <small class="label label-primary">NEW</small>
+              </li>
               <li>
                 <a href="components.html#popovers">Popovers</a>: small overlay content containers <small class="label label-primary">NEW</small>
               </li>
diff --git a/docs/src/docs.less b/docs/src/docs.less
index 6f7393a..a458b5d 100644
--- a/docs/src/docs.less
+++ b/docs/src/docs.less
@@ -219,6 +219,10 @@
     font-size: 2.4rem;
     height: 4rem;
     width: 4rem;
+
+    .icon {
+      margin: auto;
+    }
   }
 }
 
diff --git a/spectre-icons.less b/spectre-icons.less
index a366e7d..3491565 100644
--- a/spectre-icons.less
+++ b/spectre-icons.less
@@ -6,3 +6,4 @@
 
 // Icons
 @import 'src/icons.less';
+@import 'src/component-icons.less';
diff --git a/src/component-icons.less b/src/component-icons.less
new file mode 100644
index 0000000..7551d05
--- /dev/null
+++ b/src/component-icons.less
@@ -0,0 +1,8 @@
+// Component icon support
+.btn,
+.toast,
+.menu {
+  .icon {
+    vertical-align: -10%;
+  }
+}
diff --git a/src/icons.less b/src/icons.less
index f922569..4384d48 100644
--- a/src/icons.less
+++ b/src/icons.less
@@ -65,7 +65,7 @@
     content: "";
     height: @icon-border-width;
     left: 60%;
-    width: .8em;
+    width: .9em;
   }
 }
 
@@ -93,6 +93,17 @@
   }
 }
 
+// Icon apps
+.icon-apps {
+  &::before {
+    background: currentColor;
+    box-shadow: -.35em -.35em, -.35em 0, -.35em .35em, 0 -.35em, 0 .35em, .35em -.35em, .35em 0, .35em .35em;
+    content: "";
+    height: .3rem;
+    width: .3rem;
+  }
+}
+
 // Icon more
 .icon-more-horiz,
 .icon-more-vert {
@@ -101,8 +112,8 @@
     box-shadow: -.4em 0, .4em 0;
     border-radius: 50%;
     content: "";
-    height: @icon-border-width * 2;
-    width: @icon-border-width * 2;
+    height: .3rem;
+    width: .3rem;
   }
 }
 .icon-more-vert {
@@ -217,13 +228,37 @@
     border-right-color: transparent;
     content: "";
     height: 0;
-    left: 10%;
+    left: 5%;
     top: 95%;
     transform: translate(0, -100%);
     width: 0;
   }
 }
 
+// Icon delete
+.icon-delete {
+  height: .7em;
+  margin: .15em .1em;
+  width: .8em;
+  &::before {
+    border: @icon-border-width solid currentColor;
+    border-bottom-left-radius: @border-radius;
+    border-bottom-right-radius: @border-radius;
+    border-top: 0;
+    content: "";
+    height: .7em;
+    top: 65%;
+    width: .75em;
+  }
+  &::after {
+    background: currentColor;
+    content: "";
+    height: @icon-border-width;
+    top: 10%;
+    width: .9em;
+  }
+}
+
 // Icon share
 .icon-share {
   border: @icon-border-width solid currentColor;
@@ -235,26 +270,49 @@
     border-bottom: 0;
     border-right: 0;
     content: "";
-    height: .4em;
+    height: .45em;
     left: 100%;
-    top: 35%;
+    top: 36%;
     transform: translate(-125%, -50%) rotate(135deg);
-    width: .4em;
+    width: .45em;
   }
   &::after {
     border: @icon-border-width solid currentColor;
     border-bottom: 0;
     border-right: 0;
-    border-top-left-radius: 50%;
+    border-radius: 75% 5%;
     content: "";
     height: .4em;
-    width: .5em;
+    width: .6em;
+  }
+}
+
+// Icon flag
+.icon-flag {
+  &::before {
+    background: currentColor;
+    content: "";
+    height: 1em;
+    left: 10%;
+    width: @icon-border-width;
+  }
+  &::after {
+    border: @icon-border-width solid currentColor;
+    border-bottom-right-radius: @border-radius;
+    border-left: 0;
+    border-top-right-radius: @border-radius;
+    content: "";
+    height: .65em;
+    top: 35%;
+    left: 55%;
+    width: .75em;
   }
 }
 
 // Icon download & upload
 .icon-download,
 .icon-upload {
+  border-bottom: @icon-border-width solid currentColor;
   &::before {
     border: @icon-border-width solid currentColor;
     border-bottom: 0;
@@ -262,7 +320,7 @@
     content: "";
     height: .5em;
     width: .5em;
-    transform: translate(-50%, -50%) rotate(-135deg);
+    transform: translate(-50%, -60%) rotate(-135deg);
   }
   &::after {
     background: currentColor;
@@ -273,17 +331,33 @@
   }
 }
 
-.icon-download {
-  border-bottom: @icon-border-width solid currentColor;
+.icon-upload {
+  &::before {
+    transform: translate(-50%, -60%) rotate(45deg);
+  }
+  &::after {
+    top: 50%;
+  }
 }
 
-.icon-upload {
-  border-top: @icon-border-width solid currentColor;
+// Icon time
+.icon-time {
+  border: @icon-border-width solid currentColor;
+  border-radius: 50%;
   &::before {
-    transform: translate(-50%, -50%) rotate(45deg);
+    background: currentColor;
+    content: "";
+    height: .4em;
+    transform: translate(-50%, -75%);
+    width: @icon-border-width;
   }
   &::after {
-    top: 60%;
+    background: currentColor;
+    content: "";
+    height: .3em;
+    transform: translate(-50%, -75%) rotate(90deg);
+    transform-origin: 50% 90%;
+    width: @icon-border-width;
   }
 }
 
@@ -327,6 +401,27 @@
   }
 }
 
+// Icon file
+.icon-file {
+  &::before {
+    border: @icon-border-width solid currentColor;
+    border-radius: @border-radius .4em @border-radius @border-radius;
+    content: "";
+    height: 1em;
+    width: .9em;
+  }
+  &::after {
+    border: .2em solid currentColor;
+    border-top-color: transparent;
+    border-right-color: transparent;
+    content: "";
+    height: 0;
+    left: .8em;
+    top: .2em;
+    width: 0;
+  }
+}
+
 // Icon link
 .icon-link {
   &::before,
@@ -345,12 +440,3 @@
     transform: translate(-30%, -55%) rotate(135deg);
   }
 }
-
-// Components with icons
-.btn,
-.toast,
-.menu {
-  .icon {
-    vertical-align: -10%;
-  }
-}
-- 
cgit v1.3.1-23-gd82d


From afb6282a3e2b2014f0756586f40dae00c7f9a722 Mon Sep 17 00:00:00 2001
From: Yan Zhu <picturepan2@hotmail.com>
Date: Tue, 28 Mar 2017 22:06:59 +0800
Subject: Add tvOS Parallax effect text layer

---
 dist/spectre-exp.css         | 67 +++++++++++++++++++++++++++++++++++---------
 dist/spectre-exp.min.css     |  2 +-
 docs/components.html         |  2 +-
 docs/css/docs.css            |  2 +-
 docs/css/docs.min.css        |  2 +-
 docs/css/spectre-exp.css     | 67 +++++++++++++++++++++++++++++++++++---------
 docs/css/spectre-exp.min.css |  2 +-
 docs/experimentals.html      | 17 +++++++----
 docs/src/docs.less           |  2 +-
 src/parallax.less            | 49 +++++++++++++++++++++++++++-----
 10 files changed, 166 insertions(+), 46 deletions(-)

(limited to 'docs/css/docs.css')

diff --git a/dist/spectre-exp.css b/dist/spectre-exp.css
index 12f3759..9e9c2ef 100644
--- a/dist/spectre-exp.css
+++ b/dist/spectre-exp.css
@@ -396,8 +396,8 @@
 .parallax .parallax-content {
   box-shadow: 0 2rem 4.2rem rgba(69, 77, 93, .3);
   height: auto;
-  -webkit-transform: perspective(50rem);
-  transform: perspective(50rem);
+  -webkit-transform: perspective(100rem);
+  transform: perspective(100rem);
   -webkit-transform-style: preserve-3d;
   transform-style: preserve-3d;
   transition: all .4s ease;
@@ -412,66 +412,105 @@
   top: 0;
   width: 100%;
 }
+.parallax .parallax-front {
+  -webkit-align-items: center;
+  align-items: center;
+  color: #fff;
+  display: flex;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  -ms-flex-align: center;
+  -ms-flex-pack: center;
+  height: 100%;
+  -webkit-justify-content: center;
+  justify-content: center;
+  left: 0;
+  position: absolute;
+  text-align: center;
+  text-shadow: 0 0 3rem rgba(69, 77, 93, .95);
+  top: 0;
+  -webkit-transform: translateZ(10rem);
+  transform: translateZ(10rem);
+  transition: all .4s ease;
+  width: 100%;
+  z-index: 1;
+}
 .parallax .parallax-top-left {
   height: 50%;
   left: 0;
   position: absolute;
   top: 0;
   width: 50%;
-  z-index: 1;
+  z-index: 300;
 }
 .parallax .parallax-top-left:hover ~ .parallax-content {
-  -webkit-transform: perspective(50rem) rotateX(3deg) rotateY(-3deg);
-  transform: perspective(50rem) rotateX(3deg) rotateY(-3deg);
+  -webkit-transform: perspective(100rem) rotateX(-3deg) rotateY(3deg);
+  transform: perspective(100rem) rotateX(-3deg) rotateY(3deg);
 }
 .parallax .parallax-top-left:hover ~ .parallax-content::before {
   background: linear-gradient(135deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, 0) 50%);
 }
+.parallax .parallax-top-left:hover ~ .parallax-content .parallax-front {
+  -webkit-transform: translate3d(-.4rem, -.4rem, 10rem);
+  transform: translate3d(-.4rem, -.4rem, 10rem);
+}
 .parallax .parallax-top-right {
   height: 50%;
   position: absolute;
   right: 0;
   top: 0;
   width: 50%;
-  z-index: 1;
+  z-index: 300;
 }
 .parallax .parallax-top-right:hover ~ .parallax-content {
-  -webkit-transform: perspective(50rem) rotateX(3deg) rotateY(3deg);
-  transform: perspective(50rem) rotateX(3deg) rotateY(3deg);
+  -webkit-transform: perspective(100rem) rotateX(-3deg) rotateY(-3deg);
+  transform: perspective(100rem) rotateX(-3deg) rotateY(-3deg);
 }
 .parallax .parallax-top-right:hover ~ .parallax-content::before {
   background: linear-gradient(-135deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, 0) 50%);
 }
+.parallax .parallax-top-right:hover ~ .parallax-content .parallax-front {
+  -webkit-transform: translate3d(.4rem, -.4rem, 10rem);
+  transform: translate3d(.4rem, -.4rem, 10rem);
+}
 .parallax .parallax-bottom-left {
   bottom: 0;
   height: 50%;
   left: 0;
   position: absolute;
   width: 50%;
-  z-index: 1;
+  z-index: 300;
 }
 .parallax .parallax-bottom-left:hover ~ .parallax-content {
-  -webkit-transform: perspective(50rem) rotateX(-3deg) rotateY(-3deg);
-  transform: perspective(50rem) rotateX(-3deg) rotateY(-3deg);
+  -webkit-transform: perspective(100rem) rotateX(3deg) rotateY(3deg);
+  transform: perspective(100rem) rotateX(3deg) rotateY(3deg);
 }
 .parallax .parallax-bottom-left:hover ~ .parallax-content::before {
   background: linear-gradient(45deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, 0) 50%);
 }
+.parallax .parallax-bottom-left:hover ~ .parallax-content .parallax-front {
+  -webkit-transform: translate3d(-.4rem, .4rem, 10rem);
+  transform: translate3d(-.4rem, .4rem, 10rem);
+}
 .parallax .parallax-bottom-right {
   bottom: 0;
   height: 50%;
   position: absolute;
   right: 0;
   width: 50%;
-  z-index: 1;
+  z-index: 300;
 }
 .parallax .parallax-bottom-right:hover ~ .parallax-content {
-  -webkit-transform: perspective(50rem) rotateX(-3deg) rotateY(3deg);
-  transform: perspective(50rem) rotateX(-3deg) rotateY(3deg);
+  -webkit-transform: perspective(100rem) rotateX(3deg) rotateY(-3deg);
+  transform: perspective(100rem) rotateX(3deg) rotateY(-3deg);
 }
 .parallax .parallax-bottom-right:hover ~ .parallax-content::before {
   background: linear-gradient(-45deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, 0) 50%);
 }
+.parallax .parallax-bottom-right:hover ~ .parallax-content .parallax-front {
+  -webkit-transform: translate3d(.4rem, .4rem, 10rem);
+  transform: translate3d(.4rem, .4rem, 10rem);
+}
 .progress {
   -webkit-appearance: none;
   -moz-appearance: none;
diff --git a/dist/spectre-exp.min.css b/dist/spectre-exp.min.css
index 2a52c4d..0c0251b 100644
--- a/dist/spectre-exp.min.css
+++ b/dist/spectre-exp.min.css
@@ -1 +1 @@
-/*! Spectre.css Experimentals | MIT License | github.com/picturepan2/spectre */.calendar{border:.1rem solid #f0f1f4;border-radius:.2rem;display:block;min-width:28rem;text-align:center}.calendar .calendar-nav{-webkit-align-items:center;align-items:center;background:#f8f9fa;border-top-left-radius:.2rem;border-top-right-radius:.2rem;display:flex;display:-ms-flexbox;display:-webkit-flex;-ms-flex-align:center;font-size:1.6rem;padding:1rem}.calendar .calendar-body,.calendar .calendar-header{display:flex;display:-ms-flexbox;display:-webkit-flex;-ms-flex-pack:center;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-justify-content:center;justify-content:center;padding:1rem 0}.calendar .calendar-body .calendar-date,.calendar .calendar-header .calendar-date{-webkit-flex:0 0 14.28%;-ms-flex:0 0 14.28%;flex:0 0 14.28%;width:14.28%}.calendar .calendar-header{background:#f8f9fa;border-bottom:.1rem solid #f0f1f4;color:#acb3c2;font-size:1.2rem}.calendar .calendar-body{color:#727e96}.calendar .calendar-date{border:0;padding:.4rem}.calendar .calendar-date .date-item{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;border:.1rem solid transparent;border-radius:50%;color:#727e96;cursor:pointer;height:2.8rem;line-height:2rem;padding:.3rem;position:relative;text-align:center;text-decoration:none;transition:all .2s ease;vertical-align:middle;white-space:nowrap;width:2.8rem}.calendar .calendar-date .date-item.date-today{border-color:#e4e6f6;color:#5764c6}.calendar .calendar-date .date-item:focus,.calendar .calendar-date .date-item:hover{background:#fbfbfe;border-color:#e4e6f6;color:#5764c6;text-decoration:none}.calendar .calendar-date .date-item.active,.calendar .calendar-date .date-item:active{background:#4c59c2;border-color:#3e4cb6;color:#fff}.calendar .calendar-date .date-item.badge::after{position:absolute;right:.3rem;top:.3rem;-webkit-transform:translate(50%,-50%);-ms-transform:translate(50%,-50%);transform:translate(50%,-50%)}.calendar .calendar-date .calendar-event:disabled,.calendar .calendar-date .date-item:disabled,.calendar .calendar-date.disabled .calendar-event,.calendar .calendar-date.disabled .date-item{cursor:default;opacity:.25;pointer-events:none}.calendar .calendar-range{position:relative}.calendar .calendar-range::before{background:#eff1fa;content:"";height:2.8rem;left:0;position:absolute;right:0;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.calendar .calendar-range.range-start::before{left:50%}.calendar .calendar-range.range-end::before{right:50%}.calendar .calendar-range .date-item{color:#5764c6}.calendar.calendar-lg .calendar-body{padding:0}.calendar.calendar-lg .calendar-body .calendar-date{border-bottom:.1rem solid #f0f1f4;border-right:.1rem solid #f0f1f4;display:flex;display:-ms-flexbox;display:-webkit-flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;height:11rem;padding:0}.calendar.calendar-lg .calendar-body .calendar-date:nth-child(7n){border-right:0}.calendar.calendar-lg .calendar-body .calendar-date:nth-last-child(-n+7){border-bottom:0}.calendar.calendar-lg .date-item{-webkit-align-self:flex-end;align-self:flex-end;-ms-flex-item-align:end;height:2.8rem;margin-right:.5rem;margin-top:.5rem}.calendar.calendar-lg .calendar-range::before{top:1.9rem}.calendar.calendar-lg .calendar-range.range-start::before{left:auto;width:1.9rem}.calendar.calendar-lg .calendar-range.range-end::before{right:1.9rem}.calendar.calendar-lg .calendar-events{-webkit-flex-grow:1;flex-grow:1;-ms-flex-positive:1;line-height:1;overflow-y:auto;padding:.5rem}.calendar.calendar-lg .calendar-event{background:#eff1fa;border-radius:.2rem;color:#5764c6;display:block;font-size:1.2rem;margin:.2rem auto;overflow:hidden;padding:.3rem .4rem;text-align:left;text-overflow:ellipsis;vertical-align:baseline;white-space:nowrap}.carousel{background:#f8f9fa;display:block;height:50vh;overflow:hidden;position:relative;width:100%}.carousel .carousel-container{height:100%;left:0;position:relative}.carousel .carousel-container .carousel-item{-webkit-animation:carousel-slideout 1s ease-in-out 1;animation:carousel-slideout 1s ease-in-out 1;height:100%;left:0;margin:0;opacity:0;position:absolute;top:0;width:100%}.carousel .carousel-container .carousel-item:hover .item-next,.carousel .carousel-container .carousel-item:hover .item-prev{opacity:1}.carousel .carousel-container .item-next,.carousel .carousel-container .item-prev{background:rgba(231,233,237,.25);border-color:rgba(231,233,237,.5);color:#e7e9ed;opacity:0;position:absolute;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);transition:all .4s ease;z-index:200}.carousel .carousel-container .item-prev{left:2rem}.carousel .carousel-container .item-next{right:2rem}.carousel .carousel-locator:nth-of-type(1):checked~.carousel-container .carousel-item:nth-of-type(1),.carousel .carousel-locator:nth-of-type(2):checked~.carousel-container .carousel-item:nth-of-type(2),.carousel .carousel-locator:nth-of-type(3):checked~.carousel-container .carousel-item:nth-of-type(3),.carousel .carousel-locator:nth-of-type(4):checked~.carousel-container .carousel-item:nth-of-type(4){-webkit-animation:carousel-slidein .75s ease-in 1;animation:carousel-slidein .75s ease-in 1;opacity:1;z-index:100}.carousel .carousel-locator:nth-of-type(1):checked~.carousel-nav .nav-item:nth-of-type(1),.carousel .carousel-locator:nth-of-type(2):checked~.carousel-nav .nav-item:nth-of-type(2),.carousel .carousel-locator:nth-of-type(3):checked~.carousel-nav .nav-item:nth-of-type(3),.carousel .carousel-locator:nth-of-type(4):checked~.carousel-nav .nav-item:nth-of-type(4){color:#e7e9ed}.carousel .carousel-nav{bottom:1rem;display:-webkit-flex;display:flex;display:-ms-flexbox;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;left:50%;position:absolute;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);width:20rem;z-index:200}.carousel .carousel-nav .nav-item{color:rgba(231,233,237,.5);display:block;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;height:4rem;margin:.4rem;max-width:5rem;position:relative}.carousel .carousel-nav .nav-item::before{background:currentColor;content:"";display:block;height:.3rem;position:absolute;top:2rem;width:100%}@supports (object-fit:cover){.carousel-item img{height:100%;object-fit:cover;width:100%}}@-webkit-keyframes carousel-slidein{0%{-webkit-transform:translateX(100%);transform:translateX(100%)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes carousel-slidein{0%{-webkit-transform:translateX(100%);transform:translateX(100%)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes carousel-slideout{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:1;-webkit-transform:translateX(-50%);transform:translateX(-50%)}}@keyframes carousel-slideout{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:1;-webkit-transform:translateX(-50%);transform:translateX(-50%)}}.meter{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f8f9fa;border:0;border-radius:.2rem;display:block;height:1.6rem;width:100%}.meter::-webkit-meter-inner-element{display:block}.meter::-webkit-meter-bar,.meter::-webkit-meter-even-less-good-value,.meter::-webkit-meter-optimum-value,.meter::-webkit-meter-suboptimum-value{border-radius:.2rem}.meter::-webkit-meter-bar{background:#f8f9fa}.meter::-webkit-meter-optimum-value{background:#32b643}.meter::-webkit-meter-suboptimum-value{background:#ffb700}.meter::-webkit-meter-even-less-good-value{background:#e85600}.meter:-moz-meter-optimum,.meter:-moz-meter-sub-optimum,.meter:-moz-meter-sub-sub-optimum,.meter::-moz-meter-bar{border-radius:.2rem}.meter:-moz-meter-optimum::-moz-meter-bar{background:#32b643}.meter:-moz-meter-sub-optimum::-moz-meter-bar{background:#ffb700}.meter:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:#e85600}.parallax{display:block;height:auto;position:relative;width:auto}.parallax .parallax-content{box-shadow:0 2rem 4.2rem rgba(69,77,93,.3);height:auto;-webkit-transform:perspective(50rem);transform:perspective(50rem);-webkit-transform-style:preserve-3d;transform-style:preserve-3d;transition:all .4s ease;width:100%}.parallax .parallax-content::before{content:"";display:block;height:100%;left:0;position:absolute;top:0;width:100%}.parallax .parallax-top-left{height:50%;left:0;position:absolute;top:0;width:50%;z-index:1}.parallax .parallax-top-left:hover~.parallax-content{-webkit-transform:perspective(50rem) rotateX(3deg) rotateY(-3deg);transform:perspective(50rem) rotateX(3deg) rotateY(-3deg)}.parallax .parallax-top-left:hover~.parallax-content::before{background:linear-gradient(135deg,rgba(255,255,255,.25) 0,rgba(255,255,255,0) 50%)}.parallax .parallax-top-right{height:50%;position:absolute;right:0;top:0;width:50%;z-index:1}.parallax .parallax-top-right:hover~.parallax-content{-webkit-transform:perspective(50rem) rotateX(3deg) rotateY(3deg);transform:perspective(50rem) rotateX(3deg) rotateY(3deg)}.parallax .parallax-top-right:hover~.parallax-content::before{background:linear-gradient(-135deg,rgba(255,255,255,.25) 0,rgba(255,255,255,0) 50%)}.parallax .parallax-bottom-left{bottom:0;height:50%;left:0;position:absolute;width:50%;z-index:1}.parallax .parallax-bottom-left:hover~.parallax-content{-webkit-transform:perspective(50rem) rotateX(-3deg) rotateY(-3deg);transform:perspective(50rem) rotateX(-3deg) rotateY(-3deg)}.parallax .parallax-bottom-left:hover~.parallax-content::before{background:linear-gradient(45deg,rgba(255,255,255,.25) 0,rgba(255,255,255,0) 50%)}.parallax .parallax-bottom-right{bottom:0;height:50%;position:absolute;right:0;width:50%;z-index:1}.parallax .parallax-bottom-right:hover~.parallax-content{-webkit-transform:perspective(50rem) rotateX(-3deg) rotateY(3deg);transform:perspective(50rem) rotateX(-3deg) rotateY(3deg)}.parallax .parallax-bottom-right:hover~.parallax-content::before{background:linear-gradient(-45deg,rgba(255,255,255,.25) 0,rgba(255,255,255,0) 50%)}.progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f0f1f4;border:0;border-radius:.2rem;color:#5764c6;height:.4rem;position:relative;width:100%}.progress::-webkit-progress-bar{background:0 0;border-radius:.2rem}.progress::-webkit-progress-value{background:#5764c6;border-radius:.2rem}.progress::-moz-progress-bar{background:#5764c6;border-radius:.2rem}.progress:indeterminate{-webkit-animation:progress-indeterminate 1.5s linear infinite;animation:progress-indeterminate 1.5s linear infinite;background:#f0f1f4 linear-gradient(to right,#5764c6 30%,#f0f1f4 30%) top left/150% 150% no-repeat}.progress:indeterminate::-moz-progress-bar{background:0 0}@-webkit-keyframes progress-indeterminate{0%{background-position:200% 0}100%{background-position:-200% 0}}@keyframes progress-indeterminate{0%{background-position:200% 0}100%{background-position:-200% 0}}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;display:block;height:2.4rem;width:100%}.slider::-webkit-slider-thumb{-webkit-appearance:none;background:#5764c6;border:0;border-radius:50%;height:1.2rem;margin-top:-.4rem;transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:1.2rem}.slider::-moz-range-thumb{background:#5764c6;border:0;border-radius:50%;height:1.2rem;transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:1.2rem}.slider::-ms-thumb{background:#5764c6;border:0;border-radius:50%;height:1.2rem;transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:1.2rem}.slider:active::-webkit-slider-thumb{-webkit-transform:scale(1.25);transform:scale(1.25)}.slider:active::-moz-range-thumb{transform:scale(1.25)}.slider:active::-ms-thumb{-ms-transform:scale(1.25);transform:scale(1.25)}.slider.disabled::-webkit-slider-thumb,.slider:disabled::-webkit-slider-thumb{background:#e7e9ed;-webkit-transform:scale(1);transform:scale(1)}.slider.disabled::-moz-range-thumb,.slider:disabled::-moz-range-thumb{background:#e7e9ed;transform:scale(1)}.slider.disabled::-ms-thumb,.slider:disabled::-ms-thumb{background:#e7e9ed;-ms-transform:scale(1);transform:scale(1)}.slider::-webkit-slider-runnable-track{background:#f0f1f4;border-radius:.2rem;height:.4rem;width:100%}.slider::-moz-range-track{background:#f0f1f4;border-radius:.2rem;height:.4rem;width:100%}.slider::-ms-track{background:#f0f1f4;border-radius:.2rem;height:.4rem;width:100%}.slider::-ms-fill-lower{background:#5764c6}
\ No newline at end of file
+/*! Spectre.css Experimentals | MIT License | github.com/picturepan2/spectre */.calendar{border:.1rem solid #f0f1f4;border-radius:.2rem;display:block;min-width:28rem;text-align:center}.calendar .calendar-nav{-webkit-align-items:center;align-items:center;background:#f8f9fa;border-top-left-radius:.2rem;border-top-right-radius:.2rem;display:flex;display:-ms-flexbox;display:-webkit-flex;-ms-flex-align:center;font-size:1.6rem;padding:1rem}.calendar .calendar-body,.calendar .calendar-header{display:flex;display:-ms-flexbox;display:-webkit-flex;-ms-flex-pack:center;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-justify-content:center;justify-content:center;padding:1rem 0}.calendar .calendar-body .calendar-date,.calendar .calendar-header .calendar-date{-webkit-flex:0 0 14.28%;-ms-flex:0 0 14.28%;flex:0 0 14.28%;width:14.28%}.calendar .calendar-header{background:#f8f9fa;border-bottom:.1rem solid #f0f1f4;color:#acb3c2;font-size:1.2rem}.calendar .calendar-body{color:#727e96}.calendar .calendar-date{border:0;padding:.4rem}.calendar .calendar-date .date-item{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;border:.1rem solid transparent;border-radius:50%;color:#727e96;cursor:pointer;height:2.8rem;line-height:2rem;padding:.3rem;position:relative;text-align:center;text-decoration:none;transition:all .2s ease;vertical-align:middle;white-space:nowrap;width:2.8rem}.calendar .calendar-date .date-item.date-today{border-color:#e4e6f6;color:#5764c6}.calendar .calendar-date .date-item:focus,.calendar .calendar-date .date-item:hover{background:#fbfbfe;border-color:#e4e6f6;color:#5764c6;text-decoration:none}.calendar .calendar-date .date-item.active,.calendar .calendar-date .date-item:active{background:#4c59c2;border-color:#3e4cb6;color:#fff}.calendar .calendar-date .date-item.badge::after{position:absolute;right:.3rem;top:.3rem;-webkit-transform:translate(50%,-50%);-ms-transform:translate(50%,-50%);transform:translate(50%,-50%)}.calendar .calendar-date .calendar-event:disabled,.calendar .calendar-date .date-item:disabled,.calendar .calendar-date.disabled .calendar-event,.calendar .calendar-date.disabled .date-item{cursor:default;opacity:.25;pointer-events:none}.calendar .calendar-range{position:relative}.calendar .calendar-range::before{background:#eff1fa;content:"";height:2.8rem;left:0;position:absolute;right:0;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.calendar .calendar-range.range-start::before{left:50%}.calendar .calendar-range.range-end::before{right:50%}.calendar .calendar-range .date-item{color:#5764c6}.calendar.calendar-lg .calendar-body{padding:0}.calendar.calendar-lg .calendar-body .calendar-date{border-bottom:.1rem solid #f0f1f4;border-right:.1rem solid #f0f1f4;display:flex;display:-ms-flexbox;display:-webkit-flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;height:11rem;padding:0}.calendar.calendar-lg .calendar-body .calendar-date:nth-child(7n){border-right:0}.calendar.calendar-lg .calendar-body .calendar-date:nth-last-child(-n+7){border-bottom:0}.calendar.calendar-lg .date-item{-webkit-align-self:flex-end;align-self:flex-end;-ms-flex-item-align:end;height:2.8rem;margin-right:.5rem;margin-top:.5rem}.calendar.calendar-lg .calendar-range::before{top:1.9rem}.calendar.calendar-lg .calendar-range.range-start::before{left:auto;width:1.9rem}.calendar.calendar-lg .calendar-range.range-end::before{right:1.9rem}.calendar.calendar-lg .calendar-events{-webkit-flex-grow:1;flex-grow:1;-ms-flex-positive:1;line-height:1;overflow-y:auto;padding:.5rem}.calendar.calendar-lg .calendar-event{background:#eff1fa;border-radius:.2rem;color:#5764c6;display:block;font-size:1.2rem;margin:.2rem auto;overflow:hidden;padding:.3rem .4rem;text-align:left;text-overflow:ellipsis;vertical-align:baseline;white-space:nowrap}.carousel{background:#f8f9fa;display:block;height:50vh;overflow:hidden;position:relative;width:100%}.carousel .carousel-container{height:100%;left:0;position:relative}.carousel .carousel-container .carousel-item{-webkit-animation:carousel-slideout 1s ease-in-out 1;animation:carousel-slideout 1s ease-in-out 1;height:100%;left:0;margin:0;opacity:0;position:absolute;top:0;width:100%}.carousel .carousel-container .carousel-item:hover .item-next,.carousel .carousel-container .carousel-item:hover .item-prev{opacity:1}.carousel .carousel-container .item-next,.carousel .carousel-container .item-prev{background:rgba(231,233,237,.25);border-color:rgba(231,233,237,.5);color:#e7e9ed;opacity:0;position:absolute;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);transition:all .4s ease;z-index:200}.carousel .carousel-container .item-prev{left:2rem}.carousel .carousel-container .item-next{right:2rem}.carousel .carousel-locator:nth-of-type(1):checked~.carousel-container .carousel-item:nth-of-type(1),.carousel .carousel-locator:nth-of-type(2):checked~.carousel-container .carousel-item:nth-of-type(2),.carousel .carousel-locator:nth-of-type(3):checked~.carousel-container .carousel-item:nth-of-type(3),.carousel .carousel-locator:nth-of-type(4):checked~.carousel-container .carousel-item:nth-of-type(4){-webkit-animation:carousel-slidein .75s ease-in 1;animation:carousel-slidein .75s ease-in 1;opacity:1;z-index:100}.carousel .carousel-locator:nth-of-type(1):checked~.carousel-nav .nav-item:nth-of-type(1),.carousel .carousel-locator:nth-of-type(2):checked~.carousel-nav .nav-item:nth-of-type(2),.carousel .carousel-locator:nth-of-type(3):checked~.carousel-nav .nav-item:nth-of-type(3),.carousel .carousel-locator:nth-of-type(4):checked~.carousel-nav .nav-item:nth-of-type(4){color:#e7e9ed}.carousel .carousel-nav{bottom:1rem;display:-webkit-flex;display:flex;display:-ms-flexbox;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;left:50%;position:absolute;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);width:20rem;z-index:200}.carousel .carousel-nav .nav-item{color:rgba(231,233,237,.5);display:block;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;height:4rem;margin:.4rem;max-width:5rem;position:relative}.carousel .carousel-nav .nav-item::before{background:currentColor;content:"";display:block;height:.3rem;position:absolute;top:2rem;width:100%}@supports (object-fit:cover){.carousel-item img{height:100%;object-fit:cover;width:100%}}@-webkit-keyframes carousel-slidein{0%{-webkit-transform:translateX(100%);transform:translateX(100%)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes carousel-slidein{0%{-webkit-transform:translateX(100%);transform:translateX(100%)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes carousel-slideout{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:1;-webkit-transform:translateX(-50%);transform:translateX(-50%)}}@keyframes carousel-slideout{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:1;-webkit-transform:translateX(-50%);transform:translateX(-50%)}}.meter{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f8f9fa;border:0;border-radius:.2rem;display:block;height:1.6rem;width:100%}.meter::-webkit-meter-inner-element{display:block}.meter::-webkit-meter-bar,.meter::-webkit-meter-even-less-good-value,.meter::-webkit-meter-optimum-value,.meter::-webkit-meter-suboptimum-value{border-radius:.2rem}.meter::-webkit-meter-bar{background:#f8f9fa}.meter::-webkit-meter-optimum-value{background:#32b643}.meter::-webkit-meter-suboptimum-value{background:#ffb700}.meter::-webkit-meter-even-less-good-value{background:#e85600}.meter:-moz-meter-optimum,.meter:-moz-meter-sub-optimum,.meter:-moz-meter-sub-sub-optimum,.meter::-moz-meter-bar{border-radius:.2rem}.meter:-moz-meter-optimum::-moz-meter-bar{background:#32b643}.meter:-moz-meter-sub-optimum::-moz-meter-bar{background:#ffb700}.meter:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:#e85600}.parallax{display:block;height:auto;position:relative;width:auto}.parallax .parallax-content{box-shadow:0 2rem 4.2rem rgba(69,77,93,.3);height:auto;-webkit-transform:perspective(100rem);transform:perspective(100rem);-webkit-transform-style:preserve-3d;transform-style:preserve-3d;transition:all .4s ease;width:100%}.parallax .parallax-content::before{content:"";display:block;height:100%;left:0;position:absolute;top:0;width:100%}.parallax .parallax-front{-webkit-align-items:center;align-items:center;color:#fff;display:flex;display:-ms-flexbox;display:-webkit-flex;-ms-flex-align:center;-ms-flex-pack:center;height:100%;-webkit-justify-content:center;justify-content:center;left:0;position:absolute;text-align:center;text-shadow:0 0 3rem rgba(69,77,93,.95);top:0;-webkit-transform:translateZ(10rem);transform:translateZ(10rem);transition:all .4s ease;width:100%;z-index:1}.parallax .parallax-top-left{height:50%;left:0;position:absolute;top:0;width:50%;z-index:300}.parallax .parallax-top-left:hover~.parallax-content{-webkit-transform:perspective(100rem) rotateX(-3deg) rotateY(3deg);transform:perspective(100rem) rotateX(-3deg) rotateY(3deg)}.parallax .parallax-top-left:hover~.parallax-content::before{background:linear-gradient(135deg,rgba(255,255,255,.25) 0,rgba(255,255,255,0) 50%)}.parallax .parallax-top-left:hover~.parallax-content .parallax-front{-webkit-transform:translate3d(-.4rem,-.4rem,10rem);transform:translate3d(-.4rem,-.4rem,10rem)}.parallax .parallax-top-right{height:50%;position:absolute;right:0;top:0;width:50%;z-index:300}.parallax .parallax-top-right:hover~.parallax-content{-webkit-transform:perspective(100rem) rotateX(-3deg) rotateY(-3deg);transform:perspective(100rem) rotateX(-3deg) rotateY(-3deg)}.parallax .parallax-top-right:hover~.parallax-content::before{background:linear-gradient(-135deg,rgba(255,255,255,.25) 0,rgba(255,255,255,0) 50%)}.parallax .parallax-top-right:hover~.parallax-content .parallax-front{-webkit-transform:translate3d(.4rem,-.4rem,10rem);transform:translate3d(.4rem,-.4rem,10rem)}.parallax .parallax-bottom-left{bottom:0;height:50%;left:0;position:absolute;width:50%;z-index:300}.parallax .parallax-bottom-left:hover~.parallax-content{-webkit-transform:perspective(100rem) rotateX(3deg) rotateY(3deg);transform:perspective(100rem) rotateX(3deg) rotateY(3deg)}.parallax .parallax-bottom-left:hover~.parallax-content::before{background:linear-gradient(45deg,rgba(255,255,255,.25) 0,rgba(255,255,255,0) 50%)}.parallax .parallax-bottom-left:hover~.parallax-content .parallax-front{-webkit-transform:translate3d(-.4rem,.4rem,10rem);transform:translate3d(-.4rem,.4rem,10rem)}.parallax .parallax-bottom-right{bottom:0;height:50%;position:absolute;right:0;width:50%;z-index:300}.parallax .parallax-bottom-right:hover~.parallax-content{-webkit-transform:perspective(100rem) rotateX(3deg) rotateY(-3deg);transform:perspective(100rem) rotateX(3deg) rotateY(-3deg)}.parallax .parallax-bottom-right:hover~.parallax-content::before{background:linear-gradient(-45deg,rgba(255,255,255,.25) 0,rgba(255,255,255,0) 50%)}.parallax .parallax-bottom-right:hover~.parallax-content .parallax-front{-webkit-transform:translate3d(.4rem,.4rem,10rem);transform:translate3d(.4rem,.4rem,10rem)}.progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f0f1f4;border:0;border-radius:.2rem;color:#5764c6;height:.4rem;position:relative;width:100%}.progress::-webkit-progress-bar{background:0 0;border-radius:.2rem}.progress::-webkit-progress-value{background:#5764c6;border-radius:.2rem}.progress::-moz-progress-bar{background:#5764c6;border-radius:.2rem}.progress:indeterminate{-webkit-animation:progress-indeterminate 1.5s linear infinite;animation:progress-indeterminate 1.5s linear infinite;background:#f0f1f4 linear-gradient(to right,#5764c6 30%,#f0f1f4 30%) top left/150% 150% no-repeat}.progress:indeterminate::-moz-progress-bar{background:0 0}@-webkit-keyframes progress-indeterminate{0%{background-position:200% 0}100%{background-position:-200% 0}}@keyframes progress-indeterminate{0%{background-position:200% 0}100%{background-position:-200% 0}}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;display:block;height:2.4rem;width:100%}.slider::-webkit-slider-thumb{-webkit-appearance:none;background:#5764c6;border:0;border-radius:50%;height:1.2rem;margin-top:-.4rem;transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:1.2rem}.slider::-moz-range-thumb{background:#5764c6;border:0;border-radius:50%;height:1.2rem;transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:1.2rem}.slider::-ms-thumb{background:#5764c6;border:0;border-radius:50%;height:1.2rem;transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:1.2rem}.slider:active::-webkit-slider-thumb{-webkit-transform:scale(1.25);transform:scale(1.25)}.slider:active::-moz-range-thumb{transform:scale(1.25)}.slider:active::-ms-thumb{-ms-transform:scale(1.25);transform:scale(1.25)}.slider.disabled::-webkit-slider-thumb,.slider:disabled::-webkit-slider-thumb{background:#e7e9ed;-webkit-transform:scale(1);transform:scale(1)}.slider.disabled::-moz-range-thumb,.slider:disabled::-moz-range-thumb{background:#e7e9ed;transform:scale(1)}.slider.disabled::-ms-thumb,.slider:disabled::-ms-thumb{background:#e7e9ed;-ms-transform:scale(1);transform:scale(1)}.slider::-webkit-slider-runnable-track{background:#f0f1f4;border-radius:.2rem;height:.4rem;width:100%}.slider::-moz-range-track{background:#f0f1f4;border-radius:.2rem;height:.4rem;width:100%}.slider::-ms-track{background:#f0f1f4;border-radius:.2rem;height:.4rem;width:100%}.slider::-ms-fill-lower{background:#5764c6}
\ No newline at end of file
diff --git a/docs/components.html b/docs/components.html
index 80e3a5b..6cd0922 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -535,7 +535,7 @@
     &lt;<span class="tag">h6</span> <span class="atn">class</span>=<span class="atv">&quot;card-subtitle&quot;</span>&gt;Software and hardware&lt;<span class="tag">/h6</span>&gt;
   &lt;<span class="tag">/div</span>&gt;
   &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;card-body&quot;</span>&gt;
-    To make a contribution to the world by making tools for the mind that advance humankind.
+    Empower every person and every organization on the planet to achieve more.
   &lt;<span class="tag">/div</span>&gt;
   &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;card-footer&quot;</span>&gt;
     &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-primary&quot;</span>&gt;Do&lt;<span class="tag">/button</span>&gt;
diff --git a/docs/css/docs.css b/docs/css/docs.css
index 24af3bb..ac86b20 100644
--- a/docs/css/docs.css
+++ b/docs/css/docs.css
@@ -37,7 +37,7 @@
   padding: 0;
 }
 .grid-header .navbar-brand {
-  color: #50596c;
+  color: #5b657a;
 }
 .grid-header .btn-link {
   color: #667189;
diff --git a/docs/css/docs.min.css b/docs/css/docs.min.css
index b5effd3..fc3f00c 100644
--- a/docs/css/docs.min.css
+++ b/docs/css/docs.min.css
@@ -1 +1 @@
-/*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */.version::after{content:"0.2.9"}.bg-gray{background:#f8f9fa;color:#667189;padding:1rem}.bg-dark{background:#50596c;color:#fff;padding:1rem}.bg-primary{background:#5764c6;color:#fff;padding:1rem}.section-header{padding:1rem .5rem;position:fixed;top:0;width:100%;z-index:200}.section-hero{position:relative;z-index:300}.grid-header .navbar{height:4rem}.grid-header .navbar-section{padding:0}.grid-header .navbar-brand{color:#50596c}.grid-header .btn-link{color:#667189;padding-left:.6rem;padding-right:.6rem}.grid-header .btn-link:active,.grid-header .btn-link:focus,.grid-header .btn-link:hover{color:#50596c;opacity:.75}.grid-hero{margin-bottom:4rem;margin-top:10rem}.grid-hero h1{color:#5b657a;font-size:3.2rem;font-weight:400}.grid-hero h2{color:#5b657a;font-size:1.8rem;font-weight:400;line-height:3rem;margin-bottom:3rem}.grid-hero h2 u{border-bottom:.2rem solid #5b657a;padding-bottom:.1rem;text-decoration:none}.grid-hero .card{background:0 0;border:0;color:#667189;padding:1rem}.grid-hero .card .card-title{color:#5764c6;font-size:1.8rem;margin-bottom:0}.grid-footer{color:#acb3c2;margin-bottom:3rem;margin-top:4rem}.grid-footer a{color:#727e96}.docs-content{color:#667189;padding-top:0}.docs-content .container{padding:1rem}.docs-content header{color:#50596c;padding-top:6rem}.docs-content .notes{margin:4rem 0}.docs-content .docs-block{border-radius:.2rem;padding:1rem .5rem}.docs-content .docs-dot{border-radius:50%;display:inline-block;height:1rem;padding:0;width:1rem}.docs-content .docs-table td,.docs-content .docs-table th{padding:1.5rem .5rem}.docs-content h1,.docs-content h2,.docs-content h3,.docs-content h4,.docs-content h5,.docs-content h6{margin-bottom:2rem;margin-top:2rem}.docs-content .docs-color{border-radius:.2rem;margin:.5rem 0;padding:1rem}.docs-content .docs-color .color-subtitle{font-size:1.2rem;opacity:.75}.docs-content .panel{height:75vh}.docs-content .panel .tile{margin:1.5rem 0}.docs-content .code{color:#667189}.docs-content .code .com{color:#acb3c2}.docs-content .code .tag{color:#5764c6}.docs-content .code .atn{color:#667189}.docs-content .code .atv{color:#e06870}.docs-content .empty .icon{font-size:4rem}.docs-content .navbar-brand .icon{font-size:3rem}.docs-content .form-autocomplete .menu{position:static}.docs-content .example-tile-icon{-webkit-align-content:space-around;align-content:space-around;-webkit-align-items:center;align-items:center;background:#5764c6;border-radius:.2rem;color:#fff;display:flex;display:-ms-flexbox;display:-webkit-flex;-ms-flex-align:center;-ms-flex-line-pack:distribute;font-size:2.4rem;height:4rem;width:4rem}.docs-content .example-tile-icon .icon{margin:auto}@media screen and (min-width:601px){.section-header .navbar-section{padding:0 .5rem}.docs-sidebar{padding:7rem 1rem 3.5rem 1rem}.docs-sidebar .docs-nav{position:relative}@supports ((position:-webkit-sticky) or (position:sticky)){.docs-sidebar .docs-nav{position:sticky;position:-webkit-sticky;top:8rem}.docs-sidebar .docs-nav .nav-item a:focus{box-shadow:none}}}.docs-nav-clear{display:none}@media screen and (max-width:600px){.grid-hero h2{font-size:1.8rem}.grid-hero .card{padding:0}.docs-sidebar{background:#fff;height:100%;left:0;overflow-y:auto;padding:6rem 3rem;position:fixed;top:0;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:24rem;z-index:400}.docs-sidebar:target{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease}.docs-sidebar:target+.docs-nav-clear{display:block}.docs-nav-clear{background:rgba(0,0,0,.15);display:none;height:100%;left:0;position:fixed;right:0;top:0;width:100%;z-index:300}}
\ No newline at end of file
+/*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */.version::after{content:"0.2.9"}.bg-gray{background:#f8f9fa;color:#667189;padding:1rem}.bg-dark{background:#50596c;color:#fff;padding:1rem}.bg-primary{background:#5764c6;color:#fff;padding:1rem}.section-header{padding:1rem .5rem;position:fixed;top:0;width:100%;z-index:200}.section-hero{position:relative;z-index:300}.grid-header .navbar{height:4rem}.grid-header .navbar-section{padding:0}.grid-header .navbar-brand{color:#5b657a}.grid-header .btn-link{color:#667189;padding-left:.6rem;padding-right:.6rem}.grid-header .btn-link:active,.grid-header .btn-link:focus,.grid-header .btn-link:hover{color:#50596c;opacity:.75}.grid-hero{margin-bottom:4rem;margin-top:10rem}.grid-hero h1{color:#5b657a;font-size:3.2rem;font-weight:400}.grid-hero h2{color:#5b657a;font-size:1.8rem;font-weight:400;line-height:3rem;margin-bottom:3rem}.grid-hero h2 u{border-bottom:.2rem solid #5b657a;padding-bottom:.1rem;text-decoration:none}.grid-hero .card{background:0 0;border:0;color:#667189;padding:1rem}.grid-hero .card .card-title{color:#5764c6;font-size:1.8rem;margin-bottom:0}.grid-footer{color:#acb3c2;margin-bottom:3rem;margin-top:4rem}.grid-footer a{color:#727e96}.docs-content{color:#667189;padding-top:0}.docs-content .container{padding:1rem}.docs-content header{color:#50596c;padding-top:6rem}.docs-content .notes{margin:4rem 0}.docs-content .docs-block{border-radius:.2rem;padding:1rem .5rem}.docs-content .docs-dot{border-radius:50%;display:inline-block;height:1rem;padding:0;width:1rem}.docs-content .docs-table td,.docs-content .docs-table th{padding:1.5rem .5rem}.docs-content h1,.docs-content h2,.docs-content h3,.docs-content h4,.docs-content h5,.docs-content h6{margin-bottom:2rem;margin-top:2rem}.docs-content .docs-color{border-radius:.2rem;margin:.5rem 0;padding:1rem}.docs-content .docs-color .color-subtitle{font-size:1.2rem;opacity:.75}.docs-content .panel{height:75vh}.docs-content .panel .tile{margin:1.5rem 0}.docs-content .code{color:#667189}.docs-content .code .com{color:#acb3c2}.docs-content .code .tag{color:#5764c6}.docs-content .code .atn{color:#667189}.docs-content .code .atv{color:#e06870}.docs-content .empty .icon{font-size:4rem}.docs-content .navbar-brand .icon{font-size:3rem}.docs-content .form-autocomplete .menu{position:static}.docs-content .example-tile-icon{-webkit-align-content:space-around;align-content:space-around;-webkit-align-items:center;align-items:center;background:#5764c6;border-radius:.2rem;color:#fff;display:flex;display:-ms-flexbox;display:-webkit-flex;-ms-flex-align:center;-ms-flex-line-pack:distribute;font-size:2.4rem;height:4rem;width:4rem}.docs-content .example-tile-icon .icon{margin:auto}@media screen and (min-width:601px){.section-header .navbar-section{padding:0 .5rem}.docs-sidebar{padding:7rem 1rem 3.5rem 1rem}.docs-sidebar .docs-nav{position:relative}@supports ((position:-webkit-sticky) or (position:sticky)){.docs-sidebar .docs-nav{position:sticky;position:-webkit-sticky;top:8rem}.docs-sidebar .docs-nav .nav-item a:focus{box-shadow:none}}}.docs-nav-clear{display:none}@media screen and (max-width:600px){.grid-hero h2{font-size:1.8rem}.grid-hero .card{padding:0}.docs-sidebar{background:#fff;height:100%;left:0;overflow-y:auto;padding:6rem 3rem;position:fixed;top:0;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:24rem;z-index:400}.docs-sidebar:target{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease}.docs-sidebar:target+.docs-nav-clear{display:block}.docs-nav-clear{background:rgba(0,0,0,.15);display:none;height:100%;left:0;position:fixed;right:0;top:0;width:100%;z-index:300}}
\ No newline at end of file
diff --git a/docs/css/spectre-exp.css b/docs/css/spectre-exp.css
index 12f3759..9e9c2ef 100644
--- a/docs/css/spectre-exp.css
+++ b/docs/css/spectre-exp.css
@@ -396,8 +396,8 @@
 .parallax .parallax-content {
   box-shadow: 0 2rem 4.2rem rgba(69, 77, 93, .3);
   height: auto;
-  -webkit-transform: perspective(50rem);
-  transform: perspective(50rem);
+  -webkit-transform: perspective(100rem);
+  transform: perspective(100rem);
   -webkit-transform-style: preserve-3d;
   transform-style: preserve-3d;
   transition: all .4s ease;
@@ -412,66 +412,105 @@
   top: 0;
   width: 100%;
 }
+.parallax .parallax-front {
+  -webkit-align-items: center;
+  align-items: center;
+  color: #fff;
+  display: flex;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  -ms-flex-align: center;
+  -ms-flex-pack: center;
+  height: 100%;
+  -webkit-justify-content: center;
+  justify-content: center;
+  left: 0;
+  position: absolute;
+  text-align: center;
+  text-shadow: 0 0 3rem rgba(69, 77, 93, .95);
+  top: 0;
+  -webkit-transform: translateZ(10rem);
+  transform: translateZ(10rem);
+  transition: all .4s ease;
+  width: 100%;
+  z-index: 1;
+}
 .parallax .parallax-top-left {
   height: 50%;
   left: 0;
   position: absolute;
   top: 0;
   width: 50%;
-  z-index: 1;
+  z-index: 300;
 }
 .parallax .parallax-top-left:hover ~ .parallax-content {
-  -webkit-transform: perspective(50rem) rotateX(3deg) rotateY(-3deg);
-  transform: perspective(50rem) rotateX(3deg) rotateY(-3deg);
+  -webkit-transform: perspective(100rem) rotateX(-3deg) rotateY(3deg);
+  transform: perspective(100rem) rotateX(-3deg) rotateY(3deg);
 }
 .parallax .parallax-top-left:hover ~ .parallax-content::before {
   background: linear-gradient(135deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, 0) 50%);
 }
+.parallax .parallax-top-left:hover ~ .parallax-content .parallax-front {
+  -webkit-transform: translate3d(-.4rem, -.4rem, 10rem);
+  transform: translate3d(-.4rem, -.4rem, 10rem);
+}
 .parallax .parallax-top-right {
   height: 50%;
   position: absolute;
   right: 0;
   top: 0;
   width: 50%;
-  z-index: 1;
+  z-index: 300;
 }
 .parallax .parallax-top-right:hover ~ .parallax-content {
-  -webkit-transform: perspective(50rem) rotateX(3deg) rotateY(3deg);
-  transform: perspective(50rem) rotateX(3deg) rotateY(3deg);
+  -webkit-transform: perspective(100rem) rotateX(-3deg) rotateY(-3deg);
+  transform: perspective(100rem) rotateX(-3deg) rotateY(-3deg);
 }
 .parallax .parallax-top-right:hover ~ .parallax-content::before {
   background: linear-gradient(-135deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, 0) 50%);
 }
+.parallax .parallax-top-right:hover ~ .parallax-content .parallax-front {
+  -webkit-transform: translate3d(.4rem, -.4rem, 10rem);
+  transform: translate3d(.4rem, -.4rem, 10rem);
+}
 .parallax .parallax-bottom-left {
   bottom: 0;
   height: 50%;
   left: 0;
   position: absolute;
   width: 50%;
-  z-index: 1;
+  z-index: 300;
 }
 .parallax .parallax-bottom-left:hover ~ .parallax-content {
-  -webkit-transform: perspective(50rem) rotateX(-3deg) rotateY(-3deg);
-  transform: perspective(50rem) rotateX(-3deg) rotateY(-3deg);
+  -webkit-transform: perspective(100rem) rotateX(3deg) rotateY(3deg);
+  transform: perspective(100rem) rotateX(3deg) rotateY(3deg);
 }
 .parallax .parallax-bottom-left:hover ~ .parallax-content::before {
   background: linear-gradient(45deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, 0) 50%);
 }
+.parallax .parallax-bottom-left:hover ~ .parallax-content .parallax-front {
+  -webkit-transform: translate3d(-.4rem, .4rem, 10rem);
+  transform: translate3d(-.4rem, .4rem, 10rem);
+}
 .parallax .parallax-bottom-right {
   bottom: 0;
   height: 50%;
   position: absolute;
   right: 0;
   width: 50%;
-  z-index: 1;
+  z-index: 300;
 }
 .parallax .parallax-bottom-right:hover ~ .parallax-content {
-  -webkit-transform: perspective(50rem) rotateX(-3deg) rotateY(3deg);
-  transform: perspective(50rem) rotateX(-3deg) rotateY(3deg);
+  -webkit-transform: perspective(100rem) rotateX(3deg) rotateY(-3deg);
+  transform: perspective(100rem) rotateX(3deg) rotateY(-3deg);
 }
 .parallax .parallax-bottom-right:hover ~ .parallax-content::before {
   background: linear-gradient(-45deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, 0) 50%);
 }
+.parallax .parallax-bottom-right:hover ~ .parallax-content .parallax-front {
+  -webkit-transform: translate3d(.4rem, .4rem, 10rem);
+  transform: translate3d(.4rem, .4rem, 10rem);
+}
 .progress {
   -webkit-appearance: none;
   -moz-appearance: none;
diff --git a/docs/css/spectre-exp.min.css b/docs/css/spectre-exp.min.css
index 2a52c4d..0c0251b 100644
--- a/docs/css/spectre-exp.min.css
+++ b/docs/css/spectre-exp.min.css
@@ -1 +1 @@
-/*! Spectre.css Experimentals | MIT License | github.com/picturepan2/spectre */.calendar{border:.1rem solid #f0f1f4;border-radius:.2rem;display:block;min-width:28rem;text-align:center}.calendar .calendar-nav{-webkit-align-items:center;align-items:center;background:#f8f9fa;border-top-left-radius:.2rem;border-top-right-radius:.2rem;display:flex;display:-ms-flexbox;display:-webkit-flex;-ms-flex-align:center;font-size:1.6rem;padding:1rem}.calendar .calendar-body,.calendar .calendar-header{display:flex;display:-ms-flexbox;display:-webkit-flex;-ms-flex-pack:center;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-justify-content:center;justify-content:center;padding:1rem 0}.calendar .calendar-body .calendar-date,.calendar .calendar-header .calendar-date{-webkit-flex:0 0 14.28%;-ms-flex:0 0 14.28%;flex:0 0 14.28%;width:14.28%}.calendar .calendar-header{background:#f8f9fa;border-bottom:.1rem solid #f0f1f4;color:#acb3c2;font-size:1.2rem}.calendar .calendar-body{color:#727e96}.calendar .calendar-date{border:0;padding:.4rem}.calendar .calendar-date .date-item{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;border:.1rem solid transparent;border-radius:50%;color:#727e96;cursor:pointer;height:2.8rem;line-height:2rem;padding:.3rem;position:relative;text-align:center;text-decoration:none;transition:all .2s ease;vertical-align:middle;white-space:nowrap;width:2.8rem}.calendar .calendar-date .date-item.date-today{border-color:#e4e6f6;color:#5764c6}.calendar .calendar-date .date-item:focus,.calendar .calendar-date .date-item:hover{background:#fbfbfe;border-color:#e4e6f6;color:#5764c6;text-decoration:none}.calendar .calendar-date .date-item.active,.calendar .calendar-date .date-item:active{background:#4c59c2;border-color:#3e4cb6;color:#fff}.calendar .calendar-date .date-item.badge::after{position:absolute;right:.3rem;top:.3rem;-webkit-transform:translate(50%,-50%);-ms-transform:translate(50%,-50%);transform:translate(50%,-50%)}.calendar .calendar-date .calendar-event:disabled,.calendar .calendar-date .date-item:disabled,.calendar .calendar-date.disabled .calendar-event,.calendar .calendar-date.disabled .date-item{cursor:default;opacity:.25;pointer-events:none}.calendar .calendar-range{position:relative}.calendar .calendar-range::before{background:#eff1fa;content:"";height:2.8rem;left:0;position:absolute;right:0;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.calendar .calendar-range.range-start::before{left:50%}.calendar .calendar-range.range-end::before{right:50%}.calendar .calendar-range .date-item{color:#5764c6}.calendar.calendar-lg .calendar-body{padding:0}.calendar.calendar-lg .calendar-body .calendar-date{border-bottom:.1rem solid #f0f1f4;border-right:.1rem solid #f0f1f4;display:flex;display:-ms-flexbox;display:-webkit-flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;height:11rem;padding:0}.calendar.calendar-lg .calendar-body .calendar-date:nth-child(7n){border-right:0}.calendar.calendar-lg .calendar-body .calendar-date:nth-last-child(-n+7){border-bottom:0}.calendar.calendar-lg .date-item{-webkit-align-self:flex-end;align-self:flex-end;-ms-flex-item-align:end;height:2.8rem;margin-right:.5rem;margin-top:.5rem}.calendar.calendar-lg .calendar-range::before{top:1.9rem}.calendar.calendar-lg .calendar-range.range-start::before{left:auto;width:1.9rem}.calendar.calendar-lg .calendar-range.range-end::before{right:1.9rem}.calendar.calendar-lg .calendar-events{-webkit-flex-grow:1;flex-grow:1;-ms-flex-positive:1;line-height:1;overflow-y:auto;padding:.5rem}.calendar.calendar-lg .calendar-event{background:#eff1fa;border-radius:.2rem;color:#5764c6;display:block;font-size:1.2rem;margin:.2rem auto;overflow:hidden;padding:.3rem .4rem;text-align:left;text-overflow:ellipsis;vertical-align:baseline;white-space:nowrap}.carousel{background:#f8f9fa;display:block;height:50vh;overflow:hidden;position:relative;width:100%}.carousel .carousel-container{height:100%;left:0;position:relative}.carousel .carousel-container .carousel-item{-webkit-animation:carousel-slideout 1s ease-in-out 1;animation:carousel-slideout 1s ease-in-out 1;height:100%;left:0;margin:0;opacity:0;position:absolute;top:0;width:100%}.carousel .carousel-container .carousel-item:hover .item-next,.carousel .carousel-container .carousel-item:hover .item-prev{opacity:1}.carousel .carousel-container .item-next,.carousel .carousel-container .item-prev{background:rgba(231,233,237,.25);border-color:rgba(231,233,237,.5);color:#e7e9ed;opacity:0;position:absolute;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);transition:all .4s ease;z-index:200}.carousel .carousel-container .item-prev{left:2rem}.carousel .carousel-container .item-next{right:2rem}.carousel .carousel-locator:nth-of-type(1):checked~.carousel-container .carousel-item:nth-of-type(1),.carousel .carousel-locator:nth-of-type(2):checked~.carousel-container .carousel-item:nth-of-type(2),.carousel .carousel-locator:nth-of-type(3):checked~.carousel-container .carousel-item:nth-of-type(3),.carousel .carousel-locator:nth-of-type(4):checked~.carousel-container .carousel-item:nth-of-type(4){-webkit-animation:carousel-slidein .75s ease-in 1;animation:carousel-slidein .75s ease-in 1;opacity:1;z-index:100}.carousel .carousel-locator:nth-of-type(1):checked~.carousel-nav .nav-item:nth-of-type(1),.carousel .carousel-locator:nth-of-type(2):checked~.carousel-nav .nav-item:nth-of-type(2),.carousel .carousel-locator:nth-of-type(3):checked~.carousel-nav .nav-item:nth-of-type(3),.carousel .carousel-locator:nth-of-type(4):checked~.carousel-nav .nav-item:nth-of-type(4){color:#e7e9ed}.carousel .carousel-nav{bottom:1rem;display:-webkit-flex;display:flex;display:-ms-flexbox;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;left:50%;position:absolute;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);width:20rem;z-index:200}.carousel .carousel-nav .nav-item{color:rgba(231,233,237,.5);display:block;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;height:4rem;margin:.4rem;max-width:5rem;position:relative}.carousel .carousel-nav .nav-item::before{background:currentColor;content:"";display:block;height:.3rem;position:absolute;top:2rem;width:100%}@supports (object-fit:cover){.carousel-item img{height:100%;object-fit:cover;width:100%}}@-webkit-keyframes carousel-slidein{0%{-webkit-transform:translateX(100%);transform:translateX(100%)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes carousel-slidein{0%{-webkit-transform:translateX(100%);transform:translateX(100%)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes carousel-slideout{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:1;-webkit-transform:translateX(-50%);transform:translateX(-50%)}}@keyframes carousel-slideout{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:1;-webkit-transform:translateX(-50%);transform:translateX(-50%)}}.meter{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f8f9fa;border:0;border-radius:.2rem;display:block;height:1.6rem;width:100%}.meter::-webkit-meter-inner-element{display:block}.meter::-webkit-meter-bar,.meter::-webkit-meter-even-less-good-value,.meter::-webkit-meter-optimum-value,.meter::-webkit-meter-suboptimum-value{border-radius:.2rem}.meter::-webkit-meter-bar{background:#f8f9fa}.meter::-webkit-meter-optimum-value{background:#32b643}.meter::-webkit-meter-suboptimum-value{background:#ffb700}.meter::-webkit-meter-even-less-good-value{background:#e85600}.meter:-moz-meter-optimum,.meter:-moz-meter-sub-optimum,.meter:-moz-meter-sub-sub-optimum,.meter::-moz-meter-bar{border-radius:.2rem}.meter:-moz-meter-optimum::-moz-meter-bar{background:#32b643}.meter:-moz-meter-sub-optimum::-moz-meter-bar{background:#ffb700}.meter:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:#e85600}.parallax{display:block;height:auto;position:relative;width:auto}.parallax .parallax-content{box-shadow:0 2rem 4.2rem rgba(69,77,93,.3);height:auto;-webkit-transform:perspective(50rem);transform:perspective(50rem);-webkit-transform-style:preserve-3d;transform-style:preserve-3d;transition:all .4s ease;width:100%}.parallax .parallax-content::before{content:"";display:block;height:100%;left:0;position:absolute;top:0;width:100%}.parallax .parallax-top-left{height:50%;left:0;position:absolute;top:0;width:50%;z-index:1}.parallax .parallax-top-left:hover~.parallax-content{-webkit-transform:perspective(50rem) rotateX(3deg) rotateY(-3deg);transform:perspective(50rem) rotateX(3deg) rotateY(-3deg)}.parallax .parallax-top-left:hover~.parallax-content::before{background:linear-gradient(135deg,rgba(255,255,255,.25) 0,rgba(255,255,255,0) 50%)}.parallax .parallax-top-right{height:50%;position:absolute;right:0;top:0;width:50%;z-index:1}.parallax .parallax-top-right:hover~.parallax-content{-webkit-transform:perspective(50rem) rotateX(3deg) rotateY(3deg);transform:perspective(50rem) rotateX(3deg) rotateY(3deg)}.parallax .parallax-top-right:hover~.parallax-content::before{background:linear-gradient(-135deg,rgba(255,255,255,.25) 0,rgba(255,255,255,0) 50%)}.parallax .parallax-bottom-left{bottom:0;height:50%;left:0;position:absolute;width:50%;z-index:1}.parallax .parallax-bottom-left:hover~.parallax-content{-webkit-transform:perspective(50rem) rotateX(-3deg) rotateY(-3deg);transform:perspective(50rem) rotateX(-3deg) rotateY(-3deg)}.parallax .parallax-bottom-left:hover~.parallax-content::before{background:linear-gradient(45deg,rgba(255,255,255,.25) 0,rgba(255,255,255,0) 50%)}.parallax .parallax-bottom-right{bottom:0;height:50%;position:absolute;right:0;width:50%;z-index:1}.parallax .parallax-bottom-right:hover~.parallax-content{-webkit-transform:perspective(50rem) rotateX(-3deg) rotateY(3deg);transform:perspective(50rem) rotateX(-3deg) rotateY(3deg)}.parallax .parallax-bottom-right:hover~.parallax-content::before{background:linear-gradient(-45deg,rgba(255,255,255,.25) 0,rgba(255,255,255,0) 50%)}.progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f0f1f4;border:0;border-radius:.2rem;color:#5764c6;height:.4rem;position:relative;width:100%}.progress::-webkit-progress-bar{background:0 0;border-radius:.2rem}.progress::-webkit-progress-value{background:#5764c6;border-radius:.2rem}.progress::-moz-progress-bar{background:#5764c6;border-radius:.2rem}.progress:indeterminate{-webkit-animation:progress-indeterminate 1.5s linear infinite;animation:progress-indeterminate 1.5s linear infinite;background:#f0f1f4 linear-gradient(to right,#5764c6 30%,#f0f1f4 30%) top left/150% 150% no-repeat}.progress:indeterminate::-moz-progress-bar{background:0 0}@-webkit-keyframes progress-indeterminate{0%{background-position:200% 0}100%{background-position:-200% 0}}@keyframes progress-indeterminate{0%{background-position:200% 0}100%{background-position:-200% 0}}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;display:block;height:2.4rem;width:100%}.slider::-webkit-slider-thumb{-webkit-appearance:none;background:#5764c6;border:0;border-radius:50%;height:1.2rem;margin-top:-.4rem;transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:1.2rem}.slider::-moz-range-thumb{background:#5764c6;border:0;border-radius:50%;height:1.2rem;transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:1.2rem}.slider::-ms-thumb{background:#5764c6;border:0;border-radius:50%;height:1.2rem;transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:1.2rem}.slider:active::-webkit-slider-thumb{-webkit-transform:scale(1.25);transform:scale(1.25)}.slider:active::-moz-range-thumb{transform:scale(1.25)}.slider:active::-ms-thumb{-ms-transform:scale(1.25);transform:scale(1.25)}.slider.disabled::-webkit-slider-thumb,.slider:disabled::-webkit-slider-thumb{background:#e7e9ed;-webkit-transform:scale(1);transform:scale(1)}.slider.disabled::-moz-range-thumb,.slider:disabled::-moz-range-thumb{background:#e7e9ed;transform:scale(1)}.slider.disabled::-ms-thumb,.slider:disabled::-ms-thumb{background:#e7e9ed;-ms-transform:scale(1);transform:scale(1)}.slider::-webkit-slider-runnable-track{background:#f0f1f4;border-radius:.2rem;height:.4rem;width:100%}.slider::-moz-range-track{background:#f0f1f4;border-radius:.2rem;height:.4rem;width:100%}.slider::-ms-track{background:#f0f1f4;border-radius:.2rem;height:.4rem;width:100%}.slider::-ms-fill-lower{background:#5764c6}
\ No newline at end of file
+/*! Spectre.css Experimentals | MIT License | github.com/picturepan2/spectre */.calendar{border:.1rem solid #f0f1f4;border-radius:.2rem;display:block;min-width:28rem;text-align:center}.calendar .calendar-nav{-webkit-align-items:center;align-items:center;background:#f8f9fa;border-top-left-radius:.2rem;border-top-right-radius:.2rem;display:flex;display:-ms-flexbox;display:-webkit-flex;-ms-flex-align:center;font-size:1.6rem;padding:1rem}.calendar .calendar-body,.calendar .calendar-header{display:flex;display:-ms-flexbox;display:-webkit-flex;-ms-flex-pack:center;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-justify-content:center;justify-content:center;padding:1rem 0}.calendar .calendar-body .calendar-date,.calendar .calendar-header .calendar-date{-webkit-flex:0 0 14.28%;-ms-flex:0 0 14.28%;flex:0 0 14.28%;width:14.28%}.calendar .calendar-header{background:#f8f9fa;border-bottom:.1rem solid #f0f1f4;color:#acb3c2;font-size:1.2rem}.calendar .calendar-body{color:#727e96}.calendar .calendar-date{border:0;padding:.4rem}.calendar .calendar-date .date-item{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;border:.1rem solid transparent;border-radius:50%;color:#727e96;cursor:pointer;height:2.8rem;line-height:2rem;padding:.3rem;position:relative;text-align:center;text-decoration:none;transition:all .2s ease;vertical-align:middle;white-space:nowrap;width:2.8rem}.calendar .calendar-date .date-item.date-today{border-color:#e4e6f6;color:#5764c6}.calendar .calendar-date .date-item:focus,.calendar .calendar-date .date-item:hover{background:#fbfbfe;border-color:#e4e6f6;color:#5764c6;text-decoration:none}.calendar .calendar-date .date-item.active,.calendar .calendar-date .date-item:active{background:#4c59c2;border-color:#3e4cb6;color:#fff}.calendar .calendar-date .date-item.badge::after{position:absolute;right:.3rem;top:.3rem;-webkit-transform:translate(50%,-50%);-ms-transform:translate(50%,-50%);transform:translate(50%,-50%)}.calendar .calendar-date .calendar-event:disabled,.calendar .calendar-date .date-item:disabled,.calendar .calendar-date.disabled .calendar-event,.calendar .calendar-date.disabled .date-item{cursor:default;opacity:.25;pointer-events:none}.calendar .calendar-range{position:relative}.calendar .calendar-range::before{background:#eff1fa;content:"";height:2.8rem;left:0;position:absolute;right:0;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.calendar .calendar-range.range-start::before{left:50%}.calendar .calendar-range.range-end::before{right:50%}.calendar .calendar-range .date-item{color:#5764c6}.calendar.calendar-lg .calendar-body{padding:0}.calendar.calendar-lg .calendar-body .calendar-date{border-bottom:.1rem solid #f0f1f4;border-right:.1rem solid #f0f1f4;display:flex;display:-ms-flexbox;display:-webkit-flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;height:11rem;padding:0}.calendar.calendar-lg .calendar-body .calendar-date:nth-child(7n){border-right:0}.calendar.calendar-lg .calendar-body .calendar-date:nth-last-child(-n+7){border-bottom:0}.calendar.calendar-lg .date-item{-webkit-align-self:flex-end;align-self:flex-end;-ms-flex-item-align:end;height:2.8rem;margin-right:.5rem;margin-top:.5rem}.calendar.calendar-lg .calendar-range::before{top:1.9rem}.calendar.calendar-lg .calendar-range.range-start::before{left:auto;width:1.9rem}.calendar.calendar-lg .calendar-range.range-end::before{right:1.9rem}.calendar.calendar-lg .calendar-events{-webkit-flex-grow:1;flex-grow:1;-ms-flex-positive:1;line-height:1;overflow-y:auto;padding:.5rem}.calendar.calendar-lg .calendar-event{background:#eff1fa;border-radius:.2rem;color:#5764c6;display:block;font-size:1.2rem;margin:.2rem auto;overflow:hidden;padding:.3rem .4rem;text-align:left;text-overflow:ellipsis;vertical-align:baseline;white-space:nowrap}.carousel{background:#f8f9fa;display:block;height:50vh;overflow:hidden;position:relative;width:100%}.carousel .carousel-container{height:100%;left:0;position:relative}.carousel .carousel-container .carousel-item{-webkit-animation:carousel-slideout 1s ease-in-out 1;animation:carousel-slideout 1s ease-in-out 1;height:100%;left:0;margin:0;opacity:0;position:absolute;top:0;width:100%}.carousel .carousel-container .carousel-item:hover .item-next,.carousel .carousel-container .carousel-item:hover .item-prev{opacity:1}.carousel .carousel-container .item-next,.carousel .carousel-container .item-prev{background:rgba(231,233,237,.25);border-color:rgba(231,233,237,.5);color:#e7e9ed;opacity:0;position:absolute;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);transition:all .4s ease;z-index:200}.carousel .carousel-container .item-prev{left:2rem}.carousel .carousel-container .item-next{right:2rem}.carousel .carousel-locator:nth-of-type(1):checked~.carousel-container .carousel-item:nth-of-type(1),.carousel .carousel-locator:nth-of-type(2):checked~.carousel-container .carousel-item:nth-of-type(2),.carousel .carousel-locator:nth-of-type(3):checked~.carousel-container .carousel-item:nth-of-type(3),.carousel .carousel-locator:nth-of-type(4):checked~.carousel-container .carousel-item:nth-of-type(4){-webkit-animation:carousel-slidein .75s ease-in 1;animation:carousel-slidein .75s ease-in 1;opacity:1;z-index:100}.carousel .carousel-locator:nth-of-type(1):checked~.carousel-nav .nav-item:nth-of-type(1),.carousel .carousel-locator:nth-of-type(2):checked~.carousel-nav .nav-item:nth-of-type(2),.carousel .carousel-locator:nth-of-type(3):checked~.carousel-nav .nav-item:nth-of-type(3),.carousel .carousel-locator:nth-of-type(4):checked~.carousel-nav .nav-item:nth-of-type(4){color:#e7e9ed}.carousel .carousel-nav{bottom:1rem;display:-webkit-flex;display:flex;display:-ms-flexbox;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;left:50%;position:absolute;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);width:20rem;z-index:200}.carousel .carousel-nav .nav-item{color:rgba(231,233,237,.5);display:block;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;height:4rem;margin:.4rem;max-width:5rem;position:relative}.carousel .carousel-nav .nav-item::before{background:currentColor;content:"";display:block;height:.3rem;position:absolute;top:2rem;width:100%}@supports (object-fit:cover){.carousel-item img{height:100%;object-fit:cover;width:100%}}@-webkit-keyframes carousel-slidein{0%{-webkit-transform:translateX(100%);transform:translateX(100%)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes carousel-slidein{0%{-webkit-transform:translateX(100%);transform:translateX(100%)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes carousel-slideout{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:1;-webkit-transform:translateX(-50%);transform:translateX(-50%)}}@keyframes carousel-slideout{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:1;-webkit-transform:translateX(-50%);transform:translateX(-50%)}}.meter{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f8f9fa;border:0;border-radius:.2rem;display:block;height:1.6rem;width:100%}.meter::-webkit-meter-inner-element{display:block}.meter::-webkit-meter-bar,.meter::-webkit-meter-even-less-good-value,.meter::-webkit-meter-optimum-value,.meter::-webkit-meter-suboptimum-value{border-radius:.2rem}.meter::-webkit-meter-bar{background:#f8f9fa}.meter::-webkit-meter-optimum-value{background:#32b643}.meter::-webkit-meter-suboptimum-value{background:#ffb700}.meter::-webkit-meter-even-less-good-value{background:#e85600}.meter:-moz-meter-optimum,.meter:-moz-meter-sub-optimum,.meter:-moz-meter-sub-sub-optimum,.meter::-moz-meter-bar{border-radius:.2rem}.meter:-moz-meter-optimum::-moz-meter-bar{background:#32b643}.meter:-moz-meter-sub-optimum::-moz-meter-bar{background:#ffb700}.meter:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:#e85600}.parallax{display:block;height:auto;position:relative;width:auto}.parallax .parallax-content{box-shadow:0 2rem 4.2rem rgba(69,77,93,.3);height:auto;-webkit-transform:perspective(100rem);transform:perspective(100rem);-webkit-transform-style:preserve-3d;transform-style:preserve-3d;transition:all .4s ease;width:100%}.parallax .parallax-content::before{content:"";display:block;height:100%;left:0;position:absolute;top:0;width:100%}.parallax .parallax-front{-webkit-align-items:center;align-items:center;color:#fff;display:flex;display:-ms-flexbox;display:-webkit-flex;-ms-flex-align:center;-ms-flex-pack:center;height:100%;-webkit-justify-content:center;justify-content:center;left:0;position:absolute;text-align:center;text-shadow:0 0 3rem rgba(69,77,93,.95);top:0;-webkit-transform:translateZ(10rem);transform:translateZ(10rem);transition:all .4s ease;width:100%;z-index:1}.parallax .parallax-top-left{height:50%;left:0;position:absolute;top:0;width:50%;z-index:300}.parallax .parallax-top-left:hover~.parallax-content{-webkit-transform:perspective(100rem) rotateX(-3deg) rotateY(3deg);transform:perspective(100rem) rotateX(-3deg) rotateY(3deg)}.parallax .parallax-top-left:hover~.parallax-content::before{background:linear-gradient(135deg,rgba(255,255,255,.25) 0,rgba(255,255,255,0) 50%)}.parallax .parallax-top-left:hover~.parallax-content .parallax-front{-webkit-transform:translate3d(-.4rem,-.4rem,10rem);transform:translate3d(-.4rem,-.4rem,10rem)}.parallax .parallax-top-right{height:50%;position:absolute;right:0;top:0;width:50%;z-index:300}.parallax .parallax-top-right:hover~.parallax-content{-webkit-transform:perspective(100rem) rotateX(-3deg) rotateY(-3deg);transform:perspective(100rem) rotateX(-3deg) rotateY(-3deg)}.parallax .parallax-top-right:hover~.parallax-content::before{background:linear-gradient(-135deg,rgba(255,255,255,.25) 0,rgba(255,255,255,0) 50%)}.parallax .parallax-top-right:hover~.parallax-content .parallax-front{-webkit-transform:translate3d(.4rem,-.4rem,10rem);transform:translate3d(.4rem,-.4rem,10rem)}.parallax .parallax-bottom-left{bottom:0;height:50%;left:0;position:absolute;width:50%;z-index:300}.parallax .parallax-bottom-left:hover~.parallax-content{-webkit-transform:perspective(100rem) rotateX(3deg) rotateY(3deg);transform:perspective(100rem) rotateX(3deg) rotateY(3deg)}.parallax .parallax-bottom-left:hover~.parallax-content::before{background:linear-gradient(45deg,rgba(255,255,255,.25) 0,rgba(255,255,255,0) 50%)}.parallax .parallax-bottom-left:hover~.parallax-content .parallax-front{-webkit-transform:translate3d(-.4rem,.4rem,10rem);transform:translate3d(-.4rem,.4rem,10rem)}.parallax .parallax-bottom-right{bottom:0;height:50%;position:absolute;right:0;width:50%;z-index:300}.parallax .parallax-bottom-right:hover~.parallax-content{-webkit-transform:perspective(100rem) rotateX(3deg) rotateY(-3deg);transform:perspective(100rem) rotateX(3deg) rotateY(-3deg)}.parallax .parallax-bottom-right:hover~.parallax-content::before{background:linear-gradient(-45deg,rgba(255,255,255,.25) 0,rgba(255,255,255,0) 50%)}.parallax .parallax-bottom-right:hover~.parallax-content .parallax-front{-webkit-transform:translate3d(.4rem,.4rem,10rem);transform:translate3d(.4rem,.4rem,10rem)}.progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#f0f1f4;border:0;border-radius:.2rem;color:#5764c6;height:.4rem;position:relative;width:100%}.progress::-webkit-progress-bar{background:0 0;border-radius:.2rem}.progress::-webkit-progress-value{background:#5764c6;border-radius:.2rem}.progress::-moz-progress-bar{background:#5764c6;border-radius:.2rem}.progress:indeterminate{-webkit-animation:progress-indeterminate 1.5s linear infinite;animation:progress-indeterminate 1.5s linear infinite;background:#f0f1f4 linear-gradient(to right,#5764c6 30%,#f0f1f4 30%) top left/150% 150% no-repeat}.progress:indeterminate::-moz-progress-bar{background:0 0}@-webkit-keyframes progress-indeterminate{0%{background-position:200% 0}100%{background-position:-200% 0}}@keyframes progress-indeterminate{0%{background-position:200% 0}100%{background-position:-200% 0}}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;display:block;height:2.4rem;width:100%}.slider::-webkit-slider-thumb{-webkit-appearance:none;background:#5764c6;border:0;border-radius:50%;height:1.2rem;margin-top:-.4rem;transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:1.2rem}.slider::-moz-range-thumb{background:#5764c6;border:0;border-radius:50%;height:1.2rem;transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:1.2rem}.slider::-ms-thumb{background:#5764c6;border:0;border-radius:50%;height:1.2rem;transition:transform .2s ease,-webkit-transform .2s ease;transition:transform .2s ease;transition:-webkit-transform .2s ease;width:1.2rem}.slider:active::-webkit-slider-thumb{-webkit-transform:scale(1.25);transform:scale(1.25)}.slider:active::-moz-range-thumb{transform:scale(1.25)}.slider:active::-ms-thumb{-ms-transform:scale(1.25);transform:scale(1.25)}.slider.disabled::-webkit-slider-thumb,.slider:disabled::-webkit-slider-thumb{background:#e7e9ed;-webkit-transform:scale(1);transform:scale(1)}.slider.disabled::-moz-range-thumb,.slider:disabled::-moz-range-thumb{background:#e7e9ed;transform:scale(1)}.slider.disabled::-ms-thumb,.slider:disabled::-ms-thumb{background:#e7e9ed;-ms-transform:scale(1);transform:scale(1)}.slider::-webkit-slider-runnable-track{background:#f0f1f4;border-radius:.2rem;height:.4rem;width:100%}.slider::-moz-range-track{background:#f0f1f4;border-radius:.2rem;height:.4rem;width:100%}.slider::-ms-track{background:#f0f1f4;border-radius:.2rem;height:.4rem;width:100%}.slider::-ms-fill-lower{background:#5764c6}
\ No newline at end of file
diff --git a/docs/experimentals.html b/docs/experimentals.html
index 4f3f5fa..5a5cdec 100644
--- a/docs/experimentals.html
+++ b/docs/experimentals.html
@@ -358,14 +358,16 @@
                 <div class="parallax-bottom-left"></div>
                 <div class="parallax-bottom-right"></div>
                 <div class="parallax-content">
-                  <img src="img/osx-yosemite-2.jpg" class="img-responsive rounded" alt="macOS Yosemite Wallpaper" />
+                  <div class="parallax-front">
+                    <h2>tvOS parallax demo</h2>
+                  </div>
+                  <div class="parallax-back">
+                    <img src="img/osx-yosemite-2.jpg" class="img-responsive rounded" alt="macOS Yosemite Wallpaper" />
+                  </div>
                 </div>
               </div>
             </div>
           </div>
-          <section class="notes">
-            <p></p>
-          </section>
 
 <!-- parallax example -->
 <pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;parallax&quot;</span>&gt;
@@ -374,7 +376,12 @@
   &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;parallax-bottom-left&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
   &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;parallax-bottom-right&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
   &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;parallax-content&quot;</span>&gt;
-    &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/osx-el-capitan.jpg&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;img-responsive rounded&quot;</span> <span class="atn">alt</span>=<span class="atv">&quot;macOS El Capitan Wallpaper&quot;</span> /&gt;
+    &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;parallax-front&quot;</span>&gt;
+      &lt;<span class="tag">h2</span>&gt;tvOS parallax demo&lt;<span class="tag">/h2</span>&gt;
+    &lt;<span class="tag">/div</span>&gt;
+    &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;parallax-back&quot;</span>&gt;
+      &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/osx-el-capitan.jpg&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;img-responsive rounded&quot;</span> <span class="atn">alt</span>=<span class="atv">&quot;macOS El Capitan Wallpaper&quot;</span> /&gt;
+    &lt;<span class="tag">/div</span>&gt;
   &lt;<span class="tag">/div</span>&gt;
 &lt;<span class="tag">/div</span>&gt;
 </code></pre>
diff --git a/docs/src/docs.less b/docs/src/docs.less
index a458b5d..ee7de6b 100644
--- a/docs/src/docs.less
+++ b/docs/src/docs.less
@@ -49,7 +49,7 @@
   }
 
   .navbar-brand {
-    color: @body-font-color;
+    color: lighten(@body-font-color, 5%);
   }
 
   .btn-link {
diff --git a/src/parallax.less b/src/parallax.less
index 7d70772..54335e7 100644
--- a/src/parallax.less
+++ b/src/parallax.less
@@ -1,5 +1,7 @@
 // Parallax
 @parallax-deg: 3deg;
+@parallax-offset: .4rem;
+@parallax-offset-z: 10rem;
 
 .parallax {
   display: block;
@@ -8,9 +10,9 @@
   width: auto;
 
   .parallax-content {
-    .shadow-variant(2rem);
     height: auto;
-    transform: perspective(50rem);
+    .shadow-variant(2rem);
+    transform: perspective(100rem);
     transform-style: preserve-3d;
     transition: all .4s ease;
     width: 100%;
@@ -26,17 +28,38 @@
     }
   }
 
+  .parallax-front {
+    align-items: center;
+    color: @light-color;
+    display: flex;
+    height: 100%;
+    justify-content: center;
+    left: 0;
+    position: absolute;
+    text-align: center;
+    text-shadow: 0 0 3rem fade(@dark-color, 95%);
+    top: 0;
+    transform: translateZ(@parallax-offset-z);
+    transition: all .4s ease;
+    width: 100%;
+    z-index: @zindex-0;
+  }
+
   .parallax-top-left {
     .parallax-dir();
     left: 0;
     top: 0;
 
     &:hover ~ .parallax-content {
-      transform: perspective(50rem) rotateX(@parallax-deg) rotateY(-@parallax-deg);
+      transform: perspective(100rem) rotateX(-@parallax-deg) rotateY(@parallax-deg);
 
       &::before {
         background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 50%);
       }
+
+      .parallax-front {
+        transform: translate3d(-@parallax-offset, -@parallax-offset, @parallax-offset-z);
+      }
     }
   }
 
@@ -46,11 +69,15 @@
     top: 0;
 
     &:hover ~ .parallax-content {
-      transform: perspective(50rem) rotateX(@parallax-deg) rotateY(@parallax-deg);
+      transform: perspective(100rem) rotateX(-@parallax-deg) rotateY(-@parallax-deg);
 
       &::before {
         background: linear-gradient(-135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 50%);
       }
+
+      .parallax-front {
+        transform: translate3d(@parallax-offset, -@parallax-offset, @parallax-offset-z);
+      }
     }
   }
 
@@ -60,11 +87,15 @@
     left: 0;
 
     &:hover ~ .parallax-content {
-      transform: perspective(50rem) rotateX(-@parallax-deg) rotateY(-@parallax-deg);
+      transform: perspective(100rem) rotateX(@parallax-deg) rotateY(@parallax-deg);
 
       &::before {
         background: linear-gradient(45deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 50%);
       }
+
+      .parallax-front {
+        transform: translate3d(-@parallax-offset, @parallax-offset, @parallax-offset-z);
+      }
     }
   }
 
@@ -74,11 +105,15 @@
     right: 0;
 
     &:hover ~ .parallax-content {
-      transform: perspective(50rem) rotateX(-@parallax-deg) rotateY(@parallax-deg);
+      transform: perspective(100rem) rotateX(@parallax-deg) rotateY(-@parallax-deg);
 
       &::before {
         background: linear-gradient(-45deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 50%);
       }
+
+      .parallax-front {
+        transform: translate3d(@parallax-offset, @parallax-offset, @parallax-offset-z);
+      }
     }
   }
 }
@@ -87,5 +122,5 @@
   height: 50%;
   position: absolute;
   width: 50%;
-  z-index: @zindex-0;
+  z-index: @zindex-3;
 }
-- 
cgit v1.3.1-23-gd82d