@charset "utf-8";


@font-face {
    font-family: 'oswaldbold';
    src: url('oswald-bold-webfont.eot');
    src: url('oswald-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('oswald-bold-webfont.woff2') format('woff2'),
         url('oswald-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}



@font-face {
    font-family: 'oswaldlight';
    src: url('oswald-light-webfont.eot');
    src: url('oswald-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('oswald-light-webfont.woff2') format('woff2'),
         url('oswald-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'oswaldregular';
    src: url('oswald-regular-webfont.eot');
    src: url('oswald-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('oswald-regular-webfont.woff2') format('woff2'),
         url('oswald-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}



@font-face {
    font-family: 'robotobold';
    src: url('roboto-bold-webfont.eot');
    src: url('roboto-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('roboto-bold-webfont.woff2') format('woff2'),
         url('roboto-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'robotolight';
    src: url('roboto-light-webfont.eot');
    src: url('roboto-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('roboto-light-webfont.woff2') format('woff2'),
         url('roboto-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}





/*primero mobile*/
Html {
      font-size: 12px;
        box-sizing: border-box;

}

div#pagina { 
      width: 80%;
      margin: auto;
}

body { 
    background-color: white;
    margin: 2rem auto;
    padding: 0;
}

header {
}


main{ 
     font-family: 'robotolight';
    font-weight: 400;
    font-size: 1.5rem;
}

aside{
}
p{  font-family:  'robotolight';
    font-weight: 400;
    font-size: rem;
    color: #000000
}
h1{
    font-family: 'oswaldbold';
    font-weight: 400;
    font-size: 5rem;
    color: #000000
    
}
h2{
    font-family: 'oswaldbold';
    font-weight: 400;
    font-size: 1.5rem;
    color: #000000
    
}

h4{
    font-family:  'oswaldlight';
    font-weight: 400;
    font-size: 1.8rem;
    color: #000000
    
}


ul{
    list-style: none;
    margin: 0;
    padding: 0;
     display: block;
}

header nav ul li a {
    font-family:   'oswaldbold';
    font-weight: 200;
    
    color: #000000;
    font-size: 1.9rem;
    text-decoration: none;
    display: block;
    
}


header nav ul li {
    background-color: none;
    text-align: center;
    width: auto;
   
    height: auto;
    line-height: 3rem;
        
}



nav#botones ul{
    
    background-color: white;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: baseline;
    align-content: center;
    
    text-align: center;
    width: 100%;
    margin: 0;
    height: auto;
    line-height: 5rem;
    text-decoration: none;
    list-style: none;

}



li.link:hover{
    background-color: #ffda00;
}

ul#rotulo li {
    
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin: 0.5rem 0,5rem;
    
}


ul#rotulo li h1{
    
    height: 5rem;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin: 0.5rem 0rem;
    
    padding-bottom:5px;
   
    padding-top:5rem;
    
}


li.nombre h1{
    
 margin-top: 7rem;
    
}

ul#rotulo li h4{
    
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin: 0.3rem 5rem 5rem 5rem;
    
    
}


ul#rotulo li figure img{
    
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin: 3rem 3rem 0rem 3rem;
    
    
}

main h3{
   
    padding-bottom:5px;
   
    padding-top:5px;
  
    padding-bottom:5px;
    
    
}

div#materias{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: center;
    margin: 0rem 0rem 15rem 0rem;
    
}

div#materias ul h1 {
    font-family:  'oswaldbold';
    text-align: center;
    font-weight: 400;
    font-size: 1.8rem;
    color: #000000;
    background-color: #ffda00;
   
    padding-bottom:3px;
    
}

div#materias ul li{
   color: white;    
}


div#materias ul li:hover{
   color: black;    
}


div#materias ul:hover{
   background-color: #ffda00;
    border: 7px solid #ffda00 ;

}



 h3{
     
    text-align: center;
    margin: 50px;
    font-family:  'oswaldbold';
    font-weight: 400;
    font-size: 2REM;
    color: #000000

    
}


li.link a{
    width: 200px;
    
}