:root {
  --army-green: #5f7a50; 
  --afc-yellow: #ffd530; 
  --aal-red: #E61E26;
  --dark-grey: #333333;
  --light-grey: #B8B8B8;
}
/* == ABOUT  === */
.hero-about {background-image: url('../img/about/hero-about-sm.webp');}
@media (min-width: 768px) {.hero-about{background-image: url('../img/about/hero-about-md.webp'); background-position: center center;}}
@media (min-width: 1200px) {.hero-about {background-image: url('../img/about/hero-about.webp'); }}

.who-we-serve {background: url('../img/about/who-we-serve-soldier.png') no-repeat right bottom;  background-size: auto 50%;}
@media (min-width: 992px) {.who-we-serve {background-size: auto 60%;}}
@media (min-width: 1200px) {.who-we-serve {background-size: auto 80%;}}
@media (min-width: 1400px) {.who-we-serve {background-size: auto 100%;}}
@media (max-width: 768px) {.who-we-serve {background:none }}

.leader-pic{ width: 100%; background: #Efefef; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.leader-pic img{ bottom: 0; margin: auto auto 0 auto; filter: grayscale(100%); -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; -ms-transition: all 300ms ease-out; transition: all 300ms ease-out; }
.leader-pic img:hover { filter: grayscale(0%); display: block; background: rgba(224, 224, 224, 0.7);}

.name {font-weight: 700;}
.title {font-weight: 400; color:var(--aal-red); font-size: 1rem; display:block; }

.bio-content { display: flex; align-items: flex-start;}
.bio-text { max-width: 100%; margin-left: 5%; margin-right: 5%; margin-bottom: 2.5%; text-align: start;}
.close-bio { background: transparent; border: none; font-size: 1.5em; cursor: pointer; margin-bottom: 10px; color: #fff; margin-left: 95%; margin-top: 2.5%;}
.collapsing { transition: .3s transform ease-in-out;}

.modal .modal-body {font-size:1rem; font-weight:500;}
.modal .name {font-weight: 700; font-size:1.5rem; margin-top:0.6rem; line-height:1.2;}
.modal .title {font-weight: 700; line-height:1.2; margin-top:5px;}

@media (min-width: 992px) {.modal-lg {width: 885px;} }

#careers .carousel-indicators { bottom: -82px; }