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

  .two-column .page-content ul.grid {
    margin-left: -45px;
    margin-right: -45px;
  }
    
  .two-column .page-content .list {
    margin-left: -45px;
    margin-right: -45px;
  }
  
}

@media screen and (max-width: 1540px) {
	
	nav ul {
		padding-left: 20px;
	}
	
	#home-intro {
		padding-top: 0;
		min-height: 500px;
	}
	
	#home-intro .text {
		position: relative;
		margin: 0;
		width: auto;
		padding-left: 44%;
		padding-right: 50px;
		padding-bottom: 0;
		max-width: 100%;
		right: initial;
		top: initial;
	}	
	
	#home-intro h2 {
		font-size: 38px;
		line-height: 42px;
	}	
	
	#home-intro .action {
		margin-top: 30px;

	}
	
	
	.two-column .page-content ul.grid {
		margin-left: 0;
		margin-right: 0;
	}
    
  .two-column .page-content .list {
    margin-left: 0;
		margin-right: 0;
  }
	
	
}


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

	:root {	
		--header: 97px;
		--nav: 60px;
	}

	#logo a {
		background-size: 85% auto;
	}

	nav ul {
		padding-top: 15px;
	}
	
	nav #header-search {
		padding-top: 15px;	
	}
	
	
	#subnav ul li {
		padding: 0 20px;
	}
		
	#mc_embed_signup_scroll {
		display: block;
	}

	#mc_embed_signup_scroll .mc-field-group {
		margin-bottom: 20px;
	}	
	
	@keyframes hero-line-1 {
		from {
			height: 0;
		}
		to {
			height: 200px;
		}
	}
	
	@keyframes hero-line-2 {
		from {
			width: 0;
		}
		to {
			width: 200px;
		}
	}
	
	#hero {
		max-height: min(calc(100vh - 300px), 800px); 
	}

	
	#home-hero h1 {
		bottom: 80px;
		left: 50px;
		padding: 32px;
		font-size: 70px;
		line-height: 72px;
	}
	
	#home-hero h1:before {
		width: 7px;
	}
	
	#home-hero h1:after {
		height: 7px;
	}

	#home-hero .caption {
		width: 300px;
		bottom: 15px;
		right: 20px;
		font-size: 12px;
		line-height: 14px;
	}
	
	#home-intro {
		min-height: 0;
		background: none;
	}
	
	#home-intro .text {
		max-width: 800px;
		padding: 0 50px 0 88px;
	}
	
	#home-intro .action {
		margin-top: 60px;
	}
  
  .page-content ul.grid {
    margin-left: 0;
    margin-right: 0;
  }
    
  .page-content .list {
    margin-left: 0;
    margin-right: 0;
  }

	.list li {
		gap: 25px;
	}
	
	.list li .text {
		padding-top: 0;
	}	
	

}


@media screen and (max-width: 1024px) {
	
	blockquote {
		padding-left: 60px;
		padding-right: 30px;
		margin-bottom: 40px;
	}
	
	blockquote:before {
		left: -70px;
		font-size: 100px;
		line-height: 100px;
	}
	
	#header-donate {
		display: none;
	}
	
	#home-intro {
		margin-bottom: 50px;	
	}
	
	#home-transition h2 {
		font-size: 46px;
		line-height: 48px;	
	}
	
	#home-transition .transition-list {
		display: block;
		max-width: 500px;
		margin: 0 auto;
		padding: 0;
	}
	
	#home-transition .transition-item {
		padding: 30px 0;
		background: none;
	}
	
	#home-transition .transition-item:last-child {
		border-bottom: 0;
	}
	
	#home-transition .transition-item .title {
		margin-top: 20px;
	}
	
	#home-news .wrap {
		display: block;
		padding: 20px;
		padding-top: 60px;
		padding-bottom: 100px;
	}
	
	#home-news figure {
		display: none;
	}
	
	#home-news .text {
		max-width: 500px;
		margin: 0 auto;
		padding: 0;
	}
	
	#home-news .title {
		font-size: 46px;
		line-height: 48px;
	}

	#home-features {
		display: block;
		max-width: 500px;
		margin: 60px auto;
		padding: 0 20px;
	}
	
	#home-features .feature-item {
		background: none;
		margin-bottom: 60px;
		padding: 0;
	}
	
	#home-features .feature-item .title {
		font-size: 30px;
		line-height: 32px;
	}


	.page-content img {
		width: 100%;
		margin-left: 0;
	}
	
	.page-content figure figcaption {
		right: -.7%;
	}
	
	.page-content .img-left {
		width: 100%;
		float: none;
		margin: 0;
	}
	
	.page-content .img-right {
		width: 100%;
		float: none;
		margin: 0;
	}

	.staff-list {
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
	
	
}


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

	:root {	
		--header: 68px;
	}

	header {
		display: block;
		background: var(--color);
	}
		
	#mobile-menu {
		display: block;
	}

	#logo a {
		width: 300px;
	}
	
	#logo a:hover {
		background-color: var(--color);	
	}

	@keyframes nav-open {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}
		
	nav {
		display: none;
		position: fixed;
		height: auto;
		width: calc(100% - 60px);
		padding: 30px;
		background: white;
		overflow: hidden;
	}

			
	nav.open {
		display: block;
		animation-name: nav-open;
		animation-duration: .3s;
		animation-fill-mode: both;
		box-shadow: 0 2px 10px rgba(0,0,0,.5);
	}
		
	nav ul {
		display: block;
		height: auto;
		padding: 0 20px;
		text-align: center;
	}
	
	nav ul li {
		padding: 10px 0;
	}
	
	nav #header-search {
		padding: 10px 0 40px;
	}

	nav #header-search a {
		background: none;
		width: auto;
		text-align: center;
		color: black;
	}
	
	nav #header-search a span {
		display: block;
	}
	
	
	#subnav ul {
		min-height: 58px;
		background-image: url("../images/common/nav-arrow-closed.svg");
		background-position: right 25px top 23px;
		background-repeat: no-repeat;
	}
	
	#subnav ul li {
		display: block;
		padding: 0;
		height: 58px;
	}
	
	#subnav ul li:first-child {
		display: block;
	}
	
	#subnav ul li {
		height: 0px;
		overflow: hidden;
		transition: height .3s;
	}
	
	#subnav ul li.current-page,
	#subnav ul li.current-parent {
		height: 58px;
	}
	
	#subnav ul li.current-parent:first-child {
		height: 0;
	}
	
	#subnav.open ul li {
		height: 58px;
	}
	
	#subnav.open ul {
		background-image: url("../images/common/nav-arrow-open.svg");
	}
	

	#header-donate {
		display: block;	
	}
	
	.page-layout.two-column {
		flex-direction: column;
		gap: 20px;
	}
	
	.page-content ul.grid {
		grid-template-columns: 1fr;
	}
	
	.page-content ul.grid > li:nth-child(odd),
	.page-content ul.grid > li:nth-child(even) {
		border: 0;
		padding-left: 0;
		padding-right: 0;	
		border-bottom: 1px dashed black;
	}
	
	.page-content ul.grid li:last-child {
		border: 0;
	}
	
	.sidebar {
		width: auto;
	}
	
	.nav-toggle li a {
		padding: 12px 20px;
		font-size: 16px;
	}
  
  .page-content figure img {
    margin-bottom: 0;
  }

  .page-content figure figcaption {
    position: relative;
    bottom: initial;
    right: initial;
    margin: 0;
  }

	
	@keyframes hero-line-1 {
		from {
			height: 0;
		}
		to {
			height: 145px;
		}
	}
	
	@keyframes hero-line-2 {
		from {
			width: 0;
		}
		to {
			width: 145px;
		}
	}
	
	#home-hero h1 {
		bottom: 30px;
		left: 30px;
		padding: 22px;
		font-size: 50px;
		line-height: 52px;
	}
	
	#home-hero h1:before {
		width: 5px;
	}
	
	#home-hero h1:after {
		height: 5px;
	}
	
	#home-intro {
		margin-top: 60px;
		margin-bottom: 60px;
	}
		
	#home-intro .text {
		padding: 0 50px;
	}
	
	#home-hero .caption {
		display: none;
	}



	.list ul {
		max-width: 600px;
		margin: 0 auto;	
	}
	
	.list li {
		display: block;
	}

	.list .thumb {
		max-width: 100%;
		margin-bottom: 25px;
	}
	
	.list .title {
		max-width: 550px;
	}
	
	.page-layout {
		margin: 50px 0;	
	}
	
	#search-form  {
		margin-bottom: 50px;
	}
	
	#search-form form {
		display: block;
	}
	
	#search-form form div {
		margin-bottom: 20px;
	}
	
	#search-form form .button {
		width: 100%;
	}
	
	#search-results {
		padding-bottom: 50px;
	}
	
	#media .intro-buttons .verbose {
		display: none;	
	}
	
	#media-intro .intro-text {
		padding: 0;	
	}
	
	.staff-list {
		grid-template-columns: 1fr 1fr;
	}



}


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

	@keyframes hero-line-1 {
		from {
			height: 0;
		}
		to {
			height: 105px;
		}
	}
	
	@keyframes hero-line-2 {
		from {
			width: 0;
		}
		to {
			width: 105px;
		}
	}
	
	#home-hero h1 {
		bottom: 20px;
		left: 20px;
		padding: 18px;
		font-size: 38px;
		line-height: 40px;
	}
	
	#home-hero h1:before {
		width: 4px;
	}
	
	#home-hero h1:after {
		height: 4px;
	}
	
	#home-transition h2 {
		font-size: 40px;
		line-height: 42px;	
	}
		
	#mailing-list h2 {
		font-size: 40px;
		line-height: 44px;
	}
	
	#mailing-list {
		padding-left: 20px;
		padding-right: 20px;
	}
	
	#mailing-list .form {
		padding: 30px;	
	}
	
	#footer-logo {
		width: 300px;
		height: 30px;
	}
	
	#home-intro {
		padding-bottom: 15px;	
	}
	
	#home-intro .text {
		padding: 0 20px;
	}
	
	#home-intro .text h2 {
		font-size: 38px;
		line-height: 42px;
	}
	
	#home-intro .action {
		margin-top: 25px;
	}
	
	#home-transition {
		padding-left: 20px;
		padding-right: 20px;
	}
	
	#home-transition h2 {
		margin: 0;
	}	
	
	.page-layout {
		margin: 30px 0;	
	}
	
	.nav-toggle li a span {
		display: none;
	}
	
	#search-form {
		padding: 30px;
	}
	
	#search-results {
		padding: 0 0 50px;
	}
	
	#media-intro  {
		padding-left: 10px;
		padding-right: 10px;	
	}
	
	#media-intro .intro-container {
		padding-left: 20px;
		padding-right: 20px;	
	}

	
}