/**********************
 * for seesaw portion *
 **********************/
 .diy-bg{
 	background-color: #90aeff;
 }
 .bg{
	background-color: #ffe6eb;
 }
 .background{
 	position: absolute;
 	height: 100%;
 	width: 100%;
 	left: 0%;
 	top: 0%;
 }
 .cen-text{
 	position: absolute;
 	width: 100%;
 	top: 45%;
 	font-size: 5.2vw;
  font-family: ABeeZee;
 }
 .text{
	 position: absolute;
	width: 100%;
	height: 30%;
	background-color: #5b9bd5;
	top: 32%;
	padding: 4% 4%;
	color: #fff;
	font-size: 3.2vw;
	font-family: Poppins;
 }
 .top-text-1{
	 position: absolute;
	width: 100%;
	top: 0%;
	height: 18%;
	background-color: #5b9bd5;
	padding: 2% 2%;
	color: #fff;
	font-family: Poppins;
  display: none;
 }
 .bottom-texts{
	position: absolute;
	width: 90%;
	top: 23%;
	height: 76%;
	background-color: #2578b2;
	left: 5%;
	border-radius: 4em;
  display: none;
 }
 .title{
	 position: absolute;
	width: 100%;
	top: 2%;
	color: #fff;
	font-size: 2.2vw;
	font-family: Poppins;
 }
 .bottom-list{
   position: absolute;
  top: 15%;
  width: 100%;
  color: #f7ffdf;
  height: 80%;
  font-family: Poppins;
}
.text-list-2{
top: 4%;
}
.text-list-3{
top: 8%;
}
.text-list-4{
  top: 12%;
  padding: 2%;
  color: #fff;
}
.boy{
  position: absolute;
  width: 10%;
  z-index: 1;
  top: 37%;
  left: 5%;
  display: none;
}
.marble{
  position: absolute;
  z-index: 1;
  width: 8%;
  top: 56%;
  left: 14%;
  display: none;
}
.text-hidden{
  display: none;
}
.highlighttext{
  font-weight: bold;

}
.text-1{
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  background-color: #5b9bd5;
  padding: 2% 2%;
  color: #fff;
  font-family: Poppins;
  animation: slideup 2s forwards 3s linear;
}
@keyframes slideup {
  100% {
      top: 9%;
  }
}
.box-texts{
 position: absolute;
 width: 90%;
 top: 23%;
 height: 76%;
 background-color: #2578b2;
 left: 5%;
 border-radius: 4em;
 display: none;
}
.text-list{
position: absolute;
 top: 8%;
 width: 100%;
 color: #f7ffdf;
 height: 90%;
 font-family: Poppins;
 padding: 2%;
}
.list-1{
  color: #fff;
}
.list-2{
  padding: 0% 15%;
}
.list-4{
/* padding: 2%; */
}

.highlight-text{
  font-weight: bold;
  font-size: 3.5vw;
  color: #ffe599;
}
.que-box{
  position: absolute;
  width: 90%;
  top: 2%;
  height: 96%;
  background-color: #2578b2;
  left: 5%;
  border-radius: 4em;
}
.que-list{
  position: absolute;
   top: 8%;
   width: 100%;
   height: 90%;
   color: #fff;
   font-family: Poppins;
}
.que-list-2{
  padding: 2%;
}
.que-list-3{
  padding: 0% 15%;
}
.bottom-text{
  top: 40%;
width: 100%;
padding: 5% 11%;
color: #f7ffdf;
display: none;
}
.highlight{
   color: #f7ffdf;
   font-weight: bold;
}
.imagestartpos {
  position: absolute;
  width: 14%;
  display: none;
  left: 75%;
  top: 19%;
  transform: translateY(-7%);
}
.optionsdiv{
  position: absolute;
  width: 56%;
  height: 30%;
  top: 49%;
  display: flex;
  flex-wrap: wrap;
  left: 31%;
  justify-content: space-around;

}
.optionscontainer{
  position: relative;
  width: 40%;
  background-color: #ffcd53;
  padding: 5%;
  border-radius: 1em;
  color: #000;
  height: 0%;
  cursor: pointer;
}
.opti.corrects{
	pointer-events: none;
	background-color: #98C02E;
	border: 0.5vmin solid #DEEF3C;
	color: white;
}
.opti.incorrect{
	pointer-events: none;
	background-color: #FF0000;
	border: 0.5vmin solid #980000;
	color: white;
}
.optionscontainer p{
  position: absolute;
  top: 50%;
  transform: translate(-50%,-50%);
  left: 50%;
}
.tick{
  left: 100%;
}
.title-text{
  position: absolute;
 width: 100%;
 top: 0%;
 height: 18%;
 background-color: #5b9bd5;
 padding: 3% 2%;
 color: #fff;
 font-family: Poppins;
}
.list-a{
  position: absolute;
  text-align: left;
  left: 15%;
  width: 25%;
}
.list-b{
  left: 60%;
}
.list-c{
  top: 35%;
  display: none;
}
.list-d{
  top: 40%;
  display: none;
}
.newcss {
  top: 50%;
  width: 90%;
  color: #f7ffdf;
  display: none;
  left: 5%;
}
 @media(min-aspect-ratio:4/3){
 	.text, .top-text-1, .title,.bottom-list,.text-1,.text-list,.list-5,.que-list{
 		font-size: 3vh;
 	}
  .title-text{
    font-size: 4.5vh;
  }
.text-list-3{
  font-size: 2.5vh;
}
.cen-text{
  font-size: 6.5vh;
}

}


















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