/*-----------------------
    Features
------------------------*/
.feature-item {
    position: relative;
    margin-bottom: 30px;

    .feature__img {
        overflow: hidden;

        img {
            @include prefix(transition, transform .3s ease, webkit moz ms o);
        }
    }

    .feature__content {
        position: relative;
        padding: 46px 45px 20px 50px;
    }

    .feature__subtitle {
        font-family: $font-body;
        font-size: 14px;
        display: inline-block;
        margin-bottom: 6px;
    }

    .feature__title {
        font-size: 24px;
        margin-bottom: 22px;
    }

    .feature__desc {
        font-size: 15px;
        line-height: 25px;
        margin-bottom: 25px;
    }

    .feature__icon {
        font-size: 55px;
        line-height: 1;
        color: $color-theme;
        margin-bottom: 25px;
    }

    .btn {
        height: 40px;
        line-height: 40px;
        min-width: 110px;

        i {
            opacity: 0;
            margin-left: -10px;
            @include prefix(transition, all .3s linear, webkit moz ms o);
        }

        &:hover {
            i {
                opacity: 1;
                margin-left: 7px;
            }
        }
    }

    &:hover {
        .fancybox__icon {
            @include animation("slideTopDown 1s infinite alternate");
        }

        .feature__img img {
            @include prefix(transform, scale(1.1), webkit moz ms o);
        }
    }
}

.features-wrapper {
    position: relative;
    z-index: 3;
    background-color: $color-white;
    box-shadow: 0px 5px 83px 0px rgba(40, 40, 40, 0.12);

    .feature__content:before {
        content: '';
        position: absolute;
        top: 50px;
        right: 0;
        bottom: 20px;
        width: 2px;
        background-color: #eaeaea;
    }

    >[class^="col-"]:last-child .feature-item .feature__content:before {
        display: none;
    }
}

.features-layout2 {
    .feature-item {
        .feature__content {
            padding: 0;
        }

        &:hover .feature__icon {
            @include animation("slideTopDown 1s infinite alternate");
        }
    }
}

.fetures-bg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 50%;
}

@media (max-width:992px) {
    .feature-item {
        .feature__content {
            padding: 20px;

            &:before {
                top: 20px;
            }
        }

        .feature__title {
            font-size: 20px;
            margin-bottom: 10px;
        }

        .feature__desc {
            font-size: 14px;
            margin-bottom: 10px;
        }
    }
}

@include xs-sm-screens {
    .feature-item .feature__content:before {
        display: none;
    }
}