/* Animated Circles */
.animated-circles {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 11%;
	overflow: hidden;
}

.site-header__title img {
	height: 3.5vh;
	width: auto;
	padding-left: 1.875rem;
	padding-right: 1.875rem;

}

.hero-container {
	width: 100%;
	overflow: hidden;
	background-color: rgb(184, 223, 208);
}

.logo {
	z-index: 23;
}

.circle {
	position: absolute;
	border-radius: 50%;
	opacity: 1;
	background-color: #fff;
	animation: moveCircle 25s ease-in-out infinite;
}

.circle.circle-1 {
	width: 28vw;
	height: 28vw;
	left: -100px;
	top: 300px;
	animation-delay: 0s;
}

.circle.circle-2 {
	width: 22vw;
	height: 22vw;
	left: -150px;
	top: 350px;
	animation-delay: 5s;
}

.circle.circle-3 {
	width: 28vw;
	height: 28vw;
	left: -200px;
	top: 400px;
	animation-delay: 10s;
}

/* Animation Keyframes */
@keyframes moveCircle {
	0% {
		transform: translate(0, 0);
		opacity: 1;
	}

	50% {
		opacity: 1;
	}

	100% {
		transform: translate(1200px, -600px);
		opacity: 1;
	}
}


@media (max-width: 200px) {
	.site-header__title img {
		padding: 0;
	}
}