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

/* Estilo header */
.header {
    padding: 30px;
    text-align: center;
    background: #004A61;
    color: #F3EDED;
}

/* 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: 150px;
    max-height: 100px;
    float: right;
}

/* Estilo para logo2 */
img.logo2 {
    width: 150px;
    max-height: 150px;
    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: #81c0c5;
    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: #F9B401;
    color: #00828F;
    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: 30%;
    background-color:  #F3EDED;
    padding: 20px;
    text-align: justify;
}

/* Código menú */
.sidebar {
    position: absolute;
    width: 215px;
    height: 460px;
    background-color: #00828F;
    color: white;
    outline: 1px solid #004A61;
}

.sidebar h2 {
    font-family: 'Racing Sans One', 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;
}

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

.sidebar a {
    display: block;
    color: white;
    text-decoration: none;
    padding: 15px;
}

.contenido {
    width: 1345px;
    height: 100%;
    position: absolute;
    background: #F3EDED;
    padding: 10px;
    transition: all 0.3s;
    box-sizing: border-box;
    text-align: justify;
}

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

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

/*Modificaciones para el ícono de home */
.bi-house-fill {
    font-size: xx-large;
    padding-left: 40px;
}

/* Estilo para los botones*/
.btn-outline-warning {
    padding-left: 10px;
    cursor: pointer;
}

/* Estilo del contenido */
h1 {
    font-family: 'Racing Sans One', cursive;
    color: #F9B401;
    text-align: center;
}

p {
    font-size: 13pt;
}

/* Estilo de iframe anima */
#anima {
    height: 100%;
    width: 100%;
    border: none;
    margin: auto;
}

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

/* Estilo para el botón siguente y anterior*/ 
div.final {
    float: right;
    text-align: right;
    border: none;
    padding-bottom: 30px;
}

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

/* Estilo para el botón de retroceso*/
.bi-arrow-left-circle {
    font-size: xx-large;
    color: #004A61;
    cursor: pointer;
    text-align: right; 
}

/* Ajustes para laimagen de la tabla */ 

.ajustar {
    height: 100px;
    width: 80px;
}

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

.main {
    flex: 70%;
}

/*Ajustes para el carrusel */

.side {
    height: 400px;
    width: 600px;
    background-color: #49767a;
}
.carouselExampleControls {
    margin-left: 500px;
}

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

/* Icono para atividad */
.bi-pencil-square {
    font-size: x-large;
    color: #004A61;
}

/*Ajustes para el video de antedecentes*/
.video {
    padding-left: 30%;
}

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

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

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

/*Alineación de la lista de usos */
.alinear2{
    box-sizing: border-box;
    text-align: justify;
    width: 1000px;
}

.alinear2 ol {
    box-sizing: border-box;
    text-align: justify;
    width: 1000px;
}

.alinear2 li {
    box-sizing: border-box;
    width: 1000px;
    text-align: justify;
}

/* Diseño reponsivo: cuando la pantalla tiene menos de 700px de ancho hacer que las dos columnas se apilen una encima de la otra */

@media screen and (max-width: 64em) {
    .contenido2 {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        font-size: 100%;
        text-decoration: none;
        width: 100%;
    }
}

@media screen and (max-width: 40em) {
    .contenido2 {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        font-size: 80%;
        text-decoration: none;
    }
}

@media screen and (max-width: 25em) {
    .contenido2 {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        font-size: 70%;
        text-decoration: none;
    }
}