header{
    background-color: #242424;
    height: 120px;
    width: auto;
    margin-left: auto;
    margin-right: auto;
}

.container{
    height: auto;
    display: grid;
    grid-template-areas:"uno uno dos siete"
                         "tres cuatro cinco siete" ;
    gap: 1rem;
 }
    .s1{
        grid-area: uno;
        background-color:#1c1c1c;
        font-family: 'Courier New', Courier, monospace;
        font-size: 45px;
        text-align: justify;
        color: #100f16;
        padding: 1rem;
    
    }
    .s2{
        grid-area: dos;
        background-color: #353535;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .s3{
        grid-area: tres;
        background-color: #1c1c1c;
        padding: 1rem;
    }
    .s4{
        grid-area: cuatro;
        background-color: #282828;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .s5{
        grid-area: cinco;
        background-color: #353535;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem;
        
    }
    .s6{
        grid-area: seis;
        background-color: #4845d2;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .s7{
        grid-area: siete;
        background-color: #B09DF2;
        
    }
    
.container2{
    height: auto;
    display: grid;
    grid-template-areas:"ocho nueve" ;
    gap: 1rem;


}
.s8{
    grid-area: ocho;
    background-color: #4845d2;
    padding: 1rem;
    
}
.s9{
    grid-area: nueve;
    background-color: #3c245c;
    padding: 1rem;
    
}
.s10{
    grid-area: diez;
    background-color: #3c245c;
    padding: 1rem;
    display: none;
}
.container3{
    height: auto;
    display: grid;
    grid-template-areas:"once";
    gap: 1rem;
}
.s11{
    grid-area: "once";
    background-color: #282828;
    padding: 2rem;
    
    
    
}
#formulario{
    display: block;
    margin-left: 40%;
    color: #e8e8e8;
    font-family: 'Courier New', Courier, monospace;
    font-size: 25px;
    

}
#titulo_formulario{
    color: #e8e8e8;
    font-family: 'Courier New', Courier, monospace;
    font-size: 50px; 
}
#logo{
    float: left;
    height: 5rem;
    margin: 1.5rem;
}
#botonera_principal{
    float: right;
    width: 400px;
    height: 40px;
    margin-top: 20px;
    margin-right: 20px; 
}

#botonera_principal ul{
    padding: 0;
    list-style-type: none;
    float: right;
}

#botonera_principal ul li{
    display: inline;
}

#botonera_principal ul li a {
    display: inline-block;
    color:#e8e8e8;
    background-color: #1c1c1c;
    font-weight: bold;
    text-decoration: none;
    padding: 10px;
    
}
#botonera_principal ul li a:hover {
    color:#1c1c1c;
    background-color:#e8e8e8; 
}
#contenido_principal{
    width: 960px;
    height: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    }
#mapa_nosotros{
    display: flex;
    align-items: center;
    justify-content: center;
}
#mapa_pequeño{
    display: flex;
    align-items: center;
    justify-content: center;
}
    

    
    #presentacion{
    width: 600px;
    height: 300px;
    background-color: #5d42bd;
    float: left;
    margin-bottom: 10px;
    padding: 10px;
    box-sizing: border-box;
    
    }
    
    #titulo_articulo{
        font-family: 'Courier New', Courier, monospace;
        font-size: 60px;
        color: #e8e8e8;
    }
    #titulo_nosotros{
        font-family: 'Courier New', Courier, monospace;
        font-size: 25px;
        color: #e8e8e8;
    }
    
    #titulo_mapa{
        font-family: 'Courier New', Courier, monospace;
        font-size: 25px;
        color: #e8e8e8;
    }
    #titulo_mapa2{
        font-family: 'Courier New', Courier, monospace;
        font-size: 25px;
        color: #e8e8e8;
    }
    
    
    #contenido_articulo{
        font-family: 'Courier New', Courier, monospace;
        font-size: 45px;
        text-align: justify;
        color: #e8e8e8;
    }
    
    #texto_contenido{
    
    background-color: #e8e8e8;
    float: left;
    padding: 10px;
    text-align: justify;
    }
    
    #contenido_segundo{
        font-family: 'Courier New', Courier, monospace;
        font-size: 24px;
        color:#e8e8e8;
        text-align: center;
    }
    #contenido_tercero{
        font-family: 'Courier New', Courier, monospace;
        font-size: 25px;
        color:#2b2347;
        text-align: justify;
    }
    #imagen2{
    width: 440px;
    height: 300px;
    background-color: #4845d2;
    float: left;
    margin-bottom: 10px;
    background-image: url("https://picsum.photos/1300/893");
    background-size: cover;
    }
    
    #destacado{
    background-color: #3c245c;
    float: right;
    margin-bottom: 10px;
        padding: 10px;
        box-sizing: border-box;
        text-align: center;
        
    }

    
    
    #contenido_destacado{
        margin-top: 60px;
        font-family: 'Courier New', Courier, monospace;
        font-size: 50px;
        color:#e8e8e8 ;
        text-align: center;
        
    }
    
    #complementario{
    width: 960px;
    height: 180px;
    background-color: #4845d2;
    clear: both; 
    }
    
    #imagen_aside{
        height: 180px;
        width: 960px;
    }

body{
    font-family: Verdana, Tahoma , Arial;
    background: -webkit-radial-gradient(top, #595959 , #242424);
}
p{
	font-size: 20px;
}
h1{
    text-align: center;
    font-size: 20px;
}
footer{
    height:20rem;
    width: auto;
    background-color: #242424;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    color: #e0dbf4;
}
#datos{
    width: 300px;
    height: 180px;
    float: left;
	padding: 20px;
	box-sizing: border-box;
}
#redes{
    width: 150px;
    height: 35px;
    float: right;
    margin-top: 30px;
    margin-right: 30px;
}
@media screen and (min-width:640px ) and (max-width:1023px){
    header{
        height: 200px;
        width: 580px;
       
    }
    #botonera_principal{
        width: 300px;
        height: 40px;
        float: none;
        margin-right: auto;
        margin-left: auto;
        margin-top: 10px;
        }
    #logo{
        margin-left:119px;
        margin-right: 119px;
    }
    /*#botonera_principal ul {
        margin-right: 35.25px;
    } */
    .container{
        grid-template-areas:"uno uno dos" "tres tres tres" "cinco cinco cinco" "cuatro cuatro cuatro";
    }
    .s7{
        display: none;
    }
    .container2{
        grid-template-areas: "ocho" "nueve";
    }
}
@media all and (max-width: 639px){
    header{
        width: 90%;
        height: auto;
    }
    nav{
        width: 100%;
        height: auto;
    }
    #logo{
        width: 100%;
        height: auto;
        float: none;
        padding: 10px;
        box-sizing: border-box;
        text-align: center;
        margin: 0;
    }
    #botonera_principal{
        width: 100%;
        height: auto;
        float: none;
        margin-top: 20px;
    }
    #botonera_principal ul{
        float: none;
    }
    #botonera_principal ul li{
        display: block;
    }
    #botonera_principal ul li a{
        width: 100%;
        box-sizing: border-box;
        text-align: center;
        margin-bottom: 5px;
        display: block;

    }
    .container{
        grid-template-areas:"uno" "dos" "tres" "cinco""cuatro";
    }
    .s7{
        display: none;
    }
    .container2{
        grid-template-areas: "ocho" "diez";

    }
    .s9{
        display: none;
    }
    .s10{
        display: block;
    }
}