header {
	background-color: black;
	padding-block: 0;
}

.steps {
	border-radius: 0.25rem;
}

.load-element > * {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
}

.load-element > *.loaded {
	opacity: 1;
	transform: translateY(0);
}

.step:not(.active) {
	display: none !important;
}



@media only screen and (max-width: 767px) {
	header {
		justify-content: center;
	}

	.content {
		padding-bottom: 0;
		justify-content: flex-end;
	}

	.steps {
		color: black;
		background-color: rgba(255, 255, 255, 0.7);
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}

	.dots {
		position: absolute;
		top: -8px;
		transform: translateY(-100%) !important;
	}
}

@media only screen and (min-width: 768px) {
	* {
		font-family: 'Open Sans', sans-serif;
	}

	.steps {
		background: rgba(27, 24, 25, 0.9);
	}

	.steps p {
		font-size: 0.75rem;
	}

	.dot:not(.dot-active) {
		background: none;
		border: 1px solid #b9b9b9;
	}
}