.mainimage{
    position: absolute;
    top: 24%;
    left: 23%;
    width: 70%;
}
.im3image{
    transform:rotateY(180deg)
}
.punctuationinfo1{
    position: absolute;
    width: 100%;
    text-align: center;
    color:#1A5C94;
}
.mainimage1{
    position: absolute;
    top: 19%;
    left: 36%;
    width: 30%;
}
.query1{
    right: 67%;
    top: 68%;

}
.query2{
    left: 2%;
    top: 75%;

}
.query3{
    right: 51%;
    top: 68%;
}
.dropbox1{
    top: 63%;
    left: 6%;
}
.dropbox2{
    top: 63%;
    left: 29%;
}
.query4{
    right: 67%;
    top: 62%;
    font-size:1.8vw;
}
.query5{
    right: 67%;
    top: 66%;
    font-size: 1.8vw;
}
.query6{
    right: 69%;
    top: 78%;
    width:26%;
    font-size:1.8vw;
}
.query7{
    top: 68%;
    right: 51%;
    font-size: 1.8vw;
}
.drop1{
    top: 62%;
    left: 7%;
}
.drop2{
    top: 62%;
    left: 28%;
}
.query8{
    top: 62%;
    right: 67%;
    font-size: 1.8vw;
}
.query9{
    top: 66%;
    right: 67%;
    font-size: 1.8vw;
}
.query10{
    top: 78%;
    right: 76%;
    font-size: 1.8vw;
}
.query11{
    right: 50.5%;
    font-size: 1.8vw;
    top: 67%;
}
.drop3{
    top: 62%;
    left: 5%;
}
.drop4{
    top: 62%;
    left: 29.5%;
}
.topcss{
    top:68%;
}

.text1{
    text-align: center;
}
.text3{
    text-align: center;
    padding-top: 2%;
}
.commaanim{
    color: #A61C00;
    position: absolute;
    opacity: 0;
    animation: comani 3s linear 1s forwards;
    -webkit-animation: comanim 3s linear 1s forwards;
    animation-delay: 8s;
}
.commaanim1{
    color: #A61C00;
    position: absolute;
    opacity: 0;
    animation: comani 3s linear 1s forwards;
    -webkit-animation: comanim 3s linear 1s forwards;
    animation-delay: 4s;
}

@keyframes comanim {
    0%{
        opacity: 0;
        transform: translateY(400%);
    }
    100%{
        opacity: 1;
        transform: translateY(0%);
    }
}
.droppable >p,.droppable1 >p {
    bottom:58%;
}