body#storyBody {
	text-align: center;
	background-color: #ffde59;/*yellow*/
}

.pointer-event-none {
	pointer-events: none !important;
}
.pointer-event-yes {
	pointer-events: auto !important;
}

div.landing-section {
	padding: 0 !important;
	max-width: 100vw;
	text-align: center;
	margin: 46px auto 0;
	background-color: #2d3238 !important;
}

.landing-page-img-1,
.landing-page-img {
	margin:0;
	/*background-color: #ffc200;*//*#2a423e;/*gif1*/
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

/*new: young-bio.html*/
div.land-bg-pink1 {
    background-color: lightpink;
}
div.land-bg-pink2 {
    background-color: pink;
}
div.land-bg-brown1 {
    background-color: peachpuff !important;
}
div.land-bg-green1 { /*nouse*/
    background-color: teal;
}
div.land-bg-green2 {
    background-color: yellowgreen;
}
/*new: young-bio.html E*/

div.land-bg-grey1 {
    background-color: #3c4e63;
}
div.land-bg-grey2 {
    background-color: #7297b8;
}
div.land-bg-grey3 {
    background-color: #1a1a1a;
}
div.land-bg-grey4 {
    background-color: #1B3C4E;
}

div.land-bg-yellow1 {
    background-color: #d1db14;
}

div.land-bg-red1 {
    background-color: #df4949 !important;
}

div.land-bg-orange1 {
    background-color: #ffc200;
}
div.land-bg-orange2 {
    background-color: #edaa0e;
}
div.land-bg-orange3 {
    background-color: khaki;
}

div.land-bg-purple1 {
    background-color: #f788f5;
}

div.land-bg-blue1 {
    background-color: #6ff2f0;
}
div.land-bg-blue2 {
    background-color: #dff7f7;
}
div.land-bg-blue3 {
    background-color: #83d6f7;
}
div.land-bg-blue4 {
    background-color: steelblue;
}

.landing-page-img-1 img,
.landing-page-img img {
	/*width: 40%;*/
	max-width: 100vw;
	max-height: 78vh;/*78vh*/
	padding: 0;
	/*fr bootstrap.min.css: for remove img btm tiny gap*/
	vertical-align:middle;
	page-break-inside:avoid;
	border-style:none;
	/*fr bootstrap.min.css:...*/
}

.scroll-down-div {
	text-align: center;
}
.scroll-down-div img {
    animation: scrollanimate 150ms ease-out;
    width: 7rem;
}

@keyframes scrollanimate {
  0%{transform: scale(0)}
  100%{transform: scale(1)}
}

@media (max-width: 912px){
	.scroll-down-div img {
	    width: 22vw;
	}
}
@media (max-width: 508px){/*508px 768px*/
	/*.landing-page-img-1 img,
	.landing-page-img img {
		width: 100%;
	}*/
	.scroll-down-div img {
	    width: 6.5rem;
	}
}

/*for landing-page.html - reveal img slide up*/
.reveal {
	position: relative;
	transform: translateY(250px);
	opacity: 0;
	transition: all .2s ease;
}
@media (max-width: 768px){
	.reveal {
		transform: translateY(120px);
	}
}
@media (max-width: 568px){
	.reveal {
		transform: translateY(90px);
	}
}

.reveal.active {
	transform: translateY(0px);
	opacity: 1;
}

/*display timer, quantity etc*/
img#hurryImg {
	position: absolute;
	top: -7rem;
	left: 1.8rem;
	width: 8rem;
	animation: scaler 150ms ease-out;
}
img#timePauseImg {
	position: absolute;
	top: -7.6rem;
	left: -2.9rem;
	width: 8rem;
	animation: scaler 150ms ease-out;
}
img#livesDeductedImg {
	position: absolute;
	top: -7.3rem;
	right: 1rem;
	width: 8rem;
	animation: scaler 150ms ease-out;
}
img#correctNiceImg {
	position: absolute;
	top: -7.3rem;
	right: 7rem;
	width: 8rem;
	animation: scaler 150ms ease-out;
}
@media (max-width: 820px){
	img#hurryImg {
		left: 2rem;
	}
	img#timePauseImg {
		left: -2rem;
	}
	img#livesDeductedImg {
		right: 1rem;
	}
	img#correctNiceImg {
		right: 8rem;
	}
}
@media (max-width: 769px){
	img#timePauseImg {
		left: -2.6rem;
	}
}
@media (max-width: 580px){
	img#hurryImg {
		top: -3rem;
		left: 2.2rem;
		width: 4rem;
	}
	img#timePauseImg {
		top: -5.5rem;
		left: -1.8rem;
		width: 6rem;
	}
	img#livesDeductedImg {
		top: -5.5rem;
		right: 1rem;
		width: 6rem;
	}
	img#correctNiceImg {
		top: -5.5rem;
		right: 7rem;
		width: 6rem;
	}
}
@media (max-width: 361px){
	img#timePauseImg {
		left: -1.5rem;
	}
}
@media (max-width: 281px){
	img#correctNiceImg {
		right: 4rem;
	}
}

.leftPanel {
	/*left center*/
	/*position: fixed;
	top: 21%;
	left: 0;
	transform: translate-y(-79%);
	font-size: 1.5rem;
	font-weight: bold;
	text-align: left;
	display: block;
	background-color: #ffde59;
	padding: 1rem;
	border-radius: 0 1rem 1rem 0;
	z-index: 5;
	box-shadow: 0 1px 3px 0 #463f19;*/

	/*left bottom*/
	position: fixed;
	bottom: 0;
	left: 0;
	font-size: 1.3rem;
	font-weight: bold;
	text-align: right;
	display: block;
	width: 100vw;
	background-color: transparent;
	z-index: 15;/*5*/
	pointer-events: none;
}
.leftPanel .leftPanelCenter { 
	position: relative;
	width: auto;
    margin: 0 auto;
    pointer-events: auto !important;
	background-color: #ffde59;
	box-shadow: 0 1px 3px 0 #463f19;
	padding: .3rem .6rem;
	border-radius: 1rem 0 0 0;
	text-align: center;
}
.leftPanel div { 
	display: inline-block;
	width: 5rem;
}

.leftPanel_left,
.leftPanel_right {
	display: inline-block;
	width: auto;/*30px;*/
}
/*.leftPanel_right {
	width: auto;
}*/

/*@media (max-width: 820px){
	.leftPanel {
		padding: .7rem;
	}
}*/
@media (max-width: 912px){/*580px*/
	.leftPanel .leftPanelCenter {
		border-radius: 1rem 1rem 0 0;
	}
	.leftPanel {
		font-size: 1.8rem;
		text-align: center !important;
		/*padding: .1rem;*/
	}
	/*.leftPanel div {
		margin: .5rem 0;
		display: block;
		border-bottom: .5px solid #463f19;
	}
	.leftPanel div:last-child {
		border-bottom: none;
	}
	.leftPanel_left,
	.leftPanel_right {
		padding: 0;
		margin: 0;
		display: block;
		width: 36px;
	}
	.startBtn span.leftPanel_left,
	.startBtnDisabled span.leftPanel_left,
	.leftPanel_right {
		margin-bottom: 6px;
	}*/
}
@media (max-width: 580px){
	.leftPanel {
		font-size: 1.3rem;
	}
	.leftPanel div { 
		width: 4.5rem;
	}
}
@media (max-width: 330px){
	.leftPanel {
		font-size: 1rem;
	}
	.leftPanel div { 
		width: 3rem;
	}
}

a.startBtnActive:hover {
	text-decoration: none;
	color: inherit;
}

/*@media (max-width: 780px){
	.startWord {
		font-size: .8rem;
		vertical-align: middle !important;
	}
}*/
	
.correctWrongHolder,
.missionAccomplishedHolder {
	position: fixed;
	z-index: 14;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: transparent;
	pointer-events: none !important;
}
.missionAccomplishedHolder {
	z-index: 999999;
	background: #ffde59;
	pointer-events: auto !important;
}

.correctWrong,
.missionAccomplished {
	position: absolute;
	/*top: 50%; 
	left: 50%; 
	width: 3.75rem;
	height: 1.25rem;
	margin: -0.625rem 0 0 -1.875rem;*/ /* is width and height divided by two */ 
	text-align: center;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}


img#correctAppear,
img#wrongAppear,
img#deductLiveAppear,
img#winLoseImg {
	/*position: fixed;
	top: 3rem;
	left: 1rem;
	z-index: 5;*/
	min-width: 3rem;
	width: 10vw;
	box-shadow: 0 1px 3px 0 #463f19;
	animation: scaler 150ms ease-out;
	outline: thick solid white;
}
img#winLoseImg {
	width: 18vw;
}
@media (max-width: 912px){
	img#correctAppear,
	img#wrongAppear,
	img#deductLiveAppear {
		width: 30vw;
	}

	img#winLoseImg {
		width: 43vw;
	}
}

map area {
	cursor: pointer !important;
}

/*story animate*/
div.frameBox {
	position: relative;
	display: inline-table;
	/*background-color: #5398d9;*/
	text-align: center;
	overflow: hidden;
	padding: 0;
	vertical-align:middle;
	page-break-inside:avoid;
	border-style:none;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

div.frameBg1 img {
	max-width: 100vw;
	max-height: 78vh;
	padding: 0;
	vertical-align:middle;
	page-break-inside:avoid;
	border-style:none;
}

.characterDiv, .chatDiv, .bottomChatDiv {
	position: absolute;
	top: 0%;
    left: 0%;
    /*background-color: #5398d9;*/
}
.characterDiv img, .chatDiv img, .bottomChatDiv img {
	width: 100%;
}