*{
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
}
html{
    width: 100%;
    height: 100%;
}
body{
    overflow-x: hidden;
    width: 100%;
    height: 100%;
    position: relative;
    background: #ed213a; /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #ed213a, #93291e); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #ed213a, #93291e); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
a {
    font-size: .8em;
}
.kontakt{
    float: left;
    width: 70%;
    transform: translateX(-50%);
    position: absolute;
    top: 7%;
    left: 50%;
    bottom: 7%;
    box-sizing: border-box;
    padding: 20px;
    height: 29em;
    background: #f4f4f4;
    border-radius: 10px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
.kontakt .map{
    width: calc(50% - 20px);
    height: 100%;
    margin-left: 15px;
    border-radius: 7px;
}
.kontakt-form{
    width: 50%;
}
.input{
    width: calc(50% - 10px);
}
.text{
    width: calc(100% - 10px);
}
.title{
    width: 90%;
    padding-left: 5px;
    padding-bottom: 15px;
    font-size: 20px;
    color: rgb(65, 65, 65);
}
.inputBox{
    float: left;
    position: relative;
    margin: 5px;
}
.inputBox textarea{
    width: 100%;
    background: #e6e6e6;
    border: none;
    border-radius: 7px;
    box-sizing: border-box;
    padding: 10px;
    padding-left: 55px;
}
.inputBox input{
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border: none;
    background: #e6e6e6;
    padding: 12px 25px;
    padding-left: 55px;
    border-radius: 20px;
}
.inputBox i{
    position: absolute;
    top: 10px;
    left: 20px;
    color: rgb(73, 73, 73);
}
.inputBox .btn{
    cursor: pointer;
    background: #ed213a;
    padding: 10px 20px;
    border-radius: 4px;
    color: white;
    transition: .3s all ease;
}
.inputBox .btn:hover{
    background: #b63021;
}
.btnBack{
    position: absolute;
    top: 10px;
    left: 10px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    cursor: pointer;
    transition: .3s all ease;
    z-index: 200;
}
.btnBack:hover{
    background: rgb(231, 231, 231);
}
.btnBack i{
    font-size: 20px;
    box-sizing: border-box;
    padding-left: 13px;
    padding-top: 13px;
    color: rgb(46, 46, 46);
}
.popup-box {
    position: absolute;
    transform: translateX(-50%);
    top: 4%;
    left: 50%;
    margin-bottom: 4%;
    background: #f4f4f4;
    border-radius: 7px;
    padding: 20px;
    min-width: 100px;
    min-height: 70px;
}
.popup-box p {
    margin-bottom: 10px;
}
.popup-box h3 {
    margin-bottom: 20px;
}
.popup-box .close-popup {
    cursor: pointer;
    width: 40px;
    height: 40px;
    background: #fff;
    position: absolute;
    top: 10px;
    right: 10px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    border-radius: 50%;
    text-align: center;
}
.popup-box .close-popup i {
    font-size: 16px;
    transform: translateY(12px);
}
.ueber-mich {
    width: 65%;
    display: none;
}
.dsgvo {
    display: none;
}
.ueber-mich img {
    width: 200px;
    float: left;
    margin-right: 20px;
    margin-bottom: 20px;
}
#bg-dark {
     height: 100%;
     width: 100%;
     background: rgba(0, 0, 0, .6);
     position: fixed;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
    display: none;
}

/*########### BREAKPOINTS ##############*/

/* small devices */
@media only screen and (max-width: 800px) {
    .kontakt {
        height: auto;
        position: relative;
    }
    .kontakt .map{
        width: 100%;
        margin: 0px;
        margin-top: 10px;
    }
    .kontakt-form{
        width: 100%;
    }
    .popup-box {
        width: 90%;
    }
}
/* phones */
@media only screen and (max-width: 600px){
    .kontakt {
        width: 90%;
    }
    .ueber-mich{
        transform: translateX(-50%);
        top: 10px;
        margin-bottom: 10px;
    }
    .ueber-mich img {
        width: 100%;
    }
}