/* =========================================================
   FOOTER
========================================================= */
#footer {
	position: relative;
	z-index: 49;
	width: 100%;
	padding: 58px 0 0;
	background: var(--color-dark-bg);
	color: var(--color-background-light);
	flex-shrink: 0;
}
.footerFluid {
	width: 92%;
	max-width: 1650px;
	margin: 0 auto;
	padding: 0;
}
/* =========================================================
   MAIN FOOTER
========================================================= */
.footerMain {
	display: flex;
	align-items: flex-start;
	padding-bottom: 45px;
}
/* =========================================================
   BRAND
========================================================= */
.footerBrand {
	padding-right: 45px;
}
.footerLogo {
	display: inline-block;
	margin: 0 0 10px;
}
.footerLogo img {
	display: block;
	/* Larger than previous 205px */
	width: 255px;
	max-width: 100%;
	height: auto;
}
.footerBrand h3 {
	max-width: 520px;
	margin: 0;
	font-family: var(--font-Headings);
	font-size: calc(2vw + 5px);
	font-weight: 400;
	line-height: 1.05;
	color: var(--color-background-light);
}
/* =========================================================
   COLUMN HEADINGS
========================================================= */
.footerHeading {
	position: relative;
	margin: 4px 0 22px;
	padding-bottom: 11px;
	font-family: var(--font-Headings);
	font-weight: 400;
	color: var(--color-background-light);
	/* Removed long rule from old template */
	border-bottom: 0;
}
.footerHeading:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 60%;
	height: 2px;
	background: var(--color-accent);
}
/* =========================================================
   EXPLORE LINKS
========================================================= */
.footerConnectLinks {
	padding-right: 25px;
}
.footLink {
	margin: 0 0 11px;
}
.footLink a {
	display: flex;
	align-items: center;
	gap: 11px;
	color: var(--color-background-light);
	text-decoration: none;
	opacity: .9;
	transition:
		color .25s ease, opacity .25s ease, transform .25s ease;
}
.footLink a:hover, .footLink a:focus {
	color: var(--color-light-accent);
	opacity: 1;
	transform: translateX(3px);
	text-decoration: none;
}
.footLink i {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 25px;
	flex: 0 0 25px;
	color: inherit !important;
	font-size: 18px;
}
/* =========================================================
   STAY CONNECTED
========================================================= */
.footerSignup {
	padding-left: 25px;
}
.footerSignup p {
	max-width: 500px;
	margin: 0 0 20px;
	color: var(--color-background-light);
	opacity: .88;
	line-height: 1.55;
}
.footerSignup .btn {
	margin-top: 0;
}
/* =========================================================
   BOTTOM BAR
========================================================= */
.footerBottomWrap {
	border-top:
		1px solid rgba(255, 255, 255, .16);
}
.footerBottom {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 17px 0 19px;
	font-size: 11px;
	line-height: 1.5;
	color: var(--color-background-light);
	opacity: .72;
}
.footerBottom a {
	color: var(--color-background-light);
	text-decoration: none;
}
.footerBottom a:hover, .footerBottom a:focus {
	color: var(--color-light-accent);
	text-decoration: none;
}
/* =========================================================
   FOOTER DESKTOP BALANCING
========================================================= */
@media(min-width: 992px) {
	.footerMain {
		display: flex;
		align-items: stretch;
		padding-bottom: 48px;
	}
	/* Give all three columns the same working height */
	.footerBrand, .footerConnectLinks, .footerSignup {
		min-height: 305px;
		display: flex;
		flex-direction: column;
	}
	/* =====================================================
	   BRAND
	===================================================== */
	.footerBrand {
		justify-content: flex-start;
		padding-right: 45px;
	}
	.footerLogo {
		margin-bottom: 10px;
	}
	.footerLogo img {
		width: 255px;
	}
	.footerBrand h3 {
		margin: 0;
		max-width: 500px;
	}
	/* =====================================================
	   EXPLORE
	===================================================== */
	.footerConnectLinks {
		padding-right: 25px;
	}
	.footerConnectLinks .footerHeading {
		margin-top: 0;
		margin-bottom: 22px;
	}
	/*
		Slightly more vertical spacing makes this column
		fill approximately the same height as the brand.
	*/
	.footerConnectLinks .footLink {
		margin-bottom: 16px;
	}
	.footerConnectLinks .footLink:last-child {
		margin-bottom: 0;
	}
	/* =====================================================
	   STAY CONNECTED
	===================================================== */
	.footerSignup {
		padding-left: 25px;
	}
	.footerSignup .footerHeading {
		margin-top: 0;
		margin-bottom: 22px;
	}
	.footerSignup p {
		margin:
			0 0 20px 0;
		line-height: 1.55;
	}
	/*
		This is the key:
		push the button toward the bottom of the same-height
		column instead of letting everything bunch at the top.
	*/
	.footerSignup .btn {
		align-self: flex-start;
		margin-top: auto;
	}
}
/* =========================================================
   TABLET
========================================================= */
@media(max-width: 991px) {
	#footer {
		padding-top: 50px;
	}
	.footerMain {
		display: block;
		padding-bottom: 40px;
	}
	.footerBrand {
		margin-bottom: 40px;
		padding-right: 15px;
	}
	.footerLogo img {
		width: 230px;
	}
	.footerConnectLinks {
		padding-right: 25px;
	}
	.footerSignup {
		padding-left: 25px;
	}
	/* =========================================================
   TABLET - CENTER FOOTER BRAND
========================================================= */
	@media(min-width: 768px) and (max-width: 991px) {
		.footerBrand {
			width: 100%;
			text-align: center;
			padding-left: 0;
			padding-right: 0;
		}
		.footerLogo {
			display: block;
			width: fit-content;
			margin:
				0 auto 12px auto;
		}
		.footerLogo img {
			width: 230px;
		}
		.footerBrand h3 {
			max-width: 600px;
			margin:
				0 auto;
			text-align: center;
		}
	}
}
/* =========================================================
   MOBILE
========================================================= */
@media(max-width: 767px) {
	#footer {
		padding-top: 42px;
	}
	.footerFluid {
		width: auto;
		margin-left: 25px;
		margin-right: 25px;
	}
	.footerBrand, .footerConnectLinks, .footerSignup {
		padding-left: 0;
		padding-right: 0;
		text-align: center;
	}
	.footerBrand, .footerConnectLinks {
		margin-bottom: 38px;
	}
	.footerLogo {
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 10px;
	}
	.footerLogo img {
		width: 215px;
	}
	.footerBrand h3 {
		margin-left: auto;
		margin-right: auto;
	}
	.footerHeading {
		margin-bottom: 20px;
	}
	.footerHeading:after {
		left: 50%;
		transform: translateX(-50%);
	}
	.footLink {
		margin-bottom: 10px;
	}
	.footLink a {
		justify-content: center;
	}
	.footLink a:hover, .footLink a:focus {
		transform: none;
	}
	.footerSignup p {
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 18px;
	}
	.footerBottom {
		display: block;
		padding-top: 16px;
		padding-bottom: 17px;
		text-align: center;
	}
	.footerBottom span {
		display: none;
	}
	.footerBottom div + div {
		margin-top: 5px;
	}
}