.insight-icon-boxes {
    &--icon {
        font-size: 40px;
        color: $primary-color;
    }

    &--title {
        text-transform: uppercase;
        margin-top: 9px;
        margin-bottom: 12px;
    }

    &--content {

    }

    &.icon_on_top {
        text-align: center;

        .insight-icon-boxes--icon {
            display: block;
            width: 100%;
            margin-bottom: 15px;
        }

        .insight-icon-boxes--title {
            display: block;
            margin-bottom: 15px;
        }
    }

    &.icon_on_left, &.icon_on_right {
        margin-bottom: 50px;

        .insight-icon-boxes--title {
            margin-top: 0;
            text-transform: none;
        }

        .insight-icon-boxes--icon {
            font-size: 45px;

            img {
                max-width: none;
            }

            i {
                background-color: #fff;
                border-radius: 50%;
                @include transit;
                height: 70px;
                width: 70px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }

        .insight-icon-boxes--icon, .insight-icon-boxes--inner {
            display: table-cell;
            vertical-align: middle;
        }

        &:hover {
            .insight-icon-boxes--icon {
                i {
                    background-color: $primary-color;
                    color: #fff;
                }
            }
        }
    }

    &.icon_on_left {
        .insight-icon-boxes--inner {
            padding-left: 20px;
        }
    }

    &.icon_on_right {
        text-align: right;
        float: right;

        .insight-icon-boxes--inner {
            padding-right: 20px;
        }
    }
}
