﻿
.waves {
	position: relative;
	width: 100%;
	height: 16vh;
/*	margin-bottom: -7px;
*/
	/*Fix for safari gap*/
	min-height: 100px;
	max-height: 150px;

	margin-top: -100px;
}

	.waves.waves-sm {
		height: 50px;
		min-height: 50px;
	}

	.waves.no-animation .moving-waves > use {
		animation: none;
	}

.wave-rotate {
	transform: rotate(180deg);
}

/* Animation for the waves */
.moving-waves > use {
	animation: move-forever 10s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}

	.moving-waves > use:nth-child(1) {
		animation-delay: -2s;
		animation-duration: 11s;
	}

	.moving-waves > use:nth-child(2) {
		animation-delay: -4s;
		animation-duration: 13s;
	}

	.moving-waves > use:nth-child(3) {
		animation-delay: -3s;
		animation-duration: 15s;
	}

	.moving-waves > use:nth-child(4) {
		animation-delay: -4s;
		animation-duration: 20s;
	}

	.moving-waves > use:nth-child(5) {
		animation-delay: -4s;
		animation-duration: 25s;
	}

	.moving-waves > use:nth-child(6) {
		animation-delay: -3s;
		animation-duration: 30s;
	}

@keyframes move-forever {
	0% {
		transform: translate3d(-90px, 0, 0);
	}

	100% {
		transform: translate3d(85px, 0, 0);
	}
}

/*Shrinking for mobile*/
@media (max-width: 767.98px) {
	.waves {
		height: 40px;
		min-height: 40px;
	}
}
