body, html {
	background-color: #202020;
	font-family: 'Play', sans-serif;;
	font-size: 0.95em;
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
}

*---------------------------------------*/
/* manuelle Verschieben in der Playlist */
/*--------------------------------------*/
#sortable {list-style-type: none;width: 100%;}
#sortable li {font-size: 1.2em;}



#hintergrund {
 	object-fit: cover;
 	width: 100%;
	height: 100%;
}

#hintergrund_1 {
 	object-fit: cover;
 	width: 100%;	
}

.topnav {
  
 display:block;
  background-color: transparent;
  position: relative;
}

.topnav #myLinks {
  display: none;
}

.topnav a {
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}

.topnav a.icon {
  background: transparent;
  display: block;
  position: absolute;
  right: 30px;
  top:80px;
  font-size:24px;
}

.topnav a:hover {
  
  color:white;
}

.active {
  background-color: transparent;
  color: white;
}

.topnav_normal {
  display:none;
  background-color: black;
}

p {
	font-size: 1.3em;
}

.nav-link {
	color:white;
	font-size: 1.4em;
}

.navbar-toggler-icon {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

@media only screen and (orientation: landscape) {
 	.fullpage {
 		widht: 100wh;
 		/* height: 100vh; */
 		background-image: url("../img/stadion_1280_1920.jpg");
 		background-repeat: no-repeat;
 		background-size: 100% 100%;
	}
}

@media only screen and (orientation: portrait) {
	.fullpage {
	 	widht: 100wh;  
		height: 100vh; 
		background-image: url("../img/stadion_1280_1920.jpg");
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
}

#hintergrund {
 	object-fit: cover;
 	width: 100%;
	height: 100%;
}

#hintergrund_1 {
 	object-fit: cover;
 	width: 100%;
	
}

.box-login {
	/* Log In Box */
	background-color: white; 
	border-radius:36px;
	width: 350px;
	height: 350px;
	padding: 5px;
	margin-top:20px;
	margin-left: auto;
	margin-right:auto;	
}
	
.form-input {
	border-radius:10px;
	width:100%;
}

.login-button-klein {
	background-color:#000000;
	border-radius:12px;
	width:100px;
	display:inline-block;	
	color:#ffffff;
	font-size:12px;
	font-weight:bold;
	padding:5px 5px;	
	text-decoration:none;
	width:100%;	
}
	
.login-button-klein:hover {
	background-color:white;
	border:1px solid black;
	color:black;
}
	
.login-promo {
	background-color:#000000;
	border-radius:12px;
	width:245px;
	display:inline-block;	
	color:#ffffff;
	font-size:12px;
	font-weight:bold;
	padding:5px 5px;	
	text-decoration:none;	
}
	
.login-promo:hover {
	background-color:white;
	border:1px solid black;
	color:black;
}

.brand-logo-blue {
	color:#244673;
	font-size: 48px;
	font-style: italic;	
}

.anmeldung_deny_red {
	color:#ff0000;
	font-size:12px;		
}

.anmeldung_deny_black {
	color:#000000;
	font-size:12px;	
}
	
.box-page-deny {
	/* Deny Box */
	background-color: white; 
	border-radius:36px;
	width: 80vw;
	height: 30vh;
	padding: 10px;
	margin-top:70px;
	margin-left: auto;
	margin-right:auto;	
	}
	
.vorname {
	color:white;
	font-size: 7vw;
	font-style: normal	;	
}

.box-video-titel {
	background-color:#ffffff;
	border-radius:12px;
	width:100%;
	display:inline-block;		
	color:#000000;	
	font-size:14px;
	font-weight:bold;
	margin-bottom:10px;			
	text-decoration:none;		
}

/***********************/
/* extra small devices */
/***********************/

p {
	font-size: 0.8em;
}
div#box-oben {
	/* Box für Schriftzug MFS Player */
	/* border: 3px solid green; */
	width:100%;
	overflow: auto;
	/* background-color: lightgreen; */
	margin-top:20vh;
		
}

div#brand-logo {
	color:white;
	font-size: 12vw;
	font-style: normal;		
}

.brand-logo-subline {
	margin-top:-16px;
	color:white;
	font-size: 3.5vw;
	font-style: italic;	
}

.login-button {
	background-color:#000000;
	border-radius:12px;
	/* border:1px solid white; */
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-size:3.0vw;
	font-weight:bold;
	padding:7px 30px;
	text-decoration:none;
	margin-top:30px;
}

.login-button:hover {
	background-color:white;
	color:black;
	border:1px solid black;
	text-decoration:none;	
}
	
	
div#box-unten {
	/* Box Schriftzug einfach besser... */
	/* border: 3px solid green;  */
	 margin-top:80px;
	 width:100%;
	overflow: auto;
	/*  background-color: lightgreen; */	
	}
	
	
.brand-slogan {
	color:white;
	font-size: 4.5vw;
	font-style: italic;
	margin-left:5.5vw;
	}

.brand-slogan-more {
	color:white;
	font-size: 3.5vw;
	font-style: italic;	
	margin-left:3.5vw;
}

.box-start {
	background-color:#ffffff;
	border-radius:12px;
	width:100%;
	display:inline-block;		
	color:#000000;
	font-size:21px;
	font-weight:bold;
	padding:5px 5px;
	margin-bottom:25px;	
	text-decoration:none;		
}
	
.box-start-black {
	background-color:#000000;
	border-radius:12px;
	width:100%;
	display:inline-block;		
	color:#ffffff;
	font-size:18px;
	font-weight:bold;
	padding:5px 5px;
	text-decoration:none;	
}
		
.btn-category {
	border-radius:20px;
	margin-bottom:30px;
}
	
.btn-subcategory {
	width:250px;
	border-radius:20px;
	margin-top:20px;
}
	

.icon {
	padding-left: 45%;
	position: absolute;
	top: 60%;
	margin-top: -48px;
	color:white;
	font-size:36px;
	cursor:pointer;
}

.box-video-subinfo {
	background-color:#ffffff;
	border-radius:6px;
	width:35px;
	display:inline-block;
	color:#000000;
	font-size:9px;
	font-weight:normal;
	padding:5px 0px;
	text-decoration:none;
}

.into_playlist {
	background-color:#00ff00;
	border-radius:6px;
	width:50px;
	display:inline-block;
	color:#000000;
	font-size:9px;
	font-weight:normal;
	padding:5px 3px;
	text-decoration:none;
	float:right;
	cursor:pointer;
}

.outof_playlist {
	background-color:#ff0000;
	border-radius:6px;
	width:35px;
	display:inline-block;
	color:#000000;
	font-size:9px;
	font-weight:normal;
	padding:5px 3px;
	text-decoration:none;
	float:right;
	cursor:pointer;
	margin-top:4px;
}


.title-subcategory  {
	background-color:black;
	color:white;
	border-radius:12px;
	border-color:white;
	font-size:1.0em;
}

iframe {
	border: 5px solid white;
}

img.rund_border {
	vertical-align: middle;
	border-style: solid;
	border-width: 1px;
	width: 150px;
}
	
img.rund {
	vertical-align: middle;
	width: 180px;
}	

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {  
 
}
 
/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {  
 
}
 
 /*****************************************/
/* Large devices (desktops, 992px and up) */
/*****************************************/
@media (min-width: 992px) { 

	p {
		font-size: 1.1em;
	}
	
	.box-video-subinfo {
		background-color:#ffffff;
		border-radius:6px;
		width:100px;
		display:inline-block;

		color:#000000;

		font-size:14px;
		font-weight:normal;
		padding:5px 0px;

		text-decoration:none;
	}

	.into_playlist {
		background-color:#00ff00;
		border-radius:6px;
		width:100px;
		display:inline-block;
		color:#000000;
		font-size:14px;
		font-weight:normal;
		padding:5px 3px;
		text-decoration:none;
		float:right;
	}

	.outof_playlist {
		background-color:#ff0000;
		border-radius:6px;
		width:100px;
		display:inline-block;
		color:#000000;
		font-size:14px;
		font-weight:normal;
		padding:5px 3px;
		text-decoration:none;
		float:right;
	}    
	.icon {
		padding-left: 45%;
		position: absolute;
		top: 50%;
		margin-top: -48px;
		color:white;
		font-size:88px;
	}
	.title-subcategory{
		font-size:24px;
	} 

	@media only screen and (orientation: landscape) {
 		.fullpage {
 			widht: 100wh;
 			/* height: 100vh; */
 			background-image: url("../img/stadion_1280_1920.jpg");
 			background-repeat: no-repeat;
 			background-size: 100% 100%;
		}
	}

	@media only screen and (orientation: portrait) {
		.fullpage {
			widht: 100wh;
			height: 100vh;
			background-image: url("../img/stadion_1280_1920.jpg");
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}
	}
 }
 
 /******************************************************/
/* Extra large devices (large desktops, 1200px and up) */
 /******************************************************/
@media (min-width: 1200px) { 

	div#box-oben {
		/* Box für Schriftzug MFS Player */
		/* border: 3px solid green; */
		width:100%;
		overflow: auto;
		/* background-color: lightgreen; */
		margin-top:10vh;	
	}	

	div#box-unten {
		/* Box Schriftzug einfach besser... */
		/* border: 3px solid green;  */
		margin-top:50px;
		width:100%;
		overflow: auto;
 		/*  background-color: lightgreen; */	
	}
	
	.box-video-subinfo {
		background-color:#ffffff;
		border-radius:6px;
		width:100px;
		display:inline-block;
		color:#000000;
		font-size:14px;
		font-weight:normal;
		padding:5px 0px;
		text-decoration:none;
	}

	.into_playlist {
		background-color:#00ff00;
		border-radius:6px;
		width:100px;
		display:inline-block;
		color:#000000;
		font-size:14px;
		font-weight:normal;
		padding:5px 3px;
		text-decoration:none;
		float:right;
	}

	.outof_playlist {
		background-color:#ff0000;
		border-radius:6px;
		width:100px;
		display:inline-block;
		color:#000000;
		font-size:14px;
		font-weight:normal;
		padding:5px 3px;
		text-decoration:none;
		float:right;
	}    
	.icon {
		padding-left: 45%;
		position: absolute;
		top: 50%;
		margin-top: -48px;
		color:white;
		font-size:88px;
	}
	.title-subcategory{
		font-size:24px;
	}
	
	.topnav {
		overflow: hidden;
		display:none;
		background-color: transparent;
		position: relative;
	}

	.topnav_normal {
	display:block;
	background-color:transparent;
	  }
  
	.nav-link {
	font-size:20px;
	padding-top:1.8em;
	}
	
	.nav-link:hover{
		font-size:20px;
		padding-top:1.8em;
		color:white;
	}
	@media only screen and (orientation: landscape) {
 		.fullpage {
 		
 			width: 100wh; 
 			background-image: url("../img/stadion_1280_1920.jpg");
 			background-repeat: no-repeat;
 			
 		
		}
	}

	@media only screen and (orientation: portrait) {
		.fullpage {
		
			background-image: url("../img/stadion_1280_1920.jpg");
			background-repeat: no-repeat;
			background-size: 100% auto;
		}
	}
}