/* =========================================================================== */
/* LARGE DESKTOP ============================================================= */
/* =========================================================================== */
@media screen and (min-width : 1200px) {
}
/* =========================================================================== */
/* VERY LARGE DESKTOP ======================================================== */
/* =========================================================================== */
@media screen and (min-width : 1600px) {
}
/* =========================================================================== */
/* MEDIUM DESKTOP ============================================================= */
/* =========================================================================== */
@media screen and (max-width : 1200px) {
}
/* =========================================================================== */
/* SMALL DESKTOP ============================================================= */
/* =========================================================================== */
@media screen and (max-height : 1024px) {
	SECTION.page {
		max-width:580px;
	}
	div.introcontent {
		padding-top:220px;
	}
}
@media screen and (max-height : 768px) {
	BODY {
		font-size:10pt;
	}
	div.title.hide {
		display:none;
	}
	.board,
	UL.highscore {
		margin-left:20px;
		margin-right:20px;
	}
	SECTION.page {
		max-width:480px;
	}
	div.title.welcome {
		padding-top:34%;
	}
	div.maincontent {
		bottom:10%;
	}
	div.centercontent {
		top:50%;
	}
	div.introcontent {
		padding-top:180px;
		padding-bottom:50px;
	}
	.tit {
		font-size:x-large;
	}
}
@media screen and (max-height : 640px) {
	SECTION.page {
		max-width:380px;
	}
	BODY {
		font-size:9pt;
	}
	.textbox,
	FORM.game INPUT[type='text'] {
		padding:5px 10px;
	}
	.button,
	FORM.game INPUT[type='button'],
	FORM.game INPUT[type='submit'] {
		height:40px;
		font-size:9pt;
	}
	div.question .container {
		margin-left:20px;
		margin-right:20px;
	}
	UL.highscore li {
		font-size:small;
		padding-top:2px;
		padding-bottom:2px;
	}
	div.maincontent {
		bottom:5%;
	}
	div.introcontent {
		padding-top:140px;
		padding-bottom:20px;
	}
	div.human {
		left:40px;
	}
	div.human span {
		width :70px;
		height:70px;
	}
	div.cloud span,
	div.cloud.scale0 span {
		width:100px;
		height:70px;
	}
	div.cloud.scale1 span {
		width:126px;
		height:86px;
	}
	div.cloud.scale2 span {
		width:150px;
		height:104px;
	}
	div.grndearth {
		height:100px;
	}
	div.gate {
		bottom:100px;
		height: calc(100% - 100px);
	}
	.tit {
		font-size:large;
	}
}
/* =========================================================================== */
/* IPAD XOAY NGANG =========================================================== */
/* =========================================================================== */
@media screen and (min-aspect-ratio: 4/3) and (max-width: 1024px) {
	SECTION.landscape {
		display:block;
	}
}
/* =========================================================================== */
/* TABLET ==================================================================== */
/* =========================================================================== */
@media screen and (max-width : 991px) {
}
/* =========================================================================== */
/* TABLET ==================================================================== */
/* =========================================================================== */
@media screen and (max-width : 768px) {
}
/* =========================================================================== */
/* SMARTPHONE ================================================================ */
/* =========================================================================== */
@media screen and (max-width : 640px) {
}
/* =========================================================================== */
/* MOBILE ==================================================================== */
/* =========================================================================== */
@media screen and (max-width : 414px) {
}
/* =========================================================================== */
/* IPHONE 5 ================================================================== */
/* =========================================================================== */
@media screen and (max-width : 375px) {
	div.title.welcome {
		padding-top:31%;
	}
	div.life {
		width:60px;
		height:60px;
	}
	div.life span {
		font-size:large;
	}
	ul.answer li {
		margin-left:0px;
		margin-right:0px;
	}
	ul.answer {
		font-size: 12pt;
	}
}