/* 

selector{propiedades:valor;}


*/

body{
    font-family: 'Poppins', sans-serif;
    margin-top: 0.625rem;
    text-align: center;
    width: 100%;
    height: 100%;
    margin: 0%;
    background-color:#afeee4;
}
.logo{
    background-size: cover;
    width: 100%; 
    height: 100%;
    margin-top: 0%;
    margin-bottom: 0%;
}
h1{
    color: #ffffff;
    font-weight:900; 
}
h2{
    margin-top: 0%;
}
.vn29{
    color: #ffffff; 
    margin-top: 0.313rem; 
    padding: 0%; 
    background-color: rgb(247, 205, 177);
}
h4{
    color: #08b8b8;
    margin-top: 0%;
}
footer{
    width: 100%; 
    margin-bottom: 4%;
}
footer a{
    text-decoration: none; 
    color: rgb(63, 63, 63); 
    font-size: 1.25rem;
    font-weight: bold; 
    margin:2% 5% 2% 5%;
}
footer p{
    color: rgb(63, 63, 63); 
    font-size:0.7rem;
    margin:1% 7% 2% 7%;
}
.cargos{
    padding: 2rem;
    margin: 2% 5% 2% 5%;
    text-align: center;
 
}
.nombreapp {
    
    margin:0px;
}
.nombreapp h1 {
    color: #ffffff solid; 
    margin-top: 5px; 
    margin-bottom: 0%;
}
.nombreapp h3 {
   color: rgb(36, 36, 36); 
   opacity: 50%;
   background-color: #ffffff;
   margin-top: 5px;
   margin-bottom: 5px;
}
.nombreapp p{
    font-size: 18px;
    color: #2b4646; 
    margin: 5% 8% 5% 8%;
    line-height: 30px;
}

.investigacion{    
    padding: 30px;
    align-content: center;
    justify-content: space-between;
    margin: 2px 22% 80px 22%;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 1rem;
    box-shadow: 0px 0px 30px #409287;
 }  
.investigacion h2{
    color: #3ba89a;
    margin-top: 20px;
    margin-bottom: 20px;
}

nav{background: #5ed6c6;
    height: 100%; 
    font-size: 140%;
    margin-top: -0.5rem;
}
nav ul{
    display: flex;
    justify-content: center;
    color: rgb(255, 255, 255);
    text-decoration: none;
    list-style:none;
    margin: 0 30% 0 30%;
    padding: 0%;

    
  }
  nav a{
    text-decoration: none;
    color: rgb(255, 255, 255);
    padding: 1rem;
    text-align: center;
    margin-top: 0%;
    margin: 0%;
    font-weight: 300;
    }
.botonmenu{
    display: none;
}



.materias{
    display: flex;
    justify-content: space-between;
    margin: 3% 5% 2% 5%;
    
    
}


.objetivo{
    width: 100%;
    height: 100%; 
    background-color: rgba(255, 255, 255, 0.7) ;
    border-radius: 1rem;
    margin: 3% 1% 3% 1%;
    box-shadow: 0px 0px 30px #409287;
}  
.target{
    width: 100%;
    height: inherit; 
    padding-bottom: 8.3%; 
    background-color: rgba(255, 255, 255, 0.7) ;
    border-radius: 1rem;
    margin: 3% 1% 3% 1%;
    box-shadow: 0px 0px 30px #409287;
}
.proyecto{
    width: 100%;
    height: inherit;
    padding-bottom: 3.3%; 
    background-color: rgba(255, 255, 255, 0.7) ;
    border-radius: 1rem;
    margin: 3% 1% 3% 1%;
    box-shadow: 0px 0px 30px #409287;
}
.materias h2{
    color: #3ba89a;
    margin-top: 6%;
    margin-bottom: 1%;
}
.materias p {margin: 7%;color: #2b4646;}
.socalo {
    background-color: #ffffff;
    margin-top: 5px; 
    color: #ffffff; 
    opacity: 50%;
}



@media all and (max-width: 800px) {

    .logo{ display:none;};   /* para que no se vea el logo que está en el tamaño desktop*/
   
    .banner{background-image: url(../img/logo-verde.png)}
   
   
   
   /* para que se vea la imagen como background  le podes dar 
propiedades de cömo queres que se muestre, Distinto es lo que pasa cuando usas el img que sï, tenes 
que usar las imágenes más o menos al tamaño de la que las vas usar o bien modificar su % */  


    header .banner {
       
        display: block;
        height: 15rem;
        width: 100%;
        background-color: blue; /* le puse un color de fondo para poder ubicar el tamano de alto y ancho */
       
        background-image: url(../img/logo-verde.png);
        background-position: center;
        background-repeat: no-repeat; 
}

    
    .cargos{
        padding: 0.188rem;
        margin: 2% 5% 2% 5%;
        text-align: center;
        
    }
    
    
    .investigacion{
        
        padding: 0.375rem;
        align-content: center;
        justify-content: space-between;
        margin: 0.125rem 1.875rem ;
        background-color: rgba(255, 255, 255, 0.7);
        border-radius: 1rem;
        font-size: 90%;
        color: #2b4646;
     
    }  
    .investigacion h2{
    color: #3ba89a;
    margin-top: 2%;
    margin-bottom: 1%;
    font-size: 1.25rem;
    
    }
     /* menu oculto */
    
     nav ul{
        display: none;
        padding-bottom: 2rem;
        background-color: #5ed6c6;
        margin: 0;
    }
    
    .botonmenu{
        display: flex;
       width: 7%; 
    }
  .botonmenu img{
      width: 100%;
  }
    nav:hover ul{
        display:block;
        position: absolute;
        width: 100%;
        
    }
    
    nav a:hover{
        color:rgb(255, 127, 42);
    }
    /*fin menu oculto*/

    
    .materias{
        display: block;
        justify-content: space-between;
        margin: 5% 8% 0% 8%;
        width: 82.3%;
        height: 100%;
    }
    .foto {border-radius: 50%;
        width: 15.625rem;
        margin-bottom: 0.5rem;
    }
    
    .proyecto{
        width: 100%;
        height: auto; 
        background-color: rgba(255, 255, 255, 0.7) ;
        border-radius: 1rem;
            } 
           
    .objetivo{
        width: 100%;
        height: auto; 
        background-color: rgba(255, 255, 255, 0.7) ;
        border-radius: 1rem;
    }
    .target{
        width: 100%;
        height: auto; 
        background-color: rgba(255, 255, 255, 0.7) ;
        border-radius: 1rem;
    } 
    .materias h2{
        color: #3ba89a;
    margin-top: 2%;
    margin-bottom: 1%;
    font-size: 130%;
    padding-top: 4%;
    }
    .materias p {margin: 2%;padding: 2% 3% 6% 3%;color: #2b4646;font-size: 90%;}
    .socalo {
        background-color: #ffffff;margin-top: 0.313rem; color: #ffffff; opacity: 50%;
    }
    
}