html {
  background: #F1F1F1;
}

body {
  position:relative;
  font-family: Arial, Helvetica, sans-serif;
  width: 100%;
  background: white;
  margin:0 auto;
  font-size: 14px;
  color: #535353;
}

* {
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;  /* Firefox, other Gecko */
  box-sizing: border-box;    /* Opera/IE 8+ */

}

a {
  text-decoration: none;
}

body h2{
  color: #31B404;
}

header {
  width: 1100px;
  color:white;
  background: white;
  display: block;
  height: 250px;
  margin: 0 auto;
  padding: 20px;
}

header h1 a{
  position:relative;
  display:block;
  height:90px;
  
  color:black;
  margin:0 0 0 0;
  padding:25px 0 0 600px;    *Schrift neben dem Logo*
  font-size:1em;
  font-weight:normal;
  border-bottom: .0em solid white;
}

header h1 a:after {
  position:absolute;
  height:.4em;
  bottom:-1.55em;left:0;
  width:100%;
  border-top: .0em solid white;
  background:white;
  border-bottom: .0em white;
  content: "";

}

header h1 a span {
  display: block;
  font-size:0.5em;
  padding: 0 20px;
}

header a#navlink {
  display:none;
  float: right;
  text-decoration: none;
  font-size: 1.8em;
  font-weight: bold;
  margin:-150px 20px 0 0;
}


/** CONTENT **/
main{
  display:block;
  overflow:hidden;
  width:1100px;
  margin: -21px auto 30px;
  position:relative;
  padding:0 20px 0;
  background-color:#FFFFFF;
  margin-top: -100px;
}

.gallery{
  color:#FFFFFF;
  padding-left;-2%;
  font-family:Arial, Helvetica, sans-serif;
  height: 550px;
}

  /* slide in captions found @http://css-tricks.com/slide-in-image-captions/ */
.gallery figure {
  width:100%;
  padding:0;margin:0; /*Haupseitenbild Verschieben */
  display: inline-block;
  position: absolute;     /* relative */
  overflow: hidden;
  animation: wechseln 30s infinite;
}

.gallery figure:nth-of-type(2) {
  animation-delay: 6s;
  opacity: 0;
}

.gallery figure:nth-of-type(3) {
  animation-delay: 12s;
  opacity: 0;
}
.gallery figure:nth-of-type(4) {
  animation-delay: 18s;
  opacity: 0
}
.gallery figure:nth-of-type(5) {
  animation-delay: 24s;
  opacity: 0
}



.gallery figure:before {
  content: "?";
  position: absolute;
  background: rgba(255,255,255,0.75);
  color: black;
  width: 24px;
  height: 24px;
  bottom:30px; left:30px;
  -webkit-border-radius: 12px;
  border-radius:    12px;
  text-align: center;
  font-size: 14px;
  line-height: 24px;
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  transition: all 0.6s ease;
  opacity: 0.75;

}
.gallery: figure:before {
  opacity: 0;
}

.gallery figure figcaption{
  position: absolute;
  background: rgba(0,0,0,0.75);
  color: white;
  padding: 10px 20px;
  width:100%;
  opacity: 0;
  bottom:-20%;
  left: 0;
  -webkit-transition: all 0.6s ease;
  -moz-transition:  all 0.6s ease;
  -o-transition:   all 0.6s ease;
  transition: all 0.6s ease;
}

.gallery:hover figcaption {
  opacity: 1;
  bottom: 0;
}

/*Animiert man nun beispielsweise 10 Bilder, beträgt der Versatz zwischen den Bildern d=100/10=10% der Zykluslänge. 3/5 von 10% sind 6%.
@keyframes wechseln {
    0% {opacity: 0;}
    6% {opacity: 1;}
   12% {opacity: 1;}
   18% {opacity: 0;}
  100% {opacity: 0;}
} */
@keyframes wechseln {
    0% {opacity: 0;}
   12% {opacity: 1;}
   24% {opacity: 1;}
   36% {opacity: 0;}
  100% {opacity: 0;}
}

article{
  background: #fff;
  padding: 30px;
  width: 100%;

}

article table#Preis{
  width: auto;
  border: none;
  padding: 0px;
  border-spacing: 10px;

}

article table#Adresse tr td{
  width: auto;
  border: none;
  padding: 0px;
  border-spacing: 10px;
  line-height: 1.6em;

}
article table#Adresse tr td{
  vertical-align: top;
}

section.services{
  float:left;
  width:33%;
  padding: 0 2%;
}

section.services h1{
  /*padding-left:30px;
  background: url('../img/Einkaufswagen.png') no-repeat left center;   */
}

section.services h2{
  color: #b70718;
}

section.services p{
  font-size:.9em;
  border-bottom: 1px dashed #535353;
}

a.rot{
    color: #31B404;
}
a.rot:hover  {
  color: #818181;
  text-decoration: none;
}
a.dunkel{
    color: #535353;
}
a.dunkel:hover  {
  color: #818181;
  text-decoration: none;
}


section.spalte {
  width: 50%;
  padding:10px 2%;
  float: left;

}


p {
  text-align: justify;
  line-height: 1.6em;
  padding: 20px 0px
}

a  {
  color:#1D1D1D;
  outline: none;
}
}
a:hover  {
  color: #818181;
  text-decoration: none;
}
a:focus  {
  outline: none;
}


/* Navigation - absolut platziert - bei geringerer screen-width über media-queries relative unten */

nav{
  position:fixed;
  top:0px;
  width:100%;
  padding-left: 50%;  /*zentriert*/
  background-color:#31B404;
}

nav ul{
  list-style-type: none;
  background-color:#31B404;
  margin: 0 0 0 -520px; /*Abstand Mitte bis Beginn Menü*/

  padding-top: 0;

  padding-right: 0;

  padding-bottom: 3px;

  padding-left: 10px;

  font: 1.3em  Arial, Helvetica, sans-serif;
}

nav ul:after{
    clear: both;
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
}

nav ul li{
  float:left;
  background-color:#31B404;
}

#flag:after{
  content:" ";
}
#flag:hover:after{
  content:" ";
}

nav ul li a{
  display:block;
  text-decoration: none;
  color: white;
  padding:.5em 2em 0 0;
  text-align:right;
  float:left;
}
nav ul li a:hover{
  text-decoration: none;
}

nav ul li a:after{
  content:"â–¶";
  color: white;
  display:inline-block;
  width:2em;
}

nav ul li a:visited{
  color: white;
}

nav ul li a:hover:after{
  content:"â–¼";
  width:2em;
}

nav ul li:hover > ul{
   visibility:visible;
}

nav ul li ul{
    display: block;
    visibility:hidden;
    position: absolute;
    margin: 32px 0 0 0;
    padding:0 0 5px 12px;
    font: 1.0em  Arial, Helvetica, sans-serif;      /*Schriftgröße Untermenü*/
}

nav ul li ul li{
  display: block;
  margin: 0;
  float:none;
}

nav ul li ul li a{
  color: white;
  float: left;
  text-align:right;
  padding:.5em 0em 0 0;
  display:inline-block;
}

nav ul li ul li a:hover{
  text-decoration: underline;
}

nav ul li ul li a:visited{
  color: white;
}

nav ul li ul li a:after{
  content:"â–¶";
  color:white;
  display:inline-block;
  width:2em;
}

nav ul li ul li a:hover:after{
  content:"â–¼";
  width:2em;
}


footer {
  clear:both;
  display:block;
  width:1200px;
  padding: 20px 100px;
  margin: 0 auto;
  height:300px;

  background-color: #313030;

  color:white;
}


footer section {
  float:left;
  width:33.3%;
}
footer table{
  font-family: Arial, Helvetica, sans-serif;
  width:100%;
  font-size: 0.8em;
  border: 0px;
  cellpadding: 2px;
  cellspacing: 3px;

}
footer h2{
  font-size:1em;
  color:white;
}
footer p{
  font-size: 0.8em;
  font-family: Arial, Helvetica, sans-serif;
}
footer a{
  color:#BEF781;
}


@media screen and (orientation: portrait) {    /* mobil  */
body{width:100%;}

header,main, footer {width:1100px;}

body {
  font-size: 25px;
}

.gallery figure:before {
  content: none;
}

.gallery:hover figcaption, .gallery:active figcaption{
  opacity: 1;
  bottom: 0;
}

section.services{
  float:left;
  width:100%;
  padding: 0 2%;
}

section.services h1{
  padding-left:0px;
  background: none;
}

header {
  width: 1100px;
  color:white;
  background: white;
  display: block;
  height: 200px;
  margin-top: 50px;
  padding-top: 2px;
  padding-right: 15px;
}

header h1 a{
  position:relative;
  display:block;
  height:100px;
  background: url('../img/logo.jpg') no-repeat left top;
  color: white;
}


header h1 a:after {
  visibility: hidden;
  content: none;
}

header h1 a span {
  visibility: hidden;
}

header a#navlink {
visibility: hidden;
}


footer {
  height:1100px;
  background-color: #313030;
  font-size: 1em;
}

footer section {
  float:left;
  width:100%;
  background-color: #313030;
}
footer table{
  line-height: 1.6em;

}

nav ul{
  margin: 0 0 0 -520px; /*Abstand Mitte bis Beginn Menü*/
  font: 25px  Arial, Helvetica, sans-serif;
}
nav ul li:hover, nav ul li:active  > ul{
   visibility:visible;
}

nav ul li ul{
    margin: 48px 0 0 0;
    padding:0 0 5px 12px;
    font: 25px  Arial, Helvetica, sans-serif;      /*Schriftgröße Untermenü*/
}

}