/* This makes the corners of videos round */
video {	
	margin-bottom:0px;
	-moz-border-radius:24px;
	-webkit-border-radius:24px;
	border-radius:24px;
}

/* This centers the log-out button and lets the Text be displayed as is */
.mod-login-logout__button.logout-button {
    text-align: center;
}

.mod-login-logout__button.logout-button button.btn.btn-primary {
    text-transform: initial;
    color: white;
    background: #e00000;   
}

/* This should make nice colorful scrollbars */
/* Works on Firefox */
* {
  scrollbar-width: auto;
  scrollbar-color: #e00000 white;
}

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

*::-webkit-scrollbar-track {
  background: white;
}

*::-webkit-scrollbar-thumb {
  background-color: whitesmoke;
  border-radius: 20px;
  border: 2px solid #e00000;
}

/* This should break words correctly. Problem Hubies iPhone 13 */
.hyphenate{
 word-wrap: break-word;
 -webkit-hyphens: auto;
 -moz-hyphens: auto;
 -ms-hyphens: auto;
 -o-hyphens: auto;
 hyphens: auto;
}

/* This sets the DATE / TIME clocks parameters */
.mod_datetime {
color: #ECF0F1;
font-family: Verdana;  
font-weight: 500;
font-size: 16px;
line-height: 18px;
text-align: right !important;
display: block !important;
}   

/* fixes the space above the buttons in the menu */
li.deeper > span i.ba-icon-caret-right, 
li.deeper > a i.ba-icon-caret-right {
    line-height: 0;
}

/* make menu entry BOLD when selected */
.vertical-menu .nav > li.active >a {
    font-weight: bold !important;
}


/* This is for disabling pulling a picture from the lightbox to desktop */
.ba-modal-body.ba-resize > div.modal-image img, 
.ba-modal-body.ba-description-below > div.modal-image img {
	pointer-events: none;
}
 
body:not(.gridbox) .nav-hover-effect.hover-18 .nav.menu > li > a {
    display: inline-block;
    overflow: visible;
    position: relative;
    transform-origin: 50% 0;
    transform: rotateX(90deg) translateY(-22px);
    transform-style: preserve-3d;
    transition: transform 0.3s;
}
 
body:not(.gridbox) .nav-hover-effect.hover-18 .nav.menu > li.active > a,
body:not(.gridbox) .nav-hover-effect.hover-18 .nav.menu > li:hover > a {
    transform: rotateX(0deg) translateY(0);
}
 
body:not(.gridbox) .nav-hover-effect.hover-18 .nav.menu > li > a:after {
    background: var(--button-background-hover);    
}
 
body:not(.gridbox) .nav-hover-effect.hover-18 .nav.menu > li > a:before {
    align-items: center;
    backface-visibility: hidden;
    background: var(--button-background-color);
    content: attr(data-hover);
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    position: absolute;
    top: 100%;
    transform-origin: 50% 0;
    transform: rotateX(-90deg);
    transition: background 0.3s;
    width: 100%;
}
 
body:not(.gridbox) .nav-hover-effect.hover-18 .nav.menu > li.active > a:before,
body:not(.gridbox) .nav-hover-effect.hover-18 .nav.menu > li:hover > a:before {
    background: var(--button-background-color);
}

/* this puts a copyright in the thumbnails */
.ba-image:before {
    content: '© R. Sonnabend, 68219 Mannheim';
    position: absolute;
    z-index: 10000;
    color: #cccccc;
    font-size: 10px;
    font-weight: bold;
    bottom: 01%;
    left: 05px;    
}

/* This is for the snow */
#snow {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1000;
}

/* this is 4 the lightbox fade in */
.visible-section .custom-effect-1,
.visible-lightbox .custom-effect-1 {
    animation: effect-1 1.1s both;
}
 
@keyframes effect-1 {
    0% {transform: translateY(-500px);animation-timing-function: ease-in;opacity: 0;}
    38% {transform: translateY(0);animation-timing-function: ease-out;opacity: 1;}
    55% {transform: translateY(-65px);animation-timing-function: ease-in;}
    72% {transform: translateY(0);animation-timing-function: ease-out;}
    81% {transform: translateY(-28px);animation-timing-function: ease-in;}
    90% {transform: translateY(0);animation-timing-function: ease-out;}
    95% {transform: translateY(-8px);animation-timing-function: ease-in;}
    100% {transform: translateY(0);animation-timing-function: ease-out;}
}

@keyframes hover-6 {
    0% {opacity: 0;transform-origin: 50% 50%;transform: scale(2, 2);filter: blur(90px);}
    100% {opacity: 1;transform-origin: 50% 50%;transform: scale(1, 1);filter: blur(0px);}
}
 
.visible-section .custom-effect-6,
.visible-lightbox .custom-effect-6 {
    animation: hover-6 1s  both;
}

/* this is 4 the christmas lights */
.christmas-lights li {
    --christmas-lights-1: #057d70; /*color - 1*/
    --christmas-lights-2: #d41a21; /*color - 2*/
    --christmas-lights-3: #ffd27c; /*color - 3*/
    animation-duration: 2s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-name: flash-1;
    border-radius: 50%;
    display: inline-block;
    height: 20px;
    margin: 25px 20px;
    position: relative;
    width: 20px;
}
 
.christmas-lights {
    left: 0;
    margin: 0;
    pointer-events: none;
    position: fixed;
    right: 0;
    top: -15px;
    white-space: nowrap;
    width: 100%;
    z-index: 100;
}
 
.christmas-lights[data-position="bottom"] {
    top: auto;
    bottom: -15px;
    transform:scale(-1)
}
 
.christmas-lights[data-position="right"],
.christmas-lights[data-position="left"] {
    transform: rotate(-90deg);
    left: -10px;
    top: 0;
    right: auto;
    bottom: 0;
    width: 100vh;
}
 
.christmas-lights[data-position="right"] {
    transform: rotate(90deg);
    left: auto;
    right: -15px;
}
 
.christmas-lights li:before {
    content: "";
    position: absolute;
    background: #505050;
    width: 10px;
    height: 10px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    top: -9px;
    left: 5px;
}
 
.christmas-lights li:after {
    content: "";
    top: -23px;
    left: 10px;
    position: absolute;
    width: 60px;
    height: 20px;
    border-bottom: solid #505050 2px;
    border-radius: 50%;
}
 
.christmas-lights li:last-child:after {
    content: none;
}
 
.christmas-lights li:first-child {
    margin-left: -40px;
}
 
.christmas-lights li:nth-child(2n+1) {
    background: var(--christmas-lights-1);
    box-shadow: 0px 5px 24px 3px rgb(249 212 129);
    animation-name: flash-2;
    animation-duration: 0.4s;
}
 
.christmas-lights li:nth-child(4n+2) {
    background: var(--christmas-lights-2);
    box-shadow: 0px 5px 24px 3px var(--christmas-lights-2);
    animation-name: flash-3;
    animation-duration: 1.1s;
}
 
.christmas-lights li:nth-child(odd) {
    animation-duration: 1.8s;
}
 
.christmas-lights li:nth-child(3n+1) {
      animation-duration: 1.4s;
}
 
@keyframes flash-1 {
    0%, 100% {
        background: var(--christmas-lights-1);
        box-shadow: 0px 5px 24px 3px var(--christmas-lights-1);
    }
    50% {
        background: var(--christmas-lights-2);
        box-shadow: 0px 5px 24px 3px var(--christmas-lights-2);
    }
}
 
@keyframes flash-2 {
    0%, 100% {
        background: var(--christmas-lights-2);
        box-shadow: 0px 5px 24px 3px var(--christmas-lights-2);
    }
    50% {
        background: var(--christmas-lights-3);
        box-shadow: 0px 5px 24px 3px var(--christmas-lights-3);
    }
}
 
@keyframes flash-3 {
    0%, 100% {
        background: var(--christmas-lights-3);
        box-shadow: 0px 5px 24px 3px var(--christmas-lights-3);
    }
    50% {
        background: var(--christmas-lights-1);
        box-shadow: 0px 5px 24px 3px var(--christmas-lights-1);
    }
}