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

#game_start {
	display: block;
}

#game_start_2 {
	display: none;
}

#game_main {
	display: none;
}

#game_finish {
	display: none;
}
/*-----------------------------------------start*/

#game_start_textcloud {
	width: 54%;
	top: 22%;
	left: 8%;
}

#game_start_text {
	width: 54%;
	text-align: left;
	top: 52%;
	left: 8%;
	padding: 20px 30px;
}

#game_start_button {
	top: 86%
}
/*-----------------------------------------start_2*/

#game_start_2 {
	height: 100%;
	width: 100%;
}

#game_start_2_picture_left {
	height: 92%;
	padding: 1% 1.3%;
	width: 64.4%;
	left: 0%;
}

#game_start_2_text {
	width: 24%;
	top: 11%;
	left: 73%;
}

#game_start_2_button {
	top: 86%
}
/*------------------------------------main*/

.pic img {
	position: relative;
	display: inline-block;
}

#game_main_pictures {
	background-color: none;
	width: 100%;
	height: 100%;
}

#game_main_pictures_warpper {
	background-color: none;
}

#game_main_picture_left {
	height: 92%;
	padding: 1% 0% 1% 1%;
	width: 67%;
	left: 0%;
}

#game_main_picture_left img {
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
}

.game_m_f_picture {
	width: 100%;
	height: 100%;
}

.game_m_f_picture_left {
	width: 100%;
	height: 100%;
}

.game_m_f_picture_right {
	width: 96%;
	height: 100%;
}

#game_main_picture_right {
	height: 92%;
	width: 29%;
	left: 71%;
	padding: 1% 0%;
}

.pic {
	position: relative;
	top: 0px;
	left: 0px;
	pointer-events: none;
}

.svg {
	height: 92%;
	left: 0px;
	position: absolute;
	top: 0px;
	width: 92%;
}

.svg svg {
	height: 98%;
	left: 5%;
	position: absolute;
	top: 6%;
	width: 100%;
}

.puzzle_inner {
	fill: #ffffff;
	fill-opacity: 0;
	cursor: pointer;
	/*	stroke: #FFFFFF;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-miterlimit: 10;*/
	
	pointer-events: auto;
}

.puzzle_outer {
	fill: #ffffff;
	fill-opacity: 0;
	/*stroke: #FFFFFF;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-miterlimit: 10;*/
	
	pointer-events: none;
}

.puzzle {
	position: absolute;
	width: 20%;
	z-index: 1;
	pointer-events: none;
}

#puzzle_1 {
	width: 19.926%!important;
	top: 0%;
	left: 0%;
}

#puzzle_2 {
	width: 17.219%!important;
	top: 0%;
	left: 13.4%;
}

#puzzle_3 {
	width: 23.392%!important;
	top: 0%;
	left: 24.15%;
}

#puzzle_4 {
	width: 15.595%!important;
	top: 0%;
	left: 40.95%;
}

#puzzle_5 {
	width: 19.818%!important;
	top: 0%;
	left: 50%;
}

#puzzle_6 {
	width: 17.002%!important;
	top: 26.39%;
	left: 0%;
}

#puzzle_7 {
	width: 22.634%!important;
	top: 34.6%;
	left: 10.8%;
}

#puzzle_8 {
	width: 17.652%!important;
	top: 27.39%;
	left: 27.29%;
}

#puzzle_9 {
	width: 21.16%!important;
	top: 33.9%;
	left: 38.2%;
}

#puzzle_10 {
	width: 16.677%!important;
	top: 27.44%;
	left: 53.2%;
}

#puzzle_11 {
	width: 19.7%!important;
	top: 64.7%;
	left: 0%;
}

#puzzle_12 {
	width: 16.4%!important;
	top: 58.65%;
	left: 13.65%;
}

#puzzle_13 {
	width: 22.7%!important;
	top: 65.9%;
	left: 24.3%;
}

#puzzle_14 {
	width: 14.836%!important;
	top: 61.4%;
	left: 41.25%;
}

#puzzle_15 {
	width: 19.5%!important;
	top: 64.7%;
	left: 50.4%;
}

#game_main_display {
	width: 50%;
	left: 25%;
	height: 32px;
	top: 86%;
	bottom: auto;
}

.display {
	background-color: #80AAFF;
	-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);
	z-index: 10;
	color: #FFF;
	text-align: center;
	padding-top: 1%;
	height: 100%;
	top: 0%;
}

#game_main_time_display {
	left: 0%;
	width: 42%;
}

#game_main_try_display {
	right: 0%;
	width: 42%;
}

#game_main_help {
	top: 86%;
	right: 10px;
	background-image: url("../../src/images/image_help.png");
}
/*--finish--*/

#game_finish_pictures {
	background-color: none;
}

#game_finish_picture_left {
	height: 91.5%;
	padding: 1% 1.3%;
	width: 64.2%;
	left: 0%;
}

#game_finish_picture_right {
	height: 89%;
	width: 29.5%;
	left: 69.9%;
	padding: 1.3% 0%;
}

#game_finish_text {
	top: 11%;
	left: 10%;
}

#game_finish_display {
	width: 45%;
	left: 13%;
	height: 29px;
	top: 86%;
	bottom: auto;
}

#game_finish_time_display {
	left: 0%;
	height: 80%;
	width: 100%;
	top: 19%;
}

.game_finish_restart_button {
	background-image: url("../../src/images/image_restart.png");
	width: 96px;
	height: 36px;
	top: 86%;
	left: 78%;
}
/*----------------blende*/

#orientation_blende {
	display: none;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	/*background-color: #333;*/
}

@media screen and (orientation: portrait) {
	#game_start,
	#game_start_2,
	#game_main,
	#game_finish {
		display: none !important;
	}
	#orientation_blende {
		display: block
	}
	#blende_textcloud {
		width: 37%;
		top: 24%;
		left: 16%;
	}
	#blende_figure {
		width: 29%;
		left: 60%;
		top: 41%;
	}
}

@media screen and (max-width: 500px) {
	#game_main_save_button,
	#game_main_narrator_button {
		width: 26px;
		height: 26px;
	}
}

@media screen and (max-width: 714px) and (orientation: landscape) {
	#game_main_save_button,
	#game_main_narrator_button {
		width: 26px;
		height: 26px;
	}
	#game_main_display {
		width: 320px;
	}
}

@media screen and (max-height: 450px) and (orientation: landscape) {
	#game_start_textcloud {
		top: 21% !important;
		padding: 20px 50px 20px 20px !important;
	}
	#game_start_text {
		top: 55%;
	}
	#game_main_save_button,
	#game_main_narrator_button {
		width: 26px;
		height: 26px;
	}
	#game_main_display {
		width: 240px;
		height: 18px;
	}
	#game_main_help {
		top: 85%;
		bottom: auto;
		background-size: cover;
		width: 26px;
		height: 26px;
	}
}

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