@mixin clearfix {
  &:after {
    content: '';
    display: table;
    clear: both;
  }
}

@mixin visuallyhidden {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

@mixin below($measure) {
  @media screen and (max-width: #{$measure}) {
    @content;
  }
}

@mixin above($measure) {
  @media screen and (min-width: #{$measure}) {
    @content;
  }
}

@function strip-unit($number) {
  @if type-of($number) == 'number' and not unitless($number) {
    @return $number / ($number * 0 + 1);
  }

  @return $number;
}

$browser-context: 16px;
@function em($pixels, $context: $browser-context) {
  @return #{strip-unit($pixels) / strip-unit($context)}em;
}