.nav {
    padding-bottom: 1.875rem;
    color: black;
    background-color: #e6e6e6;
    background-color: var(--color-grey-5);
    transform: translate3d(100%, 0, 0);
    transition: transform 500ms cubic-bezier(0.23, 0.99, 0.59, 0.98);
}

.nav.active {
    transform: translate3d(0, 0, 0);
    transition: transform 333ms cubic-bezier(0.23, 0.99, 0.59, 0.98);
}

.nav>.wrap>.block:first-child {
    margin-left: -0.9375rem;
}

.nav>.wrap>.searchbox-form {
    margin-top: 1.25rem;
    margin-left: 0.9375rem;
    margin-right: 0.9375rem;
    width: calc(100% - 1.875rem);
}




@media (min-width: 51.25em) {

    .nav,
    .nav.active {
        color: inherit;
        background-color: transparent;
        transform: none;
        transition-duration: 0;
    }

    .nav>.wrap {
        margin-left: auto;
        margin-right: auto;
    }

    .nav>.wrap>.block {
        display: inline-block;
    }

    .nav>.wrap>.block>.box-nav {
        position: absolute;
        left: 0;
        min-width: 100%;
    }

    .nav>.wrap>.links {
        position: absolute;
        top: -58px;
        right: 340px;
    }

    .nav>.wrap>.searchbox-form {
        position: absolute;
        top: -4rem;
        right: 0;
        width: 18.75rem;
        margin: 0;
    }
}


.box-nav {
    padding: 2.5rem 0.9375rem 1.875rem;
    min-height: 0;
    background-color: rgb(230, 230, 230);
}


.box-nav>div>.button {
    width: 100%;
}

.box-nav>*+.button-link {
    margin-top: 28px;
}

@media (max-width: 51.25em) {

    /* Negate drawer transitions for mobile */
    .box-nav.drawer,
    .box-nav.drawer:not(.active) {
        max-height: none;
        opacity: 1;
        visibility: visible;
        transition: none;
        padding-top: 0.625rem;
        padding-bottom: 1.25rem;
    }
}




.button-nav {
    font-family: NeoSans, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.25rem;
    padding-top: 14px;
    padding-bottom: 14px;
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;

    /* Match fade of drawer transition */
    color: inherit;
    background-color: transparent;
    cursor: default;
}

.button-nav:hover,
.button-nav:focus {
    outline-width: 0;
}

.button-nav.on {
    color: inherit;
    background-color: transparent;
    outline-width: 0;
}

@media (max-width: 51.25em) {

    /* Remove toggle arrows */
    .button-nav>.fa {
        display: none;
    }
}

@media (min-width: 51.25em) {
    .button-nav {
        white-space: nowrap;
        color: rgb(178, 224, 193);
        color: var(--color-green-2);

        /* Match fade of drawer transition */
        background-color: rgba(230, 230, 230, 0);
        transition: background-color 400ms cubic-bezier(0.91, 0.26, 0.92, 0.1);

        cursor: pointer;
    }

    .button-nav:hover,
    .button-nav:focus {
        color: white;
    }

    .button-nav.on {
        color: black;
        background-color: #e6e6e6;
        background-color: var(--color-grey-5);
        outline-width: 0;

        /* Match fade of drawer transition */
        background-color: rgba(230, 230, 230, 1);
        transition: background-color 240ms cubic-bezier(0, 0.86, 0, 0.72);
    }

    /*highlight active page button on menu*/
    .maladie .nav-maladies-et-pec>.button-nav,
    .etape_prise_en_charge .nav-maladies-et-pec>.button-nav,
    .traitement .nav-maladies-et-pec>.button-nav,
    .examen .nav-maladies-et-pec>.button-nav,
    .offre_de_soutien .nav-maladies-et-pec>.button-nav,
    .recherche .nav-recherche>.button-nav,
    .service .nav-centres>.button-nav,
    .service .nav-centres>.button-nav,
    .conseils_de_soins .nav-maladies-et-pec>.button-nav {
        color: white;
    }

    .maladie .nav-maladies-et-pec>.button-nav.on,
    .etape_prise_en_charge .nav-maladies-et-pec>.button-nav.on,
    .traitement .nav-maladies-et-pec>.button-nav.on,
    .examen .nav-maladies-et-pec>.button-nav.on,
    .offre_de_soutien .nav-maladies-et-pec>.button-nav.on,
    .recherche .nav-recherche>.button-nav.on,
    .service .nav-centres>.button-nav.on,
    .service .nav-centres>.button-nav.on,
    .conseils_de_soins .nav-maladies-et-pec>.button-nav.on {
        color: black;
    }
}


.menu {
    padding-left: 0;
    margin: 0;
}

.menu>.button-menu:first-child {
    border-top-color: transparent;
}

.menu+.menu {
    margin-top: 28px;
}


.button-menu {
    display: block;
    line-height: 1.125rem;
    text-align: left;
    border: 1px solid #BFBFBF;
    padding: .5rem .75rem;
    border-left: none;
    border-right: none;
}

.button-menu:hover,
.button-menu:focus {
    color: black;
    outline-width: 0;
}

.button-menu.disabled,
.button-menu.disabled:focus,
.button-menu.disabled:hover {
    background-color: #eee;
    color: #777;
    cursor: not-allowed;
}

.button-menu.on,
.button-menu.on:focus,
.button-menu.on:hover {
    z-index: 2;
    color: #fff;
    background-color: #4D4D4D;
    border-color: #4D4D4D;
}

.button-menu+.button-menu {
    /* Compensate for border */
    margin-top: -1px;
}

.button-menu {
    color: #4D4D4D;
    text-decoration: none;
}


@media (min-width: 51.25em) {
    .button-menu {
        white-space: nowrap;
    }
}



.button-top {
    min-width: 0;
    color: white;
}

.button-top:hover,
.button-top:focus {
    text-decoration: none;
    color: rgb(178, 224, 193);
    color: var(--color-green-2);
}





/* For search box */

.searchbox-form {
    position: relative;
    width: 18.75rem;
    min-height: 2rem;
}

.search-input {
    display: inline-block;
    width: 100%;
    height: 2.8125rem;
    border-radius: 2px;
    padding-right: 45px;
}

.search-button {
    position: absolute;
    right: 0;
    top: 0;
    color: #cecece;
    background-color: transparent;
    font-size: 30px;
    height: 2.8125rem;
    border-radius: 2px;
    line-height: 2.8125rem;
}

.search-button>.fa {
    line-height: 21px;
    font-size: 21px;
}

@media (min-width: 51.25em) {}