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

    font-family: 'Sniglet !important';

}
.generalTemplateblock p {
    font-family: Sniglet !important;
}
.bg1{
    background: url("../../images/bg_play-time.png");
    background-size: 100% 100%;
}
.bg2{
    background-color: rgb(204, 250, 186);
    background-size: 100% 100%;
}

.bg3{
    background-color: rgb(59, 188, 213);
    background-size: 100% 100%;
}
.bg4{
    background-color: rgb(189, 119, 155);
    background-size: 100% 100%;
}
.bg5{
    background-color: rgb(105, 152, 227);
    background-size: 100% 100%;
}
.bg6{
    background-color: rgb(217, 234, 211);
    background-size: 100% 100%;
}
.bg7{
    background-color: rgb(131, 183, 195);
    background-size: 100% 100%;
}
.bg9{
    background-color: rgb(30, 173, 177);
    background-size: 100% 100%;
}
.bg10{
    background-color: rgb(102, 173, 220);
    background-size: 100% 100%;
}
.zoomin{
    animation: zoomIn 3s linear 0s forwards;
    animation-timing-function: ease-in;
    -webkit-animation-duration: 500ms;
    -moz-animation-duration: 500ms;
    animation-duration: 500ms;
}

.quesdiv{
    position: absolute;
    float: left;
    left: 2%;
    border: 1px solid;
    width: 70%;
    top: 10%;
    height: 43%;
    border-radius: 15px;
    background-color: white;
}

.hintmaindiv{
    position: relative;
    /* border: 1px solid; */
    float: left;
    left: 73%;
    width: 26%;
    height: 43%;
    top: 10%;
    background-color: white;
    border: 1px solid;
    border-radius: 15px;
}
.hintdiv,.rhinoimg,.leopardimg,.redpandaimg,.monkeyimg,.crocodileimg,.speechimg,.ashaimg,.premimg,.premimgcls,.rhinoimgdiv,.squirrelisteningimg,
.rhinogifimg,.leopardgifimg,.redpandagifimg,.monkeygifimg,.crocodilegifimg,.correctWrongImg{
    position: relative;
    max-width: 100%;
    max-height: 100%;
}
.hintimg{
    position: relative;
    max-width: 99%;
    right: 7%;
}
.hintimgcat{
    position: relative;
    max-width: 67%;
    right: 7%;
}
.hintimgpen{
    position: relative;
    width: 82%;
    right: 7%;
    padding-top: 16%;
}

.div1{
    /*border: 1px solid;*/
    max-width: 25%;
    position: relative;
    bottom: 93%;
    float: left;
    left: 77%;
    cursor:pointer;
}
.div2{
    max-width: 25%;
    position: relative;
    bottom: 93%;
    float: left;
    left: 78%;
}
.div3{
    max-width: 25%;
    position: relative;
    bottom: 98%;
    float: left;
    left: 79%;
}
.rhinodiv{
    position: relative;
    float: right;
    width: 18%;
    /*border: 1px solid;*/
    height: 40%;
    top: 59%;
    right: 80%;
}
.leoparddiv{
    position: relative;
    float: right;
    width: 18%;
    /*border: 1px solid;*/
    height: 40%;
    top: 59%;
    right: 43%;
}
.redpandadiv{
    position: relative;
    float: right;
    width: 18%;
    height: 40%;
    top: 66%;
    right: 6%;
}
.monkeydiv{
    position: relative;
    float: left;
    width: 18%;
    height: 40%;
    top: 64%;
    left: 35%;
}
.crocodilediv{
    position: relative;
    float: left;
    width: 18%;
    /*border: 1px solid;*/
    height: 40%;
    top: 19%;
    left: 54%;
}
.clicktxt{
    position: relative;
    max-width: 90%;
    max-height: 100%;
    top: 54%;
    float: left;
    left: 4%;
    font-family: Sniglet !important;
    font-size: 2vw;
    font-style: italic;
}
.selectdiv{
    position: relative;
    max-width: 100%;
    height: 39%;
    top: 14%;
}
.ansdiv{
    position: relative;
    top: 32%;
    max-width: 100%;
    height: 26%;
}
.commonbtn{
    position: relative;
    top: 10%;
    width: 13%;
    height: 60%;
    border-radius: 15px;
    border: none;
    font-size: 3vw;
    font-family: Sniglet !important;
    background-color: rgb(181,191,254);
}

.firstdiv{
    float: right;
    right: 79%;
 }
.seconddiv{
    float: right;
    right: 47%;
}
.thirddiv{
    float: right;
    right: 16%;
}
.fourthdiv{
    float: right;
    right: -15%;
}
.fifthdiv{
    float: right;
    right: -45%;
}
.commonans{
    position: relative;
    width: 13%;
    height: 78%;
    top: 14%;
    border: none;
    border-radius: 15px;
    font-size: 3vw;
    font-family: Sniglet !important;
}
.ansfirst{
    background-color: white;
    float: left;
    left: 17%;
}
.anssecond{
    background-color: whitesmoke;
    float: left;
    left: 20%;
    background-color: rgb(217, 217, 217);
}
.ansthird{
    background-color: whitesmoke;
    float: left;
    left: 27%;
    background-color: rgb(217, 217, 217);
}
.wrongans{
    background-color: red;
}
.correctans{
    background-color: darkgreen;
    color:white;
}
.animal {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
.commontxt{
    position: relative;
    width: 15%;
    height: 12%;
    border-radius: 12px;
    border: 3px solid;
    border-color: rgb(61,133,198);
    padding: 7px;
    font-size: 2.5vw;
}
.leftdiv{
    position: absolute;
    width: 50%;
    float:left;
    left:0%;
    height: 100%;
    /*-webkit-animation: myfirst 2s linear infinite;!* Safari 4.0 - 8.0 *!*/
    /*animation: myfirst 2s linear infinite;*/
}
.rightdiv{
    position: absolute;
    width: 50%;
    float:right;
    right:0%;
    height: 100%;
    /*-webkit-animation: mysecond 2s linear infinite;!* Safari 4.0 - 8.0 *!*/
    /*animation: mysecond 2s linear infinite;*/
}
.idiv{
    background-color: rgb(255, 217, 102);
    top: 24%;
    left: 1%;
    transform: rotate(-14deg);
}
.zdiv{
    background-color: rgb(249, 203, 156);
    top: 5%;
    left: 30%;
    transform: rotate(9deg);
}
.adiv{
    background-color: rgb(182, 215, 168);
    top: 16%;
    left: 23%;
    transform: rotate(-9deg);
}
.rdiv{
    background-color: rgb(255, 229, 153);
    top: 31%;
    left: 10%;
    transform: rotate(9deg);
}
.cdiv{
    background-color: rgb(166, 77, 121);
    top: 37%;
    left: 31%;
    transform: rotate(-9deg);

}
.ediv{
    background-color: rgb(255, 217, 102);
    top: 13%;
    left: 65%;
    transform: rotate(14deg);
}
.mdiv{
    background-color: rgb(244, 204, 204);
    top: 25%;
    left: 79%;
    transform: rotate(-7deg);
}
.jdiv{
    background-color: rgb(246, 178, 107);
    top: 15%;
    left: 43%;
    transform: rotate(7deg);
}
.sdiv{
    background-color: rgb(234, 153, 153);
    top: 33%;
    left: 73%;
    transform: rotate(22deg);
}
.pdiv{
    background-color: rgb(182, 215, 168);
    top: 14%;
    left: 42%;
    transform: rotate(-7deg);
 }
.wdiv{
    background-color: rgb(164, 194, 244);
    top: 26%;
    left: 37%;
    transform: rotate(-7deg);
}
.speechdiv1{
    position: relative;
    width: 31%;
    height: 27%;
    float: right;
    right: 37%;
    top: 5%;
}
.saying1{
    position: relative;
    top: 11%;
    float: left;
    left: 33%;
    font-size: 1.6vw;
}
.speechdiv{
    position: relative;
    width: 31%;
    height: 27%;
    float: right;
    right: 21%;
    top: 5%;
}
.saying{
    position: relative;
    top: 11%;
    float: left;
    left: 55%;
    font-size: 1.6vw;
}

.premdiv{
    position: relative;
    width: 32%;
    height: 58%;
    float: left;
    left: 38%;
    top: 22%;
}

.ashadiv{
    position: relative;
    width: 32%;
    height: 58%;
    float: right;
    right: 17%;
    top: 27%;
}


/* Safari 4.0 - 8.0 */
@-webkit-keyframes myfirst {
    0%   { left: 0px; top: 0px;}
    25%  { left: 50px; top: 0px;}
    100% { left: 0px; top: 0px;}
}

@keyframes myfirst {
    0% {
        left: 0px;
        top: 0px;
    }
    25% {
        left: 50px;
        top: 0px;
    }

    100% {
        left: 0px;
        top: 0px;
    }
}

@-webkit-keyframes mysecond {
    0%   { right: 50px; top: 0px;}
    25%  { right: 0px; top: 50px;}
    100% { right: 50px; top: 0px;}
}

@keyframes mysecond {
    0% {
        right: 0px;
        top: 0px;
    }
    25% {
        right: 50px;
        top: 0px;
    }

    100% {
        right: 0px;
        top: 0px;
    }
}

.premdivcls{
    position: absolute;
    float: left;
    left: 5%;
    top: 28%;
    width: 84%;
    height: 68%;
}

.ptime{
    position: relative;
    width: 100%;
    height:20%;
    padding-top: 32%;
    color: white;
    font-size: 4.5vw;
    word-break: break-all;
    float: left;
    left: 3%;
}

.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%;
}

.rhinolastdiv{
    position: relative;
    float: right;
    width: 18%;
    height: 40%;
    top: 17%;
    right: 80%;
}
.leopardlastdiv{
    position: relative;
    float: right;
    width: 18%;
    height: 40%;
    top: 17%;
    right: 43%;
}

.redpandalastdiv{
    position: relative;
    float: right;
    width: 18%;
    height: 40%;
    top: 25%;
    right: 6%;

}

.monkeylastdiv{
    position: relative;
    float: left;
    width: 18%;
    height: 40%;
    top: 23%;
    left: 58%;
}

.crocodilelastdiv{
    position: relative;
    float: left;
    width: 16%;
    height: 35%;
    top: 20%;
    left: 60%;
}
.correctWrongDiv{
    width: 100%;
    position: absolute;
    height: 50%;
    bottom:112%;
}

.textblock p{
    font-family: Sniglet !important;
}

.commonbtn:hover{
    background-color:rgb(230, 145, 56);
    border:2px solid;
    border-color:rgb(246, 178, 107);

}

.disablePointer{
    pointer-events:none;
}