/*---*\
Landing Page Base
Styles for FX Landing Page flexible content inside the theme chrome

KEY FEATURES:
- Section spacing and background utilities
- Content-area defaults that do not replace the theme header/footer
\*---*/

.fx-landing-content {
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.5;
	color: var(--color-text-white);
	background-color: var(--color-bg-dark-blue);
	-webkit-font-smoothing: antialiased;
}

.fx-landing-content img {
	max-width: 100%;
	height: auto;
	display: block;
}

.fx-landing-content a {
	color: var(--color-primary);
}

.section-padding {
	padding-top: var(--section-margins);
	padding-bottom: var(--section-margins);
}

.section-margins {
	margin-top: var(--section-margins);
	margin-bottom: var(--section-margins);
}

.bg-dark-blue,
.bg-dark {
	background-color: var(--color-bg-dark-blue) !important;
}

.bg-gray {
	background-color: var(--color-bg-gray)!important;
}

.bg-black {
	background-color: var(--color-bg-black)!important;
}

.bg-white {
	background-color: var(--color-bg-white)!important;
	color: var(--color-text-dark);
}

@media (prefers-reduced-motion: reduce) {
	.fx-landing-content *,
	.fx-landing-content *::before,
	.fx-landing-content *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}