@import url('https://fonts.googleapis.com/css?family=Roboto+Slab|Roboto:300,400,500,700');


body{
    min-height: 100vh;
    margin: auto;
    width:100%;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    font-family: 'Roboto Slab', serif;
    background: rgb(222, 222, 222); 
    margin-bottom: 0;
    display: flex;
    flex-wrap: wrap;
}
h1, h2,h3{
    color:rgb(234, 111, 5);    
}

.cprincipal{
    
/*    background: #eee;*/
}
.grid-block{
    background: url(../imagenes/fondoa-01.png) repeat center center fixed rgb(219, 39, 42);
    background-size: cover; 
    max-height: 1024vh;
    width: 100%;
}
.contenedoruno{
  background: rgb(244, 244, 244);
    width: 100%;
    margin: auto; 
}
h3{
    
    font: 500 1.1em 'Roboto Slab', serif; 
    letter-spacing: .1rem;
}

a{
    text-decoration: none;
    
}


/*-------*/


.cabecera{
    
    background: rgb(234, 111, 5);
    width: 100%;
    height: 3.5em;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navegacion{
    margin: 0px;
    position: absolute;
    top: 65px;
    margin-left: 100%;
    max-height: 0;
    overflow: hidden;
    width: 100%;
    transition: all .4s;        
}



ul{
    
    margin: 0px;
    padding: 0px;
    top:0px;
    
}

li{
    list-style: none;
    padding: 0px;
    
        
}



.dgpc{
    display: block;
    padding: 10px;
    margin-top: 0px;
    margin-right: 210px;
    text-decoration: none;
    color:rgb(48, 44, 44);
    background: #fafafa;
    font: 300 .9em 'Roboto', sans-serif;
    box-shadow: 
    0px 4px 8px -1px #888888;
}

a:hover{
    color:  rgb(234, 111, 5);
    
}

.logo{
    width: 70px;
    
}

.icon-menu{
    display: block;
    width: 45px;
    height: 35px;
    font-size: 28px;
    text-align: center;
    line-height: 45px;
    cursor: pointer;
    color: #eee;
    
        
    
}
.icon-menu, .logo{
    margin: 15px;

    
    
}

.mostrar{
    margin-left: 55%;
    max-height: auto;
    overflow: visible;
}


/*------------primera seccion------------*/

.textil{
    
    margin: 15px;
    display:flex;
    margin-top: 0px;
    
}
.hilar{
    color:#fff;
    margin-top: 20px;
    padding: 0px;
    top: 0px;
    
}

 h1{
    font: 700 1.55em 'Roboto Slab', serif; 
    letter-spacing: 0.1rem;
    top: 0px;
    margin: 0px;
    text-transform: uppercase;
}

h1::before{
    content: '';
    display: block;
    width: 35px;
    height: 4px;
    background: rgb(234, 111, 5);
    margin-bottom: 7px;
    
}

.uno{
    margin-top: 15px;
    
}

h2{
    font: 500 1.4em 'Roboto Slab', serif; 
    letter-spacing: 0.15em;
    margin-bottom: -14px;
  
}

h2::before{
    content: '';
    display: block;
    width: 8%;
    height: 3px;
    background: rgb(234, 111, 5);
    margin-bottom: 3.5px;
        
    }
p{
    margin-top:0px;
    margin: 0px;
    color: #000;
    font-kerning: 10;
    font: 300 0.84em 'Roboto', sans-serif;
    
    
}



/*-------------segunda seccion-------------*/
main{
    max-width: 1000px;
}

.datos{
    width: auto;
    display: flex;
    align-items: baseline;
    margin:15px;
}


.estudo{
    
    flex: 1 0 25%;
    
    
}
.docen{
    margin-left: 35px;
    flex: 0 1 70%;
    
    
}
.alum{
    width: 100px;
    margin-top: 0px;
    margin-bottom: 3px;
}

.alum::before{
    content: '';
    display: block;
    width: 20%;
    height: 3px;
    background: rgb(234, 111, 5);
    margin-bottom: 3px;
    margin-top: 1px;
    
       
}
.alumo::before{
    content: '';
    display: block;
    width: 20%;
    height: 3px;
    background: rgb(234, 111, 5);
    margin-bottom: 10px;
    margin-top: 1px;
        
    }
.alumo{
    width: 130px;
    margin-top: 0px;
    margin-bottom: 3px;
}
.alumno{
    display: flex;
    margin-top: 2px;
    font: 300 0.84em 'Roboto', sans-serif;
    color: #000;
}
.alumno:hover{
    color:  rgb(234, 111, 5);}

.docente{
    display: flex;
    margin-top: 2px;
    font: 300 0.84em 'Roboto', sans-serif;
    color:#000;
    
}

/*---------tercera seccion---------*/

.uba{
    margin:15px;
    font: 300 0.8em 'Roboto', sans-serif;
    color:#939393;
	margin-bottom: 80px;
    
}

h4{
    font: 700 'Roboto', sans-serif;
    margin-top: 6px;
}

.ba{
    width: 320px;
}
.ba::before{
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: #939393;
    margin-bottom:10px 
    
        
    }
.rector{
    margin-top: -15px;
    font: 300 .9em 'Roboto', sans-serif;
    
}

/*----------estilos de footer----------*/


.footer{
    display: flex;
	align-self: flex-end;
    background: rgb(234, 111, 5);
    width: 100%;
    
}

.contenedor{
    margin:15px;
    width: 100%;
    height: 60px

}
   

.legales{
    font: 300 0.8em 'Roboto', sans-serif;
    text-align: left;
    color:#eee;
}
    


/*---------estilos responsive---------*/


@media(min-width:768px){


.contenedoruno{
    width: 100%; }

.navegacion{
    position: static;
    max-height: 100%;
    transition: none;
}

.menu{
    margin: 0px 10px 0px 0px;
    display: flex;
    justify-content: space-between;
     }
    
.dgpc{
    width: 120px;
    color:rgb(48, 44, 44);
    background: none;
    box-shadow: none;
    text-align: center;
    font: 500 1.02em 'Roboto Slab', sans-serif; 
    letter-spacing: .02em
        }
         
.logo{
    margin: 35px;     
/*    margin-right:5px;*/
    
    
}
    
a:hover{
    color: #eee;
    
}    

.alumno:hover{
        color: rgb(219, 39, 42);
    }
.icon-bars{
    display: none;
    }

 p{
        width:80%;
    }   

.footer{
    display: flex;
    flex-wrap: wrap;
    align-self: flex-end;
    width: 100%;
    height: 5.5em
    
}
.contenedor{
        display: flex;
        justify-content: center;
    }

    
    
    


.legales{
    font: 300 0.8em 'Roboto', sans-serif;
    text-align: center;
    margin: 10px 0 0px;
    
}
        
}   



/*--------------------cambio de pantalla 1024 ----------*/
    
@media(min-width:1024px){

.cprincipal{
    margin-left:60px;

} 
    
.contenedoruno{
    width: 80%;
    height: 100%;

    
    
    }

    
/*---------header-----------*/

.cabecera{
    
    background: rgb(234, 111, 5);
    width: 100%;
    height: 4em;
    display: flex;
    justify-content: space-between;
    align-items: center;
        
    }

    
    
.navegacion {
    position: static;
    display: flex;
    justify-content: flex-end;
    margin: 0px;
    transition: none; 
    margin-left: 300px;
    margin-right: 80px
}





.dgpc{
    display: block;
    padding: 10px;
    margin-top: 0px;
    margin-right: 10px;
    text-decoration: none;
    color:#eee;
/*    background: #fafafa;*/
    font: 300 .97em 'Roboto', sans-serif;
}
         
.logo{
    margin: 35px;     
    margin-left: 75px;
    width: 90px;
    
    
}
    
a:hover{
    color: #000;
    
}    

.alumno:hover{
        color: rgb(219, 39, 42);
    }
.icon-bars{
    display: none;
    }
    

/*----------------main    ----------------*/
    
    
h1{
    font: 700 2.1em 'Roboto Slab', serif; 
    letter-spacing: 0.1rem;
    top: 0px;
    margin: 0px;
    text-transform: uppercase;
}

h1::before{
    content: '';
    display: block;
    width: 45px;
    height: 5px;
    background: rgb(234, 111, 5);
    margin-bottom: 7px;
    
}
h2{
    font: 500 2em 'Roboto Slab', serif; 
    letter-spacing: 0.01em;
    margin-bottom: -8px;
  
}

h2::before{
    content: '';
    display: block;
    width: 4%;
    height: 4px;
    background: rgb(234, 111, 5);
    margin-top: 1px;
        
    }
    
p{
    width:85%;
    font: 300 .96em 'Roboto', sans-serif;
    letter-spacing: 0.02em;
    line-height: 1.3;
    }   

.datos{
    width: auto;
    display: flex;
    align-items: baseline;
    margin:15px;
    margin-top: 25px;
}
.alum{
    width: 100px;
    margin-top: 0px;
    margin-bottom: 3px;
    font: 500 1.3em 'Roboto Slab', serif;
    
}

.alum::before{
    content: '';
    display: block;
    width: 35%;
    height: 4px;
    background: rgb(234, 111, 5);
    margin-bottom: 10px;
    margin-top: 1px;
    
       
}
.alumo::before{
    content: '';
    display: block;
    width: 30%;
    height: 4px;
    background: rgb(234, 111, 5);
    margin-bottom: 10px;
    margin-top: 1px;
        
    }
.alumo{
    width: 130px;
    margin-top: 0px;
    margin-bottom: 3px;
    font: 500 1.27em 'Roboto Slab', serif;
}
.alumno{
    display: flex;
    margin-top: 2px;
    font: 300 0.9em 'Roboto', sans-serif;
    color: #000;
    line-height: 1.5;
}

.docente{
    display: flex;
    margin-top: 2px;
    font: 300 0.9em 'Roboto', sans-serif;
    color:#000;
    line-height: 1.5;
    
}
.alumno:hover{
    color:  rgb(234, 111, 5);}



.uba{
    margin:15px;
    font: 300 0.9em 'Roboto', sans-serif;
    color:#939393;
    
}

h4{
    font: 700 'Roboto', sans-serif;
    margin-top: 18px;
}

.ba{
    width: 320px;
    margin-top: 4px;
}
.ba::before{
    content: '';
    display: block;
    width: 110%;
    height: 2px;
    background: #939393;
    margin-bottom:10px;
    
        
    }
.rector{
    margin-top: -15px;
    font: 300 1.05em 'Roboto', sans-serif;
    line-height: 1.2
    
}

.contenedoruno.footer{
    display: flex;
    flex-direction: row;
    align-self: flex-end;
/*    width: 100%;*/
    height: 4em;
    
}
.legales{
    font: 300  'Roboto', sans-serif;
    width: 75%;
    
}
    
}