@import url(http://fonts.googleapis.com/css?family=Cabin:400,700italic);
body {
  background-color: #ccc;
  color: #2c2013;
  margin: 0;
  font-family: 'Cabin',sans-serif;
  font-size: 16px; }

div.header {
  margin-top: 60px;
  width: 100%;
  position: relative;
  background-image: url(../image/header-fond.jpg);
  background-position: center center;
  background-repeat: repeat-x; }
  div.header div.header-inner {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    margin: auto;
    width: 100%;
    max-width: 1050px;
    position: relative;
    padding: 0 25px; }
  div.header ul.gallery {
    padding: 0;
    margin: 0 auto 2em;
    width: 1000px;
    position: relative;
    box-shadow: 0 0 10px 0px black; }
    div.header ul.gallery li {
      margin: 0;
      list-style-type: none;
      position: absolute; }
      div.header ul.gallery li div.description {
        bottom: 0;
        position: absolute;
        background-color: rgba(16, 16, 16, 0.5);
        padding: 1em 40px;
        width: 100%; }
        div.header ul.gallery li div.description h3 {
          margin: 0 0 5px 0;
          font-style: italic;
          color: #f0e4d7;
          font-size: 1.4em;
          text-shadow: 0px 0px 6px black; }
        div.header ul.gallery li div.description p {
          margin: 0;
          color: #f0ebe7; }

div.logo {
  width: 100%;
  max-width: 1000px;
  position: absolute;
  top: -42px;
  margin: auto; }
  div.logo img {
    left: 35px;
    top: 0;
    position: absolute; }

h1 {
  color: #ec0606;
  font-weight: bold;
  font-style: italic; }

div.content {
  /* For IE 6/7 (trigger hasLayout) */
  zoom: 1;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  width: 100%;
  max-width: 1010px;
  margin: 4em auto;
  background-color: white;
  padding: 40px;
  background-image: url(../image/flamme.gif);
  background-position: right bottom;
  background-repeat: no-repeat;
  -moz-box-shadow: 0 0 5px #999;
  -webkit-box-shadow: 0 0 5px #999;
  box-shadow: 0 0 5px #999; }
  div.content:before, div.content:after {
    content: "";
    display: table; }
  div.content:after {
    clear: both; }
  div.content div.left {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding-right: 6em;
    width: 70%;
    float: left; }
  div.content div.right {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 30%;
    float: right; }

a.cera-logo {
  display: inline-block;
  background-image: url(../image/cera-inactive.png);
  width: 100%;
  max-width: 200px;
  height: 106px; }
  a.cera-logo:hover {
    background-image: url(../image/cera-active.png); }

a.rika-logo {
  display: inline-block;
  background-image: url(../image/rika-inactive.png);
  width: 100%;
  max-width: 200px;
  height: 67px; }
  a.rika-logo:hover {
    background-image: url(../image/rika-active.png); }

div.hersteller {
  text-align: center;
  padding-bottom: 20px;
  margin-bottom: 40px;
  border-bottom: 1px solid #ccc; }

h1 {
  margin-top: 2em; }

.color, a {
  color: #ec0606; }

p.beratungszeiten {
  margin-bottom: 0; }

p {
  line-height: 160%; }

@media screen and (max-width: 1024px) {
  body {
    font-size: 14px; } }
@media screen and (min-width: 640px) and (max-width: 1024px) {
  div.content div.right, div.content div.left {
    float: none;
    width: 100%; }
    div.content div.right div.hersteller, div.content div.left div.hersteller {
      float: left;
      width: 200px;
      margin-right: 2em;
      border-bottom: none;
      height: 400px; }
  div.content div.right {
    margin-top: 2em; } }
@media screen and (max-width: 639px) {
  body {
    font-size: 14px; }

  div.header {
    background-image: none;
    margin-top: 100px; }
    div.header div.logo {
      top: -70px; }
      div.header div.logo img {
        left: -5px;
        width: 237px;
        height: 59px; }

  div.content div.right, div.content div.left {
    float: none;
    width: 100%; }
    div.content div.right div.hersteller, div.content div.left div.hersteller {
      display: none; }
  div.content div.right {
    margin-top: 2em; } }
@media screen and (max-width: 479px) {
  body {
    font-size: 12px;
    font-family: Helvetica,Arial,sans-serif; }

  div.content div.left {
    padding-right: 0; }

  h1 {
    margin-top: 0em;
    font-size: 1.5em; }

  div.header ul.gallery li div.description {
    padding: 10px; }
    div.header ul.gallery li div.description p {
      display: none; }
    div.header ul.gallery li div.description h3 {
      font-size: 12px;
      font-weight: bold;
      font-style: normal;
      margin: 0; } }