.menu .live { display: none; }
#tour { display: none; } .tnp-subscription { width: 80%; max-width: 500px; margin: 40px auto 0 auto; }
.tnp-subscription label { padding: 0; }
.tnp-subscription div.tnp-field { margin: 0; }
div.tnp-field.tnp-field-email { position: relative; display: flex; justify-content: center; align-items: top; }
.tnp-subscription input[type=email] { border-radius: 0; background: var(--white); color: var(--black); font-size: 16px; margin-bottom: 0; width: 100%; max-width: 340px; display: block; padding: 10px; }
div.tnp-field.tnp-field-button { width: auto; height: 100%; margin: 0; }
.tnp-field input[type="submit"] { border: 2px solid var(--white); background: var(--blue); width: auto; height: 100%; font-weight: 600; font-size: 1em; }
.tnp-field input[type="submit"]:hover { }
.tnp-subscription label { font-size: 0.75em; font-weight: 400; color: var(--white); text-align: center; }
.tnp-privacy-field a { color: var(--white); }
.tnp-privacy-field { margin-top: 20px !important; }
@media screen and (max-width: 524px) {
.tnp-subscription { width: 100%; }
.tnp-field input[type="submit"] { border: 1px solid var(--white); }
} section#break { background: var(--black); min-height: 100vh; }
#rotte-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 594px; height: auto; z-index: 99; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; padding: 30px 0; background: var(--white); background: linear-gradient(to right bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05) ); backdrop-filter: blur(2em); -webkit-backdrop-filter: blur(2em); border-radius: 2px; }
#rotte-container .col { width: auto; color: var(--white); padding: 0 30px; } 
#rotte-container .col p { color: var(--white); font-size: 2em; margin-top: 20px; } 
.rotte-btn { display: flex; justify-content: center; align-items: center; flex-direction: column; }
#rotte-container a { color: var(--white); text-decoration: underline; } 
#Rotte-Logo { fill: var(--white); height: auto; max-height: 240px; width: 100%; }
#rotte-container .btn { background: var(--blue); font-size: 1.5em; margin: 0 auto; display: block; width: 100%; margin-top: 20px; }
#rotte-container .btn a { color: var(--white); text-decoration: none; } 
#rotte-container .btn:first-of-type { margin-bottom: 20px; } .bg-img-wrap { clip: rect(0, auto, auto, 0); position: absolute; top: 0; left: 0; width: 100vw; height: 100%; }
.bg-img { top: 0; left: 0; width: 100vw; height: 100%; background-size: cover; background-position: center center; background-repeat: no-repeat; opacity: 1; background-attachment: scroll; position: fixed; transform: translateZ(0); will-change: transform; }
@media (max-width: 768px) { 
.bg-img { background-attachment: scroll !important; position: fixed !important;  width: 100% !important; height: 100vh !important; }
}
@media screen and (max-width: 640px) {
#rotte-container { width: auto; min-width: max-content; flex-direction: column; }
#rotte-container .col p { margin-top: 10px; margin-bottom: 10px; }
#rotte-container .btn:first-of-type { margin-bottom: 0px; }
#Rotte-Logo { max-height: 180px; }
}
@media screen and (max-width: 560px) {
#rotte-container { min-width: 80%; }
} #homeplsbox.wsatw { padding: 40px; background: var(--white); box-shadow: 0 10px 15px rgba(0,0,0,.1); }
#homeplsbox.wsatw h2 { font-size: 2em; color: #ca3f38 !important; text-shadow: none !important; }
#homeplsbox.wsatw span, #homeplsbox.wsatw .btn.pulse { display: block; font-family: 'Whiteshoes', cursive !important; line-height: 1;  }
#homeplsbox.wsatw span.showdate { color: #ca3f38; font-size: 3em; margin-top: 4px; }
#homeplsbox.wsatw span.showloc { color: #ca3f38; font-size: 2em; }
#homeplsbox.wsatw .btn.pulse { background: #ca3f38; color: #ffffff; width: fit-content; padding: 8px 16px; margin: 20px auto 0 auto !important; line-height: initial; }
#homeplsbox.wsatw .btn.pulse a { padding: 0 !important; }
@media screen and (max-width: 524px) {
#homeplsbox.wsatw { padding: 20px; }
#homeplsbox.wsatw h2 { font-size: 1.25em !important; }
#homeplsbox.wsatw span.showdate { font-size: 2em; }
#homeplsbox.wsatw span.showloc { font-size: 1.25em; }
#homeplsbox.wsatw .btn.pulse { font-size: 1.25em; padding: 10px 16px 8px 16px; }
}
.music-accordion h3 { font-size: 3em; }
@media screen and (max-width: 524px) { 
.music-accordion .cyhm img { object-position: top !important; }
.music-icon.deezer { display: none !important; }
} div#home-img-box.first img { filter: drop-shadow(0px 0px 4px rgba(50,47,47,0.25)); }
div#home-img-box.second { filter: drop-shadow(0px 0px 4px rgba(50,47,47,0.15)); }
div#home-img-box.second { bottom: 240px !important; }
@font-face {
font-family: 'Whiteshoes'; font-display: swap;
src: url(https://www.theesprits.com/fonts/Teko-Bold.ttf) format("truetype");
}
#music-container h3, #home-contentbox h2, #music h2, .marquee { font-family: 'Whiteshoes', cursive !important; }
#home-container { background-position: center; }
#home { background: var(--red) !important; }
#home-contentbox { padding-top: 14%; }
#home-contentbox #countdown li, #home-contentbox #countdown li span { text-shadow: 0px 4px 8px rgba(50,47,47,0.35); color: var(--white) !important; }
#home-contentbox h2 { color: var(--white) !important; text-shadow: 0px 4px 8px rgba(50,47,47,0.35); font-size: 6em; margin-bottom: 0 !important; line-height: 0.9 !important; font-weight: normal !important; }
#home-contentbox .btn.pulse { margin-top: 30px !important; }
#countdown li span { font-size: 5em !important; }
#countdown-expired span.subtitle { color: var(--white) !important; }
#music h2, #home-contentbox .btn.pulse a, #music-container .subtitle { color: var(--white) !important; font-weight: normal !important; }
#music .topShadow { text-shadow: -3px 0 var(--red) !important; }
#music-container h3 { line-height: 0.9; font-size: 3.5em; }
.marquee { font-size: 7em !important; color: #2f94ac !important; }
@media screen and (max-width: 524px) { 
.scrolldown { display: none; }
#home-contentbox { padding-top: 0; margin-top: 25%; }
#home-contentbox h2 { font-size: 3.25em !important; text-shadow: none; }
#countdown li span { font-size: 3em !important; }
#home-contentbox .btn.pulse { margin-top: 10px !important; }
div#home-img-box.second { bottom: 0px !important; }
#music-container h3 { font-size: 2.5em; }
.marquee { font-size: 4em !important; line-height: 0.85 !important; }
}
#homeplsbox { text-align: center; }
#homeplsbox span.subtitle { font-size: 3em !important; } 
#homeplsbox a img { display: block; height: 1.65em; width: auto; }
#homeplsbox .btn:first-of-type { margin-right: 40px; }
@media screen and (max-width: 638px) { #homeplsbox a img { height: 1.3em; } }
@media screen and (max-width: 524px) { #homeplsbox a img { height: 1em; } #homeplsbox .btn:first-of-type { margin-right: 20px; } #homeplsbox span.subtitle { font-size: 1.5em !important; } #homeplsbox .btn.pulse a { padding: 0.3em 0.5em; } }
@media screen and (max-width: 358px) { #homeplsbox .btn:first-of-type { margin-right: 0px; } }
@media screen and (max-width: 524px) {.header-left, #follow-box {display: none !important;} }
.desktop { display: inherit; }
.tablet { display: none !important; }
.mobile { display: none !important; }
@media screen and (max-width: 768px) {.tablet { display: inherit !important; } }
@media screen and (max-width: 524px) { .desktop { display: none !important; } .mobile { display: inherit !important; } }
.ticket-btn { background: var(--blue); padding: 6px 12px; }
#shop-pinbox { padding: 0; margin: 0; height: 100vh; width: 100vw; }
.back-to-page-btn a { color: var(--white); background: var(--black); padding: 6px 12px; }
@media screen and (max-width: 768px) {
#CookieBoxTextDescription, p._brlbs-manage-btn a { font-size: 0.85em; }
} section#blog { height: auto; background: var(--blue); }
.panel.blog { min-height: inherit; }
section#blog h2 { color: var(--pink); margin: 0 0 60px 0; }
ul#blog-list { position: relative; z-index: 10; max-height: 100%; width: 100%; padding: 0; display: flex; flex-wrap: wrap; justify-content: space-around; align-items: flex-start; }
ul#blog-list li { width: 30%; margin: 0; padding: 0; background: var(--white); color: var(--blue); text-align: center;  } 
ul#blog-list li img { max-width: 100%; min-width: 100%; height: auto; max-height: 242px; min-height: 242px; object-fit: cover; } 
ul#blog-list li h3 { font-size: 2em; color: var(--blue); padding: 0 1%; margin: 10px 0; }
ul#blog-list li p { font-size: 1.4em; padding: 0 2.5%; margin: 0 0 20px 0; min-height: 60px; }
ul#blog-list li p:empty { display: none; }
a#blog-btn { font-size: 1.4em; display: inline-block; margin-bottom: 20px; background: var(--pink); color: var(--white); padding: 6px 12px; }
@media screen and (max-width: 984px) {
ul#blog-list li { width: 45%; }
ul#blog-list li:last-of-type { margin-top: 40px; }
}
@media screen and (max-width: 524px) {
ul#blog-list li { width: 95%; margin-top: 40px; }
ul#blog-list li:first-of-type { margin-top: 0px; }
ul#blog-list li p { min-height: inherit; }
} .single-post .entry-meta, .single-post .entry-footer, #comments, .single-post footer.footer { display: none; visibility: hidden; }
.single-post #content { position: relative; width: 100%; height: auto; min-height: 100vh; overflow: hidden; scroll-snap-align: start; padding-top: 100px; }
.single-post h1 { width: 100%; text-align: center; text-transform: uppercase; letter-spacing: -0.5px; font-weight: 600; font-size: 3.5em; margin: 0 0 40px 0; }
.single-post h1 a { pointer-events: none; color: var(--white); }
.single-post h2, .single-post h3, .single-post h4, .single-post h5, .single-post h6  { margin: 0 !important; font-size: 1em !important; text-transform: none !important;  letter-spacing: normal !important; font-weight: normal !important;  }
.entry-content a[href$=".jpg"] { pointer-events: none; }
.single-post .wp-post-image { height: auto; max-height: 460px; width: auto; max-width: 90%; margin: 0 auto; pointer-events: none; display: block; }
div#blog-content { padding: 2.5%; color: var(--white); display: block; width: 100%; max-width: 920px; margin: 20px auto 40px auto; height: auto; text-align: center; font-size: 1.4em; }
.single-post div#blog-content .back-to-page-btn a { display: inline-block; margin-top: 40px; }
div#blog-content p { margin: 0 0 30px 0; }
div#blog-content p a { color: var(--white); text-decoration: underline; }
div#blog-content p a:hover { text-decoration: none; }
div#blog-content .btn.pulse { font-size: 1em; background: var(--pink) !important; }
div#blog-content .btn.pulse a { color: var(--white); } 
@media screen and (max-width: 524px) {
.single-post h1 { font-size: 2.5em; }
}
@media screen and (max-width: 390px) {
.single-post h1 { margin: 40px 0 40px 0; }
.single-post .header-right { flex-direction: column; width: 100%; }
} #kompakt-container { width: 100%; height: 100%; }
.kompakt-img { height: 400px; background-size: cover !important; background-position: center center !important; }
#kompakt-container h2 { color: var(--pink); letter-spacing: 1px; margin: 60px 0 40px 0; font-size: 5em; }
#kompakt-container h3 { color: var(--pink); letter-spacing: 1px; margin: 60px 0 40px 0; font-size: 5em; }
#kompakt-container h4 { color: var(--black); letter-spacing: 0px; margin: 0 0 20px 0; font-size: 2em;  }
.kompakt-video { width: 90%; max-width: 1400px; display: flex; justify-content: space-around; flex-wrap: wrap; margin: 0 auto 60px auto; }
.kompakt-video .col { width: 45%; padding: 0; text-align: center; }
.kompakt-video .col iframe { max-width: 100%; max-height: 315px; } 
#download-box { width: 90%; max-width: 1400px; display: flex; justify-content: space-around; flex-wrap: wrap; margin: 0 auto 60px auto; }
#download-box .col { width: 40%; padding: 10px; text-align: center; background: var(--whitetrans); }
#download-box a { display: inline-block; background: var(--black); color: var(--white); padding: 6px 12px; margin-bottom: 10px; }
#download-box .col p { min-height: 100px; } 
#download-box .col span.notice { display: block; color: red; margin-top: 10px; }
@media screen and (max-width: 768px) {
.kompakt-video .col, #download-box .col { width: 100%; }
.kompakt-video .col:nth-child(2) { margin: 20px 0; }
#download-box .col:nth-child(2) { margin: 20px 0 0 0; }
} #audio-box { width: 90%; max-width: 1400px; display: flex; justify-content: space-between; flex-wrap: wrap; margin: 0 auto;  }
.audio-col { margin: 0; width: 30%; text-align: center; background: var(--black); max-width: 450px; max-height: 223px; }
.audio-header { color: #ffffff; margin-left: 20px; margin-bottom: 12px; text-align: left; }
.audio-header span { color: #ffffff; font-size: 16px; }
.mejs-container, .mejs-container .mejs-controls, .mejs-embed, .mejs-embed body { background: var(--black) !important; }
.sc_fancy_player_container span, .sc_fancy_player_container div { color: var(--white) !important; }
.mejs-volume-button, .mejs-controls a.mejs-horizontal-volume-slider { display: none !important; }
.mejs-time.mejs-currenttime-container, .mejs-time.mejs-duration-container {display: flex; height: 100%; align-items: center; justify-content: center; padding: 0 !important; }
.mejs-time.mejs-currenttime-container span, .mejs-time.mejs-duration-container span, .mejs-time-float-current {font-size:18px;}
.audio-col-inner {float:left;height:100%;display:flex;justify-content:flex-end;flex-direction:column;}
.audio-col-inner.left {max-width:30%;width:30%;}
.audio-col-inner.right {max-width:70%;width:70%;}
.audio-col-inner img {max-width:100%;}
.mejs-time-float { background: transparent; border: 0px; }
.mejs-time-float-corner { display: none; }
@media screen and (max-width: 768px) {
#audio-box { justify-content: center; }
.audio-col { width: 100%; }
.audio-col:nth-child(2) { margin: 20px 0; } 
} #linktree { background: var(--blue); padding: 0; } #linktree h1 { font-size: 1.25em; letter-spacing: 0; margin: 0 0 10px 0; color: var(--pink); }
#linktree h2 { font-size: 1.1em; letter-spacing: 0; margin: 0 0 5px 0; color: var(--pink); }
#linktree span.choose, #linktree span.weblink { font-size: 1em; color: var(--white); display: block; width: 100%; text-align: center; margin: 0 0 15px 0; } 
#linktree span.weblink { margin: 20px 0 20px 0; } 
#linktree span.weblink a { color: var(--white); } #linktree-container { position: relative; width: 100%; max-width: 500px; height: 100%; min-height: 100vh; margin: 0 auto; background: var(--blue); }
#linktree .lt-image { position: relative; }
#linktree .lt-image img { display: block; width: 100%; height: auto; } #linktree .lt-follow { position: absolute; bottom: 0; left: 0; width: 100%; height: auto; padding: 10px 0 5px 0; background: var(--white); background: linear-gradient(to right bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05) ); backdrop-filter: blur(0.25em); -webkit-backdrop-filter: blur(0.25em); }
#linktree .lt-follow .social-media-box { height: auto; width: auto; padding: 0 20px; display: flex; justify-content: center; align-items: center; } 
#linktree .lt-follow .social-media-box I svg path { fill: var(--pink); margin: 0 8px; }
#linktree .lt-follow .social-media-box a { display: block; width: 100%; height: auto; padding: 6px 0; text-align: center; } #linktree .lt-content { width: auto; height: auto; margin-top: 20px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }
#linktree .lt-content .col { width: 50%; height: 80px; display: flex; justify-content: center; align-items: center; background: var(--whitetrans); border-bottom: 1px solid var(--grey); } 
#linktree .lt-content .col img { width: auto; max-width: 80%; height: auto; max-height: 48px; object-fit: contain; }
#linktree .lt-content .col.img a { text-align: center; }
#linktree .btn.lt { display: block; width: 80%; max-width: 140px; padding: 0.5em 1em; text-align: center; color: var(--black); border-radius: 2px; 
background: var(--blue);
} #turn-device { display: none; visibility: hidden; opacity: 0; }
@media screen and (max-width: 767px) and (orientation: landscape) {
#turn-device { display: block; visibility: visible; opacity: 1; position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; min-width: 100vw; min-height: 100vh; background: var(--blue); display: flex; justify-content: center; align-items: center; z-index: 999999999999; }
#turn-device img { display: block; width: auto; height: 80px; } 
} :root {
--white: #F9FBFF; 
--black: #0F0C08;
--pink: #ffc4d0;
--blue: #3eb5d1;
--blue2: #7cafdf;
--yellow: #fff100;
--red: #c23c33;
--grey: #cccccc;
--darkgrey: #565656;
--whitetrans: rgba(255, 255, 255, 0.65);
--schaumtrans: rgba(239, 236, 232, 0.65);
--lightboxbg: rgba(0, 0, 0, 0.85);
--spotifygreen: #1DB954;
} .color--black svg path { fill: var(--black); }
.color--white svg path { fill: var(--white); }
.color--pink svg path { fill: var(--pink); }
.color--black .burger .line { background: var(--black); }
.color--white .burger .line { background: var(--white); }
.color--pink .burger .line { background: var(--pink); }
.color--black i { color: var(--black); }
.color--white i { color: var(--white); }
.color--pink i { color: var(--pink); } @font-face {
font-family: 'Comic Sans MS'; font-display: swap;
src: url(https://www.theesprits.com/fonts/ComicSansMS3.ttf) format("truetype");
}
@font-face {
font-family: 'main'; font-display: swap;
src: url(https://www.theesprits.com/fonts/Akshar-VariableFont_wght.ttf) format("truetype");
}
@font-face {
font-family: 'Sweaty'; font-display: swap;
src: url(https://www.theesprits.com/fonts/GoodBrush.ttf) format("truetype");
}
body { font-size: 16px; font-family: main; font-weight: 500; line-height: 1.2; }
h1, h2, h3, h4, h5, h6 { width: 100%; text-align: center; text-transform: uppercase; letter-spacing: -0.5px; font-weight: 600; }
h2 { font-size: 7em; margin: 0 0 80px 0; }
h3 { font-size: 4em; margin: 0 0 10px 0; }
h4 { font-size: 2em; }
a { text-decoration: none; }
p { margin: 10px 0 0 0; text-align: center; }
.date a, .venue a, .info a, .ticket a { color: var(--white); cursor: pointer; }
.date, .venue, .info, .ticket, #lightbox-content p { font-size: 1.4em; }
#countdown li { font-size: 1em; text-transform: uppercase; color: var(--pink); }
#countdown li span { font-size: 4em; color: var(--pink); }
.music h2, .video h2, #lightbox-content h3 { color: var(--pink); }
.tour h2, .shop h2 { color: var(--blue); }
.menu ul li a { color: var(--pink); font-family: main !important; font-size: 2.5em; text-transform: uppercase; }
.marquee { font-size: 8em; font-weight: 600; color: var(--pink); white-space: nowrap; line-height: 1; }
#lightbox-content, #footer-container { color: var(--white); text-align: center; }
#footer-container div a { color: var(--white); text-decoration: none; }
@media screen and (max-width: 1062px) {
h2 { font-size: 5em; margin: 0 0 60px 0; }
h3 { font-size: 3em; margin: 0 0 10px 0; }
h4 { font-size: 1.5em; }
#home-contentbox h2 { font-size: 4.5em; }
.marquee { font-size:6em; }
}
@media screen and (max-width: 782px) {
.date, .venue, .info, .ticket,
#lightbox-content p { font-size: 1em; }
}
@media screen and (max-width: 524px) {
h2 { font-size: 4em; margin: 0 0 60px 0; }
h3 { font-size: 2.1em; margin: 0 0 10px 0; }
h4 { font-size: 1.05em; }
.music-accordion h3 { font-size: 1.5em; margin: 0 0 10px 0; }
#home-contentbox h2 { font-size: 2.25em; }
#countdown li { font-size: 0.8em; }
.menu ul li a { font-size: 2em; font-weight: 600; }
.marquee { font-size: 3em; }
}  header#header, header.header, aside#sidebar, footer#footer {display:none;}
body { background: var(--blue); overflow-x: hidden; }
.panel-grid, .panel-no-style { margin: 0 !important; } .lazyload, .lazyloading { opacity: 0; }
.lazyloaded { opacity: 1; } @media screen and (min-width: 768px) {
div#lightbox-content { overflow-x: hidden; }
body::-webkit-scrollbar, #lightbox-content::-webkit-scrollbar { width: 0.25em; }
body::-webkit-scrollbar-track, #lightbox-content::-webkit-scrollbar-track { background: var(--white); }
body::-webkit-scrollbar-thumb, #lightbox-content::-webkit-scrollbar-thumb { border-radius: 20px; background: var(--pink); }
body::-webkit-scrollbar-corner, #lightbox-content::-webkit-scrollbar-corner { background: transparent; }
#lightbox-content::-webkit-scrollbar-track { background: transparent; }
} .container { position: relative; overflow-y: scroll; height: 100%; scroll-snap-type: y mandatory; }
.panel { position: relative; width: 100%; height: auto; min-height: 100vh; overflow: hidden; scroll-snap-align: start; padding: 80px 2.5%; }
.panel.home { height: calc(var(--vh, 1vh) * 150); }
.panel.music { display: flex; flex-direction: column; padding: 80px 0 0 0; background: var(--blue); }
.panel.music #music-container { padding: 0 2.5%; }
.panel.discografie { height: auto; min-height: inherit; background: var(--pink); padding: 0 0 80px 0; }
.panel.tour { height: auto; min-height: inherit; background: var(--pink); }
.panel.video { height: auto; min-height: inherit; background: var(--blue); }
.panel.shop { height: calc(var(--vh, 1vh) * 200); background: var(--blue); padding: 0 0 !important; }
.panel.footer { min-height: inherit; background: var(--black); padding: 60px 2.5% 30px 2.5%; }
.panel.kompakt { padding: 0 0 100px 0; }
@media screen and (max-width: 524px) {
.panel { padding: 60px 1.5%; }
.panel.discografie { padding: 0 0 60px 0; }
.panel.shop { height: calc(var(--vh, 1vh) * 100); }
} #header-container { top: 0; left: 0; padding: 0 2.5%; width: 100%; height: 80px; z-index: 999999; }
.fixed { position: fixed; }
.header-left, .header-right { display: flex; align-items: center; height: 100%; padding: 0 2.5%; }
.header-left { position: absolute; top: 0; left: 0; }
.header-right { position: absolute; top: 0; right: 0; }
svg#theesprits-logo { position: relative; width: auto; height: 56px; } .social-media-box { height: 80px; width: auto; padding: 0 20px; display: flex; justify-content: center; align-items: center; }
.menu-open .header-right .social-media-box { visibility: hidden; }
#menu-container .social-media-box { position: absolute; left: 8%; bottom: 5%; }
#menu-container .social-media-box i { margin: 0 2.5em 0 0; }
.social-media-box i svg { height: 20px; width: auto; fill: var(--black); }
.social-media-box I { margin: 0 8px; }
.social-media-box a { display: block; width: 100%; height: auto; padding: 6px 0; text-align: center; }
@media screen and (max-width: 1032px) {
#menu-container .social-media-box i { margin: 0 1.5em 0 0; }
} #menu-container { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 900; visibility: hidden; }
.menu-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: -1; opacity: 0; }
.menu-box, .menu-img { position: absolute; top: 0; width: 0%; height: 100%; z-index: 1; background: var(--white); }
.menu-box { left: 0; clip-path: polygon(0 0, 60% 0, 40% 100%, 0 100%); display: flex; justify-content: flex-start; }
.menu-img { right: 0; clip-path: polygon(60% 0, 100% 0, 100% 100%, 40% 100%); display: flex; justify-content: flex-end; }
.menu-img img { width: 60%; height: 100%; object-fit: cover; }
.menu { width: 50%; height: 100%; display: flex; justify-content: flex-start; align-items: center; padding-left: 8%; }
.menu ul { list-style: none; }
.menu ul li { margin: 10% 0; }
.burger { cursor: pointer; width: 50px; height: 50px; transform: rotateZ(0deg); display: flex; justify-content: center; align-items: center; flex-direction: column; }
.burger .line { display: block; width: 80%; height: 5px; background: var(--black); margin: 8% 0; }
@media screen and (max-width: 768px) {
.menu-box { height: 72%; clip-path: polygon(0 0, 100% 0, 100% 91%, 0 100%); }
.menu-img { height: 35%; clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 100%); align-items: flex-end; top: auto; bottom: 0; }
.menu-img img { width: 100%; }
.menu { width: 100%; padding-left: 0; justify-content: center; }
.menu ul { margin-bottom: 40px; }
.menu ul li { margin: 5% 0; text-align: center; }
#menu-container .social-media-box { left: 0; width: 100%; height: 40px; }
#menu-container .social-media-box i { font-size: 1.25em; margin: 0 0.8em; }
} #footer-container { position: relative; width: 100%; height: auto; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }
#footer-container .col { width: 50%; font-size: 0.9em; line-height: 1.5; }
#footer-container .col img { width: auto; } 
#footer-container .col:nth-child(1) img { height: 32px; margin: 25px 0; }
#footer-container .col:nth-child(2) img { height: 62px; margin: 10px 0; }
.logo-container { width: 100%; max-width: 1000px; margin: 60px 0; }
.logo-container img { display: inline; height: 18px; width: auto; margin: 0 2.5%; }
.footer-imprint { width: 100%; font-size: 0.75em; }
@media screen and (max-width: 524px) {
.logo-container { margin: 40px 0; }
.logo-container img { height: 16px; margin: 10px 2.5%; }
#footer-container .col { font-size: 0.65em; }
.footer-imprint { font-size: 0.65em; }
} #preloader { position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 100vh; width: 100vw; background: var(--blue); z-index: 9999999999;
display: flex; justify-content: center; align-items: center; }
#preloader .preloader-content #theesprits-logo { width: auto; height: 80px; fill: var(--white); } #home-container { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; overflow: hidden; background-attachment: fixed; background-size: cover; background-repeat: no-repeat; }
div#home-img-box { position: absolute; width: 100%; height: 100vh; display: flex; justify-content: center; }
div#home-img-box.first { bottom: 0; left: 0; align-items: flex-end; z-index: 100; }
div#home-img-box.second { bottom: 0; left: 0; align-items: flex-end; z-index: 10; }
div#home-img-box.first img { width: 100%; height: 100%; will-change: transform; object-fit: cover; } 
div#home-img-box.second img { width: 100%; height: 100%; will-change: transform; object-fit: cover;   }
.scrolldown { position: absolute; bottom: 2.5%; left: 50%; transform: translateX(-50%); text-align: center; width: 40px; height: 40px; padding: 2px; cursor: pointer; z-index: 999; }
.scrolldown img { height: 100%; width: auto; opacity: 0.75; }
@media screen and (min-width: 1921px) {
div#home-img-box.first img { width: 100vw; } 
}
@media screen and (max-width: 524px) {
#home-container { background-attachment: scroll; position: fixed; }
div#home-img-box { height: calc(var(--vh, 1vh) * 100); bottom: env(safe-area-inset-bottom); }
.scrolldown { bottom: calc(env(safe-area-inset-bottom) + 12%);  }
}
@media screen and (max-width: 324px) {
div#home-img-box.second.mobile img { display: none !important; }
} #home-contentbox { position: absolute; top: 55%; left: 0; transform: translateY(-50%); height: auto; width: 100%; z-index: 600; padding-bottom: 1%;
display: flex; justify-content: center; align-items: center; flex-direction: column; }
#home-contentbox h2 { margin-bottom: 20px; color: var(--pink); line-height: normal; } 
#countdown { width: 100%; max-width: 800px; text-align: center; }
#countdown li { display: inline-block; list-style-type: none; text-align: center; width: 24%; padding: 0 30px; }
#countdown li span { display: block; will-change: transform; min-height: 1em; margin-bottom: 10px; }
#countdown-content { display: none; }
#home-contentbox .btn.pulse { margin-top: 40px; }
#home-contentbox .btn.pulse a { color: var(--pink); }
.btn.pulse { display: inline-block; text-align: center; font-size: 2em; background: var(--white); background: linear-gradient(to right bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05) ); backdrop-filter: blur(2em); -webkit-backdrop-filter: blur(2em); border-radius: 2px; cursor: pointer; }
.btn.pulse a { display: block; padding: 0.8em 1.2em; }
@media screen and (max-width: 767.9px) {
#home-contentbox { top: 55%; }
#home-contentbox h2 { margin-bottom: 5px; }
#countdown li { width: 30%; padding: 0; }
#home-contentbox .btn.pulse { margin-top: 20px; }
.btn.pulse a { padding: 0.6em 1em; }
} #follow-box { position: fixed; top: 50%; left: 0%; transform: translateY(-50%); height: auto; width: auto; z-index: 99; background: var(--black); color: var(--white); padding: 20px; text-align: center; }
#follow-box i svg { fill: var(--spotifygreen); height: 25px; width: auto; margin-top: 20px; }
.marquee-wrap { position: relative; width: 100%; overflow: hidden; z-index: 5; margin-bottom: 10px; }
#music-container { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; width: 100%; height: auto; z-index: 10; margin-bottom: 100px; }
#music-container .col-2 { width: 50%; height: 100%; }
#music-container .col-2.center { display: flex; justify-content: center; align-items: center; flex-direction: column; }
#music-container h3 { color: var(--white); }
#music-container .subtitle { display: block; font-size: 2em; color: var(--pink); }
#music-container .subtitle-presave { display: block; font-size: 2em; color: var(--white); margin-top: 20px; }
#music-container .music-content { width: 90%; max-width: 800px; padding: 40px 20px 20px 20px; text-align: center;
background: var(--white); background: linear-gradient(to right bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05) ); backdrop-filter: blur(2em); -webkit-backdrop-filter: blur(2em); border-radius: 2px;
}
#music-icon-container { width: 100%; max-width: 550px; height: auto; display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; padding: 10px; margin: 10px auto 0 auto; }
#music-icon-container div { display: grid; width: 35%; min-height: 56px; box-sizing: border-box; margin: 10px 0; background: var(--whitetrans); border-radius: 2px; text-align: center; }
#music-icon-container div a { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; color: var(--black); font-size: 1.5em; font-weight: 600; padding: 10px; } 
#music-icon-container div img { height: auto; max-height: 34px; width: 100%; object-fit: contain; }
@media screen and (max-width: 832px) {
#music-container .col-2 { width: 100%; height: auto; }
#music-container .col-2:nth-child(2) { margin-top: 20px; }
#music-container .music-content { width: 95%; max-width: 500px; padding: 20px 5px 20px 5px; }
#music-icon-container { margin: 5px auto 0 auto; }
#music-icon-container div { width: 45%; }
#music-icon-container div a { padding: 0; }
#music-icon-container div img { height: 28px; width: auto; max-width: 90%; object-fit: contain; }
} .music-accordion { display: flex; flex-direction: row; align-items: center; overflow: hidden; width: 100%; background: var(--pink); }
.music-accordion-group { position: relative; flex-grow: 1; height: 640px; min-width: 100px; overflow: hidden; }
.music-accordion-img { position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; opacity: 0.65; filter: grayscale(75%); z-index: 3; }
.music-accordion-content { position: absolute; top: 0; right: 0; opacity: 0; width: 0%; height: 100%; padding: 3rem 2rem 2rem 2rem; color: var(--white); z-index: 2; }
.music-accordion-content .subline { font-size: 1.2em; display: block; width: 100%; text-align: center; margin-bottom: 20px; } .music-accordion-menu { position: absolute; top: 0; background: transparent; z-index: 10; display: flex; justify-content: center; align-items: center; cursor: pointer; } .music-accordion-menu span.close { background: transparent; padding: 5px 8px; }
.music-accordion-menu span.close i svg { fill: var(--blue); width: auto; height: 32px; } .active .music-accordion-menu div.title { display: none; }
.music-accordion-menu div.title { text-transform: uppercase; font-size: 2.5em; font-weight: 600; color: var(--white);
position: absolute; bottom: 2.5%; right: 5%; writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg);
} 
@media screen and (max-width: 1072px) {
.music-accordion-content { padding: 20px 10px; }
}
@media screen and (max-width: 984px) {
.music-accordion { flex-direction: column; align-items: center; justify-content: center; height: auto; min-height: 1000px; overflow: hidden; }
.music-accordion-group { width: 100%; max-height: 250px; }
.music-accordion-img { height: 100%; max-height: 250px; width: 100%; bottom: 0; top: inherit; object-fit: cover; }
.music-accordion-group.active { height: auto; } 
.music-accordion-img { order: 1; }
.music-accordion-content { order: 2; padding: 20px 10px; height: 0%; width: 100%; }
.music-accordion-content .subline { margin-bottom: 0px; }
.music-accordion-menu span.close { position: absolute; right: 0; color: var(--white); }
.music-accordion-group:nth-child(1) .music-accordion-img, .music-accordion-group:nth-child(2) .music-accordion-img { object-position: top; }
.music-accordion-group:nth-child(4) .music-accordion-img { object-position: bottom; }
.music-accordion-menu div.title { writing-mode: horizontal-tb; transform: rotate(0deg); font-size: 1.75em; } 
}
@media screen and (max-width: 768px) {
.music-accordion { flex-direction: column; align-items: center; justify-content: center; height: auto; min-height: 850px; overflow: hidden; }
.music-accordion-group { width: 100%; max-height: 212.5px; }
.music-accordion-img { height: 100%; max-height: 212.5px; width: 100%; bottom: 0; top: inherit; object-fit: cover; }
}
@media screen and (max-width: 524px) { 
.music-accordion-menu div.title { font-size: 1.5em; } 
.music-accordion-group:nth-child(1) .music-accordion-img { object-position: center !important; }
} #tour-container { width: 100%; max-width: 1200px; margin: 0 auto; }
.tour-row { display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%; padding: 14px; border-bottom: 1px dashed var(--whitetrans); }
.date, .venue, .info, .ticket { padding: 0 2px; display: flex; justify-content: flex-start; color: var(--white); }
.date, .info, .ticket { align-items: center; }
.date { width: auto; min-width: 90px; }
.venue { width: 40%; flex-direction: column; }
.info { width: 20%; }
.ticket { width: 20%; justify-content: flex-end; }
.ticket a { display: inline-block; cursor: pointer; color: var(--white); text-decoration: none; } 
.ticket a#lightbox { margin-right: 20px; } 
.ticket a:nth-child(2) { min-width: 76px; } 
.venue span { display: block; }
.venue span:nth-child(1) { font-size: 1em; margin-bottom: 4px; }
.venue span:nth-child(2) { font-size: 1.5em; }
@media screen and (max-width: 932px) {
.tour-row { padding: 20px 0; }
}
@media screen and (max-width: 524px) {
.tour-row { padding: 20px 5%; }
.date, .info { width: 60%; }
.ticket { width: 40%; height: 50%; position: absolute; bottom: 0; right: 5%; }
.venue { width: 60%; flex-direction: column-reverse; }
.venue span:nth-child(1) { margin-bottom: 0; }
} #shop-container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100vh; overflow: hidden; padding: 100px 2.5%; z-index: 1; 
background-size: cover; background-repeat: no-repeat; background-position: center center; }
#shop-content { position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; z-index: 2; }
#shop-content img.boys { height: 40%; width: auto; }
#shop-image-container { position: absolute; top: 30%; left: 0; width: 100%; height: auto; overflow: hidden; padding: 0;
display: flex; flex-wrap: wrap; justify-content: center; align-items: center; z-index: 10;
}
#shop-image-container .shop-box { width: 30%; max-width: 380px; height: auto; max-height: 380px; display: flex; justify-content: center; align-items: center; flex-direction: column; 
background: var(--white); background: linear-gradient(to right bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05) ); backdrop-filter: blur(2em); -webkit-backdrop-filter: blur(2em); border-radius: 2px; 
box-shadow: 0 10px 15px rgba(0,0,0,.1);
}
#shop-image-container .shop-box:nth-child(2) { margin: 0 40px; } 
#shop-image-container .shop-box img { height: auto; max-height: 100%; width: auto; max-width: 100%; } #shop-btn-box { position: absolute; bottom: 0; left: 50%; transform: translate(-50%, -50%); height: auto; width: auto; z-index: 99; background: transparent; z-index: 8; }
#shop-btn-box .btn { background: var(--blue);  }
#shop-btn-box .btn a { color: var(--white); }
@media screen and (max-width: 862px) {
#shop-content img.boys { height: auto; width: 80%; }
#shop-image-container .shop-box:nth-child(2) { margin: 0 20px; } 
}
@media screen and (max-width: 524px) {
#shop-container { padding: 60px 0; } 
#shop-btn-box { width: max-content; }
#shop-image-container { top: 8%; height: 80vh; width: 200%; padding: 0 0 0 0; }
#shop-image-container .shop-box { width: 30%; height: auto; }
} .follow-container { width: 100%; height: auto; margin: 40px 0 0 0; text-align: center; }
.follow-container img { height: 32px; width: auto; margin-top: 10px; } .slider { background: transparent !important; }
.slider::before { display: none; } .slider-for, .slider-nav { width: 95%; max-width: 960px; margin: 0 auto; }
.slick-slide { text-align: center; } .slider-nav { margin-top: 20px; padding: 0; }
.slider-nav .slick-slide { padding: 0 20px; }
.slider-nav div.slick-list { position: relative; width: 90%; padding: 0 !important; margin: 0 auto; }
.slider-nav .video-thumb-box img { width: 100%; max-width: 260px; height: auto; } .slider-nav .slick-slide.slick-current { opacity: 1; text-align: center; }
.slider-nav .slick-slide { opacity: 0.5; transition: 0.2s; }
.slider-nav .slick-slide:hover { opacity: 1; cursor: pointer; } .slick-prev:before, .slick-next:before { font-family: inherit !important; color: var(--white) !important; }
.slick-prev:before { content: '\276E' !important; }
.slick-next:before { content: '\276F' !important; } .slider-for .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; width: 100%; }
.slider-for .embed-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
@media screen and (max-width: 524px) {
.slider-for, .slider-nav { width: 90%; }
} .top { -webkit-clip-path: inset(0 0 41% 0); clip-path: inset(0 0 41%); }
.bottom { -webkit-clip-path: inset(58% 0 0 0); clip-path: inset(58% 0 0 0); }
.topShadow { text-shadow: -3px 0 var(--pink); }
.bottomShadow { text-shadow: -3px 0 var(--blue); }
.glitch { position: absolute; }
#glitch-box { position: relative; display: block; height: 5em; }
@media screen and (max-width: 524px) {
#glitch-box { height: 2.5em; }
} .playlist-container { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; width: 100%; height: 320px; margin: 80px auto 0 auto; }
.playlist-container div.item { position: relative; margin: 0; display: block; box-sizing: border-box; width: 30%; height: 100%; text-align: center; }
.playlist-container iframe { width: 100%; height: 100%; min-height: 352px; max-width: 300px; margin: 0 auto; border-radius: 12px; }
#follow-box-mobile { margin: 40px auto 0 auto; text-align: center; font-size: 1.5em; }
#follow-box-mobile svg { width: 26px; height: auto; margin-top: 10px; } 
#follow-box-mobile svg path { fill: var(--spotifygreen); }
@media screen and (max-width: 768px) {
.playlist-container { height: auto; margin: 60px auto 0 auto; }
.playlist-container div.item { width: 90%; height: 320px; max-width: 300px; }
.playlist-container iframe { max-width: inherit; }
.playlist-container div.item.apple { display: none; }
} #lightbox-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999999999;       display: flex; justify-content: center; align-items: center; flex-direction: column; }
.lightbox-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: var(--blue); opacity: 0.95; }
.lightbox-close { position: sticky; top: 0; right: 10px; cursor: pointer; z-index: 3; float: right; line-height: 0; }
.lightbox-close i svg { fill: var(--white); width: auto; height: 32px; text-shadow: 0px 0px 1px var(--blue); }
#lightbox-content { position: relative; width: 80%; height: auto; max-height: 0; padding: 0; overflow: scroll; z-index: 2; border-radius: 2px;
background: var(--blue); backdrop-filter: blur(2em); -webkit-backdrop-filter: blur(2em);
box-shadow: 0 10px 15px rgba(0,0,0,.1); }
#lightbox-content.active { max-height: 90vh; padding: 40px 20px; }
#lightbox-content h3, #lightbox-content p { text-align: center; }
#lightbox-content p { margin-top: 10px; }
#lightbox-container, #lightbox-content { visibility: hidden; opacity: 0; pointer-events: none; }
#lightbox-container.active, #lightbox-content.active { visibility: visible; opacity: 1; pointer-events: auto; }
.lightbox-open { overflow: hidden !important; } #lightbox-img { position: fixed; top: 0; left: 0; width: 100%; height: 360px; margin-bottom: 10px; overflow: hidden; background: var(--blue); z-index: 2; }
#lightbox-img img { position: relative; display: block; height: 100%; width: auto; margin: 0 auto; z-index: 3; }
#lightbox-img .lightbox-img-bg { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; filter: blur(2em); } 
.lightbox-img-height { position: relative; height: 340px; } .tourinfo span { display: inline-block; margin: 0 10px 20px 10px; font-size: 1.5em; }
.btn.pulse.tix { position: absolute; bottom: 2.5%; right: 2.5%; width: auto; height: auto; background: var(--pink); z-index: 10; }
.btn.pulse.tix a { color: var(--white); padding: 0.6em 1em; }
@media screen and (max-width: 524px) {
#lightbox-content { width: 100%; }
#lightbox-content.active { height: 100vh; max-height: 100vh; padding: 0; }
.lightbox-close { position: sticky; top: 0%; right: 0%;background: var(--black); padding: 15px 30px; }
#lightbox-content h3 { margin: 80px 0 20px 0; }
#lightbox-content h3.lightbox-tour { font-size: 1.5em; margin: 80 0 20px 0; }
.tourinfo span { font-size: 1em; margin: 0 2px 20px 2px; }
.tourinfow p { text-align: justify; padding: 0 10px; }
#lightbox-content p:last-of-type { margin-bottom: 80px; }
#lightbox-img { height: 260px; }
.lightbox-img-height { height: 240px; }
#lightbox-img img { width: 100%; object-fit: cover; }
.btn.pulse.tix { right: 4%; }
.btn.pulse.tix a { padding: 0.3em 0.6em; }
} .album { margin: 0 auto; position: relative; max-width: 100%; border: 0px dashed blue; transform: scale(1); }
.album__inner { display: flex; align-items: flex-start; justify-content: center; margin: auto; padding: 15px; box-sizing: border-box; }
.album__artwork { perspective: 2000px; }
.artwork { transform: rotateX(5deg) rotateY(5deg) rotateZ(0deg); }
.dragger { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: transparent; } .album__artwork { display: -webkit-box; display: -ms-flexbox; width: 100%; margin-top: auto; }
.album__artwork > div { transform-style: preserve-3d; -webkit-transform-style: preserve-3d; }
.artwork { position: relative; }
.artwork-outer { transform-style: preserve-3d; transform-origin: center center; }
.artwork-container { transform-style: preserve-3d; transform-origin: center center; }
.artwork-container > div { position: absolute; top: 0; left: 0; backface-visibility: visible; -webkit-backface-visibility: visible; }
.artwork-container img { width: 100%; height: 100%; user-drag: none; -webkit-user-drag: none; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; will-change: transform; }
.artwork-side-left, .artwork-side-right, .artwork-top, .artwork-bottom { filter:brightness(80%); }
.artwork-side-left p { writing-mode: vertical-rl; }
.artwork-front, .artwork-back, .artwork-container { width: var(--coversize); height: var(--coversize); }
.artwork-side-left, .artwork-side-right { width: var(--sidesize); height: var(--coversize); }
.artwork-top, .artwork-bottom { width: var(--coversize); height: var(--sidesize); }
.artwork-front, .artwork-back, .artwork-top, .artwork-bottom, .artwork-side-left, .artwork-side-right { background: var(--black); }
.artwork-front { transform: translate3d(0 ,0 ,var(--sidehalf)) translate3d(0,0,0) rotateY(0deg); }
.artwork-side-left { transform: translate3d(0,0,var(--sidehalf)) translate3d(var(--nsidehalf), 0, var(--nsidehalf)) rotateY(-90deg); overflow: hidden; }
.artwork-side-right { transform: translate3d(0 ,0 ,var(--sidehalf)) translate3d(var(--restsize), 0px,var(--nsidehalf)) rotateY(90deg); }
.artwork-top { transform: translate3d(0, 0 ,var(--sidehalf)) translate3d(0, var(--nsidehalf), var(--nsidehalf)) rotateX(90deg); }
.artwork-bottom { transform: translate3d(0 ,0 ,var(--sidehalf)) translate3d(0px, var(--restsize), var(--nsidehalf)) rotateX(-90deg); }
.artwork-back { transform: translate3d(0 ,0 ,var(--sidehalf)) translate3d(0,0, var(--nsidesize)) rotateY(180deg); }
.album {
--coversize: 400px;
--sidesize: 18px;
--sidehalf: 9px; 
--restsize: 391px;  
--nsidehalf: -9px; 
--nsidesize: -18px; 
}
@media screen and (max-width: 984px) {
.album {
--coversize: 300px;
--sidesize: 13.5px;
--sidehalf: 6.75px; 
--restsize: 293.25px;  
--nsidehalf: -6.75px; 
--nsidesize: -13.5px; 
}
}
@media screen and (max-width: 832px) {
.album {
--coversize: 250px;
--sidesize: 11.25px;
--sidehalf: 5.625px; 
--restsize: 244.375px;  
--nsidehalf: -5.625px; 
--nsidesize: -11.25px; 
}
}
@media screen and (max-width: 524px) {
.album {
--coversize: 200px;
--sidesize: 9px;
--sidehalf: 4.5px; 
--restsize: 195.5px;  
--nsidehalf: -4.5px; 
--nsidesize: -9px; 
}
} .comic { font-size: 14px; }
.comic div, .comic a, .comic span, .comic h1, .comic h2, .comic h3, .comic h4, .comic p { font-family: "Comic Sans MS", "Comic Sans", cursive !important; letter-spacing: -1.5px; }
.switch-container { position: fixed; top: 80px; right: 2.85%; width: 40px; height: 20px; z-index: 99999999; display: flex; justify-content: center; align-items: center; }
.switch { position: relative; display: inline-block; width: 40px; height: 20px; }
.switch input { opacity: 0; width: 0; height: 0; }
.swipe-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--grey); -webkit-transition: .4s; transition: .4s; }
.swipe-slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 2px; bottom: 2px; background-color: white; -webkit-transition: .4s; transition: .4s; }
input:checked + .swipe-slider { background-color: var(--pink); }
input:focus + .swipe-slider { box-shadow: 0 0 1px #2196F3; }
input:checked + .swipe-slider:before { -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); }
.swipe-slider.round { border-radius: 34px; }
.swipe-slider.round:before { border-radius: 50%; }
@media screen and (max-width: 767.9px) {
.switch-container { right: 3.85%; }
}