:root{
	--jworx-active-dot-color:#00000099;
}

.jworx-carousel{
	overflow-x:hidden;
}

.jworx-carousel > .inner{
	display: flex;
    align-items: center;
    justify-content: space-between;
	width:100%; /* always must be overloaded */
	left: 0%;
    position: relative;
    transition: all 0.5s;
	margin-bottom:20px;
}

/* dots */
.jworx-carousel > .dots{
	display: flex;
    align-items: center;
    justify-content: space-between;
    width: fit-content;
    margin: 0 auto;
}
.jworx-carousel > .dots > .dot {
	width: 10px;
    height: 10px;
    position: relative;
    background-color: #00000033;
    display: inline-block;
    border-radius: 100px;
	margin: 0 4px;
	cursor:pointer
}
.jworx-carousel.pos-0 > .dots > .dot:nth-child(1) { background-color: var(--jworx-active-dot-color); }
.jworx-carousel.pos-1 > .dots > .dot:nth-child(2) { background-color: var(--jworx-active-dot-color); }
.jworx-carousel.pos-2 > .dots > .dot:nth-child(3) { background-color: var(--jworx-active-dot-color); }
.jworx-carousel.pos-3 > .dots > .dot:nth-child(4) { background-color: var(--jworx-active-dot-color); }
.jworx-carousel.pos-4 > .dots > .dot:nth-child(5) { background-color: var(--jworx-active-dot-color); }
.jworx-carousel.pos-5 > .dots > .dot:nth-child(6) { background-color: var(--jworx-active-dot-color); }
.jworx-carousel.pos-6 > .dots > .dot:nth-child(7) { background-color: var(--jworx-active-dot-color); }
.jworx-carousel.pos-7 > .dots > .dot:nth-child(8) { background-color: var(--jworx-active-dot-color); }
.jworx-carousel.pos-8 > .dots > .dot:nth-child(9) { background-color: var(--jworx-active-dot-color); }
.jworx-carousel.pos-9 > .dots > .dot:nth-child(10) { background-color: var(--jworx-active-dot-color); }
