@media only screen and (max-width: 1399px) { 

	h1, #cta h2 {font-size: 5rem;}
	h2 { font-size: 3.5rem;}
	h3 { font-size: 1.6rem;}
	
	.container { width: calc(100% - 40px); margin-left:20px; margin-right:20px; }
		
}


@media only screen and (max-width:1349px){
	
	.button, #header-right .button {line-height: 40px; min-width: 1px; font-size: 1.1rem;}
	
	#header nav ul li {position: relative; margin-right: 20px;}
		#header nav a {font-size: 1.1rem;}
	
}


@media only screen and (max-width:1249px){
	
	.view-desktop { display:none; }
	.view-mobile { display:block; }
	
	h1, #cta h2 {font-size: 4rem;}
	h2 { font-size: 3rem;}
	h3 { font-size: 1.5rem;}
	p { font-size: 1.25rem; line-height: 1.75rem;}
						
	#footer {padding: 100px 0 0 0;}
	
	#opportunity .flex-right {padding: 40px;} 
		#opportunity h2 {font-size: 3rem;}
	#team-members li.team-member h3 {font-size: 1.9rem; line-height: 2rem;}
	#team-members li.team-member .team-member-title {font-size: 1.5rem; line-height: 1.75rem;}
	
	#contact .container {flex-wrap: wrap;}
	#contact .contact-column:first-of-type {width: 100%;}
	
}


@media only screen and (max-width: 1023px) {

	h1, #cta h2 {font-size: 3.75rem;}
	
	.flex-container {display:block;}
		.flex-left { width: 100% !important; padding-right: 0 !important; padding-bottom: 40px;}
		.flex-right { width: 100% !important; padding-left: 0 !important;}

	#footer {padding: 40px 0 0 0;}
		#footer .container {display: block; padding: 25px 0;}
			#footer-left, #footer-right {width: 100%; display: flex; justify-content: flex-start;}
				#footer-right p, #footer-right p {text-align: left; width: 100%; margin: 10px auto;}
				#footer p br {display: block;}
		
	#opportunity {padding: 40px 0;}
		#opportunity .flex-container {display: block;}
			#opportunity .flex-left {width: 100%; height: 600px;}
				#opportunity .image-holder img {
					border-top-right-radius:10px; border-bottom-left-radius:0;
					display:block; width:100%; height:100%; object-fit:cover; object-position:center bottom;
				}
			#opportunity .flex-right {width: 100%; padding: 30px !important;}
				#opportunity .flex-right p {margin-bottom: 20px; }
	
	#team {padding: 40px 0 0 0;}

	#cta {padding: 40px 0;}
		#cta .container {padding: 60px 30px; height: auto;}
			#cta .inner-content {padding-top: 100px;}

	#contact {padding: 40px 0 0 0;}
		#contact .container {display: block;}
			#contact h4 {
				color: var(--black); padding: 0; margin: 50px 0 10px 0; text-transform: uppercase; font-family: var(--fontSans); font-weight: var(--extraBold); letter-spacing:0.1em;
			}
			#contact p a {color: var(--black);}
			#contact p a:hover {text-decoration: underline;}
	
}


@media only screen and (max-width: 768px) { 

	h1, #cta h2 {font-size: 3.25rem;}
	h2 { font-size: 2.5rem;}
	h3 { font-size: 1.25rem;}
	p { font-size: 1.1rem; line-height: 1.5rem; margin-bottom: 20px;}
	
	#hero .container {padding: 20px 0 40px 0;}
		#hero .image-holder {margin-top: 40px;}

	#about {padding: 40px 0 35px 0;}
		ul#about-panel {display: block;}
			ul#about-panel li {height:400px; width:100%; margin-bottom: 25px;}
				ul#about-panel li::before {height:300px;}
				ul#about-panel li span {max-width: 520px; padding: 30px; font-size:1.5rem; line-height:1.75rem;}

	.quote {padding: 40px 0;}
		.quote blockquote p {font-size: 2rem; line-height: 3rem; padding-left: 30px;}
	
	ul#focus-grid-panels li p {padding: 30px; font-size:2rem; line-height:2.15rem;}
	
	#focus-grid-panels .slick-prev::before,
	#focus-grid-panels .slick-next::before {display: none;}
	
	#focus-grid-panels .slick-prev,
	#focus-grid-panels .slick-next {top:auto; bottom:-40px; width:28px; height:28px;}

	#focus-grid-panels .slick-prev {right:auto; left: 30px;}
	#focus-grid-panels .slick-next {left: 66px;}

	#focus-grid-panels .slick-prev img,
	#focus-grid-panels .slick-next img {display:block; width:44px; height:44px;}
	
	#team-members li.team-member {padding: 20px;}
		#team-members li.team-member .image-holder {width: 100px; height: 100px; margin-right: 25px;}
		#team-members li.team-member .text-holder {width: calc(100% - 125px);}			
			#team-members li.team-member h3 {font-size: 1.6rem; line-height: 1.7rem;}
			#team-members li.team-member .team-member-title {font-size: 1.3rem; line-height: 1.5rem;}

	#team-members li.team-member::after {width:28px; height:28px;}
	
}

@media only screen and (max-width: 639px) { 

	h1, #cta h2 {font-size: 2.75rem;}
	h1 br {display: none;}

	#header .logo {max-width: 280px; height: auto;}
	#header-right .button {display: none;}
	
	#hero .eyebrow {max-width: 400px;}
	#hero .image-holder {height: 280px;}
	
	.quote blockquote p {padding-right: 10px;}
	
	#opportunity .flex-left {height: 400px;}
		#opportunity h2 {font-size: 2.5rem;}
	
}

@media only screen and (max-width: 499px) { 

	h1, #cta h2 {font-size: 2.2rem;}
	h2 { font-size: 2rem; line-height: 2.25rem;}
	h3 { font-size: 1rem;}

	.eyebrow {letter-spacing:0.05em; font-size: 0.9em;}

	#header .logo {max-width: 240px;}
	
	ul#focus-grid-panels li {height:400px;}
		ul#focus-grid-panels li p {padding: 30px; font-size:1.5rem; line-height:1.6rem;}
	
	ul#about-panel li {height:240px;}
		ul#about-panel li::before {height:240px;}
			ul#about-panel li span {font-size: 1.25rem; line-height: 1.5rem;}

	.quote {padding: 30px 0;}
		.quote blockquote p {font-size: 1.6rem; line-height: 2.25rem;}
	
	#team-members li.team-member .image-holder {width: 66px; height: 66px; margin-right: 15px;}
	#team-members li.team-member .text-holder {width: calc(100% - 81px);}			
		#team-members li.team-member h3 {font-size: 1.5rem; line-height: 1.75rem;}
		#team-members li.team-member .team-member-title {font-size: 1.1rem; line-height: 1.3rem;}
	
}


@media only screen and (max-width: 399px) { 

	h1, #cta h2 {font-size: 2.1rem;}
	h2 { font-size: 1.75rem; line-height: 2rem;}
	p { font-size: 1rem; line-height: 1.33rem;}
	
	.eyebrow {font-size: 0.8em;}


}