/* ==========================================================
   ASSOCIAZIONE TANDEM
   Personalizzazione del template Cassiopeia
   ========================================================== */
/* ==========================================================
   1. BOOTSTRAP ICONS
   Libreria installata localmente
   E FONTS NUNITO E MONSERRAT
   ========================================================== */

@import url("/templates/cassiopeia/bootstrap-icons/bootstrap-icons.min.css");
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Nunito:wght@300;400;500;600;700&display=swap');


/* ==========================================================
   2. IMPOSTAZIONI GENERALI
   ========================================================== */

/* Evita lo scorrimento orizzontale causato dalle fasce full-width */

html,
body {
    overflow-x: clip;
    font-family: 'Nunito', sans-serif; 
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
}

/* La pagina occupa almeno tutta l'altezza dello schermo */

body.site {
    min-height: 100vh;
    display:flex;
    flex-direction:column;  
}
.site-grid{
  flex:1;
}


/* ==========================================================
   3. TOP BAR ROSSA
   Social a sinistra, contatti a destra
   ========================================================== */

/* Contenitore Joomla della posizione topbar */

.container-topbar {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    background-color: #c5162b;
}

.container-topbar .mod-custom {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Barra principale */

.tandem-topbar {
    box-sizing: border-box;
    width: 100%;
    min-height: 42px;
    padding: 7px 24px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    color: #ffffff;
    background-color: #c5162b;
}

/* Gruppi social e contatti */

.tandem-social,
.tandem-contact {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

.tandem-social {
    justify-content: flex-start;
    gap: 22px;
}

.tandem-contact {
    justify-content: flex-end;
    gap: 26px;
}

/* Collegamenti della top bar */

.tandem-topbar a {
    width: auto;
    height: auto;

    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;

    margin: 0;
    padding: 0;

    color: #ffffff !important;
    background: transparent;
    border: 0;
    box-shadow: none;

    font-size: 14px;
    line-height: 1.3;
    text-decoration: none !important;
    white-space: nowrap;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

/* Icone della top bar */

.tandem-topbar .bi {
    width: auto;
    height: auto;

    display: inline-block;
    flex: 0 0 auto;

    color: #ffffff !important;
    font-family: "bootstrap-icons" !important;
    font-size: 16px;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
}

/* Icone social leggermente più grandi */

.tandem-social .bi {
    font-size: 18px;
}

/* Effetto al passaggio del mouse */

.tandem-topbar a:hover,
.tandem-topbar a:focus {
    color: #ffffff !important;
    opacity: 0.75;
    transform: translateY(-1px);
}

/* ==========================================================
   4. HEADER E MENU PRINCIPALE GRIGIO
   ========================================================== */

/* Altezza barra menu*/
.container-header {
    background: #4d4b4b !important;
    background-image: none !important;
}

/* Fascia grigia del menu */

.container-below-top,
.below-top {
    background-color: #4d4b4b;
    border-top: 1px solid #4d4b4b;
    border-bottom: 1px solid #4d4b4b;
}

/* Elenco del menu */

.below-top .mod-menu,
.container-below-top .mod-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    margin: 0;
    padding: 0;

    list-style: none;
}

/* Singole voci */

.below-top .mod-menu > li,
.container-below-top .mod-menu > li {
    display: flex;
    align-items: center;
}

/* Collegamenti */

.below-top .mod-menu > li > a,
.container-below-top .mod-menu > li > a {
    display: block;
    padding: 6px 14px;

    color: #ffffff !important;
    background: transparent !important;

    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    line-height: 1.3;
    text-decoration: none;
    text-transform: uppercase;

    border: 0 !important;
    border-right: 1px solid #666464 !important;
    box-shadow: none !important;

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

/* Nessun separatore dopo l'ultima voce */

.below-top .mod-menu > li:last-child > a,
.container-below-top .mod-menu > li:last-child > a {
    border-right: 0 !important;
}

/* Hover e voce attiva */

.below-top .mod-menu > li > a:hover,
.below-top .mod-menu > li > a:focus,
.below-top .mod-menu > li.current > a,
.below-top .mod-menu > li.active > a,
.container-below-top .mod-menu > li > a:hover,
.container-below-top .mod-menu > li > a:focus,
.container-below-top .mod-menu > li.current > a,
.container-below-top .mod-menu > li.active > a {
  
/* colore menu al passaggio del mouse*/
    color: #f9b233 !important;
    background: transparent !important;
}
/* Logo */
.navbar-brand img {
    max-height: 80px;
    width: auto;
}

/* Header */
.container-header {
    min-height: 90px;
}

.container-header .container-nav {
    min-height: 90px;
    display: flex;
    align-items: center;
}


/* ==========================================================
   FOOTER TANDEM
   Bottom-B: Contatti e Connettiti
   Footer: menu e copyright
   ========================================================== */


/* ==========================================================
   1. BOTTOM-B A TUTTA LARGHEZZA
   ========================================================== */

.container-bottom-b {
    position: relative;
    box-sizing: border-box;

    width: auto !important;
    max-width: none !important;

    margin-right: calc(50% - 50vw) !important;
    margin-left: calc(50% - 50vw) !important;

    padding: 22px max(20px, calc((100vw - 1200px) / 2));

    color: #ffffff;
    background: #454545 !important;
    background-image: none !important;

    border: 0;
}


/* ==========================================================
   2. DUE COLONNE UGUALI
   ========================================================== */

.container-bottom-b > .grid-child {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto !important;

    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: start;
    gap: 40px;
}

.container-bottom-b > .grid-child > * {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;

    margin: 0 !important;
    padding: 0 20px !important;

    text-align: center;
}


/* ==========================================================
   3. PULIZIA DEI MODULI CASSIOPEIA
   ========================================================== */

.container-bottom-b .moduletable,
.container-bottom-b .card,
.container-bottom-b .card-body,
.container-bottom-b .tandem-footer-module {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff;
    text-align: center;

    background: transparent !important;
    background-image: none !important;

    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.container-bottom-b .card-header {
    margin: 0;
    padding: 0;

    color: #ffffff;
    background: transparent !important;
    border: 0 !important;
}


/* ==========================================================
   4. TITOLI CONTATTI E CONNETTITI
   ========================================================== */

.container-bottom-b h3,
.container-bottom-b h4,
.container-bottom-b .card-header,
.container-bottom-b .module-title {
    width: 100%;
    margin: 0 0 13px !important;

    color: #ffffff !important;

    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.7px;
    text-align: center;
    text-transform: uppercase;
}


/* ==========================================================
   5. MODULO CONTATTI
   Gruppo centrato, righe allineate a sinistra
   ========================================================== */

.tandem-footer-contact {
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    color: #ffffff;
    text-align: left !important;
}

.tandem-footer-contact p {
    width: 100%;
    margin: 0 0 7px !important;

    display: flex;
    align-items: center;
    justify-content: flex-start !important;
    gap: 10px;

    color: #ffffff;
    font-size: 14px;
    line-height: 1.4;
    text-align: left !important;
}

.tandem-footer-contact a {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start !important;
    gap: 10px;

    color: #ffffff !important;
    text-align: left !important;
    text-decoration: none !important;
}

.tandem-footer-contact .bi {
    width: 20px;
    min-width: 20px;
    flex: 0 0 20px;

    color: #ffffff !important;
    font-size: 16px;
    line-height: 1;
    text-align: center;
}


/* ==========================================================
   6. MODULO CONNETTITI
   ========================================================== */

.tandem-footer-social {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 24px;

    text-align: center;
}

.tandem-footer-social a {
    width: auto !important;
    height: auto !important;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;

    color: #ffffff !important;
    font-size: 14px;
    text-decoration: none !important;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.tandem-footer-social .bi {
    width: auto !important;
    height: auto !important;

    color: #ffffff !important;
    font-size: 27px;
    line-height: 1;
}


/* ==========================================================
   7. EFFETTI DEI COLLEGAMENTI
   ========================================================== */

.container-bottom-b a:hover,
.container-bottom-b a:focus {
    color: #f9b233 !important;   /*colore del testo*/
}

.tandem-footer-social a:hover,
.tandem-footer-social a:focus {
    transform: translateY(-1px);
}

.container-bottom-b a:hover .bi,
.container-bottom-b a:focus .bi {
    color: #f9b233 !important;  /*colore delle icone*/
}


/* ==========================================================
   8. FOOTER INFERIORE
   Menu e copyright
   ========================================================== */

footer.footer,
.footer,
.container-footer {
    box-sizing: border-box;
    width: 100% !important;
    max-width: none !important;

    margin: 0;
    padding: 9px 20px !important;

    color: #ffffff !important;

    background: #626262 !important;
    background-color: #626262 !important;
    background-image: none !important;

    border-top: 1px solid #707070;
}


/* Contenitore interno */

footer.footer .grid-child,
.footer .grid-child,
.container-footer .grid-child {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background: transparent !important;
    background-image: none !important;
}


/* Rimuove eventuali riquadri */

footer.footer .moduletable,
footer.footer .card,
footer.footer .card-body,
footer.footer nav,
.footer .moduletable,
.footer .card,
.footer .card-body,
.footer nav {
    width: 100%;
    margin: 0;
    padding: 0;

    color: #ffffff !important;
    text-align: center;

    background: transparent !important;
    background-image: none !important;

    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}


/* ==========================================================
   9. MENU ORIZZONTALE DEL FOOTER
   ========================================================== */

footer.footer ul.mod-menu,
.footer ul.mod-menu,
.footer ul.menu-horizontal {
    width: 100% !important;
    margin: 0 0 6px !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;

    list-style: none !important;
}

footer.footer ul.mod-menu > li,
.footer ul.mod-menu > li,
.footer ul.menu-horizontal > li {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;

    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
}


/* Separatore */

.footer ul.mod-menu > li:not(:last-child)::after,
.footer ul.menu-horizontal > li:not(:last-child)::after {
    content: "•";
    display: inline-block;

    margin: 0 3px;
    color: #b8b8b8;
    font-size: 10px;
}


/* Collegamenti */

footer.footer ul.mod-menu > li > a,
.footer ul.mod-menu > li > a,
.footer ul.menu-horizontal > li > a {
    display: inline-block !important;
    width: auto !important;
    padding: 3px 10px !important;

    color: #ffffff !important;
    background: transparent !important;

    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.25px;
    text-align: center;
    text-decoration: none !important;
    text-transform: uppercase;

    border: 0 !important;
    box-shadow: none !important;

    transition: color 0.2s ease;
}

.footer ul.mod-menu > li > a:hover,
.footer ul.mod-menu > li > a:focus,
.footer ul.mod-menu > li.active > a,
.footer ul.mod-menu > li.current > a,
.footer ul.menu-horizontal > li > a:hover,
.footer ul.menu-horizontal > li > a:focus,
.footer ul.menu-horizontal > li.active > a,
.footer ul.menu-horizontal > li.current > a {
    color: #f9b233 !important;
    background: transparent !important;
}


/* ==========================================================
   10. COPYRIGHT
   ========================================================== */

.tandem-copyright {
    box-sizing: border-box;
    width: 100%;
    padding-top: 7px;
    padding-bottom: 2px;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;

    color: #e0e0e0 !important;
    font-size: 11px;
    line-height: 1.3;
    text-align: center;

    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.tandem-copyright span,
.tandem-copyright .bi {
    color: #e0e0e0 !important;
}


/* ==========================================================
   11. TABLET E SMARTPHONE
   ========================================================== */

@media (max-width: 991px) {
  
    .below-top .mod-menu,
    .container-below-top .mod-menu {
        justify-content: flex-start;
    }

    .navbar-toggler {
        display: block !important;
    }
  

    .container-bottom-b {
        padding: 20px 15px;
    }

    .container-bottom-b > .grid-child {
        grid-template-columns: 1fr !important;
        gap: 26px;
    }

    .container-bottom-b > .grid-child > * {
        padding: 0 10px !important;
    }

    .tandem-footer-contact {
        width: fit-content;
        max-width: 100%;
    }

    .tandem-footer-social {
        gap: 20px;
    }
}


/* ==========================================================
   12. TELEFONI PICCOLI
   ========================================================== */

@media (max-width: 600px) {

      .topbar .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .topbar .contact-item {
        margin: 2px 0;
    }
  

    footer.footer,
    .footer,
    .container-footer {
        padding: 9px 15px !important;
    }

    footer.footer ul.mod-menu,
    .footer ul.mod-menu,
    .footer ul.menu-horizontal {
        flex-direction: column !important;
        gap: 2px;
    }

    .footer ul.mod-menu > li:not(:last-child)::after,
    .footer ul.menu-horizontal > li:not(:last-child)::after {
        display: none;
    }

    footer.footer ul.mod-menu > li > a,
    .footer ul.mod-menu > li > a,
    .footer ul.menu-horizontal > li > a {
        padding: 4px 10px !important;
    }

    .tandem-footer-contact p,
    .tandem-footer-contact a {
        max-width: 100%;
        overflow-wrap: anywhere;
    }
}
/* ==========================
   13 TITOLO PAGINA
   ========================== */

.titolo-pagina {
    text-align: center;
    margin: 30px 0 50px;
}

.titolo-pagina h1 {
    font-family: 'Nunito', sans-serif;
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: clamp(1px, 0.4vw, 4px);
    color: #444;
    margin-bottom: 15px;
    line-height: 1.2;
}

.sottolineatura {
    width: clamp(80px, 10vw, 150px);
    height: 4px;
    background: #b8b8b8;
    margin: 0 auto;
    border-radius: 2px;
}
/* ================================================
   14 BOX CATEGORIE
   ================================================*/

.moduletable,
.card,
.mod-card,
.sidebar-card,
.container-component .card {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.tandem-boxes{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;
    margin:30px 0;
}
         /*Dimensione dei box*/
.tandem-box{
    flex:1 1 180px;
    /*padding: 20px 50px*/
    min-height:80px;
    max-width:200px;

    display:flex;
    align-items:center;
    justify-content:center;

    text-decoration:none !important;
    color:#fff !important;

    border-radius:4px;
  
    font-size:clamp(1rem, 2vw, 1.4rem);
    font-weight:700;
  
    text-align:center;
    text-transform:uppercase;
    letter-spacing:1px;

    box-shadow:0 3px 10px rgba(0,0,0,.15);

    transition:all .3s ease;
}

.tandem-box:hover{
    transform:translateY(-4px);
    box-shadow:0 8px 20px rgba(0,0,0,.2);
    color:#fff !important;
}

.primaria{
    background:#EA5B0C;
}

.secondaria{
    background:#F9B233;
}

.superiori{
    background:#95C11F;
}

.universita{
    background:#00A19A;
}

.famiglia{
    background:#BE1622;
}

@media (max-width:768px){
    .tandem-box{
        flex:1 1 calc(50% - 12px);
    }
}

@media (max-width:480px){
    .tandem-box{
        flex:1 1 100%;
    }
}
/* ==========================================
   OFF CANVAS MOBILE MENU
   ========================================== */

/* nascosto su desktop */
.tandem-mobile-toggle,
.tandem-offcanvas,
.tandem-overlay{
    display:none;
}

/* tablet e smartphone */
@media (max-width:991px){

    /* nasconde il menu classico */
    .container-below-top .mod-menu{
        display:none !important;
    }

    /* hamburger */
    .tandem-mobile-toggle{
        display:flex;
        justify-content:flex-end;
        align-items:center;

        padding:12px 20px;

        background:#4d4b4b;
        color:#fff;

        font-size:30px;
        cursor:pointer;
    }

    /* sfondo scuro */
    .tandem-overlay{
        display:block;

        position:fixed;
        inset:0;

        background:rgba(0,0,0,.5);

        opacity:0;
        visibility:hidden;

        transition:.3s;
        z-index:9998;
    }

    .tandem-overlay.active{
        opacity:1;
        visibility:visible;
    }

    /* pannello laterale */
    .tandem-offcanvas{
        display:block;

        position:fixed;
        top:0;
        right:-320px;

        width:300px;
        max-width:85%;

        height:100vh;

        background:#4d4b4b;

        transition:right .3s ease;

        z-index:9999;

        box-shadow:-5px 0 20px rgba(0,0,0,.3);
    }

    .tandem-offcanvas.active{
        right:0;
    }

    /* chiusura */
    .tandem-close{
        display:flex;
        justify-content:flex-end;

        padding:20px;

        color:#fff;
        font-size:24px;
        cursor:pointer;
    }

    /* menu */
    .tandem-offcanvas ul{
        margin:0;
        padding:0;
        list-style:none;
    }

    .tandem-offcanvas li{
        margin:0;
        padding:0;
    }

    .tandem-offcanvas a{
        display:block;

        padding:16px 24px;

        color:#fff !important;

        text-decoration:none;

        font-size:15px;
        font-weight:600;
        text-transform:uppercase;

        border-bottom:1px solid #666464;

        transition:.2s;
    }

    .tandem-offcanvas a:hover{
        color:#f9b233 !important;
        background:rgba(255,255,255,.05);
    }
}
/* ==========================================
   PAGINA LAVORI IN CORSO TANDEM
   ========================================== */

.tandem-coming-soon{
    max-width:900px;
    margin:60px auto;
    padding:40px 20px;
    text-align:center;
}

/* MARGHERITA */

.flower-container{
    display:flex;
    justify-content:center;
    margin-bottom:50px;
}

.flower{
    position:relative;
    width:180px;
    height:180px;
    animation: rotateFlower 20s linear infinite;
}

.petal{
    position:absolute;
    width:85px;
    height:85px;
    border-radius:50%;
    opacity:0.95;
}

.petal-1{
    background:#EA5B0C;
    top:0;
    left:47px;
}

.petal-2{
    background:#F9B233;
    top:35px;
    right:0;
}

.petal-3{
    background:#95C11F;
    bottom:0;
    right:25px;
}

.petal-4{
    background:#00A19A;
    bottom:0;
    left:25px;
}

.petal-5{
    background:#BE1622;
    top:35px;
    left:0;
}

.center{
    position:absolute;
    width:70px;
    height:70px;
    background:#ffffff;
    border:6px solid #e6e6e6;
    border-radius:50%;
    top:55px;
    left:55px;
    box-shadow:0 0 15px rgba(0,0,0,0.08);
}

/* TESTI */

.tandem-coming-soon h1{
    font-family:'Nunito', sans-serif;
    font-size:clamp(2rem,5vw,3.8rem);
    color:#1f4e79;
    font-weight:800;
    margin-bottom:20px;
}

.tandem-coming-soon .subtitle{
    font-size:1.4rem;
    font-weight:700;
    color:#555;
}

.tandem-coming-soon p{
    font-size:1.1rem;
    line-height:1.8;
    color:#666;
    margin-bottom:15px;
}

/* PULSANTE */

.btn-home{
    display:inline-block;
    margin-top:25px;
    padding:14px 32px;
    background:#1f4e79;
    color:#fff !important;
    text-decoration:none;
    border-radius:10px;
    font-weight:700;
    transition:all .3s ease;
}

.btn-home:hover{
    background:#163957;
    transform:translateY(-2px);
}

/* ANIMAZIONE */

@keyframes rotateFlower{

    0%{
        transform:rotate(0deg);
    }

    50%{
        transform:rotate(8deg);
    }

    100%{
        transform:rotate(0deg);
    }

}

/* MOBILE */

@media (max-width:768px){

    .flower{
        width:140px;
        height:140px;
    }

    .petal{
        width:65px;
        height:65px;
    }

    .petal-1{
        left:37px;
    }

    .center{
        width:55px;
        height:55px;
        top:43px;
        left:43px;
    }
}


/* ==================================================
   SLIDER HOME TANDEM
   ================================================== */

.tandem-slider {
    position: relative;
    width: 100%;
    height: clamp(150px, 35vw, 300px);
    overflow: hidden;
    margin: 0 0 10px 0;
    background: none;
}

.tandem-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 2s ease-in-out;
}

.tandem-slide.active {
    opacity: 1;
    z-index: 1;
}

.tandem-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
}

.tandem-prev,
.tandem-next,
.tandem-dots {
    display:none !important;
}

/* ==========================
   EFFETTI SLIDER TANDEM
   ========================== */

.effect-fade img{
    animation:none;
}

.effect-zoomin img{
    animation:zoomIn 7s linear forwards;
}

.effect-zoomout img{
    animation:zoomOut 7s linear forwards;
}

@keyframes zoomIn{
    from{
        transform:scale(1);
    }
    to{
        transform:scale(1.08);
    }
}

@keyframes zoomOut{
    from{
        transform:scale(1.08);
    }
    to{
        transform:scale(1);
    }
}

/* Tablet */

@media (max-width: 768px){

    .tandem-slider{
        height: 350px;
    }

    .tandem-prev,
    .tandem-next{
        width: 42px;
        height: 42px;
    }
}

/* Smartphone */

@media (max-width: 480px){

    .tandem-slider{
        height: 240px;
    }

    .tandem-prev,
    .tandem-next{
        width: 38px;
        height: 38px;
        font-size: 22px;
    }
}
/* ==========================
   TANDEM CALENDAR COMPACT
========================== */

.tandem-calendar-widget{
  
    max-width:200px;
    margin:0 auto 15px;
}

.tc-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:10px;
}

.tc-header h4{

    margin:0;
    font-size:1rem;
    font-weight:700;
}

.tc-nav{
    border:none;
    background:none;
    cursor:pointer;
    font-size:1rem;
}

.tc-weekdays{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    text-align:center;
    font-size:.75rem;
    margin-bottom:5px;
    color:#888;
}

.tc-grid{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:4px;
}

.tc-day{  
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:6px;
    background:#f7f7f7;
    font-size:.80rem;
}

.tc-event{
    background:#f4c430;
    color:white;
    font-weight:700;
}

.tc-events{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
    margin-top:20px;
}

.tc-card{
    background:white;
    padding:10px;
    border-left:3px solid #f4c430;
    border-radius:6px;
    box-shadow:0 1px 3px rgba(0,0,0,.05);
}

.tc-date{
    font-size:.75rem;
    color:#888;
    margin-bottom:4px;
}

.tc-card a{
    display:block;
    text-decoration:none;
    font-size:.85rem;
    font-weight:700;
    color:#333;
}

@media(max-width:768px){
    .tc-events{
        grid-template-columns:1fr;
    }
}
/* PERSONALIZZAZIONI FONT TITOLO */
h1 {
    font-size: clamp(2rem, 4vw, 2.8rem);
}

h2 {
    font-size: clamp(1.4rem, 3vw, 1.9rem);
}

h3 {
    font-size: clamp(1.2rem, 2vw, 1.4rem);
}

body {
    font-size: 0.95rem;
}
.module-title,
.card-header {
    text-align: center;
}
.container-below-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 20px;
}

/* Fiore */
.container-below-top::before{
    content:"";
    width:50px;
    height:50px;
    flex-shrink:0;

    background:url('/images/sistema/fiore_tandem.png') center center no-repeat;
    background-size:contain;
}

/* Menu a destra */
.container-below-top .mod-menu{
    justify-content:flex-end !important;
    width:100%;
}