/*Allgemeine Styles*/

/* shadows-into-light-regular - latin */
@font-face {
    font-family: 'Shadows Into Light';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/shadows-into-light-v7-latin-regular.eot'); /* IE9 Compat Modes */
    src: local('Shadows Into Light'), local('ShadowsIntoLight'),
    url('../fonts/shadows-into-light-v7-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/shadows-into-light-v7-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/shadows-into-light-v7-latin-regular.woff') format('woff'), /* Modern Browsers */
    url('../fonts/shadows-into-light-v7-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/shadows-into-light-v7-latin-regular.svg#ShadowsIntoLight') format('svg'); /* Legacy iOS */
}

/* source-sans-pro-300 - latin */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/source-sans-pro-v11-latin-300.eot'); /* IE9 Compat Modes */
    src: local('Source Sans Pro Light'), local('SourceSansPro-Light'),
    url('../fonts/source-sans-pro-v11-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/source-sans-pro-v11-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/source-sans-pro-v11-latin-300.woff') format('woff'), /* Modern Browsers */
    url('../fonts/source-sans-pro-v11-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/source-sans-pro-v11-latin-300.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}
/* source-sans-pro-regular - latin */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/source-sans-pro-v11-latin-regular.eot'); /* IE9 Compat Modes */
    src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'),
    url('../fonts/source-sans-pro-v11-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/source-sans-pro-v11-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/source-sans-pro-v11-latin-regular.woff') format('woff'), /* Modern Browsers */
    url('../fonts/source-sans-pro-v11-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/source-sans-pro-v11-latin-regular.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}

body {margin: 0; padding: 0;}

h1 {
    font-family: 'Arial';
    font-style: normal;
    font-weight: 400;
    color: #ffffff;
    font-size: 45px;
    line-height: 55px;
    text-align: center;
}

h2 {
    font-family: 'Arial';
    font-style: normal;
    font-weight: 400;
    color: #000000;
    font-size: 45px;
    line-height: 55px;
    text-align: center;
}

p {
    font-family: 'Arial';
    font-style: normal;
    font-weight: 300;
    font-size: 15px;
}

* {
    line-height: 1.5;
}


h3, li {
    font-family: 'Arial';
}

a {
    text-decoration: none;
 color: #000000;
}

a:hover {
    color: #636363;
}

/*Individuellen Styles*/


.background {
    position: relative;
    width: 100%;
    max-width: 1200px;
    height: auto;
    margin: 0 auto;
}

.background img {
    width: 100%;
    height: auto;
}

.h1 {
    position: absolute;
   text-align: center;
    bottom: 5%;
    left: 50%;
}

/*Logo*/
#logo {
    width: 260px;
    height: auto;
    margin: 0 auto;
    display: block;
}

#logo img {
    width: 260px;
}



/*Ãœberschrift*/
#headline {
    position: absolute;
    width: 50%;
    height: auto;
    margin: 15vh auto;
    display: block;
    text-align: center;
}

/*Kontaktbox*/
#footer {
    width: 100%;
    height: auto;
    padding: 45px 0;

    background-color: #fff;
}

#contact {
    width: 50%;
    height: 10px auto;
    margin: 0px auto;
    padding: 25px 0;
    border-bottom: 1px solid #000;
    display: block;
}

.contact-box {
    width: 33%;
    height: auto;
    display: inline-block;
    vertical-align: top;
    -webkit-transition: background 0.5s;
    transition: background 0.5s;
    color: #000;
}


.contact-box:hover {
    color: #636363;
    cursor: pointer;
}

.contact-box img {
    width: 15%;
    padding: 2.5%;
    float: left;

}

.contact-box p {
    width: 75%;
    float: right;
    line-height: 35px;

}

#adress {
    width: 50%;
    height: auto;
    margin: 0 auto;
    display: block;
    text-align: center;
}

.datenschutz-wrapper {
    width: 80%;
    max-width: 1200px;
    margin: 0 auto;
}


/*Responsive Anpassungen*/
@media only screen and (min-width: 1024px) and (max-width: 1400px) {

    .contact-box p {
        width: 75%;
        float: right;
        line-height: 15px;
    }
}

@media only screen and (min-width: 800px) and (max-width: 1023px) {
    /*Ãœberschrift*/
    #headline {
        width: 70%;
    }

    /*Kontaktbox*/
    #contact {
        width: 90%;
    }
}

@media only screen and (min-width: 600px) and (max-width: 800px) {
    /*Ãœberschrift*/
    #headline {
        width: 95%;
    }

    /*Kontaktbox*/
    #footer {
        width: 100%;
        height: auto;
        padding: 30px 0;
        position: none;
        clear: 0px;
        background-color: #fff;
    }

    #contact {
        width: 95%;
    }

}
@media only screen and (min-width: 250px) and (max-width: 800px) {

    h1 {
        font-size: 35px;
    }

    /*Ãœberschrift*/
    #headline {
        width: 95%;
        margin: 0px auto;
    }

    /*Kontaktbox*/
    #footer {
        width: 100%;
        height: auto;
        padding: 30px 0;
        position: none;
        clear: 0px;
        background-color: #fff;
    }

    #contact {
        width: 95%;
    }

    .contact-box {
        width: 100%;
        height: auto;
        display: block;
        vertical-align: top;
        padding: 2px 0;
        -webkit-transition: background 0.5s;
        transition: background 0.5s;
        color: #000;
    }


    .contact-box:hover {
        color: #636363;
        cursor: pointer;

    }

    .contact-box img {
        width: 50px;
        height: auto;
        padding: 15px;
        display: block;
        margin: 0 auto;
        float: none;

    }

    .contact-box p {
        width: 95%;
        float: none;
        line-height: 35px;
        text-align: center;
        display: block;
        margin: 0 auto;

    }

    #adress {
        width: 95%;
        height: auto;
        margin: 0 auto;
        display: block;
        text-align: center;
    }

    .adress {
        width: 95%;
        height: auto;
        margin: 0 auto;
        display: block;
        text-align: center;
    }
}

.adress {
    width: 50%;
    height: auto;
    margin: 0 auto;
    display: block;
    text-align: center;
}