/* ------------------------------------------------ MENU DESK ------------------------------------------------ */
#menuDesk {
    position: fixed;
    width: 100%;
    padding: 0;
    z-index: 998;
    transition: transform .4s cubic-bezier(.215, .61, .355, 1);

    &.nascosto {
        transform: translateY(-100%);
    }

    .container-fluid {
        padding: 0;
    }

    .barra-uno {
        background: white;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 3em;

        .logo {
            width: 250px;

            img {
                width: 175px;
            }
        }

        .hub {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            a {
                font-size: 1em;
                color: white;
                background: var(--blu);
                padding: 5px 20px;
                text-transform: uppercase;
                margin: 0 10px;
                transition: all .3s cubic-bezier(.215, .61, .355, 1);

                &:hover {
                    background: var(--verde);
                    color: var(--blu);
                    text-decoration: none;
                }
            }

            .burger {
                background: var(--verde);
                height: 50px;
                width: 50px;
                display: block;
                margin-left: 10px;
                border-radius: 100%;
                display: flex;
                flex-wrap: wrap;
                align-content: center;
                padding: 10px;
                cursor: pointer;
                transition: all .3s cubic-bezier(.215, .61, .355, 1);


                span {
                    display: block;
                    width: 100%;
                    height: 2px;
                    background: var(--blu);
                    margin: 1px;
                    transition: all .3s cubic-bezier(.215, .61, .355, 1);
                }

                &:hover {
                    background: var(--blu);

                    span {
                        background: var(--verde);
                    }
                }

                &.attivo {
                    background: var(--blu);

                    span {
                        background: var(--verde);

                        &:nth-child(1),
                        &:nth-child(3) {
                            opacity: 0;
                        }
                    }
                }
            }
        }
    }

    .barra-due {
        background: var(--verde);
        padding: 0 3em;
        margin-top: 0;
        display: flex;
        justify-content: space-between;
        overflow: hidden;
        max-height: 0;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: all .4s cubic-bezier(.215, .61, .355, 1);

        &.aperto {
            padding: 20px 3em;
            margin-top: 0;
            max-height: 200px;
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        a.link-menu {
            text-transform: uppercase;
            color: var(--blu);
            transition: all .3s cubic-bezier(.215, .61, .355, 1);
            font-size: 1.1em;

            &:hover {
                text-decoration: none;
                color: white
            }
        }
    }
}

#menuDesk.condomini {

    .barra-uno {
        background: var(--verde);

        .logo {

            width: 250px;

            img {
                width: 250px;
            }
        }

        .burger {
            background: white;
        }

        a {
            &:hover {
                background: white;
            }
        }
    }
}

#menuDesk.aziende {

    .barra-uno {
        background: var(--blu);

        .logo {

            width: 250px;

            img {
                width: 250px;
            }
        }

        a {
            background: var(--verde);
        }

        .burger {
            background: white;

            &:hover {
                background: var(--verde);

                span {
                    background: var(--blu);
                }
            }
        }

        a {
            &:hover {
                background: white;
            }
        }
    }
}

/* ------------------------------------------------ MENU SM ------------------------------------------------ */

#menuSm {
    position: fixed;
    width: 100%;
    z-index: 998;
    background: white;
    padding: 15px 0 0;
    transition: transform .4s cubic-bezier(.215, .61, .355, 1);

    &.nascosto {
        transform: translateY(-100%);
    }

    .container-fluid {
        padding: 0;
    }

    .barra-uno {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 4% 4%;
    }

    img {
        width: 65px;
    }

    .links {
        a {
            margin: 0 5px;
            text-transform: uppercase;
            padding: 5px 10px;
            background: var(--blu);
        }
    }

    .burger {
        background: var(--verde);
        display: block;
        width: 50px;
        height: 50px;
        border-radius: 100%;
        display: flex;
        flex-wrap: wrap;
        align-content: center;
        padding: 0 10px;
        cursor: pointer;
        transition: all .3s cubic-bezier(.215, .61, .355, 1);

        span {
            display: block;
            width: 100%;
            height: 2px;
            margin: 1px 0;
            background: var(--blu);
            transition: all .3s cubic-bezier(.215, .61, .355, 1);
        }

        &.attivo {
            background: var(--blu);

            span {
                background: var(--verde);

                &:nth-child(1),
                &:nth-child(3) {
                    opacity: 0;
                }
            }
        }
    }

    .barra-due {
        background: white;
        padding: 0 8%;
        overflow: hidden;
        max-height: 0;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: all .4s cubic-bezier(.215, .61, .355, 1);

        &.aperto {
            padding: 4% 8%;
            max-height: 100vh;
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        a.link-menu {
            display: block;
            color: var(--blu);
            text-transform: uppercase;
            font-size: 1.2em;
            margin: 5px 0;
        }
    }
}

#menuSm.condomini {

    padding: 0;

    .barra-uno {
        background: var(--verde);
        padding-top: 20px;
        padding-bottom: 20px;
    }

    img {
        width: 200px;
    }

    .burger {
        background: white;
    }

    .go-home {
        background: var(--blu);
        margin-top: 20px!important;
        width: fit-content;
        color: white!important;
        padding: 10px 20px;
    }
}

#menuSm.aziende {

    padding: 0;

    .barra-uno {
        background: var(--blu);
        padding-top: 20px;
        padding-bottom: 20px;

        .links a {
            background: var(--verde);
            color: var(--blu);
        }
    }

    img {
        width: 200px;
    }

    .burger {
        background: white;
    }

    .go-home {
        background: var(--blu);
        margin-top: 20px!important;
        width: fit-content;
        color: white!important;
        padding: 10px 20px;
    }
}