header #ocultar{
    display: block;
 }
  .modal {
   display: none; 
   position: fixed; 
   z-index: 1; 
   padding-top: 100px; 
   left: 0;
   top: 0;
   width: 100%; 
   height: 100%; 
   overflow: auto; 
   background-color: rgb(0,0,0); 
   background-color: rgba(0,0,0,0.9); 
}

.modal-image {
   margin: auto;
   display: block;
   width: 80%;
   max-width: 80%;
}

#caption {
   margin: auto;
   display: block;
   width: 80%;
   max-width: 700px;
   text-align: center;
   color: #ccc;
   padding: 10px 0;
   height: 170px;
}

.modal-image, #caption { 
   animation-name: zoom;
   animation-duration: 0.6s;
}

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


.close {
   position: absolute;
   top: 15px;
   right: 35px;
   color: #f1f1f1;
   font-size: 40px;
   font-weight: bold;
   transition: 0.3s;
   
}

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

@media only screen and (max-width: 700px){
   .modal-image {
       width: 100%;
   }
}