/* 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);
    overflow: hidden;
}

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

.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: 10%;
    padding: 0.5%;
    font-size: 1vw;
    left: 90%;
    top: 90%;
    border: none;
    background-color: rgb(6, 255, 247);
    box-shadow: 1px 1px 0px 0.5px;
    font-weight: 1000;
    font-family: 'Times New Roman', Times, serif;
    animation: vibrate;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

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









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

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

}

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

}


/* ********************************************************************   all elements   ********************************************************************** */


#expon{
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: white;
    transition: all;
    transition-duration: 1s;
    opacity: 0%;

}

#titletext{
    position: absolute;
    font-size: 0.01vw;
    text-align: center;
    height: 100%;
    width: 100%;
    font-weight: 1000;
    transition: all;
    transition-duration: 2s;
    opacity: 0%;
}   

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

#msolution{
    position: absolute;
    height: 0%;
    width: 2.78%;
    /* top: 62%; */
    bottom: 11%;
    left: 9.1%;
    transition: all;
    transition-duration: 1s;
}

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


#distilled{
    position: absolute;
    height: 30%;
    width: 10%;
    top: 60%;
    left: 25%;
    transition: all;
    transition-duration: 1s;


}

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

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

#sulphuricsol{
    position: absolute;
    height: 17%;
    width: 6.3%;
    /* top: 73%; */
    bottom: 10%;
    left: 18.1%;
    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;

}

#pipettesol{
    position: absolute;
    height: 0%;
    width: 0.84%;
    bottom: 13%;
    left: 20.85%;
    transition: all;
    transition-duration: 1s;
}

#machine{
    position: absolute;
    height: 20%;
    width: 18%;
    top: 70%;
    left: 3%;
    transition: all;
    transition-duration: 1s;
}

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

}

#on:active{
    scale: 0.9;
}

#tare{
    position: absolute;
    top: 82%;
    left: 16.5%;
    color: rgb(0, 0, 0);
    padding: 0.1%;
    background-color: rgb(238, 245, 42);
    border-radius: 10%;
    font-size: 0.8vw;
    /* box-shadow: none; */
    transition: all;
    transition-duration: 1s;

}

#tare:active{
    scale: 0.9;
}


#reading{
    position: absolute;
    top: 79.5%;
    /* left: 8.9%; */
    right: 85.53%;
    font-family: digital;
    font-weight: 300;
    color: rgb(138, 234, 3);
    font-size: 2.3vw;
    transition: all;
    transition-duration: 1s;
    opacity: 0%;
    
}


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

}


#cflask50{
    position: absolute;
    height: 30%;
    width: 8%;
    top: 60%;
    left: 70%;
    opacity: 0%;
    transition: all;
    transition-duration: 1s;

}

#tflask{
    position: absolute;
    height: 30%;
    width: 8%;
    top: 60%;
    left: 70%;
    opacity: 0%;
    visibility: visible;
    transition: all;
    transition-duration: 1s;

}

#spatula{
    position: absolute;
    height: 20%;
    top: 83%;
    left: 15%;
    rotate: 30deg;
    transition: all;
    transition-duration: 1s;
}

.sample{
    position: absolute;
    height: 7%;
    width: 3.3%;
    top: 65.8%;
    /* top: 42.6%; */
    left: 32.5%;
    /* left: 32.9%; */
    rotate: -50deg;
    transition: all;
    transition-duration: 1s;

    /* visibility: visible; */
}


#starch{
    position: absolute;
    height: 28%;
    width: 8%;
    top: 65%;
    left: 30%;
    transition: all;
    transition-duration: 1s;
}

#cap{
    position: absolute;
    height: 4.5%;
    width: 5.4%;
    top: 63.5%;
    left: 31.3%;
    transition: all;
    transition-duration: 1s;
}

/* *****************************************************************   STEP 1   *********************************************** */

#stp1{
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden;


}

/* *******************************************************************   STEP 2   ************************************************* */

#stp2{
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden;
    visibility: hidden;
}

/* ******************************************************************   STEP 3   ******************************************************** */

#stp3{
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden;
    visibility: hidden;
}

#bnob{
    position: absolute;
    height: 7.8%;
    width: 0.65%;
    top: 54.5%;
    left: 14.43%;
    transition: all;
    transition-duration: 1s;
}

#eburette{
    position: absolute;
    height: 85%;
    left: 5%;
    top: 10%;
    /* visibility: hidden; */
    transition: all;
    transition-duration: 1s;
}

#fburette{
    position: absolute;
    height: 85%;
    left: 5%;
    top: 10%;
    opacity: 0%;
    transition: all;
    transition-duration: 1s;
}

#bsol{
    position: absolute;
    width: 1.3%;
    left: 12.85%;
    bottom: 48.9%;
    /* height: 36.9%; */
    height: 0%;
    transition: all;
    transition-duration: 2s;
}

#funnel{
    position: absolute;
    height: 15%;
    width: 5%;
    top: 80%;
    left: 60%;
    rotate: 65deg;
    transition: all;
    transition-duration: 1s;
}

#pb{
    position: absolute;
    height: 25%;
    top: 65%;
    left: 50%;
    transition: all;
    transition-duration: 1s;

}

#pc{
    position: absolute;
    height: 28.5%;
    top: 57.2%;
    left: 51.05%;
    transition: all;
    transition-duration: 1s;

}

#naohhalf{
    position: absolute;
    height: 35%;
    left: 80%;
    top: 55%;
    opacity: 0%;
    transition: all;
    transition-duration: 1s;
}

#naoh{
    position: absolute;
    height: 35%;
    left: 80%;
    top: 55%;
    transition: all;
    transition-duration: 1s;
}

#drop{
    position: absolute;
    height: 3%;
    top: 54%;
    left: 73.5%;
    transition: all;
    transition-duration: 0.5s;
    opacity: 0%;
}

#titration{
    position: absolute;
    /* background-color: brown; */
    height: 10%;
    width: 2.5%;
    top: 54%;
    left: 13%;
}

/* ************************************************************    STEP 4   ************************************************* */

#stp4{
    position: absolute;
    height: 100%;
    width: 100%;
    visibility: hidden;
    
}

#stp4sol{
    position: absolute;
    height: 100%;
    width: 100%;
    visibility: hidden;
}

#v500{
    position: absolute;
    height: 50%;
    width: 12%;
    top: 40%;
    left: 40%;
    transition: all;
    transition-duration: 1s;
}

#tfsol{
    position: absolute;
    /* left: 45.6%; */
    right: 52%;
    width: 0.8%;
    top: 32.5%;
    height: 10%;
    rotate: 40deg;
    transition: all;
    transition-duration: 0.3s;
    opacity: 0%;
}

#fsol{
    position: absolute;
    left: 45.6%;
    width: 0.8%;
    top: 42%;
    /* height: 48%; */
    height: 0%;
    transition: all;
    transition-duration: 1s;


}

#vsol500{
    position: absolute;
    /* height: 0%; */
    opacity: 0%;
    width: 12%;
    bottom: 10%;
    left: 40%;
    height: 32%;
    transition: all;
    transition-duration: 1s;
}

#vsol50{
    position: absolute;
    bottom: 10%;
    /* left: 40.6%; */
    /* height: 3.5%; */
    height: 0%;
    left: 45.2%;
    transition: all;
    transition-duration: 1s;

}

#distilled2{
    position: absolute;
    height: 30%;
    width: 10%;
    top: 60%;
    left: 25%;
    transition: all;
    transition-duration: 1s;


}

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

#ms2{
    position: absolute;
    height: 0%;
    width: 0.3%;
    top: 35%;
    left: 45.6%;
    transition: all;
    transition-duration: 0.2s;
}

#fsol2{
    position: absolute;
    left: 45.6%;
    width: 0.8%;
    top: 41%;
    /* height: 45.6%; */
    /* height: 18.5%; */
    height: 0%;
    transition: all;
    transition-duration: 0.3s;


}


#funnel2{
    position: absolute;
    height: 15%;
    width: 5%;
    top: 80%;
    left: 60%;
    rotate: 65deg;
    transition: all;
    transition-duration: 1s;
}

/* ***********************************************************   STEP 5   **************************************************** */

#stp5{
    position: absolute;
    height: 100%;
    width: 100%;
    visibility: hidden;
}

#distilled3{
    position: absolute;
    height: 40%;
    width: 13%;
    top: 50%;
    left: 25%;
    transition: all;
    transition-duration: 1s;


}

#dwatersol3{
    position: absolute;
    height: 30.8%;
    width: 8.5%;
    /* top: 68%; */
    bottom: 10.2%;
    left: 25.1%;
    transition: all;
    transition-duration: 1s;
}

#v100{
    position: absolute;
    height: 40%;
    width: 10%;
    bottom: 10%;
    left: 40%;
    transition: all;
    transition-duration: 1s;
}

#mcyl50{
    position: absolute;
    height: 40%;
    bottom: 12%;
    left: 58%;
    transition: all;
    transition-duration: 1s;

}

#msol50{
    position: absolute;
    /* height: 16.5%; */
    height: 0;
    width: 3.5%;
    left: 59.4%;
    bottom: 13.4%;
    transition: all;
    transition-duration: 1s;
}

#vsol475{
    position: absolute;
    /* height: 0%; */
    opacity: 0%;
    width: 12%;
    bottom: 10%;
    left: 70%;
    height: 24%;
    transition: all;
    transition-duration: 1s;
}

#funnel3{
    position: absolute;
    height: 15%;
    width: 5%;
    top: 80%;
    left: 60%;
    rotate: 65deg;
    transition: all;
    transition-duration: 1s;
    /* visibility: hidden; */
}

#vsol25{
    position: absolute;
    bottom: 10%;
    /* height: 2.9%; */
    height: 0%;
    /* left: 40.5%; */
    left: 45%;
    transition: all;
    transition-duration: 1s;

}

#vsol100{
    position: absolute;
    /* height: 0%; */
    opacity: 0%;
    width: 10%;
    bottom: 10%;
    left: 40%;
    height: 25.5%;
    transition: all;
    transition-duration: 1s;
}

/* ********************************************************    STEP 6   ******************************************************* */

#stp6{
    position: absolute;
    height: 100%;
    width: 100%;
    visibility: hidden;

}

#fehlingA{
    position: absolute;
    height: 50%;
    top: 40%;
    left: 7%;
    transition: all;
    transition-duration: 1s;
}

#fusol1{
    position: absolute;
    left: 7.05%;
    height: 4.7%;
    width: 13.5%;
    /* top: 49.2%; */
    bottom: 45.9%;
    transition: all;
    transition-duration: 1s;
}

#fmsol1{
    position: absolute;
    left: 7.1%;
    width: 13.38%;
    height: 28.1%;
    bottom: 18%;
    transition: all;
    transition-duration: 1s;
}

#fbsol1{
    position: absolute;
    left: 7.05%;
    bottom: 10%;
    width: 13.5%;
    height: 9%;
    transition: all;
    transition-duration: 1s;
}

#fcapa{
    position: absolute;
    height: 5%;
    left: 10.5%;
    top: 38%;
    width: 6.6%;
    transition: all;
    transition-duration: 1s;
}

#fehlingB{
    position: absolute;
    height: 50%;
    top: 40%;
    left: 27%;
    transition: all;
    transition-duration: 1s;
}

#fusol2{
    position: absolute;
    left: 27.05%;
    height: 4.7%;
    width: 13.5%;
    /* top: 49.2%; */
    bottom: 45.9%;
    transition: all;
    transition-duration: 1s;
}

#fmsol2{
    position: absolute;
    left: 27.1%;
    width: 13.38%;
    height: 28.1%;
    bottom: 18%;
    transition: all;
    transition-duration: 1s;
}

#fbsol2{
    position: absolute;
    left: 27.05%;
    bottom: 10%;
    width: 13.5%;
    height: 9%;
    transition: all;
    transition-duration: 1s;
}

#fcapb{
    position: absolute;
    height: 5%;
    left: 30.5%;
    top: 38%;
    width: 6.6%;
    transition: all;
    transition-duration: 1s;
}

#mcyl10{
    position: absolute;
    height: 40%;
    top: 50%;
    left: 65%;
    transition: all;
    transition-duration: 1s;
}

#cflask100{
    position: absolute;
    height: 40%;
    top: 50%;
    left: 80%;
    transition: all;
    transition-duration: 1s;

}

#msol10{
    position: absolute;
    /* height: 37%; */
    /* height: 16.4%; */
    height: 0%;
    left: 66.4%;
    width: 3.59%;
    bottom: 11.33%;
    transition: all;
    transition-duration: 1s;
}

#pipette2{
    position: absolute;
    height: 40%;
    width: 3.5%;
    top: 72%;
    left: 63.1%;
    rotate: -85deg;
    transition: all;
    transition-duration: 1s;

}

#pipettesol50{
    position: absolute;
    height: 0%;
    width: 0.8%;
    bottom: 40%;
    left: 13.4%;
    transition: all;
    transition-duration: 1s;
}

#ms3{
    position: absolute;
    /* height: 28%; */
    height: 0%;
    width: 0.3%;
    top: 60%;
    left: 68.1%;
    transition: all;
    transition-duration: 0.2s;
}

#distilled4{
    position: absolute;
    height: 40%;
    width: 13%;
    top: 50%;
    left: 45%;
    transition: all;
    transition-duration: 1s;


}

#dwatersol4{
    position: absolute;
    height: 30.8%;
    width: 8.5%;
    /* top: 68%; */
    bottom: 10.2%;
    left: 45.1%;
    transition: all;
    transition-duration: 1s;
}

#sol20ml{
    position: absolute;
    height: 5%;
    width: 9.8%;
    bottom: 10%;
    left: 80.1%;
    opacity: 0%;
    transition: all;
    transition-duration: 1s;
}

#solblue{
    position: absolute;
    height: 5%;
    /* height: 4.5%; */
    /* left: 30.5%; */
    /* width: 11%; */
    /* bottom: 19.1%; */
    width: 9.8%;
    bottom: 20.1%;
    left: 30.6%;
    opacity: 0%;
    scale: 0.6;
    transition: all;
    transition-duration: 1s;

}

#solbrick{
    position: absolute;
    height: 5%;
    width: 9.8%;
    bottom: 20.1%;
    left: 30.6%;
    opacity: 0%;
    scale: 0.6;
    transition: all;
    transition-duration: 1s;
}

#sol10ml{
    position: absolute;
    height: 3%;
    width: 9%;
    bottom: 10%;
    left: 80.5%;
    opacity: 0%;
    transition: all;
    transition-duration: 1s;
}

#sol5ml{
    position: absolute;
    height: 1.8%;
    width: 8.4%;
    bottom: 10.2%;
    left: 80.9%;
    opacity: 0%;
    transition: all;
    transition-duration: 1s;
}


/* *******************************************************    STEP 7    ********************************************** */

#stp7{
    position: absolute;
    height: 100%;
    width: 100%;
    visibility: hidden;
    overflow: hidden;
}

#bstand2{
    position: absolute;
    height: 75%;
    top: 21%;
    left: 5%;
    transition: all;
    transition-duration: 1s;

}

#eburette2{
    position: absolute;
    height: 65%;
    left: 13%;
    top: 5%;
    transition: all;
    transition-duration: 1s;
    
}

#burettef2{
    position: absolute;
    height: 65%;
    left: 13%;
    top: 5%;
    opacity: 0%;
    transition: all;
    transition-duration: 1s;

}

#bsol2{
    position: absolute;
    /* height: 42.1%; */
    /* height: 34%; */
    height: 0%;
    left: 13.8%;
    /* top: 4.8%; */
    bottom: 40.1%;
    width: 1.45%;
    opacity: 100%;
    transition: all;
    transition-duration: 1s;

}

#hotplate{
    position: absolute;
    height: 20%;
    width: 15%;
    top: 75%;
    left: 30%;
    transition: all;
    transition-duration: 1s;

}

#mbottle{
    position: absolute;
    height: 20%;
    top: 70%;
    left: 50%;
    transition: all;
    transition-duration: 1s;

}

#mcap{
    position: absolute;
    height: 22%;
    top: 63.9%;
    left: 50.9%;
    transition: all;
    transition-duration: 1s;

}

#nob2{
    position: absolute;
    /* background-color: blueviolet; */
    height: 10%;
    width: 4%;
    top: 45%;
    left: 34%;
}

.drops{
    position: absolute;
    height: 2%;
    width: 0.5%;
    top: 60%;
    left: 35.3%;
    transition: all;
    transition-duration: 1s;
    visibility: hidden;
}

#dropblue{
    visibility: hidden;

}

.tables{
    position: absolute;
    background-color: white;
    border: 1px solid black;
}

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

th{
    font-size: 1.5vw;
}

#tbl1{
    height: 10%;
    width: 25%;
    top: 2%;
    right: 1%;
    visibility: hidden;
    transition: all;
    transition-duration: 1s;
}

#calculation1{
    position: absolute;
    height: 100%;
    width: 100%;
    opacity: 0%;
    background-color: white;
    transition: all;
    transition-duration: 1s;
    visibility: hidden;
}

#ffactor{
    position: absolute;
    font-size: 1.7vw;
    font-weight: 500;
    top: 30%;
    left: 30%;
}

#ffactorinput{
    /* border: 1px solid black; */
    font-size: 1.3vw;
    width: 35%;
    font-weight: bold;
}

#formulaimage{
    position: absolute;
    top: 65%;
    /* height: 15%; */
    height: 0%;
    /* height: 25%; */
    width: 30%;
    left: 35%;
    transition: all;
    transition-duration: 0.5s;
}

#formulatext{
    position: absolute;
    top: 61%;
    font-size: 1.3vw;
    color: blue;
    cursor: pointer;
    left: 25%;
}

.checked{
    position: absolute;
    background-color: greenyellow;
    padding: 2px;
    border-radius: 1%;
    top: 55%;
    left: 50%;
    /* height: 4%; */
    /* width: 5%; */
    font-size: 1vw;
    box-shadow: 0.5px 0.5px 0px 0px;
    border: 0.5px solid black;
}

.checked:active{
    scale: 0.9;
}

#checktext1{
    position: absolute;
    top: 30%;
    left: 50%;
    font-size: 1.3vw;
    font-weight: 500;
    /* color: green; */
}

#ansverify{
    position: absolute;
    color: green;
    top: 31%;
    left: 58%;
    visibility: hidden;
}

#resulttext1{
    position: absolute;
    top: 30%;
    left: 70%;
    font-size: 1.3vw;
    font-weight: 500;
    background-color: aqua;
    visibility: hidden;
}

#ffactorresult{
    position: absolute;
    top: 50%;
    left: 30%;
    font-weight: 500;
    font-size: 1.5vw;

}

/* *******************************************************   STEP 9   ***************************************** */

/* #stp9{
    position: absolute;
    height: 30%;
    width: 8%;
    visibility: hidden;
    overflow: hidden;
} */

#v250{
    position: absolute;
    height: 30%;
    width: 8%;
    top: 60%;
    left: 85%;
    transition: all;
    visibility: hidden;
    transition-duration: 1s;
}

#vsol250{
    position: absolute;
    /* height: 0%; */
    opacity: 0%;
    width: 8%;
    bottom: 10%;
    left: 85%;
    height: 19%;
    transition: all;
    transition-duration: 1s;
    visibility: hidden;
}

#funnel4{
    position: absolute;
    height: 15%;
    width: 5%;
    top: 80%;
    left: 60%;
    rotate: 65deg;
    transition: all;
    transition-duration: 1s;
    visibility: hidden;
}

#distilled5{
    position: absolute;
    height: 40%;
    width: 13%;
    top: 50%;
    left: 45%;
    transition: all;
    transition-duration: 1s;
    visibility: hidden;


}

#dwatersol5{
    position: absolute;
    height: 30.8%;
    width: 8.5%;
    /* top: 68%; */
    bottom: 10.2%;
    left: 45.1%;
    transition: all;
    transition-duration: 1s;
    visibility: hidden;
}

/* *****************************************************************   STEP 10   ************************************************* */

#stp10{
    position: absolute;
    height: 100%;
    width: 100%;
    visibility: hidden;
    overflow: hidden;
}

.conicals{
    position: absolute;
    height: 25%;
    top: 65%;
    width: 7%;
    transition: all;
    transition-duration: 1s;
}

#conical5{
    left: 5%;
}

#conical4{
    left: 13%;
}

#conical3{
    left: 21%;
}

#conical2{
    left: 29%;
}

#conical1{
    left: 37%;
}

.conicalsol{
    position: absolute;
    bottom: 10%;
    width: 6.95%;
    height: 14.2%;
    opacity: 0%;
    transition: all;
    transition-duration: 1s;

}

#conicalsol5{
    left: 5%;
}

#conicalsol4{
    left: 13%;
}

#conicalsol3{
    left: 21%;
}

#conicalsol2{
    left: 29%;
}

#conicalsol1{
    left: 37%;
}

#vsoln200{
    position: absolute;
    /* height: 0%; */
    opacity: 0%;
    width: 8%;
    bottom: 10%;
    left: 85%;
    height: 14.5%;
    transition: all;
    transition-duration: 1s;
}

#vsoln150{
    position: absolute;
    /* height: 0%; */
    opacity: 0%;
    width: 8%;
    bottom: 10%;
    left: 85%;
    height: 11.3%;
    transition: all;
    transition-duration: 1s;
}

#vsoln100{
    position: absolute;
    /* height: 0%; */
    opacity: 0%;
    width: 8%;
    bottom: 10%;
    left: 85%;
    height: 8%;
    transition: all;
    transition-duration: 1s;
}

#vsoln50{
    position: absolute;
    /* height: 0%; */
    opacity: 0%;
    width: 8%;
    bottom: 10%;
    left: 85%;
    height: 5%;
    transition: all;
    transition-duration: 1s;
}

#ms5{
    position: absolute;
    /* height: 28%; */
    height: 0%;
    width: 0.3%;
    top: 60%;
    left: 68.1%;
    transition: all;
    transition-duration: 0.2s;
}

#timerback{
    position: absolute;
    height: 18%;
    width: 10%;
    background-color: rgb(0, 0, 0);
    left: 2%;
    top: 0.5%;
    transition: all;
    transition-duration: 1s;
    color: white;
    opacity: 0%;

}

#forward{
    position: absolute;
    font-size: 1vw;
    left: 5%;
    padding: 1%;
}

#naming{
    position: absolute;
    bottom: 0%;
    left: 11%;
    font-size: 2vw;
}

#timevalue2{
    position: absolute;
    background-color: rgb(0, 0, 0);
    height: 10%;
    width: 10%;
    border: 1px solid black;
    color: rgb(255, 0, 0);
    font-family: digital;
    font-size: 3vw;
    text-align: center;
    justify-content: center;
    align-items: center;
    padding: 0.5%;
    top: 4%;
    left: 2%;
    border-radius: 3%;
    opacity: 0%;
    transition: all;
    transition-duration: 1s;
}

#amylasebottle{
    position: absolute;
    height: 25%;
    width: 5.5%;
    left: 85%;
    top: 65%;
    transition: all;
    transition-duration: 1s;
    visibility: hidden;
}

#amylasecap{
    position: absolute;
    height: 3.5%;
    width: 3.1%;
    top: 64.5%;
    left: 86.15%;
    transition: all;
    transition-duration: 1s;
    visibility: hidden;
}

.ts{
    position: absolute;
    font-size: 2.5vw;
    color: rgb(255, 255, 255);
    top: 75%;
    opacity: 0%;
    transition: all;
    transition-duration: 1s;
}

#t0{
    left: 7%;
}

#t1{
    left: 15%;
}

#t2{
    left: 23%;
}

#t3{
    left: 31%;
}

#t4{
    left: 39%;
}

#hotplatenew{
    position: absolute;
    height: 48%;
    width: 45%;
    left: 50%;
    top: 47%;
    transition: all;
    transition-duration: 1s;
    visibility: hidden;
    

}

#onbutton{
    position: absolute;
    height: 8%;
    width: 4%;
    top: 76.8%;
    left: 37.2%;
    transition: all;
    transition: 0.1s;
    opacity: 0%;
}

#onbutton:active{
    scale: 0.8;
}

#indicator{
    position: absolute;
    height: 5.1%;
    top: 77.9%;
    width: 3.5%;
    left: 49.1%;
    transition: all;
    transition-duration: 1s;
    opacity: 0%;
}

#offbutton{
    position: absolute;
    /* background-color: green; */
    height: 8%;
    width: 4%;
    top: 76.8%;
    left: 37.2%;
    transition: all;
    transition-duration: 0.1s;
}

#reading2{
    position: absolute;
    top: 78.3%;
    /* left: 8.9%; */
    right: 53.53%;
    font-family: digital;
    font-weight: 300;
    color: red;
    font-size: 2.3vw;
    transition: all;
    transition-duration: 1s;
    opacity: 0%;
    
}

#plus{
    position: absolute;
    top: 78%;
    left: 59%;
    width: 2.2%;

    color: white;
    padding: 0.1%;
    background-color: rgb(2, 17, 61);
    border-radius: 10%;
    font-size: 1.4vw;
    transition: all;
    transition-duration: 0.1s;

}

#plus:active{
    scale: 0.9;
}

#minus{
    position: absolute;
    top: 78%;
    left: 54%;
    width: 2.2%;
    color: white;
    padding: 0.1%;
    background-color: rgb(2, 17, 61);
    border-radius: 10%;
    font-size: 1.4vw;
    transition: all;
    transition-duration: 0.1s;

}

#minus:active{
    scale: 0.9;
}

#controls{
    visibility: hidden;
}


/* ******************************************************   STEP 12   ********************************************* */


#stp12{
    position: absolute;
    height: 100%;
    width: 100%;
    visibility: hidden;
    /* visibility: visible; */
    overflow: hidden;
}

.sconicals{
    position: absolute;
    height: 35%;
    width: 11%;
    top: 55%;
    left: 110%;
    transition: all;
    transition-duration: 1s;
}

#sconicalsol1{
    position: absolute;
    width: 9%;
    bottom: 10%;
    left: 81%;
    height: 2%;
    opacity: 0%;
    transition: all;
    transition-duration: 1s;
}

#sconicalsol2{
    position: absolute;
    width: 10%;
    bottom: 10%;
    left: 80.5%;
    height: 3%;
    opacity: 0%;
    transition: all;
    transition-duration: 1s;
}

/* #sconicalsol3{
    position: absolute;
    width: 11%;
    bottom: 10%;
    left: 80%;
    height: 4.5%;
    opacity: 0%;
    transition: all;
    transition-duration: 1s;
} */

.sconicalsols{
    position: absolute;
    width: 11%;
    bottom: 10%;
    left: 110%;
    height: 4.5%;
    opacity: 0%;
    transition: all;
    transition-duration: 1s;
}

/* *******************************************************   SECOND TITRATION TABLES AND CALCULATION   ****************************************** */

#tbl3{
    height: 30%;
    width: 25%;
    top: 2%;
    right: 1%;
    visibility: hidden;
    transition: all;
    transition-duration: 1s;
}

/* ************************************************************   step 14   ****************************************** */

#stp14{
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: white;
    visibility: hidden;
    transition: all;
    transition-duration: 0.5s;
}

#tbl2{
    /* position: absolute; */
    height: 15%;
    width: 40%;
    top: 5%;
    left: 30%;
    /* visibility: visible; */
    transition: all;
    transition-duration: 0.5s;
}

#rsugar{
    position: absolute;
    font-size: 1.7vw;
    font-weight: 700;
    top: 40%;
    left: 25%;
    /* transition: all;
    transition-duration: 0.5s; */
}

#rsugarinput{
    /* border: 1px solid black; */
    font-size: 1.3vw;
    width: 30%;
    font-weight: bold;
    /* transition: all;
    transition-duration: 0.5s; */
}

#formulaimage2{
    position: absolute;
    top: 66%;
    height: 0%;
    /* height: 20%; */
    /* height: 25%; */
    width: 30%;
    left: 35%;
    transition: all;
    transition-duration: 0.5s;
}

#formulatext2{
    position: absolute;
    top: 61%;
    font-size: 1.3vw;
    color: blue;
    cursor: pointer;
    left: 25%;
    transition: all;
    transition-duration: 0.5s;
}

#checktext2{
    position: absolute;
    top: 40%;
    left: 50%;
    font-size: 1.3vw;
    font-weight: 500;
    /* color: green; */
    /* transition: all;
    transition-duration: 0.5s; */
}

#ansverify2{
    position: absolute;
    color: green;
    top: 41%;
    left: 58%;
    visibility: hidden;
}

#resulttext2{
    position: absolute;
    top: 40%;
    left: 70%;
    font-size: 1.3vw;
    font-weight: 500;
    background-color: aqua;
    visibility: hidden;
}

/* *************************************************************   step 15   *********************************************** */

#stp15{
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: white;
    visibility: hidden;
    text-align: center;
}

#inference{
    /* position: absolute; */
    font-size: 4vw;
    padding: 2%;
    /* left: 40%; */
}

#outcome{
    /* position: absolute; */
    padding: 1%;
    margin-top: 0%;
    font-size: 1.3vw;
    font-weight: 500;
}

#graph{
    /* position: absolute; */
    height: 40%;
    margin-top: 2%;
    /* left: 0%; */
}

#graphtext{
    font-size: 1.3vw;
    font-weight: 500;
    padding: 1%;
    margin-top: 1%;
}