#portfolio
	{
	position: relative;
	float: left;
	clear: both;
	width: 100%;
	will-change: transform;
	z-index: 1;
	}
	
.homepage-portfolio #portfolio-item-container li.portfolio-item
	{
	margin-bottom: 0;
	padding: 0;
	border: 1px #000 solid;
	}

.homepage-portfolio .row
	{
	margin:0;
	}

#portfolio-item-container
	{
	margin: 0;
	padding: 0;
	}
	
#portfolio-wrapper 
	{
	position: relative;
	float: left;
	clear: both;
	width: 100%;
	overflow: hidden;
	z-index: 2;
	}


#portfolio-item-container li.portfolio-item
	{
	float: left;
	padding: 0 5px 0;
	margin-bottom: 10px;
	width: 33.333333%;
	text-align:center;
	overflow: hidden;
	}

.portfolio-item.animate-item 
	{
	opacity: 1;
	filter: alpha(opacity=100);
	z-index: 1;
	}
	
.ie8 .portfolio-item.animate-item, .ie9 .portfolio-item.animate-item 
	{
	filter: alpha(opacity=100);
	opacity: 1;
	}

.portfolio-item-wrapper 
	{
	position: relative;
	perspective: 600px;
	-webkit-perspective: 600px;
	overflow: hidden;
	z-index: 1;
	}	

.portfolio-item img 
	{
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	}

.portfolio-overlay 
	{
	position: absolute;
	background: url(/img/portfolio-overlay.png) 0 0 repeat;
	width: 100%;
	height: 100%;
	outline: 1px solid transparent;
	}

.ie8 .portfolio-overlay, .ie9 .portfolio-overlay
	{
	opacity: 0;
	filter: alpha(opacity=0);
	}

.ie8 .portfolio-item:hover .portfolio-overlay, .ie9 .portfolio-item:hover .portfolio-overlay 
	{
	opacity: 1;
	filter: alpha(opacity=100);
	}

.overlay-wrapper 
	{
	display: table;
	width: 100%;
	height: 100%;
	}

.overlay-cell 
	{
	display: table-cell;
	vertical-align: top;
	text-align: left;
	width: 100%;
	height: 100%;
	z-index: 1;
	}

.overlay-cell > a
	{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-decoration: none;
	z-index: 2;
	}
	
.portfolio_title
	{
	position: relative;
	float: left;
	clear: both;
	max-width: 100%;
	margin: 50px 0 0 0;
	padding: 0 28px 0 28px;
	z-index: 1;
	}
	
.portfolio_title span
	{
	display: block;
	position: relative;
	float: left;
	clear: both;
	border: 1px #cee7ff solid;
	padding: 8px 11px 13px 11px;
	font: 300 35px/48px 'Exo 2', sans-serif;
	color: #fff;
	}

.portfolio_descr
	{
	position: relative;
	float: left;
	clear: both;
	max-width: 100%;
	margin: 13px 0 0 0;
	padding: 0 28px 0 28px;
	font: 300 italic 24px/28px 'Exo 2', sans-serif;
	text-align: left;
	color: #e2f1ff;
	z-index: 1;
	}
	
.portfolio_site
	{
	position: absolute;
	left: 28px;
	bottom: 42px;
	right: 28px;
	z-index: 3;
	}
	
.portfolio_site a
	{
	display: block;
	position: relative;
	float: left;
	clear: both;
	max-width: 100%;
	padding: 11px 17px 10px 17px;
	background: #444af9;
	font: 300 32px/32px 'Exo 2', sans-serif;
	text-decoration: none;
	text-align: left;
	color: #fff;
	}

.portfolio_site a:hover
	{
	padding: 10px 16px 9px 16px;
	border: 1px #fff solid;
	background: transparent;
	text-decoration: none;
	}
	
#portfolio-wrapper.clearfix:after 
	{
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
	
.animated 
	{
	/*-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;*/
	}

@-webkit-keyframes fadeInUpBig 
	{
	0% 
		{
		opacity: 0;
		-webkit-transform: translateY(2000px);
		transform: translateY(2000px);
	}	

	100% 
		{
		opacity: 1;
		-webkit-transform: translateY(0);
		transform: translateY(0);
		}
	}

@keyframes fadeInUpBig 
	{
	0% 
		{
		opacity: 0;
		-webkit-transform: translateY(2000px);
		-ms-transform: translateY(2000px);
		transform: translateY(2000px);
		}

	100%
		{
		opacity: 1;
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
		}
	}

.fadeInUpBig 
	{
	-webkit-animation-name: fadeInUpBig;
	animation-name: fadeInUpBig;
	}
	
#portfolio_all 
	{
	display: block;
	position: relative;
	float: left;
	clear: both;
	margin: 0 auto 0;
	padding: 21px 0 0 0;
	width: 100%;
	height: 61px;
	background: #2329e6;
	box-shadow: 0 4px 3px rgba(0,0,0,0.2);
	font: 21px/21px 'Ubuntu', sans-serif;
	text-decoration: underline;
	text-align: center;
	color: #fefefe;
	z-index: 2;
	}
#portfolio_all:hover
	{
	text-decoration: none;
	background: #f12323;
	}
	
#portfolio_all::before
	{
	content: " ";
	display: block;
	position: absolute;
	top: -13px;
	left: 50%;
	margin: 0 0 0 -16px;
	height: 13px;
	width:  32px;
	background: url(/img/portfolio_all.png) no-repeat center;
	}
#portfolio_all:hover::before
	{
	background: url(/img/portfolio_all_hover.png) no-repeat center;
	}