* { box-sizing: border-box !important; }

body { font-family: 'Lato',arial,verdana,helvetica,sans-serif; min-width: 320px; margin: 0 auto; color: #666666; }
@media screen and (max-width: 767px) { body { color: #333333; } }

#preloader { position: fixed; z-index: 10; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); z-index: fixed; }
#preloader .pre-img { width: 140px; height: 140px; position: absolute; left: 50%; top: 50%; margin: -70px 0 0 -70px; border: 8px solid #666; border-top: 8px solid #194a34; border-radius: 50%; animation: spin 4s linear infinite; }

@keyframes spin { 0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); } }

#top-bar { padding-top: 5px; padding-bottom: 10px; background: #006337; color: #fff; }
@media screen and (max-width: 767px) { #top-bar { position: fixed; width: 100%; z-index: 9; } }
#top-bar p { display: inline-block; font-size: .9em; margin: 0; }
#top-bar p .fa { padding-right: .3em; font-size: 1.9em; position: relative; top: 5px; }
#top-bar p .fa.fa-envelope-o { font-size: 1.4em; top: 0; }
#top-bar a { display: inline-block; margin-left: 1em; color: #fff; transition: all .3s ease-in-out; }
#top-bar a:hover { transform: scale(1.3); }
#top-bar .b-data { float: left; }
@media screen and (max-width: 767px) { #top-bar .b-data { max-width: 80%; } }
#top-bar .b-data p { margin-right: 20px; margin-left: 10px; }
#top-bar .b-data p:last-child { font-size: 1em; }
#top-bar .s-media { float: right; }
@media screen and (max-width: 767px) { #top-bar .s-media { display: none; } }
#top-bar .s-media .fa { padding-right: 0; }
#top-bar #nav-toggle { float: right; display: inline-block; width: 36px; cursor: pointer; }
@media screen and (min-width: 768px) { #top-bar #nav-toggle { display: none; } }
#top-bar #nav-toggle > div { height: 3px; margin: 5px; background: #fff; transition: all .2s; }
#top-bar #nav-toggle.nav-active > div:first-child { transform: rotate(40deg) translate(6px, 6px); }
#top-bar #nav-toggle.nav-active > div:nth-child(2) { opacity: 0; }
#top-bar #nav-toggle.nav-active > div:last-child { transform: rotate(-40deg) translate(6px, -6px); }

#header { top: 0; left: 0; right: 0; padding-top: 20px; padding-bottom: 10px; }
#header .container { padding-top: 10px; }
@media screen and (min-width: 768px) { #header .logo { float: left; } }
@media screen and (max-width: 767px) { #header .logo { padding-top: 50px; padding-bottom: 30px; text-align: center; } }
#header .logo h1 { display: inline-block; height: 50px; width: 320px; margin: 0; background: url(../img/logo.png) no-repeat 0 50%; background-size: contain; text-indent: -9999px; }
@media screen and (min-width: 768px) and (max-width: 991px) { #header .logo h1 { margin-left: 20px; } }
@media screen and (max-width: 767px) { #header .logo h1 { width: 320px; } }
@media screen and (max-width: 479px) { #header .logo h1 { width: 280px; } }
#header .logo p { margin: 3px 5px; color: #333333; font-size: 10.5px; text-transform: uppercase; }
#header .topnav { float: right; margin-top: 38px; }
@media screen and (max-width: 767px) { #header .topnav { display: none; } }
#header .topnav a { display: inline-block; padding: 10px 20px; font: 12px 'Lato'; border-bottom: 3px solid #efefef; text-transform: uppercase; color: #333333; transition: all .3s; }
#header .topnav a:hover { border-bottom: 3px solid #006337; text-decoration: none; color: #006337; }

#fixed-nav { position: fixed; width: 100%; left: 0; top: -60px; z-index: 10; background: #fff; border-bottom: 1px solid silver; opacity: 0; transition: all .8s; }
#fixed-nav.visible { opacity: 1; top: 0; }
#fixed-nav .fx-logo { display: inline-block; }
#fixed-nav .fx-logo img { padding-top: 4px; padding-bottom: 4px; }
#fixed-nav .fx-nav { float: right; }
#fixed-nav .fx-nav a { display: inline-block; color: #333333; font: 12px 'Lato'; text-transform: uppercase; padding: 1.2em 2em; text-decoration: none; border-bottom: 3px solid #fff; transition: all .3s; }
#fixed-nav .fx-nav a:hover { border-bottom: 3px solid #006337; color: #000; }
#fixed-nav .fx-nav a:active, #fixed-nav .fx-nav a:focus { outline: none; }
@media screen and (max-width: 767px) { #fixed-nav { opacity: 1; z-index: 5; background: #006337; border-bottom: none; top: -250px; transition: all .3s; }
  #fixed-nav.nav-active { top: 0; }
  #fixed-nav .fx-nav { float: none; margin-top: 40px; }
  #fixed-nav .fx-nav a { display: block; width: 100%; text-align: center; border-bottom: none; border-top: 1px solid #007d45; color: #fff; font-size: 1.1em; }
  #fixed-nav .fx-nav a:hover { background-color: rgba(255, 255, 255, 0.03); color: #00301b; border-bottom: none; } }

@media screen and (min-width: 768px) { #banner_xs { display: none; } }
@media screen and (max-width: 767px) { #banner_xs img { width: 100%; } }

#banner { text-align: center; position: relative; }
#banner .b-data { position: absolute; left: 0; right: 0; top: 50%; height: 150px; display: table-cell; transform: translateY(-50%); background: rgba(0, 0, 0, 0.4); }
#banner h1 { font-size: 52px; letter-spacing: 1px; vertical-align: center; color: #fff; }
#banner h1 i { font-style: normal; }
@media screen and (max-width: 767px) { #banner { display: none; } }
@media screen and (min-width: 768px) { #banner { width: 100%; height: 90vh; background: url(../img/bg_banner.jpg) no-repeat 50% 0; position: relative; }
  #banner .container { height: 90vh; position: relative; } }
@media screen and (min-width: 768px) and (max-width: 767px) { #banner { background: url(../img/bg_banner_xs.jpg) no-repeat 50% 50%; } }
@media screen and (min-width: 768px) and (min-width: 768px) and (max-width: 991px) { #banner .container { height: 450px; } }
@media screen and (min-width: 1600px) { #banner { height: 800px; } }

.section { padding-top: 50px; padding-bottom: 50px; min-height: 480px; }
@media screen and (max-width: 767px) { .section { padding-top: 20px; padding-bottom: 20px; } }
.section .img { text-align: right; }
.section .img img { width: 100%; padding-top: 30px; }
.section h1 { margin-top: 24px; margin-bottom: 10px; color: #cc9966; font: 26px/150% "Lato"; }
.section p { margin-top: 0; margin-bottom: 0; line-height: 170%; }
.section ul { list-style-type: circle; margin-top: 0; padding-top: 0; }
.section li { line-height: 160%; }
.section.inv .img { text-align: left; }

#about { padding-bottom: 20px; }
@media screen and (max-width: 767px) { #about { padding-bottom: 0; } }
#about .about_slider { padding-top: 80px; text-align: center; height: 320px; }
@media screen and (max-width: 767px) { #about .about_slider { padding-top: 10px; padding-bottom: 0; height: auto; } }
#about .about_slider #lightSlider li { overflow: hidden; }
#about .about_slider #lightSlider li > a { display: block; position: relative; height: 180px; background-repeat: no-repeat; background-position: 50% 50%; background-size: 100%; overflow: hidden; transition: all .4s ease-in-out; }
#about .about_slider #lightSlider li > a span { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: #fff; opacity: 0; }
#about .about_slider #lightSlider li > a:hover { background-size: 110%; }
#about .about_slider #lightSlider li > a:hover span { opacity: .1; transition: all .4s ease-in-out; }
#about .img { text-align: center; }
#about .img img { width: auto; max-width: 90%; }
#about .note { max-width: 90%; padding: 5px 10px; margin: 1.5em; font-size: 11px; color: #333333; letter-spacing: .3px; background: #f6f6f6; border: 1px solid #f0f0f0; }
#about .note b { font-size: 1.2em; padding-left: 24px; background: url(../img/flashplayer_logo.svg) no-repeat 0 50%; background-size: contain; white-space: nowrap; }
#about .note a { display: block; margin-top: 3px; }

@media screen and (max-width: 767px) { #rooms { margin-top: 40px; margin-bottom: 40px; } }
#rooms .gal_rooms { padding-top: 20px; text-align: center; }
@media screen and (max-width: 767px) { #rooms .gal_rooms { display: none; } }
#rooms .gal_rooms a { display: inline-block; position: relative; width: 160px; height: 115px; margin: 2px 3px; transition: all .3s; background-repeat: no-repeat; background-position: 50% 50%; }
@media screen and (min-width: 768px) and (max-width: 1199px) { #rooms .gal_rooms a:last-child { display: none; } }
#rooms .gal_rooms a span { display: inline-block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: #fff; opacity: 0; transition: all .3s; }
#rooms .gal_rooms a:hover span { opacity: 0.2; }
#rooms .bigimg { text-align: center; padding-top: 16px; padding-bottom: 30px; }
@media screen and (min-width: 768px) { #rooms .bigimg { display: none; } }
#rooms .bigimg > img { max-width: 90%; }

@media screen and (max-width: 767px) { .photo { display: none; } }
@media screen and (min-width: 768px) { .photo { height: 100vh; background-size: cover; background-attachment: fixed; }
  .photo.ph01 { background-image: url(../img/ph_widok.jpg); }
  .photo.ph02 { background-image: url(../img/ph_stoly.jpg); }
  .photo.ph03 { background-image: url(../img/ph_konf.jpg); }
  .photo.ph04 { background-image: url(../img/ph_pokoje.jpg); } }
@media screen and (min-width: 1650px) { .photo { margin: 0 auto; max-width: 1650px; height: 850px; background-attachment: scroll; } }
@media screen and (min-width: 1200px) { .photo { min-height: 720px; } }
@media screen and (min-width: 992px) and (max-width: 1199px) { .photo { min-height: 600px; } }
@media screen and (min-width: 768px) and (max-width: 991px) { .photo { min-height: 520px; } }

#contact { color: #000; position: relative; min-height: 520px; }
@media screen and (max-width: 767px) { #contact { padding: 0; } }
#contact .container { position: static; }
#contact #map { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: #fff; margin-left: 50%; }
#contact #map iframe { display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; }
@media screen and (max-width: 767px) { #contact #map iframe { position: static; } }
@media screen and (max-width: 767px) { #contact #map { position: static; width: 100%; height: 300px; margin: 2.5em 0 0 0; } }
#contact .address { text-align: right; padding-right: 30px; font-size: 1.1em; }
@media screen and (max-width: 767px) { #contact .address { position: static; width: 100%; text-align: center; } }
#contact .address img { padding-bottom: .5em; }
#contact .address p { line-height: 170%; font-size: 1.2em; margin-top: 8px; margin-bottom: 0; }
#contact .address .fa { font-size: 1.1em; color: #006337; padding-right: 10px; }
#contact .address .fa.fa-mobile { font-size: 1.7em; transform: rotate(15deg) translateY(2px); }
#contact .address a { color: #006337; font: 700 12px 'Lato'; }
#contact .address .s-media a { display: inline-block; font-size: 1.4em; transition: all .2s ease-in-out; transform: scale(1); }
#contact .address .s-media a:hover { transform: scale(1.15); }

.modal { display: none; position: fixed; z-index: 20; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.4); }
.modal.active { display: block; }
.modal .mcontent { background-color: #fff; margin: 20% auto; padding: 10px 20px 20px; border: 1px solid gray; width: 60%; }
@media screen and (min-width: 480px) and (max-width: 767px) { .modal .mcontent { width: 75%; } }
@media screen and (max-width: 479px) { .modal .mcontent { width: 90%; } }
.modal .mcontent h3 { color: #cc9966; }
.modal .mcontent li { color: #404040; margin-top: .5em; margin-bottom: .5em; }
.modal .mcontent li b { font-size: 1.1em; }
.modal .mcontent .mclose { color: silver; float: right; font-size: 28px; font-weight: bold; }
.modal .mcontent .mclose:hover, .modal .mcontent .mclose:focus { cursor: pointer; color: #333333; text-decoration: none; }

#footer { background: #006337; margin-bottom: 104px; }
@media screen and (min-width: 992px) and (max-width: 1199px) { #footer { margin-bottom: 127px; } }
@media screen and (min-width: 768px) and (max-width: 991px) { #footer { margin-bottom: 127px; } }
@media screen and (max-width: 767px) { #footer { margin-bottom: 0; } }
#footer p { text-align: center; font-size: 11px; color: #fff; }
#footer p a { color: #fff; text-decoration: none; transition: all .3s; }
#footer p a:hover { color: #ddd; }

#pfr { position: fixed; bottom: 0; width: 100%; background: #202020; background: rgba(0, 0, 0, 0.8); padding-top: 10px; padding-bottom: 15px; }
@media screen and (max-width: 767px) { #pfr { padding-top: 15px; padding-bottom: 25px; } }
#pfr.hidden { bottom: -20px; }
#pfr p { color: #fff; text-align: center; font: 1.1em/150% Lato, arial, sans-serif; margin: 3px; }
#pfr .container { position: relative; }
#pfr a { display: none; }
@media screen and (max-width: 767px) { #pfr a { display: inline-block; position: absolute; right: 20px; top: 0; color: #fff; font-size: 1.2; }
  #pfr a:hover { text-decoration: none; } }

/* ANIMATIONS
********************************
	#yourElement {
	  -vendor-animation-duration: 3s;
	  -vendor-animation-delay: 2s;
	  -vendor-animation-iteration-count: infinite;
	}	  
	#box {
		-webkit-animation: NAME-YOUR-ANIMATION 5s infinite;
		-moz-animation:    NAME-YOUR-ANIMATION 5s infinite;
		-o-animation:      NAME-YOUR-ANIMATION 5s infinite;
		animation:         NAME-YOUR-ANIMATION 5s infinite;
	}	  
*/
.desktop #about .contents, .desktop #offer .contents, .desktop #conf .contents, .desktop #rooms .contents { -webkit-animation-delay: .3s; -moz-animation-delay: .3s; -o-animation-delay: .3s; animation-delay: .3s; }