@media only screen
and (max-width: 1250px)
{
  #bannerFrame .left {padding-left: 20px;}
  #bannerFrame .left .text h2 {font-size: 80px;}
  #bannerFrame .left .text h2 span {font-size: 40px;}

  #bannerContainer {height: 500px;}
}


@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 .logo {order: 1;}
  #header .kontakt {order: 2;}

  #burgerLine {display: flex; justify-content: flex-end; align-items: center; order: 3;}

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

  .burger div.name {position: absolute; left: 0; top: 0; height: 100%; font-size: 18px; font-weight: 300; display: flex; align-items: center; text-transform: uppercase;}

  #menu {position: fixed; top: 0; right: 0; width: 260px; height: 100%; margin: 0; background: #222; color: white; transform: translateX(100%); transition: transform 0.3s ease; z-index: 1000;}
  #menu.active {transform: translateX(0);}

  #menu ul {flex-direction: column; width: 100%; overflow-y: auto; text-align: right; padding-top: 40px;}
  #menu ul li {padding: 10px 0;}
  #menu ul li a {width: 100%;}
  #menu ul li a:hover {background-color: transparent;}
  #menu ul li.active {background-color: #d0a141; color: #ffffff;}


  #menu .mobileMenuClose {display: flex; position: absolute; left: 18px; top: 10px;}
  #menu .mobileMenuClose svg {width: 20px !important; height: 20px !important; fill: #ffffff;}

  /* Menu Overlay */
  .menuOverlay {position: fixed; inset: 0; background: rgba(0,0,0,0.4); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; z-index: 999;}
  .menuOverlay.show {opacity: 1; pointer-events: auto;}

  #gallery .list .masonry {column-count: 5;}
}


@media only screen
and (max-width: 900px)
{
  #coZaridime .inner .icons .item .icon img {height: 60px;}
  #coZaridime .inner .icons .item p {font-size: 15px; font-weight: 600;}

  #gallery .list .masonry {column-count: 4;}
}


@media only screen
and (max-width: 800px)
{
  #bannerContainer {height: 350px;}

  #bannerFrame .left .text h2 {max-width: 100%; margin: 0 0 20px 0; padding: 70px 0 0 0; font-size: 50px; background-size: 50px auto;}
  #bannerFrame .left .text h2 span {font-size: 24px;}
  #bannerFrame .left .text p {font-size: 16px;}

  #kontakt {padding: 40px 0 0 0;}
  #kontakt .inner {flex-direction: column; gap: 0;}
  #kontakt .inner .left {width: 100%;}
  #kontakt .inner .right {width: 100%;}
  #kontakt .inner .right iframe {height: 400px;}

  #footer {padding: 20px 0 70px 0;}
  #footer .inner {flex-wrap: wrap;}
  #footer .inner .left {order: 2;}
  #footer .inner .center {width: 100%; flex: unset; order: 1;}
  #footer .inner .right {order: 3;}
}


@media only screen
and (max-width: 700px)
{
  #header {padding: 0 20px;}
  #header .logo {margin: 15px 15px 15px 0;}

  .burger {padding-right: 0;}

  #gallery .list .masonry {column-count: 3;}
}


@media only screen
and (max-width: 600px)
{
  #header .kontakt {display: none;}

  #bannerContainer {height: 250px;}

  #bannerFrame .left .text h2 {padding: 50px 0 0 0; font-size: 40px; background-size: 40px auto;}
  #bannerFrame .left .text h2 span {font-size: 17px; font-weight: 300;}
  #bannerFrame .left .text p {font-size: 13px; font-weight: 300; line-height: 1.2;}

  #coZaridime .inner h2 {margin: 20px 0; font-size: 40px;}
  #coZaridime .inner .icons {flex-wrap: wrap; justify-content: center;}
  #coZaridime .inner .icons .item p {font-size: 14px; font-weight: 400;}

  #homeGallery {}
  #homeGallery .item {width: 50%;}

  #footer .inner .left {width: 100%; padding: 20px 0; flex: unset; text-align: center;}
  #footer .inner .right {width: 100%; flex: unset; text-align: center;}
}


@media only screen
and (max-width: 500px)
{
  .tinymceCont h1 {font-size: 44px;}
  .tinymceCont .vetsi-pismo {font-size: 20px;}
  .tinymceCont p {font-size: 16px;}

  #homeText {padding: 20px 0;}

  #gallery {width: calc(100% - 30px); margin: 0 15px;}
  #gallery .list .masonry {column-count: 2; column-gap: 15px;}
  #gallery .list .masonry .brick {margin-bottom: 15px;}
}


@media only screen
and (max-width: 450px)
{
  .burger div.name {display: none;}

  #bannerContainer {height: 200px;}

  #bannerFrame .left {padding: 0 20px;}
  #bannerFrame .left .text {}
  #bannerFrame .left .text h2 {padding: 50px 0 0 0; font-size: 40px; background-size: 40px auto;}
  #bannerFrame .left .text h2 span {font-size: 15px; font-weight: 300;}
  #bannerFrame .left .text p {line-height: 1;}
}


@media only screen
and (max-width: 400px)
{
  #bannerFrame .left .text p {display: none;}
}