@font-face {
    font-family: "Montserrat-Light";
    src: url("../fonts/Montserrat-ExtraLight.ttf");
  }  

.modalnew {
    display: none; /* Por defecto, estará oculto */
    position: fixed; /* Posición fija */
    z-index: 1; /* Se situará por encima de otros elementos de la página*/
    padding-top: 0px; /* El contenido estará situado a 20px de la parte superior */
    left: 0px;
    top: 5px;
    width: 100%; /* Ancho completo */
    height: 100%; /* Algura completa */
    overflow: auto; /* Se activará el scroll si es necesario */
    background-color: rgba(0,0,0,0.5); /* Color negro con opacidad del 50% */
}

/* Ventana o caja modal */
.contenido-modal {
    position: relative; /* Relativo con respecto al contenedor -modal- */
    background-color: transparent;
    color: black;
    margin: auto; /* Centrada */
    padding: 20px;
    width: 90%;
    height: 95%;
    -webkit-animation-name: animarsuperior;
    -webkit-animation-duration: 0.5s;
    animation-name: animarsuperior;
    animation-duration: 0.5s
}

/* Animación */
@keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}

@keyframes animarsuperior {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

/* Botón cerrar */
.close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-family: 'Montserrat-Light', sans-serif;
    color: white;
    /*float: right;*/
    font-size: 50px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    text-decoration: none;
    cursor: pointer;
    color: white;
    font-weight: bold; 
}

/*************** CELULAR *******************/

@media screen and (max-width: 768px) {

    .close {
        position: absolute;
        top: 10px;
        right: 15px;     
    }

}