img[data-lazy-load="true"]{
	opacity: 0.2;
	filter: grayscale(100%);
	transition: opacity 1s, filter 1.5s;

	color: transparent;
}
img[data-lazy-load="true"].loading{
	opacity: 0.7;
	filter: grayscale(50%);
}
img[data-lazy-load="true"].loaded{
	opacity: 1;
	filter: grayscale(0);
}
img[data-lazy-load="true"].error{
	opacity: 1;
}
img[data-lazy-load="true"]:not(.loaded):before { 
	content: " ";
	
	width: 100%;
	height: calc(100% + 10px);
	position: absolute;
	display: block;
	top: -10px;
	left: 0;

	background-color: #e6e6e6;
}
img[data-lazy-load="true"]:not(.loaded):after { 
	content: attr(alt);
	display: block;
	font-size: 1rem;
	font-style: normal;
	color: #000;

	position: absolute;
	top: 30px;
	left: 0;
	width: 100%;
	text-align: center;
	z-index: 20;
}
/**
	IE Edge fix. Imgs must have a minimum height to fire the IntersectionObserver
	https://github.com/verlok/lazyload#dealing-with-microsoft-edge-problems
**/
img[data-src]:not(.loaded),
img[data-srcset]:not(.loaded) {
	display: block;
        height: 1px;
        width: 1px;
}