/* roboto-300 - latin */
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 300; src: url('../../images/shared/fonts/roboto-v30-latin-300.eot'); /* IE9 Compat Modes */ src: local(''), url('../../images/shared/fonts/roboto-v30-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../../images/shared/fonts/roboto-v30-latin-300.woff2') format('woff2'), /* Super Modern Browsers */ url('../../images/shared/fonts/roboto-v30-latin-300.woff') format('woff'), /* Modern Browsers */ url('../../images/shared/fonts/roboto-v30-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */ url('../../images/shared/fonts/roboto-v30-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */ }
/* roboto-regular - latin */
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: url('../../images/shared/fonts/roboto-v30-latin-regular.eot'); /* IE9 Compat Modes */ src: local(''), url('../../images/shared/fonts/roboto-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../../images/shared/fonts/roboto-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('../../images/shared/fonts/roboto-v30-latin-regular.woff') format('woff'), /* Modern Browsers */ url('../../images/shared/fonts/roboto-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('../../images/shared/fonts/roboto-v30-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */ }
/* roboto-700 - latin */
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; src: url('../../images/shared/fonts/roboto-v30-latin-700.eot'); /* IE9 Compat Modes */ src: local(''), url('../../images/shared/fonts/roboto-v30-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../../images/shared/fonts/roboto-v30-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ url('../../images/shared/fonts/roboto-v30-latin-700.woff') format('woff'), /* Modern Browsers */ url('../../images/shared/fonts/roboto-v30-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('../../images/shared/fonts/roboto-v30-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */ }

html, body, body > div { width: 100%; height: 100% }
body { color: #5F6D77; line-height: 1.5 }
body, form, input { font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 300 }
h1, h2, .pg-home h1, .pg-home h2 { color: #0093D5; font-weight: 300; text-align: left }
h1 {font-size: 60px}
h2 { font-size: 40px }
p { margin: 0 0 12px 0 }
ul { margin-left: 0; padding-left: 22px }
a, a:visited { color: #55BA58; font-weight: 400 }
a:hover { color: #29662b }
.text { display: inline-block; font-size: 16px; }
.text .small { font-size: 14px; opacity: 0.7 }
.alertTable { margin-bottom: 40px }
.alertTable td:nth-child(1) { display: none }
.search { height: 280px }
::-webkit-input-placeholder { color: #676b6d; }

.pg-wrapper { width: 100%; overflow: auto; height: auto; min-height: 100%; position: absolute; top: 0; padding-bottom: 190px; }

.section-0 { height: 20px; background: rgb(60,193,212); background: linear-gradient(90deg, rgba(60,193,212,1) 0%, rgba(24,64,112,1) 100%); text-align: right; padding: 0 10px; color: #fff; line-height: 19px; position: fixed; top: 0; z-index: 999; }
.section-0 a { display: inline-block; margin-top: -1px; vertical-align: middle; color: #fff; font-size: 12px; text-decoration: none; padding-right: 15px; position: relative; }
.section-0 a:after { content: ''; width: 8px; height: 8px; position: absolute; background: url(../../images/Abzena/icon-arrow-small-white-top-right.svg) no-repeat right 0; background-size: 8px 8px; right: 0; top: 5px; }

.header { top: 20px; height: 100px; line-height: 68px; text-align: left; -webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.3); box-shadow: 0px 0px 2px rgba(0,0,0,0.3); }
.header .section-inner { background: #fff; }
.header .logo { display: inline-block; height: 70px; margin: 15px 0 0 15px; }
.header .logo img { height: 100%; width: auto; position: static; float: left; }
.header .nav-outer { display: block; position: absolute; right: 45px; top: 0 }
.header .nav { display: inline-block; margin-top: 17px; text-align: right; }
.header .nav a, .header .nav a:focus, .header .nav a:hover { display: inline-block; line-height: 50px; font-weight: normal; font-size: 14px; color: #676b6d; margin-left: 45px; padding: 0 }
.header .nav a:hover { background-color: transparent; color: #0072b1; }
.header .nav a:not(:first-child) { background: linear-gradient(#fff, #fff) no-repeat left/2px 0.8em; background-position-y: 27px; }

.pg-home, .pg-standort { overflow-x: hidden }
.section-splash {position: relative; margin-top: 120px; height: 400px}
.section-splash h1 { position: absolute; display: block; left: 105px; top: 70px; line-height: 75px; width: 400px; text-align: left; }
.section-splash img { position: absolute; right: 0; top: -1px; height: 400px }
.section-vibalogics .section-inner { margin-top: 50px; position: relative; width: 100%; padding: 0 }
.section-vibalogics .text { position: absolute; left: 50%; padding-left: 20px; width: 50%; top: 0 }
.section-mission {position:relative; z-index: 1}
.section-mission { pointer-events: none }
.section-mission .text { width: 50%; padding-right: 20px }
#kultur { top: -150px; display: inline-block; width: 100%; position: relative; height: 1px; }
.section-kultur .section-inner { position: relative; }
.section-kultur img { position: absolute; z-index: 0; right: -120px; top: -410px; opacity: 0.1; width: 970px; height: 970px; }
.section-kultur .text { position: absolute; z-index: 1; right: 170px; top: -70px; width: 400px; }
.section-kultur h2, .section-kultur .text p {text-align: center !important}
.section-standort {position: relative}
.section-standort img {position: absolute; left: 0}
.section-standort .text {margin-top: 480px}

.pg-standort .section-inner {padding: 100px}
.pg-standort h2 {padding-bottom: 20px}
.pg-standort .section-strand { position: relative; overflow: hidden; height: 600px; }
.pg-standort .section-strand .section-inner { padding: 0; overflow: hidden }
.pg-standort .section-strand img { margin-left: -565px; position: absolute; z-index: 0; left: 50%; }
.pg-standort .section-strand .text { position: relative; z-index: 1; padding: 100px; color: #000}
.pg-standort .section-strand h1 { font-size: 45px; color: #000; }
.pg-standort .section-hafen img, .pg-standort .section-promenade img, .pg-standort .section-strandkorb img { width: 100% }
.pg-standort .grey {color: #bbb}

.pg-privacy h1 { font-size: 30px }

.footer { background-color: #F8F8F8; color: #ACACAC; line-height: 30px; position: absolute; bottom: 0 }
.footer a, .footer a:visited { color: #ACACAC }
.footer .column-1 img { height: 30px; margin-right: 20px; vertical-align: middle; }
.footer .section-inner { padding: 50px 20px 100px 20px; max-width: initial }
.footer .column { display: inline-block; vertical-align: top }
.footer .column-1 { width: 70%; }
.footer .column-1 .footer-links a { display: inline-block; margin-right: 20px; margin-left: 20px }
.footer .column-2 { text-align: right; width: 29% }
.footer .column-2 .footer-sm-links { opacity: 0.8 }
.footer .column-2 .footer-sm-links:hover { opacity: 1 }
.footer .column-2 .footer-sm-links img { width: 40px; margin-left: 20px }

/*Cookiebot*/
#CybotCookiebotDialog { -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.4) !important; -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.4) !important; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.4) !important; }
#CookieDeclarationUserStatusLabel { margin-bottom: 20px }
a#CybotCookiebotDialogBodyLevelButtonAccept, a#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll { background-color: #e68f2b !important; border: 1px solid #e68f2b !important; color: #fff !important }

@media only screen and (max-width : 1620px) {
    .section-splash img {right: auto; left: 560px}
}
@media only screen and (max-width : 1550px) {
    .section-standort { position: static }
    .section-standort .section-inner { position: relative }
    .section-standort img { position: absolute; left: auto; right: 20px }
}
@media only screen and (max-width : 1420px) {
    .section-splash h1 {left: 20px;}
    .section-splash img {left: auto; right: -200px}
}
@media only screen and (max-width : 1320px) {
    .section-splash {height: 350px}
    .section-splash h1 { font-size: 45px; line-height: 55px; top: 80px; width: 300px; left: 50%; margin-left: -480px; }
    .section-splash img { left: auto; right: -200px; height: 350px }
}

@media only screen and (max-width : 1180px) {
    .header .nav { text-align: center }
    .header .nav-outer { width: 320px; left: auto; height: auto; bottom: auto; padding-left: 0px }
    .header .nav-outer-hide { display: none }
    .header .nav a, .header .nav a:hover { line-height: 40px; margin-left: 0; width: 100% }
    .header .nav a:after { content: none }
    .header .nav-outer { position: absolute; right: 0; top: 100px; background: #fff; -webkit-box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.1); -moz-box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.1); box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.1); }
    .header .nav-outer-show { display: block; }
    .header .nav-outer-hide { display: none; }
    .header .nav-mobile-icon { display: block; position: absolute; width: 25px; height: 25px; top: 36px; right: 20px; background: url(/images/shared/controls.png) no-repeat; background-position: -75px -25px; opacity: 0.8; cursor: pointer; }
    .header .nav-mobile-icon.nav-mobile-icon-white { background-position-y: 0 }
    .header .nav-mobile-icon:hover { opacity: 1; }
    .section-splash h1 { top: 240px;z-index: 1; }
    .section-vibalogics {margin-top: 120px}
    .section-vibalogics img { margin-top: 80px }
    .section-standort img {height: 400px}
    .section-standort .text { margin-top: 460px }
}

@media only screen and (max-width : 980px) {
    .section-inner {padding: 100px 20px}
    .section-0 { display: none }
    .header { top: 0; height: 50px }
    .header .nav-outer { right: 0; top: 50px; }
    .header .nav-outer.nav-outer-hide { display: none }
    .header .logo { height: 30px; margin: 10px 0 0 10px; }
    .header .nav { text-align: center; margin-top: 0; width: 320px; display: block }
    .header .nav a, .header .nav a:focus, .header .nav a:hover { display: block; line-height: 40px; margin: 0 }
    .header .nav-mobile-icon { top: 15px }
    .section-splash {margin-top: 50px}
    .section-splash h1 { left: 20px; margin-left: 0 }
    .section-vibalogics img {max-width: calc(50% - 40px); margin-left: 20px}
    .section-vibalogics .text {padding-right: 20px}
    .section-standort img { height: 330px }
    .section-standort .text { margin-top: 370px }

    .footer .section-inner { padding: 50px 20px 50px 20px }
    .footer .column-1 { width: calc(100% - 180px); }
    .footer .column-2 { width: 180px; text-align: right }
    .footer .column-2 { width: 176px }
}

@media only screen and (max-width : 768px) {
    .pg-wrapper { padding-bottom: 180px }
    .section-splash {margin-top: 0}
    .section-splash img { left: 20px; right: auto }
    .section-mission { margin-top: 100px }
    .section-standort img { height: 260px }
    .section-standort .text { margin-top: 290px }
    .footer .column-1 span { display: block; line-height: normal; margin-top: 10px }
}

@media only screen and (max-width : 680px) {
    .section-inner { padding: 50px 20px }
    .section-vibalogics img { position: absolute; left: 280px; top: -280px; max-width: unset; width: 300px; height: 300px; }
    .section-vibalogics .section-inner {margin-top: 240px}
    .section-vibalogics .text { position: static; width: 100%; left: 0; padding-left: 20px }
    .section-vibalogics h2 {width: 300px}
    .section-mission {margin-top: 0}
    .section-mission .text {width: 100%; padding-right: 0}
    .section-kultur {height: 550px}
    .section-kultur img { position: absolute; z-index: 0; left: 50%; top: -150px; opacity: 0.1; width: 860px; height: 860px; margin-left: -430px; }
    .section-kultur .text { position: absolute; z-index: 1; left: 50%; top: 110px; width: 320px; margin-left: -160px; }
    .pg-standort .section-strand .text, .pg-standort .section-inner { padding: 50px }
    .pg-standort .section-strand { height: 1000px }
    .pg-standort .section-strand img { transform: scale(1.6); top: 160px; }
}

@media only screen and (max-width : 480px) {
    .header .nav { width: 100% }
    .section-vibalogics { margin-top: 460px; }
    .section-vibalogics img { position: absolute; left: -40px; top: -400px; max-width:initial }
    .section-kultur h2 { font-size: 32px }
    .pg-standort .section-strand .text, .pg-standort .section-inner { padding: 20px }
    .pg-standort .section-strand {height: 1000px}
    .pg-standort .section-strand img { transform: scale(2); top: 350px; }

}