body .bg-color.brand.pagelistingblock-people,
body .bg-color.brand.pagelistingblock-people-grouped {
  .staff-list .person .description {
    .displayname, .summary, .summary div {
      color: var(--darkest);
    }
    .modal .modal-content {
      color: var(--darkest);

      .close {
        color: var(--darkest);

        &:hover,&:active,&:focus {
          color: var(--lightest);
        }
      }
         
      div, div.description {
        color: var(--darkest);

        p {
          color: var(--darkest); 

          strong {
            color: var(--darkest); 
          }
        }
      }
    }
  }
}

.pagelistingblock-people, .pagelistingblock-people-grouped {
  h2 {
    text-align: center;
    margin: 0 0 1rem 0;
    font-size: 1.8rem;
    }
  
  ul.staff-list {
      list-style:none;
      margin-left:0;
      padding-left:0;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
			flex-direction: row;
      gap: 2em 1%;
      
			@media (max-width: 766px) {
			  flex-direction: column;
			}
      
	  li {
      width: 49%;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 10px;

			@media (max-width: 766px) {
			        width: 100%;
			}
        
		.person {
            align-items: stretch;
            display: flex;
            padding: 1.5rem;
			      gap: 1rem 1.5rem;
			      flex-direction: row;
			
			@media (min-width: 767px) and (max-width: 999px) {
			        flex-direction: column;
			}
      @media (max-width: 550px) {
			        flex-direction: column;
			}
			
            
			.image {
          border-radius: 50%;
          height: 100px;
          width: 100px;
          overflow:hidden;
          display: flex;
          justify-content: center;
          align-items: start;
          
          @media screen and (min-width: 576px) {
              height: 150px;
              min-width: 150px;
              width: 150px;
          }
                
			   img {
          flex-shrink: 0;
          min-width: 100%;
          min-height: 100%
         }
			}
			.description {
				h3.displayname {
          font-weight: 700;
          font-size: 1.6rem;
					margin-top: 0;
                }
				.summary {
					.titles{
            font-weight: 700;
						.listitem {}
					}
					.overview {}
				}
				button.bttn {
          margin-top: .75rem;
          margin-bottom: 0;
        }

        .websites {
          display: inline-block;
          margin-top: .75rem;
        }
			}
		
			.bio { display: none;}
      .bio.show {   }
		}
	  }
  }

}


.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: none; 
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  z-index: 1000;/* Sit on top */
}
/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 4em auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
  overflow: auto; /* Enable scroll if needed */
  height: 80%;
}


/* The Close Button */
.close {
  color: var(--brand-color);
  float: right;
  font-size: 3rem;
  font-weight: bold;
  padding: .2rem;
  border: 3px solid var(--brand-color);
  padding-bottom: 1rem;
}


.close:hover,
.close:focus,
.close:active {
  color: var(--lightest);
  background-color:  var(--brand-color);
  text-decoration: none;
  cursor: pointer;
}