.banner { display:flex; justify-content:space-between; align-items:center; gap:30px; font-family:"Myriad Pro"; height:70px; margin:5px 25px; }
.banner .logo-container { font-size:18px; color:#768ab4; }
.banner .menu { flex:1; font-size:16px; }
.banner .menu a { display:inline-block; text-decoration:none; padding:7px 10px; color:#a3a8ba; }
.banner .menu a.selected,
.banner .menu a:hover { color:#000; }
.banner .menu-login { font-size:14px; color:#838994; }
.banner .menu-login button { color:#999; display:inline-block; font:inherit; }
.banner .menu-login button:hover { color:#000; }
.banner .menu-login button .fa-user { margin-right:4px; }
.banner .menu-login > a { display:inline-block; padding-right:8px; }
.banner .menu-login .user-menu-popover { margin-top:6px; }
.banner .search { position:relative; }
.banner:has(.search:focus-within) .menu { display:none; }
.banner .search:focus-within { flex:1; }
.banner .search-icon { position:absolute; top:8px; left:7px; color:#aaa; pointer-events:none; }
.banner .search input[type=text] { box-sizing:border-box; font-size:16px; border-radius:20px; padding:4px 6px 4px 25px; border:solid 1px #e0e0e0; width:100px; }
.banner .search:focus-within input[type=text] { width:100%; }
.banner .main-menu-icon-container { position:relative; }
.banner .main-menu-icon { cursor:pointer; font-size:26px; }

@media (min-width: 801px) {
  .banner .main-menu-icon-container { display:none !important; }
}

@media (max-width: 800px) {
  .banner .logo-container,
  .banner .menu { display:none !important; }
  .banner .search { flex:1; min-width:0; }
  .banner .search input[type=text] { width:100%; }
  .banner .menu-login .user-name { display:none; }
  .banner .menu-login button .fa-user { margin-right:0; font-size:26px; }
}