#ListePistes{
    margin: 70px 0 35px;
    display: flex;
    flex-direction: row;
    width: 100%;
    /*flex-wrap: wrap;*/
    flex-flow: row wrap; 
}

#ListePistes div{
    padding: 5px 2.5px;
}

#ListePistes div h4{
    padding: 5px 20px;
    border: #b7b7b7 solid 2px;
    margin: 0;
    color: #393939;
    font-size: 15px;
    font-family: 'Century Gothic',Arial,Helvetica,sans-serif;
    animation-name: example;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    cursor: pointer;
}
#ListePistes div h4:hover{
    animation-name: example2;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    cursor: pointer;
}
#ListePistes div h4.selected{
    animation-name: example2;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    cursor: initial;
}

#ListeImgsPistes div.diverImagee{
    display: none;
}
#ListeImgsPistes div.diverImagee.selected{
    display: flex;
    flex-direction: row;
    /*flex-wrap: wrap;*/
    flex-flow: row wrap;
    animation-name: example3;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}
#ListeImgsPistes div.diverImagee div {
    border: #478b38 solid 2px;
    margin: 10px 2px;
}


@keyframes example {
    from {background-color: #393939;border: #393939 solid 2px;color: #fff;}
    to {background-color: #fff;border: #b7b7b7 solid 2px;color: #393939;}
}
@keyframes example2 {
    from {background-color: #fff;border: #b7b7b7 solid 2px;color: #393939;}
    to {background-color: #393939;border: #393939 solid 2px;color: #fff;}
}
@keyframes example3 {
    from {opacity: 0;}
    to {opacity: 1;}
}