@font-face {
    font-family: Schlange;
    font-style: normal;
    src: url(ALS_Schlange_sans_reg.otf);
    font-weight: normal;
}

@font-face {
    font-family: Schlange;
    font-style: normal;
    src: url(ALS_Schlange_sans_bld.otf);
    font-weight: 600;
}

@font-face {
    font-family: Schlange;
    font-style: normal;
    src: url(ALS_Schlange_sans_blk.otf);
    font-weight: bold;
}

body {
    width: calc( 100vw - 20px );
    height: calc( 100vh - 20px );
    margin: 0;
    padding: 10px;
    font-family: Schlange;
    background: url(spa.jpg);
    background-size: cover;
}

.body {
    max-width: 800px;
    width: calc( 100vw - 100px );
    min-width: 600px;
    text-align: center;
    background: rgba( 255, 255, 255, 0.85 );
    padding: 10px 40px;
    margin: calc( 50vh - 200px ) auto 0 auto;
    border-radius: 10px;
}

h1 {
    font-size: 40px;
}

p {
    font-size: 18px;
}

.logo {
    width: 300px;
    height: 50px;
    background: url(logo-h.svg) center center no-repeat;
    margin: 30px auto 20px auto;
}

.info {
    width: 100%;
    margin: 10px auto;
}

.info h1 {
    margin: 30px 0 0 0;
}

.info p {
    font-weight: 600;
    margin: 10px 0 0 0;
}

.contacts {
    width: 592px;
    margin: 10px auto;
}

.contacts table {
    margin: 10px auto;
}

.contacts a {
    font-size: 20px;
    color: #222;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
}

.contacts a span {
    font-size: 26px;
    display: block;
    text-decoration: underline;
    font-weight: 300;
}

.contacts a:hover span {
    color: #0088E3;
}

