.meter *, .meter *:after, .meter *:before {
	box-sizing: border-box;
}

body {
	text-align: center;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

section.meter {
	display: inline-block;
	width: 240px;
	margin: 50px 0;
	text-align: center;
	min-width: 240px;
	position: relative;
	float: left;
}

.graph {
	width: 200px;
	height: 100px;
	position: relative;
	margin: auto;
	border-radius: 100px 100px 0 0;
	overflow: hidden;
	color: #0ff;
	transform-origin: 50% 100%;
	z-index: 200;
}
.graph .bar {
	content: '';
	width: 200px;
	height: 100px;
	border: 40px solid #26EC33;
	border-top: none;
	position: absolute;
	-webkit-transition: 0.3s;
	transition: 0.3s;
	-webkit-transform-origin: 50% 0%;
	transform-origin: 50% 0%;
	border-radius: 0 0 200px 200px;
	animation: ease 2s;
	left: 0;
	top: 100%;
	z-index: 200;
	transform: rotate(180deg);
}

.graph:after {
	z-index: 3;
	border-color: rgba(0, 0, 0, 0.15);
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
}

.multi-graph {
	width: 200px;
	height: 100px;
	position: relative;
	margin: auto;
}
.multi-graph:before, .multi-graph:after {
	content: '';
	width: 200px;
	height: 100px;
	border: 40px solid #d0d0d0;
	border-bottom: none;
	position: absolute;
	-webkit-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
	border-radius: 200px 200px 0 0;
	left: 0;
	top: 0;
	z-index: 100;
}

.multi-graph:before {
	transform: rotate(-30deg);
}

.multi-graph:after {
	transform: rotate(30deg);
}

.multi-graph .graph, .multi-graph .pointer {
	position: absolute;
	top: 0;
	left: 0;
}

.meter .graph {
	color: #EC4A26;
	transform: rotate(-30deg);
}

.meter .pointer
{
	top: 90px;
	left: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 8px 100px 8px 2px;
	border-color: transparent #000 transparent transparent;
	z-index: 300;
	transform-origin: 100px 8px;
	transform: rotate(-30deg);
	transition: 2s all ease;

}

.meter .pointer:before {
	content: ' ';
	border-radius: 16px;
	border: 10px solid #000;
	display: block;
	position: absolute;
	left: 88px;
	top: -10px;
	z-index: 300;
}

.meter:hover .note {
	opacity: 1.0;
	margin-top: 15px;
}

.note {
	position: absolute;
	top: -60px;
	left: 50%;
	width: 200px;
	margin-left: -100px;
	z-index: 300;
	padding: 4px;

	border: 1px solid #bbb;
	background: #eee;
	border-radius: 6px;

	text-align: center;

	opacity: 0;
	margin-top: 0px;
	transition: .4s;
}

.note:after, .note:before {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.note:after {
	border-color: rgba(238, 238, 238, 0);
	border-top-color: #eee;
	border-width: 8px;
	margin-left: -8px;
}
.note:before {
	border-color: rgba(187, 187, 187, 0);
	border-top-color: #bbb;
	border-width: 9px;
	margin-left: -9px;
}

.note .text {
	color: #000;
	text-align: center;
}

.meter .description {
	padding-top: 50px;
	width: 100%;
	text-align: center;
	display: flex;
	flex-direction: column;

}

.meter .description .header {
	width: 200px;
	font-weight: 600;
	font-size: 150%;
	margin: auto;
}