body {
    background-color: #FFF;
    background-attachment: fixed;
    background-image: url(../images/background_kl.png);
    font-family: 'Peralta', cursive;
    font-size: 22px;
	/*overflow: hidden;*/
	scrollbar-base-color:#FFAE00;
	scrollbar-3d-light-color:#FFC173;
	scrollbar-arrow-color:#FFAA40;
	scrollbar-darkshadow-color:#A65C00;
	scrollbar-face-color:#FF8E00;
	scrollbar-highlight-color:#FFC173;
	scrollbar-shadow-color:#A65C00;
	scrollbar-track-color:#FFC173;
}
header{
    padding-bottom: 40px;
	
}
.alt {
    display: none;
}
div.Balken { 
	background:
            url(../images/Balken_links.png) 0 0 no-repeat,
            url(../images/Balken_rechts.png) 100% no-repeat;
	height:40px;
	width:100%;
	/*position:absolute;
	top:0px;
	left:0px;*/
        margin: 0px;
}
img.Balken{
    position:absolute;
    padding: 0;
    margin: 0;
    top: 0;
    right: 0;
}

* html div.Balken{
    background-image: url(../images/Balken_rechts.png);
}
nav{
    display: block;
    float: left; 
    width:310px;
    /* position:absolute; */
    padding: 30px;
	/* border: solid #66a; */
	text-transform: uppercase;
}
nav p{
    color: #f4ba0a;
    background:url(../images/Button_1.png);
    background-repeat: no-repeat;
    width: 276px;
    height: 41px;
    margin: 60px 0 70px 0; 
    padding: 10px;
    text-align: center;
    vertical-align: middle;
	/*border:2px solid #66a; */

        }
nav li{
    color: #f4ba0a;
    width: 176px;
    /* list-style: none; */
    background: url(../images/Menu_Button.png);
    background-repeat: no-repeat;
    text-align: center;
    font-size: 20px;
    margin-bottom:   80px;
    padding: 2px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-box-shadow: 0 2px 3px hsla(0,0%,0%,1);
    -moz-box-shadow: 0 2px 3px hsla(0,0%,0%,1);
    box-shadow: 0 2px 3px hsla(0,0%,0%,1);
    -webkit-transition: rotate 0.9s;
    -khtml-transition: rotate 0.9s;
    -moz-transition: rotate 0.9s;
    -ms-transition: rotate 0.9s;
    -o-transition: rotate 0.9s;
    transition: rotate 0.9s;
}
nav a{
    color: #f4ba0a;
    text-decoration: none;
}

nav li#Home{
    -moz-transform: rotate(-13.0deg);
    -moz-transform-origin: top left;
    -webkit-transform: rotate(-13.0deg);
    -webkit-transform-origin: top left;
    -o-transform: rotate(-13.0deg);
    -o-transform-original: top left;
    transform: rotate(-13.0deg);
    transform-origin: top left;
    margin-left: -15px;
    -webkit-transition: transform 0.4s;
    -khtml-transition: transform 0.4s;
    -moz-transition: transform 0.4s;
    -ms-transition: transform 0.4s;
    -o-transition: transform 0.4s;
    transition: transform 0.4s;
}
nav li#Home:hover{
    -moz-transform: rotate(-1.0deg);
    -moz-transform-origin: top left;
    -webkit-transform: rotate(-1.0deg);
    -webkit-transform-origin: top left;
    -o-transform: rotate(-1.0deg);
    -o-transform-original: top left;
    transform: rotate(-1.0deg);
    transform-origin: top left;
}
nav li#Steckbrief{
    -moz-transform: rotate(4.0deg);
    -moz-transform-origin: top right;
    -webkit-transform: rotate(4.0deg);
    -webkit-transform-origin: top right;
    -o-transform: rotate(4.0deg);
    -o-transform-original: top right;
    transform: rotate(4.0deg);
    transform-origin: top right;
    -webkit-transition: transform 0.4s;
    -khtml-transition: transform 0.4s;
    -moz-transition: transform 0.4s;
    -ms-transition: transform 0.4s;
    -o-transition: transform 0.4s;
    transition: transform 0.4s;
}
nav li#Steckbrief:hover{
    -moz-transform: rotate(-10.0deg);
    -moz-transform-origin: top right;
    -webkit-transform: rotate(-10.0deg);
    -webkit-transform-origin: top right;
    -o-transform: rotate(-10.0deg);
    -o-transform-original: top right;
    transform: rotate(-10.0deg);
    transform-origin: top right;
}

nav li#Musik{
    -moz-transform: rotate(1.0deg);
    -moz-transform-origin: top right;
    -webkit-transform: rotate(1.0deg);
    -webkit-transform-origin: top right;
    -o-transform: rotate(1.0deg);
    -o-transform-original: top right;
    transform: rotate(1.0deg);
    transform-origin: top right;
    margin-left: -22px;
    -webkit-transition: transform 0.4s;
    -khtml-transition: transform 0.4s;
    -moz-transition: transform 0.4s;
    -ms-transition: transform 0.4s;
    -o-transition: transform 0.4s;
    transition: transform 0.4s;
}
nav li#Musik:hover{
    -moz-transform: rotate(-5.0deg);
    -moz-transform-origin: top right;
    -webkit-transform: rotate(-5.0deg);
    -webkit-transform-origin: top right;
    -o-transform: rotate(-5.0deg);
    -o-transform-original: top right;
    transform: rotate(-5.0deg);
    transform-origin: top right; 
}
nav li#Termine{
    -moz-transform: rotate(-14.0deg);
    -moz-transform-origin: top left;
    -webkit-transform: rotate(-14.0deg);
    -webkit-transform-origin: top left;
    -o-transform: rotate(-14.0deg);
    -o-transform-original: top left;
    transform: rotate(-14.0deg);
    transform-origin: top left;
    margin-left: 5px;
    -webkit-transition: transform 0.4s;
    -khtml-transition: transform 0.4s;
    -moz-transition: transform 0.4s;
    -ms-transition: transform 0.4s;
    -o-transition: transform 0.4s;
    transition: transform 0.4s;
}
nav li#Termine:hover{
    -moz-transform: rotate(.0deg);
    -moz-transform-origin: top left;
    -webkit-transform: rotate(.0deg);
    -webkit-transform-origin: top left;
    -o-transform: rotate(.0deg);
    -o-transform-original: top left;
    transform: rotate(.0deg);
    transform-origin: top left; 
}



nav li#Gbuch{
    -moz-transform: rotate(10.0deg);
    -moz-transform-origin: top right;
    -webkit-transform: rotate(10.0deg);
    -webkit-transform-origin: top right;
    -o-transform: rotate(10.0deg);
    -o-transform-origin: top right;
    transform: rotate(10.0deg);
    transform-origin: top right;
    margin-left: -8px;
    -webkit-transition: transform 0.4s;
    -khtml-transition: transform 0.4s;
    -moz-transition: transform 0.4s;
    -ms-transition: transform 0.4s;
    -o-transition: transform 0.4s;
    transition: transform 0.4s;
}
nav li#Gbuch:hover{
    -moz-transform: rotate(.0deg);
    -moz-transform-origin: top right;
    -webkit-transform: rotate(.0deg);
    -webkit-transform-origin: top right;
    -o-transform: rotate(.0deg);
    -o-transform-original: top right;
    transform: rotate(.0deg);
    transform-origin: top right; 
}


.seperate{
    clear: both; 
}
footer{
    clear: both;
}

#overview {
    position: relative;
 
}

/*article-test{
    	background-image: url(../images/plakat.png) ;
	background-repeat:no-repeat;
        position:absolute;
        float: right;
        width: 79%;
	overflow:hidden;
        border:  solid red; 
        border:2px solid #66a;
        text-align: center;
        color: #c0845b;
        font-size: 16px;
        -webkit-transition: opacity 0.9s;
        -khtml-transition: opacity 0.9s;
        -moz-transition: opacity 0.9s;
        -ms-transition: opacity 0.9s;
        -o-transition: opacity 0.9s;
        transition: opacity 0.9s;
}*/
article{
    background-image: url(../images/plakat_2.png) ;
	/* background-color: #033; */
	/*-moz-background-clip: border-box;*/
	-webkit-background-clip: border-box;
	background-clip: border-box;
	background-origin:border-box;
	background-repeat:no-repeat;
	/*float:right;*/
	width:900px;
	height:525px;
	padding:30px;
	top:100px;
	left:330px;
	position:absolute;
	z-index:3;
	overflow:auto;
        border: 50px solid hsla(0, 0%, 0%, 0.0);
        text-align: center;
        color: #c0845b;
        font-size: 16px;
        -webkit-transition: opacity 0.5s;
        -khtml-transition: opacity 0.5s;
        -moz-transition: opacity 0.5s;
        -ms-transition: opacity 0.5s;
        -o-transition: opacity 0.5s;
        transition: opacity 0.5s;
}

article img {
     margin-left: 0;
}
article p{
    font-size: 14px;
    margin-bottom: 0;
}

article h2 {
    font-size: 30px;
    margin: 0;
}
article h3{
    font-size: 24px;
    margin: 0;
}

article#home{
        opacity: 1;
}

article#Logo{
        opacity: 0;
}

article#Musik{
margin: auto;

}
p{
    margin-bottom: 0;
}

 h2 {
    font-size: 30px;
    margin: 0;
}
 h3{
    font-size: 24px;
    margin: 0;
}
/* #library {
	padding: 0;
	text-align: center;

} */
ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
#imageGallery li{
	display: inline-block;
        /*width: 200;
	margin: 30px;
	 padding:20px 30px 17px 30px;    */
        padding: 0;
}
#imageGallery img{
        margin: 0px;
        padding: 0px;
        -moz-box-shadow: 1px -1px 5px rgba(0, 0, 0, 0.9);
	-webkit-box-shadow: 1px -1px 5px rgba(0, 0, 0, 0.9);
	box-shadow: 1px -1px 5px rgba(0, 0, 0, 0.9);
}
#imageGallery a:hover img{
    -moz-box-shadow: 1px -1px 10px rgba( 0,0,0,1);
    -webkit-box-shadow: 1px -1px 10px rgba(0, 0, 0, 1);
    box-shadow: 1px -1px 10px rgba(0, 0, 0, 1);
        
}

#zoomGallery li[id] {
  overflow:hidden;
  position:absolute;
  width:0;
  height:0;
  left:0;
  top:0;
  opacity:0;
  background:rgba(0,0,0,.5);
}
#zoomGellery li[id]:target {
  width:100%;
  height:100%;
  opacity:1;
}

#library li[id]:target a {
	background-color: #FFF;
  	position:absolute;
  	top:40%;
  	left:50%;
  	margin:-200px 0 0 -300px;
  	border:25px solid #fff;
	text-decoration:none;	
        -webkit-animation:zoom 0.5s cubic-bezier(0,0,0,1);
	-moz-animation:zoom 0.5s cubic-bezier(0,0,0,1);  	
	-moz-box-shadow:0 0 74px 5px rgba(0, 0, 0, .8);
	-webkit-box-shadow:0 0 74px 5px rgba(0, 0, 0, .8);
	box-shadow:0 0 74px 5px rgba(0, 0, 0, .8);  
}
#library li[id]:target a img {
    border: 0;
}


#library li[id]:target a span {
	font-size: 75%;
	width:300px;
	display:block;
	padding:10px 0 0 0;
	color:#303030;
}

#library li[id] a:before{
    content: url("../images/ic-close.png");
    position: absolute;
    top: -33px;
    right: -33px;
    opacity: 0;
}
#library li[id] a:hover:before{
    opacity: 1;
}
@-webkit-keyframes zoom {
  0% { -webkit-transform:scale(0); }
  100% { -webkit-transform:scale(1); }
}
@-moz-keyframes zoom {
  0% { -moz-transform:scale(0); }
  100% { -moz-transform:scale(1); }
}
p.Bilder{
    padding-top: 20px;
}
      

@media screen and (min-width: 1280px) { 
	/* CSS Anweisungen */
	article{
    background-image: url(../images/plakat_2.png) ;
	background-clip: border-box;
	width:840px;
	}
}

@media screen and (min-width: 1100px) and (max-width: 1280px) { 
	/* CSS Anweisungen */
	article{
    background-image: url(../images/plakat_1.png) ;
	width:690px;
	}
	
}

@media screen and (max-width: 1100px) { 
	/* CSS Anweisungen */	
	article{
    	background-image: url(../images/plakat.png) ;
		width:524px;
		}	
}