:root {
    --step: 4;
}

#photoHebra {
    position: absolute;
    margin-left: 340px;
    margin-top: 282px;
    width: 660px;
    z-index: 20;
}


#photoHebra .letterflow {
    position: relative;
    overflow: hidden;
}

#photoHebra .letterMove img {
    width: 100%;
    display:block;
    margin:auto;
}

#photoHebra .letterMove {
    font-size: 0px;
    position: absolute;
    width: 3850%;
    left: 0%; /*14%;*/
    /*top: 0%;*/ /*12%;*/
    z-index: -10;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-duration: 148s; /*152*/
    animation-play-state: running;
    animation-name: movephotostep;
    animation-timing-function: steps(37, start); /*38,jump-none*/
    height:100%;
    display:flex;
    align-items:center;
    
}

#photoHebra .letterMove1 {
    animation-name: movephoto1;
}

#photoHebra:hover .letterMove {
    animation-play-state: paused;
    /*animation: movephoto1 50s linear infinite alternate;*/
}

#photoHebra:hover .fondu .cache {
    animation-play-state: paused;
    /*animation: movephoto1 50s linear infinite alternate;*/
}

#photoHebra .letterMove div div {
    width: 2.6%;
    display: inline-block;
}

#photoHebra .fondu {
    top: 0%; /*12%;*/
    animation-delay: 2s;
}

#photoHebra .fixe {
    top: 0%; /*12%;*/
    background-color:white;
}

#photoHebra .fondu .cache {
    /*opacity: 0;*/
    animation-fill-mode: forwards;
    animation-play-state: running;
    animation: fonduphoto 2s ease-in-out infinite alternate; /*ease-in-out  alternate;*/
}

@keyframes movephotostep {
    0% {
        left: 0%;
    }

    100% {
        left: -3704%;
    }
}

@keyframes fonduphoto {
    0% {
        opacity: 1;
    }

    15% {
        opacity: 1;
    }

    85% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}