@import url('https://fonts.googleapis.com/css?family=Lato:400,900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Lora:400,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
*{ 
    padding: 0; 
    margin: 0; 
    box-sizing: border-box; 
    transition: 1s all;}
body {
    background-color: white;
    font-family: 'Lato', sans-serif;
}
header{
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  width: 100%;
  padding-left: 10px;
  box-sizing: border-box;
  text-transform:lowercase;
  background:white; }
ul {
    list-style: none;
}
.topnav a {
    color:black; 
    text-decoration: none; 
    font-size: 8px; 
    padding: 1rem; 
    display: flex;
    justify-content: flex-start;
    font-family:'Lato', sans-serif;
    text-transform:uppercase;
}
.topnav ul li { display: inline-block;
    
}
/* img {
    border-radius: 0px;
} */

main {padding:1rem;
    color: white;
    font-family: 'Lato';
}
section {
    list-style: none;
    color: white;
    background-color: black;
    font-family: 'Lato';
    display: flex;
}
/*
article {padding:1rem;
    color:white;
    background-color: black;
    font-family: 'Lato';
}
*/
footer {
    padding:1rem;
    color: white;
    background-color: black;
    font-family: 'Lato';
}
aside {
    padding:1rem; 
    color:black;
    background-color: white;
}
.banner-ish{
     position: relative;
     display: inline-block;
     max-width: 100%
}
.banner-ish img{
     max-width:100%;
}
   
.titulito{
    position: absolute;
    z-index: 1;
    margin: 0 auto;
    left: 0;
    right: 80%;
    top: 10%; 
    text-align: left;
    height: auto;
    width: 170px;
    color:black;
    background-color: white;
    font-size:5px;
    text-transform: Uppercase; 
    font-family:'Lato', sans-serif; 
    font-weight: 100;
    padding:5px;
    
   
}

.nivel1{width: 25%; display: flex; flex-direction: column; align-items: center;}
.nivel2{width: 25%; display: flex; flex-direction: column; align-items: center;}
.nivel3{width: 25%; display: flex; flex-direction: column; align-items: center;}

/*
    .subtitulo{
    position: absolute;
    z-index: 200;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 47%; 
    text-align: left;
    width: 90%;
    font-style:italic;
    font-size:42;
    color: white;
    padding-top:40px; 
    
}
*/

.fotoperfil { 
    width:200px;
    height: 200px;
    position: relative;
    padding: 2rem;
    border-radius: 100px;

}

.fotoperfil img {
    border-radius: 250px;
}

.Materias{
    font-size:10px;
    text-transform: uppercase;
    font-family:'Lato', sans-serif; 
    font-weight:700;
    padding: 10px;
    color:red;

    
}

@media screen and (min-width:980px){
    nav {background: red;}
    main {background: black}
    .nivel1{width: 100%;}
    .nivel2{width: 100%;}
    .nivel3{width: 100%;}
    .seccionmaterias {display: flex;}
    .burger-menu{display: inline;}
    .burger-image{width: 20px; height: 20px;}
}

/***********************************************************************
*  NAV    * 
***********************************************************************/




header {
    width: 100%;
    margin: 0;
    position: relative;}
/*

.topnav {
  background-color: #000;
  overflow: hidden;}

.topnav a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 1rem;
    text-decoration: none;
    font-size: 1rem;
    font-family: 'roboto', sans-serif;
    font-weight: 500;}

.topnav a:hover {
  background-color: white;
  color: black;
}

/* boton activado 
.topnav a.active {
  background-color: #975ABF;
  color: white;
}
*/

/* esconde boton menu para mobile 
.topnav .icon {display: none;}
*/

/***********************************************************************
*  RESPONSIVE   * 
***********************************************************************/




/***********************
*  TOPNAV   * 
************************/
    
  
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }


  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }