.chart-wrapper {
  width: 760px;
  height: 500px;
  background-image: radial-gradient(circle, #00b3b3, #004d4d);
  position: relative;
  border-style: ridge;
  border-color: #999900;
  border-width: 7px;
}

@media screen and (min-width: 601px) and (max-width: 992px) {
	.chart-wrapper {
		width: 96%;
		height: 405px;
	}
}

@media screen and (max-width: 600px) {
	.chart-wrapper {
		width: 96%;
		height: 400px;
	}
}

path {
  stroke: #009999;
  /* stroke-width: 5px; */
  cursor: pointer;
  transition: fill 250ms;
}

@media screen and (max-width: 992px) {
	path {
		stroke: #009d9d;
	}
}

path:hover {
  /* stroke-width: 10px; */
  fill: #fff;
}

text {
  font-size: 0.9em;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

@media screen and (max-width: 992px) {
	text {
		font-size: 0.8em;
	}
}

polyline {
  fill: none;
  stroke: #fff;
  stroke-width: 2px;
  stroke-dasharray: 5px;
}

.pie_title {
  position: absolute;
  top: 25px;
  left: 50%;
  transform: translate(-50%);
  font-family: Roboto condensed, sans-serif;
  font-size: 1em;
  color: #ffffcc;
  letter-spacing: 0.5px;
  text-align: center;
}

@media screen and (max-width: 992px) {
	.pie_title {
		font-size: 0.9em;
		letter-spacing: 1px;
	}
}

.info_pie {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translate(-50%);
  font-family: Roboto condensed, sans-serif;
  font-size: 0.9em;
  color: #80ffff;
  letter-spacing: 1px;
}

@media screen and (max-width: 992px) {
	.info_pie {
		bottom: 53px;
		left: 30%;
		transform: 0;
	}
}

.pie_stats {
	position: relative;
	background-color: #008080;
	border-style: ridge;
	border-color: #999900;
	border-width: 7px;
	font-family: Roboto condensed, sans-serif;
	font-size: 0.9em;
	letter-spacing: 1px;
	padding: 2px 0 2px 0;
	top: -35px;
	margin-bottom: -30px;
	height: auto;
	width: 80%;
	left: 50%;
	transform: translate(-50%);
	box-shadow: 3px 3px 6px #4d4d00;
}

@media screen and (min-width: 993px) {
	.pie_stats {
		width: 35%;
	}
}

@media screen and (min-width: 601px) and (max-width: 992px) {
	.pie_stats_slide {
		animation-duration: 2s;
	}
}

@media screen and (max-width: 600px) {
	.pie_stats_slide {
		animation-duration: 3s;
	}
}

.pie_stats_c {
	color: white;
}

.pie_stats_l {
  text-align: right;
  width: 45%;
  position: relative;
}

.pie_stats_r1 {
	border-radius: 6px 0 0 6px;
	color: white;
	text-align: right;
	width: 12%;
	position: relative;
  }

.pie_stats_r2 {
	border-radius: 0 6px 6px 0;
	color: white;
	text-align: left;
	width: 22%;
	padding-left: 10px;
	position: relative;
  }

@media screen and (min-width: 601px) and (max-width: 992px) {
	.pie_stats_r2 {
		width: 18%;
	}
}

@media screen and (min-width: 993px) {
	.pie_stats_r2 {
		width: 17%;
	}
}

.pie_sp {
	display: block;
	margin: 3px 0;
}

.total {
  position: absolute;
  left: 50%;
  top: 47%;
  transform: translate(-50%);
  font-family: Roboto, sans-serif;
  font-size: 1.1em;
  text-align: center;
  color: #fff;
  letter-spacing: 1px;
}
@media screen and (max-width: 992px) {
	.total {
		font-size: 0.9em;
		top: 44%;
	}
}

.replay {
  position: absolute;
  bottom: 20px;
  right: 20px;
  text-transform: uppercase;
  cursor: pointer;
  padding: 5px 10px;
  outline: none;
  font-size: 0.6em;
  background-color: transparent;
  color: #fff;
  border: 1px solid #fff;
  letter-spacing: 1px;
  transition: all 250ms;
}
@media screen and (max-width: 992px) {
	.replay {
		bottom: 50px;
	}
}
.replay:hover {
  background-color: #fff;
  color: #0d0d0d;
  box-shadow: 0 0 2px #fff;
}
.replay:active {
  opacity: 0.5;
}