*{
    box-sizing: border-box;
}

body {
   width: 99.5%;
   font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
   text-align: center;
}

body.dos {
    width: 99%;
}

/* Estilo del encabezado */
 header {
     background-color: rgb(171, 214, 182);
     padding: 30px;
     text-align:center ;
     font-size: 25px;
     color: rgb(15, 15, 15);
 }
 
 
 /* Contendor para cajas flexibles */
 section {
     display: -webkit-flex;
     display: flex;
     

 }

 /* Estilo para el menú de navegación */
  nav {
      -webkit-flex: 1;
      -ms-flex: 1;
      flex: .5;
      background: rgb(234, 246, 234);
      padding: 30px;
  }

/* Estilo para la lista dentro del menú */
nav ul {
   list-style-type: none;
   padding: 20px;
   text-decoration-line: none
}

/* Estilo para elementos de la lista dentro del menú */
li.opcion {
    padding-bottom: 25px ;
}

/* Estilo para div logo */
div.cajalogo {
    
    width: 150px;
    max-height: 100px;
    float:left;
    

}
    

    

/* Estilo para logo */
img.logo {
    width: 150px;
    max-height: 150px;
    padding-bottom: 30px ;
    margin-left: 40px;
    
}

/* Estilo para la imagen */
img.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: none;
    max-height: 400px;
   
}

/* Estilo para el contenido */
article {
    -webkit-flex: 3;
    -ms-flex: 3;
    flex: 3;
    background-color: rgb(255, 255, 255);
    padding: 10px;
    padding-left: 40px;
    padding-right: 40px;

}

/* Estilo para el pie de página */
footer {
    background-color: rgb(171, 214, 182);
    padding: 10px;
    text-align: center;
    color: white;
}

/* Estilo para los enlaces no visitados */

a:link {
    color: rgb(0, 0, 0);
    text-decoration-line: none;
}

/* Estilo para los enlaces visitados */
 a:visited {
     color: black;
     text-decoration-line: none;
 }

 /* Estilo para los enlaces al pasar el cursor encima */
 a:hover {
     color: rgb(233, 203, 134);
     text-decoration-line: none
 }

 /* Estilo para los enlaces al ser activados*/
 a:active {
    color: white;
    text-decoration-line: none;
 }

 /* Diseño responsivo: hace que el menú y el contenido (dentro de la sección) se coloque uno encima del otro en lugar de uno al lado de otro. */
 @media (max-width: 600px) {
     section {
         -webkit-flex-direction: column;
         flex-direction: column;
     }
 }

 .flex-container {
     display: flex;
 }


 /* Estilo adaptativo imagenes*/
 
 .flex-container {

    display: flex;
    flex-direction: column-reverse;
    background-color: white;
    justify-content: center;
    align-items: center;

 }

 .flex-container>div {

    background-color: white;
    width: 100px;
    margin: 10px;
    text-align: center;
    line-height: 35px;
    font-size: 30px;
    
 }