#sustainability-framework {

	svg {
		.cls-1 {
			fill: #3b5875;
		}
	
		.cls-1, .cls-2, .cls-3, .cls-4, .cls-5, .cls-6, .cls-7, .cls-8, .cls-9, .cls-10, .cls-11, .cls-12, .cls-13, .cls-14, .cls-15, .cls-16, .cls-17, .cls-18 {
			stroke-width: 0px;
		}
	
		.cls-2 {
			fill: #c48d0c;
		}
	
		.cls-3 {
			fill: #3d7c3b;
		}
	
		.cls-4 {
			fill: #03436a;
		}
	
		.cls-5 {
			fill: #003764;
		}
	
		.cls-6 {
			fill: #174267;
		}
	
		.cls-7 {
			fill: #cddfe6;
		}
	
		.cls-8 {
			fill: red;
			opacity: 0;
		}
	
		.cls-9 {
			fill: #000;
		}
	
		.cls-10 {
			fill: #489a32;
		}
	
		.cls-11 {
			fill: #b8d2dd;
		}
	
		.cls-12 {
			fill: #00619b;
		}
	
		.cls-13 {
			fill: #e62f1a;
		}
	
		.cls-14 {
			fill: #a2c6d4;
		}
	
		.cls-15 {
			fill: #eb5f1b;
		}
	
		.cls-16 {
			fill: #fff;
		}
	
		.cls-17 {
			fill: #a51439;
		}
	
		.cls-18 {
			fill: #778596;
		}
	}


	svg {
		width: 70rem;
		max-width: 100%;
		margin: 0 auto;
		height: auto;
		padding: 4rem;
		overflow: visible;
		display: block;
	}
	svg [id^=seg-] {
		transition: all 0.3s ease;
		transform-origin: 500px 500px;
		cursor: pointer;
	}
	svg [id*=-overlay] {
		fill: #ff000000;
	}
	svg[data-active-index="1"] [id^=seg-1] {
		transform: scale(1.1);
	}
	svg[data-active-index]:not([data-active-index="1"]) [id^=seg-1] {
		opacity: 0.5;
	}
	svg[data-active-index="2"] [id^=seg-2] {
		transform: scale(1.1);
	}
	svg[data-active-index]:not([data-active-index="2"]) [id^=seg-2] {
		opacity: 0.5;
	}
	svg[data-active-index="3"] [id^=seg-3] {
		transform: scale(1.1);
	}
	svg[data-active-index]:not([data-active-index="3"]) [id^=seg-3] {
		opacity: 0.5;
	}

}

.angledTag {
	--padding: 1rem;
	--chamfer: 1rem;
	padding: var(--padding);
	padding-right: calc(var(--chamfer) + var(--padding));
	margin-top: 4rem;
	margin-bottom: 3rem;
	font-weight: bold;
	display: inline-block;
	color: white;
	clip-path: polygon(0 0, 100% 0%, calc(100% - var(--chamfer)) 100%, 0% 100%);
}