.marquee-container .marquee {
    top: 0;
    left: 0;
    box-sizing: content-box;
    position: relative;
    height: 200px;
    width: auto;
}
.marquee-container {
    overflow: hidden;
}

.marquee-card {
    background: white;
    border-radius: 2px;
    display: inline-block;
    height: 100%;
    margin: 1rem;
    position: relative;
    width: auto;
    color: black;
}

.marquee.vertical {
    /* To make vertical animations */
    animation: vertical 2s linear infinite;
}

.marquee.horizontal {
    /* To make horizontal animations */
    animation: horizontal 20s linear infinite;
    animation-fill-mode: forwards;
}

    .marquee.vertical:hover,
    .marquee.horizontal:hover {
        /* These are to stop the animation on hover */
        animation-play-state: paused;
    }

@keyframes horizontal {
    0% {
        left: 100%;
    }

    100% {
        left: -110%;
    }
}

@keyframes vertical {
    0% {
        top: 100%;
    }

    100% {
        top: -110%;
    }
}

.marquee-default-card:hover {
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.marquee-custom-card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

    .marquee-custom-card:hover {
        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
    }


/** EXAMPLE HOW TO USE THIS MARQUEEE **/
/* --- START ----
        <div class="marquee-container">
        <div class="marquee horizontal">
            @foreach (var item in listCustomer)
            {
                <div class="marquee-card marquee-custom-card">
                    <h5 class="card-header font-weight-bold bg-transparent" style="color:orangered"><strong>@item.Name</strong></h5>
                    <div class="card-body" style="text-align:center">
                        <p class="mb-0 ml-1 light-grey-text">@item.Descriptions[0]</p>
                        <p class="mb-0 ml-1 light-grey-text">@item.Descriptions[1]</p>
                    </div>
                </div>
            }
        </div>
    </div>
 --- END --- */