@charset "utf-8";
/* CSS Document */
/*develope*/

#home_link {
	position: absolute;
	bottom: 14px;
	left: 20px;
	text-decoration: none;
	color: #80AAFF;

}

button {
	display: none;
}
/*develope*/

body,
html {
	width: 100%;
	height: 100%;
	font-family: open_sanssemibold;
	line-height: 1.5;
	overflow: hidden;
	-ms-touch-action: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
	background-color: #CCC;
	color: #333;
	cursor: default;
}

a {
	text-decoration: none;
	color: #333;
}

img {
	max-width: 100%;
	position: absolute;
	/*pointer-events: none;*/
}

div {
	position: absolute;
}

.cf {
	zoom: 1;
}

.cf:before,
.cf:before,
.cf:after {
	content: "";
	display: table;
}

.cf:after {
	clear: both;
}

#wrapper {
	display: none;
	width: 100%;
	height: 100%;
	max-width: 845px;
	max-height: 500px;
	background-color: #BBB;
	background-image: url(../../src/images/image_background.png);
	background-size: cover;
}

.headline {
	font-family: open_sanssemibold;
	background: none;
	font-size: 155%;
	padding: 20px 0 5px 0;
	font-weight: bold;
	line-height: 1;
	width: 100%;
	height: 35px;
	background-color: #FBB900;
	text-align: center;
	-webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
	box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
}

.button {
	cursor: pointer;
	background-color: #80AAFF;
	background-repeat: no-repeat;
	background-size: contain;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
	box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
	border: 2px solid white;
	width: 36px;
	height: 36px;
	z-index: 10;
}

.close_button {
	cursor: pointer;
	background-repeat: no-repeat;
	background-size: contain;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
	box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
	border: 2px solid white;
	width: 36px;
	height: 36px;
	z-index: 10;
	top: 10px;
	right: 10px;
	background-color: #C95141;
	background-image: url("../../src/images/image_ix.png");
	z-index: 1000;
}

#floatingBarsG {
	position: relative;
	width: 62px;
	height: 77px;
	margin: 0 auto;
	top: 210px;
}
/*-----------------------------Startscreen*/

#game_start {
	display: block;
	height: 100%;
	width: 100%;
}

.game_textcloud {
	text-align: left;
	z-index: 100;
	background-color: #fff;
	border-radius: 15px;
	padding: 20px 60px 20px 30px;
	-webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
	box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
}

#game_start_textcloud {
	width: 54%;
	top: 17.5%;
	left: 5%;
}

#game_start_text {
	width: 54%;
	text-align: left;
	top: 49%;
	left: 5%;
	padding: 20px;
}

.game_textcloud_arrow {
	background-image: url("../../src/images/image_textcloud_arrow.png");
	background-size: contain;
	background-repeat: no-repeat;
	width: 9%;
	height: 20%;
	right: -9%;
	bottom: 30px;
}

#game_start_play {
	background-image: url("../../src/images/image_speaker_white.png");
	bottom: 10px;
	right: 10px;
}

#game_start_figure {
	position: absolute;
	width: 19%;
	left: 76%;
	top: 27%;
}

.game_start_continue_button {
	background-image: url("../../src/images/image_start.png");
	width: 96px;
	height: 36px;
	top: 82%;
}
/*------------------------------------main*/

#game_main {
	display: none;
	height: 100%;
	width: 100%;
}
/*---------------------------------------finish*/

#game_finish {
	display: none;
	height: 100%;
	width: 100%;
}

.close_button:hover {
	background-color: #98392C;
}

.continue {
	background-image: url("../../src/images/image_continue.png");
	height: 36px;
}
/*------------------------------portrait*/

@media screen and (orientation: portrait) {
	#wrapper {
		max-height: 964px;
		max-width: 570px;
	}
	#game_start_textcloud {
		padding: 20px 20px 0px 20px;
	}
	#game_main_info_textcloud {
		padding: 20px;
	}
	#game_start_play {
		position: relative;
		margin: 10px auto 0;
		right: auto;
	}
	#game_start_figure,
	#game_main_info_figure {
		position: absolute;
		width: 22%;
		left: 74%;
		top: 39%;
	}
	#game_start_textcloud,
	#game_main_info_textcloud {
		left: 5%;
		width: 50%;
	}
	#game_start_text {
		padding: 20px !important;
		left: 5%;
		top: 54%;
		width: 50%;
	}
	#floatingBarsG {
		top: 300px;
	}
}

@media screen and (max-width: 530px) and (orientation: portrait) {
	.button {
		background-size: cover;
		width: 26px;
		height: 26px;
	}
	.close_button {
		top: 5px;
		right: 5px;
	}
	#game_main_help {
		bottom: 10px;
		top: auto;
	}
	.button_small {
		width: 26px;
		height: 26px;
	}
}

@media screen and (max-width: 410px) and (orientation: portrait) {
	#game_start_figure,
	#game_main_info_figure {
		position: absolute;
		width: 22%;
		left: 74%;
		top: 40%;
	}
}

@media screen and (max-width: 500px) {
	#game_main_help {
		top: 85%;
		bottom: auto;
		background-size: cover;
		width: 26px;
		height: 26px;
	}
	.button_small {
		width: 26px;
		height: 26px;
	}
	.close_button {
		background-size: cover;
		width: 26px;
		height: 26px;
		top: 5px;
		right: 5px;
	}
	#game_start_play {
		background-size: cover;
		width: 26px;
		height: 26px;
	}
	.headline {
		padding: 12px 0;
		height: 17px;
	}
}

@media screen and (max-width: 650px) and (orientation: landscape) {
	#game_main_help {
		top: 85%;
		bottom: auto;
		background-size: cover;
		width: 26px;
		height: 26px;
	}
	.button_small {
		width: 26px;
		height: 26px;
	}
	.close_button {
		background-size: cover;
		width: 26px;
		height: 26px;
		top: 5px;
		right: 5px;
	}
	#game_start_play {
		background-size: cover;
		width: 26px;
		height: 26px;
	}
	#game_start_textcloud {
		padding: 20px 40px 20px 20px;
	}
	#game_main_info_textcloud {
		padding: 20px 40px;
	}
	.headline {
		padding: 12px 0;
		height: 17px;
	}
}

@media screen and (max-height: 340px) and (orientation: landscape) {
	.close_button {
		background-size: cover;
		width: 26px;
		height: 26px;
		top: 5px;
		right: 5px;
	}
	#game_main_help {
		width: 26px;
		height: 26px;
	}
	.display {
		height: 18px;
	}
	.button_small {
		width: 26px;
		height: 26px;
	}
	#game_start_textcloud {
		left: 5% !important;
		top: 19% !important;
		padding: 20px 50px 20px 20px !important;
	}
	#game_main_info_textcloud {
		padding: 20px 50px !important;
	}
	#game_start_text {
		left: 5% !important;
		top: 54%;
		padding: 20px 21px !important;
	}
	#floatingBarsG {
		top: 70px;
	}
	#game_start_play {
		background-size: cover;
		width: 26px;
		height: 26px;
	}
	.headline {
		padding: 12px 0;
		height: 17px;
	}
}

.game_start_continue_button {
	width: 96px;
	height: 36px;
}

.button_over {
	background-color: #519BFF!important;
}

.button_play {
	background-color: #FBB900!important;
}

.narrator_button_play {
	background-color: #FBB900!important;
	background-image: url(../../src/images/image_pause.png)!important;
}

.stop_button_play {
	background-color: #FBB900!important;
	background-image: url(../../src/images/image_stop.png)!important;
}