body {

	background: black;

}

#stage {
	position: relative;
	margin: auto;
	width: 1200px;
	height: 700px;
	top: 20px;
	border: 8px solid black;
	background-size: cover;
	background-color: black;
	overflow: hidden;
	z-index: 0;
	box-shadow: 1px 0px 70px 2px #242433, -1px 0px 70px 2px #242433;
}

#base {
	position: relative;
}

#inventory {
	width: 100%;
	height:220px;
	top: 700px;
	z-index: 2;
	background-color: black;
}

#background {
	z-index: 0;
	display: none;
}

#player {
	z-index: 999;
	position: absolute;
	display: none;
	top: 50px;
	left: 650px;
	width: 5%;
}

#tunnel {
	z-index: 2;
	display: none;
	top: 0;
	left: 0;
}

#milton {

	position: absolute;
	z-index: 2;
	display: none;
}

#basal {

	position: absolute;
	z-index: 2;
	display: none;
}

#connie {

	position: absolute;
	z-index: 2;
	display: none;
}

#bloody {

	position: absolute;
	z-index: 2;
	display: none;
}

#bloodyPortrait {

	position: absolute;
	z-index: 2;
	display: none;
}

#patient {

	position: absolute;
	height: 90%;
	bottom: 0;
	left: 100px;
	z-index: 2;
	display: none;
}

#doctor {
	position: absolute;
	height: 72%;
	bottom: 0;
	left: 10px;
	z-index: 2;
	display: none;
}

/*FACES*/

#kidneyFace1 {

	position: absolute;
	width:62%;
	top: 150px;
	left: 230px;
	z-index: 2;
	display: none;
}

#kidneyFace2 {

	position: absolute;
	width: 60%;
	top: 170px;
	left: 230px;
	z-index: 2;
	display: none;
}

#kidneyFace3 {

	position: absolute;
	width: 62%;
	top: 170px;
	left: 230px;
	z-index: 2;
	display: none;
}

#intestineface {

	position: absolute;
	width: 10%;
	top: 12px;
	left: 480px;
	z-index: 5;
	
}

#lungFace {

	position: absolute;
	width: 10%;
	top: 450px;
	left: 540px;
	z-index: 5;
}

#stomachFace {
	position: absolute;
	z-index: 0;
		display: none;
	
}

#instructions {
	top: 700px;
	left: 0;
	position: absolute;
	z-index: 2;
	display: none;
}

#stomachInstructions {
	bottom: 0;
	left: 0;
	position: absolute;
	z-index: 2;
	display: none;
}

#mapIcon {
	display: none;
	position: absolute;
	z-index: 2;
	top: 10px;
	left: -100px;
	width: 9%;
}

#stomachBackground {

	z-index: 2;
	top: 0;
	left: 0;

}
#stomachContainer {
	position: absolute;
	top: 0;
	left: 0;
	width: 1200px;
	height: 700px;
	overflow: hidden;
}


#gameTimer {
	position: absolute;
	width: 0px;
	height: 30px;
	background-color: #ffd000;
	top: 0;
	left: 0;
	z-index: 3;
}

#gameTimerContainer {
	position: absolute;
	width: 500px;
	height: 30px;
	border: 2px solid black;
	top: 10px;
	right: 350px;
	z-index: 3;
	display: none;
}

#output {
	position: absolute;
	top: 10px;
	left: 10px;
	margin: 0;
}



#bile {

	position: absolute;
	z-index: 3;
	top: 0px;
}

#apple {

	position: absolute;
	top: 65px;
	right: 227px;
	width: 6%;
	z-index: 5;
}

#bone {
	position: absolute;
	right: 157px;
	top: 276px;
	width: 6%;
}

#blankMap {

	position: absolute;
	height: 97%;
	bottom: 0;
	right: 100px;
	z-index: 2;
	display: none;
}

#map {

	position: absolute;
	height: 97%;
	bottom: 0;
	right: 100px;
	z-index: 3;
	display: none;
}

#node1 {
	z-index: 2;
	position: absolute;
	left: 0;
	top:30px;
	display: none;
	
}
#node2 {
	z-index: 2;
	position: absolute;
	right: 5px;
	top:270px;
	display: none;
	
}
#fireLocation {
	z-index: 2;
	position: absolute;
	display: none;
	top: 350px;
	left: 500px;
}
#fire{
	z-index: 2;
	position: absolute;
	display: none;
	bottom :0px;
	left: 530px;
	size: 50%;
}
#log1Location {
	z-index: 2;
	position: absolute;
	display: none;
	top: 430px;
	left: 280px;
}
#log1 {
	z-index: 2;
	position: absolute;
	display: none;
	bottom: 0px;
	left: 720px;
	size: 50%;
}
#log2Location {
	z-index: 2;
	position: absolute;
	display: none;
	top: 420px;
	left: 700px;
}
#log2 {
	z-index: 2;
	position: absolute;
	display: none;
	bottom: 0px;
	left: 0px;
	size: 50%;
}
#tent1Location {
	z-index: 2;
	position: absolute;
	display: none;
	top: 220px;
	left: 260px;
}
#tent1{
	z-index: 2;
	position: absolute;
	display: none;
	bottom: 0px;
	right: 0px;
	size: 50%;
}
#tent2Location {
	z-index: 2;
	position: absolute;
	display: none;
	top: 220px;
	left: 660px;

}
#tent2 {
	z-index: 2;
	position: absolute;
	display: none;
	bottom: 0px;
	left: 170px;
	size: 50%;
}

#lungs {
	z-index: 4;
	position: absolute;
	opacity: 0;
	top: 120px;
	right: 240px;
	height: 15%;
	cursor: pointer;

	
}

#kidneys {
	z-index: 4;
	position: absolute;
	opacity: 0;
	top: 245px;
	right: 260px;
	height: 8.6%;
	cursor: pointer;
	
}

#intestine {
	z-index: 4;
	position: absolute;
	opacity: 0;
	top: 300px;
	right: 275px;
	height: 14.5%;
	cursor: pointer;
	
}

#stomach {
	z-index: 4;
	position: absolute;
	opacity: 0;
	top: 197px;
	right: 275px;
	height: 9.5%;
	cursor: pointer;
	
}

#breath{
	position: absolute;
	z-index: 4;
	top: 0;
	left: 0;
}

#arrow1 {
	position: absolute;
	z-index: 5;
	width: 6%;
	top: 600px;
	left: 450px;
	opacity: 0;
}
#arrow2 {
	position: absolute;
	z-index: 5;
	width: 6%;
	top: 430px;
	left: 460px;
	opacity: 0;
}
#arrow3 {
	position: absolute;
	z-index: 5;
	width: 6%;
	top: 380px;
	left: 700px;
	opacity: 0;
}
#arrow4 {
	position: absolute;
	z-index: 5;
	width: 6%;
	top: 250px;
	left: 780px;
	opacity: 0;
}
#arrow5 {
	position: absolute;
	z-index: 5;
	width: 6%;
	top: 150px;
	left: 880px;
	opacity: 0;
}
#marker1 {
	position: absolute;
	z-index: 10;
	height: 10%;
	top: 600px;
	left: 480px;
	opacity: 0;

}
#marker2 {
	position: absolute;
	z-index: 10;
	height: 10%;
	top: 420px;
	left: 500px;
	opacity: 0;

}
#marker3 {
	position: absolute;
	z-index: 10;
	height: 10%;
	top: 380px;
	left: 730px;
	opacity: 0;

}
#marker4 {
	position: absolute;
	z-index: 10;
	height: 10%;
	top: 250px;
	left: 820px;
	opacity: 0;

}
#marker5 {
	position: absolute;
	z-index: 10;
	height: 10%;
	top: 150px;
	left: 910px;
	opacity: 0;
	
}

#black {
	position: absolute;
	z-index: 998;

}
#dark {
	position: absolute;
	z-index: 999;

}

#heartbeat {
	position: absolute;
	opacity: 0;
	z-index: 5;

}

#flatline {
	position: absolute;
	opacity: 0;
	z-index: 5;
	
}

#button {
	position: absolute;
	bottom: 5%;
	right: 5%;
	width: 140px;
	font-size: 24px;
	cursor: pointer;
	z-index: 5;
	display: none;
	background-color: #ffaa00;
	border-radius: 4px;
    border: none;
    color: black;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    border: 3px solid black;
    transition: all 0.5s;
    opacity: 0.5;
}

#button:hover{
	opacity: 1;

}

#button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

#button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

#button:hover span {
  padding-right: 25px;
}

#button:hover span:after {
  opacity: 1;
  right: 0;
}

.introButton {

	display: absolute;
	width: 330px;
	height: 200px;
	font-family: marlboro;
	font-size: 30px;
	cursor: pointer;
	z-index: 5;
	background-color: #373737;
	border-radius: 4px;
    color: white;
    height: 60px;
    text-align: center;
    text-decoration: none;
    border: 3px solid black;
    transition: all 0.5s;
    opacity: 0.5;

}

.introButton:hover{
	font-size: 32px;
	opacity: 1;
	background-color: #ffbf00;
	color: black;
}

#intros {

	z-index: 2;
	position: absolute;
	bottom: 50px;
	width: 1000px;
	margin-left: 100px;
	margin-right: 100px;
	
}

#wKey {
	position: absolute;
	display: none;
	top: 715px;
	width: 10%;
	left: 100px;
}
#aKey {
	position: absolute;
	display: none;
	top: 715px;
	width: 10%;
	left: 400px;
}
#sKey {
	position: absolute;
	display: none;
	top: 715px;
	width: 10%;
	left: 700px;
}
#dKey {
	position: absolute;
	display: none;
	top: 715px;
	width: 10%;
	left: 1000px;
}

#title{

	display: none;
	color: red;
	text-align: center;
	margin-top: 25%;
	font-family: marlboro, Arial, Verdana;
	font-size: 96px;

}

#credits {

	display: none;
	color: red;
	text-align: center;
	margin-top: 6%;
	font-family: marlboro, Arial, Verdana;
	font-size: 124px;

}

#creditContents {
	display: none;
	color: white;
	top: 20%;
	text-align: center;
	font-family: Roboto Condensed, Arial, Verdana;
	font-size: 24px;
}

.duelText{
	font-family: marlboro;
	position: absolute;
	font-size: 96px;
	z-index: 3;
	color: white;
	width: 100%;
	text-align: center;
	opacity: 0;
	top: 150px;
}

#introducing {
	position: absolute;
	color: white;
	z-index: 6;
	font-family: marlboro, Arial, Verdana;
	font-size: 96px;
	text-align: center;
	top: 150px;
	width: 100%;
}

#names {
	
	position: absolute;
	font-family: marlboro, Arial, Verdana;
	font-size: 124px;
	margin-left: 10px;
	top: -230px;
	color: white;
	z-index: 3;
	text-align: center;
	display: block;
	width: 100%;
	
}

#text {
	font-size: 22px;
	font-family: Roboto Condensed, Arial, Verdana;
	margin-left: 10px;
	margin-right: 5px;
	margin-top: -10px;
}

.speech-bubble { 

	position: absolute;
 	background: rgba(255,255,255,0.9);
 	border-radius: 36px; 
 	padding-left: 10px;
 	padding-top: 10px;
	visibility: hidden;
	width: 30%;
	z-index: 3;
	
}

.speech-bubble:after {

	content: '';
	position: absolute;
	bottom: 0;
	right: 30%;
	width: 0; 
	height: 0; 
	border: 40px solid transparent; 
	border-top-color: rgba(255,255,255,0.9);
	border-bottom: 0; 
	border-right: 0; 
	margin-right: -10px; 
	margin-bottom: -40px; 

}

.speech-bubble.left:after {

	content: '';
	position: absolute;
	bottom: 0;
	left: 30%;
	width: 0; 
	height: 0; 
	border: 40px solid transparent; 
	border-top-color: rgba(255,255,255,0.9);
	border-bottom: 0; 
	border-left: 0; 
	margin-left: -10px; 
	margin-bottom: -40px; 

}

.speech-bubble.top:after {

	content: '';
	position: absolute;
	top: 0;
	left: 30%;
	width: 0; 
	height: 0; 
	border: 40px solid transparent; 
	border-bottom-color: rgba(255,255,255,0.9);
	border-top: 0; 
	border-right: 0; 
	margin-left: -10px; 
	margin-top: -40px; 

}

@font-face {
	font-family: marlboro;
	src: url(marlboro.ttf);
}