.bg_full {
    position: absolute;
    top: 0;
    width: 100%;
    left: 0;
}
/* .textblock{
  width: 100%;
  height: 100%;
} */
.middle_text {

    position: absolute;
    font-family: sniglet;
    color: black;
    background: rgba(255, 255, 255,.5);
    left: 0;
    z-index: 10;
    width: 100%;
    font-size: 5vmin;
    text-align: center;
    margin-top: 6%;

}
 .nextBtn {
	display: none;
	position: relative;
	z-index: 1000;
	bottom: 0%;
	right: 0%;
	width: 7%;
	height: 10%;
}
.imageblock{
	width: 100%;
	height: 100%;
}
.top-text {
    position: absolute !important;
    font-family: sniglet;
    color: black;
    width: 60%;
    left: 5%;
    font-size: 2.5vw;
    margin-top: 4%;;
    padding: 1%;
    border-radius: 2vmin;
}
.speaker_icon {
    position: absolute;
    left: 46%;
    top: 33%;
    color: white;
    font-size: 2vw;
    display: none;
}
.deergif {
	position: absolute;
	height: 41%;
	width: 26%;
	top: 40%;
	left: 18%;
}
.duckgif {
	position: absolute;
	height: 16%;
	width: 9%;
	top: 62%;
	left: 60%;
  transform: scaleX(-1);
}
.piggif {
	position: absolute;
	height: 38%;
	width: 18%;
	top: 40%;
	left: 30%;
}
.parrotgif {
  position: absolute;
  height: 18%;
  width: 10%;
  top: 60%;
  left: 60%;
  opacity:0;
  animation: flyout 5s ease-in infinite;

}
.human {
	height: 92% !important;
	width: 54%;
	top: -5% !important;
	left: 50% !important;
}
.deer {
	height: 100% !important;
	width: 110%;
	top: -21% !important;
	left: 50% !important;
}
.lamb {
	height: 90% !important;
	width: 81%;
	top: -3% !important;
	left: 46% !important;
  filter: contrast(-3);
}
@keyframes flyout{
  0% {
    left: -10%;
    top: 10%;
    opacity:1;
  }
  100% {
    left: 100%;
    top: 29%;
    opacity:1;
  }
}
@keyframes flyoutbee{
  0% {
    left: -10%;
    top: 10%;
    opacity:1;
  }
  50%{
    left: 100%;
    top: 29%;
    opacity:1;
    transform: scaleX(-1);
  }
  51%{
    left: 100%;
    top: 29%;
    opacity:1;
    transform: scaleX(1);
  }
  100% {
    left: -10%;
    top: 10%;
    opacity:1;
    transform: scaleX(1);
  }
}

.lambgif {
	position: absolute;
	height: 37%;
	width: 25%;
	top: 43%;
	left: 20%;
}
.beegif {
	position: absolute;
	height: 8%;
	width: 5%;
	top: 60%;
	left: 60%;
	animation: flyoutbee 13s ease-in infinite;
	transform: scalex(-1);
}
.humangif {
	position: absolute;
	height: 33%;
	width: 9%;
	top: 46%;
	left: 30%;
  animation: walk 20s linear infinite;
}
.ladybuggif {
	position: absolute;
	height: 7%;
	width: 5%;
	top: 61%;
	left: -4%;
	transform: rotatez(52deg);
	animation: bugin 12s ease-in infinite;
}
.crowgif {
	position: absolute;
	height: 26%;
	width: 15%;
	top: 24%;
	left: 3%;
	transform: scaleX(-1);
	z-index: 199;
  opacity:0;
	animation: flyoutcrow 6s ease-in forwards;
}
@keyframes snakemotion {
  0%{
    left: 60%;
  }
  100%{
    left:0%;
  }
}
@keyframes flyoutcrow{
  0% {
    left: -10%;
    opacity:1;
  }
  100%{
    left: 80%;
    top: 6%;
    opacity:1;
  }
}
@keyframes walk{
  0% {
    left: -10%;
    opacity:1;
  }
  50%{
    left: 100%;
    opacity:1;
    transform: scaleX(1);
  }
  51%{
    left: 100%;
    opacity:1;
    transform: scaleX(-1);
  }
  100% {
    left: -10%;
    opacity:1;
    transform: scaleX(-1);
  }
}
@keyframes bugin {
  0%{
    left: -4%;
  }
  100%{
    left: 100%;
    top:10%;
  }
}
.snakegif {
	position: absolute;
	height: 10%;
	width: 24%;
	top: 68%;
	left: 60%;
	animation: snakemotion 7s linear forwards;
}
.lower {
    position: absolute;
    top: 73%;
    font-family: sniglet;
    font-size: 2vw;
    width: 100%;
}
.image {
    position: absolute;
    height: 27%;
    top: 34%;
    left: 28%;
    cursor: pointer;
    z-index: 99999;
}
.optionclass {
    position: absolute !important;
    display: inline-block;
    background: #EA9FB8;
    padding: .7%;
    border-radius: 2vmin;
    color: black;
    cursor: pointer;
    border: 1vmin solid #EA9FB8;
    z-index: 999;
    width: 12%;
}
.optionclass:hover{
	border:1vmin solid #E69138;
	background: #F6B26B;
}
.one,.two{
	z-index: 2 !important;
}
.opt1 {
    left: 7%;
}
.opt2 {
    left: 30%;
}
.opt3 {
    left: 53%;
}
.totalsequence{
	display: none;
}

.bg1{
    background: url("http://gituploads.olenepal.org/epaath_media/activity/grade1/science/animals_with_wings/images/playtime/bg1.png");
    background-size: 100% 100%;
}
.bluebg{
  background: #90E5FF;
}
.rhinoimgdiv {
    position: absolute;
    width: 15%;
    top: 60%;
    left: 21%;
}
.squirrelisteningimg {
    position: absolute;
    width: 16%;
    top: 61%;
    left: 70%;
}
.playtime-text {
  position: absolute;
  bottom: 27%;
  left: 40%;
  width: 27%;
  height: 22%;
  font-size: 2.4em;
  font-family: sniglet;
}
.blurout{
    animation: blurout 1s forwards;
    -webkit-animation: blurout 1s forwards;
}
@keyframes blurout{
    0% { opacity: 1; }

    100% {
        filter:blur(5px);
        opacity: 0; }
}
@-webkit-keyframes  blurout{
    0% { opacity: 1; }

    100% {
        filter:blur(5px);
        opacity: 0; }
}
.blurin{
    animation: blurin 1s forwards;
    -webkit-animation: blurin 1s forwards;
}
.monkeydialogue {
    position: absolute;
    font-family: sniglet;
    font-size: 2vw;
    top: 35%;
    left: 52% !important;
    padding: 1% !important;
    width: 45%;
    color: white;
}

[class*="template-dialougebox2-top"] {
    background: #46A900;
}
[class*="template-dialougebox2-top"]::before {
    border-top: 3.1vh solid #46A900;
}
[class*="template-dialougebox2-right-white"]::after {
    content:none;
}
@keyframes blurin{
    0%{ opacity: 0;
        filter:blur(5px);
    }
    100%{ opacity: 1; }
}
@-webkit-keyframes  blurin{
    0%{ opacity: 0;
        filter:blur(5px);
    }
    100%{ opacity: 1; }
}
@media (min-aspect-ratio: 4/3){
	.top-text{
		font-size: 5vmin;
	}
	.lower{
		font-size: 4.5vmin;
	}
  .monkeydialogue{
    font-size: 4vmin;
  }
}
.banana {
    position: absolute;
    width: 8%;
    left: 81%;
    z-index: 9999;
    top: 21%;

}
.colorchange{
    animation: colorchange 1s ease-in both infinite;
    -webkit-animation: colorchange 1s ease-in both infinite;
}
@keyframes colorchange{
    0%{
        color:black;
    }
    50%{
      color:green;
     }
     100%{
       color:black;
     }
}
@-webkit-keyframes  colorchange{
  0%{
      color:black;
  }
  50%{
    color:green;
   }
   100%{
     color:black;
   }
}
.zoominout{
  animation: zoominout 1s infinite both;
  -webkit-animation: zoominout 1s infinite both;
}

@keyframes zoominout{
    0%{
        transform:scale(1);
    }
    50%{
      transform:scale(1.2);
     }
     100%{
         transform:scale(1);
     }
}
@-webkit-keyframes  zoominout{
    0%{
      transform:scale(1);
    }
    50%{
      transform:scale(1.2);
    }
    100%{
        transform:scale(1);
    }
}
.front{
  z-index:9999 !important;
}
.positioned{
  width: 16%;

  left: 70%;

  top: 28%;

  height: 19%;
  opacity: 1 !important;
  animation: movemonkey 2s 1s forwards;
  }
@keyframes movemonkey {
    100%{
      left: 5%;
      top: 77%;
      width: 16%;
    }
}
.gotback{
  z-index: 1 !important;

}
.btnNavigationSong {
    width: 100%;
    height: 22%;
    top: 4%;
    z-index: 9999;
}
.mainMenuDiv {
    position: absolute;
    width: 24%;
    height: 85%;
    cursor: pointer;
    left: 25%;
    top: 91%;
}
.learnAgainDiv {
    position: absolute;
    width: 24%;
    height: 85%;
    cursor: pointer;
    left: 44%;
}
.playAgainDiv {
    position: absolute;
    width: 24%;
    height: 85%;
    cursor: pointer;
    left: 4%;
}
.mainMenuDiv:hover,.learnAgainDiv:hover,.playAgainDiv:hover{
  transform:scale(1.15);
  transition: .3s;
}
.clouds {
    position: absolute;
    width: 100%;
    left: 0;
    height: 100%;
    top: 0;
}
.playagaintext {
    z-index: 99;
    font-family: sniglet;
    top: 55%;
    font-size: 4.0vmin;
    width: 100%;
}

.optionblock {
	position: absolute;
	width: 22%;
	height: 41%;
	background: #fbe6ab;
	border-radius: 2vmin;
	align-content: center;
	top: 39%;
	left: 10%;
	cursor: pointer;
	z-index: 10;
}

.option_center_image {
  position: absolute;
  height: 65%;
  left: 50%;
  top: 12%;
  padding: 9%;
  transform: translateX(-50%);

}
.option_inside_text {
	position: absolute;
	bottom: 0;
	width: 100%;
	padding: 1%;
	background: #fff2cc;
	color: #a64d79;
	border-bottom-left-radius: 2vmin;
	border-bottom-right-radius: 2vmin;
	font-family: sniglet;
	font-size: 2.6vmin;
}
.option2 {

    left: 39%;

}