/* Animated Hamburger */
#toggleButton.toggle-button{
    position:fixed;top:70px;right:6px;z-index:1002;background:transparent;border:0;cursor:pointer;
    width:45px;height:28px;display:flex;flex-direction:column;justify-content:space-between;align-items:center
  }
  #toggleButton .bar{width:100%;height:3px;background:#fff;border-radius:2px;transition:all .4s ease,background-color .3s ease;transform-origin:center}
  #toggleButton.open .bar1{transform:rotate(45deg) translate(5px,5px)}
  #toggleButton.open .bar2{width:0;opacity:0}
  #toggleButton.open .bar3{transform:rotate(-45deg) translate(5px,-5px)}
  #toggleButton:hover .bar{background:#1E90FF}
  #toggleButton.open .bar{background:#FF4500}
  #toggleButton.open:hover .bar{background:#1E90FF}
  
  /* Panel */
  #slidePanel.slide-panel{
    position:fixed;top:0;right:0;width:300px;height:100%;background:#282828;box-shadow:-2px 0 10px rgba(0,0,0,.3);
    overflow-y:auto;transform-origin:top right;z-index:1001;display:flex;flex-direction:column;justify-content:space-between;
    transform:translateX(100%) skewX(10deg);transition:transform 1s ease
  }
  #slidePanel.active{transform:translateX(0) skewX(0)}
  #slidePanel.closing{transform:translateX(100%) skewX(0)}
  .menu-content{padding-top:55px}
  
  /* Links & icons */
  .menu a,.user-menu a,.sub-menu a{
    opacity:0;transform:translateY(-20px);color:#fff;text-decoration:none;display:flex;align-items:center;
    font-size:18px;border-bottom:1px solid #444;padding:10px 20px;transition:color .3s,background-color .3s
  }
  .menu a:last-of-type,.user-menu a:last-of-type,.sub-menu a:last-of-type{border-bottom:none}
  .menu-icon{width:25px;padding:8px 28px 8px 8px;display:flex;justify-content:center;align-items:center;transition:color .3s}
  .menu-arrow{margin-left:auto;color:#ccc;display:inline-block;transform-origin:center;transition:transform .3s,color .3s}
  .menu a.active>.menu-arrow,.user-menu a.active>.menu-arrow,.sub-menu a.active>.menu-arrow{transform:rotate(180deg);color:#1E90FF}
  .menu a:hover,.user-menu a:hover,.sub-menu a:hover{color:#1E90FF;background:#444}
  .menu a:hover .menu-icon,.user-menu a:hover .menu-icon,.sub-menu a:hover .menu-icon{color:#1E90FF}
  .menu a.active,.menu a.active .menu-icon,.user-menu a.active,.user-menu a.active .menu-icon,.sub-menu a.active,.sub-menu a.active .menu-icon{color:#1E90FF}
  
  /* Staggered entrance */
  #slidePanel.menu-open .menu>a{animation:fadeInItem .6s forwards}
  #slidePanel.menu-open .menu>a:nth-of-type(1){animation-delay:.1s}
  #slidePanel.menu-open .menu>a:nth-of-type(2){animation-delay:.2s}
  #slidePanel.menu-open .menu>a:nth-of-type(3){animation-delay:.3s}
  #slidePanel.menu-open .menu>a:nth-of-type(4){animation-delay:.4s}
  #slidePanel.menu-open .menu>a:nth-of-type(5){animation-delay:.5s}
  #slidePanel.menu-open .menu>a:nth-of-type(6){animation-delay:.6s}
  @keyframes fadeInItem{to{opacity:1;transform:translateY(0)}}
  
  /* Submenus */
  .sub-menu{max-height:0;overflow:hidden;background:#383838;transition:max-height .4s ease-out;display:flex;flex-direction:column}
  .sub-menu.active-sub-menu{max-height:500px}
  .sub-menu a{font-size:16px;padding-left:45px;border-bottom:none;color:#ccc;opacity:0;transform:translateY(-10px)}
  .sub-menu.submenu-open a{animation:fadeInSubItem .4s forwards}
  .sub-menu.submenu-open a:nth-of-type(1){animation-delay:.1s}
  .sub-menu.submenu-open a:nth-of-type(2){animation-delay:.2s}
  .sub-menu.submenu-open a:nth-of-type(3){animation-delay:.3s}
  .sub-menu.submenu-open a:nth-of-type(4){animation-delay:.4s}
  @keyframes fadeInSubItem{to{opacity:1;transform:translateY(0)}}
  
  /* User area */
  .user-menu{padding-bottom:55px;background:#282828;border-top:1px solid #444;display:flex;flex-direction:column}
  .user-welcome{opacity:0;transform:translateY(-20px);display:flex;align-items:center;padding:10px 20px;font-size:18px;
    color:#fff;text-decoration:none;transition:color .3s,background-color .3s;border-bottom:1px solid #444}
  #slidePanel.menu-open .user-menu .user-welcome{animation:fadeInItem .6s forwards;animation-delay:.5s}
  #slidePanel.menu-open .user-menu a{animation:fadeInItem .6s forwards}
  #slidePanel.menu-open .user-menu a:nth-of-type(1){animation-delay:.7s}
  #slidePanel.menu-open .user-menu a:nth-of-type(2){animation-delay:.8s}
  #slidePanel.menu-open .user-menu a:nth-of-type(3){animation-delay:.9s}
  #slidePanel.menu-open .user-menu a:nth-of-type(4){animation-delay:1s}
  
  /* Overlay */
  #overlay.overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:opacity .6s ease;z-index:1000}
  #overlay.active{opacity:1;visibility:visible}