.circle-carousel
{
    position: relative;

    width: 1132px;
    margin: 24vh 33px 0 auto;

    /* padding-top: 100%;

    background: rgba(0, 0, 0, .3); */
}
/* .circle-carousel .slides
{
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;
} */
/* .circle-carousel .slide
{
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;

    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
    height: 100%;

    opacity: 0;
    background: rgba(255, 0, 0, .3);
}
.circle-carousel .slide.active
{
    z-index: 1;

    opacity: 1;
} */
.circle-carousel .pagination
{
    position: absolute;
    z-index: 1;
    top: -193px;
    left: -343px;

    width: 1766px;
    height: 1766px;

    user-select: none;
    pointer-events: none;

    border: 1px dashed #A3A3A3;
    border-radius: 50%;

    transition-timing-function: ease-out;
    transition-property: transform;
    /* transform: translate(-50%, -50%); */
}
.circle-carousel .pagination .dot
{
    position: absolute;
    top: 0;
    left: 50%;

    color: #848484;

    display: flex;
    justify-content: center;
    align-items: center;

    width: 7px;
    height: 7px;

    cursor: pointer;
    pointer-events: auto;

    border-radius: 50%;
    /* background: black; */

    transition: color .3s linear;
    transform: translate(-50%, -50%);
}

.circle-carousel .pagination .dot:hover,
.circle-carousel .pagination .item.active .dot
{
    color: #CC142D;
}

.circle-carousel .pagination .dot::before
{
    content: "";

    position: absolute;
    top: 50%;
    left: 50%;

    width: 7px;
    height: 7px;

    border-radius: 50%;
    background: currentColor;

    transform: translate(-50%, -50%);
}

.circle-carousel__img
{
    position: absolute;
    top: -84px;
    left: 50%;

    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-wrap: wrap;

    width: 113px;
    height: 84px;
    padding-bottom: 16px;

    background: #FFF;

    transform: translateX(-50%);
}

.circle-carousel__img img
{
    display: block;

    max-width: 100%;
    max-height: 100%;
}

.circle-carousel__img img.loaded
{
    opacity: .5;

    transition: filter .3s linear, opacity .3s linear;

    filter: grayscale(100%);
}

.circle-carousel .pagination .dot:hover .circle-carousel__img img.loaded,
.circle-carousel .pagination .item.active .circle-carousel__img img.loaded,
.circle-carousel__img:hover img.loaded
{
    opacity: 1;

    filter: grayscale(0%);
}

.circle-carousel .pagination .item
{
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    border-radius: 50%;
}
/* .circle-carousel .pagination .item.active .dot
{
    color: black;

    background: white;
} */
.circle-carousel .next,
.circle-carousel .prev
{
    position: absolute;
    z-index: 1;
    bottom: 6%;

    font-size: 12px;

    user-select: none;
    letter-spacing: .3em;
    text-transform: uppercase;

    transition: .3s;
}
.circle-carousel .next:before,
.circle-carousel .prev:before
{
    content: "";

    position: absolute;
    z-index: -1;
    top: 50%;

    border-style: solid;
    border-color: transparent black;

    transition: .3s;
    transform: translate(-50%, -50%);
}
.circle-carousel .next:hover,
.circle-carousel .prev:hover
{
    color: black;

    cursor: pointer;
}
.circle-carousel .next:hover:before,
.circle-carousel .prev:hover:before
{
    border-color: transparent white;

    transform: translate(-50%, -50%) scale(1.05);
}
.circle-carousel .next
{
    right: 5%;
}
.circle-carousel .next:before
{
    left: 65%;

    border-width: 30px 0 30px 70px;
}
.circle-carousel .prev
{
    left: 5%;
}
.circle-carousel .prev:before
{
    left: 35%;

    border-width: 30px 70px 30px 0;
}