/* CLB Custom Front-End CSS, loaded after theme and child theme styles */

/* h2 {
     color: red;
} */

/*----- team member styling------*/

.team-member-area {
     box-sizing: border-box;
     /* margin: 0 auto; */
     /* overflow: hidden; */
     text-align: center;
     margin: 0 auto;
     display: grid;
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
     /* padding-bottom: 350px;*/
     justify-content: center;


 }

 .team-member{
     display: inline-block;
    position: relative;
    margin: 0 15px 15px 0;
    min-height: 200px;
    width: 200px;
}

 .team-front {
     transition: all 500ms ease 0s;
 }

 .half-opacity{
     opacity: .2;
     
 }

 
 .team-title h3 {
     margin-bottom: 0;
     margin-top: 0;
     font-size: 18px;
 }

 .staff-position {
     line-height: normal;
     font-size:16px;
 }



.team-hover {
    display:none;
    position: fixed;
    z-index: 10000;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background:#293038d9;
    overflow: auto;

    /* width: 100%; */

 }

 .team-hover-content{
    
    top: -59px;
    position: absolute;
    /* z-index: 999; */
    background: white;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.8);
    width: 40%;
   margin-left: auto;
   /* margin-right: auto; */
   vertical-align: initial;
   /* right: 10px; */
   text-align: left;
   left: 50%;
   top:56%;
   transform: translate(-50%, -50%);
   border-radius: 10px;

 
 }

 .team-title-hover h3{
     margin: 0 0 0px;
 }

 .team-title-hover{
     /* text-align: center; */
 }
 .staff-position-hover{
     /* text-align: center; */
 }

 .team-hover-contact-info{
    padding:10px;
    padding-left: 25px;

 }

 .team-excerpt{
    padding:25px;
    max-height: 250px;
    overflow: auto;
    text-align: left;
    margin-bottom: 10px;
    padding-top: 10px;
    border: 1px solid #000000;
 }

 .team-excerpt::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white; /* should match background, can't be transparent */
    background-color: rgba(0, 0, 0, .5);
}

.team-excerpt::-webkit-scrollbar {
    -webkit-appearance: none;
}

.team-excerpt::-webkit-scrollbar:vertical {
    width: 11px;
}

.team-excerpt::-webkit-scrollbar:horizontal {
    height: 11px;
}

 .team-email{
    background: url(/wp-content/uploads/2023/03/colorhexagons.png),linear-gradient(327deg, #A6E7CB, #00AEAD);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #6c2768;
    /* display: inline-block; */
    border-radius: 3px;
    cursor: pointer;
    line-height: 0;
    padding: 10px 10px;
    text-align: center;
    margin-bottom: 10px;
    margin-left: 30%;
    margin-right: 30%
    
 }

 .team-email:hover{
     background: url(/wp-content/uploads/2023/03/colorhexagons.png), #6C2768;
    color: #00AEAD !important;
    color:white;
 }

.slide-in{
     display:block;
    
    
}





/* -----team member styling end----*/


/*----- team member styling modal pop-up -----*/

/* .team-hover-wrapper{
    position: fixed;
    z-index: 5;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background:transparent;
    width: 100%;

} */


.team-fade.team-hover{
    opacity: 1;
}


.cd-member-bio-close {
    width: 32px;
    height: 32px;
    position: fixed;
    top: 0;
    right: 35px;
    text-indent: 100%;
    white-space: nowrap;
    z-index: 3;
      font-weight:bold;
      font-size:35px;
      color:white;
      z-index:1;
      padding:20px;
      cursor: pointer;
  }

  .footer-widgets{
    z-index: 8 !important;
  }


  @media (min-width: 200px) and (max-width: 480px) {

.team-member-area{
    display:block !important;
}

.team-member{
    width:auto;
    margin-top:15px;
}

  }


  @media only screen and (max-width: 600px){
    .team-member-area{
        display: grid;
        grid-template-columns: 1fr 1fr !important;
    }
    .team-member{
        width:auto;
    }
  }

  @media only screen and (max-width: 860px){
    .team-member-area{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }
    .team-member{
        width:auto;
    }

  }

  @media only screen and (max-width: 1200px){
    .team-member-area{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
    .team-member{
        width:auto;
    }

  }