.container{
	margin-left:auto;
	margin-right:auto;
	max-width:1520px;
	overflow: hidden;
}

body{
	background-color: #333;
}

h3{
	font-family: 'Montserrat', sans-serif;
	font-size: 24px;
	font-weight: bold;
	text-transform: uppercase;
}

header{
	width: 100%;
	height: 1086px;
	background-image: url(../images/BMF-184_header_graphic.gif);
	background-size: cover;
	background-position: center;
	position: relative;
}





header .gradient{
	background: rgb(2,0,36);
background: linear-gradient(180deg, rgba(2,0,36,.15) 0%, rgba(34,51,90,.95) 35%);
width: 100%;
	height: 1086px;
	position: absolute;

}

.header-slide{
	position: relative;
	max-width: 1200px;
	padding: 0 40px;
	margin: 350px auto 30px;
}

.header-slide img{
	width: 100%;
}


header .logo{
	background-image: url(../images/logo.png);
	width: 172px;
	height: 110px;
	background-size: 100%;
	margin: 0 auto 20px;
}


.header-content h5{
	content: "2021 annual report";
	text-transform: uppercase;
	text-align: center;
	color: #fff;
	font-weight: bold;
	font-family: 'Montserrat', sans-serif;
}

/*Letter section --------------------*/

.letter{
	height: 638px;
	background-color: #fdca33;
	display: flex;
	background-image: url(../images/yellow-bg.jpg);
	background-size: cover;
}

.letter .images{
	width: 645px;
	height: 324px;
	margin-top: 155px;
	background-color: #ccc;
	background-image: url(../images/letter-img.jpg);
	background-size: cover;
}


.letter .text{
	max-width: 520px;
	margin-left: 85px;
	margin-top: 155px;
}

.letter .text h3{
	color: #004280;
}

.letter .text p{
	font-family: 'Montserrat', sans-serif;
	font-weight: medium;
	font-size: 16px;
	letter-spacing: .25px;
	line-height: 1.5em;
	padding: 20px 0;
}

.letter .text a{
	text-transform: uppercase;
	color: #fff;
	font-weight: bold;
	font-family: 'Montserrat', sans-serif;
	text-decoration: none;
}

.reinvent{
	background-image: url(../images/new-reimagine-bg.jpg);
	height: 906px;
	background-size: cover;
	background-position: top center;
	position: relative;
}

.reimagine{
	background-image: url(../images/new-reconnect-bg.jpg);
	height: 906px;
	background-size: cover;
		background-position: top center;
	position: relative;
}

.return{
	background-image: url(../images/rejuv-bg.jpg);
	height: 906px;
	background-size: cover;
	background-position: top center;
	position: relative;
}

.reinvent .wrap, .return .wrap{
	max-width: 1000px;
	margin: 0 auto;
} 

.reimagine .wrap{
	max-width: 700px;
	margin: 0 auto;
}

.reinvent .wrap .text, .return .wrap .text{
	margin-left: calc(100% - 550px);
	padding-right: 20px;
}

.reimagine .wrap .text{
	margin-right: calc(100% - 450px);
	padding-left: 20px;
}

.reinvent .text h3, .return .text h3, .reimagine .text h3{
	padding-top: 250px;
}

.reinvent .text h3, .reimagine .text h3, .return .text h3{
	color: #fd2011;
}

.reinvent .text p, .reimagine .text p, .return .text p{
	font-family: 'Montserrat', sans-serif;
	font-weight: medium;
	font-size: 16px;
	letter-spacing: .25px;
	line-height: 1.5em;
	padding: 20px 0;
}

.reinvent .text a, .reimagine .text a, .return .text a{
	text-transform: uppercase;
	font-weight: bold;
	font-family: 'Montserrat', sans-serif;
	color: #000;
	text-decoration: none;
}

.reinvent h2, .reimagine h2, .return h2{
	font-size: 48px;
	font-weight: 800;
	text-transform: uppercase;
	font-family: 'Montserrat', sans-serif;
	color: #fff;
}

.reinvent h2 span, .reimagine h2 span, .return h2 span{
	border: solid 7px #ffc923;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-right: 5px;
}

.reimagine h2{
	padding-top:125px;
}

.reinvent h2{
	padding-top: 125px;
}

.return h2{
	padding-top: 185px;
}

.fun-shape-1{
	position: absolute;
	z-index: 5;
	background-image: url(../images/fun-shape-1.png);
	background-size: 100%;
	width: 248.25px;height: 376.5px;
	top: -70px;
	overflow-x: visible;
	overflow-y: visible;
}

.fun-shape-2{
	position: absolute;
	z-index: 5;
	background-image: url(../images/fun-shape-2.png);
	background-repeat: no-repeat;
	background-size: 100%;
	width: 492px;
	height: 433px;
	top: 614px;
	right: 0;
		overflow-x: visible;
}


.deb{
		background-image: url(../images/deb-bg.jpg);
	height: 1090px;
	background-size: cover;
		background-position: top center;
	position: relative;
}


.deb .wrap{
	max-width: 1000px;
	margin: 0 auto;
}

.deb .wrap .text{
			margin-right: calc(100% - 550px);
	padding-left: 20px;
}

.deb h2{

	padding-top:125px;
}

.deb .text h3{
	padding-top: 250px;
	color: #222c51;
}


.deb .text p{
	font-family: 'Montserrat', sans-serif;
	font-weight: medium;
	font-size: 16px;
	letter-spacing: .25px;
	line-height: 1.5em;
	padding: 20px 0;
}

.deb .text a{
	text-transform: uppercase;
	font-weight: bold;
	font-family: 'Montserrat', sans-serif;
	color: #000;
	text-decoration: none;
}

.deb h2{
		font-size: 32px;
	font-weight: 800;
	text-transform: uppercase;
	font-family: 'Montserrat', sans-serif;
	color: #fff;
}


.divider{
	background-image: url(../images/divider.jpg);
	height: 238px;
	background-size: cover;
	background-position: center;
}

.grants-fin{
	height: auto;
	background-image: url(../images/blue-bg.jpg);
	background-position: cover;
	position: relative;
}


.grants-fin .fun-shape-3{
	background-image: url(../images/fun-shape-3.png);
	background-repeat: no-repeat;
	background-size: 100%;
	height: 91px;
	width: 517px;
	position: absolute;
	top:85px;
	left: 50%;
	margin-left: -258.5px;
}

.grants-fin div h2{
	font-size: 48px;
	font-weight: bold;
	text-transform: uppercase;
	font-family: 'Montserrat', sans-serif;
	text-align: center;
	padding-top: 225px;
	margin-left: auto;
	margin-right: auto;
	color: #fff;
}

.grants-fin .wrap{
	display: flex;
	flex-flow: row wrap;
	max-width: 1180px;
	margin: 0 auto;
	padding: 20px;
}

.grants-fin .wrap .item{
	display: block;
	width: 50%;
	padding: 20px;
	box-sizing: border-box;
		position: relative;
}

.grants-fin .wrap .item img{
	max-width: 100%;
	width: 100%;
/*	background-color: #ccc;
	margin-right: 40px;
	margin-bottom: 30px;
	position: relative;*/
}

.grants-fin .wrap .item h4{
	position: absolute;
	bottom: 54px;
	left: 54px;
	font-weight: bold;
	color: #fff;
	text-transform: uppercase;
	font-family: 'Montserrat', sans-serif;
	font-size: 34px;
	line-height: 20px;
}

.grants-fin .wrap .item h4 span{
	text-transform: uppercase;
	font-weight: bold;
	font-family: 'Montserrat', sans-serif;
	color: #ffc923;
	font-size: 12px;
}


/*.grants-fin .youth{
	border-top: 22px solid #ff1f0f;
}


.grants-fin .collegiate{
	border-top: 22px solid #ffc923;
}


.grants-fin .adult{
	border-top: 22px solid #ffc923;
}


.grants-fin .hudson{
	border-top: 22px solid #ff1f0f;
}*/

.grants-fin .wrap .item:nth-of-type(2), .grants-fin .wrap .item:nth-of-type(4){
	margin-right: 0px;
}

.grants-awd{
	background-image: url(../images/yellow-big-bg.jpg);
	background-size: cover;
	height: 1000px;
	position: relative;
}

.grants-awd .text{
	display: flex;
	max-width: 1150px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 105px;
}

.grants-awd .text .text-one, .grants-awd .text .text-two{
	width:50%;
}

.grants-awd .text .text-one h2{
	font-family: 'Montserrat', sans-serif;
	font-weight: bold;
	font-size: 24px;
	margin-bottom: 30px;
	text-transform: uppercase;
}

.grants-awd .text .text-one span{
	color: #004280;
	font-size: 85px;
	font-family: 'Montserrat', sans-serif;
	font-weight: bold;
}

.grants-awd .text .text-two p{
	max-width: 550px;
	width: 100%;
	font-family: 'Montserrat', sans-serif;
	font-weight: medium;
	font-size: 16px;
	letter-spacing: .25px;
	line-height: 1.5em;
	padding: 20px 0;
}

.grants-awd .text .text-two a{
	text-transform: uppercase;
	font-weight: medium;
	font-family: 'Montserrat', sans-serif;
	color: #000;
	text-decoration: none;
}

.grants-awd .graph img{
	max-width: 100%;
	padding: 130px 0 0 220px;

}

.fun-shape-4{
	position: absolute;
	z-index: 5;
	background-image: url(../images/fun-shape-4.png);
	background-repeat: no-repeat;
	background-size: 100%;
	width: 408px;
	height: 335.25px;
	top: 225px;
	left: 0;
}


.divider2{
	height: 56px;
	background-color: #fff;
}


/* Team Section */



#team{
	background-color: #162751;
	display: flex;
}

.flex-grid{
	display:flex;
	flex-wrap:wrap;
}

.flex-grid .item{
	box-sizing: border-box;
	-webkit-box-flex: 0;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	padding: .75rem;	
}

#team h2{
	-ms-flex-preferred-size: 100%;
  	flex-basis: 100%;
  	max-width: 100%;
	padding: .75rem;
	font-size: 48px;
	font-weight: bold;
	text-transform: uppercase;
	font-family: 'Montserrat', sans-serif;
	color: #fff;
}

#team .item{
	font-size:14px;
	font-family: 'Montserrat', sans-serif;
	line-height: 1.2em;
	-ms-flex-preferred-size: 33.3333%;
  	flex-basis: 33.3333%;
  	max-width: 33.3333%;
  	color: #fff;
}

#team .item img{
	display: block;
	margin-bottom: 10px;
	max-width: 100%;
}
#team .item span{
	
	display: block;
	font-size:13px;
	font-style:italic;
	margin-top:3px;
}

#trustees{
	background-color: #ff1906;
	float:left;
	width:40%;
	padding: 100px 50px;
}
#trustees .item{
	-ms-flex-preferred-size: 50%;
  	flex-basis: 50%;
  	max-width: 50%;
}

#staff{
	background-image: url(../images/blue-bg.jpg);
	background-size: cover;
	float:right;
	width:60%;
	padding: 100px 50px;
}



.clear{
	clear: both;
}

.departed{
	background-image: url(../images/yellow-big-bg.jpg);
	background-size: cover;
	/*height: 512px;*/
	padding: 130px 0px;
	position: relative;
	display: flex;
}

.departed #team{
	background: transparent;
	display: flex;
}

#departed{
	padding: 0px 50px;
}

#departed .item{
	font-size:14px;
	font-family: 'Montserrat', sans-serif;
	line-height: 1.2em;
	-ms-flex-preferred-size: 33.3333%;
  	flex-basis: 33.3333%;
  	max-width: 33.3333%;
  	color: #222c51;
}

.departed .text-space{

}

.departed .text{
	max-width: 450px;
	padding: 30px 0px;
	margin: 0 auto;
}

.departed .text h3{
	color: #fd2011;
}

.departed .text p{
	font-family: 'Montserrat', sans-serif;
	font-weight: medium;
	font-size: 16px;
	letter-spacing: .25px;
	line-height: 1.5em;
	padding: 20px 0;
}

footer{
	position: relative;
	height: 505px;
	background-color: #fff;
}

.fun-shape-5{
	position: absolute;
	z-index: 5;
	background-image: url(../images/fun-shape-5.png);
	background-repeat: no-repeat;
	background-size: 100%;
	width: 393px;
	height: 597px;
	right: 0;
	top: -110px;
		overflow-x: visible;
}

footer .content{
	position: absolute;
	top: 95px;
	left: 250px;
}

footer .content .logo-color{
	background-image: url(../images/color-logo.png);
	background-size: 100%;
	width: 474px;
	height: 114px;
	margin-bottom: 30px;
}

footer .content p{
	max-width: 550px;
	font-family: 'Montserrat', sans-serif;
	font-weight: medium;
	font-size: 16px;
	letter-spacing: .25px;
	line-height: 1.5em;
	margin-left: 25px;
}

/*mobile images ----------------------*/

.mobile-image{
	display: none;
}

/*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: 6;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  box-sizing: border-box;
  padding: 70px;
  background: #fff;
  border-radius: 5px;
  max-width: 800px;
  transition: all 5s ease-in-out;
  width: 100%;
}

.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}

.popup .content{
  max-height: 500px;
  overflow: auto;
  padding-right: 60px;
}

.popup h3{
	padding-bottom: 30px;
}

.popup p{
	line-height: 1.3em;
	font-family: 'Montserrat', sans-serif;
	font-weight: medium;
	font-size: 16px;
	letter-spacing: .25px;
}

.popup p span.bold{
	font-weight: 800;
}


/*Responsive ---------------------------------*/

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

}

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


	.letter .images{ background-position: right;}
	.letter .text{margin-left: 55px;}

	.grants-awd .text{width: 1000px;}
	.grants-awd .text .text-one span{font-size: 65px}

	footer{ height:378.75px; }
	footer .content{left:150px;}
	.fun-shape-5{height:447.75px; width: 294.75px; top:-85px;}
}

@media screen and (max-width:  1250px){
	.fun-shape-4{display: none;}
	.grants-awd .graph img{ box-sizing: border-box;padding: 130px 40px 0 40px;}
}

@media screen and (max-width: 1100px){
	header{height: 856px;}
	.header-slide{margin: 220px auto 30px;}

	.letter{height: 550px;}
	.letter .images{ background-position: right; margin-top: 105px;}
	.letter .text{margin-left: 35px; margin-top: 125px;}

	.fun-shape-1{display: none;}

	.grants-awd .text{width: 800px;}
	.grants-awd .text .text-one span{font-size: 60px}

	.departed{display: block; padding: 100px 0px;}
	#departed{padding: 0; margin: 0px auto;}
	
	footer .content{left:100px;}
}


@media screen and (max-width: 900px) {
	#team{ display:block; }

	#staff, #trustees{ width:auto; }
		#trustees .item{max-width: 33.33%;}
}

@media screen and (max-width: 850px) {
	.container{width: 100%;}


	header{height: 656px;}


	header .logo{width: 129px;height: 82.5px;}

	.fun-shape-1, .fun-shape-2{display: none;}

	.letter{background-position: right;}
	.letter{flex-direction: column; height: 850px;}
	.letter .images{height:100%; width: 645px;height: 324px;}
	.letter .text{ margin-top: 55px; }

	.reinvent, .reimagine, .return{background-image: none; background-color: #fff; height: auto; max-width: none;}
	.deb{background-image: url(../images/yellow-bg.jpg); height: auto; max-width: none;}
	.reimagine .wrap{max-width: none;}
	.deb .wrap{max-width: none;}
	.reinvent .wrap .text, .return .wrap .text{margin-left: 0px; padding:80px;}
	.mobile-image{display: block; margin: -60px -40px 0px; max-width: calc(100% + 80px); width: auto;}
	.reimagine .wrap .text{margin-right: 0; padding:80px;}
	.deb .wrap .text{margin-right: 0; padding:80px;}
	
	.reinvent h2, .reimagine h2, .return h2, .deb h2{background-image: url(../images/blue-bg.jpg); background-color: #22335a; padding: 100px 80px 100px 80px; margin: -80px -80px 60px;}
	.reinvent .text h3, .reimagine .text h3, .return .text h3, .deb .text h3{padding-top: 40px;}

	.divider{height: 118px;}

	.grants-awd .text{width: 711.6px; flex-direction: column;}
	.grants-awd .text .text-one, .grants-awd .text .text-two{width: 100%}
	.grants-awd .text .text-one span{font-size: 60px}
	.grants-awd .graph img{}


	footer{ height:378.75px; }
	footer .content{left:75px;}
	footer .content .logo-color{width: 355.5px;height: 85.5px;}
	.fun-shape-5{height:335.8125px; width: 221.0625px; top:-65px;}

}

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

	/*.reimagine .wrap .text{margin-left: calc(100% - 550px);}
	.reimagine .wrap .text h3{padding-top: 200px;}*/

	.grants-fin .wrap .item{width: 100%;}
}

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

	.letter{flex-direction: column; }

	.grants-awd{height: 900px;}
	.grants-awd .text{width: 650px;}
	.grants-awd .graph img{padding-top: 50px}


	#team .item{ -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%;}
	#departed{margin: 0; padding: 0px 50px;}
	.departed{padding: 80px 0px;}

	
}

@media screen and (max-width: 700px) {
	.letter .images{width: 483.75px;height: 243px;}

	.popup{width: 80%}


	.grants-fin div h2{font-size: 40px;}

	.grants-awd .text{width: 550px;}
	
	footer{ height:378.75px; }
	footer .content{left:55px; width: 80%;}
	footer .content .logo-color{width: 355.5px;height: 85.5px;}
	.fun-shape-5{height:335.8125px; width: 221.0625px; top:-60px;}

}

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

	.letter{height: auto;}
	.letter .text{margin-left: 40px; margin-bottom: 30px;}
	.departed .text-space{ padding: 0px 40px;}

	.fun-shape-2{width: 276.75px;height: 243.5625px;top: 800px;}


	.grants-awd .text{width: 475px;}
	.grants-awd .graph img{ padding: 60px 40px;}

	#team .item{ -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%;}

	.flex-grid{margin: 0 -.75rem;}

	footer{ height:378.75px; }
	footer .content{left:35px;}
	footer .content .logo-color{width: 355.5px;height: 85.5px;}
	.fun-shape-5{height:251.859375px; width: 165.796875px; top:-45px;}


}

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

	header .logo{width: 96.75px;height: 61.875px;}
	header{height:  500px;}
	.header-slide{margin: 150px auto 30px;}
	header .gradient{background: linear-gradient(180deg, rgba(2,0,36,.15) 0%, rgba(34,51,90,.95) 15%);}


	.letter .images{width: 362.8125px;height: 182.25px; margin-top: 40px;}
	.letter .text{ margin-left: 0px; margin-top: 0px; padding: 40px;}

	.reinvent h2, .reimagine h2, .return h2{font-size: 38px; padding: 70px 40px; margin: -40px -40px 60px;}
	.deb h2{padding: 70px 40px; margin: -40px -40px 60px;}
	.reinvent .wrap .text, .return .wrap .text, .reimagine .wrap .text, .deb .wrap .text {padding:40px;}

	.divider{height: 98px;}

	.grants-fin div h2{font-size: 36px; padding-top: 180px;}
	.grants-fin .fun-shape-3{height: 54.6px;width: 310.2px;margin-left: -155.1px; top: 65px;}

	.grants-fin .wrap .item h4{bottom: 34px;left: 34px;font-size: 26px;}



	.grants-awd{height: auto;}
	.grants-awd .text{width: auto; padding: 40px;}
	.grants-awd .text .text-one span{font-size: 50px}

	#team h2{font-size: 34px; padding: 0 0 20px;}


	#trustees, #staff{padding: 40px 40px;}
	#departed{padding: 0px 40px;}

		footer{ height:378.75px; }
	footer .content{left:35px;}
	footer .content .logo-color{width: 266.625px;height: 64.125px;}


}

@media screen and (max-width: 400px) {
	footer .content .logo-color{width: 199.96875px;height: 48.09375px;}
	footer .content{left:25px;}

	.departed{padding: 50px 0px;}
}

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