@import url(https://fonts.googleapis.com/css?family=Jost:100,200,300,400,500,600,700,800,900,100i,200i,300i,400i,500i,600i,700i,800i,900i&display=swap);
body{
    font-family:Jost,sans-serif;
    height:100%
}
.bg{
 

    background: url("/res/img/arkaplan.jpg") center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
}

.logo{
    width: 200px;
    padding-top: 55px;
}
.overlay{
    background:#00000049;
    width:100%;
    height:100%;
    position:fixed;
    top:0;
    left:0;
    z-index:-2
}
.header{
    margin:0;
    position:absolute;
    top:50%;
    left:50%;
    -ms-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
    width:90%;
    margin:0 auto;
    text-align:center
}
.header h1{
    font-weight:700;
    font-size:2rem;
    margin-bottom:55px
}
.header h2{
    text-transform:uppercase;
    letter-spacing:2.3px;
    font-size:2rem;
    margin-top:-50px;
    background:rgba(255,255,255,.25);
    box-shadow:0 8px 32px 0 rgba(31,38,135,.37);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    border-radius:10px;
    width:30%;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:35px
}
.header h4{
    margin-top:-25px;
    font-weight:400;
    font-size:1.2rem;
    letter-spacing:.4px
}
.header h1,.header h2,.header h4{
    color:#fff;
    height:auto
}
.header .buttons{
    width:100%;
    display:flex;
    justify-content:center
}
.header .buttons .mail{
    border:1px solid #fff;
    background:0 0;
    color:#fff;
    width:50px;
    height:50px;
    border-radius:50%;
    font-weight:700;
    font-size:1.3rem;
    outline:0;
    cursor:pointer;
    text-align:center
}
.header .buttons .mail:hover{
    background:#fff;
    color:#202020;
    transition:all .3s ease-in-out
}
.header .buttons a{
    color:#fff
}
footer{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    flex-direction:column;
    color:#fff;
    z-index:1;
    position:fixed;
    left:0;
    top:25px;
    width:100%
}
footer .adress{
    grid-area:1/2/2/5
}
footer div{
    margin-left:13px
}
footer a{
    color:#fff
}
@media screen and (max-width:480px){
    footer{
        display:flex;
        justify-content:center;
        align-items:center;
        flex-wrap:wrap;
        flex-direction:column
    }
    .header .buttons{
        margin-bottom:80px!important
    }
    footer .adress{
        margin-top:-13px
    }
    footer .phone{
        margin-top:-13px;
        float:right
    }
    footer .adress{
        font-size:.9rem;
        padding-right:15px!important
    }
    .header h2{
        width:50%;
        margin-bottom:35px
    }
    .header h1{
        font-size:2em!important;
        margin-bottom:55px
    }

    .logo{
        width: 120px;
        padding-top: 75px;
        margin-top: 55px;
    }
}