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

  #mainBanner .slide {height: 500px;}
  #mainBanner .slide .text {width: 96%; margin: auto auto; padding: 0 0 0 250px; background-size: 200px auto;}
  #mainBanner .slide .text .p1 {font-size: 40px;}
  #mainBanner .slide .text .p2 {font-size: 60px;}
  #mainBanner .slide .text .p3 {margin-top: 16px; font-size: 22px;}
}


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

}


@media only screen
and (max-width: 900px)
{
  #mainBanner .slide {height: 400px;}
  #mainBanner .slide .text {width: 96%; margin: auto auto; padding: 0 0 0 200px; background-size: 160px auto;}
  #mainBanner .slide .text .p1 {font-size: 32px;}
  #mainBanner .slide .text .p2 {font-size: 50px;}
  #mainBanner .slide .text .p3 {margin-top: 16px; font-size: 20px;}


  #header .inner .menuFrame .menu {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: white; 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);}


  #menuMobileFrame {height: 100%; align-items: center; display: -webkit-flex; display: -webkit-box; display: -moz-flex; display: -moz-box; display: -ms-flexbox; display: flex;}
  #menuMobile {width: 100%; max-width: calc(100vw - 20px); position: absolute; z-index: 1; right: 0; top: calc(100%); background-color: #3d3d3c;}
  #menuMobile .menuMobileContent {}
  #menuMobile .menuMobileContent .btn {width: 100%; height: auto; padding: 0 0 0 20px; border-bottom: 1px solid #999; *background-color: #999; color: #fff; font-weight: 600; align-items: center; justify-content: space-between;}
  #menuMobile .menuMobileContent .btn.active {background-color: #ac9f86;}
  #menuMobile .menuMobileContent .btn A {width: 80%; text-transform: uppercase; padding: 10px 0; line-height: 1.2; font-weight: 400;}
  #menuMobile .menuMobileContent .btn A.plusMinus {width: auto;}
  #menuMobile .menuMobileContent .btn.btnlvl2 {background-color: #575749; color: #fff;}
  #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: 100; font-size: 14px;}
  #menuMobile .menuMobileContent .btn .lvl3 {padding-left: 40px; font-style: italic; font-weight: 100; font-size: 13px;}

  #map {height: 350px;}
}


@media only screen
and (max-width: 800px)
{
  #dlazdice {margin: 20px 0;}
  #dlazdice .inner .item {width: calc(50% - 5px); margin: 5px 10px 5px 0;}
  #dlazdice .inner .item:nth-child(3n) {margin-right: 10px;}
  #dlazdice .inner .item:nth-child(2n) {margin-right: 0;}

  #actionHome .title h2 {font-size: 32px;}
  #homeFirmy .title h2 {font-size: 32px;}
  .tinymceCont h1 {font-size: 32px;}

  #homeFirmy {padding: 40px 0 0 0;}

  #footer {padding: 0 0 20px 0;}
  #footer .inner {flex-direction: column; align-items: center; text-align: center;}
  #footer .inner .col {margin: 20px 0; align-items: center;}
}


@media only screen
and (max-width: 600px)
{
  #mainBanner .slide {height: 300px;}
  #mainBanner .slide .text {width: 96%; margin: auto auto; padding: 0 0 0 160px; background-size: 120px auto;}
  #mainBanner .slide .text .p1 {font-size: 22px;}
  #mainBanner .slide .text .p2 {font-size: 26px;}
  #mainBanner .slide .text .p3 {margin-top: 10px; font-size: 16px;}

  #dlazdice .inner .item .photo {height: 180px;}
}


@media only screen
and (max-width: 500px)
{
  #mainBanner .slide {height: 200px;}
  #mainBanner .slide .text {width: 96%; margin: auto auto; padding: 0 0 0 120px; background-size: 100px auto; min-height: unset;}
  #mainBanner .slide .text .p1 {font-size: 20px;}
  #mainBanner .slide .text .p2 {font-size: 24px;}
  #mainBanner .slide .text .p3 {margin-top: 10px; font-size: 14px;}


  #header {height: 90px;}
  #header .mainFrame {padding: 0 10px 0 0;}
  #header .inner {height: 90px;}
  #header .inner .logo {padding: 0; height: 90px;}
  #header.small .inner .logo {height: 50px;}
  #headerPodFixed {height: 90px;}


  #dlazdice .inner .item h3 {font-size: 14px;}


  #actionHome {padding: 30px 0;}


  #actionHome .title h2 {font-size: 26px;}
  #homeFirmy .title h2 {font-size: 26px;}
  .tinymceCont h1 {font-size: 26px;}
}


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

}