.category-diagram { max-width: 760px; margin: 30px auto; }
.category-diagram svg { width: 100%; height: auto; display: block; }
.category-diagram__spoke { stroke: #bbb; stroke-width: 2; }
.category-diagram__hub { fill: #252525; }
.category-diagram__hub-text { fill: #fff; font-size: 16px; font-weight: 600; letter-spacing: 1px; }
.category-diagram__node { cursor: pointer; outline: none; }
.category-diagram__node ellipse { fill: #fff; stroke: #252525; stroke-width: 2; transition: fill .2s, stroke .2s; }
.category-diagram__node text { fill: #252525; font-size: 15px; font-weight: 600; text-transform: uppercase; transition: fill .2s; }
.category-diagram__node:hover ellipse,
.category-diagram__node:focus ellipse,
.category-diagram__node.is-active ellipse { fill: #b3261e; stroke: #b3261e; }
.category-diagram__node:hover text,
.category-diagram__node:focus text,
.category-diagram__node.is-active text { fill: #fff; }
.category-diagram-slider { position: relative; margin: 30px 0 60px; scroll-margin-top: 120px; transition: opacity .3s ease; }
.category-diagram-slider.is-loading { min-height: 220px; pointer-events: none; }
.category-diagram-slider.is-loading > * { opacity: .35; transition: opacity .3s ease; }
.category-diagram-slider.is-loading::after {
	content: "";
	position: absolute;
	top: 110px;
	left: 50%;
	z-index: 10;
	width: 48px;
	height: 48px;
	margin: -24px 0 0 -24px;
	border: 4px solid rgba(37, 37, 37, .15);
	border-top-color: #b3261e;
	border-radius: 50%;
	animation: category-diagram-spin .8s linear infinite;
}
@keyframes category-diagram-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	.category-diagram-slider.is-loading::after { animation-duration: 2.4s; }
}
.category-diagram-slider__hint { text-align: center; color: #777; }
@media (max-width: 600px) {
	.category-diagram__node text { font-size: 17px; }
}

.diagram-container .connector-line { stroke: #adb5bd; stroke-width: 1.5; stroke-dasharray: 3 3; fill: none; }
.diagram-container .theme-label { font-size: 13px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
