.overlay{
    background: rgba(0,0,0,0.3);
    position: fixed;
    top: 40px;
    bottom: 0px;
    left:0px;
    right:0px;
    display:flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
}

.overlay.active{
    visibility: visible;
}

.popup{
    background: #f8f8f8;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.4);
    border-radius: 3px;
    padding: 17px;
    text-align: center;
    width: 450px;
    opacity: 0;
    transition: .3s ease all;
    transform: scale(0.7);
    min-height: 415px;

        
}

.popup .btn-cerrar-popup{
    font-size: 16px;
    line-height: 16px;
    display: block; /* Hace que el link ocupe todo el espacio disponible */
    text-align: right; /*enlace a la derecha*/
    color: #BBBBBB;
    transition: .3s ease all;
    text-decoration: none;
}

.popup .btn-cerrar-popup:hover{
    color: #000000;
}

.popup h3{
    font-size: 36px;
    font-weight: 600;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 0px;
    opacity:0; /*Para evitar el salto ed la animacion*/
}

.popup h4{
    font-size: 16px;
    margin-top: 10px;
    margin-bottom: 30px;
    text-align: left;
    opacity:0; /*Para evitar el salto ed la animacion*/
}


/*Animaciones*/
/*Cuando aparece el popup crecer de tamaño*/
.popup.active{
    opacity: 1;            
    transform: scale(1);
}

/*Accion para H3 cuando el popup esta con la clase "active"*/
.popup.active h3{
    animation: entradatitulo .8s ease .3s forwards; /*Se agrega forwards para que la animacion quede con el último estado de "TO" (final de la animacion*/
}


/*Accion para H4 cuando el popup esta con la clase "active"*/
.popup.active h4{
    animation: entradadescripcion .8s ease .6s forwards; /*Se agrega forwards para que la animacion quede con el último estado de "TO" (final de la animacion*/
}


/*Se mueve de abajo hacia arriba el h3*/
@keyframes entradatitulo {
    From {
        transform: translateY(-25px); /*de arriba a abajo*/
        opacity:0;  /*Opacidad para evitar el salto. tambien se agrega en el elemento original*/
    }
    to {
        transform: translateY(0px);
        opacity: 1;
    }

}

/*Se mueve de abajo hacia arriba el h3*/
@keyframes entradadescripcion {
    From {
        transform: translateY(25px); /*de arriba a abajo*/
        opacity:0;  /*Opacidad para evitar el salto. tambien se agrega en el elemento original*/
    }
    to {
        transform: translateY(0px);
        opacity: 1;
    }

}