/* Portfolio */

article {
    &.portfolio {
        .portfolio-image {
            &.single {
                margin-bottom: 30px;
            }
        }

        h2 a,
        h4 a {
            text-decoration: none;
        }
        &.media {
            display: block;
	}
    }
}

.mfp-content .ajax-container,
#portfolioAjaxBox {
    .portfolio-title {
        margin-top: 0 !important;
    }
}

.portfolio-image {
    margin-bottom: 15px;
    img {

    }
}

.portfolio-slideshow {
    text-align: center;
}
.portfolio-title {
    margin-bottom: -15px;
    a {
        display: inline-block;
    }
    .fa {
        font-size: 1.7em;
    }
    .portfolio-nav,
    .portfolio-nav-all {
        margin-top: 11px;
    }
    .portfolio-nav {
        text-align: $right;
    }
    .portfolio-nav a {
        width: 40%;
        max-width: 27px;
    }
    .portfolio-nav-all .fa {
        font-size: 2em;
        margin-#{$left}: 1px;
    }
    .portfolio-nav-prev {
        text-align: $left;
        i:before {
            content: if-ltr($fa-var-chevron-left, $fa-var-chevron-right);
        }
    }
    .portfolio-nav-next {
        text-align: $right;
        i:before {
            content: if-ltr($fa-var-chevron-right, $fa-var-chevron-left);
        }
    }
}

/* Portfolio Info */
.portfolio-desc {
    margin-top: 10px;
}
.portfolio-info {
    margin: 7px 0 10px;
    float: $right;
    .page-portfolios & {
        margin-top: 2px;
    }
    ul {
        list-style: none;
        padding: 0;
        margin: 0;
        li {
            display: inline-block;
            color: #B1B1B1;
            padding-#{$right}: 8px;
            margin-#{$right}: 8px;
            font-size: 0.9em;
            &:last-child {
                border-#{$right}: 0;
                padding-#{$right}: 0;
                margin-#{$right}: 0;
            }
            a {
                cursor: pointer;
                text-decoration: none;
                color: #b1b1b1;
            }
            .fa,
            .post-views-icon.dashicons {
                margin-#{$right}: 4px !important;
                font-size: 1em !important;
                height: 1em;
                line-height: 1;
                width: 1em;
            }
        }
    }
}

.portfolio-like,
.portfolio-liked {
    cursor: pointer;
    text-decoration: none;

    i {
        margin-#{$right}: 4px !important;
        font-size: 1em !important;
        height: 1em;
        line-height: 1;
        width: 1em;
    }

    &:hover,
    &.linked {
        text-decoration: none;
        .fa-heart {
            color: #E53F51;
        }
    }
}

/* Related Portfolios */
.related-portfolios {
    margin-top: 35px;

    &.full {
        .row {
            margin-left: 0;
            margin-right: 0;
        }
    }
}

.portfolio-carousel {
    .portfolio-slide {
        @include clearfix();
    }
    .portfolio-item {
        margin: 0 15px 20px;
        &.full {
            margin: 0;
            max-width: 100%;
        }
    }
    &.owl-carousel .owl-dots {
        margin-top: 0;
    }
}

.portfolio-item-small {
    float: $left;
    margin: 0 0 8px;
    padding: 0 4px;
    width: 33.33333333%;
    max-width: 92px;

    &:first-child {
        padding-top: 0;
        border-top-width: 0;
    }

    .portfolio-image {
        margin: 0;
        img {
            width: 100%;
            height: auto;
            filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
            filter: gray;
            -webkit-filter: grayscale(100%);

            &:hover {
                filter: none;
                -webkit-filter: none;
            }
        }
    }
}

/* Portfolio List */
ul {
    &.portfolio-list {
        list-style: none;
        margin: 0;
        padding: 0;
        .portfolio-item {
            margin-bottom: 30px;
        }
    }
    .row > & {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;
    }
}
.portfolio-item {
    &.outimage {
        text-align: center;
    }
    .thumb-info {
        .thumb-info-type {
            .portfolio-like,
            .portfolio-liked {
                i {
                    text-shadow: none;
                }
            }
            .portfolio-like {
                i:before {
                    content: "\f08a";
                }
            }
        }
    }
}

.portfolio,
.portfolio-item {
    .thumb-info {
        .tooltip {
            display: none !important;
        }
    }
}

/* Portfolio Details */
ul {
    &.portfolio-details {
        list-style: none;
        padding: 0;
        margin: side-values(0 0 0 5px);
        font-size: 0.9em;
        h5 {
            font-size: 1em;
            margin-bottom: 5px;
        }
        li {
            padding: 0;
            margin: 0 0 20px;
        }
        p {
            padding: 0;
            margin: 0;
        }
        blockquote {
            padding: side-values(0 0 0 10px);
            margin: 15px 0 0;
            color: #999;
        }
        ul.list-skills {
            margin-#{$left}: 0;
            li {
                margin-#{$right}: 20px;
                margin-bottom: 5px;
            }
        }

        &.inline {
            li {
                display: inline-block;
                margin-#{$right}: 20px;
                vertical-align: top;

                p {
                    display: inline-block;
                }

                strong {
                    margin-#{$right}: 5px;
                }

                ul,
                .share-links {
                    display: inline-block;
                }

                &.pull-right {
                    margin-#{$right}: 0;
                }
            }
        }

        .testimonial {
            font-size: 1.1111em;
        }
    }
}

/* Portfolio Page */
.page-portfolios {
    &.portfolios-full,
    &.portfolios-large,
    &.portfolios-medium {
        .portfolio {
            padding-bottom: 0;
        }
    }
}

.portfolio-row {
    position: relative;
    margin: 0 -15px;

    .portfolio {
        float: $left;
        padding: 0 15px;
        margin-top: 0;
        width: 100%;
    }

    .portfolio-col-1 {
        width: 100%;
    }

    .portfolio-col-2 {
        width: 50%;
        &.w2 {
            width: 100%;
        }
        @media #{$screen-medium} {
            width: 100%;
        }
    }

    .portfolio-col-3 {
        width: 33.33333333%;
        &.w2 {
            width: 66.66666666%;
        }
        @media #{$screen-medium} {
            width: 50%;
            &.w2 {
                width: 100%;
            }
        }
        @media #{$screen-small} {
            width: 100%;
        }
    }

    .portfolio-col-4 {
        width: 25%;
        &.w2 {
            width: 50%;
        }

        @media #{$screen-normal} {
            width: 33.33333333%;
            &.w2 {
                width: 66.66666666%;
            }
        }
        @media #{$screen-medium} {
            width: 50%;
            &.w2 {
                width: 100%;
            }
        }
        @media #{$screen-small} {
            width: 100%;
        }
    }

    .portfolio-col-5 {
        width: 20%;
        &.w2 {
            width: 40%;
        }

        @media #{$screen-normal} {
            width: 25%;
            &.w2 {
                width: 50%;
            }
        }
        @media #{$screen-medium} {
            width: 33.33333333%;
            &.w2 {
                width: 66.66666666%;
            }
        }
        @media #{$screen-small} {
            width: 50%;
            &.w2 {
                width: 100%;
            }
        }
    }

    .portfolio-col-6 {
        width: 16.66666666%;
        &.w2 {
            width: 33.33333333%;
        }
        @media #{$screen-normal} {
            width: 25%;
            &.w2 {
                width: 50%;
            }
        }
        @media #{$screen-medium} {
            width: 33.33333333%;
            &.w2 {
                width: 66.66666666%;
            }
        }
        @media #{$screen-small} {
            width: 50%;
            &.w2 {
                width: 100%;
            }
        }
    }

    .column2 & {
        .portfolio-col-4 {
            @media #{$screen-medium} {
                width: 50%;
                &.w2 {
                    width: 100%;
                }
            }
            @media #{$screen-small} {
                width: 100%;
            }
        }

        .portfolio-col-5,
        .portfolio-col-6 {
            width: 20%;
            &.w2 {
                width: 40%;
            }

            @media #{$screen-medium} {
                width: 33.33333333%;
                &.w2 {
                    width: 66.66666666%;
                }
            }
            @media #{$screen-small} {
                width: 50%;
                &.w2 {
                    width: 100%;
                }
            }
        }
    }

    &.full {
        margin: 0;

        body.boxed .vc_row[data-vc-stretch-content] & {
            margin-left: 0;
            margin-right: 0;
        }

        .portfolio {
            padding: 0;
            margin-bottom: 0;
        }
    }
}

/* Portfolio Modal */
.portfolio-modal,
.portfolio-ajax-modal {
    .mfp-arrow,
    .mfp-close {
        display: none;
    }
    .container {
        width: 100%;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .uvc-vc-full-width,
    .vc_row[data-vc-full-width],
    .ult-vc-hide-row,
    .vc_row[data-vc-stretch-content] {
        &,
        body.boxed &,
        #main.main-boxed & {
            position: relative;
            width: 100% !important;
            left: 0 !important;
            margin: 0 !important;
            max-width: 100% !important;
        }
    }
}

.portfolio-load-more-loader {
    display: none;
    position: relative;
    height: 49px;
}

.btn-portfolio-lazy-load {
    opacity: 0;
}

/* Responsive */
@media (max-width: 991px) {
    .portfolio-nav, .portfolio-nav-all {
        display: none;
    }
}

/* Filters */
.sort-source {
    clear: both;

    > li > a {
        cursor: pointer;
        padding: 6px 12px;
        text-decoration: none;
    }

    &.sort-source-style-2 {
        margin: 0 auto;
        > li {
            float: none;
            display: inline-block;
            > a {
                &, &:focus, &:hover {
                    background: transparent;
                    color: #FFF;
                    display: inline-block;
                    border-radius: 0;
                    margin: 0;
                    padding: 18px 28px;
                    position: relative;
		    text-decoration: none;
                }
                &:after {
                    @include transition (margin 0.3s);
                    width: 0;
                    height: 0;
                    border-left: 20px solid transparent;
                    border-right: 20px solid transparent;
                    border-top: 15px solid #CCC;
                    content: " ";
                    display: block;
                    position: absolute;
                    #{$left}: 50%;
                    margin-#{$left}: -20px;
                    margin-top: 0;
                    opacity: 0;
                    z-index: 1;
                }
            }
            &.active {
                > a {
                    &, &:focus, &:hover {
                        background: transparent;
                    }
                    &:after {
                        opacity: 1;
                        margin-top: 18px;
                    }
                }
            }
        }
    }
}

@media #{$screen-medium} {
    .sort-source {

        &.sort-source-style-2 {
            > li {
                display: block;
                &.active {
                    > a {
                        &:after {
                            display: none !important;
                        }
                    }
                }
            }
        }
    }
}

.ajax-box {
    .bounce-loader,
    .porto-ajax-loading {
        z-index: 1;
    }
}

/* Portfolio Category Stripe */
.portfolio-stripes {
	.owl-carousel {
		.owl-nav {
			.owl-prev {
				line-height: initial;
			}
			.owl-next {
				line-height: initial;
			}
		}
	}
	.owl-item {
		.portfolio-item {
			width: calc(100% + 2px);
			.thumb-info {
				border: none;
				.thumb-info-wrapper {
					height: calc(100vh - 89px);
					&::before {
						content: '';
						display: block;
						position: absolute;
						bottom: 0;
						left: 0;
						width: 100%;
						box-shadow: 0 50px 190px 110px #182027;
						z-index: 1;
					}
					.background-image {
						position: absolute;
						top: 0;
						left: 0;
						background-size: cover;
						width: 100%;
						height: 100%;
						@include transition (all 0.3s ease);
					}
				}
			}
			.thumb-info {
				&:hover {
					.thumb-info-wrapper {
						.background-image {
							@include transform(scale(1.1, 1.1));
						}
					}
				}
			}
		}
	}
}

.thumb-info.thumb-info-basic-info {
	.thumb-info-title {
		background: none;
		bottom: 5.5%;
		left: 5%;
		padding: 0;
		font-size: 2em;
		line-height: 1;
		text-shadow: none;
	}
}


/* Portfolio Category Parallax */

.portfolio-parallax {
	height: 40vh;
	&:before {
		content: '';
		display: block;
		position: absolute;
		background: rgba(10, 12, 36, 0);
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
        @include transition (all 300ms ease);
	}
	h2 {
		bottom: 7%;
		font-size: 2em;
		left: 1%;
		line-height: 1;
		margin: 0;
		padding: 0;
		position: absolute;
	}
	&:not(.hidden-plus) {
		&:hover {
			&:before {
				background: rgba(10, 12, 36, 0.5);
			}
		}
	}
}

html.gecko {
	.thumb-info {
		z-index: 1;
        @include transform(unset);
	}
}


@media (max-width: 991px){
	.portfolio-parallax {
		height: 30vh;
	}
}

@media (max-width: 767px){
    .portfolio-parallax {
        height: 25vh;
    }
}

/* Portfolio Lightbox Thumbnails */
.porto-portfolios-lighbox-thumbnails {
	position: fixed;
	bottom: 2.5%;
	width: 100%;
	text-align: center;
	z-index: 99999;
	.owl-carousel {
		margin-bottom: 0;
		.owl-stage {
			margin: 0 auto;
		}
	}
	.owl-item {
		cursor: pointer;
	}
	.owl-item.current {
		opacity: 0.5;
		cursor: default;
	}
}
.portfolios-lightbox.with-thumbs {
	.porto-portfolios-lighbox-thumbnails {
		visibility: hidden;
	}
}
@media (max-width: 1023px) {
	.porto-portfolios-lighbox-thumbnails {
		display: none;
	}
}
/* End - Porto Lightbox Thumbnails */