body {
    width: 100%;
    height: 100%;
    font-family: 'Roboto', sans-serif;
    margin: 0;
    font size: 100%;
}

div#pagina {
    width: 960px;
    height: 960px;
    margin:0 auto;
}

header {
    height: 24%;
    width: 100%;
    position: relative;
}

header div#imagenheader {
    width: 100%;
    height:100%;
}

div#contacto {
    color: #fff;
    position: absolute;
    top: 1.5rem;
    left: 48.5rem;
    font-size: 90%;

}

.menu {
    float:left;
    position: absolute;
    top: 9rem;
    left: 17.5rem;
    padding:0;
    width: 59%;
    list-style: none;
}

.menu li {
    float:left;
    margin-right:1.5rem;
    font-size: 100%;
    font-weight: 400;
    color: #fff;
    
}

.menu li:hover> a { 
    font-weight: 600
}

.menu ul {
    opacity:0;
    margin:0;
    margin-top:0.1rem;
    padding:0;
    padding-top:0.5rem;
    position: absolute;
    top:30px;
    font-size: 70%;
    float:left;
    width: 129px;
    height: 120px;
    background-image:url(imagenes/fondosubmenu.svg);
    list-style: none;
    -moz-transition: opacity .25s ease .1s;
    -webkit-transition: opacity .25s ease .1s;
    -o-transition: opacity .25s ease .1s;
    -ms-transition: opacity .25s ease .1s;
    transition: opacity .25s ease .1s;
}

.menu ul li {
    height: 0;
    width: 80%;
    overflow: hidden;
    padding: 0;
    margin-left:0.5rem;
    margin-top:0.2rem;
    border-bottom: 1px solid #fff;
    -moz-transition: height .25s ease .1s;
    -webkit-transition: height .25s ease .1s;
    -o-transition: height .25s ease .1s;
    -ms-transition: height .25s ease .1s;
    transition: height .25s ease .1s;
    
  }

 .menu li:hover > ul li {
    height: 20px;
    overflow: visible;
  }

.menu li:hover> ul { opacity: 1; }

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


header div#logo {
    width: 18%;
    position:absolute;
    top:2rem;
    left:4.5rem;
}

header div#titulo {
    width: 70%;
    position: absolute;
    top:2rem;
    left:17rem;
}

article {
    position: relative;
    margin-left: 4.5rem;
    margin-top: 1rem;
    width: 83%;
    height: 66%;
}

article div#facebook ul li{
    padding-bottom:13px;
}

article div#examenes {
    font-size: 69%;
    margin-left: 0.8rem;
}

article div#examenes ul{
    width:98%;
    list-style: none;
    border-bottom:1px solid #000;
    margin-top:0;
    padding:2px;
}

article div#columnaizq ul{
    margin:0;
    list-style: none;
    padding-left:0;
    padding-top:8px;
}

article div#columnaizq {
    float:left;
    width: 30%;
    padding:0;
    margin-top: -8px;
    margin-left:1rem;
    position:absolute;
    left: 32.5rem;
}

.negrita {
    font-weight: bold;
}

.color {
    font-weight: bold;
    color: #00BDFF
}

.destacado {
    background-color: #ffec0d;
}

article div#noticias {
    position:relative;
    width: 64.5%;
    float:left;
    margin-top: 1rem;
    padding:0rem;
    border-bottom: 1px solid;
    height: 210px
}

article div#titulonoticia {
    border-bottom: 5px solid;
    font-weight: 600;
    line-height: 1.4rem;
    font-size: 140%;
    width: 185px;
}

article div#titulonoticia p {
    margin-top: 1rem;
    margin-bottom: 0.2rem
}

article div#fecha {
    width: 20%;
    font-size: 78%;
}

article div#slider {
    width: 65%;
    float: left;
}

article div#imagennoticia {
    width: 29%;
    float: left;
    position: absolute;
    top: 2.5rem;
    left: 12.5rem;
}

article div#contenidonoticia {
    font-size: 75%;
    width: 27%;
    float:left;
    text-align: left;
    position: absolute;
    top: 2.5rem;
    left: 22.5rem;
    line-height: 1.1;
}

article div#contenidonoticia p {
    margin:0;
}
    
article div#enlaces ul li{
    font-size: 71%;
    color: #E2007A;
    font-weight:500;
    list-style-image: url(imagenes/flechachica.svg);
    margin-left: 14px;
    padding: 4px;
}

article div#otros {
    float:left;
    width: 65%;
    margin-top: 1rem;
    height: 100px;
    position: relative
}

article div#cuadro1 {
    width: 68%;
    height: 100px;
}

article div#cuadro1 p {
    margin:0;
    width: 60%;
    position:absolute;
    top: 0.8rem;
    left: 0.8rem;
    font-size: 80%;
    font-weight: 500;
    line-height: 1;
}

article div#cuadro1 ul{
    position: absolute;
    top: 3rem;
    color: #E2007A;
    font-weight: 500;
    line-height: 1;
    font-size: 80%;
    list-style-image: url(imagenes/flechachica.svg);
}

article div#cuadro2 {
    float:left;
    width: 28%;
    height: 79%;
    position: absolute;
    top: 0rem;
    left: 23rem;
}
 
article div#cuadro2 p{
    width: 90%;
    position:absolute;
    top: 1.5rem;
    left: 0.4rem;
    margin:0;
    font-weight:500;
    color: #FFF;
    line-height: 1;
}
    





footer {
    width: 100%;
    background-color: #000;
    height: 8%;
    float:left;
    margin-top:1rem
}

footer p {
    width: 60%;
    float:left;
    color: #FFF;
    font-size: 60%;
    text-align: center;
    margin-left: 11rem;
    margin-right: 5rem;
}
    






div#material {
    position:relative;
    width:70%;
    margin:0;
}

div#linometro h1 {
    border-bottom: 5px solid;
    width: 180px;
    font-size: 130%
}

div#linometro ul {
    list-style: none;
    padding-left:1rem;
    width: 130px;
    font-size: 80%;
    list-style-image: url(imagenes/flechachica.svg);
}

div#linometro img {
    position: absolute;
    top:3rem;
    margin-left: 12rem;
}

div#linometro p {
    width:43%;
    float:left;
    margin:0;
    margin-left: 20rem;
    margin-right:4rem;
    font-size: 70%;
    position:absolute;
    top: 3rem;
    padding:0;
    float:left;
}

div#atencion p {
    margin-top: 13rem;
}

div#atencion h2{
    margin-top:-1rem;
    margin-left:20rem;
    font-size: 120%;
    color: #00afeb;
    font-weight: 600;
    
}

div#linometro {
    border-bottom: 1px solid;
    height: 290px
}
    
div#cuentahilos h1{
    border-bottom: 5px solid;
    width: 180px;
    font-size: 130%;
    margin-top: 1rem;
    float:left;
}

div#cuentahilos img {
    margin-left: 0.5rem;
}

div#cuentahilos p {
    width: 43%;
    float:left;
    margin:0;
    margin-left: 20rem;
    margin-right:4rem;
    font-size: 70%;
    position:absolute;
    top: 23rem;
    padding:0;
}

div#cuentahilos {
    margin-top: 1rem;
    border-bottom: 1px solid;
    padding-bottom: 1rem
}

div#infoplus img{
    margin-top:1rem;
    margin-right:0.5rem;
}

div#infoplus {
    width: 71%
}

div#columnaizq2 {
    float:left;
    position:absolute;
    top: 0rem;
    left: 36.5rem;
    margin-left:1rem;
    padding:0;
}


div#columnaizq2 ul{
    float:left;
    list-style: none;
    text-decoration: none;
    padding:0;
    margin:-1rem;
}

div#columnaizq2 ul li {
    padding-top: 1rem
}

div#columnaizq2 ul li ul {
    margin: 1rem;
    padding:0;
    font-size: 71%;
    color: #E2007A;
    font-weight:500;
    list-style-image: url(imagenes/flechachica.svg);
}







.descarga {
    color: #E2007A;
    font-weight: 600
}

div#trabajospracticos1 {
    float:left;
    margin-left:0;
    margin-top:0;
    padding-top:0;
    width: 70%%
}

div#texto1 h1 {
    float:left;
    border-bottom: 5px solid;
    width: 28%;
    font-size: 130%;
    margin:0
}

article div#texto1 ul {
    float:left;
    list-style-image: url(imagenes/flechachica.svg);
    font-size: 80%;
    padding-left: 2rem;
    margin-left: -11rem;
    margin-top: 4rem;
    font-weight: 600
}

div#texto1 p {
    float:left;
    margin-left:1.5rem;
    margin-top: 0;
    font-size: 75%;
    width: 40%;
    height: 90%
}

div#entrega {
    list-style-image: url(imagenes/flechachica.svg);
    font-size: 80%;
    font-weight: 600;
    margin-right:0rem;
    float:right;
}

div#entrega ul{;
    margin:0;
    padding-left:0;
    padding-bottom:7.5rem
}

div#texto2 h1 {
    float:left;
    border-bottom: 5px solid;
    width: 28%;
    font-size: 130%;
    margin-top: 1rem; 
}

article div#texto2 ul {
    float:left;
    list-style-image: url(imagenes/flechachica.svg);
    font-size: 80%;
    padding-left: 2rem;
    margin-left: -11rem;
    margin-top: 3.5rem;
    font-weight: 600
}

div#texto2 p {
    float:left;
    margin-left: 1.5rem;
    font-size: 75%;
    width: 40%;
    height: 90%
}

div#texto3 h1 {
    float:left;
    border-bottom: 5px solid;
    width: 28%;
    font-size: 130%;
    margin-top: 1rem;
}

article div#texto3 ul {
    float:left;
    list-style-image: url(imagenes/flechachica.svg);
    font-size: 80%;
    padding-left: 2rem;
    margin-left: -11rem;
    margin-top: 3.5rem;
    font-weight: 600
}

div#texto3 p {
    float:left;
    margin-left: 1.5rem;
    font-size: 75%;
    width: 40%;
    height: 90%
}

div#originales {
    margin-top: 1rem;
  height: 21%;
  border-bottom: 1px solid;
}

div#tramados {
  height: 23%;
  border-bottom: 1px solid;
}

div#gestion {
  height: 25%;
  border-bottom: 1px solid;
}

a {
  text-decoration: none;
    color:inherit;
}

div#galeria {
    float:left;
    padding-bottom: 1rem;
    height: 105%;
}

div#nivelI {
    width: 100%;
    height: 48%;
    border-bottom: 1px solid;
}


div#nivelI h1{
    float:left;
    border-bottom: 5px solid;
    width: 25%;
    margin-top:1rem;
    padding:0;
}

div#nivelI img{
    float:left;
    margin:1rem;
}


div#nivelII {
    width: 100%;
    height: 48%;
    border-bottom: 1px solid;
}


div#nivelII h1{
    float:left;
    border-bottom: 5px solid;
    width: 25%;
    margin-top:1rem;
    padding:0;
}

div#nivelII img{
    float:left;
    margin:1rem;
}



div#plantel {
    float:left;
}