@import url("http://fonts.googleapis.com/css?family=Rambla:400,700,400italic");
/* 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, #s-title .instructions, #s-intro .word, #s-css .slash, #s-paper .sandbox .cube.labels .back:before, #s-ames .ames .h, #s-ames .ames .h-cover, #s-ames .ames .v, #s-alignment .segments .segment, #s-end .highlight {
  display: inline-block;
}

.show {
  opacity: 1 !important;
}

.hide {
  opacity: 0 !important;
}

.arrow-box, #s-css section.everything {
  position: relative;
  background: #cccccc;
  border: 0.2em solid #eeeeee;
}
.arrow-box:after, #s-css section.everything:after, .arrow-box:before, #s-css section.everything:before {
  bottom: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.arrow-box:after, #s-css section.everything:after {
  border-color: rgba(136, 183, 213, 0);
  border-bottom-color: #cccccc;
  border-width: .6em;
  left: 75%;
  margin-left: -5.1em;
}
.arrow-box:before, #s-css section.everything:before {
  border-color: rgba(194, 225, 245, 0);
  border-bottom-color: #eeeeee;
  border-width: .86em;
  left: 75%;
  margin-left: -5.355em;
}

* {
  -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: 2em;
}
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: 22em;
  padding: 1em;
  margin: 16% 0;
  box-shadow: 0 5px 10px rgba(51, 51, 51, 0.1);
  background: #fff;
  position: relative;
  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;
}
main article.break {
  background: #003;
  color: #fff;
}

.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;
}

.compat {
  width: 14em;
  max-height: 2em;
  overflow: hidden;
  padding: .4em;
  font-size: .4em;
  border: #ddd;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #eeeeee));
  background: -webkit-linear-gradient(#ffffff, #eeeeee);
  background: -moz-linear-gradient(#ffffff, #eeeeee);
  background: -o-linear-gradient(#ffffff, #eeeeee);
  background: -ms-linear-gradient(#ffffff, #eeeeee);
  background: linear-gradient(#ffffff, #eeeeee);
  -webkit-box-shadow: 0 0.1em 0.35em rgba(0, 0, 0, 0.45);
  -moz-box-shadow: 0 0.1em 0.35em rgba(0, 0, 0, 0.45);
  box-shadow: 0 0.1em 0.35em rgba(0, 0, 0, 0.45);
  position: absolute;
  top: 0;
  right: 0;
  z-index: 500;
  -webkit-transform: translateX(-1em) translateY(1em);
  -moz-transform: translateX(-1em) translateY(1em);
  -ms-transform: translateX(-1em) translateY(1em);
  -o-transform: translateX(-1em) translateY(1em);
  transform: translateX(-1em) translateY(1em);
}
.compat .reqs {
  display: block;
  margin-bottom: .4em;
}
.csstransforms3d .compat .csstransforms3d, .csstransforms .compat .csstransforms, .csstransitions .compat .csstransitions, .cssanimations .compat .cssanimations, .cssfilters .compat .cssfilters {
  background: #9d9;
  border: 1px solid #80aa80;
  padding: 2px;
  margin: 2px;
}
.no-csstransforms3d .compat .csstransforms3d, .no-csstransforms .compat .csstransforms, .no-csstransitions .compat .csstransitions, .no-cssanimations .compat .cssanimations, .no-cssfilters .compat .cssfilters {
  background: #d99;
  border: 1px solid #aa8080;
  padding: 2px;
  margin: 2px;
}
.compat:hover, .compat:focus, .compat.focus {
  max-height: 10em;
}

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: 1.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;
}

.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
 */
#s-title {
  -webkit-perspective: 10em;
  -moz-perspective: 10em;
  -ms-perspective: 10em;
  -o-perspective: 10em;
  perspective: 10em;
  -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 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;
}
#s-title h1 {
  text-align: center;
  font-size: 2.5em;
  line-height: .9em;
  position: absolute;
  top: 1em;
}
#s-title .fun.active {
  opacity: 1;
  color: #f0f;
  background: #0f0;
  -webkit-transform: rotateY(16deg) rotateZ(6deg) translateX(0.8em);
  -moz-transform: rotateY(16deg) rotateZ(6deg) translateX(0.8em);
  -ms-transform: rotateY(16deg) rotateZ(6deg) translateX(0.8em);
  -o-transform: rotateY(16deg) rotateZ(6deg) translateX(0.8em);
  transform: rotateY(16deg) rotateZ(6deg) translateX(0.8em);
  -webkit-transform-origin: 150% 50%;
  -moz-transform-origin: 150% 50%;
  -ms-transform-origin: 150% 50%;
  -o-transform-origin: 150% 50%;
  transform-origin: 150% 50%;
  -webkit-box-shadow: 0 0 0.1em #009999;
  -moz-box-shadow: 0 0 0.1em #009999;
  box-shadow: 0 0 0.1em #009999;
  position: relative;
  z-index: 500;
}
#s-title .and.active {
  -webkit-transform: scale(0.75) translateX(0.75em) translateY(0.2em);
  -moz-transform: scale(0.75) translateX(0.75em) translateY(0.2em);
  -ms-transform: scale(0.75) translateX(0.75em) translateY(0.2em);
  -o-transform: scale(0.75) translateX(0.75em) translateY(0.2em);
  transform: scale(0.75) translateX(0.75em) translateY(0.2em);
  opacity: .7;
}
#s-title .games.active {
  -webkit-transform: rotateY(-370deg) translateX(0em) translateY(-0.7em) translateZ(0.4em);
  -moz-transform: rotateY(-370deg) translateX(0em) translateY(-0.7em) translateZ(0.4em);
  -ms-transform: rotateY(-370deg) translateX(0em) translateY(-0.7em) translateZ(0.4em);
  -o-transform: rotateY(-370deg) translateX(0em) translateY(-0.7em) translateZ(0.4em);
  transform: rotateY(-370deg) translateX(0em) translateY(-0.7em) translateZ(0.4em);
  color: #00f;
  background: #ff0;
  -webkit-box-shadow: 0 0 0.1em #999900;
  -moz-box-shadow: 0 0 0.1em #999900;
  box-shadow: 0 0 0.1em #999900;
  position: relative;
  z-index: 500;
}
#s-title .with.active {
  -webkit-transform: translateX(-2em) translateY(1em);
  -moz-transform: translateX(-2em) translateY(1em);
  -ms-transform: translateX(-2em) translateY(1em);
  -o-transform: translateX(-2em) translateY(1em);
  transform: translateX(-2em) translateY(1em);
}
#s-title .with.active .css {
  font-size: 1.3em;
}
#s-title .css.active {
  color: #000;
  text-shadow: 2px -2px 0 white, 0.1em -0.05em 0 rgba(0, 0, 255, 0.7), 0.2em -0.1em 0 rgba(255, 0, 255, 0.6), 0.3em -0.15em 0 rgba(136, 255, 68, 0.4), 0.4em -0.2em 0 rgba(255, 255, 0, 0.2), -2px 2px 0 white, -0.05em 0.1em 0 rgba(0, 0, 255, 0.7), -0.1em 0.2em 0 rgba(255, 0, 255, 0.6), -0.15em 0.3em 0 rgba(136, 255, 68, 0.4), -0.2em 0.4em 0 rgba(255, 255, 0, 0.2);
}
#s-title .three.active {
  color: #f00;
  -webkit-filter: blur(0.1em);
  -webkit-transform: rotateY(2deg);
  -moz-transform: rotateY(2deg);
  -ms-transform: rotateY(2deg);
  -o-transform: rotateY(2deg);
  transform: rotateY(2deg);
}
#s-title .instructions {
  opacity: 1;
  position: absolute;
  bottom: 2em;
  -webkit-transform-origin: 25% 50%;
  -moz-transform-origin: 25% 50%;
  -ms-transform-origin: 25% 50%;
  -o-transform-origin: 25% 50%;
  transform-origin: 25% 50%;
  -webkit-animation: "throbber" 2s ease-in-out 4;
  -moz-animation: "throbber" 2s ease-in-out 4;
  -ms-animation: "throbber" 2s ease-in-out 4;
  -o-animation: "throbber" 2s ease-in-out 4;
  animation: "throbber" 2s ease-in-out 4;
}

@-moz-keyframes throbber {
  50% {
    opacity: .5;
    -moz-transform: scale(0.95);
    transform: scale(0.95);
  }
}

@-webkit-keyframes throbber {
  50% {
    opacity: .5;
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
  }
}

@-o-keyframes throbber {
  50% {
    opacity: .5;
    -o-transform: scale(0.95);
    transform: scale(0.95);
  }
}

@-ms-keyframes throbber {
  50% {
    opacity: .5;
    -ms-transform: scale(0.95);
    transform: scale(0.95);
  }
}

@keyframes throbber {
  50% {
    opacity: .5;
    transform: scale(0.95);
  }
}

#s-background h2 .twitter {
  opacity: 0;
  position: relative;
  left: 5em;
}
#s-background .fk {
  opacity: 0;
  width: 300px;
  height: 300px;
  margin-left: -150px;
  background: url('/fun-games-css/img/4k-logo-square-500px.png?1363067343') no-repeat left top;
  background-size: contain;
  position: absolute;
  bottom: 1.2em;
  left: 50%;
}
#s-background .fk.push {
  left: 80%;
}
#s-background p {
  opacity: 1;
}
#s-background p.fade {
  opacity: .6;
}

#s-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;
  -webkit-perspective: 20em;
  -moz-perspective: 20em;
  -ms-perspective: 20em;
  -o-perspective: 20em;
  perspective: 20em;
  position: relative;
}
#s-intro .word {
  position: relative;
  opacity: 0;
  font-family: times;
  color: #000;
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  -o-transition: none;
  transition: none;
}
#s-intro .word.show {
  opacity: 1;
}
#s-intro p:not(.intro) {
  opacity: 0;
  color: #888;
}
#s-intro .word.big {
  font-size: 150%;
}
#s-intro .word.bigger {
  font-size: 300%;
}
#s-intro .word.bold {
  font-weight: 700;
}
#s-intro .word.italic {
  font-style: italic;
}
#s-intro .word.font {
  font-family: sans-serif;
}
#s-intro .word.padding {
  padding: .1em .2em;
}
#s-intro .word.margin {
  margin: .2em;
}
#s-intro .word.border {
  border: .1em solid #333;
}
#s-intro .word.bgcolor {
  background-color: #789;
}
#s-intro .word.float-l {
  float: left;
}
#s-intro .word.float-r {
  float: right;
}
#s-intro .word.pos-y {
  top: -2em;
}
#s-intro .word.pos-x {
  left: -2em;
}
#s-intro .word.borderradius {
  border-radius: .5em;
}
#s-intro .word.boxshadow {
  -webkit-box-shadow: 0 0.1em 0.3em rgba(0, 0, 0, 0.7);
  -moz-box-shadow: 0 0.1em 0.3em rgba(0, 0, 0, 0.7);
  box-shadow: 0 0.1em 0.3em rgba(0, 0, 0, 0.7);
}
#s-intro .word.opacity {
  opacity: .8;
}
#s-intro .word.textshadow {
  text-shadow: -0.02em 0.02em 0 rgba(255, 255, 255, 0.5);
}
#s-intro .word.gradient {
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #bbccdd), color-stop(100%, #334455));
  background: -webkit-linear-gradient(#bbccdd, #334455);
  background: -moz-linear-gradient(#bbccdd, #334455);
  background: -o-linear-gradient(#bbccdd, #334455);
  background: -ms-linear-gradient(#bbccdd, #334455);
  background: linear-gradient(#bbccdd, #334455);
}
#s-intro .word.transition {
  -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;
}
#s-intro .word.webfont {
  font-family: inherit;
}
#s-intro .word.rotate {
  -webkit-backface-visibility: visible;
  -moz-backface-visibility: visible;
  -ms-backface-visibility: visible;
  -o-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation: "css3-rotate" 4s linear infinite;
  -moz-animation: "css3-rotate" 4s linear infinite;
  -ms-animation: "css3-rotate" 4s linear infinite;
  -o-animation: "css3-rotate" 4s linear infinite;
  animation: "css3-rotate" 4s linear infinite;
}
#s-intro .word.invert {
  -webkit-filter: invert(1);
  -moz-filter: invert(1);
  filter: invert(1);
}
#s-intro .word.blur {
  -webkit-filter: invert(1) blur(0.06em);
  -moz-filter: invert(1) blur(0.06em);
  filter: invert(1) blur(0.06em);
}
#s-intro .overlay {
  opacity: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 600;
  background: black url('/fun-games-css/img/crysis-3-ny-city-ruins.jpg?1363064761') no-repeat left top;
  background-size: cover;
}
#s-intro.video-games .overlay {
  opacity: 1;
}
#s-intro p.meanwhile {
  color: #fff;
  margin: 2em 1em;
  text-shadow: 2px 2px 15px #000;
}

@-moz-keyframes css3-rotate {
  100% {
    -moz-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }
}

@-webkit-keyframes css3-rotate {
  100% {
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }
}

@-o-keyframes css3-rotate {
  100% {
    -o-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }
}

@-ms-keyframes css3-rotate {
  100% {
    -ms-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }
}

@keyframes css3-rotate {
  100% {
    transform: rotateY(360deg);
  }
}

#s-css {
  -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-perspective: 10em;
  -moz-perspective: 10em;
  -ms-perspective: 10em;
  -o-perspective: 10em;
  perspective: 10em;
}
#s-css p.list,
#s-css p.covering,
#s-css section {
  position: absolute;
  opacity: 0;
}
#s-css p.list {
  z-index: 400;
}
#s-css p.fun {
  opacity: 0;
}
#s-css section.everything {
  padding: 1em;
  position: absolute;
  bottom: 3em;
  left: 13.6em;
}
#s-css section.everything p {
  margin: 0;
}
#s-css section.everything p.css3-all.bigger {
  font-size: 1.3em;
}
#s-css .slash {
  background: #f00;
  height: .1em;
  width: 1em;
  position: relative;
  -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(-70deg) translateX(-0.1em) translateZ(11em);
  -moz-transform: rotateZ(-70deg) translateX(-0.1em) translateZ(11em);
  -ms-transform: rotateZ(-70deg) translateX(-0.1em) translateZ(11em);
  -o-transform: rotateZ(-70deg) translateX(-0.1em) translateZ(11em);
  transform: rotateZ(-70deg) translateX(-0.1em) translateZ(11em);
}
#s-css .slash.drop {
  -webkit-transform: rotateZ(-70deg) translateX(-0.1em) translateZ(0);
  -moz-transform: rotateZ(-70deg) translateX(-0.1em) translateZ(0);
  -ms-transform: rotateZ(-70deg) translateX(-0.1em) translateZ(0);
  -o-transform: rotateZ(-70deg) translateX(-0.1em) translateZ(0);
  transform: rotateZ(-70deg) translateX(-0.1em) translateZ(0);
}
#s-css h3 .slash {
  left: -.65em;
}
#s-css .everything .slash {
  left: -.37em;
}
#s-css section.unfinished {
  width: 95%;
}
#s-css ul.drafts.smaller {
  font-size: .5em;
}
#s-css ul.drafts.even-smaller {
  font-size: .3em;
}
#s-css ul.drafts.columns {
  font-size: .45em;
  -webkit-column-count: 3;
  -moz-column-count: 3;
  -ms-column-count: 3;
  column-count: 3;
  -webkit-column-width: 33%;
  -moz-column-width: 33%;
  -ms-column-width: 33%;
  column-width: 33%;
}
#s-css ul.drafts.columns li {
  margin: 0 0 .4em;
  list-style-type: none;
  -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;
  -webkit-transform: translateX(0) translateZ(0);
  -moz-transform: translateX(0) translateZ(0);
  -ms-transform: translateX(0) translateZ(0);
  -o-transform: translateX(0) translateZ(0);
  transform: translateX(0) translateZ(0);
}
#s-css ul.drafts.highlight li:not(.used) {
  opacity: .15;
}
#s-css ul.drafts.highlight li.used {
  font-weight: 700;
  -webkit-transform: translateX(-6em) translateY(-7.5em) translateZ(10em);
  -moz-transform: translateX(-6em) translateY(-7.5em) translateZ(10em);
  -ms-transform: translateX(-6em) translateY(-7.5em) translateZ(10em);
  -o-transform: translateX(-6em) translateY(-7.5em) translateZ(10em);
  transform: translateX(-6em) translateY(-7.5em) translateZ(10em);
}

#s-funstuff p.red,
#s-funstuff p.contact,
#s-funstuff ul.devrels {
  opacity: 0;
}
#s-funstuff p.red .highlight {
  background: #d99;
  border: 1px solid #aa8080;
}

#s-paper {
  overflow: hidden;
}
#s-paper .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;
}
#s-paper .elements,
#s-paper .like,
#s-paper .paper,
#s-paper .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;
}
#s-paper .elements {
  width: 3.97em;
}
#s-paper .like {
  width: 4.10em;
}
#s-paper .paper {
  width: 2.54em;
}
#s-paper .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);
}
#s-paper .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);
}
#s-paper .paper.folded .folds.folded {
  -webkit-transform: rotateY(122deg);
  -moz-transform: rotateY(122deg);
  -ms-transform: rotateY(122deg);
  -o-transform: rotateY(122deg);
  transform: rotateY(122deg);
}
#s-paper .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);
}
#s-paper .like.folded .paper.folded {
  -webkit-transform: rotateY(-102deg);
  -moz-transform: rotateY(-102deg);
  -ms-transform: rotateY(-102deg);
  -o-transform: rotateY(-102deg);
  transform: rotateY(-102deg);
}
#s-paper .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);
}
#s-paper .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);
}
#s-paper .elements.folded .like.folded {
  -webkit-transform: rotateY(80deg);
  -moz-transform: rotateY(80deg);
  -ms-transform: rotateY(80deg);
  -o-transform: rotateY(80deg);
  transform: rotateY(80deg);
}
#s-paper .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);
}
#s-paper .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;
}
#s-paper .sandbox .cube {
  -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;
}
#s-paper .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;
}
#s-paper .sandbox .cube.labels:before,
#s-paper .sandbox .cube.labels .top:before,
#s-paper .sandbox .cube.labels .left:before,
#s-paper .sandbox .cube.labels .right:before,
#s-paper .sandbox .cube.labels .bottom:before,
#s-paper .sandbox .cube.labels .back:before {
  display: block;
  width: 100%;
  text-align: center;
  position: absolute;
  top: 50px;
}
#s-paper .sandbox .cube.labels:before {
  content: 'Front';
}
#s-paper .sandbox .cube.labels .top:before {
  content: 'Top';
}
#s-paper .sandbox .cube.labels .left:before {
  content: 'Left';
}
#s-paper .sandbox .cube.labels .right:before {
  content: 'Right';
}
#s-paper .sandbox .cube.labels .bottom:before {
  content: 'Bottom';
}
#s-paper .sandbox .cube.labels .back:before {
  content: 'Back';
  top: 2.2em;
  -webkit-transform: rotateZ(180deg);
  -moz-transform: rotateZ(180deg);
  -ms-transform: rotateZ(180deg);
  -o-transform: rotateZ(180deg);
  transform: rotateZ(180deg);
}
#s-paper .sandbox .cube .top.flat {
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  -ms-transform: rotateX(0deg);
  -o-transform: rotateX(0deg);
  transform: rotateX(0deg);
}
#s-paper .sandbox .cube .left.flat {
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  transform: rotateY(0deg);
}
#s-paper .sandbox .cube .right.flat {
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  transform: rotateY(0deg);
}
#s-paper .sandbox .cube .bottom.flat {
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  -ms-transform: rotateX(0deg);
  -o-transform: rotateX(0deg);
  transform: rotateX(0deg);
}
#s-paper .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);
  }
}

#s-slinky {
  /* -- make sure to declare a default for every property that you want animated -- */
}
#s-slinky .slinky {
  position: absolute;
  top: 20em;
  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;
}
#s-slinky .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;
}
#s-slinky .slinky .segment:hover {
  border-color: #00f;
}
#s-slinky .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;
}
#s-slinky .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);
}
#s-slinky .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);
}
#s-slinky .slinky.full > .segment {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
#s-slinky .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);
}
#s-slinky .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);
}
#s-slinky .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;
}
#s-slinky .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;
}
#s-slinky .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);
}
#s-slinky .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;
}
#s-slinky .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);
}

@-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);
  }
}

/*
 * Stone tile
 */
#s-tile {
  background: black url('/fun-games-css/img/tile-bg.jpg?1362348532') 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: 77% 25%;
  -moz-perspective-origin: 77% 25%;
  -ms-perspective-origin: 77% 25%;
  -o-perspective-origin: 77% 25%;
  perspective-origin: 77% 25%;
  -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;
  /* debugging styles */
  /* -- Go Download Chrome - http://www.google.com/chrome -- */
}
#s-tile a,
#s-tile p,
#s-tile #other ul li a {
  color: #fff;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}
#s-tile h1 a {
  color: #000;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
}
.csstransforms3d #s-tile div#fallback {
  display: none;
}
.csstransforms3d #s-tile #floor {
  width: 1860px;
  height: 436px;
  background: #222;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transform: rotateX(66deg) rotateY(0.6deg) rotateZ(0deg) translate3d(-419px, 78px, -218px);
  -moz-transform: rotateX(66deg) rotateY(0.6deg) rotateZ(0deg) translate3d(-419px, 78px, -218px);
  -ms-transform: rotateX(66deg) rotateY(0.6deg) rotateZ(0deg) translate3d(-419px, 78px, -218px);
  -o-transform: rotateX(66deg) rotateY(0.6deg) rotateZ(0deg) translate3d(-419px, 78px, -218px);
  transform: rotateX(66deg) rotateY(0.6deg) rotateZ(0deg) translate3d(-419px, 78px, -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 #s-tile #base {
  width: inherit;
  height: inherit;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 15;
  -webkit-transform: translate3d(0, -30px, -10px);
  -moz-transform: translate3d(0, -30px, -10px);
  -ms-transform: translate3d(0, -30px, -10px);
  -o-transform: translate3d(0, -30px, -10px);
  transform: translate3d(0, -30px, -10px);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
#s-tile .panel {
  float: left;
  width: 457px;
  height: 141px;
  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);
}
#s-tile .panel,
#s-tile .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;
}
#s-tile .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);
}
#s-tile .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);
}
#s-tile .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);
}
#s-tile .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);
}
#s-tile .panel .top {
  width: inherit;
  height: inherit;
  background: url('/fun-games-css/img/tile-4.jpg?1362348532');
  -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);
}
#s-tile .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);
}
#s-tile .panel:nth-child(3n+1) .top {
  background-position: 70% 80%;
}
#s-tile .panel:nth-child(5n) .top {
  background: url('/fun-games-css/img/tile-2.jpg?1362348532') 50% 50%;
}
#s-tile .panel:hover,
#s-tile .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);
}
#s-tile .panel:hover .shadow,
#s-tile .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);
}
#s-tile .panel:nth-child(4n+1),
#s-tile .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;
}
#s-tile .panel:nth-child(4n+2):hover,
#s-tile .panel:nth-child(4n+1):hover,
#s-tile .panel.lift:nth-child(4n+2),
#s-tile .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);
}
#s-tile .panel:nth-child(4n+2):hover .shadow,
#s-tile .panel:nth-child(4n+1):hover .shadow,
#s-tile .panel.lift:nth-child(4n+2) .shadow,
#s-tile .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 #s-tile div#floor {
  background: #f00;
}
#s-tile html.no-csstransforms3d div#floor {
  display: none;
}
#s-tile 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);
}

#s-perspective {
  background: white url('/fun-games-css/img/space-bg.jpg?1362348532') no-repeat left -960px;
  -webkit-perspective: 48em;
  -moz-perspective: 48em;
  -ms-perspective: 48em;
  -o-perspective: 48em;
  perspective: 48em;
}
#s-perspective p {
  opacity: 0;
}
#s-perspective p.intro {
  opacity: 1;
}
#s-perspective .board {
  width: 18em;
  height: 40em;
  margin-left: -9em;
  text-align: center;
  opacity: .25;
  position: absolute;
  left: 50%;
  -webkit-transform-origin: 50% 0%;
  -moz-transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  -o-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  -ms-transform: rotateX(0deg);
  -o-transform: rotateX(0deg);
  transform: rotateX(0deg);
  -webkit-transition: all 4s ease-in-out;
  -moz-transition: all 4s ease-in-out;
  -ms-transition: all 4s ease-in-out;
  -o-transition: all 4s ease-in-out;
  transition: all 4s ease-in-out;
}
#s-perspective .board .perspective {
  -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: scale(3, 50) translateY(0.1em);
  -moz-transform: scale(3, 50) translateY(0.1em);
  -ms-transform: scale(3, 50) translateY(0.1em);
  -o-transform: scale(3, 50) translateY(0.1em);
  transform: scale(3, 50) translateY(0.1em);
  margin-top: 4em;
  margin-bottom: 24em;
}
#s-perspective.tilt p:not(.intro) {
  text-align: justify;
}
#s-perspective.tilt .board {
  opacity: 1;
  -webkit-transform: translateZ(-14em) rotateX(75deg);
  -moz-transform: translateZ(-14em) rotateX(75deg);
  -ms-transform: translateZ(-14em) rotateX(75deg);
  -o-transform: translateZ(-14em) rotateX(75deg);
  transform: translateZ(-14em) rotateX(75deg);
}
#s-perspective.space {
  -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;
  background: black url('/fun-games-css/img/space-bg.jpg?1362348532') no-repeat left top;
}
#s-perspective.space p.intro {
  color: #69f;
  text-shadow: 0 0 .3em #000;
}
#s-perspective.space p:not(.intro) {
  opacity: 1;
}
#s-perspective.space .board {
  color: #ff0;
}
#s-perspective.space .board.move {
  -webkit-transition: all 10s ease-in-out;
  -moz-transition: all 10s ease-in-out;
  -ms-transition: all 10s ease-in-out;
  -o-transition: all 10s ease-in-out;
  transition: all 10s ease-in-out;
  -webkit-transform: translateZ(-10em) rotateX(75deg) translateY(-240em);
  -moz-transform: translateZ(-10em) rotateX(75deg) translateY(-240em);
  -ms-transform: translateZ(-10em) rotateX(75deg) translateY(-240em);
  -o-transform: translateZ(-10em) rotateX(75deg) translateY(-240em);
  transform: translateZ(-10em) rotateX(75deg) translateY(-240em);
}
#s-perspective .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: "move-sun" 120s linear infinite;
  -moz-animation: "move-sun" 120s linear infinite;
  -ms-animation: "move-sun" 120s linear infinite;
  -o-animation: "move-sun" 120s linear infinite;
  animation: "move-sun" 120s linear infinite;
  -webkit-transform: translateX(12em) translateY(6em);
  -moz-transform: translateX(12em) translateY(6em);
  -ms-transform: translateX(12em) translateY(6em);
  -o-transform: translateX(12em) translateY(6em);
  transform: translateX(12em) translateY(6em);
}
#s-perspective .solar-system .sun {
  position: absolute;
  width: 2em;
  height: 2em;
  left: -1em;
  top: -1em;
  z-index: -5;
  -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);
  -webkit-animation: "rotate-sun" 12s linear infinite;
  -moz-animation: "rotate-sun" 12s linear infinite;
  -ms-animation: "rotate-sun" 12s linear infinite;
  -o-animation: "rotate-sun" 12s linear infinite;
  animation: "rotate-sun" 12s linear infinite;
  -webkit-transform: rotateZ(0deg);
  -moz-transform: rotateZ(0deg);
  -ms-transform: rotateZ(0deg);
  -o-transform: rotateZ(0deg);
  transform: rotateZ(0deg);
}
#s-perspective .solar-system .sun .earth {
  position: absolute;
  width: .8em;
  height: .8em;
  left: .6em;
  top: .6em;
  z-index: -3;
  -webkit-border-radius: 0.5em;
  -moz-border-radius: 0.5em;
  -ms-border-radius: 0.5em;
  -o-border-radius: 0.5em;
  border-radius: 0.5em;
  background-image: -webkit-gradient(radial, 0.15em 0.1em, 0, 0.15em 0.1em, 0.2, color-stop(40%, rgba(255, 255, 255, 0.3)), color-stop(100%, rgba(0, 0, 170, 0))), -webkit-gradient(radial, 0.3em 0.8em, 0, 0.3em 0.8em, 0.3, color-stop(26.66667%, rgba(255, 255, 255, 0.2)), color-stop(100%, rgba(0, 0, 170, 0))), -webkit-gradient(radial, 0.2em 0.6em, 0, 0.2em 0.6em, 0.3, color-stop(33.33333%, rgba(255, 255, 255, 0.3)), color-stop(100%, rgba(0, 0, 170, 0))), -webkit-gradient(radial, 0.7em 0.5em, 0, 0.7em 0.5em, 0.35, color-stop(28.57143%, rgba(255, 255, 255, 0.5)), color-stop(100%, rgba(0, 0, 170, 0))), -webkit-gradient(radial, 0.3em 0.2em, 0, 0.3em 0.2em, 0.16, color-stop(62.5%, #116611), color-stop(100%, rgba(0, 68, 51, 0))), -webkit-gradient(radial, 0.6em 0.3em, 0, 0.6em 0.3em, 0.3, color-stop(50%, #116611), color-stop(100%, rgba(0, 68, 51, 0))), -webkit-gradient(radial, 0.5em 0.5em, 0, 0.5em 0.5em, 0.6, color-stop(0%, #3eb0ff), color-stop(100%, #0000ff));
  background-image: -webkit-radial-gradient(0.15em 0.1em, rgba(255, 255, 255, 0.3) 0.08em, rgba(0, 0, 170, 0) 0.2em), -webkit-radial-gradient(0.3em 0.8em, rgba(255, 255, 255, 0.2) 0.08em, rgba(0, 0, 170, 0) 0.3em), -webkit-radial-gradient(0.2em 0.6em, rgba(255, 255, 255, 0.3) 0.1em, rgba(0, 0, 170, 0) 0.3em), -webkit-radial-gradient(0.7em 0.5em, rgba(255, 255, 255, 0.5) 0.1em, rgba(0, 0, 170, 0) 0.35em), -webkit-radial-gradient(0.3em 0.2em, #116611 0.1em, rgba(0, 68, 51, 0) 0.16em), -webkit-radial-gradient(0.6em 0.3em, #116611 0.15em, rgba(0, 68, 51, 0) 0.3em), -webkit-radial-gradient(0.5em 0.5em, #3eb0ff 0%, #0000ff 0.6em);
  background-image: -moz-radial-gradient(0.15em 0.1em, rgba(255, 255, 255, 0.3) 0.08em, rgba(0, 0, 170, 0) 0.2em), -moz-radial-gradient(0.3em 0.8em, rgba(255, 255, 255, 0.2) 0.08em, rgba(0, 0, 170, 0) 0.3em), -moz-radial-gradient(0.2em 0.6em, rgba(255, 255, 255, 0.3) 0.1em, rgba(0, 0, 170, 0) 0.3em), -moz-radial-gradient(0.7em 0.5em, rgba(255, 255, 255, 0.5) 0.1em, rgba(0, 0, 170, 0) 0.35em), -moz-radial-gradient(0.3em 0.2em, #116611 0.1em, rgba(0, 68, 51, 0) 0.16em), -moz-radial-gradient(0.6em 0.3em, #116611 0.15em, rgba(0, 68, 51, 0) 0.3em), -moz-radial-gradient(0.5em 0.5em, #3eb0ff 0%, #0000ff 0.6em);
  background-image: -o-radial-gradient(0.15em 0.1em, rgba(255, 255, 255, 0.3) 0.08em, rgba(0, 0, 170, 0) 0.2em), -o-radial-gradient(0.3em 0.8em, rgba(255, 255, 255, 0.2) 0.08em, rgba(0, 0, 170, 0) 0.3em), -o-radial-gradient(0.2em 0.6em, rgba(255, 255, 255, 0.3) 0.1em, rgba(0, 0, 170, 0) 0.3em), -o-radial-gradient(0.7em 0.5em, rgba(255, 255, 255, 0.5) 0.1em, rgba(0, 0, 170, 0) 0.35em), -o-radial-gradient(0.3em 0.2em, #116611 0.1em, rgba(0, 68, 51, 0) 0.16em), -o-radial-gradient(0.6em 0.3em, #116611 0.15em, rgba(0, 68, 51, 0) 0.3em), -o-radial-gradient(0.5em 0.5em, #3eb0ff 0%, #0000ff 0.6em);
  background-image: -ms-radial-gradient(0.15em 0.1em, rgba(255, 255, 255, 0.3) 0.08em, rgba(0, 0, 170, 0) 0.2em), -ms-radial-gradient(0.3em 0.8em, rgba(255, 255, 255, 0.2) 0.08em, rgba(0, 0, 170, 0) 0.3em), -ms-radial-gradient(0.2em 0.6em, rgba(255, 255, 255, 0.3) 0.1em, rgba(0, 0, 170, 0) 0.3em), -ms-radial-gradient(0.7em 0.5em, rgba(255, 255, 255, 0.5) 0.1em, rgba(0, 0, 170, 0) 0.35em), -ms-radial-gradient(0.3em 0.2em, #116611 0.1em, rgba(0, 68, 51, 0) 0.16em), -ms-radial-gradient(0.6em 0.3em, #116611 0.15em, rgba(0, 68, 51, 0) 0.3em), -ms-radial-gradient(0.5em 0.5em, #3eb0ff 0%, #0000ff 0.6em);
  background-image: radial-gradient(0.15em 0.1em, rgba(255, 255, 255, 0.3) 0.08em, rgba(0, 0, 170, 0) 0.2em), radial-gradient(0.3em 0.8em, rgba(255, 255, 255, 0.2) 0.08em, rgba(0, 0, 170, 0) 0.3em), radial-gradient(0.2em 0.6em, rgba(255, 255, 255, 0.3) 0.1em, rgba(0, 0, 170, 0) 0.3em), radial-gradient(0.7em 0.5em, rgba(255, 255, 255, 0.5) 0.1em, rgba(0, 0, 170, 0) 0.35em), radial-gradient(0.3em 0.2em, #116611 0.1em, rgba(0, 68, 51, 0) 0.16em), radial-gradient(0.6em 0.3em, #116611 0.15em, rgba(0, 68, 51, 0) 0.3em), radial-gradient(0.5em 0.5em, #3eb0ff 0%, #0000ff 0.6em);
  -webkit-animation: "rotate-earth" 3s linear infinite;
  -moz-animation: "rotate-earth" 3s linear infinite;
  -ms-animation: "rotate-earth" 3s linear infinite;
  -o-animation: "rotate-earth" 3s linear infinite;
  animation: "rotate-earth" 3s linear infinite;
  -webkit-transform: translateX(4em) rotateZ(0deg);
  -moz-transform: translateX(4em) rotateZ(0deg);
  -ms-transform: translateX(4em) rotateZ(0deg);
  -o-transform: translateX(4em) rotateZ(0deg);
  transform: translateX(4em) rotateZ(0deg);
}
#s-perspective .solar-system .sun .earth .moon {
  position: absolute;
  width: .3em;
  height: .3em;
  left: .25em;
  top: .25em;
  z-index: -1;
  -webkit-border-radius: 0.3em;
  -moz-border-radius: 0.3em;
  -ms-border-radius: 0.3em;
  -o-border-radius: 0.3em;
  border-radius: 0.3em;
  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-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;
  -webkit-transform: translateX(1em) rotateZ(0deg);
  -moz-transform: translateX(1em) rotateZ(0deg);
  -ms-transform: translateX(1em) rotateZ(0deg);
  -o-transform: translateX(1em) rotateZ(0deg);
  transform: translateX(1em) rotateZ(0deg);
}
#s-perspective.solar .solar-desc {
  color: #fff;
}
#s-perspective.solar .solar-system {
  opacity: 1;
}

@-moz-keyframes move-sun {
  0% {
    -moz-transform: translateX(32em) translateY(7em);
    transform: translateX(32em) translateY(7em);
  }

  100% {
    -moz-transform: translateX(-3em) translateY(5.5em);
    transform: translateX(-3em) translateY(5.5em);
  }
}

@-webkit-keyframes move-sun {
  0% {
    -webkit-transform: translateX(32em) translateY(7em);
    transform: translateX(32em) translateY(7em);
  }

  100% {
    -webkit-transform: translateX(-3em) translateY(5.5em);
    transform: translateX(-3em) translateY(5.5em);
  }
}

@-o-keyframes move-sun {
  0% {
    -o-transform: translateX(32em) translateY(7em);
    transform: translateX(32em) translateY(7em);
  }

  100% {
    -o-transform: translateX(-3em) translateY(5.5em);
    transform: translateX(-3em) translateY(5.5em);
  }
}

@-ms-keyframes move-sun {
  0% {
    -ms-transform: translateX(32em) translateY(7em);
    transform: translateX(32em) translateY(7em);
  }

  100% {
    -ms-transform: translateX(-3em) translateY(5.5em);
    transform: translateX(-3em) translateY(5.5em);
  }
}

@keyframes move-sun {
  0% {
    transform: translateX(32em) translateY(7em);
  }

  100% {
    transform: translateX(-3em) translateY(5.5em);
  }
}

@-moz-keyframes rotate-sun {
  0% {
    -moz-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
  }

  100% {
    -moz-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
  }
}

@-webkit-keyframes rotate-sun {
  0% {
    -webkit-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
  }

  100% {
    -webkit-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
  }
}

@-o-keyframes rotate-sun {
  0% {
    -o-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
  }

  100% {
    -o-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
  }
}

@-ms-keyframes rotate-sun {
  0% {
    -ms-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
  }

  100% {
    -ms-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
  }
}

@keyframes rotate-sun {
  0% {
    transform: rotateZ(0deg);
  }

  100% {
    transform: rotateZ(360deg);
  }
}

@-moz-keyframes rotate-earth {
  0% {
    -moz-transform: translateX(4em) rotateZ(0deg);
    transform: translateX(4em) rotateZ(0deg);
  }

  100% {
    -moz-transform: translateX(4em) rotateZ(360deg);
    transform: translateX(4em) rotateZ(360deg);
  }
}

@-webkit-keyframes rotate-earth {
  0% {
    -webkit-transform: translateX(4em) rotateZ(0deg);
    transform: translateX(4em) rotateZ(0deg);
  }

  100% {
    -webkit-transform: translateX(4em) rotateZ(360deg);
    transform: translateX(4em) rotateZ(360deg);
  }
}

@-o-keyframes rotate-earth {
  0% {
    -o-transform: translateX(4em) rotateZ(0deg);
    transform: translateX(4em) rotateZ(0deg);
  }

  100% {
    -o-transform: translateX(4em) rotateZ(360deg);
    transform: translateX(4em) rotateZ(360deg);
  }
}

@-ms-keyframes rotate-earth {
  0% {
    -ms-transform: translateX(4em) rotateZ(0deg);
    transform: translateX(4em) rotateZ(0deg);
  }

  100% {
    -ms-transform: translateX(4em) rotateZ(360deg);
    transform: translateX(4em) rotateZ(360deg);
  }
}

@keyframes rotate-earth {
  0% {
    transform: translateX(4em) rotateZ(0deg);
  }

  100% {
    transform: translateX(4em) rotateZ(360deg);
  }
}

@-moz-keyframes rotate-moon {
  0% {
    -moz-transform: translateX(1em) rotateZ(0deg);
    transform: translateX(1em) rotateZ(0deg);
  }

  100% {
    -moz-transform: translateX(1em) rotateZ(360deg);
    transform: translateX(1em) rotateZ(360deg);
  }
}

@-webkit-keyframes rotate-moon {
  0% {
    -webkit-transform: translateX(1em) rotateZ(0deg);
    transform: translateX(1em) rotateZ(0deg);
  }

  100% {
    -webkit-transform: translateX(1em) rotateZ(360deg);
    transform: translateX(1em) rotateZ(360deg);
  }
}

@-o-keyframes rotate-moon {
  0% {
    -o-transform: translateX(1em) rotateZ(0deg);
    transform: translateX(1em) rotateZ(0deg);
  }

  100% {
    -o-transform: translateX(1em) rotateZ(360deg);
    transform: translateX(1em) rotateZ(360deg);
  }
}

@-ms-keyframes rotate-moon {
  0% {
    -ms-transform: translateX(1em) rotateZ(0deg);
    transform: translateX(1em) rotateZ(0deg);
  }

  100% {
    -ms-transform: translateX(1em) rotateZ(360deg);
    transform: translateX(1em) rotateZ(360deg);
  }
}

@keyframes rotate-moon {
  0% {
    transform: translateX(1em) rotateZ(0deg);
  }

  100% {
    transform: translateX(1em) rotateZ(360deg);
  }
}

#s-animation {
  position: relative;
}
#s-animation .intro {
  position: relative;
  z-index: 100;
}
#s-animation .organism {
  line-height: 1em;
  width: 110%;
  height: 110%;
  position: absolute;
  left: 0;
  top: 0;
}
#s-animation .cell {
  position: relative;
  width: 2em;
  height: 2em;
  opacity: 0;
  -webkit-border-radius: 1em;
  -moz-border-radius: 1em;
  -ms-border-radius: 1em;
  -o-border-radius: 1em;
  border-radius: 1em;
  background: -webkit-gradient(radial, 1em 1em, 0, 1em 1em, 1.2, color-stop(0%, #3eb0ff), color-stop(100%, #000044));
  background: -webkit-radial-gradient(1em 1em, #3eb0ff 0%, #000044 1.2em);
  background: -moz-radial-gradient(1em 1em, #3eb0ff 0%, #000044 1.2em);
  background: -o-radial-gradient(1em 1em, #3eb0ff 0%, #000044 1.2em);
  background: -ms-radial-gradient(1em 1em, #3eb0ff 0%, #000044 1.2em);
  background: radial-gradient(1em 1em, #3eb0ff 0%, #000044 1.2em);
}
#s-animation .cell .nucleus {
  position: absolute;
  width: 1em;
  height: 1em;
  top: .2em;
  left: .2em;
  -webkit-border-radius: 1em;
  -moz-border-radius: 1em;
  -ms-border-radius: 1em;
  -o-border-radius: 1em;
  border-radius: 1em;
  background: -webkit-gradient(radial, 0.4em 0.4em, 0, 0.4em 0.4em, 0.6, color-stop(0%, rgba(170, 153, 255, 0.8)), color-stop(100%, rgba(110, 224, 255, 0.1)));
  background: -webkit-radial-gradient(0.4em 0.4em, rgba(170, 153, 255, 0.8) 0%, rgba(110, 224, 255, 0.1) 0.6em);
  background: -moz-radial-gradient(0.4em 0.4em, rgba(170, 153, 255, 0.8) 0%, rgba(110, 224, 255, 0.1) 0.6em);
  background: -o-radial-gradient(0.4em 0.4em, rgba(170, 153, 255, 0.8) 0%, rgba(110, 224, 255, 0.1) 0.6em);
  background: -ms-radial-gradient(0.4em 0.4em, rgba(170, 153, 255, 0.8) 0%, rgba(110, 224, 255, 0.1) 0.6em);
  background: radial-gradient(0.4em 0.4em, rgba(170, 153, 255, 0.8) 0%, rgba(110, 224, 255, 0.1) 0.6em);
}
#s-animation.wiggle .intro {
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}
#s-animation.wiggle .cell {
  -webkit-animation: "cell" 4.5s ease-in-out alternate infinite;
  -moz-animation: "cell" 4.5s ease-in-out alternate infinite;
  -ms-animation: "cell" 4.5s ease-in-out alternate infinite;
  -o-animation: "cell" 4.5s ease-in-out alternate infinite;
  animation: "cell" 4.5s ease-in-out alternate infinite;
}
#s-animation.wiggle .nucleus {
  -webkit-animation: "nucleus" 6s ease-in-out alternate infinite;
  -moz-animation: "nucleus" 6s ease-in-out alternate infinite;
  -ms-animation: "nucleus" 6s ease-in-out alternate infinite;
  -o-animation: "nucleus" 6s ease-in-out alternate infinite;
  animation: "nucleus" 6s ease-in-out alternate infinite;
}
#s-animation.wiggle .cell:nth-child(9n + 1) {
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  -ms-animation-delay: 0s;
  -o-animation-delay: 0s;
  animation-delay: 0s;
}
#s-animation.wiggle .cell:nth-child(9n + 2) {
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  -ms-animation-delay: 1s;
  -o-animation-delay: 1s;
  animation-delay: 1s;
}
#s-animation.wiggle .cell:nth-child(9n + 3) {
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  -ms-animation-delay: 2s;
  -o-animation-delay: 2s;
  animation-delay: 2s;
}
#s-animation.wiggle .cell:nth-child(9n + 4) {
  -webkit-animation-delay: 3s;
  -moz-animation-delay: 3s;
  -ms-animation-delay: 3s;
  -o-animation-delay: 3s;
  animation-delay: 3s;
}
#s-animation.wiggle .cell:nth-child(9n + 5) {
  -webkit-animation-delay: 4s;
  -moz-animation-delay: 4s;
  -ms-animation-delay: 4s;
  -o-animation-delay: 4s;
  animation-delay: 4s;
}
#s-animation.wiggle .cell:nth-child(9n + 6) {
  -webkit-animation-delay: 5s;
  -moz-animation-delay: 5s;
  -ms-animation-delay: 5s;
  -o-animation-delay: 5s;
  animation-delay: 5s;
}
#s-animation.wiggle .cell:nth-child(9n + 7) {
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  -ms-animation-delay: 6s;
  -o-animation-delay: 6s;
  animation-delay: 6s;
}
#s-animation.wiggle .cell:nth-child(9n + 8) {
  -webkit-animation-delay: 7s;
  -moz-animation-delay: 7s;
  -ms-animation-delay: 7s;
  -o-animation-delay: 7s;
  animation-delay: 7s;
}
#s-animation.wiggle .cell:nth-child(9n + 9) {
  -webkit-animation-delay: 8s;
  -moz-animation-delay: 8s;
  -ms-animation-delay: 8s;
  -o-animation-delay: 8s;
  animation-delay: 8s;
}
#s-animation.wiggle .cell:nth-child(9n + 1) .nucleus {
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  -ms-animation-delay: 0s;
  -o-animation-delay: 0s;
  animation-delay: 0s;
}
#s-animation.wiggle .cell:nth-child(9n + 2) .nucleus {
  -webkit-animation-delay: 0.33333s;
  -moz-animation-delay: 0.33333s;
  -ms-animation-delay: 0.33333s;
  -o-animation-delay: 0.33333s;
  animation-delay: 0.33333s;
}
#s-animation.wiggle .cell:nth-child(9n + 3) .nucleus {
  -webkit-animation-delay: 0.66667s;
  -moz-animation-delay: 0.66667s;
  -ms-animation-delay: 0.66667s;
  -o-animation-delay: 0.66667s;
  animation-delay: 0.66667s;
}
#s-animation.wiggle .cell:nth-child(9n + 4) .nucleus {
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  -ms-animation-delay: 1s;
  -o-animation-delay: 1s;
  animation-delay: 1s;
}
#s-animation.wiggle .cell:nth-child(9n + 5) .nucleus {
  -webkit-animation-delay: 1.33333s;
  -moz-animation-delay: 1.33333s;
  -ms-animation-delay: 1.33333s;
  -o-animation-delay: 1.33333s;
  animation-delay: 1.33333s;
}
#s-animation.wiggle .cell:nth-child(9n + 6) .nucleus {
  -webkit-animation-delay: 1.66667s;
  -moz-animation-delay: 1.66667s;
  -ms-animation-delay: 1.66667s;
  -o-animation-delay: 1.66667s;
  animation-delay: 1.66667s;
}
#s-animation.wiggle .cell:nth-child(9n + 7) .nucleus {
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  -ms-animation-delay: 2s;
  -o-animation-delay: 2s;
  animation-delay: 2s;
}
#s-animation.wiggle .cell:nth-child(9n + 8) .nucleus {
  -webkit-animation-delay: 2.33333s;
  -moz-animation-delay: 2.33333s;
  -ms-animation-delay: 2.33333s;
  -o-animation-delay: 2.33333s;
  animation-delay: 2.33333s;
}
#s-animation.wiggle .cell:nth-child(9n + 9) .nucleus {
  -webkit-animation-delay: 2.66667s;
  -moz-animation-delay: 2.66667s;
  -ms-animation-delay: 2.66667s;
  -o-animation-delay: 2.66667s;
  animation-delay: 2.66667s;
}
#s-animation.eyeball .cell {
  background: -webkit-gradient(radial, 0.4em 0.4em, 0, 0.4em 0.4em, 0.4, color-stop(0%, #3eb0ff), color-stop(100%, #eeeeee));
  background: -webkit-radial-gradient(0.4em 0.4em, #3eb0ff 0%, #eeeeee 0.4em);
  background: -moz-radial-gradient(0.4em 0.4em, #3eb0ff 0%, #eeeeee 0.4em);
  background: -o-radial-gradient(0.4em 0.4em, #3eb0ff 0%, #eeeeee 0.4em);
  background: -ms-radial-gradient(0.4em 0.4em, #3eb0ff 0%, #eeeeee 0.4em);
  background: radial-gradient(0.4em 0.4em, #3eb0ff 0%, #eeeeee 0.4em);
  -webkit-animation: "cell" 0.8s ease-in-out alternate infinite;
  -moz-animation: "cell" 0.8s ease-in-out alternate infinite;
  -ms-animation: "cell" 0.8s ease-in-out alternate infinite;
  -o-animation: "cell" 0.8s ease-in-out alternate infinite;
  animation: "cell" 0.8s ease-in-out alternate infinite;
  -webkit-box-shadow: 0.1em 0.1em 0 rgba(255, 0, 0, 0.5), -0.04em -0.04em 0 rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0.1em 0.1em 0 rgba(255, 0, 0, 0.5), -0.04em -0.04em 0 rgba(0, 0, 0, 0.3);
  box-shadow: 0.1em 0.1em 0 rgba(255, 0, 0, 0.5), -0.04em -0.04em 0 rgba(0, 0, 0, 0.3);
}
#s-animation.eyeball .nucleus {
  background: -webkit-gradient(radial, 0.2em 0.2em, 0, 0.2em 0.2em, 0.3, color-stop(0%, #000000), color-stop(100%, rgba(62, 176, 255, 0.1)));
  background: -webkit-radial-gradient(0.2em 0.2em, #000000 0%, rgba(62, 176, 255, 0.1) 0.3em);
  background: -moz-radial-gradient(0.2em 0.2em, #000000 0%, rgba(62, 176, 255, 0.1) 0.3em);
  background: -o-radial-gradient(0.2em 0.2em, #000000 0%, rgba(62, 176, 255, 0.1) 0.3em);
  background: -ms-radial-gradient(0.2em 0.2em, #000000 0%, rgba(62, 176, 255, 0.1) 0.3em);
  background: radial-gradient(0.2em 0.2em, #000000 0%, rgba(62, 176, 255, 0.1) 0.3em);
}

@-moz-keyframes cell {
  100% {
    -moz-transform: scale(2);
    transform: scale(2);
    opacity: 0.32;
  }
}

@-webkit-keyframes cell {
  100% {
    -webkit-transform: scale(2);
    transform: scale(2);
    opacity: 0.32;
  }
}

@-o-keyframes cell {
  100% {
    -o-transform: scale(2);
    transform: scale(2);
    opacity: 0.32;
  }
}

@-ms-keyframes cell {
  100% {
    -ms-transform: scale(2);
    transform: scale(2);
    opacity: 0.32;
  }
}

@keyframes cell {
  100% {
    transform: scale(2);
    opacity: 0.32;
  }
}

@-moz-keyframes nucleus {
  50% {
    -moz-transform: translateX(-0.6em);
    transform: translateX(-0.6em);
  }

  100% {
    -moz-transform: translateX(-0.8em);
    transform: translateX(-0.8em);
  }
}

@-webkit-keyframes nucleus {
  50% {
    -webkit-transform: translateX(-0.6em);
    transform: translateX(-0.6em);
  }

  100% {
    -webkit-transform: translateX(-0.8em);
    transform: translateX(-0.8em);
  }
}

@-o-keyframes nucleus {
  50% {
    -o-transform: translateX(-0.6em);
    transform: translateX(-0.6em);
  }

  100% {
    -o-transform: translateX(-0.8em);
    transform: translateX(-0.8em);
  }
}

@-ms-keyframes nucleus {
  50% {
    -ms-transform: translateX(-0.6em);
    transform: translateX(-0.6em);
  }

  100% {
    -ms-transform: translateX(-0.8em);
    transform: translateX(-0.8em);
  }
}

@keyframes nucleus {
  50% {
    transform: translateX(-0.6em);
  }

  100% {
    transform: translateX(-0.8em);
  }
}

#s-ames {
  -webkit-perspective: 30em;
  -moz-perspective: 30em;
  -ms-perspective: 30em;
  -o-perspective: 30em;
  perspective: 30em;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
#s-ames p.explain-shape,
#s-ames p.explain-rotate {
  position: absolute;
  opacity: 0;
}
#s-ames .container {
  width: 16em;
  height: 12em;
  padding: .5em 0;
  position: relative;
  top: 2em;
  left: 50%;
  margin-left: -8em;
  -webkit-perspective: 12em;
  -moz-perspective: 12em;
  -ms-perspective: 12em;
  -o-perspective: 12em;
  perspective: 12em;
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  transform: rotateY(0deg);
}
#s-ames .ames {
  opacity: 0;
  width: 10em;
  height: 5em;
  background: transparent;
  border: .5em solid #ddd;
  -webkit-box-shadow: 0 0 0 0.1em black, inset 0 0 0 0.07em black;
  -moz-box-shadow: 0 0 0 0.1em black, inset 0 0 0 0.07em black;
  box-shadow: 0 0 0 0.1em black, inset 0 0 0 0.07em black;
  -webkit-filter: drop-shadow(0.16em 0.1em 0.04em #337733);
  -webkit-transform: rotateY(-60deg);
  -moz-transform: rotateY(-60deg);
  -ms-transform: rotateY(-60deg);
  -o-transform: rotateY(-60deg);
  transform: rotateY(-60deg);
  position: relative;
  top: 3em;
  left: 50%;
  margin-left: -5em;
}
#s-ames .ames .h, #s-ames .ames .h-cover {
  width: 100%;
  height: 1em;
  background: #ddd;
  position: absolute;
  top: 50%;
  margin-top: -.5em;
  border-top: .1em solid #333;
  border-bottom: .1em solid #333;
}
#s-ames .ames .h-cover {
  border: 0;
  height: .93em;
  top: 51%;
}
#s-ames .ames .v {
  width: 1em;
  height: 100%;
  background: #ddd;
  position: absolute;
  left: 50%;
  margin-left: -.5em;
  border-left: .1em solid #333;
}
#s-ames .container.rotate {
  -webkit-animation: "ames-rotate" 4s linear infinite;
  -moz-animation: "ames-rotate" 4s linear infinite;
  -ms-animation: "ames-rotate" 4s linear infinite;
  -o-animation: "ames-rotate" 4s linear infinite;
  animation: "ames-rotate" 4s linear infinite;
}
#s-ames .container.reveal {
  background: rgba(0, 0, 0, 0.3);
  border-left: .2em solid #f00;
  border-right: .2em solid #00f;
}

@-moz-keyframes ames-rotate {
  100% {
    -moz-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }
}

@-webkit-keyframes ames-rotate {
  100% {
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }
}

@-o-keyframes ames-rotate {
  100% {
    -o-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }
}

@-ms-keyframes ames-rotate {
  100% {
    -ms-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }
}

@keyframes ames-rotate {
  100% {
    transform: rotateY(360deg);
  }
}

#s-moire {
  position: relative;
}
#s-moire .container {
  opacity: 0;
  width: 508px;
  margin-left: -256px;
  position: absolute;
  left: 50%;
  top: 6em;
}
#s-moire .container .pattern-1,
#s-moire .container .pattern-2 {
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  transform: rotateY(0deg);
}
#s-moire .rect .pattern-1,
#s-moire .rect .pattern-2 {
  position: absolute;
  width: 508px;
  height: 14em;
  background: -webkit-repeating-linear-gradient(right, transparent 0px, black 2px, transparent 4px);
  background: -moz-repeating-linear-gradient(right, transparent 0px, black 2px, transparent 4px);
  background: -ms-repeating-linear-gradient(right, transparent 0px, black 2px, transparent 4px);
  background: -o-repeating-linear-gradient(right, transparent 0px, black 2px, transparent 4px);
  background: repeating-linear-gradient(right, transparent 0px, black 2px, transparent 4px);
}
#s-moire .rect.rotate-alt .pattern-2 {
  -webkit-animation: "rotate-alt" 6s ease-in-out infinite;
  -moz-animation: "rotate-alt" 6s ease-in-out infinite;
  -ms-animation: "rotate-alt" 6s ease-in-out infinite;
  -o-animation: "rotate-alt" 6s ease-in-out infinite;
  animation: "rotate-alt" 6s ease-in-out infinite;
}
#s-moire .rect.rotate-color .pattern-1 {
  background: -webkit-repeating-linear-gradient(right, transparent 0px, red 2px, transparent 4px);
  background: -moz-repeating-linear-gradient(right, transparent 0px, red 2px, transparent 4px);
  background: -ms-repeating-linear-gradient(right, transparent 0px, red 2px, transparent 4px);
  background: -o-repeating-linear-gradient(right, transparent 0px, red 2px, transparent 4px);
  background: repeating-linear-gradient(right, transparent 0px, red 2px, transparent 4px);
}
#s-moire .rect.rotate-color .pattern-2 {
  background: -webkit-repeating-linear-gradient(right, transparent 0px, green 2px, transparent 4px);
  background: -moz-repeating-linear-gradient(right, transparent 0px, green 2px, transparent 4px);
  background: -ms-repeating-linear-gradient(right, transparent 0px, green 2px, transparent 4px);
  background: -o-repeating-linear-gradient(right, transparent 0px, green 2px, transparent 4px);
  background: repeating-linear-gradient(right, transparent 0px, green 2px, transparent 4px);
}
#s-moire .rect.swap-zindex .pattern-2 {
  z-index: -1;
}
#s-moire .circle {
  top: 5em;
}
#s-moire .circle .pattern-1,
#s-moire .circle .pattern-2 {
  position: absolute;
  width: 482px;
  height: 482px;
  -webkit-border-radius: 241px;
  -moz-border-radius: 241px;
  -ms-border-radius: 241px;
  -o-border-radius: 241px;
  border-radius: 241px;
  background: -webkit-repeating-radial-gradient(50% 50%, transparent 0px, black 6px, transparent 10px, transparent 12px);
  background: -moz-repeating-radial-gradient(50% 50%, transparent 0px, black 6px, transparent 10px, transparent 12px);
  background: -ms-repeating-radial-gradient(50% 50%, transparent 0px, black 6px, transparent 10px, transparent 12px);
  background: -o-repeating-radial-gradient(50% 50%, transparent 0px, black 6px, transparent 10px, transparent 12px);
  background: repeating-radial-gradient(50% 50%, transparent 0px, black 6px, transparent 10px, transparent 12px);
}
#s-moire .circle.pan .pattern-1 {
  -webkit-animation: "pan" 16s ease-in-out infinite;
  -moz-animation: "pan" 16s ease-in-out infinite;
  -ms-animation: "pan" 16s ease-in-out infinite;
  -o-animation: "pan" 16s ease-in-out infinite;
  animation: "pan" 16s ease-in-out infinite;
}
#s-moire .circle.pan .pattern-2 {
  -webkit-animation: "pan" 16s ease-in-out reverse infinite;
  -moz-animation: "pan" 16s ease-in-out reverse infinite;
  -ms-animation: "pan" 16s ease-in-out reverse infinite;
  -o-animation: "pan" 16s ease-in-out reverse infinite;
  animation: "pan" 16s ease-in-out reverse infinite;
}

@-moz-keyframes rotate-alt {
  25% {
    -moz-transform: rotateY(0deg) rotateZ(-7deg);
    transform: rotateY(0deg) rotateZ(-7deg);
  }

  75% {
    -moz-transform: rotateY(0deg) rotateZ(7deg);
    transform: rotateY(0deg) rotateZ(7deg);
  }
}

@-webkit-keyframes rotate-alt {
  25% {
    -webkit-transform: rotateY(0deg) rotateZ(-7deg);
    transform: rotateY(0deg) rotateZ(-7deg);
  }

  75% {
    -webkit-transform: rotateY(0deg) rotateZ(7deg);
    transform: rotateY(0deg) rotateZ(7deg);
  }
}

@-o-keyframes rotate-alt {
  25% {
    -o-transform: rotateY(0deg) rotateZ(-7deg);
    transform: rotateY(0deg) rotateZ(-7deg);
  }

  75% {
    -o-transform: rotateY(0deg) rotateZ(7deg);
    transform: rotateY(0deg) rotateZ(7deg);
  }
}

@-ms-keyframes rotate-alt {
  25% {
    -ms-transform: rotateY(0deg) rotateZ(-7deg);
    transform: rotateY(0deg) rotateZ(-7deg);
  }

  75% {
    -ms-transform: rotateY(0deg) rotateZ(7deg);
    transform: rotateY(0deg) rotateZ(7deg);
  }
}

@keyframes rotate-alt {
  25% {
    transform: rotateY(0deg) rotateZ(-7deg);
  }

  75% {
    transform: rotateY(0deg) rotateZ(7deg);
  }
}

@-moz-keyframes pan {
  25% {
    -moz-transform: rotateY(0deg) translateX(-132px);
    transform: rotateY(0deg) translateX(-132px);
  }

  75% {
    -moz-transform: rotateY(0deg) translateX(132px);
    transform: rotateY(0deg) translateX(132px);
  }
}

@-webkit-keyframes pan {
  25% {
    -webkit-transform: rotateY(0deg) translateX(-132px);
    transform: rotateY(0deg) translateX(-132px);
  }

  75% {
    -webkit-transform: rotateY(0deg) translateX(132px);
    transform: rotateY(0deg) translateX(132px);
  }
}

@-o-keyframes pan {
  25% {
    -o-transform: rotateY(0deg) translateX(-132px);
    transform: rotateY(0deg) translateX(-132px);
  }

  75% {
    -o-transform: rotateY(0deg) translateX(132px);
    transform: rotateY(0deg) translateX(132px);
  }
}

@-ms-keyframes pan {
  25% {
    -ms-transform: rotateY(0deg) translateX(-132px);
    transform: rotateY(0deg) translateX(-132px);
  }

  75% {
    -ms-transform: rotateY(0deg) translateX(132px);
    transform: rotateY(0deg) translateX(132px);
  }
}

@keyframes pan {
  25% {
    transform: rotateY(0deg) translateX(-132px);
  }

  75% {
    transform: rotateY(0deg) translateX(132px);
  }
}

#s-alignment p.intro {
  height: 1.2em;
  overflow: visible;
}
#s-alignment .segments {
  opacity: 0;
  width: 500px;
  height: 520px;
  margin-left: -250px;
  position: absolute;
  left: 50%;
  -webkit-transform: translateZ(-10em);
  -moz-transform: translateZ(-10em);
  -ms-transform: translateZ(-10em);
  -o-transform: translateZ(-10em);
  transform: translateZ(-10em);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
#s-alignment .segments.show {
  -webkit-transition: -webkit-transform ease-in-out 8s;
  -moz-transition: -moz-transform ease-in-out 8s;
  -ms-transition: -ms-transform ease-in-out 8s;
  -o-transition: -o-transform ease-in-out 8s;
  transition: transform ease-in-out 8s;
}
#s-alignment .segments .segment {
  width: 100px;
  height: 520px;
  float: left;
  margin: 0;
  padding: 0;
  background-image: url('/fun-games-css/img/html5-topper-cropped.png?1363037824');
  position: relative;
  -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-perspective: 20em;
  -moz-perspective: 20em;
  -ms-perspective: 20em;
  -o-perspective: 20em;
  perspective: 20em;
}
#s-alignment .segments .segment:before {
  content: '';
  display: block;
  width: 100px;
  height: 500px;
  background: rgba(204, 204, 204, 0.5);
  -webkit-box-shadow: 0 0 1em #cccccc;
  -moz-box-shadow: 0 0 1em #cccccc;
  box-shadow: 0 0 1em #cccccc;
  opacity: 1;
  position: absolute;
  bottom: 0;
  -webkit-transform-origin: 50% 100%;
  -moz-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  -o-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-transform: rotateX(100deg) skewX(35deg);
  -moz-transform: rotateX(100deg) skewX(35deg);
  -ms-transform: rotateX(100deg) skewX(35deg);
  -o-transform: rotateX(100deg) skewX(35deg);
  transform: rotateX(100deg) skewX(35deg);
}
#s-alignment .segments .segment:after {
  content: '';
  display: block;
  width: 20px;
  height: 520px;
  background: #ccc;
  position: relative;
  left: 100px;
  -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: rotateY(98deg);
  -moz-transform: rotateY(98deg);
  -ms-transform: rotateY(98deg);
  -o-transform: rotateY(98deg);
  transform: rotateY(98deg);
}
#s-alignment .segments .segment:nth-child(1) {
  background-position: 0% 0%;
  -webkit-transform: translateX(2.17em) translateY(-0.525em) translateZ(10em) rotateY(1deg) scale(0.655);
  -moz-transform: translateX(2.17em) translateY(-0.525em) translateZ(10em) rotateY(1deg) scale(0.655);
  -ms-transform: translateX(2.17em) translateY(-0.525em) translateZ(10em) rotateY(1deg) scale(0.655);
  -o-transform: translateX(2.17em) translateY(-0.525em) translateZ(10em) rotateY(1deg) scale(0.655);
  transform: translateX(2.17em) translateY(-0.525em) translateZ(10em) rotateY(1deg) scale(0.655);
}
#s-alignment .segments .segment:nth-child(2) {
  background-position: -100px 0%;
  -webkit-transform: translateX(0.527em) translateY(-0.27em) translateZ(5em) rotateX(0.5deg) scale(0.828);
  -moz-transform: translateX(0.527em) translateY(-0.27em) translateZ(5em) rotateX(0.5deg) scale(0.828);
  -ms-transform: translateX(0.527em) translateY(-0.27em) translateZ(5em) rotateX(0.5deg) scale(0.828);
  -o-transform: translateX(0.527em) translateY(-0.27em) translateZ(5em) rotateX(0.5deg) scale(0.828);
  transform: translateX(0.527em) translateY(-0.27em) translateZ(5em) rotateX(0.5deg) scale(0.828);
}
#s-alignment .segments .segment:nth-child(3) {
  background-position: -200px 0%;
  -webkit-transform: translateY(0em) scale(1.005);
  -moz-transform: translateY(0em) scale(1.005);
  -ms-transform: translateY(0em) scale(1.005);
  -o-transform: translateY(0em) scale(1.005);
  transform: translateY(0em) scale(1.005);
}
#s-alignment .segments .segment:nth-child(4) {
  background-position: -300px 0%;
  -webkit-transform: translateX(0.57em) translateY(0.252em) translateZ(-5em) rotateY(1deg) scale(1.178);
  -moz-transform: translateX(0.57em) translateY(0.252em) translateZ(-5em) rotateY(1deg) scale(1.178);
  -ms-transform: translateX(0.57em) translateY(0.252em) translateZ(-5em) rotateY(1deg) scale(1.178);
  -o-transform: translateX(0.57em) translateY(0.252em) translateZ(-5em) rotateY(1deg) scale(1.178);
  transform: translateX(0.57em) translateY(0.252em) translateZ(-5em) rotateY(1deg) scale(1.178);
}
#s-alignment .segments .segment:nth-child(5) {
  background-position: -400px 0%;
  -webkit-transform: translateX(2.18em) translateY(0.53em) translateZ(-10em) rotateY(-1deg) scale(1.351);
  -moz-transform: translateX(2.18em) translateY(0.53em) translateZ(-10em) rotateY(-1deg) scale(1.351);
  -ms-transform: translateX(2.18em) translateY(0.53em) translateZ(-10em) rotateY(-1deg) scale(1.351);
  -o-transform: translateX(2.18em) translateY(0.53em) translateZ(-10em) rotateY(-1deg) scale(1.351);
  transform: translateX(2.18em) translateY(0.53em) translateZ(-10em) rotateY(-1deg) scale(1.351);
}
#s-alignment .segments.rotate {
  -webkit-transform: translateZ(-10em) rotateX(-15deg) rotateY(-70deg);
  -moz-transform: translateZ(-10em) rotateX(-15deg) rotateY(-70deg);
  -ms-transform: translateZ(-10em) rotateX(-15deg) rotateY(-70deg);
  -o-transform: translateZ(-10em) rotateX(-15deg) rotateY(-70deg);
  transform: translateZ(-10em) rotateX(-15deg) rotateY(-70deg);
}
#s-alignment .segments.lift {
  -webkit-transform: translateZ(-10em) rotateX(-65deg) rotateY(-70deg);
  -moz-transform: translateZ(-10em) rotateX(-65deg) rotateY(-70deg);
  -ms-transform: translateZ(-10em) rotateX(-65deg) rotateY(-70deg);
  -o-transform: translateZ(-10em) rotateX(-65deg) rotateY(-70deg);
  transform: translateZ(-10em) rotateX(-65deg) rotateY(-70deg);
}
#s-alignment .segments.reveal {
  border: 5px solid #0c0;
  width: 510px;
  margin-left: -255px;
  margin-top: -5px;
}

/*
 * Contact me
 */
#s-end {
  -webkit-perspective: 20em;
  -moz-perspective: 20em;
  -ms-perspective: 20em;
  -o-perspective: 20em;
  perspective: 20em;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
#s-end .contact,
#s-end .sxsw-stuff {
  float: left;
  width: 48%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
#s-end .highlight {
  width: auto;
  padding: 0 1em;
  background: #fff;
  -webkit-transform: scale(1.8);
  -moz-transform: scale(1.8);
  -ms-transform: scale(1.8);
  -o-transform: scale(1.8);
  transform: scale(1.8);
  -webkit-box-shadow: 0 0 1em rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0 0 1em rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 1em rgba(0, 0, 0, 0.4);
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}