@viewport {

width: device-width;

zoom: 1;

}

body {
	padding:0;
	margin:0;
	font-family: Arial;
	font-size: 14px;
	color: #E67817;
	background-color: #000000;
	background-image: url(hopfenweltback.png); 
	background-repeat: no-repeat;
	background-position: top left;
}

a { text-decoration: none; outline: none; }
a:link { color: #FFF; }
a:visited { color: #FFF; }
a:hover { color: #FFF; text-decoration: underline; outline: none;}
h2 {font-size:24px; font-family: Arial;}

.hidepics {
  width:0;
  height:0;
  display:none;
}

#wrapper {
	padding:0;
	margin:0;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 1080px;
    height: 2020px; overflow:hidden;
	color: transparent;
	background-color: transparent; 
}

/* Animationsbereich Jugendschutz */

.animation18 {
  background: url('jugendschutz.png') 0 0; 
  position:absolute;
  top:400px;
  left:100px;
  width: 880px;
  height:1280px;
  -webkit-animation-name: animation18;
  -webkit-animation: animation18 1s ease-out ;  
}
@-webkit-keyframes animation18 {
	0% { transform: translate(-1920px,0px);  }		
}

.animation18text {
  position:absolute;
  font-family: Arial;
  font-size: 40px;
  color:#FFF;
  background-color:transparent;
  top: 900px;
  left: 170px;
  width: 250px;
  height:60px;
  text-align: center;
  border-radius: 24px 24px 24px 24px;
  border: 6px solid #FFF;
  color: #FFF;
  -webkit-animation-name: animation18text;
  -webkit-animation: animation18text 1s ease-out ;  
}
@-webkit-keyframes animation18text {
	0% { transform: translate(0px,-1300px);  }		
}

.animation18text2 {
  position:absolute;
  font-family: Arial;
  font-size: 40px;
  color:#FFF;
  background-color:transparent;
  top: 900px;
  left: 580px;
  width: 250px;
  height:60px;
  text-align: center;
  border-radius: 24px 24px 24px 24px;
  border: 6px solid #FFF;
  color: #FFF;
  -webkit-animation-name: animation18text2;
  -webkit-animation: animation18text2 1s ease-out ;  
}
@-webkit-keyframes animation18text2 {
	0% { transform: translate(0px,-1300px);  }		
}

.animation18text3 {
  position:absolute;
  font-family: Arial;
  font-size: 40px;
  color:#FFF;
  background-color:transparent;
  top: 1560px;
  left: 170px;
  width: 350px;
  height:60px;
  text-align: center;
  border-radius: 24px 24px 24px 24px;
  border: 6px solid #FFF;
  color: #FFF;
  -webkit-animation-name: animation18text2;
  -webkit-animation: animation18text2 1s ease-out ;  
}
@-webkit-keyframes animation18text2 {
	0% { transform: translate(0px,-1300px);  }		
}

.animation18text4 {
  position:absolute;
  font-family: Arial;
  font-size: 40px;
  color:#FFF;
  background-color:transparent;
  top: 1230px;
  left: 170px;
  width: 480px;
  height:60px;
  text-align: center;
  border-radius: 24px 24px 24px 24px;
  border: 6px solid #FFF;
  color: #FFF;
  -webkit-animation-name: animation18text2;
  -webkit-animation: animation18text2 1s ease-out ;  
}
@-webkit-keyframes animation18text2 {
	0% { transform: translate(0px,-1300px);  }		
}

 /* Button-Animationen */
 
 
.whatsappani
 {
  background: url('whatsapp.png') 0 0; 
  position:absolute;
  top:80px;
  left:90px;
  width: 209px;
  height: 81px;
  transition: 1s ease-in-out; 
}

.whatsappani:hover , .whatsappani:focus , .whatsappani:active  

{
  opacity: 0; 
}
   
.whatsappani2
 {
  background: url('whatsappactice.png') 0 0; 
  position:absolute;
  top:80px;
  left:90px;
  width: 209px;
  height: 81px;
}  
  
 
.facebookani
 {
  background: url('facebook.png') 0 0; 
  position:absolute;
  top:80px;
  left:777px;
  width: 209px;
  height: 81px;
  transition: 1s ease-in-out; 
}

.facebookani:hover , .facebookani:focus , .facebookani:active  

{
  opacity: 0; 
}
   
.facebookani2
 {
  background: url('facebookactice.png') 0 0; 
  position:absolute;
  top:80px;
  left:777px;
  width: 209px;
  height: 81px;
}     
   
.index18ani
 {
  background: url('index18.png') 0 0; 
  position:absolute;
  top:186px;
  left:114px;
  width: 209px;
  height: 81px;
  transition: 1s ease-in-out; 
}

.index18ani:hover , .index18ani:focus , .index18ani:active  
{
  opacity: 0; 
}

 .index18ani2
 {
  background: url('index18active.png') 0 0; 
  position:absolute;
  top:186px;
  left:114px;
  width: 209px;
  height: 81px;
} 
 
 .brauereiani
 {
  background: url('brauerei.png') 0 0; 
  position:absolute;
  top:186px;
  left:331px;
  width: 209px;
  height: 81px;
  transition: 1s ease-in-out;    
}
.brauereiani:hover , .brauereiani:focus , .brauereiani:active   
{
  opacity: 0;
}
 .brauereiani2
 {
  background: url('brauereiactive.png') 0 0; 
  position:absolute;
  top:186px;
  left:331px;
  width: 209px;
  height: 81px;
}  

.biereani
 {
  background: url('biere.png') 0 0; 
  position:absolute;
  top:186px;
  left:543px;
  width: 209px;
  height: 81px;
  transition: 1s ease-in-out;    
}
.biereani:hover , .biereani:focus, .biereani:active   
{
  opacity: 0;
}
.biereani2
 {
  background: url('biereactive.png') 0 0; 
  position:absolute;
  top:186px;
  left:543px;
  width: 209px;
  height: 81px;
}  

.tastingsani
 {
  background: url('tastings.png') 0 0; 
  position:absolute;
  top:186px;
  left:757px;
  width: 209px;
  height: 81px;
  transition: 1s ease-in-out;    
}
.tastingsani:hover, .tastingsani:focus, .tastingsani:active      
{
  opacity: 0;
}
.tastingsani2
 {
  background: url('tastingsactive.png') 0 0; 
  position:absolute;
  top:186px;
  left:757px;
  width: 209px;
  height: 81px;
} 

.vorschauani
 {
  background: url('vorschau.png') 0 0; 
  position:absolute;
  top:290px;
  left:114px;
  width: 209px;
  height: 81px;
  transition: 1s ease-in-out;    
}
.vorschauani:hover, .vorschauani:focus, .vorschauani:active    
{
  opacity: 0;
}
.vorschauani2
 {
  background: url('vorschauactive.png') 0 0; 
  position:absolute;
  top:290px;
  left:114px;
  width: 209px;
  height: 81px;
} 

.hobbybrauerani
 {
  background: url('hobbybrauer.png') 0 0; 
  position:absolute;
  top:290px;
  left:331px;
  width: 209px;
  height: 81px;
  transition: 1s ease-in-out;    
}
.hobbybrauerani:hover, .hobbybrauerani:focus, .hobbybrauerani:active    
{
  opacity: 0;
}
.hobbybrauerani2
 {
  background: url('hobbybraueractive.png') 0 0; 
  position:absolute;
  top:290px;
  left:331px;
  width: 209px;
  height: 81px;
}  

.linksani
 {
  background: url('links.png') 0 0; 
  position:absolute;
  top:290px;
  left:543px;
  width: 209px;
  height: 81px;
  transition: 1s ease-in-out;    
}
.linksani:hover, .linksani:focus, .linksani:active    
{
  opacity: 0;
}
.linksani2
 {
  background: url('linksactive.png') 0 0; 
  position:absolute;
  top:290px;
  left:543px;
  width: 209px;
  height: 81px;
}  

.impressumani
 {
  background: url('impressum.png') 0 0; 
  position:absolute;
  top:290px;
  left:757px;
  width: 209px;
  height: 81px;
  transition: 1s ease-in-out;    
}
.impressumani:hover, .impressumani:focus, .impressumani:active    
{
  opacity: 0;
}
.impressumani2
 {
  background: url('impressumactive.png') 0 0; 
  position:absolute;
  top:290px;
  left:757px;
  width: 209px;
  height: 81px;
}  

 /* Seiteninhalte */

.hometext {
  position:absolute;
  top:440px;
  left:114px;
  width: 838px;
  height:1308px;
  border: none;
  -webkit-animation-name: hometext;
  -webkit-animation: hometext 1s ease-out ;  
}
@-webkit-keyframes hometext {
	10% { transform: translate(-1000px);  }		
}

.hometextdatenschutz {
  position:absolute;
  padding:0;
  margin:0;
  font-family: Arial;
  font-size: 40px;
  color: #FFF;
  background-color: #000000;
  background-repeat: no-repeat;
  background-position: top left;   
  top:440px;
  left:114px;
  width: 838px;
  height:1308px;
  border: none;
  -webkit-animation-name: hometextdatenschutz;
  -webkit-animation: hometextdatenschutz 1s ease-out ;  
}
@-webkit-keyframes hometextdatenschutz {
	10% { transform: translate(-1000px);  }		
}


.hometextbrauerei {
  position:absolute;
  top:440px;
  left:114px;
  width: 838px;
  height:1308px;
  border: none;
  -webkit-animation-name: hometextbrauerei;
  -webkit-animation: hometextbrauerei 1s ease-out ;  
}
@-webkit-keyframes hometextbrauerei {
	0% { transform: translate(-1000px);  }		
}

.hometextbiere {
  position:absolute;
  top:440px;
  left:114px;
  width: 838px;
  height:1308px;
  border: none;
  -webkit-animation-name: hometextbiere;
  -webkit-animation: hometextbiere 1s ease-out ;  
}
@-webkit-keyframes hometextbiere {
	0% { transform: translate(-1000px);  }		
}

.hometexttastings {
  position:absolute;
  top:440px;
  left:114px;
  width: 838px;
  height:1308px;
  border: none;
  -webkit-animation-name: hometexttastings;
  -webkit-animation: hometexttastings 1s ease-out ;  
}
@-webkit-keyframes hometexttastings {
	0% { transform: translate(-1000px);  }		
}

.hometexthobbybrauer {
  position:absolute;
  top:440px;
  left:114px;
  width: 838px;
  height:1308px;
  border: none;
  -webkit-animation-name: hometexthobbybrauer;
  -webkit-animation: hometexthobbybrauer 1s ease-out ;  
}
@-webkit-keyframes hometexthobbybrauer {
	0% { transform: translate(-1000px);  }		
}

.hometextlinks {
  padding:0;
  margin:0;  
  position:absolute;
  top:440px;
  left:114px;
  width: 838px;
  height:2000px;
  font-family: Arial;
  font-size: 30px;
  color:#FFF;
  background-color:transparent;
  border: none;
  -webkit-animation-name: hometextlinks;
  -webkit-animation: hometextlinks 1s ease-out ;  
}
@-webkit-keyframes hometextlinks {
	0% { transform: translate(-1000px);  }		
}

.hometextimpressum {
  position:absolute;
  top:440px;
  left:114px;
  width: 838px;
  height:1308px;
  border: none;
  -webkit-animation-name: hometextimpressum;
  -webkit-animation: hometextimpressum 1s ease-out ;  
}
@-webkit-keyframes hometextimpressum {
	0% { transform: translate(-1000px);  }		
}