@font-face {
font-family: 'Capture';             
src: url('FrancoisOne.ttf');
src: local('?'),
url('FrancoisOne.ttf') format('truetype'),
font-weight: normal;
font-style: normal;                
}        
@font-face {
font-family: 'Typewriter';             
src: url('Typewriter.ttf');         
src: local('?'),                              
url('Typewriter.ttf') format('truetype'),
font-weight: normal;
font-style: normal;
}     
.font1 {
    font-family: Capture, Verdana, Arial, sans-serif;
    font-weight:normal;
    text-transform:uppercase;
  font-size:1.0em; 
  vertical-align: top;
  color:#39424C; 
  line-height:1.0em;
}        
.font2 {
    font-family: Typewriter, Capture, Verdana, Arial, sans-serif;
    font-weight:normal;
  font-size:1.6em; 
  vertical-align: top;
  color:#39424C; 
  line-height:1.0em;            
    text-shadow: 1px 1px 0px #fefef9;
}            
.font3 {
    font-family: Capture, Verdana, Arial, sans-serif;
    font-weight:normal;   
    text-transform:uppercase;
  font-size:0.76em; 
  vertical-align: middle;
  color:#424234; 
  line-height:1.0em;              
    text-shadow: 1px 1px 1px #fcfcf5;
}                                        
.font4 {
    font-family: Trebuchet MS, Verdana, Arial, sans-serif;
    font-weight:bold;
  font-size:1.0em; 
  vertical-align: top;
  color:#39424C; 
  line-height:1.0em;       
}                                                      
.font5 {
    font-family: Trebuchet MS, Verdana, Arial, sans-serif;
    font-weight:normal;
  font-size:0.86em; 
  vertical-align: middle;
  color:#22292C; 
  line-height:1.2em;       
}
#ansicht{
    position:relative; 
    overflow:hidden;     
    border-radius: 5px;  
    padding:5px 8px 5px 8px; 
    z-index:10; 
    float:right;        
    background:#999;   
}                                  
#ansicht span{           
    color:#111;   
    font-family: Capture, Verdana, Arial, sans-serif;
    font-weight:normal;   
    text-transform:uppercase;
    font-size:0.76em; 
    vertical-align: middle;     
    float:left;            
}        
#ansicht div#k1 {      
    overflow:hidden; 
    border-radius: 5px;  
    margin: 0;
    padding: 2px 5px 2px 5px;
    background:#fff; 
    overflow:hidden; 
    float:left;                     
}     
#ansicht div#k1 span{
    color:#111;   
    font-family: Capture, Verdana, Arial, sans-serif;
    font-weight:normal;   
    text-transform:uppercase;
    font-size:0.82em; 
    vertical-align: middle;              
}            
#ansicht div#k2 {           
    border-radius: 5px;  
    margin: 0 0 0 10px;
    padding: 2px 5px 2px 5px;
    background:#333; 
    overflow:hidden; 
    float:left;             
}    
#ansicht div#k2 a{    
    color:#fff;   
    font-family: Capture, Verdana, Arial, sans-serif;
    font-weight:normal;   
    text-transform:uppercase;
    font-size:0.82em; 
    vertical-align: middle; 
  text-decoration:none;             
}                                
#ansicht div#k2 a:hover{
    color:#67d4fd;              
}   
#kopflinks{
    position:relative; 
    height:30px;          
    width:100%;
    overflow:hidden; 
    padding:0px; 
    z-index:10; 
    float:right;           
    margin: 11px 10px 0 0;   
}  
#facelink{
    position:relative; 
    height:30px;
    width:30px;
    overflow:hidden; 
    padding:0px; 
    z-index:10; 
    float:right;           
    margin: 0px 0px 0 0;   
    background-image: url(../../Grafik/fuilogos.png);
    background-repeat:no-repeat;       
    background-position: 0 0;   
}      
#facelink:hover{       
    background-position: 0 -30px;   
}    
#instalink{
    position:relative; 
    height:30px;
    width:30px;
    overflow:hidden; 
    padding:0px; 
    z-index:10; 
    float:right;           
    margin: 0px 0px 0 0;   
    background-image: url(../../Grafik/fuilogos.png);
    background-repeat:no-repeat;       
    background-position: -30px 0;   
}        
#instalink:hover{       
    background-position: -30px -30px;   
}   
#kopfdatum{
    position:relative; 
    overflow:hidden; 
    padding:0px; 
    z-index:10; 
    float:right;           
  margin: 7px 10px 0 0;   
}     
#kopfdatum span{               
  font-family: Capture, Trebuchet MS, Verdana, Arial, Tahoma, sans-serif;   
  font-size:1.2em;       
  color:#292C31; 
  line-height:1.0em;
}     
                 
#js {                   
  background-repeat:repeat-x; 
  background-attachment:fixed;
  background:#cfd;
  border: 1px solid #364;
  width:100%;
  height:20px;
  margin:0;
  padding:5px 0 0 0;
  top:0px;  
}                       
#js span{                  
    font-family: Trebuchet MS, Verdana, Arial, sans-serif;
    font-weight:normal;
  font-size:0.86em; 
  color:#368; 
  line-height:1.0em;   
}                      
#kopfkopf {                   
  background-image: url(../../Grafik/kopfkopf-hg.png);
  background-repeat:repeat-x; 
  background-attachment:fixed;
  width:100%;
  height:50px;
  margin:0;
  padding:0;
  top:-50px;  
}                     
#kopfkopf .inhalt { 
  position:relative;                  
  background-image: url(../../Grafik/kopfkopf.png);
  background-repeat:no-repeat; 
  width:1000px;
  height: 50px;
  margin:0 auto 0 auto;
  padding:0;
  top:0;            
}                   
.main {                   
  background-image: url(../../Grafik/hg-kunstrasen-3.png);
  background-repeat:repeat; 
  background-attachment:fixed;
  background-position: center top;   
  width:100%;
  margin:0;
  padding:0;
  top:0;  
}
#alles {
  width:1000px; 
  margin-top:10px; 
  margin-left:auto; 
  margin-right:auto; 
  padding:0px; 
  border:0px solid #aeb1b4; 
  -moz-border-radius:10px; 
  -khtml-border-radius:10px; 
  background-color:#fff;    
  
}
#kopf {
  width:1000px;
  height:104px; 
  margin:0;  
  padding:0;  
  background-image: url(../../Grafik/kopf-all.png);
  background-repeat:no-repeat;  
  float: left;           
    border:1px solid #9e9e96; 
    border-radius: 10px;  
    border:0;   
    border-left:1px solid #f6f6f2; 
    border-right:1px solid #a6a6a2; 
    border-bottom:1px solid #969692;  
    box-shadow: 0px -4px 6px #ddd;
}

  #kopf1 {      
    width:49%; 
    float:left;
    }     
  #kopf2 {      
    width:49%; 
    float:left;
    }  
#menue {
  width:1000px;
  margin:0;  
  padding:0; 
  background: #333;       
  float: left; 
}
#inhalt {
  width:1000px;
  margin:0;  
  padding:0; 
  border:0px solid #aeb1b4;
  float: left; 
}

#inhalt1 {
  width:70%;
  margin:10px 0 0 0;  
  padding:0; 
  border:0; 
  float: left; 
  overflow:hidden;
}

#inhalt2 {
  width:29%;
  margin:10px 0 0 1%;  
  padding:0; 
  border:0; 
  float: left;   
  overflow:hidden;
}

#fusstop {
  width:100%;
  height:13px;
  margin:0;  
  padding:0; 
  border:0px solid #333;
  background-image: url(../../Grafik/fusstop.png);   
  float: left; 
}
#fuss {
  width:100%;
  margin:0px 0 0 0;  
  padding:0; 
  border:0px solid #333;
  background: #111;   
  float: left; 
}

#fussinhalt {
  width:1000px;
  margin:0;  
  padding:0; 
  border:0px solid #eee;
  background: #111;   
  margin-left:auto; 
  margin-right:auto; 
}
.fussverbände {
  width:200px;
  height:32px;
  float:left;                   
  text-align:left;
}
.fussverbände a {
  font-family:Verdana, Arial, sans-serif; 
  font-weight:bold; 
  font-size:0.62em; 
  color:#666;
  line-height: 1.0em; 
  text-decoration:none;
}                
.fussverbände div {      
  margin:5px 0 0 20px;
  padding:15px 0 0 50px;  
  background-image: url(../../Grafik/fuss-verbände.jpg);
  background-repeat: no-repeat;
  height:40px; 
  width:200px;         
}    
.fussverbände div.dfb {
  background-position: 0 0; 
}    
.fussverbände div.dtb {
  background-position: 0 -40px; 
}                          
.fussverbände div.djb {
  background-position: 0 -80px; 
}     
.fussverbände a:hover { 
    color:#f7943d;   
}

.ergebnis1n {
  width:100%;
  left:0px;
  top:0px;
  overflow:hidden;
  padding:5px 0 5px 0;
  margin:2px 0 0 0;
  float:left;
  background:#e5e4e0;
} 
     
.boxn1 {
  width:46%;
  left:0px;
  top:0px;
  overflow:hidden;
  padding:5px;
  float:left;
  background:#e5e5e0;        
}       
  .boxn1fotos {            
  position:relative; 
  float:left;
    width:100%;     
    border-radius:0;         
    padding:0;
  margin:10px 0 0 0;
    background:#e5e5e0;
    border:0; 
    background-repeat:no-repeat; 
    background-position:right top;   
  }                     
  .fotoinhalt {            
    position:relative; 
    float:left; 
    width:70%; 
    overflow:hidden; 
    margin:15px 0 0 10px;   
  }            
  #vorstand {
    margin:5px 0 0 0; 
    padding:10px 5px 10px 10px;        
  }              
  #vorstand div{     
    margin:0 0 0 10px;        
  }              
  #info {
    margin:5px 0 0 3%; 
    padding:10px 5px 10px 10px;        
  }           
  #info div{           
    margin:0 0 0 10px;   
  }                   
.boxn1a {
  left:0px;
  top:0px;
  overflow:hidden;
  float:left;       
}
   
.boxn2 {
  border:1px solid #aaaaa6;    
  width:280px;
  left:0px;
  top:0px;
  overflow:hidden;
  padding:5px;
  float:left;
  background:#e5e5e0;           
    -moz-border-radius: 5px;
    border-radius: 5px;  
}

a.rlink {
    position:absolute;
    text-decoration: none; 
    
  background-image: url(../../Grafik/rlink.png); 
  background-position: 0 0; 
  border: 0px; 
  width: 200px; 
  height: 150px; 
  cursor: pointer; 
}
a.rlink:hover {
    background-position: 0 -150px;
} 
.aktuellrechtsOFF {             
  font-family:Verdana, Arial, sans-serif; 
  font-weight:bold; 
  font-size:0.72em;               
  color:#2F383E;      
  line-height: 1.2em;    
  vertical-align:middle ;
}          
.aktuellrechts {             
  font-family:Verdana, Arial, sans-serif; 
  font-weight:bold;   
  font-size:1.2em;              
  line-height: 1.2em;   
  text-decoration:none;              
  color:#003060;      
  vertical-align:middle ;                      
}            
span.aktuellrechtsK {             
  font-family:Verdana, Arial, sans-serif; 
  font-weight:bold;   
  font-size:1.2em;              
  line-height: 1.2em;   
  text-decoration:none;              
  color:#003060;      
  vertical-align:middle ;            
}              
span.aktuellrechts {             
  font-family:Verdana, Arial, sans-serif; 
  font-weight:bold; 
  font-size:0.72em;       
  line-height: 1.2em;                 
    text-shadow: 1px 1px 1px #BEC5D8; 
  text-decoration:none;              
  color:#003060;      
  vertical-align:middle ; 
}              
a.aktuellrechts {             
  font-family:Verdana, Arial, sans-serif; 
  font-weight:bold; 
  font-size:0.72em;       
  line-height: 1.2em;       
  text-decoration:none;              
  color:#2F383E;      
  vertical-align:middle ;
}                         
a.aktuellrechts:hover {
    color:#3794fd;   
}   
.aktuellrechtsNR {
  font-family:Verdana, Arial, sans-serif; 
  font-weight:normal; 
  font-size:0.72em; 
    color:#2F383E;
  line-height: 1.0em;     
  vertical-align:middle ;
}    
.nachoben div {
  display:none;     
  background-image: url(../../Grafik/nachoben.png);
  background-position: 0 0;         
  background-repeat:no-repeat; 
  text-decoration:none;     
  position:relative; 
  top:-15px; 
  overflow:hidden; 
  width:60px; 
  height:30px; 
  padding:0px;
  cursor:pointer; 
}       
a.nachlinks div {
  width:35px; 
  height:30px;  
  padding:10px 0 0 0; 
}             
a.nachlinks div {
  background-image: url(../../Grafik/nachlinks.png);
  background-position: 0 0;         
  background-repeat:no-repeat; 
  text-decoration:none;     
  position:relative;
  margin:0;
  overflow:hidden; 
}       
a.nachlinks:hover div  {     
  background-position: -60px 0;  
}        
a.nachuebersicht-x div {
  width:35px; 
  height:30px;  
  padding:10px 0 0 0; 
}             
a.nachuebersicht-x div {
  background-image: url(../../Grafik/nachuebersicht.png);
  background-position: 0 0;         
  background-repeat:no-repeat; 
  text-decoration:none;     
  position:relative;
  margin:0;
  overflow:hidden; 
  z-index:50
}       
a.nachuebersicht-x:hover div  {     
  background-position: -60px 0;  
}



.textlink1 div{              
  margin: 5px;         
  border:0px solid #aaaaa6;                                       
  position:relative;
  float:left;         
  padding: 5px 7px 4px 7px;            
    background: #d8d8d4;                
  background-position: 0 center;         
  background-repeat:no-repeat;               
    -moz-border-radius: 5px;
    border-radius: 5px;                      
  -moz-box-shadow:    1px 1px 0px 0px #fff, -1px -1px 0px 0px #666;
  -webkit-box-shadow: 1px 1px 0px 0px #fff, -1px -1px 0px 0px #666;
  box-shadow:         1px 1px 0px 0px #fff, -1px -1px 0px 0px #666; 
}     
.textlink1 a {           
    font-family: Trebuchet MS, Verdana, Arial, sans-serif;
    font-weight:bold;
  font-size:1.0em;                          
    text-transform:uppercase;
  vertical-align:middle ;
  text-decoration: none;
  color:#39424C; 
  line-height:1.2em;  
}       
.textlink1 a:hover {
    color:#2784ed;       
}         
.textlink1 div:hover {                                               
  background: #efefe8;             
  background-position: 0 center;     
  background-repeat:no-repeat;  
  -moz-box-shadow:    1px 1px 0px 0px #fff, -1px -1px 0px 0px #999;
  -webkit-box-shadow: 1px 1px 0px 0px #fff, -1px -1px 0px 0px #999;
  box-shadow:         1px 1px 0px 0px #fff, -1px -1px 0px 0px #999; 
}   

.pdflink div{                   
  margin: 5px;         
  border:0px solid #aaaaa6;         
  background-image: url(../../Grafik/PDF.png);       
  background-position: 0 center; 
  background-repeat:no-repeat;                                           
  position:relative;
  float:left;         
  padding: 5px 7px 4px 7px;             
  background-position: 0 center;         
  background-repeat:no-repeat;               
    -moz-border-radius: 5px;
    border-radius: 5px;                      
  -moz-box-shadow:    1px 1px 0px 0px #fff, -1px -1px 0px 0px #666;
  -webkit-box-shadow: 1px 1px 0px 0px #fff, -1px -1px 0px 0px #666;
  box-shadow:         1px 1px 0px 0px #fff, -1px -1px 0px 0px #666; 
}     
.pdflink a {            
    font-family: Trebuchet MS, Verdana, Arial, sans-serif;
    font-weight:bold;
  font-size:1.0em;                          
    text-transform:uppercase;
  vertical-align:middle ;
  text-decoration: none;
  color:#39424C; 
  line-height:1.2em;  
}       
.pdflink a:hover {
    color:#2784ed;       
}                        
.pdflink a div {                
  padding:8px 8px 8px 35px;        
}    
.pdflink div:hover {                                               
  background: #efefe8;            
  background-image: url(../../Grafik/PDF.png);       
  background-position: 0 center; 
  background-repeat:no-repeat;        
  -moz-box-shadow:    1px 1px 0px 0px #fff, -1px -1px 0px 0px #999;
  -webkit-box-shadow: 1px 1px 0px 0px #fff, -1px -1px 0px 0px #999;
  box-shadow:         1px 1px 0px 0px #fff, -1px -1px 0px 0px #999; 
}    
.textlink1ext a {           
    font-family: Trebuchet MS, Verdana, Arial, sans-serif;
    font-weight:bold;
  font-size:1.0em;                          
    text-transform:uppercase;
  vertical-align:middle ;
  text-decoration: none;
  color:#39424C; 
  line-height:1.2em;  
}       
.textlink1ext a:hover {
    color:#CA7D1B;       
}

.textlink1ext div{              
  margin: 10px 0 0 0;         
  border:0px solid #aaaaa6;                                       
  position:relative;
  float:left;         
  padding: 5px;            
    background: #d8d8d4;                
  background-position: 0 center;         
  background-repeat:no-repeat;          
    -moz-border-radius: 5px;
    border-radius: 5px;                          
  -moz-box-shadow:    1px 1px 0px 0px #fff, -1px -1px 0px 0px #666;
  -webkit-box-shadow: 1px 1px 0px 0px #fff, -1px -1px 0px 0px #666;
  box-shadow:         1px 1px 0px 0px #fff, -1px -1px 0px 0px #666; 
}          
   
.textlink1ext div:hover {                                               
  background: #efefe8;             
  background-position: 0 center;     
  background-repeat:no-repeat;  
  -moz-box-shadow:    1px 1px 0px 0px #fff, -1px -1px 0px 0px #999;
  -webkit-box-shadow: 1px 1px 0px 0px #fff, -1px -1px 0px 0px #999;
  box-shadow:         1px 1px 0px 0px #fff, -1px -1px 0px 0px #999; 
} 

a.textlinkon div {    
  cursor:pointer;
  float:left;      
  color:#e6e2e4;
  padding:7px 9px 5px 9px;
  margin:5px 0 0 10px;
  border-radius: 5px;
  border: 0px solid #111;  
  background: #111;
  height: 18px;       
} 
div.textlinkoff {      
  cursor:default;
  padding:7px 9px 5px 9px;
  margin:5px 0 0 10px;
  border-radius: 5px;
  border: 0px solid #111;  
  background: #fff;
  height: 18px;
  float:left;             
}
a.textlinkon {       
    text-transform:uppercase;
  font-family: Capture, Verdana, Arial, sans-serif;
  font-weight:normal;   
  font-size:1.0em; 
  vertical-align: middle;
  line-height:1.0em;              
}   
a.textlinkon div:hover { 
  background: #27a6e8;   
}

div.textlinkoff span {         
    text-transform:uppercase;
  color:#333;
  font-family: Capture, Verdana, Arial, sans-serif;
  font-weight:normal;   
  font-size:1.0em; 
  vertical-align: middle;
  line-height:1.0em;              
}

.aktuellkopf {
  width:100%;
  left:0px;
  top:0px;
  overflow:hidden;
  padding:5px 0 5px 0;
  margin:0;
  float:left;               
  text-align:center; 
  background:#555a66;
}

div.aktuellkopf span {       
  font-family: Capture, Verdana, Arial, sans-serif;
  font-weight:normal;
  text-transform:uppercase;
  font-size:1.2em; 
  vertical-align: top;
  line-height:1.0em; 
  color:#fefefe;             
}          

.archivkopf {
  width:100%;
  left:0px;
  top:0px;
  overflow:hidden;
  padding:5px 0 5px 0;       
  margin:0;
  float:left;               
  text-align:center; 
  background-image: url(../../Grafik/Archiv-kopf-hg.png);
  background-position: 0 0;         
  background-repeat:no-repeat; 
}

div.archivkopf span {       
  font-family: Capture, Verdana, Arial, sans-serif;
  font-weight:normal;
  text-transform:uppercase;
  font-size:1.2em; 
  vertical-align: top;
  line-height:1.0em;
  color:#fefefe;             
}    
#myfoozameldung {     
  position: relative;
  width:100%;
  float:left;
  border:solid 1px #ccc;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background: #fff;
  overflow:hidden;
  margin:10px 0 5px 0px;
  background:#333; 
  border:0; 
  border-radius:10px; 
  -moz-border-radius:10px;     
}      
  #myfoozalinks {
  float:left; 
  position:relative;  
  background-repeat:no-repeat;  
  background-position:center center;  
  margin:5px 0 0px 0px; 
  width:22%; 
  height:150px; 
  border:0; 
  overflow:hidden;  
  display:block;     
}       
  #myfoozarechts1 {
  float:left; 
  position:relative; 
  margin:15px 0 2px 0px; 
  width:77%; 
  border:0; 
  overflow:hidden; 
}       
  #myfoozarechts2 { 
    position:relative;     
    overflow:hidden;  
    float:left; 
    width: 100%; 
    border:0; 
    margin:10px 0 2px 0;  
    border-radius:10px; 
    -moz-border-radius:10px; 
}            
    div.myfoozaweitereOB {  
    width:98%; 
    margin:5px 0px 0px 15px; 
    padding:5px;
  }   
             
  #sportplatz { 
    width:49%;  
    margin:10px 0 0 0; 
    padding:0px; 
  }   
  #sporthalle { 
    width:49%;  
    margin:10px 0 0 0; 
    padding:0px; 
  }   
  
  
  
 .block_ani1 {                              
      font-family: Capture, Verdana, Arial, sans-serif;
      font-weight:normal;   
      text-transform:uppercase;
      font-size:1.0em; 
      vertical-align: middle;
      color:#efefef; 
      line-height:1.0em;            
      letter-spacing: 0.08em;
  }
        
  
  .block_holder {
      background: #f6f6f6;
      -webkit-box-shadow:  0px 0px 3px 1px rgba(0, 0, 0, 0.15);
      box-shadow:  0px 0px 3px 1px rgba(0, 0, 0, 0.15);
      float: left;
      width:100%;
  }
  
  
  .hover_block {
      position: relative;
      overflow: hidden;
  }
  
  .hover_info {
      position: relative;
      overflow:hidden;
      width: 200%;
      top: 0;
      left: 0;
  }
  
  .hover_info h1 { opacity: 0; z-index: 6; position: absolute; font-size: 1.0em; padding: 7px 5px; background: rgba(255, 255, 255, 0.7); color: #333; position: absolute; top: 5px; left: -5%; transition: all 250ms linear; -webkit-transition: all 250ms linear; -moz-transition: all 250ms linear; }
  .hover_info p { opacity: 0; letter-spacing:0; font-family: Capture,Verdana,Trebuchet MS,arial,tahoma,helvetica,sans-serif; font-weight:normal; font-size: 0.86em; background: rgba(0, 0, 0, 0.8); color:  #DEDED6; position: absolute; bottom: 6%; right: 45%; width: 34%; padding: 3px 0 2px 15px; text-align: left; z-index:4; transition: all 300ms linear; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; }
  .hover_info a { opacity: 0; font-size: 1.2em; padding: 5px 7px; background: rgba(160, 160, 160, 0.7); color: #f7f7f7; position: absolute; bottom: 10%; right: -60%; text-decoration: none; transition: all 300ms linear; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; }
  .hover_info .pfeil { opacity: 0; z-index: 6; width:35px; height:35px; background: rgba(150, 150, 150, 0.9); background-repeat:no-repeat; background-position:center center; background-image:url(../../Grafik/Pfeil-transp.png); position: absolute;  bottom: 10%; right: 50%; border: 0px solid #899dac; border-radius: 5px; transition: all 300ms linear; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; }
  .hover_info .bild { }
  .hover_info:hover h1 { opacity: 1; left: 0; transition-delay: 250ms; -webkit-transition-delay: 250ms; -moz-transition-delay: 250ms; }
  .hover_info:hover p { opacity: 1; right: 50%; transition-delay: 300ms; -webkit-transition-delay: 300ms; -moz-transition-delay: 300ms; }
  .hover_info:hover a { opacity: 1; right: 55%; }
  .hover_info:hover .pfeil { opacity: 1; right: 55%;  }
  .hover_info a:hover { background: rgba(60, 160, 255, 1.0); color: #F7F7F7; }
  .hover_info .pfeil:hover {background: rgba(60, 160, 255, 1.0); background-repeat:no-repeat; background-position:center center; background-image:url(../../Grafik/Pfeil-transp.png);  }

  .block_ani1 .hover_box { 
      background: rgba(0, 0, 0, 0.5); 
      width: 100%;
      height: 100%;
      position: absolute;
      left: -86%;  
      top: -19%;
      transition: all 200ms linear; 
      -webkit-transition: all 200ms linear; 
      -moz-transition: all 200ms linear;
      transform: rotate(90deg);
      -webkit-transform: rotate(90deg);
      z-index: 4;
      opacity: 0;
  }
  .block_ani1:hover .hover_box { top: 0; left: 0; transform: rotate(0deg); -webkit-transform: rotate(0deg); opacity: 1; }  
                      
 .block_ani1_jux {                              
      font-family: Capture, Verdana, Arial, sans-serif;
      font-weight:normal;   
      text-transform:uppercase;
      font-size:1.0em; 
      vertical-align: middle;
      color:#efefef; 
      line-height:1.0em;            
      letter-spacing: 0.08em;
  }
            
 .block_ani2_jux {                              
      font-family: Capture, Verdana, Arial, sans-serif;
      font-weight:normal;   
      text-transform:uppercase;
      font-size:1.0em; 
      vertical-align: middle;
      color:#efefef; 
      line-height:1.0em;            
      letter-spacing: 0.08em;
  }
  
  .block_holder_jux {
      background: #f6f6f6;
      -webkit-box-shadow:  0px 0px 3px 1px rgba(0, 0, 0, 0.15);
      box-shadow:  0px 0px 3px 1px rgba(0, 0, 0, 0.15);
      float: left;
      width:100%;
  }
   
  .hover_block_jux {
      position: relative;
      overflow: hidden;
  }
  
  .hover_info_jux {
      position: relative;
      overflow:hidden;
      width: 200%;
      height: 100%;
      top: 0;
      left: 0;                       
  }      
           
  .hover_info_jux h1 { opacity: 0; z-index: 6; position: absolute; font-size: 1.0em; padding: 7px 5px; background: rgba(255, 255, 255, 0.7); color: #333; position: absolute; top: 5px; left: 0; transition: left 200ms linear; -webkit-transition: left 200ms linear; -moz-transition: left 200ms linear; }
  .hover_info_jux p { letter-spacing:0; font-family: Capture,Verdana,Trebuchet MS,arial,tahoma,helvetica,sans-serif; font-weight:normal; font-size: 0.86em; background: rgba(0, 0, 0, 0.8); color:  #DEDED6; position: absolute; bottom: 6%; right: 0%; width: 34%; padding: 3px 0 2px 15px; text-align: left; z-index:4; transition: right 300ms linear; -webkit-transition: right 300ms linear; -moz-transition: right 300ms linear; }
  .hover_info_jux a { font-size: 1.2em; padding: 5px 7px; background: rgba(160, 160, 160, 0.7); color: #f7f7f7; position: absolute; bottom: 10%; right: 0%; text-decoration: none;}
  .hover_info_jux .pfeil {z-index: 6; width:35px; height:35px; background: rgba(150, 150, 150, 0.9); background-repeat:no-repeat; background-position:center center; background-image:url(../../Grafik/Pfeil-transp.png); position: absolute;  bottom: 10%; right: 0%; border: 0px solid #899dac; border-radius: 5px;}
  .hover_info_jux .bild { }
  .hover_info_jux:hover h1 { opacity: 1; left: 0; transition-delay: 250ms; -webkit-transition-delay: 250ms; -moz-transition-delay: 250ms; }
  .hover_info_jux:hover p { right: 50%; transition-delay: 600ms; -webkit-transition-delay: 600ms; -moz-transition-delay: 600ms; }
  .hover_info_jux:hover a { right: 55%; transition: right 500ms linear 300ms, color, background 200ms linear; -webkit-transition: right 500ms linear 300ms, color, background 200ms linear; -moz-transition: right 500ms linear 300ms, color, background 200ms linear; }
  .hover_info_jux:hover .pfeil { right: 55%; transition: right 200ms linear 700ms, color, background 200ms linear; -webkit-transition: right 200ms linear 500ms, color, background 200ms linear; -moz-transition: right 200ms linear 500ms, color, background 200ms linear; }
  .hover_info_jux a:hover { background: rgba(60, 160, 255, 1.0); color: #F7F7F7; }
  .hover_info_jux .pfeil:hover {background: rgba(60, 160, 255, 1.0); background-repeat:no-repeat; background-position:center center; background-image:url(../../Grafik/Pfeil-transp.png);  }

  .block_ani1_jux .hover_box_jux { 
      background-repeat:no-repeat; 
      background-position:center center; 
      background-image:url(../../Grafik/jux1.png); 
      opacity: 0.8;                                   
      width: 155px;
      height: 30px;
      position: absolute;
      left: -62px;  
      top: 100px;                                         
      transform: rotate(-90deg);
      -webkit-transform: rotate(-90deg);                      
      transition: all 600ms ease; 
      -webkit-transition: all 600ms ease; 
      -moz-transition: all 600ms ease;          
      
      z-index: 4;
  }
  .block_ani1_jux:hover .hover_box_jux { top: 125px; left: 5px; transform: rotate(0deg); -webkit-transform: rotate(0deg); }
        
  .block_ani2_jux { 
      background-repeat:no-repeat; 
      background-position:center center; 
      background-image:url(../../Grafik/jux2.png); 
      opacity: 0.8;   
      width: 120px;
      height: 50px;
      position: absolute;
      left: 205px;  
      top: 73px;                                         
      transform: rotate(-90deg);
      -webkit-transform: rotate(-90deg);                      
      transition: all 1000ms ease; 
      -webkit-transition: all 1000ms ease; 
      -moz-transition: all 1000ms ease;          
      
      z-index: 4;
  }
  .block_ani1_jux:hover .block_ani2_jux { top: 70px; left: 5px; transform: rotate(0deg); -webkit-transform: rotate(0deg); }
                
  .block_ani3_jux { 
      background-repeat:no-repeat; 
      background-position:center center; 
      background-image:url(../../Grafik/jux3.png); 
      opacity: 0.8;   
      width: 160px;
      height: 50px;
      position: absolute;
      left: 75px;  
      top: 38px;                                          
      transition: all 400ms ease; 
      -webkit-transition: all 400ms ease; 
      -moz-transition: all 400ms ease;          
      
      z-index: 4;
  }
  .block_ani1_jux:hover .block_ani3_jux { left: 130px; transform: rotate(0deg); -webkit-transform: rotate(0deg); }
                          
  .block_ani4_jux { 
      background-repeat:no-repeat; 
      background-position:center center; 
      background-image:url(../../Grafik/jux4.png); 
      opacity: 0.6;   
      width: 290px;
      height: 40px;
      position: absolute;
      left: 0px;  
      top: 0px;                                          
      transition: all 1200ms ease; 
      -webkit-transition: all 1200ms ease; 
      -moz-transition: all 1200ms ease;          
      
      z-index: 4;
  }
  .block_ani1_jux:hover .block_ani4_jux { opacity: 0.9; }
                                              
  .block_ani5_jux { 
      background-repeat:no-repeat; 
      background-position:center center; 
      background-image:url(../../Grafik/jux5.png); 
      opacity: 0.4;   
      width: 290px;
      height: 40px;
      position: absolute;
      left: 0px;  
      top: 155px;                                          
      transition: all 3000ms ease; 
      -webkit-transition: all 3000ms ease; 
      -moz-transition: all 3000ms ease;          
      
      z-index: 4;
  }
  .block_ani1_jux:hover .block_ani5_jux { opacity: 0.9; }
  
  
div.spfoto {        
  width:180px; 
  height:250px; 
  margin: 10px 10px 0 10px; 
  background-position: center top;                                 
  background-size: 100% auto;                   
      transition: all 200ms linear; 
      -webkit-transition: all 200ms linear; 
      -moz-transition: all 200ms linear; 
}
div.spfoto:hover{                         
        width:200px; 
        height:375px; 
        margin: 0 0 10px 0; 
        background-position: center -10px;      
        background-size: 132% auto;          
}