/*
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 : 3/05/2023, 02:13:20 PM
    Author     : pcgc7
*/

body { font-family: 'Open Sans', sans-serif; background-image: url('../imgAperitivos/fondoAperitivos.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; min-height: 100vh; }
.colorFondo { background-color: rgba(0, 0, 0, 0.5); }

/* Encabezado */
header { background-image: linear-gradient(to right, #fff 0%, #a12312 100%); z-index: 30; }
header .col-xl-4 { padding-left: 0; padding-right: 0; max-width: 20% }
header .p-4 { padding: 1em !important; }

/* Menú */
.menu { display: flex; justify-content: center; border-top: none; }
.menu ul { display: flex; flex-direction: row; }
.menu ul li { font-size: 1em !important; margin: 0 2.5em; }
.menu ul li a { padding-left: 1.25em; padding-right: 1.25em; }

/* Sección principal */
.display-4 { font-size: 3em !important; }
.pt-4 { padding-top: 1.5em !important; } 
.pt-3 { padding-top: 1em !important; }
.pb-5 { padding-bottom: 2.5em !important; }
p { font-size: 1em; }

.w-100 { width: 80% !important; }    
h6 { font-size: 1em; }

/****************************** MEDIA QUERIES ******************************/

@media screen and (min-width: 1424px) and (max-width: 1647.98px) {
    
    /* Encabezado */
    header .col-xl-4 { padding-left: 0; padding-right: 0; max-width: 20% }
    header .p-4 { padding: 1em!important; }
    
    /* Menú */
    .menu { display: flex; justify-content: center; border-top: none; }
    .menu ul { display: flex; flex-direction: row; }
    .menu ul li { font-size: 1em !important; margin: 0 2em; }
    .menu ul li a { padding-left: 1.25em; padding-right: 1.25em; }

    /* Sección principal */
    .display-4 { font-size: 2.75em !important; }
    .pt-4 { padding-top: 1.5em !important; }
    .pt-3 { padding-top: 1em !important; }    
    .pb-5 { padding-bottom: 2.25em !important; }    
    p { font-size: 1em; }
    
    .w-100 { width: 80% !important; }
    h6 { font-size: 0.85em; }                
}

@media screen and (min-width: 1200px) and (max-width: 1423.98px) {
    
    /* Encabezado */
    header .col-xl-4 { padding-left: 0; padding-right: 0; max-width: 20% }
    header .p-4 { padding: 1em!important; }
    
    /* Menú */
    .menu { display: flex; justify-content: center; border-top: none; }
    .menu ul { display: flex; flex-direction: row; }
    .menu ul li { font-size: 1em !important; margin: 0 1em; }
    .menu ul li a { padding-left: 1.25em; padding-right: 1.25em; }
                            
    /* Sección principal */
    .display-4 { font-size: 2.5em !important; }
    .pt-4 { padding-top: 1.5em !important; } 
    .pt-3 { padding-top: 0.75em !important; }
    .pb-5 { padding-bottom: 2em !important; }
    p { font-size: 0.9em; }
    
    .w-100 { width: 80% !important; }    
    h6 { font-size: 0.8em; }    
}

@media screen and (min-width: 992px) and (max-width: 1199.98px) {
    
    /* Encabezado */
    header .col-lg-4 { padding-left: 0; padding-right: 0; max-width: 20%; }
    header .p-4 { padding: 1em!important; }
    
    /* Menú */
    .menu { display: flex; justify-content: center; border-top: none; }
    .menu ul { display: flex; flex-direction: row; }
    .menu ul li { font-size: 0.85em !important; margin: 0 0.7em; }
    .menu ul li a { padding-left: 1.25em; padding-right: 1.25em; }

    /* Sección principal */
    .display-4 { font-size: 2.25em !important; }
    .pt-4 { padding-top: 1.5em !important; }
    .pt-3 { padding-top: 0.75em !important; }
    .pb-5 { padding-bottom: 1.75em !important; }
    p { font-size: 0.85em; }
    
    .w-100 { width: 70% !important; }    
    h6 { font-size: 0.85em; }    
}

@media screen and (min-width: 768px) and (max-width: 991.98px) {
    
    /* Encabezado */
    header .col-md-4 { padding-left: 0; padding-right: 0; max-width: 25%; }
    header .p-4 { padding: 0.75em!important; }
    
    /* Botón del menú */
    .btnMenu i { font-size: 1.75em; }    
    
    /* Menú */
    .menu { display: flex; justify-content: center; border-top: 1px solid #000; }
    .menu ul { display: flex; flex-direction: row; padding-top: 0.5em; }
    .menu ul li { font-size: 0.8em !important; margin: 0 1em; }
    .menu ul li a { padding-left: 1.25em; padding-right: 1.25em; }
    .menu .text-white { color: #000 !important; }
    .menu .nav .nav-item .nav-link:hover { color: white !important; }
    
    /* Sección principal */
    .display-4 { font-size: 2em !important; }
    .pt-4 { padding-top: 1.5em !important; }
    .pt-3 { padding-top: 0.75em !important; }
    .pb-5 { padding-bottom: 1.5em !important; }
    p { font-size: 0.75em; }
           
    h6 { font-size: 0.85em; }           
}

@media screen and (min-width: 576px) and (max-width: 767.98px) {
    
    /* Encabezado */
    header .col-sm-6 { padding-left: 0; padding-right: 0; max-width: 30%; }
    header .p-4 { padding: 0.75em !important; }
    
    /* Botón del menú */
    .btnMenu i { font-size: 1.75em; }    
    
    /* Menú */
    .menu { display: flex; justify-content: flex-start; border-top: 1px solid #000; }
    .menu ul { display: flex; flex-direction: column; padding-top: 0.5em; }
    .menu ul li { font-size: 0.7em !important; margin: 0; }
    .menu ul li a { padding-left: 1.25em; padding-right: 1.25em; }
    .menu .text-white { color: #000 !important; }
    .menu .nav .nav-item .nav-link:hover { color: white !important; }
   
    /* Sección principal */
    .display-4 { font-size: 1.75em !important; }
    .pt-4 { padding-top: 1em !important; }
    .pt-3 { padding-top: 0.5em !important; }
    .pb-5 { padding-bottom: 1.25em !important; }
    p { font-size: 0.6em; }
        
    h6 { font-size: 0.75em; }            
}

@media screen and (min-width: 481px) and (max-width: 575.98px) {
    
    /* Encabezado */
    header .col-6 { padding-left: 0; padding-right: 0; max-width: 35%; }
    header .p-4 { padding: 0.75em!important; }
    
    /* Botón del menú */
    .btnMenu i { font-size: 1.5em; }
    
    /* Menú */
    .menu { display: flex; justify-content: flex-start; border-top: 1px solid #000; }
    .menu ul { display: flex; flex-direction: column;  padding-top: 0.5em; }
    .menu ul li { font-size: 0.65em !important; margin: 0; }
    .menu ul li a { padding-left: 1.25em; padding-right: 1.25em; }
    .menu .text-white { color: #000 !important; }
    .menu .nav .nav-item .nav-link:hover { color: white !important; }
                          
    /* Sección principal */
    .display-4 { font-size: 1.5em !important; }
    .pt-4 { padding-top: 1em !important; }
    .pt-3 { padding-top: 0.5em !important; }
    .pb-5 { padding-bottom: 1em !important; }
    p { font-size: 0.5em; }
        
    h6 { font-size: 0.65em; } 
}

@media screen and (max-width: 480px) {
    
    /* Encabezado */
    header .col-6 { padding-left: 0; padding-right: 0; max-width: 40%; }
    header .p-4 { padding: 0.75em!important; }
    
    /* Botón del menú */
    .btnMenu i { font-size: 1.5em; }
    
    /* Menú */
    .menu { display: flex; justify-content: flex-start; border-top: 1px solid #000; }
    .menu ul { display: flex; flex-direction: column; padding-top: 0.5em; }
    .menu ul li { font-size: 0.6em !important; margin: 0; }
    .menu ul li a { padding-left: 1.25em; padding-right: 1.25em; }    
    .menu .text-white { color: #000 !important; }
    .menu .nav .nav-item .nav-link:hover { color: white !important; }
    
    /* Sección principal */
    .display-4 { font-size: 1.5em !important; }
    .pt-4 { padding-top: 1em !important; }
    .pt-3 { padding-top: 0.5em !important; }
    .pb-5 { padding-bottom: 1em !important; }
    p { font-size: 0.5em; }
           
    h6 { font-size: 0.65em; }
}