/* parent container */
.team_display-container {
  /* size */
  width: 90%;
  height: 90%;

  margin: 3vmin auto;
}

/* resets */
.team_display-main,
.team_display-main * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* team display window whole container */
.team_display-main {
  border: 1px solid #eee;
  border-radius: 4px;
  position: relative;
  /* size to take full parent container */
  width: 100%;
  height: 100%;
  /* width: fit-content; */
  /* height: fit-content; */
  display: flex;
  flex-direction: row-reverse;
}

/* right half of the display window */
.team_display-name-leader-wrapper {
  width: 50%;
  display: flex;
  flex-direction: column;
  border-left: 1px solid #eee;
}

/* the team title */
.team_display-team-name {
  border-bottom: 1px solid #eee;
  flex: 1 1 auto;
  padding: 1vmin;
  font-size: 2.6vmin;
}

.team_display-team-leader-container {
  flex: 3 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* position of a team leader image: -left -center -right */
.team_display-team-leader-image-left {
  flex: 1 1 auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.team_display-team-leader-image-center {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.team_display-team-leader-image-right {
  flex: 1 1 auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* enlarge team leader picture with > max-width: {value}% */
.team_display-team-leader-image img {
  display: block;
  max-width: 100%;
  height: auto;
  min-width: 0;
}

.team_display-team-description {
  flex: 2;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 2.2vmin;
  padding: 1vmin;
}

/* description for teams styles here */
.team_display-team-description .team_display-team-description-title {
  font-size: 2vmin;
}

.team_display-team-description ul {
  /* list-style: none; */
}

/* the list for values and attributes for teams */
.team_display-team-description ul li {
  font-size: 1.7vmin;
}

.team_display-team-leader-name {
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1vmin;
  font-size: 2.8vmin;
}

.team_display-team-leader-job {
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 0.5vmin;
  font-size: 2.2vmin;
}

/* left half of display window */
.team_display-project-crew-wrapper {
  width: 50%;
  display: flex;
  flex-direction: column;
}

.team_display-project-name-container {
  flex: 1;
  border-bottom: 1px solid #eee;
  padding: 1vmin;
}

.team_display-project-name {
  font-size: 3vmin;
  color: aliceblue;
}

.team_display-project-information {
  font-size: 2vmin;
}

/* crew members container */
.team_display-crew-container {
  flex: 1;
  display: flex;
  flex-direction: row;
}

.team_display-crew-container.crew-4 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.team_display-crew-container.crew-4 .team_display-crew-member {
  flex-basis: calc(50% - 1rem);
  box-sizing: border-box;
}

.team_display-crew-container.crew-4 .team_display-crew-member img {
  width: 50%;
}

.team_display-crew-container.crew-6 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.team_display-crew-container.crew-6 .team_display-crew-member {
  flex-basis: calc(33.33% - 1rem);
}

.team_display-crew-container.crew-6 .team_display-crew-member img {
  width: 70%;
}

.team_display-crew-member {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  row-gap: 2%;
  text-align: center;
  flex: 1 1 0;
  min-width: 0;
}

/* this  will add border to crew member use javascript line to add class .with-border*/
.team_display-crew-member.with-border {
  border-right: 1px solid #eee;
}
.team_display-crew-member.with-border :last-child {
  border-left: none;
}
.crew-4.with-border .team_display-crew-member,
.crew-6.with-border .team_display-crew-member {
  border-top: 1px solid #eee;
}

.crew-4 .team_display-crew-member,
.crew-6 .team_display-crew-member {
  row-gap: 0;
}

.team_display-crew-member-image {
  display: flex;
  justify-content: center;
  align-items: center;
}

.team_display-crew-member-image img {
  display: block;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  padding: 2vmin;
}
.team_display-crew-member-image-card {
  display: flex;
  justify-content: center;
  align-items: center;
}

.team_display-crew-member-image-card img {
  display: block;
  max-width: 100%;
  height: auto;
  /*aspect-ratio:  0.63 / 1;*/
  padding: 2vmin;
}

.team_display-crew-member-name {
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2vmin;
}

.team_display-crew-member-job {
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  font-size: 1.8vmin;
}

/* this style if you only want styled plus "+" */
/* .team_display-crew-member-add-new {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  font-size: 12vmin;
  color: #008000;
  cursor: pointer;

  transition: transform 0.3s, color 0.3s;

  &:hover {
    transform: scale(1.25);
    color: #005e00;
  }
} */

/* -this is for 3 dots on hover animation- */
.team_display-crew-member:has(.team_display-crew-member-add-new) {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.team_display-crew-member-add-new {
  width: 45%;
  height: 20%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  cursor: pointer;
}

.team_display-add-new-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.5s, height 0.5s, transform 0.3s 0s;
}

.team_display-crew-member-add-new:hover .team_display-add-new-dot {
  transition: width 0.5s, height 0.5s, transform 0.3s 0.2s;
}

.team_display-add-new-dot:nth-child(1) {
  width: 7vmin;
  height: 4px;
  border-radius: 4px;
  /* background-color: #1da106; */
  background-color: #6edae8;
  
}

.team_display-crew-member-add-new:hover .team_display-add-new-dot:nth-child(1) {
  width: 1.5vmin;
  height: 1.5vmin;
  border-radius: 50%;
  transform: translate(-250%, -50%);
}

.team_display-add-new-dot:nth-child(2) {
  width: 7vmin;
  height: 4px;
  border-radius: 4px;
  /* background-color: #1da106; */
  background-color: #6edae8;

  transform: translate(-50%, -50%) rotate(90deg);
}

.team_display-crew-member-add-new:hover .team_display-add-new-dot:nth-child(2) {
  width: 1.5vmin;
  height: 1.5vmin;
  border-radius: 50%;
}

.team_display-add-new-dot:nth-child(3) {
  width: 7vmin;
  height: 4px;
  border-radius: 4px;
  /* background-color: #1da106; */
  background-color: #6edae8;
}

.team_display-crew-member-add-new:hover .team_display-add-new-dot:nth-child(3) {
  width: 1.5vmin;
  height: 1.5vmin;
  border-radius: 50%;
  transform: translate(150%, -50%);
}



.puff-in-hor {
  animation: puff-in-hor 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) both;
}
@keyframes puff-in-hor {
  0% {
    transform: scaleX(2);
    filter: blur(4px);
    opacity: 0;
  }
  100% {
    transform: scaleX(1);
    filter: blur(0px);
    opacity: 1;
  }
}