.preloader {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgb(235, 222, 189);
	text-align: center;
	z-index: 9999;
	transition: opacity 0.5s ease-in-out;
}

.preloader div {
	width: 50px;
	height: 50px;
	margin: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	transform-origin: center center;
}

.preloader svg {
	animation: rotate 2s linear infinite;
}

.preloader circle {
	stroke-dasharray: 1,200;
	stroke-dashoffset: 0;
	animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
	stroke-linecap: round;
}

@keyframes rotate {
	100% {
		transform: rotate(360deg);
	}
}

@keyframes dash {
	0% {
		stroke-dasharray: 1,200;
		stroke-dashoffset: 0;
	}
	
	50% {
		stroke-dasharray: 89,200;
		stroke-dashoffset: -35px;
	}
	
	100% {
		stroke-dasharray: 89,200;
		stroke-dashoffset: -124px;
	}
}

@keyframes color {
    100%, 0% {
		stroke: rgb(60, 36, 21);
	}
	
	40% {
		stroke: rgb(60, 36, 21);
	}
	
	80% {
		stroke: rgb(60, 36, 21);
	}
}