@media only screen
and (max-width: 1200px)
{
  .mainFrame {width: 100%; padding: 0 10px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}
}



@media only screen
and (max-width: 900px)
{
  .burger {position: relative; width: 30px; height: 24px; cursor: pointer; z-index: 1100; display: flex; flex-direction: column; justify-content: space-between;}
  .burger span {height: 4px; width: 100%; background: #6c912a; border-radius: 2px; transition: 0.3s ease; transform-origin: center;}

  /* Burger jako křížek */
  .burger.active span:nth-child(1) {transform: rotate(45deg) translate(5px, 5px);}
  .burger.active span:nth-child(2) {opacity: 0;}
  .burger.active span:nth-child(3) {transform: rotate(-45deg) translate(6px, -6px);}

  #header .inner .menuFrame {position: relative; display: flex; align-items: center; justify-content: flex-end;}

  #header .inner .menuFrame .menu {display: none; position: absolute; right: 0; top: calc(50% + 25px); width: 300px; height: auto; background-color: #6c912a; z-index: 555;}
  #header .inner .menuFrame .menu ul {flex-direction: column; padding: 10px 20px;}
  #header .inner .menuFrame .menu ul li {margin: 10px 0; justify-content: flex-end;}
  #header .inner .menuFrame .menu ul li a {padding: 0;}
  #header .inner .menuFrame .menu ul li a:hover {background-color: transparent; text-decoration: underline;}
  #header .inner .menuFrame .menu ul li a.active {background-color: transparent; color: #123025; text-decoration: underline;}


  #footer .inner {flex-direction: column; align-items: center;}
  #footer .inner .menuFrame {margin: 0 0 30px 0;}


  .menuContent a {height: 150px; margin: 0 10px 0 0; font-size: 27px; font-weight: 700; text-align: center;}

  .table-responsive {
    width: 100%;
    overflow-x: auto;      /* horizontální scroll */
    -webkit-overflow-scrolling: touch; /* plynulý scroll na mobilech */
  }

  .table-responsive table {
    width: max-content;    /* zachová skutečnou šířku tabulky */
    border-collapse: collapse;
  }
}


@media only screen
and (max-width: 700px)
{
  .webform {width: calc(100% - 20px); margin: 0 10px;}
}


@media only screen
and (max-width: 600px)
{
  #header .mainFrame {padding: 0 10px 0 0;}
  #header .inner .image span {font-size: 25px; font-weight: 700;}
  #header .inner .image img {height: 80px;}

  .tinymceCont h1 {font-size: 27px; padding: 20px 0 0 0;}

  .menuContent {margin: 10px 0 0 0;}
  .menuContent a {height: 100px; font-size: 22px;}

  #news {margin: 10px 0 0 0;}
  #news h2 {font-size: 27px;}
  #news .inner .item {margin: 0 0 10px 0; padding: 25px 30px;}

  #mainText {margin: 0 0 10px 0;}
  #mainText .inner .webform {width: 100%; margin: 0;}

  #footer {margin: 0;}

  #mainText .inner .title {margin: 20px 0 0 0; flex-direction: column;}
  #mainText .inner .title .right {margin: 20px 0 0 0;}
  #mainText .inner .text {margin: 20px 0 0 0;}
}