

  

.hamburger {
    display:none
 }
 .main-navigation{
     display: flex;
 width: 100%;
 align-items: center;
 justify-content: space-around;
 }
 ul li a {
     font-size: 25px;
 
 }
 
 ul{
     list-style: none;
 }
 #social-menu0{
     display: flex;
     flex-direction: row;
     justify-content: space-around;
 position: relative;
 top:20px;
 flex-wrap: wrap;
 }
 .flexmenu{
   min-height: 70px;
     background-color: black;
 }
 

  
     ul li a {
        padding-right: 10px;
     
     }
     .nav .nav--main{
         display: none;
     }
     .hamburger{
         position: absolute;
         top: 25px;
        left:20px;
         height: 40px;
         width: 40px;
         border: none;
         outline: none;
         cursor: pointer;
         display: flex;
         justify-content: center;
         align-items: center;
        margin:0 10px 40px 0;
     background-color: transparent!important;
     }
     .line{
         position: absolute;
         display: block;
         width: 100%;
         height: 2px;
         background: #DDFDDD;
         transition: transform 0.3s ease-out,
         opacity 0.3s ease-out;
         pointer-events: none;
     }
     .l1 {
         transform: translateY(-10px);
  
     }
     .l3 {
         transform: translateY(10px);
     
     }
     .hamburger.open .l1 {
         transform: translateY(0px) rotate(135deg);
         margin: 30px;
         
     }
     .hamburger.open .l1, .hamburger.open .l3 {
         background: red;
     }
     .hamburger.open:hover{
 width:30px;
     }
     .hamburger.open .l2 {
         opacity: 0;
         transition: opacity 0s ease-out;
         margin: 30px;
     }
     .hamburger:hover {
         width: 30px;
     }
     .l2:hover{
         width: 60%;
     }
     .hamburger.open .l3 {
         transform: translateY(0px) rotate(-135deg);
         margin: 30px;
      
     }
     
     .main-navigation {
         position: fixed;
         right: 0;
         justify-content: flex-start 
     }
 
     .main-navigation div ul{
         display: none;
         
 
     }
    
      .social-navigation0.open div ul li {
 padding:0 0 20px 0;
 margin-left: 10px;
     }
     .social-navigation0{
         display: none;
         }
      
         .social-navigation0.open{
         display:flex;
         animation: glissement;
         animation-duration: 0.3s;
 background-color: black;
         justify-content: space-between;
         margin-bottom: 20px;
  min-height: 80px;
        padding-top: 40px;
     }
     .social-navigation0.open div ul{
         display: block;
        
     }
     .site-header{
         transform: translate(0, 0);
     }
     #social-menu0{
         top: 30px;
     }

 
 @keyframes glissement {
     from {
       margin-right: 100%;
       width: 300%;
     }
   
     to {
       margin-right: 0%;
       width: 100%;
     }
   }
   /*footer*/
   .hamburgerfooter{
     display: inline-block;
     width: 40px;
   }
   .line2 {
     position: relative;
     display: block;
     width: 40px;
     height: 2px;
     background: #DDDDFF;
 }
 .hamburgerfooter span{
     margin-bottom: 10px;
 }
 .positionff{
     position: relative;
     top: -45px;
     left: 60px;
   }
   .navigationfootermobile{
     margin:0
   }
   .navigationfooter, .navigationfootermobile{
     display: flex;
     justify-content: space-between;
 width: 100%;
 flex-wrap: wrap;
   }
 
   .navigationfooter li a, .navigationfootermobile li a{
     margin: 0px 20px 0 20px;
   }
   .navigationfootermobile li{
     margin-bottom: 15px;
   }
   @media (max-width: 801px){
     .navigationfootermobile{
         display: flex;
         justify-content: start;
         flex-direction: column;
     width: 100%;
     flex-wrap: wrap;
     height: 250px;
   }}
   @media (max-width: 380px){
     .navigationfootermobile{ height: auto;}
   }