/* Responsive layer - loaded after the main stylesheets. Desktop (>1000px) look is unchanged. */

/* Keyboard access to dropdowns (all sizes) */
#cssmenu ul li.has-sub:focus-within > ul { display: block; }
#cssmenu .menu-toggle { display: none; }

@media (max-width: 1000px) {
  body { background-image: none; }
  #wrap { width: auto; max-width: 100%; padding: 0 10px; box-sizing: border-box; display: flex; flex-direction: column; }
  #content { order: 1; }
  #sidebar { order: 2; }
  #footer  { order: 3; }

  #wrap img { max-width: 100%; height: auto; }
  #wrap > a > img { max-height: 90px; width: auto; }

  /* Layout: stack everything */
  #content { width: auto; margin: 0 0 15px 0; box-sizing: border-box; }
  .full, .left, .right { float: none; width: auto; margin: 15px 12px 0 12px; clear: both; }
  #sidebar { float: none; width: auto; margin: 0 0 15px 0; }
  #sidebar ul.sidemenu, #sidebar ul.sidemenu ul { width: auto; }
  .clear { width: 100%; }
  #content div[style*="width"] { width: auto !important; float: none !important; }
  #content table { display: block; max-width: 100%; overflow-x: auto; }
  #content iframe { max-width: 100%; }
  #footer, #footer div { width: auto !important; float: none !important; clear: both !important; box-sizing: border-box; }
  #footer img { float: none !important; padding: 5px 0 !important; }
  #extDis { left: 10px; right: 10px; top: 80px; width: auto; }

  /* Menu: collapsible */
  #cssmenu { height: auto; margin: 10px 0; overflow: hidden; }
  #cssmenu .menu-toggle {
    display: block; width: 100%; padding: 12px 15px; border: 0; background: transparent; color: #fff;
    font: bold 15px Arial, Helvetica, sans-serif; text-align: left; cursor: pointer;
  }
  #cssmenu .menu-toggle:after { content: "\2630"; float: right; }
  #cssmenu > ul { display: none; }
  #cssmenu.open > ul { display: block; }
  #cssmenu > ul > li { float: none; display: block; }
  #cssmenu > ul > li > a { text-align: left; border-right: 0; border-top: 1px solid rgba(255,255,255,.25); }
  #cssmenu > ul > li > a:after, #cssmenu > ul > li.has-sub > a:before { display: none; }
  #cssmenu > ul > li:first-child > a { border-radius: 0; }
  #cssmenu ul li > ul, #cssmenu ul li > div { display: block; position: static; width: auto; padding: 0; background: rgba(0,0,0,.2); border-radius: 0; }
  #cssmenu ul li > ul li a { padding: 10px 20px 10px 35px; }
  #cssmenu ul li.has-sub:hover > a { top: 0; padding: 12px 20px; }
}

@media (max-width: 480px) {
  h1 { font-size: 2em; }
  #heading > span { display: none; } /* gradient overlay misaligns when the heading wraps */
  #heading { -webkit-text-fill-color: #052cd1; text-shadow: none; margin-left: 0; }
}