.skip-btn{
		display : flex;
		justify-content : space-between;
		align-items : center;
		padding-bottom : 5px;
		width : 40vw;
		position : absolute;
		/* bottom : 92px; */
		bottom : 5vh;
		right : 5vw;
		/* font-family : trajan-pro-3; */
		font-size : 14px;
		color : #0d2144;
		border-bottom : 1px solid #0d2144;
		z-index : 100;
		animation : invert2 2s both;
		animation-delay: 5s;
		background : none;
		border : none;
		border-bottom : 1px solid #0d2144;
	}
	@keyframes invert2{
		0%{
			
		}
		100%{
			border-color : #fff;
			color : #fff;
		}
	}
	.turn-check{
		display : flex;
		align-items : center;
		justify-content : center;
		width : 30px;
		height : 30px;
		position : relative;
	}
	.turn-check > .rect{
		position : absolute;
		width : 100%;
		height : 100%;
		background : #0d2144;
		animation : turn-check 4.5s infinite ease-in-out;
	}
	@keyframes turn-check{
		0%{
			transform : rotate(0);
			border-radius : 0;
		}
		25%{
			transform : rotate(180deg);
			border-radius : 50%;
		}
		50%{
			transform : rotate(180deg);
			border-radius : 50%;
		}
		75%{
			transform : rotate(360deg);
			border-radius : 0;
		}
		100%{
			transform : rotate(360deg);
			border-radius : 0;
		}
	}
	.turn-check > img{
		position : absolute;
		width : 50%;
	}


.intro{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width : 100vw;
	height : 100vh;
	overflow: hidden;
	position : relative;
	position : fixed;
	z-index : 10000;
	left : 0;
	top : 0;
}
.svg-wrap{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width : 100vw;
	height : 100vh;
	overflow: hidden;
	position : relative;
	animation : invert 2s both;
	animation-delay: 5s;
	transform: scale(.4);
}
@media (max-width : 991px){
	.svg-wrap{
		transform: scale(1.2);
	}
}
@keyframes invert {
	0%{
		filter: invert(0);
	}
	100%{
		filter: invert(1) grayscale(1) brightness(5);
	}
}
.svg-box.logo{ 
	width : 17vw;
	position : absolute;
	transform: translateY(-30%);
}
.svg-box.logo > svg{
	width : 100%;
	stroke-width: 100px;
} 
.title-box{
	display: flex;
	justify-content: center;
	position : relative;
	transform: translateY(250%);
}

.svg-box.honorsville{
	width : 30vw;
	top : 0;
}
.svg-box.signature{
	width : 19vw;
	position : absolute;
	opacity: 0;
	top : 0;
	animation : intro-signature 1.5s both ease-in-out;
	animation-delay: .5s;
}
@keyframes intro-signature {
	0%{
		opacity: 0;
		top : calc(250%);
	}
	100%{
		opacity: 1;
		top : calc(100%);
	}
}
.cls-1{
	fill : none;
	stroke : #0d2144;
	stroke-width : 55px;
	animation : svg-ani1 3s both;
	animation-delay: 2s;
}
.cls-2{
	fill : none;
	stroke : #0d2144;
	stroke-width : 55px;
	animation : svg-ani2 2.5s both;
	animation-delay: 2.5s;
}
/* .cls-3{
	fill : none;
	stroke : #0d2144;
	stroke-width : 55px;
	animation : svg-ani3 1s both;
	animation-delay: 3s;
} */
@keyframes svg-ani1 {
	0%{
		stroke-dasharray: 0 230%;
	}
	100%{
		stroke-dasharray: 230% 0;
	}
}
@keyframes svg-ani2 {
	0%{
		stroke-dasharray: 0 120%;
	}
	100%{
		stroke-dasharray: 100% 0;
	}
}
@keyframes svg-ani3 {
	0%{
		stroke-dasharray: 0 50%;
	}
	100%{
		stroke-dasharray: 50% 0;
	}
}
.intro-bg{
	/* display : none; */
	position : absolute;
	left : 0;
	top : 0;
	width : 100%;
	height : 100%;
	/* background: #0d2144; */
	background : #fff;
	
	animation : intro-text 2s both;
	animation-delay : 3s;
	/* animation : intro-bg 2s both; */
	/* animation-delay : 6s; */
	z-index : -1;
}
@keyframes intro-text{
	0%{
		/* mix-blend-mode : normal; */
	}
	100%{
		/* mix-blend-mode:color; */
	}
}
.intro-bg::after{
	position : absolute;
	left : 0;
	top : 0;
	z-index : 0;
	content : '';
	background : #0d2144;
	width : 100%;
	animation : intro-bg 2s both; 
	animation-delay : 4.5s; 
}
@keyframes intro-bg {
	0%{
		height : 0
	}
	100%{
		height : 100%;
	}
}