@keyframes order{
			0% {top:110px;opacity:0;}
			10% {top:110px;opacity:1}
			70% {top: 215px;opacity:1}
			80% {top: 215px;opacity:0}
		}
		.integration{
			min-height:300px;
			width:300px;
			margin:0 auto;
			border:solid 1px #dee7f1;
			background:radial-gradient(circle,rgba(0,0,0,.1) 0px, rgba(0,0,0,.1) 1px, transparent 2px);
			background-position: 50% 0;
			background-size: 40px 40px;
			position:relative;
		}
		.integration .actor{
			position:absolute;
			width:100%;
			flex:unset;
		}
		.integration .actor.order{
			opacity:0;
			width:0px;
			left:50%;
			margin-left:5px;
			animation: 4s infinite order;
			
		}
		.integration .actor>div{
			display:inline-block;
			background-color:#FFF;
			padding:6px;
			border-radius:5px;
			text-align:left;
			color:#000;
			text-wrap:nowrap;
		}
		.integration .actor.order>div{
			font-size:8pt;
			border:solid 1px #dee7f1;
		}
		.integration .actor h3{
			font-size:11pt;
			margin:0;
			padding:0 6px;
		}
		.integration .actor p{
			margin:0;
			font-size:10pt;
			text-align:center;
			color:#000;
		}
		.integration .actor.white h3{color:#FFF;}
		.integration .actor.white p{color:#FFF;}
		@keyframes flow-opposite {
			100% {
				stroke-dashoffset: 0;
			}
		}
		.integration line{
			fill:none;
			stroke:rgb(var(--theme));
			stroke-dasharray: 0, 8;
			stroke-width: 3;
			stroke-dashoffset: 16;
			stroke-linecap: round;
			stroke-linejoin: round;
			animation: 1s linear 0s infinite normal none running flow-opposite !important;
		}