#set-3 {
	background: #f06060;
}
.hi-icon {
    cursor: pointer;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    text-align: center;
    position: relative;
    z-index: 1;
}

    .hi-icon a {
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        z-index: 100;
    } 

    .hi-icon:after {
        pointer-events: none;
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        content: '';
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
    }

    .hi-icon:before {
        font-size: 15px;
        line-height: 27px;
        text-transform: none;
        display: block;
        -webkit-font-smoothing: antialiased;
    }
.hi-icon-effect-3 .hi-icon {
    box-shadow: 0 0 0 1px #337ab7; /*circle border color*/
    -webkit-transition: color 0.3s;
    -moz-transition: color 0.3s;
    transition: color 0.3s;
}

    .hi-icon-effect-3 .hi-icon:after {
        top: -2px;
        left: -2px;
        padding: 2px;
        z-index: -1;
        background: #337ab7; /*circle fill background color on hover*/
        -webkit-transition: -webkit-transform 0.2s, opacity 0.3s;
        -moz-transition: -moz-transform 0.2s, opacity 0.3s;
        transition: transform 0.2s, opacity 0.3s;
    }

.hi-icon-effect-3b .hi-icon {
    color: #337ab7; /*icon color before hover*/
}

    .hi-icon-effect-3b .hi-icon:hover {
        color: white; /*icon hover after color*/
    }

    .hi-icon-effect-3b .hi-icon:after {
        -webkit-transform: scale(1.3);
        -moz-transform: scale(1.3);
        -ms-transform: scale(1.3);
        transform: scale(1.3);
        opacity: 0;
    }

    .hi-icon-effect-3b .hi-icon:hover:after {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }