.wordcounter {
	display: block;
	height: 100px;
	width: 100px;
	background-color: #fff;
	background-color: rgba(255,255,255,0.4);

	-webkit-border-radius: 50px;
	-khtml-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
}

.wordcounter .text-wrapper {
	position: absolute;
	text-align: center;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 18px;
}

.wordcounter .word-text,.wordcounter .word-count {
	display:block;
	width:100px;
}

.wordcounter .word-text{
	color:#aaa;
}

.wordcounter .circle {
	position: absolute;
	width: 84px;
	height: 84px;

	-webkit-border-radius: 50px;
	-khtml-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;

	border: 8px solid #fff;
	clip: rect(0px, 50px, 100px, 0px);
}

.wordcounter .circle-container {
	position: absolute;
	width: 100px;
	height: 100px;

	-webkit-border-radius: 50px;
	-khtml-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;

	clip: rect(0px, 100px, 100px, 50px);
}

.wordcounter .circle-left {
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
}