.local_timeline{
    position:relative;
    margin:50px auto;
    /*width:1000px;*/
    box-sizing:border-box;
}
.local_timeline:before{
    content:'';
    position:absolute;
    left:50%;
    width:2px;
    height:100%;
    background:#c5c5c5;
}
.local_timeline ul{
    padding:0;
    margin:0;
}
.local_timeline ul li{
    list-style:none;
    position:relative;
    width:50%;
    padding:20px 40px;
    box-sizing:border-box;
}
.local_timeline ul li:nth-child(odd){
    float:left;
    text-align:right;
    clear:both;
}
.local_timeline ul li:nth-child(even){
    float:right;
    text-align:left;
    clear:both;
}
.content{
    padding-bottom:20px;
}
.local_timeline ul li:nth-child(odd):before
{
    content:'';
    position:absolute;
    width:10px;
    height:10px;
    top:24px;
    right:-6px;
    background:var(--bs-primary);
    border-radius:50%;
    box-shadow:0 0 0 3px rgba(0, 203, 10, 0.46);
}
.local_timeline ul li:nth-child(even):before
{
    content:'';
    position:absolute;
    width:10px;
    height:10px;
    top:24px;
    left:-4px;
    background:var(--bs-primary);
    border-radius:50%;
    box-shadow:0 0 0 3px rgba(0, 203, 10, 0.46);
}
.local_timeline ul li h3{
    padding:0;
    margin:0;
    color:#ffffff;
    font-weight:600;
}
.local_timeline ul li p{
    margin:10px 0 0;
    padding:0;
}
.local_timeline ul li .time h4{
    margin:0;
    padding:0;
    font-size:16px;

}
.local_timeline ul li:nth-child(odd) .time
{
    position:absolute;
    top:12px;
    right:-105px;
    margin:0;
    padding:8px 16px;
    background:var(--bs-primary);
    color:#fff;
    border-radius:18px;
    box-shadow:0 0 0 3px rgba(0, 203, 10, 0.46);
}
.local_timeline ul li:nth-child(even) .time
{
    position:absolute;
    top:12px;
    left:-105px;
    margin:0;
    padding:8px 16px;
    background:var(--bs-primary);
    color:#fff;
    border-radius:18px;
    box-shadow:0 0 0 3px rgba(0, 203, 10, 0.46);
}
@media(max-width:1000px)
{
    .local_timeline{
        width:100%;
    }
}
@media(max-width:767px){
    .local_timeline{
        width:100%;
        padding-bottom:0;
    }
    h1{
        font-size:40px;
        text-align:center;
    }
    .local_timeline:before{
        left:20px;
        height:100%;
    }
    .local_timeline ul li:nth-child(odd),
    .local_timeline ul li:nth-child(even)
    {
        width:100%;
        text-align:left;
        padding-left:50px;
        padding-bottom:50px;
    }
    .local_timeline ul li:nth-child(odd):before,
    .local_timeline ul li:nth-child(even):before
    {
        top:-18px;
        left:16px;
    }
    .local_timeline ul li:nth-child(odd) .time,
    .local_timeline ul li:nth-child(even) .time{
        top:-30px;
        left:50px;
        right:inherit;
    }
}


/*Vendor Banner Carousal*/
.wrapper {
    /*background: linear-gradient(60deg, #420285, #08BDBD);*/
    background: linear-gradient(90deg, rgba(18,68,55,1) 0%, rgba(6,162,151,1) 100%);;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
}

.carousel_vendor {
    position: relative;
    width: 100%;
    max-width: 500px;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.carousel__item {
    display: flex;
    align-items: center;
    position: absolute;
    width: 100%;
    padding: 0 12px;
    opacity: 0;
    filter: drop-shadow(0 2px 2px #555);
    will-change: transform, opacity;
    -webkit-animation: carousel-animate-vertical 27s linear infinite;
    animation: carousel-animate-vertical 27s linear infinite;
}

.carousel__item:nth-child(1) {
    -webkit-animation-delay: calc(3s * -1);
    animation-delay: calc(3s * -1);
}

.carousel__item:nth-child(2) {
    -webkit-animation-delay: calc(3s * 0);
    animation-delay: calc(3s * 0);
}

.carousel__item:nth-child(3) {
    -webkit-animation-delay: calc(3s * 1);
    animation-delay: calc(3s * 1);
}

.carousel__item:nth-child(4) {
    -webkit-animation-delay: calc(3s * 2);
    animation-delay: calc(3s * 2);
}

.carousel__item:nth-child(5) {
    -webkit-animation-delay: calc(3s * 3);
    animation-delay: calc(3s * 3);
}

.carousel__item:nth-child(6) {
    -webkit-animation-delay: calc(3s * 4);
    animation-delay: calc(3s * 4);
}

.carousel__item:nth-child(7) {
    -webkit-animation-delay: calc(3s * 5);
    animation-delay: calc(3s * 5);
}

.carousel__item:nth-child(8) {
    -webkit-animation-delay: calc(3s * 6);
    animation-delay: calc(3s * 6);
}

.carousel__item:last-child {
    -webkit-animation-delay: calc(-3s * 2);
    animation-delay: calc(-3s * 2);
}

.carousel__item-head {
    border-radius: 50%;
    background-color: #d7f7fc;
    width: 90px;
    height: 90px;
    padding: 14px;
    position: relative;
    margin-right: -45px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 50px;
}

.carousel__item-body {
    width: 100%;
    background-color: #fff;
    border-radius: 8px;
    padding: 16px 20px 16px 70px;
}

.title {
    text-transform: uppercase;
    font-size: 20px;
    margin-top: 10px;
}

@-webkit-keyframes carousel-animate-vertical {
    0% {
        transform: translateY(100%) scale(0.5);
        opacity: 0;
        visibility: hidden;
    }
    3%, 11.1111111111% {
        transform: translateY(100%) scale(0.7);
        opacity: 0.4;
        visibility: visible;
    }
    14.1111111111%, 22.2222222222% {
        transform: translateY(0) scale(1);
        opacity: 1;
        visibility: visible;
    }
    25.2222222222%, 33.3333333333% {
        transform: translateY(-100%) scale(0.7);
        opacity: 0.4;
        visibility: visible;
    }
    36.3333333333% {
        transform: translateY(-100%) scale(0.5);
        opacity: 0;
        visibility: visible;
    }
    100% {
        transform: translateY(-100%) scale(0.5);
        opacity: 0;
        visibility: hidden;
    }
}

@keyframes carousel-animate-vertical {
    0% {
        transform: translateY(100%) scale(0.5);
        opacity: 0;
        visibility: hidden;
    }
    3%, 11.1111111111% {
        transform: translateY(100%) scale(0.7);
        opacity: 0.4;
        visibility: visible;
    }
    14.1111111111%, 22.2222222222% {
        transform: translateY(0) scale(1);
        opacity: 1;
        visibility: visible;
    }
    25.2222222222%, 33.3333333333% {
        transform: translateY(-100%) scale(0.7);
        opacity: 0.4;
        visibility: visible;
    }
    36.3333333333% {
        transform: translateY(-100%) scale(0.5);
        opacity: 0;
        visibility: visible;
    }
    100% {
        transform: translateY(-100%) scale(0.5);
        opacity: 0;
        visibility: hidden;
    }
}