/**
 * 
 * 16. Visual composer elements styling
 * 
 */


/** 16.01 VC row fix **/
.main-content .vc_row {
	&.vc_column-gap-35 { //fix overflow-x on 35px gap cols
		margin-left: -25px;
		margin-right: -25px;
	}
}

/** 16.02 VC buttons **/
.wpb_button,
.vc_general.vc_btn3 {
	@extend %form-control-buttons;
	@extend %button;

	&.vc_btn3-style-theme-style {
		@extend %form-control-buttons;
		@extend %button;
		@extend %link-transition;

		&:hover, &:active, &:focus {
			border: 0;
		}
	}

	&.vc_btn3-size-xs {
		@include button-mini();
		padding: 8px 22px;

		&.vc_btn3-style-outline,
		&.vc_btn3-style-outline-custom {
			padding: 6px 20px;
		}
	}

	&.vc_btn3-size-sm {
		@include button-small();	
		padding: 10px 32px;

		&.vc_btn3-style-outline,
		&.vc_btn3-style-outline-custom {
			padding: 8px 30px;
		}
	}

	&.vc_btn3-size-md {
		@include button-normal();	
		padding: 17px 42px;

		&.vc_btn3-style-outline,
		&.vc_btn3-style-outline-custom {
			padding: 15px 40px;	
		}
	}

	&.vc_btn3-size-lg {
		@include button-xlarge();
		padding: 20px 45px;

		&.vc_btn3-style-outline,
		&.vc_btn3-style-outline-custom {
			padding: 18px 43px;
		}
	}

	&.vc_btn3-color-theme-color {
		@include button();
	}

	&.vc_btn3-color-theme-color-secondary {
		@include button(alt);
	}
}


/** 16.03 VC separator **/
.vc_separator {
	&.vc_sep_color_theme-color {
		.vc_sep_holder .vc_sep_line {
			border-color: $color-primary; /* redux[border-color: main_theme_color] */
		}
	}

	&.vc_sep_color_theme-color-secondary {
		.vc_sep_holder .vc_sep_line {
			border-color: $color-secondary; /* redux[border-color: secondary_theme_color] */
		}
	}

	&.vc_sep_border_width_1 {
		.vc_sep_holder .vc_sep_line {
			margin-top: -1.5px;
		}
	}

	&.vc_sep_border_width_2 {
		.vc_sep_holder .vc_sep_line {
			margin-top: -2.5px;
		}
	}

	&.vc_sep_border_width_3 {
		.vc_sep_holder .vc_sep_line {
			margin-top: -3px;
		}
	}

	&.max-width-250 {
		max-width: 250px;
	}
}


/** 16.04 VC message box **/
div.wpb_wrapper {
	.vc_message_box {
		border-color: transparent;
	}
}


/** 16.05 VC Tabs, Accordion & Tour **/
.wpb_wrapper .vc_tta-container .vc_general.vc_tta-style-theme-style {
	.vc_tta-tabs-list .wpb_tab {
		padding-left: 0;
		padding-right: 0;
	}

	.vc_tta-tabs-list li {
		background-color: transparent;
		border-bottom: 2px solid transparent;
		opacity: 0.5;

		&.vc_active {
			opacity: 1;
			border-bottom: 2px solid $color-darker-gray;
		}
	}

	.vc_tta-tabs-list,
	.vc_tta-panel-heading {
		a {
			@include color-link-inv();	
			padding-top: 6px;
			padding-bottom: 6px;
			
			&:hover {
				color: inherit;
			}
		}

		h4 {
			font-size: inherit;
		}

		.vc_tta-title-text {
			@extend %text-theme;
		}
	}

	&.vc_tta-accordion {
		.vc_tta-panel {
			.vc_tta-panel-title {
				i.vc_tta-controls-icon {
					display: none;
				}

				a:before {
					@extend %ion;
					@extend %transition-transform;
					position: absolute;
					line-height: 26px;
					content: $ionicon-var-close;
					top: 50%;
					margin-top: -13px;
					left: 20px;
					@include transform(rotate(45deg));
				}
			}

			&.vc_active {
				.vc_tta-panel-title a:before {
					@include transform(rotate(0deg));
				}
			}
		}
	}	

	&.wpb_tour {
		.wpb_tabs_nav {
			padding-right: 30px;
		}

		.wpb_tour_next_prev_nav {
			padding-left: 0;
		}

		.wpb_prev_slide,
		.wpb_next_slide {
			a {
				@extend %text-theme;
				@include color-link-inv();
			}
		}
		
	}
}


/** 16.06 VC Progress bars **/
.vc_progress_bar.wpb_content_element {
	.vc_single_bar, 
	.vc_single_bar .vc_bar {
		border-radius: 0;
	}

	.vc_single_bar {
		box-shadow: none;

		.vc_label {
			@extend %text-theme;
		}
	}
}


/** 16.07 VC Toggles **/
.vc_toggle {
	.vc_toggle_title {
		@extend %text-theme;
		font-size: 14px;
		
		h4 {
			font-size: inherit;
		}
	}

	&.vc_toggle_default {
		.vc_toggle_title {
			i.vc_toggle_icon {
				display: none;
			}

			&:before {
				@extend %ion;
				@extend %transition-transform;
				position: absolute;
				line-height: 26px;
				left: 0;
				content: $ionicon-var-close;
				@include transform(rotate(45deg));
			}
		}
	}

	&.vc_toggle_active {
		.vc_toggle_title:before {
			@include transform(rotate(0deg));
		}
	}
}


/** 16.08 VC Pie chart **/
.vc_pie_chart {
	.vc_pie_chart_value {
		@extend %text-theme;
	}
}


/** 16.08 VC Posts slider **/
.wpb_posts_slider {
	.post-title {
		@extend %text-theme;
		margin-top: 10px;

		a {
			color: $color-darker-gray;
		}
	}
}

.vc_grid-container {
	.vc_gitem-post-data-source-post_title {
		@extend %text-theme;
		margin-top: 10px;
	}
}


/** 16.09 VC Icons **/
.vc_icon_element {
	vertical-align: middle;

	&.inline {
		display: inline-block;
		margin-bottom: 0;

		&.vc_icon_element-outer {
			div.vc_icon_element-inner {
				width: auto;
				height: auto;
				line-height: 1em !important;

				.vc_icon_element-icon {
					position: relative;
					top: auto;
					left: auto;
					@include transform(translate3d(0,1px,0));
				}
			}
		}
	}

	.vc_icon_element-icon {
		@include transition(color $duration-color $fn-cubic);
	}

	.vc_icon_element-color-theme-color {
		.vc_icon_element-icon {
			color: $color-primary; /* redux[color: main_theme_color] */
		}

		&:hover .vc_icon_element-icon {
			color: $color-dark-gray;
		}
	}

	.vc_icon_element-color-theme-color-secondary {
		.vc_icon_element-icon {
			color: $color-dark-gray;
		}

		&:hover .vc_icon_element-icon {
			color: $color-primary; /* redux[color: main_theme_color] */
		}
	}
}


/** 16.10 VC Images **/
.wpb_single_image .vc_single_image-wrapper.vc_box_outline, 
.wpb_single_image .vc_single_image-wrapper.vc_box_outline_circle {
	border-width: 3px !important;

	img {
		border-width: 2px !important;
	}
}



/** 16.11 VC Text element **/
.wpb_text_column {
	p {
		line-height: 1.55em;
	}
}


/** 16.12 VC WC products shortcodes **/
.wpb_wrapper {
	.woocommerce { // Restrict to only when .woocommerce is inside wpb_wrapper
		&.columns-1 {
			ul.products {
				margin: 0;
			}
			ul.products li.product {
				padding: 0;
				border: 0;
			}

		}	
	}
}

/** 16.13 VC grid item **/
.wpb_wrapper {
	.vc_grid-filter.vc_grid-filter-default-less-rounded>.vc_grid-filter-item {
		border-radius: 2px;
	}

	.vc_grid-filter>.vc_grid-filter-item>span {
		@extend	%text-theme;
	}

	.vc_gitem-animate-blurOut .vc_gitem-zone-b, .vc_gitem-animate-blurScaleOut .vc_gitem-zone-b, .vc_gitem-animate-fadeIn .vc_gitem-zone-b, .vc_gitem-animate-scaleIn .vc_gitem-zone-b, .vc_gitem-animate-scaleRotateIn .vc_gitem-zone-b {
		@include transition(all $duration-all $fn-cubic);
	}
}

// Extras, related to VC
.product-cover-target {
	position: relative; //in case vc_row is not full width
}

// VC row el
.shrk-vc-row-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -2;
	
	.bg-cover {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-size: cover;
		background-position: center center;
		opacity: 1;
		@include transition(opacity $duration-opacity $fn-cubic);

		&.loading {
			opacity: 0;
		}
	}
}