/**********************
 * for seesaw portion *
 **********************/
.diy-bg{
	background-color: #90aeff;
}
.background{
	position: absolute;
	height: 100%;
	width: 100%;
	left: 0%;
	top: 0%;
}
.diy-text{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	font-size: 4.5vw;
	font-family: ABeeZee;
}
.sp-1{
	position: absolute;
	width: 30%;
	height: 30%;
	top: 5%;
	left: 26%;
	font-family: Poppins;
}
.jug{
	position: absolute;
	top: 55%;
	left: 50%;
	width: 15%;
}
.yellowline{
    position: absolute;
    top: 60%;
    width: 10%;
    left: 41%;
}
.tex{
	position: absolute;
	top: 58%;
	left: 34%;
	color: #FFFF00;
	font-family: Arial;
}
.highlighttext{
	color: #ff0000;
	font-weight: bold;
}
.highlight-text{
	color: #000;
	/* font-weight: bold; */
	font-size: 4.5vw;
}
.jug1{
	position: absolute;
	top: 13%;
	left: 40%;
	width: 30%;

}
.yellowline1{
	position: absolute;
	width: 9%;
	top: 22%;
	left: 33%;
}
.tex1{
	position: absolute;
	top: 20%;
	left: 26%;
	color: #FFFF00;
}
.tex2{
	position: absolute;
	bottom: 10%;
	left: 0%;
	color: #fff;
	font-size: 3.2vw;
	width: 100%;
	font-family: Poppins;
}
.whiteline{
    position: absolute;
    top: 60%;
    width: 10%;
    left: 41%;
}
.whiteline1{
	position: absolute;
    width: 9%;
    top: 73%;
    left: 43%;
}
.whitetext{
	position: absolute;
	top: 58%;
	left: 34%;
	color: #FFFFFF;
	font-family: Arial;
}
.whitetext1{
	position: absolute;
	top: 71%;
	left: 36%;
	color: #FFFFFF;
		font-family: Arial;
}
.whitetext2{
	position: absolute;
	top: 20%;
	left: 26%;
	color: #FFFFFF;
}
.whiteline2{
	position: absolute;
	width: 10%;
	top: 48%;
	left: 34%;
}
.whitetext3{
	position: absolute;
	top: 46%;
	left: 28%;
	color: #FFFFFF;
}
.hint-box{
	position: absolute;
	top: 67%;
	left: 68%;
	width: 7%;
	background-color: #974eaa;
	border-radius: 15%;
	color: #ffffff;
	border:2px solid #df73fa;
	z-index: 1;
	font-family: Sniglet;
}
.hint-box:hover{
	background-color: #e7b1fa;
	border:4px solid #df73fa;
}
.hidden-box {

    position: absolute;
    width: 30%;
    top: 70%;
    background-color: #fff2cc;
    border: 4px solid #df73fa;
    left: 68%;
    padding: 1%;
    display: none;
    font-family: Sniglet;
    font-size: 1.5vw;

}
.color-highlight{
	font-weight: bold;
}
.cen-text{
	position: absolute;
	width: 100%;
	top: 45%;
	font-size: 5.2vw;
	font-family: ABeeZee;
}
.text-1{
	position: absolute;
	width: 100%;
	top: 90%;
	left: 8%;
	color: #fff;
	font-family: Poppins;
}
.tablecls{
	position: absolute;
  top: 17%;
  width: 100%;
  height: 82%;

	background-color: #feffdf;
}
.tablecls th{
	width:10%;
	height:12%;
	text-align: center;
	background-color: #1f4e79;
	color: #FFF;
	font-size: 2.2vw;
	  border: 3px solid #000000;
}
.tablecls td{
    width:10%;
    height:12%;
    border:3px solid #000;
		/* font-weight: bold; */
	font-size: 2.2vw;
	text-align: center;
}
/* .tablecls td p{
    padding-left:40%;

} */
/* .tablecls td:hover{
    transform: scale(1.03);
    cursor: pointer;
} */
.top-text-block{
	position: absolute;
  width: 100%;
  /* height: 15%; */
  color: #fff;
	font-size: 5.2vw;
}
.top-text{
	position: absolute;
	width: 100%;
	font-weight: bold;
	padding: 2% 2%;
}
.symbol{
	font-family: bold;
}
@media(min-aspect-ratio:4/3){
	.tex2, .cen-text, .top-text-block,.diy-text{
		font-size: 6.5vh;
	}
	.text1{
		font-size: 2.2vh;
	}
}


/**************************
 * for seesaw portion end *
 **************************/ */