/* HTML: <div class="loader"></div> */
.loader {
	width: 50px;
	margin-left: 45%;
	aspect-ratio: 1;
	border-radius: 50%;
	border: 8px solid #eeeeee;
	animation:
		l20-1 0.8s infinite linear alternate,
		l20-2 1.6s infinite linear;
}

.loader.form {
	border: 4px solid #2780e3;
	width: 30px;
	margin: 0px 20px;
}
@keyframes l20-1 {
	0% {
		clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%)
	}

	12.5% {
		clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%)
	}

	25% {
		clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%)
	}

	50% {
		clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%)
	}

	62.5% {
		clip-path: polygon(50% 50%, 100% 0, 100% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%)
	}

	75% {
		clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0% 100%)
	}

	100% {
		clip-path: polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100%)
	}
}

@keyframes l20-2 {
	0% {
		transform: scaleY(1) rotate(0deg)
	}

	49.99% {
		transform: scaleY(1) rotate(135deg)
	}

	50% {
		transform: scaleY(-1) rotate(0deg)
	}

	100% {
		transform: scaleY(-1) rotate(-135deg)
	}
}

.preview-item {
    max-height: 500px;
	margin: auto;
}

.carousel-inner{
	display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.carousel-control-next,
.carousel-control-prev{
	width: 5%;
}