/* Gallery Builder */

#suround_gallery_builder {
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	color: #aaaaaa;
	min-width: 765px;
}

	#suround_gallery_builder .inside {
		padding: 0;
		margin: 0;
		background-color: #ffffff;
	}

	#suround_gallery_builder .padding-cont {
		padding: 20px;
		background-color: #f8f8f8;
	}

	#suround_gallery_builder .edit_popup h2 {
		padding: 10px 20px;
		background-color: #b3db7a;
		font-weight: 300;
		border-bottom: 1px solid #96c553;
		color: #3c6401;
	}

	#suround_gallery_builder h4,
	#suround_gallery_builder h5,
	#suround_gallery_builder h6
	{
		margin: 0 0 10px;
		font-size: 16px;
		font-family: 'Open Sans';
		color: #333;
		font-weight: normal;
	}

	#suround_gallery_builder h5 { font-size: 15px; }
	#suround_gallery_builder h6 { font-size: 14px; }

	#suround_gallery_builder .img-item,
	#suround_gallery_builder .img-preview,
	#suround_gallery_builder .meta-section,
	#suround_gallery_builder .hover-container,
	#suround_gallery_builder .img-preview img
	{
		outline: none !important;

		-moz-box-sizing: border-box;
				box-sizing: border-box;
	}

	#suround_gallery_builder h5 {
		color: #333333;
		font-size: 14px;
		font-family: Arial, sans-serif;
		margin: 0 0 5px;
		font-weight: 300;
	}

	.clear { clear: both; }

	/* Elements Form */

	input.suround-text-option,
	textarea.suround-text-option {
		background-color: #ffffff;
		padding: 10px;
		color: #333;
		border: 2px solid #bbbbbb;
		font-family: Arial, sans-serif;
		font-size: 14px;
		width: 100%;
		border-radius: 2px;
		outline: none !important;
		box-shadow: none !important;
	}

	input.suround-text-option:focus,
	textarea.suround-text-option:focus {
		box-shadow: none !important;
		border-color: #0073aa;
	}

	textarea.suround-text-option {
		max-height: 80px;
	}

/* Sortable Area */

.slider_option .hideable-area {
	background-color: #f8f8f8;
}

	.slider_option .settings_media {
		margin-bottom: 20px;
		margin-left: -5px;
		margin-right: -5px;
	}

	.slider_option .settings_media ul {
		overflow: hidden;
		margin: 0;
		font-size: 0;
	}

		.sortable-img-items > li {
			position: relative;
			display: inline-block;
			width: 12%;
			padding: 0 5px;
			vertical-align: top;
		}

			.sortable-img-items .ui-state-highlight {
				border: 2px #cccccc dashed;
				background-color: #ffffff;
				min-height: 110px;
				width: calc(13% - 7px);
			}

			.img-item.add_animation:after {
				position: absolute;
				left: 6px;
				top: 1px;
				width: calc(100% - 12px);
				height: calc(100% - 2px);
				background-image: url('../img/ajax-loader.gif');
				background-color: #fff;
				background-repeat: no-repeat;
				background-position: center center;
				content: "";
			}

/* Hover Container */

.append_block .img-preview {
	position: relative;
	padding: 5px;
	margin: 0;
	background-color: #fff;
	box-shadow: 1px 1px 2px rgba(0,0,0, 0.1);
}

.append_block .img-preview:after {
	content: '';
	position: absolute;
	top: 5px;
	left: 5px;
	bottom: 5px;
	right: 5px;
	box-shadow: inset 1px 1px 2px rgba(0,0,0,0.3);
}

	.append_block img {
		display: block;
		max-width: 100%;
		height: auto;

		-webkit-transition: opacity .25s ease;
				transition: opacity .25s ease;
	}

	.append_block .img-preview:hover img { opacity: .7; }

	.img-preview .hover-container {
		padding: 3px;
		position: absolute;
		left: 3px;
		top: 3px;
		width: calc(100% - 6px);
		height: calc(100% - 6px);
		z-index: 20;
		opacity: 0;
		visibility: hidden;

		-webkit-transition: opacity .25s ease;
				transition: opacity .25s ease;
	}

	.img-preview:hover .hover-container {
		opacity: 1;
		visibility: visible;
	}

		.extra-content {
			display: table;
			overflow: hidden;
			width: 100%;
			height: 100%;
			vertical-align: middle;
			text-align: center;
		}

			.inner-extra {
				display: table-cell;
				margin: 0;
				padding: 0 10px;
				width: 100%;
				height: 100%;
				vertical-align: middle;
			}

				.hover-container .edit-item,
				.hover-container .remove-item,
				.hover-container .drag-item
				{
					display: inline-block;
					margin: 0 2px;
					height: 30px;
					width: 30px;
					background-color: #ffffff;
					cursor: pointer;
					text-align: center;
					opacity: 0;

					-webkit-transition: all .25s ease;
							transition: all .25s ease;
					-webkit-transform: translateY(10px);
							transform: translateY(10px);
				}

				.hover-container .remove-item { background-color: red; }
				.hover-container .drag-item   { background-color: grey; }
				.hover-container .edit-item	  { background-color: green; }

				.hover-container .drag-item {
					-webkit-transition-delay: .1s;
							transition-delay: .1s;
				}

				.hover-container .edit-item {
					-webkit-transition-delay: .2s;
							transition-delay: .2s;
				}

				.hover-container:hover .remove-item,
				.hover-container:hover .drag-item,
				.hover-container:hover .edit-item {
					opacity: 1;
					-webkit-transform: translateY(0);
							transform: translateY(0);
				}

				.hover-container .remove-item:hover,
				.hover-container .drag-item:hover,
				.hover-container .edit-item:hover { }

				.hover-container .remove-item:before,
				.hover-container .drag-item:before,
				.hover-container .edit-item:before
				{
					font-family: 'fontello';
					font-size: 18px;
					line-height: 30px;
					color: #fff;
				}

				.hover-container .remove-item:before { content: '\e8b2'; }
				.hover-container .drag-item:before   { content: '\efaf'; }
				.hover-container .edit-item:before   { content: '\e815'; }

/* Settings Box */

.settings_box {
	background-color: #ffffff;
	border: 1px solid #bbbbbb;
}

	.settings_box .settings_box_title {
		padding: 5px 15px;
		border-bottom: #bbbbbb 1px solid;
	}

		#poststuff .settings_box_title h2,
		#poststuff .option-type h2 {
			font-size: 14px;
			font-family: Arial, serif;
			color: #333333;
			padding: 0;
			margin: 0 0 0 0;
		}

	.settings_box .settings_box_content { padding: 20px; }

		.settings_box_content .button-item { display: inline-block; }

		.settings_box_content .option-type { margin: 10px 0; }

		.jq-selectbox.strip_custom_select {
			min-width: 200px;
		}

		.settings_box_content .option-description {
			margin-left: 50px;
			display: inline-block;
			float: none;
			font-size: 14px;
		}

/* Popup Modal */

.popup-modal-overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	visibility: hidden;
	opacity: 0;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	background-color: rgba(0,0,0,0.8);

	-webkit-transition: all .3s ease;
			transition: all .3s ease;
}

.popup-modal.modal-show ~ .popup-modal-overlay {
	opacity: 1;
	visibility: visible;
}

.popup-modal {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 710px;
	z-index: 2000;
	visibility: hidden;
	-webkit-font-smoothing: subpixel-antialiased;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}

.popup-modal.modal-show { visibility: visible; }

	.modal-inner-content {
		position: relative;
		margin: 0 auto;
		overflow: hidden;
		background-color: #f8f8f8;
		opacity: 0;

		-webkit-font-smoothing: subpixel-antialiased;
		-webkit-transform: scale3d(0.1,0.8,1);
				transform: scale3d(0.1,0.8,1);
		-webkit-transition: all 0.3s;
				transition: all 0.3s;
	}

	.popup-modal.modal-show .modal-inner-content {
		opacity: 1;

		-webkit-transform: scale3d(1,1,1);
				transform: scale3d(1,1,1);
	}

	.modal-title {
		position: relative;
		background-color: #0073aa;
		padding: 10px 15px;
		border-bottom: 1px solid #bbb;
	}

		#poststuff .modal-title h2 {
			margin: 0;
			padding: 0;
			color: #fff;
			line-height: 1.2em;
			font-size: 20px;
		}

	.popup_modal_close {
		position: absolute;
		right: 10px;
		top: 50%;
		margin-top: -11px;
		display: block;
		padding: 0;
		line-height: 1em;
		background-color: transparent;
		border: none;
		font-size: 26px;
		cursor: pointer;
		text-align: center;
		color: #fff;
		vertical-align: middle;

		-webkit-transition: all .25s ease;
				transition: all .25s ease;
	}

	.popup_modal_close:after {
		font-family: 'dashicons';
		content: "\f158";
	}

.meta-section {
	float: left;
	width: 50%;
	padding: 20px;
}

	.meta-container:not(:last-child) { margin-bottom: 10px; }

	.meta-section:after,
	.meta-container:after {
		clear: both;
		display: block;
		visibility: hidden;
		height: 0;
		content: ".";
	}

		.meta-container .meta-control { margin-bottom: 10px; }

		.meta-container > .desc { margin-top: 0; font-size: 11px; }

			.meta-container .meta-control .select_img_preview { margin-bottom: 20px; }

			.meta-control .input-near input[type=text] {
				margin: 0 1%;
				width: 45%;
			}

		.meta-container .meta-desc {
			font-size: 12px;
			color: #7d8388;
		}

			.meta-container .meta-desc p { margin: 0; font-size: 12px; }


		.meta-container .half-row-first,
		.meta-container .half-row-second {
			display: inline-block;
			margin: 0 1%;
			vertical-align: top;
		}

		.meta-container .half-row-first {
			width: 55%;
		}

		.meta-container .half-row-second {
			width: 41%;
		}

			#suround_gallery_builder .meta-container [class*="half-row"] h6 { font-size: 12px; }

			.meta-container .wp-picker-holder {
				position: absolute;
				z-index: 10;
			}

				.meta-container  .wp-color-result { height: auto; }
				.meta-container  .wp-picker-default { margin-left: 6px; }

#portfolio-reorder-lists .menu-item,
#gallery-reorder-lists .menu-item
{
	display: inline-block;
	margin: 0 10px 10px 0;
	padding: 5px 5px 10px;
	background: none repeat scroll 0 0 #f5f5f5;
	border: 1px solid #e5e5e5;
	cursor: move;
	text-align: center;
	vertical-align: top;
	width: 150px;
}

	#portfolio-reorder-lists .menu-item .menu-item-title,
	#gallery-reorder-lists .menu-item .menu-item-title {
		margin: .5em;
		padding-left: 5px;
		padding-right: 5px;
	}

	#portfolio-reorder-lists .menu-item .menu-item-terms,
	#gallery-reorder-lists .menu-item .menu-item-terms {
		font-size: 12px;
	}