@media screen and (min-width: 681px) {
	.is-hidden-desktop {
		display: none !important;
	}
}
 
@media screen and (max-width: 680px) {
	.is-shown-desktop-only {
		display: none !important;
	}

	#mobile-nav-container {
		position: absolute;
		top: 10px;
		left: -25px;
		z-index: 10;
	}

	#mobile-nav-container > nav {
		position: relative;
	}

	.menu-anchor
	{
	  text-decoration: none !important;
	  color: white;
	  transition: color 0.3s ease;
	}
	
	.menu-anchor:hover
	{
	  color: tomato;
	}
	
	#menuToggle
	{
	  display: block;
	  position: relative;
	  top: 50px;
	  left: 50px;
	  z-index: 1;
	  -webkit-user-select: none;
	  user-select: none;
	}
	
	#menuToggle input
	{
	  display: block;
	  width: 40px;
	  height: 32px;
	  position: absolute;
	  top: -7px;
	  left: -5px;
	  
	  cursor: pointer;
	  
	  opacity: 0; /* hide this */
	  z-index: 2; /* and place it over the hamburger */
	  
	  -webkit-touch-callout: none;
	}
	
	/*
	 * Just a quick hamburger
	 */
	#menuToggle span
	{
	  display: block;
	  width: 33px;
	  height: 4px;
	  margin-bottom: 5px;
	  position: relative;
	  
	  background: tomato;
	  border-radius: 3px;
	  
	  z-index: 1;
	  
	  transform-origin: 4px 0px;
	  
	  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
				  background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
				  opacity 0.55s ease;
	}
	
	#menuToggle span:first-child
	{
	  transform-origin: 0% 0%;
	}
	
	#menuToggle span:nth-last-child(2)
	{
	  transform-origin: 0% 100%;
	}
	
	/* 
	 * Transform all the slices of hamburger
	 * into a crossmark.
	 */
	#menuToggle input:checked ~ span
	{
	  opacity: 1;
	  transform: rotate(45deg) translate(-2px, -1px);
	  background: white;
	}
	
	/*
	 * But let's hide the middle one.
	 */
	#menuToggle input:checked ~ span:nth-last-child(3)
	{
	  opacity: 0;
	  transform: rotate(0deg) scale(0.2, 0.2);
	}
	
	/*
	 * Ohyeah and the last one should go the other direction
	 */
	#menuToggle input:checked ~ span:nth-last-child(2)
	{
	  transform: rotate(-45deg) translate(0, -1px);
	}
	
	/*
	 * Make this absolute positioned
	 * at the top left of the screen
	 */
	#menu
	{
	  position: absolute;
	  width: 220px;
	  margin: -100px 0 0 -50px;
	  padding: 50px;
	  padding-top: 125px;
	  background: black;
	  list-style-type: none;
	  -webkit-font-smoothing: antialiased;
	  /* to stop flickering of text in safari */
	  transform-origin: 0% 0%;
	  transform: translate(-100%, 0);
	  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
	  opacity: 0.7;
	  color: white;
	}
	
	#menu li
	{
	  padding: 10px 0;
	  font-size: 22px;
	}
	
	/*
	 * And let's slide it in from the left
	 */
	#menuToggle input:checked ~ ul
	{
	  transform: none;
	}

	#navigation_title {
		font-size: 1.5rem !important;
		letter-spacing: 10px !important;
	}

	#header_img {
		height: 300px !important;
	}

	#content > .heading { font-size: 1rem !important;}
	 #content > .description { font-size: 0.8rem !important;}
	 
	 .socialMedia > .sxc-follow-buttons {
		 flex-direction: row !important;
		}
	
}

.socialMedia {
	position: absolute;
	right: 0;
}

.socialMedia > .sxc-follow-buttons {
	display: flex;
	flex-direction: column;
	opacity: 0.8;
}

.socialMedia > .sxc-follow-buttons .sxc-follow-button a img {
	width: 40px !important;
	height: 40px !important;
}

	/*
	Theme Name: Waggershausen
	Author: Navarra Visuelle Kommunikation
	Author URI: http://navarra-design.com/
	Version: 1.0
	License: GNU General Public License v2 or later
	License URI: http://www.gnu.org/licenses/gpl-2.0.html
	*/
	
	
	@font-face {
		font-family: 'beosansbold';
		src: url('fonts/beosans-boldr11-webfont.eot');
		src: url('fonts/beosans-boldr11-webfont.eot?#iefix') format('embedded-opentype'),
			 url('fonts/beosans-boldr11-webfont.woff') format('woff'),
			 url('fonts/beosans-boldr11-webfont.ttf') format('truetype'),
			 url('fonts/beosans-boldr11-webfont.svg#beosansregular') format('svg');
		font-weight: normal;
		font-style: normal;
	
	}
 
 
 /* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
 -------------------------------------------------------------- */
 
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
 del, dfn, em, font, ins, kbd, q, s, samp,
 small, strike, strong, sub, sup, tt, var,
 dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend,
 table, caption, tbody, tfoot, thead, tr, th, td {
	 border: 0;
	 font-family: inherit;
	 font-size: 100%;
	 font-style: inherit;
	 font-weight: inherit;
	 margin: 0;
	 outline: 0;
	 padding: 0;
	 vertical-align: baseline;
 }
 :focus {/* remember to define focus styles! */
	 outline: 0;
 }
 
 ul {
	 list-style: none;
 }
 table {/* tables still need 'cellspacing="0"' in the markup */
	 border-collapse: separate;
	 border-spacing: 0;
 }
 
 a img {
	 border: 0;
 }
 article, aside, details, figcaption, figure,
 footer, header, hgroup, menu, nav, section {
	 display: block;
 }
 
 html {-webkit-text-size-adjust:none; -webkit-min-device-pixel-ratio:0;}
 
 body {margin: 0; padding: 0; background: #0b0b0b url(img/background.png); color: #ffffff; text-align: center; font-size: 15px; font-family: 'Arvo', Arial, sans-serif; font-weight: 400;}
 
 input, textarea {
	 border: 0;
	 color: #808080;
	 font: 12px 'Arvo', Arial, sans-serif;
 }
 
 /* Headings */
 h1,h2,h3,h4,h5,h6 {
	 clear: both;
 }
 
 /* Text elements */
 sup,
 sub {
	 font-size: 10px;
	 height: 0;
	 line-height: 1;
	 position: relative;
	 vertical-align: baseline;
 }
 sup {
	 bottom: 1ex;
 }
 sub {
	 top: .5ex;
 }
 
 /* Links */
 a {
	 color: #ffffff;
	 text-decoration: none;
 }
 a:active,
 a:hover {
	 text-decoration: underline;
 }

 
 /* structure
 ----------------------------------------------- */
 #light_background {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(img/light_background.png) no-repeat center top; z-index: 2;}
 #basis {margin: 0 auto;width: 100%; max-width: 1024px; min-height: 946px;background: #000000;overflow: hidden;z-index: 3;/* padding: 0 8px; */}
	 #header_img {width: 100%; z-index: 3; height: 445px;}
	 #header_img > img {width: 100%; height: auto;}
	 #border_left {position: absolute; top: 0; left: 1px; width: 5px; height: 100%; background: url(img/border_left.png) repeat-y; z-index: 5;}
	 #border_right {position: absolute; top: 0; right: 0; width: 5px; height: 100%; background: url(img/border_right.png) repeat-y; z-index: 5;}
 
 /* header */
 #navigation {width: 100%; z-index: 5; display: flex;
 flex-direction: column; align-items: center; margin-bottom: 10px;}
	 #top_navi {width: 100%;}
	 #navigation_title {padding: 0 0 0 5px; color: #fff8f8;font-size: 60px;font-family: 'beosansbold';letter-spacing: 14px;text-transform: uppercase;}
	 #navigation ul {padding: 0 8px;}
		 #navigation ul li {display: block; background: url(img/ie_hack.png); position: relative; float: left; height: 66px; line-height: 22px; font-size: 19px; font-family: 'beosansbold'; letter-spacing: 3px; text-transform: uppercase;}
			 #navigation ul li#menu-item-27 {width: 20%;}
			 #navigation ul li#menu-item-28 {width: 20%;}
			 #navigation ul li#menu-item-24 {width: 20%;}
			 #navigation ul li#menu-item-29 {width: 20%;}
			 #navigation ul li#menu-item-22 {width: 20%;}
			 #navigation ul li a {color: #999999}
				 #navigation ul li a:hover, #navigation ul li.current-menu-parent a, #navigation ul li.current-menu-item a {color: #ffffff; text-decoration: none;}
				 #navigation ul li ul {margin-top: 6px; padding: 0; width: 100%; display: none;}	
					 #navigation ul li ul li {float: none; display: block; padding: 0; width: 100%; height: 20px; line-height: 20px; font-size: 16px; letter-spacing: 1px;}
						 #navigation ul li.current-menu-parent ul li a {color: #999999;}
							 #navigation ul li.current-menu-parent ul li a:hover, #navigation ul li.current-menu-parent ul li.current-menu-item a {color: #ffffff;}
					 
 /* content */
 #content {position: relative;padding: 0 8px 8px 0;height: 100%;overflow: hidden;font-size: 15px;text-align: left;z-index: 4;}					
 #content .new-album-cover {display: flex; flex-direction: column}
 #content .new-album-cover > img { width: 100%; height: 100%}
 #content.disco > .heading { padding-left: 16px;}
 #content.disco > .description { padding-left: 16px;}
 #content_slide_box > p > iframe {width: 100% !important; height: 550px;}
	 
	 #content p {margin: 0 0 20px 0; line-height: 20px;}
		 #content.contact p {margin: 0 0 15px 0; line-height: 14px; font-size: 12px;}
		 #content.col3 p {margin: 0; line-height: 20px; font-size: 12px;}
	 #content strong {font-weight: 700;}
	 #content em {font-style: italic;}
	 #content h1 {font-size: 2rem;font-family: 'beosansbold';text-transform: uppercase;letter-spacing: 2px;}
	 #content h3 {font-size: 16px; font-family: 'beosansbold'; text-transform: uppercase; letter-spacing: 2px;}
		 #content_left h1 {margin-bottom: 10px;}
		 #content_left h3 {margin-bottom: 10px;}
		 #content_right #lyrics_text {padding: 0 0 50px 0; line-height: 24px; color: #808080; font-size: 14px;}
		 #content_right img#navarra_img {padding: 30px 0 0 0;}
	 .contact #content_left {float: left; padding: 0 0 0 63px; width: 510px;}
	 .contact #content_right {float: right; padding: 0 29px 0 0; width: 314px;}
	 .contact #content_left p {color: #999999;}
	 .contact #content_left a {display: block; padding: 0 0 0 25px; line-height: 26px; background: url(img/mail_icon_small.png) no-repeat left center;}
	 .contact #content_right {padding: 115px 0 0 0;}
	 
	 #content.col1 {position: relative;overflow: hidden;font-size: 12px;line-height: 20px;text-align: left;z-index: 4;padding: 16px;}
	 #content.disco {width: 100%;height: 100%;overflow: hidden;font-size: 14px;line-height: 20px;text-align: left;z-index: 4;padding: 0 8px;}
	 #content.media {padding: 0 16px; height: 100%; overflow: hidden; font-size: 14px; line-height: 20px; text-align: left; z-index: 4;}
	 
	 .col3 h1 {margin-bottom: 10px;padding: 0 16px;}
	 .col1 h1, .accord h1, .disco h1, .media h1, .media h3 {margin-bottom: 10px;}
	 #content_col3_box {position: relative;height: 100%;overflow: hidden;display: flex;justify-content: space-between;flex-wrap: wrap;padding: 0 16px;}
	 .col3 #content_col3_left {}
	 .col3 #content_col3_middle {}
	 .col3 #content_col3_right {}
	 
	 #content.accord {padding: 16px;}
		 #content.accord .accordion_title, #content.accord .accordion_title2 {display: block;position: relative;font-size: 12px;line-height: 22px;} 
			 #content.accord .accordion_title span, #content.accord .accordion_title2 span {height: 20px;font-size: 18px;font-family: 'beosansbold';letter-spacing: 2px;text-transform: uppercase;}
			 #content.accord .accordion_title .accordion_line {position: absolute;top: -5px;right: 0;display: block;width: 77%;height: 8px;background: url(img/accordion_arrow.png) no-repeat right top;border-top: 1px solid white;}
		 #content.accord .accordion_content {/* position: relative; *//* margin: 0 0 20px 217px; */padding: 8px;/* width: 505px; */background: #262626;font-size: 12px;line-height: 22px;} 
			 #content.accord .accordion_content .accordion_points {position: absolute; top: -30px; right: 30px; display: block; width: 15px; height: 5px; background: url(img/accordion_points.png) no-repeat;}
 /* footer */
 #footer {bottom: 0;left: 1px;height: 67px;background: url(img/footer_background.png) no-repeat;}		
	 #footer_part1 {float: left; width: 332px; height: 67px; line-height: 67px; color: #999999; font-size: 17px; font-family: 'beosansbold'; text-transform: uppercase; letter-spacing: 2px;}
	 #footer_part2 {float: left; width: 304px; height: 67px; font-size: 11px; text-transform: uppercase; font-family: 'beosansbold'; text-transform: uppercase; letter-spacing: 2px;}
		 #footer_part2 ul {width: 100%; height: 67px;}
			 #footer_part2 ul li {height: 67px; line-height: 67px;}
				 #footer_part2 ul li a {color: #999999;}
					 #footer_part2 ul li a:hover {color: #ffffff; text-decoration: none;}
	 #footer_part3 {float: left; padding: 20px 0 0 34px; width: 294px; height: 47px;}
 
 /* sidebars */
 .sidebar {position: relative;}
	 .border_top {position: absolute; top: 0; left: 0; width: 288px; height: 6px; background: url(img/border_top.png) no-repeat;}
	 #player_text_top {position: absolute; top: -40px; left: 82px; width: 186px; height: 30px; font-size: 13px; font-family: 'beosansbold'; text-transform: uppercase; letter-spacing: 1px; z-index: 7;}
	 #player_text_bottom {position: absolute; top: 12px; left: 82px; width: 186px; height: 47px; font-size: 12px; color: #808080; font-family: 'beosansbold'; letter-spacing: 1px; z-index: 7;}
		 #player_text_bottom  span {display: block; font-size: 16px; color: #ffffff; font-family: 'beosansbold'; text-transform: uppercase; letter-spacing: 2px;}
 
 #sidebar3 h3 {padding: 7px 0 0 0; line-height: 30px;}
 #lyrics_text {margin-top: 10px;}
	 
 /* news form */
 .newsform {position: relative; width: 263px; height: 30px; overflow: hidden;}	
	 .newsform .news_feld {position: absolute; top: 0; left: 0; padding: 0 5px; width: 219px; height: 30px; line-height: 30px; background: url(img/newsletter_input.png) no-repeat 0 0;}
		 .newsform .news_feld.error {background-position: 0 -30px;}
	 .newsform .news_send {position: absolute; top: 0; left: 229px; padding: 0 0 0 100px; width: 33px; height: 30px; background: url(img/newsletter_submit.png) no-repeat; cursor: pointer;}
	 
 /* discographie */
 #discographie_box {height: 100%;display: flex;overflow: hidden;flex-wrap: wrap;justify-content: space-evenly;}
 .discographie_item {padding: 0 10px;width: 195px;height: 300px;}
	 .discographie_item img {margin: 0 0 0 -10px; padding: 13px; background: url(img/disc_item_background.png) no-repeat;}
	 .discographie_item a:hover {text-decoration: none;}
	 .discographie_item p {margin: 0 15px;}
 .discographie_details {display: none; position: relative; padding: 24px 24px 24px 444px; width: 376px; min-height: 394px; max-height: 688px; overflow: hidden; background: #000000; font-size: 12px; color: #ffffff; text-align: left;}
	 .discographie_details ol {margin-top: 10px; padding: 0 0 30px 20px; }
		 .discographie_details ol li {font-size: 14px; line-height: 19px;}
	 
	 
 /* media */
 .media img {padding: 0 8px 4px 0;}	
	 
 /* tiny */
 #basis .grau_klein {color: #999999; font-size: 11px;}
 .disc_jahr_part1 {font-size: 17px; color: #999999;}
 .disc_jahr_part2 {display: block; font-size: 22px;}
 .disc_titel_part1 {font-size: 18px; font-weight: bold;}
 .disc_titel_part2 {display: block; padding: 0 0 15px 0; font-size: 32px; font-family: 'beosansbold'; background: url(img/disc_titel.png) no-repeat left bottom;}
 .disc_grau_klein_part2 {color: #999999; font-size: 10px;}
 .bild_part2 {position: absolute; top: 24px; left: 24px;}