@charset "UTF-8";

/* =Reset
-------------------------------------------------- */

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* HTML5 elements */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

/* Base */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

html, body { background: #faf8f6; line-height: 1; }
html { height: 100%; overflow-y: scroll; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body { min-width: 982px; min-height: 100%; line-height: 20px; }
body, input, select, optgroup, textarea, button, td, th { color: #000; font-size: 13px; font-family: sans-serif; }

/* Links */

a { color: #009cd5; text-decoration: none; }
a:hover, a:focus { color: #0082b2; text-decoration: underline; }
a:focus, a:active { outline: none; }

/* Typography */

abbr[title] { border-bottom: 1px dotted; }
blockquote { margin: 1em 40px; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 20px 0; padding: 0; }
hr.alt { margin: 40px -44px; border-top-color: #ddd; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: consolas, 'courier new', monospace; font-size: 1em; color: #009cd5; }
pre { -moz-tab-size: 4; background-color: #FAF8F6; font-family: consolas, 'courier new', monospace; line-height: 20px; margin: 20px 0 10px; overflow: auto; padding: 20px; width: auto; word-wrap: normal; }
pre .text { color: #000; font-family: sans-serif; }
pre.wraping { white-space: normal; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 11px; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
h1, h2, h3, h4, h5, h6, dt, th, b, strong { font-weight: bold; }
i, em, dfn { font-style: italic; }
del { text-decoration: line-through; color: #999; }

/* Headings */

h1 { font-size: 24px; line-height: 30px; }
h2 { margin-top: 40px; font-size: 24px; line-height: 30px; }
h3 { margin-top: 20px; font-size: 15px; line-height: 20px; }
h4, h5, h6 { margin-top: 20px; font-size: 13px; line-height: 20px; }
h1 .thin { font-weight: 400; }

/* Lists */

ol { margin-left: 3.038em; list-style-type: decimal; }
ul { margin-left: 1.538em; list-style: none; }
ul li { padding-left: 1.5em; }
ul li:before {
    float: left;
    width: 1em;
    margin: -1px 0 0 -1em;
    color: #009cd5;
    content: '\25CF';
}
ul ul li:before {
    float: left;
    width: 1em;
    margin: -1px 0 0 -1em;
    color: #666;
    content: '\25CF';
}
ol ol, ol ul, ul ol, ul ul { margin-top: 0; }
ol li, ul li { min-height: 1px; vertical-align: bottom; }

ol { counter-reset: item }
ol.sub-ordered li { display: block }
ol.sub-ordered li:before { content: counters(item, ".") " "; counter-increment: item }

/* Tables */

table { border-collapse: collapse; border-spacing: 0; }
th, td { text-align: left; vertical-align: top; }

/* Other */

p, ul, ol, dl, table, blockquote, pre { margin-top: 20px; }
img { max-width: 100%; }
.ie7 img { -ms-interpolation-mode: bicubic; }

/* Non-semantic classes */

.left { text-align: left !important; }
.right { text-align: right !important; }
.center { text-align: center !important; }
.middle { vertical-align: middle !important; }
.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { position: absolute; top: -50000em; }
.nowrap { white-space: nowrap !important; }
.nomargin { margin: 0 !important; }
.nopadding { padding: 0 !important; }

.clear:before, .clear:after { content: ""; display: table; }
.clear:after { clear: both; }
.clear { zoom: 1; }

.code { font-family: consolas, 'courier new', monospace; }

.alignright {
    float: right;
    margin: 0 0 1em 1em;
}

.w-auto {
    width: auto !important;
}

.fs16 { font-size: 16px; }
.fs22 { font-size: 22px; }

.lowercase {text-transform: lowercase;}

.w-100 { width: 100px !important; }
.w-150 { width: 150px !important; }
.w-200 { width: 200px !important; }
.w-400 { width: 400px !important; }

.w20p { width: 20% !important; }
.w50p { width: 50% !important; }
.w100p { width: 100% !important; }

.max-w-50,
.max-w-100,
.max-w-150,
.max-w-200,
.max-w-250,
.max-w-300,
.max-w-350,
.max-w-400,
.max-w-450,
.max-w-500,
.max-w-100p {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.max-w-50 { max-width: 50px; }
.max-w-100 { max-width: 100px; }
.max-w-150 { max-width: 150px; }
.max-w-200 { max-width: 200px; }
.max-w-250 { max-width: 250px; }
.max-w-300 { max-width: 300px; }
.max-w-350 { max-width: 350px; }
.max-w-400 { max-width: 400px; }
.max-w-450 { max-width: 450px; }
.max-w-500 { max-width: 500px; }
.max-w-100p { max-width: 100%; }

a:hover .max-w-50,
a:focus .max-w-50,
a:hover .max-w-100,
a:focus .max-w-100,
a:hover .max-w-150,
a:focus .max-w-150,
a:hover .max-w-200,
a:focus .max-w-200,
a:hover .max-w-250,
a:focus .max-w-250,
a:hover .max-w-300,
a:focus .max-w-300,
a:hover .max-w-350,
a:focus .max-w-350,
a:hover .max-w-400,
a:focus .max-w-400,
a:hover .max-w-450,
a:focus .max-w-450,
a:hover .max-w-500,
a:focus .max-w-500 {
    text-decoration: underline;
}
a span.max-w-50,
a span.max-w-100,
a span.max-w-150,
a span.max-w-200,
a span.max-w-250,
a span.max-w-300,
a span.max-w-350,
a span.max-w-400,
a span.max-w-450,
a span.max-w-500 {
    vertical-align: top;
}
td .max-w-50,
td .max-w-100,
td .max-w-150,
td .max-w-200,
td .max-w-250,
td .max-w-300,
td .max-w-350,
td .max-w-400,
td .max-w-450,
td .max-w-500 {
    vertical-align: top;
}

/* =Controls
-------------------------------------------------- */

input,
select,
button,
textarea {
    margin: 0;
}
select,
textarea,
input.txt,
input[type="file"].styled {
    max-width: 100%;
    border: 1px solid;
    border-radius: 3px;
    border-color: #ccc;
    background: #f5f5f5;
    vertical-align: top;
}
textarea,
input.txt {
    padding: 2px 10px;
}
input[type="file"].styled {
    padding: 3px 2px 2px;
}
select,
input.txt {
    width: 300px;
    height: 30px;
    line-height: 20px;
}
.ie7 input.txt {
    height: 18px;
    margin-top: -1px;
    margin-bottom: -1px;
}
select {
    padding: 5px 5px 5px 6px;
}
select[size],
select[multiple] {
    height: auto;
}

select:focus,
textarea:focus,
input.txt:focus {
    border-color: #aaa;
    background: #fff;
    outline: none;
}
button,
label[for],
input[type="image"],
input[type="reset"],
input[type="button"],
input[type="submit"],
input[type="radio"],
input[type="checkbox"] {
    cursor: pointer;
}
input[type="radio"],
input[type="checkbox"] {
    margin: 3px;
    padding: 0;
}
.ie7 input[type="radio"],
.ie7 input[type="checkbox"] {
    margin: 0;
}
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
    padding: 0;
    border: none;
}
input::-webkit-input-placeholder {
    color: #999;
}
input:-moz-placeholder {
    color: #999;
}
input::-moz-placeholder {
    color: #999;
}
input:-ms-input-placeholder {
    color: #999;
}
.guide-select {
    padding: 3px;
    margin-right: 10px;
    font-size: 16px;
}
#guide-content {
    padding-top: 20px;
}
#guide-content > :first-child {
    margin-top: 0;
}

input.date,
input.date:hover,
input.date:focus {
    width: 115px;
    background-image: url(cal.png);
    background-repeat: no-repeat;
    background-position: 100% 50%;
}
input.time {
    width: 38px;
    padding-left: 5px;
    padding-right: 5px;
    text-align: center;
}

input.vat {
    padding-left: 35px;
}
.vat-prefix {
    position: relative;
    float: left;
    width: 35px;
    height: 30px;
    overflow: hidden;
    padding-left: 10px;
    margin-right: -35px;
    font-weight: bold;
    line-height: 30px;
    vertical-align: top;
}
input.block {
    width: 100%;
}

/* Textarea */

textarea {
    width: 400px;
    height: 120px;
    line-height: 20px;
    resize: vertical;
    overflow: auto;
}
textarea.short {
    height: 100px;
}
textarea.block {
    width: 100%;
}

/* Error */

.error {
    color: #c00;
}

label.error {
    color: #dc291e;
    font-weight: bold;
}
input.error,
select.error,
textarea.error {
    border-color: #dc291e !important;
    background-color: #fff8f8 !important;
    outline: none !important;
    -moz-box-shadow: inset 1px 1px 0 rgba(0,0,0,0.1);
    -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,0.1);
    box-shadow: inset 1px 1px 0 rgba(0,0,0,0.1);
}
input.ok,
select.ok,
textarea.ok {
    border-color: #2fdc1e !important;
    background-color: #f9fff8 !important;
    outline: none !important;
    -moz-box-shadow: inset 1px 1px 0 rgba(0,0,0,0.1);
    -webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,0.1);
    box-shadow: inset 1px 1px 0 rgba(0,0,0,0.1);
}
input.ok:focus,
select.ok:focus,
textarea.ok:focus,
input.error:focus,
select.error:focus,
textarea.error:focus {
    background-color: #fff !important;
}
.field-error {
    margin-top: 0;
    color: #dc291e;
    font-size: 12px;
}

/* disabled */

select[disabled],
textarea[disabled],
input.txt[disabled] {
    border-color: #eee;
    background: #fafafa;
    color: #666;
}

/* options */

.options {
    margin: 10px 0 0;
    list-style: none;
}
.options li {
    padding-left: 20px;
}
.options input[type="radio"],
.options input[type="checkbox"] {
    margin-left: -20px;
    vertical-align: top;
}
.options label {
    display: inline-block;
    cursor: pointer;
}
.options.important {
    font-size: 15px;
}
.options.switch li {
    padding-left: 50px;
}
.options.switch li + li {
    margin-top: 10px;
}
.options.switch .onoffswitch {
    float: left;
    margin-left: -50px;
}
.options.big li {
    padding: 3px 0 3px 34px;
}
.options.big .checkbox {
    float: left;
    margin: -3px 0 -3px -34px;
}
.options p.additional {
    margin: 5px 0 15px;
}
.options.horizontal li {
    display: inline-block;
}
.options.horizontal.alt {
    margin-top: 20px;
}
.options.horizontal.alt li > label {
    vertical-align: top;
    margin-top: 1px;
    font-size: 15px;
}

/* =custom check
-------------------------------------------------- */

span.radio:not(#foo),
span.checkbox:not(#foo) {
    display: inline-block;
    width: 24px;
    height: 24px;
    overflow: hidden;
    border: 1px solid #ccc;
    border-radius: 3px;
    background: #fff;
    line-height: 22px;
    text-align: center;
    cursor: pointer;
}
span.radio:not(#foo):hover,
span.radio:not(#foo):focus,
span.checkbox:not(#foo):hover,
span.checkbox:not(#foo):focus {
    border-color: #999;
}
span.radio:not(#foo) input,
span.checkbox:not(#foo) input,
span.radio:not(#foo) input + label .icon,
span.checkbox:not(#foo) input + label .icon,
span.radio:not(#foo) input + input + label .icon,
span.checkbox:not(#foo) input + input + label .icon {
    display: none;
}
span.radio label,
span.checkbox label {
    display: none;
}
span.radio:not(#foo) label,
span.checkbox:not(#foo) label {
    display: inline-block;
    cursor: pointer;
    width: 24px;
    height: 24px;
    margin: -1px;
    background: #fff;
}
span.radio:not(#foo) input:checked + label .icon,
span.checkbox:not(#foo) input:checked + label .icon,
span.radio:not(#foo) input:checked + input + label .icon,
span.checkbox:not(#foo) input:checked + input + label .icon {
    display: inline-block;
}
span.radio:not(#foo) {
    border-radius: 15px;
}

/* =Layout
-------------------------------------------------- */

body:before {
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    width: 940px;
    padding: 0 44px;
    height: 100%;
    margin-left: -470px;
    border: solid #e5e5e5;
    border-width: 0 1px;
    content: '';
}
.modal-open body:before {
    margin-left: -479px;
}
body.borderless:before {
    display: none;
}
body.no-footer {
    background: #fff;
}
body.no-footer:before {
    display: none;
}
body.no-footer #content {
    border-bottom: none;
}
body.download {
    background: #009cd5;
}
body.download:before {
    display: none;
}
body.download #header {
    border-bottom-width: 0;
}
#header {
    position: relative;
    min-height: 76px;
    background: #fff;
    border-top: 5px solid #0e9bda;
    border-bottom: 1px solid #e5e5e5;
}
#header:before {
    position: absolute;
    top: -5px;
    left: 50%;
    width: 50%;
    height: 5px;
    border-left: 1px solid #fff;
    background: #0272bc;
    content: '';
}
#header .phone {
    float: right;
    margin: 0;
    color: #aaa;
    font-size: 16px;
}
#header .phone strong {
    color: #999;
}
#header .phone .icon {
    margin: -8px 10px -10px -10px;
    color: #009cd5;
    font-size: 30px;
}
#menu-toggler {
    display: none;
}
#user-nav,
#page-title {
    position: relative;
    z-index: 2;
    border-bottom: 1px solid #e5e5e5;
    background: #faf8f6;
}
#content {
    position: relative;
    border-bottom: 1px solid #e5e5e5;
    background: #fff;
}
#contact {
    position: relative;
    border-bottom: 1px solid #e5e5e5;
}
#content:first-of-type {
    border-top: 5px solid #0e9bda;
}
#content:first-of-type:before {
    position: absolute;
    top: -5px;
    left: 50%;
    width: 50%;
    height: 5px;
    border-left: 1px solid #fff;
    background: #0272bc;
    content: '';
}
#footer {
    position: relative;
    font-size: 11px;
    color: #3c3a37;
    text-align: center;
}
.wrap {
    width: 940px;
    margin: 0 auto;
}
#intro .wrap,
#footer .wrap,
#contact .wrap,
#content .wrap,
#clients .wrap,
#download .wrap,
#user-nav .wrap,
#page-title .wrap {
    padding: 20px 44px;
    border: solid #e5e5e5;
    border-width: 0 1px;
}
#download .wrap,
.borderless #intro .wrap,
.borderless #footer .wrap,
.borderless #contact .wrap,
.borderless #content .wrap,
.borderless #clients .wrap,
.borderless #user-nav .wrap,
.borderless #page-title .wrap {
    border: none;
}

/* =Header
-------------------------------------------------- */

#header .wrap {
    padding: 27px 44px 21px;
}

/* logo */

#logo {
    margin: -3px 0 0 -4px;

}
#logo,
#logo a {
    float: left;
    width: 105px;
    height: 23px;
}
#logo a {
    position: relative;
    font-size: 31px;
}
#logo a:hover,
#logo a:focus {
    text-decoration: none;
}
#logo .label {
    position: absolute;
    top: -5px;
    left: 102%;
    background: #0272BC;
    font-size: 11px;
    line-height: 14px;
    font-weight: bold;
}
#logo span {
    color: #009cd5;
    font-size: 11px;
    white-space: nowrap;
}
#logo.alt {
    margin-top: -10px;
}

/* user */

#user-box {
    position: relative;
    float: right;
    margin: 0 0 0 44px;
}
#user-box a {
    float: left;
    font-size: 14px;
    line-height: 20px;
    font-weight: bold;
}
#user-box > a + a {
    margin-left: 15px;
}
#user-box .icon {
    margin-top: -1px;
    color: #3c3a37;
    font-size: 18px;
    vertical-align: top;
}
#user-box ul {
    display: none;
    position: absolute;
    top: 25px;
    right: -10px;
    z-index: 15;
    margin: 0;
    border: 10px solid #ddd;
    border: 1px solid rgba(0,0,0,0.2);
    background: #fff;
    background-clip: padding-box;
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}
#user-box li {
    padding: 0;
}
#user-box li:before {
    display: none;
}
#user-box li a {
    display: block;
    float: none;
    margin: 0;
    padding: 5px 10px 5px 35px;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 400;
}
#user-box li a:hover,
#user-box li a:focus {
    background: #f7f7f7;
    text-decoration: none;
}
#user-box li .icon {
    color: #009cd5;
    float: left;
    margin: 0 0 0 -25px;
    font-size: 16px;
}
#user-box li.logout a {
    border-top: 1px solid #ddd;
}
#user-box li.logout .icon {
    color: #666;
}
#user-box li.logout a:hover .icon,
#user-box li.logout a:focus .icon {
    color: #c00;
}

#user-box .btn {
    border-radius: 5px;
    margin-top: -5px;
    margin-bottom: -5px;
    padding-right: 10px;
    padding-left: 10px;
    text-transform: none;
}
#user-box .btn.cta .icon {
    margin: 0 6px 0 1px;
    color: #fff;
}

#name {
    position: relative;
    max-width: 180px;
    overflow: hidden;
    margin: -5px -10px -3px !important;
    padding: 5px 35px 5px 10px;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}
#name.active,
#name.active:hover,
#name.active:focus,
#name.active:active {
    background: #eee;
    text-decoration: none;
}
#name .icon {
    position: absolute;
    top: 6px;
    right: 10px;
}

/* =Nav
-------------------------------------------------- */

#nav {
    float: right;
    margin: 0;
}
#nav a,
#nav li {
    float: left;
}
#nav li {
    position: relative;
    padding: 0 0 0 40px;
}
#nav li:before {
    display: none;
}
#nav li.sub,
#nav li.parent {
    padding-right: 13px;
}
#nav li.sub > a:after,
#nav li.parent > a:after {
    display: inline-block;
    margin: 8px -13px 0 5px;
    border: solid;
    border-width: 4px 4px 0 4px;
    border-color: #000 transparent transparent;
    content: '';
    vertical-align: top;
}
#nav a {
    padding-bottom: 2px;
    color: #3c3a37;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
}
#nav a.open {
    margin: -5px -23px -5px -10px !important;
    padding: 5px 23px 5px 10px !important;
    border: none !important;
    background: #eee;
}
#nav .parent a.open {
    border-radius: 5px 5px 0 0;
    background: #e7effe;
}
#nav a:hover,
#nav a:focus {
    padding-bottom: 0;
    text-decoration: none;
    border-bottom: 2px solid #3c3a37;
}
#nav > li > a.active {
    border-bottom: 2px solid #3c3a37;
    padding-bottom: 0;
    text-decoration: none;
}
#nav ul {
    display: none;
    position: absolute;
    top: 25px;
    left: 30px;
    z-index: 15;
    margin: 0;
    border: 10px solid #ddd;
    border: 1px solid rgba(0,0,0,0.2);
    background: #fff;
    background-clip: padding-box;
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}
#nav ul li {
    float: none;
    padding: 0;
}
#nav ul li:before {
    display: none;
}
#nav ul li a {
    display: block;
    float: none;
    margin: 0;
    padding: 5px 10px 5px 10px;
    white-space: nowrap;
    color: #009cd5;
    font-size: 14px;
    font-weight: 400;
    text-transform: none;
}
#nav ul li a:hover,
#nav ul li a:focus {
    padding-bottom: 5px;
    background: #f7f7f7;
    color: #0082b2;
    text-decoration: none;
    border: none;
}
#nav ul li .icon {
    color: #009cd5;
    float: left;
    margin: 0 0 0 -25px;
    font-size: 16px;
}
#nav ul li.logout a {
    border-top: 1px solid #ddd;
}
#nav ul li.logout .icon {
    color: #666;
}
#nav ul li.logout a:hover .icon,
#nav ul li.logout a:focus .icon {
    color: #c00;
}

#nav .submenu {
    display: none;
    position: absolute;
    top: 25px;
    z-index: 10;
    margin: 0 0 0 -30px;
    padding: 20px;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}
#nav .submenu.double {
    width: 500px;
}
#nav .submenu.double ul {
    float: left;
}
#nav .submenu.double ul:first-child {
    margin-right: 20px;
    padding-right: 20px;
    border-right: 1px solid #e5e5e5;
}
#nav .submenu ul {
    display: block;
    position: relative;
    float: none;
    top: 0;
    left: 0;
    margin: 0;
    border: 0;
    background: none;
    box-shadow: none;
}
#nav .submenu li.title {
    padding: 3px 10px 13px;
    color: #999;
    font-size: 12px;
    line-height: 16px;
    font-weight: bold;
}
#nav .submenu p {
    margin: 0;
    padding: 0 10px 10px;
    color: #999;
    font-weight: bold;

}
#nav .submenu a,
#nav .submenu a:hover,
#nav .submenu a:focus {
    color: #000;
    font-size: 15px;
    padding: 3px 10px;
}
#nav .submenu a:hover,
#nav .submenu a:focus {
    background: #e7effe;
}
#nav .submenu a.active {
    text-decoration: underline;
}

/* =Hero
-------------------------------------------------- */

#hero {
    position: relative;
    height: 700px;
    overflow: hidden;
    background: #e8f0ff url(hero.png) no-repeat 50% 50%;
    -webkit-background-size: 1221px 698px;
    -moz-background-size: 1221px 698px;
    -o-background-size: 1221px 698px;
    background-size: 1221px 698px;
    color: #000;
    font-size: 20px;
    line-height: 26px;
    text-align: center;
    text-shadow: 0 1px 0 #fff;
}
#hero .bg {
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    width: 670px;
    padding: 20px 20px 150px;
    background: rgba(240,245,254,0.8);
    box-shadow: 0 0 20px 20px rgba(240,245,254,0.8);
}
#hero .wrap {
    height: 340px;
    padding: 100px 44px 0;
}
#hero .primary {
    margin: 0;
    font-size: 30px;
    line-height: 38px;
}
#hero .action {
    margin-top: 20px;
}
#hero #test-us {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 25px 0 0;
    padding: 20px 20px;
    background: rgba(240,245,254,0.8);
    box-shadow: 0 0 20px 20px rgba(240,245,254,0.8);
}
#hero #test-us p {
    margin: 10px 0 0;
}
#hero #test-us p.error {
    margin: 5px 0 0;
    font-size: 16px;
    line-height: 20px;
}
#hero #test-us input[type="text"] {
    height: 48px;
    width: 360px;
    padding: 0 10px;
    border: 1px solid #009cd5;
    border-radius: 5px;
    font-size: 20px;
    line-height: 40px;
}
#hero #test-us.focus {
}
#hero #test-us .btn {
    width: 360px;
}
#hero #test-us .action {
    position: relative;
    overflow: hidden;
    height: 0;
    margin-top: 10px;
    transition-duration: 0.1s;
}
#hero #test-us.focus .action {
    height: 48px;
}
#hero #test-us .test-success .icon {
    display: block;
    color: #7b0;
    font-size: 40px;
    line-height: 40px;
}

#hero #test-us input[type="text"].txt {
    height: 30px;
    width: 360px;
    background: #fff;
}
#hero #test-us .form {
    margin: 0;
}
#hero #test-us .form dd {
    text-align: left;
}
#hero #test-us .form.horizontal dt {
    width: 100px;
    margin: 0 0 0 -120px;
}
#hero #test-us .form.horizontal dd {
    padding: 0 0 10px 0;
}
#hero #test-us .form .field-error {
    margin-top: 0;
}

.test-us {
    text-align: center;
    border: solid #e5e5e5;
    border-width: 1px 0;
    background: #faf8f6;
    margin: 40px -44px;
    padding: 30px 44px 40px;
    font-size: 16px;
    line-height: 22px;
}
.test-us input[type="text"] {
    height: 48px;
    width: 360px;
    padding: 0 10px;
    border: 1px solid #009cd5;
    border-radius: 5px;
    font-size: 20px;
    line-height: 40px;
}
.test-us .btn {
    width: 160px;
    margin: 0 0 0 10px;
}

.test-us input[type="text"].txt {
    height: 30px;
    width: 300px;
    background: #fff;
}
.test-us .form {
    margin: 0;
}
.test-us .form dd {
    text-align: left;
}
.test-us .form.horizontal dt {
    width: 260px;
}
.test-us .form.horizontal dd {
    padding: 0 0 10px 280px;
}
.test-us .test-success .icon {
    display: block;
    color: #7b0;
    font-size: 40px;
    line-height: 40px;
}

#hero.weknow {
    background: #e7effe;
    color: #000;
    height: 337px;
    border-bottom: 52px solid #fff;
    overflow: visible;
}
#hero.weknow:after {
    display: none;
}
#hero.weknow .bg {
    position: static;
    height: 337px;
    padding: 0;
    background: url(heroweknow.png) no-repeat 50% 0;
    -webkit-background-size: 990px 337px;
    -moz-background-size: 990px 337px;
    -o-background-size: 990px 337px;
    background-size: 990px 337px;
    box-shadow: none;
    transform: translateY(0%) translateX(0%);
    font-size: 30px;
    line-height: 36px;
    text-align: left;
}
#hero.weknow .wrap {
    height: 337px;
    padding: 40px 44px 0;
}
#hero.weknow p span {
    background: rgba(231,239,254,0.85);
}

/* =What we do
-------------------------------------------------- */

#what-we-do {
    margin: -40px 0 0;
    font-size: 22px;
    line-height: 26px;
}
#what-we-do li:before {
    position: absolute;
    top: 0;
    left: 50%;
    width: 258px;
    height: 128px;
    margin-left: -298px;
    background: url(what-we-do.png) no-repeat 50% 0;
    -webkit-background-size: 258px 527px;
    -moz-background-size: 258px 527px;
    -o-background-size: 258px 527px;
    background-size: 258px 527px;
    content: '';
}
#what-we-do li.alt:before {
    height: 128px;
    margin-left: 40px;
}
#what-we-do li {
    position: relative;
    padding: 40px 0 0 50%;
    min-height: 128px;
}
#what-we-do li.alt {
    padding-left: 0;
    padding-right: 50%;
    text-align: right;
}
#what-we-do li.interaction:before { background-position: 50% 0; }
#what-we-do li.identity:before { background-position: 50% -133px; }
#what-we-do li.sla:before { background-position: 50% -266px; }
#what-we-do li.cause:before { background-position: 50% -399px; }

.what-we-do-question {
    margin: 50px 0 0;
    font-size: 30px;
    line-height: 36px;
    text-align: center;
}

/* =Solution
-------------------------------------------------- */

#solution {
    background: #fff;
}
#solution .col-6 {
    margin-top: -50px;
}
#solution .wrap {
    padding: 0 44px 70px;
}
#solution .container {
    display: block;
    position: relative;
    z-index: 5;
    height: 472px;
    border-radius: 5px;
    background: #faf8f6;
    box-shadow: inset 0 0 70px rgba(0,0,0,0.05), 0 5px 15px rgba(0,0,0,0.3), 0 0 10px rgba(255,255,255,0.7);
}
#solution .container:hover,
#solution .container:focus {
    text-decoration: none;
    box-shadow: inset 0 0 70px rgba(0,0,0,0.05), 0 5px 15px rgba(0,81,110,0.3), 0 0 10px rgba(255,255,255,0.7);
}
#solution .container .content {
    position: relative;
    height: 100%;
    overflow: hidden;
    padding: 20px;
    border-radius: 5px;
}
#solution .container .content.inline {
    padding: 0;
}
#solution .container .content.overflow {
    overflow: visible;
}
#solution .steps {
    margin: 80px 0 0;
    font-size: 18px;
    line-height: 24px;
}
#solution .steps a {
    display: block;
    position: relative;
    left: 0;
    min-height: 80px;
    margin: 13px 0 0;
    padding: 16px 20px 16px 105px;
    color: #000;
    transition-duration: 0.1s;
}
#solution .steps a:hover,
#solution .steps a:focus {
    text-decoration: none;
}
#solution .steps a:hover {
    color: #000;
    left: -10px;
}
#solution .steps a:after {
    position: absolute;
    top: 50%;
    right: -30px;
    margin: -37px 0 0;
    border: solid;
    border-width: 37px 37px 37px 0;
    border-color: transparent #ddd transparent transparent;
    content: '';
    opacity: 0;
    transition-duration: 0.6s;
}
#solution .steps a.active:after {
    opacity: 1;
}
#solution .steps li {
    position: relative;
    margin: 13px 0 0;
    padding: 0;
}
#solution .steps li:nth-child(1) { z-index: 4; }
#solution .steps li:nth-child(2) { z-index: 3; }
#solution .steps li:nth-child(3) { z-index: 2; }
#solution .steps li:nth-child(4) { z-index: 1; }
#solution .steps li:before {
    display: none;
}
#solution .steps .bullet {
    position: relative;
    float: left;
    width: 80px;
    height: 80px;
    margin: -16px 0 0 -105px;
}
#solution .steps .icon {
    position: relative;
    z-index: 2;
    width: 80px;
    height: 80px;
    border-radius: 40px;
    background: #009cd5;
    color: #fff;
    font-size: 38px;
    line-height: 80px;
    text-align: center;
}
#solution .steps .icon-gauge {
    line-height: 74px;
}
#solution .steps .icon:after {
    position: absolute;
    bottom: -10px;
    left: 50%;
    width: 16px;
    height: 20px;
    margin: 0 0 0 -8px;
    background: #009cd5;
    content: '';
}
#solution .steps .bullet:before,
#solution .steps .bullet:after {
    display: block;
    position: absolute;
    left: 50%;
    bottom: -20px;
    margin-left: -15px;
    border: solid;
    border-width: 15px 15px 0 15px;
    border-color: #009cd5 transparent transparent transparent;
    content: '';
}
#solution .steps .bullet:before {
    bottom: -24px;
    margin-left: -19px;
    border-width: 19px 19px 0 19px;
    border-color: #fff transparent transparent transparent;
}

#solution .steps li:last-child .icon:after,
#solution .steps li:last-child .bullet:before,
#solution .steps li:last-child .bullet:after {
    display: none;
}

#solution .steps .style-color01 .icon,
#solution .steps .style-color01 .icon:after {
    background: #009cd5;
}
#solution .steps .bullet.style-color01:after {
    border-color: #009cd5 transparent transparent transparent;
}
#solution .steps .style-color02 .icon,
#solution .steps .style-color02 .icon:after {
    background: #ed1;
}
#solution .steps .bullet.style-color02:after {
    border-color: #ed1 transparent transparent transparent;
}
#solution .steps .style-color03 .icon,
#solution .steps .style-color03 .icon:after {
    background: #f90;
}
#solution .steps .bullet.style-color03:after {
    border-color: #f90 transparent transparent transparent;
}
#solution .steps .style-color03-alt .icon,
#solution .steps .style-color03-alt .icon:after {
    background: #e04848;
}
#solution .steps .bullet.style-color03-alt:after {
    border-color: #e04848 transparent transparent transparent;
}
#solution .steps .style-color04 .icon,
#solution .steps .style-color04 .icon:after {
    background: #7b0;
}
#solution .steps .bullet.style-color04:after {
    border-color: #7b0 transparent transparent transparent;
}

/* content #1 */

#solution .c1 {
    color: #666;
    text-align: center;
    text-shadow: 0 1px #fff;
}
#solution .c1 .icon {
    margin: 0 0 0;
    color: #e04848;
    font-size: 72px;
    line-height: 72px;
}
#solution .c1 .icon-volume-up {
    position: relative;
    top: -5px;
    left: 3px;
    width: 38px;
    height: 72px;
    margin: 0;
    overflow: hidden;
    vertical-align: top;
}
#solution .c1 .icon-volume-up:before  {
    position: absolute;
    top: 0;
    right: 0;
}
#solution .c1 .message {
    margin: 30px 0 40px;
    font-size: 18px;
    line-height: 24px;
}
#solution .c1 .value {
    display: block;
    margin: 20px 0 5px;
    font-size: 24px;
    line-height: 30px;
}
#solution .c1 .error {
    color: #e04848;
}
#solution .c1 .slow {
    color: #f90;
}
#solution .c1 .transactions {
    margin-bottom: 40px;
    line-height: 14px;
}
#solution .c1 strong {
    color: #000;
}
#solution .c1 .btn,
#solution .c1 .btn:hover,
#solution .c1 .btn:focus {
    background: #009cd5 !important;
    box-shadow: none !important;
    cursor: default !important;
}

/* content #2 & #3 */

#solution table {
    width: 100%;
    margin: 0;
    line-height: 50px;
    table-layout: fixed;
    text-shadow: 0 1px #fff;
}
#solution th,
#solution td {
    padding: 0 10px;
}
#solution th {
    background: #ebe9e7;
    color: #999;
    font-size: 16px;
}
#solution table td {
    font-size: 16px;
}
#solution table.alt td {
    font-size: 18px;
}
#solution td {
    font-size: 14px;
    border-bottom: 1px solid #e5e5e5;
}
#solution .max-w-100p {
    display: block;
}
#solution th:nth-child(1),
#solution td:nth-child(1) {
    padding-left: 20px;
}
#solution th.ico,
#solution td.ico {
    width: 50px;
}
#solution th.value,
#solution td.value {
    width: 100px;
    padding-right: 20px;
    text-align: right;
}
#solution td .icon {
    display: block;
    color: #009cd5;
    font-size: 22px;
}
#solution tr.error td,
#solution tr.error .icon {
    color: #e04848;
}
#solution tr.ok td,
#solution tr.ok .icon {
    color: #7b0;
}
#solution .c2:after,
#solution .c3:after {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 150px;
    box-shadow: inset 0 -150px 100px -100px #faf8f6;
    content: '';
}

/* content #4 */

#solution .c4 .header {
    margin: 0;
    padding: 20px 20px 20px 90px;
    background: #eeecea;
    color: #666;
}
#solution .c4 .header strong {
    display: block;
    font-size: 18px;
    line-height: 24px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #000;
}
#solution .c4 .header .icon {
    float: left;
    margin: -3px 0 0 -68px;
    font-size: 44px;
    line-height: 50px;
}
#solution .c4 .meta-form {
    padding: 0 20px;
}
#solution .c4 .meta-form p {
    float: left;
    width: 25%;
    color: #666;
}
#solution .c4 .meta-form p:nth-child(2) {
    width: 75%;
}
#solution .c4 .meta-form p strong {
    display: block;
    font-size: 18px;
    line-height: 24px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #000;
}
#solution .c4 .row {
    margin: 0;
    padding: 0 20px;
}
#solution .c4 .col-6 {
    position: relative;
    overflow: hidden;
    height: 250px;
    margin: 30px 0 0;
    padding: 0 20px 0 0;
    border-right: 1px solid #e5e5e5;
}
#solution .c4 .col-6 + .col-6 {
    width: 43%;
    margin-left: 7%;
    padding: 0;
    border: none;
}
#solution .c4 .col-6 strong {
    display: block;
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 22px;
    color: #aaa;
}
#solution .c4 .sql {
    width: 50px;
    height: 5px;
    background: #ddd;
    box-shadow: 20px 13px 0 #ddd,
    20px 26px 0 #ddd,
    -20px 39px 0 #ddd,
    20px 52px 0 #ddd,
    40px 65px 0 #ddd,
    40px 78px 0 #ddd;
}
#solution .c4 .call-stack {
    width: 130px;
    height: 5px;
    background: #ddd;
    box-shadow: -30px 13px 0 #ddd,
    -20px 26px 0 #ddd,
    0 39px 0 #ddd,
    -40px 52px 0 #ddd,
    -45px 65px 0 #ddd,
    -55px 78px 0 #ddd,
    -20px 91px 0 #ddd,
    -10px 104px 0 #ddd,
    0 117px 0 #ddd,
    -30px 130px 0 #ddd,
    -35px 143px 0 #ddd,
    -35px 156px 0 #ddd,
    -10px 169px 0 #ddd,
    -5px 182px 0 #ddd,
    -45px 195px 0 #ddd,
    -45px 208px 0 #ddd;
}

/* =Intro
-------------------------------------------------- */

div#intro {
    position: relative;
    margin-top: -1px;
    background: url(bg01.png);
    color: #666;
    font-size: 17px;
    line-height: 24px;
    text-align: center;
    text-shadow: 0 1px rgba(255,255,255,0.75);
}
#intro h1 {
    color: #000;
    font-size: 30px;
    line-height: 36px;
}
#intro h1 .icon {
    color: #009cd5;
    font-size: 36px;
}
#intro h1.alt {
    font-size: 18px;
    line-height: 20px;
    color: #999;
}
#intro h1 .icon-database {
    margin-right: 3px;
}
#intro .wrap {
    position: relative;
    padding: 40px 44px;
    border-color: #ccc;
}
#intro .wrap.statement {
    color: #333;
    font-size: 24px;
    line-height: 30px;
}
#intro .wrap.statement p {
    width: auto;
    max-width: 1024px;
    margin: 0;
}
#intro .wrap.statement p + p {
    margin: 20px 0 0;
}
#intro p {
    margin-left: auto;
    margin-right: auto;
    max-width: 700px;
}
#intro .important {
    margin-top: 20px;
    color: #000;
    font-size: 20px;
    line-height: 26px;
    font-weight: bold;
}
#intro .desc {
    font-size: 16px;
}
#intro .important + p {
    margin-top: 10px;
}
#intro .action {
    margin-top: 30px;
}
#intro .action .alt {
    display: block;
    float: none;
    margin: 5px 0 0;
    font-size: 16px;
}
#intro .action .alt a {
    font-weight: bold;
}
#intro .action .or {
    display: inline-block;
    padding: 0 10px;
    line-height: 48px;
}
#intro .tree {
    position: relative;
    width: auto;
    max-width: 100%;
    height: 45px;
    margin: -10px 0 0;
    color: #666;
    font-size: 15px;
    font-weight: bold;
    text-transform: uppercase;
}
#intro .tree:before {
    display: block;
    position: absolute;
    top: 10px;
    left: 135px;
    right: 135px;
    height: 35px;
    border-radius: 20px 20px 0 0;
    border: solid #c2bcb6;
    border-width: 2px 2px 0;
    box-shadow: inset 1px 1px 0 rgba(255,255,255,0.75), 1px 0 0 rgba(255,255,255,0.75);
    content: '';
}
#intro .tree:after {
    display: block;
    position: absolute;
    top: 8px;
    left: 50%;
    z-index: 0;
    height: 35px;
    width: 2px;
    margin: 0 0 0 -1px;
    background: #c2bcb6;
    box-shadow: 1px 0 0 rgba(255,255,255,0.75);
    content: '';
}
#intro .tree span {
    display: inline-block;
    position: relative;
    z-index: 1;
    padding: 0 10px;
    background: url(bg01.png);
}
#intro .tree.alt:before {
    left: 98px;
    right: 98px;
}
#intro .tree.alt:after {
    width: 220px;
    margin: 0 0 0 -110px;
    background: transparent;
    border: solid #c2bcb6;
    border-width: 0 2px;
    box-shadow: 1px 0 0 rgba(255,255,255,0.75), inset 1px 0 0 rgba(255,255,255,0.75);;
}
#intro .problems {
    font-size: 15px;
    line-height: 20px;
    color: #444;
}
#intro .problems h2 {
    margin: 10px 0 0;
    color: #000;
}
#intro .problems h2 .icon {
    color: #009cd5;
}
#intro .problems.alt {
    padding-top: 70px;
}
#intro .problems.alt h2 {
    position: relative;
}
#intro .problems.alt h2 .icon {
    position: absolute;
    top: -60px;
    left: 0px;
    width: 100%;
    font-size: 40px;
    line-height: 40px;
    margin-bottom: 20px;
    text-align: center;
}
#intro .problems.alt h2 .icon-database {
    font-size: 36px;
}
#intro .problems.alt i.label {
    top: -20px;
}
#intro .problems p {
    margin-top: 20px;
}
#intro .problems .btn.alt {
    border-color: #ccc;
}
#intro .problems .btn.alt:hover,
#intro .problems .btn.alt:focus {
    border-color: #25baf0;
}
#intro .problems .btn.alt:active {
    border-color: #008cbf;
}
#intro .problems i.label {
    text-shadow: 0 1px 0 rgba(0,0,0,0.2);
}
#intro .problems p.desc {
    font-size: 14px;
}
#intro .msg-icon {
    text-align: left;
    border-color: #ccc;
    background: rgba(255,255,255,0.25);
}
#intro .msg-icon p {
    max-width: 900px;
}

#intro .prev,
#intro .next {
    position: absolute;
    top: 50%;
    left: -30px;
    height: 100px;
    min-width: 60px;
    margin-top: -50px;
}
#intro .next {
    left: auto;
    right: -30px;
}
#intro .prev p,
#intro .next p {
    width: 60px;
    height: 60px;
    margin: 0;
}
#intro .prev a,
#intro .next a {
    float: right;
    height: 60px;
    margin-top: 20px;
    padding: 0 0 0 60px;
    border-radius: 100px;
    background: #faf8f6;
    box-shadow: 0 3px 10px rgba(0,0,0,0.3);
    transition-duration: 0.3s;
}
#intro .next a {
    float: left;
    padding: 0 60px 0 0;
}
#intro .prev a:hover,
#intro .prev a:focus,
#intro .next a:hover,
#intro .next a:focus {
    text-decoration: none;
    padding: 0 30px 0 60px;
    background: #fff;/* #25baf0 */
    /*text-shadow: 0 -1px 0 rgba(0,0,0,0.2);*/
}
#intro .prev a:active,
#intro .next a:active {
    background: #008cbf;
}
#intro .next a:hover,
#intro .next a:focus {
    left: auto;
    margin-left: 0;
    padding: 0 60px 0 30px;
}
#intro .prev .icon,
#intro .next .icon {
    float: left;
    width: 60px;
    height: 60px;
    overflow: hidden;
    margin: -2px 0 0 -60px;
    font-size: 50px;
    line-height: 60px;
    color: #aaa;
    vertical-align: middle;
    text-indent: -2px;
}
#intro .next .icon {
    float: right;
    margin: -2px -60px 0 0;
    text-indent: 2px;
}
#intro .prev span,
#intro .next span {
    display: inline-block;
    width: 0;
    overflow: hidden;
    font-size: 18px;
    line-height: 60px;
    font-weight: bold;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
    color: #666;
    transition-duration: 0.3s;
}
#intro .prev a:hover span,
#intro .prev a:focus span,
#intro .next a:hover span,
#intro .next a:focus span {
    width: 200px;
    color: #009cd5;
}
#intro .prev a:hover .icon,
#intro .prev a:focus .icon,
#intro .next a:hover .icon,
#intro .next a:focus .icon {
    color: #009cd5;
}
#intro .prev a:active span,
#intro .next a:active span,
#intro .prev a:active .icon,
#intro .next a:active .icon {
    color: #fff;
    text-shadow: none;
}

#intro .border-crossing-btn {
    position: relative;
    z-index: 1;
    margin: 30px auto -64px;

}
#intro select,
#intro textarea,
#intro input[type="text"],
#intro input[type="email"],
#intro input[type="password"] {
    background-color: #fff;
    border-color: #bbb;
}
#intro span.radio {
    border-color: #aaa;
}

#intro.alt {
    background: #009cd5;
    box-shadow: inset 0 10px 10px -10px rgba(0,0,0,0.3);
    color: #fff;
    font-size: 18px;
    line-height: 24px;
    text-shadow: 0 1px 0 rgba(0,0,0,0.2);
}
#intro.alt h2 {
    margin: 0;
}

#intro .steps {
    position: relative;
    overflow: hidden;
    border-top: 1px solid #ccc;
    background: rgba(255,255,255,0.2);
    box-shadow: inset 0 -6px 0 #aaa;
}
#intro .steps .wrap {
    padding: 0;
}
#intro .steps .styled-steps {
    margin: 0 0 -6px;
}
#intro .steps.first:after,
#intro .steps.last:after {
    position: absolute;
    top: 0;
    right: 50%;
    width: 50%;
    height: 110px;
    margin-right: 470px;
    /*transform: translateX(50%);*/
    background: rgba(255,255,255,0.5);
    content: '';
}
#intro .steps.last:after {
    left: 50%;
    right: auto;
    margin-left: 470px;
    margin-right: 0;
}

@media only screen and (max-width: 1500px) {
    #intro .prev a {
        float: left;
    }
    #intro .next a {
        float: right;
    }
}

.statement {
    padding: 20px 0;
    color: #aaa;
    font-size: 38px;
    font-weight: 300;
    line-height: 44px;
    text-align: center;
}
.statement.small {
    padding: 20px 100px;
    font-size: 28px;
    line-height: 36px;
}

/* =highlight facts
-------------------------------------------------- */

.highlight-facts {
    text-align: center;
    font-size: 18px;
    margin-top: 40px;
}
.highlight-facts p {
    margin: 0;
    padding: 15px 10px;
    border-radius: 5px;
    background: #faf8f6;
    color: #333;
    text-shadow: 0 1px 0 #fff;
}
.highlight-facts .icon {
    display: block;
    padding-bottom: 10px;
    color: #009cd5;
    font-size: 36px;
    line-height: 36px;
}

/* =Quotes
-------------------------------------------------- */

.single-quote {
    position: relative;
    margin: 30px 100px 80px;
    padding: 20px 100px;
    border: 2px solid #e5e5e5;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 3px 3px rgba(0,0,0,0.05);
    color: #666;
    font-size: 18px;
    font-style: italic;
    line-height: 24px;
    text-align: center;
}
.single-quote.alt {
    margin: 40px 0 90px;
    padding: 20px 30px;
    color: #333;
    font-size: 16px;
    line-height: 22px;
    text-align: left;
}
.single-quote.alt:before,
.single-quote.alt:after {
    display: none;
}
.single-quote:before,
.single-quote:after {
    position: absolute;
    top: 0;
    color: #ddd;
    font-size: 100px;
    line-height: 100px;
    font-style: italic;
    font-family: Georgia;
}
.single-quote:before {
    content: "“";
    left: 0;
}
.single-quote:after {
    content: "”";
    right: 15px;
}
.single-quote > :first-child {
    margin-top: 0;
}
.single-quote .author {
    position: absolute;
    top: 100%;
    left: 75%;
    padding: 20px 0 0;
    font-size: 16px;
    font-style: normal;
    line-height: 20px;
    text-align: left;
}
.single-quote.alt .author {
    left: 65%;
}
.single-quote .author strong {
    display: block;
}
.single-quote .author:after,
.single-quote .author:before {
    display: block;
    position: absolute;
    top: 0;
    left: -70px;
    border: 24px solid;
    border-color: #e5e5e5 #e5e5e5 transparent transparent;
    content: '';
}
.single-quote .author:after {
    left: -68px;
    border: 22px solid;
    border-color: #fff #fff transparent transparent;
}

.single-quote.compact {
    margin: 20px 0 0;
    padding: 10px 20px;
    border-width: 1px;
    border-radius: 3px;
    font-size: 13px;
    line-height: 20px;
    color: #000;
    text-align: left;
}
.single-quote.compact:after,
.single-quote.compact:before,
.single-quote.compact .author:after,
.single-quote.compact .author:before {
    display: none;
}
.single-quote.compact .author {
    display: block;
    position: static;
    margin: 5px 0 0 30px;
    padding: 0;
    color: #666;
    font-size: 11px;
}
.persons .single-quote {
    border-color: #ccd7eb;
    background: #f9fbff;
}
.persons .single-quote:after,
.persons .single-quote:before {
    display: block;
    position: absolute;
    top: 50%;
    right: -10px;
    left: auto;
    margin: -10px 0 0;
    border: 10px solid;
    border-width: 10px 0 10px 10px;
    border-color: transparent #ccd7eb;
    box-shadow: 0 3px 3px rgba(0,0,0,0.3);
    content: '';
    box-shadow: none;
}
.persons .single-quote:after {
    right: -8px;
    border-color: transparent #f9fbff;
}
.persons li.alt .single-quote:after,
.persons li.alt .single-quote:before {
    right: auto;
    border-width: 10px 10px 10px 0;
}
.persons li.alt .single-quote:before {
    left: -10px;
}
.persons li.alt .single-quote:after {
    left: -8px;

}

/* =features
-------------------------------------------------- */

.feature {
    text-align: center;
    margin-top: 20px;
    padding-top: 160px;
}
.feature:first-child {
    margin-top: 0;
}
a.feature {
    display: block;
}
a.feature:hover,
a.feature:focus {
    text-decoration: none;
}
.feature h2 {
    margin: 0;
    font-size: 22px;
    text-transform: uppercase;
}
.feature h2 .icon {
    color: #ccc;
}
.feature + .feature {
    margin-top: 10px;
}

.feature.special {
    position: relative;
    z-index: 10;
    padding: 15px;
    background: #009cd5;
    border: 0;
    color: #fff;
    font-size: 24px;
    line-height: 28px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: left;
}
.feature.special p:first-child {
    margin-top: 0;
}
.feature.special .icon-agent {
    position: absolute;
    bottom: 0;
    right: 10px;
    height: 65px;
    overflow: hidden;
    font-size: 80px;
    line-height: 1em;
}
.feature.special .cta {
    display: -moz-inline-box;
    display: inline-block;
    padding: 0 10px 0 15px;
    background: #fff;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    color: #009cd5 !important;
    font-size: 14px !important;
    line-height: 30px !important;
    font-weight: bold;
    text-align: center;
    text-decoration: none !important;
    vertical-align: top;
    text-transform: uppercase;
    white-space: nowrap !important;
}
.feature.special .cta .icon {
    margin: 1px 0 -2px 5px;
    vertical-align: top;
}
a.feature.special:hover,
a.feature.special:focus {
    background: #25baf0;
}

.feature.special.alt:before {
    display: block;
    position: absolute;
    left: 100%;
    top: 0;
    width: 45px;
    height: 100%;
    background: #009cd5;
    content: '';
}
.feature.special.alt:hover:before,
.feature.special.alt:focus:before {
    background: #25baf0;
}
.feature.special.alt:after {
    display: block;
    position: absolute;
    top: -20px;
    left: 100%;
    margin: 0 0 0 25px;
    border: 10px solid;
    border-color: transparent transparent #0272bc #0272bc;
    content: '';
}
.feature.special.alt .icon-agent {
    right: -10px;
}


.feature.special.plus {
    z-index: 9;
    margin: 0;
    padding-bottom: 25px;
    background: #faf8f6;
    box-shadow: inset 0 10px 10px -12px rgba(0,0,0,0.3);
    font-size: 13px;
    line-height: 20px;
    text-transform: none;
    font-weight: 400;
}
.feature.special.plus h2 {
    color: #009cd5;
    font-size: 15px;
    line-height: 20px;
    text-transform: none;
    color: #666;
}
.feature.special.plus:after {
    display: block;
    position: absolute;
    left: 100%;
    top: 0;
    width: 45px;
    height: 100%;
    background: #faf8f6;
    box-shadow: inset 0 10px 10px -12px rgba(0,0,0,0.3);
    content: '';
}

/* =Banner
-------------------------------------------------- */

.banner {
    display: block;
    position: relative;
    clear: both;
    margin: 0 -1px;
    padding: 10px 25px;
    background: #009cd5;
    color: #fff;
    font-size: 24px;
    line-height: 30px;
    text-transform: uppercase;
    font-weight: bold;
}
.banner:hover,
.banner:focus {
    background: #25baf0;
    color: #fff;
    text-decoration: none;
}
.banner p {
    margin: 0;
}
.banner p.cta {
    position: absolute;
    top: 50%;
    right: 20px;
    margin-top: -18px;
}
.banner p.cta .btn.alt {
    border: 0;
}
.banner:hover .btn.alt,
.banner:focus .btn.alt,
.banner .btn.alt:hover,
.banner .btn.alt:focus {
    background: #fff;
    color: #009cd5 !important;
    text-decoration: none;
    text-shadow: none;
}

/* alt */

.banner.alt {
    padding: 30px 30px 30px 135px;
    background: #f3f2ee;
    color: #009cd5;
    font-size: 15px;
    line-height: 20px;
    font-weight: 200;
    text-transform: none;
}
.banner.alt .icon {
    position: absolute;
    top: 50%;
    left: 30px;
    margin-top: -0.5em;
    font-size: 72px;
    line-height: 1em;
}
.banner.alt span {
    display: block;
    margin-top: 10px;
}
.banner.alt span.btn {
    display: inline-block;
}
.banner.alt span.main {
    padding-bottom: 3px;
    font-size: 26px;
    line-height: 32px;
}
.banner.alt span.main,
.banner.alt span.main + span {
    margin-top: 0;
}
a.banner.alt:hover,
a.banner.alt:focus {
    background: #f7f6f3;
}
a.banner.alt .btn,
a.banner.alt .btn:hover,
a.banner.alt .btn:focus {
    background: #009cd5 !important;
}
a.banner.alt .btn.cta,
a.banner.alt .btn.cta:hover,
a.banner.alt .btn.cta:focus {
    background: #ff8500 !important;
}
#content.important a.banner.alt span.main {
    color: #000;
    font-size: 22px;
    line-height: 26px;
    margin-bottom: 10px;
}

a.banner.cta {
    background: #f90;
}
a.banner.cta:hover,
a.banner.cta:focus {
    background: #ffb000;
}
a.banner.page-end {
    margin: 0 -44px -44px;
    padding: 20px;
}
.article + a.banner.page-end {
    margin-top: -20px;
}
a.banner.page-end .btn.big {
    border: none;
    margin: -2px 0 -10px 10px;
}

/* =Floating content
-------------------------------------------------- */

.floating-content.floating {
    position: fixed;
    z-index: 20;
    top: 0;
}
.feature.special.floating-content.floating {
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}
.floating-content.floating .feature.special.alt,
.feature.special.alt.floating-content.floating {
    box-shadow: 21px -21px 10px 23px rgba(0,0,0,0.2);
}
.floating-content.floating .feature.special.plus {
    box-shadow: 21px -21px 10px 23px rgba(0,0,0,0.1);
}
.floating-content.floating .feature.special.plus:after {
    box-shadow: none;
}
.floating-wrap.alt {
    margin-top: -10px;
}
.floating-wrap.alt .floating-content {
    padding-top: 10px;
}

/* =Clients
-------------------------------------------------- */

#clients {
    position: relative;
    border-bottom: 1px solid #e5e5e5;
    text-align: center;
}
#clients .wrap {
    padding-left: 50px;
    padding-right: 50px;
}
.borderless #clients .wrap {
    padding-left: 0;
    padding-right: 0;
}
#clients p {
    margin:  10px 0;
    color: #c9c7c5;
    font-size: 16px;
    text-align: center;
    font-weight: bold;
}
#clients img {
    margin: 0 auto;
}

/* =Page title
-------------------------------------------------- */

#page-title h1,
#page-title p.title {
    float: left;
    margin: 0;
    font-size: 13px;
    line-height: 20px;
    font-weight: bold;
    text-transform: uppercase;
}
#page-title .search {
    float: right;
    min-width: 200px;
    margin: 0;
}
#page-title .search .txt {
    float: left;
    width: 200px;
    margin: -5px 0;
    padding-right: 34px;
    border-radius: 20px;
}
#page-title .search .btn {
    float: left;
    width: 34px;
    height: 30px;
    overflow: visible;
    margin: -5px 0 -5px -34px;
    border: none;
    border-radius: 15px;
    background: transparent;
    text-align: center;
}
#page-title .search .btn .icon {
    float: left;
    color: #009cd5;
    font-size: 18px;
    margin-top: -3px;
}
#page-title .search .btn:focus .icon,
#page-title .search .btn:hover .icon {
    color: #000;
}

a.download .icon-down-big {
    font-size: 80%;
}

/* =User nav
-------------------------------------------------- */

#user-nav .wrap {
    padding: 0 44px;
}

#user-nav ul {
    margin: 0 0 0 -20px;
}
#user-nav a,
#user-nav li {
    float: left;
}
#user-nav li {
    padding: 0;
}
#user-nav li:before {
    display: none;
}
#user-nav a {
    position: relative;
    padding: 0 15px;
    color: #000;
    line-height: 40px;
    font-weight: bold;
    text-transform: uppercase;
}
#user-nav small {
    font-size: 13px;
    text-transform: none;
}
#user-nav .active a:after,
#user-nav .active a:before {
    display: inline-block;
    position: absolute;
    top: 40px;
    left: 50%;
    margin-left: -15px;
    border: solid;
    border-width: 15px 15px 0;
    border-color: #faf8f6 transparent transparent;
    content: '';
}
#user-nav .active a:before {
    margin-left: -16px;
    border-width: 16px 16px 0;
    border-top-color: #ddd;
}
#user-nav.alt {
    border-bottom: 1px solid #ccc;
}
#user-nav.alt .active a:before {
    border-top-color: #bbb;
}
#user-nav .icon {
    color: #009cd5;
    margin: 9px 10px 0 0;
    font-size: 20px;
    line-height: 20px;
    vertical-align: top;
}

/* =Content
-------------------------------------------------- */

.sep {
    color: #ccc;
    padding: 0 5px;
}
p.following,
ul.following,
ol.following {
    margin-top: 0;
}
.highlight {
    color: #009cd5;
}
.degrade {
    color: #bbb;
}
h2 + .flex-video {
    margin-top: 20px;
}

/* grid img */

.img-grid {
    margin: 30px 0;
    color: #666;
    font-size: 13px;
    line-height: 18px;
}
.img-grid p {
    margin: 10px 0 0;
}
.img-grid .img-wrap {
    height: 150px;
}
.img-grid a {
    display: block;
    position: relative;
    height: 100%;
    overflow: hidden;
    border: 5px solid #fff;
    background: #faf8f6;
    box-shadow: 0 0 0 1px #e5e5e5;
}
.img-grid a:hover,
.img-grid a:focus {
    box-shadow: 0 0 0 1px #999;
}
.img-grid img {
    max-width: 200%;
}
.img-grid .placeholder img {
    max-height: 100%;
}

/* Steps */

.styled-steps {
    margin: -44px -44px 0;
    list-style: none;
}
.styled-steps li {
    float: left;
    width: 33.333%;
}
.styled-steps.items-4 li {
    width: 25%;
}
.styled-steps.items-3.alt li {
    width: 30%;
}
.styled-steps.items-3.alt li.wide {
    width: 40%;
}
.styled-steps a,
.styled-steps span {
    display: block;
    position: relative;
    padding: 15px 10px;
    border-bottom: 6px solid #eee;
    color: #333;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
}
.styled-steps a:hover,
.styled-steps a:focus {
    text-decoration: none;
    background: #f8f6f4;
    color: #000;
}
.styled-steps a:before,
.styled-steps a:after,
.styled-steps span:before,
.styled-steps span:after {
    position: absolute;
    z-index: 2;
    right: -25px;
    top: 50%;
    margin: -56px 0 0;
    border: solid;
    border-color: transparent transparent transparent #bbb;
    border-width: 56px 0 56px 25px;
    content: '';
}
.styled-steps a:after,
.styled-steps span:after {
    right: -24px;
    margin: -55px 0 0;
    border-color: transparent transparent transparent #fff;
    border-width: 55px 0 55px 24px;
}
.styled-steps li:last-child a:before,
.styled-steps li:last-child a:after,
.styled-steps li:last-child span:before,
.styled-steps li:last-child span:after {
    display: none;
}
.styled-steps a:hover:after,
.styled-steps a:focus:after {
    border-color: transparent transparent transparent #f8f6f4;
}
.styled-steps .icon {
    display: block;
    margin: 0 0 6px;
    font-size: 48px;
    line-height: 50px;
}
.styled-steps a.style-color01,
.styled-steps span.style-color01 {
    border-bottom-color: #009cd5;
}
.styled-steps a.style-color01 .icon,
.styled-steps span.style-color01 .icon {
    color: #009cd5;
}
.styled-steps a.style-color02,
.styled-steps span.style-color02 {
    border-bottom-color: #f93;
}
.styled-steps a.style-color02 .icon,
.styled-steps span.style-color02 .icon {
    color: #f93;
}
.styled-steps a.style-color03,
.styled-steps span.style-color03 {
    border-bottom-color: #86dc5c;
}
.styled-steps a.style-color03 .icon,
.styled-steps span.style-color03 .icon {
    color: #86dc5c;
}
.styled-steps a.style-color04,
.styled-steps span.style-color04 {
    border-bottom-color: #ed1;
}
.styled-steps a.style-color04 .icon,
.styled-steps span.style-color04 .icon {
    color: #ed1;
}
.styled-steps .inactive .style-color01 .icon,
.styled-steps .inactive .style-color02 .icon,
.styled-steps .inactive .style-color03 .icon,
.styled-steps .inactive .style-color04 .icon {
    color: #aaa;
}
.styled-steps .inactive .style-color01,
.styled-steps .inactive .style-color02,
.styled-steps .inactive .style-color03,
.styled-steps .inactive .style-color04 {
    border-bottom-color: #aaa;
}
.styled-steps .inactive a,
.styled-steps .inactive span {
    color: #888;
}
.styled-steps li.active a {
    background: rgba(255,255,255,0.5);
}
.styled-steps small {
    display: block;
    font-size: 12px;
    line-height: 14px;
}
.steps-nav {
    overflow: hidden;
}
.steps-nav .forward {
    float: right;
}
.steps-nav .back {
    float: left;
}
#intro .styled-steps {
    height: 109px;
}
#intro .styled-steps a,
#intro .styled-steps span {
    padding: 10px;
    box-shadow: inset -70px 0 50px -50px #e4e1de;
}
#intro .styled-steps a:hover,
#intro .styled-steps a:focus,
#intro .styled-steps .active a:hover,
#intro .styled-steps .active a:focus {
    background: #fff;
    box-shadow: none;
}
#intro .styled-steps .icon {
    margin: 0;
}
#intro .styled-steps a:before,
#intro .styled-steps a:after,
#intro .styled-steps span:before,
#intro .styled-steps span:after {
    position: absolute;
    z-index: 2;
    right: -25px;
    top: 50%;
    margin: -56px 0 0;
    border: solid;
    border-color: transparent transparent transparent #bbb;
    border-width: 56px 0 56px 25px;
    content: '';
}
#intro .styled-steps a:after,
#intro .styled-steps span:after {
    right: -24px;
    margin: -55px 0 0;
    border-color: transparent transparent transparent #e4e1de;
    border-width: 55px 0 55px 24px;
}
#intro .styled-steps .active a,
#intro .styled-steps .active span {
    box-shadow: inset -70px 0 50px -50px #f2f1ef;
}
#intro .styled-steps .active a:after,
#intro .styled-steps .active span:after {
    border-color: transparent transparent transparent #f2f1ef;
}
#intro .styled-steps a:hover:after,
#intro .styled-steps a:focus:after,
#intro .styled-steps .active a:hover:after,
#intro .styled-steps .active a:focus:after {
    border-color: transparent transparent transparent #fff !important;
}
#intro .styled-steps li:last-child a:before,
#intro .styled-steps li:last-child a:after,
#intro .styled-steps li:last-child span:before,
#intro .styled-steps li:last-child span:after,
#intro .styled-steps li.active:last-child a:after,
#intro .styled-steps li.active:last-child span:after {
    display: none;
}
#intro .styled-steps a:hover:after,
#intro .styled-steps a:focus:after {
    border-color: transparent transparent transparent #f8f6f4;
}

.intro {
    text-align: center;
    margin: 30px 0;
    font-size: 16px;
    line-height: 24px;
}
.intro p + h1 {
    margin-top: 30px;
}
.intro .disclaimer {
    line-height: 16px;
}
.intro .statement {
    margin: 0;
    padding: 0 0 20px;
    color: #000;
    font-size: 30px;
    line-height: 36px;
}
.intro .statement .big-icon {
    margin-bottom: 20px;
}
.intro .statement p {
    margin: 0;
}
.intro .statement .meta {
    font-size: 16px;
}
.intro .statement .meta .sep {
    padding: 0 10px;
}
.intro.page-error {
    text-align: center;
}
.intro.alt {
    text-align: center;
    margin: 0;
    color: #000;
}
.intro.alt strong {

}
.intro.page-error p {
    margin: 5px 0 0;
    font-size: 13px;
    line-height: 20px;
}
.intro.page-error h1 {
    display: inline-block;
    margin-bottom: 40px;
    padding: 0 60px;
    background: url(bug.gif) no-repeat 100% 3px;
    color: #999;
    font-size: 50px;
    line-height: 60px;
    font-family: sans-serif;
    font-weight: bold;
}
.intro .new {
    color: #7b0;
    font-size: 40px;
}
.intro p .meta,
.intro p .meta a {
    color: #999;
    font-size: 11px;
    line-height: 14px;
}

.introduction {
    margin-bottom: 50px;
    color: #666;
    font-size: 16px;
    line-height: 24px;
}
.intro + .introduction,
.introduction + .introduction {
    margin-top: 70px;
}
.introduction h2 {
    color: #000;
    margin: 0;
}
.introduction h3 {
    color: #000;
    font-size: 16px;
}
.introduction .icon-list {
    margin-left: 0;
}
.introduction .icon-list li {
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 2.5em;
}
.introduction .icon-list .icon {
    color: #009cd5;
    font-size: 24px;

}
.introduction .icon-list ul .icon {
    color: #999;
    font-size: 18px;
}
.introduction .icon-list.alt li + li {
    margin-top: 20px;
}
.introduction .icon-list.alt ul {
    margin-top: 20px;
}
.introduction .icon-list.alt ul li + li {
    margin-top: 0;
}
.introduction .icon-list .benefit {
    margin-top: 5px;
}
.introduction .icon-list .benefit strong {
    color: #000;
}
.introduction.alt {
    background: #faf8f6;
    margin-left: -44px;
    margin-right: -44px;
    border: solid #e5e5e5;
    border-width: 1px 0;
    padding: 1px 44px 30px;
}
.introduction.alt h2,
.introduction.alt .msg-icon {
    margin-top: 29px;
}
.introduction.alt input[type="email"],
.introduction.alt input[type="text"] {
    background: #fff;
}
.introduction.bordered {
    margin: 0 -44px !important;
    padding: 44px;
    border-bottom: 1px solid #e5e5e5;
}
.introduction.bordered.last {
    border: 0;
}
.introduction .visual {
    color: #999;
    font-style: italic;
    font-weight: bold;
    text-align: center;
    font-size: 14px;
}
.introduction .visual p {
    margin-top: 6px;
}
.introduction .visual p.title {
    margin-bottom: 10px;
    font-style: normal;
    color: #666;
}
.introduction .visual img {
    margin-top: 0px;
}
.introduction .visual a {
    display: block;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}
.introduction .visual a:hover .zoom,
.introduction .visual a:focus .zoom {
    opacity: 0.2;
}
.introduction .visual .zoom {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    overflow: hidden;
    margin: -50px 0 0 -50px;
    padding: 0 0 0 1px;
    border-radius: 50px;
    background: #000;
    text-indent: -9000px;
    transition-duration: 0.3s;
    opacity: 0;
    vertical-align: top;
}
.introduction .visual .zoom:before,
.introduction .visual .zoom:after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 46px;
    height: 16px;
    margin: -8px 0 0 -23px;
    background: #fff;
    content: '';
}
.introduction .visual .zoom:after {
    width: 16px;
    height: 46px;
    margin: -23px 0 0 -8px;
}
#content.prominent .introduction.alt-right .col-6 {
    float: right;
    position: relative;
}
#content.prominent .introduction img.aligned {
    position: absolute;
    top: 50%;
    left: 20px;
    width: 405px;
    transform: translateY(-50%);
}

.intro-article {
    color: #333;
    font-size: 16px;
    line-height: 24px;
}
.intro-article > :first-child {
    margin-top: 0;
}

#content .wrap > .introduction:last-child {
    border-bottom: none;
    padding-bottom: 20px;
}

.info {
    font-size: 16px;
}
.info p,
.info ol,
.info ul {
    margin-top: 40px;
}
.info .ending {
    color: #009cd5;
    font-weight: bold;
    text-align: center;
}
.info .author {
    padding-left: 25px;
}
.info .main,
.info.alt .main {
    margin-top: 30px;
    font-size: 24px;
    line-height: 30px;
    font-weight: 200;
    color: #009cd5;
}
.info.alt p {
    font-size: 15px;
    margin-top: 10px;
}

#content .wrap {
    padding: 44px;
}
#content .wrap.compact {
    padding: 24px;
}
#content .wrap.inline {
    padding: 0;
}
#content .wrap.agent {
    position: relative;
}
.box.agent:after,
#content .wrap.agent:after {
    position: absolute;
    right: 50px;
    bottom: 0;
    color: #ddd;
    width: 1em;
    height: 0.8em;
    overflow: hidden;
    line-height: 1em;
    font-family: "fontello";
    font-size: 140px;
    content: '\e801';
}
.box.agent:after {
    right: 10px;
}

/* steps */

.box.steps {
    padding: 15px;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    text-align: center;
    font-size: 15px;
    text-transform: uppercase;
}
.box.steps .icon {
    font-size: 50px;
    line-height: 50px;
}
.box.steps p {
    margin: 10px 0 0;
}
.box.steps strong {
    display: block;
    font-size: 18px;
    line-height: 24px;
}

#main > p:first-child,
#main > H1:first-child,
#main > H2:first-child,
#main > .box:first-child,
#main > .nav-pills:first-child,
#main > .title-row:first-child,
#sidebar > p:first-child,
#sidebar > H1:first-child,
#sidebar > H2:first-child,
#sidebar > .box:first-child,
#sidebar > .nav-pills:first-child,
#sidebar > .title-row:first-child,
#content .wrap > p:first-child,
#content .wrap > H1:first-child,
#content .wrap > H2:first-child,
#content .wrap > .box:first-child,
#content .wrap > .nav-pills:first-child,
#content .wrap > .title-row:first-child,
#content .wrap > .msg-icon:first-child,
#content .wrap > .ng-hide:first-child + p,
#content .wrap > .ng-hide:first-child + H1,
#content .wrap > .ng-hide:first-child + H2,
#content .wrap > .ng-hide:first-child + .box,
#content .wrap > .ng-hide:first-child + .nav-pills,
#content .wrap > .ng-hide:first-child + .title-row,
#content .wrap > .hidden:first-child + p,
#content .wrap > .hidden:first-child + H1,
#content .wrap > .hidden:first-child + H2,
#content .wrap > .hidden:first-child + .box,
#content .wrap > .hidden:first-child + .nav-pills,
#content .wrap > .hidden:first-child + .title-row,
#content .wrap > .row:first-child > [class*="col"] > p:first-child,
#content .wrap > .row:first-child > [class*="col"] > H1:first-child,
#content .wrap > .row:first-child > [class*="col"] > H2:first-child,
#content .wrap > .row:first-child > [class*="col"] > .box:first-child,
#content .wrap > .row:first-child > [class*="col"] > .nav-pills:first-child,
#content .wrap > .row:first-child > [class*="col"] > .title-row:first-child,
#content .wrap > .content-menu:first-child + .row > [class*="col"] > p:first-child,
#content .wrap > .content-menu:first-child + .row > [class*="col"] > H1:first-child,
#content .wrap > .content-menu:first-child + .row > [class*="col"] > H2:first-child,
#content .wrap > .content-menu:first-child + .row > [class*="col"] > .box:first-child,
#content .wrap > .content-menu:first-child + .row > [class*="col"] > .nav-pills:first-child,
#content .wrap > .content-menu:first-child + .row > [class*="col"] > .title-row:first-child,
#content .wrap > h1.hidden:first-child + .row > [class*="col"] > .box:first-child  {
    margin-top: 0;
}
#main {
    width: 100%;
}
#content .wrap.split {
    padding-left: 270px;
}
#content .wrap.split:after {
    clear: both;
    display: table;
    content: '';
}
#content .wrap.split #sidebar {
    float: left;
    width: 226px;
    margin-left: -226px;
}
#content .wrap.split #main {
    float: left;
    padding-left: 44px;
}

#content .wrap.compact.split {
    padding-left: 310px;
}
#content .wrap.compact.split #sidebar {
    width: 286px;
    margin-left: -286px;
}
#content .wrap.compact.split #main {
    padding-left: 24px;
}

#content .wrap.inline.split {
    padding-left: 358px;
}
#content .wrap.inline.split #sidebar {
    width: 334px;
    margin-left: -334px;
}
#content .wrap.inline.split #main {
    padding-left: 24px;
}

#content .wrap.split-alt {
    padding-right: 270px;
}
#content .wrap.split-alt:after {
    clear: both;
    display: table;
    content: '';
}
#content .wrap.split-alt #sidebar {
    float: right;
    width: 226px;
    margin-right: -226px;
}
#content .wrap.split-alt #sidebar {
    float: right;
}
#content .wrap.split-alt #main {
    float: left;
    padding-right: 44px;
}

#content .wrap.compact.split-alt {
    padding-right: 310px;
}
#content .wrap.compact.split-alt #sidebar {
    width: 286px;
    margin-right: -286px;
}
#content .wrap.compact.split-alt #main {
    padding-right: 24px;
}

#content .wrap.inline.split-alt {
    padding-right: 286px;
}
#content .wrap.inline.split-alt #sidebar {
    width: 286px;
    margin-right: -286px;
}
#content .wrap.inline.split-alt #main {
    padding-right: 0;
    padding-bottom: 24px;
    border-right: 1px solid #e5e5e5;
}

#content.frontpage {
    font-size: 16px;
    line-height: 22px;
}
#content.frontpage h2 {
    font-size: 30px;
    line-height: 36px;
    font-weight: 400;
}
#content.frontpage h3 {
    font-size: 18px;
    line-height: 24px;
}

#content .front-area {
    overflow: hidden;
}
#content .front-area .wrap {
    padding: 70px 0;
    font-size: 20px;
    line-height: 26px;
}
#content .front-area .wrap h2 {
    margin: 0;
    font-size: 30px;
    line-height: 38px;
}
.front-area.blue,
.front-area.measures {
    background: #009cd5;
    color: #fff;
}
.front-area.integrate,
.front-area.light-blue {
    background: #e7effe;
}
.front-area.gray,
.front-area.user-impact {
    background: #f1efed;
}
.front-area h2 {

}
.front-area .aligner {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.front-area.clients {
    text-align: center;
}
#content .front-area.clients .wrap {
    padding: 30px 0;
}
.front-area.clients .wrap:after {
    display: block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 1295px;
    height: 80px;
    margin: 10px 0 0;
    background: url(area-clients.png);
    background-size: 1295px 80px;
    content: '';
}

#content .front-area.measures .wrap {
    text-align: center;
}
.front-area.measures .wrap:after {
    display: block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 1158px;
    height: 251px;
    margin: 70px 0 0;
    background: url(area-measures.png);
    background-size: 1158px 251px;
    content: '';
}
.front-area.user-impact {
    position: relative;
}
.front-area.user-impact .wrap {
    position: relative;
    z-index: 1;
    min-height: 593px;
    padding-left: 400px !important;
}
.front-area.user-impact:after {
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1159px;
    height: 453px;
    margin: 70px 0 0;
    background: url(area-user-impact.png);
    background-size: 1159px 453px;
    content: '';
}
.front-area.root-causes {
    position: relative;
}
.front-area.root-causes .wrap {
    position: relative;
    z-index: 1;
    min-height: 656px;
    padding-right: 400px !important;
}
.front-area.root-causes .aligner {
    right: 400px;
}
.front-area.root-causes ul {
    margin: 40px 0 0 10px;
}
.front-area.root-causes li {
    margin: 20px 0 0;
}
.front-area.root-causes:after {
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1196px;
    height: 556px;
    margin: 55px 0 0;
    background: url(area-root-causes.png);
    background-size: 1196px 556px;
    content: '';
}
.front-area.integrate {
    text-align: center;
}
.front-area.integrate .row {
    position: relative;
    margin: 40px 0 0;
}
.front-area.integrate .row:before {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    margin: 0 0 0 -1px;
    background: #aad2ef;
    content: '';
}
.front-area.integrate .row p {
    margin: 0;
}
.front-area.integrate .row p + p {
    margin: 20px 0 0;
}
.front-area.try .action {
    margin-top: 40px;
}


.single-pane-of-glass {
    margin: 40px -20px 0;
    padding: 166px 0 0;
    background: url(single-pane-of-glass.png) no-repeat 50% 0;
    background-size: 811px 166px;
}
.single-pane-of-glass h3 a {
    color: #000;
}
.users-to-application {
    margin: 40px 0 0;
    padding: 213px 0 20px;
    background: url(users-to-application.png) no-repeat 50% 0;
    background-size: 495px 193px;
    font-size: 22px;
    line-height: 28px;
}
.users-to-RC {
    position: relative;
    margin: 40px 0 0;
    padding: 216px 0 20px;
    background: url(users-to-RC.png) no-repeat 50% 0;
    background-size: 750px 196px;
    font-size: 22px;
    line-height: 28px;
}
.users-to-RC p {
    padding: 0 100px;
}
.users-to-RC .rc {
    position: absolute;
    top: 20px;
    left: 498px;
    padding: 0 0 0 10px;
    border-left: 5px solid #c00;
    text-align: left;
}
.users-to-RC .rc .title {
    margin: 0 0 10px;
    font-size: 24px;
    color: #c00;
}
.users-to-RC .rc p,
.users-to-RC .rc code {
    display: block;
    margin: 0;
    padding: 0;
    font-size: 18px;
    line-height: 22px;
}
.environments {
    padding-bottom: 60px !important;
}
.environments .box {
    padding: 20px 30px;
    border-radius: 5px;
    background: #f6f4f2;
}
.environments .box.main {
    margin-top: 40px;
    padding: 20px 40px;
    background: #e7effe;
    font-size: 18px;
    line-height: 24px;
}
.environments .box.main h3 {
    font-size: 24px;
    line-height: 28px;
}
.environments .box h3 .icon {
    font-size: 2em;
    vertical-align: top;
}
.environments .box .icon-award { color: #f90; }
.environments .box .icon-thumbs-up-alt { color: #7b0; }
.environments .box .icon-block { color: #c00; }
.environments .box > :first-child {
    margin-top: 0;
}
.environments .box .sep {
    font-weight: 400;
}

#content.prominent {
    font-size: 16px;
    line-height: 22px;
}
#content.prominent h2 {
    font-size: 24px;
    line-height: 30px;
    font-weight: 400;
}
#content.prominent h3 {
    font-size: 18px;
    line-height: 24px;
}

.columns-2 {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 40px;
    -moz-column-gap: 40px;
    column-gap: 40px;
}

.placeholder {
    min-height: 20px;
    border: 1px solid #d8c57a;
    background: #ffeda5;
    color: #7f6b1b;
    text-align: center;
    font-weight: bold;
    content: 'Placeholder';
}

/* =content menu
-------------------------------------------------- */

.content-menu {
    margin: -20px -20px 30px;
    padding: 0;
}
h1 + .content-menu {
    margin-top: 20px;
}
.content-menu + h1.big {
    margin-top: 40px;
}
.wrap.compact .content-menu {
    margin: 0 0 30px;
}
.content-menu li {
    float: left;
    width: 33.33333%;
    margin: 0;
    padding: 0;
}
.content-menu.items-2 li {
    width: 50%;
}
.content-menu li:before {
    display: none;
}
.content-menu a {
    display: block;
    padding: 13px 12px 11px;
    border-bottom: 5px solid #ccc;
    border-left: 1px solid #f1f1f1;
    border-right: 1px solid #d0d0d0;
    background: #e5e5e5;
    color: #000;
    font-size: 18px;
    line-height: 30px;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(255,255,255,1);
}
.content-menu li:first-child a {
    border-radius: 5px 0 0 5px;
    border-left: none;
}
.content-menu li:last-child a {
    border-radius: 0 5px 5px 0;
    border-right: none;
}
.content-menu a:hover,
.content-menu a:focus {
    background: #eee;
    text-decoration: none;
}
.content-menu a.active,
.content-menu .ui-tabs-active a {
    position: relative;
    border-left: none;
    border-right: none;
    background: #666;
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0,0,0,1);
}
.content-menu a.active:after,
.content-menu .ui-tabs-active a:after {
    position: absolute;
    bottom: -15px;
    left: 50%;
    margin-left: -10px;
    border: solid;
    border-width: 10px 10px 0;
    border-color: #ccc transparent transparent;
    content: '';
}
.content-menu span.thin {
    font-weight: 400;
    opacity: 0.5;
}

.content-menu .style-color01 a {
    border-bottom-color: #009cd5;
}
.content-menu .style-color01 a.active:after,
.content-menu .style-color01.ui-tabs-active a:after {
    border-color: #009cd5 transparent transparent;
}
.content-menu .style-color02 a {
    border-bottom-color: #f93;
}
.content-menu .style-color02 a.active:after,
.content-menu .style-color02.ui-tabs-active a:after {
    border-color: #f93 transparent transparent;
}
.content-menu .style-color03 a {
    border-bottom-color: #86dc5c;
}
.content-menu .style-color03 a.active:after,
.content-menu .style-color03.ui-tabs-active a:after {
    border-color: #86dc5c transparent transparent;
}

h2.style-color01,
h3.style-color01,
h2.style-color02,
h3.style-color02,
h2.style-color03,
h3.style-color03 {
    font-size: 18px;
    line-height: 24px;
    text-transform: uppercase;
}
h2.style-color01,
h3.style-color01,
.icon.style-color01 {
    color: #009cd5;
}
h2.style-color02,
h3.style-color02,
.icon.style-color02 {
    color: #ec7500;
}
h2.style-color03,
h3.style-color03,
.icon.style-color03 {
    color: #6cc042;
}
h2.style-color01 .icon.degrade,
h3.style-color01 .icon.degrade,
h2.style-color02 .icon.degrade,
h3.style-color02 .icon.degrade,
h2.style-color03 .icon.degrade,
h3.style-color03 .icon.degrade {
    color: #777;
    margin-right: 5px;
}
h2.style-color01 .icon-info,
h3.style-color01 .icon-info,
h2.style-color02 .icon-info,
h3.style-color02 .icon-info,
h2.style-color03 .icon-info,
h3.style-color03 .icon-info {
    margin-right: 0 !important;
}

.box.style-color01 .content,
.box.style-color02 .content,
.box.style-color03 .content {
    border-top: solid #ccc;
    border-top-width: 5px !important;
}
.box.style-color01 .content {
    border-top-color: #009cd5;
}
.box.style-color02 .content {
    border-top-color: #f93;
}
.box.style-color03 .content {
    border-top-color: #86dc5c;
}

/* =sidebar
-------------------------------------------------- */

#sidebar-toggler {
    display: none;
}
#sidebar .box:first-child {
    margin-top: -6px;
}
#sidebar .floating .box:first-child {
    margin-top: 0;
}
#sidebar .box {
    position: relative;
}
#sidebar .box:first-child:before {
    display: inline-block;
    position: absolute;
    top: -38px;
    right: -1px;
    width: 1px;
    height: 44px;
    background: #e5e5e5;
    content: '';
}
#sidebar .box.menu:first-child:before {
    right: -1px;
}
#sidebar .box {
    border: solid #e5e5e5;
    border-width: 0 1px 1px 0;
    margin: 0 0 0 -44px;
    padding: 20px 20px 20px 44px;
}
#sidebar .box > :first-child {
    margin: 0;
}
#sidebar .floating .box:last-child {
    margin-bottom: 0;
}
#sidebar .sidebar-support .msg-icon {
    margin: 0;
}
#sidebar .box h2 {
    font-size: 18px;
    line-height: 24px;
}
#sidebar .box h2 .icon {
    font-size: 20px;
    margin: -1px 5px 0 0;
    vertical-align: top;
}
#sidebar .box .support-menu li {
    margin-right: -20px;
}
#sidebar .box .support-menu li li {
    margin-right: 0;
}

/* =grid
-------------------------------------------------- */

.row {
    margin-right: -10px;
    margin-left: -10px;
}
.row.compact {
    margin-right: -5px;
    margin-left: -5px;
}
.row.inline {
    margin-right: 0;
    margin-left: 0;
}
.row.cosy {
    margin-right: -20px;
    margin-left: -20px;
}
.row.comfort {
    margin-right: -40px;
    margin-left: -40px;
}
.col-1, .col-1p5, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    position: relative;
    float: left;
    min-height: 1px;
    margin: 0;
    padding-right: 10px;
    padding-left: 10px;
}
.row.compact > .col-1, .row.compact > .col-1p5, .row.compact > .col-2, .row.compact > .col-3, .row.compact > .col-4, .row.compact > .col-5, .row.compact > .col-6, .row.compact > .col-7, .row.compact > .col-8, .row.compact > .col-9, .row.compact > .col-10, .row.compact > .col-11, .row.compact > .col-12 {
    padding-right: 5px;
    padding-left: 5px;
}
.row.inline > .col-1, .row.inline > .col-1p5, .row.inline > .col-2, .row.inline > .col-3, .row.inline > .col-4, .row.inline > .col-5, .row.inline > .col-6, .row.inline > .col-7, .row.inline > .col-8, .row.inline > .col-9, .row.inline > .col-10, .row.inline > .col-11, .row.inline > .col-12 {
    padding-right: 0;
    padding-left: 0;
}
.row.cosy > .col-1, .row.cosy > .col-1p5, .row.cosy > .col-2, .row.cosy > .col-3, .row.cosy > .col-4, .row.cosy > .col-5, .row.cosy > .col-6, .row.cosy > .col-7, .row.cosy > .col-8, .row.cosy > .col-9, .row.cosy > .col-10, .row.cosy > .col-11, .row.cosy > .col-12 {
    padding-right: 20px;
    padding-left: 20px;
}
.row.comfort > .col-1, .row.comfort > .col-1p5, .row.comfort > .col-2, .row.comfort > .col-3, .row.comfort > .col-4, .row.comfort > .col-5, .row.comfort > .col-6, .row.comfort > .col-7, .row.comfort > .col-8, .row.comfort > .col-9, .row.comfort > .col-10, .row.comfort > .col-11, .row.comfort > .col-12 {
    padding-right: 40px;
    padding-left: 40px;
}

.row.form-gap > :first-child {
    padding-right: 20px;
}
.row.form-gap > :nth-child(2) {
    padding-left: 20px;
}
.row.form-gap > .col-6 + .col-6:last-child {
    padding-left: 30px;
}
.row.form-gap + .row.form-gap .form {
    margin-top: 20px;
}
.row.form-gap + .row.form-gap .form.horizontal {
    margin: 0;
}
.col-12 { width: 100%; }
.col-11 { width: 91.66666667%; }
.col-10 { width: 83.33333333%; }
.col-9 { width: 75%; }
.col-8 { width: 66.66666667%; }
.col-7 { width: 58.33333333%; }
.col-6 { width: 50%; }
.col-5 { width: 41.66666667%; }
.col-4 { width: 33.33333333%; }
.col-3 { width: 25%; }
.col-2 { width: 16.66666667%; }
.col-1p5 { width: 12.5%; }
.col-1 { width: 8.33333333%; }

.offset-12 { margin-left: 100%; }
.offset-11 { margin-left: 91.66666667%; }
.offset-10 { margin-left: 83.33333333%; }
.offset-9 { margin-left: 75%; }
.offset-8 { margin-left: 66.66666667%; }
.offset-7 { margin-left: 58.33333333%; }
.offset-6 { margin-left: 50%; }
.offset-5 { margin-left: 41.66666667%; }
.offset-4 { margin-left: 33.33333333%; }
.offset-3 { margin-left: 25%; }
.offset-2 { margin-left: 16.66666667%; }
.offset-1p5 { margin-left: 12.5%; }
.offset-1 { margin-left: 8.33333333%; }

/* =Buttons
-------------------------------------------------- */

/* Small */

a.btn,
span.btn,
input.btn {
    position: relative;
    padding: 0 20px;
    background: #009cd5;
    border: none;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: bold;
    text-align: center;
    text-decoration: none !important;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
    outline: none;
    vertical-align: top;
    text-transform: uppercase;
    cursor: pointer;
}
a.btn,
span.btn {
    display: -moz-inline-box;
    display: inline-block;
    line-height: 30px !important;
    white-space: nowrap !important;
    -moz-user-select: none;
    -o-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}
input.btn {
    width: auto;
    height: 30px;
    overflow: visible;
    line-height: 14px !important;
}
a.btn:hover,
a.btn:focus,
span.btn:hover,
span.btn:focus,
input.btn:hover,
input.btn:focus {
    background: #25baf0;
}
a.btn:active,
span.btn:active,
input.btn:active {
    background: #008cbf;
    -moz-box-shadow: inset 0 2px 2px rgba(0,0,0,0.3);
    -webkit-box-shadow: inset 0 2px 2px rgba(0,0,0,0.3);
    box-shadow: inset 0 2px 2px rgba(0,0,0,0.3);
}
a.btn[disabled]:hover,
a.btn[disabled]:focus,
span.btn[disabled]:hover,
span.btn[disabled]:focus,
input.btn[disabled]:hover,
input.btn[disabled]:focus,
a.btn[disabled]:active,
span.btn[disabled]:active,
input.btn[disabled]:active {
    background-color: #009cd5;
    box-shadow: none;
}

/* alt */

a.btn.alt,
span.btn.alt,
input.btn.alt {
    border: 1px solid #ddd;
    background: #fff;
    color: #009cd5 !important;
    text-shadow: none;
}
a.btn.alt,
span.btn.alt {
    line-height: 28px !important;
}
a.btn.alt:hover,
a.btn.alt:focus,
span.btn.alt:hover,
span.btn.alt:focus,
input.btn.alt:hover,
input.btn.alt:focus {
    border-color: #25baf0;
    background: #25baf0;
    color: #fff !important;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
}
a.btn.alt:active,
span.btn.alt:active,
input.btn.alt:active,
a.btn.alt.active,
span.btn.alt.active,
input.btn.alt.active,
.nav-pills .active a.btn.alt,
.nav-pills .active span.btn.alt,
.nav-pills .active input.btn.alt,
.nav-pills .ui-state-active a.btn.alt,
.nav-pills .ui-state-active span.btn.alt,
.nav-pills .ui-state-active input.btn.alt  {
    border-color: #008cbf;
    background: #008cbf;
    color: #fff !important;
}
a.btn.alt.active,
span.btn.alt.active,
input.btn.alt.active,
.nav-pills .active a.btn.alt,
.nav-pills .active span.btn.alt,
.nav-pills .active input.btn.alt,
.nav-pills .ui-state-active a.btn.alt,
.nav-pills .ui-state-active span.btn.alt,
.nav-pills .ui-state-active input.btn.alt {
    -moz-box-shadow: inset 0 2px 2px rgba(0,0,0,0.3);
    -webkit-box-shadow: inset 0 2px 2px rgba(0,0,0,0.3);
    box-shadow: inset 0 2px 2px rgba(0,0,0,0.3);
}
a.btn.alt[disabled]:hover,
a.btn.alt[disabled]:focus,
span.btn.alt[disabled]:hover,
span.btn.alt[disabled]:focus,
input.btn.alt[disabled]:hover,
input.btn.alt[disabled]:focus,
a.btn.alt[disabled]:active,
span.btn.alt[disabled]:active,
input.btn.alt[disabled]:active {
    background: #fff;
    box-shadow: none;
    text-shadow: none;
}

/* cta */

a.btn.cta,
span.btn.cta,
input.btn.cta {
    background: #ff8500;
    color: #fff !important;
}
a.btn.cta:hover,
a.btn.cta:focus,
span.btn.cta:hover,
span.btn.cta:focus,
input.btn.cta:hover,
input.btn.cta:focus {
    background: #ffb000;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
}
a.btn.cta:active,
span.btn.cta:active,
input.btn.cta:active,
a.btn.cta.active,
span.btn.cta.active,
input.btn.cta.active,
.nav-pills .active a.btn.cta,
.nav-pills .active span.btn.cta,
.nav-pills .active input.btn.cta,
.nav-pills .ui-state-active a.btn.cta,
.nav-pills .ui-state-active span.btn.cta,
.nav-pills .ui-state-active input.btn.cta  {
    background: #e57700;
    color: #fff !important;
}
a.btn.cta.active,
span.btn.cta.active,
input.btn.cta.active,
.nav-pills .active a.btn.cta,
.nav-pills .active span.btn.cta,
.nav-pills .active input.btn.cta,
.nav-pills .ui-state-active a.btn.cta,
.nav-pills .ui-state-active span.btn.cta,
.nav-pills .ui-state-active input.btn.cta {
    -moz-box-shadow: inset 0 2px 2px rgba(0,0,0,0.3);
    -webkit-box-shadow: inset 0 2px 2px rgba(0,0,0,0.3);
    box-shadow: inset 0 2px 2px rgba(0,0,0,0.3);
}

/* transparent */

a.btn.alt,
span.btn.alt {
    line-height: 28px !important;
}
a.btn.transparent,
span.btn.transparent,
input.btn.transparent {
    border: 1px solid #009cd5;
    background: transparent;
    color: #009cd5 !important;
    text-shadow: none;
}
a.btn.transparent:hover,
a.btn.transparent:focus,
span.btn.transparent:hover,
span.btn.transparent:focus,
input.btn.transparent:hover,
input.btn.transparent:focus {
    background: rgba(0,156,213,0.10);
}

/* small */

a.btn.small,
span.btn.small,
input.btn.small {
    padding-left: 12px;
    padding-right: 12px;
    font-size: 11px !important;
}
a.btn.small,
span.btn.small {
    padding-top: 1px;
    line-height: 19px !important;
}
input.btn.small {
    height: 20px;
    padding-top: 1px;
    padding-bottom: 0px;
    line-height: 20px !important;
}

/* Big */

a.btn.big,
span.btn.big,
input.btn.big {
    font-size: 16px !important;
}
a.btn.big,
span.btn.big {
    padding-top: 1px;
    line-height: 33px !important;
}
input.btn.big {
    height: 36px;
    padding-top: 1px;
    padding-bottom: 0px;
    line-height: 20px !important;
}

/* Large */

a.btn.large,
span.btn.large,
input.btn.large {
    font-size: 18px !important;
}
a.btn.large,
span.btn.large {
    padding-top: 1px;
    line-height: 47px !important;
}
input.btn.large {
    height: 50px;
    padding-top: 1px;
    padding-bottom: 0px;
    line-height: 20px !important;
}
a.btn.large .icon,
span.btn.large .icon {
    margin-right: 5px;
}
a.btn.alt.large,
a.btn.transparent.large,
span.btn.alt.large,
span.btn.transparent.large {
    line-height: 45px !important;
}

/* huge */

a.btn.huge,
span.btn.huge,
input.btn.huge {
    padding-left: 30px;
    padding-right: 30px;
    font-size: 24px !important;
}
a.btn.huge,
span.btn.huge {
    padding-top: 1px;
    line-height: 61px !important;
}
input.btn.huge {
    height: 64px;
    padding-top: 1px;
    padding-bottom: 0px;
    line-height: 20px !important;
}

/* Link */

a.btn.link,
span.btn.link,
input.btn.link {
    padding-left: 10px;
    padding-right: 10px;
    background: none;
    color: #009cd5 !important;
    text-shadow: none;
    text-transform: none;
}
a.btn.link:hover,
a.btn.link:focus,
span.btn.link:hover,
span.btn.link:focus,
input.btn.link:hover,
input.btn.link:focus {
    color: #0082b2 !important;
}
a.btn.link:active,
span.btn.link:active,
input.btn.link:active {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.btn.thin {
    font-weight: 400 !important;
}

/* block */

a.btn.block,
span.btn.block {
    display: block;
}
input.btn.block {
    width: 100%;
}

/* wide */

a.btn.wide,
span.btn.wide,
input.btn.wide {
    padding-left: 50px;
    padding-right: 50px;
}

/* forward */

a.btn.forward,
span.btn.forward {
    padding-right: 40px;
}
a.btn.forward:before,
span.btn.forward:before {
    position: absolute;
    top: 1px;
    right: 15px;
    font-family: 'fontello';
    content: '\e833';
}
a.btn.block.forward,
span.btn.block.forward {
    padding-left: 40px;
}

/* back */

a.btn.back,
span.btn.back {
    padding-left: 40px;
}
a.btn.back:before,
span.btn.back:before {
    position: absolute;
    top: 1px;
    left: 15px;
    font-family: 'fontello';
    content: '\e832';
}
a.btn.block.back,
span.btn.block.back {
    padding-right: 40px;
}

/* more */

a.btn.more,
span.btn.more {
    padding-right: 40px;
}
a.btn.more:before,
span.btn.more:before {
    position: absolute;
    top: 0;
    right: 15px;
    font-family: 'fontello';
    content: '\e831';
}

a.btn.small.more,
span.btn.small.more {
    padding-right: 28px;
}
a.btn.small.more:before,
span.btn.small.more:before {
    right: 10px;
}

a.btn.block.forward,
span.btn.block.forward {
    padding-left: 40px;
}

/* less */

a.btn.less,
span.btn.less {
    padding-right: 40px;
}
a.btn.less:before,
span.btn.less:before {
    position: absolute;
    top: 0;
    right: 15px;
    font-family: 'fontello';
    content: '\e834';
}
a.btn.small.less,
span.btn.small.less {
    padding-right: 28px;
}
a.btn.small.less:before,
span.btn.small.less:before {
    right: 10px;
}

/* icons */

a.btn .icon,
span.btn .icon {
    margin-bottom: -1px;
}
a.btn .icon-left-open,
a.btn .icon-right-open,
span.btn .icon-left-open,
span.btn .icon-right-open {
    margin-top: 1px;
    margin-bottom: -2px;
    vertical-align: top;
}
a.btn.small .icon-left-open,
a.btn.small .icon-right-open,
span.btn.small .icon-left-open,
span.btn.small .icon-right-open {
    margin-top: 0;
    margin-bottom: 0;
    vertical-align: middle;
}
a.large .icon-video {
    margin-top: -1px;
    font-size: 18px;
    margin-left: 5px;
    vertical-align: top;
}

/* disabled */

.btn[disabled] {
    opacity: 0.5;
}

/* with description */

.btn .desc,
.btn:hover .desc,
.btn:focus .desc,
.btn:active .desc {
    position: absolute;
    top: -25px;
    left: 50%;
    width: 110px;
    margin-left: -55px;
    text-shadow: none !important;
    color: #aaa;
    font-size: 12px;
    font-weight: 400;
    text-align: center;
    text-transform: none;
    white-space: nowrap;
}

/* =Btn links
-------------------------------------------------- */

.btn-links {
    text-align: center;
    margin-top: 10px;
    line-height: 20px;
    font-size: 14px;
    font-weight: bold;
}
.btn-links.big {
    margin-top: 14px;
    font-size: 16px;
    line-height: 22px;
}
.btn-links.large {
    margin-top: 14px;
    font-size: 18px;
    line-height: 24px;
}
.btn-links a {
    display: inline-block;
    margin: 0 10px;
}
.btn-links a:hover,
.btn-links a:focus {
    text-decoration: none;
}
.page-area.blue .btn-links a {
    color: #cfeaf5 !important;
}
.page-area.blue .btn-links a:hover,
.page-area.blue .btn-links a:focus {
    color: #fff !important;
}
.btn-links a[disabled] {
    opacity: 0.25;
}

/* =Pricing
-------------------------------------------------- */

.pricing {
    padding-bottom: 30px;
}
.pricing .box.grid.alt {
    margin: 30px 0 0;
    font-size: 16px;
    line-height: 24px;
}
.pricing .action {
    margin-top: 30px;
}
.pricing .price {
    margin-top: 40px;
    text-align: right;
}
.pricing .price .ribbon,
.pricing .price .meta {
    display: block;
    padding-right: 15px;
}
.pricing .price .ribbon {
    position: relative;
    height: 64px;
    margin-left: 16px;
    background: #00a4d8;
    background: linear-gradient(to right, #00a4d8 0%,#0092d1 100%);
    box-shadow: inset -10px 0 10px -10px rgba(0,0,0,0.1);
    color: #fff;
    font-size: 48px;
    line-height: 64px;
}
.pricing .price .ribbon:before,
.pricing .price .ribbon:after {
    position: absolute;
    top: 0;
    left: -16px;
    border: solid;
    border-width: 16px 8px;
    border-color: #00a4d8 #00a4d8 transparent transparent;
    content: '';
}
.pricing .price .ribbon:after {
    top: 32px;
    border-color: transparent #00a4d8 #00a4d8 transparent;
}
.pricing .price .ribbon small {
    float: right;
    margin: 16px 0 0 10px;
    font-size: 12px;
    line-height: 16px;
    text-align: left;
}
.pricing .price .meta {
    margin-top: 5px;
    color: #666;
    font-size: 15px;
}
.pricing .box.grid ul.icon-list .icon {
    font-size: 18px;
}
.pricing .total {
    font-size: 30px;
    line-height: 36px;
    text-align: center;
}
.pricing span.disclaimer.alt.big {
    margin-left: 43px;
}
.pricing.alt {
    text-align: center;
}
.pricing.alt ul {
    display: inline-block;
    text-align: left;
}

/* new */

.pricing .actions {
    margin: 30px 0;
    text-align: center;
}
.pricing .check-list {
    font-size: 16px;
    line-height: 20px;
}
.pricing .check-list li + li {
    margin-top: 20px;
}
.pricing .check-list li:before {
    font-size: 20px;
}

/* Plans */

.pricing .plans {
    text-align: center;
    margin: 20px 0 30px;
    color: #666;
    font-size: 14px;
    line-height: 20px;
}
.pricing .plans .type {
    display: block;
    padding: 5px 0;
    color: #000;
    font-weight: bold;
    text-transform: uppercase;
}
.pricing .plans .plan {
    display: block;
    padding: 5px 0;
    border-top: 4px solid #999;
    background: #e5f5fb;
    box-shadow: inset -1px 0 0 #cedce1;
}
.pricing .plans .col-4 .plan,
.pricing .plans .jvm-plans .plan {
    border-top: 4px solid #ccc;
    background: #f5f5f5;
    box-shadow: none;
}
.pricing .plans .jvm-plans .plan {
    box-shadow: inset -1px 0 0 #cedce1;
}
.pricing .plans .jvm-plans .col-6 + .col-6 .plan {
    box-shadow: none;
}

.pricing .plans .desc {
    padding-bottom: 16px;
    border-bottom: 4px solid #999;
    box-shadow: inset -1px 0 0 #cedce1;
    font-size: 16px;
    line-height: 20px;
}
.pricing .plans .col-4 .desc,
.pricing .plans .jvm-plans .desc {
    border-bottom: 4px solid #ccc;
    box-shadow: none;
}
.pricing .plans .jvm-plans .desc {
    box-shadow: inset -1px 0 0 #cedce1;
}
.pricing .plans .jvm-plans .col-6 + .col-6 .desc {
    box-shadow: none;
}
.pricing .plans .desc p.price {
    height: 120px;
    margin: 0;
    padding-top: 31px;
    text-align: center;
}
.pricing .plans .price strong {
    display: block;
    padding-bottom: 5px;
    color: #333;
    font-size: 36px;
    line-height: 44px;
}
.pricing .plans .price .thin {
    font-weight: 400;
}
.pricing .plans .price .unit {
    font-weight: 400;
    font-size: 28px;
}
.pricing .plans .price .old {
    display: block;
    margin-top: -20px;
    text-decoration: line-through;
}
.pricing .plans .price .new {
    color: #009cd5;
}
.pricing .plans .desc p {
    margin-top: 18px;
}

/* plan details */

.plan-details {
    width: 100%;

}
.plan-details th,
.plan-details td {
    padding: 4px 5px;
    border-bottom: 1px solid #e5e5e5;
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
}
.plan-details thead th {
    color: #666;
    font-size: 12px;
    text-transform: uppercase;
}
.plan-details tbody th,
.plan-details tbody td {

}
.plan-details tbody th {
    width: 300px;
    padding: 4px 10px;
    text-align: left;
    background: #faf8f6;
}
.plan-details .icon-ok {
    color: #7b0;
    font-size: 24px;
    line-height: 20px;
    vertical-align: top;
}

/* =sneak peak
-------------------------------------------------- */

.sneakpeak {
    float: right;
    position: relative;
    height: 200px;
}
.sneakpeak.alt {
    float: left;
}
.sneakpeak.items-2 {
    width: 340px;
}
.sneakpeak.items-3 {
    width: 480px;
}
.sneakpeak p {
    float: left;
    position: absolute;
    left: 0;
    width: 200px;
    height: 200px;
    margin: 0;
    border: 2px solid #ccc;
    border-radius: 200px;
    background: #fff;
    transition: width 0.25s, height 0.25s, margin 0.25s, box-shadow 0.25s, background 0.25s, border 0.25s;
}
.sneakpeak p:nth-child(2){
    left: 140px;
}
.sneakpeak p:nth-child(3){
    left: 280px;
}

.sneakpeak p:hover {
    width: 300px;
    height: 300px;
    margin: -50px;
    z-index: 1;
    border-color: #888;
    box-shadow: 0 50px 50px -10px rgba(0,0,0,0.2);
}

.sneakpeak .memory {
    background: url(sneakpeak-memory.png) no-repeat;
}
.sneakpeak .gc {
    background: url(sneakpeak-gc.png) no-repeat;
}
.sneakpeak .threads {
    background: url(sneakpeak-threads.png) no-repeat;
}
.sneakpeak .io {
    background: url(sneakpeak-io.png) no-repeat;
}
.sneakpeak .http {
    background: url(sneakpeak-http.png) no-repeat;
}
.sneakpeak .exceptions {
    background: url(sneakpeak-exceptions.png) no-repeat;
}
.sneakpeak .mongo {
    background: url(sneakpeak-mongo.png) no-repeat;
}
.sneakpeak .severity { background-position: -50px -50px; }
.sneakpeak .severity:hover { background-position: 0px 0px; }

.sneakpeak .cause { background-position: -350px -50px; }
.sneakpeak .cause:hover { background-position: -300px 0px; }

.sneakpeak .solution { background-position: -650px -50px; }
.sneakpeak .solution:hover { background-position: -600px 0px; }

.sneakpeak .monitoring-error { background-position: -950px -50px; }
.sneakpeak .monitoring-error:hover { background-position: -900px 0px; }

.sneakpeak .monitoring-ok { background-position: -1250px -50px; }
.sneakpeak .monitoring-ok:hover { background-position: -1200px 0px; }

.sneakpeak .ploting { background-position: -1550px -50px; }
.sneakpeak .ploting:hover { background-position: -1500px 0px; }

.sneakpeak .coding { background-position: -1850px -50px; }
.sneakpeak .coding:hover { background-position: -1800px 0px; }

[data-equal] .sneakpeak {
    position: relative;
    top: 50%;
    margin-top: -102px;
}
.sneakpeak + p {
    clear: both;
    margin: 0;
    padding-top: 15px;
    font-size: 13px;
}

/* =Illustration
-------------------------------------------------- */

.illustration {
    position: relative;
    display: inline-block;
    width: 375px;
    height: 211px;
    overflow: hidden;
    padding: 16px 60px 0 59px;
    background: url(laptop.png) no-repeat;
}
.illustration span {
    position: relative;
    display: block;
    width: 256px;
    height: 162px;
    overflow: hidden;
    margin-bottom: 43px;
    background: #faf8f6;
}

.illustration:hover span:before,
.illustration:focus span:before {
    opacity: 0.75;
    background: #009cd5;
}
.illustration span:before {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    overflow: hidden;
    margin: -50px 0 0 -50px;
    padding: 0 0 0 0;
    border-radius: 50px;
    background: #000;
    line-height: 1em;
    opacity: 0.1;
    content: '';
}
.illustration span:after {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border-width: 19px 0;
    background: #fff;
    box-shadow: 0 15px 0  #fff, 0 -15px 0  #fff, -15px 0 0  #fff, 15px 0 0  #fff;
    opacity: 0.7;
    content: '';
}
.illustration.desktop {
    width: 281px;
    height: 254px;
    padding: 12px 12px 0 12px;
    background: url(desktop.png) no-repeat;
}
.illustration.windows {
    width: 312px;
    height: 231px;
    padding: 19px 48px 0 8px;
    background: url(windows.png) no-repeat;
}

/* =Lists
-------------------------------------------------- */

ul.reset {
    margin: 0;
}
ul.reset li {
    padding: 0;
}
ul.reset li:before {
    display: none;
}

ul.important {
    font-size: 16px;
}
ul.important li {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 2.5em;
}
ul.important .icon {
    color: #009cd5;
    font-size: 24px;
    margin-left: -1.7em !important;
}

.check-list li:before {
    margin-left: -1.5em;
    background: none;
    color: #009cd5;
    font-family: "fontello";
    content: '\e80e';
}
.check-list li.no:before {
    margin-left: -1.4em;
    content: '\e80f';
    color: #c00;
}
.icon-list .check-list li:before {
    display: block;
}

/* support menu */

ul.support-menu {
    margin: 10px 0 0 0;
    font-size: 14px;
    line-height: 20px;
}
ul.support-menu li {
    padding-left: 0;
}
ul.support-menu li:before {
    display: none;
}
ul.support-menu a {
    display: block;
    padding: 4px 15px;

}
ul.support-menu a:hover,
ul.support-menu a:focus {
    background: #f7f7f7;
    text-decoration: none;
    color: #0082b2;
}
ul.support-menu a.active {
    background: #eee;
    color: #000;
    text-shadow: 0 1px 0 #fff;
}

ul.support-menu {
    margin-top: 14px;
}
ul.support-menu li {
    margin: 0 -15px;
}
ul.support-menu ul {
    margin-left: 19px;
}
ul.support-menu li li {
    margin: 0;
}
ul.support-menu li li a {
    color: #666;
    padding: 2px 15px 2px 15px;
    font-size: 13px;
}
ul.support-menu li .icon-down-open,
ul.support-menu li a.open .icon-right-open {
    display: none;
}
ul.support-menu li a.open .icon-down-open {
    display: inline-block;
}
.support-cta {
    margin-top: 140px;
}
.logged-support-video {
    margin-top: 46px !important;
}
.logged-support-message {
    margin-top: 46px !important;
}
.sidebar-support {
    margin: -1px 0 0 -45px;
    padding: 10px;
    border: solid #e5e5e5;
    border-width: 0 1px 1px 0;
}

/* bg menu */

.bg-menu {
    margin: 50px 0 0;
    text-shadow: 0 1px 0 rgba(255,255,255,1);
}
.bg-menu li {
    margin: 10px 0 0;
    padding: 0;
    background: #f3f2ee;
}
.bg-menu li:before {
    display: none;
}
.bg-menu a.main {
    position: relative;
    display: block;
    padding: 20px 20px 15px 60px;
    color: #000;
    font-size: 15px;
    line-height: 18px;
}
.bg-menu a.main h2 {
    margin: 0;
    font-size: 15px;
    line-height: 18px;
    font-weight: 200;
    text-transform: none;
}
.bg-menu a.main .index {
    position: absolute;
    left: 22px;
    bottom: 15px;
    color: #bbb;
    font-size: 24px;
    line-height: 30px;
}
.bg-menu a.main .detail {
    position: absolute;
    top: 50%;
    right: 20px;
    margin-top: -9px;
    color: #009cd5;
}
.bg-menu a.main strong {
    display: block;
    color: #009cd5;
    font-size: 24px;
    line-height: 30px;
    font-weight: 200;
}
.bg-menu a.main:hover,
.bg-menu a.main:focus {
    text-decoration: none;
    background: #f7f6f3;
}
.bg-menu a.main:hover .index,
.bg-menu a.main:focus .index {
    color: #009cd5;
}
.bg-menu a.main.banner {
    padding-top: 25px;
    padding-bottom: 25px;
    text-shadow: 0 1px 0 rgba(0,0,0,0.1);
}
.bg-menu a.main.banner,
.bg-menu a.main.banner h2,
.bg-menu a.main.banner h2 strong {
    color: #fff;
    text-transform: none;
    font-weight: 200;
}
.bg-menu a.main.banner:hover,
.bg-menu a.main.banner:focus {
    background: #25baf0;
}
.bg-menu a.main.banner p {
    margin: 6px 0 0;
}
.bg-menu a.main.banner .action {
    margin: 25px 0 0;
}
.bg-menu a.main.banner .action .btn {
    float: none;
}
.bg-menu a.main.banner .btn.alt {
    border: none;
}
.bg-menu a.main.back {
    padding-left: 20px;
    font-weight: bold;
}

/* icon-list */

.icon-list li:before {
    display: none;
}
.icon-list li .icon {
    float: left;
    margin-left: -1.5em;
}
.icon-list ul {
    margin: 0;
}
.icon-list.blocks li {
    margin-top: 10px;
    padding: 15px 5px 15px 3.5em;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    background: #faf8f6;
}
.icon-list.reset {
    margin-left: 1.538em;
}

/* tags */

ul.tags {
    margin: 10px 0 0;
    font-size: 15px;
    line-height: 24px;
}
ul.tags + .floating-wrap {
    margin-top: 20px;
}
ul.tags a,
ul.tags li {
    display: block;
    margin: 0;
    padding: 0;
}
ul.tags li:before {
    display: none;
}
.tag,
ul.tags a {
    position: relative;
    margin: 0 0 3px 15px;
    padding: 3px 62px 3px 15px;
    border-radius: 0 5px 5px 0;
    color: #aaa;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
}
ul.tags a:hover,
ul.tags a:focus {
    text-decoration: none;
    background: #faf8f6;
    color: #666;
}
ul.tags a:hover:before,
ul.tags a:focus:before {
    border-color: transparent #faf8f6 transparent transparent;
}
ul.tags a:before {
    position: absolute;
    top: 0;
    left: -15px;
    border: solid;
    border-width: 15px 15px 15px 0;
    border-color: transparent transparent transparent transparent;
    content: '';
}
ul.tags a:after {
    position: absolute;
    top: 12px;
    left: 0px;
    width: 7px;
    height: 7px;
    border: 1px solid #bbb;
    border-radius:3px;
    background: #fff;
    content: '';
}
ul.tags .active,
ul.tags .active:hover {
    background: #f5f3f1;
    color: #666;
}
ul.tags .active:before,
ul.tags .active:hover:before {
    border-color: transparent #f2eeeb transparent transparent;
}
ul.tags .active:after,
ul.tags .active:hover:after {
    border-color: #bbb;
}
ul.tags .count {
    position: absolute;
    top: 3px;
    right: 8px;
    color: #aaa;
    font-weight: 500;
}

.tag {
    margin: 0;
    border-radius: 5px;
    padding-left: 10px;
    padding-right: 10px;
    font-style: normal;
    font-weight: 500;
}

/* search list */

#main .search-list {
    margin-top: 0;
}

.search-list {
    margin: 20px 0 0;
    border-bottom: 1px solid #ddd;
}
.search-list li {
    padding: 0;
    border-top: 1px solid #ddd;
}
.search-list li:before {
    display: none;
}
.search-list li.found {
    padding: 10px 20px;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    background: #faf8f6;
    font-size: 15px;
    font-weight: bold;
}
.search-list a {
    display: block;
    padding: 20px;
    color: #000;
}
.search-list a:hover,
.search-list a:focus {
    background: #faf8f6;
    text-decoration: none;
}
.search-list h2,
.search-list h3 {
    margin: 0;
    font-size: 18px;
    line-height: 26px;
    font-weight: bold;
    text-transform: uppercase;
}
.search-list h2 span,
.search-list h3 span {
    color: #009cd5;
}
.search-list .meta {
    margin: 0;
    color: #999;
}
.search-list .meta .author {
    color: #009cd5;
}
.search-list p {
    margin-top: 10px;
}

/* blog list */

.blog-cat-title {
    margin: 0;
    padding-top: 10px !important;
    font-size: 16px;
    color: #aaa;
}

.blog-list {
    margin: 20px 0 0;
    border-bottom: 1px solid #ddd;
}
.blog-list:first-child {
    margin-top: -10px;
}
.blog-list:first-child > li:first-child {
    border-top: 0;
}
.blog-list li {
    padding: 0;
    border-top: 1px solid #ddd;
}
.blog-list li a:after {
    display: table;
    clear: both;
    content: "";
}
.blog-list li:before {
    display: none;
}
.blog-list a {
    display: block;
    padding: 20px 20px 20px 220px;
    color: #000;
}
.wrap.inline .blog-list a {
    padding: 24px 244px 24px 44px;
}
.blog-list a:hover,
.blog-list a:focus {
    background: #faf8f6;
    text-decoration: none;
}

.blog-list a a {
    display: inline !important;
    padding: 0 !important;
}

.blog-list .img {
    position: relative;
    float: left;
    margin: 0 0 0 -200px;
}
.blog-list a:hover .img:after,
.blog-list a:focus .img:after {
    display: block;
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    background: rgba(218,200,182,0.13);
    content: '';
}
.blog-list .img img {
    display: block;
    max-width: 160px;
}
.blog-list h2,
.blog-list h3 {
    margin: 0;
    font-size: 20px;
    line-height: 26px;
    font-weight: bold;
    text-transform: uppercase;
}
.blog-list h2 .icon,
.blog-list h3 .icon {
    display: inline;
    margin-left: 5px;
    color: #ccc;
}
.blog-list h2 .icon:before,
.blog-list h3 .icon:before {
    display: inline;
}
.blog-list a:hover h2 .icon,
.blog-list a:focus h2 .icon,
.blog-list a:hover h3 .icon,
.blog-list a:focus h3 .icon {
    color: #009cd5;
}
.blog-list .meta {
    margin: 0;
    color: #999;
}
.blog-list .topic {
    color: #999;
    margin-top: 20px;
}
.blog-list .meta .author {
    color: #009cd5;
}
.blog-list p {
    margin-top: 10px;
}
.blog-list a:hover .tag,
.blog-list a:active .tag {
    background: #eceae8;
}
.blog-list.compact a {

    padding: 15px 10px;
}
.blog-list.compact h2,
.blog-list.compact h3 {
    font-size: 14px;
    line-height: 18px;
}
.blog-list.compact .meta {
    font-size: 11px;
}

/* important blog */

#content.important {
    background-image: linear-gradient(to bottom, rgba(231,239,254,1) 0%,rgba(255,255,255,1) 300px);
}
#content.important .wrap {
    padding: 44px 179px;
}
#content.important .article {
    padding-bottom: 60px;
    font-size: 16px;
    line-height: 24px;
    border-bottom: 2px solid #ddd;
    overflow: visible;
}
#content.important .article p,
#content.important .article ul {
    margin-top: 24px;
}
#content.important .article li {
    margin-top: 5px;
}
#content.important .article h1 {
    color: #444;
    font-size: 38px;
    line-height: 40px;
    font-weight: 400;
}
#content.important .article .meta,
#content.important .article .ssba {
    margin-top: 10px;
}
#content.important .article-nav {
    margin: 0 !important;
}
#content.important .article table {
    margin: 50px 0;
}
#content.important .article table th,
#content.important .article table td {
    font-size: 16px;
    line-height: 24px;
}
#content.important .article table th {
    line-height: 20px;
}

.article .takeaway {
    margin: 20px 0 0;
    padding: 20px;
    border-left: 5px solid #009cd5;
}
.article .takeaway p:first-child,
.article .takeaway ul:first-child {
    margin: 0 !important;
}
.article .takeaway .do,
.article .takeaway .dont {
    font-weight: bold;
}
.article .takeaway .do span,
.article .takeaway .dont span {
    margin-right: 5px;
    padding: 0 5px;
    border-radius: 3px;
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
}
.article .takeaway .do span {
    background: #7b0;
}
.article .takeaway .dont span {
    background: #c00;
}
.article .takeaway .plumbr {
    text-align: right;
    font-weight: bold;
}

/* content.sample */

#content.sample {
    border-top: 2px solid #ccc;
}
#content.sample pre {
    overflow-x: scroll;
    width: 100%;
    border: 2px solid #faf8f6;
    border-radius: 5px;
    transition-duration: 0.3s;
}
#content.sample pre:hover {
    position: relative;
    width: 200%;
    z-index: 10;
    border-color: #009cd5;
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}
#content.sample .right-column pre:hover {
    margin-left: -100%;
}
.sample-trigger.main {
    margin: -44px -64px 0;
    border-top-width: 0;
    border-radius: 0 0 10px 10px;
    max-height: 300px;
}
.sample-trigger.main:after {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 60px;
    width: 100%;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0, #fff 90%);
    content: '';
}
.sample-trigger.main .icon {
    font-size: 80px;
}
.sample-trigger img {
    display: block;
}
.sample-trigger {
    display: block;
    position: relative;
    overflow: hidden;
    border: 2px solid #ccc;
    border-radius: 5px;
}
.sample-trigger .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    color: #999;
    font-size: 50px;
    text-shadow: 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff;
}
a.sample-trigger:hover,
a.sample-trigger:focus,
a.sample-trigger:hover .icon,
a.sample-trigger:focus .icon {
    border-color: #009cd5;
    color: #009cd5;
}
.time-forward-wrap {
    position: relative;
}
.time-forward {
    position: absolute;
    z-index: 2;
    top: 50%;
    transform: translateY(-50%);
    right: -100px;
}
.time-forward .arrow {
    display: block;
    width: 120px;
    height: 10px;
    background: #009cd5;
}
.time-forward .arrow:after {
    position: absolute;
    left: 100%;
    top: -15px;
    border: solid;
    border-width: 20px 0 20px 30px;
    border-color: transparent transparent transparent #009cd5;
    content: '';
}
.time-forward .clock {
    position: absolute;
    width: 100%;
    text-align: center;
    color: #009cd5;
    font-size: 20px;
    line-height: 24px;
}
.time-forward .clock .icon {
    display: block;
    margin-top: -36px;
    font-size: 60px;
    line-height: 60px;
}
.time-forward .clock .icon:before {
    position: relative;
    z-index: 1;
}
.time-forward .clock .icon:after {
    position: absolute;
    left: 50%;
    z-index: 0;
    background: #fff;
    transform: translateX(-50%);
    width: 40px;
    height: 50px;
    content: '';
}

/* numbered list */

.nr-list {
    list-style: none;
    margin: 20px 0 0 20px;
}
.nr-list > li + li {
    margin-top: 20px;
}
.nr-list .list-index {
    float: left;
    margin: 0 0 0 -20px;
    font-weight: bold;
    font-size: 16px;
}
.nr-list li > :first-child,
.nr-list li > .list-index + p {
    margin-top: 0;
}
.nr-list  ul {
    margin-top: 20px;
}
.nr-list.steps {
    margin-left: 100px
}
.nr-list.steps .list-index {
    margin-left: -100px
}
.nr-list.steps > li {
    border: 1px solid #e5e5e5;
    border-radius: 5px;
    padding: 10px;
}
.nr-list.steps li + li {
    margin-top: 10px;
}

.nr-list.steps.vertical {
    margin: 20px 0 0 100px;
}
.nr-list.steps.vertical > li {
    margin-top: 56px;
}
.nr-list.steps.vertical .list-index {
    margin: -40px 0 0 -110px;
}
.nr-list.steps.vertical .list-index {
    font-size: 20px;
}
.nr-list.steps.vertical .list-index strong {
    display: inline-block;
    width: 103px;
    color: #009cd5;
}

/* publications */

.publications {
    margin: 20px 0 0;
    font-size: 16px;
    line-height: 20px;
}
.publications li {
    margin: 12px 0 0;
    padding: 0;
}
.publications li:before {
    display: none;
}
.publications .year {
    margin: 40px 0 0;
    font-size: 24px;
    line-height: 30px;
    font-weight: bold;
}
.publications .year:first-child {
    margin: 0;
}
.publications .year + li {
    margin-top: 9px;
}
.publications a.file {
    padding-left: 40px;
}
.publications a {
    display: block;
}
.publications a .img,
.publications a .title,
.publications a .meta {
    display: block;
}
.publications a .icon {
    float: left;
    margin-left: -40px;
    color: #000;
    font-size: 32px;
    line-height: 38px;
}
.publications a .icon-video {
    font-size: 28px;
}
.publications a .img {
    max-height: 40px;
    width: 200px;
    overflow: hidden;
    padding-top: 10px;
}
.publications a .img img {
    max-width: 100%;
    max-height: 100%;
}
.publications .year + li a .img {
    height: 30px;
    padding-top: 4px;
}
.publications a .title {
    color: #333;
    font-weight: bold;
}
.publications a .meta {
    color: #999;
}
.publications a:hover,
.publications a:focus {
    text-decoration: none;
}
.publications a:hover .title,
.publications a:focus .title {
    color: #000;
    text-decoration: underline;
}
.publications .desc {
    margin: 10px 0 0;
    padding: 0 0 20px;
    font-size: 14px;
    line-height: 18px;
}
.publications .desc > :first-child {
    margin-top: 0;
}
.publications ol {
    margin: 10px 0 0 30px;
}
.publications ol li {
    margin-top: 5px;
}

.publications li.alt .title {
    display: table-cell;
    vertical-align: middle;
    height: 40px;
}


/* year list */

.year-list li {
    margin-left: 42px;
}
.year-list .year {
    float: left;
    margin-left: -42px;
    font-weight: 400;
}

/* action */

.action span.alt {
    float: right;
}
.action span.disclaimer.alt {
    float: none;
}
.action span.inline {
    display: inline-block;
}

.session-messages {
    margin-top: -30px;
}
.session-messages .msg-icon:first-child {
    margin-top: 30px;
}

/* =Article
-------------------------------------------------- */

.article-nav {
    margin-top: 10px !important;
}
.article-nav .btn.link {
    padding: 0;
}
.article-nav .main {
    float: right;
}
.article-nav .sep {
    display: inline-block;
    padding: 0 10px;
    line-height: 30px;
    font-size: 14px;
}

.article {
    padding-bottom: 20px;
}
.article h1 {
    margin-top: 20px;
}
.article h2 {
    font-size: 18px;
}
.article .meta {
    color: #ccc;
}
.article .meta .author {
    margin-right: 20px;
    color: #009cd5;
}
.article .tip {
    margin: 20px -11px 0;
    padding: 10px 10px;
    border: 1px solid #e5e5e5;
    font-style: italic;
    color: #666;
}
.article.news,
.article.press-kit {
    font-size: 16px;
    line-height: 24px;
}
.article.news .meta {
    color: #999;
}
.article.press-kit li {
    margin-top: 10px;
}
.article.press-kit .logos a {
    float: left;
    margin-right: 20px;
    color: #999;
    font-size: 14px;
}
.article.press-kit .logos img {
    display: block;
    border: 1px solid #e5e5e5;
    border-radius: 5px;
}
.article.press-kit .logos span {
    display: block;
    padding-left: 20px;
}
.press-kit-suffering-users {
    width: 938px;
    height: 315px;
    background: url(suffering-users.png) no-repeat;
}
.article.press-kit .press-kit-suffering-users {
    margin: 0 0 -40px -189px;
}

.article-share {
    margin: 20px 0 0;
}
.article-share p.label {
    float: left;
    margin: 5px 5px 0 0;
    color: #999;
}

.article.handbook {
    font-size: 15px;
    line-height: 20px;
}
.article.handbook h1 {
    margin: 0;
    color: #000;
    font-size: 19px;
    line-height: 26px;
}
.article.handbook h1 strong {
    display: block;
    color: #009cd5;
    font-size: 36px;
    line-height: 44px;
    font-weight: 200;

}
.article.handbook h2 {
    margin-top: 80px;
    font-size: 26px;
}
.article.handbook h2 .icon {
    float: left;
    margin-left: -33px;
    color: #009cd5;
    font-size: 22px;
}
.article.handbook h2 + h3 {
    margin-top: 30px;
}
.article.handbook h3 {
    margin-top: 50px;
    font-size: 19px;
    line-height: 26px;
    font-weight: 200;
}
.article.handbook h3 + p {
    margin-top: 10px;
}
.article.handbook pre {
    background: #fff;
    border-left: 3px solid #e5e5e5;
}
.article.handbook .statement {
    margin: 30px 0 0;
    padding: 0 0 10px 45px;
    font-size: 20px;
    line-height: 26px;
    text-align: left;
}
.article.handbook .statement > .icon {
    float: left;
    margin-left: -45px;
    color: #009cd5;
    font-size: 30px;
    line-height: 1em;
}
.article.handbook .statement > .icon + p {
    margin: 0;
}

.stand-out {
    display: block;
    position: relative;
    margin: 50px -65px 50px -45px;
    padding: 30px 65px 30px 45px;
    border: 5px solid transparent;
    background: #e7effe;
    color: #000;
    font-size: 16px;
    line-height: 22px;
}
.stand-out:after {
    position: absolute;
    bottom: 100%;
    right: -5px;
    margin: 0 0 5px;
    border: 10px solid;
    border-color: transparent transparent #cbd8e4 #cbd8e4;
    content: '';
}
a.stand-out:hover,
a.stand-out:focus {
    border-color: #009cd5;
    color: #000;
    text-decoration: none;
}
.stand-out .icon-plumbr {
    position: absolute;
    top: 25px;
    right: 45px;
    color: #009cd5;
    font-size: 30px;
    line-height: 32px;
}
.article.handbook .stand-out h2 {
    margin: 0 140px 30px 0;
    color: #000;
    font-size: 24px;
}
.stand-out > :first-child {
    margin-top: 0;
}

.article.case-study {
    font-size: 16px;
    line-height: 24px;
}
.article.case-study ul {
    margin-left: 0;
}
.article.case-study ul li {
    margin: 10px 0;
}
.article.case-study ul ul {
    margin-top: 8px;
    margin-bottom: 8px;
}
.article.case-study ul ul li {
    margin: 2px 0;
}
.article.case-study .statement {
    font-size: 30px;
    line-height: 38px;
}
.article.case-study .persons {
    margin: 0;
}

/* Simple Share Buttons Adder */

.ssba img {
    width: 35px !important;
    padding: 6px;
    border:  0;
    box-shadow: none !important;
    display: inline !important;
    vertical-align: middle;
}
.ssba,
.ssba a {
    text-decoration:none;
    background: none;
    font-family: Indie Flower;
    font-size: 	20px;
}

/* Comment styles from old solution START */
/* COMMENTS */
.comment-captcha dd {
    margin-top: 10px !important;
}
.comment-captcha .icon-agent{
    width: 50px;
    border: 1px solid #e5e5e5;
    border-radius: 25px;
    cursor:pointer;
    font-size: 35px;
    line-height: 48px;
    text-align: center;
}
.comment-captcha .first {
    color: #009cd5;
}
.comment-captcha .second {
    color: #c00;
}
.comment-captcha .third {
    color: #7b0;
}
.comment-captcha label > input:checked + .icon {
    border-width: 2px;
    border-color: #009cd5;
    line-height: 46px;
}

#comments {
    margin-top: 40px;
}
#comments .comment-respond textarea {
    margin-top: 20px;
}
#comments .comment-respond .form textarea {
    margin: 0;
}
#comments .comment-respond .g-recaptcha {
    margin: 40px 0 0;
}
#comments .comment-reply-title {
    margin-top: 0;
}
#comments h2 {
    margin-top: 40px;
    font-size: 13px;
    line-height: 20px;
    font-weight: 700;
    text-transform: uppercase;
}
#comments #comment-text {
    width: 100%;
    height: 80px;
    resize: none;
}
#comments .commentlist div.comment {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
    overflow: hidden;
}
#comments .commentlist .comment + .comment article {
    margin-top: 10px;
}
#comments section p {
    margin-top: 10px;
}
#comments section p:first-child {
    margin-top: 0;
}
#comments header {
    padding: 0;
    margin-top: 20px;
}
#comments header:after {
    display: table;
    clear: both;
    content: "";
}
#comments .fn-comment-author {
    float: left;
}
#comments .comment-time {
    float: left;
    margin-left: 10px;
}
#comments .comment-reply {
    float: left;
    margin-left: 10px;
}
#comments .comment-meta {
    padding-top: 5px;
}
#comments .thread-data {
    color:#b3aeae;
    font-size:11px;
    padding-top:5px;
}

/* respond */

#comments #commentsList .comment-respond {
    margin: 10px -20px -20px;
    padding: 0 20px 20px;
    border-top: 1px solid #ddd;
    border-radius: 0 0 10px 10px;
    background: #f6f6f6;
}
#comments #commentsList .comment-respond textarea {
    background: #fff;
}
#comments #commentsList .comment-respond h2 {
    margin-top: 20px;
}

/* Comment field depths */

#comments .depth-2,
#comments .depth-3 {
    margin-left: 40px;
    font-size: 12px;
    line-height: 18px;
    color: #555;
}
#comments .depth-2 article,
#comments .depth-3 article {
    padding: 10px;
}
#comments .depth-3 {
    margin-left: 80px;
}

/* Comment styles from old solution END */

/* =Block title
-------------------------------------------------- */

.title-row {
    margin: 40px 0 0;
}
.title-row h1,
.title-row h2,
.title-row h3,
.title-row h4 {
    float: left;
    margin: 0;
}
.title-row .action {
    float: right;
    margin: 7px 0 0;
    font-size: 14px;
    font-weight: bold;
}
.title-row .action a {
    margin-left: 10px;
}
.title-row .action .icon {
    color: #000;
    font-size: 18px;
}
.title-row .action .btn {
    float: left;
    margin-top: -7px;
}
h1.big {
    font-size: 30px;
    font-weight: 400;
}


/* =Message
-------------------------------------------------- */

.msg-icon,
.msg-icon.error {
    display: table;
    width: 100%;
    position: relative;
    min-height: 62px;
    margin: 10px 0 0;
    padding: 10px 10px 10px 62px;
    border: 1px solid #ddd;
    background: #faf8f6;
    font-size: 13px;
    font-weight: bold;
    color: #000;
}
.msg-icon .icon-info,
.msg-icon .icon-ok,
.msg-icon .icon-cancel {
    float: left;
    width: 38px;
    height: 38px;
    margin: 1px 0 0 -51px;
    border: 3px solid #009cd5;
    border-radius: 24px;
    color: #009cd5;
    font-size: 20px;
    line-height: 32px;
    text-align: center;
}
.msg-icon + .msg-icon {
    margin-top: 5px;
}
.msg-icon .icon-ok {
    border-color: #7b0;
    color: #7b0;
}
.msg-icon .icon-cancel {
    border-color: #c00;
    color: #c00;
}
.msg-icon .aligner {
    display: table-cell;
    vertical-align: middle;
}
.msg-icon .aligner > :first-child {
    margin: 0;
}
.msg-icon p {
    margin-top: 0;
    font-weight: 400;
}
.msg-icon .title {
    font-weight: bold;
    text-transform: uppercase;
}
.msg-icon .url {
    color: #009cd5;
}
.msg-icon .url:hover {
    color: #0082b2;
    text-decoration: underline;
}

/* =Data table
-------------------------------------------------- */

table.data {
    width: 100%;
    border: 1px solid #e9e9e9;
    background: #fdfdfd;
}
table.data th,
table.data td {
    padding: 4px 15px;
    line-height: 20px;
}
table.data thead th {
    padding: 7px 15px;
    border: 1px solid #009cd5;
    background: #009cd5;
    color: #fff;
    font-weight: bold;
    text-shadow: 0 1px 0 rgba(0,0,0,0.2);
}
table.data thead th.compact {
    padding: 7px 4px;
}
table.data thead .thin {
    font-weight: 400;
}
table.data thead th.tooltip {
    cursor: help;
}
table.data thead th.tooltip:after {
    font-family: 'Fontello';
    content: '\e85f';
    font-weight: 100;
}
table.data thead th.tooltip:hover .dropdown.tooltip {
    display: block;
    margin: 3px 0 0 -15px;
    color: #000;
    text-shadow: none;
    font-weight: 400;
}
table.data > tbody > tr:nth-child(even) > td {
    background: #f5f5f5;
}
table.data tr.unread {
    font-weight: bold;
}
table.data tr.disabled td {
    color: #bbb;
}
table.data tr.disabled td i.label {
    background: #ccc;
}
table.data td.compact {
    width: 1%;
    padding: 4px;
    white-space: nowrap;
}
table.data td.action {
    width: 1%;
    white-space: nowrap;
}
table.data .cell-wrap {
    position: relative;
}
table.data .btn.small {
    margin: -1px 0;
}

table.data.hover tbody tr[data-url],
table.data.hover tbody tr[data-ng-click] {
    cursor: pointer;
}
table.data.hover tbody tr:hover td {
    background: #fff0b5;
}

table.data.row-link tbody tr:hover td {
    background: #fff0b5;
}
table.data.row-link tbody td {
    padding: 0;
}
table.data.row-link tbody a.link {
    display: block;
    padding: 4px 15px;
    color: #000;
}
table.data.row-link tbody tr.disabled a.link {
    color: #bbb;
}
table.data.row-link tbody a.link:hover,
table.data.row-link tbody a.link:focus,
table.data.row-link tbody a.link:hover span,
table.data.row-link tbody a.link:focus span {
    text-decoration: none !important;
}
table.data.row-link tbody a.link.error {
    color: #c00;
}
table.data.row-link tbody a.link.success {
    color: #7b0;
}

table.data.nowrap th,
table.data.nowrap td {
    white-space: nowrap;
}

/* compact */

table.data.compact {
    border: none;
    background: #fff;
}
table.data.compact th,
table.data.compact td,
table.data.compact.row-link .link {
    padding: 4px 4px;
}
table.data.compact th {
    border: solid #ddd;
    border-width: 0 0 1px;
    background: none;
    color: #000;
    text-shadow: none;
}
.row table.data.compact th,
.row table.data.compact td {
    background: #fff;
}
table.data.compact th.right + th,
table.data.compact td.right + td,
table.data.compact.row-link td.right + td .link {
    padding-left: 15px;
}
table.data.compact.row-link td.right + td {
    padding-left: 0;
}

/* icon */

table.data td.type {
    text-align: center;
}
table.data td.type a.link {
    padding-left: 5px;
    padding-right: 5px;
}
table.data td.type .icon {
    position: relative;
    display: block;
    width: 20px;
    height: 20px;
    margin: 0 auto;
    color: #000;
    font-size: 16px;
}
table.data td.type .icon-tint-perm:after,
table.data td.type .icon-tint-meta:after,
table.data td.type .icon-tint-heap:after {
    position: absolute;
    top: -7px;
    left: 13px;
    padding: 0;
    background: none;
    color: #000;
    font-size: 8px;
    font-style: normal;
    font-weight: 900;
}
table.data td.type .icon-tint-perm:after {
    content: 'P';
}
table.data td.type .icon-tint-heap:after {
    content: 'H';
}
table.data td.type .icon-tint-meta:after {
    content: 'M';
}

/* =Pager
-------------------------------------------------- */

.pager {
    margin: 20px 0 0;
    text-align: right;
}
.pager:after {
    display: table;
    clear: both;
    content: "";
}
.pager a,
.pager li,
.pager span {
    display: inline-block;
    vertical-align: top;
}
.pager li {
    padding: 0;
}
.pager li:before {
    display: none;
}
.pager a,
.pager span {
    padding: 5px 10px;
}
.pager > span {
    padding: 0;
}
.pager .page a {
    border: 1px solid #ddd;
    border-radius: 3px;
}
.pager a:hover,
.pager a:focus {
    text-decoration: none;
}
.pager a .icon,
.pager a .icon {
    color: #ccc;
}
.pager a:hover .icon,
.pager a:focus .icon {
    color: #009cd5;
}
.pager .page a:hover,
.pager .page a:focus {
    border-color: #999;
    background: #faf8f6;
}
.pager .count  {
    float: left;
    padding: 5px 10px;
}
.pager span.ng-scope li {
    float: left;
    margin-left: 4px;
}
.pager .alt {
    float: left;
}

/* =Form
-------------------------------------------------- */

.form {
    margin: 30px 0 0;
}
hr + .row > div > .form:first-child {
    margin-top: 10px;
}
.form dt {
    font-size: 14px;
    font-weight: bold;
}
.form dd {
    margin-top: 6px;
}
.form dd + dt {
    margin-top: 20px;
}
.form dd.text {
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 14px;
}
.form label .meta {
    display: block;
    font-size: 11px;
    line-height: 16px;
    font-weight: 400;
}
.form dd span.txt,
.form dd strong.txt {
    display: inline-block;
    padding: 5px;
}
.form dd.action {
    margin-top: 20px;
}
.form-action {
    margin-top: 40px;
}
.form-action-plus {
    margin: 5px 0 0;
}
.req {
    color: #c00;
}
.form dd > p:first-child {
    margin-top: 0;
}
.form dd > p + p {
    margin-top: 10px;
}
.form.follow {
    margin-top: 20px;
}

/* horizontal */

.form.horizontal dt {
    float: left;
    width: 180px;
    margin: 5px 0 0;
}
.form.horizontal dd {
    margin: 0;
    padding: 0 0 10px 200px;
}
.form.horizontal dd.text {
    padding-top: 5px;
    padding-bottom: 15px;
}
.form.horizontal dd.action {
    margin-top: 10px;
}
.form.horizontal dd:after {
    display: table;
    clear: both;
    content: "";
}

/* horizontal min */

.form.horizontal.min dt {
    width: 40px;
}
.form.horizontal.min dd {
    padding: 0 0 10px 60px;
}

/* horizontal small */

.form.horizontal.small dt {
    width: 130px;
}
.form.horizontal.small dd {
    padding: 0 0 10px 150px;
}

/* horizontal big */

.form.horizontal.big dt {
    width: 460px;
    font-size: 16px;
}
.form.horizontal.big dd {
    padding: 0 0 10px 480px;
    font-size: 16px;
}
.form.horizontal.big dd.text {
    padding-top: 5px;
}
.form.horizontal.big .checkbox {
    margin-top: 4px;
}

/* horizontal no-label */

.form.horizontal.no-label dd {
    padding: 0 0 10px 0;
}

/* form in options */

.options .form {
    margin-top: 10px;
}
.options .form dt {
    font-size: 13px;
}
.options .form dd + dt {
    margin-top: 10px;
}

/* =Data
-------------------------------------------------- */

dl.data dd + dt {
    margin-top: 10px;
}
dl.data.horizontal dt {
    float: left;
    width: 200px;
    margin: 0;
}
dl.data.horizontal dd {
    padding-left: 220px;
    padding-bottom: 5px;
}
dl.data.horizontal dd:after {
    display: table;
    clear: both;
    content: "";
}
dl.data.important {
    margin: 40px 0;
    font-size: 16px;
}
p.inline {
    display: inline-block;
}
p.disclaimer,
span.disclaimer {
    color: #999;
    font-size: 11px;
}
span.disclaimer.alt {
    margin: 10px 0 0;
    line-height: 14px;
}
span.disclaimer.alt .icon {
    width: 17px;
    margin-right: 2px;
    border-radius: 20px;
    border: 1px solid #aaa;
    text-align: center;
}
span.disclaimer.alt.big {
    color: #666;
    font-size: 16px;
    line-height: 24px;
}
span.disclaimer.alt.big .icon {
    font-size: 14px;
    width: 27px;
}
span.disclaimer {
    display: block;
}
p.disclaimer.alt {
    padding-top: 20px;
    border-top: 1px solid #e5e5e5;
    font-size: 14px;
    text-align: center;
}
p.disclaimer.alt strong {
    color: #666;
}

/* =Box
-------------------------------------------------- */

.box {
    margin-top: 20px;
    background: #fff;
}
.box + .box {
    margin-top: 10px;
}

.box .header {
    display: block;
    padding: 15px;
    background: #009cd5;
    text-shadow: 0 1px 0 rgba(0,0,0,0.3);
}
.box a.header:hover,
.box a.header:focus {
    background: #25baf0;
    text-decoration: none;
}
.box .header h2,
.box .header h3 {
    float: left;
    margin: 0;
    color: #fff;
    font-size: 18px;
    line-height: 20px;
    text-transform: none;
}
.box a.header h2:before {
    display: inline-block;
    margin: 6px 5px 0 -2px;
    border: solid;
    border-width: 8px 5px 0 5px;
    border-color: #fff transparent transparent transparent;
    content: '';
    vertical-align: top;
}
.box-closed a.header h2:before {
    margin: 5px 5px 0 0;
    border-width: 5px 0 5px 8px;
    border-color: transparent transparent transparent #fff;
}
.box .header p {
    float: right;
    margin: 0;
    color: #dfdfdf;
    font-size: 18px;
}
.box .header p .value {
    color: #fff;
    font-weight: bold;
}

.box .content {
    padding: 15px;
    border: solid #ddd;
    border-width: 0 1px 1px;
}
.box .content:first-child {
    border-top-width: 1px;
}
.box .content > :first-child {
    margin-top: 0;
}

/* box grid */

.box.grid {
    margin-top: 10px;
    padding: 20px;
    background: #f6f4f2;
}
a.box.grid {
    display: block;
}
.box.grid .content {
    padding: 0;
    border: 0;
}
.box.grid h2 {
    color: #009cd5;
    font-size: 14px;
    line-height: 20px;
}
.box.grid > :first-child {
    margin: 0;
}

.box.grid .icon-list a {
    display: block;
    padding: 2px 0;
    color: #000;
}
.box.grid .icon-list .icon {
    color: #009cd5;
    font-size: 16px;
}
.box.grid .icon-list ul .icon {
    font-size: 11px;
}
.box.grid li.hellip:before {
    display: none;
}
.box.grid .more {
    text-align: right;
}

.box.grid.important {
    background: #009cd5;
    color: #fff;
}
.box.grid.important h2 {
    color: #fff;
    font-size: 22px;
    line-height: 26px;
}
.box.grid.important a,
.box.grid.important .icon-list .icon {
    color: #fff;
}
.box.grid.important ul li:before {
    color: #fff;
}

.box.grid.alt {
    border-radius: 5px;
}
.box.grid.alt .total {
    margin: 20px -20px -20px;
    padding: 0 20px 20px;
    border-top: 6px solid #009cd5;
    border-radius: 0 0 5px 5px;

    text-shadow: 0 1px #fff;
}
.box.grid.alt .total .form {
    margin: 20px 0 0;
}
.box.grid.alt .total .form dd:last-child {
    padding-bottom: 0;
}
.box.grid.alt .total dt {
    margin: 0;
}
.box.grid.alt .total dd {
    font-size: 22px;
    font-weight: bold;
}
.box.grid.alt .total a {
    display: block;
    font-size: 13px;
    vertical-align: top;
    margin: 1px 0 0;
}
.box.grid.alt .form span.txt,
.box.grid.alt .form label .meta {
    color: #999;
    font-size: 13px;
}
.box.grid.alt .total .thin {
    font-weight: 400;
}

/* steps */

.box.bordered {
    padding: 20px;
    border: 1px solid #e5e5e5;
    border-radius: 5px;
}
.box.steps {
    padding: 15px;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    text-align: center;
    font-size: 15px;
    text-transform: uppercase;
}
.box.steps .icon {
    font-size: 50px;
    line-height: 50px;
}
.box.steps p {
    margin: 10px 0 0;
}
.box.steps strong {
    display: block;
    font-size: 18px;
    line-height: 24px;
}

/* menu */

.box.menu,
#sidebar .box.menu  {
    position: relative;
    padding: 0 20px 0 30px;
    transition-property: padding;
    transition-duration: 0.3s;
}
.box.menu.open,
#sidebar .box.menu.open {
    padding-top: 20px;
    padding-bottom: 20px;
}
.box.menu .l1,
.box.menu h2 {
    position: relative;
    margin: 0 -20px 0 -30px !important;
    font-size: 18px;
    font-weight: bold;
    line-height: 24px;
}
.box.menu .l1 a,
.box.menu h2 a {
    display: block;
    padding: 10px 20px 10px 30px;
    color: #777;
}
.box.menu .l1 .code,
.box.menu h2 .code {
    display: block;
    font-size: 13px;
    line-height: 18px;
    color: #009cd5;
}
.box.menu .l1 a:hover,
.box.menu .l1 a:focus,
.box.menu h2 a:hover,
.box.menu h2 a:focus {
    text-decoration: none;
    background-color: #f7f7f7;
}
.box.menu.active .l1:before,
.box.menu.active h2:before {
    position: absolute;
    top: 50%;
    left: 0;
    margin: -20px 0 0;
    border: solid;
    border-width: 20px 0 20px 20px;
    border-color: transparent transparent transparent #e5e5e5;
    content: '';
}
.box.menu ul.support-menu {
    position: relative;
    overflow: hidden;
    visibility: hidden;
    max-height: 0;
    margin: 0 -20px 0 -1em;
    padding: 0 20px 0 1em;
    transition-duration: 0.3s;
}
.box.menu.open ul.support-menu {
    visibility: visible;
    max-height: 2000px;
    margin: 5px -20px 0 -1em;
}
.box.menu .l1 .expander,
.box.menu h2 .expander {
    opacity: 0;
    position: absolute;
    top: 50%;
    right: -15px;
    width: 30px;
    height: 30px;
    margin: -15px 0 0;
    padding: 0;
    border-radius: 20px;
    background: #eee;
    color: #009cd5;
    line-height: 30px;
    text-align: center;
    transition-duration: 0.3s;
}

.box.menu .l1 .expander:hover,
.box.menu .l1 .expander:focus,
.box.menu h2 .expander:hover,
.box.menu h2 .expander:focus {
    background: #009cd5;
    color: #fff;
    opacity: 1;
}
.box.menu:hover .expander {
    display: block;
    opacity: 1;
}
.box.menu .expander .icon {
    vertical-align: top !important;
    margin: 0 !important;
}
.box.menu .expander .icon-up-open {
    display: none;
    margin-top: -2px !important;
}
.box.menu.open .expander .icon-down-open {
    display: none;
}
.box.menu.open .expander .icon-up-open {
    display: inline-block;
}

.box.banner {
    padding: 0 !important;
    text-shadow: 0 1px 0 rgba(0,0,0,0.1);
}
.box.banner a {
    display: block;
    padding: 20px 20px 20px 30px;
    background: #009cd5;
    color: #fff;
    font-size: 13px;
    line-height: 18px;
    text-transform: none;
    font-weight: 400;
}
.box.banner a h2,
#sidebar .box.banner a h2 {
    margin: 0;
    font-weight: 200;
    font-size: 15px;
    line-height: 20px;
}
.box.banner a h2 strong {
    display: block;
    font-size: 17px;
}
.box.banner a:hover,
.box.banner a:focus {
    background: #25baf0;
    text-decoration: none;
}
.box.banner a p {
    margin: 6px 0 0;
}
.box.banner a .action {
    margin: 25px 0 0 -13px;
}
.box.banner a .action .btn {
    float: none;
}
.box.banner a .btn.alt {
    border: none;
}

/* download */

.box.download {
    position: relative;
    overflow: hidden;
    padding: 20px 20px 70px;
    border-radius: 5px;
    background: #e7effe;
    color: #009cd5;
    font-size: 16px;
    line-height: 20px;
    font-weight: bold;
    text-align: center;
    text-shadow: 0 1px 0 #fff, 0 0 30px rgba(255,255,255,1) !important;
    transition-duration: 0.15s;
}
a.box.download {
    display: block;
}
a.box.download:hover,
a.box.download:focus {
    text-decoration: none;
    color: #0082b2;
}
.box.download .icons {
    display: block;
    padding-bottom: 15px;
}
.box.download .icon {
    color: #fff;
    font-size: 48px;
    line-height: 48px;
    text-shadow: 0 0 1px rgba(0,156,213,0.3), 0 0 20px rgba(0,156,213,0.2) !important;
    transition-duration: 0.15s;
}
.box.download .icon-download {
    position: absolute;
    bottom: -16px;
    left: 50%;
    width: 72px;
    margin-left: -36px;
    font-size: 72px;
    line-height: 72px;
    text-shadow: 0 0 1px rgba(0,156,213,0.3), 0 0 20px rgba(0,156,213,0.1) !important;
}
a.box.download:hover .icon,
a.box.download:focus .icon {
    text-shadow: 0 0 1px rgba(0,156,213,0.5), 0 0 10px rgba(0,156,213,0.2) !important;
}
a.box.download:hover .icons .icon,
a.box.download:focus .icons .icon {
    margin-left: 5px;
    margin-right: 5px;
}
a.box.download:hover .icon-download,
a.box.download:focus .icon-download {
    bottom: -22px;
}

#sidebar a.box.download {
    padding-bottom: 70px;
    padding-left: 30px;
    border-radius: 0;
    font-size: 15px;
}
#sidebar a.box.download .icon-download {
    margin-left: -36px;
}
.box.back,
#sidebar .box.back {
    padding: 0;
    font-size: 14px;
    font-weight: bold;
}
.box.back a {
    display: block;
    padding: 10px 20px 10px 30px;
    color: #999;
}
.box.back a:hover,
.box.back a:focus {
    text-decoration: none;
    background-color: #f7f7f7;
}
#sidebar .box.back h2 .icon {
    margin: 0;
}

/* =Contact
-------------------------------------------------- */

#contact h2 {
    margin: 0;
}
#contact .wrap {
    padding-top: 30px;
    padding-bottom: 30px;
}

.social-icons {
    margin: 20px -20px -20px;
    padding: 10px 20px;
    border-top: 1px solid #e5e5e5;
    background: #faf8f6;
    font-size: 40px;
    line-height: 40px;
    text-align: left;
}
.social-icons a {
    color: #ccc;
}
.social-icons a:hover,
.social-icons a:focus {
    color: #009cd5;
}
.social-icons .label {
    display: block;
    padding: 0 0 7px;
    color: #999;
    font-size: 14px;
    line-height: 20px;
    font-weight: bold;
}

/* =Footer
-------------------------------------------------- */

#footer .wrap {
    padding-bottom: 40px;
}

/* nav */

#nav-footer {
    margin: 9px 0 0;
}
#nav-footer li {
    display: inline-block;
    padding: 0 20px;
}
#nav-footer li:before {
    display: none;
}
#nav-footer li.social {
    padding: 0 10px;
}
#nav-footer a {
    color: #3c3a37;
    font-size: 11px;
    font-weight: bold;
}
#nav-footer .icon {
    font-size: 14px;
}
#nav-footer a:hover .icon,
#nav-footer a:focus .icon {
    color: #0e9bda;
}

#footer ul.social {
    margin: 19px 0 0;
}
#footer ul.social li {
    display: inline-block;
    padding: 0 2px;
}
#footer ul.social li:before {
    display: none;
}
#footer ul.social a {
    color: #333;
    font-size: 24px;
}
#footer ul.social a:hover,
#footer ul.social a:focus {
    color: #009cd5;
}

#copyright {
    margin-top: 16px;
}

/* =Label
-------------------------------------------------- */

i.label {
    display: inline-block;
    padding: 0 3px;
    border-radius: 3px;
    background: #666;
    color: #fff;
    font-size: 8px;
    line-height: 12px;
    font-weight: 900;
    font-style: normal;
    text-transform: uppercase;
    vertical-align: top;
}
h1.label,
h2.label,
h3.label {
    position: relative;
}
h1.label .label,
h2.label .label,
h3.label .label {
    position: absolute;
    right: 0;
    top: -8px;
}

/* =Landingpage
-------------------------------------------------- */

.landingpage {
    padding-top: 50px;
    color: #4c5966;
    text-align: center;
}
.landingpage h1 {
    color: #009cd5;
    font-size: 93px;
    line-height: 1em;
}
.landingpage h2 {
    margin: 100px 0 40px;
    font-size: 48px;
    line-height: 50px;
    font-weight: 400;
}
.landingpage h3 {
    color: #000;
    font-size: 22px;
    font-weight: bold;
    text-transform: uppercase;
}
.landingpage .intro {
    margin: 30px 0 40px;
    font-size: 30px;
    line-height: 36px;
    font-weight: bold;
}
.landingpage .cta {
    margin-top: 40px;
}
.landingpage .article {
    width: 650px;
    margin: 0 auto;
    color: #000;
    font-size: 16px;
    line-height: 24px;
}

.landingpage.alt {
    padding-top: 0;
    text-align: left;
}
.landingpage.alt h1 {
    color: #000;
    margin: 0 0 20px;
    font-size: 30px;
}
.landingpage.alt h2 {
    margin-top: 0;
}
.landingpage.alt h2 {
    margin: 60px 0 20px;
}
.landingpage.alt .article {
    width: auto;
    font-size: 18px;
}
.landingpage.alt .preview {
    display: inline-block;
    margin-top: -15px;
}
.landingpage.alt .preview a {
    display: inline-block;
    padding: 5px;
    border: 1px solid #e5e5e5;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05), 0 3px 5px rgba(0,0,0,0.05);
    transition-duration: 1s;
}
.landingpage.alt .preview a:hover,
.landingpage.alt .preview a:focus {
    transform: rotate(10deg);
}
.landingpage.alt .box.bordered {
    padding-top: 1px;
}
.landingpage.alt .box.bordered:first-child {
    margin-top: 0;
}
.landingpage.alt .box.bordered .cta {
    margin-top: 0;
}
.landingpage.alt .box.focusbox {
    transition-duration: 1s;
}
.landingpage.alt .box.focusbox:hover,
.landingpage.alt .box.focusbox.focus {
    box-shadow: 0 0 0 3000px rgba(255,255,255,0.85);
}
.landingpage.alt .success {
    padding: 100px 0;
}

.landingpage.alt .success .icon-ok {
    color: #7b0;
}
.landingpage.alt .success .info {
    margin: 10px 0 0;
    text-align: center;
    color: #666;
    font-weight: bold;
}
.landingpage.alt .success hr {
    margin: 40px 0;
}
.landingpage.alt .success .download {
    margin: 40px 0 0;
    text-align: center;
}
.landingpage.alt .success .download a {
    display: inline-block;
    padding: 0 10px;
    font-size: 20px;
    color: #666;
    line-height: 24px;
    text-align: center;
}
.landingpage.alt .success .download .icon {
    display: block;
    margin-bottom: 10px;
    font-size: 50px;
    line-height: 50px;
    color: #009cd5;
}

.landingpage .img-desc {
    margin: 6px 0 0;
    color: #999;
    font-size: 14px;
    font-weight: bold;
    font-style: italic;
}

/* how does IT work */

.how-does-it-work {
    position: relative;
    z-index: 0;
    width: 100%;
    height: 422px;
    margin: -52px 0 0;
    background: url(how-does-it-work.png) no-repeat 50% 0;
    -webkit-background-size: 812px 337px;
    -moz-background-size: 812px 337px;
    -o-background-size: 812px 337px;
    background-size: 812px 337px;
    text-align: left;
}
.how-does-it-work.alt {
    height: 322px;
    margin: 30px 0 40px;
    background: url(how-does-it-work2.png) no-repeat 50% 0;
    background-size: 832px 260px;
}
.how-does-it-work ul {
    margin: 0;
    position: absolute;
    font-size: 16px;
    line-height: 35px;
}
.how-does-it-work li {
    padding: 0;
}
.how-does-it-work li:before {
    display: none;
}
.how-does-it-work ul.transactions {
    top: 140px;
    right: 565px;
    color: #666;
    text-align: right;
    text-shadow: 0 1px #fff;
}
.how-does-it-work ul.services {
    top: 140px;
    left: 344px;
}
.how-does-it-work ul.root-causes {
    top: 140px;
    left: 552px;
    color: #666;
    line-height: 20px;
    white-space: nowrap;
}
.how-does-it-work.alt ul.transactions,
.how-does-it-work.alt ul.services,
.how-does-it-work.alt ul.root-causes {
    top: 34px;
}
.how-does-it-work.alt ul.root-causes {
    left: 570px;
}
.how-does-it-work ul.root-causes li {
    margin-top: 2px;
    padding: 0 0 0 15px;
    border-left: 5px solid #ccc;
}
.how-does-it-work ul.root-causes li + li {
    margin-top: 23px;
}
.how-does-it-work ul.root-causes p {
    margin: 0;
    color: #e04848;
    font-weight: bold;
}
.how-does-it-work ul.root-causes p .icon {
    font-size: 20px;
}
.how-does-it-work ul.root-causes code {
    display: block;
}
.how-does-it-work ul.root-causes strong {
    color: #000;
}

.how-does-it-work .label {
    top: 352px;
    margin: 0;
    position: absolute;
    font-size: 18px;
    line-height: 22px;
}
.how-does-it-work.alt .label {
    top: 272px;
}
.how-does-it-work .label.services {
    left: 50%;
    margin-left: -100px;
    width: 200px;
    text-align: center;
}
.how-does-it-work .label.transactions {
    right: 50%;
    margin-right: 150px;
    text-align: center;
}
.how-does-it-work .label.root-causes {
    left: 50%;
    margin-left: 150px;
    text-align: center;
}
.how-does-it-work.alt .label.services,
.how-does-it-work.alt .label.root-causes {
    left: 52%;
}
.how-does-it-work.alt .label.transactions {
    right: 48%;
}

.how-plumbr-works {
    margin: 0 0 50px;
    font-size: 18px;
    line-height: 26px;
}
.how-plumbr-works p {
    margin: 20px 100px 0;
}

/* plumber-scheme01 */

.plumber-scheme01 {
    height: 364px;
    background: url(plumbr-scheme01.png) no-repeat 50% 0;
    background-size: 1057px 364px;
    font-size: 18px;
    line-height: 36px;
    color: #666;
}
.plumber-scheme01 .wrap {
    position: relative;
    width: 500px;
    height: 364px;
}
.plumber-scheme01 .labels {
    left: 52px;
}
.plumber-scheme01 .values {
    right: 140px;
    font-size: 24px;
    color: #000;
    text-align: right;
}
.plumber-scheme01 .percents {
    right: 60px;
    text-align: right;
}
.plumber-scheme01 ul {
    position: absolute;
    top: 108px;
    margin: 0;
}
.plumber-scheme01 li:before {
    display: none;
    padding: 0;
}
.plumber-scheme01 .ok {
    color: #7b0;
}
.plumber-scheme01 .slow {
    color: #f90;
}
.plumber-scheme01 .fail {
    color: #c00;
}

/* plumber-scheme02 */

.plumber-scheme02 {
    height: 260px;
    margin: 30px 0 50px;
    background: url(plumbr-scheme02.png) no-repeat 50% 30px;
    background-size: 706px 130px;
    font-size: 18px;
    line-height: 36px;
    color: #666;
}
.plumber-scheme02 .wrap {
    position: relative;
}
.plumber-scheme02 p {
    position: absolute;
    margin: 0;
}
.plumber-scheme02 .desc,
.plumber-scheme02 .label {
    top: 180px;
    width: 250px;
    text-align: center;
    font-size: 15px;
    line-height: 20px;
}
.plumber-scheme02 .label {
    top: 0;
    color: #333;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: bold;
}
.plumber-scheme02 .app {
    left: 56px;
}
.plumber-scheme02 .agent {
    left: 344px;
}
.plumber-scheme02 .server {
    left: 632px;
}
.plumber-scheme02 .sending,
.plumber-scheme02 .monitoring {
    color: #888;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
}
.plumber-scheme02 .sending {
    top: 41px;
    left: 603px;
}
.plumber-scheme02 .monitoring {
    top: 122px;
    left: 303px;
}

/* =Technical problems
-------------------------------------------------- */

.technical-problems .primary {
    margin: 0;
    font-size: 20px;
    line-height: 24px;
}
.technical-problems .secondary {
    margin: 0;
    color: #bfe6f4;
    font-size: 16px;
    line-height: 20px;
}
.technical-problems ul {
    margin: 20px -3px 0;
    text-align: left;
}
.technical-problems ul:after {
    display: table;
    clear: both;
    content: '';
}
.technical-problems li {
    float: left;
    width: 33%;
    padding: 3px;

}
.technical-problems li:before {
    display: none;
}
.technical-problems li a,
.technical-problems li span {
    display: block;
    position: relative;
    padding: 10px;
    color: #fff;
    border-radius: 3px;
    background: #1aa6d9;
    font-size: 18px;
    line-height: 30px;
    text-shadow: 0 1px 0 rgba(0,0,0,0.25);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.technical-problems li a:hover,
.technical-problems li a:focus {
    background: #0195cb;
    text-decoration: none;
}
.technical-problems li a:hover .icon,
.technical-problems li a:focus .icon,
.technical-problems li a:hover:after,
.technical-problems li a:focus:after {
    color: #fff;
}
.technical-problems li a:after {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #0195cb;
    font-family: fontello;
    font-size: 26px;
    content: '\e833';
    text-shadow: none;
}
.technical-problems li .icon {
    width: 33px;
    font-size: 28px;
    line-height: 30px;
    color: #bfe6f4;
    vertical-align: top;
}
.technical-problems li span,
.technical-problems li span .icon {
    color: #55b7e0;
    text-shadow: 0 1px 0 rgba(0,0,0,0.10);
}
.technical-problems li .label {
    position: absolute;
    top: 13px;
    right: 11px;
    height: 24px;
    padding: 2px 8px;
    background: #bfe6f4;
    white-space: nowrap;
    color: #1a3944;
    font-size: 10px;
    line-height: 21px !important;
    font-weight: 400;
    text-shadow: none;
}

/* =Root causes
-------------------------------------------------- */

div.rcs-wrap {
    position: relative;
    overflow: hidden;
    margin: 10px 0 0;
    padding: 10px 0 0;
}
div.rcs-wrap:before {
    position: absolute;
    left: 50%;
    top: 0;
    z-index: 1;
    width: 20px;
    height: 20px;
    margin: 0 0 0 -10px;
    border-radius: 10px;
    background: #ccc;
    content: '';
}

ul.rcs {
    margin: 30px 0 0;
    font-size: 18px;
    line-height: 40px;
}

ul.rcs li {
    position: relative;
    padding: 0;
}
ul.rcs li:before {
    display: none;
}

ul.rcs ul {
    margin-left: 30px;
}

ul.rcs a,
ul.rcs div.node {
    display: block;
    position: relative;
    color: #000;
    margin-top: 6px;
    padding: 8px 40px 8px 50px;
    border-radius: 20px;
    line-height: 24px;
}
ul.rcs a:after {
    display: none;
    position: absolute;
    top: 50%;
    right: 15px;
    margin-top: 1px;
    color: #009cd5;
    font-family: fontello;
    font-size: 24px;
    content: '\e833';
    transform: translateY(-50%);
}
ul.rcs a:hover,
ul.rcs a:focus {
    text-decoration: none;
    background: #e7effe !important;
}
ul.rcs a:hover:after,
ul.rcs a:focus:after {
    display: block;
}

ul.rcs a.main,
ul.rcs div.node.main {
    display: block;
    padding: 0 15px;
    font-size: 24px;
    line-height: 40px;
    border-radius: 20px;
    background: #eceae8;
}

ul.rcs li.path {
    padding-bottom: 20px;
}
ul.rcs li.path:before {
    display: block;
    position: absolute;
    bottom: 100%;
    right: -43px;
    width: 50px;
    height: 6px;
    margin: 0 0 -25px;
    background: #eceae8;
    content: '';
    vertical-align: top;
}
ul.rcs li.path:after {
    position: absolute;
    bottom: 100%;
    right: -43px;
    width: 6px;
    height: 5000px;
    margin: 0 0 -25px;
    background: #eceae8;
    content: '';
}
div.rcs-wrap .col-6 + .col-6 li.path:before,
div.rcs-wrap .col-6 + .col-6 li.path:after {
    right: auto;
    left: -43px;
}

ul.rcs .icon {
    float: left;
    width: 40px;
    height: 40px;
    margin: -8px 0 0 -50px;
    border-radius: 20px;
    background: #c00;
    color: #fff;
    font-size: 24px;
    line-height: 40px;
    text-align: center;
}

ul.rcs li.intermediate {
    position: relative;
    margin-left: 30px;
}
ul.rcs li.intermediate:before {
    display: block;
    position: absolute;
    top: 20px;
    left: 5px;
    bottom: 0;
    width: 6px;
    border-radius: 5px;
    background: #eceae8;
    content: '';
}
ul.rcs li.intermediate > a,
ul.rcs li.intermediate > div.node {
    margin-left: -30px;
    padding-left: 50px;
}
ul.rcs li.intermediate > a:before,
ul.rcs li.intermediate > div.node:before {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background: #ccc;
    content: '';
}

ul.rcs .desc {
    position: relative;
    overflow: hidden;
    max-height: 0px;
    font-size: 14px;
    line-height: 18px;
    transition-duration: 0.15s;
}
ul.rcs a:hover .desc,
ul.rcs div.node:hover .desc {
    max-height: 300px;
    padding: 0 0 20px;
}
ul.rcs .desc p {
    margin-top: 10px;
    max-width: 600px;
}
ul.rcs .desc p:first-child {
    margin: 0;
}
ul.rcs .icon-help-circled-alt {
    float: none;
    margin: -8px 0 0;
    width: 20px;
    background: none;
    font-size: 16px;
    color: #999;
    vertical-align: top;
}
ul.rcs a:hover .icon-help-circled-alt,
ul.rcs a:focus .icon-help-circled-alt,
ul.rcs div.node:hover .icon-help-circled-alt,
ul.rcs div.node:focus .icon-help-circled-alt {
    color: #009cd5;
}
ul.rcs div.node.disabled {
    opacity: 0.25;
}

/* =Persons
-------------------------------------------------- */

.persons {
    margin-left: 0;
}
.persons li {
    padding: 0 250px 0 0;
    overflow: hidden;
}
.persons li.alt {
    padding: 0 0 0 250px;
}
.persons li:before {
    float: right;
    width: 200px;
    height: 200px;
    margin: 0 -250px 0 0;
    border-radius: 100px;
    background: #fff url(persons.jpg) no-repeat 0  200px;
    content: '';
}
.persons li.alt:before {
    float: left;
    margin: 0 0 0 -250px;
}
.persons li.priit:before { background-position: 0 0; }
.persons li.ivo:before { background-position: 0 -200px; }
.persons li.nikita:before { background-position: 0 -400px; }
.persons li.vladimir:before { background-position: 0 -600px; }

.persons li.jaan:before { background-position: 0 -800px; }
.persons li.sten:before { background-position: 0 -1000px; }
.persons li.matt:before { background-position: 0 -1200px; }
.persons li.deepak:before { background-position: 0 -1400px; }

.persons li + li {
    margin-top: 50px;
}
.persons h3 {
    margin: 0;
    font-size: 16px;
    text-transform: uppercase;
}
.persons .contact {
    margin: 0;
}
.persons .aligner {
    height: 200px;
    display: table-cell;
    vertical-align: middle;
}
.persons .title {
    text-transform: none;
}

/* page area */

.page-area {
    background: #faf8f6;
    box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.07);
}
#content .page-area:last-child {
    box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.07), inset 0 -10px 10px -10px rgba(0,0,0,0.07);
}
#content .page-area.blue:last-child {
    box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.21), inset 0 -10px 10px -10px rgba(0,0,0,0.21);
}
.page-area.secondary {
    background: #e7effe;
}
.page-area.blue {
    background: #009cd5;
    box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.21);
    color: #fff;
}
.page-area.blue .area-title span {
    box-shadow: 0 10px 10px rgba(0,0,0,0.15);
}
.page-area.blue a,
.page-area.blue .btn.link {
    color: #fff !important;
}
.page-area.flat {
    box-shadow: none !important;
}
.area-title {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #aaa;
    font-size: 30px;
    line-height: 60px;
    font-weight: 400;
    text-align: center;
}
.area-title span {
    display: inline-block;
    border-radius: 0 0 10px 10px;
    background: #fff;
    box-shadow: 0 10px 10px rgba(0,0,0,0.05);
    padding: 0 40px;
    text-shadow: 0 1px 0 #fff;
}
.area-title.gray span {
    background: #faf8f6;
}
.page-area.secondary .area-title span {
    background: #faf8f6;
}
#content .page-area .wrap {
    border: none;
    padding: 30px 45px 70px;
}
#content .page-area.flat .wrap {
    padding: 44px !important;
}
#content .page-area.narrow .wrap {
    width: 760px;
    padding-bottom: 90px;
}
#content .wrap .page-area {
    margin: 30px -44px 0;
    padding: 30px 44px;
    border: solid #e5e5e5;
    border-width: 1px 0;
    box-shadow: none;
}

.page-area.bg-cut {
    background-image: linear-gradient(transparent 50%, white 50%, white 100%);
}
.page-area .flex-video {
    margin-top: 20px;
}

/* gallery */

.page-area.gallery {
    display: none;
    background: #009cd5;
    box-shadow: none;
    text-align: center;
}
.page-area.gallery.visible {
    display: block;
}
.page-area.gallery .wrap {
    position: relative;
    padding: 44px !important;
}
.page-area.gallery .close {
    position: absolute;
    top: 10px;
    right: -15px;
    color: #cfeaf5;
    font-size: 30px;
    line-height: 30px;
}
.page-area.gallery .close:hover,
.page-area.gallery .close:focus {
    text-decoration: none;
    color: #fff;
}
.page-area.gallery .row a {
    display: block;
    position: relative;
    background: #fff;
    overflow: hidden;
    text-align: center;
}
.page-area.gallery .row a .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    transform: translateX(-50%) translateY(-50%);
    font-size: 50px;
    line-height: 50px;
    text-shadow: 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff;
}
.page-area.gallery .row img {
    display: inline-block;
    opacity: 0.5;
    height: 150px;
    max-width: 10000%;
    vertical-align: top;
}
.wrap .page-area.gallery {
    background: none;
    border: none !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.wrap .page-area.gallery .row a {
    border: 2px solid #e5e5e5;
}
.wrap .page-area.gallery .row a:hover,
.wrap .page-area.gallery .row a:focus {
    border-color: #009cd5;
}


/* =Speakers
-------------------------------------------------- */

.speaker {
    position: relative;
    min-height: 500px;
    background: linear-gradient(to bottom, #ffffff 0%,#faf8f6 275px,#faf8f6 100%);
    box-shadow: inset 0 -15px 15px -15px rgba(0,0,0,0.02);
}
.speaker .wrap {
    padding-top: 0 !important;
    padding-bottom: 80px !important;
}
.speaker + .speaker .wrap {
    padding-top: 80px !important;
}
.speaker .row {
    margin: 0;
}
.speaker .row + .row {
    margin-top: 14px;
}
.speaker .about,
.speaker .personal,
.speaker .resources {
    float: left;
    width: 300px;
}
.speaker .personal {
    float: right;
}
.speaker .about {
    width: 592px;
    padding: 0 67px 0 22px;
}
.speaker.alt .about {
    float: right;
    padding: 0 22px 0 67px;
}
.speaker.alt .personal {
    float: left;
}
.speaker .chat {
    position: relative;
    margin: 0 -22px 0;
    padding: 20px;
    background: #fff;
    border-radius: 15px;
    border: 2px solid #e5e5e5;
    box-shadow: 0 3px 3px rgba(0,0,0,0.05);
    color: #666;
}
.speaker .chat > :first-child {
    margin-top: 0;
}
.speaker .chat strong {
    display: block;
    font-size: 16px;
}
.speaker .chat:after,
.speaker .chat:before {
    position: absolute;
    top: 136px;
    right: -14px;
    border: solid;
    border-width: 14px 0 14px 14px;
    border-color: transparent transparent transparent #e5e5e5;
    content: '';
}
.speaker .chat:after {
    right: -11px;
    border-color: transparent transparent transparent #fff;
}
.speaker.alt .chat:after,
.speaker.alt .chat:before {
    right: auto;
    border-width: 14px 14px 14px 0;
}
.speaker.alt .chat:before {
    left: -14px;
    border-color: transparent #e5e5e5 transparent transparent;
}
.speaker.alt .chat:after {
    left: -11px;
    border-color: transparent #fff transparent transparent;
}
.speaker h2 {
    margin: 23px 0 0;
    color: #009cd5;
    font-size: 20px;
}
.speaker h3 {
    margin-top: 40px;
}
.speaker h2 + p {
    margin-top: 10px;
}
.speaker .personal {
    color: #666;
    font-size: 16px;
}
.speaker .img {
    width: 300px;
    height: 300px;
    margin: 0 auto;
    border-radius: 150px;
    background: url(speakers.jpg) no-repeat 0 300px;
}
.speaker.nikita .img { background-position: 0 0; }
.speaker.gleb .img { background-position: 0 -300px; }
.speaker ul.reset,
.speaker ul.icon-list {
    margin-top: 20px;
    margin-left: 0;
}
.speaker ul.icon-list li {
    margin: 4px 0;
}

/* =Icons
-------------------------------------------------- */

@font-face {
    font-family: 'fontello';
    src: url('../font/fontello.eot?1464179514');
    src: url('../font/fontello.eot?1464179514#iefix') format('embedded-opentype'),
    url('../font/fontello.woff?1464179514') format('woff'),
    url('../font/fontello.ttf?1464179514') format('truetype'),
    url('../font/fontello.svg?1464179514#fontello') format('svg');
    font-weight: normal;
    font-style: normal;
}

.icon {
    display: inline-block;
}
.icon:before {
    font-family: "fontello";
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
}
.icon-plumbr:before {
    width: 3.45em;
    cursor: default;
}
a.icon-plumbr:before,
a .icon-plumbr:before {
    cursor: pointer;
}
.icon-plumbr:before { content: '\e800'; } /* '' */
.icon-agent:before { content: '\e801'; } /* '' */
.icon-skull:before { content: '\e802'; } /* '' */
.icon-epub:before { content: '\e803'; } /* '' */
.icon-file-epub:before { content: '\e804'; } /* '' */
.icon-file-mobi:before { content: '\e805'; } /* '' */
.icon-thousands:before { content: '\e806'; } /* '' */
.icon-search:before { content: '\e807'; } /* '' */
.icon-mail-alt:before { content: '\e808'; } /* '' */
.icon-star:before { content: '\e809'; } /* '' */
.icon-user:before { content: '\e80a'; } /* '' */
.icon-users:before { content: '\e80b'; } /* '' */
.icon-video:before { content: '\e80c'; } /* '' */
.icon-camera:before { content: '\e80d'; } /* '' */
.icon-ok:before { content: '\e80e'; } /* '' */
.icon-cancel:before { content: '\e80f'; } /* '' */
.icon-help:before { content: '\e810'; } /* '' */
.icon-home:before { content: '\e811'; } /* '' */
.icon-lock:before { content: '\e812'; } /* '' */
.icon-flag:before { content: '\e813'; } /* '' */
.icon-thumbs-up-alt:before { content: '\e814'; } /* '' */
.icon-thumbs-down-alt:before { content: '\e815'; } /* '' */
.icon-download:before { content: '\e816'; } /* '' */
.icon-code:before { content: '\e817'; } /* '' */
.icon-pencil:before { content: '\e818'; } /* '' */
.icon-edit:before { content: '\e819'; } /* '' */
.icon-comment:before { content: '\e81a'; } /* '' */
.icon-chat:before { content: '\e81b'; } /* '' */
.icon-comment-empty:before { content: '\e81c'; } /* '' */
.icon-chat-empty:before { content: '\e81d'; } /* '' */
.icon-attention:before { content: '\e81e'; } /* '' */
.icon-trash:before { content: '\e81f'; } /* '' */
.icon-doc:before { content: '\e820'; } /* '' */
.icon-doc-text-inv:before { content: '\e821'; } /* '' */
.icon-file-pdf:before { content: '\e822'; } /* '' */
.icon-file-word:before { content: '\e823'; } /* '' */
.icon-file-excel:before { content: '\e824'; } /* '' */
.icon-file-powerpoint:before { content: '\e825'; } /* '' */
.icon-file-image:before { content: '\e826'; } /* '' */
.icon-file-archive:before { content: '\e827'; } /* '' */
.icon-rss:before { content: '\e828'; } /* '' */
.icon-rss-squared:before { content: '\e829'; } /* '' */
.icon-menu:before { content: '\e82a'; } /* '' */
.icon-cog:before { content: '\e82b'; } /* '' */
.icon-cog-alt:before { content: '\e82c'; } /* '' */
.icon-wrench:before { content: '\e82d'; } /* '' */
.icon-login:before { content: '\e82e'; } /* '' */
.icon-volume-up:before { content: '\e82f'; } /* '' */
.icon-clock:before { content: '\e830'; } /* '' */
.icon-down-open:before { content: '\e831'; } /* '' */
.icon-left-open:before { content: '\e832'; } /* '' */
.icon-right-open:before { content: '\e833'; } /* '' */
.icon-up-open:before { content: '\e834'; } /* '' */
.icon-angle-left:before { content: '\e835'; } /* '' */
.icon-angle-right:before { content: '\e836'; } /* '' */
.icon-down-big:before { content: '\e837'; } /* '' */
.icon-left-big:before { content: '\e838'; } /* '' */
.icon-right-big:before { content: '\e839'; } /* '' */
.icon-up-big:before { content: '\e83a'; } /* '' */
.icon-right-hand:before { content: '\e83b'; } /* '' */
.icon-arrows-cw:before { content: '\e83c'; } /* '' */
.icon-exchange:before { content: '\e83d'; } /* '' */
.icon-award:before { content: '\e83e'; } /* '' */
.icon-cloud:before { content: '\e83f'; } /* '' */
.icon-flash:before { content: '\e840'; } /* '' */
.icon-leaf:before { content: '\e841'; } /* '' */
.icon-align-justify:before { content: '\e842'; } /* '' */
.icon-paste:before { content: '\e843'; } /* '' */
.icon-book:before { content: '\e844'; } /* '' */
.icon-tint:before { content: '\e845'; } /* '' */
.icon-chart-area:before { content: '\e846'; } /* '' */
.icon-credit-card:before { content: '\e847'; } /* '' */
.icon-floppy:before { content: '\e848'; } /* '' */
.icon-megaphone:before { content: '\e849'; } /* '' */
.icon-key:before { content: '\e84a'; } /* '' */
.icon-bug:before { content: '\e84b'; } /* '' */
.icon-beaker:before { content: '\e84c'; } /* '' */
.icon-dollar:before { content: '\e84d'; } /* '' */
.icon-gauge:before { content: '\e84e'; } /* '' */
.icon-sitemap:before { content: '\e84f'; } /* '' */
.icon-coffee:before { content: '\e850'; } /* '' */
.icon-user-md:before { content: '\e851'; } /* '' */
.icon-stethoscope:before { content: '\e852'; } /* '' */
.icon-puzzle:before { content: '\e853'; } /* '' */
.icon-shield:before { content: '\e854'; } /* '' */
.icon-extinguisher:before { content: '\e855'; } /* '' */
.icon-database:before { content: '\e856'; } /* '' */
.icon-plug:before { content: '\e857'; } /* '' */
.icon-facebook-squared:before { content: '\e858'; } /* '' */
.icon-linkedin-squared:before { content: '\e859'; } /* '' */
.icon-twitter-squared:before { content: '\e85a'; } /* '' */
.icon-twitter:before { content: '\e85b'; } /* '' */
.icon-feather:before { content: '\e85c'; } /* '' */
.icon-share:before { content: '\e85d'; } /* '' */
.icon-info:before { content: '\e85e'; } /* '' */
.icon-help-circled-alt:before { content: '\e85f'; } /* '' */
.icon-plus:before { content: '\e860'; } /* '' */
.icon-block:before { content: '\e861'; } /* '' */
.icon-zoom-in:before { content: '\e862'; } /* '' */
.icon-zoom-out:before { content: '\e863'; } /* '' */
.icon-explosion:before { content: '\e864'; } /* '' */
.icon-smile:before { content: '\e865'; } /* '' */
.icon-frown:before { content: '\e866'; } /* '' */
.icon-meh:before { content: '\e867'; } /* '' */
.icon-sort:before { content: '\e868'; } /* '' */
.icon-sort-up:before { content: '\e869'; } /* '' */
.icon-sort-down:before { content: '\e86a'; } /* '' */
.icon-sort-alt-up:before { content: '\e86b'; } /* '' */
.icon-sort-alt-down:before { content: '\e86c'; } /* '' */
.icon-chart-line:before { content: '\e86d'; } /* '' */
.icon-action:before { content: '\e86e'; } /* '' */
.icon-invocation:before { content: '\e86f'; } /* '' */
.icon-transaction:before { content: '\e870'; } /* '' */
.icon-bot:before { content: '\e871'; } /* '' */
.icon-job:before { content: '\e872'; } /* '' */
.icon-move:before { content: '\e873'; } /* '' */
.icon-cube:before { content: '\e874'; } /* '' */
.icon-cubes:before { content: '\e875'; } /* '' */

.icon-tint-heap:before,
.icon-tint-meta:before,
.icon-tint-perm:before { content: '\e845'; } /* '' */

.big-icon {
    font-size: 60px;
    line-height: 60px;
    text-align: center;
    color: #009cd5;
}
.big-icon + h2 {
    margin-top: 20px;
}

/* fix (fine tuning) */
.icon-code:before {
    width: 1.1em;
}
.icon-camera:before {
    width: 1.1em;
}
.icon-explosion:before {
    width: 1.15em;
}

/* =Modal
-------------------------------------------------- */

#modal-wrap {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    padding: 100px 0;
    background: rgba(0,0,0,0.5);
}
.ie8 #modal-wrap {
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50000000,endColorstr=#50000000);
}
#modal-wrap:after {
    display: block;
    width: 1px;
    height: 100px;
    content: '';
}

.modal-wrap {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    padding: 100px 0;
    background: rgba(0, 0, 0, 0.5);
}

.ie8 .modal-wrap {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#50000000, endColorstr=#50000000);
}

.modal-wrap:after {
    display: block;
    width: 1px;
    height: 100px;
    content: '';
}

.modal {
    position: relative;
    display: none;
    left: 50%;
    z-index: 101;
    max-width: 780px;
    margin-left: -390px;
    padding: 40px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.modal.login {
    width: 380px;
    margin-left: -190px;
}
.modal.small {
    width: 480px;
    margin-left: -190px;
}
.modal.full {
    width: 90%;
    max-width: 90%;
    margin-left: -45%;
}
.modal.full.alt {
    padding: 0;
}
.modal.full.alt img {
    display: block;
    width: 100%;
}
.modal h2 {
    margin: -5px 0 0;
    padding-right: 30px;
    font-size: 22px;
    line-height: 26px;
    text-transform: uppercase;
}
.modal hr.alt {
    margin-left: -40px;
    margin-right: -40px;
}
.modal h2 + hr.alt {
    margin-top: 35px;
}
.modal.login:after,
.modal.register:after {
    position: absolute;
    z-index: -1;
    right: 0;
    bottom: 0;
    color: #ddd;
    width: 1em;
    height: 0.8em;
    overflow: hidden;
    line-height: 1em;
    font-family: "fontello";
    font-size: 140px;
    content: '\e801';
}
.modal.login.alt:after,
.modal.register.alt:after {
    display: none;
}
.login-form,
.register-form,
.modal.login,
.modal.register {
    font-size: 14px;
}
.register-form .desc.alt {
    padding-top: 7px;
}
.register-form .desc,
.register-form .desc h2,
.modal.register .desc,
.modal.register .desc h3 {
    font-size: 16px;
    line-height: 24px;
}
.register-form .desc h2 {
    margin-top: 30px;
}
.register-form .desc h3:first-child,
.modal.register .desc h3:first-child {
    margin-top: 30px;
}
.register-form .desc .check-list,
.modal.register .desc .check-list {
    margin: 5px 0 0;
}
.modal.register .desc ul:first-child {
    margin-top: 27px;
}
.register-form .action,
.modal.register .action {
    margin: 40px 0 0;
}
.register-form .action .btn,
.modal.register .action .btn {
    float: left;
    margin-right: 15px;
}
.register-form .action p,
.modal.register .action p {
    margin: 0;
    font-size: 12px;
    line-height: 16px;
    color: #999;
}
.register-form .action .btn + p,
.modal.register .action .btn + p {
    margin-top: 3px;
    padding-top: 0;
}
.register-form .action p.alt,
.modal.register .action p.alt {
    clear: both;
    font-size: 11px;
}
.register-form .action .btn + p.alt,
.modal.register .action .btn + p.alt {
    padding-top: 10px;
}
.modal .close {
    position: absolute;
    z-index: 10;
    top: 36px;
    right: 36px;
    color: #ccc;
    font-size: 20px;
}
.modal .close:hover,
.modal .close:focus {
    color: #c00;
}

/* sign up */

.modal.signup {
    padding: 0;
    background: #fff url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAABBAMAAAAC3OWtAAAAFVBMVEX08vD18/H29PL39fP49vT59/X6+PYrZ8VyAAAAEElEQVR42mNgVHYNSxsGAACiUE7YUOQvugAAAABJRU5ErkJggg==') repeat-y 100% 0;
}
.modal.signup h2,
.modal.signup h3 {
    color: #009cd5;
}
.modal.signup h2 {
    font-size: 18px;
    line-height: 22px;
    white-space: nowrap;
}
.modal.signup .info {
    margin-top: 12px;
}
.modal.signup h3 {
    margin: 15px 0 0;
    padding-bottom: 5px;
    font-size: 16px;
}
.modal.signup h3 + .form {
    margin-top: 10px;
}

.modal.signup .register {
    float: left;
    width: 380px;
    padding: 40px;
}
.modal.signup .register .form.horizontal dt {
    width: 100px;
}
.modal.signup .register .form.horizontal dd {
    padding: 0 0 20px 120px;
}
.modal.signup .register .form.horizontal dd.action {
    padding: 0;
}
.modal.signup .form dd.action p {
    margin: 6px 0 0;
    color: #999;
    font-size: 11px;
    line-height: 14px;
    white-space: nowrap;
    text-align: center;
}
.modal.signup .form dd.action p + p {
    margin: 0;
}

.modal.signup .desc {
    float: left;
    width: 400px;
    padding: 40px;
    color: #666;
    font-size: 15px;
    line-height: 20px;
    text-align: center;
    text-shadow: 0 1px 0 #fff;
}


.flow {
    margin: 0;
    padding-bottom: 20px;
}
.flow li {
    position: relative;
    margin: 0;
    padding: 0 50% 0 0;
    font-size: 16px;
    color: #999;
}
.flow li.alt {
    padding: 0 0 0 50%;
}
.flow li + li {
    margin-top: -15px;
}
.flow li span {
    display: block;
    margin-top: 5px;
    line-height: 20px;
}
.flow li i {
    display: inline-block;
    width: 70px;
    height: 70px;
    border-radius: 35px;
    background: #f3f1ef;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1), 0 5px 5px #fff;
    color: #aaa;
    font-size: 36px;
    line-height: 70px;
    font-style: normal;
    text-align: center;
}

.flow li:before {
    position: absolute;
    top: 34px;
    right: 80px;
    z-index: -1;
    width: 160px;
    height: 110%;
    border: solid #e5e5e5;
    border-width: 2px 2px 0 0;
    border-radius: 0 25px 0 0;
    background: transparent;
    content:'';
}
.flow li.alt:before {
    right: auto;
    left: 94px;
    border-width: 2px 0 0 2px;
    border-radius: 25px 0 0 0;
}
.flow li.alt:last-child:before {
    display: none;
}

.flow li.active {
    color: #666;
}
.flow li.active i {
    font-weight: bold;
    color: #666;
}

/* video */

.modal.video {
    padding: 0;
    width: 780px;
    max-width: 100%;
}
.modal.video iframe {
    display: block;
}
.modal.video .close {
    position: absolute;
    top: -13px;
    right: -13px;
    width: 30px;
    height: 30px;
    border-radius: 20px;
    background: #666;
    box-shadow: 0 0 3px rgba(0,0,0,0.4);
    line-height: 30px;
    text-align: center;
}
.modal.video .close:hover,
.modal.video .close:focus {
    background: #eee;
}
.modal.video img {
    display: block;
}

@media only screen and (max-width: 768px) {
    #modal-wrap {
        padding: 20px 20px 0;
    }
    .modal,
    .modal.login,
    .modal.small,
    .modal.full,
    .modal.video {
        width: auto;
        left: 0;
        max-width: 100%;
        margin-left: 0;
    }

    #modal-panel {
        right: 20px !important;
        left: 20px !important;
        width: auto !important;
    }
}

/* =Modal panel
-------------------------------------------------- */

#modal-panel {
    position: fixed;
    left: 50%;
    bottom: 0;
    z-index: 50;
    width: 540px;
    margin-left: -270px;
}
#modal-panel.right {
    left: auto;
    right: 20px;
    margin-left: 0;
    text-align: left !important;
}
#modal-panel.small {
    width: 340px;
}
#modal-panel .panel {
    display: none;
    background: #fff;
    box-shadow: 0 0 30px rgba(0,0,0,0.3);
}
#modal-panel .panel.alt {
    border-top: 5px solid #009cd5;
}
#modal-panel .panel.open {
    display: block;
}
#modal-panel .panel .header {
    display: block;
    position: relative;
    margin: 0;
    padding: 10px 20px;
    background: #009cd5;
    color: #fff;
}
#modal-panel .panel a.header:hover,
#modal-panel .panel a.header:focus {
    text-decoration: none;
    background: #25baf0;
}
#modal-panel .panel .header h2 {
    margin: 0;
}
#modal-panel .panel .header .icon-up-open,
#modal-panel .panel .header .icon-down-open {
    position: absolute;
    top: 15px;
    right: 15px;
    color: #fff;
    font-size: 28px;
}
#modal-panel .panel .header .icon-up-open,
#modal-panel .panel.content-closed .header .icon-down-open {
    display: none;
}
#modal-panel .panel.content-closed .header .icon-up-open {
    display: inline-block;
}
#modal-panel .panel .content {
    padding: 20px;
}
#modal-panel .panel .content > :first-child {
    margin-top: 0;
}
#modal-panel .panel .content .msg:first-child,
#modal-panel .panel .content .msg-icon:first-child {
    margin-bottom: 10px;
}
#modal-panel-msg {
    display: none;
    padding: 10px 20px;
    background: #009cd5;
    color: #fff;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
}

#modal-panel dl.form:first-child {
    margin-top: 0;
}

.ui-datepicker {
    width: 240px;
    padding: 5px;
    display: none;
    font-family: sans-serif;
    border: 1px solid #ccc;
    background: #fff;
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    font-size: 16px;
    line-height: 20px;
    z-index: 999 !important;
}
.ui-datepicker .ui-datepicker-header {
    position: relative;
    padding: 0 0 5px;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    position: absolute;
    top: 5px;
    width: 40px;
    height: 20px;
    text-align: center;
    cursor: pointer;
}
.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
    text-decoration: underline;
}
.ui-datepicker .ui-datepicker-prev {
    left: 2px;
}
.ui-datepicker .ui-datepicker-next {
    right: 2px;
}
.ui-datepicker .ui-datepicker-title {
    margin: 0 43px;
    text-align: center;
}
.ui-datepicker .ui-datepicker-title select {
    font-size: 15px;
    padding: 3px 0;
}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
    width: 49%;
}
.ui-datepicker select.ui-datepicker-year {
    margin-left: 2%;
}
.ui-datepicker table {
    width: 100%;
    font-size: 14px;
    border-collapse: collapse;
    margin: 0 0 5px;
}
.ui-datepicker th {
    padding: 5px;
    border: 0;
    background: #009cd5;
    color: #fff;
    font-weight: bold;
    text-align: center;
}
.ui-datepicker td {
    border: 0;
    padding: 1px;
}
.ui-datepicker td span,
.ui-datepicker td a {
    display: block;
    padding: 5px;
    text-align: center;
    text-decoration: none;
}
.ui-datepicker .ui-datepicker-buttonpane {
    background-image: none;
    margin: .7em 0 0 0;
    padding: 0 .2em;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
}
.ui-datepicker .ui-datepicker-buttonpane button {
    float: right;
    margin: .5em .2em .4em;
    cursor: pointer;
    padding: .2em .6em .3em .6em;
    width: auto;
    overflow: visible;
}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
    float: left;
}

/* colors */

.ui-datepicker .ui-datepicker-today {
    font-weight: bold;
}
.ui-datepicker .ui-datepicker-calendar .ui-state-hover {
    background: #eee;
}
.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-week-end {
    background: #f7f7f7;
    color: #f00;
}
.ui-datepicker .ui-datepicker-calendar .ui-state-active {
    background: #009cd5;
    color: #fff;
}
.ui-datepicker .ui-datepicker-calendar .ui-state-active a,
.ui-datepicker .ui-datepicker-calendar .ui-state-active span {
    color: #fff;
}
.ui-datepicker .ui-datepicker-calendar .ui-state-disabled,
.ui-datepicker .ui-datepicker-calendar .ui-state-disabled a,
.ui-datepicker .ui-datepicker-calendar .ui-state-disabled span {
    color: #999;
}

/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi {
    width: auto;
}
.ui-datepicker-multi .ui-datepicker-group {
    float: left;
}
.ui-datepicker-multi .ui-datepicker-group table {
    width: 95%;
    margin: 0 auto .4em;
}
.ui-datepicker-multi-2 .ui-datepicker-group {
    width: 50%;
}
.ui-datepicker-multi-3 .ui-datepicker-group {
    width: 33.3%;
}
.ui-datepicker-multi-4 .ui-datepicker-group {
    width: 25%;
}
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
    border-left-width: 0;
}
.ui-datepicker-multi .ui-datepicker-buttonpane {
    clear: left;
}
.ui-datepicker-row-break {
    clear: both;
    width: 100%;
    font-size: 0;
}

/* RTL support */
.ui-datepicker-rtl {
    direction: rtl;
}
.ui-datepicker-rtl .ui-datepicker-prev {
    right: 2px;
    left: auto;
}
.ui-datepicker-rtl .ui-datepicker-next {
    left: 2px;
    right: auto;
}
.ui-datepicker-rtl .ui-datepicker-prev:hover {
    right: 1px;
    left: auto;
}
.ui-datepicker-rtl .ui-datepicker-next:hover {
    left: 1px;
    right: auto;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane {
    clear: right;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane button {
    float: left;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,
.ui-datepicker-rtl .ui-datepicker-group {
    float: right;
}
.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
    border-right-width: 0;
    border-left-width: 1px;
}

/* =Loader
-------------------------------------------------- */

#loader {
    position: fixed;
    top: 0;
    left: 50%;
    z-index: 99999;
    width: 106px;
    margin: 0 0 0 -53px;
    padding: 2px 10px 2px 30px;
    border-radius: 0 0 3px 3px;
    background: #ff8500 url(ajax-loader.gif) no-repeat 5px 4px;
    color: #fff;
    font-weight: bold;
}

/* =code line
-------------------------------------------------- */

.code-line-wrap {
    margin: 30px 0;
    border-left: 3px solid #ddd;
    border-radius: 3px;
}
.code-line {
    margin: 0;
    padding: 10px;
    background: #faf8f6;
    color: #009cd5;
    line-height: 24px;
    text-shadow: 0 1px 0 #fff;
    font-family: consolas,"courier new",monospace;
    overflow: auto;
}
.code-line-wrap ol {
    line-height: 20px;
}
.code-line-wrap ol li {
    padding: 2px 5px;
    position: relative;
    transition-duration: 0.2s;
    border: 0 solid #fff;
}
.code-line-wrap ol li.hover {
    border-width: 10px 0;
    padding: 10px 5px;
    background: rgba(149,113,77,0.05);
}

.code-line-wrap ol li.hover:before {
    display: inline-block;
    position: absolute;
    top: 0;
    left: -40px;
    width: 40px;
    height: 100%;
    background: rgba(149,113,77,0.05);
    content: '';
    z-index: 0;
}

.code-line-wrap.description-highlighted ol li {
    color: #aaa;
}
.code-line-wrap.description-highlighted ol li.hover,
.code-line-wrap.description-highlighted ol li.hover li {
    color: #000;
}

.code-line-wrap ol ol li,
.code-line-wrap ol ul li {
    padding: 0;
}
.code-line-wrap span.node {
    display: inline-block;
    padding: 0 3px;
    line-height: 18px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background: #fff;
    color: #009cd5;
    white-space: nowrap;
    font-family: consolas,"courier new",monospace;
}
.code-line span:hover,
.code-line span.hover,
.code-line-wrap ol li.hover .node {
    border: 1px solid #009cd5;
    background-color: #009cd5;
    color: #fff;
    cursor: pointer;
    text-shadow: 0 1px 0 rgba(0,0,0,0.1);
}
.code-line sup {
    margin: 0 0 0 3px;
    color: #000;
    font-size: 9px;
    font-family: sans-serif;
}
.code-line span:hover sup {
    color: #fff;
    opacity: 0.75;
    text-shadow: none;
}
.code-line-components {
    margin-left: 0;
    padding: 0 0 20px 3.038em;
    overflow: auto;
}

/* =Onboarding
-------------------------------------------------- */

html.onboarding body:before {
    display: none;
}
html.onboarding .wrap {
    border: none !important;
}
html.onboarding #header,
html.onboarding #content {
    border: none;
    background: none;
}
html.onboarding #header {
    background: #101010 url(xray.jpg) no-repeat 50% 0;
    background-size: 2874px 343px;
    white-space: nowrap;
}
html.onboarding #header .wrap {
    position: relative;
    overflow: hidden;
    height: 320px;
    padding-top: 200px;
    text-align: center;
}
html.onboarding #logo {
    display: inline-block;
    float: none;
    width: 290px;
    height: 86px;
    margin: 7px 0 0;
    vertical-align: top;
}
html.onboarding #logo a {
    width: 290px;
    height: 86px;
    font-size: 86px;
    line-height: 86px;
    text-shadow: 0 0 10px rgba(0,0,0,0.4);
}
html.onboarding #promise {
    display: inline-block;
    padding: 0 0 0 20px;
    font-size: 28px;
    line-height: 36px;
    color: #fff;
    text-shadow: 0 0 10px rgba(0,0,0,0.4);
    text-align: left;
}
html.onboarding #content {
    color: #666;
    font-size: 18px;
    line-height: 24px;
    text-align: center;
}
html.onboarding #content p {
    margin-top: 50px;
}
html.onboarding input[type="text"],
html.onboarding input[type="email"],
html.onboarding input[type="email"][readonly],
html.onboarding input[type="password"] {
    width: 300px;
    margin: 0 5px;
    background: #fff;
    height: 40px;
    padding: 2px 15px;
    font-size: 16px;
}
html.onboarding textarea {
    background: #fff;
}
html.onboarding input[type="text"][disabled],
html.onboarding input[type="email"][disabled],
html.onboarding input[type="password"][disabled],
html.onboarding textarea[disabled] {
    background: #faf8f6;
    border-color: #ccc;
}
html.onboarding textarea {
    height: 380px;
    padding: 9px 15px;
    color: #666;
    font-size: 16px;
}
html.onboarding .textarea {
    max-width: 100%;
    padding: 10px 15px 30px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background: #faf8f6;
    font-size: 16px;
    line-height: 20px;
    text-align: left;
    vertical-align: top;
}
html.onboarding #content .textarea p {
    margin: 0;
}
html.onboarding #content .textarea p + p {
    margin: 10px 0 0;
}
html.onboarding .disclaimer {
    margin: 20px 0 0;
    font-size: 14px;
    line-height: 18px;
}
html.onboarding .plumber-scheme01 {
    margin-top: -80px;
}
html.onboarding #content .msg-icon {
    margin-top: 50px;
    padding-right: 62px;
    color: #666;
    font-size: 18px;
}
html.onboarding #content .msg-icon p {
    margin: 0;
}
html.onboarding .form.horizontal {
    width: 450px;
    margin: 30px auto 0;
}
html.onboarding .form.horizontal dt {
    margin-left: -195px;
    margin-top: 8px;
    color: #999;
    font-size: 16px;
    font-weight: 400;
    text-align: right;
}
html.onboarding .form.horizontal dd {
    padding-left: 0;
}
html.onboarding .form.horizontal input,
html.onboarding .form.horizontal textarea {
    width: 100%;
    margin: 0;
}
html.onboarding .form.horizontal .field-error {
    margin: 5px 0 0 15px !important;
    text-align: left;
    line-height: 16px;
}

/* =Animations
-------------------------------------------------- */

/* Blinker */

.blink {
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 2s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;

    -moz-animation-name: blinker;
    -moz-animation-duration: 2s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;

    animation-name: blinker;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@-moz-keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0.1; }
    100% { opacity: 1.0; }
}

@-webkit-keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0.1; }
    100% { opacity: 1.0; }
}

@keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0.1; }
    100% { opacity: 1.0; }
}

/* Spin */

.spin {
    -webkit-animation-name: spinner;
    -webkit-animation-duration: 2s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;

    -moz-animation-name: spinner;
    -moz-animation-duration: 2s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;

    animation-name: spinner;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

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

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

@keyframes spinner {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* =Olark hack
-------------------------------------------------- */

#habla_window_div {
    z-index: 49 !important;
}

/* =Print
-------------------------------------------------- */

@media print {

    * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; min-width: 0 !important; }
    h2, h3, tr, img { page-break-after: avoid; }
    thead { display: table-header-group; }
    img { max-width: 100% !important; }
    @page { margin: 1.5cm; }
    p, h2, h3 { orphans: 3; widows: 3; }
    img {max-width: 100% !important;}
    a, a:visited { text-decoration: underline; }



    /* layout */

    html,
    body,
    #wrap,
    #main,
    #header,
    #content { width: auto !important; min-width: 1px !important; min-height: 1px !important; margin: 0 !important; padding: 0 !important; }

    .wrap {
        width: auto !important;
        border: none !important;
    }


    /* hide for print */

    #nav,
    #menu,
    #header,
    #sidebar,
    #footer,
    #modal-wrap,
    #page-title,
    body::before,
    body::after,
    #modal-panel { display: none !important; }

    #content .wrap.split,
    #content .wrap.split.alt {
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    #main {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 0 0 0 !important;
    }
}

.register span.twitter-typeahead {
    max-width: 100%;
}

/* =Typeahead
-------------------------------------------------- */

.tt-hint {
    color: #999
}
.tt-menu {
    width: 422px;
    margin: 2px 0 0;
    padding: 5px 0;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}
.tt-suggestion {
    padding: 3px 10px;
}
.tt-suggestion:hover,
.tt-suggestion.tt-cursor {
    cursor: pointer;
    background-color: #f7f7f7;
}
.tt-suggestion p {
    margin: 0;
}
.tt-menu {
    max-height: 300px;
    overflow-y: auto;
}