.portfolio-carousel {
	padding: 0;
	color: white;
	background-color: @themeDark;
	.item {
		background-color: @themeDark;
		background: no-repeat center center scroll; 
		.background-cover;
		padding: 50px 55px;
		text-align: center;
		.project-details {
			padding: 0;
			.project-name {
				display: block;
				font-size: 40px;
				line-height: 40px;
				margin-bottom: 5px;
				.heading-font;
			}
			.project-description {
				display: block;
				font-size: 18px;
				line-height: 18px;
			}
		}
		.device-container {
			padding: 25px;
		}
	}
	.owl-controls {
		margin-top: 0;
		.owl-prev,
		.owl-next {
			text-align: center;
			position: absolute;
			height: 75px;
			width: 50px;
			border-radius: 0 !important;
			line-height: 70px;
			font-size: 30px !important;
			margin: auto 0 !important;
			top: 0;
			bottom: 0;
			background-color: @themePrimary !important;
			color: white !important;
			.transition-all;
			&:hover {
				opacity: 1;
			}
		}
		.owl-prev {
			left: 0;
		}
		.owl-next {
			right: 0;
		}
	}
}

@media(min-width:992px) {
	.portfolio-carousel {
		.item {
			padding: 155px 55px 155px;
			text-align: left;
			min-height: 100%;		
			.project-details {
				padding: 25% 0 0;
				img.client-logo {
					margin: 0 auto 25px 0;
				}
				.project-name {
					display: block;
					font-size: 50px;
					line-height: 50px;
				}
				.project-description {
					font-size: 20px;
					line-height: 20px;
				}
			}
			hr.colored {
				margin: 20px auto 20px 0;
			}			
		}
	}
}

.portfolio-gallery {
	.item {
		padding: 15px;
	}
}

.portfolio-modal {
	.modal-backdrop {
		display: none;
	}
	.background-cover;
	.modal-content {
		color: white;
		background: transparent;
	    border-radius: 0;
	    background-clip: border-box;
	    -webkit-box-shadow: none;
	    box-shadow: none;
	    border: none;
	    min-height: 100%;
	    padding: 100px 0;
	    text-align: center;
		h2 {
	    	margin: 0;
	    	font-size: 46px;
		}
		.item-details {
			margin: 30px 0;
		}
	}
    .close-modal {
        position: absolute;
        width:75px;
        height:75px;
        background-color:transparent;
        top: 25px;
        right: 25px;
        cursor: pointer;
        &:hover {
            opacity: 0.3;
        }
        .lr {
            height:75px;
            width:1px;
            margin-left:35px;
            background-color: white;
            transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            /* IE 9 */
            -webkit-transform: rotate(45deg);
            /* Safari and Chrome */
            z-index:1051;
            .rl {
                height:75px;
                width:1px;
                background-color: white;
                transform: rotate(90deg);
                -ms-transform: rotate(90deg);
                /* IE 9 */
                -webkit-transform: rotate(90deg);
                /* Safari and Chrome */
                z-index:1052;
            }            
        }        
    }
}

// Mockup Carousel

.mockup-carousel {
	.item {
		margin: 0;
		padding: 0;
		img {
			margin: 0;
		}
	}
	.owl-controls {
		margin-top: 0;
		.owl-prev,
		.owl-next {
			text-align: center;
			position: absolute;
			height: 60px;
			width: 40px;
			border-radius: 0 !important;
			line-height: 50px;
			font-size: 30px !important;
			margin: auto 0 !important;
			top: -30px;
			bottom: 0;
			background-color: @themePrimary !important;
			color: white !important;
			.transition-all;
			&:hover {
				opacity: 1;
			}
		}
		.owl-prev {
			left: 15px;
		}
		.owl-next {
			right: 15px;
		}
	}	
}

// Portfolio Grid

.portfolio-filter {
	display: inline-block;
	#filters {
		list-style: none;
		padding: 0;
		margin-bottom: 30px;
		li {
			display: inline-block;
			.filter {
				display: block;
				cursor: pointer;
				padding: 10px 15px;
				margin: 2px;
				text-transform: uppercase;
				font-weight: 900;
				letter-spacing: 1px;
				font-size: 12px;
				color: @themeDark;
				background: transparent;
				border: 1px solid @themeDark;
				.transition-all;
				&.active {
					background-color: @themePrimary;
					color: white;
					border-color: @themePrimary;
				}
			}
		}
	}
}

#portfoliolist {

	.mix {
		width: 31%;
		margin: 1%;
		display: none;
		float: left;
		overflow: hidden;

		.portfolio-wrapper {
			overflow: hidden;
			position: relative !important;
			background: @themeDark;
			cursor: pointer;

			img {
				max-width:100%;
				position: relative;
				-webkit-filter: grayscale(0);
				filter: grayscale(0);
				.transition-all;
				&:hover {
					-webkit-filter: grayscale(1);
					filter: grayscale(1);
				}
			}

			.caption {
				position: absolute;
				width: 100%;
				height: 75px;
				bottom: -75px;
				.transition-all;

				.caption-bg {
					background: @themePrimary;
					width: 100%;
					height:100%;
					position: absolute;
					top:0;
					left:0;
				}

				.caption-text {
					color: white;
					position: relative;
					z-index: 500;
					padding: 15px 8px;

					a.text-title {
						color: white;
					}

					.text-category {
						display: block;
						font-size: 12px;
					}

				}
			}

		}

		&:hover {
			.portfolio-wrapper {
				.caption {
					bottom: 0px;
				}
			}
		}
	}

}

/*  #Mobile (Portrait) - Note: Design for a width of 320px */
@media only screen and (max-width: 767px) {
	
	#portfoliolist .mix {
		width:48%;
		margin:1%;
	}		
	
}