.navbar {
    background:rgba(32,29,29,0.8);
    width:100%;
    height:auto;
    display: none;
  }
  
  .navbar ul {
    overflow: hidden;
    list-style-type: none;
    padding-top:5%;
    padding-bottom:5%;
    margin: 0;
  }
  
  .navbar li {
    display: block;
    margin: 0;
    padding:10px 20px;
    text-align: left;
   
  }
  
  .navbar li:hover {
    cursor: pointer;
  }
  
  
  .navbar li a {
    color: #d3e3e3;
    text-decoration: none;   
    font-size:var(--size-xxx-small);
    text-transform:uppercase;
    transition: all .5s;
  }
  
  .navbar li:hover {
    cursor: pointer;
    background-color:var(--main-color);
   
  }

  .menu-wrapper{
    position:fixed;
    z-index: 50;
    width:250px;
    top:50%;
    left:var(--container-padding);   
    transform:translateY(-50%);
   
   
  }

  .menu-label{
    color:var(--white-color);
    font-size:var(--size-xx-small);
    text-transform:uppercase;
    font-weight:var(--f-Light);
    margin-top: 5px;
    margin-bottom: 5px;
    display: block;
  }
  
  .hamburger {
    margin: 0;
    margin-left:0;
    padding: 0;
   top:50%;
    transition: opacity .3s;
    position: relative;
    display: inline-block;
    background:#4d4a4a;
    width: var(--hambuger-width);
    text-align:center;
    padding-top:15px;
    padding-bottom:15px;
    border-radius: 5px;
  }
  
  .hamburger:hover {
    cursor: pointer;
  
  }
  
  .hamburger .line{
    width:calc(var(--hambuger-width)* 0.7);    
    height:2px;
    background:var(--white-color);
    margin: 6px auto;
    transition: all 0.3s ease-in-out;
  
  }

   .hamburger.isactive .line{
    width:calc(var(--hambuger-width)* 0.5); 
  }

  
  .hamburger.isactive .line.line-02 {
    transform: translateY(0px) rotate(-45deg);
   
  }
  
  .hamburger.isactive .line.line-01 {
    transform: translateY(8px) rotate(45deg);
  }
  
  .hamburger.isactive .line.line-03 {
    transform: translateY(-13px) rotate(-45deg);
  }

  .hamburger.isactive .menu-icon{
    display: none;
  }
  
  .navbar {
    transition: all 2s ease-in-out;
    display: block;
   
  }

  .hamburger{
    display: none;
  }


  header.sticky + .menu-wrapper .navbar{
   display:none;
   
  }

  header.sticky + .menu-wrapper .hamburger{
    display:inline-block;
  }
  
  .navbar.active {
    display: block !important;
    animation: fade .5s;
  }
  
  @keyframes fade {
    from{transform: translateX(-200px); opacity: 0;}
    to {transform: translateX(0px); opacity: 1;}
  }