/* =============================================================== *\

   Movie Cloud Container
   - für Pixel-Film
   - für Personal-Fotos
   > Class

\* =============================================================== */
.anim_container{
    opacity: 0;
    transition: opacity 1s;
}
.cloud_movie_container {
    display:flex;
    justify-content: center;
    align-items: center;
    position:relative;
    }

.cloud_movie_container .mov_container{
    position:absolute;
    margin-top: 10px;
    margin-left: 0px;
    }

.cloud_movie_container svg{
    max-width: 640px;
    width:calc(100% - 40px);
    overflow: visible;
    }

.cloud_movie_container svg path{
    stroke-width:40px;
    stroke: white;
    }

.cloud_movie_container .mov_container img{
    width:100%;
    max-width:640px;
    height:auto;
    max-height: 512px;
    object-fit: cover;
    -webkit-mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    mask-size: 100%;
    mask-repeat: no-repeat;
    }



.pixel_movie .mov_container img{
    width: 100vw;
    filter: brightness(1.25);
    opacity: 0.85;
    image-rendering:pixelated;
    }

.svg_filter{
    display:none;
    }

/* Wolkenbilder > Personal Bilder */
.cloud_movie_container.cloud_image .mov_container{
    margin:0;
    }

.cloud_movie_container.cloud_image img{
    display: block;
    margin-left: 2px;
    }

.cloud_movie_container.cloud_image svg{
    width: calc(100% - 40px);
    }
/* =============================================================== *\

 	 Animation

\* =============================================================== */


.anim_container{
    position: relative;
    -webkit-animation: linear infinite;
    -webkit-animation-name: left_right;
    -webkit-animation-duration: 10s;
    animation-timing-function: ease-in-out;
    }

.anim_container .cloud_movie_container {
    position: relative;
    -webkit-animation: linear infinite;
    -webkit-animation-name: top_bottom;
    -webkit-animation-duration: 7s;
    animation-timing-function: ease-in-out;
    }

#block_626b808d3b25d,
#block_868641096238db425adcb9659b9c96f7{
    animation-direction: reverse;
    -webkit-animation-duration: 11s;
	}
	
#block_626b808d3b25d .cloud_movie_container,
#block_868641096238db425adcb9659b9c96f7 .cloud_movie_container{
    animation-direction: reverse;
    -webkit-animation-duration: 8s;
	}

@-webkit-keyframes left_right {
    0% {
        transform: translateX(-10px);
    }
    50% {
        transform: translateX(10px);
    }
    100% {
        transform: translateX(-10px);
    }
}


@-webkit-keyframes top_bottom {
    0% {
        transform: translateY(-5px);
    }
    50% {
        transform: translateY(5px);
    }
    100% {
        transform: translateY(-5px);
    }
}