@font-face {
    font-family: 'Vollkorn';
    src: url('Vollkorn-Regular.otf');
}

@font-face {
    font-family: 'Vollkorn-bold';
    src: url('Vollkorn-Bold.otf');
}


* { margin: 0; padding: 0 }
html { min-height: 100% }
body { background: #fff url(bg.jpeg) no-repeat top center; background-size: cover; color: #553026; font-family: 'Vollkorn', serif; font-weight: normal; font-size: 1em; width: 100%; min-height: 100% }
h1 { font-size: 160%; width: 100%; word-wrap: break-word; overflow-wrap: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; margin: 0 0 25px 0 }
h2 { font-family: 'Vollkorn-bold', serif; font-weight: bold; font-size: 150%; margin: 0 }
p { font-family: 'Vollkorn', serif; font-weight: normal; font-size: 125%; line-height: 150%; margin: 10px 0; word-wrap: break-word; overflow-wrap: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto }
ul, ol { margin: 0 0 15px 20px }
ul li { font-size: 125% }
input, select, textarea { border: 1px solid #323232; margin: 2px 0 0 0; background: #C8C8C8; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px }
acronym, dfn, abbr, span.abbr { border-bottom: 1px dotted #4d4d4d; cursor: help }

a { color: #553026; text-decoration: none }
a:hover { color:#553026; text-decoration: underline }
a img { border: none !important }

.noscript { background: #EDFF00; color: #333; text-align: center; padding: 20px 0; margin: 0; width: 100% }
.invisible { position: absolute !important; overflow: hidden; height: 1px }
.start .clear { clear: both; padding-top: 30px }
.clear { clear: both }
.instagram img { margin-bottom: -10px }

#generalHeader { padding: 0 0 10px 0; margin: 0 auto; max-width: 320px }
#generalHeader a img { height: auto; max-width: 100% }
.logoPosition { padding: 15px 0 20px 0; text-align: center }

#container { margin: 20px auto 20px auto }
#container h1 { font-family: 'Vollkorn', serif; font-weight: normal; color: #fff; font-size: 500%; margin: 0 }
#content { background: #fff; ; margin-top: -36px; width: 100% }
.content { margin: 0 auto; padding: 25px 0 25px 10px; max-width: 100%; height: 240px; max-height: 240px; overflow-y: scroll }
.start .content p { font-family: 'Vollkorn-bold', serif; font-weight: bold; font-size: 150%; margin: 0; word-wrap: break-word; overflow-wrap: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto }

#generalFoot { font-family: 'Vollkorn-bold', serif; font-weight: bold; font-size: 150%; text-align: center; padding: 35px 0 10px 0; margin: 0 auto }
#generalFoot a { text-decoration: none }
#generalFoot a:hover { text-decoration: underline }

/* navigation */
#menuBottom ul { padding: 0; margin: 0 auto; list-style: none; position: relative }
#menuBottom ul li { padding: 0 5px 0 0; display: inline-block; font-size: 95% }

.contactDetails { font-size: 90%; margin: 0 10px }
.company, .contact { margin: 10px auto }
.copyright p { font-size: 80%; line-height: 90%; padding: 0; margin: 0 auto; width: 100% }

@media screen and (min-width: 790px) {
.left { float: left; width: 45% }
.right { float: right; width: 45% }
}

@media screen and (min-width: 1024px) {

#generalHeader { max-width: 600px }
.logoPosition { padding: 15px 0 75px 0; text-align: center }
#container { margin: 40px auto 20px auto }
#container h1 { margin: 0 auto; font-size: 800%; width: 920px }
#content { margin-top: -57px }
.content { margin: 0 auto; padding: 25px 0; max-width: 920px; height: 240px; max-height: 240px; overflow-y: scroll }
.start .content { overflow: hidden }
.center { text-align: center; padding-top: 60px !important }
#generalFoot { padding: 15px 0 10px 0 }

}