@thejaredwilcurt/csslop 0.0.8 → 0.0.9

package/site/real/unfold-v0.0.0.css

@@ -0,0 +1,3569 @@
+/* Unfold - v0.0.0 - CC-BY-SA-3.0 */
+@import url("http://fonts.googleapis.com/css?family=Rambla:400,700,400italic|Crete+Round|Nunito:400,700|Quando|Andada");
+/* Libraries and Dependencies ---------------------------------------------- */
+/* Normalize --------------------------------------------------------------- */
+/*! normalize.css v1.0.1 | MIT License | git.io/normalize */
+/* ==========================================================================
+   HTML5 display definitions
+   ========================================================================== */
+/*
+ * Corrects `block` display not defined in IE 6/7/8/9 and Firefox 3.
+ */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+nav,
+section,
+summary {
+  display: block;
+}
+
+/*
+ * Corrects `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
+ */
+audio,
+canvas,
+video {
+  display: inline-block;
+  *display: inline;
+  *zoom: 1;
+}
+
+/*
+ * Prevents modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/*
+ * Addresses styling for `hidden` attribute not present in IE 7/8/9, Firefox 3,
+ * and Safari 4.
+ * Known issue: no IE 6 support.
+ */
+[hidden] {
+  display: none;
+}
+
+/* ==========================================================================
+   Base
+   ========================================================================== */
+/*
+ * 1. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using
+ *    `em` units.
+ * 2. Prevents iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */
+html {
+  font-size: 100%;
+  /* 1 */
+  -webkit-text-size-adjust: 100%;
+  /* 2 */
+  -ms-text-size-adjust: 100%;
+  /* 2 */
+}
+
+/*
+ * Addresses `font-family` inconsistency between `textarea` and other form
+ * elements.
+ */
+html,
+button,
+input,
+select,
+textarea {
+  font-family: sans-serif;
+}
+
+/*
+ * Addresses margins handled incorrectly in IE 6/7.
+ */
+body {
+  margin: 0;
+}
+
+/* ==========================================================================
+   Links
+   ========================================================================== */
+/*
+ * Addresses `outline` inconsistency between Chrome and other browsers.
+ */
+a:focus {
+  outline: thin dotted;
+}
+
+/*
+ * Improves readability when focused and also mouse hovered in all browsers.
+ */
+a:active,
+a:hover {
+  outline: 0;
+}
+
+/* ==========================================================================
+   Typography
+   ========================================================================== */
+/*
+ * Addresses font sizes and margins set differently in IE 6/7.
+ * Addresses font sizes within `section` and `article` in Firefox 4+, Safari 5,
+ * and Chrome.
+ */
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 400;
+}
+
+h1 {
+  font-size: 3em;
+  margin: 0.67em 0;
+}
+
+h2 {
+  font-size: 2em;
+  margin: 0.83em 0;
+}
+
+h3 {
+  font-size: 1.5em;
+  margin: 1em 0;
+}
+
+h4 {
+  font-size: 1.17em;
+  margin: 1.33em 0;
+}
+
+h5 {
+  font-size: 1em;
+  margin: 1.67em 0;
+}
+
+h6 {
+  font-size: 0.95em;
+  margin: 2em 0;
+}
+
+div {
+  -webkit-font-smoothing: antialiased;
+}
+
+/*
+ * Addresses styling not present in IE 7/8/9, Safari 5, and Chrome.
+ */
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+
+/*
+ * Addresses style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
+ */
+b,
+strong {
+  font-weight: bold;
+}
+
+blockquote {
+  margin: 1em 40px;
+}
+
+/*
+ * Addresses styling not present in Safari 5 and Chrome.
+ */
+dfn {
+  font-style: italic;
+}
+
+/*
+ * Addresses styling not present in IE 6/7/8/9.
+ */
+mark {
+  background: #ff0;
+  color: #000;
+}
+
+/*
+ * Addresses margins set differently in IE 6/7.
+ */
+p,
+pre {
+  margin: 0 0 1em 0;
+}
+
+/*
+ * Corrects font family set oddly in IE 6, Safari 4/5, and Chrome.
+ */
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, serif;
+  _font-family: 'courier new', monospace;
+  font-size: 1em;
+}
+
+/*
+ * Improves readability of pre-formatted text in all browsers.
+ */
+pre {
+  white-space: pre;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+/*
+ * Addresses CSS quotes not supported in IE 6/7.
+ */
+q {
+  quotes: none;
+}
+
+/*
+ * Addresses `quotes` property not supported in Safari 4.
+ */
+q:before,
+q:after {
+  content: '';
+  content: none;
+}
+
+/*
+ * Addresses inconsistent and variable font size in all browsers.
+ */
+small {
+  font-size: 80%;
+}
+
+/*
+ * Prevents `sub` and `sup` affecting `line-height` in all browsers.
+ */
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+/* ==========================================================================
+   Lists
+   ========================================================================== */
+/*
+ * Addresses margins set differently in IE 6/7.
+ */
+dl,
+menu,
+ol,
+ul {
+  margin: 1em 0;
+}
+
+dd {
+  margin: 0 0 0 40px;
+}
+
+/*
+ * Addresses paddings set differently in IE 6/7.
+ */
+menu,
+ol,
+ul {
+  padding: 0 0 0 40px;
+}
+
+/*
+ * Corrects list images handled incorrectly in IE 7.
+ */
+nav ul,
+nav ol {
+  list-style: none;
+  list-style-image: none;
+}
+
+/* ==========================================================================
+   Embedded content
+   ========================================================================== */
+/*
+ * 1. Removes border when inside `a` element in IE 6/7/8/9 and Firefox 3.
+ * 2. Improves image quality when scaled in IE 7.
+ */
+img {
+  border: 0;
+  /* 1 */
+  -ms-interpolation-mode: bicubic;
+  /* 2 */
+}
+
+/*
+ * Corrects overflow displayed oddly in IE 9.
+ */
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* ==========================================================================
+   Figures
+   ========================================================================== */
+/*
+ * Addresses margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
+ */
+figure {
+  margin: 0;
+}
+
+/* ==========================================================================
+   Forms
+   ========================================================================== */
+/*
+ * Corrects margin displayed oddly in IE 6/7.
+ */
+form {
+  margin: 0;
+}
+
+/*
+ * Define consistent border, margin, and padding.
+ */
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+/*
+ * 1. Corrects color not being inherited in IE 6/7/8/9.
+ * 2. Corrects text not wrapping in Firefox 3.
+ * 3. Corrects alignment displayed oddly in IE 6/7.
+ */
+legend {
+  border: 0;
+  /* 1 */
+  padding: 0;
+  white-space: normal;
+  /* 2 */
+  *margin-left: -7px;
+  /* 3 */
+}
+
+/*
+ * 1. Corrects font size not being inherited in all browsers.
+ * 2. Addresses margins set differently in IE 6/7, Firefox 3+, Safari 5,
+ *    and Chrome.
+ * 3. Improves appearance and consistency in all browsers.
+ */
+button,
+input,
+select,
+textarea {
+  font-size: 100%;
+  /* 1 */
+  margin: 0;
+  /* 2 */
+  vertical-align: baseline;
+  /* 3 */
+  *vertical-align: middle;
+  /* 3 */
+}
+
+/*
+ * Addresses Firefox 3+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+button,
+input {
+  line-height: normal;
+}
+
+/*
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Corrects inability to style clickable `input` types in iOS.
+ * 3. Improves usability and consistency of cursor style between image-type
+ *    `input` and others.
+ * 4. Removes inner spacing in IE 7 without affecting normal text inputs.
+ *    Known issue: inner spacing remains in IE 6.
+ */
+button,
+html input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+  -webkit-appearance: button;
+  /* 2 */
+  cursor: pointer;
+  /* 3 */
+  *overflow: visible;
+  /* 4 */
+}
+
+/*
+ * Re-set default cursor for disabled elements.
+ */
+button[disabled],
+input[disabled] {
+  cursor: default;
+}
+
+/*
+ * 1. Addresses box sizing set to content-box in IE 8/9.
+ * 2. Removes excess padding in IE 8/9.
+ * 3. Removes excess padding in IE 7.
+ *    Known issue: excess padding remains in IE 6.
+ */
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box;
+  /* 1 */
+  padding: 0;
+  /* 2 */
+  *height: 13px;
+  /* 3 */
+  *width: 13px;
+  /* 3 */
+}
+
+/*
+ * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
+ * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
+ *    (include `-moz` to future-proof).
+ */
+input[type="search"] {
+  -webkit-appearance: textfield;
+  /* 1 */
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box;
+  /* 2 */
+  box-sizing: content-box;
+}
+
+/*
+ * Removes inner padding and search cancel button in Safari 5 and Chrome
+ * on OS X.
+ */
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/*
+ * Removes inner padding and border in Firefox 3+.
+ */
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+/*
+ * 1. Removes default vertical scrollbar in IE 6/7/8/9.
+ * 2. Improves readability and alignment in all browsers.
+ */
+textarea {
+  overflow: auto;
+  /* 1 */
+  vertical-align: top;
+  /* 2 */
+}
+
+/* ==========================================================================
+   Tables
+   ========================================================================== */
+/*
+ * Remove most spacing between table cells.
+ */
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+/* Global styles ----------------------------------------------------------- */
+.it, span, .cube .side, #s1 .instructions, #s3 .sandbox1 h2, #s6 .sandbox .cube.labels .back:before {
+  display: inline-block;
+}
+
+.show {
+  opacity: 1 !important;
+}
+
+.hide {
+  opacity: 0 !important;
+}
+
+* {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+body {
+  padding: 1em;
+  background: #e7e7e7;
+  color: #444;
+}
+
+a {
+  color: #335577;
+  text-decoration: none;
+  font-weight: 700;
+}
+
+main {
+  width: 100%;
+  font-family: "Rambla", sans-serif;
+  font-size: 2.4em;
+}
+main * {
+  -webkit-transition: all 0.25s ease-in-out;
+  -moz-transition: all 0.25s ease-in-out;
+  -ms-transition: all 0.25s ease-in-out;
+  -o-transition: all 0.25s ease-in-out;
+  transition: all 0.25s ease-in-out;
+}
+main article {
+  width: 100%;
+  height: 960px;
+  padding: 1em;
+  margin: 16% 0;
+  box-shadow: 0 5px 10px rgba(51, 51, 51, 0.1);
+  background: #fff;
+  overflow: hidden;
+  -webkit-perspective: 600px;
+  -moz-perspective: 600px;
+  -ms-perspective: 600px;
+  -o-perspective: 600px;
+  perspective: 600px;
+}
+main article:nth-of-type(1) {
+  margin-top: 0;
+}
+main article:last-child {
+  margin-bottom: 0.5em;
+}
+
+.no-touch nav {
+  display: none;
+}
+
+.touch nav a {
+  display: block;
+  position: fixed;
+  z-index: 100;
+  top: 60%;
+  padding: 0.4em 1em;
+  background: rgba(0, 0, 0, 0.1);
+}
+.touch nav .back {
+  left: 0;
+}
+.touch nav .next {
+  right: 0;
+}
+
+footer {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  padding: .4em .6em;
+  background: #fff;
+  opacity: .4;
+  cursor: default;
+  -webkit-transition: all 0.25s ease-in-out;
+  -moz-transition: all 0.25s ease-in-out;
+  -ms-transition: all 0.25s ease-in-out;
+  -o-transition: all 0.25s ease-in-out;
+  transition: all 0.25s ease-in-out;
+}
+footer:hover {
+  opacity: 1;
+}
+
+p.intro {
+  margin-top: 2em;
+}
+
+dl {
+  margin: 0 2em;
+}
+dl dt {
+  margin-top: 1em;
+}
+
+.dim {
+  opacity: .32;
+}
+
+span {
+  -webkit-transition: all 0.2s ease-in-out;
+  -moz-transition: all 0.2s ease-in-out;
+  -ms-transition: all 0.2s ease-in-out;
+  -o-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
+}
+span.active {
+  -webkit-transform: rotateX(0) rotateY(0) rotateZ(0) translateX(0) translateY(0) translateZ(0em) !important;
+  -moz-transform: rotateX(0) rotateY(0) rotateZ(0) translateX(0) translateY(0) translateZ(0em) !important;
+  -ms-transform: rotateX(0) rotateY(0) rotateZ(0) translateX(0) translateY(0) translateZ(0em) !important;
+  -o-transform: rotateX(0) rotateY(0) rotateZ(0) translateX(0) translateY(0) translateZ(0em) !important;
+  transform: rotateX(0) rotateY(0) rotateZ(0) translateX(0) translateY(0) translateZ(0em) !important;
+}
+
+.de {
+  width: 200px;
+  height: 200px;
+  background: #9ab;
+  border: 8px solid #345;
+  border-radius: 3px;
+  opacity: 0;
+  position: relative;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+  -webkit-transition: all 0.25s ease-in-out;
+  -moz-transition: all 0.25s ease-in-out;
+  -ms-transition: all 0.25s ease-in-out;
+  -o-transition: all 0.25s ease-in-out;
+  transition: all 0.25s ease-in-out;
+}
+.de.circle {
+  -webkit-border-radius: 100px;
+  -moz-border-radius: 100px;
+  -ms-border-radius: 100px;
+  -o-border-radius: 100px;
+  border-radius: 100px;
+}
+
+.f-left {
+  float: left;
+  clear: left;
+}
+
+.f-right {
+  float: right;
+  clear: right;
+}
+
+.cube,
+.cube .side {
+  width: 5em;
+  height: 5em;
+  background: rgba(153, 170, 187, 0.8);
+  -webkit-box-shadow: inset 0 0 0 5px #334455, 0 0 1px 1px #334455;
+  -moz-box-shadow: inset 0 0 0 5px #334455, 0 0 1px 1px #334455;
+  box-shadow: inset 0 0 0 5px #334455, 0 0 1px 1px #334455;
+  border-radius: 3px;
+  -webkit-transform-style: preserve-3d;
+  -moz-transform-style: preserve-3d;
+  -ms-transform-style: preserve-3d;
+  -o-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+}
+
+.cube {
+  -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0em) translateY(0em) translateZ(0em);
+  -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0em) translateY(0em) translateZ(0em);
+  -ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0em) translateY(0em) translateZ(0em);
+  -o-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0em) translateY(0em) translateZ(0em);
+  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0em) translateY(0em) translateZ(0em);
+}
+.cube .side {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.cube .top {
+  top: -5em;
+  -webkit-transform: rotateX(90deg);
+  -moz-transform: rotateX(90deg);
+  -ms-transform: rotateX(90deg);
+  -o-transform: rotateX(90deg);
+  transform: rotateX(90deg);
+  -webkit-transform-origin: 50% 100%;
+  -moz-transform-origin: 50% 100%;
+  -ms-transform-origin: 50% 100%;
+  -o-transform-origin: 50% 100%;
+  transform-origin: 50% 100%;
+}
+.cube .left {
+  left: -5em;
+  -webkit-transform: rotateY(-90deg);
+  -moz-transform: rotateY(-90deg);
+  -ms-transform: rotateY(-90deg);
+  -o-transform: rotateY(-90deg);
+  transform: rotateY(-90deg);
+  -webkit-transform-origin: 100% 50%;
+  -moz-transform-origin: 100% 50%;
+  -ms-transform-origin: 100% 50%;
+  -o-transform-origin: 100% 50%;
+  transform-origin: 100% 50%;
+}
+.cube .right {
+  left: 5em;
+  -webkit-transform: rotateY(90deg);
+  -moz-transform: rotateY(90deg);
+  -ms-transform: rotateY(90deg);
+  -o-transform: rotateY(90deg);
+  transform: rotateY(90deg);
+  -webkit-transform-origin: 0% 50%;
+  -moz-transform-origin: 0% 50%;
+  -ms-transform-origin: 0% 50%;
+  -o-transform-origin: 0% 50%;
+  transform-origin: 0% 50%;
+}
+.cube .bottom {
+  top: 5em;
+  -webkit-transform: rotateX(-90deg);
+  -moz-transform: rotateX(-90deg);
+  -ms-transform: rotateX(-90deg);
+  -o-transform: rotateX(-90deg);
+  transform: rotateX(-90deg);
+  -webkit-transform-origin: 50% 0%;
+  -moz-transform-origin: 50% 0%;
+  -ms-transform-origin: 50% 0%;
+  -o-transform-origin: 50% 0%;
+  transform-origin: 50% 0%;
+}
+.cube .bottom .back {
+  top: 5em;
+  -webkit-transform: rotateX(-90deg);
+  -moz-transform: rotateX(-90deg);
+  -ms-transform: rotateX(-90deg);
+  -o-transform: rotateX(-90deg);
+  transform: rotateX(-90deg);
+  -webkit-transform-origin: 50% 0%;
+  -moz-transform-origin: 50% 0%;
+  -ms-transform-origin: 50% 0%;
+  -o-transform-origin: 50% 0%;
+  transform-origin: 50% 0%;
+}
+
+/* Slides ------------------------------------------------------------------ */
+/*
+ * Title slide
+ */
+#s1 h1 {
+  font-size: 2.5em;
+  line-height: .9em;
+  position: absolute;
+  top: 1em;
+  left: 2em;
+}
+#s1 h1 .fold .un {
+  -webkit-transform-origin: 100% 100%;
+  -moz-transform-origin: 100% 100%;
+  -ms-transform-origin: 100% 100%;
+  -o-transform-origin: 100% 100%;
+  transform-origin: 100% 100%;
+  -webkit-transform: rotateZ(-180deg) translateX(-0.04em);
+  -moz-transform: rotateZ(-180deg) translateX(-0.04em);
+  -ms-transform: rotateZ(-180deg) translateX(-0.04em);
+  -o-transform: rotateZ(-180deg) translateX(-0.04em);
+  transform: rotateZ(-180deg) translateX(-0.04em);
+}
+#s1 h1 .fold .ing {
+  -webkit-transform-origin: 0% 100%;
+  -moz-transform-origin: 0% 100%;
+  -ms-transform-origin: 0% 100%;
+  -o-transform-origin: 0% 100%;
+  transform-origin: 0% 100%;
+  -webkit-transform: rotateZ(90deg) translateX(0.07em) translateY(0.43em);
+  -moz-transform: rotateZ(90deg) translateX(0.07em) translateY(0.43em);
+  -ms-transform: rotateZ(90deg) translateX(0.07em) translateY(0.43em);
+  -o-transform: rotateZ(90deg) translateX(0.07em) translateY(0.43em);
+  transform: rotateZ(90deg) translateX(0.07em) translateY(0.43em);
+}
+#s1 h1 .the .b {
+  -webkit-transform-origin: -6% 94%;
+  -moz-transform-origin: -6% 94%;
+  -ms-transform-origin: -6% 94%;
+  -o-transform-origin: -6% 94%;
+  transform-origin: -6% 94%;
+  -webkit-transform: rotateZ(180deg);
+  -moz-transform: rotateZ(180deg);
+  -ms-transform: rotateZ(180deg);
+  -o-transform: rotateZ(180deg);
+  transform: rotateZ(180deg);
+}
+#s1 h1 .the .b .ox {
+  -webkit-transform-origin: -43% 48%;
+  -moz-transform-origin: -43% 48%;
+  -ms-transform-origin: -43% 48%;
+  -o-transform-origin: -43% 48%;
+  transform-origin: -43% 48%;
+  -webkit-transform: rotateZ(-90deg) translateY(0.14em);
+  -moz-transform: rotateZ(-90deg) translateY(0.14em);
+  -ms-transform: rotateZ(-90deg) translateY(0.14em);
+  -o-transform: rotateZ(-90deg) translateY(0.14em);
+  transform: rotateZ(-90deg) translateY(0.14em);
+}
+#s1 h1 .the .m {
+  -webkit-transform-origin: 0% 94%;
+  -moz-transform-origin: 0% 94%;
+  -ms-transform-origin: 0% 94%;
+  -o-transform-origin: 0% 94%;
+  transform-origin: 0% 94%;
+  -webkit-transform: rotateZ(90deg) translateY(3.3em);
+  -moz-transform: rotateZ(90deg) translateY(3.3em);
+  -ms-transform: rotateZ(90deg) translateY(3.3em);
+  -o-transform: rotateZ(90deg) translateY(3.3em);
+  transform: rotateZ(90deg) translateY(3.3em);
+}
+#s1 h1 .the .m .odel {
+  -webkit-transform-origin: 0% 0%;
+  -moz-transform-origin: 0% 0%;
+  -ms-transform-origin: 0% 0%;
+  -o-transform-origin: 0% 0%;
+  transform-origin: 0% 0%;
+  -webkit-transform: rotateY(90deg);
+  -moz-transform: rotateY(90deg);
+  -ms-transform: rotateY(90deg);
+  -o-transform: rotateY(90deg);
+  transform: rotateY(90deg);
+}
+#s1 h2 {
+  font-size: 1.25em;
+  position: absolute;
+  bottom: 32%;
+  right: 19%;
+  -webkit-transform-style: preserve-3d;
+  -moz-transform-style: preserve-3d;
+  -ms-transform-style: preserve-3d;
+  -o-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+}
+.csstransforms3d #s1 h2 span {
+  -webkit-transition: 0.6s;
+  -moz-transition: 0.6s;
+  -ms-transition: 0.6s;
+  -o-transition: 0.6s;
+  transition: 0.6s;
+  -webkit-transform: rotateY(16deg) translateX(-5.2em) translateY(-1.8em) translateZ(14em);
+  -moz-transform: rotateY(16deg) translateX(-5.2em) translateY(-1.8em) translateZ(14em);
+  -ms-transform: rotateY(16deg) translateX(-5.2em) translateY(-1.8em) translateZ(14em);
+  -o-transform: rotateY(16deg) translateX(-5.2em) translateY(-1.8em) translateZ(14em);
+  transform: rotateY(16deg) translateX(-5.2em) translateY(-1.8em) translateZ(14em);
+  -webkit-transform-style: preserve-3d;
+  -moz-transform-style: preserve-3d;
+  -ms-transform-style: preserve-3d;
+  -o-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+}
+#s1 .warning {
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  color: #a00;
+  text-align: center;
+  background: url('/img/bad-time.jpg?1382325794') no-repeat 10% 70%;
+}
+.no-csstransforms3d #s1 .warning.active {
+  opacity: 1;
+}
+#s1 .instructions {
+  opacity: 1;
+  -webkit-transform: translateY(-4em);
+  -moz-transform: translateY(-4em);
+  -ms-transform: translateY(-4em);
+  -o-transform: translateY(-4em);
+  transform: translateY(-4em);
+  -webkit-animation: throbber 2s linear 4;
+  -moz-animation: throbber 2s linear 4;
+  -ms-animation: throbber 2s linear 4;
+  -o-animation: throbber 2s linear 4;
+  animation: throbber 2s linear 4;
+}
+.no-touch #s1 .instructions {
+  display: block;
+}
+.touch #s1 .instructions {
+  display: none;
+}
+#s1 .instructions.active {
+  opacity: 0;
+  -webkit-animation: none;
+  -moz-animation: none;
+  -ms-animation: none;
+  -o-animation: none;
+  animation: none;
+  -webkit-transition: opacity 1s linear;
+  -moz-transition: opacity 1s linear;
+  -ms-transition: opacity 1s linear;
+  -o-transition: opacity 1s linear;
+  transition: opacity 1s linear;
+}
+.js #s1 .instructions .silent {
+  display: none;
+}
+
+@-moz-keyframes throbber {
+  50% {
+    opacity: .5;
+  }
+}
+
+@-webkit-keyframes throbber {
+  50% {
+    opacity: .5;
+  }
+}
+
+@-o-keyframes throbber {
+  50% {
+    opacity: .5;
+  }
+}
+
+@-ms-keyframes throbber {
+  50% {
+    opacity: .5;
+  }
+}
+
+@keyframes throbber {
+  50% {
+    opacity: .5;
+  }
+}
+
+/*
+ * Slide 2: Our friend, the DOM Element
+ */
+#s2 p {
+  opacity: 0;
+  color: #888;
+}
+#s2 p.intro {
+  color: #444444;
+}
+#s2 p.limits {
+  color: #666666;
+}
+#s2 p.design {
+  margin-top: 0.75em;
+  position: absolute;
+  left: 10em;
+}
+#s2 p.placing {
+  margin-top: 3.5em;
+  position: absolute;
+  left: 16em;
+}
+#s2 .de {
+  margin: 0 1em;
+}
+#s2 .p-up {
+  top: -200px;
+}
+#s2 .p-down {
+  top: 200px;
+}
+#s2 .p-left {
+  left: -400px;
+}
+#s2 .p-right {
+  left: 200px;
+}
+#s2 .floats.bold,
+#s2 .pos.bold {
+  color: #444;
+  font-weight: 700;
+}
+
+/*
+ * Introducing: CSS 3D Transforms
+ */
+#s3 {
+  overflow: hidden;
+  overflow-y: visible;
+}
+#s3 .sandbox {
+  -webkit-perspective: 600px;
+  -moz-perspective: 600px;
+  -ms-perspective: 600px;
+  -o-perspective: 600px;
+  perspective: 600px;
+  text-align: center;
+  position: absolute;
+}
+#s3 .sandbox1 h2 {
+  font-size: 4em;
+  font-family: "Crete Round", serif;
+  width: 120%;
+  margin-left: -10%;
+  text-shadow: -0.05em 0.05em 0.1em rgba(0, 0, 0, 0.3);
+  -webkit-transform: rotateX(0deg) rotateY(52deg) rotateZ(0deg) translateX(1.8em) translateY(0em) translateZ(0em);
+  -moz-transform: rotateX(0deg) rotateY(52deg) rotateZ(0deg) translateX(1.8em) translateY(0em) translateZ(0em);
+  -ms-transform: rotateX(0deg) rotateY(52deg) rotateZ(0deg) translateX(1.8em) translateY(0em) translateZ(0em);
+  -o-transform: rotateX(0deg) rotateY(52deg) rotateZ(0deg) translateX(1.8em) translateY(0em) translateZ(0em);
+  transform: rotateX(0deg) rotateY(52deg) rotateZ(0deg) translateX(1.8em) translateY(0em) translateZ(0em);
+}
+#s3 .sandbox1 h2.hide {
+  -webkit-transform: translateZ(-2000px);
+  -moz-transform: translateZ(-2000px);
+  -ms-transform: translateZ(-2000px);
+  -o-transform: translateZ(-2000px);
+  transform: translateZ(-2000px);
+}
+#s3 .sandbox1 h2.glasses {
+  text-shadow: -0.08em 0 0 rgba(255, 0, 0, 0.74), 0.08em 0 0 rgba(0, 238, 238, 0.83);
+}
+#s3 .sandbox1 h2.whoosh {
+  -webkit-transition: all 1s ease-in-out;
+  -moz-transition: all 1s ease-in-out;
+  -ms-transition: all 1s ease-in-out;
+  -o-transition: all 1s ease-in-out;
+  transition: all 1s ease-in-out;
+  -webkit-transform: rotateX(-20deg) rotateY(-10deg) rotateZ(0deg) translateX(0em) translateY(0.5em) translateZ(5em);
+  -moz-transform: rotateX(-20deg) rotateY(-10deg) rotateZ(0deg) translateX(0em) translateY(0.5em) translateZ(5em);
+  -ms-transform: rotateX(-20deg) rotateY(-10deg) rotateZ(0deg) translateX(0em) translateY(0.5em) translateZ(5em);
+  -o-transform: rotateX(-20deg) rotateY(-10deg) rotateZ(0deg) translateX(0em) translateY(0.5em) translateZ(5em);
+  transform: rotateX(-20deg) rotateY(-10deg) rotateZ(0deg) translateX(0em) translateY(0.5em) translateZ(5em);
+  opacity: 0;
+}
+#s3 .sandbox2 {
+  width: 92.8%;
+  text-align: center;
+}
+#s3 .sandbox2 .translate.highlight,
+#s3 .sandbox2 .rotate.highlight {
+  font-size: 2em;
+  font-weight: 700;
+}
+#s3 .sandbox2 .axes {
+  font-size: 2em;
+  -webkit-transform: translateY(0.2em);
+  -moz-transform: translateY(0.2em);
+  -ms-transform: translateY(0.2em);
+  -o-transform: translateY(0.2em);
+  transform: translateY(0.2em);
+}
+#s3 .sandbox2 .axes .x.red {
+  color: red;
+}
+#s3 .sandbox2 .axes .y.green {
+  color: green;
+}
+#s3 .sandbox2 .axes .z.blue {
+  color: blue;
+}
+#s3 .sandbox2 .de {
+  margin: 0 auto;
+  position: relative;
+  top: 1em;
+  opacity: 1;
+}
+#s3 .sandbox2 .de.t-x {
+  -webkit-animation: t-x 3s ease-in-out infinite;
+  -moz-animation: t-x 3s ease-in-out infinite;
+  -ms-animation: t-x 3s ease-in-out infinite;
+  -o-animation: t-x 3s ease-in-out infinite;
+  animation: t-x 3s ease-in-out infinite;
+}
+#s3 .sandbox2 .de.t-y {
+  -webkit-animation: t-y 3s ease-in-out infinite;
+  -moz-animation: t-y 3s ease-in-out infinite;
+  -ms-animation: t-y 3s ease-in-out infinite;
+  -o-animation: t-y 3s ease-in-out infinite;
+  animation: t-y 3s ease-in-out infinite;
+}
+#s3 .sandbox2 .de.t-z {
+  -webkit-animation: t-z 3s ease-in-out infinite;
+  -moz-animation: t-z 3s ease-in-out infinite;
+  -ms-animation: t-z 3s ease-in-out infinite;
+  -o-animation: t-z 3s ease-in-out infinite;
+  animation: t-z 3s ease-in-out infinite;
+}
+#s3 .sandbox2 .de.r-x {
+  -webkit-animation: r-x 3s linear infinite;
+  -moz-animation: r-x 3s linear infinite;
+  -ms-animation: r-x 3s linear infinite;
+  -o-animation: r-x 3s linear infinite;
+  animation: r-x 3s linear infinite;
+}
+#s3 .sandbox2 .de.r-y {
+  -webkit-animation: r-y 3s linear infinite;
+  -moz-animation: r-y 3s linear infinite;
+  -ms-animation: r-y 3s linear infinite;
+  -o-animation: r-y 3s linear infinite;
+  animation: r-y 3s linear infinite;
+}
+#s3 .sandbox2 .de.r-z {
+  -webkit-animation: r-z 3s linear infinite;
+  -moz-animation: r-z 3s linear infinite;
+  -ms-animation: r-z 3s linear infinite;
+  -o-animation: r-z 3s linear infinite;
+  animation: r-z 3s linear infinite;
+}
+
+@-moz-keyframes t-x {
+  0%, 100% {
+    -moz-transform: translateX(0em);
+    transform: translateX(0em);
+  }
+
+  25% {
+    -moz-transform: translateX(-10em);
+    transform: translateX(-10em);
+  }
+
+  50% {
+    -moz-transform: translateX(0em);
+    transform: translateX(0em);
+  }
+
+  75% {
+    -moz-transform: translateX(10em);
+    transform: translateX(10em);
+  }
+}
+
+@-webkit-keyframes t-x {
+  0%, 100% {
+    -webkit-transform: translateX(0em);
+    transform: translateX(0em);
+  }
+
+  25% {
+    -webkit-transform: translateX(-10em);
+    transform: translateX(-10em);
+  }
+
+  50% {
+    -webkit-transform: translateX(0em);
+    transform: translateX(0em);
+  }
+
+  75% {
+    -webkit-transform: translateX(10em);
+    transform: translateX(10em);
+  }
+}
+
+@-o-keyframes t-x {
+  0%, 100% {
+    -o-transform: translateX(0em);
+    transform: translateX(0em);
+  }
+
+  25% {
+    -o-transform: translateX(-10em);
+    transform: translateX(-10em);
+  }
+
+  50% {
+    -o-transform: translateX(0em);
+    transform: translateX(0em);
+  }
+
+  75% {
+    -o-transform: translateX(10em);
+    transform: translateX(10em);
+  }
+}
+
+@-ms-keyframes t-x {
+  0%, 100% {
+    -ms-transform: translateX(0em);
+    transform: translateX(0em);
+  }
+
+  25% {
+    -ms-transform: translateX(-10em);
+    transform: translateX(-10em);
+  }
+
+  50% {
+    -ms-transform: translateX(0em);
+    transform: translateX(0em);
+  }
+
+  75% {
+    -ms-transform: translateX(10em);
+    transform: translateX(10em);
+  }
+}
+
+@keyframes t-x {
+  0%, 100% {
+    transform: translateX(0em);
+  }
+
+  25% {
+    transform: translateX(-10em);
+  }
+
+  50% {
+    transform: translateX(0em);
+  }
+
+  75% {
+    transform: translateX(10em);
+  }
+}
+
+@-moz-keyframes t-y {
+  0%, 100% {
+    -moz-transform: translateY(0em);
+    transform: translateY(0em);
+  }
+
+  25% {
+    -moz-transform: translateY(-10em);
+    transform: translateY(-10em);
+  }
+
+  50% {
+    -moz-transform: translateY(0em);
+    transform: translateY(0em);
+  }
+
+  75% {
+    -moz-transform: translateY(10em);
+    transform: translateY(10em);
+  }
+}
+
+@-webkit-keyframes t-y {
+  0%, 100% {
+    -webkit-transform: translateY(0em);
+    transform: translateY(0em);
+  }
+
+  25% {
+    -webkit-transform: translateY(-10em);
+    transform: translateY(-10em);
+  }
+
+  50% {
+    -webkit-transform: translateY(0em);
+    transform: translateY(0em);
+  }
+
+  75% {
+    -webkit-transform: translateY(10em);
+    transform: translateY(10em);
+  }
+}
+
+@-o-keyframes t-y {
+  0%, 100% {
+    -o-transform: translateY(0em);
+    transform: translateY(0em);
+  }
+
+  25% {
+    -o-transform: translateY(-10em);
+    transform: translateY(-10em);
+  }
+
+  50% {
+    -o-transform: translateY(0em);
+    transform: translateY(0em);
+  }
+
+  75% {
+    -o-transform: translateY(10em);
+    transform: translateY(10em);
+  }
+}
+
+@-ms-keyframes t-y {
+  0%, 100% {
+    -ms-transform: translateY(0em);
+    transform: translateY(0em);
+  }
+
+  25% {
+    -ms-transform: translateY(-10em);
+    transform: translateY(-10em);
+  }
+
+  50% {
+    -ms-transform: translateY(0em);
+    transform: translateY(0em);
+  }
+
+  75% {
+    -ms-transform: translateY(10em);
+    transform: translateY(10em);
+  }
+}
+
+@keyframes t-y {
+  0%, 100% {
+    transform: translateY(0em);
+  }
+
+  25% {
+    transform: translateY(-10em);
+  }
+
+  50% {
+    transform: translateY(0em);
+  }
+
+  75% {
+    transform: translateY(10em);
+  }
+}
+
+@-moz-keyframes t-z {
+  0%, 100% {
+    -moz-transform: translateZ(0em);
+    transform: translateZ(0em);
+  }
+
+  25% {
+    -moz-transform: translateZ(10em);
+    transform: translateZ(10em);
+  }
+
+  50% {
+    -moz-transform: translateZ(0em);
+    transform: translateZ(0em);
+  }
+
+  75% {
+    -moz-transform: translateZ(-20em);
+    transform: translateZ(-20em);
+  }
+}
+
+@-webkit-keyframes t-z {
+  0%, 100% {
+    -webkit-transform: translateZ(0em);
+    transform: translateZ(0em);
+  }
+
+  25% {
+    -webkit-transform: translateZ(10em);
+    transform: translateZ(10em);
+  }
+
+  50% {
+    -webkit-transform: translateZ(0em);
+    transform: translateZ(0em);
+  }
+
+  75% {
+    -webkit-transform: translateZ(-20em);
+    transform: translateZ(-20em);
+  }
+}
+
+@-o-keyframes t-z {
+  0%, 100% {
+    -o-transform: translateZ(0em);
+    transform: translateZ(0em);
+  }
+
+  25% {
+    -o-transform: translateZ(10em);
+    transform: translateZ(10em);
+  }
+
+  50% {
+    -o-transform: translateZ(0em);
+    transform: translateZ(0em);
+  }
+
+  75% {
+    -o-transform: translateZ(-20em);
+    transform: translateZ(-20em);
+  }
+}
+
+@-ms-keyframes t-z {
+  0%, 100% {
+    -ms-transform: translateZ(0em);
+    transform: translateZ(0em);
+  }
+
+  25% {
+    -ms-transform: translateZ(10em);
+    transform: translateZ(10em);
+  }
+
+  50% {
+    -ms-transform: translateZ(0em);
+    transform: translateZ(0em);
+  }
+
+  75% {
+    -ms-transform: translateZ(-20em);
+    transform: translateZ(-20em);
+  }
+}
+
+@keyframes t-z {
+  0%, 100% {
+    transform: translateZ(0em);
+  }
+
+  25% {
+    transform: translateZ(10em);
+  }
+
+  50% {
+    transform: translateZ(0em);
+  }
+
+  75% {
+    transform: translateZ(-20em);
+  }
+}
+
+@-moz-keyframes r-x {
+  0% {
+    -moz-transform: rotateX(0deg);
+    transform: rotateX(0deg);
+  }
+
+  100% {
+    -moz-transform: rotateX(360deg);
+    transform: rotateX(360deg);
+  }
+}
+
+@-webkit-keyframes r-x {
+  0% {
+    -webkit-transform: rotateX(0deg);
+    transform: rotateX(0deg);
+  }
+
+  100% {
+    -webkit-transform: rotateX(360deg);
+    transform: rotateX(360deg);
+  }
+}
+
+@-o-keyframes r-x {
+  0% {
+    -o-transform: rotateX(0deg);
+    transform: rotateX(0deg);
+  }
+
+  100% {
+    -o-transform: rotateX(360deg);
+    transform: rotateX(360deg);
+  }
+}
+
+@-ms-keyframes r-x {
+  0% {
+    -ms-transform: rotateX(0deg);
+    transform: rotateX(0deg);
+  }
+
+  100% {
+    -ms-transform: rotateX(360deg);
+    transform: rotateX(360deg);
+  }
+}
+
+@keyframes r-x {
+  0% {
+    transform: rotateX(0deg);
+  }
+
+  100% {
+    transform: rotateX(360deg);
+  }
+}
+
+@-moz-keyframes r-y {
+  0% {
+    -moz-transform: rotateY(0deg);
+    transform: rotateY(0deg);
+  }
+
+  100% {
+    -moz-transform: rotateY(360deg);
+    transform: rotateY(360deg);
+  }
+}
+
+@-webkit-keyframes r-y {
+  0% {
+    -webkit-transform: rotateY(0deg);
+    transform: rotateY(0deg);
+  }
+
+  100% {
+    -webkit-transform: rotateY(360deg);
+    transform: rotateY(360deg);
+  }
+}
+
+@-o-keyframes r-y {
+  0% {
+    -o-transform: rotateY(0deg);
+    transform: rotateY(0deg);
+  }
+
+  100% {
+    -o-transform: rotateY(360deg);
+    transform: rotateY(360deg);
+  }
+}
+
+@-ms-keyframes r-y {
+  0% {
+    -ms-transform: rotateY(0deg);
+    transform: rotateY(0deg);
+  }
+
+  100% {
+    -ms-transform: rotateY(360deg);
+    transform: rotateY(360deg);
+  }
+}
+
+@keyframes r-y {
+  0% {
+    transform: rotateY(0deg);
+  }
+
+  100% {
+    transform: rotateY(360deg);
+  }
+}
+
+@-moz-keyframes r-z {
+  0% {
+    -moz-transform: rotateZ(0deg);
+    transform: rotateZ(0deg);
+  }
+
+  100% {
+    -moz-transform: rotateZ(360deg);
+    transform: rotateZ(360deg);
+  }
+}
+
+@-webkit-keyframes r-z {
+  0% {
+    -webkit-transform: rotateZ(0deg);
+    transform: rotateZ(0deg);
+  }
+
+  100% {
+    -webkit-transform: rotateZ(360deg);
+    transform: rotateZ(360deg);
+  }
+}
+
+@-o-keyframes r-z {
+  0% {
+    -o-transform: rotateZ(0deg);
+    transform: rotateZ(0deg);
+  }
+
+  100% {
+    -o-transform: rotateZ(360deg);
+    transform: rotateZ(360deg);
+  }
+}
+
+@-ms-keyframes r-z {
+  0% {
+    -ms-transform: rotateZ(0deg);
+    transform: rotateZ(0deg);
+  }
+
+  100% {
+    -ms-transform: rotateZ(360deg);
+    transform: rotateZ(360deg);
+  }
+}
+
+@keyframes r-z {
+  0% {
+    transform: rotateZ(0deg);
+  }
+
+  100% {
+    transform: rotateZ(360deg);
+  }
+}
+
+/*
+ * Perspective
+ */
+#s4 dl {
+  width: 50%;
+  margin: 0;
+}
+#s4 .sandbox {
+  width: 60%;
+  float: right;
+  -webkit-perspective: 3600px;
+  -moz-perspective: 3600px;
+  -ms-perspective: 3600px;
+  -o-perspective: 3600px;
+  perspective: 3600px;
+  -webkit-transform-style: preserve-3d;
+  -moz-transform-style: preserve-3d;
+  -ms-transform-style: preserve-3d;
+  -o-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+}
+#s4 .sandbox .cube {
+  -webkit-transform: translateX(10em) translateY(6.5em) translateZ(0.1em);
+  -moz-transform: translateX(10em) translateY(6.5em) translateZ(0.1em);
+  -ms-transform: translateX(10em) translateY(6.5em) translateZ(0.1em);
+  -o-transform: translateX(10em) translateY(6.5em) translateZ(0.1em);
+  transform: translateX(10em) translateY(6.5em) translateZ(0.1em);
+}
+#s4 .sandbox .cube .bottom {
+  -webkit-box-shadow: 0 0 2em rgba(0, 0, 0, 0.75);
+  -moz-box-shadow: 0 0 2em rgba(0, 0, 0, 0.75);
+  box-shadow: 0 0 2em rgba(0, 0, 0, 0.75);
+}
+#s4 .sandbox.p-warp {
+  -webkit-animation: p-warp 3s ease-in-out infinite;
+  -moz-animation: p-warp 3s ease-in-out infinite;
+  -ms-animation: p-warp 3s ease-in-out infinite;
+  -o-animation: p-warp 3s ease-in-out infinite;
+  animation: p-warp 3s ease-in-out infinite;
+}
+#s4 .sandbox.po-warp {
+  -webkit-perspective: 1400px;
+  -moz-perspective: 1400px;
+  -ms-perspective: 1400px;
+  -o-perspective: 1400px;
+  perspective: 1400px;
+  -webkit-animation: po-warp 5s ease-in-out infinite;
+  -moz-animation: po-warp 5s ease-in-out infinite;
+  -ms-animation: po-warp 5s ease-in-out infinite;
+  -o-animation: po-warp 5s ease-in-out infinite;
+  animation: po-warp 5s ease-in-out infinite;
+}
+
+@-moz-keyframes p-warp {
+  0%, 100% {
+    -moz-perspective: 3600px;
+    perspective: 3600px;
+  }
+
+  50% {
+    -moz-perspective: 100px;
+    perspective: 100px;
+  }
+}
+
+@-webkit-keyframes p-warp {
+  0%, 100% {
+    -webkit-perspective: 3600px;
+    perspective: 3600px;
+  }
+
+  50% {
+    -webkit-perspective: 100px;
+    perspective: 100px;
+  }
+}
+
+@-o-keyframes p-warp {
+  0%, 100% {
+    -o-perspective: 3600px;
+    perspective: 3600px;
+  }
+
+  50% {
+    -o-perspective: 100px;
+    perspective: 100px;
+  }
+}
+
+@-ms-keyframes p-warp {
+  0%, 100% {
+    -ms-perspective: 3600px;
+    perspective: 3600px;
+  }
+
+  50% {
+    -ms-perspective: 100px;
+    perspective: 100px;
+  }
+}
+
+@keyframes p-warp {
+  0%, 100% {
+    perspective: 3600px;
+  }
+
+  50% {
+    perspective: 100px;
+  }
+}
+
+@-moz-keyframes po-warp {
+  0%, 100% {
+    -moz-perspective-origin: 50% 50%;
+    perspective-origin: 50% 50%;
+  }
+
+  33% {
+    -moz-perspective-origin: 200% -200%;
+    perspective-origin: 200% -200%;
+  }
+
+  66% {
+    -moz-perspective-origin: 400% 250%;
+    perspective-origin: 400% 250%;
+  }
+}
+
+@-webkit-keyframes po-warp {
+  0%, 100% {
+    -webkit-perspective-origin: 50% 50%;
+    perspective-origin: 50% 50%;
+  }
+
+  33% {
+    -webkit-perspective-origin: 200% -200%;
+    perspective-origin: 200% -200%;
+  }
+
+  66% {
+    -webkit-perspective-origin: 400% 250%;
+    perspective-origin: 400% 250%;
+  }
+}
+
+@-o-keyframes po-warp {
+  0%, 100% {
+    -o-perspective-origin: 50% 50%;
+    perspective-origin: 50% 50%;
+  }
+
+  33% {
+    -o-perspective-origin: 200% -200%;
+    perspective-origin: 200% -200%;
+  }
+
+  66% {
+    -o-perspective-origin: 400% 250%;
+    perspective-origin: 400% 250%;
+  }
+}
+
+@-ms-keyframes po-warp {
+  0%, 100% {
+    -ms-perspective-origin: 50% 50%;
+    perspective-origin: 50% 50%;
+  }
+
+  33% {
+    -ms-perspective-origin: 200% -200%;
+    perspective-origin: 200% -200%;
+  }
+
+  66% {
+    -ms-perspective-origin: 400% 250%;
+    perspective-origin: 400% 250%;
+  }
+}
+
+@keyframes po-warp {
+  0%, 100% {
+    perspective-origin: 50% 50%;
+  }
+
+  33% {
+    perspective-origin: 200% -200%;
+  }
+
+  66% {
+    perspective-origin: 400% 250%;
+  }
+}
+
+/*
+ * Translate, rotate, and backface-visibility
+ */
+#s5 dl {
+  width: 52%;
+  margin: 3em 0 0 0;
+}
+#s5 .sandbox {
+  overflow: hidden;
+  width: 48%;
+  margin-right: -1em;
+  height: 17em;
+  float: right;
+  -webkit-perspective: 800px;
+  -moz-perspective: 800px;
+  -ms-perspective: 800px;
+  -o-perspective: 800px;
+  perspective: 800px;
+  -webkit-transform-style: preserve-3d;
+  -moz-transform-style: preserve-3d;
+  -ms-transform-style: preserve-3d;
+  -o-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+}
+#s5 .sandbox .cube {
+  -webkit-transition: none;
+  -moz-transition: none;
+  -ms-transition: none;
+  -o-transition: none;
+  transition: none;
+  -webkit-transform: translateX(5em) translateY(10em) rotateY(24deg);
+  -moz-transform: translateX(5em) translateY(10em) rotateY(24deg);
+  -ms-transform: translateX(5em) translateY(10em) rotateY(24deg);
+  -o-transform: translateX(5em) translateY(10em) rotateY(24deg);
+  transform: translateX(5em) translateY(10em) rotateY(24deg);
+}
+#s5 .sandbox .cube .handles {
+  opacity: 0;
+  position: absolute;
+  z-index: 100;
+}
+#s5 .sandbox .cube .h-translate {
+  width: 5em;
+  height: 5em;
+  border: none;
+  border-left: 5px solid;
+  -webkit-transform-origin: 0% 100%;
+  -moz-transform-origin: 0% 100%;
+  -ms-transform-origin: 0% 100%;
+  -o-transform-origin: 0% 100%;
+  transform-origin: 0% 100%;
+}
+#s5 .sandbox .cube .h-rotate {
+  width: 10em;
+  height: 10em;
+  border: 5px solid;
+  -webkit-border-radius: 10em;
+  -moz-border-radius: 10em;
+  -ms-border-radius: 10em;
+  -o-border-radius: 10em;
+  border-radius: 10em;
+}
+#s5 .sandbox .cube .tx {
+  -webkit-transform: translateX(2.5em) translateY(-2.5em) translateZ(-2.5em) rotateZ(-90deg);
+  -moz-transform: translateX(2.5em) translateY(-2.5em) translateZ(-2.5em) rotateZ(-90deg);
+  -ms-transform: translateX(2.5em) translateY(-2.5em) translateZ(-2.5em) rotateZ(-90deg);
+  -o-transform: translateX(2.5em) translateY(-2.5em) translateZ(-2.5em) rotateZ(-90deg);
+  transform: translateX(2.5em) translateY(-2.5em) translateZ(-2.5em) rotateZ(-90deg);
+}
+#s5 .sandbox .cube .ty {
+  -webkit-transform: translateX(2.5em) translateY(-2.5em) translateZ(-2.5em);
+  -moz-transform: translateX(2.5em) translateY(-2.5em) translateZ(-2.5em);
+  -ms-transform: translateX(2.5em) translateY(-2.5em) translateZ(-2.5em);
+  -o-transform: translateX(2.5em) translateY(-2.5em) translateZ(-2.5em);
+  transform: translateX(2.5em) translateY(-2.5em) translateZ(-2.5em);
+}
+#s5 .sandbox .cube .tz {
+  -webkit-transform: translateX(2.5em) translateY(-2.5em) translateZ(-2.5em) rotateX(-90deg);
+  -moz-transform: translateX(2.5em) translateY(-2.5em) translateZ(-2.5em) rotateX(-90deg);
+  -ms-transform: translateX(2.5em) translateY(-2.5em) translateZ(-2.5em) rotateX(-90deg);
+  -o-transform: translateX(2.5em) translateY(-2.5em) translateZ(-2.5em) rotateX(-90deg);
+  transform: translateX(2.5em) translateY(-2.5em) translateZ(-2.5em) rotateX(-90deg);
+}
+#s5 .sandbox .cube .rx {
+  -webkit-transform: translateX(-2.5em) translateY(-2.5em) translateZ(-2.5em) rotateY(90deg);
+  -moz-transform: translateX(-2.5em) translateY(-2.5em) translateZ(-2.5em) rotateY(90deg);
+  -ms-transform: translateX(-2.5em) translateY(-2.5em) translateZ(-2.5em) rotateY(90deg);
+  -o-transform: translateX(-2.5em) translateY(-2.5em) translateZ(-2.5em) rotateY(90deg);
+  transform: translateX(-2.5em) translateY(-2.5em) translateZ(-2.5em) rotateY(90deg);
+}
+#s5 .sandbox .cube .ry {
+  -webkit-transform: translateX(-2.5em) translateY(-2.5em) translateZ(-2.5em) rotateX(-90deg);
+  -moz-transform: translateX(-2.5em) translateY(-2.5em) translateZ(-2.5em) rotateX(-90deg);
+  -ms-transform: translateX(-2.5em) translateY(-2.5em) translateZ(-2.5em) rotateX(-90deg);
+  -o-transform: translateX(-2.5em) translateY(-2.5em) translateZ(-2.5em) rotateX(-90deg);
+  transform: translateX(-2.5em) translateY(-2.5em) translateZ(-2.5em) rotateX(-90deg);
+}
+#s5 .sandbox .cube .rz {
+  -webkit-transform: translateX(-2.5em) translateY(-2.5em) translateZ(-2.5em);
+  -moz-transform: translateX(-2.5em) translateY(-2.5em) translateZ(-2.5em);
+  -ms-transform: translateX(-2.5em) translateY(-2.5em) translateZ(-2.5em);
+  -o-transform: translateX(-2.5em) translateY(-2.5em) translateZ(-2.5em);
+  transform: translateX(-2.5em) translateY(-2.5em) translateZ(-2.5em);
+}
+#s5 .sandbox .cube .rx, #s5 .sandbox .cube .tx {
+  border-color: red;
+}
+#s5 .sandbox .cube .ry, #s5 .sandbox .cube .ty {
+  border-color: green;
+}
+#s5 .sandbox .cube .rz, #s5 .sandbox .cube .tz {
+  border-color: blue;
+}
+#s5 .sandbox.translate-demo .h-translate {
+  opacity: 1;
+}
+#s5 .sandbox.translate-demo .cube {
+  -webkit-transform: translateX(10em) translateY(10em) rotateY(24deg);
+  -moz-transform: translateX(10em) translateY(10em) rotateY(24deg);
+  -ms-transform: translateX(10em) translateY(10em) rotateY(24deg);
+  -o-transform: translateX(10em) translateY(10em) rotateY(24deg);
+  transform: translateX(10em) translateY(10em) rotateY(24deg);
+  -webkit-animation: translate-cube 4s ease-in-out infinite;
+  -moz-animation: translate-cube 4s ease-in-out infinite;
+  -ms-animation: translate-cube 4s ease-in-out infinite;
+  -o-animation: translate-cube 4s ease-in-out infinite;
+  animation: translate-cube 4s ease-in-out infinite;
+}
+#s5 .sandbox.rotate-demo .h-rotate {
+  opacity: 1;
+}
+#s5 .sandbox.rotate-demo .cube {
+  -webkit-transform: translateX(10em) translateY(6em) rotateY(24deg);
+  -moz-transform: translateX(10em) translateY(6em) rotateY(24deg);
+  -ms-transform: translateX(10em) translateY(6em) rotateY(24deg);
+  -o-transform: translateX(10em) translateY(6em) rotateY(24deg);
+  transform: translateX(10em) translateY(6em) rotateY(24deg);
+  -webkit-animation: rotate-cube 8s linear infinite;
+  -moz-animation: rotate-cube 8s linear infinite;
+  -ms-animation: rotate-cube 8s linear infinite;
+  -o-animation: rotate-cube 8s linear infinite;
+  animation: rotate-cube 8s linear infinite;
+}
+#s5 .sandbox.backface-demo .cube {
+  -webkit-backface-visibility: visible;
+  -moz-backface-visibility: visible;
+  -ms-backface-visibility: visible;
+  -o-backface-visibility: visible;
+  backface-visibility: visible;
+  -webkit-animation: backface-demo-rotate 4s linear infinite;
+  -moz-animation: backface-demo-rotate 4s linear infinite;
+  -ms-animation: backface-demo-rotate 4s linear infinite;
+  -o-animation: backface-demo-rotate 4s linear infinite;
+  animation: backface-demo-rotate 4s linear infinite;
+}
+#s5 .sandbox.backface-demo .cube:after {
+  content: 'visible';
+  display: block;
+  width: 100%;
+  padding-top: 1em;
+  text-align: center;
+}
+#s5 .sandbox.backface-demo .cube .side {
+  -webkit-backface-visibility: visible;
+  -moz-backface-visibility: visible;
+  -ms-backface-visibility: visible;
+  -o-backface-visibility: visible;
+  backface-visibility: visible;
+  opacity: 0;
+}
+#s5 .sandbox.backface-hidden .cube {
+  -webkit-backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  -ms-backface-visibility: hidden;
+  -o-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+#s5 .sandbox.backface-hidden .cube:after {
+  content: 'hidden';
+}
+#s5 .sandbox.backface-hidden .cube .side {
+  -webkit-backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  -ms-backface-visibility: hidden;
+  -o-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+#s5 .sandbox.cubed .cube .side {
+  opacity: 1;
+}
+
+@-moz-keyframes translate-cube {
+  0%, 100% {
+    -moz-transform: translateX(5em) translateY(10em) rotateY(24deg);
+    transform: translateX(5em) translateY(10em) rotateY(24deg);
+  }
+
+  50% {
+    -moz-transform: translateX(5em) translateY(6em) rotateY(24deg);
+    transform: translateX(5em) translateY(6em) rotateY(24deg);
+  }
+}
+
+@-webkit-keyframes translate-cube {
+  0%, 100% {
+    -webkit-transform: translateX(5em) translateY(10em) rotateY(24deg);
+    transform: translateX(5em) translateY(10em) rotateY(24deg);
+  }
+
+  50% {
+    -webkit-transform: translateX(5em) translateY(6em) rotateY(24deg);
+    transform: translateX(5em) translateY(6em) rotateY(24deg);
+  }
+}
+
+@-o-keyframes translate-cube {
+  0%, 100% {
+    -o-transform: translateX(5em) translateY(10em) rotateY(24deg);
+    transform: translateX(5em) translateY(10em) rotateY(24deg);
+  }
+
+  50% {
+    -o-transform: translateX(5em) translateY(6em) rotateY(24deg);
+    transform: translateX(5em) translateY(6em) rotateY(24deg);
+  }
+}
+
+@-ms-keyframes translate-cube {
+  0%, 100% {
+    -ms-transform: translateX(5em) translateY(10em) rotateY(24deg);
+    transform: translateX(5em) translateY(10em) rotateY(24deg);
+  }
+
+  50% {
+    -ms-transform: translateX(5em) translateY(6em) rotateY(24deg);
+    transform: translateX(5em) translateY(6em) rotateY(24deg);
+  }
+}
+
+@keyframes translate-cube {
+  0%, 100% {
+    transform: translateX(5em) translateY(10em) rotateY(24deg);
+  }
+
+  50% {
+    transform: translateX(5em) translateY(6em) rotateY(24deg);
+  }
+}
+
+@-moz-keyframes rotate-cube {
+  0% {
+    -moz-transform: translateX(5em) translateY(6em) rotateY(24deg) rotateZ(0deg);
+    transform: translateX(5em) translateY(6em) rotateY(24deg) rotateZ(0deg);
+  }
+
+  100% {
+    -moz-transform: translateX(5em) translateY(6em) rotateY(24deg) rotateZ(360deg);
+    transform: translateX(5em) translateY(6em) rotateY(24deg) rotateZ(360deg);
+  }
+}
+
+@-webkit-keyframes rotate-cube {
+  0% {
+    -webkit-transform: translateX(5em) translateY(6em) rotateY(24deg) rotateZ(0deg);
+    transform: translateX(5em) translateY(6em) rotateY(24deg) rotateZ(0deg);
+  }
+
+  100% {
+    -webkit-transform: translateX(5em) translateY(6em) rotateY(24deg) rotateZ(360deg);
+    transform: translateX(5em) translateY(6em) rotateY(24deg) rotateZ(360deg);
+  }
+}
+
+@-o-keyframes rotate-cube {
+  0% {
+    -o-transform: translateX(5em) translateY(6em) rotateY(24deg) rotateZ(0deg);
+    transform: translateX(5em) translateY(6em) rotateY(24deg) rotateZ(0deg);
+  }
+
+  100% {
+    -o-transform: translateX(5em) translateY(6em) rotateY(24deg) rotateZ(360deg);
+    transform: translateX(5em) translateY(6em) rotateY(24deg) rotateZ(360deg);
+  }
+}
+
+@-ms-keyframes rotate-cube {
+  0% {
+    -ms-transform: translateX(5em) translateY(6em) rotateY(24deg) rotateZ(0deg);
+    transform: translateX(5em) translateY(6em) rotateY(24deg) rotateZ(0deg);
+  }
+
+  100% {
+    -ms-transform: translateX(5em) translateY(6em) rotateY(24deg) rotateZ(360deg);
+    transform: translateX(5em) translateY(6em) rotateY(24deg) rotateZ(360deg);
+  }
+}
+
+@keyframes rotate-cube {
+  0% {
+    transform: translateX(5em) translateY(6em) rotateY(24deg) rotateZ(0deg);
+  }
+
+  100% {
+    transform: translateX(5em) translateY(6em) rotateY(24deg) rotateZ(360deg);
+  }
+}
+
+@-moz-keyframes backface-demo-rotate {
+  0% {
+    -moz-transform: translateX(5em) translateY(6em) rotateY(24deg);
+    transform: translateX(5em) translateY(6em) rotateY(24deg);
+  }
+
+  100% {
+    -moz-transform: translateX(5em) translateY(6em) rotateY(384deg);
+    transform: translateX(5em) translateY(6em) rotateY(384deg);
+  }
+}
+
+@-webkit-keyframes backface-demo-rotate {
+  0% {
+    -webkit-transform: translateX(5em) translateY(6em) rotateY(24deg);
+    transform: translateX(5em) translateY(6em) rotateY(24deg);
+  }
+
+  100% {
+    -webkit-transform: translateX(5em) translateY(6em) rotateY(384deg);
+    transform: translateX(5em) translateY(6em) rotateY(384deg);
+  }
+}
+
+@-o-keyframes backface-demo-rotate {
+  0% {
+    -o-transform: translateX(5em) translateY(6em) rotateY(24deg);
+    transform: translateX(5em) translateY(6em) rotateY(24deg);
+  }
+
+  100% {
+    -o-transform: translateX(5em) translateY(6em) rotateY(384deg);
+    transform: translateX(5em) translateY(6em) rotateY(384deg);
+  }
+}
+
+@-ms-keyframes backface-demo-rotate {
+  0% {
+    -ms-transform: translateX(5em) translateY(6em) rotateY(24deg);
+    transform: translateX(5em) translateY(6em) rotateY(24deg);
+  }
+
+  100% {
+    -ms-transform: translateX(5em) translateY(6em) rotateY(384deg);
+    transform: translateX(5em) translateY(6em) rotateY(384deg);
+  }
+}
+
+@keyframes backface-demo-rotate {
+  0% {
+    transform: translateX(5em) translateY(6em) rotateY(24deg);
+  }
+
+  100% {
+    transform: translateX(5em) translateY(6em) rotateY(384deg);
+  }
+}
+
+/*
+ * Primitives
+ */
+#s6 {
+  overflow: hidden;
+}
+#s6 .intro {
+  -webkit-transform-style: preserve-3d;
+  -moz-transform-style: preserve-3d;
+  -ms-transform-style: preserve-3d;
+  -o-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+}
+#s6 .elements,
+#s6 .like,
+#s6 .paper,
+#s6 .folds {
+  -webkit-transform-origin: 0% 50%;
+  -moz-transform-origin: 0% 50%;
+  -ms-transform-origin: 0% 50%;
+  -o-transform-origin: 0% 50%;
+  transform-origin: 0% 50%;
+  -webkit-transform-style: preserve-3d;
+  -moz-transform-style: preserve-3d;
+  -ms-transform-style: preserve-3d;
+  -o-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+  background: #fff;
+  white-space: nowrap;
+}
+#s6 .elements {
+  width: 3.97em;
+}
+#s6 .like {
+  width: 4.10em;
+}
+#s6 .paper {
+  width: 2.54em;
+}
+#s6 .folds.folded {
+  -webkit-box-shadow: 0.1em 0 0.3em rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: 0.1em 0 0.3em rgba(0, 0, 0, 0.2);
+  box-shadow: 0.1em 0 0.3em rgba(0, 0, 0, 0.2);
+  -webkit-transform: rotateY(52deg);
+  -moz-transform: rotateY(52deg);
+  -ms-transform: rotateY(52deg);
+  -o-transform: rotateY(52deg);
+  transform: rotateY(52deg);
+}
+#s6 .paper.folded {
+  -webkit-box-shadow: 0.1em 0 0.3em rgba(0, 0, 0, 0.4);
+  -moz-box-shadow: 0.1em 0 0.3em rgba(0, 0, 0, 0.4);
+  box-shadow: 0.1em 0 0.3em rgba(0, 0, 0, 0.4);
+  -webkit-transform: rotateY(-72deg);
+  -moz-transform: rotateY(-72deg);
+  -ms-transform: rotateY(-72deg);
+  -o-transform: rotateY(-72deg);
+  transform: rotateY(-72deg);
+}
+#s6 .paper.folded .folds.folded {
+  -webkit-transform: rotateY(122deg);
+  -moz-transform: rotateY(122deg);
+  -ms-transform: rotateY(122deg);
+  -o-transform: rotateY(122deg);
+  transform: rotateY(122deg);
+}
+#s6 .like.folded {
+  -webkit-box-shadow: 0.1em 0 0.3em rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: 0.1em 0 0.3em rgba(0, 0, 0, 0.2);
+  box-shadow: 0.1em 0 0.3em rgba(0, 0, 0, 0.2);
+  -webkit-transform: rotateY(72deg);
+  -moz-transform: rotateY(72deg);
+  -ms-transform: rotateY(72deg);
+  -o-transform: rotateY(72deg);
+  transform: rotateY(72deg);
+}
+#s6 .like.folded .paper.folded {
+  -webkit-transform: rotateY(-102deg);
+  -moz-transform: rotateY(-102deg);
+  -ms-transform: rotateY(-102deg);
+  -o-transform: rotateY(-102deg);
+  transform: rotateY(-102deg);
+}
+#s6 .like.folded .paper.folded .folds.folded {
+  -webkit-transform: rotateY(142deg);
+  -moz-transform: rotateY(142deg);
+  -ms-transform: rotateY(142deg);
+  -o-transform: rotateY(142deg);
+  transform: rotateY(142deg);
+}
+#s6 .elements.folded {
+  -webkit-box-shadow: 0.1em 0 0.3em rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: 0.1em 0 0.3em rgba(0, 0, 0, 0.2);
+  box-shadow: 0.1em 0 0.3em rgba(0, 0, 0, 0.2);
+  -webkit-transform: rotateY(-39deg);
+  -moz-transform: rotateY(-39deg);
+  -ms-transform: rotateY(-39deg);
+  -o-transform: rotateY(-39deg);
+  transform: rotateY(-39deg);
+}
+#s6 .elements.folded .like.folded {
+  -webkit-transform: rotateY(80deg);
+  -moz-transform: rotateY(80deg);
+  -ms-transform: rotateY(80deg);
+  -o-transform: rotateY(80deg);
+  transform: rotateY(80deg);
+}
+#s6 .elements.folded .like.folded .paper.folded .folds.folded {
+  -webkit-transform: rotateY(122deg);
+  -moz-transform: rotateY(122deg);
+  -ms-transform: rotateY(122deg);
+  -o-transform: rotateY(122deg);
+  transform: rotateY(122deg);
+}
+#s6 .sandbox {
+  float: right;
+  width: 50%;
+  -webkit-transform-style: preserve-3d;
+  -moz-transform-style: preserve-3d;
+  -ms-transform-style: preserve-3d;
+  -o-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+}
+#s6 .sandbox .cube {
+  -webkit-transition: none;
+  -moz-transition: none;
+  -ms-transition: none;
+  -o-transition: none;
+  transition: none;
+  -webkit-transform: translateY(2em);
+  -moz-transform: translateY(2em);
+  -ms-transform: translateY(2em);
+  -o-transform: translateY(2em);
+  transform: translateY(2em);
+  -webkit-transform-origin: 50% 50% -2.5em;
+  -moz-transform-origin: 50% 50% -2.5em;
+  -ms-transform-origin: 50% 50% -2.5em;
+  -o-transform-origin: 50% 50% -2.5em;
+  transform-origin: 50% 50% -2.5em;
+}
+#s6 .sandbox .cube.rotate {
+  -webkit-animation: rotate-cube-slow 8s linear infinite;
+  -moz-animation: rotate-cube-slow 8s linear infinite;
+  -ms-animation: rotate-cube-slow 8s linear infinite;
+  -o-animation: rotate-cube-slow 8s linear infinite;
+  animation: rotate-cube-slow 8s linear infinite;
+}
+#s6 .sandbox .cube.labels:before,
+#s6 .sandbox .cube.labels .top:before,
+#s6 .sandbox .cube.labels .left:before,
+#s6 .sandbox .cube.labels .right:before,
+#s6 .sandbox .cube.labels .bottom:before,
+#s6 .sandbox .cube.labels .back:before {
+  display: block;
+  width: 100%;
+  text-align: center;
+  position: absolute;
+  top: 50px;
+}
+#s6 .sandbox .cube.labels:before {
+  content: 'Front';
+}
+#s6 .sandbox .cube.labels .top:before {
+  content: 'Top';
+}
+#s6 .sandbox .cube.labels .left:before {
+  content: 'Left';
+}
+#s6 .sandbox .cube.labels .right:before {
+  content: 'Right';
+}
+#s6 .sandbox .cube.labels .bottom:before {
+  content: 'Bottom';
+}
+#s6 .sandbox .cube.labels .back:before {
+  content: 'Back';
+  top: 95px;
+  -webkit-transform: rotateZ(180deg);
+  -moz-transform: rotateZ(180deg);
+  -ms-transform: rotateZ(180deg);
+  -o-transform: rotateZ(180deg);
+  transform: rotateZ(180deg);
+}
+#s6 .sandbox .cube .flat {
+  -webkit-transition: all 0.3s linear;
+  -moz-transition: all 0.3s linear;
+  -ms-transition: all 0.3s linear;
+  -o-transition: all 0.3s linear;
+  transition: all 0.3s linear;
+}
+#s6 .sandbox .cube .top.flat {
+  -webkit-transform: rotateX(0deg);
+  -moz-transform: rotateX(0deg);
+  -ms-transform: rotateX(0deg);
+  -o-transform: rotateX(0deg);
+  transform: rotateX(0deg);
+}
+#s6 .sandbox .cube .left.flat {
+  -webkit-transform: rotateY(0deg);
+  -moz-transform: rotateY(0deg);
+  -ms-transform: rotateY(0deg);
+  -o-transform: rotateY(0deg);
+  transform: rotateY(0deg);
+}
+#s6 .sandbox .cube .right.flat {
+  -webkit-transform: rotateY(0deg);
+  -moz-transform: rotateY(0deg);
+  -ms-transform: rotateY(0deg);
+  -o-transform: rotateY(0deg);
+  transform: rotateY(0deg);
+}
+#s6 .sandbox .cube .bottom.flat {
+  -webkit-transform: rotateX(0deg);
+  -moz-transform: rotateX(0deg);
+  -ms-transform: rotateX(0deg);
+  -o-transform: rotateX(0deg);
+  transform: rotateX(0deg);
+}
+#s6 .sandbox .cube .back.flat {
+  -webkit-transform: rotateX(0deg);
+  -moz-transform: rotateX(0deg);
+  -ms-transform: rotateX(0deg);
+  -o-transform: rotateX(0deg);
+  transform: rotateX(0deg);
+}
+
+@-moz-keyframes rotate-cube-slow {
+  0% {
+    -moz-transform: rotateY(0deg) translateY(2em);
+    transform: rotateY(0deg) translateY(2em);
+  }
+
+  100% {
+    -moz-transform: rotateY(360deg) translateY(2em);
+    transform: rotateY(360deg) translateY(2em);
+  }
+}
+
+@-webkit-keyframes rotate-cube-slow {
+  0% {
+    -webkit-transform: rotateY(0deg) translateY(2em);
+    transform: rotateY(0deg) translateY(2em);
+  }
+
+  100% {
+    -webkit-transform: rotateY(360deg) translateY(2em);
+    transform: rotateY(360deg) translateY(2em);
+  }
+}
+
+@-o-keyframes rotate-cube-slow {
+  0% {
+    -o-transform: rotateY(0deg) translateY(2em);
+    transform: rotateY(0deg) translateY(2em);
+  }
+
+  100% {
+    -o-transform: rotateY(360deg) translateY(2em);
+    transform: rotateY(360deg) translateY(2em);
+  }
+}
+
+@-ms-keyframes rotate-cube-slow {
+  0% {
+    -ms-transform: rotateY(0deg) translateY(2em);
+    transform: rotateY(0deg) translateY(2em);
+  }
+
+  100% {
+    -ms-transform: rotateY(360deg) translateY(2em);
+    transform: rotateY(360deg) translateY(2em);
+  }
+}
+
+@keyframes rotate-cube-slow {
+  0% {
+    transform: rotateY(0deg) translateY(2em);
+  }
+
+  100% {
+    transform: rotateY(360deg) translateY(2em);
+  }
+}
+
+/*
+ * Slinky
+ */
+#s7 {
+  overflow: hidden;
+  padding-left: 0;
+  padding-right: 0;
+  /* -- make sure to declare a default for every property that you want animated -- */
+  background-size: cover;
+  background: white url('/img/space-bg.jpg?1382325794') no-repeat 0 -40em;
+  -webkit-transition: background-position 1.2s ease-in-out;
+  -moz-transition: background-position 1.2s ease-in-out;
+  -ms-transition: background-position 1.2s ease-in-out;
+  -o-transition: background-position 1.2s ease-in-out;
+  transition: background-position 1.2s ease-in-out;
+}
+#s7 p {
+  padding-left: 1em;
+}
+#s7 p.slinky-desc,
+#s7 p.etwas-desc {
+  position: absolute;
+}
+#s7 .sandbox {
+  -webkit-transform-style: preserve-3d;
+  -moz-transform-style: preserve-3d;
+  -ms-transform-style: preserve-3d;
+  -o-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+}
+#s7 .slinky {
+  position: absolute;
+  top: 14em;
+  left: 14em;
+  -webkit-transform: rotateX(-90deg) rotateY(0deg) rotateZ(54deg) translateX(15em);
+  -moz-transform: rotateX(-90deg) rotateY(0deg) rotateZ(54deg) translateX(15em);
+  -ms-transform: rotateX(-90deg) rotateY(0deg) rotateZ(54deg) translateX(15em);
+  -o-transform: rotateX(-90deg) rotateY(0deg) rotateZ(54deg) translateX(15em);
+  transform: rotateX(-90deg) rotateY(0deg) rotateZ(54deg) translateX(15em);
+  -webkit-transform-origin: 50% 50%;
+  -moz-transform-origin: 50% 50%;
+  -ms-transform-origin: 50% 50%;
+  -o-transform-origin: 50% 50%;
+  transform-origin: 50% 50%;
+  -webkit-transform-style: preserve-3d;
+  -moz-transform-style: preserve-3d;
+  -ms-transform-style: preserve-3d;
+  -o-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+  -webkit-transition: all 1.25s ease-in-out;
+  -moz-transition: all 1.25s ease-in-out;
+  -ms-transition: all 1.25s ease-in-out;
+  -o-transition: all 1.25s ease-in-out;
+  transition: all 1.25s ease-in-out;
+}
+#s7 .slinky .segment {
+  float: none;
+  position: absolute;
+  top: -.275em;
+  left: -.275em;
+  z-index: 900;
+  width: 10em;
+  height: 10em;
+  border: .3em solid #888;
+  background: transparent;
+  -webkit-border-radius: 5em;
+  -moz-border-radius: 5em;
+  -ms-border-radius: 5em;
+  -o-border-radius: 5em;
+  border-radius: 5em;
+  -webkit-box-shadow: 0 0 0.07em 0.07em black, inset 0 0 0.07em 0.03em black, 0 0 3em rgba(0, 0, 0, 0.7);
+  -moz-box-shadow: 0 0 0.07em 0.07em black, inset 0 0 0.07em 0.03em black, 0 0 3em rgba(0, 0, 0, 0.7);
+  box-shadow: 0 0 0.07em 0.07em black, inset 0 0 0.07em 0.03em black, 0 0 3em rgba(0, 0, 0, 0.7);
+  -webkit-transform-origin: 0% 0%;
+  -moz-transform-origin: 0% 0%;
+  -ms-transform-origin: 0% 0%;
+  -o-transform-origin: 0% 0%;
+  transform-origin: 0% 0%;
+  -webkit-transform-style: preserve-3d;
+  -moz-transform-style: preserve-3d;
+  -ms-transform-style: preserve-3d;
+  -o-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+  -webkit-transition: all 0.5s ease-in-out;
+  -moz-transition: all 0.5s ease-in-out;
+  -ms-transition: all 0.5s ease-in-out;
+  -o-transition: all 0.5s ease-in-out;
+  transition: all 0.5s ease-in-out;
+}
+#s7 .slinky .segment .segment {
+  -webkit-transform: translateZ(-0.15em);
+  -moz-transform: translateZ(-0.15em);
+  -ms-transform: translateZ(-0.15em);
+  -o-transform: translateZ(-0.15em);
+  transform: translateZ(-0.15em);
+  -webkit-box-shadow: 0 0 0.07em 0.07em black, inset 0 0 0.07em 0.03em black;
+  -moz-box-shadow: 0 0 0.07em 0.07em black, inset 0 0 0.07em 0.03em black;
+  box-shadow: 0 0 0.07em 0.07em black, inset 0 0 0.07em 0.03em black;
+}
+#s7 .slinky.half .segment .segment {
+  -webkit-transform: translateZ(-0.15em) rotateY(5.1deg);
+  -moz-transform: translateZ(-0.15em) rotateY(5.1deg);
+  -ms-transform: translateZ(-0.15em) rotateY(5.1deg);
+  -o-transform: translateZ(-0.15em) rotateY(5.1deg);
+  transform: translateZ(-0.15em) rotateY(5.1deg);
+}
+#s7 .slinky.half .segment .segment.last {
+  -webkit-box-shadow: 0 0 0.07em 0.07em black, inset 0 0 0.07em 0.07em black, 0 0 3em rgba(0, 0, 0, 0.5);
+  -moz-box-shadow: 0 0 0.07em 0.07em black, inset 0 0 0.07em 0.07em black, 0 0 3em rgba(0, 0, 0, 0.5);
+  box-shadow: 0 0 0.07em 0.07em black, inset 0 0 0.07em 0.07em black, 0 0 3em rgba(0, 0, 0, 0.5);
+}
+#s7 .slinky.full > .segment {
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
+#s7 .slinky.full .segment .segment {
+  -webkit-transform: translateZ(-0.15em) rotateY(10.3deg);
+  -moz-transform: translateZ(-0.15em) rotateY(10.3deg);
+  -ms-transform: translateZ(-0.15em) rotateY(10.3deg);
+  -o-transform: translateZ(-0.15em) rotateY(10.3deg);
+  transform: translateZ(-0.15em) rotateY(10.3deg);
+}
+#s7 .slinky.move {
+  -webkit-transform: rotateX(-90deg) rotateY(0deg) rotateZ(154deg) translateX(25em) translateY(-15em) translateZ(-5em);
+  -moz-transform: rotateX(-90deg) rotateY(0deg) rotateZ(154deg) translateX(25em) translateY(-15em) translateZ(-5em);
+  -ms-transform: rotateX(-90deg) rotateY(0deg) rotateZ(154deg) translateX(25em) translateY(-15em) translateZ(-5em);
+  -o-transform: rotateX(-90deg) rotateY(0deg) rotateZ(154deg) translateX(25em) translateY(-15em) translateZ(-5em);
+  transform: rotateX(-90deg) rotateY(0deg) rotateZ(154deg) translateX(25em) translateY(-15em) translateZ(-5em);
+}
+#s7 .slinky.stretched {
+  -webkit-transition: all 2s ease-in-out;
+  -moz-transition: all 2s ease-in-out;
+  -ms-transition: all 2s ease-in-out;
+  -o-transition: all 2s ease-in-out;
+  transition: all 2s ease-in-out;
+}
+#s7 .slinky.stretched > .segment {
+  -webkit-transform: rotateY(120deg) rotateX(10deg) translateX(-3em);
+  -moz-transform: rotateY(120deg) rotateX(10deg) translateX(-3em);
+  -ms-transform: rotateY(120deg) rotateX(10deg) translateX(-3em);
+  -o-transform: rotateY(120deg) rotateX(10deg) translateX(-3em);
+  transform: rotateY(120deg) rotateX(10deg) translateX(-3em);
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
+#s7 .slinky.stretched .segment .segment {
+  -webkit-transform: translateZ(-1.16em) rotateY(-2deg);
+  -moz-transform: translateZ(-1.16em) rotateY(-2deg);
+  -ms-transform: translateZ(-1.16em) rotateY(-2deg);
+  -o-transform: translateZ(-1.16em) rotateY(-2deg);
+  transform: translateZ(-1.16em) rotateY(-2deg);
+}
+#s7 .slinky.oscillate > .segment {
+  -webkit-animation: slinky-base-osc 1s ease-in-out infinite alternate;
+  -moz-animation: slinky-base-osc 1s ease-in-out infinite alternate;
+  -ms-animation: slinky-base-osc 1s ease-in-out infinite alternate;
+  -o-animation: slinky-base-osc 1s ease-in-out infinite alternate;
+  animation: slinky-base-osc 1s ease-in-out infinite alternate;
+  -webkit-transform: rotateY(120deg) rotateX(10deg) translateX(-3em);
+  -moz-transform: rotateY(120deg) rotateX(10deg) translateX(-3em);
+  -ms-transform: rotateY(120deg) rotateX(10deg) translateX(-3em);
+  -o-transform: rotateY(120deg) rotateX(10deg) translateX(-3em);
+  transform: rotateY(120deg) rotateX(10deg) translateX(-3em);
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
+#s7 .slinky.oscillate .segment .segment {
+  -webkit-animation: slinky-segment-osc 1s ease-in-out infinite alternate;
+  -moz-animation: slinky-segment-osc 1s ease-in-out infinite alternate;
+  -ms-animation: slinky-segment-osc 1s ease-in-out infinite alternate;
+  -o-animation: slinky-segment-osc 1s ease-in-out infinite alternate;
+  animation: slinky-segment-osc 1s ease-in-out infinite alternate;
+  -webkit-transform: translateZ(-1.16em) rotateY(-2deg);
+  -moz-transform: translateZ(-1.16em) rotateY(-2deg);
+  -ms-transform: translateZ(-1.16em) rotateY(-2deg);
+  -o-transform: translateZ(-1.16em) rotateY(-2deg);
+  transform: translateZ(-1.16em) rotateY(-2deg);
+}
+#s7 .solar-system {
+  position: absolute;
+  opacity: 0;
+  -webkit-transition: opacity 1s ease-in-out;
+  -moz-transition: opacity 1s ease-in-out;
+  -ms-transition: opacity 1s ease-in-out;
+  -o-transition: opacity 1s ease-in-out;
+  transition: opacity 1s ease-in-out;
+  -webkit-animation: sun-move 120s linear infinite;
+  -moz-animation: sun-move 120s linear infinite;
+  -ms-animation: sun-move 120s linear infinite;
+  -o-animation: sun-move 120s linear infinite;
+  animation: sun-move 120s linear infinite;
+}
+#s7 .solar-system .sun {
+  position: absolute;
+  width: 2em;
+  height: 2em;
+  -webkit-border-radius: 1em;
+  -moz-border-radius: 1em;
+  -ms-border-radius: 1em;
+  -o-border-radius: 1em;
+  border-radius: 1em;
+  background: #fd0;
+  background-image: -webkit-gradient(radial, 1em 1em, 0, 1em 1em, 1.3, color-stop(0%, #ffff00), color-stop(100%, #ff7200));
+  background-image: -webkit-radial-gradient(1em 1em, #ffff00 0%, #ff7200 1.3em);
+  background-image: -moz-radial-gradient(1em 1em, #ffff00 0%, #ff7200 1.3em);
+  background-image: -o-radial-gradient(1em 1em, #ffff00 0%, #ff7200 1.3em);
+  background-image: -ms-radial-gradient(1em 1em, #ffff00 0%, #ff7200 1.3em);
+  background-image: radial-gradient(1em 1em, #ffff00 0%, #ff7200 1.3em);
+  -webkit-box-shadow: 0 0 0.6em 0.3em rgba(255, 153, 0, 0.5), inset 0 0 0.5em #ffaa00;
+  -moz-box-shadow: 0 0 0.6em 0.3em rgba(255, 153, 0, 0.5), inset 0 0 0.5em #ffaa00;
+  box-shadow: 0 0 0.6em 0.3em rgba(255, 153, 0, 0.5), inset 0 0 0.5em #ffaa00;
+  -webkit-transform: rotateZ(0deg);
+  -moz-transform: rotateZ(0deg);
+  -ms-transform: rotateZ(0deg);
+  -o-transform: rotateZ(0deg);
+  transform: rotateZ(0deg);
+}
+#s7 .solar-system .sun .earth {
+  position: absolute;
+  width: .8em;
+  height: .8em;
+  left: .5em;
+  top: .5em;
+  -webkit-border-radius: 0.6em;
+  -moz-border-radius: 0.6em;
+  -ms-border-radius: 0.6em;
+  -o-border-radius: 0.6em;
+  border-radius: 0.6em;
+  background-image: -webkit-gradient(radial, 0.6em 0.5em, 0, 0.6em 0.5em, 0.6, color-stop(0%, #0000ff), color-stop(100%, #1e90ff));
+  background-image: -webkit-radial-gradient(0.6em 0.5em, #0000ff 0%, #1e90ff 0.6em);
+  background-image: -moz-radial-gradient(0.6em 0.5em, #0000ff 0%, #1e90ff 0.6em);
+  background-image: -o-radial-gradient(0.6em 0.5em, #0000ff 0%, #1e90ff 0.6em);
+  background-image: -ms-radial-gradient(0.6em 0.5em, #0000ff 0%, #1e90ff 0.6em);
+  background-image: radial-gradient(0.6em 0.5em, #0000ff 0%, #1e90ff 0.6em);
+  -webkit-transform: translateX(3em);
+  -moz-transform: translateX(3em);
+  -ms-transform: translateX(3em);
+  -o-transform: translateX(3em);
+  transform: translateX(3em);
+  -webkit-transform-origin: -3.5em 0%;
+  -moz-transform-origin: -3.5em 0%;
+  -ms-transform-origin: -3.5em 0%;
+  -o-transform-origin: -3.5em 0%;
+  transform-origin: -3.5em 0%;
+  -webkit-animation: rotate-earth 10s linear infinite;
+  -moz-animation: rotate-earth 10s linear infinite;
+  -ms-animation: rotate-earth 10s linear infinite;
+  -o-animation: rotate-earth 10s linear infinite;
+  animation: rotate-earth 10s linear infinite;
+}
+#s7 .solar-system .sun .earth .moon {
+  position: absolute;
+  width: .3em;
+  height: .3em;
+  left: .32em;
+  top: .32em;
+  -webkit-border-radius: 0.4em;
+  -moz-border-radius: 0.4em;
+  -ms-border-radius: 0.4em;
+  -o-border-radius: 0.4em;
+  border-radius: 0.4em;
+  background-image: -webkit-gradient(radial, 0.26em 0.3em, 0, 0.26em 0.3em, 10, color-stop(0%, #cccccc), color-stop(100%, #777777));
+  background-image: -webkit-radial-gradient(0.26em 0.3em, #cccccc 0%, #777777 10px);
+  background-image: -moz-radial-gradient(0.26em 0.3em, #cccccc 0%, #777777 10px);
+  background-image: -o-radial-gradient(0.26em 0.3em, #cccccc 0%, #777777 10px);
+  background-image: -ms-radial-gradient(0.26em 0.3em, #cccccc 0%, #777777 10px);
+  background-image: radial-gradient(0.26em 0.3em, #cccccc 0%, #777777 10px);
+  -webkit-transform: translateX(1em);
+  -moz-transform: translateX(1em);
+  -ms-transform: translateX(1em);
+  -o-transform: translateX(1em);
+  transform: translateX(1em);
+  -webkit-transform-origin: -1.32em 0%;
+  -moz-transform-origin: -1.32em 0%;
+  -ms-transform-origin: -1.32em 0%;
+  -o-transform-origin: -1.32em 0%;
+  transform-origin: -1.32em 0%;
+  -webkit-animation: rotate-moon 4s linear infinite;
+  -moz-animation: rotate-moon 4s linear infinite;
+  -ms-animation: rotate-moon 4s linear infinite;
+  -o-animation: rotate-moon 4s linear infinite;
+  animation: rotate-moon 4s linear infinite;
+}
+#s7.space {
+  background-position: 0 0;
+  background-size: cover;
+  color: #fff;
+  text-shadow: 0 0 .2em #000;
+}
+#s7.space .solar-system {
+  opacity: 1;
+}
+
+@-moz-keyframes slinky-base-osc {
+  to {
+    -moz-transform: rotateY(132deg) rotateX(10deg) translateX(-3.2em);
+    transform: rotateY(132deg) rotateX(10deg) translateX(-3.2em);
+  }
+}
+
+@-webkit-keyframes slinky-base-osc {
+  to {
+    -webkit-transform: rotateY(132deg) rotateX(10deg) translateX(-3.2em);
+    transform: rotateY(132deg) rotateX(10deg) translateX(-3.2em);
+  }
+}
+
+@-o-keyframes slinky-base-osc {
+  to {
+    -o-transform: rotateY(132deg) rotateX(10deg) translateX(-3.2em);
+    transform: rotateY(132deg) rotateX(10deg) translateX(-3.2em);
+  }
+}
+
+@-ms-keyframes slinky-base-osc {
+  to {
+    -ms-transform: rotateY(132deg) rotateX(10deg) translateX(-3.2em);
+    transform: rotateY(132deg) rotateX(10deg) translateX(-3.2em);
+  }
+}
+
+@keyframes slinky-base-osc {
+  to {
+    transform: rotateY(132deg) rotateX(10deg) translateX(-3.2em);
+  }
+}
+
+@-moz-keyframes slinky-segment-osc {
+  to {
+    -moz-transform: translateZ(-1.36em) rotateY(-3deg);
+    transform: translateZ(-1.36em) rotateY(-3deg);
+  }
+}
+
+@-webkit-keyframes slinky-segment-osc {
+  to {
+    -webkit-transform: translateZ(-1.36em) rotateY(-3deg);
+    transform: translateZ(-1.36em) rotateY(-3deg);
+  }
+}
+
+@-o-keyframes slinky-segment-osc {
+  to {
+    -o-transform: translateZ(-1.36em) rotateY(-3deg);
+    transform: translateZ(-1.36em) rotateY(-3deg);
+  }
+}
+
+@-ms-keyframes slinky-segment-osc {
+  to {
+    -ms-transform: translateZ(-1.36em) rotateY(-3deg);
+    transform: translateZ(-1.36em) rotateY(-3deg);
+  }
+}
+
+@keyframes slinky-segment-osc {
+  to {
+    transform: translateZ(-1.36em) rotateY(-3deg);
+  }
+}
+
+@-moz-keyframes sun-move {
+  0% {
+    -moz-transform: translateX(37em) translateY(7em);
+    transform: translateX(37em) translateY(7em);
+  }
+
+  100% {
+    -moz-transform: translateX(-3em) translateY(5.5em);
+    transform: translateX(-3em) translateY(5.5em);
+  }
+}
+
+@-webkit-keyframes sun-move {
+  0% {
+    -webkit-transform: translateX(37em) translateY(7em);
+    transform: translateX(37em) translateY(7em);
+  }
+
+  100% {
+    -webkit-transform: translateX(-3em) translateY(5.5em);
+    transform: translateX(-3em) translateY(5.5em);
+  }
+}
+
+@-o-keyframes sun-move {
+  0% {
+    -o-transform: translateX(37em) translateY(7em);
+    transform: translateX(37em) translateY(7em);
+  }
+
+  100% {
+    -o-transform: translateX(-3em) translateY(5.5em);
+    transform: translateX(-3em) translateY(5.5em);
+  }
+}
+
+@-ms-keyframes sun-move {
+  0% {
+    -ms-transform: translateX(37em) translateY(7em);
+    transform: translateX(37em) translateY(7em);
+  }
+
+  100% {
+    -ms-transform: translateX(-3em) translateY(5.5em);
+    transform: translateX(-3em) translateY(5.5em);
+  }
+}
+
+@keyframes sun-move {
+  0% {
+    transform: translateX(37em) translateY(7em);
+  }
+
+  100% {
+    transform: translateX(-3em) translateY(5.5em);
+  }
+}
+
+@-moz-keyframes rotate-earth {
+  0% {
+    -moz-transform: translateX(3.5em) rotateZ(0deg);
+    transform: translateX(3.5em) rotateZ(0deg);
+  }
+
+  100% {
+    -moz-transform: translateX(3.5em) rotateZ(360deg);
+    transform: translateX(3.5em) rotateZ(360deg);
+  }
+}
+
+@-webkit-keyframes rotate-earth {
+  0% {
+    -webkit-transform: translateX(3.5em) rotateZ(0deg);
+    transform: translateX(3.5em) rotateZ(0deg);
+  }
+
+  100% {
+    -webkit-transform: translateX(3.5em) rotateZ(360deg);
+    transform: translateX(3.5em) rotateZ(360deg);
+  }
+}
+
+@-o-keyframes rotate-earth {
+  0% {
+    -o-transform: translateX(3.5em) rotateZ(0deg);
+    transform: translateX(3.5em) rotateZ(0deg);
+  }
+
+  100% {
+    -o-transform: translateX(3.5em) rotateZ(360deg);
+    transform: translateX(3.5em) rotateZ(360deg);
+  }
+}
+
+@-ms-keyframes rotate-earth {
+  0% {
+    -ms-transform: translateX(3.5em) rotateZ(0deg);
+    transform: translateX(3.5em) rotateZ(0deg);
+  }
+
+  100% {
+    -ms-transform: translateX(3.5em) rotateZ(360deg);
+    transform: translateX(3.5em) rotateZ(360deg);
+  }
+}
+
+@keyframes rotate-earth {
+  0% {
+    transform: translateX(3.5em) rotateZ(0deg);
+  }
+
+  100% {
+    transform: translateX(3.5em) rotateZ(360deg);
+  }
+}
+
+@-moz-keyframes rotate-moon {
+  0% {
+    -moz-transform: translateX(2em) rotateZ(0deg);
+    transform: translateX(2em) rotateZ(0deg);
+  }
+
+  100% {
+    -moz-transform: translateX(2em) rotateZ(360deg);
+    transform: translateX(2em) rotateZ(360deg);
+  }
+}
+
+@-webkit-keyframes rotate-moon {
+  0% {
+    -webkit-transform: translateX(2em) rotateZ(0deg);
+    transform: translateX(2em) rotateZ(0deg);
+  }
+
+  100% {
+    -webkit-transform: translateX(2em) rotateZ(360deg);
+    transform: translateX(2em) rotateZ(360deg);
+  }
+}
+
+@-o-keyframes rotate-moon {
+  0% {
+    -o-transform: translateX(2em) rotateZ(0deg);
+    transform: translateX(2em) rotateZ(0deg);
+  }
+
+  100% {
+    -o-transform: translateX(2em) rotateZ(360deg);
+    transform: translateX(2em) rotateZ(360deg);
+  }
+}
+
+@-ms-keyframes rotate-moon {
+  0% {
+    -ms-transform: translateX(2em) rotateZ(0deg);
+    transform: translateX(2em) rotateZ(0deg);
+  }
+
+  100% {
+    -ms-transform: translateX(2em) rotateZ(360deg);
+    transform: translateX(2em) rotateZ(360deg);
+  }
+}
+
+@keyframes rotate-moon {
+  0% {
+    transform: translateX(2em) rotateZ(0deg);
+  }
+
+  100% {
+    transform: translateX(2em) rotateZ(360deg);
+  }
+}
+
+/*
+ * Stone tile
+ */
+#s8 {
+  background: black url('/img/tile-bg.jpg?1382325794') no-repeat -10px top;
+  color: #000;
+  overflow: hidden;
+  -webkit-perspective: 470px;
+  -moz-perspective: 470px;
+  -ms-perspective: 470px;
+  -o-perspective: 470px;
+  perspective: 470px;
+  -webkit-perspective-origin: 56% 18%;
+  -moz-perspective-origin: 56% 18%;
+  -ms-perspective-origin: 56% 18%;
+  -o-perspective-origin: 56% 18%;
+  perspective-origin: 56% 18%;
+  -webkit-transform-style: preserve-3d;
+  -moz-transform-style: preserve-3d;
+  -ms-transform-style: preserve-3d;
+  -o-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+  -webkit-backface-visibility: visible;
+  -moz-backface-visibility: visible;
+  -ms-backface-visibility: visible;
+  -o-backface-visibility: visible;
+  backface-visibility: visible;
+  width: 1340px;
+  /* debugging styles */
+  /* -- Go Download Chrome - http://www.google.com/chrome -- */
+}
+#s8 a,
+#s8 p,
+#s8 #other ul li a {
+  color: #fff;
+  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
+}
+#s8 h1 a {
+  color: #000;
+  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
+}
+.csstransforms3d #s8 div#fallback {
+  display: none;
+}
+.csstransforms3d #s8 #floor {
+  width: 1860px;
+  height: 438px;
+  background: #222;
+  position: absolute;
+  left: 0;
+  top: 0;
+  -webkit-transform: rotateX(66.3deg) rotateY(0.6deg) rotateZ(0deg) translate3d(-419px, 80px, -218px);
+  -moz-transform: rotateX(66.3deg) rotateY(0.6deg) rotateZ(0deg) translate3d(-419px, 80px, -218px);
+  -ms-transform: rotateX(66.3deg) rotateY(0.6deg) rotateZ(0deg) translate3d(-419px, 80px, -218px);
+  -o-transform: rotateX(66.3deg) rotateY(0.6deg) rotateZ(0deg) translate3d(-419px, 80px, -218px);
+  transform: rotateX(66.3deg) rotateY(0.6deg) rotateZ(0deg) translate3d(-419px, 80px, -218px);
+  -webkit-transform-style: preserve-3d;
+  -moz-transform-style: preserve-3d;
+  -ms-transform-style: preserve-3d;
+  -o-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+}
+.csstransforms3d #s8 #base {
+  width: inherit;
+  height: inherit;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 15;
+  -webkit-transform: translate3d(0, -30px, -10px) rotateX(4deg);
+  -moz-transform: translate3d(0, -30px, -10px) rotateX(4deg);
+  -ms-transform: translate3d(0, -30px, -10px) rotateX(4deg);
+  -o-transform: translate3d(0, -30px, -10px) rotateX(4deg);
+  transform: translate3d(0, -30px, -10px) rotateX(4deg);
+  -webkit-transform-style: preserve-3d;
+  -moz-transform-style: preserve-3d;
+  -ms-transform-style: preserve-3d;
+  -o-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+}
+#s8 .panel {
+  float: left;
+  width: 457px;
+  height: 142px;
+  margin: 2px 4px;
+  background: #333;
+  -webkit-transform-style: preserve-3d;
+  -moz-transform-style: preserve-3d;
+  -ms-transform-style: preserve-3d;
+  -o-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+  -webkit-transform-origin: bottom right;
+  -moz-transform-origin: bottom right;
+  -ms-transform-origin: bottom right;
+  -o-transform-origin: bottom right;
+  transform-origin: bottom right;
+  -webkit-transform: translate3d(0, 0, 7px);
+  -moz-transform: translate3d(0, 0, 7px);
+  -ms-transform: translate3d(0, 0, 7px);
+  -o-transform: translate3d(0, 0, 7px);
+  transform: translate3d(0, 0, 7px);
+}
+#s8 .panel,
+#s8 .panel .shadow {
+  -webkit-transition: 0.3s all ease-in-out;
+  -moz-transition: 0.3s all ease-in-out;
+  -ms-transition: 0.3s all ease-in-out;
+  -o-transition: 0.3s all ease-in-out;
+  transition: 0.3s all ease-in-out;
+}
+#s8 .panel .left {
+  width: 124px;
+  height: 6px;
+  background: #444;
+  position: absolute;
+  left: 0;
+  box-shadow: 0 0 2px #444;
+  -webkit-transform-origin: bottom left;
+  -moz-transform-origin: bottom left;
+  -ms-transform-origin: bottom left;
+  -o-transform-origin: bottom left;
+  transform-origin: bottom left;
+  -webkit-transform: rotateX(90deg) rotateY(90deg) translate3d(-6px, 0, 0);
+  -moz-transform: rotateX(90deg) rotateY(90deg) translate3d(-6px, 0, 0);
+  -ms-transform: rotateX(90deg) rotateY(90deg) translate3d(-6px, 0, 0);
+  -o-transform: rotateX(90deg) rotateY(90deg) translate3d(-6px, 0, 0);
+  transform: rotateX(90deg) rotateY(90deg) translate3d(-6px, 0, 0);
+}
+#s8 .panel .right {
+  width: 124px;
+  height: 6px;
+  background: #444;
+  position: absolute;
+  right: 0;
+  box-shadow: 0 0 2px #444;
+  -webkit-transform-origin: bottom right;
+  -moz-transform-origin: bottom right;
+  -ms-transform-origin: bottom right;
+  -o-transform-origin: bottom right;
+  transform-origin: bottom right;
+  -webkit-transform: rotateX(90deg) rotateY(90deg) translate3d(118px, 0, 0);
+  -moz-transform: rotateX(90deg) rotateY(90deg) translate3d(118px, 0, 0);
+  -ms-transform: rotateX(90deg) rotateY(90deg) translate3d(118px, 0, 0);
+  -o-transform: rotateX(90deg) rotateY(90deg) translate3d(118px, 0, 0);
+  transform: rotateX(90deg) rotateY(90deg) translate3d(118px, 0, 0);
+}
+#s8 .panel .front {
+  width: inherit;
+  height: 6px;
+  background: #666;
+  position: absolute;
+  bottom: 0;
+  box-shadow: 0 0 4px #666;
+  -webkit-transform-origin: bottom center;
+  -moz-transform-origin: bottom center;
+  -ms-transform-origin: bottom center;
+  -o-transform-origin: bottom center;
+  transform-origin: bottom center;
+  -webkit-transform: rotateX(90deg) translate3d(0, 0, 0);
+  -moz-transform: rotateX(90deg) translate3d(0, 0, 0);
+  -ms-transform: rotateX(90deg) translate3d(0, 0, 0);
+  -o-transform: rotateX(90deg) translate3d(0, 0, 0);
+  transform: rotateX(90deg) translate3d(0, 0, 0);
+}
+#s8 .panel .back {
+  width: inherit;
+  height: 6px;
+  background: #666;
+  position: absolute;
+  top: 0;
+  box-shadow: 0 0 4px #666;
+  -webkit-transform-origin: top center;
+  -moz-transform-origin: top center;
+  -ms-transform-origin: top center;
+  -o-transform-origin: top center;
+  transform-origin: top center;
+  -webkit-transform: rotateX(90deg) translate3d(0, -6px, 0);
+  -moz-transform: rotateX(90deg) translate3d(0, -6px, 0);
+  -ms-transform: rotateX(90deg) translate3d(0, -6px, 0);
+  -o-transform: rotateX(90deg) translate3d(0, -6px, 0);
+  transform: rotateX(90deg) translate3d(0, -6px, 0);
+}
+#s8 .panel .top {
+  width: inherit;
+  height: inherit;
+  background: url('/img/tile-4.jpg?1382325794');
+  -webkit-transform: translate3d(0, 0, 1px);
+  -moz-transform: translate3d(0, 0, 1px);
+  -ms-transform: translate3d(0, 0, 1px);
+  -o-transform: translate3d(0, 0, 1px);
+  transform: translate3d(0, 0, 1px);
+}
+#s8 .panel .shadow {
+  width: inherit;
+  height: inherit;
+  position: absolute;
+  background: rgba(0, 0, 0, 0);
+  -webkit-transform: translate3d(0, -122px, -5px);
+  -moz-transform: translate3d(0, -122px, -5px);
+  -ms-transform: translate3d(0, -122px, -5px);
+  -o-transform: translate3d(0, -122px, -5px);
+  transform: translate3d(0, -122px, -5px);
+  -webkit-box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0);
+  -moz-box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0);
+  box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0);
+}
+#s8 .panel:nth-child(3n+1) .top {
+  background-position: 70% 80%;
+}
+#s8 .panel:nth-child(5n) .top {
+  background: url('/img/tile-2.jpg?1382325794') 50% 50%;
+}
+#s8 .panel:hover,
+#s8 .panel.lift {
+  -webkit-transform: translate3d(0, 0, 25px) rotateY(3deg);
+  -moz-transform: translate3d(0, 0, 25px) rotateY(3deg);
+  -ms-transform: translate3d(0, 0, 25px) rotateY(3deg);
+  -o-transform: translate3d(0, 0, 25px) rotateY(3deg);
+  transform: translate3d(0, 0, 25px) rotateY(3deg);
+}
+#s8 .panel:hover .shadow,
+#s8 .panel.lift .shadow {
+  background: rgba(0, 0, 0, 0.4);
+  -webkit-transform: translate3d(0, -122px, -25px) rotateY(-3deg);
+  -moz-transform: translate3d(0, -122px, -25px) rotateY(-3deg);
+  -ms-transform: translate3d(0, -122px, -25px) rotateY(-3deg);
+  -o-transform: translate3d(0, -122px, -25px) rotateY(-3deg);
+  transform: translate3d(0, -122px, -25px) rotateY(-3deg);
+  -webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.4);
+  -moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.4);
+  box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.4);
+}
+#s8 .panel:nth-child(4n+1),
+#s8 .panel:nth-child(4n+2) {
+  -webkit-transform-origin: bottom left;
+  -moz-transform-origin: bottom left;
+  -ms-transform-origin: bottom left;
+  -o-transform-origin: bottom left;
+  transform-origin: bottom left;
+}
+#s8 .panel:nth-child(4n+2):hover,
+#s8 .panel:nth-child(4n+1):hover,
+#s8 .panel.lift:nth-child(4n+2),
+#s8 .panel.lift:nth-child(4n+1) {
+  -webkit-transform: translate3d(0, 0, 25px) rotateY(-3deg);
+  -moz-transform: translate3d(0, 0, 25px) rotateY(-3deg);
+  -ms-transform: translate3d(0, 0, 25px) rotateY(-3deg);
+  -o-transform: translate3d(0, 0, 25px) rotateY(-3deg);
+  transform: translate3d(0, 0, 25px) rotateY(-3deg);
+}
+#s8 .panel:nth-child(4n+2):hover .shadow,
+#s8 .panel:nth-child(4n+1):hover .shadow,
+#s8 .panel.lift:nth-child(4n+2) .shadow,
+#s8 .panel.lift:nth-child(4n+1) .shadow {
+  -webkit-transform: translate3d(0, -122px, -25px) rotateY(3deg);
+  -moz-transform: translate3d(0, -122px, -25px) rotateY(3deg);
+  -ms-transform: translate3d(0, -122px, -25px) rotateY(3deg);
+  -o-transform: translate3d(0, -122px, -25px) rotateY(3deg);
+  transform: translate3d(0, -122px, -25px) rotateY(3deg);
+}
+body.wireframe #s8 div#floor {
+  background: #f00;
+}
+#s8 html.no-csstransforms3d div#floor {
+  display: none;
+}
+#s8 html.no-csstransforms3d div#fallback {
+  display: block;
+  width: 800px;
+  padding: 2em;
+  background: rgba(255, 255, 255, 0.5);
+  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4);
+}
+
+/*
+ * Blurry layers
+ */
+#s9 {
+  -webkit-perspective: 70em;
+  -moz-perspective: 70em;
+  -ms-perspective: 70em;
+  -o-perspective: 70em;
+  perspective: 70em;
+  -webkit-perspective-origin: 50% -20%;
+  -moz-perspective-origin: 50% -20%;
+  -ms-perspective-origin: 50% -20%;
+  -o-perspective-origin: 50% -20%;
+  perspective-origin: 50% -20%;
+  -webkit-transform-style: preserve-3d;
+  -moz-transform-style: preserve-3d;
+  -ms-transform-style: preserve-3d;
+  -o-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+}
+#s9 .intro {
+  -webkit-transform: translateZ(10em) translateY(-1em);
+  -moz-transform: translateZ(10em) translateY(-1em);
+  -ms-transform: translateZ(10em) translateY(-1em);
+  -o-transform: translateZ(10em) translateY(-1em);
+  transform: translateZ(10em) translateY(-1em);
+  -webkit-filter: blur(0.2em);
+  opacity: 0;
+}
+#s9 .intro.show {
+  -webkit-transform: translateZ(0em) translateY(0em);
+  -moz-transform: translateZ(0em) translateY(0em);
+  -ms-transform: translateZ(0em) translateY(0em);
+  -o-transform: translateZ(0em) translateY(0em);
+  transform: translateZ(0em) translateY(0em);
+  -webkit-filter: blur(0em);
+  opacity: 1;
+}
+#s9 .layer {
+  background: #fff;
+  width: 12em;
+  height: 6em;
+  color: #000;
+  border: 10px solid #333;
+  border-radius: 20px;
+  text-align: center;
+  opacity: 0;
+  position: absolute;
+  top: 7em;
+  left: 50%;
+  margin-left: -6em;
+  -webkit-transform: rotateY(0deg);
+  -moz-transform: rotateY(0deg);
+  -ms-transform: rotateY(0deg);
+  -o-transform: rotateY(0deg);
+  transform: rotateY(0deg);
+}
+#s9 .layer.show {
+  opacity: 1;
+}
+#s9 .layer span {
+  font-size: 1.4em;
+}
+#s9 .back {
+  -webkit-transform: rotateY(0) translateY(0em) translateZ(2em);
+  -moz-transform: rotateY(0) translateY(0em) translateZ(2em);
+  -ms-transform: rotateY(0) translateY(0em) translateZ(2em);
+  -o-transform: rotateY(0) translateY(0em) translateZ(2em);
+  transform: rotateY(0) translateY(0em) translateZ(2em);
+}
+#s9 .middle {
+  -webkit-transform: rotateY(0) translateY(0.2em) translateZ(11.5em);
+  -moz-transform: rotateY(0) translateY(0.2em) translateZ(11.5em);
+  -ms-transform: rotateY(0) translateY(0.2em) translateZ(11.5em);
+  -o-transform: rotateY(0) translateY(0.2em) translateZ(11.5em);
+  transform: rotateY(0) translateY(0.2em) translateZ(11.5em);
+  -webkit-filter: blur(0.1em);
+}
+#s9 .front {
+  -webkit-transform: rotateY(0) translateY(0.4em) translateZ(20em);
+  -moz-transform: rotateY(0) translateY(0.4em) translateZ(20em);
+  -ms-transform: rotateY(0) translateY(0.4em) translateZ(20em);
+  -o-transform: rotateY(0) translateY(0.4em) translateZ(20em);
+  transform: rotateY(0) translateY(0.4em) translateZ(20em);
+  -webkit-filter: blur(0.3em);
+}
+
+/*
+ * The end
+ */
+#s10 {
+  position: relative;
+  -webkit-perspective: 1200px;
+  -moz-perspective: 1200px;
+  -ms-perspective: 1200px;
+  -o-perspective: 1200px;
+  perspective: 1200px;
+  -webkit-transform-style: preserve-3d;
+  -moz-transform-style: preserve-3d;
+  -ms-transform-style: preserve-3d;
+  -o-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+}
+#s10 .de {
+  position: absolute;
+  top: 6em;
+  left: 2em;
+  -webkit-transition: none;
+  -moz-transition: none;
+  -ms-transition: none;
+  -o-transition: none;
+  transition: none;
+}
+#s10 .de.translate {
+  -webkit-animation: de-translate 5s ease-in-out infinite;
+  -moz-animation: de-translate 5s ease-in-out infinite;
+  -ms-animation: de-translate 5s ease-in-out infinite;
+  -o-animation: de-translate 5s ease-in-out infinite;
+  animation: de-translate 5s ease-in-out infinite;
+}
+#s10 .de.rotate {
+  -webkit-animation: de-rotate 5s linear infinite;
+  -moz-animation: de-rotate 5s linear infinite;
+  -ms-animation: de-rotate 5s linear infinite;
+  -o-animation: de-rotate 5s linear infinite;
+  animation: de-rotate 5s linear infinite;
+}
+#s10 .de.transform-origin {
+  -webkit-animation: de-transform-origin 5s linear infinite;
+  -moz-animation: de-transform-origin 5s linear infinite;
+  -ms-animation: de-transform-origin 5s linear infinite;
+  -o-animation: de-transform-origin 5s linear infinite;
+  animation: de-transform-origin 5s linear infinite;
+  -webkit-transform-origin: 100% 0%;
+  -moz-transform-origin: 100% 0%;
+  -ms-transform-origin: 100% 0%;
+  -o-transform-origin: 100% 0%;
+  transform-origin: 100% 0%;
+}
+#s10 .de.backface-visibility {
+  -webkit-backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  -ms-backface-visibility: hidden;
+  -o-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+#s10 .intro {
+  position: absolute;
+}
+#s10 .c {
+  width: 50%;
+  float: right;
+  margin-top: 3.5em;
+}
+#s10 .c h3 {
+  font-size: 1.2em;
+}
+#s10 .c .active code {
+  font-weight: 700;
+}
+
+@-moz-keyframes de-translate {
+  50% {
+    -moz-transform: translateX(9em);
+    transform: translateX(9em);
+  }
+}
+
+@-webkit-keyframes de-translate {
+  50% {
+    -webkit-transform: translateX(9em);
+    transform: translateX(9em);
+  }
+}
+
+@-o-keyframes de-translate {
+  50% {
+    -o-transform: translateX(9em);
+    transform: translateX(9em);
+  }
+}
+
+@-ms-keyframes de-translate {
+  50% {
+    -ms-transform: translateX(9em);
+    transform: translateX(9em);
+  }
+}
+
+@keyframes de-translate {
+  50% {
+    transform: translateX(9em);
+  }
+}
+
+@-moz-keyframes de-rotate {
+  from {
+    -moz-transform: rotateY(0deg);
+    transform: rotateY(0deg);
+  }
+
+  to {
+    -moz-transform: rotateY(360deg);
+    transform: rotateY(360deg);
+  }
+}
+
+@-webkit-keyframes de-rotate {
+  from {
+    -webkit-transform: rotateY(0deg);
+    transform: rotateY(0deg);
+  }
+
+  to {
+    -webkit-transform: rotateY(360deg);
+    transform: rotateY(360deg);
+  }
+}
+
+@-o-keyframes de-rotate {
+  from {
+    -o-transform: rotateY(0deg);
+    transform: rotateY(0deg);
+  }
+
+  to {
+    -o-transform: rotateY(360deg);
+    transform: rotateY(360deg);
+  }
+}
+
+@-ms-keyframes de-rotate {
+  from {
+    -ms-transform: rotateY(0deg);
+    transform: rotateY(0deg);
+  }
+
+  to {
+    -ms-transform: rotateY(360deg);
+    transform: rotateY(360deg);
+  }
+}
+
+@keyframes de-rotate {
+  from {
+    transform: rotateY(0deg);
+  }
+
+  to {
+    transform: rotateY(360deg);
+  }
+}
+
+@-moz-keyframes de-transform-origin {
+  50% {
+    -moz-transform: rotateY(180deg);
+    transform: rotateY(180deg);
+  }
+}
+
+@-webkit-keyframes de-transform-origin {
+  50% {
+    -webkit-transform: rotateY(180deg);
+    transform: rotateY(180deg);
+  }
+}
+
+@-o-keyframes de-transform-origin {
+  50% {
+    -o-transform: rotateY(180deg);
+    transform: rotateY(180deg);
+  }
+}
+
+@-ms-keyframes de-transform-origin {
+  50% {
+    -ms-transform: rotateY(180deg);
+    transform: rotateY(180deg);
+  }
+}
+
+@keyframes de-transform-origin {
+  50% {
+    transform: rotateY(180deg);
+  }
+}
+
+/*
+ * Wall o' links 'n' resources
+ */
+/*
+ * Contact me
+ */
+#s12 .contact {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* Mobile waring ----------------------------------------------------------- */
+.js main {
+  display: none;
+}
+
+@media (min-width: 1200px) {
+  .mobile-warning {
+    display: none;
+  }
+
+  .js main {
+    display: block;
+  }
+}
+