.image-row{
    display: flex;
    flex-wrap: wrap;
    padding: 0 8px;
  }
.image-col{
flex: 25%;
max-width: 25%;
padding: 0 8px;
text-align: center;
}
.image-cont img{
border-radius: 10%; 
width: 100%;
}
.image-cont{
border-radius: 5px;
vertical-align: middle; 
width: 100%;
margin-bottom: 16px;
}
.one img:hover{
  box-shadow: 1px 1px 2px black, 0 0 15px #1E79AE, 0 0 5px #1A4895;

}
.two img:hover{
  box-shadow: 1px 1px 2px black, 0 0 15px #FACA2A, 0 0 5px #f3b61e;
  }

.three img:hover{
  
  box-shadow: 1px 1px 2px black, 0 0 15px #F15942, 0 0 5px #EE3A23;
  }
.four img:hover{
  
  box-shadow: 1px 1px 2px black, 0 0 15px #97BF04, 0 0 5px #699704;
  } 

.popup{
    position: fixed; 
    width: 50%;
    height: 400px;
    top: 20%;
    left: 25%;
    background-color: white;
    z-index: 1;
    border-radius: 1%;
    padding: 20px;
    text-align: center;
    border-style: solid;
}
.colorone{
  border-color: #1E79AE;
}
.colortwo{
  border-color: #FACA2A;
}
.colorthree{
  border-color: #F15942;
}
.colorfour{
  border-color: #97BF04;
}
.person-role{
  color: #F15942;
}