.tpl-th-line-widget {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.tpl-th-line-widget__line {
	display: block;
	background-color: var(--tpl-th-line-color, #161616);
	transition: box-shadow 0.35s ease, transform 0.35s ease;
}

.tpl-th-line-widget__line--horizontal {
	width: 100%;
	height: var(--tpl-th-line-thickness, 2px);
}

.tpl-th-line-widget__line--vertical {
	width: var(--tpl-th-line-thickness, 2px);
	height: 100%;
}

.tpl-th-line-widget__line.is-animated {
	animation: tpl-th-line-pulse var(--tpl-th-duration, 2s) infinite;
}

@keyframes tpl-th-line-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2);
		transform: translate(0, 0);
	}
	50% {
		box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25);
		transform: translate(var(--tpl-th-horizontal-shift, 10px), var(--tpl-th-vertical-shift, 0));
	}
	100% {
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2);
		transform: translate(0, 0);
	}
}

.tpl-th-deco-lines {
	position: relative;
	width: 100%;
	min-height: var(--tpl-th-deco-min-height, 100vh);
	z-index: 0;
}

.tpl-th-deco-lines::before,
.tpl-th-deco-lines::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	margin-right: auto;
	margin-left: auto;
	pointer-events: none;
	z-index: -1;
	width: 1px;
	background: repeating-linear-gradient(
		0deg,
		var(--tpl-th-deco-line-color, #ff5f1d),
		transparent 25vh,
		transparent 320vh
	);
	background-size: 100% 250%;
	box-shadow: 0 0 20px -16px rgba(0, 0, 0, 0.2);
}


.tpl-th-deco-lines[data-tpl-th-hidden="true"] {
	display: none !important;
}

.tpl-th-deco-lines::after {
	left: min(95%, calc(1440px - 1px));
	animation: tpl-th-deco-move var(--tpl-th-deco-primary-duration, 28s) linear infinite;
}

.tpl-th-deco-lines::before {
	right: min(95%, calc(1440px - 1px));
	left: 0;
	background-size: 100% 230%;
	animation: tpl-th-deco-move var(--tpl-th-deco-secondary-duration, 35.5s) linear infinite var(--tpl-th-deco-secondary-delay, 1s);
}

@keyframes tpl-th-deco-move {
	0% {
		background-position: 0 100%;
	}
	100% {
		background-position: 0 0;
	}
}

.tpl-th-flow-lines {
	position: relative;
	width: var(--tpl-th-flow-width, 90vw);
	height: var(--tpl-th-flow-height, 100%);
	margin: 0 auto;
	overflow: hidden;
	background-color: var(--tpl-th-flow-background, transparent);
}




@media (max-width: 1400px) {
    
    .tpl-th-flow-lines,.tpl-th-flow-lines{
        display: none !important;
    } 

}



.tpl-th-flow-lines[data-tpl-th-hidden="true"] {
	display: none !important;
}

.tpl-th-flow-lines__line {
	position: absolute;
	background-color: rgba(var(--tpl-th-flow-line-rgb, 255, 255, 255), var(--tpl-th-flow-line-opacity, 0.1));
}

.tpl-th-flow-lines__line::after {
	content: "";
	display: block;
	position: absolute;
	animation-duration: var(--tpl-th-flow-duration, 7s);
	animation-delay: var(--tpl-th-flow-delay, 0s);
	animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);
	animation-iteration-count: infinite;
	animation-fill-mode: forwards;
}

.tpl-th-flow-lines--vertical .tpl-th-flow-lines__line {
	top: 0;
	left: calc(50% + var(--tpl-th-flow-offset, 0%));
	height: 100%;
	width: var(--tpl-th-flow-line-width, 2px);
	transform: translateX(-50%);
}

.tpl-th-flow-lines--vertical .tpl-th-flow-lines__line::after {
	top: -50%;
	left: 0;
	width: 100%;
	height: var(--tpl-th-flow-trail, 15vh);
	background: linear-gradient(
		to bottom,
		rgba(var(--tpl-th-flow-gradient-rgb, 255, 255, 255), 0) 0%,
		rgb(var(--tpl-th-flow-gradient-rgb, 255, 255, 255)) 75%,
		rgb(var(--tpl-th-flow-gradient-rgb, 255, 255, 255)) 100%
	);
	animation-name: tpl-th-flow-drop;
}

.tpl-th-flow-lines--horizontal .tpl-th-flow-lines__line {
	left: 0;
	top: calc(50% + var(--tpl-th-flow-offset, 0%));
	width: 100%;
	height: var(--tpl-th-flow-line-width, 2px);
	transform: translateY(-50%);
}

.tpl-th-flow-lines--horizontal .tpl-th-flow-lines__line::after {
	left: -50%;
	top: 0;
	height: 100%;
	width: var(--tpl-th-flow-trail, 15vw);
	background: linear-gradient(
		to right,
		rgba(var(--tpl-th-flow-gradient-rgb, 255, 255, 255), 0) 0%,
		rgb(var(--tpl-th-flow-gradient-rgb, 255, 255, 255)) 75%,
		rgb(var(--tpl-th-flow-gradient-rgb, 255, 255, 255)) 100%
	);
	animation-name: tpl-th-flow-slide;
}

@keyframes tpl-th-flow-drop {
	0% {
		top: -50%;
	}
	100% {
		top: 110%;
	}
}

@keyframes tpl-th-flow-slide {
	0% {
		left: -50%;
	}
	100% {
		left: 110%;
	}
}
