* {
	box-sizing: border-box;
}

html, body {

	margin: 0;
	padding: 0;

	background-color: #212121;
	font-family: sans-serif;
	color: #ccc;

}

main > div,
main > section > div,
main > .greeter > .text,
main > section > .greeter > .text {
	max-width: 42em;
	margin-left: auto;
	margin-right: auto;
	padding: 1em;
}

main > .greeter,
main > section > .greeter {
	max-width: unset;
	margin-left: 0;
	margin-right: 0;
	padding: 0;
}

main > #halls {
	padding-left: 0;
	padding-right: 0;
}

.logo {
	padding: 1em;
}

.logo img {
	max-height: 9em;
	max-width: 90%;
	margin: 2em 0 1em;

}

.greeter {
	width: 100%;
	padding: 1em;
	background-color: #111;
}

#halls {
	padding: 1em;
	display: flex;
	flex-wrap: wrap;
	justify-content: left;
}

#halls > div {
	position: relative;
	width: 12em;
	margin: 1em;

	background-color: #000;
	overflow: hidden;
	text-align: left;

	display: flex;
	flex-direction: column;
}

/*
#halls img {

	height: 8em;
	margin: 1em;

}
*/

.talkinfo {
	flex-grow: 1;
	padding: 0.5em 1em;
}

.talkinfo h4 {
	margin-top: 0.2em;
	margin-bottom: 0.2em;
	font-weight: bold;
}

#halls a {

	text-decoration: none;

}

#halls ul {

	width: 100%;
	margin: 0;
	padding: 0;

}

#halls ul li {

	list-style: none;

}

#halls ul li a {
	display: block;
	padding: .5em 1em;
}

#halls ul li a:hover {
	color: #000;
}

a {
	color: inherit;
}

a:hover li, #langswitch a:hover {
	color: #000;
	background-color: #f99e01;
}

#stats {
	background-color: #14121d;
}

#controls {
	text-align: center;
}

#controls img {

	display: block;
	height: 10em;
	max-width: 42%;
	margin: 1em auto;

	cursor: pointer;

}

@keyframes rotate {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}

#controls #loading img {
	animation: rotate 2s infinite linear;
}

#statsWrapper {
	text-align: center;
}

#statsButton {

	padding: .4em;

	background-color: #14121d;
	cursor: pointer;

}

h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
	margin-bottom: 0;
}

.text > h1:first-child {
	margin-top: 0;
}

h2 {
	margin-bottom: 1.5em;
}

h1 {
	font-size: 200%;
}

h2 {
	font-size: 133%;
}

.warning {

	padding: 1em;

	background-color: #f77;
	color: #222;

}

body[lang="en"] [data-lang]:not([data-lang="en"]),
body[lang="de"] [data-lang]:not([data-lang="de"]) {
	display: none;
}

#langswitch {
	display: none;
}

body[lang] #langswitch {
	display: block;
}

#langswitch a {
	color: #ff5d42;
	text-decoration: none;

	display: inline-block;
	padding: 0.1em 0.25em;
	margin-right: 0.25em;
	border: 1px solid #ff5d42;
}

body[lang="en"] #langswitch a[data-lang="en"],
body[lang="de"] #langswitch a[data-lang="de"] {
	background-color:#52397f;
}

.sep {
	padding: 0.5em 0;
	border-bottom: 3px solid #333333;
}

body[lang] .sep {
	display: none;
}

#halls > div:nth-child(3n+1) { outline: 1px solid #29ffff; color: #29ffff; }
#halls > div:nth-child(3n+2) { outline: 1px solid #de4040; color: #de4040; }
#halls > div:nth-child(3n+3) { outline: 1px solid #f6f675; color: #f6f675; }

#halls > div:nth-child(3n+1) img { border-bottom: 1px solid #29ffff; }
#halls > div:nth-child(3n+2) img { border-bottom: 1px solid #de4040; }
#halls > div:nth-child(3n+3) img { border-bottom: 1px solid #f6f675; }

#halls > div:nth-child(3n+1) li a { border-top: 1px solid #29ffff; }
#halls > div:nth-child(3n+2) li a { border-top: 1px solid #de4040; }
#halls > div:nth-child(3n+3) li a { border-top: 1px solid #f6f675; }

#halls > div:nth-child(3n+1) li a:hover { background-color: #29ffff; }
#halls > div:nth-child(3n+2) li a:hover { background-color: #de4040; }
#halls > div:nth-child(3n+3) li a:hover { background-color: #f6f675; }