/* 
    Created on : 27.03.2015, 11:05:06
    Author     : DFD
	Styles for : Portfolio styles
*/

@-webkit-keyframes dfdFolioHoverDots {
	0%, 100% { margin-top: 0; }
	50% { margin-top: -5px; }
}
@-moz-keyframes dfdFolioHoverDots {
	0%, 100% { margin-top: 0; }
	50% { margin-top: -5px; }
}
@-o-keyframes dfdFolioHoverDots {
	0%, 100% { margin-top: 0; }
	50% { margin-top: -5px; }
}
@-ms-keyframes dfdFolioHoverDots {
	0%, 100% { margin-top: 0; }
	50% { margin-top: -5px; }
}
@keyframes dfdFolioHoverDots {
	0%, 100% { margin-top: 0; }
	50% { margin-top: -5px; }
}

.works-list {
	clear: both;
}

.project {
	.rel();
    text-align: center;
	
	.work-cover {
		.rel();
	}
	
	.entry-thumb {
		.portfolio-custom-hover {
			background-color: fade(@folio-hover-bg, @folio-hover-bg-opacity);
			.title-wrap {
				h6.widget-title {
					color: @folio-hover-text-color;
				}
				h6.widget-sub-title {
					color: fade(@folio-hover-text-color, 50%);
				}
				&.diagonal-line {
					&:before {
						border-bottom: 1px solid fade(@folio-hover-text-color, 20%);
					}
				}
				&.title-underline {
					h6.widget-title {
						&:before {
							border-bottom: 1px solid fade(@folio-hover-text-color, 20%);
						}
					}
				}
				&.square-behind-heading {
					&:before {
						border: 1px solid fade(@folio-hover-text-color, 20%);
					}
				}
			}
			.dfd-folio-icons-wrap {
				> a {
					color: @folio-hover-text-color;
					&:after {
						background: fade(@folio-hover-text-color, 10%);
					}
				}
			}
			.plus-link {
				.folio-plus-link(140px, 10px, 1px, 70px, @folio-hover-text-color);
				&.dfd-top-right,
				&.dfd-top-left,
				&.dfd-bottom-right,
				&.dfd-bottom-left {
					.folio-plus-link(32px, 10px, 1px, 16px, @folio-hover-text-color);
				}
			}
			.dfd-dotted-link {
				> span {
					&:before,
					&:after {
						background: @folio-hover-text-color;
					}
				}
			}
			.dfd-dots-link {
				span {
					background: @folio-hover-text-color;
				}
			}
			.dfd-default-link {
				.abs();
				left: 0; right: 0;
				top: 0; bottom: 0;
			}
		}
		.portfolio-entry-hover {
			background-color: fade(@folio-hover-bg, @folio-hover-bg-opacity);
			.title-wrap {
				h6.widget-title {
					color: @folio-hover-text-color;
					a {
						color: inherit;
					}
				}
				.entry-tags {
					.folio-inner-subtitle,
					a {
						color: fade(@folio-hover-text-color, 50%);
					}
				}
			}
			> a {
				color: @folio-hover-text-color;
			
				&.plus-link {
					.folio-plus-link();
				}
				&.dfd-dotted-link {
					top: 50%;
				}
				&.quick-view {
					.box-name();
					font-size: @box-name-font-size - 3;
					text-transform: uppercase;
					color: @folio-hover-text-color;
					.hide();
				}
			}
		}
	}
	.entry-tags {
		ul{
			list-style: none;
			text-align: left;
			padding-top: 0;
			margin: 0;
			
			li {
				.rel();
				.inline-block();
				padding-right: 10px;
				margin-right: 5px;
				.rel();
				&:before {
					content: "";
					.block();
					width: 1px;
					height: @entry-meta-font-size;
					.abs();
					top: 50%;
					right: 0;
					margin-top: -@entry-meta-font-size / 2;
					background: fade(@folio-hover-text-color, 50%);
					.rotate(45deg);
				}
				
				&:last-child {
					padding-right: 0;
					margin-right: 0;
					&:before {
						.hide();
					}
				}
				
				a {
					.subtitle();
					color: @folio-hover-text-color;
				}
			}
		}
		.folio-inner-subtitle {
			color: @folio-hover-text-color;
		}
	}
	
	&.portfolio-hover-style-1 {
		.portfolio-hover-style-1();
	}
	&.portfolio-hover-style-2 {
		.portfolio-hover-style-2();
	}
	&.portfolio-hover-style-3 {
		.portfolio-hover-style-3();
	}
	&.portfolio-hover-style-4 {
		.portfolio-hover-style-4();
	}
	&.portfolio-hover-style-5 {
		.portfolio-hover-style-5();
	}
	&.portfolio-hover-style-6 {
		.portfolio-hover-style-6();
	}
	&.portfolio-hover-style-7 {
		.portfolio-hover-style-7();
	}
	&.portfolio-hover-style-8 {
		.portfolio-hover-style-8();
	}
	&.portfolio-hover-style-9 {
		.portfolio-hover-style-9();
	}
	&.portfolio-hover-style-10 {
		.portfolio-hover-style-10();
	}
	&.portfolio-hover-style-11 {
		.portfolio-hover-style-11();
	}
	&.portfolio-hover-style-12 {
		.portfolio-hover-style-12();
	}
	&.portfolio-hover-style-13 {
		.portfolio-hover-style-13();
	}
	&.portfolio-hover-style-14 {
		.portfolio-hover-style-14();
	}
	&.portfolio-hover-style-15 {
		.portfolio-hover-style-15();
	}
	&.portfolio-hover-style-16 {
		.portfolio-hover-style-16();
	}
	&.portfolio-hover-style-17 {
		.portfolio-hover-style-17();
	}
	&.portfolio-hover-style-18 {
		.portfolio-hover-style-18();
	}
	&.portfolio-hover-style-19 {
		.portfolio-hover-style-19();
	}
	&.portfolio-hover-style-20 {
		.portfolio-hover-style-20();
	}
	&.portfolio-hover-style-21 {
		.portfolio-hover-style-21();
	}
	&.portfolio-hover-style-22 {
		.portfolio-hover-style-22();
	}
	&.portfolio-hover-style-23 {
		.portfolio-hover-style-23();
	}
	&.portfolio-hover-style-24 {
		.portfolio-hover-style-24();
	}
}
/* Masonry portfolio grid */
#grid-folio,
#portfolio-page .works-list {
	&.with-excerpt {
		.entry-content{
			text-align: left;
		}
	}
}
#grid-folio, #portfolio-page .works-list {
    margin: 0 -15px;
}

#portfolio-page, #grid-folio {
    .sort-panel {
		text-align: center;
    }
	&.nine.columns {
		.sort-panel {
			text-align: left;
			padding: 0;
		}
	}
    .project {
		margin: 0 15px 20px;
		padding: 0;
		
		.cover {
			padding-bottom: 15px;
			background: @main-site-dark-color;
			
			.entry-thumb {

				.portfolio-entry-meta {
					display: none;
				}
			}
			.feature-title {
				margin-bottom: 0px;
				text-align: left;
				margin-top: 10px;
				
				a {
					border-bottom-width: 0;
				}
			}
			> .entry-tags {
				ul {
					margin-bottom: 0;
					li {
						&:before {
							background: fade(@subtitle-color, 50%);
						}
						a {
							color: @subtitle-color;
						}
					}
				}
			}
			.entry-content {
				margin-top: 15px;
				a {
					color: @title-color;
					overflow: hidden;
					&:hover {
						color: @main-site-light-color;
					}
				}
			}
		}
    }
    &.mini {
		.project .entry-thumb {
			margin-bottom: 6px;
		}
		.post.columns.project{
			margin-bottom: 0;
		}
		.post.columns.project .cover {
			padding: 0;
		}
    }
}

#portfolio-page {
	&.dfd-full-width-folio-offsets {
		padding: 0 30px;
	}
}

#grid-folio {
	&.grid-folio,
	&.grid-folio-full-width {
		margin: 0;
		article.project {
			margin: 0;
			.cover {
				padding: 0;
				img {
					.block();
				}
			}
		}
	}
	&.grid-folio-bordered,
	&.grid-folio-full-width-bordered {
		margin: 0 -10px;
		article.project {
			margin: 0;
			.cover {
				padding: 0 10px 20px;
				background: transparent;
				img {
					.block();
				}
			}
		}
	}
}

.project.one-photo .entry-thumb img {
    min-width: 100%;
}

.single-my-product .project.one-photo {
    padding-bottom: 0;
    border: none;
}

/* Portfolio one column */
.project.project-one-column {
    padding-bottom: 0;
	.entry-thumb {
		margin-bottom: 0 !important;
	}
	.feature-title {
		text-align: left;
		a {
			border-bottom-width: 0;
		}
	}
	.entry-tags {
		ul li {
			&:before {
				background: fade(@subtitle-color, 50%);
			}
			a {
				color: @subtitle-color;
			}
		}
	}
	.entry-content {
		.block();
		text-align: left;
		position: relative;

		p {
			&:last-child {
				margin-bottom: 0;
			}
		}
	}
}

/* -----------------------------------------
   Single Porfolio Page
----------------------------------------- */
.single-folio-video {
	margin-top: 25px;
    overflow: hidden;
}

#my-work-slider {
	.clearfix();
    clear: both;
    .rel();
    text-align: center;
	list-style: none;

    > img {
		display: none;
    }
}

ul.slides li {
    text-align: center;
}
/* Single portfolio item styles */
.single-folio {
    .portfolio-inside-main-carousel {
		.carousel();
		margin-bottom: 10px;
		.main-slide {
			.rel();
			
			> img {
				.block();
				min-width: 100%;
			}
		}
	}
	.portfolio-inside-thumbs-carousel {
		.carousel();
		margin: 0 -10px;
		.thumb-cover {
			padding: 0 10px;
		}
	}

    .inner-nav {
		margin: 30px 0;
    }
	/* Description position */
	
	/* Media alignment */
    .folio-entry-media {
		.portfolio-inside-width-slider,
		.slides {
			overflow: hidden;
		}
		
		&.desc-left {
			float: right;
			
			.inner-nav {
				padding-left: 20px;
			}
		}

		&.desc-right {
			float: left;
			
			.inner-nav {
				padding-left: 0;
				padding-right: 20px;
			}
		}
		&.desc-bottom {
			margin-bottom: 30px;
		}
    }
	/*Description alignment*/
    .folio-info {
		text-align: left;
		> .row.sticky {
			z-index: 1;
		}
		&.desc-left,
		&.desc-right {
			position: static;
		}
		&.desc-left {
			float: left;
		}
		&.desc-right {
			float: right;
		}
		&.desc-top,
		&.desc-bottom {
			.folio-info-field {
				.folio-inside-add-info {
					margin-bottom: 0;
					margin-top: 30px;
					.folio-client,
					.folio-inside-like {
						float: none;
						clear: both;
						text-align: left;
					}
					.folio-client {
						margin-bottom: 5px;
					}
				}
				&.tasks {
					.rel();
					background: transparent;
				}
				&.folio-info-field-inner {
					.rel();
					background: transparent;
				}
				&.folio-add-info {
					div.box-name {
						margin-bottom: 29px;
					}
				}
			}
		}
		.folio-info-field {
			.rel();
			text-align: left;
			margin-bottom: 35px;
			z-index: 1;
			
			&:last-child {
				margin-bottom: 0;
			}
			
			&.folio-add-info {
				line-height: 30px;
			}
			.folio-field-name {
				.rel();
				text-transform: uppercase;
				text-align: left;
				margin-bottom: 27px;
			}
			blockquote {
				margin-top: 0;
				margin-bottom: 0;
			}
			.entry-tags {
				ul li {
					&:before {
						background: fade(@title-color, 50%);
					}
					a {
						color: @title-color;
						&:hover {
							color: @main-site-light-color;
						}
					}
				}
			}
		}
    }
	.folio-add-info {
		div.box-name {
			text-transform: uppercase;
			margin-bottom: 20px;
		}
	}
	
	.folio-inside-add-info {
		margin-bottom: 45px;
		> * {
			line-height: inherit;
		}
	}

	.clear + .dfd-meta-container {
		margin-bottom: 40px;
	}
	.dfd-meta-container {
		margin-top: 0;
		border-top-width: 0;
	}
	
	.folio-client {
		float: left;
		color: @second-site-light-color;
		
		a {
			line-height: @default-button-line-height;
			padding: 0 35px;
			background: transparent;
			border: 1px solid fade(@title-color, 10%);
			color: @title-color;
			.rounded(50px);
			.transition(~"border-color .3s ease, background .3s ease, color .3s ease");
			&:hover {
				border-color: @main-site-light-color;
			}
		}

		* {
			line-height: inherit;
		}
	}

	.folio-inside-like {
		float: right;
		overflow: hidden;

		* {
			line-height: inherit;
		}

		> div {
			float: left;
			&.subtitle {
				padding-right: 10px;
			}
			a {
				.block();
				overflow: hidden;
				color: @subtitle-color;
				&:hover {
					color: @second-site-light-color;
				}
			}
			i {
				float: left;
				padding-right: 5px;
			}
			.count {
				.block();
				float: right;
				font-size: @entry-meta-font-size;
			}
		}
	}
	/* Entry meta */
    .entry-meta {
		padding: 0;
    }
	/* Social share */
    .share-cover {
		padding-bottom: 0;
		.entry-share {
			text-align: center;
			.subtitle {
				.hide();
			}
			ul {
				padding-top: 0;
				border-top-width: 0;
				a:not(:hover){
					color: @entry-meta-color;
				}
			}
		}
    }
	.project.dfd-masonry-full-width-offset {
		.dfd-single-share-fixed {
			margin-left: -70px;
		}
	}
	/* Gallery variants */
    &.advanced_gallery {
		#my-work-slider > .slides {
			img {
				min-width: 100%;
			}
		}
	}
    &.big_images_list,
    &.middle_image_list,
    &.small_images_list,
    &.advanced_gallery {
		#my-work-slider > .slides {
			list-style: none;
			li {
				line-height: 0;
				padding-bottom: 0;
				padding-right: 0;
				float: left !important;
				img {
					.block();
				}
			}
		}
    }
    &.big_images_list {
		#my-work-slider > .slides {
			li {
				max-width: 100%;
				margin-bottom: 20px;
			}
		}
    }
    &.advanced_gallery {
		#my-work-slider > .slides {
			margin: 0 auto;
			li.eight {
				padding-bottom: 0;
			}
		}
    }

    .video-js {
		margin-bottom: 10px;
    }
	
	&.folio_inside_2 {
		.project {
			text-align: left;
			.dfd-blog-title {
				margin-bottom: 0;
			}
			.portfolio-inside-width-slider,
			.loading {
				margin-top: 25px;
			}
			.loading {
				ul.slides {
					margin: -3px;
					li {
						a {
							.block();
							padding: 3px;
						}
					}
				}
			}
			.dfd-folio-add-fields .folio-info-field {
				> span:first-child {
					.link-style();
				}
				a {
					.link-style();
					.link-decoration();
				}
			}
		}
		.dfd-single-share-fixed {
			margin-top: 1px;
		}
		.folio-inside-add-info {
			margin-bottom: 0;
			.folio-client {
				.rel();
				padding-left: 30px;
				margin-left: 10px;
				&:before {
					content: "\ec22";
					font-family: @font-icons-main;
					font-size: 16px;
					height: 1em;
					line-height: 1;
					.abs();
					left: 0;
					top: 50%;
					margin-top: -.5em;
					color: @link-color;
				}
				a {
					.link-style();
					.link-decoration();
					height: 36px;
					line-height: 36px;
					padding: 0;
					background: transparent;
					border: none;
				}
			}
		}
		.folio-entry-media {
			.portfolio-inside-width-slider,
			.slides {
				overflow: hidden;
				img {
					.rel();
					.block();
					margin: 0 auto;
					border: 7px solid @background-sidebars;
					.box-shadow(0px 0px 0px 0px transparent);
					.transform(perspective(0));
					.transition(all .3s ease);
					&:hover {
						border-color: @main-site-dark-color;
						.box-shadow(0px 0px 0px 1px @border-color);
						.transform(perspective(400px));
					}
				}
			}
			.portfolio-inside-thumbs-carousel {
				.carousel-gradient();
				.thumb-slide {
					.thumb-cover {
						padding: 10px;
						img {
							.box-shadow(0px 0px 0px 0px transparent);
							.transform(perspective(0));
							.transition(all .3s ease);
						}
						&:hover {
							img {
								border-color: @main-site-dark-color;
								.box-shadow(0px 2px 11px 3px @border-color);
								.transform(perspective(400px));
							}
						}
					}
					&.slick-center {
						.thumb-cover {
							img {
								border-color: @main-site-dark-color;
								.box-shadow(0px 0px 0px 1px @border-color);
							}
						}
					}
				}
			}
		}
		.folio-info-field {
			.folio-field-name {
				.link-style();
				&:hover {
					color: @link-color;
				}
			}
			p {
				&:last-child {
					margin-bottom: 0;
				}
			}
		}
		.folio-info.desc-top,
		.folio-info.desc-bottom {
			> .row > .columns {
				&:last-child .folio-info-field {
					margin-bottom: 0;
				}
			}
			.folio-info-field {
				margin-bottom: 30px;
			}
			.dfd-folio-add-fields-wrap {
				.rel();
				.clearfix();
				padding-top: 15px;
				padding-bottom: 15px;
				margin-bottom: 15px;
				&:before {
					content: "";
					.block();
					.abs();
					left: 10px;
					right: 10px;
					bottom: 0;
					border-bottom: 1px dotted @border-color;
				}
				.folio-info-field {
					margin-bottom: 0;
					p {
						display: inline;
					}
				}
				.four.columns {
					.rel();
					&:before {
						content: "";
						.block();
						width: 0;
						.abs();
						left: -15px;
						top: -15px;
						bottom: -15px;
						border-left: 1px dotted @border-color;
					}
				}
			}
		}
		.folio-info.desc-left,
		.folio-info.desc-right {
			margin-top: 10px;
			> .row {
				.folio-info-field {
					.rel();
					padding: 20px;
					margin-bottom: 12px;
					background: @background-sidebars;
					.dfd-zigzags();
					.folio-field-name {
						margin-bottom: 10px;
					}
					blockquote {
						margin-left: -20px;
					}
				}
				.dfd-folio-add-fields .folio-info-field {
					> * {
						.block();
					}
					> span:first-child {
						.link-style();
						margin-bottom: 10px;
					}
				}
				> .columns {
					&:last-child .folio-info-field {
						margin-bottom: 0;
					}
				}
			}
		}
		#comments,
		#respond {
			text-align: left;
		}
	}
}
.dfd-portfolio-shortcodes {
	padding-top: 40px;
}

#layout.dfd-portfolio-loop {
	margin-top: 40px;
	margin-bottom: 40px;
}

.dfd-portfolio-loop {
	> .row.full_width {
		width: 100%;
		margin: 0;
		padding: 0 30px;
	}
	.filter {
		text-align: inherit;
	}
	.dfd-portfolio {
		&.dfd-portfolio-standard {
			.project {
				margin-bottom: 30px;
				&:last-child {
					margin-bottom: 0;
				}
			}
		}
		&.dfd-folio-title-front {
			.project .entry-thumb:hover + .dfd-folio-heading-wrap {
					.opacity(0);
					visibility: hidden;
					.transition(~"opacity .3s ease, visibility .3s ease");
			}
			.dfd-folio-heading-wrap {
				.abs();
				left: 0;
				right: 0;
				top: auto;
				margin-top: 0 !important;
				padding: 10px 20px;
				background: -webkit-linear-gradient(bottom, fade(@forth-site-dark-color, 40%), transparent);
				background: -moz-linear-gradient(bottom, fade(@forth-site-dark-color, 40%), transparent);
				background: -ms-linear-gradient(bottom, fade(@forth-site-dark-color, 40%), transparent);
				background: -o-linear-gradient(bottom, fade(@forth-site-dark-color, 40%), transparent);
				background: linear-gradient(bottom, fade(@forth-site-dark-color, 40%), transparent);
				.transform(translateY(-100%));
				.opacity(1);
				visibility: visible;
				.transition(~"opacity .3s ease .3s, visibility .3s ease .3s");
				.dfd-blog-title a {
					background-image: -webkit-linear-gradient(to right, fade(@main-site-dark-color,0) 50%, fade(@main-site-dark-color,15%) 50%);
					background-image: -moz-linear-gradient(to right, fade(@main-site-dark-color,0) 50%, fade(@main-site-dark-color,15%) 50%);
					background-image: -ms-linear-gradient(to right, fade(@main-site-dark-color,0) 50%, fade(@main-site-dark-color,15%) 50%);
					background-image: -o-linear-gradient(to right, fade(@main-site-dark-color,0) 50%, fade(@main-site-dark-color,15%) 50%);
					background-image: linear-gradient(to right, fade(@main-site-dark-color,0) 50%, fade(@main-site-dark-color,15%) 50%);
				}
			}
		}
		&.dfd-folio-title-deco-background {
			.project {
				.cover {
					.dfd-folio-heading-wrap {
						margin: 0;
						padding: 15px 25px;
						background: @third-site-dark-color;
						div.dfd-portfolio-title {
							color: @main-site-dark-color;
							a {
								color: inherit;
							}
						}
						> div.subtitle {
							color: fade(@main-site-dark-color, 50%);
						}
					}
				}
			}
		}
		&.dfd-folio-title-deco-line {
			.dfd-folio-heading-wrap {
				div.dfd-portfolio-title {
					.rel();
					overflow: hidden;
					a {
						.rel();
						&:before,
						&:after {
							content: "";
							.block();
							width: 400%;
							height: 0;
							.abs();
							top: 100%;
							margin-top: -5px;
							border-bottom: 1px solid @border-color;
						}
						&:before {
							left: 100%;
							margin-left: 5px;
						}
						&:after {
							right: 100%;
							margin-right: 5px;
						}
					}
				}
			}
		}
		&.dfd-folio-title-deco-shadow {
			.project {
				.cover {
					.dfd-folio-heading-wrap {
						padding: 15px 25px;
						.box-shadow(0px 2px 8px 3px fade(@third-site-dark-color, 50%));
					}
				}
			}
		}
		.project {
			.cover {
				.dfd-folio-heading-wrap {
					text-align: inherit;
					margin-top: 15px;
					div.dfd-portfolio-title {
						text-align: inherit;
					}
					> div.subtitle {
						text-align: inherit;
					}
				}
				.entry-content {
					overflow: hidden;
					height: 3.2em;
					line-height: 1.6;
					text-align: inherit;
					margin-top: 15px;
				}
			}
		}
	}
}