/*****************************************************************************/
/* Fonts */
/*****************************************************************************/
@font-face { 
	font-family: 'Comfortaa';
	src: url('_templates/fonts/Comfortaa-VariableFont_wght.ttf') format('truetype');
}

.w3-comfortaa {
	font-family: Comfortaa, sans-serif;
}


body {
	font-family: Lato, Verdana, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
	font-family: Raleway, "Segoe UI", Arial, sans-serif;
} 

/*****************************************************************************/
/* Media */
/*****************************************************************************/
@media (any-hover) {
	#galerie img.raster {
		filter: grayscale(100%);
		transition: filter 0.5s;
	}
}

@media only screen and (max-width: 600px) {
	#galerie {
		column-count: 1;
	}
}
 
@media only screen and (min-width: 601px) {
	#galerie {
		column-count: 2;
		max-width: 90%;
	}
}

@media only screen and (min-width: 901px) {
	#galerie {
		column-count: 3;
		max-width: 85%;
	}
}

@media only screen and (min-width: 1200px) {
	#galerie {
		column-count: 4;
		max-width: 80%;
	}
}

html, body {
	height: 95%;
	margin: 0;
}

/*****************************************************************************/
/* Elements */
/*****************************************************************************/
* {
  box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}	

a:link, a:visited {
  text-decoration: none;
}

/* Galerie */
#galerie {
	column-gap: 0.5em;
	line-height: 0;
}

#galerie img.raster {
/* Just in case there are inline attributes */
	width: 100% !important;
	height: auto !important;

	padding-top: 0.25em;
	padding-bottom: 0.25em;

	cursor: pointer;
}

#galerie img:hover {
	filter: none;
}

#galerie .work {
	position: relative;
}

#galerie .note {
	position: absolute;
	top: 1em;
	right: 1em;
}

/* Modale Slideshow */
.w3-left, .w3-right, .w3-badge, .close, .info_btn {
	cursor: pointer;
}
.w3-left:hover, .w3-right:hover, .close:hover {
	color: white;
}
.w3-badge {
	height: 0.75em;
	width: 0.75em;
	padding: 0;
}
.w3-modal .w3-modal-content {
	height: 90vh;
	width: 97vw;
}
.w3-modal img {
	max-height: 88vh; 
	max-width: 95vw;
	cursor: zoom-in;
}

/* Infobox */
.info {
	position: absolute;
	bottom: 0;
	line-height:normal;
	background: rgb(0, 0, 0);
	background: rgba(0, 0, 0, 0.5); /* Black see-through */
	color: #f1f1f1;
	width: 100%;
/*	transition: .5s ease;*/
/*	opacity: 0;*/
	color: white;
}
.info table {
	margin: auto;
}
.info td {
	padding: 0 8px !important;
}

/* Gästebuch */
input[name=email_verify],
input[name=dsvgo] {
	display: none;
}

/* Scrollbars */
.scrollbox {
	overflow: scroll;
}

/* anchor offset for menu */
:target::before {
	content: "";
	display: block;
	height: 64px;
	margin-top: -64px;
}