.team-members-container {
    margin-top:60px;
    display: flex;
    justify-content:space-around;
    flex-wrap: wrap;
}

.team-member-main {
    min-width:300px;
    display:flex;
    flex-direction: column;
    align-content: stretch;
    /* flex: 0 1 30%; */
    background: #f8f8f8;
    flex-grow: 1;
    padding:12px;
    position:relative;
}

.team-member-mail {
    position:absolute;
    font-size: 24px;
    top:8px;
    right:8px;
}

a.team-member-mail, a.team-member-mail:hover, a.team-member-mail:visited, a.team-member-mail:link, a.team-member-mail:active {
    color: var(--cgiar-yellow);
}

.team-member-name {
    color:var(--cgiar-yellow);
    font-size:22px;
    padding:8px 0 8px 0;
    text-align:center;
    cursor:pointer;
}

.team-member-lname {
    color:var(--cgiar-yellow);
    font-weight:800;
}

.subpage .team-member-container p {
    margin:0;
}

.team-member-title {
    text-align:center;
    padding:8px 0 16px 0;
    font-size: 14px;
}

.subpage p.team-member-location {
    padding:8px 0 8px 0;
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    color:#666;
    margin:0;
}

.team-members-container > * {
    flex: 0 1 30%;
    min-width:300px;
    margin-bottom:40px;
    display:flex;
    flex-direction: column;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}

.team-member-image-container{
    background-color:white;
}

.team-member-image-container > img.team-member-image-placeholder {
    height:200px;
    width:100%;
    object-fit: scale-down;
    display:block;
    cursor:pointer
}

.team-member-location {
    font-size:18px;
}

.team-member-image-container > img {
    height:200px;
    width:100%;
    object-fit: cover;
    display:block;
    cursor:pointer;
}

.team-member-container.active > .team-member-main {
    width:100%;
    padding-top:80px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}

.team-member-container.active .team-member-title {
    font-size: 17px;
}

.team-member-container.active .team-member-name {
    font-size: 32px;
}

@media (max-width:900px) {
    .team-member-container.active > .team-member-image-container {
        margin-bottom:-80px;
    }
}

.team-member-container.active > .team-member-image-container {
    margin-left:40px;
    margin-bottom:-92px;
    width:300px;
    height:200px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    position:relative;
    z-index:100;
}

.team-member-container.active > .team-member-image-container img {
    width:300px;
    height:200px;
}

.team-member-container.active {
    flex: 0 0 100%;
    margin: 0px 0 80px 0;
    padding-top:20px;
    box-shadow:none;
}


.team-member-name > a {
    color: #333;
}

.team-member-name i {
    margin-left:12px;
}

.team-member-content {
    margin: 8px;
}

.team-member-info {
    margin-top: -128px;
    padding: 128px 20px 20px 20px;
    border-radius: 4px;
    line-height:28px;
    pointer-events:none;
    text-align: justify;
}