.hero-slider {
}

    .hero-slider
    .slick-track, .hero-slider .slack-list {
        height: 100%;
    }

    .hero-slider > button {
        display: none !important;
    }

.hero-carousel > ul.slick-dots {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 84px;
    display: flex;
    list-style-type: none;
}

    .hero-carousel > ul.slick-dots > li {
        border-right: 1px solid #FFFFFF;
        border-left: 1px solid #FFFFFF;
        width: 25%;
        height: 100%;
        text-align: left;
        padding: 0px;
        vertical-align: top;
        position: relative;
        background-color: #F5F5F5;
    }

        .hero-carousel > ul.slick-dots > li > div.hero-carousel-tab > div.prog-bg, .hero-carousel > ul.slick-dots > li > div.hero-carousel-tab > div.prog-fg {
            position: absolute;
            top: 0;
            width: 100%;
            height: 8px;
            display: none;
        }

        .hero-carousel > ul.slick-dots > li > div.hero-carousel-tab > div.prog-bg {
            background-color: rgba(247, 144, 30, 0.35);
            left: 0;
            z-index: 1;
        }

        .hero-carousel > ul.slick-dots > li > div.hero-carousel-tab > div.prog-fg {
            background-color: var(--sg-primary);
            right: 0;
            z-index: 2;
        }

        .hero-carousel > ul.slick-dots > li:hover {
            cursor: pointer;
        }

        .hero-carousel > ul.slick-dots > li > div:hover {
            cursor: pointer;
        }

        .hero-carousel > ul.slick-dots > li:first-of-type {
            border-left: none;
        }

        .hero-carousel > ul.slick-dots > li:last-of-type {
            border-right: none;
        }

        .hero-carousel > ul.slick-dots > li > div.hero-carousel-tab > div.slick-active {
            background-color: rgba(19, 21, 21, 0.75);
            box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
        }

        .hero-carousel > ul.slick-dots > li.slick-active {
            background-color: #1F1F1F;
            color: #F5F5F5;
        }

            .hero-carousel > ul.slick-dots > li.slick-active > div.hero-carousel-tab > div.hero-carousel-tab-content {
                background-color: #1F1F1F !important;
                color: #F5F5F5;
            }

                .hero-carousel > ul.slick-dots > li.slick-active > div.hero-carousel-tab > div.hero-carousel-tab-content > div > label {
                    background-color: #1F1F1F !important;
                    color: #F5F5F5;
                }

            .hero-carousel > ul.slick-dots > li.slick-active > div.hero-carousel-tab > div.prog-bg,
            .hero-carousel > ul.slick-dots > li.slick-active > div.hero-carousel-tab > div.prog-fg {
                display: block;
            }


                /* .hero-carousel-tab-banner > ul.slick-dots > li.slick-active > div.hero-carousel-tab > div.prog-fg,*/
                .hero-carousel > ul.slick-dots > li.slick-active > div.hero-carousel-tab > div.prog-fg.widthTransition {
                    -webkit-transition: width 14s linear;
                    -o-transition: width 14s linear;
                    transition: width 14s linear;
                }

    .hero-carousel > ul.slick-dots > ul.slick-dots.paused > li > div.hero-carousel-tab > div.prog-fg {
        width: 100% !important;
    }

    .hero-carousel > ul.slick-dots > ul.slick-dots.paused > li.slick-active > div.hero-carousel-tab > .prog-fg,
    .hero-carousel > ul.slick-dots > ul.slick-dots.paused > li.slick-active > div.hero-carousel-tab > .widthTransition {
        -webkit-transition: none;
        -o-transition: none;
        transition: none;
    }


@media only screen and (max-width: 640px) {
    .hero-carousel > ul.slick-dots {
        width: 100%;
        display: block !important;
    }

        .hero-carousel > ul.slick-dots > li {
            width: 100% !important;
            display: none !important;
        }

            .hero-carousel > ul.slick-dots > li.slick-active {
                display: block !important;
                text-align: center;
                border: none !important;
            }

    .slick-arrow {
        display: inline !important;
    }
}