
.company-staff {
    width: 100%;
    float: left;
    padding: 140px 0;
}

.company-staff .staff-holder {
    width: 100%;
    display: block;
    padding: 0 0 120px;
    float: left;
}
.company-staff .staff-holder h2 {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: 38px;
    line-height: 120%;
    text-align: center;
    position: relative;
    color: #143A4E;
    margin: 0 0 100px;
    text-transform: capitalize;
}
.company-staff .staff-holder .center-columns {
    text-align: center;
  justify-content: center;
  display: flex;
flex-wrap: wrap;
}
.company-staff .staff-holder .staff-columns {
    width: 100%;
    display: flex;
flex-wrap: wrap;
}
.company-staff .staff-holder .center-columns .cloumn {
    display: inline-block;
    vertical-align: top;
    float: none;
}
.company-staff .staff-holder .center-columns .cloumn {
    display: inline-block;
    vertical-align: top;
    float: none;
}
.company-staff .staff-holder .cloumn{
  margin-bottom:60px;
  position: relative;
  box-shadow: 0px 1.7157px 2.21381px rgba(0, 0, 0, 0.0196802), 0px 4.12306px 5.32008px rgba(0, 0, 0, 0.0282725), 0px 7.76336px 10.0172px rgba(0, 0, 0, 0.035), 0px 13.8485px 17.869px rgba(0, 0, 0, 0.0417275), 0px 25.9021px 33.4221px rgba(0, 0, 0, 0.0503198), 0px 62px 80px rgba(0, 0, 0, 0.07);
}

.company-staff .staff-holder .cloumn .member-column {
    width: 100%;
    overflow: hidden;
}
.company-staff .staff-holder .cloumn .member-column .member-image {
    width: 100%;
    overflow: hidden;
}
.company-staff .staff-holder .cloumn .member-column .member-image img {
    display: block;
    width: 100%;
    height: auto;
}
.company-staff .staff-holder .cloumn .member-column .member-info {
    background: #fdfdfd;
    overflow: hidden;
    width: 100%;
  display: flex;
align-items: self-start;
  margin: -1px 1px;
}
.staff-holder .cloumn .member-column .member-info .hold {
    padding: 20px 18px 20px;
    float: left;
    width: 80%;
    text-align: left;
}
.staff-holder .cloumn .member-column .member-info .hold strong{
  font-style: normal;
  font-weight: bold;
  font-size: 16px;
  line-height: 160%;
  color: #143A4E;
  display:block;
  text-transform:capitalize;
} 
.staff-holder .cloumn .member-column .member-info .hold span{
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 160%;
  color: #143A4E;
  display:block;
  text-transform:none;
}
.staff-holder .cloumn .member-column .member-info .btn-detail {
    background-color: #fdfdfd;
    width: 60px;
    float: right;
    background-image: url(https://f.hubspotusercontent10.net/hubfs/6816265/Premier%20Print%20Group_June2020/Images/About/Vector%208.png);
    height: 85px;
    display: block;
    text-indent: -9999px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 21px 13px;
  transition: all 0.8s ease 0s;
  border: none !important;
  cursor:pointer;
  position:relative;
  z-index:9999;
}
.staff-holder .cloumn .member-column .member-info .btn-detail:hover,
.company-staff .staff-holder .cloumn a:hover .btn-detail{
  background-image: url(https://f.hubspotusercontent10.net/hubfs/6816265/Premier%20Print%20Group_June2020/Images/Home/Vector-arrow-white.png);
    height: 85px;
    display: block;
    text-indent: -9999px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 21px 13px;
  transition: all 0.8s ease 0s;
  background-color: #FF4C24;
}

.staff-hover {
  font-size: 12px;
  line-height: 1.6;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  padding: 20px 18px;
  color: #666;
  bottom: 0;
  background: #fff;
  z-index: 150;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: scale(0);
  transition: .3s ease-in-out;
  transition-property: opacity, visibility, transform;
}
.staff-hover p:last-child {
  margin-bottom: 0;
}
.staff-hover .heading {
  margin: 0 20px 22px 0;
  overflow: hidden;
}
.staff-hover .heading strong {
  display: block;
  color: #143A4E;
  font-size: 16px;
  line-height: 1.6;
}
.staff-hover .heading span {
  display: block;
  color: #143A4E;
}
.company-staff .close {
  font-size: 0;
  line-height: 0;
  width: 20px;
  height: 20px;
  position: absolute;
  color: #FF4C24;
  right: 15px;
  top: 20px;
  font-weight: 400
}
.company-staff .close:after, .company-staff .close:before {
  background: #FF4C24;
  height: 1px;
  width: 100%;
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  transform: rotate(45deg);
}
.company-staff .close:after {
  transform: rotate(-45deg);
}

.company-staff .social-networks {
  margin: 0 -5px 24px;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
}
.company-staff .social-networks li {
  padding: 0 5px;
}
.company-staff .social-networks li a {
  display:block;
  color: #143A4E;
}
.company-staff .social-networks li a:hover {
  color: #FF4C24;
}

.company-staff .cloumn.staff-over .staff-hover {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.staff-holder .cloumn .btn-link {
  display: none !important;
}
.staff-holder:first-child .cloumn:first-child .btn-link {
  display: block !important;
}
.staff-holder:first-child .cloumn:first-child .btn-opener {
  display: none !important;
}
.company-staff .social-networks li span {
    display: none;
}
  
/* Add this block to hide btn-detail when staff-hover is visible */
.company-staff .cloumn.staff-over .member-info .btn-detail {
  display: none;
}

/* Add this block to make staff-hover text scrollable */
.company-staff .staff-hover {
  overflow-y: auto;
}  
  