/* Flickity CORE v2.2.0
-----------------------------*/

.flickity-enabled { position: relative; }
.flickity-enabled:focus { outline: none; }
.flickity-viewport { overflow: hidden; position: relative; height: 100%; transition: height 0.0s; }
.flickity-slider { position: absolute; width: 100%; height: 100%; }
.flickity-enabled.is-draggable { -webkit-tap-highlight-color: transparent; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.flickity-enabled.is-draggable .flickity-viewport { cursor: move; cursor: -webkit-grab; cursor: grab; }
.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down { cursor: -webkit-grabbing; cursor: grabbing; }

.flickity-button { position: absolute; border: none; background-color: #fff; color: #333; border: 1px solid #ddd; box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); }
.flickity-button:hover { background: #fff; cursor: pointer; }
.flickity-button:focus { outline: none; box-shadow: 0 0 0 2px #333; }
.flickity-button:active { opacity: 0.7; }
.flickity-button:disabled { opacity: 0; cursor: auto; pointer-events: none; }
.flickity-button-icon { fill: currentColor; }

.flickity-prev-next-button { top: 50%; width: 44px; height: 44px; border-radius: 50%; transform: translateY(-50%); }
.flickity-prev-next-button.previous { left: 10px; }
.flickity-prev-next-button.next { right: 10px; }

.flickity-prev-next-button .flickity-button-icon { position: absolute; left: 20%; top: 20%; width: 60%; height: 60%; }

.flickity-page-dots { position: absolute; width: 100%; bottom: -0.75rem; padding: 0; margin: 0; list-style: none; text-align: center; line-height: 1; }

.flickity-page-dots .dot { display: inline-block; width: 10px; height: 10px; margin: 0 8px; border-radius: 50%; opacity: 0.25; cursor: pointer; background: #333; }
.flickity-page-dots .dot.is-selected { opacity: 1; }

.carousel-light .flickity-page-dots .dot,
.carousel-white .flickity-page-dots .dot { background: #fff; }

.flickity-page-dots li:only-child { display: none; }

/* Fade Transitions
-----------------------------*/

.flickity-enabled.is-fade .flickity-slider > * { pointer-events: none; z-index: 0; transition: opacity 1s; }
.flickity-enabled.is-fade .flickity-slider > .is-selected { pointer-events: auto; z-index: 1; }
.fade.flickity-enabled:not(.show) { opacity: 1; } /* Bootstrap 4 Fix */

/* Detailed Product Images
-----------------------------*/

.carousel-product-detailed-images .flickity-prev-next-button { width: 22px; height: 22px; border: 1px solid #666; }
.carousel-product-detailed-images .flickity-prev-next-button.previous { left: -26px; }
.carousel-product-detailed-images .flickity-prev-next-button.next { right: -26px; }

/* Basic Carousels
-------------------------------*/

.carousel-slider-container { background: #fff url(../../images/ajax-loader-light.gif) center no-repeat; }

.carousel-slider { margin: 0 auto; overflow: hidden; }
.carousel-slider .carousel-cell:not(:first-child) { opacity: 0; }
.carousel-slider .carousel-cell { width: 100%; height: auto; }

.carousel-slider .flickity-prev-next-button { top: 50%; transform: translateY(-50%); width: 40px; height: 80px; background-color: #000; color: #fff; border: none; border-radius: 0; opacity: 0; transition: all 0.3s; }
.carousel-slider .flickity-prev-next-button.previous { left: -40px; border-top-right-radius: 40px; border-bottom-right-radius: 40px; }
.carousel-slider .flickity-prev-next-button.next { right: -40px; border-top-left-radius: 40px; border-bottom-left-radius: 40px; }

.carousel-slider:hover .flickity-prev-next-button { opacity: 0.35; }
.carousel-slider:hover .flickity-prev-next-button.previous { left: 0; }
.carousel-slider:hover .flickity-prev-next-button.next { right: 0; }

.carousel-slider:hover .flickity-prev-next-button.previous:hover { opacity: 1; }
.carousel-slider:hover .flickity-prev-next-button.next:hover { opacity: 1; }

.carousel-slider .flickity-page-dots { bottom: 0.75rem; }
.carousel-slider .flickity-page-dots .dot { width: 15px; height: 15px; background: #fff; border: 1px solid #000; }

.carousel-slider .carousel-status { position: absolute; top: -0rem; right: 0; z-index: 1; font-size: 0.8rem; background: rgba(0,0,0,0.5); color: #fff; padding: 0.25rem 0.5rem; border-bottom-left-radius: 0.5rem; }

@media (max-width: 575px) {
	.carousel-slider .flickity-prev-next-button { width: 20px; height: 40px; font-size: 0.8rem; }
	.carousel-slider .flickity-prev-next-button.previous { opacity: 1 !important; left: 0 !important; border-top-right-radius: 20px; border-bottom-right-radius: 20px; }
	.carousel-slider .flickity-prev-next-button.next { opacity: 1 !important; right: 0 !important; border-top-left-radius: 20px; border-bottom-left-radius: 20px; }
}

.homepage-slider-promo { transition: height 0.3s; }

/* Sidebar Product Carousels
-------------------------------*/

.sidebar-product-carousel .flickity-prev-next-button { width: 25px; height: 25px; border-radius: 50%; border-radius: 0.25rem; border: 1px solid #ddd; }
.sidebar-product-carousel .flickity-page-dots { bottom: -2rem; }
.sidebar-product-carousel .flickity-prev-next-button { top: 109%; transform: translateY(-100%); z-index: 10; }

/* Product Carousels
-------------------------------*/

.product-carousel-container { margin: 0 -1rem; }
.product-carousel { margin: 0 -1rem; }

.product-carousel .flickity-prev-next-button { top: 45%; width: 44px; height: 44px; border-radius: 50%; transform: translateY(-45%); }
.product-carousel .flickity-prev-next-button.previous { left: 0.5rem; }
.product-carousel .flickity-prev-next-button.next { right: 0.5rem; }

.product-carousel .flickity-page-dots { margin-bottom: 0.5rem; }

@media (max-width: 575px) {
	.product-carousel .flickity-prev-next-button { width: 44px; height: 44px; }
	.product-carousel .flickity-page-dots .dot { width: 10px; height: 10px; }
}

/* Testimonial Carousels
-------------------------------*/

.carousel-testimonials .flickity-viewport { height: 100%; -webkit-transition: height 0.4s; transition: height 0.4s; }
.carousel-testimonials { width: 100%; height: 100%; margin: auto; }
.carousel-testimonials .carousel-cell { width: 100%; height: auto; }
.carousel-testimonials .flickity-page-dots { top: -2rem; }

/* Generic Carousels
-------------------------------*/

.carousel-generic-container { margin: 0 -1rem; }
.carousel-generic .carousel-cell img:not(.auto-height) { max-height: 100px; width: auto; }

.carousel-generic.ticker .flickity-prev-next-button { width: 25px; height: 25px; border: none; background: none; color: inherit !important; }
.carousel-generic.ticker .flickity-prev-next-button.previous { left: 0.75rem; }
.carousel-generic.ticker .flickity-prev-next-button.next { right: 0.75rem; }


/* --- customized carousels --- */

.carousel-generic-container .carousel-generic.carousel-generic-normal .flickity-prev-next-button,
.carousel-products-container .product-carousel .flickity-prev-next-button {
	width: 33.9px;
	height: 33.9px;
	box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
	border: solid 1px #000;
	background-color: #000;
}
.carousel-generic-container .carousel-generic.carousel-generic-normal .flickity-prev-next-button.previous { margin-left: -3.5rem; }
.carousel-generic-container .carousel-generic.carousel-generic-normal .flickity-prev-next-button.next { margin-right: -3.5rem; }
.carousel-products-container .product-carousel .flickity-prev-next-button.previous { margin-left: -3.5rem; }
.carousel-products-container .product-carousel .flickity-prev-next-button.next { margin-right: -3.5rem; }

.carousel-generic-container .carousel-generic.carousel-generic-normal .flickity-prev-next-button .flickity-button-icon { color: #fff; }
.carousel-products-container .product-carousel .flickity-prev-next-button .flickity-button-icon { color: #fff; }

.carousel-generic-container .carousel-generic.carousel-generic-normal,
.carousel-products-container .product-carousel {
	max-width: calc(-7rem + 100%);
	margin-left: 3.5rem;
}

@media (max-width: 767px) {
	.carousel-generic-container .carousel-generic.carousel-generic-normal,
	.carousel-products-container .product-carousel {
		max-width: 100%;
		margin-left: 0;
	}
	.carousel-generic-container .carousel-generic.carousel-generic-normal .flickity-prev-next-button.previous { margin-left: -0.5rem; }
	.carousel-generic-container .carousel-generic.carousel-generic-normal .flickity-prev-next-button.next { margin-right: -0.5rem; }
	.carousel-products-container .product-carousel .flickity-prev-next-button.previous { margin-left: -0.5rem; }
	.carousel-products-container .product-carousel .flickity-prev-next-button.next { margin-right: -0.5rem; }
}