// MIXINS
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}
@mixin media-xs {
  @media screen and (max-width: 768px) {
    @content;
  }
}

@mixin media-sm {
  @media screen and (max-width: 992px) {
    @content;
  }
}

@mixin media-md {
  @media screen and (max-width: 1200px) {
    @content;
  }
}

// FONT MIXINS
@function calculateRem($size) {
  $remSize: $size / 16px;
  @return $remSize * 1rem;
}

@mixin font($family, $weight, $size, $style) {
    font-family: $family;
    font-weight: $weight;
    font-size: $size;
    font-size: calculateRem($size);
    font-style: $style;
}