/* color primero: #5f0030 */

* {
   padding: 0;
   margin: 0 auto;
   box-sizing: border-box;
}


head {
    font-family: 'open sans';

}

body {
    font-family: 'open sans';
    background: #f8e1db;
    margin: auto;
    display: block;
    
    
}

/* Header */
header {
    display: flex;
    flex-direction: row;
    object-position: center;
}

.flor-header{
    display: flex;
    margin:auto;
    width: 100%
}

/* Nav */

nav{
    text-align: center;
    padding: 0.5em;
    margin: 0 1em 0;
    border-radius: 0.3em;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
        
}

nav > a{
    color: #504A43;
    font-weight: 600;
    font-size: 12pt;
    text-decoration: none;
    margin: 3px;
}

nav > a:hover{
    text-decoration: underline ;
}



/* Tema DGPC*/
.contenedor-tema-dgpc{
    display: flex;
    justify-content: center;
}

.contenido-textos{
    color: #f8e1db;
    background-color: #504A43;
    width: 300px;
    padding: 0 20px 20px 20px;
    border-radius: 5px;
    box-shadow: 0 5px 6px 0 rgba(0, 0, 0, 0.3);
    margin-bottom: 1em;
    text-align: center
}


/* Foto Perfil - Nombre */
.sobre-mi{
    display: flex;
    flex-direction: column;
    align-content: center;
}

.perfil .avatar{
    align-items: center;
    margin: 0 3em 0 3m;
    width: 250px;
    border-radius: 100%;
}
.perfil img{
    border: 1em solid white;
    display: block;
    align-content: center;
    position: absolute; right:  3.5em; left: 3.5em;
    }

/* Sobre mi */

.sobre mi{
    padding-top: 0em;
    display: flex;
    align-content: center;
}

.contenido-texto-card{
    font-size: 14pt;
    font-weight: 600;
}


.card h2{
    text-align: center;
    color: #504A43;
    font-size: 2em;
    padding-left: 10%;
    padding-right: 10%;
    padding-bottom: 0.5em;
}

.card{
    display: flex;
    flex-direction: column;
    align-content: center;
    background: #fff;
    margin-top: 150px;
    margin-bottom:3em;
    padding-top: 8em;
    padding-bottom: 3em;
    border-radius: 10px;
    box-shadow: 0 5px 6px 0 rgba(0, 0, 0, 0.3);
    width: 90%;
}

.contenido-texto-card h3{
    padding-bottom: 5%;
    text-align: center;
    font-size: 1em;
    font-size: 20pt;
    color: #504A43;
}

.datos{
    width: 60%;
    margin-top: 3m;
    text-align: center;
    color: #504A43;
}

/* Redes Sociales */
.redes-sociales h3{
    font-size: 16pt;
}

.iconos-redes-sociales{
    margin: 10px auto;
    width: 50%;
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    align-items: center;
}

.redes-sociales h4{
    text-align: center;
    color: #504A43;
}

.contenedor-icono i{
    color: #504A43;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 20px;
    margin-right: 20px;
    font-size: 300%;
    
}

/* Informacion Academica */

.info-academica{
    color: #504A43;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;    
    text-align: center;
    margin: 0;
    padding-bottom: 2em;
    border-image: 1em;    
    
}

h3{
    text-align: center;
    color: #504A43;
    font-size: 16pt;
}

/* Informacion Academica de la Materia*/

.info-materia-facultad{
    align-content: center;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    padding-top: 2em;
}



.info-academica h4{
    text-align: center;
    color: #504A43;
    font-size: 1.5em;
    padding-top: 2em;
}

.materias-aprobadas{
    font-size: 0.8em;
    text-align: center;
    display: table-cell;
    width: 60%;
}

.materias-2020{
    font-size: 0.8em;
    text-align: center;
    display: table-cell;
    width: 60%;
}

.porcentaje{
    font-size: 0.8em;
    text-align: center;
    display: table-cell;
    width: 60%;
}



.info-catedra{
    background-color: #ffffff;
    width: 70%;
    font-size: 0.8em;
    text-align: center;
    justify-content: center;
    border-radius: 5px;
    padding: 0 20px 20px 20px;
    box-shadow: 0 5px 6px 0 rgba(0, 0, 0, 0.3);
}



/* Informacion Academica de la Materia*/

footer p{
    text-align: center;
    font-size: 0.6em;
    padding: 3em 3em 1em 3em;
    width: 80%
}

@media (min-width: 650px)and (max-width: 1400px) {
    nav{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    
    }
    
    nav > a{
    color: #504A43;
    font-weight: 600;
    font-size: 12pt;
    text-decoration: none;
    margin: 3px;
    }
    
    .card{
        width: 60%;
    }
    
    .contenedor-icono i{
    font-size: 320%;
    }
    
    .info-academica{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        align-content: center;
        width: 60%;
        margin-left: 20%;
        margin-right: 20%;
            
    }
    
    .info-academica h4{
    text-align: center;
    color: #504A43;
    font-size: 12pt;
    padding-top: 2em;
    }
    
    
}


/*--------------------* PLAN *-------------------------------*/

.contenido-plan-textos h2{
    color: #504A43;
    text-align: center;
    font-size: 40pt;
    margin-top: .3em;
    margin-bottom: .5em;
    
}

.contenido-plan-textos h3{
    color: #504A43;
    text-align: left;
    margin-left: 4em;
    margin-right: 4em;
    
    
   
}

/* Comitente */

.comitente h3{
    color: #504A43;
    margin-bottom: 1em;
    border: 3px #504A43 solid;
    border-left: none;
    border-right: none;
    margin-top: 2em;
    text-align: center;
}

.comitente p{
    color: #504A43;
    margin-right: 6em;
    margin-left: 6em;
    margin-bottom: 1em;
    font-size: .9em;
    text-align: center;
}



/* Idea general */

.idea-general h3{
    color: #504A43;
    text-align: center;
    margin-bottom: 1em;
    margin-top: 3em;
    border: 3px #504A43 solid;
    border-left: none;
    border-right: none;
}
    
.idea-general p{
    color: #504A43;
    margin-right: 6em;
    margin-left: 6em;
    margin-bottom: 1em;
    font-size: .9em;
    text-align: center;
}

/* Contendido */

.contenido-webapp h3{
    color: #504A43;
    text-align: center;
    margin-bottom: 1em;
    margin-top: 3em;
    border: 3px #504A43 solid;
    border-left: none;
    border-right: none;
}

.contenido-webapp  p{
    color: #504A43;
    margin-right: 6em;
    margin-left: 6em;
    margin-bottom: 1em;
    font-size: .9em;
    text-align: center;
}

/* Target */


.target h3{
    color: #504A43;
    text-align: center;
    margin-bottom: 1em;
    margin-top: 3em;
    border: 3px #504A43 solid;
    border-left: none;
    border-right: none;
}

.target  p{
    color: #504A43;
    margin-right: 6em;
    margin-left: 6em;
    margin-bottom: 1em;
    font-size: .9em;
    text-align: center;
}

/* Boceto */

.boceto h3{
    color: #504A43;
    text-align: center;
    margin-bottom: 1em;
    margin-top: 3em;
    border: 3px #504A43 solid;
    border-left: none;
    border-right: none;
}

.imagen-boceto p{
    color: #504A43;
    margin-right: 6em;
    margin-left: 6em;
    color:  #504A43;
    margin-bottom: 1em;
    font-size: .9em;
    text-align: center;
}

/* Saco subrayado a la palabra */

.imagen-boceto a:link, a:visited, a:active {
    text-decoration:none;
}

@media (min-width: 650px)and (max-width: 1400px) {
       
    .contenido-plan-textos{
        width: 75%;
    }
    
    .comitente h3{
    color: #504A43;
    margin-bottom: 1em;
    margin-top: 2em;
    text-align: left;
    padding: .3em 1em;
    font-size: 20pt;    
    }
    
    .comitente p{
    color: #504A43;
    margin-right: 6em;
    margin-left: 6em;
    margin-bottom: 1em;
    padding: .3em 1em;
    font-size: 1.2em;
    text-align: left;
}
    
      .idea-general h3{
    color: #504A43;
    margin-bottom: 1em;
    margin-top: 2em;
    text-align: left;
    padding: .3em 1em;
    font-size: 20pt;    
    }
    
    .idea-general p{
    color: #504A43;
    margin-right: 6em;
    margin-left: 6em;
    margin-bottom: 1em;
    padding: .3em 1em;
    font-size: 1.2em;
    text-align: left;
}
    
    .contenido-webapp h3{
    color: #504A43;
    margin-bottom: 1em;
    margin-top: 2em;
    text-align: left;
    padding: .3em 1em;
    font-size: 20pt;    
    }
    
    .contenido-webapp p{
    color: #504A43;
    margin-right: 6em;
    margin-left: 6em;
    margin-bottom: 1em;
    padding: .3em 1em;
    font-size: 1.2em;
    text-align: left;
    }
    
    .target h3{
    color: #504A43;
    margin-bottom: 1em;
    margin-top: 2em;
    text-align: left;
    padding: .3em 1em;
    font-size: 20pt;    
    }
    
    .target p{
    color: #504A43;
    margin-right: 6em;
    margin-left: 6em;
    margin-bottom: 1em;
    padding: .3em 1em;
    font-size: 1.2em;
    text-align: left;
    }
    
    .boceto h3{
    color: #504A43;
    margin-bottom: 1em;
    margin-top: 2em;
    text-align: left;
    padding: .3em 1em;
    font-size: 20pt;    
    }
    
    .boceto p{
    color: #504A43;
    margin-right: 6em;
    margin-left: 6em;
    margin-bottom: 1em;
    padding: .3em 1em;
    font-size: 1.2em;
    text-align: left;
    }
    
}



/*--------------------* M A P A *-------------------------------*/

.mapa-sitio{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    justify-content: center;
    align-items: center;
    width: 90%;
}

@media (min-width: 650px)and (max-width: 1400px) {
       
    .mapa-sitio{
        width: 75%;
    }
    
    
    
}