
@keyframes boldy100pourcentupdownanimation {

    0% {
        bottom: -50%;
    }

    10% {
        bottom: 0%;
    }

    90% {
        bottom: 0%;
    }

    100% {
        bottom: -50%;
    }

}



@keyframes boldy100pourcentAnim {

    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(-5deg);
    }

    50% {
        transform: rotate(0deg);
    }

    75% {
        transform: rotate(5deg);
    }

    100% {
        transform: rotate(0deg);
    }

}



.boldyCentPourcent {
    position:fixed;
    top: 0em;
    left: 0em;
    width: 100%;
    height: 100%;
    z-index: 1000002;
    pointer-events: none;


    .containerIllustration {

        position: absolute;
        left: 0em;
        bottom: -50em;
        width: 100%;
        height: 100%;
        

        


        .illustration {
            position: absolute;
            bottom: -0.5em;
            left: 10%;
            height: 30%;
            transform-origin: 60% 100%;
            animation-name: boldy100pourcentAnim;
            animation-duration: 1s;
            animation-iteration-count: infinite;
            animation-fill-mode: forwards;
            animation-timing-function: linear;
        }


    }


    .animUp {
        animation-name: boldy100pourcentupdownanimation;
        animation-duration: 7s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
    }

}