/*! Gray v1.4.5 (https://github.com/karlhorky/gray) | MIT */
.desaturate {
  /* Firefox 10-34 */
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='saturate' values='0'/></filter></svg>#grayscale");

  /*
    Chrome 19+,
    Safari 6+,
    Safari 6+ iOS,
    Opera 15+
  */
  -webkit-filter: grayscale(1);

  /* Firefox 35+ */
  filter: grayscale(1);

  /* IE 6-9 */
  filter: gray;
}

.desaturate.desaturate-fade {
  transition: filter .5s;
}

/* Webkit hack until filter is unprefixed */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .desaturate.desaturate-fade {
    -webkit-transition: -webkit-filter .5s;
    transition:         -webkit-filter .5s;
  }
}

.desaturate.desaturate-off,
.desaturate.desaturate-fade:hover {
  -webkit-filter: grayscale(0);
  filter:         grayscale(0);
}

/* Background element */
.desaturate.desaturate-replaced {
  -webkit-filter: none;
  filter:         none;
}

.desaturate.desaturate-replaced > svg {
  -webkit-transition: opacity .5s ease;
  transition:         opacity .5s ease;
  opacity: 1;
}

.desaturate.desaturate-replaced.desaturate-off > svg,
.desaturate.desaturate-replaced.desaturate-fade:hover > svg {
  opacity: 0;
}