@font-face {
  font-family: sandy;
  src: url(../assets/fonts/SandyOne.ttf); }
body, html {
  height: 100%;
  width: 100%;
  background-color: #000;
  overflow-x: hidden;
  font-family: sandy; }
  @media (min-width: 992px) {
    body, html {
      overflow-y: hidden; } }

body.zas-home {
  font-family: "Roboto Mono", monospace; }

body.inspector {
  background-color: #111; }

.md-modal {
  z-index: 120000; }

.zas-logo {
  height: 100%;
  width: 100%;
  display: block;
  background-color: #000; }
  .zas-logo .zas-logo-img {
    width: 100%;
    height: 40%;
    z-index: 9999;
    background: url("../img/logo.png") 50% 50% no-repeat black; }
    @media (min-width: 992px) {
      .zas-logo .zas-logo-img {
        position: absolute;
        left: 0px;
        top: 0px; } }
  .zas-logo .zas-text {
    position: relative;
    padding: 0px 20px; }
    @media (min-width: 768px) {
      .zas-logo .zas-text {
        padding: 0px 45px; } }
    @media (min-width: 992px) {
      .zas-logo .zas-text {
        top: 40%;
        padding: 0px 120px; } }
    @media (min-width: 1200px) {
      .zas-logo .zas-text {
        padding: 0px 250px; } }
    @media (min-width: 1600px) {
      .zas-logo .zas-text {
        padding: 0px 450px; } }
    .zas-logo .zas-text h1 {
      font-family: "Roboto Mono", monospace;
      font-size: 16px;
      font-weight: 300;
      line-height: 1.5em;
      color: #fff; }
  .zas-logo h3 {
    font-family: "Roboto Mono", monospace;
    font-size: 12px;
    font-weight: 300;
    line-height: 1.5em;
    color: #fff;
    text-align: center;
    width: 100%;
    margin-top: 120px; }
    @media (min-width: 992px) {
      .zas-logo h3 {
        position: absolute;
        bottom: 30px;
        margin-top: 0px;
        margin-top: 60%; } }

.container-fluid {
  margin: 0px;
  padding: 0px;
  width: 100%;
  position: relative; }

.no-padding {
  padding-left: 0px;
  padding-right: 0px; }

#loading-screen {
  height: 100%;
  width: 100%;
  display: block;
  background-color: #132137; }
  #loading-screen .loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url("../img/kotaki.gif") 50% 50% no-repeat #132137; }

#video #video-intro {
  display: block;
  margin: 0 auto; }

.insp-button {
  color: #B0986C;
  text-decoration: none;
  padding: 12px 30px;
  margin: 0 auto;
  display: block;
  width: 240px;
  text-align: center;
  border: 2px solid #B0986C;
  transition: 0.1s all; }

a.skip-and-play {
  opacity: 0; }

a.skip-and-play:hover {
  background-color: #B0986C;
  color: #000;
  text-decoration: none; }

/* TALKBOX */
#talkbox-wrap {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.8);
  display: none; }
  #talkbox-wrap #talkbox {
    display: block;
    margin: 60px auto;
    position: relative; }
    #talkbox-wrap #talkbox .talkbox-navbar {
      height: 60px;
      padding: 20px;
      position: absolute;
      top: 0px;
      left: 0;
      z-index: 20000; }
      #talkbox-wrap #talkbox .talkbox-navbar span {
        color: #000; }
    #talkbox-wrap #talkbox .talkbox-dialog {
      height: 100%; }
      #talkbox-wrap #talkbox .talkbox-dialog .talkbox-dialog-element {
        height: 100%;
        position: relative; }
      #talkbox-wrap #talkbox .talkbox-dialog .talkbox-dialog-element.avatar img {
        max-width: 100%;
        position: absolute;
        bottom: 0; }
      #talkbox-wrap #talkbox .talkbox-dialog #talkbox-inspector-avatar img {
        left: 0; }
      #talkbox-wrap #talkbox .talkbox-dialog #talkbox-character-avatar img {
        right: 0; }
      #talkbox-wrap #talkbox .talkbox-dialog .talkbox-dialog-element.conversation .inspector, #talkbox-wrap #talkbox .talkbox-dialog .talkbox-dialog-element.conversation .character {
        position: relative;
        height: 270px !important; }
        #talkbox-wrap #talkbox .talkbox-dialog .talkbox-dialog-element.conversation .inspector .wrap, #talkbox-wrap #talkbox .talkbox-dialog .talkbox-dialog-element.conversation .character .wrap {
          display: none;
          height: auto;
          width: 100%;
          display: block;
          position: absolute;
          bottom: 0; }
          #talkbox-wrap #talkbox .talkbox-dialog .talkbox-dialog-element.conversation .inspector .wrap img, #talkbox-wrap #talkbox .talkbox-dialog .talkbox-dialog-element.conversation .character .wrap img {
            bottom: 0px; }
          #talkbox-wrap #talkbox .talkbox-dialog .talkbox-dialog-element.conversation .inspector .wrap p, #talkbox-wrap #talkbox .talkbox-dialog .talkbox-dialog-element.conversation .character .wrap p {
            position: absolute;
            top: 0;
            padding: 30px;
            padding-right: 10px !important;
            z-index: 10000;
            font-size: 11px;
            color: #000; }
      #talkbox-wrap #talkbox .talkbox-dialog .talkbox-dialog-element.conversation .inspector-wrap {
        left: -45px; }
      #talkbox-wrap #talkbox .talkbox-dialog .talkbox-dialog-element.conversation .character-wrap {
        left: 45px; }

#talkbox-wrap #talkbox .talkbox-dialog .talkbox-dialog-element.conversation .inspector, #talkbox-wrap #talkbox .talkbox-dialog .talkbox-dialog-element.conversation .character {
  height: 270px !important; }

#talkbox-wrap #talkbox .talkbox-dialog .talkbox-dialog-element.conversation .inspector .wrap p, #talkbox-wrap #talkbox .talkbox-dialog .talkbox-dialog-element.conversation .character .wrap p {
  padding-right: 10px; }

/* PLAY */
img {
  max-width: 110%; }

header.header-play {
  z-index: 50000; }
  header.header-play .inspector-header-left {
    height: 100%;
    z-index: 20000; }
    header.header-play .inspector-header-left .inspector-logo img {
      max-height: 100%;
      margin-left: 45px; }
  header.header-play .bubble {
    width: 400px;
    position: relative;
    display: none;
    z-index: 20000;
    margin-left: 150px;
    margin-top: -60px; }
    header.header-play .bubble p.talks {
      position: absolute;
      left: 80px;
      width: 285px;
      top: 50px;
      font-size: 11px; }
  header.header-play .inspector-header-uliki {
    position: absolute;
    right: 120px;
    width: 100%;
    padding-top: 20px;
    z-index: 20000; }
    header.header-play .inspector-header-uliki .collected-uliki {
      height: 70px;
      margin-top: 10px; }
      header.header-play .inspector-header-uliki .collected-uliki li {
        width: 60px;
        display: inline-block;
        float: right; }
        header.header-play .inspector-header-uliki .collected-uliki li a {
          overflow: hidden;
          padding-top: 10px;
          display: block;
          margin: 0px 5px; }
  header.header-play .inspector-header-notebook {
    height: 90px;
    position: absolute;
    right: 0px;
    padding: 0px; }
    header.header-play .inspector-header-notebook .inspector-nav {
      float: right;
      padding: 0px;
      padding-top: 20px;
      height: 100%; }
      header.header-play .inspector-header-notebook .inspector-nav a.notepad-trigger {
        padding: 5px;
        width: 60px;
        height: 60px; }
        header.header-play .inspector-header-notebook .inspector-nav a.notepad-trigger img {
          height: 70px;
          margin-top: 10px;
          margin-right: 10px; }

header {
  z-index: 50000; }

header.isloading {
  display: none; }

#p5_loading {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url("../img/kotaki.gif") 50% 50% no-repeat #132137; }

#p5canvas {
  cursor: url("../assets/cursors/default.png"), default; }

#p5canvas.charhover {
  cursor: url("../assets/cursors/charhover.png"), default; }

#p5canvas.evidencehover {
  cursor: url("../assets/cursors/evidencehover.png") 15 15, auto; }

#docs-wrap, #note-wrap, #talkbox-wrap, #notepad-wrap, #photo-wrap, #disturbing-wrap, #theprince-wrap {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  position: absolute;
  top: 0;
  left: 0;
  display: none; }

#docs-wrap {
  position: absolute;
  top: 0px;
  padding-top: 15px;
  width: 100%; }
  #docs-wrap #docs img {
    margin: 0 auto;
    height: 580px;
    display: block; }

#disturbing-wrap {
  position: absolute;
  top: 0px;
  padding-top: 15px;
  width: 100%; }
  #disturbing-wrap #disturbing img {
    margin: 0 auto;
    height: 580px;
    display: block; }

#theprince-wrap {
  position: absolute;
  top: 0px;
  padding-top: 15px;
  width: 100%; }
  #theprince-wrap #theprince img {
    margin: 0 auto;
    height: 580px;
    display: block; }

#note-wrap {
  position: absolute;
  top: 0px;
  padding-top: 15px;
  width: 100%; }
  #note-wrap #note img {
    margin: 0 auto;
    height: 580px;
    display: block; }

#photo-wrap {
  position: absolute;
  top: 0px;
  padding-top: 15px;
  width: 100%; }
  #photo-wrap #photo img {
    margin: 0 auto;
    height: 580px;
    display: block; }

#talkbox-wrap #talkbox {
  position: relative; }
  #talkbox-wrap #talkbox .talkbox-navbar .talkbox-navbar-topic img {
    width: 36px; }
  #talkbox-wrap #talkbox #talkbox-frame {
    position: absolute;
    width: 110%;
    top: -20px;
    left: -40px;
    height: 110%; }
    #talkbox-wrap #talkbox #talkbox-frame img {
      width: 100%;
      height: 100%; }

#notepad-wrap #notepad .notepad-pages {
  position: relative;
  height: 100%;
  width: 100%; }
  #notepad-wrap #notepad .notepad-pages .notepad-pages-nav ul.notepad-tabs {
    position: absolute;
    top: 5px;
    right: 90px;
    list-style: none;
    z-index: 50000; }
    #notepad-wrap #notepad .notepad-pages .notepad-pages-nav ul.notepad-tabs li {
      display: inline-block;
      height: 26px;
      width: 48px;
      margin: 0px 2px !important;
      float: left; }
      #notepad-wrap #notepad .notepad-pages .notepad-pages-nav ul.notepad-tabs li a {
        display: block;
        height: 100%;
        width: 100%; }
    #notepad-wrap #notepad .notepad-pages .notepad-pages-nav ul.notepad-tabs li.tab0 {
      display: none; }
    #notepad-wrap #notepad .notepad-pages .notepad-pages-nav ul.notepad-tabs #scenetab {
      width: 48px; }
    #notepad-wrap #notepad .notepad-pages .notepad-pages-nav ul.notepad-tabs #alltab {
      display: none !important; }
  #notepad-wrap #notepad .notepad-pages .notepad-pages-spread {
    height: 100%;
    width: 100%;
    position: relative; }
    #notepad-wrap #notepad .notepad-pages .notepad-pages-spread .notepad-page-evidence {
      z-index: 5000;
      float: right;
      height: 100%;
      position: absolute;
      right: 0;
      top: 0;
      padding: 60px 120px 60px 45px; }
      #notepad-wrap #notepad .notepad-pages .notepad-pages-spread .notepad-page-evidence ul {
        padding: 0px;
        margin-bottom: 5px; }
        #notepad-wrap #notepad .notepad-pages .notepad-pages-spread .notepad-page-evidence ul li a {
          font-size: 11px;
          color: #000;
          transition: 0.2s all;
          cursor: pointer; }
        #notepad-wrap #notepad .notepad-pages .notepad-pages-spread .notepad-page-evidence ul li a:hover {
          color: #8B1A1A !important;
          text-decoration: none; }
        #notepad-wrap #notepad .notepad-pages .notepad-pages-spread .notepad-page-evidence ul li a.selected-ulika {
          color: #8B1A1A !important; }

.mobile-screen {
  height: 100%;
  width: 100%;
  display: block;
  background-color: #132137; }
  .mobile-screen .kotaki-mobile {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 40%;
    z-index: 9999;
    background: url("../img/kotaki-mobile.gif") 50% 50% no-repeat #132137; }
    @media (min-width: 768px) {
      .mobile-screen .kotaki-mobile {
        height: 50%; } }
  .mobile-screen h3 {
    text-align: center;
    font-size: 12px;
    position: fixed;
    color: #d9d9d9;
    font-weight: 300;
    padding: 0px 30px;
    line-height: 1.5em;
    top: 40%; }
    @media (min-width: 768px) {
      .mobile-screen h3 {
        top: 50%;
        padding: 0px 90px; } }

/* General styles for the modal */
/* 
Styles for the html/body for special modal where we want 3d effects
Note that we need a container wrapping all content on the page for the 
perspective effects (not including the modals and the overlay).
*/
.md-perspective,
.md-perspective body {
  height: 100%;
  overflow: hidden; }

.md-perspective body {
  background: #222;
  -webkit-perspective: 600px;
  -moz-perspective: 600px;
  perspective: 600px; }

.container {
  min-height: 100%; }

.md-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 70%;
  max-width: 920px;
  min-width: 320px;
  max-height: 70%;
  min-height: 60%;
  height: auto;
  z-index: 12000;
  visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%); }

.md-show {
  visibility: visible; }

.md-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  visibility: hidden;
  top: 0;
  left: 0;
  z-index: 11000;
  opacity: 0;
  background: rgba(0, 0, 0, 0.9);
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s; }

.md-show ~ .md-overlay {
  opacity: 1;
  visibility: visible; }

/* Individual modal styles with animations/transitions */
/* Effect 1: Fade in and scale up */
.md-effect-1 .md-content {
  -webkit-transform: scale(0.7);
  -moz-transform: scale(0.7);
  -ms-transform: scale(0.7);
  transform: scale(0.7);
  opacity: 0;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  min-height: 60%;
  position: relative; }

.md-show.md-effect-1 .md-content {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
  background-color: black;
  min-height: 70%;
  padding: 100px 60px 100px 60px;
  position: relative;
  color: #fff;
  font-family: "Roboto Mono", monospace;
  border: 1px solid #a0a0a0;
  overflow: hidden; }

.md-content-nav {
  position: absolute;
  top: 0px;
  left: 0px;
  padding: 20px 60px; }

button.md-trigger {
  background: none;
  border: none;
  color: #337ab7;
  text-decoration: none;
  padding: 0px; }

.md-close {
  float: right;
  background: #000;
  border: none; }

.uliki-to-compare-first, .uliki-to-compare-second {
  width: 340px;
  height: 40px;
  color: #B0986C;
  text-align: center;
  border-bottom: 2px dashed #B0986C; }
  .uliki-to-compare-first a, .uliki-to-compare-second a {
    color: #B0986C;
    text-decoration: none; }
  .uliki-to-compare-first a:hover, .uliki-to-compare-second a:hover {
    text-decoration: none;
    color: #B0986C; }

.uliki-plus {
  height: 40px;
  width: 80px;
  font-size: 30px;
  color: #B0986C;
  text-align: center; }

a:focus {
  outline: none !important; }

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