@media screen and (max-width: 1012px) {
    
    /* HEADER */
    header h1 {
      display: none;
    }
  

    /* MENU */
    #menu {
        border-bottom: none;
        position: absolute;
        width: 100%; 
        top: 0;      
        left: 0;     
        padding: 1.5rem 1rem;
    }
    
    /* bottone apri - chiudi menu */
    #hamburger {
        margin-left: auto;
        display: flex;
        align-items: flex-end;
        /*height: 40px; cursor: pointer;*/
        background-color: transparent;
        text-decoration: underline;
        flex-direction: column;
        justify-content: space-evenly;
        padding:0 0.5em 0 0 ;
        filter: invert(100%); /* inverti i colori dell'immagine rendendola bianca TO-DO*/
    }
    #hamburger:hover{
        background-color: transparent;
    }
    #hamburger>img{
        height: 3em;
        color: white;
    }

    .nav-menu {
        position: absolute;
        top: 90px; 
        left: 0;
        right: 0;
        transform: scaleY(0);      
        z-index: 100;   
        transform-origin: top; 
        opacity: 0;        
        flex-direction: column;
        background-color: white;
        border: 3px solid var(--maincolor);
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        padding: 1em 0;
        box-shadow: 0 4px 10px var(--maincolor);         
        transition: transform 0.3s ease, opacity 0.3s ease;        
    }

    .nav-menu{
        border: 0.2em solid var(--maincolor);
        z-index: 99;
    }

    .nav-menu.active {
        transform: scaleY(1); 
        opacity: 1; 
    }

    .nav-item {
        margin: 10px 0;        
        background-color: transparent;        
    }

    .nav-link {
        padding: 10px 0;
        background-color: transparent; 
    }

    /*necessario per visualizzare il contenuto con menu aperto e js disabilitato*/
    #breadcrumb.aperto{
        margin-top: 20em; 
    }

    /* HOMEPAGE */
    .percorsi-top-container {
        grid-template-columns: 1fr; 
        gap: 1.5rem; 
        width: 100%; 
    }


    /* ACCEDI E REGISTRATI */
    #formcontent {
        padding: 1.5rem;
        margin: 1.5em auto;
        max-width: 95%;
    }

    #formcontent .styleInput {
        padding: 0.6rem;
        font-size: 0.9rem;
    }

    #formcontent .button {
        font-size: 1.2rem;
    }


    /* PAGINA PERCORSO */
    #main-percorso {
        display: flex;
        flex-direction: column;
        padding: 1rem;
    }

    .nomePercorso,
    .descrizionePercorso {
        text-align: left;
        
    }

    .carosello {
        max-width: 100%;
        
    }

    #mappa {
        width: 100%;
        
    }

    #mappa iframe{
        min-height: 18em;
    }

    .gpx-section {
        display: flex;
        flex-direction: column;
        gap: 0.5rem; 
        margin-top: 1em; 
        align-items: center;
    }

    /* Bottone ridotto */
    .gpx-section .button {
        width: 75%; 
        text-align: center;
    }

    .gpx-section details {
        width: 100%; 
        text-align: center;
    }

    summary {
        margin: 0 auto;
        font-weight: bold;
        cursor: pointer;
        text-decoration: underline;
    }

    details p {
        text-align: center; 
    }


    /* Recensioni */
    .recensioni {
        margin: auto;
        justify-content: center;
        padding: 1rem;
        margin-top: 0.2rem; 
    }

    .recensione {
        padding: 1rem;
        margin: 0.5rem 0;
    }

    footer {
        flex-direction: column;
        padding: 2%;
    }
    
    footer a{
        margin: auto;
        margin-bottom: 3%
    }

    /* USARE IL NAVIGATORE */
    .area-dispositivo{
        display: block;
    }
    .area-dispositivo video{
        /*width:auto;*/
        width: 100%;
        margin-top: 1.5em;          
        margin-bottom: 1.5em;
    }

    /*PAGINE ERRORI*/
    #mainErrore{
        margin: 1em;
        flex-direction: column;
    }
    #mainErrore img{
        align-self: center;
    }
    .testoErrore{
        margin-left: 0;
        margin-top: 2em;
        margin-bottom: 2em;
    }

    /*Tabella profilo e amministratore*/
    thead{
        display: none;
    }
    tr, th, td{
        display: block;
        text-align: center;
    }
    th, td{
        border: 1px var(--unvisitedlinkcolor) solid;
    }
    th{
        background-color: var(--sfondoTabelle);
    }
    
    td:not(.rimuovi-intestazione-mobile):before{
        content: attr(data-title) ": ";
    }
    th:before{
        content: attr(data-title) ": ";
    }
    .cella-voto{
        padding: 1em;
    }

    #main-profilo, #main-amministratore, #main-homepage, .contenitore-carte{
        padding-left: 1em;
        padding-right: 1em;
    }
}