/*--------------------
     Team
---------------------*/
.member {
    position: relative;
    border-radius: 8px;
    background-color: $color-white;
    @include prefix(transition, all 0.4s ease-in-out, webkit moz ms o);
    margin-bottom: 30px;

    &:before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 40px;
        right: 40px;
        height: 3px;
        background-color: $color-primary;
        @include prefix(transition, transform 0.4s linear, webkit moz ms o);
        @include prefix(transition-delay, 0.3s, webkit moz ms o);
        @include prefix(transform, scaleX(0), webkit moz ms o);
    }

    .member__img {
        position: relative;
        overflow: hidden;
        border-radius: 6px;

        img {
            @include prefix(transition, all 0.9s ease, webkit moz ms o);
        }
    }

    .member__info {
        padding: 35px 40px;

        .member__name {
            font-size: 21px;
            margin-bottom: 11px;

            a {
                color: $color-heading;

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

        .member__job {
            color: $color-primary;
            margin-bottom: 10px;
        }

        .member__desc {
            font-size: 15px;
            margin-bottom: 0;
        }
    }

    .member__hover {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        opacity: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        border-radius: 4px;
        @include prefix(transition, all .5s linear, webkit moz ms o);
    }

    .social-icons li {
        opacity: 0;
        @include prefix(transition, all 0.4s ease-in-out, webkit moz ms o);

        a {
            width: 40px;
            height: 40px;
            line-height: 40px;
            font-size: 16px;
            color: $color-white;

            &.facebook {
                background-color: #3b5999;
            }

            &.twitter {
                background-color: #55acee;
            }

            &.phone {
                background-color: #283b6a;
            }

            &:hover {
                background-color: $color-dark;
            }
        }

        &:nth-of-type(1) {
            transition-delay: 100ms;
        }

        &:nth-of-type(2) {
            transition-delay: 200ms;
        }

        &:nth-of-type(3) {
            transition-delay: 300ms;
        }
    }

    .btn__link.btn__secondary {
        padding: 12px 0;
        margin-top: 5px;

        i {
            width: auto;
            height: auto;
            margin-left: 3px;
            color: $color-secondary;
            background-color: transparent !important;
            @include prefix(transition, all 0.3s linear, webkit moz ms o);
        }

        &:hover {
            color: $color-white !important;
            background-color: $color-primary !important;
        }
    }

    &:hover {
        box-shadow: 0px 5px 83px 0px rgba(9, 29, 62, 0.15);

        .member__hover,
        .social-icons li {
            opacity: 1;
        }

        .btn__link.btn__secondary {
            padding: 12px 15px;
            color: $color-white;
            background-color: $color-secondary;

            i {
                color: $color-white;
            }
        }
    }
}

.team-layout1 {
    .member {
        .social-icons {
            position: absolute;
            top: 40px;
            left: 40px;
        }
    }
}

.team-layout1,
.team-layout2 {
    .slick-list {
        margin: -15px;
        overflow: visible;
    }

    .slick-slide {
        margin: 15px;
        @include prefix(transition, all 0.3s ease, webkit moz ms o);

        &.slick-active {
            opacity: 1;
            visibility: visible;
        }

        &:not(.slick-active) {
            opacity: 0;
            visibility: hidden;
        }
    }

    .member:hover {
        &:before {
            @include prefix(transform, scaleX(1), webkit moz ms o);
        }
    }
}


/* Mobile Phones and tablets */
@include xs-sm-screens {
    .member {
        &:before {
            left: 20px;
            right: 20px;
        }

        .member__info {
            padding: 15px 20px;
        }
    }
}