/* Page Section */

.wpfox-page-section {
	--page-section-spacing-default: max(60px, var(--spacing-90));
	--page-section-spacing-top: var(--page-section-spacing-default);
	--page-section-spacing-bottom: var(--page-section-spacing-default);
	--page-section-spacing-top-scalar: 1;
	--page-section-spacing-bottom-scalar: 1;
	--page-section-padding-top: calc(var(--page-section-spacing-top) * var(--page-section-spacing-top-scalar,0));
	--page-section-padding-bottom: calc(var(--page-section-spacing-bottom) * var(--page-section-spacing-bottom-scalar,0));
	--page-section-margin-top: calc(var(--page-section-spacing-top) * var(--page-section-spacing-top-scalar,0));
	--page-section-margin-bottom: calc(var(--page-section-spacing-bottom) * var(--page-section-spacing-bottom-scalar,0));
	--section-padding-top: 0;
	--section-padding-bottom: 0;
	--section-padding-top-calc: max(calc(1px * var(--section-padding-top)),calc(1rem * var(--section-padding-top) / var(--base-size)));
	--section-padding-bottom-calc: max(calc(1px * var(--section-padding-bottom)),calc(1rem * var(--section-padding-bottom) / var(--base-size)));
	--section-padding-top-raw: 0px;
	--section-padding-bottom-raw: 0px;
	--section-overflow-top: 0;
	--section-overflow-bottom: 0;
	--section-overflow-top-calc: max(calc(1px * var(--section-overflow-top)),calc(1rem * var(--section-overflow-top) / var(--base-size)));
	--section-overflow-bottom-calc: max(calc(1px * var(--section-overflow-bottom)),calc(1rem * var(--section-overflow-bottom) / var(--base-size)));
	--section--z-index: 1;
	position: relative;
	margin-top: var(--page-section-margin-top);
	margin-bottom: var(--page-section-margin-bottom);
	z-index: var(--section-z-index);
	
	@media (max-width: 959px) {
		&.mobile-top-scalar-1 {
			--page-section-spacing-top-scalar: 1 !important;
		}
	}
}

.wpfox-page-section>.wrapper {
	position: relative;
	padding-top: calc(var(--page-section-padding-top) + var(--section-padding-top-raw) + var(--section-padding-top-calc));
	padding-bottom: calc(var(--page-section-padding-bottom) + var(--section-padding-bottom-raw) + var(--section-padding-bottom-calc));
	max-width: none !important;
	max-width: min(100%,calc(100vw - var(--scrollbar-width))) !important;
	margin-left: calc(50% - 50vw - 0.5 * var(--scrollbar-width)) !important;
	margin-right: calc(50% - 50vw - 0.5 * var(--scrollbar-width)) !important;
	padding-left: calc(50vw - 50% - 0.5 * var(--scrollbar-width));
	padding-right: calc(50vw - 50% - 0.5 * var(--scrollbar-width));
	left: var(--scrollbar-width);
	background-color: inherit;
	background-image: inherit;
}

.wpfox-page-section > .wrapper > .inner-blocks {
	margin-top: calc(-1 * var(--section-overflow-top-calc));
	margin-bottom: calc(-1 * var(--section-overflow-bottom-calc));
}

.wpfox-page-section:not(.has-background) {
	--page-section-padding-top: 0px;
	--page-section-padding-bottom: 0px;
}

.wpfox-page-section.has-background {
	--page-section-margin-top: 0px;
	--page-section-margin-bottom: 0px;
}

.wpfox-page-section>* {
	max-width: var(--wp--custom--content-size);
	margin-left: auto !important;
	margin-right: auto !important;
}

.wpfox-page-section.has-full-height > .wrapper {
	min-height: calc(100vh - var(--header-height) - var(--page-section-margin-top) - var(--page-section-margin-bottom) - var(--page-section-padding-top) - var(--page-section-padding-bottom));
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.wpfox-page-section .bgimage {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.wpfox-page-section .bgimage img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.wpfox-page-section .bgvideo, .wpfox-page-section .bgvideo::after, .wpfox-page-section .bgvideo video {
	position: absolute;
	top: 0;
	left: 0;
	max-width: none !important;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.wpfox-page-section .bgvideo::after {
	background-color: var(--wp--preset--color--default-text);
	content: "";
	opacity: 0.32;
}

.wpfox-page-section .inner-blocks {
	position: relative;
	z-index: 1;
}


/* Faded Background Image */

.wpfox-page-section.bgimage-layout-fade {
	--top-fade-color: #fff;
	--top-fade-color-transparent: #ffffff00;
	--top-fade-opacity: 1;
	--bottom-fade-color: #f5f5f5;
	--bottom-fade-color-transparent: #f5f5f500;
	--bottom-fade-opacity: 1;
	
	.bgimage {
		img {
			object-fit: cover !important;
			filter: saturate(0);
			opacity: 0.19;
		}
		
		&::before {
			content: "";
			position: absolute;
			display: block;
			top: 0;
			left: 0;
			width: 100%;
			height: min(50%,max(383px,calc(383rem / var(--base-size))));
			background: transparent linear-gradient(180deg, #FFF 0%, #FFF 43%, #FFF0 100%) 0% 0% no-repeat padding-box;
			z-index: 1;
		}
		
		&::after {
			content: "";
			position: absolute;
			display: block;
			bottom: 0;
			left: 0;
			width: 100%;
			height: min(50%,max(383px,calc(383rem / var(--base-size))));
			background: transparent linear-gradient(0deg, #f5f5f5 0%, #f5f5f5 43%, #f5f5f500 100%) 0% 0% no-repeat padding-box;
			z-index: 1;
		}
	}
}

.wpfox-page-section.bgimage-desaturated {
	.bgimage {
		img {
			filter: saturate(0);
			opacity: 0.19;
		}
	}
}

.wpfox-page-section.bgimage-fade-top {
	--top-fade-color: #fff;
	--top-fade-color-transparent: #ffffff00;
	--top-fade-opacity: 1;
	
	.bgimage {
		&::before {
			content: "";
			position: absolute;
			display: block;
			top: 0;
			left: 0;
			width: 100%;
			height: min(50%,max(383px,calc(383rem / var(--base-size))));
			background: transparent linear-gradient(180deg, var(--top-fade-color) 0%, var(--top-fade-color) 43%, var(--top-fade-color-transparent) 100%) 0% 0% no-repeat padding-box;
			z-index: 1;
			opacity: var(--top-fade-opacity);
		}
	}
}

.wpfox-page-section.bgimage-fade-bottom {
	--bottom-fade-color: #fff;
	--bottom-fade-color-transparent: #ffffff00;
	--bottom-fade-opacity: 1;
	
	.bgimage {
		&::after {
			content: "";
			position: absolute;
			display: block;
			bottom: 0;
			left: 0;
			width: 100%;
			height: min(50%,max(383px,calc(383rem / var(--base-size))));
			background: transparent linear-gradient(0deg, var(--bottom-fade-color) 0%, var(--bottom-fade-color) 43%, var(--bottom-fade-color-transparent) 100%) 0% 0% no-repeat padding-box;
			z-index: 1;
			opacity: var(--bottom-fade-opacity);
		}
	}
}


/* Three Image Layout */

.wpfox-page-section.section-layout-three_image {
	.inner-blocks {
		--overflow-left: var(--spacing-100);
		--overflow-right: var(--spacing-160);
		--gap: max(20px,calc(28rem / var(--base-size)));
		display: grid;
		gap: var(--gap);
		grid-template-columns: calc((100% + var(--overflow-left) + var(--overflow-right) - 2 * var(--gap)) / 3 - var(--overflow-left)) calc((100% + var(--overflow-left) + var(--overflow-right) - 2 * var(--gap)) / 3) calc((100% + var(--overflow-left) + var(--overflow-right) - 2 * var(--gap)) / 3 - var(--overflow-right));
		
		& .acf-innerblocks-container {
			grid-column: 1 / span 2;
			grid-row: 1;
			max-width: max(540px,calc(540rem / var(--base-size)));
			padding: var(--spacing-25) 0 var(--spacing-15);
		}
		
		.layout-image {
			.wrapper {
				position: relative;
				padding-bottom: calc(440 / 415 * 100%);
				box-shadow: 0px 0px var(--spacing-6) #00000029;
			}
			
			.play-button {
				position: absolute;
			}
			
			& img {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				object-fit: cover;
				object-position: var(--object-position,'center center');
				filter: saturate(0);
				transition: filter 0.5s;
			}
			
			& img.part-in-view {
				filter: saturate(1);
			}
		}
		
		.layout-image-1 {
			grid-column: 1;
			grid-row: 2;
			margin-left: calc(-1 * var(--overflow-left));
			padding-top: var(--spacing-90);
		}
		
		.layout-image-2 {
			grid-column: 2;
			grid-row: 2;
		}
		
		.layout-image-3 {
			grid-column: 3;
			grid-row: 1 / span 2;
			grid-row: 2;
			margin-right: calc(-1 * var(--overflow-right));
			
			& > .wrapper {
				transform: translateY(calc(-100% + 80px));
			}
		}
	}
	
	@media (max-width: 959px) {
		.inner-blocks {
			--overflow-left: calc(0.5 * (100vw - var(--wp--style--global--content-size)));
			--overflow-right: calc(0.5 * (100vw - var(--wp--style--global--content-size)));
			--gap: 10px;
			grid-template-columns: 1fr 1fr;
			
			& .acf-innerblocks-container {
				grid-column: 1 / span 2;
				padding: 0 0 max(60px,var(--spacing-90));
			}
			
			.layout-image {
				.wrapper {
					padding-bottom: calc(255 / 209 * 100%);
				}
			}
			
			.layout-image-1 {
				grid-column: 1;
				grid-row: 3 / span 2;
				margin-left: calc(-1 * var(--overflow-left));
				padding-top: var(--spacing-90);
			}
			
			.layout-image-2 {
				grid-column: 2;
				grid-row: 2 / span 2;
				margin-right: calc(-1 * var(--overflow-right));
			}
			
			.layout-image-3 {
				grid-column: 2;
				grid-row: 4 / span 2;
				margin-right: calc(-1 * var(--overflow-right));
				
				& > .wrapper {
					transform: translateY(0);
				}
			}
		}
	}
}


/* Page Section - Intro Section */

.wpfox-page-section.is-style-intro>.wrapper {
	text-align: center;
}

.wpfox-page-section.is-style-intro>.wrapper>* {
	max-width: max(900px, 900rem/var(--base-size));
	margin-left: auto;
	margin-right: auto;
}

.wpfox-page-section.is-style-intro h2,
.wpfox-page-section.is-style-intro .has-h-2-font-size {
	--font-size: 50;
}

.wpfox-page-section.is-style-intro h2+*,
.wpfox-page-section.is-style-intro .has-h-2-font-size+* {
	margin-top: var(--spacing-25);
}

.wpfox-page-section.is-style-intro p {
	--font-size: 22;
}