/* #Hover layouts
================================================== */

/* # Background color: custom
================================================== */
.rollover i,
.post-rollover i,
.rollover-video i {
	background-color: fade(@rollover-bg-color, @plain-hover-opacity);
	.background-fade-gradient (@startColor: @rollover-bg-color, @endColor: @rollover-bg-color-2, @opacity: @plain-hover-opacity);
}

.hover-style-two:not(.effect-layla):not(.effect-bubba):not(.effect-sarah) .rollover-content,
.buttons-on-img .rollover-content,
.albums .rollover-thumbnails-on i,
.dt-albums-shortcode .rollover-thumbnails-on i,
.rollover-buttons-on i,
.hover-scale .rollover-project:after,
.hover-style-two.content-align-bottom .rollover-project:after {
	background-color: fade(@project-rollover-bg-color, @project-bg-hover-opacity);
	.background-fade-gradient (@startColor: @project-rollover-bg-color, @endColor: @project-rollover-bg-color-2, @opacity: @project-bg-hover-opacity);
}
.rollover-project {
	.effect-bubba &,
	.effect-layla &,
	.effect-sarah & {
		background-color: @project-rollover-bg-color;
		.background-gradient (@startColor: @project-rollover-bg-color, @endColor: @project-rollover-bg-color-2);
	}
}
@percent-to-num-opacity: (unit(@project-bg-hover-opacity) / 100);

 > a > img{
	.mobile-false .effect-bubba:not(.hover-color-static) .rollover-project:hover &,
	.mobile-false .effect-layla:not(.hover-color-static) .rollover-project:hover &,
	.mobile-false .effect-sarah:not(.hover-color-static) .rollover-project:hover &,
	.mobile-true .effect-bubba:not(.hover-color-static) .is-clicked &,
	.mobile-true .effect-layla:not(.hover-color-static) .is-clicked &,
	.mobile-true .effect-sarah:not(.hover-color-static) .is-clicked & {
		opacity: 1 - @percent-to-num-opacity;
	}
}
// .effect-bubba .rollover-project:hover > a > .blur-effect {
// 	opacity: 1 - @percent-to-num-opacity;
// }
/* # Background color: dark
================================================== */
@percent-to-num: (unit(@bg-hover-opacity) / 100);
@percent-to-num-plain: (unit(@plain-hover-opacity) / 100);
.hover-color-static:not(.effect-layla):not(.effect-bubba):not(.effect-sarah) .rollover-content,
.accent-gradient .hover-color-static:not(.effect-layla):not(.effect-bubba):not(.effect-sarah) .rollover-content,
.hover-color-static.hover-scale .rollover-project:after,
.hover-color-static.hover-style-two.content-align-bottom .rollover-project:after {
	background-color: rgba(0, 0, 0, 0.65);
	background-image: none;
}
.rollover-project {
	.hover-color-static.effect-bubba &,
	.hover-color-static.effect-layla &,
	.hover-color-static.effect-sarah & {
		background-color: rgba(0, 0, 0, 1);
		background-image: none;
	}
}
.hover-color-static .buttons-on-img i,
.hover-color-static .rollover i,
.hover-color-static .rollover-video i,
.hover-color-static .rollover.rollover-thumbnails-on i,
#page .hover-color-static .buttons-on-img .rollover-content {
	background-color: rgba(0, 0, 0, 0.35);
	background-image: none;
}


/* # Buttons on rollover
================================================== */


.links-container > a {
	.accent-portfolio-icons & {
		background-color: @accent-bg-color;
	}
	.accent-portfolio-icons.accent-gradient & {
		.background-gradient (@startColor: @accent-bg-color, @endColor: @accent-bg-color-2);
	}
}
.rollover-thumbnails span:first-child i {
	.accent-bg-mixin;
}

.rollover-content {
	line-height: @base-line-height;
}
	.rollover-content h2.entry-title {
		.header-color;
	}


/* #Under images
================================================== */
.portfolio-categories a,
.portfolio-categories a *,
.portfolio-categories span {
	color: fade(@base-color, 50%);
	.stripe-style-1 & {
		color: fade(@strype-1-color, 50%);
	}
	.stripe-style-2 & {
		color: fade(@strype-2-color, 50%);
	}
	.stripe-style-3 & {
		color: fade(@strype-3-color, 50%);
	}
	.stripe-style-4 & {
		color: fade(@strype-4-color, 50%);
	}
	.stripe-style-5 & {
		color: fade(@strype-5-color, 50%);
	}
	-webkit-text-fill-color: fade(@base-color, 50%);
	.stripe-style-1 & {
		-webkit-text-fill-color: fade(@strype-1-color, 50%);
	}
	.stripe-style-2 & {
		-webkit-text-fill-color: fade(@strype-2-color, 50%);
	}
	.stripe-style-3 & {
		-webkit-text-fill-color: fade(@strype-3-color, 50%);
	}
	.stripe-style-4 & {
		-webkit-text-fill-color: fade(@strype-4-color, 50%);
	}
	.stripe-style-5 & {
		-webkit-text-fill-color: fade(@strype-5-color, 50%);
	}
}