/*! normalize.css v3.0.2 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 * user zoom.
 */

html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ }

/**
 * Remove default margin.
 */
body { margin: 0; }

/* HTML5 display definitions ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary { display: block; }

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ }

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) { display: none; height: 0; }

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */
[hidden],
template { display: none; }

/* Links ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a { background-color: transparent; }

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover { outline: 0; }

/* Text-level semantics ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] { border-bottom: 1px dotted; }

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong { font-weight: bold; font-family: "Noto Serif", sans-serif; font-weight: 400; }

/**
 * Address styling not present in Safari and Chrome.
 */
dfn { font-style: italic; }

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1 { font-size: 2em; margin: 0.67em 0; }

/**
 * Address styling not present in IE 8/9.
 */
mark { background: #ff0; color: #000; }

/**
 * Address inconsistent and variable font size in all browsers.
 */
small { font-size: 80%; }

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

sup { top: -0.5em; }

sub { bottom: -0.25em; }

/* Embedded content ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img { border: 0; }

/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) { overflow: hidden; }

/* Grouping content ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure { margin: 1em 40px; }

/**
 * Address differences between Firefox and other browsers.
 */
hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; }

/**
 * Contain overflow in all browsers.
 */
pre { overflow: auto; }

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp { font-family: monospace, monospace; font-size: 1em; }

/* Forms ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 * Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea { color: inherit; /* 1 */ font: inherit; /* 2 */ margin: 0; /* 3 */ }

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button { overflow: visible; }

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select { text-transform: none; }

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 * and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 * `input` and others.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ }

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] { cursor: default; }

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner { border: 0; padding: 0; }

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input { line-height: normal; }

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type="checkbox"],
input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ }

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { height: auto; }

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 * (include `-moz` to future-proof).
 */
input[type="search"] { -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; }

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/**
 * Define consistent border, margin, and padding.
 */
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend { border: 0; /* 1 */ padding: 0; /* 2 */ }

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea { overflow: auto; }

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup { font-weight: bold; }

/* Tables ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table { border-collapse: collapse; border-spacing: 0; }

td,
th { padding: 0; }

/* Fonts */
@font-face { font-family: 'Noto Sans'; font-weight: 400; src: url("../fonts/notosans-regular-webfont.woff2") format("woff2"), url("../fonts/notosans-regular-webfont.woff") format("woff"); }
@font-face { font-family: 'Noto Sans'; font-weight: 300; src: url("../fonts/notosans-light-webfont.woff2") format("woff2"), url("../fonts/notosans-light-webfont.woff") format("woff"); }
@font-face { font-family: 'Noto Sans'; font-weight: 600; src: url("../fonts/notosans-bold.woff2") format("woff2"), url("../fonts/notosans-bold.woff") format("woff"); }
@font-face { font-family: 'Noto Sans'; font-weight: 400; font-style: italic; src: url("../fonts/notosans-italic-webfont.woff2") format("woff2"), url("../fonts/notosans-italic-webfont.woff") format("woff"); }
@font-face { font-family: 'Noto Sans'; font-weight: 300; font-style: italic; src: url("../fonts/notosans-lightitalic-webfont.woff2") format("woff2"), url("../fonts/notosans-lightitalic-webfont.woff") format("woff"); }
@font-face { font-family: 'Noto Serif'; font-weight: 400; src: url("../fonts/notoserif-regular-webfont.woff2") format("woff2"), url("../fonts/notoserif-regular-webfont.woff") format("woff"); }

/* icons */
.icons-sprite, .icons-radio, .ez-radio, .icons-radio-check, .ez-selected { background-image: url(../img/icons/radio-button.svg); background-repeat: no-repeat; }
.icons-radio, .ez-radio { background-position: 0 0; height: 26px; width: 26px; }
.icons-radio-check, .ez-selected { background-position: 0 -26px; height: 26px; width: 26px; }

/* custom-radio button (ezMark) */
.ez-hide { opacity: 0; filter: alpha(opacity=0); }
.ez-radio { display: inline-block; width: 26px; height: 26px; margin-right: 10px; margin-left: -40px; }
.ez-radio { zoom: 1; *display: inline; _height: 30px; }

/*** custom-select box ***/
.selectBox-dropdown { min-width: 150px; position: relative; border: solid 1px #ababab; text-decoration: none; text-align: left; color: #000; outline: none; vertical-align: middle; background: #fff; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; display: inline-block; cursor: default; width: 100% !important; height: 41px; line-height: 37px; }
.selectBox-dropdown:focus,
.selectBox-dropdown:focus .selectBox-arrow { border-color: #ababab; }
.selectBox-dropdown.selectBox-menuShowing { -moz-border-radius-bottomleft: 0; -moz-border-radius-bottomright: 0; -webkit-border-bottom-left-radius: 0; -webkit-border-bottom-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.selectBox-dropdown .selectBox-label { padding: 2px 8px; display: inline-block; white-space: nowrap; overflow: hidden; }
.selectBox-dropdown .selectBox-arrow { position: absolute; top: 0; right: 0; width: 43px; height: 100%; border-left: none; }

/* Dropdown menu */
.selectBox-dropdown-menu { position: absolute; z-index: 99999; max-height: 200px; min-height: 1em; border: solid 1px #ababab; /* should be the same border width as .selectBox-dropdown */ background: #FFF; -moz-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); overflow: auto; -webkit-overflow-scrolling: touch; }

/* Inline control */
.selectBox-inline { min-width: 150px; outline: none; border: solid 1px #ababab; background: #FFF; display: inline-block; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; overflow: auto; }
.selectBox-inline:focus { border-color: #ababab; }

/* Options */
.selectBox-options,
.selectBox-options LI,
.selectBox-options LI A { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; list-style: none; display: block; cursor: default; padding: 0; margin: 0; }
.selectBox-options LI A { height: 41px; line-height: 37px; padding: 0 .5em; white-space: nowrap; overflow: hidden; background: 6px center no-repeat; }
.selectBox-options LI:first-child { display: none; }
.selectBox-options LI.selectBox-hover A { background-color: #EEE; }
.selectBox-options LI.selectBox-disabled A { color: #ababab; background-color: transparent; }
.selectBox-options LI.selectBox-selected A { background-color: #C8DEF4; }
.selectBox-options .selectBox-optgroup { color: #666; background: #EEE; font-weight: bold; line-height: 1.5; padding: 0 .3em; white-space: nowrap; }

/* Disabled state */
.selectBox.selectBox-disabled { color: #ababab !important; }
.selectBox-dropdown.selectBox-disabled .selectBox-arrow { opacity: .5; filter: alpha(opacity=50); border-color: #ababab; }
.selectBox-inline.selectBox-disabled { color: #ababab !important; }
.selectBox-inline.selectBox-disabled .selectBox-options A { background-color: transparent !important; }

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

/* page */
body { margin: 0; padding: 0; font-family: "Noto Sans", sans-serif; font-size: 16px; line-height: 1.66; font-weight: 300; color: #302f2f; }
.container { width: 1097px; margin: 0 auto 25px; }
.home .container { width: 1398px; } /* different max width for home page */
/*
.container-smaller { width: 871px; }
*/
.main { padding-bottom: 0; margin-bottom: 0; }
.main-home { padding-top: 18px; }
.main .container { font-size: 18px; }

/* header */
.header { color: #302f2f; }
.header-hasShadow, .header-hasShadowEmpty { padding-bottom: 15px; position: relative; overflow: hidden; }
.header-hasShadow:after, .header-hasShadowEmpty:after { content: ''; position: absolute; bottom: 0; left: 50%; -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); height: 15px; width: 1872px; background: url(../img/elements/shadow.png) center no-repeat; }
.header-hasShadowEmpty { padding-bottom: 61px; }
.header .container { position: relative; }

/* background */
.background { position: relative; overflow: hidden; color: #fff; }
.background:before { content: ''; position: absolute; top: 0; left: 50%; -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); min-width: 2000px; width: 100%; height: 100%; -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; background-size: cover; background-repeat: no-repeat; z-index: -1; }
.background-heroBg { min-height: 514px; }
.background-heroBg:before { background-image: url("../img/elements/home.jpg"); }
.background-bannerBg { min-height: 227px; }
.background-bannerBg:before { background-image: url("../img/elements/subpage-banner.png"); }

/* logo and welcome text */
.logo { display: inline-block; margin-top: 22px; margin-right: 30px; }
.logo-centered { margin-top: 62px; float: left; }
.logged-in { float: right; color: white; font-family: "Noto Serif", sans-serif; font-size: 20px; font-weight: 400; margin: 92px 0px 16px; }
.logged-in a { margin-left: 11px; color: #d1d4d6; }
.logged-in a:hover { color: white; }
.admin-browse { position: absolute; left: 0; top: 0; color: white; font-family: "Noto Serif", sans-serif; font-size: 20px; font-weight: 400; margin: 180px 0px 16px 0; }
.admin-browse a { display: inline-block; vertical-align: top; margin-right: 30px; color: #d1d4d6; }
.admin-browse a:hover { color: white; }

.login-link { float: right; margin-top: 55px; font-family: "Noto Serif", sans-serif; font-size: 20px; color: white; text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.44); }
.login-link:hover { color: white; }


/* buttons */
.button { text-align: center; text-decoration: none; color: #fff; }

.button-center, .button-reviews { display: block; background-color: #0077bd; font-size: 20px; width: 363px; height: 56px; line-height: 56px; border: none; margin: 0 auto; }
.button-center:hover, .button-reviews:hover {  color: white; background-color: #062340; }

.button-reviews { margin: 36px auto 0; }

.button-submit { display: block; background-color: #0077bd; font-size: 20px; width: 363px; width: 100%; height: 56px; line-height: 56px; border: none; margin: 0 auto 16px; }
.button-submit:hover {  color: white; background-color: #062340; }

.button-register { display: block; background-color: #0077bd; font-size: 20px; width: 363px; height: 56px; line-height: 56px; border: none; }
.button-register:hover {  color: white; background-color: #062340; }

.button-arrow { vertical-align: middle; margin-left: 5px; margin-top: -1px; }

.start-button { margin: 12px 0 20px; }
.pdf-report-button { margin: 12px 0 40px; }

.button-link { display: inline-block; color: white; background-color: #0077bd; font-size: 20px; width: auto; height: 56px; padding: 0 80px; line-height: 56px; border: none; margin: 0 auto 16px; }
.button-link:hover {  color: white; background-color: #062340; }


/* banner text */
.header-h1 { font-size: 17px; font-family: "Noto Serif", sans-serif; font-weight: 400; color: #fff; text-shadow: 2px 4px 4px rgba(0, 0, 0, 0.52); }
.header-h1-right { float: right; margin-top: 53px; }
.header-h1-center { font-size: 46px; text-align: center; margin: 115px auto 28px; letter-spacing: 0.5px; text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.75); }

/* links */
a { text-decoration: none; color: #0077bd; }
a:hover { color: #062340; }

.link-next { float: right; width: 48%; text-align: right; }
.link-prev { float: left; width: 48%; }

/* heading styles */
h1 { color: #062340; font-family: "Noto Serif", sans-serif; font-size: 36px; font-weight: 400; margin: 21px 0 18px; }
.main-header,
h2 { color: #062340; font-family: "Noto Serif", sans-serif; font-size: 30px; font-weight: 400; margin: 21px 0 18px; }
h3 { font-family: "Noto Sans", sans-serif; font-size: 21px; font-weight: normal; margin: 14px 0; color: #3F3E3E; }
h4 { font-family: "Noto Sans", sans-serif; font-size: 21px; font-weight: normal; margin: 14px 0; color: #3F3E3E; font-style: italic; }
h5 { font-family: "Noto Sans", sans-serif; font-size: 16px; font-weight: normal; margin: 24px 0; color: #3F3E3E; padding: 20px 46px 25px 46px; background: #E2E7F1; }


.introduction-text { margin: 30px 0; line-height: 1.8; }
.introduction-text p { margin: 10px auto 25px; font-size: 20px; }

/* home steps */
.home-steps { padding-top: 17px; margin-bottom: 30px; }
.step { width: 100%; }
.step-image { float: left; width: 50%; vertical-align: top; margin: 0; overflow: hidden; }
.step-image img { display: block; height: 100%; }
.step-image-right, .step-image-rightStep1, .step-image-rightStep3 { float: right; }
.step-content { display: flex; width: 50%; justify-content: center; flex-direction: column; min-height: 367px; }
.step-header { color: #062340; font-size: 32px; font-family: "Noto Serif", sans-serif; font-weight: 400; line-height: 1.1; margin: 0 0 16px 0; letter-spacing: 0.1px; word-spacing: 0.4px; }
.step-description p { font-size: 18px; letter-spacing: 0; margin: 16px 0; }
.step-image-right .step-content { padding-right: 70px; }
.step-image-left .step-content { padding-left: 70px; }



/*
.step-image-rightStep1 { margin: 19px 76px 14px 0; }
.step-image-step2 { margin: 18px 72px 20px -14px; }
.step-header-step2 { margin: 57px 0 16px 0; }
.step-image-rightStep3 { margin: 23px 75px 12px -14px; }
.step-header-step3 { margin: 45px 0 16px 0; }
.step-image-step4 { margin: 47px 95px 53px -40px; }
.step-header-step4 { margin: 34px 0 16px 0; }
.step-content-step4 { width: 51%; }
*/

/* reviews */
.reviews { background-color: #fff; padding: 34px 0 100px; }
.testimonial-panel { margin: 0 auto; width: 500px; }
.testimonial-header { color: #062340; font-size: 32px; font-family: "Noto Serif", sans-serif; font-weight: 400; text-align: center; margin: 0 0 17px; }
.testimonial-text, .testimonial-author { font-size: 18px; text-align: center; width: 500px; margin: 0 auto 25px; }
.testimonial-author { margin-bottom: 37px; }

/*** footer ***/
.footer { width: 100%; min-height: 114px; font-size: 14px; color: #fff; background-color: #16253e; padding: 29px 0 28px 0; position: relative; left: auto; bottom: auto; }
.footer a { color: white; }
.footer a:hover { color: white; text-decoration: underline; }
/*
.footer-home { background-color: #16253e; padding: 25px 0; }
.footer-divider { position: absolute; top: 0; left: 0; width: 100%; height: 18px; background: #e9e9e9 url(../img/elements/divider.png) repeat-x 0 0; }
*/

/* footer list */
.list { padding: 4px 0 0; margin: 0; list-style: none; }
.list-item { float: left; position: relative; padding: 0 4px 0 5px; }
.list-item:before { content: ''; width: 1px; height: 14px; background-color: #908f90; position: absolute; top: 5px; left: 0; display: inline-block; }
.list-item-first { padding-left: 0; }
.list-item-first:before { display: none; }
.list-link { text-decoration: none; color: #fff; display: inline-block; padding: 4px 5px; }
.list-link:hover { color: #d0d0d8; text-decoration: underline; }
.list-link-home:hover { color: #605e5e; }
.list-link-first { padding: 4px 5px 4px 0; }
/* sticky footer */
footer.sticky { position: fixed; left: 0; bottom: 0; width: 100%; }

/* cookie policy notice */
.cookie-notice-dialog, .cookie-notice-dialog a.close-button { background: #00365E; }
.cookie-notice-dialog { position: absolute; position: fixed; z-index: 40000; bottom: 30px; right: 60px; width: 378px; right: 10%; max-width: 80%;  padding: 12px 30px; color: white; border: 4px solid white; font-size: 14px; }
.cookie-notice-dialog a { color: white; text-decoration: none; font-weight: bold; }
.cookie-notice-dialog a.close-button { display: block; width: 28px; height: 28px; line-height: 26px; text-align: center; font-size: 20px; position: absolute; right: -14px; top: -14px; border: 4px solid white; }
.cookie-notice-dialog p { margin: 1em 0; }
/* rounded cornders */
.cookie-notice-dialog { -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; -moz-box-shadow: 0px 1px 9px 1px rgba(68,68,68,0.6); -webkit-box-shadow: 0px 1px 9px 1px rgba(68,68,68,0.6); box-shadow: 0px 1px 9px 1px rgba(34,34,34,0.6); behavior: url(/export/system/modules/za.co.heliosdesign.common/resources/htc/PIE.htc); }
.cookie-notice-dialog a.close-button { -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; border-radius: 20px; -moz-box-shadow: 0px 1px 9px 1px rgba(68,68,68,0.6); -webkit-box-shadow: 0px 1px 9px 1px rgba(68,68,68,0.6); box-shadow: 0px 1px 9px 1px rgba(34,34,34,0.6); behavior: url(/export/system/modules/za.co.heliosdesign.common/resources/htc/PIE.htc); }
.cookie-notice-dialog { visibility: hidden; /* hide initially */ }

/*** Questionnaire ***/

/* progress bar */
.progress { margin-top: 53px; }
.progress-value { color: #302f2f; font-size: 19px; font-weight: 300; text-align: center; margin: 10px 0; }
.progress-bar { background-color: #dedfe1; border: none; position: relative; width: 100%; height: 22px; }
.progress-position { background-color: #0077bd; position: absolute; top: 0; left: 0; height: 22px; width: 0%; }

/* topic text */
.topic-text { font-size: 19px; font-style: italic; font-weight: 300; }

/* questions */
.fieldset { border: none; border-top: 1px solid #c1c1c1; margin: 0 0 23px; padding: 39px 0 0; }
.fieldset:first-child { padding-top: 0; border: none; }
.fieldset .incomplete-message { display: none; font-style: italic; color: #ee3159; background: #fbf7f8; padding: 21px; margin-bottom: 18px; }
.incomplete-question .incomplete-message { display: block; }

.form { padding-bottom: 65px; }
.form-paragraph { font-size: 19px; margin: 0 0 30px; }
.form-paragraph strong { font-family: "Noto Sans", sans-serif; font-size: 19px; font-weight: 400; }
.form-paragraph-register { letter-spacing: -0.6px; font-style: italic; }
.form-paragraph-italic { margin-bottom: 23px; letter-spacing: -0.6px; font-style: italic; }
.form-paragraph-bigMargin { margin-bottom: 40px; letter-spacing: -0.1px; }

.questionnaire-form-bottom { width: 75%; margin: 0 0 40px 0; }

/* completed questionnaire */
.questionnaire-completed { margin-bottom: 30px; }
.text-with-image-right .text {  }
.text-with-image-right .image { float: right; width: 444px; }
.retaking-text { border-top: 1px solid #c1c1c1; margin: 36px 0 23px; padding: 9px 0 0; }

.dashboard-buttons { display: flex; justify-content: space-between; align-content: flex-start; margin: 30px 0 40px; }
.dashboard-button { display: block; position: relative; width: 47.5%; margin-bottom: 20px; overflow: hidden; }
.dashboard-button-inner { display: block; position: relative; box-sizing: border-box; resize: horizontal; max-width: 100%; background-position: center center; background-size: cover;  }
.dashboard-button-inner {
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
}
.dashboard-button-inner::before {
	content: "";
	display: none;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgba(52, 73, 94, 0.75);
}
.dashboard-button span.spacer { display: block; width: 100%; padding-bottom: 75.62%; }
.dashboard-button span.text { display: block; position: absolute; width: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: "Noto Serif"; font-size: 28px; text-align: center; color: white; }
.dashboard-button:hover .dashboard-button-inner {
	-ms-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}
.dashboard-button:hover .dashboard-button-inner:before,
.dashboard-button:hover .dashboard-button-inner:before { display: block; }

/* labels */
.label { display: block; font-size: 18px; color: #474745; margin-bottom: 25px; }
.label:hover { color: #0077bd; cursor: pointer; }
.label-radio { padding-left: 40px; }
.label-star { margin-bottom: 11px; /*height: 41px;*/ line-height: 38px; padding-right: 48px; overflow: visible; }
.label-star:before { content: '*'; display: inline-block; margin-right: 6px; font-size: 18px; font-family: "Noto Serif", sans-serif; font-weight: 700; color: #0077bd; }
.label-star.is-noValidate { margin-top: 35px; position: relative; color: #f00; }
.label-checkbox-old { margin: 20px 0 0; padding-left: 27%; }
.label-checkbox { margin: 20px 0 0; }
.label-checkbox .input-checkbox { margin-right: 4px; }
.captcha-error { display: none; color: #f00; margin-bottom: 12px; }
.form-error { color: #f00; }

/* form inputs */
.wrapper-select,
.input-select,
.input-text { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; float: right; width: 73%; height: 41px; line-height: 37px; outline: none; -webkit-appearance: none; -moz-appearance: none; color: #302f2f; border: 1px solid #ababab; }
.wrapper-select { border: none; }
.input-select { padding: 0 18px; width: 100%; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; background-color: #fff; -webkit-appearance: none; background-image: url(../img/icons/arrow.png); background-repeat: no-repeat; background-position: 98% 50%; background-size: 13px 8px; }
.input-text { padding: 0 20px; }
.validating-form-field { display: none; }

/* checkboxes */
.checkbox-wrapper { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; margin-left: 26%; }
.checkbox-wrapper label { position: relative; line-height: 32px; margin-bottom: 15px; }
input[type='checkbox'] { display: none; }
input[type='checkbox'] + label { display: inline-block; max-width: 100%; padding: 0; margin-left: 38px; line-height: 25px; cursor: pointer; }
input[type='checkbox'] + label:before { content: ' '; display: inline-block; width: 25px; height: 25px; position: absolute; top: 0; left: -38px; vertical-align: middle; border: 1px solid rgba(0, 0, 0, .28); background: #fff; }
input[type='checkbox']:checked + label:before { content: ''; width: 25px; height: 25px; text-align: center; color: inherit; background-image: url("../img/icons/tick.svg"); background-repeat: no-repeat; background-position: center center; background-size: 64%; }

/* admin page */
.radio-input label { position: relative; }

.form-bottom { margin: 0 0 40px 26%; }
.form-bottom-registration { margin-top: 32px; }
.form-captcha { margin: 16px 0 0 26%; }
a.secondary-link { display: inline-block; float: right; margin: 0 48px 0 20px; line-height: 56px; }

.errorBox { position: absolute; top: -28px; left: 0; width: 100%; text-align: center; display: none; color: #f00; font-size: 16px; height: 22px; line-height: 22px; }

.is-hidden { display: none; }
.js-show { display: none; }

.is-sticky-footer .main { padding-bottom: 103px; }
.is-sticky-footer .footer { position: fixed; left: 0; bottom: 0; }

/* disclaimer text */
.disclaimer-text { color: #999999; margin-top: 30px; }
.disclaimer-text a { color: #999999; text-decoration: underline; }
.disclaimer-text a:hover { color: #222222; }

/*** Industry analytics ***/
table.industry-analytics { border-collapse: collapse; border: 1px solid #333; width: 720px; }
table.industry-analytics th,
table.industry-analytics td { text-align: left; vertical-align: top; padding: 5px 10px; border: 1px solid #333; }
table.industry-analytics th { background: #ddd; font-weight: 400; }
table.industry-analytics tr:hover { background: #eee; }
table.industry-analytics .col-score { width: 138px; }
table.industry-analytics .col-count { width: 214px; }
table th { font-weight: 400; }


/*** Dialog box ***/

/* dialog box */
.dialog-box {
	-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); 
	-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); 
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
	background: white;
	width: auto;
	position: absolute;
	left: 45px;
	top: 60px;
	z-index: 5000;
	/* display: none; */
	left: -999999px;
}
.dialog-box .dialog-title { color: #062340; padding: 20px 30px; font-family: "Noto Serif", sans-serif; font-weight: 400; font-size: 19px; }
.dialog-box .dialog-message { padding: 4px 30px 30px; max-height: 700px; overflow: auto; color: #302f2f; font-size: 18px; font-weight: 300; }
.dialog-box a.close-button { display: block; position: absolute; right: 24px; top: 22px; text-align: center; line-height: 1; color: #302f2f !important; text-decoration: none; font-size: 27px !important; font-weight: 300 !important; cursor: pointer; }
.dialog-box a.close-button:hover { color: black !important; }


/*** Overwrite jQuery UI styling ***/
.ui-widget { font-family: "Noto Sans", sans-serif; font-size: 16px; font-weight: 300; }
.ui-widget .ui-widget { font-size: 16px; }
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button { font-family: "Noto Sans", sans-serif; font-size: 16px; font-weight: 300; }

/*** helper classes ***/
.clearfix:before, .header:before, .step:before, .list:before, .label-star:before, .form-bottom:before,
.clearfix:after,
.header:after,
.step:after,
.list:after,
.label-star:after,
.form-bottom:after { content: " "; display: table; }
.clearfix:after, .header:after, .step:after, .list:after, .label-star:after, .form-bottom:after { clear: both; }

.hidden { display: none; }
.invisible { visibility: hidden; }


/*** RESPONSIVE: ***/
@media screen and (max-width: 1500px) {
 .home .container { width: 90%; }
}
@media screen and (max-width: 1199px) {
  .container { width: 90%; }
 .text-with-image-right .text { display: block; width: auto; }
 .text-with-image-right .image { display: none; }

 .home-steps { padding-top: 17px; }
 .step { width: 100%; padding-top: 10px; }
 .step-header { margin-top: 0px; margin-bottom: 22px; }
 .step-image { float: none; width: 100%; text-align: center; margin: 20px 0; }
 .step-image img { display: block; width: 100%; height: 100%; }
 .step-image-right, .step-image-rightStep1, .step-image-rightStep3 { float: none; }
 .step-content { display: block; width: 100%; margin: 10px 0 32px; display: block; min-height: 0; }
 .step-image-right .step-content { padding-right: 0; }
 .step-image-left .step-content { padding-left: 0; }

 .dashboard-button span.text { font-size: 2.26vw; }
}
@media screen and (max-width: 991px) {
 .label-star { padding-right: 0; }
 .label-checkbox-old { padding-left: 37%; }
 .checkbox-wrapper,
 .form-bottom,
 .form-bottom-registration,
 .form-captcha { margin-left: 37%; }
 .wrapper-select, .input-text { width: 63%; }
 .button-submit { margin-bottom: 20px; }
 .form { padding-bottom: 40px; }
}
@media screen and (max-width: 767px) {
 .step-header { text-align: center; }
 .introduction-text p, .step-description p { text-align: justify; }
 .testimonial-author, .testimonial-text { width: 90%; text-align: center; }
 .testimonial-panel { width: 90%; }
 .label-star { margin-bottom: 11px; height: auto; padding-right: 0; }
 .label-checkbox-old { padding-left: 0; }
 .wrapper-select, .input-select, .input-text { width: 100%; margin-top: 10px; display: block; float: none; }
 .wrapper-select { margin-top: 0; }
 .button-register { width: 100%; }
 .checkbox-wrapper,
 .form-bottom,
 .form-bottom-registration,
 .form-captcha { margin-left: 0; }
 .form { padding-bottom: 20px; }
 a.secondary-link { margin: 20px 0; }
 .list { text-align: center; margin-bottom: 20px; }
 .list-item { float: none; display: inline-block; }
 .copyright { text-align: justify; }
 .dashboard-buttons { display: block; }
 .dashboard-button { width: 100%; }
 .dashboard-button span.text { font-size: 22px; }
}
@media screen and (max-width: 490px) {
 /*
 .logo-centered { display: block; text-align: center; float: none; }
 */
 .header-h1-right { display: block; float: none; text-align: center; margin: 25px 0; }
 .button-center, .button-reviews { width: 90%; }
 .list { margin: 10px 0 20px; }
 .list-item { float: none; display: block; padding: 0; margin: 0 auto; text-align: center; } .list-item:before { width: 0; height: 0; display: none; }
 .list-link { padding: 8px 0; width: 100%; }
 /*
 .step-image { width: 90%; margin: 0 auto; } .step-image img { width: 100%; height: auto; }
 .step-image-step2 { margin-top: 10px; margin-bottom: 20px; }
 .step-image-rightStep3 { margin-top: 15px; margin-bottom: 15px; }
 .step-image-step4 { margin-top: 25px; margin-bottom: 40px; }
 */
 .link-next, .link-prev { display: block; float: none; text-align: center; margin: 25px 0; width: auto; }
}