/* CSS Document */
@charset "utf-8";
@font-face {font-family:'SpartanMB'; src:url('../fonts/SpartanMB-Light.otf') format('truetype'); font-weight:300; font-style:normal; font-display:swap;}
@font-face {font-family:'SpartanMB'; src:url('../fonts/SpartanMB-Bold.otf') format('truetype'); font-weight:600; font-style:normal; font-display:swap;}
@font-face {font-family:'EssonnesDisplay'; src:url('../fonts/EssonnesDisplay-Italic.ttf') format('truetype'); font-weight:400; font-style:italic; font-display:swap;}

html body *:focus {outline:none;}
html { /* killing 300ms touch delay in IE */
-ms-touch-action: manipulation;
touch-action: manipulation;
}
html {font-size:100%; scroll-behavior:smooth;}
html, body {width:100%; margin:0; padding:0; background:#fff;}
audio, video, div, p, table, iframe, img, input, textarea {position:relative; display:block; box-sizing:border-box;}
body, button, input, textarea, table {font-family: 'SpartanMB', 'Roboto', Arial, sans-serif; font-size:16px; line-height:30px; font-weight:300; color:#656565;}

a, a:focus {color:inherit; text-decoration:none; outline:none;}
a:hover {text-decoration:none; outline:none;}

hr {display:block; height:1px; border:0 none; background:#003038; padding:0; margin:60px 0;}

h1, h2, h3, h4, h5, h6 {display:block; clear:both;}
h1, h2, h3 {font-family: 'EssonnesDisplay', 'Times', Times New Roman, serif; font-weight:400; font-style:italic; color:#003038;}
h1 {font-size:48px; line-height:56px; margin:30px 0 48px; padding:0;}
h2 {font-size:48px; line-height:56px; margin:30px 0 48px; padding:0;}
h3 {font-size:36px; line-height:42px; margin:30px 0; padding:0;}
h4 {font-size:24px; line-height:36px; margin:30px 0; padding:0;}
h5 {font-size:20px; line-height:32px; margin:30px 0; padding:0;}
h6 {font-size:16px; line-height:30px; margin:30px 0; padding:0; font-weight:600;}

.linebox {display:block; border-top:1px solid #003038; padding:0; margin:60px 0; text-align:center;}
.linebox h2 {display:block; width:max-content; margin:-34px auto 60px; padding:0 30px; background:#fff;}
.persik .linebox h2 {background:#fffaf8;}

p {padding:0; margin:0 0 30px;}
ul {margin-bottom:30px;}
li {margin-bottom:15px;}
ul, li {text-align:left;}
table {width:100%; padding:0; margin:0 0 26px; border-collapse:collapse; text-align:left;}
td {vertical-align:top; padding:0 20px 10px 0; text-align:left;}
td.tag {width:30px;}

strong {font-weight:600; color:#003038;}
img {max-width:100%; margin:0 auto;}
.bannerbild {width:100%; margin:0 auto;}

.blau {color:#00b9da;}
.rosa {color:#ffaf81;}
.light {color:#fff7f3;}

.minitext {font-size:65%;}
.sky {background:#00b9da; background-image:linear-gradient(90deg,#00b9da,#73e3ff);}

.patter {background:#eff5f5 url(../images/bloomdiamond.gif) center top;}

.banner {width:100%; padding:0; margin:0; clear:both; background-position:center center; background-size:auto 100%; z-index:200;}
.belle {width:100%; margin:0 auto;}
.fassade {background-image:url(../images/blaue-libelle-ferienhaus-am-bakenberg-an-der-ostsee-auf-ruegen-fassade.jpg);}
.vorderansicht {background-image:url(../images/blaue-libelle-ferienhaus-am-bakenberg-an-der-ostsee-auf-ruegen-vorderansicht.jpg);}
.hinteransicht {background-image:url(../images/blaue-libelle-ferienhaus-am-bakenberg-an-der-ostsee-auf-ruegen-hinteransicht.jpg);}
.hinteransicht-56 {background-image:url(../images/blaue-libelle-ferienhaus-am-bakenberg-an-der-ostsee-auf-ruegen-hinteransicht.jpg);}
.drei-tueren {background-image:url(../images/blaue-libelle-ferienhaus-am-bakenberg-an-der-ostsee-auf-ruegen-drei-tueren.jpg);}
.eingang-54 {background-image:url(../images/blaue-libelle-ferienhaus-am-bakenberg-an-der-ostsee-auf-ruegen-eingang-54.jpg);}
.eingang-55 {background-image:url(../images/blaue-libelle-ferienhaus-am-bakenberg-an-der-ostsee-auf-ruegen-eingang-55.jpg);}
.eingang-57-58 {background-image:url(../images/blaue-libelle-ferienhaus-am-bakenberg-an-der-ostsee-auf-ruegen-eingang-57-58.jpg);}
.garten {background-image:url(../images/blaue-libelle-ferienhaus-am-bakenberg-an-der-ostsee-auf-ruegen-garten.jpg);}
.strand {background-image:url(../images/blaue-libelle-ferienhaus-am-bakenberg-an-der-ostsee-auf-ruegen-strand.jpg);}
.meer {background-image:url(../images/blaue-libelle-ferienhaus-am-bakenberg-an-der-ostsee-auf-ruegen-meer.jpg);}

.logobar {position:absolute; top:50%; left:20%; width:400px; height:400px; padding:0; margin:-200px 0 0; text-align:center; z-index:210;
background:rgba(255,255,255,0.2); background-image:linear-gradient(90deg,rgba(255,255,255,0.98),rgba(255,255,255,0.88));}
.logo {width:80%; max-width:308px; padding:0; margin:26px auto 32px; display:block;}
.minilogo {width:80%; max-width:200px; padding:0; margin:26px auto 0; display:none;}

.gallery {width:92%; max-width:1400px; padding:80px 0; margin:0 auto; text-align:center;}
.gallery img {width:22%; margin:20px 1%; padding:8px; display:inline-block;}

.biggallery {width:100%; padding:0; margin:0 auto; text-align:center; line-height:0;}
.biggallery img {width:25%; margin:0; padding:0; display:inline-block;}

.main {width:100%; max-width:1440px; padding:0; margin:0 auto;}
.content {width:92%; max-width:1120px; padding:80px 0; margin:0 auto;}
.center {text-align:center;}
.clear {clear:both;}
.gaclear {clear:both; margin-bottom:-40px;}

.drittel {width:32%; margin:0 2% 0 0; float:left;}
.doppel {width:66%; margin:0 2% 0 0; float:left;}
.halb {width:48%; margin:0 4% 0 0; float:left;}
.last {margin-right:0;}

.persik {background:#fffaf8;
-webkit-box-shadow: inset 0px 0px 16px 0px #fff5e8;
-moz-box-shadow: inset 0px 0px 16px 0px #fff5e8;
box-shadow: inset 0px 0px 16px 0px #fff5e8;
}

.fewo {padding:40px 8%; margin:0 0 40px; background:#fff; 
-webkit-box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.06);
-moz-box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.06);
box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.06);
}

.shadow {background:#fff;
-webkit-box-shadow: 0px 0px 16px 0px rgba(200,180,160,0.3);
-moz-box-shadow: 0px 0px 16px 0px rgba(200,180,160,0.3);
box-shadow: 0px 0px 16px 0px rgba(200,180,160,0.3);
}

.weiter {display:block; padding:0 0 0 12px; border-left:6px solid #ff9024; color:#003038;
font-family: 'EssonnesDisplay', 'Times', Times New Roman, serif; font-size:16px; font-weight:400; font-style:italic;
-webkit-transition: border-width 0.2s ease-in-out;
-moz-transition: border-width 0.2s ease-in-out;
transition: border-width 0.2s ease-in-out;
}
.weiter:hover {border-left:30px solid #ff9024;}

.header {position:-webkit-sticky; position:relative; top:0px; width:100%; height:60px; padding:0; margin:0; letter-spacing:0.02em; z-index:300;
background:#ff9024; background-image:linear-gradient(90deg,#feac38 0,#ff9024 18%, #f76443 68%, #f18c6e 100%);}
.headercontent {width:100%; padding:0 2%; margin:0 auto; letter-spacing:0.1em;}
.libelle {position:absolute; top:6px; left:40px; width:62px; padding:0; margin:0; z-index:10;}
.home {position:absolute; top:15px; left:110px; width:max-content; padding:0; margin:0; z-index:301;}
.home a {padding:4px 10px; margin:0; height:42px; display:block; box-sizing:border-box;}
.header a {color:#fff; text-decoration:none;}
.header a:hover, #navi ul li.active a {color:#fff; text-decoration:none;}

input[type="checkbox"]:checked ~ #navi {transform:translateX(0);}
input[type=checkbox] {transition:all 0.3s; box-sizing:border-box; display:none;}
.sidebarIconToggle {position:absolute; top:22px; right:15px; width:22px; height:22px; box-sizing:border-box; z-index:99; cursor:pointer; display:none;
transition:all 0.3s;}
.spinner {position:absolute; width:100%; height:3px; background:#fff; box-sizing:border-box; transition:all 0.3s;}
.horizontal {position:relative; float:left; margin-top:3px; box-sizing:border-box; transition:all 0.3s;}
.diagonal.part-1 {position:relative; float:left; box-sizing:border-box; transition:all 0.3s;}
.diagonal.part-2 {position:relative; float:left; box-sizing:border-box; transition:all 0.3s; margin-top:3px;}
input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {box-sizing:border-box; transition:all 0.3s; opacity:0;}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {box-sizing:border-box; transition: all 0.3s; margin-top:8px; transform: rotate(135deg);}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {box-sizing:border-box; transition:all 0.3s; margin-top:-9px; transform: rotate(-135deg);}

#navi {margin:0; padding:15px 0 0; float:right; z-index:310; width:max-content; z-index:500;}
#navi ul {position:relative; margin:0; padding:0;}
#navi ul li {position:relative; margin:0 5px; padding:0; list-style:none; vertical-align:top; display:inline-block;}
#navi ul li a {padding:4px 10px; margin:0; height:42px; display:block; box-sizing:border-box; cursor:pointer;}
#navi ul li ul {position:absolute; top:-500px; left:-20px; padding:3px 0 0; margin:0; text-transform:none; display:block; box-sizing:border-box;}
#navi ul li ul li {display:block; box-sizing:border-box;}
#navi ul li ul li a, #navi ul li.active ul li a {padding:0px 25px; margin:0; width:220px; height:38px; display:block; box-sizing:border-box;
color:#003038; background:rgba(255,255,255,0.9);
-webkit-transition: padding 0.14s;
-moz-transition: padding 0.14s;
transition: padding 0.14s;
}
#navi ul li:hover ul {top:42px;}
#navi ul li:hover ul li a {padding:4px 25px; height:42px;}
#navi ul li:hover ul li:first-child a {padding:12px 25px 4px; height:50px;}
#navi ul li:hover ul li:last-child a {padding:4px 25px 12px; height:50px;}
#navi ul li ul li a:hover, #navi ul li.active ul li a:hover {background:rgba(255,255,255,1);}

.footer {width:100%; padding:48px 5%; margin:0; text-align:center; clear:both; background:#ff9024; background-image:linear-gradient(90deg,#feac38 0,#ff9024 18%, #f76443 68%, #f18c6e 100%);}
.footer, .footer h2, .footer h3 {color:#fff;}
.footer a, .footer a:link, .footer a:visited {color:#fff; text-decoration:none;}
.footer p {margin:0;}

.danke {position:absolute; top:0; left:0; width:100%; height:auto; padding:30px 5% 20px; margin:0 auto; text-align:center; 
background:#00b9da; color:#fff; z-index:9001; display:none;}
.danke h2 {color:#fff;}

.cook {position:fixed; top:0; left:0; width:100%; height:auto; padding:30px 2% 20px; margin:0 auto;
background:rgba(0,0,0,0.9); font-size:20px; line-height:30px; color:#fff; text-align:center; z-index:1000; display:none;}

iframe {width:100%; height:380px; padding:0; margin:0; clear:both; border:0 none;}
iframe.gmap {height:560px;}
iframe.umgebungmap {height:800px;}
iframe.calenda {height:380px;}

form {margin:30px 0 0;}
select {height:24px; border:0; padding:0 10px 2px; margin-bottom:12px;}
textarea, input.zeile {width:100%; padding:8px 15px; margin:0 auto 12px; border:1px solid #f2f2f2; border-radius:3px; background:#fafafa;}
textarea {height:auto; min-height:200px; resize:vertical;}
input.zeile {height:60px;}
.zeile:focus::-webkit-input-placeholder {color:transparent;}
.zeile:focus::-moz-placeholder {color:transparent;}
.zeile:-moz-placeholder {color:transparent;}
textarea:focus::-webkit-input-placeholder {color:transparent;}
textarea:focus::-moz-placeholder {color:transparent;}
textarea:-moz-placeholder {color:transparent;}
input.honey {visibility:hidden; display:none;}

input.checky {display:none;}
input.checky + label span {position:relative; display:inline-block; margin:-2px 10px 0 0; vertical-align:middle; cursor:pointer;
width:25px; height:25px; background:#fff; border:1px solid #ddd; border-radius:5px;}
input.checky:checked + label {position:relative; cursor:pointer;}
input.checky:checked + label span {box-shadow:inset 0px 0px 0px 2px #fff;}
input.checky:checked + label span::after {position:absolute; left:0; top:-4px; opacity:1; 
content:"✔"; color:#00b9da; font-size:30px; font-weight:600; text-align:center;}

input[type=date] {display:inline-block; padding:8px 15px; margin:0 auto 12px; border:1px solid #f2f2f2; border-radius:3px; background:#fafafa;}

input.button, a.button, a.telbutton {width:max-content; height:auto; display:block; padding:10px 24px 12px; margin:40px auto 30px; border:0 none; border-radius:30px; 
cursor:pointer; font-size:18px; line-height:30px; font-weight:600; color:#fff; text-decoration:none; text-align:center;
-webkit-transition: padding 0.14s ease-in-out;
-moz-transition: padding 0.14s ease-in-out;
transition: padding 0.14s ease-in-out;
}
a.button, input.button {background:#ff9024; background-image:linear-gradient(0deg,#ff9024,#fecc38);}
a.telbutton {background:#00b9da; background-image:linear-gradient(0deg,#00b9da,#73e3ff); letter-spacing:0.1em;}
input.button:hover, a.button:hover, a.telbutton:hover {color:#fff; text-decoration:none; padding:10px 26px 12px;}
a.telbutton img {margin:0 10px 0 0; padding:0; width:30px; float:left;}

.totop {position:fixed; bottom:15px; right:15px; width:2px; height:2px; padding:15px 22px 25px 19px; margin:0; 
border-radius:50%; background:#feac38; z-index:999; opacity:0.4; filter: alpha(opacity=40);} /* For IE8 and earlier */
.totop:hover {opacity:0.6; filter: alpha(opacity=60);} /* For IE8 and earlier */
.totop i:before, .totop i:after {content:""; position:absolute; background-color:#fff; width:3px; height:9px;}
.totop i:before {-ms-transform: translate(-2px, 0) rotate(45deg); /* IE 9 */ 
 -webkit-transform: translate(-2px, 0) rotate(45deg); /* Chrome, Safari, Opera */
 transform: translate(-2px, 0) rotate(45deg);}
.totop i:after {-ms-transform: translate(2px, 0) rotate(-45deg);
 -webkit-transform: translate(2px, 0) rotate(-45deg);
 transform: translate(2px, 0) rotate(-45deg);}
 
.weatherwidget-io {width:100%; max-width:200px;}

/*///////////////////// IMAGE LIGHTBOX /////////////////////////*/

#imagelightbox {
cursor:pointer; position:fixed; z-index:202;
-ms-touch-action: none; touch-action: none;
-webkit-box-shadow: 0 0 10px rgba( 0, 0, 0, .3 ); /* 50 */
box-shadow: 0 0 10px rgba( 0, 0, 0, .3 ); /* 50 */
}
#imagelightbox-overlay {
background-color:#fff; background-color:rgba(255,255,255,.9);
position:fixed; z-index:201; top:0; right:0; bottom:0; left:0;
}
#imagelightbox-loading, #imagelightbox-loading div {border-radius:50%;}
#imagelightbox-loading {
width: 2.5em; /* 40 */
height: 2.5em; /* 40 */
background-color:#00b9da; background-color:rgba(0,185,218,0.6);
position:fixed; z-index:203; top:50%; left:50%; 
padding:0.625em; /* 10 */
margin: -1.25em 0 0 -1.25em; /* 20 */
}
#imagelightbox-loading div {
width: 1.25em; /* 20 */
height: 1.25em; /* 20 */
background-color: #fff;
-webkit-animation: imagelightbox-loading .5s ease infinite;
animation: imagelightbox-loading .5s ease infinite;
}
@-webkit-keyframes imagelightbox-loading {
from { opacity: .5;	-webkit-transform: scale( .75 ); }
50%	 { opacity: 1;	-webkit-transform: scale( 1 ); }
to	 { opacity: .5;	-webkit-transform: scale( .75 ); }
}
@keyframes imagelightbox-loading {
from { opacity: .5;	transform: scale( .75 ); }
50%	 { opacity: 1;	transform: scale( 1 ); }
to	 { opacity: .5;	transform: scale( .75 ); }
}

/*///////////////////// RESPONSIVE ////////////////////*/

@media (max-width: 1900px) {
.logobar {left:50%; margin-left:-560px;}
}

@media (max-width: 1680px) {
.headercontent {letter-spacing:normal;}
.libelle {left:15px;}
.home {left:85px;}
}
@media (max-width: 1540px) {
.logobar {height:100%; top:0; margin-top:0;}
.logobar h3 {line-height:34px;}
}
@media (max-width: 1300px) {
.logobar {width:360px; margin-left:-560px;}
.logo {max-width:221px; margin:32px auto;}
.logobar h3 {font-size:32px; margin-top:16px;}
}
@media (max-width: 1220px) {
#navi ul li {margin:0;}
#navi ul li span.nodis {display:none;}
.logobar {left:4%; margin-left:0px;}
.logo {max-width:221px; margin:20px auto;}
.footer {padding-top:40px; padding-bottom:40px;}
}
@media (max-width: 1024px) {
body {font-size:14px; line-height:26px;}
.header {position:relative;}
.home {top:17px;}
#navi {padding:17px 0 0;}
.logobar {width:240px;}
.halb, .drittel, .doppel {width:100%; margin:0 auto; padding:0; float:none;}
.content {padding:20px 0 60px;}
.linebox {border-top:0 none;}
.linebox h2 {width:auto; margin:40px auto 60px; padding:0; background:none;}
.footer {padding-top:20px; padding-bottom:20px;}
.gallery {width:100%; padding:20px 0 40px;}
.gallery img {width:44%; margin:10px 1%; padding:5px;}
h1, h2, h3 {font-size:32px; line-height:38px;}
h1, h2, h3 { 
-moz-hyphens: auto;
-o-hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
-moz-hyphenate-limit-chars: auto 5;
-o-hyphenate-limit-chars: auto 5;
-webkit-hyphenate-limit-chars: auto 5;
-ms-hyphenate-limit-chars: auto 5;
hyphenate-limit-chars: auto 5;
-moz-hyphenate-limit-lines: 2;
-o-hyphenate-limit-lines: 2;
-webkit-hyphenate-limit-lines: 2;
-ms-hyphenate-limit-lines: 2;
hyphenate-limit-lines: 2;
}
.logobar h3 {font-size:20px; line-height:24px;}
.danke h2 {hyphens:none;}
}
@media (max-width: 900px) {
.home span.nodis {display:none;}
.logobar h3 {display:none;}
.logo {top:50%; margin-top:-75px;}
.biggallery img {width:50%;}
}
@media (max-width: 834px) {
iframe.calenda {height:660px;}
}
@media (max-width: 800px) {
html, body {overflow-x:hidden; overflow-y:auto;}
.logobar {display:none;}
.sidebarIconToggle {display:block;}
.home span.nodis {display:inline;}
#navi {position:absolute; top:60px; right:0; width:220px; padding:0; margin:0; box-sizing:border-box;
transform:translateX(260px); transition:transform 600ms ease-in-out;}
#navi ul {background:#00b9da;}
#navi ul, #navi ul li, #navi ul li ul {display:block; padding:0;}
#navi ul li ul, #navi ul li:hover ul {position:relative; top:auto; left:0; margin:0;}
#navi ul li a, #navi ul li ul li a {width:220px; padding:10px 20px !important; height:48px !important;}
#navi ul li a:hover {background:rgba(255,255,255,0.8); color:#003038;}
#navi ul li:first-child a:hover {background:#00b9da; color:#fff; cursor:auto;}
#navi ul li:first-child ul li a:hover {background:rgba(255,255,255,0.8); color:#003038; cursor:pointer;}
}
@media (max-width: 500px) {
.banner {height:140px;}
}
@media (max-width: 460px) {
iframe {height:840px;}
iframe.gmap {height:560px;}
.gallery img {width:92%;}
.biggallery img {width:100%;}
}
@media (max-width: 340px) {
.home span.nodis {display:none;}
}