.cherry-projects-wrapper .projects-item-instance {
	.project-meta {
		margin: 0 -10px 20px;
	}

	.project-media + .project-content {
		margin-top: 25px;
	}

	.project-entry-title {
		margin-bottom: 6px;
	}

	.project-entry-content {
		margin-top: 20px;
		margin-bottom: 20px;
	}
	.hover-content {
		&.column-format{
			display: flex;
			text-align: center;
			justify-content: center;
		}
	}

	.simple-icon {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		text-align: center;
		background: none;
		margin: 5px 12px;
		&:focus {
			outline: 0;
		}
		span {
			@include linear-icon;
			width: auto;
			height: auto;
			line-height: 50px;
			@include font-size(2.5);
			margin: 0;
		}

		&.zoom-link span:before {
			content: '\e936';
		}
		&.permalink span:before {
			content: '\e917';
		}
		&.external-link span:before {
			content: '\e884';
		}
	}

	// fix masonry column into chrome
	.hover-content {
		top: 0;
		left: 0;
	}

	&.masonry-layout-item .hover-content {
		overflow: visible;
	}

	&.masonry-layout-item .featured-image {
		a.wp-image {
			display: block;
			overflow: hidden;
		}
	}

	&.simple-scale-hover {
		.hover-content {
			> * {
				transform: scale(0) translateZ(0);
			}
			&:hover {
				> * {
					transform: scale(1) translateZ(0);
				}
			}
		}
	}
	&.simple-fade-hover {
		.hover-content {
			> * {
				transform: translateY(100%) translateZ(0);
			}
			&:hover {
				> * {
					transform: translateY(0) translateZ(0);
				}
			}
		}
	}
}

// fix masonry column into chrome
.cherry-projects-wrapper .masonry-layout {
	.projects-item-instance {
		.featured-image {
			a.wp-image {
				display: block;
				overflow: hidden;
			}
		}
	}
}

// template style
.cherry-projects-wrapper {
	.projects-container.grid-layout {
		.projects-item {
			margin-bottom: 0 !important;
		}
	}
	.projects-container.masonry-layout,
	.projects-container.list-layout {
		padding-top: 20px;
	}

	.projects-container.list-layout {
		.projects-item {
			margin-bottom: 50px;
		}
		.inner-wrapper {
			@include media-breakpoint-between(xs, md) {
				display: block;
			}

			.project-media {
				margin-right: 0;
				@include media-breakpoint-up(lg) {
					margin-right: 30px;
				}
			}
			.project-content {
				@include media-breakpoint-up(lg) {
					margin-top: 0;
				}
			}
			.project-meta {
				margin-bottom: 10px;
			}
		}
	}

	.projects-container {
		&[data-settings*='"template":"grid-overlay.tmpl"'],
		&[data-settings*='"template":"masonry-overlay.tmpl"'],
		&[data-settings*='"template":"justified-overlay.tmpl"'],
		&[data-settings*='"template":"cascading-grid-overlay.tmpl"']{
			.project-entry-title {
				margin-bottom: 0;
				position: relative;
				&:after {
					position: absolute;
					content: '';
					height: 1px;
					background: $color__white;
					width: 115px;
					max-width: 100%;
					bottom: -40px;
					left: 50%;
					margin-left: -57.5px;
				}
			}
			.project-meta {
				margin-bottom: 30px;
			}
			.hover-content {
				padding: 30px;
			}
			.projects-item {
				&.simple-scale-hover {
					.featured-image {
						transition: all 0.4s ease-out;
					}
					&:hover {
						.featured-image {
							@include scale(0.9);
						}
					}
				}
			}
		}

		.projects-container {
			&[data-settings*='"template":"justified-overlay.tmpl"']{
				.projects-item {
					.content-layout-fullwidth & {
						max-width: 100% !important;
					}
				}
			}
		}
	}

}

.cherry-projects-wrapper .cherry-projects-ajax-loader,
.cherry-projects-terms-wrapper .cherry-projects-ajax-loader{
	z-index: 990;
	background-color: transparent;
}

// filters and pagination style
.cherry-projects-wrapper {
	.archive & {
		margin-bottom: 4em;
	}
	.projects-filters,
	#tm_builder_outer_content & .projects-filters {
		justify-content: center;
		margin: 10px -17.5px;
	}

	ul.projects-filters-list,
	#tm_builder_outer_content & ul.projects-filters-list {
		li {
			@include font-size(.75);
			text-transform: uppercase;
			font-weight: 400;
			letter-spacing: .72px;
			margin: 0 17.5px;
			/*rtl:raw:
			float: right;
			*/
			span {
				transition: .3s;
			}
		}
	}
	ul.order-filters,
	#tm_builder_outer_content & ul.order-filters {
		li {
			@include font-size(.75);
			text-transform: uppercase;
			font-weight: 400;
			letter-spacing: .72px;

			span.current {
				/*rtl:raw:
				display: inline-block;
				margin-right: 10px;
				*/
			}
		}
		> li {
			margin: 0 17.5px;

			ul.orderby-list li span {
				transition: .3s;
			}
		}
	}

	.projects-container.grid-layout,
	.projects-container.justified-layout {
		.projects-pagination,
		.projects-ajax-button-wrapper {
			padding: 0 25px;
		}
	}

	.projects-ajax-button-wrapper {
		margin: 35px 0;

		.projects-ajax-button span {
			@include btn;
		}
	}

	.projects-pagination {
		text-align: center;
		justify-content: center;
		margin: 35px 0;

		.page-navigation span,
		.page-link li {
			float: none;
			line-height: 50px;
			display: inline-block;
			height: 50px;
			margin: 0 5px 5px;
			text-align: center;
			text-decoration: none;
			cursor: pointer;
			transition: .3s;

			span {
				display: block;
				line-height: 50px;
			}

			@include font-size(.75);
			@include border-radius;
		}

		.page-navigation span {
			min-width: 30px;
			padding: 0;
			i {
				vertical-align: middle;
				@include font-size(.875);
			}
		}

		.page-link {
			li {
				border: 1px solid;
				min-width: 50px;
				span {
					padding: 0;
				}

				&:hover,
				&.active {
					border-color: $color__background-hr;

					&,
					#tm_builder_outer_content & {
						background-color: transparent;
					}
					span {
						color: inherit;
					}
				}
				&.active {
					pointer-events: none;
				}
			}
		}
	}
}

// single post style
.cherry-projects-single,
.cherry-projects-wrapper .projects-item-instance{
	.featured-image a,
	.additional-image a {
		&:before {
			content: '\e936';
			position: absolute;
			@include linear-icon;
			@include font-size(2.5);
			line-height: 1;
			left: 50%;
			top: 50%;
			width: 2.5rem;
			height: 2.5rem;
			text-align: center;
			margin: -1.25rem 0 0 -1.25rem;
			transition: all 0.4s ease-out;
			z-index: 1;
		}

		.cover {
			transition: all 0.4s ease-out;
		}

		&:focus {
			outline: 0;
		}
	}
}

.cherry-projects-single {
	.additional-image a,
	.featured-image a {
		&:before {
			transform: scale(0);
		}
		&:hover {
			&:before {
				transform: scale(1);
			}
		}
	}
}

.cherry-projects-wrapper .projects-item-instance {
	.featured-image a {
		.cover {
			position: absolute;
			width: 100%;
			height: 100%;
			display: block;
			opacity: 0;
		}

		&:hover {
			.cover {
				opacity: 1;
			}
		}
	}

	&.simple-scale-hover {
		.featured-image a {
			&:before {
				transform: scale(0) translateZ(0);
			}
			&:hover {
				&:before {
					transform: scale(1) translateZ(0);
				}
			}
		}
	}
	&.simple-fade-hover {
		.featured-image a {
			&:before {
				opacity: 0;
				transform: translateY(100%) translateZ(0);
			}
			&:hover {
				&:before {
					opacity: 1;
					transform: translateY(0) translateZ(0);
				}
			}
		}
	}
}


.cherry-projects-single {
	margin-bottom: 4em;

	&__container {
		display: block;
	}
	&__header {
		margin-bottom: 40px;
	}
	&__media {
		/*rtl:ignore*/
		margin-right: 0;
	}

	.project-entry-title {
		margin-bottom: 18px;
	}

	.post-terms {
		margin-top: 0;
		margin-bottom: 0;
	}

	.featured-image {
		margin-bottom: 40px;
	}

	.cherry-projects-single-meta {
		border: none;
		margin-top: 0;
		margin-bottom: 0;
	}

	.cherry-projects-single-details-list {

		h4 {
			margin-top: 60px;
			padding-top: 60px;
			border-top: 1px solid $color__background-hr;
		}
		.cherry-projects-details-list-title {
			margin-bottom: 26px;
		}
		ul {
			li {
				margin-bottom: 0;
				span {
					display: inline-block;
					/*rtl:raw:
						margin-right: 0;
						margin-left: 5px;
					*/
				}
				& + li {
					margin-top: 16px;
				}
			}
		}
	}
	.cherry-projects-single-skills-list {
		ul {
			margin-top: 60px;
			padding-top: 60px;
			border-top: 1px solid $color__background-hr;
		}
		.cherry-skill-item {
			margin-bottom: 0;
			position: relative;
			& + .cherry-skill-item {
				margin-top: 30px;
			}
			.skill-label {
				padding-right: 70px;
				margin-bottom: 10px;
			}
			.skill-bar {
				height: auto;
				padding: 6px;
				@include border-radius();

				span {
					display: block;
					height: 10px;
					position: static;

					em {
						position: absolute;
						top: 0;
						right: 0;
					}
				}
			}
		}
	}

	.cherry-projects-additional-image-list,
	.cherry-projects-video-list,
	.cherry-projects-audio-list{
		margin-bottom: 40px;
	}
	.share-btns__list {
		margin-top: 60px;
	}
}

/*rtl:begin:ignore*/
.cherry-projects-slider {
	&__instance {
		margin-top: 60px;
		margin-bottom: 40px;
		
		.slider-pro {
			background: transparent;
		}
		
		// sp-full-screen-button
		.slider-pro .sp-full-screen-button {
			right: 20px;
			top: 10px;
			transform: none;

			&:before {
				content: '\e94c';
				color: $color__white;
				transition: .3s;
				@include linear-icon;
				font-size: 20px;
			}
		}
		&[data-settings*='"thumbnails-position":"top"'] .slider-pro .sp-full-screen-button {
			top: 146px;
		}
		&[data-settings*='"thumbnails-position":"right"'] .slider-pro .sp-full-screen-button {
			right: 193px;
		}

		// sp-thumbnail
		.slider-pro .sp-thumbnails-container{
			background: transparent;
			&.sp-bottom-thumbnails {
				position: static;
				padding: 0;
				margin-top: 9px;
			}

			&.sp-top-thumbnails {
				margin-bottom: 9px;
			}

			&.sp-bottom-thumbnails,
			&.sp-top-thumbnails {
				.sp-thumbnail-container {
					margin-left: 5px;
					margin-right: 5px;
					&:first-child {
						margin-left: 0;
					}
				}
			}

			.sp-thumbnail-container {

				.sp-thumbnail {
					border: none;
					opacity: .4;
					transition: .3s;
					&:hover {
						opacity: .8;
						border: none;
					}
				}

				&.sp-selected-thumbnail {
					.sp-thumbnail {
						opacity: 1;
					}
				}
			}
		}

		// sp-image-container
		.sp-image-container {
			position: relative;

			&:before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				height: 78px;
				z-index: 1;
				opacity: 0;
				transition: .3s;
			}
		}

		.slider-pro:hover .sp-image-container:before {
			opacity: 1;
		}

		// sp-arrow (navigation)
		.slider-pro {
			.sp-arrows .sp-arrow:before {
				background: none;
			}
		}

		.sp-arrow {
			width: 50px;
			height: 50px;
			text-align: center;
			z-index: 1;
			&:before {
				@include linear-icon();
				font-size: 20px;
				position: relative;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				line-height: 50px;
				transform: none;
				background: none;
			}
			&:after {
				display: none;
			}
			&.sp-previous-arrow {
				@include border-right-radius($border__radius);
			}
			&.sp-next-arrow {
				@include border-left-radius($border__radius);
			}
		}
		.sp-horizontal {
			.sp-arrows {
				margin-top: -25px;
			}
			.sp-previous-arrow {
				left: 0;
				&:before {
					content: '\e93b';
				}
			}
			.sp-next-arrow {
				right: 0;
				&:before {
					content: '\e93c';
				}
			}
		}
		.sp-vertical {
			.sp-arrows {
				margin-left: 0;
				left: calc(100% - 70px);
			}
			.sp-previous-arrow {
				top: auto;
				bottom: 95px;
				@include border-radius();
				&:before {
					content: '\e93b';
				}
			}
			.sp-next-arrow {
				bottom: 30px;
				@include border-radius();
				&:before {
					content: '\e93c';
				}
			}
		}
	}
}
/*rtl:end:ignore*/

// Project terms
.cherry-projects-terms-wrapper .projects-terms-container {

	&.masonry-layout .hover-content {
		overflow: visible;
	}

	&.grid-layout,
	&.masonry-layout,
	&.cascading-grid-layout{

		.project-terms-content {
			transition: .3s;
			padding: 17px 20px;

			h5 {
				margin: 0;
			}

			p{
				margin-top: 10px;
				@include font-size(.75);
				line-height: 1.4166666;
			}
		}
	}
	&.grid-layout {
		.projects-terms-item {
			margin-bottom: 0!important;
		}
	}

	&.list-layout {
		.projects-terms-item {
			margin-bottom: 50px;
		}
		.inner-wrapper {
			@include media-breakpoint-between(xs, md) {
				display: block;
			}

			.project-terms-media {
				margin-right: 0;
				@include media-breakpoint-up(lg) {
					margin-right: 30px;
				}
			}
			.project-terms-content {
				margin-top: 30px;
			}
		}
	}

	.term-permalink{
		width: 50px;
		height: 50px;
		border-radius: 50%;
		text-align: center;
		background: none;
		margin: 5px 12px;
		span{
			@include linear-icon;
			width: auto;
			height: auto;
			line-height: 50px;
			@include font-size(2.5);
			margin: 0;
			&:before{
				content: '\e917';
			}
		}
	}
}

/* Custom Templates Style*/
@import "tmpl/skin1";
