/*! Gray v1.6.0 (https://github.com/karlhorky/gray) | MIT */
.grayscale{
/* 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;
}

div.grayscale{
/*width:100% !important;
height:100% !important;*/
background-position:50% 0 !important;
display:inline-bloc !important;
background-size:100% auto !important;
}

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

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

.grayscale.grayscale-off, .grayscale.grayscale-fade:hover{
-webkit-filter:none;
filter:none;
}

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

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

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