* { 
    box-sizing: border-box;
}



/* Estilo de body */
body {
    font-family: 'Century Gothic';
    font-size: 20pt;
    margin: 0;
}

a {
    font-family:'Century Gothic';
    font-size: 17pt;
    text-decoration-line: none;
    color: rgb(0, 0, 0);
}


li.opcion {
    color: rgb(0, 0, 0);
}


/*Estilo de marquesina*/
#marquesina{
    background-color: rgb(5, 5, 102);
    padding: 5px;
}
 /*Estilo de h4*/
 h4{
     text-align: center;
     color: cornsilk;
 }

 /*Estilo de header*/
 .header {
     padding-right: 5%;
     padding-left: 5%;
     padding-top: 2%;
     padding-bottom: 5%;
     text-align: center;
     background-color: rgb(26, 145, 182);
     color: black;
 }

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

/*Estilo para logo*/
img.logo {
    width: 80%;
    max-height: 80%;
    padding-bottom: 2%;
}

/*Estilo para div logo*/
div.cajalogo2 {
    width: 10%;
    max-height: 10%;
    float:right;
}

/*Estilo para logo*/
img.logo2 {
    width: 80%;
    max-height: 80%;
    padding-bottom: 2%;
}

/*Estilo de top navigation bar - la barra de navegación superior*/
.navbar {
    display: flex;
    background-color: rgb(9, 99, 172);
}

/*Estilo de navigation bar links - las ligas de la barra de vinculos*/
.navbar a {
    color: rgb(255, 253, 253);
    padding: 14px 20px;
    text-decoration: none;
    text-align: center;
}

/*Cambiar color al pasar el cursor sobre la opción del menú*/
.navbar a:hover {
    background-color:rgb(23, 150, 167);
    color: rgb(0, 0, 0);
}

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

/*Crear dos columnas desigules que se encuentren una al lado de la otra*/
/*Barra lateral / columna izquierda*/
.side {
    flex: 20%;
    background-color: rgb(9, 99, 172);
    padding: 2%;
}

/*Columna principal*/
.main {
    flex: 80%;
    background-color: rgb(172, 213, 214);
    padding: 2%;
}

/*imagen falsa, solo para este ejemplo*/
.fakeimg {
    background-color: rgb(23, 150, 167);
    width: 100%;
    max-height: 25%;
    padding: 2%;
}

.conimg {
    width: 100%;
    max-height: 70%;
    
}

/*pie de página*/
.footer {
    padding: 1%;
    font-family:'Century Gothic';
    font-size: 10pt;
    color: rgb(224, 254, 255);
    text-align: center;
    background-color: rgb(62, 66, 70);
}






/*Diseño responsivo: cuando la pantalla tiene menos de 700px de ancho hacer que las 2 columnas se apliquen
una encima una de de la otra en lugar de a los lados*/
@media screen and (max-width: 64em) {
    .row, .navbar {
        flex-direction: column;
        font-size: 100%;
        text-decoration: none;
    }
}

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

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