@font-face {  font-family: 'Vollkorn';  src:  url("../fonts/Vollkorn-Italic-VariableFont_wght.WOFF") format('woff'); }
@font-face {  font-family: 'Yantramanav';  src:  url("../fonts/Yantramanav-Thin.WOFF") format('woff'); font-style:normal; font-weight:100;}
@font-face {  font-family: 'Yantramanav';  src:  url("../fonts/Yantramanav-Light.WOFF") format('woff'); font-style:normal; font-weight:300;}
@font-face {  font-family: 'Yantramanav';  src:  url("../fonts/Yantramanav-Regular.WOFF") format('woff'); font-style:normal; font-weight:400;}
@font-face {  font-family: 'Yantramanav';  src:  url("../fonts/Yantramanav-Medium.WOFF") format('woff'); font-style:normal; font-weight:500;}
@font-face {  font-family: 'Yantramanav';  src:  url("../fonts/Yantramanav-Bold.WOFF") format('woff'); font-style:normal; font-weight:700;}
@font-face {  font-family: 'Segoe UI';  src:  url("../fonts/Segoe_UI.WOFF") format('woff'); font-weight:400; font-style:normal; }
@font-face {  font-family: 'Segoe UI';  src:  url('/fileadmin/inhalte/fonts/Segoe_UI_Italic.WOFFF') format('woff'); font-weight:400; font-style:italic; }
@font-face {  font-family: 'Segoe UI';  src:  url("../fonts/Segoe_UI_Bold.WOFF") format('woff'); font-weight:700; font-style:normal; }
@font-face {  font-family: 'Segoe UI';  src:  url("../fonts/Segoe_UI_Bold_Italic.WOFF") format('woff'); font-weight:700; font-style:italic;}

/* ============= LOAD */
body {  -webkit-animation: fadein 1s;  -moz-animation: fadein 1s; -ms-animation: fadein 1s; -o-animation: fadein 1s; animation: fadein 1s; }
@keyframes fadein { from { opacity: 0; } to   { opacity: 1; }}
@-moz-keyframes fadein { from { opacity: 0; } to   { opacity: 1; }}
@-webkit-keyframes fadein { from { opacity: 0; } to   { opacity: 1; }}
@-ms-keyframes fadein { from { opacity: 0; } to   { opacity: 1; }}
@-o-keyframes fadein { from { opacity: 0; } to   { opacity: 1; }}

.open-info, .toggle-footer { display:none!important; } 

.wide>.container { max-width: 92%; }
.narrow>.container { max-width: 55%; }

.logo-top { position:fixed; width:80px; top: 1rem; right:7.5rem; z-index:99999;}

/* ALL WHITE */
.white, .white p, .white h1, .white h2, .white h3, .white h4, .white h5, .white h6, .white span, .white strong, .white bold, .white a, .white em, .white strong { color: white; }
#main .white A.tooltip-element, #main .white span.tooltip-element { color:white!important; }
.white svg.icon { fill: white; }
.white h4::after { background:white; }
.infobtn.white a { color: black!important; }


/* POSITIONIERUNG */
.flex-center .row, .flex-center { display:flex; align-items:center; }

/* OFF CANVAS */
#onepage-offcanvas { width:30vw; display:none;  }
div#offcanvas-toggle { color: black; background: black; width: 2.4rem; height: 2.4rem; border: none; border-radius: 0.4rem; overflow: hidden; position: absolute;
 top: 1rem; right: 1rem; left:-3.5rem; display: flex; align-items: center; font-size: 0; text-align: center; margin: 0; clip-path:unset; }
div#offcanvas-toggle::after { content: ''; background: url("img/menu.svg") black no-repeat; background-size:contain;
 position: absolute;  right: 7px; top: 7px; width: 24px; height: 24px; }
#offcanvas-content { padding: 30px; }
#onepage-offcanvas * { font-family: 'Vollkorn',serif!important; }
#onepage-offcanvas h2 {  font-size: 27px; padding-right:50px; line-height: 110%; text-transform:none; text-align:left; }
#onepage-offcanvas img { width:50%; }
#onepage-offcanvas ul:not(.aside-menu) { list-style:none; padding:0; display:flex; align-items: flex-start;  }
#onepage-offcanvas ul:not(.aside-menu) li { margin-right:10px;  }
#onepage-offcanvas ul:not(.aside-menu) li a {  font-size: 14px; font-weight: normal; text-decoration: none; background: white; color: black!important; padding: 2px 8px; }
#onepage-offcanvas ul li:not(.active) a:hover { border-bottom:1px solid goldenrod; color: goldenrod!important; }
ul.aside-menu { list-style: none; padding:0; } 
ul.aside-menu li a { font-size: 14px; line-height: 120%; font-weight:normal; display: block; text-decoration:none!important; }
ul.aside-menu li:not(.active) a:hover { color: goldenrod!important; border:none!important; }
ul.aside-menu .inactive { display:none; }
ul.aside-menu li { padding: 10px 0;}
ul.aside-menu li.active { width:30vw; position:relative; left:-45px; background: white; color: black!important; padding-left:45px; }
#offcanvas-content ul.aside-menu li.active a { color: black!important; }
div#offcanvas-content svg { width: 160px; }

/* LANG MENU */
.triangle{display:none}
nav.language-navigation ul {top:1rem;position:fixed;display:flex;flex-direction:column}
.language-navigation li {transition:all .2s;background:black;border-radius:4px;width:2rem;height:2rem;line-height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column}
.language-navigation li * { background: none!important; }
#header .language-navigation li a{color:white; font-family:'Segoe UI',sans-serif!important; background:none!important; display:flex;width:100%!important;align-items:center;justify-content:center;font-size: 0.85rem;}
#header .language-navigation li + li { margin-top:5px; }
.language-navigation li.active, .language-navigation li.active a { background: white!important; color: black!important; }
@media screen and (max-width:1160px) { nav.language-navigation ul { flex-direction: row!important;} #header .language-navigation li + li { margin-top:0;} #header .language-navigation li.active {margin-top:5px;}#header .language-navigation li:not(.active):hover { margin-left:5px!important; margin-top:5px;}}
#header .language-navigation li.active { box-shadow: 1px 1px 3px rgb(0 0 0 / 30%); }
#header .language-navigation li:not(.active):hover{margin-left:10px}

/* FULLSIZE BILDER */
#content>.container {  max-width: 100%; }
.fullsize * {  margin: 0 auto; padding: 0; }
.fullsize img { max-width: 100%; width: 100%; }

/* MODAL */
.block.gridelement.modal, .modal { position: fixed; background: rgba(0,0,0,0.9); z-index: 999999; height:100vh!important; width: 100vw!important; }
.modal * { color:white; align-items:center; }
.modal {  cursor: url(/fileadmin/inhalte/art-es/img/close.svg); }
.modal>.container { display: flex; align-items: center; height: 100%; }
.cc-window.cc-banner.cc-type-info.cc-theme-block.cc-bottom { display:none; }

/* Lightbox */
.mfp-gallery, .mfp-gallery * { z-index: 999999; }
.mfp-fade.mfp-bg.mfp-ready { z-index: 999999; background:black; opacity:0.9; }
.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close { z-index: 1000001; right: 2rem; width: 44px; text-align: center; }
button.mfp-close svg.icon { margin: 11px auto 0 6px; }

/* CREDITS TABLE */
table td { padding: 10px 20px 10px 12px; background: rgba(0,0,0,0.05); margin: 2px 0; }
table { background: white; border-collapse: separate; border-spacing: 0 2px; }

/* TOOLTIPS */
.tt { color: #1f4f6e; position: relative; cursor: pointer; }
.tt * { color:white; font-size:0.8rem; } 
.tt span { opacity: 0; visibility: hidden; position: absolute; border-radius: 8px; width: 14rem; background: #1f4f6e; padding: 12px 16px; color: white; transition: visibility 1s, opacity 0.5s; /* margin: 40px auto 0 -50px!important; */ top:0; left:10px; z-index: 5; transition-delay: 0.2s; }
.tt span::before { content: ''; background: #1f4f6e; position: absolute; width: 22px; height: 22px; margin: -19px auto 0 46px; border-radius: 3px;  transform: rotate(-45deg); z-index: 0; }
.tt:hover span { opacity: 1;  visibility: visible;  }

/* BILDERTAUSCH */
.change .row:last-of-type { position: absolute; top: 0; width: 100%; transition: opacity 1s; opacity:0;  cursor: pointer; }
.change .row:last-of-type:hover {  opacity: 1; }
.change .row:first-of-type { display: flex; align-items:center; justify-content:center; }
.change .row:first-of-type::after { content: url("img/cursor.svg"); width: 4rem; height: auto; display: block; position: absolute; top: 1.5rem; right: 2rem;z-index: 1; transition:all 3s;  }
.change:hover .row:first-of-type::after { opacity:0; z-index:0;  transition:all 1s; }
.change .row:first-of-type figure { position: relative; z-index: 0; }
.change .col-12 { position:relative; }
.change.zoom figure { overflow:hidden; }


/* FOOTER */
footer#footer { font-family: 'Segoe UI', sans-serif; color: white; background: black; }
footer#footer * { color: white;font-family: 'Segoe UI', sans-serif; font-size: 16px; }
#footer h5 { font-size: 30px; font-weight:normal; text-transform:none; }
#footer .logo img {  margin: 0 0 1rem 0;  width: 60%; }
#footer h1 {  font-size: 27px;  padding-right: 40px; font-weight: normal; text-align:left; font-style: normal; }
#footer h1 + p { padding-right: 30px; font-style: normal; font-weight:normal; }
#footer { border: none; margin-top:100px; z-index:1!important; }
#footer img { transition:all 0.2s; }
div#c8135 .ce-gallery .row { display: flex; align-items: center; }


@keyframes topbottom {
  from { background-position-y: 0; width:50vw; }
  to { background-position-y: -10vh; width:50vw; }
}

a{word-wrap: break-word;}

/*  B U T T O N  */
.infobtn { display: flex; position: absolute; width: 15rem; height: 15rem; border-radius: 170px; background: goldenrod; color: white; align-items: center; text-align: center; padding: 30px; flex-wrap: wrap; right: 0; top: 16rem; }


/* SVG color */
svg.white * { fill:white; } 
svg.black * { fill:black; } 


/* Animated Image Fix */
.animated-image-container .image { background-size: cover; }

/* Externe Links */
a[target=_blank]:not(.magnificpopup):not(.image.figure>a)::after { content:'\002192'; text-decoration: none!important; background: #191e23; color: white; height: 0.9rem; 
width: 0.9rem; font-size: 0.65rem; font-weight: bold; padding: 0px 2px; position: relative; top: -2px; left: 3px; margin: 0 5px 0 2px; }
a[target=_blank]:not(.magnificpopup):not(.image.figure>a):hover::after { opacity:0.8; }


/* TOOLTIP */
.tooltip{display:flex;align-items:center;justify-content:center;height:auto;position:absolute;top:20px!important;left:5px!important;line-height:120%;}
.tooltip *{margin:0!important position:unset!important;top:unset!important;height:auto}
.tooltip .arrow { display: none!important;}
.tooltip .tooltip-inner { padding:1rem;!important;}
.tooltip-inner, .tooltip { width: unset!important;min-width:8rem;max-width:20rem;font-size:0.8rem;}
.tooltip .arrow { display: none!important;}


/* IFRAME POPUP */
.iframe-content .container {padding: 0;}
#iframe-popup .iframe-content { max-width: 1140px; margin: 0 auto; max-height:100vh; }
#iframe-popup .iframe-content * { max-height:80vh; }
#iframe-popup { display: flex; align-items: center; justify-content: center; padding:5vw; }


/* Footer */
/* .large { font-size:1.4rem; font-family: 'Yantramanav', sans-serif; font-size:1rem; font-weight: 500; letter-spacing: 3px; text-transform:uppercase; } */

/* HOME BUTTON */
div#home{transition:all 0.2s;z-index: 999999999999999;position:fixed;right:1rem;top:1rem;}
div#home:hover{margin-right:5px; opacity:0.7;}
div#home:hover::after {content: 'Back to main page';position: relative;top: 2rem;bottom: 0;width: 130px;right: 0;font-family: 'YANTRAMANAV'; font-weight:600; text-align: right;font-size: 0.78em;letter-spacing: 0.75px;text-transform: uppercase;}
div#home svg{height:2rem;position:absolute;right:0}
div#home svg, div#home svg *{ fill:black!important;stroke:none; display: block; }


/* PROGRESS BAR */
.progress-container{width:100%;background-color:transparent;height:7px;display:block;}
.progress-bar{background-color:rgba(0,0,0,1);width:0%;display:block;height:inherit}
.fixed-bottom { z-index:99999;}


/* Tabelle */
table tr td { vertical-align:top; }

/* Global Sound Button */
i.material-icons.md-dark.state-stop::after{content:'Click here to activate sound effects';font-family:'YANTRAMANAV',sans-serif;font-size:0.9rem;margin-left:6px;text-transform:uppercase;
    letter-spacing: 0.75px;font-weight: 600;}
a#global-mute-scroll-audio{background:#fff;border-radius:4px;border:none!important;text-decoration:none!important;box-shadow: 1px 1px 3px rgb(0 0 0 / 30%); }
a#global-mute-scroll-audio.state-stop { left: 50%; bottom:10%;transform: translateX(-50%);}
i.material-icons{display:flex;align-items:center;justify-content:center}

.sdg {
    border: 1px solid black;
    border-radius: 24px;
    padding: 4rem;
}

.sdg .collapse-header {

    border-bottom: 1px solid black;
    padding-bottom: 16px;
}

.sdg .collapse-content {margin-left: 0px;}

.sdg h5.collapse-header a {
    line-height: 140%;
    display: flex;
    justify-content: space-between;
}


.bs .collapse-content {margin-left: 0px;}

.bs h5, .bs h5 * {

    font-size: 0rem;
}

h5, h5 *, h5 a