@keyframes mask_bw{
    0%{
        opacity: 0;
        mask-position: 0 0;
    }
    20%{
        opacity: 0.4;
    }
    100%{
        opacity: 0.4;
        mask-position: 100% 0;
    }
}
@keyframes mask_bw_out{
    0%{
        opacity: 0.4;
        mask-position: 100% 0;
    }
    80%{
        opacity: 0.4;
    }
    100%{
        opacity: 0;
        mask-position: 0 0;
    }
}
@keyframes mask_col{
   0%{
        opacity: 0;
        mask-position: 0 0;
    }
    20%{
        opacity: 1;
    }
    100%{
        mask-position: 100% 0;
        opacity: 1;
    }
}
@keyframes mask_col_out{
    0%{
        opacity: 1;
        mask-position: 100% 0;
    }
    80%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        mask-position: 0 0;
    }
}


.background-image{
    width: 100%;
    height: 100%;
}
#start .background-wrapper{
    opacity: 0.4;
}
#ueber-mich .background-wrapper{
    opacity: 0.7;
}
.background-event-start{
    background-size: contain;
    background-position: left !important;
    position: absolute;
    /* opacity: 0; */
    background-repeat: no-repeat;
    width: 50%;
        height: 50vh;
    transform: translateY(0);
    animation: bg_start linear;
    animation-timeline: view();
    width: 50%;
    left: 10%;
    top: 35%;
    height: 50vh;
}  

.background-event-start .background-image{
    background-position: left !important;
}
.background-event-ueber-mich{
    width: 50%;
  right: 15%;
  top: 20%;
  height: 50vh;
    position: absolute;
    opacity: 0.2;
     background-repeat: no-repeat;
    transform: translateY(0);
    animation: bg_start linear;
    animation-timeline: view();
}
@keyframes bg_start {
    0% {
        opacity: 0;
        transform: translateY(5em);
    }
    10%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform: translateY(-5em);
    }
}


@keyframes scroll_down {
    0%{
        opacity: 0.05;
        fill: rgb(145, 25, 115);
    }
    30%{
        opacity: 1;
        fill: rgb(40, 220, 185);
    }
    34%{
        opacity: 0.05;
        fill: rgb(145, 25, 115);
    }
}
    
.breadcrumbs{
    opacity: 0.2;
}
#kontakt .breadcrumbs{
    opacity: 0.3;
}
/* #kontakt .breadcrumbs #typo path, */
#kontakt .breadcrumbs .deco path, 
#kontakt .breadcrumbs .rect path {
    fill: rgba(255, 255, 255, 1) !important;
    stroke: rgba(255, 255, 255, 1) !important;
}
#kontakt .breadcrumbs .swoosh path{
    fill: initial;
    stroke: initial;
}
#kontakt .breadcrumbs .typo path{
    fill: rgba(255, 255, 255, 1) !important;
}
.tnFX .breadcrumbs{
    filter: drop-shadow(1px 0px 0px rgba(0, 0, 0, 0.1));
    transform: scale(1);
    transition: all 0.4s;
}


.tnFX-1.tnFX-fadeOut-breadcrumbs .breadcrumbs, 
.tnFX-2.tnFX-fadeOut-breadcrumbs .breadcrumbs, 
.tnFX-3.tnFX-fadeOut-breadcrumbs .breadcrumbs{
    opacity: 0; 
    transform: scale(1);

    transition: all 0.7s ease;
}


@keyframes tnFX_fadeOut{ 
    0%{
        opacity:0.2;
    }
    100%{
        opacity: 0;
    }
}


#progress-bar {
    position: relative;
    /* top: 4em; */
    background: rgba(255, 0, 0, 0.4);
    height: 5px;
    width: 100%;
    z-index: 1;
    scale: 0 1;
    transform-origin: left;
    animation: progress linear; 
    animation-timeline: scroll();
}
@keyframes progress {
    to{
        scale: 1 1;
    }
}


@media screen and (max-width: 768px){
  .background-event-start, 
  .background-event-ueber-mich{
    width: 90%;
  } 
  .background-event-ueber-mich{
    right: 0;
    top: 30%;
  } 
}


.art-slider-1 .art-wrapper{
    animation: art_wrapper linear;
    animation-timeline: view(); 
    animation-range: 50% 100%;
}
@keyframes art_wrapper {
    from{
        transform: translateX(0)
    }
    to{
        transform: translateY(-5em);
    }

}