@charset "utf-8";
@import "reset.css";
@import "editor.css";
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&subset=latin-ext');

*{
font-family:'Open Sans', trebuchet ms, arial, sans-serif;	
}

body{
margin:0px;
padding:0px;
text-align:center;
font-size:16px;
overflow-x:hidden;
}

.container{
width:1200px;
margin:0px auto;
padding:0px;
position:relative;
}

.wrapper{
width:1200px;
float:left;
margin:0px;
padding:0px;
text-align:left;
}

.top-stripe{
width:100%;
float:left;
height:46px;
background:#e4e3e3;
text-align:center;
}

.detail{
font-size:14px;
color:#605f5f;
text-align:left;
float:left;
height:33px;
line-height:33px;
margin-top:7px;
padding-left:43px;
margin-right:30px;
}

.detail:hover{
color:#6fb4de;
transition:all 0.2s;
}

.detail:last-child{
margin-right:0px;
}

#d1{
background:url(img/ico-point.png) no-repeat left center;
}

#d1:hover{
background:url(img/ico-point-blue.png) no-repeat left center;
}

#d2{
background:url(img/ico-tel.png) no-repeat left center;
}

#d2:hover{
background:url(img/ico-tel-blue.png) no-repeat left center;
}

#d3{
background:url(img/ico-envelope.png) no-repeat left center;
}

#d3:hover{
background:url(img/ico-envelope-blue.png) no-repeat left center;
}

.socials{
height:22px;
float:right;
margin-top:12px;
}

.socials a{
float:left;
margin-left:15px;
}

.socials a:first-child{
margin-left:0px;
}

#sfb{
height:22px;
width:11px;
background:url(img/ico-fb.png) no-repeat center center;
}

#sfb:hover{
background:url(img/ico-fb-blue.png) no-repeat center center;
}

#syt{
height:22px;
width:18px;
background:url(img/ico-yt.png) no-repeat center center;
}

#syt:hover{
background:url(img/ico-yt-blue.png) no-repeat center center;	
}

#sinst{
height:22px;
width:22px;
background:url(img/ico-insta.png) no-repeat center center;
}

#sinst:hover{
background:url(img/ico-insta-blue.png) no-repeat center center;	
}

.top{
width:100%;
float:left;
padding:33px 0px;
text-align:center;
}

.logo{
float:left;
}

.mainnav{
float:left;
height:28px;
margin-left:30px;
margin-top:25px;
}

.mainnav a{
height:28px;
line-height:28px;
float:left;
padding:0px 10px;
font-size:15px;
text-transform:uppercase;
}

.mainnav a:hover,
.mainnav a.current{
color:#0061ce;
transition:all 0.2s;
}

/* SLIDER */
#slider{
width:100%;
float:left;
z-index:100;
}

ul.bjqs{position:relative; list-style:none;padding:0;margin:0;overflow:hidden; display:none;}
li.bjqs-slide{position:absolute; display:none;}
ul.bjqs-controls{list-style:none;margin:0;padding:0;z-index:9999;}
ul.bjqs-controls.v-centered li a{position:absolute; height:76px; width:54px;}
ul.bjqs-controls.v-centered li.bjqs-next a{right:7%; color:white; font-size:3em; background:url(img/slider-right.png) repeat left top; line-height:45px;}
ul.bjqs-controls.v-centered li.bjqs-prev a{left:7%; color:white; font-size:3em; background:url(img/slider-left.png) repeat left top; line-height:45px;}
ol.bjqs-markers{list-style: none; padding: 0; margin: 0px; height:27px; line-height:27px; background:#898989; float:none; width:auto; padding:0px 20px; border-radius:27px; position:absolute; top:92%;}
ol.bjqs-markers.h-centered{text-align: center;}
ol.bjqs-markers li{display:inline;}
ol.bjqs-markers li a{display:inline-block; font-size:0px; width:10px; height:10px; border-radius:10px; background:#f2f2f2; border:3px solid #f2f2f2; margin:5px 6px 0px 6px;}
ol.bjqs-markers li a:hover,
ol.bjqs-markers li.active-marker a{background:#ef7f1b;}
p.bjqs-caption{display:block;width:96%;margin:0;padding:2%;position:absolute;bottom:0;}

/* Slider end */

.slogan{
width:calc(50% - 60px);
padding:30px;
float:left;
margin:-26.5% 0 0 25%;
background:url(img/black-trans.png) repeat;
font-size:36px;
color:white;
line-height:48px;
font-weight:300;
position:relative;
z-index:500;
 /* Skew */
-webkit-transform: skew(-20deg); 
-moz-transform: skew(-20deg); 
-o-transform: skew(-20deg);
transform: skew(-20deg);
}

.slogan p{
float:left;
width:100%;
text-align:center;
font-size:36px;
color:white;
line-height:48px;
font-weight:300;
 /* Skew */
-webkit-transform: skew(20deg); 
-moz-transform: skew(20deg); 
-o-transform: skew(20deg);
transform: skew(20deg);
}

h1{
width:100%;
float:left;
text-align:center;
font-size:40px;
line-height:44px;
font-weight:300;
color:#0061ce;
padding:35px 0px 40px 0px;
}

p{
width:100%;
float:left;
padding-bottom:30px;
text-align:justify;
color:#424242;
font-size:15px;
line-height:24px;
}

ul,ol{
width:calc(100% - 40px);
padding-left:20px;
margin-left:20px;
padding-bottom:30px;
text-align:justify;
color:#424242;
font-size:15px;
line-height:24px;
}

ul{
list-style:disc;
}

ol{
list-style:decimal;
}

p a, ul a, ol a{
color:#0061ce;
}

p a:hover, ul a:hover, ol a:hover{
text-decoration:underline;
}

table{
margin:0px;
padding:0 0 30px 0;
float:left;
text-align:left;
color:#424242;
font-size:15px;
line-height:24px;
}

/* Boxy na stronę główną */

.main-boxes{
width:100%;
float:left;
margin:0px 0px 0px 0px;
padding:0px;
}

.box{
width:30%;
float:left;
margin:0 5% 0 0;
padding:0px;
text-align:center;
}

.box:nth-child(3n+3){
margin-right:0px;
}

.box figure{
float:left;
width:100%;
margin:0;
padding:0;
}

.box figure img{
float:left;
width:calc(100% - 12px);
border-radius:12px;
border:6px solid #6fb4de;
}

.box figcaption{
font-size:15px;
line-height:24px;
text-align:center;
color:#424242;
padding:12px 0px;
float:left;
width:100%;
}

.box figcaption p{
margin:0;
padding:0;
font-size:15px;
line-height:24px;
text-align:center;
color:#424242;
float:left;
width:100%;
}

.box h2{
width:100%;
float:left;
text-align:center;
color:#424242;
font-size:30px;
line-height:33px;
padding-top:17px;
}

.more{
height:37px;
line-height:37px;
padding:0px 20px;
background:#6fb4de;
text-align:center;
font-size:15px;
color:white;
border-radius:15px;
display:inline-block;
}

/* Hover */

.box:hover figure img{
border:6px solid #424242;
filter:brightness(120%);
transition:all 0.2s;
}

.box:hover h2{
color:#6fb4de;
transition:color 0.2s;
}

.box:hover .more{
background:#424242;
transition:background 0.2s;
}

.more:hover{
background:#424242;
transition:background 0.2s;
}

/* Boxy na stronę główną end */

.graybg{
width:100%;
float:left;
text-align:center;
background:#f6f6f6;
padding-bottom:10px;
margin-top:40px;
}

.gray-header{
float:left;
width:100%;
text-align:left;
font-size:40px;
line-height:44px;
font-weight:300;
color:#0061ce;
padding:35px 0px 40px 0px;
}

.newsboxes{
width:100%;
float:left;
}

.newsbox{
width:100%;
float:left;
margin-bottom:30px;
}

.newsbox img{
float:left;
width:calc(15% - 2px);
border-radius:12px;
border:1px solid #6fb4de;
}

.newsbox:hover img{
filter:brightness(120%);
transition:filter 0.2s;
}

.newsbox-right{
width:80%;
float:right;
}

.newsbox-right h3{
width:100%;
float:left;
font-size:30px;
color:#424242;
text-align:left;
line-height:33px;
padding-bottom:20px;
}

.newsbox-right .date{
width:100%;
float:left;
padding-bottom:20px;
font-size:13px;
color:#0061ce;
text-align:left;
}

.newsbox-right p{
width:100%;
float:left;
text-align:left;
color:#424242;
font-size:15px;
line-height:24px;
padding-bottom:20px;
}

.more-container{
width:100%;
float:left;
text-align:right;
}

.newsbox:hover .more{
background:#424242;
transition:background 0.2s;
}

.newsbox-spacer{
width:90%;
float:left;
height:20px;
margin:0 0 0 5%;
border-bottom:1px solid #6fb4de;
}

.bottomsec{
width:100%;
float:left;
text-align:center;
background-image: linear-gradient(to bottom right, #585858, #424242);
padding-bottom:40px;
}

.bottomnav{
width:100%;
float:left;
margin-top:30px;
text-align:center;
}

.bottomnav a{
height:30px;
line-height:30px;
float:left;
font-size:16px;
text-transform:uppercase;
font-weight:700;
padding:0 15px;
color:white;
}

.bottomnav a:hover,
.bottomnav a.current{
color:#6fb4de;
}

.bottom-left{
float:left;
max-width:40%;
margin-top:20px;
margin-left:9%;
}

.bottom-left .detail{
clear:left;
margin-top:5px;
}

.bottom-left #d1{
background:url(img/ico-point-blue.png) no-repeat left center;
}

.bottom-left #d2{
background:url(img/ico-tel-blue.png) no-repeat left center;
}

.bottom-left #d3{
background:url(img/ico-envelope-blue.png) no-repeat left center;
}

.bottom-left .detail{
color:white;
}

.bottom-left .detail:hover{
color:#6fb4de;
transition:color 0.2s;
}

.bottom-left .socials{
float:left;
clear:left;
margin-top:40px;
}

#sfb{
height:22px;
width:11px;
background:url(img/ico-fb-blue.png) no-repeat center center;
}

#syt{
height:22px;
width:18px;
background:url(img/ico-yt-blue.png) no-repeat center center;
}

#sinst{
height:22px;
width:22px;
background:url(img/ico-insta-blue.png) no-repeat center center;
}

.bottom-left .socials a:hover{
filter:brightness(120%);
transition:filter 0.2s;
}

.bottom-right{
float:right;
max-width:40%;
margin-top:20px;
margin-right:9%;
}

.bottom-right p{
float:left;
width:100%;
margin:0;
padding:0;
font-size:12px;
line-height:21px;
color:white;
text-align:justify;
}

.logos-bottom{
float:right;
clear:both;
}

.logos-bottom img{
float:left;
margin:30px 0px 0px 30px;
}

footer{
width:100%;
height:40px;
text-align:center;
background:white;
}

.copyright,
.webcat{
height:40px;
line-height:40px;
font-size:12px;
font-family:verdana;
color:black;
}

.copyright{
float:left;
}

.webcat{
float:right;
}

.webcat a{
font-size:12px;
font-family:verdana;
color:black;
}

.web{
color:#9e0d2a;
font-weight:bold;
}

.cat{
color:#62a400;
font-weight:bold;
}

.bannersp{
float:left;
width:100%;
}

.gallery{
width:100%;
float:left;
padding-bottom:30px;
}

.gallery img{
float:left;
width:calc(22.5% - 2px);
margin:2% 0 0 2%;
outline:1px solid #3fb4fa;
}

.gallery img:hover{
filter:brightness(120%);
transition:filter 0.2s;
}

.map{
width:100%;
float:left;
margin-bottom:30px;
outline:1px solid #3fb4fa;
}

.sppadd .box{
margin-bottom:30px;
}

/* Menu mobilne start */

.mobile-start{
width:100%;
float:left;
height:50px;
text-align:center;
background:black;
-webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.75);
position:fixed;
top:0px;
left:0px;
z-index:9999;
display:none;
}

#mobile-butt{
height:30px;
line-height:30px;
float:right;
font-size:0.95em;
font-weight:700;
color:#e32b3a;
padding-right:40px;
background:url(img/rm.png) no-repeat right center;
background-size:25px 25px;
text-transform:uppercase;
margin-top:10px;
cursor:pointer;
margin-right:25px;
}

.mobile-container{
width:100%;
float:left;
background:white;
position:fixed;
top:50px;
left:0px;
background:white;
-webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.75);
z-index:9999;
}

#xx{
width:100%;
float:left;
}

.xbut{
float:right;
margin-right:20px;
cursor:pointer;
}

.xbut img{
margin:10px 0px 0px 0px;
width:30px;
height:30px;
}

.mobilenav{
width:100%;
float:left;
text-align:center;
padding-bottom:10px;
background:white;
}

.mobilenav a{
width:80%;
float:left;
height:40px;
line-height:40px;
color:white;
background:#3fb4fa;
text-align:center;
font-size:1em;
margin-left:10%;
margin-top:1px;
}

.mobilenav a:hover{
background:#13689b;
}

.aexception{
height:auto!important;
padding-bottom:8px;
}

.mobspacer{
width:100%;
float:left;
height:50px;
display:none;
background:white;
}

#mob-tel,#mob-mail,#mob-fb,#mob-insta, #mob-point, #mob-yt{
float:left;
height:33px;
width:33px;
margin-left:10px;
margin-top:8px;
cursor:pointer;
}

#mob-point{
background:url(img/ico-point-blue.png) no-repeat center center;
}

#mob-tel{
background:url(img/ico-tel-blue.png) no-repeat center center;
}

#mob-mail{
background:url(img/ico-envelope-blue.png) no-repeat center center;
}

#mob-fb{
background:url(img/ico-fb-blue.png) no-repeat center center;
width:11px;
margin-left:20px;
}

#mob-insta{
background:url(img/ico-insta-blue.png) no-repeat center center;
width:22px;
margin-left:20px;
}

#mob-yt{
background:url(img/ico-yt-blue.png) no-repeat center center;
width:18px;
margin-left:20px;
}

/* Menu mobilne END */

/* Menu rozwijane */

/* button z którego będzie rozwijana lista to 'dropit' */

.dropit{
position:relative;
float:left;
z-index:1111;
}

.mobilenav .dropit{
width:80%;
float:left;
margin-left:10%;

}

.mobilenav .dropit > a{
width:100%;
float:left;
height:40px;
line-height:40px;
color:white;
background:#3fb4fa;
text-align:center;
font-size:1em;
margin-left:0;
margin-top:1px;
}

/* wygląd kontenera menu rozwijanego. Musi być absolute i od topu tyle co ma wysokość rodzic */

.mainnav .dropit .dropdown-content{
display:none;
position:absolute;
top:27px;
left:10px;
background:white;
border:1px solid #0061ce;
width:auto;
}

.bottomnav .dropit .dropdown-content{
display:none;
position:absolute;
top:29px;
left:10px;
background:white;
border:1px solid #0061ce;
width:auto;
}

.mobilenav .dropit .dropdown-content{
display:initial;
width:100%;
float:left;
}

/* Wygląd buttona w menu rozwijanym */

.dropit .dropdown-content span,
.dropit > .dropdown-content > a{
width:auto;
padding:0px 10px;
margin-top:5px;
float:left;
text-align:left;
cursor:pointer;
font-size:15px;
height:28px;
line-height:28px;
border:none;
clear:left;
}

.bottomnav .dropit .dropdown-content span,
.bottomnav .dropit > .dropdown-content > a{
color:black;
}

.mobilenav .dropit > .dropdown-content > a{
width:100%;
float:left;
height:35px;
line-height:35px;
color:white;
background:#1495e3;
text-align:center;
font-size:0.85em;
margin-left:0;
margin-top:1px;
padding:0;
}

.dropit .dropdown-content span:hover,
.dropit .dropdown-content span.current,
.dropit .dropdown-content a:hover,
.dropit .dropdown-content a.current{
color:#0061ce;
transition:all 0.2s;
}

/* Wywołanie menu rozwijanego, żeby się pojawiło */

.dropit:hover .dropdown-content{
display:initial;
}

/* Menu rozwijane end */

.grbgsection{
margin-top:0px;
padding-top:40px;
}

.padd40{
padding-bottom:40px;
}

/* Formularz */

.reservation{
width:100%;
float:left;
text-align:center;
margin-top:-20px;
padding-bottom:30px;
}

.reservation input,
.reservation button{
width:calc(50% - 22px);
float:left;
background:white;
height:38px;
padding:0px 10px;
line-height:38px;
font-size:16px;
color:#878787;
text-align:left;
margin:5px 0 0 25%;
border:1px solid #878787;
}

.reservation textarea{
width:calc(50% - 22px);
float:left;
background:white;
height:70px;
padding:0px 10px;
line-height:38px;
font-size:16px;
color:#878787;
text-align:left;
margin:5px 0 0 25%;
border:1px solid #878787;
}

.formstripe,
.g-recaptcha{
width:50%;
float:left;
min-height:40px;
line-height:40px;
margin:5px 0 0 25%;
text-align:left;
font-size:16px;
font-weight:700;
}

input#accept,
input#accept1,
input.accept,
input.accept1{
width:22px;
height:22px;
border:1px solid #878787;
float:left;
margin:9px 13px 0 0;
}

.submitit,
#submitit{
background:red!important;
color:white!important;
text-align:center!important;
cursor:pointer;
}

.submitit:hover,
#submitit:hover{
background:black!important;
}

.submititbutt,
#submititbutt{
background:red!important;
color:white!important;
text-align:center!important;
cursor:pointer;
}

.submititbutt:hover,
#submititbutt:hover{
background:black!important;
}

/* Formularz end */

#map-canvas{
width:100%;
height:380px;
float:left;
margin-bottom:40px;
}

.wrapper h2,
.wrapper h3{
padding-bottom:20px;
}

@media screen and (max-width: 1200px){
body{
overflow-x:hidden;
}	
	
div.container{
width:100%;
}

div.wrapper{
width:90%;
margin:0 0 0 5%;
}

.logo{
margin-left:calc(50% - 149px);
padding-right:calc(50% - 145px);
max-width:100%;
}

.mainnav{
margin-left:0px;
margin-top:25px;
width:100%;
text-align:center;
height:auto;
}

.mainnav a{
float:none;
display:inline-block;
}

.slogan p{
font-size:25px;
line-height:36px;
padding-bottom:0;
margin-bottom:0;
}

}

@media screen and (max-width: 1050px){
	
.bottom-right{
width:100%;
max-width:none;
margin-right:0;
}

.bottom-left{
max-width:none;
width:100%;
margin-left:0;
}

}

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

.top-stripe{
height:auto;
min-height:46px;
padding-bottom:5px;
}

.slogan{
padding:20px;
}

}

@media screen and (max-width: 768px){
	
.newsbox img{
width:179px;
}

.newsbox-right{
width:calc(100% - 220px);
}

.reservation input,
.reservation textarea,
.reservation button{
width:calc(80% - 22px);
margin-left:10%;
}

.formstripe,
.g-recaptcha{
width:80%;
margin-left:10%;
}

.formstripe img{
width:100%;
}

}


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

.slogan{
display:none;
}

.gallery img{
width:calc(42.5% - 2px);
margin:5% 0 0 5%;
}
	
}

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

.box{
width:42.5%;
margin:0 0 5% 5%;
}
	
}

@media screen and (max-width: 550px){
	
.reservation input,
.reservation textarea,
.reservation button{
width:calc(100% - 22px);
margin-left:0;
}

.formstripe,
.g-recaptcha{
width:100%;
margin-left:0;
}

}

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

.box{
width:100%;
margin:0 0 40px 0;
}
	
}


@media screen and (max-width: 520px){
	
.mobile-start, .mobspacer{
display:initial;
}

.detail, .socials, .mainnav, .bottomnav, .top-stripe{
display:none;
}

}

@media screen and (max-width: 440px){
	
.newsbox img{
width:calc(100% - 2px);
}

.newsbox-right{
width:100%;
margin-top:30px;
}

.bottom-left .detail{
font-size:11px;
}

}