/* ==========================================================================
   Foglio di stile per le pagine "el*" (funnel Lifestyle Business)
   Scritto a mano a partire dalle misure calcolate (1280 e 390 px).
   Ordine: 1 variabili - 2 box model e struttura - 3 tipografia e colori -
   4 finestra a comparsa - 5 mobile.
   Le regole sono per classe e valgono per ogni pagina che le usa. Dove un
   valore non e' stato misurato ma e' scritto nel nome della classe (HP_40,
   Corner60, 70_30, elScreenshot_left...) e' stato dedotto dal nome.
   ========================================================================== */

/* ---- 1. Variabili ------------------------------------------------------- */
:root {
  --font-sans: sans-serif;
  --text: #2f2f2f;
  --text-input: #000;
  --white: #fff;
  --green: #30a05c;
  --blue: #0b72a1;
  --line: #cfcfcf;
  --video-placeholder: #2b2b2b;
  --container-wide: 950px;   /* largezza della sezione "midWideContainer" */
  --container-mid: 700px;    /* largezza della finestra a comparsa */
}

/* ---- 2. Box model e struttura ------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

body { margin: 0; }
img { max-width: 100%; height: auto; vertical-align: middle; }

.hide,
.elCustomJSBg { display: none; }

/* Clearfix: ::before a display:table impedisce ai margini del primo figlio di
   "uscire" dal contenitore, ::after contiene i float */
.clearfix::before,
.clearfix::after { content: " "; display: table; }
.clearfix::after { clear: both; }

/* Sezioni: larghezza massima centrata, padding orizzontale dalla classe */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.midWideContainer { max-width: var(--container-wide); }
.midContainer { max-width: var(--container-mid); }

/* Utility di padding (le sezioni portano anche il padding verticale inline) */
.padding10-top { padding-top: 10px; }
.padding10-bottom { padding-bottom: 10px; }
.padding40-top { padding-top: 40px; }
.padding40-bottom { padding-bottom: 40px; }
.padding40H { padding-left: 40px; padding-right: 40px; }
.P0-top { padding-top: 0; }
.P0-bottom { padding-bottom: 0; }
.P0H { padding-left: 0; padding-right: 0; }

/* Righe e colonne: nessun margine negativo, nessun padding laterale (il
   respiro laterale arriva dalla sezione e dal .col-inner inline) */
.row { margin-left: 0; margin-right: 0; }
.row::before,
.row::after { content: " "; display: table; }
.row::after { clear: both; }
.col-md-12 { width: 100%; }

/* Allineamenti e margini */
.elAlign_left { text-align: left; }
.elAlign_center { text-align: center; }
.elMargin0 { margin: 0; }

/* Immagini */
.elImageWrapper { display: block; }
.elIMG { max-width: 100%; height: auto; }

/* Divisore: 10px sopra e sotto una linea di 1px */
.elSeperator,
.elDivider { display: block; }
.elDividerInner { border-top: 1px solid var(--line); }

/* Bottoni: il nome della classe codifica la misura (VP = padding verticale,
   HP = orizzontale, b_N = bordo, CornerN = raggio) */
.elBTN { display: block; }
.elButton {
  display: inline-block;
  border: 1px solid transparent;
  text-align: center;
  text-decoration: none;
}
.elButtonBlock,
.elButtonFull { display: block; width: 100%; }
.elBTN_b_none { border-width: 0; }
.elBTN_b_1 { border-width: 1px; }
.elBTN_b_2 { border-width: 2px; }
.elBTN_b_3 { border-width: 3px; }
.elBtnVP_00 { padding-top: 0; padding-bottom: 0; }
.elBtnVP_10 { padding-top: 10px; padding-bottom: 10px; }
.elBtnHP_00 { padding-left: 0; padding-right: 0; }
.elBtnHP_25 { padding-left: 25px; padding-right: 25px; }
.elBtnHP_30 { padding-left: 30px; padding-right: 30px; }
.elBtnHP_40 { padding-left: 40px; padding-right: 40px; }
.elButtonCorner3 { border-radius: 3px; }
.elButtonCorner15 { border-radius: 15px; }
.elButtonCorner60 { border-radius: 60px; }
.elButtonSub { display: block; }
/* Icone prima/dopo il testo del bottone: 10px di distanza ciascuna */
.fa_prepended { margin-right: 10px; }
.fa_appended { margin-left: 10px; }

/* Immagine + testo (80/20 e 70/30): due colonne in float, contenute dal clearfix */
.elFeatureImage { display: block; }
.elScreenshot_image,
.elScreenshot_text { float: left; }
.elFeatureImage_80_20 .elScreenshot_image { width: 20%; }
.elFeatureImage_80_20 .elScreenshot_text { width: 80%; }
.elFeatureImage_70_30 .elScreenshot_image { width: 30%; }
.elFeatureImage_70_30 .elScreenshot_text { width: 70%; }
.elScreenshot_left .elScreenshot_image { float: right; }
.elScreenshot_left .elScreenshot_text { float: left; }
/* a desktop l'immagine resta allineata a sinistra anche con .elAlign_center */
.elFeatureImage_80_20 .elScreenshot_image,
.elFeatureImage_70_30 .elScreenshot_image { text-align: left; }

/* Video: cornice con bordo e padding, area 16:9 dentro la cornice */
.elVideoWrapper {
  padding: 8px;
  border: 1px solid var(--line);
  border-bottom-width: 3px;
  border-radius: 5px;
  background-color: var(--white);
}
.elVideoWidth100 { width: 100%; }
.elVideo {
  /* !important indispensabile: il markup esportato porta style="display:none"
     inline (il player lo mostrava via script, qui non c'e' script) */
  display: block !important;
  aspect-ratio: 16 / 9;
  border-radius: 5px;
  overflow: hidden;
}
.elVideo iframe { display: block; width: 100%; height: 100%; border: 0; }
/* il segnaposto serviva solo prima del caricamento del player */
.elVideoplaceholder { display: none; padding: 25px 0 56.25%; }
.elVideoplaceholder_inner { background-color: var(--video-placeholder); text-align: center; }

/* ---- 3. Tipografia e colori -------------------------------------------- */
body {
  font: 14px/1.42857143 var(--font-sans);
  color: var(--text);
}
a { color: var(--blue); }

h1, h2, h3, h4, h5, h6 {
  font-family: inherit;
  font-weight: 500;
  line-height: 1.1;
  margin: 10px 0;
}

/* Titoli e paragrafi: la famiglia arriva inline dal wrapper, il corpo dal
   template (hsSizeN) o inline; l'interlinea dalla classe lhN */
.elHeadline { margin: 0; }
.hsSize1 { font-size: 16px; }
.lh3 { line-height: normal; }
.lh4 { line-height: 1.3; }
.lh5 { line-height: 1.42857143; }

/* Titolo + testo accanto all'immagine */
.elScreenshot_text_headline { margin: 10px 0 6px; }

/* Bottoni */
.elButton { font-weight: 700; }
.elButtonSub { font-size: 14px; font-weight: 400; }

/* Campi del modulo: ereditano il font del corpo, il testo digitato e' nero */
.elInput {
  margin: 0;
  font: inherit;
  color: var(--text-input);
}
.elInputHidden { display: none; }
.elInput100 { width: 100%; }
.elInputMid { padding: 12px 18px; font-size: 16px; }
.elInputStyl0 { border: 1px solid var(--line); }
.elInputBG1 { background-color: var(--white); }
.elInputBR5 { border-radius: 5px; }
.elInputBR0 { border-radius: 0; }
.elHeadlineCheckbox { float: left; margin: 2px 8px 0 0; line-height: normal; }

/* Immagini */
.imgRoundCorners { border-radius: 5px; }
.shadow0 { box-shadow: none; }
.shadow30 { box-shadow: 0 3px 12px rgba(0, 0, 0, .3); }

/* ---- 4. Finestra a comparsa del modulo ---------------------------------- */
.modalBackdropWrapper { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000; }
.containerModal {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 1001;
  max-height: 100%;
  overflow-y: auto;
  transform: translateX(-50%);
}
.radius10 { border-radius: 10px; }
.closeLPModal { position: absolute; top: 8px; right: 8px; cursor: pointer; }
.closeLPModal img { width: 32px; }
.progress { height: 24px; overflow: hidden; background-color: #eee; border-radius: 4px; }
.progress-bar { height: 100%; line-height: 24px; text-align: center; color: var(--white); background-color: var(--green); }
.progressbar_nocorners { border-radius: 0; }
.progressbar_w_50 { width: 50%; }

/* ---- 5. Mobile (< 768 px) ---------------------------------------------- */
@media (max-width: 767px) {
  .padding40H { padding-left: 5px; padding-right: 5px; }

  .elFeatureImage_80_20 .elScreenshot_image,
  .elFeatureImage_70_30 .elScreenshot_image,
  .elFeatureImage_80_20 .elScreenshot_text,
  .elFeatureImage_70_30 .elScreenshot_text {
    float: none;
    width: 100%;
    text-align: center;
  }
  .elScreenshot_image { margin-top: 20px; }
  .elScreenshot_text_padding {
    /* !important indispensabile: il padding "0 10px" e' scritto inline */
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ==========================================================================
   Pulsanti (elButton*, elBTN*)
   Struttura del markup:  .elBTN (contenitore)  >  a.elButton  >  .elButtonMain + .elButtonSub
   Il colore del testo, lo sfondo, il corpo e il peso arrivano in linea dalla
   pagina (e il gradiente da un <style> per pulsante): qui restano misure,
   bordi, arrotondamenti, ombre e larghezza. Ombre e colore del bordo basso
   non stanno nelle proprieta' misurate: valori scelti a occhio.
   Senza regola (non cambiano nessuna misura): elBTNone, elButtonColor1,
   elButtonIcon2, elButtonMain, elButtonPadding2, elButtonRounded,
   elButtonTxtColor1, elButtonTxtColor2.
   ========================================================================== */

/* ---- 1. Base del link --------------------------------------------------- */
/* Interlinea ereditata dal corpo (rapporto 1,43, quindi segue il corpo del
   pulsante; la bozza della base la fissa in px). Padding di partenza 13/35 con :where(), cosi' le classi VP/HP
   della base lo sostituiscono senza battaglie d'ordine. */
.elButton { line-height: inherit; }
:where(.elButton) { padding: 13px 35px; }
/* Classe dell'editor (non el*) messa anche sul link di un pulsante: "Scopri di piu'" diventa "Scopri Di Piu'" */
.deCapitalize { text-transform: capitalize; }

/* ---- 2. Dimensioni: corpo del testo e del sotto-testo ------------------- */
.elButtonSize1 { font-size: 18px; }
.elButtonSize2 { font-size: 21px; }
.elButtonSize3 { font-size: 27px; }
.elButtonSize4 { font-size: 37px; }
.elButtonSize2 .elButtonSub { font-size: 16px; }
.elButtonSize3 .elButtonSub { font-size: 18px; }
.elButtonSize4 .elButtonSub { font-size: 21px; }

/* ---- 3. Larghezza ------------------------------------------------------- */
/* Piena: blocco che riempie il contenitore. Fluida: segue il testo (vince su
   .elButtonBlock, che da solo darebbe larghezza 100%) */
.elButtonFull { display: block; }
.elButtonFluid { display: inline-block; width: auto; }

/* ---- 4. Bordi e arrotondamenti ------------------------------------------ */
.elBTN_b_1_3 { border-width: 1px 1px 3px; }   /* 1px sopra e ai lati, 3px sotto */
.elButtonBottomBorder { border-width: 0 0 3px; border-bottom-color: rgba(0, 0, 0, .25); }
/* il padding vince su elBtnHP_00, presente nel markup ma senza effetto */
.elButtonSubtle { padding: 13px 35px; border-radius: 4px; }

/* ---- 5. Ombre ----------------------------------------------------------- */
.elButtonNoShadow { box-shadow: none; }
.elButtonShadow1 { box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.elButtonShadow2 { box-shadow: 0 3px 8px rgba(0, 0, 0, .3); }
.elButtonShadowN1 { box-shadow: 0 2px 4px rgba(0, 0, 0, .2); }
.elButtonShadowFlatHighlight { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }

/* ---- 6. Mobile (< 768 px) ----------------------------------------------- */
/* I pulsanti allineati a sinistra si centrano; Size3 e Size4 si stringono e si arrotondano */
@media (max-width: 767px) {
  .elBTN.elAlign_left { text-align: center; }
  .elButtonSize3,
  .elButtonSize4 { font-size: 21px; padding-top: 15px; padding-bottom: 15px; border-radius: 5px; }
}

/* ==========================================================================
   Estensione "testo e titoli": titoli (elHeadline*, elBGStyle0), caratteri
   (elFont_*), elenchi puntati (elBullet*), divisori (elDividerStyle1) e icone
   dei titoli (elHeadlineIcon_*). Viene dopo la base.
   Ordine: 1 carattere - 2 sezioni, righe e colonne - 3 titoli - 4 elenchi
   puntati - 5 icone dei titoli - 6 mobile. Il divisore (elDividerStyle1) non
   ha regole qui: la bozza della base gia' lo riproduce.
   Dove un valore e' scritto in linea dalla pagina (colore, corpo, allineamento,
   famiglia del carattere) non e' fissato qui: la classe dice solo il valore
   di partenza.
   ========================================================================== */

/* ---- 1. Carattere della pagina ------------------------------------------ */
/* La famiglia arriva da <html> (classe elFont_* o stile in linea) e scende
   fino al corpo: la base la fissava sul body, qui il body la eredita */
html { font-family: var(--font-sans); }
body { font-family: inherit; }
.elFont_opensans { font-family: "Open Sans", sans-serif; }
.elFont_helvectica { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }

/* ---- 2. Sezioni, righe e colonne ---------------------------------------- */
/* Larghezza della sezione = riquadro con bordo e imbottitura laterale di
   40 px: il testo occupa 660 / 900 / 1060 px */
.midContainer { max-width: 740px; }
.midWideContainer { max-width: 980px; }
.wideContainer { max-width: 1140px; }
/* Sezione a tutta pagina: il testo occupa 1150 px, bordo e imbottitura stanno fuori */
.fullContainer { box-sizing: content-box; width: auto; max-width: 1150px; }

/* Bordo di sezione, riga e colonna: lo stile e lo spessore sono nelle classi,
   il colore e' scritto in linea; noBorder lo annulla */
.borderSolid,
.borderDotted,
.borderDashed { border-width: 0; }
.borderSolid { border-style: solid; }
.borderDotted { border-style: dotted; }
.borderDashed { border-style: dashed; }
.border1px { border-width: 1px; }
.border2px { border-width: 2px; }
.border3px { border-width: 3px; }
.border5px { border-width: 5px; }
.border10px { border-width: 10px; }
.noBorder { border-width: 0; }
.borderLightTop { border-right-width: 0; border-bottom-width: 0; border-left-width: 0; }
.borderLightBottom { border-top-width: 0; border-right-width: 0; border-left-width: 0; }

/* Sezione interna: 20 px di imbottitura compensati da -20 px di margine; la
   pagina puo' scrivere in linea un'imbottitura laterale diversa */
.containerInner { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; }

/* Riga: margine laterale -15 px e imbottitura 10 px */
.row { margin-left: -15px; margin-right: -15px; padding-left: 10px; padding-right: 10px; }
/* Colonne: affiancate con 20 px di spazio; la larghezza di N colonne su 12 e'
   N/12 di (riga + 20 px) meno i 20 px di spazio. Imbottitura laterale 5 px */
[class*="col-md-"] { float: left; width: calc((100% + 20px) * var(--cols) / 12 - 20px); padding-left: 5px; padding-right: 5px; }
.col-md-4 { --cols: 4; }
.col-md-5 { --cols: 5; }
.col-md-6 { --cols: 6; }
.col-md-7 { --cols: 7; }
.col-md-8 { --cols: 8; }
.col-md-12 { --cols: 12; }
.col_left { margin-left: 0; }
.col_right { margin-left: 20px; }
.col-inner { padding-left: 0; padding-right: 0; }

/* ---- 3. Titoli ----------------------------------------------------------- */
/* Corpo (hsSizeN): solo quelli che le pagine non scrivono in linea. hsSize2,
   27 e 124 sono sempre in linea */
.hsSize0 { font-size: 14px; }
.hsSize1 { font-size: 16px; }
.hsSize12 { font-size: 12px; }
.hsSize18 { font-size: 18px; }
.hsSize21 { font-size: 21px; }
.hsSize3 { font-size: 32px; }
.hsSize37 { font-size: 37px; }
.hsSize4 { font-size: 48px; }
/* Interlinea (lhN) */
.lh1 { line-height: 1; }
.lh2 { line-height: 1.5; }
.lh3 { line-height: normal; }
.lh4 { line-height: 1.3; }
.lh5 { line-height: 1.42857143; }

/* Imbottitura, angoli e spaziatura delle lettere date dalla classe */
.padding0 { padding: 0; }
.padding15 { padding: 15px; }
.de20pxPadding { padding: 20px; }
.radius0 { border-radius: 0; }
.radius5 { border-radius: 5px; }
.de1pxLetterSpacing { letter-spacing: 1px; }
.de2pxLetterSpacing { letter-spacing: 2px; }

/* ---- 4. Elenchi puntati -------------------------------------------------- */
/* Il corpo e l'interlinea si ereditano dalla pagina (la bozza li fissava a 14/20 px) */
.elBullet,
.elBulletList { font-size: inherit; line-height: inherit; }
.elBulletList { padding: 0; list-style: none; }
/* Voce: 3 px sopra e sotto, 6 px dalla voce precedente, 2 em a sinistra per
   l'icona; l'icona (<i>) sta nello spazio a sinistra */
.elBulletList li { position: relative; margin-top: 6px; padding: 3px 0 3px 2em; }
.elBulletList li > .fa-fw { position: absolute; left: 0; }
.elBulletList_theme2 li { padding: 13px 0 13px 1.5em; }
/* Elenchi con icona o immagine come puntino: corpo dalla classe, margine a destra */
.listSize1 li { font-size: 15px; }
.listSize3 li { font-size: 18px; }
.listImage32 li,
.listIcon6 li { padding-right: 10%; }
.listBorder1 li { padding-left: 1.5em; border-bottom: 1px solid rgba(47, 47, 47, .15); }

/* ---- 5. Icone dei titoli -------------------------------------------------- */
/* Icona (Font Awesome, caricato dalla pagina) davanti al testo del titolo */
.elHeadlineIcon_asterisk::before,
.elHeadlineIcon_check::before,
.elHeadlineIcon_lock::before { margin-right: .4em; font-family: "Font Awesome 5 Free"; font-weight: 900; }
.elHeadlineIcon_asterisk::before { content: "\f069"; }
.elHeadlineIcon_check::before { content: "\f00c"; }
.elHeadlineIcon_lock::before { content: "\f023"; }

/* ---- 6. Mobile (< 768 px) ------------------------------------------------ */
@media (max-width: 767px) {
  .padding40H { padding-left: 15px; padding-right: 15px; }
  .hsSize4 { font-size: 32px; }
  /* !important indispensabile dove la pagina scrive il valore in linea
     (sezione interna, titolo, riga, colonna interna): su telefono il testo
     riempie la sezione */
  .containerInner { margin-left: 0; margin-right: 0; padding-left: 0 !important; padding-right: 0 !important; }
  .elHeadlineWrapper { padding-left: 0 !important; padding-right: 0 !important; }
  .row { width: auto !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
  [class*="col-md-"] { float: none; width: 100%; margin-left: 0; padding-left: 0; padding-right: 0; }
  .col-inner { padding-left: 0 !important; padding-right: 0 !important; }
}

/* ==========================================================================
   Famiglia "campi e moduli" (elInput*, elSelect*, elProgressBar,
   elOrderProduct*, elPricingWrapper).
   Le righe in fondo a base.css per queste classi sono una bozza generata dalle
   impronte (valori ereditati "fissati" nella classe): qui sono rimpiazzate da
   regole scritte per classe, e i valori che arrivano dal contesto (margine
   superiore in linea, dimensione del testo del carrello) tornano ereditati.
   Sezione, riga e colonna (x e larghezza dei blocchi) non sono di questa
   famiglia e non sono toccate qui.
   ========================================================================== */

/* ---- 0. Blocchi che prendono tutto dal contesto -------------------------- */

/* Margine superiore (in linea nella pagina), dimensione, interlinea e colore
   del testo (ereditati dal corpo o dal carrello) non si fissano nella classe */
.elProgressBar,
.elOrderProductOptionsWrapper,
.elPricingWrapper {
  margin-top: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* ---- 1. Campi di testo --------------------------------------------------- */

/* Il blocco del campo: il margine superiore arriva in linea dalla pagina
   (elMargin0 lo azzera di base). position:relative ancora l'icona del campo */
.elInputWrapper { display: block; position: relative; }

/* Stili del bordo e dello sfondo (il nome della classe dice quale: Style1 =
   contorno sottile, Style2 = campo pieno senza contorno, BG2 = grigio chiaro) */
.elInputStyle1 { border: 1px solid var(--line); }
.elInputStyle2 { border: 0; }
.elInputBG2 { background-color: #f1f1f1; }

/* Icona a sinistra: il testo del campo si sposta di 45 px; a destra non serve
   spazio in piu' */
.elInputILeft { padding-left: 45px; }

/* Icona del campo: un glifo Font Awesome (gia' caricato dalla pagina) disegnato
   sul contenitore, cosi' non dipende dal tipo di input. Il tipo sceglie il
   glifo, il lato la posizione, il colore il tono (nero o colore del tema) */
.elInputWrapper:has(.elInputIName, .elInputIEmail, .elInputIPhone)::before {
  position: absolute;
  top: calc(50% - 2px);
  z-index: 1;
  transform: translateY(-50%);
  font: 900 16px/1 "Font Awesome 5 Free";
  color: #000;
  pointer-events: none;
}
.elInputWrapper:has(.elInputIName)::before { content: "\f007"; }
.elInputWrapper:has(.elInputIEmail)::before { content: "\f0e0"; }
.elInputWrapper:has(.elInputIPhone)::before { content: "\f095"; }
.elInputWrapper:has(.elInputILeft)::before { left: 17px; }
.elInputWrapper:has(.elInputIRight)::before { right: 17px; }
.elInputWrapper:has(.elInputIColor)::before { color: #0174c7; }

/* ---- 2. Menu a tendina --------------------------------------------------- */

/* Etichetta che avvolge il menu: a blocco, con 5 px di spazio sotto */
.elInputLabel { display: block; margin-bottom: 5px; }

/* Senza l'aspetto di sistema il menu segue il carattere e l'interlinea del
   campo (altrimenti il browser forza line-height: normal); la freccia e' una
   piccola chevron incorporata, a 18 px dal bordo destro */
.elSelectInput {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23555' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  cursor: pointer;
}

/* ---- 3. Barra di avanzamento -------------------------------------------- */

/* Il blocco e' alto quanto la barra (35 px); il margine superiore e
   l'allineamento del testo arrivano dalla pagina */
.elProgressBar { display: block; }
.elProgressBar .progress { height: 35px; margin: 0; }
.elProgressBar .progress-bar { line-height: 35px; }

/* ---- 4. Riepilogo dell'ordine ------------------------------------------- */

/* Il blocco ha il margine superiore in linea; la dimensione del testo (20 px)
   la dichiara il carrello e scende per ereditarieta' */
.elOrderProductOptionsWrapper { display: block; }
.elOrderProductOptinLabel {
  display: block;
  margin-bottom: 5px;
  padding: 5px;
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
}
/* Prodotto a sinistra, prezzo a destra, entrambi in grassetto */
.elOrderProductOptinLabel .pull-left { float: left; }
.elOrderProductOptinLabel .pull-right { float: right; }
.elOrderProductOptinItem,
.elOrderProductOptinLabelPrice {
  display: block;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: 700;
  line-height: inherit;
}

/* ---- 5. Tabella dei prezzi ---------------------------------------------- */

/* Scheda con intestazione (nome, prezzo grande, "anziche'") e lista delle voci.
   Tutte le regole stanno sotto .elPricingWrapper: le classi interne (panel,
   pricely-*, list-group) non sono el* e non servono altrove */
.elPricingWrapper { display: block; }
.elPricingWrapper .pricely-chart-two { display: block; }
.elPricingWrapper .pricing-panel {
  margin: 0;
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: var(--white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
/* colore di sfondo e del bordo arrivano in linea dalla pagina */
.elPricingWrapper .panel-heading {
  padding: 30px 15px;
  border-bottom: 1px solid transparent;
  text-align: center;
}
.elPricingWrapper .pricely-label {
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  text-transform: uppercase;
}
.elPricingWrapper .pricely-figure { margin: 15px 0; }
.elPricingWrapper .pricely-currency,
.elPricingWrapper .pricely-amount {
  display: inline-block;
  vertical-align: top;
  line-height: 1;
}
.elPricingWrapper .pricely-currency { margin-right: 4px; font-size: 24px; }
.elPricingWrapper .pricely-amount { font-size: 66px; font-weight: 700; }
.elPricingWrapper .pricely-foreword { line-height: 20px; }
.elPricingWrapper .list-group { margin: 0; padding: 0; list-style: none; }
.elPricingWrapper .list-group-item { padding: 10px 15px; text-align: center; }
.elPricingWrapper .list-group-item + .list-group-item { border-top: 1px solid #ddd; }

/* ==========================================================================
   Famiglia "speciali": immagine+testo (elScreenshot_*), video (elVideoSkin*),
   conto alla rovescia, blocchi di codice (elCustomJS*), condivisione.
   Viene dopo la base: a pari specificita' vince l'ultima regola.
   Ordine: 0 bozze della base - 1 struttura da cui dipendono x e larghezza -
   2 immagine+testo - 3 video - 4 condivisione - 5 conto alla rovescia -
   6 mobile.
   ========================================================================== */

/* ---- 0. Bozze della base ------------------------------------------------
   Le bozze generate dalle impronte fissano su queste classi font, interlinea,
   colore e allineamento che in realta' arrivano dal contesto (corpo, classe
   elAlign_*, stile in linea): qui tornano ereditati. */
.elScreenshot_right,
.elScreenshot_image_src1,
.elScreenshot_text_body,
.elVideoSkin3,
.elVideoSkin7,
.elCountdownEvergreen,
.elCustomJS_code,
.elCustomJs,
.elSharing {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-align: inherit;
}
/* le utility di allineamento tornano a vincere sulle regole qui sopra */
.elAlign_left { text-align: left; }
.elAlign_center { text-align: center; }

/* ---- 1. Struttura: sezione, riga, colonna ------------------------------
   x e larghezza degli elementi della famiglia dipendono da queste regole.
   Valori ricavati dalle impronte di Burning TAX: con questa struttura x e
   larghezza di tutti gli elementi el* (non solo della famiglia) tornano entro
   4 px nel 95% dei casi, contro il 13% con la sola base. */

/* Sezione: padding laterale 40 px (5 px a mobile, vedi in fondo) */
.padding40H { padding-left: 40px; padding-right: 40px; }

/* Larghezza massima della sezione, bordo e padding compresi. La sezione
   media misura 760 px senza bordo e 800 con bordo. */
.midWideContainer { max-width: 1000px; }
.wideContainer { max-width: 1160px; }
.midContainer { max-width: 760px; }
.midContainer:not(.noBorder) { max-width: 800px; }
/* la finestra a comparsa resta larga come nella base */
.containerModal.midContainer { max-width: var(--container-mid); }
/* sezione a tutta pagina: 1170 px di testo, bordo e padding stanno fuori */
.fullContainer { box-sizing: content-box; width: auto; max-width: 1170px; }

/* Bordi: la classe dice stile e spessore; noBorder viene dopo e vince.
   borderLightTop e borderLightBottom lasciano solo il bordo di un lato. */
.borderSolid { border-style: solid; }
.borderDotted { border-style: dotted; }
.borderDashed { border-style: dashed; }
.border1px { border-width: 1px; }
.border2px { border-width: 2px; }
.border3px { border-width: 3px; }
.border5px { border-width: 5px; }
.border10px { border-width: 10px; }
.borderLightTop { border-style: solid; border-right-width: 0; border-bottom-width: 0; border-left-width: 0; }
.borderLightBottom { border-style: solid; border-top-width: 0; border-right-width: 0; border-left-width: 0; }
.noBorder { border-width: 0; }

/* Sezione interna e colonna interna: nessun margine e nessun padding di
   default (quello della pagina e' scritto in linea) */
.containerInner { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
.col-inner { padding-left: 0; padding-right: 0; }

/* Riga: margine laterale -15 px e padding 10 px; colonne con padding 15 px.
   Un margine o un padding scritto in linea sulla riga sostituisce quello di
   default (la somma dei tre vale +10 px, o +25 se la riga ha il margine in
   linea). */
.row { margin-left: -15px; margin-right: -15px; padding-left: 10px; padding-right: 10px; }
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-12 { float: left; margin-left: 0; margin-right: 0; padding-left: 15px; padding-right: 15px; }
.col-md-4 { width: 33.333333%; }
.col-md-5 { width: 41.666667%; }
.col-md-6 { width: 50%; }
.col-md-7 { width: 58.333333%; }
.col-md-8 { width: 66.666667%; }
.col-md-12 { width: 100%; }

/* ---- 2. Immagine + testo ------------------------------------------------ */
.ssHeadlineSize2 { font-size: 24px; }
@media (min-width: 768px) {
  /* Il nome della classe dice dove sta l'immagine, qualunque sia l'ordine nel
     markup: a sinistra con elScreenshot_right, a destra con elScreenshot_left.
     Il testo lascia 15 px verso l'immagine, se la pagina non scrive il suo
     padding in linea. */
  .elScreenshot_right .elScreenshot_image { float: left; }
  .elScreenshot_right .elScreenshot_text { float: right; }
  .elScreenshot_right .elScreenshot_text_padding { padding-left: 15px; }
  .elScreenshot_left .elScreenshot_image { float: right; text-align: right; }
  .elScreenshot_left .elScreenshot_text { float: left; }
  .elScreenshot_left .elScreenshot_text_padding { padding-right: 15px; }
}
/* Foto tonda con bordo bianco (avatar della testimonianza) */
.img-circle { border-radius: 50%; }
.thumbnailImage { border: 3px solid var(--white); }

/* ---- 3. Video ----------------------------------------------------------- */
/* Senza skin la cornice e' nuda; le skin 2 (Life Style Business) e 3 aggiungono
   padding 8 px, bordo 1 px (3 sotto) e angoli di 5 px. La skin 7 e' nuda. */
.elVideoWrapper { padding: 0; border-width: 0; border-radius: 0; background-color: transparent; }
.elVideoSkin2,
.elVideoSkin3 { padding: 8px; border-width: 1px 1px 3px; border-radius: 5px; }
.elVideoSkin2 { background-color: var(--white); }
.elVideoSkin3 { background-color: rgb(23, 92, 141); }
.elVideo { border-radius: 0; }
.elVideoSkin2 .elVideo,
.elVideoSkin3 .elVideo { border-radius: 5px; }
/* Il lettore ha le proporzioni scritte negli attributi width e height
   dell'iframe; dove il browser non legge attr() resta il 16:9 */
.elVideo { aspect-ratio: auto; }
.elVideo iframe {
  aspect-ratio: 16 / 9;
  aspect-ratio: attr(width type(<number>)) / attr(height type(<number>));
}

/* ---- 4. Condivisione (social-likes) --------------------------------------
   Misurato sull'originale (burningtax.com, a 1280 px): il blocco mostrato ha margine -7 px su tutti i lati, i
   pulsanti hanno margine 7 px e padding 0.56/9.8/2.52/25 px su riga da 21 px (24 px d'altezza). Il margine
   negativo si fonde con quello dell'elSharing e porta il blocco 7 px piu' su. Nell'originale lo script ricostruisce
   il blocco "Live" a partire dal codice di base; qui si usa la copia gia' pronta ("Preview"). Colori: ipotesi.
   Google+ non esiste piu'. */
.socialLikesPreview {
  margin: -7px;
  line-height: 21px;
}
.social-likes__widget {
  display: inline-block;
  margin: 7px;
  vertical-align: middle;
}
.social-likes__button {
  display: inline-block;
  padding: 0.56px 9.8px 2.52px 25px;
  border-radius: 3px;
  background: var(--line);
  cursor: pointer;
}
.socialLikesLive,
.social-likes__widget_plusone { display: none; }

/* ---- 5. Conto alla rovescia (jquery.countdown) ----------------------------
   Dall'impronta si conoscono solo x, larghezza e altezza del contenitore
   (125 px a desktop, 78 a mobile): cerchi pieni con numero, etichetta sotto.
   Colori e dimensioni interne sono un'ipotesi, non misurata. */
.countdown-row { display: block; }
.countdown-section {
  display: inline-block;
  margin: 0 10px;
  text-align: center;
}
.countdown-amount,
.countdown-period { display: block; }
.countdown-amount { width: 90px; height: 90px; margin: 0 auto; font-size: 40px; line-height: 90px; }
.countdown-period { margin-top: 5px; line-height: 30px; text-transform: uppercase; }
.cdStyleCircleFill .countdown-amount { border-radius: 50%; }
.cdYellow .countdown-amount { background-color: #f8b93e; }
.cdLabelBold .countdown-period { font-weight: 700; }
.cdLabelBlack .countdown-period { color: #000; }

/* ---- 6. Mobile (< 768 px) ----------------------------------------------- */
@media (max-width: 767px) {
  .padding40H { padding-left: 5px; padding-right: 5px; }

  /* !important indispensabile: padding e margini di sezione interna, riga e
     colonna interna sono scritti in linea nella pagina e a mobile vanno tolti
     (una pagina scrive in linea anche width: 80% sulla riga) */
  .containerInner { padding-left: 0 !important; padding-right: 0 !important; }
  .row { width: auto !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
  .col-md-4,
  .col-md-5,
  .col-md-6,
  .col-md-7,
  .col-md-8,
  .col-md-12 { float: none; width: 100%; padding-left: 0; padding-right: 0; }
  .col-inner { padding-left: 10px !important; padding-right: 10px !important; }

  .elSharing.elAlign_left { text-align: center; }
  .countdown-amount { width: 54px; height: 54px; font-size: 24px; line-height: 54px; }
  .countdown-period { margin-top: 4px; line-height: 20px; }
}

/* ---- Blocchi speciali: margine superiore ---------------------------------
   Il margine superiore di questi blocchi e' sempre scritto in linea dalla pagina (30, 20, 15 px...) e la classe
   elMargin0 azzera il resto. */
.elCountdownEvergreen,
.elCustomJs,
.elSharing,
.elVideoSkin3 { margin-top: 0; }

/* ==========================================================================
   Estensione "contenitori": sezioni (container, midContainer, midWideContainer,
   wideContainer, fullContainer), sezione interna (containerInner), riga (row),
   colonne (col-md-*, innerContent, col-inner), imbottitura, angoli, ombra e
   sfondo, piu' la cornice delle immagini con tema (el_media_themeN).
   Viene dopo la base e ne sostituisce le regole di layout, che nascevano
   da una sola pagina.
   Struttura del markup (uguale in tutte le pagine):
     .container > .containerInner > .row > .col-md-N.innerContent > .col-inner
   Ordine: 1 sezione - 2 sezione interna - 3 riga - 4 colonne - 5 imbottitura -
   6 bordo - 7 angoli - 8 ombra - 9 sfondo - 10 mobile (< 768 px) - 11 immagini.
   Il colore di bordo e di sfondo, l'imbottitura verticale e gli scarti di una
   singola sezione arrivano in linea dalla pagina: qui restano i valori di
   partenza della classe.
   ========================================================================== */

/* ---- 1. Sezione ----------------------------------------------------------- */
/* La larghezza comprende il bordo (border-box): 720 / 960 / 1120 px a 1280,
   sempre centrata. L'imbottitura laterale e' 0 anche con padding40H. */
.container {
  box-sizing: border-box;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}
/* :not(.containerModal) alza la specificita' sopra .midContainer:not(.noBorder)
   della base (800 px) senza toccare la finestra a comparsa, che ha la sua
   larghezza nella base */
.midContainer:not(.containerModal) { max-width: 720px; }
.midWideContainer { max-width: 960px; }
.wideContainer { max-width: 1120px; }
/* A tutta pagina: la larghezza utile sta nella sezione interna */
.fullContainer { width: 100%; max-width: none; box-sizing: border-box; }

/* ---- 2. Sezione interna --------------------------------------------------- */
.containerInner { margin-left: 0; margin-right: 0; padding-left: 20px; padding-right: 20px; }
/* Nella sezione a tutta pagina: 1170 px centrati, senza imbottitura */
.fullContainer > .containerInner { max-width: 1170px; margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; }

/* ---- 3. Riga -------------------------------------------------------------- */
/* Margine laterale -15 px (la riga sporge di 15 px dai 20 px della sezione
   interna) e imbottitura di 10 px su ogni lato. P0-* e noTopMargin sulla riga
   non cambiano nulla: l'imbottitura resta 10 px. */
.row { margin-left: -15px; margin-right: -15px; padding: 10px; }

/* ---- 4. Colonne ----------------------------------------------------------- */
/* Affiancate senza spazio: N/12 della larghezza utile della riga, con 15 px
   di imbottitura per lato. col-inner non ha imbottitura propria. */
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-12 { float: left; margin-left: 0; margin-right: 0; padding-left: 15px; padding-right: 15px; }
.col-md-4 { width: 33.333333%; }
.col-md-5 { width: 41.666667%; }
.col-md-6 { width: 50%; }
.col-md-7 { width: 58.333333%; }
.col-md-8 { width: 66.666667%; }
.col-md-12 { width: 100%; }
.col-inner { padding-left: 0; padding-right: 0; }

/* ---- 5. Imbottitura ------------------------------------------------------- */
/* L'imbottitura verticale delle sezioni e' sempre scritta in linea dalla
   pagina: la classe dice il valore di partenza. Senza regola qui: padding40H e
   P0-* (nessun effetto misurabile: sezione a 0 px laterali, riga a 10 px),
   noTopMargin ed emptySection (margini gia' a 0, nessuna misura cambia). */
.padding20-top { padding-top: 20px; }
.padding20-bottom { padding-bottom: 20px; }

/* ---- 6. Bordo ------------------------------------------------------------- */
/* Nessuna regola qui: borderSolid / borderDotted / borderDashed (stile),
   borderNpx (spessore), noBorder, borderLightTop e borderLightBottom di
   la base riproducono le misure. borderLight non ha regola: il colore e'
   sempre scritto in linea. */

/* ---- 7. Angoli ------------------------------------------------------------ */
/* radiusN dice il raggio, cornersAll lo applica a tutti gli angoli,
   cornersBottom solo a quelli in basso */
.radius0 { --radius: 0px; }
.radius5 { --radius: 5px; }
.radius10 { --radius: 10px; }
.radius25 { --radius: 25px; }
.radius50 { --radius: 50px; }
.cornersAll { border-radius: var(--radius, 0); }
.cornersBottom { border-radius: 0 0 var(--radius, 0) var(--radius, 0); }

/* ---- 8. Ombra ------------------------------------------------------------- */
/* Non misurabile dalle impronte: scala coerente con shadow30 della base
   (sfocatura = 0,4 x il numero), "inner" all'interno */
.shadow5 { box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.shadow10 { box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
.shadow20 { box-shadow: 0 2px 8px rgba(0, 0, 0, .3); }
.shadow40 { box-shadow: 0 4px 16px rgba(0, 0, 0, .3); }
.shadow20inner { box-shadow: inset 0 0 8px rgba(0, 0, 0, .3); }
.shadow40inner { box-shadow: inset 0 0 16px rgba(0, 0, 0, .3); }

/* ---- 9. Sfondo ------------------------------------------------------------ */
/* Immagine e colore sono in linea; la classe dice come stendere l'immagine */
.bgCover { background-size: cover; background-position: center; }
.bgRepeat { background-repeat: repeat; }
.bgNoRepeat { background-repeat: no-repeat; }

/* ---- 10. Mobile (< 768 px) ------------------------------------------------ */
/* Sezione interna senza imbottitura, riga con 5 px per lato, colonne
   impilate (le successive alla prima staccate di 20 px). !important
   indispensabile su imbottitura, margini laterali e larghezza di sezione
   interna, riga e colonna interna: molte pagine li scrivono in linea per il
   desktop e a 390 px non contano. */
@media (max-width: 767px) {
  .containerInner { padding-left: 0 !important; padding-right: 0 !important; }
  .row { width: auto !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 5px !important; padding-right: 5px !important; }
  .col-md-4,
  .col-md-5,
  .col-md-6,
  .col-md-7,
  .col-md-8,
  .col-md-12 { float: none; width: 100%; padding-left: 0; padding-right: 0; }
  .col_right { margin-top: 20px; }
  .col-inner { padding-left: 10px !important; padding-right: 10px !important; }
}

/* ---- 11. Immagini con tema (el_media_themeN) ------------------------------ */
/* Cornice dell'immagine: imbottitura, angoli e sfondo. Classi senza regola in
   base.css: l'imbottitura allunga l'immagine (10 px) e sposta tutto cio' che
   sta sotto. */
.el_media_theme3 { padding: 5px; border-radius: 5px; background-color: #fff; }
.el_media_theme6 { padding: 1px; background-color: #fff; }
.el_media_theme9 { padding: 5px; border-radius: 200px; background-color: rgba(0, 0, 0, .15); }
.el_media_theme10 { padding: 5px; border-radius: 10px; background-color: rgba(0, 0, 0, .05); }