body {
font-family:Garamond,serif; font-size:12pt; line-height:15pt; color:#CCC; background-color:#444;
}

a:link { color:silver; text-decoration:none; font-size:12pt; }
a:hover, a.hover.visited { color:gold; text-decoration:none; font-weight:bold;  font-size:12pt; !important;}
a:visited { color:silver; text-decoration:none; font-size:12pt;  }
a:active { color:silver; text-decoration:none; font-size:12pt; }
a:focus {color:silver; text-decoration:none; font-size:12pt;  }
a.g_menue {color:silver !important;}
a.g_menue:hover {color:gold !important;}

a.inline {
         font-size:14pt; 
			color:silver;
			}
a.inline:hover {
         font-size:14pt !important; 
			color:gold;
			}			
			
a.sublink {
          font-style:italic; 
          font-size:12pt;
          color:silver;
          }
			 
a.super {
         font-size:18pt; 
			color:white;
			}
a.super:hover {
         font-size:18pt; 
			color:gold;
			}
.shade { 
        -webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.8);
        -moz-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.8);
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.8); 
        }
#menue_left { position:relative; left:1%; top:20%; width:15%; height:100%; z-index:1; }
#menue_right { position:fixed; top:0%; right: 15px; text-align: center; z-index:1;}

h1,h2,h3,h4 { text-align:center; font-style:italic; text-shadow: 5px 5px 5px #000;}

label.hamburg { 
   display: block;
   width: 250px; height: 50px; 
   opacity: 100%;
   position: fixed; 
   left: 10px;
   top: 10px;
   margin-left: auto; margin-right: auto;
   cursor: pointer;
   z-index: 100;
}

input#hamburg {display:none}


.line { 
   position: absolute; 
   left:10px;
   height: 4px; width: 55px; 
   background: #fff; border-radius: 2px;
   display: block; 
   transition: 0.5s; 
   transform-origin: center; 
   
}

.line:nth-child(1) { top: 12px; }
.line:nth-child(2) { top: 24px; }
.line:nth-child(3) { top: 36px; }

#hamburg:checked + .hamburg .line:nth-child(1){
   transform: translateY(12px) rotate(-45deg);
}

#hamburg:checked + .hamburg .line:nth-child(2){
   opacity:0;
}

#hamburg:checked + .hamburg .line:nth-child(3){
   transform: translateY(-12px) rotate(45deg);
}

.menue {
position: absolute; 
   left: 10px;
   top: 60px;
   visibility: hidden;
   border: 0px dashed red;
 }  
   
#hamburg:checked + .hamburg .menue {
visibility: visible;
z-index:111;
} 

#hamburg:checked + .img .popup {
visibility:hidden;
}

#contactlinks {
   position: fixed; 
   left: 10px;
   bottom: 20px;
   }
#help {
position: absolute; 
top: 100px;
left: 100px;
background-color: #444;
box-shadow: 0px 0px 30px  gold;
border-radius: 10px;
z-index: 380;
}

img {
	  max-width: 90%;
     max-height:95%; 
     border:1px; 
     border-style:solid;
     border-radius: 10px; 
     padding:3px;
     border-color:silver;
     box-shadow: 15px 15px 15px #222;
    }
    
.img.bottle {
display:inline-block;
position: relative;
justify-content: center;
padding: 5px;
border: 1px dashed orange;
}    

#centerbox {
				position:absolute; 
				top:50%;
        		left:50%;
        		transform: translateX(-50%);
        		transform: translateY(-50%);
        		max-width: 90%;
        		max-height:95%; 
				text-align:inherit;
				border:1px dotted gold; 
				}    
figure {
	display: grid;
	place-items: center;
	margin-left: auto; margin-right: auto;
	max-height: 50px;
	max-width: 90%;
	border: 0px dashed blue;
	box-sizing: border-box;
}

figcaption {
	margin-top: 10px;
	margin-left: auto; margin-right: auto;
	max-width: 80%;
	color: white;
	background-color: rgba(100,100,100,0.75);
	font-size:18px;
	font-style: italic;
	text-shadow: 1px 1px 2px black, 0 0 5px darkblue, 0 0 10px white ;
	border: 0px dashed green;
	border-radius: 5px;
	text-align: center;
}
.image-container {
  position: relative;
  display: inline-block;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.image-container:hover .overlay {
  opacity: 1;
}