/*--------------------------------------------------------------
# Carousel
--------------------------------------------------------------*/

:root {
	--flext-carousel-color: #000;
	--flext-carousel-pagination-height: 3rem;
	--flext-carousel-arrow-height: 4rem;
	--flext-carousel-arrow-font-size: 1.8rem;
}

.flext-carousel {
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
	position: relative;
	z-index: 1;
}

.flext-carousel-vertical .flext-carousel-wrapper {
	flex-direction: column;
}

.flext-carousel-wrapper {
	box-sizing: content-box;
	display: flex;
	height: 100%;
	position: relative;
	transition-property: transform;
	width: 100%;
	z-index: 1;
}

.flext-carousel-android .flext-slide,
.flext-carousel-wrapper {
	transform: translate3d(0, 0, 0);
}

.flext-carousel-multirow .flext-carousel-wrapper {
	flex-wrap: wrap;
}

.flext-carousel-multirow-column .flext-carousel-wrapper {
	flex-direction: column;
	flex-wrap: wrap;
}

.flext-carousel-free-mode .flext-carousel-wrapper {
	margin: 0 auto;
	transition-timing-function: ease-out;
}

.flext-carousel-pointer-events {
	touch-action: pan-y;
}

.flext-carousel-pointer-events.flext-carousel-vertical {
	touch-action: pan-x;
}

.flext-slide {
	box-sizing: border-box;
	flex-shrink: 0;
	height: 100%;
	opacity: 0;
	position: relative;
	transition-property: transform, opacity;
	width: 100%;
}

.flext-carousel-initialized .flext-slide {
	opacity: 1;
}

.flext-slide-invisible-blank {
	visibility: hidden;
}

.flext-carousel-autoheight,
.flext-carousel-autoheight .flext-slide {
	height: auto;
}

.flext-carousel-autoheight .flext-carousel-wrapper {
	align-items: flex-start;
	transition-property: transform, height;
}

.flext-carousel-css-mode .flext-carousel-wrapper {
	overflow: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.flext-carousel-css-mode .flext-carousel-wrapper::-webkit-scrollbar {
	display: none;
}

.flext-carousel-css-mode .flext-carousel-wrapper > .flext-slide {
	scroll-snap-align: start start;
}

.flext-carousel-horizontal.flext-carousel-css-mode > .flext-carousel-wrapper {
	scroll-snap-type: x mandatory;
}

.flext-carousel-vertical.flext-carousel-css-mode > .flext-carousel-wrapper {
	scroll-snap-type: y mandatory;
}

/* Navigation */

.flext-button-next,
.flext-button-prev {
	align-items: center;
	background: #222;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	display: flex;
	font-size: var(--flext-carousel-arrow-font-size);
	height: var(--flext-carousel-arrow-height);
	justify-content: center;
	opacity: 0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	transition: opacity 0.3s;
	width: var(--flext-carousel-arrow-height);
	z-index: 10;
}

.flext-carousel-initialized .flext-button-prev,
.flext-carousel-initialized .flext-button-next {
	opacity: 1;
}

.flext-button-prev.flext-button-disabled,
.flext-button-next.flext-button-disabled {
	cursor: default;
	opacity: 0.35;
	pointer-events: initial;
}

.flext-button-next::after,
.flext-button-prev::after {
	font-variant: initial;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
}

.flext-button-prev {
	left: 10px;
	right: auto;
}

.flext-button-prev::after {
	content: "\e912"/*rtl:"\e913"*/;
	font-family: flextension, sans-serif;
}

.flext-button-next {
	left: auto;
	right: 10px;
}

.flext-button-next::after {
	content: "\e913"/*rtl:"\e912"*/;
	font-family: flextension, sans-serif;
}

.flext-button-lock {
	display: none;
}

/* Pagination */

.flext-pagination {
	align-items: center;
	display: flex;
	justify-content: center;
	margin: var(--flext-carousel-pagination-height) auto 0 auto;
	position: relative;
	text-align: center;
	transition: 0.3s opacity;
	width: 20rem;
	z-index: 10;
}

.flext-pagination.flext-pagination-hidden {
	opacity: 0;
}

/* Bullets */

.flext-carousel-horizontal .flext-pagination-bullets,
.flext-pagination-custom,
.flext-pagination-fraction {
	width: 100%;
}

.flext-pagination-bullets-dynamic {
	font-size: 0;
	overflow: hidden;
}

.flext-pagination-bullets-dynamic .flext-pagination-bullet {
	position: relative;
	transform: scale(0.33);
}

.flext-pagination-bullets-dynamic .flext-pagination-bullet-active {
	transform: scale(1);
}

.flext-pagination-bullets-dynamic .flext-pagination-bullet-active-main {
	transform: scale(1);
}

.flext-pagination-bullets-dynamic .flext-pagination-bullet-active-prev {
	transform: scale(0.66);
}

.flext-pagination-bullets-dynamic .flext-pagination-bullet-active-prev-prev {
	transform: scale(0.33);
}

.flext-pagination-bullets-dynamic .flext-pagination-bullet-active-next {
	transform: scale(0.66);
}

.flext-pagination-bullets-dynamic .flext-pagination-bullet-active-next-next {
	transform: scale(0.33);
}

.flext-pagination-bullet {
	cursor: pointer;
	display: inline-block;
	height: 3rem;
	line-height: 0;
	position: relative;
	width: 3rem;
}

button.flext-pagination-bullet {
	border: none;
	box-shadow: none;
	appearance: none;
	margin: 0;
	padding: 0;
}

.flext-pagination-bullet::before {
	background: var(--flext-carousel-pagination-color);
	content: "";
	display: inline-block;
	height: 100%;
	opacity: 0.2;
	transition: opacity 0.25s ease-in-out;
	vertical-align: top;
	width: 100%;
}

.flext-pagination-bullet:hover::before {
	opacity: 0.4;
}

.flext-pagination-bullet-active::before,
.flext-pagination-bullet-active:hover::before {
	opacity: 1;
}

.flext-carousel-vertical .flext-pagination-bullets {
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translate3d(0, -50%, 0);
}

.flext-carousel-vertical .flext-pagination-bullets .flext-pagination-bullet {
	display: block;
	height: 3rem;
	padding: 0 0.2rem;
	width: 0.5rem;
}

.flext-carousel-vertical .flext-pagination-bullets.flext-pagination-bullets-dynamic {
	top: 50%;
	transform: translateY(-50%);
	width: 8px;
}

.flext-carousel-vertical .flext-pagination-bullets.flext-pagination-bullets-dynamic .flext-pagination-bullet {
	display: inline-block;
	transition: 0.2s transform, 0.2s top;
}

.flext-carousel-horizontal .flext-pagination-bullets .flext-pagination-bullet {
	padding: 1.4rem 0;
}

.flext-carousel-horizontal .flext-pagination-bullets.flext-pagination-bullets-dynamic {
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
}

.flext-carousel-horizontal .flext-pagination-bullets.flext-pagination-bullets-dynamic .flext-pagination-bullet {
	transition: 0.2s transform, 0.2s left;
}

/* Fraction */

.flext-pagination-fraction .flext-pagination-current {
	display: inline-block;
	margin-right: 1.5rem;
}

.flext-pagination-fraction .flext-pagination-separator {
	background-color: var(--flext-carousel-pagination-color);
	display: inline-block;
	height: 0.1rem;
	vertical-align: middle;
	width: 2rem;
}

.flext-pagination-fraction .flext-pagination-total {
	display: inline-block;
	margin-left: 1.5rem;
}

/* Progressbar */

.flext-pagination-progressbar .flext-progressbar {
	display: inline-block;
	position: relative;
	width: 100%;
}

.flext-carousel-horizontal .flext-pagination-progressbar .flext-progressbar,
.flext-carousel-vertical .flext-pagination-progressbar.flext-pagination-progressbar-opposite .flext-progressbar {
	height: 0.4rem;
}

.flext-carousel-horizontal .flext-pagination-progressbar.flext-pagination-progressbar-opposite .flext-progressbar,
.flext-carousel-vertical .flext-pagination-progressbar .flext-progressbar {
	width: 0.4rem;
}

.flext-pagination-progressbar .flext-progressbar::before {
	background: var(--flext-carousel-pagination-color);
	bottom: 0;
	content: "";
	left: 0;
	opacity: 0.25;
	position: absolute;
	right: 0;
	top: 0;
}

.flext-pagination-progressbar .flext-pagination-current {
	display: inline-block;
	margin-right: 1rem;
}

.rtl .flext-pagination-progressbar .flext-pagination-current {
	margin-left: 1rem;
	margin-right: 0;
}

.flext-pagination-progressbar .flext-pagination-total {
	display: inline-block;
	margin-left: 1rem;
}

.rtl .flext-pagination-progressbar .flext-pagination-total {
	margin-left: 0;
	margin-right: 1rem;
}

.flext-pagination-progressbar .flext-progressbar-fill {
	background: var(--flext-carousel-pagination-color);
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	transform: scale(0);
	transform-origin: left top;
	width: 100%;
}

.flext-pagination-lock {
	display: none;
}

/**
 * If the pagination is enable,
 * sets a new position for the navigation buttons.
 */

.flext-carousel-pagination.flext-carousel-horizontal .flext-button-prev,
.flext-carousel-pagination.flext-carousel-horizontal .flext-button-next {
	top: calc((100% - var(--flext-carousel-pagination-height) * 2) / 2); /* A half of carousel height without pagination */
}

/* Fade */

.flext-carousel-fade .flext-slide {
	pointer-events: none;
}

.flext-carousel-fade .flext-slide-active {
	pointer-events: auto;
}

/* 3D Effects */

.flext-carousel-3d,
.flext-carousel-3d.flext-carousel-css-mode .flext-carousel-wrapper {
	perspective: 1200px;
}

.flext-carousel-3d .flext-carousel-wrapper,
.flext-carousel-3d .flext-slide {
	transform-style: preserve-3d;
}

/* Creative Effect */

.flext-carousel-creative .flext-slide {
	backface-visibility: hidden;
	overflow: hidden;
	transition-property: transform, opacity, height;
}

@media (min-width: 1024px) {

	:root {
		--flext-carousel-arrow-height: 5rem;
		--flext-carousel-arrow-font-size: 3rem;
	}
}