.mcpicture {
	position: relative;
	background: #f7f7f7;
	overflow: hidden;
}
.mcpicture img {
	position: relative;
	border: 0;
	transition: opacity .2s;
	width: 100%;
	display: block;
}
.mcpicture img[type="base"] {
	display: none;
}
d.mcpicture.a img[type="base"] {
	display: block;
}
d.mcpicture.a.b img[type="thumb"] {
	display: none;
}
.mcpicture img:before {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background: #f7f7f7;
	display: block;
	content: "";
}
.mcpicture img[src=""], d.mcpicture img:not([src]) {
	opacity: 0;
}
.mcpicture img[type="thumb"] {
	position: absolute;
	top: 0;
	left: 0;
}
.mcpicture img[src=""] + .loader, .mcpicture img:not([src]) + .loader, .mcpicture.a.b .loader {
	display: none;
}

@keyframes mcpictureloader {
	0% {background-position: 200% 0;}
	100% {background-position: -200% 0;}
}
@-webkit-keyframes mcpictureloader {
	0% {background-position: 200% 0;}
	100% {background-position: -200% 0;}
}
.mcpicture .loader {
	background: linear-gradient(
		90deg, 
		rgb(255 255 255 / 0%) 25%, 
		rgb(255 255 255 / 30%) 50%, 
		rgb(255 255 255 / 0%) 75%
	);
	background-size: 200% 100%;
	animation: mcpictureloader 2s infinite linear;
	-webkit-animation: mcpictureloader 2s infinite linear;
	transform: rotate(160deg) scale(2);
	position: absolute;
	inset: 0;
	margin: auto;
	width: 100%;
	height: 100%;
	opacity: 1;
	transition: opacity .2s;
	pointer-events: none!important;
	will-change: transform, opacity;
}