/* front end styles */

/* font weights 300, 400, 500, 700 */

/* setup global vars */
:root {
	--brand-orange: #EE522A;
}

@font-face {
	font-family: 'Acier';
	src: url('../fonts/aciertext-solid.woff') format('woff2');
	font-weight: normal;
	font-style: normal;
}

body, html {
	color: #000;
	font-family: "Karla", sans-serif;
	font-size: 18px;
	font-weight: 300;
	line-height: 28px;
}
#main {
	margin-top: 0;
}
.content {
	margin: 0 auto;
	max-width: 1440px;
	padding: 0 30px;
	width: 100%;
}
section {
	width: 100%;
}
p {
	margin-bottom: 20px;
}
h1 {
	font-size: 3.22rem; /* 58px */
	font-weight: 400;
    line-height: 3.55rem; /* 64px */
    margin-bottom: 1.66rem; /* 30px */
}
h2 {
	font-family: 'Acier', sans-serif;
    font-size: 2.44rem; /* 44px */
    font-weight: 400;
    line-height: 2.77rem; /* 50px */
    margin-bottom: 1.33rem; /* 24px */

}
h3 {
	font-family: 'Acier', sans-serif;
    font-size: 1.66rem; /* 30px */
    font-weight: 400;
    line-height: 2.11rem; /* 38px */
    margin-bottom: 1.11rem; /* 20px; */
}
h4 {
	font-size: 1.33rem; /* 24px; */
	font-weight: 400;
	line-height: 1.66rem; /* 30px */
	margin-bottom: 1.11rem; /* 20px; */
}
h5 {
	font-size: 1.11rem; /* 20px; */
	font-weight: 400;
	line-height: 1.44rem; /* 26px; */
	margin-bottom: 0.833rem; /* 15px; */
}

button {
	background-color: var();
	border: 0;
	color: #FFF;
	cursor: pointer;
	font-weight: 700;
	font-style: normal;
	font-size: 18px;
	height: 48px;
	line-height: 48px;
	padding: 0 40px;
	text-decoration: none;
}
.margin-bottom {
	margin-bottom: 82px !important;
}
.brand-orange {
	color: var(--brand-orange);
}
@media only screen and (max-width: 500px) {
	body, html {
		font-size: 14px;
		line-height: 22px;
	}
	.margin-bottom {
		margin-bottom: 40px !important;
	}
}

/* header block */
	header {
		color: #FFF;
		position: relative;
		text-align: center;
		overflow: hidden;
		padding: 140px 20px 90px 20px;
	}
	.hero-overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		/* Fades top + bottom */
		background: linear-gradient(
			to bottom,
			rgba(0,0,0,0) 0%,     /* dark at top */
			rgba(0,0,0,1) 100%    /* dark at bottom */
		);
		opacity: 0.89;
		z-index: -1;
	}
	.hero-img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		z-index: -2;
		min-height: 500px;
	}
	header .site-logo {
		height: auto;
		margin-bottom: 480px;
		max-width: 416px;
		width: 100%;
	}
	header p {
		font-size: 1.625rem;
		line-height: 2.75rem;
		margin: 0 auto;
		max-width: 885px;
		text-align: center;
		width: 100%;
	}

	@media only screen and (max-width: 500px) {
		header {
			padding: 50px 20px;
		}
		header .site-logo {
			margin-bottom: 50px;
		}
		header p {
			width: 100%;
		}
	}

/* image-and-text-promo */
	.image-and-text-promo {
		margin: 0 auto;
		text-align: center;
		width: 50%;
	}
	.image-and-text-promo img {
		margin-bottom: 30px;
	}
	@media only screen and (max-width: 500px) {
		.image-and-text-promo {
			width: 100%;
		}
	}

/* titled-image-text-and-list-promo */
	.titled-image-text-and-list-promo {
		text-align: center;
		padding-bottom: 80px;
	}
	.titled-image-text-and-list-promo h2 {
		margin-bottom: 60px;
	}
	.titled-image-text-and-list-promo .content {
		display: flex;
		max-width: 1200px;
		padding-top: 100px;
		width: 100%;
	}
	.titled-image-text-and-list-promo .content .image-holder {
		position: relative;
		width: 55%;
	}
	.titled-image-text-and-list-promo .content .image-holder .logo-over-background-image {
		left: 0;
		position: absolute;
		top: 0;
		z-index: -1;
		max-height: 100%;
		opacity: 0.5;
		width: auto;
	}
	.titled-image-text-and-list-promo .content .image-holder .promo-img {
		float: right;
	}
	.titled-image-text-and-list-promo .content .image-holder .main-image-overlay-list-items {
		background-color: rgba(68, 66, 57,0.9);
		color: #FFF;
		font-size: 0.875rem;
		right: 5%;
		padding: 10px 15px 200px;
		position: absolute;
		text-align: left;
		top: 40%;
		z-index: 2;
		width: 170px
	}
	.titled-image-text-and-list-promo .content .image-holder .main-image-overlay-list-items span {
		font-size: 0.875rem;
		vertical-align: middle;
	}
	.titled-image-text-and-list-promo .content .image-holder .main-image-overlay-list-items ul {
		list-style-type: none;
		margin: 0;
	}
	.titled-image-text-and-list-promo .content .image-holder .main-image-overlay {
		left: 0;
		position: absolute;
		bottom: -40px;
		z-index: 3;
		height: auto;
		width: 100%;
	}
	.titled-image-text-and-list-promo .content .text-holder {
		text-align: left;
		max-width: 540px;
		padding: 180px 0 0 100px;
		width: 100%;
	}
	.titled-image-text-and-list-promo .content .text-holder ul {
		border-top: 1px solid #E2E2E2;
		margin-left: 0;
		list-style-type: none;
	}
	.titled-image-text-and-list-promo .content .text-holder li {
		border-bottom: 1px solid #E2E2E2;
		line-height: 2.5rem;
	}
	@media only screen and (max-width: 500px) {
		.titled-image-text-and-list-promo {
			padding-bottom: 0;
		}
		.titled-image-text-and-list-promo .content {
			flex-wrap: wrap;
		}
		.titled-image-text-and-list-promo .content .image-holder {
			width: 100%;
		}
		.titled-image-text-and-list-promo .content .image-holder .logo-over-background-image img,
		.titled-image-text-and-list-promo .content .image-holder .promo-img {
			height: 500px;
    		width: auto;
		}
		.titled-image-text-and-list-promo .content .text-holder {
			padding: 100px 0 50px 0;
		}
	}

/* large-information-promo */
	.large-information-promo {
		text-align: center;
	}
	.large-information-promo .sub-copy {
		display: inline-block;
		font-size: 1.44rem;
		line-height: 2.44rem;
		margin-bottom: 74px;
		max-width: 885px;
		width: 100%;
	}
	.large-information-promo .promo-box-holder {
		display: flex;
		gap: 5%;
		margin: 0 auto 60px;
		max-width: 1144px;
		width: 100%;
	}
	.large-information-promo .promo-box-holder .promo-box {
		background-color: #F9F8F2;
		max-width: 340px;
		padding: 30px;
		text-align: left;
		width: 30%;
	}
	.large-information-promo .text {
		display: inline-block;
		margin: 0 auto 60px;
		max-width: 650px;
		width: 100%;
	}
	@media only screen and (max-width: 500px) {
		.large-information-promo .sub-copy {
			margin-bottom: 36px;
		}
		.large-information-promo .promo-box-holder {
			flex-wrap: wrap;
			gap: 0;
			margin: 0 auto 30px;
		}
		.large-information-promo .promo-box-holder .promo-box {
			margin-bottom: 20px;
			max-width: 100%;
			padding: 15px;
			width: 100%;
		}
		.large-information-promo .text {
			margin-bottom: 30px;
		}
	}

/* image-promo-boxes */
	.image-promo-boxes {
		background-color: #141913;
		color: #FFF;
		padding: 80px 0 20px 0;
	}
	.image-promo-boxes.light {
		background-color: #FFFFFF;
		color: #000;
	}
	.image-promo-boxes .content {
		position: relative;
	}
	.image-promo-boxes .promo-background-img {
		position: absolute;
		top: 50%;
		left: 50%;
		max-width: 80%;
		transform: translate(-50%, -50%);
		width: 100%;
		height: auto;
	}
	.image-promo-boxes .promo-box-holder {
		display: flex;
		flex-wrap: wrap;
		gap: 5%;
		margin: 0 auto;
		max-width: 1140px;
		position: relative;
		width: 100%;
	}
	.image-promo-boxes .promo-box-holder .promo-box {
		margin-bottom: 60px;
		text-align: center;
		width: 47%;
		z-index: 1;
	}
	.image-promo-boxes .promo-box-holder .promo-box img {
		height: auto;
		margin-bottom: 30px;
		width: 100%;
	}
	.image-promo-boxes .promo-box-holder .promo-box h4 {
		margin-bottom: 30px;
	}
	.image-promo-boxes.light h4 {
		font-family: 'Acier', sans-serif;
	    font-size: 2rem; /* 44px */
	    font-weight: 500;
	    line-height: 2.66rem; /* 50px */
	}
	@media only screen and (max-width: 500px) {
		.image-promo-boxes {
			padding: 40px 0 0 0;
		}
		.image-promo-boxes.light {
			padding: 40px 0 0;
		}
		.image-promo-boxes .promo-box-holder {
			gap: 0;
		}
		.image-promo-boxes .promo-box-holder .promo-box {
			margin-bottom: 30px;
			width: 100%;
		}
		.image-promo-boxes .promo-box-holder .promo-box img {
			margin-bottom: 15px;
		}
	}

/* rich-text-and-image-promo */
	.rich-text-and-image-promo {
		background-color: #F9F8F2;
	}
	.rich-text-and-image-promo .content {
		display: flex;
	}
	.rich-text-and-image-promo .text {
		padding: 135px 80px 170px 8%;
		width: 50%;
	}
	.rich-text-and-image-promo h3 {
		font-size: 2rem;
		line-height: 2.6rem;
		margin-bottom: 1.6rem;
	}
	.rich-text-and-image-promo .image-holder {
		padding-bottom: 170px;
	}
	.rich-text-and-image-promo img {
		height: auto;
		width: 100%;
	}
	@media only screen and (max-width: 500px) {
		.rich-text-and-image-promo .text {
			padding: 40px 0 20px 0;
			width: 100%;
		}
		.rich-text-and-image-promo .image-holder {
			display: none;
		}
	}

/* centered-text-with-small-image-promo */
	.centered-text-with-small-image-promo {
		text-align: center;
	}
	.centered-text-with-small-image-promo ul {
		list-style-position: inside;
		padding: 0;
		margin: 0 auto 140px auto;
	}
	.centered-text-with-small-image-promo ul li {
		position: relative;
		padding-left: 1.2em;
	}
	@media only screen and (max-width: 500px) {
		.centered-text-with-small-image-promo ul {
			margin-bottom: 70px;
		}
	}

/* footer */
	footer {
		background-color: #141913;
		color: #FFF;
		text-align: center;
		width: 100%;
	}
	footer .content {
		height: fit-content;
		line-height: 0;
		padding: 90px 100px 0 100px;
	}
	footer .content .site-logo {
		height: auto;
		margin-bottom: 64px;
		width: 100%;
		max-width: 416px;
	}
	footer .content .text {
		line-height: 1.55rem;
		margin: 0 auto 64px;
		max-width: 500px;
		width: 100%;
	}
	footer .footer-image {
		margin: 0 auto;
		max-width: 50%;
		width: 100%;
	}
	footer .footer-image img {
		height: auto;
		width: 100%;
	}
	@media only screen and (max-width: 500px) {
		footer .content {
			padding: 40px 0 0 0;
		}
		footer .content .site-logo {
			margin-bottom: 32px;
		}
		footer .content .text {
			margin: 0 auto 32px;
			padding: 0 20px;
		}
		footer .footer-image {
			max-width: 100%;
			width: 100%;
		}
		footer .footer-image img {
			height: auto;
			width: 100%;
		}
	}

/* @media only screen and (max-width: XXXpx) {

*/