/*Layout*/

body {
    margin: 0px;
    padding: 0px;
    font-family: open-sans, sans-serif;
    font-weight: 300;
    font-style: normal;
}

a { text-decoration:none;color:black }
h1, h2, h3, h4 { font-weight:normal;padding:0px;margin:0px }
input { }


/* HEADER */
.header {
    position: relative;
    z-index: 9;
    margin-bottom:100px;
    background-color:white;
    height:100vh;
}

.header > div {
    background-repeat:no-repeat;
    background-size:cover;
    position:absolute;
    top:40px;bottom:40px;left:40px;right:40px;
}

.header__logo {
    max-width:130px;
    position:absolute; top:0px; left:0px;
}

.header > a > img {
    position:absolute;
    bottom:5px;left:50%;margin-left:-30px;
}

.header .title {
    position: absolute;
    bottom: 70px;
    left: 100px;
    color: #FFFFFF;
    text-shadow: 0px 3px 6px #00000099;
}

.header .title h1 {
    text-transform: uppercase;
    font-size: 80px;
    font-family: trajan-pro-3, Semibold;
}

.header .title h2 {
    font-family: la-bohemienne, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size:125px;
}

.header .title div {
    font-size: 26px;
    font-weight:200;
}

.header .menu {
    text-align: center;
    margin-top:30px;
}

.header .menu a {
    color: white;
    font-size: 18px;
    font-family: trajan-pro-3, Semibold;
    font-weight: 200;
    text-shadow: 0px 3px 6px #00000099;
}

.header .menu div {
    display: inline-block;
    padding: 5px 20px;
}

.fixedheader {position:fixed;top:0px;width:100%;min-height:120px;background-color:white;z-index:2;}

.submenu { text-align:center; }
.submenu h1 { font-size:22px;margin:40px 10px 10px 10px; font-family: trajan-pro-3, Semibold; }
.submenu .menu div {
    display: inline-block;
    padding: 5px 20px;
}

/* FOOTER */
.footer { background-color:#444444;color:white;padding:60px 0px;text-align:center;font-size:18px }
.footer .kontakt { max-width:900px;margin:0px auto }
.footer a { color: white }
.mailbutton a { display:inline-block;border:solid 2px white;padding:5px 20px;font-size:16px;margin-top:40px;margin-bottom:80px }

.footer h2 {
    text-transform: uppercase;
    font-size: 40px;
    font-family: trajan-pro-3, Semibold;
    margin-bottom:50px;
}

.footer .menu  {
    font-size:14px;
    margin:30px 0px 20px 0px;
}
.footer .menu div {
    display:inline-block;padding:5px 20px;
}



/* EINTRAG */
.eintrag { max-width:900px;margin:0px auto;text-align:center }
.eintrag > img { margin:100px auto 0px auto }
.eintrag > h3 { font-size:60px;text-align:center;font-family:trajan-pro-3, Semibold; }
.eintrag input[type=text]{ border:solid 1px black;padding:14px;font-size:18px }
.eintrag .input50 { width:410px }
.eintrag .inputright { float:right }
.eintrag textarea { border:solid 1px black;padding:14px;margin-top:10px;width:870px;font-family: open-sans, sans-serif;height:80px;font-size:18px;margin-bottom:8px }
.eintrag .form { text-align:left;width:100%;padding-top:30px }
.eintrag .valid > div { background-color:#EEEEEE;width:741px;float:left }
.eintrag .valid img { float:right;height:50px }
.eintrag .valid > div > div { font-size:14px;padding:10px;float:left;min-height:23px; }
.eintrag .valid input { float:right;width:100px }
.eintrag .button { margin:40px auto 0px auto; text-align:center }
.eintrag .button a { display:inline-block;padding:10px 20px;background-color:#444;color:white;font-size:18px }
.eintrag .message { padding:10px;height:20px }
.eintrag .chb { margin:20px 0px;text-align:left }
.eintrag .chb div { margin-bottom:4px }
.eintrag .chb label {  }


/* EINTRAG */
.news { max-width:900px;margin:100px auto;font-family: open-sans, sans-serif; }
.news > div { padding:50px 20px;border-bottom:solid 1px #B7B7B7;font-size:18px;font-weight:600; }
.news h3 { font-size:16px;color:#707171;font-weight:300; }
.news h4 { font-size:14px;color:#707171;margin-bottom:10px;font-weight:300; }
.news h3, .news h4 { font-size:14px }

/* Kerzen */
.kerzen { max-width:900px;margin:100px auto;font-family: open-sans, sans-serif; }
.kerzen > div { width:33.3333%;float:left;text-align:center;padding-top:30px }
.kerzen > div > div { border:solid 1px #C3C5C5; border-bottom-width:0px;border-radius:20px 20px 0px 0px;padding:20px;margin:10px;height:120px;font-weight:600;font-size:16px }

/* Impressum */

.impressum { max-width:900px;margin:100px auto;font-family: open-sans, sans-serif; }



@media screen and (max-width:2500px) {
    .header .title h1 { font-size: 60px; }
    .header .title h2 { font-size: 90px; }
}

@media screen and (max-width:1800px) {
    .header .title h1 { font-size: 40px; }
    .header .title h2 { font-size: 60px; }
    .header .title div {font-size: 20px; }

    .header > div {
        top:20px;bottom:20px;left:20px;right:20px;
    }
    .header > a > img {  bottom: -11px;}
    .eintrag > h3 { font-size: 40px; }
}

@media screen and (max-width:910px) {
    
    .impressum, .kerzen, .news, .eintrag, .footer .kontakt {
        max-width: 100%;padding:0px 20px
    }
    .eintrag .form { text-align:center}
    .eintrag .inputright { float:none;margin-top:10px}
    .eintrag .input50, .eintrag textarea { width:90%;box-sizing:border-box; }
    .eintrag .valid > div {margin-left:5%;width:unset;width:70%;text-align:left}
    .eintrag .valid > div > div { margin-left:5%;width:55% }
    .eintrag .valid input { margin-right:5% }

    .header__logo {
        max-width:90px;
        display:none;
    }

}

@media screen and (max-width:710px) {
    .eintrag .valid > div > div { width:50% }
    .eintrag .valid > div { width:60%;}
    .submenu .menu div { padding: 5px 10px; }    
    .footer { font-size:16px }
    .footer h2 {font-size: 30px;}
    .kerzen > div {  width: 50%; }
    .fixedheader { min-height:150px }
}

@media screen and (max-width:610px) {
    .eintrag .valid > div > div { width:90%;text-align:left }
    .eintrag .valid > div { width:90%;text-align:center}
    .eintrag .valid input { float: none; margin-top:10px;margin-right:0px  }
    .eintrag .valid img { float:none;margin:0px auto;position:relative;left:-16px}
    .eintrag .valid {
        text-align: center
    }
    .header .title h1 { font-size: 20px; }
    .header .title h2 { font-size: 25px; }
    .header .title div {font-size: 16px; }
    .header .title {  left: 10px; }

    .header div .menu div {
        padding: 5px 8px;
    }
}

@media screen and (max-width:450px) {
    .kerzen > div {
        width: 100%;
    }
    .eintrag > h3 {
        font-size: 25px;
    }
}