body{
  font-family: "Instrument Sans", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}


h1 {
  font-family: "Oswald", serif;
  font-weight: 700;
  font-style: normal;
  width: auto;
  height: auto;
  
}

img {
	width: 40vw;
	height: auto;
}

.menu {
    position: absolute;
    right: 20px;
    top: 23px;
}

.menu ul {
    display: flex;
}

.menu ul li {
    margin-left: 10px
}


/* Slideshow container */
.slideshow-container {
  max-width: 400px;
  position: relative;
  margin: auto;
  padding-top: 60px;
}

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

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

@keyframes fade {
  from {opacity: 0.8} 
  to {opacity: 1}
}




.aktuelles {
  margin-top: 20vw;
  margin-bottom: 20vw;
  padding-left: 4vw;
  padding-right: 4vw;
}

.aktuelles a:hover{
    text-decoration: underline;
}

.fotos-aktuell{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  padding-left:4vw;
  padding-right: 4vw;
  padding-bottom: 5vw;
  padding-top: 60px;;
}
.fotos-aktuell img {
  width: 30vw;
  height: auto;
}

.slideshow-container2 {
  max-width: 480px;
  position: relative;
  margin: auto;
}




.name {
    font-size: 58px;
    position: relative;
    padding-left: 4vw;
  display: inline;
}

.name2 {
    font-size: 58px;
    position: relative;
}

h2 {font-size: 22px;
     font-weight: 500;}


.intro {
   padding-left: 10vw;
   padding-right: 13vw;
   margin-top: 5vw;
}



.container { 
  display: grid;
  grid-template-columns: repeat(3, 1fr);  
  grid-gap: 50px;
  padding: 60px;
  margin-right: 20px;
  margin-left: 7vw;
  margin-bottom: 14vw;
  margin-top: 10vw;
 
}

.container img{
    width: 65%;
    height: auto;
    margin-bottom: 7vw;
}

.container figure {
  position: relative
}


.Oma   {grid-column: 1;
       grid-row: 1;
       align-self: center;
       position: relative;
       width: 50%;
       max-width: 300px;
}

.overlay {
  font-family: "Instrument Sans", serif;
  font-optical-sizing: auto;
  font-weight: 250;
  font-style: normal;
  font-variation-settings:
  "wdth" 100;
  position: absolute; 
  top: 50%;
  transform: translateY(-75px);
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); /* Black see-through */
  color: #f1f1f1; 
  width: 65%;
  transition: .5s ease;
  opacity:0;
  color: white;
  font-size: 10px;
  line-height: 1.2;
  padding: 20px;
  text-align: center;
}



.container figure:hover .overlay {
  opacity: 1;
}

.zugspitze  {grid-column: 2;
       grid-row: 1;
       align-self: center;
       position: relative;
       width: 50%;
       max-width: 300px;
}



.lenny   {grid-column: 3;
       grid-row: 1;
       align-self: center;
       position: relative;
       width: 50%;
       max-width: 300px;
}


.architecture   {grid-column: 1;
       grid-row: 1;
       align-self: center;
       position: relative;
       width: 50%;
       max-width: 300px;
}


.people   {grid-column: 2;
       grid-row: 2;
       align-self: center;
       position: relative;
       width: 50%;
       max-width: 300px;
}


.solar   {grid-column: 3;
       grid-row: 2;
       align-self: center;
       position: relative;
       width: 50%;
       max-width: 300px;
}


.olydorf   {grid-column: 1;
       grid-row: 3;
       align-self: center;
       position: relative;
       width: 50%;
       max-width: 300px;
}


.footer-projects{
    display:flex;
    justify-content: space-between;
    margin: 10px;
}

.footer-projects a:hover{
    text-decoration: underline;
}



.main1 { 
  display: grid;
  grid-template-columns: repeat(4, 1fr); 
  padding-left:10vw;
  padding-right: 10vw;
  padding-bottom: 50px;
  padding-top: 100px;
}

.main1 img {
   
    padding-right: 25px;
    padding-bottom: 45px;
}


.oma1 {grid-column:1;
      grid-row: 1;
      width: 20vw;
      height: auto}
.oma2 {grid-column:2;
       grid-row: 1;
      width: 20vw;
      height: auto}
.oma3 {grid-column:3;
       grid-row: 1;
      width: 20vw;
      height: auto}
.oma4 {grid-column:3;
       grid-row: 3;
      width: 20vw;
      height: auto}
.oma5 {grid-column:4;
       grid-row: 1;
      width: 20vw;
      height: auto}
.oma6 {grid-column:2;
       grid-row: 2;
      width: 20vw;
      height: auto}
.oma7 {grid-column:4;
       grid-row: 2;
      width: 20vw;
      height: auto}
.oma8 {grid-column:3;
       grid-row: 3;
      width: 20vw;
      height: auto}
.oma9 {grid-column:1;
       grid-row: 3;
      width: 20vw;
      height: auto}
.oma10 {grid-column:4;
       grid-row: 3;
       width: 20vw;
      height: auto}
.oma11 {grid-column:3 / span 2;
       grid-row: 2;
       width:40vw;
       height: auto;}
.oma12 {grid-column:2;
       grid-row: 3;
      width: 20vw;
      height: auto}
.oma13{grid-column: 1;
       grid-row: 2;
       width: 20vw;
       height: auto;}





.main2 { 
  display: grid;
  grid-template-columns: repeat(3, 1fr); 
  padding-left:10vw;
  padding-right: 10vw;
  padding-bottom: 40px;
  padding-top: 50px;
}

.main2 img {
    width: 32vw;
    height: auto;
    padding: 20px;
}

.introzugspitz {
   padding-left: 10vw;
   padding-right: 13vw;
   margin-top: 5vw;
   transform: translate(0%, 140%);
}

.zugspitze1 {grid-column:1;
           grid-row: 1;
           transform: translate(100%, 0%)}

.zugspitze2 {grid-column:1;
           grid-row: 2;}

.zugspitze3 {grid-column:2;
           grid-row: 2;}

.zugspitze4 {grid-column:1;
           grid-row: 4;}

.zugspitze5 {grid-column:1;
           grid-row: 8;}

.zugspitze6 {grid-column:1;
           grid-row: 3;}

.zugspitze8 {grid-column:1;
           grid-row: 6;}

.zugspitze9 {grid-column:1;
           grid-row: 7;}






.main3 { 
  display: grid;
  grid-template-columns: repeat(2, 1fr); 
  grid-gap: 50px;
  padding: 70px;
  margin: 20px;
 
}




.main4 { 
  display: grid;
  grid-template-columns: repeat(5, 1fr); 
  grid-gap: 20px;
  margin: 30px;
  padding-bottom: 40px;
}

.main4 img {
    width: 200px;
    height: auto;
}






.main5{
   display: grid;
   grid-template-columns: repeat(2, 1fr); 
   grid-gap: 10px;
   padding-left:10vw;
   padding-right: 10vw;
   padding-bottom: 40px;
   padding-top: 40px;
}
.main5 img {
    width: 35vw;
    height: auto;
    padding-top: 2vw;
    padding-right: 3vw;
}

.julia {grid-column: 1;
       grid-row: 1;}
.Nina4 {grid-column: 2;
       grid-row: 2;}
.musiker2 {grid-column: 1;
         grid-row: 3;}
.jasmin {grid-column: 2;
        grid-row: 4;}






.main6 { 
  display: grid;
  grid-template-columns: repeat(2, 1fr); 
  grid-gap: 10px;
  padding-left:10vw;
  padding-right: 10vw;
  padding-bottom: 40px;
  padding-top: 100px;

}

.main6 img {
    width: 35vw;
    height: auto;
    padding-bottom: 5vw;
}
.turnhalle {align-self: center;}
.agripv1 {}
.kulturhaus {align-self: center;}
.kloster {align-self: center;}
.lwg {align-self: center;}
.o.miller {align-self: center;}
.schafe {align-self: center;}
.westspitze {align-self: center;}
.gilching {align-self: center;}
.agripv2 {align-self: center;}
.lwg2 {align-self: center;}

.solarbeschreibung {
  font-weight: 101;
  line-height: 150%;
  transform: translate(0%, 45%);
}






.main7 { 
  display: grid;
  grid-template-columns: repeat(3, 1fr); 
  padding-left:10vw;
  padding-right: 10vw;
  padding-bottom: 40px;
  padding-top: 50px;
}

.main7 img {
   
    padding-right: 25px;
    padding-bottom: 45px;
}

.oly1 {grid-column: 1;
      grid-row: 1;
      width: 20vw;
      height: auto}
.oly2 {grid-column: 2;
      grid-row: 3;
      width: 20vw;
      height: auto}
.oly3 {grid-column: 2 / span 2;
      grid-row: 2;
      width: 43vw;
      height: auto}
.oly4 {grid-column: 2;
      grid-row: 4;
      width: 20vw;
      height: auto}
.oly5 {grid-column: 3;
      grid-row: 3;
      width: 20vw;
      height: auto}
.oly6 {grid-column: 3;
      grid-row: 4;
      width: 20vw;
      height: auto}
.oly7 {grid-column: 3;
      grid-row: 1;
      width: 20vw;
      height: auto}
.oly8 {grid-column: 1;
      grid-row: 3;
      width: 20vw;
      height: auto}
.oly9 {grid-column: 1;
      grid-row: 4;
     width: 20vw;
      height: auto}
.oly10 {grid-column: 1;
      grid-row: 2;
      width: 20vw;
      height: auto}
.oly11 {grid-column: 2;
       grid-row: 1;
      width: 20vw;
      height: auto}
.oly12 {grid-column: 2;
      grid-row: 5;
      width: 20vw;
      height: auto}
.oly13 {grid-column: 1;
      grid-row: 5;
      width: 20vw;
      height: auto}
.oly14 {grid-column: 2 / span 2;
      grid-row: 7;
      width: 43vw;
      height: auto}



.main8 { 
  display: grid;
  grid-template-columns: repeat(4, 1fr); 
  grid-gap: 40px;
  padding-left:13vw;
  padding-right: 11vw;
  padding-bottom: 50px;
  padding-top: 100px;
  
}

.main8 img {
    width: 32vw;
    height: auto;
    padding-bottom: 35px;
}

.kirche{grid-column: 1;
        grid-row: 1;
        text-align: center;
        transform: translate(0%, 35%);}

.kirche1 {grid-column: 2;
         grid-row: 1;
    }
.kirche2 {grid-column: 2;
         grid-row: 4;
    }
.kirche3 {grid-column: 1;
         grid-row: 2;
    }

.kirche7 {grid-column: 1;
         grid-row:3 ;
    }
.kirche8 {grid-column: 2;
         grid-row: 3;
    }

.kirche9 {grid-column: 2;
        grid-row: 6;}

.kirche10 {grid-column: 1;
        grid-row: 6;}

.kirche11 {grid-column: 1;
        grid-row: 7;}



.ichtext {
  padding-left: 50%;
  padding-right: 20px;
  margin-top: 25vw;
  margin-bottom: 400px;
}






footer{
    display:flex;
    justify-content: space-between;
    margin: 10px;
    padding-top: 15vw;
}

footer a:hover{
    text-decoration: underline;
}