/* 
    Created on : 25 set 2026, 10:06:49
    Author     : aless
*/

/* ============================================================
   VERSIONE MOBILE PER mtbmagazine.it
   Compatibile con vecchi Safari / vecchi iPhone
   ============================================================ */



#hamburgerTabs {
    display: none;
}

/* --- STILE RESPONSIVE (Smartphone e Tablet < 768px) --- */
@media (max-width: 768px) , (orientation: portrait)  {

    .noMobile {
        display: none;
    }

    html, body {
        width: 100vw;
    }
    
    body {
        overflow-x: hidden;
        background: #F0F1E5;
        padding: 0;
        margin: 0;
    }

    body * {
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }

    #iMario {
        position: static;
        width: 100vw;
        display: block;
        margin: auto;
    }

    label[for=ricerca] {
        font-size: 4vw;
    }



    /* ------------------------------------------------------------
       HEADER / BANNER
       ------------------------------------------------------------ */
    #bannerSito {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: auto !important;
        cursor: default !important;
        margin: 0px !important;
    }

    /* ------------------------------------------------------------
       SCRITTE LATERALI (SX / DX)
       Le nascondo: su mobile occupano spazio e non servono
       ------------------------------------------------------------ */
    #scrittaLateraleSx,
    #scrittaLateraleDx {
        display: none !important;
    }

    /* ------------------------------------------------------------
       PANNELLI flottanti
       ------------------------------------------------------------ */
    #pannello,
    #dCalendario {
        position: static !important;
        width: 100% !important;
        margin: 10px 0;
    }

    /* ------------------------------------------------------------
       CONTENITORE inbody
       ------------------------------------------------------------ */
    body #inbody {
        display: block !important;
        padding: 0px !important;
        margin: 0px !important;
        width: 100% !important;
        height: fit-content;
    }

    /* Rotazione simbolo */
    .pRotazione {
        display: none !important;
    }

    /* ------------------------------------------------------------
       DATA / ORA
       ------------------------------------------------------------ */
    #dDataOra {
        font-size: 14px;
        margin-bottom: 10px;
    }

    /* ------------------------------------------------------------
       URL SITO
       ------------------------------------------------------------ */
    #urlSito {
        display: none;
    }

    /* ------------------------------------------------------------
       UTENTE REGISTRATO
       ------------------------------------------------------------ */
    #utenteRegistrato {
        font-size: 14px;
        text-align: center;
        margin-bottom: 10px;
    }

    /* ------------------------------------------------------------
       RICERCA
       ------------------------------------------------------------ */
    #ricercaBis {
        position: static !important;
        width: 100% !important;
        text-align: center;
        margin: 15px 0;
    }

    #ricercaBis input[type="text"] {
        width: 64vw !important;
        font-size: 4vw !important;
        height: 6vw !important;
        padding: 8px;
    }

    /* ------------------------------------------------------------
       TABS (jquery-ui)
       ------------------------------------------------------------ */


    #hamburgerTabs {
        --dimHamb: 2.5em;
        display: block;
        background: #fdd657;

        position: absolute;
        top: 12px;
        right: 12px;
        width: var(--dimHamb);
        height: var(--dimHamb);

        border: none;
        font-size: 2em;

        cursor: pointer;
        z-index: 9999999999999999;

    }

    #tabs ul#tabs-menu li a {
        font-size: 4vw;
    }

    #tabs ul#tabs-menu li {
        height: 8vw;
    }

    #tabs ul#tabs-menu {
        height: 10vw;
    }

    /* Menu aperto: mostra gli altri tab */
    #tabs ul#tabs-menu.aperto {
        height: fit-content;
    }

    #tabs #tabs-menu.aperto li {
        display: block;
        margin: 8px 0;
    }

    #tabs #tabs-menu.aperto li:first-child {
        /* il primo rimane visibile  */
        /*display: block;*/
    }

    #tabs-menu.aperto a {
        font-size: 18px;
        color: #333;
        text-decoration: none;
    }

    #tabs li.ui-tabs-selected.ui-state-active {
        display: block !important;
    }

    /*************************/
    /* prima tab Mario barbero
    /*************************/

    body .colonna {
        display: inline-block;
        vertical-align: top;
        width: 46vw;
        position: relative;
        margin: 0;
        padding: 0;
    }

    body #colonna1, body #colonna2 {
        left: unset;
        top: unset;
    }

    body .riquadriSezione  {
        width: 44vw !important;
        height: 11em !important;
        min-height: 11em !important;
        margin: 1em 0 !important;
        padding: 10px !important;
    }

    .riquadriSezione .scrittina {
        position: absolute;
        bottom: 2px;
        width:100%;
        text-align: center;
        font-size: 2vw;
        font-style: normal;
    }


    .riquadriSezione > a {
        font-size: 4.5vw !important;
        white-space: nowrap;
    }

    .riquadriSezione p {
        font-size: 2.5vw !important;
        height: 2.6em !important;
    }        


    body #tabs .tab {
        height: max-content
    }

    body #tabs {
        width: 100vw !important;
        height: max-content !important;
        position: relative;
        top: 8px;
        left: 0px;
        bottom: 0px;
        right: 0px;
        overflow: hidden;
    }

    body #tabs ul.ui-tabs-nav li {
        display: none;
        width: 70vw;
        max-width: 70vw;
    }

    body #tabs ul.ui-tabs-nav li:first-child {
        display: block;
    }

    body .ui-tabs-nav {
        position: relative;
        /*display: flex;
        flex-wrap: wrap;
        */
    }

    body .ui-tabs-nav li {
        width: 50%;
        text-align: center;
    }

    /*************************/
    /* le schede per il mobile: una sotto l'altra e visibile quella che scegli */

    .tab {
        display: static;
        display: none;
        width: 98vw;
    }
    
    
    body #tabs-2, body #tabs-3, #tabs-4, #tabs-5 {
        padding: 0px !important;
        font-size: 4vw;
    }

    /*****************************/
    /* archivio
    /*****************************/
    body #tabs-2 div {
        float: none !important;
        display: inline-block;
        width: 90vw !important;
        vertical-align: top;
        margin: auto !important;
    }
    
    body #tabs-2 div p {
        width: 100%;
        line-height: 1.1em;
    }
    
    /* ------------------------------------------------------------
       IMMAGINI GENERALI
       ------------------------------------------------------------ */
    img {
        max-width: 100% !important;
        height: auto !important;
    }


    /************************************/
    /*  infoRivista
    /************************************/
    body #infoVisite {
        position: relative;
    }

    body #cornice {
        position: relative;
    }

    body #miniHelp {
        position: relative;
    }

    body #lSigla {
        position: relative;
    }

    body #lCalendario {
        position: relative;
    }

    body #sliderNumPub {
        position: relative;
    }

    body #toolbarCD {
        position: relative;
    }

    body #dStatus {
        position: relative;
    }











    /* ------------------------------------------------------------
       TABELLE (molte pagine del sito ne hanno)
       ------------------------------------------------------------ */
    table {
        width: 100% !important;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    td, th {
        font-size: 15px;
        padding: 6px;
    }

    
    /****************************/
    /* niente fuochi d'artificio 
    /****************************/
    
    #bod {
        display: none;
    }
    
}