.team-area {
    background: #f8fcff;

    @media #{$lg} {
        padding-bottom: 150px;
        padding-top: 150px;
    }

    @media #{$md} {
        padding-bottom: 100px;
        padding-top: 100px;
    }

    @media #{$sm} {
        padding-bottom: 70px;
        padding-top: 70px;
    }

    @media #{$xs} {
        padding-bottom: 70px;
        padding-top: 70px;
    }

    .single-team {
        .team-img {
            overflow: hidden;
            position: relative;

            img {
                width: 100%;
                transform: scale(1);
                transition: all 0.6s ease-out 0s;
            }
        }

        .team-caption {
            background: #fff;
            padding: 15px 0px;
            text-align: center;

            h3 {
                margin-bottom: 3px;

                a {
                    color: #33384e;
                    font-weight: 700;
                    font-size: 25px;

                    @media #{$md} {
                        font-size: 18px;
                    }

                    &:hover {
                        color: $theme-color;
                    }
                }
            }

            p {
                color: #57667e;
            }

        }

        // Hover
        &:hover .team-img {
            img {
                transform: scale(1.06);
            }

            // Effect
            .team-social {
                a {
                    transform: translateY(0px);
                    opacity: 1;
                    visibility: visible;

                }
            }
        }
    }
}

.team-social {
    position: absolute;
    bottom: 22px;
    left: 0;
    right: 0;
    text-align: center;

    li {
        display: inline-block;

        a {
            color: #8ba4b1;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            font-size: 14px;
            line-height: 40px;
            text-align: center;
            margin-left: 8px;
            display: inline-block;
            background: #fff;
            @include transform(.4s);

            i {
                display: inline-block;
            }

            // Effect
            transform: translateY(60px);
            opacity: 0;
            visibility: hidden;

        }

        &:nth-child(1) a {
            transition-delay: 0.0s;
        }

        &:nth-child(2) a {
            transition-delay: 0.1s;
        }

        &:nth-child(3) a {
            transition-delay: 0.3s;
        }
    }
}