/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Layout Styles
	#Content Styles
	#Media Queries
	#Font-Face */

/* #Layout Styles
================================================== */


/* #KOPFLEISTE */	

	.top-leiste{
		background: #021731;
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		z-index: 1030;
	}

	.top-container{
		width: 940px;
		margin: 5px auto 2px auto;
	}

	.buttons{
		float: right;
		margin-right: 10px;
	}

	.youtube{
		margin-right:20px;
	}
	
	.top-15{
		height: 15px;
	}

/* #LOGO */	

	.klammer{
		font-size: 48px;
	}
	
	.titelbild{
		padding: 0px;
		background: transparent url("../img/leiste-940.jpg");
		height: 276px;
		margin-bottom: 0px;
		
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		}

	
/* #NAVIGATION */

	
	.top-45{
		height: 45px;
	}
	.navigation-oben{
		display: block;
	}

	.navigation-oben ul li a{
		display: inline;
		float: left;
		color: #ededed;
		font-family: 'Poiret One', tahoma, verdana, arial;
		font-weight: 600;
		text-decoration: none;
		font-size: 30px;
		padding: 38px 10px 14px 8px;
		
		transition: all 0.7s; 
		-moz-transition: all 0.7s;  /* Firefox 4 */
		-webkit-transition: all 0.7s;  /* Safari and Chrome */
		-o-transition: all 0.7s;  /* Opera */
	}

	.navigation-oben ul li a:active,
	.navigation-oben ul li a:hover{
		color: #c1e3fc;
	}

	.navigation-oben ul li#aktiv a{
		color: #c1e3fc;
	}
		
	a.gewaehlt{
		color: #c1e3fc;
	}

	
	.footer{
		background: #c1e3fc;
	}
	

/* The Magic Float Center Code */

	.float_center {
		float: right;
		position: relative;
		left: -50%; /* or right 50% */
		text-align: left;
	}

	.float_center > .footmenue {
		position: relative;
		left: 50%;
	}

	ul.footmenue {
		list-style-type: none;
		margin:0;
	}

	ul.footmenue li {
		float: left;
		list-style-type: none;
	}

	ul.footmenue a {
		display: block;
		font-size: 16px;
		line-height: 16px;
		text-decoration: none;
		font-family: tahoma,verdana,arial;
		color: #021731;
		padding: 10px;
		transition: all 0.7s; 
		-moz-transition: all 0.7s;  /* Firefox 4 */
		-webkit-transition: all 0.7s;  /* Safari and Chrome */
		-o-transition: all 0.7s;  /* Opera */
	}


	ul.footmenue li a:active,
	ul.footmenue li a:hover{
		color: #0b7aaf;
	}

	ul.footmenue li#aktiv a{
		color: #0b7aaf;
	}

		
	
/* #Content Styles
================================================== */

	.text-klammer{
		font-size: 10px;
	}
	
	.eingerueckt{
		margin-left: 10px;
	}

	.kontakt{
		margin: 10px 0 15px 15px;
	}

	.infotext ul li{
		list-style-type: disc;
		list-style-position: outside;
		margin: 0 0 0 15px;
		}

	.video-wrapper iframe,
	.video-wrapper object,
	.video-wrapper embed {
   		 position: absolute;
   		 top: 0;
   		 left: 0;
   		 width: 100%;
   		 height: 100%;
	}
	
	.video-wrapper {
   		 position: relative;
   		 padding-bottom: 56.25%;
   		 padding-top: 15px;
		 margin-bottom: 0px;
   		 height: 0;
    	 overflow: hidden;
	}	

	.tabelle-setlist{
		width: 470px;
	}
	
	.tabelle-termine{
		width: 940px;
	}
	
	.zelle{
		padding: 2px 5px;
		
	}
	
	.normal10{
		width: 10%;
		text-align: left;
	}
	
	.normal14{
		width: 14%;
		text-align: left;
	}

	.normal20{
		width: 20%;
		text-align: left;
	}

	.normal55{
		width: 55%;
		text-align: left;
	}

	.normal50{
		width: 50%;
		color: #bcbcbc;
		text-align: right;
	}
	
	
	.promo-links{
		width: 50%;
		color: #ededed;
		text-align: right;
	}

	.promo-rechts{
		text-align: left;
	}

	.maildank{
		text-align: right;
	}


	.top-spacer200{
		margin-top:200px;
	}
	
		
	.top-spacer{
		margin-top:20px;
	}
	
	.top-spacer5{
		margin-top:5px;
	}
	
	.bottom-spacer{
		margin-bottom:10px;
	}
	
	.datensch ul{
		margin-left: 40px;
		margin-bottom: 0px;
	}

	.datensch ul li{
		list-style-type: disc;
		list-style-position: outside;
		font-size: 14px;
		margin: 0 0 0 0;
	}

		
	.ohne-unterstrich{
		text-decoration: none;
	}

	



/* #Media Queries
================================================== */


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

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


}

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

	.top-container{
		width: 748px;
		margin: 5px auto 2px auto;
	}

	.klammer{
		font-size: 40px;
	}
	
	.navigation-oben ul li a{
		font-size: 26px;
		padding: 26px 8px 10px 6px;
	}

	
	.titelbild{
		padding: 0px;
		background: transparent url("../img/leiste-748.jpg");
		height: 220px;
		margin-bottom: 0px;
		
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		}
		
	.tabelle-setlist{
		width: 374px;
	}
	
	.tabelle-termine{
		width: 748px;
	}

	h1{
		font-size: 56px;
		line-height: 54px;
		margin-bottom: 10px;
	}
	
	
	h2{
		font-size: 30px;
		line-height: 34px;
		margin-bottom: 10px;
	}

	
}


/* Tablet Portrait size to Tablet Landscape  (devices and browsers) */

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

		
	.top-container{
		width: 580px;
		margin: 5px auto 2px auto;
		
	}

	.klammer{
		font-size: 72px;
	}
	
	.titelbild{
		padding: 0px;
		background: transparent url("../img/leiste-580.jpg");
		height: 171px;
		margin-bottom: 10px;
		
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
	}
	
	.navigation-oben{
		width: 580px;
		margin-left: 5px;	
	}
	
	.navigation-oben ul li a{
		font-size: 26px;
		padding: 0px 18px 16px 18px;
	}
	
	.tabelle-setlist, .tabelle-termine{
		width: 580px;
	}
	
	
	h1{
		font-size: 98px;
		margin-bottom: 10px;
		text-align: center;
	}


	h2{
		font-size: 30px;
		line-height: 34px;
		margin-bottom: 10px;
		text-align: center;
	}
	

}

@media only screen and (min-width: 599px){
	
	
	.menu-trigger{
		display: none;
		visibility: hidden;
	}


	.navigation-unten{
		display: none;
		visibility: hidden;
	}
		
	
}


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

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

	
	.top-container{
		width: 460px;
		margin: 5px auto 2px auto;
	}
	
	.klammer{
		font-size: 54px;
	}
	
	.titelbild{
		padding: 0px;
		background: transparent url("../img/leiste-460.jpg");
		height: 301px;
		margin-bottom: 10px;
		
		-moz-border-radius: 0px;
		-webkit-border-radius: 0px;
		border-radius: 0px;
	}
		
	.tabelle-setlist, .tabelle-termine{
		width: 460px;
	}

	h1{
		font-size: 72px;
		line-height: 58px;
		margin-bottom: 10px;
		text-align: center;
	}
	
	h2{
		font-size: 28px;
		line-height: 32px;
		margin-bottom: 25px;
		text-align: center;
	}
		
}


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

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

	
	.top-container{
		width: 300px;
		margin: 5px auto 2px auto;
	}

	.klammer{
		font-size: 36px;
	}

	.titelbild{
		padding: 0px;
		background: transparent url("../img/leiste-300.jpg");
		height: 191px;
		margin-bottom: 0px;
		
		-moz-border-radius: 0px;
		-webkit-border-radius: 0px;
		border-radius: 0px;
	}
		
	.tabelle-setlist, .tabelle-termine{
		width: 300px;
	}

		
	h1{
		font-size: 48px;
		line-height: 48px;
		margin-bottom: 10px;
		text-align: center;
	}
	
	h2{
		font-size: 26px;
		line-height: 30px;
		margin-bottom: 25px;
		text-align: center;
	}
	
	
	input, label{
		margin-left: 2px;
	}
	

}

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

@media only screen and (min-width: 20px) and (max-width: 599px){

	.top-spacer200{
		margin-top:200px;
	}
	
	.eingerueckt{
		margin-left: 0px;
	}
	
	.logo-strich{
		display: none;
		visibility: hidden;
	}
	
	label, legend{
		font-size: 12px;
	}
		
	select{
		margin-bottom: 10px;
	}
	
	tr, td{
		display: grid;
	}
	
	.zelle{
		padding: 0px 5px;
		text-align:center;	
	}
	
	.normal10,
	.normal14,
	.normal20,
	.normal50,
	.normal55,
	.promo-links,
	.promo-rechts{
		width: 100%;
	
	}
	
	
	.abstand,
	.promo-rechts{
		margin-bottom: 10px;
	}
	
	
	.navigation-oben{
		display: none;
		visibility: hidden;
	}
		
	a.trigger{
		color: #ededed;
		font-family: 'Poiret One', tahoma, verdana, arial;
		text-decoration: none;
		font-size: 20px;
	}


	.menu-trigger{
		display: block;
		border: 1px solid #ededed;
		padding: 8px 4px 6px 10px;
		margin-bottom: 10px;
	}

	.navigation-unten{
		margin-bottom: 500px;
	}

	.navigation-unten ul li a{
		display: block;
		border: 1px solid #ededed;
		color: #ededed;
		font-family: 'Poiret One', tahoma, verdana, arial;
		text-decoration: none;
		font-size: 20px;
		line-height: 20px;
		padding: 7px 20px;
	}

	.navigation-unten ul li a:active,
	.navigation-unten ul li a:hover{
		color: #c1e3fc;
	}

	.navigation-unten ul li#aktiv a{
		color: #c1e3fc;
	}

		
	

}


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

	
	img.runde-ecke,
	fieldset,
	input[type="text"],
	input[type="password"],
	input[type="email"],
	textarea,
	select,
	.menu-trigger,
	.navigation-unten ul li a{
		-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
		border-radius: 2px;
	}
	
	.top-spacer{
		margin-top: 10px;
	}
	
	 .formular-spacer{
		margin-top: 10px;
	}
	
	#ausgeblendet{
		display: none;
		visibility: hidden;
	}

	.kontakt{
		text-align: center;
		margin: 10px 0 15px 0;
	}
	
	.maildank{
		text-align: center;
		margin: 20px 0;
	}


	.rechts{
		text-align: left;
	}
	
	.zentriert{
		text-align: center;
	}
	
	
}


/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/


/* poiret-one-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poiret One';
  font-style: normal;
  font-weight: 400;
  src: url('../font/poiret-one-v16-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}



}