#kontakt,
#contact {
    padding: 2em 1em 1em;
}

#kontakt h1,
#contact h1 {
    display: none;
}

/* SOCIAL */
#kontakt div.social,
#contact div.social {
    width: 145px;
    height: 35px;

    margin: 0 auto;
}

#kontakt div.social::after,
#contact div.social::after {
    display: block;
    content: "";
    clear: both;
}

#kontakt div.social a,
#contact div.social a {
    width: 35px;
    height: 35px;

    display: block;
    overflow: hidden;
    float: left;

    background: url("/public/layout/hairmates/image/contact/social.png") no-repeat;
    background-size: 105px 70px;
}

#kontakt div.social a.facebook,
#contact div.social a.facebook {
    background-position: 0 0;
}

#kontakt div.social a.facebook:hover,
#contact div.social a.facebook:hover {
    background-position: 0 -35px;
}

#kontakt div.social a.messenger,
#contact div.social a.messenger {
    background-position: -35px 0;
}

#kontakt div.social a.messenger:hover,
#contact div.social a.messenger:hover {
    background-position: -35px -35px;
}

#kontakt div.social a.instagram,
#contact div.social a.instagram {
    background-position: -70px 0;
}

#kontakt div.social a.instagram:hover,
#contact div.social a.instagram:hover {
    background-position: -70px -35px;
}

#kontakt div.social a + a,
#contact div.social a + a {
    margin-left: 20px;
}

#kontakt div.social a span,
#contact div.social a span {
    display: none;
}


/* GENERIC */
#kontakt div.generic,
#contact div.generic {
    margin-top: 2em;
}

#kontakt div.generic::after,
#contact div.generic::after {
    display: block;
    content: "";
    clear: both;
}

#kontakt div.col1,
#kontakt div.col2,
#contact div.col1,
#contact div.col2 {
    width: 50%;

    float: left;
    box-sizing: border-box;
}

#kontakt div.col1 p,
#kontakt div.col2 p,
#contact div.col1 p,
#contact div.col2 p {
    line-height: 1.5em;

    color: #666;
}

#kontakt div.col1 p a,
#contact div.col1 p a {
    text-decoration: none;
    color: #222;
}

#kontakt div.col2 p,
#contact div.col2 p {
    text-align: right;
}



#kontakt div.map,
#contact div.map {
    height: 300px;

    margin-top: 2em;

    background: #bbb;
}


@media only screen and (-webkit-min-device-pixel-ratio: 1.1),
only screen and (min-device-pixel-ratio: 1.1) {
    #kontakt div.social a,
    #contact div.social a {
        background-image: url("/public/layout/hairmates/image/contact/social@2x.png");
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2.1),
only screen and (min-device-pixel-ratio: 2.1) {
    #kontakt div.social a,
    #contact div.social a {
        background-image: url("/public/layout/hairmates/image/contact/social@3x.png");
    }
}


@media only screen and (min-width: 37em) {
    #kontakt,
    #contact {
        padding: 6em 3em 3em;
    }

    #kontakt div.wrap,
    #contact div.wrap {
        max-width: 800px;

        margin: 0 auto;
    }

    #kontakt div.wrap::after,
    #contact div.wrap::after {
        display: block;
        content: "";
        clear: both;
    }

    #kontakt div.generic,
    #contact div.generic {
        width: 65%;

        margin: 0;
        float: left;
    }

    #kontakt div p.col2,
    #contact div .col2 p {
        text-align: left;
    }

    #kontakt div.social,
    #contact div.social {
        width: 30%;
        height: 50px;

        padding: 7px 0 0;
        float: right;

        text-align: right;
    }

    #kontakt div.social a,
    #contact div.social a {
        display: inline-block;
        float: none;
    }

    #kontakt div.map,
    #contact div.map {
        max-width: 800px;
        height: 600px;

        margin: 6em auto 0;
        clear: left;
    }
}