body {
font-family: 'Arimo', sans-serif; font-display: swap; color: #495057;
}

img {
     border:1px; 
     border-style:solid; 
     padding:3px;
     border-color:silver;
     box-shadow: 5px 5px 5px #222;
    }
    
.naked {
      border-style:none;
      box-shadow: none;
      }
      


img.popup {
	position: relative;
	max-width: 99%;
	max-height: 99%;
	z-index: 99;
	}
	
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;
}
      
.flex { 
display:flex;
justify-content: center;
} 


.container { /*positioning popup in mosaik*/
position: absolute;
display: inline;
box-sizing: border-box;
left: 50%;
top: 50%;
border: 0px dotted gold;
padding: 3px;
}

#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.mosaik {
	position: fixed;
	text-align: center;
	vertical-align: middle;
	margin-top: 10px;
	margin-left: auto; margin-right: auto;
	width: 0px;
	height: 0px;
	max-width: 99%;
	padding: 5px;
	border: 0px dashed blue;
	box-sizing: border-box;
}

figcaption.mosaik{
	margin-top: 10px;
	padding: 3px;
	visibility: hidden;
	color: black;
	font-size:18px;
	font-style: italic;
	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: #000; 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;
box-shadow: 0px 0px 30px  gold;
border-radius: 10px;
z-index: 380;
}
#Foto {
	max-width: 99% !important;
	max-height: 95% !important;
	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;
      }