/*@media screen and (max-height: 1150px) and (min-width: 1001px){
	.action .slider{max-height: 1000px; top: 50%;}
}
*/

@media screen and (max-height: 1000px) and (min-width: 1001px){

	.banner .intro{font-size: 18px;}
	.banner h1{font-size: clamp(75px, 7vh, 90px);}
	.banner h1 span:nth-of-type(1){font-size: clamp(140px, 13.5vh, 170px);}
	.banner h1 span:nth-of-type(2){font-size: clamp(72px, 7vh, 90px);}
	.banner h1 span:nth-of-type(3){font-size: clamp(100px, 9.5vh, 120px);}

	.letter .copy h2{font-size: clamp(50px, 6vh, 80px);}
	.letter .copy svg{min-width: unset; width: 50%;}

	.about p{max-width: unset;}

	.mission .item{padding: 0 2rem;}
	.mission p{max-width: unset;}

	.how-intro h2{font-size: clamp(70px, 9vh, 110px);}

	.how .copy {padding: 5rem 7rem 5rem 0;}
	.how .copy .item h3 {width: 30%;}
	.how .copy .item .info{width: 70%;}

	.action {max-width: 800px;}

	/*.impact-num .wrapper .item h3{width: 35%;}
	.impact-num .wrapper .item .info{width: 65%;}*/

	.work .star {right: 12%;}

}



@media screen and (max-height: 950px) and (min-width: 1001px){

	.letter .copy{padding: 4rem 0;}

	.about{padding: 4rem 0;}
	.mission{padding: 4rem 0;}

	.how-intro{padding: 4rem 0rem; min-width: 350px;}

	.how .copy{padding: 4rem 5rem 4rem 0rem;}
	.how .copy .item h3{width: 25%; font-size: 24px;}
	.how .copy .item .info{width: 75%; padding: 0 3rem 0 0;}
	.how .copy .item .info p{font-size: 16px;}

	.impact{padding: 4rem 5rem 4rem 0;}

	/*.work{padding: 4rem 2rem;}
	.action .mySwiper .swiper-slide{display: block; transform: translateY(0);}*/

	.stories{padding: 4rem 3rem;}
	.stories .right{transform: translateY(-1.5rem);}

	.board{padding: 4rem 0rem 4rem 5rem;}

	.staff{padding: 4rem 0;}


	.outer{width: unset; height: 80%; top: 10%; transform: translate(-50%,0%);}
	.outer .inner{padding: 40% 2.5em 1em;}
	.outer .inner .text p{font-size: 18px;}


	.impact-num .wrapper .item{padding: 1rem 0;}
	.impact-num .wrapper .item:first-of-type{padding: 0 0 1rem;}
	.impact-num .wrapper .item:last-of-type{padding: 1rem 0 0;}




}


@media screen and (max-height: 900px) and (min-width: 1001px){

	.how-intro h2{font-size: 70px;}
	.stories .wrapper .left h2{font-size: 80px; margin: 0 0 2rem;}


	.board .grid .item .picture {width: 75%;}
	.staff .copy {width: 75%;}


}


@media screen and (max-height: 850px) and (min-width: 1001px){

	.letter .copy h2{font-size: 55px;}

	.about{padding: 3rem 0;}
	.mission{padding: 3rem 0;}

	.how-intro{padding: 3rem 0;}

	.impact{padding: 3rem 3rem 3rem 0;}

	.impact h2{font-size: 70px;}

	.impact-num .wrapper .item h3{font-size: 60px;}


	.work{padding: 3rem 2rem;}
	.work h2{font-size: 70px; margin: 0 0 30px;}
	.work p{margin: 0 0 30px; padding: 0;}
	.work .arrow{width: 40%;}


	.board{font-size: 3rem 0 3rem 3rem;}
	.board h2 {font-size: 65px;}
	.board p {font-size: 15px; line-break: 1.3em;}


}


@media screen and (max-height: 800px) and (min-width: 1001px){
	.banner {min-width: 600px;}
	.banner .intro {font-size: 16px;}

	.banner h1 {font-size: clamp(65px, 7vh, 90px);}
	.banner h1 span:nth-of-type(1){font-size: clamp(120px, 13.5vh, 170px);}
	.banner h1 span:nth-of-type(2) {font-size: clamp(64px, 7vh, 90px);}
	.banner h1 span:nth-of-type(3) {font-size: clamp(87px, 9.5vh, 120px);}

	

	.involve {padding: 3em 0;}





	


}

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

	.scroll-wrapper{display: block; overflow: hidden;}
	.scroll-wrapper .section{height: unset;}

	.donate{display: none;}	

	.banner{max-width: unset; min-width: unset; padding: 30px 80px 60px; display: block; box-sizing: unset;}
	.banner .logo{position: relative; top: 0; left: 0; display: block; margin: 0 auto; padding: 0 0 30px; width: 200px;}

	.banner h1{width: fit-content; margin: 0 auto; font-size: 70px;}
	.banner h1 span:nth-of-type(1) {font-size: 130px;}
	.banner h1 span:nth-of-type(2) {font-size: 69px;}
	.banner h1 span:nth-of-type(3) {font-size: 93px;}
	.banner a.more{display: none;}
	.banner .intro{text-align: center;}

	.collage{max-width: unset; width: unset; min-width: unset; background: unset; position: unset;}
	.collage:before{display: none;}
	.collage .upper{aspect-ratio: 1000/620; width: 100%; background: #01498c; position: relative;}
	.collage .lower{aspect-ratio: 1000/620; width: 100%;	background-color: #FFC480; background-image: url(../images/texture.png); position: relative;}

	.collage{max-width: unset; width: unset; min-width: unset; background: unset; position: unset;}
	.collage:before{display: none;}
	.collage .upper{aspect-ratio: 1000/620; width: 100%; background: #01498c; position: relative;}
	.collage .lower{aspect-ratio: 1000/620; width: 100%;	background-color: #FFC480; background-image: url(../images/texture.png); position: relative;}

	.collage .texture {height: 98%; top: 0; width: unset; opacity: .3;}
	.collage .flag{height: 100%; top: 0;}
	.collage .people{height: 78%; left: 11%;}
	.collage .fist{left: 36%; height: 38%; z-index: 4;}
	.collage .photograph{height: 65%; left: unset; right: 4%; top: -5%;}
	.collage .flower {height: 17%; left: unset; right: 14%; top: 45%;}
	.collage .stary {height: 15%; top: 11%; right: -1%; left: unset;}
	.collage .stars {height: 25%; left: 7%; top: 69%;}

	.collage .white-house {width: 100%; height: unset; left: 50%;}
	.collage .ohio{height: 95%; right: unset; left: 5%; top: -12%; z-index: 4;}
	.collage .photograph-two{ height: 70%; top: -10%; right: 1%; z-index: 6;}
	.collage .scrap{height: 35%; top: 46%; right: 7%;}
	.collage .photograph-three{height: 73%; left: 1%; top: 33%; z-index: 5}
	.collage .duotone {height: 45%; top: 59%; left: unset; right: 5%;}
	.collage .scrible-two {height: 25%; top: 39%; z-index: 7;}

	.letter{max-width: unset; min-width: unset;}
	.letter .wrapper{ display: flex; flex-wrap: wrap;}
	.letter .copy{padding: 60px 30px 60px 80px; width: 70%;}
	.letter .copy h2{font-size: 60px;}
	.letter .copy .lower {display: flex; flex-direction: column-reverse;}
	.letter .copy .lower .sig{position: unset; margin: 0 0 10px;}
	.letter .images{width: 30%; position: relative;}
	.letter .images .photo{	position: absolute; aspect-ratio: 543/994; height: 85%; background: url(../images/Faten.png); background-size: 100%; background-repeat: no-repeat; right: -13%; bottom: 0; z-index: 3;}

	.letter .images .scrible{position: absolute; width: 56%; left: 10%; top: 85%; z-index: 4;}
	.letter .images .flower{ position: absolute; aspect-ratio: 1/1; height: 21.6%; background: url(../images/flower-2.png); background-size: cover; z-index: 2; top: 22%; left: 0%;}

	.about{max-width: unset; min-width: unset; padding: 60px 80px;}
	.about .item{padding: 0; margin: 0 0 50px;}
	.about p{max-width: 700px;}
	.about .flower{width: 200px; top: 35%; left: unset; right: -130px;}

	.mission{max-width: unset; min-width: unset; padding: 0 80px 60px; display: block;}
	.mission .wrapper{ display: flex; flex-wrap: wrap; flex-direction: row; justify-content: unset; margin: -2rem;}
	.mission .item{width: 50%; box-sizing: border-box; padding:2rem; margin: 0;}
	.mission p{max-width: unset;}

	.map{width: unset; min-width: unset; height: 600px !important; background: linear-gradient(180deg,rgba(187, 210, 225, 1) 85%, rgba(127, 162, 191, 1) 85%);}
	.map:before{background-size: auto 100%;}
	.map .ohio{width: unset; height: 100%; top: 0; left: 50%; transform: translateX(-50%);}
	.map .scrible{width: 20.7%; left: 65%; transform: translateX(-50%);}
	.map .stars{width: unset; height: 25.5%; left: 75%; transform: translateX(-50%);}

		.how-intro{max-width: unset; min-width: unset; padding: 60px 80px 0;}
	.how-intro h2 {font-size: 90px; margin: 0;}

	.how{max-width: unset; min-width: unset; padding: 50px 80px; }
	.how .copy{padding: 0;}
	.how .copy .item{display: block; padding: 30px 0;}
	.how .copy .item:first-of-type{padding: 0 0 30px;}
	.how .copy .item:last-of-type{padding: 30px 0 0;}
	.how .copy .item h3{width: unset; display: block; margin: 0 0 15px;}
	.how .copy .item h3 br{display: none;}
	.how .copy .item .info{width: unset; display: block; padding: 0;}
	.how .copy .item:nth-of-type(1) .info p,
	.how .copy .item:nth-of-type(2) .info p,
	.how .copy .item:nth-of-type(4) .info p,
	.how .copy .item:nth-of-type(5) .info p,
	.how .copy .item:nth-of-type(6) .info p{width: unset;}

	.how-images{max-width: unset; min-width: unset; width: 100%; aspect-ratio: 1000/666; background: #7fa2bf; overflow: hidden !important;}
	.how-images:before{display: none;}
	.how-images .kid-one{width: unset; height: 90%; bottom: -11%; left: -10%;}
	.how-images .kid-two{width: unset; height: 100%; bottom: 0; left: 50%; transform: translateX(-50%);}
	.how-images .kid-three{width: unset; height: 90%; right: 0;}
	.how-images .duotone{width: unset; height: 64.5645645645646%; top: 0; left: 20%;}
	.how-images .flower{ width: unset; height: 25%; right:10%; top: 75%; }
	.how-images .scrible {left: -5%; top: 25%; width: 35%;}


	.impact{max-width: unset; min-width: unset; box-sizing: unset; padding: 60px 80px 0;}
	.impact h2{font-size: 80px;}
	.impact p{max-width: unset;}

	.impact-num{max-width: unset; min-width: unset; width: unset; padding: 50px 80px 150px; background-image: url(../images/impact-mob.jpg); background-size: 100% auto; background-position: bottom;}

	.impact-num .wrapper{display: block; width: unset; height: unset; padding: 0;}
	.impact-num .wrapper .item{display: block; padding: 30px 0;}
	.impact-num .wrapper .item h3{width: unset;  margin: 0 0 15px;}
	.impact-num .wrapper .item .info{width: unset;}


	.stories{max-width: unset; min-width: unset; width: unset; padding: 60px 80px;}

	.stories:before{left: -50%;}
	.stories .wrapper{flex-direction: column;}
	.stories .wrapper .left,
	.stories .wrapper .right{width: 100%;}

	.stories .wrapper .left h2{font-size: 80px; width: fit-content;}
	.stories .wrapper .left h2 .star{height: 25%; width: unset; right: -5%; top: 0;}

	.stories .wrapper .left{padding: 0 0 50px;}
	.stories .wrapper .left .arrow{display: none;}


	.stories .right{display: block; transform: translateY(0);}
	.stories .right .mySwiper{height: unset; max-height: unset;}
	.stories .right .swiper-button-next {right: -50px !important; left: unset !important; top: 50% !important;}
	.stories .right .swiper-button-next::after{transform: rotate(-90deg);}
	.stories .right .swiper-button-prev {left: -50px !important; top: 50% !important;}
	.stories .right .swiper-button-prev::after{transform: rotate(-90deg);}


	.stories .mySwiper .swiper-slide{padding: 0 0 115px;}
	.stories .mySwiper .swiper-slide .wrap .cole {width: 100%;}
	.stories .mySwiper .swiper-slide .wrap .info{width: 90%;}
	.stories .mySwiper .swiper-slide .wrap:before{width: 90%;}





	.board{max-width: unset; min-width: unset; padding: 60px 80px; position: relative; z-index: 3;}
	.board .intro{padding: 0 0 30px; display: block;}
	.board h2{font-size: 65px; margin: 0 0 30px; padding: 0;}
	.board .grid{width: unset;}
	.board .grid .item {width: 33.333%}


	.staff{max-width: unset; min-width: unset; width: unset; padding: 60px 80px; background-image: none;}
	.staff h2{font-size: 65px; margin: 0 0 30px; padding: 0;}
	.staff .copy{width: unset;}

	.involve-title{display: block; padding: 60px 80px;}

	.involve{max-width: unset; min-width: unset; width: unset; padding: 60px 80px 0; overflow: hidden; }

	.involve .doods{display: none;}
	.involve .arrow{display: none;}
	.involve h2{position: unset; font-size: 65px;}

	.involve .col{position: relative; height: unset; width: calc(100% + 160px); margin: 0 -80px; top: unset; left: unset;}


	.involve-two{max-width: unset; min-width: unset; width: unset; padding: 60px 80px;}
	.involve-two .copy .item{display: block; padding: 30px 0;}
	.involve-two .copy .item:first-of-type{padding: 0 0 30px;}
	.involve-two .copy .item .wrap h3{width: 100%; margin: 0 0 30px;}
	.involve-two .copy .item .wrap .info{width: calc(100% - 57px); padding: 0 30px 0 0; justify-content: unset;}
	.involve-two .copy .item .wrap p{max-width: unset;}

		.involve-two .connect{position: unset; right: 0; bottom: 0; margin: 30px 0 0;}

	.outer{width: unset; height: 80%; top: 10%; transform: translate(-50%,0%);}
	.outer .inner{padding: 40% 1.75em 1em 3.5em;}
	.outer .inner .text p{font-size: 18px;}


  }





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

	.letter .images .photo{height: 80%;}

}


@media screen and (max-width: 800px){
	.letter .wrapper{display: block;}
	.letter .copy{width: unset; padding: 60px 80px;}
	.letter .images{width: unset; height: 500px !important; margin: -100px 0 0;}
	.letter .images .photo{height: 100%; right: 0;}
	    .letter .images .scrible {left: unset; right: 15%; width: 35%; top: 65%;}

}

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

	.banner{padding: 50px 60px; background: #004081;}
	.banner .logo{width: 200px; margin: 0 auto; padding: 0 0 30px;}
	.banner .intro{font-size: 16px;}
	.banner h1{font-size: 60px;}
	.banner h1 span:nth-of-type(1) {font-size: 110px;}
	.banner h1 span:nth-of-type(2) {font-size: 58px;}
	.banner h1 span:nth-of-type(3) {font-size: 80px;}

	.collage .upper{background: #004081;}

	.letter .copy{padding: 50px 60px;}

	.about{padding: 50px 60px;}
	.about .flower {right: -142px;}

	.map{height: unset !important;}
	.map .ohio{height: unset; width: 90%; position: relative; left: 0; transform: unset; margin: 0 auto;}


	.mission{padding: 0 60px 50px;}

	.mission .wrapper{display: block; margin: 0}
	.mission .item{width: unset; padding: 0;}
	.mission .item:first-of-type{padding: 0 0 50px;}

	.how-intro{padding: 50px 60px 0;}

	.how{padding: 50px 60px;}

	.impact{padding: 50px 60px 0;}

	.impact-num{padding: 50px 60px;}

	.stories{padding: 50px 60px;}

	.stories .wrapper .left h2{font-size: 60px;}
	.stories .wrapper .left p {max-width: unset; padding: 0 0 30px;}


	.stories .mySwiper .swiper-slide .wrap .info h3 {font-size: 22px;}
	.stories .mySwiper .swiper-slide .wrap .info{padding: 11rem 2rem .5rem;}
	.stories .mySwiper .swiper-slide .wrap .info p{font-size: 16px; line-height: 1.3em;}
	.stories .right .swiper-button-next {right: -40px !important;}
	.stories .right .swiper-button-prev {left: -40px !important;}

	.stories .right .swiper-button-prev::after { width: 36px !important; height: 33px !important; }
	.stories .right .swiper-button-next::after { width: 36px !important; height: 33px !important;}

	.finn{padding: 50px 60px;}

	.board{padding: 50px 60px;}
	.board .grid .item{width: 50%;}

	.staff{padding: 50px 60px;}

	.involve{padding: 50px 60px;}
	.involve .col{width: calc(100% + 120px); margin: 0 -60px;}

	.involve-title{padding: 50px 60px;}

	.involve-two{padding: 50px 60px;}

}

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

	.banner .intro {font-size: 14px}
	.banner h1{font-size: 50px;}
	.banner h1 span:nth-of-type(1) {font-size: 93px;}
	.banner h1 span:nth-of-type(2) {font-size: 49px;}
	.banner h1 span:nth-of-type(3) {font-size: 66px;}

	.collage .upper{aspect-ratio: 600/950;}
	.collage .white-house{display: none;}
	.collage .flag{height: unset; width: 66%; left: 4%; top: -4%;}
	.collage .photograph{height: unset; width: 100%; top: unset; bottom: 3%; right: 0%; z-index: 4}
	.collage .people{height: unset; width: 60%; right: 18%; left: unset; top: -3%;}
	.collage .fist{width: 29.1666666666667%; height: unset; left: unset; right: 2%; bottom: 42%;}
	.collage .flower {width: 22%; top: unset; height: unset; bottom: -2%; z-index: 5; right: 12%;}
	.collage .stary {width: 24%; height: unset; top: 58%; right: -8%;}
	.collage .stars {left: 26%; top: 28%; width: 16%; height: unset;}

	.collage .lower{aspect-ratio: 600/800;}
	.collage .ohio{display: none;}
	.collage .photograph-two{height: unset; width: 100%; top: 0; right: 0;}
	.collage .scrap {width: 80%; height: unset; top: 30%; right: -8%;}
	.collage .photograph-three{height: unset; width: 100%; top: 36%;}
	.collage .duotone{width: 64%; height: unset; left: 0; right: unset; top: 1%;}
	.collage .scrible-two{top: unset; bottom: 5%; right: 5%;}



}

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

	.banner .logo {width: 150px; padding: 0 0 15px;}
	.banner{padding: 30px 40px 50px;}
	    .banner .intro {font-size: 12px;}

	.banner h1{font-size: 40px;}
	.banner h1 span:nth-of-type(1) {font-size: 75px;}
	.banner h1 span:nth-of-type(2) {font-size: 39px;}
	.banner h1 span:nth-of-type(3) {font-size: 53px;}

	.letter .copy{padding: 50px 40px;}
	.letter .copy h2 {font-size: 44px;}
	.letter .copy h2 br{display: none;}

	.about{padding: 50px 40px;}
	.about .flower { top: 50%; right: -80px; width: 150px;}
	.about h3 {font-size: 30px;}
	.about svg {width: 60%;}
	.about p {font-size: 16px;}

	.mission{padding: 0 40px 50px;}
	.mission .icon {width: 100px;}
	.mission h3 {font-size: 30px;}
	.mission p {font-size: 16px;}

	.how-intro{padding: 50px 40px 0;}
	.how-intro h2 {font-size: 70px;}

	.how{padding: 50px 40px;}
	.how .copy .item h3{font-size: 30px;}
	.how .copy .item .info{font-size: 16px;}

	.impact{padding: 50px 40px 0;}
	.impact h2{font-size: 60px;}
	.impact h3 {font-size: 24px; margin: 0 0 15px;}
	.impact p{font-size: 16px;}


	.impact-num{padding: 50px 40px;}
	.impact-num .wrapper .item h3{font-size: 45px; margin: 0 0 5px;}
	.impact-num .wrapper .item p {font-size: 16px;}


	.stories{padding: 50px 40px;}
	.stories .wrapper .right{width: calc(100% + 80px); margin: 0 -40px;}
	.stories .mySwiper .swiper-slide .wrap{display: block; height: 100%;}
	.stories .mySwiper .swiper-slide .wrap .info{padding: 11rem 40px 30px;}
	.stories .mySwiper .swiper-slide{padding: 0 0 85px;}
	.stories .mySwiper .swiper-slide .wrap .info {width: 100%;}
	.stories .mySwiper .swiper-slide .wrap .info h3 {font-size: 20px;}
	.stories .mySwiper .swiper-slide .wrap .info p { font-size: 14px; line-height: 1.5em;}

	    .stories .mySwiper .swiper-slide .wrap:before{width: 100%;}

	    .stories .right .swiper-button-next {top: -30px !important; right: 35% !important;}
	    .stories .right .swiper-button-prev {top: -30px !important; left: 35% !important;}



	.finn{padding: 50px 40px;}
	.finn h2 {font-size: 50px;}
	.finn p{font-size: 16px;}

	.board{padding: 50px 40px;}
	.board h2{font-size: 60px;}

	.staff{padding: 50px 40px;}
	.staff h2{font-size: 60px;}

	.involve{padding: 50px 40px;}
	.involve h2 {font-size: 48px;}

	.involve .col{width: calc(100% + 80px); margin: 0 -40px;}


	/*.involve-title{padding: 50px 40px;}*/

	.involve-two{padding: 50px 40px;}
	.involve-two .copy .item .wrap h3{font-size: 30px; margin: 0 0 10px;}
	.involve-two .copy .item .wrap .info{width: calc(100% - 35px);}
	.involve-two .copy .item .wrap .arrow {width: 35px;}

	.involve-two .connect{; width: calc(100% + 80px); padding: 15px 40px; margin: 30px -40px 0; flex-wrap: wrap;}
	.involve-two .connect h4 {display: none;}
	.involve-two .connect ul{margin: 0; width: 100%; justify-content: center;}
	.involve-two .connect ul li { margin: 0 0 0 15px; padding: 0 0 0 15px;}
	.involve-two .connect ul li:first-of-type{padding: 0;}
	.involve-two .connect ul li a img{height: 36px;}

	.outer{height: unset; width: 100%;}
	 .outer .inner {padding: 45% 1.75em 1em;}

	.outer .inner .text p{font-size: 16px; margin: 0 0 20px;}
	.outer .inner a.btn {margin: 10px auto 0; font-size: 18px; transform: unset;}



}

@media screen and (max-width: 370px){
	.banner{padding: 30px 25px 50px;}

	.letter .copy{padding: 50px 25px;}

	.about{padding: 50px 25px;}

	.mission{padding: 0 25px 50px;}

	.how-intro{padding: 50px 25px 0;}

	.how{padding: 50px 25px;}

	.impact{padding: 50px 25px 0;}

	.impact-num{padding: 50px 25px;}

	.work{padding: 50px 25px 0;}

	/*.action .mySwiper .swiper-slide .wrap .info { width: unset; padding: 11rem 25px 0px;}*/

	.stories{padding: 50px 25px;}
	.stories .wrapper .right{width: calc(100% + 50px); margin: 0 -25px;}
	.stories .mySwiper .swiper-slide .wrap .info{padding: 11rem 25px 30px;}

	.finn{padding: 50px 25px;}

	.board{padding: 50px 25px;}

	.staff{padding: 50px 25px;}

	.involve{padding: 50px 25px;}

	.involve .col{width: calc(100% + 50px); margin: 0 -25px;}


	.involve-title{padding: 50px 25px;}

	.involve-two{padding: 50px 25px;}

}