/* animation*/
@keyframes first {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
        z-index: 1;
    }
    99.99% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 1;
        z-index: 1;
    }
    100% {
        opacity: 0;
        z-index: 0;
    }
}
@keyframes rest {
    0.01% {
        opacity: 0;
        z-index: 0;
    }
    0.011% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
        opacity: 1;
        z-index: 1;
    }
    100% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 1;
    }
}

/* Other CSS */
.brands {
    display: block;
		width:100%;
		overflow: hidden;
		margin-bottom: 15px;
		white-space:nowrap;
		-ms-overflow-style: none;
}

.brands -webkit-scrollbar {
  display: none;
}

.brands a img {
    display: inline-block;
    margin: 10px 20px;
    vertical-align: middle
}

.brands:hover .brands-image-carousel {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}

.brands-image-carousel-first {
    position: relative;
    z-index: 1;
    -webkit-animation: first 15s 1 linear forwards;
    animation: first 15s 1 linear forwards;
}
.brands-image-carousel-second,
.brands-image-carousel-third {
    -webkit-animation: rest 30s infinite linear;
    animation: rest 30s infinite linear;
}
.brands-image-carousel-third {
    -webkit-animation-delay: 15s;
    animation-delay: 15;
}

.brands-image-carousel {
    float: left;
    position: absolute;
    padding: 0;
    opacity: 0;
    z-index: 0;
}