.staff-page .staff-wrapper {display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}

.element.staff-member {width: 22.75%; margin: 0 3% 0 0; padding: 0 0 35px 0; display: block; text-align: center; line-height: 1.3em;}
.element.staff-member:nth-of-type(4n+4) {margin: 0 0 0 0; padding: 0 0 0 0;}
.element.staff-member:nth-of-type(4n+5) {clear:both;}

.staff-image img {width: 100%; height: auto; display:block; }

.staff-bio button.js-bfm-staff-bio {background: #103777; color: #ffffff; font-size: 1em; line-height: 1.6em; cursor: pointer; width: 100%; text-align: center; border: none; outline: none; text-transform: capitalize; transition: all 0.3s; }
.staff-bio button.js-bfm-staff-bio.active, .staff-bio button.js-bfm-staff-bio:hover {background: #999999;}
.staff-bio button.js-bfm-staff-bio:after {content: '\ea43'; font-family: "BlueFireMedia"; color: #ffffff; font-size: 1em;  float: right; margin-left: 5px;}
.staff-bio button.js-bfm-staff-bio.active:after {content: '\ea41';}

.staff-name {font-size: calc(16px + .7vw); line-height: 1.3em; color: #103777;}
.staff-title {font-size: calc(12px + 0.5vw); font-style: italic; line-height: 1.3em;}
.staff-email {font-size: calc(12px + 0.25vw); line-height: 1.3em;}
.staff-phone {font-size: calc(12px + 0.25vw); line-height: 1.3em;}

div.panel {max-height: 0; overflow: hidden; opacity: 0; text-align: justify; transition: 0.6s ease-in-out;}
div.panel.show {opacity: 1; max-height: 1500px;}

.staff-page .staff-pic-missing {width: 256px; height: 341px; max-width:100%;  display:block; background: #e2e2e2; margin: 0 auto; position: relative;} /* width and height are for a 1200px wide site. */
.staff-page .staff-pic-missing {width: 300px; height: 400px;}    /* these widths and heights are for a 1400px wide site. */ 
.staff-page .staff-pic-missing:before {content: "\e9c7"; font-size: 250px; color: #ffffff; font-family: "BlueFireMedia"; display:block; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);}


@media only screen and (max-width:1400px) {            /* Enable this line 1400px wide site. */
/*@media only screen and (max-width:1200px) {*/                /* Disable this line for a 1400px wide site. */
  .staff-page .staff-pic-missing {width: 22vw; max-width:100%; height: 29vw;}
  .staff-page .staff-pic-missing:before {font-size: 18vw;}
}

@media only screen and (max-width:1024px) {
  .element.staff-member:nth-of-type(4n+4) {margin: 0 3% 0 0; padding: 0 0 35px 0;}
  .element.staff-member:nth-of-type(4n+5) {clear: none;}
  .element.staff-member {width: 31.3%; margin: 0 3% 0 0; padding: 0 0 35px 0;}
  .element.staff-member:nth-of-type(3n+3) {margin: 0 0 0 0;}
  .element.staff-member:nth-of-type(3n+4) {clear:both;}

  .staff-page .staff-pic-missing {width: 29.5vw; height: 39.4vw;}
  .staff-page .staff-pic-missing:before {font-size: 29.5vw;}
}

@media only screen and (max-width:768px) {
  .element.staff-member:nth-of-type(3n+3) {margin: 0 5% 0 0; padding: 0 0 35px 0;}
  .element.staff-member:nth-of-type(3n+4) {clear: none;}
  .element.staff-member {width: 47.5%; margin: 0 5% 0 0; padding: 0 0 35px 0;}
  .element.staff-member:nth-of-type(2n+2) {margin: 0 0 0 0; }
  .element.staff-member:nth-of-type(2n+3) {clear:both;}

  .staff-page .staff-pic-missing {width: 44.5vw; height: 59.3vw;}
  .staff-page .staff-pic-missing:before {font-size: 44.5vw;}

  .staff-name {font-size: 1.5em;}
  .staff-title {font-size: 1.25em;}
}

@media only screen and (max-width:480px) {
  .element.staff-member:nth-of-type(1n+0) {margin: 0 auto 0; padding: 0 0 50px 0;}
  .element.staff-member {width: 100%; max-width: 300px; margin: 0 auto 0; padding: 0 0 50px 0; clear: both; display: block;}

  .staff-page .staff-pic-missing {width: 300px; height: 400px;}
  .staff-page .staff-pic-missing:before {font-size: 260px;}
}