@import url("jost.min.css");
	
	body {
		overflow-y: scroll;
	}
	
	body, input, select, textarea {
		font-family: Jost;
		padding: 0;
		font-size: 12pt;
		color: grey;
		hyphens: auto;
	}
	
	h2 {
		font-family: Jost-Thin;
		font-size: 1.2em;
	}

	* {
		margin: 0;
		padding: 0;
        max-width: 100%;
	}
    
 	img {
        max-width: 100%;
	}
	
	article {
		margin: .5em;
		border-radius: 2em;
		padding: 1em;
		border-style: solid;
		border-color: lightblue;
	}

	.code {
		border-color: lightblue;
	}

	.header_code {
		color: lightblue;
	}

	.code a{
		color: darkcyan;
		padding: 1px 3px 1px 3px;
		border-top: 1px solid grey;
		border-right: 1px solid grey;
		border-bottom: 1px solid grey;
		border-left: 1px solid grey;
		border-radius: 0.3em;
	}

	.note {
		border-color: lightgrey;
	}

	.header_note {
		color: lightgrey;
	}

	.note a {
		color: grey;
		padding: 1px 3px 1px 3px;
		border-top: 1px solid grey;
		border-right: 1px solid grey;
		border-bottom: 1px solid grey;
		border-left: 1px solid grey;
		border-radius: 0.3em;
	}

	.game {
		border-color: lightcoral;
	}

	.header_game {
		color: lightcoral;
	}

	.game a {
		color: red;
		padding: 1px 3px 1px 3px;
		border-top: 1px solid grey;
		border-right: 1px solid grey;
		border-bottom: 1px solid grey;
		border-left: 1px solid grey;
		border-radius: 0.3em;
	}

	.review {
		border-color: lightpink;
	}

	.header_review {
		color: lightpink;
	}

	.review a {
		color: pink;
		padding: 1px 3px 1px 3px;
		border-top: 1px solid grey;
		border-right: 1px solid grey;
		border-bottom: 1px solid grey;
		border-left: 1px solid grey;
		border-radius: 0.3em;
	}

	.feature {
		border-color: lightseagreen;
	}

	.feature a {
		color: seagreen;
		padding: 1px 3px 1px 3px;
		border-top: 1px solid grey;
		border-right: 1px solid grey;
		border-bottom: 1px solid grey;
		border-left: 1px solid grey;
		border-radius: 0.3em;
	}

	.tworows {
		grid-row: span 2;
	}

	.threerows {
		grid-row: span 3;
	}

	.content {
		margin: auto;
		width: 100%;
		/*display: flex;*/
	}
	
	.container {
		display: grid; 
		margin: 0.5em;
		grid-template-columns:20% 20% 20% 20% 20%; 
	}
    	
	.container h2 {
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 0.2em;
		line-height: 1em;
		z-index: 2;
	}
	
	.newscontainer {
		display: grid; 
		margin: 0.5em;
		margin-left: 200px;
		grid-template-columns:100px 1fr;
		/*font-size-adjust: 0.8;*/
	}
	
	.simpletext {
		margin: 0.5em;
		margin-left: 200px;
		font-size: 1.2em;
		/*font-size-adjust: 0.8;*/
	}
	
	.simpletext h1 {
		/*font-size: 1.5em;*/
		padding-bottom: 1em;
		padding-top: 1em;
	}
	
	.simpletext h2 {
		/*font-size: 2em;*/
		padding-bottom: 1em;
		padding-top: 1em;
	}
	
	.newstext {
		margin-left: 100px;
	}
	
	.bildstartaktuell {
		position: relative;
		overflow: hidden;
	}
	
	.bildstartaktuell img {
		display: block;
	}
	
	.bildstartaktuell span {
		position: absolute;
		width: max-content;
	}
	
	.picabove {
		margin-top: 0.5em;
		position: initial;
		top: 0px;
		width: 35px;
		height: 35px;
	}
	
	.picunder {
		position: absolute;
		bottom: 0;
		left: 0;
	}
	
	.fit {
		max-width: 100%;
		/*max-height: 100%;*/
	}

	.bordered {
		padding: 0.5em;
	}
	
	.nolink {
		max-width: 100%;
		opacity: 0.45;
		filter: saturate(0);
	}
	
	.hidden {
		padding-top: 0.5em;
	}
	
	#clickme {	
	}
	
	.beschreibungbutton {
		padding-top: 0.5em;
		padding-bottom: 1em;
	}

	.beschreibung {
		padding-top: 0.5em;
	}
	
	.beschreibungbutton a {
		opacity: 1.0;
		color: #719990;
		line-height: 1.5;
		filter: saturate(1);
	}

	a {
		opacity: 0.45;
		text-decoration: none;
		color: grey;
		-webkit-transition: width 2s; /* older browser versions */
		transition: opacity 0.5s;
		/*filter: saturate(0);*/
	}
	
	a:hover {
		opacity: 1.0;
		/*color: black;*/
		/*filter: saturate(1);*/
	}
	
	p {
		padding: 0.2em;
	}
	
	.back {
		font-family: Jost-Thin;
		font-size: 2.2em;
		/*font-size-adjust: 1.5;
		font-weight: thin;*/
	}

	.footer {
		font-size: 0.8em;
	}

	.menu {
		text-align: right;
		max-width: 36em;
	}
	
	.quickmenu {
		padding: 0.5em;
	}
	
	.quickmenu img {
		width: 35px;
	}
	
	.impressum {
		margin: 0.5em;
		/*font-size: 1.5em;*/
	}
	
	.impressum h1 {
		/*font-size: 1.5em;*/
		padding-bottom: 1em;
		padding-top: 1em;
	}
	
	.impressum h2 {
		font-size: 2em;
	}
	
	#active {
		color: black;
		opacity: 1.0;
	}
	
	#over img {
		margin-left: auto;
		margin-right: auto;
		display: block;
		margin-top: 0.5em;
	}
	
	newsitem {
		margin: 0.2em;
	}
	
	newsitem:first-child {
		color: #719990;
		line-height: 1.5;
	}
	
	.newsindex {
		/*font-size-adjust: 0.65;*/
		font-size: 0.65em;
	}
	
	@media screen and (max-width: 1680px) {

		.simpletext {
			margin-left: 100px;
		}

		.newscontainer {
			margin-left: 100px;
		}

		.container {	
			grid-template-columns:25% 25% 25% 25%;
		}
		
		body, input, select, textarea {
			/*font-size: 10pt;*/
		}
	
	}

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

		.simpletext {
			margin-left: 0.5em;
		}

		.newstext {
			
			margin-left: 0.5em;
			
		}

		.newscontainer {
			margin-left: 0.5em;
		}

		.container {
			grid-template-columns:33.33% 33.33% 33.33%; 
		}	
		
		body, input, select, textarea {
			/*font-size: 9pt;*/
		}
		
	}

	@media screen and (max-width: 980px) {
		
		.simpletext {
			margin-left: 0.5em;
		}
		
		.newstext {
			
			margin-left: 0.5em;
			
		}
		
		.newscontainer {
			margin-left: 0.5em;
		}
		
		.container {
			grid-template-columns:50% 50%; 
		}
		
		body, input, select, textarea {
			/*font-size: 8pt;*/
		}
		
		.quickmenu img {
			width: 50px;
		}
		
	}
	
/*BILDERBUTTONS------------ */
	
#bigpic {
	/*nur Definition*/
}

#picmenu {
	display: flex;
	align-items: center;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    align-items: center;
}

.smallpic {
	width: 150px;
	float: left;
	margin: 0.5em;
}

.smallpic img {
	width: 100%;
}

.textcolumn {
	width: 450px;
	float: left;
}

/*PRELOADING------------ */

#overlayer {
  width:100%;
  height:100%;  
  position:absolute;
  z-index:1;
  background: white;
}

.lds-dual-ring {
	display: inline-block;
	width: 64px;
	height: 64px;
	position: relative;
	left: 50%;
	top: 50%;
}

.lds-dual-ring:after {
	content: " ";
	display: block;
	width: 46px;
	height: 46px;
	margin: 1px;
	border-radius: 50%;
	border: 5px solid grey;
	border-color: grey transparent grey transparent;
	animation: lds-dual-ring 1.2s linear infinite;
}

@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}