html, body {
	margin: 0 auto;
	padding: 0 auto;
	font-family: "Times New Roman", Verdana;
	color: #817a53;
	background: #d8d6cb;
}

p { margin: 0; padding: 4px; }

div {	margin: 0; padding: 0;}

#wrapper {
	position:absolute;
	top: 50%;
	left: 50%;
	width:740px;
	height:680px;
	margin: -340px 0 0 -370px;
	padding: 0;
}

#pie_chart  {
	position: relative;
	float: left;
	width: 300px; /* EDIT */
	height: 300px; /* EDIT */
	margin: 0;
	padding: 0;
	z-index: 3;
}


/* CUSTOM CSS */

.round_bef {
	position: absolute;
	left: -5px;/* EDIT */
	top: -5px;/* EDIT */
	width: 310px;/* EDIT */
	height: 310px; /* EDIT */
	background: #fff;
	border-radius: 50%;
	background: #cadcb1; /* Old browsers */
	background: -moz-linear-gradient(-45deg, #cadcb1 0%, #ffffff 28%, #fcfcfc 57%, #c6c8ca 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, #cadcb1 0%,#ffffff 28%,#fcfcfc 57%,#c6c8ca 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, #cadcb1 0%,#ffffff 28%,#fcfcfc 57%,#c6c8ca 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cadcb1', endColorstr='#c6c8ca',GradientType=1 );
	z-index: 1;
}

.round {
	position: absolute;
	left: 10px; /* EDIT */
	top: 10px; /* EDIT */
	width: 280px; /* EDIT */
	height: 280px; /* EDIT */
	background: #fff;
	border-radius: 50%;
	background: #cadcb1; /* Old browsers */
	background: -moz-linear-gradient(-45deg, #cadcb1 0%, #ffffff 28%, #fcfcfc 57%, #c6c8ca 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, #cadcb1 0%,#ffffff 28%,#fcfcfc 57%,#c6c8ca 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, #cadcb1 0%,#ffffff 28%,#fcfcfc 57%,#c6c8ca 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cadcb1', endColorstr='#c6c8ca',GradientType=1 );
	z-index: 2;
}
#pie_chart .pie_wrap {
	position: absolute;
	top: 0;
	left: 0;
	height: 300px; /* EDIT */
	width: 300px; /* EDIT */
	border-radius: 50%;
	clip: rect(0px, 300px, 300px, 150px); /* EDIT */
}
#pie_chart .pie_wrap .pie {
	position: absolute;
	top: 0;
	left: 0;
	width: 300px; /* EDIT */
	height: 300px; /* EDIT */
	border-radius: 50%;
	-webkit-transform: rotate(30deg);
	-ms-transform: rotate(30deg);
	clip: rect(0px, 150px, 150px, 0px); /* EDIT */
}
#pie_chart .pie_wrap.pie1 {
	-webkit-transform: rotate(-15deg);
	-ms-transform: rotate(-15deg);
}
#pie_chart .pie_wrap.pie2 {
	-webkit-transform: rotate(15deg);
	-ms-transform: rotate(15deg);
}
#pie_chart .pie_wrap.pie3 {
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
}
#pie_chart .pie_wrap.pie4 {
	-webkit-transform: rotate(75deg);
	-ms-transform: rotate(75deg);
}
#pie_chart .pie_wrap.pie5 {
	-webkit-transform: rotate(105deg);
	-ms-transform: rotate(105deg);
}
#pie_chart .pie_wrap.pie6 {
	-webkit-transform: rotate(135deg);
	-ms-transform: rotate(135deg);
}
#pie_chart .pie_wrap.pie7 {
	-webkit-transform: rotate(165deg);
	-ms-transform: rotate(165deg);
}
#pie_chart .pie_wrap.pie8 {
	-webkit-transform: rotate(195deg);
	-ms-transform: rotate(195deg);
}
#pie_chart .pie_wrap.pie9 {
	-webkit-transform: rotate(225deg);
	-ms-transform: rotate(225deg);
}
#pie_chart .pie_wrap.pie10 {
	-webkit-transform: rotate(255deg);
	-ms-transform: rotate(255deg);
}
#pie_chart .pie_wrap.pie11 {
	-webkit-transform: rotate(285deg);
	-ms-transform: rotate(285deg);
}
#pie_chart .pie_wrap.pie12 {
	-webkit-transform: rotate(315deg);
	-ms-transform: rotate(315deg);
}
.round .grad1 { background: #d5ecbd; /* Old browsers */
	 background: -moz-linear-gradient(top, #d5ecbd 0%, #c5d1bb 22%, #d6dada 52%, #e5e7e7 74%, #dee1e1 100%); /* FF3.6-15 */
	 background: -webkit-linear-gradient(top, #d5ecbd 0%,#c5d1bb 22%,#d6dada 52%,#e5e7e7 74%,#dee1e1 100%); /* Chrome10-25,Safari5.1-6 */
	 background: linear-gradient(to bottom, #d5ecbd 0%,#c5d1bb 22%,#d6dada 52%,#e5e7e7 74%,#dee1e1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d5ecbd', endColorstr='#dee1e1',GradientType=0 );
	 position: absolute;
	 top: 0px;
	 right: -3px;
	 width: 6px;
	 height: 150px;
 }
.round .grad2 {background: #dee1e1; /* Old browsers */
	background: -moz-linear-gradient(left, #dee1e1 0%, #e6e7e7 22%, #f1f1f2 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #dee1e1 0%,#e6e7e7 22%,#f1f1f2 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #dee1e1 0%,#e6e7e7 22%,#f1f1f2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1d4d5', endColorstr='#f1f1f2',GradientType=1 );
	position: absolute;
	margin-top: 4px;
	top: 100%;
	left: -3px;
	height: 6px;
	width: 143px;


}
.round .grad3 {
	background: #edf6df; /* Old browsers */
	background: -moz-linear-gradient(left, #edf6df 0%, #ccdab9 19%, #a8aca9 39%, #bfc3c4 75%, #dee1e1 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #edf6df 0%,#ccdab9 19%,#a8aca9 39%,#bfc3c4 75%,#dee1e1 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #edf6df 0%,#ccdab9 19%,#a8aca9 39%,#bfc3c4 75%,#dee1e1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#edf6df', endColorstr='#dee1e1',GradientType=1 );
	position: absolute;
	margin-top: 4px;
	top: 0;
	left: 0px;
	height: 6px;
	width: 140px;
}
.round .grad4 {
	background: #dee1e1; /* Old browsers */
	background: -moz-linear-gradient(top, #dee1e1 0%, #dde0e0 22%, #a6abad 55%, #d3d7d7 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #dee1e1 0%,#dde0e0 22%,#a6abad 55%,#d3d7d7 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #dee1e1 0%,#dde0e0 22%,#a6abad 55%,#d3d7d7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dee1e1', endColorstr='#d3d7d7',GradientType=0 );
	position: absolute;
	top: 0%;
	left: -3px;
	width: 6px;
	height: 140px;
}
.round .sec {
	width: 140px;/* EDIT */
	height: 140px;/* EDIT */
	float: left; color: #b3b4ca; text-transform: uppercase; text-align: right; padding: 80px 20px 0 0; box-sizing: border-box; font-size: 14px; font-family: Verdana;
position: relative;
	display: block;
	text-decoration: none;
}
.round .sec:hover {text-decoration: underline;}
/*.round .sec.first {  color: #b4dbbc;}*/
.round .sec.left { text-align: left; padding-left: 15px;}
.round .sec.bottom {  padding-top: 20px;}
.round .sec.sec5 { width: 33.3333333%; padding: 30px 0 0 0; font-size: 13px; text-align: center; line-height: 50px;}
.round .sec .grad_sect { width: 3px; height: 85px;
	position: absolute; right: 0; top: 20%;
	background: #d5ecbd; /* Old browsers */
	background: -moz-linear-gradient(top, #d5ecbd 0%, #c5d1bb 22%, #d6dada 52%, #e5e7e7 74%, #dee1e1 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #d5ecbd 0%,#c5d1bb 22%,#d6dada 52%,#e5e7e7 74%,#dee1e1 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #d5ecbd 0%,#c5d1bb 22%,#d6dada 52%,#e5e7e7 74%,#dee1e1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d5ecbd', endColorstr='#dee1e1',GradientType=0 );
}

@media  (max-width: 720px) {

	#pie_chart {
		width: 250px;
		height: 250px;
	}

	.round_bef {
		left: -5px;
		top: -5px;
		width: 260px;
		height: 260px;
	}
	.round {
		position: absolute;
		left: 5px;
		top: 5px;
		width: 240px;
		height: 240px;
	}

	#pie_chart .pie_wrap {
		position: absolute;
		height: 250px;
		width: 250px;
		clip: rect(0px, 250px, 250px, 125px);
	}
	#pie_chart .pie_wrap .pie {
		width: 250px;
		height: 250px;
		clip: rect(0px, 125px, 125px, 0px);
	}

	.round .grad1 {
		top: 0px;
		right: -3px;
		width: 6px;
		height: 125px;
	}
	.round .grad2 {
		margin-top: 4px;
		top: 100%;
		left: -3px;
		height: 6px;
		width: 120px;
	}
	.round .grad3 {
		margin-top: 4px;
		top: 0;
		left: 0px;
		height: 6px;
		width: 120px;
	}
	.round .grad4 {
		top: 0%;
		left: -3px;
		width: 6px;
		height: 120px;
	}
	.round .sec {
		width: 116px;
		height: 117px;
		 font-size: 12px;
		padding: 55px 20px 0 0;
	}
	.round .sec.sec5 { width: 33.3333333%; padding: 30px 0 0 0; font-size: 13px; text-align: center; line-height: 50px;}
	.round .sec .grad_sect {
		width: 3px; height: 85px;
		right: 0; top: 20%;  );
	}
}