*{
margin: 0;
padding: 0;
list-style: none;


}

header {
  
  width:100%;
  height:50px;
  background-color: #333;
  display: flex;
  align-items:center;
  flex-direction: row;
  position: relative;
  
 
   
 
 
 

}

header > a ,
header button {
  color:white;
  font-size: 17px;
  padding:14px 20px;
    text-decoration: none;
	
  
  

}
header > a:visited {
  color:white;
 

}
header > a:link{
  color:white;
 
}



header a:hover {

  color:black;
  background-color: #ddd;



}
header button {
  color:white;
  background-color: transparent;
  border:none;
  outline:none;
  cursor:pointer;

  

}
header button:hover {

  color:black;
  background-color: #ddd;



}

header button:after{
  content: '❯';
  font-size: 15px;
  margin-left: 7px;
  display: inline-block;
}





header #deroulant  {
  position:relative;
  z-index:25;

}


header #deroulant .sousmenu {
  display:none;

}

header #deroulant:hover > button:after{
  animation: rotationFleche 0.2s linear forwards;
}

@keyframes rotationFleche {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(45deg);
  }
  100%{
    transform: rotate(90deg);
  }
}


header #deroulant:hover .sousmenu {
  display:block;
  display:flex;
  flex-direction: column;
  position: absolute;
  box-sizing: border-box;
  color:white;
  background-color: #333;
  font-size: 15px;
     
 

}




header #deroulant:hover .sousmenu a {

  color:white;
  padding:10px 20px;
   text-decoration: none;
   


}
header #deroulant .sousmenu a:link:hover {

  color:black;
  padding:10px 20px;
   text-decoration: none;
   


}

header #deroulant .sousmenu a:visited:hover {

  color:black;
  padding:10px 20px;
   text-decoration: none;
   


}





.active {
background-color: #cc0e13;

}

header .icon {
    display:none;
}




@media (max-width:685px){

  header >a,
  header button {
    display:none;
  }
   
   
 
 

  header .icon {
    display:block;
    position:absolute;
    right:10px;
    width:90px !important;
    padding: 0 !important;
    top:11px;
    text-align: center;
    
   
    
   
 }

header.responsive > a,
header.responsive .sousmenu {
   display: block;
   width:100%;
 
}

header.responsive > a {

    padding: 14px 10px;
}

   header.responsive button {
    display: block;
    padding: 14px 10px;
    }


  header {
   flex-direction: column;
   min-height: 50px;
   height:100%;
   align-items: flex-start;
   
  }

   header #deroulant:hover .sousmenu {
    position:relative;
    width:100%;
    top:0;
    font-size: 14px;
    padding: 0px 15px;
      
  }
   header button:hover {

  color:white;
  background-color: #cc0e13;



}

}