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

.imageblock, .textblock {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.squirrelisteningimg {
    position: absolute;
    width: 16%;
    top: 55%;
    left: 65%;
    z-index: 119;
}
.rhinoimgdiv {
    position: absolute;
    z-index: 119;
    top: 48%;
    width: 16%;
    left: 24%;
}
.playtime {
    position: absolute;
    font-size: 3vw;
    z-index: 999;
    font-family: sniglet;
    color: white;
    left: 53%;
    top: 60%;
    transform: translateX(-50%);
}
.toptxt{
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  padding: 2%;
  background: #00BCD4;
  font-family: sniglet;
  z-index: 100;
  color: #fff;
  font-size: 4vh;
}

.sp-1 {
  width: 40%;
  height: 64%;
  top: -13%;
  left: 26%;
  font-size: 1.8vw;
  padding: 13% 3% 15% 2%;
}
.speechbox > p {
  position: absolute;
  width: 90%;
  left: 5%;
  top: 50%;
  transform: translateY(-50%);
}

.background{
  position: absolute;
  top: 0%;
  left: 0%;
  height: 100%;
  width: 100%;
}
.group1{
  position: absolute;
  top: 4%;
  left: 25%;
  height: 55%;
  width: 23%;
}
.group2{
  position: absolute;
  top: 42%;
  left: 44%;
  height: 55%;
  width: 30%;
}
.group3{
  position: absolute;
  top: 39%;
  left: 73%;
  height: 31%;
  width: 30%;
}
.groupImg{
  position: absolute;
  width: 60%;
  bottom: 15%;
}
.img1{
  left: 0%;
}
.img2{
  right: 0%;
}
.pot1{
  width: 70%;
}
.cup1{
  width: 33%;
}
.bucket1{
  width: 70%;
}
.bowl1{
  width: 24%;
  right: 28%;
  bottom: 30%;
}
.glass1{
  width: 16%;
  left: 39%;
  bottom: 45%;
}
.jug1{
  width: 32%;
  bottom: 15%;
  left: 69%;
}


/*cup and pot animation part css*/

.utensil{
  position: absolute;
  bottom:20%;
  width: 11%;
  z-index: 10;
}
.pot{
  left: 18%;
  width: 14.7%;
  z-index: 20;
  bottom: 13%;
}
.pt{
  z-index: 25;
}

.cupGif, .cup{
  position: absolute;
  bottom: 5%;
  right: 39%;
  width: 35%;
}
.cupGif{
  z-index: 11;
}
.cup{
  z-index: 12;
}
.gf{
  transform: rotateY(180deg);
  left: 24%;
  width: 26%;
  bottom: 9%;
}
.potToCupAnim{
  animation: pottocup 3s linear forwards;
}
.overflow{
  position: absolute;
  width: 20%;
  top: 46%;
  left: 32%;
  z-index: 15;
}
.ovrFlwJug{
  position: absolute;
  width: 20%;
  top: 47%;
  left: 38%;
  z-index: 15;
}
.uovrFlwBwl{
  position: absolute;
  width: 17%;
  top: 56%;
  left: 21%;
  z-index: 15;
}
@keyframes pottocup {
  100%{left: 27%;bottom: 46%;transform: rotate(77deg);}
}
.cupToPotAnim{
  animation: cuptopot 3s linear forwards;
}
@keyframes cuptopot {
100%{bottom: 20%;right: 69%;width: 35%;transform: rotate(-87deg);}
}
.wtrDrpFrmCup{
  width: 32%;
  bottom: 5%;
  right: 55%;
}
.fade_in{
  animation: fadein 2s linear 1.6s forwards;
}
@keyframes fadein {
  100%{opacity: 1;}
}
.fadeout{
  animation: fadeOut 4s linear 1.6s forwards;
}
@keyframes fadeOut {
  100%{opacity: 0;}
}

/*cup  and pot's end*/

/* buckret and jug starts*/

.bucket{
  right: 67%;
  width: 17%;
  bottom: 11%;
  z-index: 14;
}
.jug{
  position: absolute;
  width: 22%;
  bottom: 6%;
  right: 39%;
  z-index: 14;
}
.wdFrmBkt{
  position: absolute;
  width: 28.7%;
  transform: rotateY(-180deg);
  left: 31.5%;
  top: 31.5%;
}
.bktToJugAnim{
  animation: buckettojug 3s linear forwards;
}
@keyframes buckettojug {
  100%{right: 51.4%;bottom: 41%;transform: rotate(90deg);}
}

.wdFrmJug{
  position: absolute;
  width: 22%;
  top: 33%;
  right: 61%;
}
.bktflGif{
  right: 59.8%;
  width: 27.49%;
  bottom: 4.9%;
}
.jugToBktAnim{
  animation: jugtobtk 3s linear forwards;
}
@keyframes jugtobtk {
  100%{bottom: 31.9%;right: 63%;transform: rotate(-92deg);}
}
/*bucket and jug ends*/

/*bowl and glass starts*/

.bowl{
  position: absolute;
  top: 35%;
  width: 26%;
  left: 16%;
  z-index: 14;
}
.glass{
  width: 6.1%;
  right: 53.2%;
  top: 68.9%;
  z-index: 16;
}
.wdFrmGls{
  position: absolute;
  width: 30%;
  top: 26%;
  left: 16%;
}
.glsToBwlAnim{
  animation: glstobwl 3s linear forwards;
}
@keyframes glstobwl {
  100%{right: 64%;top: 38%;transform: rotate(-90.5deg);}
  }
.bwlFil{
  position: absolute;
  top: 35%;
  left: 16%;
  width: 26%;
}
.wdFrmBwl{
  position: absolute;
  width: 26%;
  transform: rotateY(180deg);
  top: 21.6%;
  left: 28%;
}
.glsFil{
  width: 30.4%;
  top: 20%;
  right: 39%;
  top: 23.6%;
}
.bwlToGlsAnim{
  animation: bwltogls 3s linear forwards;
}
@keyframes bwltogls {
  100%{top: 8%;

left: 40%;
transform: rotate(78deg);}
}
/*bowl and glass ends*/

.hg_lht_anim{
  animation: highlightobj 1s linear backwards;
}
@keyframes highlightobj {
  100%{transform:scale(1.1);}
}

.playagain, .mainmenu, .learnagain {
  width: 30%;
  top: 65%;
  position: absolute;
  font-family: sniglet;
  font-size: 2vw;
  cursor: pointer;
  color: #fff;
  border-radius: 3em;
  padding: 2%;
  background: #e06666;
  right: 3%;
  z-index: 10;
}
.playagain{
  top:10%;
}
 .mainmenu{
   top: 25%;
 }
 .learnagain{
   top: 40%;
 }
.playagain:hover, .mainmenu:hover,.learnagain:hover{
  background: #F8901F;
  color: white;

}
 .hand{
   position: absolute;
    width: 5%;
    top: 39%;
    left: 34%;
    z-index: 10;
 }
 .s4_hand{
   top: 75%;
  left: 57%;
 }
 .s6_hand{
   top: 49%;
  left: 85%;
 }
  .hand:hover{
    cursor: pointer;
  }
  .cupClick{
    position: absolute;
    top: 74%;
    left: 37%;
    width: 9%;
    height: 15%;
    z-index: 20;
  }
  .jugClick{
    position: absolute;
    top: 67%;
    left: 42%;
    width: 11%;
    height: 23%;
    z-index: 20;
  }
  .bowlClick{
    position: absolute;
    top: 78%;
    left: 23%;
    width: 9%;
    height: 12%;
    z-index: 20;
  }

  .utensil:hover, .cupClick:hover, .jugClick:hover, .bowlClick:hover, .hoverClass:hover{
    cursor:pointer;
  }
  .lastMsg{
    position: absolute;
    top: 0%;
    left: 2%;
    padding: 2%;
    color: #304ffe;
    font-family: sniglet;
    z-index: 10;
  }

  [class^=lstPgImg]{
    position: absolute;
    bottom: 10%;
    width: 20%;
  }
  .lim-1{
    left: 8%;
  }
  .lim-2{
    left: 24%;
    width: 27%;
    bottom: 4%;
  }
  .lim-3{
    left: 45%;
    width: 6%;
  }
  .lim-4{
    left: 47%;
    width: 32%;
    bottom: 4%;
  }

  .highlightAnm{
    animation: hghlght 2s linear forwards;
  }
  @keyframes hghlght {
    50%{
      transform: scale(1.1);
    }
    100%{
      transform: scale(1);
    }
  }
@media (min-aspect-ratio: 4/3){
	.sp-1,.sp-2{
		font-size: 3.5vmin;
	}
  .question_div{
    font-size: 4vmin;
  }
  .option2,.option1{font-size: 3vmin;}

  .top_text{
    font-size: 6vmin;
  }
  .toptxt{
    font-size: 4vh;
  }
  .lastMsg{
    font-size: 5vh;
  }
  .playagain, .mainmenu, .learnagain{
    font-size: 4vh;
  }
}
.correct, .incorrect {
    position: absolute;
    z-index: 10;
    width: 5%;
    top: 30%;
    left: 51%;
}
@media (max-aspect-ratio: 4/3){
  .toptxt{
    font-size: 2vw;
  }
}