/*
Theme Name: 5ps Theme
Theme URI: https://5ps.drs-community.de/
Description: Theme created by DRS-Community
Author: Pelle
Author URI: https://drs-community.de/
Version: 1.0
Tags:

License: DRS Private License
License URI: https://drs-community.de
*/

/* ==== START of FONTS ==== */
	/* AlumniSans */
	@font-face {
		font-family: AlumniSans;
		src: url(fonts/AlumniSans/AlumniSans-Thin.ttf) format('truetype');
		font-weight: 100;
		font-style: normal;
	}
	@font-face {
		font-family: AlumniSans;
		src: url(fonts/AlumniSans/AlumniSans-ThinItalic.ttf) format('truetype');
		font-weight: 100;
		font-style: italic;
	}
	@font-face {
		font-family: AlumniSans;
		src: url(fonts/AlumniSans/AlumniSans-Light.ttf) format('truetype');
		font-weight: 200;
		font-style: normal;
	}
	@font-face {
		font-family: AlumniSans;
		src: url(fonts/AlumniSans/AlumniSans-LightItalic.ttf) format('truetype');
		font-weight: 200;
		font-style: italic;
	}
	@font-face {
		font-family: AlumniSans;
		src: url(fonts/AlumniSans/AlumniSans-Regular.ttf) format('truetype');
		font-weight: 300;
		font-style: normal;
	}
	@font-face {
		font-family: AlumniSans;
		src: url(fonts/AlumniSans/AlumniSans-Italic.ttf) format('truetype');
		font-weight: 300;
		font-style: italic;
	}
	@font-face {
		font-family: AlumniSans;
		src: url(fonts/AlumniSans/AlumniSans-Medium.ttf) format('truetype');
		font-weight: 400;
		font-style: normal;
	}
	@font-face {
		font-family: AlumniSans;
		src: url(fonts/AlumniSans/AlumniSans-MediumItalic.ttf) format('truetype');
		font-weight: 400;
		font-style: italic;
	}
	@font-face {
		font-family: AlumniSans;
		src: url(fonts/AlumniSans/AlumniSans-SemiBold.ttf) format('truetype');
		font-weight: 500;
		font-style: normal;
	}
	@font-face {
		font-family: AlumniSans;
		src: url(fonts/AlumniSans/AlumniSans-SemiBoldItalic.ttf) format('truetype');
		font-weight: 500;
		font-style: italic;
	}
	@font-face {
		font-family: AlumniSans;
		src: url(fonts/AlumniSans/AlumniSans-Bold.ttf) format('truetype');
		font-weight: 600;
		font-style: normal;
	}
	@font-face {
		font-family: AlumniSans;
		src: url(fonts/AlumniSans/AlumniSans-BoldItalic.ttf) format('truetype');
		font-weight: 600;
		font-style: italic;
	}
	@font-face {
		font-family: AlumniSans;
		src: url(fonts/AlumniSans/AlumniSans-ExtraBold.ttf) format('truetype');
		font-weight: 700;
		font-style: normal;
	}
	@font-face {
		font-family: AlumniSans;
		src: url(fonts/AlumniSans/AlumniSans-ExtraBoldItalic.ttf) format('truetype');
		font-weight: 700;
		font-style: italic;
	}
/* ==== END of FONTS ==== */

/* ==== START of MAIN ==== */
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		transition: 300ms ease;
	}
	html {
		overflow-x: hidden;
	}
	body { 
		font-family: AlumniSans, sans-serif;
		font-size: 25px;
	}
	a {
		text-decoration: none;
	}
	p {
		margin-bottom: 1.5vw;
		text-align: justify;
		z-index: 100;
		position: relative;
	}
	#wrapper {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		transition: filter 300ms ease-in-out;
	}
	#wrapper.blur {
		filter: blur(5px);
	}
	/* FONT-RULES */
	h1,h2,h3,h4,h5,h6 {
		font-family: AlumniSans, sans-serif;
		font-weight: 100;
		position: relative;
		z-index: 100;
	}
	h1 { font-size: 9vw; }
	h2 { font-size: 8vw; }
	h3 { font-size: 7vw; }
	h4 { font-size: 6vw; }
	h5 { font-size: 5vw; }
	h6 { font-size: 4vw; }
	h1 strong,h2 strong,h3 strong,h4 strong,h5 strong,h6 strong {
		font-family: AlumniSans;
		font-weight: 700;
	}
	section > .content > div {
		padding: 100px 0;
	}
/* ==== END of MAIN ==== */

/* ==== START of PRELOADER ==== */
	@keyframes preloaderStripesTop {
		0% { bottom: 100%; }
		100% { bottom: 0; }
	}
	@keyframes preloaderStripesBottom {
		0% { top: 100%; }
		100% { top: 0; }
	}
	@keyframes preloaderStripeColor {
		0% { background: #fff; }
		100% { background: #f00; }
	}
	@keyframes preloaderHide {
		0% { pointer-events: inherit; }
		100% { pointer-events: none; }
	}
	#preloader {
		z-index: 9999;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		animation: preloaderHide 1ms ease 8s forwards; /* remove if finished */
	}
	#preloader.hidden {
		display: none;
	}
	#preloader span {
		background: #fff;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 20%;
		height: 100%;
	}
	#preloader span:nth-child(2) { left:20%; }
	#preloader span:nth-child(3) { left:40%; }
	#preloader span:nth-child(4) { left:60%; }
	#preloader span:nth-child(5) { left:80%; }
	#preloader span:before {
		content: '';
		position: absolute;
		bottom: 100%;
		left: 100%;
		width: 1px;
		height: 100%;
		z-index: 1;
		background: #111;
	}
	#preloader span:nth-child(1):before { animation: preloaderStripesTop 3s ease 3s forwards; }
	#preloader span:nth-child(2):before { animation: preloaderStripesBottom 3s ease 4s forwards; }
	#preloader span:nth-child(3):before { animation: preloaderStripesTop 3s ease 3.5s forwards; }
	#preloader span:nth-child(4):before { animation: preloaderStripesBottom 3s ease 4.5s forwards; }
	#preloader span:nth-child(5):before { content: none; }
	#preloader span:after {
		content: '';
		position: absolute;
		bottom: 100%;
		left: 0;
		width: 100%;
		height: 100%;
		background: #111;
	}
	#preloader span:nth-child(1):after { animation: preloaderStripesTop 400ms ease 7s forwards, preloaderStripesTop 400ms ease 8s forwards reverse; }
	#preloader span:nth-child(2):after { animation: preloaderStripesBottom 400ms ease 7.12s forwards, preloaderStripesBottom 400ms ease 8.12s forwards reverse; }
	#preloader span:nth-child(3):after { animation: preloaderStripesTop 400ms ease 7.06s forwards, preloaderStripesTop 400ms ease 8.06s forwards reverse; }
	#preloader span:nth-child(4):after { animation: preloaderStripesBottom 400ms ease 7.24s forwards, preloaderStripesBottom 400ms ease 8.24s forwards reverse; }
	#preloader span:nth-child(5):after { animation: preloaderStripesTop 400ms ease 7.18s forwards, preloaderStripesTop 400ms ease 8.18s forwards reverse; }

	#preloader span:nth-child(1) { animation: preloaderStripeColor 1ms ease 8s forwards, preloaderStripesTop 450ms ease 8s forwards reverse; }
	#preloader span:nth-child(2) { animation: preloaderStripeColor 1ms ease 8s forwards, preloaderStripesBottom 450ms ease 8.12s forwards reverse; }
	#preloader span:nth-child(3) { animation: preloaderStripeColor 1ms ease 8s forwards, preloaderStripesTop 450ms ease 8.06s forwards reverse; }
	#preloader span:nth-child(4) { animation: preloaderStripeColor 1ms ease 8s forwards, preloaderStripesBottom 450ms ease 8.24s forwards reverse; }
	#preloader span:nth-child(5) { animation: preloaderStripeColor 1ms ease 8s forwards, preloaderStripesTop 450ms ease 8.18s forwards reverse; }
	/* LOGO ANIMATION */
	@keyframes headerSVGone {
		0% { stroke-dashoffset:1500px;stroke:#111; }
		75% { stroke-dashoffset:1090px;fill:#fff;stroke:#111; }
		85% {fill:#111;opacity:1;stroke:#111;clip-path: polygon(110% -10%, -10% -10%, -10% 110%, 110% 110%);}
		99% { opacity: 1; }
		100% { opacity:0;stroke:#111; clip-path: polygon(50% 50%, 0 0, 50% 50%, 120% 120%);}
	}
	@keyframes headerSVGshowhide {
		0% { opacity: 0;fill:#111; clip-path: polygon(50% 50%, 0 0, 50% 50%, 100% 100%); }
		1% { opacity: 1; }
		100% { opacity: 1;fill: #111; clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%); }
	}
	@keyframes headerSVGslide {
		0% { transform: translate(-10%,20%); }
		100% { transform: translate(0%,0%); }
	}
	@keyframes headerSVGslideps {
		0% { transform: translate(6%,-16%); opacity: 0; }
		50% { opacity: 0; }
		75% { opacity: 1; }
		100% { transform: translate(0%,0%); opacity: 1; }
	}
	@keyframes headerSVGslideplus {
		0% { transform: translate(10%,0%); opacity: 0; }
		50% { opacity: 1; }
		100% { transform: translate(0%,0%); opacity: 1; }
	}
	@keyframes headerSVGwhite {
		0% { fill: #111; }
		100% { fill: #fff; }
	}
	@keyframes headerSVGmove {
		0% { opacity: 1; }
		70% { opacity: 0; }
		100% { opacity: 0; }
	}
	#preloader svg > g:nth-child(1) {
		opacity: 0;
		animation: headerSVGslideplus 400ms ease 6.2s forwards;
	}
	#preloader svg > g:nth-child(1) path { fill: #111; }
	#preloader svg > g:nth-child(2) {
		opacity: 0;
		animation: headerSVGslideps 400ms ease 5.8s forwards;
	}
	svg > g:nth-child(2) path { fill: #f00; }
	#preloader svg > path:nth-child(3),
	#preloader svg > path:nth-child(4),
	#preloader svg > path:nth-child(5),
	#preloader svg > path:nth-child(6) {
		opacity: 0;
		fill: #fff;
		transform: translate(-10%,20%);
	}
	#preloader svg > path:nth-child(7) {
		fill: none;
		stroke: none;
		stroke-width: 5px;
		stroke-dasharray: 500px;
		stroke-dashoffset: 1090px;
		transform: translate(-10%,20%);
		animation: headerSVGone 3s ease 400ms forwards;
	}
	#preloader svg > path:nth-child(6) { animation: headerSVGshowhide 400ms ease 3.4s alternate 2; }
	#preloader svg > path:nth-child(5) { animation: headerSVGshowhide 350ms ease 4.2s alternate 2; }
	#preloader svg > path:nth-child(4) { animation: headerSVGshowhide 250ms ease 4.8s alternate 2; }
	#preloader svg > path:nth-child(3) { animation: headerSVGshowhide 200ms ease 5.2s forwards,
												headerSVGslide 400ms ease 5.8s forwards,
												headerSVGwhite 200ms ease 7.2s forwards; }
	#preloader svg > g:nth-child(1) path { animation: headerSVGwhite 200ms ease 7.2s forwards; }
	#preloader a.logo { animation: headerSVGmove 300ms ease 8.2s forwards; }
	#preloader .logo {
		z-index: 2;
		position: absolute;
		top: 50%;
		left: 50%;
		width: 10%;
		transform: translate(-50%,-50%);
	}
/* ==== END of PRELOADER ==== */

/* ==== START of HEADER ==== */
	header > .logo {
		z-index: 2;
		position: absolute;
		top: 7vw;
		left: 7vw;
		width: 8%;
	}
	header > .logo svg > g:nth-child(1) path,
	header > .logo svg > path:nth-child(3) { fill: #EEE; }
	header > .logo svg > path:nth-child(4),
	header > .logo svg > path:nth-child(5),
	header > .logo svg > path:nth-child(6),
	header > .logo svg > path:nth-child(7) { display: none; }
	/* NAVIGATION */
		header nav {
			position: absolute;
			left: 20vw;
			top: 6.75vw;
			z-index: 1;
		}
		header nav ul li {
			list-style: none;
			display: inline-block;
			color: #EEE;
			position: relative;
		}
		header nav ul li:before {
			content: ' - ';
			font-weight: 100;
			letter-spacing: .5vw;
			font-size: 2vw;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			right: calc(100% + .5vw);
		}
		header nav ul li:first-child:before { content:''; }
		header nav ul li a {
			color: #EEE;
			text-transform: uppercase;
			font-weight: 100;
			letter-spacing: 1vw;
			font-size: 2vw;
			text-shadow: 0 0 5px rgba(0,0,0,0.5);
		}
		@keyframes navHoverAnimation {
			0% { font-weight: 100; }
			16.66% { font-weight: 200; }
			33.32% { font-weight: 300; }
			49.98% { font-weight: 400; }
			66.64% { font-weight: 500; }
			83.3% { font-weight: 600; }
			100% { font-weight: 700; }
		}
		ul.menu {
			display: flex;
			backdrop-filter: blur(50px);
			clip-path: polygon(2.2% 0, 100% 0, 97.8% 100%, 0 100%);
			padding: 0 1vh;
		}
		ul.menu li {
			user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			-moz-user-select: none;
			list-style: none;
			margin: 0 1vw;
			text-shadow: 0px 1px 2px #000;
		}
		ul.menu li.active { pointer-events: none; }
		ul.menu li:last-child { margin-right: 0; }
		ul.menu li a {
			position: relative;
			color: #DDD;
			text-decoration: none;
			display: flex;
		}
		ul.menu li a:hover {
			font-weight: 400;
			font-style:italic;
		}
		ul.menu li a span:nth-child(1),
		ul.menu li a span:nth-child(2),
		ul.menu li a span:nth-child(3) {
			position: absolute;
			left: 0;
			top: 0;
		}
		ul.menu li a span:nth-child(4) {
			font-weight: initial;
			color: transparent;
		}
		header nav ul li.active a { font-weight: 700; }
		header nav ul li.active:hover a { animation: none; }
		ul.menu li a span:nth-child(1) { clip-path: polygon(0 0, 100% 0, 100% 33.33%, 0 33.33%); }
		ul.menu li a span:nth-child(2) { clip-path: polygon(0 33.33%, 100% 33.33%, 100% 66.66%, 0 66.66%); }
		ul.menu li a span:nth-child(3) { clip-path: polygon(0 66.66%, 100% 66.66%, 100% 100%, 0 100%); }
		@keyframes clipGlitch1 {
			0% { clip-path: polygon(0 0, 100% 0, 100% 25%, 0 25%); }
			15% { clip-path: polygon(0 0, 100% 0, 100% 30%, 0 30%); }
			30% { clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%); }
			50% { clip-path: polygon(0 0, 100% 0, 100% 20%, 0 20%); }
			70% { clip-path: polygon(0 0, 100% 0, 100% 40%, 0 40%); }
			85% { clip-path: polygon(0 0, 100% 0, 100% 28%, 0 28%); }
			100% { clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%); }
		}
		@keyframes clipGlitch2 {
			0% { clip-path: polygon(0 25%, 100% 25%, 100% 65%, 0 65%); }
			15% { clip-path: polygon(0 30%, 100% 30%, 100% 55%, 0 55%); }
			30% { clip-path: polygon(0 35%, 100% 35%, 100% 60%, 0 60%); }
			50% { clip-path: polygon(0 20%, 100% 20%, 100% 70%, 0 70%); }
			70% { clip-path: polygon(0 40%, 100% 40%, 100% 55%, 0 55%); }
			85% { clip-path: polygon(0 28%, 100% 28%, 100% 66%, 0 66%); }
			100% { clip-path: polygon(0 33%, 100% 33%, 100% 66%, 0 66%); }
		}
		@keyframes clipGlitch3 {
			0% { clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%); }
			15% { clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%); }
			30% { clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%); }
			50% { clip-path: polygon(0 70%, 100% 70%, 100% 100%, 0 100%); }
			70% { clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%); }
			85% { clip-path: polygon(0 66%, 100% 66%, 100% 100%, 0 100%); }
			100% { clip-path: polygon(0 66%, 100% 66%, 100% 100%, 0 100%); }
		}
		ul.menu li:hover a span:nth-child(1) {
			animation: clipGlitch1 .9s infinite alternate, glitch1 .7s infinite;
		}
		@keyframes glitch1 {
			0% { left: 0; text-shadow: 2px 0 #AA0000, -2px 0 #00AAAA; }
			7% { left: -0.7vw; text-shadow: -3px 1px #AA0000, 3px -1px #00AAAA; }
			15% { left: 0.5vw; text-shadow: 2px -2px #AA0000, -2px 2px #00AAAA; }
			24% { left: 0vw; text-shadow: 4px 2px #AA0000, -4px -2px #00AAAA; }
			83% { left: 0vw; text-shadow: 2px 1px #AA0000, -3px -1px #00AAAA; }
			89% { left: 0.4vw; text-shadow: 3px -1px #AA0000, -3px 1px #00AAAA; }
			94% { left: -1vw; text-shadow: -3px 0 #AA0000, 3px 0 #00AAAA; }
			97% { left: 1vw; text-shadow: 2px 1px #AA0000, -2px -1px #00AAAA; }
			100% { left: 0; text-shadow: -2px -2px #AA0000, 2px 2px #00AAAA; }
		}
		ul.menu li:hover a span:nth-child(2) {
			animation: clipGlitch2 .9s infinite alternate, glitch1 .7s infinite;
		}
		ul.menu li:hover a span:nth-child(3) {
			animation: clipGlitch3 .9s infinite alternate, glitch2 1.1s infinite;
		}
		@keyframes glitch2 {
			0% { left: 0; text-shadow: 1px 0 #AA0000, -1px 0 #00AAAA; }
			4% { left: 1vw; text-shadow: -4px 1px #AA0000, 4px -1px #00AAAA; }
			12% { left: -0.6vw; text-shadow: 3px -2px #AA0000, -3px 2px #00AAAA; }
			18% { left: 0vw; text-shadow: 4px 2px #AA0000, -4px -2px #00AAAA; }
			87% { left: 0vw; text-shadow: 2px 1px #AA0000, -3px -1px #00AAAA; }
			91% { left: -1vw; text-shadow: 3px -2px #AA0000, -3px 2px #00AAAA; }
			98% { left: 0.5vw; text-shadow: -1px 0 #AA0000, 1px 0 #00AAAA; }
			100% { left: 0; text-shadow: 2px -2px #AA0000, -2px 2px #00AAAA; }
		}
	/* HIGHTLIGHT */
		body.store ul.menu li a {
			color: #111;
		}
		body.store header > .logo svg > g:nth-child(1) path,
		body.store header > .logo svg > path:nth-child(3) {
			fill: #222;
		}
	/* RESPONSIVE */
		@media screen and (max-width: 1024px) {
			header > .logo {
				top: 75px;
				left: 75px;
				width: 100px;
			}
			header nav {
				left: 225px;
				top: 72.5px;
			}
			header nav ul li:before {
				letter-spacing: 7.5px;
				font-size: 25px;
			}
			header nav ul li a {
				letter-spacing: 15px;
				font-size: 25px;
			}
		}
		@media screen and (max-width: 750px) {
			header nav {
				left: auto;
				right: 70px;
			}
			header nav ul li {
				display: block;
				text-align: right;
			}
			header nav ul li:before { content: ''; }
		}
		@media screen and (max-width: 500px) {
			header > .logo { left: 12vw; }
			header nav { right: 12vw; }
		}
/* ==== END of HEADER ==== */

/* ==== START of BLOCKS ==== */
	/* ---- ALL BLOCKS ---- */
		#wrapper > .inner {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			overflow: hidden;
		}
		#wrapper > .inner > div { z-index: 10; }
		#wrapper > .inner > .prev { z-index: 100; }
		#wrapper > .inner > .active {
			z-index: 1000;
			animation: navSwitch 1s ease;
		}
		@keyframes navSwitch {
			0% { clip-path: polygon(0 0, 0 0, -26% 100%, 0 100%); }
			100% { clip-path: polygon(0 0, calc(100% + 26%) 0,	100% 100%, 0 100%); }
		}
		#wrapper > .inner > div:after {
			position: absolute;
			content: '';
			top: 50%;
			left: 50%;
			width: calc(100% - 7vw);
			height: calc(100% - 7vw);
			z-index: 100;
			transform: translate(-50%,-50%);
			border-image: linear-gradient(45deg, #222, #8a8a8a) 30;
			border-width: 2px;
			border-style: solid;
			pointer-events: none;
		}
	/* ---- HOME ---- */
		#home {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: #313131;
			background-image: radial-gradient(#222 1px, transparent 1px);
			background-size: 1vw 1vw;
			z-index: 1;
		}
		/*slider styles*/
		.rgbShiftSlider {
			display: block;
			position: absolute;
			left: 0;
			top: 0;
			width: 100vw;
			height: 100%;
			overflow: hidden;
			transform-origin: 50% 50%;
		}
		canvas {
			position: absolute;
			left: 0;
			top: 0;
			z-index: 0;
		}
		.headlines {
			position: absolute;
			bottom: 7vw;
			left: 7vw;
			width: auto;
			height: auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.headlines a span {
			display: block;
			font-family: AlumniSans, sans-serif;
			font-weight: 100;
			color: #000;
			font-size: 10vw;
			line-height: 7vw;
		}
		.headlines a span:nth-child(2) { letter-spacing: 1.85vw; }
		.headlines a span:nth-child(1) {
			font-weight: 600;
			color: #fff;
		}
		svg.cross { width: 6vw; }
		svg.cross path { fill: #f00; }
		@keyframes backgroundText {
			0% { transform: translateX(-40%); }
			100% { transform: translateX(11.95%); }
		}
		.background-text {
			position: absolute;
			top: -50%;
			left: -50%;
			transform: rotate(-45deg);
		}
		.background-text span {
			font-size: 50vw;
			color: #353535;
			font-weight: 700;
			transform: translateX(-40%);
			display: flow-root;
			animation: backgroundText 20s linear infinite;
			white-space: nowrap;
		}
		/* RESPONSIVE */
			@media screen and (max-width: 1024px) {
				.front-page-block .border {
					width: calc(100% - 75px);
					height: calc(100% - 75px);
				}
				.headlines {
					bottom: 75px;
					left: 75px;
				}
				.headlines span a {
					font-size: 110px;
					line-height: 75px;
				}
				.headlines span a.next { letter-spacing: 20px; }
				svg.cross { width: 60px; }
			}
			@media screen and (max-width: 650px) {
				.rgbShiftSlider {
					left: 50%;
					top: auto;
					width: 150vw;
					height: 150vw;
					bottom: 0;
					transform: translateX(-50%);
				}
				.background-text span {
					font-size: 350px;
				}
			}
			@media screen and (max-width: 500px) {
				.front-page-block .border {
					width: calc(100% - 15vw);
					height: calc(100% - 15vw);
				}
				.headlines {
					left: 15vw;
					bottom: 15vw;
				}
				.headlines span a {
					font-size: 22vw;
					line-height: 15vw;
				}
				.headlines span a.next { letter-spacing: 4vw; }
				svg.cross { width: 12vw; }
			}
	/* ---- STORE ---- */
		#store {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: #e1e1e1;
			background-image: radial-gradient(#a4a4a4 1px, transparent 1px);
			background-size: 1vw 1vw;
		}
		#store:before {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: linear-gradient(0deg, rgb(0, 0, 0) 0%, rgba(0,0,0,0) 100%);
			opacity: 0.2;
		}
		#wrapper > .inner > #store:after {
			border-image: linear-gradient(45deg, #EEE, #222) 30;
		}
		.page-template-store-php .inner .border {
			pointer-events: initial;
			overflow: hidden;
		}
		#store .wrapper {
			position: absolute;
			top: 50%;
			left: 50%;
			width: calc(100% - 7vw);
			height: calc(100% - 7vw);
			transform: translate(-50%,-50%);
			overflow: hidden;
		}
		#store .container {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			cursor: grab;
			z-index: 100;
			transition: none;
		}
		#store .container:after {
			position: absolute;
			content: '';
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			width: 500%;
			height: 500%;
			z-index: -1;
		}
		#store .container.down {
			cursor: grabbing;
		}
		#store .gallery {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			width: 100%;
			height: 100%;
			transform: scale(1.4) translate(0px,0px);
			transition: none;
			/*perspective: 1000px;*/
			perspective-origin: 50% 50%;
		}
		@keyframes smoothMovement {
			0% { margin-left: 0; }
			100% { margin-left: 50px; }
		}
		#store .gallery .inner {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			display: flex;
			flex-flow: column;
			gap: 4vw;
			justify-content: center;
			align-items: center;
			transition: 1s ease;
			transform: scaleX(1) scaleY(1) scaleZ(1) rotateX(55deg) rotateY(5deg) rotateZ(-41deg) translateX(0px) translateY(0px) translateZ(0px) skewX(0deg) skewY(0deg);
		}
		#store .gallery .group {
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 4vw;
		}
		#store .container.down .gallery .product { pointer-events: none; }
		#store .gallery .group:nth-child(1) {animation: smoothMovement 6s ease-in-out alternate infinite;}
		#store .gallery .group:nth-child(2) {animation: smoothMovement 8s ease-in-out alternate-reverse infinite;}
		#store .gallery .group:nth-child(3) {animation: smoothMovement 7s ease-in-out alternate infinite;}
		#store .gallery .group:nth-child(4) {animation: smoothMovement 5s ease-in-out alternate-reverse infinite;}
		#store .gallery .product {
			position: relative;
			cursor: pointer;
			z-index: 10;
		}
		#store .gallery .product {
			background: #E1E1E1;
			box-shadow: -10px 10px 20px rgba(0,0,0,0.25);
			user-select: none; /* Prevent text/image selection */
			-webkit-user-select: none; /* For Safari and Chrome */
			-ms-user-select: none; /* For older versions of Internet Explorer */
			-moz-user-select: none; /* For Firefox */
		}
		#store .gallery .product:hover {
			background: #EEE;
			transform: translate(20px,-20px);
			box-shadow: -35px 35px 35px rgba(0,0,0,0.25);
		}
		#store .gallery .product:hover:after {
			content: '';
			position: absolute;
			top: 0;
			right: 0;
			width: calc(100% + 20px);
			height: calc(100% + 20px);
		}
		#store .gallery .product img {
			position: relative;
			display: block;
			width: auto;
			height: 20vw;
			padding: 3vw;
		}
		#store .gallery .product .product-head {
			position: absolute;
			opacity: 0;
			visibility: hidden;
			padding: 2vw;
			width: 100%;
			transition: none;
		}
		#store .gallery .product .product-head svg.cross {
			position: relative;
			float: right;
			width: 4vw;
			height: 4vw;
			transform: rotate(0deg);
			z-index: 1000;
		}
		#store .gallery .product .product-head svg.cross:hover {
			transform: rotate(-10deg);
		}
		#store .gallery .product .product-head svg.cross path {
			fill:#000;
			stroke: #000;
			stroke-width: 0;
		}
		#store .gallery .product .product-head svg.cross:hover path {
			stroke: #000;
			stroke-width: .75vh;
			fill: #f00;
		}
		#store .gallery .product-details {
			position: absolute;
			top: 0;
			opacity: 0;
			visibility: hidden;
			transition: none;
		}
		#store .gallery .product-details h3 {
			font-weight: 300;
			font-size: 4vw;
			text-transform: uppercase;
			line-height: 3.5vw;
		}
		#store .gallery .product .product-details > * {
			display: block;
		}
		/* SALE */
		#store .gallery .product.sale:hover .sale-percentage p,
		#store .gallery .product.dummy .sale-percentage p { color: #CCC }
		#store .gallery .product .sale-percentage {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			overflow: hidden;
			pointer-events: none;
			z-index: -1;
		}
		#store .gallery .product .sale-percentage:before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			border: 0.5vw dashed #F00;
			box-sizing: border-box;
			z-index: 1000;
		}
		@keyframes saleAnimation {
			0% { margin-top: 0; }
			100% { margin-top: 6vw; }
		}
		#store .gallery .product .sale-percentage p {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			color: #BBB;
			font-size: 3vw;
			width: 100%;
			line-height: 3vw;
			animation: saleAnimation 5s linear infinite;
		}
		/* ACTIVE */
		#store .container.active {
			top: 0 !important;
			left: 0 !important;
			transition: 1s ease;
		}
		#store .gallery.active {
			transform: scale(1) translate(0px,0px) !important;
			transition: 1s ease;
		}
		#store .gallery.active .product { pointer-events: none; }
		#store .gallery .inner.active { transform: initial; }
		#store .fadeout .gallery .inner.active {
			transition: 500ms ease;
			pointer-events: none;
			transform: scaleX(1) scaleY(1) scaleZ(1) rotateX(55deg) rotateY(5deg) rotateZ(-41deg) translateX(0px) translateY(0px) translateZ(0px) skewX(0deg) skewY(0deg);
		}
		@keyframes fadeIn {
			0% { opacity:0; }
			100% { opacity:1; }
		}
		@keyframes fadeOut {
			0% { opacity:1; }
			100% { opacity:0; }
		}
		#store .gallery .product.active,
		#store .fadeout .gallery .product.active {
			position: absolute;
			top: 7.5vw;
			left: 15vw;
			width: calc(100% - 30vw);
			height: calc(100% - 20vh);
			z-index: 100;
			background: rgba(255,255,255,0.75);
			box-shadow: 0 0 20vh rgba(0,0,0,0.5);
			pointer-events: initial;
			transition: none;
			animation: fadeIn 1s ease forwards;
			backdrop-filter: blur(5px);
			border-image: linear-gradient(45deg, #222, #8a8a8a) 30;
			border-width: 1vw;
			border-style: solid;
		}
		#store .fadeout .gallery .product.active { animation: fadeOut 500ms ease forwards; }
		#store .gallery .product.active:hover {
			transform: initial;
			box-shadow: 0 0 20vh rgba(0,0,0,0.5);
			transition: none;
			background: rgba(255,255,255,0.75);
		}
		#store .gallery .product.active:before {
			position: fixed;
			content: '';
			top: -500vh;
			left: -500vw;
			width: 1000vw;
			height: 1000vh;
			background: rgba(0,0,0,0.25);
			pointer-events: none;
		}
		#store .gallery .product.active .product-head {
			position: relative;
			opacity: 1;
			visibility: visible;
		}
		#store .gallery .product.active .product-image {
			position: absolute;
			left: 0;
			top: 0;
			width: 50%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			background: rgba(255,255,255,.75);
			filter: initial;
		}
		#store .gallery .product.active .product-image img {
			width: 100%;
			height: auto;
		}
		#store .gallery .product.active .product-details {
			position: absolute;
			top: 0;
			right: 0;
			width: 50%;
			height: 100%;
			padding: 2vw;
			opacity: 1;
			visibility: visible;
		}
		#store .gallery .product.active .sale-percentage { width: 50%; }
		#store .gallery .product.active .sale-percentage { display: none; }
		/* RESPONSIVE */
			@media screen and (max-width: 1024px) {
				#store .gallery .product.active {
					top: 90px;
					left: 160px;
					width: calc(100% - 200px);
					height: calc(100% - 130px);
				}
				#store .gallery .product .product-head { padding: 20px; }
				#store .gallery .product .product-head svg.cross {
					width: 50px;
					height: 50px;
				}
			}
			@media screen and (max-width: 750px) {
				#store .gallery .product.active {
					top: 170px;
					left: 30px;
					width: calc(100% - 60px);
					height: calc(100% - 200px);
					border-width: 10px;
				}
				#store .gallery .product .product-head svg.cross {
					width: 10vw;
					height: 10vw;
				}
			}
			@media screen and (max-width: 500px) {
				#store .gallery .product.active {
					top: 190px;
					height: calc(100% - 220px);
				}
			}
	/* ---- KONTAKT---- */
		#kontakt {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: #f00;
			background-image: radial-gradient(#222 1px, transparent 1px);
			background-size: 1vw 1vw;
		}
		#kontakt:before {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: linear-gradient(0deg, rgb(0, 0, 0) 0%, rgba(0,0,0,0) 100%);
			opacity: 1;
		}
		#wrapper > .inner > #kontakt:after {
			border-image: linear-gradient(45deg, #EEE, #222) 30;
		}
		#kontakt .background-text span {
			color: #f00;
			opacity: 0.5;
		}
		#kontakt .content {
			position: absolute;
			top: 50%;
			right: 20%;
			color: #FFF;
			transform: translateY(-50%);
			font-size: 2vw;
		}
/* ==== END of BLOCKS ==== */

/* ==== START of FOOTER ==== */
	footer .widget.widget_text {
		background: #1e2429;
		padding: 20px;
		outline: 2px solid #1e2429;
	}
	footer p {
		color: #fff;
		opacity: 0.1;
		font-size: 20px;
		text-align: center;
		margin: 0;
	}
/* ==== END of FOOTER ==== */