/**************************************
 ** - 02 - Preloader Section CSS
 **************************************/
.preloader {
	position: fixed;
	z-index: 99999;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: transparent;
}

.preloader .loader {
	position: absolute;
	top: 43%;
	left: 0;
	right: 0;
	-webkit-transform: translateY(-43%);
	transform: translateY(-43%);
	text-align: center;
	width: 400px;
	height: 400px;
	margin: 0 auto;
	-webkit-transition: 0.4s;
	transition: 0.4s;
}

.preloader .loader .box {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 3px;
	/* background-color: #ffffff; */
	/* background-image: url(../img/1001.gif); */
	/* -webkit-animation: animate .5s linear infinite;
	animation: animate .5s linear infinite; */
}

.preloader .preloaderTilte {
	color: #333;
	position: absolute;
	bottom: 30px;
	text-align: center;
	width: 100%;
	font-weight: 700;

}

.dot-ani {
	display: inline-block;
	height: 12px;
	line-height: 12px;
	overflow: hidden;
}

.dot-ani::after {
	width: 50px;
	text-align: left;
	display: inline-table;
	white-space: pre;
	content: "\A . \A . . \A . . .";
	animation: spin 2s steps(4) infinite;
}

@keyframes spin {
	to {
		-webkit-transform: translateY(-48px);
		transform: translateY(-48px)
	}
}

.preloader .loader .shadow {
	position: absolute;
	top: 59px;
	left: 0;
	width: 100%;
	height: 5px;
	opacity: 0.1;
	border-radius: 50%;
	background-color: #000000;
	-webkit-animation: shadow .5s linear infinite;
	animation: shadow .5s linear infinite;
}

.preloader::before,
.preloader::after {
	content: '';
	position: absolute;
	z-index: -1;
	left: 0;
	top: 0;
	width: 60%;
	height: 100%;
	background-color: #fff;
	/* background-color:  rgba(0, 37, 97, 1); */
	-webkit-transition: .9s;
	transition: .9s;
}

.preloader::after {
	left: auto;
	right: 0;
}

.preloader.preloader-deactivate {
	visibility: hidden;
}

.preloader.preloader-deactivate::after,
.preloader.preloader-deactivate::before {
	width: 0;
}

.preloader.preloader-deactivate .loader {
	opacity: 0;
	visibility: hidden;
}

@-webkit-keyframes loader {
	0% {
		left: -100px;
	}

	100% {
		left: 110%;
	}
}

@keyframes loader {
	0% {
		left: -100px;
	}

	100% {
		left: 110%;
	}
}

@-webkit-keyframes animate {
	17% {
		border-bottom-right-radius: 3px;
	}

	25% {
		-webkit-transform: translateY(9px) rotate(22.5deg);
		transform: translateY(9px) rotate(22.5deg);
	}

	50% {
		-webkit-transform: translateY(18px) scale(1, 0.9) rotate(45deg);
		transform: translateY(18px) scale(1, 0.9) rotate(45deg);
		border-bottom-right-radius: 40px;
	}

	75% {
		-webkit-transform: translateY(9px) rotate(67.5deg);
		transform: translateY(9px) rotate(67.5deg);
	}

	100% {
		-webkit-transform: translateY(0) rotate(90deg);
		transform: translateY(0) rotate(90deg);
	}
}

@keyframes animate {
	17% {
		border-bottom-right-radius: 3px;
	}

	25% {
		-webkit-transform: translateY(9px) rotate(22.5deg);
		transform: translateY(9px) rotate(22.5deg);
	}

	50% {
		-webkit-transform: translateY(18px) scale(1, 0.9) rotate(45deg);
		transform: translateY(18px) scale(1, 0.9) rotate(45deg);
		border-bottom-right-radius: 40px;
	}

	75% {
		-webkit-transform: translateY(9px) rotate(67.5deg);
		transform: translateY(9px) rotate(67.5deg);
	}

	100% {
		-webkit-transform: translateY(0) rotate(90deg);
		transform: translateY(0) rotate(90deg);
	}
}

@-webkit-keyframes shadow {
	50% {
		-webkit-transform: scale(1.2, 1);
		transform: scale(1.2, 1);
	}
}

@keyframes shadow {
	50% {
		-webkit-transform: scale(1.2, 1);
		transform: scale(1.2, 1);
	}
}

.about-btn-box {
	display: inline-block;
}

.default-btn {
	color: #ffffff;
	font-size: 14px;
	/* font-weight: 500; */
	display: inline-block;
	border-radius: 30px;
	text-transform: capitalize;
	-webkit-transition: 0.5s;
	transition: 0.5s;
	cursor: pointer;

	opacity: 1;
	border-radius: 3px;

	text-align: center;
}

.default-btn:hover {
	background-color: #3e57d0;
}

.default-btn {
	position: relative;
	z-index: 1;
	color: #ffffff;
	font-weight: 600;
	display: inline-block;
	text-align: center;
	overflow: hidden;
	border: none;
	-webkit-transition: 0.4s;
	transition: 0.4s;
	opacity: 1;
	border-radius: 3px;

	text-align: center;
}

.default-btn span {
	position: absolute;
	z-index: -1;
	width: 0;
	height: 0;
	display: block;
	border-radius: 30px;
	background-color: #3e57d0;
	-webkit-transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
	transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.default-btn:hover,
.default-btn:focus {
	color: #ffffff;
}

.default-btn:hover span,
.default-btn:focus span {
	width: 225%;
	height: 562.5px;
}

/* 动画 */
.wow {
	/* transition: all 3s; */
	/* 初始透明度设为0 */
	animation: fadeIn ease-in 1;
	/* 使用fadeIn的动画函数，并只执行一次 */
	animation-fill-mode: forwards;
	/* 动画执行结束后，保持最终状态 */
	animation-duration: 1s;
	/* 动画执行时间设定为1秒 */
	opacity: 0;

}

@keyframes fadeIn {
	0% {
		transform: translateY(30px);
		opacity: 0;
	}

	100% {
		transform: translateY(0px);
		opacity: 1;
	}
}

.wow1 {
	/* transition: all 3s; */
	/* 初始透明度设为0 */
	animation: fadeIn1 ease-in 1;
	/* 使用fadeIn的动画函数，并只执行一次 */
	animation-fill-mode: forwards;
	/* 动画执行结束后，保持最终状态 */
	animation-duration: 1s;
	/* 动画执行时间设定为1秒 */
	opacity: 0;

}

@keyframes fadeIn1 {
	0% {
		transform: translateY(300px);
		opacity: 0;
	}

	100% {
		transform: translateY(0px);
		opacity: 1;
	}
}