/* MAIN LAYOUT HotelSystems.pl Style zostały zoptyamlizowane do inline w head.tpl */ #mlUsingCookies { left:auto!important; right:0!important; width:auto!important; padding:0!important; display:none!important} #mlUsingCookies > p { float:left!important; margin-top:7px!important } #mlUsingCookies p#mlCookClose { margin:0 10px!important; float:left!important;} #mlCookClose a { padding:1px!important} a {text-decoration:none; } a:hover {text-decoration: none; } a img, embed, object { border:0 none;} sup {top: -0.5em;} sub, sup {font-size: 75%;line-height: 0;position: relative;vertical-align: baseline;} body, html {height:100%} b, strong { font-weight:700} h1 strong, h3 strong { font-weight:300} .header-nav li a, .link-row, .logo-hld, .header-nav li a::after, .langs, .dateHld span.date-tlt, .dateHld, nav ul li a::before, .logos img, .header-contact a i.show-i, .street-room::after, .icons span,#supersized, .desc-text .btn::before, .section-btn::before, .news-el::before, nav ul li a span::after, .bookNow, .bookNow::before, .dateHld::after, .s02 {-webkit-transition: all 0.2s ease-out;-moz-transition: all 0.2s ease-out;-o-transition: all 0.2s ease-out;transition: all 0.2s ease-out} .offerIn, .offer h3 strong, #myScrollspy, .offerPrice, .logo-white, .langs li a, nav ul li a, nav ul li a span , .offer:hover .offer-link::before, .offer-hotel, .rezForm .btn::before, header > .section-btn, .outer-menu, #header-right, .s05 {-webkit-transition: all 0.5s ease-out;-moz-transition: all 0.5s ease-out;-o-transition: all 0.5s ease-out;transition: all 0.5s ease-out} .gallery-text-section .lslide::before, header h1, .rez-form-hld, .logo, .social-media a::after, .s1 {-webkit-transition: all 1s ease-out;-moz-transition: all 1s ease-out;-o-transition: all 1s ease-out;transition: all 1s ease-out} .title-main, .s2 {-webkit-transition: all 2s ease-out;-moz-transition: all 2s ease-out;-o-transition: all 2s ease-out;transition: all 2s ease-out} .s5 {-webkit-transition: all 5s ease-in;-moz-transition: all 5s ease-in;-o-transition: all 5s ease-in;transition: all 3s ease-in} /* HOTEL LAYOUT HotelSystems.pl */ body #ui-datepicker-div { display:none} body {width:100%;font-size:14px; line-height:1.5; color: #111;background:#FFF;} .lslide { position:relative} .lslide:after, #supersized li:after { position:absolute; content:""; left:0; top:0; right:0; bottom:0;background:rgba(0,0,0,0)} #supersized li:after {/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.65+0,0+44 */ background: -moz-linear-gradient(45deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 44%, rgba(0,0,0,0) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(45deg, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 44%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(45deg, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 44%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } /* PAGE HOLDER */ header { height:100vh; min-height:500px; float:left; width:100%; z-index:10000; overflow:hidden;} .header-top {padding: 15px 30px 10px;float:left;width:100%; background:#000; font-size:12px; color:#444; text-transform:uppercase; letter-spacing:0.1em; position:fixed; top:0; left:0; right:0; z-index:20000} .header-top h3 { float:left; padding:0; margin:5px 0 0 0} .header-top * {font-weight:400; color:#FFF; font-style:normal; letter-spacing:0} .header-nav, .langs {float: right; list-style-type: none; padding:0; margin:0; position:relative; z-index:30; line-height:27px } .header-nav { margin-right:15px} .header-nav li, .langs li { display:inline-block; padding:0; margin:0 0 0 15px} .header-nav li a, .langs li a { cursor: pointer; color:#666; float: left; width: 100%; text-align:center; position:relative; letter-spacing:0.1em;line-height:1; padding:0 5px} .header-nav li a, .langs li a:hover, .body-lang-pl #lang_pl a, .body-lang-de #lang_de a, .body-lang-en #lang_en a { color:#FFF} .header-nav_ li a::after { content:""; height:1px; background:#FFF; width:0; left:0; top:100%; position:absolute} .header-nav li a:hover::after { width:100%} .header-nav li i { color:#FFF; transform:scale(1.1); } .header-nav li a { font-size:17px} .header-nav li a:hover { transform:scale(1.2)} #top-affix.act .header-nav li.first a { color:#FFF; background:#00a2ca;} .header-middle { float:left; width:100%; background:#FFF; padding-top:130px; position:relative;} .title-main strong, .title-main span, header h1 strong, header h1 span { float:left; width:100%; position:relative } .title-main span, header h1 span { font-weight:300; font-size:16px; letter-spacing:0.1em; text-transform:uppercase; padding-top:40px} .title-main span::before, header h1 span::before { height:2px; width:40px; background:#FFF; content: ""; position:absolute; top:20px; left:0} .header-middle.act .offer-hotel { opacity:0} .offer-hotel img { width:35px} .logo-hld {float: left; width:160px; margin-left:-80px; text-align:center; z-index:30000;position:fixed; top:8px; left:50%;} .logo img { width:100%; float:left} .logo .logo-white { position:absolute; left:0; top:0; } #top-affix.act .logo-hld { margin-left: -35px; top:3px; width: 70px;} #top-affix.act .logo .logo-white { height:95px} header > .section-btn { position:fixed; left:0; bottom:-100px; margin:0; background:#111; z-index:99999; text-align:center; padding:10px; line-height:14px} header > .section-btn * { color:#FFF} header > .section-btn:hover * { color:#000} header > .section-btn i { padding-right:10px} header > .section-btn strong { font-size:12px!important; font-weight:300} footer { background:#000; float:left; width:100%; position:relative; padding-top:80px; text-align:center} .footer-images { float:left; width:100%; margin-bottom:40px} .footer-images-more { width:350px; margin-bottom:50px} .footer-bottom { background:#FFF; text-align:center; padding:10px 30px; float:left; width:100%} .social-footer { float:left; width:100%; text-align:center; margin-bottom:80px} .footerContact { float:left; width:100%; text-align:center; letter-spacing:0.2em; margin-bottom:50px} .footerContact * { color:#FFF; font-size:20px; text-transform: uppercase;} .footerContact span.phone { font-size:38px; font-weight:300} .footerContact span { float:left; width:100%; padding:10px 0} .footerContact i { margin-right:5px} .HS {cursor:pointer; position:relative; top:3px; margin-left:5px} .social-footer { color:#FFF; font-size:22px} .social-footer span {padding:0 8px; cursor: pointer} .footer-nav { float:left; width:100%; text-align:center; padding:30px 0; background:url(/img/logo_white.svg) no-repeat right center; background-size:90px;} .footer-nav li { display:inline; padding:0 15px} .footer-nav li a { color:#FFF; letter-spacing:0.1em; } .footer-nav li a:hover { text-decoration:underline} .mobile-menu { position:fixed; bottom:12px; left:0; display:none; z-index:99999999999; } .mobile-menu li { width:50%; float:left; display:inline; } .mobile-menu li a { width:50px;line-height:50px;margin-left:12px ; height:50px; font-size:24px; float:left; background:#666; text-align:center; text-transform:uppercase; border-radius:50%; color:#FFF; } .mobile-menu li a span { float:left; width:100%} /* NAVs */ nav {float: left; width:100%; background:#FFF; } .header-middle.act nav { top:50px; position:fixed; z-index:9999;} nav ul {list-style-type: none; line-height:37px; width:100%; max-width:1300px; margin:0 auto; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -moz-flex; display: -webkit-flex; display: flex;} nav ul li {cursor: pointer; display: inline-block; float: left; text-align: center;-webkit-flex:auto; /* Safari 6.1+ */ -ms-flex:auto; /* IE 10 */ flex:auto; } nav ul li a {float: left;width:100%; position:relative; overflow:hidden; text-align:center; color:#222; text-transform:uppercase; font-size:14px; letter-spacing:0.1em; padding:11px 0; } nav ul li a span::before { background:#000; content:""; width:20px; height:20px; position:absolute; bottom:-18px; left:50%; margin-left:-10px;} nav ul li.first a::before { display:none} nav ul li a span { margin:0 10px; position:relative; font-weight:400} nav ul li#menu_4117 { background:#C40300; } nav ul li#menu_4117 a {color:#FFF} nav ul li#menu_4117 a::before { background:#FFF} nav ul li.active a::before, nav ul li.act a::before, nav ul li a:hover::before { transform:rotate(45deg); bottom:-14px;} nav ul li.active a::before, nav ul li.act a::before, nav ul li a:hover::before { background:#FFF; } .sub-menu-hld ul { display:block; text-align:center; border:0 none;padding:40px 0;} .sub-menu-hld ul li { display:inline-block; float:none; border:1px solid #000} .sub-menu-hld ul li a:hover { background:#000} .sub-menu-hld ul li.active { border-color:transparent} #myScrollspy { position:fixed; bottom:-100px; background:#000; z-index:100 } nav#myScrollspy ul li a span {color:#FFF; margin:0 5px; font-size:12px} nav#myScrollspy ul li a { background:none!important} #myScrollspy.act { bottom:0} .section-boxes { float:left; width:100%;} .link-row { border-bottom:1px solid #FFF; border-left:1px solid #FFF; transform:rotate(225deg); position:absolute; z-index:30; top:23px; right:23px; width:30px; height:30px} .section-boxes:hover a:hover .link-row { transform:rotate(585deg)} .section-boxes a { float:left; width:25%; height:calc((100vh - 330px) / 2); min-height:220px; position:relative; background-size:cover; background-position:center center; overflow:hidden; background-color:#FFF;} .section-boxes a#navlist_7555 { width:50%} .section-boxes a#navlist_7560 span { color:#FFF} .section-boxes a img {position:absolute; left:50%; transform:translateX(-60%); text-align:center; top:50%; height:100px; margin-top:-80px; z-index:50; } .section-boxes a::after {background: #000 none repeat scroll 0 0; content: ""; height: 100%; right: -110px; position: absolute; top: 0; transform: skewX(10deg); width: 150px; z-index: 10; z-index:5} .section-boxes a span { position:absolute; color:#FFF; right:40px; bottom:20px; font-size:30px; line-height:30px; z-index:20; font-weight:300; text-align:right} .section-boxes a::before { content:""; position:absolute; left:0; top:0; bottom:0; right:0; border:1px solid #FFF; z-index:10; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+28,0.9+100 */ background: -moz-linear-gradient(-45deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,0.9) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(-45deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0.9) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0.9) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#e6000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */} .section-boxes a.icon-link::before { background:none} .section-boxes a.icon-link span { color:#111} .outer-menu .menu > div > div > ul { margin-top:80px!important} @media screen and (max-width: 800px) { .section-boxes a { width:50%; height:200px; min-height:0} .section-boxes a#navlist_7570 { width:100%} .section-boxes a span { font-size:20px; font-weight:normal} } @media screen and (max-width: 440px) { .section-boxes a img { height:50px; margin-top:-40px} .section-boxes a { height:130px; } .section-boxes a span { font-size:16px; right:20px; bottom:10px} .section-boxes a::after { display:none} } /* .secNav { left:auto; right:15px; width:auto; top:46px; position:absolute; text-align:center} .secNav ul {list-style-type: none; margin-top:0; display:flex} .secNav ul li { float:left; width:auto; padding:0 10px;} .secNav ul li a { color: #FFF; font-size:13px; text-transform:uppercase; padding:0; line-height:26px} nav ul.dropdown li { float: left; zoom: 1; position:relative } nav ul.dropdown ul { width:200px!important; margin-left:-100px; left:50%; display:none; _visibility: hidden; position: absolute; top:0; z-index:10;margin-top:52px; background:rgba(255, 255, 255,0.9); padding:10px 0} nav ul.dropdown ul li { font-weight: normal; float: left; padding:0; width:100%; } nav ul.dropdown ul li.last, nav ul ul li:last-child { background-image:none!important} nav ul.dropdown ul li a { display:block; width:100%; padding:0!important; border-right: none; display: inline-block; height:auto; float:left;margin:0!important; background:none!important } nav ul.dropdown ul ul { left: 100%; top: 0; } nav ul.dropdown li:hover > ul { _visibility: visible; display:block } nav ul li ul li a span { text-align:center!important; color:#000!important; float:left; font-size:13px!important; padding:8px 0!important; line-height:15px!important; width:80%!important; margin-left:10%} nav ul li ul li a:hover span, nav ul li ul li.act a span { color:#000000!important} nav ul.dropdown li.act ul { _display:block!important} */ /* PAGE CONTENT */ .site-map { float:left; width:100%; padding:150px 0 50px; background:#444} .site-map p { text-align:center; float:left; width:100%; padding:30px; color:#FFF} .site-map ul { width:90%; margin:0 auto; padding:0; text-align:center } .site-map ul li { font-size:22px; line-height:26px; padding:10px; display:inline-block; background:#222222; margin:5px } .site-map ul li a { color:#FFF} .text-title h3 {float:left; width:40%; background:#000; padding:50px 30px; color:#FFF; font-size:34px; line-height:1; letter-spacing:0.1em; } .text-title .kontaktNew h3 { width:100%} .text-title h3 strong, .text-title h3 span { float:left; width:100%; position:relative } .text-title h3 span { font-weight:300; font-size:16px; letter-spacing:0.1em; text-transform:uppercase; padding-top:40px} .text-title h3 span::before { height:2px; width:40px; background:#FFF; content: ""; position:absolute; top:20px; left:0} .gallery-text-section { background:#EEE; padding:0} .gallery-text-section h3 { position:relative; z-index:30; background:none; color:#000; padding-top:150px; text-align:right;} .gallery-text-section h3 span::before { left:auto; right:0; background:#000} .gallery-text-section ul li, .gallery-text-section ul { margin:0; padding:0} .gallery-text-section ul li img { width:60%; float:left} .gallery-text-section .lSAction > .lSNext { right: 50%;} .gallery-text-section .lSSlideOuter .lSPager.lSpg { width:50%} .gallery-text-section ul li h3 img { width:50px; float:none; padding-bottom:20px} .gallery-text-section .lslide {position:relative; float:left; width:100%} .gallery-text-section .lslide:after { display:none} .section-bg h3, footer > h3 { color:#FFF; font-size:36px; float:left; width:90%; margin:80px 5% 50px; text-align:center ;letter-spacing:0.1em; text-transform:uppercase; font-weight:300} .section-bg h3 { color:#222} footer > h3 { margin-bottom:20px; margin-top:0} footer > h3 span { font-size:20px;} .text-images { background:#EEE; padding:0; position:relative;} .text-images .text-title-in { width:30%; float:left; padding:65px 0} .text-images .default-text img { width:30px} .text-images-right h3, .text-images-right .image-section {width:60%; position:absolute; top:0; right:0} .text-images-right .image-section { top:180px; background-position:center center; background-size:cover; bottom:0 } .text-images.left-img .text-title-in { float:right; text-align:right} .text-images.left-img .text-images-right .image-section, .text-images.left-img .text-images-right h3 { right:auto; left:0} .section-btn-hld { float:left; width:100%; padding:0; text-align:center; margin:20px 0; position:relative; z-index:20} .section-btn-hld-najem { margin:-2px 0 0 0} .default-text .btn, .section-btn { float:right; padding:10px 20px; color:#000; border: 1px solid #b18340; letter-spacing:0.2em;font-size:14px; text-transform:uppercase; text-decoration:none; position:relative; line-height:24px; cursor:pointer; } .section-btn::before { content:""; left:0; top:0; bottom:0; width:0; background: #B18340; position:absolute; z-index:0} .section-btn:hover::before { width:100%} .section-btn:hover span { color:#FFF; position:relative; z-index:10} .section-btn i { padding-right:10px;} .btn { border:1px solid #000000; display:inline-block; margin:10px 5px} .btn-success { background:#000000} .btn:hover { text-decoration:none!important; color:#FFF; background:#000000} .desc-text {float:left; width:100%; margin:0; font-size:16px; line-height:24px; color:#222;} .desc-text ul, #panel1 ul, #secText ul, .separateOffer ul, .roomDesc ul { padding:5px 15px 15px; list-style-type: square; text-align:left;} .desc-text u li, #secText ul li, .separateOffer ul li { margin-left:20px; float: none;} .desc-text em { color:#FFF; background:#C4B37F; font-style:normal; padding:3px 10px; margin-right:15px; font-size:85%;white-space: nowrap;} .desc-text h3 { font-size:17px; line-height:25px; padding:20px; letter-spacing:0.15em; background:#EEE; text-align:center; margin:10px 0} .desc-text h3 a { color:#666} .desc-text p { padding:10px 0; text-align:justify; letter-spacing:0.1em} .desc-text p strong { color:#888; font-weight:normal} .desc-text p a { text-decoration:underline; color:#666} .desc-text p a:hover { color:#111} .desc-text .btn { background:#222; color:#FFF; text-decoration:none; text-transform:uppercase; font-size:16px; border-radius:0; padding:10px 25px; position:relative; margin-left:-8px} .desc-text .btn:hover { color:#FFF!important} #section-7132 .btn-desc { background:#222222; color:#FFF} #section-7132 .desc-section { left:50px; right:50px; width:auto} /* Contact gallery */ .contact-gallery { background:#222} .contact-gallery * { color:#FFF;} .gal-kontakt-white * { color:#222} .contact-gallery .gal-kontakt { float:left; width:25%; min-height:250px; height:33.33vh; background-size:cover; background-position:center top; position:relative} .gal-kontakt-in { position:absolute; bottom:30px; left:30px; right:10px; color:#FFF } .gal-kontakt-in > strong { font-weight:300; font-size:30px; line-height:30px;float:left; width:100%} .gal-kontakt-in > span { font-size:14px; line-height:18px; float:left; width:100%; padding-bottom:15px} .gal-kontakt-in a { font-size:18px; line-height:24px; float:left; width:100%} .gal-kontakt-in a:hover { text-decoration:underline} .news-item::before, .contact-gallery .gal-kontakt::before { content:""; position:absolute; left:0; top:0; bottom:0; right:0; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.45+1,0+100 */ background: -moz-linear-gradient(45deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.45) 1%, rgba(0,0,0,0) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(45deg, rgba(0,0,0,0.45) 0%,rgba(0,0,0,0.45) 1%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(45deg, rgba(0,0,0,0.45) 0%,rgba(0,0,0,0.45) 1%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#73000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } .gal-kontakt-text-spec { background:#222} .gal-kontakt-text-spec *, .gal-kontakt-text-spec p a { color:#FFF; text-decoration:none} .gal-kontakt-text-spec p { padding:0} .gal-kontakt-text-spec strong { padding-bottom:20px; font-size:20px; line-height:26px; color:#999} .contact-gallery .gal-kontakt-in strong { font-size:18px; line-height:24px} .contact-gallery .gal-kontakt-white::before { content:""; position:absolute; left:0; right:0; bottom:0; top:0; background:rgba(255,255,255,0.8)!important} .secTextIn { float:left; width:100%; background:#FFF; padding:30px} .default-text { letter-spacing:0.1em; font-size:16px; line-height:28px; float:left; width:100%} .default-text p { padding-bottom:15px; margin:0; text-align:justify} .default-text a { color:#000000} .default-text strong { font-weight:700} .default-text hr { border-color:#DDD} .default-text a:hover { text-decoration:underline} div .default-text h2, div .default-text h3 { padding:0 0 15px 0; text-align:center; font-size:24px; line-height:1.3; font-weight:300} body .default-text h3 { color:#222; background:none; width:auto; position:static; padding:10px 0; margin:0; text-align:left; float:none; font-weight:400; font-size:20px} .default-text h2 {color:#000000; font-size:30px;} .body-ident-najem_dlugoterminowy .default-text h2 {color:#FFF; background:#000; font-size:26px; padding:15px 5px} .default-text em {color:rgb(0, 162, 202); font-style:normal} .default-text ul { padding:5px 0 20px; list-style-type:square; text-align: left;} .default-text ul li { margin-left:30px} .default-text .section-btn { float:left} /* conference */ .conference-section { float:left; width:100%; position:relative; min-height:620px; height:auto} .conference-section .text-images-in h3 { margin-top:40px; margin-bottom:30px} .showless, .hideout { display:none} .conference-section .lslide::after { background:rgba(0,0,0,0.2)} .conference-section table { width:320px; margin:0 auto} .conference-section table * { text-align:center; color:#FFF} .conference-section table th { padding-bottom:10px} .conference-section table td { padding-bottom:50px; font-weight:400; font-size:30px; line-height:40px} .conference-section table img { width:30px} .conference-section .desc-section { width:35%; left:auto; right:0; box-shadow:-5px -5px 12px rgba(0,0,0,0.3); } .conference-section .desc-section p { padding:10px 25px; } .conference-section .desc-section .room-txt {min-height:620px} /* BE */ .rez-form-hld { position:fixed; top:50%; z-index:50; border-bottom:0 none; background:rgba(0,0,0,0.7); } .rez-form-hld * { font-weight:400} .rez-form-hld, #head-in.on-load .header-middle.act .rez-form-hld { right:-300px} #head-in.on-load .rez-form-hld { right:0} .price-quar { color:#FFF; background:#000; letter-spacing:0.1em; text-transform:uppercase; float:left; text-align:right; font-size:11px; text-align:center; width:100%; padding:5px 0} .rezForm { margin:20px; width:220px; float:left} .rezForm .hasDatepicker { display: none;} .inputRez { cursor: pointer; float: left; width:45%; margin-right:0 } .inputRezOut { float:right} .dateHld { background:none; border:1px solid rgba(255,255,255,0.5); float: left; margin:0; position:relative; width:100%; padding:10px 0 8px; line-height:30px; margin:0 0 10px 0; text-align:center; overflow:hidden} .inputRez span, .inputRez strong { float: none; font-size: 13px; line-height: 30px; text-align: center; } .inputRez span.nagl {color:#FFF; letter-spacing:0.1em; float:left; width:100%; line-height:12px; position:relative; text-align:left; margin-bottom:2px; text-transform:uppercase; font-size:10px} .dateHld span, .dateHld strong { color:#FFF; text-transform:uppercase; line-height:26px;} .dateHld strong { font-size:26px; font-weight:300} .bookNow { border: 0 none; color: #FFF; cursor: pointer; float: left; font-size:16px; letter-spacing:0.2em; font-weight: normal; line-height: 28px; text-align: center; text-transform: uppercase;width:100%; margin-top:10px; padding:5px 0; position:relative; overflow:hidden; background:#00a2ca } .bookNow * { font-weight:300; font-style:normal; text-align:center} .bookNow span { z-index:10; position:relative; text-align:center} .bookNow::before { background:#E9721F; } .bookNow:hover::before {width:100%} .dateHld:hover {background:#FFF} .dateHld:hover * {color:#000} /* Partners and reviews SECTION */ .partners { min-height:0;} .partners .text-images-in > h3, .reviews-section .text-images-in > h3 { margin-bottom:50px!important; margin-top:100px!important} .partners .text-images-in { background:rgba(255,255,255,0.5); padding-bottom:90px; min-height:0 } .reviews-hld { padding-top:130px} .review, .logos img { float:left; width:23%; margin:11px 1%; background:#FFF} .logos a { color:#FFF} .logos a:hover img { transform:scale(1.1); } .reviews-section { float:left; width:100%; background-color:#FFF; padding-bottom:80px; text-align:center } .review { background:#EEE; height:190px; position:relative} .review span { float:left; width: calc(100% - 5% - 150px); margin:10px 5% 10px 150px;} .review span strong { float:left; width:100%; font-size:16px; line-height:22px; height:66px; margin-top:0/*10px*/; margin-bottom:20px; font-weight:normal} .review span em { float:left; width:100%; margin-bottom:15px} .review span > b { font-weight:normal; font-size:20px; line-height:26px; background:/*#666*/#000; color:#FFF; padding:0 8px } .review span b b { font-size:12px; font-weight:normal} .review span img { width:70px!important;margin-left:10px; position:relative; top:8px } .review span img.TripAdvisor { top:2px} .average-section { border:1px solid #FFF; color:#FFF; padding:0 20px; margin-left:15px; font-weight:normal} .average-section b { font-size:30px; font-weight:normal} .all-reviews { background:#222222; display:inline-block; width:auto; padding:5px 15px; color:#FFF; margin-top:20px; float:none} .reviews-section .text-images-in > h3 {margin-top:150px!important; color:#FFF} /* Rooms PAGE */ .room-gal-hld > div.act { display:block} .room-icons { width:100%; text-align:left;} .room-icons-in .tt-el {text-align: left;width: 50%;height: auto;display: inline-block;padding: 0px;margin: 0px;float: left; line-height: 30px;} .room-icons-in .tt-el i , .room-icons-in .tt-el img { position:relative; top:2px; cursor:pointer; margin-right: 15px; color:#B18340;} .room-icons-in .tt-el-w { width:70px; letter-spacing:0.1em } .room-icons img { height:20px;} .room-size-icon sup { font-size:70%} .room-icons img:hover, .room-icons i:hover { opacity:0.6} .room-gallery { padding:0; float:left; width:100%; position:absolute; bottom:0; right:0; left:0; top:0; z-index:0} .room-gallery li {background-position:center center; background-size:cover; } .room-gallery .lSSlideWrapper ul, .room-gallery .lSSlideWrapper ul li, .room-gallery .lSSlideWrapper, .room-gallery .lSSlideOuter { height:100%!important; background-size: cover !important;} .SectionImage .lSSlideWrapper ul, .SectionImage .lSSlideWrapper ul li, .SectionImage .lSSlideWrapper, .SectionImage .lSSlideOuter { height:100%!important; background-size: cover !important;} .room-gallery .lSAction > a { top: 10%;} .room-gallery .lSAction > .lSNext { right:20px; box-sizing: content-box; top: 50%;} .room-gallery .lSAction > .lSPrev { left:20px; top:auto; box-sizing: content-box; top: 50%;} .room-gal-hld > div.act { position:fixed; left:0; top:0; right:0; bottom:0; z-index:99999} .room-gal-hld > div.act .lSSlideOuter .lSPager { bottom: 5%; display:block} .room-gal-hld > div.act .lslide:after { display:none} .room-gal-hld > div.act .lSAction a { background:#fff; bottom:auto; top:50%} .room-gal-hld > div.act .lslide::before { display:none} .close-btn { position:fixed; top:0; right:20px; z-index:999999; display:none; } @media screen and (max-width: 1000px) { } @media screen and (max-width: 740px) { .room-icons { padding:0; margin-top:10px; width:40%} .rooms-section .lSAction > a { display:none} .room-gal-hld > div.act .lSAction a {display:block} } @media screen and (max-width: 480px) { .room-icons { display:none} } .modal {z-index:999999999; background:rgba(0,0,0,0.8)} .modal .close { background: #00a2ca none repeat scroll 0 0; color: #fff; opacity: 1; position: absolute; right: -40px; top: 98px; width: 40px; line-height:40px} .modal .close:hover { background:#000} .modal h4 { letter-spacing:0.1em; font-weight:300; line-height:1.2} .modal h4 strong { font-size:34px; font-weight:300} .modal h4 span { font-size:20px} .modal-content { border-radius:0} .modal-body { letter-spacing:0.05em; font-size:14px; line-height:20px} .modal-body-image { float:left; width:40%; margin-right:15px; margin-bottom:5px} .modal-body p { padding-bottom:15px} .modal-body ul { padding:3px 0 10px 0; list-style-type:square} .modal-body ul li { margin-left:40px} .modal-body-black ul { padding:0; list-style-type:none} .modal-body-black ul li { margin:0} .modal-body h3 { font-size:22px; line-height:30px; padding:10px 0; margin:0} .modal-body strong { font-weight:400} .modal-footer { text-align:center} .modal-footer .btn { letter-spacing:0.15em; font-size:16px; text-transform:uppercase; font-weight:300; float:none; display:inline-block; background:none; color:#000} .modal-footer .btn:hover { background:#000; color:#FFF} .modal .modal-dialog {width: 90%; max-width:1200px} .modal-footer { padding-bottom:0} .modal-body { float:right; width:calc(100% - 300px)} .modal-body-full-width { width:100%} .modal-body-black { background:#000; color:#FFF; border:0 none; float:left; width:300px} .modal-icons { width:100%; text-align:left; padding:10px 0} .modal-icons li { float:left; width:100%; padding:5px 10px;} .modal-icons * { font-size:14px; letter-spacing:0.1em; line-height:1.5} .modal-icons img { height:14px} .modal-icons img, .modal-icons i { padding-right:5px} @media screen and (max-width: 730px) { .modal-body { width:calc(100% - 180px)} .modal-body-black { width:180px} .modal h4 strong { font-size: 21px;} } @media screen and (max-width: 480px) { .modal-body { width:100%} } /* GALLERY */ .gallery-section { float:left; width:100%; background:#FFF; position:relative} .gallery-section .room-gal-hld { float:left; width:100%; height:85vh; max-height:950px; position:relative } .gallery-section::before { display:none} .gallery-section .section-btn-hld { margin:0} .title-main { z-index:20; bottom:50px; right:70px; left:60%; text-align:right; opacity:0} .title-main span::before { left:auto; right:0} .lslide.active .title-main { opacity:1} .gallery-section-new { float:left; width:100%; } .gallery-section-header {padding-top:50px} .gallery-section-new a { position:relative; float:left; width:50%} .gallery-section-new a.galEl_1, .gallery-section-new a.galEl_5 { width:100%} .gallery-section-new a img { float:left; width:100%} .gallery-section-new a .offerPrice { width:60px; line-height:60px; opacity:0; position:absolute; left:30px; top:30px; color:#000; border:1px solid #000; text-align:center; transform:scale(0); font-size:24px} .gallery-section-new a:hover .offerPrice { opacity:1; transform:scale(1)} .gallery-section-new a .offerPrice i { padding:0} .gallery-section-new a::before { bottom:0; color: #fff; left: 0; position: absolute; right: 0;top: 0;background:none; border:1px solid #FFF; content:""} .gallery-section-new a:hover::before { _background:rgba(255,255,255,0.1)} /* Street View */ #wrapper .section-btn:focus { background:#666} .street-view-section .gal-kontakt-in strong { font-size:30px; line-height:32px} .street-view-section .street-room { height:50px; width:50px; right:30px; top:30px} .street-view-section .street-room i { font-size:26px; margin:0; line-height:50px} .street-view-section .gal-kontakt:hover .street-room::after { left:0; right:0; top:0; bottom:0} .street-view-section .gal-kontakt:hover::before { background:rgba(0,0,0,0.1)} .street-view-section .gal-kontakt-white .street-room { border-color:#222;} .street-view-section .gal-kontakt-white .street-room::after { display:none} /* Offer Page */ .body-offer .gallery-text-section h1 {float:right; width:40%; background:#EEE; padding:100px 30px 200px; font-size:44px; line-height:1; letter-spacing:0.1em; position:relative; z-index:30; color:#000; text-align:right;} .body-offer .gallery-text-section h1 strong, .body-offer .gallery-text-section h1 span { float:left; width:100%; position:relative } .body-offer .gallery-text-section h1 span {font-weight:300; font-size:30px; letter-spacing:0.1em; text-transform:none; padding-top:40px} .body-offer .gallery-text-section h1 span::before {height:2px; width:40px; content: ""; position:absolute; top:20px; left:0; left:auto; right:0; background:#007997} .body-offer .gallery-text-section ul li h1 img { width:40px; float:none; padding-bottom:20px} .body-offer .gallery-text-section ul li { position:relative; float:left; width:100%;} .body-offer .gallery-text-section ul li::before { content:""; position:absolute; left:57%; transform:rotate(-10deg); width:170px; background:#EEE; top:-100px; height:150%; z-index:10;} .offer-image {background-size:cover; background-position:center center; float:left; position:absolute; left:0; top:0; bottom:0; right:40%;} .offer-holder { float:left; width:100%; background:#FFF; padding-top:30px} .separateOffer { margin:0 auto; width:90%; font-size:16px; line-height:28px; max-width:1200px} .separateOffer .desc-in { padding:30px} .descIn {margin:30px 3%;float:left; width:94%} .descIn a { text-decoration:underline; color:#666} .descIn strong, .descIn a:hover { color:#C4B37F; font-weight:normal} .descSmall { width:50%; } #top { float:left; width:100%; position:relative; height:calc(100vh - 180px); z-index:0; background-position:center center; background-size:cover; margin-top:-10px} #top::after {} .all-offers { position:fixed; bottom:-50px; left:50%; transform:translateX(-50%); border:0 none; margin:0; text-transform:uppercase; letter-spacing:0.2em; background:#007997} .header-middle.act .all-offers { bottom:0} .btn-success.all-offers:hover { background:#000} .separateOffer { padding:30px 0; margin:0 3%; width:39%; float:left; position:relative } .separateOffer::before { content:""; position:absolute; right:-4%; top:30px; bottom:30px; border-right:1px solid #EEE} .body-offer #book { width:55%; float:right; clear:none!important; padding:0 20px} @media screen and (max-width: 900px) { .separateOffer { width:94%} .body-offer #book { width:100%} } /* Newsletter*/ #newsletter { display:inline-block; padding:0 15px; position:relative; top:7px} #newsletter strong { text-transform:uppercase; margin-right:5px; float:left} #newsletter input { background:#FFF!important; border: 0 none; color:#999; float: left; font-size: 13px; padding: 10px 0; text-indent: 10px; text-transform: none; width:280px;line-height:40px; height:40px; padding:0; letter-spacing:0.1em; font-weight:400} #newsletter a { background:#b18340; margin: 0; text-transform: uppercase; width: 30px; float:left; height:40px; line-height:40px; text-align:center} #newsletter a:hover { background:#555} #newsletter a i {color:#FFF;line-height:30px; font-size: 15px; float:left; width:100%; text-align:center} #newsletter a:hover i { transform:scale(1.1)} /* MAP CSS */ .mapHolder { float:left; width:100%; position:relative; background:#FFF; overflow:hidden} .mapHolder::before { content:""; background:#FFF; position:absolute; left:55%; top:-50px; width:200px; height:150%; transform:rotate(-15deg); z-index:10; } .map-form {} #outputDiv { top:0; color: #000;background:#FFF; float: left; font-size: 14px; left: 0; letter-spacing: 0.1em; line-height: 22px; padding: 0; position: absolute; right: 0; text-align: center; z-index: 10;} #outputDiv * { color:#000} #outputDiv strong {font-size: 16px; font-weight: normal; line-height: 18px; padding-left: 4px;} #outputDiv span {background: #FFF; padding: 0 4px;} .directHld { margin:0 auto; width:300px} #start { color:#000; background:#FFF!important; line-height:45px; height:45px; border:1px solid #000; text-align:center; float:left; width:255px; margin:0!important; padding:0!important; font-size:14px; letter-spacing:0.15em; font-weight:400} .body-lang-en #start { letter-spacing:0.05em} body input.trasaBtn {background:#000000 url(https://thumbs.hotelsystems.pl/_design/bs/img/zoom.png) no-repeat center center!important;padding:0 15px!important; color: #FFF !important; float: right; font-size: 14px; width:45px; line-height:45px; height:45px;text-align: center; margin:0!important; border:0 none; text-transform:uppercase; letter-spacing:0.2em } #map-canvas {width:60%; height:450px; float:left} .mapHolder h3 { margin-top:130px; margin-bottom:30px; font-size:34px} .mapHolder h3 * { font-weight:300} .section-bg { float:right; width:40%; position:relative; overflow:hidden} .section-bg-in { margin:0 auto; width:90%; max-width:450px; position:relative; z-index:20} .tbl-contanct { width:100%; text-align:center; margin:25px 0} .tbl-contanct h4 { margin-bottom:10px; font-size:29px; line-height:32px} .tbl-contanct a.tel-contact { font-size:27px; line-height:40px} .contact-section { position:relative} .conf-map::before, .contact-section::before { content:""; position:absolute; left:0; right:0; bottom:0; top:0; background:rgba(255,255,255,0.8)} .contact-section .desc-text p::before { display:none} .contact-section .desc-text p strong, .contact-section .desc-text a { color:#000} .contact-section .desc-text h3 { background:none; border:1px solid #FFF;} @media screen and (min-height: 700px) {.tbl-contanct {margin: 50px 0;}} /* BLOG */ .blog-seciton { float:left; width:100%; padding:30px 0} .blog-seciton .text-title { padding:50px 0} .blog-seciton .btn { background:#000000; border:0 none} .blog-seciton .btn:hover { background:#222; border:0 none} .blog-seciton-in { width:98%; margin:0 auto} .body-news .blog-seciton { padding:0} .blog-seciton .thumbnail { border:0 none; border-radius:0; box-shadow:2px 2px 10px rgba(0,0,0,0.1) } .blog-date { position:absolute; top:30px; left:30px; right:30px;text-align:center; color:#FFF; font-size:18px; text-shadow:1px 1px 0 rgba(0,0,0,0.3); letter-spacing:0.4em} .blog-el-sectoim .blog-date { position:static; float:left; width:100%; text-align:center; text-shadow:none; padding-bottom:30px; color:#000} .blog-seciton .caption h3 { font-size:30px; line-height:30px; letter-spacing:0.05em; padding:30px 0 } .blog-info { padding-bottom:30px} .blog-el-sectoim h1 { font-size:45px; line-height:45px; padding-bottom:40px; padding-top:30px; text-align:center} .blog-el-sectoim .text-images-desc { max-width:none; } .blog-el-sectoim .text-images-desc-in { background:rgba(255,255,255,0.6)} .post-fb-hld { display:inline-block; margin:0 20px} .blog-date-post { text-align:right; margin-bottom:40px } /* ATUTY HOME */ .offers-section .section-btn-hld { padding-bottom:30px} .offers-section .section-btn-hld .section-btn { float:none; display:inline-block} .offer-title { padding-bottom:0; padding-top:50px} .offer-holder-new { float:left; width:100%; background:#FFF} .offers-box { float:left; width:100%; background:#FFF;} .lslide::after { pointer-events: none;} .offer { float: left; position: relative; transition: transform 0.5s ease 0s; width: 33.33%; margin:0;background-position: center center; background-size: cover; overflow:hidden; cursor:pointer } .offer a { float:left; width:100%} .offer img { float:left; width:100%} .offerIn { bottom:0; color: #fff; left: 0; position: absolute; right: 0; top: 0; border:0 solid #FFF; content:""; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+46,0.65+81 */ background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 46%, rgba(0,0,0,0.65) 81%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 46%,rgba(0,0,0,0.65) 81%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 46%,rgba(0,0,0,0.65) 81%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */ } .offer h3 { position:absolute; bottom:0; right:0; left:0; padding:20px; color:#FFF; text-align:right; font-size:30px; line-height:1; letter-spacing:0.1em; z-index:10 } .offer h3 strong, .offer h3 span { float:left; width:100%; position:relative } .offer h3 span { text-transform:none; font-weight:400; font-size:16px; letter-spacing:0.1em; text-transform:none; padding-top:40px;} .offer h3 span::before { height:2px; width:40px; background:#00a2ca; content: ""; position:absolute; top:20px; right:0} .offers-box .lSSlideOuter .lSPager { display:none} .offer-section-all .offer h3 span {font-size:24px; font-weight:300} .offer-section-all .offer_2, .offer-section-all .offer_3, .offer-section-all .offer_4, .offer-section-all .offer_5 { width:25%} .offer-section-all .offer_1, .offer-section-all .offer_6 { width:50%} .offer-section-all .offerIn { border-width:2px} @media screen and (min-width: 900px) { .offer:hover h3 strong { padding-bottom:30px} .offer:hover .offerIn { background:rgba(0,0,0,0.4)} } @media screen and (max-width: 1200px) { .offer { width:50%} .offer-section-all .offer_1, .offer-section-all .offer_6 { width:66.66%} .offer-section-all .offer_5, .offer-section-all .offer_2 { width:33.33%} .offer-section-all .offer_3, .offer-section-all .offer_4 { width:50%} } @media screen and (max-width: 1100px) { .offer h3 { font-size:26px!important; line-height:1.2; font-weight:400 } .offer-section-all .offer h3 span { font-size:16px; padding-top:20px} .offer h3 span::before { top:10px} } @media screen and (max-width: 650px) { .offer-section-all .offer_6, .offer-section-all .offer_1 { width:100%!important} .offer { width:50%!important} } @media screen and (max-width: 500px) { .offer { width:100%!important} } @media screen and (max-width: 440px) { .offer h3 { font-size:20px!important; line-height:1; } .offer-section-all .offer h3 span { font-size:14px;} } @media screen and (max-width: 365px) { .offer { width:100%} } /* SOCIAL MEDIA */ .social-media { float:left; width:100%} .social-media > iframe {float:left; width:100%; margin-bottom:2px } .social-media h3 { float:left; width:100%; background:#222; font-size:30px; line-height:32px; color:#FFF; padding:60px 0 30px; letter-spacing:0.1em} .social-media h3 span { padding:0 30px; display:block} .social-media h3 span strong { color:#666; font-weight:normal; letter-spacing:0} .social-media a { float:left; width:16.66%; color:#666; overflow:hidden; position:relative} .social-media a::after { content:""; border:1px solid #FFF; left:0; top:0; bottom:0; right:0; position:absolute; } .social-media a:hover::after { background:rgba(0,0,0,0.3)} .social-media a img { float:left; width:100%;} .social-media a:hover img { transform:scale(1.05)} .social-media a > div { position:absolute; left:5px; right:5%; bottom:5px; transform:translateY(0); color:#FFF; z-index:10; text-align:center; font-size:16px; line-height:22px; letter-spacing:0.1em} .social-media a:hover > div {bottom:50%; transform:translateY(50%);} .media-icon { position:absolute; left:20px; top:20px; color:#FFF; font-size:20px;} @media screen and (max-width: 1000px) {.social-media a { width:33.33%}} @media screen and (max-width: 500px) {.social-media a { width:50%}} /* NEWS */ .body-ident-aktualnosci .cnt { padding:0!important} .news-item { float:left; width:50%; height:100vh; min-height:500px; background-position:center center; background-repeat:no-repeat; background-size:cover; position:relative} .news-item-1, .news-item-4 { width:100%} .news-item strong { font-size:40px; line-height:42px } .news-item p.lead { float:left; width:100%; padding:10px 0 0; font-size:16px; line-height:22px; margin-bottom:10px} .news-item .btn-desc { margin:10px 0 0} .news-page h3 strong { font-weight:300; font-size:40px; line-height:52px} .body-offer .desc-section { position:static; float:left; width:100%; margin-top:60vh } .body-offer .text-images-desc { width:96%; max-width:1400px} .body-offer.body-nomain .header-middle.act .bookNow.conf-link-main { margin-top: -11px !important;} /* Reveiws */ .reviews-average { float:left; width:100%; margin:100px 0; text-align:center} .reviews-average h3 { display:inline-block; border:1px solid #555; padding:10px 30px; font-size:60px; line-height:62px; color:#555} .reviews-average h3 span { text-transform:uppercase; font-size:30px} .reviews-average h3 strong { font-weight:300} .main-reviews .review { margin:0 0 20px 0; width:100%; height:auto; padding:20px 0 20px 0; border-radius:/*38px*/ 0 0 0} .main-reviews .text-images-desc {max-width: 1400px; width: 96%; margin: 0 auto;} .main-reviews .desc-text em {text-align: right;background: none; color: #222; font-size: 100%;margin:20px 0; padding: 0;} .main-reviews .review span > b { font-size:30px; line-height:85px; position:absolute; left:50px; top:30px; padding:0; height:85px; width:85px; text-align:center; border-radius:50% } .main-reviews .review span > b b{ font-size:20px;} .main-reviews .review span strong { height:auto; background:#BBB; padding:30px; text-align:center; font-size:30px; line-height:26px/*32px*/} .rev-text { float:left; width:100%; margin-top: 25px;} /* Kontakt */ .body-ident-kontakt_ h1 { padding-top:50px} .body-ident-kontakt_ footer { padding-top:0} /* VIDEO */ .video-section > div.act { position:fixed; z-index:99999; left:0; top:0; right:0; bottom:0} .full-screen, .close-video { display:none} .video-section .desc-text { padding-bottom:50px} #tubular-container { z-index:-1!important} #tubular-player { top:0!important} video { position: absolute; top:120px; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; transform: translateX(-50%); transition: 1s opacity; z-index:-1 } .video-after { position:fixed; left:0; top:0; right:0; bottom:0; background:rgba(0,0,0,0.3); z-index:0} #section-7386 .text-images-in { max-width:100%} #section-7386 .text-images-in > h3 { display:none} #section-7386 table td { padding:0; width:33.33%} .pp_pic_holder { z-index:99999999!important} .rez-mobile { position:fixed; left:20px;line-height:40px; line-height:35px; background:#c40300; letter-spacing:0.1em; color:#FFF; float:left; padding:0 10px; text-transform:uppercase} .outer-menu { display:none;} @media screen and (max-width: 1100px) { .header-top .cd-headline { display:none} .header-nav { float:left} nav ul li a span { font-size:12px} .header-nav li { margin-left:5px} .header-nav li.header-phone { margin:0} ul li.header-phone a { font-size:14px} .header-top { padding-left:20px; padding-right:20px} #myScrollspy { display:none} } @media screen and (max-width: 1110px) { nav { display:none} .outer-menu { display:block; width:100%; height:70px; } .footer-nav { background-image:none} .offers-box .lSAction > a { top:50px} .header-middle.act .rez-mobile, .rez-mobile { top:0px !important;} .header-middle.act .outer-menu, .outer-menu {top:0px!important;} #supersized { top:130px} #supersized, #supersized li, #supersized a { height:calc(100vh - 130px) } } @media screen and (max-width: 740px) { .body-layout-full header h1 strong, .offer h3, .text-title h3, .title-main, header h1 { font-size:22px; line-height:1.2} .text-title h3 span, .title-main span, header h1 span { font-size:13px;} .footerContact *, footer > h3 span, .default-text { font-size:14px; line-height:1.4em} #section-000000000000000 .text-title-in { width:90%} .footer-images-more { width:100%!important; height:auto!important} .gallery-section .lslide::before { display:none} .gallery-section .title-main { left:20px; right:20px; text-align:center} .room-gallery .lSAction > a { top:40%!important} .gallery-section .lSAction > a::after { border-color:#FFF;} .body-ident-najem_dlugoterminowy .default-text h2 { font-size:20px; line-height:1.2} } @media screen and (max-width: 650px) { .offer-hotel img { display:none} .rez-form-hld { top:150px} .title-main, header h1 { bottom:20px; right:0} .header-nav li { display:none} .header-nav li.header-phone { display:block} .text-title-in, .text-images .text-title-in { padding:30px 0; width:90%} .text-images-right { float:left; width:100%} .text-images-right .image-section { position:static; width:100%; height:250px } .text-title h3, .text-images-right h3, .text-images-right .image-section { position:static; width:100%; padding:20px} .text-images .default-text img { width:10px} .default-text .btn, .section-btn { padding:5px 10px; font-size:12px} .text-title { padding:0 } body .lSSlideOuter .lSPager { bottom:15px} body .lSSlideOuter .lSPager.lSpg > li { padding:0 5px} } @media screen and (max-width: 480px) { .mapHolder h3, footer > h3, .footerContact span.phone { font-size:20px; line-height:1.2} .rez-form-hld { display:none} .kontaktNew input.section-btn, .kontaktNew textarea, .left-form { width:100%} #map-canvas { width:100%;} .mapHolder .section-bg { width:100%; padding:20px 0} .mapHolder h3 { margin-top:15px; margin-bottom:15px} .mapHolder::before { display:none} .logo-hld { left:0; margin:0!important} .header-nav li, .langs li { margin:0} .header-nav { width:100%; margin:0; } .header-nav li a {text-align:right} .header-top { padding:2px 15px 9px} .rez-mobile { left:auto; right:60px} } @media screen and (max-width: 350px) { #newsletter { padding:0; width:80%; margin:0 10%} #newsletter input { width:calc(100% - 30px)} .rez-mobile { font-size:12px; padding:0 5px} } #mlUsingCookies { z-index: 50000!important;} .form-sent { text-align:center; width:100%} .form-sent h3 { color:#FFF; border:1px solid #FFF; padding:30px; font-size:40px; line-height:42px; text-align:center; display:inline-block} /* kontakt FORM */ .dark-matter { background:#DEDEDE; border: medium none; font-size: 13px; margin:0 auto 0 auto; max-width: 600px; padding:40px 0; width: 100%; } .dark-matter > span { float:left; width:100%; text-align:center; font-size:20px; line-height:22px; padding-bottom:30px} .dark-matter label { display: block; margin: 0 0 5px; } .dark-matter label b { display: block; float: left; font-size: 10px; line-height: 36px; margin-right: 10px; margin-top: 2px; text-align: center; text-transform: uppercase; width: 32%; color:#404041 } .dark-matter label > span { float: left; font-weight: normal; margin-top: 5px; padding-right: 10px; text-align: right; width: 27%; font-size:14px; line-height:14px } .dark-matter label > span strong { font-size:10px; line-height:14px} .dark-matter input, .dark-matter input[type="text"], .dark-matter input[type="email"], .dark-matter textarea, .dark-matter select { background: none repeat scroll 0 0 #FFF; border: medium none; border-radius: 2px; color:#222; height: 25px; line-height: 15px; margin-bottom: 10px; margin-right: 6px; margin-top: 2px; outline: 0 none; padding: 5px 0 5px 5px; width: 65%; font-size:13px } .dark-matter select { -moz-appearance: none; background: url("img/down-arrow.png") no-repeat scroll right center #dfdfdf; color: #525252; height: 35px; line-height: 25px; text-indent: 0.01px; text-overflow: ""; width: 70%; } .dark-matter textarea { height: 100px; padding: 5px 0 0 5px; width: 65%; } .dark-matter input.button { border: medium none; color: #fff !important; font-size: 16px; height: auto; line-height: 30px !important; margin-left: 30%; margin-top: 20px; padding:15px 0; width: 40%; text-transform:uppercase; font-weight:normal; background:#222; letter-spacing:0.2em } .dark-matter .button:hover { background-color: #666 !important; } .dark-matter input.halfWidth { margin-right: 2%; padding-left: 0; width: 31%; text-align:center } .dark-matter select.halfWidth { width: 32%; text-align:center } #atrakcje12, #atrakcje13, #atrakcje14 { cursor: pointer; position:fixed; left:0; width:150px; height:65px; z-index:550; color: #000; font-family: Montserrat, "Helvetica Neue", sans-serif; font-weight: 700; letter-spacing: 0.046875em; line-height: 1; text-transform: uppercase; border: 0; background-color: rgba(255, 255,255,.7); /* -webkit-border-bottom-right-radius: 50px; -moz-border-radius-bottomright: 50px; border-bottom-right-radius: 50px; */ vertical-align:middle; } #atrakcje12 {top:193px!important;} #atrakcje13 {top:195px!important;} #atrakcje14 {top:270px!important; background: rgba(215, 201, 160, .8); color: #13253A;} .hideatrakcje {display: none;} #atrakcje12:hover, #atrakcje13:hover, #atrakcje14:hover { background-color:#fff; color: #000; } #b12 { width:30%; margin-left:0; margin-top:0; } #b12t { width:90%; margin-top:-30px; margin-left:20px; } .body-ident-ceny_i_rezerwacja #atrakcje12, .body-ident-ceny_i_rezerwacja #atrakcje13, .body-ident-ceny_i_rezerwacja #atrakcje14 {display: none;} .hsmap-widget.hsmap-region [data-hsmap-tags] .fa {color: #1C2434;} .sections-group .mapHolder {display: none;} #atrakcje12, #atrakcje13, #atrakcje14, .mainMenuHld3 { -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; -ms-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; } /* style */ .kontakt {padding:50px; border:1px solid #B18340;} .text-title { float:left; width:100%; padding:150px 0; overflow:hidden} .text-title-in { float:right; width:90%; margin:0 5%} #mobileMenu.menu ul li { margin: 0.7em !important; }