@font-face {
    font-family: 'Myriad Pro';
    src: url('../font/MyriadPro-Regular.eot');
    src: url('../font/MyriadPro-Regular.eot?#iefix') format('embedded-opentype'),
        url('../font/MyriadPro-Regular.woff2') format('woff2'),
        url('../font/MyriadPro-Regular.woff') format('woff'),
        url('../font/MyriadPro-Regular.ttf') format('truetype'),
        url('../font/MyriadPro-Regular.svg#MyriadPro-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}


/* basic divs*/
html{
	min-height:100%;
	background-size:cover;
	overflow: hidden;
}
body {
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	min-height:100%;
	background-color:#ffffff;
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: auto;
	overflow: hidden;
	font-family: 'Myriad Pro';
	font-size: 2vw;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	color: #1E2730 !important;
}
.wrapper{
	width: 100%;
	height: 100%;
}
.wrapper img{
	width: 100%;
}
#mainwrapper {
	
}
.responsive_wrapper {
    background-size: 99.5%;
    background-position: center center;
    background-position-x: center;
    background-position-y: center;
    background-repeat: no-repeat;
    overflow: hidden;
    position: absolute;
    top: 0%;
    margin: 0 auto;
}
.noselect {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	user-drag: none; 
	-webkit-user-drag: none;
	-webkit-user-select: none;
}
textarea:focus, input:focus{
    outline: none;
}
.link{
	cursor: pointer;
}
.link:hover{
	opacity: 0.90;
}
.invisible {
	display: none !important;
}
.inactive {
	opacity: 0.50;
}

/* errors */
#error{
	width: 100%;
	min-height: 100%;
	z-index: 998;
	background-color: white;
	opacity: 0.99;
	position: absolute;
	top: 0;
	left: 0;
	cursor: pointer;
}
	#errorlogo {
		margin: 5% auto;
	}
	#errorlogo img{
		width: 50%;
	}
	#error #errormessage{
		margin: 0 auto;
		padding-top: 5%;
		font-size: 2vw;
		color: black;
		width: 50%;
		text-align: center;
		font-weight: normal;
	}
	#preloadmessage {
		top: 0; left: 0; bottom: 0; right: 0;
		background-color: #ffffff;
		z-index: 999;
		position: fixed;
	}
	#preloadmessage #preloadinner {
		margin: 0 auto;
		padding-top: 15%;
		font-size: 2vw;
		color: black;
		width: 10%;
		text-align: center;
		font-weight: normal;
	}
	#warningimage {
		width: 50%;
		position: fixed;
		top: 1%;
		left: 1%;
	}
	#warningimage img {
		width: 100%
	}
/* block screen */
#taskblocker {
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0%;
    z-index: 990;
}
#introTrigger {
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0%;
    z-index: 989;
    cursor: pointer;
}

.startTaskBlocker {
	position: absolute;
	width: 100%;
	left: 0%;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 991;
	cursor: pointer;
}
.startTaskBlocker img {
    margin-top: 10%;
}

/* result flags */
.results_container {
	display: none;
}
/* preload div */
#preload_area {
	display: none;
}

/* alphas */
.alpha80{
	opacity: 0.8;
}
.alpha60{
	opacity: 0.6;
}
.alpha40{
	opacity: 0.4;
}
.alpha20{
	opacity: 0.2;
}
.alpha01{
	opacity: 0.01;
}
.alpha00{
	opacity: 0;
}
.alpha100{
	opacity: 1.0;
}


/* standard animation */
@keyframes standard_sprite_animation {
	0% { background-position: 0% 0%; }
	100% { background-position: 0% 100%; }
}


/* menu elements */
#menu {
position: absolute;
width: 100%;
top: 0%;
left: 0;
z-index: 810;
height: 12%;
}
#menu #top_bubble {
width: 10%;
cursor: pointer;
position: absolute;
top: 0%;
left: 0%;
}

#menu .menu_task {
width: 90%;	
text-align: left;
padding: 0 0 0 2%;
vertical-align: middle;
line-height: 1;
height: 100%;
}
#menu .menu_task .rect_orange {
	background-image: url(../img/common/menu/rectangle.png);
	width: 13%;
	float: left;
	margin: 0;
	padding: 0 0 0 0%;
	background-repeat: no-repeat;
	background-size: contain;
	text-align: center;
}
#menu .menu_finger {
	width: 4%;
	padding: 0 0% 2% 0;
}
.menu_sound {
	width: 5%;
	position: absolute;
	top: 7%;
	left: 95%;
	z-index: 901;
}
.menu_sound #menu_sound {
	background-image: url(../img/common/menu/sound_sprite.png);
	background-repeat: no-repeat;
	background-size: 200%;
	cursor: pointer;
}
.menu_sound #menu_sound.on {
	background-position: 0%;
}
.menu_sound #menu_sound.off {
	background-position: 100%;
}

#menu_line {
	position: absolute;
	width: 100%;
	top: 9%;
	left: 0;
	z-index: 800;
}
	



/* table divs */
.table_container {
	display: table;
}
.table_row {
	display: table-row;
}
.table_cell {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}
.align-right {
	text-align: right;
}
.align-left {
	text-align: left;
}
.align-center {
	text-align: left;
}

	.playsound {
		width: 6%;
	    top: 0%;
	    position: absolute;
	    left: 12%;
	    cursor: pointer;
	    z-index: 2;
	}
	.playsound.animated {
		animation: playsound 2s infinite;
	}
	@keyframes playsound {
	    0%   { opacity: 1.00; }
	    50%  { opacity: 0.20; }
	    100% { opacity: 1.00; }
	}
.draggable {
	cursor: pointer;
}


#taskcomplete_container {
	width: 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 999;
}
#taskcomplete_container img {
	margin-top: 10%;
}

#tasksolvedwrong_container {
	width: 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 999;
}
#tasksolvedwrong_container img {
	margin-top: 10%;
}


.full_screen_div {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: 1;
}


/* Mission screen */
#mission_screen {
	background-image: url(../img/mission/background.png);
	background-repeat: no-repeat;
	background-size: contain;
}
#mission_lamp {
	position: absolute;
	width: 18%;
	top: 1%;
	left: 0%;
}
#mission_picture {
position: absolute;
width: 28%;
top: 61%;
left: 72%;
z-index: 20;
}
#mission_text {
position: absolute;
top: 30%;
left: 17%;
width: 65%;
list-style: none;
}
#mission_text li {
margin-bottom: 6%;
}

#mission_button_start {
	position: absolute;
	top: 84%;
	left: 37%;
	width: 26%;
	cursor: pointer;
}
#mission_text {
position: absolute;
top: 21%;
left: 17%;
width: 65%;
list-style: none;
}
#mission_text li {
margin-bottom: 6%;
}

#mission_button_start {
	position: absolute;
	top: 84%;
	left: 37%;
	width: 26%;
	cursor: pointer;
}

/*#mission_sound {
position: absolute;
top: 0%;
left: 90%;
width: 9%;
cursor: pointer;
z-index: 20;
background-size: 200%;
background-repeat: no-repeat;
background-image: url(../img/mission/sound.png);
background-position: 0%;
}
#mission_sound.playing { background-position: 100%; }

#sound_bubble {
	position: absolute;
	top: 2%;
	left: 66%;
	width: 25%;
	z-index: 19;
	color:
	#04b9ea;
	animation: sound_bubble_animation 3s infinite;
}
@keyframes sound_bubble_animation {
	0% { opacity: 0.0 }
  	25% { opacity: 1.0 }
  	75% { opacity: 1.0 }
  	100% { opacity: 0.0 }
}*/

.info_plate {
	position: absolute;
	top: 13%;
	bottom: 0%;
	left: 1%;
	width: 98%;
	z-index: 998;
	background-size: 100%;
	background-repeat: no-repeat;
	background-image: url(../img/common/menu/info_plate.png);
}

.info_plate_content {
	position: absolute;
	top: 12%;
	width: 87%;
	left: 7%;
}
.info_plate_content p {
    width: 90%;
    margin-left: 0;
    margin-top: 3%;
    text-align: left;
}
.info_plate_close {
	cursor: pointer;
	position: absolute;
	top: 7%;
	width: 3%;
	left: 97.9%;
	z-index: 999;
}

.bubble {
	position: absolute;
	width: 100%;
	top: 0%;
	left: 0%;
	z-index: 600;
}

#background {
	position: absolute;
	width: 100%;
	top: 0%;
	left: 0%;
	z-index: 1;
}

#restart_game {
	position: absolute;
	width: 4%;
	top: 2.5%;
	left: 95%;
	z-index: 999;
	cursor: pointer;
}
.menu_text.reset_font {
	padding-right: 6%;
}