#wrapper {
	background-color: #CCC;
	list-style: none;
	padding: 20px 0;
	margin: 0 auto;
	text-align: center;
	width: 100%;
} 			
#portfolio {	
	width: 100%;
	margin:0 auto;
}
h3 {
	font-family: 'Lato', Calibri, Arial, sans-serif;
	font-size: 15px
	font-weight: 600;
}
h3 span{
	display:block;
}

h3 p{
	font-family: 'Lato', Calibri, Arial, sans-serif;
	font-size: 15px
	font-weight: 800;
}

@-webkit-keyframes pushingHeadline {
	0% {		text-indent:-2000px;	}
	100% {	text-indent:0px;	}	
}
@-moz-keyframes pushingHeadline {
	0% {		text-indent:-2000px;	}
	100% {	text-indent:0px;	}	
}
.portfolio {
	float: left; 
	list-style: none;
	border:0;
	padding:0;
	margin:0;	
}
.portfolio li {
	display: inline-block;
	margin: 10px 10px 0 10px;
	vertical-align: top;
	width: 350px;
	height: 220px;
	position: relative;
	padding:0;
}
.portfolio li a img {
	border:10px solid rgb(254,254,254);
	border-color:rgba(254,254,254,.5) rgba(254,254,254,.505);
	display: block;
	position: relative;
}
.portfolio div {
	opacity:0;
	position:absolute; 
	left:0;
	bottom:30px;
	height:190px; 
	width:320px;
	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:190px; 
	width:320px;
	text-align:left;
	background: rgb(177,177,177);
	background: rgba(177,177,177,.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:190px;	}
	75% {		height:190px;	}
	100% {	height:0px;	}	
}
@-moz-keyframes slide {
	0% {		height:0px;		}
	25% {		height:190px;	}
	75% {		height:190px;	}
	100% {	height:0px;	}	
}
.portfolio div h3{
	color:#FFF;
	margin: 10px 20px 20px 30px;
	padding:0;
}
.portfolio div p {
	color:#000;
	margin: 10px 20px 20px 30px;
	padding:0;
}
.portfolio div h3 {
	margin-top:30px;
}



@media screen and (max-width: 700px) { 
.container > header h1 span{
	display: block;
	font-size: 16px;
	font-weight: 300;
	font-family: 'AnimalsNormal';

}
}
@media screen and (max-width: 500px) { 
.container > header h1 span{
	display: block;
	font-size: 12px;
	font-weight: 400;
	font-family: Constantia, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
	text-shadow: none;
}
.codrops-demos a {
    display: inline-block;
    margin: 10px;
    color: #333;
    font-weight: 600;
    line-height: 20px;
    border-bottom: 4px solid transparent;
}

.codrops-demos a:hover {
	color: #883d59;
	border-color: #883d59;
}

.codrops-demos a.current-demo,
.codrops-demos a.current-demo:hover {
	color: #aaa;
	border-color: #aaa;
}
.codrops-demos {
	float: left;
	padding-top: 5px;
}
}
/* 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 */