.picture {
    position: fixed;
    top: 0;
    object-fit: cover;
    left: -8px;
    width: 100%;
    height: 100%;
   /* animation: zoom-out 5s 8s cubic-bezier(0,1,1,-0.08) infinite;*/
    animation: zoom-in 1.5s ease-out;
}

.animation-zoom-in{
    animation: zoom-in 1.5s ease-out;
}

@keyframes zoom-in {
    0% {
        left: -450px;
        transform: scale(2.5);
    }
    
    100% {
        left: -8px;
        width: 100%;
        height: 100%;
        transform: scale(1, 1);
    }
}

.animation-disappear-big{
    animation: disappearbig 1s ease-in;
    opacity: 0;
}

@keyframes disappearbig {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        left: -600px;
        transform: scale(3);
        opacity: 0;
    }
}

@keyframes zoom-out {
    /*
    0%{
        content: url('/webroot/img/assets/Anim_1_sansfond/anim 1_1920x1080SF_00107.png');
    }

    2.5%{
        content: url('/webroot/img/assets/Anim_1_sansfond/anim 1_1920x1080SF_00108.png');
    }

    5%{
        content: url('/webroot/img/assets/Anim_1_sansfond/anim 1_1920x1080SF_00109.png');
    }

    7.5%{
        content: url('/webroot/img/assets/Anim_1_sansfond/anim 1_1920x1080SF_00110.png');
    }

    10%{
        content: url('/webroot/img/assets/Anim_1_sansfond/anim 1_1920x1080SF_00111.png');
    }

    12.5%{
        content: url('/webroot/img/assets/Anim_1_sansfond/anim 1_1920x1080SF_00112.png');
    }

    15%{
        content: url('/webroot/img/assets/Anim_1_sansfond/anim 1_1920x1080SF_00113.png');
    }

    17.5%{
        content: url('/webroot/img/assets/Anim_1_sansfond/anim 1_1920x1080SF_00114.png');
    }

    20%{
        content: url('/webroot/img/assets/Anim_1_sansfond/anim 1_1920x1080SF_00115.png');
    } 

    22.5%{
        content: url('/webroot/img/assets/Anim_1_sansfond/anim 1_1920x1080SF_00116.png');
    }

    25%{
        content: url('/webroot/img/assets/Anim_1_sansfond/anim 1_1920x1080SF_00117.png');
    }

    27.5%{
        content: url('/webroot/img/assets/Anim_1_sansfond/anim 1_1920x1080SF_00118.png');
    }

    30%{
        content: url('/webroot/img/assets/Anim_1_sansfond/anim 1_1920x1080SF_00119.png');
    }

    32.5%{
        content: url('/webroot/img/assets/Anim_1_sansfond/anim 1_1920x1080SF_00120.png');
    }

    35%{
        content: url('/webroot/img/assets/Anim_1_sansfond/anim 1_1920x1080SF_00121.png');
    }

    37.5%{
        content: url('/webroot/img/assets/Anim_1_sansfond/anim 1_1920x1080SF_00122.png');
    }

    40%{
        content: url('/webroot/img/assets/Anim_1_sansfond/anim 1_1920x1080SF_00123.png');
    }

    42.5%{
        content: url('/webroot/img/assets/Anim_1_sansfond/anim 1_1920x1080SF_00124.png');
    }

    45%{
        content: url('/webroot/img/assets/Anim_1_sansfond/anim 1_1920x1080SF_00123.png');
    } 

    47.5%{
        content: url('/webroot/img/assets/Anim_1_sansfond/anim 1_1920x1080SF_00122.png');
    }

    50% {
        content: url('/webroot/img/assets/Anim_1_sansfond/anim 1_1920x1080SF_00121.png');
    }

    52.5%{
        content: url('/webroot/img/assets/Anim_1_sansfond/anim 1_1920x1080SF_00122.png');
    }

    55%{
        content: url('/webroot/img/assets/Anim_1_sansfond/anim 1_1920x1080SF_00123.png');
    }

    57.5%{
        content: url('/webroot/img/assets/Anim_1_sansfond/anim 1_1920x1080SF_00124.png');
    }

    60%{
        content: url('/webroot/img/assets/Anim_1_sansfond/anim 1_1920x1080SF_00123.png');
    }

    62.5%{
        content: url('/webroot/img/assets/Anim_1_sansfond/anim 1_1920x1080SF_00122.png');
    } 

    65%{
        content: url('/webroot/img/assets/Anim_1_sansfond/anim 1_1920x1080SF_00121.png');
    }

    67.5%{
        content: url('/webroot/img/assets/Anim_1_sansfond/anim 1_1920x1080SF_00120.png');
    }

    70%{
        content: url('/webroot/img/assets/Anim_1_sansfond/anim 1_1920x1080SF_00119.png');
    }

    72.5%{
        content: url('/webroot/img/assets/Anim_1_sansfond/anim 1_1920x1080SF_00118.png');
    }

    75%{
        content: url('/webroot/img/assets/Anim_1_sansfond/anim 1_1920x1080SF_00117.png');
    } 

    77.5%{
        content: url('/webroot/img/assets/Anim_1_sansfond/anim 1_1920x1080SF_00116.png');
    }

    80%{
        content: url('/webroot/img/assets/Anim_1_sansfond/anim 1_1920x1080SF_00115.png');
    }

    82.5%{
        content: url('/webroot/img/assets/Anim_1_sansfond/anim 1_1920x1080SF_00114.png');
    }

    85%{
        content: url('/webroot/img/assets/Anim_1_sansfond/anim 1_1920x1080SF_00113.png');
    }

    87.5%{
        content: url('/webroot/img/assets/Anim_1_sansfond/anim 1_1920x1080SF_00112.png');
    }

    90%{
        content: url('/webroot/img/assets/Anim_1_sansfond/anim 1_1920x1080SF_00111.png');
    }

    92.5%{
        content: url('/webroot/img/assets/Anim_1_sansfond/anim 1_1920x1080SF_00110.png');
    }

    95%{
        content: url('/webroot/img/assets/Anim_1_sansfond/anim 1_1920x1080SF_00109.png');
    }

    97.5%{
        content: url('/webroot/img/assets/Anim_1_sansfond/anim 1_1920x1080SF_00108.png');
    }

    100%{
        content: url('/webroot/img/assets/Anim_1_sansfond/anim 1_1920x1080SF_00107.png');
    }
    */
}

.picture2 {
    position: absolute;
    top: 0;
    left: -20%;
    width: auto;
    height: 100dvh;
    object-fit: cover;
    min-width: 100%;
    min-height: 100%;
    -webkit-transition: background-image 0.1s ease-in-out;
    transition: background-image 0.1s ease-in;
}

/****HIDDEN ELEMENT*****/
@keyframes showElementOpacity {
    from {
        opacity: 0;
        display: none;
    }
    to {
        opacity: 100; 
        display: block;
    }
}

@keyframes hideElementOpacity {
    from {
        opacity: 100;
        display: block;
    }
    to {
        opacity: 0;
        display: none;
    }
}