/*
 * This CSS file has been generated and is served by Persona.co
 * and is authorized to be used on Persona only.
 *
 * This CSS resource incorporates links to font software which is
 * the valuable copyrighted property of WebType LLC, The Font Bureau
 * and/or their suppliers. You may not
 * attempt to copy, install, redistribute, convert, modify or reverse
 * engineer this font software. Please contact WebType with any
 * questions: http://www.webtype.com
 */

@import url("/type/css?family=Nitti:n7,n4,n9|NittiGrotesk:n4,i4,n7,i7");

html {
	background: #f2f2f2;
}
/**
 * Content frame viewport setups
 */

#content_frame_wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;

	background: #212121;
	position: fixed;
	pointer-events: none;
	top: 0;
	left: 0;
	bottom: 0;
	width: Calc(100% - 400px);

	z-index: -1;
}

#content_frame_wrapper:before {
	content: '';
	background-image: url('/_gfx/checkered-grid.gif');
	background-size: 8px 8px;
	opacity: 0.2;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
}

#content_frame_wrapper #mobile_disclaimer {
	z-index: 99;
	bottom: 17px;
	font-size: 17px;
	width: 100%;
	left: 0;
	right: 0;
	text-align: center;
	padding: 0 70px;
}

#content_frame_viewport {
	position: relative;
	height: 100%;
	width: 100%;
}

#content_frame_viewport:after,
#content_frame_viewport:before {
	background: rgba(127, 127, 127, 0.3);
	content: '';
	display: block;
	position: absolute;
	border-radius: 20px;
}

#content_frame_viewport.viewport_horizontal:before,
#content_frame_viewport.viewport_horizontal:after {
	top: 0;
	bottom: 0;
	width: 60px;
}

#content_frame_viewport.viewport_vertical:before,
#content_frame_viewport.viewport_vertical:after {
	right: 0;
	left: 0;
	height: 60px;
}

#content_frame_viewport.viewport_vertical:before {
	top: -40px;
}

#content_frame_viewport.viewport_vertical:after {
	bottom: -40px;
}

#content_frame_viewport.viewport_horizontal:before {
	left: -40px;
}

#content_frame_viewport.viewport_horizontal:after {
	right: -40px;
}

#content_frame {
	height: 100%;
	left: 0px;
	top: 0px;
	position: absolute;
	z-index: 2;
	background: #000;
}

#content_frame_viewport {
	width: 100%;
	height: 100%;
}

#content_frame_chrome {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: auto;
}

#content_frame {
	width: 100%;
	height: 100%;
}

.design-preview-frame, .design-demo-frame {
	background-color: #212121;
	position: fixed;
	top: 0;
	left: 0;
	right: 400px;
	bottom: 0;
	height: 100vh;
	width: Calc(100vw - 400px);
	z-index: 3;
}

.design-demo-frame {
	right: 60px;
	top: 60px;
	left: 60px;
	bottom: 60px;
	width: calc(100% - 120px);
	height: calc(100% - 120px);
	z-index: 999;
}

.design-preview-frame:before,
.design-demo-frame:before {
	background-image: url('/_gfx/checkered-grid.gif');
	background-size: 8px 8px;
	content: '';
	opacity: 0.2;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.design-demo-frame:after {
        content: '×';
    font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;
    pointer-events: none;
    cursor: pointer;
    right: -40px;
    top: -40px;
    color: #fff;
    background: transparent;
    width: 40px height: 40px;
    z-index: 9999;
    position: absolute;
    font-size: 42px;
    font-weight: normal;
    line-height: 30px;
}

.design-preview-frame .loading_animation,
.design-demo-frame .loading_animation {
	margin: -15px 0 0 -15px;
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
}

.design-preview-frame iframe,
.design-demo-frame iframe {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	height: 100%;
	width: 100%;
	z-index: 3;
}


/**
 * Rail BS
 */

#follow_popup {
	display: none;
}

.modal .editor-popup.cargo-cssinspector .ci-editor-module {
	top: 0;
}

#projectlist .section-title-text {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

li[data-container-project] .dropover:before {
	left: 3rem;
	right: 3rem;
}

/**
 * Globals
 */

input[type="checkbox"] {
	width: 14px;
	height: 14px;
}

.noselect,
label {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

label:active,
label div:active {
	opacity: .8;
}

.allowselect {
	-webkit-touch-callout: initial;
	-webkit-user-select: initial;
	-khtml-user-select: initial;
	-moz-user-select: initial;
	-ms-user-select: initial;
	user-select: initial;
}

.inline_block_fix {
	font-size: 0;
}

#content_loader {
	padding: 25px 23px;
	position: absolute;
}

/**
 * Global form styles
 */


input[type=radio] {
	display: none;
}

input[type=checkbox] {
	display: none;
}

label.checkbox {
	display: inline-block;
	cursor: pointer;
	position: relative;
	padding-left: 29px;
	margin-right: 15px;
	margin-bottom: 8px;
	white-space: nowrap;
	margin: 4px -1px;
	line-height: 20px;
}

label.checkbox:before {
	content:"";
	display: inline-block;
	width: 19px;
	height: 19px;
	border-radius: 0px;
	margin-right: 6px;
	position: absolute;
	left: 2px;
	bottom: 1px;
	background-color: #fff;
	top: -1px;
	border: 1px solid #ddd;
}

label.checkbox:active {
	opacity: 0.6;
}

/**
 * Generic stuff
 */

#master_wrapper {
	position: absolute;
	width: 400px;
	top: 0;
	right: 0;
	bottom: 0;
	overflow-x: hidden;
}

#editor_masterview {
	background: #f2f2f2;
	color: #666;
	width: 400px;
	min-height: 100%;
	position: absolute;
	right: 0;
}

#editor_masterview > div:not(#sitemanager):not(#panel_wrapper) {
	display: block;
	width: 100%;
	height: 100%;
}

#resize_handle {
	background: rgba(0,0,0,.09);
	position: fixed;
	cursor: w-resize;
	width: 5px;
	bottom: 0;
	top: 0;
	z-index: 10;
}

a {
	color: #208DF9;
	text-decoration: none;
}

a:hover {
	color: #000;
}

a:active {
	color: #999;
}

a.text_only {
	border-bottom: 1px solid #39f;
}

a.text_only:hover {
	border-bottom: 1px solid #333;
}

a.text_only:active {
	border-bottom: 1px solid #bbb;
}

#editor_masterview details summary {
	display: block;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	width: 100%;
}

#editor_masterview details > div, [data-project-inline] > div {
	width: 100%;
}

#editor_masterview details summary:active {
	color: #000;
}

#editor_masterview details summary:active::before {
	opacity: 0.8;
}

#editor_masterview section main {
	padding-top: 25px;
}

#editor_masterview .prevent-selection {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#editor_masterview details .full_css {
	position: relative;
	margin-top: -44px;
	float: right;
}

#editor_masterview details .full_css a {
	padding: 3px 6px;
	background-color: transparent;
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	font-size: 12px;
	cursor: pointer;
	margin-left: 0px;
	margin-right: 5px;
	text-decoration: none;
	font-weight: normal;
	display: inline-block;
}

#editor_masterview details .full_css a:hover {
	background-color: rgba(255,255,255,.8);
	color: #333;
	border: 1px solid #999;
}

#editor_masterview details .full_css a:active {
	opacity: .8;
}


/*
 * Save button
 */

section.save_button_container {
	padding: 0px;
	border: none;
	position: fixed;
	width: 400px;
	bottom: 0;
	right: 0;
	z-index: 9999;
	pointer-events: none;
}

.save-label {
	color: #fff;
	font-size: 1.7rem;
	line-height: 1;
}

.save_button {
	visibility: hidden;
	transition: transform 150ms ease-out;
	transform: translate(0, 100%);
	-webkit-transition: -webkit-transform 150ms ease-out;
	-webkit-transform: translate(0, 100%);
}

#account-plan span {
	display: inline-block;
}

.save_button svg {
	height: 18px;
	width: 18px;
}

.save_button svg *{
	fill: rgba(255, 255, 255, .9);
}

.save_button.saving div[data-save-text]{
	visibility: hidden;
}

.save_button .retinaSpinner {
	position: absolute;
	left: 3px;
	top: 4px;
	width: 20px;
	height: 20px;
	z-index: 999999;
	opacity: 0;
	display: none;

	transition-delay: .5s;
	-webkit-transition-delay: .5s;
	transition: opacity .5s;
	-webkit-transition: opacity .5s;
}

#persona_subsettings .retinaSpinner {
	left: 30px;
}

.save_button.saving .retinaSpinner {
	display: block;
	visibility: visible;
	opacity: 1;
}

.save_button.enabled,
.save_button.saving {
	background-color: #26bf72;
	cursor: pointer;
	visibility: visible;
	transform: translate(0, 0%);
	-webkit-transform: translate(0, 0%);
	pointer-events: auto;
}

.save_button.saved {
	opacity: 1;
	display: none;
	background-color: #26bf72;
	cursor: pointer;
	visibility: visible;
	border-bottom: 1px solid #25a564;
	border-top: 1px solid #25a564;
}

.save_button.enabled [data-save]:hover,
#confirm_modal [data-confirm].bg-green:hover {
	background-color: #35cc7e;
}

.save_button.enabled [data-save]:hover svg * {
	fill: rgba(255, 255, 255, 1);
}

.save_button.enabled [data-save]:active,
#confirm_modal [data-confirm].bg-green:active {
	background-color: #2EB46E;
}

.save_button.enabled [data-revert]:hover,
#confirm_modal [data-deny]:hover {
	background: #b5b5b5;
}

.save_button.enabled [data-revert]:active,
#confirm_modal [data-deny]:active {
	background-color: #a6a6a6;
}

.save_button_container .save_spin {
	position: absolute;
	top: calc(50% - 10px);
	right: 10px;
	display: none;
}

#editor_masterview #persona_settings .save_button_container .save_spin {
	margin-top: -160px;
}


/**
 * Navigation
 */

.admin-wrapper .main_nav > *.active[data-destination="settings"]:before {
	background: #ddd;
}

#editor_masterview #navigation {
	padding: 0;
}

#navigation .home_link {
	position: relative;
	width: 41px;
	height: 41px;
	float: right;
	background: #ddd;
	cursor: pointer;
	border-left: 1px solid #bfbfbf;
	border-bottom: 1px solid #bfbfbf;
}

#navigation .home_link:after {
	content:"";
	background: url('/_gfx/star.svg');
	background-position: 50% 11px;
	background-repeat: no-repeat;
	opacity: 0.75;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	position: absolute;
}

#navigation nav.subnav.css .close_css {
	  font-size: 15px;
	  color: #aaa;
	  font-family: "Lucida Grande";
}

#navigation nav.subnav.css a.close_css:hover {
	color: rgba(0,0,0,.7);
}

#navigation nav.subnav.css a.close_css:active {
	color: rgba(0,0,0,.4);
}

#navigation nav.subnav.css .preview {
	display: none;
}

#navigation nav.subnav.css .preview.enabled {
	display: block;
}

/**
 * Project list
 */
#projectlist {
	margin-top: 81px;
	top: 0;
	bottom: 0;
	height: auto !important;
}


/**
 * Project list drag & drop styles
 */

#projectlist li.in_selection > .wrapper, #projectlist li.in_selection_nested > .wrapper {
	background: #e2e2e2;
}

#projectlist li#position_indicator {
/* 	position: absolute; */
	background:  #e2e2e2;
	padding-right: 30px;
	border: none;
	min-height: 0;
	height: 4rem;
	margin-bottom: 1px;
	margin-left: 3rem;
}

#projectlist li.set.active {
	background: #fff;
}

#projectlist li.set.active li {
	background: #fff;
}

#projectlist li.set.closed ul {
	display: none;
}

#projectlist li.filler {
	border-top: 1px solid #ccc;
	background-color: #e2e2e2 !important;
	display: none;
}

body.dragging, body.dragging * {
	/*cursor: move;*/
}

.dragged {
	position: absolute;
	opacity: 0.53;
	z-index: 2000;
}

#projectlist li.placeholder {
	position: relative;
	/** More li styles **/
}

#projectlist li.placeholder:before {
	position: absolute;
	/** Define arrowhead **/
}

/**
 * Project editor
 */

#design .section_row.save_button_holder {
	border-bottom: none;
}








#editor_masterview .drag_overlay {
	display: none;
	background: rgba(0, 0, 0, 0.65);
	position: absolute;
	text-align: center;
	left: 0;
	right: 0px;
	top: -9rem;
	height: 100vh;
	z-index: 1001;
}

#drag_overlay:before {
	content: 'Upload';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 200px;
	height: 0;
	margin-left: -102px;
	margin-top: -29px;
	color: #fff;
	line-height: 56px;
	text-align: center;
	border-radius: 2px;
	border: 2px solid #fff;
	line-height: 0px;
	font-family: 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;
	font-size: 30px;
	font-weight: bold;
	padding: 30px 0px;
}

#editor_masterview .drag_overlay.active {
	display: block;
}

#editor_masterview .drag_overlay .upload_text {
	color: #fff;
	position: absolute;
	left: 50%;
	top: 40%;
	font-size: 20px;
	margin-left: -42px;
	border: 1px solid #fff;
	padding: 0px 15px;
	border-radius: 3px;
	display: inline-block;
	pointer-events: none;
	line-height: 28px;
}

#access_overlay {
	position: fixed;
	bottom: 0;
	display: block;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1001;
	text-align: center;
	font-weight: bold;
	color: #fff;
	line-height: 100vh;
	font-size: 20px;
	background: rgba(0,0,0,.8)
}

#color-picker-overlay {
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	position: absolute;
	z-index: 99;
	background: transparent;
}


/**
 * Edit project text fields
 */

#editproject .direct_links {
	padding-left: 23px;
	margin-top: 20px;
	color: #bbb;
}

#editproject .direct_links a {
	color: #bbb;
	margin-right: 10px;
	text-decoration: underline;
}

#editproject .direct_links a:hover {
	color: #666666;
}

#editproject .direct_links a:active {
	color: #999;
}

/**
 * Used in the admin navigation
 * Dropdown menu for settings
 */
 #editor_masterview img#settings_dropdown {
	float: right;
	margin-top: -4px;
	cursor: pointer;
	opacity: .3;
	filter:alpha(opacity=30);
}

#editor_masterview img#settings_dropdown.active {
	opacity: .5;
	filter:alpha(opacity=50);
}

#editor_masterview a#settings_symbol {
	background: url(/_gfx/svg/settings_dropdown.svg) no-repeat 0 1px;
	display: inline-block;
	margin: 0 -5px -2px -2px;
	overflow: hidden;
	filter:alpha(opacity=50);
	-moz-opacity: 0.7;
	-khtml-opacity: 0.7;
	opacity: 0.7;
	text-indent: -9999px;
	width: 20px;
	height: 10px;
}

#editor_masterview a#settings_symbol:hover {
	filter:alpha(opacity=100);
	-moz-opacity:1;
	-khtml-opacity: 1;
	opacity: 1;
}

#editor_masterview a#settings_symbol:active {
	filter:alpha(opacity=80);
	-moz-opacity: 0.8;
	-khtml-opacity: 0.8;
	opacity: 0.8;
}

/**
 * Design
 */
.admin-wrapper #design .radio input[type="radio"]#baseunit:not(:checked) + label * {
	fill: #999;
}

#design .cargo-htmleditor {
    height: calc(100% - 60px);
}

#design [data-font-select] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#design .section_row {
	border-bottom: 1px solid rgba(0,0,0,0.12);
	position: relative;
	z-index: 9;
	background-color: #f2f2f2;
}

#design .section_row.css_inspector {
	padding: 0;
}

#design .section_row section {
	border-bottom: none;
}

#design .section_row.save_button_holder {
	z-index: 999;
}

#design .section_row.css_inspector section summary {
	padding: 0 30px 0 23px;
}

#design .section_row section .cargo-cssinspector {
	margin-top: 20px;
}

#design .section_row section.save_button_container .ci-save.enabled:active {
	top: 21px;
}

#design .section_row section.save_button_container .cancel {
	color: #999;
	text-decoration: none;
	margin-left: 95px;
	line-height: 29px;
	font-size: 11px;
}

#design .section_row section.save_button_container .cancel:hover {
	color: #333;
}

#design .section_row section.save_button_container .cancel:active {
	color: #666;
}

#design .section_row section.save_button_container .cancel {
	margin-left: 95px;
	line-height: 29px;
}

#design .shortcuts {
	padding: 20px 0 17px 0;
}

#design .shortcuts a {
	color: #000;
	font-weight: bold;
	display: inline-block;
	margin-bottom: 5px;
}

#design .shortcuts .subtext {
	font-size: 11px;
	color: #ccc;
	margin-left: 5px;
}

#design .white_filler {
	display: none;
	height: 60px;
}

#design .content_order {
	width: 100%;
}

#design .content_order .site-section div[data-orphaned-typography-editors] .site-section-group:last-child {
	padding-bottom: 20px;
}

body.dragging * {
	cursor: ns-resize !important;
}

#design .content_order ul {
	list-style: none;
  	border-top: 1px solid #ddd;
}

#design_options {
	margin-bottom: 4.3rem;
}

#design .content_order ul li.dragged {
	position: absolute;
	opacity: .5 !important;
	cursor: ns-resize !important;
	background-color: #f2f2f2;
}

#design .content_order ul li.placeholder {
	background: #f2f2f2;
}

#design .content_order ul li:hover:after {
	display: block;
}

#design .content_order ul li:first-child {
	border-top: none;
}

#design .content_order ul li:first-child.dragged + li {
	border-top: none;
}

#design .layout-panel {
	min-height: 300px;
	width: 100%;
	border: 1px solid #ddd;
	position: relative;
}

#design .layout-panel ul.dropzone {
	list-style: none;
  	border: 1px solid #ddd;
	min-height: 15px;
	min-width: 40px;
	display: inline-block;
	padding: 0;
	margin: 0;
	position: absolute;
}

#design .layout-panel ul.dropzone.top {
	top: 0;
}

#design .layout-panel ul.dropzone.middle {
	top: 50%;
	transform: translateY(-50%);
}

#design .layout-panel ul.dropzone.bottom {
	bottom: 0;
}

#design .layout-panel ul.dropzone.left {
	left: 0;
}

#design .layout-panel ul.dropzone.center {
	left: 50%;
	transform: translateX(-50%);
}

#design .layout-panel ul.dropzone.right {
	right: 0;
}

#design .layout-panel ul.dropzone.middle.center {
	transform: translate(-50%, -50%);
}

#design .layout-panel ul.dropzone li {
	text-align: center;
	display: block;
	cursor: ns-resize;
	min-width: 90px;
	height: 22px;
	line-height: 22px;
	border-top: 1px solid #ddd;
	margin: 0;
	position: relative;
  	background-color: #f2f2f2;
}

#design .layout-panel ul.dropzone li.dragged {
	position: absolute;
	border: 1px solid #ddd !important;
	opacity: 1 !important;
	cursor: ns-resize !important;
}

#design .layout-panel ul.dropzone li.placeholder {
	background: #fff;
}

#design .layout-panel ul.dropzone li:after {
	display: none;
	content: '\a';
	background-image: url('/_gfx/svg/project_move.svg');
	background-repeat: no-repeat;
	height: 12px;
	width: 6px;
	position: absolute;
	right: -17px;
	top: 5px;
	height: 11px;
}

#design .layout-panel ul.dropzone li.dragged:after {
	display: block;
}

#design .layout-panel ul.dropzone li:hover:after {
	display: block;
}

#design .layout-panel ul.dropzone li:first-child {
	border-top: none;
}

#design .layout-panel ul.dropzone li:first-child.dragged + li {
	border-top: none;
}


/**
 * Design > Content > Branding
 */

.branding article {
	margin-bottom: 30px;
}

.branding article header {
	font-size: 14px;
	color: #333;
	margin-bottom: 10px;
}

.branding article .buttons .button {
	padding: 4px 6px;
	background-color: transparent;
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	font-size: 12px;
	cursor: pointer;
	margin-left: 0px;
	margin-right: 5px;
	text-decoration: none;
	font-weight: normal;
	display: inline-block;
	background: rgba(255,255,255, .7);
}

.branding article .buttons .button.dropover {
	background-color: #000;
	color: #ccc;
}

.branding article .buttons .button:hover {
	background: rgba(0,0,0,.4);
	border: 1px solid transparent;
	color: white;
}

.branding article .buttons .button:active {
	background: rgba(0,0,0,.2);
}

.branding article .buttons .button.remove {
	background: transparent;
	border: none;
}

.branding article .buttons .button.remove:hover {
	color: #777;
}

.branding article .buttons .button.remove:active {
	color: #999;
}

.branding article .header_image {
	margin-top: 10px;
}

.branding article.header_text input[type=text] {
	background: #fff;
	line-height: 20px;
	margin-bottom: 0;
	margin-top: 0;
	padding: 3px 5px 3px 7px;
	color: #333;
	display: inline-block;
	outline: none;
	border: 1px solid #ccc;
}

.branding article .fav_wrapper {
	display: inline-block;
	vertical-align: middle;
}

.branding article .spin {
	margin-top: 10px;
}

/**
 * Design typograpy editors
 */

#design .typography-editor:not(:first-child) {
	margin-top: 15px;
	padding-top: 10px;
}

#design .typography-editor .title {
	color: #333;
	font-size: 14px;
	margin-bottom: 6px;
	display: inline-block;
}

#design .typography-editor a.css_popup {
	color: #b2b2b2;
	border-bottom: 1px solid #ccc;
	padding-bottom: 1px;
	text-decoration: none;
	float: right;
}

#design .typography-editor .css_link {
	font-size: 10px;
	color: #ccc;
	border-bottom: 1px solid #ccc;
	display: inline-block;
	margin-left: 10px;
	padding-bottom: 1px;
	position: relative;
	top: -1px;
	text-decoration: none;
}

#design .typography-editor .css_link:hover {
	border-bottom-color: #666;
	color: #666;
}

#design .typography-editor .css_link:active {
	border-bottom-color: #999;
	color: #999;
}

#design .typography-editor select {
	display: inline-block;
	border: 1px solid #d7d7d7;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	color: #333;
	height: 27px;
	margin: 5px 0px;
	outline: none;
	font-size: 12px;
	padding: 0 22px 0 9px;
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	background: #fff url(/_gfx/editor_select_arrow.gif) no-repeat;
	background-position: right 10px top 50%;
	background-size: 8px 7px;
	vertical-align: middle;
}

#design .typography-editor [data-number-input] {
	margin-right: 1px;
}

#design .typography-editor input {
	display: inline-block;

	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-radius: 0;

	height: 27px;
}

#design .typography-editor .sp-replacer {
	margin-left: 6px;
	margin-right: 4px;
	display: inline-block !important;
}

#design .typography-editor .colorpicker {
	display: none !important;
}

#design .typography-editor select[data-property="font-family"] {
	width: 210px;
}

#design .typography-editor select[name="font-variant"] {
	width: 128px;
	margin-right: 7px;
}

#design .typography-editor input[data-property="font-size"] {
	outline: 1px solid #d7d7d7;
	width: 50px;
	height: 25px;
	vertical-align: middle;
	background: #fff;
}

[data-number-input] {
	position: relative;
	display: inline-block;
}

[data-number-input] input {
	padding: 0 10px;
	height: 25px;
	line-height: 25px;
	outline: 1px solid #ccc;
	outline-offset: 0;
	border: none;
	margin: 0;
}

[data-number-input] .controls {
	box-sizing: border-box;
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	right: 0;
	height: 100%;
}

[data-number-input] .controls .control .arrow {
	font-size: 8px;
	position: relative;
	display: inline-block;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #ccc;
}

[data-number-input] .controls .control {
	height: 50%;
	border-left: 1px solid #ccc;
	position: relative;
	width: 12px;
}

[data-number-input] .controls .control:after {
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 3px 6px 3px;
	border-color: transparent transparent #cccccc transparent;

	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

[data-number-input] .controls .control:hover:after {
	border-color: transparent transparent #000 transparent;
}

[data-number-input] .controls .control:active:after {
	border-color: transparent transparent #666 transparent;
}

[data-number-input] .controls .control.down:after {
	border-width: 6px 3px 0 3px;
	border-color: #cccccc transparent transparent transparent;
}

[data-number-input] .controls .control.down:hover:after {
	border-color: #000 transparent transparent transparent;
}

[data-number-input] .controls .control.down:active:after {
	border-color: #666 transparent transparent transparent;
}

[data-number-input] .controls .control.up {
	border-bottom: 1px solid #ccc;
	height: calc(50% - 1px);
}

/**
 * Typography exceptions
 */

#design .typography-editor .only-link-color {
	display: none;
}

#design .typography-editor[data-target="Header Text"] .text-color,
#design .typography-editor[data-target="Navigation"] .text-color {
	display: none;
}

#design .typography-editor[data-target="Header Text"] .only-link-color,
#design .typography-editor[data-target="Navigation"] .only-link-color {
	display: initial;
}

#design .typography-editor[data-target="Header Text"] .link-and-text-color,
#design .typography-editor[data-target="Navigation"] .link-and-text-color {
	display: none;
}

/* Retina spinner */
 .spinner_circle.part1 {
	-webkit-animation-delay:-0.800s;
	animation-delay:-0.800s;
}

.spinner_circle.part2 {
	-webkit-animation-delay:-0.700s;
	animation-delay:-0.700s;
}

.spinner_circle.part3 {
	-webkit-animation-delay:-0.600s;
	animation-delay:-0.600s;
}

.spinner_circle.part3 {
	-webkit-animation-delay:-0.500s;
	animation-delay:-0.500s;
}

.spinner_circle.part4 {
	-webkit-animation-delay:-0.400s;
	animation-delay:-0.400s;
}

.spinner_circle.part5 {
	-webkit-animation-delay:-0.300s;
	animation-delay:-0.300s;
}

.spinner_circle.part6 {
	-webkit-animation-delay:-0.200s;
	animation-delay:-0.200s;
}

.spinner_circle.part7 {
	-webkit-animation-delay:-0.100s;
	animation-delay:-0.100s;
}

.spinner_circle.part8 {
	-webkit-animation-delay:-0.00s;
	animation-delay:-0.00s;
}

@keyframes spinner {

	0% {
		background:#000;
	}

	80% {
		background:#b2b2b2;
	}

	100% {
		background:#000;
	}

}

@-webkit-keyframes spinner {

	0% {
		background:#000;
	}

	80% {
		background:#b2b2b2;
	}

	100% {
		background:#000;
	}

}

@-webkit-keyframes rotation {

	from {
		-webkit-transform: rotate(359deg);
	}

	to {
		-webkit-transform: rotate(0deg);
	}

}

div.spinner_circle {
	-webkit-animation:spinner 0.9s infinite;
	-moz-animation:spinner 0.9s infinite;
	animation:spinner 0.9s infinite;
	-webkit-transform-origin: 0% 50%;
	transform-origin: 0% 50%;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	position: absolute;
	height: 4px;
	width: 4px;
	left: 10px;
	top: 10px;
}

.retinaSpinner {
	/*display: inline-block;*/
	border: 0px solid red;
	z-index: 999;
	position: relative;
	height: 20px;
	width: 20px;
}

.retinaSpinner.rotating {
	-webkit-animation: rotation 10s infinite linear;
	-moz-animation: rotation 10s infinite linear;
	-o-animation: rotation 10s infinite linear;
	animation: rotation 10s infinite linear;
}

/**
 * Interventions
 */

ul.content_position label img {
	position: relative;
	z-index: 10;
}



/*
	-----------------
	ROO CHANGES
	-----------------
*/

#projectlist .project_state {
	height: 8px;
	width: 8px;
	border-radius: 4px;
}

#projectlist .container-page .section-title-text span {
	padding-top: 1px;
	margin-left: 1px;
}

#projectlist .container-page .section-title-input input {
	color: #222222;
}

#projectlist .container-page.dragged {
	position: absolute !important;
}

#projectlist .container-page .section-title-text { display: block }
#projectlist .container-page.open .section-title-text { display: none }

#projectlist .container-page .section-title-input { display: none }
#projectlist .container-page.open .section-title-input { display: block }
#projectlist .container-page.open .section-title-input.text { 
    padding-left: calc(1.5rem + 1px);
}

#projectlist .container-page .project_delete { display: none }
#projectlist .container-page.open .project_delete { display: block }

#projectlist .container-page [data-project-inline] { display: none }
#projectlist .container-page.open [data-project-inline] { display: block }

#projectlist .container-page:not(.open):not(.homepage) .project_home { display: none }

#projectlist .container-page .project_home svg polygon,
#projectlist .container-page .project_home svg path {
	fill: #ccc;
}

#projectlist .container-page.homepage .project_home svg polygon,
#projectlist .container-page.homepage .project_home svg path {
	fill: #09f;
}

.project-list-home-icon:after {
	display: none !important;
}

.admin-wrapper .status-circle.off {
/* 	background-color: #ccc; */
}

.admin-wrapper .status-circle.pulse {
	animation: pulsing .5s infinte;
	-webkit-animation: pulsing .5s infinite;
}

@keyframes pulsing {
  0%, 100% {
    height: .8rem;
	width: .8rem;
  }
  25%, 75% {
	 height: 1rem;
	width: 1rem;
  }
  50% {
    height: 1.2rem;
	width: 1.2rem;
  }
}

@-webkit-keyframes pulsing {
  0%, 100% {
    height: .8rem;
	width: .8rem;
  }
  50% {
    height: 1.2rem;
	width: 1.2rem;
  }
}

.admin-wrapper .status-circle.on {
	background-color: #26bf72;
}

.admin-wrapper .status-circle.homepage {
	background-color: #09f;
}

.admin-wrapper .status-circle.offline {
	background-color: #ff0066;
}

#projectlist a.project_delete, .delete_button {
	display: none;
	height: 13px;
	overflow: hidden;
	line-height: initial;
	width: 13px;
	font-size: 15px;
	color: #aaa;
	font-family: "Lucida Grande";
	line-height: 11px;
	position: absolute;
	right: -2px;
	top: calc(50% - 7px);
}

#projectlist a.project_delete:hover {
	text-decoration: none;
	color: black;
}

#projectlist a.project_delete:active {
	text-decoration: none;
	color: #ccc;
}

#projectlist li a.project_delete.active {
	display: block;
}

#projectlist section.open a.project_delete {
	display: block;
}

#projectlist section.open a.project_delete {
	display: block;
}

.admin-wrapper .hidden-parent-container {
	margin-top: 20px;
	font-size: 12px;
	display: none;
}

.admin-wrapper .parent-disabled .hidden-parent-container {
	display: block;
}


/**
 * Admin Thumbnails
 */
.admin-wrapper .images {
	clear: both;
}

.admin-wrapper .project_images {
	display: -webkit-box;
	  display: -webkit-flex;
	  display: -ms-flexbox;
	  display: flex;
	  -webkit-flex-wrap: wrap;
	      -ms-flex-wrap: wrap;
	          flex-wrap: wrap;
	margin: 0 -0.75rem;
	min-width: calc(100% + 1.5rem);
}

.admin-wrapper .project_images .image_container {
	color: #999;
	padding: 0.75rem;
	position: relative;
	font-size: 0;
	width: 25%;
	max-width: 108px;
	vertical-align: top;
}

.admin-wrapper .img_gallery_draggable .image_container .clickable {
	cursor: move !important;
}

.admin-wrapper .img_gallery_draggable .image_container.sortable-chosen {
	z-index: 100000;
}

.admin-wrapper .img_gallery_draggable .image_container.sortable-chosen .imgcrop {
	background: #ccc;
}

.admin-wrapper .img_gallery_draggable .image_container.sortable-chosen.sortable-ghost .imgcrop .image {
	visibility: hidden;
}

.admin-wrapper .img_gallery_draggable .image_container.sortable-ghost .image_delete,
.admin-wrapper .img_gallery_draggable .image_container.sortable-chosen .image_delete {
	display: none !important;
}

.admin-wrapper .project_images .image_container.dragged {
	position: absolute;
}

.admin-wrapper .project_images .image_container a.image_link {
	display: inline-block;
	width: 100%;
}

.admin-wrapper .project_images .image_container .img_wrapper {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	height: 0;
	padding-bottom: 100%;
}

.admin-wrapper .project_images .image_container img {
	max-width: 100%;
	height: auto;
	min-height: 66px;
}

.admin-wrapper .project_images .image_container.active img {
	outline-offset: 2px;
	outline: 1px dashed #09f;
}

.admin-wrapper .project_images .image_container .progressContainer {
	display: none;
	width: 100%;
	height: 100%;
	position: absolute;
	background-color: #dddddd;
}

/**
 * Stock Images
 */

.admin-wrapper .project_images .image_container.uploading .progressContainer {
	display: block;
}

.admin-wrapper .project_images .image_container .progressContainer .progressIndicator {
	position: absolute;
	margin: auto;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	height: 30px;
	width: 30px;
}

.admin-wrapper .project_images .image_container .progressContainer.pending .progressIndicator {
	-webkit-animation: progress 3s linear infinite;
	animation: progress 3s linear infinite;
}

@-webkit-keyframes progress {
	from { -webkit-transform: rotate(0deg); }
	to   { -webkit-transform: rotate(359deg); }
}

keyframes progress {
	from { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); }
	to   { -webkit-transform: rotate(359deg); -ms-transform: rotate(359deg); transform: rotate(359deg); }
}

.admin-wrapper .project_images .image_container .image_surrogate {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	height: 0;
	padding-bottom: 100%;
}

.admin-wrapper .project_images .image_container .image_surrogate .progress_overlay {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
}

.admin-wrapper .project_images .image_container .image_surrogate .progress_overlay .progress_bar {
	position: absolute;
	height: 5px;
	background: #00c462;
	width: 0%;
	bottom: 0;
	-webkit-transition: width .2s;
    transition: width .2s;
}

.admin-wrapper .project_images .image_container a.image_delete {
	display: none;
	position: absolute;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,.5);
	width: 15px;
	height: 15px;
	font-size: 13px;
	color: #fff;
	text-decoration: none;
	text-align: center;
	line-height: 13px;
	font-family: 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;
}

.admin-wrapper .project_images .image_container:hover a.image_delete {
	display: block;
}

.admin-wrapper .project_images .image_container a.image_delete:hover {
	background: #f00;
}

.admin-wrapper .project_images .image_container a.image_delete:active {
	opacity:0.4;
}

.admin-wrapper .project_images .image_container .image_ref {
	display: none;
    background: rgba(0,0,0,.5);
    color: #fff;
    font-size: 10px;
    padding-left: 3px;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 16px;
	z-index: 2;
}

.admin-wrapper .project_images .image_container:hover .image_ref {
	display: block;
}

/**
 * Overrides
 */

.icon-settings-design {
	line-height: 1;
	padding-top: 0.3rem;
	flex: 0 0 41px !important;
}

/* Delete Button */
.delete-button {
/* 	background: #ff0755; */
	color: #fff;
	display: block;
	font-size: 3rem;
	line-height: 1.5rem;
	position: absolute;
	text-align: center;
	z-index: 2;
	height: 2rem;
	width: 2rem;
	opacity: .75;
}

.delete-button.small {
	height: 1.5rem;
	width: 1.5rem;
	font-size: 2rem;
	line-height: 1.2rem;
}

.top-right {
	right: 1.5rem;
	top: 1.5rem;
}

.bottom-right {
	right: 1.5rem;
	bottom: 1.5rem;
}

/* templaes */
.design_title {
	width: 100%;
	position: relative;
}

[data-selected-template] .design_title {
	background: #0099FF !important;
	color: white !important;
}

.design_title .circle {
	border-radius: 50%;
	width: 8px;
	right: 12px;
	position: absolute;
	top: calc(50% - 5px);
	height: 8px;
	background: #ccc;
	/* width and height can be anything, as long as they're equal */
}

.circle.on {
	background: #26bf72;
}

.option-thumb {
	border-top: 0;
	height: 338px;
}
.header_image_drag_space {
	top: -40px;
	right: 0;
	left: 0;
	bottom: 0;
	position: absolute;
	z-index: 1;
}

/**
 * Typography editor sections
 */

details[data-site-element-title~="navigation"] [data-text-color],
details[data-site-element-title~="header-text"] [data-text-color] {
	display: none;
}

[data-link-color-two] [data-link-title="color"] {
	display: none;
}

.admin-wrapper .row [data-active-color],
.admin-wrapper .row [data-link-color-one] {
	display: none;
}


details[data-site-element-title~="navigation"] [data-link-color-two] [data-link-title="links"],
details[data-site-element-title~="header-text"] [data-link-color-two] [data-link-title="links"] {
	display: none;
}

details[data-site-element-title~="header-text"] [data-link-color-two] [data-link-title="color"] {
	display: inline;
}

details[data-site-element-title~="navigation"] [data-link-color-two] [data-link-title="color"] {
	display: inline;
}

.admin-wrapper details[data-site-element-title~="navigation"] .row [data-link-color-one],
.admin-wrapper details[data-site-element-title~="navigation"] .row [data-active-color] {
	display: flex;
}

[data-nodrag-image] {
	pointer-events: none;
	display: block;
}

/**
 * Inline editor buttons
 */

#editor_ui {
	position: fixed;
	width: 400px;
	bottom: 0;
	right: 0;
	z-index: 12;
	border-top: 1px solid #ddd;
	visibility: hidden;
}

#editor_ui.off_screen {
	transition: transform 150ms ease-out;
	transform: translate(0, 100%);
	-webkit-transition: -webkit-transform 150ms ease-out;
	-webkit-transform: translate(0, 100%);
}

#editor_ui > .buttons {
	position: relative;
	z-index: 999;
}

#editor_ui.off_screen.active {
	-webkit-transform: translate(0, 0%);
	transform: translate(0, 0%);
	visibility: visible;
}

#editor_ui.off_screen.active.save_enabled {
	-webkit-transform: translate(0, -44px);
	transform: translate(0, -44px);
}

#editor_ui.off_screen.active.save_enabled.force_close {
	-webkit-transform: translate(0, 0%);
	transform: translate(0, 0%);
	transition: transform 0s ease-out;
	-webkit-transition: -webkit-transform 0s ease-out;
}

#editor_ui:not(.off_screen).active {
	visibility: visible;
}

#editor_ui:not(.active):before {
	background: #F2F2F2;
	opacity: .5;
	width: 100%;
	height: 100%;
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 9;
}

#editor_ui .buttons.format .style_buttons div.active {
	background-color: #39f;
	outline: 1px solid #39f;
	position: relative;
	z-index: 1;
}

#editor_ui [data-command].active.button-first:after {
	background: #09f;
	content: '';
	position: absolute;
	z-index: -1;
	top: -1px; left: 0; right: -1px; bottom: -1px;
	background: #09f;
}

#editor_ui [data-command].active.button-first {
	outline: 0;
}

#editor_ui .buttons.format .style_buttons div.font_select {
	width: 54px;
}
#editor_ui .buttons.action div.code_view {
	width: 50px;
	background-image: none;
}

#editor_ui .col-square.button [data-svg] {
	width: 100%;
	height: 100%;
}

#editor_ui svg {
	height: 34px;
	width: 34px;
	top: 3px;
	left: 3px;
}
#editor_ui #h1, #editor_ui #h2, #editor_ui #quotes, #editor_ui #italic, #editor_ui #bold {
	font-weight: bold;
	font-size: 21px;
	line-height: 39px;
	text-align: center;
}
#editor_ui #h1, #editor_ui #h2 {
	font-size: 20px;
}
#editor_ui #italic{
	font-weight: normal;
}
#editor_ui #small {
	font-size: 16px;
	line-height: 42px;
	font-weight: bold;
	text-align: center;
}
#editor_ui #quotes {
	font-size: 39px;
	line-height: 52px;
}
#editor_ui #createlink svg {
	width: 36px;
	height: 36px;
	top: 2px;
	left: 2px;
}

#editor_ui [data-hover-options-toggle] {
	position: relative;
}

#editor_ui [data-align-current] .button {
	display: none;
	position: absolute;
}

#editor_ui [data-align-current] .button#justify_left {
	display: block;
}

#editor_ui [data-align-current] .button.current {
	display: block;
	background: #fff;
}

#editor_ui [data-command="insertcolumns"].active {
	background: #fff;
	outline: 0;
}
#editor_ui [data-command="insertcolumns"].active svg * {
	fill: #0099ff;
	color: #0099ff;
}

#editor_ui [data-hover-options] {
	display: none;
}
#editor_ui [data-hover-options].open {
	display: block;
	width: 100%;
	position: absolute;
	bottom: 8px;
	left: 8px;
	box-shadow: 5px 5px 0px rgba(0,0,0,0.10);
	outline: 1px solid rgba(0,0,0,0.1);
	z-index: 99;
}

#editor_ui [data-hover-options="misc"].open {
	display: flex;
}

#editor_ui .col-square.button [data-hover-options] .button {
	float: none;
	height: 4rem;
	width: 40px;
	background: #fff;
	margin-left: 0;
}

.admin-wrapper [data-align-current] .button.active:after,
.admin-wrapper [data-hover-options] .button.active:after,
.admin-wrapper [data-align-current] .button.active:before,
.admin-wrapper [data-hover-options] .button.active:before {
	display: none;
}

.admin-wrapper [data-hover-options] .button.active {

}

#editor_ui .col-square [data-hover-options] .button:not(.inactive):hover {
	background: #eee;
}

#editor_ui .col-square.button [data-hover-options] .button.active {
	background: #0099F6;
	color: #fff;
	fill: #fff;
	outline: none;
	z-index: 999;
}
#editor_ui .col-square.button [data-hover-options] .row .button.active:before,
#editor_ui .col-square.button [data-hover-options] .row .button.active:after {
	content: '';
	position: absolute;
	z-index: 999;
	display: block;
	background: #0099ff;
}
#editor_ui .col-square.button [data-hover-options] .row .button.active:first-child:before {
	height: 100%;
	width: 1px;
	left: -1px;
	top: 0;
	bottom: 0;
}
#editor_ui .col-square.button [data-hover-options] .row .button.active:last-child:before {
	content: '';
	position: absolute;
	height: 100%;
	width: 1px;
	right: -1px;
	top: 0;
	bottom: 0;
}
#editor_ui .col-square.button [data-hover-options] .row:first-child .button.active:first-child:after {
	height: 1px;
	width: calc(100% + 1px);
	z-index: 999;
	left: -1px;
	top: -1px;
	bottom: 0;
}
#editor_ui .col-square.button [data-hover-options] .row:first-child .button.active:last-child:after {
	height: 1px;
	width: calc(100% + 1px);
	z-index: 999;
	right: -1px;
	top: -1px;
	bottom: 0;
}
#editor_ui .col-square.button [data-hover-options] .row:last-child .button.active:first-child:after {
	height: 1px;
	width: calc(100% + 1px);
	z-index: 999;
	left: -1px;
	bottom: -1px;
}
#editor_ui .col-square.button [data-hover-options] .row:last-child .button.active:last-child:after {
	height: 1px;
	width: calc(100% + 1px);
	z-index: 999;
	right: -1px;
	bottom: -1px;
}

/*
 * HTML editor popup
 */

#html-editor .modal .content > div {
	padding: 10px;
}

.admin-wrapper .image_upload_icon[data-svg] > svg,
.admin-wrapper .image_upload_icon[data-svg] > svg * {
	width: 37px;
	height: 37px;
	top: 1px;
	left: 0px;
	fill: #ccc;
}

.admin-wrapper .randomize_icon[data-svg] > svg,
.admin-wrapper .randomize_icon[data-svg] > svg * {
	width: 22px;
	height: 22px;
	top: 9px;
	left: 8px;
	fill: #ccc;
}



/* ///////////// * Domains * //////////////// */
#domain_wrapper {
	width: 100%;
}

#domain_wrapper #search_loading {
	padding: 10px 0 10px 0;
}

#domain_wrapper .search_form input[type=text]::-webkit-input-placeholder {
	color: rgba(56, 51, 47, .55);
	-webkit-font-smoothing: antialiased;
	font-weight: normal;
}

.admin-wrapper #search .text:after {
	display: none;
}

#domain_wrapper .single_domain .available {
	float: left;
	height: 8px;
	width: 8px;
	border-radius: 4px;
	position: absolute;
	top: calc(50% - 4px);
	left: calc(50% - 4px);
	background-color:#ccc;
}

#domain_wrapper .single_domain .available.yes {
	background-color: #26bf72;
}

#domain_wrapper .single_domain .available.no {
	background-color: #f30;
}

.#domain_wrapper single_domain .available.pending {
    animation: pending 2s linear infinite;
    -moz-animation: pending 2s linear infinite; /* Firefox */
    -webkit-animation: pending 2s linear infinite; /* Safari and Chrome */
    -o-animation: pending 2s linear infinite; /* Opera */
}

#domain_wrapper @keyframes pending {
    0% {background-color:#ccc;}
    50% {background-color:#000;}
    100% {background-color:#ccc;}
}

#domain_wrapper @-moz-keyframes pending {
    0% {background-color:#ccc;}
    50% {background-color:#000;}
    100% {background-color:#ccc;}
}

#domain_wrapper @-webkit-keyframes pending {
    0% {background-color:#ccc;}
    50% {background-color:#000;}
    100% {background-color:#ccc;}
}

#domain_wrapper @-o-keyframes pending {
    0% {background-color:#ccc;}
    50% {background-color:#000;}
    100% {background-color:#ccc;}
}

#domain_wrapper .single_domain:not(.available) {
	cursor: default;
}


#domain_wrapper article.search_form {
	max-width: 600px;
	margin: 0 auto;
}

#domain_wrapper [data-domainlist-set] {
  margin-top: 1px;
}

#domain_wrapper [data-domainlist-set-toggle] {
	display: none;
}

#domain_wrapper .col[data-purchase-domain] {
	display: none;
	cursor: pointer;
	position: absolute;
	top: 0px;
	left: 0;
	right: 0;
	bottom: 0;
}

#domain_wrapper .col[data-purchase-domain]::before {
	content: '';
	height: 1px;
	position: absolute;
	width: 100%;
	top: -1px;
	left: 0;
	background: #0099ff;
}

#domain_wrapper .col[data-purchase-domain]::after {
	content: '';
	height: 1px;
	position: absolute;
	width: 100%;
	bottom: -1px;
	left: 0;
	background: #0099ff;
}

#domain_wrapper .col.message {
	margin-top: 1px;
}

#domain_wrapper .overlay {
	display: none;
	position: fixed;
	background: rgba(0,0,0,.3);
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 11;
}


/* Payments */
#paypal_checkout {
	display: none;
}

#panel_wrapper {
	min-height: 100%;
	overflow: hidden;
}

#panel_content {
	position: absolute;
}

#panel_wrapper .purchase_modal {
	display: none;
	position: fixed;
	top: calc(50% - 200px);
	left: calc(50% - 150px);
	height: auto;
	width: 300px;
	z-index: 12;
	background: #f2f2f2;
	outline: 1px solid rgba(0, 0, 0, 0.15);
	box-shadow: 5px 5px 0px rgba(0,0,0,0.10);
}

#panel_wrapper .purchase_modal.active,
#domain_wrapper .overlay.active {
	display: block;
}

#panel_wrapper #purchases,
#panel_wrapper #account-plan,
#panel_wrapper #account-domains {
	background: #f2f2f2;
	position: absolute;
	top: 0;
	margin-left: 400px;
	height: 100vh;
	width: 400px;
	z-index: 9999;
	pointer-events: auto;
	overflow-y: auto;
	padding-bottom: 30px;
}

#panel_wrapper #purchases {
	background: #eaf1fa;
	padding-bottom: 0;
}

#panel_wrapper #account-domains {
	padding-bottom: 60px;
}

#panel_wrapper #panel_content #close {
	position: absolute;
	top: 5px;
	text-align: center;
	right: 0px;
	font-size: 20px;
	font-weight: normal;
	padding: 0;
	width: 41px;
	height: 44px;
	font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;
	z-index: 999;
}

#panel_wrapper #processing .loading_animation {
	left: calc(50% - 53px);
	top: calc(50% - 75px);
}

#panel_wrapper #processing .loading_animation div {
	width: 100px;
	height: 100px;
}

.admin-wrapper #panel_wrapper .purchase_panel .text {
	outline: none;
}

.admin-wrapper #panel_wrapper .purchase_panel .text:before,
.admin-wrapper #panel_wrapper .purchase_panel .text:after {
	display: none;
}

.admin-wrapper #panel_wrapper .purchase_panel .text.error input[type="text"],
.admin-wrapper #panel_wrapper .purchase_panel .text.error input[type="text"]::-webkit-input-placeholder {
	color: #ff0033;
}

.admin-wrapper #panel_wrapper .purchase_panel .text.error input[type="text"]:focus,
.admin-wrapper #panel_wrapper .purchase_panel .text.error input[type="text"].changed {
	color: #000;
}

#panel_wrapper [data-validation-error] {
	display: none;
}

#panel_wrapper [data-validation-error].active {
	display: block;
}

#panel_wrapper .purchase_panel [data-cost-list] .row::after {
  content: " ";
  position: absolute;
  bottom: 0;
  z-index: 12;
  background-color: #ddd;
  left: 1.5rem;
  right: 1.5rem;
  height: 1px;
}

#panel_wrapper .purchase_panel [data-cost-list] .row:last-child::after {
	display: none;
}

.payment_window {
	position: fixed;
	top: 0;
	width: 400px;
	right: 0;
	bottom: 0;
	overflow-x: hidden;
	overflow-y: auto;
}

.panel_content, .purchase_wrapper {
	position: absolute;
	left: 0;
	width: 200%;
	bottom: 0;
	top: 0;
	z-index: 999;
	pointer-events: none;
}

#editor_masterview.translate {
	transform: translate(-100%, 0);
	-webkit-transform: translate(-100%, 0);
	z-index: 999;
	nav-index:1;
}

// this is to disable focus and tabindex events on elements outside
// of the slide panel when it is open
#editor_masterview.translate:not(.transitioning) > div:not(#panel_wrapper) * {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	display: none;
}

#editor_masterview.transitioning {
	transform: translate(-100%, 0) translateZ(0);
	-webkit-transform: translate(-100%, 0) translateZ(0);
	transition: transform 250ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
	-webkit-transition: -webkit-transform 250ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
}

#editor_masterview.closing {
	transition: transform 250ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
	transform: translate(0, 0) translateZ(0);
	-webkit-transition: -webkit-transform 250ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
	-webkit-transform: translate(0, 0) translateZ(0);
	z-index: 999;
}

.admin-wrapper .checkbox.checkbox-blue input:checked + label {
	background: #09f;
	color: #fff;
}

.noscroll{
	overflow: hidden !important;
	-ms-overflow-x: hidden !important;
	-ms-overflow-y: hidden !important;
}

/**
 * Mobile Orientation
 */

.mobile-orientation {
	position: fixed;
	bottom: 15px;
	left: 15px;
	z-index: 2;
}

.mobile-orientation-icon {
	background: url('/_gfx/rotate.svg') no-repeat center;
	background-size: 30px 30px;
	height: 30px;
	width: 30px;
	border: 0;
	cursor: pointer;
}


/* ////// Errors */
#account .error {
	z-index: 12;
}

#editor_masterview #login .close,
#editor_masterview #password_reset .close {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 9999;
	height: 32px;
	width: 32px;
	text-align: center;
	color: #999;
	font-size: 24px;
	line-height: 29px;
	font-weight: normal;
	font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;
}

#editor_masterview #login [data-validation-error] div {
	display: none;
}

#editor_masterview #login [data-validation-error].active div {
	display: block;
}

.logout_wrapper {
	max-width: 600px;
	position: absolute;
	top: 50%;
	left: 50%;
	text-align: center;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
}

#login_wrapper {
	max-width: 460px;
}

#login_wrapper .close {
	display: none;
}

/**
 * Simple Slideshow
 */

*[data-simple-slideshow] > * {
	cursor: pointer;
	display: none;
	position: relative;
	z-index: 1;
	-webkit-transition: opacity 250ms ease;
}

*[data-simple-slideshow].cursor-default > * {
	cursor: default;
}

*[data-simple-slideshow] > *[data-active] {
	display: block;
	z-index: 2;
}

*[data-preview-open],
*[data-simple-slideshow-prev],
*[data-simple-slideshow-next] {
	cursor: pointer;
}


div.design-preview-overlay {
	background: rgba(242, 242, 242, 0.8);
	cursor: pointer;
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 98;
}

div.design-demo-overlay {
	display: none;
	cursor: pointer;
	background: rgba(0,0,0,.8);
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100vw;
	position: fixed;
	height: 100vh;
	z-index: 99;
}

.admin-wrapper  .design-preview-range-ticks {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	    -ms-flex-wrap: wrap;
	        flex-wrap: wrap;

    -webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;

	pointer-events: none;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
}

.admin-wrapper  .design-preview-range-ticks > div {
	background: #ddd;
	height: 1rem;
	margin-top: 0.5rem;
	width: 1px;
}

.admin-wrapper  .design-preview-range-ticks > div:first-child,
.admin-wrapper  .design-preview-range-ticks > div:last-child {
	opacity: 0 !important;
}

.admin-wrapper .col.design-preview-range {
	min-height: 2rem;
	height: 2rem;
}

.admin-wrapper .design-preview-range input[type=range] {
	background: #fff;
}
.admin-wrapper .design-preview-range input[type="range"]::-webkit-slider-thumb {
  background: #09f;
}
.admin-wrapper .design-preview-range input[type=range]::-moz-range-track {
	background: #fff;
}
.admin-wrapper .design-preview {
	padding-bottom: 62.5%;
	position: relative;
}
.admin-wrapper .design-preview > * {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	height: 100%;
	width: 100%;
}

.admin-wrapper .design-preview-save {
	position: absolute;
	bottom: 1px;
	left: 0;
	right: 0;
	z-index: 0;
}

.admin-wrapper .design-preview-save.active {
	bottom: -4rem;
}

/**
 * Design Presets Browser
 */

.design-presets-browser {
	background: #1a1a1a;
	position: absolute;
	top: 0;
	margin-left: 100%;
	height: 100vh;
	width: 400px;
	z-index: 9999;
	pointer-events: auto;
	overflow-x: hidden;
}

.design-presets-browser-offset {
	left: 0;
}

.design-presets-browser-close {
	color: #fff;
	position: absolute;
	top: 5px;
	text-align: center;
	right: 0px;
	font-size: 1.3em;
	font-weight: normal;
	padding: 0;
	width: 41px;
	height: 44px;
	font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;
	z-index: 99;
}

/**
 * Backdrop
 */
li.plugin.col-half {
	width: calc(50% - 1px);
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 calc(50% - 1px);
      -ms-flex: 0 0 calc(50% - 1px);
          flex: 0 0 calc(50% - 1px);
}
li.plugin:nth-child(odd) {
	margin-right: 1px;
}
li.plugin:nth-child(even):after {
	height: 100%;
	position: absolute;
	width: 1px;
	background: #fff;
	top: 0;
	right: -1px;
	content: '';
}
li.plugin.active:nth-child(even):after {
	background: #09f;
}
li.plugin.active {
	background: #09f;
	color: white;
}
li.plugin.restricted .item-restricted * {
	fill: #e6e6e6;
}
li.plugin.restricted.active .item-restricted {
	opacity: .3;
}
li.plugin.restricted.active .item-restricted * {
	fill: #fff;
}
.admin-wrapper .group-vertical:not(.margin-none) > li.plugin:last-child {
	margin-bottom: 1px;
}


/*
 * Confirm Modal
 */
#confirm_modal {
	position: relative;
}

#confirm_modal .confirm-box {
    background: #fff;
    margin: -87px 0 0 -170px;
    position: fixed;
    top: 40%;
    left: 50%;
    height: 174px;
    width: 340px;
    z-index: 99999999;
    font-family: 'Nitti Grotesk', sans-serif;
    letter-spacing: 0;
    word-spacing: 0;
    font-weight: normal;
    text-decoration: none;
    line-height: 1.6;
    box-sizing: border-box;
    -moz-box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.1);
}

#confirm_modal .modal-overlay {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: none;
	background: rgba(0,0,0,.1);
	z-index: 99999;
}


/*Edit Widnow*/
#edit_window {
    position: fixed;
    top: 0px;
    bottom: 0px;
    right: 400px;
    left: 0px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
#edit_window .pad-y-medium + .pad-y-medium {
	padding-top: 0;
}
#edit_window .pad-y-medium:last-child {
	padding-bottom: 0;
}

/**
 * Generic sortable stuff
 */

ul[data-sortable] {
	position:  relative;
}