 /**
 * 7.0 - Library
 *  7.5 - masonry
 */
.masonry{
	position: relative;
}

.container-portfolio.container-boxed.offset{
	margin-top: 0;
}
.masonry-portfolio.no-title {
	.masonry-item > .content-wrap {
		display: none;
	}
}


.container-fullwidth .masonry-portfolio{
	padding:0;
}

// Portfolio Filter 
.masory-item-wrap{
	position: relative;
}
.masonry-item {
	z-index: 2;
	float: left;
	padding-left: (@grid-gutter-width / 2 ) !important;
	padding-right: (@grid-gutter-width / 2) !important;
}
.masonry-hidden.masonry-item {
	pointer-events: none;
	z-index: 1;
}

.masonry-header{
	&:extend(.clearfix all);
	padding-top: 20px;
	padding-bottom: 10px;
	background-color: #fff;
	margin-right: @grid-gutter-width / 2;
	// .border-radius(4px);
	&.masonry-header-gap{
		// background-color: rgba(0, 0, 0, 0);
		margin-bottom: 40px;
	}
	.masonry-result{
		float: left;
		max-width: 30%;
		h3{
			margin: 0;
			padding: 0;
		}
	}
	.masonry-filters{
		float: left;
		width: 100%;
		// max-width: 70%;
		// background: #fff;
		width: 100%;
		ul{
			list-style: none;
			li{
				display: inline-block;
				padding: 0 30px;
				a{
					color: @text-color;
					position: relative;
					font-size: @font-size-base;
					&:hover,
					&.selected{
						color: @brand-primary;
						text-decoration: none;
					}
					&:before{
						 // background: none repeat scroll 0 0 @text-color;
					  //   content: "";
					  //   height: 3px;
					  //   left: -10px;
					  //   position: absolute;
					  //   top: 50%;
					  //   width: 3px;

					}
				}


				&:first-child > a:before{
					display:  none;
				}
				@media (max-width: @screen-sm-max) {
					padding: 0 @grid-gutter-width 0 0;
					line-height: 40px;
				}
			}
		}
	}
}

// Masonry Container
// =============================================================================

.masonry-container {
	.box-sizing(content-box);
	position: relative;
	// margin-left: (@grid-gutter-width / -2) !important;
	// margin-right: (@grid-gutter-width / -2) !important;
}
.masonry-overlay{
	background-color: black;
    height: 100%;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 10;
    display: none;
     -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    opacity: 0.5;
    pointer-events: none;
}

// Masonry Item
// =============================================================================

.masonry-container > .masonry-item {
	margin: 0 0 @grid-gutter-width 0;
	padding: 0 0px @grid-gutter-width;
	z-index: 1;
}
.masonry-style-elevated .masonry-container > .masonry-item-hover{
	position: relative;
	z-index: 1000;
	.content-featured{
		-webkit-transform: translateY(-65px);
		-moz-transform: translateY(-65px);
		-ms-transform: translateY(-65px);
		transform: translateY(-65px);
	}
}
.masonry-portfolio{
	.content-featured{
		margin-bottom: 0;
	}
	.portfolio-action,
	.title-line{
		display: none;
	}
	.content-date-portfolio{
		font-size: @font-size-small;
	}
}
.masonry-portfolio.no-gap{
	margin-top: 0px;
	.masonry-container{
		.content-featured{
			.box-shadow(0 0 0 rgba(0, 0, 0, 0));
			margin-bottom: 0;
			position: relative;
			z-index: 100;
		}
		> .masonry-item {
			padding: 0;
		}
	} 
}

.masonry-style-vibrant .masonry-portfolio{ 
	.masonry-container{
		.hentry{
			border:none;
			background: transparent;
		}
		.hentry:after {
			height: 0;
		}
		> .masonry-item {
			margin: 0 0 @grid-gutter-width;
			padding-bottom: 0;
			position: relative;
			overflow: hidden;

			&:hover{
				// &:before {
				// 	background-image: url(../images/bg-portfolio-item.png);
				// }
				
				.content-wrap,
				.portfolio-action
				{
					.opacity(1);
				}
				.content-category-portfolio,
				.content-title-portfolio{
					.opacity(1);
					.translate(0,0);
				}
			}
			.noo-slider {
				.slider-control {
					background: rgba(0, 0, 0, 0.6);
					font-size: 18px;
					padding: 5px 13px;
					.slider-icon-next {
						&:before {
							content: "\f18e";
						}
					}
					.slider-icon-prev {
						&:before {
							content: "\f190";
						}
					}
				}
			}
		}
		.content-wrap{
			text-align: center;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 100;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.35);
			.transition(all 0.4s ease-in-out);
			padding: 15px;
			.opacity(0);

			.content-header{
				position: relative;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: 9;
			}

			.portfolio-action{
				display: block;
				//.transition(all 0.2s ease-in-out 0s);
				position: relative;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				.opacity(0);
				margin-top: 5px;
				.content-share-portfolio{
					position: relative;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					a {
						color: #fff;
						font-weight: bold;
						text-decoration: none;
						font-size: 2em;
						margin: 0 0.31234em;
					}
					.noo-social {
						line-height: 1;
						position: relative;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
							&:extend(.clearfix all);
							.translate3d(0, 0, 0); 
							a {
								text-decoration: none;
								position: absolute;
								top: 50%;
								-webkit-transform: translateY(-50%);
								transform: translateY(-50%);
								margin: 0 auto;
								left: 0;
								width: 100%;
								text-align: center;
								height: 58px;
								i{
									background: rgba(0, 0, 0, 0.4);
									height: 45px;
									line-height: 45px;
									width: 45px;
									border-radius: 50%;
									color: #fff;
									box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.37);
									border: 3px solid rgba(0, 0, 0, 0.8);
									font-size: 20px;
									margin-top: 7px;
								    &:before {
								    	position: absolute;
										background: rgba(0, 0, 0, 0.37);
										height: 58px;
										line-height: 58px;
										width: 58px;
										border-radius: 50%;
										color: #fff;
										left: 50%;
										top: 0;
										-webkit-transform: translateX(-50%);
										transform: translateX(-50%);
									    // box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.37);
								    }
							}
						}

						a:first-child {
							margin-left: 0px;
						}
						a.noo-share {
							&:before {
								position: absolute;
								content: "";
								width: 100%;
								height: 100%;
								left: 0;
								top: 0;
							}
						}
					}
				}
			}
			&:after {
				background-image: url(../images/bg-portfolio-item.png);
				position: absolute;
				content: "";
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
		}
	}
	&.no-gap{
		.masonry-container{
			> .masonry-item {
				margin: 0;
			}
		}
	}
}
.masonry-style-vibrant .masonry-portfolio{  
	.masonry-container  .media-gallery {
		.content-wrap .portfolio-action .content-share-portfolio .noo-social  a {
			text-decoration: none;
			position: absolute;
			top: 0;
			-webkit-transform: none;
			transform: none;
			margin: 0 auto;
			left: 0;
			width: 100%;
			text-align: center;
			height: 100%;
		}
	}
}
.masonry-style-default .masonry-portfolio{ 
	.masonry-container{
		.hentry{
			border:none;
		}
		> .masonry-item {
			margin: 0 0 40px;
			padding-bottom: 0;
			position: relative;
			overflow: hidden;
		}
		.content-wrap{
			.content-title{
				margin: 10px 0 5px;
			}
			.content-category-portfolio{
				a{
					color: @text-color;
				}
			}
		}
	}
	&.no-gap{
		.masonry-container{
			> .masonry-item {
				margin: 0;
			}
		}
	}
}

.masonry-container.columns-1 > .regular {
	width: 100%;
}

.masonry-container.columns-2 > .regular {
	width: 50%;
}
.masonry-container.columns-2 > .wide {
	width: 100%;
}

.masonry-container.columns-3 > .regular {
	width: 33.333%;
	@media (max-width: @screen-md-min) {
		width: 50%;
	}
}

.masonry-container.columns-3 > .wide {
	//.calc-width(59%,~"59% + 40px");
	width: 66.666%;
	@media (max-width: @screen-md-min) {
		width: 100%;
	}
}

.masonry-container.columns-4 > .regular {
	//width: 21%;
	width: 25%;
	@media (max-width: @screen-md-min) {
		width: 50%;
	}
}

.masonry-container.columns-4 > .wide {
	//.calc-width(42%,~"42% + 40px");
	width: 50%;
	@media (max-width: @screen-md-min) {
		width: 100%;
	}
}
// .col-md-12 .masonry-container.columns-4 > .regular {
// 	width: 22%;
// 	@media (max-width:@screen-md-min) {
// 		width: 47%;
// 	}
// }
// .col-md-12 .masonry-container.columns-4 > .wide {
// 	.calc-width(44%,~"44% + 40px");
// 	@media (max-width:@screen-md-min) {
// 		width: 100%;
// 	}
// }

.masonry-container[class*="columns-"] > .masonry-item {
	@media (max-width: @grid-float-breakpoint-max) {
		width: 100% !important;
	}
}

.masonry-portfolio.no-gap{
	.masonry-container{
		margin: 0 !important;
	}
	.masonry-item{
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.masonry-container.columns-1 > .regular {
		width: 100%;
	}

	.masonry-container.columns-2 > .regular {
		width: 50%;
	}
	.masonry-container.columns-2 > .wide {
		width: 100%;
	}

	.masonry-container.columns-3 > .regular {
		width: 33.3333%;
		@media (max-width: @grid-float-breakpoint-max) {
			width: 50%;
		}
	}
	.masonry-container.columns-3 > .wide {
		width: 66.6666%;
		@media (max-width: @grid-float-breakpoint-max) {
			width: 50%;
		}
	}
	.masonry-container.columns-4 > .regular {
		width: 25%;
		@media (max-width: @screen-md-min) {
			width: 50%;
		}
	}
	.masonry-container.columns-4 > .wide {
		width: 50%;
		@media (max-width: @screen-md-min) {
			width: 100%;
		}
	}
}


.masonry-container + .pagination {
	
}