/*
 * Table of contents
 * 1. Infinity Loader styles
 */

/* Infinity Loader styles: start */
/*
 * The same design as version 2.0.2, a little faster (1.4s instead of 2s).
 * Two teardrops (::before and ::after) turn around themselves to draw the
 * infinity sign. The color comes from border-color, so the Fill Color option
 * keeps working.
 * box-sizing is set to content-box on purpose: many themes set
 * "* { box-sizing: border-box; }", which would put the 4px border inside the
 * 30px size and change the shape on the site compared to the settings preview.
 */
.infinity-loader_preloader-template {
	position: relative;
	width: 60px;
	height: 30px;
	box-sizing: content-box;
	transform: rotate(90deg);
}

.infinity-loader_preloader-template::before,
.infinity-loader_preloader-template::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 30px;
	height: 30px;
	box-sizing: content-box;
	border: 4px solid #3498db;
	border-radius: 50px 50px 0 50px;
	transform: rotate(-45deg);
	animation: infinity-loader-top-right_preloader_animation 1.4s linear infinite;
}

.infinity-loader_preloader-template::after {
	top: 0;
	left: auto;
	right: 0;
	border-radius: 50px 50px 50px 0;
	transform: rotate(45deg);
	animation: infinity-loader-bottom-left_preloader_animation 1.4s linear infinite;
}

@keyframes infinity-loader-top-right_preloader_animation {
	0% {
		transform: rotate(-45deg);
	}
	50% {
		transform: rotate(135deg);
	}
	100% {
		transform: rotate(315deg);
	}
}

@keyframes infinity-loader-bottom-left_preloader_animation {
	0% {
		transform: rotate(45deg);
	}
	50% {
		transform: rotate(225deg);
	}
	100% {
		transform: rotate(405deg);
	}
}
/* Infinity Loader styles: end */