@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;700&family=Montserrat:wght@300;400;600&display=swap');
html {scroll-behavior: smooth}
:root { --sr: #99202B; --go: #D4AF37; --sd: #F5EFE6; --nb: #0B1C2A; --tc: #333}
body {hyphens: auto;margin: 0;font-family: 'Montserrat', sans-serif;background-color: var(--sd);color: var(--tc);line-height: 1.6;overflow-x: hidden}
h1, h2, h3, h4,.time-h2 {font-family: 'Cormorant Garamond', serif;font-weight: 700;margin: 0}
.time h2, #reise h2, .time-h2 {text-shadow: 1px 1px 5px #fff}
.time-h2 {font-weight: 900;font-size: 3rem !important; text-decoration: underline;text-decoration-color: darkred;text-decoration-thickness: 1px}}
.time h3 {text-decoration: none}
.container {max-width: 1280px;margin: 0 auto;padding: 2rem 2rem}
.main-header {position: absolute;top: 0; left: 0; width: 100%;display: flex; justify-content: space-between; align-items: center;padding: 0.5rem 0.1rem; z-index: 10; box-sizing: border-box}
.logo {font-family: 'Cormorant Garamond', serif; font-size: 1.0rem;color: #fff; text-decoration: none}
.logo img {transition: all 2s;width: 100%; max-width: 350px}
.main-nav a {color: #fff; text-decoration: none; margin-left: 2rem;font-weight: 600; transition: color 0.3s ease}
.fixed .main-nav a:hover {color: black}
.main-nav a:hover { color: var(--go)}
.hero {height: 100vh;display: flex; justify-content: center; align-items: center;text-align: center; color: var(--sr); position: relative;background-image: url('saf0.jpg');background-size: cover; background-position: center;background-attachment: fixed}
.safron .hero {height: 100vh;display: flex; justify-content: center; align-items: center;text-align: center; color: var(--sr); position: relative;background-image: url('usb1.jpeg');background-size: cover; background-position: center;background-attachment: fixed}
.firmas .hero {height: 100vh;display: flex; justify-content: center; align-items: center;text-align: center; color: var(--sr); position: relative;background-image: url('imker.jpeg');background-size: cover; background-position: center;background-attachment: fixed}
.hero::before {content: ''; position: absolute; top: 0; left: 0;width: 100%; height: 100%;background: rgba(11, 28, 42, 0.6)}
.hero-content {position: relative; z-index: 5;animation: fadeIn 2s ease-in-out;padding: 200px;background: url("paper.png");background-size:contain;background-repeat: no-repeat;background-position: center}
.safron .hero-content {position: relative; z-index: 5;animation: fadeIn 2s ease-in-out;padding: 20px;background: rgba(255,255,255,0.6); width: 1200px}
.text-content-intro {max-width: 1200px;width: 100%;font-weight: 600}
.hero h1 { font-size: 4.5rem; margin-bottom: 0.5rem; letter-spacing: 2px; color: black}
.hero p { font-size: 1.5rem; font-weight: 300; margin-bottom: 2rem}
.cta-button {display: inline-block; background-color: var(--go);color: #fff; padding: 1rem 2.5rem; text-decoration: none;font-size: 1rem; font-weight: 600; border: 2px solid var(--go);border-radius: 5px; transition: all 0.3s ease}
.cta-button:hover { background-color: transparent; color: var(--go)}
#reise { background: url("papy.jpeg");background-size:cover;background-repeat: no-repeat; z-index: 9}
.ueber, .nachh { background: url("hc.jpg") !important;background-size:cover !important;background-repeat: no-repeat  !important; background-clip: fixed}
.teaser-section { display: flex; align-items: center; gap:2rem}
.teaser-section .text-content { flex: 1}
.teaser-section .image-content { flex: 1}
.teaser-section img {width: 100%; height: auto}
.firmas .teaser-section img, .safron .teaser-section img {width: 40%; height: auto; display: block; margin: 20px auto}
.vt .teaser-section img, .nhh img {width: 30px}
.teaser-section h2 { font-size: 3rem; color: var(--nb)}
.teaser-section p { font-size: 1.1rem; margin-bottom: 1.5rem}
.teaser-section .secondary-button {display: inline-block; background-color: transparent; color: var(--sr); border: 2px solid var(--sr); padding: 0.8rem 2rem;text-decoration: none; transition: all 0.3s ease}
.teaser-section .secondary-button:hover { background-color: var(--sr); color: #fff}
.teaser-reverse { flex-direction: row-reverse}
.time {height: 100%;background-image: url('saf.jpeg');background-size: cover; background-position: center;background-attachment: fixed;border-top: 10px solid}
.timeline-intro { color:#fff;text-align: center;max-width: 800px;margin: 0 auto 5rem auto}
.timeline-intro h2 {font-size: 5.5rem;color: var(--nb)}
.timeline-intro p {font-size: 1.2rem;font-weight: 600}
.timeline {position: relative;max-width: 800px;margin: 0 auto;list-style: none;padding: 0}
.timeline::after { content: '';position: absolute;width: 3px;background-color: var(--go);top: 0;bottom: 0;left: 50%;margin-left: -1.5px}
.timeline-event {padding: 10px 40px;position: relative;width: 50%;box-sizing: border-box;opacity: 0;transform: translateY(50px);transition: all 0.6s ease-out}
.timeline-event.left { left: 0}
.timeline-event.right { left: 50%}
.timeline-event.is-visible {opacity: 1;transform: translateY(0)}
.timeline-event::after { content: '';position: absolute;width: 20px;height: 20px;right: -10px;top: 28px;background-color: var(--sd);border: 4px solid var(--go);border-radius: 50%;z-index:1}
.timeline-event.right::after { left: -10px}
.timeline-content {padding: 20px 30px;background-color: #fff;position: relative;border-radius: 6px;box-shadow: 0 5px 15px rgba(0,0,0,0.05)}
.timeline-content h3 { color: var(--sr); font-size: 1.5rem}
.main-footer {background-color: var(--nb);color: var(--sd); text-align: center;padding: 3rem 2rem}
.main-footer p { margin: 0; font-weight: 300}
@keyframes fadeIn {from { opacity: 0; transform: translateY(20px); }to { opacity: 1; transform: translateY(0)}}
.fixed {position: fixed;top:0; left:0;width: 100%;background: url("menu.png");height: 110px; opacity: 0.5; transition: all 2s}
.fixed:hover, .fixed:focus {opacity: 1}
.fixed .logo img {width: 300px}
#reise {padding: 60px 0}
.vid {object-fit: cover;width: 100vw;height: 100vh;position: absolute;top: 0;left: 0}
h3 {font-weight: 900;font-size: 28px;text-decoration: underline;text-decoration-color: darkred;text-decoration-thickness: 5px}
.footer {background-color: #222; color: #fff; padding: 50px 0;background: url("bem-bg.png") no-repeat center #222;background-size: 350px}
.footer-container {display: flex;justify-content: space-around; max-width: 1200px;margin: 0 auto;padding: 0 20px;flex-wrap: wrap}
.footer-column {flex: 1; min-width: 250px; padding: 0 15px}
.footer-column h3 {font-size: 1em;font-weight: bold;letter-spacing: 1px;margin: 0 0 20px}
.footer-column p, .footer-column li {font-size: 0.9em;line-height: 1.6;margin: 5px 0}
.footer-column ul {list-style: none;padding: 0;margin: 0}
.footer-column a, .footer a {color: #fff;text-decoration: none}
.footer-column a:hover {text-decoration: underline}
.topper.aktiv {position: fixed;right: 20px;bottom: 20px; z-index: 99999; display: block}
.topper.aktiv a:hover {background: rgba(155,34,45,0.9)}
.topper.aktiv a {display: block;color: #fff;font-weight: bold;text-decoration: none;font-size: 18px;font-family: 'Cormorant Garamond', serif;background: rgba(155,34,45,0.5);padding: 25px; border-radius: 360px; border: solid 2px #fff; transition: all 2s;}
.mobile {display: none}
.hide {display: none}
.hide-m {display: block}
#mobile-menu-overlay {display: none}
.cl-effect-9 a {margin: 0 15px; padding: 10px 10px 0}
.cl-effect-9 a::before {position: absolute; top: 0; left: 0; width: 100%;height: 2px; background: #fff;  content: ''; opacity: 0.2; -webkit-transition: opacity 0.3s, height 0.3s;-moz-transition: opacity 0.3s, height 0.3s;  transition: opacity 0.3s, height 0.3s;}
.cl-effect-9 a::after {top: 100%;opacity: 0; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; -moz-transition: -moz-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s;-webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); transform: translateY(-10px);}
.cl-effect-9 a span:first-child {z-index: 2; display: block; font-weight: 600}
.cl-effect-9 a span:last-child {z-index: 1; display: block; padding: 1px 0 0 0; color: rgba(255,255,255,0.4); text-shadow: none;text-transform: none; font-style: italic; font-size: 0.75em; font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif; opacity: 0; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;-moz-transition: -moz-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s;-webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); transform: translateY(-100%);}
.cl-effect-9 a:hover::before,.cl-effect-9 a:focus::before {height: 6px}
.cl-effect-9 a:hover::before,.cl-effect-9 a:hover::after,.cl-effect-9 a:focus::before,.cl-effect-9 a:focus::after {opacity: 1; -webkit-transform: translateY(0px);-moz-transform: translateY(0px); transform: translateY(0px);}
.cl-effect-9 a:hover span:last-child, .cl-effect-9 a:focus span:last-child {opacity: 1; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); transform: translateY(0%);}
nav a {position: relative; display: inline-block; margin: 15px 25px; outline: none; color: #fff; text-decoration: none; text-transform: uppercase;  font-weight: 900; text-shadow: 1px 0 10px rgba(255,255,255,0.3);  font-size: 1.1em;}
nav a:hover,nav a:focus { outline: none}
.cl-effect-9 a.aktiv::before { height: 6px; opacity: 1}
.bayreuth-trifft { position: relative;  z-index: 1}
#reise { position: relative; z-index: 9; background-color: #fff;  border-top: 10px solid}
.safron .text-content a, .vt .text-content a, .kontakt .text-content-intro a {font-weight: bold; color: #000; text-decoration: underline; text-decoration-thickness: 1px}
.partner-list {display: grid;grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; list-style: none; padding: 0; margin: 2rem 0}
.partner-list li {background-color: #fffs; border: 1px solid #eee; border-left: 4px solid #D4AF37;  padding: 1.5rem; border-radius: 5px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease;}
.partner-list li:hover {transform: translateY(-5px);box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08)}
.partner-list li strong {display: block; font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; font-weight: 700;color: #0B1C2A; margin-bottom: 0.75rem}
.partner-list li {font-family: 'Montserrat', sans-serif; font-size: 1rem; line-height: 1.6; color: #333}
.vt .hey {max-width:600px; width: 100% !important; margin: 0 auto; display: block}
@media (max-width: 1150px) {
h3 { font-size: 25px; text-decoration-thickness: 3px; margin: 0 0 10px}
.mobile {display: block}
.hide, .hide-m {display: none !important}
.main-header { flex-direction: column; padding: 1rem; display:none}
.main-nav { margin-top: 0.5rem}
.main-nav a { margin: 0 0.5rem}
.hero { background-attachment: scroll}
.hero-content {padding: 25px; background: rgba(255,255,255,0.7)}
.hero h1 { font-size: 1.8rem}
.hero p { font-size: 1.1rem}
.teaser-section, .teaser-reverse { flex-direction: column}
.teaser-section .secondary-button {background-color: #fff; display: block; text-align: center}
.timeline::after { left: 31px}
.timeline-event { width: 100%; padding-left: 70px; padding-right: 25px}
.timeline-event.right { left: 0%}
.timeline-event.right::after { left: 28px}
.timeline-event::after { left: 28px}
body {line-height: 1.2}
.container {padding: 1rem}
.mnav {background: rgba(155,34,45,0.8); position: fixed; top: 0; z-index: 999; width: 100%}
.mnav .logo img {width: 60%; height: auto; margin: 5px}
.footer {background:#222}
.footer-column h3 {margin: 20px 0}
#mobile-menu-overlay {position: fixed; top: 50%; left: 50%; width: 100vw; height: 100vh; transform: translate(-50%, -50%) scale(0); background-size: cover !important; background: url("cro.png") center; background-color: #0B1C2A; display: flex; align-items: center; justify-content: center; z-index: 1000; visibility: hidden; opacity: 0; border-radius: 50%; transition: all 0.6s cubic-bezier(0.8, 0, 0.2, 1);}
.mobile-menu-nav ul {list-style: none; padding: 0; margin: 0; text-align: center}
.mobile-menu-nav li {opacity: 0; transform: translateY(20px); transition: opacity 0.4s ease, transform 0.4s ease}
.mobile-menu-nav a {color: #fff; text-decoration: none; font-family: 'Cormorant Garamond', serif; font-size: 2.5rem; line-height: 1.8; display: block}
body.menu-is-open {overflow: hidden}
body.menu-is-open #mobile-menu-overlay {transform: translate(-50%, -50%) scale(1); visibility: visible; opacity: 1; border-radius: 0; z-index: 99}
body.menu-is-open .mobile-menu-nav li { opacity: 1;  transform: translateY(0)}
#nav-icon2 span { display: block; position: absolute; height: 5px; width: 30px; background: #fff; opacity: 1; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out;  transition: .25s ease-in-out;}
#nav-icon2 span:nth-child(even) { left: 50%; border-radius: 0 9px 9px 0}
#nav-icon2 span:nth-child(odd) { left:0px; border-radius: 9px 0 0 9px}
#nav-icon2 span:nth-child(1), #nav-icon2 span:nth-child(2) { top: 0px}
#nav-icon2 span:nth-child(3), #nav-icon2 span:nth-child(4) {top: 16px}
#nav-icon2 span:nth-child(5), #nav-icon2 span:nth-child(6) { top: 32px}
#nav-icon2.open span:nth-child(1),#nav-icon2.open span:nth-child(6) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg)}
#nav-icon2.open span:nth-child(2),#nav-icon2.open span:nth-child(5) {-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg)}
#nav-icon2.open span:nth-child(1) {  left: 5px; top: 7px}
#nav-icon2.open span:nth-child(2) { left: calc(50% - 5px); top: 7px}
#nav-icon2.open span:nth-child(3) { left: -50%; opacity: 0}
#nav-icon2.open span:nth-child(4) { left: 100%; opacity: 0}
#nav-icon2.open span:nth-child(5) { left: 5px; top: 29px}
#nav-icon2.open span:nth-child(6) { left: calc(50% - 5px);  top: 29px}
.burger {width: 60px; position: absolute; margin: 0 auto; top:25px; right:15px; z-index: 999999}
.open < .mnav.hide {display: block}
}
#silktide-wrapper {--focus: 0 0 0 2px #ffffff, 0 0 0 4px #000000, 0 0 0 6px #ffffff; --boxShadow: -5px 5px 10px 0px #00000012, 0px 0px 50px 0px #0000001a; --fontFamily: Helvetica Neue, Segoe UI, Arial, sans-serif; --primaryColor: #F9D000; --backgroundColor: #050505; --textColor: #F4F0DF; --backdropBackgroundColor: #00000033; --backdropBackgroundBlur: 0px; --cookieIconColor: #050505; --cookieIconBackgroundColor: #F4F0DF; position: fixed; bottom: 0; right: 0; width: 100%; height: 100%; z-index: 99999; pointer-events: none; border: 0px; display: flex; justify-content: center;align-items: center}
#silktide-backdrop-global {position: fixed; top: 0;left: 0; width: 100%; height: 100%; pointer-events: auto; border: 0px; display: none;}
#silktide-wrapper a {all: unset; display: inline-block;color: var(--primaryColor);text-decoration: underline;}
#silktide-wrapper a:hover {cursor: pointer;color: var(--textColor);}
#silktide-wrapper a:focus,#silktide-wrapper #silktide-banner button:focus,#silktide-wrapper #silktide-modal button:focus,#silktide-wrapper #silktide-cookie-icon:focus {outline: none; box-shadow: var(--focus); border-radius: 5px;}
#silktide-wrapper #silktide-cookie-icon:focus {border-radius: 50%;}
#silktide-wrapper .st-button {color: var(--backgroundColor); background-color: var(--primaryColor);border: 2px solid var(--primaryColor); padding: 10px 20px; text-decoration: none; text-align: center; display: inline-block; font-size: 16px; line-height: 24px; cursor: pointer; border-radius: 5px;}
#silktide-wrapper .st-button--primary:hover {background-color: var(--backgroundColor); color: var(--primaryColor);}
#silktide-wrapper .st-button--secondary {background-color: var(--backgroundColor); color: var(--primaryColor);}
#silktide-wrapper .st-button--secondary:hover {background-color: var(--primaryColor); color: var(--backgroundColor);}
#silktide-banner {font-family: var(--fontFamily); color: var(--textColor); background-color: var(--backgroundColor); box-sizing: border-box; padding: 32px; border-radius: 5px; pointer-events: auto; border: 0px; position: fixed; bottom: 16px; right: 16px; width: 600px; overflow: auto; max-width: calc(100% - 32px); max-height: calc(100vh - 32px); transform: translate(0, -20px); opacity: 0; animation: silktide-slideInDown 350ms ease-out forwards; animation-delay: 0.3s;box-shadow: -5px 5px 10px 0px #00000012, 0px 0px 50px 0px #0000001a;}
#silktide-banner:focus {border-radius: 50%;}
#silktide-banner.center {top: 50%; left: 50%; bottom: auto; right: auto; position: fixed;transform: translate(-50%, calc(-50% - 20px)); animation: silktide-slideInDown-center 350ms ease-out forwards;}
#silktide-banner.bottomLeft {bottom: 16px; left: 16px; position: fixed;}
#silktide-banner.bottomCenter {bottom: 16px; left: 50%; position: fixed; transform: translate(-50%, -20px);animation: silktide-slideInDown-bottomCenter 350ms ease-out forwards;}
#silktide-banner .preferences {display: flex; gap: 5px; border: none; padding: 15px 0px; background-color: transparent; color: var(--primaryColor); cursor: pointer; font-size: 16px;}
#silktide-banner .preferences span {display: block;white-space: nowrap;text-decoration: underline;}
#silktide-banner .preferences span:hover {color: var(--textColor);}
#silktide-banner .preferences:after {display: block; content: '>'; text-decoration: none;}
#silktide-banner p {font-size: 16px; line-height: 24px; margin: 0px 0px 15px;}
#silktide-banner a {display: inline-block; color: var(--primaryColor); text-decoration: underline; background-color: var(--backgroundColor);}
#silktide-banner a:hover {color: var(--textColor);}
#silktide-banner a.silktide-logo {display: flex; align-items: center; justify-content: center; fill: var(--primaryColor); margin-left: auto; width: 48px; height: 48px;}
#silktide-banner .actions { display: flex; gap: 16px; flex-direction: column; margin-top: 24px;}
@media (min-width: 600px) {
#silktide-banner .actions {flex-direction: row; align-items: center;}}
#silktide-banner .actions-row {display: flex; gap: 16px; flex-direction: row; align-items: center; justify-content: space-between; flex-grow: 1;}
#silktide-modal {display: none; pointer-events: auto; overflow: auto; width: 800px; max-width: 100%; max-height: 100%; border: 0px; transform: translate(0px, -20px); opacity: 0; animation: silktide-slideInUp-center 350ms ease-out forwards; box-shadow: -5px 5px 10px 0px #00000012, 0px 0px 50px 0px #0000001a; font-family: var(--fontFamily); color: var(--textColor); flex-direction: column; padding: 30px; background-color: var(--backgroundColor); border-radius: 5px; box-sizing: border-box;}
#silktide-modal header {display: flex;justify-content: space-between; align-items: center; margin-bottom: 20px; gap: 16px;}
#silktide-modal h1 {font-family: var(--fontFamily); color: var(--textColor); font-size: 24px; font-weight: 500; margin: 0px;}
#silktide-modal .modal-close {display: inline-flex; border: none; padding: 13px; border: 0px; cursor: pointer; background: var(--backgroundColor); color: var(--primaryColor);}
#silktide-modal .modal-close svg {fill: var(--primaryColor);}
#silktide-modal section {flex: 1;margin-top: 32px;}
#silktide-modal section::-webkit-scrollbar {display: block; width: 5px;}
#silktide-modal section::-webkit-scrollbar-thumb {background-color: var(--textColor); border-radius: 10px;}
#silktide-modal p {font-size: 16px; line-height: 24px; color: var(--textColor); margin: 0px 0px 15px;}
#silktide-modal p:last-of-type {margin: 0px;}
#silktide-modal fieldset {padding: 0px; border: none; margin: 0px 0px 32px;}
#silktide-modal fieldset:last-of-type {margin: 0px;}
#silktide-modal legend { padding: 0px; margin: 0px 0px 10px; font-weight: 700; color: var(--textColor); font-size: 16px;}
#silktide-modal .cookie-type-content { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
#silktide-modal .switch { flex-shrink: 0; position: relative; display: inline-block; height: 34px; width: 74px; cursor: pointer;}
#silktide-modal .switch:focus-within { outline: none; box-shadow: var(--focus); border-radius: 25px;}
#silktide-modal .switch input { opacity: 0; position: absolute;}
#silktide-modal .switch__pill {position: relative; display: block; height: 34px; width: 74px; background: var(--textColor); border-radius: 25px;}
#silktide-modal .switch__dot {position: absolute; top: 2px; left: 2px; display: block; height: 30px; width: 30px; background: var(--backgroundColor);border-radius: 50%; transition: left 150ms ease-out;}
#silktide-modal .switch__off, #silktide-modal .switch__on { text-transform: uppercase; font-size: 15px; font-weight: 500; color: var(--backgroundColor); position: absolute; top: 7px; right: 8px; transition: right 150ms ease-out, opacity 150ms ease-out;}
#silktide-modal .switch__off {opacity: 1;}
#silktide-modal .switch__on {opacity: 0;}
#silktide-modal .switch input:checked + .switch__pill {background: var(--primaryColor);}
#silktide-modal .switch input:checked ~ .switch__dot {left: calc(100% - 32px);}
#silktide-modal .switch input:checked ~ .switch__off {right: calc(100% - 32px); opacity: 0;}
#silktide-modal .switch input:checked ~ .switch__on {right: calc(100% - 34px); opacity: 1;}
#silktide-modal .switch input:disabled + .switch__pill { opacity: 0.65; cursor: not-allowed;}
#silktide-modal footer {display: flex;flex-direction: column;gap: 16px;margin-top: 24px;}
@media (min-width: 600px) {
#silktide-modal footer {flex-direction: row; align-items: center;}}
#silktide-modal footer a {margin-left: auto;padding: 14px 0px;}
#silktide-cookie-icon {display: none; position: fixed; bottom: 10px;left: 10px; justify-content: center; align-items: center; width: 60px; height: 60px; border-radius: 50%; padding: 0px; border: none; background-color: var(--cookieIconColor); cursor: pointer; box-shadow: 0px 0px 6px 0px #0000001a; pointer-events: auto; animation: silktide-fadeIn 0.3s ease-in-out forwards;}
#silktide-cookie-icon.bottomRight {left: auto; right: 10px;}
#silktide-cookie-icon svg { fill: var(--cookieIconBackgroundColor);}
#silktide-backdrop {display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--backdropBackgroundColor); backdrop-filter: blur(var(--backdropBackgroundBlur)); pointer-events: all;}
@keyframes silktide-fadeIn {from {opacity: 0; }to { opacity: 1; }}
@keyframes silktide-slideInDown {from {opacity: 0;transform: translateY(-20px);} to { opacity: 1;transform: translateY(0);}}
@keyframes silktide-slideInDown-center {from {opacity: 0; transform: translate(-50%, calc(-50% - 20px)); }to { opacity: 1; transform: translate(-50%, -50%);}}
@keyframes silktide-slideInDown-bottomCenter {from {opacity: 0; transform: translate(-50%, -20px);}to {opacity: 1; transform: translate(-50%, 0);}}
@keyframes silktide-slideInUp-center { from {opacity: 0; transform: translate(0px, 20px);} to { opacity: 1; transform: translate(0px, 0px);} }