{ box-sizing: border-box; position: relative; }
body {  background: #F1F1F1; font-family: Futura,Trebuchet MS,Arial,sans-serif; -webkit-font-smoothing: antialiased!important; font-smoothing: antialiased; }
body.v3-1 .topstrip { position: fixed; }
select {background:transparent;}
hr.silent { border-top: none; }
hr { border-top: 1px solid rgba(255,255,255,0.2); margin:1em 0 !important;}
.flaticon { font-size: 16px; }

[ng-click],
[ng-really-click] { cursor: pointer; }

body.editor > .page { box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2) !important; min-height: 1056px; overflow-x: hidden !important; }
body .page.stripe-diagonal { overflow-y: hidden !important;  }

.bn-warning { display: none; width: 100%; height: 50px; background:#E85258; color: #fff; position: fixed; top: 0; left: 0; z-index: 99999; }
.bn-warning p { padding: 1em 3em;}
.bn-warning p span { padding-right: 1em;}
.bn-warning a { color: #fff; }
body.bn-show-warning { margin-top: 50px; position: relative; }
body.bn-show-warning .bn-warning { display: block; }
body.bn-show-warning .main-toolbar { top: 50px; }

.topstrip { background: #F4EED7; color: #2CA05A; padding: 24px 0; position: fixed; left: 0; right: 0; z-index: 1; }
.topstrip ul { margin: 0; padding: 0;  text-align: center; list-style: none; }
.topstrip  a {  color: #2Ca05A; }
.topstrip a:hover {  color: #333; text-decoration: none; }
.topstrip  li  a {  color: #2Ca05A;  text-transform: uppercase; font-size: 120%; margin-left: 1.5em; }
.topstrip  li  a.magnify { margin-left: .5em; color: #2c2f3d; transition: all ease .3s; }
.topstrip  li  a.magnify:hover { color: #2CA05A; }
.topstrip  li  a.magnify.zoomin { margin-left: 2em !important; }
.topstrip a.link-home { margin-left: 1em; }
.topstrip a.link-options { margin-right: 1em; }
.topstrip a.link-help { margin-right: 1em; }
.topstrip a.link-upgrade { margin-right: 1em; }

body.v3-1 .topstrip { margin: 0 0 0 0; padding: 0; background: transparent; position: absolute; top: 1em; left: 1em; z-index: 1; width: 300px; }
body.v3-1 .topstrip a { display: inline-block; padding-right: 1em; }

/* .page-wrap { padding: 20px; width: 856px; background: transparent; } */
/* .owrap.borders > .page-wrap { background: #fff; } */
.previewWrap { display: block; height: auto; width: 100%; margin-top: 30px; }
.owrap { min-height: 1056px; background: #fff; display: block; width: 816px; margin: 20px auto; display: block; -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.2); box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.2);}
.owrap.borders { border: 15px solid #fff; width: 846px; }
.beacon-loading{text-align: center;}
.page .background {  }
.page article { position: relative; z-index: 2; }

.main-toolbar {
  position: fixed; top: 0; left: 0; z-index: 1;
  width: 100%; background: #2c2F3D; color: #ccc; padding:10px;
  user-select: none;
}
.main-toolbar a { color: #FFF; }
.main-toolbar ul {}
.main-toolbar ul.pull-left{margin-left: 10px;}
.main-toolbar ul.pull-left li{margin-right: 10px;}
.main-toolbar ul.text { margin-left: 350px; }
.main-toolbar li { transition: all 0.30s ease-in-ease-out; padding-left: 0; padding-right: 0; font-size: 14px;}
.main-toolbar li:first-child {}
.main-toolbar li a{display: block; padding: 13px 5px;}
.main-toolbar li a:hover { color: #fc3; text-decoration: none; }
.main-toolbar ul.text li { }
.main-toolbar ul.text li:last-child { border-right: none; }
.main-toolbar .navbutton { font-size: 24px !important; margin-left: 0; padding: 0; }
.main-toolbar .save{color:#FF8185;}

#publish{background: #2ca05a; border-radius: 3px; padding: 13px 10px; border-bottom: 3px solid #278F50; color:#fff;}
#publish:hover{color:#ffcc33;}

/* .page { min-height: 60vh; margin-top: -55px; } */
.logo img { width: 100%; }
.tab-content { padding: 2em 0; }
.padding { padding: 0 1em; }
.sidebar { background: #2ca05a; color: #fff; position: fixed; overflow-y: auto; height: 100%; width: 440px; margin: -20px 0 0 0px; padding: 1em 0 5em 0;}
.sidebar a { color: #fff; }
body.builder .sidebar { background: #53676C; }
body.v3-1 .sidebar { margin-top: 63px; padding-bottom: 500px; }

.preview { margin-left: 440px; margin-top: 25px; border-radius: 5px;  border: none; border-radius: 5px; height: auto; display: block; }
body.v3-1 .preview { margin-top: 0px; }
.preview.pdf { width: 812px; } 
.preview.pdf .page { min-height: 1056px; }
.sidebar form.sideFormMain { display: block; padding-bottom: 10em; }

ul.contents-blocks { display: block; list-style-type: none; font-size: 120%; margin: 0; padding: 0; }
ul.contents-blocks li { padding: 10px; width: 100%; border-radius: 3px; background: rgba(0,0,0,0.1); margin-bottom: 5px; }
ul.contents-blocks li:hover { background: rgba(0,0,0,0.2); cursor: pointer; }


.sidebar h3 { color: #fff; }
.sidebar p { margin: 1em 0; }
.sidebar hr { background: transparent; }
.sidebar hr.silent { margin: 1em 0; }
.sidebar .clearfix { height: 2px; margin: 0; padding: 0; display: block; clear: both; }
.sidebar .nav-pages li  { font-size: 110%; }
.sidebar .colorscheme { width: 177px; }
.sidebar label { margin-bottom: 5px; }


.content-block { padding: 0em; background: rgba(0,0,0,0.1); margin-bottom: 1em; border-radius: 5px; }
.content-block h3 { font-size: 120%; padding-bottom: .5em;  border-bottom: 1px solid rgba(0,0,0,0.1); }
.content-block ul { list-style: none; padding-top: 1em; }
.content-block li { padding-left: 1em; padding-bottom: 1em; }
.content-block .strike { color: #fff; opacity: 1; }
.content-block { padding: 1em; background: rgba(0,0,0,0.1); margin-bottom: 1em; border-radius: 5px; }

/* .card * { box-sizing: border-box; } */
/* .card h2:hover { border: 1px dashed #f0f;  } */
/* .card .news_content:hover { border: 1px dashed #f0f;  } */

.preview-area {}


.previewWrap { display: block; height: auto; width: 100%; margin-top: 50px; padding-top: 50px; }



.modal-header{background: #2ca05a; border-top-left-radius: 5px; border-top-right-radius: 5px; color:#fff;}
.modal-header h3{color:#fff; font-size: 21px;}
.modal-header p{text-align: left;}
.modal-header span, .modal-header .close{display: block; margin-top: 5px; z-index: 1;}

.modal-header-white{background: #fff; border-top-left-radius: 5px; border-top-right-radius: 5px; color:#2ca05a;}
.modal-header-white h3{color:#2ca50a; font-size: 21px; padding: 10px; border-bottom: 1px solid #2ca50a; }
.modal-header-white p{text-align: left;}
.modal-header-white span, .modal-header-white .close{display: block; margin-top: 5px; z-index: 1;}


.modal-body { padding: 1em; }
.modal-body h1 { font-size: 160%; padding: 1em 0; }
.modal-body p{text-align: left; color:#666; font-size: 17px;}
.modal-body p:last-child{margin-bottom: 0;}
.modal-body .clearfix { display: block; clear: both; }
.modal-body .progress-bar { width: 0; }

.modal-content.dstyles{padding:0;}
.modal-header.dstyles h4{color:#2ca05a; font-size: 2em;}
.modal-header.dstyles p{font-size: 1.2em; text-align: left; }
.modal-body.dstyles ul.colors img{border:1px solid #ececec;}

.add-page-modal h4 { margin-bottom: 2em; }

.no-select { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

ul.nav-tabs { width: 440px; }
.nav-tabs li * { box-sizing: border-box; }
.nav-tabs li { width: 88px; }
.nav-tabs { border: none; margin: -1em 0 1em 0; border-radius: 0; position: fixed; z-index: 1; width: auto; display: inline-block; z-index: 1054; }
.nav-tabs li { text-align: center; border-right:1px solid rgba(0,0,0,0.16); border-bottom:1px solid rgba(0,0,0,0.1);}
.nav-tabs li:last-child{border-right: 0;}
/* .nav-tabs li:after { */
/* position: absolute; top: 0; right: -9px; */
/* z-index: 1; */
/* content: ' '; */
/* width: 0; */
/* height: 0; */
/* border-style: solid; */
/* border-width: 30px 0 30px 9px; */
/* border-color: transparent transparent transparent #2c2f3d; */
/*  */
/* } */

.nav-tabs li:after { display: none; }
/* .nav-tabs li:hover:after {   */
/* cursor: pointer; */
/* border-color: transparent transparent transparent #2ca05a; */
/* } */
/* .nav-tabs li.active:after {   */
/* cursor: pointer; */
/* border-color: transparent transparent transparent #2ca05a; */
/* } */
/* .nav-tabs li.active:hover:after {   */
/* cursor: pointer; */
/* border-color: transparent transparent transparent #fff; */
/* } */

/* .nav-tabs li.tab-4:after { content: ''; border: none;} */
/* .nav-tabs li { display: none; } */
.nav-tabs li { background:#289051; width: 20%; font-size: 95%; position: relative; }
.nav-tabs li:first-child { }
.nav-tabs li a { margin: 0; color: #FFF; padding: 20px 15px; }
.nav-tabs li a:hover { color: #FFCC33; background-color: #289051;}
.nav-tabs li.active,
.nav-tabs li.active a { background: #2ca05a; color: #FFCC33; border-bottom:1px solid #2ca05a;}
body.builder .nav-tabs li.active,
body.builder .nav-tabs li.active a { background: #53676C; color: #FFCC33; }

.nav-tabs li:first-child a:hover { color: #FFCC33; }
.tab-0.active:hover a  { background-color: #2CA05A !important; cursor: pointer; }
.nav-tabs > li > a { border: none; 
border-radius: 0; }
.nav-tabs li.active:hover a { border-color: transparent; }
.nav-tabs > li.active > a, 
.nav-tabs > li.active > a:hover, 
.nav-tabs > li.active > a:focus {border: none;}
.nav-tabs > li.active:first-child > a, 
.nav-tabs > li.active:first-child > a:hover, 
.nav-tabs > li.active:first-child > a:focus {
border-radius: 5px;
}
.nav-tabs > li.active > a:hover{background: #2ca05a; color:#ffcc33;}
body.builder .nav-tabs > li.active > a:hover{background: #53676C !important; color:#ffcc33 !important;}

.tab-pane { margin-top: 3em; }

.help { margin: 0 0 2em 0; padding: 1em; border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.1); font-size: 110%; }
.help { display: none; }


.nav-stacked > li + li { margin-top: 0; }
.nav-pages li {  font-size: 16px; width: 100%; display: block; clear: both;  position: relative; }
.nav-pages li a { border-radius: 0!important; border-bottom: 1px solid rgba(0,0,0,0.1);}
.nav-pages li a { margin: 0; text-indent: 0 !important; width: 100%; display: block; clear: both;  }
.nav-pages li span.page-title { display: block; width: 85%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-pages li.active a { background: transparent; color: #FFCC33; font-weight: normal;  }
.nav-pages li:hover a { background: rgba(0,0,0,0.1); }
.nav-pages li.active a { background: rgba(0,0,0,0.05); }
.nav-pages li.active:hover a { background: rgba(0,0,0,0.1); color: #FFCC33; }
.nav-pages span.icon-delete { color: rgba(0,0,0,0.2); position: absolute; top: .5em; right: 1em; }
.nav-pages span.icon-delete:hover { color: #c9302c; }
.nav-pages span.icon-duplicate{ color: rgba(0,0,0,0.2); position: absolute; top: .5em; right: 2em;  }
.nav-pages span.icon-duplicate:hover { color: rgba(0,0,0,0.7); }
.nav-pages span.icon-duplicate { margin-right: 10px; }

.news-list { margin: 2em 0; }
.nav-news li { padding: 0; font-size: 90%; }

.btn { font-size: 110%; border-radius: 5px; }
.btn:hover { color: #2ca05a; }
.btn-add { background: #ffcc33; color: #2c2f3d; margin-bottom: 1em; text-transform: uppercase; width: 100%; margin: 2em 0 0 1em; text-align: left; border-top-right-radius: 0; border-bottom-right-radius: 5px; }
.btn-dismiss { background: #ffcc33; color: #2c2f3d; }
.btn-beacon { background: #ffcc33; color: #2c2f3d; margin-bottom: 0em; }
.btn-focus { margin-top: 10px; color: #2c2f3d; background: #fff; border: 0; font-size: 90%; padding: 3px 1em; border-radius: 5px; }
.btn.selected { border: 1px solid #fc3; }

.font { width: 170px; display: inline-block; background-repeat: no-repeat; background-position: top left; text-align: center;  margin: 0 1px 10px 0; }
.font .thumb { width: 165px; height: 98px; margin-bottom: 5px; border: 1px solid #2ca05a; }
body.builder .font .thumb { border: 1px solid transparent; }
body.builder .font.active .thumb { border: 1px solid #fc3; }
.font.active .thumb { border: 1px solid #fc3; }

.colorscheme { display: inline-block; width: 180px; margin: 0 0px 16px 0; text-align: left; }
.colorscheme:nth-child(odd){margin-right: 18px;}
body.builder .colorscheme:nth-child(odd){margin-right: 12px;}
.colorscheme .thumb { display: block; width: 180px; height: 45px; margin-bottom: 5px; border: 1px solid transparent; }
.colorscheme.active .thumb { border: 1px solid #fc3; }

.bgcolor { height: 2em; width: 1em; display: inline-block; border: 2px solid #fff; }
.bgcolor:hover { border: 2px solid #666; }
.bgcolor.active { border: 2px solid #222; }

.theme-wrap { text-align: center; margin-bottom: 1em; min-height: 140px; font-size: 90%; }
.theme { border: 2px solid #2ca05a; margin-bottom: .4em;  font-weight: normal; }
body.builder .theme { border: 2px solid transparent; }
.theme-wrap.active .theme,
.theme-wrap.active .theme:hover { border: 2px solid #ffcc33; color: orange; }
.theme-wrap:nth-child(3n) {
clear: right;
}
.reorder { opacity: 0.3; }
.reorder:hover { cursor: move; }

p.toggle-menu { margin-bottom: 2em; font-size: 110%; }
p.toggle-menu a { color: #fff; padding: .3em .8em; border-radius: 4px; }
p.toggle-menu a.active { background: rgba(0,0,0,0.5); position: relative; }
p.toggle-menu a.active:after { position: absolute; bottom: -9px; left: 40%; content: ''; 
width: 0;
height: 0;
border-style: solid;
border-width: 10px 7px 0 7px;
border-color: rgba(0,0,0,0.5) transparent transparent transparent;
}

[data-ng-click]:hover,
[ng-click]:hover { cursor: pointer; }

[contenteditable] { padding:0 !important; position: relative; box-sizing: border-box; outline:none; }

[contenteditable]:hover,
[contenteditable].content-block-hover,
[contenteditable]:focus {
outline: 2px dashed aqua;
}

/* [contenteditable]:before{ content: " "; */
/*   position: absolute; */
/*   top: 1px; */
/*   left: 1px; */
/*   right: 1px; */
/*   bottom: 1px; */
/*   border: 1px solid transparent; */
/*   z-index:10; */
/* } */
/* [contenteditable]:hover:before{ border: 1px dashed white !important; } */
/* [contenteditable]:focus:before{ border: 1px dashed white !important;} */
/*  */
/* [contenteditable]:after{ content: " "; */
/*   position: absolute; */
/*   z-index: -1; */
/*   top: -1px; */
/*   left: -1px; */
/*   right: -1px; */
/*   bottom: -1px; */
/*   border: 1px solid transparent; */
/*   z-index:10; */
/* } */
/* [contenteditable]:hover:after { border: 1px dotted black !important; } */
/* [contenteditable]:focus:after { border: 1px dotted black !important;} */










/*FROM DENIS*/
/* Minor workaround for the stripe diagonal positioning, whereas
  the container would stick out on the right side. */
.page.article.stripe-diagonal article section .container { margin-left: -15px; }

/**
 * For the purposes of computing the pages, the layout of the elements
 * should not change when addition UI elements are added.
 * When Redactor adds image editing controls (Edit button and resize corner),
 * it wraps the image in a span#redactor-image-box.
 * This changes the layout, makes the content move around, and cause the
 * pagination to reflow the pages. To top it all, after a reflow, Redactor
 * does not recognize the UI controls to be interactive anymore,
 * as those are new DOM elements.
 * This section works around such cases, but the proper fix is to fix those styles
 * and ensure the images do not get any special styles that are different between
 * their raw version and the version inside a span#redactor-image-box. */
.page.article.stripe-diagonal img {
  /* In base.css:175 images have set display: block.
   * But the span#redactor-image-box is display: inline-block. */
  display: inline-block !important;

  /* In scary.css:40 images get a bottom margin.
   * But when an image is inside of span#redactor-image-box,
   * its margin does not collapse with the parent <p> margin-bottom. */
  margin-bottom: 0 !important;
}

[data-beacon-page] {
  background-color: transparent;
  padding: 30px 0 0 0;
  height: 1036px !important;
  overflow: hidden;

  /* Place for an absolutely-positioned grey separator */
  margin-bottom: 35px;
}

/* Grey separator between pages */
[data-beacon-page]::before {
  content: ' ';
  display: block;
  width: 980px !important;
  margin-left: -100px !important;
  /* Equal to margin-bottom on the page */
  height: 35px;
  background-color: #F1F1F1 !important;
  opacity: 1 !important;
  /* Equal to height + page padding */
  margin-top: -75px;
  position: absolute;
}
[data-beacon-page="1"] { padding-top: 0; }
[data-beacon-page="1"]::before { display: none; }
#redactor-image-editter, #redactor-image-resizer { display: none !important; } #redactor-image-box #redactor-image-editter, #redactor-image-box #redactor-image-resizer { display: block !important }
/*END FROM DENIS*/
#redactor-image-box { outline: 0; box-shadow: none; }
#redactor-image-box:before { border: 1px dashed black; }
#redactor-image-resizer { bottom: 0; right: 0; }
#redactor-image-editter { padding: 10px !important; }
#redactor-modal-button-delete { display: none; }

.preview { position: relative; padding-top: 20px;}
.controls { position: fixed; font-size: 130%; top: 75px; right: 0px; display: block;  margin: 0; z-index: 1000000;}
.controls a { display: inline-block; background: #2c2f3d; color: #fff; margin: 0; width: 50px; height: 50px; position: relative;  }
.controls a .flaticon { font-size: 26px; position: absolute; top: 8px; left: 8px; }
.controls a.left { border-right: 1px solid rgba(255,255,255,0.2); margin-right: -5px; }
.controls a:hover { cursor: pointer; background: #666; text-decoration: none; }

/* .magnify {  position: fixed; font-size: 130%; top: 120px; right: 0px; display: block;  margin: 0; z-index: 1000000; } */

.redactor-editor { padding: 0; font-size: inherit; line-height: inherit; font-family: inherit; }
.redactor-toolbar { box-shadow: none; background: transparent !important; }
.redactor-toolbar li a { color: #2c2f3d !important; }
.redactor-toolbar li a:hover { background: rgba(0,0,0,0.1); }
.redactor-editor, .redactor-box { background: transparent; overflow: hidden; border: none; }

.redactor-editor { color: #000;  padding: 5px 10px; }
/* @deprecated, redactor <10 */
.redactor_editor div, .redactor_editor p, .redactor_editor ul, .redactor_editor ol, .redactor_editor table, .redactor_editor dl, .redactor_editor blockquote, .redactor_editor pre {
olor: #000;
}

.page-toolbar  {}
.redactor-toolbar { background: #CCC; }
.redactor-toolbar li a{border-right: none; background: #DEDEDE; height: 60px; font-size: 100%; padding-top: 25px !important;  }
.redactor-toolbar.redactor-toolbar-external { border: none; }
/* .redactor-air li a, .redactor-toolbar li a.re-button-icon, .redactor-toolbar li a.re-imageupload, .redactor-toolbar li a.re-news, .redactor-toolbar li a.re-cta{padding:24px 15px 38px 15px;} */
.redactor-air li a .re-button-tooltip, .redactor-toolbar li a .re-button-tooltip{border-radius: 0;}
.redactor-air li a.re-button-icon, .redactor-toolbar li a.re-button-icon, .redactor-air li a, .redactor-toolbar li a{padding:16px 12px;}
#redactor-modal-box { z-index: 99999999;  }

.redactor_box { width: 100%; color: #000; }
.redactor_box a { color: #000; }
span#redactor-image-editter { padding: 5px; font-size: 120%; }


.edit-bar{width:100%; background: #DEDEDE; margin-top: 43px; height: 62px; position: fixed; z-index: 999;}
.doctrols{position: fixed; right:0;}
.doctrols li{font-size: 24px; padding: 0; float: left; list-style-type: none;}
.doctrols li a{display:block; padding: 19px 15px; color:rgba(0,0,0,0.5); border-left:1px solid rgba(0,0,0,0);}
.doctrols li a:hover{text-decoration: none; background: #ccc;}

.toolwrap {position: fixed; left:440px; margin-left: 0 !important; z-index: 999; }

.main_image { max-width: 100%; background: transparent; }
.form-group { margin-bottom: 1.5em; }
.form-group label { font-size: 18px; font-weight: normal; }
.form-group.color label { font-size: 14px; font-weight: normal; }
.form-control { border: none; border-radius: 0; color: #808080; font-size: 16px; }


img.thumbnail { border-radius: 0; margin: 1em 0 .5em 0; float: left; max-width: 150px; }
img.thumbnail.logo { border: none; background: transparent; }
.fadein { opacity: 0.5; transition: all 0.4s linear; }
.fadein:hover { opacity: 1;  }
.change-focus { margin: 1em 0 0 1em;  display: inline-block; }
.tooltip-inner { font-size: 120%; padding: .5em; }

.modal-content { background: #fff; }
.modal-header { background: #2CA05A; }

.modal-body .clearfix { height: 1px; margin: 0 0 10px 0; padding: 0; }

.modal-dialog { width: 800px; }
.modal-content { padding: 0; }
.modal-body, .modal-footer { background-color: #fff; border: 1px solid #fff; }
.modal-footer {
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
}
.modal-dialog.modal-lg { width: 98% !important; margin: 1em auto; }
.modal-dialog.modal-lg .modal-content { width: 98% !important; margin: 1em auto; }
.modal-content { box-shadow: none !important; border: none !important; }
.modal-content h3 { font-weight: normal; font-size: 26px; color: #fff; width: 90%; }
.modal-content h4 { font-weight: normal; font-size: 20px; color: #808080; }
.modal-content .form-group  { margin: 2em 0; padding: 22px 12px; }
.modal-content .form-group input { border: 1px solid #ccc; }
.modal-content .form-group input:focus { border: 1px solid #ccc;  }
.modal-content .modal-controls { margin-bottom: 3em; display: block; width: 100%;}
.modal-content a.control .flaticon { font-size: 26px; color: #b3b3b3; }
.modal-content a.control:hover { text-decoration: none; color: #2ca05a; }
.modal-content a.control:hover .flaticon { text-decoration: none; color: #2ca05a; }
.modal-content form { margin-bottom: 2em; }

.modal-dialog.modal-sm { background: transparent; width: 816px; margin: 1em auto; padding: 0;  }
.modal-dialog.modal-sm .modal-content { border: none; padding: 0; background: transparent; width: 816px; margin: 1em auto; }
.modal-dialog.modal-sm .modal-content a.close { color: #fff; opacity: 1; margin-bottom: 10px; }

.settings-modal { background: #53676C; height: 100vh; width: 100%; margin: 0; }
body.builder.settings .modal.fade { background: #53676C; }
.settings-modal p.lg { color: #fff; font-size: 130%; }
body.builder p.lg { font-size: 130%; }


.settings-modal .modal-header { background: #53676C; border-bottom: none; }
.settings-modal .modal-header .close {color: #fff; }
.settings-modal .modal-header h3 { color: #fc3; }
.settings-modal .modal-body { background: #53676C; color: #fff; }

.settings-modal .form-group { padding: 2px; margin: 0 0 2em 0; }
.settings-modal .form-group.pull-left { width: 40%; margin-right: 5px; }
.settings-modal li.dropdown a { background: #fff; color: #000; border-radius: 5px; width: 300px; }

.settings-modal a.remove-logo { display: block; margin-top: 1em; color: #fff; }

img.point-of-focus:hover { cursor: crosshair; }
.image-wrap { position: relative; }
.image-wrap .focus { position: absolute; top: -50%; left: -50%; width: 26px; height: 26px; background: #f00; border-radius: 100px; border: 2px solid #fff; opacity: 0.5; }

input.checkbox { width: 20px; float: left; margin: -3px .5em 0 0; }

/* delete page modal specific */
#page-delete .modal-footer .btn.btn-danger:hover{color:#333;}

/* add page modal specific */

#add-page-modal .modal-header h3.modal-title{margin-left: 35px;}
.add-page { padding: 20px 50px; border-radius: 5px; }
.add-page a { color: #333; }
/* .add-page h3 { font-weight: normal; font-size: 200%; } */
.add-page .step1 h3 , .add-page .step2 h3 { text-align: left; color:#666; font-size: 21px; }
.step2 { text-align: left; color:#666; font-size: 21px;  }
.add-page ul.page-types  { margin:20px 0 0 0; padding:0; display: inline-block; }
.add-page ul.page-types li { display: inline-block; }
.add-page ul.page-types li a { display: inline-block; text-align: center; width: 120px; margin: 0 40px 20px 0; color: #2CA05A; float: left;position: relative; }
.add-page ul.page-types li img { width: 130px; height: 120px; }
.add-page ul.page-types li a .description { position: absolute; top: 0; left: 0; width: 130px; height: 120px; opacity: 0; background: #2ca05a; color: #fff; transition: .2s linear all;  }
.add-page ul.page-types li a .description p { text-align: left; padding: 1em; }
.add-page ul.page-types li a:hover > .description { opacity: 1; }
.add-page ul.page-types li a span { display: inline-block; padding-top: .7em; height: 3em; }
.add-page form { padding: 0; }
.add-page button.loading {  background: #fff url(../i/loading.gif) 5px 50% no-repeat; color: #000;  padding-left: 50px;  }

.page-desc { float: right; margin-left: 2em; background: #fc3; padding: 1em; height: 120px; width: 300px; }

#add-page-modal .form-group{padding: 0;}
#add-page-modal .form-group{padding: 0;}
#add-page-modal .add-page button{font-size: 17px;}

.document-style { padding: 2em; }
.document-style li { width: 18.5%; margin: 0 1% 1em 0; border: 1px solid rgba(0,0,0,0.1); padding: 3px; }
.document-style.colors li { border-color: #fff; }
.document-style li.active { border-color: #ffcc33 !important; }
.document-style li b { display: block; clear: both; text-align: left; }
.modal-body p.use-theme { margin-left: 1.5em; display: block; }

.nav.style-cats { font-size: 150%; display: inline-block; clear: both;  margin-left: 1em; width: 100%;  }
.nav.style-cats li a { background-color: #eee; color: #000; z-index: 1; }
.nav.style-cats li.active a { background-color: #2CA05A; color: #fff; }
p a.active { color: yellow; }

.ui-notification{position:fixed;z-index:9999;top:-100px;right:10px;width:300px; cursor:pointer;-webkit-transition:all ease .5s;-o-transition:all ease .5s;transition:all ease .5s;color:#fff;background:#428bca;box-shadow:5px 5px 10px rgba(0,0,0,.3)}
.ui-notification.killed{-webkit-transition:opacity ease 1s;-o-transition:opacity ease 1s;transition:opacity ease 1s;opacity:0}
.ui-notification>h3{font-size:14px;font-weight:700;display:block;margin:10px 10px 0;padding:0 0 5px;text-align:left;border-bottom:1px solid rgba(255,255,255,.3)}
.ui-notification a{color:#fff}
.ui-notification a:hover{text-decoration:underline}
.ui-notification>.message{margin:10px}.ui-notification.warning{color:#fff;background:#f0ad4e}
.ui-notification.error{color:#fff;background:#d9534f}
.ui-notification.success{color:#fff;background:#5cb85c}
.ui-notification.info{color:#fff;background:#5bc0de}
.ui-notification:hover{opacity:.7}

.redactor-editor a { color: #15c; text-decoration: underline; }
.half { width: 50%; float: left;  }

.toggle-title { color: #000; }


.login-modal .modal-dialog { position: relative;  }
.login-modal .modal-dialog { margin-top: 80px; padding: 0; width: 400px; }
.login-modal .modal-content { background: #fc3; padding 0 !important; }
.login-modal .modal-body { padding 0; }
.login-modal .modal-header { border: none; }
.login-modal .modal-footer { border: none; padding-bottom: 3em; }
.login-modal .error { font-weight: bold; color: #c20; }
.login-modal .form { font-size: 80% !important; }
.login-modal .form-group { margin: 0 0 1em 0; padding: 0; }
.login-modal button { background: #333; color: #fff; border: #000; margin-bottom: 2em; font-size: 140%; }
.login-modal button:hover { background: #000; color: #fff; border: #000; }
.login-modal h4 { text-transform: uppercase; color: #000; }
.login-modal input { width: 90%; padding: 8px 5px; border-radius: 3px; border: none; color: #666; font-size: 90%; }
.login-modal hr { border-top: 1px solid #000; }
.login-modal a, .login-modal p a { color: #000; }

.share-modal .modal-dialog { position: relative;  }
.share-modal .modal-dialog .arrow { width: 30px; height: 30px; top: -15px; left: 45%; background: #fc3; display: block; position: absolute;   transform: rotate(45deg);}
.share-modal .modal-dialog { margin-top: 80px; padding: 0; width: 800px; }
.share-modal .modal-content { background: #fc3; padding 0 !important; }
.share-modal .modal-body { padding 0; }
.share-modal .modal-header { border: none; }
.share-modal .modal-footer { border: none; padding-bottom: 3em; }
.share-modal h4 { text-transform: uppercase; color: #000; }
.share-modal input { width: 90%; padding: 8px 5px; border-radius: 3px; border: none; color: #666; font-size: 90%; }
.share-modal hr { border-top: 1px solid #000; }
.share-modal a, .share-modal p a { color: #000; }

.styles-modal .modal-dialog {
width: 900px; margin: 1em auto;
}

ul.social { list-style: none; margin: 0; padding: 0; }
ul.social li { margin: 0; padding: 0; display: inline-block; }
ul.social li a { padding: 7px 6px; margin: 0 5px 10px 0; display: inline-block; width: 120px; background: #333; color: #fff; text-align: center; border-radius: 2px; }
ul.social li.twitter a { background: #00ccff; }
ul.social li.facebook a { background: #2c5aa0; }
ul.social li.linkedin a { background: #2a7fff; }
ul.social li.googleplus a { background: #333333; }

.background-settings { margin-top: 2em; display: block; }
.background-settings label { font-size: 120%; padding-left: 0.5em; font-weight: normal; }

input[type="radio"]:checked + label { color:#fc3; }

.palette { display: inline-block; clear: none; margin: 0 0 16px 0; position: relative; }
.palette .options { display: none; position: absolute; bottom: 0; right: 0; }
.palette:hover .options { display: block; }
.palette:nth-child(odd) { margin-right: 18px; }
.palette ul { list-style: none; margin: 0; padding: 0; display: block; float: left; border: 1px solid transparent; }
.palette.active ul { border: 1px solid #fc3; }
.palette ul li { display: inline-block; float: left; width: 45px; height: 45px; margin: 0; padding: 0; }
.form-group.color { position: relative; }

.font-size { font-size: 120%; margin-bottom:0.5em;}
.font-size .input-wrap { position: relative; display: inline-block; }
.font-size .input-wrap span { position: absolute; top: 3px; right: 10px; color: #999; }
.font-size input { color: #000; width: 60px; border: 3px solid #fff; }
.btn-palette { background-color: rgba(0,0,0,0.2); vertical-align: top; height: 45px; }
.btn-palette.creating-palette { background: #fff url(../i/loading.gif) 5px 50% no-repeat; color: #000;  padding-left: 50px; }
.btn-palette.creating-palette .glyphicon { display: none; }

.btn-font-size { color: #000; background: #fff; padding: 5px; border: none; }
.btn-change-font-size { border: none; padding: 5px 10px; background: rgba(0,0,0,0.2); font-weight: bold; }

.sp-block {  }
.sp-block label { clear: both; width: 100%; font-size: 90%; }
.sp-block.normal label { font-size: 130% !important; }
.sp-block .sp-replacer { clear: both; width: 100%; border: none; background: #fff; padding: 5px; border-radius: 3px; }
body.builder .sp-block .sp-replacer { width: 170px; }
.sp-block .sp-preview { width: 140px; border: none; }
.sp-block .sp-preview-inner { border: none; border-radius: 3px; }
.sp-container { border: 1px solid rgba(0,0,0,0.1); border-radius: 5px; background: #fff; }
.sp-choose { background: #fc3 !important; border: none !important; text-shadow: none !important; }

#jquery-colour-picker { width: 250px !important; }

.btn-save {}
.btn-save.saving-palette { background: #fff url(../i/loading.gif) 5px 50% no-repeat; padding-left: 50px; }

.font-custom { position: relative; width: 170px; display: inline-block; float: left; margin: 0 10px 20px 0; }
.font-custom .options { position: absolute; top: 1px; right: 1px; display: none; background: #000; padding: 3px; }
.font-custom:hover > .options { display: block; }
.font-preview { background: #fff; color: #000; position: relative; padding: 1.3em 1em; border: 1px solid transparent; }
.font-preview.active { border-color: #fc3;  }
.font-custom b { text-align: center; width: 100%; display: block; padding-top: .3em; font-weight: normal; }

.design-fonts { height: 1000px; }
.font-selector { display: block; }
.font-selector label { margin-top: 1em; }
.font-selector label:first-letter { text-transform: uppercase; }
.font-selector li { display: block; }
.font-selector li.dropdown a { background: #fff; color: #000; width: 350px; font-size: 110%; display: block; border-radius: 3px; position: relative; }
.font-selector li.dropdown a span.flaticon { position: absolute; right: 5px; top: 12px; font-size: 30px; opacity: 0.3; }
.font-selector li.dropdown li a { margin: 0; border-radius: 0; }
.font-selector li.dropdown li.active a { color: #2ca05a; }
.font-selector li.dropdown li a:hover { background: #ececec; color: #000; }


a.bg-position { display: block; }
a.bg-position.active { color: #fc3; }


ul.toc-toggle { padding-bottom: 2em; }
ul.toc-toggle li { margin-bottom: 1em; display: block; }
ul.toc-toggle a:hover { text-decoration: none; }


/* fixes issue with modal bg not appearing in bootstrap 3.3.1 */
html { height: 100%; }
body { min-height: 100%; }

.modal-backdrop { bottom: 0; min-height: 200vh; }
.modal-backdrop.fade.in { opacity: .7; }

.fader.ng-hide-add {
  opacity: 1.0;
  display: block !important;
  transition: opacity 1s;
}

.fader.ng-hide-add-active {
  opacity: 0;
}

/* http://codepen.io/MattIn4D/pen/LiKFC */
/* Absolute Center CSS Spinner */
.saving.inactive { display: none; }
.saving {
  position: fixed;
  z-index: 9999;
  height: 2em;
  width: 2em;
  overflow: show;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  color: #fff;
  font-size: 300%;
}

/* Transparent Overlay */
.saving:before {
  content: 'SAVING';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  padding: 1em 0 0 0;
  width: 100%;
  height: 100%;
  text-align: center;
  background-color: rgba(0,0,0,0.6);
  color: #fff;
}

/* :not(:required) hides these rules from IE9 and below */
.saving:not(:required) {
}

.saving:after {
  content: '';
  display: block;
  font-size: 10px;
  width: 1em;
  height: 1em;
  margin-top: 0;
  -webkit-animation: spinner 1500ms infinite linear;
  -moz-animation: spinner 1500ms infinite linear;
  -ms-animation: spinner 1500ms infinite linear;
  -o-animation: spinner 1500ms infinite linear;
  animation: spinner 1500ms infinite linear;
  border-radius: 0.5em;
  -webkit-box-shadow: rgba(255, 255, 255, 255.75) 1.5em 0 0 0, rgba(255, 255, 255, 0.75) 1.1em 1.1em 0 0, rgba(255, 255, 255, 0.75) 0 1.5em 0 0, rgba(255, 255, 255, 0.75) -1.1em 1.1em 0 0, rgba(255, 255, 255, 0.5) -1.5em 0 0 0, rgba(255, 255, 255, 0.5) -1.1em -1.1em 0 0, rgba(255, 255, 255, 0.75) 0 -1.5em 0 0, rgba(255, 255, 255, 0.75) 1.1em -1.1em 0 0;
  box-shadow: rgba(255, 255, 255, 255.75) 1.5em 0 0 0, rgba(255, 255, 255, 0.75) 1.1em 1.1em 0 0, rgba(255, 255, 255, 0.75) 0 1.5em 0 0, rgba(255, 255, 255, 0.75) -1.1em 1.1em 0 0, rgba(255, 255, 255, 0.5) -1.5em 0 0 0, rgba(255, 255, 255, 0.5) -1.1em -1.1em 0 0, rgba(255, 255, 255, 0.75) 0 -1.5em 0 0, rgba(255, 255, 255, 0.75) 1.1em -1.1em 0 0;
}

/* Animation */

@-webkit-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-o-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


/*  */

/* when hiding the thing */
.form-frag.ng-hide-add         { 
  /* -webkit-animation:0.1s fadeOut ease;  */
  /* animation:0.1s fadeOut ease;  */
}

/* when showing the thing */
.form-frag.ng-hide-remove      { 
  -webkit-animation:0.5s bounceInRight ease; 
  animation:0.5s bounceInRight ease; 
}

/* when hiding the thing */
.list-frag.ng-hide-add         { 
  /* -webkit-animation:0.1s fadeOut ease;  */
  /* animation:0.1s fadeOut ease;  */
}

/* when showing the thing */
.list-frag.ng-hide-remove      { 
  -webkit-animation:0.5s bounceInLeft ease; 
  animation:0.5s bounceInLeft ease; 
}