.multi-item-carousel {
    overflow: visible;
}

.multi-item-carousel .carousel-indicators {
    margin-right: 25%;
    margin-left: 25%;
}

.multi-item-carousel .carousel-control-prev, 
.multi-item-carousel .carousel-control-next {
    background: none;
    width: auto;
    z-index: 50;  /* .carousel-caption has z-index 10 */
    opacity: 1;
}

.multi-item-carousel .carousel-inner {
    /* width: 200%;
    left: -25%; */
    width: 150%;
    left: -25%;
}

.multi-item-carousel .carousel-inner > .carousel-item.next, 
.multi-item-carousel .carousel-inner > .carousel-item.active.right {
    -webkit-transform: translate3d(33%, 0, 0);
    transform: translate3d(33%, 0, 0);
}

.multi-item-carousel .carousel-inner > .carousel-item.prev, 
.multi-item-carousel .carousel-inner > .carousel-item.active.left {
    -webkit-transform: translate3d(-33%, 0, 0);
    transform: translate3d(-33%, 0, 0);
}

.multi-item-carousel .item__third {
    position: relative;  /* captions can now be added */
    width: 33.33333333%;
}

.item__third2 {
    position: relative;  /* captions can now be added */
    width: 33.33333333%;
}

@media (min-width: 993px) {
    .multi-item-carousel .item__third {
        min-height: 565px; /* this should be the height value of the largest item__third card */
    }

    .item__third2 {
        min-height: 265px; /* this should be the height value of the largest item__third card */
    }
}

@media (max-width: 992px) {
    .item__third2 {
        width: 100%;
    }

    .mobile-indicator-position{
        bottom: -70px!important;
    }
}

.multi-item-carousel .item__third p {
    padding: 5px;
}

/* custom carousel card styles */
.multi-item-carousel .card__carousel {
    width: 100%;
    height: auto;
    padding: 15px 15px;
    overflow: visible;
    border: solid;
    border-width: 1px;
    border-color: #252525;
    /* box-shadow: 0 20px 20px 10px rgba(220,220,220,.39); */
}
.multi-item-carousel .carousel-inner .carousel-item div:nth-child(1) {
    transform: scale(0.8);
    opacity: 0.1;
}

.multi-item-carousel .carousel-inner .carousel-item div:nth-child(3) {
    transform: scale(0.8);
    opacity: 0.1;
}

.multi-item-carousel .carousel-inner .carousel-item.active {
    display: inline-flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 11;
}

.multi-item-carousel .carousel-inner .carousel-item {
    display: inline-flex;
    position: absolute;
    top: 0;
    left: 0;
}

.multi-item-carousel .carousel-inner {
    overflow: visible;
}

.multi-item-carousel .carousel-control-prev-icon {
    width: 75px;
    height: 75px;
    background-image: url("../images/arrow-left-long.svg");
    /* background-color: #F25B4B; */
    background-size: 100%;
    border-radius: 50%;
    /* box-shadow: 0 0px 15px 0px rgba(0,0,0,.39); */
}

.multi-item-carousel .carousel-control-next-icon {
    width: 75px;
    height: 75px;
    background-image: url("../images/arrow-right-long.svg");
    /* background-color: #F25B4B; */
    background-size: 100%;
    border-radius: 50%;
    /* box-shadow: 0 0px 15px 0px rgba(0,0,0,.39); */
}

.multi-item-carousel .carousel-control-prev {
    left: 25%;
}

.multi-item-carousel .carousel-control-next {
    right: 25%;
}

.multi-item-carousel .carousel-indicators {
    bottom: 0px;
}

.multi-item-carousel .carousel-indicators li {
    width: 15px !important;
    height: 15px !important;
    border-radius: 50%;
    background-color: rgba(250, 166, 26, 0.5);
    cursor: pointer;
}

.multi-item-carousel .carousel-indicators .active {
    background-color: #FAA61A;
}

.carousel-control-next, .carousel-control-prev{
    bottom: 0px;
    top:unset;
}

@media(max-width: 1440px) {
    .multi-item-carousel .item__third {
        min-height: 536px;
    }
}

@media(max-width: 1200px) {
    .multi-item-carousel .item__third {
        min-height: 463px;
    }
}

@media(max-width: 992px) {
    .multi-item-carousel .item__third {
        min-height: 487px;
    }
}

@media (max-width: 992px) {
    .multi-item-carousel .carousel-inner {
        width: 100%;
        left: 0;
    }

    .multi-item-carousel .item__third {
        width: 100%;
    }

    .multi-item-carousel .card__carousel {
        padding: 15px;
    }

    .multi-item-carousel .carousel-inner .carousel-item div:nth-child(1) {
        display: none;
    }

    .multi-item-carousel .carousel-inner .carousel-item div:nth-child(3) {
        display: none;
    }

    .multi-item-carousel .carousel-inner .carousel-item.active {
        display: block;
    }

    .multi-item-carousel .carousel-inner .carousel-item {
        display: block;
    }

    .multi-item-carousel .carousel-control-prev-icon,
    .multi-item-carousel .carousel-control-next-icon {
        width: 60px;
        height: 60px;
        background-size: 100%;
        border-radius: 50%;
    }

    .multi-item-carousel .carousel-control-prev {
        left: 25px;
        bottom: 0px;
    }
    
    .multi-item-carousel .carousel-control-next {
        right: 25px;
        bottom: 0px;
    }
}

@media (max-width: 576px) {
    .multi-item-carousel .carousel-control-prev-icon,
    .multi-item-carousel .carousel-control-next-icon {
        width: 40px;
        height: 40px;
    }

    .multi-item-carousel .carousel-control-prev {
        left: 15px;
        top: 15px;
    }

    .multi-item-carousel .carousel-control-next {
        right: 15px;
        top: 15px;
    }

    .multi-item-carousel .card__carousel {
        min-height: 155px; /* This should be the height of the tallest element in the sequence. This way the pagination won't jump on mobile */
    }

    .multi-item-carousel .carousel-indicators {
        bottom: 58px;
    }
}

@media (max-width: 430px) {
    .multi-item-carousel .carousel-indicators {
        bottom: 65px;
    }

    .multi-item-carousel .item__third {
        min-height: 395px;
    }

    .multi-item-carousel .carousel-control-next {
        top: 195px;
    }

    .multi-item-carousel .carousel-control-prev {
        top: 195px;
    }
}

@media (max-width: 375px) {
    .multi-item-carousel .carousel-indicators {
        bottom: 84px;
    }

    .multi-item-carousel .carousel-control-next {
        top: 160px;
    }

    .multi-item-carousel .carousel-control-prev {
        top: 160px;
    }
}