// For image replacement
@mixin ir { 
  background-color: transparent;
  border:0;
  font: 0/0 a;
  text-shadow: none;
  color: transparent;
}

// Hide for both screenreaders and browsers: h5bp.com/m
@mixin hidden {
  display: none !important;
  visibility: hidden;
}

// Hide only visually, but have it available for screenreaders: h5bp.com/n  & h5bp.com/o */
@mixin visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  // Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
  &.focusable {
    &:active, &:focus {
       clip: auto;
       height: auto;
       margin: 0;
       overflow: visible;
       position: static;
       width: auto;
    }
  }
}

// Hide visually and from screenreaders, but maintain layout
@mixin invisible {
  visibility: hidden;
}

// Clearfix
// --------
// For clearing floats like a boss h5bp.com/q

@mixin clearfix() {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
  }
  &:after {
    clear: both;
  }
}