#landing {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -o-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background: #000;
  -webkit-transition: 1s opacity ease-in-out;
  -moz-transition: 1s opacity ease-in-out;
  -o-transition: 1s opacity ease-in-out;
  -ms-transition: 1s opacity ease-in-out;
  transition: 1s opacity ease-in-out;
}
.loaded #landing {
  pointer-events: none;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}
#landing section {
  height: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  font-family: 'SorrenEx-Medium';
  text-transform: uppercase;
  text-align: center;
}
#landing section .inner {
  width: 100%;
  z-index: 10;
}
#landing.unsupported section.header {
  height: 60vmin;
}
#landing.unsupported section.header .inner {
  font-size: 40vmin;
}
#landing.unsupported section.header .header-play {
  pointer-events: all;
}
#landing.unsupported section.header .header-play svg {
  display: block;
}
#landing section.header {
  position: relative;
  background-color: #824199;
  letter-spacing: 0.8vmin;
  -webkit-flex-shrink: 1;
  flex-shrink: 1;
  min-height: 200px;
  text-align: center;
  color: #282828;
}
#landing section.header .inner {
  background: url("assets/img/landing2.gif");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: absolute;
  bottom: 0;
  top: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -o-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  z-index: 0;
  font-size: 0;
  margin-top: -20px;
}
@media (orientation: portrait) {
  .handheld #landing section.header .inner {
    font-size: 50vmin;
  }
}
#landing section.header .header-play {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  background: url("assets/img/landing1.gif");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  pointer-events: none;
}
#landing section.header .header-play svg {
  display: none;
  width: 20vmin;
  height: 20vmin;
  margin: 0 auto;
  opacity: 0.5 !important;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)" !important;
  filter: alpha(opacity=50) !important;
}
#landing section.header .header-play:hover svg {
  opacity: 0.8 !important;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)" !important;
  filter: alpha(opacity=80) !important;
}
.unsupported #landing section.header .header-play {
  cursor: pointer;
}
.unsupported #landing section.header .header-play svg {
  display: block;
}
#landing .title-text {
  font-size: 30px;
  letter-spacing: 5px;
}
#landing .title-text.unsupported {
  display: none;
}
#landing.unsupported .belly-band .title-text {
  display: none;
}
#landing.unsupported .belly-band .title-text.unsupported {
  display: block;
}
#landing.unsupported .belly-band {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  position: relative;
  margin: 0;
  display: -ms-flexbox;
  display: box;
  display: flex;
  right: 0;
  top: auto;
  height: auto;
}
#landing .belly-band {
  position: fixed;
  top: 50%;
  left: 0;
  right: 0;
  background: #282828;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  margin-top: -30px;
  font-size: 30px;
  display: block;
  line-height: 56px;
  height: 60px;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
}
#landing .belly-band .title-text {
  z-index: 1;
}
@media (orientation: portrait) {
  .handheld #landing .belly-band {
    position: relative;
    margin: 0;
    display: -ms-flexbox;
    display: box;
    display: flex;
    right: 0;
    top: auto;
    height: auto;
  }
}
#landing section.belly-band .progress {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scale(0, 1);
  -moz-transform: scale(0, 1);
  -o-transform: scale(0, 1);
  -ms-transform: scale(0, 1);
  transform: scale(0, 1);
  background-color: #10b371;
}
#landing section.content.messages {
  position: relative;
  -webkit-flex-shrink: 1;
  flex-shrink: 1;
  background: #f7eccb;
}
#landing section.content.messages use {
  fill: #282828;
}
#landing section.content.messages {
  color: #282828;
}
#landing section.content.messages {
  display: none;
}
@media (orientation: portrait) {
  .handheld  #landing:not( .unsupported ) section.content.messages {
    display: block;
  }
}
#landing section.content.buttons {
  display: none;
}
#landing.unsupported section.content.buttons {
  padding: 0 5vmin;
  display: block;
}
#landing section.content.messages .inner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -o-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -o-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
#landing section.content {
  -webkit-flex-shrink: 1.25;
  flex-shrink: 1.25;
}
#landing section.content .text {
  font-family: sans-serif;
  font-size: 13px;
  line-height: 22px;
  text-transform: none;
  width: 100%;
  max-width: 480px;
  padding: 0 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 8vmin auto;
}
#landing section.content .text a {
  color: #fff;
  font-weight: bold;
}
#landing section.content.buttons .button-container .landing-button {
  border: 2px solid #fff;
  height: 60px;
  line-height: 55px;
  width: 250px;
  padding-left: 5px;
  display: inline-block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  cursor: pointer;
}
#landing section.content.buttons .button-container .landing-button:hover {
  background: #fff !important;
  color: #282828;
}
#landing section.content.buttons .button-container .lite {
  background-color: #ef2752;
}
#landing section.content.buttons .button-container .screencap {
  background-color: #07b370;
  margin: 0 4vmin;
}
#landing section.content.buttons .button-container .hd {
  background-color: #328fc7;
}
#landing section.content.buttons .button-container {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -o-box-orient: horizontal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -o-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  max-width: 900px;
  margin: 0 auto;
}
#landing section.content.buttons .button-container a {
  color: #fff;
  text-decoration: none;
}
#landing section.content.buttons .button-container span {
  display: none;
  font: 11px sans-serif;
  letter-spacing: 0;
  text-transform: none;
}
@media (max-width: 750px) {
  #landing section.content.buttons .button-container {
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -o-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  #landing section.content.buttons .button-container .landing-button {
    margin-bottom: 10px !important;
    width: 50vmin;
  }
  #landing section.content.buttons .button-container .screencap {
    background-color: #07b370;
  }
  #landing .belly-band {
    height: 55px !important;
  }
  #landing .title-text {
    font-size: 25px;
    letter-spacing: 5px;
  }
}
#landing section.content.buttons .button-container .landing-button {
  width: 90vmin !important;
  height: 60px;
  padding-top: 2px;
  line-height: 50px !important;
}
#landing section.content svg {
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 15vmin;
  padding-bottom: 0;
  padding-top: 0;
  border: 1px solid transparent;
}
#landing section.content .hands {
  text-align: center;
}
#landing section.content .speaker {
  display: none;
}
@-moz-keyframes fade {
  0% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  40% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  60% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  100% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
}
@-webkit-keyframes fade {
  0% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  40% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  60% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  100% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
}
@-o-keyframes fade {
  0% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  40% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  60% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  100% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
}
@keyframes fade {
  0% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  40% {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
  60% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  100% {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
}

@import url("//hello.myfonts.net/count/2e29e0");
@font-face {
  font-family: 'SorrenEx-Medium';
  src: url("assets/fonts/2E29E0_0_0.eot");
  src: url("assets/fonts/2E29E0_0_0.eot?#iefix") format('embedded-opentype'), url("assets/fonts/2E29E0_0_0.woff2") format('woff2'), url("assets/fonts/2E29E0_0_0.woff") format('woff'), url("assets/fonts/2E29E0_0_0.ttf") format('truetype');
}
#buttons {
  display: none;
}
* {
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -ms-touch-action: manipulation;
  touch-action: manipulation;
}
html,
body {
  height: 100%;
}
body.no-js {
  display: none;
}
p {
  cursor: default;
}
canvas {
  background-color: #000;
  image-rendering: optimizeSpeed;
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: -o-crisp-edges;
  image-rendering: pixelated;
  -ms-interpolation-mode: nearest-neighbor;
}
body {
  font-family: sans-serif;
  background: #000;
}
#container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: 0;
  background: #000;
  -webkit-transition: opacity 1s 1.25s ease-in-out;
  -moz-transition: opacity 1s 1.25s ease-in-out;
  -o-transition: opacity 1s 1.25s ease-in-out;
  -ms-transition: opacity 1s 1.25s ease-in-out;
  transition: opacity 1s 1.25s ease-in-out;
}
body:not(.loaded ) #container {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}
@media all and (orientation: portrait) {
  .handheld #container {
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }
}
#stage-shade {
  background: #000;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#container:not(.title-screen ).controls #canvas,
#container:not(.title-screen ).controls #debug-container {
  opacity: 0.35;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=35)";
  filter: alpha(opacity=35);
}
#orientationMessage {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.7);
  font-size: 20px;
  color: #fff;
  z-index: 1;
}
#big-play {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  color: #fff;
  margin-left: -100px;
  margin-top: -100px;
  opacity: 0.425;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=43)";
  filter: alpha(opacity=43);
  -webkit-transition-property: -webkit-transform !important;
  -moz-transition-property: -moz-transform !important;
  -o-transition-property: -o-transform !important;
  -ms-transition-property: -ms-transform !important;
  transition-property: transform !important;
}
.end #big-play {
  display: none;
}
#big-play:hover {
  opacity: 0.8 !important;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)" !important;
  filter: alpha(opacity=80) !important;
}
#big-play svg {
  position: absolute;
}
@media all and (max-width: 525px), all and (max-height: 525px) {
  #big-play svg {
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    -o-transform: scale(0.7);
    -ms-transform: scale(0.7);
    transform: scale(0.7);
  }
}
#debug-container {
  display: none;
}
.debug #debug-container {
  display: block;
}
#debug-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 0;
  opacity: 0.9;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
  filter: alpha(opacity=90);
  pointer-events: none;
}
#debug-sync {
  color: #0ff;
  position: absolute;
  left: 10px;
  bottom: 7px;
  z-index: 1;
  width: 260px;
  -webkit-transition: opacity 0.2s linear;
  -moz-transition: opacity 0.2s linear;
  -o-transition: opacity 0.2s linear;
  -ms-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
}
#debug-sync p {
  line-height: 12px;
  font-size: 9px;
}
#sync-display {
  color: #fff;
}
.sync-button {
  font-size: 15px;
  font-weight: normal;
  width: 80px;
  height: 80px;
  margin-right: 5px;
  margin-top: 5px;
  display: inline-block;
  border: 1px solid #0ff;
  line-height: 78px;
  text-align: center;
}
#debug-csv {
  position: absolute;
  top: 5px;
  left: 25%;
  right: 50%;
  margin-right: 20px;
  font-size: 8px;
  line-height: 12px;
  text-align: right;
  color: #fff;
}
#debug-csv dt {
  width: 50%;
  display: inline-block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  opacity: 0.25;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)";
  filter: alpha(opacity=25);
  -webkit-transition: opacity 0.3s ease-out;
  -moz-transition: opacity 0.3s ease-out;
  -o-transition: opacity 0.3s ease-out;
  -ms-transition: opacity 0.3s ease-out;
  transition: opacity 0.3s ease-out;
  font-weight: bold;
}
#debug-csv dd {
  width: 45%;
  display: inline-block;
}
#debug-center {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  border-right: 1px dashed #f0f;
}
#debug-center:after {
  display: block;
  content: ' ';
  border-top: 1px dashed #f0f;
  position: fixed;
  top: 50%;
  left: 0;
  right: 0;
}
.bar {
  position: absolute;
  height: 8vw;
  line-height: 8vw;
  width: 100%;
  color: #fff;
}
@media all and (orientation: portrait) {
  .handheld .bar {
    height: 8vmax;
  }
}
@media all and (orientation: portrait) {
  .handheld .bar {
    line-height: 8vmax;
  }
}
#container:not(.controls ) .bar {
  pointer-events: none;
}
.bar .button {
  position: relative;
  width: 8vw;
  line-height: 8vw;
  top: 0;
  pointer-events: all;
  width: 51pxvw;
}
@media all and (orientation: portrait) {
  .handheld .bar .button {
    width: 8vmax;
  }
}
@media all and (orientation: portrait) {
  .handheld .bar .button {
    line-height: 8vmax;
  }
}
@media all and (orientation: portrait) {
  .handheld .bar .button {
    width: 51pxvmax;
  }
}
.bar .button svg {
  width: 100%;
  height: 100%;
  vertical-align: center;
  opacity: 1;
  -ms-filter: none;
  filter: none;
  position: absolute;
}
.bar .button.right {
  float: right;
}
.bar .background {
  content: ' ';
  display: block;
  position: absolute;
  height: 32;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  -webkit-transition: -webkit-transform 1600ms cubic-bezier(0.205, 1.4, 0.33, 0.995);
  -moz-transition: -moz-transform 1600ms cubic-bezier(0.205, 1.4, 0.33, 0.995);
  -o-transition: -o-transform 1600ms cubic-bezier(0.205, 1.4, 0.33, 0.995);
  -ms-transition: -ms-transform 1600ms cubic-bezier(0.205, 1.4, 0.33, 0.995);
  transition: transform 1600ms cubic-bezier(0.205, 1.4, 0.33, 0.995);
}
.hide .bar .background {
  -webkit-transition: -webkit-transform 500ms cubic-bezier(1, -0.6, 1, 1);
  -moz-transition: -moz-transform 500ms cubic-bezier(1, -0.6, 1, 1);
  -o-transition: -o-transform 500ms cubic-bezier(1, -0.6, 1, 1);
  -ms-transition: -ms-transform 500ms cubic-bezier(1, -0.6, 1, 1);
  transition: transform 500ms cubic-bezier(1, -0.6, 1, 1);
  opacity: 1;
  -ms-filter: none;
  filter: none;
}
#header {
  bottom: 100%;
  top: 0;
  bottom: auto;
  pointer-events: none;
}
#header > div,
#header > a {
  height: 100%;
  display: inline-block;
}
#menu {
  position: absolute;
  right: 0;
  width: 24;
}
@media all and (max-width: 525px), all and (max-height: 525px) {
  #menu {
    width: 180px;
  }
}
.share-button:hover use.stroke {
  stroke: #fff;
  fill: #fff;
}
#twitter:hover use.logo {
  fill: #4cabf0;
}
#fb:hover use.logo {
  fill: #4966a3;
}
#soundcloud:hover use.logo {
  fill: #f26c00;
}
#logo {
  z-index: 1;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 12vw;
  height: 10vw;
  opacity: 1;
  -ms-filter: none;
  filter: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
@media all and (orientation: portrait) {
  .handheld #logo {
    width: 12vmax;
  }
}
@media all and (orientation: portrait) {
  .handheld #logo {
    height: 10vmax;
  }
}
#logo svg {
  width: 100%;
  height: 100%;
}
.hides {
  -webkit-transition: -webkit-transform 800ms cubic-bezier(0.205, 1.4, 0.33, 0.995), opacity 200ms ease-out, background 0s linear;
  -moz-transition: -moz-transform 800ms cubic-bezier(0.205, 1.4, 0.33, 0.995), opacity 200ms ease-out, background 0s linear;
  -o-transition: -o-transform 800ms cubic-bezier(0.205, 1.4, 0.33, 0.995), opacity 200ms ease-out, background 0s linear;
  -ms-transition: -ms-transform 800ms cubic-bezier(0.205, 1.4, 0.33, 0.995), opacity 200ms ease-out, background 0s linear;
  transition: transform 800ms cubic-bezier(0.205, 1.4, 0.33, 0.995), opacity 200ms ease-out, background 0s linear;
}
#container:not(.controls ) .hides {
  -webkit-transition: -webkit-transform 500ms cubic-bezier(1, -0.6, 1, 1), opacity 500ms ease-out, background 0s linear;
  -moz-transition: -moz-transform 500ms cubic-bezier(1, -0.6, 1, 1), opacity 500ms ease-out, background 0s linear;
  -o-transition: -o-transform 500ms cubic-bezier(1, -0.6, 1, 1), opacity 500ms ease-out, background 0s linear;
  -ms-transition: -ms-transform 500ms cubic-bezier(1, -0.6, 1, 1), opacity 500ms ease-out, background 0s linear;
  transition: transform 500ms cubic-bezier(1, -0.6, 1, 1), opacity 500ms ease-out, background 0s linear;
}
#container:not(.controls ) .hides {
  -webkit-transform: translate3d(0, 80px, 0);
  -moz-transform: translate3d(0, 80px, 0);
  -o-transform: translate3d(0, 80px, 0);
  -ms-transform: translate3d(0, 80px, 0);
  transform: translate3d(0, 80px, 0);
  opacity: 0 !important;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)" !important;
  filter: alpha(opacity=0) !important;
  pointer-events: none;
}
#container:not(.controls ) .hides.up {
  -webkit-transform: translate3d(0, -80px, 0);
  -moz-transform: translate3d(0, -80px, 0);
  -o-transform: translate3d(0, -80px, 0);
  -ms-transform: translate3d(0, -80px, 0);
  transform: translate3d(0, -80px, 0);
}
#container:not(.controls ) .hides.still {
  -webkit-transition-delay: 0, 100ms, 0 !important;
  -moz-transition-delay: 0, 100ms, 0 !important;
  -o-transition-delay: 0, 100ms, 0 !important;
  -ms-transition-delay: 0, 100ms, 0 !important;
  transition-delay: 0, 100ms, 0 !important;
  -webkit-transition-duration: 700ms, 500ms, 0 !important;
  -moz-transition-duration: 700ms, 500ms, 0 !important;
  -o-transition-duration: 700ms, 500ms, 0 !important;
  -ms-transition-duration: 700ms, 500ms, 0 !important;
  transition-duration: 700ms, 500ms, 0 !important;
}
.d0 {
  -webkit-transition-delay: 0ms, 0ms, 0s !important;
  -moz-transition-delay: 0ms, 0ms, 0s !important;
  -o-transition-delay: 0ms, 0ms, 0s !important;
  -ms-transition-delay: 0ms, 0ms, 0s !important;
  transition-delay: 0ms, 0ms, 0s !important;
  -webkit-animation-delay: 0ms, 0ms, 0s !important;
  -moz-animation-delay: 0ms, 0ms, 0s !important;
  -o-animation-delay: 0ms, 0ms, 0s !important;
  -ms-animation-delay: 0ms, 0ms, 0s !important;
  animation-delay: 0ms, 0ms, 0s !important;
}
.d1 {
  -webkit-transition-delay: 50ms, 50ms, 0s !important;
  -moz-transition-delay: 50ms, 50ms, 0s !important;
  -o-transition-delay: 50ms, 50ms, 0s !important;
  -ms-transition-delay: 50ms, 50ms, 0s !important;
  transition-delay: 50ms, 50ms, 0s !important;
  -webkit-animation-delay: 50ms, 50ms, 0s !important;
  -moz-animation-delay: 50ms, 50ms, 0s !important;
  -o-animation-delay: 50ms, 50ms, 0s !important;
  -ms-animation-delay: 50ms, 50ms, 0s !important;
  animation-delay: 50ms, 50ms, 0s !important;
}
.d2 {
  -webkit-transition-delay: 100ms, 100ms, 0s !important;
  -moz-transition-delay: 100ms, 100ms, 0s !important;
  -o-transition-delay: 100ms, 100ms, 0s !important;
  -ms-transition-delay: 100ms, 100ms, 0s !important;
  transition-delay: 100ms, 100ms, 0s !important;
  -webkit-animation-delay: 100ms, 100ms, 0s !important;
  -moz-animation-delay: 100ms, 100ms, 0s !important;
  -o-animation-delay: 100ms, 100ms, 0s !important;
  -ms-animation-delay: 100ms, 100ms, 0s !important;
  animation-delay: 100ms, 100ms, 0s !important;
}
.d3 {
  -webkit-transition-delay: 150ms, 150ms, 0s !important;
  -moz-transition-delay: 150ms, 150ms, 0s !important;
  -o-transition-delay: 150ms, 150ms, 0s !important;
  -ms-transition-delay: 150ms, 150ms, 0s !important;
  transition-delay: 150ms, 150ms, 0s !important;
  -webkit-animation-delay: 150ms, 150ms, 0s !important;
  -moz-animation-delay: 150ms, 150ms, 0s !important;
  -o-animation-delay: 150ms, 150ms, 0s !important;
  -ms-animation-delay: 150ms, 150ms, 0s !important;
  animation-delay: 150ms, 150ms, 0s !important;
}
.d4 {
  -webkit-transition-delay: 200ms, 200ms, 0s !important;
  -moz-transition-delay: 200ms, 200ms, 0s !important;
  -o-transition-delay: 200ms, 200ms, 0s !important;
  -ms-transition-delay: 200ms, 200ms, 0s !important;
  transition-delay: 200ms, 200ms, 0s !important;
  -webkit-animation-delay: 200ms, 200ms, 0s !important;
  -moz-animation-delay: 200ms, 200ms, 0s !important;
  -o-animation-delay: 200ms, 200ms, 0s !important;
  -ms-animation-delay: 200ms, 200ms, 0s !important;
  animation-delay: 200ms, 200ms, 0s !important;
}
.d5 {
  -webkit-transition-delay: 250ms, 250ms, 0s !important;
  -moz-transition-delay: 250ms, 250ms, 0s !important;
  -o-transition-delay: 250ms, 250ms, 0s !important;
  -ms-transition-delay: 250ms, 250ms, 0s !important;
  transition-delay: 250ms, 250ms, 0s !important;
  -webkit-animation-delay: 250ms, 250ms, 0s !important;
  -moz-animation-delay: 250ms, 250ms, 0s !important;
  -o-animation-delay: 250ms, 250ms, 0s !important;
  -ms-animation-delay: 250ms, 250ms, 0s !important;
  animation-delay: 250ms, 250ms, 0s !important;
}
.d6 {
  -webkit-transition-delay: 300ms, 300ms, 0s !important;
  -moz-transition-delay: 300ms, 300ms, 0s !important;
  -o-transition-delay: 300ms, 300ms, 0s !important;
  -ms-transition-delay: 300ms, 300ms, 0s !important;
  transition-delay: 300ms, 300ms, 0s !important;
  -webkit-animation-delay: 300ms, 300ms, 0s !important;
  -moz-animation-delay: 300ms, 300ms, 0s !important;
  -o-animation-delay: 300ms, 300ms, 0s !important;
  -ms-animation-delay: 300ms, 300ms, 0s !important;
  animation-delay: 300ms, 300ms, 0s !important;
}
.d7 {
  -webkit-transition-delay: 350ms, 350ms, 0s !important;
  -moz-transition-delay: 350ms, 350ms, 0s !important;
  -o-transition-delay: 350ms, 350ms, 0s !important;
  -ms-transition-delay: 350ms, 350ms, 0s !important;
  transition-delay: 350ms, 350ms, 0s !important;
  -webkit-animation-delay: 350ms, 350ms, 0s !important;
  -moz-animation-delay: 350ms, 350ms, 0s !important;
  -o-animation-delay: 350ms, 350ms, 0s !important;
  -ms-animation-delay: 350ms, 350ms, 0s !important;
  animation-delay: 350ms, 350ms, 0s !important;
}
.d8 {
  -webkit-transition-delay: 400ms, 400ms, 0s !important;
  -moz-transition-delay: 400ms, 400ms, 0s !important;
  -o-transition-delay: 400ms, 400ms, 0s !important;
  -ms-transition-delay: 400ms, 400ms, 0s !important;
  transition-delay: 400ms, 400ms, 0s !important;
  -webkit-animation-delay: 400ms, 400ms, 0s !important;
  -moz-animation-delay: 400ms, 400ms, 0s !important;
  -o-animation-delay: 400ms, 400ms, 0s !important;
  -ms-animation-delay: 400ms, 400ms, 0s !important;
  animation-delay: 400ms, 400ms, 0s !important;
}
.button,
#big-play,
#seek {
  -webkit-transition-timing-function: cubic-bezier(0, 0, 0, 1);
  -moz-transition-timing-function: cubic-bezier(0, 0, 0, 1);
  -o-transition-timing-function: cubic-bezier(0, 0, 0, 1);
  -ms-transition-timing-function: cubic-bezier(0, 0, 0, 1);
  transition-timing-function: cubic-bezier(0, 0, 0, 1);
  -webkit-transition-duration: 500ms;
  -moz-transition-duration: 500ms;
  -o-transition-duration: 500ms;
  -ms-transition-duration: 500ms;
  transition-duration: 500ms;
}
#stage {
  -webkit-transition: -webkit-transform 300ms cubic-bezier(0, 0, 0, 1), opacity 400ms ease-out;
  -moz-transition: -moz-transform 300ms cubic-bezier(0, 0, 0, 1), opacity 400ms ease-out;
  -o-transition: -o-transform 300ms cubic-bezier(0, 0, 0, 1), opacity 400ms ease-out;
  -ms-transition: -ms-transform 300ms cubic-bezier(0, 0, 0, 1), opacity 400ms ease-out;
  transition: transform 300ms cubic-bezier(0, 0, 0, 1), opacity 400ms ease-out;
  background: #000;
  z-index: 3;
  position: absolute;
}
.panel #stage {
  -webkit-transform: translate3d(-320px, 0, 0);
  -moz-transform: translate3d(-320px, 0, 0);
  -o-transform: translate3d(-320px, 0, 0);
  -ms-transform: translate3d(-320px, 0, 0);
  transform: translate3d(-320px, 0, 0);
  -webkit-transition-delay: 0, 0;
  -moz-transition-delay: 0, 0;
  -o-transition-delay: 0, 0;
  -ms-transition-delay: 0, 0;
  transition-delay: 0, 0;
  -webkit-transition-duration: 500ms, 600ms;
  -moz-transition-duration: 500ms, 600ms;
  -o-transition-duration: 500ms, 600ms;
  -ms-transition-duration: 500ms, 600ms;
  transition-duration: 500ms, 600ms;
}
#stage-shade {
  z-index: 2;
  -webkit-transition: -webkit-transform 300ms cubic-bezier(0, 0, 0, 1);
  -moz-transition: -moz-transform 300ms cubic-bezier(0, 0, 0, 1);
  -o-transition: -o-transform 300ms cubic-bezier(0, 0, 0, 1);
  -ms-transition: -ms-transform 300ms cubic-bezier(0, 0, 0, 1);
  transition: transform 300ms cubic-bezier(0, 0, 0, 1);
}
.panel #stage-shade {
  -webkit-transform: translate3d(-320px, 0, 0);
  -moz-transform: translate3d(-320px, 0, 0);
  -o-transform: translate3d(-320px, 0, 0);
  -ms-transform: translate3d(-320px, 0, 0);
  transform: translate3d(-320px, 0, 0);
  -webkit-transition-delay: 0, 0;
  -moz-transition-delay: 0, 0;
  -o-transition-delay: 0, 0;
  -ms-transition-delay: 0, 0;
  transition-delay: 0, 0;
  -webkit-transition-duration: 500ms, 600ms;
  -moz-transition-duration: 500ms, 600ms;
  -o-transition-duration: 500ms, 600ms;
  -ms-transition-duration: 500ms, 600ms;
  transition-duration: 500ms, 600ms;
}
.caption {
  font-family: 'SorrenEx-Medium';
  position: absolute;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  position: absolute;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-size: 2.5vw;
  letter-spacing: 0.4vw;
}
@media all and (orientation: portrait) {
  .handheld .caption {
    font-size: 2.5vmax;
  }
}
@media all and (orientation: portrait) {
  .handheld .caption {
    letter-spacing: 0.4vmax;
  }
}
.caption a {
  text-decoration: none;
}
.caption a:not(:last-child ) {
  margin-right: 2vw;
}
@media all and (orientation: portrait) {
  .handheld .caption a:not(:last-child ) {
    margin-right: 2vmax;
  }
}
#presented {
  bottom: 0;
  left: 0;
  color: #c883e1;
  pointer-events: none;
}
.caption.down {
  padding: 3vw;
}
@media all and (orientation: portrait) {
  .handheld .caption.down {
    padding: 3vmax;
  }
}
#credit {
  top: 0;
  right: 0;
  color: #c883e1;
  -webkit-transition: color 0.2s linear;
  -moz-transition: color 0.2s linear;
  -o-transition: color 0.2s linear;
  -ms-transition: color 0.2s linear;
  transition: color 0.2s linear;
  padding: 1.8vw;
  padding-top: 1.85vw;
}
#credit a {
  color: #fff;
}
#container:not(.title-screen ) #credit {
  color: rgba(255,255,255,0.6);
}
@media all and (orientation: portrait) {
  .handheld #credit {
    padding: 1.8vmax;
  }
}
@media all and (orientation: portrait) {
  .handheld #credit {
    padding-top: 1.85vmax;
  }
}
#credit span {
  margin-right: 1vw;
}
@media all and (orientation: portrait) {
  .handheld #credit span {
    margin-right: 1vmax;
  }
}
#about-button {
  color: #fff;
  bottom: 0;
  left: 0;
  right: 0;
}
#about-button a {
  color: #c883e1;
  margin-left: 2vw;
  -webkit-transition: color 0.2s linear;
  -moz-transition: color 0.2s linear;
  -o-transition: color 0.2s linear;
  -ms-transition: color 0.2s linear;
  transition: color 0.2s linear;
}
@media all and (orientation: portrait) {
  .handheld #about-button a {
    margin-left: 2vmax;
  }
}
#container:not(.title-screen ) #about-button a {
  color: rgba(255,255,255,0.6);
}
#play-bottom {
  left: 0;
  bottom: 0;
  right: 0;
  text-align: center;
  color: #fff;
  display: none;
}
.handheld #play-bottom {
  display: block;
}
#play-bottom .inner {
  width: 30vw;
  height: 12vw;
  line-height: 17.5vw;
  padding-bottom: 1.8vw;
  display: inline-block;
  cursor: pointer;
}
@media all and (orientation: portrait) {
  .handheld #play-bottom .inner {
    width: 30vmax;
  }
}
@media all and (orientation: portrait) {
  .handheld #play-bottom .inner {
    height: 12vmax;
  }
}
@media all and (orientation: portrait) {
  .handheld #play-bottom .inner {
    line-height: 17.5vmax;
  }
}
@media all and (orientation: portrait) {
  .handheld #play-bottom .inner {
    padding-bottom: 1.8vmax;
  }
}
.grows {
  cursor: pointer;
  -webkit-transition-delay: 0 !important;
  -moz-transition-delay: 0 !important;
  -o-transition-delay: 0 !important;
  -ms-transition-delay: 0 !important;
  transition-delay: 0 !important;
}
.grows:hover {
  opacity: 1;
  -ms-filter: none;
  filter: none;
}
.grows:hover svg {
  -webkit-transform: scale(1.3);
  -moz-transform: scale(1.3);
  -o-transform: scale(1.3);
  -ms-transform: scale(1.3);
  transform: scale(1.3);
  opacity: 1;
  -ms-filter: none;
  filter: none;
}
@media all and (max-width: 525px), all and (max-height: 525px) {
  .grows:hover svg {
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    -o-transform: scale(0.7);
    -ms-transform: scale(0.7);
    transform: scale(0.7);
  }
}
.grows svg {
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.18, 2.71, 0, 0.85);
  -moz-transition: -moz-transform 0.3s cubic-bezier(0.18, 2.71, 0, 0.85);
  -o-transition: -o-transform 0.3s cubic-bezier(0.18, 2.71, 0, 0.85);
  -ms-transition: -ms-transform 0.3s cubic-bezier(0.18, 2.71, 0, 0.85);
  transition: transform 0.3s cubic-bezier(0.18, 2.71, 0, 0.85);
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}
.grows svg .stroke {
  display: none;
}
.grows svg use {
  -webkit-transition: fill 0s linear;
  -moz-transition: fill 0s linear;
  -o-transition: fill 0s linear;
  -ms-transition: fill 0s linear;
  transition: fill 0s linear;
}
#stage {
  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  -o-transition: opacity 0.5s ease-in-out;
  -ms-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}
#stage.hidden,
#stage.unsized {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}
#stage #fb:hover svg,
#stage #soundcloud:hover svg,
#stage #twitter:hover svg {
  -webkit-transform: scale(0.7);
  -moz-transform: scale(0.7);
  -o-transform: scale(0.7);
  -ms-transform: scale(0.7);
  transform: scale(0.7);
}
#stage #fb:hover svg .stroke,
#stage #soundcloud:hover svg .stroke,
#stage #twitter:hover svg .stroke {
  display: block;
}
#stage #fb svg,
#stage #soundcloud svg,
#stage #twitter svg {
  -webkit-transform: scale(0.45);
  -moz-transform: scale(0.45);
  -o-transform: scale(0.45);
  -ms-transform: scale(0.45);
  transform: scale(0.45);
}
@media all and (max-width: 525px), all and (max-height: 525px) {
  #stage #fb:hover svg,
  #stage #soundcloud:hover svg,
  #stage #twitter:hover svg {
    -webkit-transform: scale(0.55);
    -moz-transform: scale(0.55);
    -o-transform: scale(0.55);
    -ms-transform: scale(0.55);
    transform: scale(0.55);
  }
  #stage #fb svg,
  #stage #soundcloud svg,
  #stage #twitter svg {
    -webkit-transform: scale(0.55);
    -moz-transform: scale(0.55);
    -o-transform: scale(0.55);
    -ms-transform: scale(0.55);
    transform: scale(0.55);
  }
}
.play,
.pause {
  opacity: 1;
  -ms-filter: none;
  filter: none;
  -webkit-transition: opacity 0.2s ease-in-out !important;
  -moz-transition: opacity 0.2s ease-in-out !important;
  -o-transition: opacity 0.2s ease-in-out !important;
  -ms-transition: opacity 0.2s ease-in-out !important;
  transition: opacity 0.2s ease-in-out !important;
}
.playing  .play {
  opacity: 0 !important;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)" !important;
  filter: alpha(opacity=0) !important;
}
.paused  .pause {
  opacity: 0 !important;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)" !important;
  filter: alpha(opacity=0) !important;
}
#about {
  font-family: 'SorrenEx-Medium';
  text-align: center;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  background: #000;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  z-index: 3;
  display: none;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  padding-top: 60px;
  padding-bottom: 50px;
}
#about #about-hero {
  max-width: 1010px !important;
  margin-top: 2em;
  width: 100%;
}
@media all and (max-width: 700px) {
  #about {
    padding-top: 50px;
  }
}
#about #about-contents hr {
  height: 0;
  border: 0;
  border-top: 1px dotted rgba(255,255,255,0.2);
  margin: 2em auto;
  width: 50%;
}
#about #about-contents h1,
#about #about-contents h2 {
  text-transform: uppercase;
  letter-spacing: 0.125em;
  cursor: text;
}
#about #about-contents h1 {
  margin-top: 2.5em;
  font-size: 20px;
  font-weight: normal;
  padding: 0 40px;
  letter-spacing: 0.4em;
}
@media all and (max-width: 700px) {
  #about #about-contents h1 {
    font-size: 16px;
  }
}
#about #about-contents h1 span {
  display: inline-block;
}
#about #about-contents h2 {
  font-size: 48px;
  line-height: 48px;
  max-width: 650px;
  margin: 0 auto;
  margin-top: 1em;
  font-weight: normal;
}
#about #about-contents h2 a {
  text-decoration: none;
  border: 0;
  font-weight: normal;
}
@media all and (max-width: 700px) {
  #about #about-contents h2 {
    font-size: 36px;
    line-height: 42px;
  }
  #about #about-contents h2 br {
    display: none;
  }
}
#about #about-contents .image-pair {
  margin-top: 48px;
  letter-spacing: 2px;
}
#about #about-contents img {
  width: 100%;
  max-width: 500px;
}
#about #about-contents a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  border-bottom: 1px solid #666;
}
#about #about-contents p {
  font: 15px/24px sans-serif;
  width: 100%;
  max-width: 700px;
  padding: 0 40px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  cursor: text;
  margin: 0 auto;
  margin-top: 2em;
}
#about #about-contents p span,
#about #about-contents p a {
  display: inline-block;
}
#about #about-contents p.special {
  max-width: 460px;
}
#about #about-contents .nhx-about {
  border: 0;
}
#about #about-contents svg {
  width: 200px;
  height: 100px;
}
#about-back {
  height: 60px;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  position: fixed;
  -webkit-box-shadow: 0 2px 0 rgba(0,0,0,0.25);
  box-shadow: 0 2px 0 rgba(0,0,0,0.25);
  top: 0;
  color: #fff;
  text-decoration: none;
  left: 0;
  right: 0;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -o-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  background: #15b366;
  cursor: pointer;
  letter-spacing: 0.35em;
}
#about-back svg {
  height: 17px;
  margin-right: 20px;
  margin-left: -17px;
}
#about-back span {
  display: inline-block;
  text-transform: uppercase;
  font-size: 30px;
  margin-top: -3px;
}
@media all and (max-width: 700px) {
  #about-back {
    height: 50px;
  }
  #about-back span {
    font-size: 20px;
  }
}
#end-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  color: #fff;
  font-family: 'SorrenEx-Medium';
  text-transform: uppercase;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -o-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -o-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#container:not(.end ) #end-container {
  display: none;
}
#end-container a {
  pointer-events: all;
  font-size: 6vw;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  border-bottom: 5px solid transparent;
  margin-top: 5px;
  text-decoration: none;
  display: block;
}
@media all and (orientation: portrait) {
  .handheld #end-container a {
    font-size: 6vmax;
  }
}
#end-container a:hover {
  border-bottom: 5px solid #fff;
}
#about #audio-bio {
  margin: 1em 0;
}
#about #audio-bio audio {
  margin: 0;
}
#about #audio-bio p {
  margin: 0.5em auto;
  font: italic 12px sans-serif;
}