@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;}

  #header .topMenuFrame {display: none;}
  #mainMenu ul {display: none;}
  #mainMenu {position: relative; align-items: center; justify-content: flex-end;}

  /* Burger jako křížek */
  .burger {position: relative; width: 30px; height: 36px; padding: 0 10px; margin: 0 10px 0 10px; cursor: pointer; z-index: 555; background-color: #e7745a; border-radius: 20px; display: flex; flex-direction: column; justify-content: center;}
  .burger span {height: 4px; width: 100%; margin: 2px 0; background: #ffffff; border-radius: 2px; transition: 0.3s ease; transform-origin: center;}
  .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);}

  #menuMobileFrame {display: flex; align-items: center; }
  #menuMobileFrame span.name {color: #ffffff; text-transform: uppercase; font-weight: 700;}

  #menuMobile {display: none; position: absolute; z-index: 99999; background-color: #e7745a; top: 100%; right: 0;}
  #menuMobile.active {display: flex;}
  #menuMobile .menuMobileContent {}
  #menuMobile .menuMobileContent .btn {width: 100%; height: auto; padding: 0 0 0 20px; border-bottom: 1px solid #ec8d78; color: #fff; font-weight: 700; align-items: center; justify-content: space-between;}
  #menuMobile .menuMobileContent .btn.active {background-color: #c65137;}
  #menuMobile .menuMobileContent .btn.active a {}
  #menuMobile .menuMobileContent .btn A {width: 80%; text-transform: uppercase; padding: 10px 0; line-height: 1.2; font-weight: 700; font-size: 16px;}
  #menuMobile .menuMobileContent .btn A.plusMinus {width: auto;}
  #menuMobile .menuMobileContent .btn.btnlvl2 {background-color: #84a59d; color: #fff; border-bottom: 1px solid #93b0a9;}
  #menuMobile .menuMobileContent .btn.btnlvl2 a {text-transform: none;}
  #menuMobile .menuMobileContent .btn .plusMinus {position: relative; margin: 0px 10px 0px; min-height: 40px; justify-content: flex-start; padding: 0px 8px;}
  #menuMobile .menuMobileContent .btn .plusMinus:BEFORE {height: 3px; background-color: #fff; content: ""; width: 80%; position: absolute; left: 0; transition: all .5s; top: calc(50% - 1px);}
  #menuMobile .menuMobileContent .btn .plusMinus:AFTER {height: 3px; background-color: #fff; content: ""; width: 80%; position: absolute; left: 0; transition: all .5s; top: calc(50% - 1px); transform: rotate(90deg); opacity: 1;}
  #menuMobile .menuMobileContent .btn .plusMinus.minus::BEFORE {transform: rotate(180deg);}
  #menuMobile .menuMobileContent .btn .plusMinus.minus::AFTER {transform: rotate(360deg); opacity: 0;}
  #menuMobile .menuMobileContent .btn .lvl2 {padding-left: 10px; font-weight: 600; font-size: 14px; font-size: 16px;}
  #menuMobile .menuMobileContent .btn .lvl3 {padding-left: 40px; font-style: italic; font-weight: 100; font-size: 13px;}


  #banner .inner .bannerList .item .cover .photo .text {width: 92%; margin: 0 4%;}
}


@media only screen
and (max-width: 1000px)
{
  #banner .inner .bannerList .item .cover .photo {height: 400px;}
  #banner .inner .bannerList .item .cover .photo .text .wrapper .name {font-size: 28px;}
  #banner .inner .bannerList .item .cover .photo .text .wrapper .popis {font-size: 28px;}

  #komory .inner .item {font-size: 16px; font-weight: 400;}

  #dlazdice .inner .item h2 {font-size: 22px; font-weight: 400;}
}


@media only screen
and (max-width: 800px)
{
  #header {margin: 15px 0; flex-direction: column; align-items: center;}
  #header .search {margin: 15px 0;}
  #header .contact {align-items: center;}


  #header .search {position: relative; width: 100%; justify-content: center;}
  #header .search .input {position: unset;}
  #whisperFrame {width: 100%; margin: 0; left: 0;}
  #whisperFrame .inner::before {right: calc(50% - 10px);}
  #whisperFrame .inner .close {right: 0;}


  #banner .inner .bannerList .item .cover .photo {height: 300px;}
  #banner .inner .bannerList .item .cover .photo .text .wrapper .name {font-size: 24px;}
  #banner .inner .bannerList .item .cover .photo .text .wrapper .popis {font-size: 24px;}


  #homeText .inner {flex-direction: column; padding: 20px 0;}
  #homeText .inner .left {width: 100%;}
  #homeText .inner .left h1 {padding: 60px 0 0 0; text-align: center; font-size: 28px; background-position: top center;}
  #homeText .inner .right {width: 100%; flex: unset;}


  #komory .inner {justify-content: center;}
  #komory .inner .item {width: 150px; margin: 10px;}
  #komory .inner .item:nth-child(5n) {margin: 10px;}


  #dlazdice {margin: 0 0 20px 0;}
  #dlazdice .inner .item {height: 80px;}
  #dlazdice .inner .item .perex {margin: 0;}
  #dlazdice .inner .item.item-1 {width: calc(50% - 10px); margin: 10px 20px 10px 0;}
  #dlazdice .inner .item.item-2 {width: calc(50% - 10px); margin: 10px 0 10px 0;}
  #dlazdice .inner .right {width: 100%; flex-direction: row;}
  #dlazdice .inner .right .item.item-3 {width: calc(50% - 10px); height: 80px; margin: 10px 20px 10px 0;}
  #dlazdice .inner .right .item.item-4 {width: calc(50% - 10px); height: 80px; margin: 10px 0 10px 0;}


  #news .inner .item {width: calc(50% - 15px);}
  #news .inner .item:nth-child(3n) {margin-right: 30px;}
  #news .inner .item:nth-child(2n) {margin-right: 0;}


  #footer {padding: 20px 0 30px 0;}
  #footer .inner {flex-direction: column;}
  #footer .inner .left {width: 100%; padding: 0; text-align: center;}
  #footer .inner .left .logo {margin: 20px 0 40px 0;}
  #footer .inner .right {margin: 40px 0 0 0;}
  #footer .inner .right h3 {text-align: center;}


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


  #kontakt .inner .text {width: 100%;}
  #kontakt .inner .map {width: 100%;}
  #kontakt .inner .people .list .item {width: calc(50% - 20px);}
  #kontakt .inner .people .list .item:nth-child(3n) {margin-right: 40px;}
  #kontakt .inner .people .list .item:nth-child(2n) {margin-right: 0;}
}


@media only screen
and (max-width: 600px)
{
  #komory {margin: 0;}
  #komory .inner .item {width: calc(50% - 10px); margin: 10px 20px 10px 0; height: 80px; aspect-ratio: unset;}
  #komory .inner .item:nth-child(2n) {margin-right: 0;}

  #dlazdice .inner .item {height: auto !important; padding: 10px;}

  #kontakt .inner .people .list .item {width: 100%; margin: 20px 0;}
  #kontakt .inner .people .list .item:nth-child(3n) {margin-right: 0;}
  #kontakt .inner .people .list .item:nth-child(2n) {margin-right: 0;}
}


@media only screen
and (max-width: 500px)
{
  #banner .inner .bannerList .item .cover .photo {height: 200px;}
  #banner .inner .bannerList .item .cover .photo .text .wrapper .name {font-size: 18px;}
  #banner .inner .bannerList .item .cover .photo .text .wrapper .popis {font-size: 14px;}
  #banner .inner .bannerList .item .cover .photo .text .wrapper .btn a {padding: 5px 14px; font-size: 12px;}


  #menuMobile {width: 100%;}
  #menuMobile .menuMobileContent {width: 100%;}


  #komory {margin: 20px 0 0 0;}
  #komory .inner .item {width: 100%; margin: 5px 0;}
  #komory .inner .item:nth-child(5n) {margin: 5px 0;}

  #dlazdice {margin: 20px 0 10px 0;}
  #dlazdice .inner .item {width: 100% !important; margin: 5px 0 !important;}
  #dlazdice .inner .right {flex-direction: column;}


  #homeText .inner .left h1 {font-size: 24px;}


  #news .years .item {padding: 8px 16px; margin: 0 10px 0 0;}

  #news .inner .item {width: 100%; margin: 5px 0;}
  #news .inner .item:nth-child(3n) {margin-right: 0;}
  #news .inner .item:nth-child(2n) {margin-right: 0;}


  #footer .inner .right .contactList {flex-direction: column;}
  #footer .inner .right .contactList .item {width: 100%; margin: 20px 0 20px 0;}
}


@media only screen
and (max-width: 400px)
{

}