:root {
font-size: 11px;

/* Individuelle Hauptfarben
color0: schwarz
color1: braun
color2: dunkelblau
color3: mittelblau
color4: lichtgrau
color5: hellblau
color6: graugrün
color7: dunkelrot
color8: grau
color9: orange
color10: grün
color11: rot
color12: dunkelgrau
 */

--color0: #000;
--color1: #7c605a;
--color2: #003560;
--color3: #00529a;
--color4: #efecee;
--color5: #dde7eb;
--color6: #5f754d;
--color7: #bd081c;
--color8: #999;
--color9: #ef7c00;
--color10: #52923a;
--color11: #dd052e;
--color12: #b5e8a2;

/* Hintergrundfarben
b blau
c hellorange
d hellbraun
e hellrot
f orange
g grau
h hellblau
j hellgrau
k braun
n grün
p hellgrün
q mittelgrün
r rot
s schwarz
w weiß
x mittelblau
*/

--color-b: #0069b3;
--color-c: #fddab9;
--color-d: #edd2b9;
--color-e: #f6c4b9;
--color-f: #ef7c00;
--color-g: #777;
--color-h: #dde7eb;
--color-j: #e3e2d4;
--color-k: #7c605a;
--color-n: #58891f;
--color-p0: #b5e8a2;
--color-p: #eef8ea;




--color-q: #86bc43;
--color-r: #700403;
--color-s: #252525;
--color-w: #fff;
--color-x: #6f9ed4;
}
@font-face {
font-family: 'bitterregular';
src: url('Bitter-Regular-webfont.woff') format('woff');
font-display: swap
}

* {
box-sizing: border-box;
scroll-behavior: smooth
}

body {
background-color: #fff;
color: #333;
font-family: 'bitterregular';
hyphens: auto;
margin-top: 14px
}

::selection {
background-color: var(--color1);
color: #fff
}

@media screen {
* {
border: 0;
margin: 0;
padding: 0
}

/* BASISELEMENTE */
h1 {
color: var(--color1);
column-span: all;
font-size: 2.2rem;
hyphens: none;
margin: 10px 0;
}

h2 {
color: var(--color1);
font-size: 1.8rem;
hyphens: none;
margin: 8px 0
}

h3, h4 {
color: var(--color6);
font-size: 1.7rem;
hyphens: none;
margin: 6px 0
}

h4 {
font-size: 1.6rem
}

h1 + h2 {
margin-top: 0
}

p {
font-size: 1.5rem;
line-height: 2.2rem;
margin: 0 0 10px 0
}

ul {
list-style-type: square;
padding-left: 15px
}

li {
font-size: 1.5rem;
margin-bottom: 10px
}

address {
color: #666;
font-size: 1.5rem;
font-weight: bold;
margin: 10px 0 1px 0
}

tt {
font-size: 1.2rem
}

blockquote {
font-size: 1.5rem;
font-style: italic;
margin: 15px;
hyphens: none;
line-height: 2.2rem
}

pre {
font-size: 1.5rem;
font-family: monospace
}

caption {
font-size: 1.5rem;
margin: 10px 0
}

/* LINKS */
a {
color: var(--color1)
}

a:hover {
color: var(--color2)
}

a.web:before {
content: "\27BD" " "
}

a.mail:before {
content: "\2709" " "
}

a.hum:before {
content: "\265B" " "
}

p.per:before {
content: "\2736" " "
}

a[href$=".pdf"]:after {
content: " (PDF)"
}

a[href$=".zip"]:after {
content: " (ZIP)"
}

/* Artikelarchiv auflisten */
.news_teaser {
}

.news_teaser a {
color: #333;
text-decoration: none
}

/* Akkordeon */
details {
padding-bottom: 1.2rem
}

summary {
color: var(--color2);
cursor: pointer;
font-size: 1.7rem;
font-weight: bold
}

/* STRUKTUR */
main {
margin: 0 auto
}

/* Footer */
div#footerwrap {
background-color: var(--color4);
border-top: 14px solid #fff;
width: 100%
}

footer {
äcolor: #fff;
display: flex;
max-width: 960px;
padding: 15px;

margin: auto;
font-size: 1.2rem
}

footer a {
color: #333;
text-decoration: none
}

footer a:hover {
äcolor: #fff;
text-decoration: underline
}

#footerleft {
flex: 2;
text-align: left
}

#footermiddle {
flex: 1;
text-align: left
}

#footerright {
flex: 1;
text-align: right
}

/* Hochscrollen */
.back-to-top {
background-color: #fff;
border: 3px solid var(--color1);
bottom: 30px;
font-size: 2.1rem;
padding: 10px;
position: fixed;
right: 10px;
text-decoration: none
}

/* Pfadnavigation */
#pfad {
color: var(--color1);
font-family: sans-serif;
font-size: 1.3rem;
margin: auto;
max-width: 960px;
padding: 8px 0 8px 8px
}

#pfad a {
color: var(--color1);
text-decoration: none
}

#pfad a:hover {
color: var(--color2);
text-decoration: underline
}

/* Infoboxen */
aside {
max-width: 960px;
margin: auto
}

.itype1 {
background-color: #fff;
border: 1px solid #666
}

.itype2 {
background-color: #e3e3e3;
border-radius: 12px
}

/* Nur bei keinem Gridsystem Zusatzcontainer nutzen */
.blockwrap {
max-width: 960px;
margin: auto
}

/* Gridsystem */
.gridrow {
display: flex;
gap: 35px;
justify-content: space-between;
margin: auto;
max-width: 960px
}

.gridrow .col1 {flex: 1}
.gridrow .col2 {flex: 2}
.gridrow .col3 {flex: 3}
.gridrow .col4 {flex: 4}
.gridrow .col5 {flex: 5}
.gridrow .col6 {flex: 6}
.gridrow .col7 {flex: 7}
.gridrow .col8 {flex: 8}
.gridrow .col9 {flex: 9}
.gridrow .col10 {flex: 10}
.gridrow .col11 {flex: 11}
.gridrow .col12 {flex: 12}

/* Subgridsystem */
.subgrid {
display: flex;
gap: 35px;
justify-content: space-between
}

.subgrid div {
flex: 1
}

/* GLOBALE MODULKLASSEN */

/* Breiten für mehrspaltige Module - Desktop */
.wcol2 {max-width: 48%; margin-right: 10px}
.wcol3 {max-width: 32%; margin-right: 10px}
.wcol4 {max-width: 23%; margin-right: 10px}
.wcol5 {max-width: 18%; margin-right: 10px}

/* Bilder responsive */
img {
max-width: 100%;
height: auto
}

/* Bildergalerie mit Bildtitel */
figure {
display: inline-block;
margin: 0 10px 10px 0;
vertical-align: top;
background-color: var(--color4);
transition: all 250ms ease;
padding: 6px;
box-shadow: 1px 1px 2px #aaa
}

/* Übergang */
figure:hover {
transform: scale(1.05);
box-shadow: 4px 4px 12px #444
}

/* Bilder mit Ttitel ohne Rahmen */
figure.rahmenlos {
background-color: inherit;
border: none;
box-shadow: none
}

/* Bildtitel */
figcaption {
font-size: 1.4rem;
padding: 2px
}

/* Nebentexte für Bildtexte */
span.desctext {
font-size: 1.3rem
}

span.minortext {
font-size: 1.1rem
}

/* Bildergalerie ohne Bildtitel */
.galerie img {
margin: 0
}

.links {float: left; margin: 0 20px 20px 0}
.rechts {float: right; margin: 0 0 20px 20px}
.block {margin: 20px 0}

/* Paginierung */
div.paginierung {
font-size: 1.5rem;
padding: 12px 0
}

div.paginierung a, div.paginierung span.gew {
display: inline-block;
margin-bottom: 4px;
min-width: 40px;
padding: 4px;
text-align: center;
text-decoration: none
}

div.paginierung a {
background-color: var(--color8);
border: 1px solid #fff;
color: #fff
}

div.paginierung span.gew {
background-color: var(--color1);
border: 1px solid #fff;
color: #fff
}

div.paginierung a:hover {
background-color: var(--color7);
color: #fff
}

/* BASISELEMENTE MIT KLASSEN */

/* Tabellen */
table {
border-collapse: collapse;
caption-side: bottom;
margin: 20px 0;
width: 100%
}

td, th {
padding: 3px;
vertical-align: top
}

th {
background-color: var(--color1);
color: #fff;
padding: 8px;
text-align: left
}

table.blind {
border: none
}

table.blind tr {
background-color: transparent
}

table.blind td {
padding-bottom: 3px
}

table.daten td, table.daten th {
font-family: sans-serif;
font-size: 1.4rem;
padding: 8px;
vertical-align: middle
}

table.daten tr:nth-child(odd) {
background-color: var(--color5)
}

table.daten tr {
background-color: inherit;
transition: background 2.2s, color 2.2s
}

table.daten tr:hover {
background-color: var(--color1);
color: #fff
}

table.daten td a {
color: inherit;
text-decoration: none
}

table.frei {
border: none;
font-size: 1.5rem;
margin: 10px 0
}

table.frei tr {
background-color: transparent
}

/* Veranstaltungen */
.ge, .ug {
border-radius: 16px;
box-shadow: 1px 1px 2px #aaa;
margin-bottom: 12px;
padding: 16px
}

.ge {
background-color: var(--color4)
}

.ug {
background-color: var(--color5)
}

.ge:hover, .ug:hover {
background-color: var(--color-c);
box-shadow: 5px 5px 2px #ccc;
}


p.datumort, p.datum, p.ort {
font-size: 1.4rem;
font-style: italic;
}

p.datumort {
margin: 32px 0 8px 0
}

p.datum {
margin: 8px 0 0 0
}

p.ort {
margin: 0 0 8px 0
}


p.vertitel {
color: var(--color1);
font-size: 1.7rem;
font-weight: bold;
margin-top: 5px
}

p.teaser {
font-weight: bold;
margin: 16px 0 6px 0
}

/* MODULE */

/* Modul Übersicht */
div.overview {
display: inline-block;
vertical-align: top;
width: 100%
}

div.overview p {
text-align: left
}

.overview a {
text-decoration: none
}

div.overview img {
margin-bottom: 0.6rem
}

/* Sprünge */
#skiplinks {
position: absolute;
top: -9999px;
left: -9999px;
height: 1px;
width: 1px
}

}

@media screen and (max-width: 1060px) {
/* Breiten für mehrspaltige Module */
.wcol3, .wcol4, .wcol5 {max-width: 47%}

}

@media screen and (max-width: 768px) {
:root {
font-size: 11px
}

main {
width: 100%
}

footer {
font-size: 1.4rem;
padding: 15px
}

p {
text-align: left
}

/* Breiten für mehrspaltige Module */
.wcol2, .wcol3, .wcol4, .wcol5 {max-width: 97%}

/* Gridsystem */
.gridrow {
flex-direction: column;
margin: 0
}

/* Subgridsystem */
.subgrid {
flex-direction: column;
gap: 0;
}

/* Bilder auf volle Breite */
.links, .rechts {
float: none;
margin: 14px 0
}

aside {
width: 100%;
float: none
}

/* Infoboxen */
aside.infobox {
float: none;
margin: 5px;
padding: 7px;
width: 100%
}

}

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

:root {
font-size: 12px
}

/* Responsive Tabelle tabfix, tabres */
.tabfix thead {
position: sticky;
top: 5px
}

.tabres thead {
display: none
}

.tabfix th, .tabfix td, .tabfix tr, .tabres td, .tabres tr {
float: left;
width: 100%
}

.tabfix tr, .tabres tr {
margin-bottom: 12px
}

.tabres td::before {
background-color: var(--color1);
color: #fff;
content: attr(data-label);
float: left;
font-weight: bold;
margin: -8px 10px -8px -8px;
padding: 8px 0 8px 8px;
width: 50%;
word-wrap: break-word
}

footer {
display: block;
text-align: left;
font-size: 1.2rem
}

#footerleft, #footerright {
text-align: left
}

#footerleft, #footermiddle {
margin-bottom: 12px
}

}

@media print {
* {
border: 0;
margin: 0;
padding: 0
}

body {
background-color: white;
color: #000;
font-family: Arial,Helvetica,sans-serif;
font-size: 10pt;
margin: 0;
padding: 0
}

nav, #skiplinks, .menuswitch, #footerwrap, .paginierung, .noprint {
display: none
}

p {
color: #000;
font-size: 11pt;
line-height: 14pt;
margin: 0;
padding: 0 0 15pt 0;
text-align: justify
}

h1, h2, h3 {
color: #333;
font-size: 14pt;
font-weight: bold;
margin: 0 0 5mm 0;
padding: 0
}

h2 {
font-size: 12pt
}

h3 {
font-size: 10pt
}

img.foto {
background-color: #997e69;
border: 1px dotted #773107
}

.links {
float: left;
margin: 0 20px 20px 0;
padding: 4px
}

.rechts {
float: right;
margin: 0 0 20px 20px;
padding: 4px
}
}

/* Mehrspaltigkeit */
.col2 {
columns: 200px 2;
column-gap: 26px;
}

.col3 {
columns: 200px 3;
column-gap: 24px;
}

.col4 {
columns: 200px 4;
column-gap: 22px;
}
@media screen {
/* Modulsektions-Klassen */

/* 
b blau
c hellorange
e hellrot
f orange
g grau
h hellblau
k braun
n grün
p hellgrün
q mittelgrün
r rot
s schwarz
w weiß
x mittelblau
*/

/* Dunkle Hintergrundfarben */
.strip-s {background-color: var(--color-s)}
.strip-r {background-color: var(--color-r)}
.strip-g {background-color: var(--color-g)}
.strip-k {background-color: var(--color-k)}
.strip-n {background-color: var(--color-n)}
.strip-x {background-color: var(--color-x)}
.strip-q {background-color: var(--color-q)}
.strip-f {background-color: var(--color-f)}

.box-s, .box-r, .box-g, .box-k, .box-n, .box-x, .box-q, .box-f {color: #fff}

.box-s h1, .box-s h2, .box-s h3, .box-s a {color: #fff}
.box-r h1, .box-r h2, .box-r h3, .box-r a {color: #fff}
.box-g h1, .box-g h2, .box-g h3, .box-g a {color: #fff}
.box-k h1, .box-k h2, .box-k h3, .box-k a {color: #fff}
.box-n h1, .box-n h2, .box-n h3, .box-n a {color: #fff}
.box-x h1, .box-x h2, .box-x h3, .box-x a {color: #fff}
.box-q h1, .box-q h2, .box-q h3, .box-q a {color: #fff}
.box-f h1, .box-f h2, .box-f h3, .box-f a {color: #fff}

/* Helle Hintergrundfarben */
.strip-0 {background-color: inherit}
.strip-w {background-color: var(--color-w)}
.strip-h {background-color: var(--color-h)}
.strip-p {background-color: var(--color-p)}
.strip-c {background-color: var(--color-c)}
.strip-e {background-color: var(--color-e)}
.strip-j {background-color: var(--color-j)}
.strip-d {background-color: var(--color-d)}

.box-w {background-color: var(--color-w)}
.box-h {background-color: var(--color-h)}
.box-p {background-color: var(--color-p)}
.box-c {background-color: var(--color-c)}
.box-e {background-color: var(--color-e)}
.box-j {background-color: var(--color-j)}
.box-d {background-color: var(--color-d)}

.box-0, .box-s, .box-r, .box-g, .box-k, .box-n, .box-w, .box-h, .box-p, .box-c, .box-e, .box-j, .box-x, .box-q, .box-f, .box-d {padding: 15px}

/* Angepaßte Links */
.box-c a {color: var(--color-f)}
.box-p a {color: var(--color-n)}
.box-e a {color: var(--color11)}
.box-d a {color: var(--color1)}


/* Abweichende Überschriften */
.box-c h1, .box-c h2 {color: var(--color9)}
.box-p h1, .box-p h2 {color: var(--color10)}
.box-e h1, .box-e h2 {color: var(--color11)}
.box-j h1, .box-j h2 {color: var(--color0)}

/* Hintergrundbilder */
.wall-a {background-image: url(pix/wall-a.webp)}
.wall-b {background-image: url(pix/wall-b.webp)}
.wall-c {background-image: url(pix/wall-c.webp)}
.wall-d {background-image: url(pix/wall-d.webp)}
.wall-e {background-image: url(pix/wall-e.webp)}

.wall-a, .wall-b, .wall-c, .wall-d, .wall-e {background-attachment: fixed; background-position: top center; padding: 15px}

/* TASK erweitern Grid-Klassen schwarz-rot-grau-blau-grün ... s-r-g-b-n */
.sec-s {background-color: var(--color-s); color: #fff}
.sec-r {background-color: var(--color-r); color: #fff}
.sec-g {background-color: var(--color-g); color: #fff}
.sec-k {background-color: var(--color-k); color: #fff}
.sec-n {background-color: var(--color-n); color: #fff}

.sec-s h1, .sec-s h2, .sec-s h3, .sec-r h1, .sec-r h2, .sec-r h3, .sec-g h1, .sec-g h2, .sec-g h3, .sec-k h1, .sec-k h2, .sec-k h3, .sec-n h1, .sec-n h2, .sec-n h3 {
color: #fff;
}

.sec-s a, .sec-r a, .sec-g a, .sec-k a, .sec-n a {
color: #fff;
}

/* MODULFORMATE */
/* Bildergalerie mit Titel */
.box-s figure, .box-r figure, .box-g figure, .box-k figure, .box-n figure {
color: var(--color-s)
}

/* Bilder mit Ttitel ohne Rahmen */
.box-s figure.rahmenlos, .box-r figure.rahmenlos, .box-g figure.rahmenlos, .box-k figure.rahmenlos, .box-n figure.rahmenlos {
color: #fff
}

}

@media screen and (max-width: 700px) {
.wall-a, .wall-b, .wall-c, .wall-d, .wall-e {
background-image: none; padding: 5px
}

.box-0, .box-s, .box-r, .box-g, .box-k, .box-n, .box-w, .box-h, .box-p, .box-c, .box-e, .box-j, .box-x, .box-q, .box-f {
padding: 11px
}

}
.sm{box-sizing:border-box;position:relative;z-index:9999;-webkit-tap-highlight-color:rgba(0,0,0,0);}
.sm,.sm ul,.sm li{display:block;list-style:none;margin:0;padding:0;line-height:normal;direction:ltr;text-align:left;}
.sm-rtl,.sm-rtl ul,.sm-rtl li{direction:rtl;text-align:right;}
.sm>li>h1,.sm>li>h2,.sm>li>h3,.sm>li>h4,.sm>li>h5,.sm>li>h6{margin:0;padding:0;}
.sm ul{display:none;}
.sm li,.sm a{position:relative;}
.sm a{display:block;}
.sm a.disabled{cursor:default;}
.sm::after{content:"";display:block;height:0;font:0px/0 serif;clear:both;overflow:hidden;}
.sm *,.sm *::before,.sm *::after{box-sizing:inherit;}
.sm-simple {
background-color: #fff;
}

.sm-simple a, .sm-simple a:hover, .sm-simple a:focus, .sm-simple a:active {
padding: 13px 20px;
/* make room for the toggle button (sub indicator) */
padding-right: 58px;
color: #555;
font-family: 'bitterregular', serif;
font-size: 17px;
font-weight: normal;
line-height: 17px;
text-decoration: none;
}

.sm-simple a.current {
background-color: var(--color1);
color: #fff;
}

.sm-simple a.disabled {
color: #ccc;
}

.sm-simple a .sub-arrow {
position: absolute;
top: 50%;
margin-top: -17px;
left: auto;
right: 4px;
width: 34px;
height: 34px;
overflow: hidden;
font: bold 14px/34px monospace !important;
text-align: center;
text-shadow: none;
background-color: rgba(0, 0, 0, 0.08);
}

.sm-simple a .sub-arrow::before {
content: '+';
}

.sm-simple a.highlighted .sub-arrow::before {
content: '-';
}

.sm-simple li {
border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.sm-simple > li:first-child {
border-top: 0;
}

.sm-simple ul {
background-color: rgba(179, 179, 179, 0.1);
}

.sm-simple ul a, .sm-simple ul a:hover, .sm-simple ul a:focus, .sm-simple ul a:active {
font-size: 15px;
border-left: 8px solid transparent;
}

.sm-simple ul ul a,
.sm-simple ul ul a:hover,
.sm-simple ul ul a:focus,
.sm-simple ul ul a:active {
border-left: 16px solid transparent;
}

.sm-simple ul ul ul a,
.sm-simple ul ul ul a:hover,
.sm-simple ul ul ul a:focus,
.sm-simple ul ul ul a:active {
border-left: 24px solid transparent;
}

.sm-simple ul ul ul ul a,
.sm-simple ul ul ul ul a:hover,
.sm-simple ul ul ul ul a:focus,
.sm-simple ul ul ul ul a:active {
border-left: 32px solid transparent;
}

.sm-simple ul ul ul ul ul a,
.sm-simple ul ul ul ul ul a:hover,
.sm-simple ul ul ul ul ul a:focus,
.sm-simple ul ul ul ul ul a:active {
border-left: 40px solid transparent;
}

#menuswitch {
display: inline-block;
font-size: 5.53rem;
text-decoration: none;
margin-left: 25px;
}


@media (min-width: 768px) {
/* Switch to desktop layout
-----------------------------------------------
These transform the menu tree from
collapsible to desktop (navbar + dropdowns)
-----------------------------------------------*/
/* start... (it's not recommended editing these rules) */
.sm-simple ul {
position: absolute;
width: 12em;
}

.sm-simple a .sub-arrow::before {
content: '';
}

.sm-simple li {
float: left;
}

.sm-simple.sm-rtl li {
float: right;
}

.sm-simple ul li, .sm-simple.sm-rtl ul li, .sm-simple.sm-vertical li {
float: none;
}

.sm-simple a {
white-space: nowrap;
}

.sm-simple ul a, .sm-simple.sm-vertical a {
white-space: normal;
}

.sm-simple .sm-nowrap > li > a, .sm-simple .sm-nowrap > li > :not(ul) a {
white-space: nowrap;
}

/* ...end */
.sm-simple {
background-color: #fff;
}
.sm-simple a, .sm-simple a:hover, .sm-simple a:focus, .sm-simple a:active, .sm-simple a.highlighted {
padding: 11px 14px;
color: #555;
}
.sm-simple a:hover, .sm-simple a:focus, .sm-simple a:active, .sm-simple a.highlighted {
background-color: #eee;
}
.sm-simple a.current {
background-color: var(--color1);
color: #fff;
}
.sm-simple a.disabled {
background-color: #fff;
color: #ccc;
}

.sm-simple a .sub-arrow {
top: 50%;
margin-top: -8px;
right: 20px;
width: 8px;
height: 16px;
font: 14px/16px monospace !important;
background-color: transparent;
}

.sm-simple > li {
border-top: 0;
border-left: 1px solid #eee;
}
.sm-simple > li:first-child {
border-left: 0;
}
.sm-simple ul {
border: 1px solid #bbb;
background-color: #fff;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.sm-simple ul a {
border: 0 !important;
}
.sm-simple ul a.has-submenu {
padding-right: 20px;
}
.sm-simple ul a .sub-arrow {
left: 8px;
right: auto;
}
.sm-simple ul > li {
border-left: 0;
border-top: 1px solid #eee;
}
.sm-simple ul > li:first-child {
border-top: 0;
}
.sm-simple .scroll-up,
.sm-simple .scroll-down {
position: absolute;
display: none;
visibility: hidden;
overflow: hidden;
background-color: #fff;
height: 20px;
}
.sm-simple .scroll-up-arrow,
.sm-simple .scroll-down-arrow {
position: absolute;
top: -2px;
left: 50%;
margin-left: -8px;
width: 0;
height: 0;
overflow: hidden;
border-width: 8px;
border-style: dashed dashed solid dashed;
border-color: transparent transparent #555 transparent;
}
.sm-simple .scroll-down-arrow {
top: 6px;
border-style: solid dashed dashed dashed;
border-color: #555 transparent transparent transparent;
}
.sm-simple.sm-rtl a.has-submenu {
padding-right: 20px;
padding-left: 32px;
}
.sm-simple.sm-rtl a .sub-arrow {
left: 20px;
right: auto;
}
.sm-simple.sm-rtl.sm-vertical a.has-submenu {
padding: 11px 20px;
}
.sm-simple.sm-rtl.sm-vertical a .sub-arrow {
left: auto;
right: 8px;
}
.sm-simple.sm-rtl > li:first-child {
border-left: 1px solid #eee;
}
.sm-simple.sm-rtl > li:last-child {
border-left: 0;
}
.sm-simple.sm-rtl ul a.has-submenu {
padding: 11px 20px;
}
.sm-simple.sm-rtl ul a .sub-arrow {
left: auto;
right: 8px;
}
.sm-simple.sm-vertical a .sub-arrow {
left: 8px;
right: auto;
}
.sm-simple.sm-vertical li {
border-left: 0;
border-top: 1px solid #eee;
}
.sm-simple.sm-vertical > li:first-child {
border-top: 0;
}

#menuswitch {
display: none;
}

}

.main-nav {
background-color: #fff;
}

.main-nav:after {
clear: both;
content: "\00a0";
display: block;
height: 0;
font: 0px/0 serif;
overflow: hidden;
}

.nav-brand {
float: left;
margin: 0;
}

.nav-brand a {
display: block;
padding: 8px 2px;
font-size: 20px;
line-height: 17px;
text-decoration: none;
}

#main-menu {
clear: both;
border: 0;
box-shadow: none;
}

/* Mobile menu toggle button */
.main-menu-btn {
float: right;
margin: 5px 10px;
position: relative;
display: inline-block;
width: 58px;
height: 58px;
text-indent: 58px;
white-space: nowrap;
overflow: hidden;
cursor: pointer;
}

/* hamburger icon */
.main-menu-btn-icon,
.main-menu-btn-icon:before,
.main-menu-btn-icon:after {
position: absolute;
top: 50%;
left: 2px;
height: 7px;
width: 48px;
background-color: var(--color1);
transition: all 0.25s;
}

.main-menu-btn-icon:before {
content: '';
top: -14px;
left: 0;
}

.main-menu-btn-icon:after {
content: '';
top: 14px;
left: 0;
}

/* x icon */
#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon {
height: 0;
background-color: transparent;
}

#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon:before {
top: 0;
transform: rotate(-45deg);
}

#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon:after {
top: 0;
transform: rotate(45deg);
}

/* hide menu state checkbox (keep it visible to screen readers) */
#main-menu-state {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
border: 0;
padding: 0;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
}

/* hide the menu in mobile view */
#main-menu-state:not(:checked) ~ #main-menu {
display: none;
}

#main-menu-state:checked ~ #main-menu {
display: block;
}

@media (min-width: 768px) {
/* hide the button in desktop view */
.main-menu-btn {
position: absolute;
top: -99999px;
}
/* always show the menu in desktop view */
#main-menu-state:not(:checked) ~ #main-menu {
display: block;
}

#main-menu {
float: right;
clear: none;
padding-top: 30px;
}

.main-nav {
margin: auto;
max-width: 960px;
position: static;
}

}
@media screen {

header {
align-items: center;
color: inherit;
display: flex;
flex-flow: column;
hyphens: none;
justify-content: center;
padding: 15px;
text-decoration: none;
--hedhight: 360px;
--bgpic01: url(pix/header01b.webp) center no-repeat;
--bgpic02: url(pix/header02b.webp) center no-repeat;
--bgpic03: url(pix/header03b.webp) center no-repeat;
--bgpic04: url(pix/header04b.webp) center no-repeat;
--bgpic05: url(pix/header05b.webp) center no-repeat;
--bgpic06: url(pix/header06b.webp) center no-repeat;
--bgpic07: url(pix/header07b.webp) center no-repeat;
--bgpic08: url(pix/header08b.webp) center no-repeat;
--bgpic09: url(pix/header09b.webp) center no-repeat;
--bgpic10: url(pix/header10b.webp) center no-repeat;
--bgpic11: url(pix/header11b.webp) center no-repeat;
--bgpic12: url(pix/header12b.webp) center no-repeat;
--bgpic13: url(pix/header13b.webp) center no-repeat;
--bgpic14: url(pix/header14b.webp) center no-repeat;
border-top: 16px solid var(--color4);
border-bottom: 16px solid var(--color4)
}

header p {
color: #fff;
text-align: center;
font-size: 3.0rem;
letter-spacing: 2px;
line-height: 3.5rem;
padding: 8px;
text-shadow: 3px 3px 3px #555
}

header a {
text-decoration: none
}

header a:hover {
color: #fff;
text-decoration: underline
}

}

@media screen and (max-width: 800px) {
header {
padding: 10px;
--hedhight: 280px;
--bgpic01: url(pix/header01m.webp);
--bgpic02: url(pix/header02m.webp);
--bgpic03: url(pix/header03m.webp);
--bgpic04: url(pix/header04m.webp);
--bgpic05: url(pix/header05m.webp);
--bgpic06: url(pix/header06m.webp);
--bgpic07: url(pix/header07m.webp);
--bgpic08: url(pix/header08m.webp);
--bgpic09: url(pix/header09m.webp);
--bgpic10: url(pix/header10m.webp);
--bgpic11: url(pix/header11m.webp);
--bgpic12: url(pix/header12m.webp);
--bgpic13: url(pix/header13m.webp);
--bgpic14: url(pix/header14m.webp);
border-top: 14px solid var(--color4);
border-bottom: 14px solid var(--color4)
}

header p {
font-size: 2.3rem;
line-height: 2.9rem
}

}

@media screen and (max-width: 400px) {
header {
padding: 5px;
--hedhight: 240px;
--bgpic01: url(pix/header01s.webp);
--bgpic02: url(pix/header02s.webp);
--bgpic03: url(pix/header03s.webp);
--bgpic04: url(pix/header04s.webp);
--bgpic05: url(pix/header05s.webp);
--bgpic06: url(pix/header06s.webp);
--bgpic07: url(pix/header07s.webp);
--bgpic08: url(pix/header08s.webp);
--bgpic09: url(pix/header09s.webp);
--bgpic10: url(pix/header10s.webp);
--bgpic11: url(pix/header11s.webp);
--bgpic12: url(pix/header12s.webp);
--bgpic13: url(pix/header13s.webp);
--bgpic14: url(pix/header14s.webp);
border-top: 12px solid var(--color4);
border-bottom: 12px solid var(--color4)
}

header p {
font-size: 1.6rem;
line-height: 2.0rem
}

}
/* Preload images */
body:after {
content: url(script/lightbox/close.png) url(script/lightbox/loading.gif) url(script/lightbox/prev.png) url(script/lightbox/next.png);
display: none
}

body.lb-disable-scrolling {
overflow: hidden
}

.lightboxOverlay {
position: absolute;
top: 0;
left: 0;
z-index: 9999;
background-color: black;
opacity: 0.8;
display: none
}

.lightbox {
position: absolute;
left: 0;
width: 100%;
z-index: 10000;
text-align: center;
line-height: 0;
font-weight: normal
}

.lightbox .lb-image {
display: block;
height: auto;
max-width: inherit;
max-height: none
}

.lightbox a img {
border: none
}

.lb-outerContainer {
position: relative;
width: 250px;
height: 250px;
margin: 0 auto;
background-color: var(--color2)
}

.lb-outerContainer:after {
content: "";
display: table;
clear: both
}

.lb-loader {
position: absolute;
top: 43%;
left: 0;
height: 25%;
width: 100%;
text-align: center;
line-height: 0
}

.lb-cancel {
display: block;
width: 32px;
height: 32px;
margin: 0 auto;
background: url(script/lightbox/loading.gif) no-repeat
}

.lb-nav {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10
}

.lb-container > .nav {
left: 0
}

.lb-nav a {
outline: none;
background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==')
}

.lb-prev, .lb-next {
height: 100%;
cursor: pointer;
display: block
}

.lb-nav a.lb-prev {
width: 34%;
left: 0;
float: left;
background: url(script/lightbox/prev.png) left 48% no-repeat;
opacity: 0;
transition: opacity 0.6s
}

.lb-nav a.lb-prev:hover {
opacity: 1
}

.lb-nav a.lb-next {
width: 64%;
right: 0;
float: right;
background: url(script/lightbox/next.png) right 48% no-repeat;
opacity: 0;
transition: opacity 0.6s
}

.lb-nav a.lb-next:hover {
opacity: 1
}

.lb-dataContainer {
background-color: var(--color1);
margin: 0 auto;
padding-top: 5px;
width: 100%
}

.lb-dataContainer:after {
content: "";
display: table;
clear: both
}

.lb-data {
padding: 0 4px;
}

.lb-data .lb-details {
width: calc(100% - 30px);
float: left;
text-align: left;
line-height: 1.5rem
}

.lb-data .lb-caption {
color: #fff;
font-size: 1.4rem;
line-height: 1.6rem
}

.lb-data .lb-number {
display: block;
clear: left;
padding: .3rem 0;
font-size: 1.3rem;
color: #fff
}

.lb-data .lb-close {
display: block;
float: right;
width: 30px;
height: 30px;
background: url(script/lightbox/close.png) top right no-repeat;
text-align: right;
outline: none;
opacity: 0.7;
transition: opacity 0.3s
}

.lb-data .lb-close:hover {
cursor: pointer;
opacity: 1
}