@import 'https://fonts.googleapis.com/css?family=Raleway:400,600|Patua+One';

/* |Patua+One */

@font-face {
    font-family: "helvetica_bold";
    src: url("../fuentes/helvetica bold.ttf");
}

@font-face {
    font-family: "helvetica_roman";
    src: url("../fuentes/helvetica roman.ttf");
}


/* ___________________________________________________ */



body {
    width: 100%;
    margin: 0em;
    margin-top: 0em;
    font-family: "Raleway";
    background: rgba(221, 221, 221, 0.43);
    background-image: url(../img/textura_ladrillos.png);
}



/* _______________  Barra de navegacion  _______________ */


header {
    margin-top: 0em;
    background: #4bb792; /* verde barra */
    display: flex;
    justify-content: space-between;
    padding: 0.3125em;
}

.logo img {
    margin: 0em 0em 0em 1.875em;
}

header nav ul{
   margin-right: 1.25em;
}

header nav ul li {
    list-style: none;
    display: inline;
}


header nav ul li a {
    text-decoration: none;
    list-style: none;
    text-align: center;
    color: white;
    font-size: 1.375em;
    font-family: "helvetica_roman";
    padding: 0.875em 1em 0.875em 1em;
    margin: 0em 0.3125em 0em 0em;
    border-radius: 0.3125em;
}

/* cambia de color con el cursor*/

header nav ul li a:hover {
    font-family: "helvetica_bold";
    background-color: #F5B657;  /* amarillo */
}


/* _______________________________________________________ */



section {
    margin: 50px 0px 60px 30px;

}

section h1 {
    font-family: "Patua One";
    font-weight: 100;
    font-size: 3.75em;
    color: #E5544C; /* rojo */
    margin: 1.25em 0em 0.5em 0em;
}


section a img:hover {
    opacity: 0.5;
}

.uno {
    width: 100%;
    display:flex;
    justify-content: flex-start;
    /* flex-direction: column; */
}

#descripcion {
    margin-left: 1.875em;
    padding: 0em;
    font-weight: 600;
}

#descripcion2 {
    font-size: 0.9375em;
    margin-left: 1.875em;
    padding: 0em 1.875em 0em 0em;
}

.dos img {
    border-radius: 1.25em;
}

.tres {
    margin: 1.25em 0em 0em 0.5em;
}

.tres img {
    margin: 0em 0.75em 0em 0em;
}


/* --------------------------------------------------------- */



.contenedor2 h2 {
    margin: 2.75em 0em 0em 0em;
    font-weight: 400;
    color: #E5544C;
}

.contenedor2 h3 {
    margin: 0.3125em 0em 2em 0em;
    padding: 0em;
}

.contenedor_columnas {
    width: 80%;
    display:flex;
    justify-content: flex-start;
    border-radius: 1.25em;
}

.columna {
    width: 12.5em;
    padding: 0.9375em;
    margin-left: 0em;
    margin-right: 1.875em;
    background: #E5544C; /*rojo */
    border-radius: 0.625em;
}

.columna:hover {
    background: #F5B657;
}

.columna h4 {
    color: white;
    font-size: 1.25em;
}

.columna p {
    color: white;
}


/* ------------------ volver --------------------- */

.landing {
    margin-top: -30px;
    margin-right: 40px;
    display: flex;
    justify-content: flex-end;
}

.landing a {
    padding: 10px;
    text-decoration: none;
    border-radius: 8px;
    color: white;
    background: #4bb792;
    font-family: "helvetica_roman";
}

.landing a:hover {
    background: #E5544C;
    font-family: "helvetica_bold";
}

#botoncito {
    margin-right: 8px;
}

#volver {
    margin-top: 3.125em;
}

#volver a {
    margin-left: 0.3125em;
    padding: 0.625em;
    color: white;
    background: #F5B657;
    border-radius: 5px;
    text-decoration: none;
}


#volver a:hover {
    background: #E5544C;
    font-family: "helvetica_bold";
}



/* ______________________________________________________ */




footer {
    font-size: 0.8125em;
    margin: 4.375em 0em 0em 0em;
    padding: 0em 1.875em 1.875em 1.875em;
    background: #fff;
    border-top: 0.375em solid #E5544C;
    
}

footer a:hover {
    opacity: 0.5;
}

footer img {
    margin-top: 0.625em;
}

#oocampo img{
    margin-top: 1.25em;
}

#uba {
    margin-top: 1.875em;
    font-weight: 600;
}

.datos_academicos {
    display: flex;
}

.datos1 {
    width: 220px;
    margin-left: 10px;
    font-size: 10px;
    padding: 10px;
    border-radius: 8px;
    background: rgba(245, 182, 87, 0.36);
}













/* ____________________  Responsive 1024 ___________________ */


@media screen and (min-width: 1024px) and (max-width: 1199px) {
    
    header nav ul li a {
        font-size: 1.125em;
    }

    #grup a{
        background: #F5B657;
    }    
    
    #grup a:hover {
        background: #E5544C;
    }



}




/* ____________________  Responsive 768 ___________________ */



@media screen and (min-width: 768px) and (max-width: 1023px) {
    

    * {
        margin: 0em;
        padding: 0em;
    }
    
    
    body {
        width: 100%;
        margin-left: 0em;
        padding:  0em;
    }
    
    #grup a{
        background: #E5544C; /* rojo */
    }    
    
    #grup a:hover {
        background: #F5B657;
    }
    
    header nav ul {
        margin: 0.9375em 2.5em 0em 0em;
    }
    
    header nav ul li a {
        font-size: 1.125em;
        padding: 0.625em 0.9375em 0.625em 0.9375em;
    }
    
    section h1 {
        font-size: 2.625em;
    }
    
    .uno {
       width: 80%;
    }
    
    #descripcion {
        padding: 0.5em 1.875em 0em 0em;
    }
        
    #descripcion2 {
        padding: 1.25em 1.875em 0em 0em;
        font-size: 0.875em;
    } 
        
    .tres {
        margin: 1.75em 0em 0em 0em;
    }
    
    .contenedor2 h3 {
        margin: 0.3125em 0em 0em 0em;
        padding: 0em;
    }
    
    .contenedor_columnas {
        width: 100%;
        margin-top: 1em;
    }
        
    .columna {
        margin-top: 1.5625em;
        width: 40%;
    }
    
    .columna h4 {
        margin: 0.5em 0em 1em 0em;
    }
    
    #contenido_footer {
     margin: 0.625em 0em 0.625em 0em;   
    }
    
    .datos1 {
        margin-top: 10px;
    }
    
    footer h3{
        margin-top: 10px;
        margin-bottom: 8px;
    }
        
}











/* ____________________  Responsive 480 ___________________ */


@media screen and (min-width: 480px) and (max-width: 767px) {
    
    * {
        margin: 0em;
        padding: 0em;
    }
    
    body {
        width: 100%;
        margin: 0em; 
        padding:  0em;
    }
    
    header {
        flex-direction: column;
        padding: 0em;
    }
    
    header nav ul{
        margin-right: 0em;
        margin: 0.9375em 0em 0.875em 1.875em;
    }
    
    header nav ul li a {
        font-size: 1em;
        padding: 0.5em 0.75em 0.5em 0.75em;
        margin: 0em 0.3125em 0em 0em;
    }
    
    header nav ul li a:hover {
        font-family: "helvetica_roman";
        background-color: #F5B657;  /* amarillo */
    }
    
/* ------------------------------------------------------ */
        

    #volver a {
        font-size: 0.8125em;
        margin-left: 0.3125em;
        padding: 0.375em;
        color: white;
        background: #F5B657;
        border-radius: 0.3125em;
        text-decoration: none;
    }
    
/* ------------------------------------------------------ */ 
    
    section h1 {
        font-size: 1.125em;
        margin: 1.875em 0em 0.75em 0em;
    }
          
    .uno {
        width: 100%;
        flex-direction: column;
    }    
    

    .dos img {
        width: 12.5em; 
        height: 12.5em;
    }
    
    .dos {
        padding-left: 0em;
    }
      
    #descripcion {
        margin: 1em 0em 0em 0em;
        font-size: 0.875em;
    }
    
     #descripcion2 {
        width: 35em;
        margin: 1em 0em 0em 0em;
        font-size: 0.75em;
    }
    
    .tres img {
        width: 3.125em; 
        height: 3.125em;
        padding: 0em;
        margin: 0em 1em 0em 0em;
    }
        
    .contenedor2 h2 {
        margin: 3.75em 0em 0em 0em;
        font-size: 1.125em;
    }
                
    .contenedor2 h3 {
        font-size: 1.125em;
        margin: 0.5em 0em 1em 0em;
    }
        
    .contenedor_columnas {
        width: 100%;
        flex-direction: column;
    }
        
    .columna {
        width: 15em;
        margin-top: 0.9375em;
    }
        
    .propuesta a {
        font-size: 1.5625em;
    }
    
    #uba {
        margin: 1.5em 0em 1em 0em;
    }
    
    #contenido_footer {
        width: 85%;
        font-size: 0.875em;
    }
    
    #university img {
        margin-top: 1.5625em;
    }
    
    .datos_academicos {
        flex-direction: column;
        margin-top: 40px;
        margin-bottom: 40px;
    }

    .datos1 {
        margin: 0px 0px 10px 0px;
        padding-left: 0px;
        width: 280px;
        background: white;
    }
    
    .datos1 h3 {
        margin-bottom: 8px;
    }
    
    
    
    .landing {
        margin-top: -40px;
        justify-content: flex-start;
    }

    .landing a {
        padding: 8px;
        font-size: 12px;
    }

}
    
    







/* ____________________  Responsive 320 ___________________ */



@media screen and (min-width: 320px) and (max-width: 479px) {
    
    * {
        margin: 0em;
        padding: 0em;
    }
    
    body { 
        width: 100%;
        margin: 0em; 
        padding:  0em;
    }
    
    header {
        flex-direction: column;
        padding: 0em;
    }
    
    header nav ul{
        margin-right: 0em;
        margin: 0.9375em 0em 0.875em 1.875em;
    }
    
    #grup {
        display: none;
    }
    
    header nav ul li a {
        font-size: 0.875em;
        padding: 0.5em 0.75em 0.5em 0.75em;
        margin: 0em 0.3125em 0em 0em;
    }
    
    header nav ul li a:hover {
        font-family: "helvetica_roman";
        background-color: #F5B657;  /* amarillo */
    }
    
/* ------------------------------------------------------ */
        
    .landing {
        margin-top: -40px;
        justify-content: flex-start;
    }

    .landing a {
        padding: 8px;
        font-size: 10px;
    }
    
    #volver {
        margin-top: 1.875em;
    }

    #volver a {
        font-size: 0.8125em;
        margin-left: 0.3125em;
        padding: 0.375em;
        color: white;
        background: #F5B657;
        border-radius: 0.3125em;
        text-decoration: none;
    }
/* ------------------------------------------------------ */ 
    
    section h1 {
        font-size: 1.125em;
        margin: 1.875em 0em 0.75em 0em;
    }
          
    .uno {
        width: 100%;
        flex-direction: column;
    }    
    
    #descripcion {
        margin: 1em 0em 0em 0em;
        font-size: 0.875em;
    }
    
     #descripcion2 {
        margin: 1em 0em 0em 0em;
        font-size: 0.75em;
    }
    
    .uno {
        width: 100%;
    }
    
    .dos img {
        width: 12.5em; 
        height: 12.5em;
    }
    
    .dos {
        padding-left: 0em;
    }
            
    .tres img {
        width: 3.125em; 
        height: 3.125em;
        padding: 0em;
        margin: 0em 1em 0em 0em;
    }
        
    .contenedor2 h2 {
        margin: 3.75em 0em 0em 0em;
        font-size: 1.125em;
    }
                
    .contenedor2 h3 {
        font-size: 1.125em;
        margin: 0.5em 0em 1em 0em;
    }
        
    .contenedor_columnas {
        width: 100%;
        flex-direction: column;
    }
        
    .columna {
        width: 15em;
        margin-top: 0.9375em;
    }
        
    .propuesta a {
        font-size: 1.5625em;
    }
    
    #uba {
        margin: 1.5em 0em 1em 0em;
    }
    
    #contenido_footer {
        width: 85%;
        font-size: 0.875em;
    }
    
    #university img {
        margin-top: 1.5625em;
    }
    .datos_academicos {
        flex-direction: column;
        margin-top: 40px;
        margin-bottom: 40px;
    }

    .datos1 {
        margin: 0px 0px 10px 0px;
        padding-left: 0px;
        width: 280px;
        background: white;
    }
    
    .datos1 h3 {
        margin-bottom: 8px;
    }
   
}











/* ____________________  Responsive para menos de 320 ___________________ */



@media screen and (min-width: 0px) and (max-width: 329px) {
    
   

    * {
        margin: 0em;
        padding: 0em;
    }
    
    body {
        width: 100%;
        margin: 0em; 
        padding:  0em;
    }
    
    header {
        flex-direction: column;
        padding: 0em;
    }
    
    header nav ul{
        margin-right: 0em;
        margin: 0.9375em 0em 0.875em 1.875em;
    }
    
    #grup {
        display: none;
    }
    
    header nav ul li a {
        font-size: 0.875em;
        padding: 0.5em 0.75em 0.5em 0.75em;
        margin: 0em 0.3125em 0em 0em;
    }
    
    header nav ul li a:hover {
        font-family: "helvetica_roman";
        background-color: #F5B657;  /* amarillo */
    }
    
/* ------------------------------------------------------ */
        
    .landing {
        margin-top: -40px;
        justify-content: flex-start;
    }

    .landing a {
        padding: 8px;
        font-size: 10px;
    }
    
    #volver {
        margin-top: 1.875em;
    }

    #volver a {
        font-size: 0.8125em;
        margin-left: 0.3125em;
        padding: 0.375em;
        color: white;
        background: #F5B657;
        border-radius: 0.3125em;
        text-decoration: none;
    }
/* ------------------------------------------------------ */ 
    
    section h1 {
        font-size: 1.125em;
        margin: 1.875em 0em 0.75em 0em;
    }
          
    .uno {
        width: 100%;
        flex-direction: column;
    }    
    
    #descripcion {
        margin: 1em 0em 0em 0em;
        font-size: 0.875em;
    }
    
     #descripcion2 {
        margin: 1em 0em 0em 0em;
        font-size: 0.75em;
    }
    
    .uno {
        width: 100%;
    }
    
    .dos img {
        width: 12.5em; 
        height: 12.5em;
    }
    
    .dos {
        padding-left: 0em;
    }
            
    .tres img {
        width: 3.125em; 
        height: 3.125em;
        padding: 0em;
        margin: 0em 1em 0em 0em;
    }
        
    .contenedor2 h2 {
        margin: 3.75em 0em 0em 0em;
        font-size: 1.125em;
    }
                
    .contenedor2 h3 {
        font-size: 1.125em;
        margin: 0.5em 0em 1em 0em;
    }
        
    .contenedor_columnas {
        width: 100%;
        flex-direction: column;
    }
        
    .columna {
        width: 11em;
        margin-top: 0.9375em;
    }
        
    .propuesta a {
        font-size: 1.5625em;
    }
    
    #uba {
        margin: 1.5em 0em 1em 0em;
    }
    
    #contenido_footer {
        width: 100%;
        font-size: 0.875em;
    }
    
    #university img {
        margin-top: 1.5625em;
        height: 4.2em;
    }
    
    
    .datos_academicos {
        flex-direction: column;
        margin-top: 40px;
        margin-bottom: 40px;
    }

    .datos1 {
        margin: 0px 0px 10px 0px;
        padding-left: 0px;
        width: 280px;
        background: white;
    }
    
    .datos1 h3 {
        margin-bottom: 8px;
    }
   
}