.img-gamme:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0px;
    top: 0px;
    background-color: #fff;
    z-index: 19;
    transition: 0.7s transform cubic-bezier(0.45, 0.05, 0.55, 0.95);
    transform: translateX(-112%);
}

.revealed .img-gamme{
    -webkit-animation: opacity 1s 0.05s cubic-bezier(0.46, 0.03, 0.52, 0.96) forwards;
    animation: opacity 1s 0.05s cubic-bezier(0.46, 0.03, 0.52, 0.96) forwards;
    z-index:20;
}
.revealed .img-gamme:after{
    -webkit-animation: translatesection  1s 0.1s cubic-bezier(0.46, 0.03, 0.52, 0.96) forwards;
    animation: translatesection 1s 0.1s cubic-bezier(0.46, 0.03, 0.52, 0.96) forwards;
}
.img-gamme{opacity:0;transform: translateX(-100%);overflow:hidden;}
.reveal .amber:after{background-color:#ffc107!important}
.reveal .aqua:after{background-color:#00ffff!important}
.reveal .blue:after{background-color:#2196F3!important}
.reveal .light-blue:after{background-color:#87CEEB!important}
.reveal .brown:after{background-color:#795548!important}
.reveal .cyan:after{background-color:#00bcd4!important}
.reveal .blue-grey:after{background-color:#607d8b!important}
.reveal .green:after{background-color:#4CAF50!important}
.reveal .light-green:after{background-color:#8bc34a!important}
.reveal .indigo:after{background-color:#3f51b5!important}
.reveal .khaki:after{background-color:#f0e68c!important}
.reveal .lime:after{background-color:#cddc39!important}
.reveal .orange:after{background-color:#ff9800!important}
.reveal .deep-orange:after{background-color:#ff5722!important}
.reveal .pink:after{background-color:#e91e63!important}
.reveal .purple:after{background-color:#9c27b0!important}
.reveal .deep-purple:after{background-color:#673ab7!important}
.reveal .red:after{background-color:#f44336!important}
.reveal .sand:after{background-color:#fdf5e6!important}
.reveal .teal:after{background-color:#009688!important}
.reveal .yellow:after{background-color:#ffeb3b!important}
.reveal .white:after{background-color:#fff!important}
.reveal .black:after{background-color:#000!important}
.reveal .grey:after{background-color:#9e9e9e!important}
.reveal .light-grey:after{background-color:#f1f1f1!important}
.reveal .dark-grey:after{background-color:#616161!important}
.reveal .pale-red:after{background-color:#ffdddd!important}
.reveal .pale-green:after{background-color:#ddffdd!important}
.reveal .pale-yellow:after{background-color:#ffffcc!important}
.reveal .pale-blue:after{background-color:#ddffff!important}
.reveal .bacovet:after{background-color:#0d2446 !important;}

@keyframes translatesection{
    0% {transform: translateX(-112%);animation-timing-function:  cubic-bezier(0.46, 0.03, 0.52, 0.96);}
    50% {transform: translateX(0%);animation-timing-function:  cubic-bezier(0.46, 0.03, 0.52, 0.96);}
    100% {transform: translateX(112%);animation-timing-function:  cubic-bezier(0.46, 0.03, 0.52, 0.96);}
}

@keyframes translatesectionrev{
    0% {transform: translateX(112%);animation-timing-function:  cubic-bezier(0.46, 0.03, 0.52, 0.96);}
    50% {transform: translateX(0%);animation-timing-function:  cubic-bezier(0.46, 0.03, 0.52, 0.96);}
    100% {transform: translateX(-112%);animation-timing-function:  cubic-bezier(0.46, 0.03, 0.52, 0.96);}
}

@keyframes opacity{
    0% {opacity:0;transform: translateX(-100%);animation-timing-function:  cubic-bezier(0.46, 0.03, 0.52, 0.96);}
    100% {opacity:1;transform: translateX(0%);animation-timing-function:  cubic-bezier(0.46, 0.03, 0.52, 0.96);}
}

@keyframes translateSectionX{
    0% {transform: translateX(-100%);animation-timing-function:  cubic-bezier(0.46, 0.03, 0.52, 0.96);}
    100% {transform: translateX(0%);animation-timing-function:  cubic-bezier(0.46, 0.03, 0.52, 0.96);}
}