/* -----------------------------CSS Document---Webseite----------------------------- */

body {
	margin: 0px 0px;
	background-color: #111;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 14px;
	color: #eee;
	max-width: 1400px;
	margin: auto;
}

a:link {
	color: #f9ffae;
	text-decoration: none;
	font-weight: bold;
}

a:visited {
	color: #eec959;
	text-decoration: none;
}

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

a:active {
	color: #999999;
}

.link {
	color: #de6e21;
	font-weight: bold;
}

h1 {
	font-size: 22px;
	color: blanchedalmond;
}

h2 {
	font-size: 18px;
	color: #FFF;
}

h3 {
	font-size: 14px;
	color: #FFF;
}

p {
	padding: 0 1vw;
}

table {
	padding: 1vw;
}

tr {}

td {
	padding: 1rem;
	vertical-align: top;
	line-height: 1.4rem;
}

.strong {
	font-weight: bold;
}

.imgResponsive {
	max-width: 100%;
	height: auto;
}

iframe {
	width: 560px;
	height: 315px;
}

/* ------header--------- */

#header {
	position: sticky;
	top: 0;
}

#headerImage {
	width: 100%;
	margin-bottom: -4px;
}

#headerFollow {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 1vw 0 0 1vw;
	background-color: #222;
	margin: 0 0 2vw 0;
}

#headerFollowSm {
	display: flex;
	flex-direction: column;
}

#flags {
	padding: 22px 0 16px 16px;
	background-color: #333;
}

#flags img {
	padding: 0 0 0 1vw;
	width: 26px;
}

#sm_box {
	padding: 0.5vw 1vw;
	position: fixed;
	top: 0;
	right: 0;
	background-color: rgba(0, 0, 0, 0.6);
}

#sm_box img {
	width: 1.8vw;
	padding-right: .4vw;
}

#credo {
	/*
	margin-right: 2vw;
	padding: 1vw;
	font-size: 1.8vw;
	color: blanchedalmond;
	box-shadow: 0px 0px 3px 3px #ccc;
*/
	margin: 1vw 0 1.5vw 0;
}

#credoImg {}

/* ------nav ----------- */

nav {
	background-color: #444;
	position: sticky;
	top: calc(21vw * .9);
	border-radius: 0 0 140px 0;
	margin-right: 2vw;
}

nav ul {
	list-style-type: none;
	font-family: 'Josefin Sans', sans-serif;
	margin: 0;
	padding: 10px 2vw 12px;
	font-size: 1.3rem;
}

nav ul li {
	padding: 5px 0 4px 0;
}

nav ul li a:link {
	color: #aecaff;
}

nav ul li a:hover {
	color: white;
}

nav ul li a:visited {
	color: #aecaff;
}

nav .dropdown {
	position: relative;
}

nav li a:hover {
	background: #aeafa5;
}

nav li ul {
	display: none;
}

nav li:hover ul {
	display: inline;
}

nav .dropdown ul {
	position: absolute;
	left: 0;
	top: 100%;
	background: #eee;
	padding: 10px 0;
}

nav .dropdown li {
	white-space: nowrap;
}

nav .dropdown li a {
	padding: 5px 10px;
	font-size: 13px;
	min-width: 200px
}

nav li li a {
	float: none;
	color: #333;
	display: block;
	padding: 8px 10px;
	border-radius: 3px;
	font-size: 13px
}

nav li li a:hover {
	background: #bdc3c7;
	background: #FAFBFB;
}

#menu-icon {
	position: absolute;
	top: 50%;
	display: none;
	background: rgba(128, 128, 128, 0.44);
	padding: 5px 2px 1px 2px;
}

#menu-icon span {
	border: 2px solid #bfbfbf;
	width: 30px;
	margin-bottom: 5px;
	display: block;
	-webkit-transition: all .2s;
	transition: all .1s;
}

/* ------cont ---------- */

article {
	display: flex;
	flex-direction: row;
}

#contBox {
	background-color: #222;
	margin: 0 0 0 0;
	padding: 2vw;
}

/* ------footer -------- */

#boxFooter {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	background-color: #444;
	margin: 2vw 0 0 0;
	padding: 2vw;
}

/* ------media queries --- */

@media only screen and (min-width: 1400px) {
	#credo {
		/*
		padding: 1vw;
		font-size: 1.8rem;
*/
	}
	nav {
		top: 18vw;
	}
}

@media only screen and (max-width: 768px) {
	#sm_box img {
		width: 18px;
	}
	#flags img {
		padding: 0 0 0 1vw;
		width: 20px;
	}
	nav {}
	#headerFollowSm {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	#headerFollow {
		display: flex;
		flex-direction: column-reverse;
		justify-content: space-between;
	}
	#credo {}
	#credoImg {
		width: 100%;
	}
	iframe {
		width: 380px;
		height: 213px;
	}
}

@media only screen and (max-width: 576px) {
	nav {
		display: none;
		width: 100%;
		float: none;
	}
	nav ul {
		float: none;
	}
	nav li {
		float: none;
	}
	nav ul li a {
		float: none;
		padding: 8px;
		display: block;
		font-size: 1rem;
		line-height: 0;
	}
	#menu-icon {
		display: inline;
		position: fixed;
		top: 0;
		cursor: pointer;
		background-color: rgba(0, 0, 0, 0.6);
	}
	#menu-icon.active .first {
		transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		margin-top: 10px;
	}
	#menu-icon.active .second {
		transform: rotate(135deg);
		-webkit-transform: rotate(135deg);
		position: relative;
		top: -9px;
	}

	#menu-icon.active .third {
		display: none;
	}

	#leftNav nav ul ul {
		display: block;
		position: static;
		background: none;
		border: none;
		padding: 0;
	}

	#leftNav nav a:hover {
		background: #698;
		color: #333;
		border-radius: 3px;
	}
	iframe {
		width: 320px;
		height: 180px;
	}

}