@import url('/media/system/css/joomla-fontawesome.min.css');

:root{
  --cassiopeia-color-primary : #501C0E; /* Colore primario */
  --cassiopeia-color-hover : #743C23; /* Colore Hover */
  --cassiopeia-color-link : #501C0E; /* Colore collegamenti ipertestuali #30638d */
  --link-color : #501C0E; /* Colore collegamenti ipertestuali #30638d */
  --link-hover-color : #89472A; /* Colore Hover link */
  
  --body-font-size: 1.2rem; /* dimensione carattere del body */
}

.metismenu.mod-menu .metismenu-item{ /* menù principale */
  padding-right: 0.2rem;
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing : .15rem;
  /*font-variant: small-caps;*/
}

/* Rimuovo da tutti i link la sottolienatura*/
a {
    text-decoration: none !important;
}

/* 1. Dichiarazione del Font Variabile Google Sans Flex */
@font-face {
  font-family: 'Google Sans Flex';
  src: url('../fonts/GoogleSansFlex.ttf') format('truetype-variations'),
       url('../fonts/GoogleSansFlex.ttf') format('truetype');
  font-weight: 100 1000; /* Permette di usare qualsiasi peso da 100 a 1000 */
  font-style: normal;
  font-display: swap;
}

/* BANNER HOME PAGE */
#mod-custom114 .overlay h1,
#mod-custom114 .overlay h4,
#mod-custom114 .overlay h5,
#mod-custom114 .overlay h6{
    font-family: 'Google Sans Flex', sans-serif !important;
    font-stretch:125%;
    font-variation-settings: "slnt" 0, "GRAD" 0, "ROND" 100;

}
#mod-custom114 .overlay h6{
    font-color:red !important; 
}

/* ==========================================
   Banner home page: Per Smartphone (Schermi piccoli)
   ========================================== */
#mod-custom114 .overlay h1 {
    font-size: 1.8rem;   
    font-weight: 500;
    /*line-height: 1.2;*/
    font-style: italic;
    letter-spacing: 3px;
}

#mod-custom114 .overlay h4 {
    font-size: 1.25rem;    /* Più piccolo su telefono per "ASSOCIAZIONE" */
    font-weight: 300;
    letter-spacing: 2px;
}

#mod-custom114 .overlay h5 {
    font-size: 0.9rem;    /* Più piccolo su telefono per "per i diritti dei bambini" */
    font-weight: 200;
    letter-spacing: 1px;
}

#mod-custom114 .overlay h6 {
    font-size: 0.5rem;    /* Più piccolo su telefono per "per i diritti dei bambini" */
    font-weight: 200;
    letter-spacing: 1px;
}

/* ==========================================
   Banner home page: Per Tablet (Schermi da 768px in su)
   ========================================== */
@media screen and (min-width: 768px) {
    #mod-custom114 .overlay h1 {
        font-size: 3.9rem; /* Il titolo principale si ingrandisce */
    }
    #mod-custom114 .overlay h4 {
        font-size: 1.1rem;
    }  
    #mod-custom114 .overlay h5 {
        font-size: 1.6rem;
    }
    #mod-custom114 .overlay h6 {
        font-size: .8rem;
    }  
}

/* ==========================================
   Banner home page: Per Computer (Schermi da 1024px in su)
   ========================================== */
@media screen and (min-width: 1024px) {
	#mod-custom114 .overlay h1 {
		font-size: 5.375rem; /* 86px */
    }
	#mod-custom114 .overlay h4 {
		font-size: 2.5rem;
	}  
	#mod-custom114 .overlay h5 {
		font-size: 2.3rem;
	}
	#mod-custom114 .overlay h6 {
		font-size: 1.6rem;
	}  
}


/* FOOTER */
#mod-custom119 h1,
#mod-custom119 h4,
#mod-custom119 h5,
#mod-custom120 h1,
#mod-custom120 h4,
#mod-custom120 h5{
    font-family: 'Google Sans Flex', sans-serif !important;
    font-stretch:125%;
    font-variation-settings: "slnt" 0, "GRAD" 0, "ROND" 100;
}

#mod-custom120 h1,
#mod-custom119 h1 {
    font-size: 1.4rem;   
    font-weight: 500;
    /*line-height: 1.2;*/
    font-style: italic;
    letter-spacing: 3px;
}

#mod-custom120 h4,
#mod-custom119 h4 {
    font-size: 1.25rem;    
    font-weight: 300;
    letter-spacing: 2px;
}

#mod-custom120 h5,
#mod-custom119 h5 {
    font-size: 0.6rem;    /* Più piccolo su telefono per "per i diritti dei bambini" */
    font-weight: 200;
    letter-spacing: 1px;
}

.footer .grid-child{
  padding: 1.0rem .5em;
}

/* ==========================================
   Footer: Per Tablet (Schermi da 768px in su)
   ========================================== 
@media screen and (min-width: 768px) {
    #mod-custom119 h1 {
        font-size: 1.9rem; 
    }
    #mod-custom119 h4 {
        font-size: 0.4rem;
    }  
    #mod-custom119 h5 {
        font-size: 0.8rem;
    }
}*/

/* ==========================================
   Footer: Per Computer (Schermi da 1024px in su)
   ========================================== 
@media screen and (min-width: 1024px) {
	#mod-custom119 h1 {
		font-size: 5.375rem; 
    }
	#mod-custom119 h4 {
		font-size: 2.5rem;
	}  
	#mod-custom119 h5 {
		font-size: 2.3rem;
	}
}*/




/* ==========================================
   Testi particolari (testo introduttivo home page)
   ========================================== */
.testi-particolari p {
    font-family: 'Google Sans Flex', sans-serif !important;
    font-stretch:110%;
    font-variation-settings: "slnt" 0, "GRAD" 0, "ROND" 100;  
    font-size: 1.1rem;   
    font-weight: 300;
    line-height: 1.6;
    font-style: italic;
    letter-spacing: 3px;
}


/* Dice all'header principale di affiancare il blocco del logo e il blocco del menu */
header.container-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
}

/* Rimuove le impostazioni a tutta larghezza dei singoli blocchi per farli stare sulla stessa riga */
header.container-header .grid-child,
header.container-header .grid-child-nav,
header.container-header .container-nav {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
}

/* Aggiunge spazio a destra del blocco logo per allontanare il menu */
header.container-header .grid-child:first-child {
    margin-right: 3rem !important; /* Modifica questo valore per aumentare o diminuire lo spazio */
}

/* Regola l'altezza massima del logo */
header.container-header .navbar-brand img {
    max-height: 60px; /* Imposta l'altezza ideale per il tuo logo */
    width: auto !important;
}