body { 
	font-family: 'Gill Sans MT', Arial, Helvetica, sans-serif; 
	font-size: 16px;
	text-align: center;
	line-height: 1.35;
}
header {
	width: 100%;
	padding-top: 20%;
	background: url(/media/img/bildwerk/logo.gif) no-repeat center;
	background-size: 25% auto;
	
}
section {
	width: auto;
	min-width: 200px;
	max-width: 600px;
	margin: 0 auto 50px auto;
}

a {color: #333}
a:hover {color: #666}

ul.bilder {
	float: left;
	width: 100%;
	margin: 0 0 50px 0;
	padding: 0;
}
ul.bilder li {
	position: relative;
	float: left;
	width: 32%;
	min-width: 32%;
	margin-bottom: 2%;
	margin-right: 2%;
    padding-top: 32%;
	list-style: none;
}
ul.bilder li.img-1, ul.bilder li.img-12, ul.bilder li.img-15, ul.bilder li.img-19, ul.bilder li.img-21, ul.bilder li.img-27, ul.bilder li.img-33, ul.bilder li.img-42 {
	width: 66%;
    padding-top: 66%;
}
ul.bilder li.img-2, ul.bilder li.img-5, ul.bilder li.img-8, ul.bilder li.img-10, ul.bilder li.img-12, ul.bilder li.img-15, ul.bilder li.img-19, ul.bilder li.img-20, ul.bilder li.img-22, ul.bilder li.img-23, ul.bilder li.img-26, ul.bilder li.img-28, ul.bilder li.img-29, ul.bilder li.img-32, ul.bilder li.img-34, ul.bilder li.img-35, ul.bilder li.img-38, ul.bilder li.img-39, ul.bilder li.img-42 {
	margin-right: 0;
}
ul.bilder li.img-2, ul.bilder li.img-6, ul.bilder li.img-7, ul.bilder li.img-8, ul.bilder li.img-18, ul.bilder li.img-36, ul.bilder li.img-37, ul.bilder li.img-41 {
	padding-top: 66%;
}
ul.bilder li.img-10, ul.bilder li.img-12, ul.bilder li.img-15 {
	float: right;
}
ul.bilder li.img-right-left {
	float: right;
	margin-right: 2%;
}
ul.bilder li.img-20, ul.bilder li.img-40 {
	width: 100%;
	margin-right: 0;
}
ul.bilder li.img-40 {
	padding-top: 25%;
}


/* Special */
ul.bilder li.img-half-llong {
	width: 60%;
	padding-top: 112%;
}
ul.bilder li.img-half-rt {
	width: 38%;
	padding-top: 44%;
	margin-right: 0;
}
ul.bilder li.img-half-rt a {
	background-size: contain;
}

ul.bilder li.img-half-rb {
	width: 38%;
	margin-right: 0; 
	padding-top: 66%;
}


ul.bilder li a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-decoration: none;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

ul.bilder li.center-left a {
	background-position: center left;
}
ul.bilder li.top-right a {
	background-position: -107px center;
}
ul.bilder li.top-center a {
	background-position: top center;
}
ul.bilder li.img-1 a, ul.bilder li.img-9 a {
	background-position: top right;
}
ul.bilder li.img-18 a, ul.bilder li.img-39 a {
	background-position: top left;
}
ul.bilder li.img-24 a {
	background-position: bottom center;
}
ul.bilder li.img-40 a {
	background-size: 100% auto;
}
ul.bilder li a img {
	opacity: 0;
	max-width: 1px;
	max-height: 1px;
}


/* Tooltipps Bilder */
ul.bilder li a:hover:after {
	content: '';
	position: absolute;
	top: -26px;
	left: 0px;
	width: 100%;
	height: 100%;
	height: calc(100% + 26px);
	border: solid 3px #fff;
	background: rgba(255,255,255,1);
	-moz-box-shadow: 0 0 10px rgba(0,0,0,0.75);
	-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.75);
	box-shadow: 0 0 10px rgba(0,0,0,0.75);
	z-index: 1;
}
ul.bilder li a:hover:before {
	content: attr(data-title);
	position: absolute;
	top: -23px;
	left: 3px;
	width: 100%;
	height: 26px;
	padding: 5px;
	font-size: 75%;
	color: #333;
	white-space: nowrap;
	text-overflow: ellipsis;
	background: rgba(255,255,255,1);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; 
	box-sizing: border-box; 
	overflow: hidden;
	z-index: 4;
}

ul.bilder li a:hover > img {
	opacity: 1;
	position: absolute;
	top: calc(50% + 3px);
	left: calc(50% + 3px);
	max-height: 100%;
	max-width: 100%;
	transform: translate(-50%, -50%);
	z-index: 3;
}
ul.bilder li a:hover span + img {
	bottom: 50px;
}

/* Keine Vorschaubilder */
ul.bilder li a:hover span {
	position: absolute;
	bottom: 3px;
	left: 50%;
	width: 100%;
	height: 41px;
	transform: translateX(-50%);
	z-index: 5;
}
ul.bilder li a:hover span img {
	opacity: 1;
	display: inline-block;
	max-width: 100px;
	max-height: 41px;
	margin-right: 5px;
	border: solid 1px #fff;
	-moz-box-shadow: 0 0 3px rgba(0,0,0,0.75);
	-webkit-box-shadow: 0 0 3px rgba(0,0,0,0.75);
	box-shadow: 0 0 3px rgba(0,0,0,0.75);
}

a[data-id].active {
	-moz-box-shadow: 0 0 0 1px red;
	-webkit-box-shadow: 0 0 0 1px red;
	box-shadow: 0 0 0 1px red;
}
a[data-id].active:hover {
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}

/* Layer */
#mask {
	display: none;
	position: fixed;
	top: -100px;
	right: -100px;
	bottom: -100px;
	left: -100px;
	background: rgba(0,0,0,0.5);	
	z-index: 3;
}
.window {
	display: none;
	position: fixed;
	top: 20px;
	left: 20px;
	width: 100%;
	max-width: 900px;
	height: 100%;	
	max-height: 598px; 
	background: #fff;
	-moz-box-shadow: 0 0 30px rgba(0,0,0,0.85);
	-webkit-box-shadow: 0 0 30px rgba(0,0,0,0.85);
	box-shadow: 0 0 30px rgba(0,0,0,0.75);
	z-index: 4;
}
.window > .close {
	display: block;
	position: absolute;
	right: 0;
	top: 0px;
	width: 36px;
	height: 36px;
	text-decoration: none;
	background: rgba(255,255,255,0.75);
	z-index: 5;
}
.window > .close:before {
	content: '\d7';
	position: absolute;
	top: -0px;
	right: 7px;
	font-size: 200%;
}
.window > .close:hover, .window > .close.active {
	background: rgba(255,0,0,0.85);
}
.window > .close:hover:before, .window > .close.active:before {
	color: #fff;
}

.window p {
	position: absolute;
	top: 36px;
	/*width: 38.2%;*/
	margin: 0;
	padding: 1.5% 2.5% 1.5% 2.5%;
	background: rgba(255,255,255,0.75);
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-moz-box-shadow: 0 0 20px rgba(0,0,0,0.35);
	-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.35);
	box-shadow: 0 0 20px rgba(0,0,0,0.35);
	z-index: 2;
}
.window p span {
	display: block;
	padding-bottom: 3px;
	font-size: 85%;
	color: rgba(0,0,0,0.5);
	line-height: 1.2;
}
.window p:empty {
	display: none;
}

.img-big {
	display: block;
	position: relative;
	float: left;
	height: 0;
	padding-bottom: 66.40%;
	width: 100%;
	background: rgba(0,0,0,0.25);
	overflow: hidden;
}
.img-big > img {
	display: block;
	position: absolute;
	max-width: 100%; 
	max-height: 100%;
	top: 50%;
	left: 0;
	right: 0;
	margin: 0 auto;
	padding: 0;
	transform: translateY(-50%);
}
.img-big > img:hover {
	cursor: pointer;
}
.img-big > img.small {
	position: absolute;
	bottom: 0px;
	right: 5px;
	-moz-box-shadow: 0 0 20px rgba(0,0,0,0.85);
	-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.85);
	box-shadow: 0 0 20px rgba(0,0,0,0.85);
}
/* Vorschau-Bild */
.img-big div {
	position: absolute;
	bottom: 0px;
	right: 5px;
	max-width: 35%;
}
.img-big div img {
	max-width: 100%;
}

.img-big .prev, .img-big .next {
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	width: 25%;
	z-index: 1;
	text-decoration: none;
}
.img-big .prev {
	left: 0;
}
.img-big .next {
	right: 0;
}
.img-big .prev:hover {
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 100%);
	background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 100%);
	background: linear-gradient(to left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 100%);
}
.img-big .next:hover {
	background: -webkit-linear-gradient(right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 100%);
	background: -moz-linear-gradient(right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 100%);
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 100%);
}

.img-big .prev:before, .img-big .next:before {
	position: absolute;
	top: 45%;
	font-size: 300%;
	color: #fff;
	text-shadow: 0 0 5px rgba(0,0,0,0.85);
	text-decoration: none;
}
.img-big .prev:before {
	content: '\2039';	
	left: 25%;
}
.img-big .next:before {
	content: '\203A';
	right: 25%;
}
.img-big .prev:hover:before, .img-big .next:hover:before {
	color: red;
}

.img-big div img {
	-moz-box-shadow: 0 0 20px rgba(0,0,0,0.85);
	-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.85);
	box-shadow: 0 0 20px rgba(0,0,0,0.85);
}
.img-big span {
	position: absolute;
	left: 0;
	bottom: 10px;
	width: 100%;
	text-align: center;
	z-index: 1;
}
.img-big span b {
	padding: 3px 7px;
	font-weight: normal;
	background: rgba(255,255,255,0.75);
}

.imgs {
	float: left;
	width: 100%;
	background: #fff;
	padding: 1px 0px 5px 0px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	overflow-y: hidden;
	overflow-x: scroll;
}
ul.img-small {
	float: left;
	margin: 0;
	padding: 0;
	width: 100%;
	height: auto;
	list-style-type: none;	
	font-size: 0;
	white-space: nowrap;
} 
.img-small li {
	display: inline-block;
	height: 53px;
	padding: 0;
	margin: 0;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.img-small li a {
  display: block;
  height: 53px;
  width: auto;
} 
.img-small img {
  display: block;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: solid 1px transparent;
}
.img-small li.active img {
	-moz-box-shadow: 0 0 0 1px red;
	-webkit-box-shadow: 0 0 0 1px red;
	box-shadow: 0 0 0 1px red;
}
.img-small li a.no-big {
  cursor: default;
} 



@media (max-width: 850px) {
	.window p {
		font-size: 84%;
	}
}