/*
body { color: #ddd; font-size: 12px;   font-family: "Trebuchet", "Arial", sans-serif ;   background-image:url(hintergrund3.jpg); background-attachment:fixed; background-position: left 0px ; font-stretch: condensed; font-size-adjust: inherit; background-color: #000;  }

*/
.main *, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
video {
    width: 100%;
     border:0px solid rgba(0,0,0,0);
}
/*
zoomt in die richtige Größe wenn ein smartphone in Landscape Mode gekippt wird
*/
@viewport{
    zoom: 1.0;
    width: extend-to-zoom;
}
body, input, textarea {

}

html, body { margin:0; border:0; padding:0; 
    font-size: 1em;
    color: #b8b8b9; font-size: 12px;
	font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
        font-weight: 100;
        letter-spacing: 2px;
    background-color: #000; }

.header-logo{
    padding:2rem;
    width:4rem;
    
    float:left;
    display:none;
}
.header-logo img{
    width: 5rem;
    heigth: 5rem;
}
.header-box{
    padding-left:0rem;
    padding-top: 2.2rem;
    margin-left: 0.2rem;
    width: 35rem;
    float:left
}
.header1{
    /*
    font-family: "Georgia", "Times New Roman", Times, serif;
    */
    font-size:28px; font-weight:100;
    /*
    font-size: 12px;
    font-weight: 100;
    letter-spacing: 1px;
     margin-left: 20px;
    */

    text-transform: uppercase;
    color:#ffffff;
    
}
.header2{
    font-size: 1.25rem;
    font-weight: 100;
    text-transform: uppercase;

    color:#6c6c6c;
}
.grid{
    display: inline-block;
    position:relative;
    float:left;
    padding:0.2rem;
    
}
.footer{
    position: relative;
    
    display: inline-block;
    width:100%;
     text-align: center ;
     padding-top: 40px;
     font-weight: 100;
}
.footer bold{
    font-weight: 200;
}

/*
.grid:hover:after {content:"halllo"; position:absolute; top:0; left:0; bottom:0; right:0; background-color: rgba(0,0,0,0.3);}
*/

th {
    text-align: left;
    vertical-align: top;
    
}
td {
    padding-top: 16px;
    padding-right: 8px;
    vertical-align: top;
}

a:link { color: #b8b8b9 ; text-decoration: none; }

a:visited { color: #b8b8b9 ; text-decoration: none;  }

a:hover { color: #b8b8b9 ; text-decoration: none; }

a:active { color: #b8b8b9 ; text-decoration: none; }


.grid .gridoverlay{
    position: absolute;
    top: 0;
    left: 0;
    bottom:0;
    right:0;
    text-align: center;
    padding-top:23%;
    z-index:200;
    
    font-size:1.5rem;
    display: block;
    color: rgba(0, 0, 0, .0);
    background: rgba(0, 0, 0, .0);
    transition: all 0.3s ease;
    
     
}
.first .gridoverlay{
    width:300%;    
}
.second .gridoverlay{
    width:300%;
    left: -100%;
}
.third .gridoverlay{
    width:300%;
    left: -200%;  
}

.grid:hover .gridoverlay{
    
     background: rgba(0, 0, 0, .6);
     color: #e9e9e9;
}


   


.main { margin: 0 auto;
  max-width: 110rem;
  width: 90%;
  
  
  }
.mtop { position:relative; width:100%; }
.menu { margin: 0.2 rem; margin-bottom:10px; width: 100%;float: right; position:relative; z-index:3;}
.menu_place { height:0px;  width:100%;margin-left:10px; 
} 

.mright { width: 100% ; float: left; position:relative;padding-top: 0px; display: inline-block;}

#menu-coller{position:fixed; display:none; width:300px; height:30px; background-color: #049; opacity:0.2; filter: alpha(opacity = 20);}

.menu-div {padding-left: 0 px; padding-right: 0 px;
           margin: 0 px; 
           font-size: 1.25rem;
           float:right;
           
          
}
.menu-ul-div{margin-top:0px; font-size:15px; padding: 5px;  padding-top:5px; padding-left:25px; display:none;}
.menu-div-lala { height:30px; font-size:24px; color:red;  -moofx-duration: 500ms;}




h1 {
    font-size:30px; font-weight:100; padding: 0px; margin-top: 0px;}
h2 {font-size:20px; font-weight:normal;}
.menu-m { width:840px; margin: 140px 0 0 auto; text-align:left;position:relative; color: #111; font-size: 14px; font-weight: normal; height:200px; }
.menu-link {
    float:right;
    margin:5px;
    margin-top:7px;
    margin-left: 0px;
    padding-left: 30px;
    padding-right: 0px;
    letter-spacing: 2px;


}

 @media only screen and (min-width:1024px){
        /* styles for browsers larger than 1440px; */
        .main{
            width:75%;
        }
        .header-box{
            
        }
        .grid{
            width:33.3333%;
        }
        .menu {
            margin-top:35px;
        }
    }
     @media only screen and (max-width:1024px){
        /* styles for browsers larger than 960px; */
        .main{
           width:90%;
       }
        .header-box{
            
        }
        .grid{
            width:50%;
        }
        .first .gridoverlay{
            width:200%; 
            left: 0px;

        }
        .second .gridoverlay{
            width:200%; 
            left: -100%;
        }
        .third .gridoverlay{
            width:200%;  
            left: -100%;
        }
        .grid.third{
            display:none;
        }
        .menu {
            margin-top:35px;
        }
    }
    @media only screen and (max-width:700px){
       /* styles for mobile browsers smaller than 480px; (iPhone) */
       .body{
           font-size: 0.5em;
       }
       
       .header1{
           font-size:1.7em;
           
        }
        .header2{
           font-size:1.2em;
           
        }
        .menu-link{
            font-size:0.8em;
            
        }
       .main{
           width:100%;
       }
       .header-logo{
           width: 2rem;
       }
       .menu-link{
            float:left;
            
            padding:0.1rem;
            margin-left: 1.5rem;
            
        }
        .menu-div{
            float:left;
           
        }
       .header-logo img{
            width: 4rem;
            heigth: 4rem;
        }
        .header-box{
            width: 24rem;
        }
        .grid{
            width:100%;
        }
        .grid.first{
            display:none;
        }
        .first .gridoverlay{
            width:100%; 
            left: 0px;

        }
        .second .gridoverlay{
            width:100%; 
            left: 0px;
        }
        .third .gridoverlay{
            width:100%;  
            left: 0px;
        }
        .menu {
            margin-top:10px;
            float:left;
        }

    }
    @media only screen and (max-width:479px){
       /* styles for mobile browsers smaller than 480px; (iPhone) */
       .body{
           font-size: 0.5em;
       }
       .header-logo{
          display:none;
       }
       .menu-link{
            float:left;
            
            padding:0.5rem;
            margin-left: 2.5rem;
            background-color: #333;
        }
        .menu-div{
            float:left;
            width:100%
        }
       
       .header1{
           font-size:1.7em;
           margin-left: 0.5rem;
           
        }
        .header2{
           font-size:1.2em;
           padding-left: 0.5rem;
           
        }
        .menu-link{
            font-size:0.8em;
            
        }
        
    }