*{
    margin: 0;
    padding: 0;
}
body{
    background-image: url('pictures/Hintergrund3.jpeg');
    background-position: center;
    background-size: fill;
    background-repeat: no-repeat;
    font-family: 'Open Sans', sans-serif; 
    padding-left: 100px;
    padding-right: 100px;
}

.image-container {
    background-color: rgb(4, 68, 8);
    padding: 20px;
    border-radius: 10px;
    float: left;
}


.header-image {
    float: left;
    margin-right: 10px;
    width: 30%;
    height: auto;
    border-radius: 10px;
}

.header1-image {
    float: left;
    margin-right: 10px;
    width: 60%;
    height: auto;
    border-radius: 10px;


}
.Headline1{
    color: white;
    font-style: oblique;
    font-weight: 400;
    font-variant:unset;
}
.Headline2{
    color: white;
    font-style: oblique;
    font-weight: 400;
    font-variant:unset;

}
.headline{
    background-color: green;
    padding: 16px;
    border-radius: 10px;
}
button{
    background: transparent;
    border: none !important;
    font-size: 32px;
}

.navbar{
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 8px;
}
.navbar2{
   display: flex;
   justify-content: space-between;
   align-items: center;
   
}


a {
    color: white;
    text-decoration: none;
    margin-right: 16px;
    margin-left: 16px;
    font-weight: 600;
    background-color: rgb(0, 37, 0);
    padding: 16px;
    border-radius: 10px
}

c{
    color: white;
    text-decoration: none;
    margin-left: 16px;
    font-weight: 600;
    background-color: rgb(0, 37, 0);
    padding: 16px;
    border-radius: 10px

}

.maintext{
   color: white;
   font-size: 50px;
   font-family: sans-serif;
   font-style: normal;
}
.maintext2{
   color: white;
   font-size: large;
   font-family: sans-serif;
   font-style: normal;
}

a:hover{
    background-color: rgb(25, 158, 7);
}





.dropbtn {
    background-color: rgb(0, 37, 0);
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    border-radius: 10px;
    
  }
  
  /* The container <div> - needed to position the dropdown content */
  .dropdown {
    position: relative;
    display: inline-block;
    padding: 16px;
    
  }
  
  /* Dropdown Content (Hidden by Default) */
  .dropdown-content {
    display: none;
    position: absolute;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(11, 180, 5, 0.2);
    z-index: 1;
  }
  
  /* Links inside the dropdown */
  .dropdown-content a {
    color: rgb(255, 255, 255);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  
  /* Change color of dropdown links on hover */
  .dropdown-content a:hover {background-color: rgb(25, 158, 7);}
  
  /* Show the dropdown menu on hover */
  .dropdown:hover .dropdown-content {display: block;}
  
  /* Change the background color of the dropdown button when the dropdown content is shown */
  .dropdown:hover .dropbtn {background-color: #3e8e41;}

  li {
	display: block;	
	list-style-type: none;
	width: 45%;
}

img {
	padding: 0;
	margin: 0;	
	width: 150%;  /* Bild passt sich an verfügbaren Raum im li an */
}

button {
  padding: 0.1em;
}

     /* Large screens */
@media all and (min-width: 35em) {
	li {
		width: 10em;
	}

	button:focus, 
	button:hover {
		background: #09c;
	}
}

/* Für die Gallerie */

/*CONTAINER*/
#container {
    position: absolute;
    width:900px;
    height:1000px;
    background:rgb(4, 68, 8);
    border:10px solid green;
    margin:3em auto;
    font-family:verdana, arial, sans-serif;
    font-size:0.95em;
}

#container a.pics {
   float:left;
   display:inline;
   padding:8px 8px;
   color:#000;
   text-decoration:none;
   cursor:default;
}

#container a.pics img.thumb {
   display:block;
   border:1px solid #000;
   width:74px;
   height:auto;
}

#container a.pics span {
   display:none;
   text-align:center;
}

/* HOVER ÜBER DEM BILD*/
#container a.pics span img {
   margin: 150px;
   width: 500px;
   height: auto;
   border:none;
}

#container a.pics:hover {
   white-space:normal;     /* IE */
}

#container a.pics:hover img.thumb {
   border:1px solid #fff;
}

/* Position des gehoverten Bildes*/
#container a.pics:hover span {
   display:block;
   position:absolute;
   z-index:15;
	left: 40px;
   height:450px;
}

#container a.pics:focus {
   outline:0;
}

#container a.pics:focus img.thumb {
   border:5px solid #fc0
}

#container a.pics:focus span {
   display:block;
   position:absolute;
   left:200px; 
   top:150px;
   z-index:10;
   outline:10;
   height:450px;
   border: 10px whitesmoke;
   border-radius: 10px ;
   
}

#container span.info {
   clear:left;
   display:block;
   line-height:20px;
   margin: 100px;
   padding:250px 0 0 0;
   width:647px;
   text-align:center;
   color:rgb(7, 172, 62);
   z-index:1;
}
#container span.info a {
   color:#000;
}

#container span.info a:hover {
   text-decoration:none;
}

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

   body{
      background-image: url('pictures/Hintergrund3.jpeg');
      background-position: center;
      background-size: fill;
      background-repeat: repeat;
      font-family: 'Open Sans', sans-serif; 
      padding-left: 20px;
      padding-right: 20px;
  }


   a {
      color: white;
      text-decoration: none;
      margin: 16px;
      font-weight: 600;
      background-color: rgb(0, 37, 0);
      padding: 8px;
      border-radius: 10px
  }

  b {
   color: white;
   text-decoration: none;
   margin: 16px;
   font-weight: 600;
   background-color: rgb(0, 37, 0);
   padding: 8px;
   border-radius: 10px
}


  
  c{
      color: white;
      text-decoration: none;
      margin-left: 16px;
      font-weight: 600;
      background-color: rgb(0, 37, 0);
      padding: 8px;
      border-radius: 10px
  
  }

  .image-container{
   background-color: rgb(4, 68, 8);
      padding: 10px;
      border-radius: 10px;
      float: left;
      margin-right: 50px;
      margin-top: -35px;
}
 .image-container2{
      background-color: rgb(4, 68, 8);
      padding: 10px;
      border-radius: 10px;
      float: left;
      margin-right: 50px;
  }
  .header-image {
      float: left;
      margin-left: 12px;
      width: 30%;
      height: auto;
      border-radius: 10px;
      margin-right: 50px;
  
  }
  .Headline1{
      color: white;
      font-style: oblique;
      font-weight: 400;
      font-variant:unset;
  }
  .Headline2{
      color: white;
      font-style: oblique;
      font-weight: 400;
      font-variant:unset;
  
  }
  .headline{
      background-color: green;
      padding: 16px;
      border-radius: 10px;
      margin-right: 50px;
  }
  button{
      background: transparent;
      border: none !important;
      font-size: 32px;
  }
  
  .navbar{
      display: grid;
      margin: 0px;
      justify-content: space-between;
      align-items: center;
  }
  .navbar2{
      margin-right: 8px;
      margin-left: 0px;
      display:flex;
      justify-content: space-around;
      align-items: center;
      padding: 8px;
      border: none;
      border-radius: 10px
   }
.dropdown {
      position:static;
      display: inline-block;
      padding: 100px;
	  margin: 0px;
    }

   @media screen and (max-width: 785px){
      .navbar{
         margin: 0px;
     }
      .navbar2{
      display:inline-block;
      justify-content: space-around;
      align-items: center;
      margin-bottom: 5px;
     }

     .dropdown {
      position:static;
      display: inline-block;
      padding: 0px; 
      margin-left: 8px;

    }
   }

    @media screen and (max-width: 706px){
      .navbar2{
         display:inline-block;
         justify-content: space-around;
         
        }

      .dropdown {
         position:static;
         display: inline-block;
         margin-left: -8px;
       }
    }
      /*

*/
     
  

  .dropbtn {
   background-color: rgb(0, 37, 0);
   margin-left: 16px;
   color: white;
   padding: 8px;
   font-size: 16px;
   border: none;
   border-radius: 10px
}  



/*GESAMTE GALERIE NEU*/


/*ONTAINER*/
#container {
    position: relative;
    width:auto;
    height:auto;
    background:rgb(4, 68, 8);
    border:10px solid green;
    font-family:verdana, arial, sans-serif;
    font-size:0.95em;
}

#container a.pics {
   float:left;
   display:inline;
   padding:8px 8px;
   color:#000;
   text-decoration:none;
   cursor:default;
}

#container a.pics img.thumb {
   display:block;
   border:1px solid #000;
   width:74px;
   height:auto;
}

#container a.pics span {
   display:none;
   text-align:center;
}

/* HOVER ÜBER DEM BILD*/
#container a.pics span img {
   margin: auto;
   width: 500px;
   height: auto;
   border:none;
}

#container a.pics:hover {
   white-space:normal;     /* IE */
}

#container a.pics:hover img.thumb {
   border:1px solid #fff;
}

/* Position des gehoverten Bildes*/
#container a.pics:hover span {
   display:block;
   position:absolute;
   left: 200px; 
   top:150px;
   z-index:10;
   height:450px;
}

#container a.pics:focus {
   outline:0;
}

#container a.pics:focus img.thumb {
   border:5px solid #fc0
}

#container a.pics:focus span {
   display:block;
   position:absolute;
   left:200px; 
   top:150px;
   z-index:10;
   outline:10;
   height:450px;

   border: 10px whitesmoke;
   border-radius: 10px ;
   
}

#container span.info {
   clear:left;
   display:block;
   line-height:20px;
   margin: 100px;
   padding:250px 0 0 0;
   width:647px;
   text-align:center;
   color:rgb(7, 172, 62);
   z-index:1;
}
#container span.info a {
   color:#000;
}

#container span.info a:hover {
   text-decoration:none;
}


}