/*===============   Page Information   ================
Website Name: Terra Navis Living
Website URL: terranavisliving.noshinr.com
Website Author: Francis Tuttle Web Development BPA Team 2019-2020
Author's URL: http://ftclass.com

==================   COLOR GUIDE   ==================
Navy ---------------------> #0A1C58
	Shade -----> #6D8DB6

Burnt Orange -------------> #FF7125
	Shade -----> #FFAC80

Aquamarine ---------------> #00DFDB
	Shade -----> #8AFFFD

Pink ---------------> #FF466A
	Shade -----> #FF8098

Text ---------------------> #FFF
Subtle Text --------------> #6D8DB6
Link ---------------------> #6D8DB6

===============   TABLE OF CONTENTS   ===============
1. CSS Resets & Fonts
2. Global Styles
3. Header & Nav Styles
3a. Header Image Animations
4. Main Body Content
5. Page Styles
6. Form Styles
7. Footer Content
8. @Media Queries
****************************************************/

/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
1. CSS Resets & Fonts
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/

@font-face {
	font-family: 'ptsans';
	src: url('../fonts/ptsans.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'ptsans-italic';
	src: url('../fonts/ptsans-italic.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'solway-bold';
	src: url('../fonts/Solway-Bold.otf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'solway-light';
	src: url('../fonts/Solway-Light.otf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
2. Global Styles
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
:root {
	--text: #FFF;
	--text-subtle: #6D8DB6;
	--danger: #FD2525;
	--tempColor: var(--dark);
	--link: var(--pageColor);
	--link-hover: var(--tempColor);
	--link-active: var(--tempColor);
	--link-visited: var(--tempColor);
	--link-liHover: var(--tempColor);

	--headingFont: 'solway-bold';
	--headingFont-bold: 'solway-bold';
	--subtitle: 'solway-light';
	--textFont: 'ptsans';
	--textFont-bold: 'ptsansbold';
	--textFont-italic: 'ptsans-italic';

	--formBorder: rgba(44,30,8,.5);
	--cursorColor: var(--pageColor);
	--cursorColor-shade: var(--pageColor-shade);

	--home: var(--bg);
	--home-shade: var(--bg);
	--home-link: #FF7125;
	--dark: #FFF;

	--temp-text: #FFF;
	--bg: #0A1C58;
	--news-link: #FF7125;
	--bg-footer: #041433;
	--news-shade: var(--home-shade);
	--news-link: var(--home-link);
}

html {
  	scroll-behavior: smooth;
}

body {
	background: var(--bg);
	color: var(--temp-text);
	position: relative;
	font: 100% var(--textFont);
}

a {
  color: var(--pageColor-link);
  cursor: pointer;
  font-weight: bold;
}
a:hover {
  color: var(--link-hover);
}
a:active {
  color: var(--link-active);
}
a:visted {
  color: var(--link-visited);
}
li a:hover {
  color: var(--link-liHover);
}
img {
  width: 100%;
}
h1, h2, h3, h4, h5, h6 {
	color: var(--text-temp);
  	font-family: var(--headingFont), sans-serif;
}
h1 {
	font-size: 1.5rem;
}
.h1Tagline {
	display: block;
	font: italic 1rem var(--subtitle), sans-serif;
	text-align: center;
}
.btn {
	cursor: pointer;
}

.a11yText {
	position: absolute;
	left: -200vw;
	height: .1px;
	width: .1px;
}

.quote {
	background: linear-gradient(to right, var(--pageColor-shade) 0%, var(--pageColor) 5%, var(--pageColor) 100%);
	box-sizing: border-box;
	color: #fff;
	display: block;
	font: bold 1.3rem var(--textFont);
	margin: 1rem 0;
	padding: 1.2rem 0 1.2rem 10vw;
	position: relative;
	text-align: center;
	width: 80vw;
}

.quote:after {
    border-top: 33px solid transparent;
    border-left: 40px solid var(--pageColor);
    border-bottom: 33px solid transparent;
    content: "";
    height: 0;
    position: absolute;
    margin: 0 1rem;
    right: -3.5rem;
    top: 0;
    width: 0;
}

.requiredWarning {
	color: #567aa7;
	display: block;
	font: italic .7rem var(--headingFont);
}

.emailError {
	color: var(--danger);
	font: 1.2rem var(--textFont);
}

.majorError-container {
	color: var(--danger);
	display: block;
	font: bold 1.3rem var(--textFont-bold), sans-serif;
	margin: 1rem 0;
	padding: 1rem;
	text-align: center;
}

.formNotice {
	font-family: var(--textFont);
}

.formNotice_InlineError {
	color: var(--danger);
	font: bold .95rem var(--textFont);
	position: absolute;
	top: -1rem;
}

.thx_readmore {
	font-family: var(--headingFont), sans-serif;
}

.a11y_labels {
	overflow: hidden;
	position: absolute;
	width: 0;
}

.a11y_labels label {
	position: absolute;
	right: -200vw;
}

.ext_link {
    height: 15px;
    width: 15px;
}


/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
3. Header & Nav Styles
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/

.mainHeader {
	background: var(--bg);
}
.headerLogo-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 4rem 0 2rem;
	top: 0;
	z-index: 30;
}

	.headerLogo-container:after {
		border-top: 3px solid var(--dark);
		content: "";
		height: 1px;
		margin: 1.5rem auto;
		width: 65vw;
	}

.headerLogo-logo, .headerLogo-header {
	display: block;
	text-align: center;
}


.headerLogo-header {
	color: var(--dark);
	font: bold 2.2rem var(--headingFont-bold), sans-serif;
	padding-top: .4rem;
	text-decoration: none;
	transition: opacity .2s;
}

.headerLogo-header:hover {
	opacity: .85;
}

.headerLogo-logo img{
	width: 2.5rem;
}

.homePage .headerLogo-logo img {
	width: 5rem;
}

.mainNav-container {
	height: .1px;
	overflow: hidden;
	position: relative;
}

.mainNav {
	background: var(--pageColor);
	display: flex;
	flex-direction: column;
	height: 100vh;
	padding: 4.5rem 1rem 1rem 2rem;
	position: fixed;
	right: -120vw;
	text-align: right;
	transition: right .6s;
	top: 0;
	width: 100vw;
	z-index: 15;
}

.mainNav-visible {
	position: fixed;
	right: 0;
}

.mainNav-link {
	color: #fff;
	font: 1.65rem var(--headingFont), sans-serif;
	margin: .25rem 0;
	padding: .5rem 1rem;
	position: relative;
	text-decoration: none;
}
	.mainNav-link:hover, .mainNav-link:active {color: var(--home-link);}
	.mainNav-link:after {
		border-top: 3px solid #fff;
		bottom: 4px;
		content: "";
		right: 1rem;
		position: absolute;
		transition: width .2s;
		width: 0;
	}
		.mainNav-link:hover:after {
			border-top: 3px solid #fff;
			bottom: 4px;
			content: "";
			right: 1rem;
			position: absolute;
			width: 3rem;
		}

.mainNav-link.currentPage {
	color: #fff;
	position: relative;
}

	.mainNav-link.currentPage:after {
		border-top: 3px solid var(--pageColor-link);
		bottom: 4px;
		content: "";
		right: 1rem;
		position: absolute;
		transition: width .2s;
		width: 3rem;
	}
	.mainNav-link.currentPage:hover:after {
		border-top: 3px solid var(--pageColor-link);
		bottom: 4px;
		content: "";
		right: 1rem;
		position: absolute;
		width: 0;
	}

.navBars {
	background: #fff;
	border-radius: 3rem;
	box-shadow: -1px 3px 2px rgba(63, 32, 0, .35);
	cursor: pointer;
	padding: .5rem 1.8vw .5rem 0;
	position: fixed;
	right: -1rem;
	stroke: var(--dark);
	top: 5vw;
	transition: stroke .6s, padding .4s, right .3s;
	transform: none;
	width: 4rem;
	z-index: 20;
}

.navBars-open {
	background: none;
	box-shadow: none;
	padding: .5rem 3vw .5rem 0;
	right: .5rem;
}

.navBars-open line {
	stroke: #fff;
}


/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
3a. Header Image Animations
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/

.headerImg-container {
	box-sizing: border-box;
	height: 48vw;
	margin: 1rem auto 2rem;
	padding: .5rem;
	position: relative;
	width: 80vw;
	/*height: 800px;*/
}

.headerImg-indi {
	bottom: 0;
    left: 1.5rem;
	position: absolute;
    top: unset;
}

.headerImg-indi:not(.headerImg-mobile) {
	display: none;
	cursor: pointer;
}


.headerImg-mobile {
	left: 0;
	position: absolute;
	top: -23vw;
}

.headerImg-textBox {
	background: var(--bg);
	background: var(--text-subtle);
	border-radius: 4px;
	overflow: hidden;
	opacity: 0;
	position: absolute;
	right: 0;
	top: -340px;
	width: 25vw;
	z-index: 8;
}

	.tBox-link {
		display: block;
	    font: 1.1rem var(--headingFont-bold);
    	margin-top: 1rem;
    	text-decoration: none;
    	width: auto;
	}

.turbines .headerImg-textBox {
	left: 90%;
	top: 45%;
}

.solarPanels .headerImg-textBox {
	top: -280px;
	right: -5vw;
}
.bucketSpout-container .headerImg-textBox {
	left: -10vw;
	right: unset;
}

.plants .headerImg-textBox {
	right: -30px;
	top: -270px;
}

.headerImg-textBox.headerImg-textBox_prepped {
	opacity: 1;
	width: 0;
}


	.headerImg-indi_hover .headerImg-textBox {
		width: 25vw;
	}

	.tBox-heading {
		border-bottom: 3px solid #fff;
		display: inline-block;
		font: bold 1.2rem var(--headingFont-bold);
		margin: 1rem;
		padding: 0 .5rem .15rem .1rem;
		white-space: nowrap;
	}

	.tBox-content {
		padding: 0 1rem 1rem;
		font: 1.05rem var(--subtitle), sans-serif;
		margin-bottom: 1rem;
	}

	.headerImg-container_hover [data-hoverable="true"] {
		opacity: .3;
	}

	.headerImg-container_hover [data-hoverable="true"].headerImg-indi_hover {
		opacity: 1;
		z-index: 12;
	}

[data-hoverable="true"] {
    transition: opacity .3s;
	z-index: 7;
}

.eShip {
	z-index: 6;
}

.turbines {
    height: 80%;
    width: 35%;
    z-index: 5;
}

.bucketSpout-container, .bucketSpout-container .spoutHandle, .bucketSpout-container .bucketSpout, .solarPanels, .plants {
    bottom: 1.5rem;
	position: absolute;
}

.bucketSpout-container {
    height: 185px;
	left: 12vw;
    width: 115px;
}

.bucketSpout-container .bucketSpout {
	width: 125px;
}


.water {
	animation: water_anim 6s infinite linear;
	background: lightblue;
	display: block;
	height: 0;
	position: absolute;
    transform: translate(64px, 49px);
    width: .5rem;
	will-change: transform;
	z-index: -1;
}

.handleBar {
	animation: handleBar_anim 6s infinite linear;
	background: linear-gradient(165deg, transparent 40%, rgba(140,140,140,1) 40%, rgba(140,140,140,1) 50%, transparent 50%);
	display: block;
	height: 3rem;
	position: absolute;
	right: -4rem;
   	transform: rotateZ(-45deg) translate(0, -9px);
	top: 0;
	width: 3rem;
	will-change: transform;
	z-index: -1;
}

.bucketSpout-container .spoutHandle {
	animation: handle_anim 6s infinite linear;
	box-shadow: 0 0 0 #000;
    left: unset;
    transform: rotateZ(0) translate(124px, -87px);
    transform-origin: top left;
    width: 65px;
	will-change: transform;
    z-index: 8;
}

.solarPanels {
    bottom: .75rem;
	left: 29vw;
    height: 135px;
    width: 250px;
}

.plants {
	height: 475px;
    left: unset;
	right: -20px;
	width: 520px;
}

.turbines {
	left: 11%;
	top: 5%;
}

.bucketSpout-SizeDiv {width: 125px;}


@keyframes water_anim {
	0% {
		height: 0;
		width: .2rem;
	}

	11% {
		height: 60px;
    	transform: translate(64px, 49px);
	}

	15% {
		height: 60px;
    	transform: translate(64px, 49px);
		width: .5rem;
	}

	43.5% {
		height: 60px;
    	transform: translate(64px, 49px);
	}


	47.5% {
		height: 48px;
    	transform: translate(64px, 100px);
	}


	50% {
		height: 48px;
    	transform: translate(64px, 100px);
	}

	100% {
		height: 48px;
    	transform: translate(64px, 100px);
	}
}

@keyframes handleBar_anim {
	10% {
   		transform: rotateZ(-45deg) translate(0, -9px);
	}
	14% {
   		transform: rotateZ(-45deg) translate(16px, -13px);
	}

	32% {
   		transform: rotateZ(-45deg) translate(16px, -13px);
	}

	48% {
   		transform: rotateZ(-45deg) translate(0, -9px);
	}


}


@keyframes handle_anim {
	0% {
    	transform: rotateZ(0) translate(124px, -87px);
	}

	12.5% {

    	transform: rotateZ(-40deg) translate(140px, 18px);
	}

	37.5% {
    	transform: rotateZ(-40deg) translate(140px, 18px);
	}

	50% {
    	transform: rotateZ(0) translate(124px, -87px);
	}
}


/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
4. Main Body Content
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
.cursor-container {
	position: relative;
	overflow: hidden;
}
.cursor {
	cursor: pointer;
	display: none;
	position: absolute;
	left: 200vw;
	transition: all .3s;
    z-index: 10;
}

.mainContent_subOpen .cursor {
	--cursorColor: #23336A;
	--cursorColor-shade: #23336A;
    left: .3vw;
    /*opacity: .1;*/
    transform: scaleX(-1);
    width: 1.5rem;
}

.teamPage .cursor {
	display: none;
	left: 400px;
	top: 4rem;
}

.mainContent {
	background: var(--bg);
	margin-bottom: .5rem;
	transition: padding-left .5s;
}

#mainContent.mainContent_subOpen {
	padding-left: 25vw;
}

.mainContent-wrapper {
	background: rgba(255,255,255,.1);
	padding: 0 0 2rem;
	margin: 0 4vw 50px;
	position: relative;
	z-index: 2;
}

.mainHeading_Container {
	position: relative;
	overflow: hidden;
}

.mainHeading_Container h1 {
	position: absolute;
	left: 200vh;
}

.mainSection-heading, .mainHeading_Container .mainHeading {
	background: linear-gradient(to right, var(--pageColor-shade) 0%, var(--pageColor) 5%, var(--pageColor) 100%);
	color: #fff;
	font: bold 1.7rem var(--headingFont-bold), sans-serif;
	padding: 1rem;
	text-align: center;
}

.mainHeading_Container .mainHeading {font-size: 2.25rem;}

.homeMainContent.mainContent{margin-top: 0;}

.homeMainContent .mainHeading {
	display: none;
}

.mainSection-content {
	font: 1.2rem/185% var(--textFont), sans-serif;
	padding: 1.5rem;
}
	.mainSection-content p {
		margin: 1.5rem 0;
	}
	.mainSection-content>p:first-of-type{
		margin-top: 0;
	}
	.mainSection-content ul {
		padding-left: 1.5rem;
	}
		.mainSection-content li, .readArticle-content li {
			position: relative;
		}
		.mainSection-content li:before, .readArticle-content li:before {
			color: var(--pageColor-link);
			content: '>';
			left: -1rem;
			position: absolute;
		}

.mainSection-readMore {text-decoration: none}

.mainSection-readMore, .tBox-link {
	position: relative;
}
/*	.mainSection-readMore:after {
		content: ">>";
		right: -1.5rem;
		position: absolute;
		top: -3px;
	}
*/
	.mainSection-readMore:before, .tBox-link:before {
		background: var(--link-hover);
		bottom: -3px;
		content: "";
		height: 3px;
		left: 0;
		padding: 0 0;
		position: absolute;
		transition: padding .3s;
	}
		.mainSection-readMore:hover:before {
			padding: 0 50% 0 50%;
		}

/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
5. Page Styles
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
/* ===== FAQ ============================== */
.faqPage .mainSection-heading {
	background: none;
	color: #567aa7;
	transition: color .2s ease-out;
}
	.faq_open .mainSection-heading, .faqPage .mainSection-container:hover .mainSection-heading {color: #fff;}

.faqPage .mainSection-container {
	border-bottom: .25rem solid var(--pageColor);
}

.faqPage .mainSection-content {
	height: 0;
	overflow: hidden;
	padding: 0 0 0 1rem;
	transition: height .5s;
}

	.faq_open .mainSection-content{
		padding: 1rem;
		transition: height .5s;
	}

.faqPage .mainContent-wrapper {
	padding: 0;
}

/*.mainSection-container {border-bottom: .4rem solid var(--pageColor);}*/
.mainSection-container:last-of-type {border-bottom: none;}
.faqHeadingArrow-container {
	align-items: center;
	cursor: pointer;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.pointArrow {
	border-top: 15px solid transparent;
	border-left: 20px solid #fff;
	border-bottom: 15px solid transparent;
	height: 0;
	margin: 0 1rem;
	transition: transform .5s;
	width: 0;
}

.faq_open .pointArrow {
	transform: rotate(90deg);
}


/* ===== CONTACT PAGE ============================== */
.contactPage .mainContent-wrapper {
	padding-top: 1rem;
}

.contactSidebar-container {
	background: var(--pageColor);
	border-left: .5rem solid var(--pageColor);
	color: #fff;
	display: none;
	max-width: 30vw;
	padding: 1rem;
	position: absolute;
	right: 0;
	top: 3rem;
}

.contactSidebar-header {
	color: #fff;
	font: bold 1.3rem var(--headingFont-bold);
	padding: 1rem 0;
}

.contactSidebar-IconText {
	align-items: center;
	display: flex;
	flex-direction: row;
	font: 1rem var(--textFont);
	justify-content: left;
	padding: 1rem .5rem;
}

	.contactSidebar-container svg {
		fill: #fff;
		width: 4rem;
		transition: color .1s;
	}


	.contactSidebar-secondLineText {
		display: block;
	}

.contactSidebar-container a {
	color: #fff;
	transition: color .1s;
}
	.contactSidebar-email-container:hover *, .contactSidebar-phone-container:hover *, .contactSidebar-home-container:hover * {
		color: var(--pageColor-link);
		fill: var(--pageColor-link);
	}


/* ===== NEWSFEED ============================== */
.mainContent.newsPage {
	padding: 0 5vw;
}

.newsPage .mainContent-wrapper {
	background: none;
}

.indiArticle {
	background: rgba(255,255,255,.1);
	border-top: var(--pageColor) solid .5rem;
	display: flex;
	flex-direction: column;
	padding: 1rem;
}

.js-enabled .indiArticle {
	margin-top: 5rem;
	opacity: 0;
}

.indiArticle-animate {
	animation: article_fade_in .75s forwards;
}

@keyframes article_fade_in {
	0% {
		margin-top: 5rem;
		opacity: 0;
	}

	100% {
		margin-top: 1rem;
		opacity: 1;
	}
}

.fbShareBtn-container {
	display: block;
	margin: 2rem auto 1rem;
	text-align: center;
}

.readArticle .error {
	text-align: center;
    padding-top: 2rem;
}


.readArticle-category, .readArticle-date {
	display: block;
	font: 1.3rem var(--headingFont);
	padding: 1rem 0;
	text-align: center;
}

.readArticle-date {
	font-size: .9rem;
	margin-bottom: 2rem;
}

.readArticle-imgContainer {
	display: block;
	margin: .5rem auto 2rem;
	text-align: center;
	min-width: 280px;
	width: 85vw;
}

.readArticle-img {
	min-width: 280px;
	width: 85vw;
}

.readArticle-content {
	font: 100%/170% var(--textFont);
	padding: 1rem 5vw 0;
}

.readArticleHeading {
	padding-top: 2rem;
	font: bold 1.2rem/170% var(--headingFont-bold);
	text-align: center;
}

.readArticleh2 {font-size: 1.5rem;}
.readArticleh3 {font-size: 1.35rem;}
.readArticleh4 {font-size: 1.15rem;}
.readArticleh5 {font-size: 1.05rem;}
.readArticleh6 {font-size: 1rem;}

.readArticle-content p {
	padding: 1rem;
	text-indent: 1rem;
}
.readArticle-content ul, .readArticle-content ol {
	padding: 1rem .5rem 1rem 2.25rem;
}

.readArticle-content li {
	padding: .5rem 0;
}

.indiArticle:first-of-type {border: none;}
.indiArticle-description {
	padding: .5rem 1rem 1rem .5rem;
}
.indiArticle-img {
	display: none;
	max-width: 450px;
	width: 100%;
}

.indiArticle-readMore {
	font: bold 1rem var(--headingFont-bold);
	text-decoration: none;
}

.indiArticle-category {
	color: var(--pageColor-link);
	font: bold 1rem var(--headingFont-bold);
	text-decoration: none;
}

.indiArticle-titleLink {
	text-decoration: none;
}

.indiArticle-titleText {
	color: #fff;
	font: bold 1.5rem var(--headingFont-bold);
	padding: 1rem 0;
}

.indiArticle-date {
	font-size: .95rem;
}

.categoryReadBtn-container {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}


.filterBtn, .filterBtn svg {
	background: var(--pageColor-link);

	cursor: pointer;
	height: 2rem;
	fill: #fff;
	padding: 1rem 2.5vw 1rem .5vw;
	position: fixed;
	right: 0;
	top: 5rem;
    transition: padding .3s;
	width: 3rem;
}


	.filter-container_open .filterBtn {
		padding: 1rem 0.5vw 1rem .5vw;
	}

.filter-heading {
	font: 1.35rem var(--headingFont);
	margin: 0 auto;
	text-align: center;
}

.filter-container {
	background: var(--pageColor);
    border-left: var(--pageColor-link)  solid 1.1rem;
	box-sizing: border-box;
	color: #fff;
	display: none;
	max-width: 320px;
	padding: 2.25rem 5.5rem 1rem 2rem;
	position: fixed;
	right: -50vw;
	transition: right .5s;
	top: 5rem;
	width: 100%;
	z-index: 5;
}

.filterBtn path {
	fill: #fff;
}

.filter-container_open {
	right: 0;
}

.filter-container_open .filterBtn path {
	stroke: #fff;
	stroke-width: 1rem;
}

div.readArticle {
	min-height: 50vh;
}

.multiContentPage-inlineImg {
	margin: 0 0 0 20px;
    max-width: 200px;
    float: right;
}

.interactiveSubheadings-container {
	color: transparent;
	font: italic 1.2rem var(--subtitle);
	position: absolute;
	text-align: center;
	top: 25vh;
	transition: top .65s;
	left: -50%;
}

	.multiContentPage .interactiveSubheadings-container {
		top: 13vh;
	}

	.mainContent_subOpen .interactiveSubheadings-container {
		color: #fff;
		left: 3vw;
	}

.interactiveSubheadings-heading {
	border-bottom: 1.2px solid transparent;
	font: bold 1.4rem var(--headingFont);
	margin-bottom: 1rem;
	padding-bottom: .25rem;
}

	.mainContent_subOpen .interactiveSubheadings-heading {
		border-color: #fff;
	}
.interactiveSubheading {
	cursor: pointer;
	margin: 1rem 0;
	position: relative;
}

.interactiveSubheading:after {
	border-top: 2px solid #fff;
	bottom: -.2rem;
	content: "";
	height: 0;
	left: -.25rem;
	padding: 0;
	position: absolute;
	transition: width .3s;
	width: 0;
}

.interactiveSubheading:hover:after {
	width: calc(100% + .5rem);
}

.resourcesList a {
	text-decoration: none
}
.dateSource-info {
	font-size: .92rem;
	margin-left: 1rem;
}


/* ===== TEAM PAGE ============================== */
.teamPage .mainContent {
	padding: 0;
}

.teamPage .mainContent-wrapper {
	background: none;
}
.teamPage .mainSection-container {
	border-top: 1.5rem solid var(--pageColor-shade);
	display: flex;
	flex-direction: column;
	padding: 0;
}

.teamPage #mainSection-one .portrait-container {
	padding-top: 3rem;
}

.teamPage .mainSection-content {
	padding: .5rem 4vw 5.5rem;
	background: rgba(255,255,255,.1);
}

.teamPage .mainSection-heading {
	background: none;
	padding: 0;
    margin-left: -5vw;
    width: 95vw;
}

.portrait {
	display: inline-block;
	width: 250px;
}

.portrait-container {
    background: rgba(255, 255, 255, .1);
	box-sizing: border-box;
	display: block;
	margin: 0;
	padding: 5rem 0 1rem;
	text-align: center;
	width: 100%;
}

.role {
	color: var(--text-subtle);
	font: bold 1.1rem var(--headingFont-bold), sans-serif;
	padding: 1rem 0;
	text-align: center;
}

.teamPage .description {
	padding: 1rem;
}

.teamPage .portfolioLink {
	display: block;
	font: bold 1.3rem var(--headingFont-bold), sans-serif;
	text-align: center;
	text-decoration: none;
}


/* ===== THANK YOU PAGE ============================== */
.thxPage p {
	text-indent: 0
}

.thxPage .mainContent-wrapper{
	min-height: 55vh;
}
.thxPage .mainSection-heading {
	display: none
}


/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
6. Form Styles
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/

.form-container {
	padding: 0 1rem 1rem;
}

.form-container label, .form-label {
	color: var(--dark);
	font: bold 1.3rem var(--headingFont-bold);
	padding: 1rem 0;
}

.form-container input, .form-container textarea {
	background: #fff;
	/*border: 2px solid var(--formBorder);*/
	border-radius: 2px;
	border: none;
	color: var(--pageColor-shade);
	padding: .5rem .75rem;
}

.form-container .cf_joinChoice-input {border: none}

.form-container textarea {
	border-radius: 2px;
	border: none;
	max-width: 90vw;
	min-height: 200px;
	min-width: 250px;
	padding: 1rem;
	width: 80vw;
}

.cf_inputLabel-container {
	display: flex;
	flex-direction: column;
	margin: 1rem 0;
	position: relative;
}

	.cf_joinChoice-container {
		display: flex;
		flex-direction: column;
		margin: .5rem auto 0;
	}

		.cf_joinChoice-indiContainer {
			display: flex;
			flex-direction: row;
			padding: .5rem;
			position: relative;
		}
		.cf_joinChoice-input {
			margin-right: 1rem;
			transform: scale(.2);
		}
		.cf_joinChoice-text {
			color: var(--text-subtle);
			cursor: pointer;
			font: 1.3rem var(--headingFont);
		}

.customRadioBtn {
	background: #fff;
	border: 2px solid var(--text-subtle);
	border-radius: 50%;
	height: 20px;
	position: absolute;
	left: 0;
	top: 6px;
	width: 20px;
}

.checkedCustomRadioBtn {
	background: var(--pageColor-link);
	border-color: var(--pageColor-link);
}

.cf_msg-container {
    align-items: center;
	display: flex;
    flex-direction: column;
    margin-bottom: 3rem;
    position: relative;
}

#characterCounter {
	background: rgba(255,255,255,.94);
	border-top: 1px solid var(--text-subtle);
	border-bottom: 1px solid var(--text-subtle);
	box-sizing: border-box;
	color: var(--text-subtle);
	display: block;
	padding: .5rem 1rem;
	position: relative;
	margin: -3.25rem 0 0;
	max-width: 90%;
	text-align: center;
}

.form-container .cf_btn {
	background: var(--pageColor);
	border: 3px solid transparent;
	border-radius: 5px;
	color: #fff;
	display: block;
	font: bold 1.5rem var(--headingFont-bold);
	margin: 0 auto;
	padding: .75rem 1rem;
}

.form-container .cf_btn:hover, .form-container .cf_btn:active {
	background: #fff;
	border: 3px solid var(--pageColor);
	color: var(--pageColor);
}

#cf_submit {
    min-width: auto;
    width: 12rem;
}

.newsfeedFilter-form {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.filter-dateSelect, .filter-categorySelect {
	box-sizing: content-box;
	font-size: 1.15rem;
	margin: 0 auto;
	padding: .25rem .5rem .25rem .5rem;
	position: relative;
}

.filter-dateSelect:after, .filter-categorySelect:after {
	content: '';
	border: solid black;
	border-width: 0 3px 3px 0;
}
.filter-categorySelect, .filter-dateSelect {
	background: #fff;
	border: solid #fff 2px;
	border-radius: 2rem;
	color: var(--pageColor);
}

.filter-categorySelect {
	width: 10rem;
}

.filter-dateSelect-container, .filter-categorySelect-container {
	margin: 1rem auto;
	position: relative;
}
.filter-categorySelect-container {
	margin-top: 0
}

.filter-arrow, .arrow {
  border: solid #fff;
  border-width: 0 2px 2px 0;
  cursor: pointer;
  display: inline-block;
  height: .15rem;
  padding: 3px;
  transform: rotate(45deg);
  width: .15rem;
}

.filter-arrow {
	position: absolute;
	right: .8rem;
	top: .72rem;
}

.filter-categorySelect-container .filter-arrow {
	border-color: var(--pageColor)
}

.filterSubmitBtn {
	background: #fff;
	border: 4px solid transparent;
	border-radius: 2rem;
	color: var(--pageColor);
	font: bold 1.5rem var(--headingFont-bold);
	margin: 1rem auto;
	padding: .25rem .5rem;
	width: 6.5rem;
}

	.filterSubmitBtn:hover, .filterSubmitBtn:focus, .filterSubmitBtn:active {
		background: rgba(255,255,255,.25);
		border: solid #fff 4px;
		color: #fff;
	}

.noArticles_error {
	font: bold 1.5rem var(--headingFont-bold);
	padding: 10vh 5vw 15vh;
}


/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
7. Footer Content
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/

.mainFooter {
	background: var(--bg-footer);
	color: #fff;
	padding: 2rem .65rem;
	position: relative;
	font: 1.15rem/155% var(--textFont), sans-serif;
	z-index: 2;
}

	.f_heading {
		color: #fff;
		font: 2rem/100% var(--headingFont-bold), sans-serif;
		margin: 0 0 1rem;
	}

#f-container {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  /*padding: 2.5rem 3rem;*/
}

/* ===== UNIVERSAL ============================== */
.f-box {
  display: flex;
  flex-direction: column;
  padding: 2.5rem 0 2rem;
  text-align: center;
}

.f-box:first-of-type {padding-top: 1rem;}
.f-box:first-of-type {padding: 1rem 5vw 2rem;}
.f-box:first-of-type p {padding: 0 4.5vw;}


/* ===== INDIVIDUAL BOXES ============================== */
.f_teamBlurb-container .f_heading, .f_teamBlurb-link {
	margin: 1rem 3.2vw;
	padding: 0;
}

.f_teamBlurb-container .f_heading, .f_teamBlurb, .f_teamBlurb-link {
	text-align: left;
}

.f_teamBlurb {
	margin: .4rem auto;
	max-width: 85vw;
}
	.f_teamBlurb-link {
		color: var(--pageColor-link);
		font: 1.4rem var(--textFont), sans-serif;
	}
	.f_teamBlurb-link:hover {
		color: #fff;
	}

.f_emailInput-container {
	display: inline-block;
	margin: 0rem auto 1rem;
	position: relative;
}
	.f_emailInput-container .emailInput {
		background: rgba(255,255,255,.2);
		border: #fff solid 2px;
		border-radius: 2rem;
	    box-sizing: content-box;
		color: #fff;
		display: block;
		height: 1.3rem;
		padding: .65rem 3.5rem .65rem 1.1rem;
		margin: 1rem auto 1rem;
		max-width: 95vw;
	}
		.f_emailInput-container .emailInput::placeholder {
			color: #fff;
		}

.f_emailInput-container .emailInput:focus {
	border: 2px solid red;
}
.f_newletter-form {
	display: flex;
	flex-direction: column;
}

.f_newsletter-btn {
	background: #fff;
	border: none;
	border-radius: 0 2rem 2rem 0;
	box-sizing: content-box;
	cursor: pointer;
	height: 1.5rem;
	padding: .5rem 1rem .75rem .6rem;
	position: absolute;
	right: 0;
	top: 1rem;
}
	.f_plusIcon {
		position: relative;
		top: 3px;
	}
	.f_plusIcon path{
		stroke: var(--bg);
		stroke-width: 6px;
	}


.f_socialLinkIcon-container {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	margin: 0 auto;
	width: 280px;

}
	.f_socialLinkIcon {
		text-decoration: none;
	}

	.f_inIcon {
		height: 65px;
		width: 65px;
	}


.f_contactInfo-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 0 auto;
	padding: 1rem 0;
}
	.f_contactInfo-box {
		align-items: center;
		display: flex;
		flex-direction: row;
		justify-content: left;
		margin: 1rem 0;
	}
		.f_contactInfo-icon {
			padding-right: 1rem;
			height: 3rem;
			width: 3rem;
		}
		.f_contactInfo-icon path {
			fill: #fff;
			stroke: #fff;
		}

.f_copyright-container {
	display: block;
	font-size: .9rem;
	margin: 0;
	text-align: center;
}

.f_newsletter-form {
	display: flex;
	flex-direction: column;
}

.bpaChapterInfo-container {
    bottom: -2rem;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	margin: 0 auto;
	max-width: 90vw;
	position: relative;
	width: 100%;
}

.bpaChapterInfo-container>* {margin: 0 auto;}

.bpa-arrow {
	position: relative;
	margin: .7rem 1rem .5rem 0;
	transition: all .3s,z;
	transform: rotate(-135deg);

}
.bpa-arrow_turned {
	top: -5px;
	transform: rotate(45deg);
}


.bpaChapterInfoHead-container {
	background: var(--bg-footer);
	cursor: pointer;
	display: flex;
	flex-direction: row;
	justify-content: center;
	width: 300px;
}

.bpaChapterInfo-content {
	height: 0;
	overflow: hidden;
	padding: 0 1rem 0;
	transition: height .3s;
    width: 270px;
}

.bpaChapterInfo-content_open {
    /* padding: .5rem 2rem 1.5rem 3.25rem; */
    padding:  .5rem 0 1.5rem 1rem;
    height: 8.75rem;
}

/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
8. @Media Queries
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
/* ===== PHONE ============================== */
@media screen and (max-width: 649px) {
	.headerLogo-logo img {
		width: 4rem;
	}

	.multiContentPage-inlineImg {
		max-width: 150px;
	}
}


/* ===== TABLET ============================== */
@media screen and (min-width: 650px) {
	.mainContent {
		margin: 0 2vw;
	}
	.mainNav {
		width: 14rem;
	}
	.homeMainContent .mainHeading {
		display: block;
	}

	.headerLogo-container {
		flex-direction: row;
		justify-content: flex-start;
		padding: .85rem .65rem .65rem;
	}

	.headerImg-container {
		margin-bottom: 5.5rem;
	}

	.headerImg-mobile {
		top: -12vw;
	}

	.headerLogo-logo, .headerLogo-header {text-align: left;}
	.headerLogo-container .headerLogo-logo img {
		margin: .65rem 1rem;
	}

	.headerLogo-logo {margin-top: -.25rem;}

	.homePage .headerLogo-logo img {
		width: 2.5rem;
	}
	.mainHeading_Container .mainHeading {
		position: relative;
		left: auto;
	}

	.navLogo-container {
	}

	.navBars {
		top: 1.8rem;
	}

	.navBars-open {
		right: -1.8vw;
	}

	.mainSection-container {
		align-items: center;
		padding: 1rem 4vw 2rem;
		position: relative;
	}
	.headerLogo-container:after {
		width: 	0;
	}

		.mainSection-container:before {
		    background: linear-gradient(to right, var(--pageColor-shade) 0%, var(--pageColor) 5%, var(--pageColor) 100%);
			bottom: 0;
			content: "";
			height: 1.5rem;
			left: 0;
			padding: 0 50%;
			position: absolute;
			transition: padding .3s;
		}

		.mainSection-container:last-of-type:before {
			padding: 0;
		}

	.mainSection-heading {
		background: none;
		color: var(--dark);
		text-align: left;
	}

	.mainSection-content {
		padding-left: 4rem;
	}

	.cursor-container {
		overflow: visible;
	}

	.cursor {
		left: 2vw;
		top: .5rem;
		transition: top .5s;
		width: 1.75rem;
	}

	.multiContentPage-inlineImg {
		max-width: 300px;
	}


	.indiArticle {border: none;}
	.indiArticle-content {
		padding: 2rem;
		width: 500px;
	}
	.indiArticle .mainSection-container {padding-top: 1rem;}

	section.readArticle {min-height: 350px;}
	.readArticle-imgContainer {
		box-sizing: content-box;
		float: right;
		margin: 2rem;
	}

	.readArticleHeading {
		padding-top: 1rem;
		text-align: left;
	}

	.readArticle-date {margin-bottom: 0}

	.readArticle-img, .readArticle-imgContainer {
		max-width: 33vw;
	}
	.readArticle-hr {
		display: none;
	}



	.fbShareBtn-container {
	    bottom: 0;
	    left: 0;
	    padding: 0 0 0 5vw;
	    position: absolute;
	    text-align: left;
	}

	.cf-container {
	    margin: 0 auto;
		max-width: 50rem;
		padding: .5rem 3rem;
	    padding-right: 3rem;
	}

	.cf_inputLabel-container:not(.cf_msgCounter-container):not(.cf_joinNewsletter-container) {
		align-items: center;
		flex-direction: row;
	}

	.cf_inputLabel-container {
		margin: 2rem 0;
	}

	.cf_joinChoice-container {
		flex-direction: row;
		margin: 1rem 2rem;
	}

	.cf_joinChoice-indiContainer {
		margin-right: 1rem;
	}

	.requiredWarning {position: absolute;}

	.equalWidthContainer {
		display: grid;
		grid-template-columns: 5rem 1fr;
		grid-template-areas: 'label input';
	}

	.teamPage .mainSection-heading {
		margin: 0;
		text-align: center;
		width: auto;
	}

	.teamPage .description {
		padding: 1rem 13vw;
	}

	.teamPage .portrait-container {
		padding-top: 3.5rem;
	}

	.teamPage .mainSection-content {
		padding: .5rem 0 3rem;
	}

	.cf_msgCounter-container label, .form-label {
		padding-bottom: 2rem;
	}

	.form-container input:not([type="radio"]) {
		max-width: 25rem;
		min-width: 280px;
		width: 100%;
	}

	.form-container textarea {
		min-width: 300px;
		width: 97%;
	}

	.form-container label, .form-label {grid-area: label}
	.form-container input {grid-area: input}

	.f_teamBlurb-container .f_heading, .f_teamBlurb-link {
		margin: 1rem 4.7vw;
		padding: 0;
	}

	.bpaChapterInfo-container {
		max-width: 400px;
	}

	.bpaChapterInfo-content_open {
	    padding: .5rem 2rem 1.5rem 3.25rem;
	}
}


/* ===== COMPUTER ============================= = */
@media screen and (min-width: 750px) {

	.mainContent {
		padding-left: 3rem;
		position: relative;
	}
	.mainHeading_Container .mainHeading {
		font-size: 3rem;
	}

	.mainHeading {
		font-size: 2.2rem;
		margin-top: 50px;
	}

	.mainSection-container {
		padding: 1.5rem 4vw 2.5rem;
	}

	.cursor {
		top: 1rem;
	}

	section.readArticle {min-height: 500px;}
	.filter-arrow {border-width: 0;}

	.f_copyright-container {
		bottom: 4px;
		display: block;
		font-size: .9rem;
		left: 8px;
		position: absolute;
		margin: 0;
		text-align: left;
	}

	#f-container {
		display: grid;
		grid-template-areas:
		'f_teamBlurb f_teamBlurb'
		'f_newsLetter f_contactInfo';
	}

	.f_newsLetter-container {
		grid-area: f_newsLetter;
	}

	.f_teamBlurb-container {
		grid-area: f_teamBlurb;
	}

	.f_contactInfo-container {
		grid-area: f_contactInfo;
	}

	.mainFooter {
		padding-bottom: 0;
	}

	.bpaChapterInfo-container {
	    bottom: 0;
	}

}


/* ===== XL COMPUTER ============================== */
@media screen and (min-width: 1200px) {

	.navBars {
		display: none;
	}

	.mainNav-link.currentPage {
		color: var(--pageColor-link);
	}

	.mainContent {
		margin-top: 4rem;
	}

	.headerImg-container {
		height: 875px;
    	margin: -20px auto 0;
		max-height: 100%;
		position: relative;
	    transition: opacity .3s;
		width: 1080px;
	}

			.headerImg-indi:hover:after {
				background: yellow;
				content: "";
				height: 100%;
				width: 100%;
			}

	.turbines {
	top: 14%;
	}

	.headerImg-container .headerImg-indi {display: block;}
	.headerImg-container .headerImg-mobile {display: none;}

	.mainHeader {
		height: 5.5rem;
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		z-index: 15;
	}

	.headerLogo-container {
		border-bottom: none;
		position: fixed;
	}

	.mainNav-container {
		height: 3.5rem;
		position: absolute;
		right: auto;
	}

	.mainNav {
		background: none;
		flex-direction: row;
		height: 2.1rem;
		padding: 0 .3rem 0 0;
		right: 0;
		top: 1.4rem;
		width: auto;
	}

		.mainNav-link {
			color: var(--text-subtle);
			font-size: 1.35rem;
			height: 1.5rem;
			padding: .5rem;
			transition: padding .3s;
			width: auto;
		}

			.mainNav-link.currentPage:after {
				width: 0;
			}

			.mainNav-link:after, .mainNav-link:hover:after  {
				border-top: 3px solid #394d92;
				bottom: 4px;
				content: "";
				left: .7rem;
				position: absolute;
				transition: width .25s;
				width: 0;
			}

			.mainNav-link:hover:after {
				width: calc(100% - 1.4rem);
			}

	.cursor {
		display: block;
		top: 3rem;
	}
	.mainSection-container {
		padding: 3.5rem 4vw 5.5rem;
	}

	.faqPage .mainSection-container {
		padding: 1.5rem 4vw 2rem;
	}

	.faqPage .mainSection-container:before {
		height: .5rem;
	}

	.contactSidebar-container {
		display: block;
	}

	.filter-container {display: block}
	.filterBtn, .filter-container {
		top: unset;
	}


	.newsPage .mainContent-wrapper {
		display: flex;
		flex-wrap: wrap;
		justify-content: left;
	}

	.readArticle .error {padding-top: 0;}

	.majorError-container {
    	margin: 1rem 0 0;
	}

	.formNotice_InlineError {
	    top: -.8rem;
	}

	.indiArticle {
		padding: 2.5rem 1vw 3.5rem;
		margin: 1rem auto;
	}
	.indiArticle:before {
		display: none;
	}
	.indiArticle-content {
	    box-sizing: border-box;
	    padding: 2rem 2rem 0;
	}

	.teamPage .cursor {
		display: block;
	}
	.teamPage .mainHeading_Container {
		padding-left: 400px;
	}

	.teamPage .mainContent-wrapper {
		padding-bottom: 0;
	}
	.teamPage .mainSection-container {
		display: grid;
		grid-template-columns: 400px 1fr;
		grid-template-areas: 'img content';
	}

	.teamPage .portrait-container {
		background: none;
		grid-area: img;
	}

	.teamPage .mainSection-container:first-of-type .mainSection-content {
		padding-top: 5.5rem;
	}

	.teamPage .mainSection-heading, .teamPage .role, .teamPage .portfolioLink {
		text-align: left;
	}

	.teamPage .mainSection-content {
		padding: 4rem;
		grid-area: content;
	}

	.teamPage .mainSection-container:before {
		height: 1rem;
		left: unset;
		padding: 0 calc(50% - 200px);
		right: 0;
	}

	.teamPage .mainSection-container:last-of-type:before {
		display: none
	}

	.teamPage .description {
	    padding: 1rem 1.75rem;
	}

	.teamPage .portrait {
    	margin-top: -3rem;
		max-width: 250px;
		width: 100%;
	}

	#f-container {
		display: grid;
		grid-template-areas:
		'f_teamBlurb f_newsLetter f_contactInfo';
		grid-template-columns: repeat(3, 1fr);
	}

	.f_teamBlurb-container .f_heading, .f_teamBlurb-link {
		margin: 1rem;
		padding: 0;
	}

	.f_teamBlurb {
		padding-left: 1rem;
	}

	.f_teamBlurb-container {
		margin: 0 auto;
		max-width: 25vw;
	}
	.f_contactInfo-container {
		justify-content: flex-start;
	}

	.f-box:first-of-type {padding: 1rem 0 2rem;}
	.f-box:first-of-type p {padding: 0 1rem;}
}

@media screen and (min-width: 1400px) {
	.headerImg-container {
		height: 875px;
    	margin: 4rem auto 0;
		max-height: 100%;
		position: relative;
	    transition: opacity .3s;
		width: 1300px;
	}

	.mainNav-link {
		padding: .5rem 1rem;
	}

	.solarPanels {
		left: 410px;
	}

	.bucketSpout-container {
		left: 168px;
	}
	.mainContent_subOpen .cursor {
		left: .75vw
	}

	.turbines {
	top: 5%;
	}

}

@media screen and (window.devicePixelRatio > 1) {
	.turbines .headerImg-textBox {
		left: 90%;
		top: 65%;
	}

}

@supports (-ms-ime-align:auto) {
	.cursor {
		display: none;
	}
}