.carousel {
    position: relative;
    box-sizing: border-box
}

.carousel *, .carousel *:before, .carousel *:after {
    box-sizing: inherit
}

.carousel.is-draggable {
    cursor: move;
    cursor: grab
}

.carousel.is-dragging {
    cursor: move;
    cursor: grabbing
}

.carousel__viewport, .carousel__thumb-viewport {
    position: relative;
    overflow: hidden;
    max-width: 100%;
    max-height: 100%
}

.carousel__track, .carousel__thumb-track {
    display: flex
}

.carousel__slide, .carousel__thumb-slide {
    flex: 0 0 auto;
    width: var(--carousel-slide-width, 60%);
    max-width: 100%;
    padding: 1rem;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain
}

.has-dots {
    margin-bottom: calc(0.5rem + 22px)
}

.carousel__dots {
    margin: 0 auto;
    padding: 0;
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    list-style: none;
    user-select: none
}

.carousel__dots .carousel__dot {
    margin: 0;
    padding: 0;
    display: block;
    position: relative;
    width: 22px;
    height: 22px;
    cursor: pointer
}

.carousel__dots .carousel__dot:after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: currentColor;
    opacity: .25;
    transition: opacity .15s ease-in-out
}

.carousel__dots .carousel__dot.is-selected:after {
    opacity: 1
}

.carousel__button {
    width: var(--carousel-button-width, 48px);
    height: var(--carousel-button-height, 48px);
    padding: 0;
    border: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: all;
    cursor: pointer;
    color: var(--carousel-button-color, currentColor);
    background: var(--carousel-button-bg, transparent);
    border-radius: var(--carousel-button-border-radius, 50%);
    box-shadow: var(--carousel-button-shadow, none);
    transition: opacity .15s ease
}

.carousel__button.is-prev, .carousel__button.is-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

.carousel__button.is-prev {
    left: 10px
}

.carousel__button.is-next {
    right: 10px
}

.carousel__button[disabled] {
    cursor: default;
    opacity: .3
}

.carousel__button svg {
    width: var(--carousel-button-svg-width, 50%);
    height: var(--carousel-button-svg-height, 50%);
    fill: none;
    stroke: currentColor;
    stroke-width: var(--carousel-button-svg-stroke-width, 1.5);
    stroke-linejoin: bevel;
    stroke-linecap: round;
    filter: var(--carousel-button-svg-filter, none);
    pointer-events: none
}

/* Universal video thumb icon */
.video__slide img, .video__slide i {
    min-width: 100px;
    min-height: 130px;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3rem;
    background-color: #eee;
    background-size: 70%;
    background-position: center center;
}



/**
 * Main Carousel
 **/
#mainCarousel .one {
    width: 100%;
}

#mainCarousel .two {
    width: 50%;
}

#mainCarousel .three {
    width: 33%;
}

#mainCarousel .four {
    width: 25%;
}
/**
 * End Main Carousel
 **/



/**
 * Thumb Carousel
 **/
#thumbCarousel .carousel__slide, .carousel__thumb-slide {
    width: auto;
}
/**
 * End Thumb Carousel
 **/



/**
 * Other Carousel
 **/
#otherCarousel .carousel__slide {
    width: auto;
}
/**
 * End Other Carousel
 **/

@media (max-width: 480px) {
    #mainCarousel .carousel__track {
        width: 100%;
    }

    #mainCarousel .carousel__slide, #mainCarousel .carousel__slide img {
        width: 100%;
        padding: 0;
    }

    .carousel__button.is-next, .carousel__button.is-prev {
        width: 30px;
        height: 30px;
    }

    .carousel__button.is-next {
        right: 20px
    }

    .carousel__button.is-prev {
        left: 20px
    }

    #thumbCarousel .carousel__viewport {
        width: 100%;
    }

    #thumbCarousel .carousel__slide {
        padding: 1rem .5rem;
        width: auto;
    }
}