/* basic functionality */

.lazyImage {
	position:relative;
	display:inline-block;
	width:100%;
	height:0;
	overflow:hidden;
	vertical-align:bottom;
}

.lazyImage img {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	opacity:1;
	transform:scale(1);
	transition:background 0.5s, opacity 0.5s, transform 0.5s;
}

.lazyImageError img,
.lazyImageWaiting img {
	opacity:0;
	transform:scale(0);
	transition:none;
}

.lazyImageError:after {
	content:"Imagem não encontrada. Tente novamente!";
	box-sizing:border-box;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	overflow:auto;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:1em;
	background:#FF4;
	color:#F00;
	border:2px solid #F00;
	transform:scale(0);
	transition:transform 0.5s;
}

.lazyImageErrorShow:after {
	transform:scale(1);
}

/* loading animation */

.lazyImage:before {
	content:"";
	position:absolute;
	width:30%;
	height:0;
	padding-top:30%;
	top:50%;
	left:50%;
	opacity:0;
	transform:translate(-50%,-50%);
	transition:transform 0.5s, opacity 0.5s;
	border:1em solid;
	border-color:#0484 #0488;
	border-radius:50%;
}

.lazyImageWaiting:before {
	animation:spin 1s linear infinite;
	opacity:1;
}

@keyframes spin {
	0% {
		transform:translate(-50%,-50%) rotate(0deg) scale(1);
	}
	50% {
		transform:translate(-50%,-50%) rotate(180deg) scale(0.7);
	}
	100% {
		transform:translate(-50%,-50%) rotate(360deg) scale(1);
	}
}