@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;
}

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

/* drag and drop */
.ui-draggable-dragging {
	opacity: 0.5;
	z-index: 999;
}
.dragg_over {
	opacity: 1.0 !important;
}
.dragAbs {
	position: absolute !important;

}

/* 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;
}

.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: 11%;
}

#menu .menu_task {
	width: 75.5%;
	text-align: left;
	padding: 0%;
	vertical-align: middle;
	line-height: 1;
	height: 100%;
	padding-left: 2%;
}
#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% 1% 0;
}
.menu_sound {
	width: 5%;
	position: absolute;
	top: 12%;
	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: 14%;
    left: 0%;
    z-index: 800;
}
	
#menu #robot_top {
    background-image: url(../img/common/menu/robot_top.png);
    background-size: 300%;
    z-index: 10;
    width: 12.5%;
    cursor: pointer;
} 

#menu #robot_top.animated {
	 animation-name: mission_robot_animation;
	 animation-duration: 2s; 
	 animation-iteration-count: infinite;
	 animation-timing-function: steps(2);
}

#menu #robot_top.phase1 {
	background-position: 0%;
}
#menu #robot_top.phase2 {
	background-position: 100%;
}


/* 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_text {
    position: absolute;
    top: 12%;
    left: 10%;
    width: 65%;
    list-style: none;
}
#mission_text li {
	margin-bottom: 6%;
}

#mission_button_start {
    position: absolute;
    top: 82%;
    left: 27%;
    width: 28%;
    cursor: pointer;
    z-index: 20;
}

#mission_robot {
    background-image: url(../img/mission/robot.png);
    background-repeat: no-repeat;
    background-size: 300%;
    position: absolute;
    width: 39%;
    top: 40%;
    z-index: 19;
    background-position: 0%;
}
#mission_robot.phase1 {
	right: -42%;
}
#mission_robot.phase2 {
	right: -2%;
}
#mission_robot.animated {
	 animation-name: mission_robot_animation;
	 animation-duration: 4s; 
	 animation-iteration-count: infinite;
	 animation-timing-function: steps(2);
}

@keyframes mission_robot_animation {
	0% { background-position: 0%; }
	100% { background-position: 100%; }
}

@keyframes sound_bubble_animation {
	0% { opacity: 0.0 }
  	25% { opacity: 1.0 }
  	75% { opacity: 1.0 }
  	100% { opacity: 0.0 }
}

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

#mission_text li img {
	width: 4%;
}

.background_element {
	position: absolute;
	z-index: 2;
}


/* result plates */
#robot {
    position: absolute;
    width: 44%;
    top: 31%;
    z-index: 500;
}
#robot.phase1 {
	left: 101%;
}
#robot.phase2 {
	left: 1%;
}

.result_block .result_plate {
    position: absolute;
    width: 80%;
    top: 7%;
    left: 10%;
    z-index: 502;
    text-align: center;
}
.result_block .result_icon {
	position: absolute;
    width: 8%;
    top: 36%;
    left: 46%;
    z-index: 503;
}
.result_block .result_text {
	position: absolute;
    width: 50%;
    top: 54%;
    left: 25%;
    z-index: 503;
    text-align: center;
}
.result_block .result_text p {
	margin-bottom: 3%;
	color: #fff;
}
/* result plates */			


#start_plate .question_plate {
    position: absolute;
    width: 80%;
    z-index: 100;
    top: 10%;
    left: 10%;
}

#start_plate .question_block {
    position: absolute;
    width: 64%;
    z-index: 101;
    top: 45%;
    left: 18%;
    color: white;
    text-align: center;
}
#start_plate .question_block p {
	margin-bottom: 1%;
}

#start_game {
	cursor: pointer;
	width: 10%;
    margin: 0 auto;
    padding-top: 3%;
}


.stage .question_plate, #question_plate.question_plate {
	position: absolute;
    width: 34%;
    z-index: 100;
    top: 18%;
    left: 66%;
}

.stage .question_block {
	text-align: center;
    position: absolute;
    width: 34%;
    z-index: 101;
    top: 18%;
    bottom: 0;
    left: 66%;
    color: white;
    display: flex;
}

.stage .question_block .text {
	text-align: left;
	padding: 0 5%;
}

.stage .question_block .question_wrapper {
	padding: 1%;
	margin: auto;
	width: 100%;
}

.stage .question_block .question_line {
	padding: 3% 3%;
}

.stage .question_block .buttons {
	width: 18%;
}
.sentence .table_container {
	width: 100%;
}


.start_plate .question_plate {
	z-index: 800 !important;
}
.start_plate .question_block {
	z-index: 801 !important;
}
.start_game {
	z-index: 802 !important;	
}

#restart_game {
    position: absolute;
    width: 4%;
    top: 13.5%;
    left: 89.5%;
    z-index: 999;
    cursor: pointer;
}