:root {
      --red: #b72b2b;
      --red-dark: #5d1016;
      --paper: #d5d0c8;
      --muted: #9c9690;
      --ink: #080707;
      --panel: rgba(20, 12, 13, .88);
    }

    * {
      box-sizing: border-box;
    }

    html,
    body {
      margin: 0;
      min-height: 100%;
    }

    body {
      color: var(--paper);
      font: 13px/1.25 "Trebuchet MS", Verdana, sans-serif;
      background: black url('bg.jpg') center 40px no-repeat;
      overflow-x: hidden;
    }


    a {
      color: #c84040;
      text-decoration: underline;
    }

    a:hover,
    a:focus {
      color: #fff;
    }

    img {
      border: 0;
      max-width: 100%;
    }

    .page {
      position: relative;
      width: min(992px, 100%);
      margin: 0 auto;
      min-height: 760px;
      padding: 44px 28px 90px;
    }

    .brand {
      display: block;
      position: absolute;
      left: 30px;
      top: 155px;
      width: 230px;
      height: 95px;
      text-indent: -9999px;
      overflow: hidden;
    }

    .mainmenu {
      position: absolute;
      left: 51px;
      top: 262px;
      width: 158px;
      margin: 0;
      padding: 0;
    }

    .mainmenu li {
      list-style: none;
      margin: 0 0 4px;
    }

    .mainmenu a:focus {
      outline: 2px solid var(--red);
      outline-offset: 2px;
    }

    .mainmenu a {
      display: inline-block;
      padding: 1px;
      text-decoration: none;
    }

    .mainmenu img {
      display: block;
      image-rendering: auto;
    }

    
.mainmenu > li {
  position: relative;
}

.submenu, .subsubmenu {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  background: var(--panel);
  border: 1px solid rgba(183, 43, 43, .5);
  box-shadow: 4px 4px 10px rgba(0,0,0,0.5);
  padding: 5px;
  min-width: 130px;
  z-index: 100;
}

.mainmenu li:hover > .submenu,
.mainmenu li:focus-within > .submenu,
.submenu li:hover > .subsubmenu,
.submenu li:focus-within > .subsubmenu {
  display: block;
}

.submenu li {
  margin-bottom: 2px;
  position: relative;
}

    .banner {
      position: absolute;
      left: 310px;
      top: 55px;
      width: 468px;
      min-height: 60px;
    }

    .home-panel {
      position: absolute;
      width: 500px;
    }


    .home-panel h2 {
      position: absolute;
      margin: 0;
      padding: 8px 16px 9px;
      color: #e7e1d8;
      
      font: 700 20px/1 Georgia, "Times New Roman", serif;
      letter-spacing: .5px;
      text-transform: uppercase;
      text-shadow: 2px 2px 0 #050404;
    }

    .home-panel p {
      margin: 0;
      text-align: justify;
    }

    .home-panel strong {
      color: #fff;
    }

    .novinky {
      left: 302px;
      top: 132px;
      min-height: 190px;
      padding: 58px 42px 34px 18px;
    }

    .novinky h2 {
      left: 38px;
      top: -2px;
    }

    .predstaveni {
      left: 242px;
      top: 312px;
      min-height: 178px;
      padding: 66px 18px 32px 34px;
    }

    .predstaveni h2 {
      left: 34px;
      top: -2px;
    }

    .foto {
      left: 271px;
      top: 474px;
      min-height: 195px;
      padding: 54px 38px 38px 20px;
    }

    .foto h2 {
      right: 64px;
      top: -2px;
    }

    .photo-row {
      display: grid;
      grid-template-columns: repeat(3, 120px);
      gap: 20px;
      align-items: start;
    }

    .photo-row a {
      display: block;
      width: 122px;
      height: 92px;
      border: 1px solid #333;
      background: #330913;
    }

    .photo-row a:hover,
    .photo-row a:focus {
      border-color: var(--red);
    }

    .more {
      text-align: right;
      padding-top: 10px;
    }

    .logo-pruh {
      position: fixed;
      z-index: 5;
      left: 0;
      right: 0;
      top: 0;
      display: flex;
      align-items: center;
      gap: 4px;
      min-height: 30px;
      padding: 2px 4px;
      background: #fff;
      overflow: hidden;
      box-shadow: 0 2px 12px rgba(0,0,0,.55);
    }

    .logo-pruh img {
      display: block;
      max-height: 26px;
      width: auto;
      border: 1px solid #fff;
    }

    .archive-link {
      position: absolute;
      left: 310px;
      top: 696px;
      color: var(--muted);
      font-size: 12px;
    }

    @media (max-width: 820px) {
      .page {
        min-height: 0;
        padding: 58px 18px 42px;
      }

      .brand,
      .mainmenu,
      .banner,
      .home-panel,
      .archive-link {
        position: relative;
        left: auto;
        top: auto;
      }

      .brand {
        margin: 28px 0 16px;
      }

      .mainmenu {
        display: grid;
        grid-template-columns: repeat(2, minmax(120px, 1fr));
        gap: 2px 12px;
        width: min(360px, 100%);
        margin-bottom: 20px;
      }

      .submenu {
        grid-column: 1 / -1;
      }

      .banner {
        width: min(468px, 100%);
        margin: 0 0 20px;
      }

      .home-panel {
        width: 100%;
        margin: 0 0 18px;
      }

      .photo-row {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      }

      .archive-link {
        display: block;
        margin-top: 18px;
      }
    }

    .obsah-panel {
      position: absolute;
      left: 310px;
      top: 145px;
      width: 450px;
      min-height: 500px;
      padding: 0 0 100px 0;
    }
    .obsah-panel::after {
      display: none;
    }
    .obsah-panel h2 {
      padding: 0;
      margin: 0 0 25px;
      text-align: right;
    }
    .obsah-panel h2 img {
      height: 60px;
    }
    .obsah-panel h3 {
      padding: 0;
      margin: 10px 0 5px;
      font-weight: bold;
      font-size: 1.2em;
      color: #c33;
    }
    .obsah-panel .barva.mensi.right {
      text-align: right;
      font-size: 11px;
      color: var(--muted);
      margin-top: 8px;
    }
    .obsah-panel .justify {
      text-align: justify;
      margin-bottom: 16px;
    }
    @media (max-width: 820px) {
      .obsah-panel {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        margin-bottom: 20px;
      }
    }

/* Utilites appended to fix subpages */
.fl_l{ float:left; }
.fl_r{ float:right; }
.reset{ clear:both; height:1px; overflow:hidden; margin-bottom:-1px; }
.clear{ clear:both; }
.left{ text-align:left; }
.right{ text-align:right; }
.center{ text-align:center; }
.justify{ text-align:justify; }
.bold{ font-weight:bold; }
.italic{ font-style: italic; }
.inv{ display:none; }
.no_border{ border:0; }
.middle *{ vertical-align:middle; }
.block{ display:block; }
.mensi{ font-size:.9em; }

.w30 { width: 30px; }
.w35 { width: 35px; }
.w50 { width: 50px; }
.w65 { width: 65px; }
.w70 { width: 70px; }
.w85 { width: 85px; }
.w90 { width: 90px; }
.w100 { width: 100px; }
.w110 { width: 110px; }
.w150 { width: 150px; }
.w210 { width: 210px; }
.w220 { width: 220px; }
.w240 { width: 240px; }
.w265 { width: 265px; }
.w310 { width: 310px; }
.w320 { width: 320px; }
.w330 { width: 330px; }
.h5 { height: 5px; }
.h10 { height: 10px; }
.h20 { height: 20px; }
.h70 { height: 70px; }

a img.bor, img.bor {
  border:1px solid #333;
}
a:hover img.bor {
  border-color:#c33;
}
.fotoplace {
  display:block;
  width:150px; height:120px;
  float:left;
}
.foto_sady li {
  margin-bottom:25px;
}
.ramecek {
  padding:10px 20px 20px;
  border:1px solid #c33;
  margin:20px 0;
}
.odsaz {
  height: 20px;
}
.poznamka {
  font-style: italic;
  color: #aaa;
}

.barva { color: #c33; }
.active { color: white; }

.dotted {
  border-bottom: 1px dotted rgba(213,208,200,.2);
  height: 1px;
  overflow: hidden;
  margin: 12px 0;
}