.open-modal-btn{
    background-color: transparent;
    border: none;
    width: 6%;
    transition: 500ms;
    cursor: pointer;
}
.open-modal-btn:hover{
  transform: scale(1.2);
  box-shadow: 2px 2px 2px black;
}
.open-modal-btn img{
    width: 100%;
}
.modal1{
    position: absolute;
    top: 54%;
    left: 26%;
}
.modal2{
  position: absolute;
  top: 36%;
  left: 45%;
}
.modal3{
  position: absolute;
  top: 31%;
  left: 47%;
}
.modal4{
  position: absolute;
  top: 27%;
  left: 52%;
}
.modal5{
  position: absolute;
  top: 25%;
  left: 64%;
}
.modal6{
  position: absolute;
  top: 18%;
  left: 66%;
}
.modal7{
  position: absolute;
  top: 43%;
  left: 59%;
}
.modal8{
  position: absolute;
  top: 48%;
  left: 51%;
}
/* El Modal (fondo) */
.modal {
  display: none; /* Oculto por defecto */
  position: fixed; /* Permanece en su lugar */
  z-index: 1; /* Se coloca encima */
  left: 0;
  top: 0;
  width: 100%; /* Ancho completo */
  height: 100%; /* Altura completa */
  overflow: auto; /* Habilita el scroll si es necesario */
  background-color: rgb(0,0,0); /* Color de respaldo */
  background-color: rgba(0,0,0,0.4); /* Negro con opacidad */
}

/* Contenido del Modal */
.modal-content {
  background-color: #fefefe;
  margin: 5vh auto; /* 15% desde la parte superior y centrado */
  border: 1px solid #888;
  width: 80%; /* Puede ser más o menos, dependiendo del tamaño de la pantalla */
}

/* Botón de cierre */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  margin-right: 8px;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}