* {
    box-sizing: border-box;
}

body {
    background-color: rgb(249, 248, 248);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    justify-content: space-between;
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    
}

body h1, h3, h4 {
    color: rgba(165, 42, 42, 1);
}

header, footer {
    background-color: rgb(248, 51, 60, 1);
}

header > div.contenedor {
    display: flex;
    flex-direction: row;
    min-height: 10vh;
    justify-content: space-between;
    max-width: 50rem;
    margin: 0 auto;
}

.contenedor {
    max-width: 50rem;
    margin: 0 auto;
    padding: 1rem;
    
}

header nav {
    background-color: rgba(0,0,0);
    color: white;
    position: fixed;
    right: -100vw;
    top: 0;
    height: 100vh;
    min-width: 50vw;
    transition: all .3s ease;
    z-index: 9998;
}

#llamamenu {
    background-color: rgba(255, 255, 255, 0.25);
    border: none;
    outline: none;
    color: white;
    cursor: pointer;
    height: 2.5em;
    width: 2.5em;
    top:0;
    position: relative;
    z-index: 9999;
    display: flex;
    justify-content: center;
}

#llamamenu:hover {
    color: brown;
}


header nav.menuvisible {
    right: -50vw;
    transition: all .6s ease;
}


.avatarheader {
    max-width: 50%;
    height: auto;
}

nav {
    width: 100%;
}

nav ul {
    list-style: none;
    width: 50%;
    padding: 3em;
    
}

header nav a {
    color: rgba(255,255,255,.75);
    padding: .5em 1em;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}

nav ul li {
    flex-basis: auto;
}

nav ul li a:hover {
    background-color: #9d2222;
}

nav ul li a {
    background-color: rgba(165, 42, 42, 0.54);
    color: white;
    font-weight: bold;
    text-decoration: none;
    display: block;
    text-align: center;
    padding: .125em .5em;
    border-radius: 4px;
}

section {
    padding: 1rem;
    max-width: 50rem;
    margin: 0 auto;
}

section > h2 {
    border-bottom: solid .1em rgb(248, 51, 60, 1);
    padding-bottom: .30em;
    color: rgba(165, 42, 42, 1);
}
 
#comitente h1, h3, h4 {
    color: rgba(165, 42, 42, 1);
}

#comitente ul {
    list-style: none;
    padding:  0;
        
}

#equipo ul {
    list-style: none;
    padding:  0;
}
    
    
#equipo ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: center;  
    flex-wrap: wrap;
}

#equipo ul li {
    margin: 1em;
}

#equipo ul li img {
    border: solid .3em #434141;
    box-shadow: 0.25em 0.25em 0.25em silver;
    margin-bottom: 8%;
}

#equipo ul li a:hover img {
    border: solid .3em rgb(248, 51, 60, 1);   
}

#equipo ul li a:hover {
    color: rgb(248, 51, 60, 1);
    text-decoration: none;
}

#equipo ul li a {
    color: black;
    font-weight: bold;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

#pertenencia > ul {
    list-style: none;
    padding: 0;
    
}

#pertenencia > ul > li {
    background-color: rgba(0,0,0,0.02);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
    margin-top: 1em;
    padding: 1em;
}

aside {
    background-color: rgba(0,0,0,0.02);
    padding-bottom: 3em;
    width: 100%;
    
}

aside > h4 {
    max-width: 50rem;
    margin: 0 auto; 
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 1em;
    color: rgba(165, 42, 42, 1);
    
}

aside ul {
    list-style: none;
    padding: 0;
    margin-bottom: 0;
    display: flex;
    justify-content: center;
   
}


aside ul li {
    flex-basis: 5em;
    
}


aside ul li a:hover img {
    background-color: #9d2222;
}

.usuario ul{
    list-style: none;
    padding: 0em;
    
    
}





/* mediaqueries */
@media (min-width:15em){
    
    header {
        display: block;        
    }     
    
    header ul{
        display: block;
        
    }
    
    header ul li{
        margin-bottom: .5em;
    }
    
    header div img {
        width: 50%;
    }
}
        

@media (min-width:56em){
    header{
        display: flex;
    }
    header ul{
        display: flex;
    }
    header ul li{
        margin-bottom: 0;
    }
     
     header div img {
        width: 50%;
    }   
    
    #llamamenu {
        display: none;
    }
    header nav {
        background-color: rgb(248, 51, 60, 1);;
        position: relative;
        right: auto;
        top: auto;
        height: auto;
        min-width: auto;
    }
    
    nav ul {
        width: 100%;
        justify-content: space-between;
    }
    
    header div img {
        width: 100%;
    }
}


/* PLAN */

.propuesta1a{
    width: 50%;   
}

.propuesta1b{
    width: 50%;
    margin-top: 1em;
}


.propuesta2{
    width:100%;
    margin-top:2em;
}
.propuesta3{
    width: 100%;
}

.usuario{
text-align-last: center;
border: solid .3em #811b1b;
list-style: none;
margin-left:auto;
margin-right: auto;
max-width: 10rem; 
padding-top: .5em;
padding-bottom:.5em;

    
}

.usuario ul{
margin: 0;

}
.usuario:hover{
  background-color: #9d2222;
 
}



.usuario ul li a:hover{
    color:#f8c4c4;
}

.usuario a{
    color: black;
    text-decoration: none;
    margin-bottom: .2em;
    
}




/* mapa */
.mapa{
    width:100%;
    
}

.mapatitulo{
    margin: 1em;
}


/*Pantallas*/



.pantalla1 , .pantalla2 , .pantalla3 , .pantalla3a , .pantalla4 , .pantalla5 , .pantalla6 , .pantalla7 , .pantalla8 , .pantalla9 , .pantalla10 , .pantalla10a , .pantalla11 , .pantalla12, .pantalla13 {
    max-width: 50%;
    height: auto;
    display:flex;
    margin:auto;
    flex-wrap: wrap;
    
}

.pantallas ul li {
    text-align: center; 
}
.pantallas ul li {

border: solid .3em #811b1b;
list-style: none;
margin-left:auto;
margin-right: auto;
max-width: 10rem; 
padding-top: .8em;
padding-bottom: .8em;
text-align-last: center;

}
    
.pantallas li:hover{
  background-color: #9d2222;
}



.pantallas ul li a:hover{
    color:#f8c4c4;
}

.pantallas a{
    color: black;
    text-decoration: none;
    margin-bottom: .2em;
}