.pixNav {
	padding-top: 80px !important;
}

#middle .Home .pixNav { --num-cols: 3; --gap-width: 40px; padding-top: 80px !important; }

.pixNav.fixwidth .item { box-shadow: 12px 21px 18px rgba(0, 0, 0, .6); }

#middle > .main > .LoStage { margin-top: 0px; }
.Home .BackgroundCarrier { border-top: none;}
.Home .BackgroundCarrier > .LoStage { margin-top: 0px; }

/* .pixNav.fixwidth .item, .pixNav.fixwidth .item img { border-radius: 0px; } */

.pixNav.fixwidth .item .text {
	border-bottom: 10px solid var(--logo-color-1-dark);
	top: -1px;
	left: -1px;
	width: 101%;
	bottom: inherit;
	background: linear-gradient(90deg, var(--logo-color-1-dark) 0%, var(--logo-color-1) 100%);
	clip-path: polygon(100% 0%,100% 50%,0% 80%,0% 0%);
	min-height: 230px;
	padding: 0px;
}

.pixNav.fixwidth .item .text p {
	position: relative;
  left: initial;
  margin-top: 0;
  opacity: 1;
	color: var(--font-color-light);
	font-size: 14px;
	line-height: 140%;
	transform: translateY(1rem);
	transition: all 600ms;
	padding: 0px 5px;
}

.pixNav.fixwidth .item .text .titel {
	font-weight: 700;
	font-size: 30px;
	line-height: 100%;
	margin-bottom: 10px;
	color: var(--font-color-light);
	transform: translateY(1rem);
	transition: all 600ms;
}

.pixNav.fixwidth .item:hover .text { clip-path: polygon(100% 0%,100% 40%,0% 40%,0% 0%); }

.pixNav.fixwidth .item:hover img { transform: scale(1.05, 1.05); filter: saturate(1.1) contrast(1.2); }

.pixNav.fixwidth .item:hover .text p { opacity: 0%; transform: translateY(-2rem); transition: all 600ms; }

.pixNav.fixwidth .item:hover .text .titel { transform: translateY(1rem); transition: all 600ms; }


@media all and (max-width: 1500px) { .pixNav { --num-cols: 4 !important; } }
@media all and (max-width: 1200px) { .pixNav { --num-cols: 3 !important; } }
@media all and (max-width: 1000px) { .pixNav { --num-cols: 2 !important; } }
@media all and (max-width: 500px) { .pixNav { --num-cols: 1 !important; } }

/* special background animation pixNav in home */

.pixNav.fixwidth { 
	--top-margin: -50px;
	margin: auto calc((-100vw + 100%) / 2);
	padding: 1rem calc((100vw - 100%) / 2);
	margin-top: var(--top-margin);
	position: relative;
	overflow: clip;
}
.pixNav.fixwidth { background: initial; border: initial; }

.pixNav:before, .pixNav:after {
  content: "";
  animation:slide 3s ease-in-out infinite alternate;
  background-image: linear-gradient(-60deg, var(--logo-color-1-dark) 50%, var(--logo-color-2) 50%);
  bottom:0;
  left:-50%;
  opacity:.5;
  position: absolute;
  right:-50%;
  top:0;
  z-index:-1;
}
.pixNav:after {
	animation-direction: alternate-reverse;
	animation-duration:4s;
}
@keyframes slide {
  0% {
    transform:translateX(-25%);
  }
  100% {
    transform:translateX(25%);
  }
}