/* K2AK phone/tablet layout. Only applies on narrow screens; desktop is unchanged. */
@media (max-width: 1020px) {
  html { -webkit-text-size-adjust: 100%; }
  body { min-width: 0; }

  /* fluid page container */
  #PageWrapper, #Header, .pageMain, #Footer, #FooterBottom { width: auto !important; max-width: 100%; }
  #PageWrapper { margin: 0 auto; padding: 8px 0 0; max-width: 820px; }
  #Header, .pageMain, #FooterContent { background: #1c1c1c; }
  #FooterContent { float: none; display: block; }
  .pageTop, #FooterTop, #FooterBottom { display: none; }

  .contentMax, .contentArea, #Showcase { margin: 0 14px !important; width: auto !important; }

  /* logo and menu stack */
  #Header { padding-top: 10px; }
  #Logo { float: none; margin: 0 auto 6px; width: 368px; max-width: 100%; }
  #Logo a { width: 100%; background-size: contain; height: 0; padding-bottom: 29%; }
  #MenuWrapper { height: auto; }
  #MainMenu { float: none; top: 0; right: 0; height: auto; display: flex; justify-content: center; margin: 0 8px; }
  #MmBody { min-width: 0; flex: 0 1 auto; }
  #MmBody ul { display: flex; flex-wrap: wrap; justify-content: center; }
  #MmLeft, #MmRight { flex: 0 0 auto; }

  /* slideshow: scale with screen width */
  #Slideshow { height: auto; }
  #SlideTop, #SlideRepeat, #SlideBottom, #slidePager { display: none; }
  #Slides { margin: 0 !important; width: 100% !important; height: auto !important; aspect-ratio: 948 / 341; }
  #Slides a, #Slides img { display: block; width: 100% !important; height: auto !important; }
  #Slides img { max-width: none; }
  #Slideshow { position: relative; }
  a.slidePrev, a.slideNext {
    position: absolute; top: 50%; margin: -20px 0 0; z-index: 30;
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(0, 0, 0, 0.5) !important; background-image: none !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
  }
  a.slidePrev { left: 8px; right: auto; }
  a.slideNext { right: 8px; left: auto; }
  a.slidePrev::after, a.slideNext::after {
    content: ""; position: absolute; top: 50%; width: 11px; height: 11px;
    border-top: 3px solid #e6e6e6; border-right: 3px solid #e6e6e6;
  }
  a.slidePrev::after { left: 55%; transform: translate(-50%, -50%) rotate(-135deg); }
  a.slideNext::after { left: 45%; transform: translate(-50%, -50%) rotate(45deg); }
  a.slidePrev:hover::after, a.slideNext:hover::after,
  a.slidePrev:active::after, a.slideNext:active::after { border-color: #3aa0ff; }

  /* columns stack */
  .one-third, .two-thirds, .half-page, .full-page,
  #Footer .one-third, #Footer .two-thirds, #Footer .half-page {
    float: none; width: auto !important; margin: 0 0 18px 0 !important; padding: 0 !important; background: none;
  }
  .half-page .half-page { margin-bottom: 0 !important; }
  .quote { width: auto; max-width: 100%; }

  /* images and embeds scale down */
  .contentArea img, .full-page img, .one-third img, .two-thirds img, .half-page img { max-width: 100%; height: auto; }
  iframe { max-width: 100%; }

  h1 { font-size: 1.6em; line-height: 1.2; }
  .impact { font-size: 1.1em; }
  .ribbon, .ribbon .tab { max-width: 100%; }
  .k2ak-logoMark, .logoMark { float: none; margin: 0 0 6px; }

  /* section ribbons become simple bars */
  .ribbon { width: auto; height: auto; margin: 0 0 12px; overflow: visible; }
  .ribbon .wrapAround { display: none; }
  .ribbon .tab { float: none; width: auto; height: auto; overflow: visible; background: #3b3f40; border-radius: 6px; padding: 9px 14px; }
  .ribbon span, .ribbon span.blogDate { float: none; display: block; margin: 0; font-size: 1.25em; line-height: 1.25; }

  /* logo above the menu */
  #Header { display: flex; flex-direction: column; }
  #Logo { order: -1; }
  #Header .clear { display: none; }

  /* no white strip at the bottom */
  #Wrapper { background: #1c1c1c; }
}