.wrapper-lists-our-team {
  text-align: center;
  margin-bottom: 41px;
  a {
    &.join-our-team {
      display: inline-block;
      text-align: center;
      margin: auto;
      text-transform: uppercase;
      font-size: 13px;
      line-height: 30px;
      padding: 5px 25px;
      font-weight: 700;
      margin-bottom: 60px;
    }
  }
  .our-team-item {
    text-align: center;
    margin-bottom: 54px;
    &.col-sm-3:nth-child(4n+1){
      clear: both;
    }
    .our-team-image {
      position: relative;
      &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 50%;
        @include opacity(0);
        @include transition(all 0.3s);
        max-width: 200px;
        margin: auto;
        width: 100%;
      }
      img {
        border-radius: 50%;
      }
      .social-team {
        a {
          color: #fff;
          display: inline-block;
          font-size: 18px;
          background: none;
          width: 30px;
          height: 30px;
          line-height: 30px;
          text-align: center;
        }
        position: absolute;
        left: 0;
        right: 0;
        bottom: 30px;
        text-align: center;
        @include opacity(0);
      }
    }
    .title {
      font-size: 15px;
      font-weight: 700;
      margin: 24px 0 0;
      line-height: 25px;
    }
    .regency {
      text-transform: uppercase;
      font-size: 13px;
      font-weight: 700;
      color: #999;
      line-height: 20px;
    }
    &:hover {
      .our-team-image:before {
        @include opacity(0.8);
      }
      .our-team-image {
        .social-team {
          @include opacity(1);
        }
      }
    }
  }

  &.demo-elegant {
    .our-team-item {
      padding-top: 45px;

      @media only screen and (max-width: 1024px) and (min-width: 784px)  {
        padding-top: 25px;
      }

      @media only screen and (max-width: 767px)  {
        width: 100%;
      }

      .title {
        color: white;
        font-size: 18px;
        margin-bottom: 7px;
        font-weight: 500;
        margin-top: 5px;
        a{
          color: white;
        }
      }

      .regency {
        color: white;
        opacity: 0.3;
        font-weight: 400;
      }

      &:before,&:after {
        position: absolute;
        content: "";
        width: 50px;
        height: 20px;
        background: white;
        border-radius: 20px;
        top: 20px;
        left: 50%;
        transform: rotate(-60deg);
        opacity: 0;
        transition: all .3s;
        z-index: 1;

        @media only screen and (max-width: 1024px) and (min-width: 784px)  {
          top: 20px;
        }
      }

      &:after {
        top: 27px;
        left: 59%;

        @media only screen and (max-width: 1024px) and (min-width: 784px)  {
          top: 25px;
          left: 62%;
        }

        @media only screen and (max-width: 783px) {
          left: 58%;
        }

        @media only screen and (max-width: 480px) {
          left: 57%
        }
      }

      .our-team-image {
        padding: 30px 0 25px;
        margin: 0 30px;

        @media only screen and (max-width: 1280px) {
          margin: 0 15px;
        }

        @media only screen and (max-width: 1024px) and (min-width: 784px) {
          padding: 0;
          margin: 0 0 20px;
        }

        @media only screen and (max-width: 783px) {
          margin: 0 50px;
        }

        @media only screen and (max-width: 767px) {
          margin: 0 15px;
        }

        .social-team {
          bottom: 50%;
          transform: translateY(75%);
        }

        &:before {
          background-color: #000000 !important;
          max-height: 200px;
          top: 6px;

          @media only screen and (max-width: 1024px) and (min-width: 784px){
            top: 0px;
          }
        }

        &:after {
          position: absolute;
          content: "";
          z-index: 1;
          top: -16px;
          right: 0;
          left: 0;
          bottom: 0;
          border-radius: 50%;
          width: 100%;
          height: 100%;
          border: 1px dotted white;
          opacity: 0;
          transition: all .3s;

          @media only screen and (max-width: 1024px) and (min-width: 784px)  {
            max-width: 200px;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
          }

          @media only screen and (max-width: 480px) {
            max-width: 270px;
            left: 50%;
            transform: translateX(-50%);
          }
        }
      }

      &:hover {
        &:before,
        &:after {
          opacity: 1;
        }

        .our-team-image {
          &:before {
            opacity: 0.5;
          }
          &:after {
            opacity: 1;
          }
        }
      }
    }
  }
}

.our-team-image .link-img {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  border-radius: 50%;
  width: 100%;
  height: 100%;
}