/* ------------------------------------------------------------------- */
/* --- Slick JS (Carousels & Sliders) - Overrides & Customizations --- */
/* ------------------------------------------------------------------- */

/* NOTE: all of these styles should be contained within .slick-carousel so that they 
don't interfere with current implementations of Slick */

.slick-carousel {
	width: 100%;
	padding: 0;
	margin: 0;
	border: 1px solid var(--gray86);
	background-color: #fff;
	box-shadow: 0 2px 4px 0 rgba(00,00,00,0.32);
	border-radius: 4px;
}
.slick-carousel .slick-track {
	display: flex;
	align-items: center; /* this breaks the Slick "adaptive-height" option */
}
.slick-carousel .slick-slide {
	/* overwriting default styles */
	margin: 0;
	padding: 32px;
}

.slick-carousel .slide-1x,
.slick-carousel .slide-2x,
.slick-carousel .slide-3x {
	display: grid;
	align-content: center;
	align-items: center;
	justify-content: center;
	justify-items: center;
	gap: 40px;
}
.slick-carousel .slide-1x {
	grid-template-columns: 1fr;
}
.slick-carousel .slide-2x {
	grid-template-columns: 1fr 1fr;
}
.slick-carousel .slide-3x {
	grid-template-columns: 1fr 1fr 1fr;
}
@media screen and (max-width: 800px) {
	.slick-carousel .slide-1x,
	.slick-carousel .slide-2x,
	.slick-carousel .slide-3x {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

.slick-text-container {
	display: flex;
	flex-direction: column;
}
.slick-text-container h1 { font-size: 44px; }
.slick-text-container h2 { font-size: 32px; }
.slick-text-container h3 { font-size: 24px; }
.slick-text-container h4 { font-size: 19px; }
.slick-text-container h5 { font-size: 16px; }
.slick-text-container h6 { font-size: 16px; }

.slick-image-container {
	display: flex;
	justify-content: center;
	width: 100%;
}
.slick-image-container, .slick-image-container picture, .slick-image-container img {
	max-height: 500px;
}

.slick-carousel .slick-arrows-container {
	display: flex;
	flex-direction: row;
	align-content: center;
	justify-content: center;
	align-items: center;
	height: 40px;
}

.slick-dots-container {
	display: flex;
	flex-direction: row;
	align-content: center;
	justify-content: center;
	align-items: center;
	height: 40px;
	margin-top: 24px;
}

.slick-dots-container .slick-dots {
	position: static !important;
	display: flex !important;
	flex-direction: row !important;
	align-content: center !important;
	justify-content: center !important;
	align-items: center !important;
	padding: 0 !important;
	margin: 0 !important;
}

.slick-dots-container .slick-dots li {
	display: flex !important;
	align-content: center !important;
	justify-content: center !important;
	align-items: center !important;
	width: 40px !important;
	height: 40px !important;
}

.slick-dots-container .slick-dots li button {
	width: 40px !important;
	height: 40px !important;
}

.slick-dots-container .slick-dots li button:hover,
.slick-arrows-container .slick-prev:hover,
.slick-arrows-container .slick-next:hover {
	background-color: rgba(255,255,255,0.32)
}

.slick-dots-container .slick-dots li button:before {
	font-family: "Font Awesome 6 Pro" !important;
	font-size: 12px !important;
	content: "\f111" !important;
	position: relative !important;
	line-height: 0 !important;
}
.slick-arrows-container {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
}
.slick-arrows-container .slick-prev,
.slick-arrows-container .slick-next {
	width: 40px !important;
	height: 40px !important;
	background-color: rgba(255, 255, 255, 0);
	position: static !important;
	display: flex !important;
	justify-content: center;
	align-items: center;
	margin-top: -20px;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
}
@media screen and (max-width: 800px) {
	.slick-arrows-container .slick-prev,
	.slick-arrows-container .slick-next {
		margin-top: 24px;
	}
}

.slick-arrows-container .slick-prev:before,
.slick-arrows-container .slick-next:before {
	color: var(--gray) !important;
	font-size: 24px !important;
	font-family: "Font Awesome 6 Pro" !important;
}
.slick-arrows-container .slick-prev:before {
	content: "\f104" !important;
}
.slick-arrows-container .slick-next:before {
	content: "\f105" !important;
}
/* Play / Pause Button */
.slick-carousel button.slick-autoplay-toggle-button {
	display: none;
}