.metro-gallery{

	&:not(.nogaps){
		margin-bottom: -30px;
	}

	img{ 
		display: block;
	}
}

/* ==========================================================================
   PORTFOLIO
   ========================================================================== */ 
	.loop.type-portfolio{
		position: relative;
		width: 100%;		 

		.title, .title a{				
			text-decoration: none;
		}

		.title a:hover{
			text-decoration: none;
			opacity: 0.7;
		}

		&:hover{
			.overlay {
				opacity: 1;
			}	

		}

		.visible-title-wrapper {
			position: absolute;			
			background: rgba(255,255,255,0.8);
			transition: all .5s ease .1s;
			top: 0;
			left: 0;
			writing-mode: vertical-rl;
			transform: rotate(-180deg);
			will-change: left;
			text-align: right;
			backface-visibility: hidden;	

			.title{
				font-size: 0.75em;
				letter-spacing: 3px;
				opacity: 0.7;
				text-transform: uppercase;
				padding: 15px;
			}
		}

		&.style-2{
			overflow: hidden;

			.image-thumbnail img{ 
				@include transition( all 0.4s ease 0.1s);		
				backface-visibility: hidden;	
			}

			.portfolio-loop-item-wrapper{
				overflow: hidden;
				position: relative;
			}			
		}

		&.style-1{
			.text{
				padding: 20px 0;
			}
		}

		&.style-1.boxed{
			.text{
				padding: 25px 5px 5px;
			}

			&:hover{
				box-shadow: 0 0 10px rgba(0,0,0,0.2);
				transition: box-shadow .3s linear;
			}			
		}

		//margins
		.title{
			margin: 0;
		}

		p{
			margin: 20px 0 0 0;
		}

		.read_more{
			margin-top: 40px;
		}

		//terms
		.terms{
			display: block;
			font-size: 0.875em;

			a{
				text-decoration: none;
				position: relative;
				z-index: 3;
			}

			a:hover{
				text-decoration: none;
				opacity: 0.7;
			}																
		}


		.portfolio-link{
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
		}


		//overlay
		.overlay {
				
				.title{
					display: block;
					padding: 0;
					margin: 0;
					position: relative;	
				} 

				//terms
				.terms{
					margin-top: 0;
					font-size: .875em;
					font-style: italic;

						a:hover{
							opacity: 0.7;
						}																														
				}

		}

		//hover style 1
		&.hover-1{

			&:hover{
				.visible-title-wrapper{
					left: -100%;
					transition: all .5s ease;
				}

				.image-thumbnail img{ 
				}

				.overlay{		
					right: -1px;
					transition: all .5s ease;
				}
			}

			.overlay{
				right: -150%;
				position: absolute;
				width: calc(100% + 2px);
				padding: 20px;
				overflow: hidden;
				z-index: 2;
				top: 0;
				height: 100%;
				backface-visibility: hidden;
				@include transition( all .6s);
				background: rgba(255,255,255,0.9);
				will-change: right;
				display: flex;
				align-items: center;
				text-align: center;

				.title{
					color: #111;
				} 

				a,a:hover, .title{
					color: #111;
				}

				.text{		
					width: 100%;
					bottom: 20px;
					left: 20px;
				}		

				.title{
					font-size: 1.2em;
				} 

				.terms, .terms a{
					color: #777;
				}			
			}
		}

		//hover style 2
		&.hover-2{
			&:hover{

				.image-thumbnail img{ 
					opacity: 0.6;
				}

				.overlay{		
					transition: all .5s ease;
					opacity: 1;
				}

				.overlay .text{
					opacity: 1;
				} 

			}

			.overlay{
				bottom: 0;
				top: 0;
				position: absolute;
				width: 100%;
				padding: 20px;
				overflow: hidden;
				z-index: 2;
				opacity: 0;
				backface-visibility: hidden;
				@include transition( all .6s);
				background-color: rgba(0,0,0,0.8);
				backgaround: linear-gradient(0deg, rgba(0, 0, 0, 0.83) 20%, rgba(0, 0, 0, 0.59) 80%);
				display: flex;
				align-items: center;
				text-align: center;

				.text{		
					width: 100%;
					position: relative;
					@include transition( all .2s);
					opacity: 0;
					backface-visibility: hidden; 
				}		

				.title{
					font-size: 1.4em; 
				} 

				a,a:hover, .title, .text, .terms, .terms a{
					color: #fff;
				}		
			}

		}		
	}

 

	.loop.type-portfolio .image-thumbnail{
		position: relative;
		overflow: hidden;
		img{
			width: 100%;
			height: auto;
		}
	}


	.portfolio_list.masonry > .col{
		margin-bottom: 20px;
		padding-bottom: 20px;
	}

	.portfolio_list.border_grid > .row > .col{
		padding-bottom: 20px;
	}

	.load_more.button_ {
		margin: 40px auto 20px;
		border-radius: 30px;
		cursor: pointer;
	}


	@media screen and (min-width: 768px) {

		//1:1 columns
		.portfolio_list > .row > .col-sm-12 .style-1{

			.portfolio-loop-item-wrapper{
				display: flex;
				align-items: center;

				> *{
					flex: 0 0 50%;
					max-width: 50%;					
				}
			}

			.image-thumbnail img{
				width: 100%;
			}

			.text{
				padding: 40px;
			}

		}
	
		//metro double height img fix
		.double-height:not(.double-width) .portfolio img {
			margin-left: -50%;
		}
	}

	//carousel
	.rt-carousel .loop.type-portfolio.style-1:hover{
		box-shadow: none;
	}
	//hover style 1 in carousels
	.rt-carousel .loop.hover-1 .image-thumbnail img{ 	
		@include transition( none );	
	}
 

/* filter navigation
   ========================================================================== */
	.filter-holder {
		margin-bottom: 20px;
		width: 100%;
		font-size: 0.75em;
		border-style: solid;
		border-width: 0 0 2px;
		padding-bottom: 10px;
		font-weight: bold;
	}

	.filter-holder > ul{
		position: relative; 
		line-height: 1;

		> li{
			@include display-flex;
			@include justify-content(space-between);
		}
	}

	.filter-holder ul{
		list-style: outside none none;
		margin: 0;
		padding: 0; 
	}

	.filter_navigation li{
		display: inline-block;
		position: relative;
		line-height: 1;

		> span{
			letter-spacing: 2px;
		}

		ul{
			margin-left: 30px;
		}

		a {
			padding: 0 8px 10px;
			text-decoration: none;
			text-transform: uppercase;
			cursor: pointer;
			position: relative;
		}
	}

	.filter_navigation li a.active:after {
		content: "";
		width: 100%;
		bottom: 0;
		height: 2px;
		position: absolute;
		left: 0;
	}

 /* Single Portfolio Page
   ========================================================================== */
   #main-content .portfolio-header + .portfolio-info-row{ 
		border-width: 1px 0 0;
		border-style: solid;
	}

	#main-content .portfolio-header{ 
		.content-row-wrapper{
			padding: 50px 0;
		} 
	}

	#main-content .portfolio-info-row{ 
		.content-row-wrapper{
			padding: 50px 0;
		} 
	}

	//portfolio page with a saidebar
	#main-content .main-content-row{
		.portfolio-header .content-row-wrapper{
			padding-top: 0;
		} 	

		.portfolio-info-row .content-row-wrapper{
			padding-bottom: 0;
		} 	

		.portfolio-header,.portfolio-info-row{
			.content-row-wrapper > .col{
			//	padding-left: 0;
			//	padding-right: 0; 
			} 						
		} 
	} 

	.single-portfolio-carousel .owl-item > div{
		margin: auto;
	}

	#container .single-portfolio-carousel .owl-item img {
		margin: auto; 
		max-width: 100%;
		width: auto;
	}   
   
	.portfolio-carousel-holder > .col{
		padding: 0 !important;

		.single-portfolio-carousel:not(.full-height-carousel) .owl-item > div{	
			
			.owl-stage-outer{
				padding: 10px 0;
			}		
		}

		.single-portfolio-carousel.full-height-carousel .owl-item{	
			
			img{
				width: auto;
				margin: auto;
			}	
		}

	}   



	.single-portfolio .portfolio-info{

		.col.portfolio-text{
			padding-right: 50px;
		}

		.column-inner > *:first-child, .portfolio-text > *:first-child{
			margin-top: 0;
		}

	}



	.portfolio-template-default{
		.portfolio-default-layout{
			border-width: 1px 0 0 0;
			padding: 25px 0; 
		}

		.key-details{
			border-width: 0 0 0 1px;
			border-style: solid;
			padding-left: 25px;		
			text-align: center;

			.social_share{
				text-align: center;
			}			
		}		
	}

	.portfolio-template-single-portfolio-layout2{

		.portfolio-default-layout > .content-row-wrapper > .col > .column-inner{
			padding: 0;
		}

		.key-details, .social_share{
			padding-top: 25px;	
			border-width: 1px 0 0 0;
			border-style: solid; 

			text-align: left;
		}		

		.col.portfolio-sidebar > .column-inner{
			padding-left: 35px;
		}

	}

 
	.sticky-sidebar.stuck{
		padding-top: 25px;
	}

	.single-portfolio .key-details{

		.column-inner > ul{
			list-style: none;
			padding: 0;

			> li:not(:last-child){
				padding-bottom: 15px;
				margin-bottom: 15px;
				border-width: 0 0 1px 0;
				border-style: solid;				
			}
		}

		.social_share {
			width: 100%; 
			padding-top: 20px;

			&:hover{

				> span{ 
					box-shadow: 0 0 10px rgba(0,0,0,0.2);
				}
			}

			> span{
				transition: box-shadow .3s ease;
				border-style: solid;
				border-width: 1px;	
				padding: 5px 20px;
				line-height: 1em;		
				border-radius: 30px;
				font-weight: bold;	
				font-size: 0.75em;
			}

			span > span{
				display: inline-block;
			}
		}

	}

	.boxed-body-style.single-portfolio{

		.portfolio-metro-holder,.portfolio-masonry-holder,.portfolio-grid-holder{
			max-width: 100%;

			> .col {
				padding-left: 0;
				padding-right: 0;
			}
		}
	}