.container-loading {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	position: fixed;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	background: rgba(255, 255, 255, 0.55);
	z-index: 999;
}

	.container-loading .content-loading {
		margin-top: 5px;
		top: 50%;
		transform: translateY(-50%);
	}

		.container-loading .content-loading:before {
			content: "";
			position: absolute;
			top: -45px;
			left: -45px;
			right: -45px;
			bottom: -45px;
			border-radius: 50%;
		}

		.container-loading .content-loading .loading-row {
			width: 100%;
			height: 25%;
		}

			.container-loading .content-loading .loading-row .container-ball {
				height: 100%;
				width: 25%;
				float: left;
			}

		.container-loading .content-loading .ball-outside {
			position: absolute;
			top: 130px;
			left: -55px;
			height: 18px;
			width: 17px;
		}

.ball {
	height: 70%;
	width: 70%;
	max-height: 70%;
	max-width: 70%;
	border-radius: 50%;
	margin: 0 auto;
	position: relative;
}

.loading-bg-op {
	width: calc(100% - 162px);
	height: calc(100% - 29px);
	left: calc(50% - -81.3px);
	top: calc(50% - -19.4px);
}

.loading-bg-cl {
	width: calc(100% - 45px);
	height: calc(100% - 35px);
	left: calc(50% - -22.2px);
	top: calc(50% - -17.1px);
}


.loading-bg-loader-processes {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 50%;
	top: 50%;
}


/*keyframe animation*/
/*LOader Animations*/
.anim-1 .ball12 {
	-moz-animation: anim-1-1 0.9s ease-in-out forwards;
	-o-animation: anim-1-1 0.9s ease-in-out forwards;
	-webkit-animation: anim-1-1 0.9s ease-in-out forwards;
	animation: anim-1-1 0.9s ease-in-out forwards;
}

.anim-1 .ball16 {
	-moz-animation: anim-1-2 0.3s ease-in-out forwards;
	-o-animation: anim-1-2 0.3s ease-in-out forwards;
	-webkit-animation: anim-1-2 0.3s ease-in-out forwards;
	animation: anim-1-2 0.3s ease-in-out forwards;
}

.anim-1 .ball15 {
	-moz-animation: anim-1-3 0.6s ease-in-out forwards;
	-o-animation: anim-1-3 0.6s ease-in-out forwards;
	-webkit-animation: anim-1-3 0.6s ease-in-out forwards;
	animation: anim-1-3 0.6s ease-in-out forwards;
}

@keyframes anim-1-1 {
	0% {
		left: 0;
		bottom: 0;
	}

	25% {
		left: -25px;
		bottom: 0;
	}

	75% {
		left: -25px;
		bottom: 0;
	}

	100% {
		left: -25px;
		bottom: -25px;
	}
}

@keyframes anim-1-2 {
	0% {
		top: 0;
	}

	50% {
		top: 0;
	}

	100% {
		top: -25px;
	}
}

@keyframes anim-1-3 {
	0% {
		right: 0;
	}

	66.66% {
		right: 0;
	}

	100% {
		right: -25px;
	}
}

.anim-2 .ball10 {
	-moz-animation: anim-2-1 0.9s ease-in-out forwards;
	-o-animation: anim-2-1 0.9s ease-in-out forwards;
	-webkit-animation: anim-2-1 0.9s ease-in-out forwards;
	animation: anim-2-1 0.9s ease-in-out forwards;
}

.anim-2 .ball14 {
	-moz-animation: anim-2-2 0.3s ease-in-out forwards;
	-o-animation: anim-2-2 0.3s ease-in-out forwards;
	-webkit-animation: anim-2-2 0.3s ease-in-out forwards;
	animation: anim-2-2 0.3s ease-in-out forwards;
}

.anim-2 .ball15 {
	-moz-animation: anim-2-3 0.6s ease-in-out forwards;
	-o-animation: anim-2-3 0.6s ease-in-out forwards;
	-webkit-animation: anim-2-3 0.6s ease-in-out forwards;
	animation: anim-2-3 0.6s ease-in-out forwards;
}

@keyframes anim-2-1 {
	0% {
		right: 0;
		bottom: 0;
	}

	25% {
		right: -25px;
		bottom: 0;
	}

	75% {
		right: -25px;
		bottom: 0;
	}

	100% {
		right: -25px;
		bottom: -25px;
	}
}

@keyframes anim-2-2 {
	0% {
		top: 0;
	}

	50% {
		top: 0;
	}

	100% {
		top: -25px;
	}
}

@keyframes anim-2-3 {
	0% {
		left: 0;
	}

	66.66% {
		left: 0;
	}

	100% {
		left: -25px;
	}
}

.anim-3 .ball15 {
	-moz-animation: anim-3-1 0.9s ease-in-out forwards;
	-o-animation: anim-3-1 0.9s ease-in-out forwards;
	-webkit-animation: anim-3-1 0.9s ease-in-out forwards;
	animation: anim-3-1 0.9s ease-in-out forwards;
}

.anim-3 .ball14 {
	-moz-animation: anim-3-2 0.3s ease-in-out forwards;
	-o-animation: anim-3-2 0.3s ease-in-out forwards;
	-webkit-animation: anim-3-2 0.3s ease-in-out forwards;
	animation: anim-3-2 0.3s ease-in-out forwards;
}

.anim-3 .ball10 {
	-moz-animation: anim-3-3 0.6s ease-in-out forwards;
	-o-animation: anim-3-3 0.6s ease-in-out forwards;
	-webkit-animation: anim-3-3 0.6s ease-in-out forwards;
	animation: anim-3-3 0.6s ease-in-out forwards;
}

@keyframes anim-3-1 {
	0% {
		top: 0;
		left: 0;
	}

	25% {
		top: -25px;
		left: 0;
	}

	75% {
		top: -25px;
		left: 0;
	}

	100% {
		top: -25px;
		left: -25px;
	}
}

@keyframes anim-3-2 {
	0% {
		right: 0;
	}

	50% {
		right: 0;
	}

	100% {
		right: -25px;
	}
}

@keyframes anim-3-3 {
	0% {
		bottom: 0;
	}

	66.66% {
		bottom: 0;
	}

	100% {
		bottom: -25px;
	}
}

.anim-4 .ball15 {
	-moz-animation: anim-4-1 0.9s ease-in-out forwards;
	-o-animation: anim-4-1 0.9s ease-in-out forwards;
	-webkit-animation: anim-4-1 0.9s ease-in-out forwards;
	animation: anim-4-1 0.9s ease-in-out forwards;
}

.anim-4 .ball16 {
	-moz-animation: anim-4-2 0.3s ease-in-out forwards;
	-o-animation: anim-4-2 0.3s ease-in-out forwards;
	-webkit-animation: anim-4-2 0.3s ease-in-out forwards;
	animation: anim-4-2 0.3s ease-in-out forwards;
}

.anim-4 .ball12 {
	-moz-animation: anim-4-3 0.6s ease-in-out forwards;
	-o-animation: anim-4-3 0.6s ease-in-out forwards;
	-webkit-animation: anim-4-3 0.6s ease-in-out forwards;
	animation: anim-4-3 0.6s ease-in-out forwards;
}

@keyframes anim-4-1 {
	0% {
		top: 0;
		right: 0;
	}

	25% {
		top: -25px;
		right: 0;
	}

	75% {
		top: -25px;
		right: 0;
	}

	100% {
		top: -25px;
		right: -25px;
	}
}

@keyframes anim-4-2 {
	0% {
		left: 0;
	}

	50% {
		left: 0;
	}

	100% {
		left: -25px;
	}
}

@keyframes anim-4-3 {
	0% {
		bottom: 0;
	}

	66.66% {
		bottom: 0;
	}

	100% {
		bottom: -25px;
	}
}

.anim-5 .ball10 {
	-moz-animation: anim-5-1 0.9s ease-in-out forwards;
	-o-animation: anim-5-1 0.9s ease-in-out forwards;
	-webkit-animation: anim-5-1 0.9s ease-in-out forwards;
	animation: anim-5-1 0.9s ease-in-out forwards;
}

.anim-5 .ball9 {
	-moz-animation: anim-5-2 0.3s ease-in-out forwards;
	-o-animation: anim-5-2 0.3s ease-in-out forwards;
	-webkit-animation: anim-5-2 0.3s ease-in-out forwards;
	animation: anim-5-2 0.3s ease-in-out forwards;
}

.anim-5 .ball13 {
	-moz-animation: anim-5-3 0.3s ease-in-out forwards;
	-o-animation: anim-5-3 0.3s ease-in-out forwards;
	-webkit-animation: anim-5-3 0.3s ease-in-out forwards;
	animation: anim-5-3 0.3s ease-in-out forwards;
}

.anim-5 .ball14 {
	-moz-animation: anim-5-4 0.9s ease-in-out forwards;
	-o-animation: anim-5-4 0.9s ease-in-out forwards;
	-webkit-animation: anim-5-4 0.9s ease-in-out forwards;
	animation: anim-5-4 0.9s ease-in-out forwards;
}

.anim-5 .ball15 {
	-moz-animation: anim-5-5 0.9s ease-in-out forwards;
	-o-animation: anim-5-5 0.9s ease-in-out forwards;
	-webkit-animation: anim-5-5 0.9s ease-in-out forwards;
	animation: anim-5-5 0.9s ease-in-out forwards;
}

@keyframes anim-5-1 {
	0% {
		right: 0;
		bottom: 0;
	}

	16.66% {
		right: -25px;
		bottom: 0;
	}

	49.98% {
		right: -25px;
		bottom: 0;
	}

	66.64% {
		right: -25px;
		bottom: 0;
	}

	83.3% {
		right: -25px;
		bottom: 0;
	}

	100% {
		right: -25px;
		bottom: -25px;
	}
}

@keyframes anim-5-2 {
	0% {
		right: 0;
	}

	50% {
		right: 0;
	}

	100% {
		right: -25px;
	}
}

@keyframes anim-5-3 {
	0% {
		top: 0;
	}

	66.66% {
		top: 0;
	}

	100% {
		top: -25px;
	}
}

@keyframes anim-5-4 {
	0% {
		left: 0;
		top: 0;
	}

	20% {
		left: 0;
		top: 0;
	}

	40% {
		left: 0;
		top: 0;
	}

	60% {
		left: -25px;
		top: 0;
	}

	80% {
		left: -25px;
		top: 0;
	}

	100% {
		left: -25px;
		top: 0;
	}
}

@keyframes anim-5-5 {
	0% {
		left: 0;
		top: 0;
	}

	16.66% {
		left: 0;
		top: 0;
	}

	49.98% {
		left: 0;
		top: 0;
	}

	66.64% {
		left: 0;
		top: 0;
	}

	83.3% {
		left: -25px;
		top: 0;
	}

	100% {
		left: -25px;
		top: 0;
	}
}