a:focus-visible,
button:focus-visible {
    outline: 3px dashed #18453B;
}

/*
    Directory Home
*/
.directoryContent__intro {
    grid-column: 1/-1;
}

.directoryContent__search {
    grid-column: 1/-1;
}

#DirectorySearchText {
    box-shadow: 1px 1px 1px #CCC inset;
}

.directoryContent__filters {
    grid-column: 1/-1;
}

    .directoryContent__filters ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

        .directoryContent__filters ul li {
            display: inline;
        }

.filter {
    background: #fff;
    border-radius: .5rem;
    border: 1px solid #ccc;
    color: #18453b;
    display: inline-block;
    margin: .5rem 0;
    padding: 1rem;
    text-decoration: none;
}

    .filter.active,
    .filter:focus,
    .filter:hover,
    .filter-selected {
        background: #18453b;
        color: #fff;
    }

.directoryContent__results {
    grid-column: 1/10;
}

.directoryContent__results-department {
    grid-column: 1/-1;
}

.directoryContent__nav {
    grid-column: 10/-1;
}

    .directoryContent__nav li#ClearFilter {
        border-bottom: 1px solid #888888;
        padding-top: 0;
        padding-bottom: 1rem;
        margin-top: 0;
        margin-bottom: .6rem;
    }

    .directoryContent__nav li.active {
        background-color: #18453B;
        color: #FFF;
    }

        .directoryContent__nav li.active a {
            color: #FFF;
        }

.directoryContent__navContainer-affiliatedUnits {
    margin-top: 1.6rem;
}


.directoryContent__person {
    background: #FFF;
    box-shadow: 1px 1px 1px #CCC inset;
    padding: 1.6rem;
    position: relative;
    transition: all .05s;
    display:flex;
    align-items: center;
}

.directoryContent__photoContainer {
}

img.directoryContent__personPhoto {
    width: 80px;
    max-width: none;
    height: 80px;
    object-fit: cover;
    object-position: 50% 0%;
    border-radius: 50%;
    border: 1px solid #ccc;
}

.directoryContent__infoContainer {
    margin-left: 1.6rem;
}


    .directoryContent__person:hover {
        background: #18453b !important;
        color: #FFF;
    }

        .directoryContent__person:hover a {
            color: #FFF;
        }

    .directoryContent__person:hover {
        background: #18453b !important;
        box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14),0 1px 10px 0 rgba(0,0,0,0.12),0 2px 4px -1px rgba(0,0,0,0.3);
        transform: scale(1.01);
    }

    .directoryContent__person a {
        color: #18453b;
    }

.directoryContent__personName a {
    color: #18453B;
    display: block;
    font-weight: 700;
}

/* Profile Page */
.directoryContent__personExpertise {
    margin-top: 1rem;
}

    .directoryContent__personExpertise ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .directoryContent__personExpertise li {
        display: inline-block;
    }

    .directoryContent__personExpertise ul li a {
        background: #18453B;
        border-radius: .5rem;
        display: inline-block;
        color: #FFF;
        font-size: 1.4rem;
        margin: .5rem;
        padding: 1rem;
        text-decoration: none;
    }

.profileName {
    grid-column: 1/-1;
    font-size: 3.2rem;
}

    .profileName .directoryContent__personName {
        font-size: 3.2rem;
    }

.profileContact {
    /*grid-column: 1/5;*/
    grid-column: 1/-1; 
}

.profilePhoto {
    border: 1px solid #CCC;
    border-radius: 0 0 .5rem .5rem;
   /*grid-column: 5/8;*/
   grid-column: 1/4;
   grid-row: 2/3;
    margin: 0 auto;
    padding: 1rem;
    transition: .3s all;
}

    .profilePhoto:hover {
        box-shadow: 0 8px 17px 2px rgba(0,0,0,0.14),0 3px 14px 2px rgba(0,0,0,0.12),0 5px 5px -3px rgba(0,0,0,0.2);
        transform: scale(1.01);
    }



    .profilePhoto figcaption {
        font-size: 1.4rem;
        text-align: center;
    }

.profileContact a,
.profileBio a,
.profileCourses a,
.profilePublications a,
.profileResearchInterets a,
.profileOfficeHours a,
.profileResearchInterests a {
    color: #18453B;
}

.profileBio,
.profileCourses,
.profilePublications,
.profileResearchInterets,
.profileOfficeHours,
.profileHonors,
.profileResearchInterests {
    grid-column: 1/-1;
}

/*
    Experts Database Home
*/
.directoryContent__expertHighlightContainer {
    display: grid;
    gap: 1.6rem;
    grid-column: 1/-1;
    grid-template-columns: repeat(12,1fr);
}

    .directoryContent__expertHighlightContainer h2 {
        grid-column: 1/-1;
    }

.directoryContent__expertHighlight {
    font-size: 1.6rem;
    grid-column: span 3;
    position: relative;
    text-align: center;
}

    .directoryContent__expertHighlight .directoryContent__personExpertise {
        margin: 0 1rem;
    }

    .directoryContent__expertHighlight img {
        height: 100%;
        object-fit: cover;
        width: 100%;
    }

    .directoryContent__expertHighlight h3 {
        border-bottom: 0;
        position: relative;
        color: #fff;
        transform-origin: 0 0;
        transform: rotate(-90deg);
        bottom: 0;
        text-align: left;
        background: rgba(0,0,0,.5);
        margin: 0px;
        padding: 1rem 1rem 0;
    }

        .directoryContent__expertHighlight h3::after {
            content: "";
            display: block;
            width: 50px;
            background: #00c24e;
            height: 6px;
            margin: 1rem 0 0;
        }

    .directoryContent__expertHighlight:hover .directoryContent__expertData,
    .directoryContent__expertHighlight:focus-within .directoryContent__expertData {
        height: 100%;
        padding: 8rem 0;
    }

.directoryContent__expertData {
    align-items: center;
    background-color: rgba(255,255,255,.8);
    bottom: 0;
    display: grid;
    height: 0;
    left: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    transition: .5s ease;
    width: 100%;
}

    .directoryContent__expertData h4 {
        border-bottom: none;
        font-size: 3rem;
    }

    .directoryContent__expertData a {
        color: #18453b;
        font-weight: bold;
    }

/*
    Media Queries
*/

@media only screen and (max-width:990px) {
    .mobileOnly {
        display: block;
    }

    .directoryContent__navContainer {
        border: none;
        padding: 0;
    }

    .profileContact {
        grid-column: 1/-1;
        grid-row: 3/4;
        text-align: center;
    }

    .profilePhoto {
        display: grid;
        grid-column: 1/-1;
        grid-row: 2/3;
    }

        .profilePhoto .well {
            justify-self: center;
            width: fit-content;
        }

    .directoryContent__results {
        grid-column: 1/-1;
        grid-row: 2/3;
    }

    .directoryContent__nav {
        grid-column: 1/-1;
        grid-row: 1/2;
    }

    .directoryContent__expertHighlight {
        grid-column: span 6
    }
}

@media only screen and (max-width:500px) {
    .directoryContent__expertHighlight {
        grid-column: 1/-1;
    }
}