/* Icon Featured */
.icon-featured {
    display: inline-block;
    font-size: 0px;
    margin: 15px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    text-align: center;
    position: relative;
    z-index: 1;
    color: #FFF;
    font-size: 40px;
    line-height: 110px;
    &:after {
        pointer-events: none;
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        content: '';
        @include box-sizing(content-box);
    }
    img {
        position: absolute;
        top: 0; bottom: 0; left: 0; right: 0;
        margin: auto; padding: 0;
    }
}

/* Featured Box */
.featured-box {
    background: if-light(#f5f5f5, $color-dark-4);
    @include if-light {
        @include background(linear-gradient(to bottom, #FFF 1%, #F9F9F9 98%) repeat scroll 0 0 #F5F5F5);
    }
    @include box-sizing(border-box);
    border-bottom: if-light(1px solid #dfdfdf, 1px solid $color-dark-4);
    border-left: if-light(1px solid #ececec, 1px solid $color-dark-4);
    border-right: if-light(1px solid #ececec, 1px solid $color-dark-4);
    border-radius: $border-strong;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.04);
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    min-height: 100px;
    position: relative;
    text-align: center;
    z-index: 1;

    &.align-left {
        text-align: $left;
    }
    &.align-center {
        text-align: center;
    }
    &.align-right {
        text-align: $right;
    }
    &.align-justify {
        text-align: justify;
    }

    .woocommerce &,
    .woocommerce-page &{
        h2,
        h3,
        h4 {
            font-size: 1.3em;
            font-weight: 400;
            letter-spacing: -0.7px;
            line-height: 1.42857;
            margin-top: 30px;
            margin-bottom: 15px;
            text-transform: uppercase;

            &:first-child {
                margin-top: -5px;
            }
        }
        header {
            h2,
            h3,
            h4 {
                font-size: 1.1em;
                margin-top: 0 !important;
            }
        }
    }
    h4,
    .wpb_heading {
        font-size: 1.3em;
        font-weight: 400;
        letter-spacing: -0.7px;
        margin-top: 5px;
        margin-bottom: 5px;
    }
    .box-content {
        border-radius: $border-strong;
        border-top: 1px solid #dfdfdf;
        position: relative;
        top: -1px;
        padding: 30px $grid-gutter-width 10px $grid-gutter-width;

        @media #{$screen-medium} {
            padding: 25px ($grid-gutter-width / 2) 5px ($grid-gutter-width / 2);
        }
    }
    .learn-more {
        display: block;
        margin-top: 10px;
    }

    .aio-icon-box {
        margin-top: 15px;
        margin-bottom: 25px;
    }

    .wpb_content_element {
        margin-bottom: 20px;
    }
}

.featured-box {
	h2 {
		margin-bottom: 0px;
		padding: 10px 0px;
	}
}


/* Featured Box Left */
.featured-box-text-left {
    text-align: left;
}

/* Featured Boxes - Flat */
.featured-boxes-flat .featured-box {
    box-shadow: none;
    margin: 10px 0;

    .box-content {
        background: if-light(#fff, $color-dark-4);
        margin-top: 65px;
    }

    .icon-featured {
        display: inline-block;
        font-size: 38px;
        height: 90px;
        line-height: 90px;
        padding: 0;
        width: 90px;
        margin: -100px 0 -15px;
        position: relative;
        top: -37px;
    }
}

/* Featured Boxes - Style 2 */
.featured-boxes-style-2 .featured-box {
    background: none;
    border: 0;
    margin: 10px 0;
    box-shadow: none;

    .box-content {
        border: 0;
        padding: 0;
    }

    .icon-featured {
        display: inline-block;
        font-size: 30px;
        height: 75px;
        line-height: 75px;
        padding: 0;
        width: 75px;
        margin-top: 0;
    }
}

/* Featured Boxes - Style 3 */
.featured-boxes-style-3 {
    .featured-box {
        margin: 10px 0;

        .icon-featured {
            display: inline-block;
            font-size: 30px;
            height: 75px;
            line-height: 75px;
            padding: 0;
            width: 75px;
            margin-top: -35px;
            background: if-light(#fff, $color-dark);
            border: 3px solid #CCC;
            line-height: 68px;
        }
    }

    &:not(.featured-boxes-flat) {
        .featured-box {
            background: none;
            border: 0;
            box-shadow: none;

            .box-content {
                border: 0;
                padding: 0;
            }
        }
    }
}

/* Featured Boxes - Style 4 */
.featured-boxes-style-4 .featured-box {
    background: none;
    border: 0;
    margin: 10px 0;
    box-shadow: none;

    .box-content {
        border: 0;
        padding: 0;
    }

    .icon-featured {
        display: inline-block;
        font-size: 40px;
        height: 45px;
        line-height: 45px;
        padding: 0;
        width: 45px;
        margin-top: 0;
        margin-bottom: 10px;
        background: transparent;
        border-radius: 0;
    }
}

/* Featured Boxes - Style 5, 6 and 7 */
.featured-boxes-style-5, .featured-boxes-style-6, .featured-boxes-style-7 {
    .featured-box {
        background: none;
        border: 0;
        box-shadow: none;
        margin: 10px 0;

        .box-content {
            border: 0;
            padding: 0;
            h4 {
                color: if-light($color-dark-4, #fff);
            }
        }

        .icon-featured {
            display: inline-block;
            font-size: 30px;
            height: 75px;
            padding: 0;
            width: 75px;
            margin-top: 0;
            margin-bottom: 10px;
            background: if-light(#fff, $color-dark-3);
            border: if-light(1px solid #dfdfdf, 1px solid $color-dark-4);
            line-height: 73px;
        }
    }
}

/* Featured Boxes - Style 6 */
.featured-boxes-style-6 {
    .featured-box {
        .icon-featured {
            @include if-dark {
                background: $color-dark-3;
            }
            border: if-light(1px solid #cecece, 1px solid $color-dark-4);
            &:after {
                border: if-light(5px solid #f4f4f4, 5px solid $color-dark-4);
                border-radius: 50%;
                box-sizing: content-box;
                content: "";
                display: block;
                height: 100%;
                left: -6px;
                padding: 1px;
                position: absolute;
                top: -6px;
                width: 100%;
            }
        }

    }
}

/* Featured Boxes - Style 7 */
.featured-boxes-style-7 {
    .featured-box {
        .icon-featured {
            border: if-light(1px solid #dfdfdf, 1px solid $color-dark-4);
            @include if-dark {
                background: $color-dark-3;
                &:after {
                    box-shadow: 3px 3px darken($color-dark, 3%);
                }
            }
        }
    }
}

/* Featured Boxes - Style 8 */
.featured-boxes-style-8 {
    .featured-box {

        .icon-featured {
            display: inline-block;
            font-size: 30px;
            height: 75px;
            padding: 0;
            width: 75px;
            margin: -38px 0 -16px;
            background: if-light(#fff, $color-dark-4);
            line-height: 73px;
            border: 0;
            &:after {
                display: none;
            }
        }

    }
}

/* Effects */
.featured-box-effect-1 {
    .icon-featured:after {
        top: -7px;
        left: -7px;
        padding: 7px;
        box-shadow: if-light(0 0 0 3px #fff, 0 0 0 3px $color-dark-4);
        @include transition(transform 0.2s, opacity 0.2s);
        @include transform(scale(1));
        opacity: 0;
    }
    &:hover {
        .icon-featured:after {
            @include transform(scale(.8));
            opacity: 1;
        }
    }
}

.featured-box-effect-2 {
    .icon-featured:after {
        top: -7px;
        left: -7px;
        padding: 7px;
        box-shadow: 0 0 0 3px #FFF;
        @include transition(transform 0.2s, opacity 0.2s);
        @include transform(scale(0.8));
        opacity: 0;
    }
    &:hover {
        .icon-featured:after {
            @include transform(scale(0.95));
            opacity: 1;
        }
    }
}

.featured-box-effect-3 {
    .icon-featured:after {
        top: 0;
        left: 0;
        box-shadow: 0 0 0 10px #FFF;
        @include transform(scale(0.9));
        @include transition(transform 0.2s, opacity 0.2s);
        opacity: 0;
    }
    &:hover {
        .icon-featured {
            color: #FFF !important;
            &:after {
                @include transform(scale(1));
                opacity: .8;
            }
        }
    }
}

.featured-box-effect-4 {
    .icon-featured {
        @include transform(scale(1));
        @include transition(transform 0.2s, transform 0.2s);
    }
    &:hover {
        .icon-featured {
            @include transform(scale(1.15));
        }
    }
}

.featured-box-effect-5 {
    .icon-featured {
        overflow: hidden;
        @include transition(all 0.3s);
    }
    &:hover {
        .icon-featured {
            @include animation(toRightFromLeft 0.3s forwards);
        }
    }
}

@-webkit-keyframes toRightFromLeft {
    49% {
        -webkit-transform: translate(100%);
    }
    50% {
        opacity: 0;
        -webkit-transform: translate(-100%);
    }
    51% {
        opacity: 1;
    }
}
@-moz-keyframes toRightFromLeft {
    49% {
        -moz-transform: translate(100%);
    }
    50% {
        opacity: 0;
        -moz-transform: translate(-100%);
    }
    51% {
        opacity: 1;
    }
}
@keyframes toRightFromLeft {
    49% {
        transform: translate(100%);
    }
    50% {
        opacity: 0;
        transform: translate(-100%);
    }
    51% {
        opacity: 1;
    }
}

.featured-box-effect-6 {
    .icon-featured:after {
        @include transition(all 0.2s, transform 0.2s);
    }
    &:hover {
        .box-content {
            .icon-featured:after {
                @include transform(scale(1.1));
            }
        }
    }
}

.featured-box-effect-7 {
    .icon-featured:after {
        opacity: 0;
        box-shadow: 3px 3px #d5d5d5;
        @include transform(rotate(-90deg));
        @include transition(opacity 0.2s, transform 0.2s);
        left: 0;
        top: -1px;
    }
    &:hover {
        .icon-featured:after {
            opacity: 1;
            @include transform(rotate(0deg));
        }
    }
    .icon-featured:before {
        @include transform(scale(0.8));
        opacity: .7;
        @include transition(transform 0.2s, opacity 0.2s);
    }
    &:hover {
        .icon-featured:before {
            @include transform(scale(1));
            opacity: 1;
        }
    }
}

/* Feature Box */
.feature-box {
    clear: both;
    .feature-box-icon {
        border-radius: 35px;
        color: #FFF;
        display: inline-block;
        float: $left;
        margin-#{$right}: 10px;
        height: 35px;
        line-height: 35px;
        position: relative;
        text-align: center;
        top: 5px;
        width: 35px;
    }
    .feature-box-info {
        padding-#{$left}: 50px;
    }
}

/* Style 2 */
.feature-box {
    &.feature-box-style-2 {
        h4 {
            color: if-light($color-dark, #fff);
        }
        .feature-box-icon {
            background: transparent;
            width: 50px;
            height: 50px;
            i {
                font-size: 28px;
            }
        }
        .feature-box-info {
            padding-#{$left}: 60px;
        }
    }
}

/* Style 3 */
.feature-box {
    &.feature-box-style-3 {
        h4 {
            color: if-light($color-dark, #fff);
        }
        .feature-box-icon {
            border: 1px solid #CCC;
            background: transparent;
            line-height: 32px;
        }
    }
}

/* Style 4 */
.feature-box {
    &.feature-box-style-4 {
        h4 {
            color: if-light($color-dark, #fff);
        }
        .feature-box-icon {
            background: transparent;
            padding-bottom: 10px;
            height: auto;
            width: auto;
            float: none;
            i {
                font-size: 38px;
            }
        }
        .feature-box-info {
            clear: both;
            padding-#{$left}: 0;
        }
    }
}

/* Style 5 */
.feature-box {
    &.feature-box-style-5 {
        h4 {
            color: $color-dark;
        }
        .feature-box-icon {
            background: transparent;
            width: 74px;
            height: 74px;
            i {
                font-size: 44px;
            }
        }
        .feature-box-info {
            padding-#{$left}: 84px;
        }
    }
}

/* Style 6 */
.feature-box {
    &.feature-box-style-6 {
        h4 {
            color: $color-dark;
        }
        .feature-box-icon {
            border: if-light(1px solid #cecece, 1px solid $color-dark-4);
            background: transparent;
            line-height: 32px;
            &:after {
                border: if-light(3px solid #f4f4f4, 3px solid $color-dark-4);
                border-radius: 50%;
                box-sizing: initial;
                content: "";
                display: block;
                height: 100%;
                left: -4px;
                padding: 1px;
                position: absolute;
                top: -4px;
                width: 100%;
            }
            i {
                color: #a9a9a9;
            }
        }
    }
}

/* Reverse */
@media (min-width: 991px) {
    .feature-box.reverse {
        text-align: $right;
        .feature-box-info {
            padding-#{$right}: 50px;
            padding-#{$left}: 0;
        }
        .feature-box-icon {
            float: $right;
            margin-#{$left}: 10px;
            margin-#{$right}: 0;
        }
        &.feature-box-style-2 {
            .feature-box-info {
                padding-#{$right}: 60px;
            }
        }
        &.feature-box-style-4 {
            .feature-box-info {
                padding-#{$right}: 0;
            }
        }
        &.feature-box-style-5 {
            .feature-box-info {
                padding-#{$right}: 84px;
            }
        }
    }
}

/* Full Width */
.featured-boxes-full {
    width: 100%;
    > [class*="col-"] {
        padding: 0;
    }
    .featured-box-full {
        text-align: center;
        padding: 55px;
        i, h1, h2, h3, h4, h5, h6, p, a {
            color: #FFF;
            padding: 0;
            margin: 0;
        }
        i {
            font-size: 55px;
            margin-bottom: 15px;
            text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
        }
        p {
            padding-top: 12px;
            opacity: .8;
        }
    }
}

.aio-icon-component.featured-icon {
    .aio-icon-header h3.aio-icon-title {
        font-weight: $font-weight-semibold;
    }

    .aio-icon {
        border-radius: 35px;
        color: #FFF;
        margin-#{$right}: 10px;
        height: 35px;
        position: relative;
        text-align: center;
        width: 35px;
        border: if-light(1px solid #cecece, 1px solid $color-dark-4);
        background: transparent;
        line-height: 32px;
        &:after {
            border: if-light(3px solid #f4f4f4, 3px solid $color-dark-4);
            border-radius: 50%;
            box-sizing: initial;
            content: "";
            display: block;
            height: 100%;
            left: -4px;
            padding: 1px;
            position: absolute;
            top: -4px;
            width: 100%;
        }

        i {
            line-height: 35px;
        }
    }
}