/* ==========================================================================
 * www.stringthing.de
 * stringthing_1.css
 * user css
 * ========================================================================== */

/* ==========================================================================
 * Table of Contents
 * ==========================================================================

 * Ränder
 * Margin aufheben (Temp?)
 * Überschriften Querstreifen und Toogler für Accordeon
 * Links
 * Images
 *
 * --------------------------------------------------------------------------
 * Spezielle Formatierungen der Abschnitte in der Reihenfolge des Erscheinens
 * --------------------------------------------------------------------------
 * 	Termine
 * 	Termin Upcoming
 * 	Audioclips
 * 	Meldungen
 * 	Über mich
 * 	Referenzen
 *	Video
 *	Fotos
 *	Presse
 *	Workshops
 *  Aktuelle Konzertprogramme
 * 	CDs und Noten
 *	Kontakt und Booking
 *	
 * Footer
 * Farben (Backgrounds)
 * Buttons
 * Bestellformular
 * Alle Termine
 * 
 * ---------------------------------------------------------------------------
 * Media Queries
 * ---------------------------------------------------------------------------
 * 	screen and min-width: 768px
 * 	smaller than standard 960
 *	tablet portrait to standard
 *	All mobile sizes
 * 	mobile landscape to tablet portrait
 *		adjustments presse
 *	mobile portrait size to landscape
 *		adjustments termine
 *		adjustments presse
 *		adjustments Bestellform
 *		adjustments Workshops
 *		adjustments Alle Termine
 *		adjustments Noten
 * ========================================================================== */

/* ToDo List */
/* -------------------- 
/* Schriftdefinitionen zentral
/*
/*
/* ==========================================================================
 * Ränder
 * ========================================================================== */

#wrapper {

	border: solid 6px #fff;
}

/* Unterer Rand bei Accordion */
 
#termine div.border_bottom, 
#main_clips nav.slider-control, 
#main_nachrichtenliste, 
#alle-termine {

	border-bottom: solid 6px #fff;
}

/* Normale Ränder !!!!Bessere Lösung finden!!!*/

#header, 
#audio,
#ueber-uns,
#presse,
#featured-video,
#fotos,
#aktuelle-konzertprogramme,
#cds-und-noten,
#workshops,
#kontakt-und-booking,
#header-17,
#bestellformular,
#bestaetigung,
#nachrichtenleser,
#service {

	border-bottom: solid 6px #fff;
}

/* ============================================================================
 * Margin aufheben (temp?)
 * ============================================================================ */

.mod_article [class*="ce_"],
.mod_article [class*="mod_"] {

	margin: 0 0 0px 0;
}

.mod_article [class*="layout_"] > * ,
.mod_article [class*="event_"] > * {

	margin-left: 10px;
	margin-right: 10px;
}

.margin {

	margin: 0 10px 0 10px !important;
}

/* =============================================================================
 * 4) Überschriften Querstreifen
 * ============================================================================= */

h1.category {

	background: rgb(44, 52, 101);
	border-bottom: 6px solid #fff;
	color: #fff;
	padding: 0 0 0 0.1em;
	margin: 0 0 0 0;
	line-height: 2.6em;
	height: 80px;
}

h2.category {

	background: rgb(44, 52, 101);
	border: 3px solid #fff;
	color: #fff;
	padding: 0 0 0 0.1em;
	margin: 0.4em;
	line-height: 2.6em;
	height: 62px;
}

/* Accordion Headlines as toogler */

#main span.ui-icon {

	background-image: url(../img/btn-collapse.png);
	background-repeat: no-repeat;
	background-position: 0px 0px; /* sichtbarer bildausschnitt + */
	display: block;
	float: right;
	margin-top: 28px;
	margin-right: 24px;
	height: 23px;
	width: 24px;
	z-index: 10;
}

#main .toggler:hover h1.category {

	cursor: pointer;
	background-color: rgb(61, 72, 139); /* farbe aufhellen bei mouse-hoover*/
}

#main .toggler.ui-accordion-header-active span.ui-icon {

	background-image: url(../img/btn-collapse.png);
	background-position: -24px 0px; /* bildausschnitt auf - verschoben */
}

/* ===============================================================================
 * 4) Links
 * =============================================================================== */

a, 
a:visited {

	color: #fff;
	text-decoration: underline;
	outline: 0;
}

a:hover,
a:focus {

	color: #bbb;

}

p a,
p a:visited {

	line-height: inherit;

}



/* ===========================================================================
 * Images
 * =========================================================================== */

#header_img img {

	margin: 0;
	height: auto; /* check nach Typo! */ 
	max-width: 100%;

}

body {

	background-color: #000;

}

/* ===========================================================================
 * Termine
 * =========================================================================== */

#termine {

	color: #fff;
	background: rgb(0, 0, 0);
}

#termine span.date {

	font-family: "Source Sans Pro", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 2em;
	line-height: 1.8em;
	color: #fff;
	font-weight: 900;
	display: inline-block;
	width: auto;
}

#termine div.event {

	border-bottom: solid 1px #fff;

}

#termine div.even span.date {

	/*color: rgb(196,33,105);*/

}

#termine div.odd span.date {

	/*color: rgb(249,156,61);*/

}

#termine span.time {

	font-family: "Source Sans Pro", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 1em;
	line-height: 1.2em;
	color: #fff;
	font-weight: 900;
	display: inline-block;
	width: auto;
}

#termine a {

	font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
	font-size: 1.6em;
	font-weight: 400; /* check nach Typo */
	color: #fff;
	line-height: 2em;
}

#termine a, #termine a:visited {

	color: #fff;
	text-decoration: none;
}

#termine a:hover {

	text-decoration: underline;
	color: #aaa;
}

div.mod_eventreader {

	border-bottom: solid 6px #fff;
}

#link_termine {

	/*background: rgb(103, 134, 6);*/
}

#link_termine a {

	line-height: 2em;
	margin: 0 25% 0 25%;
}

/* ================================================
 * Termine layout_upcoming
 * ================================================*/

#mod_terminliste div.even {

	background-color: #111;

}

#mod_terminliste div.odd {

	background-color: #303030;
}

/* ==========================================================================
 * Audio
 * ========================================================================== */

#audio .soundcloud {
	font-size: 1.4em;
	line-height: 2em;
	margin-left: 0.4em;
}

/*.audioclips_slider,
#audioclips nav {

	background: rgb(0, 0, 0);
}

.clips_albumtitle,
.clips_songtitle {

	color: rgb(256, 256, 256);
}

.clips_albumtitle {

	margin-top: 1em;
}

#audioclips img {

	margin: 20px;
	border: solid 2px #fff;
	max-width: 80%;
}

#audioclips div.mejs-container {

	border: solid 2px #fff;
}

#audioclips a,
#audioclips a:visited {

	color: #fff;
	text-decoration: none;
	margin: 0 1em 0 1em;
}

#audioclips div.mejs-container {

	max-width: 98% !important;

}*/
/* ==========================================================================
 * News (Startseite)
 * ========================================================================== */

#news {

	color: #333;
	background: rgb(171, 207 , 227);
}

#main_nachrichtenliste h1 {

	background-color: inherit;
	color: #000;
	border: 0;
	height: auto;
	line-height: 1em;
	font-size: 1.8em;
	margin: 0.4em 0 0.4em 10px;
}

#main_nachrichtenliste h2 {

	background-color: inherit;
	color: #000;
	border: 0;
	font-size: 1.4em;
	line-height: 1em;
}

/* ==========================================================================
 * Über Uns
 * ==========================================================================*/

#ueber-uns {

	background-color: #000;
	color: #ddd;
}

#ueber-uns h1 {

	border-top: 0;
}

#ueber-uns h2 {

	color: #fff;
	margin: 0.4em 0.4em 0.4em 0.4em;
}

#ueber-uns_dreizeiler p {

	font-family: "Source Sans Pro";
	font-style: italic;
	font-weight: 300;
	padding: 1.4em 1em 1em 0em;
	font-size: 1.6em;
	line-height: 1.2em;
}

/* Fügt vor unter hinter dreizeiler Anführungsstriche ein */

#ueber-uns_dreizeiler p:before { 

	content: open-quote;
} 

#ueber-uns_dreizeiler p:after {

	content: close-quote;
}

div.bio_wrapper h2 {

	color: #fff;
	margin: 0.4em 0 0.4em 0em;
	width: 100%;
}

#bio_slider img {

	border: 2px solid #FFFFFF;
	margin: 0 13px 0 6px;
}

#bio_slider a, #bio_slider a:visited {

	color: #fff;
	text-decoration: none;
}

#bio_slider a:hover {

	text-decoration: underline;
	color: #aaa;
}

/****** Besetzung ************/

#bandmembers span,
#ueber-uns_stichworte span {

	display: inline-block;
}

#bandmembers li span.name {

	width: 170px;
	font-size: 1.2em;
	line-height: 1.2em;
	text-align: right;
	border-right: solid 2px #fff;
	padding-right: 0.4em;
}

#bandmembers li span.instrument {

	padding-left: 0.4em;
}

/********************************/

/* Gestaltung der farbigen Schlagworte */

#stichworte span.type {

	text-align: right;
	font-size: 2em;
	line-height: 1.6em;
	font-weight: normal;
}

#stichworte span.homebase {

	text-align: right;
	font-size: 1.2em;
	line-height: 1.6em;
	font-weight: normal;
}

#stichworte span.style {

	text-align: right;
	font-size: 2em;
	line-height: 1.6em;
	font-weight: normal;
}

span.jazz {

	color: rgb(201,7,101);
}

span.world {

	color: rgb(247,207,114);
}

span.pop {

	color: rgb(3,117,191);
}

span.contemporary {

	color: rgb(157,110,182);
}

span.crossover {

	color: rgb(103,134,6);
}

#bandmembers {
	padding-left: 10%;
}

/* ==============================
 * Call to Action
 * ============================== */

#calltoaction p {

	font-family: "Source Sans Pro";
	font-weight: 400;
}

p.calltoaction_intro_en {

	display: none;
}

#calltoaction {

	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
	padding: 1em 0 0 1em;
}

/* ========================================
 * Referenzen
 ======================================== */

#referenzen_intro p {color_ #fff;

	font-family: "Source Sans Pro";
	font-style: italic;
	font-weight: 300;
	padding: 0.4em 1em 1em 1em;
	font-size: 1.6em;
	line-height: 1.2em;
}

div.referenzen_list h3 {

	color: #fff;
	font-size: 1.6em;
}

div.referenzen_list {

	font-size: 0.8em;
	color: #ddd;
	margin-left: 10px !important;
	margin-right: 10px !important;
	margin-bottom: 1em !important;
}

#referenzen span.year {

	margin-right: 0.4em;
}

/* ==========================================================================
 * Video
 * ========================================================================== */

#featured-video .youtube {
	font-size: 1.4em;
	line-height: 3em;
	margin-left: 0.4em;
}

/* ==========================================================================
 * Fotos
 * ========================================================================== */
/
/* ==========================================================================
 * Presse
 * ========================================================================== */

#presse p.zitat_short {

	font-family: "Source Sans Pro", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-style: italic;
	font-weight: 300;
	font-size: 1.8em;
	line-height: 1.4em;
}
#presse p.zitat_medium {

	font-family: "Source Sans Pro", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-style: italic;
	font-weight: 300;
	font-size: 1.8em;
	line-height: 1.4em;
}
#presse p.zitat_long {

	font-family: "Source Sans Pro", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-style: italic;
	font-weight: 300;
	font-size: 1.6em;
	line-height: 1.4em;
}

#presse div {

	margin-top: 1em;

}

#presse p {

	padding-left: 1em;
	padding-right: 1em;
	margin: 0 0 0.4em 0;
}

#presse p.zitat_short:before {

	content: open-quote;
}

#presse p.zitat_medium:before {

	content: open-quote;
}

#presse p.zitat_long:before {

	content: open-quote;
}

#presse p:after {

	content: close-quote;
}

#presse p.quelle {

	text-align: right;
	margin: 0 2em 1em 0;
	font-size: 1.2em;
}

/* ==========================================================================
 * Workshops
 * ========================================================================== */

#workshops {

	background-color: #2E2E2E;

}

#workshops h1.category {

	/*background-color: rgb(231,58,150); pink */

}

#workshops p {

	font-family: "Source Sans Pro", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 400;
	/*padding: 0;*/
	font-size: 1.2em;
	line-height: 1.2em;
}

#workshops p.workshops_intro {

	font-family: "Source Sans Pro", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-style: italic;
	font-weight: 300;
	padding: 1.4em 1em 1em 0em;
	font-size: 1.6em;
	line-height: 1.2em;
}

div.workshops_list {

	font-size: 2em;
	line-height: 1.2em;
}

#workshops div.workshops_teaser p {

	line-height: 1.8em;
	border-bottom: solid 1px #fff;
}

span.color_1 {

	color: rgb(231,58,150);
	font-size: 2em;
}

span.color_2 {

	color: rgb(247,207,114);
	font-size: 1.2em;
}

span.color_3 {

	color: rgb(3,117,191);
	font-size: 1.4em;
}

div.calltoaction {

	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
	padding: 1em 1em 1em 1em;
}

div.calltoaction button {

	margin: 0;
}

#workshops p.left {

	border-right: solid 1px #fff;
	line-height: 1.6em;
}

#workshops p.middle {

	border-right: solid 1px #fff;
	line-height: 1.4em;
}

#workshops p.right {

	line-height: 1.4em;
}

#workshops span.em {

	font-size: larger;
}

/* ==========================================================================
 * Aktuelle Konzertprogramme
 * ========================================================================== */

#aktuelle-konzertprogramme {

	background-color: #000;
	color: #ddd;
}
#programme_detail h2 {

	/*color: rgb(103, 134, 6);*/
	padding-left: 10px;
	padding-bottom: 10px;
	padding-top: 10px;
}

#programme_neues h2 {

	/*color: rgb(103, 134, 6);*/
	padding-left: 10px;
	padding-bottom: 10px;
	padding-top: 10px;
}

#programme_vsf h2 {

	/*color: rgb(204, 7, 109);*/
	padding-left: 10px;
	padding-bottom: 10px;
	padding-top: 10px;
}

#programme_alma h2 {

	/*color: rgb(247,207,114);*/
	padding-left: 10px;
	padding-bottom: 10px;
	padding-top: 10px;
}

#aktuelle-konzertprogramme .slider-prev {

	left: 10px;
}

#aktuelle-konzertprogramme .slider-next {

	right: 10px;
}
#aktuelle-konzertprogramme figure {

	margin-right: 1em;
}

/* ==========================================================================
 * CDs und Noten
 * ========================================================================== */

#cds-und-noten div.item_box {

	background-color: #333;
	color: #ddd;
	margin-top: 10px;
}

#cds-und-noten img {

	border: solid 8px #fff;
}

.item_box .mitte {

	margin-left: 10px;
	margin-top: 15px;
}

.item_box .rechts {

	margin-left: 10px;
	margin-top: 65px;
}

#cds-und-noten figure.image_container {

	padding: 27px;
	/*padding-top: 27px;*/
}

div.item_box h2 {

	font-size: 1.4em;
}

.item_box button {

	margin-left: 10px;
}

.button_noten {

	margin-left: 36px;
}

#noten_groovystrings h2,
#noten_stringthingcollection h2 {

	margin-top: 20px;
}

#cds-und-noten h2 {

	color: #FFFFFF;
	margin: 0.4em;
}

.beispielseiten div.ce_image {

	float: left;
}

/* ==========================================================================
 * Kontakt und Booking
 * ========================================================================== */
#kontakt-und-booking,
#kontakt-und-booking-18 {

	background-color: #000;
}/* 																			Zentral regeln? */

#kontakt-und-booking h2 {

	font-size: 1.6em;
	line-height: 1.2em;
	margin: 0.2em 0 0 0;
}

#kontakt-und-booking p {

	margin: 0 0 0.4em 0;
}

#impressum {

}

/* ==========================================================================
 * Footer
 * ========================================================================== */

#footer {

	background-color: #000;
}

div.backtotop {

	display: inline;
	float: left;
	padding-left: 1em;
	margin-top: 1em;
}

#copyright {

	display: inline;
	float: right;
	padding-right: 1em;
	margin: 0.6em 0 10px 0.6em;
}

#footer ul {

	margin: 0.6em 0 0.6em 10px;
}

#footer li {

	display: inline-block;
}

/* ==========================================================================
 * Farben (Backgrounds)
 * ========================================================================== */

div.bg_1 {

	background-color: #000;
}

div.bg_2 {

	background-color: #303030;
}

div.bg_3 {

	background-color: #606060;
}

/* ==========================================================================
 * Buttons
 * ========================================================================== */

.button,
button {

	background: #eee; /* Old browsers */
	background: #eee -moz-linear-gradient(top, rgba(255,255,255,.2) 0%, rgba(0,0,0,.6) 100%); /* FF3.6+ */
	background: #eee -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.6)), color-stop(100%,rgba(0,0,0,.2))); /* Chrome,Safari4+ */
	background: #eee -webkit-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.6) 100%); /* Chrome10+,Safari5.1+ */
	background: #eee -o-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.6) 100%); /* Opera11.10+ */
	background: #eee -ms-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.6) 100%); /* IE10+ */
	background: #eee linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.6) 100%); /* W3C */
	border: 1px solid #aaa;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	color: #444;
	display: inline-block;
	font-size: 11px;
	font-weight: bold;
	text-decoration: none;
	text-shadow: 0 1px rgba(255, 255, 255, .75);
	cursor: pointer;
	margin-bottom: 20px;
	line-height: normal;
	padding: 8px 10px;
	font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.button:hover, button:hover {
	color: #222;
	background: #ddd; /* Old browsers */
	background: #ddd -moz-linear-gradient(top, rgba(255,255,255,.3) 0%, rgba(0,0,0,.6) 100%); /* FF3.6+ */
	background: #ddd -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.6)), color-stop(100%,rgba(0,0,0,.3))); /* Chrome,Safari4+ */
	background: #ddd -webkit-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.6) 100%); /* Chrome10+,Safari5.1+ */
	background: #ddd -o-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.6) 100%); /* Opera11.10+ */
	background: #ddd -ms-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.6) 100%); /* IE10+ */
	background: #ddd linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.6) 100%); /* W3C */
	border: 1px solid #888;
	border-top: 1px solid #aaa;
	border-left: 1px solid #aaa;
}

.button:active, button:active {
	border: 1px solid #666;
	background: #ccc; /* Old browsers */
	background: #ccc -moz-linear-gradient(top, rgba(255,255,255,.35) 0%, rgba(10,10,10,.8) 100%); /* FF3.6+ */
	background: #ccc -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.35)), color-stop(100%,rgba(10,10,10,.8))); /* Chrome,Safari4+ */
	background: #ccc -webkit-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.8) 100%); /* Chrome10+,Safari5.1+ */
	background: #ccc -o-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.8) 100%); /* Opera11.10+ */
	background: #ccc -ms-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.8) 100%); /* IE10+ */
	background: #ccc linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.8) 100%); /* W3C */
}

.button.full-width, button.full-width {
	width: 100%;
	padding-left: 0 !important;
	padding-right: 0 !important;
	text-align: center;
}

/* Fix for odd Mozilla border & padding issues */
button::-moz-focus-inner, input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

/* ===============================================================================
 * Bestellformular
 * =============================================================================== */

body.bestellformular #main {

	background-color: #000;
}

fieldset.formbody {

	margin-left: 1em;
	margin-bottom: 1em;
	margin-right: 1em;
	border: 1px solid #ffffff;
	padding: 0.4em;
}

h2.category.order {

	background-color: rgb(251,209,112);
}

label {

	display: inline-block;
	float: left;
	width: 200px;
	margin: 0.6em 8px 0 0;
}

/* ===================================
 * Breite der Eingabefelder
 * =================================== */

input.form_menge {

	width: 40px;
	margin: 0.6em 0 0 0;
}

input.form_daten {

	width: 100%;
	margin: 0 0 0 0;	
}


select.form_auswahl {

	margin-top: 16px;
}

#bestellformular input:focus {

	background-color: rgb(156, 208, 229);
}

#hinweise h2.category,
#preise h2.category {

	margin: 0.4em;
}

/* ============================================
 * Preise 
 * ============================================ */

#preise tr {

	border-bottom: solid 1px #fff;
}

#preise caption {

	font-size: 1.6em;
	line-height: 1.4em;
	padding-left: 0.4em;
}

#preise h3 {
	margin-left: 0.6em;
}

#preise p,
#bestellformular p {

	margin-left: 1em;
}

#hinweise p, 
#preise p {

	padding-left: 1em;
}

#preise td {
	padding: 1em;
}

.button_back {

	margin-left: 1.6em;
}

#preise table {

	width: 100%;

}

#bestaetigung p {

	margin: 1em 0 1em 0;
	font-size: 1.4em;
	line-height: 1.2em;
}

/* ============================================================================== */
/* Alle Termine 																  */
/* ============================================================================== */

#alle-termine {

	background-color: rgb(0,0,0);
}

#alle-termine .event {

	border-bottom: solid 1px #fff;
}

#alle-termine .event h1 {

	font-size: 1.6em;
}

#alle-termine .event h2 {

	font-size: 1.2em;
}

#alle-termine .info {

	font-size: 1.6em;
}


.toplink a {

	line-height: 2em;
}

/* ============================================================================= */
/* 16) Media Queries															 */
/* ============================================================================= */

@media only screen and (min-width: 768px) {

	body {
		background-image: url("../img/bg.jpg");
		background-repeat: no-repeat;
		background-position: 0 0 0 0;
		background-color: #000;
	}
	
	.slider-control .slider-menu {
    font-size: 40px;
	}

	input.form_daten, textarea.form_daten {
		width: 300px;
		margin: 0 0 0.4em 0;
	}

/*	#ctrl_18 {
    
    	margin: 0 0.4em 1em 0;
    	width: 40px;
	}*/
	input.form_button_send {
		margin-left: 200px;
	}
}

/* ---------------------------------------------------- */
/* Smaller than standard 960 (devices and browsers)     */
/* ---------------------------------------------------- */

@media only screen and (max-width: 959px) {
	object, embed, video, iframe {
		max-width: 100%;
	}
}

/* ----------------------------------------------------------- */
/* Tablet Portrait size to standard 960 (devices and browsers) */
/* ----------------------------------------------------------- */

@media only screen and (min-width: 768px) and (max-width: 959px) {

	span.color_1 {

		font-size: 1em;
	}

	span.color_2 {

		font-size: 1em;
	}

	span.color_3 {

		font-size: 1em;
	}

	#termine span.date {

		font-family: "Source Sans Pro", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size: 1.6em;
		line-height: 1.4em;
		color: #fff;
		font-weight: 900;
		display: block;
		width: auto;
	}

	#termine span.time {

		font-family: "Source Sans Pro", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size: 1em;
		line-height: 1.2em;
		color: #fff;
		font-weight: 900;
		display: inline-block;
		width: auto;
	}

	#termine a {

		font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
		font-size: 1.6em;
		font-weigth: 400;
		color: #fff;
		line-height: 1.8em;
	}

}

/* All Mobile Sizes (devices and browser) */

@media only screen and (max-width: 767px) {

	#audioclips img {
	
		display: none;
	}

	#audioclips .audio_content {

		padding-bottom: 10px;
	}

	h1.category {

		line-height: 1.6em;
		height: 40px;
		font-size: 1.8em;
	}

	h2.category {

		font-size: 1.4em;
		height: 40px;
	}

	h1.hl_long {

		font-size: 1.6em;
		line-height: 2em;
	}

	h2.hl_long {
		font-size: 1.4em;
		/*line-height: 4.6em;*/
	}

	#main span.ui-icon {
		margin-top: 10px;
		margin-right: 13px;
	}

	p {
		font-size: 0.8em;
	}

	/****** Konzertprogramme *****/

	#aktuelle-konzertprogramme img {

		width: 100%;
	}

	.captcha_text {

		display: block;
	}

	.beispielseiten div.ce_image {

		display: none;
	}
}

/* ---------------------------------------------------------------- */
/* Mobile Landscape Size to Tablet Portrait (devices and browsers)  */
/* ---------------------------------------------------------------- */

@media only screen and (min-width: 480px) and (max-width: 767px) {

	/* Termine Adjustments */

	#termine span.date {
		font-family: "Source Sans Pro", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size: 1.6em;
		line-height: 1.4em;
		color: #fff;
		font-weight: 900;
		display: block;
		width: auto;
	}
	#termine span.time {
		font-family: "Source Sans Pro", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size: 1em;
		line-height: 1.2em;
		color: #fff;
		font-weight: 900;
		display: inline-block;
		width: auto;
	}
	#termine a {
		font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
		font-size: 1.2em;
		font-weigth: 400;
		color: #fff;
		line-height: 1.6em;
		/*background-color: blue;*/
	}


	/* Presse Adjustments */
	
	#presse p.zitat_short {

		font-size: 1em;
		line-height: 1.2em;
	}

	#presse p.zitat_medium {

		font-size: 1em;
		line-height: 1.2em;
	}

	#presse p.zitat_long {

		font-size: 1em;
		line-height: 1.2em;
	}

	#presse p.quelle {

		/*float: right;*/
		text-align: right;
		margin: 0 1em 1em 0;
		font-size: 1em;
	}

	#bio_slider p {
		font-size: 0.8em;
	}

	#ueber-uns_dreizeiler p,
	#referenzen_intro p,
	#workshops p.workshops_intro {

		font-size: 1.2em;
		line-height: 1.2em;
	}

	#workshops p {
		font-size: 0.8em;
	}

}

/* -------------------------------------------------------------------- */
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
/* -------------------------------------------------------------------- */

@media only screen and (max-width: 479px) {

	h2 {
		font-size: 1.4em;
		line-height: 1em;
		margin-bottom: 10px;
	}

	h3 {
		font-size: 1em;
		line-height: 1em;
		margin-bottom: 8px;
	}

	.slider-control .slider-menu {
		font-size: 22px;
		top: -8px !important;
	}

	#ueber-uns_dreizeiler p, 
	#referenzen_intro p {
	
		font-size: 1.2em;
		line-height: 1.2em;
		padding: 0;
	}
	
	#featured-video .youtube {
	
		font-size: 0.9em;
		line-height: 2.2em;
	}

	#aktuelle-konzertprogramme img {
		margin: 0 0 1em 0;
	}
	
	#bio_slider img {
	
		width: 120px;
	}
	/*Termine */

	#termine span.date {
	
		font-family: "Source Sans Pro", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size: 1.4em;
		line-height: 1.6em;
		color: #fff;
		font-weight: 900;
		display: block;
		width: auto;
	}
	
	#termine span.time {
	
		font-family: "Source Sans Pro", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size: 1em;
		line-height: 1.2em;
		color: #fff;
		font-weight: 900;
		display: inline-block;
		width: auto;
	}
	
	#termine a {
	
		font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
		font-size: 0.8em;
		line-hight: 1.4 font-weigth : 400;
		color: #fff;
	
	}

	.item_box .rechts {
	
		margin-left: 10px;
		margin-top: 0px;
	}
	
	#img_bestedition figure.image_container {
	
		padding: 0 3% 3% 0;
	}
	
	.button_noten {
	
		margin-left: 0px;
		margin-top: 6px;
	}

	span.color_1 {
	
		font-size: 1.2em;
	}
	
	span.color_2 {
	
		font-size: 1.1em;
	}
	
	span.color_3 {
		font-size: 1.3em;
	}

	/****** Workshops *******/
	
	#workshops p.left {
	
		border-right: 0;
		border-bottom: solid 1px #fff;
	}
	
	#workshops p.middle {
	
		border-right: 0;
		border-bottom: solid 1px #fff;
	}
	

	/* Adjustments Presse */

	#presse p.zitat_short {
		/*font-family: "Source Sans Pro", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
		 font-style: italic;
		 font-weight: 300;*/
		font-size: 1em;
		line-height: 1.2em;
	}
	#presse p.zitat_medium {
		/*font-family: "Source Sans Pro", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
		 font-style: italic;
		 font-weight: 300;*/
		font-size: 1em;
		line-height: 1.2em;
	}
	#presse p.zitat_long {
		/*font-family: "Source Sans Pro", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
		 font-style: italic;
		 font-weight: 300;*/
		font-size: 1em;
		line-height: 1.2em;
	}
	#presse p.quelle {
		/*float: right;*/
		text-align: right;
		margin: 0 1em 1em 0;
		font-size: 1em;
	}

	/* Adjustments Bestellformular */

	
	#preise td {

		padding: 0.4em;
		font-size: 0.8em;
	}

	#preise img {

		display: none;
	}

	/* Adjustments Workshops Adjustments */

	#workshops p.workshops_intro {
		padding: 1.4em 1em 1em 0em;
		font-size: 1em;
		line-height: 1.2em;
	}

	#workshops p {
		font-size: 1em;
	}

	/* Adjustments Alle Termine small screen */
	
	#alle-termine .event h1 {
		font-size: 1.2em;
	}
	#alle-termine .event µ
	h2 {
		font-size: 1em;
	}
	#alle-termine .info {
		font-size: 1.2em;
	}
	
	/* Adjustments Noten */

	#noten_groovystrings figure, #noten_stringthingcollection figure {
		width: 100px;
		margin-right: 1em;
	}
}

/* ========================================================================== 
/* Experimental
/* ========================================================================== */

a.slider-next, 
a.slider-prev {

	font-size: 1.4em;
	margin: 0 1em 0 1em;
}

.slider-control {

	height: 38px;
}

.slider-control .slider-menu b.active {
	color: #C90765;;
}

/* Es gibt irgendwie ein Problem mit den Margins, 
	wenn der viewport verkleinert wird */

audio,
canvas,
img, 
video {

	vertical-align: middle;
}

[hidden] {

	display: none;
}

/**
 * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
 * 2. Improve image quality when scaled in IE 7.
 */

img {
	border: 0; /* 1 */
	-ms-interpolation-mode: bicubic; /* 2 */
}

/**
 * Correct overflow displayed oddly in IE 9.
 */

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