/*.overlay {
    height: 400px;
    width: 500px;
    position: fixed;
    top: 0;
    bottom: 0;
    background: rgba(43, 105, 115, 0.7);
    visibility: visible;
    border-radius: 10px;
    transition: opacity 500ms;
}
.overlay:target {
    visibility: visible;
    opacity: 1;
}
#popupBody{
    width: 400px;
    height: 300px;
    padding: 2%;
    border-radius: 15px;
    box-shadow: 0 0 5px #CCC;
    background: #c3d1e5;
    position: relative;
    margin: 5% auto;
    font-family: arial;
    transition: all 5s ease-in-out;
    border-radius: 15px;
}
.cerrar:link, .cerrar:active, .cerrar:visited, .cerrar:hover {
    position: absolute;
    top: 5;
    right: 5;
    text-decoration: none;
    color: #F92A2A; 
    font-size: 25px;
    font-weight: bold;
    transition: all 200ms;
}

*/

/* Modal container*/
.modal {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  top: 120;
  left: 0;
  height: 80%;
  width: 100%
  -webkit-transition: all .7s;
  transition: all .7s;
}
/* Modal container gets target and it is shown and background modal too*/
 .modal:target, .modal:target .modal-bg {
    display: block;
    z-index: 100;
    opacity: 1;
    visibility: visible; 
}
/* Background modal*/
  .modal-bg:active, .modal-bg:hover, .modal-bg:visited, .modal-bg:link {
    text-decoration: none;
    visibility: hidden;
    opacity: 10;
    position: fixed;
    top: 120;
    left: 0;
    height: 80%;
    background-color: rgba(0, 0, 0, 0.8);
    -webkit-transition: all .7s;
    transition: all .7s;
    cursor: default;
}
 /* Background modal overlaps to container*/
  .modal:target .modal-bg {
    z-index: 200; 
}
/* Modal content or body*/
  .modal-content {
    position: relative;
    top: 50%;
    left: 70%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #38566f80;
    height: 100%;
    width: 100%;
    border-radius: 2rem;
    text-align: center;
    z-index: 300; 
    visibility: visible;
    image-resolution: 85%;
    
}
  .modal-title {
    text-transform: uppercase;
    margin-top: 5vh;
    margin-right: 5vh;
    margin-left: 5vh;
    margin-bottom: 1.2rem; 
}
  .modal-text {
    margin-bottom: 1;
    margin-right: 5vh;
    margin-left: 5vh; 
    margin-top:0.5; 
    width: 87%;
    height: 90%
}
/* Modal is closed at lose target*/
  .modal-exit:link, .modal-exit:active, .modal-exit:visited, .modal-exit:hover {
    position: inherit;
    top: 3%;
    left: 47%;
    font-size: 1.7rem;
    font-weight: bold;
    text-decoration: none;
    color: #F92A2A; 
    background-color: #ffffff80;
}