@charset "UTF-8";





//------------------------------------*\
//    VARIABLES
//------------------------------------*/
$accent 				: #3677bd;
$dark 					: #232527;
$gray 					: #303235;
$light 					: #cbcfd4;
$lighter 				: #3b3f45; //borders
$descriptions			: #4d7b90;

$borders                :#e0e8ef;

$unit 					: 24px;
$popup 					: 275px;
$container-spacing		: 17px;

$blue-dark				: #416B7E;

$fields_height 			: 44px;
$fields_spacing 		: 24px;
$fields_border-radius	: 4px;
$fields_border-color	: #B8DAEB;

$background-hover 	: #f5fcff;





//------------------------------------*\
//    RESETS
//------------------------------------*/
.wp-full-overlay-sidebar {
	* {
		box-sizing 			: border-box;
	}
}

// Change sections overflow
.accordion-section-content {
	overflow: visible;
}



.control-section:not(.control-section-themes) .customize-control {
	padding: 0px;
    width:100%;
	min-height: initial;
}


// Header – Close + Save Controls
#customize-header-actions {
	// border-bottom: 0;
}

// Temporary Fix to Make "Close" button align with the "Back"
.customize-controls-close {
	width: 48px;
    height: 44px;
	color: #7da9c3;
	background: #ffffff;
	border-top: none;
	border-right-color: $borders;

	&:focus, &:hover {
		background: $background-hover;
	}
	
	// "X" Icon
	&:before {
		top: 0px;
	}
}

// Remove Accordion Section Title Margin
#customize-controls .customize-info {
	// margin-bottom: 0;
	border-bottom-color: $borders;
}

.customize-panel-back, .customize-section-back {
	height: 74px;
	color: #7da9c3;
	border-right-color: $borders;

	&:hover, &:focus {
		border-left-color: $background-hover;
		background: $background-hover;
	}
}


#customize-theme-controls {
	.theme * {
		box-sizing: content-box;
	}

	.accordion-section-content {
		padding: $container-spacing;
	}

	.customize-section-title {
		margin-top: -$container-spacing;
		margin-right: -$container-spacing;
		// margin-left: -$container-spacing;
	}
	
	.control-panel-content {
		.control-section:nth-child(2),
		.control-section:nth-child(3) {
			border-top: none;
		}

		// Select the Second to Last Element
		// https://css-tricks.com/useful-nth-child-recipies/
		.control-section:nth-last-child(2) {
			border-bottom: 1px solid $borders;
		}
	}

	#accordion-section-add_menu {
		text-align: right;
		overflow: visible;

		.add-menu-toggle {
		 	float: none;
		}
	}

	.customize-pane-child.open {
		height: 100%;
	}
}

#customize-controls .description {
    margin-bottom: 9px;

	font-size: 12px;
	font-weight: 300;
    font-style: normal;
	line-height: 1.6;
	color: $descriptions;
    text-indent: 0;
}

.customize-control-description {
    margin-top: 6px;
}

.customize-control {
	margin-bottom: $fields-spacing;
}

// Active Themes Section
#accordion-section-themes {
		+.control-section {
			border-top: none;
		}
}

// Subsection Info Title
#customize-controls {
	.panel-meta.customize-info {
		 .accordion-section-title {
		 	border-top: none;
		 	height: 74px;
		 }
	}
}





//------------------------------------*\
//    GENERAL FIELDS
//------------------------------------*/



// GENERAL Buttons

.wp-core-ui {

	// Primary & Secondary Buttons
	 .button:not(.theme-details):not(.collapse-sidebar), 
	 .button-primary, 
	 .button-secondary {
	 	width: auto;
	 	padding: 6px 20px;

	 	font-size: 13px;
	 	font-weight: 400;
		color: #F5FCFF;
		line-height: 1.4;
		text-shadow: none;
		border: none;
		background: #AED2E5;
		box-shadow: 0px 2px 0px 0px #8DBED7;
		border-radius: $fields_border-radius;

		transition: all 0.1s;

		&:hover {
			color: white;
			text-shadow: none;
			background: #98C6DD;
			box-shadow: 0px 2px 0px 0px #74A7C2;
		}
	 }

	 .button-primary {
		background: #73C5EE;
		box-shadow: 0px 2px 0px 0px #57ABD5;

		&:hover {
			background: #58B0DD;
			box-shadow: 0px 2px 0px 0px #3F8AAF;
		}
	 }

	 // Reset Buttons
	.reset_section,
	.reset_panel {
	    width: 100%;
	    height: 4em;
	    display: block;
	    margin: 0px 0 25px;
	}

	.reset_panel {
		margin-top: 10px;
	}
}



// Separators Titles

%fields-label {
	display: block;
    font-size: 14px;
    line-height: 24px;
    font-weight: 600;
    // margin-bottom: 5px;
}

.customize-control-title {
	color: $blue-dark;
}

%section-background {
	content: "";

	position: absolute;
	top: 0;
	bottom: 0;
	left: -$container-spacing - 1;
	right: -$container-spacing - 1;
	z-index: -1;
}

.separator {
	&.label {
		@extend %fields-label;
		@extend .customize-control-title;
		margin-bottom: -3px;
		margin-bottom: -$fields-spacing/2 - 3px;

	    font-weight: 500;
	}

	&.large {
		margin-top: $fields-spacing/2;
		font-size: 16px;
		color: #39474D;
	}

	&.section {
		position: relative;
		padding: 14px 0;
		margin-bottom: 0;
		background: none;
		border: none;

		&[id*="layout"] {
			margin-top: 0;

			&:before {
				border: none;
			}
		}

		&:before {
			@extend %section-background;

			border: 1px solid $borders;
			background-color: #ffffff;
			box-shadow: 0px 1px 0px 0px #DFE8EF;
		}
	}

	&.sub-section {
		position: relative;
		padding: 12px 0;

		&:before {
			@extend %section-background;

			border-top: 1px solid $borders;
			border-bottom: 1px solid $borders;
			background-color: #f6fbff;
		}

		+ span {
			margin-top: 20px;
			font-style: normal;
		}
	}
}

// h2.separator {
// 	margin-bottom: -20px;
//     margin-top: 30px;
// }



// Section tabs

.section-navigation-wrapper {
	position: relative;

	height: 43px;
	margin: -15px -12px 0 -12px;
	margin-right: -$container-spacing;
	margin-left: -$container-spacing;
}

.section-navigation {
	display: flex;
	margin-top: -1px;

	clear: both;

	border-top: 1px solid $borders;

	a {
		flex: 1 1 auto;
		display: block;
		padding: 12px 0;

		color: #3b484e;
		background-color: #ffffff;

		border-bottom: 1px solid $borders;
		border-right: 1px solid $borders;

		text-align: center;
		text-decoration: none;

		transition: background-color .15s ease-in-out;

		&:last-child {
			border-right: 0;
		}
	}
}

#customize-controls .customize-info,
#customize-controls .customize-section-title {
	&.is-sticky.is-sticky {
		top: 40px;
	}

	&.is-in-view.is-in-view {
		box-shadow: none;
	}
}

#customize-controls .has-nav .customize-info,
#customize-controls .has-nav .customize-section-title {
	margin-right: -12px;
}

#customize-controls .customize-section-title.customize-section-title {
	border-bottom: 0;
}

.customize-section-description-container.section-meta.has-nav {
	margin-bottom: 0;
}

	// Extended typography field

.font-options__wrapper {
		position: relative;

		//&:hover .font-options__options-list {
		//	opacity: 1;
		//	pointer-events: auto;
		//}

		&:after {
			content: "";

			position: absolute;
			top: 90%;
			left: 0;
			right: 0;
			z-index: 0;

			display: block;
			height: 100px;
		}
}
	.font-options__head {
		@extend %input;
		@extend %select;

		display: flex;
		justify-content: space-between;

		&.font-options__head {
			-webkit-appearance: none;

		    text-overflow: ellipsis;
		    // overflow: hidden;
		    white-space: nowrap;
		}
	}
		.font-options__font-title {
			margin-right: 26px;
			margin-left: 10px;

			font-size: 12px;
			line-height: 20px;
			font-weight: 300;

			color: #98c6dd;

		    text-overflow: ellipsis;
		    overflow: hidden;
		    white-space: nowrap;
		}

	.font-options__options-list {
		position: absolute;
		top: calc(100% + 6px);
		left: -6px;
		right: -6px;
		z-index: 2;

		display: block;
		padding: 10px;

		border: 1px solid #dfe8ef;
		border-radius: 5px;

		background-color: #ffffff;

		opacity: 0;
		display: none;
		//pointer-events: none;
		transition: opacity .15s linear;

		&:last-child {
			margin-bottom: 0;
		}

		&:before,
		&:after {
			content: "";

			position: absolute;
			top: -20px;
			right: 25px;

			height: 0;
			width: 0;

			border: solid transparent;

			z-index: 10;
		}

		&:before {
			border-bottom-color: white;
			border-width: 10px;
			z-index: 11;
		}

		&:after {
			border-bottom-color: rgba(0, 0, 0, 0.075);
			border-width: 12px;
			top: -24px;
			right: 23px;
		}
	}





//------------------------------------*\
//    OBJECTS
//------------------------------------*/
%top-arrow {
	&:after {
        content: "";
        position: absolute;
        bottom:100%;
        right: 12px;
        border-collapse: separate;
        width: 0;
        height: 0;

        border-width: 0 9px 9px 9px;;
        border-style: solid;
        border-color: transparent transparent #fff transparent;
    }
}

%box-bg {
	position 	: absolute;
	top 		: 60px;
	right 		: -6px;
	z-index 	: 100000;
	width 		: $popup !important;
	padding 	: 12px;
	display 	: none;
	background 		: #fff;
	border-radius 	: 3px;
	@extend %top-arrow;

	&.active {
		display:block;
	}

	&:after {
		right 			: 58px;
		border-color 	: transparent transparent #fff transparent;
	}
}

%icon-btn {
	position 	: absolute;
	top 		: -36px;
	right 		: 45px;
	display 	: block;
	height 		: 30px;
	width 		: 30px;
	margin 		: 0;
	padding 	: 0;
	border 		: none;
	background 	: #1d1e20;
	color 		: #5f6369;
	border-radius : (100px);
	box-shadow: rgba(0, 0, 0, 0.1) 0 2px 0px inset;
	line-height : 30px;
	text-align 	: center;
	cursor 		: pointer;
	outline 	: none;

	&:before {
		font-family: 'Elusive-Icons';
		content: "\e669";
	}

	&:hover, &.active {
		background 	: $lighter;
	}

	&.active {
		box-shadow: rgba(0, 0, 0, 0.4) 0 1px 1px;
	}
}





//------------------------------------*\
//    $INPUT FIELDS
//------------------------------------*/

%input {
	width: 100%;
	height: $fields_height;
	padding: 10px 14px;

	background: #FFFFFF;
	border: 2px solid $fields_border-color;
	border-radius: 4px;

	font-size: 14px;
	line-height: 1.5;
	color: $blue-dark;
	outline: 0;

	&:focus {
		border-color: #73C5EE;
		box-shadow: none;
		// box-shadow: 0 0 0 2px #73C5EE;
	}
}

%select {
	width: 100%;
	-webkit-appearance: button; // hide default arrow in WebKit/Blink
	-moz-appearance: none; // hide default arrow in Gecko

	font-weight: 600;

	background: white url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjE1cHgiIGhlaWdodD0iOXB4IiB2aWV3Qm94PSIwIDAgMTUgOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJDdXN0b21pZnktQ29weS0yIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjU2LjAwMDAwMCwgLTM4Ni4wMDAwMDApIiBmaWxsPSIjOThDNkRFIj4KICAgICAgICAgICAgPGcgaWQ9IkhlYWRlciIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIxLjAwMDAwMCwgNDcuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iQ29udGVudCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAuMDAwMDAwLCA3NS4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iVGl0bGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI2LjAwMDAwMCwgMjE5LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iRmllbGQtLS1TZWxlY3QtQ29weSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iU2VsZWN0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCwgMjcuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTI1NC40ODEyLDE4IEwyNTYsMTkuNTE0IEwyNDguNSwyNyBMMjQxLDE5LjUxNCBMMjQyLjUxODgsMTggTDI0OC41LDIzLjk2NzIgTDI1NC40ODEyLDE4IFoiIGlkPSJQYWdlLTEiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+) no-repeat;
	background-position: right 16px top 16px;

	&[multiple] {
		background: white;
	}
}

.customize-control {

	input[type=text],
	input[type=checkbox],
	input[type=password],
	input[type=color],
	input[type=date],
	input[type=datetime],
	input[type=datetime-local],
	input[type=email],
	input[type=month],
	input[type=number],
	input[type=radio],
	input[type=tel],
	input[type=time],
	input[type=url],
	input[type=week],
	input[type=search],
	select,
	textarea,
	input[type="number"].range-value {
		@extend %input;
	}

	input[type=text],
	textarea {
		font-size: 13px;
	}

	input[type=text] {

	}

	// Textarea
	textarea {
		height: auto;
	}

	// Checkbox
	input[type=checkbox],
	input[type=radio] {
		width: $fields_height/2;
		height: $fields_height/2;

		&:checked {
			background: #73C5EE;
			border-color: #5AB9E8;

			&:before {
				color: white;
				margin: -1px 0 0 -2px;
			}
		}
	}

	&.customize-control-checkbox,
	&.customize-control-radio {

		// Split into two columns only when 
		// there is more than one label
		label:not(:only-of-type) {
			margin-left: 30px;
			padding-top: 0;
			padding-bottom: 0;
			display: inline-block;

			width: calc(49% - 30px);

			text-indent: -6px;

		}

		label {
			color: $blue-dark;

		}

		// Select HTML Labels followed by a Checkbox or Radio field
		.customize-control-html + & {
			margin-top: -24px;
		}

			// Except de dividers titles
			[id*="divider"] + & {
				margin-top: 0;
			}
	}

	// Radios
	input[type=radio] {
		border-radius: 50%;

		&:checked:before {
			content: none;
		}
	}

	&.customize-control-radio {
		label {
			margin-top: $fields-spacing/2;
		}
	}

	// Select
	select {
		@extend %select;
	}


	// Range Field
	input[type="range"] {
		width: 65%;
	}

	$input-size: 200px;
	$input-height: 6px;
	$thumb-height: 22px;

	input[type="range"] {
	  position: relative;
	  -webkit-appearance: none;
	  width: $input-size;
	  height: $thumb-height;
	  overflow: hidden;
	  outline: none;
	  background: none;

	  &:before {
	    content: " ";
	    position: absolute;
	    top: 8px;
	    left: 0;
	    height: $input-height;
	    width: 100%;
	    background: #DFE8EF;
	    box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.30);
	    border-radius: 10px;
	  }

	  &::-webkit-slider-thumb {
	    -webkit-appearance: none;
	    width: $thumb-height;
	    height: $thumb-height;
	    background: #27ae60;
	    position: relative;
	    z-index: 3;

	    background: #FFFFFF;
	    border: 2px solid #B8DAEB;
	    border-radius: 4px;

	    &:before {
	      content: "..";
	      position: absolute;
	      left: 5px;
	      top: -5px;
	      color: #B8DAEB;
	      font-size: 1em;
	      letter-spacing: 1px;
	    }

	    &:after {
	      content: " ";
	      width: $input-size;
	      height: $input-height;
	      position: absolute;
	      z-index: 1;
	      right: $thumb-height - 2px;
	      top: $input-height;
	      background: #73C5EE;
	    }
	  }
	}


	input[type="number"].range-value {
		min-width: 40px;
		max-width: 80px;
		width: auto;
	    height: 30px;
	    top: -5px;
	    float: right;
	    padding: 4px 0px 5px 0px;
	    margin-left: 10px;
	    font-size: 13px;
	    line-height: 1;
	    text-align: center;
	}

	input[type=number]::-webkit-inner-spin-button,
	input[type=number]::-webkit-outer-spin-button {
	  -webkit-appearance: none;
	  margin: 0;
	}
}





//------------------------------------*\
//    Color Picker
//------------------------------------*/

.customize-control-color {
	display: block;

	.customize-control-title {
		float:left;
	}
	.customize-control-content {

	}

	.wp-picker-container {
		position 	: relative;
		float 		: right;
		top 		: -3px;


		.wp-picker-holder {
			position: relative;
		}

		.iris-picker {
			position 	: absolute;
			top 		: 40px;
			right 		: 0;
			z-index 	: 1000;
			width 		: $popup !important;
			border-top 	: none;
			border-color: #DFDFDE;
			border-radius: 0 0 3px 3px;
			border 		: none;
			background 	: white;

			.iris-picker-inner {

			}
			.iris-square {
				width 			: 215px !important;
				height 			: 173px !important;
				margin-right 	: 0;
			}
			.iris-strip {
				float 	: right;
				box-shadow: rgba(0,0,0,0.4) 0 1px 1px inset;
				.ui-slider-handle {
					border-color 	: #aaa !important;
					opacity 		: 1;
					box-shadow: none;
				}
			}
			.iris-palette {
				width : 24px !important;
				height : 24px !important;
				border-radius: 50px;
				box-shadow: rgba(0,0,0,0.4) 0 1px 1px inset;
			}
		}

		.wp-picker-open+.wp-picker-input-wrap {
			position 	: absolute;
			z-index 	: 1000;
			top 		: 35px;
			right 		: 0;
			width 		: $popup;
			padding 	: 9px 12px;
			background 	: white;
			border 		: none;
			border-radius: 3px 3px 0 0;
			@extend %top-arrow;

			input {

				&.wp-color-picker {
					float:left;
					width: 100px;
				    font-size: 13px;
				    text-align: left;
				    margin: 0;
			        padding: 6px 12px;
				    height: auto;
				}

				&.button {
					float:right;
					padding: 4px 12px;
				    height: 30px;
				}
			}
		}
	}

	.wp-color-result{
		top 		: 0;
		height 		: 30px;
		width 		: 40px;
		margin 		: 0;
		padding 	: 0;

		border-radius: $fields_border-radius;
		background: #2ECC71;
		border: 2px solid #B8DAEB;
		box-shadow: none;

		&:after {
			display:none;
		}
	}
}





//------------------------------------*\
//    CSS Editor Customizer
//------------------------------------*/

// Panel
#accordion-panel-live_css_edit_panel {

}

// Section
#accordion-section-live_css_edit_section {

	// Add the default border to title
	.customize-section-title {
		margin-top: -13px;
	    border-bottom: 1px solid #ddd;
	}
	// Ace Editor
	#css_editor {
		top: 70px;
		border-top: 10px solid white;
		overflow: visible;

		&:before {
			content: "";
			width: 48px;
			height: 10px;
			display: block;
			background: #e8e8e8;
			top: -10px;
			position: absolute;
			z-index: 10000000;
			left: 0;
		}
	}

	// Add Some Extra Spacing Around the Editor Content
	.ace_scroller {
		padding-left: 10px;
	}
}

// Increase the Customizer width when Editor is opened
.wp-full-overlay.editor_opened {

	margin-left: 500px;

	#customize-controls {
		width: 500px;
	}

	// Go back when the Customizer is collapsed
	&.collapsed #customize-controls {
		width: 300px;
	}
}





//------------------------------------*\
//    Media Uploader (Logo)
//------------------------------------*/

.customize-control-media,
.customize-control-site_icon,
li#customize-control-site_logo {
	.current {
		margin-bottom: 10px;
		min-height: $fields_height;
		background: #F5FCFF;
		border: 2px solid $fields_border-color;
		border-radius: $fields_border-radius;

		.container, span {
			border: none;
		}
	}


	.inner, .current span {
		font-size: 13px;
		color: #98C6DD;
	}

	.inner {
		line-height: 1.4;
	}

	.thumbnail-image {
		padding: 14px;
		text-align: center;

		img {
			width: auto;
		}
	}

	.actions {
		margin-bottom: 0;
	}
}





//------------------------------------*\
//    TYPOGRAPHY
//------------------------------------*/

.customize-control-typography, .customize-control-typography {

	// Font, Weight and Subsets selectors
	select {
		margin-bottom: 10px;
	}

	.description {
		margin-top: -3px;
	}

	&:not(:first-child) .customize-control-title {
		// margin-top: 15px;
	}

	ul li {
		width: 100%;
		margin: 0;
		// display: inline-table;

		&:nth-child(2n+1) {
			// width: 45%;
			// margin-right: 5%;
		}

		label {
			// width: 100%;
			// display: block;

			// margin-top: 10px;
			// margin-bottom: 5px;
		}

		select {
			// width: 100%;
		}
	}

	.customify_typography_font_weight {

	}

	.customify_typography_font_subsets {
		// height: 28px;
	}
}

	.customize-control select[multiple].customify_typography_font_subsets {
		// height: 48px;
	}





//------------------------------------*\
//    PRESETS
//------------------------------------*/

.customize-control-title {
  // margin-bottom: 20px;
}

.default-preset-button {
  background-color: #F5F6F6;
  float: right;
  padding: 1px 8px;
  border-radius: 3px;
  border: 1px solid #CBCBCB;
  margin-right: 4px;
  font-family: "Open Sans",sans-serif;
  font-size: 13px;

}

.customize-control-preset {
	.description {
		margin-right: 5px;
		font-style: normal;
	}
}

.customify_preset {
  &.radio_buttons {

    .customify_radio_button {
        border: none;
        display: inline-block;
        padding: 2px;
        margin: 3px;
        position: relative;
        overflow: hidden;
        height: auto;

        input[type="radio"] {
            opacity: 0;
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: 9999;

            &:checked{

                &+label {
                    background-color: #ebebeb;
                    &:before {
                        content: '>';
                        color: inherit;
                    }
                    &:after {
                        content: '<';
                        color: inherit;
                    }
                }

                &:before {
                    opacity: 0;
                }
            }
        }

        label{
            position: relative;
            z-index: 999;
            border-left: 4px solid;

        }
    }

  }

  .awesome_preset {
    width: 45%;
    // height: 122px;
    position: relative;
    display: inline-block;
    text-align: center;
    color: white;

    margin-top: 5px;
	margin-bottom: 25px;

	transition: all 0.2s;

	&:hover {
		opacity: 0.9;
	}

    &:before {
      content: '';
      position: absolute;
      top: 1px;
      left: 1px;
      right: 1px;
      bottom: 1px;

      border: 1px solid #FFF;
      background: transparent;
      opacity: .5;
      border-radius: 4px;
      z-index: 5
    }

    .preset-wrap {
      // height: 110px;

      .preset-color {
        height: 128px;
        border-radius: 4px 4px 0 0;
        padding: 17px 0 27px;

        .first-font {
          display: inline-block;
          width: 100%;
          font-size: 55px;
          line-height: 1;
          // padding-top: 23px;
        }
        .secondary-font {
          display: inline-block;
          width: 100%;
          font-size: 20px;
          line-height: 1;
          margin-top: 8px;
        }
      }

      .preset-name {
        position: relative;
        font-size: 11px;
        text-transform: UPPERCASE;
        border-radius: 0 0 4px 4px;
        padding: 1px;

        &:before {
          content: '';
          position: absolute;
          border-color: inherit;
          border: 10px solid;
          border-left-color: transparent;
          border-right-color: transparent;
          border-top: transparent;
          top: -10px;
          border-bottom-color: inherit;
          left: 40%;

        }
      }
    }

    &:nth-child(odd) {
      margin-right: 7%
    }

    input[type=radio] {
      height: 100%;
      width: 100%;
      position: absolute;
      border: 0;
      box-shadow: none;
      color: #006505;
      background-color: transparent;
      border-radius: 0;
      margin: 0;
      display: inline-block;
      top:0;
      left:0;
      z-index:10;

      &:checked {

        &:before {
          position: absolute;
          height: 25px;
          width: 25px;
          top: -13px;
          right: -14px;
          background: #FFF;
          z-index: 1;
        }

        &:after {
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
		    filter: alpha(opacity=0);
		    content: '';
		    position: absolute;
		    width: 26px;
		    height: 26px;
		    border-radius: 50%;
		    top: -5px;
		    right: -5px;
		    z-index: 10;

			background: #73C5EE url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjEzcHgiIGhlaWdodD0iOXB4IiB2aWV3Qm94PSIwIDAgMTMgOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJDdXN0b21pZnktQ29weSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIxLjAwMDAwMCwgLTQwOC4wMDAwMDApIiBmaWxsPSIjRkZGRkZGIj4KICAgICAgICAgICAgPGcgaWQ9IkhlYWRlciIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIxLjAwMDAwMCwgNDcuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iQ29udGVudCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAuMDAwMDAwLCA3NS4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iRmllbGQtLS1DaGVja2JveC1Db3B5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNy4wMDAwMDAsIDI0OS4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICAgICAgPGcgaWQ9IkNoZWNrYm94IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCwgMzAuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTAuMDM4NDk1LDE2IEwxNy4xMTYxMzc1LDguOTIxNDg3NiBMMTUuMTk0NjQ5OCw3IEwxMC4wMzg0OTUsMTIuMTU1MDY3NCBMNi45MjE0ODc2LDkuMDM4OTI5OTcgTDUsMTAuOTYwNDE3NiBMMTAuMDM4NDk1LDE2IFoiIGlkPSJQYWdlLTEiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+) no-repeat;
	    	background-position: center center;
        }
      }
    }

  }
}

.customify_radio_image {
	display: inline-block;
	label {
		display: block;
		float: left;
		margin-right: 10px;
		position: relative;

		input[type=radio] {
			position: absolute;
			top:0;bottom: 0;
			left: 0;right: 0;
			width: 100%;
			height: 100%;

			visibility: hidden;

			img {
				cursor:pointer;
				border:2px solid transparent;
			}

			&:checked + img{
				border: 3px solid #73C5EE;
			}
		}
	}
}

.customify_ace_editor {
	display: block;
	min-height: 200px;
	border: 1px solid #ddd;
}

.customize-control-custom_background {
	.hide {
		display: none;
	}

	.upload_button_div {
		margin: 10px 0;

		& > * {
			margin-right: 10px;
		}
	}

	.preview_screenshot {
		text-align: center;
		margin: 10px 0;
		img {
			border: 2px solid #ccc;
		}
	}
}

#customify_import_demo_data_button {
	width: 70%;
	text-align: center;
	padding: 10px;
	display: inline-block;
	height: auto;
	margin: 0 15% 10% 15%;
}

.import_step_note {
	margin: 5px;
	width: 100%;
	display: inline-block;


	&:before {
		content: "\1F449";
	}

	&.success:before {
		content: "\1F44D";
	}

	&.failed:before {
		content: "\274C";
	}
}

@import 'theme';
@import 'balloon';





//------------------------------------*\
//    FONT Field
//------------------------------------*/

.font-options__wrapper {

	.font-options__options-list {
		border-color: #B8DAEB;
		box-shadow: 0 10px 20px 0 rgba(0,0,0,0.15);
	}

	.font-options__option {
		margin-bottom: 12px;
		label {
			display: block;
			margin-bottom: 6px;
		}
	}

	[type=checkbox]:checked ~ .font-options__options-list {
		opacity: 1;
		display: block;
	}
}

input.customify_font_tooltip {
	display: none;
}

.font-options__option select, 
.font-options__option input, 
.select2-container {
	// width: 100% !important; // am pus important pentru ca exista un inline de 100px
}

ul.font-options__options-list {
	.font-options__option {

	}

	.select2-container {
		width: 100% !important;
		 .select2-selection--single {
		 	@extend %input;
		 	@extend %select;
		 	-webkit-appearance: initial;

		 	.select2-selection__arrow {
		 		display: none;
		 	}
		 }
	}

	.select2-container--default 
		.select2-selection--single 
			.select2-selection__rendered {
			    color: inherit;
			    line-height: initial;
			}

}

//------------------------------------*\
//    SELECT2
//------------------------------------*/


.select2-container.select2-container--open {
	z-index: 99999999;
}