/* Responsive additions only. The original desktop design remains unchanged. */
html { -webkit-text-size-adjust: 100%; }

@media screen and (max-width: 980px) {
  body { overflow-x: hidden; }
  .resize, .footer { width: 100%; }
  .header > .clr img { width: 100%; height: auto; }
  .bar { height: auto; min-height: 30px; }
  .menu, .menu ul { float: none; }
  .menu ul { display: flex; flex-wrap: wrap; }
  .menu ul li { float: none; }
  .menu ul li a { height: auto; min-height: 30px; padding: 8px 13px; }
  .content_wrapper { display: flex; align-items: stretch; }
  .sidebar { float: none; flex: 0 0 245px; width: auto; }
  .content, .subpage { float: none; width: auto; min-width: 0; flex: 1 1 auto; }
  .content { padding-left: 20px; }
  .post img { max-width: 31%; height: auto; }
  .post_cont { width: 65%; }
  .content table, .subpage table { width: 100% !important; max-width: 100%; table-layout: fixed; }
  .content table img, .subpage table img { max-width: 100%; height: auto; }
  .cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .col_left, .col_center, .col_right { float: none; width: auto; margin: 0; }
}

@media screen and (max-width: 700px) {
  body, .main { background-position: center top; }
  .header > .clr { overflow: hidden; }
  .menu ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .menu ul li, .menu ul li.first { background: url(images/separator.gif) no-repeat left top; }
  .menu ul li a { text-align: center; font-size: 13px; padding: 10px 6px 8px; }
  .content_wrapper { display: flex; flex-direction: column; padding-bottom: 10px; }
  .sidebar { order: 2; flex: none; width: auto; padding: 24px; }
  .content, .subpage { order: 1; width: auto; padding: 24px; }
  .post, .post.last { margin-bottom: 38px; }
  .post img { float: none; width: min(194px, 100%); max-width: 100%; height: auto; margin-bottom: 18px; }
  .post_cont { float: none; width: auto; }
  .subpage img { max-width: 100%; height: auto; }
  .content table td, .subpage table td { display: block; width: 100% !important; padding: 6px 0; }
  ul.sb_menu { margin-bottom: 32px; }
  .cols { display: grid; grid-template-columns: 1fr; gap: 26px; margin: 0; padding: 28px 24px; }
  .footer_bottom table { width: 100% !important; }
}

@media screen and (max-width: 420px) {
  .menu ul { grid-template-columns: 1fr; }
  .content, .subpage, .sidebar { padding-left: 18px; padding-right: 18px; }
}