html,
body  {
    width:100%;
    height:100%;
    overflow:  hidden;    
}


#HA_index_desktop  {
    display: inline;
    visibility: visible;
    }

#HA_index_mobile   {
    display: none;
    visibility: hidden;  
    }
    


.HA_index_background_img img {
    float: right;   
       width: 100%; 
     opacity: 1;
    }
 
 



/*
#content { position:absolute; 
           top:65%; 
           left:10%; 
           z-index:80; 
           overflow:auto; 
           font-family: Baskerville, "Times New Roman", miriam;
         }
 */
 
#HA_logo_index { position:absolute; 
                 z-index: 80;              
                 top:12%;
                 left:14%;
               }

#HA_logo_index img { width:30%;   
                   }
 


#HA_menu_index { position:absolute;
                 z-index:80;
                 top:25%;
                 left:6%;
                 
}
 
 
#HA_menu_index li {  margin:1.5em;
                     background:#ffffff;
                     opacity:0.3;
                     filter:alpha(opacity=70);
                     border-radius: .5em ;
                     border-top-left-radius: 3em ;
                     text-align:center;
                     line-height: 3em; 
                     font-size: 2em;
                     display: block;
 }
 
#HA_menu_index li:hover { opacity:0.7;
 
 }    
 
#HA_menu_index img {  width:25%;
                      padding-top: .8em; 
 
 }
 




#impressum { position:absolute;
             bottom:20px;
             left:85%;
             z-index:100;
             width:100%;
             line-height:45px}

#impressum div { height:45px;
                 background:#000;
                 opacity:0.6;
                 filter:alpha(opacity=50);
                 padding:3px 0 0 20px} 
                 
                 
#impressum a { text-decoration:none; }  

.smal {text-align:left;top:60px;right:90px;font-size:1em}
.medium {text-align:left;right:auto;left:180px;font-size:1.3em}
.large { text-align:left;
         right:auto;
         left:180px;
         font-size: 2em
       }
 
.text     { color:#000 }

#impressum a:link,      
#impressum a:visited { color:#FFF }

      
li a{display:block;text-decoration:none}     /* whole white button as link active   

a:link,      
a:visited { 
    color:#000;
    text-decoration: none; }

h1 { position:absolute;
     bottom:25px;
     left:35px;
     z-index:15;
     background:url(HA_LOGO_transparent.gif);
     text-indent:-999px
   }


    */






 /*        smal laptop             */

@media (max-width: 1350px) {

#HA_logo_index img { width:22%;
                   }

#HA_menu_index li { /* margin:1.5em;
                     background:#ffffff;
                     opacity:0.3;
                     filter:alpha(opacity=70);
                     border-radius: .5em ;
                     border-top-left-radius: 3em ;
                     text-align:center;   */
                     line-height: 2.4em;    
                     font-size: 1.5em;
                   /*  display: block;  */
                    }
                    
 #impressum { left:75%;
                /*  position:absolute;
                    bottom:20px;
                    z-index:100;
                    width:100%;
                    line-height:45px;   */
             }

 }





 /*        smal tablets like i-Pad    -    width 1024 x 768 px      */

@media (max-width: 1070px) {

#HA_logo_index img { width:17%;
                   }

.HA_index_background_img img {
       width: 115%;    
    }
                  
                    
#HA_menu_index li { /* margin:1.5em;
                     background:#ffffff;
                     opacity:0.3;
                     filter:alpha(opacity=70);
                     border-radius: .5em ;
                     border-top-left-radius: 3em ;
                     text-align:center;   */
                     line-height: 2.2em;    
                     font-size: 1.3em;
                   /*  display: block;  */
                    }
 
 }
 
 
 
 
 
 
/*        Smartphone             */

@media (max-width: 960px) {

    #HA_index_desktop  { 
        display: none;
        visibility: hidden; 
    }
    
    #HA_index_mobile { 
        display: inline;
        visibility: visible;  
    }
     
    
    body {
        overflow: auto;
    }
    
    .index_container { 
        position: relative;
    }
    
    .index_text { 
        position: absolute;
        top: 57%;
        left: 23%;
        font-size: 1.5em;
        color: #e6cccc;
    }
    
    img { 
        width: 100%;
        height: auto;
        opacity: 1;
    }
 
}