

.page-external_member .view-custom-title .views-field-field-job-title {
    font-size: 22px;
    font-weight: 300;
    color: #666;
    line-height: 1.2em;
    margin-top: .5rem;
}

.page-external_member .view-custom-title .views-field-field-role-prefix,
.page-external_member .view-custom-title .views-field-nothing {
    font-size: 18px;
    font-weight: 300;
    color: #666;
}


.page-external_member .field--name-field-istitution {
    margin: 1rem 0;
    font-size: 18px;
    line-height: 1.5em;
}

.page-external_member .field--name-field-short-bio,
.page-external_member .field--name-field-long-bio * {
    margin: 0 0 2rem 0;
    line-height: 1.5em;
    font-size: 16px;
    color: var(--text_color);
}

.page-external_member .node__content {
    position: relative;
}

.page-external_member .node__content hr {
    color: var(--light_gray);
    margin: 1rem 0;
    height: 1px;
}

.page-external_member .field--name-field-profile-picture {
    width: 100%;
    height: fit-content;
    margin-bottom: 2rem;
}

.page-external_member .field--name-field-profile-picture img {
    width: 100%;
    max-height: 400px;
    height: auto;
    object-fit: contain;
}

.page-external_member .node--type-external-member > .node__content {
    padding: 2rem 0;
}

.page-external_member .field--name-field-profile-email,
.page-external_member .field--name-field-profile-phone {
    font-size: 16px;
    font-weight: 400;
    color: var(--medium_gray);
    padding: .5rem 0 .5rem 2.5rem;
    background-repeat: no-repeat;
    background-size: 1.25rem 1.25rem;
    background-position: .5rem center;
    display: block;
}

.page-external_member .field--name-field-profile-email {
    background-image: url(../../assets/icons/icon_mail.svg);
    text-decoration: underline;
}
.page-external_member .field--name-field-profile-phone {
    background-image: url(../../assets/icons/icon_phone.svg);
}

.page-external_member .field--name-field-profile-email:hover {
    color: var(--main_blue);
}


.page-external_member .socials {
    display: flex;
    flex-direction: row;
    position: relative;
    margin-top: 3.5rem;
    margin-bottom: 3rem;
}

.page-external_member .socials.withlabel::before {
    content: 'PERSONAL PROFILES ON SOCIAL MEDIA';
    display: block;
    position: absolute;
    top: -2rem;
    color: #999;
    font-size: 14px;
    font-weight: 400;
}

.page-external_member .socials > * {
    margin-right: .5rem;
}

.page-external_member .socials .field--name-field-twitter a,
.page-external_member .socials .field--name-field-instagram a,
.page-external_member .socials .field--name-field-facebook a,
.page-external_member .socials .field--name-field-linkedin a {
    font-size: 0;
    width: 2rem;
    height: 2rem;
    background-color: #999;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    display: block;
    border-radius: 50%;
}

.page-external_member .socials .field--name-field-twitter a { background-image: url(../../assets/icons/icon-footer-tw.svg); }
.page-external_member .socials .field--name-field-instagram a { background-image: url(../../assets/icons/icon-footer-in.svg); }
.page-external_member .socials .field--name-field-facebook a { background-image: url(../../assets/icons/icon-footer-fb.svg); }
.page-external_member .socials .field--name-field-linkedin a { background-image: url(../../assets/icons/icon-footer-li.svg); }

.page-external_member .socials .field--name-field-twitter a:hover { background-image: url(../../assets/icons/icon-footer-tw-active.svg); }
.page-external_member .socials .field--name-field-instagram a:hover { background-image: url(../../assets/icons/icon-footer-in-active.svg); }
.page-external_member .socials .field--name-field-facebook a:hover { background-image: url(../../assets/icons/icon-footer-fb-active.svg); }
.page-external_member .socials .field--name-field-linkedin a:hover { background-image: url(../../assets/icons/icon-footer-li-active.svg); }



@media (min-width: 1024px) {

    .page-external_member .region-content article > .node__content {
        min-height: 600px;
    }
    
    .page-external_member .region-content article > .node__content > * {
        margin-left: 0 !important;
    }
}


@media (min-width: 1200px) {
    .page-external_member .region-content article > .node__content > * {
        max-width: 576px;
    }

    .page-external_member .field--name-field-profile-picture {
        top: 2rem;
        max-width: 300px !important;
    }

    .page-external_member .field--name-field-profile-picture img {
        object-fit: cover;
        height: 400px;
    }

    .page-external_member .field--name-field-istitution,
    .page-external_member .node__content > hr:first-of-type,
    .page-external_member .field--name-field-profile-picture {
        position: absolute;
        right: -1rem;
        width: 300px;
    }

    .page-external_member .field--name-field-istitution {
        top: calc(400px + 5rem);
        font-size: 16px;
    }

    .page-external_member .node__content > hr:first-of-type {
        top: calc(400px + 4rem);
        overflow: visible;
    }

    .page-external_member .node__content > hr:first-of-type:after {
        content: 'ISTITUTION/ORGANIZATION';
        font-size: 14px;
        color: #999;
        top: -1.5rem;
        left: 0;
        font-weight: 400;
        position: absolute;
    }

    .page-external_member .field--name-field-short-bio {
        font-size: 18px;
    }


    .page-external_member .region-content article .node__content .info {
        display: flex;
        flex-direction: row;
        margin: 2rem 0;
    }
    .page-external_member .region-content article .node__content .info > * { 
        width: fit-content; 
        margin: 0 1.5rem 0 0;
        padding-right: 1.5rem;
    }
    .page-external_member .region-content article .node__content .info > *:not(:last-child) {
        border-right: 1px solid var(--border_gray);
    }

    .page-external_member .region-content article .node__content > hr:nth-last-child(2),
    .page-external_member .info hr { display: none; }

    .page-external_member .region-content article .node__content .info .socials::before { display: none; }

}


@media (min-width: 1300px) {
    .page-external_member .field--name-field-istitution,
    .page-external_member .node__content > hr:first-of-type,
    .page-external_member .field--name-field-profile-picture {
        left: calc(680px + 2rem);
        right: unset;
    }

    .page-external_member .region-content article > .node__content > * {
        max-width: 680px;
    }
}


@media (min-width: 1400px) {
    .page-external_member .field--name-field-istitution,
    .page-external_member .node__content > hr:first-of-type,
    .page-external_member .field--name-field-profile-picture {
        left: calc(745px + 2rem);
        right: unset;
    }

    .page-external_member .region-content article > .node__content > * {
        max-width: 745px;
    }
}

