.image-slider-block {

	overflow: visible !important;

	& .image-slider {
	
		z-index: 1;
	
		& .slick-track {
			align-items: center;
			display: flex;
		}
	
	}
	
	/* SLIDER BUTTONS */
	.slider-button-prev,
	.slider-button-next {
		align-items: center;
		background-color: var(--wp--preset--color--red);
		bottom: 0px;
		cursor: pointer;
		display: flex;
		height: 45px;
		justify-content: center;
		position: absolute;
		top: auto;
		transition: .25s ease-in-out;
		width: 45px;
		z-index: 2;

		& i {
			color: var(--wp--preset--color--white);
			font-size: 26px;
			line-height: 1;
			margin-top: 1px;
			transition: .25s ease-in-out;
		}

		&:hover {
			background-color: var(--wp--preset--color--blue);
			i {
				color: var(--wp--preset--color--white);
			}
		}

	}
	.slider-button-prev { 
		left: calc(50% - 28px);
		transform: translateX(-50%);
	}
	.slider-button-next {
		left: calc(50% + 28px);
		transform: translateX(-50%);
	}


}

.image-slider-block.layout_1 {

	& .image-slider {
		@media screen and (max-width: 662px) {
			padding-bottom: 55px;
			
		}
	}
	
	& .image-slide {
		position: relative;

		&.has-content {

			&:hover {
				.content {
					.content--inner {
						> *:not(i) {
							opacity: 1;
						}
						i::after {
							opacity: 0;
						}
					} 
					&::before {
						opacity: 0.6;
					}
				}
			}

			.content {
				display: flex;
				align-items: end;
				height: 100%;
				left: 0;
				position: absolute;
				top: 0;
				width: 100%;
				z-index: 1;
		
				.content--inner {
					bottom: 10px;
					color: var(--wp--preset--color--white);
					display: flex;
					flex-direction: column;
					left: 10px;
					padding: 25px;
					position: relative;
					width: calc(100% - 20px);
	
					> *:not(i) {
						opacity: 0;
						transition: 0.15s ease-out;
						z-index: 1;
					}
					h4 {
						font-size: 18px !important;
						margin-bottom: 15px !important;
					}
					p {
						font-size: 14px !important;
					}
					i {
						position: absolute;
						right: 25px;
						bottom: 28px;
						&::after {
							content: '';
							background-color: var(--wp--preset--color--navy);
							border-radius: 50%;
							height: 40px;
							left: 50%;
							opacity: 0.7;
							position: absolute;
							top: 50%;
							transform: translate(-50%, -50%);
							transition: 0.15s ease-out;
							width: 40px;
							z-index: -1;
						}
					}
				}

				&::before {
					content: '';
					background-color: var(--wp--preset--color--navy);
					height: calc(100% - 20px);
					left: 10px;
					opacity: 0;
					position: absolute;
					top: 10px;
					transition: 0.15s ease-out;
					width: calc(100% - 20px);
				}
			}

		}

	
		.image {
			aspect-ratio: 1 / 1;
			border: 10px solid var(--wp--preset--color--white);
			position: relative;
			width: 300px;
			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				object-position: center;
			}
		}

	}
	
	& .image-slide-hovered-container {
	
		z-index: 0;
		&.hovered {
			z-index: 2;
		}
	}
	
	& .image-slide-hovered {
		align-items: center;
		display: flex;
		height: 100%;
		justify-content: center;
		left: 50%;
		max-height: 500px;
		padding: 30px 40px;
		position: absolute;
		top: calc(50% - 40px);
		transform: translate(-50%, -50%);
		opacity: 0;
		transition: .25s ease-in-out;
		width: 100%;
		z-index: 0;
	
		&.hovered {
			opacity: 1;
			z-index: 2;
		}
	
	}
	
	& .image-slide-layout {
		align-items: end;
		border: 10px solid var(--wp--preset--color--white);
		box-shadow: 0 0 10px 0 rgba(0,0,0,0.25);
		display: flex;
		height: 100%;
		max-width: 700px;
		padding: 50px;
		position: relative;
		width: 100%;
	
		& .close {
			align-items: center;
			background-color: var(--wp--preset--color--blue);
			border-top-left-radius: 10px;
			border-top-right-radius: 10px;
			color: var(--wp--preset--color--white);
			cursor: pointer;
			display: flex;
			font-size: 14px;
			gap: 5px;
			height: 30px;
			justify-content: center;
			padding-top: 1px;
			padding-left: 12px;
			padding-right: 12px;
			position: absolute;
			right: 25px;
			top: -40px;
			transition: .25s ease-in-out;
			width: auto;
			z-index: 1;
			i {
				font-size: 20px;
			}
			&:hover {
				background-color: var(--wp--preset--color--blue);
			}
		}
	
		& .media {
			height: 100%;
			left: 0;
			overflow: hidden;
			position: absolute;
			top: 0;
			width: 100%;
			z-index: -1;
			&::after {
				content: '';
				background-color: var(--wp--preset--color--navy);
				height: 100%;
				left: 50%;
				opacity: 0.4;
				position: absolute;
				top: 50%;
				transform: translate(-50%, -50%);
				width: 100%;
				z-index: 0;
			}
			/* Image */
			& img {
				height: 100%;
				object-fit: cover;
				object-position: center;
				width: 100%;
			}
			/* Video */
			& .wp-video {
				position: relative;
				height: 100%;
				width: 100% !important;
			}
			& iframe,
			& video {
				aspect-ratio: 16 / 9;
				height: 100%;
				left: 50%;
				max-width: none !important;
				position: absolute;
				top: 50%;
				transform: translate(-50%, -50%);
				width: auto !important;
			}
		}
	
		& .content {
			width: 100%;
			max-width: 50%;
			color: var(--wp--preset--color--white);
	
			h3 {
				font-size: 40px !important;
				font-family: var(--wp--preset--font-family--amberly);
				color: var(--wp--preset--color--blue);
				margin-bottom: 15px !important;
				opacity: 1 !important;
				transform: none !important;
			}
	
		}
	
	}

}


@media screen and (max-width: 662px) {
	
	.image-slider-block.layout_1 {

		& .image-slide-hovered {
			padding-left: 0;
			padding-right: 0;
		}

		& .image-slide-layout {
			padding: 30px;
		}

	}

}





.image-slider-block.layout_2 {

	.image-slider,
	.slick-list,
	.slick-track {
		height: 100%;
	}

	.image-slider {
		display: flex;
		flex-direction: column;
		height: calc(var(--slide_height) + (var(--slide_height) * 0.15));
		justify-content: center;
		overflow: visible;
		padding-bottom: var(--padding);
		position: relative;

		.slick-list {
			overflow: visible;
		}

		.image-slide {
			aspect-ratio: 4/3;
			display: flex;
			height: var(--slide_height);
			opacity: 0.5;
			position: relative;
			overflow: hidden;
			transform: scale(1);
			transition: all 0.3s ease-in-out;
			width: auto;
			z-index: -1;

			&.slick-center,
			&.slick-target {
				transform: scale(1.15);
				z-index: 1;
				filter: brightness(100%);
				opacity: 1;
			}

			.image {
				flex-basis: 100%;
				max-width: 100%;
				width: 100%;
				height: var(--slide_height);
				img {
					border: 20px solid var(--wp--preset--color--white);
					width: 100%;
					height: var(--slide_height);
					object-fit: cover;
					object-position: center;
				}
			}

		}

	}
	
}