@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: 600px;}
  
  #homeText {padding: 80px 10px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}
  #homeText .photos .photo1 {display: none;}
  
  #mapKontakt .map {width: 50%;}
}


@media only screen
and (max-width: 1000px)
{  
  #mainBanner .slide {height: 500px;}
  
  #rezervace .inner .right {padding: 0 0 0 40px;}
  
  #mainBanner .slide .text h2 {font-size: 4vw;}
  #mainBanner .slide .text p {font-size: 3vw;}
}


@media only screen
and (max-width: 800px)
{
  #mainBanner .slide {height: 400px;}
  
  header .inner .right .menuFrame {position: relative; justify-content: flex-end;}
  header .inner .right .menuFrame .menu {display: none; position: absolute; right: 0px; top: 100%; z-index: 100;}
  
  header .inner .right .menuFrame .menu ul {width: 450px; max-width: 100%; background-color: #916d47; flex-direction: column;}
  header .inner .right .menuFrame .menu ul li:first-child {display: none;}
  header .inner .right .menuFrame .menu ul li a {width: 100%; color: #fff; border-bottom-width: 2px; border-top-width: 2px;}
  header .inner .right .menuFrame .menu ul li:last-child {padding-right: 20px;}
  
  header .inner .right .menuFrame .menu ul li a:hover {color: #fff; border-bottom-color: #fff;}
  header .inner .right .menuFrame .menu ul li a.active {color: #fff; border-bottom-color: #fff;}
  
  header .inner .right .info {flex-direction: column; align-items: flex-end; display: -webkit-flex; display: -webkit-box; display: -moz-flex; display: -moz-box; display: -ms-flexbox; display: flex;}
  header .inner .right .info .phone {margin-bottom: 5px;}
  header .inner .right .info .email {margin: 0;}
  
  .burger {display: block; width: 110px; height: 40px; position: relative; padding: 0; margin: 10px 0 10px 0; background-color: #c49a6c; line-height: 1; font-size: 18px; font-weight: 400;}
  .burger .text {width: 70px; height: 100%; margin-right: 44px; align-items: center; float: left; padding-left: 10px; color: #fff; text-transform: uppercase;}
  .burger .icon { width: 30px; position: absolute; top: calc(50% - 1px); right: 10px; transition: all .5s; }
  .burger.active .icon { width: 27px; background: transparent; }
  .burger .icon, .burger .icon:before, .burger .icon:after { height: 2px; background-color: #fff; }
  .burger .icon:before, .burger .icon:after { content: ""; width: 100%; position: absolute; left: 0; transition: all .5s; }
  .burger .icon:before { top: -9px; }
  .burger .icon:after { bottom: -9px; }
  .burger.active .icon:before { top: 0; transform: rotate(45deg); }
  .burger.active .icon:after { top: 0; transform: rotate(135deg); }   
  
  #homeText {padding: 40px 10px;}
  #homeText .text {width: 100%;}
  #homeText .text h1 {text-align: center;}
  #homeText .text h1:before {width: 100%;}
  #homeText .text .perex {text-align: center; font-size: 24px;}
  #homeText .photos {display: none;}
  
  #mapKontakt .kontakt {padding: 40px;}
  #mapKontakt .kontakt h2 {font-size: 24px; text-align: center;}
  #mapKontakt .kontakt h2:before {width: 100%;}
  
  #rezervace .inner .right {padding: 0 0 0 0px;}
  
  #mainText {margin: 30px 0;}
}


@media only screen
and (max-width: 600px)
{
  #mapKontakt {flex-direction: column;}
  #mapKontakt .kontakt {order: 1; width: 100%;}
  #mapKontakt .map {order: 2; width: 100%; height: 200px;}
  
  #apartman .inner .row1 {flex-direction: column; margin: 0 0 30px 0;}
  #apartman .inner .row1 .left {order: 2; width: 100%; margin: 20px 0 0 0;}
  #apartman .inner .row1 .right {order: 1; width: 100%; padding: 0;}
  
  #apartman .inner .row2 {flex-direction: column;}
  #apartman .inner .row2 .left {order: 1; width: 100%; margin: 0 0 30px 0;}
  #apartman .inner .row2 .right {order: 2; width: 100%;}
  
  #rezervace .inner {flex-direction: column;}
  #rezervace .inner .right {order: 1; width: 100%; margin: 0 0 30px 0;}
  #rezervace .inner .left {order: 2; width: 100%;}
  
  .tinymceCont h1 {text-align: center;}
  .tinymceCont h1:before {width: 100%; text-align: center;}
  
  #apartman h1 {text-align: center;}
  #apartman h1:before {width: 100%; text-align: center;}
}


@media only screen
and (max-width: 500px)
{
  header .inner {flex-direction: column;}
  header .inner .logo {text-align: center;}
  header .inner .logo a {display: inline-block; text-align: center;}
  
  header .inner .right .info {padding: 0; align-items: center;}
  .burger {width: 100%; margin: 20px 0 10px 0;}
  
  header .inner .right .menuFrame .menu {width: 100%;}
}