/* ============================================================================================
	SPLASH SCREEN / PATTERN
============================================================================================ */
.hhobar-splash-screen {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100lvh;
	z-index: 99999;
	overflow: hidden;
	pointer-events: none;
	animation:
		splash-screen-slide 1.7s cubic-bezier(.92, 0, .07, 1) 2s forwards,
		splash-screen-fade 0.7s cubic-bezier(0, 0, .58, 1) 3.3s forwards;
}

/* logo */
.hhobar-splash-screen-logo img,
.progress {
	width: 30vw;
    min-width: 220px;
    max-width: 300px !important
}
.hhobar-splash-screen-logo  {
    margin: 0 0 80px
}

/* progress bar */
@keyframes progress{100%{width:100%}}
.progress {
	position: relative;
	display: flex;
	align-items: center;
	height: 1px;
	justify-content: flex-start;
	border-radius: 100px;
}
.progress-value {
	border-radius: 100px;
	background: rgb(51,51,51);
	height: 1px;
	width: 0;
	animation: progress 2.6s normal forwards;
}

/* splash screen exit (after progress bar) */
@keyframes splash-screen-slide {
	from { transform: translateX(0); }
	to { transform: translateX(100%); }
}
@keyframes splash-screen-fade {
	0%, 99% { visibility: visible; }
	100% { opacity: 0; visibility: hidden; }
}