@import "../../node_modules/swiper/swiper-bundle.css";

@keyframes bounceOut {
    0% {
        transform: scale(1)
    }

    to {
        transform: scale(1.2)
    }
}

@keyframes slideInShort {
    0% {
        transform: rotateX(-15deg) translateY(100px)
    }

    to {
        transform: rotateX(0) translateY(0)
    }
}

@keyframes slideMeIn {
    0% {
        transform: rotateX(-60deg) translateY(300px)
    }

    to {
        transform: rotateX(0) translateY(0)
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes skizzepin {

    0%,
    to {
        transform: scale(1)
    }

    50% {
        transform: scale(1.05)
    }
}

@keyframes fancybox-rotate {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(359deg)
    }
}

html {
    height: 100%
}

body,
html {
    text-align: center;
    line-height: 150%;
    margin: 0;
    min-height: 100%
}

article,
aside,
audio,
canvas,
caption,
details,
div,
figure,
footer,
header,
hgroup,
iframe,
img,
mark,
menu,
nav,
object,
section,
span,
summary,
sup,
table,
tbody,
td,
tfoot,
thead,
tr,
video {
    border: 0;
    margin: 0;
    padding: 0
}

body,
h1,
h2,
h3,
h4,
html {
    border: 0;
    padding: 0
}

a,
abbr,
address,
b,
blockquote,
cit,
code,
dd,
del,
dfn,
dl,
dt,
em,
fieldset,
h5,
h6,
hr,
i,
ins,
label,
legend,
li,
ol,
p,
pre,
q,
samp,
small,
strong,
sub {
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
    margin: 0;
    padding: 0
}

h1,
h2,
h3,
h4,
ul {
    font-size: 100%;
    vertical-align: baseline
}

article,
aside,
audio,
canvas,
figcaption,
figure,
figure img,
footer,
header,
hgroup,
nav,
section,
video {
    display: block
}

table {
    border-collapse: separate;
    border-spacing: 0
}

table caption,
table td,
table th {
    text-align: left;
    vertical-align: middle
}

a img,
ul {
    border: 0
}

:focus,
a:focus {
    outline: 0
}

.defaultfontsize_mediaquery {
    font-size: var(--var-default-fontsize);
    line-height: var(--var-default-lineheight)
}

#errormessage,
#loading,
#successmessage,
.hide {
    display: none
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0
}

@font-face {
    font-family: "icons";
    src: url(/public/fonts/icons.ttf?23yvev)format("truetype"), url(/public/fonts/icons.woff?23yvev)format("woff"), url(/public/fonts/icons.svg?23yvev#icons)format("svg");
    font-weight: 400;
    font-style: normal;
    font-display: block
}

[class*=" icon-"],
[class^=icon-] {
    font-family: "icons" !important;
    speak: never;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}


.icon-posthorn:before {
    content: "\e914";
}

.icon-address-book:before {
    content: "\e900";
}

.icon-address-card:before {
    content: "\e901";
}

.icon-arrow-down:before {
    content: "\e906";
}

.icon-arrow-left:before {
    content: "\e907";
}

.icon-arrow-right:before {
    content: "\e908";
}

.icon-arrow-up:before {
    content: "\e909";
}

.icon-award:before {
    content: "\e90b";
}

.icon-backpack:before {
    content: "\e97a";
}

.icon-badge-percent:before {
    content: "\e97b";
}

.icon-badge:before {
    content: "\e90c";
}

.icon-bath:before {
    content: "\e90d";
}

.icon-battery-bolt:before {
    content: "\e902";
}

.icon-bed:before {
    content: "\e90e";
}

.icon-beer:before {
    content: "\e97d";
}

.icon-bell:before {
    content: "\e97f";
}

.icon-bicycle:before {
    content: "\e90f";
}

.icon-birthday-cake:before {
    content: "\e910";
}

.icon-bolt:before {
    content: "\e981";
}

.icon-book:before {
    content: "\e982";
}

.icon-book-reader:before {
    content: "\e983";
}

.icon-bookmark:before {
    content: "\e984";
}

.icon-books:before {
    content: "\e911";
}

.icon-briefcase-medical:before {
    content: "\e985";
}

.icon-bus:before {
    content: "\e912";
}

.icon-calendar-alt:before {
    content: "\e913";
}

.icon-calendar-plus:before {
    content: "\e915";
}

.icon-camera:before {
    content: "\e917";
}

.icon-car:before {
    content: "\e918";
}

.icon-car-garage:before {
    content: "\e919";
}

.icon-charging-station:before {
    content: "\e91b";
}

.icon-check-square:before {
    content: "\e91c";
}

.icon-check:before {
    content: "\e91d";
}

.icon-clipboard-check:before {
    content: "\e91e";
}

.icon-cocktail:before {
    content: "\e920";
}

.icon-coffee:before {
    content: "\e921";
}

.icon-comment-alt-smile:before {
    content: "\e986";
}

.icon-comment-alt:before {
    content: "\e987";
}

.icon-comment-check:before {
    content: "\e922";
}

.icon-comment:before {
    content: "\e923";
}

.icon-comments:before {
    content: "\e924";
}

.icon-concierge-bell:before {
    content: "\e925";
}

.icon-cookie:before {
    content: "\e903";
}

.icon-credit-card:before {
    content: "\e927";
}

.icon-desktop:before {
    content: "\e928";
}

.icon-envelope:before {
    content: "\e929";
}

.icon-arrows-leftright:before {
    content: "\e904";
}

.icon-sqm:before {
    content: "\e989";
}

.icon-expand:before {
    content: "\e98a";
}

.icon-fingerprint:before {
    content: "\e92a";
}

.icon-fire-extinguisher:before {
    content: "\e98c";
}

.icon-gas-pump:before {
    content: "\e92c";
}

.icon-golf-ball:before {
    content: "\e930";
}

.icon-home:before {
    content: "\e905";
}

.icon-image:before {
    content: "\e98d";
}

.icon-images:before {
    content: "\e98e";
}

.icon-leaf:before {
    content: "\e934";
}

.icon-lightbulb:before {
    content: "\e935";
}

.icon-link:before {
    content: "\e98f";
}

.icon-list-ol:before {
    content: "\e936";
}

.icon-list-ul:before {
    content: "\e937";
}

.icon-long-arrow-down:before {
    content: "\e938";
}

.icon-long-arrow-left:before {
    content: "\e939";
}

.icon-long-arrow-right:before {
    content: "\e93a";
}

.icon-long-arrow-up:before {
    content: "\e93b";
}

.icon-luggage-cart:before {
    content: "\e90a";
}

.icon-map-marked-alt:before {
    content: "\e93c";
}

.icon-map-marker-alt:before {
    content: "\e93d";
}

.icon-map-marker:before {
    content: "\e93e";
}

.icon-map:before {
    content: "\e93f";
}

.icon-medal:before {
    content: "\e92b";
}

.icon-mobile:before {
    content: "\e941";
}

.icon-money-bill-wave:before {
    content: "\e92d";
}

.icon-newspaper:before {
    content: "\e942";
}

.icon-phone:before {
    content: "\e944";
}

.icon-plane-departure:before {
    content: "\e945";
}

.icon-plug:before {
    content: "\e947";
}

.icon-portrait:before {
    content: "\e92e";
}

.icon-presentation:before {
    content: "\e948";
}

.icon-print:before {
    content: "\e949";
}

.icon-recycle:before {
    content: "\e92f";
}

.icon-redo:before {
    content: "\e991";
}

.icon-repeat:before {
    content: "\e992";
}

.icon-route:before {
    content: "\e993";
}

.icon-rss:before {
    content: "\e94a";
}

.icon-search:before {
    content: "\e994";
}

.icon-seedling:before {
    content: "\e995";
}

.icon-shield-check:before {
    content: "\e94b";
}

.icon-shopping-cart:before {
    content: "\e94c";
}

.icon-shower:before {
    content: "\e94d";
}

.icon-snowflake:before {
    content: "\e94e";
}

.icon-star-half:before {
    content: "\e996";
}

.icon-star:before {
    content: "\e997";
}

.icon-stethoscope:before {
    content: "\e998";
}

.icon-street-view:before {
    content: "\e94f";
}

.icon-subway:before {
    content: "\e950";
}

.icon-suitcase:before {
    content: "\e951";
}

.icon-swim:before {
    content: "\e952";
}

.icon-swimming-pool:before {
    content: "\e953";
}

.icon-sync:before {
    content: "\e999";
}

.icon-tag:before {
    content: "\e954";
}

.icon-tags:before {
    content: "\e931";
}

.icon-taxi:before {
    content: "\e955";
}

.icon-thermometer-half:before {
    content: "\e99a";
}

.icon-tooth:before {
    content: "\e956";
}

.icon-trophy:before {
    content: "\e957";
}

.icon-umbrella:before {
    content: "\e958";
}

.icon-unlock:before {
    content: "\e959";
}

.icon-user-friends:before {
    content: "\e932";
}

.icon-person:before {
    content: "\e933";
}

.icon-users:before {
    content: "\e99b";
}

.icon-restaurant:before {
    content: "\e95a";
}

.icon-video:before {
    content: "\e95c";
}

.icon-watch:before {
    content: "\e95d";
}

.icon-wifi:before {
    content: "\e95e";
}

.icon-wine-glass:before {
    content: "\e95f";
}

.icon-angellist:before {
    content: "\e960";
}

.icon-dropbox:before {
    content: "\e968";
}

.icon-facebook-messenger:before {
    content: "\e969";
}

.icon-facebook-square:before {
    content: "\e96a";
}

.icon-google-plus-square:before {
    content: "\e96d";
}

.icon-instagram:before {
    content: "\e96e";
}

.icon-pinterest-square:before {
    content: "\e971";
}

.icon-skype:before {
    content: "\e972";
}

.icon-spotify:before {
    content: "\e940";
}

.icon-tripadvisor:before {
    content: "\e973";
}

.icon-whatsapp-square:before {
    content: "\e974";
}

.icon-whatsapp:before {
    content: "\e975";
}

.icon-youtube:before {
    content: "\e977";
}

@font-face {
    font-family: "Roslindale";
    src: url(/public/fonts/Roslindale-DisplayNarrowMedium.woff2)format("woff2"), url(/public/fonts/Roslindale-DisplayNarrowMedium.woff)format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Roslindale";
    src: url(/public/fonts/Roslindale-DisplayNarrowRegular.woff2)format("woff2"), url(/public/fonts/Roslindale-DisplayNarrowRegular.woff)format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "BasisGrotesque";
    src: url(/public/fonts/BasisGrotesqueTrial-Regular.woff2)format("woff2"), url(/public/fonts/BasisGrotesqueTrial-Regular.woff)format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "BasisGrotesque";
    src: url(/public/fonts/BasisGrotesqueTrial-Italic.woff2)format("woff2"), url(/public/fonts/BasisGrotesqueTrial-Italic.woff)format("woff");
    font-weight: 400;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: "BasisGrotesque";
    src: url(/public/fonts/BasisGrotesqueTrial-Bold.woff2)format("woff2"), url(/public/fonts/BasisGrotesqueTrial-Bold.woff)format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "BasisGrotesque";
    src: url(/public/fonts/BasisGrotesqueTrial-BoldItalic.woff2)format("woff2"), url(/public/fonts/BasisGrotesqueTrial-BoldItalic.woff)format("woff");
    font-weight: 700;
    font-style: italic;
    font-display: swap
}

:root {
    --color-sitebg: #F4F2EF;
    --color-black: #2B2926;
    --color-text: #6f6b65;
    --color-accent: #B1AA88;
    --color-beige: #B7B4A7;
    --var-content-max-width: 70em;
    --var-content-max-width-wide: 90em;
    --var-naviborder: 15em;
    --var-naviborder-side: 20em;
    --var-borderradius: 10px;
    --var-gap: 5em;
    --var-default-fontsize: 1.7em;
    --var-default-lineheight: 150%;
    --font-default: "BasisGrotesque", Arial, "sans-serif";
    --font-serif: "Roslindale", Georgia, serif;
    --font-sans: var(--font-default);
    --font-size-h1: 6.4em;
    --font-size-h2: 5.4em;
    --font-size-h3: 3.8em;
    --font-size-h4: 2em
}

@media screen and (max-width:1200px) {
    :root {
        --font-size-h1: 6em;
        --font-size-h2: 5em;
        --font-size-h3: 3.4em;
        --font-size-h4: 1.8em
    }
}

@media screen and (max-width:1000px) {
    :root {
        --font-size-h1: 5.4em;
        --font-size-h2: 3.8em;
        --font-size-h3: 2.8em;
        --font-size-h4: 1.7em;
        --var-gap: 4em;
        --var-default-fontsize: 1.65em;
        --var-default-lineheight: 150%;
        --var-naviborder: 10em;
        --var-naviborder-side: 12em
    }
}

@media screen and (max-width:800px) {
    :root {
        --font-size-h1: 4.8em;
        --font-size-h2: 3.6em;
        --font-size-h3: 2.6em;
        --font-size-h4: 1.7em
    }
}

@media screen and (max-width:600px) {
    :root {
        --font-size-h1: 4em;
        --font-size-h2: 3.2em;
        --font-size-h3: 2.4em;
        --font-size-h4: 1.6em;
        --var-gap: 3em;
        --var-default-fontsize: 1.57em;
        --var-default-lineheight: 150%;
        --var-naviborder: 8em;
        --var-naviborder-side: 4em
    }
}

body {
    font-family: var(--font-default);
    float: left;
    width: 100%;
    height: auto;
    background: var(--color-sitebg);
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

#pageload {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    background: var(--color-black)
}

#pageload #pageloadlogo {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -3em;
    margin-left: -3em;
    width: 6em;
    animation: skizzepin 1.2s infinite ease
}

#logo img.dark,
#navi .langs .short,
.mobile,
body.noheader #logo img.light {
    display: none
}

@media screen and (max-width:800px) {
    .mobile {
        display: block
    }
}

.desktop {
    display: block
}

@media screen and (max-width:800px) {
    .desktop {
        display: none
    }
}

sup {
    vertical-align: super;
    font-size: .7em;
    line-height: 0
}

#header #headerwrap a.booking:hover,
a {
    text-decoration: none;
    color: var(--color-accent)
}

h1,
h2,
h4 {
    clear: left;
    font-weight: 400;
    margin: 0
}

#navi div.category,
h1,
h2,
h3,
h4 {
    float: left;
    position: relative
}

#wrap,
h1,
h2,
h3,
h4 {
    width: 100%
}

h3 {
    clear: left;
    margin: 0;
    font-size: var(--font-size-h3);
    font-family: var(--font-serif);
    line-height: 110%;
    color: var(--color-black)
}

h1 strong,
h2 strong,
h3 strong {
    color: var(--color-accent);
    font-weight: 400
}

div.cover--default .cover__headline h1,
div.cover--default .cover__headline h2,
h1 {
    font-size: var(--font-size-h1);
    line-height: 95%;
    font-family: var(--font-serif);
    color: var(--color-black);
    margin-bottom: 1em
}

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

    h1 br,
    h1 br:after {
        content: " "
    }
}

div.cover--contentcover div.cover__headline h1,
div.cover--contentcover div.cover__headline h2,
h2 {
    font-size: var(--font-size-h2);
    line-height: 99%;
    font-family: var(--font-serif);
    color: var(--color-black);
    margin-bottom: 1em
}

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

    h2 br,
    h2 br:after {
        content: " "
    }
}

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

    h3 br,
    h3 br:after {
        content: " "
    }
}

#content .tabs--default .tabsnavigation a.active,
#navi .langs a:hover,
a:hover,
h4 {
    text-decoration: underline
}

h4 {
    font-size: var(--font-size-h4);
    font-family: var(--font--default);
    line-height: 100%
}

.blogconnections.shoutout .blogconnections__posts h3,
body h2,
body h3 {
    margin-bottom: 1em
}

p+h2 {
    margin-top: 1.7em
}

p+h3 {
    margin-top: 1.4em
}

#content div.textobj p+h2,
#content div.textobj p+h3,
#content div.textobj p+p,
#content div.textobj p+ul,
#content div.textobj ul+h2,
#content div.textobj ul+h3,
#content div.textobj ul+h4,
#content div.textobj ul+p,
div.singleheadline h4+h1,
div.singleheadline h4+h2,
h4+h1,
h4+h2,
p+h4 {
    margin-top: 1em
}

body.editing #wrap {
    margin-top: 5em
}

#wrap {
    min-height: 100%;
    text-align: left;
    position: relative
}

@media screen and (min-width:1500px) {
    #wrap {
        font-size: 1.1em
    }
}

@media screen and (min-width:1700px) {
    #wrap {
        font-size: 1.18em
    }
}

@media screen and (min-width:1900px) {
    #wrap {
        font-size: 1.23em
    }
}

#page_wrap,
div#page {
    float: left;
    clear: left;
    position: relative;
    width: 100%
}

#header {
    width: 100%;
    position: fixed;
    top: calc(var(--var-naviborder)/2);
    float: left;
    transform: translate(0, -50%);
    z-index: 100;
    text-align: center
}

#header #headerwrap {
    margin: 0 auto;
    position: relative;
    width: auto;
    background: var(--color-black);
    white-space: nowrap;
    display: inline-block;
    box-shadow: 0 5px 40px rgba(0, 0, 0, .15)
}

#header #navshow,
#header a {
    font-size: 1.7em;
    color: #fff;
    line-height: 1em;
    padding: 1.2em .7em 1.4em;
    display: inline-block;
    position: relative
}

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

    #header #navshow,
    #header a {
        padding-top: .8em;
        padding-bottom: 1em
    }
}

#header #navshow:hover,
#header a:hover,
#navi a {
    text-decoration: none
}

#header #navshow .counterbubble,
#header a .counterbubble {
    background: var(--color-accent);
    top: .5em;
    right: .1em
}

#header #navshow .counterbubble .number,
#header a .counterbubble .number,
h4 {
    color: var(--color-black)
}

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

    #header #navshow .long,
    #header a.gallery {
        display: none !important
    }

    #header #navshow .closer {
        font-size: .7em
    }
}

@media screen and (max-width:600px) {
    #header a.enquiry {
        display: none !important
    }
}

@media screen and (max-width:390px) {
    #header a.offers {
        display: none !important
    }
}

#header #headerwrap>a {
    transition: .15s all ease
}

#header #headerwrap>#navshow:hover .title,
#header #headerwrap>a:hover {
    color: var(--color-accent)
}

#header #headerwrap>#navshow {
    padding-left: 2.6em
}

#header #headerwrap a.booking {
    background: var(--color-accent);
    color: var(--color-black);
    padding-left: 1.2em;
    padding-right: .7em;
    transition: .4s all ease;
    margin-left: 1em
}

#header #headerwrap a.booking span.icon-concierge-bell {
    display: inline-block;
    padding-left: .3em;
    position: relative;
    z-index: 10
}

#header #headerwrap a.booking .title {
    position: relative;
    z-index: 10;
    float: left
}

#header #headerwrap a.booking .posthex {
    left: auto;
    right: -6px;
    background: var(--color-accent);
    transition: .4s all ease;
    z-index: 1
}

#header #headerwrap a.booking:hover {
    background: #fff
}

#header #headerwrap a.booking:hover .posthex {
    background: #fff
}

#header #navshow .closer {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10
}

#header #navshow .balken,
#header #navshow .title {
    z-index: 10
}

#header #navshow .posthex {
    z-index: 1
}

#header #navshow .title {
    position: relative
}

#header #navshow .balken {
    position: absolute;
    top: 50%;
    width: 1.5em;
    left: .4em;
    height: 2px;
    margin-top: -3px
}

#header #navshow .balken>span {
    width: 100%;
    position: absolute;
    height: 1px;
    background: #fff;
    left: 0;
    float: left
}

#header #navshow .balken>span.balken1 {
    width: 80%;
    left: 20%;
    top: -3px
}

#header #navshow .balken>span.balken2 {
    top: 3px
}

#content .reviews .review .content .review__stars span,
#content .reviews .review .content div.review__source img,
body.noheader #logo img.dark {
    display: inline-block
}

#logo {
    position: absolute;
    left: 50%;
    top: 30%;
    z-index: 80;
    transform: translate(-50%, 0)
}

@media screen and (max-width:1000px) {
    #logo img {
        width: 16em
    }
}

@media screen and (max-width:800px) {
    #logo img {
        width: 14em
    }
}

@media screen and (max-width:600px) {
    #logo img {
        width: 12em
    }
}

#logo img.light {
    display: inline
}

#navi {
    display: none;
    z-index: 99;
    float: left;
    position: fixed;
    border-radius: var(--var-borderradius);
    top: calc(var(--var-naviborder)/2);
    left: calc(var(--var-naviborder-side)/2);
    width: calc(100% - var(--var-naviborder-side));
    height: calc(100% - var(--var-naviborder));
    background: var(--color-black)
}

@media screen and (max-width:650px) {
    #navi {
        overflow-y: auto;
        height: auto;
        max-height: calc(100% - var(--var-naviborder)/2)
    }
}

#navi #navi__inner,
#navi .langs {
    left: 8em;
    top: 8em;
    position: absolute
}

@media screen and (max-width:900px) {
    #navi .langs {
        left: auto;
        right: 5em;
        top: 6em
    }
}

@media screen and (max-width:650px) {
    #navi .langs {
        width: 100%;
        left: 0;
        right: auto;
        text-align: center
    }
}

#navi .langs a {
    font-size: 1.7em;
    line-height: normal;
    color: #ccc;
    padding: .2em 0
}

@media screen and (max-width:650px) {
    #navi .langs a {
        font-size: 1.55em
    }
}

#navi .langs a:hover {
    color: #fff
}

#navi .langs a.active {
    color: #fff
}

#navi .langs a+a {
    margin-left: 1.2em
}

#navi #navi__inner {
    float: left;
    width: calc(100% - 16em);
    top: 50%;
    transform: translate(0, -50%)
}

@media screen and (max-width:900px) {
    #navi #navi__inner {
        left: 6em
    }
}

@media screen and (max-width:650px) {
    #navi #navi__inner {
        left: 0;
        top: 0;
        margin-left: 4em;
        margin-top: 10em;
        margin-bottom: 4em;
        transform: translate(0, 0);
        position: relative
    }
}

#navi #navi__footer {
    width: calc(100% - 16em);
    position: absolute;
    bottom: 0;
    left: 8em;
    padding-bottom: .3em;
    border-top: 1px solid var(--color-accent)
}

@media screen and (max-width:700px) {
    #navi #navi__footer {
        border-top: 0 solid #fff
    }
}

@media screen and (max-width:900px) {
    #navi #navi__footer {
        left: 6em
    }
}

@media screen and (max-width:700px) {
    #navi #navi__footer {
        width: 100%;
        left: 0
    }
}

@media screen and (max-width:650px) {
    #navi #navi__footer {
        position: relative;
        left: 0;
        margin-left: 0
    }
}

#cmartcontentpopupcloser svg,
#navi #navi__footer .links {
    float: left
}

@media screen and (max-width:700px) {
    #navi #navi__footer .links {
        display: none
    }
}

#navi #navi__footer .contact {
    float: right
}

@media screen and (max-width:700px) {
    #navi #navi__footer .contact {
        float: left;
        width: 100%;
        text-align: center
    }
}

#navi #navi__footer a,
#navi div.category .categorytitle {
    display: inline-block;
    line-height: normal;
    text-decoration: none
}

#navi #navi__footer a {
    font-size: 1.6em;
    padding: 2em 0;
    color: var(--color-beige);
    transition: .2s color ease
}

@media screen and (max-width:900px) {
    #navi #navi__footer a {
        font-size: 1.5em;
        padding: 1.2em 0
    }

    #navi #navi__footer a.reviews {
        display: none
    }
}

#navi #navi__footer a span.icon {
    color: var(--color-accent);
    display: inline-block;
    padding-right: .5em
}

#navi #navi__footer a:hover,
#navi #navi__footer a:hover span.icon {
    color: #fff
}

#footer #footer__imprint a+a,
#navi #navi__footer a+a {
    margin-left: 2em
}

#navi div.category {
    width: 35%
}

@media screen and (max-width:1350px) {
    #navi div.category {
        width: 41%
    }
}

@media screen and (max-width:900px) {
    #navi div.category {
        width: 70%;
        clear: left
    }
}

@media screen and (min-width:901px) {
    #navi div.category:nth-child(2n) {
        float: right;
        text-align: right
    }

    #navi div.category:nth-child(2n) .categorytitle {
        float: right;
        padding-right: 0;
        padding-left: .7em
    }

    #navi div.category:nth-child(2n) div.pagenavigation_container {
        left: auto;
        right: 98%
    }

    #navi div.category:nth-child(2n).haspages:before {
        left: auto;
        right: 0
    }
}

#navi div.category .categorytitle {
    color: #fff;
    z-index: 10;
    font-size: 4em;
    float: left;
    position: relative;
    white-space: nowrap;
    font-family: var(--font-serif);
    transition: .2s all ease;
    padding: .4em .7em .4em 0;
    background: var(--color-black)
}

#navi div.category .categorytitle:hover {
    color: var(--color-accent)
}

@media screen and (max-width:1150px) {
    #navi div.category .categorytitle {
        font-size: 3.4em
    }
}

@media screen and (max-width:1050px) {
    #navi div.category .categorytitle {
        font-size: 3em
    }
}

@media screen and (max-width:900px) {
    #navi div.category .categorytitle {
        font-size: 2.8em;
        padding: .2em .7em .2em 0
    }
}

@media screen and (min-width:1650px) {
    #navi div.category .categorytitle {
        padding: .2em .7em .2em 0
    }
}

#navi div.category.haspages:before {
    content: " ";
    background: var(--color-accent);
    height: 1px;
    width: 0;
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 0
}

#navi div.category.active {
    z-index: 100
}

#navi div.category.active .categorytitle {
    color: var(--color-accent);
    z-index: 100
}

#navi div.category.active div.pagenavigation_container {
    display: block;
    z-index: 100
}

#footer .contactblock>div a:hover,
#navi div.category.isactive .categorytitle,
#navi div.pagenavigation_container div.page a.pagetitle:hover,
a.button:hover,
span.button:hover {
    color: var(--color-accent)
}

#navi div.category.isactive:before {
    width: 90%
}

@media screen and (max-width:650px) {
    #navi div.category.isactive:before {
        display: none
    }
}

#navi div.pagenavigation_container {
    display: none;
    position: absolute;
    left: 98%;
    top: 50%;
    margin-top: -1.7em;
    width: 20em;
    float: left
}

@media screen and (max-width:650px) {
    #navi div.pagenavigation_container {
        position: relative;
        top: auto;
        left: auto;
        width: 80%;
        margin-left: 2em;
        margin-top: .4em;
        margin-bottom: 1.1em
    }
}

#cmart_gmaplink img,
#navi div.pagenavigation_container div.page {
    width: 100%;
    float: left;
    clear: left
}

#navi div.pagenavigation_container div.page a.pagetitle {
    font-size: 1.9em;
    float: left;
    clear: left;
    width: 100%;
    white-space: nowrap;
    line-height: normal;
    padding: .25em 0;
    color: #fff;
    text-decoration: none
}

@media screen and (max-width:1000px) {
    #navi div.pagenavigation_container div.page a.pagetitle {
        font-size: 1.76em
    }
}

#navi div.pagenavigation_container div.page.active a.pagetitle {
    color: var(--color-accent);
    text-decoration: underline
}

.langswrap,
body.editing a.card:hover .card__image::after,
body.editing div.card:hover .card__image::after {
    display: none
}

#cmart_gmaplink:hover span,
body.navshow #navi {
    display: block
}

body.navshow #header #navshow .title span {
    opacity: 0;
    -ms-filter: "alpha(opacity=calc(100*@wert))";
    -khtml-opacity: 0;
    -moz-opacity: 0
}

body.navshow #header #navshow .closer {
    display: block;
    color: var(--color-accent)
}

body.navshow #header #navshow .balken span {
    background: var(--color-accent)
}

body.navshow #header #navshow .balken span.balken1 {
    width: 100%;
    left: 0;
    transform: rotate(14deg);
    transform-origin: top left
}

body.navshow #header #navshow .balken span.balken2 {
    width: 100%;
    left: 0;
    transform: rotate(-14deg);
    transform-origin: bottom left
}

div.cover--default .cover__headline h1,
div.cover--default .cover__headline h2 {
    width: 100%;
    color: #fff;
    margin-bottom: 0;
    float: left;
    clear: left;
    position: relative
}

#footer,
#footer .contactblock,
div.cover,
div.cover--default .cover__headline h3,
div.cover--default .cover__headline strong {
    float: left;
    width: 100%;
    position: relative;
    clear: left
}

#footer .contactblock {
    box-sizing: border-box;
    padding: 10em 10%;
    display: flex;
    justify-content: space-between
}

@media screen and (max-width:1400px) {
    #footer .contactblock {
        padding-left: 7%;
        padding-right: 7%
    }
}

@media screen and (max-width:950px) {
    #footer .contactblock {
        padding-left: 12%;
        padding-right: 12%
    }
}

@media screen and (max-width:750px) {
    #footer .contactblock {
        display: block;
        padding-top: 8em;
        padding-bottom: 8em
    }
}

#footer .contactblock::after {
    float: left;
    width: calc(100% - 8em);
    border-radius: var(--var-borderradius);
    background: url(/public/img/footer1.jpg)top center no-repeat;
    background-size: cover;
    content: " ";
    position: absolute;
    top: 0;
    left: 4em;
    height: 100%;
    z-index: -1
}

@media screen and (max-width:750px) {
    #footer .contactblock::after {
        width: calc(100% - 4em);
        left: 2em
    }
}

#footer .contactblock>div {
    font-size: 1.7em;
    line-height: 180%;
    color: var(--color-black)
}

@media screen and (max-width:750px) {
    #footer .contactblock>div {
        width: 100%;
        text-align: center
    }
}

#content .roomrateslist ul.listinfos li.accordion div.accordion__content .roombuttons a.enquire:hover,
#content .roomrateslist ul.listinfos li.accordion div.accordion__content .roombuttons a.overview:hover,
#footer .contactblock>div a {
    text-decoration: none;
    color: var(--color-black)
}

#footer .contactblock .links {
    text-align: right
}

@media screen and (max-width:750px) {
    #footer .contactblock .links {
        display: none
    }
}

#footer .contactblock .smlinks {
    position: absolute;
    top: 40%;
    left: 50%;
    width: auto;
    transform: translate(-50%, 0)
}

#footer .contactblock .smlinks a {
    font-size: 1.4em;
    line-height: normal;
    padding: .3em 1em
}

@media screen and (max-width:750px) {
    #footer .contactblock .smlinks {
        position: relative;
        top: auto;
        margin-top: 5em;
        left: auto;
        transform: translate(0, 0);
        text-align: center
    }
}

#footer #footer__imprint {
    float: left;
    padding: 3em 0
}

@media screen and (max-width:750px) {
    #footer #footer__imprint {
        padding: 2em 0
    }
}

#footer #footer__imprint a {
    font-size: 1.5em;
    float: left;
    color: #888;
    text-decoration: none;
    padding: .5em 0
}

@media screen and (max-width:750px) {
    #footer #footer__imprint a {
        font-size: 1.4em
    }
}

@media screen and (max-width:750px) {
    #footer #footer__imprint a+a {
        margin-left: 1em
    }
}

#footer #footer__imprint a.zmart {
    float: right
}

.editing .cover {
    overflow: visible
}

div.cover {
    min-height: 75em;
    background: #222;
    overflow: hidden
}

div.cover,
div.cover.cover--videoheader {
    height: 100vh
}

@media screen and (max-width:600px) {
    div.cover.cover--videoheader {
        height: 70vh
    }
}

div.cover .cover__image__inner {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
}

div.cover .bgimage {
    background-position: center center
}

div.cover .cover__image,
div.cover .cover__image .bgimage {
    position: relative;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%
}

div.cover .cover__image .cover__image__inner>img {
    position: absolute;
    top: 0;
    left: 0
}

div.cover .cover__image .singlefileconnectionform .picconnection .editpanel {
    margin-left: 0;
    left: auto;
    right: 2em
}

div.cover .cover__image .bgimage {
    position: absolute;
    background-repeat: no-repeat;
    background-size: cover
}

div.cover .cover__image::after,
div.cover .cover__video::after,
div.cover.cover--slideshow .coverslider::after,
div.cover.cover--slideshow .swiper.coverslideshow::after {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: 0 0;
    background: linear-gradient(0deg, rgba(43, 41, 38, .55)0, rgba(43, 41, 38, .15) 57%, rgba(43, 41, 38, .4) 100%)
}

div.cover.cover--slideshow .coverslider,
div.cover.cover--slideshow .swiper.coverslideshow {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 1;
    -ms-filter: "alpha(opacity=calc(100*@wert))";
    -khtml-opacity: 1;
    -moz-opacity: 1;
    transition: 3s all ease .2s;
    -moz-transition: 3s all ease .2s;
    -webkit-transition: 3s all ease .2s;
    -o-transition: 3s all ease .2s
}

div.cover .cover__image,
div.cover .cover__video {
    overflow: hidden;
    z-index: 1
}

div.cover .cover__video video {
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto
}

a.card::after,
div.card::after,
div.cover .cover__video,
div.cover picture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

div.cover picture {
    background: #222
}

body #content ul.geschichte li.geschichte .geschichte__image img.img,
div.cover .cover__image .cover__image__inner>img,
div.cover picture img.image,
div.cover picture source {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

div.cover.darktext .cover__content h1,
div.cover.darktext .cover__content h2,
div.cover.darktext .cover__content h3,
div.cover.darktext .cover__content strong {
    color: #333
}

div.cover.cover--dark .cover__content h1,
div.cover.cover--dark .cover__content h2,
div.cover.cover--dark .cover__content h3,
div.cover.cover--dark .cover__content h4 {
    color: #fff
}

div.cover--default {
    height: 115vh
}

div.cover--default .cover__headline {
    z-index: 30;
    float: left;
    position: absolute;
    clear: left;
    left: 50%;
    width: 50%;
    bottom: 12%;
    transform: translate(-50%, 0);
    text-align: center
}

.bg--dark p,
.darkbg p,
div.cover--default .cover__headline h4 {
    color: var(--color-beige)
}

@media screen and (max-width:1200px) {
    div.cover--default .cover__headline {
        width: 70%
    }
}

@media screen and (max-width:900px) {
    div.cover--default .cover__headline {
        width: 80%
    }
}

@media screen and (max-width:650px) {
    div.cover--default .cover__headline {
        width: 90%
    }
}

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

    div.cover--default .cover__headline h1 br,
    div.cover--default .cover__headline h1 br:after,
    div.cover--default .cover__headline h2 br,
    div.cover--default .cover__headline h2 br:after {
        content: " "
    }
}

.blogconnections__newspaper .blogconnections__posts .newspaperlink i,
a.card .card__content .card__title em,
div.card .card__content .card__title em,
div.cover--default .cover__headline h1 em,
div.cover--default .cover__headline h2 em {
    font-style: normal
}

div.cover--default .cover__headline.hassub h1,
div.cover--default .cover__headline.hassub h2 {
    margin-bottom: .8em
}

@media screen and (max-width:1000px) {
    div.cover--default .cover__headline {
        width: 70%
    }
}

@media screen and (max-width:800px) {
    div.cover--default .cover__headline {
        width: 80%
    }
}

@media screen and (max-width:600px) {
    div.cover--default .cover__headline {
        width: 86%
    }
}

div.cover--contentcover div.cover__content,
div.cover--contentcover div.cover__headline {
    z-index: 30;
    position: absolute;
    left: 15%;
    width: 60%;
    max-width: 50em;
    color: #fff
}

div.cover--contentcover div.cover__headline {
    top: 15%
}

div.cover--contentcover div.cover__headline h1,
div.cover--contentcover div.cover__headline h2 {
    color: #fff
}

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

    div.cover--contentcover div.cover__headline h1 br,
    div.cover--contentcover div.cover__headline h1 br:after,
    div.cover--contentcover div.cover__headline h2 br,
    div.cover--contentcover div.cover__headline h2 br:after {
        content: " "
    }
}

div.cover--contentcover div.cover__content {
    bottom: 15%
}

@media screen and (min-width:781px) {
    #category.category_1 #content div.cover--default .cover__headline {
        width: auto !important
    }
}

@media screen and (max-width:700px) {
    #content div.cover.cover--contentcover {
        height: auto;
        background: var(--color-black)
    }

    #content div.cover.cover--contentcover .cover__image,
    #content div.cover.cover--contentcover .cover__video,
    #content div.cover.cover--contentcover .coverslider {
        height: 50em;
        position: relative
    }

    #content div.cover.cover--contentcover .cover__content,
    #content div.cover.cover--contentcover .cover__headline {
        position: relative;
        top: auto;
        left: auto;
        width: 80%;
        margin-left: 10%;
        max-width: 50em;
        float: left;
        bottom: auto
    }

    #content div.cover.cover--contentcover .cover__headline {
        margin-top: -2em
    }

    #content div.cover.cover--contentcover .cover__content {
        margin-bottom: 5em
    }
}

body.cmart #content .cover .ql-toolbar.ql-snow {
    position: absolute;
    top: -3em;
    bottom: auto;
    left: 50%;
    margin-left: -10em;
    text-align: center;
    width: 20em
}

li.content.cover>div.cms_editbox,
li.content.slider>div.cms_editbox {
    top: 50% !important
}

.card,
.cardswiper,
a.card,
div.card {
    position: relative
}

.card .cmartbge {
    z-index: 0
}

body.editing .card .card__image.croppinginprogress {
    overflow: visible
}

a.card,
div.card {
    box-sizing: border-box;
    text-decoration: none;
    display: inline-block;
    width: 35em;
    height: 50em;
    border-radius: var(--var-borderradius);
    overflow: hidden
}

a.card::after,
div.card::after {
    content: " ";
    z-index: 2;
    background: 0 0;
    background: linear-gradient(0deg, rgba(43, 41, 38, .7)0, rgba(43, 41, 38, .15) 100%)
}

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

    a.card,
    div.card {
        height: 45em;
        width: 30em
    }
}

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

    a.card,
    div.card {
        height: 36em;
        width: 27em
    }
}

div.card .card__image {
    overflow: hidden
}

a.card .card__image,
div.card .card__image {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #222;
    border-radius: var(--var-borderradius);
    z-index: 1
}

div.card .card__image img.img {
    transition: .2s all ease;
    -moz-transition: .2s all ease;
    -webkit-transition: .2s all ease;
    -o-transition: .2s all ease
}

a.card .card__image img.img,
div.card .card__image img.img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

div.card .card__image .bgimage {
    transition: .2s all ease
}

a.card .card__image .bgimage,
a.card .card__image img.img,
div.card .card__image .bgimage {
    -moz-transition: .2s all ease;
    -webkit-transition: .2s all ease;
    -o-transition: .2s all ease
}

a.card .card__more,
div.card .card__more {
    position: absolute;
    bottom: 4em;
    left: 50%;
    transform: translate(-50%, 0);
    font-size: 1.5em;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: normal;
    z-index: 20;
    transition: .4s all ease
}

.posthex:after,
.posthex:before,
a.card .card__content,
div.card .card__content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20
}

a.card .card__content .card__title,
div.card .card__content .card__title {
    font-size: var(--font-size-h3);
    font-family: var(--font-serif);
    line-height: 110%;
    font-weight: 400;
    color: var(--color-black);
    width: 80%;
    left: 10%;
    text-align: center;
    float: left;
    position: absolute;
    top: 15%;
    color: #fff
}

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

    a.card .card__content .card__title br,
    a.card .card__content .card__title br:after,
    div.card .card__content .card__title br,
    div.card .card__content .card__title br:after {
        content: " "
    }
}

a.card .card__content .card__text,
div.card .card__content .card__text {
    position: absolute;
    bottom: 15%;
    left: 10%;
    width: 80%;
    text-align: center
}

a.card .card__content .card__text>span,
div.card .card__content .card__text>span {
    font-size: 1.7em;
    color: #fff;
    line-height: 130%;
    width: 100%;
    float: left
}

a.card .card__content .card__text span.card__price,
div.card .card__content .card__text span.card__price {
    font-family: var(--font-serif);
    font-size: 2em;
    margin-top: .5em
}

a.card .card__content .card__text span.card__price span,
div.card .card__content .card__text span.card__price span {
    color: #fff;
    background: var(--color-accent);
    border-radius: 1em;
    padding: .3em .7em;
    display: inline-block
}

a.card .card__button,
div.card .card__button {
    position: absolute;
    bottom: 4em;
    left: 50%;
    transform: translate(-50%, 0)
}

a.card .card__arrow,
div.card .card__arrow {
    position: absolute;
    bottom: 2em;
    right: 10%;
    line-height: 150%;
    color: var(--color-accent)
}

a.card .card__image .bgimage,
a.card .card__image img.img,
a.card .card__price,
a.card .card__text,
a.card .card__title,
a.card .icon,
a.card .title {
    transition: .2s all ease-out
}

a.card .card__image,
body.compensate-for-scrollbar {
    overflow: hidden
}

a.card:hover .card__title {
    top: 14%
}

a.card:hover .card__text {
    bottom: 14%
}

a.card:hover .card__image .bgimage,
a.card:hover .card__image img.img {
    transform: scale(1.02)
}

a.card.card--blog .card__image .bgimage,
a.card.card--blog .card__image img.img,
a.card:hover .card__image .bgimage,
a.card:hover .card__image img.img {
    opacity: .4;
    -ms-filter: "alpha(opacity=calc(100*@wert))";
    -khtml-opacity: .4;
    -moz-opacity: .4
}

a.card.card--blog:hover .card__image .bgimage,
a.card.card--blog:hover .card__image img.img {
    opacity: .8;
    -ms-filter: "alpha(opacity=calc(100*@wert))";
    -khtml-opacity: .8;
    -moz-opacity: .8
}

#content ul.listinfos.card {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8em
}

@media screen and (max-width:1200px) {
    #content ul.listinfos.card {
        gap: 7em
    }
}

@media screen and (max-width:1000px) {
    #content ul.listinfos.card {
        gap: 6em
    }
}

@media screen and (max-width:800px) {
    #content ul.listinfos.card {
        gap: 5em
    }
}

@media screen and (max-width:600px) {
    #content ul.listinfos.card {
        gap: 4em
    }
}

.editing.cmart .listinfos.card.showonlyineditmode {
    display: flex !important
}

.cardswiper {
    width: 80%;
    float: left;
    margin-left: 10%
}

.cardswiper a.card.card--package {
    width: 100%;
    height: 40em
}

.swiper-slide .card {
    width: 100%
}

div.headlineblock {
    position: relative;
    max-width: var(--var-content-max-width);
    width: 100%;
    float: none;
    margin: 0 auto;
    clear: left
}

a.button,
span.button {
    width: auto;
    position: relative;
    text-decoration: none;
    display: inline-block;
    line-height: normal;
    font-size: 1.65em;
    padding: .8em 1.1em .8em 3em;
    color: var(--color-black);
    box-sizing: border-box;
    transition: .15s all ease;
    font-weight: 400;
    border-radius: 6px;
    margin-left: .7em
}

a.button:before,
span.button:before {
    border: 1px solid var(--color-black);
    border-radius: 6px;
    position: absolute;
    content: " ";
    width: 100%;
    left: 0;
    top: 0;
    height: calc(100% - 2px);
    border-width: 1px 0
}

a.button .button__title,
span.button .button__title {
    float: left;
    position: relative;
    transition: .15s all ease
}

a.button:hover .posthex.start,
span.button:hover .posthex.start {
    background: var(--color-accent)
}

a.button:hover .posthex.end:before,
span.button:hover .posthex.end:before {
    border-top: 1px solid var(--color-accent)
}

a.button:hover .posthex.end:after,
span.button:hover .posthex.end:after {
    border-bottom: 1px solid var(--color-accent)
}

a.button--gold:before,
a.button:hover:before,
span.button--gold:before,
span.button:hover:before {
    border-top: 1px solid var(--color-accent);
    border-bottom: 1px solid var(--color-accent)
}

a.button:hover .posthex.end,
a.button:hover:before,
span.button:hover .posthex.end,
span.button:hover:before {
    transform: translate(4px, 0)
}

a.button:hover .button__title,
span.button:hover .button__title {
    transform: translate(2px, 0)
}

a.button .posthex,
span.button .posthex {
    transition: .15s all ease;
    z-index: 5
}

a.button .posthex.end,
span.button .posthex.end {
    left: auto;
    right: 0;
    background: 0 0
}

a.button .posthex.end:before,
span.button .posthex.end:before {
    border-top: 1px solid var(--color-black)
}

a.button .posthex.end:after,
span.button .posthex.end:after {
    border-bottom: 1px solid var(--color-black)
}

#content .tabs--default div.tab .tab__content .tabcontentbox h1,
#content .tabs--default div.tab .tab__content .tabcontentbox h2,
#content .tabs--default div.tab .tab__content .tabcontentbox h3,
#content .tabs--default div.tab .tab__content .tabcontentbox h4,
#content .tabs--default div.tab .tab__content .tabcontentbox p,
#content .tabs--style1 .tab .tab__content .tabcontentbox h1,
#content .tabs--style1 .tab .tab__content .tabcontentbox h2,
#content .tabs--style1 .tab .tab__content .tabcontentbox h3,
#content .tabs--style1 .tab .tab__content .tabcontentbox h4,
#content .tabs--style1 .tab .tab__content .tabcontentbox p,
.bg--dark a.button,
.bg--dark h1,
.bg--dark h2,
.cover a.button,
.darkbg h1,
.darkbg h2,
.template.darkbg h1,
.template.darkbg h2,
.template.darkbg h3,
.template.darkbg h4,
.template.darkbg p,
a.button--gold,
a.button--light,
span.button--gold {
    color: #fff
}

.bg--dark a.button:hover,
.cover a.button:hover,
a.button--gold .posthex.start span,
a.button--light:hover,
span.button--gold .posthex.start span {
    color: var(--color-accent)
}

a.button--gold .posthex.end,
span.button--gold .posthex.end {
    background: var(--color-accent)
}

a.button--gold .posthex.end:before,
span.button--gold .posthex.end:before {
    border-top: 1px solid var(--color-accent)
}

a.button--gold .posthex.end:after,
span.button--gold .posthex.end:after {
    border-bottom: 1px solid var(--color-accent)
}

a.button--gold:before,
span.button--gold:before {
    background: var(--color-accent)
}

.bg--dark a.button .posthex.start,
.cover a.button .posthex.start,
a.button--light .posthex.start {
    background: #fff
}

#content div.textobj ul li:hover::before,
.bg--dark a.button .posthex.start span,
.cover a.button .posthex.start span,
.swiper-arrow:hover span.icon,
a.button--light .posthex.start span,
div.linkgrid a.linkcontent:hover .linkarrow span.icon {
    color: var(--color-black)
}

.bg--dark a.button .posthex.end:after,
.bg--dark a.button .posthex.end:before,
.bg--dark a.button:before,
.cover a.button .posthex.end:after,
.cover a.button .posthex.end:before,
.cover a.button:before,
a.button--light .posthex.end:after,
a.button--light .posthex.end:before,
a.button--light:before {
    border-color: #fff
}

.bg--dark a.button:hover .posthex.start,
.cover a.button:hover .posthex.start,
a.button--light:hover .posthex.start {
    background: var(--color-accent)
}

.bg--dark a.button:hover .posthex.end:before,
.cover a.button:hover .posthex.end:before,
a.button--light:hover .posthex.end:before {
    border-top: 1px solid var(--color-accent)
}

.bg--dark a.button:hover .posthex.end:after,
.cover a.button:hover .posthex.end:after,
a.button--light:hover .posthex.end:after {
    border-bottom: 1px solid var(--color-accent)
}

.bg--dark a.button:hover:before,
.cover a.button:hover:before,
a.button--light:hover:before {
    border-top: 1px solid var(--color-accent);
    border-bottom: 1px solid var(--color-accent)
}

body #content ul.geschichte li.geschichte,
div.textbutton {
    width: 100%;
    float: left;
    clear: left;
    position: relative
}

a.button.astext,
a.textbutton {
    color: var(--color-text);
    text-decoration: underline;
    line-height: 140%;
    background: 0 0;
    border: 0 solid #fff;
    padding-left: 1em
}

a.button.astext .icon,
a.button.astext .posthex,
a.button.astext:before,
a.textbutton .icon,
a.textbutton .posthex,
a.textbutton:before {
    display: none
}

a.button.astext:hover,
a.textbutton:hover {
    color: var(--color-accent)
}

div.contentblock.textbutton {
    float: left;
    clear: left;
    position: relative;
    margin-top: 2em
}

#content ul.listinfos.button li.button {
    position: relative;
    display: inline-block;
    width: auto;
    float: none;
    clear: none
}

#content ul.listinfos.button li.button+li.button {
    margin-left: 3em;
    margin-top: 0
}

@media screen and (max-width:700px) {
    #content ul.listinfos.button li.button {
        clear: left;
        float: left;
        width: 100%;
        margin-left: 0 !important
    }

    #content ul.listinfos.button li.button+li.button {
        margin-top: 1.4em
    }
}

.bgimage,
.mask-pattern {
    height: 100%;
    position: absolute
}

.bgimage {
    width: 100%;
    background-size: cover;
    background-position: center center
}

.mask-pattern {
    width: 90%;
    left: 5%;
    top: 5%;
    float: left;
    z-index: 0;
    background-image: url(/public/img/muster.png);
    background-position: top top;
    background-repeat: repeat
}

.maxheightbackgroundpattern .mask-pattern {
    max-height: 60em;
    max-width: 60em;
    top: 50%;
    left: 66%;
    transform: translate(-50%, -50%)
}

@media screen and (max-width:70em) {
    .maxheightbackgroundpattern .mask-pattern {
        left: 15%;
        top: 15%;
        transform: translate(0, 0);
        width: 60%
    }
}

.mask-pattern,
.masking {
    -webkit-mask-image: url(/public/img/maske.svg);
    mask-image: url(/public/img/maske.svg);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%
}

.cmart.editing .masking {
    -webkit-mask-image: none;
    mask-image: none
}

#cmart_gmaplink,
.packages {
    width: 100%;
    float: left;
    position: relative
}

.margintop {
    margin-top: 26em
}

@media screen and (max-width:1200px) {
    .margintop {
        margin-top: 22em
    }
}

@media screen and (max-width:1000px) {
    .margintop {
        margin-top: 19em
    }
}

@media screen and (max-width:780px) {
    .margintop {
        margin-top: 15em
    }
}

.margintop--small {
    margin-top: 6em
}

@media screen and (max-width:1200px) {
    .margintop--small {
        margin-top: 5em
    }
}

@media screen and (max-width:1000px) {
    .margintop--small {
        margin-top: 4.5em
    }
}

@media screen and (max-width:780px) {
    .margintop--small {
        margin-top: 4em
    }
}

.margintop--negative {
    margin-top: -5em
}

.margintop--medium {
    margin-top: 15em
}

@media screen and (max-width:1200px) {
    .margintop--medium {
        margin-top: 13em
    }
}

@media screen and (max-width:1000px) {
    .margintop--medium {
        margin-top: 11em
    }
}

@media screen and (max-width:780px) {
    .margintop--medium {
        margin-top: 9em
    }
}

.margintop--row {
    margin-top: 3em
}

@media screen and (max-width:1000px) {
    .margintop--row {
        margin-top: 2.5em
    }
}

@media screen and (max-width:780px) {
    .margintop--row {
        margin-top: 2em
    }
}

.paddingtop {
    padding-top: 26em
}

@media screen and (max-width:1200px) {
    .paddingtop {
        padding-top: 22em
    }
}

@media screen and (max-width:1000px) {
    .paddingtop {
        padding-top: 19em
    }
}

@media screen and (max-width:780px) {
    .paddingtop {
        padding-top: 15em
    }
}

.paddingtop--small {
    padding-top: 6em
}

@media screen and (max-width:1200px) {
    .paddingtop--small {
        padding-top: 5em
    }
}

@media screen and (max-width:1000px) {
    .paddingtop--small {
        padding-top: 4.5em
    }
}

@media screen and (max-width:780px) {
    .paddingtop--small {
        padding-top: 4em
    }
}

.paddingtop--negative {
    padding-top: -5em
}

.paddingtop--medium {
    padding-top: 15em
}

@media screen and (max-width:1200px) {
    .paddingtop--medium {
        padding-top: 13em
    }
}

@media screen and (max-width:1000px) {
    .paddingtop--medium {
        padding-top: 11em
    }
}

@media screen and (max-width:780px) {
    .paddingtop--medium {
        padding-top: 9em
    }
}

.paddingtop--row {
    padding-top: 3em
}

@media screen and (max-width:1000px) {
    .paddingtop--row {
        padding-top: 2.5em
    }
}

@media screen and (max-width:780px) {
    .paddingtop--row {
        padding-top: 2em
    }
}

.marginbottom {
    margin-bottom: 26em
}

@media screen and (max-width:1200px) {
    .marginbottom {
        margin-bottom: 22em
    }
}

@media screen and (max-width:1000px) {
    .marginbottom {
        margin-bottom: 19em
    }
}

@media screen and (max-width:780px) {
    .marginbottom {
        margin-bottom: 15em
    }
}

.marginbottom--small {
    margin-bottom: 6em
}

@media screen and (max-width:1200px) {
    .marginbottom--small {
        margin-bottom: 5em
    }
}

@media screen and (max-width:1000px) {
    .marginbottom--small {
        margin-bottom: 4.5em
    }
}

@media screen and (max-width:780px) {
    .marginbottom--small {
        margin-bottom: 4em
    }
}

.marginbottom--negative {
    margin-bottom: -5em
}

.marginbottom--medium {
    margin-bottom: 15em
}

@media screen and (max-width:1200px) {
    .marginbottom--medium {
        margin-bottom: 13em
    }
}

@media screen and (max-width:1000px) {
    .marginbottom--medium {
        margin-bottom: 11em
    }
}

@media screen and (max-width:780px) {
    .marginbottom--medium {
        margin-bottom: 9em
    }
}

.marginbottom--row {
    margin-bottom: 3em
}

@media screen and (max-width:1000px) {
    .marginbottom--row {
        margin-bottom: 2.5em
    }
}

@media screen and (max-width:780px) {
    .marginbottom--row {
        margin-bottom: 2em
    }
}

.paddingbottom {
    padding-bottom: 26em
}

@media screen and (max-width:1200px) {
    .paddingbottom {
        padding-bottom: 22em
    }
}

@media screen and (max-width:1000px) {
    .paddingbottom {
        padding-bottom: 19em
    }
}

@media screen and (max-width:780px) {
    .paddingbottom {
        padding-bottom: 15em
    }
}

.paddingbottom--small {
    padding-bottom: 6em
}

@media screen and (max-width:1200px) {
    .paddingbottom--small {
        padding-bottom: 5em
    }
}

@media screen and (max-width:1000px) {
    .paddingbottom--small {
        padding-bottom: 4.5em
    }
}

@media screen and (max-width:780px) {
    .paddingbottom--small {
        padding-bottom: 4em
    }
}

.paddingbottom--negative {
    padding-bottom: -5em
}

.paddingbottom--medium {
    padding-bottom: 15em
}

@media screen and (max-width:1200px) {
    .paddingbottom--medium {
        padding-bottom: 13em
    }
}

@media screen and (max-width:1000px) {
    .paddingbottom--medium {
        padding-bottom: 11em
    }
}

@media screen and (max-width:780px) {
    .paddingbottom--medium {
        padding-bottom: 9em
    }
}

.paddingbottom--row {
    padding-bottom: 3em
}

@media screen and (max-width:1000px) {
    .paddingbottom--row {
        padding-bottom: 2.5em
    }
}

@media screen and (max-width:780px) {
    .paddingbottom--row {
        padding-bottom: 2em
    }
}

.postemblem {
    position: absolute;
    left: 50%;
    width: 6em;
    transform: translate(-50%, -50%);
    top: 0;
    z-index: 30
}

#cmart_gmaplink span,
.postemblem img,
div.cover .cover__video video {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.postemblem img {
    width: calc(100% - 1.6em);
    z-index: 20
}

.postemblem img.border {
    width: 100%;
    z-index: 19
}

.pos-toprightup {
    top: 0;
    right: -1em;
    transform: rotate(-90deg);
    transform-origin: right top
}

.pos-bottomrightup {
    bottom: 0;
    left: 100%;
    margin-left: 1em
}

.pos-bottomleftup,
.pos-bottomrightup,
.pos-topleftup {
    transform: rotate(-90deg);
    transform-origin: left top
}

.pos-topleftup {
    top: 0;
    left: -1em
}

.pos-bottomleftup {
    bottom: 0;
    left: -2em
}

.pos-bottomright {
    top: 100%;
    right: 0;
    padding: 1em 0 0
}

.pos-bottomleft {
    top: 100%;
    left: 0;
    padding: 1em 0 0
}

.pos-topright {
    bottom: 100%;
    right: 0;
    padding: 0 0 1em
}

.pos-topleft {
    bottom: 100%;
    left: 0;
    padding: 0 0 1em
}

.innercenter div.singleheadline,
.layout div.singleheadline,
.resetcentering,
.template_inner div.singleheadline {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0
}

.textcentering {
    text-align: center
}

#content .roomrateslist .roompic a.lightbox:hover .zoomer .posthex,
.bg--white {
    background: #fff
}

.bg--dark {
    background: var(--color-black)
}

.bg--transparent {
    background: 0 0
}

#content .roomtemplate .roominfos .textobj p,
#content .roomtemplate .roominfos li,
.bg--dark h3,
.darkbg h3 {
    color: var(--color-sitebg)
}

#cmart_gmaplink {
    clear: left;
    display: block
}

#cmart_gmaplink span {
    display: none;
    position: absolute;
    padding: 1em 1.5em;
    font-size: 2em;
    color: #fff;
    background: rgba(0, 0, 0, .6);
    border-radius: 2em;
    line-height: normal
}

@media screen and (max-width:800px) {
    #cmart_gmaplink {
        height: 40em
    }

    #cmart_gmaplink img {
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover
    }
}

.posthex {
    position: absolute;
    margin: 0 auto;
    background: var(--color-black);
    border-radius: 6px;
    height: 100%;
    aspect-ratio: 63/100;
    line-height: 100%;
    text-align: center;
    color: #fff;
    font-size: 20px;
    top: 0;
    left: -5px
}

#lage_skizze .skizzepin .skizzepin__pointer span.icon,
.posthex span {
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    color: #fff;
    transform: translate(-50%, -50%)
}

.posthex span.icon-posthorn {
    top: 47%;
    left: 53%;
    font-size: 1.2em
}

.posthex:after,
.posthex:before {
    content: "";
    background: inherit;
    border-radius: inherit;
    z-index: -1
}

.posthex:before {
    transform: rotate(60deg)
}

.posthex:after {
    transform: rotate(-60deg)
}

.defaultheader {
    float: left;
    width: 100%;
    clear: left;
    margin-top: 22em;
    text-align: center
}

.defaultheader a#logo {
    position: relative;
    top: auto;
    left: auto;
    transform: translate(0, 0)
}

.defaultheader a#logo img {
    width: 15em
}

.defaultheader h1 {
    margin-top: 1.3em
}

#lage_skizze {
    width: 100%;
    float: left;
    position: relative
}

@media screen and (max-width:900px) {
    #lage_skizze {
        height: 60em;
        overflow-x: scroll
    }
}

#lage_skizze #lage_skizze_wrap {
    float: left;
    position: relative;
    width: 100%
}

@media screen and (max-width:900px) {
    #lage_skizze #lage_skizze_wrap {
        height: 60em;
        width: auto
    }
}

#lage_skizze img {
    float: left;
    width: 100%;
    position: relative
}

@media screen and (max-width:900px) {
    #lage_skizze img {
        width: auto;
        height: 100%
    }
}

#lage_skizze .skizzepin,
.postemblem img {
    position: absolute
}

#lage_skizze .skizzepin .skizzepin__pointer,
#lage_skizze .skizzepin .skizzepin__wrap {
    position: absolute;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
    z-index: 10
}

#lage_skizze .skizzepin .skizzepin__wrap {
    visibility: hidden;
    width: 12em;
    background: var(--color-black);
    bottom: -8px;
    left: 50%;
    margin-left: -6em;
    line-height: 130%;
    transition: .2s all ease-in-out;
    -moz-transition: .2s all ease-in-out;
    -webkit-transition: .2s all ease-in-out;
    -o-transition: .2s all ease-in-out;
    color: #fff;
    opacity: 0;
    -ms-filter: "alpha(opacity=calc(100*@wert))";
    -khtml-opacity: 0;
    -moz-opacity: 0;
    font-size: 1.45em;
    border-radius: 4px;
    padding: 1em;
    box-shadow: 0 5px 35px rgba(0, 0, 0, .25)
}

#lage_skizze .skizzepin .skizzepin__pointer {
    width: 2em;
    height: 2em;
    animation: skizzepin 1.2s infinite ease;
    margin-left: -1em;
    margin-top: -1em;
    font-size: 2em;
    line-height: 100%
}

#lage_skizze .skizzepin .skizzepin__pointer .posthex {
    background: var(--color-black);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0)
}

#lage_skizze .skizzepin .skizzepin__pointer span.icon {
    left: 0;
    width: 100%;
    transform: translate(0, -50%)
}

#lage_skizze .skizzepin .skizzepin__pointermain {
    width: 2.4em;
    height: 2.4em;
    margin-left: -1.2em;
    margin-top: -1.2em;
    z-index: 15
}

#lage_skizze .skizzepin .skizzepin__pointermain .posthex {
    background: var(--color-accent)
}

#lage_skizze .skizzepin .skizzepin__pointer:hover {
    color: #fff;
    transform: scale(1.1)
}

#lage_skizze .skizzepin .skizzepin__maintitle {
    position: absolute;
    color: var(--color-accent);
    text-decoration: underline;
    font-size: 1.8em;
    line-height: 110%;
    text-align: left;
    float: left;
    bottom: 1.6em;
    left: 6em
}

#lage_skizze .skizzepin .skizzepin__maintitle strong,
h3 {
    font-weight: 400
}

#lage_skizze .skizzepin.active {
    z-index: 100
}

#lage_skizze .skizzepin.active .skizzepin__wrap {
    visibility: visible;
    opacity: 1;
    -ms-filter: "alpha(opacity=calc(100*@wert))";
    -khtml-opacity: 1;
    -moz-opacity: 1;
    bottom: 1em
}

@media screen and (max-width:900px) {
    #lage_skizze .skizzepin.haf.active .skizzepin__wrap {
        bottom: auto;
        top: -6em;
        left: 0;
        margin-left: -12em;
        float: left
    }

    #lage_skizze .skizzepin.haf.active .skizzepin__wrap:after {
        bottom: 50%;
        left: 100%;
        margin-bottom: -6px
    }
}

#lage_skizze .skizzepin:nth-child(2) .skizzepin__pointer {
    animation-delay: .1s
}

#lage_skizze .skizzepin:nth-child(3) .skizzepin__pointer {
    animation-delay: .13s
}

#lage_skizze .skizzepin:nth-child(4) .skizzepin__pointer {
    animation-delay: .23s
}

#lage_skizze .skizzepin:nth-child(5) .skizzepin__pointer {
    animation-delay: .3s
}

#lage_skizze .skizzepin:nth-child(6) .skizzepin__pointer {
    animation-delay: .37s
}

#lageskizze__intro,
.responsive-video {
    position: relative;
    width: 100%;
    float: left
}

#lageskizze__intro {
    clear: left;
    margin-bottom: -15em;
    z-index: 40
}

@media screen and (max-width:900px) {
    #lageskizze__intro {
        margin-bottom: 0
    }
}

#lageskizze__intro h2 {
    width: 60%;
    margin-bottom: .7em;
    margin-left: 20%;
    position: relative
}

@media screen and (max-width:900px) {
    #lageskizze__intro h2 {
        width: 80%;
        margin-left: 10%;
        margin-bottom: .5em
    }
}

@media screen and (max-width:500px) {
    #lageskizze__intro h2 {
        width: 90%
    }
}

#lageskizze__intro .content1 {
    width: 30%;
    clear: left;
    margin-left: 25%;
    position: relative
}

@media screen and (max-width:900px) {
    #lageskizze__intro .content1 {
        width: 70%;
        margin-left: 20%;
        margin-top: 0
    }
}

@media screen and (max-width:500px) {
    #lageskizze__intro .content1 {
        width: 85%;
        margin-left: 10%
    }
}

#lageskizze__intro .content1 .textobj {
    margin-right: 2em
}

#lagecontent2 {
    margin-left: 55%;
    width: 30%;
    margin-top: -15em;
    position: relative;
    z-index: 20;
    float: left
}

@media screen and (max-width:900px) {
    #lagecontent2 {
        width: 80%;
        margin-left: 10%;
        margin-top: -3em
    }
}

.responsive-video {
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
    border-radius: var(--var-borderradius);
    overflow: hidden
}

#cmartcontentpopup #cmartcontentpopupbg,
.responsive-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.pricetable {
    width: 100%;
    max-width: 70em;
    margin: 0 auto
}

.pricetable th {
    color: var(--color-accent);
    font-weight: 700
}

#cmartcontentpopupcontent .textobj p,
.pricetable td,
.pricetable th {
    font-size: var(--var-default-fontsize);
    line-height: var(--var-default-lineheight)
}

.pricetable td,
.pricetable th {
    line-height: normal;
    padding: .65em 0
}

.pricetable td {
    color: var(--color-black);
    border: 0 solid #fff;
    border-top: 1px solid var(--color-beige)
}

.pricetable .price {
    text-align: right
}

#cmartcontentpopup {
    position: fixed;
    bottom: 4em;
    right: 4em;
    float: left;
    width: 42em;
    max-width: 70%;
    z-index: 200
}

#cmartcontentpopup #cmartcontentpopupbg {
    box-shadow: 0 4px 30px rgba(0, 0, 0, .23);
    background: var(--color-sitebg);
    border-radius: var(--var-borderradius)
}

#cmartcontentpopupcloser {
    position: absolute;
    float: right;
    right: 20px;
    top: 20px;
    z-index: 210
}

#cmartcontentpopupcontent {
    padding: 50px;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    float: left;
    position: relative;
    z-index: 205
}

#cmartcontentpopupcontent p {
    margin-bottom: 0
}

#cmartcontentpopupcontent p+p {
    margin-top: .5em
}

#cmartcontentpopupcontent .textobj p {
    line-height: 140%
}

#content div.textblock,
#content ul.pageContents,
li.content {
    width: 100%;
    position: relative;
    float: left;
    clear: left
}

#content .centering,
#content .centering p,
div.template.centering .textobj h2,
div.template.centering .textobj h3,
div.template.centering .textobj h4,
div.template.centering .textobj p {
    text-align: center
}

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

    #content .backgroundbox .contentbox>ul.pageContents>li.textblock,
    #content .backgroundbox>.contentbox>div.textblock,
    #content>div.textblock,
    #content>ul.pageContents>li.textblock {
        width: 80%;
        margin-left: 10%
    }
}

@media screen and (max-width:900px) {
    #content .layout--text-2cols {
        width: 80%;
        margin-left: 10%
    }
}

#content div.textblock.columns div.textobj {
    -moz-column-count: 2;
    column-count: 2;
    -moz-column-gap: 4em;
    column-gap: 4em;
    max-width: 90em
}

@media screen and (max-width:880px) {
    #content div.textblock.columns div.textobj {
        width: 80%;
        margin-left: 10%
    }
}

@media screen and (max-width:600px) {
    #content div.textblock.columns div.textobj {
        -moz-column-count: 1;
        column-count: 1
    }
}

#content div.textobj {
    margin: 0 auto;
    position: relative;
    max-width: var(--var-content-max-width);
    width: 100%;
    float: none;
    clear: left
}

#content div.textobj li,
#content div.textobj p,
#content div.textobj td {
    clear: left;
    font-size: var(--var-default-fontsize);
    line-height: var(--var-default-lineheight)
}

#content div.textobj li,
#content div.textobj td {
    width: 100%
}

#content .textblock+.textbutton,
#content .textobj+.textbutton {
    margin-top: 2em
}

#content .textblock+.textblock,
#content .textobj+.textobj {
    margin-top: 1.5em
}

#content .bigtext+.textobj {
    margin-top: 5em
}

#content .textblock.bigtext,
#content .textobj img,
#content p img {
    position: relative;
    max-width: 100%
}

#content div.textobj ul {
    list-style-type: none;
    position: relative
}

#content div.textobj ul li {
    width: 100%;
    position: relative;
    box-sizing: border-box;
    margin-bottom: 0;
    padding: .3em .5em .3em 1.4em;
    line-height: 140%
}

#content div.textobj ul li::before {
    content: "\e908";
    font-family: "icons" !important;
    speak: never;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: absolute;
    top: .8em;
    left: 0;
    color: var(--color-accent);
    background-size: contain;
    width: 1.4em;
    height: 1.6em;
    font-size: .8em
}

#content .tabs--style1 .tab .tab__content .tabcontentbox,
#content div.textobj p,
#content>.pageContents>li.template>div.template,
div#content>.template {
    width: 100%
}

#content blockquote {
    width: 100%;
    margin: 1em 0
}

#content blockquote,
#content blockquote p,
.doublecontent {
    float: left;
    position: relative;
    clear: left
}

#content blockquote p {
    text-align: left;
    font-style: normal;
    font-weight: 300
}

#content blockquote p.cite {
    font-family: var(--font-serif);
    z-index: 20;
    font-size: 2em;
    margin-bottom: .5em;
    line-height: 130%
}

#content blockquote p.author {
    font-size: 1.4em;
    color: #aaa
}

#content li.listlinks>div.cms_editbox,
#content li.listsubnavigation>div.cms_editbox {
    top: -20px
}

#content h2.listheadline {
    margin-top: 1em;
    text-align: center;
    margin-bottom: 0
}

#content .zoomer {
    position: absolute;
    top: 50%;
    margin-top: -25px;
    margin-left: -25px;
    left: 50%
}

#content .textblock.bigtext .textobj {
    max-width: 95em;
    margin: 0 auto
}

#content .textblock.bigtext h2 {
    font-size: 2em;
    font-weight: 400;
    line-height: 120%;
    margin-bottom: 1em
}

@media screen and (max-width:800px) {
    #content .textblock.bigtext h2 {
        font-size: 1.9em
    }
}

@media screen and (max-width:500px) {
    #content .textblock.bigtext h2 {
        font-size: 1.8em
    }
}

#content .textblock.bigtext h4 {
    margin-bottom: 2em;
    color: var(--color-accent)
}

#content .textblock.bigtext p {
    font-size: 3.4em;
    line-height: 130%;
    font-family: var(--font-serif);
    color: var(--color-black)
}

@media screen and (max-width:1100px) {
    #content .textblock.bigtext p {
        font-size: 2.8em;
        line-height: 160%
    }
}

@media screen and (max-width:800px) {
    #content .textblock.bigtext p {
        font-size: 2.5em
    }
}

@media screen and (max-width:500px) {
    #content .textblock.bigtext p {
        font-size: 2.1em
    }
}

@media screen and (max-width:400px) {
    #content .textblock.bigtext p {
        font-size: 1.9em;
        line-height: 150%
    }
}

div.singleheadline {
    width: 76%;
    margin-left: 12%;
    position: relative;
    float: left
}

@media screen and (max-width:800px) {
    div.singleheadline {
        width: 84%;
        margin-left: 8%
    }
}

@media screen and (min-width:1700px) {
    div.singleheadline {
        width: 68%;
        margin-left: 16%
    }
}

div.singleheadline.withlink h1,
div.singleheadline.withlink h2,
div.singleheadline.withlink h3,
div.singleheadline.withlink h4 {
    width: 70%
}

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

    div.singleheadline.withlink h1,
    div.singleheadline.withlink h2,
    div.singleheadline.withlink h3,
    div.singleheadline.withlink h4 {
        width: 90%
    }
}

div.singleheadline a.button {
    position: absolute;
    top: 1em;
    right: 0
}

@media screen and (max-width:800px) {
    div.singleheadline a.button {
        position: relative;
        clear: left;
        float: left;
        margin-top: 0;
        margin-bottom: 2em
    }
}

.doublecontent {
    width: 100%
}

.cmartbge,
.template.ruler:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1
}

.cmartbge.cmartbge--picture {
    background-repeat: no-repeat
}

.container,
.innercenter,
.template,
.template_inner {
    position: relative;
    float: left;
    clear: left;
    width: 100%
}

.innercenter,
.template_inner {
    width: 76%;
    margin-left: 12%
}

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

    .innercenter,
    .template_inner {
        width: 84%;
        margin-left: 8%
    }
    .template_inner {
        flex-wrap: wrap;
    }
}

@media screen and (min-width:1700px) {

    .innercenter,
    .template_inner {
        width: 68%;
        margin-left: 16%
    }
}

div.template div.template {
    width: 100%;
    left: 0
}

div.template div.template .blockheadline {
    top: 0
}

#content div.textobj ul,
div.template div.template div.template_inner {
    width: 100%;
    margin-left: 0
}

@media screen and (min-width:1650px) {
    div.template div.template div.template_inner {
        width: 100%;
        margin-left: 0;
        left: 0
    }
}

div.template div.template__headline {
    width: 100%;
    float: left;
    clear: left;
    margin-bottom: 4em;
    z-index: 10;
    position: relative
}

div.templatebgpicture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover
}

div.total.template>.template_inner {
    width: 94%;
    margin-left: 3%;
    left: 0
}

.contentbox {
    float: left;
    position: relative;
    width: 100%;
    box-sizing: border-box
}

#content div.template.noleftright .template_inner {
    width: 100%;
    margin-left: 0;
    left: 0
}

.template .cmartbge {
    z-index: 0
}

#content.contentbox {
    padding: 0
}

.cols_1_normal .template .template_inner {
    width: 100%;
    margin: 0;
    left: 0
}

.cols_1_normal .template_inner>.contentbox {
    width: 100%;
    left: 0;
    clear: left
}

.cols_1_narrow .template .template_inner {
    width: 100%;
    margin: 0;
    left: 0
}

.cols_1_narrow>.template_inner>.contentbox {
    width: 50em;
    margin-left: -25em;
    left: 50%;
    clear: left
}

@media screen and (max-width:720px) {
    .cols_1_narrow>.template_inner>.contentbox {
        width: 74%;
        margin-left: 13%;
        left: 0
    }
}

@media screen and (max-width:570px) {
    .cols_1_narrow>.template_inner>.contentbox {
        width: 86%;
        margin-left: 7%
    }
}

.template.ruler:before {
    content: " ";
    left: 50%;
    z-index: 5;
    background: var(--color-beige);
    width: 1px
}

@media screen and (max-width:700px) {
    .template.ruler:before {
        display: none
    }
}

.cols_2_leftbig .template_inner,
.cols_2_normal .template_inner,
.cols_2_rightbig .template_inner,
.cols_3_normal .template_inner {
    vertical-align: top;
    display: flex;
    justify-content: space-around
}

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

    .cols_2_leftbig .template_inner,
    .cols_2_normal .template_inner,
    .cols_2_rightbig .template_inner,
    .cols_3_normal .template_inner {
        display: block
    }
}

.cols_2_leftbig .template .template_inner,
.cols_2_normal .template .template_inner,
.cols_2_rightbig .template .template_inner {
    width: 100%;
    margin: 0;
    left: 0
}

.cols_2_normal .template_inner>.contentbox {
    width: 40%
}

@media screen and (max-width:900px) {
    .cols_2_normal .template_inner>.contentbox {
        width: 48%;
        margin: 0;
        box-sizing: border-box
    }
}

@media screen and (max-width:700px) {
    .cols_2_normal .template_inner>.contentbox {
        width: 100%;
        margin: 0;
        box-sizing: border-box;
        padding: 0
    }

    .cols_2_normal .template_inner>.contentbox+.contentbox {
        margin-top: 5em
    }
}

.cols_2_normal.fixleft .template_inner {
    display: block
}

.cols_2_normal.fixleft .template_inner>.contentbox.first {
    float: left
}

.cols_2_normal.fixleft .template_inner>.contentbox.last {
    float: right
}

.cols_2_normal.listing .template_inner>.contentbox {
    width: 30%;
    margin: 0 4%
}

@media screen and (max-width:900px) {
    .cols_2_normal.listing .template_inner>.contentbox {
        width: 48%;
        margin: 0;
        box-sizing: border-box;
        padding: 0 3em
    }
}

@media screen and (max-width:700px) {
    .cols_2_normal.listing .template_inner>.contentbox {
        width: 100%;
        margin: 0;
        box-sizing: border-box;
        padding: 0
    }
}

.cols_2_normal.listing .template_inner>.contentbox+.contentbox {
    margin-top: 5em
}

.cols_2_rightbig .template_inner>.contentbox {
    clear: none;
    width: 37%
}

.cols_2_rightbig .template_inner>.contentbox.last {
    float: right;
    width: 63%
}

.cols_2_leftbig .template_inner>.contentbox {
    clear: none;
    width: 63%
}

.cols_2_leftbig .template_inner>.contentbox.last {
    float: right;
    width: 37%
}

.cols_3_normal .template .template_inner {
    width: 100%;
    margin: 0;
    left: 0
}

.cols_3_normal .template_inner>.contentbox {
    clear: none;
    width: 29%
}
@media screen and (max-width: 900px) {
    .cols_3_normal .template_inner>.contentbox {
    width: 80%;
        margin: 0 auto;
        clear:left; 
        float:none;
        max-width: 60em;
}
}

#content ul.listinfos .cms_editbox {
    z-index: 200
}

#content ul.listinfos,
.cmart_list_editor,
.cmart_list_editor ul {
    float: left;
    width: 100%;
    clear: left;
    position: relative
}

.cmart_list_editor {
    display: none;
    padding: 5em;
    box-sizing: border-box
}

.cmart_list_editor ul {
    margin-top: 1em
}

.cmart_listeditor_panel {
    position: absolute;
    top: 50%;
    left: 5%;
    width: 90%;
    margin-top: -2em;
    text-align: center;
    z-index: 100;
    display: none
}

.cmart_listeditor_panel .cmart_button {
    display: inline-block;
    float: none
}

.cmart_endlisteditor {
    display: none;
    position: absolute;
    bottom: 1em;
    left: 50%;
    transform: translateX(-50%)
}

.editing:not(.cmart_grideditor):not(.cmart_contentadding) li.listinfos:not(.listediting) .imageslider:hover .cmart_listeditor_panel,
.editing:not(.cmart_grideditor):not(.cmart_contentadding) li.listinfos:not(.listediting) .slidercontent:hover .cmart_listeditor_panel,
.editing:not(.cmart_grideditor):not(.cmart_contentadding) li.listpictures:not(.listediting) .imageslider:hover .cmart_listeditor_panel,
.editing:not(.cmart_grideditor):not(.cmart_contentadding) li.listpictures:not(.listediting) .slidercontent:hover .cmart_listeditor_panel {
    display: block
}

.editing:not(.cmart_grideditor):not(.cmart_contentadding) li.listinfos:not(.listediting) .imageslider:hover div.slickslider:before,
.editing:not(.cmart_grideditor):not(.cmart_contentadding) li.listinfos:not(.listediting) .slidercontent:hover div.slickslider:before,
.editing:not(.cmart_grideditor):not(.cmart_contentadding) li.listpictures:not(.listediting) .imageslider:hover div.slickslider:before,
.editing:not(.cmart_grideditor):not(.cmart_contentadding) li.listpictures:not(.listediting) .slidercontent:hover div.slickslider:before {
    position: absolute;
    content: " ";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 88
}

.content.listediting .cmart_list_editor {
    display: block
}

#content .tabs .infobox.tabnav .cms_editbox .cms_editbox_title,
.content.listediting .slickslider,
ul.listpictures li a.lightbox .title,
ul.listpictures li.gallerypicture a.lightbox .zoomer {
    display: none
}

#content .tabs .tab.active,
#content .tabs ul.listinfos.tabs li.infobox:hover .cms_editbox .cms_editbox_title,
.content.listediting .cmart_endlisteditor {
    display: block
}

#content .tabs,
#content ul.accordion,
.accordions {
    float: left;
    clear: left;
    position: relative;
    width: 100%
}

#content .tabs ul.listinfos.tabs {
    margin-bottom: 0;
    position: absolute;
    z-index: 20;
    width: auto;
    text-align: center;
    left: 50%;
    top: -3em;
    transform: translate(-50%, 0);
    background: #222;
    border-radius: 5px
}

#content .tabs .tab,
#content .tabs ul.listinfos.tabs li.infobox {
    position: relative;
    clear: none;
    float: left;
    width: auto
}

#content .tabs ul.listinfos.tabs li.cms_add_item,
#content .tabs ul.listinfos.tabs li.infobox a.infoboxtitle {
    border: 0 !important;
    border-radius: 0;
    font-size: 1.8em !important;
    line-height: normal;
    float: left;
    padding: .7em .9em !important;
    background: 0 0;
    color: #aaa;
    text-decoration: none
}

#content .tabs ul.listinfos.tabs li.cms_add_item {
    margin-top: 0;
    width: auto
}

#content .tabs ul.listinfos.tabs li.cms_add_item:hover,
#content .tabs ul.listinfos.tabs li.infobox a.infoboxtitle:hover {
    color: #fff;
    background: 0 0
}

#content .tabs ul.listinfos.tabs li.infobox.active a.infoboxtitle {
    background: var(--color-accent);
    color: #232323
}

#content .tabs .tab {
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
    clear: left;
    display: none;
    min-height: 10em
}

#content .tabs .bgimage {
    top: 0;
    left: 0
}

#content .tabs--default .tabsnavigation {
    position: absolute;
    top: 8em;
    left: 8%;
    z-index: 200
}

@media screen and (max-width:800px) {
    #content .tabs--default .tabsnavigation {
        top: 4em;
        left: 10%
    }
}

#content .tabs--default .tabsnavigation a {
    color: #fff;
    font-size: var(--font-size-h4);
    font-family: var(--font--default);
    line-height: 100%;
    color: var(--color-black);
    text-decoration: underline;
    float: left;
    position: relative;
    padding: .2em 0
}

#content .tabs--default .tabsnavigation a+a {
    padding-left: 2.3em
}

@media screen and (max-width:800px) {
    #content .tabs--default .innercenter {
        width: 94%;
        margin-left: 3%
    }
}

#content .tabs--default div.tab {
    position: relative;
    top: 0;
    left: 0;
    padding: 0;
    width: 100%;
    height: 65em
}

@media screen and (max-width:800px) {
    #content .tabs--default div.tab {
        height: auto
    }
}

#content .tabs--default div.tab .tab__content {
    width: 56%;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--color-accent)
}

@media screen and (max-width:800px) {
    #content .tabs--default div.tab .tab__content {
        position: relative;
        float: left;
        height: auto;
        width: 100%
    }
}

#content .tabs--default div.tab .tab__content .tabcontentbox {
    width: 100%;
    position: absolute;
    box-sizing: border-box;
    margin-top: 17em;
    padding: 0 25%0 10%
}

@media screen and (max-width:800px) {
    #content .tabs--default div.tab .tab__content .tabcontentbox {
        position: relative;
        float: left;
        padding-right: 4em;
        margin-bottom: 20em;
        margin-top: 12em
    }
}

#content .tabs--default div.tab .tab__content .tabcontentbox .textobj {
    margin-bottom: 2em
}

#content .tabs--default div.tab .tab__content .listinfos.button,
#content .tabs--style1 .tab .tab__content .listinfos.button,
#content .tabs--style2 .tab .tab__content .listinfos.button {
    margin-top: 2em
}

#content .tabs--default div.tab .tab__slider {
    width: 50%;
    position: absolute;
    top: 10%;
    right: 0;
    height: 80%
}

@media screen and (max-width:800px) {
    #content .tabs--default div.tab .tab__slider {
        width: 80%;
        height: 30em;
        margin-top: -15em;
        position: relative;
        top: 0;
        right: auto;
        margin-left: 10%;
        float: left
    }
}

#content .tabs--default div.tab .tab__slider .slick-dots {
    bottom: -12.5%;
    text-align: right
}

#content .tabs--default div.tab .tab__slider .slick-dots li {
    font-size: 3em;
    margin-left: 1em;
    line-height: normal
}

#content .tabs--default div.tab .tab__slider .slick-dots li a {
    color: var(--color-accent);
    font-family: var(--font-serif)
}

#content .tabs--default div.tab .tab__slider .slick-dots li.slick-active a {
    color: #ccc
}

#content .tabs--default div.tab .tab__slider .slickslider {
    width: 100%;
    height: 100%
}

#content .tabs--default div.tab .tab__slider .slickslider .slide {
    width: 100%;
    height: 100%;
    position: absolute
}

#content .tabs--default div.tab .tab__slider .slickslider .slide img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover
}

#content .tabs--switcher .tabsnavigation {
    position: relative;
    width: 100%;
    text-align: center;
    margin-bottom: 8em
}

#content .tabs--switcher .tabsnavigation a,
#content .tabs--switcher .tabsnavigation div {
    color: #111;
    display: inline-block;
    font-size: var(--font-size-h4);
    font-family: var(--font--default);
    line-height: 100%;
    color: var(--color-black);
    text-decoration: underline;
    position: relative;
    padding: .2em 0
}

#content .tabs--switcher .tabsnavigation a {
    margin-left: 3em
}

@media screen and (max-width:800px) {
    #content .tabs--switcher .tabsnavigation a {
        margin-left: 1.5em
    }
}

#content .tabs--switcher .tabsnavigation a.active {
    text-decoration: underline;
    color: var(--color-accent)
}

#content .tabs--switcher div.tab {
    position: relative;
    float: left;
    width: 100%;
    padding: 0
}

#content .tabs--switcher div.tab .tab__content {
    width: 100%;
    float: left;
    clear: left
}

#content .tabs--switcher div.tab .tab__content .tabcontentbox {
    width: 100%;
    box-sizing: border-box
}

#content .tabs--switcher div.tab .tab__content .cols_2_normal .contentbox {
    padding: 0 3em
}

#content .tabs--style1,
#content ul.listinfos.card {
    width: 90%;
    margin-left: 5%
}

@media screen and (max-width:1400px) {
    #content .tabs--style1 {
        width: 94%;
        margin-left: 3%
    }
}

@media screen and (min-width:1800px) {
    #content .tabs--style1 {
        width: 80%;
        margin-left: 10%
    }
}

#content .tabs--style1 .tabsnavigation {
    position: absolute;
    top: 3em;
    right: 0;
    z-index: 50;
    width: calc(100%/6)
}

#content .tabs--style1 .tabsnavigation a {
    font-size: 2.4em;
    line-height: normal;
    color: #ccc;
    float: right;
    clear: both;
    width: 80%;
    text-align: left;
    position: relative;
    margin-bottom: 1em
}

#content .tabs--style1 .tabsnavigation a:hover {
    text-decoration: none
}

#content .tabs--style1 .tabsnavigation a::after {
    content: " ";
    background: var(--color-accent);
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 1px;
    float: left;
    transition: .75s all ease
}

@media screen and (max-width:1000px) {
    #content .tabs--style1 .tabsnavigation a {
        width: auto;
        float: left;
        clear: none;
        text-align: left
    }
}

#content .tabs--style1 .tabsnavigation a+a {
    padding-left: 2em
}

#content .roomrateslist .roompic a.lightbox:hover .zoomer .icon,
#content .roomtemplate .roomfacts>div span,
#content .tabs--style1 .tabsnavigation a.active,
div.layout--imageleft-textright .layouttext .moreorless a:hover,
div.layout--imageright-textleft .layouttext .moreorless a:hover {
    color: var(--color-accent)
}

#content .tabs--style1 .tabsnavigation a.active::after {
    width: 300%
}

#content .tabs--style1 .tab {
    position: relative;
    background: 0 0;
    height: 80em;
    padding: 0;
    width: 100%
}

#content .tabs--style1 .tab .tab__content {
    width: 40%;
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translate(0, -50%);
    height: auto;
    z-index: 20
}

@media screen and (max-width:600px) {
    #content .tabs--style1 .tab .tab__content {
        width: 75%
    }
}

#content .tabs--style1 .tab .tab__image {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100%/5*4);
    height: 88%;
    z-index: 1;
    background: var(--color-black);
    text-align: center
}

#content .tabs--style1 .tab .tab__image .bgimage,
#content .tabs--style1 .tab .tab__image img.img {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: .5;
    -ms-filter: "alpha(opacity=calc(100*@wert))";
    -khtml-opacity: .5;
    -moz-opacity: .5;
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute
}

#content .tabs--style1 .tab .tab__image_1 {
    position: absolute;
    bottom: 0;
    right: 0;
    width: calc(100%/5*1.8);
    height: 50%;
    top: auto;
    z-index: 1;
    background: var(--color-black);
    text-align: center
}

#content .tabs--style1 .tab .tab__image_1 .bgimage,
#content .tabs--style1 .tab .tab__image_1 img.img,
#content .tabs--style2 .tab .tab__image1 .bgimage,
#content .tabs--style2 .tab .tab__image1 img.img,
#content .tabs--style2 .tab .tab__image2 .bgimage,
#content .tabs--style2 .tab .tab__image2 img.img,
#content .tabs--style3 .tab .tab__image .bgimage,
#content .tabs--style3 .tab .tab__image img.img {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute
}

#content .tabs--style1 .tabs__conclusion {
    background: var(--color-accent);
    float: left;
    width: 100%;
    z-index: 2;
    padding: 18em 0 9em;
    margin-top: -10em
}

#content .tabs--style1 .tabs__conclusion .textobj {
    width: calc(100%/6*3);
    float: left;
    color: #fff;
    max-width: none
}

@media screen and (max-width:800px) {
    #content .tabs--style1 .tabs__conclusion .textobj {
        width: 100%
    }
}

#content .tabs--style1 .tabs__conclusion .contentbox {
    width: calc(100%/6*2);
    float: left;
    text-align: right
}

@media screen and (max-width:800px) {
    #content .tabs--style1 .tabs__conclusion .contentbox {
        width: 100%;
        clear: left;
        text-align: left;
        margin-top: 4em
    }
}

#content .tabs--style2 ul.listinfos.tabs,
#content .tabs--style3 ul.listinfos.tabs {
    margin-top: -6em
}

#content .tabs--style2 .tabsheadline {
    position: absolute;
    top: 0;
    left: 0;
    font-size: var(--font-size-h2);
    line-height: 99%;
    font-family: var(--font-serif);
    margin-bottom: 1em;
    color: var(--color-accent);
    z-index: 10
}

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

    #content .tabs--style2 .tabsheadline br,
    #content .tabs--style2 .tabsheadline br:after {
        content: " "
    }
}

@media screen and (max-width:800px) {
    #content .tabs--style2 .tabsheadline {
        position: relative;
        float: left
    }
}

#content .tabs--style2 .tabsnavigation {
    position: absolute;
    top: 25%;
    margin-top: -3em;
    left: 30%;
    width: 40%;
    z-index: 50
}

@media screen and (max-width:800px) {
    #content .tabs--style2 .tabsnavigation {
        float: left;
        clear: left;
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        margin: 4em 0
    }
}

#content .tabs--style2 .tabsnavigation a {
    font-size: var(--font-size-h3);
    font-family: var(--font-serif);
    line-height: 110%;
    font-weight: 400;
    color: var(--color-accent);
    float: left;
    position: relative
}

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

    #content .tabs--style2 .tabsnavigation a br,
    #content .tabs--style2 .tabsnavigation a br:after {
        content: " "
    }
}

#content .tabs--style2 .tabsnavigation a+a {
    padding-left: 1em
}

#content .tabs--style2 .tabsnavigation a.active {
    color: #ccc
}

#content .tabs--style2 .tab {
    position: relative;
    height: 68em;
    padding: 0;
    width: 100%;
    background: 0 0
}

@media screen and (max-width:800px) {
    #content .tabs--style2 .tab {
        height: auto
    }
}

#content .tabs--style2 .tab .tab__content {
    width: 26%;
    position: absolute;
    top: 35%;
    left: 0;
    height: auto
}

@media screen and (max-width:800px) {
    #content .tabs--style2 .tab .tab__content {
        width: 100%;
        top: auto;
        position: relative;
        float: left;
        clear: left
    }
}

#content .tabs--style2 .tab .tab__image1,
body #content ul.geschichte li.geschichte:before {
    position: absolute;
    z-index: 1;
    background: var(--color-accent)
}

#content .tabs--style2 .tab .tab__image2 {
    position: absolute;
    background: var(--color-accent)
}

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

    #content .tabs--style2 .tab .tab__image1,
    #content .tabs--style2 .tab .tab__image2 {
        top: auto;
        position: relative;
        float: left;
        clear: left
    }
}

#content .tabs--style2 .tab .tab__image1 {
    left: 30%;
    width: 46%;
    height: 65%;
    top: 35%
}

@media screen and (max-width:800px) {
    #content .tabs--style2 .tab .tab__image1 {
        left: 0;
        float: left;
        height: 35em;
        top: auto;
        width: 90%;
        margin-top: 3em
    }
}

#content .tabs--style2 .tab .tab__image2 {
    z-index: 3;
    right: 0;
    top: 0;
    height: 70%;
    width: 30%
}

@media screen and (max-width:800px) {
    #content .tabs--style2 .tab .tab__image2 {
        width: 70%;
        z-index: -1;
        right: auto;
        float: right;
        margin-top: -10em;
        height: 45em;
        top: auto
    }
}

#content .tabs--style3 .tabsheadline {
    position: absolute;
    top: 0;
    left: 0;
    font-size: var(--font-size-h2);
    line-height: 99%;
    font-family: var(--font-serif);
    margin-bottom: 1em;
    color: var(--color-accent);
    width: 25%;
    z-index: 10
}

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

    #content .tabs--style3 .tabsheadline br,
    #content .tabs--style3 .tabsheadline br:after {
        content: " "
    }
}

#content .tabs--style3 .tabsnavigation {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
    width: 25%
}

#content .tabs--style3 .tab .tab__content .tabcontentbox h3,
#content .tabs--style3 .tabsnavigation a {
    font-size: var(--font-size-h4);
    line-height: 100%;
    text-decoration: underline;
    color: var(--color-accent);
    font-family: var(--font--default)
}

#content .tabs--style3 .tabsnavigation a {
    float: left;
    width: 100%;
    clear: left;
    position: relative;
    padding-bottom: .8em
}

#content .tabs--style3 .tabsnavigation a+a {
    padding: .8em 0
}

#content .tabs--style3 .tabsnavigation a.active {
    text-decoration: underline;
    color: #111
}

#content .tabs--style3 .tab {
    position: relative;
    padding: 0;
    width: 100%;
    float: left;
    clear: left;
    background: 0 0
}

#content .tabs--style3 .tab .tab__content {
    width: 30%;
    min-height: 20em;
    position: relative;
    margin-left: 30%;
    height: auto;
    float: left;
    margin-bottom: 4em
}

#content .tabs--style3 .tab .tab__content .tabcontentbox h3 {
    font-weight: 500
}

#content .tabs--style3 .tab .tab__image {
    position: relative;
    width: 100%;
    clear: left;
    float: left;
    background: var(--color-accent);
    height: 60em
}

#content .template_inner .tabs .innercenter {
    width: 100%;
    margin: 0
}

#content ul.accordion,
.accordions {
    float: none;
    max-width: 80em;
    margin: 0 auto
}

#content ul.accordion .accordion,
.accordions .accordion {
    float: left;
    width: 100%;
    position: relative;
    clear: left;
    padding: 1.5em 3em;
    box-sizing: border-box
}

#content ul.accordion .accordion+.accordion,
.accordions .accordion+.accordion {
    margin-top: 1.5em;
    padding-top: 3em;
    border-top: 1px solid var(--color-text)
}

#content ul.accordion .accordion__title,
#content ul.accordion .accordiontitle,
.accordions .accordion__title,
.accordions .accordiontitle {
    float: left;
    width: 100%;
    box-sizing: border-box;
    font-size: 2.8em;
    line-height: normal;
    font-family: var(--font-serif);
    text-decoration: none;
    position: relative;
    font-weight: 400;
    clear: left;
    color: var(--color-text)
}

#content ul.accordion .accordion__title .icon,
#content ul.accordion .accordiontitle .icon,
.accordions .accordion__title .icon,
.accordions .accordiontitle .icon {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    float: right;
    height: 1em;
    font-size: .7em;
    color: var(--color-beige)
}

#content ul.accordion .accordion__title strong,
#content ul.accordion .accordiontitle strong,
.accordions .accordion__title strong,
.accordions .accordiontitle strong {
    width: 80%;
    float: left;
    font-weight: 400;
    line-height: normal
}

#content ul.accordion .accordion__content,
#content ul.accordion .accordioncontent,
.accordions .accordion__content,
.accordions .accordioncontent {
    display: none;
    float: left;
    clear: left;
    width: 100%;
    box-sizing: border-box;
    padding: 2em 0
}

#content ul.accordion .accordion__content .textobj,
#content ul.accordion .accordioncontent .textobj,
.accordions .accordion__content .textobj,
.accordions .accordioncontent .textobj {
    float: left
}

#content ul.accordion .accordion__content table.roomrateslist,
#content ul.accordion .accordioncontent table.roomrateslist,
.accordions .accordion__content table.roomrateslist,
.accordions .accordioncontent table.roomrateslist {
    margin: 0
}

#content ul.accordion .accordion__content,
.accordions .accordion__content {
    margin-top: 1em
}

#content .roomrateslist ul.listinfos li.accordion.active a.accordion__title .accordion__icon,
#content .roomrateslist ul.listinfos li.accordion.active a.accordion__title:hover .accordion__icon,
#content div.roomaccordions ul.listinfos li.accordion.active a.accordion__title .accordion__icon,
#content div.roomaccordions ul.listinfos li.accordion.active a.accordion__title:hover .accordion__icon,
#content ul.accordion .accordion.active .accordion__title .accordion__icon,
#content ul.accordion .accordion.active .accordiontitle .accordion__icon,
.accordions .accordion.active .accordion__title .accordion__icon,
.accordions .accordion.active .accordiontitle .accordion__icon {
    transform: rotate(180deg)
}

#content ul.accordion .accordion.active .accordion__title,
#content ul.accordion .accordion.active .accordion__title:hover,
#content ul.accordion .accordion.active .accordiontitle,
#content ul.accordion .accordion.active .accordiontitle:hover,
.accordions .accordion.active .accordion__title,
.accordions .accordion.active .accordion__title:hover,
.accordions .accordion.active .accordiontitle,
.accordions .accordion.active .accordiontitle:hover {
    background: 0 0
}

#content ul.accordion .accordion.active .accordion__content,
#content ul.accordion .accordion.active .accordioncontent,
.accordions .accordion.active .accordion__content,
.accordions .accordion.active .accordioncontent {
    display: block
}

.bg--dark .accordions,
.bg--dark ul.accordion,
.bg--lightestgrey .accordions,
.bg--lightestgrey ul.accordion,
.bg--lightgrey .accordions,
.bg--lightgrey ul.accordion {
    float: left;
    width: 100%;
    clear: left;
    position: relative;
    margin: 2em 0
}

.bg--dark .accordions .accordion,
.bg--dark ul.accordion .accordion,
.bg--lightestgrey .accordions .accordion,
.bg--lightestgrey ul.accordion .accordion,
.bg--lightgrey .accordions .accordion,
.bg--lightgrey ul.accordion .accordion {
    float: left;
    width: 100%;
    position: relative;
    clear: left;
    padding: 2.5em 3em 3em;
    box-sizing: border-box;
    background: #fff
}

.bg--dark .accordions .accordion+.accordion,
.bg--dark ul.accordion .accordion+.accordion,
.bg--lightestgrey .accordions .accordion+.accordion,
.bg--lightestgrey ul.accordion .accordion+.accordion,
.bg--lightgrey .accordions .accordion+.accordion,
.bg--lightgrey ul.accordion .accordion+.accordion {
    margin-top: 1em
}

#content .cols_2_normal ul.accordion .accordion__title,
#content .cols_2_normal ul.accordion .accordiontitle {
    font-size: 2.2em
}

ul.listinfos.slider li.infobox {
    border: 1px solid #ddd;
    padding: 2em;
    box-sizing: border-box;
    position: relative;
    border-bottom: 1px solid #ddd;
    margin: 0 0 2em;
    background: #fff
}

ul.listinfos.slider {
    z-index: 100
}

ul.listinfos.slider li.infobox p {
    font-size: 1.5em;
    line-height: 130%
}

.cardslider,
ul.listinfos.slider li.infobox .picconnection {
    position: relative
}

li.content.slider .cmart_list_editor {
    padding: 15em 5em;
    background: #444
}

.defaultswiper .swiper-slide {
    width: 52em;
    height: 41em;
    margin: 0 3em;
    overflow: hidden;
    border-radius: var(--var-borderradius)
}

@media screen and (max-width:1200px) {
    .defaultswiper .swiper-slide {
        width: 48em;
        height: 40em
    }
}

@media screen and (max-width:1000px) {
    .defaultswiper .swiper-slide {
        width: 41em
    }
}

@media screen and (max-width:767px) {
    .defaultswiper .swiper-slide {
        width: 34em;
        height: 40em;
        margin: 0
    }
}

@media screen and (max-width:600px) {
    .defaultswiper .swiper-slide {
        width: 30em;
        height: 30em;
        padding: 0 1em;
        box-sizing: border-box
    }
}

.defaultswiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -o-object-fit: cover
}

@media screen and (max-width:1400px) {
    #content ul.listinfos.card {
        width: 94%;
        margin-left: 3%
    }
}

@media screen and (min-width:1800px) {
    #content ul.listinfos.card {
        width: 80%;
        margin-left: 10%
    }
}

#content .innercenter ul.listinfos.card,
#content .template_inner ul.listinfos.card {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0
}

.cardslider,
ul.listinfos.slider li.infobox {
    float: left;
    width: 100%;
    clear: left
}

#content>.imageslider--default,
#content>.pageContents>li.listpictures .imageslider--default,
body #content ul.geschichte {
    width: 76%;
    margin-left: 12%
}

@media screen and (max-width:800px) {
    body #content ul.geschichte {
        width: 84%;
        margin-left: 8%
    }
}

@media screen and (min-width:1700px) {
    body #content ul.geschichte {
        width: 68%;
        margin-left: 16%
    }
}

body #content ul.geschichte li.geschichte:before {
    content: " ";
    width: 2px;
    left: 50%;
    margin-left: -1px;
    height: 100%;
    top: 3px
}

@media screen and (max-width:1000px) {
    body #content ul.geschichte li.geschichte:before {
        left: 25%
    }
}

@media screen and (max-width:700px) {
    body #content ul.geschichte li.geschichte:before {
        left: 15%
    }
}

body #content ul.geschichte li.geschichte .geschichte__image {
    position: absolute;
    top: 0;
    box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    left: 50%;
    transform: translate(-50%, 0);
    height: 20em;
    width: 20em;
    z-index: 10;
    overflow: hidden
}

@media screen and (max-width:1000px) {
    body #content ul.geschichte li.geschichte .geschichte__image {
        left: 25%;
        width: 20%;
        aspect-ratio: 1/1;
        height: auto
    }
}

@media screen and (max-width:700px) {
    body #content ul.geschichte li.geschichte .geschichte__image {
        left: 15%;
        width: 24%
    }
}

body #content ul.geschichte li.geschichte .geschichte__content {
    float: right;
    width: calc(50% - 18em);
    position: relative;
    margin: 3em
}

@media screen and (max-width:1000px) {
    body #content ul.geschichte li.geschichte .geschichte__content {
        width: 55%;
        max-width: 60em
    }
}

@media screen and (max-width:700px) {
    body #content ul.geschichte li.geschichte .geschichte__content {
        width: 70%;
        margin-left: 0;
        margin-right: 0
    }
}

body #content ul.geschichte li.geschichte .geschichte__content h3 {
    margin-bottom: .3em
}

body #content ul.geschichte li.geschichte:nth-child(2n) .geschichte__content {
    float: left;
    text-align: right
}

@media screen and (max-width:1000px) {
    body #content ul.geschichte li.geschichte:nth-child(2n) .geschichte__content {
        float: right;
        text-align: left
    }
}

body #content ul.geschichte li.geschichte+li.geschichte {
    padding-top: 13em
}

body #content ul.geschichte li.geschichte+li.geschichte .geschichte__image {
    top: 13em
}

body #content ul.geschichte li.geschichte:last-child:before {
    display: none
}

.singlepicture,
div.singlepicture,
ul.listpictures {
    width: 100%;
    float: left;
    position: relative;
    text-align: center
}

ul.listpictures li {
    position: relative;
    display: inline-block;
    float: none;
    width: 32%;
    margin: .5%;
    height: 32em
}

@media screen and (max-width:1000px) {
    ul.listpictures li {
        height: 25em
    }
}

@media screen and (max-width:700px) {
    ul.listpictures li {
        height: 20em;
        width: 48%
    }
}

ul.listpictures li a.lightbox {
    float: left;
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 4px;
    overflow: hidden
}

ul.listpictures li a.lightbox img {
    float: left;
    position: relative;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    transition: .4s all ease
}

ul.listpictures li a.lightbox:hover img {
    opacity: .5;
    -ms-filter: "alpha(opacity=calc(100*@wert))";
    -khtml-opacity: .5;
    -moz-opacity: .5
}

ul.listpictures li.gallerypicture a.lightbox {
    background: #232222
}

ul.listpictures li.gallerypicture a.lightbox img.gallpicture {
    transition: opacity .2s ease;
    -moz-transition: opacity .2s ease;
    -webkit-transition: opacity .2s ease;
    -o-transition: opacity .2s ease
}

ul.listpictures li.gallerypicture a.lightbox:hover img.gallpicture {
    opacity: .3;
    -ms-filter: "alpha(opacity=calc(100*@wert))";
    -khtml-opacity: .3;
    -moz-opacity: .3
}

ul.listpictures li.gallerypicture a.lightbox:hover .zoomer {
    display: block;
    color: #fff;
    font-size: 2em
}

.singlepicture,
div.singlepicture {
    margin-left: 0;
    clear: left
}

.singlepicture span.title,
div.singlepicture span.title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: auto;
    padding: 1em 1.3em;
    font-size: 1.4em;
    color: #fff;
    background: #222;
    box-sizing: border-box
}

.singlepicture span.image,
.singlepicture>a.lightbox,
.singlepicture>a.zmartbox,
div.singlepicture span.image,
div.singlepicture>a.lightbox,
div.singlepicture>a.zmartbox {
    float: left;
    width: 100%
}

.singlepicture img.img,
div.singlepicture img.img {
    transition: .15s all ease-in-out;
    -moz-transition: .15s all ease-in-out;
    -webkit-transition: .15s all ease-in-out;
    -o-transition: .15s all ease-in-out;
    float: left;
    max-width: 100%;
    border-radius: var(--var-borderradius)
}

.singlepicture.centering img.img,
div.singlepicture.centering img.img {
    float: none;
    text-align: center
}

.singlepicture span.image video,
.singlepicture span.image video source,
div.singlepicture span.image video,
div.singlepicture span.image video source {
    max-width: 100%;
    height: auto
}

.singlepicture.width100 img.img,
div.singlepicture.width100 img.img {
    width: 100%
}

.singlepicture.width100 video,
.singlepicture.width100 video source,
div.singlepicture.width100 video,
div.singlepicture.width100 video source {
    width: 100%;
    height: auto
}

#content a.singlepicture,
#content>div.singlepicture,
#content>ul.pageContents>li.listpictures a.singlepicture {
    width: calc(100% - (2*var(--var-gap)));
    margin-left: var(--var-gap)
}

a.singlepicture {
    min-height: 8em;
    box-shadow: 0 2px 30px rgba(0, 0, 0, .09)
}

a.singlepicture.centering,
a.singlepicture.noshadow {
    box-shadow: none
}

.swiper.slideshow {
    clear: left;
    padding: 0;
    margin: 0
}

.swiper.slideshow .slide {
    float: left;
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.swiper.slideshow .slide img {
    float: left;
    clear: left;
    width: 100%;
    height: 100%
}

.imageslider,
.imagesliderwrap,
.swiper.slideshow {
    float: left;
    position: relative
}

.cmart.editing .imageslider {
    min-height: 150px
}

.imageslider--default .swiper {
    height: 80vh;
    border-radius: var(--var-borderradius);
    overflow: hidden
}

@media screen and (max-width:1000px) {
    .imageslider--default .swiper {
        height: 55em
    }
}

@media screen and (max-width:600px) {
    .imageslider--default .swiper {
        height: 35em
    }
}

@media screen and (min-width:1500px) {
    .imageslider--default .swiper {
        height: 100vh
    }
}

.imageslider--default .swiper .swiper-slide {
    background: #222;
    height: 100%
}

.imageslider--default .swiper .swiper-slide img,
.imageslider--small .swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -o-object-fit: cover
}

.imageslider--small .mask-pattern {
    width: 80%;
    top: -10%;
    left: 0;
    height: 110%
}

.imageslider--small .swiper .swiper-slide {
    width: 52em;
    height: 41em;
    margin: 0 3em;
    overflow: hidden;
    border-radius: var(--var-borderradius)
}

@media screen and (max-width:1000px) {
    .imageslider--small .swiper .swiper-slide {
        width: 48em;
        height: 38em
    }
}

@media screen and (max-width:767px) {
    .imageslider--small .swiper .swiper-slide {
        width: 40em;
        height: 30em;
        margin: 0;
        padding: 0 1em;
        box-sizing: border-box;
        background: 0 0
    }
}

.imageslider--small .swiper .swiper-slide img {
    border-radius: var(--var-borderradius)
}

.imagesliderwrap {
    width: 100%
}

.editing a.singlepicture,
.editing div.singlepicture,
.imageslider {
    width: 100%
}

.swiper-arrow {
    background: var(--color-black);
    padding: 1.6em;
    transition: .3s all ease;
    z-index: 20
}

@media screen and (max-width:800px) {
    .swiper-arrow {
        padding: 1.2em
    }
}

@media screen and (max-width:600px) {
    .swiper-arrow {
        padding: .8em
    }
}

.swiper-arrow .posthex {
    transition: .3s all ease
}

.swiper-arrow span.icon {
    color: var(--color-accent);
    font-size: 2em;
    line-height: normal;
    z-index: 20;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: .3s all ease
}

@media screen and (max-width:800px) {
    .swiper-arrow span.icon {
        font-size: 1.73em
    }
}

.swiper-arrow:hover,
.swiper-arrow:hover .posthex,
div.linkgrid a.linkcontent:hover .linkarrow .posthex {
    background: var(--color-accent)
}

.swiper-arrow.swiper-button-prev {
    left: 0;
    border-radius: 0 6px 6px 0
}

.swiper-arrow.swiper-button-prev .posthex {
    left: auto;
    right: -6px
}

.swiper-arrow.swiper-button-prev span.icon {
    left: 60%
}

.swiper-arrow.swiper-button-prev:hover span.icon {
    left: 55%
}

.swiper-arrow.swiper-button-next {
    right: 0;
    border-radius: 6px 0 0 6px
}

.swiper-arrow.swiper-button-next span.icon {
    left: 40%
}

.swiper-arrow.swiper-button-next:hover span.icon {
    left: 45%
}

.outsidearrows .swiper-arrow {
    width: 7em;
    background: 0 0
}

.outsidearrows .swiper-arrow .posthex {
    display: none
}

@media screen and (max-width:700px) {
    .outsidearrows .swiper-arrow {
        width: 6em
    }
}

@media screen and (max-width:500px) {
    .outsidearrows .swiper-arrow {
        width: 4em
    }
}

.outsidearrows .swiper-arrow.swiper-button-prev {
    right: 100%;
    left: auto;
    border-radius: 0
}

.outsidearrows .swiper-arrow.swiper-button-next {
    left: 100%;
    right: auto;
    border-radius: 0
}

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

    #content>.imageslider--default,
    #content>.pageContents>li.listpictures .imageslider--default {
        width: 84%;
        margin-left: 8%
    }
}

@media screen and (min-width:1700px) {

    #content>.imageslider--default,
    #content>.pageContents>li.listpictures .imageslider--default {
        width: 68%;
        margin-left: 16%
    }
}

.listediting .mask-pattern,
.listediting .swiper {
    display: none !important
}

#content .blockquote {
    position: relative;
    float: none;
    clear: left;
    box-sizing: border-box;
    display: block;
    width: 90%;
    max-width: 110em;
    margin: 0 auto;
    text-align: center
}

#content .blockquote blockquote {
    padding: 0;
    width: 100%;
    margin: 0;
    font-size: 3.8em;
    line-height: 130%;
    font-family: var(--font-serif);
    color: var(--color-accent);
    text-align: center
}

@media screen and (max-width:1000px) {
    #content .blockquote blockquote {
        font-size: 3.2em
    }
}

@media screen and (max-width:700px) {
    #content .blockquote blockquote {
        font-size: 2.8em
    }
}

#content .blockquote blockquote p,
.counterbubble {
    text-align: center
}

#content .blockquote .blockquote__from {
    display: block;
    margin-top: 1.5em;
    font-weight: 400;
    text-align: center;
    font-size: var(--font-size-h4);
    font-family: var(--font--default);
    line-height: 100%;
    color: var(--color-black);
    text-decoration: none;
    float: left;
    width: 100%
}

div.backgroundbox,
div.backgroundbox .contentbox {
    width: 100%;
    float: left;
    clear: left;
    position: relative;
    min-height: 15em
}

body.cmart.editing div.backgroundbox {
    box-sizing: border-box;
    border: 10px solid green
}

.blogconnections .blogconnections__posts a.bc,
div.linkgrid,
div.linkgrid em.picnumber {
    float: left;
    width: 100%;
    position: relative;
    box-sizing: border-box
}

div.linkgrid {
    clear: left;
    background: 0 0;
    margin: 15px 0
}

div.linkgrid .linkgrid__links {
    float: left;
    position: relative;
    clear: left;
    width: 90%;
    margin-left: 5%;
    height: 75em
}

@media screen and (max-width:1400px) {
    div.linkgrid .linkgrid__links {
        width: 94%;
        margin-left: 3%
    }
}

@media screen and (min-width:1800px) {
    div.linkgrid .linkgrid__links {
        width: 80%;
        margin-left: 10%
    }
}

@media screen and (max-width:1000px) {
    div.linkgrid .linkgrid__links {
        height: 70em
    }
}

@media screen and (max-width:800px) {
    div.linkgrid .linkgrid__links {
        height: auto
    }
}

div.linkgrid em.picnumber {
    font-size: 15px;
    color: #fff;
    position: absolute;
    top: 1em;
    left: 1em;
    background: red;
    padding: .5em .7em;
    display: block;
    border-radius: var(--var-borderradius);
    width: auto;
    z-index: 30
}

div.linkgrid .linkgrid__link {
    position: absolute;
    transition: .16s all ease-in-out;
    -moz-transition: .16s all ease-in-out;
    -webkit-transition: .16s all ease-in-out;
    -o-transition: .16s all ease-in-out
}

@media screen and (max-width:800px) {
    div.linkgrid .linkgrid__link {
        position: relative
    }
}

div.linkgrid .linkgrid__link .linkcontent {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    float: left;
    border-radius: var(--var-borderradius);
    background: #fff
}

div.linkgrid .linkgrid__link strong {
    font-family: var(--font-serif);
    font-size: 3em;
    line-height: normal;
    position: absolute;
    color: #fff;
    text-decoration: none;
    bottom: 1.5em;
    left: 1.5em;
    z-index: 10;
    width: calc(100% - 3em)
}

div.linkgrid .linkgrid__link .bgimage,
div.linkgrid .linkgrid__link img.img {
    width: 100%;
    transition: .35s all ease-in-out;
    -moz-transition: .35s all ease-in-out;
    -webkit-transition: .35s all ease-in-out;
    -o-transition: .35s all ease-in-out;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

div.linkgrid .linkgrid__link:hover .bgimage {
    opacity: .6;
    -ms-filter: "alpha(opacity=calc(100*@wert))";
    -khtml-opacity: .6;
    -moz-opacity: .6;
    transform: scale(1.03)
}

div.linkgrid .link--1,
div.linkgrid .link--2 {
    height: 100%;
    width: calc(50% - 15px);
    top: 0
}

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

    div.linkgrid .link--1,
    div.linkgrid .link--2 {
        width: 100%;
        height: 40em;
        margin-bottom: 30px
    }
}

div.linkgrid .link--1 {
    left: 0
}

@media screen and (max-width:800px) {
    div.linkgrid .link--1 {
        left: auto
    }
}

div.linkgrid .link--1 strong {
    top: auto;
    bottom: 1.5em
}

div.linkgrid .link--2 {
    right: 0
}

@media screen and (max-width:800px) {
    div.linkgrid .link--2 {
        right: auto
    }
}

div.linkgrid .link--3,
div.linkgrid .link--4 {
    height: calc(40% - 15px);
    bottom: 0;
    width: calc(25% - 22.5px)
}

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

    div.linkgrid .link--3,
    div.linkgrid .link--4 {
        width: calc(50% - 15px);
        height: 20em;
        bottom: auto
    }
}

div.linkgrid .link--3 {
    left: 0
}

@media screen and (max-width:800px) {
    div.linkgrid .link--3 {
        left: auto;
        float: left
    }
}

div.linkgrid .link--4 {
    left: calc(25% + 7.5px)
}

@media screen and (max-width:800px) {
    div.linkgrid .link--4 {
        left: auto;
        margin-left: 30px;
        float: right
    }
}

div.linkgrid.images--3 .link--1,
div.linkgrid.images--4 .link--1 {
    height: calc(60% - 15px)
}

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

    div.linkgrid.images--3 .link--1,
    div.linkgrid.images--4 .link--1 {
        height: 30em !important
    }
}

div.linkgrid.images--3 .link--3 {
    width: calc(50% - 15px)
}

@media screen and (max-width:800px) {
    div.linkgrid.images--3 .link--3 {
        width: 100%
    }
}

div.linkgrid.images--3.orderstyle--reverse .link--3,
div.linkgrid.images--4.orderstyle--reverse .link--3 {
    left: calc(50% + 15px)
}

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

    div.linkgrid.images--3.orderstyle--reverse .link--3,
    div.linkgrid.images--4.orderstyle--reverse .link--3 {
        left: auto
    }
}

div.linkgrid.images--3.orderstyle--reverse .link--4,
div.linkgrid.images--4.orderstyle--reverse .link--4 {
    left: auto;
    right: 0
}

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

    div.linkgrid.images--3.orderstyle--reverse .link--4,
    div.linkgrid.images--4.orderstyle--reverse .link--4 {
        left: auto;
        right: auto;
        margin-left: 30px
    }
}

div.linkgrid.images--3.orderstyle--reverse .link--2,
div.linkgrid.images--4.orderstyle--reverse .link--2 {
    height: calc(60% - 15px)
}

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

    div.linkgrid.images--3.orderstyle--reverse .link--2,
    div.linkgrid.images--4.orderstyle--reverse .link--2 {
        height: 30em
    }
}

div.linkgrid.images--3.orderstyle--reverse .link--1,
div.linkgrid.images--4.orderstyle--reverse .link--1 {
    height: 100%
}

div.linkgrid .linkarrow {
    position: absolute;
    bottom: 4em;
    right: 4em;
    height: 4em;
    width: 4em;
    color: #fff;
    text-decoration: none;
    float: left;
    z-index: 20
}

div.linkgrid .linkarrow .posthex {
    background: #fff;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, 0)
}

.blogbubble span.icon-newspaper,
.blogbubble span.icon-posthorn,
div.linkgrid .linkarrow span.icon {
    position: absolute;
    width: 100%;
    text-align: center;
    line-height: normal;
    top: 50%;
    transform: translate(0, -50%)
}

div.linkgrid .linkarrow span.icon {
    font-size: 1.8em;
    color: var(--color-accent)
}

div.linkgrid .linkarrow,
div.linkgrid .linkarrow .linkarrowtext {
    transition: .15s all ease-in-out;
    -moz-transition: .15s all ease-in-out;
    -webkit-transition: .15s all ease-in-out;
    -o-transition: .15s all ease-in-out
}

div.linkgrid .linkarrow .linkarrowtext {
    font-size: 1.7em;
    line-height: normal;
    float: right;
    overflow: hidden;
    width: 0;
    max-width: 0;
    margin-top: 1em;
    margin-right: 3em;
    display: inline-block
}

div.linkgrid.dark {
    background: #232222
}

div.linkgrid.dark .textobj {
    color: #fff
}

.blogpostsheadline h2,
div.linkgrid .listeditor {
    float: left;
    width: 100%
}

div.linkgrid a.linkcontent::after {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: 0 0;
    background: linear-gradient(0deg, rgba(43, 41, 38, .7)0, rgba(43, 41, 38, .15) 100%)
}

div.linkgrid a.linkcontent:hover img.img {
    transform: scale(1.03)
}

div.linkgrid a.linkcontent:hover .linkarrow {
    right: 3em
}

div.blogposts.default {
    float: left;
    position: relative;
    margin-top: 5em;
    display: grid;
    -moz-column-gap: 4em;
    column-gap: 4em;
    grid-template-columns: 1fr 1fr 1fr;
    row-gap: 6em
}

@media screen and (max-width:1000px) {
    div.blogposts.default {
        grid-template-columns: 1fr 1fr
    }
}

@media screen and (max-width:700px) {
    div.blogposts.default {
        grid-template-columns: 1fr
    }
}

div.blogposts.default .blogpost__small {
    box-sizing: border-box;
    padding: 8px;
    position: relative
}

#content .roomrateslist .roompic a.lightbox:hover img.img,
div.blogposts.default .blogpost__small.inactive {
    opacity: .5;
    -ms-filter: "alpha(opacity=calc(100*@wert))";
    -khtml-opacity: .5;
    -moz-opacity: .5
}

div.blogposts.default .blogpost__small .blogpost--card,
div.blogposts.default .blogpost__small .blogpost--text {
    float: left;
    width: 100%;
    position: relative;
    display: block;
    top: 0;
    left: 0;
    overflow: hidden;
    border-radius: 4px
}

div.blogposts.default .blogpost__small .blogpost--card .blogpost__title,
div.blogposts.default .blogpost__small .blogpost--text .blogpost__title {
    font-size: 2.1em;
    color: #fff;
    line-height: 120%;
    width: 100%;
    float: left;
    font-weight: 500
}

div.blogposts.default .blogpost__small .blogpost--card .blogpost__date,
div.blogposts.default .blogpost__small .blogpost--text .blogpost__date {
    font-size: 1.4em;
    color: #888;
    line-height: 120%;
    width: 100%;
    margin-top: .4em;
    float: left
}

div.blogposts.default .blogpost__small .blogpost--card .blogpost__image,
div.blogposts.default .blogpost__small .blogpost--text .blogpost__image {
    float: left;
    width: 100%;
    height: auto;
    min-height: 15em;
    margin-bottom: 3em;
    opacity: .6;
    -ms-filter: "alpha(opacity=calc(100*@wert))";
    -khtml-opacity: .6;
    -moz-opacity: .6
}

div.blogposts.default .blogpost__small:hover .blogpost__image {
    opacity: .9;
    -ms-filter: "alpha(opacity=calc(100*@wert))";
    -khtml-opacity: .9;
    -moz-opacity: .9
}

.editing .blogposts .list {
    margin-top: 3em
}

.editing li.blogpost:hover .cms_editbox {
    display: block
}

#page.blog .blog_editor {
    overflow: visible;
    float: left;
    position: relative;
    width: 100%;
    margin-bottom: 1em
}

#page.blog div.blog_editor.cms_editbox>div {
    font-size: 1em
}

.counterbubble {
    position: absolute;
    top: -.3em;
    right: -.3em;
    color: var(--color-sitebg);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    float: right
}

.counterbubble .number {
    position: absolute;
    font-size: 12px;
    font-weight: 500;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.counterbubble,
a:hover .counterbubble {
    background: var(--color-black)
}

.blogpostsbyhashtags {
    clear: left
}

.blogpostsbyhashtags,
.blogpostsheadline {
    float: left;
    width: 100%;
    position: relative
}

.blogbubble {
    position: absolute;
    top: 90%;
    right: 10%;
    height: 50px;
    width: 50px;
    z-index: 80;
    transition: all .15s ease;
    -moz-transition: all .15s ease;
    -webkit-transition: all .15s ease;
    -o-transition: all .15s ease
}

.blogbubble .posthex {
    transform: translate(-50%, -50%) rotate(30deg);
    background: var(--color-accent);
    transform-origin: 50% 50%;
    top: 50%;
    left: 50%
}

.blogbubble span.icon-newspaper,
.blogbubble span.icon-posthorn {
    font-size: 2.4em;
    left: 0;
    z-index: 20;
    color: #fff
}

.blogbubble.shoutout {
    top: 0;
    transform: rotate(-10deg);
    bottom: auto !important
}

.blogbubble.shoutout .posthex {
    background: var(--color-accent);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0)
}

.blogbubble.shoutout.horizontal--left {
    right: auto !important;
    left: 0 !important
}

.blogbubble.shoutout.horizontal--right {
    right: 0 !important;
    left: auto !important
}

.blogbubble.shoutout.horizontal--center {
    right: auto !important;
    left: 50% !important;
    margin-left: -25px
}

.blogbubble.shoutout.vertical--top {
    bottom: auto !important;
    top: 0 !important
}

.blogbubble.shoutout.vertical--center {
    bottom: auto !important;
    top: 50% !important;
    margin-top: -25px
}

.blogbubble.shoutout.vertical--bottom {
    top: auto !important;
    bottom: 0 !important
}

.blogbubble:hover {
    transform: scale(1.05)
}

.blogbubble:hover .counterbubble {
    background: var(--color-black)
}

.layoutimage .blogbubble {
    left: auto;
    right: -25px;
    top: 50%
}

@media screen and (max-width:1000px) {
    .layoutimage .blogbubble {
        right: -2px
    }
}

.layoutimage .blogbubble.position1 {
    top: 30%;
    right: -25px
}

.layoutimage .blogbubble.position2 {
    top: 50%;
    right: auto;
    left: -25px
}

.layoutimage .blogbubble.position3 {
    top: 20%;
    right: auto;
    left: 10%
}

.layoutimage .blogbubble.position4 {
    bottom: 20%;
    top: auto;
    right: auto;
    left: 10%
}

.layoutimage .blogbubble.position5 {
    top: 20%;
    right: 10%
}

.cover .blogbubble {
    bottom: 15%;
    right: 15%;
    left: auto;
    top: auto
}

.linkgrid__link .blogbubble {
    top: -15px;
    right: -15px;
    left: auto
}

@media screen and (max-width:1000px) {
    .linkgrid__link .blogbubble {
        right: -2px
    }
}

.linkgrid__link .blogbubble.position1 {
    top: 40%
}

.linkgrid__link .blogbubble.position2 {
    top: 70%
}

.linkgrid__link .blogbubble.position3 {
    top: auto;
    bottom: -15px
}

.linkgrid__link .blogbubble.position4 {
    right: 50%
}

.linkgrid__link .blogbubble.position5 {
    top: auto;
    right: 50%;
    bottom: -15px
}

.blogconnections {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: none;
    z-index: 2000
}

.blogconnections.active {
    display: block
}

.blogconnections.active .blogconnections__posts {
    top: 50%;
    opacity: 1;
    -ms-filter: "alpha(opacity=calc(100*@wert))";
    -khtml-opacity: 1;
    -moz-opacity: 1
}

.blogconnections .blogconnections__overlay {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, .34)
}

.blogconnections .blogconnections__posts {
    position: absolute;
    top: 60%;
    transition: .4s all ease;
    left: 50%;
    width: 50em;
    max-width: 80%;
    z-index: 2010;
    padding: 5em;
    background: #fff;
    opacity: 0;
    -ms-filter: "alpha(opacity=calc(100*@wert))";
    -khtml-opacity: 0;
    -moz-opacity: 0;
    box-shadow: 0 5px 80px rgba(0, 0, 0, .14);
    transform: translate(-50%, -50%)
}

@media screen and (max-width:55em) {
    .blogconnections .blogconnections__posts {
        width: 92%;
        padding: 3em;
        max-width: 100%;
        transform: translate(0, 0);
        box-sizing: border-box;
        top: 8%;
        left: 4%
    }
}

.blogconnections .blogconnections__posts h3 {
    margin-bottom: 1.4em;
    width: 100%;
    z-index: 2020;
    text-align: left
}

.blogconnections .blogconnections__posts h3 img {
    height: 2em;
    margin-bottom: -.5em;
    margin-top: -.5em
}

.blogconnections .blogconnections__posts div.textobj {
    width: 100%;
    font-size: 1.9em;
    line-height: 170%;
    margin: 0 0 .5em;
    float: left;
    clear: left;
    font-weight: 500;
    text-align: left
}

.blogconnections .blogconnections__posts a.bc {
    text-align: left;
    padding: 1em 0;
    font-size: 2.1em;
    line-height: 110%;
    text-decoration: none
}

@media screen and (max-width:600px) {
    .blogconnections .blogconnections__posts a.bc {
        font-size: 1.7em;
        padding: .5em
    }
}

.blogconnections .blogconnections__posts a.bc span.icon {
    color: #aaa;
    padding-top: .8em;
    float: right;
    position: absolute;
    right: 1em;
    top: .38em
}

@media screen and (max-width:600px) {
    .blogconnections .blogconnections__posts a.bc span.icon {
        display: none
    }
}

.blogconnections .blogconnections__posts a.bc:last-child {
    border-bottom: 0
}

.blogconnections .obutton {
    margin-top: 1em;
    font-size: 1.75em;
    float: left
}

.blogconnections .blogconnections__close {
    position: absolute;
    font-size: 1.4em;
    color: #aaa;
    text-decoration: none;
    top: 2em;
    right: 2em;
    float: right;
    z-index: 2030
}

.blogconnections__big {
    width: 100%;
    float: left;
    position: relative;
    clear: left;
    box-sizing: border-box;
    text-align: center;
    padding: 5em 3em;
    background: rgba(0, 0, 0, .2);
    height: 40em
}

.blogconnections__big .interesting {
    position: absolute;
    transform: rotate(-20deg);
    left: -3em;
    top: -1em
}

@media screen and (max-width:900px) {
    .blogconnections__big {
        padding: 6em
    }
}

@media screen and (max-width:700px) {
    .blogconnections__big {
        padding: 4em
    }
}

@media screen and (max-width:500px) {
    .blogconnections__big {
        padding: 3em
    }
}

.blogconnections__big h4 {
    text-align: center !important;
    width: 100%
}

.blogconnections__big h4 a {
    float: none;
    text-decoration: none
}

.blogconnections__big .blogconnections__posts {
    float: left;
    width: 100%;
    position: relative;
    height: 20em
}

.blogconnections__big .blogconnections__posts .slick-list,
.blogconnections__big .blogconnections__posts .slick-track {
    height: 100%
}

.blogconnections__big .blogconnections__posts a {
    width: 100%;
    float: left;
    position: relative;
    height: 100%;
    font-size: 2.8em;
    line-height: 120%;
    text-align: center
}

@media screen and (min-width:1500px) {
    .blogconnections__big .blogconnections__posts a {
        font-size: 3.8em
    }
}

.blogconnections__big .blogconnections__posts a strong {
    font-weight: 400;
    width: 100%;
    box-sizing: border-box;
    padding: 0 .5em;
    float: left;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

@media screen and (min-width:1500px) {
    .blogconnections__big .blogconnections__posts a strong {
        padding: 0 1em
    }
}

.blogconnections__newspaper,
.blogconnext__wrap {
    position: relative;
    clear: left;
    float: left;
    width: 100%
}

.blogconnections__newspaper {
    width: 76%;
    margin-left: 12%
}

@media screen and (max-width:800px) {
    .blogconnections__newspaper {
        width: 84%;
        margin-left: 8%
    }
}

@media screen and (min-width:1700px) {
    .blogconnections__newspaper {
        width: 68%;
        margin-left: 16%
    }
}

.blogconnections__newspaper .blogconnections__posts {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

.blogconnections__newspaper .blogconnections__posts .moremore {
    display: none
}

@media screen and (max-width:900px) {
    .blogconnections__newspaper .blogconnections__posts .moremore {
        display: inline-block;
        margin-top: 3.5em
    }
}

@media screen and (max-width:600px) {
    .blogconnections__newspaper .blogconnections__posts .moremore {
        margin-top: 1em
    }
}

.blogconnections__newspaper .blogconnections__posts .intro,
.blogconnections__newspaper .blogconnections__posts .newspaperlink {
    width: 30%;
    text-decoration: none
}

@media screen and (max-width:900px) {
    .blogconnections__newspaper .blogconnections__posts .newspaperlink {
        width: 45%
    }
}

@media screen and (max-width:600px) {
    .blogconnections__newspaper .blogconnections__posts .newspaperlink {
        width: 100%;
        margin-bottom: 4em
    }
}

.blogconnections__newspaper .blogconnections__posts .newspaperlink em,
.blogconnections__newspaper .blogconnections__posts .newspaperlink strong {
    float: left;
    clear: left;
    position: relative;
    width: 100%;
    display: inline-block
}

.blogconnections__newspaper .blogconnections__posts .newspaperlink img {
    float: left;
    width: 100%;
    clear: left;
    position: relative;
    min-height: 30em;
    -o-object-fit: cover;
    object-fit: cover
}

.blogconnections__newspaper .blogconnections__posts .newspaperlink strong {
    margin-top: 1em;
    font-size: 2.2em;
    line-height: 120%
}

.blogconnections__newspaper .blogconnections__posts .newspaperlink em {
    margin-top: .69em;
    font-size: 1.5em;
    line-height: 150%;
    font-style: normal
}

@media screen and (max-width:600px) {
    .blogconnections__newspaper .blogconnections__posts .newspaperlink em {
        display: none
    }
}

@media screen and (min-width:1200px) {
    .blogconnections__newspaper .blogconnections__posts .newspaperlink {
        margin-top: 5em
    }

    .blogconnections__newspaper .blogconnections__posts .newspaperlink:nth-child(3) {
        margin-top: -3em
    }
}

.blogconnections__newspaper .blogconnections__posts .intro a.obutton {
    margin-top: 1em
}

.blogconnections__newspaper .blogconnections__posts .intro h2 {
    margin-bottom: .5em
}

@media screen and (max-width:900px) {
    .blogconnections__newspaper .blogconnections__posts .intro {
        width: 100%;
        margin-bottom: 6em
    }

    .blogconnections__newspaper .blogconnections__posts .intro a.obutton {
        display: none
    }
}

div.layout {
    width: 100%;
    float: left;
    clear: left;
    position: relative
}

div.innercenter div.layout,
div.template_inner div.layout {
    width: 100%;
    margin-left: 0;
    padding-left: 0;
    padding-right: 0
}

div.layout--imageleft-textright .layoutwrap,
div.layout--imageright-textleft .layoutwrap {
    width: 76%;
    margin-left: 12%;
    display: flex;
    align-items: center;
    min-height: 10em;
    position: relative;
    justify-content: space-between
}

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

    div.layout--imageleft-textright .layoutwrap,
    div.layout--imageright-textleft .layoutwrap {
        width: 84%;
        margin-left: 8%
    }
}

@media screen and (min-width:1700px) {

    div.layout--imageleft-textright .layoutwrap,
    div.layout--imageright-textleft .layoutwrap {
        width: 68%;
        margin-left: 16%
    }
}

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

    div.layout--imageleft-textright .layoutwrap,
    div.layout--imageright-textleft .layoutwrap {
        display: block;
        float: left
    }
}

div.layout--imageleft-textright.paddingtopbottom .layoutwrap,
div.layout--imageright-textleft.paddingtopbottom .layoutwrap {
    padding: 12em 0
}

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

    div.layout--imageleft-textright,
    div.layout--imageright-textleft {
        display: block
    }
}

.cmartlottieplay,
div.layout--imageleft-textright .layoutimage,
div.layout--imageleft-textright .layouttext,
div.layout--imageright-textleft .layoutimage,
div.layout--imageright-textleft .layouttext {
    position: relative
}

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

    div.layout--imageleft-textright .layoutimage,
    div.layout--imageleft-textright .layouttext,
    div.layout--imageright-textleft .layoutimage,
    div.layout--imageright-textleft .layouttext {
        float: left;
        clear: left
    }
}

div.layout--imageleft-textright .layouttext,
div.layout--imageright-textleft .layouttext {
    width: 42%;
    margin-left: 5%
}

div.layout--imageleft-textright .layouttext>h2,
div.layout--imageright-textleft .layouttext>h2 {
    width: 110%
}

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

    div.layout--imageleft-textright .layouttext>h2,
    div.layout--imageright-textleft .layouttext>h2 {
        width: 100%
    }
}

div.layout--imageleft-textright .layouttext .showmoretext,
div.layout--imageright-textleft .layouttext .showmoretext {
    display: inline
}

div.layout--imageleft-textright .layouttext .showlesstext,
div.layout--imageright-textleft .layouttext .showlesstext {
    display: none
}

div.layout--imageleft-textright .layouttext .moreorless,
div.layout--imageleft-textright .layouttext.showmore .showlesstext,
div.layout--imageleft-textright .layouttext.showmore div.moretext,
div.layout--imageright-textleft .layouttext .moreorless,
div.layout--imageright-textleft .layouttext.showmore .showlesstext,
div.layout--imageright-textleft .layouttext.showmore div.moretext {
    display: inline
}

div.layout--imageleft-textright .layouttext .moreorless a,
div.layout--imageright-textleft .layouttext .moreorless a {
    color: var(--color-text);
    text-decoration: none;
    transition: .14s all ease
}

div.layout--imageleft-textright .layouttext .moreorless a span,
div.layout--imageright-textleft .layouttext .moreorless a span {
    font-size: .7em;
    display: inline-block;
    padding-left: .4em;
    padding-top: .12em
}

div.layout--imageleft-textright .layouttext .moretext,
div.layout--imageleft-textright .layouttext.showmore .showmoretext,
div.layout--imageright-textleft .layouttext .moretext,
div.layout--imageright-textleft .layouttext.showmore .showmoretext {
    display: none
}

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

    div.layout--imageleft-textright .layouttext,
    div.layout--imageright-textleft .layouttext {
        width: 90%
    }
}

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

    div.layout--imageleft-textright .layouttext,
    div.layout--imageright-textleft .layouttext {
        width: 100%;
        margin: 0
    }
}

div.layout--imageleft-textright .layoutimage,
div.layout--imageright-textleft .layoutimage {
    width: 42%
}

div.layout--imageleft-textright .layoutimage .mask-pattern,
div.layout--imageright-textleft .layoutimage .mask-pattern {
    width: 102%
}

div.layout--imageleft-textright .layoutimage .button,
div.layout--imageright-textleft .layoutimage .button {
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 15
}

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

    div.layout--imageleft-textright .layoutimage,
    div.layout--imageright-textleft .layoutimage {
        width: 50%;
        margin: 0 25%
    }
}

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

    div.layout--imageleft-textright .layoutimage,
    div.layout--imageright-textleft .layoutimage {
        width: 80%;
        margin-left: 10%;
        margin-right: 10%
    }
}

div.layout--imageleft-textright .layoutimage .maskimage,
div.layout--imageright-textleft .layoutimage .maskimage {
    float: left;
    position: relative;
    width: 100%;
    opacity: 0;
    -ms-filter: "alpha(opacity=calc(100*@wert))";
    -khtml-opacity: 0;
    -moz-opacity: 0;
    z-index: -1
}

div.layout--imageleft-textright .layoutimage .image,
div.layout--imageright-textleft .layoutimage .image {
    width: 100%;
    z-index: 10;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    height: 100%
}

div.layout--imageleft-textright .layoutimage .image img.img,
div.layout--imageright-textleft .layoutimage .image img.img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0
}

div.layout--imageleft-textright .layoutimage .image--bg,
div.layout--imageright-textleft .layoutimage .image--bg {
    z-index: 5;
    width: calc(100% + 7em);
    height: calc(100% - 14em);
    border-radius: 8px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.sitenavigation a.icon,
div.layout--imageleft-textright .layoutimage .title,
div.layout--imageright-textleft .layoutimage .title {
    display: none
}

div.layout--imageleft-textright .layoutimage img,
div.layout--imageright-textleft .layoutimage img {
    max-width: 100%;
    border-radius: 10px
}

div.layout--imageleft-textright.doubleimage .image.main,
div.layout--imageright-textleft.doubleimage .image.main {
    box-shadow: 0 0 30px rgba(0, 0, 0, .14)
}

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

    div.layout--imageleft-textright.imageabsolute .layoutwrap,
    div.layout--imageright-textleft.imageabsolute .layoutwrap {
        padding-bottom: 60em
    }
}

div.layout--imageleft-textright.imageabsolute .layoutimage,
div.layout--imageright-textleft.imageabsolute .layoutimage {
    position: absolute;
    height: 100%;
    top: 0;
    right: 0;
    width: 45%;
    border-radius: 10px
}

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

    div.layout--imageleft-textright.imageabsolute .layoutimage,
    div.layout--imageright-textleft.imageabsolute .layoutimage {
        height: 50em;
        right: 10%;
        top: auto;
        width: 80%;
        margin: 0;
        bottom: 0
    }
}

div.layout--imageleft-textright.imageabsolute .layoutimage .image,
div.layout--imageright-textleft.imageabsolute .layoutimage .image {
    position: absolute;
    height: 100%;
    width: 100%
}

div.layout--imageleft-textright.imageabsolute .layoutimage .image .bgimage,
div.layout--imageleft-textright.imageabsolute .layoutimage .image img.img,
div.layout--imageright-textleft.imageabsolute .layoutimage .image .bgimage,
div.layout--imageright-textleft.imageabsolute .layoutimage .image img.img {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    background-size: cover;
    background-position: center center
}

div.layout--imageleft-textright.imageabsolute .layoutimage .image--bg,
div.layout--imageright-textleft.imageabsolute .layoutimage .image--bg {
    width: calc(100% + 7em);
    height: calc(100% - 14em)
}

div.layout--imageleft-textright.imageabsolute.imageoverlap .layoutimage,
div.layout--imageright-textleft.imageabsolute.imageoverlap .layoutimage {
    height: calc(100% + 10em);
    top: -5em
}

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

    div.layout--imageleft-textright.imageabsolute.imageoverlap .layoutimage,
    div.layout--imageright-textleft.imageabsolute.imageoverlap .layoutimage {
        height: 50em;
        top: auto;
        bottom: -5em
    }
}

div.layout--imageleft-textright.headlineoverlap .layouttext>h2,
div.layout--imageright-textleft.headlineoverlap .layouttext>h2 {
    margin-top: -.55em
}

div.layout--imageleft-textright.headlineoverlap.paddingtopbottom .layoutwrap,
div.layout--imageright-textleft.headlineoverlap.paddingtopbottom .layoutwrap {
    padding-top: 0
}

div.layout.layout--imageleft-textright .layouttext {
    margin-left: 0;
    margin-right: 5%
}

@media screen and (max-width:900px) {
    div.layout.layout--imageleft-textright .layouttext {
        margin-top: 8em !important
    }
}

div.layout.layout--imageleft-textright.imageabsolute .layoutimage {
    right: auto;
    left: 0
}

@media screen and (max-width:900px) {
    div.layout.layout--imageleft-textright.imageabsolute .layoutimage {
        left: 10%;
        right: auto
    }
}

div.layout.layout--imageleft-textright.imageabsolute .layouttext {
    float: right;
    margin-left: 60%
}

@media screen and (max-width:900px) {
    div.layout.layout--imageleft-textright.imageabsolute .layouttext {
        width: 100%;
        margin-left: 0;
        float: left
    }

    div.layout--imageright-textleft .layoutimage {
        margin-top: 8em !important
    }
}

div.layout--text-2cols .layoutinner {
    position: relative;
    max-width: var(--var-content-max-width-wide);
    margin: 0 auto;
    justify-content: space-between;
    display: flex
}

@media screen and (max-width:800px) {
    div.layout--text-2cols .layoutinner {
        display: block
    }
}

div.layout--text-2cols .layoutheadline {
    position: relative;
    width: 45%;
    clear: left
}

div.layout--text-2cols .layoutheadline h2,
div.layout--text-2cols .layoutheadline h3 {
    margin-bottom: 0
}

@media screen and (max-width:750px) {
    div.layout--text-2cols .layoutheadline {
        width: 80%
    }

    div.layout--text-2cols .layoutheadline h2,
    div.layout--text-2cols .layoutheadline h3 {
        white-space: normal;
        margin-bottom: .5em
    }
}

@media screen and (max-width:600px) {
    div.layout--text-2cols .layoutheadline {
        width: 100%
    }
}

div.layout--text-2cols .layouttext {
    position: relative;
    width: 48%;
    margin-top: 1.88em
}

@media screen and (max-width:750px) {
    div.layout--text-2cols .layouttext {
        width: 75%
    }
}

@media screen and (max-width:500px) {
    div.layout--text-2cols .layouttext {
        width: 100%
    }
}

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

    div.layout--text-2cols .layoutheadline,
    div.layout--text-2cols .layouttext {
        width: 100%;
        clear: left;
        float: left
    }
}

div.layout--text-2cols.withimage .layoutinner {
    max-width: var(--var-content-max-width)
}

div.layout--text-2cols.withimage .illustration {
    position: absolute;
    min-width: 7em;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 18%
}

@media screen and (max-width:800px) {
    div.layout--text-2cols.withimage .illustration {
        transform: translate(0, 0);
        top: 1em;
        left: 0;
        max-width: 1000px;
        width: 10em
    }
}

div.layout--text-2cols.withimage .illustration img {
    max-width: 100%
}

div.layout--text-2cols.withimage .layoutheadline {
    width: 38%
}

div.layout--text-2cols.withimage .layouttext {
    width: 35%
}

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

    div.layout--text-2cols.withimage .layoutheadline,
    div.layout--text-2cols.withimage .layouttext {
        width: calc(100% - 12em);
        margin-left: 12em;
        clear: left;
        float: left
    }
}

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

    div.layout--text-2cols.withimage .layoutheadline,
    div.layout--text-2cols.withimage .layouttext {
        width: 100%;
        margin-left: 0;
        clear: left;
        float: left
    }

    div.layout--text-2cols.withimage .layoutheadline {
        margin-top: 15em
    }

    div.layout--text-2cols.withimage .illustration {
        top: 0;
        left: 50%;
        width: 15em;
        margin-left: -7.5em;
        max-height: 12em
    }
}

.cmartlottieplay {
    width: 100%;
    min-height: 8em;
    margin: 0 auto
}

.cmartlottieplay.ClockWhite {
    max-width: 10em
}

.cmartlottieplay.MyFavoriteDrinkIsTheNextOne {
    max-width: 400px
}

#content .rooms {
    clear: left;
    width: 100%
}

.roomslider .swiper .swiper-slide {
    width: auto;
    margin-right: var(--var-gap)
}

.rooms .room {
    border-radius: var(--var-borderradius);
    overflow: hidden;
    background: #eae6e0;
    max-width: 50em
}

#content .reviews .review .content>div,
.rooms .room,
.rooms .room .room__image {
    width: 100%;
    float: left;
    clear: left
}

#content .rooms,
#content div.roomaccordions,
.rooms .room .room__image a {
    float: left;
    position: relative
}

.rooms .room .room__image a img {
    float: left;
    width: 100%;
    border-radius: var(--var-borderradius) var(--var-borderradius)0 0
}

.rooms .room .room__content,
.sitenavigation {
    float: left;
    width: 100%;
    box-sizing: border-box;
    padding: 3em 3em 6em;
    position: relative
}

.rooms .room h3 {
    margin-bottom: 0;
    text-align: center
}

.rooms .room .roomfacts {
    width: 100%;
    float: left;
    clear: left;
    margin: 3em 0
}

.rooms .room .roombuttons a,
.rooms .room .roomfacts>span {
    float: left;
    width: 50%;
    position: relative;
    font-size: 1.8em;
    text-align: center;
    line-height: normal
}

.rooms .room .roomfacts>span .alt {
    opacity: .5
}

.rooms .room .roomfacts .icon-person+.icon-person {
    padding-left: .1em
}

.rooms .room .roombuttons {
    width: 100%;
    float: left;
    position: absolute;
    bottom: 0;
    left: 0
}

.rooms .room .roombuttons a {
    width: 30%;
    padding: .9em 0;
    color: var(--color-black);
    font-size: 1.7em
}

.rooms .room .roombuttons a.booking {
    width: 30%;
    margin-left: 10%;
    background: var(--color-accent);
    color: var(--color-black);
    border-radius: var(--var-borderradius)0 var(--var-borderradius)0
}

.rooms .room .roombuttons a.booking:hover {
    text-decoration: none;
    background: var(--color-black);
    color: var(--color-accent)
}

.rooms .room+.room {
    margin-top: 3em
}

.sitenavigation {
    border: 1px solid var(--color-beige);
    border-width: 1px 0;
    padding: .2em 3em;
    display: flex;
    justify-content: space-evenly
}

@media screen and (max-width:1100px) {
    .sitenavigation {
        display: block
    }
}

.sitenavigation a {
    font-size: 1.6em;
    padding: .5em 0 .7em;
    line-height: normal;
    color: var(--color-text);
    text-decoration: none
}

.roomlinks a:hover .icon,
.roomlinks a:hover .title,
.sitenavigation a.active {
    color: var(--color-black)
}

.sitenavigation div.actions {
    position: absolute;
    top: 0;
    right: 0;
    width: auto !important;
    float: right;
    z-index: 20
}

.sitenavigation a.icon {
    padding: .8em 1.2em;
    color: var(--color-accent);
    float: right
}

@media screen and (max-width:1100px) {
    .sitenavigation>a {
        display: none;
        width: 100%;
        clear: left;
        text-align: center
    }

    .sitenavigation.active {
        padding-top: 3.8em
    }

    .sitenavigation.active a.icon.enlarger {
        display: none
    }

    .sitenavigation a.enlarger,
    .sitenavigation.active a.icon.closer,
    .sitenavigation.active>a,
    .sitenavigation>a.active {
        display: block
    }

    .sitenavigation.active a.active {
        position: absolute;
        top: .2em;
        left: 0
    }
}

div.cover .sitenavigation {
    z-index: 50;
    border-radius: 0;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    background: rgba(0, 0, 0, .3);
    position: absolute;
    top: 0;
    left: 0
}

div.cover .sitenavigation>a {
    color: #ccc
}

#content .roomtemplate .roominfos li:hover:before,
#content .roomtemplate .singleheadline h1,
div.cover .sitenavigation>a.active {
    color: #fff
}

#content .roomtemplate,
.roomaccordions,
.roomlinks {
    margin-left: calc(var(--var-naviborder-side)/2);
    width: calc(100% - var(--var-naviborder-side))
}

#content div.roomaccordions {
    clear: left
}

#content .roomrateslist ul.listinfos,
#content div.roomaccordions ul.listinfos {
    max-width: none;
    margin: 0
}

#content .roomrateslist ul.listinfos li.accordion,
#content div.roomaccordions ul.listinfos li.accordion {
    padding: 0;
    margin-top: 1em;
    border: 0
}

#content div.roomaccordions ul.listinfos li.accordion a.accordion__title {
    background: var(--color-black);
    color: #fff;
    width: 100%;
    box-sizing: border-box;
    padding: 1em 10%;
    border-radius: var(--var-borderradius)
}

@media screen and (max-width:1400px) {
    #content div.roomaccordions ul.listinfos li.accordion a.accordion__title {
        padding-left: 7%;
        padding-right: 7%
    }
}

#content .roomrateslist ul.listinfos li.accordion a.accordion__title span.icon,
#content div.roomaccordions ul.listinfos li.accordion a.accordion__title span.icon {
    position: relative;
    top: auto;
    right: auto;
    float: right;
    transform: translate(0, 0)
}

#content .roomrateslist ul.listinfos li.accordion a.accordion__title span.icon.accordion__icon,
#content div.roomaccordions ul.listinfos li.accordion a.accordion__title span.icon.accordion__icon {
    padding: .2em
}

#content div.roomaccordions ul.listinfos li.accordion div.accordion__content {
    width: 76%;
    margin-left: 12%;
    margin-bottom: 5em;
    margin-top: 4em
}

@media screen and (max-width:800px) {
    #content div.roomaccordions ul.listinfos li.accordion div.accordion__content {
        width: 84%;
        margin-left: 8%
    }
}

@media screen and (min-width:1700px) {
    #content div.roomaccordions ul.listinfos li.accordion div.accordion__content {
        width: 68%;
        margin-left: 16%
    }
}

#content div.roomaccordions ul.listinfos li.accordion.active a.accordion__title,
#content div.roomaccordions ul.listinfos li.accordion.active a.accordion__title:hover {
    color: var(--color-black);
    background: 0 0
}

#content .roomrateslist ul.listinfos li.accordion+li.accordion,
#content div.roomaccordions ul.listinfos li.accordion+li.accordion {
    border: 0;
    padding: 0
}

#content .roomtemplate {
    float: left;
    clear: left;
    background: var(--color-black);
    margin-top: calc(var(--var-naviborder)/2);
    border-radius: var(--var-borderradius)
}

#content .roomtemplate .singleheadline img {
    padding-bottom: 5em
}

#content .roomtemplate .imagesliderwrap {
    width: calc(100% + 10em);
    margin-left: -5em
}

@media screen and (max-width:700px) {
    #content .roomtemplate .imagesliderwrap {
        width: calc(100% + (var(--var-naviborder-side)));
        margin-left: calc(var(--var-naviborder-side)/2*-1)
    }
}

#content .roomtemplate .roomfacts {
    margin-bottom: 12em
}

#content .roomtemplate .roomfacts>div {
    width: 20em;
    display: inline-block;
    font-size: 2em;
    line-height: 120%;
    color: #fff
}

@media screen and (max-width:950px) {
    #content .roomtemplate .roomfacts>div {
        width: 40%;
        font-size: 1.7em
    }
}

#content .roomtemplate .roomfacts>div span.alt {
    color: var(--color-text)
}

#content .roomtemplate .roomfacts,
.roombuttons {
    width: 100%;
    float: left;
    clear: left;
    text-align: center
}

.roombuttons a.booking {
    margin-left: 2em
}

.roomlinks,
.roomlinks a {
    float: left;
    position: relative
}

.roomlinks {
    clear: left
}

.roomlinks a {
    margin-top: 1em;
    border-radius: var(--var-borderradius);
    width: calc(50% - .5em);
    padding: 2em 4em;
    line-height: normal;
    box-sizing: border-box;
    text-decoration: none;
    background: var(--color-black)
}

.roomlinks a:nth-child(2n) {
    float: right
}

@media screen and (max-width:800px) {
    .roomlinks a {
        width: 100%;
        float: left !important;
        clear: left
    }
}

.roomlinks a .title {
    font-size: 2.4em;
    font-family: var(--font-serif);
    color: var(--color-sitebg);
    float: left
}

.roomlinks a .icon {
    float: right;
    color: var(--color-accent);
    font-size: 1.8em;
    padding: .2em 0
}

.roomlinks a:hover {
    background: var(--color-accent)
}

#content .roomtemplate .roomaccordions {
    float: left;
    clear: left;
    width: 100%;
    position: relative;
    margin-top: var(--var-gap)
}

.cmart.editing .roomcontents {
    border: 10px solid var(--color-accent)
}

#content .roomrateslist {
    min-height: 15em
}

#content .roomrateslist .pricelist__pricerow {
    width: 100%;
    float: left;
    clear: left;
    position: relative;
    padding: 1em 0
}

#content .roomrateslist .pricelist__pricerow+.pricelist__pricerow,
#content .roomrateslist ul.listinfos li.accordion div.accordion__content .roombuttons {
    border-top: 1px solid var(--color-beige)
}

#content .roomrateslist .pricelist__pricerow .dates {
    float: left;
    font-size: 1.7em;
    line-height: normal
}

#content .roomrateslist .pricelist__pricerow .price {
    font-size: 1.7em;
    line-height: normal
}

#content .roomrateslist .pricelist__pricerow .dates {
    width: 65%
}

#content .roomrateslist .pricelist__pricerow .price {
    float: right;
    width: 34%;
    text-align: right
}

#content .roomrateslist .roompic {
    float: left;
    width: 100%;
    margin-bottom: 3em
}

#content .roomrateslist .roompic a.lightbox {
    float: left;
    position: relative;
    clear: left;
    border-radius: var(--var-borderradius);
    background: var(--color-black);
    width: 100%
}

#content .roomrateslist .roompic a.lightbox img {
    float: left;
    width: 100%;
    border-radius: var(--var-borderradius);
    transition: .2s all ease
}

#content .roomrateslist .roompic a.lightbox .zoomer {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 4.5em;
    width: 4.5em;
    transition: .2s all ease
}

#content .roomrateslist .roompic a.lightbox .zoomer .posthex {
    left: 50%;
    top: 0;
    transform: translate(-50%, 0);
    background: var(--color-accent);
    transition: .2s all ease
}

#content .roomrateslist .roompic a.lightbox .zoomer .icon,
#reviewus {
    color: #fff;
    font-size: 1.8em;
    line-height: normal;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

#content .roomrateslist .roompic a.lightbox:hover .zoomer {
    top: 48%
}

#content .roomrateslist ul.listinfos li.accordion a.accordion__title {
    background: var(--color-black);
    padding: 1em 1.4em;
    color: #fff;
    transition: .14s all ease;
    border-radius: var(--var-borderradius)
}

#content .roomrateslist ul.listinfos li.accordion a.accordion__title:hover {
    background: var(--color-accent);
    color: var(--color-black)
}

#content .roomrateslist ul.listinfos li.accordion a.accordion__title:hover span.icon {
    color: var(--color-black)
}

#content .roomrateslist ul.listinfos li.accordion div.accordion__content {
    box-sizing: border-box;
    padding: 1em 4em 4em
}

#content .roomrateslist ul.listinfos li.accordion div.accordion__content .roombuttons a.enquire,
#content .roomrateslist ul.listinfos li.accordion div.accordion__content .roombuttons a.overview {
    float: left;
    width: 100%;
    clear: left;
    position: relative;
    border-bottom: 1px solid var(--color-beige);
    font-size: 1.7em;
    line-height: normal;
    padding: .8em 0;
    text-align: left;
    transition: .15s all ease
}

#content .roomrateslist ul.listinfos li.accordion div.accordion__content .roombuttons a.enquire .icon,
#content .roomrateslist ul.listinfos li.accordion div.accordion__content .roombuttons a.overview .icon {
    float: right
}

#content .roomrateslist ul.listinfos li.accordion div.accordion__content .roombuttons a.enquire {
    margin-bottom: 1em
}

#content .reviews .review,
#content .roomrateslist ul.listinfos li.accordion.active {
    background: #fff;
    border-radius: var(--var-borderradius)
}

#content .roomrateslist ul.listinfos li.accordion.active a.accordion__title,
#content .roomrateslist ul.listinfos li.accordion.active a.accordion__title:hover {
    color: var(--color-black);
    background: 0 0
}

#content .defaultreviews,
#content .reviews {
    float: left;
    position: relative;
    box-sizing: border-box
}

#content .reviews {
    width: 80%;
    margin-left: 10%
}

#content .reviews .review {
    float: left;
    width: 30em;
    margin: .9%;
    position: relative
}

#content .reviews .review .content {
    width: 100%;
    box-sizing: border-box;
    padding: 3em 2em;
    float: left;
    text-align: center
}

#content .reviews .review .content .review__source,
#content .reviews .review .content .review__text {
    font-size: 1.45em;
    line-height: 160%;
    text-align: center
}

#content .reviews .review .content .review__headline {
    text-align: center;
    font-size: var(--font-size-h3);
    font-family: var(--font-serif);
    line-height: 110%;
    font-weight: 400;
    color: var(--color-black);
    font-size: 2.4em;
    margin-bottom: .5em
}

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

    #content .reviews .review .content .review__headline br,
    #content .reviews .review .content .review__headline br:after {
        content: " "
    }
}

#content .reviews .review .content .review__stars {
    font-size: 1.3em;
    margin-top: .5em;
    line-height: normal
}

#content .reviews .review .content .review__stars em {
    font-style: normal;
    text-transform: capitalize
}

#content .reviews .review .content div.review__source {
    margin-bottom: 0;
    font-size: 2em
}

#content .reviewswiper .review {
    width: 100%;
    float: left;
    background: 0 0;
    height: 40em;
    position: relative
}

#content .reviewswiper .review .content {
    position: absolute;
    text-align: center;
    top: 50%;
    left: 10%;
    width: 80%;
    transform: translate(0, -50%)
}

@media screen and (max-width:700px) {
    #content .reviewswiper .review .content {
        width: 100%;
        left: 0
    }
}

#content .defaultreviews {
    width: 100%
}

#content .defaultreviews p {
    width: 100%;
    float: left;
    text-align: left
}

#content .defaultreviews p img {
    width: 10em;
    max-width: 50%
}

#content .defaultreviews .review {
    float: left;
    width: 100%;
    position: relative;
    margin-bottom: 4em
}

#content .defaultreviews .review .content,
.reviewbadges {
    position: relative;
    width: 100%;
    max-width: 50em
}

#content .defaultreviews .review .content>div {
    width: 100%;
    float: left;
    clear: left;
    margin-bottom: 1em
}

#content .defaultreviews .review .content div.review__headline {
    font-size: var(--font-size-h3);
    font-family: var(--font-serif);
    line-height: 110%;
    font-weight: 400;
    color: var(--color-black)
}

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

    #content .defaultreviews .review .content div.review__headline br,
    #content .defaultreviews .review .content div.review__headline br:after {
        content: " "
    }
}

#content .defaultreviews .review .content .review__source,
#content .defaultreviews .review .content .review__text {
    font-size: var(--var-default-fontsize);
    line-height: var(--var-default-lineheight);
    line-height: 160%;
    color: #555
}

#content .defaultreviews .review .content .review__stars {
    font-size: 1.5em;
    line-height: normal;
    float: left;
    padding-right: 1em
}

#content .defaultreviews .review .content div.review__source {
    margin-bottom: 0;
    font-size: 2em
}

#content .template.default .defaultreviews {
    display: flex;
    gap: 50px;
    flex-wrap: wrap;
    justify-content: center
}

#content .template.default .defaultreviews .review {
    width: 40em;
    box-sizing: border-box;
    margin-bottom: 0;
    padding: 5em;
    background: rgba(255, 255, 255, .5);
    max-width: 100%
}

#content .template.default .defaultreviews .review .content {
    max-width: 1000em
}

@media screen and (max-width:800px) {
    #content .template.default .defaultreviews .review {
        width: 100%;
        clear: left
    }
}

.reviewbadges {
    clear: left;
    float: none;
    text-align: center;
    display: inline-block;
    padding: 1em 1.5em;
    width: auto;
    border-radius: 5px;
    margin: 0 auto;
    max-width: 70em
}

.reviewbadges a {
    display: inline-block;
    padding: 2em
}

.reviewbadges a img {
    height: 2.8em
}

#reviewus {
    float: left;
    font-size: 1.7em;
    top: 0;
    transform: translate(-50%, -100%);
    padding: .7em 1em;
    border-radius: 9px 9px 0 0;
    white-space: nowrap
}

@media screen and (max-width:600px) {
    #reviewus {
        white-space: normal
    }
}

.fancybox-active {
    height: auto
}

.fancybox-is-hidden {
    left: -9999px;
    margin: 0;
    position: absolute !important;
    top: -9999px;
    visibility: hidden
}

.fancybox-container {
    backface-visibility: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    height: 100%;
    left: 0;
    position: fixed;
    -webkit-tap-highlight-color: transparent;
    top: 0;
    transform: translateZ(0);
    width: 100%;
    z-index: 99992
}

.fancybox-container * {
    box-sizing: border-box
}

.fancybox-bg,
.fancybox-inner,
.fancybox-outer,
.fancybox-stage {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0
}

.fancybox-outer {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto
}

.fancybox-bg {
    background: #232222;
    opacity: 0;
    transition-duration: inherit;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(.47, 0, .74, .71)
}

.fancybox-is-open .fancybox-bg {
    opacity: .87;
    transition-timing-function: cubic-bezier(.22, .61, .36, 1)
}

.fancybox-caption,
.fancybox-infobar,
.fancybox-toolbar {
    opacity: 0;
    position: absolute
}

.fancybox-caption,
.fancybox-infobar,
.fancybox-navigation .fancybox-button,
.fancybox-toolbar {
    direction: ltr;
    transition: opacity .25s, visibility 0s linear .25s;
    visibility: hidden;
    z-index: 99997
}

.fancybox-show-caption .fancybox-caption,
.fancybox-show-infobar .fancybox-infobar,
.fancybox-show-toolbar .fancybox-toolbar {
    opacity: 1;
    transition: opacity .25s, visibility 0s;
    visibility: visible
}

.fancybox-show-nav .fancybox-navigation .fancybox-button {
    opacity: 1;
    visibility: visible
}

.fancybox-infobar {
    color: #ccc;
    font-size: 13px;
    -webkit-font-smoothing: subpixel-antialiased;
    height: 44px;
    left: 0;
    line-height: 44px;
    min-width: 44px;
    mix-blend-mode: difference;
    padding: 0 10px;
    pointer-events: none;
    text-align: center;
    top: 0;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.fancybox-toolbar {
    right: 0;
    top: 0
}

.fancybox-stage {
    direction: ltr;
    overflow: visible;
    -webkit-transform: translate3d(0, 0, 0);
    z-index: 99994
}

.fancybox-is-open .fancybox-stage {
    overflow: hidden
}

.fancybox-slide {
    backface-visibility: hidden;
    display: none;
    height: 100%;
    left: 0;
    outline: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 44px;
    position: absolute;
    text-align: center;
    top: 0;
    transition-property: transform, opacity;
    white-space: normal;
    width: 100%;
    z-index: 99994
}

.fancybox-slide::before {
    content: "";
    display: inline-block;
    height: 100%;
    margin-right: -.25em;
    vertical-align: middle;
    width: 0
}

.fancybox-is-sliding .fancybox-slide,
.fancybox-slide--current,
.fancybox-slide--next,
.fancybox-slide--previous {
    display: block
}

.fancybox-slide--next {
    z-index: 99995
}

.fancybox-slide--image {
    overflow: visible;
    padding: 44px 0
}

.fancybox-slide--image::before {
    display: none
}

.fancybox-slide--html {
    padding: 6px 6px 0
}

.fancybox-slide--iframe {
    padding: 44px 44px 0
}

.fancybox-content {
    background: #fff;
    display: inline-block;
    margin: 0 0 6px;
    max-width: 100%;
    overflow: auto;
    padding: 24px;
    position: relative;
    text-align: left;
    vertical-align: middle
}

.fancybox-image,
.fancybox-slide--image .fancybox-content,
.fancybox-spaceball {
    background: 0 0;
    left: 0;
    margin: 0;
    max-width: none;
    padding: 0;
    position: absolute;
    top: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.fancybox-slide--image .fancybox-content {
    animation-timing-function: cubic-bezier(.5, 0, .14, 1);
    backface-visibility: hidden;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    overflow: visible;
    transform-origin: top left;
    transition-property: transform, opacity;
    z-index: 99995
}

.fancybox-can-zoomOut .fancybox-content {
    cursor: zoom-out
}

.fancybox-can-zoomIn .fancybox-content {
    cursor: zoom-in
}

.fancybox-can-drag .fancybox-content {
    cursor: grab
}

.fancybox-is-dragging .fancybox-content {
    cursor: grabbing
}

.fancybox-container [data-selectable=true] {
    cursor: text
}

.fancybox-image,
.fancybox-spaceball {
    border: 0;
    height: 100%;
    max-height: none;
    width: 100%
}

.fancybox-spaceball {
    z-index: 1
}

.fancybox-slide--html .fancybox-content {
    margin-bottom: 6px
}

.fancybox-iframe,
.fancybox-slide--map .fancybox-content,
.fancybox-slide--video .fancybox-content,
.fancybox-video {
    height: 100%;
    margin: 0;
    overflow: visible;
    padding: 0;
    width: 100%
}

.fancybox-slide--iframe .fancybox-content {
    overflow: visible;
    padding: 0
}

.fancybox-slide--video .fancybox-content {
    background: #000
}

.fancybox-slide--map .fancybox-content {
    background: #e5e3df
}

.fancybox-slide--iframe .fancybox-content {
    background: #fff;
    height: 92%;
    margin: 0 0 44px;
    width: 99%
}

.fancybox-iframe,
.fancybox-video {
    background: 0 0;
    border: 0;
    overflow: hidden
}

.fancybox-iframe {
    vertical-align: top
}

.fancybox-error {
    background: #fff;
    cursor: default;
    max-width: 400px;
    padding: 40px;
    width: 100%
}

.fancybox-error p {
    color: #444;
    font-size: 16px;
    line-height: 20px;
    margin: 0;
    padding: 0
}

.fancybox-button {
    background: rgba(30, 30, 30, .6);
    border: 0;
    border-radius: 0;
    cursor: pointer;
    display: inline-block;
    height: 44px;
    margin: 0;
    outline: 0;
    padding: 10px;
    transition: color .2s;
    vertical-align: top;
    width: 44px;
    color: #ccc
}

.fancybox-button:link,
.fancybox-button:visited {
    color: #ccc
}

.fancybox-button:focus,
.fancybox-button:hover {
    color: #fff
}

.fancybox-button.disabled,
.fancybox-button.disabled:hover,
.fancybox-button[disabled],
.fancybox-button[disabled]:hover {
    color: #888;
    cursor: default
}

.fancybox-button svg {
    display: block;
    overflow: visible;
    position: relative;
    shape-rendering: geometricPrecision
}

.fancybox-button svg path {
    fill: transparent;
    stroke: currentColor;
    stroke-linejoin: round;
    stroke-width: 3
}

.fancybox-button--pause svg path:nth-child(1),
.fancybox-button--play svg path:nth-child(2) {
    display: none
}

.fancybox-button--play svg path,
.fancybox-button--share svg path,
.fancybox-button--thumbs svg path {
    fill: currentColor
}

.fancybox-button--share svg path {
    stroke-width: 1
}

.fancybox-navigation .fancybox-button {
    height: 70px;
    opacity: 0;
    padding: 6px;
    position: absolute;
    top: 50%;
    width: 70px
}

.fancybox-navigation svg {
    width: 50%;
    margin-left: 21%;
    margin-top: 21%
}

.fancybox-show-nav .fancybox-navigation .fancybox-button {
    transition: opacity .25s, visibility 0s, color .25s
}

.fancybox-navigation .fancybox-button::after {
    content: "";
    left: -35px;
    padding: 50px;
    position: absolute;
    top: -35px
}

.fancybox-navigation .fancybox-button--arrow_left {
    background: 0 0;
    left: 6px
}

.fancybox-navigation .fancybox-button--arrow_right {
    background: 0 0;
    right: 6px
}

.fancybox-close-small {
    background: 0 0;
    border: 0;
    border-radius: 0;
    color: #555;
    cursor: pointer;
    height: 44px;
    margin: 0;
    padding: 6px;
    position: absolute;
    right: 0;
    top: 0;
    width: 44px;
    z-index: 10
}

.fancybox-close-small svg {
    fill: transparent;
    opacity: .8;
    stroke: currentColor;
    stroke-width: 1.5;
    transition: stroke .1s
}

.fancybox-close-small:focus {
    outline: 0
}

.fancybox-close-small:hover svg {
    opacity: 1
}

.fancybox-slide--iframe .fancybox-close-small,
.fancybox-slide--image .fancybox-close-small,
.fancybox-slide--video .fancybox-close-small {
    color: #ccc;
    padding: 5px;
    right: -12px;
    top: -44px
}

.fancybox-slide--iframe .fancybox-close-small:hover svg,
.fancybox-slide--image .fancybox-close-small:hover svg,
.fancybox-slide--video .fancybox-close-small:hover svg {
    background: 0 0;
    color: #fff
}

.fancybox-is-scaling .fancybox-close-small,
.fancybox-is-zoomable.fancybox-can-drag .fancybox-close-small {
    display: none
}

.fancybox-caption {
    bottom: 0;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    left: 0;
    line-height: 1.5;
    padding: 25px 44px;
    right: 0
}

.fancybox-caption::before {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAEtCAQAAABjBcL7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHRJREFUKM+Vk8EOgDAIQ0vj/3+xBw8qIZZueFnIKC90MCAI8DlrkHGeqqGIU6lVigrBtpCWqeRWoHDNqs0F7VNVBVxmHRlvoVqjaYkdnDIaivH2HqZ5+oZj3JUzWB+cOz4G48Bg+tsJ/tqu4dLC/4Xb+0GcF5BwBC0AA53qAAAAAElFTkSuQmCC);
    background-repeat: repeat-x;
    background-size: contain;
    bottom: 0;
    content: "";
    display: block;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: -25px;
    z-index: -1
}

.fancybox-caption::after {
    border-bottom: 1px solid rgba(255, 255, 255, .3);
    content: "";
    display: block;
    left: 44px;
    position: absolute;
    right: 44px;
    top: 0
}

.fancybox-caption a,
.fancybox-caption a:link,
.fancybox-caption a:visited {
    color: #ccc;
    text-decoration: none
}

.fancybox-caption a:hover {
    color: #fff;
    text-decoration: underline
}

.fancybox-loading {
    animation: fancybox-rotate 1s infinite linear;
    background: 0 0;
    border: 5px solid rgba(100, 100, 100, .5);
    border-radius: 100%;
    border-top-color: #fff;
    height: 60px;
    left: 50%;
    opacity: .6;
    padding: 0;
    position: absolute;
    top: 50%;
    width: 60px;
    z-index: 99999
}

.fancybox-loading,
.fancybox-loading.fancybox-loading1 {
    margin: -30px 0 0-30px
}

.fancybox-animated {
    transition-timing-function: cubic-bezier(0, 0, .25, 1)
}

.fancybox-fx-slide.fancybox-slide--previous {
    opacity: 0;
    transform: translate3d(-100%, 0, 0)
}

.fancybox-fx-slide.fancybox-slide--next {
    opacity: 0;
    transform: translate3d(100%, 0, 0)
}

.fancybox-fx-slide.fancybox-slide--current {
    opacity: 1;
    transform: translate3d(0, 0, 0)
}

.fancybox-fx-fade.fancybox-slide--next,
.fancybox-fx-fade.fancybox-slide--previous {
    opacity: 0;
    transition-timing-function: cubic-bezier(.19, 1, .22, 1)
}

.fancybox-fx-fade.fancybox-slide--current,
.fancybox-thumbs .fancybox-thumbs-active:before {
    opacity: 1
}

.fancybox-fx-zoom-in-out.fancybox-slide--previous {
    opacity: 0;
    transform: scale3d(1.5, 1.5, 1.5)
}

.fancybox-fx-zoom-in-out.fancybox-slide--next {
    opacity: 0;
    transform: scale3d(.5, .5, .5)
}

.fancybox-fx-zoom-in-out.fancybox-slide--current {
    opacity: 1;
    transform: scale3d(1, 1, 1)
}

.fancybox-fx-rotate.fancybox-slide--previous {
    opacity: 0;
    transform: rotate(-360deg)
}

.fancybox-fx-rotate.fancybox-slide--next {
    opacity: 0;
    transform: rotate(360deg)
}

.fancybox-fx-rotate.fancybox-slide--current {
    opacity: 1;
    transform: rotate(0deg)
}

.fancybox-fx-circular.fancybox-slide--previous {
    opacity: 0;
    transform: scale3d(0, 0, 0) translate3d(-100%, 0, 0)
}

.fancybox-fx-circular.fancybox-slide--next {
    opacity: 0;
    transform: scale3d(0, 0, 0) translate3d(100%, 0, 0)
}

.fancybox-fx-circular.fancybox-slide--current {
    opacity: 1;
    transform: scale3d(1, 1, 1) translate3d(0, 0, 0)
}

.fancybox-fx-tube.fancybox-slide--previous {
    transform: translate3d(-100%, 0, 0) scale(.1) skew(-10deg)
}

.fancybox-fx-tube.fancybox-slide--next {
    transform: translate3d(100%, 0, 0) scale(.1) skew(10deg)
}

.fancybox-fx-tube.fancybox-slide--current {
    transform: translate3d(0, 0, 0) scale(1)
}

.fancybox-share {
    background: #f4f4f4;
    border-radius: 3px;
    max-width: 90%;
    padding: 30px;
    text-align: center
}

.fancybox-share h1 {
    color: #222;
    font-size: 35px;
    font-weight: 700;
    margin: 0 0 20px
}

.fancybox-share p {
    margin: 0;
    padding: 0
}

.fancybox-share__button {
    border: 0;
    border-radius: 3px;
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    line-height: 40px;
    margin: 0 5px 10px;
    min-width: 130px;
    padding: 0 15px;
    text-decoration: none;
    transition: all .2s;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    white-space: nowrap
}

.fancybox-share__button:link,
.fancybox-share__button:visited {
    color: #fff
}

.fancybox-share__button:hover {
    text-decoration: none
}

.fancybox-share__button--fb {
    background: #3b5998
}

.fancybox-share__button--fb:hover {
    background: #344e86
}

.fancybox-share__button--pt {
    background: #bd081d
}

.fancybox-share__button--pt:hover {
    background: #aa0719
}

.fancybox-share__button--tw {
    background: #1da1f2
}

.fancybox-share__button--tw:hover {
    background: #0d95e8
}

.fancybox-share__button svg {
    height: 25px;
    margin-right: 7px;
    position: relative;
    top: -1px;
    vertical-align: middle;
    width: 25px
}

.fancybox-share__button svg path {
    fill: #fff
}

.fancybox-share__input {
    background: 0 0;
    border: 0;
    border-bottom: 1px solid #d7d7d7;
    border-radius: 0;
    color: #5d5b5b;
    font-size: 14px;
    margin: 10px 0 0;
    outline: 0;
    padding: 10px 15px;
    width: 100%
}

.fancybox-thumbs {
    background: #fff;
    bottom: 0;
    display: none;
    margin: 0;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    padding: 2px 2px 4px;
    position: absolute;
    right: 0;
    -webkit-tap-highlight-color: transparent;
    top: 0;
    width: 212px;
    z-index: 99995
}

.fancybox-thumbs-x {
    overflow-x: auto;
    overflow-y: hidden
}

.fancybox-show-thumbs .fancybox-thumbs {
    display: block
}

.fancybox-show-thumbs .fancybox-inner {
    right: 212px
}

.fancybox-thumbs>ul {
    font-size: 0;
    height: 100%;
    list-style: none;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0;
    position: relative;
    white-space: nowrap;
    width: 100%
}

.fancybox-thumbs-x>ul {
    overflow: hidden
}

.fancybox-thumbs-y>ul::-webkit-scrollbar {
    width: 7px
}

.fancybox-thumbs-y>ul::-webkit-scrollbar-track {
    background: #fff;
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, .3)
}

.fancybox-thumbs-y>ul::-webkit-scrollbar-thumb {
    background: #2a2a2a;
    border-radius: 10px
}

.fancybox-thumbs>ul>li {
    backface-visibility: hidden;
    cursor: pointer;
    float: left;
    height: 75px;
    margin: 2px;
    max-height: calc(100% - 8px);
    max-width: calc(50% - 4px);
    outline: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    width: 100px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover
}

.fancybox-thumbs-loading {
    background: rgba(0, 0, 0, .1)
}

.fancybox-thumbs>ul>li:before {
    border: 4px solid #4ea7f9;
    bottom: 0;
    content: "";
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: all .2s cubic-bezier(.25, .46, .45, .94);
    z-index: 99991
}

@media all and (max-width:800px) {
    .fancybox-thumbs {
        width: 110px
    }

    .fancybox-show-thumbs .fancybox-inner {
        right: 110px
    }

    .fancybox-thumbs>ul>li {
        max-width: calc(100% - 10px)
    }
}