/* REGLA UNIVERSAL PARA TODO EL CSS*/
* {
    padding: 0;
    vertical-align: baseline;
    margin: 0;
    font-family: sans-serif;

}



/* ENCABEZADO*/
            /* LOGOOOOOOOOOOOS*/
            /* LOGOS DEL ENCABEZADO - DGPC Y FADU*/

img{
    width:auto;}

#iconos{
    margin: auto;
    margin: 0em 10em;
     display: flex;
    justify-content: space-around;
    padding: 1em;
}
                  
#iconos .logodgpc{
    height: 60px;
    width: auto;
}

#iconos .logodgpc: first-child{
    margin-right: 1em;
}

#iconos a{ 
    width:60px;
    height: auto;
}


   /* fin de logos */
        /* HEADER/ ENCABEZADO DEL BODY */
   
                /* MENU, BOTON QUE TE LLEVA A LAS DIFERENTES PAGINAS */

header{
    background-color:  rgb(179, 240, 188);
}

header section div {
    position: static;
    width: 40%;
    text-align: end;
    display: inline-block;
}

ul{
list-style:none !important;
}
                      /* caracteristicas de nav- en el menú */

nav{
    margin: auto;
    margin-left: 10em;
    margin-right: 10em; 
    padding: 1em 0em 1em 0em;
    margin-top: 0em;
    text-decoration: none;
   }

nav ul{ 
    display:flex;
    justify-content:space-between;
    text-decoration: none;
    
}

nav ul li{ 
    text-decoration: none;
    width:100%;
    
}
                   /* caracteristicas de cada uno de los elementos en el menú */
nav ul li a{ 
    color:  darkgreen;
    display: block;
    background-color: white;
    margin: 5px;
   font-family:sans-serif;
    text-decoration: none;
    font-size: 15px;
    text-align: center;
    border-radius: 50px 50px 50px 50px;
    font-weight: bold;
    padding: 5px;
   
}

nav ul li a:hover{ 
    color: white;
    background-color: #418b5e;
}

                     /* TERMINAMOS EL MENÚ Y NOS METEMOS EN EL BODY */
                 

              /* IMAGENES DE INTEGRANTES DE GRUPOS */
              /* IMAGENES CIRCULARES DE NOSOTRAS */

    
#alumnas{
    display: flex; 
    flex-direction: row;
    justify-content: center;
    padding: 1em 0em 2em 0em;
    justify-content: space-evenly;
    }

.foto {
    margin: 0px 0px 8px 0px;
}

.foto img {
    border-radius: 100%;
    border: solid 0.3em rgb(179, 240, 188);
   }

h5 {
    color: white;
    border: solid 5px rgb(179, 240, 188);
    font-weight: 200;
    border-radius: 50px 50px 50px 50px;
    text-decoration: none;
    background-color:  rgb(179, 240, 188);
    }


h5 a{
    text-decoration: none;
    color: darkgreen;
    display: block;
    background-color: white;
   font-family:sans-serif;
    font-size: 15px;
    text-align: center;
    border-radius: 50px 50px 50px 50px;
    font-weight: bold;
    padding: 5px;
}

                 /* CARACTERISTICA DE LOS TITULOS DEL BODY */

h1, h2, h3 {
   color: darkgreen;
    margin: 10px;
}

                     /* titulo principal - Comitente */
h1{
    font-size: 25px;
    padding: 0px 0px 5px 0px;
    color: #418b5e;
    border-radius: 30px 30px 30px 30px;
    background-color: white; 
    padding: 5px;
    }

h2, h3, h4{
    font-size: 20px;
    padding: 0px 0px 5px 0px;
    color: #418b5e;
    border-radius: 30px 30px 30px 30px;
    background-color: white;
    padding: 5px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

h3{
    font-size: 20px;
}

h6 h7{
    font-size: 20px; 
}
                /* CARACTERISTICA MAIN */

main{
    margin-left: 10em;
    margin-right: 10em;
    display: flex;
    flex-direction: column;
    
}

body main {
    background-color: white;
    text-align: center;
    border: 3em rgb(179, 240, 188);
    padding: 0em;
    
}
                  /* sector del comitente  */

.comitente {
    padding: 1em;
    border: 5px solid #418b5e;
    color: #418b5e;
    border-radius: 30px 30px 30px 30px;
    background-color: rgb(179, 240, 188);
    }
                    /* sector del enfoque  */

#enfoque {
    padding: 1em;
    border: 5px solid #418b5e;
    color: #418b5e;
    border-radius: 30px 30px 30px 30px;
    background-color: rgb(179, 240, 188);
    }
                    /* sector del sitio  */

#sitio{
     padding: 1em;
    border: 5px solid #418b5e;
    color: #418b5e;
    border-radius: 30px 30px 30px 30px;
    background-color: rgb(179, 240, 188);
    }
    

                      /* sector del la info de la institucion - nombres  */

#datosAcademicos{
     margin: 1em 0;
    padding: 2em;
    border: 5px solid #418b5e;
    color: #418b5e;
    border-radius: 30px 30px 30px 30px;
    background-color: #418b5e;  
}

#datosAcademicos h2 {
    color: rgb(179, 240, 188);
}

#datosAcademicos h3 {
    color: rgb(179, 240, 188);
}

#datosAcademicos p {
    color: aliceblue
}


             /* IMAGENES */

#merlo {}


                 /* CARACTERISTICA DE FOOTER */
footer {
    color: aliceblue;
    border: .2em #418b5e;
    padding: 4em;
    background-color: #418b5e;  
}

footer p{
    margin-left: 5em;
    margin-right: 5em;
    text-align: center;
    font-size: 15px;
}


 /* CARACTERISTICA PARA PLAN Y ANALISIS */
#IMAGENESMAPA img{
    height: 250px;
    width: auto;
}
#Analisis{ 
    padding: 2em;
    border: 5px solid #418b5e;
    color: #418b5e;
    border-radius: 30px 30px 30px 30px;
    background-color: rgb(179, 240, 188);
    }

#Analisis h2{ 
    padding: 10px 0px 10px 0px;
    width: 40%;
    height: auto;
    }
    
#tituloAnalisis h1{
    font-size: 20px;
    border: 5px solid #418b5e;
    color: #418b5e;
    border-radius: 30px 30px 30px 30px;
    width: 100%;
    text-align: center;
}


 /*Luego del mobile first agregamos media para dispositivos con pantallas mas grandes*/
 /*SE VIENEN LOS ARROBA MEDIA */

@media all and (min-width: 650px) {
       #ColumnasQueSeVanAMover{
        display: flex;
        
        }
        #ColumnaIzquierda{
        flex-direction: column;
        flex-basis: 350%;
        margin-right: 2em;
        }
        #ColumnaDerecha {
        flex-direction: column;
         }
}