@media screen and (orientation: landscape) and (max-width: 1136px) and (max-height: 640px) {
  #details {
    top: 20vh;
    height: 60vh;
  }
}
/* ---------- ---------- ---------- ---------- */
@media screen and (orientation: portrait) and (max-width: 640px) and (max-height: 1136px) {
  #details {
    top: 10vh;
    height: 60vh;
  }
  #legals {
    /* background-image: url('unsplash/providence-doucet-mE5MBZX5sko-unsplash.small.jpg'); */
  }
  #phones {
    flex-direction: column;
  }
  #qa { margin-left: 0; }
}
/* ---------- ---------- ---------- ---------- */
@media screen and (max-width: 1136px) {
  #legals {
    /* background-image: url('unsplash/providence-doucet-mE5MBZX5sko-unsplash.small.jpg'); */
  }
  #phones {
    flex-direction: column;
  }
  footer.accessibility {
    font-size: 1.05rem;
  }
}
/* ---------- ---------- ---------- ---------- */
@media screen and (max-width: 1099px) {
  #nav-top { padding: 0; }
  #nav-top-left>.nav, #nav-top-right>.nav { display: none; }
  #nav-top-menu { display: initial !important; }

  /* #nav-top-menu:hover > #nav-left { display: flex !important; } */

  #toTop {
    width: 16px;
    height: 16px;
    bottom: 16px;
  }

  #nav-top-content {
    height: var(--nav-top-height_reduce) !important;
    padding: 0 calc(var(--general-margin) * .25) !important;
  }

  noscript { top: var(--nav-top-height_reduce) !important; }

  noscript ~ #content {
    padding-top: calc( var(--nav-top-height_reduce) + var(--noscript-height) ) !important;
  }

  #nav-top-logo { height: var(--nav-top-logo-height_reduce) !important; }
  #content { padding-top: var(--nav-top-height_reduce) !important; }

  #contacts>div { flex-direction: column; gap: var(--general-gap); }

  footer { font-size: initial; }
}
/* ---------- ---------- ---------- ---------- */
@media screen and (max-width: 799px) {
  #legals { flex-direction: column; }
  footer > * { padding: .25rem 1rem; font-size: small; }
  #qs { display: none }
  #qsm, #whats { display: initial; font-size: x-small; }
  #whatsmore { font-size: x-small; }

  #intro { margin: 0 .5rem; flex-direction: column; }
  #portrait { margin-left: auto; margin-right: auto; }

  #activities { margin: 0 1rem; flex-direction: column; }
  .activity { margin: 1rem; }
  .activity_header { min-height: 10rem; }
  .activity_title { font-size: 1rem; }

  #about, #path, #citation { margin: 1rem; }

  article.news { padding: 1rem; }
  #phonecall-details{ padding: 1rem 0; }

  h1 { font-size: 1.5rem; }
}
/* ---------- ---------- ---------- ---------- */
@media screen and (orientation: portrait) {
  .mailto.mailme { display: initial !important }
}
/* ---------- ---------- ---------- ---------- */