body{
  font-family: "Plus Jakarta Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  overflow-y: scroll;
  overflow-x: hidden;
}

@font-face {
    font-family: Thunder;
    font-weight: 700;
    src: url("../fonts/A_Love_of_Thunder.ttf");
}



.scroll-wrapper .section{
	height: 100vh;
	position: relative;
	flex-shrink: 0;
	/*overflow: visible;*/
}

.donate{
	position: fixed;
	top: 20px;
	right: -15px;
	z-index: 11;
	width: fit-content;
	display: block;
	background: #fff;
	font-family: Thunder;
	letter-spacing: .025em;
	font-size: 24px;
	text-transform: uppercase;
	text-align: center;
	padding: .75em 1.25em;
	box-sizing: border-box;
	text-decoration: none;
	color: #01498c;
	  -webkit-mask-image: url(../images/btn-2.png);
  mask-image: url(../images/btn-2.png);
  mask-size: 100%;
  mask-repeat: no-repeat;
  mask-position: center;
}

.donate:hover{
	color: #f89728;
}



.scroll-wrapper{
	display: flex;
	flex-wrap: nowrap;
	overflow-x: hidden;
	overflow-y: hidden;
}

.banner{
	width: auto;
	max-width: 40vw;
	min-width: 720px;
	background: #01498c;
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	padding: 7rem 3rem 7rem 5rem;
}

.banner .logo{
	aspect-ratio: 611/192;
	position: absolute;
	max-width: 239px;
	width: 33.1944444444444%;
	top: 3rem;
	left: 5rem;
}

.banner .logo img{
	width: 100%;
}

.banner .intro{
	font-weight: 700;
	color: #fff;
	font-size: 20px;
	letter-spacing: .2em;
	text-transform: uppercase;
	line-height: 1.5em;
	margin: 0 0 1em;
}

.banner h1{
	font-family: Thunder, sans-serif;
	color: #ffc480;
	font-size: clamp(50px, 10vh, 90px);
	letter-spacing: -.01em;
	text-transform: uppercase;
	margin: 0 0 3rem;
}

.banner h1 span:nth-of-type(1){
	font-size: clamp(120px, 15vh, 170px);
	letter-spacing: .025em;
}

.banner h1 span:nth-of-type(2){
	font-size: clamp(49px, 9.5vh, 89px);
}

.banner h1 span:nth-of-type(3){
	font-size: clamp(80px, 12vh, 120px);
}

.banner a.more{
	font-family: Thunder;
	color: #ffc480;
	letter-spacing: .025em;
	font-size: clamp(22px, 3vh, 27px);
	text-decoration: none;
	position: relative;
	padding-right: 180px;
	width: fit-content;
}


.banner a.more:before{
	position: absolute;
	content: "";
	aspect-ratio: 357/54;
	background: url(../images/arrows.jpg);
	background-size: cover;
	width: 162px;
	top: 5px;
	right: 5px;
	animation: float 3s linear infinite;
}

@keyframes float {
  0% {
    transform: translatex(0px);
  }
  50% {
    transform: translatex(10px);
  }
  100% {
    transform: translatex(0px);
  }
}

.collage{
	position: relative;
	width: 105.5555555555556vw;
	min-width: 1500px;
	background: linear-gradient(90deg,rgba(1, 73, 140, 1) 56%, rgba(255, 196, 128, 1) 56%);
}

.collage:before{
	position: absolute;
	content: "";
	width: 44%;
	height: 100%;
	background: url(../images/texture.png);
	top: 0;
	right: 0;
}

.collage .texture{
	position: absolute;
	aspect-ratio: 1102/687;
	width: 51.8947368421053%;
	background: url(../images/banner-text.png);
	background-size: 100%;
	top: 4.9%;
	left: 0;
	z-index: 1;
}

.collage .people{
	position: absolute;
	aspect-ratio: 1911/2670;
	background: url(../images/banner-cut.png);
	background-size: 100%;
	background-repeat: no-repeat;
	/*width: 26.9473684210526%;*/
	height: 70.3%;
	left: 2.0526315789474%;
	bottom: 0;
	z-index: 4;
}

.collage .flag{
	position: absolute;
	aspect-ratio: 480/706;
	/*width: 19.9473684210526%;*/
	height: 63.9%;
	background: url(../images/flag.png);
	background-size: 100%;
	left: 0;
	top: 4.9%;
	z-index: 2;
}

.collage .flag .video{
	aspect-ratio: 480/320;
	/*display: none;*/
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
}

.collage .flag .video video{
	width: 100%;
}


.collage .stars{
	aspect-ratio: 1089/1428;
	position: absolute;
	/*width: 7.5263157894737%;*/
	height: 18%;
	top: 57.5%;
	left: 2.7368421052632%;
	z-index: 5;
}

.collage .stars .star.one{
	position: absolute;
	aspect-ratio: 672/633;
	width: 61.2021857923497%;
	background: url(../images/bstar-1.png);
	background-size: 100%;
	left: 8.3788706739526%;
	top: 0;
}

.collage .stars .star.two{
	position: absolute;
	aspect-ratio: 338/333;
	width: 30.7832422586521%;
	background: url(../images/bstar-2.png);
	background-size: 100%;
	left: 0%;
	top: 53.1512605042017%;
}


.collage .stars .star.three{
	position: absolute;
	aspect-ratio: 724/758;
	width: 65.9380692167577%;
	background: url(../images/bstar-3.png);
	background-size: 100%;
	left: 34.0619307832423%;
	top: 46.9187675070028%;
}

.collage .photograph{
	position: absolute;
	aspect-ratio: 1695/1300;
	/*width: 34.9473684210526%;*/
	height: 51.3%;
	background: url(../images/banner-photo.png);
	background-size: 100%;
	left: 20%;
	top: 9.8%;
	z-index: 3;
}


.collage .photograph .scrible{
	position: absolute;
	width: 39.1566265060241%;
	left: 35.9939759036145%;
	top: 16.8627450980392%;
}

.collage .fist{
	position: absolute;
	aspect-ratio: 1139/1486;
	/*width: 13.1578947368421%;*/
	height: 37.7%;
	background: url(../images/fist.png);
	background-size: 100%;
	bottom: 0;
	left: 23.4210526315789%;
	z-index: 5;
}

.collage .white-house{
	position: absolute;
	aspect-ratio: 2000/910;
	/*width: 66.8947368421053%;*/
	height: 59%;
	background: url(../images/white-house.png);
	background-size: 100%;
	left: 23.1578947368421%;
	bottom: 0;
	z-index: 2;
}

.collage .flower{
	position: absolute;
	aspect-ratio: 1/1;
	/*width: 7.2631578947368%;*/
	height: 13.8%;
	background: url(../images/flower-1.png);
	background-size: 100%;
	left: 43.5263157894737%;
	top: 54.5%;
	z-index: 3;
}


.collage .stary{
	position: absolute;
	aspect-ratio: 699/531;
	/*width: 9.4736842105263%;*/
	z-index: 5;
	background: url(../images/stary.png);
	background-size: 100%;
	left: 49.9473684210526%;
	height: 13.1%;
	top: 20.2%;
}


.collage .duotone{
	position: absolute;
	aspect-ratio: 1309/948;
	/*width: 16.5263157894737%;*/
	height: 22.8%;
	background: url(../images/duotone.png);
	background-size: 100%;
	left: 72.6315789473684%;
	top: 10.5%;
	z-index: 1;
}

.collage .ohio{
	position: absolute;
	aspect-ratio: 1173/1596;
	/*width: 24.5789473684211%;*/
	height: 62.4%;
	/*left: 60.4736842105263%;*/
	right: 13.2631578947368%;
	top: 4.1%;
	background: url(../images/ohio.png);
	background-size: 100%;
	z-index: 2;
}

.collage .scrible-two{
	position: absolute;
	transform: rotate(270deg) scale(-1);
	/*width: 10.3157894736842%;*/
	height: 18.4%;
	right:2.3157894736842%;
	top: 21.3%;
	z-index: 5;
}

.collage .scrible-two svg{
	height: 100%;
}

.collage .photograph-two{
	position: absolute;
	aspect-ratio: 2152/1545;
	/*width: 33.6842105263158%;*/
	height: 46%;
	background: url(../images/photograph-2.png);
	background-size: 100%;
	right: 0;
	top: 26.1%;
	z-index: 4;
}

.collage .photograph-three{
	position: absolute;
	aspect-ratio: 1765/1378;
	/*width: 37.1052631578947%;*/
	height: 54.1%;
	background: url(../images/photograph-3.png);
	background-size: 100%;
	left: 59.4736842105263%;
	top: 57.5%;
	z-index: 2;
}

.collage .scrap{
	position: absolute;
	aspect-ratio: 1616/775;
	/*width: 18.9473684210526%;*/
	height: 16.5%;
	background: url(../images/scrap.png);
	background-size: 100%;
	top: 63.8%;
	right: .5789473684211%;
	z-index: 3;
}



.letter{
	width: auto;
	max-width: 31.5789473684211vw;
	min-width: 600px;
	background-color: #FFC480;
	background-image: url(../images/texture.png);
	position: relative;
		display: flex;
	flex-direction: column;
	justify-content: center;
}

.desktop .letter .images{
	display: none;
}

.letter .copy{
	position: relative;
	padding: 7rem 0;
	box-sizing: border-box;

}

.letter .copy h2{
	font-family: Thunder;
	font-size: clamp(50px, 10vh, 80px);
	text-transform: uppercase;
	letter-spacing: .025em;
	margin: 0 0 0;
	margin-block-start: 0;
	margin-block-end: 45px;
}

.letter .copy svg{
	width: 60%;
	min-width: 300px;
	position: relative;
	top: -25px;
	transform: scale(-1);
}

.letter .copy p{
	font-size: 18px;
	letter-spacing: .02em;
	font-weight: 600;
	margin: 0 0 35px;
	line-height: 1.5em;
	max-width: 590px;
}

.letter .copy p.bold{
	font-weight: 900;
}

.letter .copy .lower{
	position: relative;
}

.letter .copy .lower .sig{
	max-width: 280px;
	position: absolute;
	top: 0;
	right: 0;
}

.letter .copy .lower a.btn{
	width: fit-content;
	display: block;
	background: #000;
	font-family: Thunder;
	letter-spacing: .025em;
	font-size: clamp(22px, 3vh, 26px);
	text-transform: uppercase;
	padding: .75em 1.5em;
	box-sizing: border-box;
	text-decoration: none;
	color: #ffc480;
	  -webkit-mask-image: url(../images/btn.png);
  mask-image: url(../images/btn.png);
  mask-size: 100%;
  mask-repeat: no-repeat;
  mask-position: center;
  position: relative;
}

.letter .copy .lower a.btn span{
	position: relative;
	z-index: 3;
}

.letter .copy .lower a.btn:before{
	position: absolute;
	content: "";
	width: 0;
	height: 100%;
	background: #00467f;
	top: 0;
	left: 0;
	transition: width .5s ease;
}


.letter .copy .lower a.btn:hover::before{
	width: 100%;
	transition: width .5s ease;
}

.letter .copy .lower .sig img{
	width: 100%;
}


.faten{
	width: 25.4444444444444vw;
	min-width: 350px;
	background-color: #FFC480;
	background-image: url(../images/texture.png);
	position: relative;
}

.mobile .faten{
	display: none !important;
}

.faten:before{
		position: absolute;
	content: "";
	aspect-ratio: 634/2066;
	height: 100%;
	background: url(../images/divider-1.png);
	background-size: 100%;
	top: 0;
	right: 0;
}

.faten .flower{
	position: absolute;
	aspect-ratio: 1/1;
	/*width: 47.1615720524017%;*/
	height: 21.6%;
	background: url(../images/flower-2.png);
	background-size: cover;
	z-index: 2;
	top: 13.2%;
	left: 20.1703056768559%;
}

.faten .photo{
	position: absolute;
	aspect-ratio: 543/994;
	/*height: 75%;*/
	height: 91.1%;
	/*width: 89.0829694323144%;*/
	background: url(../images/Faten.png);
	background-size: 100%;
	background-repeat: no-repeat;
	left: 38.1135371179039%;
	/*bottom: 0;*/
	top: 24.7%;
	z-index: 3;
}

.faten .texture{
	position: absolute;
	aspect-ratio: 750/2500;
	width: 127.0742358078603%;
	top: 30%;
	left: -18.7423580786026%;
	background: url(../images/letter-bg.png);
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: top right;
}

.faten .scrible{
	position: absolute;
	width: 42.5065502183406%;
	left: 84.5414847161572%;
	top: 76.9%;
	z-index: 4;
}

.faten .dots{
	position: absolute;
	aspect-ratio: 225/290;
	width: 24.4541484716157%;
	background: url(../images/dots.png);
	background-size: 100%;
	top: 28.9%;
	left: 82.4890829694323%;
}

.about{
	background: #bbd2e1;
	box-sizing: border-box;
	padding: 7rem 0;
	width: auto;
	max-width: 37.5555555555556vw;
	min-width: 675px;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	z-index: -1;
}

.about .flower{
	position: absolute;
	aspect-ratio: 1/1;
	width: 38.6094674556213%;
	background: url(../images/flower-3.png);
	background-size: 100%;
	left: 36%;
	top: 87.1%;
}

.about h3{
	font-family: Thunder;
	color: #00467f;
	font-size: clamp(36px, 4vh, 50px);
	letter-spacing: .025em;
	text-transform: uppercase;
	position: relative;
	margin-block-start: 0;
	margin-block-end: 0;
	margin: 0 0 .75rem;
}

.about svg{
	max-width: 285px;
	width: 80%;
	margin: 0 0 1rem;
}

.about p{
	font-size: 18px;
	max-width: 425px;
	line-height: 1.5em;
}

.about .item{
	padding: 0 3rem 0 7rem;
	margin: 0 0 3rem;
}

.about .item:last-of-type{
	margin: 0;
}

.mission{
	background: #bbd2e1;
	box-sizing: border-box;
	padding: 7rem 0;
	width: auto;
	max-width: 19.7222222222222vw;
	min-width: 355px;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.mission .item{
		padding: 0 3rem;
	margin: 0 0 3rem;
}

.mission .icon{
	width: 40%;
	max-width: 130px;
	min-width: 100px;
	margin: 0 0 .5rem;
}

.mission .icon img{
	width: 100%;
}

.mission h3{
	font-family: Thunder;
	color: #00467f;
	font-size: clamp(36px, 4vh, 50px);
	letter-spacing: .025em;
	text-transform: uppercase;
	position: relative;
	margin-block-start: 0;
	margin-block-end: 0;
	margin: 0 0 .75rem;
}

.mission p{
		font-size: 18px;
	max-width: 250px;
	line-height: 1.5em;
}


.map{
	width: 34.7368421052632vw;
	min-width: 600px;
	background: linear-gradient(90deg,rgba(187, 210, 225, 1) 85%, rgba(127, 162, 191, 1) 85%);
	position: relative;
}

.map:before{
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
		background-image: url(../images/map-bg.png);
	background-size: cover;
}


.map .ohio{
	position: absolute;
	aspect-ratio: 614/707;
	width: 86.3636363636364%;
	background: url(../images/map.png);
	background-size: 100%;
	top: 23.3%;
	left: 15%;
}


.map .ohio .cle{
	display: block;
	position: absolute;
	aspect-ratio: 352/216;
	width: 40.7166123778502%;
	background: url(../images/cle.png);
	background-size: 100%;
	right: 8.957654723127%;
	top: 15%;
	transition: all .5s ease;
}


.map .ohio .cbus{
		display: block;
	position: absolute;
	aspect-ratio: 378/219;
	width: 39.5765472312704%;
	background: url(../images/cbus.png);
	background-size: 100%;
	right: 27.2984441301273%;
	top: 48%;
		transition: all .5s ease;
}


.map .ohio .cin{
		display: block;
	position: absolute;
	aspect-ratio: 359/247;
	width: 40.0651465798046%;
	background: url(../images/cin.png);
	background-size: 100%;
	left: -5.6577086280057;
	top: 64%;
		transition: all .5s ease;
}



.map .scrible{
	position: absolute;
	width: 29.5522388059701%;
	top: 68.3%;
	left: 85%;
	z-index: 2;
}

.map .stars{
	position: absolute;
	aspect-ratio: 355/371;
	width: 27.4626865671642%;
	left: 90%;
	top: 50.4%;
	z-index: 3;
}

.map .stars .one{
	position: absolute;
	aspect-ratio: 166/123;
	width: 46.7605633802817%;
	background: url(../images/mstar-1.png);
	background-size: 100%;
	top: 0;
	left: 51.5492957746479%;
}

.map .stars .two{
	position: absolute;
	aspect-ratio: 166/123;
	width: 46.7605633802817%;
	background: url(../images/mstar-2.png);
	background-size: 100%;
	top: 29.9191374663073%;
	left: 0%;
}

.map .stars .three{
	position: absolute;
	aspect-ratio: 145/170;
	width: 40.8450704225352%;
	background: url(../images/mstar-3.png);
	background-size: 100%;
	top: 54.177897574124%;
	left: 59.1549295774648%;
}

.how-intro{
	width: auto;
	max-width: 18.4210526315789vw;
	min-width: 450px;
	background: #7fa2bf;
	padding: 7rem 3rem 7rem 5rem;
	box-sizing: border-box;
	position: relative;
}

.how-intro h2{
	font-family: Thunder;
	text-transform: uppercase;
	letter-spacing: .025em;
	color: #000;
	font-size: clamp(120px, 11.5vh, 170px);
	width: fit-content;
	margin: 0 0 0 auto;
}

.how{
	width: auto;
	max-width: 68.3333333333333%;
	min-width: 1200px;
	background: #7fa2bf;
}

.how .copy{
	box-sizing: border-box;
	padding:7rem 7rem 7rem 0;
	height: 100%;
}

.how .copy .item{
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
	border-bottom: 4px solid #000;
	padding: 1rem 0;
	/*min-height: 16.666666666666667%;*/
}

.how .copy .item:last-of-type{
	border-bottom: none;
	padding: 1rem 0 0;
}

.how .copy .item:first-of-type{
	padding: 0 0 1rem;
}

.how .copy .item h3{
	font-family: Thunder;
	text-transform: uppercase;
	font-size: clamp(26px, 3vh, 45px);
	letter-spacing: .025em;
		margin-block-start: 0;
	margin-block-end: 0;
	width: 45%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.how .copy .item .info{
	font-size: 18px;
	line-height: 1.4em;
	letter-spacing: .02em;
	width: 55%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	padding: 0 3rem 0 0;
}

.how .copy .item:nth-of-type(1) .info p{
	width: 520px;
}

.how .copy .item:nth-of-type(2) .info p{
	width: 510px;
}

.how .copy .item:nth-of-type(4) .info p{
	width: 590px;
}

.how .copy .item:nth-of-type(5) .info p{
	width: 560px;
}

.how .copy .item:nth-of-type(6) .info p{
	width: 555px;
}

.how-images{
	width: 32.7777777777778%;
	min-width: 590px;
	background: linear-gradient(90deg,rgba(127, 162, 191, 1) 75%, rgba(248, 151, 40, 1) 75%);
	position: relative;
	overflow: visible;
}

.how-images:before{
	position: absolute;
	content: "";
	aspect-ratio: 1018/2066;
	height: 100%;
	background: url(../images/divider-2-1.png);
	background-size: 100%;
	top: 0;
	right: 24%;
}

.how-images .texture{
	position: absolute;
	aspect-ratio: 1102/687;
	width: 182.3728813559322%;
	background: url(../images/banner-text.png);
	background-size: 100%;
	top: 0;
	left: 0;
}

.how-images .scrible{
	position: absolute;
	width: 57.6271186440678%;
	left: -62.3728813559322%;
	top: 84.7%;
		z-index: 2;
}


.how-images .duotone{
	position: absolute;
	aspect-ratio: 825/788;
	width: 65.9322033898305%;
	background: url(../images/duotone-2.png);
	background-size: 100%;
	left: 0;
	top: 35%;
	z-index: 2;
}

.how-images .kid-one{
	position: absolute;
	aspect-ratio: 1428/1535;
	width: 90.8474576271186%;
	background: url(../images/child-1.png);
	background-size: 100%;
	bottom: -9%;
	left: -48.2203389830508%;
	z-index: 4;
}


.how-images .kid-two{
	position: absolute;
	aspect-ratio: 1395/1757;
	width: 88.9830508474576%;
	background: url(../images/child-2.png);
	background-size: 100%;
	left: -3.3898305084746%;
	bottom: 0;
	z-index: 3;
}

.how-images .kid-three{
	position: absolute;
	aspect-ratio: 1474/1601;
	width: 87.9661016949153%;
	background: url(../images/child-3.png);
	background-size: 100%;
	right: -12.4915254237288%;
	bottom: -8%;
	z-index: 5;
}

.how-images .flower{
	position: absolute;
	aspect-ratio: 1/1;
	width: 30.5084745762712%;
	background: url(../images/flower-4.png);
	background-size: 100%;
	top: 86.4%;
	right: 3.3898305084746%;
	z-index: 6;
}

.impact{
	background: #f89728;
	width: auto;
	max-width: 38.888889vw;
	min-width: 600px;
	box-sizing: border-box;
	padding: 7rem 7rem 7rem 0;
	position: relative;
	z-index: -1;
}

.impact h2{
		font-family: Thunder;
	text-transform: uppercase;
	letter-spacing: .025em;
	color: #000;
	font-size: clamp(80px, 8vh, 110px);
	margin: 0 0 1rem;
}

.impact h3{
	font-weight: 600;
	font-size: clamp(28px, 3vw, 33px);
	letter-spacing: .02em;
	margin: 0 0 2rem;
}

.impact p{
	max-width: 460px;
	line-height: 1.5em;
	font-size: 18px;
}

.impact-num{
	background-color: #f89728;
	background-image: url(../images/impact-num.jpg);
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-position: right;
	width: 38.8888888888889vw;
	min-width: 700px;
}

.impact-num .wrapper{
	box-sizing: border-box;
	padding: 3rem 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	width: 75%;
	/*max-width: 650px;*/
}

.impact-num .wrapper .item{
	/*height: 16.666666666666667%;*/
	width: 100%;
	box-sizing: border-box;
	padding: 1rem 0 2rem;
	display: flex;
	border-top: 4px solid #000;
}

.impact-num .wrapper .item:first-of-type{
	border-top: none;
	padding: 0 0 2rem;
}

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

.impact-num .wrapper .item h3{
	font-family: Thunder;
	text-transform: uppercase;
	letter-spacing: .025em;
	color: #000;
	font-size: clamp(60px, 8vh, 100px);
	margin: 0 0 0;
	display: flex;
	height: fit-content;
	width: 38.1558028616852%;
}

.impact-num .wrapper .item h3 .extra{
	font-size: .5em;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.impact-num .wrapper .item .info{
	width: 61.8441971383148%;
}

.impact-num .wrapper .item p{

	line-height: 1.3em;
	letter-spacing: .02em;
	font-size: 18px;
}

.impact-num .wrapper .item p span{
	display: block;
	font-size: 15px;
}

.work{
		width: auto;
		max-width: 36.3888888888889vw;
	min-width: 650px;
	background-color: #FFC480;
	background-image: url(../images/texture.png);
	position: relative;
	box-sizing: border-box;
	padding: 7rem 2rem;
}

.work .star{
	position: absolute;
	aspect-ratio: 336/269;
	height: 10.7%;
	background: url(../images/black-star.png);
	background-size: 100%;
	right: -2.9007633587786%;
	top: 13%;
}


.work h2{
	font-family: Thunder;
	text-transform: uppercase;
	letter-spacing: .025em;
		color: #01498c;
	font-size: clamp(90px, 10vh, 140px);
	margin: 0 0 3rem;
}


.work p{
	max-width: 530px;
	line-height: 1.5em;
	font-size: 18px;
	padding: 0 0 3rem;
}

.work .arrow{
	aspect-ratio: 687/139;
	width: 51.6030534351145%;
	background: url(../images/arrow.png);
	background-size: 100%;
	animation: float 3s linear infinite;
}





.action{
				width: auto;
	max-width: 900px;
	min-width: 650px;
	box-sizing: border-box;
padding: 0 2rem;
	background-color: #ffc480;
	background-image: url(../images/texture.png);
	position: relative;
}



.action .mySwiper{
	position: relative;
	z-index: 2;
	overflow-x: visible !important;
	overflow-y: hidden !important;
	height: 100% !important;
}

.action .swiper-button-prev{
	left: -2% !important;
	margin-left: 0 !important;
	top: 45% !important;
}

.action .swiper-button-prev svg,
.action .swiper-button-next svg{
	display: none;
}

.action .swiper-button-prev::after {
    position: absolute;
    content: "" !important;
    width: 54px !important;
    height: 50px !important;
    background: url(../images/up.png) !important;
    background-size: 100% !important;
}

.action .swiper-button-next{
	left: -2% !important;
	margin-left: 0 !important;
	top: 55% !important; 
}

.action .swiper-button-next::after {
    position: absolute;
    content: "" !important;
    width: 54px !important;
    height: 50px !important;
    background: url(../images/down.png) !important;
    background-size: 100% !important;
}

.action .mySwiper .swiper-slide{
	display: flex;
	flex-direction: column;
	justify-content: center;
	transform: translateY(-10%); 
}

.action .mySwiper .swiper-slide .wrap{
	text-decoration: none;
}

.action .mySwiper .swiper-slide .wrap .cole{
	aspect-ratio: 2000/1499;
	width: 100%;
	margin: 0 auto;
	background: url(../images/cole-1.png);
	background-size: 100%;
	position: relative;
	z-index: 2;
	background-repeat: no-repeat;
}

.action .mySwiper .swiper-slide.one .wrap .cole{
	background: url(../images/cole-3.png);
	background-size: 100%;
}

.action .mySwiper .swiper-slide.two .wrap .cole{
	background: url(../images/cole-4.png);
	background-size: 100%;
}


.action .mySwiper .swiper-slide.three .wrap .cole{
	background: url(../images/cole-5.png);
	background-size: 100%;
}

.action .mySwiper .swiper-slide.five .wrap .cole{
	background: url(../images/cole-1.png);
	background-size: 100%;
}

.action .mySwiper .swiper-slide.six .wrap .cole{
	background: url(../images/cole-2.png);
	background-size: 100%;
}


.action .mySwiper .swiper-slide .wrap .info{
	/*width: 84.8148148148148%;*/
	width: 80%;
	background: #01498c;
	box-sizing: border-box;
	padding: 13rem 3rem 1rem;
	color: #fff;
	position: relative;
	/*margin-top: -10rem;*/
	margin: -10rem auto 0;
	/*left: 6.1728395061728%;*/
}

.action .mySwiper .swiper-slide .wrap .info h3{
	font-family: Thunder;
	text-transform: uppercase;
	font-size: 26px;
	letter-spacing: .025em;
	margin: 0 0 1rem;
	color: #ffc480;
	line-height: 1.1em;
}

.action .mySwiper .swiper-slide .wrap .info p{
	font-size: 16px;
	line-height: 1.5em;
	margin: 0;
	position: relative;
	z-index: 3;
}

.action .mySwiper .swiper-slide .wrap .info:before{
	position: absolute;
	content: "";
	aspect-ratio: 1243/221;
	width: 100%;
	background: url(../images/act-b.png);
	background-size: 100%;
	left: 0;
	top: 100%;
}



/*.action .mySwiper .swiper-slide .wrap .info:after{
	position: absolute;
	content: "";
	aspect-ratio: 1243/307;
	width: 100%;
	background: url(../images/act-b2.png);
	background-size: 100%;
	left: 0;
	top: 100%;
	z-index: 2;
}
*/


.stories{
	width: auto;
		max-width: 83.3333333333333vw;
	min-width: 1500px;
	background-color: #FFC480;
	background-image: url(../images/texture.png);
	padding: 7rem 3rem;
	box-sizing: border-box;
		position: relative;
}

.stories:before{
	position: absolute;
	content: "";
	aspect-ratio: 2396/720;
	width: 250%;
	background: url(../images/ht.png);
	background-size: cover;
	background-repeat: no-repeat;
	top: 75%;
}

.stories .wrapper{
	display: flex;
	flex-wrap: wrap;
	position: relative;
	z-index: 2;
	height: 100%;
}

.stories .wrapper .left{
	width: 50%;
}

.stories .wrapper .right{
	width: 50%;
}


.stories .wrapper .left h2{
	position: relative;
	font-family: Thunder;
	text-transform: uppercase;
	letter-spacing: .025em;
	color: #01498c;
	font-size: clamp(90px, 10vh, 140px);
	margin: 0 0 3rem;
}

.stories .wrapper .left h2 .star{
	position: absolute;
	aspect-ratio: 336/269;
	width: 27.8333333333333%;
	background: url(../images/black-star.png);
	background-size: 100%;
	right: 5%;
	top: 13%;
}

.stories .wrapper .left p{
	max-width: 88.3333333333333%;
	line-height: 1.5em;
	font-size: 18px;
	padding: 0 0 3rem;
}

.stories .wrapper .left .arrow{
	aspect-ratio: 687/139;
	width: 51.6030534351145%;
	background: url(../images/arrow.png);
	background-size: 100%;
	animation: float 3s linear infinite;
}

.stories .right{
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	transform: translateY(-3rem);
}

.stories .right .mySwiper{
	max-height: 100vh;
	height: 100%;
}

.stories .right .swiper-button-prev{
	left: -5% !important;
	margin-left: 0 !important;
	top: 45% !important;
}

.stories .right .swiper-button-prev svg,
.stories .right .swiper-button-next svg{
	display: none;
}

.stories .right .swiper-button-prev::after {
    position: absolute;
    content: "" !important;
    width: 54px !important;
    height: 50px !important;
    background: url(../images/up.png) !important;
    background-size: 100% !important;
}

.stories .right .swiper-button-next{
	left: -5% !important;
	margin-left: 0 !important;
	top: 55% !important; 
}

.stories .right .swiper-button-next::after {
    position: absolute;
    content: "" !important;
    width: 54px !important;
    height: 50px !important;
    background: url(../images/down.png) !important;
    background-size: 100% !important;
}


.stories .mySwiper .swiper-slide .wrap{
	text-decoration: none;
	position: relative;
}

.stories .mySwiper .swiper-slide .wrap .cole{
	aspect-ratio: 2000/1499;
	width: 90%;
	margin: 0 auto;
	background: url(../images/cole-1.png);
	background-size: 100%;
	position: relative;
	z-index: 2;
	background-repeat: no-repeat;
}

.stories .mySwiper .swiper-slide.one .wrap .cole{
	background: url(../images/cole-3.png);
	background-size: 100%;
}

.stories .mySwiper .swiper-slide.two .wrap .cole{
	background: url(../images/cole-4.png);
	background-size: 100%;
}


.stories .mySwiper .swiper-slide.three .wrap .cole{
	background: url(../images/cole-5.png);
	background-size: 100%;
}

.stories .mySwiper .swiper-slide.five .wrap .cole{
	background: url(../images/cole-1.png);
	background-size: 100%;
}
.stories .mySwiper .swiper-slide.six .wrap .cole{
	background: url(../images/cole-2.png);
	background-size: 100%;
}


.stories .mySwiper .swiper-slide .wrap .info{
	width: 80%;
	background: #01498c;
	box-sizing: border-box;
	padding: 11rem 3rem .5rem;
	color: #fff;
	position: relative;
	margin: -10rem auto 0;
}

.stories .mySwiper .swiper-slide .wrap .info h3{
	font-family: Thunder;
	text-transform: uppercase;
	font-size: 24px;
	letter-spacing: .025em;
	margin: 0 0 1rem;
	color: #ffc480;
	line-height: 1.1em;
}

.staff .mySwiper .swiper-slide .wrap .info p{
	font-size: 16px;
	line-height: 1.5em;
	margin: 0;
	position: relative;
	z-index: 3;
}

.stories .mySwiper .swiper-slide .wrap:before{
	position: absolute;
	content: "";
	aspect-ratio: 1243/221;
	width: 80%;
	background: url(../images/act-b.png);
	background-size: 100%;
	left: 50%;
	transform: translateX(-50%);
	top: 100%;
}


.board{
			width: auto;
	max-width: 70vw;
	min-width: 1260px;
		position: relative;
	background: #bbd2e1;
	padding: 7rem 0rem 7rem 7rem;
	box-sizing: border-box;
}


.board .intro{
	padding: 0 0 1rem;
	display: flex;
}

.board h2{
		font-family: Thunder;
	text-transform: uppercase;
	letter-spacing: .025em;
	color: #00467f;
	font-size: clamp(80px, 8vh, 110px);
	margin: 0 0 0;
	padding-right: 30px;
}

.board p{
	max-width: 500px;
	line-height: 1.5em;
}

.board .grid{
	width: 85%;
	display: flex;
	flex-wrap: wrap;
	margin: 0 -2rem;

}

.board .grid .item{
	width: 25%;
	/*width: 16.666666666666667%;*/
	box-sizing: border-box;
	padding: .75em;
}

.board .grid .item .info{
	text-align: center;
}

.board .grid .item .picture{
	width: 80%;
	margin: 0 auto 0px;
}

.board .grid .item .picture img{
	width: 100%;
}

.board .grid .item .info{
	font-size: .9em;
}

.board .grid .item .info .role{
	font-size: .75em;
}

.staff{
	width: 33.333vw;
	min-width: 600px;
		position: relative;
	position: relative;
		padding: 7rem 0;
		box-sizing: border-box;
	background-color: #bbd2e1;
	background-image: url(../images/divider-2.png);
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: right;
}


.staff h2{
		font-family: Thunder;
	text-transform: uppercase;
	letter-spacing: .025em;
	color: #00467f;
	font-size: clamp(80px, 8vh, 110px);
	margin: 0 0 2rem;
}

.staff .copy{
	display:flex;
  flex-wrap:wrap;
  margin: -.75rem;
  width: 80%;
}

.staff .item{
 box-sizing: border-box;
   -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  padding: .75rem;
    -ms-flex-preferred-size: 50%;
  flex-basis: 50%;
  max-width: 50%;

}

.staff .item .picture{
	width: 80%;
	margin: 0 auto;
}

.staff .item .picture img{
	width: 100%;
}


.staff .item .info{
	font-size: .9em;
	letter-spacing: .02em;
	font-weight: 800;
	color: #00467f;
	text-align: center;
}

.staff .item .info .role{
	font-size: .75em;
}

.involve-title{
	display: none;
}

.involve{
	width: 46.9444444444444vw;
	min-width: 845px;
	position: relative;
	background: #f89728;
	/*padding: 7rem 0;*/
	box-sizing: border-box;
}

.involve .doods{
	position: absolute;
	aspect-ratio: 342/262;
	height: 26.2%;
	left: -25.1952662721893%;
	top: -4.5%;
}

.involve .doods .star{
	position: absolute;
	aspect-ratio: 355/345;
	height: 50.381679389313%;
	background: url(../images/star.png);
	background-size: 100%;
	top: 49.618320610687%;
	left: 30.4093567251462%;
}

.involve .doods .dots{
	position: absolute;
	aspect-ratio: 494/347;
	height: 37.7862595419847%;
	background: url(../images/dots-b.png);
	background-size: 100%;
	left: 0;
	top: 12.2137404580153%;
}

.involve .doods .scrible{
	position: absolute;
	width: 48.8304093567251%;
	top: 0;
	left: 49.2957746478873%;

}

.involve h2{
	font-family: Thunder;
	text-transform: uppercase;
	letter-spacing: .025em;
	color: #000;
		font-size: clamp(80px, 8vh, 110px);
		margin: 0 0 20px;
	position: relative;
	top: 9%;
	left: 12.189349112426%;
}



.involve .arrow{
	position: absolute;
	aspect-ratio: 304/218;
	height: 10.6%;
	background: url(../images/arrow-3.png);
	background-size: 100%;
	top: 5.3%;
	left: 35.7751479289941%;
	animation: 3s linear infinite rote;
}

@keyframes rote {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(30deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.involve .col{
	position: absolute;
	aspect-ratio: 1815/1330;
	height: 68.4%;
	top: 31.6%;
	left: -8.9349112426036%;
}


.involve .col .cboard{
	position: absolute;
	aspect-ratio: 627/1342;
	height: 83.1578947368421%;
	background: url(../images/cardboard.png);
	background-size: 100%;
	left: 60.9366391184573%;
	top: 16.9172932330827%;
}

.involve .col .guys{
	position: absolute;
	aspect-ratio: 1141/1280;
	height: 96.2406015037594%;
	background: url(../images/guys.png);
	background-size: 100%;
	left: 19.6694214876033%;
	top: 3.8345864661654%;
	z-index: 2;
}

.involve .col .woman{
	position: absolute;
	aspect-ratio: 848/948;
	height: 71.2781954887218%;
	background: url(../images/woman.png);
	background-size: 100%;
	top: 36.0902255639098%;
	left: .5509641873278%;
	z-index: 3;
}

.involve .col .boy{
	position: absolute;
	aspect-ratio: 611/904;
	height: 67.9699248120301%;
	background: url(../images/boy.png);
	background-size: 100%;
	left: 33.9393939393939%;
	top: 36.0902255639098%;
	z-index: 5;
}

.involve .col .girl{
	position: absolute;
	aspect-ratio: 774/953;
	height: 71.6541353383459%;
	background: url(../images/young-w.png);
	background-size: 100%;
	top: 29.0977443609023%;
	left: 57.3002754820937%;
	z-index: 3;
}

.involve .col .flower{
	position: absolute;
	aspect-ratio: 1/1;
	height: 27.1428571428571%;
	background: url(../images/flower-6.png);
	background-size: 100%;
	top: 42.781954887218%;
	left: 32.1212121212121%;
	z-index: 4;
}

.involve .col .scrible{
	position: absolute;
	width: 70.1011011011011%;
	top: 8.3458646616541%;
	left: 4.8484848484848%;
}

.involve-two{
	position: relative;
	background: #f89728;
	width: 50vw;
	min-width: 700px;
	box-sizing: border-box;
	padding: 7rem 150px 2rem 0;
}

.involve-two .copy{
	max-width: 825px;
}

.involve-two .copy .item{
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
	border-bottom: 4px solid #000;
	padding: 1rem 0;
	/*min-height: 16.666666666666667%;*/
}

.involve-two .copy.item:last-of-type{
	border-bottom: none;
	padding: 1rem 0 0;
}

.involve-two .copy .item:first-of-type{
	padding: 0 0 1rem;
}

.involve-two .copy .item .wrap{
	color: #000;
	text-decoration: none;
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}

.involve-two .copy .item .wrap h3{
	font-family: Thunder;
	text-transform: uppercase;
	letter-spacing: .025em;
	color: #000;
	font-size: 60px;
	width: 400px;
}

.involve-two .copy .item .wrap .info{
	width: calc(100% - 457px);
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	padding: 0 2rem;
}

.involve-two .copy .item .wrap p{
	font-size: 17px;
	letter-spacing: .02em;
	max-width: 300px;
}

.involve-two .copy .item .wrap .arrow{
	aspect-ratio: 203/132;
	width: 57px;
	background: url(../images/arrow-2.png);
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.involve-two .intro{
	margin: 2rem 0 0 0;
	max-width: 500px;
    line-height: 1.5em;
    font-size: 18px;
}

.involve-two .connect{
	aspect-ratio: 875/154;
	width: 407px;
	background: url(../images/connect.png);
	background-size: 100%;
	background-repeat: no-repeat;
	display: flex;
	box-sizing: border-box;
	padding: 8px 40px 20px;
	position: absolute;
	bottom: 55px;
	right: 125px;
}

.involve-two .connect h4{
	font-family: Thunder;
	text-transform: uppercase;
	letter-spacing: .025em;
	color: #000;
	font-size: 31px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.involve-two .connect ul{
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0 0 0 25px;
}

.involve-two .connect ul li{
	height: 36px;
	margin: 0 0 0 10px;
}

.involve-two .connect ul li:first-of-type{
	margin: 0;
}

.involve-two .connect ul li a{
	height: 36px;
	display: block;
}


.involve-two .connect ul li a img{
	height: 100%;
}

/*Pop ups --------------------------*/




.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
  z-index: 999;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

body:has(.overlay:target),
body:has(.overlay:target) .pin-spacer{
	overflow: hidden;
}

.outer{
  position: absolute;
  top: 30%;
  left: 50%;
  aspect-ratio: 575/815;
  width: 600px;
  transform: translate(-50%,-30%);
/*  box-sizing: border-box;
  padding: 20px;*/
  background: url(../images/alert.png);
  background-size: 100%;
}


.outer .inner { box-sizing: border-box; position: relative; width: 100%; height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
 padding: 250px 30px 50px 60px; text-align: center; }

.outer .inner h2{
 font-family: Thunder;
	font-size: 50px;
	line-height: 1.5em;
	text-transform: uppercase;
	letter-spacing: .025em;
	margin: 0 0 0;
	margin-block-start: 0;
	margin-block-end: 0;
}

.outer .inner .text{
  box-sizing: border-box;
  max-height: 420px;
  overflow: auto;
  text-align: left;
  font-size: 18px;
  line-height: 1.3em;
  padding-right: 30px;
}


.outer .inner .text .image{
  margin: 0 auto 30px;
  max-width: 350px;
}

.outer .inner .text .image img{
  width: 100%;
}


.outer .inner .text .bold{
  font-weight: 600;
}

.outer .inner .text .it{
  font-style: italic;
}

.outer .inner .text p{
  margin: 0 0 30px;
  font-size: 20px;
  line-height: 1.5em;
}

.outer .inner .text p.small{
 font-size: 14px;
 margin: -25px 0 20px;
}

.outer .inner .text ul{
  margin:0 0 30px;
  padding-left:30px;
  list-style: circle;
}

.outer .inner .text li{
  margin:0 0 10px;
}


/*
.outer .inner .hide{
  display: inline-block;
  margin-top: 20px;
}*/
.outer .inner a.btn{
	width: fit-content;
	display: block;
	background: #000;
	font-family: Thunder;
	letter-spacing: .025em;
	font-size: 22px;
	text-transform: uppercase;
	padding: 1.5em 1.75em;
	box-sizing: border-box;
	text-decoration: none;
	color: #ffc480;
	  -webkit-mask-image: url(../images/btn.png);
  mask-image: url(../images/btn.png);
  mask-size: 100%;
  mask-repeat: no-repeat;
  mask-position: center;
  position: relative;
  margin: 30px auto 0;
  transform: translateX(-25%);
}

.outer .inner  a.btn span{
	position: relative;
	z-index: 3;
}

.outer .inner a.btn:before{
	position: absolute;
	content: "";
	width: 0;
	height: 100%;
	background: #00467f;
	top: 0;
	left: 0;
	transition: width .5s ease;
}

.outer .inner a.btn:hover::before{
	width: unset;
}