/* 
---------------------------------------------
preloader
--------------------------------------------- 
*/

.js-preloader {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #fff;
	display: -webkit-box;
	display: flex;
	-webkit-box-align: center;
	align-items: center;
	-webkit-box-pack: center;
	justify-content: center;
	opacity: 1;
	visibility: visible;
	z-index: 9999;
	-webkit-transition: opacity 3.25s ease;
	/* transition: opacity 3.25s ease; */
	transition: opacity .5s ease-out, visibility 0s linear .5s;
}

.js-preloader.loaded {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	/* transition: opacity 1s ease-in-out; */
	transition: opacity .5s ease-out, visibility 0s linear .5s;
  z-index: 99999;
}

@-webkit-keyframes dot {
	50% {
			-webkit-transform: translateX(96px);
			transform: translateX(96px);
	}
}

@keyframes dot {
	50% {
			-webkit-transform: translateX(96px);
			transform: translateX(96px);
	}
}

@-webkit-keyframes dots {
	50% {
			-webkit-transform: translateX(-31px);
			transform: translateX(-31px);
	}
}

@keyframes dots {
	50% {
			-webkit-transform: translateX(-31px);
			transform: translateX(-31px);
	}
}

.preloader-inner {
	position: relative;
	width: 142px;
	height: 40px;
	background: #fff;
}

.preloader-inner .dot {
	position: absolute;
	width: 16px;
	height: 16px;
	top: 12px;
	left: 15px;
	background: var(--color-custom-green-ori);
	border-radius: 50%;
	-webkit-transform: translateX(0);
	transform: translateX(0);
	-webkit-animation: dot 2.8s infinite;
	animation: dot 2.8s infinite;
}

.preloader-inner .dots {
	-webkit-transform: translateX(0);
	transform: translateX(0);
	margin-top: 12px;
	margin-left: 31px;
	-webkit-animation: dots 2.8s infinite;
	animation: dots 2.8s infinite;
}

.preloader-inner .dots span {
	display: block;
	float: left;
	width: 16px;
	height: 16px;
	margin-left: 16px;
	background: var(--color-custom-green-ori);
	border-radius: 50%;
}