@media all and (max-width: 1000px) {

 body {
   width:100%;      
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color:#d7b56d;
       	background-color: black;	
}

   #stapel { 
      position:fixed;
width: 980px;
 top:0px;
 }

 #stapel img {
 	left:0;
	top:0px;
 position: absolute; 
 z-index: -5;
width: 980px;
 opacity: 1;
 }

   
   
#navstreifen {
position: relative;
z-index: 100;
top:0px;
width: 980px;
height: 39px;
background: linear-gradient(to bottom, #45484D 0%, #000 77%) repeat scroll 0% 0% transparent;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.75);
text-align: center;
}   
   
#inhalt {
width:980px;
margin:auto;	

}   
   
   
   





nav{
width: 960px;
  padding: 5px 0px;
 list-style-type: none;           
text-align: center;             
    margin: auto;       
}


nav li { display:inline;font-size:16px;}

nav li:last-child a {    border-right: 1px solid #999; padding-right:58px;}
     
nav li a {
    display: inline;
    padding: 9px 58px 9px 58px;
    border-left: 1px solid #999;   
    color: #D7B56D;
    text-decoration: none;
} 
#headgrafik {
	b--ackground-color: white;
	background-repeat: no-repeat;
	margin-top: 20px;  
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.75) 20%, rgba(255,255,255,0.75) 80%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(20%,rgba(255,255,255,0.75)), color-stop(80%,rgba(255,255,255,0.75)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.75) 20%,rgba(255,255,255,0.75) 80%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.75) 20%,rgba(255,255,255,0.75) 80%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.75) 20%,rgba(255,255,255,0.75) 80%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0.75) 20%,rgba(255,255,255,0.75) 80%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-8 */
	}


.schatten3{
-webkit-box-shadow: 3px 3px 10px black;
-moz-box-shadow: 3px 3px 10px black;
box-shadow: 3px 3px 10px black;
}


h1 { 
    opacity: 1;
	color:#d7b56d;
	text-align: center;
  margin-top: 22px;
	m-argin-left: 250px;
        text-shadow: 3px 3px 3px #000;
       /* Versatz links - Versatz oben - Unschärfe (Blur) - Farbe */
       padding-top:8px;
}

h2 {     opacity: 1;
	text-align: center;padding-bottom:8px;
 }
h3 {
	text-align: center;

	}




.textblock1{
background-color: rgb(255,255,255);
background-color: rgba(255,255,255,.7);
background-color: transparent9;
filter:progid:DXImageTransform.Microsoft.gradient(
  startColorstr=#4CFFFFFF,endColorstr=#4CFFFFFF);
zoom:1;
margin-top: 75px;
margin-right:10px;
padding: 15px;
 float:right;	
 color:black;
-webkit-box-shadow: 3px 3px 10px black;
-moz-box-shadow: 3px 3px 10px black;
box-shadow: 3px 3px 10px black;
border-radius: 5px;
 }   

.textblock2{
background-color: rgb(255,255,255);
background-color: rgba(255,255,255,.7);
background-color: transparent9;
filter:progid:DXImageTransform.Microsoft.gradient(
  startColorstr=#4CFFFFFF,endColorstr=#4CFFFFFF);
zoom:1;
margin-top: 75px;
margin-right:10px;
padding: 15px;
clear:both;

 float:left;		
 color:black;
-webkit-box-shadow: 3px 3px 10px black;
-moz-box-shadow: 3px 3px 10px black;
box-shadow: 3px 3px 10px black;
border-radius: 5px;
 } 

.textblock3{
background-color: rgb(255,255,255);
background-color: rgba(255,255,255,.7);
background-color: transparent9;
filter:progid:DXImageTransform.Microsoft.gradient(
  startColorstr=#4CFFFFFF,endColorstr=#4CFFFFFF);
zoom:1;
margin-top: 75px;
margin-right:20px;
padding: 15px;
clear:both;

 float:right;	
 color:black;
-webkit-box-shadow: 3px 3px 10px black;
-moz-box-shadow: 3px 3px 10px black;
box-shadow: 3px 3px 10px black;
border-radius: 5px;
 } 



/*    Referenzseite                    */
.webbild{
background-image:url(../bilder/rainbow-inn-bild.jpg);
width:750px;
height:450px;
border-radius:5px;
margin-top: 20px;
margin-left:auto;
margin-right:auto;


}



.webdiv{
margin-top: 40px;
margin-left:auto;
margin-right:auto;
width:850px;
height:550px;
border-radius:5px;
background-color: rgb(255,255,255);
background-color: rgba(255,255,255,.7);
background-color: transparent9;
filter:progid:DXImageTransform.Microsoft.gradient(
  startColorstr=#4CFFFFFF,endColorstr=#4CFFFFFF);
zoom:1;
text-color:red;
text:size:22px;}

 @keyframes fadein { from {opacity:0;} to {opacity:1;}; }
@-webkit-keyframes fadein { from {opacity:0;} to {opacity:1;}; }
@-moz-keyframes fadein { from {opacity:0;} to {opacity:1;}; }
@-ms-keyframes fadein { from {opacity:0;} to {opacity:1;}; }
@-o-keyframes fadein { from {opacity:0;} to {opacity:1;}; }

#stapel img:nth-of-type(1) { animation: fade 30s ease-in-out infinite; 
                             -webkit-animation: fade 30s ease-in-out infinite;  
                             -moz-animation: fade 30s ease-in-out infinite; 
                             -ms-animation: fade 30s ease-in-out infinite; 
                              -o-animation: fade 30s ease-in-out infinite; }


#stapel img:nth-of-type(2) { animation: fade 30s 6s ease-in-out infinite;
                             -webkit-animation: fade 30s 6s ease-in-out infinite;  
                             -moz-animation: fade 30s 6s ease-in-out infinite; 
                             -ms-animation: fade 30s 6s ease-in-out infinite; 
                              -o-animation: fade 30s 6s ease-in-out infinite; }
#stapel img:nth-of-type(3) { animation: fade 30s 12s ease-in-out infinite;
                             -webkit-animation: fade 30s 12s ease-in-out infinite;  
                             -moz-animation: fade 30s 12s ease-in-out infinite; 
                             -ms-animation: fade 30s 12s ease-in-out infinite; 
                              -o-animation: fade 30s 12s ease-in-out infinite; } 
#stapel img:nth-of-type(4) { animation: fade 30s 18s ease-in-out infinite; 
                             -webkit-animation: fade 30s 18s ease-in-out infinite;  
                             -moz-animation: fade 30s 18s ease-in-out infinite; 
                             -ms-animation: fade 30s 18s ease-in-out infinite; 
                              -o-animation: fade 30s 18s ease-in-out infinite;} 
#stapel img:nth-of-type(5) { animation: fade 30s 24s 12s ease-in-out infinite;
                             -webkit-animation: fade 30s 24s ease-in-out infinite;  
                             -moz-animation: fade 30s 24s ease-in-out infinite; 
                             -ms-animation: fade 30s 24s ease-in-out infinite; 
                              -o-animation: fade 30s 24s ease-in-out infinite; } 



keyframes fade { 6.66%, 20% {opacity:1;} 0%, 26.66%, 100% {opacity:0;} }
@-moz-keyframes fade { 6.66%, 20% {opacity:1;} 0%, 26.66%, 100% {opacity:0;} }
@-webkit-keyframes fade { 6.66%, 20% {opacity:1;} 0%, 26.66%, 100% {opacity:0;} }
@-o-keyframes fade { 6.66%, 20% {opacity:1;} 0%, 26.66%, 100% {opacity:0;} }
@-ms-keyframes fade { 6.66%, 20% {opacity:1;} 0%, 26.66%, 100% {opacity:0;} }














}/*Klammer der Media Queries wird zugemacht! */