#timeleft {
    position: absolute; 
    top: 20px; 
    left: 24px; 
    height: 36px; 
    width: 36px; 
    border-radius: 50%; 
    opacity: 0.5;
}

.hold {
	position: absolute;
	width: 100%;
	height: 100%;
	clip: rect(0px, 36px, 36px, 18px);
	border-radius: 100%;
	background-color: transparent;
}

.fill {
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 100%;
	clip: rect(0px, 18px, 36px, 0px);
}

.left .fill {
	background-color: #ffff00;
	z-index: 1;
	-webkit-animation: left 30s linear;
	-moz-animation: left 30s linear;
	animation: left 30s linear both;
}

@keyframes left {
	0% {
		-webkit-transform: rotate(0deg);
	}
	100% {
		transform: rotate(180deg);
	}
}

@-webkit-keyframes left {
	0% {
		-webkit-transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(180deg);
	}
}

.right {
	z-index: 3;
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	transform: rotate(180deg);
}

.right .fill {
	background-color: #ffff00;
	z-index: 3;
	-webkit-animation: right 30s linear;
	-moz-animation: right 30s linear;
	animation: right 30s linear both;
	-webkit-animation-delay: 30s;
	-moz-animation-delay: 30s;
	animation-delay: 30s;
}

@keyframes right {
	0% {
		-webkit-transform: rotate(0deg);
	}
	100% {
		transform: rotate(180deg);
	}
}

@-webkit-keyframes right {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(180deg);
	}
}