@font-face {
    font-family: 'Gabriola';
    src: url('font/Gabriola.woff') format('woff'),
         url('font/Gabriola.woff2') format('woff2');
}


/**************************/
/*     Content Styles     */
/**************************/
img {
    height:auto;
    max-width:100%;
}

img.left {
    margin: 0 2rem 1rem 0;
    float: left;
    clear: left;
}

img.right {
    margin: 0 0 1rem 2rem;
    float: right;
    clear: right;
}

img.rund {
    border-radius: 50%;
    border:.2rem solid #fff;
    box-shadow: 3px 3px 12px #777;
    margin:0 auto 0;
    display:block;
}
img.floatright {
    border-radius: 50%;
    border:.2rem solid #fff;
    box-shadow: 3px 3px 12px #777;
    float:right;
}
a img.floatright:hover {
    border-color: red;
}
img.oval {
    border-radius: 10px;
    border:.2rem solid #fff;
    box-shadow: 3px 3px 12px #777;
    margin:0 auto 0;
    display:block;
}
p.volleBreiteZentriert {
    max-width: none;
    text-align: center;
}
strong {
    font-weight: bold;
    letter-spacing: .06em;
    color:#20d;
}


a.linkbutton {
    background:#eef;
    border-radius:10px;
    box-shadow:2px 2px 10px #669;
    border:1px solid #3be;

    letter-spacing:.05em;
    line-height:1.1;
    display:inline-block;
    padding:.1rem .7rem;
    margin:0;
    text-decoration:none;
}
a.linkbutton:before {
    content:"• ";
}
a.linkbutton:hover {
    background-color:#f00 !important;
    color:white;
}


/*******************/
/*      Start      */
/*******************/
html {
    font-size:100%;
}


body {
    font-family:  sans-serif;
    margin:0;
    font-size:1.2rem;
    line-height: 1.6;
}



/***********************/
/*       Head          */
/***********************/

.header {
    text-align:center;
    margin:0 auto 0;
    background-image:url(images/hoyel.jpg);
    background-size: cover;
    background-repeat:no-repeat;
    height:500px;
    background-position: center;
     /* border: medium dotted red; */
}

.header h1 {
    font: normal normal 6rem/1 Gabriola, cursive;
    color:#f00;
    padding-top: 1rem;
    margin:0;
    max-width:100%;
}

.header h2 {
    font: normal normal 2rem/1.6 Verdana, sans-serif;
    letter-spacing: .3rem;
    margin:0;
    color:black;
    text-shadow: 5px 5px 18px #fff,
                 5px -5px 18px #fff,
                 -5px 5px 18px #fff,
                 -5px -5px 18px #fff;
}

@media screen and (max-width: 1200px) {
    .header h1 {
        font-size:5rem;
    }
    .header h2 {
        font-size:1.8rem;
    }
}
@media screen and (max-width: 1000px) {
    .header h1 {
        font-size:4rem;
    }
    .header h2 {
        font-size:1.65rem;
    }
}





/***********************/
/*      Container     */
/***********************/

.container {
    background-image:linear-gradient(#93a85f, #fed 10px);
    /* border:2px solid brown; */
}

/********************/
/*     Content      */
/********************/

.content {
    max-width: 100%;
    margin:0 auto;
    padding:0 2px;
    /* border: 2px solid red; */
}

.xh_mailform {
    max-width: 45rem;
    margin: 0 auto;
}

h1 {
    font: normal normal 4rem Gabriola, serif;
	color:black;
    margin: 1rem 0 1em;
    line-height:1.1;
    max-width: 55rem;
    margin:0 auto 1rem;
}

h2 {
    font: bold normal 2.2rem sans-serif;
    color:#f03;
    line-height:1.0;
    margin:0 0 .2em;
    text-align:center;
}

h3 {
    font: italic bold 2.2rem  Times, serif;
    margin:1em 0 .2em;

    color:#e03;
    text-align:center;
}
h4 {
    font: normal normal 3rem Gabriola, cursive;
    color:#e03;
    margin:0 0 .5em;
    line-height:1;
    max-width: 55rem;
    margin:0 auto;
}
h5 {
    font: normal bold 2rem serif;
    letter-spacing:.05em;
    color:#559;
    max-width: 35rem;
    margin:1em auto .5em;
}

h6 {
    font: normal bold 1.7rem serif;
    margin:0 0 1em;
    max-width: 35rem;
    margin:1em auto .5em;

}
h6 a:hover {
    color:#b00;
    background:#ffa;
}
ul, ol, p, .submenu {
    margin:0 auto 1rem;
    max-width: 35rem;

}
#xh_adminmenu ul {
    max-width: 100%;
}

/* @media screen and (max-width: 1200px) {
    h6, p, ul li, ol li {
        font-size:1.2rem;
    }
    h1 {
        font-size:3rem;
    }
    h2, h4 {
        font-size:2.3rem;
    }
    h3, h5 {
        font-size:1.8rem;
    }

}
@media screen and (max-width: 1000px) {
    h6, p, ul li, ol li {
        font-size:1.1rem;
    }
    h1 {
        font-size:2.5rem;
    }
    h2, h4 {
        font-size:2rem;
    }
    h3, h5 {
        font-size:1.3rem;
    }

} */


@media screen and (max-width: 800px) {
    h6, p, ul li, ol li {
        font-size:1rem;
    }
    h1 {
        font-size:2.3rem;
    }
    h2 {
        font-size:2.5rem;
    }
    h3 {
        font-size:1.2rem;
    }
    h4 {
        font-size:1.2rem;
    }
    h5 {
        font-size:1.5rem;
    }
    h6 {
        font-size:1.4rem;
    }

}


/**************************/
/*        Peanuts         */
/**************************/
#submenu h4 {
    float:none;
    margin:-7rem 0 0;
}
@media screen and (max-width: 500px) {
    #submenu h4 {
        margin:-5.5rem 0 0;
    }
}
#submenu ul {
    list-style-type: none;
    padding:0;
    margin-bottom:4rem;
}
.footer .iconmenu {
    text-align:center;
    margin:1em 0 0 1em;
}
@media screen and (max-width: 810px) {
    .footer .iconmenu {
        margin:1em 0 0;
    }
}


.loginlink a:hover {
    color:white;
    background:#4176CB;
    margin:0 -1em;
    padding:0 1em;
}
.loginlink {
    text-align:center;
    font-size:10px;
}
.loginlink a {
    color:#888;
    text-decoration:none;
}


#xh_adminmenu li {
    font-size:16px;
    line-height:1.25em;
}
/**************************/
/*         Extras         */
/**************************/



.xh_mailform textarea {
	max-width: calc(100% - 16px);
}

.xh_mailform .text, .xh_mailform textarea {
    font:normal normal 1.1rem Verdana, sans-serif;
    margin-left: 3px;
}


@media screen and (max-width: 810px) {
    .xh_mailform input.text {
        width:80%;
    }
}