body{
    font-family: Century Gothic;
    margin: 0;
    background: #d1c3c7;
}

/* Estilo header */
.header {
    padding: 50px;
    text-align: center;
    background: #a5dae4;
    color: #14063d;
}

/* 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;
}

/* Estilo para div logo2 */
div.cajalogo2 {
    width: 120px;
    max-height: 120px;
    float: right;
}

/* Estilo para logo2 */
img.logo2 {
    width: 150px;
    max-height: 110px;
    padding-bottom: 30px;
}

/* Diseño responsivo: cuando la pantalla tiene menos de 700 px de ancho, hacer que las dos columnas se apilen una encima de la otra en lugar de una al lado de la otra */
@media screen and (max-width: 700px) {
    .row, .navbar {
        flex-direction: column;
    }
}
/* Estilo de top navegation bar- Barra de navegación superior */
.navbar {
    display: flex;
    background-color: #14063d;
    padding: 0px;
}

/* Estilo de top navogaton bar links - las ligas de la barra de vínculos */
.navbar a {
    color: #F3EDED;
    padding: 14px 20px;
    text-decoration: none;
    text-align: center;
    font-size: 14pt;
    text-align: center;
}

/* Cambiar color al pasar el cursor sobre el menú */
.navbar a:hover {
    background-color: #f0ae8234;
    color: #ffffff;
    border-radius: 15px 15px 15px 15px;
}

/* Contenedor de columna */ 
.row {
    display: flex;
    flex-wrap: wrap;
}

/* Crear dos columnas desiguales que se encentren una a lado de la otra */
/* Barra lateral / columna izquierda */ 
.side {
    flex: 15%;
    float: left;
    background-color:  #F3EDED;
    padding: 20px;
    text-align: justify;
}

/* Código menú */
.sidebar {

    width: 15%;
    height: 100%;
    background-color: #00828F;
    color: white;
    outline: 1px solid #004A61;
}

.sidebar h2 {
    font-family: 'Trebuchet Ms', cursive;
    text-align: center;
    margin: 0;
    padding: 10px;
    background-color: #004A61;
}

.sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar li {
    outline: 1px solid #004A61;
    transition: border 0.4s;
    padding-bottom: 40%;
}

.sidebar li:hover {
    background: #81c0c5;
    border-left: 5px solid #eee;
}

.sidebar a {
    display: block;
    color: white;
    text-decoration: none;
    padding: 15px;
}
.contenido {
    width: 85%;
    height: 820px;
    float: left;
    background: #F3EDED;
    padding: 10px;
    transition: all 0.3s;
    box-sizing: border-box;
    text-align: justify;
    float: right;
}

.bi-filter-circle-fill {
    cursor: pointer;
    padding: 10px;
}

.abrir {
    transform: translateX(215px);
}



/* Estilo del contenido */
h1 {
    font-family: 'Trebuchet MS', cursive;
    color: #040b33;
    text-align: center;
}

h2 {
    font-family: 'Helvetica', cursive;
    color: #f6f7ff;
    text-align: left;
}

h3 {
    font-family: 'Helvetica', cursive;
    color: #040b33;
    text-align: left;
}

p {
    font-size: 13pt;
  }



/* Centrar perfectamente */
.flex-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

.flex-container>div {    
    flex-wrap: wrap;
    width: 80%;
    height: 100%;
    margin-left: 30%;
}

.flex-container2 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400px;
}

.flex-container2>div { 
    width: 500px;
    height: 300px;
}



.bi-arrow-right-circle {
    font-size: xx-large;
    color: #004A61;
    cursor: pointer;
}


/* Ajustes para la posición de la tabla */
table {
    position: static;
    left: 150px;
}

.main {
    flex: 70%;
}


/* Estilo para pie de página */ 
footer {
    background-color: #004A61;
    padding: 50px;
    text-align: center;
    color: cornsilk;
    font-family: Century Gothic;
    float: left;
    clear: both;
    width: 100%;
}

/* Aineación de la tabla */
.alinear{
    box-sizing: border-box;
    text-align: center;
    width: 1145px;
}

.alinear ol {
    box-sizing: border-box;
    text-align: center;
    width: 1145px;
}

.alinear li {
    box-sizing: border-box;
    width: 1145px;
    text-align: center;
}

/* Diseño responsivo: cuando la pantalla tiene menos de 700 px de ancho, hacer que las dos columnas se apilen una encima de la otra en lugar de una al lado de la otra */
@media screen and (max-width: 700px) {
    .contenido, .row, .side {
        flex-direction: column;
    }
}