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

.banner .intro{right: 120px;}

.letter{padding: 100px 120px 120px;}

.stories{padding: 100px 120px 700px;}

.aor .texty{padding: 100px 30px 250px 120px;}

.growth{padding: 100px 120px;}

.reach{padding: 100px 120px;}

.community{padding: 80px 120px;}

.money{padding: 80px 120px 0;}
.money .container .col-stats{width: calc(100% - 500px); padding: 0 50px 0 0;}
/*.money #expenses.container .col-stats{padding: 0 0 0 50px;}*/
.money .container .col-chart{width: 500px;}


.final{padding: 80px 120px;}
	
}

@media screen and (max-width: 1400px){
	.reach .sup-tc-number{letter-spacing: 4px;}  
}

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

	.nav{height: 170px;}
	.nav .site-logo {width: 600px; top: 40px; left: 40px;}
	.nav .btn {font-size: 18px; right: 40px; top: 65px;}

	.banner .intro{right: 90px;}

.letter{padding: 80px 90px;}

.stories{padding: 80px 90px 550px; background-size: 1300px auto;}

/*.aor{padding: 80px 90px 150px;}*/
.aor .texty{padding: 80px 30px 150px 90px;}

.growth{padding: 80px 90px;}

.reach .sup-tc-number{font-size: 200px;}

.community{padding: 80px 90px;}

.money{padding: 80px 90px 0;}
.money .container .col-stats{width: calc(100% - 400px); padding: 0 50px 0 0;}
.money #expenses.container .col-stats{padding: 0 0 0 50px;}
.money .container .col-chart{width: 400px;}
.money .btn{font-size: 18px;}

.timeline .header{padding: 50px 90px 80px;}
.timeline .slider{padding: 0 90px;}

.reach{padding: 80px 90px;}
.reach .sliders{margin: 60px -90px; padding: 30px 90px;}


  .final{padding: 80px 90px;}

}

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

  .reach .sup-tc-number{font-size: 160px;}
  .reach .sup-tc-label {font-size: 36px; margin: 60px 0;}

  .final .logo{max-width: 600px;}
}


@media screen and (max-width: 1100px){
	.banner{height: 90vh;}
	.banner .intro h1 {font-size: 160px;}
	.banner .intro h1 span {font-size: .3em;}

}


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

	.nav{height: auto; padding: 30px}
	.nav .site-logo{position: unset; top: 0; left: 0; width: 100%; max-width: 500px; margin: 0 auto 10px;}
	.nav .btn{position: unset; right: unset; margin: 0 auto; display: block; width: fit-content; font-size: 16px;}


	.banner{height: unset; background: unset; background-color: #294a45;}
	.banner .image{
		height: 40vh;
		background: url(../images/banner.jpg);
    background-size: cover;
    background-position: top left;
	}

	.banner .intro{text-align: left; position: relative; right: 0; bottom: 0; padding: 50px 80px; box-sizing: border-box;}
	.banner .intro h1 {font-size: 100px;}

	.letter{padding: 60px 80px;}
	.letter:before {height: 100%; top: 0; left: 40%;}

	.letter .wrap{display: block;}
	.letter .wrap .text{width: unset; margin: 0 0 50px;}
	.letter h2{margin: 0 0 30px;}
	.letter p{font-size: 28px;}
	.letter a {font-size: 18px; padding-top: 30px;}

	.letter .wrap .image{width: unset; max-width: 600px; margin: 0 auto;}

	.stories{padding: 60px 80px 350px; background-size: 1000px auto;}
	.stories:before{  position: absolute; content: ''; aspect-ratio: 1842/1212;background: url(../images/background.png); background-size: cover; mix-blend-mode: overlay;height: 100%; bottom: 0; right: 40%; opacity: 10%;}
	.stories .intro h2{font-size: 48px; margin: 0 0 20px;}
	.stories .intro h3 {font-size: 28px;}

	.aor{padding: 0; display: block;}
	.aor:before {height: 100%; bottom: 0; right: unset; left: 40%;}

	.aor .texty{padding: 60px 80px 50px; width: unset;}
	.aor .texty h2{font-size: 48px; margin: 0 0 20px;}
	.aor .texty h3{font-size: 28px; max-width: unset;}
	.aor .texty p{max-width: unset;}
	.aor .texty a{font-size: 18px;}
	.aor .image{width: unset; height: 500px; background-size: 65%;}
	.aor .image img{width: unset; height: 500px; left: 0;}

	.growth{padding: 60px 80px;}
	.growth:before {height: 100%; bottom: 0; right: 40%; left: unset;}
	.growth .intro h2{font-size: 48px; margin: 0 0 20px;}
	.growth .intro h3 {font-size: 28px;}
	.growth .intro a{font-size: 18px;}

	.community .group .flex-grid .item .wrap .text h4{font-size: 20px;}
	.community .group .flex-grid .item .wrap .text a{font-size: 14px;}

	.reach{padding: 60px 80px; position: relative;}
	.reach:before{  position: absolute; content: ''; aspect-ratio: 1842/1212;background: url(../images/background.png); background-size: cover; mix-blend-mode: overlay;height: 100%; bottom: 0; left: 40%; opacity: 10%;}
	.reach h2{font-size: 48px; margin: 0 0 50px;}
	.reach .sliders{width: unset;}
  .reach .sliders{margin: 0px -80px; padding: 30px 80px;}
  .reach .sup-tc-label{font-size: 28px; text-align: center;}
   .reach .sup-tc-number{font-size: 100px; text-align: center;}

	.community:before{height: 100%; top: 0; right: 40%;}

  .money{padding: 60px 80px;}

  .final{padding: 60px 80px;}
  .final p{font-size: 30px;}
  .final .logo{max-width:450px;}
	
}

@media screen and (max-width: 900px) {
 .reach .sup-tc-number{margin-top: 0px; font-size: 120px;}
  .reach .sup-tc-label{margin: 20px 0;}
}

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

	
	.stories .flex-grid.loose{margin: -.75rem 0 !important;}
	.stories .flex-grid .item{padding: .75rem 0 !important;}

	.money h2 span{display: block; font-size: 20px; line-height: 1.3em;}
	.money .container .col-stats ul li .box {height: 24px;}
	.money .container .col-stats ul li .percentage {font-size: 1.5em; width: 105px;}
	.money .container .col-stats ul li .label{width: calc(100% - 105px);}


	.money .container{display: block;}
	.money .container .col-stats{width: 100%; padding: 0 0 30px;}
	.money #expenses.container .col-stats{padding: 0 0 30px 0;}
	.money .container .col-stats ul{max-width: unset;}
	.money .container .col-chart{width: 100%;}
	.money .btn{font-size: 16px;}

}


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


	.banner .intro{padding: 50px 60px;}

	.letter{padding: 50px 60px;}
	.letter:before {height: 500px; top: 0; left: 20%;}

	.letter p{font-size: 25px;}
	.letter .wrap .image{display: block; width: 270px;}
	.letter .wrap .image .img-one, .letter .wrap .image .img-two{
		padding: 0;
		flex-basis: unset;
		max-width: unset;
		flex: unset;
	}

	.letter .wrap .image .img-one img, .letter .wrap .image .img-two img{
		width: 100;
	}

	.stories{padding: 60px 60px 270px; background-size: 700px auto;}
	.stories:before{height: 500px; right: 20%; top: 0;}
	.stories .intro h2 {font-size: 40px;}
	.stories .intro h3 {font-size: 24px;}
	.stories .intro p {font-size: 18px;}

	.aor:before {height: 500px; top: 0; left: 20%;}
	.aor .texty{padding: 50px 60px;}
	.aor .texty h2 {font-size: 40px;}
	.aor .texty h3 {font-size: 24px;}
	.aor .texty p {font-size: 18px;}
	.aor .image{height: 400px; background-size: 65%;}
	.aor .image img{height: 400px;}

	.growth{padding: 50px 60px;}
	.growth:before{height: 500px; right: 20%; top: 0;}
	.growth .intro h2 {font-size: 40px;}
	.growth .intro h3 {font-size: 24px;}
	.growth .intro p {font-size: 18px;}

	.reach{padding: 50px 60px;}
	.reach h2{font-size: 40px; margin: 0 0;}

  .reach .sup-tc-label{font-size: 30px;}

  .community{padding: 50px 60px;}
  .community:before{height: 500px; right: 20%; top: 0;}

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

.timeline .header{padding: 0 60px 50px;}
  .timeline .slider{padding: 0 60px;}

  .final{padding: 60px 60px 50px;}
  .final p{font-size: 25px;}

}



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

	.outer{height: 100%;}
	.outer .inner {height: 100%; padding: 50px 30px;}
	.outer .inner .text {height: 90%;}


	
	.aor .image{height: 350px; background-size: 65%;}
	.aor .image img{height: 350px;}

	.money .container .col-stats ul li .label {font-size: 16px;}

}

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

	.banner .intro{padding: 50px 40px;}
	.banner .intro h1{font-size: 80px;}

.reach .sup-tc-number{font-size: 80px;}

	.letter{padding: 50px 40px;}
	.letter p{font-size: 22px;}

	.stories{padding: 50px 40px 200px; background-size: 500px auto;}

	.aor .texty{padding: 50px 40px;}
	.aor .image{height: 300px; background-size: 65%;}
	.aor .image img{height: 300px;}

	.growth{padding: 50px 40px;}

.reach{padding: 30px 40px;}
  .reach .sliders{margin: 0 -40px; padding: 30px 40px;}
  .reach .sup-tc-label{font-size: 24px;}

  .community{padding: 50px 40px 30px;}
  .community .group{margin: 60px auto 0;}

  .timeline .header{padding: 0 40px 50px;}
  .timeline .slider{padding: 0 40px;}

  .money{padding: 50px 40px 0;}
  .money .container .col-stats ul li .box{height: 18px;}
      .money .container .col-stats ul li .percentage {
        font-size: 1.25em;
        width: 90px;
    }
   .money .container .col-stats ul li .label{width: calc(100% - 90px);}

  .final{padding: 60px 40px 30px;}
  .final p{font-size: 22px;}

}

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

	.banner .intro{padding: 50px 25px;}

	.letter{padding: 50px 25px;}

	.stories{padding: 50px 25px 150px; background-size: 370px auto;}

	.aor .texty{padding: 50px 25px;}

	.growth{padding: 30px 25px;}

	.reach{padding: 30px 25px;}
  .reach .sliders{margin: 30px -25px; padding: 30px 25px;}

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

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

  .timeline .header{padding: 0 25px 50px;}
  .timeline .slider{padding: 0 25px;}

  .final{padding: 60px 25px 30px;}

}