:root {
	--gullys-dunkelblau: #0B2E50;
	--gullys-neon-blau: #1F80E0;
	--gullys-neon-orange: #FFAD24;
	--gullys-hellgrau: #E5ECF7;

	--gullys-mittelgrau: #BFC3CD;
	--gullys-grau: #7F8289;
	--gullys-dunkelgrau: #606267;

	--gullys-orange: #D4911E;
	--gullys-dunkelorange: #916314;

	--gullys-mittelblau: #1968B6;
	--gullys-blau: #104172;

	--gullys-neon-pink: #FF24CF;
	--gullys-neon-gruen: #57FF2E;
}

body {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0;
	padding: 0;
	background-color: var(--gullys-dunkelblau);
}

#loading_content {
	display: flex;
	width: 100%;
	height: 100vh;
	justify-content: center;
	align-items: center;
}

#loading_content #loading_logo {
	animation: breathe 2s ease-in-out infinite;
}

.navigation {
	z-index: 2147483647;
	display: flex;
	width: 100%;
	position: fixed;
	background-color: var(--gullys-dunkelblau);
	color: var(--gullys-hellgrau);
	align-items: center;
	padding: 16px;
	box-sizing: border-box;
	justify-content: space-between;
}

#navigation {
	position: absolute;
	top: 100;
}

.navigation #navflex {
	display: inline-flex;
	justify-content: space-around;
	flex-grow: 1;
}

.navigation .navelement {
	display: inline-block;
	cursor: pointer;
}

.navigation .navbutton {
	font-size: 18px;
	border-bottom: 2px var(--gullys-hellgrau) solid;
}

.navigation .nav_highlight {
	color: var(--gullys-neon-orange) !important;
	border-bottom: 2px var(--gullys-neon-orange) solid !important;
}

#navigationmenu {
	display: none;
}

.content {
	display: none;
	flex: 1;
	min-height: 100vh;
	flex-grow: 1;
	align-items: center;
	flex-direction: column;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	margin: 0 auto;
	text-align: center;
	margin-top: 150px;
}

.contentheader {
	height: 108px;
}

.contentsubheader {
	height: 64px;
}

.contentelement {
	display: block;
	width: 100%;
	margin: 0 auto;
	text-align: center;
}

.contentleftelement {
	width: 70%;
	margin-right: 30%;
}

.contentrightelement {
	width: 70%;
	margin-left: 30%;
}

.contentcomboelement {
	display: flex;
	justify-content: space-between;
	width: 100%;
	overflow: hidden;
}

.contentdistanceelement {
	height: 32px;
}

.contentreplaceelement {
	display: none;
}

.contenthighlightimgp {
	display: block;
	background-color: var(--gullys-neon-orange);
	color: var(--gullys-dunkelblau);
	padding-top: 72px;
	padding-left: 16px;
	margin-right: -128px;
	z-index: -1;
	clip-path: polygon(0% 0%, 100% 20%, 100% 100%, 0% 80%);
	min-width: 600px;
}

.contenthighlightimgp .contenthighlightimglarge {
	font-size: 100px;
}

.contenthighlightimgp .contenthighlightimgsmall {
	font-size: 58px;
}

.contentfadeinleftfast {
	display: inline-block;
	animation: fade_in_full_left 0.5s linear;
}

.contentfadeinrightfast {
	display: inline-block;
	animation: fade_in_full_left 0.5s linear;
}

.contentfadeinleft {
	opacity: 0;
	display: inline-block;
	animation: fade_in_full_left 1.5s linear 0.8s forwards;
	animation-delay: 0.8s;
}

.contentfadeinright {
	opacity: 0;
	display: inline-block;
	animation: fade_in_full_left 1.5s linear;
	animation-delay: 0.8s;
}

.darkblue {
	background-color: var(--gullys-dunkelblau);
}

.diagonalone {
	background: linear-gradient(to right bottom, var(--gullys-dunkelblau) 50%, transparent 50%),
	linear-gradient(to left bottom, var(--gullys-neon-orange) 80%, transparent 80%),
	var(--gullys-hellgrau);
}

.diagonaltwo {
	background: linear-gradient(to right bottom, var(--gullys-neon-orange) 80%, var(--gullys-dunkelblau) 80%);
}

.diagonalthree {
	background: linear-gradient(to right bottom, var(--gullys-neon-orange) 40%, var(--gullys-dunkelblau) 40%);
}

.diagonalfour {
	background: linear-gradient(to right bottom, var(--gullys-hellgrau) 40%, var(--gullys-dunkelblau) 40%);
}

.diagonalfive {
	background: linear-gradient(to left top, var(--gullys-dunkelblau) 58%, transparent 58%),
	linear-gradient(to left bottom, var(--gullys-neon-blau) 80%, transparent 80%),
	var(--gullys-neon-blau);
}

.diagonalsix {
	background: linear-gradient(to right bottom, var(--gullys-dunkelblau) 40%, var(--gullys-neon-blau) 40%);
}

.diagonalseven {
	background: linear-gradient(to right bottom, var(--gullys-dunkelblau) 50%, transparent 50%),
	linear-gradient(to left bottom, var(--gullys-neon-blau) 80%, transparent 80%),
	var(--gullys-hellgrau);
}

.diagonalimgone {
	clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 12% 100%);
}

.footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	background-color: var(--gullys-dunkelblau);
	padding: 32px;
	box-sizing: border-box;
	color: var(--gullys-hellgrau);
}

.footer .copyright {
	font-size: 16px;
	color: var(--gullys-mittelgrau);
}

.footer .footerelement {
	font-size: 14px;
}

.footer .footerdistance {
	display: inline-block;
	width: 32px;
}

.contentalternatetable {
	border-collapse: separate;
	font-size: 18px;
	border-spacing: 12px;
	margin: 0 auto;
	margin-bottom: 24px;
}

.contenttable {
	border-collapse: separate;
	font-size: 18px;
	border-spacing: 12px;
	margin: 0 auto;
	margin-bottom: 24px;
}

.contenttable th.cellsmall {
	text-align: center;
	height: 48px;
	width: 8%;
	color: var(--gullys-hellgrau);
	font-style: italic;
}

.contentalternatetable th.cellsmall {
	text-align: center;
	height: 48px;
	width: 8%;
	color: var(--gullys-hellgrau);
	font-style: italic;
}

.contenttable th.classiccell {
	text-align: center;
	height: 48px;
	width: 20%;
	color: var(--gullys-dunkelblau);
	background-color: var(--gullys-neon-orange);
    clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%);
	font-style: italic;
}

.contentalternatetable th.classiccell {
	text-align: center;
	height: 48px;
	width: 20%;
	color: var(--gullys-dunkelblau);
	background-color: var(--gullys-neon-orange);
    clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%);
	font-style: italic;
}

.contenttable tr td.cellsmall {
	text-align: center;
	height: 48px;
	width: 8%;
	color: var(--gullys-hellgrau);
	font-style: italic;
}

.contenttable tr td.cellsmall {
	text-align: center;
	height: 48px;
	width: 8%;
	color: var(--gullys-hellgrau);
	font-style: italic;
}

.contentalternatetable tr:nth-child(odd) td.cellsmall {
	text-align: center;
	height: 48px;
	width: 8%;
	color: var(--gullys-hellgrau);
	font-style: italic;
}

.contentalternatetable tr:nth-child(even) td.cellsmall {
	text-align: center;
	height: 48px;
	width: 8%;
	color: var(--gullys-neon-orange);
	font-style: italic;
}

.contenttable tr td.classiccell {
	text-align: center;
	height: 48px;
	color: var(--gullys-dunkelblau);
	background-color: var(--gullys-hellgrau);
    clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%);
}

.contentalternatetable tr:nth-child(odd) td.classiccell {
	text-align: center;
	height: 48px;
	color: var(--gullys-dunkelblau);
	background-color: var(--gullys-hellgrau);
    clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%);
}

.contentalternatetable tr:nth-child(even) td.classiccell {
	text-align: center;
	height: 48px;
	color: var(--gullys-dunkelblau);
	background-color: var(--gullys-grau);
    clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%);
}

.timercountdown {
	animation: slide_up_timer 2.5s linear;
}

.timercountdownap1 .countdownnumber {
	display: inline-block;
	font-size: 186px;
	color: var(--gullys-neon-blau);
	text-shadow: 4px 4px 4px white;
	z-index: 5;
}

.timercountdownap2 .countdownnumber {
	display: inline-block;
	font-size: 186px;
	color: var(--gullys-neon-pink);
	text-shadow: 4px 4px 4px black;
	z-index: 5;
}

.timercountdown .countdowndescription {
	display: inline-block;
	font-size: 86px;
	color: var(--gullys-hellgrau);
	text-shadow: 4px 4px 4px black;
	z-index: 5;
}

.timercountdown .countdowntargetdate {
	font-size: 90px;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	text-align: center;
	z-index: 5;
	font-weight: bold;
	color: var(--gullys-hellgrau);
	background-color: var(--gullys-neon-blau);
	width: auto;
	display: flex;
	align-items: center;
	justify-content: center;
    clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%);
	text-shadow: 4px 4px 4px black;
	z-index: 4;
}

.timerdescription {
	display: block;
	font-size: 52px;
	color: var(--gullys-neon-orange);
	text-shadow: 4px 4px 4px black;
	z-index: 12;
}

h1 {
	margin-left: 16px;
	font-size: 54px;
	display: block;
	color: var(--gullys-dunkelblau);
	text-align: left;
	font-style: italic;
	animation: slide_up_fade_in 1s linear;
}

h2 {
	margin-left: 16px;
	font-size: 42px;
	display: block;
	color: var(--gullys-neon-orange);
	text-align: left;
	font-style: italic;
}

h3 {
	font-size: 32px;
	text-align: left;
	font-style: italic;
	color: var(--gullys-neon-orange);
	padding: 0;
	margin: 0;
	margin-left: 16px;
	border-left: solid 6px var(--gullys-neon-orange);
	padding: 8px;
}

h3.iconheading {
	display: flex;
	align-items: center;
}

h4 {
	color: var(--gullys-orange);
	font-size: 18px;
	text-align: left;
	margin-left: 16px;
	border-left: solid 6px var(--gullys-orange);
	padding: 8px;
}

a {
	color: inherit;
	text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

a:hover {
	cursor: pointer;
	color: var(--gullys-neon-orange);
}

a.external_link .external_link_symbol {
	font-size: 24px;
}

p {
	display: block;
	text-align: left;
	font-size: 20px;
	padding-right: 16px;
	color: var(--gullys-hellgrau);
	margin-left: 16px;
	text-align: justify;
	border-left: 6px solid var(--gullys-hellgrau);
	padding-left: 16px;
}

p.pbold {
	font-size: 24px;
}

span.phighlight {
	color: var(--gullys-neon-orange);
}

#home_video {
	display: inline-block;
	width: 70%;
	object-fit: scale-down;
	object-position: top;
	filter: none;
}

#full_view {
    width: 100%;
    height: 100vh;
    background: rgb(0, 0, 0, 0.9);
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 90;
}

#full_view img {
	max-width: 95%;
    max-height: 75%;
    object-fit: contain;
}

#full_view #full_view_close {
    font-size: 52px;
    font-weight: bold;
    position: absolute;
    top: 12%;
    right: 2%;
    color: var(--gullys-neon-orange);
    cursor: pointer;
}

#full_view #full_view_close:hover {
    transform: scale(0.8);
}

div.sponsor_banner {
	display: flex;
	height: 72px;
	overflow: hidden;
	align-items: center;
	background-color: #fff;
	gap: 32px;
	transform: translateX(-100%);
	width: 5000px;
	padding-top: 10px;
}

div.sponsor_banner .sponsor_element {
	padding-left: 32px;
	padding-right: 32px;
	display: inline-block;
	flex: 0 0 auto;
}

div.sponsor_banner .sponsor_bywidth {
	max-width: 256px;
}

div.sponsor_banner .sponsor_byheight {
	max-height: 72px;
}

div.sponsor_banner .sponsor_bywidth img {
	width: 100%;
	height: auto;
}

div.sponsor_banner .sponsor_byheight img {
	height: 100%;
	width: auto;
}

#sub_wrapper {
	position: absolute;
	top: 0;
	width: 100%;
	overflow-x: hidden;
	transition: background-color 1s linear;
	z-index: 100000;
	height: 92px;
	background-color: #fff;
}

@keyframes breathe {
    0% {
        transform: scale(0.9);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(0.9);
    }
}

@keyframes slide_up_timer {
    0% {opacity: 0; transform: translateY(100%);}
    100% {opacity: 1; transform: translateY(0%);}
}

@keyframes slide_up_fade_in {
    0% {opacity: 0; transform: translateY(-100%);}
    100% {opacity: 1; transform: translateY(0%);}
}

@keyframes fade_in_full_left {
    0% {transform: translateX(-100%); opacity: 0;}
    100% {transform: translateX(0%); opacity: 1;}
}

@keyframes fade_in_full_right {
    0% {transform: translateX(100%); opacity: 0;}
    100% {transform: translateX(0%); opacity: 1;}
}

@media (max-width: 600px) {
	h1 {
		font-size: 36px;
		margin-top: 64px;
		font-style: normal;
	}

	h2 {
		font-size: 28px;
		font-style: normal;
	}

	h3 {
		font-style: normal;
	}

	.timercountdown .countdowntargetdate {
		font-size: 52px;
	}
	
	.timercountdownap1 .countdownnumber {
		font-size: 84px;
	}

	.timercountdownap2 .countdownnumber {
		font-size: 84px;
	}
	
	.timercountdown .countdowndescription {
		font-size: 58px;
	}
	
	.timerdescription {
		font-size: 38px;
	}
}

@media (min-width: 600px) and (max-width: 1000px) {
	h1 {
		font-size: 42px;
		margin-top: 64px;
		font-style: normal;
	}

	h2 {
		font-size: 34px;
		font-style: normal;
	}

	h3 {
		font-style: normal;
	}
	
	.timercountdown .countdowntargetdate {
		font-size: 56px;
	}
	
	.timercountdown .countdowndescription {
		font-size: 60px;
	}
	
	.timerdescription {
		font-size: 38px;
	}
}

@media (max-width: 1000px) {
	.navigation {
		gap: 32px;
		align-items: flex-start;
	}

	.navigation #navigationmenu {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
	}

	.navigation #navflex {
		display: none;
		flex-direction: column;
		gap: 32px;
	}

	.navigation #navflex .navbutton {
		font-size: 32px;
	}
}

@media (max-width: 1200px) {
	.contentrightelement  {
		margin-left: 0;
		width: 100%;
	}

	.contentleftelement  {
		margin-right: 0;
		width: 100%;
	}

	.contenttable {
		font-size: 14px;
	}

	.contenthighlightimgp {
		display: none;
	}

	.contentreplaceelement {
		display: block;
	}
}