body{
	background-color:	#555555;
	font-family:		courier new;
	font-weight:		100;
}

a:link { text-decoration:none; color:#000000; }
a:visited { text-decoration:none;  color:#000000; }
a:hover { text-decoration:none; color:#333333; }
a:active { text-decoration:none; color:#333333; }
a:focus { text-decoration:none; color:#333333; }

h1{
	width:				100%;
	text-align: 		center;
	font-weight:		normal;
	padding:			10px;
	padding:			10px;
	text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.75);
}

h2{
	font-weight:		normal;
	font-size:			20pt;
	width:				100%;
	text-align:			center;
	text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.75);
}

h3{
	font-weight:		normal;
	font-size:			15pt;
	width:				100%;
	text-align:			center;
	text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.75);
}

h4{
	font-weight:		normal;
	font-size:			12pt;
	width:				100%;
	text-align:			center;
	text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.75);
}

.mainContainer{
	width:				1030px;
	display: 			block;
	margin-left: 		auto;
  	margin-right: 		auto;
}

.headerContainer{
	width:				100%;
	height: 			80px;
	font-family: 		sans-serif;
	margin-top:			15px;
	padding-left:10px;
}

.middleContainer{
	width:				100%;
	overflow: 			hidden;
	color:				#cccccc;
}

.middleContainerThin{
	width:				100%;
	overflow: 			hidden;
	color:				#cccccc;
	padding-left:		10px;
	padding-right:		10px;
}

.horizontalLine{
	width: 1010px;
	height:1px;
	margin-left:10px;
	margin-top: 30px;
	margin-bottom: 30px;
	background-color: #484848;
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,1);
	-moz-box-shadow: 	0px 0px 10px 0px rgba(0,0,0,1);
	box-shadow: 		0px 0px 10px 0px rgba(0,0,0,1);
}

@font-face {
	font-family: sans-serif;
}

.footerContainer{
	width:				100%;
	margin-left:		10px;
	height:				30px;
}

h1{
	font-size:			17pt;
	margin:				0px;
	color:				#ffd882;
}

img[src$=".gif"], img[src$=".png"], img[src$=".jpg"] {
	image-rendering: -moz-crisp-edges;         /* Firefox */
    image-rendering:   -o-crisp-edges;         /* Opera */
    image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
}

.backButton{
	margin-left:10px;

	font-size:			13pt;
	width:				100%;
	text-align:			center;
}

/***************
SMALL IMAGES 
***************/
.myShadow{
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 	0px 0px 10px 0px rgba(0,0,0,0.75);
	box-shadow: 		0px 0px 10px 0px rgba(0,0,0,0.75);
}

.imageDiv{
	width:				100%;
	height:				100%;
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 	0px 0px 10px 0px rgba(0,0,0,0.75);
	box-shadow: 		0px 0px 10px 0px rgba(0,0,0,0.75);
}

/***************
SMALL IMAGES 
***************/
.smallImage{
	width:				330px;
	height:				250px;		
	float:				left;
	position:			relative;
}

.smallImage .imageDiv{
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

.smallImage:hover .imageDiv{
	 filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);
}

.smallImage img{
	display: block;
  	margin-left: auto;
  	margin-right: auto;
  	top:-30px;
	 filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);
}

.smallImage:hover img{
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}


/***************
BIG IMAGES 
***************/
.bigImage{
	width:				670px;
	height:				510px;		
	float:				left;
	position:			relative;
}
.bigImage .imageDiv{
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

.bigImage:hover .imageDiv{
	 filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);
}

.bigImage img{
	display: block;
  	margin-left: auto;
  	margin-right: auto;
  	top:-30px;
	 filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);
}

.bigImage:hover img{
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

/***************
TALL IMAGES 
***************/
.tallImage{
	width:				330px;
	height:				510px;		
	float:				left;
	position:			relative;
}
.tallImage .imageDiv{
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

.tallImage:hover .imageDiv{
	 filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);
}

.tallImage img{
	display: block;
  	margin-left: auto;
  	margin-right: auto;
  	top:-30px;
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);
}

.tallImage:hover img{
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

/***************
WIDE IMAGES 
***************/
.wideImage{
	width:				670px;
	height:				250px;		
	float:				left;
	position:			relative;
}

.wideImage .imageDiv{
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

.wideImage:hover .imageDiv{
	 filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);
}

.wideImage img{
	display: block;
  	margin-left: auto;
  	margin-right: auto;
  	top:-30px;
	 filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);
}

.wideImage:hover img{
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}


/***************
PROJEKTE SEITE
***************/

.projectElement{
	width:				330px;
	height:				200px;
	float:				left;
	margin-bottom:		10px;
	
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 	0px 0px 10px 0px rgba(0,0,0,0.75);
	box-shadow: 		0px 0px 10px 0px rgba(0,0,0,0.75);
}

.projectElement .projectElementImage{
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}


.projectElement:hover .projectElementImage{
	 filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);
}

.projectElement:hover .projectElementTextBackground{
	 opacity:			0.0;
}
.projectElement:hover .projectElementText{
	 opacity:			0.0;
}

.projectElementImage{
	width:				100%;
	height:				100%;
	background-size: contain;
	background-position:center;
	background-repeat:no-repeat;
}

.projectElementTextBackground{
	opacity:			0.7;
	background-color:	#777777;
	width:				100%;
	height:				40px;
	position:			relative;
	top:				-40px;
}

.projectElementText{
	font-size:			17pt;
	vertical-align: 	middle;
	line-height: 		40px;  
	margin:				0 auto;
	text-align:			center;
	color:				#f6b623;
	width:				100%;
	height:				40px;
	position:			relative;
	top:				-80px;
}


/***************
VITA SEITE
***************/
.vitaItemLeft{
	width:				150px;
	float:				left;
	font-size:			14pt;
}
.vitaItemRight{
	width:				860px;
	float:				left;
	font-size:			14pt;
}


/***************
ARCHIV SEITE
***************/
.archivLink{
	width:				100%;
	text-align:			center;
	
}

/***************
AKTUELLES SEITE
***************/
.aktuellesParagraph{
	width:				100%;
	text-align:			left;
}

/***************
VERKAUF
***************/
.verkaufImage{
	width:50%;
	height:100%;
	float:left;
	background-size: contain; 
	background-repeat: no-repeat; 
	background-position:center;
}