/*=========================================
            09. TEAM MEMBER STYLE 3 CSS
============================================*/

.member-style3 {position: relative;overflow: hidden;margin-bottom:20px;}
.member-style3 * {-webkit-transition: all 0.35s ease;transition: all 0.35s ease;}
.member-style3 *::before {-webkit-transition: all 0.35s ease;transition: all 0.35s ease;}
.member-style3 .thumb {position: relative;overflow: hidden;padding: 0 10px;z-index: 1;}
.member-style3 .thumb img {vertical-align: top;backface-visibility: hidden;width: 100%;}
.member-style3 .content {padding: 25px 20px;position: relative;background: #fff;border: 1px solid #e6dddd;    height: 120px;}
.member-style3 .content .title {margin: 0;
    font-weight: 500;
    border: 0;
    font-size: 20px;
    background: none;
    color: #000;}
.member-style3 .content .post {color: #707070;font-size: 0.7rem;line-height: 15px;}
.member-style3 .social-icon {margin-top: 12px;}
.member-style3 .social-icon::after {content: "";position: absolute;bottom: 100%;left: 50%;margin-left: -7px;border-width: 7px;border-style: solid;border-color: transparent transparent #111111 transparent;}
.member-style3 .social-icon li {display: inline-block;margin: 0 1px;}
.member-style3 .social-icon li a {margin: 0 1px;height: 30px;width: 30px;display: inline-block;line-height: 30px;color: #111111;border: 1px solid #e6dddd;overflow: hidden;-webkit-transition: all .3s cubic-bezier(0, 0, 0, 0.1);transition: all .3s cubic-bezier(0, 0, 0, 0.1);}
.member-style3 .social-icon li a .hover {-webkit-transform: translateY(-65px);transform: translateY(-65px);opacity: 0;visibility: hidden;}
.member-style3:hover .content {background: #149c76;border-color: #149c76;color: white;}
.member-style3:hover .content::before {outline-color: #07aa8e;-webkit-transition: all .3s cubic-bezier(0, 0, 0, 0.1);transition: all .3s cubic-bezier(0, 0, 0, 0.1);}
.member-style3:hover .content .title {color: #fff;-webkit-transition: all .3s cubic-bezier(0, 0, 0, 0.1);transition: all .3s cubic-bezier(0, 0, 0, 0.1);}
.member-style3:hover .content .post {color: #fff;-webkit-transition: all .3s cubic-bezier(0, 0, 0, 0.1);transition: all .3s cubic-bezier(0, 0, 0, 0.1);}
.member-style3 .social-icon li a:hover .hover {transform: translateY(-30px);color: #07aa8e;opacity: 1;visibility: visible;}
.member-style3 .social-icon li a:hover {background: rgba(255,255,255,1);color: #111111;}
.member-style3:hover .social-icon li a {color: #fff;-webkit-transition: all .3s cubic-bezier(0, 0, 0, 0.1);transition: all .3s cubic-bezier(0, 0, 0, 0.1);}

/* responsive */
@media only screen and (max-width: 767px) {
  .member-style3 {margin-bottom: 50px;}
  .member-style3 img {width: 100%;}
}

/* responsive */
@media only screen and (max-width: 767px) {
  .member-style15 {margin-bottom: 50px;}
  .member-style15 img {width: 100%;}
}

/* END management team */
/* button {
  margin: 0.75rem;
  padding: 0.25rem;
  cursor: pointer;
}*/

/* Modals */
.modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: none;
  justify-content: center;
  align-items: flex-start;
  z-index: 1000;
  overflow: auto;
  background-color: rgba(0,0,0,0.7);
}
.modal.modal-show {
  animation: fadeIn 0.1s ease-in-out forwards;
}
.modal.modal-hide {
  animation: fadeOut 0.1s ease-in-out 0.1s forwards;
}
.modal-content {
  position: relative;
  background-color: #fff;
  margin: 2rem;
  padding: 2rem;
  border-radius: 0.25rem;
  width: 50%;
  top: 30%;
  max-height: 75%;
  overflow: auto;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.modal.modal-show .modal-content {
  animation: fadeInDown 0.3s ease-in-out forwards;
}
.modal.modal-hide .modal-content {
  animation: fadeOutUp 0.2s ease-in-out forwards;
}
.modal-content h1 {
  text-align: center;
  margin-bottom: 2rem;
}
.modal-content p {
  margin: 1rem 0;
  line-height: 1.5rem;
}
.modal-close {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 1.75rem;
  font-weight: bold;
  padding: 0 0.75rem;
  color: rgba(0,0,0,0.2);
  cursor: pointer;
  user-select: none;
}
.modal-close:hover, .modal-close:focus {
  color: rgba(0,0,0,0.5);
}




.modal:nth-of-type(1) .modal-content {
  padding: 0;
}
.modal:nth-of-type(1) .modal-header, .modal:nth-of-type(1) .modal-footer  {
  background-color: steelblue;
  padding: 1rem;
  color: #fff;
  text-align: center;
}
.modal:nth-of-type(1) .modal-header h1 {
  margin: 0;
}
.modal:nth-of-type(1) .modal-body {
  padding: 1.25rem;
}
.modal:nth-of-type(1) .modal-close {
  color: rgba(255,255,255,0.5);
}
.modal:nth-of-type(1) .modal-close:hover, .modal:nth-of-type(1) .modal-close:focus {
  color: rgba(255,255,255,0.75);
}




/* Animations */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-3rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0); 
  }
}
@keyframes fadeOutUp {
  0% { 
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-3rem);
  }
}
@keyframes zoomIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes zoomOut {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.3);
  }
}
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0); 
  }
}
@keyframes fadeOutRight {
  0% { 
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateX(100%);
  }
}

/* Responsiveness */
@media(max-width: 992px) {

  .modal-content { width: 80%; }
}
@media(max-width:767px) {

  .modal-content { padding: 2rem 1rem 1rem 1rem; width: 90%; }
  .modal-content h1 { margin-bottom: 1.5rem; }
  .modal:nth-of-type(2) .modal-content { padding: 2rem 3rem; }
  .modal:nth-of-type(3) { justify-content: center; }
  .modal:nth-of-type(3) .modal-content { width: 80%; }
  .modal:nth-of-type(5) .modal-content { max-width: 85%; }
}