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

body {
    background-color: #1c6681;
    text-decoration: none;
    list-style: none;
    color: #eba76c;
    font-family: 'Roboto', sans-serif;
    font-size: 1em;
    font-weight: 400;
    max-width: 100vw;
    
    min-height: 100vh;
    display: flex;
    flex-direction: column;    
}


a:hover {
    color: #f8f8f8;
}

a {
    text-decoration: none;
    color: #eba76c;
}


/* HEADER */



header {
    height: 4em;
    background: #3f3f3f;
    font-weight: 400;
    text-transform: capitalize;
    font-size: 0.8rem;
    font-family: 'Roboto Mono', monospace;
    font-weight: 400;
    display: flex;
    justify-content: center;
}

#cajaheader {width: 90vw; display: flex; justify-content: space-between; align-items: center;}


#vm35 {
   color: #1c6681;   
   font-weight:700;
   justify-content: flex-start;
        font-size: 1rem;
}

/* MENU */ 
#menuheader {width: 5rem; display: flex; justify-content: space-between; align-items: center;}
#info {height: 1.8em; cursor: pointer;}
#menu {height: 1.6em; cursor: pointer;} 
#vm35:hover {color: #f8f8f8;}
#menudesplegable {
    position: fixed; display: flex; height: 90vh; width: 100vw; margin-top: 3.5rem;}

#menudesplegable nav {position: absolute; right: 5vh; width: 14em; height: 22em; padding: 2em; display: flex; flex-direction: column; background-color: #3f3f3f; font-size: 0.9em;
}
#menudesplegable nav a {margin: 0.6em 0;}
#menudesplegable {display:none;}
#desplegado {display: none;}
#menudesplegable a {color: #f8f8f8;} 

/* INFO */


#desplegado {
    background-color: #1c6681;
    position: fixed;
    width: 100vw;
    padding: 2vh 5vw;
    display: flex;
    justify-content: center;
    z-index: 5000;
    margin-top:3.5rem;
}

#infodesplegado {
    background: #1c6681;
    font-size: 0.8em;
    border-style: solid;
    border-width: 1px;
    border-color: #eba76c;
    padding: 2rem 2rem 3rem 2rem;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
}



#comitente p {
    font-size: 0.9em;
    line-height: 1.1em;
    margin-top: 0.8em;
	margin-bottom: 1rem;
}

#comitente span {
    font-size: 1.1em;
    font-weight: 700;
    font-family: 'Roboto Slab', serif;
    letter-spacing: 1.5px;
}

#infodgpc {
    border-style: solid;
    border-width: 1px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
	margin: 1rem 0;
}

#autoria,
#dgpc {
    font-size: 0.8em;
    font-weight: 300;
    line-height: 1.2em;
    flex-wrap: wrap;
    margin-top: 1rem;
}

#dgpc a {
    font-weight: 400;
}

.j {
    margin-bottom: 1em;
}


#logos {
    height: 2em;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}


#logos img {
   height: 2em; width: auto;
}
#desplegado {display:none;}

/* MAIN */


main {width: 100%;
    height: 27rem;
    display: flex;
    flex-direction: row;
    padding-right: 5vh;
    justify-content: space-between;
margin-top: 3em;
    flex-direction: row;

}

#contenido {
    display: flex;
    flex-direction: column;
    margin-left: 1.5em;   
    justify-content: flex-end;
    font-size: 0.7rem;
    width: 50%;

}


#nombre {
    font-family: 'Roboto', sans-serif;
    color: #eba76c;
    font-size: 2.7em;
    font-weight: 900;
    letter-spacing: 0.05em;
    line-height: 1.2em;
    display: flex;
    align-self: flex-start;
}

#dg {
    font-family: 'Roboto Slab', serif;
    font-weight: 400;
    letter-spacing: 1.5px;
    font-size: 1em;
    color: #f8f8f8;
     display: flex;
    width: 100%;
    margin-bottom: 1.5em;
    margin-top: 2em;
    line-height: 1.6em;
    
}


#listamaterias {
  color: #eba76c;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    line-height: 1.6em;
    border-left-style: solid;
    border-left-width: 1px;
    display: flex;
    flex-direction: column;
    padding-left: 1.2em;
    align-self: flex-start;
}

#listamaterias span {
    color: #f8f8f8;
    font-family: 'Roboto Slab', serif;
    font-weight: 400;
    font-size: 1.1em;
    display: flex;
}

#listamaterias ul {list-style: none;
    text-decoration: none; margin-top: 0.5rem; display: flex; flex-direction: column;}


/* FOTO */
#foto {
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-content: flex-end;
    flex-grow: 1;
    width: 50%;

}

#foto img {
    max-height: 100%;
    width: auto;
}


@media (min-width: 800px) {#cajaheader, main {width: 50rem; padding: 0; align-self: center;}
    main {margin-top: 10vh; height: 35rem;}
    #contenido {margin-left: 3em; font-size: 0.85em;justify-content: flex-start;}
    header {font-size: 0.85em; height: 4em;}
    #foto {height: 80%; width: 40%;}
    #listamaterias {flex-direction: row; justify-content: space-between}
#listamaterias div {margin-right: 3em}
    #nombre {font-size: 4.5rem; margin-bottom: 1rem; line-height: 1em;}    
    #menudesplegable {width: 50rem;}
    #menudesplegable nav {right: 0;}
    #autoria, #infodgpc, #comitente {line-height: 1.3em; width: 24rem;}
    #infodesplegado {font-size: 0.85em; padding: 4rem; flex-wrap: wrap;}
}