/* TIPOGRAFIA */

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

}




@font-face {
    font-family: 'roboto_condensedbold_italic';
    src: url('robotocondensed-bolditalic-webfont.eot');
    src: url('robotocondensed-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('robotocondensed-bolditalic-webfont.woff2') format('woff2'),
         url('robotocondensed-bolditalic-webfont.woff') format('woff'),
         url('robotocondensed-bolditalic-webfont.ttf') format('truetype'),
         url('robotocondensed-bolditalic-webfont.svg#roboto_condensedbold_italic') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'roboto_condenseditalic';
    src: url('robotocondensed-italic-webfont.eot');
    src: url('robotocondensed-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('robotocondensed-italic-webfont.woff2') format('woff2'),
         url('robotocondensed-italic-webfont.woff') format('woff'),
         url('robotocondensed-italic-webfont.ttf') format('truetype'),
         url('robotocondensed-italic-webfont.svg#roboto_condenseditalic') format('svg');
    font-weight: normal;
    font-style: normal;

}




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

}




@font-face {
    font-family: 'roboto_condensedlight_italic';
    src: url('robotocondensed-lightitalic-webfont.eot');
    src: url('robotocondensed-lightitalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('robotocondensed-lightitalic-webfont.woff2') format('woff2'),
         url('robotocondensed-lightitalic-webfont.woff') format('woff'),
         url('robotocondensed-lightitalic-webfont.ttf') format('truetype'),
         url('robotocondensed-lightitalic-webfont.svg#roboto_condensedlight_italic') format('svg');
    font-weight: normal;
    font-style: normal;

}




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

}




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

}

/* ESTILOS */

* {
    padding: 0;
    margin: 0;
    border: 0;
    box-sizing: border-box;
   
    
}

body {    
    font-family: 'slabo_27pxregular', Arial, sans-serif;
    height: auto;
    line-height: 1.5em;
    width: 100%;
    box-sizing: border-box;
}

#anana { 
    float: none;
        
}

h1 { color: red;
     font-size: 32px;
     padding: 2px;
     text-align: center;
     
     
}


nav {
    text-align: center;
    background-color:#1d1f21;
    border-bottom: 1px solid #c2c2c2;
}

nav li {
    
    padding: 10px 10px;
    margin: 10px;
    
}
nav ul li { 
    list-style: none;
    display: inline-block;
    position: relative;
}

a {
    color: white;
    font-family: 'slabo27px-regular-webfont.eot?';
    font-size: 20px;
}

/* SUBMENU */

ul.submenu {
  position: absolute;
  z-index: 200;
  display:none;
}

ul.submenu li {
  float: none;
  margin: 0;
  padding-top: 10px;
  border-bottom: 1px solid #121415;
  width: 100%;

}

ul.submenu li:first-child {
  padding-top: 30px;
}

ul.submenu li:last-child {
  border-bottom: none;
}

/* sub display*/

ul.menu li:hover ul {
  display: block;
  background: #1d1f21;
  width: 155px;
  text-align: left;
  margin-left: -10px;
}



#logo { width: 100px;
        height: 100px;
        margin: 1em;
}



footer {
    width: 100%;
    height: 200px;
    background: #a0a0a0;
    position: absolute;
    bottom: 0;
    padding: 10px;
}

#misdatos {
    overflow:hidden;
}
#imagen { 
    text-align: center;
    }

#foto { 
    margin: 1.5em;
    }
#perfil {
    margin-top:1.5em;
}
.materias {
    margin:1.5em;
    overflow: hidden;
}
.nivel {
    float:left;
    margin:1.5em;
}