.head{
    width: 90%;
    min-width: 650px;
    margin-top: 0px;
    spacing: 0px;
    padding: 0px;
     z-index: 2;
     position: fixed;
     top: 50px;
     left: 5%;
     height: 60px;
     background-color: rgba(255, 255, 255, 0.8); /*mit blur transparenz = 0.5*/
     border-radius: 25px; 
}
    
.headDark{
    width: 60px;
    margin-top: 0px;
    spacing: 0px;
    padding: 0px;
     z-index: 2;
     position: fixed;
     top: 250px;
     left: 5%;
     height: 60px;
     background-color: rgba(0, 0, 0, 0.8); /*mit blur transparenz = 0.5*/
     border-radius: 15px;
     border: 3px gray solid;
}
 
.headBlur{
    width: 89.6%;
    margin-top: 0px;
    spacing: 0px;
    padding: 0px;
     z-index: 1;
     position: fixed;
     top: 52.5px;
     left: 5.2%;
     height: 55px;
     background-color: rgba(255, 255, 255, 0.75);
     border-radius: 20;
     filter: blur(5px);
}

.menuBox{
    z-index: 3;
    position: absolute;
    text-align: center;
    font-family:century gothic;
    font-size:20pt;
    color: rgba(25, 25, 25, 1);
    background-color: rgba(255, 255, 255, 0);
    border-left: solid 1px;
    border-right: solid 1px;
    border-color: rgba(25, 25, 25, 0.25);
    width: 21%;
    min-width: 170px;
    top: 0px;
    height: 100%;
    padding-top:1%;
}
       
.menuBox:hover{
    /* color: rgba(25, 25, 25, 1);
    color: rgba(125, 125, 125, 1);
    background-image: linear-gradient(rgba(220, 220, 220, 0.9),rgba(255, 255, 255, 0.9));*/
    color: rgba(250, 250, 250, 1);
    background-image: linear-gradient(rgba(0, 66, 120, 0.9),rgba(0, 108, 168, 0.7));
    border-left: solid 1px;
    border-right: solid 1px;
    border-color: rgba(25, 25, 25, 0.5);
}

.subMenue .subMenueBox{
    display: none;
    position: relative;
    top: 0px;
    left:0;
    z-index: 4;
}

.subMenue:hover .subMenueBox {
    display: block;
}

.subMenueBox{
    background-color: rgba(255, 255, 255, 1);
    width: 100%;
    min-width: 200px;
    height: 100%;
    border-left: solid 1px;
    border-right: solid 1px;
    border-color: rgba(25, 25, 25, 0.5);
    border-radius: 20px;
    padding 10px;
}

.logo{
    bottom: 0px;
     background-color: rgba(0, 0, 0, 0);   
     filter: brightness(100%) grayscale(0%);
}

.logoMtze{      
    position: fixed;
    width: auto;
    top: 25px;
    left: 7%;
    /*margin-left: 1.5%;*/
    margin-top: 2.5px;
    height: 50px;
}

.logoMail{
    position: fixed;
    width: auto;
    top: 25px;
    left: 87%;
    /*margin-left: 42%;*/
    margin-top: 6px;
    height: 40.5px;
}
  
.logo:hover{
    filter: brightness(120%) grayscale(95%);
}

/*-------responsive mobile -------*/

.mobileMenueButton{
    display: none;
    top: 50px;
    left: 5%;
    z-index: 2;
    position: fixed;
    filter: brightness(100%) grayscale(0%);
    /*spacing: 0px;
    padding: 0px;
    margin-top: 0px;
     height: 60px;
     background-color: rgba(255, 255, 255, 0.8); /*mit blur transparenz = 0.5/
     border-radius: 15px;
     border: 3px gray solid;*/
}

.mobileMenueButton img{
    width: 100px;
    height: 100px;
}

.mobileMenueButton:hover img{
    filter: brightness(120%) grayscale(95%);
}

#mobileMenue{
    position: fixed;
    z-index: 3;
    display: none;
    width: 100%;
    height:100%;
    background-color: rgba( 255, 255, 255, 0.3);
	backdrop-filter: blur(0.5em);*/
}

.mobileMenueBox{
    position: relative;
    text-align: center;
    font-family:century gothic;
    font-size:20pt;
    color: rgba(25, 25, 25, 1);
    background-color: rgba(255, 255, 255, 0.5);
    border-top: solid 1px;
    border-bottom: solid 1px;
    border-color: rgba(25, 25, 25, 0.25);
    width: 100%;
    height: 15%;
    padding-top:5%;
}

.mobileMenueBox:hover{
color: rgba(250, 250, 250, 1);
    background-image: linear-gradient(rgba(0, 66, 120, 0.9),rgba(0, 108, 168, 0.7));
    border-top: solid 1px;
    border-bottom: solid 1px;
    border-color: rgba(25, 25, 25, 0.5);
    height:15%;
}
.mobileMenueCloseButton img{
    position: relative;
    height: 100px;
    width: 100px;
    right: 10%;
    left: 85%;
    margin: 5px;
}

.mobileMenueCloseButton img:hover{
    filter:grayscale(90%);
}

@media (max-width: 1200px) {
    .head {
      display: none;
    }
    .headBlur {
    display: none;
    }

    .mobileMenueButton{
        display: block;
    }
}