﻿

@-webkit-keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-250px * 7));
    }
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-250px * 7));
    }
}

.slider {


    height: 75px;
    margin: auto;
    overflow: hidden;
    position: relative;
    width: 100%;
}

    .slider::before, .slider::after {
     
        content: "";
        height: 75px;
        position: absolute;
        width: 200px;
        z-index: 2;
    }

    .slider::after {
        right: 0;
        top: 0;
        transform: rotateZ(180deg);
    }

    .slider::before {
        left: 0;
        top: 0;
    }

    .slider .slide-track {
        -webkit-animation: scroll 40s linear infinite;
        animation: scroll 15s linear infinite;
        display: flex;
        width: calc(250px * 14);
    }

    .slider .slide {
        height: 70px;
        width: 250px;
    }
