/* !Defining basic mixins */
.background-gradient (@startColor: #eee, @endColor: white) when (iscolor(@endColor)) {
	background: @startColor; /* Old browsers */
	background: -webkit-linear-gradient(30deg,  @startColor 0%,@endColor 100%); /* Chrome10+,Safari5.1+ */
	background: linear-gradient(30deg, @startColor 0%,@endColor 100%); /* W3C */
}
.text-gradient (@startColor: #eee, @endColor: white) when (iscolor(@endColor)) {
	background: -webkit-gradient(linear, left top, right top, color-stop(32%,@startColor), color-stop(100%,@endColor)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  @startColor 32%,@endColor 100%); /* Chrome10+,Safari5.1+ */

	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.background-fade-gradient (@startColor: #eee, @endColor: white, @opacity: 30%) when (iscolor(@endColor)) {
	.background-gradient( fade( @startColor, @opacity ), fade( @endColor, @opacity ) );
}
.accent-bg-mixin {
	color: #fff;
	background-color: @accent-bg-color;
	.accent-gradient & {
		.background-gradient (@startColor: @accent-bg-color, @endColor: @accent-bg-color-2);
	}
}
.transparent-bg-mixin(@opacity: 8%) {
	background-color: fade(@base-color, @opacity);
	.sidebar &,
	.sidebar-content &,
	.stripe .sidebar-content & {
		background-color: fade(@widget-sidebar-color, @opacity);
	}
	.footer & {
		background-color: fade(@widget-footer-color, @opacity);
	}
	.stripe-style-1.stripe-transparent-bg & {
		background-color: fade(@strype-1-color, @opacity);
	}
	.stripe-style-2.stripe-transparent-bg & {
		background-color: fade(@strype-2-color, @opacity);
	}
	.stripe-style-3.stripe-transparent-bg & {
		background-color: fade(@strype-3-color, @opacity);
	}
	#page .stripe-style-4 &,
	.boxes-solid-bg .stripe-style-4 & {
		background-color: fade(@strype-4-color, @opacity);
	}
	#page .stripe-style-5 &,
	.boxes-solid-bg .stripe-style-5 & {
		background-color: fade(@strype-5-color, @opacity);
	}
}
.solid-bg-mixin {
	background-color: @content-boxes-bg;

	.stripe-style-1 & {
		background-color: @strype-1-boxes-bg;
	}
	.stripe-style-2 & {
		background-color: @strype-2-boxes-bg;
	}
	.stripe-style-3 &{
		background-color: @strype-3-boxes-bg;
	}
	.stripe-style-4 & {
		background-color: rgba(255, 255, 255, 0.15);
	}
	.stripe-style-5 &{
		background-color: rgba(0, 0, 0, 0.08);
	}
}
.header-color {
	color: @h1-color;
	.sidebar-content &,
	.stripe .sidebar-content.solid-bg & {
		color: @widget-sidebar-header-color;
	}
	.footer & {
		color: @widget-footer-header-color;
	}
	.stripe-style-1 & {
		color: @strype-1-header-color;
	}
	.stripe-style-2 & {
		color: @strype-2-header-color;
	}
	.stripe-style-3 & {
		color: @strype-3-header-color;
	}
	.stripe-style-4 & {
		color: @strype-4-header-color;
	}
	.stripe-style-5 & {
		color: @strype-5-header-color;
	}
}
/*Transparent color*/
.color-base-transparent {
	color: fade(@base-color, 50%);
	.sidebar-content &,
	.stripe .sidebar-content & {
		color: fade(@widget-sidebar-color, 50%);
	}
	.footer & {
		color: fade(@widget-footer-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%);
	}
}
.box-shadow (@string) {
	-webkit-box-shadow: @string;
	box-shadow:         @string;
}
/*Theme Options -> Appearance -> Content boxes -> Decoration: Outline*/
.outline-decoration {
	.outline-element-decoration & {
		.box-shadow (inset 0px 0px 0px 1px @divider-bg-color);
	}
	.outline-element-decoration .stripe .sidebar-content.solid-bg & {
		.box-shadow (inset 0px 0px 0px 1px @widget-sidebar-divider-bg-color);
	}
	.outline-element-decoration .stripe:not(.shadow-element-decoration) & {
		.box-shadow (none);
	}
	.stripe-style-1.outline-element-decoration &,
	.outline-element-decoration .stripe-style-1.outline-element-decoration & {
		.box-shadow (inset 0px 0px 0px 1px @strype-1-divider-bg-color);
	}
	.stripe-style-2.outline-element-decoration &,
	.outline-element-decoration .stripe-style-2.outline-element-decoration & {
		.box-shadow (inset 0px 0px 0px 1px @strype-2-divider-bg-color);
	}
	.stripe-style-3.outline-element-decoration &,
	.outline-element-decoration .stripe-style-3.outline-element-decoration & {
		.box-shadow (inset 0px 0px 0px 1px @strype-3-divider-bg-color);
	}
	.outline-element-decoration .stripe-style-4 &,
	.outline-element-decoration .stripe-style-5 & {
		.box-shadow (none);
	}
}
/*Theme Options -> Appearance -> Content boxes -> Decoration: Outline*/
.shadow-decoration {
	.shadow-element-decoration &,
	.shadow-element-decoration .stripe .sidebar-content.solid-bg & {
		.box-shadow (1px 1px 4px 1px rgba(0,0,0,0.1));
	}
	.shadow-element-decoration .stripe:not(.outline-element-decoration) & {
		.box-shadow (none);
	}
	.stripe-style-1.shadow-element-decoration &,
	.shadow-element-decoration .stripe-style-1.shadow-element-decoration &,
	.stripe-style-2.shadow-element-decoration &,
	.shadow-element-decoration .stripe-style-2.shadow-element-decoration &,
	.stripe-style-3.shadow-element-decoration &,
	.shadow-element-decoration .stripe-style-3.shadow-element-decoration & {
		.box-shadow (1px 1px 4px 1px rgba(0,0,0,0.1));
	}
	.shadow-element-decoration .stripe-style-4 &,
	.shadow-element-decoration .stripe-style-5 & {
		.box-shadow (none);
	}
}
/*****************************************************
	!-Stripe style 4
******************************************************/

@strype-4-color: #ffffff; /* It's important to keep this value in quotes */
@strype-4-color-temp: escape(~"@{strype-4-color}");
@strype-4-header-color: #ffffff;
@strype-4-secondary-color: @accent-bg-color;

@strype-4-divider-bg-color: fade(@strype-4-color, 15%); /* color of arrows and dividers */
@strype-4-divider-bg-color-ie: @strype-4-color;
@strype-4-divider-bg-color-temp: escape(~"@{strype-4-divider-bg-color}");

@strype-4-backgrounds-bg-color: @strype-4-divider-bg-color; /* color of backgrounds for meta information, blockquotes, etc. */

@strype-4-bg-color: rgba(46, 48, 49, 1); /* variable color and opacity */
@strype-4-bg-color-ie: #2e3031; /* alternative variable color for ie */
@strype-4-bg-image: ~"";
@strype-4-bg-repeat: ~"";
@strype-4-bg-attachment: ~"fixed";
@strype-4-bg-position-x: ~"center"; /* Constant */
@strype-4-bg-position-y: ~"top";
@strype-4-bg-size: cover;

/* Stripe style 4: end */

/*****************************************************
	!-Stripe style 5
******************************************************/

@strype-5-color: #333333; /* It's important to keep this value in quotes */
@strype-5-color-temp: escape(~"@{strype-5-color}");
@strype-5-header-color: #333333;
@strype-5-secondary-color: @accent-bg-color;

@strype-5-divider-bg-color: fade(@strype-5-color, 15%); /* color of arrows and dividers */
@strype-5-divider-bg-color-ie: @strype-5-color;
@strype-5-divider-bg-color-temp: escape(~"@{strype-5-divider-bg-color}");

@strype-5-backgrounds-color: @strype-5-header-color;
@strype-5-backgrounds-bg-color: @strype-5-divider-bg-color; /* color of backgrounds for meta information, blockquotes, etc. */

@strype-5-bg-color: rgba(255, 255, 255, 1); /* variable color and opacity */
@strype-5-bg-color-ie: #ffffff; /* alternative variable color for ie */
@strype-5-bg-image: ~"";
@strype-5-bg-repeat: ~"";
@strype-5-bg-attachment: ~"fixed";
@strype-5-bg-position-x: ~"center"; /* Constant */
@strype-5-bg-position-y: ~"top";
@strype-5-bg-size: cover;

/* Stripe style 5: end */
//Common decoration
.testimonial-item:not(.testimonial-item-slider),
.testimonial-item .ts-viewport,
.bg-on.team-container {
	.solid-bg-mixin;
	.outline-decoration;
	.shadow-decoration;
}
/* #Testimonials
================================================== */
.avatar-user-icon(@colour) {
	background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='25px' height='25px' viewBox='0 0 25 25' enable-background='new 0 0 25 25' xml:space='preserve'%3E%3Cpath id='user-icon' fill='@{colour}' d='M21.69,18.851c-3.583-0.83-6.917-1.554-5.304-4.604C21.303,4.964,17.689,0,12.5,0C7.206,0,3.683,5.155,8.613,14.247c1.662,3.069-1.796,3.794-5.303,4.604C-0.27,19.678,0.005,21.568,0.005,25h24.991C24.994,21.568,25.271,19.678,21.69,18.851z'/%3E%3C/svg%3E");
}
.testimonial-vcard .no-avatar:after {
	.avatar-user-icon(fade(@base-color, 15%));
	
	.sidebar-content &,
	.stripe .sidebar-content & {
		.avatar-user-icon(fade(@widget-sidebar-color, 15%));
	}
	.footer & {
		.avatar-user-icon(fade(@widget-footer-color, 15%));
	}

	.stripe-style-1 & {
		.avatar-user-icon(fade(@strype-1-color, 15%));
	}
	.stripe-style-2 & {
		.avatar-user-icon(fade(@strype-2-color, 15%));
	}
	.stripe-style-3 & {
		.avatar-user-icon(fade(@strype-3-color, 15%));
	}
	.stripe-style-4 & {
		.avatar-user-icon(fade(@strype-4-color, 15%));
	}
	.stripe-style-5 & {
		.avatar-user-icon(fade(@strype-5-color, 15%));
	}
}
.testimonial-vcard  a.no-avatar:hover:after {
	.avatar-user-icon(white);
}

.text-secondary,
.text-primary,
.text-primary *
{
	.testimonial-item .testimonial-vcard & {
		color: @h1-color;
		.sidebar-content &,
		.stripe .sidebar-content & {
			color: @widget-sidebar-header-color;
		}
		.footer & {
			color: @widget-footer-header-color;
		}
		.stripe-style-1 & {
			color: @strype-1-header-color;
		}
		.stripe-style-2 & {
			color: @strype-2-header-color;
		}
		.stripe-style-3 & {
			color: @strype-3-header-color;
		}
		.stripe-style-4 & {
			color: @strype-4-header-color;
		}
		.stripe-style-5 & {
			color: @strype-5-header-color;
		}
	}
}
a.text-primary:hover,
a.text-primary:hover *
{
	.testimonial-item .testimonial-vcard & {
		color: @accent-bg-color;
		.sidebar-content &,
		.stripe .sidebar-content & {
			color: @accent-bg-color;
		}
		.footer & {
			color: @accent-bg-color;
		}
		.stripe & {
			color: @accent-bg-color;
		}
		.accent-gradient & {
			.text-gradient (@startColor: @accent-bg-color, @endColor: @accent-bg-color-2);
		}
	}
}


.team-author p,
.testimonial-item .testimonial-vcard .text-secondary {
	color: @h6-color;
	font: @h6-font-style @h6-font-variant @h6-font-weight @h6-font-size~"/"@h6-line-height @h6-font-family;
	text-transform: @h6-text-transform;
}
.testimonial-item .testimonial-vcard .text-primary {
	color: @h5-color;
	font: @h5-font-style @h5-font-variant @h5-font-weight @h5-font-size~"/"@h5-line-height @h5-font-family;
	text-transform: @h5-text-transform;
}

/* #Team
================================================== */
.team-author-name {
	color: @h4-color;
	font: @h4-font-style @h4-font-variant @h4-font-weight @h4-font-size~"/"@h4-line-height @h4-font-family;
	text-transform: @h4-text-transform;
}

.widget .team-author-name {
	font: @h5-font-style @h5-font-variant @h5-font-weight @h5-font-size~"/"@h5-line-height @h5-font-family;
	text-transform: @h5-text-transform;
	.header-color;
}
.team-author-name {
	.header-color;
}
.team-author p {
	.color-base-transparent;
}


/* #Benefits
================================================== */
/*Decorative lines*/
.benefit-line-decoration:after,
.hover-line.benefits-style-one .wf-cell > div:after,
.hover-line.benefits-style-two .benefits-inner:after,
.static-line.benefits-style-one .wf-cell > div:after,
.static-line.benefits-style-two .benefits-inner:after {
	.transparent-bg-mixin(@opacity: 15%) ;
}

/*Backgrounds color -> Light*/

.light-bg.icons-bg .benefits-grid-ico,
.light-hover-bg.icons-bg a.benefits-grid-ico:hover {
	#page & {
		background-color: fade(@base-color, 10%);
		background-image: none;
	}
	#page .stripe-style-1 & {
		background-color: fade(@strype-1-color, 10%);
	}
	#page .stripe-style-2 & {
		background-color: fade(@strype-2-color, 10%);
	}
	#page .stripe-style-3 & {
		background-color: fade(@strype-3-color, 10%);
	}
	#page .stripe-style-4 & {
		background-color: fade(@strype-4-color, 10%);
	}
	#page .stripe-style-5 & {
		background-color: fade(@strype-5-color, 10%);
	}
}

/*Icons color -> Light*/
.light-icon-color .benefits-grid-ico > .fa,
.light-icon-hover-color a.benefits-grid-ico:hover > .fa,
.light-icon-color .benefits-grid-ico > .fa:before,
.light-icon-hover-color a.benefits-grid-ico:hover > .fa:before {
	#page & {
		color: fade(@base-color, 50%);
		-webkit-text-fill-color: fade(@base-color, 50%);
		background: none;
	}
	#page .stripe-style-1 & {
		color: fade(@strype-1-color, 50%);
		-webkit-text-fill-color: fade(@strype-1-color, 50%);
	}
	#page .stripe-style-2 & {
		color: fade(@strype-2-color, 50%);
		-webkit-text-fill-color: fade(@strype-2-color, 50%);
	}
	#page .stripe-style-3 & {
		color: fade(@strype-3-color, 50%);
		-webkit-text-fill-color: fade(@strype-3-color, 50%);
	}
	#page .stripe-style-4 & {
		color: fade(@strype-4-color, 50%);
		-webkit-text-fill-color: fade(@strype-4-color, 50%);
	}
	#page .stripe-style-5 & {
		color: fade(@strype-5-color, 50%);
		-webkit-text-fill-color: fade(@strype-5-color, 50%);
	}
}

/*Accent*/
#page .icons-bg.accent-bg .benefits-grid-ico,
#page .icons-bg.accent-hover-bg a.benefits-grid-ico:hover,
.hover-line .benefit-line-decoration:after,
.benefits-style-one.hover-line .wf-cell > div:after,
.benefits-style-two.hover-line .wf-cell .benefits-inner:after {
	color: #fff;
	background-color: @accent-bg-color;

	.accent-gradient & {
		.background-gradient (@startColor: @accent-bg-color, @endColor: @accent-bg-color-2);
	}
}
.icons-bg.accent-bg .benefits-grid-ico,
.icons-bg.accent-hover-bg a.benefits-grid-ico:hover {
	#page & {
		background-color: @accent-bg-color;
	}
}
	.accent-icon-color .benefits-grid-ico > .fa,
	.accent-icon-color .benefits-grid-ico > .fa:before,
	.accent-icon-hover-color a.benefits-grid-ico:hover > .fa,
	.accent-icon-hover-color a.benefits-grid-ico:hover > .fa:before,
	.benefit-title a:hover {
		#page & {
			color: @accent-bg-color;
		}
		.accent-gradient #page & {
			.text-gradient (@startColor: @accent-bg-color, @endColor: @accent-bg-color-2);
		}
		#page .stripe & {
			color: @accent-bg-color;
		}
		// #page .stripe-style-2 & {
		// 	color: @accent-bg-color;
		// }
		// #page .stripe-style-3 & {
		// 	color: @accent-bg-color;
		// }
		// #page .stripe-style-4 & {
		// 	color: @accent-bg-color;
		// }
		// #page .stripe-style-5 & {
		// 	color: @accent-bg-color;
		// }
	}
	.accent-icon-color .benefits-grid-ico > .fa,
	.accent-icon-color .benefits-grid-ico > .fa:before,
	.accent-icon-hover-color a.benefits-grid-ico:hover > .fa,
	.accent-icon-hover-color a.benefits-grid-ico:hover > .fa:before {
		#page & {
			-webkit-text-fill-color: @accent-bg-color;
		}
	}


/* #Main slideshow
================================================== */

	/*Porthole*/
	.rsTitle {
		font: @h1-font-style @h1-font-variant @h1-font-weight @h1-font-size~"/"@h1-line-height @h1-font-family;
		text-transform: @h1-text-transform;
	}
	.rsDesc {
		font: @h2-font-style @h2-font-variant @h2-font-weight @h2-font-size~"/"@h2-line-height @h2-font-family;	
		text-transform: @h2-text-transform;
	}

	@media screen and (max-width: 1200px) {
		.rsTitle {
			font: @h2-font-style @h2-font-variant @h2-font-weight @h2-font-size~"/"@h2-line-height @h2-font-family;
		}
		.rsDesc {
			font: @h3-font-style @h3-font-variant @h3-font-weight @h3-font-size~"/"@h3-line-height @h3-font-family;	
		}
	}

	@media screen and (max-width: 1024px) {
		.rsTitle {
			font: @h3-font-style @h3-font-variant @h3-font-weight @h3-font-size~"/"@h3-line-height @h3-font-family;
		}
		.rsDesc {
			font: @h4-font-style @h4-font-variant @h4-font-weight @h4-font-size~"/"@h4-line-height @h4-font-family;	
		}
	}

	@media screen and (max-width: 800px) {
		.rsTitle {
			font: @h5-font-style @h5-font-variant @h5-font-weight @h5-font-size~"/"@h5-line-height @h5-font-family;
		}
		.rsDesc {
			font: @base-font-style @base-font-variant @base-font-weight @base-font-size~"/"@base-line-height @base-font-family;
		}
	}

	@media screen and (max-width: 320px) {
		.rsTitle {
			font: @base-font-style @base-font-variant @base-font-weight @base-font-size~"/"@base-line-height @base-font-family;
		}
		.rsDesc {
			display: none !important;
			font: @base-font-style @base-font-variant @base-font-weight @base-font-size~"/"@base-line-height @base-font-family;
		}
	}

	#main-slideshow .progress-spinner-left,
	#main-slideshow .progress-spinner-right {
		border-color: @accent-bg-color !important;
	}
	.contentSlider-wrap .psBullet.act:before {
		background-color: fade(@base-color, 25%);
		.sidebar &,
		.sidebar-content &,
		.stripe .sidebar-content & {
			background-color: fade(@widget-sidebar-color, 25%);
		}
		.footer & {
			background-color: fade(@widget-footer-color, 25%);
		}
		.stripe-style-1 & {
			background-color: fade(@strype-1-color, 25%);
		}
		.stripe-style-2 & {
			background-color: fade(@strype-2-color, 25%);
		}
		.stripe-style-3 & {
			background-color: fade(@strype-3-color, 25%);
		}
		.stripe-style-4 & {
			background-color: fade(@strype-4-color, 25%);
		}
		.stripe-style-5 & {
			background-color: fade(@strype-5-color, 25%);
		}
	}
	.contentSlider-wrap .psBullet:after,
	.contentSlider-wrap .psBullet.act:hover:after {
		border-color: fade(@base-color, 25%);
		.sidebar &,
		.sidebar-content &,
		.stripe .sidebar-content & {
			border-color: fade(@widget-sidebar-color, 25%);
		}
		.footer & {
			border-color: fade(@widget-footer-color, 25%);
		}
		.stripe-style-1 & {
			border-color: fade(@strype-1-color, 25%);
		}
		.stripe-style-2 & {
			border-color: fade(@strype-2-color, 25%);
		}
		.stripe-style-3 & {
			border-color: fade(@strype-3-color, 25%);
		}
		.stripe-style-4 & {
			border-color: fade(@strype-4-color, 25%);
		}
		.stripe-style-5 & {
			border-color: fade(@strype-5-color, 25%);
		}
	}
	.contentSlider-wrap .psBullet:after,
	.contentSlider-wrap .psBullet.act:hover:after {
		.outlines-bullets & {
			background-color: fade(@base-color, 4%);
			.box-shadow (inset 0px 0px 0px 1px fade(@base-color, 25%));
		}
		.outlines-bullets .sidebar &,
		.outlines-bullets /*.stripe */.sidebar-content.solid-bg & {
			background-color: fade(@widget-sidebar-color, 4%);
			.box-shadow (inset 0px 0px 0px 1px fade(@widget-sidebar-color, 25%));
		}
		.outlines-bullets .footer & {
			background-color: fade(@widget-footer-color, 4%);
			.box-shadow (inset 0px 0px 0px 1px fade(@widget-footer-color, 25%));
		}
		.outlines-bullets .stripe-style-1 & {
			background-color: fade(@strype-1-color, 4%);
			.box-shadow (inset 0px 0px 0px 1px fade(@strype-1-color, 25%));
		}
		.outlines-bullets .stripe-style-2 & {
			background-color: fade(@strype-2-color, 4%);
			.box-shadow (inset 0px 0px 0px 1px fade(@strype-2-color, 25%));
		}
		.outlines-bullets .stripe-style-3 & {
			background-color: fade(@strype-3-color, 4%);
			.box-shadow (inset 0px 0px 0px 1px fade(@strype-3-color, 25%));
		}
		.outlines-bullets .stripe-style-4 & {
			background-color: fade(@strype-4-color, 4%);
			.box-shadow (inset 0px 0px 0px 1px fade(@strype-4-color, 25%));
		}
		.outlines-bullets .stripe-style-5 & {
			background-color: fade(@strype-5-color, 4%);
			.box-shadow (inset 0px 0px 0px 1px fade(@strype-5-color, 25%));
		}
	}
	.contentSlider-wrap .psBullet:before,
	.contentSlider-wrap .psBullet.act:before {
		.accent-bullets &,
		.accent-bullets .stripe & {
			background-color: @accent-bg-color;
		}
		.accent-bullets.accent-gradient &,
		.accent-bullets.accent-gradient .stripe & {
			.background-gradient (@startColor: @accent-bg-color, @endColor: @accent-bg-color-2);
		}
	}
	.contentSlider-wrap .psBullet.act:after,
	.contentSlider-wrap .psBullet:hover:after {
		.accent-bullets & {
			background-color: fade(@accent-bg-color, 20%);
		}
		.accent-bullets.accent-gradient & {
			.background-fade-gradient (@startColor: @accent-bg-color, @endColor: @accent-bg-color-2, @opacity: 20%);
		}
	}

	/*!3D SLIDER*/

	.three-d-slider .navig div,
	.three-d-slider .navig div:not(.act):hover,
	.scale-me .navig div:hover {
		background-color: @accent-color;
		color: @accent-bg-color;
	}
	.three-d-slider .navig .act,
	.scale-me .navig div.act:hover {
		.accent-bg-mixin;
	}