path#fleche{
    /* stroke: none; */

}
path.fleche.active{
    stroke: #FFFFFF;
    /* fill: #FFFFFF; */
    stroke-dasharray: 1200;
  

    opacity: 10;
    animation: animate 1.5s cubic-bezier(1,0,0,0);
}
@keyframes animate {
    0%{
        opacity: 0;
        fill: none;
        stroke-dashoffset: 1200;
    }
    30%{
        opacity: 10;
        fill: #000;
        stroke-dashoffset: 1200;
    }
    60%{
        
        /* fill: rgba(255, 255, 255, 0); */
        
    }
    100%{
        opacity: 10;
        fill: rgb(29, 29, 29);
        stroke-dashoffset: 10;
    }
}
/* path#fleche{
    
    stroke-dasharray: 800;
    stroke-dashoffset: 0;
    fill: green;

    -webkit-animation: dash 2s linear forwards;
    -o-animation: dash 2s linear forwards;
    -moz-animation: dash 2s linear forwards;
    fill: none;
    animation: dash 2s linear forwards;
   transform-origin:left right;
   animation: dash 0.5s linear forwards 0.5s;

} */


/* @keyframes dash{
    from{
        transform: rotatey(100deg);
        fill:none;
    }
    to{
        transform: rotatey(0deg);
        fill: green;
    }
} */
rect.graph-2018{
    border: 1px solid #f00;
    /* fill:none !important; */
   transform-origin:left bottom;

   transform: rotatex(60deg);
   animation:  4s linear forwards 0.5s;
   


}

rect.graph-2018.active{
    border: 1px solid #f00;
    background: #f00 !important;
   transform-origin:left bottom;
   /* transform: rotatex(0deg); */
   animation: barchart 0.5s linear forwards 0.5s;
  
}

@keyframes barchart{
    from{
        transform: rotatex(60deg);
    }
    to{
        transform: rotatex(0deg);
    }
}