/* main: rella-admin.scss*/

@-webkit-keyframes ripple {
    100% {opacity: 0; -webkit-transform: scale(2.5);}
}
@keyframes ripple {
    100% {opacity: 0; -webkit-transform: scale(2.5); transform: scale(2.5);}
}

/* TODO: to be removed*/
// .vc_welcome-brand,
// .vc_navbar-header {
// 	display: none !important;
// }

.vc-icons-selector .fip-icons-container .fip-box {
	font-size: 28px;
}
.mce-container {
	// z-index: 100001 !important; // main contents editor issues
}

.vc_navgar-frontend {
	background-color: #f5f5f5;
  -webkit-box-shadow: 0 40px 50px rgba(0, 0, 0, 0.08);
          box-shadow: 0 40px 50px rgba(0, 0, 0, 0.08);

	button.vc_btn-primary {
		background-color: $color-accent;
	}
	.vc_navbar-nav {

		.vc_navbar-border-right,
		> li {
			border-color: #ededed;
		}
		> li {

			a {

				.vc-composer-icon {
					color: rgba(#000, 0.5);
				}
				&:focus {
					outline: none;
					-webkit-box-shadow: none;
					        box-shadow: none;
				}
				&:hover {
					background-color: #ddd !important;

					.vc-composer-icon {
						color: rgba(#000, 1);
					}
				}
			}
		}
		.vc_dropdown {

			.vc_dropdown-list {
				background-color: #f5f5f5;
				border-color: #ededed;

				li {

					a {
						color: rgba(#000, 0.5);

						&.active,
						&:hover {
							color: #000;
							background-color: #ddd;
						}
					}
				}
			}
			&:hover {
				.vc_dropdown-toggle {
					background-color: #ddd !important;

					.vc-composer-icon {
						color: rgba(#000, 1);
					}
				}
			}
		}
	}
	&.vc_navbar .vc_navbar-brand.vc_ui-wp-spinner::before {
		background-image: url(../img/spinner.svg);
	}
}

#vc_ui-panel-add-element {
	padding: 0;
	margin: 0 auto;

	&:before {
		content: '';
		display: inline-block;
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background-color: #fff;
		opacity: 0.3;
	}
}

.vc_ui-panel.vc_ui-panel-window {
	padding: 0;

	.vc_ui-panel-window-inner {
		width: 100%;
		border-radius: 10px;
		-webkit-box-shadow: 0 0 60px 3px rgba(#000, 0.2);
		box-shadow: 0 0 60px 3px rgba(#000, 0.2);
		// -webkit-box-shadow: none;
		//         box-shadow: none;
		// border-radius: 10px;
	}
	.vc_ui-panel-content {
		width: 100%;
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
	}
	.vc_ui-panel-footer-container {
		border-radius: 0 0 10px 10px;
	}
	&:not(.vc_active) {
		display: none;
	}
}

.wp-admin {

	.vc_edit_form_elements {
		padding-bottom: 35px;
	}
	.vc_ui-panel-content-container {
		border-radius: 0 0 10px 10px;

		&.vc_ui-panel-header-o-stacked-bottom {
			display: none;
		}
	}

	.vc_element-icon.fa {
		background-color: $color-accent;
	}
	.vc_ui-panel-header-container {
		padding: 20px 30px 0;
		border-radius: 10px 10px 0 0;
		z-index: 10;
		background: transparent;
		background: linear-gradient(135deg, rgba(152,40,238,1) 0%, rgba(106,26,186,1) 100%);
		-webkit-box-shadow: 0 13px 35px -8px rgba(darken(#691abb, 5%), 0.5);
		        box-shadow: 0 13px 35px -8px rgba(darken(#691abb, 5%), 0.5);
	}

	#vc_ui-panel-edit-element {
		min-width: 767px;

		.vc_ui-panel-header-container {
			padding: 15px 20px 0;
		}
		.vc_ui-panel-header-controls {
			margin-top: 12px;
		}
		.vc_ui-panel-header-heading {
			margin-top: 10px;
			margin-bottom: 10px;
		}
	}

	#post-body-content {

		.composer-switch {
			margin-top: 15px;

			a.wpb_switch-to-front-composer,
			a.wpb_switch-to-composer,
			.logo-icon {
				background-color: $color-accent;
			}
			.vc_spacer {
				background-color: lighten($color-accent, 10%);
			}
		}
	}

	.vc_ui-panel-header {

		.vc_ui-panel-header-heading {
			margin-top: 15px;
			margin-bottom: 30px;
			font-size: 25px;
		}
		.vc_ui-panel-header-controls {
			margin-top: 18px;
		}
		.vc_ui-search-box {
			width: 300px;

			input[type=search] {
				padding-top: 12px;
				padding-bottom: 12px;
				padding-left: 35px;
				-webkit-box-shadow: 0 15px 35px rgba(darken(#691abb, 5%), 0.7);
				        box-shadow: 0 15px 35px rgba(darken(#691abb, 5%), 0.7);

				&:focus {
					-webkit-box-shadow: 0 5px 20px rgba(darken(#691abb, 5%), 0.9);
					        box-shadow: 0 5px 20px rgba(darken(#691abb, 5%), 0.9);
				}
			}
		}
	}

	.vc_ui-panel-content {
		padding: 35px;
	}

	.vc_edit_form_elements {

		.vc_column {

			/* + .vc_column {*/
			/* 	padding-top: 40px;*/
			/* }*/
		}
	}

	.wpb_element_label {
		display: block;
		margin-top: 0.25em;
		margin-left: -30px;
		margin-right: -30px;
		padding-left: 30px;
		padding-bottom: 0.25em;
		margin-bottom: 1em;
		border-bottom: 1px dashed #dedede;
		font-size: 22px;
		font-weight: 900;
		letter-spacing: -0.025em;
		line-height: 1.5;
		color: #dedede;
	}

	.wpb_el_type_subheading {
		display: block;
		float: none !important;
		width: calc(100% + 60px) !important;
		margin-right: -30px;
		margin-left: -30px;
		margin-top: 3em;
		padding-left: 30px !important;
		border: none;
		background-color: transparent;
		border-bottom: 1px solid #ededed;

		.wpb_element_label {
			border: none;
			padding: 0;
			font-size: 25px;
			font-weight: 900;
			text-transform: uppercase;
			letter-spacing: 0.025em;
			line-height: 1;
			color: #dedede;
			margin: 0;

			+ .edit_form_line {
				margin: 0;
			}
		}
	}

	.vc_description,
	.edit_form_line {
		margin-top: 1.15em;
		font-size: 14px;
		line-height: 2em;
		letter-spacing: 0.01em;
	}

	.vc_column-offset-table select,
	.vc_settings > div select,
	.wpb-textinput,
	.wpb-textarea,
	.vc_param-animation-style,
	.wpb-input {
		width: 100%;
		height: 45px;
		padding-left: 15px;
		text-indent: 10px;
		background-color: #f3f3f3;
		border: none;
		border-radius: 4px;
		border: 1px solid #f3f3f3;
		-webkit-box-shadow: 0 5px 20px -6px rgba(#000, 0.2);
		        box-shadow: 0 5px 20px -6px rgba(#000, 0.2);
		-webkit-transition: all 0.3s ease;
		transition: all 0.3s ease;

		&:hover,
		&:focus,
		&:active {
			background-color: #fff;
			border-color: #ededed;
			-webkit-box-shadow: 0 12px 25px -4px rgba(#000, 0.2);
			        box-shadow: 0 12px 25px -4px rgba(#000, 0.2);
		}
	}

	.wpb-textarea {
		height: auto;
	}
	.wp-picker-input-wrap {
		margin-top: 0;

		.button.wp-picker-clear {
			margin-left: 0;
			width: 90px;
			margin-top: 2px;
			height: 33px;
			line-height: 33px;
		}
	}
	.wp-color-result.button {
		width: 140px;
		height: 43px;
		padding-left: 45px;
		background-color: #f3f3f3;
		border-color: #f3f3f3;
		-webkit-box-shadow: 0 5px 20px -6px rgba(#000, 0.2);
		        box-shadow: 0 5px 20px -6px rgba(#000, 0.2);
		-webkit-transition: all 0.3s ease;
		transition: all 0.3s ease;
		border-radius: 5px;

		&:after {
			content: none !important;
		}
		.wp-color-result-text {
			line-height: 41px;
			border-color: #dedede;
		}
		&:hover {
			-webkit-box-shadow: 0 12px 25px -4px rgba(#000, 0.2);
			        box-shadow: 0 12px 25px -4px rgba(#000, 0.2);

			&:after {
				border-color: #dedede;
			}
		}
	}
	.vc_edit_form_elements input.wp-color-picker[type=text] {
		height: 45px;

		+ .button.button-small {
			height: 45px;
			padding-left: 15px;
			padding-right: 15px;
		}
	}

	.vc_checkbox,
	.vc_checkbox-label {
		display: inline-block;
		width: 62px;
		height: 24px;
		position: relative;
		text-indent: -99999px;
	}

	.vc_column-offset-table,
	.vc_checkbox,
	.vc_checkbox-label {

		label {
			position: relative;
			display: block;
		}
		input[type=checkbox] {
			margin: 0;
			-webkit-appearance: none;
			-moz-appearance: none;
			appearance: none;

			+ span {

				&:before,
				&:after {
					content: '';
					display: inline-block;
					position: absolute;
					left: 0;
					border-radius: 50em;
					-webkit-transition: all 0.3s cubic-bezier(0, 0, 0.2, 1);
					transition: all 0.3s cubic-bezier(0, 0, 0.2, 1);
				}
				&:before {
					width: 62px;
					height: 28px;
					margin: 0;
					top: 0;
					z-index: 0;
					background-color: #ededed;
				}
				&:after {
					width: 34px;
					height: 34px;
					border: none;
					position: absolute;
					top: -3px;
					background-color: #fff;
					-webkit-box-shadow: 0 8px 20px -3px rgba(#000, 0.3), 0 3px 10px -2px rgba(#000, 0.15);
					        box-shadow: 0 8px 20px -3px rgba(#000, 0.3), 0 3px 10px -2px rgba(#000, 0.15);
				}
			}
			&:checked {

				+ span {

					&:before {
						background-color: $color-accent;
					}
					&:after {
						-webkit-transform: translate3d(29px, 0, 0);
						        transform: translate3d(29px, 0, 0);
						-webkit-box-shadow: 0 15px 30px -3px rgba($color-accent, 0.5), 0 3px 10px -2px rgba($color-accent, 0.3);
						        box-shadow: 0 15px 30px -3px rgba($color-accent, 0.5), 0 3px 10px -2px rgba($color-accent, 0.3);
					}
				}
			}
		}

		&:hover {

			input[type=checkbox]:not(:checked) {

				&:after {
					-webkit-box-shadow: 0 12px 30px -1px rgba(#000, 0.3), 0 5px 15px rgba(#000, 0.15);
					        box-shadow: 0 12px 30px -1px rgba(#000, 0.3), 0 5px 15px rgba(#000, 0.15);
				}
			}
		}
	}

	.rella-checkbox-with-label {
		margin-bottom: 40px;

		label {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			width: 100%;
			margin-bottom: 30px;
			-webkit-box-align: center;
			    -ms-flex-align: center;
			        align-items: center;
			text-indent: 0;
		}
		input[type=checkbox] {
			width: 0;
			height: 0;
			margin: 0;
			border: none;
			position: absolute;
			top: 0;
			left: 0;
			opacity: 0;
			visibility: hidden;
		}
		span {
			-ms-flex-preferred-size: 50%;
			    flex-basis: 50%;
		}
		.checkbox {
			display: inline-block;
			width: 62px;
			height: 28px;
			position: relative;
			-webkit-box-ordinal-group: 3;
			    -ms-flex-order: 2;
			        order: 2;
		}

		+ .rella-checkbox-with-label {
		}
	}

	.edit_form_line {

		.rella-checkbox-with-label:only-child {
			margin-bottom: 20px;
		}
	}

	.vc_css-editor .vc_settings .vc_background-image .vc_add-image,
	.wpb_el_type_attach_image .gallery_widget_add_images,
	.wpb_el_type_attach_images .gallery_widget_add_images {
		background-color: #fafafa;
		border-color: #ededed;
		-webkit-box-shadow: 0 10px 20px -3px rgba(#000, 0.15);
		        box-shadow: 0 10px 20px -3px rgba(#000, 0.15);
		-webkit-transition: all 0.3s ease;
		transition: all 0.3s ease;

		&:hover {
			-webkit-box-shadow: 0 5px 12px -1px rgba(#000, 0.15);
			        box-shadow: 0 5px 12px -1px rgba(#000, 0.15);
		}
	}

	.vc_css-editor {

		.vc_layout-onion input {
			border-color: #dedede;
			border-radius: 3px;
			-webkit-box-shadow: 0 5px 15px -2px rgba(#000, 0.15);
			        box-shadow: 0 5px 15px -2px rgba(#000, 0.15);

			&:focus {
				border-color: #bbb;
				-webkit-box-shadow: 0 3px 12px rgba(#000, 0.2);
				        box-shadow: 0 3px 12px rgba(#000, 0.2);
			}
		}
		.vc_settings {

			label {
				display: block;
				margin-top: 1em;
				margin-bottom: 0.75em;
				color: #000;
				font-weight: 600;
				text-transform: uppercase;
				letter-spacing: -0.01em;

				&:first-of-type {
					margin-top: 0;
				}
			}
		}
	}

	.vc_general.vc_ui-button {
		padding: 1em 1.5em;
		border-radius: 50em;
		-webkit-transition: all 0.3s ease;
		transition: all 0.3s ease;

		&:hover {
			-webkit-box-shadow: 0 12px 30px -3px rgba(#000, 0.25);
			        box-shadow: 0 12px 30px -3px rgba(#000, 0.25);
		}
	}

	.vc_welcome:not(.vc_not-empty) {
		padding-top: 5em;
		padding-bottom: 5em;
		background-color: #f5f5f5;
	}
	.vc_welcome {

		.vc_welcome-header {
			font-family: 'Poppins', sans-serif;
			font-weight: 700;
			line-height: 1.5em;
			letter-spacing: -0.014em;
			text-transform: none;
			color: #2a2a2a;
		}
		.vc_ui-button {
			padding: 1.25em 2.1em;
			border-radius: 3px;
			background-color: #fff;
			color: #020202;
			-webkit-box-shadow: 0 2px 50px rgba(#000, 0.07);
			        box-shadow: 0 2px 50px rgba(#000, 0.07);

			i {
				color: inherit;
				font-family: fontAwesome;

				&:before {
					background: none;
				}
				&.vc_ui-icon-pixel-control-plus:before {
					content: '\f067';
				}
				&.vc_ui-icon-pixel-control-edit:before {
					content: '\f031';
				}
				&.vc_ui-icon-pixel-control-template:before {
					content: '\f00a';
				}
			}
			&:hover {
				-webkit-transform: translate3d(0, -2px, 0);
				        transform: translate3d(0, -2px, 0);
				-webkit-box-shadow: 0 8px 50px rgba(#000, 0.15);
				        box-shadow: 0 8px 50px rgba(#000, 0.15);
				color: #fff;
			}
		}
	}

	.vc_ui-button-action:not(:disabled) {
		background-color: #27e361;
		-webkit-transition: all 0.3s ease;
		transition: all 0.3s ease;

		&:hover {
			-webkit-box-shadow: 0 15px 25px -3px rgba(#27e361, 0.5), 0 3px 17px -1px rgba(#27e361, 0.5);
			        box-shadow: 0 15px 25px -3px rgba(#27e361, 0.5), 0 3px 17px -1px rgba(#27e361, 0.5);
			background-color: darken(#27e361, 5%);
		}
	}

	.vc_column-offset-table {

		> tbody {

			> tr {

				> td {
					padding: 25px;
				}
			}
		}
		select {
			text-indent: 5px;
		}
		.vc_screen-size .vc-composer-icon {
			width: 30px;
			height: 30px;
			position: relative;
			top: 8px;
			font-size: 28px;
			line-height: 1;
		}
	}

	.vc_controls {

		> .vc_controls-cc {
			-webkit-box-shadow: 0 15px 35px -5px rgba(#afd23e, 0.5), 0 5px 15px -5px rgba(#afd23e, 0.7);
			        box-shadow: 0 15px 35px -5px rgba(#afd23e, 0.5), 0 5px 15px -5px rgba(#afd23e, 0.7);
		}
		> .vc_control-container {
			-webkit-box-shadow: 0 15px 35px -5px rgba(#F9B418, 0.5), 0 5px 15px -5px rgba(#F9B418, 0.7);
			        box-shadow: 0 15px 35px -5px rgba(#F9B418, 0.5), 0 5px 15px -5px rgba(#F9B418, 0.7);
		}
		> .vc_controls-content-widget {
			-webkit-box-shadow: 0 15px 35px -5px rgba(#285A85, 0.5), 0 5px 15px -5px rgba(#285A85, 0.7);
			        box-shadow: 0 15px 35px -5px rgba(#285A85, 0.5), 0 5px 15px -5px rgba(#285A85, 0.7);
		}
	}
	.wpb_ra_tabs > .vc_controls .vc_controls-cc {
		-webkit-box-shadow: 0 15px 35px -5px rgba(#285A85, 0.5), 0 5px 15px -5px rgba(#285A85, 0.7);
		box-shadow: 0 15px 35px -5px rgba(#285A85, 0.5), 0 5px 15px -5px rgba(#285A85, 0.7);
	}

	/* Image style selector*/
	ul.thumbnails.image_picker_selector {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
		-webkit-box-align: stretch;
		    -ms-flex-align: stretch;
		        align-items: stretch;
		padding-top: 5px;
		padding-bottom: 5px;
		margin-left: -5px;
		margin-right: -5px;
		max-height: 280px;
		overflow-y: auto;
		overflow-x: hidden;

		li {
			width: calc(25% - 10px);
			margin: 0 5px 10px;
			border-radius: 4px;
			cursor: pointer;
			-webkit-box-sizing: border-box;
			        box-sizing: border-box;

			.thumbnail {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-align: center;
				    -ms-flex-align: center;
				        align-items: center;
				height: 100%;
				padding: 5px;
				position: relative;
				border-radius: 4px;
				-webkit-box-sizing: border-box;
				        box-sizing: border-box;
				background-color: #fff;
				-webkit-transition: all 0.3s ease;
				transition: all 0.3s ease;

				&:before {
					content: '';
					display: inline-block;
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 0;
					border: 1px solid $color-accent;
					border-radius: 3px;
					-webkit-box-sizing: border-box;
					        box-sizing: border-box;
					opacity: 0;
					-webkit-transition: all 0.3s ease;
					transition: all 0.3s ease;
				}
				p {
					margin: 0;
					position: absolute;
					top: 0;
					left: 0;
					bottom: 0;
					right: 0;
					border-radius: 4px;
					/* background-color: rgba(#000, 0.3);*/
					opacity: 0;
					visibility: hidden;
					-webkit-transition: all 0.3s ease;
					transition: all 0.3s ease;
				}
				.thumbnail-tooltip {
					display: inline-block;
					padding: 0.5em 1.5em;
					position: absolute;
					right: -1px;
					bottom: -1px;
					z-index: 3;
					border-radius: 3px;
					background-color: #fff;
					-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
					        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
					font-size: 9px;
					font-weight: 600;
					text-transform: uppercase;
					letter-spacing: 0.1em;
				}
				&.selected {
					-webkit-transform: translate3d(0, -1px, 0);
					        transform: translate3d(0, -1px, 0);
					border-color: $color-accent;
					background-color: transparent;
					-webkit-box-shadow: 0 5px 20px -5px rgba($color-accent, 0.8);
					        box-shadow: 0 5px 20px -5px rgba($color-accent, 0.8);

					&:before {
						border-width: 2px;
						opacity: 1;
					}
					p {
						top: 3px;
						left: 3px;
						bottom: 3px;
						right: 3px;
						background-color: transparent;
						opacity: 1;
						visibility: visible;
					}
				}
				&:hover {
					border-color: $color-accent;

					p {
						opacity: 1;
						visibility: visible;
					}
				}
			}
			img {
				width: 100%;
				height: auto;
				vertical-align: middle;
			}
		}
	}
}

.rella-easy-mode-switch {
	margin-right: 10px;
	padding: 1em 1em 1em 55px;
	border-radius: 3px;
	-webkit-box-shadow: 0 5px 15px rgba(#000, 0.1);
	        box-shadow: 0 5px 15px rgba(#000, 0.1);
	background-color: rgba(#000, 0.15);
	position: relative;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	font-family: 'Poppins';

	span {
		display: inline-block;
		width: 26px;
		height: 26px;
		border-radius: 50em;
		margin-right: 10px;
		position: absolute;
		top: 50%;
		left: 1em;
		text-align: center;
		line-height: 26px;
		-webkit-transform: translate3d(0, -50%, 0);
		        transform: translate3d(0, -50%, 0);

		&:before,
		&:after {
			content: '';
			display: inline-block;
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			border-radius: 50em;
			z-index: -1;
			background: -webkit-gradient(linear, left top, left bottom, from(rgba(150,94,235,1)), to(rgba(112,20,241,1)));
			background: linear-gradient(to bottom, rgba(150,94,235,1) 0%, rgba(112,20,241,1) 100%);
			/* background-color: $color-accent;*/
		}
		&:before {
			width: 34px;
			height: 34px;
			top: -4px;
			left: -4px;
			background: -webkit-gradient(linear, left top, left bottom, from(#7551ad), to(#512299));
			background: linear-gradient(to bottom, #7551ad 0%, #512299 100%);
			/* opacity: 0.2;*/
		}
		&:after {
			-webkit-box-shadow: 0 0 0 1px rgba(#fff, 0.06) inset, 0 4px 10px -1px rgba(#000, 0.2);
			        box-shadow: 0 0 0 1px rgba(#fff, 0.06) inset, 0 4px 10px -1px rgba(#000, 0.2);
		}
		i {
			font-weight: 700;
			color: lighten( $color-accent, 30% );
			/* text-shadow: 0 1px 1px rgba(#000, 0.05);*/

			.backgroundcliptext & {
				background: -webkit-gradient(linear, left top, left bottom, from(#ab7af5), to(#7e51c2));
				background: linear-gradient(to bottom, #ab7af5 0%, #7e51c2 100%);
				-webkit-background-clip: text !important;
				background-clip: text !important;
				-webkit-text-fill-color: transparent !important;
				-moz-text-fill-color: transparent !important;
				text-fill-color: transparent !important;
			}
		}
	}

	input {
		display: inline-block;
		width: 0;
		height: 0;
		position: absolute;
		top: 0;
		left: 0;
		margin: 0;
		opacity: 0;
		visibility: hidden;

		&:checked {

			~ span {

				&:after {
					background: -webkit-gradient(linear, left top, left bottom, from(rgba(112,20,241,1)), to(rgba(150,94,235,1)));
					background: linear-gradient(to bottom, rgba(112,20,241,1) 0%, rgba(150,94,235,1) 100%);
					-webkit-box-shadow: 0 2px 5px 0 rgba(#000, 0.05) inset, 0 0 0 0 rgba(#000, 0);
					        box-shadow: 0 2px 5px 0 rgba(#000, 0.05) inset, 0 0 0 0 rgba(#000, 0);
				}
				i {
					color: #ab7af5;
					text-shadow: 0 0 8px rgba(#fb525a, 0.7);

					.backgroundcliptext & {
						background: -webkit-gradient(linear, left top, left bottom, from(#e09297), to(#fb525a));
						background: linear-gradient(to bottom, #e09297 0%, #fb525a 100%);
					}
				}
			}
		}
	}
}

.vc_general {

	&.vc_ui-tabs-line {

		.vc_ui-tabs-line-trigger {

		}
		> li {
			position: relative;
			overflow: hidden;
			border-radius: 3px 3px 0 0;

			> .vc_ui-tabs-line-trigger {

				&:after {
					content: '';
					display: inline-block;
					width: 100%;
					height: 3px;
					position: absolute;
					bottom: 0;
					left: 0;
					border-radius: 2px;
					background-color: #fff;
					-webkit-transform: scale3d(1, 0, 1);
					        transform: scale3d(1, 0, 1);
					-webkit-transition: all 0.3s ease;
					transition: all 0.3s ease;
					-webkit-transform-origin: center bottom;
					        transform-origin: center bottom;
				}
			}
			&.vc_active {

				.vc_ui-tabs-line-trigger {
					background-color: transparent;
					color: #fff;

					&:after {
						-webkit-transform: scale3d(1, 1, 1);
						        transform: scale3d(1, 1, 1);
					}
				}
			}
		}
	}
}

.vc_add-element-container {

	.wpb-elements-list {
		background-color: #f5f6fb;

		.wpb-content-layouts {

			@include clearfix();

			li {
				padding: 3px;
				border: none;
				overflow: visible;
				background-color: transparent;
				-webkit-transition: -webkit-box-shadow 0.25s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.25s cubic-bezier(0, 0, 0.2, 1);
				transition: -webkit-box-shadow 0.25s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.25s cubic-bezier(0, 0, 0.2, 1);
				transition: box-shadow 0.25s cubic-bezier(0, 0, 0.2, 1), transform 0.25s cubic-bezier(0, 0, 0.2, 1);
				transition: box-shadow 0.25s cubic-bezier(0, 0, 0.2, 1), transform 0.25s cubic-bezier(0, 0, 0.2, 1), -webkit-box-shadow 0.25s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.25s cubic-bezier(0, 0, 0.2, 1);

				.vc_el-container {
					height: 65px;
					border-radius: 6px;
					background-color: #fff;
					-webkit-transition: -webkit-box-shadow 0.25s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.25s cubic-bezier(0, 0, 0.2, 1);
					transition: -webkit-box-shadow 0.25s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.25s cubic-bezier(0, 0, 0.2, 1);
					transition: box-shadow 0.25s cubic-bezier(0, 0, 0.2, 1), transform 0.25s cubic-bezier(0, 0, 0.2, 1);
					transition: box-shadow 0.25s cubic-bezier(0, 0, 0.2, 1), transform 0.25s cubic-bezier(0, 0, 0.2, 1), -webkit-box-shadow 0.25s cubic-bezier(0, 0, 0.2, 1), -webkit-transform 0.25s cubic-bezier(0, 0, 0.2, 1);
				}
				&:hover {
					border-color: transparent;
					z-index: 2;
					-webkit-transform: translate3d(0, -2px, 0);
					        transform: translate3d(0, -2px, 0);

					.vc_el-container {
						-webkit-box-shadow: 0 15px 35px -2px rgba(#000, 0.25);
						        box-shadow: 0 15px 35px -2px rgba(#000, 0.25);
					}
				}
				a {
					color: #000;

					&:hover {
						color: $color-accent;
					}
				}
				.vc_element-description {
					color: #bbb;
				}
			}
		}
	}
}

.ink {
  display: none;
  position: absolute;
  background:rgba(255, 255, 255, 0.3);
  border-radius: 100%;
  -webkit-transform:scale(0);
      transform:scale(0);

	.vc_active & {
		display: block;
	}
}

.animate {
	-webkit-animation:ripple 0.65s linear;
        animation:ripple 0.65s linear;
}

/*
	Rella Responsive css
*/
.rella-responsive-css-container {
	position: relative;
	padding-top: 6em;

	.rella-responsive-css-heading {
		display: inline-block;
		width: 70px;
		height: 40px;
		border-radius: 5px;
		position: absolute;
		top: -1em;
		left: 30px;
		text-indent: -99999px;
		cursor: pointer;

		&:before {
			content: '\f10a';
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			text-indent: 0;
			font: normal normal 35px/40px fontAwesome;
			text-align: center;
			opacity: 0.5;
		}
		&:after {
			content: 'Small Desktops';
			display: inline-block;
			padding: 0.5em 1.5em;
			position: absolute;
			bottom: -35px;
			left: 50%;
			border-radius: 5px;
			background-color: $color-accent;
			font-size: 12px;
			line-height: 1.5;
			font-weight: 600;
			text-transform: uppercase;
			letter-spacing: 0.15em;
			text-indent: 0;
			color: #fff;
			white-space: nowrap;
			opacity: 0;
			visibility: hidden;
			-webkit-transform: translateX(-50%) translateY(10px);
			        transform: translateX(-50%) translateY(10px);
			-webkit-transition: all 0.3s ease;
			transition: all 0.3s ease;
		}

		&:hover {

			&:after {
				opacity: 1;
				visibility: visible;
				-webkit-transform: translateX(-50%) translateY(0);
				        transform: translateX(-50%) translateY(0);
			}
		}
	}
	.rella-inner-wrap {
		display: none;
		width: 100%;

		@include clearfix;

		.vc_layout-onion {
			width: 100%;

			.vc_border,
			.vc_padding,
			.vc_content {
				margin: 50px;
			}
		}
	}
	.rella-main-responsive-wrapper {
		width: 100%;

		&:first-child {

			.rella-responsive-css-heading {

				&:before {
					content: '\f109';
					font-size: 32px;
				}
			}
		}
		&:nth-child(2) {

			.rella-responsive-css-heading {
				left: 105px;

				&:before {
					content: '\f10a';
					-webkit-transform: rotateZ(-90deg) scaleX(0.85);
					        transform: rotateZ(-90deg) scaleX(0.85);
				}
				&:after {
					content: 'Tablet';
				}
			}
		}
		&:nth-child(3) {

			.rella-responsive-css-heading {
				left: 170px;

				&:before {
					content: '\f10b';
				}
				&:after {
					content: 'Mobile';
				}
			}
		}
		&.active {

			.rella-responsive-css-heading {
				background-color: #ededed;

				&:before {
					opacity: 1;
				}
			}
			.rella-inner-wrap {
				display: block;
			}
		}
	}
}

/* Range Slider */
.wp-admin {

	.rella-slider.ui-widget {
		border-color: #dedede;
		border-radius: 50em;

		.rella-handle {
			width: 50px;
			height: 28px;
			top: -9px;
			padding: 0;
			border-radius: 50em;
			font-size: 13px;
			letter-spacing: 0.05em;
			line-height: 28px;
			text-align: center;
			cursor: pointer;
			-webkit-transition: -webkit-box-shadow 0.3s ease;
			transition: -webkit-box-shadow 0.3s ease;
			transition: box-shadow 0.3s ease;
			transition: box-shadow 0.3s ease, -webkit-box-shadow 0.3s ease;
			-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0.12);
			        box-shadow: 0 0 0 rgba(0, 0, 0, 0.12);

			&.ui-state-active {
				-webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
				        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
			}
		}
	}
}

.post-type-rella-header,
.post-type-rella-mega-menu,
.post-type-rella-footer {

	.wpb_switch-to-composer {
		border-top-right-radius: 4px;
		border-bottom-right-radius: 4px;

		+ .vc_spacer {
			display: none;
		}
	}
	.vc_navbar #wpb-edit-inline,
	.wpb_switch-to-front-composer {
		display: none;
	}
}

/* RTL */
html[dir="rtl"] {

	.wp-color-result.button {
		padding-right: 0;
		padding-left: 45px;
	}
	.composer-switch {

		.logo-icon {
			border-radius: 0 4px 4px 0;
		}
		.wpb_switch-to-front-composer {
			border-radius: 4px 0 0 4px;
		}
	}
	.vc_welcome {

		.vc_ui-icon-pixel {
			padding-right: 0;
			padding-left: 0.5em;
		}
	}
	.vc_general {

		&.vc_ui-tabs-line {

			> li {
				float: right;
			}
		}
	}
	.wpb_element_label {
		padding-left: 0;
		padding-right: 30px;
	}
	.vc_controls>.vc_controls-cc>:first-child .vc_btn-content,
	.vc_controls>.vc_controls-out-tl>.vc_element>:first-child .vc_btn-content {
		border-radius: 0 3px 3px 0;
	}
	.vc_controls>.vc_controls-cc>:last-child .vc_btn-content,
	.vc_controls>.vc_controls-out-tl>.vc_element>:last-child .vc_btn-content {
		border-radius: 3px 0 0 3px;
	}
	.vc_add-element-container {

		.vc_shortcode-link {
			padding-left: 4px;
			padding-right: 47px;
		}
		.vc_element-icon {
			left: auto;
			right: 8px;
		}
	}

	.post-type-rella-header,
	.post-type-rella-mega-menu,
	.post-type-rella-footer {

		.wpb_switch-to-composer {
			border-radius: 4px 0 0 4px;
		}
	}

	.vc_subnav-fixed {
		padding-left: 0;
		padding-right: 160px;
	}
	.vc_navbar {

		.vc_save-backend {

			.vc_btn {

				&.vc_control-preview {
					margin-right: 21px;
					margin-left: 2px;
				}
				&.vc_control-save {
					margin-left: 21px;
					margin-right: 2px;
				}
			}
		}
	}

	.vc_fullscreen .vc_navbar {
		padding-left: 0;
		padding-right: 40px;
	}

	[data-vc-ui-element=panel-row-layout] .vc_layout-panel-switcher .vc_layout-btn {
		-webkit-transform: rotateZ(180deg);
		        transform: rotateZ(180deg);
	}
	.vc_controls-row .vc_control-set-column .vc-composer-icon {
		-webkit-transform: translate(-50%, -50%) rotateZ(180deg);
		        transform: translate(-50%, -50%) rotateZ(180deg);
	}

	/* FRONTEND */
	.compose-mode {

		#wpcontent,
		#wpfooter {
			margin-right: 0;
			margin-left: 160px;
		}
		#wpcontent {
			padding-right: 0;
			padding-left: 20px;
		}
		.vc_show-mobile {

			.vc_btn {

				&.vc_btn-backend-editor {
					margin-right: 21px;
					margin-left: 2px;
				}
				&.vc_btn-save {
					margin-left: 21px;
					margin-right: 2px;
				}
			}
		}
	}
}


/**********************
Svg Shape divider preview
**********************/

.rella_shape_divider_preview {
	display: block;
	position: relative;
	width: 100%;
	max-height: 400px;
	background: url("../img/transparent.png");

	&:before {
		content: '';
		display: inline-block;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-color: rgba(#fff, 0.1);
	}
}

.rella_shape_top,
.rella_shape_bottom {
	width: 100%;
	position: absolute;
	left: 0;

	img {
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
		visibility: hidden;
	}
	svg {
		max-width: 100%;
		height: auto;
	}
}

.rella_shape_top {
	top: 0;

	svg {
		-webkit-transform: rotateZ(180deg);
		        transform: rotateZ(180deg);

		&.rella-divider-triangle,
		&.rella-divider-circle {
			-webkit-transform: rotateZ(180deg) translateX(-50%);
			transform: rotateZ(180deg) translateX(-50%);
			transform-origin: left center;
		}
	}
}

.rella_shape_bottom {
	bottom: 0;
}

.rella-divider-triangle,
.rella-divider-circle {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}

.rella-shape-divider-heading {
	display: block;
  margin-top: 1em;
	margin-bottom: 1em;
  padding-bottom: 0.25em;
  border-bottom: 1px solid #dedede;
  font-size: 18px;
  font-weight: 700;
	line-height: 1.5;
  letter-spacing: -0.025em;
  color: #dedede;
	cursor: pointer;
	-webkit-transition: color 0.3s ease;
	transition: color 0.3s ease;

	&.bottom {
		margin-top: 2.5em;
	}
	&:hover {
		color: darken(#dedede, 50%);
	}
}
