@media (min-width: 768px) and (max-width: 991px) {
    /* Show 4th slide on md if col-md-4*/
    .carousel-inner .active.col-md-4.carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -33.3333%; /*change this with javascript in the future*/
        z-index: -1;
        display: block;
        visibility: visible;
    }
}

@media (min-width: 576px) and (max-width: 768px) {
    /* Show 3rd slide on sm if col-sm-6*/
    .carousel-inner .active.col-sm-6.carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -50%; /*change this with javascript in the future*/
        z-index: -1;
        display: block;
        visibility: visible;
    }
}

@media (min-width: 576px) {
    .carousel-item {
        margin-right: 0;
    }
    /* show 2 items */
    .carousel-inner .active + .carousel-item {
        display: block;
    }

    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item {
        transition: none;
    }

    .carousel-inner .carousel-item-next {
        position: relative;
        transform: translate3d(0, 0, 0);
    }
    /* left or forward direction */
    .active.carousel-item-left + .carousel-item-next.carousel-item-left,
    .carousel-item-next.carousel-item-left + .carousel-item,
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    /* farthest right hidden item must be also positioned for animations */
    .carousel-inner .carousel-item-prev.carousel-item-right {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        display: block;
        visibility: visible;
    }
    /* right or prev direction */
    .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
    .carousel-item-prev.carousel-item-right + .carousel-item,
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }
}
/* MD */
@media (min-width: 768px) {
    /* show 3rd of 3 item slide */
    .carousel-inner .active + .carousel-item + .carousel-item {
        display: block;
    }

    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
        transition: none;
    }

    .carousel-inner .carousel-item-next {
        position: relative;
        transform: translate3d(0, 0, 0);
    }
    /* left or forward direction */
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    /* right or prev direction */
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }
}
/* LG */
@media (min-width: 991px) {
    /* show 4th item */
    .carousel-inner .active + .carousel-item + .carousel-item + .carousel-item {
        display: block;
    }

    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item {
        transition: none;
    }
    /* Show 5th slide on lg if col-lg-3 */
    .carousel-inner .active.col-lg-3.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -25%; /*change this with javascript in the future*/
        z-index: -1;
        display: block;
        visibility: visible;
    }
    /* left or forward direction */
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    /* right or prev direction //t - previous slide direction last item animation fix */
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }
}



@media only screen and (max-height: 777px) and (min-width: 768px) {
    .header-banner .content-wrapper {
        padding: 52px 0 36px 0;
    }
}


@media only screen and (min-width: 768px) {
    .header-banner .content-wrapper {
        bottom: 0;
        padding: 72px 0 56px 0;
    }
}

@media(max-width:520px) {
    .hideonmobile-1 {
        display: none;
    }
}

/*=========================================================================*/

.tns-brands .tns-outer [data-action], .tns-brands .tns-nav {
    display: none
}

.tns-brands .tns-outer {
    margin-top: 28px
}

    .tns-brands .tns-outer [aria-controls] {
        background-color: transparent;
        border: none;
        box-shadow: none;
        color: transparent;
        width: 15px;
        height: 15px;
        padding: 10px;
        box-sizing: border-box;
        border-top: 2px solid #FF8000;
        border-right: 2px solid #FF8000;
        cursor: pointer;
        margin: 0 20px;
        z-index: 2;
    }

        .tns-brands .tns-outer [aria-controls]:nth-child(1) {
            transform: rotate(-135deg)
        }

            .tns-brands .tns-outer [aria-controls]:nth-child(1):active {
                transform: rotate(-135deg) scale(0.9)
            }

        .tns-brands .tns-outer [aria-controls]:nth-last-child(1) {
            transform: rotate(45deg)
        }

            .tns-brands .tns-outer [aria-controls]:nth-last-child(1):active {
                transform: rotate(45deg) scale(0.9)
            }

.tns-brands .tns-controls {
    display: flex;
    justify-content: space-between;
    margin-bottom: -64px
}

.tns-brands .tns-item {
    text-align: center;
    transition: opacity 150ms linear;
}

    .tns-brands .tns-item:hover {
        opacity: .5
    }

@media (max-width:992px) {
    .tns-brands .tns-item {
        transform: scale(0.6)
    }
}