.card{
margin-bottom: 5px;
}

#flowercss{
    position: relative;
    top:10%;
    left:1%;
    width:35%;
    cursor: pointer; /* stem outline 2D7600 */
    display: none;
    z-index: 2;
    transform: rotate(-45deg);

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

#petalcss{
    position:absolute;
    top:32%;
    left:44%;
    width:22%;
    cursor: pointer; /* stem outline 2D7600 */
    display: block;
    z-index: 3;
    transform: rotate(-45deg);
}

#fingerthumbcss{
    position: absolute;
    top:20%;
    left:6%;
    width:7%;
    cursor: pointer; /* stem outline 2D7600 */
    display: none;
    z-index: 4;
}

#fingerindexcss{
    position: absolute;
    top:20%;
    left:7%;
    width:6%;
    cursor: pointer; /* stem outline 2D7600 */
    display: none;
}




#bladecssls {
    position: absolute;
    top: 5%; /* 5 -- 55 -- */
    left:95%; /* 95 -- 60*/
    width: 12%;
    cursor: pointer;
    display: block;
    z-index: 2;
   /*transform: rotateX(80deg);*/
   
    
}

#forcepcssls{
    position: absolute;
    top: 15%;
    left:98%;
    width:5%;
    cursor: pointer;
    transform: rotate(90deg);
}



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

#glassslidecssls {
    position: absolute;
    top: 50%;
    left:95%;
    width: 20%;
    cursor: pointer;
    z-index: 2;
    opacity:40%;
}


/************************************* transverse section *************************************************/


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

#flowerovarysectioncssts1{
    position:relative;
    top:5%;
    left:8%;
    width:15%;
    cursor: pointer; /* stem outline 2D7600 */
    display: none;
    z-index: 2;
}

#flowerovarysectioncssts2{
    position:absolute;
    top:38.5%;
    left:50%;
    width:0.5%;
    cursor: pointer; /* stem outline 2D7600 */
    display: none;
    z-index: 3;
}

#fingerthumbcssts{
    position: absolute;
    top:8%; /* 8 -- 8 -- 12 -- 8-- 12 -- 20 -- 8  */
    left:91%; /*91 -- 54 --56 -- 91 -- 56 -- 83 --91   */
    width:6%;
    cursor: pointer; 
    display: none;
    z-index: 3;
}

#fingerindexcssts{
    position: absolute;
    top:8%; /* 8 --  8-- 12 -- 8-- 12 -- 20 -- 8  */
    left:91%; /*91 -- 54 --56 -- 91 -- 56 -- 83 -- 91 */
    width:6%;
    cursor: pointer; 
    display: none;
}


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

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

#petridishwatercssts{
    position: absolute;
    top: 44%; 
    left: 45%; 
    width:15%;
    height:6.2%;
    cursor: pointer;
    display: block;
    opacity: 80%;
    z-index: 3;
    
}

#bladecssts {
    position: absolute;
    top: 5%; /* -5 -- 5 */
    left:55%; /* 25 -- 2*/
    width: 12%;
    cursor: pointer;
    display: block;
    z-index: 2;
   /*transform: rotateX(80deg);*/
   
    
}

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



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

#glassslidecssts {
    position: absolute;
    top: 50%;
    left:70%;
    width: 20%;
    cursor: pointer;
    z-index: 2;
    opacity:40%;
}

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

#safranindroppercss{
    position: absolute;
    top: 69%; /* 25- 68*/
    left:91.8%; /*68- 75 */
    width:3%;
    cursor: pointer;
    display: block;
}

#safranindropcss{
    position: absolute;
    top: 53%;  
    left:79%; 
    width:3%;
   cursor: pointer;
    display: none;
    z-index: 11;
    opacity: 85%;
}


#coverslipcssts {
    position: absolute;
    top: 28%;  /*25 -- 65 */
    left: 68%; /*63 -- 68 */
    width: 4.8%;
    cursor: pointer;
    opacity: 50%;
    z-index: 5;
}

#brushcssts{
    position: absolute;
    top: 0%;  /*0*/
    left:90%; /*90*/
    width:1.4%;
    cursor: pointer;
    transform: rotate(20deg);
    z-index: 3;
}
#droppercssts{
    position: absolute;
    top: 67.2%;
    left:75%;
    width:3.5%;
    cursor: pointer;
}

#dropperwatercssts{
    position: absolute;
    top: 65%; /* 68*/
    left:65%; /*75 */
    width:3.5%;
    cursor: pointer;
    display: none;
    
}


#waterdropcssts{
    position: absolute;
    top: 52%;  /*45 */
    left:78%; 
    width:4%;
    cursor: pointer;
    display: none;
    z-index: 11;
    opacity: 90%;
}

#safraninbottlecssts{
    position: absolute;
    top: 45%; /* 25- 68*/
    left: 92%; /*68- 75 */
    width:7%;
    cursor: pointer;
    display: block;
    z-index: 2;
}

#safranindroppercssts{
    position: absolute;
    top: 31%; /* 25- 68*/
    left:93.85%; /*68- 75 */
    width:3%;
    cursor: pointer;
    display: block;
   
    
}

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

/* column 1 ends */

/* column 2 starts */
#mircoscopecss {
    position: relative;
    cursor: pointer;
    top: 5%;
    left:1%;
    width:50%
   
}

#labpersoncss {
    cursor: pointer;
    position: absolute;
    top: 40%;
    left:50%;
    width:40%
   
}
#mircoscopeslidecssts {
   
    position:absolute;
    cursor: pointer;
    top:61%;
    left:19%;
    width:3.5%;
    height:3%;
    transform: rotate(90deg);
    display:none;
    z-index: 2;
}

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

/* column 2 ends */