.info{

&.info-hover{
    .info-title{
        transition: color .4s;
    }

    &:hover{
        .icon{
            @include transform-translate-y(-.5rem);

            &.icon-primary{
                &.icon-circle{
                    box-shadow: 0px 15px 30px 0px rgba(249, 99, 50, 0.3);
                }
            }
            &.icon-info{
                &.icon-circle{
                    box-shadow: 0px 15px 35px 0px rgba(44, 168, 255, 0.3);
                }
            }
            &.icon-success{
                &.icon-circle{
                    box-shadow: 0px 15px 35px 0px rgba(24, 206, 15, 0.3);
                }
            }
            &.icon-warning{
                &.icon-circle{
                    box-shadow: 0px 15px 35px 0px rgba(255, 178, 54, 0.3);
                }
            }
            &.icon-danger{
                &.icon-circle{
                    box-shadow: 0px 15px 35px 0px rgba(255, 54, 54, 0.3);
                }
            }

            &.icon-info + .info-title{
                color: $info;
            }

            &.icon-warning + .info-title{
                color: $warning;
            }

            &.icon-danger + .info-title{
                color: $danger;
            }

            &.icon-primary + .info-title{
                color: $primary;
            }

            &.icon-success + .info-title{
                color: $success;
            }
        }
    }
}

.icon{
    color: $default;
    transition: transform .4s, box-shadow .4s;

    > i{
        font-size: 2.3em;
    }

    &.icon-circle{
        max-width: 70px;
        width: 70px;
        height: 70px;
        margin: 0 auto;
        border-radius: 50%;
        box-shadow: 0px 9px 35px -6px rgba(0, 0, 0, 0.3);
        font-size: $font-size-xs;
        background-color: $white;
        position: relative;

        i{
            line-height: 2.6em;
        }
    }
}

.info-title{
    margin: $margin-base-vertical 0 5px;
    padding: 0 15px;
    color: $black;
    font-weight: $font-weight-bold;
}
p{
    color: $default;
    padding: 0 15px;
    font-size: 1.1em;
}

}

.info-horizontal{

text-align: left !important;

.icon{
    float: left;
    margin-top: 23px;
    margin-right: 10px;

    >i{
        font-size: 2em;
    }

    &.icon-circle{
        width: 65px;
        height: 65px;
        max-width: 65px;
        margin-top: 8px;

        i{
            display: table;
            margin: 0 auto;
            line-height: 3.5;
            font-size: 1.9em;
        }
    }
}
.description{
    overflow: hidden;
}

}

.icon{

&.icon-primary{
    color: $brand-primary;

    &.icon-circle{
        box-shadow: 0px 9px 30px -6px rgba($primary, .5);
    }
}
&.icon-info{
    color: $brand-info;

    &.icon-circle{
        box-shadow: 0px 9px 30px -6px rgba($info, .5);
    }
}
&.icon-success{
    color: $brand-success;

    &.icon-circle{
        box-shadow: 0px 9px 30px -6px rgba($success, .5);
    }
}
&.icon-warning{
    color: $brand-warning;

    &.icon-circle{
        box-shadow: 0px 9px 30px -6px rgba($warning, .5);
    }
}
&.icon-danger{
    color: $brand-danger;

    &.icon-circle{
        box-shadow: 0px 9px 30px -6px rgba($danger, .5);
    }
}

&.icon-white{
    color: $white;
}

}