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/casolipoabdomino1.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/casolipoabdomino2.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/casolipoabdomino3.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/casolipoabdomino4.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/casolipo5.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/casolipo6.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;
    }
}