@charset "utf-8";

@font-face {
  font-family: 'GeoSansLight';
  src:  url('GeosansLight.woff') format('woff');
}


body {
    background-color: #414141;
	color: #f5f5f5;
	font-family: 'GeoSansLight';
	font-size: 5vh;
	line-height: 1.6;
  /*  padding-left: 22vw;
    padding-right: 22vw;*/
}
.pfeilrunter {
    width: 1px;
    height: 15vh;
    display: block;
    margin: auto;
	background-color: #f5f5f5;
    
}
.footerlink {
    padding-left: 2vh;
    padding-right: 0vh;
}
#oberster {
       border-top: 1px solid #f5f5f5;
    padding-top: 8vh;
}
.nurmobil {
	display: none;
}
#upcoming {
	scroll-margin-top: 20vh;
}
.pfeilspitze {
	font-size: 3vh;
	font-family: 'GeoSansLight';
	margin-top: -2vh;
	padding-bottom: 2vh;

}
#pfeil2 {
    width: 3vw;
    height: auto;
    margin: auto;
	transform: rotate(90deg);
    
}
#subline {
    font-family: 'GeoSansLight';
    font-size: 25px;
}

.oben {
    width: 56vw;
    text-align: right;
    font-size: 20px;
    position: -webkit-sticky; /* Safari & IE */
	position: sticky;
	top: 2vh;
	font-family: 'GeoSansLight';
	z-index: 9000;
    margin: auto;
}
.an {
    display: inline;
}
.aus {
    display: inline;
    opacity: 0.3;
        transition: all 0.3s ease-in-out;
}
a {
    color: #f5f5f5;
    text-decoration: none;
}
a:hover {
    text-decoration: none;
}

#header {
	font-size: 10vh;
	line-height: 1.1;
	background-color: #414141;
  text-align: center; 
	position: sticky;
	top: 0vh;
    width: 56vw;
    font-family: 'GeoSansLight';
    height: 40vh;
    transition: 0.5s;
	z-index: 100;
	border-bottom: 1px solid #f5f5f5;
	padding-top: 1px;
    margin: auto;
}
#headeraufseite {
	font-size: 7vh;
	line-height: 1.1;
	background-color: #b9b69a;
  text-align: center; 
	position: sticky;
	top: 0vh;
    width: 56vw;
    font-family: 'GeoSansLight';
    height: 30vh;
    transition: 0.5s;
	z-index: 100;
	border-bottom: 1px solid #f5f5f5;
	padding-top: 1px;
}

#subheader {
	width: 56vw;
	height: 40vh;
	text-align: center;
		margin-bottom: 10vh;
    margin: auto;
}
#footer {
    font-size: 3vh;
  text-align: center;
    position: relative;
    padding-top: 3vh;
    border-top: 1px solid #f5f5f5;
    width: 56vw;
	z-index: 9001;
    margin: auto;
}
.blaulila {
    width: 46vw;
    height: auto;
	margin: auto;
	border-top: 1px solid #f5f5f5;
	border-bottom: 1px solid #f5f5f5;
    margin-bottom: 8vh;
	margin-top: 8vh;
        padding-bottom: 8vh;
	padding-top: 8vh;
    display: flex;
    justify-content: center;
    align-items: center;
   transition: all .5s ease-in-out;
}
.nichtblaulila {
    width: 46vw;
    height: auto;
	margin: auto;
	border-top: 1px solid #f5f5f5;
	border-bottom: 1px solid #f5f5f5;
    margin-bottom: 8vh;
	margin-top: 8vh;
        padding-bottom: 8vh;
	padding-top: 8vh;
        display: flex;
    justify-content: center;
    align-items: center;
   transition: all .5s ease-in-out;
}
.blaulila:hover {
     filter: brightness(1.07);
}
.zweigeteilt {
    width: 46vw;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
     transition: all .5s ease-in-out;
   margin: auto;
    margin-bottom: 8vh;
	margin-top: 8vh;
}
.nichtzweigeteilt {
    width: 46vw;
    height: auto;
     display: flex;
    justify-content: center;
    align-items: center;
     transition: all .5s ease-in-out;
   margin: auto;
    margin-bottom: 8vh;
	margin-top: 8vh;
}
.zweigeteilt:hover {
      filter: brightness(1.07);
}

.bild {
    height:20vw;;
    width: 20vw;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
	border: 1px solid #f5f5f5;

}

.bild img {
    height: 25vw;
    width: auto;
}
#hochkant {
    height: 35vw;
    width: auto;
    margin-top: 10vw;
}
#hochkant2 {
    height: 50vw;
    width: auto;
    margin-top: 10vw;
}
.bildinhalt {
    width: 25vw;
    height: auto;
     filter: grayscale(100%);
      transition: all 1s ease-in-out;
    z-index: 1;
}
.bildinhalt:hover {
    filter: grayscale(0%);
}
.text {
    height: 25vw;
    width: 25vw;
     display: block;
    justify-content: center;
    align-items: center;
}
.textlilablau {
	font-family: 'GeoSansLight';
    text-align: center;
    margin: auto;
    font-size: 4.2vh;
}
.texteierschale {
    text-align: center;
    margin: auto;
    font-size: 2.4vh;
    color: #f5f5f5;
}
.artikelheadline {
    text-align: center;
	font-family: 'GeoSansLight';
    margin: auto;
    font-size: 35px;
    color: #f5f5f5;
}
.headline {
    font-size: 5vh;
  text-align: center;
    position: relative;
    width: 46vw;
	margin: auto;
	border-bottom: 1px solid #f5f5f5;
}
.artikelbild {
     width: 50vw;
    margin-bottom: 3vw;
text-align: right; 
}
.artikelbild img {
      filter: grayscale(100%);
    width: 35%;
    height: auto;
}
.portrait {
   width: 46vw;
	margin: auto;
    margin-bottom: 3vw;
    text-align: center;
	padding-top: 2vh;
}
.portrait img {
    width: auto;
    height: 40vh;
}
.credit {
    font-size: 1.5vh;
    text-align: right;
}
            .palma {
     width: 50vw;
 height: auto;
                text-align: right;
}
      .palma img {
    width: 90%;
    height: auto;
}
          .apoll {
     width: 50vw;
 height: auto;
                text-align: right;
}
      .apoll img {
    height: 40vh;
 width: auto;
}
.palmabild {
        filter: grayscale(100%);
          transition: all 1s ease-in-out;
}
.palmabild:hover {
    filter: grayscale(0%);
}  
.welthuldigtapoll {
        filter: grayscale(100%);
          transition: all 1s ease-in-out;
    padding-left: 3vw;
}
.welthuldigtapoll:hover {
    filter: grayscale(0%);
}  
.artikel {
     width: 46vw;
	margin: auto;
    margin-bottom: 3vw;
text-align: center;
    font-size: 4vh;
}
.socialicon {
    width: 5vh;
    height: auto;
	padding-right: 2vh;
    padding-top: 3vh;
}
* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  position: relative;
  margin: auto;
}

/* 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: #f5f5f5;
  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: -5vh;
  border-radius: 3px 0 0 3px;
}
.prev {
    left: -5vh;
}

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

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

/* Number text (1/3 etc) */
.numbertext {
  color: #f5f5f5;
  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: #666666;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

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

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

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}
@media only screen
  and (max-width: 900px) and (orientation: portrait)  {
	  body {
	/*  padding-left: 10vw;
		  padding-right: 10vw;*/
		  text-align: center;
          width: 99%;
          overflow-y: hidden;
          margin: 0;
	  }
	  .nurmobil {
	display: inherit;
}
      .footerlink {
    padding-left: 1vh;
          padding-right: 1vh;
}
	    .pfeilrunter {
    width: 1px;
			height: 6vh;
			}
	  #header {
		  width: 100vw;
	  }
	  #headeraufseite {
		  width: 80vw;
	  }
	  #subheader {
	width: 80vw;
	text-align: center;
}
	  #subline {
		  font-size: 5vw;
	  }
	  .oben {
	width: 100vw;
	height: 7vh;
	text-align: center;
	position: fixed;
        top: 93%;
	font-family: 'GeoSansLight';
	background-color: #414141;
		  border-top: 1px solid #f5f5f5;
		  z-index: 9001;
          margin: auto;
	  }
      .blaulila {
        width: 80vw; 
   height: auto;
                padding-top: 5vh;
                padding-bottom: 5vh;
 display: block;
      }
        .nichtblaulila {
        width: 80vw; 
            height: auto;
           padding-top: 5vh;
           padding-bottom: 5vh;
             display: flex;
    justify-content: center;
    align-items: center;
      }
      .textlilablau {
    text-align: center;
    margin: auto;
    font-size: 7vw;
}
	  .artikelheadline {
		  font-size: 7vw;
	  }
      .texteierschale {
    text-align: center;
    margin: auto;
		  line-height: 1.2;
    font-size: 5vw;
    color: #f5f5f5;
}
      .zweigeteilt {
          width: 80vw; 
	height: auto;
                padding-top: 5vh;
                padding-bottom: 5vh;
           display: block;
      }
            .nichtzweigeteilt {
          width: 80vw; 
		height: auto;
                padding-top: 5vh;
                padding-bottom: 5vh;
                 display: flex;
    justify-content: center;
    align-items: center;
      }
      .bild {
          width: 80vw;
          min-height: 40vw;
		  max-height: 30vh;
      }
    
      .bild img {
          height: 80vw;
          width: auto;
          margin: auto;
      }
      #hochkant {
          height: auto;
          width: 80vw;
          margin-top: 0;
      }
       #hochkant2 {
          height: 80vw;
          width: auto;
          margin-top: 0;
      }
      .bildinhalt {
   height: auto;
    width: 80vw;
}
      .text {
          width: 80vw;
           height: 20vh;
      }
    
      #footer {
    font-size: 2.5vh;
  text-align: center;
    position: relative;
		  height: 10vh;
		  padding-bottom: 25vh;
           width: 80vw;
		  z-index: 2;
      }
    .headline {
    font-size: 4vh;
    width: 80vw;
        margin-top: 8vh;
}
.artikelbild {
     width: 80vw;
 height: auto;
}
      .artikelbild img {
    width: 90%;
    height: auto;
}
      .portrait {
     width: 80vw;
 height: auto;
}
      .portrait img {
    width: 90%;
    height: auto;
}
            .palma {
     width: 75vw;
 height: auto;
}
      .palma img {
    width: 100%;
    height: auto;
}
             .apoll {
     width: 75vw;
 height: auto;
   
}
      .apoll img {
    width: 60vw;
          height: auto;
          padding-bottom: 2vh;
}
.artikel {
     width: 70vw;
	margin: auto;
    margin-bottom: 3vw;
    font-size: 4vw;
}
      .socialicon {
          padding-left: 1vh;
		   padding-right: 1vh;
          padding-top: 1vh;
		  width: 6vh;
    height: auto;
      }
}
@media only screen
  and (max-width: 900px) and (orientation: landscape)  {
	   body {
		/*  padding-left: 10vw;
		  padding-right: 10vw;*/
		  text-align: center;
           
	  }
      #oberster {
          margin-top: 10vw;
      }
	  .nurmobil {
	display: inherit;
}
         .footerlink {
    padding-left: 1vh;
          padding-right: 1vh;
}
	  #header {
		  width: 80vw;
	  }
	  .oben {
		  width: 100vw;
	  }
	  #subline {
		  font-size: 3vw;
	  }
	  .pfeilrunter {
    width: 1px;
    height: 6vh;
          padding-bottom: 3vh;
    display: block;
    margin: auto;
	background-color: #f5f5f5;
    
}
      .portrait img {
          width: 50vw;
          height: auto;
      }
	  .artikel {
     width: 70vw;
	margin: auto;
		 }
	  .headline {
		  width: 70vw;
		  margin: auto;
	  }
	  .texteierschale {
		  font-size: 2.7vw;
	  }
	  .blaulila {
	 display: flex;
    justify-content: center;
    align-items: center;
		  width: 70vw;
          height: auto;
                       padding-top: 5vh;
                padding-bottom: 5vh;
		  margin: auto;
	  }
      .nichtblaulila {
		  width: 70vw;
          height: auto;
                       padding-top: 5vh;
                padding-bottom: 5vh;
		  margin: auto;
          display: flex;
  justify-content: center;
  align-items: center;
	  }
	   .zweigeteilt {
          width: 70vw; 
		height: auto;
                        padding-top: 5vh;
                padding-bottom: 5vh;
 display: flex;
    justify-content: center;
    align-items: center;
		   margin: auto;
      }
        .nichtzweigeteilt {
          width: 70vw; 
                         padding-top: 5vh;
                padding-bottom: 5vh;
             display: flex;
    justify-content: center;
    align-items: center;
		height: auto;
		   margin: auto;
      }
	      .bild {
          width: 50vw;
          min-height: 30vh;
		  max-height: 40vh;
			  margin: auto;
      }
    
      .bild img {
          height: 70vw;
          width: auto;
          margin: auto;
      }
      #hochkant {
          height: auto;
          width: 70vw;
          margin-top: 0;
      }
       #hochkant2 {
          height: 70vw;
          width: auto;
          margin-top: 0;
      }
      .bildinhalt {
   height: auto;
    width: 70vw;
          margin: auto;
}
      .text {
          width: 70vw;
           height: 20vh;
      }
    
	  .textlilablau {
		  font-size: 4vw;
	  }
	   .artikelheadline {
		  font-size: 3vw;
	  }
	    #subheader {
	width: 80vw;
	text-align: center;
			margin-top: -12vh;
			padding-top: 5vh;
            padding-bottom: 10vh;
}
	      #footer {
    font-size: 2.5vw;
  text-align: center;
    position: relative;
		  height: 20vh;
           width: 70vw;
		  margin: auto;
              margin-bottom: 8vh;
      }
	    .socialicon {
          padding-left: 2vh;
		   padding-right: 2vh;
          padding-top: 2vh;
		  width: 10vh;
    height: auto;
      }
}