@charset "utf-8";
@font-face {
    font-family: 'MINormal';
    src: url('KarmaSuture.woff2') format('woff2'),
        url('KarmaSuture.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


body, html {
	padding:0;
	margin:0;	
	background:#000;
	overflow:hidden;
	width:100vw;
	height:100vh;
	position: fixed;
	font-family: 'MINormal', Arial, Helvetica, sans-serif;
	font-size:2vw;
	cursor: url('../images/cursors/defaultCursor.png') 16 10, crosshair;	
}
#portal-animation {
	display:none;
	width:100%;
	height:auto;
	position:absolute;
	z-index:300;	
}
img, div, span a { 
	/*
    image-rendering: optimizeSpeed;           
    image-rendering: -moz-crisp-edges;          
    image-rendering: -o-crisp-edges;          
    image-rendering: -webkit-optimize-contrast;
    image-rendering: pixelated; 
    image-rendering: optimize-contrast;         
    -ms-interpolation-mode: nearest-neighbor;   
	*/
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}

area, img, a, section, div, .game {
	/*cursor:crosshair;*/
	cursor: url('../images/cursors/defaultCursor.png') 16 10, crosshair;	
}
.game {
	width:100%;
	position:relative;
	background:#000;
	overflow:hidden;
}
.game #closeup  {
	width:100%;
	height:100%;
	background:rgba(0,0,0,1);
	position:absolute;
	z-index:150;
	display:none;
}
.game #closeup .closeup-panel {
	width:26vw;
	height:26vw;
	position:absolute;
	left:50%;
	margin-left:-13vw;
	top:8.5vw;
}
.game #closeup #closeupimages {
	width:26vw;
	position:absolute;
	left:50%;
	margin-left:-13vw;
	text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
	color:#FFF;
	text-align:center;
}
.game #closeup #closeupimage {
	top:8.5vw;
}
.game #closeup #closeupimage img {
	position:absolute;
	width:20vw;
	height:20vw;
	position:absolute;
	top:3vw;
	left:3vw;
}
.game .scene-element {
	position:absolute;
	z-index:100;
	margin-left:-1vw;
	margin-top:-1vw;
	padding:1vw;
}
.game .scene-element img {
	height:auto;
}
.game .scene-sprite {
	position:absolute;
}
.game .scene-sprite img {
	height:auto;
}
.game .scene {
	position:absolute;
	width:100%;
	display:none;
}
.game #intro {
	position:absolute;
	height:100vh;
	width:100%;
	z-index:500;
	background:#000;
}
.game #intro > img {
	position:absolute;
	height:auto;
	width:100%;
}

.game #outro {
	position:absolute;
	height:100vh;
	width:100%;
	z-index:500;
	background:#000;
	text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
	display:none;
}
.game #outro a {
	color:#FFF;
	text-decoration:none;
}
body.hasHover .game #outro a:hover {
	color:#0FF;
}
.game #outro .outro-title {
	text-align:center;
	position:absolute;
	width:70vw;
	left:50%;
	margin-left:-35vw;
	top:5vw;
	color:#FFF;
	font-size:3vw;
	z-index:600;	
}
.game #outro .outro-title span {
	color:#d766ec;	
	font-size:4vw;
}
.game #outro .animation {
	position:absolute;
	width:20vw;
	height:auto;
	top:25.5vw;
	left:50%;
	margin-left:-10vw;
}

.game #outro .outro-credits {
	text-align:center;
	position:absolute;
	width:75vw;
	left:50%;
	margin-left:-35vw;
	top:40vw;
	color:#FFF;
	z-index:600;	
}
.game #outro .outro-credits a {
	text-decoration:underline;
	color:#d766ec;
	cursor:pointer;
}
.game #outro .outro-credits span {
	color:#0FF;	
}

.game #outro > img {
	position:absolute;
	height:auto;
	width:100%;
}
.game .intro-buttons {
	line-height:5vw;
	position:absolute;
	width:15vw;
	margin-left:-7.5vw;
	left:50%;
	text-align:center;
	z-index:1;
}

.game #outro .intro-buttons {
	top:31vw;
}

.game #intro .intro-buttons {
	top:19vw;
}
.game #intro .intro-instructions {
	top:1vw;
	position:absolute;
	width:90vw;
	left:5vw;
	text-align:center;
	z-index:1;
	text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
	text-align:center;
	color:#FFF;
	display:none;
}

.game #intro .instructions-slideshow {
	top:3vw;
	position:absolute;
	background:#000;
	height:40vw;
	width:80vw;
	left:5vw;
	z-index:1;
}
.game #intro .instructions-slideshow > div {
}
.game #intro .instructions-slideshow img {
	height:40vw;
	width:80vw;
}
.game #intro .intro-instructions .settings-button-back {
	top:38vw;	
	left:50%;
	margin-left:-7.5vw;
}
.game #intro .intro-saveload {
	top:13.5vw;
	position:absolute;
	width:70vw;
	left:15vw;
	text-align:center;
	z-index:1;
	text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
	text-align:center;
	color:#FFF;
	display:none;
}
.game #intro .intro-settings {
	top:13.5vw;
	position:absolute;
	width:70vw;
	left:15vw;
	text-align:center;
	z-index:1;
	text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
	text-align:center;
	color:#FFF;
	display:none;
}
.game #intro .settings-panel {
	width:100%;
	height:auto;
	z-index:1;
}
.game #intro .settings-controls {
	z-index:2;
	width:50vw;
	position:absolute;
	left:35%;
	margin:0 0 0 -15vw;
}
.settings-credit {
	font-size:1.5vw;
	position:relative;
	top:1vw;
}
.settings-credit a {
	text-decoration:underline;
	color:#d766ec;
	cursor:pointer;
}
.game #intro .settings-controls span {
	font-size:1.5vw;
	position:relative;
	top:1vw;
}
.game #intro .settings-controls span a {
	text-decoration:underline;
	color:#d766ec;
	cursor:pointer;
}
.game #intro .settings-button-back {
	position:absolute;
	left:27vw;
	top:22.5vw;	
}
.game #intro #text-speed {
	top:3.3vw;
}
.game #intro #level {
	top:3.3vw;
	margin-left:0vw;
}
.game #intro #slots {
	top:3.3vw;
	width:60vw;
	margin:0 0 0 -19vw;
}
.game #intro #audio {
	top:12vw;
}
.game #intro .settings-label {
	width:8vw;
	display:inline-block;
	margin:1.5vw 0;
	text-align:center;
}
.game #intro .settings-button {
	min-width:4vw;
	height:4vw;
	line-height:3.8vw;
	padding:0vw 1.5vw;
}
.game #intro .slot-button {
	width:17vw;
	height:10.6vw;
	position:relative;
	top:2vw;
	font-size:1.5vw;
	line-height:4vw;
	vertical-align:top;
}
.game #intro .slot-button img {
	width:100%;
	height:auto;
	display:none;
}
.game #intro .settings-button, .game #intro .slot-button {
	display:inline-block;
	background:rgba(255,255,255,0.3);
	border-bottom:solid 1px rgba(0,0,0,0.3);
	border-right:solid 1px rgba(0,0,0,0.3);
	border-top:solid 1px rgba(255,255,255,0.7);
	border-left:solid 1px rgba(255,255,255,0.7);
	border-radius:0.2vw;
	margin:0 1vw;
}
body.hasHover .game #intro .settings-button:hover, body.hasHover .game #intro .slot-button:hover, .button-off {
	border-top:solid 1px rgba(0,0,0,0.3) !important;
	border-left:solid 1px rgba(0,0,0,0.3) !important;
	border-bottom:solid 1px rgba(255,255,255,0.7) !important;
	border-right:solid 1px rgba(255,255,255,0.7) !important;
}

.game .intro-button {
	line-height:4vw;
	display:block;
	width:15vw;
	margin: 0 auto 1vw;
	text-align:center;
	z-index:1;
	background: #512777;
	border: solid 1px #FFF;
	box-shadow: 0px 5px #000;
	color:#FFF;
	text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
	border-radius:0.5vw;
}
.game #intro-button-play {
	background:#c639e2;
}
body.hasHover .game #intro-button-play:hover {
	background:rgba(0,0,0,0.3);
}
body.hasHover .game .intro-button:hover {
	background:rgba(0,0,0,0.3);
	color:#FFF !important;
}
.game #intro #intro-button-save {
	display:none;	
}
.game #game-text {
	font-family: 'MINormal', Arial, Helvetica, sans-serif;
	color:#FFF;
	text-align:center;
	position:absolute;
	left:5vw;
	width:90vw;
	font-size:2vw;
	text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
	display:none;
	z-index:400;
	bottom:14.2vw;
}
.game .image-map {
	width:100vw;
	height:auto;
	position:absolute;
	/*top:6.25vw;*/
}
.game #panel {
	width:100vw;	
	height:17.3958vw;
	position:absolute;
	display:none;
	bottom:0;
	z-index:300;
	background:#000;
}
.game #panel .bottom-panel{
	width:100vw;
	height:auto;
	position:absolute;
	z-index:220;	
}
.game #dialogue-options {
	text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
	width:100vw;	
	height:24.5vw;
	background:#000;
	position:absolute;
	z-index:410;
	display:none;
	bottom:0;
	color:#FFF;
	border-top:solid 1px #FFF;	
}
.game #dialogue-options #dialogue-title {
	position:absolute;
	z-index:1;
	right:0;
	padding:1.4vw;
	text-align:right;
	width:24.5vw;
	color:#d766ec;
}
.game #dialogue-options a {
	display:block;
	text-align:left;
	padding:0.5vw 1.4vw;
	margin:1.2vw 0;
}
body.hasHover .game #dialogue-options a:hover {
	color:#CCC;	
}
.game #to-do-list, .game #hole {
	position:absolute;
	width:100%;
	height:100vh;	
	z-index:250;
	background:rgba(0,0,0,0.8);
	display:none;
}
.game #to-do-list > img, .game #hole > img {
	width:40vw;
	height:auto;
	position:absolute;	
	left:50%;
	margin-left:-20vw;
	top:2vw;
}
.game #to-do-list > #listText {
	width:33vw;
	height:24vw;
	left:50%;
	margin-left:-15vw;
	position:absolute;	
	top:8.8vw;
	line-height:3.3vw;
	font-size:2.2vw;
	color:#00526f;
}
.game #to-do-list > #listText .strikethrough {
	text-decoration:line-through;
}
#objects, #actions {
	position:absolute;
	z-index:220;
}
#objects {
	left:64.4vw;
	width:36vw;
	top:4vw;
	font-size: 0;
	overflow:hidden;
	height:12vw;
}
#up-arrow, #down-arrow {
	position:absolute;
	z-index:220;
	width:3vw;
	height:3vw;
	right: 37vw;
	display:none;
}
#up-arrow:hover, #down-arrow:hover {
	opacity:0.5;
}
#up-arrow {
	bottom: 9vw;
}
#down-arrow {
	bottom: 3vw;
}
#actions {
	left:1.6vw;
	top: 5.1vw;
	width:40vw;
}
#objects img {
	width:5.1vw;
	height:auto;
	margin:0.4vw 0.3vw 0.2vw;
	filter: drop-shadow(0px 0.2vw 0px rgba(0,0,0,0.5));
	color:#FFF;
	display:inline-block;
	vertical-align:top;
	position:relative;
}
body.hasHover #objects img:hover, body.hasHover #actions a:hover {
	opacity:0.4 !important;
}
#actions a {
	text-align:center;
	line-height:3.7vw;
	width:11.5vw;
	color:#FFF;
	text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
	display:inline-block;
	height:4vw;
	margin:0.5vw;
}
#top-panel {
	width:100vw;
	height:6.25vw;
	position:absolute;	
	z-index:300;
}
#top-panel .top-panel {
	width:100vw;
	height:6.25vw;
	position:absolute;	
}
#settings {
	position:absolute;
	z-index:200;
	right:1vw;
	top:1vw;
	width:3vw;
	height:3vw;	
}
body.hasHover #settings:hover {
	opacity:0.4;
}
#settings img {
	width:3vw;
	height:3vw;	
}
#skip {
	position:absolute;
	z-index:200;
	right:1vw;
	bottom:13.8vw;
	width:3.8vw;
	height:3.8vw;
	z-index:410;
	/*display:none;*/
}
body.hasHover #skip:hover {
	opacity:0.4;
}
#skip img {
	position:relative;
	width:1.8vw;
	top:1.6vw;
	left:1vw;
	height:auto;	
}
#hero {
	position:absolute;
	z-index:200;
	height:11.8vw;
	width:11.8vw;
	left:44.1vw;
	top:4.8vw;
	background:#000;
	overflow:hidden;
}
#hero img {
	width:100%;
	height:auto;
}
area{
	outline: none;
}
audio {
	display:none;
	position:absolute;
	top:0;	
}