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

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

.background{
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
}

.spBox_1{
    top: 14%;
    left: 24%;
    width: 46%;
    height: 36%;
}

.spSmall{
	height: 12%;
	width: 33%;
}

.spMedium{
    top: 47% !important;
}

.sp_1{
	width: 35%;
	height: 18%;
	top: 40%;
	left: 24%;
	transform: translate(-59%,-57%);
	padding: 2% 5% 2% 1%;
	font-family: dekko;
 }

.textInSp{
    width: 85%;
    left: 50%;
    top: 44%;
    transform: translate(-50%,-50%);
    text-align: center;
}

.muna{
    position: absolute;
    width: 30%;
    top: 46%;
    left: 47%;
}
.boy{
    position: absolute;
    width: 17%;
    top: 46%;
    left: 36%;
}
.clkHereTxt{
	position: absolute;
    top: 50%;
    left: 8%;
}

.grnColor{
	color: #0097A7;
}

.handGif{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 5%;
}
.handGif:hover{
	cursor: pointer;
}

.workDetailContainer{
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
	display: none;
}

.detailImg{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 38%;
    border: 3px solid #FFE599;
    background: #ffffff;
    border-radius: 100%;
}

.detailInstruction{
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    padding: 1%;
    background-color: #5BA8AA;
    color: #ffffff;
}

.waterWorkTxt{
	position: absolute;
    top: 84%;
    padding: 1%;
    background-color: #ffffff;
    border: 4px solid #6FA8DC;
    border-radius: 11px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 17%;
}


.hidn{
	opacity: 0;
}

.fadeIn{
	animation: fadeIn 1s linear forwards;
}
@keyframes fadeIn{
	0%{opacity: 0;}
	100%{opacity: 1;}
}

.lpShow{
    position: absolute;
    width: 15%;
    border: 3px solid #FFE599;
    background: #ffffff;
    border-radius: 100%;
}
.im_1{
	top: 50%;
	transform: translateY(-50%);
	left: 5%;
}
.im_4{
	top: 50%;
	transform: translateY(-50%);
	right: 5%;
}
.im_2, .im_3{
	top: 25%;
	transform: translateY(-50%);
}
.im_2{
	left: 30%;
}
.im_3{
	right: 30%;
}
.im_5, .im_6, .im_7{
	top: 80%;
	transform: translateY(-50%);
}
.im_7{
	left: 20%;
}
.im_5{
	right: 20%;
}
.im_6{
	right: 45%;
}
.end-mid-txt,.end-mid-top-txt{
	position: absolute;
	top: 54%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #6A6666;
}
.end-mid-top-txt{
	top: 20%;
}


.imgCont-last{
    position: absolute;
    top: 55%;
    height: 40%;
    width: 100%;
    left: 0%;
    display: flex;
    justify-content: space-evenly;
    transform: translateY(-50%);
}
.flxImg{
    width: 25%;
    animation: blink 2s linear infinite;
    border: 5px solid #FFE599;
    border-radius: 100%;
}
@keyframes blink{
	50%{transform: scale(1.05, 1.05);}
	100%{transform: scale(1, 1);}
}

.muna-small-right{
	position: absolute;
    width: 21%;
    top: 63%;
    left: 77%;
}
.boy-small-right{
    position: absolute;
    width: 13%;
    top: 63%;
    left: 68%;
}
.sp-right{
    top: 38%;
    left: 73%;
    width: 28%;
    height: 28%;
}
.inverted{
	transform: rotateY(180deg);
}
.bgtoslide{
	position: absolute;
    left: 0%;
    width: 500%;
    height: 100%;
}
.slide-left-anim{
	animation: heliViewSlide 15s linear forwards;
}
@keyframes heliViewSlide{
	100%{left: -400%;}
}
.helicoptor{
    position: absolute;
    width: 20%;
    left: 8%;
    top: 38%;
	animation: updwn 1s linear infinite;
}
.sp-Helicoptor{
	top: 5%;
    left: 40%;
}
.hc-left{
	left: -25%;
}
.hc-center{
	left: 33%;
}
.hc-left-s2{
    position: absolute;
    width: 26%;
    left: -30%;
    top: 38%;
}
.h-ltr{
    animation: mvh 15s linear forwards;
}
@keyframes mvh{
    0%{left: 0%;}
    100%{left: 100%;}
}
.zoomToHeli{
    animation: zoomHeli 4s linear forwards;
}
@keyframes zoomHeli{
   100%{ transform: scale(1.8);   left: 30%;}
}
.flyHeliAway{
    animation: flyAway 4s linear 1s forwards;
}
@keyframes flyAway{
    100%{left: 80%;}
}
/* .hc_UpDown{
	animation: updwn 1s linear infinite;
} */
@keyframes updwn{
	0%{transform: translateY(1%);}
	50%{transform: translateY(-1%);}
	100%{transform: translateY(1%);}
}

/* .animatToPond{
	animation: animToPond 3s linear forwards;
}
@keyframes animToPond{
	100%{ left: 33%; }
} */

.hg_river{
	top: 66%;
    left: 44%;
}
.hg_tap{
    top: 83%;
    left: 56%;
}
.hg_well{
	top: 83%;
    left: 72%;
}
.hg_kuwa{
	top: 68%;
    left: 72%;	
}
.hg_stoneTap{
    top: 58%;
    left: 57%;
}
.hg_tubewell{
	top: 60%;
    left: 62%;
}
.hg_rain{
    top: 32%;
    left: 79%;
}

@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;
	}
}

@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;
	}
}