body{
  
}
div#comparison {
    width: 90vw; /* El 90% del ancho del viewport en dispositivos móviles */
    height: 90vw;
    max-width: 600px;
    max-height: 600px;
    overflow: hidden;
    margin: 0 auto; /* Centra el componente horizontalmente */
    position: relative;
}
div#comparison figure { 
  background-image: url("../images/animacion_fotos/casolipo1.jpg"); 
  background-size: cover;
  position: relative;
  font-size: 0;
  width: 100%; 
  height: 100%;
  margin: 0; 
}
div#comparison figure > img { 
  position: relative;
  width: 100%;
}
div#comparison figure div { 
  background-image: url("../images/animacion_fotos/casolipo2.jpg");
  background-size: cover;
  position: absolute;
  width: 50%; 
  box-shadow: 0 5px 10px -2px rgba(0,0,0,0.3);
  overflow: hidden;
  bottom: 0;
  height: 100%;
}






div#comparison1 { 
  width: 90vw; /* El 90% del ancho del viewport en dispositivos móviles */
    height: 90vw;
    max-width: 600px;
    max-height: 600px;
    overflow: hidden;
    margin: 0 auto; /* Centra el componente horizontalmente */
    position: relative; }
div#comparison1 figure { 
  background-image: url("../images/animacion_fotos/3casolipoescultura.jpg"); 
  background-size: cover;
  position: relative;
  font-size: 0;
  width: 100%; 
  height: 100%;
  margin: 0; 
}
div#comparison1 figure > img { 
  position: relative;
  width: 100%;
}
div#comparison1 figure div { 
  background-image: url("../images/animacion_fotos/4casolipoescultura.jpg");
  background-size: cover;
  position: absolute;
  width: 50%; 
  box-shadow: 0 5px 10px -2px rgba(0,0,0,0.3);
  overflow: hidden;
  bottom: 0;
  height: 100%;
}





div#comparison2 { 
 width: 90vw; /* El 90% del ancho del viewport en dispositivos móviles */
    height: 90vw;
    max-width: 600px;
    max-height: 600px;
    overflow: hidden;
    margin: 0 auto; /* Centra el componente horizontalmente */
    position: relative; }
div#comparison2 figure { 
  background-image: url(../images/animacion_fotos/5casolipoescultura.jpg); 
  background-size: cover;
  position: relative;
  font-size: 0;
  width: 100%; 
  height: 100%;
  margin: 0; 
}
div#comparison2 figure > img { 
  position: relative;
  width: 100%;
}
div#comparison2 figure div { 
  background-image: url(../images/animacion_fotos/6casolipoescultura.jpg);
  background-size: cover;
  position: absolute;
  width: 50%; 
  box-shadow: 0 5px 10px -2px rgba(0,0,0,0.3);
  overflow: hidden;
  bottom: 0;
  height: 100%;
}




div#comparison3 { 
  width: 90vw; /* El 90% del ancho del viewport en dispositivos móviles */
    height: 90vw;
    max-width: 600px;
    max-height: 600px;
    overflow: hidden;
    margin: 0 auto; /* Centra el componente horizontalmente */
    position: relative; }
div#comparison3 figure { 
  background-image: url(../images/animacion_fotos/marcacion1.jpg); 
  background-size: cover;
  position: relative;
  font-size: 0;
  width: 100%; 
  height: 100%;
  margin: 0; 
}
div#comparison3 figure > img { 
  position: relative;
  width: 100%;
}
div#comparison3 figure div { 
  background-image: url(../images/animacion_fotos/marcacion2.jpg);
  background-size: cover;
  position: absolute;
  width: 50%; 
  box-shadow: 0 5px 10px -2px rgba(0,0,0,0.3);
  overflow: hidden;
  bottom: 0;
  height: 100%;
}



div#comparison4 { 
 width: 90vw; /* El 90% del ancho del viewport en dispositivos móviles */
    height: 90vw;
    max-width: 600px;
    max-height: 600px;
    overflow: hidden;
    margin: 0 auto; /* Centra el componente horizontalmente */
    position: relative; }
div#comparison4 figure { 
  background-image: url(../images/animacion_fotos/marcacion3.jpg); 
  background-size: cover;
  position: relative;
  font-size: 0;
  width: 100%; 
  height: 100%;
  margin: 0; 
}
div#comparison4 figure > img { 
  position: relative;
  width: 100%;
}
div#comparison4 figure div { 
  background-image: url(../images/animacion_fotos/marcacion4.jpg);
  background-size: cover;
  position: absolute;
  width: 50%; 
  box-shadow: 0 5px 10px -2px rgba(0,0,0,0.3);
  overflow: hidden;
  bottom: 0;
  height: 100%;
}





div#comparison5 { 
 width: 90vw; /* El 90% del ancho del viewport en dispositivos móviles */
    height: 90vw;
    max-width: 600px;
    max-height: 600px;
    overflow: hidden;
    margin: 0 auto; /* Centra el componente horizontalmente */
    position: relative; }
div#comparison5 figure { 
  background-image: url(../images/animacion_fotos/marcacion5.jpg); 
  background-size: cover;
  position: relative;
  font-size: 0;
  width: 100%; 
  height: 100%;
  margin: 0; 
}
div#comparison5 figure > img { 
  position: relative;
  width: 100%;
}
div#comparison5 figure div { 
  background-image: url(../images/animacion_fotos/marcacion6.jpg);
  background-size: cover;
  position: absolute;
  width: 50%; 
  box-shadow: 0 5px 10px -2px rgba(0,0,0,0.3);
  overflow: hidden;
  bottom: 0;
  height: 100%;
}


div#comparison6 { 
 width: 90vw; /* El 90% del ancho del viewport en dispositivos móviles */
    height: 90vw;
    max-width: 600px;
    max-height: 600px;
    overflow: hidden;
    margin: 0 auto; /* Centra el componente horizontalmente */
    position: relative; }
div#comparison6 figure { 
  background-image: url(../images/animacion_fotos/la001.jpg); 
  background-size: cover;
  position: relative;
  font-size: 0;
  width: 100%; 
  height: 100%;
  margin: 0; 
}
div#comparison6 figure > img { 
  position: relative;
  width: 100%;
}
div#comparison6 figure div { 
  background-image: url(../images/animacion_fotos/la002.jpg);
  background-size: cover;
  position: absolute;
  width: 50%; 
  box-shadow: 0 5px 10px -2px rgba(0,0,0,0.3);
  overflow: hidden;
  bottom: 0;
  height: 100%;
}


div#comparison7 { 
 width: 90vw; /* El 90% del ancho del viewport en dispositivos móviles */
    height: 90vw;
    max-width: 600px;
    max-height: 600px;
    overflow: hidden;
    margin: 0 auto; /* Centra el componente horizontalmente */
    position: relative; }
div#comparison7 figure { 
  background-image: url(../images/animacion_fotos/la003.jpg); 
  background-size: cover;
  position: relative;
  font-size: 0;
  width: 100%; 
  height: 100%;
  margin: 0; 
}
div#comparison7 figure > img { 
  position: relative;
  width: 100%;
}
div#comparison7 figure div { 
  background-image: url(../images/animacion_fotos/la004.jpg);
  background-size: cover;
  position: absolute;
  width: 50%; 
  box-shadow: 0 5px 10px -2px rgba(0,0,0,0.3);
  overflow: hidden;
  bottom: 0;
  height: 100%;
}


div#comparison8 { 
 width: 90vw; /* El 90% del ancho del viewport en dispositivos móviles */
    height: 90vw;
    max-width: 600px;
    max-height: 600px;
    overflow: hidden;
    margin: 0 auto; /* Centra el componente horizontalmente */
    position: relative; }
div#comparison8 figure { 
  background-image: url(../images/animacion_fotos/la005.jpg); 
  background-size: cover;
  position: relative;
  font-size: 0;
  width: 100%; 
  height: 100%;
  margin: 0; 
}
div#comparison8 figure > img { 
  position: relative;
  width: 100%;
}
div#comparison8 figure div { 
  background-image: url(../images/animacion_fotos/la006.jpg);
  background-size: cover;
  position: absolute;
  width: 50%; 
  box-shadow: 0 5px 10px -2px rgba(0,0,0,0.3);
  overflow: hidden;
  bottom: 0;
  height: 100%;
}


div#comparison9 { 
 width: 90vw; /* El 90% del ancho del viewport en dispositivos móviles */
    height: 90vw;
    max-width: 600px;
    max-height: 600px;
    overflow: hidden;
    margin: 0 auto; /* Centra el componente horizontalmente */
    position: relative; }
div#comparison9 figure { 
  background-image: url(../images/animacion_fotos/blefaro1.png); 
  background-size: cover;
  position: relative;
  font-size: 0;
  width: 100%; 
  height: 100%;
  margin: 0; 
}
div#comparison9 figure > img { 
  position: relative;
  width: 100%;
}
div#comparison9 figure div { 
  background-image: url(../images/animacion_fotos/blefaro2.png);
  background-size: cover;
  position: absolute;
  width: 50%; 
  box-shadow: 0 5px 10px -2px rgba(0,0,0,0.3);
  overflow: hidden;
  bottom: 0;
  height: 100%;
}



div#comparison10 { 
 width: 90vw; /* El 90% del ancho del viewport en dispositivos móviles */
    height: 90vw;
    max-width: 600px;
    max-height: 600px;
    overflow: hidden;
    margin: 0 auto; /* Centra el componente horizontalmente */
    position: relative; }
div#comparison10 figure { 
  background-image: url(../images/animacion_fotos/blefaro3.png); 
  background-size: cover;
  position: relative;
  font-size: 0;
  width: 100%; 
  height: 100%;
  margin: 0; 
}
div#comparison10 figure > img { 
  position: relative;
  width: 100%;
}
div#comparison10 figure div { 
  background-image: url(../images/animacion_fotos/blefaro4.png);
  background-size: cover;
  position: absolute;
  width: 50%; 
  box-shadow: 0 5px 10px -2px rgba(0,0,0,0.3);
  overflow: hidden;
  bottom: 0;
  height: 100%;
}


div#comparison11 { 
 width: 90vw; /* El 90% del ancho del viewport en dispositivos móviles */
    height: 90vw;
    max-width: 600px;
    max-height: 600px;
    overflow: hidden;
    margin: 0 auto; /* Centra el componente horizontalmente */
    position: relative; }
div#comparison11 figure { 
  background-image: url(../images/animacion_fotos/blefaro5.png); 
  background-size: cover;
  position: relative;
  font-size: 0;
  width: 100%; 
  height: 100%;
  margin: 0; 
}
div#comparison11 figure > img { 
  position: relative;
  width: 100%;
}
div#comparison11 figure div { 
  background-image: url(../images/animacion_fotos/blefaro6.png);
  background-size: cover;
  position: absolute;
  width: 50%; 
  box-shadow: 0 5px 10px -2px rgba(0,0,0,0.3);
  overflow: hidden;
  bottom: 0;
  height: 100%;
}


div#comparison12 { 
 width: 90vw; /* El 90% del ancho del viewport en dispositivos móviles */
    height: 90vw;
    max-width: 600px;
    max-height: 600px;
    overflow: hidden;
    margin: 0 auto; /* Centra el componente horizontalmente */
    position: relative; }
div#comparison12 figure { 
  background-image: url(../images/animacion_fotos/lifting1.png); 
  background-size: cover;
  position: relative;
  font-size: 0;
  width: 100%; 
  height: 100%;
  margin: 0; 
}
div#comparison12 figure > img { 
  position: relative;
  width: 100%;
}
div#comparison12 figure div { 
  background-image: url(../images/animacion_fotos/lifting2.png);
  background-size: cover;
  position: absolute;
  width: 50%; 
  box-shadow: 0 5px 10px -2px rgba(0,0,0,0.3);
  overflow: hidden;
  bottom: 0;
  height: 100%;
}


div#comparison13 { 
 width: 90vw; /* El 90% del ancho del viewport en dispositivos móviles */
    height: 90vw;
    max-width: 600px;
    max-height: 600px;
    overflow: hidden;
    margin: 0 auto; /* Centra el componente horizontalmente */
    position: relative; }
div#comparison13 figure { 
  background-image: url(../images/animacion_fotos/lifting3.png); 
  background-size: cover;
  position: relative;
  font-size: 0;
  width: 100%; 
  height: 100%;
  margin: 0; 
}
div#comparison13 figure > img { 
  position: relative;
  width: 100%;
}
div#comparison13 figure div { 
  background-image: url(../images/animacion_fotos/lifting4.png);
  background-size: cover;
  position: absolute;
  width: 50%; 
  box-shadow: 0 5px 10px -2px rgba(0,0,0,0.3);
  overflow: hidden;
  bottom: 0;
  height: 100%;
}

div#comparison14 { 
 width: 90vw; /* El 90% del ancho del viewport en dispositivos móviles */
    height: 90vw;
    max-width: 600px;
    max-height: 600px;
    overflow: hidden;
    margin: 0 auto; /* Centra el componente horizontalmente */
    position: relative; }
div#comparison14 figure { 
  background-image: url(../images/animacion_fotos/lifting3.png); 
  background-size: cover;
  position: relative;
  font-size: 0;
  width: 100%; 
  height: 100%;
  margin: 0; 
}
div#comparison14 figure > img { 
  position: relative;
  width: 100%;
}
div#comparison14 figure div { 
  background-image: url(../images/animacion_fotos/lifting4.png);
  background-size: cover;
  position: absolute;
  width: 50%; 
  box-shadow: 0 5px 10px -2px rgba(0,0,0,0.3);
  overflow: hidden;
  bottom: 0;
  height: 100%;
}




div#comparison15 { 
 width: 90vw; /* El 90% del ancho del viewport en dispositivos móviles */
    height: 90vw;
    max-width: 600px;
    max-height: 600px;
    overflow: hidden;
    margin: 0 auto; /* Centra el componente horizontalmente */
    position: relative; }
div#comparison15 figure { 
  background-image: url(../images/animacion_fotos/caso1neumodiseccion.png); 
  background-size: cover;
  position: relative;
  font-size: 0;
  width: 100%; 
  height: 100%;
  margin: 0; 
}
div#comparison15 figure > img { 
  position: relative;
  width: 100%;
}
div#comparison15 figure div { 
  background-image: url(../images/animacion_fotos/caso2neumodiseccion.png);
  background-size: cover;
  position: absolute;
  width: 50%; 
  box-shadow: 0 5px 10px -2px rgba(0,0,0,0.3);
  overflow: hidden;
  bottom: 0;
  height: 100%;
}




div#comparison16 { 
 width: 90vw; /* El 90% del ancho del viewport en dispositivos móviles */
    height: 90vw;
    max-width: 600px;
    max-height: 600px;
    overflow: hidden;
    margin: 0 auto; /* Centra el componente horizontalmente */
    position: relative; }
div#comparison16 figure { 
  background-image: url(../images/animacion_fotos/caso3neumodiseccion.png); 
  background-size: cover;
  position: relative;
  font-size: 0;
  width: 100%; 
  height: 100%;
  margin: 0; 
}
div#comparison16 figure > img { 
  position: relative;
  width: 100%;
}
div#comparison16 figure div { 
  background-image: url(../images/animacion_fotos/caso4neumodiseccion.png);
  background-size: cover;
  position: absolute;
  width: 50%; 
  box-shadow: 0 5px 10px -2px rgba(0,0,0,0.3);
  overflow: hidden;
  bottom: 0;
  height: 100%;
}


div#comparison17 { 
 width: 90vw; /* El 90% del ancho del viewport en dispositivos móviles */
    height: 90vw;
    max-width: 600px;
    max-height: 600px;
    overflow: hidden;
    margin: 0 auto; /* Centra el componente horizontalmente */
    position: relative; }
div#comparison17 figure { 
  background-image: url(../images/animacion_fotos/caso5neumodiseccion.png); 
  background-size: cover;
  position: relative;
  font-size: 0;
  width: 100%; 
  height: 100%;
  margin: 0; 
}
div#comparison17 figure > img { 
  position: relative;
  width: 100%;
}
div#comparison17 figure div { 
  background-image: url(../images/animacion_fotos/caso6neumodiseccion.png);
  background-size: cover;
  position: absolute;
  width: 50%; 
  box-shadow: 0 5px 10px -2px rgba(0,0,0,0.3);
  overflow: hidden;
  bottom: 0;
  height: 100%;
}




div#comparison18 { 
 width: 90vw; /* El 90% del ancho del viewport en dispositivos móviles */
    height: 90vw;
    max-width: 600px;
    max-height: 600px;
    overflow: hidden;
    margin: 0 auto; /* Centra el componente horizontalmente */
    position: relative; }
div#comparison18 figure { 
  background-image: url(../images/animacion_fotos/implante01.jpg); 
  background-size: cover;
  position: relative;
  font-size: 0;
  width: 100%; 
  height: 100%;
  margin: 0; 
}
div#comparison18 figure > img { 
  position: relative;
  width: 100%;
}
div#comparison18 figure div { 
  background-image: url(../images/animacion_fotos/implante02.jpg);
  background-size: cover;
  position: absolute;
  width: 50%; 
  box-shadow: 0 5px 10px -2px rgba(0,0,0,0.3);
  overflow: hidden;
  bottom: 0;
  height: 100%;
}






div#comparison19 { 
 width: 90vw; /* El 90% del ancho del viewport en dispositivos móviles */
    height: 90vw;
    max-width: 600px;
    max-height: 600px;
    overflow: hidden;
    margin: 0 auto; /* Centra el componente horizontalmente */
    position: relative; }
div#comparison19 figure { 
  background-image: url(../images/animacion_fotos/implante03.jpg); 
  background-size: cover;
  position: relative;
  font-size: 0;
  width: 100%; 
  height: 100%;
  margin: 0; 
}
div#comparison19 figure > img { 
  position: relative;
  width: 100%;
}
div#comparison19 figure div { 
  background-image: url(../images/animacion_fotos/implante04.jpg);
  background-size: cover;
  position: absolute;
  width: 50%; 
  box-shadow: 0 5px 10px -2px rgba(0,0,0,0.3);
  overflow: hidden;
  bottom: 0;
  height: 100%;
}





div#comparison20 { 
 width: 90vw; /* El 90% del ancho del viewport en dispositivos móviles */
    height: 90vw;
    max-width: 600px;
    max-height: 600px;
    overflow: hidden;
    margin: 0 auto; /* Centra el componente horizontalmente */
    position: relative; }
div#comparison20 figure { 
  background-image: url(../images/animacion_fotos/implante05.jpg); 
  background-size: cover;
  position: relative;
  font-size: 0;
  width: 100%; 
  height: 100%;
  margin: 0; 
}
div#comparison20 figure > img { 
  position: relative;
  width: 100%;
}
div#comparison20 figure div { 
  background-image: url(../images/animacion_fotos/implante06.jpg);
  background-size: cover;
  position: absolute;
  width: 50%; 
  box-shadow: 0 5px 10px -2px rgba(0,0,0,0.3);
  overflow: hidden;
  bottom: 0;
  height: 100%;
}







div#comparison21 { 
 width: 90vw; /* El 90% del ancho del viewport en dispositivos móviles */
    height: 90vw;
    max-width: 600px;
    max-height: 600px;
    overflow: hidden;
    margin: 0 auto; /* Centra el componente horizontalmente */
    position: relative; }
div#comparison21 figure { 
  background-image: url(../images/animacion_fotos/rino01.jpg); 
  background-size: cover;
  position: relative;
  font-size: 0;
  width: 100%; 
  height: 100%;
  margin: 0; 
}
div#comparison21 figure > img { 
  position: relative;
  width: 100%;
}
div#comparison21 figure div { 
  background-image: url(../images/animacion_fotos/rino02.jpg);
  background-size: cover;
  position: absolute;
  width: 50%; 
  box-shadow: 0 5px 10px -2px rgba(0,0,0,0.3);
  overflow: hidden;
  bottom: 0;
  height: 100%;
}








div#comparison22 { 
 width: 90vw; /* El 90% del ancho del viewport en dispositivos móviles */
    height: 90vw;
    max-width: 600px;
    max-height: 600px;
    overflow: hidden;
    margin: 0 auto; /* Centra el componente horizontalmente */
    position: relative; }
div#comparison22 figure { 
  background-image: url(../images/animacion_fotos/rino03.jpg); 
  background-size: cover;
  position: relative;
  font-size: 0;
  width: 100%; 
  height: 100%;
  margin: 0; 
}
div#comparison22 figure > img { 
  position: relative;
  width: 100%;
}
div#comparison22 figure div { 
  background-image: url(../images/animacion_fotos/rino04.jpg);
  background-size: cover;
  position: absolute;
  width: 50%; 
  box-shadow: 0 5px 10px -2px rgba(0,0,0,0.3);
  overflow: hidden;
  bottom: 0;
  height: 100%;
}







div#comparison23 { 
 width: 90vw; /* El 90% del ancho del viewport en dispositivos móviles */
    height: 90vw;
    max-width: 600px;
    max-height: 600px;
    overflow: hidden;
    margin: 0 auto; /* Centra el componente horizontalmente */
    position: relative; }
div#comparison23 figure { 
  background-image: url(../images/animacion_fotos/rino05.jpg); 
  background-size: cover;
  position: relative;
  font-size: 0;
  width: 100%; 
  height: 100%;
  margin: 0; 
}
div#comparison23 figure > img { 
  position: relative;
  width: 100%;
}
div#comparison23 figure div { 
  background-image: url(../images/animacion_fotos/rino06.jpg);
  background-size: cover;
  position: absolute;
  width: 50%; 
  box-shadow: 0 5px 10px -2px rgba(0,0,0,0.3);
  overflow: hidden;
  bottom: 0;
  height: 100%;
}

input[type=range]{
  -webkit-appearance:none;
  -moz-appearance:none;
  position: relative;
  top: -2rem; left: -2%;
  background-color: rgba(255,255,255,0.1);
  width: 102%; 
}
input[type=range]:focus { 
  outline: none; 
}
input[type=range]:active { 
  outline: none;  
}

input[type=range]::-moz-range-track { 
  -moz-appearance:none;
    height:15px;
    width: 98%;
    background-color: rgba(255,255,255,0.1); 
    position: relative;
    outline: none;    
 }
input[type=range]::active { 
  border: none; 
  outline: none;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance:none;
    width: 20px; height: 15px;   
    background: #fff;
    border-radius: 0;
   }
input[type=range]::-moz-range-thumb {
  -moz-appearance: none;
  width: 20px;
  height: 15px;
  background: #fff;
  border-radius: 0;
     }   
input[type=range]:focus::-webkit-slider-thumb {
    background: rgba(255,255,255,0.5);
   }
input[type=range]:focus::-moz-range-thumb {
    background: rgba(255,255,255,0.5);
   }




/*-----responsive---*/
 /* Media Queries para responsividad en pantallas más pequeñas */
  @media screen and (min-width: 768px) {
    div#comparison {
        width: 30vw;
        height: 30vw;
    }
      div#comparison1 {
        width: 30vw;
        height: 30vw;
    }
      div#comparison2 {
        width: 30vw;
        height: 30vw;
    }
      div#comparison3 {
        width: 30vw;
        height: 30vw;
    }
      div#comparison4 {
        width: 30vw;
        height: 30vw;
    }
      div#comparison5 {
        width: 30vw;
        height: 30vw;
    }
       div#comparison6 {
        width: 30vw;
        height: 30vw;
    }
       div#comparison7 {
        width: 30vw;
        height: 30vw;
    }
       div#comparison8 {
        width: 30vw;
        height: 30vw;
    }
      div#comparison9 {
        width: 30vw;
        height: 30vw;
    }
      div#comparison10 {
        width: 30vw;
        height: 30vw;
    }
      div#comparison11 {
        width: 30vw;
        height: 30vw;
    }
          div#comparison12 {
        width: 30vw;
        height: 30vw;
    }
          div#comparison13 {
        width: 30vw;
        height: 30vw;
    }
          div#comparison14 {
        width: 30vw;
        height: 30vw;
    }
      
        div#comparison15 {
        width: 30vw;
        height: 30vw;
    }
        div#comparison16 {
        width: 30vw;
        height: 30vw;
    }
        div#comparison17 {
        width: 30vw;
        height: 30vw;
    }
      
         div#comparison18 {
        width: 30vw;
        height: 30vw;
    }
      
          div#comparison19 {
        width: 30vw;
        height: 30vw;
    }
          div#comparison20 {
        width: 30vw;
        height: 30vw;
    }
      
      
             div#comparison21 {
        width: 30vw;
        height: 30vw;
    }
             div#comparison22 {
        width: 30vw;
        height: 30vw;
    }
             div#comparison23 {
        width: 30vw;
        height: 30vw;
    }
}