#mission_text {
    top: 32%;
}

#start_plate .question_block {
    top: 51%;
}


#joystick_back {
    position: absolute;
    width: 15%;
    top: 77%;
    left: 44.5%;
    z-index: 10;
}
#joystick_center {
    position: absolute;
    width: 5%;
    top: 84.5%;
    left: 49.5%;
    z-index: 11;
    cursor: pointer;
}
.controlls {
    position: absolute;
    width: 5%;
    z-index: 11;
    cursor: pointer;
}
#joystick_left {
    top: 84%;
    left: 44.4%;
}
#joystick_right {
	top: 84%;
    left: 54.4%;
}
#joystick_up {
    top: 77%;
    left: 49.5%;
}
#joystick_down {
    top: 91.5%;
    left: 49.5%;
}

.frog {
    position: absolute;
    width: 13%;
    left: 50%;
    top: 55%;
    z-index: 5;
}

.fly {
	position: absolute;
	width: 10%;
	z-index: 10;
	animation-name: fly_animation;
	animation-duration: 0.5s; 
	animation-iteration-count: infinite;
}
@keyframes fly_animation {
	0% { transform: rotate(0deg); }
	40% { transform: rotate(2deg); }
	60% { transform: rotate(0deg); }
	80% { transform: rotate(-2deg); }
}


#target {
    position: absolute;
    width: 10%;
    z-index: 15;
}

.col0 { left: 15%; }
.col1 { left: 25%; }
.col2 { left: 35%; }
.col3 { left: 45%; }
.col4 { left: 55%; }
.col5 { left: 65%; }
.col6 { left: 75%; }

.row0 { top: 20%; }
.row1 { top: 30%; }
.row2 { top: 40%; }
.row3 { top: 50%; }


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

.stage .question_block {
    position: absolute;
    width: 64%;
    z-index: 101;
    top: 39%;
    bottom: 18%;
    left: 18%;
    color: white;
    text-align: center;
    display: block;
}

.stage .question_block p {
	margin: 2%;
}

.question_block .buttons {
	width: 18%;
}

.question_block .buttons .button {
	background-image: url(../img/buttons.png);
	background-size: 300%;
    padding: 5%;
    width: 70%;
    margin-left: 15%;
}
.question_block .buttons .button.neutral {
	background-position: 0%;
	cursor: pointer;
}
.question_block .buttons .button.wrong {
	background-position: 50%;
}
.question_block .buttons .button.correct {
	background-position: 100%;
}


.stage .question_block .question_line {
    display: flex;
    padding: 0% 3%;
    width: 50%;
    margin-left: 25%;
}
.stage .question_block .buttons {
    width: 20%;
}
.stage .question_block .text {
    width: 80%;
    margin: auto;
}

.frog_bubble {
    position: absolute;
    width: 28%;
    top: 20%;
    left: 32%;
    z-index: 30;
}
.result_block p {
    position: absolute;
    width: 23%;
    top: 28%;
    left: 34%;
    z-index: 32;
    text-align: center;
}

.nowrap {
    white-space: nowrap;
}

.stage1 .question_block .question_line {
    margin-left: 38%;
}