:root {
	--blue-rgb: 161, 221, 255;
	--stroke-knum: 255, 253, 114;
	--gradient-normal: linear-gradient(-90deg, rgba(var(--blue-rgb),0.5), rgba(var(--blue-rgb),0) );
	--gradient-ksystem: linear-gradient(90deg, rgba(var(--blue-rgb),0.5), rgba(var(--blue-rgb),0) );
	--gradient-yellow: linear-gradient(0deg, #f9ff53, #ffffff);
}

#view-knumber {
	background-image:url('../img/knum_bg.jpg');
	background-size: cover; /* or cover */
	background-repeat: no-repeat;
	background-position: center;
}

#view-knumber h3.flyer-quote-header {
	color:var(--color-text-white);
}

#view-knumber span.flyer-quote-subtext {
	color:var(--color-text-white);
}

.knum-polyline-container {
	height:180px;
	position:relative;
	display: flex;
	justify-content: center;
	align-items: center;
	max-width:800px;
	width:100%;
	margin: 20px auto 0px;
}

.polyline-grid {
	display: flex;
	justify-content: center;
	gap: 20px;
	position: absolute;
	z-index:5;
	width: 100%;
	left: 0;
	top:0px;
}

.polyline-grid  figure {
	width:100%;
	max-width:320px;
	margin: 0;
  	padding: 0;
	position:relative;
}

.polyline-grid  svg {
	width: 100%;
	height: 180px;
	display: block;
}

.polyline-grid  figcaption {
	text-align: center;
	font-weight: bold;
	position: absolute;
	top: 0px;
	width:100%;
	max-width: 320px;
	text-transform: uppercase;
	font-size:1em;
	color:var(--color-text-white);
	opacity:0;
	transition:opacity 0.75s ease;
}

.polyline-grid  figcaption.show {
	opacity:1;
}

.polyline-grid  figcaption.ksystem {
	background: var(--gradient-yellow);
	background-clip: text; 
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent; /* for Safari/Chrome */
	font-family:'FuturaEagle',Arial;
	font-weight:normal;
}

.polyline-grid  polyline {
	fill: none; stroke-width: 4;
	stroke-linecap: round;
	/*stroke:#d63b2b;*/
}

#line-normal { stroke: var(--color-white); }
#line-ksystem { stroke: rgb(var(--stroke-knum)); }

.grit-range-box {
	aspect-ratio: 1 / 0.16;
	max-width: 845px;
	max-height:100px;
	width:100%;
	display:flex;
	gap:20px;
	justify-content: center;
}

.grit-range-box.showout {
}

.grit-range-left, .grit-range-right {
	opacity:0;
	width:0;
	transition:width .75s ease-in-out, opacity .75s ease;
}

.grit-range-left {
	background:var(--gradient-normal);
}

.grit-range-right {
	background:var(--gradient-ksystem);
}

.grit-range-box.showout > .grit-range-left, .grit-range-box.showout > .grit-range-right {
	opacity:1.0;
	width:100%;
}

.grit-range-box.showout > .grit-range-left {

}

.grit-range-box.showout > .grit-range-right {
	
}

.abs-item {
	position:absolute;
	z-index:6;
	top: 96px;
	left: 119px;
}

#poly-circle {
	stroke:rgb(var(--stroke-knum));
	stroke-width: 5;
}

.circle_caption{
	opacity:0;
	color: rgb(var(--stroke-knum));
	font-weight:bold;
	text-align:center;
	transition:opacity .7s ease;
}

.circle_caption.show {
	opacity:1;
}

@media only screen and (min-width: 576px) {
	.knum-polyline-container {
		height:200px;
		margin: 38px auto 15px;
	}
	.polyline-grid {
	  top:-20px;
	}
	.polyline-grid  svg {
		height:230px;
	}
	.polyline-grid  polyline {
		
	}

	.polyline-grid  figcaption {
		font-size:1.35em;
	}
}

.spin-circle {
	transform-origin: center;       /* rotate around its own center */
	transform-box: fill-box;        /* make 'center' relative to SVG element */
	animation: spin 7s linear infinite;
 }
 
 @keyframes spin {
	0%   { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
 }