nav {
    position: relative;
    max-width: 100%;
    top: 0px;
    left: 0px;
    z-index: 10;
    padding: 0px;
    margin: 0px;
    background-color: #505050;
    text-align: center;
}

nav ul {
    padding: 0px;
    margin: 0px auto 0px auto;
    max-width: 1024px;
    text-align: left;
    
    /*margin-left: 270px;*/ /*left right overall positioner*/
    /*
    box-shadow: 4px 4px 10px rgba(0,0,0,0.4);
    -moz-box-shadow: 2px 2px 2px #dfdfdf;
    -webkit-box-shadow: 2px 2px 2px #dfdfdf;
    */
}

/* Menu left right Fill */
nav ul:after {
    clear: both;
    content: " ";
    display: block;
/*    font-size: 0px;*/
/*    height: 0px;*/
/*    visibility: hidden;*/
}

nav ul, nav ul li { background-color: #505050; } /*overall backgroundcolor*/

.MainMenu {
    list-style: none;
    float: left;
    /*border-right: 1px solid #202020; /*seperation line*/
}

.MainMenu a {
    text-decoration: none;
    display: block;
    padding: 10px 30px 10px 30px;
    
    transition: background 0.3s ease-out, padding 0.3s ease;
}

.MainMenu:hover a  { background-color: #808080; }

.MainMenu:hover > a { color: #FAFAFA; } /* hover font main menu */

/*.MainMenu:hover > ul { visibility: visible; }  sub menue blend in */
/*.MainMenu:hover > ul { display: block; }  sub menue blend in */

.MainMenu ul, .MainMenuSelected ul {
    display: none;
    position: absolute;
    padding:0px;
    margin:0px; /* very important for left right positioning otherwise offset in sub menu*/
    box-shadow: 4px 4px 10px rgba(0,0,0,0.4); /*shadow nur beim ausklapper*/
    -moz-box-shadow: 4px 4px 10px rgba(0,0,0,0.4);
    -webkit-box-shadow: 4px 4px 10px rgba(0,0,0,0.4);
}

.MainMenuSelected {
    list-style: none;
    float: left;
    background-color: #500000;
}

.MainMenuSelected ul li {
    background-color: #808080;
}

.MainMenuSelected a {
    text-decoration: none;
    display: block;
    padding: 10px 30px 10px 30px;
    
    transition: background 0.3s ease-out, padding 0.3s ease;
}


/*.MainMenuSelected:hover > ul { visibility: visible; }  sub menue blend in */
/*.MainMenuSelected:hover > ul { display: block; }  sub menue blend in */


.SubMenuItem {
    list-style: none;
	float: none;
    border-right: 0px solid #dfdfdf;
}

.SubMenuItem a { color: #FAFAFA; }

.SubMenuItem a:link{ color: #CCCCCC; } /*hover font*/

.SubMenuItem a:visited{	color: #CCCCCC; } /*hover font*/

.SubMenuItem a:active{ color: #CCCCCC; } /*hover font*/

.SubMenuItem a:hover{
	color: #FAFAFA;  /*hover font*/
	background-color: #6A6A6A; /*hover color sub menu block*/
}

#HamburgerMenu {
    position: absolute;
    right:9px;
    top:9px;
    display: none;
    z-index: 10;
    cursor: pointer;
}

@media only screen and (max-width: 800px) {
    nav ul {
         margin-left:0px;
    }
    
    .MainMenu a, .MainMenuSelected a {
    padding: 10px 20px 10px 20px;
    }
    
    .overallsitepositioner {
        margin-top: 116px;
    }
}

@media only screen and (max-width: 520px) {
    nav {
        display: none;
    }
    
    #HamburgerMenu {
        display: block;
    }
    
    nav ul {
         margin-right:0px;
         text-align: right;
    }
    
    .MainMenu {
        float: none;
        overflow: hidden;
    }
    
    .MainMenu ul, .MainMenuSelected ul {
        display: none;
        position: relative;
        right: 20px;
    }
    
    .MainMenuSelected {
        float: none;
        overflow: hidden;
    }
    
    .MainMenu a, .MainMenuSelected a {
    padding: 4px 20px 4px 0px;
    }
    
    .Logo {
        height: 40px;
        content: url(img/logo_felixdames_3d_nameblock_small_circle.png);
    }
        
    .TypoHeadline {
        display: none; 
    }
    
    .overallsitepositioner {
        margin-top: 40px;
    }
    
    .Header{
        background-size: 100% 40px;
        text-align: center;
    }
    
}

@media only screen and (max-height: 420px) and (min-width: 520px) {
    .Logo {
        height: 40px;
        content: url(img/logo_felixdames_3d_nameblock_small_circle.png);
    }
    
    .overallsitepositioner {
        margin-top: 76px;
    }
    
    .Header{
        background-size: 100% 40px;
    }
}