/*
Theme Name: DRS Community Update
Theme URI: https://bastian.drs-community.de/
Description: Theme created by DRS-Community
Author: Basty
Author URI: https://drs-community.de/
Version: 2.0
Tags: DRS Community

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

/* ==== START of FONTS ==== */
	/* SAIRA */
	@font-face {
		font-family: Saira-Thin;
		src: url(fonts/Saira/Saira-Thin.ttf);
	}
	@font-face {
		font-family: Saira-SemiBold;
		src: url(fonts/Saira/Saira-SemiBold.ttf);
	}
	/* ROBOTO */
	@font-face {
		font-family: Roboto-Light;
		src: url(fonts/Roboto/Roboto-Light.ttf);
	}
	/* MONTSERRAT */
	@font-face {
		font-family: Montserrat-Thin;
		src: url(fonts/Montserrat/Montserrat-Thin.ttf);
	}
	@font-face {
		font-family: Montserrat-Bold;
		src: url(fonts/Montserrat/Montserrat-Bold.ttf);
	}
/* ==== END of FONTS ==== */

/* ==== START of MAIN.html ==== */
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	html {
		overflow-x: hidden;
	}
	/* Für Firefox */
	::-moz-selection {
		background: rgba(37, 120, 181, 0.75);
		color: #FFF;
	}
	/* Für alle anderen (WebKit, Blink) */
	::selection {
		background: rgba(37, 120, 181, 0.75);
		color: #FFF;
	}
	body { 
		font-family: Roboto-Light;
		font-size: 1.5vw;
	}
	p {
		margin-bottom: 1.5vw;
		text-align: justify;
		z-index: 100;
		position: relative;
	}
	#wrapper {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		/* padding-bottom: 2px; why was this eddit? delete if site = finish */
		transition: filter 300ms ease-in-out;
	}
	#wrapper > .content { min-height: calc(100vh - 50px); }
	/* FONT-RULES */
	h1,h2,h3,h4,h5,h6 {
		font-family: Saira-Thin;
		font-weight: normal;
		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: Saira-SemiBold;
		font-weight: normal;
	}
	/* Rainbow-Color Animation */
	@keyframes rainbow {
		100%,0%{background: rgb(255,0,0);}
		8%{background: rgb(255,127,0);}
		16%{background: rgb(255,255,0);}
		25%{background: rgb(127,255,0);}
		33%{background: rgb(0,255,0);}
		41%{background: rgb(0,255,127);}
		50%{background: rgb(0,255,255);}
		58%{background: rgb(0,127,255);}
		66%{background: rgb(0,0,255);}
		75%{background: rgb(127,0,255);}
		83%{background: rgb(255,0,255);}
		91%{background: rgb(255,0,127);}
	}
	@keyframes rainbow-dark {
		100%,0%{background: rgb(170,0,0);}
		8%{background: rgb(170, 86, 0);}
		16%{background: rgb(170,170,0);}
		25%{background: rgb(86,170,0);}
		33%{background: rgb(0,170,0);}
		41%{background: rgb(0,170,86);}
		50%{background: rgb(0,170,170);}
		58%{background: rgb(0,86,170);}
		66%{background: rgb(0,0,170);}
		75%{background: rgb(86,0,170);}
		83%{background: rgb(170,0,170);}
		91%{background: rgb(170,0,86);}
	}
	@keyframes rainbow-color {
		100%,0%{color: rgb(255,0,0);}
		8%{color: rgb(255,127,0);}
		16%{color: rgb(255,255,0);}
		25%{color: rgb(127,255,0);}
		33%{color: rgb(0,255,0);}
		41%{color: rgb(0,255,127);}
		50%{color: rgb(0,255,255);}
		58%{color: rgb(0,127,255);}
		66%{color: rgb(0,0,255);}
		75%{color: rgb(127,0,255);}
		83%{color: rgb(255,0,255);}
		91%{color: rgb(255,0,127);}
	}
	@keyframes rainbow-dark-color {
		100%,0%{color: rgb(170,0,0);}
		8%{color: rgb(170, 86, 0);}
		16%{color: rgb(170,170,0);}
		25%{color: rgb(86,170,0);}
		33%{color: rgb(0,170,0);}
		41%{color: rgb(0,170,86);}
		50%{color: rgb(0,170,170);}
		58%{color: rgb(0,86,170);}
		66%{color: rgb(0,0,170);}
		75%{color: rgb(86,0,170);}
		83%{color: rgb(170,0,170);}
		91%{color: rgb(170,0,86);}
	}
	section > .content > div {
		padding: 5vw 0;
	}
/* ==== END of MAIN.html ==== */

/* ==== START of GRID ==== */
	.grid {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		opacity: 0.5;
	}
	.grid:before,
	.grid span,
	.grid:after {
		position: absolute;
		content: '';
		top: 0;
		width: 1px;
		height: 100%;
		opacity: 0.25;
		background: #000;
	}
	.grid:before { left: 10%; }
	.grid span:nth-child(1) { left: 26%; }
	.grid span:nth-child(2) { left: 42%; }
	.grid span:nth-child(3) { left: 58%; }
	.grid span:nth-child(4) { left: 74%; }
	.grid:after { left: 90%; }
	.background-columns {
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 80%;
		height: 100%;
		pointer-events: none;
	}
	.background-columns:before,
	.background-columns:after {
		position: absolute;
		content: '';
		top: 0;
		width: 10vw;
		height: 0%;
		background: #fff;
	}
	.background-columns:before { right: 100%; }
	.background-columns:after { left: 100%; }
	.background-columns span {
		position: absolute;
		top: 0;
		left: 0;
		width: 20%;
		height: 0%;
		background: #fff;
	}
	.background-columns span:nth-child(2) { left: 20%; }
	.background-columns span:nth-child(3) { left: 40%; }
	.background-columns span:nth-child(4) { left: 60%; }
	.background-columns span:nth-child(5) { left: 80%; }
/* ==== END of GRID ==== */

/* ==== START of SCROLLBAR ==== */
	.scrollbar-wrapper {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 100;
	}
	.scrollbar {
		position: absolute;
		top: 50%;
		right: 40px;
		width: 20px;
		height: 50%;
		transform: translateY(-50%);
		z-index: 100;
	}
	.scrollbar .position-indicator {
		position: absolute;
		width: 100%;
		height: 20%;
		background: rgba(0,0,0,1);
	}
	.scrollbar .line-guide {
		position: absolute;
		width: 1px;
		height: 100%;
		left: 50%;
		transform: translateX(-50%);
		background: rgba(0,0,0,1);
	}
	.scrollbar-wrapper .drag-guide {
		position: absolute;
		left: 0;
		top: 50%;
		width: 100%;
		height: 50%;
		transform: translateY(-50%);
	}
/* ==== END of SCROLLBAR ==== */

/* ==== START of LOGO ==== */
	.logo {
		position: absolute;
		top: 2vw;
		left: 2vw;
		width: 6vw;
		height: 3vw;
	}
	.logo svg {
		position: absolute;
		top: 0;
		left: 0;
		overflow: visible;
	}
	.rainbow path {
		animation: rainbow-fill 30s linear infinite;
	}
	.rainbow-dark path {
		animation: rainbow-dark-fill 30s linear infinite;
	}
	@keyframes rainbow-fill {
		100%,0%{fill: rgb(255,0,0);}
		8%{fill: rgb(255,127,0);}
		16%{fill: rgb(255,255,0);}
		25%{fill: rgb(127,255,0);}
		33%{fill: rgb(0,255,0);}
		41%{fill: rgb(0,255,127);}
		50%{fill: rgb(0,255,255);}
		58%{fill: rgb(0,127,255);}
		66%{fill: rgb(0,0,255);}
		75%{fill: rgb(127,0,255);}
		83%{fill: rgb(255,0,255);}
		91%{fill: rgb(255,0,127);}
	}
	@keyframes rainbow-dark-fill {
		100%,0%{fill: rgb(170,0,0);}
		8%{fill: rgb(170, 86, 0);}
		16%{fill: rgb(170,170,0);}
		25%{fill: rgb(86,170,0);}
		33%{fill: rgb(0,170,0);}
		41%{fill: rgb(0,170,86);}
		50%{fill: rgb(0,170,170);}
		58%{fill: rgb(0,86,170);}
		66%{fill: rgb(0,0,170);}
		75%{fill: rgb(86,0,170);}
		83%{fill: rgb(170,0,170);}
		91%{fill: rgb(170,0,86);}
	}
	.logo .g1 path,
	.logo .g2 path {
		transform: translate(0);
		transition: transform 200ms ease;
	}
	/* Hover */
	.logo:hover .g1 path {
		transform: translate(.5vw,-.5vw);
	}
	.logo:hover .g2 path {
		transform: translate(-.5vw,.5vw);
	}

	.logo:hover .g1 path:nth-child(1),.logo:hover .g2 path:nth-child(1) {transition-delay: 20ms;}
	.logo:hover .g1 path:nth-child(2),.logo:hover .g2 path:nth-child(2) {transition-delay: 40ms;}
	.logo:hover .g1 path:nth-child(3),.logo:hover .g2 path:nth-child(3) {transition-delay: 60ms;}
	.logo:hover .g1 path:nth-child(4),.logo:hover .g2 path:nth-child(4) {transition-delay: 80ms;}
	.logo:hover .g1 path:nth-child(5),.logo:hover .g2 path:nth-child(5) {transition-delay: 100ms;}
	.logo:hover .g1 path:nth-child(6),.logo:hover .g2 path:nth-child(6) {transition-delay: 120ms;}
	.logo:hover .g1 path:nth-child(7),.logo:hover .g2 path:nth-child(7) {transition-delay: 140ms;}
	.logo:hover .g1 path:nth-child(8),.logo:hover .g2 path:nth-child(8) {transition-delay: 160ms;}
	.logo:hover .g1 path:nth-child(9),.logo:hover .g2 path:nth-child(9) {transition-delay: 180ms;}
	.logo:hover .g1 path:nth-child(10),.logo:hover .g2 path:nth-child(10) {transition-delay: 15ms;}
	.logo:hover .g1 path:nth-child(11),.logo:hover .g2 path:nth-child(11) {transition-delay: 30ms;}
	.logo:hover .g1 path:nth-child(12),.logo:hover .g2 path:nth-child(12) {transition-delay: 50ms;}
	.logo:hover .g1 path:nth-child(13),.logo:hover .g2 path:nth-child(13) {transition-delay: 70ms;}
	.logo:hover .g1 path:nth-child(14),.logo:hover .g2 path:nth-child(14) {transition-delay: 90ms;}
	.logo:hover .g1 path:nth-child(15),.logo:hover .g2 path:nth-child(15) {transition-delay: 110ms;}
	.logo:hover .g1 path:nth-child(16),.logo:hover .g2 path:nth-child(16) {transition-delay: 130ms;}
	.logo:hover .g1 path:nth-child(17),.logo:hover .g2 path:nth-child(17) {transition-delay: 150ms;}
	.logo:hover .g1 path:nth-child(18),.logo:hover .g2 path:nth-child(18) {transition-delay: 170ms;}
	.logo:hover .g1 path:nth-child(19),.logo:hover .g2 path:nth-child(19) {transition-delay: 190ms;}
	.logo:hover .g1 path:nth-child(20),.logo:hover .g2 path:nth-child(20) {transition-delay: 0ms;}
	.logo:hover .g1 path:nth-child(21),.logo:hover .g2 path:nth-child(21) {transition-delay: 5ms;}
	.logo:hover .g1 path:nth-child(22),.logo:hover .g2 path:nth-child(22) {transition-delay: 25ms;}
	.logo:hover .g1 path:nth-child(23),.logo:hover .g2 path:nth-child(23) {transition-delay: 45ms;}
	.logo:hover .g1 path:nth-child(24),.logo:hover .g2 path:nth-child(24) {transition-delay: 65ms;}
	.logo:hover .g1 path:nth-child(25),.logo:hover .g2 path:nth-child(25) {transition-delay: 85ms;}
	.logo:hover .g1 path:nth-child(26),.logo:hover .g2 path:nth-child(26) {transition-delay: 105ms;}
	.logo:hover .g1 path:nth-child(27),.logo:hover .g2 path:nth-child(27) {transition-delay: 125ms;}
	.logo:hover .g1 path:nth-child(28),.logo:hover .g2 path:nth-child(28) {transition-delay: 145ms;}
	.logo:hover .g1 path:nth-child(29),.logo:hover .g2 path:nth-child(29) {transition-delay: 165ms;}
	.logo:hover .g1 path:nth-child(30),.logo:hover .g2 path:nth-child(30) {transition-delay: 185ms;}
	.logo:hover .g1 path:nth-child(31),.logo:hover .g2 path:nth-child(31) {transition-delay: 10ms;}
	.logo:hover .g1 path:nth-child(32),.logo:hover .g2 path:nth-child(32) {transition-delay: 125ms;}
/* ==== END of LOGO ==== */

/* ==== START of NAVIGATION.html ==== */
	header {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: auto;
		z-index: 1000;
	}
	.admin-bar header { top: 32px; }
	nav {
		position: relative;
		overflow: hidden;
	}
	/* -- MENU-BUTTON -- */
		.menu-button {
			position: relative;
			width: 2.5vw;
			height: 2.5vw;
			margin: 2vw 3.5vw 2vw 0;
			float: right;
			cursor: pointer;
		}
		.menu-button span {
			position: absolute;
			top: 0;
			right: 0;
			width: 100%;
			height: 0.16vw;
			background: #000;
			transition: all 200ms ease-in-out;
		}
		.menu-button span:nth-child(1) {
			top: 0.55vw;
		}
		.menu-button span:nth-child(2) {
			top: 50%;
			transform: translateY(-50%);
			width: 70%;
		}
		.menu-button span:nth-child(3) {
			top: auto;
			bottom: 0.55vw;
			width: 85%;
			transition-delay: 100ms;
		}
		.menu-button:hover span {
			width: 100%;
		}
		/* active */
		nav.active .menu-button span {
			width: 100%;
		}
		nav.active .menu-button span:nth-child(1) {
			animation: menuButtonOne 300ms ease forwards;
		}
		nav.active .menu-button span:nth-child(2) {
			animation: menuButtonTwo 300ms ease forwards 100ms;
		}
		nav.active .menu-button span:nth-child(3) {
			animation: menuButtonThree 300ms ease forwards 200ms;
		}
		@keyframes menuButtonOne {
			0% {
				right: auto;
				left: 0;
			}
			50% {
				top: 0.55vw;
				left: 200%;
				transform: translate(0%,0%) rotate(0deg);
			}
			51% {
				top: calc(-100% - 0.55vw);
				left: calc(-100% - 0.55vw);
				transform: translate(-50%,-50%) rotate(45deg);
			}
			100% {
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%) rotate(45deg);
			}
		}
		@keyframes menuButtonTwo {
			0% {
				right: auto;
				left: 0;
			}
			50% {
				top: 50%;
				left: 200%;
				transform: translate(0%,-50%) rotate(0deg);
			}
			51% {
				left: auto;
				top: calc(-100% - 0.55vw);
				right: calc(-100% - 0.55vw);
				transform: translate(50%,-50%) rotate(-45deg);
			}
			100% {
				top: 50%;
				right: 50%;
				transform: translate(50%,-50%) rotate(-45deg);
			}
		}
		@keyframes menuButtonThree {
			0% {
				right: auto;
				left: 0;
			}
			50% {
				bottom: 0.55vw;
				left: 200%;
				transform: translate(0%,0%) rotate(0deg);
			}
			51% {
				left: auto;
				bottom: calc(-100% - 0.55vw);
				right: calc(-100% - 0.55vw);
				transform: translate(50%,50%) rotate(45deg);
			}
			100% {
				bottom: 50%;
				right: 50%;
				transform: translate(50%,50%) rotate(45deg);
			}
		}
		nav.reverse .menu-button span:nth-child(1) {
			animation: menuButtonOneReverse 300ms ease forwards;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%) rotate(45deg);
		}
		nav.reverse .menu-button span:nth-child(2) {
			animation: menuButtonTwoReverse 300ms ease forwards 100ms;
			top: 50%;
			right: 50%;
			transform: translate(50%,-50%) rotate(-45deg);
		}
		nav.reverse .menu-button span:nth-child(3) {
			animation: menuButtonThreeReverse 300ms ease forwards 200ms;
			bottom: 50%;
			right: 50%;
			transform: translate(50%,50%) rotate(45deg);
		}
		@keyframes menuButtonOneReverse {
			0% {
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%) rotate(45deg);
			}
			50% {
				top: calc(-100% - 0.55vw);
				left: calc(-100% - 0.55vw);
				transform: translate(-50%,-50%) rotate(45deg);
			}
			51% {
				top: 0.55vw;
				left: 200%;
				transform: translate(0%,0%) rotate(0deg);
			}
			100% {
				right: auto;
				left: 0;
				top: 0.55vw;
				transform: translate(0%,0%) rotate(0deg);
			}
		}
		@keyframes menuButtonTwoReverse {
			0% {
				top: 50%;
				right: 50%;
				transform: translate(50%,-50%) rotate(-45deg);
			}
			50% {
				left: auto;
				top: calc(-100% - 0.55vw);
				right: calc(-100% - 0.55vw);
				transform: translate(50%,-50%) rotate(-45deg);
			}
			51% {
				top: 50%;
				left: 200%;
				transform: translate(0%,-50%) rotate(0deg);
			}
			100% {
				right: auto;
				left: 0;
				transform: translate(0%,-50%) rotate(0deg);
			}
		}
		@keyframes menuButtonThreeReverse {
			0% {
				bottom: 50%;
				right: 50%;
				transform: translate(50%,50%) rotate(45deg);
			}
			50% {
				left: auto;
				bottom: calc(-100% - 0.55vw);
				right: calc(-100% - 0.55vw);
				transform: translate(50%,50%) rotate(45deg);
			}
			51% {
				bottom: 0.55vw;
				left: 200%;
				transform: translate(0%,0%) rotate(0deg);
			}
			100% {
				right: auto;
				left: 0;
				bottom: 0.55vw;
				transform: translate(0%,0%) rotate(0deg);
			}
		}
	/* -- TOGGLE-MENU -- */
		.toggle-menu {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100vh;
			opacity: 0;
			pointer-events: none;
			transition: background 300ms ease-in-out, opacity 0ms ease 600ms;
		}
		nav > .background {
			position: fixed;
			top: 0;
			left: 0;
			width: 100vw;
			height: 100vw;
			backdrop-filter: blur(5px);
			opacity: 0;
			transition: 300ms ease;
			z-index: -100;
			pointer-events: none;
		}
		.toggle-menu .background-columns {
			opacity: 0.95;
		}
		.toggle-menu .background-columns:before,
		.toggle-menu .background-columns:after {
			transition: all 300ms ease-in-out;
			border-bottom: 1px solid rgba(0,0,0,0.25);
		}
		.toggle-menu .background-columns:before {
			transition-delay: 300ms;
			opacity: 0.4;
		}
		.toggle-menu .background-columns:after { 
			transition-delay: 200ms;
			opacity: 1;
			border-left: 1px solid rgba(0,0,0,0.25);
		}
		.toggle-menu .background-columns span {
			transition: all 300ms ease-in-out;
			border-bottom: 1px solid rgba(0,0,0,0.25); opacity: 0.5;
			border-left: 1px solid rgba(0,0,0,0.25);
		}
		.toggle-menu .background-columns span:nth-child(2) { transition-delay: 50ms; opacity: 0.6; }
		.toggle-menu .background-columns span:nth-child(3) { transition-delay: 150ms; opacity: 0.7; }
		.toggle-menu .background-columns span:nth-child(4) { transition-delay: 250ms; opacity: 0.8; }
		.toggle-menu .background-columns span:nth-child(5) { transition-delay: 100ms; opacity: 0.9; }
		.toggle-menu .menu-main-menu-container {
			top: 0;
			left: 50%;
			width: 80%;
			transform: translateX(-50%);
			height: 100%;
		}
		.toggle-menu .menu-main-menu-container ul {
			display: flex;
			flex-wrap: wrap;
			align-items: end;
			flex-direction: column;
			position: absolute;
			right: 0;
			top: calc(50% - 25%);
			transform: translateY(calc(-50% + 20%));
		}
		.toggle-menu .menu-main-menu-container ul li { display: inline-block; }
		.toggle-menu .menu-main-menu-container ul li a { display: table; }
		/* active */
		nav.active .toggle-menu {
			opacity: 1;
			transition: background 300ms ease-in-out, opacity 0ms ease 0ms;
			pointer-events:	all;
			background: rgba(0,0,0,0.35);
		}
		nav.active .background { opacity: 1; }
		nav.active .toggle-menu .background-columns:before { height: 20%; }
		nav.active .toggle-menu .background-columns span:nth-child(1) { height: 50%; }
		nav.active .toggle-menu .background-columns span:nth-child(2) { height: 40%; }
		nav.active .toggle-menu .background-columns span:nth-child(3) { height: 70%; }
		nav.active .toggle-menu .background-columns span:nth-child(4) { height: 90%; }
		nav.active .toggle-menu .background-columns span:nth-child(5) { height: 80%; }
		nav.active .toggle-menu .background-columns:after { height: 60% }
	/* -- COLORSHIFT -- */
		/* scrollbar */
		.scrollbar.colorshift.white .line-guide,
		.scrollbar.colorshift.white .position-indicator {
			background: #fff;
		}
		.scrollbar.colorshift.blue .line-guide,
		.scrollbar.colorshift.blue .position-indicator {
			background: #00f;
		}
		.scrollbar.colorshift.red .line-guide,
		.scrollbar.colorshift.red .position-indicator {
			background: #f00;
		}
		/* active */
		nav.active .scrollbar.colorshift .line-guide,
		nav.active .scrollbar.colorshift .position-indicator {
			background: #000;
		}
		/* button */
		.button.colorshift {
			position: relative;
			z-index: 1;
			transition: background 150ms ease;
		}
		.colorshift.white span {
			background: #fff;
		}
		.colorshift.blue span {
			background: #00f;
		}
		.colorshift.red span {
			background: #f00;
		}
		nav.active .colorshift span {
			background: #000;
		}
		.menu-main-menu-container {
			position: fixed;
		}
		.menu a {
			text-decoration: none;
			font-size: 5vw;
			line-height: 5vw;
			color: #444;
			display: block;
			font-family: Saira-SemiBold;
			text-transform: uppercase;
			transition: all 300ms ease;
		}
		.menu a span { font-family: Saira-Thin; }
		.menu a:hover {
			color: #fff;
			text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
		}
		nav .menu li {
			opacity: 0;
			margin-bottom: 20px;
			margin-right: 20px;
			transition: all 300ms ease 100ms;
		}
		nav.active .menu li {
			opacity: 1;
			margin-right: 0;
		}
		nav.active .menu li:nth-child(1) { transition-delay: 100ms; }
		nav.active .menu li:nth-child(2) { transition-delay: 200ms; }
		nav.active .menu li:nth-child(3) { transition-delay: 300ms; }
		.button.colorshift:nth-child(n+2) {
			position: absolute;
			right: 0;
			overflow: hidden;
		}
/* ==== END of NAVIGATION.html ==== */

/* ==== START of FOOTER ==== */
	footer {
		z-index: 100;
		position: relative;
	}
	footer .widget.widget_text {
		background: #1e2429;
		padding: 1vw;
		margin-top: -.1vw;
	}
	footer:after {
		position: absolute;
		content: '';
		top: 100%;
		left: 0;
		width: 100%;
		height: 40px;
		background: #1e2429;
	}
	footer p {
		color: #fff;
		opacity: 0.1;
		font-size: 1vw;
		text-align: center;
		margin: 0;
	}
/* ==== END of FOOTER ==== */

/* ==== START of 3D-PARALLAX.js ==== */
	.parallax div {
		width: 100vw;
		height: 100vh;
		left: 0;
		top: 0;
		position: absolute;
	}
	canvas { display: block; }
/* ==== END of 3D-PARALLAX.js ==== */

/* ==== START of PARALLAX.js ==== */
	img {
		width: 100%;
		height: auto;
	}

	.parallax_container {
		position: relative;
		height: 100vh;
		overflow: hidden;
	}

	.parallax {
		position: absolute;
		top: 0;
	}
/* ==== END of PARALLAX.js ==== */

/* ==== START of KEYFRAMES for SMOOTH-PAGELOAD.js ==== */
	@keyframes smoothPageload {
		0% { width: 0; left: 0; }
		100% { width: 100%; left: 0; }
	}

	@keyframes smoothPageloadtwo {
		0% { width: 100%; }
		100% { width: 0%; }
	}
	/* KEYFRAME-RULES */
	#wrapper .smooth-page {
		position: fixed;
		top: 0;
		right: 0;
		width: 0%;
		height: 100%;
		background-color: #00b5ff;
		animation: smoothPageloadtwo 750ms ease both;
	}
	#wrapper.is-exiting .smooth-page {
		animation: smoothPageload 750ms ease;
	}
/* ==== END of KEYFRAMES for SMOOTH-PAGELOAD.js ==== */

/* ==== START of BLOCKS ==== */
	/* --- START of CONTENT/VIDEO --- */
		.content-video {
			z-index: 50;
			position: relative;
			height: calc(90vh + 10vw);
			width: 100%;
			overflow: hidden;
			padding-top: 0;
			clip-path: polygon(0 75%, 10% 75%, 10% 100%, 26% 100%, 26% 90%, 42% 90%, 42% 80%, 58% 80%, 58% 85%, 74% 85%, 74% 50%, 90% 50%, 90% 60%, 100% 60%, 100% 0%, 0% 0%);
		}
		.single .content-video { height: calc(50vh + 10vw); }
		.stats-wrapper + .content-video {
			top: -20vw;
		}
		.home .content-video:nth-child(1) { clip-path: polygon(0 80%, 10% 80%, 10% 70%, 26% 70%, 26% 90%, 42% 90%, 42% 100%, 58% 100%, 58% 60%, 74% 60%, 74% 70%, 90% 70%, 90% 50%, 100% 50%, 100% 0%, 0% 0%); }
		.content-video:nth-child(n+2) {
			clip-path: polygon(0 75%, 10% 75%, 10% 90%, 26% 90%, 26% 85%, 42% 85%, 42% 100%, 58% 100%, 58% 70%, 74% 70%, 74% 50%, 90% 50%, 90% 60%, 100% 60%, 100% 20%, 90% 20%, 90% 0, 74% 0, 74% 5%, 58% 5%, 58% 15%, 42% 15%, 42% 25%, 26% 25%, 26% 10%, 10% 10%, 10% 0, 0 0);
		}
		.content-video .content {
			position: absolute;
			bottom: 40%;
			left: 10%;
			width: calc(8 * 6%);
			z-index: 100;
		}
		.stats-wrapper + .content-video .content { bottom: 35%; }
		.content-video h1 {
			font-size: 9vw;
			line-height: 7vw;
		}
		.content-video h1 s {
			position: relative;
			z-index: 1;
			cursor: vertical-text;
			user-select: none;
			text-decoration: none;
		}
		.content-video h1 strong {
			font-size: 11vw;
			line-height: 9vw;
		}
		.content-video .parallax {
			position: absolute;
			left: 0;
			width: 100vw;
			height: 150vh;
			overflow: hidden;
			opacity: 0.25;
			filter: grayscale(100);
			background-size: cover;
			background-position: right center;
		}
		.content-video .parallax iframe {
			pointer-events: none;
			position: absolute;
			top: 0;
			left: 50%;
			width: 100vw;
			height: 100vh;
			transform: translateX(-50%) scale(1.3);
		}

		@media (min-aspect-ratio: 16/9) {
			.content-video .parallax iframe {
				/* height = 100 * (9 / 16) = 56.25 */
				height: 56.25vw;
			}
		}
		@media (max-aspect-ratio: 16/9) {
			.content-video .parallax iframe {
				/* width = 100 / (9 / 16) = 177.777777 */
				width: 177.78vh;
			}
		}
		.content-video:nth-child(1) .scroll-down {
			position: absolute;
			bottom: 25vh;
			left: 50%;
			transform: translateX(-50%);
			width: 2vw;
			height: 3.5vw;
			cursor: pointer;
			z-index: 100;
		}
		.content-video:nth-child(1) .scroll-down span {
			position: absolute;
			top: 0;
			width: 100%;
			height: 33%;
			animation: scrollDown 3s alternate-reverse;
			animation-iteration-count: infinite;
		}
		.content-video:nth-child(1) .scroll-down span:nth-child(2) {
			top: 50%;
			transform: translateY(-50%);
			animation-delay: .1s;
		}
		.content-video:nth-child(1) .scroll-down span:nth-child(3) {
			top: auto;
			bottom: 0;
			animation-delay: .2s;
		}
		.content-video:nth-child(1) .scroll-down span:before {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%) rotate(45deg);
			width: 1vw;
			height: 1vw;
			border-bottom: .16vw solid #FFF;
			border-right: .16vw solid #FFF;
		}
		@keyframes scrollDown {
			0% { opacity: .25; margin: 0; }
			40% { opacity: .25; margin: 0; }
			50% { opacity: 1; margin: .25vw 0 -.25vw; }
			60% { opacity: .25; margin: 0; }
			100% { opacity: .25; margin: 0; }
		}
		.content-video:nth-child(1) .colorshift-white {
			position: absolute;
			top: 0;
			right: 0;
			height: 60%;
			width: 10%;
		}
		.home .content-video:nth-child(1) .colorshift-white {
			height: 50%;
		}
		.stats-wrapper + .content-video .colorshift-white {
			position: absolute;
			right: 0;
			width: 10%;
			top: 20%;
			height: 40%;
		}
		.home .content-video:nth-child(1) { height: calc(100vh + 10vw); }
		.home .content-video { height: 70vw; }
		.home .content-video:nth-child(4) .colorshift-white{
			height: 200vw;
		}
	/* --- END of CONTENT/VIDEO --- */

	/* --- START of IMAGE/CONTENT --- */
		.image-content {
			position: relative;
			z-index: 100;
			display: flex;
			justify-content: space-between;
		}
		.image-content .image {
			position: relative;
			width: calc(10% + 8 * 3%);
			height: auto;
			overflow: hidden;
		    clip-path: polygon(0% 20%, 0% 95%, 9.95vw 95%, 9.95vw 100%, 25.8vw 100%, 25.8vw 60%, 100% 60%, 100% 10%, 25.8vw 10%, 25.8vw 0%, 9.95vw 0%, 9.95vw 20%);
		}
		.image-content .image img {
			position: absolute;
			transform: translateY(-25vw);
			width: 100%;
			height: auto;
		}
		.image-content .content {
			position: relative;
			width: calc(8 * 6%);
			right: 10%;
			padding-bottom: 10vw;
		}
		.image-content .wp-block-buttons,
		.content-video .wp-block-buttons {
			margin-top: 4vw;
		}
		.image-content div.wp-block-button,
		.content-video div.wp-block-button {
			margin: 0;
			width: 33.333%;
		}
		.image-content .wp-block-button__link,
		.content-video .wp-block-button__link {
			width: 100%;
			padding: .25vw 0;
			font-family: Saira-Thin;
			font-size: 2vw;
			border-radius: unset;
			filter: contrast(100%);
			animation: rainbow-dark 30s linear infinite;
			transition: all 300ms ease-in-out;
		}
		.image-content .wp-block-button__link:hover,
		.content-video .wp-block-button__link:hover {
			filter: contrast(200%);
		}
		.image-content .wp-block-button__link img,
		.content-video .wp-block-button__link img {
			min-width: 2.3vw;
			min-height: 2.3vw;
			max-width: 2.3vw;
			max-height: 2.3vw;
			margin-right: .5vw;
			vertical-align: sub;
		}
	/* --- END of IMAGE/CONTENT --- */

	/* --- START of STATS --- */
		section > .content > div.stats-wrapper {
			position: relative;
			width: 80%;
			margin: auto;
			height: auto;
			z-index: 100;
			padding: 10vw 0 15vw;
			clip-path: polygon(0 40%, 20% 40%, 20% 10%, 40% 10%, 40% 20%, 60% 20%, 60% 0, 80% 0, 80% 45%, 100% 45%, 100% 95%, 80% 95%, 80% 80%, 60% 80%, 60% 85%, 40% 85%, 40% 100%, 20% 100%, 20% 90%, 0 90%);
		}
		.stats-wrapper .headline {
			position: relative;
		}
		.stats-wrapper .headline h2 {
			text-align: center;
		}
		.stats-wrapper .stats {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
		}
		.stats-wrapper .stats .stat {
			width: 20%;
		}
		.stats-wrapper .stats .stat > * {
			text-align: center;
		}
		.stats-wrapper .stats .stat h2 {
			font-family: Montserrat-Thin;
			font-weight: normal;
		}
		.stats-wrapper .stats .stat h2 strong {
			font-family: Montserrat-Bold;
			font-weight: normal;
		}
		.stats-wrapper .stats .stat h2 s {
			animation: rainbow-color 30s linear infinite;
			text-decoration: none;
		}
		.stats-wrapper .stats .stat p {
			margin: 0;
		}
		.stats-wrapper .parallax-background {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0.25;
			pointer-events: none;
			background-size: cover;
			background-repeat: no-repeat;
		}
	/* --- END of STATS --- */

	/* --- START of TEAM --- */
		.team-wrapper {
			position: relative;
			overflow: hidden;
		}
		.team-wrapper:last-child {
			padding: 40vw 0 10vw;
			margin-top: -55vw;
			clip-path: polygon(0 25%, 10% 25%, 10% 35%, 26% 35%, 26% 30%, 42% 30%, 42% 40%, 58% 40%, 58% 20%, 74% 20%, 74% 0, 90% 0, 90% 5%, 100% 5%, 100% 100%, 0% 100%);
		}
		.home .team-wrapper:last-child {
			clip-path: initial;
		}
		@keyframes team-animation {
			0% { background-position-x: 0px; }
			100% { background-position-x: 298px;}
		}
		.team-wrapper .background-animation {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 200%;
			height: 200%;
			transform: translate(-50%,-50%) rotate(45deg);
			animation: team-animation 10s linear infinite;
		}
		.team-wrapper .headline h2 {
			text-align: center;
		}
		.team-wrapper .team {
			position: relative;
			width: 80%;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-wrap: wrap;
		}
		.team-wrapper .team .teamler {
			width: 20%;
		}
		.team-wrapper .team .teamler svg,
		.team-wrapper .team .teamler img {
			width: 100%;
			cursor: pointer;
			transition: all 1s ease;
		}
		@keyframes rainbow-stroke {
			100%,0%{stroke: rgb(255,0,0);}
			8%{stroke: rgb(255,127,0);}
			16%{stroke: rgb(255,255,0);}
			25%{stroke: rgb(127,255,0);}
			33%{stroke: rgb(0,255,0);}
			41%{stroke: rgb(0,255,127);}
			50%{stroke: rgb(0,255,255);}
			58%{stroke: rgb(0,127,255);}
			66%{stroke: rgb(0,0,255);}
			75%{stroke: rgb(127,0,255);}
			83%{stroke: rgb(255,0,255);}
			91%{stroke: rgb(255,0,127);}
		}
		.team-wrapper .team .teamler svg g > * {
			animation: rainbow-stroke 30s linear infinite;
			transition: all 1s ease;
		}
		.team-wrapper .team .teamler svg:hover {
			filter: invert(100);
		}
		.team-wrapper .team .teamler svg:hover g g > polygon {opacity: 0;}
		.team-wrapper .team .teamler svg:hover g g > path + polygon {opacity: 1;}
		.team-wrapper .team .teamler h3 {font-size: 3vw;}
		.team-wrapper .team .teamler h3,
		.team-wrapper .team .teamler p {text-align: center;}
	/* --- END of TEAM --- */

	/* --- START of RANKS --- */
		.ranks-wrapper .headline {
			position: relative;
			text-align: center;
			z-index: -10;
		}
		.ranks-wrapper .ranks {
			position: relative;
			margin: 0 auto;
			width: 80%;
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
		}
		@keyframes rank-group-animation {
			0% { background-position-y: 0px; }
			100% { background-position-y: 71px;}
		}
		.ranks-wrapper .ranks .rank-group {
			position: relative;
			overflow: hidden;
			width: 20%;
		}
		.ranks-wrapper .ranks .rank-group .background {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			opacity: 0;
			z-index: -100;
			overflow: hidden;
			mask-image: linear-gradient(transparent, #FFF 10%, #FFF 90%, transparent);
		}
		.ranks-wrapper .ranks .rank-group .background span {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 200vw;
			height: 100%;
			transform: translate(-50%,-50%) rotate(-45deg);
			animation: rank-group-animation 10s linear infinite;
			transition: all 500ms ease;
		}
		.ranks-wrapper .ranks .rank-group:hover .background {
			opacity: 1;
		}
		.ranks-wrapper .ranks .rank-group .rank {
			position: relative;
			padding: .5vw;
			box-sizing: border-box;
			cursor: pointer;
		}
		.ranks-wrapper .ranks .rank-group .rank .image {
			position: relative;
		}
		.ranks-wrapper .ranks .rank-group .rank .image * { transition: 500ms ease; }
		.ranks-wrapper .ranks .rank-group .rank .image .hover,
		.ranks-wrapper .ranks .rank-group .rank .image .active {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
			background-size: contain;
			background-repeat: no-repeat;
		}
		.ranks-wrapper .ranks .rank-group .rank:hover .image img,
		.ranks-wrapper .ranks .rank-group:hover .rank .image img { opacity: 0; }
		.ranks-wrapper .ranks .rank-group:hover .rank .image .active,
		.ranks-wrapper .ranks .rank-group .rank:hover .image .hover { opacity: 1; }
		.ranks-wrapper .ranks .rank-group .rank:hover .image .active { opacity: 0; }
		.ranks-wrapper .ranks .rank-group .rank .image h4 {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			font-size: 4vw;
			text-align: center;
			line-height: 2.5vw;
			opacity: 0;
		}
		.ranks-wrapper .ranks .rank-group .rank .image h4 strong {
			display: block;
			font-size: 1.8vw;
		}
		.ranks-wrapper .ranks .rank-group .rank:hover .image h4 { opacity: 1; }
		.ranks-wrapper .ranks .rank-group .rank h3 {
			font-size: 2.8vw;
			text-align: center;
			line-height: 2.5vw;
			opacity: 0;
			transition: all 500ms ease;
		}
		.ranks-wrapper .ranks .rank-group:hover .rank h3 { opacity: 1; }
		.ranks-wrapper .ranks .rank-group:nth-child(1) { margin-top: -5vw; }
		.ranks-wrapper .ranks .rank-group:nth-child(2) { margin-top: 2.5vw; }
		.ranks-wrapper .ranks .rank-group:nth-child(4) { margin-top: 5vw; }
		.ranks-wrapper .ranks .rank-group:nth-child(5) { margin-top: -7.5vw; }
		.ranks-wrapper .ranks .rank-group:nth-child(1) .rank .image h4 { margin-top: -1.5vw; }
		.ranks-wrapper .ranks .rank-group:nth-child(2) .rank .image h4 { margin-top: -.1vw; }
		.ranks-wrapper .ranks .rank-group:nth-child(3) .rank .image h4 { margin-top: .75vw; }
		.ranks-wrapper .ranks .rank-group:nth-child(4) .rank .image h4 { margin-top: -1vw; }
	/* --- END of RANKS --- */
/* ==== END of BLOCKS ==== */

/* ==== START of SCROLL-FOR-MOBILE ==== */
	body.scroll #wrapper { position: absolute; }
/* ==== END of SCROLL-FOR-MOBILE ====  */

/* ==== START of POST-PAGE ==== */
	.content-server {
		position: relative;
		width: 80%;
		margin: 0 auto;
		aspect-ratio: 16 / 12;
	}
	.content-server > div {
		height: 100%;
		clip-path: polygon(0 8vw, 20% 8vw, 20% 12vw, 40% 12vw, 40% 5vw, 60% 5vw, 60% 0, 80% 0, 80% 2vw, 100% 2vw, 100% calc(100% - 5vw), 80% calc(100% - 5vw), 80% calc(100% - 8vw), 60% calc(100% - 8vw), 60% calc(100% - 3vw), 40% calc(100% - 3vw), 40% 100%, 20% 100%, 20% calc(100% - 7vw) ,0 calc(100% - 7vw));
	}
	.content-server > div .parallax_container { height: 100%; }
	.content-server .status {
		position: absolute;
		top: 2vw;
		right: 0;
		text-align: center;
		color: #FFF;
		font-family: Saira-SemiBold;
		padding: 0 1vw;
		border-radius: 100vw;
		font-size: 1.8vw;
		box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
	}
	.content-server .status strong { text-transform: uppercase; }
	.content-server .online .status {
		animation: rainbow-dark 30s linear infinite;
		text-shadow: initial;
	}
	.content-server .offline .status {
		background: #a00;
	}
	.content-server .offline img {
		filter: grayscale(100%);
		-webkit-filter: grayscale(100%);
		-moz-filter: grayscale(100%);
	}
	.content-server img {
		width: 125%;
		z-index: -1;
	}
	.content-server .servers-img {
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFF;
		text-decoration: none;
	}
	.content-server > div:before {
		position: absolute;
		content: '';
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
		transition: 300ms ease;
		pointer-events: none;
	}
	.content-server > div:hover:before {
		background: rgba(0,0,0,0.25);
	}
	.content-server h2 {
		line-height: 6vw;
		margin-top: 6vw;
		text-shadow: 0 0 10px;
	}
	.content-server .servers-img > span {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		font-family: Saira-SemiBold;
	}
	.content-server .servers-img p {
		backdrop-filter: blur(5px);
		box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
		padding: 0 20px;
		border-radius: 100vw;
		text-shadow: initial;
		width: fit-content;
	}
/* ==== END of POST-PAGE ====  */