*
{
  font-family: Raleway, Verdana, Tahoma, Arial, sans-serif;
  line-height: 1.33em;
}

a { text-decoration: none; cursor: pointer; }
body { padding: 60px 0 0 0; margin: 0 }


.nav-adress
{
  color: #ffffff;
}

.nav-bild
{
  height: 37px;
  background-repeat: no-repeat;
  background-position: 14px 6px;
}

.nav-facebook
{
  min-width: 37px;
  padding-left: 42px !important;
  background-image: url('/images/facebook.png');
  background-size: 24px 24px;
}

.nav-mail
{
  min-width: 48px;
  padding-left: 53px !important;
  background-image: url('/images/mail.png');
  background-size: 35px 24px;
}

.nav-staccato
{
  min-width: 114px;
  background-image: url('/images/staccato.png');
  background-size: 84px 24px;
}

body, html {
  height: 100%;
  margin: 0;
  color: #777;
}

#footerline
{
  background: #212121;
  color: #ffffff;
  text-align: center;
  padding: 10px;
}

#footerline a
{
  color: #ffffff;
}

.bgimg
{
  min-height: 40vw;
  position: relative;
  opacity: 0.8;
  background-attachment: fixed;
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;

}

div#header
{
  padding: 10px;
  text-align: center;
  color: #eeeeee;
  position: fixed;
  width: 100vw;
  background: #424242;
  z-index: 100;
  -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
  box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
}

div#header img
{
  display: inline-block;
  margin-right: 10px;
  margin-left: 20px;
  height: 16px;
}


.caption
{
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  color: #000;
}

.caption div.border {
  background-color: #111;
  color: #fff;
  padding: 18px;
  font-size: 25px;
  display: inline-block;
}

.caption div.border.zwischentitel
{
 background:rgba(0,0,0,0.8);
 font-size: 50px;
 color: #f7f7f7;
  font-family: 'Indie Flower', cursive;
}

.caption div.border.zwischentitel.angebote
{
 background:rgba(0,0,0,0.8);
 font-size: 50px;
 color: #f7f7f7;
  font-family: 'Permanent Marker', cursive;
}






h3 {
  letter-spacing: 5px;
  text-transform: uppercase;
  font: 20px "Lato", sans-serif;
  color: #111;
}


.p-content
{
  color:#ddd;
  background-color: #212121;
  text-align: center;
  padding: 4vw 20vw;
  text-align: justify;
}

.prospekt
{
  width: 26vw;
  display: inline-block;
  height: 20vw;
  background-size: 12vw auto;
  background-repeat: no-repeat;
  padding: 0 1vw 1vw 13vw;
  text-align: left;
}

.nopadding
{
  padding: 0 !important;
}

div.infobox
{
  float: right;
  border: #ffffff 4px solid;
  display: block;
  margin: 0 0 10px 20px;
  padding: 10px;
}

div.infobox img
{
  max-width: 30vw;
}

b, strong
{
  font-weight: 900 !important;
}

div.infobox.infoboxleft
{
  float: left;
  margin: 0 20px 10px 0;
}

.p-content a
{
  color: #D0E047;
}

.p-content a:hover
{
  color: #6add46;
}





img.logo { width: 125px; margin: 10px 30px 10px 0; }

/* Turn off parallax scrolling for tablets and phones */

@media only screen and (max-device-width: 1024px)
{


  div#main
  {
    margin-top: 50px;
  }


  .bgimg
  {
    background-attachment: scroll;
    min-height: 80vw;
  }

  img.logo
  {
    width: 24vw;
    margin: 2vw 4vw 2vw 0;
  }

  .caption
  {
    top: 30%;
  }

  .p-content
  {
    padding: 4vw 8vw;
  }
}


@media (max-width: 1024px)
{

  div#header
  {
    padding: 2.5vw 1vw;
  }

  div#header img
  {
    margin-right: 2vw;
    margin-left: 2vw;
  }


  .bgimg
  {
    min-height: 50vw;
  }

  .prospekt
  {
    width: 80vw;
    display: inline-block;
    height: 44vw;
    background-size: 28vw auto;
    padding: 0 1vw 1vw 30vw;
  }
  .p-content
  {
    padding: 4vw 8vw;
  }
}




/* ########## Global Messages ########## */

div#globalMessages
{
  display: block;
  overflow: hidden;
  padding: 40px 0 0 0;
}

div#globalMessages ul
{
  display: block;
  margin: 0;
  min-height: 83px;
  padding: 20px;
  color: #000000;
  margin: 0;
  background-repeat: no-repeat;
  background-position: 15px 15px;
  background-size: 29px 23px;
}

div#globalMessages ul#Fehler
{
  background-color: #ffd2d3;
  animation: pulseFehler 6s infinite;
}

@keyframes pulseFehler
{
    0% { background-color: #ffd2d3; }
   15% { background-color: #ff999b; }
   30% { background-color: #ffd2d3; }
  100% { background-color: #ffd2d3; }
}

div#globalMessages ul#Hinweis
{
  background-color: #dbecff;
  animation: pulseHinweis 6s infinite;
}

@keyframes pulseHinweis
{
    0% { background-color: #dbecff; }
   15% { background-color: #99c9ff; }
   30% { background-color: #dbecff; }
  100% { background-color: #dbecff; }
}

div#globalMessages ul#Erfolg
{
  background-color: #d4ffcd;
  animation: pulseErfolg 6s infinite;
}

@keyframes pulseErfolg
{
    0% { background-color: #d4ffcd; }
   15% { background-color: #a7ff99; }
   30% { background-color: #d4ffcd; }
  100% { background-color: #d4ffcd; }
}

div#globalMessages ul#Warnung
{
  background-color: #fefccb;
  animation: pulseWarnung 6s infinite;
}

@keyframes pulseWarnung
{
    0% { background-color: #fefccb; }
   15% { background-color: #fcf997; }
   30% { background-color: #fefccb; }
  100% { background-color: #fefccb; }
}


div#globalMessages ul li
{
  padding: 0;
  margin: 0 0 5px 0;
  list-style: none;
  padding-left: 0;
  font-size: 16px;
}

div#globalMessages ul li a
{
  font-size: 16px;
}


div#globalMessages ul li.boxtitle
{
  font-size: 32px;
  font-family: Verdana, Tahoma, Arial;
  padding: 0;
  font-weight: bold;
}

div#globalMessages ul#Fehler li.boxtitle { color: #cc0000; }
div#globalMessages ul#Hinweis li.boxtitle { color: #2763ae; }
div#globalMessages ul#Erfolg li.boxtitle { color: #0caa00; }
div#globalMessages ul#Warnung li.boxtitle { color: #ffaf15; }