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


html, body {
    box-sizing: border-box;
}

*{
    margin: 0;
    padding: 0;
}



h1, h2,h3, h4, h5, h6 {
    font-family:"Roboto Slab", serif;
	font-size: 32px;
}
p{
	font-family:"Roboto", san-serif;
	font-size: 32px;
}




/*----------------estilos del header----------------*/


.header{
    position: fixed;
	top:0;
    height: 4em;
    width: 100%;
    background-color: #dea886;
	box-shadow: 0 1px 4px 2px rgba(82, 38, 10, 0.51);

	
	
}
    .header__contenedor{
       
		display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
    }
    .header__logo{
        margin: 9px 15px;
        width: 75px;
            
    }
    .icon-menu{
        display: block;
        width: 40px;
        height: 40px;
        margin-right: 10px;
        font-size: 28px;
        color: #fff;
        line-height: 50px;
        border-radius: 5px;
        text-align: center;
        cursor: pointer;
	}

    .header__nav{
        position: absolute;
        top: 4em;
        right: -100%;
		background: #dea886;
		transition: all 1s;
		height: 420px;

		
	}
    
	.mostrar{
    	right: 0px;
		
}

.menulist__items{
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    list-style: none;
	
}
 
.menulist__items:nth-child(4){
	border-bottom:none;
	
}
	.menulist__links{
        display: block;
        padding: 10px;
        width: 170px;
		border-top: 1px;
		box-shadow: -1px 1px 1px 0px #d3d3d3;
        text-decoration: none;
		font: 400 1em 'Roboto';
		color: #eee;
    
    }
	.menulist__links:hover{
       
		font: 400 1em 'Roboto';
		color: #5a4264;
    
    }


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

.footer{
    display: flex;
	align-self: flex-end; 
    background: #dea886;
    width: 100%;
    
}

	.footer__contenedor{
    padding:10px;
    width: 100%;
    

}
   

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





/*-----------------ESTILOS ESTUDIANTE-----------------*/
/*-----------------articulo estudiante-----------------*/


.section{
	padding-top: 70px;
	margin-top: 60px;
	height:60em;
	background-color: #faf1dc;
	
}
.article{
	padding-top: 1.5em;
	height: 15em;
	margin-bottom: 1em;
	}
	.article__foto{
		display: block;
		margin: auto;
		border-radius: 50%;
		width: 140px;
		background: #dea886;
		
	}
	.article__titulo{
		margin-top: 0.4em;
		font-size: 1.2em;
		text-align: center;
		width: 100%;
		color:#5a4264;
	}
	.article__titulo::after{
		content: '';
		display: block;
		width: 9em;
		height: 2px;
		background: #000;
		margin: auto;
	
}
	
	.articulo__carrera{
		font: 300 1em roboto;
		text-align: center;
		color:#5a4264;
	}


/*-----------------ESTILOS ACADÉMICA-----------------*/
/*-----------------NIVELES ACADÉMICOS-----------------*/


.materias{
	
	width: 100%;
	
}
	.materias__contenedor{
	width: 85%;
	margin:auto;
	background: #dea886;
	color:#5a4264;
	margin-bottom: 3em;
	
		
	}
	.materias__academica{
		text-align: center;
		width: 85%;
		margin:auto;
		background: #5a4264;
		font:  500 1.4em roboto slab;
		box-shadow: 0 -1px 0 0 #d96500 inset;
		color:#faf1dc;
	}
	.materias__nivel{
		font: 700 .95em  roboto slab;
		line-height: 2em;
		border-bottom: 1px solid rgba(255, 255, 255, 0.2);
		background: #dea886;
		text-align: center;
		box-shadow: 0 -1px 0 0 #d96500 inset;

		cursor: pointer;
		
	}
	.materias__lista{
		list-style: none;
		display: none;
	}
	.materias__item{
		font: 300 .95em roboto;
		line-height: 2em;
		background:#5a4264;
		padding-left: 1em;
		white-space: pre;
		
		
	
	}	
	.materias__item:nth-child(odd){
		background: #fff3df;
		 
		
}
	
	.materias__item:nth-child(even){
	color: #fff3df;
		 
		
}

/*------------------probando el sludeup------------------*/
.prueba{
	
	width: 85%;
	margin:auto;
	
	color:#eee;

}
	.prueba__titulo{
		text-align: center;
		
		margin:auto;
		cursor: pointer;
		font:  500 1.3em roboto slab;
		box-shadow: 0 -1px 0 0 #d96500 inset;
		color:#eee;
		text-transform: uppercase;
		background: #000;
	}
	.prueba__parrafo{
		font: 300 .95em roboto;
		line-height: 2em;
		background:#c1c1c1;
		padding-left: 1.5em;
		display: none;
	}	

.inscribir{
	text-decoration: none;
	
}