/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}

@font-face {
  font-family: 'FootlightMTLight.woff';
  font-style: normal;
  font-weight: normal;
  src: local('FootlightMTLight.woff'), url('../fonts/FootlightMTLight.woff') format('woff');
}

body {
  background-color:#000;
  color:#fff;  
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari*/     
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none;
  font-size:1.5em;
  line-height:1.5em;
  font-family:'FootlightMTLight.woff';
  font-weight:normal;
  overflow: hidden;
    /*text-transform: uppercase;*/
}
body.no-scroll,
body.preload,
body.no-scroll #content-container,
body.preload #content-container {
  overflow: hidden;
}

body, html {
	height: 100%;
}

.goldtext{
  color:#ecab4d;
}

.section {
  position:relative;
  max-width:1600px;
  margin:0 auto;
  /*overflow:hidden;  */
}
.section-left-right-fade {
  width:100%;
  height:100%;
  position:absolute;
  top:0%;
  left:0%;
  background: url(../images/Common/left-right-fade.png) center repeat-y;
  background-size:contain;
  z-index:2;
  pointer-events: none;
}
.section-top-fade {
  background: url("../images/Common/edge-top.png") center top no-repeat;
  width:100%;
  height:100%;
  position:absolute;
  top:0px;
  left:0%;
  z-index:2;
}
.section-bottom-fade {
  background: url("../images/Common/edge-bottom.png") center bottom no-repeat;
  width:100%;
  height:100%;
  position:absolute;
  bottom:0%;
  left:0%;
  z-index:2;
}

.img-responsive {
  max-width:100%;
  height:auto;
}

.ch-text {
  position:relative;
  top:0px;
  left:0px;  
}

img.placeholder {
  visibility: hidden;
}
.img-responsive {
  max-width:100%;
  height:auto;
}

.loading-animate,
.animate-text-more {
  animation: blinker 3s linear infinite;
}
@keyframes blinker {
  50% {
    opacity: 0;
  }
}


/*
.edge-overlay {
  background: url("../images/edge-top.png") center top no-repeat;
  width:100%;
  height:100%;
  position:absolute;
  top:0px;
  left:0px;
  z-index:3;
}
.edge-bottom {
  background: url("../images/edge-bottom.png") center bottom no-repeat;
  width:100%;
  height:100%;
  position:relative;
  top:0px;
  left:0px;
  z-index:3;
}
*/

/* Preload
############################ */
#preload-container {  
  width:100%;
  height:100%;
  overflow:hidden;
  position:fixed;
  top:0px;
  left:0px;
  z-index:9999;
  /*background: #03a2f5 url(../images/loader.png) center center no-repeat;*/
  background-color:#000;  
  font-size:2vw;
  line-height:2vw;
}
#preload-container.hidden {
  display:none;
}
#preload-gif {
  position: absolute;
  top:35%;
  left:35%;  
  width:30%;
  height:1.77%;
  color: rgba(255,255,255,0.75);
	text-align:center;
  font-size:1.5em;
  text-align:center;
}
#preload-gif img {
  display:inline-block;
}
#preload-progress {
  /*
  position: absolute;
  top:45%;
  left:35%;  
  width:30%;
  height:1.77%;
  color: rgba(255,255,255,0.75);
	text-align:center;
  font-size:1.5em;
  */
}
#preload-progress.clickable {
  cursor: pointer;
}
/* End Preload ############################ */

/* UI
############################ */
.ui-button {
  position:fixed;
  top:3%;
  z-index:99;
  cursor:pointer;
  font-size:1.5em;
}
#ui-button-sound {
  left:3%;
}
#ui-button-sound.mute {
  opacity: 0.3;
}
#ui-button-nav {
  right:3%;
  text-align: right;
}
#ui-button-nav-menu {
  background-color:#2e2e2e;
  list-style:none;
  padding:10px;
  margin:0px;
  display:none;
}
#ui-button-nav-icon.active #ui-button-nav-menu{
  display:block;
}
#ui-button-nav-menu li {
  padding:10px;
  margin:0px;
  border-bottom:1px solid #fff;
  text-align:left;
}
#ui-button-nav-menu li.last {
  border:0px;
}
#ui-scroll-arrows {
  top:10%;
  right:3%;
}
.ui-scroll-arrow {
  cursor: pointer;
  padding-bottom:10px;
}
/* End UI ############################ */

#content-container {
  position:relative;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  z-index:2;  
  /*overflow:hidden;*/
  
  overflow-y: scroll;
  overflow-x: hidden;
  
  margin:0 auto;
}

#orientation-overlay,
#loading-overlay {
  width:100%;
  height:100%;
  background-color:#000;
  position:fixed;
  top:0px;
  left:0px;
  z-index:999;
  display:none;
  text-align: center;
  /*padding-top: 45%;*/
}
#orientation-overlay.active {
  display:block;
}
#orientation-graphic {
  /*512x512*/
  width:80%;
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
}
#orientation-graphic img {
  width:25.6%;
}
#orientation-text {
  width:100%;
  position:relative;
}
#loading-overlay.active {  
  opacity: 0.9;
  display:flex;  
  justify-content:center;
  align-items: center;
}

#section-loading {
  text-align:center;
}
#section-end,
.ch-title {
  height:100vh;
}
#section-end-container,
.ch-title-container,
.ch-legal-container {
  width:100%;
  position:relative; 
  text-align: center;
  padding: 20% 0%;
}
.ch-legal-container {
  width:80%;
  margin: 0 auto;
}



#section-end-container img {
  /*1000x316*/  
  width:70%;
  height:28.08%;
}

/* Intro
############################ */
#intro-top-bg {
  width:100%;
  height:30%;
  background-color:#000;
}
#intro-wrap {
  padding-top:1%;
}
#intro-bg {  
  background: url(../images/Chapter1/GandH_SiteCover.jpg) center top no-repeat;
  background-size:contain;
}
#intro-logo {
  /* 1040 x 121 */
  text-align:center;
  width:52%;
  height:10.755%;
  position:absolute;
  top:0%;
  left:24%;
}
#intro-scroll-text {
  position: absolute;
  top: 68%;
  text-align: center;
  width: 100%;
}
#intro-scroll-image {
  /*85x202*/
  position: absolute;
  top:75%;
  left: 48.7%;
  width: 3.25%;
}
#intro-end,
.ch-title {
  width:100%;
  position:relative;
  top:0px;
  text-align: center;
  padding:10% 0%;  
}
.ch-title {
  padding:0;
}
#intro-end img,
.ch-title img {
  /*1000x316*/
  width:50%;
  height:28.08%;
}

.intro-bg {  
  background: url(../images/Chapter1/Trees.jpg) center top no-repeat;
  background-size:contain;
  margin-top: 20%;
}
.intro-logo {
  /* 1040 x 121 */
  text-align:center;
  width:52%;
  height:10.755%;
  position:absolute;
  top:0%;
  left:24%;
}
.intro-scroll-text {
  position: absolute;
  top: 20%;
  text-align: center;
  width: 100%;
}
.intro-scroll-image {
  /*85x202*/
  position: absolute;
  top:27%;
  left: 47.7%;
  width: 4.25%;
}
.intro-ch-header {
  /*806x273*/
  position: absolute;
  top: 56%;
  left: 29.5%;
  width: 40.3%;
}

/* Chapters
############################ */

.ch-section {
  display:none;
}
.ch-section.active {
  display:block;
}

.story-text-wrap,
.story-text{
  z-index:4;
}
.story-text-wrap {
  position:absolute;
  bottom:5%;
  left:0%;
  width:100%;
  text-align:center;
  z-index:4;
}
.story-text-wrap.fixed {
  position:absolute;
  bottom:5%;
  left:0%;
  width:100%;
  text-align:center;
}
.story-text-wrap.two-lines,
.story-text-wrap.two-lines.fixed {
  bottom:5%;
}
.ch-bg {
  overflow:hidden;
  width:100%;
  position:relative;  
  /*position: relative !important;*/
}
.ch-wrap {
  position:relative;
  top:0px;
  left:0px;
  width:100%;
}
.ch-overlay-for-mobile-bug {
  width:100%;
  height:100%;
  position:absolute;
  top:0%;
  left:0%;
  z-index:3;
  pointer-events: none;
  /*
  background-color:#0000ff;
  opacity: 0.3;
  */
}
.story-text {
  text-shadow: 0px 0px 12px #000000, 
               0px 0px 12px #000000, 
               0px 0px 12px #000000, 
               0px 0px 12px #000000;
  opacity: 0;  
  -webkit-transition: all 0.5s ease-in-out;
     -moz-transition: all 0.5s ease-in-out;
      -ms-transition: all 0.5s ease-in-out;
       -o-transition: all 0.5s ease-in-out;
          transition: all 0.5s ease-in-out;
}
.story-text.visible {
  opacity: 1;
  -webkit-transform: none;
     -moz-transform: none;
      -ms-transform: none;
       -o-transform: none;
          transform: none;
}

/* Chapter 1
############################ */

/* Ch1 Panel1 */
#ch1-1-line-cover {
  width:100%;
  height:30px;
  background-color:#000000;
  position:absolute;
  top:-30px;
  z-index:9;
}
#ch1-1-bg {
  background: url(../images/Chapter1/Chapter1_Panel1.jpg) center top no-repeat;
  background-size:contain;
  overflow:visible;
}
#ch1-1-fg {  
  position:absolute;
  top:-2px;
  width:100%;
  background: url(../images/Chapter1/Chapter1_Panel1_FG.png) center top no-repeat;
  background-size:contain;
  /*z-index: 1;*/
}
#ch1-1-text1-trigger {
  position:absolute;
  top:10%;
  width:100%;  
}
#ch1-1-end-trigger {
  position:absolute;
  /*top:51%;*/
  bottom:20%;
  width:100%;  
}
#canvas-smoke {
  /*300x1130*/
  width:15%;
  height:61%;
  /*background-color:#ccc;*/
  position:absolute;
  top:0%;
  left:35%;
}
#ch1-1-text1.story-text-wrap {
  position:absolute;
  bottom:10%;
  left:0%;
  width:100%;
  text-align:center;  
}

/* Ch1 Panel2 */
#ch1-2-bg {
  background: url(../images/Chapter1/Chapter1_Panel2_BG.jpg) center no-repeat;
  background-size:contain;
  top:0px;
}
#ch1-2-fg {  
  /*346x735*/
  position:absolute;
  top: 20%;
  left: 16%;
  width: 17.3%;
  height: 65.33%;
  background: url(../images/Chapter1/Chapter1_Panel2_FG.png) center no-repeat;
  background-size:contain;
}
#ch1-2-text1-trigger {
  position:absolute;
  top:50%;
  width:100%;  
}
#ch1-2-end-trigger {
  position:absolute;
  bottom:0%;
  width:100%;  
}

/* Ch1 Panel3 */
#ch1-3-bg {
  background: url(../images/Chapter1/Chapter1_Panel3_BG.jpg) center no-repeat;
  background-size:contain;
  top:0px;
}
#ch1-3-mg {  
  /*2000x1333*/
  position:absolute;
  bottom: 0%;
  left: 0%;
  width: 100%;
  height: 118.488%;
  background: url(../images/Chapter1/Chapter1_Panel3_MG.png) center bottom no-repeat;
  background-size:contain;
}
#ch1-3-fg {  
  /*2000x597*/
  position:absolute;
  bottom: 0%;
  left: 0%;
  width: 100%;
  height: 53.066%;
  background: url(../images/Chapter1/Chapter1_Panel3_FG.png) center bottom no-repeat;
  background-size:contain;
}
#ch1-3-text1-trigger {
  position:absolute;
  bottom:55%;
  width:100%;  
}
#ch1-3-end-trigger {
  position:absolute;
  bottom:0%;
  width:100%;  
}
#ch1-3-text1.story-text-wrap {
  bottom:8%;  
}

/* Ch1 Panel4 */
#ch1-4-trigger {
  position:absolute;
  top:50%;
  width:100%;
}
#ch1-4-bg {  
  background: url(../images/Chapter1/Chapter1_Panel4_bg.jpg) center no-repeat;
  background-size:contain;
  position:absolute;
  top:0px;
  opacity:0;
}
#ch1-4-hand {  
  /*551x907*/
  position:absolute;
  bottom: 0%;
  left: 0%;
  width: 27.55%;
  height: 80.622%;
  background: url(../images/Chapter1/Chapter1_Panel4-HAND.png) center bottom no-repeat;
  background-size:contain;
}
#ch1-4-mirror {  
  /*694x885*/
  position:absolute;
  bottom: 0%;
  left: 60%;
  width: 34.7%;
  height: 78.666%;
  background: url(../images/Chapter1/Chapter1_Panel4_MIRROR.png) center bottom no-repeat;
  background-size:contain;
}
#ch1-4-text1 {
  bottom:8%;
}
#ch1-4-text1-trigger {
  position:absolute;
  top:60%;
  width:100%;  
}
#ch1-4-end-trigger {
  position:absolute;
  bottom:0%;
  width:100%;  
}

/* Ch1 Panel5 */
#ch1-5-bg {
  background: url(../images/Chapter1/Chapter1_Panel5_BG.jpg) center no-repeat;
  background-size:contain;
  top:0px;
}
#ch1-5-mg {  
  /*2000x1533*/
  position:absolute;
  bottom: 0%;
  left: 0%;
  width: 100%;
  height: 136.2666%;
  background: url(../images/Chapter1/Chapter1_Panel5_MG.png) center bottom no-repeat;
  background-size:contain;
}
#ch1-5-fg {  
  /*2000x1031*/
  position:absolute;
  bottom: 8%;
  left: 0%;
  width: 100%;
  height: 91.6444%;
  background: url(../images/Chapter1/Chapter1_Panel5_FG.png) center bottom no-repeat;
  background-size:contain;
}
/*
#ch1-5-text1-trigger {
  position:absolute;
  bottom:55%;
  width:100%;  
}
*/
#ch1-5-end-trigger {
  position:absolute;
  bottom:0%;
  width:100%;  
}
#ch1-5-wrap .story-text-wrap {
  position:absolute;
  bottom:8%;
  left:0%;
  width:100%;
  text-align:center;
}