

.leadership-wrapper {

  width: 100%;

  float: left;

  padding: 3em 6em 3em;

}

.leadership-wrapper ul {

  width: 100%;

  float: left;

  display: grid;

  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 25px;

}
 
.leadership-wrapper .modal {

  position: absolute;

  z-index: 10000; /* 1 */

  top: 0;

  left: 0;

  visibility: hidden;

  width: 100%;

  height: 100%;

}
 
.leadership-wrapper .modal.is-visible {

  visibility: visible;
  display: block;

}
 
.leadership-wrapper .modal-overlay {

  position: fixed;

  z-index: 10;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: hsla(0, 0%, 0%, 0.5);

  visibility: hidden;

  opacity: 0;

  transition: visibility 0s linear 0.3s, opacity 0.3s;

}
 
.leadership-wrapper .modal.is-visible .modal-overlay {

  opacity: 1 !important;

  visibility: visible !important;

  transition-delay: 0s;

}
 
.leadership-wrapper .modal-wrapper {

  position: fixed;

  z-index: 9999;

  top: 10%;

  left: 15%;

  right: 15%;

  max-height: 80%;

  background-color: #fff;

  box-shadow: 0 0 1.5em hsla(0, 0%, 0%, 0.35);

  overflow-y: auto;

}
 
 .leadership-wrapper .modal-container {

  /*padding: 2em 2em 2em 2em;*/

  overflow-y: auto;

}
 
.leadership-wrapper .modal-transition {

  transition: all 0.3s 0.12s;

  transform: translateY(-10%);

  opacity: 0;

}
 
.leadership-wrapper .modal.is-visible .modal-transition {

  transform: translateY(0);

  opacity: 1 !important;

}
 
/*.modal-header, .modal-content {*/

/*  padding: 1em;*/

/*}*/

/*.modal-header {*/

/*  position: relative;*/

/*  background-color: #fff;*/

/*  box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.06);*/

/*  border-bottom: 1px solid #e8e8e8;*/

/*}*/

.leadership-wrapper .modal-header {

  padding-bottom: 10px;
  padding:0;
  border:none;

}
 
.leadership-wrapper .modal-header h2 {

  font-size: 1.2em !important;

  color: var(--color1);

  padding-bottom: 10px;

  text-transform: uppercase;

}
 
.leadership-wrapper .modal-header p {

  font-size: 1em !important;

  color: #666 !important;

  font-weight: 600 !important;

  padding-top: 0 !important;

}

.leadership-wrapper .modal-content {
    background:none;
}
 .leadership-wrapper .modal-content h2{
     color:var(--color1);
     text-transform: uppercase;
 }
.leadership-wrapper .modal-content p {

  font-size: 1em !important;
  /*padding-top:20px;*/

  color: #8C8986!important;
  line-height: 1.7;

}
.leadership-wrapper .modal-body{
    padding:0;
}
.modal-image-content{
    
}

 
.leadership-wrapper .modal-content a {

  /*position:absolute;*/

  /*left:30px;*/

  /*bottom:30px;*/

  color: var(--color2);

  font-size: 15px;

}
 
.leadership-wrapper .modal-content ul {

  display: unset;

}
 
.leadership-wrapper .modal-content ul li {

  font-family: "Ubuntu", sans-serif;

  line-height: 20px;

  color: #666;

  padding-bottom: 10px !important;

}
 
.leadership-wrapper .modal-close {

  position: absolute;

  top: 0;

  right: 0;

  padding: 1em;

  color: #aaa;

  background: none;

  border: 0;

  font-size: 1em;

  z-index: 1234567;

}
 
.leadership-wrapper .modal-close i {

  font-size: 2em;

  color: var(--color1);

}
 
.leadership-wrapper .modal-close:hover {

  color: #777;

}
 
.leadership-wrapper .modal-heading {

  font-size: 1.125em;

  margin: 0;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}
 
.leadership-wrapper .modal-content > *:first-child {

  margin-top: 0;

}
 
.leadership-wrapper .modal-content > *:last-child {

  margin-bottom: 0;

}
 
.leadership-wrapper .modal-content p {

  color: #aaa;

}
 
.leadership-wrapper .modal-image {

  width: 400px;

  float: left;

  margin: 0 20px 0px 0px;

}
 
.leadership-wrapper .team-item-head h2 {

  font-size: 1.2em;

  font-weight: 600;

  padding-top: 10px;

  text-transform: uppercase;

}



@media handheld, only screen and (max-width: 1450px) {
    .leadership-wrapper .modal-wrapper{
        left: 10%;
        right: 10%;
    }
}

@media handheld, only screen and (max-width: 1200px) {
    .leadership-wrapper .modal-wrapper{
        left: 5em;
        right: 5em;
    }
}

@media handheld, only screen and (max-width: 960px) {
    .leadership-wrapper{
        padding: 20px;
    }
    .leadership-wrapper ul{
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        grid-gap: 20px;
    }
    .leadership-wrapper .team-item-head h2{
        font-size: 1em!important;
    }
    .leadership-wrapper .modal-wrapper{
        left: 25px;
        right: 25px;
    }
    .leadership-wrapper .modal-image{width:350px;}
    .leadership-wrapper .modal-content{padding:35px 20px 20px}
}

@media handheld, only screen and (max-width: 768px) {
    .leadership-wrapper .modal-image{width:100%;margin:0 0 20px}
    .leadership-wrapper .modal-wrapper{top:6%;max-height:88%;}
}