/* Mobile devices (landscape only) */
@media only screen and (max-width: 480px) and (orientation: landscape) {
    /* styles here */


}


@font-face {
    font-family: digital;
    src:url('../fonts/digital-7-webfont.woff2') format('woff2'),
        url('../fonts/digital-7-webfont.woff') format('woff'),
        url("../fonts/digital-7.ttf") format('truetype');
  } 





*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    /* width: 98vmax;
    height: 1vmax; */
    height: 100%;
    width: 100%;
    display: block;
    position: relative;
    background-color: rgb(170, 165, 121);
   
}

.main{
    height: 45.8vmax;
    width: 100vmax;
    background-color: red;
    position: relative;
    overflow: hidden;
}

.header{
    border: 1px solid black;
    background-color: aqua;
    height: 3vmax;
    width: 100vmax; 
    position: absolute;
    display: flex;
    justify-content:first baseline;
    align-items: center;
}

#ins{
    font-size: 2vw;
    text-align: center;
    font-weight: bold;
    text-decoration: underline;
    padding: 1%;
}

#text{
    font-size: 1.5vw;
    font-weight: 100;
    color: blue;
    /* padding: 1%; */
}

.footer{
    position: absolute;
    align-items: center;
    top: 3vmax;
    height: 42.8vmax;
    width: 100%;
    background-color: rgb(226, 239, 33);
    
}

#experiment{
    /* top: 8%; */
    height: 100%;
    width: 100%;
    position: relative;
    background-color: blueviolet;
    /* border: 1px solid black; */
    /* visibility: hidden; */
}

#start{
    position:absolute;
    border-radius: 100%;
    padding: 0.5%;
    font-size: 1vw;
    left: 90%;
    top: 90%;
    border: none;
    background-color: rgb(0, 244, 16);
    box-shadow: 1px 1px 0px 0.5px;
    font-weight: 1000;
    font-family: 'Times New Roman', Times, serif;
    animation: blinking;
    animation-duration: 1s infinite ;
    z-index: 20;
   
}

#start:active{
    scale: 0.9;
    transition: all ease 0.2s;
}



/* #hindi{
    position:absolute;
    border-radius: 20%;
    padding: 1%;
    font-size: 1.5vh;
    left: 45%;
    top: 50%;
    border: none;
    background-color: rgb(226, 239, 33);
    box-shadow: 2px 2px 0px 1px;
    font-weight: 1000;
    font-family: 'Times New Roman', Times, serif;

}

#hindi:active{
    scale: 0.9;
}

#eng{
    position:absolute;
    border-radius: 20%;
    padding: 1%;
    font-size: 1.5vh;
    left: 55%;
    top: 50%;
    border: none;
    background-color: rgb(226, 239, 33);
    box-shadow: 2px 2px 0px 1px;
    font-weight: 1000;
    font-family: 'Times New Roman', Times, serif;
}

#eng:active{
    scale: 0.9;
}

#lselector{
    justify-content: center;
    align-items: center;
    position: absolute;
    font-size: 2vh;
    color: white;
    left: 45.2%;
    top: 40%;
}

#langselector{
    height: 100%;
    width: 100%;
    background-color: black;
    position: absolute;
    transition: all;
    transition-duration: 1s;
    aspect-ratio: 16/9;
    visibility: hidden;
}

#reading{
    width: 5.7%;
    height: 4.5%;
    top: 64.5%;
    left: 9.2%;
    position: absolute;
    text-align: center;
}

#change{
    margin-top: 3%;
    opacity: 0%;
    color: red;
    transition: all;
    transition-duration: 1s;
    font-family: digital;
    font-weight: 100;
    font-size: 2.4vh;
} */





/* ******************************************       Equipments   ************************************** */

#startinglab{
    position: absolute;
    height:100%;
    width: 100%;
    visibility: visible;    

}

#workingtable{
    height: 100%;
    width: 100%;
    position: absolute;
    visibility: visible;
    z-index: 0;

}

.dessicatorlid{
    position: absolute;
    height: 11%;
    width: 10%;
    top: 83%;
    transition: all;
    transition-duration: 1s;
}


.dessicatorbase{
    position: absolute;
    height: 15%;
    width: 10%;
    top: 70%;
}

#lid{
    left: 83%;
    /* visibility: hidden; */
}

#base{
    left: 85%;
}

#lid1{
    left: 71%;
    /* visibility: hidden; */
}

#base1{
    left: 73%;
}

#lid2{
    /* visibility: hidden; */
    left: 59%;
}

#base2{
    left: 61%;
}

#lid3{
    left: 47%;
    /* visibility: hidden; */
}

#base3{
    left: 49%;
}

#lid4{
    left: 35%;
    /* visibility: hidden; */
}

#base4{
    left: 37%;
}

#mcylinder{
    position: absolute;
    height: 30%;
    width: 5%;
    top: 60%;
    left: 8%;
    transition: all;
    transition-duration: 1s;
}

#m100{
    position: absolute;
    height: 30%;
    width: 5%;
    top: 60%;
    left: 8%;
    transition: all;
    /* transition-duration: 1s; */
    visibility: hidden;
}

#msolution{
    position: absolute;
    height: 0%;
    width: 2.78%;
    /* top: 62%; */
    bottom: 11%;
    left: 9.1%;
    transition: all;
    transition-duration: 1s;
    /* animation-fill-mode:forwards; */
    /* left:34%;
    bottom: 47.2%;
    rotate: 25deg; */




}

#ms{
    position: absolute;
    height: 31%;
    width: 0.3%;
    top: 55%;
    left: 10.7%;
    transition: all;
    /* transition-duration: 1s; */
    visibility: hidden;
    /* left: 39.2%;
    height: 55%;
    top: 27.5%; */
}

#butyrometer_liquid{
    position: absolute;
    height: 0%;
    width: 1.9%;
    bottom: 12.8%;
    left: 73.5%;
    transition: all;
    transition-duration: 1s;
    z-index: 2;
    opacity: 100%;
    transform-origin: bottom; 
   transform: scaleY(0);
  transition: transform 1s ease-in-out;
  
}
#white_milk{
    position: absolute;
    height: 23.5%;
    width: 0.3%;
    top: 60%;
    left: 74.3%;
    transition: all;
    transition-duration: 1s;
    z-index: 1;
    opacity: 0%;
    transform-origin: bottom;

}
#yellow_black{
    position: absolute;
     height: 25%;
    width: 1.9%;
    bottom: 11.9%;
    left: 73.5%;
    transition: all;
    transition: opacity 4s ease;
    z-index: 1;
    opacity: 0%;
    transform-origin: bottom;
    
}
#brown_butyrometer_sol{
    position: absolute;
    height: 25%;
    width: 2%;
    bottom: 11.9%;
    left: 73.4%;
    transition: all;
    transition: opacity 4s;
    z-index: 3;
    opacity: 0%;
    transform-origin: bottom;
    
    
    
       /* left : 44.5%;  */

  


       


   
    
}
#brown_butyrometer_sol1{
    position: absolute;
    height: 39%;
    width: 2.8%;
    bottom: 11.9%;
    left: 73.0%;
    transition: all;
    transition-duration: 1s;
    z-index: 1;
    opacity: 100%;
    transform-origin: bottom;
    visibility: hidden;
    
    
       /* left : 44.5%;  */

       
      /* height: 20.656%;
width: 1.5112%;
bottom: 12.664%;
left: 36.792%; */


   
}
#tiltedsol{
    position: absolute;
    height: 36%;
    width: 2.84%;
    bottom: 12.9%;
    left: 44.6%;
    transition: all;
    transition-duration: 1s;
    z-index: 1;
    opacity: 0%;
    transform-origin: bottom;
    

       
       


    bottom: 42.3%;
}

#tiltedsol1{
    position: absolute;
    height: 36%;
    width: 2.84%;
    bottom: 12.9%;
    left: 44.6%;
    transition: all;
    transition-duration: 1s;
    z-index: 1;
    opacity: 0%;
    transform-origin: bottom;
    

       
       


    bottom: 42.3%;
}
#butyrometer_cork{
     position: absolute;
    height: 6%;
    width: 2.40%;
        bottom:  11.10%;
                 left: 55.0%;
    transition: all;
    transition:  1s;
    z-index: 1;
    opacity: 100%;
    
    /* z-index: 25; */
    
    
    


    /* transition: transform 1s ease */
    
    /* transform : translate(0%, -850%);
    transform : translate(767%, -850%);
    transform : translate(767%, -725%);
    /* transform : translate(-190%, -90%) ;
    transform : translate(-115%, -60%);
    transform : translate(0%, -850%); */
    
    /* bottom : 54%;
  
    left:25.4% ;
    bottom: 40.4%;
    transform : translate(-130%, -60%) rotate(180deg);
    translate: (30%,40%) rotate(90deg); */ 
   
    
}
#butyrometer_cork1{
     position: absolute;
    height: 6%;
    width: 2.51%;
        bottom: 54.5%;
                 left: 73.3%;
    transition: all;
    transition:  1s;
    z-index: 0;
    opacity: 100%;
    visibility: hidden;
    z-index: 0;

    /* width: 1.9%;      */
  
}

#butyrometer_stp1{
    position: absolute;
    height: 70%;
    width: 15%;

    left: 50%;
    z-index: 20;
    transition: all; 
    transition-duration: 1s;
    opacity: 100%;
    visibility: visible;
    bottom: 30%;
   
    
   
    /* transform: translate(0%, -90%);
    transform: translate(-190%, -90%);
    
    transform: translate(-190%, -60%);
    transform: translate(-115%, -60%) rotate(180d
    bottom :50%; */

 
    
    


} 
#butyrometer{
    position: absolute;
  
  
   bottom: 11.8%;
    width: 3.0%;
    height: 48%;
    left: 72.97%;
    z-index: 23;
    transition: all; 
    transition-duration: 1s;
    opacity: 100%;
   
    
   
    /* transform: translate(0%, -90%);
    transform: translate(-190%, -90%);
    
    transform: translate(-190%, -60%);
    transform: translate(-115%, -60%) rotate(180d
    bottom :50%; */

 
    
    


} 

#butyrometer_cork_centrifuge{
     position: absolute;
    height: 6%;
    width: 2.51%;
        bottom:  11.0%;
                 left: 57.7%;
    transition: all;
    transition:  1s;
    z-index: 1;
    opacity: 100%;

    
    /* z-index: 25; */
    
    
    


    /* transition: transform 1s ease */
    
    /* transform : translate(0%, -850%);
    transform : translate(767%, -850%);
    transform : translate(767%, -725%);
    /* transform : translate(-190%, -90%) ;
    transform : translate(-115%, -60%);
    transform : translate(0%, -850%); */
    
    /* bottom : 54%;
  
    left:25.4% ;
    bottom: 40.4%;
    transform : translate(-130%, -60%) rotate(180deg);
    translate: (30%,40%) rotate(90deg); */ 
   
    
}
#butyrometer_centrifuge{
    position: absolute;
 
    z-index: 20;
   
    opacity: 100%;
    
   
    /* transform: translate(0%, -90%);
    transform: translate(-190%, -90%);
    
    transform: translate(-190%, -60%);
    transform: translate(-115%, -60%) rotate(180deg);
    bottom :50%; */

    bottom: 11.8%;
    width: 3.0%;
    height: 48%;
    left: 80.2%;
    
    


} 
#water_butyrometer_centrifuge{
    position: absolute;
   
    z-index: 22;
    transition: all; 
    transition-duration: 1s;
    opacity: 100%;
   visibility: hidden;
    
   
  

    bottom: 11.9%;
    width: 3.2%;
    height: 50%;
    left: 80.10%;
    
  


} 
#butyrometer1{
    position: absolute;
    height: 48%;
    width: 3.5%;
    bottom: 12%;
    left: 61.37%;
    z-index: 10;
    transition: all; 
    transition-duration: 1s;
    opacity: 100%;
    visibility: hidden;
 

}

 #straight_butyrometer{
    position: absolute;
    height: 50%;
    width: 3.1%;
    bottom: 12%;
    left: 72.89%;
    z-index: 19;
    transition: all; 
    transition-duration: 1s;
    opacity: 100%;
 }



 #straight_butyrometer_amyl{
    position: absolute;
  bottom: 12.0%;
    width: 3.0%;
    height: 50%;
    left: 72.97%;
    z-index: 23;
    transition: all; 
    transition-duration: 0s;
    opacity: 100%;
    visibility: hidden;

 }

  #tilted_butyrometer{
    position: absolute;
    height: 500%;
    width: 30.1%;
    bottom: 58%;
    left: 110.89%;
 
    opacity: 100%;
    visibility: visible;
    z-index: 40;
  }

/* 
    #tilted_butyrometer_amyl{

    height: 90%;
    width: 50.1%;
    bottom: 10%;
    left: 50.89%;
    opacity: 100%;
    z-index: 40;
  } */

  #finalfatsolution{
  position: absolute;
    height: 30.0%;
    width: 2.0%;
    bottom: 10.1%;
    left: 72.2%;
    opacity: 100%;
    z-index: 19;
      visibility: hidden;
      transition: 1s;
  }

   #result_box{
  position: absolute;
    height: 6.0%;
    width: 18.0%;
    bottom: 60.1%;
    left: 22.2%;
    opacity: 100%;
     font-size: 1.6rem;
    z-index: 19;
      visibility: hidden;
      transition: 1s;
      border: 0.3rem solid #f2b705;
    background-color: #fff8dc;
  }

    #tilted_butyrometer1{
    position: absolute;
    height: 30.1%;
    width: 2.0%;
    bottom: 44.82%;
    left: 72.21%;
 
    opacity: 100%;
  
    z-index: 19;
      visibility: hidden;
      transition: 1s;
  }

    /* height: 28.2%;
width: 10.5%;
left: 48.7%;
bottom: 5%; */
    
    /* transform: translateX(-50%);
  transition: bottom 2s ease; */
    /* transform: translate(0%, -90%);
    transform: translate(-190%, -90%);
    
    transform: translate(-190%, -60%);
    transform: translate(-115%, -60%) rotate(180deg);
    bottom :50%; */
    
    #tilted_butyrometer{
    position: absolute;
    height: 30%;
    width: 1.9%;
    bottom: 45%;
    left: 21.38%;
    z-index: 5;
  
    opacity: 100%;
    visibility: hidden;
   z-index: 20;
   transition: all;
   transition: 1s;
  }

     #tilted_butyrometer_amyl{
    position: absolute;
    height: 50%;
    width: 3.1%;
    bottom: 35%;
    left: 46.95%;
    z-index: 5;
  
    opacity: 100%;
   z-index: 20;
   transition: all;
   transition: 0s;
   visibility: hidden;
  }


#butyrometer_upper1{
    position: absolute;
    height: 20%;
    width: 29.7%;
    top: 60.0%;
    left: 60.43%;
    transition: all;
    transition-duration: 1s;
    z-index: 24;
}

#butyrometer_upper1_last{
  position: absolute;
  height: 20%;
  width: 29.7%;
  top: 60.0%;
  left: 10.43%;
  transition: all;
  transition-duration: 1s;
  z-index: 24;
}

#butyrometer_upper2{
    position: absolute;
    height: 20%;
    width: 29.4%;
    top: 69.75%;
    left: 60.58%;
    transition: all;
    transition-duration: 1s;
    z-index: 30;
 
}
#butyrometer_upper2_last{
  position: absolute;
  height: 20%;
  width: 29.4%;
  top: 69.75%;
  left: 10.58%;
  transition: all;
  transition-duration: 1s;
  z-index: 30;

}
#butyrometer_back{
    position: absolute;
    height: 35%;
    width: 30%;
    top: 60%;
    left: 61.27%;
    transition: all;
    transition-duration: 1s;
    z-index: 0;
}
#butyrometer_back_last{
  position: absolute;
  height: 35%;
  width: 30%;
  top: 60%;
  left: 11.27%;
  transition: all;
  transition-duration: 1s;
  z-index: 0;
}

#butyrometer_with_stand{
    position: absolute;
    height: 55%;
    width: 25%;
    top: 41%;
    left: 61%;
    transition: all;
    transition-duration: 1s;
}

#water-solution{
    position: absolute;
    height: 20%;
    width: 0.3%;
    top: 63.8%;
    left: 74.3%;
    transition: all;
    z-index: 2;
    transition-duration: 1s;
    opacity: 0%;  
}


#dwatersol{
    position: absolute;
    height: 21.8%;
    width: 6.5%;
    /* top: 68%; */
    bottom: 10.2%;
    left: 28.5%;
    transition: all;
    transition-duration: 1s;
}





#waterBath_lower {
  position: absolute;
  width: 26.48%;
  height: 30.4%;
  bottom: 7.9%;  /* 11 + (33 - 26.4)/2 = 13.82 */
  left: 55.5%;     /* 6 + (30.6 - 24.48)/2 = 8.31 */
  overflow: hidden;
  z-index: 21;
  visibility: hidden;
}

#waterBath_upper {
  position: absolute;
  width: 25.10%;
  height: 3.3%;
  bottom: 35.1%; /* 100% - top: 6.5% - height: 39% */
  left: 55.60%;
   overflow: hidden;
   z-index: 19;
}

#waterbath_front4 {
  position: absolute;
  width: 26.2%;
  height: 30.6%;
  bottom: 7.3%; /* 100% - top: 6.5% - height: 39% */
  left: 55.6%;
   overflow: hidden;
   z-index: 20;
}



/*                ----------             Water bath Heat       ----             1st     */

#waterBath_lower3 {
  position: absolute;
  width: 26.48%;
  height: 30.4%;
  bottom: 7.9%;  /* 11 + (33 - 26.4)/2 = 13.82 */
  left: 9.5%;     /* 6 + (30.6 - 24.48)/2 = 8.31 */
  overflow: hidden;
  z-index: 21;
}

#waterBath_upper3 {
  position: absolute;
  width: 25.10%;
  height: 3.3%;
  bottom: 35.1%; /* 100% - top: 6.5% - height: 39% */
  left: 9.60%;
   overflow: hidden;
   z-index: 19;
}


#onSwitchHolder3 {
  position: absolute;
  width: 2.4%;
  height: 5.2%;
  bottom: 10%;
  left: 14%;
   z-index: 22;  
}



#setOff3 {
   position: absolute;
  width: 1.7%;
  height: 1.4%;
  bottom: 12.85%;
  left: 19.00%;
  z-index: 25;
}

#setOff2 {
  position: absolute;
 width: 1.7%;
 height: 1.4%;
 bottom: 12.85%;
 left: 64.9%;
 z-index: 25;
}


#setOn {
   position: absolute;
  width: 10.5%;
  height: 10.3%;
  bottom: 12.8%;
  left: 19.00%;
  z-index: 24;
}

#setButtonHolder3 {
   position: absolute;
  width: 2.5%;
  height: 3.9%;
  bottom: 10.85%;
  left: 18.6%;
  z-index: 23;
}

#downOnSwitch3 {
  position: absolute;
  width: 1.1%;
  height: 1.8%;
  bottom: 17.9%; /* 17.0 + 10% */
  left: 230.795%;
  z-index: 22;
  visibility: visible;

}

#upOnSwitch3 {
  position: absolute;
  width: 15%;
  height: 1.84%;
  bottom: 23.20%; /* 22.33 + 10% */
  left: 40.7%;
  z-index: 25;
  visibility: hidden;
  opacity: 100%;
}

#upswitchholder3 {
  position: absolute;
  width: 1.9%;
  height: 3.2%;
  bottom: 22.3%; /* 21.43 + 10% */
  left: 21.3%;
  z-index: 23;
}

#upOffSwitch3 {
  position: absolute;
  width: 1.9%;
  height: 3.2%;
  bottom: 22.3%; /* 21.43 + 10% */
  left: 21.3%;
  z-index: 24;
}


#offSwitch3 {
  position: absolute;
  width: 2.1%;
  height: 8.3%;
  bottom: 6.7%;
  left: 14.5%;
    z-index: 25;
}


#onswitch3 {
   position: absolute;
  width: 1.6%;
  height: 3.0%;
  bottom: 12%;
  left: 14.45%;
  opacity: 100%;
  z-index: 25;
}



#actualTempDisplay3 {
   position: absolute;
 /* Background color area you care about */
  color: rgb(225, 255, 0);
  font-weight: bold;
  font-size: 1.25vw;
  text-align: center;
  bottom: 22.2%;        /* 221.1 */
   left: 17.9%;
  transition: all;
  transition-duration: 1s;
  opacity: 100%;
  z-index: 50;
}


/*sample temp text */
#sampleTempDisplay13 {
  position: absolute;
 /* Background color area you care about */
  color: cyan;
  font-weight: bold;
  font-size: 1.25vw; 
  text-align: center;
  bottom: 18.1%;
  left: 14.19%;
  transition: all;
  transition-duration: 1s;
  opacity: 100%;
    z-index: 52;
}



#actualTempDisplay13 {
   position: absolute;
 /* Background color area you care about */
  color: cyan;
  font-weight: bold;
  font-size: 1.25vw;
  text-align: center;
  bottom: 22.2%;
   left: 14.19%;
  transition: all;
  transition-duration: 1s;
  opacity: 100%;
    z-index: 23;
}


#sampleTempDisplay3 {
  position: absolute;
 /* Background color area you care about */
  color: rgb(85, 255, 0);
  font-weight: bold;
  font-size: 1.25vw;
  text-align: center;
  bottom: 17.9%;
  left: 18%;
  transition: all;
  transition-duration: 1s;
  opacity: 100%;
    z-index: 50;
}




  #tilted_butyrometer3 {
    position: absolute;
    height: 30.0%;
    width: 2%;
    bottom: 45.0%;
    left: 22.35%;
 
    opacity: 100%;
    z-index: 19;
    transition: 1s;
  }


   #straight_butyrometer3 {
    position: absolute;
    height: 50%;
    width: 3.1%;
    bottom: 12%;
    left: 72.89%;
    z-index: 23;
    transition: all; 
    transition-duration: 1s;
    opacity: 100%;
 }


 #butyrometer3{
    position: absolute;
  
  
   bottom: 11.8%;
    width: 3.0%;
    height: 48%;
    left: 72.97%;
    z-index: 23;
    transition: all; 
    transition-duration: 1s;
    opacity: 100%;
   
    
   
    /* transform: translate(0%, -90%);
    transform: translate(-190%, -90%);
    
    transform: translate(-190%, -60%);
    transform: translate(-115%, -60%) rotate(180d
    bottom :50%; */

 
    
    


} 


#ADD {
  position: absolute;
color: rgb(255, 255, 255);
font-weight: bold;
font-size: 1vw;
bottom: 24.4%;
width: 1.6%;
opacity: 100%;
left: 25.2%;
z-index: 30;

}


#SUB {
  position: absolute;
color: rgb(255, 255, 255);
font-weight: bold;
font-size: 1vw;
bottom: 20.4%;
width: 1.7%;
opacity: 100%;
left: 25.2%;
z-index: 30;

}

#timerDisplay13,
#timerDisplay23 {
    position: absolute;
  color: rgb(40, 237, 0);
  
  font-weight: bold;
  font-size: 2.6vw;
  bottom: 18.9%;
  width: 9%;
  opacity: 100%;
  left: 47.3%;
  z-index: 30;
  visibility: visible;
  display: block;
  
  
}

#timerDisplay33 {
  position: absolute;
color: rgb(40, 237, 0);

font-weight: bold;
font-size: 2.6vw;
bottom: 18.9%;
width: 9%;
opacity: 100%;
left: 47.8%;
z-index: 30;
visibility: visible;
display: block;
}


#downSwitch3 {
    position: absolute;
  height: 3.2%;
  bottom: 17.55%; /* 16.5 + 10% */
  width: 1.8%;
  left: 21.3%;
   z-index: 55;
   opacity: 100%;
}
/*                ----------             Water bath Heat       ----             1st - end    */




#onSwitchHolder {
  position: absolute;
  width: 2.4%;
  height: 5.2%;
  bottom: 10%;
  left: 60%;
   z-index: 22;  
}



#setOff {
   position: absolute;
  width: 1.7%;
  height: 1.4%;
  bottom: 12.85%;
  left: 65.00%;
  z-index: 25;
}


/* #door_open_close {
  position: absolute;
  width: 0.8%;
  height: 0.9%;
  bottom: 16.55%;
  font-size: 0.05rem;
  font: bold;
  left: 17%;
  z-index: 45;
} */

#setOn {
   position: absolute;
  width: 1.5%;
  height: 1.3%;
  bottom: 12.8%;
  left: 65.1%;
  z-index: 24;
}

#timerDisplay1,
#timerDisplay2 {
    position: absolute;
  color: rgb(89, 10, 10);
  background-color: yellow ;
  font-weight: bold;
  font-size: 1.3vw;
  bottom: 87%;
  width: 9%;
  opacity: 100%;
  left: 0.5%;
  z-index: 30;
  
}
#setButtonHolder {
   position: absolute;
  width: 2.5%;
  height: 3.9%;
  bottom: 10.85%;
  left: 64.5%;
  z-index: 23;
}

#downOnSwitch {
  position: absolute;
  width: 1.1%;
  height: 1.8%;
  bottom: 17.9%; /* 17.0 + 10% */
  left: 67.795%;
  z-index: 22;

}

#upOnSwitch {
  position: absolute;
   width: 1.3%;
  height: 1.8%;
  bottom: 23.0%; /* 21.43 + 10% */
  left: 67.6%;
  opacity: 100%;
  z-index: 24;
}

#upswitchholder {
  position: absolute;
  width: 1.9%;
  height: 3.2%;
  bottom: 22.3%; /* 21.43 + 10% */
  left: 67.3%;
  z-index: 23;
}

#upOffSwitch {
  position: absolute;
  width: 1.9%;
  height: 3.2%;
  bottom: 22.3%; /* 21.43 + 10% */
  left: 67.3%;
  z-index: 24;
}

#downSwitch4 {
  position: absolute;
 width: 1.9%;
  height: 3.0%;
  bottom: 17.9%; /* 17.0 + 10% */
  left: 67.2895%;
  z-index: 22;
   z-index: 55;
   opacity: 100%;
}


#offSwitch {
  position: absolute;
  width: 2.1%;
  height: 8.3%;
  bottom: 6.7%;
  left: 60.5%;
    z-index: 25;
}

#onswitch {
   position: absolute;
  width: 1.6%;
  height: 3.0%;
  bottom: 12%;
  left: 60.45%;
  opacity: 100%;
  z-index: 25;
}


#water-solution-centrifuge{
    position: absolute;
    height: 0%;
    width: 0.3%;
    top: 49.2%;
    left: 81.55%;
    transition: all;
    z-index: 1;
    transition-duration: 1s;
    opacity: 100%;  
}



#sampleTempDisplay {
  position: absolute;

 /* Background color area you care about */
  color: rgb(94, 233, 13);
  font-weight: bold;
  font-size: 1.25vw;
  
  text-align: center;
  bottom: 18.2%;
  left: 64.1%;
  transition: all;
  transition-duration: 1s;
  opacity: 100%;
    z-index: 50;
}


/*                               centrifuge                          */


#centrifuge_upper_open_lid {
  position: absolute;
  width: 17.50%;
  height: 16.0%;
  bottom: 44.54%;
  left: 12.4%;
  
  
 
  z-index:18;
  visibility: hidden;

  opacity: 100%;
}

/* #centrifuge_down_ward{
  position: absolute;
  width: 17.50%;
  height: 36.9%;
  bottom: 7.2%;
  left: 11.95%;

  z-index: 25;
  visibility: visible;
} */


#centrifuge_mid_filling {
    position: absolute;
  width: 16.05%;
  height: 5.3%;
  bottom: 39.47%;
  left: 13.39%;

  z-index: 18;
}

#centrifuge_down_ward{
    position: absolute;
  width: 17.4%;
  height: 33.9%;
  bottom: 7%;
  left: 12%;

  z-index: 19;
}
#centrifuge_close_lid {
  position: absolute;
  width: 18.67%;
  height: 16.4%;
  bottom: 33.0%;
  left: 11.6%;
  overflow: hidden;
  z-index: 30;


}

/* #centrifuge_top_filling {
  position: absolute;
 width: 18.19%;
  height: 21.0%;
  bottom: 39.55%;
  left: 11.98%;
  overflow: hidden;

  z-index: 22;
 
  opacity: 0%;
} */

#centrifuge_down_filling {
    position: absolute;
  width: 17.4%;
  height: 33.9%;
  bottom: 7%;
  left: 12%;

  z-index: 28;
   visibility: hidden;
}

#Off_On_button {
  position: absolute;
   width: 1.6%;
  height: 6.7%;
  bottom: 20.8%;
  left: 13.3%;
  z-index: 41;
  transition: 0s;
  opacity: 100%;
}

#MEN {
  position: absolute;
  color: rgb(255, 255, 255);
  background-color: rgb(78, 59, 225);
  font-weight:  900;
  border: 0.3vw solid black;
  border-radius: 0.2vw;
  font-size: 0.8vw;
   width: 2.5%;
  bottom: 15.7%;
  left: 14.1%;
  z-index: 41;
  transition: 0s;
  opacity: 100%;
  font: bolder;
}

#SET {
  position: absolute;
  color: rgb(255, 255, 255);
background-color: rgb(150, 43, 226);
font-weight: bold;
border: 0.3vw solid black;
border-radius: 0.2vw;
font-size: 0.8vw;
   width: 2.4%;
   
  bottom: 12%;
  left: 14.1%;
  z-index: 41;
  transition: 0s;
  opacity: 100%;
}



#On_Button {
  position: absolute;
  width: 1.6%;
  height: 6.7%;
  bottom: 20.8%;
  left: 13.3%;
  z-index: 40;
  visibility: hidden;
}

#Time_increase_switch {
  position: absolute;
  width: 1.1%;
  height: 2.0%;
  bottom: 22.05%;
  left: 20%;
  z-index: 33;
 
}

#Time_decrease_switch {
  position: absolute;
  width: 1.1%;
  height: 2.6%;
  bottom: 19.2%;
  left: 19.97%;
  z-index: 40;
  
}

#Start_Stop {
  position: absolute;
  width: 1.6%;
  height: 2.9%;
  bottom: 15.7%;
  left: 18.86%;
  z-index: 40;

}
#Off_Start_Stop {
    position: absolute;
  width: 1.5%;
  height: 2.9%;
  bottom: 15.7%;
  left: 18.86%;
  z-index: 42;
}
#Up_off_switch {
  position: absolute;
  width: 50.4%;
  height: 5.2%;
  bottom: 40%;
  left: 15%;
  z-index: 28;
  visibility: hidden;
}

#Up_on_switch {
  position: absolute;
  width: 2.4%;
  height: 5.2%;
  bottom: 46%;
  left: 15%;
  z-index: 29;
  visibility: hidden;
}

#rpm_decrease_button {
  position: absolute;
  width: 1.0%;
  height: 1.9%;
  bottom: 19.3%;
  left: 24.2%;
  z-index: 40;
}

#rpm_increase_button {
 position: absolute;
  width: 1.0%;
  height: 1.7%;
  bottom: 22.4%;
  left: 24.2%;
  z-index: 40;
}
#set_off {
   position: absolute;
  width: 1.79%;
  height: 1.8%;
  bottom: 16.35%;
  left: 21.85%;

  z-index: 51;
}

#Set{
   position: absolute;
  width: 10.79%;
  height: 0.8%;
  bottom: 15.35%;
  font-size: 0.8vw;
  left: 22.25%;
  z-index: 55;
  visibility: hidden;
}
#set_on {
  position: absolute;
 width: 1.79%;
  height: 1.8%;
  bottom: 16.35%;
  left: 21.85%;
  z-index: 50;
}

#door_open_off {
  position: absolute;
  width: 1.3%;
  height: 1.3%;
  bottom: 16.45%;
  left: 16.64%;
  z-index: 40;
}

#Open_button {
  position: absolute;
  color: rgb(255, 255, 255);
  background-color: blueviolet;
  font-weight: bold;
  border: 0.3vw solid rgb(0, 0, 0);
  border-radius: 0.2vw;
  font-size: 0.8vw;
  width: 4.88%;
  height: 3%;
  bottom: 13.5%;
  left: 17.3%;
  z-index: 56;
}

#RUN {
  position: absolute;
  color: rgb(255, 255, 255);
  background-color: rgb(20, 114, 13);
  font-weight: bold;
  border: 0.3vw solid black;
  border-radius: 0.2vw;
  font-size: 0.8vw;
  width: 2.4%;
  height: 3%;
  bottom: 13.5%;
  left: 23%;
  z-index: 56;
}

#Close_button {
  position: absolute;
  color: rgb(255, 255, 255);
  background-color: blueviolet;
  font-weight: bold;
  border: 0.3vw solid black;
  border-radius: 0.2vw;
  font-size: 0.8vw;
  width: 4.8%;
  height: 3%;
  bottom: 13.5%;
  left: 17.3%;
  z-index: 68;
}


#beaker_water{
    position: absolute;
    bottom: 0%;
    height: 23%;
    width: 12%;
    top: 68%;
    left:40.4%;
    z-index: 20;
}


#water_beaker{
    position: absolute;
    bottom: 9%;
    height: 15%;
    width: 10%;
 
    left: 42%;
    z-index: 15;
    transition: all;
    transition: 1s;
   
    
}


#butyrometer_water_21ml{
     position: absolute;
    height: 0%;
    width: 1.89%;
    bottom: 12.0%;
    left: 80.7%;
    z-index: 19;
    transition: all; 
    transition-duration: 1s;
    opacity: 100%;
}

/* RPM Box */


/* Time Box */
/* #timeBox {
  position: absolute;
  background-color: #ffffff;
  padding: 0.9375rem 1.5625rem;
  border-radius: 0.5rem;
  box-shadow: 0 0.125rem 0.3125rem rgba(0, 0, 0, 0.1);
  text-align: center;
  min-width: 5.625rem;
  z-index: 100;
  opacity: 1;
}

/* Temp Box */
/* #tempBox {
  position: absolute;
  background-color: #ffffff;
  padding: 0.9375rem 1.5625rem;
  border-radius: 0.5rem;
  box-shadow: 0 0.125rem 0.3125rem rgba(0, 0, 0, 0.1);
  text-align: center;
  min-width: 5.625rem;
  z-index: 100;
  opacity: 1;
} */ 


#rpmLabel {
  position: absolute;
  font-weight: 500;
  font-size: 1.2vw;
  color: #5145d9;
 
  z-index: 500;
  opacity: 100%;
     bottom: 23.8%;
  left: 17%;
  visibility: hidden;
  text-align: center;
}

#timeLabel {
  position: absolute;
 
  font-weight: 500;
  color: #e00f0f;
  margin-bottom: 0.5rem;
  z-index: 500;
  opacity: 100%;
  font-size: 1.3vw;
  bottom: 20%;
left: 17.0%;
  visibility: hidden;
}

#tempLabel1{
  position: absolute;
  font-weight: 600;
  font-size: 0.101rem;
  color: #555555;
  margin-bottom: 0.5rem;
  z-index: 500;
  opacity: 100%;
     bottom: 25.28%;
  left: 16.5%;
  visibility: hidden;
}


#rpmDisplay {
  position: absolute;
  font-size: 1.5vw;
  font-weight: 500;
  color: #37ed09;
  z-index: 50;
  opacity: 100%;
   bottom: 23.43%;
  left: 21%;
  visibility: hidden;
}



#timeDisplay {
  position: absolute;
  font-weight: 500;
  color: #37ed09;
  z-index: 500;
  font-size: 1.3vw;
    bottom: 20.9%;
  left: 21%;
  visibility: hidden;
  display: none;
}



#tempDisplay {
  position: absolute;
  font-size: 1.375rem;
  font-weight: 700;
  color: #222222;
  z-index: 50;
  opacity: 100%;
  visibility: hidden;
}





/*                   dsfsdfsdfsdfds            */
.vapor {
  position: relative;
  width: 20px;
  height: 60px;
  margin: 20px auto;
}

.vapor::before, .vapor::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 10px;
  height: 30px;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.7) 0%, transparent 80%);
  border-radius: 50%;
  animation: rise 3s infinite ease-in;
  opacity: 0.7;
}

.vapor::after {
  left: 12px;
  animation-delay: 1.5s;
}

@keyframes rise {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.7;
  }
  100% {
    transform: translateY(-60px) scale(1.5);
    opacity: 0;
  }
}
/* #actualTempDisplay,
#setTempDisplay,
#sampleTempDisplay {
  display: none;
} */

/* #actualTempDisplay, #setTempDisplay {
  position: absolute;
  width: 150%;
  padding: 10px;
  background-color: black;
  color: lime;
  font-weight: bold;
  font-size: 1.2rem;
  border-radius: 10px;
  text-align: center;
} */

#actualTempDisplay {
   position: absolute;

 /* Background color area you care about */
  color: rgb(225, 255, 0);
  font-weight: bold;
  font-size: 1.25vw;

  text-align: center;
  bottom: 22.4%;        /* 221.1 */
   left: 64.1%;
  transition: all;
  transition-duration: 1s;
  opacity: 100%;
  z-index: 50;

}


/*sample temp text */
#sampleTempDisplay1 {
  position: absolute;

 /* Background color area you care about */
  color: cyan;
  font-weight: bold;
  font-size: 1.2vw;
  
  text-align: center;
  bottom: 18.2%;
  left: 59.99%;
  transition: all;
  transition-duration: 1s;
  opacity: 100%;
    z-index: 52;
}
#actualTempDisplay1 {
   position: absolute;

 /* Background color area you care about */
  color: cyan;
  font-weight: bold;
  font-size: 1.2vw;
  
  text-align: center;
  bottom: 22.3%;
   left: 59.99%;
  transition: all;
  transition-duration: 1s;
  opacity: 100%;
    z-index: 23;
     
}

#setTempDisplay {
  bottom: 63%;
  left: 60%;
  visibility: hidden;
}

/* Click feedback animation */
@keyframes pulse {
  0% { transform: scale(1); border-radius: 50%; }
  50% { transform: scale(0.9); border-radius: 30%; }
  100% { transform: scale(1); border-radius: 50%; }
}


.pulse-effect {
  animation: pulse 0.5s ease-in-out;
}


@keyframes zoominout {
  0% { transform: scale(1); border-radius: 50%; }
  50% { transform: scale(1.2); border-radius: 30%; }
  100% { transform: scale(1); border-radius: 50%; }
}



/* .dsolutionbig{
    position: absolute;
    height: 4%;
    width: 10.8%;
    top: 68.9%;
    visibility: hidden;
} */

/* #dsolbig1{
    left: 85.1%;
} */

/* #dsolbig2{
    left: 71.1%;
} */
/* #dsolbig3{
    left: 57.1%;
} */
/* #dsolbig4{
    left: 43.1%;
} */
/* #dsolbig5{
    left: 29.1%;
} */
.dsolutionsmall{
    position: absolute;
    /* height: 4.7%; */
    height: 0%;
    width:6.8%;
    /* top: 80.1%; */
    bottom: 15.2%;
    /* visibility: hidden; */
    transition: all;
    transition-duration: 1s;
}
#dsolsmall1{
    left: 86.6%;
}


#dsolsmall2{
    left: 74.6%;
}


#dsolsmall3{
    left: 62.6%;
}


#dsolsmall4{
    left: 50.6%;
}


#dsolsmall5{
    left: 38.6%;
}

#milk-beaker{
    position: absolute;
    bottom: 0%;
    height: 23%;
    width: 18%;
    top: 68%;
    left:38%;
    z-index: 2;
   
    
}

#iso{
    position: absolute;
    bottom: 0%;
    height: 30%;
    width: 7.5%;
    top: 60%;
     left: 18.0%;
    z-index: 2;
    transition: all;
    transition: 1s;
    
    
}
#iso_amyl_sol{
    position: absolute;
    height: 21%;
    width: 7.5%;
    bottom: 10%;
     left: 18.0%;
    transition: all;
    transition: 1s;
   
    
    
}

#iso_cap{
    position: absolute;
    bottom: 0%;
    height: 5%;
    width: 4.5%;
    top: 59%;
     left: 19.5%;
    z-index: 2;
    transition: 1s;
    
}

#water_bath_familiar{
  position: absolute;
  height: 27%;
  width: 20.5%;
  top: 64%;
  left: 1%;
  z-index: 2;
     transition: all;
     
  transition-duration: 1s

  
}

#clock_familiar{
  position: absolute;
  height: 24%;
  width: 10.5%;
  top: 66%;
  left: 62.1%;
  z-index: 25;
     transition: all;
     
  transition-duration: 1s

  
}

#clock{
  position: absolute;
  height: 26%;
  width: 12%;
  top: 66%;
  left: 44.1%;
  z-index: 25;
     transition: all;
     
  transition-duration: 1s

  
}

#clock1{
  position: absolute;
  height: 26%;
  width: 12%;
  top: 66%;
  left: 44.6%;
  z-index: 25;
     transition: all;
     
  transition-duration: 1s

  
}

#butyrometer_cork_familiar{
  position: absolute;
  height: 8%;
  width: 3.8%;
  top: 86%;
  left: 60%;
  z-index: 40;
     transition: all;
     
  transition-duration: 1s

  
}

#pipette_familiar{
  position: absolute;
  height: 50%;
  width: 4%;
  top: 66%;
  left: 45%;
  z-index: 2;
     transition: all;
     transform: rotate(90deg);
     
  transition-duration: 1s

  
}

#butyrometer_familiar{
  position: absolute;
  height: 58%;
  width: 28%;
  top: 34%;
  left: 70%;
  z-index: 2;
     transition: all;
     
  transition-duration: 1s

  
}

#isoamyl_familiar{
  position: absolute;
  height: 26%;
  width: 8%;
  top: 63%;
  left: 37%;
  z-index: 2;
     transition: all;
     
  transition-duration: 1s

  
}

#centrifuge_familiar{
  position: absolute;
  height: 33%;
  width: 13%;
  top: 60.3%;
  left: 23%;
  z-index: 2;
     transition: all;
     
  transition-duration: 1s

  
}


#milk_beaker_familiar{
  position: absolute;
  height: 30%;
  width: 18%;
  top: 61.5%;
  left: 50%;
  z-index: 2;
     transition: all;
     
  transition-duration: 1s

  
}

#sulphuric-acid_familiar{
  position: absolute;
  height: 25%;
  width: 6.5%;
  top: 63.5%;
  left: 46%;
  z-index: 2;
     transition: all;
     
  transition-duration: 1s

  
}

#sulphuric-acid_solution_familiar{
  position: absolute;
  height: 13%;
  width: 6.5%;
  top: 75.5%;
  left: 46%;
  z-index: 1;
     transition: all;
     
  transition-duration: 1s

  
}

#tooltip {
  position: absolute;
  background: black;
  color: white;
  padding: 0.4rem 0.6rem;
  border-radius: 0.8rem;
  font-size: 1rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 1000;
}

.equipment {
  cursor: pointer;
}

.popup-card {
  position: absolute;
  top: 16%;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  padding: 1.25rem 1.56rem;   /* 20px 25px */
  border-radius: 0.75rem;     /* 12px */
  box-shadow: 0 0.5rem 1.25rem rgba(0,0,0,0.25); /* 8px 20px */
  z-index: 1000;
  width: 48.75rem;            /* 300px */
  text-align: center;
  animation: fadeIn 0.4s ease;
}

.popup-card button {
  margin-top: 0.62rem;        /* 10px */
  padding: 0.375rem 0.875rem;/* 6px 14px */
  border: none;
  background: #007bff;
  color: white;
  border-radius: 0.375rem;    /* 6px */
  cursor: pointer;
}

.exp-title {
  font-size: 2rem;
  margin-bottom: 0.4rem;
}

.step-title {
  font-size: 1.3rem;
  color: #007bff;
  margin-bottom: 0.3rem;
}

.tip-text {
  font-size: 1rem;
}


@keyframes fadeIn {
  from { opacity: 0; transform: translate(-50%, -20px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}


#sulphuric{
    position: absolute;
    height: 27%;
    width: 6.5%;
    top: 63%;
    left: 18%;
    z-index: 2;
       transition: all;   
    transition-duration: 1s
}


#sulphuricsol{
    position: absolute;
    height: 17%;
    width: 6.5%;
    /* top: 73%; */
    bottom: 10%;
    left: 18.0%;
    transition: all;
    transition-duration: 1s
}

#sulcap{
    position: absolute;
    height: 15%;
    width: 7%;
    top: 57.2%;
    left: 17.7%;
    transition: all;
    transition-duration: 1s;
}

#pipette{
    position: absolute;
    height: 40%;
    width: 3.5%;
    top: 72%;
    left: 18.1%;
    rotate: -90deg;
    transition: all;
    transition-duration: 1s;
    z-index: 1;;;
    /* transition: transform 1s ease-in-out; */


}

#pipette_centrifuge{
    position: absolute;
    height: 30%;
    width: 2.6%;
   bottom: -9%;
    left: 38.1%;
    rotate: -90deg;
    transition: all;
    transition-duration: 1s;
    z-index: 18;
    /* transition: transform 1s ease-in-out; */
}

#pipette_21ml{
    position: absolute;
    height: 0%;
    width: 0.6%;
   bottom: 20.5%;
    left: 47.1%;
    rotate: 0deg;
    transition: all;
    transition-duration: 1s;
    z-index: 17;
    /* transition: transform 1s ease-in-out; */
}

#milk-beaker-overlay{
    position: absolute;
    height: 18%;
    width: 15.5%;
    bottom: 9.24%;
   
    left: 39.3%;
    transition: all;
    transition-duration: 1s;
    
    
   
}
#pipette_milk{
    position: absolute;
    transform-origin: bottom;
    height: 18.7%;
    width: 0.85%;
    bottom: 23.8%;
    left: 42.6%;
    transition: all;
    transition-duration: 1s;
    z-index: 1;
    opacity: 0%;
   
    
    


}

/* #baloon{
    position: absolute;
    height: 8%;
    width: 3%;
    top: 89%;
    left: 9.5%;
    rotate: -90deg;
} */

/* #pipettesol{
    position: absolute;
    height: 6%;
    width: 0.85%;
    bottom: 13%;
    left: 20.9%;
    transition: all;
    transition-duration: 1s;
} */

#pipettesol{
    position: absolute;
    height: 16.02%;
    width: 0.8%;
    bottom: 17%;
    left: 20.9%;
    transition: all;
    transition-duration: 1s;
    z-index: -0.7;
    opacity: 0%;
   
   
    
}
#pipette_amyl{
    position: absolute;
    /* height: 16.02%;
    width: 0.8%; */
                            bottom: 33%;
    /* left: 20.9%; */
    
    z-index: 1;
    opacity: 0%;
    width: 0.8%;
    height: 5%;
                         left: 21.4%;
    transition: all;
    transition-duration: 1s;
    /* left: 74.1%; */    
}
#amyl_drop1{
    position: absolute;
    /* height: 16.02%;
    width: 0.8%; */
                            bottom: 54%;
    /* left: 20.9%; */
    
    z-index: -0.7;
    opacity: 0%;
    width: 0.5%;
    height: 3%;
                         /* left: 21.4%; */
    transition: all;
    transition-duration: 1s;
    left: 74.25%;
}
#amyl_drop2{
    position: absolute;
    /* height: 16.02%;
    width: 0.8%; */
                            bottom: 54%;
    /* left: 20.9%; */
    
    z-index: 2;
    opacity: 0%;
    width: 0.5%;
    height: 3%;
                         /* left: 21.4%; */
    transition: all;
    transition-duration: 1s;
    left: 74.25%;

   
   
    
    
}

/* #stp1{
    position: absolute;
    height: 100%;
    width: 100%;
    visibility:visible ;
} */

#stp23{
    
    visibility:hidden ;
}
#stp32{
 
    visibility:hidden;
}
#stp171{
 
  visibility:hidden;
}
#stp993{
 
    visibility:hidden;
}
#stp33{
   
 
    visibility:hidden;
}
#stp77{
 
    visibility:hidden;
   
}
#stp70{
  
    visibility: hidden ;
}
#stp12{
  
    visibility: visible;
   
}
#stp118{
  
  visibility: hidden;
 
}
/* .dp{
    position: absolute;
    height: 2%;
    width: 7%;
    left: 22%;
    bottom: 19%;
    /* bottom: 20%; */
    /* top: 60%; */
    /* left: 62.5%;
    left: 38.5%;
    left: 50.5%; */
    /* transition: all;
    transition-duration: 1s; */
/* } */

/* .petri{
    position: absolute;
    height: 3%;
    width: 5%;
    /* top: 87%;
    left: 29.5%; */
    /* transition: all;
    transition-duration: 1s; */
    
/* } */

#petri1{
    top: 80%;
    left: 30.5%;

}

#petri2{
    top: 83%;
    left: 29.5%;
    
}

#petri3{
    top: 88%;
    left: 27.5%;
    
}

#petri4{
    top: 83%;
    left: 32.5%;
    /* rotate: 10deg; */
    
}

#petri5{
    top: 86%;
    left: 28.5%;
    /* rotate: -10deg; */
}



#machine{
    position: absolute;
    height: 20%;
    width: 18%;
    top: 70%;
    left: 3%;
}

#on{
    position: absolute;
    top: 82%;
    left: 5%;
    color: white;
    padding: 0.1%;
    background-color: red;
    border-radius: 10%;
    font-size: 0.8vw;

} */




#bread{
    position: absolute;
    top: 81%;
    left: 22%;
    height: 15%;

}


#observe{
    height: 100%;
    width: 100%;
    position: absolute;
    background-color: white;
    text-align: center;
    font-size: 8vw;
    justify-items: center;
    opacity: 0%;
    /* opacity: 100%; */
    visibility: hidden;
    /* visibility: visible; */
    transition: all;
    transition-duration: 1s;
    
}

#obtext{
    position: absolute;
    top: 20%;
    left: 8%;
    /* top: 5%;
    left: 40%;
    font-size: 5vw; */
    transition: all;
    transition-duration: 1s;
}

#inftext{
    position: absolute;
    top: 30%;
    font-size: 2.5vw;
    font-weight: 300;
    top: 20%;
    left: 10%;
    opacity: 0%;
    transition: all;
    transition-duration: 1s;
}

#tablesdiv{
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: white;
    border: 1px solid black;
    opacity: 0%;
    visibility: hidden;
    /* opacity: 100%;
    visibility: visible;  */
    transition: all;
    transition-duration: 1s;
}

.tbl1,th,td{
    color: rgb(0, 0, 0);
    border: 1px solid rgb(0, 0, 0);
    border-collapse: separate;
    text-align: center;
    justify-content: center;
    font-size: 1.4vw;
}

#table1{
    position: absolute;
    height: 50%;
    width: 70%;
    top: 25%;
    left: 15%;
}

#tabletext{
    position: absolute;
    top: 18%;
    left: 13%;
    font-size: 2vw;
    font-weight: 800;
}

#fullform{
    position: absolute;
    font-size: 1vw;
    font-weight: 500;
    top: 80%;
    left: 15%;
} 






















@keyframes blinking {
    0%{opacity: 100%;}
    50%{opacity: 0%;}
    100%{opacity: 100%;}
}

@keyframes vibrate {
    0%{scale: 1.1;}
    50%{scale: 1.0;}    
    100%{scale: 1.1;}
    
}

@keyframes Steps{
    0%{left: -641px;}
    100%{left: 0px;}
}