#menu>.allmenu{
	position: absolute;
	top:0px;
	right: 0px;
    width: 100%;
    height: 100%;
    z-index: 0;
}
/*********************************************************/
#menu>.allmenu>a{
	position: absolute;
	top:0px;
	right: 0px;
    height: calc(4*var(--h_header));
	width: calc(3*var(--h_header));
    background-color: var(--C_header);
    z-index: 1;
    line-height: calc(4*var(--h_header));
    text-align: center;
    font-size: 30px;
    color: #888;
    text-decoration: none;

    transition-property: color;
    transition-duration: 0.8s;
    transition-timing-function:ease-in-out;
    transition-delay: 0s;
}
/*********************************************************/
#menu>.allmenu>div{
	position: absolute;
	top:calc(4*var(--h_header) - var(--nb_child_menu)*(var(--hauteur_mbouton) + 1px));
	right: 0px;
	width: var(--largeur_mbouton);
    height: calc(var(--nb_child_menu)*(var(--hauteur_mbouton) + 1px));
    background-color: #999;
    z-index: 0;


    transition-property: top;
    transition-timing-function:ease-out;
    transition-duration: var(--vitesse_ouverture_menu);
}
#menu>.allmenu>div>a{
    float: left;
    width: 100%;
    height: var(--hauteur_mbouton);
    margin-top: 1px;
    background-color: #444;
    color: white;
    text-decoration: none;
    

    transition-property: background-color;
    transition-duration: 0.8s;
    transition-timing-function:ease-in-out;
    transition-delay: 0s;
}

/*********************************************************/
#menu>.allmenu>div>a>i{
    float: left;
    width: var(--hauteur_mbouton);
    height: var(--hauteur_mbouton);
    line-height:var(--hauteur_mbouton);
    text-align: center;
    font-size: 18px;
}
#menu>.allmenu>div>a>span{
    float: left;
    width: calc(100% - var(--hauteur_mbouton) - 5px);
    height: var(--hauteur_mbouton);
    line-height:var(--hauteur_mbouton);
    
    font-family: 'robotolight';
    text-align: left;
    font-size: 14px;
    margin-left: 5px;
}
#menu>.allmenu>div>a[class="selected"]{background-color: var(--C_orange);color:black;}
#menu>.allmenu>div>a:hover{background-color: grey;}
#menu[class*="open"]>.allmenu>a,
#menu>.allmenu:hover>a{color:grey;}
/*********************************************************/
#menu[class*="open"]>.allmenu>div,
#menu>.allmenu:hover>div{top:calc(4*var(--h_header));}
/*********************************************************/



@media (max-width: 490px) {
    #menu>.allmenu>a{
        height: calc(2*var(--h_header));
        line-height: calc(2*var(--h_header));
        font-size: 24px;
    }
    #menu[class*="open"]>.allmenu>div,
    #menu>.allmenu:hover>div{top:calc(2*var(--h_header));}

}