/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 04/01/2024, 02:53:47 PM
    Author     : pcgc7
*/

:root {
    --colorAzul: #003f6f;
    --colorDorado: #b59a47;
    --colorBlanco: #fff;
    --colorWhitesmoke: #f5f5f5;
    --colorAlabaster: #f2f0e6;
    --colorSilver: #ccc;
    --colorRojo: #cc0000;
}

/* Encabezado */
.encabezado { z-index: 50; background: linear-gradient(to right, var(--colorWhitesmoke) 0%, var(--colorDorado) 100%); box-shadow: 0 0.625em 0.625em 0 rgba(0,0,0,0.5); }
header a .img-fluid { max-width: 85%; }
header .p-4 { padding: 1.5em !important; }

/* Menú */
.menu ul li { font-size: 1.25em; }
.menu ul { justify-content: space-around; }

/* Botón del menú */
div.btnMenu i { font-size: 2em; }
div.btnMenu.mr-5 { margin-right: 3em !important; }
div.btnMenu.pb-3 { padding-bottom: 1em !important; }
li.nav-item.mx-5 { margin-left: 2em !important; margin-right: 2em !important; }

/* Sección de la información de contacto */
.contenido { max-width: 80% !important; }

/* Cuerpo del documento  */
.imgFondoAzul { background-image: url('../imagenes/fondoAzul.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center; }
h2 { font-size: 2em !important; }
h3 { font-size: 1.75em !important; }
hr { width: 100%; border-top: 0.125em solid rgba(181,154,71,0.9)!important; } 
p { font-size: 1em; }
iframe { width: 100%; }

/********************* Media queries *********************/

/* Estilo para dispositivos con tamaño de pantalla mayor a 14240px y menor que 1648x */
@media screen and (min-width: 1424px) and (max-width: 1647.98px) {
    
    /* Encabezado */
    header a .img-fluid { max-width: 80%; }
    header .p-4 { padding: 1.5em !important; }
    
    /* Menú */
    .menu ul li { font-size: 95%; }
    .menu ul { justify-content: space-around; }    
            
    /* Botón del menú */
    div.btnMenu i { font-size: 2em; }
    div.btnMenu.mr-5 { margin-right: 2.5em !important; }
    div.btnMenu.pb-3 { padding-bottom: 0.75em !important; }
    li.nav-item.mx-5 { margin-left: 1.75em !important; margin-right: 1.75em !important; }
    
    /* Sección de noticias */
    .contenido { max-width: 85%!important; }
    
    /* Cuerpo del documento */
    h2 { font-size: 2em !important; }    
    h3 { font-size: 1.75em !important; } 
    hr { width: 100%; border-top: 0.125em solid rgba(181,154,71,0.9)!important; }
    p { font-size: 90%; }    
}


/* Estilo para dispositivos con tamaño de pantalla mayor a 1200px y menor que 1424px */
@media screen and (min-width: 1200px) and (max-width: 1423.98px) {
    
    /* Encabezado */
    header a .img-fluid { max-width: 80%; }
    header .p-4 { padding: 1.25em !important; }
            
    /* Menú */
    .menu ul li { font-size: 90%; }
    .menu ul { justify-content: space-around; }    
            
    /* Botón del menú */
    div.btnMenu i { font-size: 2em; }
    div.btnMenu.mr-5 { margin-right: 2.5em !important; }
    div.btnMenu.pb-3 { padding-bottom: 0.75em !important; }
    li.nav-item.mx-5 { margin-left: 1.25em !important; margin-right: 1.25em !important; }
    
    /* Sección de actividades */
    .contenido { max-width: 85% !important; }
    
    /* Cuerpo del documento */    
    h2 { font-size: 2em !important; }    
    h3 { font-size: 1.75em !important; } 
    hr { width: 100%; border-top: 0.125em solid rgba(181,154,71,0.9)!important; } 
    p { font-size: 85%; }    
}

/* Estilo para dispositivos con tamaño de pantalla mayor a 992px y menor que 1200px */
@media screen and (min-width: 992px) and (max-width: 1199.98px) {
    
    /* Encabezado */
    header a .img-fluid { max-width: 70%; }
    header .p-4 { padding: 1.25em !important; }        
    
    /* Menú */
    .menu ul li { font-size: 80%; }
    .menu ul { justify-content: space-around; }    
            
    /* Botón del menú */
    div.btnMenu i { font-size: 2em; }
    div.btnMenu.mr-5 { margin-right: 2em !important; }
    div.btnMenu.pb-3 { padding-bottom: 0.5em !important; }
    li.nav-item.mx-5 { margin-left: 0.75em !important; margin-right: 0.75em !important; }
    
    /* Sección de actividades */
    .contenido { max-width: 90% !important; border: 0.0625em solid #b59a47; }
    
    /* Cuerpo del documento  */    
    h2 { font-size: 2em !important; }
    h3 { font-size: 1.5em !important; }    
    hr { width: 100%; border-top: 0.125em solid rgba(181,154,71,0.9)!important; } 
    p { font-size: 80%; }    
}

/* Estilo para dispositivos con tamaño de pantalla mayor a 768px y menor que 992px */
@media screen and (min-width: 768px) and (max-width: 991.98px) {
    
    /* Encabezado */
    header a .img-fluid { max-width: 70%; }
    header .p-4 { padding: 1.25em !important; }        
    
    /* Menú */
    .menu ul li { font-size: 80%; }
    .menu ul { justify-content: space-around; }    
            
    /* Botón del menú */
    div.btnMenu i { font-size: 2em; }
    div.btnMenu.mr-5 { margin-right: 2em !important; }
    div.btnMenu.pb-3 { padding-bottom: 0.5em !important; }
    li.nav-item.mx-5 { margin-left: 0.75em !important; margin-right: 0.75em !important; }
    
    /* Sección de actividades */
    .contenido { max-width: 90% !important; border: 0.0625em solid #b59a47; }
    
    /* Cuerpo del documento  */
    h2 { font-size: 1.75em !important; }    
    h3 { font-size: 1.25em !important; }
    hr { width: 100%; border-top: 0.125em solid rgba(181,154,71,0.9)!important; } 
    p { font-size: 80%; }        
}

/* Estilo para dispositivos con tamaño de pantalla mayor a 576px y menor que 768px */
@media screen and (min-width: 576px) and (max-width: 767.98px) {
    
    /* Encabezado */
    header a .img-fluid { max-width: 65%; }
    header .p-4 { padding: 1em !important; }       
    
    /* Menú */
    .menu ul li { font-size: 80%; }
    .menu ul { display: flex; flex-direction: column; }
            
    /* Botón del menú */
    div.btnMenu i { font-size: 1.5em; }
    div.btnMenu.mr-5 { margin-right: 1.5em !important; }
    div.btnMenu.pb-3 { padding-bottom: 0 !important; }
    li.nav-item.mx-5 { margin-left: 0.75em !important; margin-right: 0.75em !important; }
    
    /* Sección de actividades */
    .contenido { max-width: 90%!important; border: 0.0625em solid #b59a47; }
    
    /* Cuerpo del documento  */    
    h2 { font-size: 1.5em !important; }    
    h3 { font-size: 1.25em !important; }
    hr { width: 100%; border-top: 0.125em solid rgba(181,154,71,0.9)!important; } 
    p { font-size: 70%; }        
}

/* Estilo para dispositivos con tamaño de pantalla menor que 576px */
@media screen and (min-width: 481px) and (max-width: 575.98px) {
    
    /* Encabezado */
    header a .img-fluid { max-width: 55%; }
    header .p-4 { padding: 0.75em!important; }
            
    /* Menú */
    .menu ul li { font-size: 80%; }
    .menu ul { display: flex; flex-direction: column; }    
            
    /* Botón del menú */
    div.btnMenu i { font-size: 1.5em; }
    div.btnMenu.mr-5 { margin-right: 1.5em!important; }
    div.btnMenu.pb-3 { padding-bottom: 0!important; }
    li.nav-item.mx-5 { margin-left: 0.5em !important; margin-right: 0.5em !important; }
    
    /* Sección de actividades */
    .contenido { max-width: 90%!important; border: 0.0625em solid #b59a47; }
    
    /* Cuerpo del documento  */
    h2 { font-size: 1.5em!important; }   
    h3 { font-size: 1.25em!important; }  
    hr { width: 100%; border-top: 0.125em solid rgba(181,154,71,0.9)!important; } 
    p { font-size: 70%; }    
}

@media screen and (max-width: 480px) {
    
    /* Encabezado */
    header a .img-fluid { max-width: 45%; }
    header .p-4 { padding: 0.75em!important; }
    
    /* Menú */
    .menu ul li { font-size: 80%; }
    .menu ul { display: flex; flex-direction: column; }
    
    /* Botón del menú */
    div.btnMenu i { font-size: 1.5em; }
    div.btnMenu.mr-5 { margin-right: 1.5em !important; }
    div.btnMenu.pb-3 { padding-bottom: 0 !important; }
    li.nav-item.mx-5 { margin-left: 0.5em !important; margin-right: 0.5em !important; }
    
    /* Sección de la información de contacto */
    .contenido { max-width: 90%!important; }
    
    /* Cuerpo del documento */
    h2 { font-size: 1.25em!important; }
    h3 { font-size: 1em!important; }
    hr { width: 100%; border-top: 0.125em solid rgba(181,154,71,0.9)!important; }
    p { font-size: 70%; }        
}