/* Team page styles */

section.team {
    padding-top: 2em;
    margin: 2em auto;
    max-width: 60em;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: flex-start;
    align-items: stretch;
}

    section.team div.contact {
        -moz-transition: all linear .2s;
        -o-transition: all linear .2s;
        -webkit-transition: all linear .2s;
        transition: all linear .2s;
    }

        section.team div.contact[id] {
            scroll-margin-top: 4.5em;
        }

        section.team div.contact div.team-header.flex {
            justify-content: flex-start;
        }

        section.team div.contact div.team-header div.image:empty {
            display: none;
        }

        section.team div.contact div.team-header h3 {
            margin-bottom: 0;
        }

        section.team div.contact div.team-header p {
            font-size: var(--font-size-p-sml);
            margin-bottom: 0.5em;
        }

        section.team div.contact div.profile {
            width: 80%;
            margin: 0 auto;
        }

        section.team div.contact h4.practice-areas {
            font-size: var(--font-size-p-sml);
            font-weight: var(--font-weight-regular);
            color: var(--color-grey-blue);
            text-align: center;
        }

            section.team div.contact h4.practice-areas span {
                display: inline-block;
                padding: 0.25em 0.5em;
                background-color: var(--color-off-white);
            }

            section.team div.contact h4.practice-areas:after {
                content: "";
                margin-top: -0.85em;
                display: block;
                border-bottom: solid 1px var(--color-grey);
            }

        section.team div.contact ul.icons.flex {
            list-style-type: none;
            margin: 0;
            padding: 0;
            gap: 0.25em;
            -ms-flex-wrap: wrap;
            -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
        }

            section.team div.contact ul.icons.flex li.flex {
                font-size: var(--font-size-p-vsml);
                justify-content: flex-start;
                background-color: var(--color-grey-50);
                color: var(--color-dark-blue);
                border-radius: 0.5em;
                padding: 0.5em;
                margin-bottom: 0;
                -webkit-justify-content: center;
                justify-content: center;
                -ms-flex: 1 1 auto;
                -webkit-flex: 1 1 auto;
                flex: 1 1 auto;
            }

                section.team div.contact ul.icons.flex li.flex > img {
                    flex-basis: 1.75em;
                    width: 1.75em;
                }

                section.team div.contact ul.icons.flex li.flex > span {
                    -ms-flex: 0 1 auto;
                    -webkit-flex: 0 1 auto;
                    flex: 0 1 auto;
                    margin-left: 0.5em;
                }

/* Vacancies */
section.vacancies-list {
    flex: 0 0 100%;
    padding: 1em 1.25em;
    margin-bottom: 2em;
    position: relative;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

    section.vacancies-list div.vacancies-list {
        border: solid 1px var(--color-grey);
        background-color: var(--color-off-white);
        border-radius: 1em;
        padding: 2em 1.25em;
    }

    section.vacancies-list div.vacancy:not(:last-child) {
        border-bottom: solid 1px var(--color-grey);
        padding-bottom: 2em;
        margin-bottom: 2em;
    }

    section.vacancies-list div.vacancy.flex {
        flex-wrap: nowrap;
    }

    section.vacancies-list div.vacancy:before {
        content: url(/_resources/files/icons/briefcase.svg);
        display: block;
        width: 3em;
        flex: 0 0 3em;
        margin-right: 1em;
        padding: 0.5em;
        border-radius: 50%;
        background-color: var(--color-light-blue-20);
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    section.vacancies-list div.vacancy > div {
        flex: 0 0 calc(100% - 4em);
    }

    section.vacancies-list div.vacancy p {
        font-size: var(--font-size-p-sml);
    }

@media screen and (min-width: 600px) {
    section.vacancies-list div.vacancy:before {
        width: 5em;
        flex: 0 0 5em;
        padding: 1em;
    }

    section.vacancies-list div.vacancy > div {
        flex: 0 0 calc(100% - 6em);
    }
}