#menu{
width:auto;
left:290px;
top:30px;
display:inline-block;
position:absolute;
box-sizing:border-box;
text-align:center;
margin-bottom:2px;
transition:all ease 0.5s;
}
#menu li{
font-size:1em;
padding:0 !important;
margin:0!important;
list-style-type:none;
display:inline;
position:relative;
float:left;
}
#menu li:first-child,
#menu li:first-child a{
}
#menu li:last-child,
#menu li:last-child a{
}

#menu li a{
float:left;
cursor:pointer;
text-decoration:none;
color:var(--text);
font-size:1.1em;
font-weight:700;
margin:0px 10px !important;
padding-bottom:2px;
transition:all ease 0.2s;
text-transform:uppercase;
padding:8px 0;
}

#menu li a:hover{
color:var(--parm);
}
#menu .activated a,
#menu .activated a:hover{
color:var(--rouge);
border-bottom:1px solid var(--orange);
}

#social {
position:absolute;
display:block; 
margin-bottom:20px;
z-index:999;
right:30px;
top:28px;
}
#social a{
display:inline-block;
margin-right:10px;    
}
#social svg{
height:35px;
width:35px; 
transition:all ease 0.3s;
}
#social a:hover svg circle,
#social a:hover #facebook path{
fill:var(--rouge)!important;
}

@media screen and (max-width: 1280px){
#menu{left:260px;}
#menu li a{font-size:1.05em}
}
@media screen and (max-width: 1180px){
#menu{left:240px;}
#social {
right:10px;
top:28px;
}
#menu li a{font-size:1em;margin:0px 9px !important;}
#social svg{height:30px;width:30px; transition:all ease 0.3s;}
}
@media screen and (max-width: 1080px){
#menu li a{font-size:0.85em;margin:0px 8px !important;}
}
@media screen and (max-width: 980px){
#menu li a{font-size:0.8em;margin:0px 6px !important;}
#social svg{height:25px;width:25px;transition:all ease 0.3s;}
}