/* slideshow - adapted from http://cssmojo.com/ken-burns-effect/ */
#slideshow { position:relative; overflow:hidden; max-width:100%; padding-bottom:calc(100vh - 55px);
  } /* (img px height / img px width x 100) = padding-bottom % */
#slideshow div { position:absolute; z-index:2; width:105%; height:108%; top:-5%; left:-5%; background-position:center; background-repeat:no-repeat; background-size:cover; opacity:0;
	-webkit-transition:opacity 3s, -webkit-transform 8s; -ms-transition:opacity 3s, -ms-transform 8s; transition:opacity 3s, transform 8s 
	}
#slideshow div { -webkit-transform-origin:bottom left; -ms-transform-origin:bottom left; transform-origin:bottom left }
#slideshow div:nth-of-type(2n+1) { -webkit-transform-origin:top right; -ms-transform-origin:top right; transform-origin:top right }
#slideshow div:nth-of-type(3n+1) { -webkit-transform-origin:top left; -ms-transform-origin:top left; transform-origin:top left }
#slideshow div:nth-of-type(4n+1) { -webkit-transform-origin:bottom right; -ms-transform-origin:bottom right; transform-origin:bottom right }
#slideshow .fx:first-child + p + div ~ div, #slideshow .fx1 { z-index:1 }
#slideshow .fx, #slideshow .fx1 { -webkit-transform:scale(1.35) translate(2.5%); -ms-transform:scale(1.35) translate(2.5%); transform:scale(1.35) translate(2.5%); opacity:1 }

@media (max-width: 564px) and (orientation : landscape){
#slideshow div:nth-of-type(1) { background-image:url(../images/slide/leipzig-sachsen-architektur_565.jpg) }
#slideshow div:nth-of-type(2) { background-image:url(../images/slide/dresden-stadt-architektur_565.jpg) }
#slideshow div:nth-of-type(3) { background-image:url(../images/slide/old-tenement-house_565.jpg) }
#slideshow div:nth-of-type(4) { background-image:url(../images/slide/city-1591564_565.jpg) }
}
/* Bilder je nach Displaygröße */
@media (min-width: 565px) and (orientation : landscape){
#slideshow div:nth-of-type(1) { background-image:url(../images/slide/leipzig-sachsen-architektur_768.jpg) }
#slideshow div:nth-of-type(2) { background-image:url(../images/slide/dresden-stadt-architektur_768.jpg) }
#slideshow div:nth-of-type(3) { background-image:url(../images/slide/old-tenement-house_768.jpg) }
#slideshow div:nth-of-type(4) { background-image:url(../images/slide/city-1591564_768.jpg) }
}
@media (min-width: 768px) and (orientation : landscape){
#slideshow div:nth-of-type(1) { background-image:url(../images/slide/leipzig-sachsen-architektur_992.jpg) }
#slideshow div:nth-of-type(2) { background-image:url(../images/slide/dresden-stadt-architektur_992.jpg) }
#slideshow div:nth-of-type(3) { background-image:url(../images/slide/old-tenement-house_992.jpg) }
#slideshow div:nth-of-type(4) { background-image:url(../images/slide/city-1591564_992.jpg) }
}
@media (min-width: 992px) and (orientation : landscape){
#slideshow div:nth-of-type(1) { background-image:url(../images/slide/leipzig-sachsen-architektur_1200.jpg) }
#slideshow div:nth-of-type(2) { background-image:url(../images/slide/dresden-stadt-architektur_1200.jpg) }
#slideshow div:nth-of-type(3) { background-image:url(../images/slide/old-tenement-house_1200.jpg) }
#slideshow div:nth-of-type(4) { background-image:url(../images/slide/city-1591564_1200.jpg) }
}
@media (min-width: 1200px) and (orientation : landscape){
#slideshow div:nth-of-type(1) { background-image:url(../images/slide/leipzig-sachsen-architektur_2560.jpg) }
#slideshow div:nth-of-type(2) { background-image:url(../images/slide/dresden-stadt-architektur_2560.jpg) }
#slideshow div:nth-of-type(3) { background-image:url(../images/slide/old-tenement-house_2560.jpg) }
#slideshow div:nth-of-type(4) { background-image:url(../images/slide/city-1591564_2560.jpg) }
}

@media (max-height: 480px) and (orientation : portrait){
#slideshow div:nth-of-type(1) { background-image:url(../images/slide/leipzig-sachsen-architektur_320_p.jpg) }
#slideshow div:nth-of-type(2) { background-image:url(../images/slide/dresden-stadt-architektur_320_p.jpg) }
#slideshow div:nth-of-type(3) { background-image:url(../images/slide/old-tenement-house_320_p.jpg) }
#slideshow div:nth-of-type(4) { background-image:url(../images/slide/city-1591564_320_p.jpg) }
}
@media (min-height: 481px) and (orientation : portrait){
#slideshow div:nth-of-type(1) { background-image:url(../images/slide/leipzig-sachsen-architektur_705_p.jpg) }
#slideshow div:nth-of-type(2) { background-image:url(../images/slide/dresden-stadt-architektur_705_p.jpg) }
#slideshow div:nth-of-type(3) { background-image:url(../images/slide/old-tenement-house_705_p.jpg) }
#slideshow div:nth-of-type(4) { background-image:url(../images/slide/city-1591564_705_p.jpg) }
}
@media (min-height: 940px) and (orientation : portrait){
#slideshow div:nth-of-type(1) { background-image:url(../images/slide/leipzig-sachsen-architektur_1049_p.jpg) }
#slideshow div:nth-of-type(2) { background-image:url(../images/slide/dresden-stadt-architektur_1049_p.jpg) }
#slideshow div:nth-of-type(3) { background-image:url(../images/slide/old-tenement-house_1049_p.jpg) }
#slideshow div:nth-of-type(4) { background-image:url(../images/slide/city-1591564_1049_p.jpg) }
}
@media (min-height: 1400px) and (orientation : portrait){
#slideshow div:nth-of-type(1) { background-image:url(../images/slide/leipzig-sachsen-architektur_1394_p.jpg) }
#slideshow div:nth-of-type(2) { background-image:url(../images/slide/dresden-stadt-architektur_1394_p.jpg) }
#slideshow div:nth-of-type(3) { background-image:url(../images/slide/old-tenement-house_1394_p.jpg) }
#slideshow div:nth-of-type(4) { background-image:url(../images/slide/city-1591564_1394_p.jpg) }
}
@media (min-height: 1860px) and (orientation : portrait){
#slideshow div:nth-of-type(1) { background-image:url(../images/slide/leipzig-sachsen-architektur_2048_p.jpg) }
#slideshow div:nth-of-type(2) { background-image:url(../images/slide/dresden-stadt-architektur_2048_p.jpg) }
#slideshow div:nth-of-type(3) { background-image:url(../images/slide/old-tenement-house_2048_p.jpg) }
#slideshow div:nth-of-type(4) { background-image:url(../images/slide/city-1591564_2048_p.jpg) }
}

/* captions */
#slideshow p::before {
	content: "";
	display:block !important;
	position:absolute;
	z-index:1 !important;
	top:15px;
	height:200px;
	width:300px;
	left:-70px;
	-webkit-transform:rotate(360deg);
	border-style: solid;
	border-width: 0 0 200px 50px;
	border-color: transparent transparent #ffffff transparent;
	opacity:0.7
}

#slideshow p { position:absolute; z-index:2; right:5vw; display:none; padding:0; margin:0; color:transparent;top:calc(50% - 100px) }
#slideshow p.se1 {display:inline-block; z-index:9 }
#slideshow p.se1 a {
	text-decoration:none;
	color:rgb(255, 105, 79);
}

#slideshow p span{
	display: flex;
	height:200px;
	align-items: center;
	justify-content: center;
	padding-left:15px;
	padding-right:10px;
	position:relative;
	z-index:999;
	min-width: 235px;
	text-align:center;
}
#slideshow .fx:first-child + p + div ~ div + p, #slideshow .fx1 + p { z-index:1 }
#slideshow .fx:first-child + p.se1 + div ~ div + p.se1, #slideshow .fx1 + p.se1 { z-index:9 }
#slideshow .fx + p, #slideshow .fx1 + p { 
	width: 300px;
	height: 0px;
	-webkit-transform:rotate(360deg);
	border-style: solid;
	border-width: 0 0 200px 50px;
	border-color: transparent transparent #ffffff transparent;
	color:rgb(255, 105, 79); 
	font-family: "Sedgwick Ave Display";
	-webkit-animation:caption 9s 1s both; 
	animation:caption 9s 1s both;
	font-size:1.5rem;
	line-height:1.8;
	z-index:9
}
@media (min-width: 565px){
}
@media (min-width: 768px) {

	/* captions */
	#slideshow p::before {
		content: "";
		display:block !important;
		position:absolute;
		z-index:1 !important;
		top:30px;
		height:400px;
		width:600px;
		left:-140px;
		-webkit-transform:rotate(360deg);
		border-style: solid;
		border-width: 0 0 400px 100px;
		border-color: transparent transparent #ffffff transparent;
		opacity:0.7
	}
	
	#slideshow p { position:absolute; z-index:2; right:18vw; display:none; padding:0; margin:0; font-size:2.5vw; color:transparent;top:calc(50% - 200px) }
	#slideshow p.se1 {display:inline-block; z-index:9 }
	#slideshow p.se1 a {
		text-decoration:none;
		color:rgb(255, 105, 79);
	}
	
	#slideshow p span{
		display: flex;
		height:400px;
		align-items: center;
		justify-content: center;
		padding-left:30px;
		position:relative;
		z-index:999;
		min-width: 470px;
		text-align:center;
	}
	#slideshow .fx:first-child + p + div ~ div + p, #slideshow .fx1 + p { z-index:1 }
	#slideshow .fx:first-child + p.se1 + div ~ div + p.se1, #slideshow .fx1 + p.se1 { z-index:9 }
	#slideshow .fx + p, #slideshow .fx1 + p { 
		width: 600px;
		height: 0px;
		-webkit-transform:rotate(360deg);
		border-style: solid;
		border-width: 0 0 400px 100px;
		border-color: transparent transparent #ffffff transparent;
		color:rgb(255, 105, 79); 
		font-family: "Sedgwick Ave Display";
		-webkit-animation:caption 9s 1s both; 
		animation:caption 9s 1s both;
		font-size:2.5vw;
		line-height:1.8;
		z-index:9
	}
	
}
@media (min-width: 992px) {
}
@media (min-width: 1200px) {
}




@-webkit-keyframes caption {
  0% { opacity:0; -webkit-transform:translate3d(100%,0,0) }
  20% { opacity:1; -webkit-transform:none }
  70% { opacity:1; -webkit-transform:none }
  100% { opacity:0; -webkit-transform:translate3d(-500%,0,0) }
}
@keyframes caption {
  0% { opacity:0; transform:translate3d(100%,0,0) }
  20% { opacity:1; transform:none }
  70% { opacity:1; transform:none }
  100% { opacity:0; transform:translate3d(-500%,0,0) }
}