@font-face {
  font-family: Caviar;
  src: url(CaviarBold.ttf);
}

html,
body {
  margin: 0;
  padding: 0;
}

a,
a:visited {
  color: #000;
  text-decoration: none;
}

#bg-pic {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;

  z-index: -1;
  /* Set up proportionate scaling */
  width: 100%;
  height: auto;

  /* Set up positioning */
  position: absolute;
  top: 0;
  left: 0;
}

.centered {
  display: block;
  margin: 0 auto;
  text-align: center;
}

#main-container {
  width: 60%;
  height: 100%;
  box-shadow: 0px 0px 20px #333;
  margin: 0 auto;
  background-color: #fff;
}

#header-section img {
  width: 100%;
}

#nav {
  margin-top: -5px;
}

#nav ul {
  margin: 0;
  padding: 0;
  border-bottom: 4px solid #6ba23a;
  white-space: nowrap;
  display: flex;
}

#nav ul li {
  display: inline-block;
  flex: 1;
  text-align: center;
  font-family: Caviar, sans-serif;
  border-right: 1px solid #6d979f;

  /* Background */
  background: rgb(216, 255, 177);
  /* Old browsers */
  background: -moz-linear-gradient(top, rgba(216, 255, 177, 1) 0%, rgba(253, 255, 213, 1) 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(216, 255, 177, 1)), color-stop(100%, rgba(253, 255, 213, 1)));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(216, 255, 177, 1) 0%, rgba(253, 255, 213, 1) 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(216, 255, 177, 1) 0%, rgba(253, 255, 213, 1) 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, rgba(216, 255, 177, 1) 0%, rgba(253, 255, 213, 1) 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, rgba(216, 255, 177, 1) 0%, rgba(253, 255, 213, 1) 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d8ffb1', endColorstr='#fdffd5', GradientType=0);
  /* IE6-9 */
}

#nav ul li:hover {
  background: rgb(107, 162, 58);
  /* Old browsers */
  background: -moz-linear-gradient(top, rgba(107, 162, 58, 1) 0%, rgba(253, 255, 213, 1) 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(107, 162, 58, 1)), color-stop(100%, rgba(253, 255, 213, 1)));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(107, 162, 58, 1) 0%, rgba(253, 255, 213, 1) 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(107, 162, 58, 1) 0%, rgba(253, 255, 213, 1) 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, rgba(107, 162, 58, 1) 0%, rgba(253, 255, 213, 1) 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, rgba(107, 162, 58, 1) 0%, rgba(253, 255, 213, 1) 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6ba23a', endColorstr='#fdffd5', GradientType=0);
  /* IE6-9 */
}

video {
  margin: 10px auto;
  display: block;
  width: 70%;
}

#nav ul li.last {
  border-right: none;
}

#nav ul li a {
  padding-top: 12px;
  padding-bottom: 12px;
  display: block;
}

.shadow-down {
  height: 15px;
  margin-bottom: 20px;
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.36) 0%, rgba(0, 0, 0, 0) 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.36)), color-stop(100%, rgba(0, 0, 0, 0)));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.36) 0%, rgba(0, 0, 0, 0) 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(0, 0, 0, 0.36) 0%, rgba(0, 0, 0, 0) 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.36) 0%, rgba(0, 0, 0, 0) 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.36) 0%, rgba(0, 0, 0, 0) 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5c000000', endColorstr='#00000000', GradientType=0);
  /* IE6-9 */
}

h1 {
  font-family: Caviar, sans-serif;
  font-size: 30px;
  padding-left: 17px;
  margin-bottom: 5px;
}

h2 {
  font-family: Caviar, sans-serif;
  padding-left: 17px;
}

table {
  font-family: sans-serif;
  margin: 0 auto;
  width: 60%;
  box-shadow: 4px 4px 20px #333;
  margin-bottom: 30px;
}

table th {
  background-color: #d8ffb1;
  padding: 8px;
  font-size: 20px;
  border-top: 1px solid grey;
  border-right: 1px solid grey;
  border-left: 1px solid grey;
}

table td {
  padding: 8px;
  border: 1px solid grey;
  font-weight: bold;
}

table tr.openings td {
  background-color: #6ba23a
}

.green-bar {
  margin-bottom: 35px;
}

.greenbar {
  height: 10px;
  background-color: #6ba23a;
  width: 55%;
  float: left;
}

.greengrad {
  background: -moz-linear-gradient(left, rgba(107, 162, 58, 1) 0%, rgba(0, 0, 0, 0) 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(107, 162, 58, 1)), color-stop(100%, rgba(0, 0, 0, 0)));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left, rgba(107, 162, 58, 1) 0%, rgba(0, 0, 0, 0) 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left, rgba(107, 162, 58, 1) 0%, rgba(0, 0, 0, 0) 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(left, rgba(107, 162, 58, 1) 0%, rgba(0, 0, 0, 0) 100%);
  /* IE10+ */
  background: linear-gradient(to right, rgba(107, 162, 58, 1) 0%, rgba(0, 0, 0, 0) 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6ba23a', endColorstr='#00000000', GradientType=1);
  /* IE6-9 */
  height: 10px;
  width: 23%;
  float: left;
}

ul {
  padding-left: 50px;
}

ul li {
  font-family: sans-serif;
}

p.textblock {
  padding-left: 50px;
  padding-right: 50px;
  text-align: justify;
  font-family: sans-serif;
}

.gallery-container {
  width: 100%;
  height: 300px;
  background-color: rgba(0, 0, 0, 0.5);
  margin-bottom: 30px;
}

.impressum {
  text-align: center;
  margin-top: 40px;
  padding-bottom: 10px;
  font-family: sans-serif;
  font-size: 10px;
}

#eyecatcher {
  position: absolute;
  width: 80px;
  text-align: center;
  padding: 10px;
  background-color: #f33;
  border-radius: 100%;
  color: white;
  font-family: sans-serif;
  font-weight: bold;
  border: 7px solid white;
  height: 70px;
  padding-top: 20px;
  text-shadow: 1px 1px #333;
  font-size: 25px;
  box-shadow: 5px 5px 10px #333;
  -webkit-transform: rotate(-20deg);
  transform: rotate(-20deg);
  top: 30px;
  left: 50%;
  margin-left: -36%;
}

.open-times {
  position: fixed;
  top: 20px;
  right: 0;
  width: 10%;
  background-color: rgba(0, 0, 0, 0.38);
  padding: 50px 30px 30px 30px;
  color: white;
  font-family: sans-serif;
  box-shadow: -3px 3px 10px black;
  min-width: 123px;
}

.open_laden {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  background-color: #6ba23a;
  padding-top: 5px;
  padding-bottom: 5px;
  text-align: center;
  cursor: pointer;
}

.open_laden:hover,
.open_garten:hover {
  font-weight: bold;
}

.open_garten {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  text-align: center;
  padding-top: 5px;
  padding-bottom: 5px;
  background-color: #aaa;
  cursor: pointer;
}

.times.garten {
  display: none;
}

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

  /* Specific to this particular image */
  #bg-pic {
    left: 50%;
    margin-left: -512px;
    /* 50% */
  }
}

@media screen and (max-width: 1040px) {

  /* Specific to this particular image */
  #main-container {
    width: 75%;
  }

  #eyecatcher,
  .open-times {
    display: none;
  }
}

@media screen and (max-width: 550px) {

  /* Specific to this particular image */
  #main-container {
    width: 100%;
  }

  #eyecatcher,
  .open-times {
    display: none;
  }

  #nav ul li {
    font-family: sans-serif;
    font-size: 10px;
  }
}

img.centered {
  max-width: 80%;
}

#slider3_container img {
  object-fit: contain;
}