/*
	
	ECOTONE
	9/30/2021

	COLORS
	
		RED: #DC5038
		NAVY: #002E4A
		
		MINT: #DBEFB0
		ORANGE: #E5AA60
		
		FOREST: #474623

*/

@font-face
{
  font-family: 'Mabry_Pro';
  src: url('fonts/Mabry_Pro.otf') format('opentype');
  font-weight: normal;
}
@font-face
{
  font-family: 'Mabry_Pro';
  src: url('fonts/Mabry_Pro_Medium.otf') format('opentype');
  font-weight: 500;
}
@font-face
{
  font-family: 'Mabry_Pro';
  src: url('fonts/Mabry_Pro_Bold.otf') format('opentype');
  font-weight: 700;
}
@font-face
{
  font-family: 'Mabry_Pro';
  src: url('fonts/Mabry_Pro_Black.otf') format('opentype');
  font-weight: bold;
}


:root
{
	--black: #000;
	
	--red: #DC5038;
	--navy: #002E4A;
	
	--mint: #DBEFB0;
	--orange: #E5AA60;
	
	--forest: #474623;

	--lightGray: #f2f3f4;

	--white: #fff;
}


html, body
{
	margin: 0;
	border: 0;
	padding: 0;
	
	font-family: 'Mabry_Pro', arial, sans-serif;
	font-weight: normal;
	font-size: 100%;
	
	color: var(--black);
	background-color: var(--navy);
}

.clearLeft { clear: left; }
.clearRight { clear: right; }

/* clearfix */
.cf:before, .cf:after { content: ""; display: block; }
.cf:after { clear: both; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
{
	display: block;
}

h1, h2, h3, h4, h5
{
	font-weight: normal;
	margin: 0;
}

h1
{
	font-size: 3.125em;
	font-weight: normal;
}

h2
{
	font-size: 2em;
	font-weight: normal;
}

p
{
	/*font-size: 1.125em;*/
	font-size: 1.5em;
	line-height: 160%;
}

input[type=text], textarea
{
	width: 100%;
	box-sizing: border-box;
	
	padding: 1em;
	border: 3px solid var(--navy);
	margin-bottom: 1.25em;
	
	font-family: 'Mabry_Pro', arial, sans-serif;
	font-size: 1em;
	
	color: var(--navy);
	background-color: var(--mint);
}

textarea
{
	height: 15em;
}

	::placeholder
	{
		/* Chrome, Firefox, Opera, Safari 10.1+ */
		color: var(--forest);
		opacity: 1; /* Firefox */
	}

	:-ms-input-placeholder
	{
		/* Internet Explorer 10-11 */
		color: var(--forest);
	}

	::-ms-input-placeholder
	{
		/* Microsoft Edge */
		color: var(--forest);
	}




#navWrapper
{
	position: fixed;
	top: 0;
	z-index: 9999;
	
	width: 100%;
	box-sizing: border-box;
	padding: 1em 0;
	
	color: var(--mint);
	background-color: var(--navy);
}

	#navigation
	{
		max-width: 81.625em;
		box-sizing: border-box;
		
		padding: 0 1.25em;
		margin: 0 auto;
	}
	
		#navigation ul
		{
			float: right;
			
			padding: 0;
			margin: 0;
			
			list-style: none;
		}
		
		#navigation ul li
		{
			display: inline-block;
			text-transform: uppercase;
			
			margin-left: 4.5em;
			margin-top: .75em;
			
			transition: all .1s ease;
			cursor: pointer;
		}
		
			#navigation ul li a
			{
				color: var(--mint);
				text-decoration: none;
				transition: all .1s ease;
			}
			
				#navigation ul li a:hover
				{
					color: var(--red);
				}
		
	#mobileNav
	{
		display: none;
		
		height: 100vh;
		
		margin: 0;
		padding: 5em 2em 3em 2em;
		background-color: var(--navy);
		
		text-align: center;
		
		list-style-type: none;
	}
	
		#mobileNavButton
		{
			display: none;
			position: relative;
			top: .75em;
			
			float: right;
			
			width: 1.25em;
		}

		#mobileNav ul
		{
			width: 100%;
			box-sizing: border-box;
			
			padding: 0;
			margin: 0;
			
			list-style: none;
		}
		
		#mobileNav ul li
		{
			display: list-item;
			margin: 2em 0;
			text-transform: uppercase;			
			transition: all .1s ease;
			cursor: pointer;
		}
		
			#mobileNav ul li a
			{
				color: var(--mint);
				text-decoration: none;
				transition: all .1s ease;
			}
			
				#mobileNav ul li a:hover
				{
					color: var(--red);
				}
		
		
#contentWrapper
{
	width: 100%;
	box-sizing: border-box;
	
	padding-top: 4.5625em;
}

	section
	{
		width: 100%;
		box-sizing: border-box;
		
		padding: 5em 0;
	}
	
		.sectionRed
		{
			background-color: var(--red);
		}
		
			.sectionRed h1
			{
				color: var(--mint);
			}
			
			.sectionRed p
			{
				color: var(--navy);
			}
			
			.backgroundSankey
			{
				background-image: url('assets/illustration/home/illustration_sankeyExample.png');
				background-position: right center;
				background-repeat: no-repeat;
				background-size: 30%;
			}
			
			.testBackground
			{
				background-image: url('assets/sankyhome.png');
				background-position: 100%;
				background-repeat: no-repeat;
				background-size: 48%;
			}
			
			.testBackgroundTwo
			{
				background-image: url('assets/duotonetest1.png');
				background-position: 100%;
				background-repeat: no-repeat;
				background-size: 48%;
			}
			
			.sectionBackgroundArrows
			{
				background-image: url('assets/backgroundArrows1.png');
				background-position: left center;
				background-repeat: no-repeat;
			}
			
			.sectionBackgroundAccent1
			{
				background-image: url('assets/backgroundAccent3.png');
				background-position: left bottom;
				background-repeat: no-repeat;
			}
			
			.sectionBackgroundAccent2
			{
				background-image: url('assets/backgroundAccent2.png');
				background-position: left bottom;
				background-repeat: no-repeat;
			}
			
			.sectionBackgroundAccent3
			{
				background-image: url('assets/backgroundAccent1.png');
				background-position: 85% 80%;
				background-repeat: no-repeat;
			}
			
			.sectionBackgroundAccent4
			{
				background-image: url('assets/datasorting2.png');
				background-position: 12% center;
				background-repeat: no-repeat;
				background-size: 35%;
			}
			
			.sectionCornerAccentRed
			{
				background-image: url('assets/backgroundLogoCornerAccentRed.png');
				background-position: right top;
				background-repeat: no-repeat;
			}
			
			.sectionCornerAccentBlue
			{
				background-image: url('assets/backgroundLogoCornerAccentBlue.png');
				background-position: right top;
				background-repeat: no-repeat;
			}
			
			.sectionCornerAccentMint
			{
				background-image: url('assets/backgroundLogoCornerAccentMint.png');
				background-position: right top;
				background-repeat: no-repeat;
			}
			
			
			
		.sectionNavy
		{
			background-color: var(--navy);
		}
		
			.sectionNavy h1, h2 { color: var(--red); }
			
			.sectionNavy p { color: var(--mint); }
			
			
		.sectionMint
		{
			background-color: var(--mint);
		}
		
			.sectionMint h1, h2 { color: var(--red); }
			
			.sectionMint p { color: var(--navy); }
			
			
		.sectionLightGray
		{
			background-color: var(--lightGray);
		}

			.sectionLightGray h1, h2 { color: var(--red); }

		.sectionWhite
		{
			background-color: var(--white);
		}

			.sectionWhite h1, h2 { color: var(--red); }

		.jointSection { padding-bottom: 0; }
	
	
		.sectionContent
		{
			max-width: 81.625em;
			box-sizing: border-box;
			
			margin: 0 auto;
		}
	
			.fifthColumn, .oneColumn, .oneThirdColumn, .twoColumn, .threeColumn, .fourColumn
			{
				float: left;
				box-sizing: border-box;
				
				padding: 0 1.25em;
			}
			
			.fifthColumn
			{
				width: 20%;
			}
			
			.oneColumn
			{
				width: 25%;
			}
			
			.oneThirdColumn
			{
				width: 33%;
			}
			
			.twoColumn
			{
				width: 50%;
			}
			
			.threeColumn
			{
				width: 75%;
			}
			
			.fourColumn
			{
				width: 100%;
			}
			
			
			a.anchor
			{
				display: block;
				position: relative;
				top: -4.5em;
				visibility: hidden;
			}
			
			
			.buttonRed
			{
				float: left;
				
				width: 100%;
				box-sizing: border-box;
				
				padding: .25em 0;
				border: 3px solid var(--red);
				margin-bottom: 1.25em;
				
				font-size: 1.5em;
				text-align: center;
				text-decoration: none !important;
				
				color: var(--red);
				background-color: var(--mint);
				
				cursor: pointer;
				transition: all .2s ease;
			}
			
				.buttonRed:hover
				{
					color: var(--mint);
					background-color: var(--red);
				}
			
			.buttonNavy
			{
				float: left;
				
				width: 100%;
				box-sizing: border-box;
				
				padding: .5em 0;
				margin-bottom: 1.25em;
				
				font-size: 1.5em;
				text-align: center;
				text-decoration: none !important;
				
				color: var(--mint);
				background-color: var(--navy);
				
				cursor: pointer;
				transition: all .1s ease;
			}
			
				.buttonNavy:hover
				{
					color: var(--red);
				}
			
			.buttonMint
			{
				float: left;
				
				width: 100%;
				box-sizing: border-box;
				
				padding: .5em 0;
				margin-bottom: 1.25em;
				
				font-size: 1.5em;
				text-align: center;
				text-decoration: none !important;
				
				color: var(--navy);
				background-color: var(--mint);
				
				cursor: pointer;
				transition: all .1s ease;
			}
			
				.buttonMint:hover
				{
					color: var(--mint);
					background-color: var(--red);
				}
				
			.buttonLink
			{
				display: block;
				width: 100%;
				height: 100%;
				
				color: inherit;
				text-decoration: none;
			}
			
			
			
			
			.aboutBuildingBlock
			{
				float: left;
				box-sizing: border-box;
				
				width: 25%;
				
				padding: 2em 1.25em;
				
				text-align: center;
			}
				.aboutBuildingBlockIcon
				{
					width: 2.5em;
					height: 2.5em;
					
					margin: 1em auto;
				}
			
				.aboutBuildingBlock h2 { font-size: 1.5em; color: var(--mint); }
			
			
			
			
			.clientLogo
			{
				box-sizing: border-box;
				
				padding: 0 2em;
				
				text-align: center;
			}
			
				.clientLogo img
				{
					width: 80%;
				}
			
			
			
			
			.staffProfile
			{
				margin-top: 2em;
			}
			
				.staffProfile h3
				{
					color: var(--red);
					text-align: center;
					font-size: 1.5em;
				}
				
				.staffProfile h4
				{
					margin-top: .25em;
					color: var(--navy);
					text-align: center;
					font-size: 1em;
				}
			
				.staffPhoto
				{
					width: 100%;
					
					margin-top: 1em;
					box-sizing: border-box;
					/*border: 3px solid var(--navy);*/
				}
				
					.staffPhoto img
					{
						width: 100%;
					}
					
			
			.headerImage, .areaOfExpertise img
			{
				max-width: 25em;
				margin-bottom: 2em;
			}




.footerNavLinks
{
	float: right;
	
	padding-top: 2.25em;
	margin-left: 5em;
	
	font-size: 1.125em;
}

	.footerNavLinks ul
	{
		margin: 0;
		padding: 0;
		line-height: 175%;
		list-style: none;
		
	}
	
		.footerNavLinks ul li
		{
			cursor: pointer;
		}
	
			.footerNavLinks ul li:hover
			{
				color: var(--red);
			}
			
		.footerNavLinks ul li a
		{
			color: var(--mint);
			text-decoration: none;
		}
		
		
		
		
.mobileShow { display: none; }


@media (max-width: 56.25em)
{
	.mobileShow { display: block; }
	.mobileHide { display: none; }
	
	.mobileAlignLeft { text-align: left; }
	.mobileAlignCenter { text-align: center; }
	
	#mobileNavButton { display: block; }

	h1 { font-size: 2.75em; }
	h2 { font-size: 1.75em; }
	p { font-size: 1.125em; }

    .oneColumn, .oneThirdColumn, .twoColumn, .threeColumn, .fourColumn { width: 100%; }
	
	.fifthColumn { width: 50%; }
	
	.backgroundSankey { background-image: none; }
	
	
	
	
	.aboutBuildingBlock { width: 50%; }
	
	.aboutBuildingBlockIcon
	{
		width: 2.5em;
		height: 2.5em;
		
		margin: 1em auto;
	}

	.aboutBuildingBlock h2 { font-size: 1em; }
	
	
	
	
	.areaOfExpertise h1
	{
		margin-bottom: 1em;
	}
	
	.areaOfExpertise h2
	{
		margin-bottom: 1.75em;
	}
	
	.headerImage, .areaOfExpertise img
	{
		max-width: 100%;
		margin-bottom: 2em;
	}
	
}