/* ##################################################### */
/* ----------------------------------------------------- */
/*						ALLGEMEIN						 */
/* ----------------------------------------------------- */
	
html, body {
	width: 100%; height: 100%;
	margin: 0; padding: 0; }

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%; }

body {
	background: url(img/bg01d.jpg); 
	background-repeat:no-repeat; 
	background-position:top center; 
	background-attachment:fixed; 
	background-size: 100% 100%;
	/* border: #fff 1px solid; */ }
	
.container90 {
	width: 90%;
	margin: 0 auto;
	max-width: 1150px;
    min-width: 280px;
	/*border: #00f 1px dashed;
	background-color: #77f;*/ }

.container90detail {
	width: 90%;
	margin: 0 auto;
	max-width: 800px;
    min-width: 280px;
	/*border: #00f 1px dashed;
	background-color: #77f;*/ }
	
.content {
	width: 100%;
	margin-top: 14em; /*    *** Abstand oben von Inhalte */
	min-height: 1px;
	padding-top: 0;
	/*border: #0f0 1px dashed;
	background-color: #77f;*/ }

.contentNutzungL {
	margin: 3em 0 4em 0; }
	
.contentNutzungR {
	margin: 3.2em 0 4em 0; }
	
.seitentitelblock {
	display:inline-block;
	position: relative;
	float: left;
	width: 100%;
	/*border: #f90 1px dashed;*/ }

.seitentitelblockneu {
	display:inline-block;
	position: relative;
	float: left;
	width: 100%;
	margin: 1em 0 2em;
	/*border: #f90 1px dashed;*/ }

.seitentitelblockdetail {
	display:inline-block;
	position: relative;
	float: left;
	width: 100%;
	margin-bottom: 4em;
	/*border: #f90 1px dashed;*/ }
	
.arrow:after { 
	content: "\27F6"; /* html unicode: ⟶ */ }
.arrow:before { 
	content: "\27F6"; /* html unicode: ⟶ */ }
header .arrowl { 
	color: #999; font-style: normal; }
.arrowl:hover { 
	color: #f00; }
	
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block; }

a { color: #999;
    font-weight: normal;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.15s ease;
    -moz-transition: color 0.15s ease;
    -webkit-transition: color 0.15s ease;
    -o-transition: color 0.15s ease; }

a:hover {
	color: #f00;
	text-decoration: none;
	text-shadow: -1px -1px 1px rgba(255, 255, 255, 0.25);
	/*background-color: rgba(1, 1, 1, .15); */ }
	
a:visited { 
	opacity: 1; }
	
a:active, a:focus {
    position: relative;
    top: 1px; }

audio, canvas, video {
    display: inline-block;
    *display: inline;
    *zoom: 1; }

audio:not([controls]) {
    display: none; }

:hover, :focus, :active {
    outline: none; }

::-moz-selection {
    background: #09f;
    color: #fff;
    text-shadow: none; }

::selection {
    background: #09f;
    color: #fff;
    text-shadow: none; }

abbr[title] { border-bottom: 1px dotted; }

dfn { font-style: italic; }

hr { width: 100%;
     height: 1px;
     border: 0;
     border-top: 1px solid #444; 
     margin: 0;
     padding: 0; }

.top0 { margin: 0; padding: 0em; margin-top: 0em; 
	border: #f00 1px solid; height: 100px;}
	
.top0 { margin-top: 0em; }
.top1 { margin-top: 1em; }
.top2 { margin-top: 2em; }
.top3 { margin-top: 3em; }
.top4 { margin-top: 4em; }
.top5 { margin-top: 5em; }

.bottom0 { margin-bottom: 0em; }
.bottom1 { margin-bottom: 1em; }
.bottom2 { margin-bottom: 2em; }
.bottom3 { margin-bottom: 3em; }
.bottom4 { margin-bottom: 4em; }
.bottom5 { margin-bottom: 5em; }

blockquote {
    margin: 0 1em 1em 0;
    padding: 1em;
    border-left: 1px solid #999;
    font-style: italic;
    color: #999; }

blockquote p {
    font-size: 1.1em;
    line-height: 2em;
    margin-bottom: 0; }

blockquote small {
    display: block;
    font-size: 1em;
    line-height: 1.6em;
    color: #ccc;
    text-align: right; }

blockquote small:before {
    content: '\2014 \00A0'; }

b, strong { font-weight: 700; }

small { font-size: 85%; color: #999; }

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline; }

sup { top: -0.5em; }

sub { bottom: -0.25em; }

dd { margin: 0 0 0 40px; }

dt { font-weight: 700; }

ul, ol {
    list-style: none;
    list-style-image: none;
    margin: 0;
    padding: 0; }

img {
    border: 0;
    -ms-interpolation-mode: bicubic;
    vertical-align: middle; }

svg:not(:root) {
    overflow: hidden; }

figure { margin: 0; }

form { margin: 0; }

fieldset { border: 0; margin: 0; padding: 0; }

label { cursor: pointer; }

legend { border: 0;
    *margin-left: -7px;
    padding: 0;
    white-space: normal; }

button, input, select, textarea {
    font-size: 100%;
    margin: 1em 0;
    vertical-align: middle;
    *vertical-align: middle; }

button, input {
    line-height: normal;
    *overflow: visible; }

table button, table input {
    *overflow: auto; }

button, input[type="button"], input[type="reset"], input[type="submit"] {
    cursor: pointer;
    -webkit-appearance: button; }

input[type="checkbox"], input[type="radio"] {
    box-sizing: border-box; }

input[type="search"] {
    -webkit-appearance: textfield;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box; }

input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none; }

button::-moz-focus-inner, input::-moz-focus-inner {
    border: 0;
    padding: 0; }

textarea {
    overflow: auto;
    vertical-align: top;
    resize: vertical; }

table {
    border-collapse: collapse;
    border-spacing: 0; }

td { vertical-align: top; }

.chromeframe {
    margin: 1em 0;
    background: red;
    color: black;
    padding: 1em; }

figure { max-height: 100%; 
		 overflow: hidden; }

figure figcaption { }

img { max-width: 100%;
      height: auto;
      width: auto; }
a img { -webkit-transition: opacity 0.5s ease;
    	-moz-transition: opacity 0.5s ease;
    	-o-transition: opacity 0.5s ease;
    	-ms-transition: opacity 0.5s ease;
    	transition: opacity 0.5s ease; }

a img:hover {
    *zoom: 1;
    opacity: 0.8;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 80);
    filter: alpha(opacity = 80); }
    



/* ##################################################### */
/* ----------------------------------------------------- */
/*						TYPO							 */
/* ----------------------------------------------------- */
	
html, button, input, select, textarea {
    font-family: "Open sans", "Helvetica Neue", "HelveticaNeue", 	
				 Helvetica, Arial, sans-serif;
    font-weight: 400; /* normal */
	font-size: 13px;
	line-height: 1.5;
    color: #aaa;
    font-smooth: always;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004); }

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: normal; }

h1 {margin: 0em 0em 0.5em -0.075em; /* kleine Korrektur für linke Parallelität. */
    font-size: 3em;
    letter-spacing: -0.06em;
    text-transform: uppercase;
    line-height: 0.9; }

h2 {font-size: 2.5em;
    margin: 0em 0em 0.5em -0.075em; /* kleine Korrektur für linke Parallelität. */
    letter-spacing: -0.05em;
    color: #aaa;
    line-height: 1; }

h3 {font-size: 1.75em; }

h4 {font-size: 1.5em; }

h5 {font-size: 1.1em;
    text-transform: uppercase;
    margin: 0;
    color: #aaa; }

h6 {font-size: 1em;
    margin-bottom: 0.8em;
    font-weight: 500;
	color: #fff; }

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: #333;
    text-decoration: none; }

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
    color: #09f;
    text-decoration: none; }

.dunkel { color: #870 }

.seitentiteltext {
	display:inline;
	margin:0;
	padding:0;
	text-align: left;
	color: #fff;
	font-size: 1em;
    line-height: 1;
    text-transform: uppercase; }

.seitentiteltext2 {
	display:inline;
	text-align: left;
	color: #fff;
	font-size: 1em;
    text-transform: none; }

.seitentiteltext span, .seitentiteltext2 span {
	color:#999;
	text-transform: none; }
	
.seitentitellink {
	float: right;
	text-align: right;
	color: #999;
	font-size: 1em;
	/*background-color: #822;*/ }

.nutzung {
	font-style:italic; }
.nutzung2 {
	font-style:italic;
	padding-bottom: 3em; }
	
	
/* ##################################################### */
/* ----------------------------------------------------- */
/*						GRID							 */
/* ----------------------------------------------------- */

.grid {
    float: left;
	margin: 0; padding: 0;
    padding-left: 2em;  /* Lücken zwischen Spalten */
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    *behavior: url(/js/boxsizing.htc); }

.grid0 {
    float: left;
	margin: 0; padding:0; 
	padding-left: 0em;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    *behavior: url(/js/boxsizing.htc); }

.gridcontact {
    float: left;
	margin: 0; padding: 0;
	margin-top: -0.8em;
    padding-left: 2em;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    *behavior: url(/js/boxsizing.htc); }

.gridimpressum {
    float: left;
	margin: 0; padding: 0;
	margin-top: -0.8em;
	padding-bottom: 7em;
    padding-left: 2em;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    *behavior: url(/js/boxsizing.htc); }

.gridImpressumL {
    float: left;
	margin: 0; padding: 0;
	margin-top: 0em;
	padding-bottom: 7em;
    padding-left: 0em;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    *behavior: url(/js/boxsizing.htc); }

.gridImpressumR {
    float: left;
	margin: 0; padding: 0;
	margin-top: 0em;
	padding-bottom: 2em;
    padding-left: 2em;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    *behavior: url(/js/boxsizing.htc); }

.grid-wrap {
    margin-left: -2em; /* Gleicher Wert wie 'grid padding-left'  */
    overflow: hidden;
    *zoom: 1; }

.grid-wrap:before, .grid-wrap:after {
    content: "";
    display: table; }

.grid-wrap:after { clear: both; }

.half-gutter 			{ margin-left: -1.5em; }
.half-gutter .grid-col 	{ padding-left: 1.5em; }

.col-full           { width: 100%; }
.col-one-half       { width: 50%; }
.col-one-third      { width: 33.333%; }
.col-two-thirds     { width: 66.666%; }
.col-one-quarter    { width: 25%; }
.col-three-quarters { width: 75%; }

.mright { margin-right: 3em; }
.mleft { margin-left: 3em; }
.mtop { margin-top: 3em; }
.mbottom { margin-bottom: 3em; }

.halfmright { margin-right: 1.5em; }
.halfmleft { margin-left: 1.5em; }
.halfmtop { margin-top: 1.5em; }
.halfmbottom { margin-bottom: 1.5em }

.fright, .fleft { display: block;
    			  overflow: hidden; }
.fright { float: right; }
.fleft { float: left; }

.alignleft {float: left;
    		clear: left;
    		margin: 0.38em 1.62em 0.38em 0; }
.alignright { float: right;
    		clear: right;
    		margin: 0.38em 0 0.38em 1.62em; }
.aligncenter { margin: 0 auto 1.62em;
    		display: block; }

    
    
/* ##################################################### */
/* ----------------------------------------------------- */
/*							HEADER						 */
/* ----------------------------------------------------- */

header#navtop {
	top: 0;   
	position: fixed;
    width: 100%;
	padding-top: 2.5em;
    background: #000;
    opacity: 0.80;
    filter:alpha(opacity=80); /* For IE8 and earlier */
    z-index: 10;
    /*border: #faa 1px solid;*/ }

header nav {
	margin: 0; padding: 0;
	/*border: #0f0 1px solid;*/ }
	
header nav ul {
    float: left;
    overflow: hidden;
    margin: 0em;
    padding: 0em 1em 0em 1em;
    border-left: 1px solid #555;
    line-height: 2.5em; }

nav a {
    text-decoration: none;
    color: #aaa; }

.navactive { 
	color: #09f; }

.logo { 
	margin: 0;
	padding: 0;
	/*border: #0ff 1px solid;*/ }

.verlaufOben {
	margin: 0;
	padding: 0;
	height: 10px;
	width: 100%;
	margin-bottom: -27px;
	/*border: #f00 1px solid;*/ }	



/* ##################################################### */
/* ----------------------------------------------------- */
/*							FOOTER						 */
/* ----------------------------------------------------- */
	
/* ===================================================== */	
/* 			2 CSS-Elemente damit der Footer        		 */
/*			bei kurzen Seiten unten bleibt.				 */	
.page-wrap {
	min-height: 100%;
	margin-bottom: -150px; /*gleich wie footer-height*/ }
.page-wrap:after {
	content: "";
	display: block;
	height: 150px; }	
/* ===================================================== */	

.footer {
	display: inline-block;
	width: 100%;
	height:150px;
	margin: 0;
    padding-bottom: 1.3em;
    background-color: #000;
    opacity: 0.80;
    filter:alpha(opacity=80); /* For IE8 and earlier */
    font-size: 0.8em;
	color: #999; }

.social {
    display: block;
	float: left;
	margin: 0em;
	margin-bottom: 1em;
	padding: 1em 0; }
	
.social ul{
    float: left;
	padding-left: 2em;
	border-left: 1px solid #555; }

.social ul li{
    float: none;
	margin: 0;
	padding: 0.4em 0; }

.links {
	display: block;
	float: right;
	margin-right: 0em;
	padding: 1em 0; }

.links ul{
    display: block;
	float: right;
	padding-right: 2em;
	border-right: 1px solid #555; }

.links ul li{
    float: none;
    padding: 0.4em 0;
    text-align: right; }

.arrowUp a {
    display: block;
	font-size: 2em;
    text-align: center;
	margin: 0;
    padding: 0; }

.footerText {
    display: block;
	float:none;
	margin:1em 0 0 0;
	padding: 0;
    padding-top: 0.8em;
	font-size: 1.6em;
	text-align: center; }

.footerText2 {
    display: block;
	margin: 0;
	padding: 0;
	font-size: 1em;
    text-align: center; }	

.language {
    font-size: 1em;
	font-weight: 700; /* fett */
	color: #db0; }
	
.verlaufUnten {
	margin: 0;
	padding: 0;
	height: 10px;
	width: 100%;
	margin-top: -26px;
	/*border: #f00 1px solid;*/ }




/* ##################################################### */
/* ----------------------------------------------------- */
/*				 MUSIC Übersichtsseite					 */
/* ----------------------------------------------------- */
	
/* ------------------- Musikfilter --------------------- */

#options {
	display: block;
	position: relative;
	width: 100%;
	float: left;
	padding: 2em 0 2em;/* Filterblock:Abstand oben+unten */ }

#filters.pagination li {
	display: block;
	float: left;
	margin: 0em;
	padding: 0em;
	margin-right: 2em; /*   *** Filter: Zwischenabstände */ }
#filters.pagination li a {
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	font-size: 1em;
	line-height: 2em;
	color: #aaa;
	text-decoration: none; }
#filters.pagination li a:hover {
	background: none;
	border: none;
	color: #f00;
	text-decoration: none; }
#filters.pagination li a.selected {
	color: #07d;
	background: none !important;
	border: none;
	text-decoration: none; }
	
	
/* -------------------- Song-Daten --------------------- */
	
.containerExtra { 
	display:block;
	position:relative;
	margin-left: -4em; /* wie element padding links */ }

#songs {
	display: block;
	position: relative;
	float: left;
    width: 100%;
	margin-right: 0em;
	margin-bottom: 4em; }

.element {
	display: block;
	position: relative;
	margin: 0 !important;
	padding: 0 0 2.5em 4em; /* padding links muss gleich sein wie .containerExtra margin left */
	width: 270px;
	height: auto !important;
	color: #222;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box; }
	
	
/* ---------------- Einblendung: Detail ---------------- */
	
.element > a{ 
	display: block; 
	position: relative; 
	height: 100%; width: 100%; 
	overflow: hidden; }
 	
.element .zoom{ 
	display: block; 
	position: absolute; top: 0; left: 0; 
	background: url(../img/zoom.png) no-repeat center; 
	width: 100%; height: 100%; 
	*zoom: 1;
	opacity: 0;
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 0);
	filter: alpha(opacity = 0); }

#wrapper {
	width: 100%;
	max-width: 500px;
	position: absolute; 
	margin: 0 auto;
	border: #f00 1px solid; }

#player {
    width: 100%; }​	

#audiotext {
    margin-bottom: 0.6em;
    margin-top: 1.5;
    font-size: 0.7em; }

.songtitel {
    line-height: 1em;
    color: #aaa;
    font-weight: 500;
    font-size: 1em;
	text-align: center;
    margin-top: 0.5em;
	margin-bottom: 0.3em;
    display: block; }

.songtiteldetail {
    line-height: 1em;
    color: #aaa;
    font-weight: 500;
    font-size: 1em;
	text-align: center;
    margin-top: 0.5em;
	margin-bottom: 3em;
    display: block; }

.songdownload {
    line-height: 2em;
    color: #999;
    font-weight: 500;
    font-size: 0.7em;
    display: block; }

.works-page .works figure {
    margin-bottom: 3em; }

aside {
	margin-bottom: 0em; }

aside h1 {
	margin-top: 0.33em;
	marging-right: 1em; }

.main aside menu {
    padding: 0 0 0 1em;
    line-height: 2em; }

.main aside menu a {
    color: #999; }

.main aside menu .buttonactive {
    color: #09f; }


/* ##################################################### */
/* ----------------------------------------------------- */
/*					 MUSIC Detailseite					 */
/* ----------------------------------------------------- */

.line {
	display: block;
	position: relative;
    height: 1px;
	width: 100%;
	background: #777;
    opacity: 0.35;
    filter:alpha(opacity=35); /* For IE8 and earlier */
    /*border: #aaa 1px solid;*/ }

/* --------------------- Download ---------------------- */

.toggle-view > li { /* Zum Download-Feld */
    margin-top: 0.25em;
    position: relative; clear:both;
	background: #400;
	opacity: 0.6;
	cursor: pointer; }

.toggle-title { padding-left: 0.7em; opacity:1; }
.toggle-title:hover { color: #fff; }

.toggle-title:after { /* Pfeil rechts */
    content: "\25C0"; float: right; color: #999; }
.toggle-title:hover:after { color: #fff; }

.toggle {
	margin-top: 0em;
    padding: 0em;
	padding-bottom: 2em;
    display: none;
    overflow: hidden;
	background: #000;
    opacity: 1;
    filter:alpha(opacity=88); /* For IE8 and earlier */
	text-align:center; }

.toggle > ul li {
    line-height: 1.0; }

.toggletext {
	padding: 1em 1em 0em 1em;
	margin-bottom: 2em;
	color: #fff; }

.tactive {
    background: #888; }

.tactive:after {
    content: "\25BC";
    color: #888; }



/* -- SUBPAGES 
--------------------------------------------------------- */
/*	Bereiche */
	section {
    	margin: 0em;
    	padding: 0em; }

.main:not(.home-page) > section article:first-child h2 {
    margin-top: 10em; }

/* Work-page (single) */
.work-page figure {
    margin-bottom: 3em; }

.work-page figcaption {
    text-align: center;
    margin-top: 1em; }

/* Services-page */
.warning {
    display: block;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-left: none;
    border-right: none;
    text-align: center;
    padding: 20px;
    margin: 20px 0px; }



/* -------------------------------------------------------
======	MISC
------------------------------------------------------- */

.ir {
    display: block;
    border: 0;
    text-indent: -999em;
    overflow: hidden;
    background-color: transparent;
    background-repeat: no-repeat;
    text-align: left;
    direction: ltr;
    *line-height: 0; }
.ir br {
    display: none; }

.hidden {
    display: none !important;
    visibility: hidden; }





/* ##################################################### */
/* ----------------------------------------------------- */
/*						 IE Fix							 */
/* ----------------------------------------------------- */
	
.lt-ie9 .works figure a, .lt-ie9 .works figure a img { filter: inherit; } 
/* jquery filter opacity issue IE8 */
.lt-ie9 .container { min-width: 780px; }
.lt-ie8 .container { width: 960px; }
.lt-ie8 .grid-wrap { margin-left: 0; }
.lt-ie8 .grid { padding: 0; margin-left: 5%; }
.lt-ie8 .grid:first-child { margin-left: 0; }
.lt-ie8 .col-full { width: 99.95%; }
.lt-ie8 .col-full + .grid { margin-left: 0; }
.lt-ie8 .col-one-half { width: 47.45%; }
.lt-ie8 .col-one-third { width: 29.55%; }
.lt-ie8 .col-two-thirds { width: 64.95%; }
.lt-ie8 .col-one-quarter { width: 19.95%; }
.lt-ie8 .col-three-quarters { width: 74.95%; }





/* ##################################################### */
/* ----------------------------------------------------- */
/*					 MEDIA QUERIES						 */
/* ----------------------------------------------------- */

/*1*/
@media (min-width: 1000px) and (max-width: 1150px) {
/*********************************************************/

/*  Menü-Abstände und Größe */
	header nav ul { margin: 0; padding: 0 1em; }
	
/*  Abstand oberhalb von Inhalte */
	.content { margin-top: 14em; }
/*  Filterblock: Abstand oben + unten */
	#options { padding: 2em 0 2em; }
/*  Filter: Zwischenabstände */
	#filters.pagination li { margin-right: 3em; !important }
/* 	Element-Position und Abstand */
	.element { padding: 0 0 2.5em 4em; }
	.containerExtra { margin-left: -4em; } /* wie element padding-left */
	.songtitel { font-size: 1em; }
	
/* 	Footer-Elemente • Position und Abstand */
	.social ul { padding-left: 2em; }
	.links ul { padding-right: 2em; }
}

/*2*/
@media (min-width: 900px) and (max-width: 999px) {
/*********************************************************/
.mq1-col-full           { width: 100%; }
.mq1-col-one-half       { width: 50%; }
.mq1-col-one-third      { width: 33.333%; }
.mq1-col-two-thirds     { width: 66.666%; }
.mq1-col-one-quarter    { width: 25%; }
.mq1-col-three-quarters { width: 75%; }

/*  Menü-Abstände und Größe */
	header nav ul { margin: 0; padding: 0 1em; }
	
/*  Abstand oberhalb von Inhalte */
	.content { margin-top: 13em; }
/*  Filterblock: Abstand oben + unten */
	#options { padding: 2em 0 2em; }
/*  Filter: Zwischenabstände */
	#filters.pagination li { margin-right: 3em; !important }
/* 	Element-Position und Abstand */
	.element { padding: 0 0 2.5em 3.5em; }
	.containerExtra { margin-left: -3.5em; } /* wie element padding-left */
	.songtitel { font-size: 1em; }
	.songdownload { font-size: 0.9em; }
	
/* 	Footer-Elemente • Position und Abstand */
	.social ul { padding-left: 2em; }
	.links ul { padding-right: 2em; }
}

/*3*/
@media (min-width: 768px) and (max-width: 899px) {
/*********************************************************/
.mq1-col-full           { width: 100%; }
.mq1-col-one-half       { width: 50%; }
.mq1-col-one-third      { width: 33.333%; }
.mq1-col-two-thirds     { width: 66.666%; }
.mq1-col-one-quarter    { width: 25%; }
.mq1-col-three-quarters { width: 75%; }
	
/*  Logo-Abstand und Größe */
	.logo { width:300px; }
	header#navtop { padding-top: 2em; }
/*  Menü-Abstände und Größe */
	header nav ul {
    	margin: 0; padding: 0 1em;
		font-size: 1em; line-height: 2em; }
		
/*  Abstand oberhalb von Inhalte */
	.content { margin-top: 13em;  }
/*  Filterblock: Abstand oben + unten */
	#options { padding: 2em 0 2em; }
/*  Filter: Zwischenabstände */
	#filters.pagination li { margin-right: 3em; !important }	
/* 	Element-Position und Abstand */
	.element { padding: 0 0 2.5em 4em; }
	.containerExtra { margin-left: -4em; } /* wie element padding-left */
	.songtitel { font-size: 1em; }
	.songdownload { font-size: 0.9em; }
	
/* 	Footer-Elemente • Position und Abstand */	
	.social ul { padding-left: 2em; }
	.links ul { padding-right: 2em; }
}

/*4*/
@media (min-width: 600px) and (max-width: 767px) {
/*********************************************************/
.mq2-col-full           { width: 100%; }
.mq2-col-one-half       { width: 50%; }
.mq2-col-one-third      { width: 33.333%; }
.mq2-col-two-thirds     { width: 66.666%; }
.mq2-col-one-quarter    { width: 25%; }
.mq2-col-three-quarters { width: 75%; }

/*  Logo-Abstand und Größe */
	.logo { width:260px; }
	header#navtop { padding-top: 1.5em; }
	
/*  Menü-Abstände und Größe */
	header nav ul { 
		padding: 0;
		font-size: 0.9em; line-height: 2.2em; }
	header nav ul li { padding: 0 1em;
		}
		
/*  Abstand oberhalb von Inhalte */
	.content { margin-top: 11em;  }
/*  Filterblock: Abstand oben + unten */
	#options { padding: 2em 0 2em; }
/*  Filter: Zwischenabstände */
	#filters.pagination li { margin-right: 2em; !important }	
/* 	Element-Position und Abstand */
	.element { padding: 0 0 2.5em 3em; }
	.containerExtra { margin-left: -3em; } /* wie element padding-left */
/* 	Elemente-gesamt Abstand unten */
	#songs { margin-bottom: 3em; }
	.songtitel { font-size: 0.9em; }
	.songtiteldetail { font-size: 1em; }
		
/* 	Footer-Elemente • Position und Abstand */
	.social ul { padding-left: 1.5em; }
	.links ul { padding-right: 1.5em; }
}

/*5*/
@media (min-width: 500px) and (max-width: 599px) {
/*********************************************************/
.mq2-col-full           { width: 100%; }
.mq2-col-one-half       { width: 50%; }
.mq2-col-one-third      { width: 33.333%; }
.mq2-col-two-thirds     { width: 66.666%; }
.mq2-col-one-quarter    { width: 25%; }
.mq2-col-three-quarters { width: 75%; }
	/**/
/*  Abstand & Größe Header-Elemente */
	.logo { width:220px; }
	header#navtop { padding-top: 1em; }
/*  Menü-Abstände und Größe */
	header nav ul {
		padding: 0;
		font-size: 0.9em;
		line-height: 2em; }
	header nav ul li {
		padding: 0 0.5em; }
	.verlaufOben { height: 0px; }
			
/*  Abstand oberhalb von Inhalte */
	.content { margin-top: 8em; }
	.contentNutzungL { margin: 0em 0 1em 0; }
	.contentNutzungR { margin: 1.2em 0 2em 0; }
	.seitentitelblockdetail { margin-bottom: 3em; }
/*  Filterblock: Abstand oben + unten */
	#options { padding: 1em 0 1em !important ; }
/*  Filter: Zwischenabstände */
	#filters.pagination li { margin-right: 1.2em !important ; }
/* 	Element-Position und Abstand */
	.element { padding: 0 0 2.5em 3em; }
	.containerExtra { margin-left: -3em; } /* wie element padding-left */
/* 	Elemente-gesamt Abstand unten */
	#songs { margin-bottom: 2em; }
	.songtitel { font-size: 0.9em; }
	
/* 	Footer-Elemente • Position und Abstand */
	.verlaufUnten { height: 0px; }
	.social ul { padding-left: 1em; }
	.links ul { padding-right: 1em; }
}

/*6*/
@media (max-width: 499px) {
/*********************************************************/
.mq2-col-full           { width: 100%; }
.mq2-col-one-half       { width: 50%; }
.mq2-col-one-third      { width: 33.333%; }
.mq2-col-two-thirds     { width: 66.666%; }
.mq2-col-one-quarter    { width: 25%; }
.mq2-col-three-quarters { width: 75%; }
	
/*  Abstand & Größe Header-Elemente */
	.logo { width:180px; }
	header#navtop { padding: 1em 0 0 0; }
	header nav ul {
    	margin: 0.3em 0em 0em 0em;
    	padding: 0em 1em 0em 1em;
		padding: 0;
		font-size: 0.9em;
		line-height: 1.4em; }
	header nav ul li {
		padding: 0 0.5em; }
	.verlaufOben { height: 0px; }	
		
	h1 { font-size: 2.5em; margin-top: 0.46em !important; }
/*  Abstand oberhalb von Inhalte */
	.content { margin-top: 7em;  }
	.contentNutzungL { margin: 1em 0 1em 0; }
	.contentNutzungR { margin: 1.2em 0 2em 0; }
	.seitentitelblockdetail { margin-bottom: 2em; }
/*  Filterblock: Abstand oben + unten */
	#options { padding: 1em 0 1em !important ; }
/*  Filter: Zwischenabstände */
	#filters.pagination li { margin-right: 0.75em; !important }
/* 	Element-Position und Abstand */
	.element { padding: 0 0 2.5em 2.5em; }
	.containerExtra { margin-left: -2.5em; } /* wie element padding-left */
/* 	Elemente-gesamt Abstand unten */
	#songs { margin-bottom: 1em; }
	
/* Footer */
	.verlaufUnten { height: 0px; }
	.social ul { padding-left: 1em; }
	.links ul { padding-right: 1em; }
}

/*7*/
@media (max-width: 430px) {
/*********************************************************/
.mq3-col-full           { width:100%; }
.mq3-col-one-half       { width: 50%; }
.mq3-col-one-third      { width: 33.333%; }
.mq3-col-two-thirds     { width: 66.666%; }
.mq3-col-one-quarter    { width: 25%; }
.mq3-col-three-quarters { width: 75%; }
.mq3-none { display: none; }
	
/*  Abstand & Größe Header-Elemente */
	.logo { width:160px; }
	header#navtop { padding-top: 0.7em; }
	header nav { 
		width: 100%; 
		margin-bottom: 0em; }
	header nav ul {
		border-left: none; }
	header nav ul li {
		float: left;
		margin: 0em;
    	padding: 0em .3em;
		line-height: 1.5em;
		border-left: #555 1px solid; }
		
/*  Abstand oberhalb von Inhalte */
	.content { margin-top: 7em;  }
	.seitentitelblockdetail { margin-bottom: 1em; }
	.contentNutzungL { margin: 1em 0 1em 0; }
	.contentNutzungR { margin: -2em 0 2em 0; }
/*  Filterblock: Abstand oben + unten */
	#options { padding: 1em 0 1em; }
/*  Filter: Zwischenabstände */
	#filters.pagination li {font-size: 0.9em; margin-right: 0.6em; !important }
	
/* 	Element-Position und Abstand */
	.element { padding: 0 0 2.5em 1.5em; }
	.containerExtra { margin-left: -1.5em; } /* wie element padding-left */
/* 	Elemente-gesamt Abstand unten */
	#songs { margin-bottom: 0.5em; }
	
/*	Kolonnen Links Rechts */
	.gridImpressumR { margin: 1em 0 1em 0; padding-left: 0em; }
	.gridcontact { padding-left: 0em; }
	
	.margincor { padding-left: 0em; padding-bottom: 3em; }
	.nutzung2 { padding-bottom: 3em; }	
}

/*8*/
@media (max-width: 376px) {
/*********************************************************/
	
/*  Abstand & Größe Header-Elemente */
	header nav ul {
		padding: 0;
		font-size: 0.86em;
		line-height: 2em; }
		
/* 	Element-Position und Abstand */
	.songtitel { font-size: 1em; }
	
/* 	Elemente-gesamt Abstand unten */
	#songs { margin-bottom: 0em; }
	
}






/* ##################################################### */
/* ----------------------------------------------------- */
/*						FORMS							 */
/* ----------------------------------------------------- */
	
form { margin-top: 2em; }
form li { margin-bottom: 1.5em; }

label {
    display: block;
    margin-bottom: -0.5em;
    font-weight: 500; }

input, select, textarea {
    border: 1px solid #444;
    color: #ccc;
	background: transparent\5;
    background: rgba(9,9,9,0.25);
    zoom: 1;
    font-size: 1em;
    padding: 1em;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    *behavior: url(/js/boxsizing.htc); }

textarea {
	padding: 1em;
	min-height: 10em;
	height: auto;
	width: 100%; }

input, textarea {
	-moz-transition: border .25s, background .35s;
	-webkit-transition: border .25s, background .35s;
	-o-transition: border .25s, background .35s;
	transition: border .25s, background .35s; }

input:hover, textarea:hover, input:focus, textarea:focus,input:active, textarea:active {
	border: 1px solid #844;
	background: transparent\5;
	background: rgba(9,9,9,0.55); }

input[type="text"],textarea {
    cursor: text; }

input[type="radio"], input[type="checkbox"] {
    display: inline;
    width: auto;
    height: auto;
    margin-right: 1em; }

input[type="checkbox"] + label, input[type="radio"] + label {
    display: inline; }

input[type="file"] {
    border: none; }

input[type="date"] {
    width: auto; }

select {
    height: auto; }

/* Placeholders */
::-webkit-input-placeholder { color: #616161; }
:-moz-placeholder { color: #616161; }
:-ms-input-placeholder { color: #616161; }

/* validate.js */
label.error {
    color: #e23;
    margin: -1em 0 0 0;
    font-weight: normal;
    font-style: italic; }


/* ##################################################### */
/* ----------------------------------------------------- */
/*							BUTTONS						 */
/* ----------------------------------------------------- */

.button, input[type="submit"], button, .toggle-title {
    color: #888;
    font-size: 1.1em;
    font-weight: normal;
	padding: 0.6em 1.2em;
    border: solid 1px #000;
    text-decoration: none;
    cursor: pointer;
    background: #622;
 /* Old browsers */
    background: -moz-linear-gradient(top,  #333 0%, #000 50%);
 /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(10%,#333), color-stop(90%,#000));
 /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #333 10%,#000 90%);
 /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #333 10%,#000 90%);
 /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #333 10%,#000 90%);
 /* IE10+ */
    background: linear-gradient(to bottom,  #333 10%,#000 90%);
 /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333', endColorstr='#000',GradientType=0 );
 /* IE6-9 */
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
    -ms-border-radius: 2px;
    -khtml-border-radius: 2px;
    border-radius: 2px;
    -webkit-transition: 0.3s linear all;
    -moz-transition: 0.3s linear all;
    -ms-transition: 0.3s linear all;
    -o-transition: 0.3s linear all;
    transition: 0.3s linear all; }

.button:hover, input[type="submit"]:hover, button:hover, .toggle-title:hover {
    color: #fff;
    text-decoration: none;
    border-color: #555;
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    background: #400 100%; }

.button:focus, input[type="submit"]:focus, button:focus {
    color: #f00;
    border-color: #ddd; }

.button:active, input[type="submit"]:active, button:active, .toggle-title:active {
    color: #fff;
    background: #eee;
    border-color: #ddd;
    position: relative;
    top: 1px; }

/* - Toggles ++++++++++++++++++++++++++++++++ */  

/*.toggle > ul li:before {
    content: "\2714 ";
    color: #ddd;
    margin-right: 1em; }
*/            
	/* - Tabs */
.tabs {
    display: block;
    margin: 0;
    padding: 0;
    border-bottom: solid 1px #fff; }

.tabs li {
    display: inline-block;
    margin-bottom: -1px; }

.tabs li a {
    display: block;
    text-decoration: none;
    line-height: 1em;
    color: #555;
    padding: 0 0em;
    margin: 0;
    background: #f5f5f5;
    font-size: 0.8em; }

.tabs li a:hover {
    color: #000; }

.tabs li.active a {
    background: #fff;
    position: relative;
    border: 1px solid #DDD;
    border-bottom-color: #FFF;
    color: #111;
    -moz-border-radius-topleft: 2px;
    -webkit-border-top-left-radius: 2px;
    border-top-left-radius: 2px;
    -moz-border-radius-topright: 2px;
    -webkit-border-top-right-radius: 2px;
    border-top-right-radius: 2px; }

.tab_container {
    margin-bottom: 1em;
    display: block;
    border-left: 1px solid #ddd;
    padding: 15px 15px 0; }

.tab_container > article {
    display: none; }

.tab_container > article:first-child {
    display: block; }



/* -------------------------------------------------------
======	BLOG
------------------------------------------------------- */

/* Article */
.post { margin-bottom: 5em; }
.post .entry { margin: 1.5em 0; }
.post .entry p { overflow: auto; }
.post .more-link {
    font-weight: 700;
    color: #09f; }
.post .more-link:hover {
    color: #333; }

.meta {
    font-weight: normal;
    color: #999;
    font-size: 0.9em; }
.meta a {
    color: #555;
    text-decoration: none; }
.meta a:hover {
    color: #09f;
    text-decoration: none; }

/* Sidebar */
.blog-sidebar {
    color: #999; }
.blog-sidebar h2 {
    margin-bottom: 1em;
    font-size: 2em;
    color: #666; }
.blog-sidebar .widget {
    padding-bottom: 2em;
    border-bottom: 1px solid #DDD;
    margin-bottom: 2em; }
.blog-sidebar .widget:last-child {
    border-bottom: none; }
.blog-sidebar a {
    font-weight: normal;
    color: inherit;
    text-decoration: none; }
.blog-sidebar a:hover {
    color: #333; }
.blog-sidebar li {
    padding-left: 1em;
    margin-bottom: 0.5em;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 95%;
    overflow: hidden;
    display: block; }
.blog-sidebar li a:before {
    content: ">";
    padding-right: 1em; }
.blog-sidebar input {
    width: 90%;
    padding-right: 0; }

/* Pagination */
ul.page-numbers {
    float: right;
    overflow: hidden;
    display: block; }

.page-numbers li {
    float: left; }
.page-numbers li a {
    display: block;
    padding: 1em;
    text-decoration: none;
    color: #777; }
.page-numbers li a:hover {
    color: #444; }
.page-numbers li .current {
    color: #09f; }

/* Comments*/
.section-comment header {
    overflow: hidden;
    clear: both; }
.comments, .leavecomment {
    margin-top: 3em; }
.comment {
    margin-bottom: 2em; }
.comment p {
    font-size: 0.9em;
    color: #777; }
.comment h6 {
    margin-bottom: 0.5em; }
.comment form ul li {
    margin-bottom: 2em; }



/**************************************************/
/**************************************************/
/**************************************************/
              /* aus style2.css */
.description {
	position: relative;
	display: block; }

	
/*------------------isotop items------------------*/
.isotope, .isotope .isotope-item {
	-webkit-transition-duration: 0.8s;
	-moz-transition-duration: 0.8s;
	-ms-transition-duration: 0.8s;
	-o-transition-duration: 0.8s;
	transition-duration: 0.8s; }
.isotope {
	-webkit-transition-property: height, width;
	-moz-transition-property: height, width;
	-ms-transition-property: height, width;
	-o-transition-property: height, width;
	transition-property: height, width; }
.isotope .isotope-item {
	overflow: visible;
	-webkit-transition-property: -webkit-transform, opacity;
	-moz-transition-property: -moz-transform, opacity;
	-ms-transition-property: -ms-transform, opacity;
	-o-transition-property: top, left, opacity;
	transition-property: transform, opacity; }
/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition {
	-webkit-transition-duration: 0s;
	-moz-transition-duration: 0s;
	-ms-transition-duration: 0s;
	-o-transition-duration: 0s;
	transition-duration: 0s; }
/* End: Recommended Isotope styles */

/* disable CSS transitions for containers with infinite scrolling*/
.isotope.infinite-scrolling {
	-webkit-transition: none;
	-moz-transition: none;
	-ms-transition: none;
	-o-transition: none;
	transition: none; }

/* -- HOME-PAGE
--------------------------------------------------------- */
/* Services */
.services aside {
    color: #999;
    padding-top: 11em;
    border-top: 1px solid #ccc; }

.services aside:after, .services h5:after {
    content: "";
    display: block;
    height: 1px;
    width: 1em;
    background: #DDD;
    margin: 1em 0; }

/* Slider */
	/* Browser Resets */
.flex-container a:active,.flexslider a:active,.flex-container a:focus,.flexslider a:focus {
    outline: none; }

.slides,.flex-control-nav,.flex-direction-nav {
    margin: 0;
    padding: 0;
    list-style: none; } 
	/* FlexSlider Necessary Styles */ 
.flexslider {
    margin: 0;
    margin-top: 4em;
    padding: 0;
    position: relative; }

.flexslider .slides > .slide {
    display: none;
    -webkit-backface-visibility: hidden; }

.flexslider .slides img {
    width: 100%;
    display: block; }

.flex-pauseplay span {
    text-transform: capitalize; }

.slides:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0; }

html[xmlns] .slides {
    display: block; }

* html .slides {
    height: 1%; }

.slide figcaption {
    position: absolute;
    background: white;
    height: auto;
    min-height: 3em;
    width: 60%;
    padding: 1em;
    top: 3em;
    right: 0; }

.slide figcaption div {
    text-align: right;
    display: block;
    border-right: 1px solid #DDD;
    padding: 0 2em 0 0;
    margin: auto 5em auto 0; }

.slide figcaption div p {
    margin: 0; }

.flex-direction-nav {
    position: absolute;
    top: 4em;
    right: 1.5em;
    z-index: 10; }

.flex-direction-nav li {
    display: inline; }

.flex-prev, .flex-next {
    text-decoration: none;
    color: #888;
    margin-left: 1em; }

.flex-prev:hover, .flex-next:hover {
    color: #0078CF; }



/* ##################################################### */
/* ----------------------------------------------------- */
/*						PRINT STYLES					 */
/* ----------------------------------------------------- */
	
@media print {
* { background: transparent !important;
    color: black !important;
    text-shadow: none !important;
    filter: none !important;
    ms-filter: none !important; }
abbr[title]:after { 
	content: "("attr(title) ")"; }
pre, blockquote { 
	page-break-inside: avoid; }
thead { 
	display: table-header-group; }
tr, img { 
	page-break-inside: avoid; }
img { 
	max-width: 100% !important; }
p, h2, h3 { 
	orphans: 3; widows: 3; }
h2, h3 { 
	page-break-after: avoid; }
;}
 
/* ----------------------------------------------------- */
/*							END							 */
/* ----------------------------------------------------- */
/* ##################################################### */