body {
	padding:0;
	margin:0;	
/*	background:#DDDEFF url(../images/hintergrund.png) 0 0 repeat;*/
	background: #ffffff url("../images/isarsteine.jpg") no-repeat fixed center;
        background-size: cover;
	color:#00054D;
	font: 20px "Helvetica";
}
#wrapper {
	text-align:center;			
}
#portfolio {	
	position:relative;
	margin:0 auto;
	width:90%;	
}
h1 {
	font: 60px "Helvetica";
}
h2 {
	font: 30px "Helvetica";
}
h3 {
	text-align: left;
	font: 22px "Helvetica";
	margin: 5% 5%;
}
p {
	text-align: left;
	font: 18px "Helvetica";
	margin:5% 5%;
}
#adresse {
	list-style: none;
	text-align: left;
	margin-left:10%;
	
}
h1 {
	padding:60px 0 20px 0;
	margin: 0 0 0 30%;
	-moz-animation-name:pushingHeadline;
	-moz-animation-duration:3s;
	-moz-animation-iteration-count:1;
	-webkit-animation-name: pushingHeadline;
	-webkit-animation-duration:3s;
	-webkit-animation-iteration-count:1;
	animation-name: pushingHeadline;
	animation-duration:3s;
	animation-iteration-count:1;
}
@-webkit-keyframes pushingHeadline {
	0% {		text-indent:-2000px;	}
	100% {	text-indent:0px;	}	
}
@-moz-keyframes pushingHeadline {
	0% {		text-indent:-2000px;	}
	100% {	text-indent:0px;	}	
}
h1 img {

cursor:url(../images/kreis.gif), pointer;
	width:100px;
	margin: 0 -20px -20px 0;
	_display:none;
}

h2 {
	margin-right: 15%;
	padding:0;
	text-align: right;
	line-height:1;
}

.menu {
	height:160px;
	left:50px;
	top:0;
	position:absolute;
	background:rgb(0,5,77);
	background:rgba(0,5,77,.33);
}
.menu, .menu li {
	list-style-type:none;	
	margin:0;
	padding:0;
	width:75px;
}
.menu li {
 	margin:10px 0 0 0;
}
.menu a {

	margin:0 auto;
	display: block;
	font: bold 55px "Helvetica", Arial;
	text-decoration: none;
	color:#00FF00;
	width:60px;
	height:60px;	
	-webkit-border-radius: 30x;
	-moz-border-radius: 30px;
	border-radius: 30px;
	background:rgb(0,5,77);
	background:rgba(0,5,77,.75);
}

.menu .facebook:hover {
	background:#3b5998;	
	color:#fff;
}
.menu .twitter:hover {
	background:#bbd6e4;	
	color:#f0f0f0;
}
.menu .email:hover {
	background:#fff;
	color:#09f;
}
.menu:after {
	position:absolute;	
	content:"";	
	top:134px;
	left:11px;
	width:2px;
	height:2px;
	-moz-transform: rotate(45deg); 
	-webkit-transform: rotate(45deg); 
	-o-transform:  rotate(45deg); 
	transform: rotate(45deg);	
	-ms-transform: matrix(.7071, .7071, -.7071, .7071, 0, 0); 
	border-width:25px;
	border-style:solid;
	border-color: transparent rgba(0,5,77,.33) rgba(0,5,77,.333) transparent;
}
#content {
	width: 95%; max-width: 1000px;
	display: block;
	text-align:center;
	margin:5% 14%;
}
.portfolio {
	list-style: none;
	border:0;
	padding:0;
	margin:0;	
}
.portfolio li {
	float:left; 
	text-align:left;
	width:250px; 
	height:200px;
	margin:0; 
	padding:0;

	position: relative;	
}
.portfolio li a img {
	border:10px solid rgb(0,5,77);
	border-color:rgba(0,5,77,.5) rgba(0,5,77,.505);
}
.portfolio div {
	opacity:0;
	position:absolute; 
	left:0;
	bottom:30px;
	height:170px; 
	width:220px;
	overflow:hidden;
	color:#FFF;
}


.portfolio li:hover div,
.portfolio li:active div,
.portfolio li:focus div {
	 
	opacity:1;
	position:absolute; 
	left:0;	
	bottom:30px;
	height:0px; 
	width:220px;
	text-align:left;
	background: rgb(0,5,77);
	background: rgba(0,5,77,.90); 	
	color:#FFF;
	-moz-animation-name:slide;
	-moz-animation-duration:10s;
	-moz-animation-iteration-count:1;
	-webkit-animation-name: slide;
	-webkit-animation-duration:10s;
	-webkit-animation-iteration-count:1;
	animation-name: slide;
	animation-duration:10s;
	animation-iteration-count:1;
}
@-webkit-keyframes slide {
	0% {		height:0px;		}
	25% {		height:170px;	}
	75% {		height:170px;	}
	100% {	height:0px;	}	
}
@-moz-keyframes slide {
	0% {		height:0px;		}
	25% {		height:170px;	}
	75% {		height:170px;	}
	100% {	height:0px;	}	
}
@-keyframes slide {
	0% {		height:0px;		}
	25% {		height:170px;	}
	75% {		height:170px;	}
	100% {	height:0px;	}	
}
.portfolio div h3,
.portfolio div p {
	color:#FFF;
	margin: 10px 20px 20px 20px;
	padding:0;
}
.portfolio div h3 {
	margin-top:30px;
}



@media only screen and (max-width: 800px) {
	#portfolio {	
		width:90%;
	}
       

	h1 {
	font: 50px "Helvetica";
	}
	h2 {
	font: 28px "Helvetica";
	}
/*
padding:60px 0 20px 0;
	margin: 0 0 0 30%;

	h1 {
		padding:170px 0 0 0;  /*top-right bottom-left
		margin:0 0 70px 125px;		
	}
	h1 img {
		margin:-150px -175px 25px 0;
	}*/
	
	.menu {
		left:0px;
	}
}

@media only screen and (max-width: 550px) {
	#portfolio {	
		width:90%;	
	}
        

	h1 {
		line-height:.9;	
		font: 38px "Helvetica";
		padding:150px 0 0 0;
		margin:0 0 25px 25px;			
	}
	h2 {
		font: 20px "Helvetica";
	}
	.menu {
		height:100px;
		left:0;
	}
	.menu, .menu li {
		width:52px;
	}
	.menu a {
		font-size:35px;
		width:40px;
		height:40px;	
		-webkit-border-radius: 20x;
		-moz-border-radius: 20px;
		border-radius: 20px;
	}
	.menu:after {	
		top:81px;
		left:7px;
		width:2px;
		height:2px;
		border-width:18px;
	}
}



.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
/* IE-Patch für IE 7*/
*:first-child+html .clearfix { min-height: 0; } 
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */