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

img {
     border:1px; 
     border-style:solid; 
     padding:3px;
     border-color:silver;
     box-shadow: 5px 5px 5px #222;
    }
    
.naked {
      border-style:none;
      box-shadow: none;
      }
      
 .fig {
 		border:0px;
      border-style:none;
      box-shadow: none;
      padding: 2px;
      width:18px;
      height:18px;
      }
 
 img.bottle {
 	max-with: 90%;
	max-height: 90%;
	left: 50%;
	top: 50%;
	margin-left: auto; margin-right: auto;
	}    

img.popup {
	position: relative;
	max-width: 99%;
	max-height: 99%;
	z-index: 99;
	}
img.flipaway3d::after {
	box-shadow: none;
	z-index: 88;
	transition: all 0.5s ease-out;
	transform: rotate3d(1,1,1,360deg) scale3d(0,0,0);
}	
img.thumb {
		border 0px solid gold;
      border-style:none;
      box-shadow: none;
      padding: 3px;
      vertical-align: middle;
      justify-content: space-around;
      visibility: inherit;
      }
      
img.nothumb {
visibility: collapse;
}
      
.logo {
	border:0px; 
	box-shadow:none;
	}

.rotate3D:hover {
	box-shadow: none;
	transition: all 10s ease;
	transform: rotateX(360deg) rotateY(360deg) ;
}

.flex { 
display:flex;
justify-content: center;
} 


.container { /*positioning popup in mosaik*/
position: absolute;
display: inline-flex;
justify-content: center;
left: 50%;
top: 50%;
max-width: 99%;
max-height: 99%;
border: 2px dotted gold;
padding: 0px;
}

#mosaik {
	margin-top: 10px;
	text-align: center;
	margin-left: auto; margin-right: auto;
	z-index: 370;
	border: 0px solid gold;
	width: 100vmin !important;
	height: 100vmin !important;
} 

figure {
	position: center;
	text-align: center;
	vertical-align: middle;
	margin-left: auto; margin-right: auto;
	width: 0px;
	height: 0px;
	max-width: 99%;
	padding: 5px;
	border: 10px dashed blue;
	box-sizing: border-box;
}

figcaption {
	margin-top: 10px;
	padding: 3px;
	visibility: hidden;
	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: 10px;
	text-align: center;
}
.img_container {
display:inline-block;
position: relative;
justify-content: center;
padding: 5px;
border: 0px dashed orange;
}

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



.centerbox {/*index-seite, für Buttons*/
position: absolute;
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
width: 100vw !important;
height: 100vh !important;
align-content: center;
justify-content: center;
align-items: center;
text-align: center;
margin: auto; 
border: 0px dashed white;
}

.buttonbox{ /*index-seite, enthält jeweils einen Knopf*/
width: 160px;
text-align: center;
margin: 5px;
padding: 5px;
border: 0px solid green;   
}

#help {
position: absolute; 
top: 100px;
left: 100px;
background-color: #444;
box-shadow: 0px 0px 30px  gold;
border-radius: 10px;
z-index: 380;
}
#Photo {
	max-width: 79% !important;
	max-height: 75% !important;
	border-radius: 10px;
	cursor: pointer;
	}  
#free {
	position: fixed;
	left: 50%;
	top:50%;
	visibility: collapse;
	z-index: 500;
	cursor: pointer;
	}

#Gpunkt {
		border 0px !important;
      border-style:none;
      box-shadow: none;
      padding: 3px;
      }	
#link {
		border 0px;
      border-style:none;
      box-shadow: none;
      padding: 0px;
      }
     
.button {
        z-index: 3;
        width: 150px;
        height: auto;
        box-shadow: 5px 5px 5px #222;
        position: relative;
        transition-property: margin-left, margin-top, width ;
        transition-duration: 0.5s;
        border: 1px solid silver;
        text-align: center;
        }
        
.button:hover {
          z-index: 6; 
          width: 250px;
          height: auto;
          box-shadow: 0px 0px 20px gold;
          margin-left:-50px;
          margin-top:-15px;
          transition-property: margin-left, margin-top, width ;
          transition-duration: 0.5s;
          text-shadow: 5px 5px 5px gold;
          border: 1px solid gold;
          }
        
.button:active {
          border: 2px solid red;
          box-shadow:  0px 0px 30px red; 
      	 }

.txt_button {
            text-align: center;
            width: 120px;
            height: 100px;
            position: absolute;
            first-letter: { font-family:Garamond,serif; font-size:18pt; color:#E00;  }
            z-index: 2;
            }
           
.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;
}