/**
* Home
* NextLevel Logo Animation
*/

/* light & dark mode colors */
:root, :root[data-theme="light"] {
	--main-color-dark-rgba0: rgba(0,0,0,0);
	--main-color-dark-rgba1: rgba(0,0,0,1);
}
:root[data-theme="dark"] {
	--main-color-dark-rgba0: rgba(240,240,240,0);
	--main-color-dark-rgba1: rgba(240,240,240,1);
}

/* change background-color on lightmode */
.parallaxParent {
	background-color: var(--main-bg-light);
}
:root[data-theme="dark"] .parallaxParent {
	background-color: transparent;
}

/* hide background image */
#headerimageSet, #headerimageParallax {
	opacity: 0 !important; 
	opacity: 0 !important;
}



/* svg animation */
/* pixel resolution - scaling in JS */
#htllogo_nextlevel_wrapper {
	box-sizing: border-box;
	position: absolute;
	top: 40%;
	left: 0%;
	transform-origin: 0 0;
	opacity: 0;
	transition: opacity 1s;
}
@media (max-width: 767.98px) {
	#htllogo_nextlevel_wrapper {
		top: 55%;
	}
}
#htllogo_nextlevel_animate {
	width: 720px;
	height: 180px;
	position: relative;
	left: 50%;
	transform: translateX(-25%);
	color: var(--main-color-dark-rgba1);
}
#htllogo_nextlevel_animate g {
	transform: translate(25px,15px);
}
#htllogo_nextlevel_animate g .cls-1{
	transform: translate(0px,0px);
}
#htllogo_nextlevel_animate g .cls-2{
	transform: translate(0px,0px);
}
#htllogo_nextlevel_animate g .cls-3{
	transform: translate(0px,0px);
}
#htllogo_nextlevel_animate g .cls-4{
	transform: translate(0px,0px);
}
#htllogo_nextlevel_animate text:nth-of-type(1) {
	font-family: sans-serif;
	letter-spacing: 5px;
	stroke: var(--main-color-dark-rgba1);
	font-size: 80px;
	font-weight: 700;
	stroke-width: 0;
	fill: var(--main-color-dark-rgba1);
}
#htllogo_nextlevel_animate text:nth-of-type(2) {
	font-family: sans-serif;
	letter-spacing: 5px;
	stroke: var(--main-color-dark-rgba1);
	font-size: 44px;
	font-weight: 700;
	stroke-width: 0;
	fill: var(--main-color-dark-rgba1);
}


@keyframes iconAnimate_s4 {
	0% {
		opacity: 0;
		transform: translate(-15px,-15px);
	}
	35% {
		opacity: 0;
	}
	40% {
		transform: translate(-15px,-15px);
	}
	100% {
		opacity: 1;
		transform: translate(0px,0px);
	}
}
@keyframes iconAnimate_s2 {
	0% {
		opacity: 0;
		transform: translate(-10px,-10px);
	}
	35% {
		opacity: 0;
	}
	40% {
		transform: translate(-10px,-10px);
	}
	100% {
		opacity: 1;
		transform: translate(0px,0px);
	}
}
@keyframes iconAnimate_s1 {
	0% {
		opacity: 0;
		transform: translate(-10px,10px);
	}
	35% {
		opacity: 0;
	}
	40% {
		transform: translate(-10px,10px);
	}
	100% {
		opacity: 1;
		transform: translate(0px,0px);
	}
}
@keyframes iconAnimate_s3 {
	0% {
		opacity: 0;
		transform: translate(-15px,15px);
	}
	35% {
		opacity: 0;
	}
	40% {
		transform: translate(-15px,15px);
	}
	100% {
		opacity: 1;
		transform: translate(0px,0px);
	}
}
@keyframes textAnimate1 {
	0% {
		stroke-width: 4px;
		stroke-dasharray: 0 250px;
		stroke-dashoffset: 100px;
		fill: var(--main-color-dark-rgba0);
	}
	100% {
		stroke-width: 0;
		stroke-dasharray: 250px 0;
		stroke-dashoffset: 0px;
		fill: var(--main-color-dark-rgba1);
	}
}
@keyframes textAnimate2 {
	0% {
		stroke-width: 4px;
		stroke-dasharray: 0 250px;
		stroke-dashoffset:  10px;
		fill: var(--main-color-dark-rgba0);
	}
	30% {
		stroke-width: 4px;
		stroke-dasharray: 0 250px;
		stroke-dashoffset: 20%;
	}
	40% {
		fill: var(--main-color-dark-rgba0);
	}
	100% {
		stroke-width: 0;
		stroke-dasharray: 250px 0;
		stroke-dashoffset: 0px;
		fill: var(--main-color-dark-rgba1);
	}
}



/* hide main logo during animation */
@media (max-width: 767.98px) {
	.custom-logo-link, .custom-logo-link-darkmode {
		opacity: 0;
	}
}