body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background: #31404a;
}

nav {
    width: 100%;
    height: auto;
    /* background-color: #2e3844; */
    background-color: #2e384463;
    color: white;
    margin-top: 0;
    position: absolute;
    top: 0;
}

nav .botonNav {
    display: none;
}

nav .botonNav i {
    cursor: pointer;
}

nav .botonNav i:hover {
    color: rgb(216, 216, 216);
}

nav .botonNav i:active {
    color: white;
}

nav ul {
    font-weight: bold;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-template-rows: auto;
    grid-gap: 10px;
}

nav ul li {
    margin: 15px 0 15px 0;
    text-align: center;
}

nav ul li a {
    text-decoration: none;
    cursor: pointer;
    color: white;
    outline: none;
}

nav ul li a:hover {
    text-decoration: underline;
}

@media screen and (max-width: 590px){
    nav ul {
        display: none;
    }
    nav {
        background-color: #4b5b6e;
    }
    nav .botonNav {
        font-size: larger;
        display: block;
        width: 100%;
        background-color: #3d4a5a;
        text-align: right;
    }
    nav .botonNav i {
        margin: 20px;
    }
}

.cabecera {
    width: 100%;
    height: 550px;
}

@media screen and (max-width:650px) {
    .cabecera {
        height: 450px;
    }
}

.cabecera .imagen {
    width: 100%;
    height: 100%;
    /* background-image: url(https://livedemo00.template-help.com/wt_pro_2.0_free_sample_template/images/index-1-slider-1-1920x768.jpg); */
    background-image: url(https://universidadean.edu.co/sites/default/files/noticias/internas/inauguraci%C3%B3n-ean-legacy-banner.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.cabecera .imagen .opacidad {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    background-color: #3d4a5a73;
}

.cabecera .imagen .opacidad .titulo {
    color: white;
    margin-left: 10%;
    font-size: x-large;
}

section .integrantes {
    width: 100%;
    height: auto;
    background-color: #516ca9;
    color: white;
    padding: 30px 0 70px 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

section .integrantes .titulo {
    width: 100%;
    height: 50px;
    text-align: center;
    padding: 20px 0 20px 0;
}

section .integrantes .titulo h4 {
    margin: 0;
    font-size: x-large;
}

.integrantes .nombres {
    width: 95%;
    max-width: 80%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-template-rows: auto;
    grid-gap: 20px;
}

.integrantes .nombres div {
    height: auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: left;
    font-size: larger;
    font-weight: bold;
}

.integrantes .nombres div i {
    text-align: left;
    width: 100%;
    font-size: 70px;
    margin-bottom: 10px;
}

.integrantes .nombres div i:hover, .integrantes .nombres div span:hover {
    color: rgb(2, 219, 172);
}

.acercaDe {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-template-rows: auto;
    background-color: rgb(251, 253, 255);
    padding: 70px 0 70px 0;
}

.acercaDe h3 {
    font-size: xx-large;
    color: #3d4a5a;
}

.acercaDe h4 {
    font-size: x-large;
    color: #3d4a5a;
}

.acercaDe .nombre, .acercaDe .imagen {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    text-align: center;
}

.acercaDe .imagen img {
    width: 100%;
}

.acercaDe .nombre h3, .capacidades .productos h2, .capacidades .precios h2 {
    width: 100%;
}

.capacidades {
    padding-top: 30px;
    background-color: white;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    grid-template-rows: auto;
    grid-gap: 30px;
    padding-bottom: 70px;
}

.productos, .precios, .canales, .comunica {
    padding: 3%;
    text-align: center;
    border-bottom: 1px solid #31404a;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.capacidades p {
    text-align: justify;
}

@media screen and (max-width:640px) {
    .capacidades .canales {
        width: 100%;
    }
    .capacidades {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
}

.capacidades .productos, .capacidades .precios, .canales, .comunica {
    text-align: center;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.capacidades h2, .capacidades h3 {
    color: #3d4a5a;
}

.capacidades li {
    color: rgb(87, 87, 87);
    font-size: large;
}

.capacidades .productos ul {
    list-style: none;
}

.audiencia {
    width: 100%;
    background-image: url(https://livedemo00.template-help.com/wt_pro_2.0_free_sample_template/images/parallax-1-1920x1026.jpg);
    background-position: center;
    background-repeat: repeat-y;
    background-size: auto 115%;
    color: white;
    padding: 50px 0 50px 0;
    background-attachment: fixed;
}

.audiencia .titulo {
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: xx-large;
    margin-bottom: 100px;
    text-align: center;
}

@media screen and (max-width:800px) {
    .audiencia .titulo{
        font-size: large;
    }
}

.audiencia .caracteristicas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-template-rows: auto;
    grid-gap: 2%;
    padding: 3%;
}

.audiencia .caracteristicas .geograficas, .audiencia .caracteristicas .demograficas {
    border-radius: 100px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    align-items: center;
    padding: 30px;
    background-color: rgba(228, 226, 226, 0.39);
}

.audiencia .caracteristicas .geograficas h3, .audiencia .caracteristicas .demograficas h3 {
    font-size: xx-large;
}

.audiencia .demograficas ul {
    text-align: left;
}

.audiencia .demograficas ul li {
    margin-bottom: 10px;
}

.audiencia .geograficas h3, .audiencia .demograficas h3 {
    font-size: larger;
}

.informe {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    background: white;
    padding-bottom: 70px;
}

.informe div {
    padding: 0 5% 0 5%;
}

.informe h2 {
    color: #31404a;
    font-size: xx-large;
    padding: 70px 0 70px 0;
}

.informe div img {
    width: 100%;
    margin-bottom: 50px;
}

.informe p {
    color: #3d4a5a;
    font-size: large;
    text-align: justify;
}

.informe .divBoton #buyerPerson {
    border: none;
    color: white;
    outline: none;
    background-color: #516ca9;
    height: auto;
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
    padding: 14px;
}

.informe .divBoton #buyerPerson a {
    color: white;
    text-decoration: none;
    font-size: large;
    font-weight: 500;
}

.informe .divBoton #buyerPerson:hover {
    background-color: #3a4e7a;
}

.informe .divBoton #buyerPerson:active {
    background-color:#516ca9;
}

.diagnostico {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    color: white;
    background-color: #3d4a5a;
}

.diagnostico .titulo {
    width: 100%;
    max-width: 70%;
    text-align: center;
    font-size: larger;
    padding: 50px 0 50px 0;
}

.diagnostico .competidores {
    padding: 0 7% 0 7%;
    margin-bottom: 70px;
}

.diagnostico .competidores div p {
    text-align: justify;
}

.diagnostico .competidores ul li a {
    color: white;
}

.diagnostico .opciones {
    width: 90%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 20px;
}

.diagnostico .opciones div {
    background-color: white;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: large;
    font-weight: bold;
    color: #3d4a5a;
    border-radius: 7px;
    cursor: pointer;
}

.diagnostico .opciones div span {
    margin: 5%;
}

.diagnostico {
    padding-bottom: 100px;
}

.diagnostico .opciones div:hover {
    animation: color1 0.3s both;
}

@keyframes color1 {
    0% {
        background-color: white;
        color: #3d4a5a;
    } 100% {
        background-color: #516ca9;
        color: white;
    }
}

.propuesta {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 100px 0 100px 0;
    background: white;
}

.propuesta .primerTexto, .propuesta .partesEstrategia {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    height: auto;
    margin-bottom: 3%;
    width: 85%;
}

.propuesta .primerTexto .titulo {
    width: 100%;
    font-size: larger;
    text-align: left;
    color: #31404a;
}

.propuesta .primerTexto .texto {
    width: 100%;
    padding: 0 20px 0 20px;
}

.propuesta .publicaciones, .propuesta .fechas, .propuesta .contenido {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 3%;
    height: auto;
    width: auto;
}

.publicaciones .texto, .fechas .texto, .contenido .texto {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 95%;
}

.partesEstrategia .texto h3 {
    color: #516ca9;
    font-size: 23px;
    font-weight: normal;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.partesEstrategia .texto p {
    text-align: justify;
}

.publicaciones .imagen1, .fechas .imagen1, .contenido .imagen1 {
    width: auto;
    display: flex;
    justify-content: center;
}

@media screen and (max-width: 750px){
    .publicaciones .texto, .fechas .texto, .contenido .texto {
        order: 2;
        margin-bottom: 50px;
    }
    .publicaciones .imagen1, .fechas .imagen1, .contenido .imagen1{
        order: 1;
    } 
}

.publicaciones .imagen1 img, .fechas .imagen1 img, .contenido .imagen1 img{
    width: 95%;
    height: 100%;
}

footer {
    padding: 50px 0 50px 0;
}

footer, footer a {
    background: #31404a;
    color: #adb8c0;
}

footer .titulos {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-template-rows: auto;
}

footer .titulos .materia {
    margin-left: 15px;
}

footer .titulos .materia {
    display: flex;
    justify-content: center;
    align-items: center;
}

footer .titulos .logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

footer .titulos .logo img { 
    width: 100px;
}

footer .enlaces {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    margin: 3% 0 0 5%;
    grid-gap: 3%;
}

.enlaces1, .enlaces2, .enlaces3, .enlaces4 {
    margin-bottom: 10%;
}


footer .enlaces ul {
    margin: 0;
}

footer .enlaces ul li {
    margin-bottom: 5px;
}

footer .enlaces ul li a {
    word-break: break-all;
}

footer .enlaces ul li a:hover {
    color: white;
}

footer .enlaces .titulo {
    font-size: large;
    margin: 0 0 10px 10px;
}

footer .enlaces .titulo {
    color: white;
}

.fondoModal {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.600);
    overflow-y: scroll;
    justify-content: center;
    z-index: 1000;
    display: none; /*flex*/
}

.fondoModal .modal {
    width: 100%;
    /* max-width: 850px; */
    height: auto;
    background-color: #ffffff;
    border-radius: 6px;
    position: absolute;
}

.fondoModal .close {
    text-align: right;
    padding: 15px;
    background-color: #516ca9;
    color: white;
}

.fondoModal .close i {
    cursor: pointer;
    font-size: x-large;
}

.fondoModal .close i:hover {
    color: rgb(219, 56, 56);
}

.fondoModal .modal .textoModal {
    text-align: justify;
    color: #31404a;
    font-size: large;
}

.fondoModal .modal .imagenModal {
    width: 100%;
    height: 400px;
    background-image: url(https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=702&q=80);
    background-repeat: no-repeat;
    background-size: cover;
}

.fondoModal .modal .imagenModal .opacidad {
    background: #242b3581;
    height: 100%;
    display: flex;
    align-items: center;
}

.fondoModal .modal .imagenModal .opacidad .tituloModal {
    color: white;
    font-size: xx-large;
    padding: 3%;
}

.fondoModal .textoModal {
    margin: 5%;
}

.fondoModal .textoModal .divImagenes {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 0.3fr));
    grid-gap: 50px;
    justify-content: center;
    margin: 100px 0 100px 0;
}

.fondoModal .textoModal .divImagenes img {
    width: 100%;
    border: 4px solid black;
    border-top: 20px solid black;
    border-bottom: 20px solid black;
    border-radius: 15px;
}

.fondoModal .textoModal .imgModal2{
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 0px;
    justify-content: center;
    text-align: center;
}

.fondoModal .textoModal .imgModal2 img {
    border: none;
    width: 80%;
    display: flex;
    justify-self: center;
}

.textos {
    padding: 5%;
    text-align: center;
    color: white;
}

.fondoModal .textoModal h1 {
    text-align: center;
}