.menu {
    float: left;
    margin: 0 1.5% 0 0;
    padding: 0;
}

    .menu ul {
        height: 50px;
        list-style: none outside none;
        margin: 0;
        padding: 0;
        float: left; /*only for secure button*/
    }

        .menu ul li {
            display: inline-block;
            -webkit-transition: all 0.4s ease;
            transition: all 0.4s ease;
        }

    .menu #li_home:hover {
        background-color: #fff;
    }

    .menu #li_home a:hover {
        color: #636363;
    }

    /*.menu li:first-child:hover a {
            color: #636363;
        }*/

    .menu #li_patient:hover {
        background-color: #01ABAA;
    }

    .menu #li_contact:hover {
        background-color: #F88E0F;
    }

    .menu #li_poste:hover {
        background-color:  #199900;
    }

    .menu #li_administration:hover {
        background-color: #D90073;
    }

    .menu #li_ca:hover {
        background-color: #765F89;
    }

    .menu #li_support:hover {
        background-color: #647687;
    }

    .menu .active a {
        color: #636363;
    }

        .menu .active a:hover {
            color: #fff;
        }

    .menu .active {
        background-color: #fff;
    }

    .menu ul li a {
        font-family: 'Michroma', Arial, sans-serif;
        color: #fff;
        display: inline-block;
        font-size: 12px;
        margin: 0;
        padding: 15px 15px 22px;
        text-decoration: none;
    }

@media only screen and (min-width: 1200px) {
    .menu ul li a {
        font-size: 14px;
    }
}

/*.menu .secure {
    background: url("/assets/images/icons/lock-26.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    display: block;
    float: right;
    height: 26px;
    margin: 10px 0 0 15px;
    width: 26px;
    opacity: 0.5;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

    .menu .secure:hover {
        opacity: 1;
    }*/

.menu ul li a:hover {
    /*text-decoration: underline;*/
}

.menu .menu-mobile {
    height: 50px;
    width: 50px;
    background-image: url("/assets/images/mobile.png");
    opacity: 0.5;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

    .menu .menu-mobile:hover {
        opacity: 1;
    }

@media only screen and (max-width: 940px) {
    /*@media only screen and (max-width: 768px) {*/

    .menu {
        margin-top: 50px;
        background-color: #0099CC;
        width: 100%;
        display: block;
        float: none;
    }

    .menu-mobile {
        position: absolute;
        right: 0;
        top: 0;
        cursor: pointer;
    }

    .menu .secure {
        position: absolute;
        right: 60px;
        top: 2px;
    }

    .menu ul {
        display: none;
        width: 100%;
        height: auto;
    }

        .menu ul li {
            width: 100%;
            background-color: #0099CC;
            cursor: pointer;
            height: 50px;
            border-top: 1px solid #fff;
        }

            .menu ul li a {
                width: 100%;
            }

    /*.menu .active {
        background-color: none;
        color: none;
    }*/
}

/*transition-duration: 1s; transition-property: height, width;*/