.elementor-widget-loop-grid .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-loop-grid .elementor-pagination{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-loop-grid .e-load-more-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-1101 .elementor-element.elementor-element-48dc0a5{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-48dc0a5 > .elementor-widget-container{background-color:#FFFFFF;padding:20px 20px 20px 20px;border-style:dashed;border-color:#F75A4F;border-radius:45px 45px 45px 45px;}.elementor-1101 .elementor-element.elementor-element-2a22a66{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-2a22a66 > .elementor-widget-container{background-color:#FFFFFF;padding:20px 20px 20px 20px;border-style:dashed;border-color:#F75A4F;border-radius:45px 45px 45px 45px;}.elementor-1101 .elementor-element.elementor-element-15791e9{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-15791e9 > .elementor-widget-container{background-color:#FFFFFF;padding:20px 20px 20px 20px;border-style:dashed;border-color:#F75A4F;border-radius:45px 45px 45px 45px;}.elementor-1101 .elementor-element.elementor-element-368bdc3{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-368bdc3 > .elementor-widget-container{background-color:#FFFFFF;padding:20px 20px 20px 20px;border-style:dashed;border-color:#F75A4F;border-radius:45px 45px 45px 45px;}.elementor-1101 .elementor-element.elementor-element-dad272f{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-dad272f > .elementor-widget-container{background-color:#FFFFFF;padding:20px 20px 20px 20px;border-style:dashed;border-color:#F75A4F;border-radius:45px 45px 45px 45px;}.elementor-1101 .elementor-element.elementor-element-57a9e41{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-57a9e41 > .elementor-widget-container{background-color:#FFFFFF;padding:20px 20px 20px 20px;border-style:dashed;border-color:#F75A4F;border-radius:45px 45px 45px 45px;}.elementor-1101 .elementor-element.elementor-element-c325133{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-c325133 > .elementor-widget-container{background-color:#FFFFFF;padding:20px 20px 20px 20px;border-style:dashed;border-color:#F75A4F;border-radius:45px 45px 45px 45px;}.elementor-1101 .elementor-element.elementor-element-cadc2e1{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-cadc2e1 > .elementor-widget-container{background-color:#FFFFFF;padding:20px 20px 20px 20px;border-style:dashed;border-color:#F75A4F;border-radius:45px 45px 45px 45px;}.elementor-1101 .elementor-element.elementor-element-1a0c4b4{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-1a0c4b4 > .elementor-widget-container{background-color:#FFFFFF;padding:20px 20px 20px 20px;border-style:dashed;border-color:#F75A4F;border-radius:45px 45px 45px 45px;}.elementor-1101 .elementor-element.elementor-element-069a6bb{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-069a6bb > .elementor-widget-container{background-color:#FFFFFF;padding:20px 20px 20px 20px;border-style:dashed;border-color:#F75A4F;border-radius:45px 45px 45px 45px;}.elementor-1101 .elementor-element.elementor-element-680d509{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-680d509 > .elementor-widget-container{background-color:#FFFFFF;padding:20px 20px 20px 20px;border-style:dashed;border-color:#F75A4F;border-radius:45px 45px 45px 45px;}.elementor-1101 .elementor-element.elementor-element-c7f1c5f{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-c7f1c5f > .elementor-widget-container{background-color:#FFFFFF;padding:20px 20px 20px 20px;border-style:dashed;border-color:#F75A4F;border-radius:45px 45px 45px 45px;}.elementor-1101 .elementor-element.elementor-element-bcc58c9{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-bcc58c9 > .elementor-widget-container{background-color:#FFFFFF;padding:20px 20px 20px 20px;border-style:dashed;border-color:#F75A4F;border-radius:45px 45px 45px 45px;}.elementor-1101 .elementor-element.elementor-element-f2cbf9e{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-f2cbf9e > .elementor-widget-container{background-color:#FFFFFF;padding:20px 20px 20px 20px;border-style:dashed;border-color:#F75A4F;border-radius:45px 45px 45px 45px;}.elementor-1101 .elementor-element.elementor-element-2a86335{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-2a86335 > .elementor-widget-container{background-color:#FFFFFF;padding:20px 20px 20px 20px;border-style:dashed;border-color:#F75A4F;border-radius:45px 45px 45px 45px;}.elementor-1101 .elementor-element.elementor-element-b0f312c{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-b0f312c > .elementor-widget-container{background-color:#FFFFFF;padding:20px 20px 20px 20px;border-style:dashed;border-color:#F75A4F;border-radius:45px 45px 45px 45px;}.elementor-1101 .elementor-element.elementor-element-fe0d824{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-fe0d824 > .elementor-widget-container{background-color:#FFFFFF;padding:20px 20px 20px 20px;border-style:dashed;border-color:#F75A4F;border-radius:45px 45px 45px 45px;}.elementor-1101 .elementor-element.elementor-element-f07b155{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-f07b155 > .elementor-widget-container{background-color:#FFFFFF;padding:20px 20px 20px 20px;border-style:dashed;border-color:#F75A4F;border-radius:45px 45px 45px 45px;}.elementor-1101 .elementor-element.elementor-element-ddfb8e4{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-ddfb8e4 > .elementor-widget-container{background-color:#FFFFFF;padding:20px 20px 20px 20px;border-style:dashed;border-color:#F75A4F;border-radius:45px 45px 45px 45px;}.elementor-1101 .elementor-element.elementor-element-9d744bc{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-9d744bc > .elementor-widget-container{background-color:#FFFFFF;padding:20px 20px 20px 20px;border-style:dashed;border-color:#F75A4F;border-radius:45px 45px 45px 45px;}.elementor-1101 .elementor-element.elementor-element-e5b694e{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-e5b694e > .elementor-widget-container{background-color:#FFFFFF;padding:20px 20px 20px 20px;border-style:dashed;border-color:#F75A4F;border-radius:45px 45px 45px 45px;}.elementor-1101 .elementor-element.elementor-element-b38d9a1{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-b38d9a1 > .elementor-widget-container{background-color:#FFFFFF;padding:20px 20px 20px 20px;border-style:dashed;border-color:#F75A4F;border-radius:45px 45px 45px 45px;}.elementor-1101 .elementor-element.elementor-element-9af87f0{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-9af87f0 > .elementor-widget-container{background-color:#FFFFFF;padding:20px 20px 20px 20px;border-style:dashed;border-color:#F75A4F;border-radius:45px 45px 45px 45px;}.elementor-1101 .elementor-element.elementor-element-1cc3c67{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-1cc3c67 > .elementor-widget-container{background-color:#FFFFFF;padding:20px 20px 20px 20px;border-style:dashed;border-color:#F75A4F;border-radius:45px 45px 45px 45px;}.elementor-1101 .elementor-element.elementor-element-8d4cc6c{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-8d4cc6c > .elementor-widget-container{background-color:#FFFFFF;padding:20px 20px 20px 20px;border-style:dashed;border-color:#F75A4F;border-radius:45px 45px 45px 45px;}.elementor-1101 .elementor-element.elementor-element-99a55ac{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-99a55ac > .elementor-widget-container{background-color:#FFFFFF;padding:20px 20px 20px 20px;border-style:dashed;border-color:#F75A4F;border-radius:45px 45px 45px 45px;}.elementor-1101 .elementor-element.elementor-element-0125856{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-0125856 > .elementor-widget-container{background-color:#FFFFFF;padding:20px 20px 20px 20px;border-style:dashed;border-color:#F75A4F;border-radius:45px 45px 45px 45px;}.elementor-1101 .elementor-element.elementor-element-13bca1a{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-13bca1a > .elementor-widget-container{background-color:#FFFFFF;padding:20px 20px 20px 20px;border-style:dashed;border-color:#F75A4F;border-radius:45px 45px 45px 45px;}.elementor-1101 .elementor-element.elementor-element-4a1dde7{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-4a1dde7 > .elementor-widget-container{background-color:#FFFFFF;padding:20px 20px 20px 20px;border-style:dashed;border-color:#F75A4F;border-radius:45px 45px 45px 45px;}.elementor-1101 .elementor-element.elementor-element-41a2063{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-41a2063 > .elementor-widget-container{background-color:#FFFFFF;padding:20px 20px 20px 20px;border-style:dashed;border-color:#F75A4F;border-radius:45px 45px 45px 45px;}.elementor-1101 .elementor-element.elementor-element-472f98f{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-472f98f > .elementor-widget-container{background-color:#FFFFFF;padding:20px 20px 20px 20px;border-style:dashed;border-color:#F75A4F;border-radius:45px 45px 45px 45px;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-1101 .elementor-element.elementor-element-48dc0a5{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-2a22a66{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-15791e9{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-368bdc3{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-dad272f{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-57a9e41{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-c325133{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-cadc2e1{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-1a0c4b4{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-069a6bb{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-680d509{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-c7f1c5f{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-bcc58c9{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-f2cbf9e{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-2a86335{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-b0f312c{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-fe0d824{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-f07b155{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-ddfb8e4{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-9d744bc{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-e5b694e{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-b38d9a1{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-9af87f0{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-1cc3c67{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-8d4cc6c{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-99a55ac{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-0125856{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-13bca1a{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-4a1dde7{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-41a2063{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-472f98f{--grid-columns:1;}}@media(max-width:767px){.elementor-1101 .elementor-element.elementor-element-48dc0a5{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-2a22a66{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-15791e9{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-368bdc3{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-dad272f{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-57a9e41{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-c325133{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-cadc2e1{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-1a0c4b4{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-069a6bb{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-680d509{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-c7f1c5f{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-bcc58c9{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-f2cbf9e{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-2a86335{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-b0f312c{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-fe0d824{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-f07b155{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-ddfb8e4{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-9d744bc{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-e5b694e{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-b38d9a1{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-9af87f0{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-1cc3c67{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-8d4cc6c{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-99a55ac{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-0125856{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-13bca1a{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-4a1dde7{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-41a2063{--grid-columns:1;}.elementor-1101 .elementor-element.elementor-element-472f98f{--grid-columns:1;}}/* Start custom CSS *//* =========================================================
   QUID+ TIMELINE SCROLLABILE
   ========================================================= */

.quid-age-content {

    /* Colore selezionato di default */
    --quid-active-color: #f16068;
    --quid-active-bg: rgba(241, 96, 104, 0.14);

}


/* =========================================================
   CONTENITORE SCROLL
   ========================================================= */

.quid-timeline-scroll {

    width: 100%;

    overflow-x: auto;
    overflow-y: visible;

    scroll-behavior: smooth;

    box-sizing: border-box;

    padding:
        15px
        0
        20px;

    /*
     * Permette uno scroll naturale
     * anche da smartphone/tablet
     */
    -webkit-overflow-scrolling: touch;

    /*
     * I punti tendono ad allinearsi
     * in maniera naturale durante lo scroll
     */
    scroll-snap-type: x proximity;
}


/* =========================================================
   TIMELINE
   ========================================================= */

.quid-timeline {

    /*
     * Larghezza di ogni punto.
     *
     * Su desktop mostriamo circa
     * 3-4 punti contemporaneamente.
     */
    --quid-age-image-width: clamp(160px, 18vw, 220px);
    --quid-item-width: clamp(270px, 30vw, 360px);

    position: relative;

    display: flex;

    align-items: stretch;

    width: max-content;
    min-width: 100%;

    padding:
        25px
        0
        30px;

    box-sizing: border-box;
}


/* Font */
.quid-timeline,
.quid-timeline * {

    font-family:
        "Radikal W01 Regular",
        sans-serif !important;

}


/* =========================================================
   IMMAGINI INIZIO FASCIA D'ETÀ
   ========================================================= */

.quid-timeline-age-image {

    flex:
        0
        0
        var(--quid-age-image-width);

    width:
        var(--quid-age-image-width);

    min-width:
        var(--quid-age-image-width);

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        center;

    /* Questo hai verificato che ti allinea bene le immagini */
    padding-bottom: 
        10px;
        
    box-sizing:
        border-box;

    position:
        relative;

    z-index:
        2;

    scroll-snap-align:
        center;
}


/* =========================================================
   ETICHETTE ETÀ SOTTO LE IMMAGINI
   ========================================================= */

/*
 * Colore associato a ogni fascia d'età
 */

#eta-0-5 {
    --age-color: #f75a4f;
}

#eta-6-11 {
    --age-color: #ec9a18;
}

#eta-12-17 {
    --age-color: #f3d249;
}

#eta-18-23 {
    --age-color: #c1cd39;
}

#eta-24-35 {
    --age-color: #7ebfa3;
}

#eta-36-47 {
    --age-color: #9fd9db;
}

#eta-4-plus {
    --age-color: #0f7fa5;
}

#eta-6-plus {
    --age-color: #a679b9;
}


/* Label */
.quid-timeline-age-label {

    position:
        absolute;

    left:
        50%;

    transform:
        translateX(-50%);

    bottom:
        -35px;

    white-space:
        nowrap;

    font-family:
        "laca-text",
        sans-serif !important;

    font-size:
        26px;

    line-height:
        1;

    font-weight:
        700 !important;

    text-transform:
        uppercase;

    color:
        var(--age-color);

    letter-spacing:
        0.5px;

    z-index:
        4;

}


/* Immagine vera e propria */
.quid-timeline-age-image img {

    display:
        block;

    width:
        auto;

    max-width:
        180px;

    height:
        auto;

    max-height:
        900px;

    object-fit:
        contain;

    position:
        relative;

    z-index:
        3;

}


/* =========================================================
   SINGOLO ELEMENTO
   ========================================================= */

.quid-timeline-item {

    flex:
        0
        0
        var(--quid-item-width);

    width:
        var(--quid-item-width);

    min-width:
        var(--quid-item-width);

    display: grid !important;

    grid-template-rows:
        minmax(100px, auto)
        48px
        60px;

    grid-template-columns:
        1fr;

    justify-items:
        center;

    position:
        relative;

    z-index:
        2;

    scroll-snap-align:
        center;

}


/*
 * Lo stato active NON deve modificare
 * in alcun modo il layout.
 */
.quid-timeline
.quid-timeline-item.quid-active {

    display: grid !important;

    grid-template-rows:
        minmax(100px, auto)
        48px
        60px;

    grid-template-columns:
        1fr;

}


/* =========================================================
   COLORI
   ========================================================= */

/*
 * COME AGGIUNGERE UN NUOVO COLORE
 *
 * Per aggiungere un nuovo colore alla timeline:
 *
 * 1. Duplica uno dei blocchi colore qui sotto.
 *
 * 2. Cambia il nome della classe.
 *    Esempio:
 *
 *    .quid-timeline-item.item-purple
 *
 * 3. Imposta:
 *
 *    --item-color
 *    = colore principale del punto, del bordo,
 *      del connettore e del quadretto.
 *
 *    --item-hover-bg
 *    = colore di sfondo leggero usato
 *      durante hover e stato active.
 *
 * Esempio:
 *
 * .quid-timeline-item.item-purple {
 *
 *     --item-color:
 *         #956daf;
 *
 *     --item-hover-bg:
 *         rgba(149, 109, 175, 0.14);
 *
 * }
 *
 * 4. Nell'HTML assegna la nuova classe
 *    al punto della timeline desiderato.
 *
 * Esempio:
 *
 * class="quid-timeline-item item-purple"
 *
 * Non è necessario modificare il JavaScript:
 * il colore viene letto automaticamente
 * dalle variabili --item-color e --item-hover-bg.
 */


.quid-timeline-item.item-red {

    --item-color:
        #f16068;

    --item-hover-bg:
        rgba(241, 96, 104, 0.14);

}


.quid-timeline-item.item-orange {

    --item-color:
        #eb8d2d;

    --item-hover-bg:
        rgba(236, 154, 24, 0.14);

}


.quid-timeline-item.item-blue {

    --item-color:
        #0089bf;

    --item-hover-bg:
        rgba(0, 137, 191, 0.14);

}

.quid-timeline-item.item-purple {

    --item-color:
        #946bae;

    --item-hover-bg:
        rgba(148, 107, 174, 0.14);

}


/* =========================================================
   CARD TESTO
   ========================================================= */

.quid-timeline-card {

    grid-row:
        1;

    grid-column:
        1;

    align-self:
        end;

    justify-self:
        center;

    width:
        fit-content;

    max-width:
        270px;

    min-width:
        150px;

    min-height:
        70px;

    padding:
        14px
        18px;

    box-sizing:
        border-box;

    border:
        3px
        dashed
        var(--item-color);

    border-radius:
        30px;

    background-color:
        #fff;

    text-align:
        center;

    font-size:
        16px;

    line-height:
        1.35;

    white-space:
        normal;

    overflow-wrap:
        break-word;

    cursor:
        pointer;

    transform:
        scale(1);

    transition:
        background-color
        0.2s
        ease,
        transform
        0.2s
        ease;

}


/* Hover */
.quid-timeline-item:hover
.quid-timeline-card {

    background-color:
        var(--item-hover-bg);

    transform:
        scale(1.10);

}


/* Selezionato */
.quid-timeline-item.quid-active
.quid-timeline-card {

    background-color:
        var(--item-hover-bg);

    transform:
        scale(1.10);

}


/* =========================================================
   CTA NUVOLA - VERSIONE GRAFICA
   ========================================================= */

.quid-timeline-card::after {

    content:
        "scopri di più";

    display:
        block;

    margin-top:
        10px;

    font-size:
        14px;

    line-height:
        1;

    font-style:
        italic;

    text-decoration:
        underline;

    color:
        var(--item-color);

}


/* =========================================================
   COLLEGAMENTO VERTICALE
   ========================================================= */

.quid-timeline-connector {

    grid-row:
        2;

    grid-column:
        1;

    justify-self:
        center;

    width:
        0;

    height:
        100%;

    border-left:
        3px
        dashed
        var(--item-color);

    box-sizing:
        border-box;

}


/* =========================================================
   QUADRETTO
   ========================================================= */

.quid-timeline-node {

    grid-row:
        3;

    grid-column:
        1;

    align-self:
        start;

    justify-self:
        center;

    width:
        60px;

    height:
        60px;

    border-radius:
        10px;

    background-color:
        var(--item-color);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    position:
        relative;

    z-index:
        3;

    box-sizing:
        border-box;

}


/* =========================================================
   LINEA ORIZZONTALE
   ========================================================= */

.quid-timeline::before {

    content:
        "";

    position:
        absolute;

    /*
     * La linea parte dal centro
     * del primo quadretto
     * e termina al centro dell'ultimo.
     */
    left:
        calc(
            var(--quid-age-image-width) / 2
        );

    right:
        calc(
            var(--quid-item-width) / 2
        );

    bottom:
        60px;

    border-top:
        3px
        dashed
        #555;

    z-index:
        1;

}


/* =========================================================
   ICONE NEI QUADRETTI
   ========================================================= */

.quid-timeline-node img,
.quid-timeline-node svg {

    width:
        38px;

    height:
        38px;

    object-fit:
        contain;

    position:
        relative;

    z-index:
        4;

}


/* =========================================================
   CONTENUTI ELEMENTOR
   ========================================================= */

.quid-detail {

    display:
        none !important;

}


.quid-detail.quid-active {

    display:
        flex !important;

}


/* =========================================================
   COLORI DINAMICI CONTENUTI
   ========================================================= */

/*
 * Queste classi sono FACOLTATIVE.
 *
 * Puoi assegnarle agli elementi Elementor
 * che vuoi far cambiare colore insieme
 * alla timeline.
 */


/* Background leggero */
.quid-dynamic-background {

    background-color:
        var(--quid-active-bg) !important;

}


/* Background pieno */
.quid-dynamic-background-solid {

    background-color:
        var(--quid-active-color) !important;

}


/* Testo */
.quid-dynamic-text {

    color:
        var(--quid-active-color) !important;

}


/* Bordo */
.quid-dynamic-border {

    border-color:
        var(--quid-active-color) !important;

}


/* =========================================================
   PRIME DUE FASI - SEMI PIÙ GRANDI
   ========================================================= */

#eta-0-5 img,
#eta-6-11 img {

    transform:
        translateY(30px)
        scale(2.5);

    transform-origin:
        center bottom;

}


/* =========================================================
   MOBILE
   ========================================================= */

@media
(max-width: 767px) {

    .quid-timeline {

        --quid-item-width:
            260px;

        --quid-age-image-width:
            150px;

    }


    .quid-timeline-age-image img {

        max-width:
            180px;

        max-height:
            180px;

    }


    #eta-0-5 img,
    #eta-6-11 img {

        transform:
            translateY(10px)
            scale(2);

    }

}/* End custom CSS */