.dd-g-graph{
	padding:6.7rem 0;
}
.dd-g-graph .content-text{
	max-width:95.5rem;
	margin:0 auto;
	padding-top:6rem;
}
.dd-g-graph .skew{
	transform:rotate(-2deg);
	margin-bottom: 5rem;
}
.dd-g-graph .skew-reverse{
	transform:rotate(-2deg);
	margin-bottom:5rem;
}
.dd-g-graph .indexed{
	z-index:1;
}
.dd-g-graph .container-full{
	position:relative;
	margin-right:2.4rem;
}
.dd-g-graph .section-title{
	width:100%;
	margin:0 3.5rem;
	display:flex;
	justify-content:center;
	margin-bottom:7rem;
}
.dd-g-graph .section-title h3{
	margin:0;
	text-align:center;
}
.dd-g-graph .left{
	width:calc(60% - 7rem - 0.001rem);
}
.dd-g-graph .right{
	width:calc(40% - 7rem - 0.001rem);
}
.dd-g-graph .left,
.dd-g-graph .right{
	margin:0 3.5rem;
}
.dd-g-graph .row-spaced{
	/* 	margin:0 -3.5rem; */
	overflow:hidden;
	justify-content: center;
}
.dd-g-graph .underlay{
	width: 100%;
	overflow: hidden;
	position: absolute;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	flex-direction: column;
	height: 100%;
	padding: 6rem 0;
	box-sizing: border-box;
}
/* .dd-g-graph {
transform: translate(42px, 18px);
} */
@property --iHue1 {
	syntax: '<integer>';
	inherits: false;
	initial-value: 360;
}
@property --iHue2 {
	syntax: '<integer>';
	inherits: false;
	initial-value: 360;
}
@property --iHue3 {
	syntax: '<integer>';
	inherits: false;
	initial-value: 360;
}
@property --iHue4 {
	syntax: '<integer>';
	inherits: false;
	initial-value: 360;
}
@property --iHue5 {
	syntax: '<integer>';
	inherits: false;
	initial-value: 360;
}
@property --iHue6 {
	syntax: '<integer>';
	inherits: false;
	initial-value: 360;
}
@property --iHue7 {
	syntax: '<integer>';
	inherits: false;
	initial-value: 360;
}
@keyframes hues2 {
	0% {
		/*   red   */
		--iHue1: calc(var(--iHue4) + 15);
		--iHue2: calc(var(--iHue4) + 10);
		--iHue3: calc(var(--iHue4) + 5);
		--iHue4: 0;
		--iHue5: calc(var(--iHue4) - 5);
		--iHue6: calc(var(--iHue4) - 10);
		--iHue7: calc(var(--iHue4) - 15);
	}
	12.5% {
		/*   orange   */
		--iHue1: calc(var(--iHue4) + 15);
		--iHue2: calc(var(--iHue4) + 10);
		--iHue3: calc(var(--iHue4) + 5);
		--iHue4: calc(30);
		--iHue5: calc(var(--iHue4) - 5);
		--iHue6: calc(var(--iHue4) - 10);
		--iHue7: calc(var(--iHue4) - 15);
	}
	25% {
		/*   yellow   */
		--iHue1: calc(var(--iHue4) + 15);
		--iHue2: calc(var(--iHue4) + 10);
		--iHue3: calc(var(--iHue4) + 5);
		--iHue4: calc(60);
		--iHue5: calc(var(--iHue4) - 5);
		--iHue6: calc(var(--iHue4) - 10);
		--iHue7: calc(var(--iHue4) - 15);
	}
	37.5% {
		/*   green   */
		--iHue1: calc(var(--iHue4) + 36);
		--iHue2: calc(var(--iHue4) + 24);
		--iHue3: calc(var(--iHue4) + 12);
		--iHue4: calc(105);
		--iHue5: calc(var(--iHue4) - 12);
		--iHue6: calc(var(--iHue4) - 24);
		--iHue7: calc(var(--iHue4) - 36);
	}
	50% {
		/*   cyan   */
		--iHue1: calc(var(--iHue4) + 15);
		--iHue2: calc(var(--iHue4) + 10);
		--iHue3: calc(var(--iHue4) + 5);
		--iHue4: calc(180);
		--iHue5: calc(var(--iHue4) - 5);
		--iHue6: calc(var(--iHue4) - 10);
		--iHue7: calc(var(--iHue4) - 15);
	}
	62.5% {
		/*   blue   */
		--iHue1: calc(var(--iHue4) + 15);
		--iHue2: calc(var(--iHue4) + 10);
		--iHue3: calc(var(--iHue4) + 5);
		--iHue4: calc(230);
		--iHue5: calc(var(--iHue4) - 5);
		--iHue6: calc(var(--iHue4) - 10);
		--iHue7: calc(var(--iHue4) - 15);
	}
	75% {
		/*   violet   */
		--iHue1: calc(var(--iHue4) + 15);
		--iHue2: calc(var(--iHue4) + 10);
		--iHue3: calc(var(--iHue4) + 5);
		--iHue4: calc(270);
		--iHue5: calc(var(--iHue4) - 5);
		--iHue6: calc(var(--iHue4) - 10);
		--iHue7: calc(var(--iHue4) - 15);
	}
	87.5% {
		/*   magenta   */
		--iHue1: calc(var(--iHue4) + 15);
		--iHue2: calc(var(--iHue4) + 10);
		--iHue3: calc(var(--iHue4) + 5);
		--iHue4: calc(315);
		--iHue5: calc(var(--iHue4) - 5);
		--iHue6: calc(var(--iHue4) - 10);
		--iHue7: calc(var(--iHue4) - 15);
	}
	100% {
		/*   red   */
		--iHue1: calc(var(--iHue4) + 15);
		--iHue2: calc(var(--iHue4) + 10);
		--iHue3: calc(var(--iHue4) + 5);
		--iHue4: calc(360);
		--iHue5: calc(var(--iHue4) - 5);
		--iHue6: calc(var(--iHue4) - 10);
		--iHue7: calc(var(--iHue4) - 15);
	}
}
@property --iLi1 {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 25%;
}
@property --iLi2 {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 37%;
}
@property --iLi3 {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 50%;
}
@property --iLi4 {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 60%;
}
@property --iLi5 {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 50%;
}
@property --iLi6 {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 37%;
}
@keyframes lightness {
	0% {
		--iLi1:48%;
		--iLi2:50%;
		--iLi3:53%;
		--iLi4:57%;
		--iLi5:53%;
		--iLi6:50%;
	}
	16.67% {
		--iLi2:48%;
		--iLi3:50%;
		--iLi4:53%;
		--iLi5:57%;
		--iLi6:53%;
		--iLi1:50%;
	}
	33.33% {
		--iLi3:48%;
		--iLi4:50%;
		--iLi5:53%;
		--iLi6:57%;
		--iLi1:53%;
		--iLi2:50%;
	}
	50% {
		--iLi4:48%;
		--iLi5:50%;
		--iLi6:53%;
		--iLi1:57%;
		--iLi2:53%;
		--iLi3:50%;
	}
	66.67% {
		--iLi5:48%;
		--iLi6:50%;
		--iLi1:53%;
		--iLi2:57%;
		--iLi3:53%;
		--iLi4:50%;
	}
	83.33% {
		--iLi6:48%;
		--iLi1:50%;
		--iLi2:53%;
		--iLi3:57%;
		--iLi4:53%;
		--iLi5:50%;
	}
	100% {
		--iLi1:48%;
		--iLi2:50%;
		--iLi3:53%;
		--iLi4:57%;
		--iLi5:53%;
		--iLi6:50%;
	}
}

.infinite-shape {
	font-size:23rem;
	--radius: 1em;
	--gap:1.41421em;
	--lightnessspeed: 2s;
	--huechangespeed: 20s;
	--iHue1: 30;
	--iHue2: 25;
	--iHue3: 20;
	--iHue4: 15;
	--iHue5: 10;
	--iHue6: 5;
	--iHue7: 0;
	--iLi1:50%;
	--iLi2:50%;
	--iLi3:50%;
	--iLi4:50%;
	--iLi5:50%;
	--iLi6:50%;
	margin:auto;
	position: relative;
	width: calc(var(--radius) * 2 + var(--gap));
	height: calc(var(--radius) * 2);
}
.infinite-shape-inner {
	position:absolute;
	animation: lightness var(--lightnessspeed) linear infinite, hues2 var(--huechangespeed) linear infinite;
}
.circle {
	width: calc(var(--radius) * 2);
	height: calc(var(--radius) * 2);
	border-radius: 50%;
}
.circle1 {
	background: conic-gradient(
		hsl(var(--iHue3), 100%, var(--iLi3)) 90deg, 
		hsl(var(--iHue2), 100%, var(--iLi2)), 
		hsl(var(--iHue1), 100%, var(--iLi1)));
	transform: rotate(45deg);
}
.circle2 {
	right:0;
	background: conic-gradient(
		hsl(var(--iHue5), 100%, var(--iLi5)) 90deg, 
		hsl(var(--iHue6), 100%, var(--iLi6)), 
		hsl(var(--iHue7), 100%, var(--iLi1)));
	transform: rotate(225deg);
}
.square {
	position: absolute;
	transform: translate(-50%, -50%) rotate(45deg);
	width: calc(var(--radius));
	height: calc(var(--radius));
	background: linear-gradient(
		hsl(var(--iHue5), 100%, var(--iLi5)), 
		hsl(var(--iHue4), 100%, var(--iLi4)), 
		hsl(var(--iHue3), 100%, var(--iLi3)));
	left: 50%;
	top: 50%;
}

.fallback .circle1 {
	background: conic-gradient(var(--c3) 90deg, var(--c2), var(--c1));
}

.fallback .circle2 {
	background: conic-gradient(var(--c5) 90deg, var(--c6), var(--c7));
}
.fallback .square {
	background: linear-gradient(var(--c5), var(--c4), var(--c3));
}
.fallback.infinite-shape {
	/*   --c1: #241b6a;
	--c2: #2f598d;
	--c3: #489fb3;
	--c4: #5dbec9;
	--c5: #489fb3;
	--c6: #2f598d; */
	--c1: hsl(calc(0 + 15),100%,50%);
	--c2: hsl(calc(0 + 10),100%,50%);
	--c3: hsl(calc(0 + 5),100%,50%);
	--c4: hsl(0,100%,50%);
	--c5: hsl(calc(0 - 5),100%,50%);
	--c6: hsl(calc(0 - 10),100%,50%);
	--c7: hsl(calc(0 - 15),100%,50%);
	animation:hueRotate 10s linear infinite;
}
@keyframes hueRotate {
	0% {
		/*   red   */
		filter:hue-rotate(0deg) brightness(1);
	}
	12.5% {
		/*   orange   */
		filter:hue-rotate(30deg) brightness(1.5);
	}
	25% {
		/*   yellow   */
		filter:hue-rotate(60deg) brightness(2.5);
	}
	37.5% {
		/*   green   */
		filter:hue-rotate(105deg) brightness(2);
	}
	50% {
		/*   cyan   */
		filter:hue-rotate(180deg) brightness(1.5);
	}
	62.5% {
		/*   blue   */
		filter:hue-rotate(230deg) brightness(1);
	}
	75% {
		/*   violet   */
		filter:hue-rotate(270deg) brightness(1);
	}
	87.5% {
		/*   magenta   */
		filter:hue-rotate(315deg) brightness(1);
	}
	100% {
		/*   red   */
		filter:hue-rotate(360deg) brightness(1);
	}
}




@media (max-width: 950px) {
	.infinite-shape {
		font-size:11rem;
	}
	
	.dd-g-graph .underlay {
		padding:0;
	}
	.dd-g-graph .skew, .dd-g-graph .skew-reverse {
		margin-bottom:3rem;
	}
	
	.dd-g-graph .section-title {
		margin:0 auto 2rem;
	}
	.dd-g-graph .container-full {
		margin:0;
	}
	.dd-g-graph .left,
	.dd-g-graph .right{
		margin:0 3.5rem;
		width:100%;
	}
}