/* englisch - englisch */
	body {
        font-size:17px;
		font-size:1.1vw;
		background:#750075 url(/pictures/Hintergruende/HG_Swing_02_Violett_Rot_Q70_1920.jpg) center center fixed no-repeat;
  		-webkit-background-size: cover;
  		-moz-background-size: cover;
  		-o-background-size: cover;
  		background-size: cover;
		filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
		-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
		font-family:Georgia, 'Times New Roman', Times, serif;
		color:#ffffff;
		}
.navi a:link 		{ color:white; }
.navi a:visited 	{ color:white; }
.navi a:hover 		{ color:yellow; }
.navi a:focus 		{ color:white; }

.banner {
	position:fixed;
	top:0;
	text-align: center;
	font-size:1.1em;
	background-color:#EB0000;
	color:white;
	text-shadow:1px 1px 1px #666666;
	font-weight:700;
	letter-spacing:.3vw;
	width:100%;
	font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
	z-index: 999;
	padding:0.3vw 0;
}

.navbar-default {
    background-color:rgba(210,210,210,0.3);
	font-weight:bold;
	border:none;
	font-size:1vw;
}
/* title */
.navbar-default .navbar-brand {
	color:#FFF6BB;
}
.navbar-default .navbar-brand:hover {
	color:#FFF6BB;
}
.navbar-default .navbar-brand:focus {
	color:#FFF6BB;
}
/* link */
.navbar-default .navbar-nav > li > a {
	color:#FFF6BB;
	font-weight:normal;
}
.navbar-default .navbar-nav > li > a:hover {
    color: #ff0000;
	font-weight:normal;
}
.navbar-default .navbar-nav > li > a:focus {
	color:#FFF6BB;
	font-weight:normal;
}

/**********  SUB MENUS  *********************/

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
	right: auto;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}

.dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
    border-left-color: #fff;
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}

@media (max-width: 1260px) {
	.navbar-brand {
		display:none;
	}
}
/*** linke Spalte ausblenden ***/
@media (max-width: 992px) {
	.hide-col {
		display:none;
	}
}
@media (max-width: 850px) {
	.navbar-left {
		display:none;
	}
}

/* ==========================================================================
   Full size background video
   ========================================================================== */
   
video#bgvid { 
    position: absolute;
    top: -4em;
    left: 50%;
    /*min-width: 100%;*/
	max-width: 100%;
    /*min-height: 100%;*/
    width: auto;
    height: auto;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(/pictures/Movies/Wellen-Clip-Web-11-Titelbild.jpg) no-repeat;
    /*background-size: cover;*/ 
}
/* Not only does IE8 not recognize the <video> tag, it fails to recognize any HTML5 at all, ignoring every new element in the spec. This is problematic, as we want to be able to at least style the element in the browser and place a background image in it. To do so, we need two things: a single line of JavaScript, inside a conditional comment. */
video { display: block; }

/* While it is possible to feature-detect support for video autoplay with JavaScript (a technique I will cover in a future article), the easiest solution is to use a media query that switches off the video entirely on smaller screens, substituting the placeholder image in the background. */
@media screen and (max-width: 992px) {

html {
	background: url(/pictures/Movies/Wellen-Clip-Web-11-Titelbild.jpg) #000 no-repeat center center fixed;
	-webkit-background-size: cover;
  	-moz-background-size: cover;
	-o-background-size: cover;
  	background-size: cover;
    }
video#bgvid {
    display: none;
    }
}
video#bgvid {
    -ms-transition: 1s opacity;
    -moz-transition: 1s opacity;
    -webkit-transition: 1s opacity;
    transition: 1s opacity;
}
.stopfade { opacity: .5; }

#vidpause {
	border:none;
	background-color:transparent;
	color:#656565;
}

/* ==========================================================================
   End full size background video
   ========================================================================== */

.harmony-bottom {
	height:21.4vw;
}
@media
	(max-width: 992px) {
	.harmony-bottom {
		height:180px;
	}
}


.shadow1 { text-shadow:1px 1px 1px #000000; }
.shadow2 { text-shadow:2px 2px 2px #000000; }

.listen {
	color:#ffffff;
}
.listen a:link    { color:white; text-decoration:none; border-bottom:1px dotted #ffffff; }
.listen a:visited { color:white; text-decoration:none; border-bottom:1px dotted #ffffff; }
.listen a:hover   { color:#dddd00; text-decoration:none; }

.ph_title {
	font-size:10vw;
	letter-spacing:.4vw;
	white-space:nowrap;
	line-height:5.5vw;
	margin-top:2vw;
}
.music_title {
	white-space:nowrap;
	line-height:5vw;
	letter-spacing:.45vw;
	font-size:5.4vw;
}
.science {
	font-size:1.9vw;
	letter-spacing:.3px;
	white-space:nowrap;
}

	.fsize04 a:link	    { color:#FFEFF9; }
	.fsize04 a:visited  { color:#C9C6FF; }
	.fsize04 a:hover	{ color:#FFEFF9; }
	
	.row4 {
		margin-top:2%;
	}
	.table {
		font-size:550%;
		font-family: 'Oranienbaum', serif;
		font-weight:bold;
		color:#84024F;
		color:#ffffff;
		text-shadow: 2px 2px 2px  rgba(0,0,0,1);
		margin-top:-2vw;
	}
	.veda1 {
		font-size:200%;
		color:#ffffff;
		font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
		padding:0 0 0 40px;
	}
	.veda2 {
		font-size:200%;
		color:#ffffff;
		font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
	}
	.veda3 {
		font-size:200%;
		color:#ffffff;
		font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
		padding:0 40px;
		margin-top:50px;
	}
.veda3 a:link    { color:#ffffff; text-decoration:none; border-bottom:1px dotted #ffffff; }
.veda3 a:visited { color:#ffffff; text-decoration:none; border-bottom:1px dotted #ffffff; }
.veda3 a:hover   { color:#ffff00; text-decoration:none; border-bottom:none; }
@media (max-width: 992px) {
	.veda3 {
		font-size:3.4vw;
	}
}

.anwendung {
	font-size:1.9vw;
	line-height:2.5vw;
	color:#ffff00;
	margin-top:1vw;
	text-shadow: 1px 1px 1px #000000;
	font-weight:bold;
	font-style:italic;
}
@media (max-width: 768px) {
	.anwendung {
		font-size:2.5vw;
		line-height:3.5vw;
	}
}
.vvid {
	background-color:yellow;
	color:#000000;
	box-shadow:2px 2px 4px rgba(0,0,0,.7);
	width:90%;
	font-size:1.5vw;
	margin:30px 0;
}
.vvid a:link    { color:#000000; background-color:yellow; text-decoration:none; }
.vvid a:visited { color:#000000; background-color:yellow; text-decoration:none; }
.vvid a:hover   { color:#ffffff; background-color:red; text-decoration:none; }
.vvid:hover     { color:#ffffff; background-color:red; text-decoration:none; }

	.orchestra {
		 font-size:45%;
		 font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
		 line-height:28px;
		 display:block;
		 color:#000000;
	}
	.row5 {
		margin-top:1%;
		margin-left:2%;
	}
	.row6 {
		font-size:1.9vw;
		color:#767676;
		margin-top:40px;
	}
	.row7 {
		font-size:28px;
		color:#535353;
		margin-top:80px;
		margin-left:2%;
	}
	.row8 {
		font-size:1.8vw;
		color:#84024F;
		margin-left:2%;
		width:100%;
		line-height:110%;
		text-shadow:3px 3px 5px rgba(98,98,98,.6);
	}
	.row8 img {
		margin:0 8px;
	}
	.row9 {
		font-size:3vw;
		color:#84024F;
		overflow:hidden;
		text-align:center;
		margin-left:30px;
	}
	.row9 img {
		margin:0 8px;
	}
	.row9 .headline {
		width:96.8%;
		padding:20px 0;
		color:#84024F;
		display:block;
		margin:20px 0;
		line-height:110%;
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fefcea+0,f1da36+100;Gold+3D */
background: #fefcea; /* Old browsers */
background: -moz-linear-gradient(top,  #fefcea 0%, #f1da36 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefcea), color-stop(100%,#f1da36)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #fefcea 0%,#f1da36 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #fefcea 0%,#f1da36 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #fefcea 0%,#f1da36 100%); /* IE10+ */
background: linear-gradient(to bottom,  #fefcea 0%,#f1da36 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#f1da36',GradientType=0 ); /* IE6-9 */
	}

#musicplayer a:link    { color:#ff0000; text-decoration:none; border-bottom:1px dotted #ffffff; }
#musicplayer a:visited { color:#ff0000; text-decoration:none; border-bottom:1px dotted #ffffff; }
#musicplayer a:hover   { color:#00ff00; text-decoration:none; border-bottom:none; }


.page-link a:link    { color:#ffff00; text-decoration:none; }
.page-link a:visited { color:#ffff00; text-decoration:none; }
.page-link a:hover   { color:#ffffff; text-decoration:none; }



	.border-r5 { border-radius:5px; }
	.fsize01 { font-size:170%; font-family: 'Cinzel Decorative', cursive; font-weight:700; } /* PH */
	.fsize02 { font-size:1000%; } /* Digi World Trade */
	.fsize03 { font-size:2.4vw; font-family: 'Cinzel Decorative', cursive; font-weight:700; color:#000000; line-height:3vw; margin-top:10px; display:block; } /* Titel */
	.fsize04 { font-size:80%; letter-spacing:0; } /* Shopping Cart */
	.fsize05 { font-size:95%; } /*Komponist */
	.fsize06 { font-size:4vw; font-family: 'Cinzel Decorative', cursive; font-weight:700; color:#84024F } /* Titel 2 */
	@media (max-width: 1199px) {
	}	
	@media (max-width: 991px) {
	}
	@media (max-width: 767px) {
		.space-left01 	{ margin-left:0; }
	}
	.red { color:#F10083; }
	.panel { margin:7px auto; }
	h3 a:link, a:visited { color:#984700; }
	h3 a:hover, a:focus { color:#F10083; }
	.panel-title { font-size:160%; }
	.list-group-item {
		margin-bottom:3px;
		color:white;
		padding:3px;
		text-align:left;
		font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
		}
	a.list-group-item:hover,
	a.list-group-item:focus { color: #F10083; }
	.list-group-item { font-size:130%; padding:5px 12px; }
	button { width:100%; }
	audio { width:100%; }
	#emu, #gdl, #spe, #hym, #sin, #opr, #orc, #sko, #oko, #amu, #avg, #phc, #int, #ast, #jaz, #pyr, #chi, #fam, #edu, #pop, #kos, #uni, #tra, #eth, #ved, #yog, #med, #drs, #wis { display:none; }
	.shadow { text-shadow: 2px 2px 10px rgba(64,64,64,0.5); }


.selection {
	font-size:1.3vw;
	color:#FFFFFF;
	text-shadow:1px 1px 2px #000000;
	font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
}
.select_link {
	font-size:1.2vw;
	color:#000000;
}
.select_link a:link    { color:#000000; text-decoration:none; }
.select_link a:visited { color:#000000; text-decoration:none; }
.select_link a:hover   { color:#ff0000; text-decoration:none; }

.player_bg {
		background-color:rgba(255,255,0,1);
		padding:1vw;
		border-radius:15px;
		border:1px solid #FFE500;
		box-shadow:2px 2px 15px #000000;
		width:80%;
		color:#000;
		text-shadow:none;
	}
.level_bg {
		background-color:rgba(255,255,0,1);
		padding:.5vw;
		border-radius:10px;
		border:1px solid #FFE500;
		box-shadow:2px 2px 15px #000000;
		font-size:1.4vw;
		margin-right:.5vw;
		color:#000;
		text-shadow:none;
	}
.box51	{
		padding:50px 70px;
		font-family: "Times New Roman", Times, serif;
		color:#000000;
		font-size:1.4vw;
		line-height:1.8vw;
		text-align:center;
		background-image:url(/pictures/Hintergruende/HG_Papier03.gif);
		background-repeat:repeat;
		list-style:none;
		margin-left:9vw;
		}
.box52	{
		padding:15px 70px;
		font-family: "Times New Roman", Times, serif;
		color:#000000;
		font-size:1.4vw;
		line-height:1.8vw;
		text-align:justify;
		background-image:url(/pictures/Hintergruende/HG_Papier03.gif);
		background-repeat:repeat;
		list-style:none;
		margin-left:9vw;
		}
.box52 ul { margin-left:45px; }

.recommendation {
	font-size:1.2vw;
	line-height:1.3vw;
	text-align:left;
	color:#000000;
	background:radial-gradient(#FFA75A,#FFA75A,#FFF9AF);
	padding:20px;
	box-shadow:3px 3px 6px rgba(0,0,0,.3);
	border-radius:10px;
}
.recommendation a:link    { color:#000000; text-decoration:none; }
.recommendation a:visited { color:#000000; background:radial-gradient(#FFA75A,#FFA75A,#FFF9AF); text-decoration:none; }
.recommendation a:hover   { color:#330000; background:radial-gradient(#FFF9AF,#FFF9AF,#FFA75A); text-decoration:none; }
.recommendation:hover     { color:#330000; background:radial-gradient(#FFF9AF,#FFF9AF,#FFA75A); text-decoration:none; }

.expert_bg {
		background-color:rgba(191,0,59,.8);
		padding:1vw;
		border-radius:15px;
		border:1px solid #FFE500;
		box-shadow:2px 2px 15px #000000;
	}
.expert_bg img {
		border-radius:10px;
		border:1px solid #333333;
	}
.name2 {
	font-size:2vw;
	font-family: 'Cardo', serif;
	text-shadow:1px 1px 2px rgba(0,0,0,.9);
	text-align:center;
}
.prof {
	font-size:1.8vw;
}
.about_center {
	font-size:1.4vw;
	text-shadow:1px 1px 2px rgba(0,0,0,.9);
	text-align:center;
}
.name1right_nordentr {
	font-size:2.8vw;
	font-family: 'Cardo', serif;
	text-shadow:1px 1px 1px rgba(0,0,0,1);
	text-align:left;
	margin-left:2vw;
}
.text2right {
	font-size:1.8vw;
	line-height:2.3vw;
	text-shadow:1px 1px 1px rgba(0,0,0,1);
	text-align:justify;
	margin-top:3vw;
	margin-left:2vw;
}

.further_links a:link	    { color:#FFFFFF; border-bottom: 1px dotted #ffffff; }
.further_links a:visited  	{ color:#FFFFFF; border-bottom: 1px dotted #ffffff; }
.further_links a:hover		{ color:#FBBD59; }