/* Text and Image Section */

.wpfox-text-image-section {
	--section-spacing-default: max(40px, var(--spacing-90));
	--section-spacing-default: max(40px, var(--spacing-120));
	--text-spacing-top-scalar: 1;
	--text-spacing-bottom-scalar: 1;
	--image-spacing-top-scalar: 0;
	--image-spacing-bottom-scalar: 0;
	--image-spacing-side-scalar: 0;
	--text-spacing-top: calc(var(--section-spacing-default) * var(--text-spacing-top-scalar));
	--text-spacing-bottom: calc(var(--section-spacing-default) * var(--text-spacing-bottom-scalar));
	--image-spacing-top: calc(var(--section-spacing-default) * var(--image-spacing-top-scalar));
	--image-spacing-bottom: calc(var(--section-spacing-default) * var(--image-spacing-bottom-scalar));
	--image-spacing-side: calc(var(--section-spacing-default) * var(--image-spacing-side-scalar));
	--image-fixed-height: 400;
	--gap-width: var(--spacing-80);
	--gap-width: var(--spacing-110);
	--gap-width: 0px;
	--text-width: 50%;
	--image-width: calc(100% - var(--text-width));
	--slide-offset: calc(275rem / var(--base-size));
	--image-background-color: #fff;
	--image-aspect-ratio: 2/1;
	--text-aspect-ratio: 2/1;
	--image-width-of-column: 80;
	--slide-image-sizing: cover;

	background-color: var(--wp--preset--color--light-grey);
	max-width: var(--wp--custom--content-size);
	margin-left: auto;
	margin-right: auto;
}

.wpfox-text-image-section + * {
	margin-top: var(--spacing-100);	
}

.wpfox-text-image-section > .wrapper {
	margin: 0 calc(50% - 50vw);
	/* padding: 0 calc(50vw - 50%); */
	background-color: inherit;
	background-image: inherit;
	overflow: hidden;
}

.editor-styles-wrapper .wpfox-text-image-section>.wrapper {
	padding: 0 320px;
}


.wpfox-text-image-section .row {
	& > .col-image {
		aspect-ratio: var(--image-aspect-ratio);
	}
	& > .col-text {
		aspect-ratio: var(--text-aspect-ratio);
	}
}

@media (max-width: 979px) {
	.wpfox-text-image-section .row {
		& > .col-image {
			aspect-ratio: auto;
			min-height: calc(100vw / var(--text-aspect-ratio));
		}
		& > .col-text {
			aspect-ratio: auto;
			min-height: calc(100vw / var(--text-aspect-ratio));
		}
	}
}

@media (min-width: 980px) {
	.wpfox-text-image-section .row {
		gap: var(--gap-width);
		flex-wrap: nowrap;
		transform: translateX(calc(-1 * var(--text-width) + var(--slide-offset)));
		transition: transform 3s;
		transition-delay: 0s;
	}

	.wpfox-text-image-section .row.image-left {
		transform: translateX(calc(var(--text-width) - var(--slide-offset)));
	}

	.editor-styles-wrapper .wpfox-text-image-section .row,
	body.page-loaded .wpfox-text-image-section.scroll-inview .row {
		transform: translateX(0) !important;
	}
}

.wpfox-text-image-section .col-text {
	--font-size: 72;
	line-height: 1.2;
	display: flex;
	flex-direction: column;
	/*align-items: center;*/
	justify-content: center;
	padding: var(--text-spacing-top) max(var(--spacing-70),30px) var(--text-spacing-bottom) !important;
	padding: var(--text-spacing-top) max(var(--spacing-100),30px) var(--text-spacing-bottom) !important;
	flex-basis: calc(var(--text-width) - 0.5 * var(--gap-width));
	
	@media (min-width: 980px) AND (max-width: 1699px) { 
		& { --font-size: 62; }
	}
}

@media (min-width: 980px) {
	.wpfox-text-image-section .col-text {
		opacity: 0;
		transition: opacity 1s;
		transition-delay: 1s;
	}

	.editor-styles-wrapper .wpfox-text-image-section .col-text,
	body.page-loaded .wpfox-text-image-section.scroll-inview .col-text {
		opacity: 1;
	}
}

.editor-styles-wrapper .wpfox-text-image-section .col-text {
	--font-size: 40;
}

.wpfox-text-image-section.text-position-top .col-text {
	justify-content: flex-start;
}

.wpfox-text-image-section.text-position-bottom .col-text {
	justify-content: flex-end;
}

.wpfox-text-image-section .row.image-left .col-text {
	order: 2;
}

.wpfox-text-image-section .col-text>.wrapper {
	position: relative;
}

.wpfox-text-image-section h1 {}

.wpfox-text-image-section .col-image {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-top: var(--image-spacing-top);
	padding-bottom: var(--image-spacing-bottom);
	flex-basis: calc(var(--image-width) - 0.5 * var(--gap-width));
}

.wpfox-text-image-section.image-position-top .col-image {
	justify-content: flex-start;
}

.wpfox-text-image-section.image-position-bottom .col-image {
	justify-content: flex-end;
}

.wpfox-text-image-section.image-alignment-inside .col-image,
.wpfox-text-image-section.image-alignment-outside .image-right .col-image {
	align-items: flex-end;
}

.wpfox-text-image-section.image-alignment-outside .col-image,
.wpfox-text-image-section.image-alignment-inside .image-right .col-image {
	align-items: flex-start;
}

.wpfox-text-image-section .col-image>a {
	display: inline-block;
	width: 100%;
	height: auto;
}

.wpfox-text-image-section.image-size-section_height .col-image>a {
	height: 100%;
}

.wpfox-text-image-section.image-size-default .col-image>a {
	width: auto;
}

.wpfox-text-image-section .col-image .wrapper {
	position: relative;
}

.wpfox-text-image-section .col-image img {
	display: block;
	width: auto;
	max-height: max(300px, calc(500rem/var(--base-size)));
}


/* Text and Image Section - Image Size Column Width */

.wpfox-text-image-section.image-size-column_width {}

.wpfox-text-image-section.image-size-column_width .col-image {
	position: relative;
}

.wpfox-text-image-section.image-size-column_width .col-image .wrapper {
	position: absolute;
	left: 50%;
	transform: translateY(-50%) !important;
	max-height: none;
	max-width: none;
	height: calc(100% + 1px);
	width: calc(100vw - var(--slide-offset));
	width: auto;
	padding-right: 100vw;
	top: 50%;
	width: 100%;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wpfox-text-image-section.image-size-column_width .col-image img {
	width: 100%;
	height: auto;
	max-height: none;
	width: 80%;
	width: calc(1% * var(--image-width-of-column));
}

@media (max-width: 979px) {
	.wpfox-text-image-section.image-size-column_width .col-image .wrapper {
		position: relative;
		/*padding: 40px 0;*/
	}
}


/* Text and Image Section - Image Size Fixed Height */

.wpfox-text-image-section.image-size-fixed_height {}

.wpfox-text-image-section.image-size-fixed_height .col-image .wrapper {
	height: calc(1rem * var(--image-fixed-height)/var(--base-size));
	width: 100%;
}

.wpfox-text-image-section.image-size-fixed_height .col-image img {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: auto;
	height: calc(1rem * var(--image-fixed-height)/var(--base-size));
	max-height: none;
	max-width: none;
}

.wpfox-text-image-section.image-size-fixed_height.image-alignment-outside .col-image img,
.wpfox-text-image-section.image-size-fixed_height.image-alignment-inside .image-right .col-image img {
	left: var(--image-spacing-side);
	transform: none;
}

.wpfox-text-image-section.image-size-fixed_height.image-alignment-inside .col-image img,
.wpfox-text-image-section.image-size-fixed_height.image-alignment-outside .image-right .col-image img {
	left: auto;
	right: var(--image-spacing-side);
	transform: none;
}


/* Text and Image Section - Image Size Relative to Section Height */

.wpfox-text-image-section.image-size-section_height {}

.wpfox-text-image-section.image-size-section_height .col-image {
}

.wpfox-text-image-section.image-size-section_height .col-image .wrapper {
	height: 100%;
	width: 100%;
	min-height: calc(100vw * 804 / 1920 * var(--site-size-adjuster));
}

.editor-styles-wrapper .wpfox-text-image-section.image-size-section_height .col-image .wrapper {
	min-height: 400px;
}



.wpfox-text-image-section.image-size-section_height .col-image img {
	background-color: var(--image-background-color);
	position: absolute;
	left: 50%;
	transform: translateY(-50%) !important;
	width: auto;
	height: auto;
	max-height: none;
	max-width: none;
	height: calc(100% + 1px);
	width: calc(100vw - var(--slide-offset));
	top: 50%;
	object-fit: cover;
	object-position: left center;
}

.editor-styles-wrapper .wpfox-text-image-section.image-size-section_height .col-image img {
	width: 60vw;
}

.wpfox-text-image-section.image-size-section_height .image-left .col-image img {
	object-position: right center;
}

.wpfox-text-image-section.image-size-section_height.image-alignment-outside .col-image img,
.wpfox-text-image-section.image-size-section_height.image-alignment-inside .image-right .col-image img {
	left: var(--image-spacing-side);
	transform: none;
}

.wpfox-text-image-section.image-size-section_height.image-alignment-inside .col-image img,
.wpfox-text-image-section.image-size-section_height.image-alignment-outside .image-right .col-image img {
	left: auto;
	right: var(--image-spacing-side);
	transform: none;
}

@media (max-width: 979px) {
	.wpfox-text-image-section .row {
		flex-wrap: wrap;
	}
	.wpfox-text-image-section .row > div {
		min-width: 100%;
	}
	.wpfox-text-image-section .row > .col-text {
		order: 2;
	}
	.wpfox-text-image-section .row > .col-image {
		background-color: var(--image-background-color);
	}
	.wpfox-text-image-section .row > .col-image > .wrapper {
		
	}
	.wpfox-text-image-section.image-size-section_height .col-image img {
		position: relative;
		width: 100%;
		height: auto;
	}
	
	.wpfox-text-image-section.image-size-section_height .col-image > .wrapper > img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		transform: none !important;
		object-fit: cover;
		object-position: right center;
	}
	
	.wpfox-text-image-section.image-size-section_height .row.image-right .col-image > .wrapper > img {
		object-position: left center;
	}
}

.wpfox-text-image-section.image-size-section_height.has-video .col-image {
	position: relative;
}

.wpfox-text-image-section.image-size-section_height.has-video .col-image::before {
	content: "";
	position: absolute;
	width: 100vw;
	height: 100%;
	background-color: #fff;
	left: 0;
	top: 0;
	display: block;
}

.wpfox-text-image-section.image-size-section_height .col-image video {
	background-color: var(--image-background-color);
	position: absolute;
	left: 0%;
	transform: translateY(-50%) !important;
	width: auto;
	height: auto;
	max-height: none;
	max-width: none;
	height: calc(100% + 1px);
	width: calc(100vw - var(--slide-offset));
	top: 50%;
	object-fit: cover;
	object-position: left center;
	transform: translateX(-50%) !important;
	left: 50%;
	top: 0;
	width: 80%;
	height: 100%;
	object-fit: contain;
	object-position: center center;
}


/* Image Backgrounds */

.wpfox-text-image-section .col-image .wrapper {
	background-color: var(--image-background-color);
}

.wpfox-text-image-section.image-background-grey-gradient .col-image .wrapper {
	background-image: linear-gradient(10deg, #fff, #ccc);
}


/* Rotating Images */

.wpfox-text-image-section .col-image .images {
	height: 100%;
	
	&.slick-slider {
		position: absolute;
		width: 100%;
		
		@media (max-width: 979px) {
			& {
				position: relative;
			}
		}
		
		& .slick-list {
			height: 100% !important;
			overflow: visible !important;
			
			& .slick-track {
				height: 100%;
				
				& .image.slick-slide {
					
					& img {
						position: relative;
						height: 100%;
						width: 100%;
						object-fit: var(--slide-image-sizing);
						object-position: center center;
					}
				}
			}
		}
	}
}

.wpfox-text-image-section .col-image .images .image .bgcolor {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100%;
}
/*
.wpfox-text-image-section .col-image .images .image {
	height: 100%;
	animation-name: text_image_rotating;
	animation-duration: calc(0.001s * var(--slider-speed));
	animation-delay: calc(0.001s * var(--slider-speed) / var(--layers) * (var(--layer-count) - 1));
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: calc(var(--layers) - var(--layer-count) + 1);
}

.wpfox-text-image-section .col-image .images .image img {
	width: 90%;
	position: absolute;
	background-color: transparent;
	max-height: 100%;
}

.wpfox-text-image-section:not(.image-alignment-inside) .col-image .images .image img {
	object-fit: contain;
	left: calc(50% - 20px) !important;
	transform: translate(-50%,-50%) !important;
}

@media (max-width: 979px) {
	.wpfox-text-image-section .col-image .images .image img {
		width: 100%;
		object-position: center center;
		margin: 0 auto !important;
	}
	.wpfox-text-image-section:not(.image-alignment-inside) .col-image .images .image img {
		right: auto !important;
		left: 50% !important;
	}
}


/* Rotating Images - Image Size Relative to Section Height */

.wpfox-text-image-section.image-size-section_height {
	& .images {
		& .image {
			& img {
				width: auto;
			}
		}
	}
}