@font-face {
    font-family: acme;
    src: url('../../../../../fonts/Acme-Regular.ttf');
}

.maintitle p{
    font-family: Andika-Regular;
}
.bg{
    background: url('../images/yellowee.png');
    background-size: 100% 100%;
}
.circuit{
    position: absolute;
    width: 47%;
    left: 25%;
    top: 39%;
    transform: translateY(-39%);
    z-index: 2;
}
.objdiv{
    position: absolute;
    width: 100%;
    height: 15%;
    color: black;
}
.sl2header{
    position: absolute;
    left: 38%;
    font-size: 4vmin;
    top: -97%;
    display:none;
}
.sl4header{
    position: absolute;
    left: 40%;
    font-size: 5vmin;
    z-index: 1;
    top: -108%;
    font-family: 'Andika';
    animation: fadeIn 3s ease-in-out forwards;
}
.batteryimg,.cellimg{
    animation: bounce 1s ease-in-out ;
}
.sl5header{
    position: absolute;
    left: 43%;
    font-size: 5vmin;
    z-index: 1;
    top: -103%;
    animation: fadeIn 3s ease-in-out forwards;
}
.sl6header{
    position: absolute;
    left: 43%;
    font-size: 5vmin;
    z-index: 1;
    top: -103%;
    animation: fadeIn 3s ease-in-out forwards;
}
.titleelec{
    top: 48%;
    position: absolute;
    left: 34%;
    font-size: 5vmin;
}
.titlesl2{
    width: 102%;
    height: 17%;
}
.titlesl4{
    width: 102%;
    height: 17%;
    z-index:1;
}
/* .sl1animate{
    animation: slideInFromLeft 1s ease-in-out forwards;
} */
.empty{
    position: absolute;
    width: 15%;
    top: 17%;
    height: 15%;
    left: 30%;
    z-index: 3;
    cursor: pointer;
}
.switchoff{
    position: absolute;
    width: 16%;
    top: 16%;
    height: 15%;
    left: 28%;
    z-index: 3;
    animation: blinkEff 1s linear alternate infinite;
    cursor: pointer;
}
.switch{
    position: absolute;
    width: 12%;
    top: 32%;
    height: 9%;
    left: 30%;
    z-index: 3;
}
.battery{
    position: absolute;
    width: 12%;
    top: 32%;
    height: 9%;
    left: 53%;
    z-index: 3;
}
.wire{
    position: absolute;
    width: 10%;
    top: 50%;
    height: 9%;
    left: 60%;
    z-index: 3;
}
.bulb{
    position: absolute;
    width: 10%;
    top: 60%;
    height: 9%;
    left: 34%;
    z-index: 3;
}
.figelecrc{
    font-style: italic;
    position: absolute;
    width: 77%;
    top: 71%;
    height: 12%;
    left: 12%;
}
.text1{
    position: absolute;
    width: 96%;
    bottom: 0%;
    background-color: #082661;
    color: white;
    border-radius: 20px;
    height: 16%;
    top: 82%;
    left: 2%;
    font-family: Andika-Regular;
    display: none;
    animation: slideInFromLeft 1s ease-in-out forwards;
}
.text2{
    position: absolute;
    width: 95%;
    height: 19%;
    bottom: 3%;
    background-color: #082661;
    color: white;
    z-index: 1;
    left: 2%;
    border-radius: 12px;
    animation: slideInFromLeft 2s ease-in-out forwards;
}

.objdiv1{
    position: absolute;
    width: 100%;
    height: 30%;
    background-color: #ffd954;
    color: black;
    top: 36%;
    transform: translateY(-36%);
    font-family: andika;
}
.circuiton1{
    position: absolute;
    width: 41%;
    top: 17%;
    left: 4%;
    z-index: 2;
}
.circuiton5{
    position: absolute;
    width: 41%;
    top: 17%;
    left: 28%;
    z-index: 2;
}
.circuiton2{
    position: absolute;
    width: 39%;
    top: 17%;
    left: 5%;
    z-index: 2;
}
.circuiton3{
    position: absolute;
    width: 39%;
    top: 36%;
    left: 9%;
}
.leftdiv{
    position: absolute;
    width: 50%;
    height: 65%;
    top: 15%;
    left:0%;
}
.leftdiv1{
    position: absolute;
    width: 60%;
    height: 85%;
    top: 15%;
    left:0%;
}

.rightdiv{
    position: absolute;
    width: 52%;
    height: 100%;
    top: 0%;
    right: 0%;
    background-color: #c2ebe6;
}
.rightdiv1{
    position: absolute;
    width: 40%;
    height: 85%;
    top: 15%;
    right: 0%;
    background-color: #a64d79;
    text-align: justify;
    padding-left: 2%;
    padding-right: 2%;
    font-size: 1.6vw;
    color: white;
}
.rightdiv1 li{
    padding-bottom: 10%;
    padding-top: 2%;
}

.switch1{
    position: absolute;
    width: 20%;
    top: 25%;
    height: 9%;
    left: 16%;

}
.switch2{
    position: absolute;
    width: 9%;
    top: 56%;
    height: 9%;
    left: 34%;
    z-index: 3;
}

.battery1{
    position: absolute;
    width: 22%;
    top: 25%;
    height: 9%;
    left: 57%;

}
.wire1{
    position: absolute;
    width: 16%;
    top: 50%;
    height: 9%;
    left: 71%;

}
.figelecrc1{
    position: absolute;
    width: 64%;
    top: 83%;
    height: 9%;
    left: 16%;
    font-family: Andika-Regular;
    font-style: italic;
}
.bulb1{
    position: absolute;
    width: 15%;
    top: 60%;
    height: 9%;
    left: 24%;

}

.bulb2{
    position: absolute;
    width: 15%;
    top: 24%;
    height: 8%;
    left: 19%;
    z-index:3;
}
.batteryimg{
    position: absolute;
    width: 21%;
    top: 52%;
    right: 14%;
    z-index: 2;
}
.cellimg{
    position: absolute;
    width: 11%;
    top: 27%;
    right: 19%;
    z-index: 2;
}
.sl2descrip{
    animation: slideInFromRight 1s ease-in-out forwards;
    display: none;
}
.content4{
    font-family: Andika-Regular;
}
.figbat{
    position: absolute;
    width: 100%;
    top: 63%;
    font-family: Andika-Regular;
    font-style: italic;
}
.figcell{
    position: absolute;
    width: 100%;
    top: 40%;
}
.submersiblecable{
    position: absolute;
    width: 23%;
    z-index: 2;
    left: 57%;
    top: 31%;
}
.arrow1{
    position: absolute;
    width: 1.5%;
    left: 75%;
    z-index: 1;
    top: 18%;
    transform: rotate(49deg);
}
.arrow2{
    position: absolute;
    width: 1.5%;
    left: 79%;
    z-index: 1;
    top: 44%;
    transform: rotate(112deg);
}
.arrow3{
    position: absolute;
    width: 1%;
    left: 45%;
    z-index: 1;
    top: 50%;
    transform: rotate(122deg);
}
.arrow4{
    position: absolute;
    width: 0.7%;
    left: 53%;
    z-index: 1;
    top: 47%;
    transform: rotate(227deg);
}
.arrow5{
    position: absolute;
    width: 2.8%;
    left: 57%;
    z-index: 1;
    top: 45%;
    transform: rotate(-81deg);
}
.figwires{
    position: absolute;
    width: 80%;
    bottom: 21%;
    right: 17%;
    font-style: italic;
}
.copperiron{
    position: absolute;
    width: 34%;
    background-color: #ffe599;
    left: 59%;
    height: 17%;
    top: 2%;
    z-index: 1;
}
.plastic{
    position: absolute;
    width: 22%;
    background-color: #ffe599;
    height: 17%;
    bottom: 29%;
    right: 10%;
}
.simpleswitch{
    position: absolute;
    width: 20%;
    top: 56%;
    right: 16%;
    z-index: 1;
}
.figswitch{
    position: absolute;
    width: 100%;
    top: 69%;
    font-style: italic;
}
.righttext1{
    position: absolute;
    width: 100%;
    top: 48%;
}
.arrowgif{
    position: absolute;
    width: 51%;
    top: 24%;
    left: 21%;
}
.arrowgif1{
    position: absolute;
    width: 47%;
    top: 24%;
    left: 1%;
}
.cell{
    position: absolute;
    width: 15%;
    top: 24%;
    height: 8%;
    left: 56%;
    z-index: 3;
}
.metalcond{
    position: absolute;
    width: 41%;
    height: 20%;
    top: 39%;
    left: -6%;
}
.plasticncond{
    position: absolute;
    width: 28%;
    height: 20%;
    top: 34%;
    left: 69%;
}
.figconducting{
    position: absolute;
    width: 103%;
    top: 72%;
    height: 25%;
    font-style: italic;
}
.figconducting1{
    position: absolute;
    width: 100%;
    top: 62%;
    height: 25%;
    font-style: italic;
}
.break{
    position: absolute;
    width: 28%;
    height: 20%;
    top: 53%;
    left: 68%;
    z-index: 3;
}
.arrow6{
    position: absolute;
    width: 1.5%;
    top: 50%;
    left: 46%;
    transform: rotate(-219deg);
}
.arrow7{
    position: absolute;
    width: 1.5%;
    top: 48%;
    left: 55%;
    transform: rotate(-180deg);
}
.arrow8{
    position: absolute;
    width: 2.2%;
    top: 56%;
    left: 58%;
    transform: rotate(-76deg);
    z-index: 5;
}
.nonbreak{
    position: absolute;
    width: 42%;
    height: 20%;
    top: 61%;
    left: 61%;
    z-index: 3;
}
.empty1{
    position: absolute;
    width: 19%;
    top: 52%;
    height: 20%;
    left: 40%;
    z-index: 4;
    cursor: pointer;
}
.empty2{
    position: absolute;
    width: 25%;
    top: 2%;
    height: 17%;
    left: 19%;
    z-index: 3;
    cursor: pointer;
}
.lightswitch{
    position: absolute;
    width: 20%;
    top: 25%;
    height: 9%;
    left: 20%;
}
.lightbattery{
    position: absolute;
    width: 22%;
    top: 25%;
    height: 9%;
    left: 57%;
}
.lightwire{
    position: absolute;
    width: 16%;
    top: 47%;
    height: 9%;
    left: 70%;
}
.lightbulb{
    position: absolute;
    width: 15%;
    top: 60%;
    height: 9%;
    left: 27%;

}
.lightarrowgif{
    position: absolute;
    width: 48%;
    top: 23%;
    left: 3%;
}
.tipicon{
    position: absolute;
    width: 7%;
    top: 66%;
    right: 2%;
    animation: blinkEff 1s linear alternate infinite;
    z-index:5;
}
.tipicon1{
    position: absolute;
    width: 7%;
    top: 16%;
    right: 2%;
    animation: blinkEff 1s linear alternate infinite;
    z-index: 5;
}
.tipiconmsg{
    position: absolute;
    bottom: 83%;
    left: 74%;
    width: 21%;
    height: 24%;
    border: 3px solid;
    border-radius: 24px;
    background-color: white;
    top: 44%;
    z-index: 4;
}
.tipiconmsg1{
    position: absolute;
    right: 6%;
    width: 21%;
    height: 24%;
    border: 3px solid;
    border-radius: 24px;
    background-color: white;
    top: 1%;
    z-index: 4;
}

@-webkit-keyframes blinkEff {
    0%{
        transform:  scale(0.8) ;
    }
    100%{
        transform:  scale(1) ;
    }
}


@keyframes blinkEff {
    0%{
        transform:  scale(0.8) ;
    }
    100%{
        transform:  scale(1) ;
    }
}
.batarrowgif{
    position: absolute;
    width: 47%;
    top: 20%;
}
.figlightbulb{
    position: absolute;
    width: 80%;
    bottom: 27%;
    right: 9%;
    font-style: italic;
}
.bulboff{
    position: absolute;
    z-index: 3;
    top: 21%;
    right: 15%;
    width: 20%;
}
.switchoffimg{
    position: absolute;
    top: 22%;
    right: 17%;
    z-index: 2;
    width: 16%;
}
.tipiconmsg2{
    position: absolute;
    right: 9%;
    width: 31%;
    height: 24%;
    border: 3px solid;
    border-radius: 24px;
    background-color: white;
    top: 10%;
    z-index: 5;
}
.tipicon2{
    position: absolute;
    width: 6%;
    top: 16%;
    left: 43%;
    animation: blinkEff 1s linear alternate infinite;
    z-index: 5;
}
.coverback{
    background-color:#716886;
    background-size: 100% 100%;
}
.coverback1{
    background-color:  #b4a7d6;
    background-size: 100% 100%;
}
.coverpage{
    position: absolute;
    left: 10%;
    width: 78%;
    top: 2%;
}

@media (min-aspect-ratio: 4/3) {
    .objdiv1{
        font-size: 3vmin;
    }
  }
  /*//////////*/

  @media (max-aspect-ratio: 4/3) {
    .objdiv1{
        font-size: 4vmin;
    }
  }