@charset "utf-8";
/* CSS Document */



ul li.MenuMobile {
    list-style: none;
    margin-left:-50px;
}


/* -----------------Menu nella versione mobile-----------------*/

.active {
    color: #FFFFFF /* primary super-lightcolor*/;
}

.active-dropdown {
    color: #FFFFFF /* primary super-lightcolor*/;
}

nav {
    height: 100%;
    background-color: #ffffff; /* primary lightcolor* /* sfondo menu mobile*/
    position: absolute;
    width: 100%;
    margin-top: 54px;
    visibility: hidden;
    left: 0px;
    overflow: auto; /* permette lo scroll quando il menu è aperto*/
}

    nav ul {
    }

        nav ul li.MenuMobile a.active {
            padding: 16px 0 16px 10px;
            display: block;
            color: #000000 !important;
            font-size: 16px;
            transition: background-color 0.3s ease;
            border-bottom: solid 1px #cccccc;
            text-align:center;
        }

nav ul li.MenuMobile ul li {
    padding: 16px 0 16px 10px;
    list-style:none;
}

    nav ul li.MenuMobile ul li a {
        list-style: none;
        border-bottom: solid 1px #cccccc;
        color: #000000 !important;
        padding: 16px 0 16px 0px;
        border: hidden;
    }


/* ----------------- div bar per l'attivazione del menu ------------------ */

#bar {
    background-color: #000000 /* primary color*/;
    height: 54px;
    width: 100%;
    z-index: 2;
    box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.4);
}

    #bar #logo {
        float: right;
        margin-right: 12px;
    }

/* ----------------- Hamburger animation ------------------ */

#hamburger {
    display: none;
}

.menuicon {
    position: absolute;
    height: 36px;
    width: 36px;
    z-index: 3;
}

    .menuicon span {
        display: block;
        top: 20px;
        width: 20px;
        height: 2px;
        left: 8px;
        background-color: #000000;
        position: relative;
        border-radius: 20px;
        transition-duration: 0;
        transition-delay: .1s;
    }

        .menuicon span::after, .menuicon span::before {
            display: block;
            content: '';
            position: absolute;
            width: 20px;
            height: 2px;
            background-color: #000000;
            border-radius: 20px;
            transition-duration: .1s;
            -webkit-transition-delay: .1s, 0;
            transition-delay: .1s, 0;
        }

        .menuicon span::before {
            margin-top: -10px;
        }

        .menuicon span::after {
            margin-top: 10px;
        }

#hamburger:checked ~ .menuicon span {
    background-color: rgba(0,0,0,0);
}

    #hamburger:checked ~ .menuicon span::before {
        margin-top: 0px;
        -webkit-transition-delay: 0, .3s;
        -moz-transition-delay: 0, .3s;
        -ms-transition-delay: 0,.3s;
        -o-transition-delay: 0, .3s;
        transition-delay: 0, .3s;
    }

    #hamburger:checked ~ .menuicon span::after {
        margin-top: 0px;
        -webkit-transition-delay: 0, .3s;
        -moz-transition-delay: 0, .3s;
        -ms-transition-delay: 0,.3s;
        -o-transition-delay: 0, .3s;
        transition-delay: 0, .3s;
    }

    #hamburger:checked ~ .menuicon span::before {
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    #hamburger:checked ~ .menuicon span::after {
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

/* ----------------- menu animation faccio apparire il menu ------------------ */

#hamburger:checked ~ .menu-visibility {
    visibility: visible;
}