/* Header */
#wrapper .header-wrapper {display:flex; flex-shrink:0; width:256px; padding:32px; background:var(--lightBlue);}
#wrapper .header-wrapper .header-container {display:flex; flex-direction:column; gap:64px; width:100%;}
#wrapper .header-wrapper .header-container .logo-wrapper .logo {width:100%;}
#wrapper .header-wrapper .header-container .menu-wrapper .menu-title {font-weight:700; margin-bottom:32px;}
#wrapper .header-wrapper .header-container .menu-wrapper .menu {list-style-type:none; margin:0; padding-left:32px; display:flex; flex-direction:column; gap:32px;}
#wrapper .header-wrapper .header-container .menu-wrapper .menu .menu-item {font-size:1.6rem; display:flex; gap:8px; align-items:center; opacity:.5; position:relative;}
#wrapper .header-wrapper .header-container .menu-wrapper .menu .menu-item * {color:var(--grey); text-decoration:none; display:inline-flex; align-items:center;}
#wrapper .header-wrapper .header-container .menu-wrapper .menu .menu-item a i {font-size:16px; color:var(--blue); opacity:.5; position:absolute; right:calc(100% + 8px);}
#wrapper .header-wrapper .header-container .menu-wrapper .menu .menu-item:after {content:'\f061'; font-family:'FontAwesome'; font-weight:100; font-size:16px; display:inline-flex; align-items:center; opacity:0;}
#wrapper .header-wrapper .header-container .menu-wrapper .menu .menu-item.prev:before {content:'\f058'; font-family:'FontAwesome'; font-weight:100; font-size:16px; display:inline-flex; align-items:center; opacity:.8; position:absolute; right:calc(100% + 8px); color:var(--blue);}
#wrapper .header-wrapper .header-container .menu-wrapper .menu .menu-item.active {opacity:1;}
#wrapper .header-wrapper .header-container .menu-wrapper .menu .menu-item.active * {color:#000;}
#wrapper .header-wrapper .header-container .menu-wrapper .menu .menu-item.active:after {opacity:1;}

@media (max-width:1200px) {
  #wrapper .header-wrapper {width:160px; padding:16px;}
  #wrapper .header-wrapper .header-container .menu-wrapper .menu {gap:16px; padding-left:16px;}
  #wrapper .header-wrapper .header-container .menu-wrapper .menu .menu-item {font-size:1.2rem; gap:4px;}
  #wrapper .header-wrapper .header-container .menu-wrapper .menu .menu-item a i {right:calc(100% + 4px);}
  #wrapper .header-wrapper .header-container .menu-wrapper .menu .menu-item.prev:before {right:calc(100% + 4px);}
}

@media (max-width:800px) {
  #wrapper {flex-direction:column;}
  #wrapper .header-wrapper {width:100%; height:auto; flex-shrink:1;}
  #wrapper .header-wrapper .header-container {flex-direction:row; gap:32px;}
  #wrapper .header-wrapper .header-container .logo-wrapper .logo {width:96px; height:96px;}
  #wrapper .header-wrapper .header-container .menu-wrapper {display:flex; flex-direction:column; justify-content:center;}
  #wrapper .header-wrapper .header-container .menu-wrapper .title {margin-bottom:0;}
  #wrapper .header-wrapper .header-container .menu-wrapper .menu {flex-direction:row; padding-left:0; gap:8px;}
  #wrapper .header-wrapper .header-container .menu-wrapper .menu .menu-item {font-size:1rem;}
  #wrapper .header-wrapper .header-container .menu-wrapper .menu .menu-item:before {display:none!important;}
  #wrapper .header-wrapper .header-container .menu-wrapper .menu .menu-item:after {opacity:1; font-size:14px;}
  #wrapper .header-wrapper .header-container .menu-wrapper .menu .menu-item:last-child:after {display:none;}
}

@media (max-width:640px) {
  #wrapper .header-wrapper {padding:8px;}
  #wrapper .header-wrapper .header-container {gap:8px;}
  #wrapper .header-wrapper .header-container .logo-wrapper .logo {width:48px; height:48px;}
  #wrapper .header-wrapper .header-container .menu-wrapper .title {font-size:1rem;}
  #wrapper .header-wrapper .header-container .menu-wrapper .menu .menu-item {font-size:.8rem;}
  #wrapper .header-wrapper .header-container .menu-wrapper .menu .menu-item:after {font-size:12px;}
}