html,
body {
	margin: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.image{
	text-align: center;
	vertical-align: middle;
	background-color: white;
    width: 842px;
    height: 635px;
	}
@font-face {
	font-family: comic_b;
	font-style: normal;
	font-weight: bold;
	src :url('../fonts/comicbd_0.eot') format('eot'), url('../fonts/comicbd_0.otf') format('otf'), url('../fonts/comicbd_0.woff') format('woff'), url('../fonts/comicbd_0.ttf') format('truetype'), url('../fonts/comicbd_0.svg') format('svg');
}
@font-face {
	font-family: comic;
	font-style: normal;
	font-weight: normal;
	src : url('../fonts/comic_0.eot') format('eot'), url('../fonts/comic_0.otf') format('otf'), url('../fonts/comic_0.woff') format('woff'), url('../fonts/comic_0.ttf') format('truetype'), url('../fonts/comic_0.svg') format('svg');
}
@font-face {
	font-family: arial;
	font-style: normal;
	font-weight: normal;
	src : url("../fonts/arial.otf"),url('../fonts/arial.woff') format('woff'), url('../fonts/arial.ttf') format('truetype'), url('../fonts/arial.svg') format('svg');;
}
@font-face {
	font-family: arial;
	font-style: normal;
	font-weight: bold;
	src : url("../fonts/arialbd.otf"),url('../fonts/arialbd.woff') format('woff'), url('../fonts/arialbd.ttf') format('truetype'), url('../fonts/arialbd.svg') format('svg');;
}



.okbtn {
	 position: absolute;
	 top: 340px;
	 left: 535px;
}
.paper {
	position: absolute;
	top: 0.3em;
	left: 1.3em;
	width: 108px;
	border: 0px solid red;
	background: url(../images/book/a0002.png);
	background-repeat: no-repeat;
	height: 23px;
	background-position: 100% 100%;
}
.ten {
	font-size: 21px;
	font-family: arial;
	font-weight: bold;
}
.tab_no1 {
	position: absolute;
	top: 23.1em;
	left: 13.6em;
}
.tab_no2 {
	position: absolute;
	top: 11.3em;
	left: 25.6em;
	right: 10px;
}
.guideline {
	/* width: 7em; */
	height: 67.4%;
	border: 1px solid transparent;
	position: absolute;
	top: 2.6em;
	right: 7.8em;
}
.guideline_txt {
	font-size: 1.2em;
	font-family: arial;
	text-align: center;
	width: 227px;
	font-family: comic;
	line-height: 29px;
}
.guideline_col {
	/* height: 2.4em; */
	vertical-align: middle;
	font-family: arial;
	width: 13.6em;
	/*	overflow: hidden; */
}
.new_school {
	border: 2px solid transparent;
	vertical-align: middle;
	width: 13em;
	margin-top: 1px;
}
.playground {
	height: 41px;
	vertical-align: middle;
	cursor: pointer;
}
.classrooms {
	height: 41px;
	vertical-align: middle;
	cursor: pointer;
}
.new_school_img {
	width: 60px;
	vertical-align: middle;
	cursor: pointer;
	margin: 6px 0 0 -5px;
}
.new_school_img:hover	{
	width: 76px !important;
	margin-left: -8px !important;
	margin-top: 0px !important;
}
.new_school_img:focus	{
	width: 76px !important;
	margin-left: -8px !important;
	margin-top: 0px !important;
}

.library {
	height: 41px;
	vertical-align: middle;
	cursor: pointer;
}
.carpark {
	height: 41px;
	vertical-align: middle;
	cursor: pointer;
}
.lawn {
	height: 41px;
	vertical-align: middle;
	cursor: pointer;
}
.canteen {
	height: 41px;
	vertical-align: middle;
	cursor: pointer;
}
.toilets {
	height: 41px;
	vertical-align: middle;
	cursor: pointer;
}
.garden {
	height: 41px;
	vertical-align: middle;
	cursor: pointer;
}
.opac {
	opacity: 0.3;
}
span.total{
	font-size: 1em;
	font-family: arial;
	margin: 1em 0em 0em 2.5em;
	vertical-align: -0.4em;
}

/* For Button Hover */

div.okbtn1 {
	 position: absolute;
	 top: 20.8em;
	 left: 31.4em;
}
div.okbtn {
	 position: absolute;
	 top: 19.8em;
	 left: 31.4em;
}
.imgokbtn	{
	width: 67px;
	cursor: pointer;
}
.imgokbtn:hover,.imgokbtn:focus	{
	width: 108% !important;
	margin-left: -10% !important;
	margin-top: -4% !important;
}

.hover_img {
	width: 42px;
	cursor: pointer;
}
.hover_img:hover,.hover_img:focus {
	-webkit-transform: scale(1.1); 
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}
.border {
	border: 2px solid black;
	z-index: 200;
}
.border_guide {
	border: 3px solid red;
}
.tools {
	 position: absolute;
	 top: 8.8em;
	 left: 30.2em;
	 width: 5.1em;
	 height: 3.4em;
	 border: 2px solid transparent;
	 background-color: #ebf0fe;
}
.tools_txt {
	font-family: comic;
	margin: 0;
	text-align: center;
	font-size: 12px;
	font-weight: bold;
}
p.tools_img {
	margin: 0px;
}
img.tools_img {
	width: 34px;
	height: 34px;
	margin: 0px 0px 0px 4px;
	cursor: pointer;
}
.how_to_use {
	 position: absolute;
	 bottom: 4em;
	 right: 0.7em;
	 z-index: 300;
}

.how_to_use_img {
	 width: 4.4em;
	 height: 3.6em;
	 cursor: pointer;
	 z-index: 300;
}
.how_to_use_img:hover ,.how_to_use_img:focus{
	width: 5.2em !important;
	height: 4.4em !important;
	margin-right: -4px !important;
	margin-bottom: -8px !important;
}
.how_to_use1 {
	 position: absolute;
	 bottom:4.9em;
	 right: 1.8em;
	 z-index: 300;
	 font-family: comic;
	 text-align:center;
	 cursor:pointer;
}
.how_to_use1 span{     position: absolute;
    top: 23px;
    left:5px;
    width:60px;
    font-size: 13px;
    text-shadow: 1px 1px 1px #ffffff;
    -webkit-text-shadow: 1px 1px 1px #ffffff;
    -moz-text-shadow: 1px 1px 1px #ffffff;
    -o-text-shadow: 1px 1px 1px #ffffff;
    -ms-text-shadow: 1px 1px 1px #ffffff;
    line-height: 13px;
	font-weight: bold;
	}
.p2_how_to_use1 {
	 position: absolute;
	 bottom: 2.1em;
	 right: 1em;
	 z-index: 300;
}
.how_to_use1_img {
	 width: 4.2em;
	 height: 3.6em;
	 cursor: pointer;
	 background-size:100% 100%;
}
.how_to_use1:hover{
transform:scale(1.2);
-webkit-transform:scale(1.2);
-moz-transform:scale(1.2);
-ms-transform:scale(1.2);
-o-transform:scale(1.2);
	
}
.how_to_use1:focus {
transform:scale(1.2);
-webkit-transform:scale(1.2);
-moz-transform:scale(1.2);
-ms-transform:scale(1.2);
-o-transform:scale(1.2);
}


.design {
	 position: absolute;
	 bottom: 1.7em;
	 right: 1.8em;
	 z-index: 400;
	  font-family: comic;
	 text-align:center;
	 cursor:pointer;
}
.design span {
    position: absolute;
    top: 3px;
    left: 5px;
    width: 60px;
    font-size: 12px;
    text-shadow: 0px 0px 1px #ffffff;
    -webkit-text-shadow: 1px 1px 1px #ffffff;
    -moz-text-shadow: 1px 1px 1px #ffffff;
    -o-text-shadow: 1px 1px 1px #ffffff;
    -ms-text-shadow: 1px 1px 1px #ffffff;
    line-height: 13px;
    font-weight: bold;
}
.design_img {
	 width: 4.2em;
	 height: 3.1em;
	 cursor: pointer;
	 z-index: 400;
}
.design:hover,.design:focus{
transform:scale(1.2);
	
	
}
.next {
	 position: absolute;
	 bottom: 8.6em;
	 right: 2em;
	 z-index: 300;
	 font-family: comic;
	 cursor:pointer;
}
.next span{ position:absolute;top:5px;
    left: 9px;
    font-size: 20px;
   
	text-shadow: 1px 1px 1px #ffffff;
	-webkit-text-shadow: 1px 1px 1px #ffffff;
	-moz-text-shadow: 1px 1px 1px #ffffff;
	-o-text-shadow: 1px 1px 1px #ffffff;
	-ms-text-shadow: 1px 1px 1px #ffffff;}
.p2_next {
	 position: absolute;
	 bottom: 5.8em;
	 right: 1.2em;
	 z-index: 300;
}
.next_img {
	 width: 4em;
	 height: 2.6em;
	 cursor: pointer;
	 z-index: 300;
	 background-size:100% 100%;
}
.next:hover {
transform:scale(1.25);
-webkit-transform:scale(1.25);
-moz-transform:scale(1.25);
-o-transform:scale(1.25);
-ms-transform:scale(1.25);
	
}
.next:focus {
transform:scale(1.25);
-webkit-transform:scale(1.25);
-moz-transform:scale(1.25);
-o-transform:scale(1.25);
-ms-transform:scale(1.25);
	
}


.main_menu {
	 position: absolute;
	 bottom: 7.8em;
	 right: 0.4em;
}
.main_menu_img {
	 width: 5.1em;
	 height: 1.8em;
	 cursor: pointer;
}
.p3_main_menu:hover {
transform:scale(1.2);
-webkit-transform:scale(1.2);
-moz-transform:scale(1.2);
-ms-transform:scale(1.2);
-o-transform:scale(1.2);
	
}
.p3_main_menu:focus {
transform:scale(1.2);
-webkit-transform:scale(1.2);
-moz-transform:scale(1.2);
-ms-transform:scale(1.2);
-o-transform:scale(1.2);
}
.p3_main_menu:active {
transform:scale(1);
-webkit-transform:scale(1);
-moz-transform:scale(1);
-ms-transform:scale(1);
-o-transform:scale(1);
}


p.m0 {
	margin: 0px;
}

.feed_pop {
	 position: absolute;
	 bottom: 0.1em;
	 left: 1.5em;
	 width: 37.3em;
	 height: 5.5em;
}
.feed_pop_img {
	 width: 37.3em;
	 height: 5.2em;
	 position: absolute;
	 top: 0;
	 left: 0;
	 z-index: 1;
}

.center_page {overflow: hidden;}

a.q:visited {
	background-color: yellow;
}
.question_mark_p2 {
	 position: absolute;
	 bottom: 0.8em;
	 right: 0.8em;
	 width: 1.6em;
	 height: 1.5em;
	 /* border: 1px solid red; */
	 z-index: 100;
	 cursor: pointer;
}
.question_mark_p2:hover ,.question_mark_p2:focus{
	width: 1.9em !important;
	height: 1.8em !important;
	margin-right: -2px !important;
	margin-bottom: -2px !important;
}
.ok_btn {
	 position: absolute;
	 bottom: 1em;
	 left: 7em;
	 z-index: 1000;
	 width: 4.2em;
	 height: 2em;
	 cursor: pointer;
}
.ok_btn:hover,.ok_btn:focus {
	width: 4.5em !important;
	height: 2.3em !important;
	margin-left: -4px !important;
	margin-bottom: -2px !important;
}
.cancel_btn {
	 position: absolute;
	 bottom: 1em;
	 left: 13.2em;
	 z-index: 1000;
	 width: 4.2em;
	 height: 2em;
	 cursor: pointer;
}
.cancel_btn:hover,.cancel_btn:focus {
	width: 4.5em !important;
	height: 2.3em !important;
	margin-left: -4px !important;
	margin-bottom: -2px !important;
	z-index: 1 !important;
}
.center_ok {
	text-align: center;
	margin: 52px 0px 7px 0px;
}
.ok_pop {
	width: 360px;
	height: 93px;
	border: 0px solid red;
}
.mainbg {
	position: absolute;
	top: 0em;
	left: 0em;
	width: 100%;
	border: 0px solid red;
	background: url(../images/mainpage/mainbg.png);
	background-repeat: no-repeat;
	height: 100%;
	background-position: 0px 0px;
	z-index: 200;
	background-size: 100% 100%;
}
.mid {
	position: absolute;
	top: 0em;
	left: 0em;
	width: 100%;
	border: 0px solid red;
	background: url(../images/mainpage/mid.png);
	background-repeat: no-repeat;
	height: 100%;
	background-position: 0px 0px;
	z-index: 200;
	background-size: 100% 100%;
	-webkit-animation: page_opa 0.8s 1 normal;
	-moz-animation: page_opa 0.8s 1 normal;
	-ms-animation: page_opa 0.8s 1 normal;
	animation: page_opa 0.8s 1 normal;
}
@keyframes page_opa {
    0% { opacity: 0.1; }
    50% { opacity: 0.4; }
    100% { opacity: 1; }
}
@-webkit-keyframes page_opa {
    0% { opacity: 0.1; }
    50% { opacity: 0.4; }
    100% { opacity: 1; }
}
@-moz-keyframes page_opa {
    0% { opacity: 0.1; }
    50% { opacity: 0.4; }
    100% { opacity: 1; }
}
@-ms-keyframes page_opa {
    0% { opacity: 0.1; }
    50% { opacity: 0.4; }
    100% { opacity: 1; }
}
.title {
	position: absolute;
	top: 0em;
	left: 15.5em;
	width: 328px;
	border: 1px solid transparent;
	background: url(../images/mainpage/title.png);
	background-repeat: no-repeat;
	height: 130px;
	background-position: 100%;
	z-index: 10;
}
.ship {
	position: absolute;
	top: 7.52em;
	left: 0em;
	width: 652px;
	/* border: 1px solid red; */
	background: url(../images/mainpage/ship.png);
	background-repeat: no-repeat;
	height: 10px;
	background-position: 0px 0px;
	-webkit-animation: shipmove 40s linear 1 forwards;
	-moz-animation: shipmove 40s linear 1 forwards;
	-ms-animation: shipmove 40s linear 1 forwards;
	animation: shipmove 40s linear 1 forwards;
	z-index: 1;
}
@keyframes shipmove {
    from { background-position: 0px 0px; }
    to { background-position: 632px 0px; }
}
@-webkit-keyframes shipmove {
    from { background-position: 0px 0px; }
    to { background-position: 632px 0px; }
}
@-moz-keyframes shipmove {
    from { background-position: 0px 0px; }
    to { background-position: 632px 0px; }
}
@-ms-keyframes shipmove {
    from { background-position: 0px 0px; }
    to { background-position: 632px 0px; }
}
.upperbg {
	position: absolute;
	top: 0em;
	left: 0em;
	width: 845px;
	/* border: 1px solid red; */
	background: url(../images/mainpage/upperbg.png);
	background-repeat: no-repeat;
	height: 187px;
	background-position: 0px 0px;
	z-index: 0;
	background-size: 100% 100%;
}
.wave {
	position: absolute;
	top: 9.2em;
	left: 15.8em;
	width: 300px;
	height: 30px;
	border: 0px solid red;
	background-image: url("../images/mainpage/waves/wave1.png");
	-webkit-animation: play 7s steps(24) infinite;
	-moz-animation: play 7s steps(24) infinite;
	-ms-animation: play 7s steps(24) infinite;
	animation: play 7s steps(24) infinite;
}
@keyframes play {
	from { background-position: 0px 0px; }
     to { background-position: 0px -724px; }
}
@-webkit-keyframes play {
	from { background-position: 0px 0px; }
     to { background-position: 0px -724px; }
}
@-moz-keyframes play {
	from { background-position: 0px 0px; }
     to { background-position: 0px -724px; }
}
@-ms-keyframes play {
	from { background-position: 0px 0px; }
     to { background-position: 0px -724px; }
}
.page1_pop {
	position: absolute;
	bottom: 2.2em;
	left: 14em;
	width: 24.3em;
	height: 8.4em;
	background: url(../images/mainpage/popup/popup1.png);
	background-repeat: no-repeat;
	background-size: 100%;
	border: 1px solid transparent;
	z-index: 1000;
	background-position: 100%;
	padding: 0;
	margin: 0;
}
.era_btn {
	 position: absolute;
	 bottom: 0.5em;
	 right: 2em;
	 width: 1.8em;
	 height: 1.7em;
	 /* border: 1px solid red; */
	 z-index: 100;
	 cursor: pointer;
}
.question_mark2 {
	 position: absolute;
	 bottom: 1em;
	 right: 1.8em;
	 width: 1.6em;
	 height: 1.6em;
	 /* border: 1px solid red; */
	 z-index: 100;
	 cursor: pointer;
}
.question_mark2:hover,.question_mark2:focus {
	width: 2em !important;
	height: 2em !important;
	margin-right: -3px !important;
	margin-bottom: -3px !important;
}


/* ******* Design Your own School */

.birds_ani {
	position: absolute;
	top: 21em;
	left: -7em;
	width: 7em;
	height: 6.4em;
	border: 0px solid red;
	z-index: 1000;
	transform: rotate(60deg);
	-webkit-transform: rotate(60deg);
	-ms-transform: rotate(60deg);
	-moz-transform: rotate(60deg);
	-webkit-animation: distance 6s linear 0s infinite normal;
	-ms-animation: distance 6s linear 0s infinite normal;
	-moz-animation: distance 6s linear 0s infinite normal;
	animation: distance 6s linear 0s infinite normal;
}
.bird1 {
	background: url(../images/designyour/ani/bird.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	background-size: 100%;
	-webkit-animation: bird 0.2s ease 0s infinite normal;
	-ms-animation: bird 0.2s ease 0s infinite normal;
	-ms-animation: bird 0.2s ease 0s infinite normal;
	-moz-animation: bird 0.2s ease 0s infinite normal;
	animation: bird 0.2s ease 0s infinite normal;
	z-index: 1000;
	width: 31px;
	height: 21px;
	border: 0px solid red;
	transform: rotateY(19deg);
	-webkit-transform: rotateY(19deg);
	-ms-transform: rotateY(19deg);
	-moz-transform: rotateY(19deg);
}
.bird2 {
	background: url(../images/designyour/ani/bird.png);
	background-repeat: no-repeat;
	background-position: 0px 3px;
	background-size: 100%;
	-webkit-animation: bird 0.2s ease 0s infinite normal;
	-ms-animation: bird 0.2s ease 0s infinite normal;
	-ms-animation: bird 0.2s ease 0s infinite normal;
	-moz-animation: bird 0.2s ease 0s infinite normal;
	animation: bird 0.2s ease 0s infinite normal;
	z-index: 1000;
	width: 31px;
	height: 21px;
	border: 0px solid red;
	transform: rotateY(19deg);
	-webkit-transform: rotateY(19deg);
	-ms-transform: rotateY(19deg);
	-moz-transform: rotateY(19deg);
	position: absolute;
	top: 3px;
	left: 48px;
}
.bird3 {
	background: url(../images/designyour/ani/bird.png);
	background-repeat: no-repeat;
	background-position: 0px 3px;
	background-size: 100%;
	-webkit-animation: bird 0.2s ease 0s infinite normal;
	-ms-animation: bird 0.2s ease 0s infinite normal;
	-moz-animation: bird 0.2s ease 0s infinite normal;
	animation: bird 0.2s ease 0s infinite normal;
	z-index: 1000;
	width: 31px;
	height: 21px;
	border: 0px solid red;
	transform: rotateY(19deg);
	-webkit-transform: rotateY(19deg);
	-ms-transform: rotateY(19deg);
	-moz-transform: rotateY(19deg);
	position: absolute;
	top: 31px;
	left: 29px;
}
.bird4 {
	background: url(../images/designyour/ani/bird.png);
	background-repeat: no-repeat;
	background-position: 0px 3px;
	background-size: 100%;
	-webkit-animation: bird 0.2s ease 0s infinite normal;
	-ms-animation: bird 0.2s ease 0s infinite normal;
	-moz-animation: bird 0.2s ease 0s infinite normal;
	animation: bird 0.2s ease 0s infinite normal;
	z-index: 1000;
	width: 31px;
	height: 21px;
	border: 0px solid red;
	transform: rotateY(19deg);
	-webkit-transform: rotateY(19deg);
	-ms-transform: rotateY(19deg);
	-moz-transform: rotateY(19deg);
	position: absolute;
	top: 66px;
	left: 20px;
}
@keyframes bird {
    0% { transform: rotateY(19deg);
	-webkit-transform: rotateY(19deg);
	-ms-transform: rotateY(19deg);
	-moz-transform: rotateY(19deg);  }
    50% { transform: rotateY(35deg);
	-webkit-transform: rotateY(35deg);
	-ms-transform: rotateY(35deg);
	-moz-transform: rotateY(35deg); }
    100% { transform: rotateY(60deg);
	-webkit-transform: rotateY(60deg);
	-ms-transform: rotateY(60deg);
	-moz-transform: rotateY(60deg); }
}
@-webkit-keyframes bird {
    0% { transform: rotateY(19deg);
	-webkit-transform: rotateY(19deg);
	-ms-transform: rotateY(19deg);
	-moz-transform: rotateY(19deg);  }
    50% { transform: rotateY(35deg);
	-webkit-transform: rotateY(35deg);
	-ms-transform: rotateY(35deg);
	-moz-transform: rotateY(35deg); }
    100% { transform: rotateY(60deg);
	-webkit-transform: rotateY(60deg);
	-ms-transform: rotateY(60deg);
	-moz-transform: rotateY(60deg); }
}
@-moz-keyframes bird {
    0% { transform: rotateY(19deg);
	-webkit-transform: rotateY(19deg);
	-ms-transform: rotateY(19deg);
	-moz-transform: rotateY(19deg);  }
    50% { transform: rotateY(35deg);
	-webkit-transform: rotateY(35deg);
	-ms-transform: rotateY(35deg);
	-moz-transform: rotateY(35deg); }
    100% { transform: rotateY(60deg);
	-webkit-transform: rotateY(60deg);
	-ms-transform: rotateY(60deg);
	-moz-transform: rotateY(60deg); }
}
@-ms-keyframes bird {
    0% { transform: rotateY(19deg);
	-webkit-transform: rotateY(19deg);
	-ms-transform: rotateY(19deg);
	-moz-transform: rotateY(19deg);  }
    50% { transform: rotateY(35deg);
	-webkit-transform: rotateY(35deg);
	-ms-transform: rotateY(35deg);
	-moz-transform: rotateY(35deg); }
    100% { transform: rotateY(60deg);
	-webkit-transform: rotateY(60deg);
	-ms-transform: rotateY(60deg);
	-moz-transform: rotateY(60deg); }
}
@keyframes distance {
    0% { top: 21em; left: -7em; }
    100% { top: -4em; left: 56em; }
}
@-webkit-keyframes distance {
    0% { top: 21em; left: -7em; }
    100% { top: -4em; left: 56em; }
}
@-moz-keyframes distance {
    0% { top: 21em; left: -7em; }
    100% { top: -4em; left: 56em; }
}
@-ms-keyframes distance {
    0% { top: 21em; left: -7em; }
    100% { top: -4em; left: 56em; }
}
.main_btn {
	 position: absolute;
	 bottom: 5.6em;
	 left: 0.4em;
	 z-index: 1000;
}
.main_btn_img {
	 width: 4.8em;
	 height: 1.8em;
	 cursor: pointer;
}
.main_btn_img:hover ,.main_btn_img:focus{
	width: 5.5em !important;
	height: 2.2em !important;
	margin-left: -3px !important;
	margin-bottom: -2px !important;
	z-index: 10 !important;
}
.mainbg_1 {
	position: absolute;
	top: 0em;
	left: 0em;
	width: 100%;
	border: 0px solid red;
	background: url(../images/designyour/designyour.png);
	background-repeat: no-repeat;
	height: 100%;
	background-position: 0px 0px;
	z-index: 200;
	background-size: 100% 100%;
	overflow: hidden;
}
.upperbg_1 {
	position: absolute;
	top: 0em;
	left: 0em;
	width: 845px;
	/* border: 1px solid red; */
	background: url(../images/mainpage/upperbg.png);
	background-repeat: no-repeat;
	height: 187px;
	background-position: 0px 0px;
	z-index: 0;
	background-size: 100% 100%;
}
.page2_pop {
	position: absolute;
	bottom: 1.4em;
	left: 9.4em;
	width: 27.6em;
	height: 9.6em;
	background: url(../images/mainpage/popup/popup2.png);
	background-repeat: no-repeat;
	background-size: 100%;
	border: 1px solid transparent;
	z-index: 1000;
	background-position: 100%;
	padding: 0;
	margin: 0;
}
.era_btn {
	 position: absolute;
	 bottom: 0.5em;
	 right: 2em;
	 width: 1.8em;
	 height: 1.7em;
	 /* border: 1px solid red; */
	 z-index: 100;
	 cursor: pointer;
}
.question_mark1 {
	 position: absolute;
	 bottom: 0.9em;
	 right: 1.5em;
	 width: 1.6em;
	 height: 1.5em;
	 /* border: 1px solid red; */
	 z-index: 100;
	 cursor: pointer;
}
.question_mark1:hover ,.question_mark1:focus{
	width: 1.9em !important;
	height: 1.8em !important;
	margin-right: -2px !important;
	margin-bottom: -2px !important;
}
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 84.4%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(100,134,234,0.46);
}
.pops {
	display: none;
	margin-top: 10px;
	z-index: 1000 !important;
}
.modal-content {
	background-color: #698DFA;
	border: 5px solid #FFFFFF;
	display: block;
	width: 360px;
	height: 149px;
	padding: 16px 10px 10px 10px;
	border-radius: 7px;
	margin-top: 100px;
	position: absolute;
	top: 9em;
	left: 14em;
}
img, p, span {
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}

.girl {
	position: absolute;
	bottom: 0.7em;
	left: 624px;
	width: 106px;
	border: 0px solid red;
	background: url(../images/girl/hi_girl.png);
	background-repeat: no-repeat;
	height: 240px;
	background-position: 100%;
	z-index: 500;
	background-size: 100% 100%;
	display: block;
	opacity: 1;
}
.girl_img_ani {
	-moz-animation: girl_img_ani 0.5s linear 0s forwards;
	-ms-animation: girl_img_ani 0.5s linear 0s forwards;
	-webkit-animation: girl_img_ani 0.5s linear 0s forwards;
	animation: girl_img_ani 0.5s linear 0s forwards;
}
@keyframes girl_img_ani {
    0% { 	width: 106px; height: 240px; }
    100% { width: 76px; height: 146px; bottom: 1.2em; left: 40.1em; }
}
@-webkit-keyframes girl_img_ani {
    0% { 	width: 106px; height: 240px; }
    100% { width: 76px; height: 146px; bottom: 1.2em; left: 40.1em; }
}
@-moz-keyframes girl_img_ani {
    0% { 	width: 106px; height: 240px; }
    100% { width: 76px; height: 146px; bottom: 1.2em; left: 40.1em; }
}
@-ms-keyframes girl_img_ani {
    0% { 	width: 106px; height: 240px; }
    100% { width: 76px; height: 146px; bottom: 1.2em; left: 40.1em; }
}

.iframe {
	position: absolute;
	top: 0em;
	left: 0em;
	width: 100%;
	height: 100%;
	overflow: hidden;
	outline: navajowhite;
	border: 0;
}
.opacity {
	-moz-animation: opacity 0.7s linear 0s 1 forwards;
	-webkit-animation: opacity 0.7s linear 0s 1 forwards;
	-ms-animation: opacity 0.7s linear 0s 1 forwards;
	animation: opacity 0.7s linear 0s 1 forwards;
}
@keyframes opacity {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}
@-webkit-keyframes opacity {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}
@-moz-keyframes opacity {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}
@-ms-keyframes opacity {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}

.design_your_own_school {
	display: none;
}
.play_playground1 {
	display: none;
}
.play_playground2 {
	display: none;
}
.build_school_plan {
	display: none;
}

.design_img_page3 {
	 position: absolute;
	 bottom: 0.5em;
	 right: 0.4em;
}
.design_img_page3 {
	 width: 4.2em;
	 height: 3.1em;
	 cursor: pointer;
}
.design_img_page3:hover ,.design_img_page3:focus{
	width: 4.6em !important;
	height: 3.5em !important;
	margin-right: -4px !important;
	margin-bottom: -2px !important;
	z-index: 1 !important;
}
.tlf_logo {
	width: 78px;
}
.tlf_logo_p {
	margin: 0px 0px 0px 6px;
}

.build {
	position: absolute;
	top: 9em;
	left: 9em;
	width: 430px;
	-ms-animation: build 0.2s 1 forwards;
	-moz-animation: build 0.2s 1 forwards;
	-webkit-animation: build 0.2s 1 forwards;
	animation: build 0.2s 1 forwards;
	z-index: 200;
}
@keyframes build {
    from { position: absolute; top: 10em; left: 10em; width: 430px; transform: skewX(50deg); opacity: 0.2;
	-webkit-transform: skewX(50deg);
	-ms-transform: skewX(50deg);
	-moz-transform: skewX(50deg); opacity: 0.2; }
    to { position: absolute; top: 3.2em; left: 4.2em; width: 334px; transform: skewX(0deg); opacity: 1;
	-webkit-transform: skewX(0deg);
	-ms-transform: skewX(0deg);
	-moz-transform: skewX(0deg); opacity: 1; }
}
@-webkit-keyframes build {
    from { position: absolute; top: 10em; left: 10em; width: 430px; transform: skewX(50deg); opacity: 0.2;
	-webkit-transform: skewX(50deg);
	-ms-transform: skewX(50deg);
	-moz-transform: skewX(50deg); opacity: 0.2; }
    to { position: absolute; top: 3.2em; left: 4.2em; width: 334px; transform: skewX(0deg); opacity: 1;
	-webkit-transform: skewX(0deg);
	-ms-transform: skewX(0deg);
	-moz-transform: skewX(0deg); opacity: 1; }
}
@-moz-keyframes build {
    from { position: absolute; top: 10em; left: 10em; width: 430px; transform: skewX(50deg); opacity: 0.2;
	-webkit-transform: skewX(50deg);
	-ms-transform: skewX(50deg);
	-moz-transform: skewX(50deg); opacity: 0.2; }
    to { position: absolute; top: 3.2em; left: 4.2em; width: 334px; transform: skewX(0deg); opacity: 1;
	-webkit-transform: skewX(0deg);
	-ms-transform: skewX(0deg);
	-moz-transform: skewX(0deg); opacity: 1; }
}
@-ms-keyframes build {
    from { position: absolute; top: 10em; left: 10em; width: 430px; transform: skewX(50deg); opacity: 0.2;
	-webkit-transform: skewX(50deg);
	-ms-transform: skewX(50deg);
	-moz-transform: skewX(50deg); opacity: 0.2; }
    to { position: absolute; top: 3.2em; left: 4.2em; width: 334px; transform: skewX(0deg); opacity: 1;
	-webkit-transform: skewX(0deg);
	-ms-transform: skewX(0deg);
	-moz-transform: skewX(0deg); opacity: 1; }
}
@keyframes build111 {
    0% { position: absolute; top: 10em; left: 10em; transform: rotateX(30deg) rotateY(30deg);
	-webkit-transform: rotateX(30deg) rotateY(30deg);
	-ms-transform: rotateX(30deg) rotateY(30deg);
	-moz-transform: rotateX(30deg) rotateY(30deg); }
    100% { position: absolute; top: 1em; left: 1em; transform: rotateX(0deg) rotateY(0deg);
	-webkit-transform: rotateX(0deg) rotateY(0deg);
	-ms-transform: rotateX(0deg) rotateY(0deg);
	-moz-transform: rotateX(0deg) rotateY(0deg); }
}
@-webkit-keyframes build111 {
    0% { position: absolute; top: 10em; left: 10em; transform: rotateX(30deg) rotateY(30deg);
	-webkit-transform: rotateX(30deg) rotateY(30deg);
	-ms-transform: rotateX(30deg) rotateY(30deg);
	-moz-transform: rotateX(30deg) rotateY(30deg); }
    100% { position: absolute; top: 1em; left: 1em; transform: rotateX(0deg) rotateY(0deg);
	-webkit-transform: rotateX(0deg) rotateY(0deg);
	-ms-transform: rotateX(0deg) rotateY(0deg);
	-moz-transform: rotateX(0deg) rotateY(0deg); }
}
@-moz-keyframes build111 {
    0% { position: absolute; top: 10em; left: 10em; transform: rotateX(30deg) rotateY(30deg);
	-webkit-transform: rotateX(30deg) rotateY(30deg);
	-ms-transform: rotateX(30deg) rotateY(30deg);
	-moz-transform: rotateX(30deg) rotateY(30deg); }
    100% { position: absolute; top: 1em; left: 1em; transform: rotateX(0deg) rotateY(0deg);
	-webkit-transform: rotateX(0deg) rotateY(0deg);
	-ms-transform: rotateX(0deg) rotateY(0deg);
	-moz-transform: rotateX(0deg) rotateY(0deg); }
}
@-ms-keyframes build111 {
    0% { position: absolute; top: 10em; left: 10em; transform: rotateX(30deg) rotateY(30deg);
	-webkit-transform: rotateX(30deg) rotateY(30deg);
	-ms-transform: rotateX(30deg) rotateY(30deg);
	-moz-transform: rotateX(30deg) rotateY(30deg); }
    100% { position: absolute; top: 1em; left: 1em; transform: rotateX(0deg) rotateY(0deg);
	-webkit-transform: rotateX(0deg) rotateY(0deg);
	-ms-transform: rotateX(0deg) rotateY(0deg);
	-moz-transform: rotateX(0deg) rotateY(0deg); }
}

.text_img_1 {
	height: 16px;
	vertical-align: -7px;
}
.text_img {
	height: 19px;
	vertical-align: -7px;
}
.text_img1 {
	height: 15px;
	vertical-align: -4px;
}
.text_img2 {
	height: 18px;
	vertical-align: -7px;
}
.text_img3 {
	height: 16px;
	vertical-align: -7px;
}
.text_img4 {
	height: 19px;
	vertical-align: -7px;
}
.text_img5 {
	height: 20px;
	vertical-align: -7px;
}
.text_img6 {
	height: 25px;
	vertical-align: -7px;
}
.text_img7 {
	height: 19px;
	vertical-align: -7px;
}

.feedback_text {
    padding: 15px;
    font-family: arial;
    line-height: 1.2em;
    font-size: 1.1em;
    margin: 0;
}
.feedback_text_p2 {
    padding: 4px 16px 8px 18px;
    font-family: arial;
    line-height: 22px;
    font-size: 17px;
}
.feedback_text_p3 {
    padding: 8px 11px;
    font-family: arial;
    line-height: 23px;
    font-size: 17px;
    margin: 0;
}

.feedback_text_p4 {
    padding: 11px 13px;
    font-family: arial;
    line-height: 21px;
    font-size: 18px;
    margin: 0;
}
.select_ok {
	width: 357px;
	height: 95px;
	border: 0px solid red;
	background: url(../images/mainpage/ok_pop.jpg);
	background-repeat: no-repeat;
	background-position: 0;
	background-size: 100%;
	border-radius: 10px;
	margin: 0;
	text-align: center;
	font-size: 20px;
	font-family: arial;
}
.padding_p1 {
	padding: 21px 12px 26px 12px;
	display: inline-block;
}
.cancel_btn {
	 position: absolute;
	 bottom: 1em;
	 left: 13.2em;
	 z-index: 1000;
	 width: 4.2em;
	 height: 2em;
	 cursor: pointer;
}
.cancel_btn:hover ,.cancel_btn:focus {
	width: 4.5em !important;
	height: 2.3em !important;
	margin-left: -4px !important;
	margin-bottom: -2px !important;
	z-index: 1 !important;
}

.small_text {
	font-size: 96%;
    line-height: 120%;
}
.p4_active {
	display: block !important;
}
.guideline_bottom {
	border-bottom: 2px solid #0033CC;
}
.area_filled {
	font-family: comic;
	margin: 0;
	font-size: 13px;
	font-weight: bold;
}
.mt1 {
	margin-top: 1px;
}
.mt2 {
	margin-top: 2px;
}
.mt3 {
	margin-top: 3px;
}
.mt4 {
	margin-top: 4px;
}
.mt5 {
	margin-top: 5px;
}
.mt6 {
	margin-top: 6px;
}
.mt7 {
	margin-top: 7px;
}
.mt8 {
	margin-top: 8px;
}
.mt9 {
	margin-top: 9px;
}
.mt10 {
	margin-top: 10px;
}
.mt11 {
	margin-top: 11px;
}
.mt12 {
	margin-top: 12px;
}
.mt13 {
	margin-top: 13px;
}
.mt14 {
	margin-top: 14px;
}
.mt15 {
	margin-top: 15px;
}
.mt16 {
	margin-top: 16px;
}
.mt17 {
	margin-top: 17px;
}
.mt18 {
	margin-top: 18px;
}
.p4_total {
	font-family: arial;
	font-size: 17px;
	position: absolute;
	top: 440px;
	left: 697px;
	font-weight: bold;
}
.total {
	font-family: arial;
	font-size: 14px;
}
.new_school_site {
	 position: absolute;
	 top: 348px;
	 left: 373px;
	 z-index: 500;
}
.new_school_site_img {
	width: 101px;
}

.page3_item1 {
	 position: absolute;
	 top: 71px;
}
.page3_item2 {
	 position: absolute;
	 top: 115px;
}
.page3_item3 {
	 position: absolute;
	 top: 159px;
}
.page3_item4 {
	 position: absolute;
	 top: 203px;
}
.page3_item5 {
	 position: absolute;
	 top: 246px;
}
.page3_item6 {
	 position: absolute;
	 top: 291px;
}
.page3_item7 {
	 position: absolute;
	 top: 335px;
}
.page3_item8 {
	 position: absolute;
	 top: 381px;
}

.page4_item1 {
	 position: absolute;
	 top: 72px;
}
.page4_item2 {
	 position: absolute;
	 top: 115px;
}
.page4_item3 {
	 position: absolute;
	 top: 158px;
}
.page4_item4 {
	 position: absolute;
	 top: 201px;
}
.page4_item5 {
	 position: absolute;
	 top: 245px;
}
.page4_item6 {
	 position: absolute;
	 top: 289px;
}
.page4_item7 {
	 position: absolute;
	 top: 333px;
}
.page4_item8 {
	 position: absolute;
	 top: 384px;
}

/*.container {
	position: relative;
    top: 50%;
    left: 50%;
}*/

.container #mainGame {
    position: relative;
    width: 842px;
    height: 635px;		
    overflow: hidden;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

.highlighter {
	outline: 2px solid #FF9900 !important;
}
.highlighter1 {
	outline: 2px solid #FF9900;
}




.fractionImg1 span,.fractionImg span{
    position: absolute;
	font-family: arial;
}
.fractionImg1 .one0,.fractionImg .one0 {
    font-size: 22px;
    font-family: arial;
    top: 12px;
    left: 8px;
}

.fractionImg .one0 {
    left: 6px;
}

.fractionImg1 .one11,.fractionImg .one11 {
    font-size: 22px;   
    top: 12px;
    left: 519px;
}
.fractionImg1 .one11 {
    left: 520px;

}

.fractionImg .one11 {
    left: 523px;

}
.fractionImg1 span:before,.fractionImg span:before{
	content: "";
    position: absolute;
    width: 1px;
    height: 10px;
    background: black;
    top: 28px;
    left: 5px;
}

.fractionImg1 .d,.fractionImg .d {
    font-size: 12px;
    font-family: arial;
    top: 12px;
    text-align: center;
    line-height: 13px;
	font-weight: bold;
}

.fractionImg1 .d1 {left: 59px;}
.fractionImg1 .d2 {left: 108px;}
.fractionImg1 .d3 {left: 159px;}
.fractionImg1 .d4 {left: 210px;}
.fractionImg1 .d5 {left: 262px;}
.fractionImg1 .d6 {left: 314px;}
.fractionImg1 .d7 {left: 365px;}
.fractionImg1 .d8 {left: 417px;}
.fractionImg1 .d9 {left: 468px;}

.fractionImg .d1 {left: 58px;}
.fractionImg .d2 {left: 110px;}
.fractionImg .d3 {left: 161px;}
.fractionImg .d4 {left: 213px;}
.fractionImg .d5 {left: 265px;}
.fractionImg .d6 {left: 316px;}
.fractionImg .d7 {left: 368px;}
.fractionImg .d8 {left: 420px;}
.fractionImg .d9 {left: 472px;}

.fractionImg1 span.d:after {
    content: "";
    position: absolute;
    width: 15px;
    height: 1px;
    background: black;
    left: -1px;
    top: 12px;
}

.fractionImg span.d:after {
    content: "";
    position: absolute;
    width: 15px;
    height: 1px;
    background: black;
    left: -1px;
    top: 12px;
}
#p3_slider-1 {
    width: 519px;
    height: 25px;
   /*  background: #990000; */
    position: absolute;
    left: 14px;
    top: -12px;
}

.colored {
    width: 0px;
    height: 8px;
    position: absolute;
    left: 7px;
    top: 12px;
}

.pointArrow {
    background: url(../images/slide.png) 0% 0% no-repeat;
    width: 16px;
    background-size: 100% 100%;
    height: 25px;
    position: absolute;
    top:0px;
    left:0px;
	z-index:5;
	cursor:pointer;
}

.newschoolsite{
	width: 85px;
    display: block;
    font-size: 11px;
    text-align: center;
    background: #cccc99;
    position: absolute;
    top: 13px;
    font-family: arial;
    left: 9px;
    height: 30px;	
}

.fractionD{

	width: 15px;
    height: 1px;
    background: black;
    display: inline-block;
    position: relative;
    top: -4px;
}
span.fractionD:after {
    content: "1";
    display: block;
    position: absolute;
    top: -19px;
    font-size: 13px;
    left: 3px;
}

span.fractionD:before {
    content: "10";
    display: block;
    position: absolute;
    top: -3px;
    font-size: 13px;
    left: -1px;
}


.p2_next span {
    position: absolute;
    top: 5px;
    left: 9px;
    font-size: 20px;
    text-shadow: 1px 1px 1px #ffffff;
    -webkit-text-shadow: 1px 1px 1px #ffffff;
    -moz-text-shadow: 1px 1px 1px #ffffff;
    -o-text-shadow: 1px 1px 1px #ffffff;
    -ms-text-shadow: 1px 1px 1px #ffffff;
	font-family: comic;
	cursor:pointer;
}

.p2_next:hover{
	transform:scale(1.2);
}
.p2_next:focus{
	transform:scale(1.2);
}


.p2_how_to_use1 span {
    position: absolute;
    top: 23px;
	left: 17px;
    font-size: 12px;
    text-shadow: 1px 1px 1px #ffffff;
    -webkit-text-shadow: 1px 1px 1px #ffffff;
    -moz-text-shadow: 1px 1px 1px #ffffff;
    -o-text-shadow: 1px 1px 1px #ffffff;
    -ms-text-shadow: 1px 1px 1px #ffffff;
    line-height: 13px;
	font-family: comic;
	cursor:pointer;
	text-align:center;
	font-weight: bold;
}

.p2_how_to_use1:hover{
	transform:scale(1.2);
}

.p2_how_to_use1:focus{
	transform:scale(1.2);
}

.main_menu_img:hover {
    width: 5.6em !important;
    height: 2.2em !important;
    margin-right: -4px !important;
    margin-bottom: 0px !important;
}




@media print {
	body{page-break-inside: avoid;}
	@page {
		size: A4 portrait;  margin: 0;
	}
	.colorProgress{
		background-color: red;
		-webkit-print-color-adjust: exact;
		-moz-print-color-adjust: exact;
		-ms-print-color-adjust: exact;
		print-color-adjust: exact;
		width: 0.2em;
		height: 0.5em;
		margin-left: 1.05em;
		margin-right: 1em;
	}
}

body *:not(input) {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
}