
.pieContainer {
  height: 300px;
  margin-left: 30px;
  position: relative;
}

.pieBackground {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 150px;
  box-shadow: 0px 0px 8px rgba(0,0,0,0.5);
} 

.pie {
  transition: all 1s;
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 150px;
  clip: rect(0px, 150px, 300px, 0px);
}

.hold {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 150px;
  clip: rect(0px, 300px, 300px, 150px);
}

#pieSlice1 .pie {
  background-color: #A40F36;
  transform:rotate(144deg);
}

#pieSlice2 {
  transform: rotate(144deg);
}

#pieSlice2 .pie {
  background-color: #D53129;
  transform: rotate(108deg);
}

#pieSlice3 {
  transform: rotate(252deg);
}

#pieSlice3 .pie {
  background-color: #50D050;
  transform: rotate(108deg);
}



.innerCircle {
	position: absolute;
	width: 200px;
	height: 200px;
	background: url(../images/Logo_VH_einzeln.png) no-repeat center center;
	background-size: 80px ;
	background-color: #FFF;
	border-radius: 100px;
	
	top: 50px;
	left: 50px; 
	box-shadow: 0 1px 4px rgba(0,0,0,.2);
	box-shadow: 0px 0px 8px rgba(0,0,0,0.5) inset;
  
}
.innerCircle .content {
  position: absolute;
  display: block;
  width: 240px;
	top: 135px;
	left: -16px;
	text-align: center;
	font-size: 14px;
}




/*###################################################################################*/
.chart {
	border-radius: 50%;
	width: 50%;
	padding-top: 1em;
	padding-bottom: 1em;
	float: left;
	padding-right: 20px;
}

b {
	font-weight: 400;
}
.key {
	width: 50%;
	float: right;
	list-style: none;
	display: table;
	border-collapse: separate;
}
.key > li {
	display: table-row;
}
.key > li > * {
	display: table-cell;
	border-bottom: 12px solid #fff;

}
.percent {
	color: #fff;
	padding: 10px 6px;
	text-shadow: 0 0 5px #FFF;
	text-align: center;
	font-weight: 600;
	font-size: 1.5em;
}
.choice {
	padding-left: 10px;
}
.red {
	background: #A40F36;
}
.orange {
	background: #D53129;
}
.green {
	background: #50D050;
}


@media screen and (max-width : 1000px) {
.chart {
	border-radius: 50%;
	width: 100%;
	padding-top: 1em;
	padding-bottom: 1em;
	float: left;
	padding-right: 20px;
}
.key {
	width: 100%;
	float: right;
	list-style: none;
	display: table;
	border-collapse: separate;
}
}