

body {
	/*background-color: #f2f2f2;*/
	background-color: #e6e6e6;
}

p {
	
	font-family: Arial;
	text-align: left;
	padding-left: 10px;
	padding-right: 10px;
	font-size: 25px;
}

.info {
	font-size: 16px;
	line-height: 1.3;
	margin-top: -20px;
	margin-left: 10px;
	text-align: justify;
}

#recht {
	font-size: 13px;		
	text-align: center;
}
	
.pn {
	font-size: 14px;
	text-align: left;
}

#edited { /*Dieses eine Wort für das Portrait*/
	font-size: 14px;
	text-align: center;
	margin-top: 10px;
}

#title {
	font-size: 21px;
}

#title2 {
	font-size: 19px;
}
#p3 {
	border-style: solid;
	padding-right: 0px;
	padding-left: 0px;
	font-size: 14px;
}

a {
	color: black;
}
/*Zitat*/
#quote { 
	font-size: 25px;
	text-align: center;
	font-family: italic;
}


@media (min-width: 1600px) {
	
	#Tipp {
		width: 800px;
	}
	
	#recht {
		margin-left: 600px;
		margin-right: 600px;
		font-size: 17px;
		text-align: center;
	}
	.info {
		width: 1000px;
		font-size: 17px;
		line-height: 1.3;
		margin-top: -27px;
		margin-left: 20px;
	}

	#title {
		font-size: 30px;
	}
	
	#title2 {
		font-size: 26px;
	}
	
	.info {
		font-size: 20px;
	}
	.pn {
		font-size: 25px;
		padding-right: 500px;
	}
	
	#edited {
		font-size: 25px;
	}
	
	#p3 {
		font-size: 20px;
		/*margin-right: 400px;
		margin-left: 3px;*/
		text-align: center;
		margin-right: 20%;
		margin-left: 20%;
	}
	
	#quote { 
		font-size: 40px;
	}

}

/*GlobalWrapper*/
html {
  height: 100%;
}
body {
	height: 92%;
}

.GlobalWrapper {
	margin-right: auto;
	margin-left:  auto; 
	width: 100%; 
	background-color: white;
	min-height: 100%
}

/*Heading*/
h1 {
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 250%;
}

h2 {
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 130%;
	margin-left: 10px;
}

@media (min-width: 1000px) {
	
	h2 {
		font-size: 160%;
	}
	
}

/*Links*/



#links ul {
	list-style-type: none;
	margin: 0;
	padding: 0px;
	background-color: #333;
	font-family: Arial;
	overflow: hidden;
	text-align: left;
	border-radius: 4px;
	font-size: 10px;
	position: absolute;
	Left: 9px;
	Right: 9px;
}

#links {
	margin-bottom: 100px;
}

#links li{
	display: inline-block;
	border-right: solid;
	border-width: 2px;
}

#links li .active {
	border: none;
}

#links li .impressum {
	border: none;
}

#links li a{
	display: block;
	color: white;
	padding: 10px 3px;
	text-decoration: none;
}
 


@media (min-width: 400px) {
	
	#links ul {
		font-size: 14px;
	}
	
	.impressum {
		position: absolute;
		right: 9px;
	}
	
}

@media (min-width: 500px) {
	#links ul {
		font-size: 17px;
	}
}

@media (min-width: 600px) {
	
	#links ul {
		font-size: 19px;
	}
}

@media (min-width: 900px) {
	
	.impressum {
		position: relative;
		margin-left: 60px;
	}

	#links ul {
		Right: auto;
		font-size: 25px;
	}
	#links li a {
		padding: 14px 16px;
	}
}


#links li a:hover:not(.active){
	background-color: #111;
	color: white;
}

.active {
	background-color: #cccccc;
}

.auswahl {
	background-color: #f0f0f0;
	color: black;
}

#firstLink {
	margin-left: 5px;
}
/*Forms*/

.selection {
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 25px;
}

label {
	left-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
}

#check {
	margin-left: 45%;
}

.error {
	color: red;
	font-size: 17px;
	font-family: "Comic Sans MS", cursive, sans-serif;
}

.success {
	color: green;
	font-size: 17px;
	font-family: "Comic Sans MS", cursive, sans-serif;
	text-align: center;
}

.button_wrapper {
	text-align: center;
}

.angaben { /*Für Forms nach Auswahl*/
	position: relative;
	display: inline-block;
	Left: 50%;
	transform: translate(-50%);
}
#angaben_form {
	text-align: right;
}

@media (min-width: 1000px) {
	

	select {	
		font-size: 25px;		
	}
	.button {
		font-size:20px;
		text-align: center;
	}
	
	.edit {
		font-size:20px;
		text-align: center;
	}
	.choice {
		font-size:20px;
		text-align: center;
	}
	.selection {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 150%;
	}

	label {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 100%;
	}
}



/*Köfte Spieß Page*/

.container {
	position: relative;
	margin-top: 10px;
	text-align: center;
	display: inline-block;
	Left: 50%;
	transform: translate(-50%);
}

#KoefteSpiessBild {
	border-style: solid;
	border-color: black;
	border-width: 3px;
	max-height: 98%;
	max-width: 98%;
}

.content {
	font-family: Arial;
	font-size: 40px;
	position: absolute;
	left: 50%;
	transform: translate(-50%);
	bottom: 5px;
	background: rgba(0, 0, 0, 0.5);
    color: white;
	overflow: hidden;
	width: 98%;
}

.container a:link{
	text-decoration: none;
	color: white;
	border: 0;
}

.container a:visited{
	text-decoration: none;
	color: white;
	border: 0;
}

.container a:hover {
	color:  gray;
	border: 0;
}
#Gewinner {
	font-size: 25px;
}

@media (min-width: 1600px)  {
	#Gewinner {
		font-size: 45px;
	}
}


/*Steckbriefe*/
.row{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	flex-wrap: wrap;
}

.column  {
	text-align: left;
	border-bottom-style: solid;
	padding: 10px;
}

@media (min-width: 1000px) {
	.column {
		border-style: solid;
	}
	
	
}

/*Portrait*/

.portrait {
	position: relative;
	margin-top: 10px;
	margin-left: 33px;
	max-width: 350px;
}

@media (min-width: 1000px) {
	.portrait {
		margin-top: -300px;
		max-width: 600px;
		display: inline-block;
		Left: 50%;
		transform: translate(-50%);
		/*padding: 20px;
		border-style: double;*/
	}
}

.portrait_bild {
	border-style: solid;
	border-color: black;
	border-width: 3px;
	max-height: 98%;
	max-width: 98%;
}

/*Memes*/

.meme {
	max-width: 350px;
}

@media (min-width: 1000px) {
	.meme {
		max-width: 550px;
	}
}

/*Video*/

#video {
	position: relative;
	Left: 50%;
	transform: translate(-50%);
	border-style: solid;
	border-color: black;
	width: 368px;
	height: 207px;
}

@media (min-width: 1000px) {
	#video {
		width: 960px;
		height: 540px;
	}
}
/*Download button for video*/
#downloadRow {
	position: relative;
	Left: 50%;
	transform: translate(-50%);
	
}

.download {
	background-color: white;
	border: 2px solid #062a4e;
	border-radius: 5px;
	color: black;
	padding: 12px 30px;
	font-size: 18px;
	text-decoration: none;
	display: inline-block;
	font-family: Arial;
	transition-duration: 0.4s;
	margin: 0px 4px 5px;
	text-align: center;
	width: 80px;
}

@media (min-width: 1000px) {
	.download {
		border-width: 3px;
		font-size: 30px;
		width: 150px;
	}
}

.download:hover {
	background-color: #a4b8d0;
	color: white;
}

#gesamterFilmDownload {
	width: 250px;
}
/*
#POWIDownload {
	border-color: #a3a4ae;
	color: #a3a4ae;
}

#POWIDownload:hover {
	background-color: #a3a4ae;
	color: white;
}

#EN1Download {
	color: #bf2b1e;
	border-color: #bf2b1e;
}

#EN1Download:hover {
	background-color: #bf2b1e;
	color: white;
}

#EN2Download {
	color: #e91f1f;
	border-color: #e91f1f;
}

#EN2Download:hover {
	background-color: #e91f1f;
	color: white;
}

#DEDownload {
	border-color: #2e316d;
	color: #2e316d;
}

#DEDownload:hover {
	background-color: #2e316d;
	color: white;
}

#GEDownload {
	color: #f7b300;
	border-color: #f7b300;
}

#GEDownload:hover {
	background-color: #f7b300;
	color: white;
}

#BIODownload {
	color: brown;
	border-color: brown;
}

#BIODownload:hover {
	background-color: brown;
	color: white;
}

#DGKDownload {
	color: blue;
	border-color: blue;
}

#DGKDownload:hover {
	background-color: blue;
	color: white;
}
#MADownload {
	color: green;
	border-color: green;
}

#MADownload:hover {
	background-color: green;
	color: white;
}
*/
/*Video Auswahl für den Film der akademischen Feier*/
.videoSelectionContainer {
	border: 4px solid #062a4e;
	border-radius: 5px;
}
#left {
	display: none;
}
	
#right {
	display: none;
}

#videoSelectionMobile {
	Left: 50%;
	transform: translate(-50%);
	position: relative;
	display: inline-block;
}

@media (min-width: 1500px) {
	.videoSelectionContainer {
		position: absolute;
		margin-top: 135px;
	}
	
	#left {
		display: block;
		margin-left: 80px;
	}
	
	#right {
		display: block;
		margin-right: 80px;
	}
	
	#videoSelectionMobile {
		display: none;
	}
}

.videoSelectionText {
	font-size: 30px;
	margin-top: 10px;
}

#videoSelectionMobile .videoSelectionText {
	font-size: 33px;
}

#videoSelectionMobile .videoSelectionList {
	font-size: 25px;
}


.videoSelectionList {
	padding: 0;
	list-style-type: none;
	font-family: Arial;
	text-align: left;
	font-size: 30px;
	color: white;
	position: relative;

}

.videoSelectionContainer li {
	border-bottom: 2px solid white;
	text-align: center;
	transition-duration: 0.2s;
	background-color: #a4b8d0;
	margin-bottom: 1px;
}

.videoSelectionContainer li:hover:not(.active) {
	background-color: #124a63;
}

#videoActive {
	background-color: #0b3156;
}
/*for mobile*/
@media (min-width: 1000px) {
	.mobile {
		display: none;
	}
}

