/* =========================================================================
   GENERATO da `kit-a-css.py` dal Kit di Elementor. NON si scrive a mano.

   Sono gli stili che il grafico ha deciso una volta, nel Kit, e a cui ogni
   elemento del sito rimanda con il proprio identificativo. Il contenuto dice
   QUALE stile e', questo foglio dice com'e' fatto.
   ========================================================================= */

/* I valori che il Kit dichiara per gli elementi. ⚠ Solo
   tipografia: i colori del Kit sono quelli del sito chiaro. */
h1 { font-family:"Lusitana";font-size:25px;font-weight:500 }
h2 { font-family:"Lusitana";font-size:20px }
h3 { font-family:"Lusitana";font-size:18px }
h4 { font-family:"Quando";font-size:17px }
h5 { font-family:"Lusitana";font-size:16px;font-weight:700 }
h6 { font-family:"Lusitana";font-size:10px;font-weight:700;text-transform:uppercase }
body { font-family:"Poppins";font-size:13px;font-weight:normal }

/* Titolo */
.stile-primary { font-family:"Lusitana";font-size:30px;font-weight:500;text-transform:uppercase }
/* Sottotitolo */
.stile-secondary { font-family:"Lusitana";font-size:20px;font-weight:600;text-transform:uppercase }
/* Contenuti */
.stile-text { font-family:"Poppins";font-size:13px;font-weight:normal;font-style:normal }
/* In risalto */
.stile-accent { font-family:"Lusitana";font-size:40px;font-weight:700;text-transform:uppercase }
/* Expletus */
.stile-e20ef4c { font-family:"Lusitana";font-size:40px;font-weight:200;text-transform:uppercase }
/* Titolo H2 Lusitana 20 300 */
.stile-a0720a2 { font-family:"Lusitana";font-size:20px;font-weight:300;text-transform:uppercase }
/* Sotto titolo poppins 12 */
.stile-6ce2cd5 { font-family:"Poppins";font-size:12px;font-weight:normal;font-style:normal }

@media (max-width: 800px) {
  h1 { font-size:22px }
  h2 { font-size:20px }
  h3 { font-size:18px }
  h4 { font-size:16px }
  h5 { font-size:14px }
  h6 { font-size:12px }
  body { font-size:14px }
  .stile-e20ef4c { font-size:20px }
}

/* L'allineamento e' una scelta del grafico, non una gabbia: si porta. */
.a-centro { text-align: center; }
.a-sinistra { text-align: left; }
.a-destra { text-align: right; }
.a-giustificato { text-align: justify; }
.a-centro > img, .a-centro img.disegno, img.a-centro { margin-inline: auto; }
.a-destra > img, img.a-destra { margin-inline-start: auto; }

/* `_element_width: auto`: il widget si stringe sul contenuto e sta in
   riga con quelli accanto, seguendo l'allineamento della colonna. */
.larghezza-auto {
  display: inline-block;
  width: auto;
  max-width: 100%;
  vertical-align: middle;
  margin-block: 0;
}
.larghezza-auto + .larghezza-auto { margin-inline-start: 0; }

/* Colonna centrata: centra i blocchi larghi «auto», non il testo. */
.colonna--centra { text-align: center; }
:where(.colonna--centra) > :where(:not(.larghezza-auto)) { text-align: start; }

/* I corpi che il grafico ha scritto sul singolo elemento arrivano come
   variabili, perche' Elementor ne tiene tre — schermo, tablet, telefono —
   e tre misure vogliono tre media query, che in linea non si scrivono. */
[style*='--corpo'] { font-size: var(--corpo); }
[style*='--interlinea'] { line-height: var(--interlinea); }

@media (max-width: 1300px) {
  [style*='--corpo-t'] { font-size: var(--corpo-t); }
}

@media (max-width: 800px) {
  [style*='--corpo-m'] { font-size: var(--corpo-m); }
  [style*='--interlinea-m'] { line-height: var(--interlinea-m); }
  .m-centro { text-align: center; }
  .m-sinistra { text-align: left; }
  .m-destra { text-align: right; }
  .m-giustificato { text-align: justify; }
  .m-centro > img { margin-inline: auto; }
  .m-larghezza-piena { display: block; width: 100%; }
  .m-colonna--centra { text-align: center; }
  :where(.m-colonna--centra) > :where(:not(.larghezza-auto)) { text-align: start; }
}