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

}

@media screen and (max-width: 1800px){
	.milestones .wrapper .swiper .card .num{font-size: 35px;}
	.milestones .wrapper .swiper .card p{font-size: 16px;}
}



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

}

@media screen and (max-width: 1500px) {
	.banner .letter {padding: 0px 80px; margin: 80px auto;}
	.banner .letter .wrapper .left {padding: 50px;}
	.banner .letter .wrapper .left h2 {font-size: 45px; margin: 0 0 30px; padding: 35px 0 0;}

	.transform{margin: 100px auto 80px; padding: 100px 80px 0;}
	
	.transform .item .wrap .label {font-size: 24px; padding: 10px 45px 10px 15px;}
	.transform .item .wrap .label:before{width: 20px;}
	.transform .item .wrap .image .copy p {font-size: 28px;}

	.wildlife .wrapper{padding: 0 80px; margin: 80px auto -80px;}


	.education .wrapper{padding: 160px 80px 160px;}

	.grade-2{margin-top: -80px}

	.community{padding: 160px 80px 80px;}
	

	.philanthropy .wrapper{padding: 80px;}

	.milestones .wrapper{padding: 80px 0 80px 80px;}
	
	.stew{padding: 80px;}

	.final .wrapper{padding: 80px;}
	.final .right .cards .card .wrap h3{font-size: 24px;}

	
}


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

	body{font-size: 18px;}

	a.btn {font-size: 20px; border-width: 3px;}
	a.btn svg {height: 16px;}

	.play-button {width: 120px; height: 120px; margin-right: -60px; margin-top: -60px;}
	.play-button::after{    border-left: 36px solid black;
    border-top: 24px solid transparent;
    border-bottom: 24px solid transparent;
    border-right: 24px solid transparent;
}


	.banner .letter {padding: 0px 60px; margin: 60px auto;}
	.banner .letter .wrapper .left h2:before{width: 75px;}
	.banner .letter .wrapper .left h2 {font-size: 35px; padding: 30px 0 0;}


	.transform{margin: 80px auto 60px; padding: 100px 60px 0;}
	.transform .intro h2 {font-size: 35px;}
	.transform .intro p{padding-left: 30px;}
	.transform .item .wrap .label {font-size: 22px;}
	.transform .item .wrap .image .copy p{font-size: 24px;}


	.wildlife .wrapper{padding: 0 60px; margin: 60px auto -60px;}
	.wildlife .top .left h2:before,
	.wildlife .cards h2:before{width: 75px;}
	.wildlife .top .left h2,
	.wildlife .cards h2{font-size: 35px; padding: 30px 0 0; margin: 0 0 20px;}

	.education .wrapper{padding: 120px 60px;}
	.education .wrapper .left h2:before{width: 75px;}
	.education .wrapper .left h2{font-size: 35px; padding: 30px 0 0; margin: 0 0 20px;}
	.education .wrapper .left .accords .itemy {padding: 20px 0;}
	.education .wrapper .left .accords .itemy .title h4 {font-size: 24px;}
	.education .horizontal {width: 20px; margin-left: -10px;}
	.education .vertical{height: 20px; margin-top: -10px;}
	.education .wrapper .left .accords .itemy .content {padding: 20px 0 0;}
	.education .wrapper .left .accords .itemy .content p{font-size: 18px;}
	.education .wrapper .right .video .label{font-size: 24px; padding: 10px 15px;}
	.education .wrapper .right a.more {font-size: 20px;}
	.education .wrapper .right a.more:before {width: 16px; top: calc(50% - 8px);}
	.education .wrapper .right a.more:first-of-type{margin: 0 20px 0 0;}

	.grade-2{margin-top: -80px;}

	.community{padding: 150px 60px 60px;}
	.community .intro{margin: 0 0 40px;}
	.community .intro h2:before{width: 75px;}
	.community .intro h2{font-size: 35px; padding: 30px 0 0;}
	.community .wrapper .left .video .label{font-size: 24px; padding: 10px 15px;}
	.community .wrapper .left a.more {font-size: 20px;}
	.community .wrapper .left a.more:before {width: 16px; top: calc(50% - 8px);}
	.community .wrapper .left a.more:first-of-type{margin: 0 20px 0 0;}
	.community .wrapper .right h3{font-size: 35px; margin: 0 0 20px;}
	.community .wrapper .right .accords .itemy {padding: 20px 0;}
	.community .wrapper .right .accords .itemy .title h4 {font-size: 24px;}
	.community .horizontal {width: 20px; margin-left: -10px;}
	.community .vertical{height: 20px; margin-top: -10px;}
	.community .wrapper .right .accords .itemy .content {padding: 20px 0 0;}
	.community .wrapper .right .accords .itemy .content p{font-size: 18px;}

	.philanthropy .wrapper{padding: 60px;}
	.philanthropy h2:before{width: 75px;}
	.philanthropy h2{font-size: 35px; padding: 30px 0 0;}
	.philanthropy .right .video .label{font-size: 24px; padding: 10px 15px;}
	.philanthropy .right a.more {font-size: 20px;}
	.philanthropy .right a.more:before {width: 16px; top: calc(50% - 8px);}
	.philanthropy .right a.more:first-of-type{margin: 0 20px 0 0;}

	.milestones .wrapper{padding: 60px 0; margin: 0; display: block;}
	.milestones .wrapper .copy{width: unset;padding: 0 60px; margin: 0 0 30px;}
	.milestones .wrapper .right{width: unset;}

	.milestones .wrapper .copy h2:before {width: 75px;}
	.milestones .wrapper .copy h2{font-size: 35px; padding: 30px 0 0;}
	.milestones .wrapper .swiper{width: unset; padding-left: 0;}

	.stew{padding: 60px;}
	.stew h2:before {width: 75px;}
	.stew h2{font-size: 35px; padding: 30px 0 0;}

	.final .wrapper{padding: 60px;}
	.final h2:before {width: 75px;}
	.final h2{font-size: 35px; padding: 30px 0 0;}

}

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

	.overlay{padding: 0}
	.outer{margin: 0;}
	.outer .inner{display: block;}
	.outer .inner .text{width: unset; padding: 50px 30px 50px 50px;}
	.outer .inner .text .copy{height: calc(100% - 50px);}
	.outer .inner .text img{display: block; margin: 0 0 30px; width: 100%;}
	.outer .inner .image{display: none;}
	.outer .inner .text h2{font-size: 35px; padding: 30px 0 0; margin: 0 0 30px;}
	.outer .inner .text h2:before{width: 75px;}
	.outer .inner .text .copy {height: 100%}
	.outer .inner .text p.big{font-size: 24px;}
	.outer .inner .text p{font-size: 18px;}

	.outer .inner .text .copy{overflow-x: hidden;}

	.outer .close span{display: none;}
	.outer .close .x {width: 50px; background-size: 25px auto;}

	.banner .letter{padding: 0 30px;}
	.banner .letter .wrapper{display: block;}
	.banner .letter .wrapper .left{width: unset;}
	.banner .letter .wrapper .left p{font-size: 18px;}
	.banner .letter .wrapper .right{width: unset;}
	.banner .letter .wrapper .right a.video{aspect-ratio: 16/9}

	.grade-1{	padding: 220vh 0 100px;}

	.transform{padding: 100px 50px 0;}
	.transform .intro{display: block; margin: 0 0 40px}
	.transform .intro h2{width: unset; margin: 0 0 30px;}
	.transform .intro p{width: unset; padding-left: 0;}

	.wildlife .wrapper{padding: 0 50px; }
	.wildlife .top{display: block; margin: 0 0 30px;}
	.wildlife .top .left{width: unset;}
	.wildlife .top .left p{max-width: unset;}
	.wildlife .top .left p br{display: none;}
	.wildlife .top .right{width: unset;}

	.education .wrapper{padding: 120px 50px;}
	.education .wrapper .right .video .image{aspect-ratio: 16/9;}
	.education .wrapper .right .video .label{font-size: 22px;}

	.community{padding: 100px 50px 50px;}
	.community .intro{display: block;}
	.community .intro h2{margin: 0 0 20px;}
	.community .intro p{margin: 0 0; max-width: unset; padding: 0}
	.community .wrapper .left .video .image{aspect-ratio: 16/9;}
	.community .wrapper .left .video .label{font-size: 22px;}
	.community .wrapper .right .accords .itemy .title h4 {font-size: 26px;}



	.philanthropy .wrapper{padding: 50px;}
	.philanthropy .right .video .image{aspect-ratio: 16/9;}
	 .philanthropy .right .video .label {font-size: 22px;}


	.milestones .wrapper{padding: 50px 0;}
	.milestones .wrapper .copy{padding: 0 50px;}

	.stew{padding: 50px;}
	.stew .item .link-list {columns: 2;}

	.final .wrapper{padding: 50px;}

}

@media screen and (max-width: 1000px){
	/*.banner .logo {width: 160px;}*/
	.banner h1{font-size: 80px;}
	.banner .intro .sub {font-size: 28px;}


}


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


	.banner{height: 50vh;}
	.banner .intro {height: 50vh;}
	.banner h1 {font-size: 65px;}
	.banner .intro .sub {font-size: 24px;}


	.grade-1{	padding: 200vh 0 100px;}


	.transform .item .wrap .image .copy {top: unset; bottom: 0;}
	.transform .item .wrap:hover .image .copy{transform:unset;}

	.wildlife .top .right{display: block;}
	.wildlife .top .right .zoo, .wildlife .top .right .wilds{display: block; width: 100%; max-width: 500px; margin: 0 auto; padding: 2rem;}


	.milestones .wrapper .swiper{margin: 0 -50px!important; overflow: visible !important;}
	
	.stew .item .link-list {columns: 1;}

	.final .right .cards .card{-ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%;}
	.outer .inner .text img.right{
	display: inline-block;
  float: unset;
  width: 100%;
  max-width: 400px;
  margin: 0 0 30px;}

}

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

	a.btn{font-size: 16px; border-width: 2px;}
	a.btn svg {height: 13px;}

	.banner .logo{padding: 30px 30px 0;}
	.banner h1{font-size: 55px;}
	.banner .intro .sub {font-size: 22px;}

	.outer .inner .text h2{ font-size:26px; }
	.outer .inner .text .copy{ padding-right:0; }
	.outer .inner .text .copy::-webkit-scrollbar{display: none;}
	.outer .inner .text .copy::-webkit-scrollbar-thumb{display: none;}

	.milestones .wrapper .swiper .card .icon {height: 65px;}
	.milestones .wrapper .swiper .card .icon.short{height: 50px;}



	.banner .letter{padding: 0 10px;}
	.banner .letter .wrapper .left{padding: 50px 35px;}
	.banner .letter .wrapper .left h2{font-size: 30px; margin: 0 0 20px;}
	.banner .letter .wrapper .left p{font-size: 15px;}

	.transform{margin: 50px auto; padding: 60px 40px 0;}
	.transform .intro h2{font-size: 30px;}

	.wildlife .wrapper{margin: 50px auto -50px; padding: 0 40px; }
	.wildlife .top .left h2{font-size: 30px;}
	.wildlife .zoo .label, .wildlife .wilds .label{font-size: 20px;}


	/*.wildlife .card .front, .wildlife .card .back{padding: 1.5rem;}*/


	.education .wrapper{padding: 100px 40px 120px;}
	.education .wrapper .left h2{font-size: 30px; padding: 25px 0 0;}
	.education .wrapper .left p{font-size: 18px;}
	.education .wrapper .right .video .label{font-size: 18px;}
	/*.education .wrapper .right a.more{display: block; width: fit-content; margin: 15px auto;}*/
	/*.education .wrapper .right a.more:first-of-type{display: none;}*/
	.education .wrapper .right a.more {font-size: 16px; padding-right: 20px;}
	.education .wrapper .right a.more:before {width: 12px; top: calc(50% - 6px);}

	.community{padding: 100px 40px 50px;}
	.community .intro h2{font-size: 30px; padding: 25px 0 0;}
	/*.community .wrapper .left a.more:first-of-type{display: none;}*/
	.community .wrapper .left a.more {font-size: 16px; padding-right: 20px;}
	.community .wrapper .left a.more:before {width: 12px; top: calc(50% - 6px);}
	.community .wrapper .left .video .label{font-size: 18px;}

	.philanthropy .wrapper{padding: 50px 40px;}
	.philanthropy h2{font-size: 30px; padding: 25px 0 0; margin: 0 0 20px;}
	.philanthropy .left .stories .itemy{-ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%;}
	.philanthropy .right .video .label{font-size: 18px;}
	.philanthropy .right a.more {font-size: 16px; padding-right: 20px;}
	.philanthropy .right a.more:before {width: 12px; top: calc(50% - 6px);}



	.milestones h2{font-size: 30px; padding: 25px 0 0;}
	.milestones .wrapper .swiper{margin: 0 -40px!important;}
	.milestones .wrapper .copy{padding: 0 40px;}

	.stew{padding: 50px 40px;}
	.stew h2 {font-size: 28px; padding: 25px 0 0;}

	.final .wrapper{padding: 50px 40px;}
	.final h2 {font-size: 28px; padding: 25px 0 0;}

}


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

	    .banner h1 {font-size: 45px;}





	.banner .letter{padding: 0 0px;}
	.banner .letter .wrapper .left{padding: 50px 25px;}

	.transform{padding: 50px 25px 0;}
	.transform .intro h2 {font-size: 26px;}


	.wildlife .wrapper{padding: 0 25px; }



	.education .wrapper{padding: 100px 25px 120px;}

	.community{padding: 100px 25px 50px;}

	.philanthropy .wrapper{padding: 50px 25px;}

	.milestones .wrapper .swiper{margin: 0 -25px!important;}
	.milestones .wrapper .copy{padding: 0 25px;}
	.milestones .wrapper .swiper .card{padding:1rem;}
	.milestones .wrapper .swiper .card .num {font-size: 30px; margin: 0 0 10px}

	.stew{padding: 50px 25px;}
	.stew h2 {font-size: 25px;}


	.final .wrapper{padding: 50px 25px;}

	.play-button {width: 90px; height: 90px; margin-right: -45px; margin-top: -45px;}
	.play-button::after{    border-left: 27px solid black;
    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent;
    border-right: 18px solid transparent;
}
	    .outer .inner .text h2 {font-size: 24px;}


}

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

.transform{margin: 0 auto; padding: 50px 60px;}

.wildlife .wrapper{padding: 0 60px; margin: 50px 0 -50px;}

.education .wrapper{padding: 100px 60px 50px;}

.community{padding: 50px 60px;}

.philanthropy .wrapper{padding: 50px 60px;}

	

}


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

	.wildlife .wrapper{padding: 0 40px;}

	.education .wrapper{padding: 100px 40px 50px;}

	.community{padding: 50px 40px;}

	.philanthropy .wrapper{padding: 50px 40px;}
}


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

	.wildlife .wrapper{padding: 0 25px;}

	.education .wrapper{padding: 100px 25px 50px;}

	.community{padding: 50px 25px;}

	.philanthropy .wrapper{padding: 50px 25px;}
}
*/