body        {
		font-size:24px;
		font-size:1.2vw;
		background:#7ACBFF url(/pictures/Movies/Wellen-Clip-Web-11-Titelbild.jpg) center center fixed no-repeat;
  		-webkit-background-size: cover;
  		-moz-background-size: cover;
  		-o-background-size: cover;
  		background-size: cover;
		font-family: 'Open Sans', sans-serif;
		color:#000099;
		}
	a:link 		{ color:#000099; }
	a:visited 	{ color:#ff0000; }


.navbar-default {
    background-color:rgba(0,100,255,0.7);
	font-weight:bold;
	border-bottom:none;
	font-family:Baskerville, 'Palatino Linotype', Palatino, 'Century Schoolbook L', 'Times New Roman', serif;
	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;
}
.navbar-default .navbar-nav > li > a:hover {
    color: #ff0000;
}
.navbar-default .navbar-nav > li > a:focus {
    color: #FFF6BB;
}

/**********  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: 1150px) {
	.navbar-brand {
		display:none;
	}
}
@media (max-width: 1050px) {
	#projekte {
		display:none;
	}
}
@media (max-width: 900px) {
	#medien {
		display:none;
	}
}


.img-responsive{
margin:0 auto;
}

.intro_offer {
	background-color:#FF0000;
	color:#FFFFFF;
	font-weight:bold;
	letter-spacing:.3vw;
	font-size:1.3vw;
}

.generation {
	color:#000000;
	padding:5px;
	font-size:1.6vw;
	letter-spacing:.9vw;
	text-align:center;
}
.generation2 {
	background-color:#000066;
	color:#FFFFFF;
	padding:5px;
	font-size:1.6vw;
	letter-spacing:.5vw;
	text-align:center;
}
	.row4 {
		margin-top:2%;
	}
	.play_time {
		 color:#000066;
		 font-size:1.2vw;
	}
	.table {
		font-size:2vw;
		font-family: 'Open Sans', sans-serif;
		font-weight:bold;
		color:#000066;
		text-shadow: 5px 5px 10px rgba(64,64,64,.5);
		white-space:nowrap;
	}
	.orchestra {
		 line-height:2.4vw;
		 color:#000066;
		 font-size:1.6vw;
		 text-align:justify;
	}
	.row5 {
		margin-top:2%;
		margin-left:2%;
		text-shadow: 2px 2px 4px rgba(73,0,59,.5);
	}
	.row6 {
		font-size:1.7vw;
		color:#767676;
		margin-top:40px;
	}
	.row8 {
		font-size:2vw;
		font-family: 'Open Sans', sans-serif;
		color:#000066;
		margin-left:2%;
		width:100%;
		line-height:110%;
	}
	.row8 img {
		margin:0 8px;
	}
.more_titles {
    width:94%;
    height:18vw;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}
.more_titles a {
    display: inline;
}
	
	.fsize01 { font-size:170%; font-family: 'Open Sans', sans-serif; font-weight:700; } /* PH */
	.fsize03 { font-size:2.6vw; font-family: 'Open Sans', sans-serif; font-weight:700; color:#000066; line-height:3vw; margin-top:10px; display:block; text-align:center; } /* Album */
	.fsize05 { font-size:95%; } /*Komponist */
	
	.red { color:#F10083; }
	
h3 a:link, a:visited { color:#000066; text-decoration:none; }
h3 a:hover, a:focus  { color:#F10083; text-decoration:none; }

	.panel           { margin:7px auto; }
	.panel-title     { font-size:120%; }
	.list-group-item {
		margin-bottom:3px;
		color:white;
		text-align:left;
		font-family: 'Open Sans', sans-serif;
		font-size:100%;
		padding:5px 12px;
		}
	a.list-group-item:hover,
	a.list-group-item:focus { color: #F10083; }
	
	/*h3.primary {
		color:white;
		}
	h3.primary a:link,
	h3.primary a:visited { color: #FFFFFF; }
	h3.primary a:hover,
	h3.primary a:focus   { color:#FFB8E4; }*/
	
audio { width:100%; }
	
.shadow { text-shadow: 2px 2px 10px rgba(64,64,64,0.5); }


.add_titel_2 {
	font-size:1.2vw;
	font-weight:bold;
	line-height:1.46vw;
	padding-bottom:10px;
}

.component {
	margin-bottom:15px;
}

.title1_4 {
	font-size:2vw;
	font-family:Baskerville, 'Palatino Linotype', Palatino, 'Century Schoolbook L', 'Times New Roman', serif;
	margin-bottom:1vw;
}

.title5 {
	font-size:2.4vw;
	font-family:Baskerville, 'Palatino Linotype', Palatino, 'Century Schoolbook L', 'Times New Roman', serif;
	background-color:#FFEC01;
	color:#000000;
	text-align:center;
	border-top:2px solid red;
	border-bottom:2px solid red;
	padding:.4vw 0;
	margin-bottom:1vw;
}

.fifth {
	font-size:.9vw;
	font-family:Baskerville, 'Palatino Linotype', Palatino, 'Century Schoolbook L', 'Times New Roman', serif;
	background-color:#FFEC01;
	border:2px solid red;
	border-bottom:none;
	text-align:center;
	width:30%;
	font-weight:bold;
	font-style:italic;
	margin:0 auto;
	margin-top:2vw;
}

.download_clip {
	display:block;
	background:linear-gradient(#0000FF,#000066);
	color:#FFF;
	font-size:1.2vw;
	padding:7px;
	text-align:center;
	cursor:pointer;
}
.download_clip:a {
	display:block;
	background:linear-gradient(#0000FF,#000066);
	color:#FFF;
	text-decoration:none;
}
.download_clip:link {
	color:#FFF;
	text-decoration:none;
}
.download_clip:visited {
	color:#FFF;
	text-decoration:none;
}
.download_clip:hover {
	display:block;
	background:linear-gradient(#000066,#0000FF);
	color:#FFF;
	text-decoration:none;
}

.downloadnow {
	margin:0 5%;
	width:25vw;
	font-size:1.2vw;
}

.linklist {
	color:#000;
}
.linklist a:link    { color:#000000; text-decoration:none; }
.linklist a:visited { color:#000000; text-decoration:none; }
.linklist a:hover   { color:#ff0000; text-decoration:none; }

.list-group-item { padding-left:3vw; }


/*************************  HOOVER TABELLENZELLEN  ************************************/

table.navbar_01 {
   border-collapse: collapse;
}
table.navbar_01 td a {
   display:block;
   text-decoration:none;
   padding:5px 0;
   color:#000000;
}
table.navbar_01 td a:link, #text1 table.navbar_01 td a:visited {
   color:#000000;
   background-color:#FFFCC0;
}
table.navbar_01 td a:hover, table.navbar_01 td a:active {
   color:#FFFFFF;
   background-color:#FF0000;
}

/*************************  ENDE HOOVER TABELLENZELLEN  ************************************/

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


.copyright {
	font-family: 'Open Sans', sans-serif;
	line-height:1.2vw;
	font-size:1vw;
	margin:50px auto;
	color:#fff;
	text-shadow:1px 1px 1px #000;
	}



/* ==========================================================================
   Full size background video
   ========================================================================== */
   
video#bgvid { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-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
   ========================================================================== */