.main-navbar,.brand-burger, .main-nav, .main-nav ul, .main ul li, .sub-nav-ul{

    display : flex;
    align-items : center;
  
  }
   
  .main-navbar{
    
    justify-content: space-between; 
    border-bottom : 1px solid #ddd;
  } 
  
  
  .main-nav {
  
    margin-top : 0;
    margin-bottom : 0;
  
  }
  
  .main-nav  li{
    flex-direction : row;
    margin-right : 25px;
    align-items : safe center;
     justify-content: space-between;
     font-weight : 700;
  }
  
  .sub-nav-ul li{
    font-weight : 700;
  }
  /* BURGER */
  
  
  #burger{
    width : 26px;
    height : 26px;
    position: relative;
    cursor : pointer;
    right : 20px;
    display : none;
  }
  
  
  .mob-nav-burger, .mob-nav-burger:before, .mob-nav-burger:after {
    height : 4px; /* set for each bar */
    width : 26px; /* set burger width */
    background : #000; /* set burger color */
    position : absolute;
  }
  
  .mob-nav-burger{
  
   top : 10px;
   transition : width 0.5s ease, background-color 0.2s; 
  
  }
  
  .mob-nav-burger:before{
   
    content :"";
    top : -10px; 
    left : 0;
    transition : top 0.5s, transform 0.5s; 
  }
  
  .mob-nav-burger:after{
    
     content :"";
     top: 10px; 
     left : 0;
     transition : top 0.5s, transform 0.5s; 
  
  }
  
  #burger:hover .mob-nav-burger {
    width : 20px; /* aniamation on the second bar on hover (uniquement si visible sur desktop*/
  }
  
  .activated .mob-nav-burger{
  
    background-color : transparent; /*make middle bar disappear*/
  
  }
  
  .activated .mob-nav-burger:before{
  
  transform : rotate(45deg);
  top : 5px;
  }
  
  .activated .mob-nav-burger:after{
  
  transform : rotate(-45deg);
  top : 5px;
  }
  
  @media screen and (min-width: 992px) {
  
    #nav{
      height : auto !important;
    }
  
  }
  
  @media screen and (max-width: 991px) {
  
    #burger {
      display : block;
    } 

    ul{
      list-style-type: none;
      padding : 0;
    }

    .main-navbar{
      flex-direction: column;
      align-items: flex-start;
    }
  
  .sub-nav-ul{
    justify-content: center!important;
  }
.sub-nav-ul .nav-li{
  text-align : center;
}

    .sub-nav-ul a.link-nav{

      text-align :center;
      font-size : 12px;
    }
  
    nav, .main-nav {
   
     flex-direction : column;
    align-items : flex-start;
    padding : 5px 15px; 
      
    }
  
    .invisiblee{
      height : 0px!important;
      transition: height 0.3s;
      overflow : hidden;
  
    }
  
   .visiblee{
    
    transition:height 0.3s;
    overflow : initial!important;
  
   }
  
  
   .brand-burger{
      align-items : center;
      justify-content : space-between;
      width : 100%;
    }
    .heading-p{
      font-size : 13px;
    }
  }