.hero-temp {
	.hero-animation {
		.animation-stage {
			background: url('../img/layout/bg-hero.svg') no-repeat left top;
		}
	}
	@include media-breakpoint-down(sm) {
		.hero-animation {
			.animation-stage {
				background: url('../img/layout/bg-hero-mobile.svg') no-repeat left top;
			}
		}
	}
}
.hero-animation {
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 1051.5px;

	.animation-stage {
		width: 2957px;
		height: 1051.5px;
		position: absolute;
		margin: -44px 0 0 -200px;
		left: 50%;
		top: 20px;
		transform: translateX(-50%);
		background: url('../img/layout/temp-fullbg.svg') no-repeat left top;
		background-size: contain;
		.guide {
			width: 2957px;
			height: 1051.5px;
		}
	}

	.streak-group {
		&.one {
			left: 228px;
			top: 25px;
		}

		&.two {
			left: 791px;
			top: 25px;
		}

		&.three {
			left: 228px;
			top: 138px;
		}

		&.four {
			left: 1px;
			top: 252px;
		}

		&.five {
			left: 564px;
			top: 480px;
		}

		&.six {
			left: 566px;
			top: 593px;
		}

		&.seven {
			left: 1022px;
			top: 706px;
		}

		&.eight {
			left: 340px;
			top: 822px;
		}

		&.nine {
			left: 1691px;
			top: 24px;
		}

		&.ten {
			left: 2593px;
			top: 24px;
		}

		&.eleven {
			left: 1691px;
			top: 367px;
		}

		&.twelve {
			left: 2367px;
			top: 480px;
		}

		&.thirteen {
			left: 1918px;
			top: 594px;
		}

		&.fourteen {
			left: 2255px;
			top: 594px;
		}

		&.fifteen {
			left: 1804px;
			top: 708px;
		}

		&.sixteen {
			left: 2255px;
			top: 708px;
		}

		&.seventeen {
			left: 1691px;
			top: 821px;
		}

		&.eighteen {
			left: 2255px;
			top: 821px;
		}
	}

	.gift-animation {
		&.one {
			left: 778px;
			top: 118px;
		}

		&.two {
			left: 1290px;
			top: 631px;
			z-index: 11;
		}

		&.three {
			left: 1840px;
			top: 518px;
		}

		&.four {
			left: 2807px;
			top: 631px;
		}
	}

	.rotating-words {
		&.one {
			left: 1245px;
			top: 595px;
			z-index: 11;
		}
		&.two {
			left: 1794px;
			top: 482px;
		}
		&.three {
			left: 2761px;
			top: 595px;
		}
	}
	.stars-big {
		.star {
			&.one {
				left: 1294px;
				top: 717px;
			}
			&.two {
				left: 1586px;
				top: 356px;
			}
			&.three {
				left: 1783px;
				top: 768px;
			}
			&.four {
				left: 1920px;
				top: 196px;
			}
			&.five {
				left: 2344px;
				top: 314px;
			}
			&.six {
				left: 2416px;
				top: 486px;
			}
		}
	}
	.stars-small {
		.star {
			&.one {
				left: 901px;
				top: 148px;
			}
			&.two {
				left: 821px;
				top: 737px;
			}
			&.three {
				left: 1460px;
				top: 676px;
			}
			&.four {
				left: 1556px;
				top: 558px;
			}
			&.five {
				left: 1940px;
				top: 146px;
			}
			&.six {
				left: 2003px;
				top: 504px;
			}
			&.seven {
				left: 2374px;
				top: 513px;
			}
			&.eight {
				left: 2540px;
				top: 145px;
			}
		}
	}
	.grid-animation {
		&.one {
			left: 790px;
			top: 255px;
		}

		&.two {
			left: 225px;
			top: 713px;
		}

		&.three {
			left: 2142px;
			top: 150px;
		}
	}
	.bubble-cluster {
		&.one {
			left: 635px;
			top: 481px;
		}
		&.two {
			left: 616px;
			top: 576px;
		}

		&.three {
			left: 1548px;
			top: 709px;
		}
		&.four {
			left: 1538px;
			top: 815px;
		}

		&.five {
			left: 1758px;
			top: 606px;
		}
		&.six {
			left: 1738px;
			top: 703px;
		}

		&.seven {
			left: 1868px;
			top: 153px;
		}
		&.eight {
			left: 1849px;
			top: 253px;
		}

		&.nine {
			left: 2547px;
			top: 372px;
		}
		&.ten {
			left: 2528px;
			top: 473px;
		}
	}
	.meter-animation {
		&.one {
			left: 247px;
			top: 349px;
		}
		&.two {
			left: 1605px;
			top: 25px;
		}

		&.three {
			left: 2056px;
			top: 7px;
		}

		&.four {
			left: 2615px;
			top: 336px;
		}
	}
	.meter-animation-two {
		&.one {
			left: 452px;
			top: 592px;
		}
		&.two {
			left: 1614px;
			top: 717px;
		}
	}

	.tube-animation {
		&.one {
			left: 1108px;
			top: 445.4px;
		}
		&.two {
			left: 2209px;
			top: 20px;
		}
		&.three {
			left: 2242px;
			top: 556px;
		}
	}

	@include media-breakpoint-down(lg) {
		// width: 2508.07px;
		height: 891.87px;
		.animation-stage {
			transform-origin: top left;
			width: 2957px;
			top: 2px;
			margin: 0 0 0 -109px;
			transform: scale(0.84) translateX(-50%);
		}
	}

	@include media-breakpoint-down(sm) {
		height: 725.56px;
		top: 309px;
		.animation-stage {
			transform-origin: top left;
			width: 1150.15px;
			height: 725.56px;
			top: 0;
			margin: 0 0 0 10px;
			background: url('../img/layout/temp-bg-mobile.svg') no-repeat left top;
			background-size: contain;
			transform: translateX(-50%);
		}

		$scale: scale(0.51);
		.streak-group {
			transform: $scale;
			&.one {
				left: 61px;
				top: 299px;
			}

			&.two {
				left: 576px;
				top: 299px;
			}

			&.three {
				left: 404px;
				top: 10px;
			}

			&.four {
				left: 118px;
				top: 472px;
				left: 288px;
				top: 356px;
				.streak {
					&:nth-child(1),
					&:nth-child(2),
					&:nth-child(3) {
						opacity: 0;
					}
				}
			}

			&.five {
				left: 174px;
				top: 416px;
			}

			&.six {
				left: 805px;
				top: 10px;
				.streak {
					&:nth-child(1) {
						opacity: 0;
					}
				}
			}

			&.seven {
				left: 691px;
				top: 414px;
			}

			&.eight {
				left: 815px;
				top: 476px;
			}

			&.thirteen {
				left: 176px;
				top: 473px;
			}

			&.fourteen {
				left: 290px;
				top: 473px;
			}

			&.nine,
			&.ten,
			&.eleven,
			&.twelve,
			&.fifteen,
			&.sixteen,
			&.seventeen,
			&.eighteen {
				display: none;
			}
		}

		.gift-animation {
			transform: $scale;
			&.one {
				display: none;
			}
			&.two {
				left: 523px;
				top: 483px;
				z-index: 11;
			}

			&.three {
				left: 459px;
				top: 251px;
			}

			&.four {
				left: 950px;
				top: 308px;
			}
		}

		.rotating-words-group {
			transform: $scale;
		}
		.rotating-words {
			&.one {
				left: 468px;
				top: 971px;
				z-index: 11;
			}
			&.two {
				left: 344px;
				top: 514px;
			}
			&.three {
				left: 1306px;
				top: 628px;
			}
		}
		.stars-big {
			transform: $scale;
			.star {
				&.one {
					left: 514px;
					top: 1090px;
				}
				&.two {
					left: 137px;
					top: 391px;
				}
				&.three {
					left: 25px;
					top: 1098px;
				}
				&.four {
					left: 891px;
					top: 349px;
				}
				&.five {
					left: 961px;
					top: 519px;
				}
				&.six {
					left: 1036px;
					top: 1063px;
				}
			}
		}
		.stars-small {
			transform: $scale;
			.star {
				&.one {
					left: 55px;
					top: 1132px;
				}
				&.two {
					left: 488px;
					top: 180px;
				}
				&.three {
					left: 552px;
					top: 536px;
				}
				&.four {
					left: 683px;
					top: 1050px;
				}
				&.five {
					left: 920px;
					top: 546px;
				}
				&.six {
					left: 1067px;
					top: 186px;
				}
				&.seven,
				&.eight {
					display: none;
				}
			}
		}
		.grid-animation {
			transform: $scale;
			&.one {
				left: 92px;
				top: 164px;
			}

			&.two {
				left: 586px;
				top: 47px;
			}

			&.three {
				left: 769px;
				top: 508px;
			}
		}
		.bubble-cluster {
			transform: $scale;
			&.one {
				left: 209px;
				top: 448px;
			}
			&.two {
				left: 199px;
				top: 498px;
			}

			&.three {
				left: 327px;
				top: 151px;
			}
			&.four {
				left: 317px;
				top: 201px;
			}

			&.five {
				left: 439px;
				top: 326px;
			}
			&.six {
				left: 429px;
				top: 376px;
			}

			&.seven {
				left: 678px;
				top: 555px;
			}
			&.eight {
				left: 668px;
				top: 605px;
			}

			&.nine {
				left: 837px;
				top: 209px;
			}
			&.ten {
				left: 827px;
				top: 259px;
			}
		}
		.meter-animation {
			transform: $scale;
			&.tilted {
				transform: rotate(-90deg) $scale;
			}
			&.one {
				left: 565px;
				top: -14px;
			}
			&.two {
				left: 336px;
				top: -4px;
			}
			&.three {
				left: 848px;
				top: 154px;
			}
			&.four {
				display: none;
			}
		}
		.meter-animation-two {
			transform: $scale;
			&.tilted {
				transform: rotate(-90deg) $scale;
			}
			&.one {
				left: 370px;
				top: 359px;
			}
			&.two {
				left: 840px;
				top: 294px;
			}
		}

		.tube-animation {
			transform: $scale;
			&.one {
				left: 314px;
				top: 269px;
			}
			&.two {
				left: 530px;
				top: -30px;
				&.mobile {
					left: -98px;
					top: 82px;
				}
			}
			&.three {
				left: 624px;
				top: 188px;
			}
		}
	}
}
