%btn{
    display: inline-block;
    @include border();
    height: 40px;
    line-height: 38px;
    padding: 0 30px;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: $font_weight_bold;
    i{
        display: inline-block;
        padding-left: 15px;
        @include transition();
    }
}
/*
    image
    alignment
    visibility
    box-shadow
    text transform
    counter
    button
*/ 

// image
img{
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}
.bg-image{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: lighten($color_shade,10%);
}
// Alignment
.#{$prefix}-center{
    text-align: center;
}
// visibility
.blook-d-none{
    display: none;
}
// box shadow
.#{$prefix}-box-shadow{
    box-shadow: 0 0 4px 4px rgba($color_light_gray,0.63);

}
.blook-section-border{
    @include border-top();
    border-color: rgba($color_light_gray,0.63);
}
// text transform
.blook-text-uppercase{
    text-transform: uppercase;
}
// counter
.#{$prefix}-counter{
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 26px;
    text-align: center;
    @include border(2px,solid);
    border-radius: 100%;
    border-color: $color_white;
    font-size: 14px;
}
// button
.blook-btn-rounded{
    border-radius: 25px;
}
.blook-btn-primary{
    &:hover,
    &:focus{
        background-color: $color_white;
    }
}
.blook-read-more-btn{
    display: block;
    position: relative;
    width: 100%;
    &:after{
        content: '';
        display: block;
        height: 1px;
        width: 100%;
        background-color: rgba($color_shade,0.63);
        position: absolute;
        left: 0;
        top: 20px;
        z-index: -1;
    }
    a{
       @extend %btn;
        background-color: $color_white;
    }
  
}
.blook-btn-style-1{
    @extend %btn;
    &:hover{
        i{
            @include transform(scale(1.2));
        }
    }
}