.contact {
    width: 1600px;
    max-width: 100%;
    margin: auto;
    font-size: 1.2rem;
}

.display {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    .display-item

{
    flex-grow: 1;
    flex-basis: 1px;
    display: flex;
    justify-content: space-around;
    padding: 15px;
    max-width: 100%;
}

}

.contactcard {
    width: 480px;
    max-width: 100%;
    min-height: 620px;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    background-color: white;
    position: relative;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    .card-top

{
    -webkit-flex-basis: 155px;
    flex-basis: 155px;
    flex-shrink: 1;
    background-color: rgba(0,0,0,.2);
    background-position: center;
    background-size: cover;
}

.card-profile {
    flex-basis: 75px;
    flex-shrink: 1;
    .profile-image

{
    overflow: hidden;
    border-radius: 100%;
    position: absolute;
    left: calc(50% - 75px);
    top: calc(13% - 100px);
    border: 4px solid white;
    width: 150px;
    height: 150px;
    background-size: cover;
    background-position: center;
}

}

.card-info {
    flex-basis: 56.66665%;
    flex-grow: 1;
    padding: 0 15px;
    text-align: center;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    .info-title

{
    padding-bottom: 1rem;
    h2

{
    padding-bottom: 0px;
    margin-bottom: 0px;
}

h3 {
    font-weight: 400;
    padding: 0;
    margin: 0;
}

}

.info-follow {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    padding: 15px 0;
    border-bottom: .1rem solid rgba(0,0,0,.3);
    > div

{
    flex-grow: 1;
    flex-basis: 1px;
    min-height: 20px;
    > a
    {
        text-decoration: none;
        > span
        {
            vertical-align:super;
        }
    }

}

.email {
    content: url(/images/contact/email.png);
    height: 2rem;
}

.phone {
    content: url(/images/contact/phone.png);
    height: 2rem;
}

}

.info-bio {
    height: 29rem;
    padding: 15px 0;
    border-bottom: .1rem solid rgba(0,0,0,.3);
    font-size: 1.15rem;
    > ul
    {
        list-style: none;
        columns: 7rem auto;
        column-gap: 1rem;
        padding: 0;
    }

> .MontgomeryNote {
    top: calc(55%);
    position: absolute;
    padding: 0 1rem 0 5rem;
    color: red;

    @media screen and (width <= 1051px) {
        top:calc(52%);
    }

    @media screen and (width <= 768px) {
        top:calc(58%);
    }

    @media screen and (width <= 450px) {
        top:calc(60%);
    }

    @media screen and (width <= 428px) {
        top:calc(59%);
    }

    @media screen and (width <= 399px) {
        top:calc(58%);
    }

    @media screen and (width <= 389px) {
        top:calc(56%);
    }

    @media screen and (width <= 330px) {
        top:calc(55%);
    }

    @media screen and (width <= 321px) {
        top:calc(55%);
    }

    @media screen and (width <= 316px) {
        top:calc(53%);
    }
}

> p {
    top: calc(59%);
    position: absolute;
    padding: 0 1rem 0 0.5rem;

    @media screen and (width <= 1051px) {
        top:calc(59%);
    }

    @media screen and (width <= 768px) {
        top:calc(61%);
    }

    @media screen and (width <= 450px) {
        top:calc(64.5%);
    }

    @media screen and (width <= 428px) {
        top:calc(63%);
    }

    @media screen and (width <= 399px) {
        top:calc(61.5%);
    }

    @media screen and (width <= 389px) {
        top:calc(60%);
    }

    @media screen and (width <= 330px) {
        top:calc(59%);
    }

    @media screen and (width <= 321px) {
        top:calc(58%);
    }

    @media screen and (width <= 316px) {
        top:calc(56%);
    }
}

@media screen and (width <= 450px) {
    height:38rem;
}

}

.info-resources {
    padding: 15px 0;
    text-align: left;
    font-size: 1.15rem;
    > ul

{
    list-style: none;
    padding: 0;
    >li

{
    padding-bottom: 1rem;
    > a

{
    color: #5c53c6;
}

> a:visited {
    color: #a3a3a3;
}

}
}
}
}
}

.contactcard.north > .card-top {
    background-image: url(/images/Advisors/north.jpg);
}

.contactcard.north > .card-profile > .profile-image {
    background-image: url(/images/Advisors/30031.png);
}

.contactcard.southeast > .card-top {
    background-image: url(/images/Advisors/southeast.jpg);
}

.contactcard.southeast > .card-profile > .profile-image {
    background-image: url(/images/Advisors/30031.png);
}

.contactcard.southwest > .card-top {
    background-image: url(/images/Advisors/southwest.jpg);
}

.contactcard.southwest > .card-profile > .profile-image {
    background-image: url(/images/Advisors/30034.JPG);
}