img.filter {
	display: block;
}

.filter  {
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
}
/* https://msdn.microsoft.com/en-us/library/ms532847(v=vs.85).aspx */
/* Filter on styles */
.filter.saturate {
	-webkit-filter: saturate(3);
	-moz-filter: saturate(3);
	-o-filter: saturate(3);
	filter: saturate(3);
    filter: gray; /* not supported fallback IE 6-9 */
}
.filter.grayscale {
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(100%);
    /* -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(enabled=true, grayScale=1)'; */
    filter: gray; /* IE 6-9 */
}
.filter.contrast {
	-webkit-filter: contrast(160%);
	-moz-filter: contrast(160%);
	-o-filter: contrast(160%);
	filter: contrast(160%);
    filter: gray; /* not supported fallback IE 6-9 */
}
.filter.brightness {
	-webkit-filter: brightness(0.25);
	-moz-filter: brightness(0.25);
	-o-filter: brightness(0.25);
	filter: brightness(0.25);
    filter: gray; /* not supported fallback IE 6-9 */
}
.filter.blur {
	-webkit-filter: blur(3px);
	-moz-filter: blur(3px);
	-o-filter: blur(3px);
	filter: blur(3px);
    -ms-filter: 'progid:DXImageTransform.Microsoft.Blur(PixelRadius=3)';
}
.filter.invert {
	-webkit-filter: invert(100%);
	-moz-filter: invert(100%);
	-o-filter: invert(100%);
	filter: invert(100%);
    /* -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(enabled=true, Invert=1)'; */
    filter: gray; /* not supported fallback IE 6-9 */
}
.filter.sepia {
	-webkit-filter: sepia(100%);
	-moz-filter: sepia(100%);
	-o-filter: sepia(100%);
	filter: sepia(100%);
    filter: gray; /* not supported fallback IE 6-9 */
}
.filter.hue-rotate {
	-webkit-filter: hue-rotate(180deg);
	-moz-filter: hue-rotate(180deg);
	-o-filter: hue-rotate(180deg);
	filter: hue-rotate(180deg);
    filter: gray; /* not supported fallback IE 6-9 */
}
.filter.opacity {
	-webkit-filter: opacity(50%);
	-moz-filter: opacity(50%);
	-o-filter: opacity(50%);
	filter: opacity(50%);
    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)';
}

/* Filter off styles */
.filter.saturate:hover,
.filter.grayscale:hover,
.filter.contrast:hover,
.filter.brightness:hover,
.filter.blur:hover,
.filter.invert:hover,
.filter.sepia:hover,
.filter.hue-rotate:hover,
.filter.opacity:hover {
	-webkit-filter: none;
	-moz-filter: none;
	-o-filter: none;
	filter: none;
    /* -ms-filter: none; */
}

/* Filter compatibility styles */
span.svg img.overlay {
	opacity: 0;
}

span.svg img.overlay:hover {
	opacity: 1;
}

span.svg img.overlay  {
    -webkit-transition: opacity 500ms ease;
    -moz-transition: opacity 500ms ease;
    -o-transition: opacity 500ms ease;
    transition: opacity 500ms ease;
  
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
  
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

/* Filter on svg images */
.svgfilter.saturate {
	filter: url(#saturate);
}
.svgfilter.grayscale {
	filter: url(#grayscale);
}
.svgfilter.contrast {
  	filter: url(#contrast);
}
.svgfilter.brightness {
  	filter: url(#brightness);
}
.svgfilter.blur {
	filter: url(#blur);
}
.svgfilter.blur {
	filter: url(#blur);
}
.svgfilter.invert {
	filter: url(#invert);
}
.svgfilter.sepia {
	filter: url(#sepia);
}
.svgfilter.hue-rotate {
  	filter: url(#hue-rotate);
}
.svgfilter.opacity {
	filter: url(#opacity);
}