/* 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;
}

/* für den 3D SUBMenue fix */
.main-menu .nav-child li a > span {
	padding: 0 !important;
        border: none!important;
        background: transparent!important;	
}

/* für den 3D Menueffekt */
body:not(.gridbox) .nav-hover-effect.hover-18 .nav.menu > li {
    perspective: 1000px;
}
 
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: '© Robert Sonnabend, 68219 Mannheim';
    position: absolute;
    z-index: 10000;
    color: #cccccc;
    font-size: 10px;
    font-weight: bold;
    bottom: 01%;
    left: 05px;    
}

/* this is 4 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);
    }
}