@charset "utf-8";

@viewport {
	zoom: 1.0;
	width: device-width;
}

@media screen and (max-width: 700px) {

	.row,
	nav {
		flex-direction: column;
	}

	nav a:link,
	nav a:visited {
		background-image: linear-gradient(to top, #111111 0%, #444444 15%, #444444 90%, #666666 100%);
	}

	nav a:hover,
	nav a:active {
		background-image: linear-gradient(to top, #222222 0%, #555555 15%, #555555 90%, #777777 100%);
	}

	.txtcol {
		column-count: 1;
	}
}

/* -------------------------------------------------------------------------------- */

* {
	box-sizing: border-box;
}

html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
	font-size: 100%;
	/*<!-- preventing 'Giant Font Size Bug' -->*/
}

body {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1em;
	color: #000;
	background-color: #eeeeee;
	background-image: url('../img/bgmain.png');
	margin: 0;
}

header, main, footer, section, article, aside, figure, figcaption {
	display: block;
}

header {
	position: fixed;
	top:0;
	left:0;
	right:0;
	text-align: center;
	background-color: #5f7f6f;
	background-image: radial-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.5) 100%);
	color: #ffffff;
}

header img {
	margin: 16px auto 8px;
}

#headerimg {
	background-image: url('../img/headgc.png');
	background-position: center; 
	height: 150px;
}

#headerlogo {
	position:fixed;
    top:0;
	left:0;
	right:0;
}

.opac {
	opacity: 0.8;
}

nav {
	position: fixed;
	top:270;
	left:0;
	right:0;
	background-color: #444444;
	background-image: linear-gradient(to top, #222222 0%, #555555 15%, #555555 90%, #777777 100%);
	color: #ffffff;
	text-align: center;
	display: flex;
	margin: 200px 10% 50px;
}

nav a:link, 
nav a:visited {
	color: #ffffff;
	display: block;
	padding: 16px;
	background-color: #222222;
	text-align: center;
	text-decoration: none;
	background-image: linear-gradient(to top, #111111 0%, #444444 15%, #444444 90%, #666666 100%);
}

nav a:hover,
nav a:active {
	background-color: #444444;
	background-image: linear-gradient(to top, #222222 0%, #555555 15%, #555555 90%, #777777 100%);
}

main {
	/*background-color: #eeeeee;*/
	margin: auto;
}

footer {
	position:fixed;
    bottom:0;
    left:0;
    height:64px;
    width:100%; 
	background-color: #333333;
	color: white;
	text-align: center;
	padding: 4px;
}

footer a {
	text-decoration: none;
}

footer a:link,
footer a:visited {
	color: white;
	padding: 8px;
	text-decoration: none;
}

footer a:hover,
footer a:active {
	background-color: #444444;
}

/* -------------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
	font-weight: bold;
}

h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

h2 {
	font-size: 1.5rem;
}

h3 {
	font-size: 1.25rem;
}

h4 {
	font-size: 1.15rem;
	font-size: 1rem;
}

h5 {
	font-size: 1rem;
}

strong,
b {
	font-weight: bolder;
}

em,
i {
	font-style: italic;
}

code, kbd, samp, pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

small {
	font-size: 80%;
}

sub, sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

p {
	line-height: 1.5em;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}

a {
	color: #e53;
	background-color: transparent;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

img {
	border-style: none;
}

div.table { 
	display: table; 
	border-collapse:collapse; 
}

div.tr { 
	display:table-row; 
}

div.th { 
	display:table-cell; 
	border-collapse:collapse; 
	padding: 10px 4px;
	font-weight: bold;
}

div.td { 
	display:table-cell; 
	border-collapse:collapse; 
	padding: 10px 4px;
}

button {
	background-color: #888888;
	background-image: linear-gradient(to top, #333333 0%, #888888 15%, #888888 85%, #cccccc 100%);
	color: #ffffff;
	font-size: 1.05rem;
	border: none;
	border-radius: 8px;
	padding: 16px 24px;
	margin: 8px 0;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	width: 98%;
	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
	cursor: pointer;
}

button:hover {
	background-color: #777777;
	background-image: linear-gradient(to top, #333333 0%, #777777 15%, #777777 85%, #cccccc 100%);
	opacity: 1;
}

button:active {
	background-color: #999999;
	background-image: linear-gradient(to top, #333333 0%, #999999 15%, #999999 85%, #cccccc 100%);
	transform: translateY(2px);
}

button a {
	text-decoration: none;
	color: #ffffff;
}

button, input, optgroup, select, textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

button, input {
	overflow: visible;
}

button, select {
	text-transform: none;
}

button, 
[type="button"], 
[type="reset"], 
[type="submit"] {
	-webkit-appearance: button;
}

button::-moz-focus-inner, 
[type="button"]::-moz-focus-inner, 
[type="reset"]::-moz-focus-inner, 
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

button:-moz-focusring, 
[type="button"]:-moz-focusring, 
[type="reset"]:-moz-focusring, 
[type="submit"]:-moz-focusring { 	
	outline: 1px dotted ButtonText;
}

fieldset {
	padding: 0.35em 0.75em 0.625em;
}

legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

progress {
	vertical-align: baseline;
}

textarea {
	overflow: auto;
}

[type="checkbox"], 
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

details {
	display: block;
}

summary {
	display: list-item;
}

template {
	display: none;
}

[hidden] {
	display: none;
}

abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/* -------------------------------------------------------------------------------- */

#sideH {
	color: #4f5f7f;
	font-size: 1.2rem;
	font-weight: bold;
	text-shadow: 3px 3px 5px gray;
	margin: 16px 0;
}

#headertitel {
	color: white;
	text-align: center;
	text-decoration: none;
	font-family: sans-serif;
	font-size: 2em;
	text-shadow: 1px 1px 2px black, 0px 0px 25px #222222, 0px 0px 5px darkblue;
	margin-top: 12px;
	margin-bottom: 24px;
}

#dialogbox {
	text-align: right;
	/*border: outset;
	border-radius: 16px;
	background-color: #dddddd;*/
	padding: 24px;
	width: 500px;
	margin-left: auto;
	margin-right: auto;
}

/* -------------------------------------------------------------------------------- */

.formbox {
	border-top: none;
	border-left: none;
	border-right: none;
	border-bottom: 1px dotted #333333;
}

.home {
	width: 80%; 
	margin: 0 auto; 
	padding: 12px 64px; 
	text-shadow: gray 2px 2px 3px; 
	font-weight: bold; 
	background-color: rgba(255,255,255,0.7); 
	border-radius: 24px;
	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2);

}

.prod {
	width: 80%; 
	margin: 0 auto; 
	padding: 8px 64px; 
	text-shadow: gray 2px 2px 3px; 
	font-size: large;
	background-color: rgba(255,255,255,0.7); 
	border-radius: 24px;
	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
	border: 1px solid gray;
}

.highlight {
	background-color: #998877;
	background-image: linear-gradient(to top, #443322 0%, #998877 15%, #998877 85%, #ddccbb 100%);

}

.disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.row {
	display: flex;
	flex-wrap: wrap;
	padding: 0;
}

.side {
	flex: 20%;
	max-width: 320px;
	padding: 16px;
	background-color: #dddddd;
}

.main {
	flex: 80%;
	padding: 16px;
}

.txtcol {
	column-count: 2;
	gap: 3em;
	column-rule: 4px solid #dddddd;
	hyphens: auto;
	margin-right: 32px;
	margin-bottom: 32px;
}

.tar {
	text-align: right;
}

.tal {
	text-align: left;
}

.tac {
	text-align: center;
}

.w260 {
	width: 260px;
}

.w267 {
	width: 267px;
}

/* -------------------------------------------------------------------------------- */

div.neon {
	font-family: "Kalam", cursive;
	font-weight: 700;
	font-style: normal;
	color: beige;
	font-size: 2.8em;
	text-align: Center;
	text-shadow: 3px 3px 5px #000032;
	padding: 35px;
	display: inline-flex;
	justify-content: center;
	align-items: center;	
	position: relative;
	margin-top: -15px;
}
div.neon span.Letter {
	animation: FlickeringLight 2s linear reverse infinite;
}
@keyframes neonGlow {
	0% {
		text-shadow: 0 0 10px rgba(193, 168, 209, 0.6), 0 0 40px rgba(193, 168, 209, 0.6),
		0 0 22px rgba(193, 168, 209, 0.6), 0 0 40px rgba(130, 188, 238, 0.6),
		0 0 60px rgba(173, 130, 238, 0.6), 0 0 80px rgba(238, 130, 238, 0.1),
		0 0 100px rgba(238, 130, 238, 0.1), 0 0 140px rgba(238, 130, 238, 0.1),
		0 0 200px rgba(238, 130, 238, 0.1);
	}
	100% {
		text-shadow: 0 0 2px rgba(193, 168, 209, 0.5), 0 0 1px rgba(193, 168, 209, 0.5),
		0 0 10px rgba(193, 268, 209, 0.5), 0 0 20px rgba(238, 230, 238, 0.5),
		0 0 30px rgba(238, 230, 238, 0.5), 0 0 40px rgba(238, 230, 238, 0.5),
		0 0 50px rgba(168, 230, 238, 0.9), 0 0 80px rgba(179, 230, 238, 0.9);
	}
}
@keyframes FlickeringLight {
	0% {opacity: 0.4}
	5% {opacity: 0.5}
	10% {opacity: 0.6}
	15% {opacity: 0.85}
	25% {opacity: 0.5}
	30% {opacity: 1}
	35% {opacity: 0.1}
	40% {opacity: 0.25}
	45% {opacity: 0.5}
	60% {opacity: 1}
	70% {opacity: 0.85}
	80% {opacity: 0.4}
	90% {opacity: 0.5}
	100% {opacity: 1}
}