html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: auto;
  position: fixed;
  background: black; }

html {
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  text-size-adjust: none; }

h1, h2, h3, h4, text, p {
  -webkit-font-smoothing: antialiased;
  -moz-osx-webkit-font-smoothing: antialiased;
  font-family: 'Open Sans', sans-serif;
  user-select: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.overlay {
  position: fixed;
  width: 100%;
  height: 2000px;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-color: rgba(0, 0, 0, 0.5); }

.brim {
  background-color: rgba(255, 255, 255, 0.5);
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%; }
  .brim p {
    color: black;
    font-size: 50px; }

.loading-anim {
  width: 100px;
  height: 100px;
  position: fixed;
  left: 50%;
  top: 50%;
  margin-left: -50px;
  margin-top: -100px;
  z-index: 9998;
  transition: opacity 1s ease-out; }
  .loading-anim.close {
    opacity: 0; }

.container {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0; }

.audio-toggle {
  cursor: pointer;
  position: fixed;
  z-index: 9999;
  bottom: 3%;
  left: 5%;
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit; }

.fullscreen-anim {
  cursor: pointer;
  position: fixed;
  z-index: 9999;
  width: 20px;
  height: 20px;
  bottom: 3%;
  right: 5%;
  display: none; }
  .fullscreen-anim .bar {
    position: absolute;
    background-color: #505050;
    transition: margin-top 0.25s ease-out, margin-left 0.25s ease-out; }
    .fullscreen-anim .bar.vertical {
      height: 7px;
      width: 2px; }
    .fullscreen-anim .bar.horizontal {
      width: 7px;
      height: 2px; }
  .fullscreen-anim .top {
    top: 0; }
    .fullscreen-anim .top .horizontal {
      /*margin-top: $size - $thickness;*/ }
  .fullscreen-anim .bottom {
    bottom: 0; }
    .fullscreen-anim .bottom .horizontal {
      margin-top: 5px; }
  .fullscreen-anim .left {
    left: 0; }
    .fullscreen-anim .left .vertical {
      /*margin-left: $size - $thickness;*/ }
  .fullscreen-anim .right {
    right: 0; }
    .fullscreen-anim .right .vertical {
      margin-left: 5px; }
  .fullscreen-anim .square {
    width: 7px;
    height: 7px;
    position: absolute; }
  .isChrome .fullscreen-anim {
    display: block; }
  .isFullscreen .fullscreen-anim .top .horizontal {
    margin-top: 5px; }
  .isFullscreen .fullscreen-anim .bottom .horizontal {
    margin-top: 0; }
  .isFullscreen .fullscreen-anim .left .vertical {
    margin-left: 5px; }
  .isFullscreen .fullscreen-anim .right .vertical {
    margin-left: 0; }

.sound-icon {
  position: absolute;
  background-size: 100%;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transition: opacity .5s ease-out; }

.desc {
  position: fixed;
  opacity: 1;
  color: white;
  bottom: 10%;
  width: 100%;
  text-align: center;
  font-size: 12px;
  letter-spacing: 5px;
  transition: opacity .5s ease-out; }
  .isLoading .desc {
    opacity: 0; }
  .isMobile .desc {
    display: none;
    opacity: 0; }
  .hasInteract .desc {
    opacity: 0; }

.Main-Canvas {
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  position: absolute;
  /*user-select:none;*/
  opacity: 1;
  transition: opacity .5s ease-out .25s; }
  .isLoading .Main-Canvas {
    opacity: 0; }

div:-webkit-full-screen {
  width: 100% !important; }

div:-moz-full-screen {
  width: 100% !important; }

div:-ms-fullscreen {
  width: 100% !important; }

div:fullscreen {
  width: 100% !important; }

/* While in fullscreen, hide any children with class 'tohide' */
:-webkit-full-screen .tohide {
  display: none; }

:-moz-full-screen .tohide {
  display: none; }

:-ms-fullscreen .tohide {
  display: none; }

:fullscreen .tohide {
  display: none; }

.container-ui {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity .5s ease-out; }
  .isOpened .container-ui {
    opacity: 1; }

.Message {
  position: absolute;
  z-index: 999;
  width: 100%;
  top: calc(50% - 50px);
  text-align: center;
  letter-spacing: 11px;
  color: white;
  opacity: 0;
  transition: opacity .5s ease-out, letter-spacing .5s ease-out; }
  .isLoading .Message {
    letter-spacing: 10px;
    opacity: 1; }

.Loading-container {
  position: absolute;
  z-index: 998;
  width: 80px;
  height: 2px;
  margin-left: -40px;
  top: 55%;
  left: 50%;
  opacity: 0;
  transform: scale(0, 1);
  transition: opacity .5s ease-out, transform .5s ease-out;
  background-color: rgba(255, 255, 255, 0.2); }
  .isLoading .Loading-container {
    transition: opacity .5s ease-out 1s;
    opacity: 1;
    transform: scale(1, 1); }
  .Loading-container.loaded {
    transform: scale(0.75, 1); }
  .Loading-container.close {
    transform: scale(0, 1); }

.Loading-Bar {
  width: 0%;
  height: 100%;
  background: rgba(255, 255, 255, 0.5);
  transition: width .5s ease-out; }

/*# sourceMappingURL=main.css.map*/