/* Team Listing and Team Member CSS */

.page_team .post h3 {
  margin-bottom: 1rem;
}

.page_team .subhead {
  color: var(--medium);
  letter-spacing: 0.1rem;
}

.page_team .social-media {
  font-size: 3rem;
}
.page_team .modal .social-media {
  font-size: 4rem;
}
.page_team_member .social-media {
  margin-bottom: 50px;
}

/* TODO:  Evaluate the class name here. Use something more generic for site-wide application.*/
.page_team .post-spacing {
  padding-bottom: var(--spacingMobile);
  margin-bottom: var(--spacingMobile);
}
@media screen and (min-width: 768px) {
  .page_team .post-spacing {
    padding-bottom: var(--spacingTablet);
    margin-bottom: var(--spacingTablet);
  }
}

@media screen and (min-width: 1200px) {
  .page_team .post-spacing {
    padding-bottom: var(--spacingDesktop);
    margin-bottom: var(--spacingDesktop);
  }
}

/* View Team Member link */
.page_team .portrait-image-wrapper {
  position: relative;
  overflow: hidden;
}
.page_team .portrait {
  display: block;
}

/* post content setting*/
.page_team .post .row {
  justify-content: center;
}

.page_team .post-content h4 {
  font-size: 2.9rem;
}

.page_team .post-content .position {
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.page_team .view-details {
  display: block;
}

.page_team .view-details-box {
  display: block;
  position: absolute;
  z-index: 10;
  bottom: 0;
  margin: auto;
  padding: 30px 0;
  width: 100%;
  text-align: center;
  color: transparent;
  background-color: transparent;
  text-decoration: none;
  font-size: 1.8rem;
}

@media screen and (min-width: 992px) and (max-width: 1200px) {
  .page_team .view-details-box {
    font-size: 1.6rem;
  }
}

.page_team .bottom-button {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

/* Layout 3 - view details button - bad name here.*/
.page_team .readmore {
  margin-top: 20px;
}

/* Image Border Radius Style*/
.page_team .portrait-image {
  width: 100%;
}

.page_team .portrait-oval,
.page_team_member .portrait-oval {
  border-radius: 90px;
}
.page_team .portrait-round,
.page_team_member .portrait-round {
  border-radius: 50%;
  border: 1px solid white;
}

/* Team Member Social Media */
.page_team .team-member-social-media,
.page_team_member .team-member-social-media {
  margin-bottom: 20px;
}

.page_team .team-member-social-media a,
.page_team_member .team-member-social-media a {
  margin: 0 3px;
}

/* Layout 1, Layout 2 */
.page_team .layout-1 .portrait-image-wrapper,
.page_team .layout-2 .portrait-image-wrapper {
  margin-bottom: 20px;
}

.page_team .layout-4 .portrait-image-wrapper,
.page_team .layout-5 .portrait-image-wrapper {
  margin-bottom: 20px;
}

@media screen and (min-width: 767px) {
  .page_team .layout-4 .portrait-image-wrapper,
  .page_team .layout-5 .portrait-image-wrapper {
    margin-bottom: 0;
  }
}

/*Portrait Hover Setting*/
.page_team .portrait-hover {
  cursor: pointer;
}

.page_team .portrait-hover:hover .view-details {
  display: block;
  z-index: 11;
}

.page_team .portrait-hover:hover .view-details-box {
  color: var(--white);
  background-color: var(--primary);
  opacity: 0.9;
  transition: all 0.35s;
}

.page_team .portrait-hover:hover .view-details-box.half_cirle_detail_overlay {
  height: 50%;
  padding-top: 17.5%;
}

/* layout 4 setting*/

.page_team .portrait-hover .layout-4-hover {
  display: block;
  position: absolute;
  z-index: 10;
  top: 50%;
  margin: 0;
  padding: 0;
  width: 90%;
  text-align: center;
  color: transparent;
  background-color: transparent;
  text-decoration: none;
  height: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
  outline: none;
}

.page_team .portrait-hover .layout-4-hover p {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translate(-50%, 0);
  width: fit-content;
}

.page_team .portrait-hover:hover .layout-4-hover {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, var(--primary) 80%);
  color: var(--white);
}

.page_team .portrait-hover .layout-4-triangle {
  width: 0;
  height: 0;
  border-top: 60px solid transparent;
  border-bottom: 60px solid transparent;
  border-left: 60px solid white;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  z-index: 12;
}

.page_team .portrait-hover:hover .layout-4-hover .layout-4-triangle {
  z-index: 12;
}

.page_team .portrait-hover .layout-4-hover.oval_detail_overlay {
  border-radius: 100px;
}

.page_team .portrait-hover:hover .layout-4-hover.oval_detail_overlay {
  border-radius: 100px;
}

.page_team .portrait-hover .layout-4-hover.circle_detail_overlay {
  border-radius: 50%;
}

.page_team .portrait-hover:hover .layout-4-hover.circle_detail_overlay {
  border-radius: 50%;
}

@media screen and (min-width: 768px) {
  .page_team .portrait-image-wraper {
    margin-bottom: 40px;
  }
}

/* Layout 3 */
.page_team .layout-3 .post-content {
  margin-top: 120px;
  border: solid 1px var(--light);
  padding-left: 15px;
  padding-right: 15px;
  height: 100%;
  margin-bottom: 50px;
  border-radius: var(--borderRadius);
  text-align: center;
}

.page_team .layout-3 .post-content .btn {
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 24px;
  margin: 0 auto 15px;
}

.page_team .layout-3 .social-media-team-member {
  margin: auto;
}

.page_team .layout-3 .portrait-image-wrapper {
  border: solid 8px var(--light);
  width: 70%;
  margin: -120px auto 20px;
  background-color: var(--light);
}

/*Border setting for different portrait shape*/
/*OLD OLD*/
.page_team .layout-3 .portrait-image-wrapper.portrait-square-border,
.page_team .layout-3 .portrait-image-wrapper.portrait-tall-border {
  border-radius: var(--borderRadius);
}

.page_team .layout-3 .portrait-image-wrapper.portrait-oval-border {
  border-radius: 100px;
}

.page_team .layout-3 .portrait-image-wrapper.portrait-round-border {
  border-radius: 50%;
}

.page_team .layout-3 .columns-3 .portrait-round-border,
.page_team .layout-3 .columns-4 .portrait-oval-border {
  margin: -150px auto 20px;
}
.page_team .layout-3 .columns-3 .portrait-oval-border {
  margin-top: -170px;
}

.page_team .layout-3 .columns-4 .portrait-tall-border,
.page_team .layout-3 .columns-3 .portrait-square-border {
  margin-top: -140px;
}

.page_team .layout-3 .columns-3 .portrait-tall-border {
  margin-top: -160px;
}

.page_team .layout-3 .columns-4 .portrait-square-border {
  margin-top: -110px;
}

.page_team .layout-3 .columns-4 .portrait-square-border {
  margin-top: -150px;
}

.page_team .layout-3 .columns-4 .portrait-oval-border,
.page_team .layout-3 .columns-3 .portrait-oval-border,
.page_team .layout-3 .columns-4 .portrait-tall-border,
.page_team .layout-3 .columns-4 .portrait-round-border,
.page_team .layout-3 .columns-3 .portrait-round-border {
  margin-top: -160px;
}

.page_team .layout-3 .columns-3 .portrait-tall-border,
.page_team .layout-3 .columns-3 .portrait-square-border {
  margin-top: -140px;
}

@media screen and (min-width: 768px) {
  .page_team .layout-3 .columns-3 .portrait-round-border,
  .page_team .layout-3 .columns-3 .portrait-square-border {
    margin-top: -70px;
  }
  .page_team .layout-3 .columns-4 .portrait-round-border {
    margin-top: -120px;
  }
  .page_team .layout-3 .columns-4 .portrait-oval-border {
    margin-top: -150px;
  }
  .page_team .layout-3 .columns-3 .portrait-oval-border {
    margin-top: -90px;
  }
  .page_team .layout-3 .columns-4 .portrait-tall-border {
    margin-top: -140px;
  }
  .page_team .layout-3 .columns-3 .portrait-tall-border {
    margin-top: -90px;
  }
  .page_team .layout-3 .columns-4 .portrait-square-border {
    margin-top: -100px;
  }
}

@media screen and (min-width: 990px) {
  .page_team .layout-3 .columns-3 .portrait-round-border,
  .page_team .layout-3 .columns-3 .portrait-square-border {
    margin-top: -90px;
  }
  .page_team .layout-3 .columns-4 .portrait-round-border,
  .page_team .layout-3 .columns-4 .portrait-square-border {
    margin-top: -70px;
  }
  .page_team .layout-3 .columns-4 .portrait-oval-border,
  .page_team .layout-3 .columns-4 .portrait-tall-border {
    margin-top: -100px;
  }
  .page_team .layout-3 .columns-3 .portrait-oval-border {
    margin-top: -130px;
  }
  .page_team .layout-3 .columns-3 .portrait-tall-border {
    margin-top: -140px;
  }
}

@media screen and (min-width: 1200px) {
  .page_team .layout-3 .columns-3 .portrait-round-border,
  .page_team .layout-3 .columns-3 .portrait-square-border,
  .page_team .layout-3 .columns-4 .portrait-oval-border {
    margin-top: -120px;
  }
  .page_team .layout-3 .columns-4 .portrait-round-border,
  .page_team .layout-3 .columns-4 .portrait-square-border {
    margin-top: -100px;
  }

  .page_team .layout-3 .columns-3 .portrait-oval-border {
    margin-top: -150px;
  }
  .page_team .layout-3 .columns-3 .portrait-tall-border {
    margin-top: -140px;
  }
}

/* Layout 4 */
.page_team .portrait-hover .layout-4-triangle {
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 60px solid white;
  position: absolute;
  bottom: 0;
  left: 50%;
  top: unset;
  transform: translate(-50%, 0);
}

@media screen and (min-width: 768px) {
  .row.layout-4 .post .portrait {
    padding-left: 0;
    padding-right: 0;
  }
  .page_team .layout-4 > div:nth-child(even) > .row .portrait {
    order: 2;
  }
  .page_team .layout-4 > div:nth-child(even) > .row .portrait .portrait-image-wrapper .layout-4-triangle {
    left: 0;
    transform: translate(0, -50%);
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-right: 30px solid transparent;
    border-left: 30px solid white;
    right: unset;
    top: 50%;
  }

  .page_team .layout-4 > div:nth-child(odd) > .row .portrait .portrait-image-wrapper .layout-4-triangle {
    right: 0;
    transform: translate(0, -50%);
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-right: 30px solid white;
    border-left: 30px solid transparent;
    left: unset;
    top: 50%;
  }
}

@media screen and (min-width: 992px) {
  .page_team .layout-4 > div:nth-child(even) > .row .portrait {
    order: 0;
  }

  .page_team .layout-4 > div:nth-child(4n-2) > .row .portrait .portrait-image-wrapper .layout-4-triangle,
  .page_team .layout-4 > div:nth-child(4n-3) > .row .portrait .portrait-image-wrapper .layout-4-triangle {
    left: 0;
    transform: translate(0, -50%);
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-right: 30px solid transparent;
    border-left: 30px solid white;
    right: unset;
    top: 50%;
  }

  .page_team .layout-4 > div:nth-child(4n + 1) > .row .portrait,
  .page_team .layout-4 > div:nth-child(4n + 2) > .row .portrait {
    order: 2;
  }

  .page_team .layout-4 > div:nth-child(4n-1) > .row .portrait .portrait-image-wrapper .layout-4-triangle,
  .page_team .layout-4 > div:nth-child(4n) > .row .portrait .portrait-image-wrapper .layout-4-triangle {
    right: 0;
    transform: translate(0, -50%);
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-right: 30px solid white;
    border-left: 30px solid transparent;
    left: unset;
    top: 50%;
  }
}

/* Layout 5 */
.layout-5 .post h3 {
  font-size: 5.1rem;
  margin-bottom: 0;
}

.layout-5 .post .position {
  font-size: 1.8rem;
  line-height: 120%;
  letter-spacing: 0.25em;
  margin: 40px 0;
}

.layout-5 > div:nth-child(even) .row .portrait {
  padding-right: 15px;
}

.layout-5 > div:nth-child(odd) .row .portrait {
  padding-left: 15px;
}

.page_team .layout-5 > div .row {
  border-bottom: solid 1px var(--light);
}
.page_team .layout-5 > div:last-of-type .row {
  border-bottom: none;
}

/* Layout 4, 5 */
@media screen and (min-width: 768px) {
  .page_team .layout-5 > div:nth-child(even) > .row .portrait {
    order: 2;
  }
}

/* Team Member Modal View */
.page_team .modal .portrait-image {
  display: block;
  width: 100%;
  margin: 0 auto 20px;
}

.modal-content {
  background: none;
  border: none;
}

.modal-content .modal-header {
  display: flex;
  -ms-flex-align: start;
  align-items: flex-start;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 1rem 1rem;
  border-bottom: 1px solid #dee2e6;
  border-top-left-radius: calc(0.3rem - 1px);
  border-top-right-radius: calc(0.3rem - 1px);
}

.modal-content .modal-header .close-button {
  color: white;
  background: none;
  border: none;
  text-align: right;
  font-size: 3rem;
  padding: 0px;
  margin: 0 0 0 auto;
  width: 30px;
}

.modal-content .modal-header .close-button:hover {
  color: var(--primary);
}

.modal-content .modal-body {
  background-color: white;
  overflow-y: auto;
  padding: 30px;
}

@media screen and (min-width: 992px) {
  .modal-content .modal-body .portrait-image {
    float: right;
    margin: 0 0 30px 30px;
    width: 300px;
  }
}

@media screen and (min-width: 1200px) {
  .modal-content .modal-body .portrait-image {
    width: 500px;
  }
}

/* Team Member Page*/
.page_team_member .portrait-image {
  margin-bottom: 20px;
  width: 100%;
}

.page_team_member .team-member-details .container,
.page_team_member .team-member-details .container-fluid {
  padding-left: 0;
  padding-right: 0;
}