@import 'small-images';
@import 'small-slider';
@import 'big-images';
@import 'wide-images';
@import 'big-slider';
@import 'wide-slider';
@import 'gallery';
@import 'small-masonry';
@import 'big-masonry';
@import 'split-screen';
@import 'full-screen-slider';

.single-portfolio-item{
	.edgtf-content .edgtf-content-inner{
		> .edgtf-container > .edgtf-container-inner,
		> .edgtf-full-width > .edgtf-full-width-inner{
			padding: 0;
		}
	}
}

.edgtf-portfolio-single-holder {
	margin-top: 100px;
	margin-bottom: 84px;

	&.custom,
	&.full-width-custom{
		margin: 0;
	}
	
	.edgtf-portfolio-media {
		img{
			vertical-align:middle;
		}
	}

	.edgtf-portfolio-title,
	.edgtf-portfolio-info-title{
		margin-bottom: 18px;
	}

	.edgtf-portfolio-content{
		margin-bottom: 34px;

		>p{
			color: rgba($first-main-color, 0.8);
		}
	}

	.edgtf-portfolio-social{
		.edgtf-social-share-holder{
			display:table;
			table-layout:fixed;
			width:100%;
			margin-top: 25px;

			.edgtf-social-share-title{
				display:none;
			}

			ul{
				li{
					position: relative;

					&:not(:last-child){
						padding-right: 22px;
						margin-right: 7px;

						&:after{
							background-color: $header-dark-color;
							content: "";
							position: absolute;
							height: 2px;
							width: 10px;
							top: 50%;
							@include edgtfTransform(translateY(-50%));
							right: 0;
						}
					}

					a{
						font-size: 15px;
						
						span{
							vertical-align: middle;
						}
					}
				}
			}
		}
	}

    .edgtf-portfolio-info-item {

	    &:not(.edgtf-content-item){
		    display:table;
		    table-layout:fixed;
		    width:100%;
			color: $gray-color;
			font-size: 15px;
			font-weight: 500;

		    .edgtf-portfolio-info-item-title{
				color: $first-main-color;
			    display:table-cell;
			    width:33%;
		    }

		    p{
			    display:table-cell;
			    width:66%;
		    }
	    }
    }

    .edgtf-portfolio-related-holder{
		position: relative;
		overflow: hidden;
		margin-top: 63px;

		.edgtf-portfolio-list-holder{
			margin-top: 7px;
		}

		.slick-slide.product{
			margin: 0 15px;

			&:nth-child(3n){
				margin: 0 15px;
			}

			&:nth-child(3n + 1){
				clear: none;
			}
		}

		.edgtf-related-nav-holder{
			position: absolute;
			top: 0;
			right: 0;
		}

		.edgtf-related-prev,
		.edgtf-related-next{
			font-size: 20px;
			color: #363636;
			cursor: pointer;
			vertical-align: text-bottom;
		}

		.edgtf-portfolio-back-btn{
			display: inline-block;
			font-size: 15px;
			color: $first-main-color;
			vertical-align: text-bottom;
		}

		&.edgtf-portfolio-slider-holder .slick-slider{

			.edgtf-slick-prev{
				left: 10%;
			}

			.edgtf-slick-next{
				right: 10%;
			}
		}
    }

    .edgtf-ptf-nav-hidden{

		.edgtf-slick-prev,
		.edgtf-slick-next{
			visibility: hidden;
		}
    }

	.edgtf-portfolio-single-nav-inner{
		position:relative;
	}

    .edgtf-portfolio-video-lightbox {
        position: relative;
        display: block;

        img {
            vertical-align: middle;
        }
    }

    .edgtf-portfolio-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        color: #fff;

        .edgtf-portfolio-play-icon {
            position: absolute;
            font-size: 20px;
            left: 50%;
            top: 50%;

            @include edgtfTransform(translate(-50%, -50%));
        }
    }
}

.edgtf-portfolio-single-nav {
    $nav-height: 40px;

    a{
    	display: inline-block;
    	color: $first-main-color;
    	font-size: 15px;
    	font-weight: 500;
        line-height: $nav-height;
        vertical-align: top;
        @include edgtfTransform(rotate(-90deg));
    }

    span {
        line-height: $nav-height;
        font-size: 21px;

        @include edgtfTransition(color 0.15s ease-in-out);
    }

    .edgtf-portfolio-back-btn {
        display: inline-block;
    }

    .edgtf-portfolio-next,
    .edgtf-portfolio-prev,
    .edgtf-portfolio-back-btn {
        height: $nav-height;
    }

    .edgtf-portfolio-next,
    .edgtf-portfolio-prev {
        position: fixed;
        top: 50%;
        @include edgtfTransform(translateY(-50%));
    }

    .edgtf-portfolio-prev {
        left: -5px;

		span{
			padding-right: 7px;
		}
    }

    .edgtf-portfolio-next {
        right: 6px;

		span{
			padding-left: 7px;
		}
    }

    @media only screen and (min-width: $phone-landscape + 1px){
    	opacity: 0;
    	@include edgtfTransition(opacity .2s ease);

    	&.edgtf-scrolled{
    		opacity: 1;
    	}
    }
}