@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Bad+Script|Lora:400,400italic,700,700italic);

* {
    box-sizing: border-box;
    font-family: "Lora"; serif;
}

#pagina {
    max-width: 60em;
    margin: auto;
}

header div ul {
    margin: 3em 0; padding: 0;
}

header div ul li {
    list-style: none;
    display: inline;
    margin: 0; padding: 1em;
    
}

#seleccion a {
    color: black;
    border: solid 0.15em lightcoral;
    margin: 0; padding: 1em;
}

header div ul li a {
    text-decoration: none;
    color: black;
    font-family: "Lora";
    font-weight: 700;
    width: 8em;
    }

header div ul li a:hover {
    color: aquamarine;
    border: solid 0.15em aquamarine;
    margin: 0; padding: 1em;
    font-weight: 700;
    text-align: center;
}

main {
    width: 60em;
}

figure img {
    overflow: auto;
    max-width: 100%;
    height: auto;
}

figure {
    width: 25em;
    float: left;
}

div propuestas {
    overflow: auto;
    max-width: 100%;
    height: auto;
    margin: 0; padding: 0;
}
    
img {
    width: 100%;
    height: auto;
}

#datos {
    width: 25em;
    float: left;
    text-align: left;
    height: 25em;
}

#datos h2 {
    color: black;
    font-weight: 700;
}

#datos h3 {
    color: lightcoral;
}

#datos h4 {
    color: black;
    font-style: italic;
}

#redes {
    height: 25em;
    padding-top: 15em;
}

#face {
    list-style: none;
    float: left;
}

#face:hover {
    list-style: none;
    float: left;
    border-left: solid 0.2em aquamarine;
    padding-left: 0.6em;
}

#insta {
    list-style: none;
    float: left;
}

#insta:hover {
    list-style: none;
    float: left;
    border-left: solid 0.2em aquamarine;
    padding-left: 0.6em;
}

#behance {
    list-style: none;
    float: left;
}

#behance:hover {
    list-style: none;
    float: left;
    border-left: solid 0.2em aquamarine;
    padding-left: 0.6em;
}

aside {
    margin: 3em 0; padding: 0;
    display: inline;
    float: left;
}

#materias {
    width: 17em;
    color: black;
    border: solid 0.1em aquamarine;
    padding: 1em;
    margin: 0.5em;
    float: left;
    height: 52em;
}

#materias h4 {
    text-align: center;
    color: lightcoral;
    font-size: 0.95em;
}

#rotulo {
    width: 20em;
    color: black;
    border: solid 0.1em aquamarine;
    padding: 1em;
    margin: 0.5em;
    float: left;
    height: 52em;
}

#rotulo h3 {
    text-align: center;
    color: lightcoral;
    font-size: 0.95em;
}

#tp {
    width: 20em;
    color: black;
    border: solid 0.1em aquamarine;
    padding: 1em;
    margin: 0.5em;
    float: left;
    height: 52em;
    line-height: 2em;
}

#tp h3 {
    text-align: center;
    color: lightcoral;
    font-size: 0.95em;
}

#tp ul li {
    width: 20em;
    list-style: none;
    margin: 2em -1.8em;
}

#tp ul li a {
    text-decoration: none;
    color: aquamarine;
    font-weight: 700;
    text-align: center;
}

#tp ul li a:hover {
    text-decoration: none;
    color: lightcoral;
    font-weight: 700;
    text-align: center;
    border-bottom: solid 0.2em lightcoral;
    padding-bottom: 0.6em;
}


#FADU img {
    width: 8%;
    height: 5%;
    float: left;
    margin: 0 2em 0 0; 
}

#PARESTV img {
    width: 7%;
    float: left;
    margin: 0 2em 0 0; 
}

#DGPC img {
    width: 15%;
    float: left;
    margin: 0 2em 0 0; 
}

footer {
    float: left;
    font-size: 0.8em;
    padding: 1em;
    color: lightcoral;
}

#linea {
    border: solid 0.1em;
    color: lightcoral;
    width: 100%;
    margin-bottom: 4em;
}



@media screen and (max-width: 48em) {
    
header div ul li a {
    text-decoration: none;
    color: black;
    font-family: "Lora";
    font-weight: 700;
    width: 6em;
    font-size: 0.9em;
}
    
    
main {
    width: 48em;
}

figure {
    width: 18em;
    float: left;
    overflow: auto;
}

#datos {
    width: 23em;
    float: left;
    text-align: left;
    height: 16em;
}

    
#face {
    margin-left: 2em;
    list-style: none;
    float: left;
}

#face img {
    width: 2em;
}

#insta {
    margin-left: 2em;
    list-style: none;
    float: left;
}

#insta img {
    width: 2em;
}

#behance {
    margin-left: 2em;
    list-style: none;
    float: left;
}

#behance img {
    width: 2em;
}    
    
aside {
    margin: 2em 0; padding: 0;
    display: inline;
    float: left;
}

#materias {
    width: 23em;
    color: black;
    border: solid 0.1em aquamarine;
    padding: 1em;
    margin: 0.5em;
    float: left;
    height: 52em;
    font-size: 0.9em;
}

#tp {
    width: 23em;
    color: black;
    border: solid 0.1em aquamarine;
    padding: 1em;
    margin: 0.5em;
    float: left;
    height: 52em;
    line-height: 2.5em;
    font-size: 0.9em;
}

#tp h3 {
    text-align: center;
    color: lightcoral;
    font-size: 0.95em;
}

#tp ul li {
    width: 22em;
    list-style: none;
    margin: 2em -1.8em;
}

#tp ul li a {
    text-decoration: none;
    color: aquamarine;
    font-weight: 700;
    text-align: center;
}

#tp ul li a:hover {
    text-decoration: none;
    color: lightcoral;
    font-weight: 700;
    text-align: center;
    border-bottom: solid 0.2em lightcoral;
    padding-bottom: 0.6em;
}

    
#rotulo {
    width: 46em;
    color: black;
    padding: 1em;
    margin: 0.5em;
    float: left;
    height: 22em;
    font-size: 0.92em;
}

#rotulo0 {
    width: 14em;
    color: black;
    border-right: solid 0.1em aquamarine;
    padding-right: 1.5em;
    margin: 0;
    float: left;
}

#rotulo1 {
    float: left;
    width: 15em;
    color: black;
    border-right: solid 0.1em aquamarine;
    padding-right: 1.5em;
    padding-left: 1.5em;
    
}

#rotulo2 {
    float: left;
    width: 14em;
    color: black;
    padding-left: 1.5em;
}
    
#FADU img {
    width: 9%;
    height: 7%;
    float: left;
    margin: 0 2em 0 0; 
}

#PARESTV img {
    width: 8%;
    float: left;
    margin: 0 2em 0 0; 
}

#DGPC img {
    width: 16%;
    float: left;
    margin: 0 2em 0 0; 
}

footer {
    float: left;
    font-size: 0.7em;
    padding: 1em;
    color: lightcoral;
}   
    
}

@media screen and (max-width: 30em) {

header div ul li a {
    text-decoration: none;
    color: black;
    font-family: "Lora";
    font-weight: 700;
    width: 6em;
    font-size: 0.8em;
    margin: 1em; padding: 0;
    display: block
}

    
main {
    width: 30em;
}

figure {
    width: 25em;
    float: left;
    overflow: auto;
}

#datos {
    margin-left: 2em;
    width: 25em;
    float: left;
    text-align: left;
    height: 16em;
    font-size: 0.8em;
}

    
#face {
    list-style: none;
    float: left;
    padding-left: 1em;
}

#face img {
    width: 2em;
}

#insta {
    list-style: none;
    float: left;
    padding-left: 1em;
}

#insta img {
    width: 2em;
}

#behance {
    list-style: none;
    float: left;
    padding-left: 1em;   
}

#behance img {
    width: 2em;
}    
    
aside {
    margin: 2em 0; padding: 0;
    display: inline;
    float: left;
}

#materias {
    width: 29em;
    color: black;
    border: solid 0.1em aquamarine;
    padding: 1em;
    margin: 0.5em;
    float: left;
    height: 54em;
    font-size: 0.9em;
}

#tp {
    width: 29em;
    color: black;
    border: solid 0.1em aquamarine;
    padding: 1em;
    margin: 0.5em;
    float: left;
    height: 45em;
    line-height: 2.5em;
    font-size: 0.9em;
}

#tp h3 {
    text-align: center;
    color: lightcoral;
    font-size: 0.95em;
}

#tp ul li {
    width: 22em;
    list-style: none;
    margin: 1em -1.8em;
}

#tp ul li a {
    text-decoration: none;
    color: aquamarine;
    font-weight: 700;
    text-align: center;
}

#tp ul li a:hover {
    text-decoration: none;
    color: lightcoral;
    font-weight: 700;
    text-align: center;
    border-bottom: solid 0.2em lightcoral;
    padding-bottom: 0.6em;
}

    
#rotulo {
    width: 29em;
    color: black;
    padding: 1em;
    margin: 0.5em;
    float: left;
    height: 47em;
    font-size: 0.9em;
}

#rotulo0 {
    width: 29em;
    color: black;
    border-right: none;
    padding-right: none;
    float: none;
}

#rotulo1 {
    float: none;
    width: 29em;
    color: black;
    border-right: none;
    padding-right: none;
    padding-left: none;
    
}

#rotulo2 {
    float: none;
    width: 29em;
    color: black;
    padding-left: none;
}
    
#FADU img {
    width: 8em;
    float: left;
    margin: 0 2em 0 0; 
}

#PARESTV img {
    width: 6em;
    float: left;
    margin: 0 2em 0 0; 
}

#DGPC img {
    width: 15em;
    float: left;
    margin: 0 2em 0 0; 
}

footer {
    float: right;
    font-size: 0.7em;
    padding: 1em;
    color: lightcoral;
} 
    
}