body,h1,h2,h3,h4,h5  { font-family: 'Lato', sans-serif; }
/*body { overflow-x: hidden;}*/
h1.page-header { font-size: 1.6875rem; }
a { border-bottom: dotted 1px #cccccc; padding-bottom: 2px; -webkit-transition: color 200ms ease-out; -moz-transition: color 200ms ease-out; transition: color 200ms ease-out; }
a:hover { border-bottom-color: #8dc63f; }
a.gray:not(.button) { color: #767676; }
a.gray:not(.button):hover { color: #2f353e; }
a.dark:not(.button) { color: #363D47; }
a.dark:not(.button):hover { color: #8dc63f; }
a.secondary:not(.button) { color: #59c1e4; border-bottom-color: #bee1f3; }
a.secondary:not(.button):hover { color: #23acda; border-bottom-color: #59c1e4; }
a.orange:not(.button) { color: #fa6900 !important; }
a.orange:not(.button):hover { color: #eb6300 !important; }
a.white:not(.button) { color: #ffffff; }
a.white:not(.button):hover { color: #dddddd; }
a.inherit { color: inherit; }
a.icon-only { text-decoration: none; border: none; line-height: inherit; padding: .1em 0; font-size: 1.5em; vertical-align: middle; }
a.icon-only.tiny { font-size: 1rem; }
a.icon-only.small { font-size: 1.25rem; }
a.icon-only.large { font-size: 1.75rem; }
a.icon-only.xlarge { font-size: 2rem; }
button.icon-only { background: none; border: none; }
a.border { padding: 1.25rem; display: inline-block; border: solid 3px rgba(0,0,0,.1); -webkit-transition: border-color 200ms ease-out; -moz-transition: border-color 200ms ease-out; transition: border-color 200ms ease-out; }
a.border:hover { border-color: rgba(0,0,0,.2); }
a>img.border { -webkit-transition: border-color 200ms ease-out; -moz-transition: border-color 200ms ease-out; transition: border-color 200ms ease-out; }
a:hover>img.border { border-color: rgba(0,0,0,.2); }

.supdep-status { border: solid 1px #dddddd; padding: .5em 1em; }
.supdep-status>h5 { border-bottom: solid 1px #ddd; }
/*#top-banner { background-color: #E3F1CF; padding: .75em 0.9375em 1.25em 0.9375em; width: 100%; border-bottom: solid 1px #A0C46D; opacity: 0.95; display: none; }*/
#top-banner { background: rgba(0,0,0,0.85); font-size:1.25em; padding: .75em 0.9375em 1.25em 0.9375em; width: 100%; border-bottom: solid 1px #A0C46D; }
#top-banner.sticky { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; }
#top-banner.simple { background: rgba(0,0,0,0.85); border:none; padding: .75em 0.9375em; opacity: 1; color: #ffffff; }
#top-banner.simple a { color: #ffffff; text-decoration: none; border: none; }
#top-banner.simple a:hover { color: #ffffff; text-decoration: underline; }
.topmenu {  }
.topmenu>ul { margin-bottom: 0; line-height: 2rem; }
.topmenu a.active { font-weight: bold; color: #ffffff; }
.topmenu a { border: none; padding: 0; font-size: 0.95rem;}
.topmenu a:hover { color: #ffffff; }

.topmenu .home-icon { background: url('/img/home-white.png') left center no-repeat; width: 17px; height: 16px; }
.topmenu .login { background-color: rgba(255,255,255,.05); color: #8dc63f !important; font-weight: bold; }
.topmenu .login:hover { color: #ffffff !important; }

/*#header { padding: 3em 0; background-color: #2f353e; position: relative; }*/

#header-bg { position: fixed; top: 0; left: 0; right: 0; height: 0; overflow: hidden; z-index: -1; background-color: #2F353E; }
#header-bgl { position: absolute; height: 200%; background: rgba(39,44,53, .4); width: 200%; -webkit-transform: rotate(35deg); transform: rotate(35deg); left: -80%; top: 25%; /*mix-blend-mode: multiply;*/ }
#header-bgr { position: absolute; height: 200%; background: rgba(41,47,53,.25); width: 200%; -webkit-transform: rotate(-32deg); transform: rotate(-32deg); right: -82%; top: 15%; /*mix-blend-mode: multiply;*/ }
#header-bgb { position: absolute; width: 100%; height: 100%; bottom: -8%; background: url('/img/graph-bg.png') bottom center no-repeat; }
#header { padding: 1.5rem 0 2em 0; background-color: #2F353E; position: relative; }
.top-icons > a { padding: .56571em !important; }
.top-icons > a:not(:last-child) { margin-right: .75rem; }
#header-overlay { width: 100%; height:5px; background-color: rgba(255,255,255,.15); position:absolute; left: 0; bottom:0; }
#frontpage-callout { 
	width: 100%;
    background-color: #ddd;
    border-bottom: solid 1px #ccc;
    font-weight: 300;
    text-align: center;
    font-size: 1.25em;
    text-transform: uppercase;
    padding: .625em;
}
#frontpage-callout.sticky { position: fixed; top: 0; left: 0; z-index: 10000; }
#frontpage-callout a { color: rgba(235, 99, 0, 1); border-bottom: solid 1px; }
#frontpage-callout a:hover { color: rgba(235, 99, 0, .65); }
#header-page { padding: 1.5rem 0; border-bottom: solid 1px #eeeeee; }
#footer { padding: 5em 0; color: #666666; background-color: #eeeeee; border-top: solid 10px #dddddd; }
#footer a { color: #666666; border: none; }
#footer a:hover { color: #2f353e; }
.footer-heading { color: #666666; font-size: 0.875rem; }
.logo-small { font-weight: 900; color: #666666; }
#logo { color: #ffffff; font-size: 1.75em; font-weight: 900; line-height: 1; float: left; margin: 0; }
#logo a { color: inherit; border: none; }
#header-page #logo { color: inherit; }
#frontnav { padding: 0; }
#frontnav.fixed { background-color: #2f353e; border-bottom: solid 2px #2B3139; }
.front-main-wrapper { background-color: #ffffff; }
#subnav { display: none; padding: 1.5em 0; background-color: #2f353e; }
/*#subnav dd { text-transform: uppercase; }*/
#subnav dd a { color: #aaaaaa; border: none; }
#subnav dd a:hover { color: #ffffff; }
#subnav dd.active a { color: #ffffff; }
#subnav dd.active a:hover { background: #8dc63f; }
#menu-toggle { font-size: 1.75rem; float: left; margin-right: 0.9375rem; line-height: 1; }

.inline-input { display: inline; width: auto; }
.white-text { color: #ffffff; }
.green-text { color: #8dc63f !important; }
.orange-text { color: #fa6900 !important; }
.blue-text { color: #59c1e4; }
.dark-text { color: #2f353e !important; }
.gray-text { color: #767676; }
.gray-text2 { color: #aaaaaa; }

.dark-bg { background-color: #2f353e; }
.gray-bg { background-color: #eeeeee; }
.red-bg { background-color: #F97D75; }
.red-bg-darker { background-color: #ED6E64; }
.lightblue-bg { background-color: #59c1e4; }
.white-bg { background-color: #ffffff;}

.gutter-top { margin-top: 1em; }
.gutter-left { margin-left: 1em; }
.gutter-right { margin-right: 1em; }
.gutter-bottom { margin-bottom: 1em !important; }
.gutter-bottom-half { margin-bottom: .5em; }
.padding-2em { padding: 2em; }
.padding-3em { padding: 3em; }
.padding-1em-v { padding-top: 1em; padding-bottom: 1em; }
.padding-2em-v { padding-top: 2em; padding-bottom: 2em; }
.padding-3em-h { padding-left: 3em; padding-right: 3em; }
.padding-2em-h { padding-left: 2em; padding-right: 2em; }
.padding-top-1em { padding-top: 1em; }
.padding-top-2em { padding-top: 2em; }
.padding-top-3em { padding-top: 3em; }
.padding-right-1em { padding-right: 1em; }
.padding-right-3em { padding-right: 3em; }
.padding-left-2em { padding-left: 2em; }
.padding-left-4em { padding-left: 4em; }
.padding-bottom-2em { padding-bottom: 2em; }
.padding-bottom-3em { padding-bottom: 3em; }
.padding-top-4em { padding-top: 4em; }
.padding-top-5em { padding-top: 2.5em; }
.padding-bottom-5em { padding-bottom: 5em; }
.vmiddle { vertical-align: middle; }
div.radius { border-radius: 3px; }
.larger { font-size: 115%; }
.smaller { font-size: .85em; }
.light { font-weight: 300; }
.bold { font-weight: bold; }
.semibold { font-weight: 500; }
.extrabold { font-weight: 900; }
.strike { text-decoration: line-through; }
.border-light { border: solid 1px #eeeeee; }
.border-right { border-right: solid 1px #eeeeee; }
.underline { text-decoration: underline; }
.underline2 { border-bottom: solid 2px; }
.middle { vertical-align: middle; }
.horizontal-section { padding: 2.5em 0; }
.horizontal-section.border { border-top: solid 1px #eeeeee; border-bottom: solid 1px #eeeeee; }
/*.horizontal-section.prodgroups { border-bottom: solid 3px #eeeeee; background-color: #f5f5f5; }*/
.prodgroups { position: relative; }
.prodgroups #header-bg { height: 100%; 	position: absolute; }
img.border { border: solid 3px rgba(0,0,0,.1); }
img.fold { border: solid 6px #dddddd; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom: none; }
img.radius { border-radius: 6px; }
.callout.small { width: 150px; height: 150px; margin: 0 auto 2em; }
.callout.small span { margin-top: 1.15em; color: #7aad33; line-height: 1.3em; text-align: center; }

.horizontal-section.gray { background-color: #f5f5f5; }
.horizontal-section.gray2 { background-color: #eeeeee; }

.features-block li { text-align: center; }
.features-block li h4 { font-weight: bold; }

ul.gray-square { list-style: none; }
ul.gray-square li { padding-left: 25px; background: url('/img/gray-ul-square.png') 5px center no-repeat; }
ul.check { list-style: none; margin-left: 0; }
ul.check li {
    background: url('/img/checkmark-listicon.png') left 5px no-repeat;
    padding-left: 30px !important;
    line-height: 30px;
}
ul.check.less-margin li { padding-bottom: 1rem; }
ul.arrow-circle { list-style: none; margin-left: 0; }
ul.arrow-circle.center-bg li { background-position: left center; }
ul.arrow-circle.less-margin li { margin-bottom: 1rem; }
ul.arrow-circle li {
    background: url('/img/arrow-circle-right-24.png') 0 0 no-repeat;
    padding-left: 2.5em !important;
    margin-bottom: 2rem;
    padding-bottom: 0;
}
ul.arrow-circle.green li {
    background: url('/img/arrow-circle-right-24-green.png') 0 0 no-repeat;
}

ul.arrow-circle.cols li { background-position: 0 3px; }
ul.spacing li { padding-bottom: .5em; }
ol.spacing li { padding-bottom: .5em; }
.header.icon>.icon { display: table-cell; opacity: 1; font-size: 1.5em; vertical-align: middle; padding-right: .5rem; }
.header.icon>.icon>img { width: 1.5em; }
.header.icon>.content { padding-left: .5rem; display: table-cell; vertical-align: middle; }
div.frame, img.frame { padding: 1em; border: solid 1px #eeeeee; }

#cp-screenshots { margin-bottom: 0.5em; background-color: #ffffff; padding: 1em; }

.fancybox-close { border: none; }
.slick-dots { margin-left: -1em; }
.slick-slide a.fancybox { display: block; border: none; }

.panel.white { background-color: #ffffff; border: solid 1px #d8d8d8; }
.panel.secondary { background-color: #323742; border-color: #222222; }
.panel.secondary * { color: #ffffff; }
.panel.lightblue { background-color: #f8fdfe; border-color: #bee1f3; }
.panel-label {
	font-size: 1.15em;
}

button.gradient, .button.gradient {
	background: #8dc63f;
	background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#8dc63f),color-stop(100%,#6eaf0e));
	background: -webkit-linear-gradient(top,#8dc63f 0,#6eaf0e 100%);
	background: linear-gradient(to bottom,#8dc63f 0,#6eaf0e 100%);
}
button.gradient:hover, 
button.gradient:focus,
.button.gradient:hover,
.button.gradient:focus {
	background: linear-gradient(to bottom,#7cbc27 0,#62a30c 100%);
	background: #7cbc27;
	background: -moz-linear-gradient(top,#7cbc27 0,#62a30c 100%);
	background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#7cbc27),color-stop(100%,#62a30c));
	background: -webkit-linear-gradient(top,#7cbc27 0,#62a30c 100%);
}

button.red,.button.red { background-color: #ED6E64; }
button.red:hover,
button.red:focus,
.button.red:hover,
.button.red:focus { background-color: #F97D75; }

button.dark,.button.dark { background-color: #363D47; }
button.dark:hover,
button.dark:focus,
.button.dark:hover,
.button.dark:focus { background-color: #222222; }

button.gray,.button.gray { background-color: #dddddd; color: #666666; }
button.gray:hover,
button.gray:focus,
.button.gray:hover,
.button.gray:focus { background-color: #cccccc; color: #555555; }

button.simple,.button.simple { background: transparent; border: solid 1px #cccccc; color: #666666; }
button.simple:hover,
button.simple:focus,
.button.simple:hover,
.button.simple:focus,
button.simple.active,
.button.simple:active,
.button.simple.active { border-color: #8dc63f; color: #2f353e; }

button.white,.button.white { background-color: #ffffff; color: #2f353e; }
button.white:hover,
button.white:focus,
.button.white:hover,
.button.white:focus { background-color: #dddddd; }

button.orange,.button.orange { background-color: #fa6900; }
button.orange:hover,
button.orange:focus,
.button.orange:hover,
.button.orange:focus { background-color: #CC5500; }

button.lightdark,.button.lightdark { background-color: #49515E; }
button.lightdark:hover,
button.lightdark:focus,
.button.lightdark:hover,
.button.lightdark:focus { background-color: #596372; }

.button.signup { background-color: rgba(0,0,0,.3); font-family: 'Lato', sans-serif; font-weight: 300; color: #8dc63f; }
.button.signup:active,
.button.signup:focus,
.button.signup:hover { color: #8dc63f; }

.button.signup2 { background-color: rgba(0,0,0,.3); font-family: 'Lato', sans-serif; font-weight: 300; color: #ffffff; }
.button.signup2:active,
.button.signup2:focus,
.button.signup2:hover { color: #fa6900; border-color: #fa6900; }

[data-notifications] { position: relative; }
[data-notifications]:after {
	content: attr(data-notifications);
	position: absolute;
	background: #fa6900;
	border-radius: 50%;
	display: inline-block;
	color: #ffffff;
	width: 20px;
	height: 20px;
	padding-top: 3px;
	font-weight: bold;
	right: -10px;
	top: -10px;
	font-size: 0.6875rem;
	border: solid 1px #efefef;
}
.notifications-blue[data-notifications]:after { background: #59c1e4; }
.notifications-dark[data-notifications]:after { background: #2f353e; }
.notifications-orange[data-notifications]:after { background: #fa6900; }
.notifications-green[data-notifications]:after { background: #8dc63f; }

.textbox { font-size: 1rem !important; }
.textbox.xtiny { font-size: 0.75rem; }
.textbox.tiny { font-size: 0.8125rem; }
.textbox.small { font-size: 0.875rem; }
.textbox.large { font-size: 1.125rem; }
.textbox.xlarge { font-size: 1.25rem; }
.textbox>input,.textbox>select,.textbox>textarea { font-size: inherit; height: auto; padding: .635em; }
.textbox>select { padding-top: .6em; padding-bottom: .55em; }
.icon.textbox { position: relative; }
.icon.textbox>i { position: absolute; left: .635em; top: 50%; margin-top: -.5em; font-size: 1.5em; line-height: 1; }
.icon.textbox.onright>i { right: .635em; left: auto; }
.icon.textbox>i>img { width: 1em; vertical-align: top; }
.icon.textbox>input { padding-left: 2.635em; }
.icon.textbox.onright>input { padding-left: .635em; padding-right: 2.635em; }
.icon.textbox.opacity>i { opacity: .2; }
.textbox>.clear-btn { cursor: pointer; opacity: .2 !important; left: auto !important; right: .635em; transition: opacity .2s ease; }
.textbox>.clear-btn:hover { opacity: .5 !important; }

.text-separator { border-right: solid 1px #ddd; margin: 0 1em; }
#signupbtn { border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; transition: padding .2s ease; }
#signupbtn:hover { padding-top: 1.5em; }
#login-btn { border-top: none; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; transition: padding .2s ease; }
#login-btn:hover { padding-top: 1.25em; }
#flyout-content {
	width: 100%;
	padding: 3em;
	position: fixed;
	left: -110%;
	bottom: 0;
	top: 0;
	right: auto;
	box-shadow: rgb(102, 102, 102) 1px 0px 15px;
	z-index: 10000;
	display: block;
	background: #ffffff;
	text-align: center;
	overflow-y: auto;
}
#flyout-content .header { font-family: 'Lato', sans-serif; font-size: 1.6875rem; margin-top: 0.2rem; margin-bottom: 0.5rem; line-height: 1.4; }
#flyout-content .textbox>i { opacity: .2; }
#flyout-content .flyout-hide { position: absolute; right: 0; top: 0; }
#flyout-overlay { display:none; }
.pci-requirements { border: none; }
.pci-requirements th { padding: 1rem 4rem; }
.pci-requirements td { padding: 3rem 4rem; font-size: 1rem; background: none; line-height: 1.6; }
.pci-requirements td:first-child { background-color: #eeeeee; position: relative; }
.pci-requirements td h5 { color: #8dc63f; }
.pci-requirements td:first-child:after { 
	content: ' ';
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-left-color: #eee;
	position: absolute;
	margin-top: -20px;
	top: 50%;
	right: -40px;
}

.price-table { text-align: center; background-color: #eeeeee; border-right: solid 1px #f9f9f9; margin: 1rem 0; }
.price-table > .plan-header { text-align: center; padding: 2rem 0; position: relative; }
.price-table .plan-title { margin-bottom: 1em; font-weight: bold; }
.price-table .plan-price { font-size: 2.5rem; line-height: 0.65em; font-weight: bold; }
.price-table .plan-price.orange { color: #fa6900; }
.price-table .plan-price > small { font-size: 1.15rem; }
.price-table .plan-desc { font-style: italic; margin-top: 1rem; padding: 0 0.75rem; font-size: 0.95rem; }
.price-table .plan-features { list-style-type: none; margin: 0 0 2rem 0; }
.price-table .plan-features li { padding: 0.5rem 0; }
.price-table .plan-features li:nth-child(odd) { background-color: #dddddd; }
.price-table .plan-cta { padding-bottom: 2rem; }
.price-table .plan-cta a { font-weight: bold; text-transform: uppercase; }
.price-table.highlighted { background-color: #8dc63f; }
.price-table.highlighted .plan-title,.price-table.highlighted .plan-price { color: #ffffff; }
.price-table.highlighted .plan-features li { color: #ffffff; }
.price-table.highlighted .plan-features li:nth-child(odd) { background-color: #7aad33; }
.price-table.highlighted .plan-tag { position: absolute; text-transform: uppercase; width: 100%; font-weight: bold; font-style: italic; left: 0; font-size: 0.875rem; text-align: center; background: #99D841; padding: 0.125rem 0; top: 0; }
.price-table.highlighted.dark { background-color: #363D47; }
.price-table.highlighted.dark .plan-desc { color: #ffffff; }
.price-table.highlighted.dark .plan-features li:nth-child(odd) { background-color: #2f353e; }
.price-table.highlighted.dark .plan-tag { background: #2f353e; color: #fa6900; }

.img-desc { font-style: italic; margin-top: 15px; display: block; text-align: center; color: #666666; }

.hidden { display: none; }

.medium-input { height: 2.3125em !important; font-size: 1.15em !important; line-height: 2.3125em !important; }
.large-input { height: 2.3125em !important; font-size: 1.5em !important; line-height: 2.3125em !important; }

.big-grid li>div, .small-grid li>div { text-align: center; }
.big-grid li>div { padding: 3em 2em; background-color: #eeeeee; }
.big-grid li>div:hover { background-color: #eeeeee; }
.small-grid li:nth-of-type(3n+2) { border-left: solid 1px #eeeeee; border-right: solid 1px #eeeeee; }
.small-grid li { border-bottom: solid 1px #eeeeee; }
.small-grid li>div { padding: 3em 3em; }
.big-grid li .icon, .small-grid li .icon { margin-bottom: 1.5em; }

.big-grid li .button,.small-grid li .button { margin: 0; }
.front-services li>div { padding: 6.5em 3em 3em; background-color: #eeeeee; text-align: center; position: relative; }
/*.front-services li>div>i { font-size: 4.5em; line-height: 1.5em; }*/
.front-services li>div>i {
  font-size: 5em;
  line-height: 1.5em;
  position: absolute;
  -webkit-transform: scale(.9);
  transform: scale(.9);
  width: 4em;
  left: 50%;
  -webkit-transition: transform .2s ease;
  transition: transform .2s ease;
  top: 1rem;
  margin-left: -2em;
}
.front-services li>div:hover>i { -webkit-transform: scale(1); transform: scale(1); }
.front-services li>div .button { margin-top: 1em; }
.front-services-below { background-color: #eeeeee; padding: 1em; text-align: center; font-style: italic; }

/*.circle-icon { background-color: #2f353e; border-radius: 50%; padding: 17px; display: inline-block; width: 75px; height: 75px; }*/
.circle-icon { display: inline-block; padding-top: .25em; text-align: center; width: 1.75em; height: 1.75em; line-height: 1; border-radius: 50%; background: #2f353e; border-color: #2f353e; color: #ffffff; font-size: 3.25em; }
.circle-icon.outline { /*background-color: transparent;*/ color: inherit; border-width: 1px; border-style: solid; }
.circle-icon>i { line-height: 1; vertical-align: middle; }
.circle-icon>img { width: 1em; }
.circle-icon.large { font-size: 3.75em; /*width: 100px; height: 100px; padding: 22px;*/ }
.circle-icon.expand { width: auto; height: auto; padding: 50px; }
.circle-icon.orange { background-color: #fa6900; border-color: #fa6900; }
.circle-icon.green { background-color: #8dc63f; border-color: #8dc63f; }
.circle-icon.blue { background-color: #59c1e4; border-color: #59c1e4; }
.circle-icon.dark { background-color: #363D47; border-color: #363D47; }
.circle-icon.red { background-color: #ED6E64; border-color: #ED6E64; }
.circle-icon.gray { background-color: #eeeeee; border-color: #eeeeee; color: #2f353e; }
i[class^="fi-"].green { color: #8dc63f; }
.noborder { border: none !important; }
label.required::after { content: " *"; color: #C82000; }

blockquote.testimonial { font-size: 1.425rem; padding: 0.5625rem 1.25rem 0.5625rem 2rem; color: #2f353e; font-style: italic; font-weight: 300; }
blockquote.testimonial.cite { margin-top: 1rem; }
blockquote.testimonial .cite-link { font-weight: bold; font-style: normal; font-size: 1.25em; }
blockquote.testimonial cite { margin-top: 1rem; }
blockquote.testimonial cite:before { content: ''; }
#testimonials .slick-prev { left: -999px; width: inherit; height: inherit; }
#testimonials .slick-next { left: -999px; width: inherit; height: inherit; }
#testimonials .slick-prev:before, #testimonials .slick-next:before { color: #aaaaaa; font-size: 50px;  }
#testimonials .slick-dots { bottom: -2rem; margin: 0; }
#testimonials.slick-slider { margin-bottom: 4rem; }
#testimonials .slick-dots li button:before { font-size: 15px; }
.dimmed { opacity: .5; }
.testimonial-img { border-radius: 50%; border: solid 5px #cdcdcd; margin: 10px auto; max-width: 175px; }
.nomargin { margin: 0 !important; }
.disabled { cursor: not-allowed !important; color: #767676; }
.faq-category { margin-bottom: 1rem; color: #8dc63f; }
.faq dt { margin-bottom: 1rem; }
.faq dd div:not(.active) { display: none; }
.faq dd { margin-bottom: 1rem; }
.faq dt a { font-weight: normal; font-size: 1.05rem; color: #2f353e; }
.faq dt a.active { font-weight: bold; }

.features li { text-align: center; padding: 1rem 2rem; }
.features li>.icon { line-height: 1rem; margin-bottom: .5rem; font-size: 4rem; }
.features.orange li>.icon { color: #fa6900; }
.features.orange-alt li:nth-child(odd)>.icon { color: #fa6900; }
.features.green li>.icon { color: #8dc63f; }
.features.green-alt li:nth-child(odd)>.icon { color: #8dc63f; }
.features li > h4 { font-weight: bold; }
.features p { margin: 0; }
.full-width { max-width: 100%; width: 100%; }
.max-width-550px { max-width: 550px; }

.wait * { cursor: wait !important; }
.inline { display: inline-block; }
.force-inline { display: inline !important; }

table .headerSortasc {
    background-color: #e5e5e5;
    background-image:url('/img/sortasc.png');
    background-repeat:no-repeat;
    background-position:95% 50%;
}

table .headerSortdesc {
    background-color: #e5e5e5;
    background-image:url('/img/sortdesc.png');
    background-repeat:no-repeat;
    background-position:95% 50%;
}

table.extra-padding thead tr th, table.extra-padding thead tr td { padding: 0.5rem 1.225rem 0.625rem; }
table.extra-padding tr th, table.extra-padding tr td { padding: 0.8625rem 1.225rem; }

.caret-right:after { 
	content: ' ';
	width: 0;
	height: 0;
	border: 5px solid transparent;
	border-left-color: inherit;
	position: relative;
	top: 50%;
	margin-top: 6px;
	float: right;
}

ul.dense li { padding-bottom: 0; }

/* Client area */

#clientarea-topbar { width: 100%; height: 95px; background: #262B33; background: rgba(0,0,0,0.2); }
#clientarea-topbar.fixed { background: rgba(0,0,0,0.9);}
#clientarea-topbar .button { margin: 0; }
#clientarea-topbar .headerborder { border-bottom: solid 5px rgba(0,0,0,0.1); }
#clientarea-topbar-inner { max-width: 1400px; }
#clientarea-wrapper { position: relative; top: 50px; max-width: 1400px; box-shadow: 0 0 8px 3px #262B33; }
#header_logoarea #logo { font-size: 1.75em; height: 95px; line-height: 95px; padding-left: 1.5rem; margin: 0; }
#header_leftarea { float: left; height: 95px; }
#header_rightarea { float: right; height: 95px; line-height: 95px; }
#header_leftarea >* { padding-right: 10px; }
#header_leftarea >*,#header_rightarea >* { height: 100%; }
#header_rightarea a { border: none; }
#clientarea-body { position: relative; } /* height:100% for scrolling only maincontent, min-height:100% for full scroll; */
#clientarea-main { padding-left: 50px; padding-bottom: 30px; background-color: #f9f9f9; min-height: 700px; position: relative; }
#clientarea-main h2 { font-size: 1.325rem; }
/*#clientarea-navsection { background-color: #2f353e; overflow-y: auto; height: inherit; }
#clientarea-navsection .side-nav li { margin: 0; }
#clientarea-navsection .side-nav li a { color: #cccccc; border: none; padding: 0 1.5rem; height: 45px; line-height: 45px; }
#clientarea-navsection .toggle-submenu:after { content: ' '; width:0; height:0; border: 5px solid transparent; border-top-color: inherit; position: relative; top: 50%; margin-top: -2px; float: right; }
#clientarea-navsection .toggle-submenu.open:after { border-top-color: transparent; border-bottom-color: #999999; margin-top: -8px; }
#clientarea-navsection .side-nav li a:hover,
#clientarea-navsection .toggle-submenu.open { background: #23272E; color: #ffffff; }
#clientarea-navsection .side-nav li a.active { border-left: solid 3px #8dc63f; }
#clientarea-navsection .side-nav li.divider { border-top-color: #23272E; box-shadow: 0 1px #444; -webkit-box-shadow: 0 1px #444; }
#clientarea-navsection .submenu { display: none; background: #2B3139; }
#clientarea-navsection .submenu.open { display: block; }*/
.side-nav.todo { padding: 0.5rem 0; }
.side-nav.todo>li { margin: 0; }
.side-nav.todo>li>a { border: none; }
.side-nav.todo>li>*:first-child { padding: 0.5rem 1.25rem; }
.side-nav.todo>li i { font-size: 1.35em; margin-right: .75rem; vertical-align: middle; }
#clientarea-sidenav { position: absolute; top: 0; left: 0; bottom: 0; width: 50px; height: 100%; background-color: #2a3038; z-index: 1; }
#clientarea-sidenav ul.sidenav-menu { list-style-type: none; margin: 0; padding: 0; }
#clientarea-sidenav ul.sidenav-menu > li { line-height: 50px; border-bottom: solid 1px #3b4048; text-align: center; }
#clientarea-sidenav ul.sidenav-menu > li i { font-size: 1.5em; vertical-align: middle; }
#clientarea-sidenav ul.sidenav-menu > li img { width: 1.5em; margin: .9em 0; }
#clientarea-sidenav ul.sidenav-menu > li > a { width: 100%; height: 100%; display: block; border: none; color: #ffffff; padding: 0; white-space: nowrap; }
#clientarea-sidenav ul.sidenav-menu > li > a:hover { color: #8dc63f; }
#clientarea-sidenav ul.sidenav-menu > li > a.active { border-left: solid 3px #8dc63f; color: #8dc63f;}
#clientarea-sidenav .dropdown-menu { width: 250px; max-width: 250px; box-shadow: 3px 3px 5px #dddddd; }
#clientarea-sidenav .dropdown-menu>li>a { text-align: left; color: #596372; padding: 1em; }
#clientarea-sidenav .dropdown-menu>li>a:hover { text-align: left; color: #2f353e; }
#clientarea-topnotification { height: 50px; line-height: 50px; vertical-align: middle; background: rgba(255,255,255,.02); padding: 0 32px; text-align: right; font-size: .95em; color: #eeeeee; }
#clientarea-menuline { height: 70px; background: #eeeeee; line-height: 70px; border-bottom: solid 1px #eaeaea; }
#clientarea-logo { width: 50px; height: 70px; float: left; text-align: center; background: #23282D; font-size: 1.5em; font-weight: 600; }
#clientarea-logo>a { opacity: .4; border: none; text-decoration: none; -webkit-transition: opacity 200ms ease-out; -moz-transition: opacity 200ms ease-out; transition: opacity 200ms ease-out; }
#clientarea-logo>a:hover { opacity: 1; }
#clientarea-menuline-left { float: left; padding-left: 32px; display: table; }
#clientarea-menuline-right { float: right; padding-right: 32px; display: table; }
#clientarea-menuline-left > div, #clientarea-menuline-right > div { display: table-cell; vertical-align: middle; }
#clientarea-menuline-left > div:not(:last-of-type) { padding-right: 32px; }
#clientarea-menuline-right > div:not(:first-of-type) { padding-left: 32px; }
.menuline-divider { border-right: solid 1px #dddddd; box-shadow: 1px 0 #fff; }
#clientarea-search { width: 318px; }
#clientarea-menuline-left input, #clientarea-menuline-right input, #clientarea-menuline-left .button, #clientarea-menuline-right .button { margin: 0; }

#clientarea-wrapper #userdd { outline: none;  }
#clientarea-wrapper #userdd li.divider { }

#clientarea-login { position: relative; top: 0; left: 0; height: 100%; overflow: hidden; }
#clientarea-login #logincontainer { position: absolute; top:0;left:0;right:0;bottom:0;height:100%; }
#clientarea-login #login-inner { background-color: #eeeeee; position: relative; top: 0; height: 100%; }
#clientarea-login #login-header { background-color: #dedede; padding: 0.5rem 0rem; box-shadow: 0 1px #f9f9f9; border-bottom: solid 1px #cccccc; }
#clientarea-login #login-header .title { font-size: 1rem; margin: 0; font-weight: 900; text-transform: uppercase; font-size: 0.875rem; }
#clientarea-login #login-content { padding: 2.5rem 0rem; }
#clientarea-wrapper .contentpadding { padding: 30px 32px 0; }
#clientarea-main .creditbox { background-color: #eeeeee; padding: 1.25em; margin: 1em 0; text-align: center; }
#login-content .username { background: #ffffff url('/img/icons/user-16-green.png') 8px center no-repeat; padding-left: 32px; }
#login-content .password { background: #ffffff url('/img/icons/lock-16-green.png') 8px center no-repeat; padding-left: 32px; }
#login-content .email { background: #ffffff url('/img/icons/at-16-green.png') 8px center no-repeat; padding-left: 32px; }
#login-content #errorpanel { text-align: center; display: none; }
#breadcrumbs { background: #eeeeee; padding: 0.225rem 1.875rem;}
.dashboard-service-boxes { margin: 0 -1.25rem; }
.dashboard-service-boxes>li { padding: 1.25em 1.25rem 1.25rem; }
.dashboard-service { background-color: #ffffff; border: solid 1px #eeeeee; position: relative; display: block; overflow: hidden; z-index: 0; }
.dashboard-service>.inner { padding: 1.5em 2em; }
.dashboard-service>.count { top: 0; position: absolute; right: 0; width: 1.65em; height: 1.65em; line-height: 1.75em; font-size: 1.5em; font-weight: 300; color: #767676; background: #eeeeee; text-align: center; }
/*.dashboard-service .icon { font-size: 3em; padding-left: 1px; line-height: 1.3em; }*/
.dashboard-service .header { font-size: 1.25em; font-weight: 300; padding: 1.5em 1.75em 1.25em; line-height: 1; }
.dashboard-service .header>.icon { font-size: 2.5em; position: relative; top: 3px; }
.dashboard-service .header>.content { color: #2f353e; }
.dashboard-service .header>.content>strong { font-size: .85em; padding-left: 1px; }
.dashboard-service:hover { border-color: #8dc63f; }
.dashboard-service:hover>.manage { opacity: 1; }
.dashboard-service:hover>.manage>span { top: 50%; }
.dashboard-service>.manage { 
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	height: 100%;
	-webkit-transition: opacity 250ms ease-out;
	-moz-transition: opacity 250ms ease-out;
	transition:  opacity 250ms ease-out;
	text-transform: uppercase;
	width: 100%;
	text-align: center;
	background: #ffffff;
	background: rgba(255,255,255,.95);
	font-size: 1.75em;
	font-weight: 300;
	z-index: 1000;
}
.dashboard-service>.manage>span { position: absolute; top: 100%; left: 0; width: 100%; margin-top: -.75em; 
	-webkit-transition: top .45s
	-moz-transition:top .45s;
	transition: top .45s;
}

.box-slidepanel { 
	background: #8dc63f;
	position: absolute;
	width: 100%;
	/* display: none; */
	left: 0;
	bottom: 0;
	padding: 1.5em 2em;
	text-align: left;
}

h1.clientarea-page-header { font-size: 1.4375rem; margin-bottom: 2rem; }
#clientarea-header_mainarea a { color: #ffffff !important; border: none; }

@media only screen and (min-width: 40.063em) {
	#clientarea-login #login-content { padding: 2.5rem 1.75rem; }
	#clientarea-login #login-inner { top: 50%; margin-top: -195px; border: solid 1px #ffffff; width: 600px; height: 390px; }
	h1.clientarea-page-header { font-size: 1.6875rem; }
}
@media only screen and (min-width: 64.063em) {
	#clientarea-login #login-inner { top: 20%; height: auto; margin-top: 0; }
	h1.clientarea-page-header { font-size: 1.8375rem; }
}

label input[type='checkbox'],label input[type='radio'] { vertical-align: -2px; margin-right: 0.25rem; }


div#bg {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #2F353E;
overflow: hidden;
z-index: -1;
}

div#bgl {
	position: absolute;
	height: 200%;
	background: #272C35;
	opacity: 0.1;
	-moz-opacity: 0.1;
	width: 200%;
	-webkit-transform: rotate(35deg);
	transform: rotate(35deg);
	right: 0;
	top: 25%;
}

div#bgr {
	position: absolute;
	height: 200%;
	background: #292F35;
	opacity: 0.3;
	-moz-opacity: 0.3;
	width: 200%;
	-webkit-transform: rotate(-38deg);
	transform: rotate(-38deg);
	left: 0;
	top: 15%;
}

div#bgb { position: absolute; width: 100%; height: 100%; bottom: 0; background: url('/img/graph-bg.png') bottom center no-repeat; }

#clientarea-left-pane { width: 100%; }
#clientarea-right-pane { width: 100%; }
.clientarea-right-block { padding: 30px 32px 0; }
.clientarea-right-block-inner { background-color: #ffffff; padding: 1em; border: solid 1px #eeeeee; }
.clientarea-right-block-inner2 { background-color: #ffffff; border: solid 1px #eeeeee; }
.clientarea-right-block-inner3 { padding: 1em; border: solid 1px rgba(141,198,63,.1); background-color: rgba(141,198,63,.25); }
.wizard-steps { background-color: #ffffff; padding: 4rem 2rem; border: solid 1px #eeeeee; position: relative; margin-bottom: 1.875em; }
.wizard-steps .activation-step { position: absolute; left: 50%; top: 0; margin-left: -41px; background: #eee; color: #999999; padding: .5em 1em; text-transform: uppercase; }
.wizard-steps .complete { position: absolute; bottom: -.65em; right: 50%; font-size: 4em; margin-right: -.39em; color: #8dc63f; }
.stepsarrow { position: absolute; background-color: #ffffff; font-size: 3em; top: 100%; right: 50%; color: #666666; z-index: 1; border-color: #eeeeee; margin-top: -.575em; margin-right: -.875em; box-shadow: 0 0 15px #eeeeee; }
.stepsarrow.offsetshadow { box-shadow: 0 5px 15px #eeeeee; }
.horizontal-section .stepsarrow { display: none !important; top: auto !important; bottom: 0 !important; margin-bottom: -2.5em !important; }
.stepsarrow>.fi-arrow-right { display: none; }
#clientarea-main .settings-header { background-color: #efefef; font-size: 1.15rem; padding: 0.925em 1em; text-transform: uppercase; margin-bottom: 2.5rem; }
#clientarea-main input[type="text"], #clientarea-main select { /*height: 2.8125rem; font-size: 1rem;*/ font-family: inherit; }
#kb-searchresults {
	background: #ffffff;
	padding: 1em;
	position: absolute;
	width: 100%;
	z-index: 1;
	max-height: 300px;
	overflow: auto;
	display: none;
  	border: solid 1px #cccccc;
  	border-top: none;
  	box-shadow: 0 5px 15px #cccccc;	
}
#pwstrengthbox > span.meter { background: transparent; }
#pwstrengthbox > span.meter > label { color: #2f353e; }
#pwstrengthbox.weak > span.meter { width: 25%; background: #fa6900; }
#pwstrengthbox.moderate > span.meter { width: 75%; background: #363D47; }
#pwstrengthbox.strong > span.meter { width: 100%; background: #8dc63f; }
#pwstrengthbox.weak > span.meter > label, #pwstrengthbox.moderate > span.meter > label, #pwstrengthbox.strong > span.meter > label {
	color: #ffffff;
}
.ticket-details-container { padding: 2rem 1.8575rem !important; text-align: right; }
.ticket-content-container { border-left: solid 1px #dddddd; padding: 2rem 1.8575rem !important; }
ul.ticket-details { list-style: none; margin-left: 0; }
ul.ticket-details>li.divider { border-bottom: solid 1px #dddddd; margin-top: 25px; margin-bottom: 25px; }
ul.ticket-details>li { margin-bottom: 15px; }
.ticketid-container { padding-bottom: 2rem; border-bottom: solid 1px #dddddd; }
.ticket-subject-container { padding-bottom: 2rem; border-bottom: solid 1px #dddddd; }
.ticket-replies-container { padding: 2rem 0; }
.clientheader { border-left: solid 10px #2f353e; background: #eeeeee; padding: 0.5em 1em; font-weight: bold; }
.adminheader { border-left: solid 10px #8dc63f; background: #eeeeee; color: #8dc63f; padding: 0.5em 1em; font-weight: bold; }
.clientheader .user, .adminheader .user { 
	padding: 5px 8px;
	border-radius: 3px;
	margin-right: 10px;
	text-transform: uppercase;
	font-size: 0.85rem;
}
.clientheader .user { background-color: #2f353e; color: #ffffff; }
.adminheader .user { background-color: #8dc63f; color: #ffffff; }
.clientmsg, .adminmsg { padding: 2em 1em; border-left: solid 10px #eeeeee; }
.ticketmsgs { margin-top: 2em; }
.attachments {
	margin-top: 2em;
	border: solid 1px #ddd;
	background: #f6f6f6;
	border-radius: 3px;
	padding: 0.5em 1em;
}
.ticketfeedbackstaffcont {
    margin: 10px auto;
    padding: 15px;
    background-color: #efefef;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px;
}

.ticketfeedbackrating .rate {
    float: left;
    padding: 0 10px;
    min-width: 30px;
    text-align: center;
}
#replycont { padding: 2em; border: 1px solid rgb(221, 221, 221); background: rgb(238, 238, 238); }
table.ticketrating {
width: auto;
background: transparent;
border: 0;
border-spacing: 1px;
border-collapse: separate;
margin-top: 0;
margin-bottom: 0;
font-size: 11px;
-moz-box-sizing: border-box;
text-indent: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
}
table.ticketrating td {
display: table-cell;
min-width: 16px;
line-height: 16px;
vertical-align: inherit;
text-align: inherit;
padding: 0;
border: 0;
}
table.ticketrating td.star { background: url('/members/images/rating_neg.png'); cursor: pointer; }
.whmcscontainer table.ticketrating td.point { cursor: pointer; }
.moduleoutput { background: #eeeeee; padding: 1em; }
.signup-price { font-size: 1.4375rem; line-height: 1.85em; }
.signup-promo { background-color: rgba(141,198,63,.25); padding: .5em 2em .5em .75em; margin-top: .25em; position: relative; text-align: left; }
.inline-loader { background: url('/img/loader-orange-small.gif') 95% 50% no-repeat; }
.close { position: absolute; top: .4rem; right: .75rem; font-weight: bold; border: none; cursor: pointer; }

/* Status Colors */

.label.pending {
    background-color: #363D47;
    text-transform: uppercase;
}
.label.active {
    background-color: #8dc63f;
    text-transform: uppercase;
}
.label.suspended {
    background-color: #59c1e4;
    text-transform: uppercase;
}
.label.terminated {
    background-color: #fa6900;
    text-transform: uppercase;
}
.label.cancelled {
    background-color: #aaaaaa;
    text-transform: uppercase;
}
.label.expired {
    background-color: #fa6900;
    text-transform: uppercase;
}
.label.fraud {
    background-color: #fa6900;
    text-transform: uppercase;
}
.label.unpaid {
    background-color: #fa6900;
    text-transform: uppercase;
}
.label.paid {
    background-color: #8dc63f;
    text-transform: uppercase;
}
.label.refunded {
    background-color: #363D47;
    text-transform: uppercase;
}
.label.collections {
    background-color: #59c1e4;
    text-transform: uppercase;
}
.promoline { background-color: rgba(141,198,63,.25) !important; } /* on invoice */

.jGrowl { font-size: 0.8875rem !important; }
.jGrowl-notification { padding: 10px 15px !important; }
.jGrowl.bottom-right { right: 25px !important; bottom: 15px !important; }
.jGrowl-message ul { font-size: 0.8875rem !important; }

.jqloader { position: relative; }
.jqloader-overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,0.6);
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	text-align: center;
}
.jqloader-wait { 
	background: #ffffff;
	padding: 25px;
	width: 225px;
	z-index: 1001;
	margin: 0 auto;
	top: 30%;
	position: relative;
	box-shadow: 0px 0px 10px 3px #eee;
	border: solid 1px #eee;
}

/* Blog */

.blog-container { background: #f7f7f7; border-top-left-radius: 3px; border-top-right-radius: 3px; }
.blog-entry { margin-bottom: 25px; }
.blog-entry header { margin-bottom: 15px; border-bottom: solid 5px #eeeeee; padding-bottom: 5px; position: relative; }
.blog-entry header h1 { font-weight: 300; line-height: 1.2; font-size: 2.125rem; }
.blog-entry header h1 a { text-decoration: none; border: none; }
.blog-entry header .entry-meta { font-size: 0.95em; margin-bottom: 10px; color: #222222; }
.blog-entry aside { position: absolute; left: -125px; top: 3px; }
.blog-entry .entry-date { width: 100px; background: #8dc63f; padding: 1em; text-align: right; color: #ffffff; line-height: 1.225em; }
.blog-entry .entry-share { width: 77px; margin-top: 1.925em; float: right; }
.blog-entry h2 { font-size: 1.6875rem; }
.blog-entry h3 { font-size: 1.375rem; }
.blog-entry h4 { font-size: 1.125rem; }

.share-buttons li { height: 36px; margin-bottom: 3px; }
.share-buttons li span { display: block; width: 36px; height: 100%; background: url('/img/share-buttons-gray.png') 0 0 no-repeat; float: right;
    -webkit-transition: all 150ms ease-out;
    -moz-transition: all 150ms ease-out;
    transition: all 150ms ease-out;
    opacity: 0.8; }
.share-buttons li span:hover { width: 100%; opacity: 1; }
.share-buttons span.facebook { background-position: 0 0;  }
.share-buttons span.facebook:hover { background-position: -37px 0; }
.share-buttons span.twitter { background-position: 0 -36px; }
.share-buttons span.twitter:hover { background-position: -37px -36px; }
.share-buttons span.google { background-position: 0 -72px; }
.share-buttons span.google:hover { background-position: -37px -72px; }

.spacer-line { margin: 3em 0; height: 1px; clear: both; }
.blog-entry .spacer-circles1 { vertical-align: middle; margin-top: 15px; }
.blog-entry .spacer-circles1 span { display: inline-block; margin-right: 5px; width: 10px; height: 10px; border-radius: 10px; background-color: #C3E54E; vertical-align: middle; }
.blog-entry .spacer-circles1 span#first { opacity: 0.5; -moz-opacity: 0.5; }
.blog-entry .spacer-circles1 span#second { opacity: 0.7; -moz-opacity: 0.5; }

.blog-entry .spacer-circles2 { margin-top: 35px; margin-bottom: 35px; vertical-align: middle; text-align: center; }
.blog-entry .spacer-circles2 span { display: inline-block; margin-right: 5px; width: 15px; height: 15px; border-radius: 15px; background-color: #C3E54E; vertical-align: middle; }
.blog-entry .spacer-circles2 span#first,.blog-entry .spacer-circles2 span#third { background-color: #dedede; }
.blog-entry:last-of-type .spacer-circles2 { display: none; }

.blog-leftcol { background-color: #ffffff; border-top-left-radius: 3px; }
.blog-rightcol { border-top-right-radius: 3px; }
.blog-leftcol, .blog-rightcol { padding-top: 2em; }
.blog-rightcol-box { margin-bottom: 25px; padding: 1em 1.5em; background: #ffffff;/* border: solid 1px #dddddd; */}
.blog-rightcol-box h4 { font-weight: bold; border-bottom: solid 1px #dddddd; }
.blog-rightcol-box h4 a { color: inherit; text-decoration: none; }
.blog-paging { border-top: solid 1px #eaeaea; border-bottom: solid 1px #eaeaea; padding: 12px 0; }
.blog-paging a { text-decoration: none; text-transform: uppercase; font-weight: bold; border: none; font-size: 0.85em; }

.paging-arrow { width: 19px; height: 18px; background-image: url('/img/paging-arrows-sprite.png'); position: relative; top:3px; background-repeat: no-repeat; display: inline-block; }
.paging-arrow.paging-arrow-left { background-position: 0 0; margin-right: 3px; }
.paging-arrow.paging-arrow-right { background-position: -19px 0; margin-left: 3px; }
.latest-blogposts li { margin-bottom: 0.5em; }
.blog-archive-list li { margin-bottom: 0.325em; }
.latest-blogposts a, .blog-archive-list a { color: #2f353e; border: none; }
.latest-blogposts a:hover, .blog-archive-list a:hover { color: #8dc63f }
.section { padding-bottom: 1rem; margin-bottom: 1.5rem; border-bottom: solid 1px #eeeeee; }
.toggle-group { list-style-type: none; margin: 0 -0.625rem; }
.toggle-group>li { margin-bottom: .5rem; list-style: none; padding: 0 0.625rem; }
.toggle-group>li>button { display: block; width: 100%; padding: 1.5em; background: #ffffff; }
.toggle-group .icon { margin-bottom: .15rem; font-size: 3.5em; }
.toggle-group .icon>img { width: 1em; margin-bottom: .15em; }
.toggle-group>li>button.active { color: #8dc63f; background: #F9FCF5; background: rgba(141,198,63,.05); }
.toggle-group.horizontal { margin-left: -.5rem; padding: 0; }
.toggle-group.horizontal>li { float: left; margin-left: .5rem; display: block; }
.toggle-group.horizontal.icon-left .icon { position: absolute; height: 100%; width: 2.25em; top: 0; left: 0; font-size: 2em; }
.toggle-group.horizontal.icon-left .icon>i { display: block; position: absolute; width: 100%; top: 50%; text-align: center; line-height: 1; margin-top: -.5em; }
.toggle-group.horizontal.icon-left>li>button { padding-left: 4.25em; text-align: left; }
.toggle-group:before, .toggle-group:after { content: " "; display: table; clear: both; }
.toggle-group.signup>li>button.active { background: #8dc63f; color: #ffffff; }
.toggle-group.signup>li>button { border: solid 1px #fff; }
.toggle-group.vertical>li { float: none; }


.checkout-total { padding: 1.5em; background-color: #fafafa; border: solid 1px #cccccc; }
.section-header { padding-bottom: 0.925em; border-bottom: solid 1px #eeeeee; text-transform: uppercase; margin-bottom: 1em; font-weight: bold; /*color: #8dc63f; */}
code, .code-listing { display: block; border: none; background-color: #eeeeee; font-size: .875em; padding: 1rem 1.5rem; margin: 1em 0; color: #5c6666; overflow: auto; white-space: pre; word-break: normal; word-wrap: normal; }
code>ol, .code-listing>ol,code>ul, .code-listing>ul { list-style-position: inside; margin: 0; font-size: .875rem; }
code>ol>li, .code-listing>ol>li { color: #999999; }
code>ol>li>span, .code-listing>ol>li>span { color: #fa6900; }
.inline-code { font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; font-style: italic; color: #5c6666; }
.offcanvas-header { display: none; margin: .5rem 1.75rem; text-align: right; font-size: 3.75rem; line-height: 1; font-weight: 100; color: rgba(255,255,255,.3); }
.large-icon { font-size: 3em !important; }
.relative { position: relative; }
.big-text { font-size: 2.5em; }

ul.commission-structure { list-style-type: none; width: 100%; }
ul.commission-structure > li {
	position: relative;
	float: left;
	width: 23%;
	height: 185px;
	margin: 0 0 0 10px;
	background: #eaeaea;
	text-align: center;
	border-radius: 3px;
}
ul.commission-structure > li:first-child {margin-left: 0; }
ul.commission-structure > li > p {
	position: absolute;
	left: 0;
	bottom: 8px;
	width: 100%;
	margin: 0;
	color: #fff;
	font-size: 1.15em;
}

ul.commission-structure > li > strong {
	position: absolute;
	left: 0;
	bottom: -30px;
	width: 100%;
}

ul.commission-structure > li:before {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	content: "";
	border-radius: 3px;
	background: #8dc63f;
}

ul.commission-structure > li:nth-child(1):before {
	height: 65px;
	opacity: 0.7;
}
ul.commission-structure > li:nth-child(2):before {
	height: 97px;
	opacity: 0.8;
}
ul.commission-structure > li:nth-child(3):before {
	height: 130px;
	opacity: 0.9;
}
ul.commission-structure > li:nth-child(4):before {
	height: 162px;
}
h3.affiliates-features { padding: 6px 0 6px 45px; background-position: left center; background-repeat: no-repeat; margin-bottom: 10px; }
h3.aff-tracking { background-image: url('/img/partners/dollar-chart.png'); }
h3.aff-payouts { background-image: url('/img/partners/payouts.png'); }
h3.aff-cookie { background-image: url('/img/partners/365day-cookie.png'); }
h3.aff-withdraw { background-image: url('/img/partners/withdraw.png'); }
h3.aff-marketing { background-image: url('/img/partners/marketing-materials.png'); }
h3.aff-dashboard { background-image: url('/img/partners/dashboard.png'); }
.highlight { background-color: #FFEC1E; }
.uppercase { text-transform: uppercase; }
blockquote.alt1 { 
	padding: 1em;
    border: solid 2px #eee;
    border-right: none;
    border-top: none;
    border-bottom-left-radius: 15px;
    font-size: 1.55em;
    letter-spacing: 0.01em;
    font-style: italic;
}
blockquote>q::before, blockquote>q::after {
    content: close-quote;
    font-size: 2em;
    position: relative;
    vertical-align: middle;
    line-height: 0;
}
blockquote>q::before { content: open-quote; }
blockquote>q::after { content: close-quote; }
blockquote.alt1>cite { font-size: 1rem; font-style: normal; }
blockquote.alt1>cite::before { content: none; }
.story-prehead { position: relative; background: rgba(0,0,0,.3); padding: .5em .75em; display: inline-block; color: #ffffff; text-transform: uppercase; margin-bottom: .25em; }
.story-prehead::before { content: ' '; position: absolute; top: 100%; left: 25px; pointer-events: none; width: 0; height: 0; border: solid 10px transparent; border-top-color: rgba(0,0,0,.3); }
img.story-screenshot { padding: 1.25em;background: #fff;border: solid 5px rgba(0,0,0,.3);margin-top: 2em;}
.custstory-blogpost-overlay { position: absolute; bottom: 0; left: 0; background: rgba(0,0,0,.85); padding: 0.5em .75em; color: #fff; }
.custstory-blogpost-overlay a { color: #ffffff; }
.custstory-blogpost-overlay a:hover { color: #8dc63f !important; }

.mage2-bg { position: absolute; top: 0; left: 0; right: 0; bottom:0; overflow: hidden; z-index: -1; background: url('/img/magento2-bg.jpg') 0 0 no-repeat; background-size: cover; background-attachment: fixed; }
.mage2-title { margin-bottom:.5em; font-size:3.5em; font-weight: 300; letter-spacing: 0.05em; }
.mage2-title>span { padding: .2em .5em; background: #fff; transform: rotateZ(5deg); display: inline-block; margin-left: .25em; font-weight: bold; }
.panel-title { text-transform: uppercase; font-weight: bold; border-bottom: solid 1px #eeeeee; padding-bottom: .75em; }
#m2-basic,#m2-pro,#m2-proplus { -webkit-transition: border-color 200ms ease-out; -moz-transition: border-color 200ms ease-out; transition: border-color 200ms ease-out; }
#m2-basic:hover { border-color: rgba(0,0,0,.4); }
#m2-pro { border-color: rgba(141,198,63,.4); }
#m2-pro:hover { border-color: rgba(141,198,63,1) }
#m2-proplus { border-color: rgba(250,105,0,.4); }
#m2-proplus:hover { border-color: rgba(250,105,0,1); }
.countdown-section { display: inline-block; margin: 0 .5em .5em 0; }
.countdown-number { padding: .5em .75em; background-color: #fa6900; border-radius: 3px; color: #ffffff; font-size: 2.5em; font-weight: 900; border: solid 1px #fff; }
.countdown-unit { color: #ffffff; margin-top: .5em; color: #aaaaaa; }

#blackfriday-sticky { 
	background: url('/img/black_friday_deals.jpg');
    width: 142px;
    height: 63px;
    position: fixed;
    background-size: contain;
    border-top-right-radius: 5px;
    bottom: 0;
    left: 0;
    opacity: 0.8;
    -webkit-transition: opacity 200ms ease-out;
    -moz-transition: opacity 200ms ease-out;
    transition: opacity 200ms ease;
}
#blackfriday-sticky:hover { opacity: 1; }

div.icon { font-size: 2em; }
div.icon.gray { color: #999999; }

.feature-table { border: none; width: 100%; }
.feature-table>thead { background: none; border-bottom: solid 1px #eeeeee; }
.feature-table>thead tr { border-bottom: solid 3px #eeeeee; }
.feature-table>thead tr th:not(:first-child) { padding: 1em 0; }
.feature-table>thead tr th { font-weight: normal; }
.feature-table>thead tr th .title { font-weight: 300; font-size: 1.75em; margin-bottom: .5em; }
.feature-table tr td, .feature-table tr th { text-align: center; border-right: solid 1px #eeeeee; font-size: 1em; padding: .75em; }
.feature-table>tbody tr th { text-align: left; font-size: .875em; color: #555555; }
.feature-table tr.header-row { background: #dddddd; }
.feature-table tr.header-row td, .feature-table tr.header-row th { color: #555555; font-weight: 300; font-size: 1.25em; border-top: solid 15px #fff; border-bottom: solid 15px #fff;}
.feature-table .fi-check { color: #8dc63f; }
.feature-table .fi-x { color: #fa6900; }
.feature-table button,.feature-table .button { margin: 0.5em 0; }

.theme-container { border: solid 1px #dddddd; -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; transition: all 300ms ease; position: relative; }
.theme-container:hover { border-color: #cccccc; opacity: 1 !important; }
.theme-container .badge-custom {
    width: 95px;
    height: 58px;
    position: absolute;
    top: -1px;
    right: -5px;
    z-index: 1;
}
.badge-custom.sale { background: url('/img/sale-badge.png') left top no-repeat; }
.badge-custom.off40 { background: url('/img/40off-badge.png') left top no-repeat; }
.theme-desc { font-size: .9em; background: url('/img/magento-logo-small.gif') left 4px no-repeat; padding-left: 42px; }
.theme-name { color: #2f353e; font-weight: bold; display: inline-block; border-bottom: solid 1px #999999; transition: color 300ms ease; }
.theme-cat { color: #777777; font-size: .85em; }
.theme-thumb { position: relative; height: 215px; }
.theme-thumb img { width: 100%; }
.theme-thumb a { border: none; text-decoration: none; display: block; height: 100%; overflow: hidden; position: relative; z-index: 0; }
.theme-below { border-top: solid 1px #dddddd; position: relative; background: #ffffff; z-index: 0; }
.theme-below a { display: block; padding: 0.75em 1em 0.5em 1em; text-align: left; border: none; position: relative; overflow: hidden; }
.theme-below a:hover .theme-name { color: #777777; }
#themes-list .theme-below a:hover .theme-btn-overlay { transform: translate(0,-30px); }
.theme-below .theme-details { margin: .5em 0; }
.theme-price-block { position: absolute; top: -14px; right: -10px; }
.theme-price { 
	background: #8dc63f;
    font-size: 1em;
    line-height: 18px;
    height: 27px;
    color: #fff;
    padding: 4px 10px 5px 10px;
    font-weight: bold;
    z-index: 2;
    position: relative;
}
.theme-price-block-fold { 
	position: absolute;
    display: block;
    border-color: transparent;
    border-style: solid;
    top: 18px;
    right: -9px;
    border-left-color: #666666;
    content: " ";
    border-width: 9px;
    box-sizing: border-box;
    z-index: 1;
}
.theme-price-block-arrow {
	position: absolute;
    display: block;
    top: 0;
    left: -9px;
    box-sizing: border-box;
    z-index: 2;
}
.theme-btn-overlay { 
	position: absolute;
    width: 100%;
    top: 100%;
    font-size: .9em;
    background: rgba(40,40,40,.9);
    left: 0;
    text-align: center;
    padding: .25em 0;
    transition: all 200ms ease;
    text-transform: uppercase;
    color: #ffffff;
}

.theme-filter-block { border: solid 1px #dddddd; border-bottom: none; }
.theme-filter-block:last-of-type { border-bottom: solid 1px #dddddd; }
.theme-filter-block-heading {
	display: block;
	font-size: 1.15rem;
	border-bottom: solid 1px #ddd;
    padding: .75em;
    margin: 0;
    font-weight: 300;
    color: #777777;
    padding-left: 2.5em;
    position: relative;
    background: #f8f8f8;
}
.theme-filter-block-heading:hover { border-bottom-color: #dddddd; color: #2f353e; }
.theme-filter-block-heading::before {
    content: '';
    width: 0;
    height: 0;
    border-left: .5em solid transparent;
    border-right: .5em solid transparent;
    border-top: .75em solid #dddddd;
    top: 21px;
    position: absolute;
    left: 1rem;
    -webkit-transition: border-color 300ms ease-out;
    -moz-transition: border-color 300ms ease-out;
    transition: border-color 300ms ease-out;
}
.theme-filter-block-heading:hover::before { border-top-color: #aaaaaa; }
.theme-filter-block-content { padding: 1.1rem; }
.theme-filter-block-content>ul { list-style: none; margin: 0; }
.theme-filter-block-content a { color: #2f353e; border: none; font-size: .95em; }
.theme-filter-block-content a:hover { color: #8dc63f; }
.theme-filter-block-content a.active { color: #8dc63f; font-weight: bold; }
.theme-filter-count { color: #aaaaaa; }
#themes-featured .theme-container { 
	/*box-shadow: 4px 4px 8px #dddddd; */
	margin: 1.5em;
}
#themes-featured .slick-center .theme-container {
    opacity: 1;
    -moz-transform: scale(1.08);
    -ms-transform: scale(1.08);
    -o-transform: scale(1.08);
    -webkit-transform: scale(1.08);
    transform: scale(1.08);
}
#themes-featured .slick-next { right: -35px !important; }
#themes-featured .slick-prev { left: -35px !important; }
#themes-featured .slick-prev:before, #themes-featured .slick-next:before { color: #aaaaaa !important; transition: opacity 300ms ease; }
.theme-preview {
	opacity: 0;
	position: absolute;
    background: #ffffff;
    z-index: 999;
    width: 372px;
    border: solid 1px #dddddd;
    box-shadow: 0 2px 35px rgba(0,0,0,0.4);
    -webkit-transition: opacity 750ms ease;
    -moz-transition: opacity 750ms ease;
    transition: opacity 750ms ease;
}
.theme-preview .theme-thumb { height: auto; }
.theme-preview .theme-name { font-size: 1.25em; border: none; padding: .25em 0; }
.inline-list.divider { margin-left: -1rem; }
.inline-list.divider>li>* { display: inline; }
.inline-list.divider>li { position: relative; padding-right: 1rem; margin-left: 1rem; }
.inline-list.divider>li:not(:last-of-type):after {
	position: absolute;
    content: '';
    height: 14px;
    border-right: 1px solid #cccccc;
    width: 1px;
    right: 0;
    top: 7px;
}

.theme-main-img { position: relative; border: solid 1px #d8d8d8; max-height: 550px; overflow: hidden; margin-bottom: 1.25rem; cursor: pointer; }
.theme-main-img img { -webkit-transition: all 600ms ease; -moz-transition: all 600ms ease; transition: all 600ms ease; }
.theme-main-img:hover>img { opacity: .75; }
.theme-main-img>.img-overlay {
    position: absolute;
    left: 0;
    top: -120%;
    bottom: 0;
    right: 0;
    /*opacity: 0;*/
    margin: auto;
    -webkit-transition: all 900ms ease;
    -moz-transition: all 900ms ease;
    transition: all 450ms ease;
    background: rgba(0,0,0,.7);
    height: 75px;
    line-height: 75px;
    text-align: center;
}
.theme-main-img:hover>.img-overlay { /*opacity: 1;*/ top: 0; }
.theme-screenshots { border: solid 1px #d8d8d8; }
.price-type-lbl strike { color: #999999; }
.theme-search { border-top: solid 1px #dddddd; padding-top: .5em; }

.banner {
    padding: 16px;
    text-align: center;
    box-shadow: 0 3px 8px 0 rgba(0,0,0,.12) !important;
    z-index: 1000;
    background: #fff;
}