/* Based on code by Hoàng Hà: https://codepen.io/hoanghals */

img.gif {
	visibility: hidden;
}

.jsgif {
	position: relative;
	margin: 0.4em 1em;
}

.gifcontrol {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	cursor: pointer;
	transition: background 0.25s ease-in-out;
	z-index: 100;
}

.gifcontrol:after {
	transition: background 0.25s ease-in-out;
	position: absolute;
	content: "";
	display: block;
	left: calc(50% - 25px);
	top: calc(50% - 25px);
}

.gifcontrol.loading {
	background: rgba(255, 255, 255, 0.75);
}

.gifcontrol.loading:after {
	background: rgb(51, 102, 153);
	width: 50px;
	height: 50px;
	border-radius: 50px;
}

.gifcontrol.playing:after {
	opacity: 0;
	transition: opacity 0.25s ease-in-out;
	border-left: 20px solid rgb(51, 102, 153);
	border-right: 20px solid rgb(51, 102, 153);
	width: 50px;
	height: 50px;
	box-sizing: border-box;
}

.gifcontrol.playing:hover:after {
	opacity: 1;
}

.gifcontrol.paused {
	background: rgba(255, 255, 255, 0.5);
}

.gifcontrol.paused:after {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 25px 0 25px 50px;
	border-color: transparent transparent transparent rgb(51, 102, 153);
}