.card{
    margin-bottom: 5px;
    }


#stemcss{
    position: relative;
    top:5%;
    left:1%;
    width:28%;
    cursor: pointer; /* stem outline 2D7600 */
    display: block;
    z-index: 2;
}

#fingerthumbcss{
    position: absolute;
    top:55%;
    left:12%;
    width:6%;
    cursor: pointer; /* stem outline 2D7600 */
    display: block;
    z-index: 3;
}

#fingerindexcss{
    position: absolute;
    top:55%;
    left:12%;
    width:6%;
    cursor: pointer; /* stem outline 2D7600 */
    display: block;
}

#cutstemcss{
    position: relative;
    top:2%;
    left:1%;
    width:28%;
    cursor: pointer;
    display: none;
}

#cutstemseccss{
    position: absolute; 
    top: 40.5%;
    left:72%;
    width:1.2%;
    cursor: pointer;
    transform: rotate(270deg);
    z-index: 2;
    display: none;
}

#smallcutstemseccss{
    position: absolute;
    top:48.5%;
    left:67%;
    width:0.7%;
    cursor: pointer;
    display: none;
    z-index: 2;
}

#safpetridishcss {
    position: absolute;
    top: 45%;
    left:20%;
    width: 15%;
    cursor: pointer;
    display: block;
    
}

#petridishcss {
    position: absolute;
    top: 45%;
    left:40%;
    width: 15%;
    cursor: pointer;
    display: block;
    
}


#bladecss {
    position: absolute;
    top: 5%; /* 5 -- 63 -- 54 */
    left:40%; /* 3-- 40 -- 60*/
    width: 12%;
    cursor: pointer;
    display: block;
    z-index: 3;
    
    
    
}

#bladecsscorkcut{
    position: absolute;
    top: 5%;
    left:60%;
    width: 12%;
    cursor: pointer;
    display: none;
    z-index: 2;
}




#glassslidecss {
    position: absolute;
    top: 45%;
    left:60%;
    width: 20%;
    cursor: pointer;
}

#coverslipcss {
    position: absolute;
    top: 23%;  /*45 */
    left:79%; /*65 */
    width: 4.8%;
    cursor: pointer;
    opacity: 50%;
    z-index: 5;
}

#beakercss {
    position: absolute;
    top: 75%;
    left:60%;
    width:11%;
    cursor: pointer;
    z-index: 2;
}

#beakerwatercss{
    position: absolute;
    top: 75%;
    left:40%;
    width:11%;
    cursor: pointer;
    z-index: 2;
}


#safbeakercss{
    position: absolute;
    top: 77%;
    left:90%;
    width:7%;
    cursor: pointer;
    z-index: 2;
}

#fastgreenbottlecss{
    position: absolute;
    top: 77%;
    left:82%;
    width:7%;
    cursor: pointer;
    z-index: 2;  
}

#brushcss{
    position: absolute;
    top: 0%;  /*0*/
    left:90%; /*90*/
    width:1.4%;
    cursor: pointer;
    transform: rotate(20deg);
    z-index: 1;
}


#forcepcss{
    position: absolute;
    top: 0.5%;
    left:75%;
    width:5%;
    cursor: pointer;
    transform: rotate(90deg);
}



#pickforcepcss{
    position: absolute;
    top: 29.2%;
    left:74%;
    width:1.5%;
    cursor: pointer;
    transform: rotate(46deg);
    z-index: 2;
    display: none;
}


#droppercss{
    position: absolute;
    top: 67.2%;
    left:75%;
    width:3.5%;
    cursor: pointer;
}

#dropperwatercss{
    position: absolute;
    top: 67%; /* 25*/
    left:45%; /*68 */
    width:3.5%;
    cursor: pointer;
    display: none;
}

#dropperdistwatercss{
    position: absolute;
    top: 67%; 
    left: 66%; 
    width:3.5%;
    cursor: pointer;
    display: none;
}

#safranindroppercss{
    position: absolute;
    top: 69.8%; /* 25- 68*/
    left:91.7%; /*68- 75 */
    width:3.5%;
    cursor: pointer;
    display: block;
}

#fastgreendroppercss{
    position: absolute;
    top: 69.8%; 
    left:83.6%; 
    width:3.5%;
    cursor: pointer;
    display: block;
}

#safranindropcss{
    position: absolute;
    top: 47%;  
    left:67%; 
    width:3%;
   cursor: pointer;
    display: none;
    z-index: 11;
    opacity: 85%;
    
    /*   top: 34.7%;  
    left:26.5%; 
    transform: rotate(90deg); 
    width:2.2%;
    height:28%;*/
}

 #watercontainingcss {
    position: absolute;
    top: 34.7%;  
    left:47%; /*26.5  */
    width:2.2%;
    height:28%;
    cursor: pointer;
    display: block;
    z-index: 11;
    opacity: 85%;
    transform: rotate(90deg);
  }


#distwaterdropcss{
    position: absolute;
    top: 47%;  /*45 */
    left:67%; 
    width:3%;
    cursor: pointer;
    display: none;
    z-index: 11;
    opacity: 80%;
    /*transform: rotate(90deg);
     top: 34%;  
     left:46.5%; 
     width:2.8%;
     height:28%;
    */
}



#waterdropcss{
    position: absolute;
    top: 46.3%;  /*45 */
    left:67%; 
    width:4%;
    cursor: pointer;
    display: none;
    z-index: 11;
    opacity: 70%;
}


#dropcss{
    position: absolute;
    top: 45%;  /*45 -- 48*/
    left:69.3%; 
    width:0.8%;
    cursor: pointer;
    display: none;
}

#fastgreendropcss{
    position: absolute;
    top: 47%;  /*45 -- 48*/
    left:67%; 
    width:4%;
    cursor: pointer;
    display: none;
}

/* column 1 ends */

/* column 2 starts */

#mircoscopecss {
    cursor: pointer;
    position: relative;
    top: 5%;
    left:1%;
    width:40%
   
}

#labpersoncss {
    cursor: pointer;
    position: absolute;
    top: 90%;
    left:60%;
    width:30%
   
}

#mircoscopeslidecss {
    cursor: pointer;
    position:absolute;
    top:61%;
    left:16%;
    width:3.5%;
    height:3%;
    transform: rotate(90deg);
    display:none;
}


#stemshowimg{
    cursor: pointer;
    position:absolute;
    top:5%;
    left:0%; 
    display: none;
   z-index: 2;
}

/* column 2 ends */