@font-face {
	font-family: 'roboto';
	src: url('../font/Lato-Regular.eot?') format('eot'), 
	     url('../font/Lato-Regular.woff') format('woff'), 
	     url('../font/Lato-Regular.ttf')  format('truetype'),
	     url('../font/Lato-Regular.svg')  format('svg');
}

@font-face {
	font-family: 'robotoL';
	src: url('../font/Lato-Light.eot?') format('eot'), 
	     url('../font/Lato-Light.woff') format('woff'), 
	     url('../font/Lato-Light.ttf')  format('truetype'),
	     url('../font/Lato-Light.svg')  format('svg');
}

@font-face {
	font-family: 'robotoB';
	src: url('../font/Lato-Black.eot?') format('eot'), 
	     url('../font/Lato-Black.woff') format('woff'), 
	     url('../font/Lato-Black.ttf')  format('truetype'),
	     url('../font/Lato-Black.svg')  format('svg');
}

@font-face {
	font-family: 'robotoT';
	src: url('../font/Lato-Thin.eot?') format('eot'), 
	     url('../font/Lato-Thin.woff') format('woff'), 
	     url('../font/Lato-Thin.ttf')  format('truetype'),
	     url('../font/Lato-Thin.svg')  format('svg');
}


@font-face {
	font-family: 'levenim';
	src: url('../font/levenim.eot?') format('eot'), 
	     url('../font/levenim.woff') format('woff'), 
	     url('../font/levenim.ttf')  format('truetype'),
	     url('../font/Lato-Thin.svg')  format('svg');
}

body.index{
  overflow:hidden;
  position:relative;
}
.left{
  text-align:left;
}
.right{
  text-align:right;
}
#box {
display: inline-block;
left: -50%;
position: relative;
width: 152%;
}
.content{
float: left;
height: 100%;
width: 50vw;
}
.menu{
  background:white;
  position:relative;
}
.szare{
  background:#bfbbc1;
}
.foto1{
  width:100%;
  height:50%;
  position:relative;
  display:inline-block;
  background:url('../img/piotrkowska.jpg') no-repeat center / cover;
}
.foto2{
   width:100%;
  height:50%;
  position:relative;
  display:inline-block;
    background:url('../img/3go_maja.jpg') no-repeat center / cover;
}
.fotel, .napis{
  width:450px;
  margin:0 auto;
  color:white;
}
.napis h1{
  font-family: 'robotoB';
  font-size:75px;
  padding:50px 20px;
}
.napis h1 span{
  font-family: 'robotoT';
  font-size:40px;
  display:inline-block;
  width:100%;
}
.footer{
bottom: 50px;
color: #261f19;
font-family: robotoL;
font-size: 16px;
padding-left: 50px;
position: absolute;
}
.footer a{
  font-size: 16px;
  color: #261f19;
  text-decoration:none;
  font-family: roboto;
}
strong{
  font-family:roboto;
}
.szare.content > img, .menu.content > img {
  padding: 50px;
}
.strzalki {
  bottom: 50px;
  padding-right: 50px;
  position: absolute;
  width: calc(100% - 50px);
  opacity:0;
  margin-left:-50px;
}
.strzalki p{
  font-family:robotoL;
  font-size:20px;
  text-transform:uppercase;
  color:#fff;
}
.strzalki p span{
  font-family:robotoB;
  display:inline-block;
  width:100%;
}
.strzalki a img {
  border: 2px solid white;
  border-radius: 100%;
  padding: 30px;
}
#arrow{
  border: 2px solid #514643;
border-radius: 100%;
padding: 30px;
position: absolute;
z-index:99;
cursor:pointer;
cursor:hand;
right: -45px;
top:45vh;
}
#wsun, #wysun{
  cursor:pointer;
  cursor:hand;
  position:absolute;
  top:50px;
  left:50px;
  z-index:99;
}
.fotel.right {
  padding-top: 18vh;
}
#wsun, #arrow{
  display:none;
}
.wyjedz{
    animation-name: wysun;
    animation-duration: 0.3s;
    animation-timing-function: ease-in;
    -webkit-animation-name: wysun;
    -webkit-animation-duration: 0.3s;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
 
}
.wjedz{
    animation-name: wsun;
    animation-duration: 0.3s;
    animation-timing-function: ease-out;
    -webkit-animation-name: wsun;
    -webkit-animation-duration: 0.3s;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}
@keyframes wysun {
    from {left: -50%;}
    to {left: 0%;}
}
@keyframes wsun {
    from {left: 0%;}
    to {left: -50%;}
}
@-webkit-keyframes wysun {
    from {left: -50%;}
    to {left: 0%;}
}
@-webkit-keyframes wsun {
    from {left: 0%;}
    to {left: -50%;}
}
.menu ul {
padding-left: 50px;
padding-top: 100px;
}
.menu ul li a{
  font-family:robotoT;
  color:#322824;
  font-size:45px;
   margin-left: -50px;
   opacity:0;
}
.menu ul li {
  display: inline-block; 
  width: 100%;
}
.menu ul li a:hover{
   font-family:robotoL;
}

	.hamburger { 
width:31px; 
height:31px; 
background:url(img/hamburger.png) left top;
transition:background .2s steps(4,end);
 cursor:pointer;
  cursor:hand;
  position:absolute;
  top:50px;
  left:50px;
  z-index:99;
}

.magia { 
background-position:-124px top !important;
} 
	.hamburger { 
width:31px; 
height:31px; 
background:url(../img/hamburger.png) left top;
transition:background .2s steps(4,end);
 cursor:pointer;
  cursor:hand;
  position:absolute;
  top:50px;
  left:50px;
  z-index:99;
}


/*******************************************PODSTRONY*********************************************************/
.clear{
  clear:both;
}
.grid{
  max-width:1090px;
  padding:0 20px;
  margin:0 auto;
    position: relative;
}
#top{
  width:100%;
  height:77vh;
  min-height:450px;
  background:url('../img/piotrkowska_bg1.jpg') no-repeat top left / cover;
}
#top .grid {
  height: 100%;
  min-height: 450px;
}
.maj #top{
  background:url('../img/breakfast.jpg') no-repeat center left / cover;
}
.pokoj #top{
  xheight:620px;
 background: rgba(0, 0, 0, 0) url("../img/pokoj1.jpg") no-repeat scroll left top / cover ;
}

.aneks #top{
  xheight:620px;
 background: rgba(0, 0, 0, 0) url("../pokoje_piotrkowska/img/aneks1.jpg") no-repeat scroll center center / cover ;
}
.wypoczynek #top{
  xheight:620px;
 background: rgba(0, 0, 0, 0) url("../pokoje_piotrkowska/img/dwuos1.jpg") no-repeat scroll center center / cover ;
}
.dwuos #top{
  xheight:620px;
 background: rgba(0, 0, 0, 0) url("../pokoje_3maja/img/1os3maja1.jpg") no-repeat scroll center center / cover ;
}
.dwuosp #top{
  xheight:620px;
 background: rgba(0, 0, 0, 0) url("../pokoje_piotrkowska/img/dwuosobowy1.jpg") no-repeat scroll center center / cover ;
}
.ola1 #top{
  xheight:620px;
 background: rgba(0, 0, 0, 0) url("../pokoje_3maja/img/1os3maja1.jpg") no-repeat scroll center center / cover ;
}
.ola2 #top{
  xheight:620px;
 background: rgba(0, 0, 0, 0) url("../pokoje_3maja/img/pojedynczy1.jpg") no-repeat scroll center center / cover ;
}
.ola3 #top{
  xheight:620px;
 background: rgba(0, 0, 0, 0) url("../pokoje_3maja/img/3os3maja2.jpg") no-repeat scroll center center / cover ;
}
.ola4 #top{
  xheight:620px;
 background: rgba(0, 0, 0, 0) url("../pokoje_3maja/img/apartament1.jpg") no-repeat scroll center center / cover ;
}
.ola5 #top{
  xheight:620px;
 background: rgba(0, 0, 0, 0) url("../pokoje_3maja/img/podwojny1.jpg") no-repeat scroll center center / cover ;
}
.olatwin #top{
  xheight:620px;
 background: rgba(0, 0, 0, 0) url("../pokoje_3maja/img/twin3maja3.jpg") no-repeat scroll bottom / cover ;
}
.olaapart #top{
  xheight:620px;
 background: rgba(0, 0, 0, 0) url("../pokoje_3maja/img/apart3maja1.jpg") no-repeat scroll center center / cover ;
}
.economy #top{
  xheight:620px;
 background: rgba(0, 0, 0, 0) url("../pokoje_piotrkowska/img/3os23.jpg") no-repeat scroll center center / cover ;
}
.rodzinny #top{
  xheight:620px;
 background: rgba(0, 0, 0, 0) url("../pokoje_piotrkowska/img/rodzinny1.jpg") no-repeat scroll top / cover ;
}
.studio #top{
  xheight:620px;
 background: rgba(0, 0, 0, 0) url("../pokoje_piotrkowska/img/studio1.jpg") no-repeat scroll center center / cover ;
}
.trzyos #top{
  xheight:620px;
 background: rgba(0, 0, 0, 0) url("../pokoje_piotrkowska/img/3os1.jpg") no-repeat scroll center center / cover ;
}
.trzyos2 #top{
 xheight:620px;
 background: rgba(0, 0, 0, 0) url("../pokoje_piotrkowska/img/3os21.jpg") no-repeat scroll center center / cover ;
}
.twin #top{
 xheight:620px;
 background: rgba(0, 0, 0, 0) url("../pokoje_piotrkowska/img/twin1.jpg") no-repeat scroll center center / cover ;
}

.pub #top{
height:320px;
 min-height:0;
 background: rgba(0, 0, 0, 0) url("../img/pub.jpg") no-repeat scroll left center / cover ;
}
.sala #top{
 height:320px;
 min-height:0;
 background: rgba(0, 0, 0, 0) url("../img/conference.jpg") no-repeat scroll center center / cover ;
}
.biznes #top{
 height:320px;
 min-height:0;
 background: rgba(0, 0, 0, 0) url("../img/hand.jpg") no-repeat scroll center center / cover ;
}
 
.kultura #top{
 height:320px;
 min-height:0;
 background: rgba(0, 0, 0, 0) url("../img/oferta3.jpg") no-repeat scroll center center / cover ;
}
.romantyczny #top{
 height:320px;
 min-height:0;
 background: rgba(0, 0, 0, 0) url("../img/oferta4.jpg") no-repeat scroll center center / cover ;
}
.niedziela #top{
 height:320px;
 min-height:0;
 background: rgba(0, 0, 0, 0) url("../img/oferta2.jpg") no-repeat scroll bottom -65px center / cover ;
}
 



.aleja #top{
 xheight:620px;
 background: rgba(0, 0, 0, 0) url("../img/aleja.jpg") no-repeat scroll center center / cover ;
}
.catering #top{
 xheight:620px;
 background: rgba(0, 0, 0, 0) url("../img/catering.jpg") no-repeat scroll center center / cover ;
}
 
.cmentarz #top{
 xheight:620px;
 background: rgba(0, 0, 0, 0) url("../img/cmentarz.jpg") no-repeat scroll center bottom / cover ;
}
 
.klasztor #top{
 xheight:620px;
 background: rgba(0, 0, 0, 0) url("../img/klasztor.jpg") no-repeat scroll center top / cover ;
}
 
.kosciol #top{
  height:620px;
 background: rgba(0, 0, 0, 0) url("../img/kosciol.jpg") no-repeat scroll center / cover ;
}
 
.mlyn #top{
 xheight:620px;
 background: rgba(0, 0, 0, 0) url("../img/mlyn.jpg") no-repeat scroll left top / cover ;
}
 
.lodz #top{
 xheight:620px;
 background: rgba(0, 0, 0, 0) url("../img/lodz.jpg") no-repeat scroll left top / cover ;
}
 
.manufaktura #top{
 xheight:620px;
 background: rgba(0, 0, 0, 0) url("../img/manufaktura.jpg") no-repeat scroll left top / cover ;
}
 
.atrakcja_piotrkowska #top{
xheight:620px;
 background: rgba(0, 0, 0, 0) url("../img/a_piotrkowska.jpg") no-repeat scroll left top / cover ;
}
.atrakcja_kosciuszki #top{
xheight:620px;
 background: rgba(0, 0, 0, 0) url("../img/kosciuszki.jpg") no-repeat scroll center / cover ;
}
 
.aktualnosci #tresc {
  min-height: calc(100vh - 520px);
}


.aktualnosci #top{
  height:320px;
  min-height:0;
  background:url('../img/promocje.jpg') no-repeat center / cover;
}
.aktualnosci.strona #top{
  height:320px;
  min-height:0;
  background:url('../img/strona.jpg') no-repeat center / cover;
}
.aktualnosci.newsy #top{
  height:320px;
  min-height:0;
  background:url('../img/news.jpg') no-repeat center / cover;
}

.kontakt #top{
  height:320px;
  background:url('../img/kontakt.jpg') no-repeat bottom left / cover;

}
#bottom{
  width:100%;
  height:57vh;
  position:relative;
  background:url('../img/piotrkowska_bg2.jpg') no-repeat center right / cover;
}
.maj #bottom{
  background:url('../img/3maj_bg.jpg') no-repeat center right / cover;
}
.maj #bottom .grid{
   text-align: right;
   right:50px;
}
.maj #bottom .rezerwacja{
 display: table;
position: absolute;
right: 0; 
}
.maj #bottom span, .maj #bottom p{
 color: rgba(249, 103, 137, 0.7);
}

.maj #bottom .rezerwacja a{
background:rgba(0, 0, 0, 0) url("../img/arrow_maj.png") no-repeat scroll center center / contain ;
}




.kontakt #bottom{
  background:transparent;
  height:auto;
}
.pub #top .menu {
background: rgba(0, 0, 0, 0) url("../img/menu_b.png") no-repeat scroll center center;
}
.kultura #top .menu {
background: rgba(0, 0, 0, 0) url("../img/menu_b.png") no-repeat scroll center center;
}
#top .menu {
background: rgba(0, 0, 0, 0) url("../img/menu.png") no-repeat scroll center center;
height: 30px;
position: absolute;
right: 50px;
top: 50px;
z-index:30;
cursor:pointer;
cursor:hand;
width: 30px;
}
.nasze_pokoje #top #za_menu{
  height:100vh;
}
#top #logo{
    padding-top: 50px;
}
.half #logo{

padding: 8px 0 5px;
width: 100%;
}
.pub #logo,
.kultura #logo,
.cmentarz #logo,
.atrakcja_kosciuszki #logo,
.catering #logo,
.aktualnosci.newsy #logo,
.lodz #logo,
.kosciol #logo,
.manufaktura #logo,
.klasztor #logo,
.atrakcja_piotrkowska #logo {
  color:#fff;
}
#logo {
font-family: robotob;
font-size: 44px;
letter-spacing: 3px;
line-height: 30px;
width: 275px;
 text-align: right;
}
#logo span{
display: inline-block;
font-size: 21px;
letter-spacing: 1px;
text-align: right;
width: 100%;
}
#top .menu ul{
  padding:0;
}
#POKOJE {
  background: rgba(243, 243, 243, 1) none repeat scroll 0 0;
   min-height: calc(100vh - 261px);
}
.half .padding {
  padding-top: 73px;
}
.sala #top p{
  color: #000;
}
#top p {
bottom: 80px;
color: #f3f3f3;
font-family: robotoL;
font-size: 50px;
position: absolute;
right: 50px;
text-align: right;
}
.nasze_pokoje #top {
  background: #f3f3f3 none repeat scroll 0 0;
  height: 170px;
  width: 100%;
  min-height:0;
  border-bottom:1px solid rgba(15,15,15,0.1);
}
#top p span{
  font-family:levenim;
  direction:ltr;
  font-size: 42px;
  unicode-bidi:bidi-override;
}
#grey{
  width:100%;
  background:#c0bbc2;
  padding:30px 0;
}
.piktogram {
  float: left;
  width: 25%;
   text-align: center;
}
.piktogram span{
  display:inline-block;
  width:100%;
  font-family:robotoT;
  color:#000;
  padding:5px;
  font-size:22px;
}
.half {
  float: left;
  width: calc(50% - 30px);
   padding-left:30px;
   text-align:right;
}
.half:first-child{
  padding-right:30px;
  padding-left:0px;
}
.half img{
  padding-bottom:25px;
}
.half p a img{
  padding-bottom:0px !important;
  margin:0 !important;
}
#tresc {
 text-align:justify;
  min-height: calc(100vh - 520px);
  padding: 50px 0;
  position:relative;
  z-index:29;
}
.piotr #tresc, .maj #tresc {
  min-height: 0;
}
#tresc p{
 font-size:17px;
 padding-bottom:20px;
 text-align:justify;
 font-family:robotoL;
}
#tresc .specjal{
  color:#817c83;
 font-style:italic;
}
.box {
  border-right: 2px solid rgba(15,15,15,0.1);
  float: left;
  margin: 20px 0;
  width: calc(25% - 2px);
}
.box.none{
  border:none;
  text-align:right; 
}
.box p, .box p a{
   font-family:robotoL;
   font-size:14px;

   color:#312927;
}
#footer{
  background:#dfdfdf;
}
.box.padding p{
  padding-right: 40px;
text-align: right;
}
.box.padding.line p{
  color:rgba(49,41,39,0.6);
  font-family:roboto;
}
.box.padding img {
margin: 0 0 -7px 10px;
}
.box.padding.line{
  line-height:50px;
}
#top .grid > img {
  margin-top: 50px;
}
#top .menu ul {
  padding: 0;
  position: absolute;
  right: 0;
  display:none;
  width:300px;
  top: 50px;
  z-index:999;
}
.odleglosc {
  padding-top: 42px;
}
#top .menu ul li a {
  color: #322824;
  font-family: robotoL;
  font-size: 22px;
  margin-left: 0px;
  opacity: 1;
}
#za_menu{
  background:rgb(255,255,255);
  width:50%;
  min-height:450px;
  height:77vh;
  position:absolute;
  top:0;
  opacity:0;
  z-index:10;
  right:0;
}
#top .menu ul li.active a{
   font-family: roboto;
}
#top .menu ul li a.active{
   font-family: roboto;
}
#top .menu ul li {
  display: inline-block;
  height: auto;
  padding: 3px 0;
  text-align: right;
  width: 100%;
}
#bottom p {
  font-family: roboto;
  font-size: 36px;
  margin-left: 50px;
  letter-spacing: 4px;
  color:rgba(144,176,197,0.7);
}
#bottom span {
  font-family: robotoB;
  font-size: 86px;
  line-height: 73px;
  margin-left: 50px;
  letter-spacing: 4px;
  color:rgba(144,176,197,0.7);
}
#bottom span sub{
    font-size: 51px;
}
#bottom .grid{
position: absolute;
top: 20%;
}
.rezerwacja{
  display: table;

}
.rezerwacja a{
    background:url('../img/arrow.png') no-repeat center / contain;
    padding:20px 45px 20px 40px;
    text-transform:uppercase;
    letter-spacing:2px;
   color:#f3f3f3;
  font-size:24px;
  display:inline-block;
  font-family:robotoL; 
}
#zamknij {
  z-index: 100;
  background:transparent;
cursor: pointer;
height: 31px;
left: 50px;
position: absolute;
top: 50px;
width: 31px;
display:none;
}
.kontakt #tresc .right p{
  text-align:right;
}
.kontakt h3 {
  color: #312927;
  font-family: robotob;
  font-size: 20px;
  padding: 42px 0 22px;
  text-align: left;
}
.piktogram img {
  height: 90px;
}
#pokoje h2 {
  color: #312927;
  font-family: roboto;
  font-size: 20px;
  padding: 20px 0 0 ;
  text-align: center;
}
.kontakt p span {
  display: inline-block;
  font-family: roboto;
  width: 100%;
}
#pokoje .box {
  border-right: medium none;
  float: left;
  overflow:hidden;
  margin: 10px;
  min-height:400px;
  width: calc(25% - 20px);
}
#pokoje .box_na3{
   width: calc(100% / 3 - 20px);
}
#pokoje .box img{
height: 200px;
margin-bottom: 20px;
width:auto;
}
#pokoje .box > p {
  text-align: center;
  height:auto;
  padding-bottom:30px;
}
#pokoje .box > p span {
  display:inline-block;
  width:100%;
  min-height:37px;
  text-transform:uppercase;
  font-family:roboto;
}
#pokoje .wiecej  img {
  height: 15px;
  margin-bottom:0px;
  width: auto;
  padding:7px 0;
}
.wiecej {
  text-align: center;
}
.wiecej  p {
  font-family: roboto;
  height: auto;
}
.nawigacja{
  background:#c0bbc2;
  width:100%;
  position:relative;
  z-index:29;
  text-align:center;
}
.nawigacja ul {
  display: inline-block;
  margin: 20px auto;
  padding: 9px 10px 5px;
  width: auto;
  min-width: 200px;
  background:url('../img/ul.png') no-repeat center / contain;
}
.nawigacja li {
  display: inline-block;
  height: 20px;
  width: 42px;
  cursor:pointer;
  cursor:hand;
  background:url('../img/li.png') no-repeat center / contain;
}
 
.nawigacja li.active {
  background:url('../img/li_active.png') no-repeat center / contain;
}
.left .half span {
  font-family: roboto;
}
.left .half ul {
text-align:left;
}
.left .half li {
font-family:robotoL;
padding:3px 0 3px 30px;
background:url('../img/strzalka.png') no-repeat left top 10px / 20px auto;
}
#pokoje .grid {
  z-index: 20;
}
#regulamin > p {
  font-family: robotol;
  font-size: 18px;
  line-height: 24px;
  padding: 10px 0;
  text-align: justify;
} 
.regulamin  .specjal{
  font-family: roboto;
  padding:15px 0;
  font-size:20px;
    color:#817c83;
 
}
#footer .box.line > p {
  padding: 3px 40px;
}
#footer .box > img {
  padding: 5px 0;
}
#footer .box > p {
  padding: 10px 40px 10px 0;
}
.poczta{
  line-height: 30px;
}
 .mobilnybox{
    display:none;
  }
#box.mobilnybox{
    left: 0;
    width: 100%;
  }
.mobilnybox .content {
  float: left;
  height: auto;
  min-height: 0;
  width: 100%;
}  
  .mobilnybox .content.menu{
    min-height:600px;
  }
 .mobilnybox .menu ul li a {
  margin-left: 0;
  opacity: 1;
} 
  
@media all and (max-width:1140px) {
  .index .content {
    min-height: 770px;
  }
  body.index {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
}

@media all and (max-width:960px) {
 .box{
   width: calc(50% - 2px);
    min-height: 60px;
     text-align: right;
 }
 .tymczas{
   display:none;
 }
 .box.none{
   border-right: 2px solid rgba(15, 15, 15, 0.1);
 }
  #footer .box > img {
    margin-right: 40px;
  }
  #pokoje .box{
   width: calc(50% - 20px);
  text-align: center;   
  }
  .fotel, .napis {
    padding: 0 20px;
    width: calc(100% - 40px);
  }
  .napis h1{
    font-size:55px;
  }
  .menu ul li a{
    font-size:35px;
  }
}

@media all and (max-width:768px) {
  #box.mobilnybox {
  display: inline-block;
  height: auto;
}
  #kosteczka{
    display:none;
  }
  #box.zwykly{
    display:none;
  }
 .menu ul li a:hover {
  font-family: robotoT;
}
  @keyframes wysun {
    from {left: -100%;}
    to {left: 0%;}
  }
  @keyframes wsun {
      from {left: 0%;}
      to {left: -100%;}
  }
  #za_menu{
    width:75%;
  }
  .half {
    float: left;
    padding: 0 !important;
    text-align: right;
    width: calc(100%);
  }
  #arrow{
    right: 5px;
  }
}

@media all and (max-width:600px) {
 .piktogram{
   width:50%;
 }
 #footer .box {
    border-left: 2px solid rgba(15, 15, 15, 0.1) !important;
    text-align: center;
    width: calc(100% - 4px);
  }
  #footer  .box p {
    padding: 0 !important;
    text-align: center !important;
  }
  #top {
    height: 50vh;
    min-height: 300px;
  }
  #za_menu{
    min-height:100vh;
    height:auto;
  }
  .menu ul li a {
  font-size: 30px;
}
  .piotr #za_menu, .maj #za_menu{
    min-height:0;
    height:0;
  }
  #pokoje .box {
    width: calc(100% - 20px);
  }
  #top .grid {
    min-height: 300px;
  }
  #top p{
    font-size:40px;
    line-height:40px;
  }
  .maj #top p, .piotr #top p{
    display:none;
  }
  .rezerwacja a{
    font-size: 14px;
    padding: 20px 25px;
  }
  #bottom span sub {
    font-size: 31px;
  }
  #bottom span{
    font-size: 45px;
      line-height: 43px; 
  }
  #bottom p{
    font-size: 25px;
  }
  #bottom{
   height: 200px; 
  }
  .maj #bottom{
    background-position:center center;
  }
  .piotr #bottom p{
    margin-left:0;
  }
}

@media all and (max-width:400px) {
   #za_menu {
    width: 100%;
  }
  .menu ul {
  padding-left: 50px;
  padding-top: 50px;
}
  #logo {
    font-size: 30px;
    width: 200px;
  }
  #logo span{
    font-size:16px;
  }
  .napis h1 {
    font-size: 45px;
  }
  .napis h1 span{
    font-size: 30px;
  }
  #arrow{
    display:none !important;
  }
  .menu ul li {
    display: inline-block;
    height: auto;
    width: 80%;
  }
  .strzalki {
    padding-right: 30px;
    width: calc(100% - 30px);
  }
}


/* facebook */
.slideout-widget {
	position: fixed;
	right: -18em;
	top: 50%;
	transition: right .4s;
	width: 18em;
	z-index: 10;
}

.slideout-widget:hover {
	right: 0;
}

.slideout-widget-handler,
.slideout-widget-content {
	background: #eee;
	border: 1px solid #ddd;
	padding: 1em .5em;
}

.slideout-widget-handler {
	border-right: none;
	left: -40px;
	position: absolute;
	text-align: center;
	width: 25px;
	padding-right: 13px;
}
.slideout-widget-content {
	border-width: 1px 0;
	overflow: hidden;
	width: 100%;
	z-index: 11;
}



.widget-facebook-2 .slideout-widget-handler {
	color: #3c5b9b;
	border-radius: 10px;
}


.widget-facebook-2 {
	margin-top: 12em;
	top: 15%;
	z-index: 999999;
}

a.fb{
  display:block;
  width: 20px;
  height: 22px;
  overflow: hidden;  
}


.box.padding a.fb img{
  margin-left:0px;
}  

.box.padding a.fb img:hover{
  margin-left:-20px;
}

a.g{
  display:none;
  width: 40px;
  height: 22px;
  overflow: hidden;  
}


.box.padding a.g img{
  margin-left:0px;
}  

.box.padding a.g img:hover{
  margin-left:-40px;
}
.box.padding a{
  float: right;
  margin: 13px 4px 0px 7px;
}

@media (max-width: 768px) {
	.slideout-widget {
		display: none;
	}
}
#b_editDates {
  max-width: 365px;
}
.pi #b_editDates {
 padding-top:17px;
}
.b_availDatesInner h4{
  text-align:left;
}