/**
 * Animated dots section
 *
 * Used on Customers and 404 page
 */

#animated-dots {
	background: var(--brand-orange);
	width: 100%;
	height: 550px;
	position: relative;

	&.animated-dots--404page {
		background: var(--brand-green);
	}
}

#animated-dots__back {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	opacity: 0.18;
}

#animated-dots__front {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}

#animated-dots__number {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 4;
	display: none;
}

#animated-dots__slides {
	position: absolute;
	bottom: 70px;
	left: 0;
	z-index: 3;
	width: 100%;
}

.animated-dots--404page #animated-dots__slides {
	bottom: 50px;
}

.animated-dots__slide {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	transition: opacity .5s ease-in-out;
}

.animated-dots__slide--active {
	opacity: 1;
}

.animated-dots__slide__number {
	text-align: center;
	color: #fff;
	font-size: 42px;
}

.animated-dots__slide__text {
	font-size: 36px;
	font-weight: bold;
	color: #FFF;
	text-align: center;
}

.animated-dots__slide__text--small {
	font-size: 28px;
	font-weight: 400;
}