// g5plus-counter
.g5plus-counter {
	.ct-icon-shape {
		.ct-icon {
			background-color: @accent_color;
		}
	}
}

// Heading
.gf-heading {
	.heading_title {
		font-family: @primary_font;
	}
}


// Icon-Box
/*---------Icon Box------------------*/
.g5f-icon-box {
	&.background, &.outline {
		.icon {
			&:before {
				background-color: @accent_color;
			}
		}
	}
	&.outline {
		.icon {
			border: 1px solid @accent_color;
			&:before {
				border: 1px solid @accent_color;
			}
			i {
				color: @accent_color;
			}
		}
	}
	&:hover {
		a {
			color: @accent_color !important;
		}
	}
}

/*-------------Testimonials----------------*/
.g5plus-testimonials {
	.testimonials-avatar-wrap {
		.testimonials-avatar-slider {
			.current.active .tes-avatar-item,
			.tes-avatar-item:hover{
				border-color: @accent_color;
			}
			.owl-nav {
				div {
					&:hover {
						background-color: @accent_color !important;
					}
				}
			}
		}
	}
	
}

.gf-gallery{
	.gallery-zoom {
		&:hover {
			border-color: @accent_color;
		}
	}
}
/* TimeLine*/
.gf-time-line {
	ul.time-line-items {
		li.time-line-item {
			.time-line-icon {
				.icon {
					background-color: @accent_color;
				}
			}
			.time-line-content {
				&:before {
					background-color: @accent_color;
				}
				&:after {
					background-color: @accent_color;
					
				}
			}
			&:hover {
				.time-line-content {
					&:before {
						border-color: @accent_color !important;
					}
					
				}
				
			}
		}
		
	}
}

/*----------shortcode job-position ----------*/
.gf-job-position {
	tr {
		th {
			background-color: @accent_color;
		}
	}
	
}
@media (max-width: 767px) {
	.gf-job-position {
		tr td{
			&:before{
				color: @heading_color;
			}
		}
	}
}

/*----------shortcode pricing table----------*/
.gf-pricing-tables {
	.gs-pt-prices {
		h4 {
			color: @accent_color !important;
		}
	}
	.gs-pt-name {
		background-color: @accent_color;
	}
}


.nav-center {
	> .owl-nav {
		margin-top: 0;
		> .owl-next,
		> .owl-prev {
			position: absolute;
			top: 50%;
			.transform(translateY(-50%));
			opacity: 0.5;
		}
		> .owl-next {
			right: 10px;
		}
		> .owl-prev {
			left: 10px;
		}
	}
	&:hover {
		> .owl-nav {
			> .owl-next,
			> .owl-prev {
				opacity: 1;
			}
		}
	}
}

.nav-top-right {
	> .owl-nav {
		position: absolute;
		top: 0;
		right: 0;
		margin-top: 0;
		> .owl-next {
			margin-right: 0;
		}
	}
}

.nav-bottom-left,
.nav-bottom-center,
.nav-bottom-right {
	> .owl-nav {
		margin-top: 30px;
	}
}

.nav-bottom-left > .owl-nav {
	text-align: left;
	> .owl-prev {
		margin-left: 0;
	}
}

.nav-bottom-right > .owl-nav {
	text-align: right;
	> .owl-next {
		margin-right: 0;
	}
}

.nav-square-text,
.nav-circle-text {
	> .owl-nav {
		> .owl-prev,
		> .owl-next {
			padding-left: 10px !important;
			padding-right: 10px !important;
			width: auto !important;
		}
	}
}

.nav-circle-icon,
.nav-circle-text {
	> .owl-nav {
		> .owl-prev,
		> .owl-next {
			-webkit-border-radius: 18px !important;;
			-moz-border-radius: 18px !important;;
			border-radius: 18px !important;
			
		}
	}
}

.default-effect, .suprema-effect, .layla-effect, .bubba-effect, .jazz-effect {
	overflow: hidden;
	position: relative;
	&:after {
		-webkit-transition: opacity .8s ease .2s;
		transition: opacity .8s ease .15s;
		position: absolute;
		content: '';
		display: block;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		opacity: 0;
		z-index: 0;
	}
	.effect-content {
		position: relative;
		&:before, &:after {
			position: absolute;
			content: '';
			display: block;
		}
	}
	&:hover {
		&:after, .effect-content:before, .effect-content:after {
			opacity: 1;
		}
	}
}

.suprema-effect {
	.effect-content {
		&:before, &:after {
			width: 45%;
			height: 2px;
			top: 50%;
			background: #fff;
			opacity: 0;
			z-index: 1;
			-webkit-transition: opacity .2s ease, -webkit-transform 0s .2s;
			transition: opacity .2s ease, transform 0s .2s;
		}
		&:before {
			-webkit-transform-origin: 0 50%;
			transform-origin: 0 50%;
			.transform(rotate(-45deg));
			left: 50%;
		}
		&:after {
			right: 50%;
			-webkit-transform-origin: 100% 50%;
			transform-origin: 100% 50%;
			.transform(rotate(-45deg));
		}
	}
	&:hover {
		.effect-content {
			&:before {
				transition: opacity .3s ease 50ms, transform 2s cubic-bezier(.26, .63, 0, .96);
				.transform(rotate(-45deg) translateX(-1000px));
			}
			&:after {
				transition: opacity .4s ease, transform 2s cubic-bezier(.26, .63, 0, .96);
				.transform(rotate(-45deg) translateX(1000px));
			}
		}
	}
}

.layla-effect, .bubba-effect {
	.effect-content {
		&:after, &:before {
			content: '';
			display: block;
			background-color: transparent;
			position: absolute;
			z-index: 1;
			.transition(all 0.5s);
		}
		&:after {
			top: 25px;
			bottom: 25px;
			left: 50%;
			right: 50%;
			border-top-width: 1px;
			border-top-style: solid;
			border-top-color: #fff;
			border-bottom-width: 1px;
			border-bottom-style: solid;
			border-bottom-color: #fff;
		}
		&:before {
			top: 50%;
			bottom: 50%;
			left: 25px;
			right: 25px;
			border-left-width: 1px;
			border-left-style: solid;
			border-left-color: #fff;
			border-right-width: 1px;
			border-right-style: solid;
			border-right-color: #fff;
		}
	}
}

.layla-effect {
	&:hover .effect-content {
		&:after {
			left: 10px;
			right: 10px;
		}
		&:before {
			top: 10px;
			bottom: 10px;
		}
	}
}

.bubba-effect {
	&:hover .effect-content {
		&:after {
			left: 25px;
			right: 25px;
		}
		&:before {
			top: 25px;
			bottom: 25px;
		}
	}
}

.jazz-effect {
	.effect-content {
		&:before {
			background-color: transparent;
			z-index: 1;
			width: 100%;
			height: 100%;
			top: 0;
			opacity: 0;
			.transition(all 0.5s);
			border-top-width: 1px;
			border-top-style: solid;
			border-top-color: #fff;
			border-bottom-width: 1px;
			border-bottom-style: solid;
			border-bottom-color: #fff;
			.transform(rotate(45deg) scale(0.5));
		}
	}
	&:hover .effect-content {
		&:before {
			.transform(rotate(45deg) scale(1));
		}
	}
}

/*------- Custom VC_accordion -------*/
.vc_general.vc_tta.vc_tta-accordion .vc_tta-panels-container .vc_tta-panels .vc_tta-panel {
	.vc_tta-panel-heading {
		a {
			font-size: 15px !important;
			font-weight: normal !important;
			padding: 23px 60px !important;
			.vc_tta-controls-icon {
				right: 50px !important;
				&.vc_tta-controls-icon-triangle:before {
					.transform(rotate(0deg) translateY(0));
				}
			}
		}
	}
	.vc_tta-panel-body {
		padding: 20px 50px 20px 60px;
	}
}
.vc_general.vc_tta.vc_tta-accordion {
	&:not(.vc_tta-style-outline) .vc_tta-panels-container .vc_tta-panels .vc_tta-panel {
		&:hover, &.vc_active {
			.vc_tta-panel-heading {
				a {
					color: #fff !important;
					.vc_tta-controls-icon {
						&.vc_tta-controls-icon-plus, &.vc_tta-controls-icon-chevron {
							&:before, &:after {
								border-color: #fff !important;
							}
						}
						&.vc_tta-controls-icon-triangle:before {
							border-top-color: #fff !important;
							.transform(rotate(0deg) translateY(0));
						}
					}
				}
				
			}
			
		}
	}
}

.vc_general.vc_tta.vc_tta-accordion {
	&.vc_tta-style-outline .vc_tta-panels-container .vc_tta-panels .vc_tta-panel {
		&:hover {
			a {
				color: #fff !important;
			}
		}
		&.vc_active {
			&:hover {
				a {
					color: @accent_color !important;
				}
				.vc_tta-controls-icon {
					&.vc_tta-controls-icon-plus, &.vc_tta-controls-icon-chevron {
						&:before, &:after {
							border-color: @accent_color !important;
						}
					}
					&.vc_tta-controls-icon-triangle:before {
						border-top-color: @accent_color !important;
					}
				}
			}
		}
	}
}

.vc_general.vc_tta.vc_tta-accordion {
	&.vc_tta-style-classic, &.vc_tta-style-modern{
		.vc_tta-panels-container .vc_tta-panels .vc_tta-panel {
			.vc_tta-panel-heading {
				border-color: #fff !important;
			}
			.vc_tta-panel-body {
				border-color: #fff !important;
			}
			&:hover, &.vc_active {
				.vc_tta-panel-heading {
					background-color: @accent_color !important;
				}
			}
		}
	}
}

/*------- Custom VC_Progress_Bar -------*/
.vc_progress_bar {
	.wpb_heading {
		font-size: 17px;
		font-weight: 700;
		letter-spacing: 0.05em;
		color: #3b3b3b;
		display: inline-block;
		padding-bottom: 8px;
		border-bottom: 1px solid #d5d5d5;
		margin-bottom: 30px;
	}
	.vc_single_bar:not(:last-child) {
		margin-top: 30px;
		margin-bottom: 50px;
	}
	.vc_general.vc_single_bar {
		background-color: #e0e0e0;
		.box-shadow(none);
		height: 10px;
		.border-radius(0);
		.vc_bar {
			.border-radius(0);
		}
	}
	.vc_label {
		padding: 0 !important;
		&:extend(.fs-12);
		letter-spacing: 0.04em;
		&:extend(.heading_font);
		top: -30px;
		&:extend(.uppercase);
		.text-shadow(0 0 0);
		.vc_label_units {
			position: absolute;
			right: 30px;
			top: 0;
		}
	}
}

.g5plus-contact-form {
	.column-2 {
		.ct-left,
		.ct-right {
			width: 50%;
		}
		.ct-left {
			float: left;
			padding-right: 4px;
		}
		.ct-right {
			float: right;
		}
		
	}
	input:not([type="submit"]), textarea {
		width: 100% !important;
		height: 60px;
		margin-bottom: 4px;
		.border-radius(5px);
		&:extend(.fs-12);
		&:extend(.text-italic);
		&:focus {
			border-color: @accent_color;
		}
	}
	textarea {
		height: 156px;
		width: 100%;
		max-width: 100%;
	}
}

.gsf-videos-items::-webkit-scrollbar {
	width: 6px;
}

.gsf-videos-items::-webkit-scrollbar-track {
	background-color: rgba(0, 0, 0, 0.4);
}

.gsf-videos-items::-webkit-scrollbar-thumb {
	background-color: #727272;
	background-color: rgba(255, 255, 255, 0.4);
	border-radius: 8px
}

.gsf-video-playlist {
	.gsf-playlist-info {
		border-bottom: 1px solid @border_color;
	}
	.gsf-playlist-number {
		color: @text_color;
	}
}

@media (max-width: 767px) {
	.g5plus-contact-form {
		.column-2 {
			.ct-left,
			.ct-right {
				width: 100%;
				float: none;
				padding: 0;
			}
		}
	}
}

.g5plus-mailchimp {
	max-width: 370px;
	height: auto;
	padding: 65px 40px 65px;
	text-align: center;
	.border-radius(10px);
	.mailchimp-title {
		&:extend(.uppercase);
		margin-bottom: 35px;
		h4 {
			color: @accent_color !important;
		}
	}
	p {
		margin: 0;
		input {
			width: 100%;
			height: 51px !important;
			margin-bottom: 5px !important;
			&:extend(.fs-11);
			&:extend(.text-italic);
			background-color: #fff !important;
		}
	}
	.submit {
		margin-top: 10px;
		margin-bottom: 0;
	}
	
	h4 {
		margin-top: 0;
		margin-bottom: 0;
	}
}

//Project-meta
.gf-portfolio-meta-wrap{
	background-color: @background_color;
	ul.gsf-portfolio-meta{
		li{
			label,span,a{
				font-family: @h1_font;
			}
			label{
				color: @accent_color;
				
			}
			span,a {
				color: @heading_color;
			}
			a{
				color: @accent_color;
			}
		}
	}
}
