/*@font-face {*/
    /*font-family: sniglet;*/
    /*src: url("../../../../../../fonts/sniglet.ttf");*/
/*}*/
/*body {*/

    /*font-family: 'Sniglet !important';*/

/*}*/
/*.generalTemplateblock p {*/
    /*font-family: Sniglet !important;*/
/*}*/
.coverpage{
    width: 102%;
}
.ptime{
    position: absolute;
    width: 27%;
    height: 15%;
    top: 56%;
    left: 41%;
    color: white;
}
.background{
    position: absolute;
    width:102%;
}
.rhinodancingdiv{
    position: absolute;
    top: 49%;
    width: 15%;
    height: 35%;
    float: left;
    left: 20%;
}
.squirrelistening{
    position: absolute;
    top: 58%;
    width: 14%;
    height: 35%;
    float: left;
    left: 71%;
}

.bg{
    background-color: #fff2cc;
    background-size: 100% 100%;
}

.question{
    position: absolute;
    width: 100%;
    height: 15%;
    background-color: #e4ffe0;
}
.optiondiv{
    position: absolute;
    width: 15%;
    right: 0%;
    height: 85%;
    top: 15%;
    background-color: #faecc7;
}

.question1{
    position: absolute;
    width: 15%;
    height: 15%;
    right: 0%;
    top: 15%;
    background-color:#ffe599 ;
}


.containercls{
    position: absolute;
    z-index: 1;
    width: 85%;
    left: 0%;
    bottom: 0%;
    height: 40%;
    align-content: center;
}
.containercls img{
    position: absolute;
    max-width:13%;
    padding: 0.5%;
    /*transform: translateX(-50%);*/
}
.option{
    position: absolute;
    width: 9%;
    height: 15%;
    background-color: #5772e6;
    color: white;
    border-radius: 90% 90%;
    cursor: pointer;
    right: 5%;
}
.opt1{
    bottom: 52%;
}
.opt2{
    bottom: 35%;
}
.opt3{
    bottom: 18%;
}
.opt4{
    bottom: 1%;
}

.wrongans{
    background-color: #ff0000;
    color: black;
    border: 4px solid #af0000;
}
.correctans{
    background-color: #98c02e;
    color:white;
    border: 4px solid #deef3c;
}
.option:hover{
    background-color: #ffab40;
}
.correctwrongimg{
    width: 44%;
    left: 80%;
    bottom: 33%;
}
.avoid-clicks {
    pointer-events: none;
}
.frogsecond1{
    position: absolute;
    width: 8%;
    z-index: 1;
    top: 24%;
    left: 11%;
}
.frogthird1{
    position: absolute;
    width: 8%;
    z-index: 1;
    top: 24%;
    left: 47%;
}
.bg1{
    background-color: #6fd8dd;
    background-size: 100% 100%;
}
.fruit{
    position: absolute;
    width: 7%;
    right: 52%;
    height: 10%;
    top: 0%;
    z-index: 2;
}
.thread{
    position: absolute;
    width: 0%;
    right: 55.5%;
    height: 0%;
    top: 0%;
    z-index: 2;
    border: 2px solid white;
}
.sundari{
    width: 92%;
    height: 98%;
    bottom: 100%;
    left: 0%;
}
.sundarihas{
    position: absolute;
    width: 10%;
    bottom: 0%;
    height: 15%;
    color: white;
}
.sundarigot{
    position: absolute;
    width: 10%;
    bottom: 0%;
    height: 15%;
    color: white;
    left:20%;
}
.answer{
    position: absolute;
    width: 10%;
    bottom: 0%;
    height: 15%;
    color: white;
    left:40%;
}
.plus{
    position: absolute;
    width: 4%;
    bottom: 4%;
    z-index: 2;
    left: 13%;
}
.equalto{
    position: absolute;
    width: 4%;
    bottom: 5%;
    z-index: 2;
    left: 33%;
}
.notequalto{
    position: absolute;
    width: 4%;
    bottom: 5%;
    z-index: 2;
    left: 33%;
}
.pencil{
    position: absolute;
    right: 7%;
    width: 1%;
    transform: rotate(55deg);
    top: 2%;
}
.para{
    position: absolute;
    width: 18%;
    top: 28%;
    left: 17%;
}
.p1{
    left:17%;
}
.p2{
    left:50%;
}
.leftdiv{
    position: absolute;
    width: 14%;
    height: 18%;
    border: 1px solid;
    top: 35%;
    left: 19%;
}
.parachutesimg {
    position: absolute;
    width: 20%;
    top: 22%;
    transform:rotate(20deg);

}
@-webkit-keyframes float{
    0%{
        transform:rotate(20deg)
    }
    100%{
        transform: rotate(-20deg);
    }
}

@keyframes float{
    0%{
        transform:rotate(20deg)
    }
    100%{
        transform: rotate(-20deg);
    }
}
.pa1{
    right:65%;
    -webkit-animation: float 1.5s linear alternate infinite;
    animation: float 1.5s linear alternate infinite;
}
.pa2{
    right:39%;
    -webkit-animation: float1 1.5s linear alternate infinite ;
    animation: float1 1.5s linear alternate infinite;
}
.pa3{
    right:15%;
    -webkit-animation: float 1.5s linear alternate infinite;
    animation: float 1.5s linear alternate infinite;
}
@-webkit-keyframes float1{
    0%{
        transform:rotate(-20deg)
    }
    100%{
        transform: rotate(20deg);
    }
}

@keyframes float1{
    0%{
        transform:rotate(-20deg)
    }
    100%{
        transform: rotate(20deg);
    }
}