@import url('/export/system/modules/alkacon.mercury.bistuemer.ebk/css/ebk-agency.css');
@import url('/export/sites/demo-s-11/0-caritas-shared/fonts/modern/font.css');
@import url('/export/sites/demo-s-11/0-caritas-shared/m-access/m-access.css');
/*@import url('/adventskalender/.themes/jquery.fancybox.css');*/
@import url('/adventskalender/.themes/fonts/font.css');
/*@media (hover: none) {
.effect-parallax-bg {
    background-attachment: initial;
    background-position: center !important;}
}*/






.foot-links.type-linksequence {display: flex; justify-content: center; color: #eee; font-size: 18px;}
.foot-links.type-linksequence a {color: #eee;}
 
.pp-banner .message p:last-of-type {font-size: 17px;}
.pp-banner .buttons .btn {padding: 6px 15px;}
.pp-banner .buttons .btn-accept, .pp-banner .buttons .btn-accept:hover {background: green;}

p {color: #fff; font-size: 20px;}

/* Works on Firefox 
* {
  scrollbar-width: thin;
  scrollbar-color: #000 #000;
}

Works on Chrome, Edge, and Safari
*::-webkit-scrollbar {
  width: 0px;
}

*::-webkit-scrollbar-track {
  background:  #000;
}

*::-webkit-scrollbar-thumb {
  background-color: #000;
  border-radius: 20px;
  border: 3px solid  #000;
}*/
html:not(.opencms-page-editor) .loading-overlay {position: fixed; width: 100%; height: 100%; background-color: #000; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 15000001;}

html:not(.opencms-page-editor) .loading-spinner {width: 30px; height: 60px; padding-top: 60px; box-sizing: border-box; display: grid; background: linear-gradient(#e00 0 0) bottom/10px calc(100% - 15px), conic-gradient(from 134deg at top,#0000 ,#e00 1deg 90deg,#0000 91deg) top/100% 15px;
  background-origin: content-box;  background-repeat: no-repeat;  animation: l10-0 2s infinite;}
html:not(.opencms-page-editor) .loading-spinner:before, .loading-spinner:after {  content: "";  grid-area: 1/1;  background:inherit;  background-size: 10px calc(100% - 25px),100% 25px;  animation: l10-1 2s infinite;}
html:not(.opencms-page-editor) .loading-spinner:after { background-size: 10px calc(100% - 30px),100% 30px;  animation: l10-2 2s infinite;}

@keyframes l10-0 {
  25%,100% {padding-top:0px}
}
@keyframes l10-1 {
  0%,25%   {margin:60px -10px 0}
  50%,100% {margin:8px  -10px 0}
}
@keyframes l10-2 {
  0%,50%   {margin:60px -15px 0}
  75%,100% {margin:20px -15px 0}
}

#mercury-page {overflow-x: clip; max-width: 100%; margin: 0 auto; padding: 20px 10px 20px 10px ;}
body, h1, h2, h3, h4, h5{font-family: 'Source Sans Pro', sans-serif !Important; }
h1, h2{font-size: 45px; font-weight: 300 ; letter-spacing: -2px; text-align: center; color: #fff !Important; line-height: 1.1;}

.centa{display: flex; justify-content: center;}
#topcontrol::after {width: 40px; line-height: 38px; content: "\f062";}
#topcontrol,#topcontrol:hover  {color: #e00; background: transparent;}
body{background: #0a0a0a !Important;}
.spezial-font p{color: #fff; font-size: 34px; font-family: "Dancing Script", cursive !important;}
.inner {margin: 100px 0;}

.bottom-links{display: flex; justify-content: center; align-content: end; align-items: end; padding-top: 25px;}
.bottom-links a{color: #fff;}


.fancybox-slide--iframe .fancybox-content {max-width: 800px; max-height: calc(100% - 88px); border-radius: 5px;}
.iframe-content{margin-top: 40px; }
.fancybox-iframe {border-radius: 5px; box-shadow: 0px 0px 7px -1px rgba(255, 255, 255, 1) !Important;}


a.video:hover, a.more-info {--my-link-color-rgb: transparent; text-decoration: none;}



a.more-info:before {font-family: FontAwesome; content:"\f2dc";  font-size: 30px;   margin-left: 3px;}
.datum {height: 0;}

@media (min-width: 1014px) {
header.fh .header-group {border-bottom: 0 !important;}
body {min-height: 100vh; overflow-x: clip;}
.effect-parallax-bg {background-attachment: initial; background-position: center !important;}
}



@media (max-width: 1013.98px) {
.spezial-font p {font-size: 30px;}
}

@media (max-width: 763.98px) {
#topcontrol {display: none;}
h1{font-size: 30px; padding: 0px; margin:  0 !important;}
.spezial-font p {font-size: 22px;}
.pv-40, .pb-40 {padding-bottom: 2rem !Important;}
.inner {margin: 70px 0;}
}
@media (max-width: 550.98px) {
h1 {font-size: 28px;}
}
.imageflip .text-section{display: flex; justify-content: center; align-items: center; flex-wrap: wrap; background-color: rgba(0,0,0,.6);}
.imageflip .today img{border-radius: 50px;}
.imageflip .past .img-responsive{border: 3px solid #000;}
.imageflip .front, .imageflip .back {transition: 2.5s; border-radius: 0px 6px 6px 0px;}
.imageflip .image-section.front .heading {top: unset; left: unset;}
.imageflip .image-section.front .heading .text-heading {font-family: "Dancing Script", cursive !important; font-size: 33px; line-height: 1.6;
    border-radius: 50%; width: 70px;  height: 70px; background: #00000099;}
.imageflip .image-section.back .heading {display: none !important;}
.imageflip .front { justify-content: center;
    display: flex;
    align-items: center;     border: 2px dotted #555;
    border-left: 2px solid #555; box-shadow: rgba(204, 204, 204, 0.25) 0px 5px 15px 0px; border-radius: 0px 6px 6px 0px; background: transparent;}
html:not(.opencms-page-editor) .element.imageflip.future {touch-action: none !Important; pointer-events: none !Important; }

.story{font-size: 18px; text-align: center; margin-top: 13px;}

.speaker{text-align: center; font-size: 17px; line-height: 1.1; margin-top: 12px; font-weight: 400;}
a.video, a.more-info{width: 80px; height: 80px; background: #e00; border-radius: 50%; display: block; display: flex; justify-content: center; align-items: center; margin: 0 auto; cursor: pointer;}
a.video:before {font-family: FontAwesome; content:"\f26c";  font-size: 30px;   margin-left: 3px;}

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

.speaker{text-align: center; font-size: 15px; line-height: 1.1; margin-top: 12px; font-weight: 400;}
a.video, a.more-info{width: 50px; height: 50px; background: #e00; border-radius: 50%; display: block; display: flex; justify-content: center; align-items: center; margin: 0 auto; cursor: pointer;}
a.video:before {font-family: FontAwesome; content:"\f26c";  font-size: 20px;   margin-left: 3px;}


}



div.essential_audio.circle {overflow: hidden; width: 80px;height: 80px; border-radius: 50%; display: flex; justify-content: center; align-items: center;background: orange; margin: 0 auto; margin-bottom: 20px;}
div.essential_audio.circle > div:nth-child(1) div {width: 80px; height: 80px; border-radius: 0px!important;	background-color: transparent!important; display: flex; justify-content: center; align-items: center; cursor: pointer;}

.big-btn div.essential_audio.circle {width: 120px; height: 120px;}
.big-btn div.essential_audio.circle > div:nth-child(1) div { width: 120px;  height: 120px;}
.big-btn div.essential_audio.circle > div:nth-child(1) div.play:after{font-size: 53px;}

.medium-btn div.essential_audio.circle {width: 80px; height: 80px;}
.medium-btn div.essential_audio.circle > div:nth-child(1) div { width: 80px;  height: 80px;}
.medium-btn div.essential_audio.circle > div:nth-child(1) div.play:after{font-size: 34px;}

div.essential_audio.circle > div:nth-child(1) div.off:after {font-family: FontAwesome; content:"\f04b"; font-size: 34px; color: #e3e3e3; margin-left: 6px;}
div.essential_audio.circle > div:nth-child(1) div.load:after {font-family: FontAwesome; content:"\f110";  font-size: 34px; color: #e3e3e3;}
div.essential_audio.circle > div:nth-child(1) div.play:after {font-family: FontAwesome; content:"\f04c";  font-size: 34px; color: #e3e3e3;}
div.essential_audio.circle > div:nth-child(1) div.error:after {font-family: FontAwesome; content:"\3f";  font-size: 34px; color: #e3e3e3;}

div.essential_audio.circle > div:nth-child(1) div.load {display: none;}
div.essential_audio.circle > div:nth-child(2) div {width: 0%;  background-color: #000;  opacity: 0.1;  mix-blend-mode: multiply;}

.imageflip .test {height: 0;margin-bottom: 0;}

/*html:not(.opencms-page-editor) .snowflake {position: absolute; width: 10px;  height: 10px; background: white; border-radius: 50%; filter: drop-shadow(0 0 10px white); display: inline-block;}
.snowflake {position: absolute; width: 10px;  height: 10px; background: white; border-radius: 50%; filter: drop-shadow(0 0 10px white); display: none;}*/

:root {--button-protrusion-circle: 0px;}

.kalender{background-image: url('/adventskalender/.galleries/bilder/back3.jpg'); border-radius: 7px; max-width: 1700px; margin: 0 auto; box-shadow: 0px 0px 7px -1px rgba(255, 255, 255, 1) !Important; background-size: cover; display: flex;}




@media (max-width:1013.98px) {
.kalender  {
background-position: -100px 0; 
background-image: url('/adventskalender/.galleries/bilder/klein-back.jpg');
}
}



@media (min-width: 763.98px) and (max-width:949.98px) { 

.kalender  {
background-position: -230px 0; 
background-image: url('/adventskalender/.galleries/bilder/klein-back.jpg');
}
}

@media (max-width:763.98px) {
.kalender  {
background-position: -60px 0; 
background-image: url('/adventskalender/.galleries/bilder/klein-back.jpg');
}
}

@media (max-width:599.98px) {
.kalender  {
background-position: -380px 0; 
background-image: url('/adventskalender/.galleries/bilder/klein-back.jpg');
background-size: auto;
}
}





@media (min-width:1014px) {
.kalender  {background-position: -130px 0; background-image: url('/adventskalender/.galleries/bilder/back3.jpg'); }
}

@media (min-width:1100px) {
.kalender  {background-position: -100px 0;}
}

@media (min-width:1200px) {
.kalender  {background-position: -125px 0;}
}

@media (min-width:1300px) {
.kalender  {background-position: -65px 0;}
}

@media (min-width:1400px) {
.kalender  {background-position: -80px 0;}
}


@media (min-width:1500px) {
.kalender  {background-position: 0 0;}
}

@media (max-width:1013.98px) {
.kalender .col-md-6{width: 50%;}
}
@media (max-width: 599.98px) {
.kalender .col-md-6{width: 100%; margin: 0 auto;}
.imageflip .image-section, .imageflip .img, .imageflip .image-src-box,.imageflip .flipper, .imageflip,.imageflip .text-section.back{height: 300px; width: 300px; }
.imageflip{margin: 0 auto; margin-bottom: 20px;}
.element.imageflip.future {touch-action: none; pointer-events: none !Important; }

}

.imageflip.today .image-section.front .heading .text-heading {
  animation: pulse-animation 1.5s infinite;
}

@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
  }
  100% {
    box-shadow: 0 0 0 15px rgba(0, 0, 0, 0);
  }
}