.objdiv{
    position: absolute;
    width: 100%;
    height: 15%;
    background-color: #9878d9;
    color: white;
}
.objdiv p{
    padding-right: 15%;
}
/*slide1 */
.dragdiv{
    position: absolute;
    width: 100%;
    height: 50%;
    bottom: 0%;
    background-color: #eeddcb;
}
.commondropbox{
    position: absolute;
    width: 17%;
    top: 30%;
    border: 3px solid;
    height: 62%;
    top: 30%;
    border-radius: 27px;
    background-color: white;
}
.switch{
    position: absolute;
    width: 11%;
    top: 8%;
    left: 31%;
}
.bulb{
    position: absolute;
    width: 8%;
    left: 39.5%;
    top: 63%;
}
.battery{
    position: absolute;
    width: 10.9%;
    top: 22.9%;
    left: 47.5%;
}
.wire{
    position: absolute;
    width: 31%;
    top: 25%;
    left: 29%;
}
.dropdiv{
    position: absolute;
    width: 100%;
    height: 35%;
    top: 15%;
    background-color: #cabaab;
}
.switchdrp{
    left: 28%;
}
.bulbdrp{
    left: 78%;
}
.batterydrp{
    left: 4%;
}
.wiredrp{
    left: 53%;
}
.div1{
    position: absolute;
    width: 12%;
    top: 7%;
    height: 20%;
    left: 7%;
}
.div2{
    position: absolute;
    width: 12%;
    top: 7%;
    height: 18%;
    left: 31%;
}
.div3{
    position: absolute;
    width: 12%;
    top: 7%;
    height: 16%;
    left: 55%;
}
.div4{
    position: absolute;
    width: 12%;
    top: 7%;
    height: 17%;
    left: 80%;
}
.batterydrp img{
    width: 88%;
    height: 26%;
    top: 38%;
}
.switchdrp img{
    width: 80%;
    height: 54%;
    top: 22%;
}
.wiredrp img{
    width: 80%;
    height: 57%;
    top: 22%;
}
.bulbdrp img{
    width: 63%;
    height: 68%;
    top: 17%;
}

.draggable{
    cursor: -webkit-grab;
    cursor: grab;
    z-index:5;
}
.draggable:hover{
    border:2px solid #ff9900;
}
.correctImg{
    width: 37% !important;
    height: 29% !important;
    left: 51% !important;
}

/*slide2*/
.dragdiv1{
    position: absolute;
    width: 30%;
    height: 85%;
    bottom: 0%;
    background-color: #eeddcb;
}
.dropdiv1{
    position: absolute;
    width: 70%;
    height: 85%;
    top: 15%;
    background-color: #cabaab;
    left: 30%;
}
.commondropbox1{
    position: absolute;
    border: 3px solid;
    border-radius: 27px;
    background-color: white;
}
.batterydrp1 {
    left: 9%;
    width: 30%;
    height: 34%;
    top: 16%;
}
.switchdrp1 {
    left: 51%;
    width: 30%;
    height: 34%;
    top: 16%;
}
.wiredrp1 {
    left: 9%;
    width: 30%;
    height: 34%;
    top: 64%;
}
.bulbdrp1 {
    left: 51%;
    width: 30%;
    height: 34%;
    top: 64%;
}
.switch1 {
    position: absolute;
    width: 50%;
    height: 20%;
}
.option1{
    top: 4%;
    left: 20%;
}
.bulb1 {
    position: absolute;
    width: 50%;
    height: 24%;
}
.option2{
    top: 26%;
    left: 20%;
}
.battery1 {
    position: absolute;
    width: 50%;
    height: 20%;
}
.option3{
    top: 55%;
    left: 20%;
}
.wire1 {
    position: absolute;
    width: 50%;
    height: 20%;
}
.option4{
    top: 79%;
    left: 20%;
}
.batterydrp1 img{
    width: 68%;
    height: 21%;
    top: 32%;
    left: 9%;
}
.switchdrp1 img{
    width: 73%;
    height: 52%;
    top: 15%;
    left: 9%;
}
.wiredrp1 img{
    width: 73%;
    height: 52%;
    top: 21%;
    left: 9%;
}
.bulbdrp1 img{
    width: 47%;
    height: 53%;
    top: 21%;
    left: 9%;
}
.div5{
    position: absolute;
    width: 41%;
    bottom: 83%;
    height: 20%;
    left: 3%;
    font-size: 2.3vmin;
}
.div6{
    position: absolute;
    width: 37%;
    top: 0%;
    height: 18%;
    left: 48%;
    font-size: 2.3vmin;
}
.div7{
    position: absolute;
    width: 45%;
    top: 49%;
    height: 16%;
    left: 1%;
    font-size: 2.3vmin;
}
.div8{
    position: absolute;
    width: 40%;
    top: 49%;
    height: 16%;
    left: 45%;
    font-size: 2.3vmin;
}
.correctImg1{
    width: 23% !important;
    height: 19% !important;
    left: 40% !important;
}
.switch1 img{
    width:80%;
    height:80%;
    top:2%;
}
.bulb1 img{
    width: 77%;
    height: 72%;
    top: 13%;
}
.battery1 img{
    width: 80%;
    height: 33%;
    top: 32%;
}
.wire1 img{
    width: 80%;
    height: 72%;
    top: 14%;
}



/*slide3*/
.dragdiv2{
    position: absolute;
    width:60%;
    height:85%;
    top:15%;
    background-color: #cabaab;
}
.dropdiv2{
    position: absolute;
    width:40%;
    height:85%;
    top:15%;
    right:0%;
    background-color: #eeddcb;
}
 .commonoption{
     position: absolute;
     width: 42%;
     border: 2px solid;
     height: 36%;
     border-radius: 23px;
     background-color: white;
     cursor: -webkit-grab;
     cursor: grab;
 }
 .op1{
     top: 10%;
     left: 5%;
 }
 .op2{
     top: 10%;
     left: 54%;
 }
.op3{
    top: 55%;
    left: 5%;
}
.op4{
    top:55%;
    left:54%;
}
.commonoption img{
    position: absolute;
    width: 85%;
    right: 7%;
    top: 1%;
}
.comcircuit{
    position: absolute;
    top: 2%;
    left: 36%;
    font-size: 3vmin;
}
.incomcircuit{
    position: absolute;
    top: 51%;
    left: 35%;
    font-size: 3vmin;
}
.completecircuit{
    position: absolute;
    width: 80%;
    height: 40%;
    border: 2px solid;
    left: 10%;
    top: 10%;
}
.incompletecircuit{
    position: absolute;
    width: 80%;
    height: 40%;
    border: 2px solid;
    left: 10%;
    top: 59%;
}
.circuit1{
    position: absolute;
    width: 34%;
    top: 15%;
    left: 14%;
}
.circuit2{
    position: absolute;
    width: 34%;
    top: 69%;
    left: 13%;
}
.circuiton{
    position: absolute;
    width: 34%;
    top: 17%;
    left: 52%;
}
.circuitoff{
    position: absolute;
    width: 34%;
    top: 70%;
    left: 52%;
}
.correctImg2{
    width: 15% !important;
    height: 20% !important;
    left: 51% !important;
}
/*slide 4*/
.commonoption1{
    position: absolute;
    width: 30%;
    border: 2px solid;
    height: 26%;
    border-radius: 23px;
    background-color: white;
    cursor: -webkit-grab;
    cursor: grab;
}
.commonoption1 img{
    position: absolute;
    width: 85%;
    right: 7%;
    top: 1%;
}
.o1{
    top: 2%;
    left:12%;
}
.o2{
    top: 2%;
    left: 54%;
}
.o3{
    top: 35%;
    left: 12%;
}
.o4{
    top: 35%;
    left: 54%;
}
.o5{
    top: 67%;
    left: 12%;
}
.o6{
    top: 67%;
    left: 54%;
}
.closeswtch{
    position: absolute;
    width: 80%;
    left: 10%;
    top: 0%;
    font-size: 3vmin;
}
.opnswtch{
    position: absolute;
    width: 80%;
    left: 10%;
    top: 49%;
    font-size: 3vmin;
}
.closeswitch{
    position: absolute;
    width: 80%;
    border: 1px solid;
    height: 40%;
    left: 10%;
    top: 8%;
}
.openswitch{
    position: absolute;
    width: 80%;
    border: 1px solid;
    height: 40%;
    left: 10%;
    top: 57%;
}
.q01{
    position: absolute;
    width: 30%;
    top: 16%;
    left: 13%;
}
.q02{
    position: absolute;
    width: 30%;
    top: 63%;
    left: 13%;
}
.q03{
    position: absolute;
    width: 36%;
    top: 59%;
    left: 51%;
}
.q04{
    position: absolute;
    width: 34%;
    top: 13%;
    left: 50%;
}
.q05{
    position: absolute;
    width: 30%;
    top: 78%;
    left: 33%;
}
.q06{
    position: absolute;
    width: 30%;
    top: 30%;
    left: 33%;
}
.bgcover{
    background-color: #eeddcb;
    background-size: 100% 100%;
}
.hovered{
    border: 0.1em dashed black;
    background: #E5E5E5;
}
.correctcss{
    border:2px solid #98c02e;
}
.imagediv{
    position: absolute;
    width: 43%;
    top: 28%;
    left: 3%;
}
.rightdiv{
    position: absolute;
    width: 50%;
    height: 85%;
    right: 0%;
    top: 15%;
}
.commontext{
    position: absolute;
    width: 80%;
    height: 18%;
    right: 17%;
    background-color: #ffcd53;
    color: #784311;
    border-radius: 16px;
    font-size: 2.3vmin;
}
.commontext:hover{
    background-color: #d9d9d9;
    border:2px solid #999999;
    cursor: -webkit-grab;
    cursor: grab;
}
.correctans{
    background-color: #98c02e;
    border:2px solid #deef3c;
    color: white;
}
.wrongans{
    background-color:#FF0000 !important;
    border:2px solid !important;
    border-color: #980000 !important;
}
.choice1{
    top: 22%;
}
.choice2{
    top: 55%;
}
.choicea{
    top:17%;
}
.choiceb{
    top:42%;
}
.choicec{
    top:70%;
}
.achoice{
    top:5%;
}
.bchoice{
    top:28%;
}
.cchoice{
    top:51%;
}
.dchoice{
    top:73%;
}
.ansImg{
    width: 13% !important;
    height: 44% !important;
    left: 62% !important;
    bottom: 55%;
}
.ansImg1{
    width: 12% !important;
    height: 44% !important;
    left: 62% !important;
    bottom: 16%;
}
.info{
    position: absolute;
    width: 51%;
    height: 34%;
    top: 66%;
    border: 2px solid;
    left: 0%;
    border-radius: 16px;
}
.s1{
    position: absolute;
    width: 20%;
    height: 10%;
    top: 39%;
    left: 7%;
}
.s2{
    position: absolute;
    width: 20%;
    height: 10%;
    top: 47%;
    left: 2%;
}
.tipicon{
    position: absolute;
    width: 4%;
    z-index: 10;
    left: 1%;
    top: 16%;
    animation: blinkEff 1s linear alternate infinite;
}
@-webkit-keyframes blinkEff {
    0%{
        transform:  scale(0.8) ;
    }
    100%{
        transform:  scale(1) ;
    }
}


@keyframes blinkEff {
    0%{
        transform:  scale(0.8) ;
    }
    100%{
        transform:  scale(1) ;
    }
}
.tipiconmsg{
    position: absolute;
    width: 56%;
    height: 20%;
    top: 20%;
    z-index: 10;
    background: white;
    border-radius: 16px;
    border:3px solid;
    left: 2%;
}

@media screen and (min-aspect-ratio: 4/3) {
    .congratulation *{
        font-size: 4vh;
    }
    .ex-number-template-score{
        font-size: 5vh !important;
    }
}