@font-face {
    font-family: Forelle;
    src: url("img/forelle.ttf");
}
body {
  font-family: Georgia, serif;
  margin: 0;
  padding: 0;
  background-color: #eee;
}
.wrapper {
  margin: 0 auto;
  padding: 0;
  width: 940px;
  border-right: 1px #ddd solid;
  border-left: 1px #ddd solid;
  background: #fff;
}
.logo {
  background: url("img/logo.png") no-repeat center top;
  height: 198px;
}
.navigation {
  position: relative;
  top: -35px;
  text-align: right;
  font-family: Arial, Helvetica, sans-serif;
}
.navigation a {
  color: #5c3d1b;
  font-size: 16px;
  line-height: 36px;
  padding: 8px 16px;
  text-decoration: none;
}
.navigation a:hover {
  background: #e6d9ca;
  text-decoration: none;
}
.navigation a:visited {
  color: #5c3d1b;
}
.navigation a.active {
  background: #fff;
}
.navigation a.active:focus {outline:none;}
.content {
  z-index: 2;
  display: block;
  background-color: #fff;
  padding: 0 60px;
}
#angebot, #kontakt { display: none; }
#main, #angebot, #kontakt {
  padding: 20px 0;
}
.welcome {
  margin: 20px auto;
  font-family: Georgia, serif;
  font-size: 1.1em;
  font-style: italic;
  color: #383838;
}
.allegra-logo {
  background: url("img/logo_allegra.png") no-repeat center center;
  height: 300px;
  margin: 40px auto;
  display: block;
}
a { color: #2962ff; text-decoration: none; }
a:hover { text-decoration: underline; }
a:visited { color: #0d47a1; }
blockquote {
  font-family: Georgia, serif;
  font-size: 1.1em;
  font-style: italic;
  width: 600px;
  margin: 0.25em auto;
  padding: 0.25em 40px;
  line-height: 1.45;
  position: relative;
  color: #383838;
}
blockquote:before {
  display: block;
  content: "\201C";
  font-size: 80px;
  position: absolute;
  left: -10px;
  top: -20px;
  color: #7a7a7a;
}
h1 {
  font-family: 'Cookie', cursive;
  font-size: 3.5em;
  font-style: normal;
  line-height: 0.8em;
  margin: 0;
}
h2 {
  font-family: 'Cookie', cursive;
  font-size: 2.5em;
}
h3 {
  font-size: 1.3em;
  font-weight: normal;
  color: #666;
}
h4 {
  font-size: 1.3em;
  font-weight: normal;
  color: #666;
  line-height: 0.8em;
  margin: 0;
  padding: 0;
}
ul {
  margin-bottom: 24px;
}
.info {
  background: #ebf7ed;
  color: #297338;
  font-size: 0.95em;
  border: 1px solid #7dab86;
  border-radius: 12px;
  padding: 12px 32px 12px 48px;
  margin: 24px auto;
  float: left;
}
.info-icon {
  background: url("img/info.png") no-repeat center center;
  width: 24px;
  height: 24px;
  margin-left: -32px;
  float: left;
  clear: both;
}
.info-text {
  padding-left: -32px;
  font-style: italic;
}
.button {
  background: #7dab86 url("img/download.png") no-repeat 6px center;
  color: #eee;
  border-radius: 6px;
  border: none;
  padding: 6px 12px 6px 38px;
  font-family: sans-serif;
  font-size: 1.0em;
  text-decoration: none;
}
.button:hover {
  background-color: #4c8a58;
  text-decoration: none;
}
.button:visited { color: #eee; }
#kontakt {
  width: 500px;
  margin: 0 auto;
  font-size: 1.15em;
  line-height: 1.25em;
}
.portrait {
  background: url("img/portrait_small.jpg") no-repeat;
  position: relative;
  right: -60px;
  float: right;
  width: 310px;
  height: 400px;
  z-index: 1;
}
.footer {
  margin: 0;
  padding: 0;
  background: url("img/footer.jpg") no-repeat center bottom;
  height: 180px;
}