.boxcategories{position:relative;padding: 0px;overflow:hidden;}
.boxcategories .boxtitle{font-size: 25px;color:#fff;position: absolute;top: 50%;width: 100%;text-align: center;z-index: 2;left: 0px;padding: 0px 15px;}
.boxcategories .boxtitle a {transition:0.3s ease all;color:#fff;text-decoration:none !important;position: relative;display: flex;align-items: center;justify-content: center;text-transform: uppercase;}
.selection { position: relative; margin-bottom: 90px;}

.boxcategories:hover .boxtitle a{color:#46a737;}




.boxcategories .boxtitle:after{content:"";width:10px;height:20px;display:block;background:#46a737;margin-left: 20px;position: absolute;right: 10px;transition: 0.3s ease right, 0.3s width ease;top: 7px;}

.boxcategories .boxtitle:before{content:"";width: 10px;height:20px;display:block;background:#46a737;margin-right: 20px;position: absolute;left: 10px;transition: 0.3s ease left , 0.3s width ease;}



.boxcategories img{max-width:100%;}

.boxcategories:after{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background: rgba(17, 85, 127, 0.74);
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-transition: -webkit-transform 0.9s 0.1s cubic-bezier(0.84, -0.01, 0.48, 0.995);
    transition: -webkit-transform 0.9s 0.1s cubic-bezier(0.84, -0.01, 0.48, 0.995);
    transition: transform 0.9s 0.1s cubic-bezier(0.84, -0.01, 0.48, 0.995);
    transition: transform 0.4s 0.1s cubic-bezier(0.84, -0.01, 0.48, 0.995), -webkit-transform 0.4s 0.1s cubic-bezier(0.84, -0.01, 0.48, 0.995);
    -webkit-transform: translate(-40px, 0);
    -ms-transform: translate(-40px, 0);
    transform: translate(-100%, 0);
    content:"";
    z-index: 1;
    }
.boxcategories:hover:after{transform: translate(00%, 0);}



@media (max-width: 767px)
{
.boxcategories .boxtitle:before {
    content: "";
   
    left: 10px;
}

.boxcategories .boxtitle:after {
    content: "";
   
    right: 10px;
}
}




@media (max-width: 650px)
{
.boxcategories img{width:100%;}
.liste_categories>div{width:100%}




}













