//
// This will surround it's contents with an
// appropriate media query.
//
// @type {iphone,ipad,desktop}
//
@mixin media($type:desktop){
  @if       $type == iphone            { @media (max-width: 767px)                                            { @content } }
  @else if  $type == ipad              { @media (min-width: 768px) and (max-width: 1019px)                    { @content } }
  @else if  $type == desktop           { @media (min-width: 1020px)                                           { @content } }
  @else if  $type == retina            { @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { @content } }
}