.modal-popup {
   display: none;
   position: fixed;
   z-index: 99999;
   padding-top: 10px;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   overflow: hidden;
   background-color: rgba(0,0,0,0.5);   
}

.modal-contenido {
   margin: auto;
   display: block;
   height: 80%;
   max-width: 360px;
   max-height: 390px;
   position: relative;
   left: 50%;
   top: 300px;
   -webkit-animation-name: zoom;
   -webkit-animation-duration: 0.6s;
   animation-name: zoom;
   animation-duration: 0.6s;
}

   .modal-contenido img {
      height: 100%;
      width: 100%;
      object-fit: contain;
      border-radius: 20px;
      box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
   }

.modal-shortcut rect:hover,
.modal-shortcut path:hover {
   cursor: pointer;
   opacity: 0.3;
}

@-webkitkey-frames zoom {
   from {
      -webkit-transform: scale(0)
   }

   to {
      -webkit-transform: scale(1)
   }
}

@keyframes zoom {
   from {
      transform: scale(0)
   }

   to {
      transform: scale(1)
   }
}

.cerrar {
   position: absolute;
   top: -35px;
   left: calc(100% - 25px);
   color: #f1f1f1;
   font-size: 40px;
   font-weight: bold;
   transition: 0.3s;
}

   .cerrar:hover,
   .cerrar:focus {
      color: #bbb;
      text-decoration: none;
      cursor: pointer;
   }

@media only screen and (max-width: 390px) {
   .modal-contenido {
      width: 90%;
   }
}