h1{
    text-align: center;
}

h2{
    text-align: left;
    font-family: Tahoma;
}

p{
    text-align: justify;
    font-family:'Segoe UI', 'Open Sans', 'Helvetica Neue';
    font-size: 14px;
}

* {
    box-sizing: border-box;
}


/*Estilo body*/
body {
    margin: 0;
    text-align: justify;
    padding-right: 10px;
}

/* Estilo de marquesina */
#marquesina {
    background: rgba(191, 147, 241, 0.918);
    color: mintcream;
    padding-bottom: none;
    max-height: 35pt;
}

/*Estilo h3*/
h3 {
    font-size: 18px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-align: left;
    color: rgb(176, 91, 233);
    text-decoration-line: none;
}

/* Estilo del encabezado */
header {
    background-color: rgba(4, 6, 126, 0.863);
    height: 2%;
    padding-bottom: 3%;
    text-align: center;
    font-family: Verdana;
    font-size: 20px;
    color: white;
}

/*Estilo para contenido del encabezado*/
.containerCover {
    padding-top: 3%;
    padding-bottom: 0%;
    text-align: center;
}

/* Contenedor para cajas flexibles */
section {
    display: -webkit-flex;
    display: flex;
    width: 100%;
    float: left;
    clear:both;
}
nav {
/* Estilo para el menú de navegación */

    -webkit-flex: 1;
    -ms-flex: 1;
    flex: .7;
    background: rgba(106, 150, 233, 0.925);
    padding-left: 1%;
 
}

/* Estilo para la lista dentro del menú */
nav ul {
    list-style-type:circle;
    color: white;
    padding: 5%;
    text-decoration-line: none;
    text-align: left;
}

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

/* Estilo para div logo */
div.cajalogo {
    width: 10%;
    max-height: 100%;
    float: left;
    padding: 1%;
    
}

/* Estilo para logo */
img.logo {
    width: 100%;
    max-height: 10%;
    margin-left: 50%;
    margin-top: 25%;
}

/* Estilo para la imagen00*/
img.alineadoCentro {
    margin-left: auto;
    margin-right: 10px;
    image-orientation: right;
    vertical-align: middle;
    float: right;
    border: none;
    max-height: 210px;
    padding-left: 20px;
    padding-right:none;
    padding-top: 10px;
    padding-bottom: 10px;
}

/*Estilo para imagen02 alle*/
img.left1 {
    vertical-align: middle;
    float: left;
    border: none;
    height: 107px;
    width: 200px;
    padding-right: 20px;
    
}

/*Estilo para imagen03 elisa*/
img.left2 {
    vertical-align: middle;
    float: left;
    border: none;
    max-height: 200px;
    width: 200px;
    padding-right: 20px;
}

/*Estilo para imagen04 diana*/
img.left3 {
    vertical-align: middle;
    float: left;
    border: none;
    height: 120px;
    width: 200px;
    padding-right: 20px;
}

/* Estilo para el contenido */
article {
    -webkit-flex: 2;
    -ms-flex: 2;
    flex: 3;
    background-color: rgba(255, 255, 255, 0.842);
    text-align: justify;
    padding: 5px;
    padding-left: 40px;
    padding-right: 5px;

}

/* Estilo para el pie de página */
footer {
    background-color: rgba(170, 170, 170, 0.705);
    height: 2%;
    width: 100%;
    float: left;
    clear: both;
    padding-top: 2px;
    text-align: center;
    color: white;
}

/* Estilo para los enlaces no visitados */
a:link {
    color: white;
    text-decoration-line: none;
}

/* Estilo para los enlaces visitados */
a:visited {
    color: rgb(255, 255, 255);
    text-decoration-line: none;
    text-align: left;
}

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

/* Estilo para los enlaces al ser activados */
a:active {
    color: rgb(15, 5, 105);
    text-decoration-line: none;
}

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

.flex-container {
    display: flex;
}

h1 {
    font-family: Verdana;
    font-size: 2em;
    color: white;
  }


  @media screen and (max-width: 80em) {
    h1 {
        font-size: 1.7em;
      }
    }

@media screen and (max-width: 64em) {
h1 {
    font-size: 1.5em;
  }
}

@media screen and (max-width: 50em) {
h1 {
    font-size: 1em;
  }
}

@media screen and (max-width: 30em){
h1 {
    font-size: .5em;
  }
}