.animation.blocks{
	position:relative;
	overflow:hidden;
	margin:50px auto;
}
.animation.blocks>.actor{
	z-index:2;
	position:absolute;
	left:0;
	width:100px;
	margin-left:-50px;
	text-align:center;
	width:0;
	margin-left:0;
}
.animation.blocks>.actor>span{
	font-size:8pt;
	font-weight:bold;
	background:#FFF;
	color:#000;
	display:inline-block;
	padding:4px 8px;
	border-radius:4px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
	width:70px;
	height:70px;
	box-sizing:border-box;
}
.animation.blocks>.actor.sq>span>i{
	font-size: 26pt;
	color: rgb(var(--theme));
    margin-top: 1px;
}
.animation.blocks>.actor.sq>span>img{
	height:32px;
	margin-top:2px;
	margin-bottom:3px;
}

.animation.blocks>.actor.large>span{
	width:150px;
	height:150px;
	padding-top:30px;
}
.animation.blocks>.actor.large>span>i{
	font-size:40pt;
}
.animation.blocks>.actor>span>span{
	display: flex;
    height: 19px;
    align-items: center;
    justify-content: center;
}
.animation.blocks>.actor.large>span>span{
	font-size:11pt;
	color:rgb(var(--theme));
	margin-top:10px;
}
.animation.blocks.onlight>.actor>span{
	border:solid 1px #dee7f1;
	box-shadow:none;
}

@keyframes flow-opposite {
	100% {
		stroke-dashoffset: 0;
	}
}

.animation.blocks svg{
	width:100%;
	height:100%;
}

.animation.blocks .line.channel{
	fill:none;
	stroke:#dee7f1;
	stroke-width: 8;
}

.animation.blocks .line.dots{
	fill:none;
	stroke:#2f59bc;
	stroke-dasharray: 0, 8;
	stroke-width: 4;
    stroke-dashoffset: 120;
	stroke-linecap: round;
    stroke-linejoin: round;
    animation: 4.3s linear 0s infinite normal none running flow-opposite !important;
}

.animation.blocks.onlight .line.dots{
	stroke:rgb(var(--theme));
}

@media screen and (max-width:400px){
	.animation.blocks{
		transform:scale(0.8) translateX(-10%);
	}
}