@media (max-width: 768px) {
    .menu-top {
        display: none;
    }
    .menu-top-mobile {
        display: flex;
        background-color: inherit;
        position: fixed;
        height: 60px;
        width: var(--with_10);
    }

    #menuToggle {
        position: fixed;
        top: 35px;
        z-index: 10;
        align-self: flex-start;
    }

    #menuToggle input {
        display: block;
        width: 40px;
        height: 32px;
        position: absolute;
        top: -7px;
        left: -5px;
        cursor: pointer;
        opacity: 0; /* hide this */
        z-index: 2; /* and place it over the hamburger */

        -webkit-touch-callout: none;
           
    }

    #menuToggle span {
        display: block;
        width: 33px;
        height: 4px;
        margin-bottom: 5px;
        position: relative;
        background: #000;
        border-radius: 3px;
        z-index: 1;
        transform-origin: 4px 0px;
        transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease;
    }

    #menuToggle span:first-child {
        transform-origin: 0% 0%;
    }

    #menuToggle span:nth-last-child(2) {
        transform-origin: 0% 100%;
    }

        /*
         * Transform all the slices of hamburger
         * into a crossmark.
         */
    #menuToggle input:checked ~ span {
        opacity: 1;
        transform: rotate(45deg) translate(-2px, -1px);
        background: #232323;
    }

            /*
 * But let's hide the middle one.
 */
    #menuToggle input:checked ~ span:nth-last-child(3) {
        opacity: 0;
        transform: rotate(0deg) scale(0.2, 0.2);
    }

            /*
 * Ohyeah and the last one should go the other direction
 */
    #menuToggle input:checked ~ span:nth-last-child(2) {
        transform: rotate(-45deg) translate(0, -1px);
    }

    /*
* Make this absolute positioned
* at the top left of the screen
*/
    #menu {
        margin: -100px 0 0 -60px;
        padding: 50px;
        padding-top: 125px;
        background: #fff;
        list-style-type: none;
        -webkit-font-smoothing: antialiased;
        height:1500px;
        /* to stop flickering of text in safari */
        transform-origin: 0% 0%;
        transform: translate(-200%, 0);
        transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
        position:fixed;
    }
   

    #menu li {
     /*   padding: 10px 0;
        font-size: 22px;*/
    }

    /*
         * And let's slide it in from the left
         */
    #menuToggle input:checked ~ ul {
        transform: none;
    }


    .onclick-menu:focus {
        /* clicking on label should toggle the menu */
        pointer-events: none;
    }

    .onclick-menu:focus .onclick-menu-content {
        /*  opacity is 1 in opened state (see below) */
        opacity: 1;
        visibility: visible;
        display: inherit;
        /* don't let pointer-events affect descendant elements */
        pointer-events: auto;
    }

    .onclick-menu-content {
        /* use opacity to fake immediate toggle */
        display: none;
        opacity: 0;
        visibility: hidden;
        transition: visibility 0.5s;
        flex-direction: column;
        margin-left: 48px;
        margin-bottom:20px;
    }

    .onclick-menu-content li {
        list-style: none;
    }

    .onclick-menu {
        color: var(--text);
        font-family: var(--font-family-rubik);
        font-size: var(--font-size-m);
        font-style: normal;
        font-weight: 700;
        display: flex;
        flex-direction: column;
        width:175px;
    }
    .internal-menu {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 180px;
        position: relative;
        cursor: pointer;
    }

    .elementoSottomenuFirst {
        margin-top: 5px;
    }
    .elementoSottomenu {
        margin-top: 25px;
    }

    .elementoSottomenu label {
        left: 10px;
        color: var(--text);
        font-family: var(--font-family-rubik);
        font-size: var(--font-size-m);
        font-style: normal;
        font-weight: 700;
        text-transform: none;
        cursor: pointer;
        word-wrap: break-word;
    }

    .elementoSottomenuFirst label {
        left: 10px;
        color: var(--text);
        font-family: var(--font-family-rubik);
        font-size: var(--font-size-m);
        font-style: normal;
        font-weight: 700;
        text-transform: none;
        cursor: pointer;
        word-wrap: break-word;
    }
    .nosottomenumenu {
        color: var(--text);
        font-family: var(--font-family-rubik);
        font-size: var(--font-size-m);
        font-style: normal;
        font-weight: 700;
        cursor: pointer;
        display:flex;
        align-items:center;
    }
    .specialmenu {
        cursor: pointer;
        display: flex;
        align-items: center;
        color: var(--blue-ribbon);
        font-family: var(--font-family-rubik-medium);
        font-size: var(--font-size-m);
        font-style: normal;
        font-weight: 700;
        text-decoration: none;
        margin-left: 15px;
        margin-top: 20px;
    }

    .image-menu-top {
        height: 24px;
        width: 24px;
    }

    image-menu-big-top {
        height: 35px;
        width: 35px;
    }
    .menuDiscesaTop {
        height: 24px;
        width: 24px;
        position:absolute;
        right:5px;
    }
    .iconMenuTop {
        align-items: center;
        display: flex;
        height: 48px;
        justify-content: center;
        width: 48px;
    }

    .menutoggle-topRight {
        display: flex;
        position: relative;
        top: 10px;
        z-index: 1;
        width:100%;
    }
    .logo {
        position:absolute;
        right:6px;
    }
}