@charset "UTF-8";
/* CSS Document */

img.gif {
	visibility: hidden;
} 

.jsgif {
	position: relative;
}

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

	&.loading {
		background: rgba(255, 255, 255, 0.75);
		&:after {
			background: #FF9900;
			width: 50px;
			height: 50px;		
			border-radius: 50px;
		}
	}

	&.playing {
		/* Only show the 'stop' button on hover */
		&:after {
			opacity: 0;
			transition: opacity 0.25s ease-in-out;
			border-left: 20px solid #FF9900;
			border-right: 20px solid #FF9900;
			width: 50px;
			height: 50px;
      box-sizing: border-box;
		}
		&:hover:after {
			opacity: 1;
		}
	}

	&.paused {
		background: rgba(255, 255, 255, 0.5);
		&:after {
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 25px 0 25px 50px;
			border-color: transparent transparent transparent #ff9900;
		}
	}

	transition: background 0.25s ease-in-out;
	z-index: 100;

}