:root{
    /* ==============
    Galería de 2 columnas */
    --espacioGCol2: 15px; /* Espacio entre columnas*/
    --espacioGTot2: calc(var(--espacioGCol2) * 0);
    --anchoGTotCol2: calc(100% - var(--espacioGTot2));
    --anchoGCol2: calc(var(--anchoGTotCol2) / 1); /* Ancho de cada columna. De 1 columna */
    /* ==============
    Variables 3 columnas */
    --espacioGCol3: 15px; /* Espacio entre columnas*/
    --espacioGTot3: calc(var(--espacioGCol3) * 0);
    --anchoGTotCol3: calc(100% - var(--espacioGTot3));
    --anchoGCol3: calc(var(--anchoGTotCol3) / 1); /* Ancho de cada columna. De 1 columna */
    /* ==============
    Variables 4 columnas */
    --espacioGCol4: 15px; /* Espacio entre columnas*/
    --espacioGTot4: calc(var(--espacioGCol4) * 0);
    --anchoGTotCol4: calc(100% - var(--espacioGTot4));
    --anchoGCol4: calc(var(--anchoGTotCol4) / 1); /* Ancho de cada columna. De 1 columna */
        /* ==============
    Variables 6 columnas */
    --espacioGCol6: 10px; /* Espacio entre columnas*/
    --espacioGTot6: calc(var(--espacioGCol6) * 2);
    --anchoGTotCol6: calc(100% - var(--espacioGTot6));
    --anchoGCol6: calc(var(--anchoGTotCol6) / 3); /* Ancho de cada columna. De 1 columna */
}
/* ==============
    Para todas las columnas */
    ul.g2Box, ul.g3Box, ul.g4Box, ul.g6Box{ /* Caja galería */
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content:space-between;
        align-items: flex-start;
        flex-wrap: wrap;  
        list-style: none;      
    }
/* ==============
    Galería de 2 columnas */
    ul.g2Box li{ /* Ancho de cada columna */
        width: var(--anchoGCol2);
        padding: 0;
        margin-bottom: var(--spaceMarg);
    }
    ul.g2Box li:last-child{
        margin-bottom: 0px;
    }
    ul.g2Box li a{ /* Ancho de cada columna */
        display: flex;
        flex-direction: column;
        width: 100%;
        height:100%;
        padding:12px;
        margin: 0;
        background-color: var(--color1);
        -webkit-transition: all 300ms linear;
        -moz-transition: all 300ms linear;
        -o-transition: all 300ms linear;
        -ms-transition: all 300ms linear;
        transition: all 300ms linear;
    }
    ul.g2Box li a img{ /* Ancho de cada columna */
        width: 100%;
        margin: 0;
    }
    .g2Ver{ /* Ancho de cada columna */
        width: 100%;
        height: 30px;
        font-size: 2rem;
        color: white;
        padding-top: 6px;
        text-align: center;
        font-weight: bold;
    }
    ul.g2Box li a:hover{ /* Ancho de cada columna */
        background-color: var(--color3);
    }
    ul.g2Box li a:hover .g2Ver{ /* Ancho de cada columna */
        color: white;
    }
/* ==============
    3 columnas 
    ============== */
    ul.g3Box > li{/* Ancho de cada columna.
    Los siguientes parámetros se deben colocar en el CSS personalizado
    ** background-color
    ** padding */
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        width: var(--anchoGCol3);
        padding:var(--padding);
        margin-bottom: var(--spaceMarg);
    }
    ul.g3Box > li:last-child{
        margin-bottom: 0px;
    }
    /* ==============
    4 columnas */
    ul.g4Box li{ /* Ancho de cada columna */
        display: flex;
        flex-direction: column;
        justify-content:flex-start;
        flex-wrap: wrap;
        width: var(--anchoGCol4);
        margin-bottom: var(--spaceMarg);
        
    }
    ul.g4Box li:last-child{
        margin-bottom: 0px;
    }
/* ==============
    6 columnas */
    ul.g6Box li{ /* Ancho de cada columna */
        display: flex;
        flex-direction: column;
        justify-content:flex-start;
        flex-wrap: wrap;
        width: var(--anchoGCol6);
        margin-bottom: 10px;
        margin-right: var(--espacioGCol6);
    }    
    ul.g6Box li a{ /* Ancho de cada columna */
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content:flex-start;
            flex-wrap: wrap;
            width:100%;            
    }
    ul.g6Box li a .cajitaNum{ /* Ancho de cada columna */
        position:absolute;
        width: 30px;
        height: 30px;
        bottom: 0;
        right: 0;
        background-color: white;
        padding-top: 5px;
        text-align: center;
        font-weight: bold;   
}
    ul.g6Box li a img{ /* Ancho de cada columna */
        width:100%;
        height: 100px;
        object-fit: cover;
        object-position: center top;           
    }
    ul.g6Box > li:nth-last-child(-n+3){
        margin-bottom: 0;
    }
    ul.g6Box > li:nth-child(3n){
        margin-right: 0;
    }
/* ============== */

/* ==============
    Galeria7 */
    .g7{ /* Caja galería 7 */
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex-wrap: wrap;
        padding: var(--spacePad);
        border: 3px solid white;
	    border-radius: 15px;
	    -moz-border-radius: 15px;
	    -webkit-border-radius: 15px;
        text-decoration: none;
        text-align: center;
        -webkit-box-shadow: 0px -5px 22px -5px rgba(0,0,0,0.2);
        -moz-box-shadow: 0px -5px 22px -5px rgba(0,0,0,0.2);
        box-shadow: 0px -5px 22px -5px rgba(0,0,0,0.2);
        -webkit-transition: all 300ms linear;
        -moz-transition: all 300ms linear;
        -o-transition: all 300ms linear;
        -ms-transition: all 300ms linear;
        transition: all 300ms linear;
    }
    .g7 p{
        text-align: center;
    }
    .g7_boxImg{
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
        width: 100%;
        padding: 0;
        margin: 0;
        margin-bottom: 30px;
        
    }
    .g7_boxImg img{
        width: 100%;
        padding: 0;
        margin: 0;
        border-radius: 15px;
	    -moz-border-radius: 15px;
	    -webkit-border-radius: 15px;
    }
    .g7_imgTitu{
        width: 76%;
        height: auto;
        position: absolute;
        bottom: -15px;
        left: 12%;
        text-align: center;
        padding:6px 6px 6px 6px;
        background-color: var(--color1);
        color: white;
        border-radius: 15px;
	    -moz-border-radius: 15px;
	    -webkit-border-radius: 15px;
        -webkit-box-shadow: 0px -5px 22px -5px rgba(0,0,0,0.2);
        -moz-box-shadow: 0px -5px 22px -5px rgba(0,0,0,0.2);
        box-shadow: 0px -5px 22px -5px rgba(0,0,0,0.2);
        -webkit-transition: all 300ms linear;
        -moz-transition: all 300ms linear;
        -o-transition: all 300ms linear;
        -ms-transition: all 300ms linear;
        transition: all 300ms linear;
    }
    .g7:hover{ 
        color: var(--color3);
        border: 3px solid var(--color3);
    }
    .g7:hover .g7_imgTitu{ 
        background-color: var(--color3);
    }
/* ==============
    Galerìa G7 en versiòn con fondo oscuro */
    .g7V2{ /* g7 versiòn 2 */
        color: white;
    }
    .g7V2_imgTitu{ /* g7 versiòn 2 */
        background-color: white;
        color: var(--color1);
    }
    .g7V2:hover{
        background-color: white;
        color: var(--color1);
        border: 3px solid white;
    }
    .g7V2:hover .g7V2_imgTitu{ /* g7 versiòn 2 */
        background-color:  var(--color1);;
        color: white;
    }
@media only screen and (min-width: 320px) {
}
@media only screen and (min-width: 480px) {
        /* ==============
        Variables 4 columnas */
        :root{
            --espacioGTot4: calc(var(--espacioGCol4) * 1);
            --anchoGTotCol4: calc(100% - var(--espacioGTot4));
            --anchoGCol4: calc(var(--anchoGTotCol4) / 2); /* Ancho de cada columna. De 4 columnas */
        }
} 
@media only screen and (min-width: 590px) {

    :root{
        /* ==============
        Variables 2 columnas */
        --espacioGTot2: calc(var(--espacioGCol2) * 1);
        --anchoGTotCol2: calc(100% - var(--espacioGTot2));
        --anchoGCol2: calc(var(--anchoGTotCol2) / 2); /* Ancho de cada columna. De 1 columna */
        /* ==============
        Variables 3 columnas */
        --espacioGTot3: calc(var(--espacioGCol3) * 2);
        --anchoGTotCol3: calc(100% - var(--espacioGTot3));
        --anchoGCol3: calc(var(--anchoGTotCol3) / 3); /* Ancho de cada columna. De 3 columnas */
            /* ==============
        Variables 6 columnas */
        --espacioGTot6: calc(var(--espacioGCol6) * 3);
        --anchoGTotCol6: calc(100% - var(--espacioGTot6));
        --anchoGCol6: calc(var(--anchoGTotCol6) / 4); /* Ancho de cada columna */
    }
 
    ul.g3Box > li:nth-last-child(-n+3){
        margin-bottom: 0;
    }
    ul.g6Box > li:nth-last-child(-n+4){
        margin-bottom: 0;
    }
    ul.g6Box > li:nth-child(3n){
        margin-right: 10px;
    }
    ul.g6Box > li:nth-child(4n){
        margin-right: 0;
    }
}
/* Ancho horizontal del celular Xiomi 11 Ancho:395px - 790px*/
@media only screen and (min-width: 768px) {
    :root{
        /* ==============
        Variables 6 columnas */
        --espacioGTot6: calc(var(--espacioGCol6) * 4);
        --anchoGTotCol6: calc(100% - var(--espacioGTot6));
        --anchoGCol6: calc(var(--anchoGTotCol6) / 5); /* Ancho de cada columna */
    }
     ul.g6Box > li:nth-last-child(-n+5){
        margin-bottom: 0;
    }
    ul.g6Box > li:nth-child(3n){
        margin-right: 10px;
    }
    ul.g6Box > li:nth-child(4n){
        margin-right: 10px;
    }
    ul.g6Box > li:nth-child(5n){
        margin-right: 0;
    }

}
@media only screen and (min-width: 1024px) {
    :root{
        /* ==============
        Variables 2 columnas */
        --espacioGCol2: 20px; /* Espacio entre columnas*/
        /* ==============
        Variables 3 columnas */
        --espacioGCol3: 20px; /* Espacio entre columnas*/
        /* ==============
        Variables 4 columnas */
        --espacioGCol4: 20px; /* Espacio entre columnas*/
        --espacioGTot4: calc(var(--espacioGCol4) * 3);
        --anchoGTotCol4: calc(100% - var(--espacioGTot4));
        --anchoGCol4: calc(var(--anchoGTotCol4) / 4); /* Ancho de cada columna. De 4 columnas */
        /* ==============
        Variables 6 columnas */
        --espacioGTot6: calc(var(--espacioGCol6) * 5);
        --anchoGTotCol6: calc(100% - var(--espacioGTot6));
        --anchoGCol6: calc(var(--anchoGTotCol6) / 6); /* Ancho de cada columna. De 4 columnas */
    }
    ul.g6Box li a img{ /* Ancho de cada columna */
        height: 120px;         
    }
    ul.g6Box > li:nth-last-child(-n+6){
        margin-bottom: 0;
    }
    ul.g6Box > li:nth-child(3n){
        margin-right: 10px;
    }
    ul.g6Box > li:nth-child(4n){
        margin-right: 10px;
    }
    ul.g6Box > li:nth-child(5n){
        margin-right: 10px;
    }
    ul.g6Box > li:nth-child(6n){
        margin-right: 0;
    }
}
@media only screen and (min-width: 1140px) {
    :root{
        /* ==============
        Variables 2 columnas */
        --espacioGCol2: 30px; /* Espacio entre columnas*/
        /* ==============
        Variables 3 columnas */
        --espacioGCol3: 30px; /* Espacio entre columnas*/
        /* ==============
        Variables 4 columnas */
        --espacioGCol4: 30px; /* Espacio entre columnas*/
    }
}