html, body, div, span, applet, object, iframe,
blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}

.topnav {
overflow: hidden;
background: linear-gradient(0deg, #333, #4b5e65, #333);width:100%;
height:50px;
font-family:Tahoma;font-size:x-large;}

.topnav a {
float: left;
display: table;
color:#ececec;border-left:1px solid #ececec;text-align: center;
text-decoration: none;
height:50px;
line-height:50px;
margin: 0;
padding: 0 15px;
color:#ececec;border-left:1px solid #ececec;}

.topnav a:hover {
background-color: #44566c;color: black;
}
.topnav a img{
padding:0;
width:20px;height:20px;margin: auto;
display:table-cell;
vertical-align:middle;
}
.topnav a.active {
background: #201b22;color:#ececec;font-weight:bold;
width:220;
height: 50px;
overflow: hidden;
line-height: 1;
margin: 0;
padding: 0;
}
.topnav a p{
    text-indent:0;
}
.topnav a .material-icons {
margin:0;
font-size:24px;display:table-cell;
vertical-align:middle;
text-indent: 0;
}
@media screen and (max-width:350px) {
    .topnav a .material-icons {
    font-size:18px;    }
}
.topnav a .nav-text{

}
.topnav a i{
padding: 2 1 0 0;
display:table-cell;
vertical-align:middle;
font-size:24px;}
@media screen and (max-width:350px) {
    .topnav a i {
    font-size:18px;    }
}
.topnav a span{
display:table-cell;
vertical-align:middle;
padding: 0 5px;
font-size:24px;}
/*
--------------------------------
------------SOUS MENU--------
--------------------------------
*/
#myTopnav .ssmenu:hover>ul{ display:block; }
.topnav ul li a:hover>ul{
display:block;
}
.topnav ul{
list-style-type: none;
}
#myTopnav ul li::before{
content: '';
position: absolute;
top: 1px;
right: -1px;
display: block;
height: 20px;
width: 1px;
opacity: .35;
}
#myTopnav ul li::after{
content: '';
position: absolute;
top: 1px;
right: 0;
color: #fff;
display: block;
height: 20px;
width: 1px;
opacity: .15;
}
#myTopnav ul li a{
float: left;
display: table;
color:#ececec;border-left:1px solid #ececec;text-align: center;
text-decoration: none;
height:50px;
margin: 0;
padding: 0 5;
color:#ececec;border-left:1px solid #ececec;}
#myTopnav ul li ul{
display:none;
max-width:300px;
height:auto;
position:absolute;
top:50;
left:220;
list-style-type: none;
font-size: medium;
text-align: left;
background: #201b22;color:#ececec;}
#myTopnav a:hover > ul{
display:block;
}
#myTopnav a ul li{
border-bottom: 2px solid whitesmoke;
}
#myTopnav a ul li i{
}
#myTopnav a ul li:hover{
background-color: #44566c;color:black;
}
#myTopnav .sous-menu a{
border:0;
}
/*
--------------------------------
------------FIN SOUS MENU--------
--------------------------------
*/




.topnav .icon {
display: none;
}
@media screen and (max-width: 800px) {
.topnav {
overflow: auto;
height:auto;
}
.topnav a{
    padding: 0 7;
}


.topnav a img{
display: table-cell;
vertical-align:middle;
}
.topnav a span{
display: none;
}
.topnav a.active span{
    display: table-cell;
    vertical-align: middle;
    padding-left: 5px;
}
.topnav a.active p{
padding:0 5px;
}
.topnav a:not(:first-child) {display: table;}
.topnav a.icon {
float: right;
display: none;
margin:0;
height: 50;
}
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
#myTopnav ul li ul{
left:0;
width:49;
border:1px solid whitesmoke;
border-top:0;
}
}
@media screen and (max-width: 600px) {
.topnav a.active span{
display:none;
}
}