.hud-top,
.hud-bottom,
.about {
  background: #000;
  width: 100%;
  height: 60px;
  position: absolute;
  font-family: 'misolight';
  color: #c1c1c1;
  line-height: 60px;
  font-size: 1.3125rem;
  -webkit-user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
  pointer-events: auto; }

.hud-container {
  padding: 0 30px; }

.hud-top {
  top: 0;
  text-transform: uppercase; }

.hud-bottom {
  bottom: 0; }

.hud {
  position: absolute;
  z-index: 100;
  width: 100%;
  height: 100%;
  pointer-events: none; }
  .hud h1 {
    margin: 0;
    font-size: 1.3125rem;
    float: left;
    margin-right: 10px;
    cursor: default;
    font-weight: normal; }
  .hud .arrow {
    float: left;
    cursor: pointer;
    opacity: 0.5;
    -webkit-transition: 0.15s opacity linear;
    -ms-transition: 0.15s opacity linear;
    -moz-transition: 0.15s opacity linear;
    -o-transition: 0.15s opacity linear;
    transition: 0.15s opacity linear; }
    .hud .arrow:hover {
      opacity: 0.8; }
  .hud .current-page {
    float: left;
    cursor: default; }
  .hud .thumbnails {
    float: left;
    margin: 0 0 0 7px;
    padding: 11px 0;
    list-style-type: none; }
    .hud .thumbnails li {
      float: left;
      display: block;
      height: 38px;
      width: 33px;
      cursor: pointer;
      position: relative; }
      .hud .thumbnails li:hover .stroke, .hud .thumbnails li.selected .stroke {
        opacity: 1; }
      .hud .thumbnails li .stroke {
        display: block;
        position: absolute;
        z-index: 1;
        background: url("../img/stroke.png");
        opacity: 0;
        height: 38px;
        width: 33px; }
      .hud .thumbnails li img {
        position: absolute;
        z-index: 2; }
      .hud .thumbnails li:not(:first-child) {
        margin-left: 10px; }
  .hud .about-link {
    background: url("../img/about.png");
    text-align: center;
    line-height: 38px;
    text-transform: none; }
    .hud .about-link:hover {
      color: #e7e7e7;
      cursor: pointer;
      background: url("../img/stroke.png"); }

.about {
  background: #000;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 640px;
  height: 420px;
  margin: -210px 0 0 -320px; }
  .about h1 {
    text-transform: uppercase;
    font-size: 1.875rem;
    text-align: center;
    float: none;
    margin: 30px 0; }
  .about .about-illustration {
    text-align: center;
    margin-bottom: 10px; }
  .about .text {
    padding: 0 121px;
    font-family: 'opensans', 'Open Sans', 'Helvetica Neue', 'Helvetica', sans-serif;
    line-height: 1.375rem;
    font-size: 0.8125rem;
    color: #e7e7e7; }
  .about .close {
    position: absolute;
    top: 50px;
    right: 50px;
    opacity: 0.5;
    line-height: 0;
    cursor: pointer; }
    .about .close:hover {
      opacity: 0.8; }
  .about .lw-logo {
    margin-left: 3px;
    position: relative;
    top: 1px; }
  .about p {
    text-align: justify; }
  .about p.centered {
    text-align: center;
    margin-top: 40px; }

.about {
  -webkit-user-select: text;
  -ms-user-select: text;
  -moz-user-select: text;
  -o-user-select: text;
  user-select: text; }

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on September 26, 2013 */
@font-face {
  font-family: 'misoregular';
  src: url("../fonts/miso-webfont.eot");
  src: url("../fonts/miso-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/miso-webfont.woff") format("woff"), url("../fonts/miso-webfont.ttf") format("truetype"), url("../fonts/miso-webfont.svg#misoregular") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'misolight';
  src: url("../fonts/miso-light-webfont.eot");
  src: url("../fonts/miso-light-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/miso-light-webfont.woff") format("woff"), url("../fonts/miso-light-webfont.ttf") format("truetype"), url("../fonts/miso-light-webfont.svg#misolight") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'opensans';
  src: url("../fonts/opensans-regular-webfont.eot");
  src: url("../fonts/opensans-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/opensans-regular-webfont.woff") format("woff"), url("../fonts/opensans-regular-webfont.ttf") format("truetype"), url("../fonts/opensans-regular-webfont.svg#misolight") format("svg");
  font-weight: normal;
  font-style: normal; }

.about {
  opacity: 0;
  pointer-events: none;
  -webkit-transform: scale(0.8);
  -ms-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -o-transform: scale(0.8);
  transform: scale(0.8);
  -webkit-transition: 0.2s all ease;
  -ms-transition: 0.2s all ease;
  -moz-transition: 0.2s all ease;
  -o-transition: 0.2s all ease;
  transition: 0.2s all ease; }

.about.visible {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1); }

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-family: 'opensans', 'Open Sans', 'Helvetica Neue', 'Helvetica', sans-serif;
  position: relative; }

body {
  color: #e7e7e7;
  background: #000; }

a {
  color: #00ccff;
  text-decoration: none; }
  a:hover {
    color: #00a3cc; }

.container {
  position: relative;
  margin-top: 60px;
  -webkit-transition: 250ms opacity linear;
  -ms-transition: 250ms opacity linear;
  -moz-transition: 250ms opacity linear;
  -o-transition: 250ms opacity linear;
  transition: 250ms opacity linear; }
  .container.hidden {
    opacity: 0; }
  .container canvas {
    display: block; }

.no-webgl {
  position: fixed;
  height: 100%;
  width: 100%;
  background: #000;
  z-index: 9999;
  text-align: center; }
  .no-webgl img {
    margin-bottom: 50px; }
  .no-webgl .content {
    height: 250px;
    position: absolute;
    top: 50%;
    margin-top: -125px;
    width: 100%; }
    .no-webgl .content h1 {
      font-family: 'misolight', 'miso', 'opensans', 'Open Sans', sans-serif;
      text-transform: uppercase; }
    .no-webgl .content p {
      max-width: 500px;
      margin: 0 auto;
      font-size: 0.8125rem;
      line-height: 1.375rem; }

.no-transitions * {
  -webkit-transition: none !important;
  -ms-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  transition: none !important; }