@media screen and (min-width: 1576px)
{
  .side-buttons { width: 180px; }
    .side-buttons .button { height: 64px; }
      .side-buttons .topLayout { width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; background: url("/images/icon/arrow-right.png") right 15px center no-repeat; transition: 250ms; }
      .side-buttons .button:hover .topLayout { opacity: 1; z-index: 2; }
      .side-buttons img { position: absolute; left: 22px; transition: 250ms; }
      .side-buttons .button:hover img { opacity: 0; }
      .side-buttons .button:first-child img { top: calc(50% - 19.5px); }
      .side-buttons .button:nth-child(2) img { top: calc(50% - 19px); }
      .side-buttons .button:last-child img { top: calc(50% - 18.5px); }
      .side-buttons .title { line-height: 64px; padding-left: 80px; text-transform: uppercase; transition: padding 250ms; }
      .side-buttons .button:hover .title { padding-left: 23px; }
}

@media screen 
and (min-width: 1366px)
and (max-width: 1575px)
{
  .side-buttons .button { padding: 5px 7px; text-align: center; }
  .side-buttons .title { padding-left: 0; font-size: 10px; }
  .side-buttons .button:first-child img,
  .side-buttons .button:nth-child(2) img { width: 29px; }
  .side-buttons .button:last-child img { width: 23px; }
}

@media screen and (max-width: 1365px)
{
  .side-buttons { display: none; }
}

@media screen
and (min-width: 841px)
and (max-width: 1300px)
{
  .reserve { display: none; }
}

@media screen and (min-width: 1201px) 
{
  .mainFrame, iframe {width: 1200px; margin: 0 auto; }
  
  .home-text, .newsFrame .mainFrame { align-items: center; }
    .home-text .head, .newsFrame .head { margin-right: 85px; }
  
  #greenLine #squareRezervace:hover{background-image: url(/images/web2/reservation.jpg);}
  #greenLine #squareTipy:hover{background-image: url(/images/web2/trip.jpg);}
  #greenLine #squareNabidka:hover{background-image: url(/images/web2/virtual.jpg);}
  .squareHover:hover > h2 {background: rgba(255, 255, 255, 0.62); padding-top: 25px; margin-top: 0px; min-height: 45px;color: #585858;}
  .squareHover:hover > img {display: none;}
}

@media screen
and (max-width: 1200px)
{
  .mainFrame, iframe { width: 100%; float: left; }

  #menuFrame UL LI { font-size: 13px; }  
  #headerFrame #utils #languages { width: auto; }
}

@media screen
and (min-width: 1001px)
and (max-width: 1200px)
{
  .home-text, .newsFrame .mainFrame { align-items: flex-start; }
    .home-text .head, .newsFrame .head { margin-right: 45px; }
}

@media screen
and (min-width: 841px)
and (max-width: 1200px)
{
  footer .links { width: calc(100% - 160px); }
}

@media screen
and (min-width: 601px)
and (max-width: 1200px)
{
  .home-links .title { font-size: 15px; }
  #mainContent .home-links P { font-size: 12px; } 
}

@media screen
and (min-width: 481px)
and (max-width: 1200px) {
  .mainFrame { padding-right: 5%; padding-left: 5%; }
}

@media screen and (min-width: 1001px) {
  #headerFrame .mainFrame { height: 84px; }
  
  .home-text,
  .newsFrame .mainFrame { display: flex; }
  .home-text .head, .newsFrame .head { width: 325px; }
}

@media screen
and (min-width: 841px)
and (max-width: 1200px)
{
  .card h2, #mainContent .card h2 { font-size: 17px; }
  .card p { font-size: 13px; }
}

@media screen 
and (min-width: 841px)
and (max-width: 1000px)
{
  #headerFrame #utils { margin-top: 50px; }
  #headerFrame #utils #languages { float: none; position: absolute; right: 35px; top: 30px; }
}

@media screen and (max-width: 1000px) 
{
  .home-text .head, .newsFrame .head { margin-bottom: 25px; }
}

@media screen
and (min-width: 601px)
and (max-width: 1000px)
{
  .home-text .head, .newsFrame .head { width: 100%; float: left; }
}

@media screen and (min-width: 841px)
{
  #headerFrame #utils { height: 100%; }
  .reserve { height: 100%; }

  #menuFrame UL { display: -webkit-flex !important; }
  #menuFrame UL { display: flex !important; }
  #menuFrame UL LI { border-top: 4px solid transparent; }
  #menuFrame UL LI:HOVER,
  #menuFrame UL LI.active { border-color: #fff; }
  
  .cardList,
  .newsList { justify-content: flex-start; }
  .card,
  article { width: 31.66%; }
  .card:not(:nth-child(3n)),
  article:not(:nth-child(3n)) { margin-right: 2.51%; }
  .card:not(:nth-child(-n + 3)) { margin-top: 30px; }
  
  article:not(:nth-child(-n +3)) { margin-top: 45px; }
  
  footer .links .separator { margin: 0 8px; }
  footer .apartman-links { width: 545px; }
  footer .apartman-links a:not(:nth-child(3n)):not(:last-child):after { margin: 0 12px; }
  
  .side-buttons { top: 260px; }
}

@media screen and (max-width: 840px)
{
  .hamburger { -webkit-box-sizing: border-box; }
  .hamburger { width: calc(100% - 131px); line-height: 50px; position: relative; float: left; padding-left: 54px; display: block; visibility: visible; text-transform: uppercase; font-size: 15px; font-weight: 500; color: #fff; box-sizing: border-box; cursor: pointer; }
  .hamburger .icon { width: 28px; height: 5px; position: absolute; top: calc(50% - 2.5px); left: 0; background: #fff; border-radius: 1px; }
  .hamburger .icon:before, .hamburger .icon:after { content: ''; width: 100%; height: 5px; position: absolute; right: 0; background: #fff; border-radius: 1px; }
  .hamburger .icon:before { top: -9px; }
  .hamburger .icon:after { bottom: -9px; }
  #menuFrame { position: relative; }
  #menuFrame UL { display: none; position: absolute; top: 49px; left: 0; z-index: 100; background: #41ceac; } 
    #menuFrame UL LI, #menuFrame UL LI A { width: 100%; }
    #menuFrame UL LI { height: auto; display: block; box-sizing: border-box; } 
    #menuFrame UL LI A { -webkit-box-sizing: border-box; }    
    #menuFrame UL LI A { padding: 10px 0; text-align: left; box-sizing: border-box; } 
    #menuFrame UL LI:not(:last-child) A { border-bottom: 1px #34c19f solid; } 
    #menu img { max-height: 20px; }                                       
    
  IFRAME {width:100%;}
  #headerFrame {width:100%;height: auto;float: left;margin: 0; background-repeat:repeat;}
  #headerFrame .mainFrame { align-items: flex-start; }
  #headerFrame #logos { margin: 0;float: left; position:relative;}
  #headerFrame #logos img {float: left; width:auto; margin: 0 20px 0 0;}
  #headerFrame #utils { margin: 0; }
  #headerFrame #utils #firstUtil,  #headerFrame #utils #secondUtil {display:none;}
  #headerFrame #utils #languages { height: 50px; margin: 0; position: absolute; top: 100%; right: 0; z-index: 11; display: flex; align-items: center; padding-right: 10px; padding-left: 14px; box-sizing: border-box; background: #6de3c7; }
  #sandwichMenu {display:block;}
  #bannerFrame {display:none;}
  #contentFrame {float:left; margin:0;width: 100%;}
  /* dlazdice */
  #mainContent .imgBoxHeading { font-size: 20px; }
  .contentImgHouse { font-size: 15px; }

  #mainContent .newsFrame, #mainContent .newsFrame .descFrame, #mainContent .newsFrame .descFrame H2 {width:100%;}
  #mainContent .newsFrame .descFrame { margin-top: 25px; }
  #mainContent .newsFrame .descFrame P {float:none; width:auto; }
  #mainContent .newsFrame .descFrame H2 {margin: 0 0 10px; text-align: left;}
  #greenLine .mainFrame { -webkit-flex-wrap: wrap; -webkit-justify-content: space-between; }  
  #greenLine .mainFrame { flex-wrap: wrap; justify-content: space-between; }
  #greenLine .squareA { -webkit-flex: 0 0 47.5%; }
  #greenLine .squareA { flex: 0 0 47.5%; margin-right: 0; }
  .square {min-height:200px; background:none;background-color: #242328;margin: 10px 0; box-sizing: border-box;-webkit-box-sizing: border-box; -o-box-sizing: border-box; -moz-box-sizing: border-box;}
  .square P {text-align:center; }
  .square H2 {color:#fff; font-size: 18px !important; padding-bottom: 0 !important; }
  .square img { margin-top: 0; }
  #squareTipy, #squareNabidka {/*display:none;*/ float:right;}
  #squareRezervace IMG {margin-left:40px;}
  .square .squareWrapper {padding:0;}
  .square .squareWrapper A, .square .squareWrapper #facebookText {display:none;}
  .square .smallH2 {font-size:20px; margin:auto;}
  #poptavka {height:auto; padding: 50px 20px;}
  #poptavka HR {display:none;}
  #greenLine {padding: 40px 25px; float:left; width:100%; box-sizing: border-box;-webkit-box-sizing: border-box; -o-box-sizing: border-box; -moz-box-sizing: border-box;}
  #footer {float:left; width:100%; height:auto;background-position: top;background-repeat: repeat;padding: 25px 55px;box-sizing: border-box;-webkit-box-sizing: border-box; -o-box-sizing: border-box; -moz-box-sizing: border-box;}
  #footer .footerBlock {width:100%; margin:0;}
  #footer #footerMiddle, #footer #footerRight {display:none;}
  #footer #footerLeft ul {width:100%; margin:0; font-size: 13px;}
  #footer #footerLeft ul li {  text-align: center;padding: 0 0 20px 0;}
  #footer #footerLeft ul li:last-child {margin:0; padding:0;}
  #previo-booking-iframe {width:100%;}
  #tipsList .tipsLine {width:100%; display: block;}
  #tipsList .tipsLine .descFrame {width:auto; float:none;}
  #tipsList .tipsLine .descFrame H2 {float:none; text-align: left;}
  #tipsList .tipsLine .descFrame P {width:auto; float:none;}
  .formLine {width:100%;}
  .formLine .formRow {width:100%; padding: 5px; text-align:left;}
  #googleMapSpotMap {width:100%;}
  #apartmanGallery {width:100%;}
  #apartmanGallery A {margin: 3px 0 3px 5px; max-width: 300px; width: 32%; float:left;}
  #apartmanGallery IMG {width:100%; margin:0;}
  .onlineRezervace.leftMargin {float: right; margin-left:0;}
  .hrFull {width:auto; display:none;}
  .fullWidthFloated {width:100%;}
  .halfWidth {width:45%;}
  
  footer .mainFrame { flex-direction: column; align-items: center; }
    footer .links { display: flex; flex-direction: column; align-items: center; }
    footer .buttons { margin-top: 25px; }
    
  .side-buttons { bottom: 25px; }
}

@media screen
and (min-width: 601px)
and (max-width: 840px) 
{
  #headerFrame { height: 145px; }
    #headerFrame #logos img { margin-top: 8px; }
    .reserve { position: absolute; right: 5%; bottom: 15px; padding: 12px 12px 9px 54px; background-image: url("/images/icon/icon-calendar-24.png"); background-position: 12px center; }
    .reserve .title { font-size: 13px; }
    .reserve .subTitle { display: none; }      
  
  footer .links .separator { margin: 0 7px; }
  footer .apartman-links { width: 540px; }
    footer .apartman-links a:not(:nth-child(3n)):not(:last-child):after { margin: 0 10px; }
}

@media screen
and (min-width: 481px)
and (max-width: 840px)
{
  #headerFrame #utils #languages { padding-right: 5%; }
  
  #menuFrame UL LI { padding: 0 5%; }
  
  .cardList,
  .news-list { justify-content: space-between; }
  .card,
  article { width: 49%; }
  .card:not(:nth-child(-n + 2)) { margin-top: 10px; }
    .card h2, #mainContent .card h2 { font-size: 18px; }
    .card p { font-size: 13px; }
    
  article:not(:nth-child(-n + 2)) { margin-top: 20px; }
}

@media screen and (min-width: 601px)
{
  .home-text .head,
  .newsFrame .head { position: relative; padding-bottom: 30px; }
  .home-text .head:after,
  .newsFrame .head:after { content: ""; width: 95px; height: 5px; position: absolute; bottom: 0; left: 0; background: #34c19f; }
  
  .home-text .head .button,
  .newsFrame .head .button { line-height: 42px; float: left; margin-top: 20px; padding: 0 30px; text-decoration: none; color: inherit; border: 2px solid #e1e1e1; transition: background 250ms; }
  .home-text .head .button:hover,
  .newsFrame .head .button:hover { background: #e1e1e1; }
  
  .home-links { display: flex; }
    .home-links .link { flex: 1; flex-direction: column; align-items: center; justify-content: center; }
    .home-links .link:not(:last-child) { margin-right: 30px; }
    
  footer .apartman-links a:not(:nth-child(3n)):not(:last-child):after { content: "/"; float: right; }
}

@media screen
and (max-width: 600px)
{
  .contentImgHouse { width: 48.75%; margin-right: 0; }
  .contentImgHouse:nth-child(3) { margin-top: 2%; }
  .contentImgHouse:nth-child(even) { float: right; }
  
  #headerFrame .mainFrame { flex-direction: column; align-items: center; }
  #headerFrame #logos img { margin: 0 0 25px 0; }
  #utils .contact { display: none; }
  .reserve { padding-top: 12px; padding-bottom: 12px; }
  
  .home-text .head .button, .newsFrame .head .button { display: none; }
  
  .home-links .link { width: 100%; float: left; }
  .home-links .link:not(:last-child) { margin-bottom: 9px; }
  
  footer .text-links .separator { margin: 0 5px; }
  footer .apartman-links { width: 350px; display: flex; flex-wrap: wrap; justify-content: center; }
}

@media screen
and (min-width: 350px)
and (max-width: 600px)
{
  footer .apartman-links a:not(:nth-child(even)):not(:last-child):after { content: "/"; float: right; margin: 0 10px; }
}

@media screen and (min-width: 481px) 
{
  .apartmansFrame { padding-top: 44px; padding-bottom: 50px; }

  .cardList { display: flex; flex-wrap: wrap; }
    .card.hasMore { position: relative; padding-bottom: 45px; }
    .card .bottom { width: calc(100% - 42px); position: absolute; bottom: 25px; left: 21px; }
      .card hr { margin-top: 20px; margin-bottom: 15px; }
      .card .more { position: absolute; bottom: 25px; left: 23px; }
      
  .home-links .topLayout { display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; font-size: 18px; font-weight: 500; color: #fff; opacity: 0; transition: 250ms; }
    .home-links .link:hover .topLayout { opacity: 1; z-index: 2; }
    .home-links .link .topLayout { background: #34c19f; }
      
  #contentFrame,
  .newsFrame { padding: 60px 0; }      
  .home-links .text { z-index: 1; }
  .home-links img { margin-bottom: 15px; }
  .home-links .title { margin-bottom: 10px; }
  
  .news-list { display: flex; flex-wrap: wrap; }
  .newsFrame article:first-child { margin-right: 30px; }
    .newsFrame article:last-child { margin-right: 0; }
    
  footer { padding: 65px 0; }
  footer .apartman-links { margin-top: 35px; }
  
  .home-text .head .sub-title { margin-top: 15px; }
}

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

  body { font-size: 13px; }
  .mainFrame { padding-right: 2.5%; padding-left: 2.5%; }
  
  .to-list,
  .onlineReservation { width: 100%; }

  #headerFrame {width:100%;height: auto;float: left;margin: 0; padding-bottom: 10px; background-repeat:repeat;}
  #headerFrame #logos img { margin-bottom: 15px; }
  .reserve { width: 100%; padding-top: 10px; padding-bottom: 10px; font-size: 12px; }
    .reserve .title { margin: 0; }
  #sandwichMenu {display:block;}
  #menuFrame UL LI { padding: 0 2.5%; }
  #bannerFrame {display:none;}
  #contentFrame {float:left; margin:0;width: 100%; padding: 35px 0; }
  #menu {float:left; width:100%; border-right:none;padding-left: 0;margin: 0; display:none;}
  #greenLine {float:left;}
  .contentImgHouse {width:100%; height: 255px;margin: 10px 0 0 0;overflow: hidden;}
  .houseHeadingWrapper {width: 100%;}
  .contentImgHouse .price {position: absolute; top: 0; right: -2px; background: none; padding: 12px; color: #FFF;}
  .contentImgHouse img {margin-top: 51px; width: 100%; height:auto;}
  #mainContent .newsFrame, #mainContent .newsFrame .descFrame, #mainContent .newsFrame .descFrame H2 {width:100%;}
  #mainContent .newsFrame .descFrame P {float:none; width:auto; }
  #mainContent .newsFrame .descFrame H2 {margin: 0 0 10px; text-align: left;}
  #greenLine .squareA { -webkit-flex-basis: 100%; }  
  #greenLine .squareA { flex-basis: 100%; }
  .square P {text-align:center; }
  .square H2 {color: #2CCDA9;}
  #squareTipy, #squareNabidka {/*display:none;*/}
  #squareRezervace IMG {margin-left:40px;}
  .square .squareWrapper {padding:0;}
  .square .squareWrapper A, .square .squareWrapper #facebookText {display:none;}
  .square .smallH2 {font-size:20px; margin:auto;}
  #poptavka {height:auto; padding: 15px; min-height: 0;}
  #poptavka HR {display:none;}
  #footer {float:left; width:100%; height:auto;background-position: top;background-repeat: repeat;padding: 25px 55px;box-sizing: border-box;-webkit-box-sizing: border-box; -o-box-sizing: border-box; -moz-box-sizing: border-box;}
  #footer .footerBlock {width:100%; margin:0;}
  #footer #footerMiddle, #footer #footerRight {display:none;}
  #footer #footerLeft ul {width:100%; margin:0; font-size: 13px;}
  #footer #footerLeft ul li {  text-align: center;padding: 0 0 20px 0;}
  #footer #footerLeft ul li:last-child {margin:0; padding:0;}
  //#apartmanGallery {width:100%;}
  #apartmanGallery A {margin: 0 0 10px; width: 45%; height: auto; padding: 1px; background-color: #ccc; float: left;}
  #apartmanGallery A:nth-child(even) {float:right;}
  #apartmanGallery IMG {width:100%; margin:0;}
  .onlineRezervace.leftMargin {float: left; margin-left:0;}
  .hrFull {width:auto; display:none;}
  .fullWidthFloated {width:100%;}
  .halfWidth {width:100%; box-sizing: border-box;-webkit-box-sizing: border-box; -o-box-sizing: border-box; -moz-box-sizing: border-box;}

  .apartmansFrame { padding: 25px 0; }
  .newsFrame .title { margin-bottom: 0; }

  .card { width: 100%; float: left; display: flex; padding-bottom: 9px; }
  .card:not(:last-child) { margin-bottom: 15px; }
    .card img { width: 135px; }
    .card .text { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
    .card.hasMore .text { align-items: flex-end; }
      .card h2,
      #mainContent .card h2 { margin-top: 15px; margin-bottom: 0; font-size: 17px; }
      #mainContent .card.hasMore h2 { width: 100%; margin-top: 5px; }
      .card p { display: none; }
      .card .bottom { flex: 1; display: flex; flex-direction: column; justify-content: center; }
        .card hr { margin-top: 0; margin-bottom: 15px; }
      .card .more { float: right; margin-top: 10px; }
        
  .home-links .link { height: 64px; }
    .home-links .link .text { display: flex; align-items: center; }
      .home-links .link p { display: none; }
      .home-links .link img { margin-right: 8%; margin-left: 5%; }
      .home-links .link .title { flex: 1; text-align: left; font-size: 16px; }
      .home-links .link .more,
      .home-links .link .arrow { display: none; }
      
  .newsFrame { padding: 35px 0; }
  article { box-shadow: 3px 3px 20px rgba(0,0,0,.3); }
  article:not(:last-child) { margin-bottom: 25px; }
  
  footer { padding-top: 45px; padding-bottom: 35px; }
  footer .text-links { display: none; }
  
  .side-buttons { display: none; }
  
  .moreLine {flex-wrap: wrap;}
  .moreLine .coins {width: 50%;}
  .moreLine .cenik {width: 50%; justify-content: flex-end; padding-right: 35px; background-position: right center;}
  .moreLine .rezervace {width: 50%; padding-left: 35px;}
  .moreLine .marker {width: 50%; justify-content: flex-end; padding-right: 35px; background-position: right center;}
}

@media screen and (max-width: 350px)
{
  .card img { width: 100px; }
  .card h2 { margin-top: 0; font-size: 15px; }
  
  footer .apartman-links { width: 100%; flex-direction: column; align-items: center; }
}

@media screen
and (min-width: 841px)
and (max-width: 1200px)
and (orientation: landscape)
{
  .side-buttons { top: auto; bottom: 25px; }
}

@media screen
and (max-width: 800px)
and (orientation: landscape)
{
  .side-buttons { display: none; }
}

@media screen and (max-width: 800px)
{
  .card.cenik IMG {width: 50%; height: auto; margin: 10px 0px 0px 0px;}
  .card.cenik .text .center P {display: block; font-size: 16px; margin: 5px 0px 0px 0px; font-size: 13px;}
  .card.cenik HR {margin: 10px 0px 5px 0px;}
}