body:lang(np), body:lang(np) * {
	font-family: laila !important;
  }

.bg-green{
	background-image: radial-gradient(#DBF7E9 40%, #A7EBCD 60%);
}
.cover_green{
    background-color: #9dd1c9;
}

.hidden{
	opacity: 0;
}

.chaptername{
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translateX(-50%);
    background: #c1d6e0;
    /* border-radius: 20px; */
    width: 100%;
    height: 10%;
    padding-top: 1%;
    font-weight: 600  ;
    box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.75);
    -webkit-box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.75);
}
.watertxt{
    position: absolute;
    top: 58%;
    left: 48%;
    color: #43435e;
    font-weight: 600;
}

.background{
    position: absolute;
    top: 0%;
    left: 0%;
	width: 100%;
	height: 100%;
}
.char1,.glass1,.jug1,.girl1,.girl2,.girl3{
	position: absolute;
    top: 57%;
    left: 9%;
    height: auto;
    width: 9%;
}
.glass1{
	border-radius: 18px;
    left: 48%;
    top: 53%;
    width: 4%;
}
.jug1{
	left: 54%;
    top: 46%;
}
.girl1{
    display: none;
    border-radius: 50%;
    background: #c9eeff;
    width: 12%;
    top: 4%;
    left: 1%;
    border: 5px solid #86c8bc;
}
.girl2,.girl3{
    display: block;
    width: 16%;
    top: 42%;
    left: 66%;
}
.girl3{
    width: 13%;
    top: 41%;
    left: 50%;
}

.move_glass{
	animation: moving_glass 3s forwards;
}
@keyframes moving_glass{
	from{
		background-color: #c9eeff;
		left: 41%;
		top: 36%;
		width: 22%;
		/* padding: 2%; */
	}
	to{
		left: 16%;
		background-color: #c9eeff;
		top: 38%;
		width: 26%;
		/* padding: 2%; */
		box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.5);
		-webkit-box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.5);
		-moz-box-shadow:0px 4px 4px 0px rgba(0,0,0,0.5);

	}
}

.spBox_1,.spBox_2,.sp_ques,.sp_ques1,.sp_corr,.sp_3,
.sp_4,.water_prop1,.water_prop2,.water_prop3,.water_prop4{
	top: 24%;
    left: 46%;
    width: 37%;
    height: 35%;
    display: none;
    padding: 4% 4%;
}
.spBox_2{
	top: 22%;
    left: -2%;
    width: 44%;
    height: 42%;
    padding: 6% 5%;
}
.sp_ques{
	top: 4%;
    left: 34%;
    width: 32%;
	height: 30%;
}
.sp_ques1{
    top: 12%;
    left: 39%;
    width: 24%;
    height: 24%;
}
.sp_corr{
	top: 6%;
    left: 12%;
    width: 29%;
	display: none;
}
.sp_corr>p{
	left: 62%;
}
.sp_3,.sp_4{
	display: none;
    width: 36%;
    top: 10%;
    left: 58%;
}
.sp_4{
    left:38%;
}

.water_prop1{
    top: 18%;
    left: 2%;
    width: 28%;
    height: 32%;
    padding: 0%;
}
.water_prop2{
    top: 56%;
    left: 0%;
    width: 26%;
    height: 40%;
}
.water_prop3{
    top: 18%;
    left: 70%;
    width: 26%;
}
.water_prop4{
    top: 56%;
    left: 70%;
    width: 26%;
    height: 26%;
}
.water_prop2>p,.water_prop3>p{
    position: relative;
    top: 52%;
}

.optmainblk{
    position: absolute;
    top: 100%;
    left: 16%;
    height: 11%;
    width: 70%;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.optdiv{
    cursor: pointer;
	border-radius: 8px;
    background-color: #c9eeff;
    width: 35%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
	box-shadow: 0px 2px 6px 2px rgb(77 124 143);
    -webkit-box-shadow: 0px 2px 6px 2px rgb(77 124 143);
    -moz-box-shadow: 0px 2px 6px 2px rgb(77 124 143);
}
.opttxt{
	color: #434343;
	font-weight: 500;
	
}
.optdiv:hover{
	transform: scale(1.11);
}
.jhilimili_gif{
    position: absolute;
    top: 0%;
    width: 100%;
    height: 126%;

}
.mainhintblock1,.mainhintblock2{
	position: absolute;
    height: 74%;
    width: 80%;
    top: 100%;
    left: 10%;
	background-color: #c9eeff;
	border-radius: 22px;
    box-shadow: 0px 2px 0px 2px #9dd1c9;
    -webkit-box-shadow: 0px 2px 0px 2px #9dd1c9;
    -moz-box-shadow: 0px 2px 0px 2px #9dd1c9;
}
.hintblock{
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: column;
	height: 100%;
}
.hinttxt{
	border-bottom: 3px solid #86c8bc;
    width: 90%;
}
.hintimg{
	width: 26%;
}
.hintimg_cow{
    width: 50%;
}
.hintimgtoilet{
    width: 10%;
}
.hintimg_bath{
    width: 35%;
}
.cross-ico,.batti_icon,.batti_icon2{
	position: absolute;
    top: 0%;
    width: 7%;
    left: 95%;
	z-index: 9;
}
.cross-ico:hover,.batti_icon:hover,.batti_icon2:hover{
	cursor: pointer;
}
.batti_icon,.batti_icon2{
	border-radius: 50%;
    /* border: 3px solid #134f5c; */
    left: 90%;
    top: 4%;
	display: none;
}



.textInSp{
    width: 85%;
    left: 50%;
    top: 44%;
    transform: translate(-50%,-50%);
    text-align: center;
}
.pg4str1txt{
	padding: 1%;
    position: absolute;
    top: 0%;
    left: 21.5%;
    color: #595959;
    background: #cfe2f3;
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
	box-shadow: 0px 3px 8px 0px rgba(0,0,0,0.75);
    -webkit-box-shadow: 0px 3px 8px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 3px 8px 0px rgba(0,0,0,0.75);
}
.hand1{
    position: absolute;
    top: 48%;
    left: 52%;
    width: 4%;
    z-index: 9;
    display: none;
}
 .hand:hover{
	cursor: pointer;
} 

.inverted{
	transform: rotateY(180deg);
}

/* new css */
.water_use_1,.water_use_2,.water_use_3,
.water_use_4,.water_use_5,.water_use_6,
.water_use_7,.water_use_8{
    position: absolute;
    top: 48%;
    left: 51%;
    width: 9%;
    height: auto;
}
.water_use_1{
    transform: rotateY(180deg);
}
.water_use_2{
    top: 76%;
    left: 89%;
    width: 3%;
    transform: rotateY(180deg);
    z-index: 9;
}
.water_use_3{
    top: 62%;
    left: 19%;
    width: 3%;
}
.water_use_4{
    top: 74%;
    left: 86%;
    width: 14%;
    transform: rotateY(180deg);
}
.water_use_5{
    top: 58%;
    left: 42%;
    width: 20%;
}
.water_use_6{
    top: 66%;
    left: 26%;
    width: 11%;
 
}
.water_use_7{
    top: 50%;
    left: 71%;
    width: 11%;
}
.water_use_8{
    top: 48%;
    left: 24%;
    width: 7%;
    transform: rotateY(180deg);
}
.qn_txt{
    background-color: #86c8bc;
    width: 100%;
    position: absolute;
    top: 100%;
}


.muna{
    position: absolute;
    top: 60%;
    transform: translateY(-50%);
    width: 21%;
    right: 5%;
}
.muna-front{
 left: 46%;
}
.boy{
    position: absolute;
    width: 13%;
    top: 33%;
    left: 64%;
}
.boy-front{
    width: 13%;
    top: 35%;
    left: 34%;
}
.tap{
	position: absolute;
    left: 0%;
    top: 60%;
    width: 30%;
    transform: translateY(-50%);
}

.fadein{
	animation: fadeIn 1s linear forwards;
}
@keyframes fadeIn{
	0%{opacity: 0;}
	100%{ opacity: 1;}
}
.zoomIntoChar{
	animation: zoomToChar 2s linear forwards;
}
@keyframes zoomToChar{
	100%{    transform: scale(1.7, 1.7); top: 24%;}
}



@media screen and (min-aspect-ratio: 4/3) {
	.fs-3{
		font-size: 3vh;	
	}
	.fs-4{
		font-size: 4vh;
	}
	.fs-5{
		font-size: 5.5vh;
	}
	.fs-7{
		font-size: 7vh;
	}
	.fs-10{
		font-size: 10vh;
	}
}

@media screen and (max-aspect-ratio: 4/3) {
	.fs-3{
		font-size: 2vw;	
	}
	.fs-4{
		font-size: 2.5vw;
	}
	.fs-5{
		font-size: 3.1vw;
	}
	.fs-7{
		font-size: 4vw;
	}
	.fs-10{
		font-size: 7vw;
	}
}