$base: 15px;
$DIR_IMAGE: "../../../../../resources/images";
/*Add font ================================*/
@mixin font-face($value){
    @font-face {
        font-family: $value;
        font-display: swap;
        src: local($value), local($value), url('../fonts/'+ $value +'.eot');
        src: local($value), local($value),
            url('../fonts/'+ $value +'.otf') format('opentype'),
            url('../fonts/'+ $value +'.ttf') format('truetype'),    
            url('../fonts/' + $value + '?#iefix') format('embedded-opentype'),
            url('../fonts/'+ $value +'.woff2') format('woff2'),
            url('../fonts/'+ $value +'.woff') format('woff'),    
            url('../fonts/'+ $value +'.svg#'+ $value) format('svg');
    }
}
@mixin font-size($font-size) {
    font-size: ($font-size / $base) + rem;
}
@mixin font($font-weight, $font-size, $line-height, $font-family, $sans:'') {
    @if $font-family == ''{
        $font-family: 'Roboto',sans-serif;
    }
    @if $sans == 1{
        $font-family: $font-family ,sans-serif;
    }
    @if $sans == 0{
        $font-family: $font-family ,serif;
    }
    @if $line-height == ''{
        $line-height: 150%;
    }
    font: $font-weight ($font-size / $base)+rem/$line-height $font-family;
}