/* 

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: #409287;
    font-weight:700; 
}
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: 3.125rem;
}
footer a{
    text-decoration: none; 
    color: rgb(63, 63, 63); 
    font-size: 1.25rem;
    font-weight: bold;
}
footer p{
    color: rgb(63, 63, 63); 
    font-size:0.7rem;
}
.cargos{
    padding: 2rem;
    margin: 2% 5% 2% 5%;
    text-align: center;
}
.nombreapp {
    color:#FFFF;
    margin:0px;
    font-size: 1.25rem;
}
.nombreapp h1 {
    color: rgb(255, 255, 255) solid; 
    margin-top: 0.313rem; 
    padding-top: 1rem; 
    font-size: 1.563rem; 
    margin-bottom: 0%;
}
.nombreapp h3 {
    margin-top: 0%;
    margin-bottom: 0.313rem; 
    font-size: 1.563rem;
}
.nombreapp h3 a{
    color: #409287; 
    font-size: 1rem; 
    padding: 0% 1rem 1rem 1rem ;
}
.nombreapp p{
    font-size: 1.25rem; 
    color: rgb(63, 63, 63); 
    margin: 5% 8% 5% 8%;
    line-height: 1.875rem;
}
.nombreapp a{
    text-decoration: none;
    color: white;
}
.nombreapp iframe{
    margin-top: 1.563rem; font-size: 1.25rem;
}

.investigacion{
    justify-content: space-around;
    margin: 0.125rem 35% 0.625rem 35%;
 
}  

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;
}
.imagenflujo{
    max-width: 100%;
    height: auto;
    justify-content: center;
}

.flujodeusuario{
    width: 100%;
    height: auto;
}

      



@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*/
    
    
    
}