/*


 */


.team-members .circle,
.team-members .circle img,
.team-members .wrap-circle::before {
  transition-duration: 0.20s;
  transition-timing-function: ease-in-out;
}

.team-members {
  padding-bottom: 60px;
}

.team-intro {
  background-color: var(--light-gray-color);
}

/* Team intro */
.team-intro span {
  font-size: 1.1em;
}

.team-intro .container div:last-child {
  padding-left: 120px;
}

/* Team members */
.team-members li {
  padding-bottom: 40px;
}

.team-members .wrap-circle {
  margin: 0 auto 20px auto;
}

.team-members .wrap-circle,
.team-members .circle {
  position: relative;
  height: 180px;
  width: 180px;
}

.team-members .circle {
  background: var(--blue-color);
  background: radial-gradient(circle, var(--blue-color) 0%, var(--purple-color) 100%);
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 8px 17px 2px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2);
  overflow: hidden;
  background-size: 100% 100%;
  transition-property: box-shadow, background-size, transform;
}

.team-members .circle img {
  position: absolute;
  bottom: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition-property: transform, filter;
}

.team-members .wrap-circle::before {
  content: "";
  position: absolute;
  bottom: 15%;
  left: -3.8%;
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #fff;
  z-index: 2;
  background-color: var(--blue-color);
  background-image: var(--country-icon);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100%;
  transition-property: transform, left, bottom, filter;
}

.team-members li:hover .circle {
  box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -7px rgba(0,0,0,0.2);
  background-size: 100% 150%;
}

.team-members li:hover .circle {
  transform: scale(1.04);
}

.team-members li:hover .circle img {
  transform: scale(1.05);
  filter: contrast(105%);
}

.team-members li:hover .wrap-circle::before {
  transform: scale(1.06);
  left: -6%;
  bottom: 17%;
  filter: contrast(110%);
}

.team-members span {
  display: block;
  color: #7f8c8d;
}

.team-intro .container img {
  width: 100%;
}

@media (min-width: 0px) and (max-width: 1240px) {
  section .container {
    width: 100%;
  }

  .team-members li {
    flex: 0 0 25%;
  }
}

@media (min-width: 0px) and (max-width: 1120px) {
  .team-intro .container {
    flex-direction: column-reverse !important;
  }

  .team-intro .container div:last-child {
    padding-left: 0;
  }

  .team-intro .container img {
    width: 50%;
    margin: 0 auto 60px auto;
  }

  .team-members li {
    flex: 0 0 33.333333%;
  }
}

@media (min-width: 0px) and (max-width: 850px) {
  .team-members li {
    flex: 0 0 50%;
  }
}

@media (min-width: 0px) and (max-width: 610px) {
  section {
    padding: 100px 20px 120px 20px;
  }

  .team-members li {
    flex: 0 0 100%;
  }

  .team-intro .container img {
    width: 80%;
  }
}