@font-face {
	font-family: 'Untitled Sans';
	src: url('../fonts/UntitledSans-Regular.woff2') format('woff2'),
		url('../fonts/UntitledSans-Regular.woff') format('woff'),
		url('../fonts/UntitledSans-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Untitled Sans';
	src: url('../fonts/UntitledSans-RegularItalic.woff2') format('woff2'),
		url('../fonts/UntitledSans-RegularItalic.woff') format('woff');
	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family: 'Untitled Sans';
	src: url('../fonts/UntitledSans-Bold.woff2') format('woff2'),
		url('../fonts/UntitledSans-Bold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
}



html {
	font-family: 'Untitled Sans', sans-serif;
	color: #fff;
}



p {
	font-family: 'Untitled Sans';
}

a {
	color: #6D6E6D;
	transition: color .15s ease-in;
}

a:hover {
	color: #32FF08;
	text-decoration: none;
}

.neon-green {
	color: #32FF08;
}

h1,
.uk-h1,
h2,
.uk-h2,
h3,
.uk-h3,
h4,
.uk-h4,
h5,
.uk-h5,
h6,
.uk-h6,
.uk-heading-small,
.uk-heading-medium,
.uk-heading-large,
.uk-heading-xlarge,
.uk-heading-2xlarge {
	font-family: 'Untitled Sans';
	color: #fff;
}



.uk-modal-dialog {
	background-color: #000;
}

.uk-modal-dialog p {
	line-height: 1.45em;
}




p,
ul,
ol {
	font-size: 1.0rem;
	line-height: 1.2em;
}


@media screen and (min-width: 30em) {

	p,
	ul,
	ol {
		font-size: 1.1rem;
		line-height: 1.2em;
	}
}

@media screen and (min-width: 30em) and(max-width: 60em) {

	p,
	ul,
	ol {
		font-size: 1.2rem;
		line-height: 1.2em;
	}
}

@media screen and (min-width: 60em) {

	p,
	ul,
	ol {
		font-size: 1.4rem;
		line-height: 1.2em;
	}
}




.teaser--text {
	font-size: 1.9rem;
	line-height: 1.2em;
}

@media screen and (min-width: 600px) {
	.teaser--text {
		/* color: yellow; */
		font-size: 5.7vw;
		line-height: 1.2em;
	}
}

@media screen and (min-width: 900px) {
	.teaser--text {
		/* color: blue; */
		font-size: 5.5vw;
		line-height: 1.1em;
	}
}

@media screen and (min-width: 1200px) {
	.teaser--text {
		/* color: green; */
		font-size: 4.5vw;
		line-height: 1.1em;

	}
}

@media screen and (min-width: 1800px) {
	.teaser--text {
		/* color: gray; */
		font-size: 4.5vw;
		line-height: 1.1em;

	}
}



/* ==========================================================================
   Fix for 100vh
   ========================================================================== */


/**
 * https://allthingssmitty.com/2020/05/11/css-fix-for-100vh-in-mobile-webkit/
 */


/**
 * https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
 */

.viewport-height-trick {
	height: 100vh;
	/* Use vh as a fallback for browsers that do not support Custom Properties */
	height: calc(var(--vh, 1vh) * 100);
	height: -webkit-fill-available;
}



/* ==========================================================================
   Dynamische GGTT Wortmarke
   ========================================================================== */

.logotext {
	font-size: 2.0rem;
	line-height: 0.7em;
	margin-left: 0.05em;
	margin-right: 0.05em;
}

@media screen and (min-width: 600px) {
	.logotext {
		font-size: 1.9rem;
	}
}



/**
 * Teaser für Desktop
 *
 * Workmarke bleibt fixed restliche Seite scrollt darüber hinweg.
 *
 * 1. Wichtig weil sonst das grid aus uikit nicht korrekt dargestellt wird
 */


.teaser {
	position: fixed;
	/* 1 */
	min-width: 100%;
	z-index: 0;
}


/* Diagonale Linie zwischen GG und TT
   ========================================================================== */

.dia-line {
	background: linear-gradient(to bottom right,
			#000 calc(50% - 1px),
			#00ff00,
			#000 calc(50% + 1px));

	/* background: linear-gradient(to bottom right, #000 0% calc(50% - 1px), #00FF00 calc(50% - 1px) 50%, #000 50% 100% ); */
	/* background: -o-linear-gradient(top left, #000 0% calc(50% - 1px), #00FF00 calc(50% - 1px) 50%, #000 50% 100% ); */
	/* background: -webkit-linear-gradient(top left, #000 0% calc(50% - 1px), #00FF00 calc(50% - 1px) 50%, #000 50% 100% ); */
}


/* Diagonale Linie in grau nicht im layout verwendet
   ========================================================================== */

.dia-line-gray {
	background: linear-gradient(to bottom right, #000 0% calc(50% - 1px), #6D6E6D calc(50% - 1px) 50%, #000 50% 100%);
}





/* Dot Nav */

.uk-dotnav>*>* {
	width: 7px;
	height: 7px;
	margin-bottom: 4px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.6);
}

@media screen and (min-width: 30em) {
	.uk-dotnav>*>* {
		width: 9px;
		height: 9px;
		border-radius: 50%;
	}
}

@media screen and (min-width: 30em) and(max-width: 60em) {
	.uk-dotnav>*>* {
		width: 10px;
		height: 10px;
		border-radius: 50%;
	}
}

@media screen and (min-width: 60em) {
	.uk-dotnav>*>* {
		width: 10px;
		height: 10px;
		border-radius: 50%;
	}
}


/* Hover + Focus */
.uk-dotnav>*> :hover,
.uk-dotnav>*> :focus {
	background-color: rgba(255, 255, 255, 0.6);
	outline: none;
	border-color: transparent;
}

/* OnClick */
.uk-dotnav>*> :active {
	background-color: rgba(255, 255, 255, 0.2);
	border-color: transparent;
}

/* Active */
.uk-dotnav>.uk-active>* {
	background-color: rgba(255, 255, 255, 0.9);
	border-color: transparent;
}





/* ==========================================================================
   Preloader
   ========================================================================== */


.preloader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: #000;
	z-index: 9999;
}



/* Loading Typo */

.preloader-text {
	/* font-family: sans-serif; */
	font-size: 30px;
}

.preloader-text:after {
	overflow: hidden;
	display: inline-block;
	vertical-align: bottom;
	-webkit-animation: ellipsis steps(4, end) 900ms infinite;
	animation: ellipsis steps(4, end) 900ms infinite;
	content: "\2026";
	/* ascii code for the ellipsis character */
	width: 0px;
}

@keyframes ellipsis {
	to {
		width: 1.25em;
	}
}

@-webkit-keyframes ellipsis {
	to {
		width: 1.25em;
	}
}