.canvas-frame {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: -1; }

.canvas-animation {
  position: absolute;
  background: #000 url(assets/effects/background.png) center no-repeat;
  background-size: contain;
  width: 256px;
  height: 128px;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%); }

.animation-wrap {
  position: relative;
  padding-bottom: 128px;
  overflow: hidden;
  border: 2px solid #000; }

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg); }
  100% {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg); } }

@keyframes spin {
  0% {
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg); }
  100% {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg); } }

@-webkit-keyframes slideUp {
  0% { }
  100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
    opacity: 1; } }

@keyframes slideUp {
  0% { }
  100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
    opacity: 1; } }

@-webkit-keyframes slideLeft {
  0% { }
  100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
    opacity: 1; } }

@keyframes slideLeft {
  0% { }
  100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
    opacity: 1; } }

@-webkit-keyframes slideInLeft {
  0% {
    padding-left: 0;
    padding-right: 0;
    width: 0; }
  100% { } }

@keyframes slideInLeft {
  0% {
    padding-left: 0;
    padding-right: 0;
    width: 0; }
  100% { } }

@-webkit-keyframes blink {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.8);
            transform: scale(0.8); }
  50% {
    opacity: 0.9; }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.3);
            transform: scale(1.3); } }

@keyframes blink {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.8);
            transform: scale(0.8); }
  50% {
    opacity: 0.9; }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.3);
            transform: scale(1.3); } }

@-webkit-keyframes flipInfo {
  0% {
    top: 0;
    bottom: auto; }
  50% {
    top: auto;
    bottom: 0; }
  100% {
    top: 0;
    bottom: auto; } }

@keyframes flipInfo {
  0% {
    top: 0;
    bottom: auto; }
  50% {
    top: auto;
    bottom: 0; }
  100% {
    top: 0;
    bottom: auto; } }

@-webkit-keyframes interlace {
  0% {
    background-position-y: 0px; }
  100% {
    background-position-y: -5px; } }

@keyframes interlace {
  0% {
    background-position-y: 0px; }
  100% {
    background-position-y: -5px; } }

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg); }
  100% {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg); } }

@keyframes spin {
  0% {
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg); }
  100% {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg); } }

@-webkit-keyframes slideUp {
  0% { }
  100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
    opacity: 1; } }

@keyframes slideUp {
  0% { }
  100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
    opacity: 1; } }

@-webkit-keyframes slideLeft {
  0% { }
  100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
    opacity: 1; } }

@keyframes slideLeft {
  0% { }
  100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
    opacity: 1; } }

@-webkit-keyframes slideInLeft {
  0% {
    padding-left: 0;
    padding-right: 0;
    width: 0; }
  100% { } }

@keyframes slideInLeft {
  0% {
    padding-left: 0;
    padding-right: 0;
    width: 0; }
  100% { } }

@-webkit-keyframes blink {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.8);
            transform: scale(0.8); }
  50% {
    opacity: 0.9; }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.3);
            transform: scale(1.3); } }

@keyframes blink {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.8);
            transform: scale(0.8); }
  50% {
    opacity: 0.9; }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.3);
            transform: scale(1.3); } }

@-webkit-keyframes flipInfo {
  0% {
    top: 0;
    bottom: auto; }
  50% {
    top: auto;
    bottom: 0; }
  100% {
    top: 0;
    bottom: auto; } }

@keyframes flipInfo {
  0% {
    top: 0;
    bottom: auto; }
  50% {
    top: auto;
    bottom: 0; }
  100% {
    top: 0;
    bottom: auto; } }

@-webkit-keyframes interlace {
  0% {
    background-position-y: 0px; }
  100% {
    background-position-y: -5px; } }

@keyframes interlace {
  0% {
    background-position-y: 0px; }
  100% {
    background-position-y: -5px; } }

@font-face {
  font-family: "OakTitle";
  src: url(assets/fonts/Countach-Italic.eot?#iefix) format("embedded-opentype"), url(assets/fonts/Countach-Italic.woff) format("woff"), url(assets/fonts/Countach-Italic.ttf) format("truetype"), url(assets/fonts/Countach-Italic.svg#webfont) format("svg");
  font-weight: "normal"; }

@font-face {
  font-family: "OakBody";
  src: url(assets/fonts/PosteramaText-Regular.eot?#iefix) format("embedded-opentype"), url(assets/fonts/PosteramaText-Regular.woff) format("woff"), url(assets/fonts/PosteramaText-Regular.ttf) format("truetype"), url(assets/fonts/PosteramaText-Regular.svg#webfont) format("svg");
  font-weight: "normal"; }

.dialog-button {
  position: relative;
  font-family: 'OakTitle';
  text-shadow: -1.5px -1.5px rgba(0, 0, 0, 0.6), -1.5px 1.5px rgba(0, 0, 0, 0.6), 1.5px -1.5px rgba(0, 0, 0, 0.6), 1.5px 1.5px rgba(0, 0, 0, 0.6);
  font-size: 1.77778rem;
  padding: 8px 14px 6px;
  color: #fff;
  cursor: pointer;
  text-transform: uppercase;
  text-align: center;
  z-index: 1; }
  .dialog-button:hover {
    color: #fffc00; }
  .dialog-button.disabled {
    color: #727272;
    cursor: not-allowed; }

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg); }
  100% {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg); } }

@keyframes spin {
  0% {
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg); }
  100% {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg); } }

@-webkit-keyframes slideUp {
  0% { }
  100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
    opacity: 1; } }

@keyframes slideUp {
  0% { }
  100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
    opacity: 1; } }

@-webkit-keyframes slideLeft {
  0% { }
  100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
    opacity: 1; } }

@keyframes slideLeft {
  0% { }
  100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
    opacity: 1; } }

@-webkit-keyframes slideInLeft {
  0% {
    padding-left: 0;
    padding-right: 0;
    width: 0; }
  100% { } }

@keyframes slideInLeft {
  0% {
    padding-left: 0;
    padding-right: 0;
    width: 0; }
  100% { } }

@-webkit-keyframes blink {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.8);
            transform: scale(0.8); }
  50% {
    opacity: 0.9; }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.3);
            transform: scale(1.3); } }

@keyframes blink {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.8);
            transform: scale(0.8); }
  50% {
    opacity: 0.9; }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.3);
            transform: scale(1.3); } }

@-webkit-keyframes flipInfo {
  0% {
    top: 0;
    bottom: auto; }
  50% {
    top: auto;
    bottom: 0; }
  100% {
    top: 0;
    bottom: auto; } }

@keyframes flipInfo {
  0% {
    top: 0;
    bottom: auto; }
  50% {
    top: auto;
    bottom: 0; }
  100% {
    top: 0;
    bottom: auto; } }

@-webkit-keyframes interlace {
  0% {
    background-position-y: 0px; }
  100% {
    background-position-y: -5px; } }

@keyframes interlace {
  0% {
    background-position-y: 0px; }
  100% {
    background-position-y: -5px; } }

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg); }
  100% {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg); } }

@keyframes spin {
  0% {
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg); }
  100% {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg); } }

@-webkit-keyframes slideUp {
  0% { }
  100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
    opacity: 1; } }

@keyframes slideUp {
  0% { }
  100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
    opacity: 1; } }

@-webkit-keyframes slideLeft {
  0% { }
  100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
    opacity: 1; } }

@keyframes slideLeft {
  0% { }
  100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
    opacity: 1; } }

@-webkit-keyframes slideInLeft {
  0% {
    padding-left: 0;
    padding-right: 0;
    width: 0; }
  100% { } }

@keyframes slideInLeft {
  0% {
    padding-left: 0;
    padding-right: 0;
    width: 0; }
  100% { } }

@-webkit-keyframes blink {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.8);
            transform: scale(0.8); }
  50% {
    opacity: 0.9; }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.3);
            transform: scale(1.3); } }

@keyframes blink {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.8);
            transform: scale(0.8); }
  50% {
    opacity: 0.9; }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.3);
            transform: scale(1.3); } }

@-webkit-keyframes flipInfo {
  0% {
    top: 0;
    bottom: auto; }
  50% {
    top: auto;
    bottom: 0; }
  100% {
    top: 0;
    bottom: auto; } }

@keyframes flipInfo {
  0% {
    top: 0;
    bottom: auto; }
  50% {
    top: auto;
    bottom: 0; }
  100% {
    top: 0;
    bottom: auto; } }

@-webkit-keyframes interlace {
  0% {
    background-position-y: 0px; }
  100% {
    background-position-y: -5px; } }

@keyframes interlace {
  0% {
    background-position-y: 0px; }
  100% {
    background-position-y: -5px; } }

@font-face {
  font-family: "OakTitle";
  src: url(assets/fonts/Countach-Italic.eot?#iefix) format("embedded-opentype"), url(assets/fonts/Countach-Italic.woff) format("woff"), url(assets/fonts/Countach-Italic.ttf) format("truetype"), url(assets/fonts/Countach-Italic.svg#webfont) format("svg");
  font-weight: "normal"; }

@font-face {
  font-family: "OakBody";
  src: url(assets/fonts/PosteramaText-Regular.eot?#iefix) format("embedded-opentype"), url(assets/fonts/PosteramaText-Regular.woff) format("woff"), url(assets/fonts/PosteramaText-Regular.ttf) format("truetype"), url(assets/fonts/PosteramaText-Regular.svg#webfont) format("svg");
  font-weight: "normal"; }

@-webkit-keyframes slideMessageIn {
  0% {
    width: 0;
    padding: 0; }
  100% { } }

@keyframes slideMessageIn {
  0% {
    width: 0;
    padding: 0; }
  100% { } }

@-webkit-keyframes slideIn {
  0% { }
  100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%); } }

@keyframes slideIn {
  0% { }
  100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%); } }

.toast-component {
  position: relative;
  display: block;
  width: 256px;
  margin: 0 2px;
  -webkit-animation: slideMessageIn 0.2s 0s both ease-out;
          animation: slideMessageIn 0.2s 0s both ease-out; }
  .toast-component .toast-wrap {
    width: 256px;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
    -webkit-animation: slideIn 0.2s 0.2s both ease-out;
            animation: slideIn 0.2s 0.2s both ease-out; }
    .toast-component .toast-wrap .canvas-animation {
      -ms-interpolation-mode: nearest-neighbor;
          image-rendering: -moz-crisp-edges;
          image-rendering: pixelated; }
  .toast-component .toast-short-message {
    position: absolute;
    right: 4px;
    bottom: 4px;
    padding: 2px 4px 2px 6px;
    font-size: 1.3rem;
    background: rgba(0, 0, 0, 0.8);
    font-weight: bold; }
  .toast-component .toast-body {
    padding: 12px; }
  .toast-component .toast-icon {
    margin-bottom: 10px; }
  .toast-component .toast-close {
    position: absolute;
    right: 12px;
    top: 12px;
    width: 16px;
    height: 16px;
    padding: 8px;
    cursor: pointer;
    z-index: 2;
    display: flex; }
    .toast-component .toast-close:before, .toast-component .toast-close:after,
    .toast-component .toast-close .button-inner:before,
    .toast-component .toast-close .button-inner:after {
      content: '';
      position: absolute;
      width: 14px;
      height: 2px;
      top: 50%;
      left: 50%; }
    .toast-component .toast-close:before, .toast-component .toast-close:after {
      width: 17px;
      height: 5px;
      background: #000; }
    .toast-component .toast-close .button-inner {
      position: absolute;
      z-index: 1;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0; }
      .toast-component .toast-close .button-inner:before, .toast-component .toast-close .button-inner:after {
        background: #fff; }
    .toast-component .toast-close:before,
    .toast-component .toast-close .button-inner:before {
      -webkit-transform: translateX(-50%) translateY(-50%) rotateZ(45deg);
              transform: translateX(-50%) translateY(-50%) rotateZ(45deg); }
    .toast-component .toast-close:after,
    .toast-component .toast-close .button-inner:after {
      -webkit-transform: translateX(-50%) translateY(-50%) rotateZ(-45deg);
              transform: translateX(-50%) translateY(-50%) rotateZ(-45deg); }
    .toast-component .toast-close:hover .button-inner:before, .toast-component .toast-close:hover .button-inner:after {
      background: #fffc00; }
  .toast-component .toast-header {
    font-family: 'OakTitle';
    text-shadow: -1.5px -1.5px rgba(0, 0, 0, 0.6), -1.5px 1.5px rgba(0, 0, 0, 0.6), 1.5px -1.5px rgba(0, 0, 0, 0.6), 1.5px 1.5px rgba(0, 0, 0, 0.6);
    font-size: 1.8rem;
    padding: 5px 4px 4px;
    margin-bottom: 4px; }
  .toast-component .toast-message {
    font-family: 'OakTitle';
    text-shadow: -1.5px -1.5px rgba(0, 0, 0, 0.6), -1.5px 1.5px rgba(0, 0, 0, 0.6), 1.5px -1.5px rgba(0, 0, 0, 0.6), 1.5px 1.5px rgba(0, 0, 0, 0.6);
    font-size: 1.5rem;
    padding: 0 38px 0 4px;
    color: #54c4ee; }
  .toast-component .toast-description {
    font-family: 'OakBody';
    font-size: 1.4rem; }
  .toast-component .toast-actions {
    display: flex;
    margin: 8px -1px 0;
    justify-content: flex-end; }
    .toast-component .toast-actions .dialog-button {
      flex: 0 0.5 70px;
      font-size: 1.5rem;
      margin: 0 1px;
      white-space: nowrap; }

.message-component {
  margin-bottom: 2px;
  z-index: 9; }
  .message-component .toast-title {
    color: #fff; }

.account-status-component,
.preorder-component {
  margin-bottom: 2px;
  z-index: 10; }
  .account-status-component .toast-message,
  .preorder-component .toast-message {
    font-family: 'OakBody';
    font-size: 1.4rem; }

.preorder-component .animation-wrap img {
  position: absolute;
  height: 128px; }

.event-component .toast-message {
  font-family: 'OakBody';
  font-size: 1.4rem; }

.overlay-component .toast-buttons {
  position: absolute;
  right: 100%; }

.overlay-component .toast-collapse {
  margin-right: 2px;
  width: 12px;
  height: 12px;
  padding: 8px; }
  .overlay-component .toast-collapse:before, .overlay-component .toast-collapse:after,
  .overlay-component .toast-collapse .button-inner:before,
  .overlay-component .toast-collapse .button-inner:after {
    content: '';
    position: absolute;
    width: 10px;
    height: 2px;
    top: 50%;
    left: 50%; }
  .overlay-component .toast-collapse:before, .overlay-component .toast-collapse:after {
    width: 14px;
    height: 5px;
    background: #000; }
  .overlay-component .toast-collapse .button-inner {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0; }
    .overlay-component .toast-collapse .button-inner:before, .overlay-component .toast-collapse .button-inner:after {
      background: #fff; }
  .overlay-component .toast-collapse:before,
  .overlay-component .toast-collapse .button-inner:before {
    -webkit-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%); }
  .overlay-component .toast-collapse:after,
  .overlay-component .toast-collapse .button-inner:after {
    -webkit-transform: translateX(-50%) translateY(-50%) rotateZ(90deg);
            transform: translateX(-50%) translateY(-50%) rotateZ(90deg);
    display: none; }
  .overlay-component .toast-collapse:hover .button-inner:before, .overlay-component .toast-collapse:hover .button-inner:after {
    background: #fffc00; }

.overlay-component.collapse .toast-collapse:after,
.overlay-component.collapse .toast-collapse .button-inner:after {
  display: block; }

.overlay-component.collapse .preorder-component,
.overlay-component.collapse .event-component {
  margin-left: -174px; }

.overlay-component.collapse .message-component {
  width: 80px; }
  .overlay-component.collapse .message-component .toast-wrap {
    width: 80px; }
  .overlay-component.collapse .message-component .toast-body {
    padding: 6px; }
  .overlay-component.collapse .message-component .animation-wrap {
    border: none;
    padding-bottom: 64px; }
    .overlay-component.collapse .message-component .animation-wrap .canvas-animation {
      width: 128px;
      height: 64px;
      background: none; }
  .overlay-component.collapse .message-component .toast-icon {
    margin: 0; }
  .overlay-component.collapse .message-component .toast-message {
    position: absolute;
    top: 50%;
    right: 100%;
    width: 160px;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    padding: 10px 14px 8px;
    margin-right: 4px;
    opacity: 0;
    pointer-events: none; }
  .overlay-component.collapse .message-component:hover .toast-message {
    opacity: 1;
    transition: 0.15s ease-out; }

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg); }
  100% {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg); } }

@keyframes spin {
  0% {
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg); }
  100% {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg); } }

@-webkit-keyframes slideUp {
  0% { }
  100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
    opacity: 1; } }

@keyframes slideUp {
  0% { }
  100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
    opacity: 1; } }

@-webkit-keyframes slideLeft {
  0% { }
  100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
    opacity: 1; } }

@keyframes slideLeft {
  0% { }
  100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
    opacity: 1; } }

@-webkit-keyframes slideInLeft {
  0% {
    padding-left: 0;
    padding-right: 0;
    width: 0; }
  100% { } }

@keyframes slideInLeft {
  0% {
    padding-left: 0;
    padding-right: 0;
    width: 0; }
  100% { } }

@-webkit-keyframes blink {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.8);
            transform: scale(0.8); }
  50% {
    opacity: 0.9; }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.3);
            transform: scale(1.3); } }

@keyframes blink {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.8);
            transform: scale(0.8); }
  50% {
    opacity: 0.9; }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.3);
            transform: scale(1.3); } }

@-webkit-keyframes flipInfo {
  0% {
    top: 0;
    bottom: auto; }
  50% {
    top: auto;
    bottom: 0; }
  100% {
    top: 0;
    bottom: auto; } }

@keyframes flipInfo {
  0% {
    top: 0;
    bottom: auto; }
  50% {
    top: auto;
    bottom: 0; }
  100% {
    top: 0;
    bottom: auto; } }

@-webkit-keyframes interlace {
  0% {
    background-position-y: 0px; }
  100% {
    background-position-y: -5px; } }

@keyframes interlace {
  0% {
    background-position-y: 0px; }
  100% {
    background-position-y: -5px; } }

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg); }
  100% {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg); } }

@keyframes spin {
  0% {
    -webkit-transform: rotateZ(0deg);
            transform: rotateZ(0deg); }
  100% {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg); } }

@-webkit-keyframes slideUp {
  0% { }
  100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
    opacity: 1; } }

@keyframes slideUp {
  0% { }
  100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
    opacity: 1; } }

@-webkit-keyframes slideLeft {
  0% { }
  100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
    opacity: 1; } }

@keyframes slideLeft {
  0% { }
  100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
    opacity: 1; } }

@-webkit-keyframes slideInLeft {
  0% {
    padding-left: 0;
    padding-right: 0;
    width: 0; }
  100% { } }

@keyframes slideInLeft {
  0% {
    padding-left: 0;
    padding-right: 0;
    width: 0; }
  100% { } }

@-webkit-keyframes blink {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.8);
            transform: scale(0.8); }
  50% {
    opacity: 0.9; }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.3);
            transform: scale(1.3); } }

@keyframes blink {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.8);
            transform: scale(0.8); }
  50% {
    opacity: 0.9; }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.3);
            transform: scale(1.3); } }

@-webkit-keyframes flipInfo {
  0% {
    top: 0;
    bottom: auto; }
  50% {
    top: auto;
    bottom: 0; }
  100% {
    top: 0;
    bottom: auto; } }

@keyframes flipInfo {
  0% {
    top: 0;
    bottom: auto; }
  50% {
    top: auto;
    bottom: 0; }
  100% {
    top: 0;
    bottom: auto; } }

@-webkit-keyframes interlace {
  0% {
    background-position-y: 0px; }
  100% {
    background-position-y: -5px; } }

@keyframes interlace {
  0% {
    background-position-y: 0px; }
  100% {
    background-position-y: -5px; } }

@font-face {
  font-family: "OakTitle";
  src: url(assets/fonts/Countach-Italic.eot?#iefix) format("embedded-opentype"), url(assets/fonts/Countach-Italic.woff) format("woff"), url(assets/fonts/Countach-Italic.ttf) format("truetype"), url(assets/fonts/Countach-Italic.svg#webfont) format("svg");
  font-weight: "normal"; }

@font-face {
  font-family: "OakBody";
  src: url(assets/fonts/PosteramaText-Regular.eot?#iefix) format("embedded-opentype"), url(assets/fonts/PosteramaText-Regular.woff) format("woff"), url(assets/fonts/PosteramaText-Regular.ttf) format("truetype"), url(assets/fonts/PosteramaText-Regular.svg#webfont) format("svg");
  font-weight: "normal"; }

html,
body {
  height: 100%;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                  supported by Chrome and Opera */ }

html {
  font-size: 10px; }

body {
  margin: 0;
  color: #fff;
  overflow: hidden; }

* {
  margin: 0;
  padding: 0; }

#root {
  height: 100%;
  font-family: 'OakBody';
  overflow: hidden; }
  #root .app-root,
  #root .app {
    height: 100%; }
  #root .app-root {
    opacity: 0;
    -webkit-animation: fadeIn 0.25s 0.5s both ease-out;
            animation: fadeIn 0.25s 0.5s both ease-out; }
    #root .app-root.development {
      background: #000 url(assets/Screenshot.jpg) center no-repeat;
      background-image: url(assets/Screenshot2.jpg);
      background-size: auto 100%; }
    #root .app-root.is-ready .app {
      -webkit-animation: fadeIn 0.25s 0.5s both ease-out;
              animation: fadeIn 0.25s 0.5s both ease-out; }
  #root .app {
    opacity: 0; }
    #root .app.development {
      position: relative;
      margin: auto; }
      #root .app.development:before, #root .app.development:after {
        content: '';
        position: absolute;
        height: 52px;
        left: 0;
        right: 0;
        background: #6441a4;
        opacity: 0.6;
        pointer-events: none;
        z-index: 0; }
      #root .app.development:after {
        height: 52px;
        bottom: 0; }
      #root .app.development.theatre-mode:before, #root .app.development.fullscreen:before {
        height: 100px; }
      #root .app.development.developer-rig {
        max-width: 100%; }
        #root .app.development.developer-rig:before, #root .app.development.developer-rig:after {
          display: none; }

.overlay-component {
  position: absolute;
  top: 0;
  bottom: 0;
  padding-top: 52px;
  padding-bottom: 52px; }
  .overlay-component .canvas-animation {
    margin: 0 auto; }
  .overlay-component.top {
    bottom: auto;
    padding-bottom: 0; }
  .overlay-component.right {
    z-index: 1;
    right: 0;
    width: auto;
    justify-content: flex-start;
    flex-direction: column;
    align-items: flex-end; }
    .overlay-component.right .inner-component {
      padding: 0;
      flex: none; }

.app.theatre-mode .overlay-component,
.app.fullscreen .overlay-component {
  padding-top: 100px; }

.view-component {
  background: rgba(0, 0, 0, 0.8);
  z-index: 2;
  display: flex;
  width: 0px;
  transition: 0.15s 0.15s ease-out; }
  .view-component:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(assets/Interlace_x2.png) 0 0;
    opacity: 0.5;
    pointer-events: none;
    z-index: 0; }
  .view-component .loader-wrap {
    -webkit-animation: fadeIn 0.15s 0.3s ease-out both;
            animation: fadeIn 0.15s 0.3s ease-out both;
    flex: 1; }
    .view-component .loader-wrap .loader-inner {
      position: relative;
      padding: 12px;
      margin-right: 24px; }
  .view-component .component-wrap {
    position: relative;
    display: flex;
    -webkit-animation: fadeIn 0.15s 0.3s ease-out both;
            animation: fadeIn 0.15s 0.3s ease-out both; }
    .view-component .component-wrap.not-ready {
      display: none;
      -webkit-animation: none;
              animation: none; }
    .view-component .component-wrap.ready {
      display: flex;
      -webkit-animation: fadeIn 0.15s ease-out both;
              animation: fadeIn 0.15s ease-out both; }
  .view-component.open {
    width: 366px; }
  .view-component:hover {
    z-index: 50; }

.inner-component {
  display: flex;
  padding-left: 72px;
  padding-right: 4px;
  z-index: 1;
  -webkit-animation: fadeIn 0.15s 0.3s ease-out both;
          animation: fadeIn 0.15s 0.3s ease-out both; }
  .inner-component.fade-enter {
    position: relative;
    height: 0; }

.app.large .view-component,
.app.xlarge .view-component {
  padding-bottom: 52px; }
  .app.large .view-component.open,
  .app.xlarge .view-component.open {
    width: 298px; }
    .app.large .view-component.open.main,
    .app.xlarge .view-component.open.main {
      width: 348px;
      justify-content: center; }
  .app.large .view-component .inner-component,
  .app.xlarge .view-component .inner-component {
    padding-left: 4px; }
  .app.large .view-component.fade-enter,
  .app.xlarge .view-component.fade-enter {
    opacity: 0; }
    .app.large .view-component.fade-enter.fade-enter-active,
    .app.xlarge .view-component.fade-enter.fade-enter-active {
      transition: 0.15s ease-out;
      opacity: 1; }
  .app.large .view-component.fade-exit,
  .app.xlarge .view-component.fade-exit {
    opacity: 1; }
    .app.large .view-component.fade-exit.fade-exit-active,
    .app.xlarge .view-component.fade-exit.fade-exit-active {
      transition: 0.2s ease-out;
      opacity: 0; }
  .app.large .view-component .component-wrap,
  .app.large .view-component .loader-wrap,
  .app.xlarge .view-component .component-wrap,
  .app.xlarge .view-component .loader-wrap {
    margin-top: 76px; }

.info-component {
  position: fixed;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 368px;
  pointer-events: none;
  z-index: 100; }

.app.large .info-component,
.app.xlarge .info-component {
  top: 0;
  left: 356px;
  -webkit-transform: none;
          transform: none; }

.button-group {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  margin: 0 -6px; }
  .button-group .button {
    flex: 1;
    white-space: nowrap;
    margin: 0 5px; }

.button {
  background: #9d1d1d;
  border: 1px solid #571212;
  padding: 6px 8px;
  font-weight: bold;
  text-align: center;
  cursor: pointer; }
  .button:hover {
    background: #c82525; }
  .button.disabled {
    cursor: not-allowed;
    opacity: 0.5;
    background: #9d1d1d; }

.debug {
  position: absolute;
  bottom: 52px;
  right: 0;
  font-size: 0.8em;
  max-width: 300px;
  word-break: break-all;
  z-index: 0;
  opacity: 0.6;
  background: rgba(0, 0, 0, 0.8);
  padding: 8px; }