.disart{
	color: red!important;
	font-size: 2rem;
	position: relative;
}
.disart::after,
.disart::before,
.disart div::after,
.disart div::before,
.disart>div:not(:first-child),
.disart div div{
	display: block;
	content: '';
	position: absolute;
	border-radius: 50%;
	background: var(--mcolor);
}
.disart::after{
/*	background: var(--scolor);*/
	--sfb:calc(var(--bubble) * .23);
	height: var(--sfb);
	width: var(--sfb);
	--sfbh:calc(var(--sfb) * .5);
	left: calc(88% - var(--sfbh));
	top: calc(25% - var(--sfbh));
	animation: circlerotate reverse var(--time) infinite ease-in-out;
	transform-origin: 40% 40%;
	filter: brightness(1.3);
}
.disart::before{
	--sfb:calc(var(--bubble) * .32);
	height: calc(var(--sfb) * .5);
	width: var(--sfb);
	border-radius: calc(var(--sfb) * .5) calc(var(--sfb) * .5) 0 0;
	--sfbh:calc(var(--sfb) * .5);
	left: calc(20% - var(--sfbh));
	bottom: 0;
	animation:scaleleaf 4.5s infinite linear;
	transform-origin: center bottom;
}
.disart>div:first-child{
	border-radius: 0 1rem 1rem 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
	 -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.disart>div:first-child::after{
	--sfb:calc(var(--bubble) * 1.5);
	height: var(--sfb);
	width: var(--sfb);
	left: 25%;
	top: 25%;
	filter: brightness(1.15);
	transform-origin: 49.5% 50.35%;
	animation: circlerotate var(--ta) infinite linear
}
.disart>div:first-child::before{
	--sfb:calc(var(--bubble) * 1.5);
	height: var(--sfb);
	width: var(--sfb);
	left: 5%;
	bottom: 25%;
	transform-origin: 50.25% 50.85%;
	animation: circlerotate var(--tb) reverse infinite linear;
}

.disart>div:first-child div{
	background: transparent;
	--sfb:calc(var(--bubble) * .2);
	height: var(--sfb);
	width: var(--sfb);
	--sfbh:calc(var(--sfb) * .5);
	left: calc(47% - var(--sfbh));
	bottom: calc(23% - var(--sfbh));
	filter: brightness(1.15);
	animation: circlerotate var(--time) infinite ease-in-out;
}

.disart>div:first-child div::before,
.disart>div:first-child div::after{
	--sfb:calc(var(--bubble) * .1);
	height: var(--sfb);
	width: var(--sfb);
	--sfbh:calc(var(--sfb) * .5);
	left: calc(-53% + var(--sfbh));
	bottom: calc(100% - var(--sfbh));
	filter: brightness(.98);
}

.disart>div:first-child div::before{
	background: var(--scolor);
}

.disart>div:first-child div::after{
	--sfb:calc(var(--bubble) * .04);
	height: var(--sfb);
	width: var(--sfb);
	--sfbh:calc(var(--sfb) * .5);
	left: calc(-30% + var(--sfbh));
	bottom: calc(0 - var(--sfbh));
	transform-origin: -75% 10%;
	animation: circlerotate calc(var(--time) * var(--ta)) infinite ease-in-out;
}

.disart>div:first-child~div{
	background: transparent;
	--sfb:calc(var(--bubble) * .3);
	height: var(--sfb);
	width: var(--sfb);
	--sfbh:calc(var(--sfb) * .5);
	left: calc(45% - var(--sfbh));
	bottom: calc(75% - var(--sfbh));
	animation: circlerotate reverse var(--time) infinite ease-in-out;
}

.disart>div:first-child+div{
	background: transparent;
	--sfb:calc(var(--bubble) * .3);
	height: var(--sfb);
	width: var(--sfb);
	--sfbh:calc(var(--sfb) * .5);
	left: calc(10% - var(--sfbh));
	bottom: calc(26% - var(--sfbh));
	animation: circlerotate reverse var(--time) infinite ease-in-out;
}

.disart>div:not(:first-child) div{
/*	background: var(--scolor);*/
	filter: brightness(1.1);
	--sfb:calc(var(--bubble) * .12);
	height: var(--sfb);
	width: var(--sfb);
	--sfbh:calc(var(--sfb) * .5);
	left: calc(35% - var(--sfbh));
	bottom: calc(35% - var(--sfbh));
	animation: circlerotate var(--time) infinite ease-in-out;
}

.disart>div:not(:first-child)::after{
	--sfb:calc(var(--bubble) * .08);
	height: var(--sfb);
	width: var(--sfb);
	--sfbh:calc(var(--sfb) * .5);
	left: calc(-8% + var(--sfbh));
	bottom: calc(103% - var(--sfbh));
	filter: brightness(1.25);
	transform-origin: 90% 103%;
	animation: circlerotate calc(var(--time) * var(--ta)) infinite ease-in-out;
}
.disart>div:nth-child(3)::after{
	--sfb:calc(var(--bubble) * .05);
	animation-direction: reverse;
}

.disart>div:not(:first-child)::before{
	--sfb:calc(var(--bubble) * .075);
	height: var(--sfb);
	width: var(--sfb);
	--sfbh:calc(var(--sfb) * .5);
	left: calc(48% - var(--sfbh));
	bottom: calc(109% - var(--sfbh));
	filter: brightness(1.3);
}

.disart>div:not(:first-child) div::before{
	--sfb:calc(var(--bubble) * .04);
	height: var(--sfb);
	width: var(--sfb);
	--sfbh:calc(var(--sfb) * .5);
	left: calc(100% - var(--sfbh));
	bottom: calc(50% - var(--sfbh));
	filter: brightness(1.2);
	transform-origin: 200% -103%;
	animation: circlerotate calc(var(--time) * var(--tb)) infinite linear;
}
.disart>div:nth-child(3) div::before{
	--sfb:calc(var(--bubble) * .08);
	transform-origin: 100% -56%;
	animation-direction: reverse ;

}

.disart>div:not(:first-child) div::after{
	--sfb:calc(var(--bubble) * .12);
	height: var(--sfb);
	width: var(--sfb);
	--sfbh:calc(var(--sfb) * .5);
	left: calc(150% - var(--sfbh));
	bottom: calc(150% - var(--sfbh));
	filter: brightness(1.15);
}
.disart>div:nth-child(3) div::after{
	--sfb:calc(var(--bubble) * .075);
}

.disart>div:first-child~div:last-child{
/*	background: var(--mcolor);*/
	--sfb:calc(var(--bubble) * .3);
	height: var(--sfb);
	width: var(--sfb);
	left: unset;
	--sfbh:calc(var(--sfb) * .5);
	right: calc(23% - var(--sfbh));
	bottom: calc(32.5% - var(--sfbh));
	animation: circlerotate var(--time) infinite ease-in-out;
}

.disart>div:first-child~div:last-child div{
/*	background: var(--scolor);*/
	--sfb:calc(var(--bubble) * .12);
	height: var(--sfb);
	width: var(--sfb);	
	left: unset;
	--sfbh:calc(var(--sfb) * .5);
	right: calc(35% - var(--sfbh));
	bottom: calc(35% - var(--sfbh));
	filter: brightness(1.3);
	animation: circlerotate reverse var(--time) infinite ease-in-out;

}







@media (max-width: 1399.98px) { 
	.disart>div:first-child div {
		left: calc(42% - var(--sfbh));
   		bottom: calc(31% - var(--sfbh));
	}
}
@media (max-width: 1199.98px) { 
	.disart>div:first-child~div:last-child{
		--sfb: calc(var(--bubble) * .35);
		right: calc(25% - var(--sfbh));
		bottom: calc(35.5% - var(--sfbh));
	}
	.disart>div:first-child div {
		left: calc(38% - var(--sfbh));
	}
}
@media (max-width: 991.98px) {
	.disart>div:first-child~div:last-child {
		scale: 1.4;
	}
	.disart>div:first-child~div {
		scale: 1.3;
	}
	.disart>div:first-child div {
		left: calc(28% - var(--sfbh));
	}
}
@media (max-width: 767.98px) { 
	.disart::before{
		--sfb: calc(var(--bubble) * .5);
		left: calc(53.5% - var(--sfbh));
	}
	.disart>div:first-child~div:last-child{
		right: calc(37% - var(--sfbh));
	}
}
@media (max-width: 575.98px) { 
}
@media (max-width: 319.98px) { 

}