@media (min-width:701px){
  .mainnav > nav.wrap{justify-content:center}
  .mainnav details>div{top:calc(100% - 1px);inset-inline-start:-12px;width:260px;min-height:0;padding:9px;background:#fff;border:1px solid #dfe7e2;border-top:4px solid #c7df3f;border-radius:0 0 12px 12px;box-shadow:0 18px 38px rgba(6,29,62,.2);overflow:hidden;z-index:1100}
  .mainnav details>div a{display:flex!important;width:100%;min-height:42px!important;height:auto!important;padding:10px 13px!important;color:#17332d!important;background:#fff!important;border-radius:7px;font-size:12px!important;font-weight:700!important;line-height:1.7;white-space:normal}
  .mainnav details>div a:hover,.mainnav details>div a:focus{color:#00694b!important;background:#f0f6f3!important}
  .mainnav details[open]>summary{color:#c7df3f}
}
@media (max-width:700px){
  .mainnav details>div{padding:5px 12px!important;background:#0d386d!important;border:0!important;border-radius:8px!important}
  .mainnav details>div a{color:#fff!important;padding:9px 12px!important}
  .mainnav details>div a:hover{color:#c7df3f!important;background:#ffffff0d!important}
}

.mainnav details>div a.cultural-subnav{padding-inline-start:30px!important;border-inline-start:2px solid #b9d8cc;border-radius:0}
/* Keep active navigation labels white; use only the underline as the active marker. */
.mainnav .sel,
.mainnav details.sel > summary,
.mainnav details[open] > summary {
  color:#fff!important;
}
.mainnav .sel::after {
  background:linear-gradient(90deg,#f2c230 0 52%,#c7df3f 52% 100%)!important;
}