#Content {
    height: 100vh;
    position: relative;
    overflow: hidden;
}


#kontakt {
    z-index: 22;
    position: absolute;
    top: 0;
    left: 0;
    
    display: block;
    width: 40%;
    height: 100%;
    background-color: #000000;
    
    padding: 0;
    margin: 0;
    
            
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;

    -moz-transform: translateX(-33vw);
    -webkit-transform: translateX(-33vw);
    transform: translateX(-33vw); 
}

#box{
    width: 90%;
    float: left;
    height: 100%;
    display: block;
    
    padding: 0;
    margin: 0;
}

.kbox {
    width: 40%;
    height: 28vh;
    padding: 2vh 30%;
    margin: 0;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}


.kbox:nth-of-type(2){
    margin-top: 2vh;
    margin-bottom: 2vh;
}


.kbox:hover{
    background-color: #000000;
}

.imgs {
    width: 50%;
    margin: 0 25%;
    height: auto;
}


.para {
    font-size: 1.25em;
    color: #fff;
    margin: 0;
    padding: 0;
    
}

#switch{
    display: block;
    width: 10%;
    float: right;
    height: 100%;
    background-color: #000000;
    margin: 0;
    padding: 0;
    
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('../src/pic/funk/kont-open.svg');
    
    cursor: pointer;
      
}

#butBack{
    width: 100%;
    height: 100%;
    
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
    
    -moz-transtition-delay: 1s;
    -webkit-transtition-delay: 1s;
    transition-delay: 1s;

    -moz-transform: translateX(-90vw);
    -webkit-transform: translateX(-90vw);
    transform: translateX(-90vw);

}

#map{
    width: 96.25%;
    height: 100%;
    display: block;
    float: right;
}

#bubble img{
    display: block;
    width: 250px;
    height: auto;
    margin: 2vw;
    margin-bottom: 0;
}

#bubble #txt{
    display: block;
    width: 100%;
    
    color: #000;
    font-family: 'FontL' !important;
    font-size: 1.2em; 
    line-height: normal;
    padding: 2vw 0;
    margin: 0;
    text-align: center;
}

#kontakt:hover{
    -moz-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);   
}

#kontakt:hover #switch{
        background-image: url('../src/pic/funk/kont-close.svg');
}

#kontakt:hover #butBack{
        display: block;
        -moz-transform: translateX(0);
        -webkit-transform: translateX(0);
        transform: translateX(0); 
}

@media only screen and (min-width: 150px) and (max-width: 720px) {
    
    #Content{
            height: 90vh;
    }
    
    #kontakt {
        width: 100%;
        height: 100%;

        -moz-transform: translateY(10%);
        -webkit-transform: translateY(10%);
        transform: translateY(90%); 
        
        margin: 0;
        padding: 0;
    }

    #box{
        width: 100%;
        float: none;
        height: 90%;
        margin: 0;
        padding: 0;
    }

    .kbox {
        display: block;
        float: none;
        width: 100%;
        height: 33.33%;
        
        margin: 0;
        padding: 0;
    }
    
    .kbox:nth-of-type(2){
        margin: 0;
        padding: 0;
    }

    .imgs {
        display: flex;
        align-items: center;
        justify-content: center;
        
        float: left;
        height: 100%;
        width: 50%;
        
        overflow: hidden;
        
        margin: 0;
        padding: 0;
    }
    
    .imgs img{
        height: 75%;
        width: auto;
    }


    .para {
        text-align: left;
        display: flex;
        align-items: center;
        
        float: right;
        height: 100%;
        width: 50%;
        font-size: 3vh;
        margin: 0;
        padding: 0;
    }

    #switch{
        width: 100%;
        float: none;
        height: 10%;
        
        background-image: url('../src/pic/funk/kont-open2.svg');
    }

    #map{
        width: 100%;
        height: 90%;
        display: block;
        float: none;
    }

    #kontakt:hover{
        -moz-transform: translateY(0);
        -webkit-transform: translateY(0);
        transform: translateY(0);   
    }

    #kontakt:hover #switch{
            background-image: url('../src/pic/funk/kont-close2.svg');
    }
    
}