.portfolio-container{
	position: relative;
	overflow: hidden;
	margin: 0 -1.2%;
	.transition(all 400ms ease);

		.portfolio-item{
			width: 30.8%;
			padding-bottom: 30.85%;
			display: inline-block;
			background-position: center;
    		background-size: cover;
    		margin: 1.2%;
    		position: relative;
    		overflow: hidden;
    		border-radius: @border-radius-base;
    		//.transition(~"opacity 900ms, transform 900ms cubic-bezier(0.075, 0.82, 0.165, 1), -webkit-transform 900ms cubic-bezier(0.075, 0.82, 0.165, 1)");

    			a{
    				position: absolute;
    				top: 0;
    				left: 0;
    				right: 0;
    				bottom: 0;
    				display: block;
    				z-index: 4;
    			}

				.ql_animations & .portfolio-item-hover-preload{
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					background-color: @gray-lighter;
					//.transition( opacity 500ms );
					opacity: 1;
					.translate(0;-105%);
					z-index: 3;
				}
				.ql_animations &.loaded.olivo-firstload .portfolio-item-hover-preload{
					//opacity: 0;
					.translate(0;-105%);
					.animation(olivo-preload-item 1200ms ease 400ms 1 forwards);
				}


				


    			.portfolio-item-hover{
    				position: absolute;
    				top: 0;
    				left: 0;
    				right: 0;
    				bottom: -2px;
    				vertical-align: bottom;
    				display: block;
    				background-color: #fff;
    				overflow: hidden;
    				.transition( ~"opacity 300ms, transform 600ms cubic-bezier(0.075, 0.82, 0.165, 1)" );
    				//.translate( 0; -110%);
    				opacity: 0;

    					.portfolio-item-content{
    						position: absolute;
    						bottom: 20px;
    						left: 25px;
    						right: 25px;
    						text-align: right;
    						opacity: 0;
    						.transition( ~"opacity 200ms, transform 500ms cubic-bezier(0.075, 0.82, 0.165, 1)" );
		    				.translate( -35px; 0);
    					}

    					.portfolio-item-title{
    						margin: 0;
    						text-align: right;
    						.font-size(17);
		    				background-color: #fff;
		    				@shadow: 10px 0 0 #fff, -10px 0 0 #fff;
		    				.box-shadow(@shadow);
		    				display: inline;
		    				padding: 6px 0;
		    				position: relative;
    					}

    			}
    			.no-touch &:hover .portfolio-item-hover{
    				opacity: 1;
					.translate( 0; 0);

						.portfolio-item-content{
    						opacity: 1;
							.translate( 0; 0);
    					}
    			}

    			.portfolio-item-categories{
					padding-left: 0;
					list-style: none;
					margin: 0;
					text-align: right;
					opacity: 0;
					.transition( ~"opacity 300ms, transform 300ms" );
					.transition-delay(300ms);
					.translate( -15px; 0);

						li{
							.font-size(12);
							display: inline-block;
							margin-left: 10px;
						}
    			}
    			.no-touch &:hover  .portfolio-item-categories{
					opacity: 0.7;
					.translate( 0; 0);
    			}

    		&.landscape-big{
    			width: 64%;
    			padding-bottom: 64.05%;

    				.portfolio-item-title{
						.font-size(20);
					}
    		}

    		&.layout-portrait{
    			width: 22.5%;
    			padding-bottom: 32.5%;
    		}

    		.portfolio-item-image{
    			display: none;
    		}


		}/* portfolio-item */


		/*
		4 Columns
		-------------------------*/
		&.olivo-4-columns{

				.portfolio-item{
					width: 23.4%;
					padding-bottom: 23.4%;
					margin: 0.8%;

						&.landscape-big{
			    			width: 48.4%;
			    			padding-bottom: 48.4%;

			    				.portfolio-item-title{
									.font-size(20);
								}
			    		}
				}

		}

		/*
		2 Columns
		-------------------------*/
		&.olivo-2-columns{

				.portfolio-item{
					width: 48%;
					padding-bottom: 48%;
					margin: 1%;

						.portfolio-item-title{
							.font-size(20);
						}

						&.landscape-big{
			    			width: 98%;
			    			padding-bottom: 98%;

			    				.portfolio-item-title{
									.font-size(20);
								}
			    		}
				}

		}

		/*
		1 Columns
		-------------------------*/
		&.olivo-1-columns{

				.portfolio-item{
					width: 100%;
					padding-bottom: 100%;
					margin: 1.5% 0;

						.portfolio-item-title{
							.font-size(32);
							@shadow: 20px 0 0 #fff, -20px 0 0 #fff;
		    				.box-shadow(@shadow);
		    				padding: 12px 0;
						}

						.portfolio-item-content{
    						bottom: 40px;
    						left: 45px;
    						right: 45px;
    					}

						&.landscape-big{
			    			width: 100%;
			    			padding-bottom: 100%;

			    				.portfolio-item-title{
									.font-size(32);
								}
			    		}
				}

		}
	
	&.portfolio-thirds .portfolio-item{
    		.ql_animations &::before{
					content: "";
					position: absolute;
					top: -10px;
					left: -10px;
					right: -10px;
					bottom: -10px;
					background-color: #fff;
					opacity: 1;
					z-index: 2;
					.transition( opacity 400ms );
					.transition-delay(800ms);
				}
				.ql_animations &.loaded::before{
					opacity: 0;
				}
	}
}

/*
Filter
============================= */
.ql_filter{
	position: relative;
	margin-right: 0;


		ul{
			padding-left: 0;
			margin: 10px 0;
			margin-right: 0;
			list-style: none;
			text-align: right;

				li{
					display: inline-block;
					margin: 5px 10px;
					.font-size(14);
					font-family: @headings-font-family;

						&.active a{
							color: @heroColor;

								&::before, &::after{
									display: none;
								}
						}

						a{
							color: @gray-light2;
							padding: 5px 8px;
							display: block;
							text-decoration: none;
							position: relative;

								&::before, &::after{
									content: "";
									position: absolute;
									top: 50%;
									height: 1px;
									border-bottom: 1px solid @gray-light2;
									.transition(all 150ms ease);
								}
								&::before{
									left: 0;
									right: 50%;
								}
								&::after{
									right: 0;
									left: 50%;
								}

								&:hover{
									text-decoration: none;
									color: @heroColor;

										&::before{
											right: 100%;
										}
										&::after{
											left: 100%;
										}
								}
								&:active{
									position: relative;
									bottom: -1px;
								}
						}
				}
		}


}




/*
Portfolio Thirds
============================= */
.portfolio-thirds{

		.portfolio-item{
			width: 30.75%;
			height: auto;
    		margin: 1.2%;
    		padding-bottom: 1px;

    			.portfolio-item-image{
	    			display: block;
	    		}

		}/* portfolio-item */



		/*
		4 Columns
		-------------------------*/
		&.olivo-4-columns{

				.portfolio-item{
					width: 23.4%;
					padding-bottom: 0;
					margin: 0.8%;

						.portfolio-item-title{
							.font-size(14);
						}
				}
		}


		/*
		2 Columns
		-------------------------*/
		&.olivo-2-columns{

				.portfolio-item{
					width: 48%;
					padding-bottom: 0;
					margin: 1%;

						.portfolio-item-title{
							.font-size(20);
						}
				}

		}


		/*
		1 Columns
		-------------------------*/
		&.olivo-1-columns{

				.portfolio-item{
					width: 100%;
					padding-bottom: 0;
					margin: 1.5% 0;

						&.landscape-big{
			    			width: 100%;
			    			padding-bottom: 0;
			    		}

			    		img{
			    			width: 100%;
			    		}
				}
		}

}




/*
Load More Button
============================= */
.portfolio-load-wrapper{
	text-align: center;
	margin: 3.125em 0;

		.portfolio-load-more{
			.ql_primary_btn;
			position: relative;
			overflow: hidden;
			.transition(all 600ms cubic-bezier(0.075, 0.82, 0.165, 1));

				.olivo-spinner{
					visibility: hidden;
					position: absolute;
					top: 50%;
					left: 50%;
					.translate(-50%;-50%);
					margin: 0;
					width: 20px;
					height: 20px;

				}
		
			&.loading_items{
				border-radius: 50px;
				width: 48px;
				height: 48px;
				padding: 0;
				text-indent: -999px;

					.olivo-spinner{
						visibility: visible;
					}
			}
		}

}

.portfolio-container .olivo-loadmore-item{
	height: 70px;
	background: rgb(245,245,245);
	background: -moz-linear-gradient(top,  rgba(245,245,245,1) 0%, rgba(255,255,255,1) 100%);
	background: -webkit-linear-gradient(top,  rgba(245,245,245,1) 0%,rgba(255,255,255,1) 100%);
	background: linear-gradient(to bottom,  rgba(245,245,245,1) 0%,rgba(255,255,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#ffffff',GradientType=0 );

}







/*
Single Portfolio
============================= */
.olivo-portfolio-type.single{
	article{
		margin-bottom: 1.11111111111111em;

			.metadata{
				a{
					color: @heroColor;
				}
			}
	}

	.post-navigation{
		margin-top: 1.66666666666667em;
	}
}


.single-portfolio-container{

		.portfolio-item{
			position: relative;
			margin-bottom: 60px;
			.transition(~"opacity 900ms, transform 900ms cubic-bezier(0.075, 0.82, 0.165, 1), -webkit-transform 900ms cubic-bezier(0.075, 0.82, 0.165, 1), box-shadow 300ms");
			.ql_shadow_w_hover;
				img{
					width: 100%;
				}

				.portfolio-item-title{
					position: absolute;
					left: 25px;
					right: auto;
					bottom: 0;
					margin-bottom: 0;
					color: @heroColor;
					padding: 10px 18px;
					opacity: 1;
					z-index: 3;
					background-color: #fff;
					max-width: 76%;
					font-size: 17px;
					.ql_shadow;
					.transition( ~"opacity 200ms, transform 700ms cubic-bezier(0.075, 0.82, 0.165, 1)" );
					.transition-delay(150ms);
					.translate( 0; 50%);
				}

		}/* portfolio-item */
		.portfolio-item-portrait{
			width: 60%;
			margin-left: auto;
			margin-right: auto;
		}

}

.single-portfolio.portfolio_layout_vertical #content{
	padding-right: 60px;
}

@-webkit-keyframes olivo-preload-item {
  0% {
    .translate(0;-105%);
    opacity: 1;
  } 
  50% {
    .translate(0;0);
    opacity: 1;
  }
  100% {
  	.translate(0;0);
    opacity: 0;
  }  
}

@keyframes olivo-preload-item {
  0% {
    .translate(0;-105%);
    opacity: 1;
  } 
  50% {
    .translate(0;0);
    opacity: 1;
  }
  100% {
  	.translate(0;0);
    opacity: 0;
  }   
}






.olivo-double-bounce1, .olivo-double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #fff;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  
  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  animation: sk-bounce 2.0s infinite ease-in-out;
}

.olivo-double-bounce2 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

@-webkit-keyframes sk-bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bounce {
  0%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}