@media only screen
and (max-width: 1200px)
{
  .mainFrame {width: 100%; padding: 0 40px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}

  #banner .inner .bannerList .cover .photo .text {width: calc(100% - 40px); margin: 0 20px;}

  .item-swiper-button-next {right: 0; z-index: 99;}

  #items.pageProjekty .inner .item {min-width: unset;}
}


@media only screen
and (max-width: 1100px) {
  #header .inner .menuFrame {display: none;}

  .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: #ffffff; 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: absolute; top: 100%; right: 0; width: 300px; background-color: #272727; opacity: 0.75;}
  #header .inner .menuFrame .menu ul {margin: 10px 10px; padding: 0 20px; width: 100%; flex-direction: column;}
  #header .inner .menuFrame .menu ul li {margin: 4px 0; justify-content: flex-end;}
  #header .inner .menuFrame .menu ul li::after {display: none;}
}


@media only screen
and (max-width: 1000px)
{
  #homeIkony .inner {flex-direction: column; padding: 30px 15px;}
  #homeIkony .inner .left {width: 100%; margin: 0; padding: 0;}
  #homeIkony .inner .right {width: 100%; margin: 30px 0 0 0;}

  #items.pageProjekty .inner .item {width: calc(33.3333% - 40px / 3);}
  #items.pageProjekty .inner .item:nth-child(4n) {margin-right: 20px;}
  #items.pageProjekty .inner .item:nth-child(3n) {margin-right: 0;}

  #homeText {margin: 30px 0;}
  #homeText .inner {flex-direction: column; align-items: center;}
  #homeText .inner .left {max-width: 100%; margin: 0 0 20px 0;}
  #homeText .inner .left .photo {height: auto; max-width: 100%; overflow: hidden;}


  #kontaktFormPage .inner {flex-direction: column;}
  #kontaktFormPage .inner .left {order: 2; width: 100%;}
  #kontaktFormPage .inner .right {order: 1; width: 100%;}


  #kontaktFormPage {margin: 30px 0;}

  .tinymceCont h1 {font-size: 34px;}
}


@media only screen
and (max-width: 800px)
{
  #homeIkony .inner .right .ikony .item {padding: 60px 10px 20px 10px;}
}


@media only screen
and (max-width: 700px)
{
  #kontaktLine {padding: 30px 0;}
  #kontaktLine h2 {text-align: center;}
  #kontaktLine .inner {flex-direction: column; align-items: center; text-align: center;}
  #kontaktLine .inner .item {margin: 0 0 30px 0;}

  #items.pageProjekty .inner .item {width: calc(50% - 10px);}
  #items.pageProjekty .inner .item:nth-child(4n) {margin-right: 0;}
  #items.pageProjekty .inner .item:nth-child(3n) {margin-right: 20px;}
  #items.pageProjekty .inner .item:nth-child(2n) {margin-right: 0;}


  #serviceList {flex-direction: column;}
  #serviceList .item {width: 100%; margin: 5px 0;}

  .tinymceCont h1 {font-size: 30px;}
}


@media only screen
and (max-width: 600px)
{
  #header .inner .logo {width: 300px;}
  #header .inner .logo img {max-width: 100%;}
}


@media only screen
and (max-width: 500px)
{
  .mainFrame {padding: 0 20px;}

  #top .logoBig {width: 200px; left: calc(50% - 200px / 2); top: calc(50% - 122px / 2);}

  #header .inner .logo {width: 250px;}
  #header .inner .logo img {max-width: 100%;}

  #homeIkony .inner .right .ikony .item {width: calc(50% - 10px); margin: 20px 20px 20px 0; font-size: 13px; font-weight: 400; line-height: 1.2;}
  #homeIkony .inner .right .ikony .item:nth-child(3n) {margin-right: 20px;}
  #homeIkony .inner .right .ikony .item:nth-child(2n) {margin-right: 0;}

  #mainText {margin: 10px 0;}

  .tinymceCont h1 {font-size: 26px;}
}


@media only screen
and (max-width: 400px) {
  #items {margin: 0;}
  #items.pageProjekty .inner .item {width: 100%; margin: 10px 0;}
  #items.pageProjekty .inner .item:nth-child(4n) {margin-right: 0;}
  #items.pageProjekty .inner .item:nth-child(3n) {margin-right: 0;}
  #items.pageProjekty .inner .item:nth-child(2n) {margin-right: 0;}
}
