.phone-numbers, .email-addresses, .social-links {
    &:before {
        content: "";
        background-size: 40px;
        background-repeat: no-repeat;
        width: 40px;
        height: 40px;
        position: absolute;
        @include media-breakpoint-down(sm) {
            top: 1rem;
            left: 0.25rem;
        }
        @include media-breakpoint-up(md) {
            left: 5rem;
        }
        @include media-breakpoint-up(lg) {
            left: -3rem;
        }
    }
    p {
        color: #8CBEA0;
        margin-bottom: 0;
        font-family: 'itc-avant-garde-gothic-pro', sans-serif;
        font-weight: 500;
        font-style: normal;
        letter-spacing: 1px;
        font-size: 14px;
        a {
            color: #8CBEA0;
            font-family: 'itc-avant-garde-gothic-pro', sans-serif;
            font-weight: 500;
            font-style: normal;
            letter-spacing: 1px;
        }
    }
}

.phone-numbers {
    @include media-breakpoint-down(sm) {
        padding: 1rem 0;
    }
    &:before {
        background-image: url("/uploads/images/icons/social/primary/phone-primary.png");
    }
    &:after {
        @include media-breakpoint-down(sm) {
            display: none;
        }
        content: "";
        border-right: 1px solid #c1d8c7;
        position: absolute;
        right: -25px;
        height: 25px;
        top: 15px;
    }

    p.colin-mobile, p.lisette-mobile {
        @include media-breakpoint-down(sm) {
            font-size: 0.75rem;
        }
        &:hover {
            a {
                color: $grey;
            }
        }
    }
}

.email-addresses {
    @include media-breakpoint-down(sm) {
        padding: 1rem 0;
    }
    &:before {
        background-image: url("/uploads/images/icons/social/primary/email-primary.png");
    }

    p.colin-email, p.lisette-email {
        @include media-breakpoint-down(sm) {
            font-size: 0.75rem;
        }
        &:hover {
            a {
                color: $grey;
            }
        }
    }

}

.social-links {
    * {
        &:before {
            content: "";
            background-size: 40px;
            background-repeat: no-repeat;
            width: 40px;
            height: 40px;
            position: absolute;
            top: 0.4rem;
            left: -2.5rem;
        }
    }
    .facebook, .instagram, .linkedin {
        &:before {
            @include media-breakpoint-down(sm) {
                left: 1.75rem;
            }
        }
        padding: 1rem 0;
        p {
            a {
                @include media-breakpoint-down(sm) {
                    padding-left: 5rem;
                }
            }
        }
        &:after {
            display: none;
        }
    }
    .facebook {
        &:before {
            background-image: url("/uploads/images/icons/social/primary/facebook-primary.png");
        }
        &:hover {
            &:before {
                background-image: url("/uploads/images/icons/social/grey/facebook-grey.png");
            }
            p {
                a {
                    color: $grey;
                }
            }
        }
        &:after {
            content: "";
            border-right: 1px solid #c1d8c7;
            position: absolute;
            right: 25%;
            height: 40px;
            top: 5px;
        }
    }
    .instagram {
        &:before {
            background-image: url("/uploads/images/icons/social/primary/instagram-primary.png");
        }
        &:hover {
            &:before {
                background-image: url("/uploads/images/icons/social/grey/instagram-grey.png");
            }
            p {
                a {
                    color: $grey;
                }
            }
        }
        &:after {
            content: "";
            border-right: 1px solid #c1d8c7;
            position: absolute;
            right: 21%;
            height: 40px;
            top: 5px;
        }
    }
    .linkedin {
        &:before {
            background-image: url("/uploads/images/icons/social/primary/linkedin-primary.png");
        }
        &:hover {
            &:before {
                background-image: url("/uploads/images/icons/social/grey/linkedin-grey.png");
            }
            p {
                a {
                    color: $grey;
                }
            }
        }
    }
}