@charset "UTF-8";

/* SIZE */
.millionseller-section__graph.active .size02 {transform: scale(0.2);}
.millionseller-section__graph.active .size03 {transform: scale(0.3);}
.millionseller-section__graph.active .size04 {transform: scale(0.4);}
.millionseller-section__graph.active .size05 {transform: scale(0.5);}
.millionseller-section__graph.active .size06 {transform: scale(0.6);}
.millionseller-section__graph.active .size07 {transform: scale(0.7);}

/* POSITION */
.millionseller-section__graph.active .pos1 {left: 56%;top: 65%}
.millionseller-section__graph.active .pos2 {left: 25%;top: 15%;}
.millionseller-section__graph.active .pos3 {left: 50%;top: 25%;}
.millionseller-section__graph.active .pos4 {left: -5%;top: 50%;}
.millionseller-section__graph.active .pos5 {left: 90%;top: 65%;}
.millionseller-section__graph.active .pos6 {left: 35%;top: 75%;}
.millionseller-section__graph.active .pos7 {left: 5%;top: -5%;}
.millionseller-section__graph.active .pos8 {left: 75%;top: 20%;}

/* FIREWORK DELAY */
.millionseller-section__graph.active .delay1 .drop-1 {animation-delay: 1s}
.millionseller-section__graph.active .delay1 .drop-2 {animation-delay: 1s}
.millionseller-section__graph.active .delay1 .drop-3 {animation-delay: 1s}
.millionseller-section__graph.active .delay1 .drop-4 {animation-delay: 1s}

.millionseller-section__graph.active .delay2 .drop-1 {animation-delay: 1.3s}
.millionseller-section__graph.active .delay2 .drop-2 {animation-delay: 1.3s}
.millionseller-section__graph.active .delay2 .drop-3 {animation-delay: 1.3s}
.millionseller-section__graph.active .delay2 .drop-4 {animation-delay: 1.3s}

.millionseller-section__graph.active .delay3 .drop-1 {animation-delay: 1.6s}
.millionseller-section__graph.active .delay3 .drop-2 {animation-delay: 1.6s}
.millionseller-section__graph.active .delay3 .drop-3 {animation-delay: 1.6s}
.millionseller-section__graph.active .delay3 .drop-4 {animation-delay: 1.6s}

/* FIREWORK */
.millionseller-section__graph.active .drops-grp {display: block;width: 8.5em;height: 8.5em;position: absolute;}
.millionseller-section__graph.active .drops-grp2 {display: block;width: 8.5em;height: 8.5em;position: absolute;transform: rotate(45deg);}
.millionseller-section__graph.active .drop {display: block;width: 1em;height: 2em;overflow: hidden;position: absolute;opacity: 0;}
.millionseller-section__graph.active .drop:before {content: "";display: block;width: 1em;height: 1em;background: currentColor;border-radius: 50%;}
.millionseller-section__graph.active .drop:after {content: "";display: block;position: relative;top: -0.4em;width: 0;height: 0;	border-top: 1.4em solid currentColor;border-left: 0.5em solid transparent;border-right: 0.5em solid transparent;}
.millionseller-section__graph.active .drop-1 {left:3.75em;top: 0;animation: drop1anim 1s ease-in-out;}
.millionseller-section__graph.active .drop-2 {top: 3.25em;right: 0;animation: drop2anim 1s ease-in-out; }
.millionseller-section__graph.active .drop-3 {left:3.75em;bottom: 0;animation: drop3anim 1s ease-in-out;}
.millionseller-section__graph.active .drop-4 {top: 3.25em;left: 0;animation: drop4anim 1s ease-in-out;}

/* keyframes */
@keyframes drop1anim {
	0% {top:3.25em;opacity: 0;transform: scale(0.3);}
	25% {opacity: 0;}
	50% {opacity: 1;transform: scale(1);}
	100% {top: -0.75em;opacity: 0;transform: scale(0.3);}
}
@keyframes drop2anim {
	0% {right:3.75em;opacity: 0;transform: scale(0.3) rotate(90deg);}
	25% {opacity: 0;}
	50% {opacity: 1;transform: scale(1) rotate(90deg);}
	100% {right: -0.25em;opacity: 0;transform: scale(0.3) rotate(90deg);}
}
@keyframes drop3anim {
	0% {bottom:3.25em;opacity: 0;transform: scale(0.3) rotate(180deg);}
	25% {opacity: 0;		}
	50% { opacity: 1;transform: scale(1) rotate(180deg);}
	100% {bottom: -0.75em;opacity: 0;transform: scale(0.3) rotate(180deg);}
}
@keyframes drop4anim {
	0% { 
		left:3.75em;
		opacity: 0;
		transform: scale(0.3) rotate(-90deg);}
	25% {opacity: 0;}
	50% { opacity: 1;transform: scale(1) rotate(-90deg);}
	100% { left: -0.25em;opacity: 0;transform: scale(0.3) rotate(-90deg)}
}