*{
	margin:0;
	padding:0;
}

/*definiert die Höhe des arrow-Feldes und damit des folgenden Textes
height berücksichtigt mit 33vw die Maße der Bilder 2400x800*/
#container{
	width:100%;
	height:33vw;
	position:relative;
}

#container .prevButton{
	height:102px;
	width:80px;
	position:absolute;
	background:url('buttons.png') no-repeat;
	top:50%;
	margin-top:-51px;
	cursor:pointer;
	z-index:2000;
	background-position:left top;
	left:0
}

#container .prevButton:hover{ background-position:left bottom;left:0;}

#container .nextButton{
	height:102px;
	width:68px;
	position:absolute;
	background:url('buttons.png') no-repeat;
	top:50%;
	margin-top:-51px;
	cursor:pointer;
	z-index:2000;
	background-position:right top;
	right:0
}

#container .nextButton:hover{background-position:right bottom;right:0;}

/*definiert die Höhe des Bildes
benötigt definitive Angabe der Höhe, sonst wird gar nichts angezeigt, px-Wert in der späteren Darstellung aber unerheblich*/
#container ul{
	width:100%;
	height:1000px;
	list-style:none outside none;
	position:relative;
	overflow:hidden;
}

#container li:first-child{
	display:list-item;
	position:absolute;
}

#container li{
	position:absolute;
	display:none;
}

.bildtext {
	width: 100%;
	position: relative;
}


.bildtext span {
	background-color: silver;
	background-color: hsla(0, 0%, 100%, 0.7);
	position: absolute;
	bottom: 0;
	width: 100%;
	line-height: 2em;
	text-align: left;
		
}

.bildtext img {
	display: block;
}


figure{
  position: relative;
}

figure img {
  display: block;
}

figcaption {
  position: absolute;
  bottom: 0;
  padding: 0px;
  text-align: center;
  width: 100%;
  background: black;
  color: white;
  opacity: 0.5;
}

figcaption {
  opacity: 0;
  bottom: -0em;
  transition: all 1s ease;
}

figure:hover figcaption {
  opacity: 0.5;
  bottom: 0;
}