*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	list-style: none;
	font-family: 'Lato', sans-serif;
	color: #333;
	text-decoration: none;	
}
html, body {
				min-height: 100%;
				margin: 0;
				padding: 0;
	background-color: transparent
			}
a{display: block;outline: none;}
body{
}
/******************Header Nav*******************/
header {
position: fixed;
left: 0;
top: 0;
width: 100%;
background-color: #4c5567;
color: white;
padding: 0 1.8em;
height:3.5em;
	z-index: 5;
}
header>div{
	display:flex;
	justify-content: space-between;
	align-items: center;height: 100%;
	max-width: 87.5em;
	margin: 0 auto;
}
/******************Navigation****************/
@media screen and (min-width:701px) {
	nav { display:block !important; } 
}
#nav ul{
	display:flex;
	justify-content: space-between;
	align-items: center;
}
#nav li:nth-of-type(6),
#nav li:nth-of-type(7),
#nav li:nth-of-type(8){display:none;}
#nav a{padding-left:0.8em; color: #cfd1c5;}
#nav a:hover{color: #fff;}
 a h1,a span {color: #fff;}
#nav a.active{color: #fff;}

/***************nav button*************************************************/
.menu {position: absolute;right: 1.8em;}
.menu-toggle {
  display: none;
  width: 20px;
  height: 20px;
  background: transparent;
  border-top: 4px solid;
  border-bottom: 4px solid;
  color: #efefef;
  font-size: 0;
  transition: all 0.25s ease-in-out;
}
.menu-toggle:before, .menu-toggle:after {
  content: '';
  display: block;
  width: 100%;
  height: 4px;
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform 0.25s ease-in-out;
}
button:hover {
  color: #fff;
}
button.is-active {
  border-color: transparent;
}
button.is-active:before {
  transform: translate(-50%, -50%) rotate(45deg);
}
button.is-active:after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
button {
  border: none;
  cursor: pointer;
  outline: none;
}

/***************nav button*************************************************/
@media screen and (max-width:700px) {
	header{border-bottom: 1px solid #efefef;}
	#nav{position: absolute;top:3.5em;left:0;
		background: #4c5567;;width: 100%;
		text-align:center;
	}
	#nav li{border-bottom: 1px solid #efefef;padding: 0.5em 0;}
	#nav a{padding: 0 0 0 0;font-size: 1.5em;width: 100%;}
	#nav li:nth-of-type(6),
	#nav li:nth-of-type(7),
	#nav li:nth-of-type(8){display:block;}
	#nav{display:none;}
	.menu-toggle{display: block;}
	#nav ul{display:block;}
}
/******************Navigation Ende****************/
h1 {
	font: normal 1.4625em Lato, sans-serif;
	text-transform: uppercase;letter-spacing: 0.09em;
	color: #fff;font-weight:300;
}
h1 span {
	font-weight:700;
}
@media screen and (max-width:410px) {
	h1 {
	font: normal 1.2em Lato, sans-serif;
	letter-spacing: 0.09em;
	
	}
}
/*******************	Main Gemälde*****************/
#gemaelde main {
min-height: 100%;
padding: 8.5em 1.8em 4em 1.8em;/*Höhe footer Header*/
}
#gemaelde main>div{display: block;max-width: 87.5em;
	margin: 0 auto;}
#gemaelde img, .overlay{width: 100%;display: block;cursor: pointer}


#gemaelde .masonry {
	column-width: 350px;
	column-gap: 1em;
}
#gemaelde .item {
	background: #ccc;
	margin-bottom: 1em;
	padding: 0;
	-webkit-column-break-inside: avoid;
	-moz-column-break-inside: avoid;
	column-break-inside: avoid;
}
i{padding-right: 0.5em;color: #efefef;visibility: hidden;}
.overlay p a{display: inline-block}
 .overlay p a.block{visibility: visible;}
/* Container needed to position the overlay. Adjust the width as needed */
#gemaelde .container {
  position: relative;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#gemaelde .mySlides .container {box-shadow: none;}
/* Make the image to responsive */
#gemaelde .image {
  display: block;
  width: 100%;
  height: auto;
}
/* The overlay effect - lays on top of the container and over the image */
#gemaelde .overlay {
  position: absolute;
  top: 0;
  background: rgba(0, 0, 0, 0.5); /* Black see-through */
  width: 100%;
  transition: .5s ease;
  opacity:0;
 display: flex;
	justify-content: space-between;
	padding: 0.5em;
}
#gemaelde .overlay p{color: #efefef;font-size: 1em;}
/* When you mouse over the container, fade in the overlay title */
#gemaelde .container.item:hover .overlay {
  opacity: 1;
}

#gemaelde .flex .container:hover .overlay {
  opacity: 1;
}
.modal i{padding-right: 0.5em;color: #efefef;visibility:visible;}

/*************************Slider************************/
/* The Modal (background) */
#gemaelde .modal {
  position:fixed;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
	display: none;
}
.flex{display: flex;
	align-items: center;height: 800px;width: 90%;margin: 0 auto;cursor: pointer;}
/* Modal Content */
.modal-content {
  position: relative;
  margin: auto;
  padding: 0;
  width: 95%;
  max-width: 1400px;
	height: 800px;
}
/* The Close Button */
.close {
  color: #bbb;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;z-index: 5;
}

.close:hover,
.close:focus {
  color: #171717;
  text-decoration: none;
  cursor: pointer;
}

.mySlides {
  display: none;
	height: 800px;
}
.mySlides:nth-of-type(1) img,.mySlides:nth-of-type(1) .overlay{margin: 0 auto;width: 92% !important;}
.mySlides:nth-of-type(2) img,.mySlides:nth-of-type(2) .overlay{margin: 0 auto;width: 50% !important;}
.mySlides:nth-of-type(3) img,.mySlides:nth-of-type(3) .overlay{margin: 0 auto;width: 87.7% !important;}
.mySlides:nth-of-type(4) img,.mySlides:nth-of-type(4) .overlay{margin: 0 auto;width: 46% !important;}
.mySlides:nth-of-type(5) img,.mySlides:nth-of-type(5) .overlay{margin: 0 auto;width: 51% !important;}
.mySlides:nth-of-type(6) img,.mySlides:nth-of-type(6) .overlay{margin: 0 auto;width: 81.5% !important;}
.mySlides:nth-of-type(7) img,.mySlides:nth-of-type(7) .overlay{margin: 0 auto;width: 63% !important;}
.mySlides:nth-of-type(8) img,.mySlides:nth-of-type(8) .overlay{margin: 0 auto;width: 52% !important;}
.mySlides:nth-of-type(1) .overlay{left:4%;}
.mySlides:nth-of-type(2) .overlay{left:25%;}
.mySlides:nth-of-type(3) .overlay{left:6.15%;}
.mySlides:nth-of-type(4) .overlay{left:27%;}
.mySlides:nth-of-type(5) .overlay{left:24.5%;}
.mySlides:nth-of-type(6) .overlay{left:9.25%;}
.mySlides:nth-of-type(7) .overlay{left:18.5%;}
.mySlides:nth-of-type(8) .overlay{left:24%;}


/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: #bbb;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
}
.prev{left: 0;}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  color: #717171;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #999;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}



.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

/*************************Footer************************/


footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
 background-color: #4c5567;
color: white;
padding: 1.2em 1.8em;	
height:1.5em;	
}
footer>div{
	max-width: 87.5em;
	margin: 0 auto;
	height: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
footer a{color: #cfd1c5;}
footer a:hover{color: #fff;}
@media screen and (max-width:700px) {
	footer a:nth-of-type(2),footer a:nth-of-type(3),
	footer a:nth-of-type(4){display:none;}
	footer>div{justify-content: center;}
}
@media screen and (max-width:700px) {
	#gemaelde .modal{display: none !important;}
	i{visibility: visible;}
}