/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0; padding:0;}
a{-webkit-tap-highlight-color:transparent;background-color:transparent;color:inherit;text-decoration:none;}
a:active,a:hover{outline-width:0}
img{border-style:none}svg:not(:root){overflow:hidden}
button,html [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}
/* End extract */


/* Basic Variables (you could store other constants than colors here too) */
:root {
	--turkis: #8ed8f8;
	--brand-orange: #f57e20;
	--brand-brown: #4b2b1f;
	--brand-yellow: #ffc20e;
	--brand-yellow-type: #ffd800;
	--brown-70: #6f4a46;
	--backdrop: #f2edec;
	--background: #ffffff;
	--background-secondary: #ffeee0;
	--link: #e5690b;
	--ral-9006: #a1a1a0;
}


/* Basic Settings */
body{
	height: 100%;
	font: normal 16px/1.5 pt_sans, sans-serif;
	color: black;
	background-color: var(--backdrop);
}

h1, h2, h3, h4 { color: var(--brand-brown); }
h1, h2 {
    text-transform: uppercase;
    font-weight: normal;
    font-family: "AgendaMedium";
}
h1 { letter-spacing:2px; }
h2 { letter-spacing:4px; }


/* Basic Header, Menu, Main & Footer Settings */
.page {
	max-width:1250px;
	margin: auto;
	background-color: var(--background);
	box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important
}

header.banner {
	min-height: 100px;
	width: 100%;
	margin: auto;
	background-color: var(--brand-orange);
	display: grid;
  	grid-template-columns: 1fr;
  	align-items: stretch;
}
header.banner > a > img {
	padding-top: 20px;
	padding-bottom: 20px;
	margin-left: 30px;
	margin-right: 30px;
	width: 80%;
	max-width: 400px;
}
header.banner > div.langs {
	padding-top: 0px;
	padding-bottom: 10px;
	padding-right: 30px;
	font-size: 12px;
	font-weight: bold;
	text-align: right;
	color: white;
}

menu {
	padding: 0;
	min-height: 32px;
	max-width:1250px;
	margin: auto;
	background-color: var(--brand-yellow);
	color: var(--brand-brown);
	font-size: 16px;
	font-weight: bold;
}
menu > ul {
	list-style-type:none;
	margin: 0px;
}
div.banner-stripe {
	max-height: 200px;
	overflow-y: hidden;

}
div.banner-stripe > img {
	width: 100%;
}

main > header {
	min-height: 60px;
	text-align: center;
}
main > header > h2 {
	margin-top: -20px;
	font-size: 18px;
	font-weight: lighter;
}
main > article {
	width: 100%;
	margin-top: 30px;
	margin-bottom: 30px;
}
main > article > h2 { text-align: center; }

footer {
	position: relative;
	bottom: 0;
	min-height: 150px;
	max-width:1250px;
	margin: auto;
	background-color: var(--brand-brown);
	color: white;
}
footer > div {
	padding: 20px;
}

#ContactFormFrame {
	width: 100%;
	height: 500px;
}


/* Navi Settings */
a.active { color: var(--brand-orange); }

ul.grid {
	padding: 8px;
 	display: none;
}
ul.grid > li { text-align: center; }
ul.grid > li > a:hover { color: var(--brand-orange); }

div.dropdown-hover{
	padding-top: 8px;
	padding-bottom: 8px;
	text-align: center;
	width: 100%;
	display: inline-block;
	cursor: pointer;
}
li.dropdown-hover{
	display: inline-block;
	cursor: pointer;
}

div.dropdown-content{
	cursor:auto;
	display:none;
	position:absolute;
	margin:0;
	padding:0;
	color: var(--brand-brown);
	background-color: var(--brand-yellow);
	text-align: center;
}
div.dropdown-hover > div.dropdown-content{ width: 100%; }
li.dropdown-hover > div.dropdown-content{ width: 250px; }

div.dropdown-hover:hover > div.dropdown-content{
	display: block; z-index:1;
}
li.dropdown-hover:hover > div.dropdown-content{
	display: block; z-index:1;
}
div.dropdown-content > a {
	display: block; 
	width: 100%;
	text-align: center;
}
div.dropdown-content > a:hover { background-color: var(--turkis); }


/* Main Content Settings */
main > article.grid_container {
	display: grid;
  	grid-template-columns: 1fr;
  	align-items: stretch;
}
main > article.grid_container_fixed_one_column {
	display: grid;
  	grid-template-columns: 1fr;
  	align-items: stretch;
}
div.grid-item {
	text-align: left;
	font-size: 14px;
	margin: 20px;
}

div.item {
	margin: auto;
	margin-bottom: 40px;
	width: 100%;
	max-width: 500px;
}
div.item > div {
	display: inline-block;
	text-align: left;
	max-height: 300px;
	max-width: 500px;
 	overflow: hidden;
}
div.item > div > img { width: 100%; }
div.item > h2 { font-size: 18px; text-align: center; }
div.item > a.button {
	display: inline-block;
	border-radius: 6px;
	padding: 10px;
	margin: auto;
	background-color: var(--brand-orange);
	color: var(--brand-brown);
	box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 2px 12px 0 rgba(0,0,0,0.19) !important;
	text-align: center;
	font-size: 16px;
	width: 100%;
	max-width: 480px;
}
div.item > a.button:hover, a.button:active {
	color: var(--turkis);
	box-shadow:0 8px 12px 0 rgba(0,0,0,0.2),0 6px 16px 0 rgba(0,0,0,0.19) !important;
}

div.flex-item {
	display: flex;
	flex-flow: row wrap;
	margin: auto;
	margin-bottom: 40px;
	width: 80%;
	max-width: 900px;
	text-align: left;
}
div.flex-item > div {
	flex: 100%;
	margin: auto;
	margin-top: 0px;
	max-height: 300px;
	min-width: 200px;
	max-width: 450px;
 	overflow: hidden;
}
div.flex-item > div.team{
	flex: 70%;
	max-height: 500px;
	min-width: 100px;
	max-width: 500px;
}
div.flex-item > div.image { max-width: 150px; flex: 30%; }
div.flex-item > div > img { width: 100%; }
div.flex-item > div.team > img { width: 100px; }
div.flex-item > div.event-image { max-height: 250px; }

figure.image-item {
	width: 80%;
	max-width: 900px;
	margin: auto;
	margin-bottom: 40px;
}
figure.image-item > img { width: 100%; }

main > article.container {
	margin: auto;
	width: 80%;
}

main > article > div.text-field {
 	width: 80%;
 	max-width: 900px;
 	margin: auto;
}
div.text-field > ul { margin-bottom: 30px; }
div.text-field > a.button {
	display: inline-block;
	border-radius: 6px;
	padding: 10px;
	background-color: var(--brand-orange);
	color: var(--brand-brown);
	box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 2px 12px 0 rgba(0,0,0,0.19) !important;
	text-align: center;
	font-size: 16px;
	font-weight: bold;
}
div.text-field > a.button:hover, a.button:active {
	color: var(--turkis);
	box-shadow:0 8px 12px 0 rgba(0,0,0,0.2),0 6px 16px 0 rgba(0,0,0,0.19) !important;
}

a.link {
	color: var(--brand-orange);
	font-weight: bold;
}

h3 > img { width: 100%; max-width: 300px; }

div.space { margin-top: 30px; }

.border {
	border-width: 1px;
	border-style: solid;
	border-color: var(--brand-brown);
}

table {
	width: 100%;
	text-align: left;
}
th, td {
	padding: 10px;
}
table, tr, td {
	border-width: 1px;
	border-style: solid;
	border-color: var(--brand-brown);
	border-collapse: collapse;
}

/* Footer Settings */
footer > div.grid {
	display: grid;
  	grid-template-columns: 1fr;
  	align-items: stretch;
}
footer > div.grid > div {
	padding-left: 20px;
	text-align: center;
	font-size: 16px;
}
footer > div.grid > div.border-right {
	border-right: none;
}
footer > div.grid > div > h3 {
	font-weight: lighter;
 	color: var(--brand-yellow);
}
footer > div.grid > div > div > a:hover, a:active { color: var(--brand-yellow); }
footer > div.grid > div > img {
	max-height: 40px;
}


/* Responsive */
@media screen and (min-width:612px) {

	header.banner { grid-template-columns: 1fr 1fr; }
	header.banner > a > img { max-width: 500px; }
	header.banner > div.langs {
		padding-top: 20px;
		padding-bottom: 0px;
		shape-margin: 0px;
	}

	div.flex-item > div, div.team { flex: 50%;}
	div.flex-item > div.event-image { max-height: 180px; }

	div.dropdown-hover{display: none;}

	ul.grid {
	 	display: grid;
	  	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
	}

	ul.grid > li.border-right {
		border-right: 1px solid;
		border-color: var(--brand-brown);
	}

	div.item {
		font-size: 20px;
		font-weight: bold;
	}
	div.item > div { max-height: 250px; }

	footer > div.grid {
	  	grid-template-columns: 1fr 1fr;
	}
}

@media screen and (min-width:1024px) {

	main > article { margin-top: 60px; }

	main > article.grid_container { margin-top: 20px; grid-template-columns: 1fr 1fr; }

	div.grid-space {
		margin-top: 30px;
	}

	div.text-item {
		text-align: left;
		font-size: 14px;
		margin: 20px;
	}

	div.flex-item > div.event-image { max-height: 250px; }

	footer > div.grid {
	  	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
	}

	footer > div.grid > div.border-right {
		border-right: 1px solid;
		border-color: white;
	}
}