// piechart size
$piechart-size: 400px;

#piechart {
	height: $piechart-size;
	width: $piechart-size;
	position: relative;
	margin: 75px 0 0 150px;

	&:before {
		content: "";
		display: block;
		height: 465px;
		width: 488px;
		background: image-url('piechart_labels.png') no-repeat center center;
		position: absolute;
		left: -35px;
		top: -22px;
	}

	&:after {
		content: "";
		height: 238px;
		width: 238px;
		display: block;
		background: image-url('sprite_retina.png') no-repeat -680px -141px;
		background-size: $retina_width $retina_height;
		position: absolute;
		left: 330px;
		top: -58px;
		z-index: 20;

		@include animation-fill-mode(both);
		@include animation-timing-function(linear);
		@include animation-iteration-count(infinite);
		@include animation-duration(8s);
		@include animation-name(rotate_clockwise);
	}

	.piechart-background {
		background-color: $bright-background-color;
		position: absolute;
		width: $piechart-size;
		height: $piechart-size;
		@include border-radius(50%);
	}

	.hold {
		position: absolute;
		width: $piechart-size;
		height: $piechart-size;
		@include border-radius(50%);
		clip: rect(0px, $piechart-size, $piechart-size, $piechart-size / 2);

		.pie {
			position: absolute;
			width: $piechart-size;
			height: $piechart-size;
			@include border-radius(50%);
			clip: rect(0px, $piechart-size / 2, $piechart-size, 0px);
			cursor: pointer;
			overflow: hidden;

			.slice-background {
				content: "";
				display: block;
				position: absolute;
				left: 0px;
				right: 0px;
				top: 0px;
				bottom: 0px;
				background-repeat: no-repeat;
				background-position: left center;
				opacity: 0;
				transition: opacity 0.3s;
				background-color: #971129;
  				background-blend-mode: luminosity;
			}

			&:hover .slice-background {
				opacity: 1;
			}
		}

		&.piechart-slice1 {
			width: $piechart-size * 1.2;
			height: $piechart-size * 1.2;
			left: 0 - (($piechart-size * 1.1) - $piechart-size);
			top: 0 - (($piechart-size * 1.1) - $piechart-size);
			clip: rect(0px, $piechart-size * 1.2, $piechart-size * 1.2, ($piechart-size * 1.2) / 2);
			z-index: 1;

			.pie {
				width: $piechart-size * 1.2;
				height: $piechart-size * 1.2;
				clip: rect(0px, ($piechart-size * 1.2) / 2, $piechart-size * 1.2, 0px);
				background-color: $default-background-color;

				.slice-background {
					opacity: 1;
					background-blend-mode: normal;
					background-position: right center;
					background-color: #fff;
					
					@include animation-duration(0.5s);
					@include animation-fill-mode(both);
					@include animation-timing-function(ease-in-out);
					@include animation-iteration-count(1);
					@include animation-name(fade_in);
				}
			}
		}

		&.piechart-slice2 {
			z-index: 2;

			.pie {
				background-color: #ff3a5e;

				.slice-background {
					background-position: right center;
				}

				&:after {
					content: "";
					display: block;
					height: 228px;
					width: 8px;
					background: image-url('piechart_shadow_flipped.png') no-repeat center center;
					position: absolute;
					left: 138px;
					top: -20px;
					z-index: 20;
					transform: rotate(-30deg);
					-webkit-transform: rotate(-30deg);
				}
			}
		}

		&.piechart-slice3 {
			z-index: 3;

			.pie {
				background-color: #f62b50;
			}
		}

		&.piechart-slice4 {
			z-index: 4;

			.pie {
				background-color: #e32144;
			}
		}

		&.piechart-slice5 {
			z-index: 5;

			.pie {
				background-color: #cd1a3a;
			}
		}

		&.piechart-slice6 {
			z-index: 6;

			.pie {
				background-color: #ab1732;
			}
		}

		&.piechart-slice7 {
			z-index: 7;

			.pie {
				background-color: #a31430;
			}
		}

		&.piechart-slice8 {
			z-index: 8;

			.pie {
				background-color: #901129;
			}

			&:after {
				content: "";
				display: block;
				height: 228px;
				width: 8px;
				background: image-url('piechart_shadow.png') no-repeat center center;
				position: absolute;
				left: 253px;
				top: -20px;
				z-index: 20;
				transform: rotate(30deg);
				-webkit-transform: rotate(30deg);
			}
		}
	}

	#piechart-inner {
		background-color: #fff;
		height: $piechart-size / 3.5;
		width: $piechart-size / 3.5;
		@include border-radius(50%);
		position: absolute;
		left: 50%;
		top: 50%;
		margin: (-$piechart-size / 7) 0 0 (-$piechart-size / 7);
		z-index: 99;
	}

	.piechart-label {
		position: absolute;
		text-align: right;
		white-space: nowrap;
		color: $dark-text-color;
		font-family: "frescobold";

		&.piechart-label1 {
			display: none;
		}
		&.piechart-label2 {
			right: 120px;
			top: 451px;
		}
		&.piechart-label3 {
			right: 320px;
			top: 426px;
		}
		&.piechart-label4 {
			right: 397px;
			top: 346px;
		}
		&.piechart-label5 {
			right: 447px;
			top: 241px;
		}
		&.piechart-label6 {
			right: 445px;
			top: 121px;
		}
		&.piechart-label7 {
			right: 398px;
			top: 30px;
		}
		&.piechart-label8 {
			right: 310px;
			top: -29px;
		}
	}
}