/* phpcs:ignore */

:root {
	--webnacht-green: #81e424;
	--webnacht-grey: #333333;
}
/* FLIPDOWN CUSTOM THEME */
.flipdown.flipdown__theme-light .rotor-bottom, .flipdown.flipdown__theme-light .rotor-leaf-rear {
	background-color: #ffffff !important;
	color: #00d5ef !important;
}
.flipdown.flipdown__theme-light .rotor, .flipdown.flipdown__theme-light .rotor-top, .flipdown.flipdown__theme-light .rotor-leaf-front {
	background-color: #f1f1f1 !important;
	color: #00b4ca !important;
}

.flipdown.flipdown__theme-dark .rotor-bottom, .flipdown.flipdown__theme-dark .rotor-leaf-rear {
	color: var(--webnacht-green) !important;
	background-color: #4a4a4a !important;
}
.flipdown.flipdown__theme-dark .rotor, .flipdown.flipdown__theme-dark .rotor-top, .flipdown.flipdown__theme-dark .rotor-leaf-front {
	color: var(--webnacht-green) !important;
	background-color: #333333 !important;
}
.flipdown.flipdown__theme-dark .rotor-group-heading:before {
	color: white !important;
}

/* HEADER & LOGO */
body {
	background-color: rgb(32, 32, 32) !important;
	background-image: linear-gradient(45deg, #1a2d08 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(to bottom, rgb(8, 8, 8), rgb(32, 32, 32)) !important;
	background-size: 10px 10px, 10px 10px, 10px 5px !important;
	background-position: 0px 0px, 5px 5px, 0px 0px !important;
}
a {
	color: white !important;
}
a:hover {
	color: var(--webnacht-green) !important;
}
ul.sub-menu a:hover {
	color: black !important;
}
#scrollup:hover {
	background-color: var(--webnacht-green) !important;
	color: white !important;
}
.lds-dual-ring {
	display: inline-block;
	width: 1em;
	height: 1em;
	padding: .15em 0 0 .15em;
}
.lds-dual-ring:after {
	content: " ";
	display: block;
	width: 0.72em;
	height: 0.72em;
	border-radius: 50%;
	border: 0.078em solid #fff;
	border-color: #fff transparent #fff transparent;
}
@keyframes lds-dual-ring {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
button.contentLargeButton {
	position: relative;
	display: block !important;
	width: 100%;
	border-radius: 10em !important;
	color: white;
	text-transform: uppercase;
	font-weight: bold;
	margin-left: auto;
	margin-right: auto;
	outline: none;
	background-color: var(--webnacht-grey);
	cursor: pointer;
}
button.contentLargeButton:focus {
	outline: none !important;
	background-color: var(--webnacht-grey);
}
button.contentLargeButton:hover {
	background-color: var(--webnacht-green) !important;
}

div#headerContainer, footer#footerBottom {
	background: linear-gradient(0deg, #1f1f1f, #2b2b2b) !important;
}
div.headerPullLogoUp {
    transform: translate(-50%, -20%) scale(0.35) !important;
}
div.headerPullLogoDown {
	transform: translate(-50%, 140%) scale(1) !important;
}
svg#webnachtLogo {
	height: 8em;
}
svg#webnachtLogo:focus {
	outline: none;
}
svg#webnachtLogo path.cls-1 {
	fill: rgba(255,255,255,1);
	stroke: #fff;
	stroke-width: .1em;
	stroke-dasharray: 750;
	animation: webnachtLogoAnimation 4s ease-out;
}
@keyframes webnachtLogoAnimation {
	0% {
		fill: rgba(255,255,255,0);
		stroke-dasharray: 250;
	}
	40% {
		stroke-dasharray: 840;
		fill: rgba(255,255,255,0);
	}
	42% {
		fill: rgba(255,255,255,0);
	}
	44% {
		fill: rgba(255,255,255,0.5);
	}
	46% {
		fill: rgba(255,255,255,0.5);
	}
	48% {
		fill: rgba(255,255,255,0);
	}
	50% {
		fill: rgba(255,255,255,0);
	}
	52% {
		fill: rgba(255,255,255,0.5);
	}
	54% {
		fill: rgba(255,255,255,0.5);
	}
	56% {
		fill: rgba(255,255,255,0);
	}
	70% {
		fill: rgba(255,255,255,0);
	}
	100% {
		fill: rgba(255,255,255,1);
	}
}
svg#webnachtLogo path.cls-2 {
	animation: webnachtLogoByFsrAnimation 5s ease-out;
}
@keyframes webnachtLogoByFsrAnimation {
	0% {
		opacity: 0;
	}
	75% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/* BODY */
div.menu-icon {
	 background-color: white !important;
}
div#navbarHeaderContainer, footer.site-footer {
	background-color: #101010 !important;
}
div.site-info {
	color: white;
}
ul#navbarDesktopList li.menu-item-has-children {
	color: white !important;
}
button.navbarArrowDesktop {
	color: white !important;
}
button.navbarArrowDesktop:hover {
	color: var(--webnacht-green) !important;
}
@media screen and (min-width: 64em) {
	ul.social-links-menu a {
		color: white !important;
	}
}
div#contentContainer {
	position: relative;
    display: flex;
    margin-top: 3em;
}


/* REGISTER FAIL MSG */
div#registerFailMsgContainer {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.75);
	z-index: 10;
	visibility: hidden;
	opacity: 0;
}
div#registerFailMsgContainer[show="true"] {
	visibility: visible;
	opacity: 1;
	/*animation: registerFailMsgContainerShow .5s ease-out; TODO: NAVI BAR BLINKING ON LOAD */
}
div#registerFailMsgContainer[show="false"] {
	visibility: hidden;
	opacity: 0;
	/*animation: registerFailMsgContainerHide .5s ease-out; TODO: NAVI BAR BLINKING ON LOAD */
}
@keyframes registerFailMsgContainerShow {
	0% {
		visibility: hidden;
		opacity: 0;
	}
	100% {
		visibility: visible;
		opacity: 1;
	}
}
@keyframes registerFailMsgContainerHide {
	100% {
		visibility: hidden;
		opacity: 0;
	}
	0% {
		visibility: visible;
		opacity: 1;
	}
}
div.registerFailMsgBox {
	position: absolute;
	background: var(--webnacht-grey);
	width: 100vw;
	max-width: 30em;
	transform: translate(-50%, -50%);
	left: 50%;
	top: 47.5%;
	padding: 2em;
	color: white;
	visibility: hidden;
	opacity: 0;
}
div.registerFailMsgBoxShow {
	top: 50%;
	visibility: visible;
	opacity: 1;
	animation: registerFailMsgBox 1s ease-out;
}
@keyframes registerFailMsgBox {
	0% {
		top: 47.5%;
		visibility: hidden;
		opacity: 0;
	}
	50% {
		top: 47.5%;
		visibility: hidden;
		opacity: 0;
	}
	100% {
		top: 50%;
		visibility: visible;
		opacity: 1;
	}
}
div#registerFailMsgBoxDeleteReg div {
	display: flex;
	align-items: center;
}
div#registerFailMsgBoxDeleteReg span {
	width: 15em;
}
div#registerFailMsgBoxDeleteReg input {
	background-color: #313131 !important;
	border: 2px solid #4e4e4e !important;
	color: white !important;
}
button.registerFailMsgBoxButton {
	margin-top: 2em;
	width: 100%;
	background-color: var(--webnacht-green);
	padding: .5em;
	border-radius: 10em;
	color: white;
	text-transform: uppercase;
	cursor: pointer;
}
button.registerFailMsgBoxButton:hover {
	background-color: white;
	color: var(--webnacht-green);
}
button.registerFailMsgBoxButton:focus {
	outline: none;
	background: var(--webnacht-green);
}

/* NAVIGATION LEFT */
div#contentNavigationContainer {
	height: 100vh; /* Fallback for browsers that do not support Custom Properties */
	height: calc(var(--vh, 1vh) * 100 - 3em);
	position: sticky;
	top: calc(3em);
}
div#contentNavigation {
	margin: 0 1.5em;
	min-height: calc(100vh - 3em);
	position: relative;
	display: flex;
	align-items: center;
}
input.contentNavigationList {
	display: none;
}
div#contentNavigation ul {
	list-style: none;
	display: grid;
	grid-row-gap: .8em;
	position: relative;
	padding: 0;
	margin: 0;
}
div#contentNavigation i {
	display: block;
	width: 1.5em;
	height: 1.5em;
	border-radius: 1em;
	transition: .4s;
	margin: 0;
	background: #ffffff;
	box-shadow: inset 0 0 0.4em 0px #696969;
	-moz-box-shadow: inset 0 0 0.4em 0px #696969;
	-webkit-box-shadow: inset 0 0 0.4em 0px #696969;
	cursor: pointer;
}
input.contentNavigationList:checked + i {
	background: #80e425 !important;
	box-shadow: inset 0 0 0.4em 0px #80e425 !important;
	-moz-box-shadow: inset 0 0 0.4em 0px #80e425 !important;
	-webkit-box-shadow: inset 0 0 0.4em 0px #80e425 !important;
}

/* CONTENT RIGHT */
div#contentInner {
	margin-left: -4.5em;
	width: 100%;
	padding: 0 3em;
}
div.contentSectionContainer {
	position: relative;
	min-height: calc(var(--vh, 1vh) * 100 - 3em);
}
div.contentSection {
	position: relative;
	min-height: calc(var(--vh, 1vh) * 100 - 3em);
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	flex-flow: column;
	justify-content: center;
	opacity: 0;
}
div.contentSectionBox {
	background-color: var(--webnacht-grey) !important;
	color: white;
	padding: 1.5em;
}
div.slideDownAnimation {
	opacity: 1;
	animation: slideDown 1s ease-out;
}
div#contentSectionCountdown {
	padding-top: 10em;
}
@keyframes slideDown {
	0% {
		opacity: 0;
	}
	33% {
		opacity: 0;
		transform: translate(0,-2.5em);
	}
	100% {
		opacity: 1;
		transform: translate(0,0);
	}
}
div.slideRightAnimation {
	opacity: 1;
	animation: slideRight 1s ease-out;
}
@keyframes slideRight {
	0% {
		opacity: 0;
	}
	33% {
		opacity: 0;
		transform: translate(-2.5em,0);
	}
	100% {
		opacity: 1;
		transform: translate(0,0);
	}
}
div.slideUpAnimation {
	opacity: 1;
	animation: slideUp 1s ease-out;
}
@keyframes slideUp {
	0% {
		opacity: 0;
	}
	33% {
		opacity: 0;
		transform: translate(0,2.5em);
	}
	100% {
		opacity: 1;
		transform: translate(0,0);
	}
}
div.slideLeftAnimation {
	opacity: 1;
	animation: slideLeft 1s ease-out;
}
@keyframes slideLeft {
	0% {
		opacity: 0;
	}
	33% {
		opacity: 0;
		transform: translate(2.5em,0);
	}
	100% {
		opacity: 1;
		transform: translate(0,0);
	}
}
div.contentSectionTextBox {
	margin: 1em 0;
	margin-left: 1.5em;
    width: 100%;
}
div#contentFaqContainer {
	height: calc(var(--vh, 1vh) * 100 - 6em);
}
span.contentFaqBoxQuestion {
	font-weight: bold;
	margin-left: 2em;
}
div.contentFaqBox[expand="true"] p {
	display: block;
}
div.contentFaqBox p {
	display: none;
}
div.contentFaqBox button {
	padding: 0;
	background: none;
	outline: none;
	font-size: .9em;
	text-align: left;
}
div.contentFaqBox button::before {
	font-size: 1.5em;
	transition: .3s transform;
	transform: rotate(-90deg) translate(-.13em,-.1em);
	font-weight: bold;
	cursor: pointer;
}
div.contentFaqBox[expand="true"] button::before {
	transform: rotate(0) translate(-.1em,.15em);
}
div.contentFaqBox button:hover {
	color: var(--webnacht-green);
}
div.contentFaqBox a {
	cursor: pointer;
	font-weight: bold;
}
div#countdownContainer {
	margin-left: auto;
	margin-right: auto;
	padding-top: 2em;
	width: 58em;
	display: block;
}
div#contentCountdown {
	width: auto;
	zoom: 1;
	-moz-transform: scale(1);
	margin-left: auto;
	margin-right: auto;
}
button#contentCountdownToRegister {
	max-width: 20em;
	margin-top: 1.5em;
}
span.contentTitle {
	display: block;
	width: 100%;
	font-size: 3em;
	text-transform: uppercase;
	font-weight: 900;
	text-align: center;
	color: white;
}
span.contentSubtitle {
	display: block;
	width: 100%;
	font-size: 1.5em;
	text-transform: uppercase;
	font-weight: 900;
	text-align: center;
	color: white;
}
span.contentSubSubTitle {
	color: white;
	text-transform: uppercase;
	flex-flow: nowrap;
	width: 100%;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
div#contentDetailsContainer {
	margin: 1em 0;
	width: 100%;
}
span.contentBoxTitle {
	display: block;
	text-align: center;
	text-transform: uppercase;
	font-size: 1.5em;
	font-weight: bold;
	color: #81e424;
}
div#contentDetailsContainer p {
	width: 100%;
	margin: .5em 0;
	line-height: 1.8em;
	color: white;
}
div#contentSectionNumbers {
	display: flex;
}
div#contentSectionNumbersInnerContainer {
	display: flex;
    overflow: auto;
    flex-flow: row wrap;
    justify-content: space-around;
}
div.contentSectionNumbersContainer {
	width: 25em;
	color: white;
	text-align: center;
	margin: 1.5em;
}
div.contentSectionNumbersContainer > span:nth-child(1) {
	display: block;
	font-size: 3em;
}
div.contentSectionNumbersContainer > span:nth-child(2) {
	display: block;
	font-size: 1.2em;
	text-transform: uppercase;
}
span.contentSectionNumbersLowCount {
	color: #ff3636;
	animation: contentSectionNumbersLowCount 4s;
}
@keyframes contentSectionNumbersLowCount {
	0% {
		color: white;
	}
	100% {
		color: #ff3636;
	}
}
div#contentSectionRegister {
	max-width: 50em;
	margin-left: auto;
	margin-right: auto;
}
span#contentSectionRegisterDeadline {
	font-size: 1.3em;
}
form#conntentSectionRegisterForm {
	position: relative;
}
form#conntentSectionRegisterForm select {
	font-size: .9em;
	margin: 0;
	padding: 14px 21px;
	opacity: 1;
	width: 100%;
	outline: none;
}
div#contentSectionRegisterClosed {
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.75);
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}
div#contentSectionRegisterClosed span {
	color: white;
	font-size: 1.6em;
	text-transform: uppercase;
	font-weight: bold;
}
input.contentSectionRegister {
	background-color: #313131;
	border: 2px solid #4e4e4e;
	color: white;
}
div.contentSectionRegisterTwoColumnGrid {
	display: grid;
	grid-template-columns: calc(50% - .5em) calc(50% - .5em);
	grid-column-gap: 1em;
}
div#contentSectionRegister input, select {
	background-color: #313131 !important;
	border: 2px solid #4e4e4e !important;
	color: white !important;
	margin-bottom: 0;
}
input#contentSectionRegisterMac {
	transition: .5s ease-in-out;
}
input.contentSectionRegisterMacHide {
	opacity: 0;
	visibility: hidden;
}
input.contentSectionRegisterMacShow {
	opacity: 1;
	visibility: visible;
}
span#contentSectionRegisterMacTitle {
	transition: .5s ease-in-out;
}
span.contentSectionRegisterMacTitleHide {
	opacity: 0;
	visibility: hidden;
}
span.contentSectionRegisterMacTitleShow {
	opacity: 1;
	visibility: visible;
}
div#contentSectionRegisterTurnierContainer {
	position: relative;
}
div#contentSectionRegisterTurnierListContainer {
	position: absolute;
	top: 2.4375rem;
	left: 0;
	width: 100%;
	z-index: 1;
	display: none;
	background: #313131;
	border: 2px solid #4e4e4e;
	border-top: none;
	padding: .5em;
}
span#contentSectionRegisterSelectText {
	padding: 14px 21px;
	font-size: .9em;
	position: absolute;
	top: 0;
	left: 0;
	color: white;
	cursor: pointer;
	white-space: nowrap;
	width: calc(100% - 1em);
	text-overflow: ellipsis;
	overflow: hidden;
}
div#contentSectionRegisterTurnierListContainer[show="true"] {
	display: block;
}
div#contentSectionRegisterTurnierListContainer label {
	display: flex;
	align-items: center;
	margin: .5em 0;
}
div#contentSectionRegisterTurnierListContainer input {
	width: auto;
	margin: 0 .5em 0 0;
}
div#contentSectionRegisterTurnierListContainer span {
	color: white;
}
label.contentSectionRegister {
	display: block;
}
label.contentSectionRegister input {
	width: auto;
	margin-right: .5em;
}
label.contentSectionRegister span {
	color: white;
}
button#contentSectionRegisterSubmit[disabled] {
	opacity: 1;
}
button#contentSectionRegisterSubmit, button#contentSectionRegisterSubmit[disabled]:hover {

}
button.contentSectionRegisterSubmitBeforeAnimation {
	width: 100%;
}
button.contentSectionRegisterSubmitSmallAnimation {
	opacity: 1;
	outline: none;
	width: 3.5em;
	height: 3.5em;
	animation: contentSectionRegisterSubmitSmall .5s ease-out;
	background-color: #4e4e4e;
	cursor: not-allowed;
	transition: .5s;
	padding: 0;
}
@keyframes contentSectionRegisterSubmitSmall {
	0% {
		width: 100%;
	}
	100% {
		width: 3.5em;
	}
}
button.contentSectionRegisterSubmitSmallAnimationDone {
	background-color: #81e424;
	animation: contentSectionRegisterSubmitSmallAnimationDone .5s ease-out;
	cursor: not-allowed;
	padding: 0;
}
@keyframes contentSectionRegisterSubmitSmallAnimationDone {
	0% {
		background-color: #4e4e4e;
	}
	100% {
		background-color: #81e424;
	}
}

span.contentSectionRegisterTextHide {
	font-size: 0;
	animation: contentSectionRegisterTextHide .5s ease-out;
}
@keyframes contentSectionRegisterTextHide {
	0% {
		font-size: 1em;
	}
	100% {
		font-size: 0;
	}
}
div#contentSectionRegisterSubmitLoadingCircle {
	position: absolute;
	top: 50%;
	left: 50%;
	font-size: 0;
	transform: translate(-50%, -50%);
	transition: .5s ease-out;
}
div.contentSectionRegisterSubmitLoadingCircleShow {
	font-size: 2.8em !important;
}
div.contentSectionRegisterSubmitLoadingCircleShow:after {
	animation:
		lds-dual-ring 1.1s cubic-bezier(0.4, 0, 1, 1) 0.5s 1 normal forwards,
		lds-dual-ring 0.6s linear 1.6s infinite normal forwards;
}
div.contentSectionRegisterSubmitLoadingCircleHide {
	font-size: 0 !important;
}

svg#contentSectionRegisterSubmitCheckmark {
	width: 3em;
	height: 3em;
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
svg#contentSectionRegisterSubmitCheckmark polyline.cls-1 {
	fill: none;
	stroke: white;
	stroke-miterlimit:10;
	stroke-width: 1.5em;
	stroke-dasharray: 150;
	stroke-dashoffset: 150;
}
svg.contentSectionRegisterSubmitCheckmarkHide polyline {
	stroke-dashoffset: 150;
}
svg.contentSectionRegisterSubmitCheckmarkShow polyline {
	animation: 1s contentSectionRegisterSubmitCheckmarkShow 0.5s 1 normal forwards;
	stroke-dashoffset: 0;
}
@keyframes contentSectionRegisterSubmitCheckmarkShow {
	from {
		stroke-dashoffset: 150;
	}
	to {
		stroke-dashoffset: 0;
	}
}
div#contentSectionRegisterContact {
	color: white;
	margin-top: 1em;
	font-size: 0.875rem;
}
div#contentSectionRegisterContact a {
	color: #b4de8e;
}
div#contentSectionRegisterContact a:hover {
	color: #81e424;
}

@media (any-pointer: fine) {
	div#contentNavigation i:hover {
		background: rgb(194, 255, 139) !important;
		box-shadow: inset 0 0 0.4em 0px rgba(128, 228, 37, 1) !important;
	}
}

@media screen and (max-width: 63.9375em) {
	div#headerContainer {
		height: calc(var(--vh, 1vh) * 100 - 4.5em);
		top: calc(4.5em);
	}
	button.contentLargeButton {
		font-size: .9em;
	}
	div#contentNavigation {
		min-height: calc(100vh - 4.5em);
		margin: 0 .4em;
	}
	div#contentInner {
		margin-left: -2.5em;
		padding: 0 2.3em;
	}
	div.contentSection, div.contentSectionContainer {
		min-height: calc(var(--vh, 1vh) * 100 - 4.5em);
	}
	span.contentTitle {
		font-size: 2em;
	}
	span.contentSubtitle {
		font-size: 1.3em;
	}
	span#contentSectionRegisterDeadline {
		font-size: 1.1em;
	}
	div#contentCountdown {
		zoom: .8;
		-moz-transform: scale(.8);
	}

	div.contentSectionTextBox {
		margin-left: 0;
	}
	div#contentDetailsContainer {
		font-size: .75em;
		margin: 0;
		padding: .8em;
	}
	div.contentSectionNumbersContainer {
		width: 25em;
		font-size: .69em;
	}
}
@media screen and (max-width: 22.5em) {
	div.contentSectionNumbersContainer {
		width: calc(100% - 2.07em);
	}
}
@media screen and (max-width: 20em) {
	div#contentDetailsContainer {
		padding: .76em;
	}
}
@media screen and (max-width: 550px) {
	div.headerPullLogoDown {
		transform: translate(-50%, 140%) scale(.7) !important;
	}
}
@media screen and (max-width: 400px) {
	div#contentCountdown {
		zoom: .7;
		-moz-transform: scale(.7);
	}
	div.headerPullLogoDown {
		transform: translate(-50%, 140%) scale(.55) !important;
	}
}