@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300);
#cssmenu {
  width: 100%;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
  font-size: 0.9vw;
}

#cssmenu > ul {
  width: 100%;
  list-style-type: none;
  padding: 0;
  margin: 0;
  margin-bottom: 10px;
}


/*Cat1 en maj*/
.uppercase{
  text-transform: uppercase;
  white-space: nowrap;
}

/*Cat1 sur la meme ligne*/
#cssmenu > ul li {
  display: inline-block;
  padding: 0;
  margin: 0;
}

#cssmenu > ul li:hover{
  cursor: pointer;
}

#cssmenu > ul li.inactif img{
  background: grey
}

#cssmenu > ul li.inactif:hover{
  cursor:default;
  background: none;
}

#cssmenu > ul li.inactif a{
  cursor: default;
}

/*Cat1*/
#cssmenu > ul li.has-sub {
    width: auto;
    text-align: center;
    padding: 5px 14px;
}

/*Cat1 au survol*/
#cssmenu > ul li.has-sub:hover ul {
 display: block;

}


/*couleur des Cat1*/
/*#cssmenu > ul li.has-sub > a.active, #cssmenu > ul li.menu-1 > a:hover {background: #ef7d27 url('img/fleche.png') no-repeat; background-position: 50% 95%;font-weight: bold}
#cssmenu > ul li.has-sub > a.active, #cssmenu > ul li.menu-2 > a:hover {background: #f58e31 url('img/fleche.png') no-repeat; background-position: 50% 95%;font-weight: bold}
#cssmenu > ul li.has-sub > a.active, #cssmenu > ul li.menu-3 > a:hover {background: #faae31 url('img/fleche.png') no-repeat; background-position: 50% 95%;font-weight: bold}
#cssmenu > ul li.has-sub > a.active, #cssmenu > ul li.menu-4 > a:hover {background: #fcb51b url('img/fleche.png') no-repeat; background-position: 50% 95%;font-weight: bold}
#cssmenu > ul li.has-sub > a.active, #cssmenu > ul li.menu-5 > a:hover {background: #ffce2f;font-weight: bold}
#cssmenu > ul li.has-sub > a.active, #cssmenu > ul li.menu-6 > a:hover {background: #ffda0c url('img/fleche.png') no-repeat; background-position: 50% 95%;font-weight: bold}
#cssmenu > ul li.has-sub > a.active, #cssmenu > ul li.menu-7 > a:hover {background: #ffef00;font-weight: bold}*/

/**/
 #cssmenu > ul li.menu-1  {background: #ef7d27;}
 #cssmenu > ul li.menu-2  {background: #f58e31;}
 #cssmenu > ul li.menu-3  {background: #faae31;}
 #cssmenu > ul li.menu-4  {background: #fcb51b;}
 #cssmenu > ul li.menu-5  {background: #ffce2f;}
 #cssmenu > ul li.menu-6  {background: #ffda0c;}
 #cssmenu > ul li.menu-7  {background: #ffef00;}


/*Cat2*/
#cssmenu > ul li.has-sub ul {
  display: none;
  width: 450px;
  position: absolute;
  margin: 0;
  padding: 0;
  list-style-type: none;
  background: #ffffff;
  z-index: 8;
  margin-top:0.7em;
}

#cssmenu > ul li.has-sub ul li{white-space: nowrap;}
#cssmenu > ul li.has-sub ul.menu-6 li{white-space: initial;}

/*couleur des bordures cat2*/
#cssmenu > ul li.has-sub ul.menu-1{border: 5px solid #ef7d27;}
#cssmenu > ul li.has-sub ul.menu-2{border: 5px solid #f58e31;}
#cssmenu > ul li.has-sub ul.menu-3{border: 5px solid #faae31;}
#cssmenu > ul li.has-sub ul.menu-4{border: 5px solid #fcb51b;}
#cssmenu > ul li.has-sub ul.menu-5{border: 5px solid #ffce2f;}
#cssmenu > ul li.has-sub ul.menu-6{border: 5px solid #ffda0c;}
#cssmenu > ul li.has-sub ul.menu-7{border: 5px solid #ffef00;}


#cssmenu > ul li {
  text-align: center;
  /*display: block;*/
  padding: 12px 0 11px 0;
  width: 14%;
  text-decoration: none;
  color: #000000;
}


/*cat 2*/
#cssmenu > ul li.sub-3 ul{
  width: 330px;  

}

/*Cat2 position dans block*/
#cssmenu > ul > li > ul > li{
  display: block;
  width: 210px;
  float: left;
  margin: 5px;
  text-align: center;
}

#cssmenu > ul > li > ul > li:hover{
  background: #eee
}


#cssmenu > ul > li > ul > li img{
  display: block;
  width: 100%
}



#cssmenu > ul > li.sub-3 > ul > li{
  width: 96px;
  height: 85px;
}




#cssmenu > ul > li > ul > li > img{
  display: block;
  overflow: hidden;
  width: 100%;
}



/**/

#cssmenu > ul li.services ul{
  width: 230px;
}

#cssmenu > ul li.services ul li:hover{
  background: #fceebe;
}