.agent-row {
    background-color: map-get($grey, 100);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
    margin-bottom: 30px;

    @media (max-width: $screen-xs-max) {
        background-color: #fff;
    }

    .row {
        display: table;
        margin-left: 0;
        margin-right: 0;
        width: 100%;

        > div {
            display: table-cell;
            float: none;
            vertical-align: top;

            @media (max-width: $screen-xs-max) {
                display: block;
            }
        }

        @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
            background-color: #fff;

            > div {
                display: block;
                float: left;
            }            

            .agent-row-info {
                background-color: map-get($grey, 200);
                clear: both;                
            }
        }        
    }
}

.agent-row-image {
    background-color: #fff;
    padding: 16px;

    img {
        border-radius: 50%;
        height: auto;
        position: relative;
        width: 100%;
        z-index: 2;
    }
}

.agent-row-image-inner {
    a {
        @include image_hover;
        background-color: rgba(black, .15);
        border-radius: 50%;
        display: block;
        height: 0;
        padding-bottom: 100%;
        position: relative;

        &:before {
            @include placeholder('\f007', 50);
            left: 50%;
            position: absolute;
            top: 50%;
            transform: translateX(-50%), translateY(-50%);
        }

        &:after {
            border-radius: 50%;
            overflow: hidden;
        }
    }
}

.agent-row-content {
    background-color: #fff;

    p {
        color: map-get($grey, 700);
    }
}

.agent-row-title {
    a {
        color: map-get($grey, 800);

        &:hover {
            text-decoration: none;
        }
    }
}

.agent-row-subtitle {
    color: map-get($grey, 700);
    font-size: 15px;
}

.agent-row-info {
    padding: 16px;

    ul {
        color: map-get($grey, 800);
        list-style: none;
        margin: 0;
        padding: 0;

        .fa {
            color: map-get($grey, 700);
            margin: 0 5px 0 0;
        }

        li {
            margin: 0;
        }

        a {
            color: map-get($color-secondary, 400);
        }
    }
}
