#Menu {

    position: fixed;
    top: 0;
    right: 0;
    
    width: 8vw;
    height: 100vh;
    background-color: #E1E1E1;
    display: block;
    float: right;
    
    text-align: center;
    padding: 0;
    margin: 0;
    
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
    
    z-index: 999;
   
}

#mobil {
    display: none;
}

#mobil2 {
    position: fixed;
    bottom: 0;
    right: 0;
    background-color:#C8C8C8; 
    height: 5vh;
    width: 8vw;
    padding: 0;
    font-size: 80%;
    
    display: -webkit-flex; /* Safari */
    -webkit-align-items: center; /* Safari 7.0+ */
    -webkit-justify-content: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

#imp{
        width: 100%;
        height: 100%;
        
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
#closeB{
    display: none;
}


#DropDown{
    background-image: url('../src/pic/icons/drop.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

#Top{
    height: 100%;
    
    display: -webkit-flex; /* Safari */
    -webkit-align-items: center; /* Safari 7.0+ */
    -webkit-justify-content: center;
    -webkit-flex-direction: column;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.li{
    width: 100%;
    height: 9vh;
    display: block;
    margin: 0;
    padding: 1.5vh 0;
    cursor: pointer;
    
    -webkit-transition: all 0.15s ease;
    -moz-transition: all 0.15s ease;
    transition: all 0.15s ease;
    
    box-shadow: 0 0 0 #C8C8C8;
}

.li:hover{
    color: #000000;
    background-color: #C8C8C8;
    
    box-shadow: -.25vw 0 0 #C8C8C8;
}

.li:active{
    color: #000000;
    background-color: #000000;
    box-shadow: none;
}

.pic{
    width: 100%;
    height: 70%;

    display: block;
    
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.txt{
    font-family: 'FontL' !important;
    font-size: 2vh;
    width: 100%;
    height: 30%;
    
    display: -webkit-flex; /* Safari */
    -webkit-align-items:flex-end ; /* Safari 7.0+ */
    -webkit-justify-content: center;
    display: flex;
    align-items:flex-end;
    justify-content: center;
}


#Bottom{
    position: fixed;
    top: 0;
    right: 0;
    background-color:#C8C8C8; 
    height: 5vh;
    width: 8vw;
    padding: 0;
    font-size: 120%;
    
    display: -webkit-flex; /* Safari */
    -webkit-align-items: center; /* Safari 7.0+ */
    -webkit-justify-content: center;
    display: none;
    align-items: center;
    justify-content: center;
}

.lgn{
    font-family: 'FontL' !important;
    display: block;
    width: 20%;
    height: auto;
    padding: 0 5%;
    border-left: solid .2vw #000000;
}


.lgn:nth-of-type(1){
    border: none;
}

@media only screen and (min-width: 150px) and (max-width: 720px) {
    
    #Menu {
        position: fixed;
        top: 0;
        left: 0;

        width: 100%;
        height: 10vh;
        float: none;
        clear: both;
        
        -webkit-transition: all 0.15s ease;
        -moz-transition: all 0.15s ease;
        transition: all 0.15s ease;
        
        overflow-y: hidden;
    }
    
    #Menu:hover, #Menu[active="true"]{
        height: 68vh;   
    }
    
    #Menu:hover #mobil, #Menu[active="true"] #mobil,
    #Menu:hover #Top, #Menu[active="true"] #Top,
    #Menu:hover #Bottom, #Menu[active="true"] #Bottom,
    #Menu:hover #mobil2, #Menu[active="true"] #mobil2 {
        -moz-transform: translateY(-10vh);
        -webkit-transform: translateY(-10vh);
        transform: translateY(-10vh);
    }

    #mobil {
        display: block;
        
        -webkit-transition: all 0.15s ease;
        -moz-transition: all 0.15s ease;
        transition: all 0.15s ease;
    }
    
    #label{
        display: block;
        width: 100%;
        height: 10vh;
        line-height: 10vh;
        
        font-family: 'FontL' !important;
        font-size: 10em; 
        text-transform: uppercase;
    }
    
    #DropDown{
        position: absolute;
        top: 2vh;
        right: 5vw;
        display: block;
        height: 6vh;
        width: 6vh;
    }
    
   
    #Top{
        height: 46vh;
        margin: 0;
        padding: 0;
        width: 100%;
        display: block;
        text-align: left;
        
        -webkit-transition: all 0.15s ease;
        -moz-transition: all 0.15s ease;
        transition: all 0.15s ease;
    }
    
    .li{
        width: 40%;
        height: 8vh;
        display: block;
        float: left;
        margin: 0;
        padding: 2vh 5%;
    }

    .li:hover{
        color: #000000;
        background-color: #555555;

        box-shadow: none;
    }

    .li:active{
        color: #000000;
        background-color: #000000;
        box-shadow: none;
    }

    .pic{
        width: 30%;
        height: 100%;

        display: block;

        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        
        float: left;
    }

    .txt{
        font-family: 'FontL';
        font-size: 5em;
        width: 60%;
        margin-left: 10%;
        height: 100%;
        float: right;
            display: -webkit-flex; /* Safari */
            -webkit-align-items:center; /* Safari 7.0+ */
            display: flex;
            align-items:center;
    }


    .lgn{
        display: block;
        width: 20%;
        height: auto;
        padding: 0 5%;
        border-left: solid .2vw #000000;
    }
    
    
        #Bottom{
        position: relative;
        height: 10vh;
        width: 50%;
        padding: 0 25%;
        margin: 0;
        font-size: 5em;

        display: -webkit-flex; /* Safari */
        -webkit-align-items: center; /* Safari 7.0+ */
        -webkit-justify-content: center;
        display: none;
        align-items: center;
        justify-content: center;
        
        -webkit-transition: all 0.15s ease;
        -moz-transition: all 0.15s ease;
        transition: all 0.15s ease;
    } 
    
    #mobil2{
        height: 10vh;
        width: 100%;
        padding: 0;
        margin: 0;
        font-size: 5em;
        
        background-color: #C8C8C8;
        
        display: block;
        
        -webkit-transition: all 0.15s ease;
        -moz-transition: all 0.15s ease;
        transition: all 0.15s ease;
        
        position: relative;
        
    }
    
    #imp{
        width: 100%;
        height: 100%;
        float: left;
        
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    #closeB{
        position: absolute;
        right: 5%;
        top: 15%;
        display: block;
        cursor: pointer;
        
        width: 30%;
        height: 70%;
        
        float: right;
        
        background-position:right;
        background-size: contain;
        background-repeat: no-repeat;
        background-image: url('../src/pic/funk/menu-close.svg');
        
    }
    

    

}