/** SMALL SCREEN
************************************************************/
@media screen and (max-width: 600px) {
  .pf_booknow_holder {
    display: none !important;
  }
  body,
  #contentHelper,
  #footer {
    background: #ededed;
  }
  #allHelper,
  #contentHelper {
    width: 100%;
    min-width: 1px;
  }
  #allHelper #all {
    width: 100%;
    /***maximum width for <=480px***/
  
  }
  #contentHelper,
  #footerHelper,
  #header,
  #footer,
  #all #mainContent,
  #content .galleryHelper,
  #content .galleriesList,
  #content .imagesList {
    margin: 0 !important;
    padding: 0;
    width: 100%;
    float: none;
    display: block;
  }
  #additionalContent {
    display: none;
  }
  #allHelper {
    background: none;
  }
  #header,
  #content,
  .contentStarter {
    width: 100%;
    margin: 0;
  }
  #atrakcje #all #contentHelper,
  #pokoje #all #content,
  #spa #all #content,
  #dieta #all #content,
  #imprezy #all #content,
  #cennik #all #content,
  #galeria #all #content,
  #oferty_pracy #all #content,
  #kontakt #all #content {
    width: 96%;
    padding-left: 2%;
    padding-right: 2%;
  }
  #header {
    background: url('/img/header_bg_mobile_640.jpg') top center no-repeat;
    height: 205px;
    margin-top: 36px !important;
    position: relative;
  }
  .systemBox {
    display: none;
  }
  #header p.logo {
    opacity: 1;
    padding-top: 4px;
    margin-top: -36px;
    margin-left: 4px;
    width: auto;
    height: auto;
    width: 112px;
    height: 72px;
  }
  #header p.logo a {
    display: block;
  }
  #header p.logo a img {
    max-width: 100%;
  }
  #header ul.langNav {
    background: none;
    padding: 0 7px 0 0;
    position: absolute;
    top: -33px;
    right: 0px;
  }
  #header ul.langNav li a {
    margin-left: 8px;
  }
  #header .facebook {
    position: absolute;
    top: -33px;
    right: 210px;
  }
  ul#mainNav {
    width: 100%;
    display: block;
    height: auto;
    margin: 0;
    margin-top: 100px;
    padding-bottom: 2px;
    background: #000;
  }
  ul#mainNav li {
    width: 20%;
    display: inline;
    margin: 0;
    height: auto;
    text-align: center;
  }
  ul#mainNav li a {
    font-size: 85%;
    height: auto;
    width: 99%;
    margin: 1%;
    margin-top: 2px;
    padding: 6px 0px;
    display: block;
    background: #8c4608;
    color: #fff;
  }
  ul#mainNav li a:hover {
    background: #de701f;
    color: #fff;
  }
  #atrakcje #header ul#mainNav li.attractions a,
  #glowna #header ul#mainNav li.hotel a,
  #pokoje #header ul#mainNav li.pokoje a,
  #spa #header ul#mainNav li.spa a,
  #dieta #header ul#mainNav li.dieta a,
  #restauracja #header ul#mainNav li.restauracja a,
  #imprezy #header ul#mainNav li.imprezy a,
  #cennik #header ul#mainNav li.cennik a,
  #galeria #header ul#mainNav li.galeria a,
  #oferty_pracy #header ul#mainNav li.oferty_pracy a,
  #kontakt #header ul#mainNav li.kontakt a {
    background: #de701f;
    color: #fff;
    padding: 6px 0px;
    top: 0;
    display: block;
    margin: 1%;
    margin-top: 2px;
  }
  #slideshowHelper {
    display: none;
  }
  #slideshow {
    display: none;
  }
  #slideshowNav {
    display: none;
  }
  .promo_btn,
  .voucher_btn {
    display: none;
  }
  #promotionsBox .slideShowBox {
    width: 100%;
    margin: 0px;
    padding: 0px;
  }
  #promotionsBox .slideShowBox ul {
    width: 100%;
    left: 0;
  }
  #promotionsBox .slideShowBox ul li.promotion {
    width: 46%;
    height: auto;
    margin: 0 2% 2% 2%;
    /*    padding: 2%;*/
  
    text-align: left;
    display: inline;
  }
  #promotionsBox .slideShowBox ul li.promotion span.offerBox {
    margin: 0;
    width: 100%;
  }
  #promotionsBox .slideShowBox ul li.promotion span.offerBox img {
    /*    max-width: 100%;*/
  
    width: 35%;
    height: auto;
    margin: 0px;
  }
  #promotionsBox .slideShowBox ul li.promotion span.offerBox span.lead {
    padding-right: 5px;
    font-size: 14px;
    margin-top: 6px;
    /*    margin-top: 8px;
      padding-left: 4px;*/
  
  }
  #promotionsBox .slideShowBox ul li.promotion span.offerBox span.price {
    font-size: 13px;
    position: static;
    margin-bottom: 8px;
  }
  .contentStarter {
    width: 100%;
    background-position: center center;
  }
  #specialOffers {
    margin-top: 16px;
  }
  #specialOffers .specialOffer {
    /*    width: 200px;*/
  
    width: 46%;
    margin: 0;
    margin-right: 2%;
    margin-left: 2%;
    padding: 0;
    text-align: center;
    display: inline;
  }
  #specialOffers .specialOffer p {
    font-size: 15px;
  }
  #specialOffers .specialOffer p .amp {
    display: none;
  }
  #specialOffers .specialOffer img {
    max-width: 100%;
  }
  #footerHelper {
    background: #ededed;
    padding-top: 10px;
  }
  #footer {
    padding: 2%;
    width: 96%;
  }
  #footer p.copyright,
  #footer p.design {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0px;
    padding-bottom: 2px;
    float: none;
    text-align: left;
  }
  #footer address {
    display: none;
  }
  #atrakcje #content ul li {
    background: none;
    margin-left: 20px;
    padding-left: 0px;
    list-style-position: outside;
    list-style-type: disc;
    display: list-item;
    width: 95%;
  }
  .roomsListHelper,
  .roomsList {
    width: auto;
    width: 100%;
    margin: 0;
  }
  .roomsListHelper {
    margin-top: 10px;
  }
  .roomsList .room {
    width: 44%;
    margin: 0 2% 2% 2%;
  }
  .roomsList .room a {
    width: 95%;
  }
  .roomsList .room h2 {
    font-size: 14px;
    margin-top: 10px;
  }
  .roomsList .room img {
    width: 100%;
  }
  .roomsList .room .priceFrom {
    font-size: 16px;
    padding: 8px 12px;
    right: -8px;
    bottom: 10px;
  }
  .roomsList .room .priceFrom span {
    display: inline;
  }
  .roomImages ul.roomSlideshow li img {
    height: auto !important;
    max-width: 100% !important;
  }
  #content .spaFeature .description,
  #content .spaFeature.spaTripleFeatures .description,
  #content .spaFeature .massages_helper,
  #content .spaFeature dl#spa_massages.tooltip,
  #content .spaFeature dl#spa_massages.tooltip dt {
    width: 100%;
    margin: 0px;
    padding: 0px;
  }
  #content .spaFeature dl#spa_massages.tooltip dt {
    max-width: 92%;
    padding-left: 5%;
  }
  #content .spaFeature .image {
    display: none;
  }
  .hsHelper {
    display: none;
  }
  #spa #content ul li {
    background: none;
    margin-left: 20px;
    padding-left: 0px;
    list-style-position: outside;
    list-style-type: disc;
    display: list-item;
    width: 95%;
  }
  #content .dietFeature.dietTripleFeatures .description,
  #content .dietFeature.dietDuoFeatures .description {
    width: 100%;
    margin: 0;
  }
  #content .dietFeature.dietTripleFeatures .description img,
  #content .dietFeature.dietDuoFeatures .description img {
    display: none;
  }
  #content .content_separator {
    width: 100%;
    line-height: 180%;
    margin-left: 0px;
    margin-right: 0px;
  }
  #content p.content_separator {
    display: none;
  }
  #content ul.tight_ul {
    width: 100%;
  }
  #content ul.tight_ul li {
    width: auto;
    max-width: 100%;
  }
  #content ul.tight_ul.indications li,
  #content ul.tight_ul.contraindications li {
    width: 40%;
    margin-right: 1%;
  }
  #content .dietFeature.dietDuoFeatures .description ul.indications li,
  #content .dietFeature.dietDuoFeatures .description ul.contraindications li {
    background: none;
    margin-left: 20px;
    padding-left: 0px;
    list-style-position: outside;
    list-style-type: disc;
    display: list-item;
    width: 95%;
  }
  .lastFeature {
    background-position: left bottom;
  }
  #imprezy #content ul li {
    background: none;
    margin-left: 20px;
    padding-left: 0px;
    list-style-position: outside;
    list-style-type: disc;
    display: list-item;
    width: 94%;
  }
  #cennik #all #additionalContent {
    display: block;
    width: 98%;
    margin: 0;
    margin-bottom: 12px;
  }
  #cennik #content ul li {
    background: none;
    margin-left: 20px;
    padding-left: 0px;
    list-style-position: outside;
    list-style-type: disc;
    display: list-item;
    width: 94%;
  }
  #cennik table tbody tr th.roomName {
    white-space: normal;
  }
  #content .galleriesList li,
  #content .imagesList li {
    width: 100%;
    margin-bottom: 18px;
    margin-right: 0;
  }
  #content .galleriesList li a img,
  #content .imagesList li a img {
    display: block;
    margin: 0 auto;
  }
  #content #mainContent .back {
    display: none;
  }
  #mainContent .description {
    width: 100%;
  }
  #oferty_pracy #additionalContent {
    display: block;
    float: none;
    width: 98%;
  }
  #oferty_pracy #additionalContent .jobsList li {
    background: none;
    padding-left: 0;
  }
  #oferty_pracy #additionalContent .jobsList a {
    display: block;
    padding-top: 4px;
    padding-bottom: 4px;
  }
  #kontakt #googleMap {
    width: 96% !important;
    height: 96% !important;
  }
  #kontakt #additionalContent {
    display: block;
    width: 100%;
    margin: 0px;
  }
  #kontakt #additionalContent form ol.formList li {
    padding-right: 0px;
    width: 100%;
  }
  #kontakt #additionalContent form ol.formList li input[type="text"],
  #kontakt #additionalContent form ol.formList li textarea {
    width: 100% !important;
    padding-right: 0px;
    padding-left: 0px;
  }
  a.preciseMap {
    display: inline-block;
    zoom: 1;
    vertical-align: baseline;
    margin: 0 2px 8px;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 12px/100% Arial, Helvetica, sans-serif;
    font-weight: normal;
    padding: .5em 1em;
    text-shadow: 0 1px 1px rgba(0, 149, 205, 0.3);
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    color: white;
    border: solid 1px saddleBrown;
    background: saddleBrown;
    background: -webkit-gradient(linear, left top, left bottom, from(#cd853f), to(saddleBrown));
    background: -moz-linear-gradient(top, #cd853f, saddleBrown);
  }
  #oferty_specjalne .promotion .promoImg {
    display: none;
  }
  #oferty_specjalne .promotion .description {
    width: 98%;
    margin-right: 2%;
    margin-left: 2%;
  }
}
/** MOBILE <=4800PX
************************************************************/
@media screen and (max-width: 480px) {
  #promotionsBox .slideShowBox ul li.promotion {
    display: inline;
  }
  #promotionsBox .slideShowBox ul li.promotion span.offerBox span.lead {
    font-size: 12px;
    line-height: 15px;
  }
  #promotionsBox .slideShowBox ul li.promotion span.offerBox span.price {
    font-size: 10px;
    padding-top: 2px;
  }
  #specialOffers .specialOffer p {
    font-size: 12px;
  }
}
/** MOBILE <=360PX
************************************************************/
@media screen and (max-width: 370px) {
  #header .facebook {
    position: absolute;
    top: 10px;
    right: 8px;
  }
}
/** MOBILE <=320PX
************************************************************/
@media screen and (max-width: 320px) {
  #allHelper #all {
    width: 100%;
    /***maximum width for <= 320px***/
  
  }
  #atrakcje #all #contentHelper,
  #pokoje #all #content,
  #spa #all #content,
  #dieta #all #content,
  #imprezy #all #content,
  #cennik #all #content,
  #galeria #all #content,
  #oferty_pracy #all #content,
  #kontakt #all #content {
    width: 97%;
    padding-left: 5px;
    padding-right: 5px;
  }
  #header {
    height: 215px;
    margin-top: 44px !important;
  }
  #header ul.langNav {
    top: -54px;
    top: -38px;
    padding-right: 3px;
  }
  #header p.logo {
    margin-top: -40px;
  }
  ul#mainNav {
    margin-top: 110px;
  }
  ul#mainNav li a {
    font-size: 75%;
  }
  #content h1,
  #mainContent h1 {
    font-size: 120%;
  }
  h2 {
    font-size: 100%;
  }
  h3 {
    font-size: 95%;
  }
  .contentStarter {
    font-size: 14px;
  }
  #promotionsBox .slideShowBox ul li.promotion {
    width: 96%;
    height: auto;
    margin: 0 2% 2% 2%;
    display: block;
  }
  #promotionsBox .slideShowBox ul li.promotion span.offerBox img {
    width: 25%;
  }
  #promotionsBox .slideShowBox ul li.promotion span.offerBox span.lead {
    padding-right: 8px;
    font-size: 14px;
    line-height: 18px;
    margin-top: 8px;
  }
  #promotionsBox .slideShowBox ul li.promotion span.offerBox span.price {
    font-size: 12px;
    padding-top: 4px;
  }
  #specialOffers .specialOffer p {
    font-size: 13px;
  }
  #specialOffers .specialOffer {
    float: left;
    padding: 0;
    text-align: center;
    display: inline;
  }
  /*** LISTS ***/
  #atrakcje #content ul li,
  #spa #content ul li,
  #dieta #content ul li,
  #imprezy #content ul li,
  #cennik #content ul li {
    background: none;
    margin-left: 20px;
    padding-left: 0px;
    margin-bottom: 3px;
    list-style-position: outside;
    list-style-type: disc;
    display: list-item;
  }
  /***** 'POKOJE' *****/
  .roomsList .room {
    width: 40%;
    margin: 0 4% 2% 4%;
  }
  .roomsList .room h2 {
    font-size: 13px;
  }
  .roomsList .room .priceFrom {
    font-size: 12px;
    bottom: -8px;
    padding: 6px 18px;
  }
  /***** 'SPA' *****/
  #content .content_separator span {
    font-size: 16px;
  }
  #dieta_tabs .visit_type_label {
    padding-right: 0px;
  }
  #dieta_tabs.js .ui-tabs-nav .ui-state-default a {
    padding: 5px 8px;
    font-size: 12px;
  }
  /***** 'DIETA' *****/
  #content .dietFeature.dietDuoFeatures .description ul.indications li,
  #content .dietFeature.dietDuoFeatures .description ul.contraindications li {
    background: none;
    margin-left: 20px;
    padding-left: 0px;
    list-style-position: outside;
    list-style-type: disc;
    display: list-item;
    width: 95%;
  }
  #dieta #dieta_tabs.js .ui-tabs-nav .ui-state-default {
    background: none;
    padding: 0;
    margin: 0;
    list-style: none;
  }
  /***** 'CENNIK' *****/
  table thead tr th,
  table tbody tr th,
  table tbody tr td {
    padding-left: 2px;
    padding-right: 2px;
    font-size: 10px;
    vertical-align: top;
  }
  /***** 'KONTAKT' *****/
  #kontakt #googleMap {
    width: 96% !important;
    height: 190px !important;
  }
  #kontakt #additionalContent form ol.formList li input[type="text"],
  #kontakt #additionalContent form ol.formList li textarea {
    width: 96% !important;
    padding-right: 0px;
    padding-left: 0px;
  }
  /***** 'OFERTY SPECJALNE' *****/
  #oferty_specjalne .promotion .promoImg {
    display: none;
  }
  #oferty_specjalne .promotion .description {
    width: 96%;
  }
}