/* Page Section */

.wpfox-page-section {
	--page-section-spacing-default: max(40px, 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));
	--page-section-padding-bottom: calc(var(--page-section-spacing-bottom) * var(--page-section-spacing-bottom-scalar));
	--page-section-margin-top: calc(var(--page-section-spacing-top) * var(--page-section-spacing-top-scalar));
	--page-section-margin-bottom: calc(var(--page-section-spacing-bottom) * var(--page-section-spacing-bottom-scalar));
	margin-top: var(--page-section-margin-top);
	margin-bottom: var(--page-section-margin-bottom);
}

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

.wpfox-page-section.alignfull > .wrapper {
	padding-left: max(30px, var(--spacing-80));
	padding-right: max(30px, var(--spacing-80));
}



:where(.editor-styles-wrapper) .wpfox-page-section.alignfull > .wrapper {
	padding-left: calc(50vw - 50% - 100px);
	padding-right: calc(50vw - 50% - 100px);
}

.wp-block-column .wpfox-page-section > .wrapper {
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0;
	padding-right: 0;
}

.wpfox-page-section.has-slants-top > .wrapper::before {
	content: "";
	display: block;
	position: absolute;
	background-repeat: repeat-x;
	left: 0;
	width: 100%;
	height: 441px;
	max-height: 100%;
	top: 0;
	background-image: url('/wp-content/themes/wpfox/assets/images/bg-slants-light-top.png');
	background-position: top center;
}

.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;
}

.wpfox-page-section.has-content-max-width .inner-blocks {
	max-width: max(calc(1px * var(--content-max-width,9999)),calc(1rem * var(--content-max-width,9999) / var(--base-size)));
	margin-left: auto;
	margin-right: auto;
}


/* 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;
}


/* Text and Image Section */

.wpfox-text-image-section {
	--section-spacing-default: max(40px, var(--spacing-90));
	--text-spacing-top-scalar: 1;
	--text-spacing-bottom-scalar: 1;
	--image-spacing-top-scalar: 1;
	--image-spacing-bottom-scalar: 1;
	--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);
	--text-width: 50%;
	--image-width: calc(100% - var(--text-width));

	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>.wrapper {
	margin: 0 calc(50% - 50vw);
	padding: 0 calc(50vw - 50%);
	background-color: inherit;
	background-image: inherit;
}

.wpfox-text-image-section .row {
	gap: var(--gap-width);
	flex-wrap: nowrap;
}

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

.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 .wrapper {
	width: 100%;
}

.wpfox-text-image-section.image-size-column_width .col-image img {
	width: 100%;
	height: auto;
	max-height: none;
}


/* 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 .wrapper {
	height: 100%;
	width: 100%;
}

.wpfox-text-image-section.image-size-section_height .col-image img {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: auto;
	height: 100%;
	max-height: none;
	max-width: none;
}

.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: 39.999em) {
	.wpfox-text-image-section .row {
		flex-wrap: wrap;
		
		& > .col {
			flex-basis: 100%;
			
			&.col-image {
				order: 1;
				padding-bottom: 0;
				margin-bottom: 0;
			}
			
			&.col-text {
				order: 2;
				padding-top: 0;
				margin-top: 0;
			}
		}
	}
}



/* Page Header (uses Text and Image Section as starting point) */

.wpfox-page-header.wpfox-text-image-section {
	--section-spacing-default: max(40px, var(--spacing-90));
	--text-spacing-top-scalar: 1;
	--text-spacing-bottom-scalar: 1;
	--image-spacing-top-scalar: 0;
	--image-spacing-bottom-scalar: 0;
	background-color: var(--wp--preset--color--custom-data-networks-blue);
	color: #fff;
	
	p a, li a {
		color: #fff;
		font-weight: bolder;
	}
}

.wpfox-page-header > .wrapper {
	position: relative;
}

.wpfox-page-header.next-section-overlay > .wrapper {
	--overlay-height: var(--spacing-150);
	padding-bottom: var(--overlay-height);
}

.wpfox-page-header.next-section-overlay + .wpfox-page-section > .wrapper {
	--overlay-height: var(--spacing-150);
	margin-top: calc(-1 * var(--overlay-height));
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: var(--spacing-80);
	padding-right: var(--spacing-80);
}

.wpfox-page-header.has-big-slants > .wrapper::before {
	content: "";
	display: block;
	position: absolute;
	background-repeat: repeat-x;
	left: 0;
	width: 100%;
	height: 441px;
	max-height: 100%;
	bottom: 0;
	background-image: url('/wp-content/themes/wpfox/assets/images/bg-slants-bottom.png');
	background-position: bottom center;
}

.wpfox-page-header.has-small-slants > .wrapper::before {
	content: "";
	display: block;
	position: absolute;
	background-repeat: repeat-x;
	left: 0;
	width: 100%;
	height: 441px;
	max-height: 100%;
	bottom: 0;
	background-image: url('/wp-content/themes/wpfox/assets/images/page-title-bg.png');
	background-position: bottom center;
}

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

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