
@font-face /*Open Sans Cond Bold*/ {font-family: 'open_sans_condensedbold';
    src: url(fuentes/OpenSans-CondBold-webfont.woff) format('woff');
    src: url(fuentes/OpenSans-CondBold-webfont.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;

}

@font-face /*Open Sans Cond Light*/ {font-family: 'open_sanscondensed_light';
    src: url(fuentes/OpenSans-CondLight-webfont.woff) format('woff');
    src: url(fuentes/OpenSans-CondLight-webfont.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;

}



*{margin: 0; padding: 0; color: #fff; font-family:'open_sanscondensed_light'; text-decoration: none; list-style-type: none;}
html{font-size: 100%;}
body{font-size: 16px; background-color: #ffc98a;}
.pagina{max-width: 960px; margin: 0.5% auto 0 auto;}

/*PROPUESTA*/
.mup{margin-top: 0.5%; margin-bottom: 2%;max-width: 100%}

/*Header*/
header{width: 100%; height: 100px; position: relative; float: left; background-image: url(imagenes/header.jpg); text-align: center; box-sizing: border-box; padding: 2%;}
h1{font-size: 3rem; font-family: 'open_sans_condensedbold';}

/*NAV*/
nav{width: 100%; min-height: 20px; position: relative; float: left; background-color: rgb(92, 14, 14); margin-top: 1%; box-sizing: border-box; padding: 2% 1%;}


.izq{width: 100%; position: relative; float: left; text-align: center; box-sizing: border-box;}
.izq ul li{display: inline; padding: 1%; box-sizing: border-box; margin-right: 1%; margin-left: 1%;}
.yo{color: bisque; font-weight: bold; letter-spacing: 0.05rem;}
/*</NAV>*/



/*<MAIN>*/
main{width: 100%; min-height: 100px; position: relative; float: left; margin: 1% 0%; background-color: rgb(126, 7, 7); padding: 2% 0 2.5% 0;}

section{max-width: 100%; position: relative; float: left; min-height: 50px;}
.left{width: 30%; position: relative; float: left; min-height: 200px;}
.left img{max-width: 100%;}
.left a{text-decoration: none; background-color: rgba(0, 0, 0, 0.54); width: 100%; position: relative; float: left; box-sizing: border-box; text-align: center; font-family: 'open_sans_condensedbold'; margin-top: 1%; padding: 2% 0;}

.right{width: 68%; position: relative; float: right; min-height: 200px;}
h2{font-family: 'open_sans_condensedbold'; font-size: 1.95rem; color: #fff; text-align: left; background-color: #ffba68; padding-left: 1%;letter-spacing: 0.15rem;}
h3{font-family: 'open_sans_condensedbold'; line-height: 2rem; margin-top: 3.5%; letter-spacing: 0.15rem; text-decoration: underline; font-size: 1.35rem; padding-left: 1%;}
h4{padding-top: 2%; line-height: 1.5rem; font-family: 'open_sans_condensedbold'; font-size: 1.15rem; padding-left: 1%;}
.materias{line-height: 1.5rem; padding: 1.25% 1%; text-align: justify;}

aside{width: 100%; position: relative; float: left; min-height: 50px; margin-top: 3%;}
.right div{box-sizing: border-box; padding-right: 3%;}
.datos{margin: 3% 0 6% 6%; width: 90%;}
.datos p{line-height: 2.5rem;}
span{font-style: italic; font-weight: bold; letter-spacing: 0.1rem;}


/*</MAIN>*/


.separador{clear: both;}

/*Footer*/
footer{width: 100%; position: relative; float: left; box-sizing: border-box; padding: 1% 1% 2% 1%; background-color: rgba(152, 8, 8, 0.87); min-height: 35px;}
footer p{font-size: 0.95rem; line-height: 1.25rem; text-align: center; font-style: italic; padding: 0 5%;}

footer div{position: relative; float: left; width: 100%; margin-bottom: 1%;}
.pie{width: 100%; min-height: 20px; position: relative; float: left; margin: 1.5% 0 2% 0; box-sizing: border-box; padding: 0; background-color: rgba(152, 8, 8, 0); text-align: center;}
.pie ul li {display: inline;}
.pie ul li a {padding: 0% 1.35%; border-right-color: white; border-right-style: solid; border-right-width: thin; font-size: 1.1rem; border-left-color: white; border-left-style: solid; border-left-width: thin;}




/*ACCIONES*/
.izq ul li:hover{background-color: #ffc98a; font-weight: bold; color: #fff; }
.yo:hover{color: #fff;}
main div a:hover{background-color: #ffc98a; color: rgb(74, 11, 11);}


/*Responsive*/
@media screen and (max-width:940px){
    *{transition: 0.1s;}
    .izq ul li{margin: 0 2%; position: relative; float: left;}
}

@media screen and (max-width:860px){
    .materias{padding-right: 5%;}
    .right div{padding: 0%;}
    .pie ul li a{font-size: 1rem;}   
}

@media screen and (max-width:780px){
    .pie ul li a{padding: 0 2.5%; position: relative; float: left; margin: 0 0.5% 2% 0;}
    .pie{padding-left: 2%; margin-bottom: 0%;}
    footer p{text-align: left; padding: 0 2%;}
    .materias{text-align: left;}
}

@media screen and (max-width: 725px){
    .izq ul li{margin: 0 1.25%;}
    .pie{padding-left: 0;}
    .pie ul li a{font-size: 0.9rem; border-left: none;}
    footer p{font-size: 0.9rem;}
}

@media screen and (max-width:620px){
    .right div p{font-size: 0.95rem;}
    .datos p{line-height: 1.5rem; margin: 3% 0 10% 0;}
}


@media screen and (max-width:550px){
    h1{font-size: 2.5rem; margin-top: 2%;}
    section{padding: 0 2%;}
    .left{width: 100%; margin-top: 2%; min-height: 50px;}
    .left a{width: 295px;}
    .right{width: 100%; margin-top: 4%;}
    aside{padding: 0 2%; box-sizing: border-box; margin-bottom: 4%;}
    .datos{margin: 5% 9% 0 0; width: 40%; position: relative; float: left;}
    .right div p{font-size: 1rem; padding: 1.25% 0;}
    .izq ul li{margin: 0 4%;}
}

@media screen and (max-width:410px){
    h1{font-size: 1.9rem; margin-top: 5%;}

}


@media screen and (max-width:350px){
     .izq ul li{margin: 0 3%;}

}