body.single-portfolio {
	.layout-full {
		aside.right {
			margin-top: 0 !important;
		}
	}

	.related-portfolios {
		position: relative;
		padding-top: 40px;
		padding-bottom: 60px;

		.grid-1-1 {
			padding: 0;
		}
	}
}

.portfolios {
	position: relative;

	.wp-pagenavi {
		margin-top: 30px !important;
	}

	&.normal {
		> ul {
			> li {
				margin-top: 30px;
			}
		}
	}

	> ul {
		overflow: visible;
		margin: -30px 0 30px 0;
		padding: 0;

		> li {
			position: relative;
			float: left;
			list-style: none outside none;

			img {
				-ms-interpolation-mode: bicubic;
				image-rendering: optimizeQuality;
			}
		}

		&.animated > li {
			box-shadow: none !important;

			img {
				-ms-interpolation-mode: nearest-neighbor;
				image-rendering: -webkit-optimize-contrast;
				image-rendering: optimizespeed;
			}
		}

		&.transitionable > li {
			overflow: hidden;
		}
	}

	.portfolio-item-wrapper {
		overflow: hidden;
		border: 0;
		border: 1px solid @default-line-color;
		background: @default-bg-color;
		background-clip: content-box;
		text-align: left;
	}

	.no-title.no-description .portfolio-item-wrapper {
		border: 0;

		.thumbnail {
			.transform(translateZ(0));
			overflow: hidden;
		}
	}

	.state-open {
		.portfolio-image {
			.thumbnail {
				> a img,
				> img {
					opacity: 0.8;
				}
			}
		}
	}

	.portfolio-image {
		position: relative;
		overflow: hidden;

		.thumbnail {
			display: block;
			max-height: none !important;
			background-color: @accent-color-6;

			a.button.accent2 {
				display: none;
			}

			> a {
				position: relative;
				display: block;
			}

			> a img,
			> img {
				z-index: 0;
				display: block;
				margin: 0 auto;
				min-height: 50px;
				max-height: none !important;
				width: 100%;
				height: auto;
				transition: opacity .4s;
			}
		}
	}

	.portfolio_details {
		padding: 15px 20px;

		.title {
			&, a {
				color: @css_link_color;
				font-size: @h4-size;
				line-height: @h4-size;
			}

			&:last-child {
				margin-bottom: 20px;
			}

			> a {
				width: 100%;

				&:hover {
					color: @css_link_hover_color;
				}

			}
		}

		.excerpt {
			margin-bottom: 20px;
		}

		.button {
			margin-top: 10px;
		}
	}

	&.isotope {
		overflow: hidden;
		margin-bottom: -30px !important;
		padding: 0;
		height: 0;

		> ul {
			clear: both;
		}
	}
}

.portfolios .style-1.featured {
	margin: 0;
	padding: 0;
	box-shadow: none;
}

body.full {
	.related-portfolios {
		&:before {
			position: absolute;
			top: 0;
			left: -100%;
			width: 300%;
			height: 100%;
			background: lighten(@accent-color-7, 5%);
			content: "";
		}
	}
}

.portfolio_details .row {
	margin-bottom: 3%;
}

.sort_by_cat {
	z-index: 6;
	display: none;
	text-align: center;

	.inner-wrapper {
		display: inline-block;
		text-align: center;
		line-height: 35px;

		a {
			display: inline-block;
			margin: 0 .6em;
			color: @primary-font-color;
			transition: color .3s ease;
			padding-bottom: 5px;
			border-bottom: solid 1px transparent;
			transition: all .3s;
			line-height: normal;


			&:hover,
			&.active {
				color: @css_link_hover_color;
				border-bottom-color: @css_link_hover_color;
				text-decoration: none;
			}
		}
	}

	.page-header-content & {
		padding-bottom: 10px;

		&.sort_by_cat{
			padding-bottom: 10px;
			border: solid 1px @default-line-color;
			padding-top: 10px;
		}

		.cat:first-child a {
			margin-left: 0;
			padding-left: 0;
		}
	}
}

.portfolios.scroll-x {
	> ul {
		> li {
			&.has-title.no-description {
				margin-bottom: 20px !important;
			}
		}
	}
}

article.type-portfolio {
	margin-bottom: 40px;
	padding-bottom: 0 !important;

	&.left-right,
	&.right-only {
		.portfolio-text-content .portfolio-content {
			> .grid-1-5 {
				margin-top: 0;
			}
		}
	}

	.portfolio-text-content {
		.portfolio-content {
			margin-bottom: 0;
			padding-top: 20px;

			> .grid-1-5 {
				margin-top: -18px;
				padding-bottom: 20px;
				padding-left: 10px;

				.cell {
					padding: 10px;
					border-bottom: 1px solid @accent-color-7;

					p,
					div {
						text-transform: uppercase;
					}

					p{
						margin: 0;
						color: darken(@accent-color-7, 20%);
						a {
							color: @css_link_color;
							&:hover,
			                &.active {
								color: @css_link_hover_color;
								text-decoration: none;
			}
						}
					}
				}
			}
		}

		img {
			display: inline-block;
			max-width: 100%;
		}

		.row-1 {
			.left {
				min-width: 0;
			}

			.right {
				float: right;
			}
		}
	}

	.portfolio-image-wrapper {
		position: relative;
		overflow: hidden;
		width: auto !important;
		text-align: center;

		> img {
			width: 100%;
			height: auto;
		}
	}
}
