.card-rotator-wrapper {
	position: relative;
	display: block;
	padding: 0;

	& *[class^='col-'] {
		padding: 0 !important;
	}
}

.card-rotator {
	position: relative;
	display: block;
	margin: 0;
	padding: 0 0 0;

	& .slick-list,
	& .splide__track {
		margin: 0 calc(50% - 50vw) !important;
	  padding-left: calc(50vw - 50% - 10px) !important;
	  padding-right: calc(50vw - 50% - 10px) !important;
	}

	& .slick-track {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: stretch;
		align-content: stretch;

		& .slick-slide {
			height: auto !important;
		}
	}

	& .slick-dots,
	& .splide__pagination {
		position: relative;
		display: flex;
		flex-flow: row nowrap;
		justify-content: stretch;
		align-items: stretch;
		align-content: stretch;
		list-style: none;
		margin: 70px 0 0 !important;
		padding: 0 !important;
		background: transparent;
		width: calc(100% - 130px);
		bottom: auto !important;
		left: auto !important;
		right: auto !important;

		&:before {
			position: absolute;
			display: block !important;
			content: '' !important;
			z-index: 1;
			pointer-events: none;
			height: 1px;
			top: 50%;
			left: 0;
			right: 0;
			background: #C8C8CE;
		}

		& li {
			position: relative;
			display: block;
			padding: 0;
			margin: 0;
			z-index: 10;
			flex: 1 0 0;

			& button {
				position: relative;
				display: block;
				width: 100%;
				height: 100%;
				text-indent: -9999px;
				overflow: clip;
				padding: 10px 0;
				margin: 0;
				border: 0;
				z-index: 10;
				background: transparent !important;
				border-radius: 0 !important;

				&:before {
					position: absolute;
					content: '';
					display: block;
					left: 0;
					top: 50%;
					margin-top: -0.5px;
					transform-origin: center center;
					right: 0;
					height: 1px;
					opacity: 0;
					background: var(--primary-color);
					transition: all 600ms var(--ease-out-expo);
					z-index: 1;
				}
			}

			& button, & button:focus {
				&:before {
					height: 1px;
					opacity: 0;
				}
			}

			& button:hover, & button:active {
				&:before {
					height: 3px;
					opacity: 1;
					margin-top: -1px;
				}
			}

			&.slick-active,
			&:has(.is-active) {
				& button {
					pointer-events: none;
					transform: scale(1.0) !important;
					border-radius: 0 !important;

					&:before {
						height: 3px !important;
						opacity: 1 !important;
						margin-top: -1px;
					}
				}
			}

		}

	}

	& .slick-prev,
	& .slick-next {
		display: inline-flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
		align-content: center;
		-webkit-box-shadow: none !important;
		box-shadow: none !important;
		-webkit-transform: translate(0%, 0%) !important;
		transform: translate(0%, 0%) !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		bottom: auto !important;

		&:before {
			font-size: 14px !important;
		}

		&, &:focus {
			border-color: transparent !important;
			background: transparent !important;
			color: #000 !important;

			&:hover, &:active {
				border-color: transparent !important;
				background: transparent !important;
				color: var(--primary-color) !important;
			}
		}
	}

	& .slick-prev {
		bottom: 0 !important;
		left: auto !important;
		right: 64px !important;

		&:before {
			content: "\f053" !important;
		}
	}

	& .slick-next {
		bottom: 0 !important;
		left: auto !important;
		right: 8px !important;

		&:before {
			content: "\f054" !important;
		}
	}

	& .splide__arrows {
		position: absolute;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: stretch;
		width: 100px;
		bottom: -7px;
		right: 0;
		z-index: 100;

		& .splide__arrow {
			position: relative;
			display: inline-flex;
			flex-flow: row nowrap;
			justify-content: center;
			align-items: center;
			align-content: center;
			-webkit-box-shadow: none !important;
			box-shadow: none !important;
			-webkit-transform: translate(0%, 0%) !important;
			transform: translate(0%, 0%) !important;
			top: auto !important;
			left: auto !important;
			right: auto !important;
			bottom: auto !important;

			&:before {
				font-size: 14px !important;
			}

			&:disabled {
				opacity: 0.2;
			}

			&, &:focus {
				border-color: transparent !important;
				background: transparent !important;
				color: #000 !important;

				& svg {
					fill: #000;
					width: 14px;
					height: 14px;
					transition: all 200ms ease-out;
				}

				&:hover, &:active {
					border-color: transparent !important;
					background: transparent !important;
					color: var(--primary-color) !important;

					& svg {
						fill: var(--primary-color);
					}
				}
			}
		}

	}

	& .card-rotator-card {
		--hover-transition: 800ms var(--ease-out-expo);
		--pull-up-height: 77px;

		position: relative;
		display: block;
		text-align: left;
		padding: 2px;
		margin: 0;
		width: 100%;
		max-width: 400px;

		@media (max-width: 1024px) {
			& {
				max-width: 40vw;
			}
		}

		@media (max-width: 767px) {
			& {
				max-width: 60vw;
			}
		}

		@media (max-width: 630px) {
			& {
				max-width: 70vw;
			}
		}

		@media (max-width: 500px) {
			& {
				max-width: 86vw;
			}
		}

		& .card-rotator-card-image-wrapper {
			position: absolute;
			display: block;
			margin: 0;
			width: 100%;
			height: 100%;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			border: 0;
			background: #000;
			z-index: 1;
			overflow: clip;

			& > img {
				position: relative;
				display: block;
				width: 100%;
				height: 100%;
				object-fit: cover;
				object-position: center center;
				transition: all var(--hover-transition);
				transform: scale(1.0, 1.0);
				pointer-events: none;
				z-index: 1;
			}

			&:before {
				position: absolute;
				display: block;
				pointer-events: none;
				z-index: 10;
				content: '';
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				width: 100%;
				height: 100%;
				background: rgba(0, 0, 0, 0.1);
			}

			&:after {
				position: absolute;
				display: block;
				pointer-events: none;
				z-index: 10;
				content: '';
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				width: 100%;
				height: 100%;
				background: transparent;
				background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.0) 30%, rgba(0, 0, 0, 0.0) 80%, rgba(0, 0, 0, 0.4) 100%);
			}
		}

		& .card-rotator-card-details {
			position: relative;
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
			justify-content: stretch;
			align-items: stretch;
			align-content: stretch;
			padding: 0;
			height: 100%;
			z-index: 100;
			color: #fff;

			& .top-of-card {
				position: relative;
				display: flex;
				flew-flow: row nowrap;
				justify-content: stretch;
				align-items: stretch;
				align-content: stretch;
				padding: 0;
				margin: 0 12px;
				width: calc(100% - 24px);
				height: 89px;
				border-bottom: 1px solid rgba(255, 255, 255, 0.25);

				& .logo-image-hold {
					position: relative;
					display: flex;
					flex-direction: row nowrap;
					justify-content: flex-start;
					align-items: center;
					align-content: center;
					height: 100%;
					padding: 18px 20px 18px 0;
					border-right: 1px solid rgba(255, 255, 255, 0.25);
					width: 40%;

					& img {
						position: relative;
						display: block;
						width: 100%;
						height: 100%;
						object-fit: contain;
						object-position: left center;
						max-height: 51px;
					}
				}

				& .logo-details-hold {
					position: relative;
					display: flex;
					flex-flow: column nowrap;
					justify-content: center;
					align-items: flex-start;
					align-content: flex-start;
					padding: 18px 20px 12px;
					height: 100%;
					overflow: clip;

					& .logo-details-hold-inner {
						position: relative;
						display: block;
						padding: 0;
					}

					&, & p {
						color: #fff;
						font-size: 0.8125rem;
						line-height: 1.5;
						margin-bottom: 0 !important;
						-webkit-font-smoothing: auto;
					}
				}
			}

			& .bottom-of-card {
				position: relative;
				margin: auto 0 0 0;
				display: block;
				transition: all var(--hover-transition);
				transform: translateY(var(--pull-up-height));

				@media (max-width: 767px) {
					& {
						transform: translateY(0px) !important;
					}
				}

				& .card-rotator-card-content {
					position: relative;
					display: block;
					padding: 24px 24px;
					color: #fff;
					transition: all var(--hover-transition);
				}

				& .card-rotator-card-link-wrap {
					position: relative;
					display: block;
					padding: 0 24px 24px;
					opacity: 0;
					transition: all var(--hover-transition);
					pointer-events: none;
					height: var(--pull-up-height);

					& .card-rotator-card-link {
						pointer-events: none;
					}

					@media (max-width: 767px) {
						& {
							opacity: 1 !important;

							& .card-rotator-card-link {
								pointer-events: auto !important;
							}
						}
					}
				}
			}
		}

	}
}


body.touch {
	& .card-rotator .card-rotator-card .card-rotator-card-details {
		& .bottom-of-card {
			transform: translateY(0px) !important;
		}

		& .card-rotator-card-link-wrap {
			opacity: 1 !important;

			& .card-rotator-card-link {
				pointer-events: auto !important;
			}
		}
	}
}

.card-rotator .card-rotator-card .card-rotator-card-inner {
	position: relative;
	display: block;
	margin: 0;
	padding: 0;
	text-align: left;
	overflow: clip;
	border-radius: 6px;
	background: #fff;
	height: 100%;
	min-height: 550px;

	&:has(.card-rotator-card-link):hover {
		& .card-rotator-card-image-wrapper > img {
			transform: scale(1.1, 1.1);
		}

		& .bottom-of-card {
			transform: translateY(0px);

			& .card-rotator-card-link-wrap {
				pointer-events: auto;
				opacity: 1;

				& .card-rotator-card-link {
					pointer-events: auto;
				}
			}
		}
	}
}

.card-rotator-wrapper.light .card-rotator {
	color: #fff;
}
.card-rotator-wrapper.no-rotator .card-rotator {
	padding-bottom: 0;
}
.card-rotator-wrapper.no-rotator .card-rotator-inner {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: stretch;
	align-items: stretch;
	align-content: stretch;
	flex-wrap: wrap;
}

@media (min-width: 768px) {
	.card-rotator-wrapper.no-rotator .card-rotator-inner {
		margin: 0 -10px;
	}
	.card-rotator-wrapper.no-rotator .card-rotator .card-rotator-card {
		max-width: 33.33% !important;
	}

	.card-rotator-wrapper.no-rotator.two-up .card-rotator .card-rotator-card {
		max-width: 50% !important;
	}
}

.card-rotator-wrapper.no-rotator .card-rotator .slick-arrow {
	display: none !important;
}
.card-rotator-wrapper.light .card-rotator .card-rotator-card .card-rotator-card-inner {
	background: var(--secondary-color, #000);
}
.card-rotator-wrapper.light .card-rotator .card-rotator-card .card-rotator-card-image-wrapper {
	padding: 20px 20px 0;
	max-width: 60%;
	max-height: 200px;
}
.card-rotator-wrapper.light .card-rotator .card-rotator-card .card-rotator-card-image-wrapper > img {
	aspect-ratio: auto;
}
.card-rotator-wrapper.light .card-rotator .card-rotator-card-link.set-button.no-bg-button,
.card-rotator-wrapper.light .card-rotator .card-rotator-card-link.set-button.no-bg-button:focus {
	color: var(--Vibrant-Blue---60) !important;
}
.card-rotator-wrapper.light .card-rotator .card-rotator-card-link.set-button.no-bg-button:hover,
.card-rotator-wrapper.light .card-rotator .card-rotator-card-link.set-button.no-bg-button:active {
	color: #fff !important;
}

.card-rotator-wrapper.left-icons .card-rotator .card-rotator-card .card-rotator-card-inner {
	border: 1px solid var(--Light-Blue---30);
}
.card-rotator-wrapper.left-icons .card-rotator .card-rotator-card .card-rotator-card-image-wrapper {
	padding: 30px 30px 0;
	max-width: 130px;
}
.card-rotator-wrapper.left-icons .card-rotator .card-rotator-card .card-rotator-card-image-wrapper > img {
	object-position: left center;
}

.card-rotator-wrapper.no-rotator.two-up .card-rotator .card-rotator-card .card-rotator-card-image-wrapper {
	max-height: none;
}
.card-rotator-wrapper.no-rotator.two-up .card-rotator .card-rotator-card .card-rotator-card-image-wrapper > img {
	aspect-ratio: 1.3;
}

.card-rotator-wrapper.no-rotator.two-up .card-rotator .card-rotator-card .card-rotator-card-title {
	--header-line-height: 1.35;
	--mid-fill: calc((var(--h4-fill) + var(--h5-fill)) / 2);
	--mid-min-font-size: calc((var(--h4-min-font-size) + var(--h5-min-font-size)) / 2);
	--mid-max-font-size: calc((var(--h4-max-font-size) + var(--h5-max-font-size)) / 2);

	font-size: clamp(var(--mid-min-font-size), var(--mid-fill), var(--mid-max-font-size));
	font-weight: 600;
}

@media (min-width: 1025px) {
	.card-rotator-wrapper.no-rotator.two-up .card-rotator .card-rotator-card .card-rotator-card-image-wrapper {
		padding: 40px 50px 0;
	}
	.card-rotator-wrapper.no-rotator.two-up .card-rotator .card-rotator-card .card-rotator-card-details {
		padding: 40px 50px 46px;
	}
}

.card-rotator-wrapper.blue-backs {
	& .card-rotator .card-rotator-card {
		& .card-rotator-card-image-wrapper {
			margin: 12px 11px !important;
			padding: clamp(50px, 6vw, 70px) clamp(50px, 8vw, 150px) !important;
			border-radius: 5px;
			overflow: clip;
			background: #DAE6FE;
			width: calc(100% - 22px) !important;

			& > img {
				aspect-ratio: 3.0 !important;
			}
		}

		& .card-rotator-card-title {
			-webkit-font-smoothing: antialiased !important;
		}

		& .card-rotator-card-details {
			padding: 24px 40px 46px !important;

			@media (max-width: 1024px) {
				& {
					padding: 20px 30px 40px !important;
				}
			}
		}
	}
}
