/* CSS Document */

html, body
{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: #FFF;
	text-align: center;
	color: #333;
	font-size: 16px;
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	line-height: 1
}

h1, h2, h3, h4, h5, h6, p, img, div
{
	margin: 0;
	padding: 0;
	outline: 0;
	border: 0
}

a, a:active
{
	color: #333;
	transition: color 0.5s;
	-webkit-transition: color 0.5s
}

a:hover
{
	color: #0CF
}

#hintergrund
{
	position: fixed;
	width: 100%;
	height: 100%;
	display: none
}

#werte
{
	position: fixed;
	top: 10px;
	padding: 5px 10px 5px 10px;
	font-size: 0.75em;
	line-height: 1.25em;
	letter-spacing: 0.125em;
	text-align: left;
	background-color: rgba(255, 255, 255, 0.7);
	box-shadow: 0px 0px 3px #000;
	z-index: 10
}

#werte span
{
	letter-spacing: normal
}

#containerProjekte
{
	position: absolute;
	width: 100%;
	height: 100%
}

.projekt
{
	position: relative;
	cursor: pointer;
	opacity: 0.5;
	transition: opacity 0.5s;
	-webkit-transition: opacity 0.7s;
	border: 1px solid #FFF
}

.projekt:hover
{
	opacity: 1.0
}

.projekt:first-child
{
	margin-top: 170px	
}

#activ
{
	position: absolute;
	opacity: 0.0
}

#projektDetails
{
	position: relative;
	background-color: rgba(255, 255, 255, 0.8);
	z-index: 2;
	display: none
}

#textDetails
{
	text-align: justify;
	overflow: auto
}

#slideshow
{
	border: 1px solid #333;
	overflow: hidden
}

#slideshow img
{
	position: relative;
	vertical-align: bottom
}

#slideshow img:first-child
{
	margin-top: 0px
}

#closeDetails, #prev, #next
{
	cursor: pointer;
	z-index: 10
}

#prev, #menu
{
	display: none
}

#bildNr
{
	width: 50px;
	text-align: center
}

#closeLayer
{
	position: fixed;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 1;
	cursor: pointer
}

@media screen and (min-width: 320px) and (max-width: 479px)
{
	.projekt
	{
		width: 45%;
		margin: 1.666666666666667%
	}
	
	#projektDetails
	{
		width: 100%;
		height: 450px;
		margin-top: 1.666666666666667%;
		margin-bottom: 1.666666666666667%;
		text-align: left
	}
	
	#activ
	{
		width: 20px;
		height: 10px;
		top: -10px
	}
	
	#projektDetails h2
	{
		position: relative;
		width: 300px;
		top: 10px;
		left: 50%;
		margin: 0px 0px 20px -150px;
		text-align: left
	}
	
	#textDetails
	{
		position: relative;
		width: 300px;
		height: 180px;
		top: 15px;
		left: 50%;	
		-webkit-margin-before: 0;
		-webkit-margin-after: 0;
		-webkit-margin-start: 0;
		-webkit-margin-end: 0;
		margin-left: -150px
	}
	
	#link
	{
		position: relative;
		left: 50%;
		margin-left: -150px
	}
	
	#slideshow
	{
		position: relative;
		width: 300px;
		height: 156px;
		left: 50%;
		margin: 0px 0px 10px -150px
	}
	
	#slideshow img
	{
		width: 300px;
		height: 156px
	}
	
	#closeDetails
	{
		position: absolute;	
		width: 30px;
		height: 30px;
		top: 10px;
		left: 50%;
		margin-left: 122px
	}
	
	#prev, #next
	{
		position: absolute;
		width: 30px;
		height: 15px;
		top: 220px;
		left: 50%
	}
	
	#prev
	{
		margin-left: 40px
	}
	
	#next
	{
		margin-left: 122px
	}
	
	#bildNr
	{
		position: absolute;
		top: 220px;
		left: 50%;
		margin-left: 72px
	}
}

@media screen and (min-width: 480px) and (max-width: 767px)
{
	.projekt
	{
		width: 28%;
		margin: 1.25%
	}
	
	#projektDetails
	{
		width: 100%;
		height: 515px;
		margin-top: 1.25%;
		margin-bottom: 1.25%;
		text-align: left
	}
	
	#activ
	{
		width: 20px;
		height: 10px;
		top: -10px
	}
	
	#projektDetails h2
	{
		position: relative;
		width: 460px;
		top: 10px;
		left: 50%;
		margin: 0px 0px 20px -230px;
		text-align: left
	}
	
	#textDetails
	{
		position: relative;
		width: 460px;
		height: 160px;
		top: 15px;
		left: 50%;	
		-webkit-margin-before: 0;
		-webkit-margin-after: 0;
		-webkit-margin-start: 0;
		-webkit-margin-end: 0;
		margin-left: -230px
	}
	
	#link
	{
		position: relative;
		left: 50%;
		margin-left: -230px
	}
	
	#slideshow
	{
		position: relative;
		width: 460px;
		height: 239px;
		left: 50%;
		margin: 0px 0px 10px -230px
	}
	
	#slideshow img
	{
		width: 460px;
		height: 239px
	}
	
	#closeDetails
	{
		position: absolute;	
		width: 30px;
		height: 30px;
		top: 10px;
		left: 50%;
		margin-left: 202px
	}
	
	#prev, #next
	{
		position: absolute;
		width: 30px;
		height: 15px;
		top: 300px;
		left: 50%
	}
	
	#prev
	{
		margin-left: 120px
	}
	
	#next
	{
		margin-left: 202px
	}
	
	#bildNr
	{
		position: absolute;
		top: 300px;
		left: 50%;
		margin-left: 152px
	}
}

@media screen and (min-width: 768px) and (max-width: 1023px)
{
	.projekt
	{
		width: 20.25%;
		margin: 1%
	}
	
	#projektDetails
	{
		width: 100%;
		height: 310px;
		margin-top: 1%;
		margin-bottom: 1%;
		text-align: left
	}
	
	#activ
	{
		width: 30px;
		height: 15px;
		top: -15px
	}
	
	#projektDetails h2
	{
		position: absolute;
		top: 10px;
		left: 50%;
		margin-left: -374px
	}
	
	#textDetails
	{
		position: absolute;
		width: 320px;
		height: 215px;
		top: 50px;
		left: 50%;
		margin-left: -374px
	}
	
	#link
	{
		position: absolute;
		top: 280px;
		left: 50%;
		margin-left: -41px
	}
	
	#slideshow
	{
		position: absolute;
		width: 410px;
		height: 213px;
		top: 50px;
		left: 50%;
		margin-left: -40px
	}
	
	#slideshow img
	{
		width: 410px;
		height: 213px
	}
	
	#closeDetails
	{
		position: absolute;	
		width: 30px;
		height: 30px;
		top: 10px;
		left: 50%;
		margin-left: 342px
	}
	
	#prev, #next
	{
		position: absolute;
		width: 30px;
		height: 15px;
		top: 280px;
		left: 50%
	}
	
	#prev
	{
		margin-left: 260px
	}
	
	#next
	{
		margin-left: 342px
	}
	
	#bildNr
	{
		position: absolute;
		top: 280px;
		-webkit-margin-before: 0;
		-webkit-margin-after: 0;
		-webkit-margin-start: 0;
		-webkit-margin-end: 0;
		left: 50%;
		margin: 0px 0px 20px 292px
	}
}

@media screen and (min-width: 1024px)
{
	.projekt
	{
		width: 16%;
		margin: 1%
	}
	
	#projektDetails
	{
		width: 100%;
		height: 330px;
		margin-top: 1%;
		margin-bottom: 1%;
		text-align: left
	}
	
	#activ
	{
		width: 30px;
		height: 15px;
		top: -15px
	}
	
	#projektDetails h2
	{
		position: absolute;
		left: 50%;
		top: 10px;
		margin-left: -480px
	}
	
	#textDetails
	{
		position: absolute;
		width: 380px;
		height: 235px;
		top: 50px;
		left: 50%;
		margin-left: -480px
	}
	
	#link
	{
		position: absolute;
		width: 380px;
		top: 295px;
		left: 50%;
		margin-left: -480px;
		text-align: right
	}
	
	#slideshow
	{
		position: absolute;
		width: 500px;
		height: 260px;
		top: 50px;
		left: 50%;
		margin-left: -80px
	}
	
	#slideshow img
	{
		width: 500px;
		height: 260px
	}
	
	#closeDetails
	{	
		position: absolute;	
		width: 30px;
		height: 30px;
		top: 10px;
		left: 50%;
		margin-left: 450px
	}
	
	#prev, #next
	{
		position: absolute;
		width: 30px;
		height: 15px;
		left: 50%;
		margin-left: 435px
	}
	
	#prev
	{
		top: 250px
	}
	
	#next
	{
		top: 295px
	}
	
	#bildNr
	{
		position: absolute;
		top: 275px;
		left: 50%;
		margin-left: 425px
	}
}