@charset "utf-8";

@media screen and (min-width:800px){
	#container{
		display:flex;
		flex-direction:row;
		margin-top: 20px;
	}
	
	h3{
		font-size: inherit;
		margin-bottom: -0.9em;
		font-style: normal;
		font-weight: normal;
		text-decoration: underline;
		padding: 0px;
	}
	
	h3 + p{
		margin-top: 0em;
		padding:  0px;
		font-weight: normal;
	}
	
	
	table {
		margin: 90px auto 50px auto;
		border-spacing: 1px;
		font-size: 1.18em;
	}

	article{
		font-size: 1.18em;
		text-align: justify;
	}
	
	article.bild {
		width: 30%;
		height: auto;
		padding: 40px 25px 0px 0px;
		
	}
	
	article p {
		margin: 16px 0px;
	}
	
	
	header {
		margin: -19px 0px -4.3px 0px;
		padding: 0px;
		width: 100.5%;
		height: auto;
	}
	
	
	header #logo {
		display: inline-block;
		width: 30%;
		margin: 0px;
		padding: 0px;
		min-width: none;
	}

	header #headerimg {
		display: inline-block;
		width: 69.3%;
		margin: 0px;
		padding: 0px;
		min-width: none;
	}
	
	.toggle, [id^=drop] {
		display: none;
	}
	
	nav {
		width: 99.99%;
	}
	
	nav ul {
	  list-style-type: none;
	  margin: 0px 0px 0px 30.5%;
	  padding: 0px;
	  overflow: hidden;
	  background-color: #FFCC66;
	}

	nav ul li {
	  display: inline-block;
	}

	nav ul li a, .dropbtn {
	  display: inline-block;
	  color: black;
	  text-align: left;
	  
	  padding-bottom: 6px;
	  padding-top: 6px;
	  padding-left: 4px;
	  padding-right: 14px;
	  
	  text-decoration: none;
	  
	}

	nav ul li a:hover, .dropdown:hover .dropbtn {
	  background-color: #990033;
	  color: white;
	}

	nav ul li.dropdown {
	  display: inline-block;
	}

	.dropdown-content {
	  display: none;
	  position: absolute;
	  background-color: #FFCC66;
	  min-width: 160px;
	  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	  z-index: 1;
	}

	.dropdown-content a {
	  color: black;
	  padding-bottom: 6px;
	  padding-top: 6px;
	  padding-left: 3px;
	  padding-right: 10px;
	  text-decoration: none;
	  display: block;
	  text-align: left;
	}

	.dropdown-content a:hover {background-color: #990033;}

	.dropdown:hover .dropdown-content {
	  display: block;
	}
}


@media screen and (max-width:800px){
	
	table {
		margin: 90px auto 50px auto;
		border-spacing: 1px;
		font-size: 1em;
	}
	
	
	header {
		margin: 2.35em 0px -4.3px 0px;
		padding: 0px;
		width: 100.5%;
		height: auto;
	}
	
	
	header #logo {
		display: inline-block;
		width: 29.5%;
		margin: 0px;
		padding: 0px;
		min-width: none;
	}

	header #headerimg {
		display: inline-block;
		width: 69%;
		margin: 0px;
		padding: 0px;
		min-width: none;
	}
	
	
	article{
		font-size: 1em;
		text-align: left;
		padding: 0em 1em;
	}
	
	article.bild{
		padding: 3% 20%;
	}
	
	article.text {

		text-align: left;
	}
	
	
	h3{
		font-size: inherit;
		margin-bottom: 0em;
		font-style: normal;
		font-weight: normal;
		text-decoration: underline;
		padding: 0px;
		text-align: left;
	}
	
	h3 + p{
		margin-top: 0em;
		padding:  0px;
		font-weight: normal;
	}
	
	
	
	
	
	
	
	#icon{
		font-size: 1.8em;
		padding: 0px;
	}
	
	
	.toggle + a, .menu, .dropdown-content {
		display: none;
	}
	
	
	[id^=drop]:checked + ul, [id^=drop]:checked + div {
		display: block;
	}
	

	nav{
		position: fixed;
		width: 100%;
		top: 0px;
		left: 0px;
	}	
		
	.dropdown-content a {
	  color: black;
	  padding: 6px 10px 6px 20px;
	  text-decoration: none;
	  display: block;
	  text-align: left;
	  font-size: 0.9em;
	}
	
	nav a{
		color: black;
		padding: 6px 10px 6px 3px;
		text-decoration: none;
		display: block;
		text-align: left;
	}
	
	
	nav li {
		display: block;
		width: 100%;
	}
	
	
	nav a:hover {
		background-color: #990033;
		color: white;
	}
	
		/* Stylinf the toggle lable */
	.toggle {
		display: block;
		background-color: #FFCC66;
		padding: 6px 10px 6px 3px;	
		color:black;
		font-size:1em;
		text-decoration:none;
		border:none;
	}
	
	.toggle:hover {
		background-color: #990033;
		color: white;
	}
	
	input{
		display: none;
	}
	
	.dropbtn{
		display: none;
	}
	
}