/* open-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/open-sans-v44-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v44-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/open-sans-v44-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/** {margin: 0; padding: 0;}*/
body, html {height: 100%;}
body {font-family: 'Open Sans', Verdana, sans-serif; font-size: 100%; margin: 0; position: relative;}

section {margin: 0 10%; margin-bottom: 10em;}/* CSS Document */
p, .kontakt {color: #727272;}
h1 {text-transform: uppercase; letter-spacing: 1em;}
h2, h3 {text-transform: uppercase; font-weight: 300; text-align: center;}
h2 {letter-spacing: 0.3em; color: black; font-size: 2em;}
h3 {letter-spacing: 0.5em;}
h3 {letter-spacing: 0.3em; color: #383838;}

header {position: relative; margin: 0; padding: 0;}
header h1 {position: absolute; bottom: 2em; right: 1em; color: white;}

.abstand-vor {margin-top: 4em;}

article nav ul {display: flex; flex-flow: column;}
@media screen and (min-width: 601px){
  article nav ul {flex-flow: row;}
}
/* SLIDESHOW */
.slideshow {max-width: 100%; height: 778px; display: block;}

/* HEROIMAGE*/
/* The hero image */

.hero-image {

  /* Set a specific height */
  height: 778px;

  /* Position and center the image to scale nicely on all screens */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

/* Place text in the middle of the image */
.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}
.hero-image-01 {  /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
  background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("../images/slideshow/bkg-x_01.jpg");}
.hero-image-02 {  /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
  background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("../images/slideshow/bkg-x_02.jpg");}
.hero-image-03 {  /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
  background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url("../images/slideshow/bkg-x_03.jpg");}


.kontakt {max-width: 30em; margin: 0 auto; text-align: center;}

/*
.infotxt-outer {display: flex; flex-flow: row wrap;}
.infotxt {width: 50%;}
.infotxt-h3 {margin-bottom: 2em;}
*/
.infotxt-outer {max-width: 60em; text-align: center; margin: 0 auto;}

/* STARTSEITENBILD */
.startseitenbild-kopf {width: 100%;}

.foto img {width: 30%;}

/* MENU */
nav ul {display: flex; flex-flow: row nowrap; justify-content: center;}
nav ul li {display: inline-block;}
nav a {padding: 0.5em 1em; font-size: .8em; text-decoration: none;}
nav a:visited {}
nav a:hover {background: gray; color: white;}
nav a:active {}
.nav-line-r {border-right: solid 1px lightgray;}
nav h3 {font-size: 1.17em;}

@media screen and (min-width: 900px){
    nav ul {justify-content: flex-end;}
    nav a {padding: 0.5em 2em;}
}

/* KARTE */
.karte {margin-bottom: 10em; max-width: 100%;}
#meineKarte {
  width: 100%;
  height: 400px;
}

/* GALERIE */
.bildergalerie {
  justify-content: center;
  display: flex;
  max-width: 100%;
    flex-flow: column;
    align-items: center;
}
.bildergalerie img {
  margin: 0 1em 1em 1em;
    max-width: 100%;
height: auto;
}

@media screen and (min-width: 990px){
    .bildergalerie {
        flex-flow: row wrap;
        max-width: 1200px;
        margin: 0 auto;
        }
    img {width: 40%;}
}
@media screen and (min-width: 1570px){

    img {width: 45%;}
}

/* FORMULAR */
.formular {display: flex; flex-flow: column; width: 30em; margin: 0 auto;}
label {display: flex; flex-flow: row;}
form {margin-bottom: 4em;}

/* FOOTER */
footer {text-align: center; margin: 0 0 4em 0; position: relative;}
.copyr {letter-spacing: 0.05em; font-size: 0.8em;}
a.footer-menu {letter-spacing: 0.05em; display: block; background-color: #C4C4C4; margin: 0 auto; padding: 1.5em; color: white; margin-bottom: 4em;}
.footer-menu-neu {
  width: 30%;
  display: flex;
  flex-flow: row;
  text-align: center;
  margin: 0 auto;
  background-color: #C4C4C4;
  padding: 1.5em;
  justify-content: center;
  margin-bottom: 4em;
  flex-wrap: wrap;
}
.footer-menu-neu li {padding: 0.5em;}
.footer-menu-neu a {color: white;}

/* FOOTER Text */
#mod-custom113 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
}

@media screen and (min-width: 900px){
    a.footer-menu {width: 30%; }
}

/* SLIDESHOW */
* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  width: 100%; /*max-width: 1000px;*/
    max-height: 778px;
    overflow: auto;
  position: relative;
  margin: auto;
  margin-bottom: 1.5em;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}

  /* Sponsoren */
.sponsoren {
  max-width: 100%; padding: 1em;
}
.sponsoren_bottom .bannergroup {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  background-color: #eeeeee;
}
.sponsoren_bottom .banneritem {
  margin: 1em;
}
.sponsoren_bottom img {width: 200px;}
  to {opacity: 1}
}
.bannergroup {display: flex; background: lightgray; padding: .5em; margin: 4em 10% 4em 10%; justify-content: center; flex-wrap: wrap;}
.mod-banners__item.banneritem {margin:0.5em 1em;}
.bannergroup img {width: 200px; height: auto;}

/* RETURNBUTTON */
.returnbutton {position: fixed; bottom: 1em; right: 1em; }
.returnbutton a {display: inline-block; padding: 1em; font-weight: 700; background-color: lightgray; color: white;}

/* MENÜ SCHADES GARTEN*/
.menu-schadesgarten {
  font-size: 1.17em;
  letter-spacing: .3em;
  color: #383838;
  text-transform: uppercase;
  font-weight: 300;
  text-align: center;
  display: flex;
  flex-flow: column;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  margin-bottom: 4em;
}
.menu-schadesgarten .active {background: none;}

.com-content-category-blog {margin: 0 10%;}
.com-content-category-blog .page-header, .item-content {margin-bottom: 4em;}

.page-header {
  margin: 0 10%;
  margin-bottom: 4em;
}

.headline {
  position: absolute;
  right: 2em;
  bottom: 5em;
  letter-spacing: 1em;
  text-transform: uppercase;
  color: white;
  font-size: 32px;
  font-weight: bold;
}