/*
 * Contact administrator for font license information.
*/
@font-face {font-family: 'Belda-NorReg';src: url('webfonts/3548D8_0_0.eot');src: url('webfonts/3548D8_0_0.eot?#iefix') format('embedded-opentype'),url('webfonts/3548D8_0_0.woff2') format('woff2'),url('webfonts/3548D8_0_0.woff') format('woff'),url('webfonts/3548D8_0_0.ttf') format('truetype');}
@font-face {font-family: 'Belda-NorRegIt';src: url('webfonts/354948_0_0.eot');src: url('webfonts/354948_0_0.eot?#iefix') format('embedded-opentype'),url('webfonts/354948_0_0.woff2') format('woff2'),url('webfonts/354948_0_0.woff') format('woff'),url('webfonts/354948_0_0.ttf') format('truetype');}





* {
	margin: 0;
	padding: 0;
}

em {
	font-family: Belda-NorRegIt; 
	font-weight: normal; 
	font-style: italic; 
}

img {
	max-width: 100%;
	height: auto;
	display: block;			/* apparently this is useful somehow U_U */
}

a {
}

a:link, a:visited {
	color: #c9a76c;
	text-decoration: none;
}

a:hover, a:active {
	color: #fff1ba;
	text-decoration: none;
}


.hintButton {
	pointer-events: auto;
	z-index: inherit;
	cursor: pointer;
	color: #72aacc;
	background: rgba(15, 37, 56, 0.3);
	border-radius: 20px;
	border-style: dashed;
	border-width: 5px;
	border-color: #72aacc;
}


.button {
	z-index: inherit;
	cursor: pointer;
}

.menuButton {
	z-index: inherit;
	cursor: pointer;
}

.buttonDisabled {
	z-index: inherit;
	pointer-events: none;
	color: #777777;
	background: rgba(15, 15, 15, 0.3);
	border-radius: 20px;
	border-style: dashed;
	border-width: 5px;
	border-color: #777777;
}

.centeredObject {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}


#hints {
	position: fixed;
	z-index: 2000;									/* z-index: 2000 */
	width: 100%;
	height: 100%;
	transition: opacity 0.3s;
}

#gotoNext {
	position: fixed;
	width: 40%;
	height: 50%;
	bottom: 0px;
	right: 0px;
}

#gotoPrevious {
	position: fixed;
	width: 40%;
	height: 50%;
	bottom: 0px;
	left: 0px;
}

#gotoMenu {
	position: fixed;
	width: 95%;
	height: 40%;
	top: 0px;
	left: 2%;
}





	#title_scene {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0%;
		bottom: 0%;

		transition: opacity 1s; 
	    -webkit-transition: opacity 1s;
	    -moz-transition: opacity 1s;
	    -o-transition: opacity 1s;
	}


	#title_warning {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0%;
		bottom: 0%;

		transition: opacity 1s; 
	    -webkit-transition: opacity 1s;
	    -moz-transition: opacity 1s;
	    -o-transition: opacity 1s;
	}


#endNavContainer {
	z-index: 3000;
	position: absolute;
	width: 92%;
	height: 88%;
	top: 6%;
	left: 4%;
	color: #c9a76c;
	text-align: center;
}
	
	#endNavPrevious {
		position: absolute;
		bottom: 6%;
		left: 4%;
		width: 30%;

	}

	#endNavCenterBottom {
		text-align: center;
		position: absolute;
		bottom: 6%;
		left: 50%;
		transform: translate(-50%, 0%);
		width: 30%;
	}

		.share_links {
			text-align: center;
			padding-top: 1vmin;
			display: inline-block;
		}

			.share_links ul {
			    list-style-type: none;
			    margin: 0;
			    padding: 1.5vmin;
			}

			.share_links li {
			    float: left;
			}

			.share_links li a {
			    display: block;
			    text-align: center;
			    padding-left: 1.5vmin;
			    padding-right: 1.5vmin;
			    text-decoration: none;
			}

			.share_links img {
			    display: block;
			    margin-left: auto;
			    margin-right: auto;
			}

	#endNavNext {
		text-align: center;
		position: absolute;
		bottom: 6%;
		right: 4%;
	}

	    
#preloader {
	position: fixed;
	background-color: #000;
	width: 100%;
	height: 100%;
	z-index: 3000;									/* z-index: 3000 */
}

.preloadContainer {
	position: fixed;
	color: #726d4b;
	font-size: 22pt;
	letter-spacing: 3pt;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}


.pinned {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.pinnedTop {
	position: absolute;
}

.pinnedBottom {
	position: absolute;
}

.unpinned {
	position: absolute;
	/*left: 50%;
	transform: translate(-50%, 0);*/
}


.hidden {
	opacity: 0;
}

.revealed {
	opacity: 1;
}

.stateWithinShot{
	/* this is only for identification within code for setting visibility */
}


.fastShot {
	width: 100%;

    transition: opacity .25s; 
    -webkit-transition: opacity .25s;
    -moz-transition: opacity .25s;
    -o-transition: opacity .25s;

    -webkit-backface-visibility: hidden;
}

.shot {
	width: 100%;

    transition: opacity 1s; 
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;

    -webkit-backface-visibility: hidden;
}

.slowShot {
	width: 100%;

    transition: opacity 2s; 
    -webkit-transition: opacity 2s;
    -moz-transition: opacity 2s;
    -o-transition: opacity 2s;

    -webkit-backface-visibility: hidden;
}

.verySlowShot {
	width: 100%;

    transition: opacity 4s; 
    -webkit-transition: opacity 4s;
    -moz-transition: opacity 4s;
    -o-transition: opacity 4s;

    -webkit-backface-visibility: hidden;
}



.narration {
	position: absolute;	
	padding: 1.3%;

    transition: opacity 0.5s; 
    -webkit-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    -o-transition: opacity 0.5s;

    -webkit-backface-visibility: hidden;
}



.ignoreInput {
	pointer-events: none;
}

.showInline {
	display: inline;
}

/* TOP MENU BAR */
#topMenu {
	position: fixed;
	width: 100%;
	height: 100%;
	transition: opacity 0.5s;
	z-index: 2500;									/* z-index: 2500 */
}

	#offMenuBar {
		width: 100%;
		height: 70%;
		position: fixed;
		bottom: 0%;
		z-index: 2500;								/* z-index: 2500 */
		background: rgba(0, 0, 0, 0.9);
	}

	#menuBar {
		width: 100%;
		height: 30%;
		position: absolute;
		top: 0%;
	}

		#menuSceneInfo {
			display: block;
			background-color: #100f0d;
			height: 70%;
			width: 100%;
			position: relative;
			top: 0%;
		}

			#menuLogo {
				position: absolute;
				text-align: right;
				width: 48%;
				height: 100%;
				left: 0px;
				float: left;
			}

				.rightAlign {
					position: absolute;
					right: 0%;
					top: 50%;
					transform: translate(0%, -50%);
				}

			#menuSceneName {
				position: absolute;
				top: 50%;
				transform: translate(0%, -50%);
				text-align: left;
				width: 48%;
				right: 0px;
				float: right;
			}

			.menu_logo_image{
				max-width: 48%;
			}

			.nav_img {
				max-width: 100%;
				max-height: 23px;
			}

			#menuPreviousScene {
				position: absolute;
				left: 0%;
				top: 50%;
				transform: translate(0%, -50%);
				width: 33.3%;
				height: 100%;
			}

			#menuSceneList {
				position: absolute;
				right: 50%;
				top: 50%;
				transform: translate(50%, -50%);
				width: 33.3%;
				height: 100%;
			}

			#menuNextScene {
				position: absolute;
				right: 0%;
				top: 50%;
				transform: translate(0%, -50%);
				width: 33.3%;
				height: 100%;
			}



@media only screen and (min-width: 1100px) {	/* pc */

body {
	font-family: Belda-NorReg, serif; 
	font-size: 18pt;
	background-size: 100% 100%;
	overflow: hidden;
}

.loudDialogue {
	font-size: 24pt;
}

.quietDialogue {
	font-size: 10pt;
}

.veryQuietDialogue {
	font-size: 6pt;
}
	
.allContainer {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
}

#timeline {
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 1100px;
		height: 600px;
}


#letterboxBorder {
    position: fixed;
    z-index: 1000;									/* z-index: 1000 */
    left: 50%;
    top: 50%;
    width: 1100px;
    height: 600px;
    box-shadow: 0 0 0 99999px rgba(0, 0, 0, 1.0);
	transform: translate(-50%, -50%);
}

#letterboxAll {
    position: fixed;
    z-index: 1000;									/* z-index: 1000 */
    left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);


	width: 1100px;
	height: 822px;
}

#letterboxTop {
	position: absolute;	
	z-index: 1001;									/* z-index: 1001 */
	top: 0px;
	left: 0px;
	width: 1100px;
}

#letterboxBottom {
	position: absolute;	
	z-index: 1001;									/* z-index: 1001 */
	bottom: 0px;
	left: 0px;
	width: 1100px;
}


	#menuSceneHeader {
		font-size: 14pt;
		display: block;
		color: #4f4c49;
	}

	#menuSceneTitle {
		font-size: 20pt;
		display: block;
		color: #74706a;
	}

	#menuLinkBar {
		font-size: 16pt;
		display: block;
		background-color: #1f1e1c;
		height: 30%;
		width: 100%;
		position: absolute;
	}

	#scene_header {
		position: absolute;
		width: 100%;
		text-align: center;
		top: 55%;
		font-size: 19pt;
		color: #8d6c3c;
	}

	#scene_name {
		position: absolute;
		width: 100%;
		text-align: center;
		top: 61%;
		font-size: 24pt;
		color: #c9a76c;
	}


	#warning_header {
		position: absolute;
		width: 100%;
		text-align: center;
		top: 55%;
		font-size: 19pt;
		color: #6d675f;
	}

	#warning_text {
		position: absolute;
		width: 100%;
		text-align: center;
		top: 63%;
		font-size: 21pt;
		color: #888077;
	}


	#endTextContainer {
		position: absolute;
		left: 50%;
		top: 44%;
		font-size: 24pt;
		transform: translate(-50%, -50%);
	}

	.socialIcon {
		width: 54px;
		height: 54px;
	}

}

@media only screen and (max-width: 1099px), screen and (max-height: 599px) {	/* mobile */

	body {
		font-family: Belda-NorReg, serif; 
		font-size: 2.8vmin;
		background-size: 100% 100%;
		overflow: hidden;
	}

	.loudDialogue {
		font-size: 3.4vmin;
	}

	.quietDialogue {
		font-size: 2.0vmin;
	}

	.veryQuietDialogue {
		font-size: 1.4vmin;
	}

	.allContainer {
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 100%;
		height: 100%;
	}

	#timeline {
			position: relative;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);

			width: 100%;
		}


	#letterboxBorder {
	    position: fixed;
	    z-index: 1000;									/* z-index: 1000 */
	    left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);

		width: 100%;
	    box-shadow: 0 0 0 99999px rgba(0, 0, 0, 1.0);
	}

	#letterboxAll {
	    position: fixed;
	    z-index: 1000;									/* z-index: 1000 */
	    left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);

		width: 100%;
	}

	#letterboxTop {
		position: absolute;	
		z-index: 1001;									/* z-index: 1001 */
		top: 0px;
	}

	#letterboxBottom {
		position: absolute;	
		z-index: 1001;									/* z-index: 1001 */
		bottom: 0px;

	}

	#menuSceneHeader {
		font-size: 3vmin;
		display: block;
		color: #4f4c49;
	}

	#menuSceneTitle {
		font-size: 5.4vmin;
		display: block;
		color: #74706a;
	}

	#menuLinkBar {
		font-size: 3vmin;
		display: block;
		background-color: #1f1e1c;
		height: 30%;
		width: 100%;
		position: absolute;
	}

	#scene_header {
		position: absolute;
		width: 100%;
		text-align: center;
		top: 55%;
		font-size: 2.8vw;
		color: #8d6c3c;
	}

	#scene_name {
		position: absolute;
		width: 100%;
		text-align: center;
		top: 61%;
		font-size: 3.8vw;
		color: #c9a76c;
		line-height: 6vw;
	}


	#warning_header {
		position: absolute;
		width: 100%;
		text-align: center;
		top: 55%;
		font-size: 2.3vmin;
		color: #423f38;
	}

	#warning_text {
		position: absolute;
		width: 100%;
		text-align: center;
		top: 61%;
		font-size: 2.6vmin;
		color: #716c66;
	}

	#endTextContainer {
		position: absolute;
		left: 50%;
		top: 50%;
		font-size: 3vmin;
		transform: translate(-50%, -50%);
	}

	.socialIcon {
		width: 4vmin;
		height: 4vmin;
	}

}