@media only screen
and (max-width: 1300px)
{
  #banner .mainFrame {width: 100%; padding: 0 !important;}

  #itemDetail .inner .mainPhoto {width: calc(50% - 20px); margin: 20px 20px 0 0;}
}


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

  #whisperFrame .inner .close {top: 14px; right: 14px;}
}



@media only screen
and (max-width: 900px)
{
  .menuFrame {display: none;}

  #header .inner .burgerFrame {margin-bottom: 20px; align-items: flex-end; display: -webkit-flex; display: -webkit-box; display: -moz-flex; display: -moz-box; display: -ms-flexbox; display: flex;}
  .burger {position: relative; width: 30px; height: 24px; cursor: pointer; z-index: 1100; flex-direction: column; justify-content: space-between; display: -webkit-flex; display: -webkit-box; display: -moz-flex; display: -moz-box; display: -ms-flexbox; display: flex;}
  .burger span {height: 4px; width: 100%; background: #000000; border-radius: 2px; transition: 0.3s ease; transform-origin: center;}
  .burger.active span:nth-child(1) {transform: rotate(45deg) translate(8px, 5px);}
  .burger.active span:nth-child(2) {opacity: 0;}
  .burger.active span:nth-child(3) {transform: rotate(-45deg) translate(9px, -6px);}

  #header .inner {position: relative; flex-wrap: wrap; align-items: center;}
  #header .inner:before {right: 50%;}
  #header .inner .logo {width: auto; margin: 0; align-items: center;}
  #header .inner .searchFrame {width: auto; margin: 0; align-items: center;}
  #header .inner .searchFrame .cover {position: unset;}
  #header .inner .burgerFrame {margin: 0; align-items: center;}
  #whisperFrame {width: 100%; top: calc(100% - 20px);}

  #header .inner .menuFrame {position: absolute; top: 100%; right: 0; width: 450px; max-width: 100%; background-color: #0094c1; color: #ffffff;}
  #header .inner .menuFrame .menu ul {width: 100%; flex-direction: column;}
  #header .inner .menuFrame .menu ul li {width: 100%; border-bottom: 1px dotted #ccc;}
  #header .inner .menuFrame .menu ul li a {width: 100%; padding: 10px 10px; text-align: right; justify-content: right; color: #ffffff;}
  #header .inner .menuFrame .menu ul li:hover {color: inherit;}
}


@media only screen
and (max-width: 700px)
{
  .catList .item {width: calc(33.3333% - 40px / 3); margin: 10px 20px 10px 0;}
  .catList .item:nth-child(3n) {margin-right: 0;}

  #itemDetailText .inner iframe {max-width: 100%; min-width: unset; aspect-ratio: 16/9; height: auto;}
}


@media only screen
and (max-width: 600px)
{
  .catList .item {width: calc(50% - 10px); margin: 10px 20px 10px 0;}
  .catList .item:nth-child(3n) {margin-right: 20px;}
  .catList .item:nth-child(2n) {margin-right: 0;}
  .catList .item .data .btn span {min-width: unset; padding-left: 20px; padding-right: 20px;}

  #itemDetail .inner {flex-direction: column;}
  #itemDetail .inner .right {order: 1; width: 100%; margin: 10px 0;}
  #itemDetail .inner .right .dostupnost {display: none;}
  #itemDetail .inner .mainPhoto {order: 2; width: 100%; margin: 10px 0;}
  #itemDetail .inner .row2 {order: 3; flex-direction: column; width: 100%; margin: 10px 0;}
  #itemDetail .inner .row2 .otherPhotos {width: 100%; margin: 10px 0;}
  #itemDetail .inner .row2 .buyFrame {width: 100%; margin: 10px 0;}
  #itemDetail .inner .row2 .buyFrame .dostupnost {display: block;}

  #itemDetail .inner .mainPhoto .photosList .item .cover {width: 100%; margin: 30px 0;}

  .tinymceCont h1 {font-size: 24px;}
  #basicList .inner h2 {font-size: 30px;}
  #kontaktFrame {margin: 30px 0 0 0;}
  #kontaktFrame .inner h2 {font-size: 24px;}

  #homeText .inner .logo {width: 60%; margin: 50px 20% 0 20%;}

  #filesFrame .files .file {margin: 20px;}

  #footer {padding-bottom: 100px;}
  #footer .inner .logo {width: 250px;}
}


@media only screen
and (max-width: 500px)
{
  #banner .inner .bannerList .item .cover {width: calc(100% - 20px); margin: 0 10px;}
  #banner .inner .bannerList .swiper-button-prev {display: none;}
  #banner .inner .bannerList .swiper-button-next {display: none;}

  #header {height: auto;}
  #header .inner {height: auto;}
  #header .inner .logo {order: 1; height: auto; margin: 10px 0;}
  #header .inner .burgerFrame {order: 2; height: auto; margin: 10px 0;}
  #header .inner .searchFrame {order: 3; width: 100%; height: auto; margin: 10px 0;}
  #header .inner .searchFrame form {width: 100%;}
  #header .inner .searchFrame .cover input[type="text"] {width: 100%;}

  #headerPodFixed {height: 108px;}

  #whisperFrame {display: none;}

  #kontaktFrame {margin: 10px 0 20px 0;}

  #basicList {padding: 30px 0;}
  #basicList .inner h2 {padding: 0 0 20px 0; font-size: 24px;}

  #mainText {padding: 0;}

  .webform .inner .left {flex-direction: column;}
  .webform .inner .bottom {flex-direction: column;}
  .webform .inner .bottom .submitBlock {margin-top: 20px;}

  .catList .item {padding: 15px;}
  .catList .item h3 {margin: 0 0; font-size: 18px;}
  .catList .item .data {padding: 15px;}
  .catList .item .data h4 {margin: 0; font-size: 18px;}
  .catList .item .data p {font-size: 14px;}
  .catList .item .data .btn span {font-size: 15px; font-weight: 700;}
}


@media only screen
and (max-width: 400px)
{
  .catList .item {aspect-ratio: 1/1; border-radius: 0;}
  .catList .item .data {border-radius: 0;}
}