:root {
   --c-w: #fff; --c-0: #202d60; --c-p: #1d407c; --c-s: #0774b7; --c-t: #23a9e0; --c-m: #595660; --c-s1: #84818b; --c-s2: #d0cfd6; --c-s3: #f4f5f6; --c-nota: #fecd31; --c-bonum: #26d38c; 
   --c-malus: #F45454; --line: 1px; --rp: 90%; --gap: 1em; --size: 3em; --br: .75em; --br-i: .35em; --bs-1: 0 0 4em -1em var(--c-0); --bs-2: 0 0 2em -1em var(--c-m); --bs-3: 0 0 2em 0em var(--c-p); --bs-btn: 0 0 1em -.25em var(--c-m);
}

html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; margin:0; padding:0; font-size: 100%; }
*, *::before, *::after { box-sizing: inherit; margin:0; padding:0 }
html, body { background-color: var(--c-w); color: var(--c-m); font-family: 'Noto Sans', sans-serif; font-weight: normal; line-height: normal; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
img, svg { border: none; display: inline-block; max-width: 100%; height: auto; vertical-align: middle; }

a:link, a:visited, a:active { color: var(--c-p); display: inline-block; text-decoration: none; cursor: pointer; }
a:hover, a:focus { color: var(--c-t); cursor: pointer;  text-decoration: underline; }
a:focus { outline-offset: 2px; outline: var(--line) dashed var(--c-nota); }
a:link img, a:visited img, a:hover img, a:active img { border: none; }

#i3m-up { bottom: 30%; right: 1.4em; position: fixed; text-decoration: none; z-index: 50; width: 3rem; height: 3rem; border-radius: 50%; overflow: hidden; box-shadow: var(--bs-2); }
#i3m-up svg { width: 100%; height: auto; }
#i3m-up svg path { fill: var(--c-s); }
#i3m-up:hover svg path { fill: var(--c-t); }



a.link, a.ilink, form button, .link a, form input[type="submit"], .wp-block-button a, .wp-block-button.is-style-outline a { padding: .6em 2em; display: inline-block; background-color: var(--c-s); color: var(--c-w); border-radius: var(--br-i); transition: all .3s; text-decoration: none; font-weight: bold; border: 0; line-height: 1.4em; box-shadow: var(--bs-btn); cursor: pointer; background: linear-gradient(0deg, rgba(0,125,191,1) 0%, rgba(14,90,150,1) 100%); }
.wp-block-button.is-style-outline a { background-color: var(--c-w); color: var(--c-s);  box-shadow: var(--bs-btn); cursor: pointer; border: var(--line) solid var(--c-s); background: transparent; }
a.ilink { background: var(--c-w); color: var(--c-m); }
a.ilink:hover { background: var(--c-t); color: var(--c-m); }
a.link:hover { background: var(--c-p); color: var(--c-w); }

a.clink { background-color: var(--c-s); border: .25rem solid var(--c-s); box-shadow: inset 0 0 0 var(--line) var(--c-p), var(--bs-3); color: var(--c-t); padding: .25em; text-align: center; border-radius: 50%; line-height: 1; }
a.clink svg path, a.clink svg text { fill: var(--c-w); }
a.clink svg text { font-size: .6em; text-transform: uppercase; }

.skip-link { background: var(--c-t); color: var(--c-m); left: 50%; padding: 1em 2em; font-size: 1.4  em; position: absolute; transform: translateY(-100%); transition: transform 0.3s; text-decoration: none; z-index: 5 }
.skip-link:focus { transform: translateY(0%); }

.social a svg { width: 3em; height: auto; }

h1, h2, h3, h4, h5, h6 { letter-spacing: -1px; line-height: 1; margin: .5em 0 .5em 0; position: relative; color: var(--c-p); font-weight: normal; font-weight: 100; }
article h1, article h2, article h3, article h4, article h5, article h6 { line-height: 1.2em; }
h1 { font-size: 3rem; } h2 { font-size: 2.6rem; } h3 { font-size: 2.2rem; } h4 { font-size: 1.8rem; } h5 { font-size: 1.4rem; } h6 { font-size: 1.2rem; } 
p { line-height: 180%; margin: 1em 0; }
blockquote, .quote, address { border-left: 1em solid var(--c-0); width: 100%; padding: 1.5em; margin: 1em 0; line-height: 1.8; }
blockquote { background-color: var(--c-s3); position: relative; margin: 4em 0; padding: 2em 4em 2em 2em; border: none; border-radius: 1em; }
blockquote::before, blockquote::after { content: ''; border: .5em solid var(--c-s); display: block; border-radius: 1em; }
blockquote::before { bottom: -2em; left: 2em; top: -2em; right: 2em; border-top: none; border-bottom: none; border-right: none; position: absolute; z-index: -1; }
blockquote::after { top: -2em; left: 2em; right: 2em; bottom: -2em; border-left: 0; position: absolute; z-index: 1 }
blockquote p, .quote p, address p { line-height: inherit; }
blockquote > * { position: relative; z-index: 2 }
blockquote cite, .quote cite { font-size: .86em; text-transform: uppercase; font-style: normal; }
blockquote cite::before, .quote cite::before { content: '- ' }

address { font-style: normal; font-family: monospace; }
fieldset, legend { border: 1px solid var(--c-s); border-radius: .5em; }
fieldset { padding: 1.4em; margin: 0 0 1em 0; background-color: var(--c-s3); box-shadow: inset 0 0 0px .25em var(--c-w) }
fieldset ul, fieldset p { padding: 0; }
legend { font-weight: bold; padding: 0.5em 1em; text-transform: uppercase; margin: 0; line-height: 1; background-color: var(--c-w); box-shadow: 0 0 0px .25em var(--c-w) }
label { cursor: pointer; position: relative; }
pre, code { font-family: monospace; overflow: auto; margin: 1em auto; text-align: left; padding: 1em; display: block; background-color: var(--c-0); color: var(--c-nota); font-size: inherit; border-radius: var(--br-i); }
code { display: inline-block; padding: .3em; }
mark { border-radius: 3px; padding: 0 .3em; background-color: var(--c-nota); }
small, .small { font-size: .86em; }
strong { font-weight: 700; }

pre .line-number { float: left; margin: 0 1em 0 -1em; border-right: 1px solid; text-align: right; }
pre .line-number span { display: block; padding: 0 .5em 0 1em; }
pre .cl { display: block; clear: both;}

ul, ol, dl { margin: 1em 0; line-height: 1.8; list-style-type: none; list-style-position:inherit; }
ul:only-child, ul:last-child, ol:only-child, ol:last-child, dl:only-child, dl:last-child { margin-bottom: 0; }
article ul li, article ol li { padding: .3em 0 .3em 2em; position: relative; }
article dl dt { font-weight: 700; cursor: pointer; border: var(--line) solid var(--c-t); border-radius: 2em; display: flex; justify-content: space-between; align-items: center; padding: .25em 2em; margin-bottom: .5em; background-color: var(--c-t); color: var(--c-p); box-shadow: inset 0 0 0 .2em var(--c-w); }
article dl dd { position: relative; border: var(--line) solid var(--c-t); padding: .5em 2em; border-radius: 2em; margin-bottom: .5em; }
article ul li::before, article ol li::before { left: 0; position: absolute; color: var(--c-p); width: 1em; text-align: center; }
article dl dt::after { display: inline-block; position: relative; color: var(--c-p); text-align: center; font-size: 2em; font-weight: normal; }
article ul li::before { content: '→'; }
article ol li::before { counter-increment: li; content: counters(li, ".") ". "; }
article dl dt::after { content: '+'; }
article dl dt.on::after { content: '-' }

article ol { counter-reset: li; }
article ol ul { counter-reset:none; }
article ol ol { counter-reset: li; }
article ol li li { padding-left: 3.2em; }

header, main, footer, #app-nav, #overlay { font-size: 1rem; overflow-x: hidden; }

footer { background-color: var(--c-p); --c-w:#fff; color: var(--c-w); }
footer .logo img { height: auto; padding: 1.5em; border-radius: .5em; background-color: var(--c-w); border-top-left-radius: 0; border-top-right-radius: 0; margin-top: -1em; }
footer a:link, footer a:visited, footer a:hover, footer a:active { color: var(--c-w); }

.ratio-16x9, .wp-has-aspect-ratio.wp-embed-aspect-16-9 iframe { aspect-ratio: 16/9; }
.ratio-4x3, .wp-has-aspect-ratio.wp-embed-aspect-4-3 iframe { aspect-ratio: 4/3; }

hr, .hr, .divider, hr.wp-block-separator { display: block; clear: both; margin: var(--size) 0; min-height: 1em; background-image: url('images/hr.svg'); background-repeat: no-repeat; background-position: center; border: none;  }
hr.line { min-height: var(--line); background-color: var(--c-s); margin: calc( var(--size) / 2 ) 0; }
hr.is-style-wide { display: block; clear: both; margin: var(--size) 0; position: relative; background-image: none; background-color: var(--c-s3); min-height: 2px; }
hr.is-style-dots { display: block; clear: both; margin: var(--size) 0; position: relative; background-image: none; }
hr.is-style-dots::before { content: ' • • • • • • '; text-align: center; display: block; color: var(--c-s); font-size: 2em; }

.noscroll { overflow: hidden; }
.row { display: block; clear: both; padding: 0; margin: 0; }
.row.with-line { border-bottom: var(--line) solid var(--cd) }
.rp  { margin: 0 auto; padding: 0; position: relative; width: var(--rp, 90%); }
.sc-only { display: none !important; }
.clear-n::after { content: ""; display: table; clear: both; }
.hidden, .is-hidden, a.is-hidden, .link-discernible-name, .sc-show, .stobs, .i-ctrl { display: none !important; }

.fl, .fl-m-n { float: left; } .fr, .fr-m-n { float: right; }
.pb {padding-bottom: calc( var(--size, 2em) * 3 )} .pbs { padding-bottom: var(--size); }
.mb {margin-bottom: calc( var(--size, 2em) * 3 )} .mbs { margin-bottom: var(--size); }
.pt {padding-top: calc( var(--size, 2em) * 3 )} .pts { padding-top: var(--size); }
.mt {margin-top: calc( var(--size, 2em) * 3 )} .mts { margin-top: var(--size); }
.tc, .has-text-align-center, .aligncenter {text-align:center} .tl, .tl-m-c, .has-text-align-left, .alignleft {text-align:left} .tr, .tr-m-c, .has-text-align-right, .alignright {text-align:right}
.noselect { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.w100{width:100%}.w90{width:90%}.w80{width:80%}.w75{width:75%}.w70{width:70%}.w66{width:66%}.w60{width:60%}.w50{width:50%}.w40{width:40%}.w33{width:33.3%}.w30{width:30%}.w25{width:25%}.w20{width:20%}.w10{width:10%}
.w90m{width:90%}.w80m{width:80%}.w75m{width:75%}.w70m{width:70%}.w66m{width:66%}.w60m{width:60%}.w50m{width:50%}.w40m{width:40%}.w33m{width:33.3%}.w30m{width:30%}.w25m{width:25%}.w20m{width:20%}.w10m{width:10%}

.i-flex { display: flex; justify-content: space-between; align-items: center; }
.i-flex.gap { gap: var(--gap, 1em) }
.i-flex.aie { align-items: flex-end; }
.i-flex .if-item { position: relative; }
.i-flex .if-item.ac, .i-flex.ac { text-align: center; justify-content: center; }
.i-flex .if-item.al, .i-flex.al { text-align: left; justify-content: flex-start; }
.i-flex .if-item.ar, .i-flex.ar { text-align: right; justify-content: flex-end; }
.i-flex.s-v-c { align-items: stretch;}
.i-flex.s-v-c .if-item { display: flex; align-items: center; }
.i-flex.s-v-c .if-item > :first-child { align-items: center;}
.i-flex .if-item.half { flex-basis: 50%; flex-grow: 0; flex-shrink: 1; max-width: 50%; }
.i-flex .if-item.third { flex-basis: 33.333%; flex-grow: 0; flex-shrink: 1 }

.main-menu ul { display: flex; justify-content: space-evenly; padding: .3em 0; margin: 0; }
.main-menu ul li { padding: 0; }
.main-menu ul li + li { margin-left: .3rem; }
.main-menu ul li a { color: var(--c-w); text-decoration: none; font-size: 1em; font-weight: 300; white-space: nowrap; }
.main-menu ul li a::after { content: '|'; padding-left: .3rem; }
.main-menu ul li:last-child a::after { content: ''; padding-left: 0; }

.overlay { overflow: auto; opacity: 0; visibility: hidden; /*transition: all 0.3s ease-in-out;*/ z-index: 1; background: rgba(0, 0, 0, .8); }
.overlay::after { content: '×'; width: 1em; height: 1em; top: 0; right: 0; position: absolute; z-index: 1000; cursor: pointer; font-size: 4em; background-color: var(--c-s); color: var(--c-p); text-align: center; line-height: .85; }
body.action { overflow: hidden !important; overflow-x: hidden !important; }
#overlay.active { opacity: 1; position: fixed; left: 0; top: 0; right: 0; bottom: 0; visibility: visible; display: flex; align-items: center; justify-content: center; overflow: hidden !important; z-index: 100; }

#overlay .modal { position: relative; display: inline-flex; align-items: center; scrollbar-width: none; transform: translateX(0); opacity: 0; transition: transform 0.3s ease-out; height: auto; }
#overlay .modal::backdrop { backdrop-filter: blur(5px); }
#overlay .modal .slide { flex: 1 0 100%; position: relative; display: flex; justify-content: center; z-index: 5; }
#overlay .modal .slide::backdrop { backdrop-filter: blur(5px); }
#overlay .modal .slide::before { content: attr(data-caption); position: absolute; z-index: 2; bottom: 0; padding: .3em .5em; background-color: var(--c-w); font-size: .7em; }
#overlay .modal .slide .slide-content { min-width: 280px; max-width: var(--rp, 90%); padding: var(--size); max-height: 60vh; overflow-y: auto; z-index: 50; background-color: var(--c-w); border-radius: var(--br); }
#overlay .modal .slide img { display: block; position: relative; z-index: 1; align-self: center; max-height: 60vh; border-radius: var(--br) }
#overlay.active .modal { opacity: 1; _animation: fadeIn .5s forwards }
#overlay.active .modal .slide { animation: fadeIn .5s forwards }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10rem); } to { opacity: 1; transform: translateY(0);} }

#i-cookies { position: fixed; z-index: 55; width: 100%; bottom: var(--size); }
.no-js #i-cookies { display: none; }
#i-cookies #ecl-holder { color: var(--c-m); width: 100%; padding: 1em 2em; position: relative; background-color: var(--c-w); box-shadow: var(--bs-3); border-radius: var(--br); line-height: 1.8; border: var(--line) solid var(--c-s); }
#i-cookies #ecl-holder::before { content: "!"; position: absolute; left: 0em; font-size: 2rem; width: 1em; height: 1em; line-height: 1em; background-color: var(--c-malus); color: var(--c-w); }
#i-cookies #ecl-holder a.link + a { margin-left: 1.4em; }
#i-cookies #ecl-holder a#ecl-close, #i-cookies #ecl-holder a.privacy-cookies-link { color: var(--c-s) }
#i-cookies #ecl-holder .short { margin: 0; padding: 0 1em; text-align: justify; }
#i-cookies #ecl-holder .cookies-options label { padding: .3em .5em; display: inline-block; margin-bottom: 0; }
#i-cookies #ecl-holder .actions { border-top: var(--line) solid var(--c-s); padding-top: 1em; margin-top: 1em; margin-left: -2em; margin-right: -2em; }
#i-cookies #ecl-holder.accepted { display: none; }

#app-nav { display: none; position: fixed; bottom: 0; width: 100%; background-color: var(--c-s);  padding: 0; z-index: 50; justify-content: space-between; font-size: 1rem; box-shadow: var(--bs-2); }
#app-nav a:link, #app-nav a:hover, #app-nav a:visited, #app-nav a:active { position: relative; text-align: center; text-decoration: none; word-break: break-word; border-left: var(--line) solid var(--c-t); flex: 1 1 25%; padding: 4rem 0 0 0; color: var(--c-w); font-weight: bold; margin: 1.6rem 0; }
#app-nav a:first-child { border-left: none; }
#app-nav a::before { content: ''; position: absolute; width: 3em; height: 3em; border: var(--line) solid var(--cd); top: 1.8em; left: 0; right: 0; margin: 0 auto; }
#app-nav a { background-image: url('images/m-1.svg'); background-repeat: no-repeat; background-position: center top; background-size: 3em; }
#app-nav a.m-1 { background-image: url('images/m-1.svg'); }
#app-nav a.m-2 { background-image: url('images/m-2.svg'); }
#app-nav a.m-3 { background-image: url('images/m-3.svg'); }
#app-nav a.m-4 { background-image: url('images/m-4.svg'); }

a.close { padding: .5em .7em; line-height: 1; color: var(--c-w); text-decoration: none; cursor: pointer; display: inline-block; background-color: var(--c-t); border-radius: 5em; border: var(--line) solid var(--c-t); }

#app-menu.is-open, #app-menu:target { right: 0; display: block; box-shadow: var(--bs-2); font-size: 1.6rem; font-weight: 200 }
#app-menu { position: absolute; width: 100%; top: 0; padding: var(--size); background-color: var(--c-s); z-index: 100; min-height: 100vh; display: none; }
#app-menu ul { text-align: right; padding: 1em 0; }
#app-menu ul li { padding: 0; background: none; text-align: left; list-style-type: none; }
#app-menu ul li a:link, #app-menu ul li a:visited, #app-menu ul li a:hover, #app-menu ul li a:active { text-decoration: none; display: inline-block; padding: .5em 0; width: 100%; color: var(--c-w); position: relative; border-bottom: var(--line) solid var(--c-t); }
#app-menu ul > li.menu-item-has-children > a::after { content: '▾'; color: currentColor; display: inline-block; position: absolute; right: 0; width: 2em; text-align: center; }
#app-menu ul > li.menu-item-has-children > a.on::after { content: '×'; }
#app-menu ul > li.menu-item-has-children > a span { position: absolute; padding: 1em; right: 0; z-index: 60}
#app-menu ul li ul { padding: 0; display: none }
#app-menu ul li ul li a::before { content: '--'; display: inline-block; color: var(--cg); padding-right: .5em; }
#app-menu ul li ul.open { display: block }

/* header */
.header-top, .header-middle, .header-bottom { position: relative; }
.header-top { z-index: 5; padding: 1em 0; font-weight: 700; font-size: .76em; }
.header-middle { z-index: 10;  position: absolute; width: 100%;  --c-w: #fff; }
.header-middle #reserve-fixed { display: none; }
#tobef.to-fixed #reserve-fixed { display: inline-block; padding: .65em .5em; }
#tobef.to-fixed .clink { box-shadow: inset 0 0 0 var(--line) var(--c-p), 0 0 0.1em 0em var(--c-p); }
#tobef.to-fixed { position: fixed; top: 0; background-color: var(--c-w); box-shadow: var(--bs-1); }
#tobef.to-fixed .so-logo { margin-top: 0; }
#tobef.to-fixed .main-menu ul li a { color: var(--c-p); }
.header-middle .so-logo { margin-top: -1em; }
.header-middle .so-logo img { height: auto; padding: .75em; border-radius: .5em; background-color: var(--c-w); border-top-left-radius: 0; border-top-right-radius: 0; }
.header-bottom { z-index: 1;   --c-w: #fff; }

.header-middle .pop-form { position: absolute; right: 0; top: 7em; width: auto !important; padding: 1em; background-color: var(--c-p); border-top-right-radius: 0; }
.header-middle .pop-form::before { content: '\25B2'; display: block; right: .5em; position: absolute; top: -1em; color: var(--c-s); }
.header-middle .pop-form form { flex-direction: column; align-items: normal; }

.bw-reserve { background-color: var(--c-p); padding: 1.4em 2em; border-radius: var(--br); width: 60%; margin: 0 auto; margin-top: -4em; margin-bottom: 4em; box-shadow: inset 0 0 0 1px var(--c-s), var(--bs-1); border: .35em solid var(--c-p); z-index: 5; position: relative; --gap: 1em }
.type-single .bw-reserve { width: 80%; }
.bw-reserve form { gap: var(--gap) }
.bw-reserve form label { flex: 1; }
.bw-reserve form label span { display: block; padding-bottom: .6em; color: var(--c-w); text-transform: uppercase; position: relative; padding-left: 1em; text-align: left; }
.bw-reserve form input, .bw-reserve form select { width: 100%; }
.bw-reserve form label span::before { content: '\27F6'; color: var(--c-s); padding-right: .5em; display: inline-block; }

/* hero */
.hero-images { background-color: var(--c-0); position: relative; }
.hero-images::before { content: ''; position: absolute; width: 100%; height: 100%; display: block; z-index: 1; }
.hero-images::before { top:0; background: linear-gradient(180deg, rgba(0,125,191,1) 0%, rgba(0,125,191,.3) 50%, rgba(0,125,191,1) 100%); }
.hero-images .rp { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; }
.hero-images .rp img { opacity: .5; min-height: 26em; mix-blend-mode: luminosity; }
.hero-images .headline { text-align: center; position: absolute; z-index: 1; }
.hero-images h1, .hero-images p { font-weight: 200; color: var(--c-w); text-align: center; padding-top: 0; }
.hero-images p { font-size: 1.4em; }

.type-single .header-bottom .hero-images { overflow: hidden; height: 30em; }
.type-single .header-bottom .hero-images img { width: 100%; height: 100%; opacity: .5; object-fit: cover; object-position: center; }

#i-intro p { font-size: 1.6em; font-weight: 200; text-align: center; }

.list { display: flex; }
.list.columns { flex-direction: column; }
.list-rooms { flex-wrap: nowrap; justify-content: flex-start; cursor: grab; width: 100%; width: calc( 100% - ( ( 100% - var(--rp) ) / 2 ) ); margin-left: calc( ( 100% - var(--rp) ) / 2 ); }

a.arrows:link, a.arrows:visited, a.arrows:hover, a.arrows:active { text-decoration: none; }
.arrows svg { width: 2em; height: 2em; fill: currentColor; }

.keen-slider:not([data-keen-slider-disabled]){-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;align-content:flex-start;display:flex;_overflow:hidden;position:relative;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-khtml-user-select:none;}

.room { position:relative; display: flex; flex-direction: column; background-color: var(--c-s3); min-width: 40%; --rbr: .35em; border-radius: var(--rbr) }
.room .price { position: absolute; top: 0; right: 0; background-color: var(--c-nota); padding: .5em; border-bottom-left-radius: var(--rbr); }
.room img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--rbr); box-shadow: var(--bs-2); }
.room .meta { display: flex; padding: 1em; justify-content: space-between; align-items: flex-end; }
.room .title { font-weight: 200; color: var(--c-p); font-size: 1.4em; }
.room .title span { color: var(--c-s1); display: block; padding-top: 1em; font-size: .86em; }

.room-info { display: flex; justify-content: center; gap: var(--gap); padding: 0;  }
.room-info span { display: flex; align-items: center; font-weight: 400; font-size: .8em; outline: 1px solid currentColor; border-radius: var(--br-i); padding: 0.4em .6em; line-height: 1; }
.room-info span svg { width: 1em; height: 1em; margin-right: 0.5em; }

#i-services { position: relative; }
.grey-bg { background-color: var(--c-s3); }

.wp-block-gallery.amenities { gap: var(--gap); justify-content: space-evenly; flex-wrap: wrap; padding-top: 2em; }
.wp-block-gallery.amenities figure, .wp-block-gallery.columns-5.amenities figure { text-align: center; display: inline-block; line-height: 1; flex: 0 0 5%; min-width: 4em; }
.wp-block-gallery.amenities figure img { width: 4em; height: 4em; padding: .5em; background-color: var(--c-w); border-radius: 50%; }
.wp-block-gallery.amenities figure figcaption { font-weight: 400; display: block; text-align: center; line-height: 1; position:relative; padding: 1em 0 0 0; bottom: auto; left: auto; background-color: transparent; }

.services { margin-top: -5em; text-align: center; }
.services a img { display: block; border-radius: var(--br-i); margin-bottom: 1em; box-shadow: 0 0 2em -1em var(--c-m); }

/* Pagination */
.pagination { padding: 2em 0; text-align: center; }
.pagination a, .pagination .current { text-align: center; display: inline-block; cursor: pointer; position: relative; border: var(--line) solid var(--c-p); width: 3em; height: 3em; line-height: 2.7em; text-decoration: none; margin: 0 .5em; background: none; padding: 0; border-radius: var(--br-i); }
.pagination a:hover { border-color: var(--c-s); }
.pagination .current { text-decoration: none; border-color: var(--c-p); color: var(--c-m); background-color: var(--c-t); margin: 0 .5em; }

/* Search */
@keyframes slide-from-top { from { top:-10em; } to { top: 0} }
#search-for:target, #search-for.is-open { display: block; animation: slide-from-top 0.3s forwards; }
#search-for { position: absolute; z-index: 50; display: none; width: 100%; padding: 2em 0; box-shadow: var(--bs-2) }

.drop-dialog { display: none; text-align: left; justify-content: flex-end; background-color: var(--c-0); }
.drop-dialog form { display: flex; gap: var(--gap); align-items:flex-end; margin-top: 1em; }
.drop-dialog form label { flex: 1 1 40%; font-size: .7em; text-transform: uppercase; text-indent: 1em; color: var(--c-w); }
.drop-dialog form input, .drop-dialog form button { border: 0; border-radius: var(--br-i); width: 100%; margin-top: .5em; }
.drop-dialog form button { flex: 1 1 10%; cursor: pointer; }

/* Table */
table { width: 100%; height: auto; border-collapse: collapse; margin: 2em 0; }
table caption, .wp-block-table figcaption { font-weight: bold; text-transform: uppercase; letter-spacing: 1px; text-align: left; padding: 1em; }
table thead tr td, table tr th { text-align: left; font-weight: bold; padding: 1em; color: var(--c-p); border-bottom: var(--line) solid var(--c-t); border-top: var(--line) solid var(--c-t); }
table td { padding: 1em; border-bottom: var(--line) solid var(--c-t); border-right: var(--line) solid var(--c-t); text-align: left; }
table td:last-child { border-right: none; }
table td:first-child { width: 50%; }
table tfoot tr td { text-transform: uppercase; }
table.has-fixed-layout { table-layout: fixed ;}

/* Form */
.processing, .loading { position: relative; filter: blur(2px); }
.processing::after, .loading::after { content: ''; text-align: center; position: absolute; font-weight: bold; top: 0; left: 0; background: transparent url(images/loading.svg) center center no-repeat; right: 0; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; background-size: 12%; }

form { margin: 0; font-family: 'Noto Sans', sans-serif; width: 100%; position: relative; }
article form label { font-size: .86em; padding-left: 1em; padding-bottom: .5em; display: inline-block; }
article form.ns-form .frow label { font-size: .86em; padding: 0; padding-left: 1em; padding-bottom: .5em; display: inline-block; background-color: transparent; border: none; }
article form label + input, article form label + textarea, article form label + select { margin-bottom: 1em; display: block; }
article input + .note, article textarea + .note, article select + .note { margin-top: -1em; margin-bottom: 1rem;  }
article .note { font-size: .76em; display: block; padding-left: 1em; }
article .note::before { content: '- '; }
form input, form textarea, form select, form button { padding: .5em 1em; border-radius: var(--br-i); border: var(--line) solid var(--c-s); line-height: 1.4em; background-color: var(--c-w); }
form select { padding: .6em 1em; }
form button, form input[type="submit"] { cursor: pointer; }
article form input, article form select { width: 100%; background-color: var(--c-w); }
article form textarea { width: 100%; border-radius: 1em; }
form input[type="checkbox"], form input[type="radio"] { width: auto; }
form input.error, form select.error, form input._has_error { outline: var(--line) solid var(--c-malus); }
form input:disabled, form textarea:disabled, form select:disabled, form button:disabled { background-color: var(--c-g); color: var(--c-s2) } 

.form-notes.active .success-msg, .form-notes.active .error-msg { padding: 1em; margin: 1em 0;  }
.success-msg { background-color: var(--c-bonum); color: var(--c-w); border-radius: var(--br); }
.error-msg { background-color: var(--c-malus); color: var(--c-w); border-radius: var(--br); }
.form-notes ul.success-msg, .form-notes ul.error-msg { list-style-type: square; list-style-position: inside; line-height: 1.4; }
.form-notes ul.success-msg li::before, .form-notes ul.error-msg li::before { content: ''; }
.form-notes ul.success-msg li, .form-notes ul.error-msg li { padding-left: 0; }

/* article */
article { position: relative; z-index: 1; }

.wp-block-embed iframe { max-width: 100%; min-height:10em }
.wp-block-embed .wp-block-embed__wrapper iframe, .wp-block-embed__wrapper .yt-thumb { position: relative; width: 100%; height: auto; border-radius: var(--br); }
iframe { width: 100%; display: block; border-radius: var(--br); }

.wp-block-embed .wp-block-embed__wrapper .yt-thumb { background-repeat: no-repeat; background-position: center center; background-size: cover; width: 100%; border-radius: var(--br); }
.wp-block-embed .wp-block-embed__wrapper .yt-thumb::before { content: '‣'; width: 2em; height: 1.2em; background-color: red; border-radius: .25em; top: 50%; left: 50%; margin: -.6em 0 0 -1em; position: absolute; text-align: center; color: #fff; font-size: 3em; line-height: 1.2em; }
.wp-block-embed .wp-block-embed__wrapper .yt-thumb img { width: 100%; height: auto; border-radius: var(--br); }

.wp-block-pullquote blockquote { margin: 2em; padding: 3em 2em; border: none; width: auto; }
.wp-block-pullquote blockquote::before, .wp-block-pullquote blockquote::after { content: '░░░░░░'; border: none; z-index: 1; display: block; overflow: hidden; width: auto; font-size: 1em; left: -2em; right: -2em; color: var(--c-t); pointer-events: none; }
.wp-block-pullquote blockquote::before { top: 1em; text-align: left; }
.wp-block-pullquote blockquote::after { top: auto; bottom: 1em; text-align: right; direction: rtl; }

.wp-block-media-text__media img, .wp-block-image img, .wp-block-image a img { border-radius: var(--br); box-shadow: var(--bs-2); }

.wp-block-columns { display: flex; gap: calc( var(--gap) * 2 ); }
.wp-block-columns .wp-block-column { flex-basis: 0; flex-grow: 1; }

.wp-block-media-text { display: flex; margin: var(--size) 0; }
/*.wp-block-media-text.has-media-on-the-right { flex-direction: row-reverse; }*/
.wp-block-media-text .wp-block-media-text__media { position: relative; flex: 1 1 50%; }
.wp-block-media-text .wp-block-media-text__content { padding: 2em; margin: 2em 0; flex: 1 1 50%; background-color: var(--c-s3); }
.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content { border-radius: 0; border-top-left-radius: var(--br); border-bottom-left-radius: var(--br); }
.wp-block-media-text .wp-block-media-text__content { border-top-right-radius: var(--br); border-bottom-right-radius: var(--br); }
.wp-block-media-text.is-image-fill .wp-block-media-text__media { border-radius: var(--br); box-shadow: var(--bs-2); }
.wp-block-media-text.is-image-fill .wp-block-media-text__media img { visibility: hidden; }

.wp-block-image { position: relative; }
.wp-block-image figcaption { position: absolute; padding: .5em; text-align: center; background-color: rgba(255,255,255,.8); border-radius: 5px; bottom: .5em; left: .5em; font-size: .6em; }

.wp-block-gallery { display: flex; justify-content: center; position: relative; margin: 0; padding: 0; gap: var(--gap); flex-flow: wrap; }
.wp-block-gallery-grid { display: flex; flex-wrap: wrap; list-style-type: none; padding: 0; margin: 0; }
.wp-block-gallery.is-cropped { position: relative; }
.wp-block-gallery figure { flex: 1 1 auto; }
.wp-block-gallery.columns-2 figure { flex: 1 0 calc( ( 100% / 2 ) - var(--gap) ) }
.wp-block-gallery.columns-3 figure { flex: 1 0 calc( ( 100% / 3 ) - var(--gap) ) }
.wp-block-gallery.columns-4 figure { flex: 1 0 calc( ( 100% / 4 ) - var(--gap) ) }
.wp-block-gallery.columns-5 figure { flex: 1 0 calc( ( 100% / 5 ) - var(--gap) ) }

.wp-block-cover { position: relative; background-size: cover; background-position: 50%; min-height: 20em; height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; margin: var(--size) 0; border-radius: var(--br);  overflow: hidden; box-shadow: var(--bs-2); }
.wp-block-cover .wp-block-cover__background.has-background-dim { position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 1;  }
.wp-block-cover .wp-block-cover__background.has-background-dim + img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.wp-block-cover.has-parallax { background-attachment: fixed; }
.wp-block-cover .wp-block-cover__inner-container { position: relative; z-index: 2; color: var(--c-w); width: 100%; }
.wp-block-cover .wp-block-cover__inner-container > * { color: var(--c-w); }

.has-background-dim-10 { opacity: .1 } .has-background-dim-20 { opacity: .2 } .has-background-dim-30 { opacity: .3 } .has-background-dim-40 { opacity: .4 } .has-background-dim-50 { opacity: .5 } .has-background-dim-60 { opacity: .6 } .has-background-dim-70 { opacity: .7 } .has-background-dim-80 { opacity: .8 } .has-background-dim-90 { opacity: .9 }

.wp-block-buttons .wp-block-button { display: inline-block; }

.wp-block-table { position: relative; display: flex; flex-direction: column-reverse; }
.wp-block-table table + figcaption { margin-bottom: -2em; }

.has-background { padding: 2em; border-radius: var(--br); }
.has-c-0-background-color { background-color: var(--c-0); } .has-c-m-background-color { background-color: var(--c-m); } .has-c-p-background-color { background-color: var(--c-p); } .has-c-s-background-color { background-color: var(--c-s); } .has-c-t-background-color { background-color: var(--c-t); } .has-c-s-1-background-color { background-color: var(--c-s1); } .has-c-s-2-background-color { background-color: var(--c-s2); } .has-c-s-3-background-color { background-color: var(--c-s3); } .has-c-w-background-color { background-color: var(--c-w); }

.has-c-0-color { color: var(--c-0); } .has-c-m-color { color: var(--c-m); } .has-c-p-color { color: var(--c-p); } .has-c-s-color { color: var(--c-s); } .has-c-t-color { color: var(--c-t); } .has-c-s-1-color { color: var(--c-s1); } .has-c-s-2-color { color: var(--c-s2); } .has-c-s-3-color { color: var(--c-s3); } .has-c-w-color { color: var(--c-w); }

.has-background-dim-10 {opacity:.1;} .has-background-dim-20 {opacity:.2;} .has-background-dim-30 {opacity:.3;} .has-background-dim-40 {opacity:.4;} .has-background-dim-50 {opacity:.5;} .has-background-dim-60 {opacity:.6;} .has-background-dim-70 {opacity:.7;} .has-background-dim-80 {opacity:.8;} .has-background-dim-90 {opacity:.9;} .has-background-dim-100 {opacity:1;}
.has-light-blue-gradient-background { background: linear-gradient(0deg,rgb(7,116,183) 0%,rgb(35,169,224) 100%); }
.has-dark-blue-gradient-background { background: linear-gradient(0deg,rgb(32,45,96) 0%,rgb(7,116,183) 100%); }

.alignfull, .full-width { width: 100vw !important; position: relative; left: 50%; right: 50%; margin-left: -50vw !important; margin-right: -50vw !important; border-radius: 0; }

.content-after-data { text-align: center; font-size: small; color: var(--c-s2); }

/* Media queries *********************************************************** */
body.debug::before { font-size: 10px; font-family: sans-serif; position: fixed; right: 0px; top: 0px; z-index: 545; margin: 0; padding: 3px; background-color: aquamarine; color: red; line-height: 1; }
@media screen and (min-width:1280px) { body.debug::before { content: ">1280"; } :root { --rp: 80%; } }
@media screen and (min-width:960px) and (max-width:1280px) { body.debug::before { content: "#960"; } body.debug .rp { background-size: 92px 80px; } html { font-size: 90%; } }
@media screen and (max-width:960px) { body.debug::before { content: "#300"; } body.debug .rp { background-size: 50px 80px; }
   html { font-size: 80%; }
   :root { --rp: 90%; }
   .dib { display: inline-block !important; }
   .dvl { display: block !important; }
   .bs-only { display: none !important; }
   .sc-only { display: inherit; }
   #app-nav { display: flex; }
   .m-columns, .wp-block-media-text.is-stacked-on-mobile, .wp-block-media-text.is-stacked-on-mobile.has-media-on-the-right, .wp-block-columns { flex-direction: column; }
   .wp-block-media-text.is-stacked-on-mobile.has-media-on-the-right { flex-direction:column-reverse; }
   .wp-block-media-text .wp-block-media-text__content { margin: 0; margin-top: -1em; }
   .m-columns .if-item { flex: 1 1 100%; width: 100%; }
   .tr-m-c { text-align: center; }
   .so-logo { flex: 0 1 60%;}
   .tbl-fit { overflow-x:auto; max-width: 100%; display: block; }
   .i-flex .if-item.half, .i-flex .if-item.third { flex-basis: 100%; flex-grow: 1; flex-shrink: 1; max-width: 100%; width: 100%; }
   .f-holder { padding-bottom: 8em; }
   .header-middle .so-logo { margin-top: 0; }
   .room { min-width: 65%; }
   .bw-reserve { width: var(--rp); }
   .wp-block-gallery.columns-2 figure, .wp-block-gallery.columns-3 figure, .wp-block-gallery.columns-4 figure, .wp-block-gallery.columns-5 figure { flex: 1 0 calc( ( 100% / 2 ) - var(--gap) ) }
   .drop-dialog form label { width: 100%; }
}