@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');

body {font-family: "Source Sans Pro", Helvetica, Arial, sans-serif; margin: 0px; background-color:rgba(248,248,248,1.00); }
a {text-decoration: none;}
::-webkit-scrollbar { display: none; }
invisible {display: none;}

header { position: relative; overflow: hidden; background-color: #e9e9e9; border: 0px solid rgba(248,248,248,1.00); z-index: 300;}
.title {display: inline-block; width: 100%; text-align: center;}
.title img {width: 600px; height: auto;}
.header-main { padding: 30px 0px; position: relative; width: 85%; margin: 0 auto; padding-bottom: 0;}
.header-main h1 {font-size: 40px; color: #222; font-weight: 400; }

.menue { min-height: 30px; min-width: 30px; background-color: #e9e9e9; width: 100%; text-align: center;}
.menue img {width: auto; height: 20px;}

main { column-count: 3; column-gap: 50px; width: 60%; margin: 0 auto; margin-top: 70px;}

.post{ display: inline-block; position: relative; margin: 0 0 30px; width: 100%;}
figure {margin: 0}
figure img {width: 100%; height: auto;}
.post-content{top:0; bottom: 4px; width: 100%; height: calc(100% - 4px ); position: absolute; background-color: rgba(0, 0, 0, .0); color: rgba(255,255,255,1.00); overflow: hidden; cursor:pointer; transition: all .4s cubic-bezier(.27, .52, .28, .97);}
.post-content:hover {bottom: 4px; background-color:rgba(0, 0, 0, .6); transition: all .4s cubic-bezier(.27, .52, .28, .97);}
.post-content .post-content_box{ position: absolute; left: 20px; padding-right: 20px; opacity: 0; bottom: -20px; transition: all .4s cubic-bezier(.27, .52, .28, .97);}
.post-content:hover .post-content_box {opacity: 1; bottom: 20px; transition: all ease .5s;}
.post-content_box .post-title {font-size: 24px; line-height: 1.1; font-weight: 400; margin: 0px; margin-bottom: 0.55em;  width: 100%;}
.post-content_box ul { list-style: none; padding: 0px; margin: 0px;}
.post-content_box li { margin: 0px;}
.meta{}

.exhibition {background-color: #EFE9E5; padding: 15px; width: calc(100% - 30px);}
.exhibition h2 {margin-top: 0;}

.lightbox {	display: none; position: fixed; z-index: 1;}
.lightbox:target { display: block; }
.lightbox_bg {position: fixed;	z-index: 10; width: calc(100vw - 1px); height: calc(100vh); text-align: center; top: 0px; left: 0; background: rgba(233,233,233,.95); overflow: scroll; }

.post-image { z-index: 20; position: fixed; top:200px; left: 50%; transform: translateX(-50%); height: 70vh;}
.post-image img {  max-width: 100%; height: 100%; object-fit: contain;}


.post-lightbox {color: rgba(0,0,0,1.00); z-index: 20; position: fixed; top:185vh; left: calc(100vw - 84%); transform: translateX(-50%);}
.post-lightbox .post-title {font-size: 10px; line-height: 1.4; font-weight: 400; margin: 0px; margin-bottom: 0.55em;  width: 100%;}
.post-lightbox ul { list-style: none; padding: 0px; margin: 0px;}
.post-content_box li { margin: 0px; }

.post_prev {height: 70vh; width: calc(100vw - 91%); background-image: url(/img/prev.svg);
  background-repeat: no-repeat; background-position: center; cursor: pointer;
  border-radius: 1px; top:200px; left: calc(100vw - 91%); position: fixed; z-index: 999;}
.post_next {height: 70vh; width: calc(100vw - 91%); background-image: url(/img/next.svg);
  background-repeat: no-repeat; background-position: center; cursor: pointer;
  border-radius: 1px; top:200px; right: calc(100vw - 91%); position: fixed; z-index: 999;}
.post_prev:hover, .post_next:hover {opacity: .5;}
.darkbox {	display: none; position: fixed;	z-index: 999; width: calc(100vw - 30px); height: calc(100vh - 30px); text-align: center; top: 0; left: 0; background: rgba(0,0,0,.95); overflow: scroll;}
.darkbox:target { border: 15px solid rgba(248,248,248,1.00); display: block; }
.profil_img {width: 55%; height: auto; margin: 50px auto; margin-top: 70px; text-align: left;}
.profil_img img {width: 60%;}
.profil_txt {color: #fff; font-size: 18px; line-height: 1.3em; width: 55%; margin: 0 auto; text-align: left; margin-bottom: 40px; margin-top: 50px;}
.profil_txt br {}

footer{}

@media only screen and (max-width: 750px) {
	.menue {float: none; 	margin: 0 auto;}
}

@media only screen and (max-width: 750px) {
	main { column-count: 2; column-gap: 20px; width: calc(100% - 20px); margin-top: 10px;}
	.menue {float: none; 	margin: 0 auto;}
	.title img {width: 400px; height: auto;}
	.post {margin: 0 0 16px;}
	lightbox:target {display: none;}
	.profil_txt, .profil_img {width: 80%}

}

@media only screen and (max-width: 450px) {
	main { column-count: 1; width: calc(100% - 20px); margin-top: 10px;}
	.menue {float: right; 	margin: 0 auto;}
	.title img {width: 80vw; height: auto;}
	.post {margin: 0 0 16px;}
	.lightbox:target {display: none;}
	.profil_txt, .profil_img {width: 90%}
}