/**

* Allows you to use retina images at various pixel densities.
* Examples:
*
*   @include retina(/images/mypic.jpg, 2);
*   @include retina(/images/mypic.jpg, 3, 100px 100px, left top no-repeat transparent);
*
* @param  {Value}  $path               The path to the file name minus extension.
* @param  {Number} $cap:    2          The highest pixel density level images exist for.
* @param  {Value}  $size:   auto auto  The intended width of the rendered image.
* @param  {Value}  $extras: null       Any other `background` values to be added.
*/

.bg {

background: url("../ipad.png") center center no-repeat; }

.bg2 {

/*
 * Set a counter and get the length of the image path.
 */
/*
 * Loop ver the image path and figure out the
 * position of the dot where the extension begins.
 */
/*
 * If we were able to figure out where the extension is,
 * slice the path into a base and an extension. Use that to
 * calculate urls for different density environments. Set
 * values for different environments.
 */
/*
   * Set a base background for 1x environments.
   */
background: url("../ipad.png") center center no-repeat;
background-size: 300px 149px;
/*
   * Create an @2x-ish media query.
   */
/*
   * Create media queries for all environments that the user has
   * provided images for.
   */
/*
 * If anything went wrong trying to separate the file from its
 * extension, set a background value without doing anything to it.
 */ }
@media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
  .bg2 {
    background: url("../ipad@2x.png") center center no-repeat;
    background-size: 300px 149px; } }
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .bg2 {
    background: url("../ipad@2x.png") center center no-repeat;
    background-size: 300px 149px; } }

.bg3 {

/*
 * Set a counter and get the length of the image path.
 */
/*
 * Loop ver the image path and figure out the
 * position of the dot where the extension begins.
 */
/*
 * If we were able to figure out where the extension is,
 * slice the path into a base and an extension. Use that to
 * calculate urls for different density environments. Set
 * values for different environments.
 */
/*
   * Set a base background for 1x environments.
   */
background: url("../ipad.png") center center no-repeat;
background-size: 300px 149px;
/*
   * Create an @2x-ish media query.
   */
/*
   * Create media queries for all environments that the user has
   * provided images for.
   */
/*
 * If anything went wrong trying to separate the file from its
 * extension, set a background value without doing anything to it.
 */ }
@media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
  .bg3 {
    background: url("../ipad@2x.png") center center no-repeat;
    background-size: 300px 149px; } }
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .bg3 {
    background: url("../ipad@2x.png") center center no-repeat;
    background-size: 300px 149px; } }
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {
  .bg3 {
    background: url("../ipad@3x.png") center center no-repeat;
    background-size: 300px 149px; } }