.process-table{
                width: 800px;
                height: 450px;
                background: #ededed;
                position: relative;
            }
            .process-table::before{
                content: "";
                border-bottom:200px solid #44b0ff;
                border-left:100px solid #ededed;
                border-right:100px solid #ededed;
                width:500px;
                background: #44b0ff;
                position: absolute;
                bottom: 60px;
                left: 50px;
                -webkit-box-shadow: 0px 10px 0px -1px #0272c4;
                -moz-box-shadow: 0px 10px 0px -1px #0272c4;
                box-shadow: 0px 10px 0px -1px #0272c4;
            }
            .image-scale-custom{
                width: 300px;
                height: 120px;
                position: absolute;
                left: calc((800px / 2) - (150px / 2) );
                background-image: url(../images/hotplate_0.png);
                background-position: center;
                background-size: contain;
                background-repeat: no-repeat;
                bottom: 100px;
            }
            .image-scale-full{
                width: 100px;
                height: 200px;
                position: absolute;
                left: calc((800px / 2) - (150px / 2) + 100px );
                background-position: center;
                background-size: contain;
                background-repeat: no-repeat;
                bottom: 175px;
            }
            
            .image-scale-half{
                width: 80px;
                height: 220px;
                position: absolute;
                left: calc((800px / 2) - (150px / 2) - 150px);
                background-position: center;
                background-size: contain;
                background-repeat: no-repeat;
                bottom: 100px;
            }
            
            .image-scale-half>img{
                width: auto;
                height: 100%;
            }
            .image-scale-half.animate{
                animation: projection_glacial 5s;
            }
            @keyframes projection_glacial{
                0%{
                    background-image: url(../images/glacial_1.png);
                    transform: rotateZ(90deg);
                    top: 0px;
                    left: calc((800px / 2) - (150px / 2) + 72px); 
                    
                }
                5%{
                    background-image: url(../images/glacial_2.png);
                    transform: rotateZ(90deg);
                    top: 0px;
                    left: calc((800px / 2) - (150px / 2) + 72px); 
                }
                10%{
                    background-image: url(../images/glacial_3.png);
                    transform: rotateZ(90deg);
                    top: 0px;
                    left: calc((800px / 2) - (150px / 2) + 72px); 
                }
                15%{
                    background-image: url(../images/glacial_4.png);
                    transform: rotateZ(90deg);
                    top: 0px;
                    left: calc((800px / 2) - (150px / 2) + 72px); 
                }
                20%{
                    background-image: url(../images/glacial_5.png);
                    transform: rotateZ(90deg);
                    top: 0px;
                    left: calc((800px / 2) - (150px / 2) + 72px); 
                }
                25%{
                    background-image: url(../images/glacial_6.png);
                    transform: rotateZ(90deg);
                    top: 0px;
                    left: calc((800px / 2) - (150px / 2) + 72px); 
                }
                50%{
                    background-image: url(../images/glacial_6.png);
                    transform: rotateZ(90deg);
                    top: 0px;
                    left: calc((800px / 2) - (150px / 2) + 72px ); 
                }
                
                60%{
                    background-image: url(../images/glacial_7.png);
                    transform: rotateZ(90deg);
                    top: 0px;
                    left: calc((800px / 2) - (150px / 2) + 72px ); 
                }
                80%{
                    background-image: url(../images/glacial_7.png);
                    transform: rotateZ(50deg);
                    top: 0px;
                    left: calc((800px / 2) - (150px / 2) + 20px ); 
                }
                
            }
            .image-scale-half.animate-2{
                animation: projection_formaldehyde 5s;
            }
            @keyframes projection_formaldehyde{
                0%{
                    background-image: url(../images/formaldehyde_1.png);
                    transform: rotateZ(90deg);
                   top: 0px;
                    left: calc((800px / 2) - (150px / 2) + 72px );
                    
                }
                5%{
                    background-image: url(../images/formaldehyde_2.png);
                    transform: rotateZ(90deg);
                    top: 0px;
                    left: calc((800px / 2) - (150px / 2) + 72px );
                }
                10%{
                    background-image: url(../images/formaldehyde_3.png);
                    transform: rotateZ(90deg);
                    top: 0px;
                    left: calc((800px / 2) - (150px / 2) + 72px ); 
                }
                15%{
                    background-image: url(../images/formaldehyde_4.png);
                    transform: rotateZ(90deg);
                    top: 0px;
                    left: calc((800px / 2) - (150px / 2) + 72px );
                }
                20%{
                    background-image: url(../images/formaldehyde_5.png);
                    transform: rotateZ(90deg);
                    top: 0px;
                    left: calc((800px / 2) - (150px / 2) + 72px );
                }
                25%{
                    background-image: url(../images/formaldehyde_6.png);
                    transform: rotateZ(90deg);
                    top: 0px;
                    left: calc((800px / 2) - (150px / 2) + 72px );
                }
                50%{
                    background-image: url(../images/formaldehyde_6.png);
                    transform: rotateZ(90deg);
                    top: 0px;
                    left: calc((800px / 2) - (150px / 2) + 72px );
                }
                
                60%{
                    background-image: url(../images/formaldehyde_7.png);
                    transform: rotateZ(90deg);
                    top: 0px;
                    left: calc((800px / 2) - (150px / 2) + 72px );
                }
                80%{
                    background-image: url(../images/formaldehyde_7.png);
                    transform: rotateZ(50deg);
                    top: 0px;
                    left: calc((800px / 2) - (150px / 2) + 72px );
                }
                
            }
           .image-scale-half.animate-3{
                animation: projection_phenol 5s;
            }
            @keyframes projection_phenol{
                0%{
                    background-image: url(../images/phenol_0.png);
                    transform: rotateZ(0deg);
                   top: -40px;
                    left: calc((800px / 2) - (150px / 2) + 72px );
                    
                }
                50%{
                    background-image: url(../images/phenol_0.png);
                    transform: rotateZ(90deg);
                    top: -40px;
                    left: calc((800px / 2) - (150px / 2) + 72px );
                }
                
                60%{
                    background-image: url(../images/phenol_1.png);
                    transform: rotateZ(90deg);
                    top: -40px;
                    left: calc((800px / 2) - (150px / 2) + 72px );
                }
                100%{
                    background-image: url(../images/phenol_1.png);
                    transform: rotateZ(50deg);
                    top: -40px;
                    left: calc((800px / 2) - (150px / 2) + 72px );
                }
                
            }
            .image-scale-half.animate-4{
                            animation: projection_hcl 5s;
                        }
            @keyframes projection_hcl{
                0%{
                    background-image: url(../images/hcl_1.png);
                    transform: rotateZ(0deg);
                   top: -20px;
                    left: calc((800px / 2) - (150px / 2) + 87px );
                    
                }
                15%{
                     background-image: url(../images/hcl_2.png);
                    transform: rotateZ(90deg);
                    top: -20px;
                    left: calc((800px / 2) - (150px / 2) + 87px );
                }
                
                30%{
                     background-image: url(../images/hcl_3.png);
                    transform: rotateZ(90deg);
                    top: -20px;
                    left: calc((800px / 2) - (150px / 2) + 87px );
                }
                45%{
                     background-image: url(../images/hcl_4.png);
                    transform: rotateZ(90deg);
                    top: -20px;
                    left: calc((800px / 2) - (150px / 2) + 87px );
                }
                60%{
                     background-image: url(../images/hcl_5.png);
                    transform: rotateZ(90deg);
                    top: -20px;
                    left: calc((800px / 2) - (150px / 2) + 87px );
                }
                75%{
                     background-image: url(../images/hcl_6.png);
                    transform: rotateZ(90deg);
                    top: -20px;
                    left: calc((800px / 2) - (150px / 2) + 87px );
                }
                100%{
                     background-image: url(../images/hcl_6.png);
                    transform: rotateZ(50deg);
                    top: -20px;
                    left: calc((800px / 2) - (150px / 2) + 87px );
                }
                
            }
            .image-scale-half.animate-5{
                            animation: projection_water 5s;
                        }
            @keyframes projection_water{
                0%{
                    background-image: url(../images/water_0.png);
                    transform: rotateZ(0deg);
                   top: 50px;
                    left: calc((800px / 2) - (150px / 2) + 90px );
                    
                }
                20%{
                     background-image: url(../images/water_1.png);
                    transform: rotateZ(90deg);
                    top: 50px;
                    left: calc((800px / 2) - (150px / 2) + 90px );
                }
                
                30%{
                     background-image: url(../images/water_2.png);
                    transform: rotateZ(90deg);
                    top: 50px;
                    left: calc((800px / 2) - (150px / 2) + 90px );
                }
                49%{
                     background-image: url(../images/water_3.png);
                    transform: rotateZ(90deg);
                    top: 50px;
                    left: calc((800px / 2) - (150px / 2) + 90px );
                }
                50%{
                     background-image: url(../images/water_4.png);
                    transform: rotateZ(90deg);
                    top: 50px;
                    left: calc((800px / 2) - (150px / 2) + 90px );
                }
                60%{
                     background-image: url(../images/water_5.png);
                    transform: rotateZ(90deg);
                    top: 50px;
                    left: calc((800px / 2) - (150px / 2) + 90px );
                }
                100%{
                     background-image: url(../images/water_6.png);
                    transform: rotateZ(50deg);
                    top: 50px;
                    left: calc((800px / 2) - (150px / 2) + 90px );
                }
                
            }
.image-scale-half.animate-6{
                            animation: projection_filter 5s;
                        }
            @keyframes projection_filter{
                0%{
                    background-image: url(../images/filter.png);
                    bottom: 30px;
                    left: calc((800px / 2) - (150px / 2) + 50px );
                    
                }
                20%{
                     background-image: url(../images/filter_0.png);
                    bottom: 30px;
                    left: calc((800px / 2) - (150px / 2) +  50px );
                }
                
                30%{
                     background-image: url(../images/filter_1.png);
                    bottom: 30px;
                    left: calc((800px / 2) - (150px / 2) +  50px );
                }
                49%{
                     background-image: url(../images/filter_2.png);
                    bottom: 30px;
                    
                    left: calc((800px / 2) - (150px / 2) +  50px );
                }
                50%{
                     background-image: url(../images/filter_3.png);
                   bottom: 30px;
                    
                    left: calc((800px / 2) - (150px / 2) +  50px );
                }
                60%{
                     background-image: url(../images/filter_4.png);
                    
                   bottom: 30px;
                    left: calc((800px / 2) - (150px / 2) +  50px );
                }
                
            }
.image-scale-half.animate-7{
                            animation: addformaldehyde_exp2 5s;
                        }
            @keyframes addformaldehyde_exp2{
                0%{
                    background-image: url(../images/formaldehyde_1.png);
                    transform: rotateZ(90deg);
                   top: 45px;
                    left: calc((800px / 2) - (150px / 2) + 72px );
                    
                }
                5%{
                    background-image: url(../images/formaldehyde_2.png);
                    transform: rotateZ(90deg);
                    top: 45px;
                    left: calc((800px / 2) - (150px / 2) + 72px );
                }
                10%{
                    background-image: url(../images/formaldehyde_3.png);
                    transform: rotateZ(90deg);
                    top: 45px;
                    left: calc((800px / 2) - (150px / 2) + 72px ); 
                }
                15%{
                    background-image: url(../images/formaldehyde_4.png);
                    transform: rotateZ(90deg);
                    top: 45px;
                    left: calc((800px / 2) - (150px / 2) + 72px );
                }
                20%{
                    background-image: url(../images/formaldehyde_5.png);
                    transform: rotateZ(90deg);
                    top: 45px;
                    left: calc((800px / 2) - (150px / 2) + 72px );
                }
                25%{
                    background-image: url(../images/formaldehyde_6.png);
                    transform: rotateZ(90deg);
                    top: 45px;
                    left: calc((800px / 2) - (150px / 2) + 72px );
                }
                50%{
                    background-image: url(../images/formaldehyde_6.png);
                    transform: rotateZ(90deg);
                    top: 45px;
                    left: calc((800px / 2) - (150px / 2) + 72px );
                }
                
                60%{
                    background-image: url(../images/formaldehyde_7.png);
                    transform: rotateZ(90deg);
                    top: 45px;
                    left: calc((800px / 2) - (150px / 2) + 72px );
                }
                80%{
                    background-image: url(../images/formaldehyde_7.png);
                    transform: rotateZ(50deg);
                    top: 45px;
                    left: calc((800px / 2) - (150px / 2) + 72px );
                }
                
            }
.image-scale-half.animate-8{
                            animation: addurea_exp2 5s;
                        }
            @keyframes addurea_exp2{
                0%{
                    background-image: url(../images/urea_0.png);
                    transform: rotateZ(0deg);
                    top: -40px;
                    left: calc((800px / 2) - (150px / 2) + 72px );
                    
                }
                50%{
                    background-image: url(../images/urea_0.png);
                    transform: rotateZ(90deg);
                    top: -40px;
                    left: calc((800px / 2) - (150px / 2) + 72px );
                }
                
                60%{
                    background-image: url(../images/phenol_1.png);
                    transform: rotateZ(90deg);
                    top: -40px;
                    left: calc((800px / 2) - (150px / 2) + 72px );
                }
                100%{
                    background-image: url(../images/phenol_1.png);
                    transform: rotateZ(50deg);
                    top: -40px;
                    left: calc((800px / 2) - (150px / 2) + 72px );
                }
                
            }
         
         .image-scale-half.animate-9{
                            animation: addh2so4_exp2 2s;
                        }
            @keyframes addh2so4_exp2{
                0%{
                    background-image: url(../images/h2so4_1.png);
                    transform: rotateZ(0deg);
                    top: 45px;
                    left: calc((800px / 2) - (150px / 2) + 92px );
                    
                }
                15%{
                     background-image: url(../images/h2so4_2.png);
                    transform: rotateZ(90deg);
                    top: 45px;
                    left: calc((800px / 2) - (150px / 2) + 92px );
                }
                
                30%{
                     background-image: url(../images/h2so4_3.png);
                    transform: rotateZ(90deg);
                    top: 45px;
                    left: calc((800px / 2) - (150px / 2) + 92px );
                }
                45%{
                     background-image: url(../images/h2so4_4.png);
                    transform: rotateZ(90deg);
                    top: 45px;
                    left: calc((800px / 2) - (150px / 2) + 92px );
                }
                60%{
                     background-image: url(../images/h2so4_5.png);
                    transform: rotateZ(90deg);
                    top: 45px;
                    left: calc((800px / 2) - (150px / 2) + 92px );
                }
                75%{
                     background-image: url(../images/h2so4_6.png);
                    transform: rotateZ(90deg);
                    top: 45px;
                    left: calc((800px / 2) - (150px / 2) + 92px );
                }
                100%{
                     background-image: url(../images/h2so4_6.png);
                    transform: rotateZ(50deg);
                    top: 45px;
                    left: calc((800px / 2) - (150px / 2) + 92px );
                }
                
            }
.image-scale-half.animate-10{
                            animation: projection_water2 4s;
                        }
            @keyframes projection_water2{
                0%{
                    background-image: url(../images/water_0.png);
                    transform: rotateZ(0deg);
                   top: 45px;
                    left: calc((800px / 2) - (150px / 2) + 85px );
                    
                }
                20%{
                     background-image: url(../images/water_1.png);
                    transform: rotateZ(90deg);
                    top: 45px;
                    left: calc((800px / 2) - (150px / 2) + 85px );
                }
                
                30%{
                     background-image: url(../images/water_2.png);
                    transform: rotateZ(90deg);
                    top: 45px;
                    left: calc((800px / 2) - (150px / 2) + 85px );
                }
                49%{
                     background-image: url(../images/water_3.png);
                    transform: rotateZ(90deg);
                    top: 45px;
                    left: calc((800px / 2) - (150px / 2) + 85px );
                }
                50%{
                     background-image: url(../images/water_4.png);
                    transform: rotateZ(90deg);
                    top: 45px;
                    left: calc((800px / 2) - (150px / 2) + 85px );
                }
                60%{
                     background-image: url(../images/water_5.png);
                    transform: rotateZ(90deg);
                    top: 45px;
                    left: calc((800px / 2) - (150px / 2) + 85px );
                }
                90%{
                     background-image: url(../images/water_6.png);
                    transform: rotateZ(90deg);
                    top: 45px;
                    left: calc((800px / 2) - (150px / 2) + 85px );
                }
                100%{
                     background-image: url(../images/water_6.png);
                    transform: rotateZ(50deg);
                    top: 45px;
                    left: calc((800px / 2) - (150px / 2) + 85px );
                }
                
            }
.image-scale-half.animate-11{
                            animation: projection_filter_exp2 3s;
                        }
            @keyframes projection_filter_exp2{
                0%{
                    background-image: url(../images/filter_white_1.png);
                   
                    
                }
                25%{
                     background-image: url(../images/filter_white_2.png);
                    
                }
                
                50%{
                     background-image: url(../images/filter_white_3.png);
                    
                }
                75%{
                     background-image: url(../images/filter_white_4.png);
                    
                }
                100%{
                     background-image: url(../images/filter_white_5.png);
                     
                }
                
            }
/**************************************************  Scale-full *********************************************************/
            .image-scale-full.animate{
                animation: projection_beaker 2s;
            }
            @keyframes projection_beaker{
                
                0%{
                    background-image: url(../images/beaker_fill_glacial_1.png);
                }
                25%{
                    background-image: url(../images/beaker_fill_glacial_2.png);
                }
                50%{
                    background-image: url(../images/beaker_fill_glacial_3.png);
                }
                75%{
                    background-image: url(../images/beaker_fill_glacial_4.png); 
                }
                100%{
                    background-image: url(../images/beaker_fill_glacial_5.png); 
                }
            }
            .image-scale-full.animate-2{
                animation: projection_beaker_2 2s;
            }
            @keyframes projection_beaker_2{
                
                0%{
                    background-image: url(../images/beaker_fill_formaldehyde_1.png);
                }
                25%{
                    background-image: url(../images/beaker_fill_formaldehyde_2.png);
                }
                50%{
                    background-image: url(../images/beaker_fill_formaldehyde_3.png);
                }
                75%{
                    background-image: url(../images/beaker_fill_formaldehyde_4.png); 
                }
                100%{
                    background-image: url(../images/beaker_fill_formaldehyde_5.png); 
                }
            }
          .image-scale-full.animate-3{
                animation: projection_beaker_3 2s 5;
            }
            @keyframes projection_beaker_3{
                
                0%{
                    background-image: url(../images/beaker_fill_glacial_heating.png);
                }
               
                50%{
                    background-image: url(../images/beaker_fill_glacial_heating_1.png);
                }
                
                100%{
                    background-image: url(../images/beaker_fill_glacial_heating.png); 
                }
            }

            .image-scale-full.animate-4{
                animation: projection_beaker_4 3s;
            }
            @keyframes projection_beaker_4{
                
                0%{
                    background-image: url(../images/beaker_fill_phenol_0.png);
                }
               
                50%{
                    background-image: url(../images/beaker_fill_phenol_1.png);
                }
                
                100%{
                    background-image: url(../images/beaker_fill_phenol_2.png); 
                }
            }
          .image-scale-full.animate-5{
                animation: projection_beaker_5 2s;
            }
            @keyframes projection_beaker_5{
                
                0%{
                    background-image: url(../images/beaker_fill_hcl_0.png);
                }
               
                20%{
                    background-image: url(../images/beaker_fill_hcl_1.png);
                }
                
                40%{
                    background-image: url(../images/beaker_fill_hcl_2.png); 
                }
                60%{
                    background-image: url(../images/beaker_fill_hcl_3.png); 
                }
                80%{
                    background-image: url(../images/beaker_fill_hcl_4.png); 
                }
                100%{
                    background-image: url(../images/beaker_fill_hcl_5.png); 
                }
            }
.image-scale-full.animate-6{
                animation: projection_beaker_6 4s;
            }
            @keyframes projection_beaker_6{
                
                0%{
                    background-image: url(../images/beaker_fill_hcl_stir_0.png);
                    bottom: 185px;
                }
               
                20%{
                    background-image: url(../images/beaker_fill_hcl_stir_1.png);
                    bottom: 185px;
                }
                
                40%{
                    background-image: url(../images/beaker_fill_hcl_stir_2.png); 
                     bottom: 185px;
                }
                60%{
                    background-image: url(../images/beaker_fill_hcl_stir_3.png);
                    bottom: 185px;
                }
                80%{
                    background-image: url(../images/beaker_fill_hcl_stir_0.png);
                     bottom: 185px;
                }
                100%{
                    background-image: url(../images/beaker_fill_hcl_5.png);
                   
                }
                
                
            }
.image-scale-full.animate-7{
                animation: projection_beaker_7 4s;
            }
            @keyframes projection_beaker_7{
                0%{
                    background-image: url(../images/beaker_fill_pink_0.png); 
                    
                }
                30%{
                    background-image: url(../images/beaker_fill_pink_1.png);
                    
                }
                50%{
                    background-image: url(../images/beaker_fill_pink_2.png);
                     
                }
                70%{
                    background-image: url(../images/beaker_fill_pink_3.png);
                     
                }
                100%{
                    background-image: url(../images/beaker_fill_pink_4.png);
                    
                }
}

.image-scale-full.animate-8{
                animation: projection_beaker_8 4s;
            }
            @keyframes projection_beaker_8{
                0%{
                    background-image: url(../images/beaker_fill_water_0.png); 
                    
                }
                20%{
                    background-image: url(../images/beaker_fill_water_1.png);
                    
                }
                30%{
                    background-image: url(../images/beaker_fill_water_2.png);
                     
                }
                60%{
                    background-image: url(../images/beaker_fill_water_3.png);
                     
                }
                750%{
                    background-image: url(../images/beaker_fill_water_4.png);
                    
                }
                100%{
                    background-image: url(../images/beaker_fill_water_5.png);
                    
                }
}
.image-scale-full.animate-9{
                animation: projection_beaker_9 4s;
            }
            @keyframes projection_beaker_9{
                0%{
                    background-image: url(../images/beaker_empty_0.png); 
                    bottom: 150px;
                    transform: rotateZ(90deg);
                    
                    left: calc((800px / 2) - (150px / 2)  );
                }
                20%{
                    background-image: url(../images/beaker_empty_1.png);
                    bottom: 150px;
                    transform: rotateZ(90deg);
                    
                    left: calc((800px / 2) - (150px / 2)  );
                }
                30%{
                    background-image: url(../images/beaker_empty_2.png);
                     bottom: 150px;
                    transform: rotateZ(90deg);
                    
                    left: calc((800px / 2) - (150px / 2)  );
                }
                60%{
                    background-image: url(../images/beaker_empty_3.png);
                     bottom: 150px;
                    transform: rotateZ(90deg);
                    
                    left: calc((800px / 2) - (150px / 2)  );
                }
                100%{
                    background-image: url(../images/beaker_empty_4.png);
                    bottom: 150px;
                    transform: rotateZ(90deg);
                    
                    left: calc((800px / 2) - (150px / 2)  );
                }
}

.image-scale-full.animate-10{
                animation: projection_beaker_10 4s;
            }
            @keyframes projection_beaker_10{
                0%{
                    background-image: url(../images/beaker_fill_formaldehyde_1_1.png); 
                  
                }
                20%{
                    background-image: url(../images/beaker_fill_formaldehyde_1_2.png);
                   
                }
                30%{
                    background-image: url(../images/beaker_fill_formaldehyde_1_3.png);
                   
                }
                60%{
                    background-image: url(../images/beaker_fill_formaldehyde_1_4.png);
                     
                }
                100%{
                    background-image: url(../images/beaker_fill_formaldehyde_1_4.png);
                   
                }
}

.image-scale-full.animate-11{
                animation: projection_beaker_11 4s;
            }
            @keyframes projection_beaker_11{
                 
                0%{
                    background-image: url(../images/beaker_fill_urea_0.png);
                }
               
                50%{
                    background-image: url(../images/beaker_fill_urea_1.png);
                }
                
                100%{
                    background-image: url(../images/beaker_fill_urea_2.png); 
                }
}
.image-scale-full.animate-12{
                animation: projection_beaker_12 1s;
            }
            @keyframes projection_beaker_12{
                 
                0%{
                    background-image: url(../images/beaker_fill_h2s04_0.png);
                }
               
                50%{
                    background-image: url(../images/beaker_fill_h2s04_1.png);
                }
                
                100%{
                    background-image: url(../images/beaker_fill_h2s04_2.png); 
                }
                 100%{
                    background-image: url(../images/beaker_fill_h2s04_3.png); 
                }
}

.image-scale-full.animate-13{
                animation: projection_beaker_13 3s;
            }
            @keyframes projection_beaker_13{
                 
                0%{
                    background-image: url(../images/beaker_white_mass_0.png);
                }
               
                50%{
                    background-image: url(../images/beaker_white_mass_1.png);
                }
                
                75%{
                    background-image: url(../images/beaker_white_mass_2.png); 
                }
                 100%{
                    background-image: url(../images/beaker_white_mass_3.png); 
                }
}
.image-scale-full.animate-14{
                animation: projection_beaker_14 1s;
            }
            @keyframes projection_beaker_14{
                 
                0%{
                    background-image: url(../images/h2so4_fill_water_0.png);
                }
               
                25%{
                    background-image: url(../images/h2so4_fill_water_1.png);
                }
                
                50%{
                    background-image: url(../images/h2so4_fill_water_2.png); 
                }
                75%{
                    background-image: url(../images/h2so4_fill_water_3.png); 
                }
                90%{
                    background-image: url(../images/h2so4_fill_water_4.png); 
                }
                100%{
                    background-image: url(../images/h2so4_fill_water_5.png); 
                    
                }
}
.image-scale-full.animate-15{
                animation: projection_beaker_15 3s;
            }
            @keyframes projection_beaker_15{
                 
                0%{
                    background-image: url(../images/beaker_empty_exp2_4.png); 
                    bottom: 150px;
                    transform: rotateZ(90deg);
                    
                    left: calc((800px / 2) - (150px / 2)  );
                }
                20%{
                    background-image: url(../images/beaker_empty_exp2_3.png);
                    bottom: 150px;
                    transform: rotateZ(90deg);
                    
                    left: calc((800px / 2) - (150px / 2)  );
                }
                30%{
                    background-image: url(../images/beaker_empty_exp2_2.png);
                     bottom: 150px;
                    transform: rotateZ(90deg);
                    
                    left: calc((800px / 2) - (150px / 2)  );
                }
                50%{
                    background-image: url(../images/beaker_empty_exp2_1.png);
                     bottom: 150px;
                    transform: rotateZ(90deg);
                    
                    left: calc((800px / 2) - (150px / 2)  );
                }
                70%{
                    background-image: url(../images/beaker_empty_exp2_0.png);
                    bottom: 150px;
                    transform: rotateZ(90deg);
                    
                    left: calc((800px / 2) - (150px / 2)  );
                }
                100%{
                    background-image: url(../images/beaker_empty_exp2_5.png);
                    bottom: 150px;
                    transform: rotateZ(90deg);
                    
                    left: calc((800px / 2) - (150px / 2)  );
                }
}



            .call-to-action{
                width: auto;
                min-width: 100px;
                padding: 2px 10px;
                height: 40px;
                text-align: center;
                line-height: 40px;
                background: #684ef8;
                box-shadow: none;
                outline: none;
                border-radius: 2px;
                border:0px;
                color: #fff;
                font-size: 15px;
                border-bottom: 5px solid #8c7be8;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
                position: absolute;
                bottom: 10px;
                right: 20px;
            }
            .call-to-action.active:hover svg{
                margin-left: 5px;
                transition: all .1s;
              }
            .call-to-action.active:active{
                border-bottom: 0px;
            }
            .call-to-action.disable{
             background: #dedede;
             border-bottom: 5px solid #989898;
            }
.image-scale-full.prianimate{
    left: 180px;
    transition-duration: 1s;
}