@keyframes kfSlideLeft {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(0);
    }
}
@keyframes kfSlideRight {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(0);
    }
}
@keyframes kfSlideOutLeft {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(0);
    }
}
@keyframes kfSlideOutRight {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(100%);
    }
}

.ContentSlider .csItem.slideLeft {
    animation-name: kfSlideLeft;
}
.ContentSlider .csItem.slideRight {
    animation-name: kfSlideRight;
}
.ContentSlider .csLast.slideOutLeft {
    animation-name: kfSlideOutLeft;
}
.ContentSlider .csLast.slideOutRight {
    animation-name: kfSlideOutRight;
}

.ContentSlider .csContentContainer {
    position: relative;
    display:flex;
    width:100%;
}

.ContentSlider .csContentContainer .csItem {
    position: relative;
    flex:1;
}

.ContentSlider .csContentContainer .csLast {
    position: absolute;
    top:0px;
    width:100%;
    height:100%;
    transform: translateX(-100%);
}