@media screen and (max-width: 40rem){
  
body {font-size: 13px;}


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

.menu {
    position: absolute;
    right: 10px;
    top: 10px;
    font-family: "Instrument Sans", serif;
    font-size: 15px;
    font-style: normal;
    font-variation-settings:
    "wdth" 100;
  }


.name {
    font-size: 25px;
    position: relative;
    padding-left: 2vw;
}



.slideshow-container {
  max-width: 300px;
  position: relative;
  margin: auto;
}

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

.fade {
  animation-name: fade;
  animation-duration: 2.0s;
}

@keyframes fade {
  from {opacity: .7} 
  to {opacity: 1}  
}
  
  
  
  
  

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

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


.fotos-aktuell img {
  width: 40vw;
  height: auto;
}

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

  
  
  
  
  
  

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

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

 

h2 {font-size: 16px;
     font-weight: 450;}

.intro {
   padding-right: 10vw;
   margin-top: 100px;
}


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

.corfu {grid-column: 2;
       grid-row: 2;
       align-self: center;}
.zugspitze{grid-column: 2;
          grid-row:1;
          align-self: center;}
.houses {grid-column: 1;
        grid-row:2;
        align-self: center;}
.lenny {grid-column:2;
       grid-row: 2;
       align-self: center;}
.people {grid-column: 2;
         grid-row: 3;
         align-self: center;}


  

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

.main1 img {
    width: 50vw;
    height: auto;
    padding-bottom: 30px;
    padding: 10px;
}

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




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

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


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

.zugspitze2 {grid-column:1;
           grid-row: 2;
          transform: translate(0%, -6%);}

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

.zugspitze4 {grid-column:1;
           grid-row: 4;
          transform: translate(86%)}

.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(3, 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:4vw;
   padding-right: 10vw;
   padding-bottom: 40px;
   padding-top: 10px;
}
.main5 img {
    width: 40vw;
    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); 
  padding-left:4vw;
  padding-right: 4vw;
  padding-bottom: 40px;
  padding-top: 100px;
}
.main6 img {
    width: 45vw;
    height: auto;
    padding-bottom: 30px;
}

.solarbeschreibung {
  font-weight: 101;
  line-height: 150%;
  transform: translate(4%,29%);
  padding-bottom: 10vw;
}
  
  
  
  
  
  
.main7 { 
  display: grid;
  grid-template-columns: repeat(2, 1fr); 
  padding-left:4vw;
  padding-right: 4vw;
  padding-bottom: 40px;
  padding-top: 100px;
}

.main7 img {
    padding-bottom: 30px;
}

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

  
  h3 {font-size: 22px;
     font-weight: 420;
     padding-left: 30vw}
  
.main8 { 
  display: grid;
  grid-template-columns: repeat(2, 1fr); 
  padding-left:20vw;
  padding-right: 11vw;
  padding-bottom: 50px;
  padding-top: 100px;
}

.main8 img {
    width: 50vw;
    height: auto;
    padding: 20px;
    margin-bottom: 10vw;
}

.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;
    }

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




  
  footer {
    margin-top: 170px;
    display:grid;
    grid-gap: 10px;
  }  
}