.neliosr-loading-animation {
	align-items: center;
	display: flex;
	flex-direction: column;
	height: 80vh;
	position: relative;

	&--container {
		margin: 0;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
	}

	&__logo-container {
		display: block;
		max-width: 100px;
		width: 100%;
		height: 60px;
		margin-top: 3em;
	}

	&__logo {
		animation: neliosr-shake 3s ease-in-out infinite;
		max-width: 100px;
		width: 100%;
		height: 30px;
		overflow: hidden;
		position: relative;
		background: rgba(0, 0, 0, 0.3);
		border-radius: 5px;
		box-shadow:
			0 35px 0 -5px #aaa,
			0 -5px 0 0 #ddd,
			0 -25px 0 -5px #fff,
			-25px -30px 0 0 #ddd,
			-25px 30px 0 0 #ddd,
			25px -30px 0 0 #ddd,
			25px 30px 0 0 #ddd,
			20px 10px 0 5px #ddd,
			20px -10px 0 5px #ddd,
			-20px -10px 0 5px #ddd,
			-20px 10px 0 5px #ddd;
	}

	&__text {
		font-size: 1.4em;
	}
}

.neliosr-loading-animation__logo::after,
.neliosr-loading-animation__logo::before {
	content: "";
	border-radius: 100%;
	width: 35px;
	height: 35px;
	display: block;
	position: absolute;
	border: 4px dashed #fff;
	bottom: -4px;
	transform: rotate(0deg);
	box-sizing: border-box;
	// animation: tape 4s linear infinite;
	animation: neliosr-spin 3s ease-in-out infinite;
}

.neliosr-loading-animation__logo::before {
	right: 0;
	box-shadow:
		0 0 0 4px #fff,
		0 0 0 34px #000;
}

.neliosr-loading-animation__logo::after {
	left: 0;
	box-shadow:
		0 0 0 4px #fff,
		0 0 0 34px #000;
}

@keyframes neliosr-shake {

	65%,
	80%,
	88%,
	96% {
		transform: rotate(0.5deg);
	}

	50%,
	75%,
	84%,
	92% {
		transform: rotate(-0.5deg);
	}

	0%,
	50%,
	100% {
		transform: rotate(0);
	}
}

@keyframes neliosr-spin {

	0% {
		transform: rotate(0deg) scale(0.4);
	}

	50% {
		transform: rotate(360deg) scale(0.4);
	}

	75% {
		transform: rotate(750deg) scale(0.4);
	}

	100% {
		transform: rotate(1200deg) scale(0.4);
	}
}