.responsive-layout {
    width: 100%;
    margin: 0 auto
}
@media all and (min-width: 520px) {
    .responsive-layout {
        width: 520px
    }
}
@media all and (min-width: 760px) {
    .responsive-layout {
        width: 100%
    }
}
@media all and (min-width: 960px) {
    .responsive-layout {
        width: 960px
    }
}
.visibility-hidden {
    visibility: hidden !important
}
.display-none {
    display: none !important
}
.accessibility.no-touch .focused,
.accessibility.no-touch button:focus,
.accessibility.no-touch select:focus,
.accessibility.no-touch textarea:focus,
.accessibility.no-touch a:focus,
.accessibility.no-touch input:focus+label {
    outline: 3px solid orange
}
#accessibility-toggle {
    position: absolute;
    top: -1px;
    left: -25px;
    height: 1px;
    width: 1px;
    z-index: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
    padding: 8px 10px 8px 10px
}
.dir-rtl #accessibility-toggle {
    left: inherit;
    right: -25px
}
#accessibility-toggle:focus {
    height: auto;
    width: auto;
    top: 70px;
    left: 10px;
    z-index: 5000;
    background: #4d4e53;
    border: 1px solid #fff;
    color: #fff
}
.dir-rtl #accessibility-toggle:focus {
    left: inherit;
    right: 10px
}
#wrapper {
    width: 100%;
    margin: 0 auto;
    padding-top: 40px
}
@media all and (min-width: 520px) {
    #wrapper {
        width: 520px
    }
}
@media all and (min-width: 760px) {
    #wrapper {
        width: 100%
    }
}
@media all and (min-width: 960px) {
    #wrapper {
        width: 960px
    }
}
@media all and (min-width: 900px) {
    #wrapper {
        width: 900px;
        margin: 0 auto
    }
}
@media all and (max-width: 759px) and (min-width: 519px) {
    #wrapper {
        width: 519px;
        margin: 0 auto
    }
}
@media all and (max-width: 518px) {
    #wrapper {
        width: 100%;
        margin: 0 auto
    }
}
.drawer {
    position: fixed;
    width: 320px;
    height: 100%;
    top: 0;
    right: -320px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    z-index: 501
}
.dir-rtl .drawer {
    right: inherit;
    left: -320px
}
.drawer .drawer-back {
    float: left
}
.dir-rtl .drawer .drawer-back {
    float: right
}
.drawer .drawer-back.show {
    display: inline-block
}
.drawer .drawer-close {
    float: right
}
.dir-rtl .drawer .drawer-close {
    float: left
}
.drawer .drawer-inner {
    height: 100%
}
.drawer .drawer-item {
    display: block;
    width: 100%
}
.drawer .drawer-item-open {
    display: block
}
.loading {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5000
}
.dir-rtl .loading {
    left: auto;
    right: 0
}
.loading .loading-image {
    width: 100%;
    height: 100px;
    position: absolute;
    top: 50%;
    margin-top: -50px
}
.navigation {
    margin: 0 auto;
    position: fixed;
    top: 0;
    height: 40px;
    z-index: 500;
    width: 100%
}
@media all and (min-width: 520px) {
    .navigation {
        width: 520px
    }
}
@media all and (min-width: 760px) {
    .navigation {
        width: 100%
    }
}
@media all and (min-width: 960px) {
    .navigation {
        width: 960px
    }
}
@media all and (min-width: 900px) {
    .navigation {
        width: 900px;
        margin: 0 auto
    }
}
@media all and (max-width: 759px) and (min-width: 519px) {
    .navigation {
        width: 519px;
        margin: 0 auto
    }
}
@media all and (max-width: 518px) {
    .navigation {
        width: 100%;
        margin: 0 auto
    }
}
.ie8 .navigation {
    max-width: 1024px
}
.navigation .navigation-back-button {
    float: left
}
.dir-rtl .navigation .navigation-back-button {
    float: right
}
.navigation .navigation-drawer-toggle-button {
    float: right
}
.dir-rtl .navigation .navigation-drawer-toggle-button {
    float: left
}
.notify .notify-popup {
    position: fixed;
    top: 50%;
    width: 100%;
    z-index: 550
}
.notify .notify-popup-icon {
    position: absolute;
    left: 0;
    top: 0
}
.dir-rtl .notify .notify-popup-icon {
    left: inherit;
    right: 0
}
@media all and (max-width: 758px) {
    .notify .notify-popup-icon .icon {
        float: none;
        margin: 0 auto
    }
}
@media all and (max-width: 758px) {
    .notify .notify-popup-icon {
        float: none;
        margin: 0 auto;
        position: static
    }
}
.responsive-layout .ie8 .notify .notify-popup-content {
    max-width: 1024px;
    margin: 0 auto
}
.notify .notify-popup-content-inner {
    position: relative
}
.notify .notify-popup-done {
    display: inline-block
}
.notify .notify-shadow {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 549
}
.dir-rtl .notify .notify-shadow {
    left: inherit;
    right: 0
}
.component-container:before,
.component-container:after {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden
}
.component-container:after {
    clear: both
}
.component-container {
    zoom: 1
}
.component-left {
    width: 100%;
    float: auto
}
@media all and (min-width: 760px) {
    .component-left {
        width: 50%;
        float: left
    }
    .component-left .component-inner {
        margin-right: 5%
    }
}
.component-right {
    width: 100%;
    float: auto
}
@media all and (min-width: 760px) {
    .component-right {
        width: 50%;
        float: right
    }
    .component-right .component-inner {
        margin-left: 5%
    }
}
.component {
    position: relative
}
.block {
    position: relative
}
.aria-label {
    position: absolute !important;
    left: 0 !important;
    width: auto !important;
    height: auto !important;
    overflow: auto !important;
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    color: rgba(0, 0, 0, 0) !important;
    background: rgba(0, 0, 0, 0) !important;
    font-size: 1px !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: normal !important
}
.aria-label.aria-hidden {
    display: none !important
}
#a11y-focusguard {
    left: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    height: auto !important;
    overflow: auto !important;
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    color: rgba(0, 0, 0, 0) !important;
    background: rgba(0, 0, 0, 0) !important;
    font-size: 1px !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: normal !important
}
.touch #a11y-focusguard {
    position: relative !important
}
.no-touch #a11y-focusguard {
    position: fixed !important
}
#a11y-selected,
#a11y-selected * {
    position: fixed !important;
    left: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    height: auto !important;
    overflow: auto !important;
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    color: rgba(0, 0, 0, 0) !important;
    background: rgba(0, 0, 0, 0) !important;
    font-size: 1px !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: normal !important
}
#a11y-focuser {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: auto !important;
    height: auto !important;
    overflow: auto !important;
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    color: rgba(0, 0, 0, 0) !important;
    background: rgba(0, 0, 0, 0) !important;
    font-size: 1px !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: normal !important
}
.no-select {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}
.ie8.size-medium .component-left,
.ie8.size-large .component-left {
    width: 50%;
    float: left
}
.ie8.size-medium .component-left .component-inner,
.ie8.size-large .component-left .component-inner {
    margin-right: 5%
}
.ie8.size-medium .component-right,
.ie8.size-large .component-right {
    width: 50%;
    float: right
}
.ie8.size-medium .component-right .component-inner,
.ie8.size-large .component-right .component-inner {
    margin-left: 5%
}
.ie8.size-small .component-left {
    width: 100%;
    float: left
}
.ie8.size-small .component-left .component-inner {
    margin-right: 0
}
.ie8.size-small .component-right {
    width: 100%;
    float: right
}
.ie8.size-small .component-right .component-inner {
    margin-left: 0
}
html,
body,
body div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent
}
article,
aside,
figure,
footer,
header,
hgroup,
nav,
section {
    display: block
}
img,
object,
embed {
    max-width: 100%
}
html {
    overflow-y: scroll
}
ul li {
    margin-left: 20px
}
.dir-rtl ul li {
    margin-left: inherit;
    margin-right: 20px
}
blockquote,
q {
    quotes: none
}
blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none
}
a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent
}
del {
    text-decoration: line-through
}
abbr[title],
dfn[title] {
    border-bottom: 1px dotted #000;
    cursor: help
}
table {
    border-collapse: collapse;
    border-spacing: 0
}
th {
    font-weight: bold;
    vertical-align: bottom
}
td {
    font-weight: normal;
    vertical-align: top
}
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0
}
input,
select {
    vertical-align: middle
}
pre {
    white-space: pre;
    white-space: pre-wrap;
    white-space: pre-line;
    word-wrap: break-word
}
input[type="radio"] {
    vertical-align: text-bottom
}
input[type="checkbox"] {
    vertical-align: bottom;
    *vertical-align: baseline
}
select,
input,
textarea {
    font: 99% sans-serif
}
table {
    font-size: inherit;
    font: 100%
}
a:hover,
a:active {
    outline: none
}
small {
    font-size: 85%
}
strong,
th {
    font-weight: bold
}
td,
td img {
    vertical-align: top
}
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative
}
sup {
    top: -0.5em
}
sub {
    bottom: -0.25em
}
pre,
code,
kbd,
samp {
    font-family: monospace, sans-serif
}
.clickable,
label,
input[type=button],
input[type=submit],
button {
    cursor: pointer
}
button,
input,
select,
textarea {
    margin: 0
}
button {
    width: auto;
    overflow: visible
}
.ie7 img {
    -ms-interpolation-mode: bicubic
}
.clearfix:before,
.clearfix:after {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden
}
.clearfix:after {
    clear: both
}
.clearfix {
    zoom: 1
}
body {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}
.dir-rtl body {
    direction: rtl
}
a,
button {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.2)
}
.icon {
    -webkit-transform: translateZ(0)
}
.certificateLaunch .wrapper {
    margin: 0 auto;
    position: relative
}
.certificateLaunch .canvas-container {
    width: 595px;
    height: 841px
}
.certificateLaunch .canvas-text {
    font-weight: 300;
    font-size: 30px;
    color: #e16602
}
.certificateLaunch #composite-image {
    margin: auto
}
.certificateLaunch .hidden {
    display: none !important
}
.certificateLaunch .button.print {
    font-family: 'serif';
    position: absolute;
    z-index: 1000;
    left: 400px;
    top: 620px;
    background-color: #000;
    text-align: center;
    color: #fff;
    font-size: 16px;
    text-transform: uppercase;
    padding: 8px 25px 6px 25px;
    display: block;
    margin: 0;
    font-weight: 300
}
.certificateLaunch .button.print:hover {
    background-position: left top;
    background-repeat: repeat-x;
    background-color: #fff;
    border: 1px solid #a8a8a8;
    cursor: pointer;
    color: #e16602
}
@media print {
    .certificateLaunch .print {
        display: none
    }
    .certificateLaunch .wrapper {
        margin: 0 auto
    }
}
.accordion-component .accordion-item {
    margin-bottom: 2px
}
.accordion-component .accordion-item-title-icon {
    position: absolute;
    top: 50%;
    left: 20px;
    margin-top: -12px;
    color: #ffffff
}
.dir-rtl .accordion-component .accordion-item-title-icon {
    left: inherit;
    right: 20px
}
.accordion-component .accordion-item-title {
    display: block;
    position: relative;
    padding: 20px;
    padding-left: 64px;
    color: #ffffff;
    background-color: #4d4e53;
    text-decoration: none
}
.dir-rtl .accordion-component .accordion-item-title {
    padding-left: inherit;
    padding-right: 64px
}
.accordion-component .accordion-item-title.visited {
    color: #fff;
    background-color: #dd6767;
    border-color: #4d4e53
}
.accordion-component .accordion-item-title.visited .accordion-item-title-icon {
    color: #fff
}
.accordion-component .accordion-item-title.selected {
    color: #fff;
    background-color: #d43d3d;
    border-color: #4d4e53
}
.accordion-component .accordion-item-title.selected .accordion-item-title-icon {
    color: #fff
}
.no-touch .accordion-component .accordion-item-title:hover {
    color: #fff;
    background-color: #d43d3d;
    border-color: #4d4e53
}
.no-touch .accordion-component .accordion-item-title:hover .accordion-item-title-icon {
    color: #fff
}
.no-touch .accordion-component .accordion-item-title.visited:hover {
    color: #fff;
    background-color: #d43d3d;
    border-color: #4d4e53
}
.no-touch .accordion-component .accordion-item-title.visited:hover .accordion-item-title-icon {
    color: #fff
}
.no-touch .accordion-component .accordion-item-title.selected:hover {
    background-color: #dd6767
}
.accordion-component .accordion-item-body {
    color: #ffffff;
    background-color: #d43d3d;
    display: none
}
.accordion-component .accordion-item-body-inner {
    padding: 20px
}
.accordion-component .accordion-item-graphic {
    padding: 0 0 20px
}
.accordion-component .accordion-item-graphic img {
    vertical-align: bottom
}
.article.article-noheader .article-inner {
    padding-top: 0;
    background-image: none;
    background-position: 0 0;
    background-repeat: repeat
}
.results-retry-button {
    margin: 20px 0 30px
}
.assessmentResults-component.visibility-hidden {
    display: none
}
.gmcq-component .gmcq-item {
    position: relative;
    float: left
}
.dir-rtl .gmcq-component .gmcq-item {
    float: right
}
.gmcq-component .gmcq-item label {
    color: #ffffff;
    display: block;
    border: 3px solid #4d4e53;
    margin: 2px;
    position: relative;
    z-index: 1;
    background-color: #4d4e53;
    overflow: hidden;
    cursor: pointer
}
.gmcq-component .gmcq-item label img {
    vertical-align: bottom
}
.gmcq-component .gmcq-item label .gmcq-answer-icon {
    color: #ffffff
}
.gmcq-component .gmcq-item label .gmcq-answer-icon.radio {
    width: 26px;
    height: 26px
}
.gmcq-component .gmcq-item label .gmcq-answer-icon.radio:before {
    content: "\e65e"
}
.gmcq-component .gmcq-item label .gmcq-answer-icon.checkbox {
    border: 3px solid #ffffff;
    width: 18px;
    height: 18px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 2px
}
.gmcq-component .gmcq-item label .gmcq-answer-icon.checkbox:before {
    content: " "
}
.gmcq-component .gmcq-item label.selected {
    color: #ffffff;
    background-color: #1c1c1e
}
.gmcq-component .gmcq-item label.selected .gmcq-answer-icon.radio:before {
    content: "\e65d"
}
.gmcq-component .gmcq-item label.selected .gmcq-answer-icon.checkbox {
    border: 3px solid #4d4e53;
    border-color: #ffffff;
    width: 18px;
    height: 18px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 2px
}
.gmcq-component .gmcq-item label.selected .gmcq-answer-icon.checkbox:before {
    content: "\e633"
}
.gmcq-component .gmcq-item-inner {
    padding: 20px;
    padding-left: 64px
}
.dir-rtl .gmcq-component .gmcq-item-inner {
    margin-left: inherit;
    padding-right: 64px
}
.gmcq-component .gmcq-item input {
    position: absolute;
    top: 25px;
    left: 25px;
    filter: alpha(opacity=0);
    opacity: 0
}
.dir-rtl .gmcq-component .gmcq-item input {
    left: inherit;
    right: 25px
}
.gmcq-component .gmcq-item-checkbox {
    position: relative
}
.gmcq-component .gmcq-item-state {
    background: none;
    position: absolute;
    width: 24px;
    height: 24px;
    top: 50%;
    margin-top: -12px;
    left: 10px;
    z-index: 0
}
.dir-rtl .gmcq-component .gmcq-item-state {
    left: inherit;
    right: 10px
}
.gmcq-component .gmcq-correct-icon {
    color: #82ca9c;
    display: none
}
.gmcq-component .gmcq-incorrect-icon {
    color: #f26c4f;
    display: none
}
.gmcq-component .gmcq-widget.show-user-answer .gmcq-item-icon {
    display: none
}
.gmcq-component .gmcq-widget.show-user-answer .incorrect .selected .gmcq-incorrect-icon {
    display: block
}
.gmcq-component .gmcq-widget.show-user-answer .correct .selected .gmcq-correct-icon {
    display: block
}
.gmcq-component .gmcq-widget.show-correct-answer .gmcq-item-icon {
    display: none
}
.gmcq-component .gmcq-widget.show-correct-answer .selected .gmcq-correct-icon {
    display: block
}
.gmcq-component .gmcq-widget.disabled .gmcq-item label.selected.disabled {
    background-color: #1c1c1e;
    cursor: default
}
.gmcq-component .gmcq-widget.disabled .gmcq-item label.disabled {
    color: #ffffff;
    background-color: #727272;
    border-color: #4d4e53;
    cursor: default
}
.gmcq-component .gmcq-widget.disabled .gmcq-item.correct .selected .state {
    color: #82ca9c
}
.gmcq-component .gmcq-widget.disabled .gmcq-item.incorrect .selected .state {
    color: #f26c4f
}
.no-touch .gmcq-component .gmcq-widget:not(.disabled) .gmcq-item label:hover {
    color: #ffffff;
    background-color: #1c1c1e
}
.no-touch .gmcq-component .gmcq-widget:not(.disabled) .gmcq-item label:hover .gmcq-item-icon {
    color: #ffffff
}
.graphic-attribution {
    font-size: .75em;
    line-height: 1em
}
.matching-component .matching-item {
    padding-bottom: 20px
}
.matching-component .matching-item-title {
    margin-bottom: 2px
}
.matching-component .matching-select-container {
    position: relative;
    overflow: hidden;
    background-color: #4d4e53
}
@media all and (max-width: 760px) {
    .matching-component .matching-select-container {
        width: 100%
    }
}
.matching-component .matching-select-icon {
    color: #ffffff
}
.matching-component .matching-correct-icon {
    color: #51FB66;
    display: none
}
.matching-component .matching-incorrect-icon {
    color: #F14E4E;
    display: none
}
.matching-component .matching-select {
    position: relative;
    border: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    background: transparent;
    padding: 15px 35px 15px 20px;
    cursor: pointer;
    color: #ffffff;
    width: 100%
}
.dir-rtl .matching-component .matching-select {
    padding: 15px 20px 15px 35px
}
@media all and (max-width: 760px) and (min-width: 520px) {
    .matching-component .matching-select {
        width: 105%
    }
}
@media all and (max-width: 519px) {
    .matching-component .matching-select {
        width: 110%
    }
}
.matching-component .matching-select:focus {
    background-color: #d43d3d
}
.matching-component .matching-select:disabled {
    color: #ccc
}
.matching-component .matching-select-state {
    background: none;
    position: absolute;
    right: 10px;
    width: 24px;
    height: 24px;
    top: 50%;
    margin-top: -12px;
    z-index: 0
}
.dir-rtl .matching-component .matching-select-state {
    right: inherit;
    left: 10px
}
.matching-component .matching-widget.submitted .matching-select {
    cursor: default
}
.matching-component .matching-widget.submitted .matching-select-container {
    background-color: #727272
}
.matching-component .matching-widget.show-user-answer .matching-select-icon {
    display: none
}
.matching-component .matching-widget.show-user-answer .incorrect .matching-incorrect-icon {
    display: block
}
.matching-component .matching-widget.show-user-answer .correct .matching-correct-icon {
    display: block
}
.matching-component .matching-widget.show-correct-answer .matching-select-icon {
    display: none
}
.matching-component .matching-widget.show-correct-answer .matching-correct-icon {
    display: block
}
.no-touch .matching-select-icon:hover {
    color: #fff
}
.no-touch .matching-select-container:hover {
    color: #fff;
    background-color: #d43d3d
}
.ie8 .matching-select-container.disabled {
    background-color: #727272
}
.matching-component select[disabled]::-ms-value {
    color: #ffffff
}
.matching-select {
    -webkit-appearance: none
}
.matching-select::-ms-expand {
    display: none
}
.Firefox .matching-select {
    width: 105%
}
.ie8 .matching-select,
.ie9 .matching-select {
    width: 110%
}
.mcq-component .mcq-item {
    background-color: #4d4e53;
    position: relative
}
.mcq-component .mcq-item label {
    color: #ffffff;
    display: block;
    margin-bottom: 2px;
    position: relative;
    z-index: 1;
    background-color: #4d4e53;
    cursor: pointer
}
.mcq-component .mcq-item label .mcq-answer-icon {
    color: #ffffff
}
.mcq-component .mcq-item label .mcq-answer-icon.radio {
    width: 26px;
    height: 26px
}
.mcq-component .mcq-item label .mcq-answer-icon.radio:before {
    content: "\e65e"
}
.mcq-component .mcq-item label .mcq-answer-icon.checkbox {
    border: 3px solid #ffffff;
    width: 18px;
    height: 18px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 2px
}
.mcq-component .mcq-item label .mcq-answer-icon.checkbox:before {
    content: " "
}
.mcq-component .mcq-item label.selected {
    color: #fff;
    background-color: #d43d3d;
    border-color: #4d4e53
}
.mcq-component .mcq-item label.selected .mcq-answer-icon.radio:before {
    content: "\e65d"
}
.mcq-component .mcq-item label.selected .mcq-answer-icon.checkbox {
    border: 3px solid #fff;
    width: 18px;
    height: 18px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 2px
}
.mcq-component .mcq-item label.selected .mcq-answer-icon.checkbox:before {
    content: "\e633"
}
.mcq-component .mcq-item label.selected .mcq-item-icon {
    color: #fff
}
.mcq-component .mcq-item-inner {
    padding: 20px;
    padding-left: 64px
}
.dir-rtl .mcq-component .mcq-item-inner {
    padding-left: inherit;
    padding-right: 64px
}
.mcq-component .mcq-item input {
    position: absolute;
    top: 14px;
    left: 14px
}
.dir-rtl .mcq-component .mcq-item input {
    left: inherit;
    right: 14px
}
.mcq-component .mcq-correct-icon {
    color: #51FB66;
    display: none
}
.mcq-component .mcq-incorrect-icon {
    color: #F14E4E;
    display: none
}
.mcq-component .mcq-item-state {
    background: none;
    position: absolute;
    left: 10px;
    width: 24px;
    height: 24px;
    top: 50%;
    margin-top: -12px;
    z-index: 0
}
.dir-rtl .mcq-component .mcq-item-state {
    left: inherit;
    right: 10px
}
.mcq-widget.show-user-answer .mcq-item-icon {
    display: none
}
.mcq-widget.show-user-answer .incorrect .selected .mcq-incorrect-icon {
    display: block
}
.mcq-widget.show-user-answer .correct .selected .mcq-correct-icon {
    display: block
}
.mcq-widget.show-correct-answer .mcq-item-icon {
    display: none
}
.mcq-widget.show-correct-answer .selected .mcq-correct-icon {
    display: block
}
.mcq-widget.disabled .mcq-item label.selected.disabled {
    color: #fff;
    background-color: #d43d3d;
    border-color: #4d4e53;
    cursor: default
}
.mcq-widget.disabled .mcq-item label.disabled {
    color: #ccc;
    background-color: #727272;
    border-color: #4d4e53;
    cursor: default
}
.mcq-widget.disabled .mcq-item.correct .selected .state {
    color: #51FB66
}
.mcq-widget.disabled .mcq-item.incorrect .selected .state {
    color: #F14E4E
}
.no-touch .mcq-widget:not(.disabled) .mcq-item label:hover {
    color: #fff;
    background-color: #d43d3d;
    border-color: #4d4e53
}
.no-touch .mcq-widget:not(.disabled) .mcq-item label:hover .mcq-item-icon {
    color: #fff
}
.no-touch .mcq-widget:not(.disabled) .mcq-item label.disabled {
    color: #ccc;
    background-color: #727272;
    border-color: #4d4e53
}
.no-touch .mcq-widget:not(.disabled) .mcq-item label.disabled:hover {
    color: #ccc;
    background-color: #727272;
    border-color: #4d4e53
}
.no-touch .mcq-widget:not(.disabled) .mcq-item label.disabled .mcq-item-icon {
    color: #ccc
}
.media-component .me-plugin {
    position: static
}
.media-component .mejs-container {
    background-color: transparent
}
.media-component .mejs-container .mejs-controls .mejs-time {
    padding-right: 1px;
    padding-left: 1px
}
.media-component .external-source .mejs-container {
    position: relative;
    padding-top: 35px;
    height: 0;
    overflow: hidden
}
.media-component .external-source .mejs-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}
.media-component .external-source .mejs-overlay-button {
    display: none
}
.media-component .media-transcript {
    padding: 14px;
    display: block;
    color: #ffffff;
    background-color: #d43d3d;
    text-decoration: none
}
.media-component .media-transcript:hover {
    color: #fff;
    background-color: #d43d3d
}
.media-component .media-inline-transcript-body-container {
    margin-top: 10px;
    display: none
}
.media-component .media-inline-transcript-body {
    padding: 0 0 0
}
.media-component .media-transcript-button-container {
    padding: 1px
}
.media-component .media-external-transcript-button,
.media-component .media-inline-transcript-button {
    display: block
}
.media-top-padding {
    padding-top: 4em
}
.mejs-container {
    position: relative;
    background: #000;
    font-family: Helvetica, Arial;
    text-align: left;
    vertical-align: top;
    text-indent: 0
}
.me-plugin {
    position: absolute
}
.mejs-embed,
.mejs-embed body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: #000;
    overflow: hidden
}
.mejs-fullscreen {
    overflow: hidden !important
}
.mejs-container-fullscreen {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 1000
}
.mejs-container-fullscreen .mejs-mediaelement,
.mejs-container-fullscreen video {
    width: 100%;
    height: 100%
}
.mejs-clear {
    clear: both
}
.mejs-background {
    position: absolute;
    top: 0;
    left: 0
}
.mejs-mediaelement {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}
.mejs-poster {
    position: absolute;
    top: 0;
    left: 0;
    background-size: contain;
    background-position: 50% 50%;
    background-repeat: no-repeat
}
:root .mejs-poster img {
    display: none
}
.mejs-poster img {
    padding: 0;
    border: 0
}
.mejs-overlay {
    position: absolute;
    top: 0;
    left: 0
}
.mejs-overlay-play {
    cursor: pointer
}
.mejs-overlay-button {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    margin: -50px 0 0 -50px;
    background: url(../../assets/bigplay.svg) no-repeat
}
.no-svg .mejs-overlay-button {
    background-image: url(../../assets/bigplay.png)
}
.mejs-overlay:hover .mejs-overlay-button {
    background-position: 0 -100px
}
.mejs-overlay-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    margin: -40px 0 0 -40px;
    background: #333;
    background: url(../../assets/background.png);
    background: rgba(0, 0, 0, 0.9);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(50, 50, 50, 0.9)), to(rgba(0, 0, 0, 0.9)));
    background: -webkit-linear-gradient(top, rgba(50, 50, 50, 0.9), rgba(0, 0, 0, 0.9));
    background: -moz-linear-gradient(top, rgba(50, 50, 50, 0.9), rgba(0, 0, 0, 0.9));
    background: -o-linear-gradient(top, rgba(50, 50, 50, 0.9), rgba(0, 0, 0, 0.9));
    background: -ms-linear-gradient(top, rgba(50, 50, 50, 0.9), rgba(0, 0, 0, 0.9));
    background: linear-gradient(rgba(50, 50, 50, 0.9), rgba(0, 0, 0, 0.9))
}
.mejs-overlay-loading span {
    display: block;
    width: 80px;
    height: 80px;
    background: transparent url(../../assets/loading.gif) 50% 50% no-repeat
}
.mejs-container .mejs-controls {
    position: absolute;
    list-style-type: none;
    margin: 0;
    padding: 0;
    bottom: 0;
    left: 0;
    background: url(../../assets/background.png);
    background: rgba(0, 0, 0, 0.7);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(50, 50, 50, 0.7)), to(rgba(0, 0, 0, 0.7)));
    background: -webkit-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
    background: -moz-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
    background: -o-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
    background: -ms-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
    background: linear-gradient(rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
    height: 30px;
    width: 100%
}
.mejs-container .mejs-controls div {
    list-style-type: none;
    background-image: none;
    display: block;
    float: left;
    margin: 0;
    padding: 0;
    width: 26px;
    height: 26px;
    font-size: 11px;
    line-height: 11px;
    font-family: Helvetica, Arial;
    border: 0
}
.mejs-controls .mejs-button button {
    cursor: pointer;
    display: block;
    font-size: 0;
    line-height: 0;
    text-decoration: none;
    margin: 7px 5px;
    padding: 0;
    position: absolute;
    height: 16px;
    width: 16px;
    border: 0;
    background: transparent url(../../assets/controls.svg) no-repeat
}
.no-svg .mejs-controls .mejs-button button {
    background-image: url(../../assets/controls.png)
}
.mejs-controls .mejs-button button:focus {
    outline: solid 1px yellow
}
.mejs-container .mejs-controls .mejs-time {
    color: #fff;
    display: block;
    height: 17px;
    width: auto;
    padding: 8px 3px 0 3px;
    overflow: hidden;
    text-align: center;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    float: left
}
.mejs-container .mejs-controls .mejs-time span {
    color: #fff;
    font-size: 11px;
    line-height: 12px;
    display: block;
    float: left;
    margin: 1px 2px 0 0;
    width: auto
}
.mejs-controls .mejs-play button {
    background-position: 0 0
}
.mejs-controls .mejs-pause button {
    background-position: 0 -16px
}
.mejs-controls .mejs-stop button {
    background-position: -112px 0
}
.mejs-controls div.mejs-time-rail {
    direction: ltr;
    width: 200px;
    padding-top: 5px
}
.mejs-controls .mejs-time-rail span {
    display: block;
    position: absolute;
    width: 180px;
    height: 10px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    cursor: pointer
}
.mejs-controls .mejs-time-rail .mejs-time-total {
    margin: 5px;
    background: #333;
    background: rgba(50, 50, 50, 0.8);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(30, 30, 30, 0.8)), to(rgba(60, 60, 60, 0.8)));
    background: -webkit-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8));
    background: -moz-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8));
    background: -o-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8));
    background: -ms-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8));
    background: linear-gradient(rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8))
}
.mejs-controls .mejs-time-rail .mejs-time-buffering {
    width: 100%;
    background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255, 255, 255, 0.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, 0.15)), color-stop(.75, rgba(255, 255, 255, 0.15)), color-stop(.75, transparent), to(transparent));
    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    -webkit-background-size: 15px 15px;
    -moz-background-size: 15px 15px;
    -o-background-size: 15px 15px;
    background-size: 15px 15px;
    -webkit-animation: buffering-stripes 2s linear infinite;
    -moz-animation: buffering-stripes 2s linear infinite;
    -ms-animation: buffering-stripes 2s linear infinite;
    -o-animation: buffering-stripes 2s linear infinite;
    animation: buffering-stripes 2s linear infinite
}
@-webkit-keyframes buffering-stripes {
    from {
        background-position: 0 0
    }
    to {
        background-position: 30px 0
    }
}
@-moz-keyframes buffering-stripes {
    from {
        background-position: 0 0
    }
    to {
        background-position: 30px 0
    }
}
@-ms-keyframes buffering-stripes {
    from {
        background-position: 0 0
    }
    to {
        background-position: 30px 0
    }
}
@-o-keyframes buffering-stripes {
    from {
        background-position: 0 0
    }
    to {
        background-position: 30px 0
    }
}
@keyframes buffering-stripes {
    from {
        background-position: 0 0
    }
    to {
        background-position: 30px 0
    }
}
.mejs-controls .mejs-time-rail .mejs-time-loaded {
    background: #3caac8;
    background: rgba(60, 170, 200, 0.8);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(44, 124, 145, 0.8)), to(rgba(78, 183, 212, 0.8)));
    background: -webkit-linear-gradient(top, rgba(44, 124, 145, 0.8), rgba(78, 183, 212, 0.8));
    background: -moz-linear-gradient(top, rgba(44, 124, 145, 0.8), rgba(78, 183, 212, 0.8));
    background: -o-linear-gradient(top, rgba(44, 124, 145, 0.8), rgba(78, 183, 212, 0.8));
    background: -ms-linear-gradient(top, rgba(44, 124, 145, 0.8), rgba(78, 183, 212, 0.8));
    background: linear-gradient(rgba(44, 124, 145, 0.8), rgba(78, 183, 212, 0.8));
    width: 0
}
.mejs-controls .mejs-time-rail .mejs-time-current {
    background: #fff;
    background: rgba(255, 255, 255, 0.8);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.9)), to(rgba(200, 200, 200, 0.8)));
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8));
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8));
    background: -o-linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8));
    background: -ms-linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8));
    background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8));
    width: 0
}
.mejs-controls .mejs-time-rail .mejs-time-handle {
    display: none;
    position: absolute;
    margin: 0;
    width: 10px;
    background: #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    cursor: pointer;
    border: solid 2px #333;
    top: -2px;
    text-align: center
}
.mejs-controls .mejs-time-rail .mejs-time-float {
    position: absolute;
    display: none;
    background: #eee;
    width: 36px;
    height: 17px;
    border: solid 1px #333;
    top: -26px;
    margin-left: -18px;
    text-align: center;
    color: #111
}
.mejs-controls .mejs-time-rail .mejs-time-float-current {
    margin: 2px;
    width: 30px;
    display: block;
    text-align: center;
    left: 0
}
.mejs-controls .mejs-time-rail .mejs-time-float-corner {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    line-height: 0;
    border: solid 5px #eee;
    border-color: #eee transparent transparent transparent;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    top: 15px;
    left: 13px
}
.mejs-long-video .mejs-controls .mejs-time-rail .mejs-time-float {
    width: 48px
}
.mejs-long-video .mejs-controls .mejs-time-rail .mejs-time-float-current {
    width: 44px
}
.mejs-long-video .mejs-controls .mejs-time-rail .mejs-time-float-corner {
    left: 18px
}
.mejs-controls .mejs-fullscreen-button button {
    background-position: -32px 0
}
.mejs-controls .mejs-unfullscreen button {
    background-position: -32px -16px
}
.mejs-controls .mejs-mute button {
    background-position: -16px -16px
}
.mejs-controls .mejs-unmute button {
    background-position: -16px 0
}
.mejs-controls .mejs-volume-button {
    position: relative
}
.mejs-controls .mejs-volume-button .mejs-volume-slider {
    display: none;
    height: 115px;
    width: 25px;
    background: url(../../assets/background.png);
    background: rgba(50, 50, 50, 0.7);
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    top: -115px;
    left: 0;
    z-index: 1;
    position: absolute;
    margin: 0
}
.mejs-controls .mejs-volume-button:hover {
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px
}
.mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-total {
    position: absolute;
    left: 11px;
    top: 8px;
    width: 2px;
    height: 100px;
    background: #ddd;
    background: rgba(255, 255, 255, 0.5);
    margin: 0
}
.mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-current {
    position: absolute;
    left: 11px;
    top: 8px;
    width: 2px;
    height: 100px;
    background: #ddd;
    background: rgba(255, 255, 255, 0.9);
    margin: 0
}
.mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-handle {
    position: absolute;
    left: 4px;
    top: -3px;
    width: 16px;
    height: 6px;
    background: #ddd;
    background: rgba(255, 255, 255, 0.9);
    cursor: N-resize;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;
    margin: 0
}
.mejs-controls div.mejs-horizontal-volume-slider {
    height: 26px;
    width: 60px;
    position: relative
}
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
    position: absolute;
    left: 0;
    top: 11px;
    width: 50px;
    height: 8px;
    margin: 0;
    padding: 0;
    font-size: 1px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    background: #333;
    background: rgba(50, 50, 50, 0.8);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(30, 30, 30, 0.8)), to(rgba(60, 60, 60, 0.8)));
    background: -webkit-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8));
    background: -moz-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8));
    background: -o-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8));
    background: -ms-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8));
    background: linear-gradient(rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8))
}
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
    position: absolute;
    left: 0;
    top: 11px;
    width: 50px;
    height: 8px;
    margin: 0;
    padding: 0;
    font-size: 1px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    background: #fff;
    background: rgba(255, 255, 255, 0.8);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.9)), to(rgba(200, 200, 200, 0.8)));
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8));
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8));
    background: -o-linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8));
    background: -ms-linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8));
    background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8))
}
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle {
    display: none
}
.mejs-controls .mejs-captions-button {
    position: relative
}
.mejs-controls .mejs-captions-button button {
    background-position: -48px 0
}
.mejs-captions-button .mejs-captions-selector {
    visibility: hidden;
    position: absolute;
    bottom: 26px;
    right: -10px;
    width: 130px;
    height: 100px;
    background: url(../../assets/background.png);
    background: rgba(50, 50, 50, 0.7);
    border: solid 1px transparent;
    padding: 10px;
    overflow: hidden;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0
}
.mejs-controls .mejs-captions-button .mejs-captions-selector ul {
    margin: 0;
    padding: 0;
    display: block;
    list-style-type: none !important;
    overflow: hidden
}
.mejs-controls .mejs-captions-button .mejs-captions-selector ul li {
    margin: 0 0 6px 0;
    padding: 0;
    list-style-type: none !important;
    display: block;
    color: #fff;
    overflow: hidden
}
.mejs-controls .mejs-captions-button .mejs-captions-selector ul li input {
    clear: both;
    float: left;
    margin: 3px 3px 0 5px
}
.mejs-controls .mejs-captions-button .mejs-captions-selector ul li label {
    width: 100px;
    float: left;
    padding: 4px 0 0 0;
    line-height: 15px;
    font-family: helvetica, arial;
    font-size: 10px
}
.mejs-controls .mejs-captions-button .mejs-captions-translations {
    font-size: 10px;
    margin: 0 0 5px 0
}
.mejs-chapters {
    position: absolute;
    top: 0;
    left: 0;
    -xborder-right: solid 1px #fff;
    width: 10000px;
    z-index: 1
}
.mejs-chapters .mejs-chapter {
    position: absolute;
    float: left;
    background: #222;
    background: rgba(0, 0, 0, 0.7);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(50, 50, 50, 0.7)), to(rgba(0, 0, 0, 0.7)));
    background: -webkit-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
    background: -moz-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
    background: -o-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
    background: -ms-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
    background: linear-gradient(rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7));
    filter: progid: DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#323232, endColorstr=#000000);
    overflow: hidden;
    border: 0
}
.mejs-chapters .mejs-chapter .mejs-chapter-block {
    font-size: 11px;
    color: #fff;
    padding: 5px;
    display: block;
    border-right: solid 1px #333;
    border-bottom: solid 1px #333;
    cursor: pointer
}
.mejs-chapters .mejs-chapter .mejs-chapter-block-last {
    border-right: none
}
.mejs-chapters .mejs-chapter .mejs-chapter-block:hover {
    background: #666;
    background: rgba(102, 102, 102, 0.7);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(102, 102, 102, 0.7)), to(rgba(50, 50, 50, 0.6)));
    background: -webkit-linear-gradient(top, rgba(102, 102, 102, 0.7), rgba(50, 50, 50, 0.6));
    background: -moz-linear-gradient(top, rgba(102, 102, 102, 0.7), rgba(50, 50, 50, 0.6));
    background: -o-linear-gradient(top, rgba(102, 102, 102, 0.7), rgba(50, 50, 50, 0.6));
    background: -ms-linear-gradient(top, rgba(102, 102, 102, 0.7), rgba(50, 50, 50, 0.6));
    background: linear-gradient(rgba(102, 102, 102, 0.7), rgba(50, 50, 50, 0.6));
    filter: progid: DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#666666, endColorstr=#323232)
}
.mejs-chapters .mejs-chapter .mejs-chapter-block .ch-title {
    font-size: 12px;
    font-weight: bold;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0 0 3px 0;
    line-height: 12px
}
.mejs-chapters .mejs-chapter .mejs-chapter-block .ch-timespan {
    font-size: 12px;
    line-height: 12px;
    margin: 3px 0 4px 0;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis
}
.mejs-captions-layer {
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: center;
    line-height: 22px;
    font-size: 12px;
    color: #fff
}
.mejs-captions-layer a {
    color: #fff;
    text-decoration: underline
}
.mejs-captions-layer[lang=ar] {
    font-size: 20px;
    font-weight: normal
}
.mejs-captions-position {
    position: absolute;
    width: 100%;
    bottom: 15px;
    left: 0
}
.mejs-captions-position-hover {
    bottom: 45px
}
.mejs-captions-text {
    padding: 3px 5px;
    background: url(../../assets/background.png);
    background: rgba(20, 20, 20, 0.8)
}
.me-cannotplay a {
    color: #fff;
    font-weight: bold
}
.me-cannotplay span {
    padding: 15px;
    display: block
}
.mejs-controls .mejs-loop-off button {
    background-position: -64px -16px
}
.mejs-controls .mejs-loop-on button {
    background-position: -64px 0
}
.mejs-controls .mejs-backlight-off button {
    background-position: -80px -16px
}
.mejs-controls .mejs-backlight-on button {
    background-position: -80px 0
}
.mejs-controls .mejs-picturecontrols-button {
    background-position: -96px 0
}
.mejs-contextmenu {
    position: absolute;
    width: 150px;
    padding: 10px;
    border-radius: 4px;
    top: 0;
    left: 0;
    background: #fff;
    border: solid 1px #999;
    z-index: 1001
}
.mejs-contextmenu .mejs-contextmenu-separator {
    height: 1px;
    font-size: 0;
    margin: 5px 6px;
    background: #333
}
.mejs-contextmenu .mejs-contextmenu-item {
    font-family: Helvetica, Arial;
    font-size: 12px;
    padding: 4px 6px;
    cursor: pointer;
    color: #333
}
.mejs-contextmenu .mejs-contextmenu-item:hover {
    background: #2C7C91;
    color: #fff
}
.mejs-controls .mejs-sourcechooser-button {
    position: relative
}
.mejs-controls .mejs-sourcechooser-button button {
    background-position: -128px 0
}
.mejs-sourcechooser-button .mejs-sourcechooser-selector {
    visibility: hidden;
    position: absolute;
    bottom: 26px;
    right: -10px;
    width: 130px;
    height: 100px;
    background: url(../../assets/background.png);
    background: rgba(50, 50, 50, 0.7);
    border: solid 1px transparent;
    padding: 10px;
    overflow: hidden;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0
}
.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul {
    margin: 0;
    padding: 0;
    display: block;
    list-style-type: none !important;
    overflow: hidden
}
.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li {
    margin: 0 0 6px 0;
    padding: 0;
    list-style-type: none !important;
    display: block;
    color: #fff;
    overflow: hidden
}
.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li input {
    clear: both;
    float: left;
    margin: 3px 3px 0 5px
}
.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li label {
    width: 100px;
    float: left;
    padding: 4px 0 0 0;
    line-height: 15px;
    font-family: helvetica, arial;
    font-size: 10px
}
.mejs-postroll-layer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../../assets/background.png);
    background: rgba(50, 50, 50, 0.7);
    z-index: 1000;
    overflow: hidden
}
.mejs-postroll-layer-content {
    width: 100%;
    height: 100%
}
.mejs-postroll-close {
    position: absolute;
    right: 0;
    top: 0;
    background: url(../../assets/background.png);
    background: rgba(50, 50, 50, 0.7);
    color: #fff;
    padding: 4px;
    z-index: 100;
    cursor: pointer
}
.hotgrid-component .hotgrid-widget {
    position: relative
}
.hotgrid-component .hotgrid-grid-item {
    float: left;
    text-align: center;
    width: 50%
}
.hotgrid-component .hotgrid-grid-item.visited .hotgrid-item-states-image>img {
    display: none
}
.hotgrid-component .hotgrid-grid-item.visited .hotgrid-item-states-image img.hotgrid-item-image-hover {
    display: none !important
}
.hotgrid-component .hotgrid-grid-item.visited .hotgrid-item-states-image img.hotgrid-item-image-visited {
    display: block !important
}
.dir-rtl .hotgrid-component .hotgrid-grid-item {
    float: right
}
.hotgrid-component .hotgrid-item-image {
    display: block;
    margin: 10px
}
.hotgrid-component .hotgrid-item-image img {
    display: block;
    transition: all .25s
}
.hotgrid-component .hotgrid-item-image.hotgrid-item-states-image img.hotgrid-item-image-hover {
    display: none
}
.hotgrid-component .hotgrid-item-image.hotgrid-item-states-image img.hotgrid-item-image-visited {
    display: none
}
.no-touch .hotgrid-component .hotgrid-item-image.hotgrid-item-states-image:hover>img {
    display: none
}
.no-touch .hotgrid-component .hotgrid-item-image.hotgrid-item-states-image:hover img.hotgrid-item-image-hover {
    display: block
}
.no-touch .hotgrid-component .hotgrid-item-image.hotgrid-item-states-image:hover img.hotgrid-item-image-visited {
    display: none
}
@media all and (max-width: 758px) {
    .hotgrid-component .hotgrid-item-image {
        margin: 5px
    }
}
.hotgrid-notify-container {
    text-align: center
}
.hotgrid-notify-body {
    float: left;
    padding-bottom: 70px;
    text-align: left;
    width: 58%
}
.dir-rtl .hotgrid-notify-body {
    float: right
}
@media (max-width: 759px) {
    .hotgrid-notify-body {
        padding-bottom: 23.33333333px;
        width: 100%
    }
}
.hotgrid-notify-graphic {
    float: right;
    margin-top: -20px;
    padding-bottom: 70px;
    width: 40%
}
.dir-rtl .hotgrid-notify-graphic {
    float: left
}
@media (max-width: 759px) {
    .hotgrid-notify-graphic {
        float: none;
        margin-top: 0;
        padding-bottom: 0;
        width: 75%
    }
}
.item-states-image .default img.hotgrid-item-image-hover {
    display: none
}
.item-states-image .default img.hotgrid-item-image-visited {
    display: none
}
.item-states-image .hover>img {
    display: none
}
.item-states-image .hover img.hotgrid-item-image-hover {
    display: block
}
.item-states-image .hover img.hotgrid-item-image-visited {
    display: none
}
.item-states-image .visited>img {
    display: none
}
.item-states-image .visited img.hotgrid-item-image-hover {
    display: none !important
}
.item-states-image .visited img.hotgrid-item-image-visited {
    display: block !important
}
.article-reveal {
    margin: 0 auto;
    position: relative;
    max-width: 1400px
}
.article-reveal .article-reveal-inner {
    position: relative
}
.article-reveal .article-reveal-open-button {
    position: absolute;
    display: block;
    margin-left: -39px;
    text-decoration: none
}
.article-reveal .article-reveal-open-button .article-reveal-open-button-icon {
    width: auto;
    height: auto;
    padding: 15px;
    color: #ffffff;
    background-color: #4d4e53;
    border: 1px solid #4d4e53;
    border-radius: 50%;
    font-size: 48px
}
.article-reveal .article-reveal-open-button.visited .article-reveal-open-button-icon {
    color: #ffffff;
    background-color: #727272
}
.no-touch .article-reveal .article-reveal-open-button:hover .article-reveal-open-button-icon {
    color: #ffffff;
    background-color: #1c1c1e
}
.article-reveal .article-reveal-open-button.disabled .article-reveal-open-button-icon {
    color: #ffffff;
    background-color: #727272
}
.no-touch .article-reveal .article-reveal-open-button.disabled:hover .article-reveal-open-button-icon {
    color: #ffffff;
    background-color: #727272
}
.article-reveal .article-reveal-open-button-text {
    display: block;
    color: #4d4e53;
    text-decoration: none;
    text-align: center
}
.article-reveal .article-reveal-close-button {
    position: absolute;
    display: block;
    text-decoration: none
}
.article-reveal .article-reveal-close-button {
    display: none;
    bottom: -45px;
    right: 75px;
    z-index: 1
}
.no-touch .article-reveal .article-reveal-close-button:hover .article-reveal-close-button-icon {
    color: #ffffff;
    background-color: #1c1c1e
}
.article-reveal .article-reveal-close-button.show {
    display: block
}
.article-reveal .article-reveal-close-button-icon {
    width: auto;
    height: auto;
    float: left;
    color: #ffffff;
    background-color: #4d4e53;
    border: 1px solid #4d4e53;
    border-radius: 50%;
    font-size: 24px
}
.article-reveal .article-reveal-close-button-text {
    position: absolute;
    float: left;
    width: auto;
    padding-left: 5px;
    color: #4d4e53;
    text-decoration: none;
    text-align: center
}
.cheat-navigation-drawer-toggle-button {
    float: right
}
.dir-rtl .cheat-navigation-drawer-toggle-button {
    float: left
}
.cheat .cheat-button-container {
    overflow: hidden
}
.cheat .drawer-item {
    margin: 5px auto
}
.cheat .drawer-item.toggle {
    position: relative
}
.cheat .drawer-item.toggle input {
    position: absolute;
    top: 14px;
    left: 14px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    opacity: 0
}
.cheat .drawer-item.toggle label {
    display: block;
    margin-bottom: 5px;
    position: relative;
    z-index: 1;
    cursor: pointer
}
.cheat .drawer-item.toggle label .toggle-state {
    background: transparent none repeat scroll 0 0;
    position: absolute;
    left: 20px;
    width: 24px;
    height: 24px;
    top: 50%;
    margin-top: -12px;
    z-index: 0
}
.cheat .drawer-item.toggle label .toggle-state .checkbox {
    border: 3px solid #fff;
    width: 18px;
    height: 18px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 2px
}
.cheat .drawer-item.toggle label .toggle-state .checkbox:before {
    content: " "
}
.cheat .drawer-item.toggle label.selected .toggle-state .checkbox {
    color: #fff
}
.cheat .drawer-item.toggle label.selected .toggle-state .checkbox:before {
    content: "\e633"
}
.cheat .drawer-item.toggle .toggle-inner {
    padding: 20px 20px 20px 64px
}
.cheat .drawer-item.tip {
    margin: 10px auto;
    width: 95%
}
.touch .cheat .tip.auto-correct {
    display: none !important
}
.mcq-component .mcq-widget:not(.complete) .mcq-item.hintCorrect label {
    opacity: 1
}
.mcq-component .mcq-widget:not(.complete) .mcq-item.hintIncorrect input {
    opacity: 0
}
.mcq-component .mcq-widget:not(.complete) .mcq-item.hintIncorrect label {
    opacity: .1
}
.ie8 .mcq-component .mcq-widget .mcq-item.hintCorrect label {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"
}
.ie8 .mcq-component .mcq-widget .mcq-item.hintIncorrect input {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"
}
.ie8 .mcq-component .mcq-widget .mcq-item.hintIncorrect label {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"
}
.ie8 .mcq-component .mcq-widget.complete .mcq-item.hintCorrect label {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"
}
.ie8 .mcq-component .mcq-widget.complete .mcq-item.hintIncorrect input {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"
}
.ie8 .mcq-component .mcq-widget.complete .mcq-item.hintIncorrect label {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"
}
.gmcq-component .gmcq-widget:not(.complete) .gmcq-item.hintCorrect label {
    opacity: 1
}
.gmcq-component .gmcq-widget:not(.complete) .gmcq-item.hintIncorrect input {
    opacity: 0
}
.gmcq-component .gmcq-widget:not(.complete) .gmcq-item.hintIncorrect label {
    opacity: .1
}
.ie8 .gmcq-component .gmcq-widget .gmcq-item.hintCorrect label {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"
}
.ie8 .gmcq-component .gmcq-widget .gmcq-item.hintIncorrect input {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"
}
.ie8 .gmcq-component .gmcq-widget .gmcq-item.hintIncorrect label {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"
}
.ie8 .gmcq-component .gmcq-widget.complete .gmcq-item.hintCorrect label {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"
}
.ie8 .gmcq-component .gmcq-widget.complete .gmcq-item.hintIncorrect input {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"
}
.ie8 .gmcq-component .gmcq-widget.complete .gmcq-item.hintIncorrect label {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"
}
.slider-component .slider-widget:not(.complete) .slider-scale-number.hintCorrect {
    opacity: 1
}
.slider-component .slider-widget:not(.complete) .slider-scale-number.hintIncorrect {
    opacity: .1
}
.ie8 .slider-component .slider-widget .slider-scale-number.hintCorrect {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"
}
.ie8 .slider-component .slider-widget .slider-scale-number.hintIncorrect {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"
}
.ie8 .slider-component .slider-widget.complete .slider-scale-number.hintCorrect {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"
}
.ie8 .slider-component .slider-widget.complete .slider-scale-number.hintIncorrect {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"
}
.menu a.unlock,
.menu button.unlock {
    pointer-events: auto !important
}
.no-marking .component-inner .component-widget.disabled.submitted.complete .icon-tick,
.no-marking .component-inner .component-widget.disabled.submitted.complete .icon-cross,
.no-marking .buttons-marking-icon {
    display: none
}
.drawer .page-level-progress-item-title {
    background-color: #798e9d;
    color: #ffffff;
    text-decoration: none;
    padding: 20px;
    display: block
}
.drawer .page-level-progress-item-title.drawer-item-open.disabled {
    background-color: #727272;
    color: #ccc
}
.no-touch .drawer .page-level-progress-item-title.drawer-item-open.disabled:hover {
    background-color: #727272;
    color: #ccc
}
.drawer .page-level-progress-item-title .drawer-item-open {
    padding: 20px 20px 20px 20px;
    display: block
}
.no-touch .drawer .page-level-progress-item-title:hover {
    background-color: #607483;
    color: #fff
}
.no-touch .drawer .page-level-progress-item-title:hover .page-level-progress-indicator-complete .page-level-progress-indicator-bar {
    background-color: #fff
}
.page-level-progress-item-title-inner {
    float: left;
    width: 80%
}
.dir-rtl .page-level-progress-item-title-inner {
    float: right
}
.page-level-progress-item-optional-text {
    line-height: 1em;
    text-align: right
}
.page-level-progress-indicator {
    width: 16%;
    height: 10px;
    margin-left: 4%;
    display: inline-block;
    border-radius: 5px;
    overflow: hidden;
    background-color: #d43d3d
}
.dir-rtl .page-level-progress-indicator {
    margin-left: inherit;
    margin-right: 4%
}
.page-level-progress-indicator-complete .page-level-progress-indicator-bar {
    width: 100%;
    height: 10px;
    background-color: #fff
}
.no-touch .page-level-progress-indicator-complete .page-level-progress-indicator-bar:hover {
    background-color: #fff
}
.page-level-progress-indicator-bar {
    width: 0
}
.page-level-progress-navigation {
    padding: 26px;
    float: right;
    display: inline-block
}
@media all and (max-width: 758px) {
    .page-level-progress-navigation {
        padding: 19px
    }
}
.dir-rtl .page-level-progress-navigation {
    float: left
}
.no-touch .page-level-progress-navigation:hover .page-level-progress-navigation-completion {
    border-color: #d9d9d9
}
.no-touch .page-level-progress-navigation:hover .page-level-progress-navigation-bar {
    background-color: #343539
}
.page-level-progress-navigation-completion {
    width: 100px;
    height: 8px;
    overflow: hidden;
    border: 2px solid #ffffff;
    position: relative;
    border-radius: 5px
}
.page-level-progress-navigation-bar {
    height: 100%;
    position: absolute;
    bottom: 0;
    background-color: #4d4e53;
    left: 0
}
.dir-rtl .page-level-progress-navigation-bar {
    right: 0
}
.menu .page-level-progress-menu-item {
    padding: 30px 30px 0
}
.menu .page-level-progress-menu-item-indicator {
    margin: 0 auto;
    width: 100px;
    height: 8px;
    border: 3px solid #4d4e53;
    border-radius: 5px;
    overflow: hidden;
    position: relative
}
.menu .page-level-progress-menu-item-indicator-bar {
    width: 0;
    height: 8px;
    background-color: #4d4e53
}
.resources .resources-filter a {
    display: block;
    float: left;
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    border-bottom: 1px solid #798e9d
}
.dir-rtl .resources .resources-filter a {
    float: right
}
.resources .resources-filter a span {
    width: 100%;
    display: inline-block;
    padding: 10px 0;
    border-right: 1px solid #798e9d
}
.dir-rtl .resources .resources-filter a span {
    border-left: 1px solid #798e9d;
    border-right: inherit
}
.resources .resources-filter a.selected {
    color: #fff;
    background-color: #607483
}
.no-touch .resources .resources-filter a:hover {
    color: #fff;
    background-color: #607483
}
.resources .resources-col-4 a {
    width: 25%
}
.resources .resources-col-3 a {
    width: 33.3%
}
html.trickle {
    height: 100%
}
html.trickle body {
    overflow: hidden
}
.trickle-button-component {
    text-align: center;
    padding-bottom: 20px
}
.trickle-button-component .trickle-button-inner {
    z-index: 500
}
.trickle-button-component.trickle-full-width .trickle-button-inner {
    display: none;
    width: 100%
}
.trickle-button-component.trickle-full-width .trickle-button-inner.locking {
    position: fixed;
    bottom: 0;
    left: 0;
    display: block
}
.trickle-button-component.trickle-full-width .trickle-button-inner.locking button {
    z-index: 500;
    width: 100%
}
.trickle-button-component.trickle-round-arrow button {
    width: 80px;
    height: 80px;
    background-color: #d43d3d;
    border-radius: 50%;
    margin: 10px auto 0;
    -webkit-transition: background-color .25s ease-in;
    -moz-transition: background-color .25s ease-in;
    -o-transition: background-color .25s ease-in;
    transition: background-color .25s ease-in;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAAxCAYAAACGYsqsAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAAB3RJTUUH3wUNDDU4lh/QuwAAA2dJREFUaN7tmktrFEEURr9KYkyMMUajibowkBCieYjgf3DrUl36C8SVoIQIupEgwURRfExA3AgKghKNioqPuFJcGAU3CiIoaJQ8RCeZ46ZHmqJ7MtNT3TOR+VY9dNP3nrlVt27fKqmiiiqqqKJlKCDSvST9i+KjCXrQGOP/XSWpSVKVpF/GmPmwZ5MMhOVjo6SVktLGmJ+5eEzYTWCtpJ2SeiR1SqqV9EXSlKTXkt4bYwhyIAlYYKWkbZL6JXVLapY0K+mdpDeSXhljfocGxj8EgF5gBJgmWE+B/UBDPsPL9RAGWoCDwFSIfx+BAWBL4BD3vUjAduAxS+sHcBhYHTe0BdsGnAUW8vDxKrDRz2e/uBG4Sf6a8f7J2KAt2E3AJSBTgI8ngeqgKFcDeyhcM8BgHNABsClgsUD/0kAPYOyX1wHXiaZZ4JjLOR0wjMcKjKxfR7NR9htoAD4RXXPAcRfQAbBXioAFuA2ssI2s9pwuRvPACaA+KrQF2+olnkyRfk1mgav8tiR9L3La1Us6JGkAqPOt6VHW2Q2ShiXtCyqQCtS37IUfeFHSpINcU+dBDwK1+UJbsOslnZG01wGsJD2TlLENVgG7cac/3pJQs9TwtoqeZuAGbtURaBtYA1xzaCgNDPnXQduwBdtUYB2Qjway8/efLcvoVuCFQ4OLwCnvI8ROSnbRc8uRzWySSwHrcpaX3nWnY+gMMGyVsPaSOO44sikv8YWWlUHQk46dOB0wjVYBE47tXM4JmzD0iAV7PwbYlsjNCqALeO7YqVGgHngQ5zCO3OIBumOA/uz4fWNZ2Mh1vJVRt3kf/uWoVNGwIdA9wJMyhN3otLloQffm2RFJCrY1lk6qBd0PPPpvYUOgdwAPSwCa8WDbEumRB0A/SBB20Vtnk4HNAX0/AdiFksDmgL4XI2za61Zu8uwlu91hQRtfIpuICfaiL7KlgQ2B7gPuOoa9UDawOYqTO47m7HlfUVEesDnK0PEis/E5X7lYXrAh0F0RoTPe3lFLuexFFwLdEQF6NNuWKXvYEOj2ArqQQ0DzsoINgd4MHAG+hoC+BQ4ATXHDmrihfc31BkntknZJ6pPUIGla0kvvRMEHY0w67mMUJqlo+3YgaiStklQtaUHSnDEmU6ozIyU5dbPs5mtFFVVUMv0F2vP1DG+OuikAAAAASUVORK5CYII=');
    background-size: 60px;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    color: transparent !important;
    font-size: 0
}
.trickle-button-component.trickle-full-width.trickle-round-arrow {
    padding-bottom: 80px
}
.trickle-button-component.trickle-full-width.trickle-round-arrow .trickle-button-inner {
    display: none;
    width: 100%
}
.trickle-button-component.trickle-full-width.trickle-round-arrow .trickle-button-inner.locking {
    position: fixed;
    bottom: 0;
    left: 0;
    display: block
}
.trickle-button-component.trickle-full-width.trickle-round-arrow .trickle-button-inner.locking button {
    width: 80px;
    height: 80px;
    background-color: #d43d3d;
    border-radius: 50%;
    margin: 10px auto 0;
    -webkit-transition: background-color .25s ease-in;
    -moz-transition: background-color .25s ease-in;
    -o-transition: background-color .25s ease-in;
    transition: background-color .25s ease-in;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAAxCAYAAACGYsqsAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAAB3RJTUUH3wUNDDU4lh/QuwAAA2dJREFUaN7tmktrFEEURr9KYkyMMUajibowkBCieYjgf3DrUl36C8SVoIQIupEgwURRfExA3AgKghKNioqPuFJcGAU3CiIoaJQ8RCeZ46ZHmqJ7MtNT3TOR+VY9dNP3nrlVt27fKqmiiiqqqKJlKCDSvST9i+KjCXrQGOP/XSWpSVKVpF/GmPmwZ5MMhOVjo6SVktLGmJ+5eEzYTWCtpJ2SeiR1SqqV9EXSlKTXkt4bYwhyIAlYYKWkbZL6JXVLapY0K+mdpDeSXhljfocGxj8EgF5gBJgmWE+B/UBDPsPL9RAGWoCDwFSIfx+BAWBL4BD3vUjAduAxS+sHcBhYHTe0BdsGnAUW8vDxKrDRz2e/uBG4Sf6a8f7J2KAt2E3AJSBTgI8ngeqgKFcDeyhcM8BgHNABsClgsUD/0kAPYOyX1wHXiaZZ4JjLOR0wjMcKjKxfR7NR9htoAD4RXXPAcRfQAbBXioAFuA2ssI2s9pwuRvPACaA+KrQF2+olnkyRfk1mgav8tiR9L3La1Us6JGkAqPOt6VHW2Q2ShiXtCyqQCtS37IUfeFHSpINcU+dBDwK1+UJbsOslnZG01wGsJD2TlLENVgG7cac/3pJQs9TwtoqeZuAGbtURaBtYA1xzaCgNDPnXQduwBdtUYB2Qjway8/efLcvoVuCFQ4OLwCnvI8ROSnbRc8uRzWySSwHrcpaX3nWnY+gMMGyVsPaSOO44sikv8YWWlUHQk46dOB0wjVYBE47tXM4JmzD0iAV7PwbYlsjNCqALeO7YqVGgHngQ5zCO3OIBumOA/uz4fWNZ2Mh1vJVRt3kf/uWoVNGwIdA9wJMyhN3otLloQffm2RFJCrY1lk6qBd0PPPpvYUOgdwAPSwCa8WDbEumRB0A/SBB20Vtnk4HNAX0/AdiFksDmgL4XI2za61Zu8uwlu91hQRtfIpuICfaiL7KlgQ2B7gPuOoa9UDawOYqTO47m7HlfUVEesDnK0PEis/E5X7lYXrAh0F0RoTPe3lFLuexFFwLdEQF6NNuWKXvYEOj2ArqQQ0DzsoINgd4MHAG+hoC+BQ4ATXHDmrihfc31BkntknZJ6pPUIGla0kvvRMEHY0w67mMUJqlo+3YgaiStklQtaUHSnDEmU6ozIyU5dbPs5mtFFVVUMv0F2vP1DG+OuikAAAAASUVORK5CYII=');
    background-size: 60px;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    margin-bottom: 20px;
    color: transparent !important;
    font-size: 0
}
.force-load {
    position: fixed;
    z-index: 5000;
    bottom: 0;
    padding: 2px 4px;
    border: 1px solid #ccc;
    border-style: solid solid none none;
    background-color: #fff;
    background: linear-gradient(#fff, #dedede);
    color: #333;
    cursor: default;
    font: 12px "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif
}
[class*="inspector-container"] {
    position: relative
}
.inspector-visible {
    outline: 1px dashed
}
.inspector-visible>.inspector {
    opacity: .8
}
.inspector {
    position: absolute;
    top: 0;
    left: 50%;
    padding: 4px 6px;
    border: 1px solid #666;
    background-color: #333;
    color: #fff;
    font: 12px "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
    opacity: 0;
    text-decoration: none;
    transition: opacity .3s ease-out
}
.inspector.trac-url-disabled {
    cursor: default
}
.inspector-id {
    color: #3cf
}
@font-face {
    font-family: 'Gotham-light';
    src: url('fonts/Gotham-Light.eot') format('embedded-opentype');
    src: url('fonts/Gotham-Light.woff') format('woff'), url('fonts/Gotham-Light.ttf') format('truetype'), url('fonts/Gotham-Light.svg') format('svg');
    font-weight: normal;
    font-style: normal
}
@font-face {
    font-family: 'Gotham';
    src: url('fonts/Gotham-Medium_0.eot') format('embedded-opentype');
    src: url('fonts/Gotham-Medium_0.woff') format('woff'), url('fonts/Gotham-Medium_0.ttf') format('truetype'), url('fonts/Gotham-Medium_0.svg') format('svg');
    font-weight: normal;
    font-style: normal
}
@font-face {
    font-family: 'Gotham-bold';
    src: url('fonts/Gotham-Bold_0.eot') format('embedded-opentype');
    src: url('fonts/Gotham-Bold_0.woff') format('woff'), url('fonts/Gotham-Bold_0.ttf') format('truetype'), url('fonts/Gotham-Bold_0.svg') format('svg');
    font-weight: normal;
    font-style: normal
}
@font-face {
    font-family: 'NewBaskerville-Roman';
    src: url('fonts/NewBaskerville-Roman.eot') format('embedded-opentype');
    src: url('fonts/NewBaskerville-Roman.otf') format('opentype'), url('fonts/NewBaskerville-Roman.woff') format('woff'), url('fonts/NewBaskerville-Roman.ttf') format('truetype'), url('fonts/NewBaskerville-Roman.svg#NewBaskerville-Roman') format('svg');
    font-weight: normal;
    font-style: normal
}
@font-face {
    font-family: 'Conv_ClanOffcPro-NarrBook';
    src: url('fonts/ClanOffcPro-NarrBook.eot') format('embedded-opentype');
    src: url('fonts/ClanOffcPro-NarrBook.woff') format('woff'), url('fonts/ClanOffcPro-NarrBook.ttf') format('truetype'), url('fonts/ClanOffcPro-NarrBook.svg') format('svg');
    font-weight: normal;
    font-style: normal
}
@font-face {
    font-family: 'Conv_ClanOffcPro-NarrMedium';
    src: url('fonts/ClanOffcPro-NarrMedium.eot') format('embedded-opentype');
    src: local('☺'), url('fonts/ClanOffcPro-NarrMedium.woff') format('woff'), url('fonts/ClanOffcPro-NarrMedium.ttf') format('truetype'), url('fonts/ClanOffcPro-NarrMedium.svg') format('svg');
    font-weight: normal;
    font-style: normal
}
html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #4b4e4f;
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    font-size: 22px;
    font-weight: 300;
    line-height: 1.4
}
.theme-system-professionals body {
    color: #575656
}
.ie8 body {
    font-family: Arial, sans-serif
}
.nioxin-fonts body,
.nioxin-fonts .page-title,
.nioxin-fonts .article-title,
.nioxin-fonts .block-title,
.nioxin-fonts .component-title,
.nioxin-fonts .item-title,
.nioxin-fonts .drawer-title,
.nioxin-fonts .notify-popup-title .button,
.nioxin-fonts select,
.nioxin-fonts option {
    font-family: 'Gotham-light', sans-serif;
    font-weight: 300
}
.wp-fonts body,
.wp-fonts .page-title,
.wp-fonts .article-title,
.wp-fonts .block-title,
.wp-fonts .component-title,
.wp-fonts .item-title,
.wp-fonts .drawer-title,
.wp-fonts .notify-popup-title .button,
.wp-fonts select,
.wp-fonts option {
    font-family: 'Conv_ClanOffcPro-NarrBook', sans-serif
}
.translation-font body,
.translation-font .page-title,
.translation-font .article-title,
.translation-font .block-title,
.translation-font .component-title,
.translation-font .item-title,
.translation-font .drawer-title,
.translation-font .notify-popup-title .button,
.translation-font select,
.translation-font option {
    font-family: Arial, sans-serif
}
.allergy body,
.allergy .block.white-text .component .component-body {
    line-height: 140%
}
@media all and (759px) {
    .allergy body,
    .allergy .block.white-text .component .component-body {
        font-size: 36px
    }
}
.font-smoothing {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}
.menu-title {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 48px;
    font-weight: 300;
    line-height: 1
}
@media all and (max-width: 519px) {
    .menu-title {
        font-size: 40px
    }
}
.page-title {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 60px;
    font-weight: 300;
    line-height: 1
}
@media all and (max-width: 519px) {
    .page-title {
        font-size: 40px
    }
}
.page-subtitle {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 36px;
    line-height: 1
}
@media all and (max-width: 519px) {
    .page-subtitle {
        font-size: 18px
    }
}
.article-title {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 300;
    line-height: 1
}
.theme-nioxin .article-title {
    font-size: 60px
}
.theme-system-professionals .article-title {
    font-size: 45px
}
.theme-know-your-types .article-title {
    font-size: 60px
}
.theme-wella-professionals .article-title {
    font-size: 48px
}
.theme-wella-professionals.allergy .article-title {
    font-size: 60px
}
@media all and (max-width: 920px) {
    .article-title {
        font-size: 40px !important
    }
}
@media all and (max-width: 519px) {
    .article-title {
        font-size: 30px !important
    }
}
.block-title {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 300;
    line-height: 1
}
.theme-nioxin .block-title {
    font-size: 60px
}
.theme-system-professionals .block-title {
    font-size: 45px
}
.theme-know-your-types .block-title {
    font-size: 60px
}
.theme-wella-professionals .block-title {
    font-size: 48px
}
.theme-wella-professionals.allergy .block-title {
    font-size: 60px
}
@media all and (max-width: 920px) {
    .block-title {
        font-size: 40px !important
    }
}
@media all and (max-width: 519px) {
    .block-title {
        font-size: 30px !important
    }
}
.component-title {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 300;
    line-height: 1
}
.theme-nioxin .component-title {
    font-size: 60px
}
.theme-system-professionals .component-title {
    font-size: 45px
}
.theme-know-your-types .component-title {
    font-size: 60px
}
.theme-wella-professionals .component-title {
    font-size: 48px
}
.theme-wella-professionals.allergy .component-title {
    font-size: 60px
}
@media all and (max-width: 920px) {
    .component-title {
        font-size: 40px !important
    }
}
@media all and (max-width: 519px) {
    .component-title {
        font-size: 30px !important
    }
}
.item-title {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 36px;
    font-weight: 300;
    line-height: 1
}
@media all and (max-width: 519px) {
    .item-title {
        font-size: 24px
    }
}
.mcq-item .mcq-item-inner {
    line-height: 30.6px
}
.drawer-title {
    font-size: 24px;
    font-weight: 300;
    line-height: 1
}
@media all and (max-width: 519px) {
    .drawer-title {
        font-size: 20.4px
    }
}
.instruction-text {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 800;
    line-height: 1.4
}
.notify-popup-title {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 36px;
    line-height: 1
}
@media all and (max-width: 519px) {
    .notify-popup-title {
        font-size: 40px
    }
}
.button-text {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 18px;
    line-height: 110%;
    text-transform: uppercase
}
.theme-nioxin .button-text:not(.icon) {
    font-family: 'NewBaskerville-Roman'
}
ul {
    list-style: disc inside none
}
strong,
b {
    font-weight: 700
}
select {
    font-size: 20px;
    line-height: 140%;
    font-weight: 300
}
@-webkit-keyframes pulse {
    to {
        background-color: #fff
    }
}
@keyframes pulse {
    to {
        background-color: #fff
    }
}
@-webkit-keyframes scalePulse {
    0% {
        -webkit-transform: none
    }
    50% {
        -webkit-transform: scale(1.4, 1.4)
    }
    100% {
        -webkit-transform: none
    }
}
@keyframes scalePulse {
    0% {
        transform: none
    }
    50% {
        transform: scale(1.4, 1.4)
    }
    100% {
        transform: none
    }
}
@-webkit-keyframes bouncescrollbutton {
    0% {
        -webkit-transform: translateY(0)
    }
    100% {
        -webkit-transform: translateY(5px)
    }
}
@keyframes bouncescrollbutton {
    0% {
        transform: translateY(0)
    }
    100% {
        transform: translateY(5px)
    }
}
@-webkit-keyframes bouncebackbutton {
    0% {
        -webkit-transform: translateX(0)
    }
    100% {
        -webkit-transform: translateX(-5px)
    }
}
@keyframes bouncebackbutton {
    0% {
        transform: translateX(0)
    }
    100% {
        transform: translateX(-5px)
    }
}
@-webkit-keyframes bouncebackbuttonNartve {
    0% {
        -webkit-transform: translateX(0)
    }
    100% {
        -webkit-transform: translateX(-5px)
    }
}
@keyframes bouncebackbuttonNartve {
    0% {
        transform: translateX(0)
    }
    100% {
        transform: translateX(-5px)
    }
}
@-webkit-keyframes bouncenextbuttonNartve {
    0% {
        -webkit-transform: translateX(0)
    }
    100% {
        -webkit-transform: translateX(5px)
    }
}
@keyframes bouncenextbuttonNartve {
    0% {
        transform: translateX(0)
    }
    100% {
        transform: translateX(5px)
    }
}
@-webkit-keyframes bouncebackbuttonHotgrphc {
    0% {
        -webkit-transform: translateX(0)
    }
    100% {
        -webkit-transform: translateX(-2px)
    }
}
@keyframes bouncebackbuttonHotgrphc {
    0% {
        transform: translateX(0)
    }
    100% {
        transform: translateX(-2px)
    }
}
@-webkit-keyframes bouncenextbuttonHotgrphc {
    0% {
        -webkit-transform: translateX(0)
    }
    100% {
        -webkit-transform: translateX(2px)
    }
}
@keyframes bouncenextbuttonHotgrphc {
    0% {
        transform: translateX(0)
    }
    100% {
        transform: translateX(2px)
    }
}
.magazine .article-title-inner,
.magazine .block-title-inner,
.magazine .component-title-inner {
    padding: 5px 0 !important;
    padding-left: 20px !important;
    overflow: hidden;
    position: relative;
    margin: 0 !important;
    line-height: 140% !important
}
.magazine .article-title-inner>span,
.magazine .block-title-inner>span,
.magazine .component-title-inner>span {
    color: #ffffff;
    background-color: #4d4e53;
    padding: 12px 0 !important;
    line-height: 140% !important
}
.theme-nioxin .magazine .article-title-inner>span,
.theme-nioxin .magazine .block-title-inner>span,
.theme-nioxin .magazine .component-title-inner>span {
    background-color: #4d4e53
}
.theme-system-professionals .magazine .article-title-inner>span,
.theme-system-professionals .magazine .block-title-inner>span,
.theme-system-professionals .magazine .component-title-inner>span {
    background-color: #575656
}
.theme-know-your-types .magazine .article-title-inner>span,
.theme-know-your-types .magazine .block-title-inner>span,
.theme-know-your-types .magazine .component-title-inner>span {
    background-color: black
}
.theme-wella-professionals .magazine .article-title-inner>span,
.theme-wella-professionals .magazine .block-title-inner>span,
.theme-wella-professionals .magazine .component-title-inner>span {
    background-color: #333333
}
.magazine .article-title-inner span span,
.magazine .block-title-inner span span,
.magazine .component-title-inner span span {
    left: -10px !important;
    position: relative;
    z-index: 2
}
.magazine .article-title-inner:before,
.magazine .block-title-inner:before,
.magazine .component-title-inner:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 20px;
    background-color: #4d4e53;
    z-index: 1
}
.theme-nioxin .magazine .article-title-inner:before,
.theme-nioxin .magazine .block-title-inner:before,
.theme-nioxin .magazine .component-title-inner:before {
    background-color: #4d4e53
}
.theme-system-professionals .magazine .article-title-inner:before,
.theme-system-professionals .magazine .block-title-inner:before,
.theme-system-professionals .magazine .component-title-inner:before {
    background-color: #575656
}
.theme-know-your-types .magazine .article-title-inner:before,
.theme-know-your-types .magazine .block-title-inner:before,
.theme-know-your-types .magazine .component-title-inner:before {
    background-color: black
}
.theme-wella-professionals .magazine .article-title-inner:before,
.theme-wella-professionals .magazine .block-title-inner:before,
.theme-wella-professionals .magazine .component-title-inner:before {
    background-color: #333333
}
.theme-know-your-types .accordion-component .component-header {
    padding: 20px 0;
    background-color: rgba(255, 255, 255, 0.8)
}
.theme-know-your-types .accordion-component .component-widget {
    margin-top: 5px
}
.accordion-component .accordion-item {
    margin-bottom: 2px
}
.dir-rtl .accordion-component .accordion-item-title-icon {
    left: inherit;
    right: 20px
}
.accordion-component .accordion-item-title {
    color: #ffffff;
    background-color: #4d4e53;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 64px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 36px;
    font-weight: 300;
    line-height: 1;
    font-size: 24px
}
.theme-nioxin .accordion-component .accordion-item-title {
    background-color: #4d4e53
}
.theme-system-professionals .accordion-component .accordion-item-title {
    background-color: #a7b6bf
}
.theme-know-your-types .accordion-component .accordion-item-title {
    background-color: #4d4e53
}
.theme-wella-professionals .accordion-component .accordion-item-title {
    background-color: #b70036
}
.nioxin-fonts .accordion-component .accordion-item-title {
    font-family: 'Gotham-light', sans-serif;
    font-weight: 300
}
.wp-fonts .accordion-component .accordion-item-title {
    font-family: 'Conv_ClanOffcPro-NarrBook', sans-serif
}
.translation-font .accordion-component .accordion-item-title {
    font-family: Arial, sans-serif
}
@media all and (max-width: 519px) {
    .accordion-component .accordion-item-title {
        font-size: 24px
    }
}
.dir-rtl .accordion-component .accordion-item-title {
    padding-left: inherit;
    padding-right: 64px
}
.accordion-component .accordion-item-title.visited {
    color: #ffffff
}
.theme-nioxin .accordion-component .accordion-item-title.visited {
    background-color: #727272
}
.theme-system-professionals .accordion-component .accordion-item-title.visited {
    background-color: #869299
}
.theme-know-your-types .accordion-component .accordion-item-title.visited {
    background-color: #b0afaf
}
.theme-wella-professionals .accordion-component .accordion-item-title.visited {
    background-color: #b0afaf
}
.accordion-component .accordion-item-title.visited .accordion-item-title-icon {
    color: #ffffff
}
.accordion-component .accordion-item-title.selected {
    color: #ffffff
}
.theme-nioxin .accordion-component .accordion-item-title.selected {
    background-color: #1c1c1e
}
.theme-system-professionals .accordion-component .accordion-item-title.selected {
    background-color: #727272
}
.theme-know-your-types .accordion-component .accordion-item-title.selected {
    background-color: #111c24
}
.theme-wella-professionals .accordion-component .accordion-item-title.selected {
    background-color: #6e0020
}
.accordion-component .accordion-item-title.selected .accordion-item-title-icon {
    color: #ffffff
}
.no-touch .accordion-component .accordion-item-title:hover {
    color: #ffffff;
    -webkit-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    -moz-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    -ms-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in
}
.theme-nioxin.no-touch .accordion-component .accordion-item-title:hover {
    background-color: #1c1c1e
}
.theme-system-professionals.no-touch .accordion-component .accordion-item-title:hover {
    background-color: #869299
}
.theme-know-your-types.no-touch .accordion-component .accordion-item-title:hover {
    background-color: #2b2b2b
}
.theme-wella-professionals.no-touch .accordion-component .accordion-item-title:hover {
    background-color: #92002b
}
.no-touch .accordion-component .accordion-item-title:hover .accordion-item-title-icon {
    color: #ffffff
}
.no-touch .accordion-component .accordion-item-title.visited:hover {
    color: #ffffff;
    -webkit-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    -moz-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    -ms-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in
}
.theme-nioxin .no-touch .accordion-component .accordion-item-title.visited:hover {
    background-color: #727272
}
.theme-system-professionals .no-touch .accordion-component .accordion-item-title.visited:hover {
    background-color: #869299
}
.theme-know-your-types .no-touch .accordion-component .accordion-item-title.visited:hover {
    background-color: #b0afaf
}
.theme-wella-professionals .no-touch .accordion-component .accordion-item-title.visited:hover {
    background-color: #b0afaf
}
.no-touch .accordion-component .accordion-item-title.visited:hover .accordion-item-title-icon {
    color: #ffffff
}
.no-touch .accordion-component .accordion-item-title.selected:hover {
    -webkit-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    -moz-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    -ms-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in
}
.theme-nioxin .no-touch .accordion-component .accordion-item-title.selected:hover {
    background-color: #1c1c1e
}
.theme-system-professionals .no-touch .accordion-component .accordion-item-title.selected:hover {
    background-color: #727272
}
.theme-know-your-types .no-touch .accordion-component .accordion-item-title.selected:hover {
    background-color: #111c24
}
.theme-wella-professionals .no-touch .accordion-component .accordion-item-title.selected:hover {
    background-color: #6e0020
}
.accordion-component .accordion-item-body {
    border-top: 0
}
.theme-nioxin .accordion-component .accordion-item-body {
    background-color: #1c1c1e
}
.theme-system-professionals .accordion-component .accordion-item-body {
    background-color: #727272
}
.theme-know-your-types .accordion-component .accordion-item-body {
    background-color: #111c24
}
.theme-wella-professionals .accordion-component .accordion-item-body {
    background-color: #6e0020
}
.accordion-component .accordion-item-body-inner {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px
}
.accordion-component .accordion-item-body-inner a {
    color: #ffffff
}
@media all and (max-width: 519px) {
    .accordion-component .accordion-item-body-inner {
        padding: 10px
    }
}
@media all and (min-width: 900px) {
    .responsive-large {
        width: 900px;
        margin: 0 auto
    }
}
@media all and (max-width: 759px) and (min-width: 519px) {
    .responsive-medium {
        width: 519px;
        margin: 0 auto
    }
}
@media all and (max-width: 518px) {
    .responsive-small {
        width: 100%;
        margin: 0 auto
    }
}
@media all and (min-width: 900px) {
    .responsive-layout {
        width: 900px;
        margin: 0 auto
    }
}
@media all and (max-width: 759px) and (min-width: 519px) {
    .responsive-layout {
        width: 519px;
        margin: 0 auto
    }
}
@media all and (max-width: 518px) {
    .responsive-layout {
        width: 100%;
        margin: 0 auto
    }
}
.article-reveal {
    max-width: 1440px
}
.article-reveal .article-reveal-inner {
    height: 82px;
    padding: 20px;
    background-color: transparent
}
.article-reveal .article-reveal-open-button {
    position: absolute;
    left: 50%;
    margin-left: -39px;
    text-decoration: none
}
.article-reveal .article-reveal-open-button .article-reveal-open-button-icon {
    width: auto;
    height: auto;
    padding: 15px;
    border-radius: 50%;
    font-size: 48px;
    -webkit-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    -moz-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    -ms-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in
}
.article-reveal .article-reveal-open-button.disabled {
    cursor: default
}
.article-reveal .article-reveal-open-button.disabled .article-reveal-open-button-icon {
    color: #727272 !important;
    background-color: transparent;
    border: 3px solid #727272
}
.no-touch .article-reveal .article-reveal-open-button.disabled:hover .article-reveal-open-button-icon {
    color: #727272;
    background-color: transparent;
    border: 3px solid #727272
}
.article-reveal .article-reveal-open-button-text {
    display: none
}
.article-reveal-close-button {
    position: absolute;
    left: 50%;
    margin-left: -39px;
    margin-top: 25px;
    text-decoration: none
}
.article-reveal-close-button .article-reveal-close-button-icon {
    width: auto;
    height: auto;
    padding: 15px;
    border-radius: 50%;
    font-size: 48px
}
.article-reveal-close-button-text {
    display: none
}
.color-reveal .article-reveal-open-button .article-reveal-open-button-icon {
    border: 3px solid #ffffff;
    color: #ffffff;
    background-color: transparent
}
.color-reveal .article-reveal-open-button.visited .article-reveal-open-button-icon {
    color: #ffffff;
    background-color: transparent
}
.no-touch .color-reveal .article-reveal-open-button:hover .article-reveal-open-button-icon {
    color: #1c1c1e;
    border: 3px solid #1c1c1e;
    background-color: transparent
}
.color-reveal .article-reveal-close-button .article-reveal-close-button-icon {
    border: 3px solid #ffffff;
    color: #ffffff;
    background-color: transparent
}
.no-touch .color-reveal .article-reveal-close-button:hover .article-reveal-close-button-icon {
    color: #1c1c1e;
    border: 3px solid #1c1c1e;
    background-color: transparent
}
.color-reveal .block {
    background-color: transparent
}
.color-reveal .block .component-title,
.color-reveal .block .component-body,
.color-reveal .block .component-instruction {
    color: #ffffff !important
}
.theme-nioxin .color-reveal .block .component-title,
.theme-nioxin .color-reveal .block .component-body,
.theme-nioxin .color-reveal .block .component-instruction {
    color: #4d4e53 !important
}
.default-reveal .article-reveal-open-button .article-reveal-open-button-icon {
    border: 3px solid #4b4e4f;
    color: #4b4e4f;
    background-color: transparent
}
.default-reveal .article-reveal-open-button.visited .article-reveal-open-button-icon {
    color: #4b4e4f;
    background-color: transparent
}
.no-touch .default-reveal .article-reveal-open-button:hover .article-reveal-open-button-icon {
    color: #1c1c1e;
    border: 3px solid #1c1c1e;
    background-color: transparent
}
.default-reveal .article-reveal-close-button .article-reveal-close-button-icon {
    border: 3px solid #4b4e4f;
    color: #4b4e4f;
    background-color: transparent
}
.no-touch .default-reveal .article-reveal-close-button:hover .article-reveal-close-button-icon {
    color: #1c1c1e;
    border: 3px solid #1c1c1e;
    background-color: transparent
}
.has-reveal {
    padding-bottom: 150px !important;
    position: relative
}
.article {
    background-color: #ffffff
}
.article.nth-child-1 {
    padding-top: 0
}
.article .article-inner {
    padding-top: 0;
    padding-bottom: 0
}
@media all and (max-width: 759px) {
    .article .article-inner {
        padding-top: 0;
        padding-bottom: 0
    }
}
@media all and (max-width: 519px) {
    .article .article-inner {
        padding-top: 0;
        padding-bottom: 0
    }
}
.article .article-header {
    max-width: 900px;
    margin: auto;
    padding-left: 0;
    padding-right: 0
}
@media all and (max-width: 920px) {
    .article .article-header {
        max-width: 759px;
        padding-left: 20px;
        padding-right: 20px
    }
}
@media all and (max-width: 759px) {
    .article .article-header {
        max-width: 519px;
        padding-left: 20px;
        padding-right: 20px
    }
}
@media all and (max-width: 519px) {
    .article .article-header {
        padding-left: 20px;
        padding-right: 20px;
        max-width: 100%
    }
}
@media all and (max-width: 321px) {
    .article .article-header {
        padding-left: 10px;
        padding-right: 10px;
        max-width: 100%
    }
}
.article .article-title {
    margin-bottom: 20px;
    color: #4d4e53;
    text-transform: uppercase;
    text-align: left
}
.theme-nioxin .article .article-title {
    color: #4d4e53
}
.theme-system-professionals .article .article-title {
    color: #575656
}
.theme-know-your-types .article .article-title {
    color: black
}
.theme-wella-professionals .article .article-title {
    color: #333333
}
.dir-rtl .article .article-title {
    text-align: right
}
@media all and (max-width: 759px) {
    .article .article-title {
        text-align: center
    }
}
.article .article-title-inner {
    margin-bottom: 20px
}
.article .article-body {
    margin-bottom: 30px;
    text-align: left
}
.dir-rtl .article .article-body {
    text-align: right
}
@media all and (max-width: 759px) {
    .article .article-body {
        text-align: center
    }
}
.article .article-instruction {
    margin-bottom: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 800;
    line-height: 1.4;
    text-align: left
}
.dir-rtl .article .article-instruction {
    text-align: right
}
@media all and (max-width: 759px) {
    .article .article-instruction {
        text-align: center
    }
}
.assessmentResults-component .assessmentResults-title,
.assessmentResults-component .assessmentResults-body {
    text-align: center
}
.theme-nioxin .assessmentResults-component .assessmentResults-title,
.theme-nioxin .assessmentResults-component .assessmentResults-body {
    color: #ffffff
}
.theme-system-professionals .assessmentResults-component .assessmentResults-title,
.theme-system-professionals .assessmentResults-component .assessmentResults-body {
    color: #575656
}
.theme-know-your-types .assessmentResults-component .assessmentResults-title,
.theme-know-your-types .assessmentResults-component .assessmentResults-body {
    color: #ffffff
}
.theme-wella-professionals .assessmentResults-component .assessmentResults-title,
.theme-wella-professionals .assessmentResults-component .assessmentResults-body {
    color: #ffffff
}
.theme-nioxin .assessmentResults-component .results-retry-inner {
    color: #ffffff
}
.theme-system-professionals .assessmentResults-component .results-retry-inner {
    color: #575656
}
.theme-know-your-types .assessmentResults-component .results-retry-inner {
    color: #ffffff
}
.theme-wella-professionals .assessmentResults-component .results-retry-inner {
    color: #ffffff
}
.assessmentResults-component .results-retry-button {
    display: none !important
}
.block {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #ffffff
}
.ie .block.media-block {
    background-image: none !important
}
.block.allergy-gradient-bg-color {
    background-image: url('../../course/en/images/block-gradient.png');
    background-size: inherit;
    background-repeat: repeat-y;
    background-position: center
}
.block.allergy-gradient-bg-color .block-inner {
    max-width: 750px
}
.block .block-inner {
    max-width: 900px;
    margin: auto;
    padding-left: 0;
    padding-right: 0;
    padding-top: 60px;
    padding-bottom: 60px
}
@media all and (max-width: 920px) {
    .block .block-inner {
        max-width: 759px;
        padding-left: 20px;
        padding-right: 20px
    }
}
@media all and (max-width: 759px) {
    .block .block-inner {
        max-width: 519px;
        padding-left: 20px;
        padding-right: 20px
    }
}
@media all and (max-width: 519px) {
    .block .block-inner {
        padding-left: 20px;
        padding-right: 20px;
        max-width: 100%
    }
}
@media all and (max-width: 321px) {
    .block .block-inner {
        padding-left: 10px;
        padding-right: 10px;
        max-width: 100%
    }
}
@media all and (max-width: 759px) {
    .block .block-inner {
        padding-top: 30px;
        padding-bottom: 30px
    }
}
@media all and (max-width: 519px) {
    .block .block-inner {
        padding-top: 20px;
        padding-bottom: 20px
    }
}
.block.block-divider .block-inner {
    border-bottom: 3px solid
}
.theme-nioxin .block.block-divider .block-inner {
    border-color: #4d4e53
}
.theme-system-professionals .block.block-divider .block-inner {
    border-color: #a7b6bf
}
.theme-know-your-types .block.block-divider .block-inner {
    border-color: #4d4e53
}
.theme-wella-professionals.blondor .block.block-divider .block-inner {
    border-color: #7c95a9
}
.theme-wella-professionals.magma .block.block-divider .block-inner {
    border-color: #7c95a9
}
.theme-wella-professionals.elements .block.block-divider .block-inner {
    border-color: #b70036
}
.theme-wella-professionals.eimi .block.block-divider .block-inner {
    border-color: #6e0020
}
.theme-wella-professionals.illumina .block.block-divider .block-inner {
    border-color: #6e0120
}
.theme-wella-professionals.koleston-perfect .block.block-divider .block-inner {
    border-color: #b70036
}
.theme-wella-professionals.color-touch .block.block-divider .block-inner {
    border-color: #b70036
}
.theme-wella-professionals.care-and-color-fresh .block.block-divider .block-inner {
    border-color: #b70036
}
.block .block-title {
    margin-bottom: 20px;
    color: #4d4e53;
    text-transform: uppercase;
    text-align: left
}
.theme-nioxin .block .block-title {
    color: #4d4e53
}
.theme-system-professionals .block .block-title {
    color: #575656
}
.theme-know-your-types .block .block-title {
    color: black
}
.theme-wella-professionals .block .block-title {
    color: #333333
}
.dir-rtl .block .block-title {
    text-align: right
}
@media all and (max-width: 759px) {
    .block .block-title {
        text-align: center
    }
}
.block .block-body {
    margin-bottom: 30px;
    text-align: left
}
.dir-rtl .block .block-body {
    text-align: right
}
@media all and (max-width: 759px) {
    .block .block-body {
        text-align: center
    }
}
.block .block-instruction {
    margin-bottom: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 800;
    line-height: 1.4;
    text-align: left
}
.dir-rtl .block .block-instruction {
    text-align: right
}
@media all and (max-width: 759px) {
    .block .block-instruction {
        text-align: center
    }
}
.block.white-text .component .component-title,
.block.white-text .component .component-body,
.block.white-text .component .component-instruction-inner,
.block.white-text .component a {
    color: #ffffff
}
.block.white-text .component .component-body {
    font-size: 24px;
    line-height: 100%
}
@media all and (max-width: 519px) {
    .block.white-text .component .component-body {
        font-size: 24px
    }
}
.block.large-text-block {
    padding-top: 50px;
    padding-bottom: 50px
}
.block.large-text-block .component .component-title {
    font-size: 60px
}
.block.large-text-block .component-body-inner,
.block.large-text-block .component-instruction-inner {
    font-size: 30px;
    line-height: 40px
}
@media all and (max-width: 519px) {
    .block.large-text-block .component-body-inner,
    .block.large-text-block .component-instruction-inner {
        font-size: 24px
    }
}
@media all and (max-width: 519px) {
    .block.client-type-intro-block {
        background-position: bottom center;
        background-size: cover
    }
}
.block .block-mobile-bg {
    display: none
}
.theme-system-professionals .article.nth-child-1 .block.nth-child-1 .component .component-title,
.theme-wella-professionals:not(.allergy) .article.nth-child-1 .block.nth-child-1 .component .component-title {
    font-size: 60px
}
.theme-system-professionals .article.nth-child-1 .block.nth-child-1 .component .component-body,
.theme-wella-professionals:not(.allergy) .article.nth-child-1 .block.nth-child-1 .component .component-body {
    font-size: 24px;
    line-height: 120%
}
@media all and (max-width: 519px) {
    .theme-system-professionals .article.nth-child-1 .block.nth-child-1 .component .component-body,
    .theme-wella-professionals:not(.allergy) .article.nth-child-1 .block.nth-child-1 .component .component-body {
        font-size: 24px
    }
}
.theme-know-your-types .b-10 {
    padding-top: 50px;
    padding-bottom: 50px;
    background-image: url('../../course/en/images/background-graphic-1.jpg')
}
.theme-know-your-types .b-10 .component .component-title {
    font-size: 60px
}
.theme-know-your-types .b-10 .component-body-inner,
.theme-know-your-types .b-10 .component-instruction-inner {
    font-size: 30px;
    line-height: 40px
}
@media all and (max-width: 519px) {
    .theme-know-your-types .b-10 .component-body-inner,
    .theme-know-your-types .b-10 .component-instruction-inner {
        font-size: 24px
    }
}
.theme-know-your-types .b-10 .component .component-title,
.theme-know-your-types .b-10 .component .component-body,
.theme-know-your-types .b-10 .component .component-instruction-inner,
.theme-know-your-types .b-10 .component a {
    color: #ffffff
}
.theme-know-your-types .b-10 .component .component-body {
    font-size: 24px;
    line-height: 100%
}
@media all and (max-width: 519px) {
    .theme-know-your-types .b-10 .component .component-body {
        font-size: 24px
    }
}
@media all and (min-width: 759px) {
    .theme-know-your-types .b-10 {
        min-height: 695px
    }
}
@media all and (max-width: 519px) {
    .theme-know-your-types .b-10 {
        background-image: none;
        background-color: #d0d8da;
        padding-bottom: 0
    }
    .theme-know-your-types .b-10 .block-inner {
        padding: 0
    }
    .theme-know-your-types .b-10 .block-inner:before {
        content: "";
        display: block;
        background-repeat: no-repeat;
        background-position: top center;
        background-size: cover;
        background-image: url('../../course/en/images/background-graphic-mobile-1.jpg');
        height: 400px
    }
    .theme-know-your-types .b-10 .component.component-right,
    .theme-know-your-types .b-10 .component.component-left {
        padding: 0
    }
    .theme-know-your-types .b-10 .component .component-inner {
        padding: 20px;
        background-color: rgba(0, 0, 0, 0.2)
    }
}
.theme-know-your-types .b-30 {
    padding-top: 50px;
    padding-bottom: 50px;
    background-image: url('../../course/en/images/background-graphic-4.jpg')
}
.theme-know-your-types .b-30 .component .component-title {
    font-size: 60px
}
.theme-know-your-types .b-30 .component-body-inner,
.theme-know-your-types .b-30 .component-instruction-inner {
    font-size: 30px;
    line-height: 40px
}
@media all and (max-width: 519px) {
    .theme-know-your-types .b-30 .component-body-inner,
    .theme-know-your-types .b-30 .component-instruction-inner {
        font-size: 24px
    }
}
.theme-know-your-types .b-30 .component .component-title,
.theme-know-your-types .b-30 .component .component-body,
.theme-know-your-types .b-30 .component .component-instruction-inner,
.theme-know-your-types .b-30 .component a {
    color: #ffffff
}
.theme-know-your-types .b-30 .component .component-body {
    font-size: 24px;
    line-height: 100%
}
@media all and (max-width: 519px) {
    .theme-know-your-types .b-30 .component .component-body {
        font-size: 24px
    }
}
@media all and (min-width: 759px) {
    .theme-know-your-types .b-30 {
        min-height: 695px
    }
}
@media all and (max-width: 519px) {
    .theme-know-your-types .b-30 {
        background-image: none;
        background-color: #ea5398;
        padding-bottom: 0
    }
    .theme-know-your-types .b-30 .block-inner {
        padding: 0
    }
    .theme-know-your-types .b-30 .block-inner:before {
        content: "";
        display: block;
        background-repeat: no-repeat;
        background-position: top center;
        background-size: cover;
        background-image: url('../../course/en/images/background-graphic-mobile-4.jpg');
        height: 400px
    }
    .theme-know-your-types .b-30 .component.component-right,
    .theme-know-your-types .b-30 .component.component-left {
        padding: 0
    }
    .theme-know-your-types .b-30 .component .component-inner {
        padding: 20px;
        background-color: rgba(0, 0, 0, 0.2)
    }
}
.theme-know-your-types .b-50 {
    padding-top: 50px;
    padding-bottom: 50px;
    background-image: url('../../course/en/images/background-graphic-7.jpg')
}
.theme-know-your-types .b-50 .component .component-title {
    font-size: 60px
}
.theme-know-your-types .b-50 .component-body-inner,
.theme-know-your-types .b-50 .component-instruction-inner {
    font-size: 30px;
    line-height: 40px
}
@media all and (max-width: 519px) {
    .theme-know-your-types .b-50 .component-body-inner,
    .theme-know-your-types .b-50 .component-instruction-inner {
        font-size: 24px
    }
}
.theme-know-your-types .b-50 .component .component-title,
.theme-know-your-types .b-50 .component .component-body,
.theme-know-your-types .b-50 .component .component-instruction-inner,
.theme-know-your-types .b-50 .component a {
    color: #ffffff
}
.theme-know-your-types .b-50 .component .component-body {
    font-size: 24px;
    line-height: 100%
}
@media all and (max-width: 519px) {
    .theme-know-your-types .b-50 .component .component-body {
        font-size: 24px
    }
}
@media all and (min-width: 759px) {
    .theme-know-your-types .b-50 {
        min-height: 695px
    }
}
@media all and (max-width: 519px) {
    .theme-know-your-types .b-50 {
        background-image: none;
        background-color: #e0d3dc;
        padding-bottom: 0
    }
    .theme-know-your-types .b-50 .block-inner {
        padding: 0
    }
    .theme-know-your-types .b-50 .block-inner:before {
        content: "";
        display: block;
        background-repeat: no-repeat;
        background-position: top center;
        background-size: cover;
        background-image: url('../../course/en/images/background-graphic-mobile-7.jpg');
        height: 400px
    }
    .theme-know-your-types .b-50 .component.component-right,
    .theme-know-your-types .b-50 .component.component-left {
        padding: 0
    }
    .theme-know-your-types .b-50 .component .component-inner {
        padding: 20px;
        background-color: rgba(0, 0, 0, 0.2)
    }
}
.theme-know-your-types .b-70 {
    padding-top: 50px;
    padding-bottom: 50px;
    background-image: url('../../course/en/images/background-graphic-010.jpg')
}
.theme-know-your-types .b-70 .component .component-title {
    font-size: 60px
}
.theme-know-your-types .b-70 .component-body-inner,
.theme-know-your-types .b-70 .component-instruction-inner {
    font-size: 30px;
    line-height: 40px
}
@media all and (max-width: 519px) {
    .theme-know-your-types .b-70 .component-body-inner,
    .theme-know-your-types .b-70 .component-instruction-inner {
        font-size: 24px
    }
}
.theme-know-your-types .b-70 .component .component-title,
.theme-know-your-types .b-70 .component .component-body,
.theme-know-your-types .b-70 .component .component-instruction-inner,
.theme-know-your-types .b-70 .component a {
    color: #ffffff
}
.theme-know-your-types .b-70 .component .component-body {
    font-size: 24px;
    line-height: 100%
}
@media all and (max-width: 519px) {
    .theme-know-your-types .b-70 .component .component-body {
        font-size: 24px
    }
}
@media all and (min-width: 759px) {
    .theme-know-your-types .b-70 {
        min-height: 695px
    }
}
@media all and (max-width: 519px) {
    .theme-know-your-types .b-70 {
        background-image: none;
        background-color: #ee8162;
        padding-bottom: 0
    }
    .theme-know-your-types .b-70 .block-inner {
        padding: 0
    }
    .theme-know-your-types .b-70 .block-inner:before {
        content: "";
        display: block;
        background-repeat: no-repeat;
        background-position: top center;
        background-size: cover;
        background-image: url('../../course/en/images/background-graphic-mobile-010.jpg');
        height: 400px
    }
    .theme-know-your-types .b-70 .component.component-right,
    .theme-know-your-types .b-70 .component.component-left {
        padding: 0
    }
    .theme-know-your-types .b-70 .component .component-inner {
        padding: 20px;
        background-color: rgba(0, 0, 0, 0.2)
    }
}
.theme-know-your-types .b-90 {
    padding-top: 50px;
    padding-bottom: 50px;
    background-image: url('../../course/en/images/background-graphic-013.jpg')
}
.theme-know-your-types .b-90 .component .component-title {
    font-size: 60px
}
.theme-know-your-types .b-90 .component-body-inner,
.theme-know-your-types .b-90 .component-instruction-inner {
    font-size: 30px;
    line-height: 40px
}
@media all and (max-width: 519px) {
    .theme-know-your-types .b-90 .component-body-inner,
    .theme-know-your-types .b-90 .component-instruction-inner {
        font-size: 24px
    }
}
.theme-know-your-types .b-90 .component .component-title,
.theme-know-your-types .b-90 .component .component-body,
.theme-know-your-types .b-90 .component .component-instruction-inner,
.theme-know-your-types .b-90 .component a {
    color: #ffffff
}
.theme-know-your-types .b-90 .component .component-body {
    font-size: 24px;
    line-height: 100%
}
@media all and (max-width: 519px) {
    .theme-know-your-types .b-90 .component .component-body {
        font-size: 24px
    }
}
@media all and (min-width: 759px) {
    .theme-know-your-types .b-90 {
        min-height: 695px
    }
}
@media all and (max-width: 519px) {
    .theme-know-your-types .b-90 {
        background-image: none;
        background-color: #8dbad9;
        padding-bottom: 0
    }
    .theme-know-your-types .b-90 .block-inner {
        padding: 0
    }
    .theme-know-your-types .b-90 .block-inner:before {
        content: "";
        display: block;
        background-repeat: no-repeat;
        background-position: top center;
        background-size: cover;
        background-image: url('../../course/en/images/background-graphic-mobile-013.jpg');
        height: 400px
    }
    .theme-know-your-types .b-90 .component.component-right,
    .theme-know-your-types .b-90 .component.component-left {
        padding: 0
    }
    .theme-know-your-types .b-90 .component .component-inner {
        padding: 20px;
        background-color: rgba(0, 0, 0, 0.2)
    }
}
.theme-know-your-types .b-20 {
    background-image: url('../../course/en/images/background-graphic-3.jpg');
    min-height: 695px
}
@media all and (max-width: 900px) {
    .theme-know-your-types .b-20 {
        background-color: #d0d8da;
        background-image: none;
        min-height: 0
    }
}
.theme-know-your-types .b-40 {
    background-image: url('../../course/en/images/background-graphic-6.jpg');
    min-height: 695px
}
@media all and (max-width: 900px) {
    .theme-know-your-types .b-40 {
        background-color: #e95299;
        background-image: none;
        min-height: 0
    }
}
.theme-know-your-types .b-60 {
    background-image: url('../../course/en/images/background-graphic-9.jpg');
    min-height: 695px
}
@media all and (max-width: 900px) {
    .theme-know-your-types .b-60 {
        background-color: #e0d3dc;
        background-image: none;
        min-height: 0
    }
}
.theme-know-your-types .b-80 {
    background-image: url('../../course/en/images/background-graphic-012.jpg');
    min-height: 695px
}
@media all and (max-width: 900px) {
    .theme-know-your-types .b-80 {
        background-color: #ef8162;
        background-image: none;
        min-height: 0
    }
}
.theme-know-your-types .b-100 {
    background-image: url('../../course/en/images/background-graphic-015.jpg');
    min-height: 695px
}
@media all and (max-width: 900px) {
    .theme-know-your-types .b-100 {
        background-color: #8dbad9;
        background-image: none;
        min-height: 0
    }
}
.theme-know-your-types .b-25 {
    background-image: url('../../course/en/images/fullwidth-graphic-1.jpg');
    min-height: 695px
}
@media all and (max-width: 900px) {
    .theme-know-your-types .b-25 {
        background-image: url('../../course/en/images/fullwidth-graphic-mobile-1.jpg');
        min-height: 1950px
    }
}
@media all and (max-width: 759px) {
    .theme-know-your-types .b-25 {
        min-height: 1660px
    }
}
@media all and (max-width: 519px) {
    .theme-know-your-types .b-25 {
        min-height: 1000px
    }
}
.theme-know-your-types .b-45 {
    background-image: url('../../course/en/images/fullwidth-graphic-2.jpg');
    min-height: 695px
}
@media all and (max-width: 900px) {
    .theme-know-your-types .b-45 {
        background-image: url('../../course/en/images/fullwidth-graphic-mobile-2.jpg');
        min-height: 1950px
    }
}
@media all and (max-width: 759px) {
    .theme-know-your-types .b-45 {
        min-height: 1660px
    }
}
@media all and (max-width: 519px) {
    .theme-know-your-types .b-45 {
        min-height: 1000px
    }
}
.theme-know-your-types .b-65 {
    background-image: url('../../course/en/images/fullwidth-graphic-3.jpg');
    min-height: 695px
}
@media all and (max-width: 900px) {
    .theme-know-your-types .b-65 {
        background-image: url('../../course/en/images/fullwidth-graphic-mobile-3.jpg');
        min-height: 1950px
    }
}
@media all and (max-width: 759px) {
    .theme-know-your-types .b-65 {
        min-height: 1660px
    }
}
@media all and (max-width: 519px) {
    .theme-know-your-types .b-65 {
        min-height: 1000px
    }
}
.theme-know-your-types .b-85 {
    background-image: url('../../course/en/images/fullwidth-graphic-4.jpg');
    min-height: 695px
}
@media all and (max-width: 900px) {
    .theme-know-your-types .b-85 {
        background-image: url('../../course/en/images/fullwidth-graphic-mobile-4.jpg');
        min-height: 1950px
    }
}
@media all and (max-width: 759px) {
    .theme-know-your-types .b-85 {
        min-height: 1660px
    }
}
@media all and (max-width: 519px) {
    .theme-know-your-types .b-85 {
        min-height: 1000px
    }
}
.theme-know-your-types .b-105 {
    background-image: url('../../course/en/images/fullwidth-graphic-5.jpg');
    min-height: 695px
}
@media all and (max-width: 900px) {
    .theme-know-your-types .b-105 {
        background-image: url('../../course/en/images/fullwidth-graphic-mobile-5.jpg');
        min-height: 1950px
    }
}
@media all and (max-width: 759px) {
    .theme-know-your-types .b-105 {
        min-height: 1660px
    }
}
@media all and (max-width: 519px) {
    .theme-know-your-types .b-105 {
        min-height: 1000px
    }
}
.theme-wella-professionals.allergy .b-10 {
    background-image: url('../../course/en/images/block-1.jpg');
    min-height: 700px
}
@media all and (max-width: 920px) {
    .theme-wella-professionals.allergy .b-10 {
        background-image: url('../../course/en/images/block-1.jpg');
        min-height: 600px
    }
}
@media all and (max-width: 759px) {
    .theme-wella-professionals.allergy .b-10 {
        min-height: 0;
        background-image: none
    }
    .theme-wella-professionals.allergy .b-10 .block-mobile-bg {
        display: block;
        height: 600px;
        background-image: url('../../course/en/images/mobile-block-1.jpg');
        background-size: cover;
        background-position: bottom
    }
}
@media all and (max-width: 460px) {
    .theme-wella-professionals.allergy .b-10 .block-mobile-bg {
        height: 400px
    }
}
@media all and (max-width: 340px) {
    .theme-wella-professionals.allergy .b-10 .block-mobile-bg {
        height: 360px
    }
}
.theme-wella-professionals.allergy .b-15 {
    background-image: url('../../course/en/images/block-2.jpg');
    min-height: 700px
}
@media all and (max-width: 920px) {
    .theme-wella-professionals.allergy .b-15 {
        background-image: url('../../course/en/images/block-2.jpg');
        min-height: 600px
    }
}
@media all and (max-width: 759px) {
    .theme-wella-professionals.allergy .b-15 {
        min-height: 0;
        background-image: none
    }
    .theme-wella-professionals.allergy .b-15 .block-mobile-bg {
        display: block;
        height: 600px;
        background-image: url('../../course/en/images/mobile-block-2.jpg');
        background-size: cover;
        background-position: bottom
    }
}
@media all and (max-width: 460px) {
    .theme-wella-professionals.allergy .b-15 .block-mobile-bg {
        height: 400px
    }
}
@media all and (max-width: 340px) {
    .theme-wella-professionals.allergy .b-15 .block-mobile-bg {
        height: 360px
    }
}
.theme-wella-professionals.allergy .b-20 {
    background-image: url('../../course/en/images/block-3.jpg');
    min-height: 700px
}
@media all and (max-width: 920px) {
    .theme-wella-professionals.allergy .b-20 {
        background-image: url('../../course/en/images/block-3.jpg');
        min-height: 600px
    }
}
@media all and (max-width: 759px) {
    .theme-wella-professionals.allergy .b-20 {
        min-height: 0;
        background-image: none
    }
    .theme-wella-professionals.allergy .b-20 .block-mobile-bg {
        display: block;
        height: 600px;
        background-image: url('../../course/en/images/mobile-block-3.jpg');
        background-size: cover;
        background-position: bottom
    }
}
@media all and (max-width: 460px) {
    .theme-wella-professionals.allergy .b-20 .block-mobile-bg {
        height: 400px
    }
}
@media all and (max-width: 340px) {
    .theme-wella-professionals.allergy .b-20 .block-mobile-bg {
        height: 360px
    }
}
.theme-wella-professionals.allergy .b-25 {
    background-image: url('../../course/en/images/block-4.jpg');
    min-height: 700px
}
@media all and (max-width: 920px) {
    .theme-wella-professionals.allergy .b-25 {
        background-image: url('../../course/en/images/block-4.jpg');
        min-height: 600px
    }
}
@media all and (max-width: 759px) {
    .theme-wella-professionals.allergy .b-25 {
        min-height: 0;
        background-image: none
    }
    .theme-wella-professionals.allergy .b-25 .block-mobile-bg {
        display: block;
        height: 600px;
        background-image: url('../../course/en/images/mobile-block-4.jpg');
        background-size: cover;
        background-position: bottom
    }
}
@media all and (max-width: 460px) {
    .theme-wella-professionals.allergy .b-25 .block-mobile-bg {
        height: 400px
    }
}
@media all and (max-width: 340px) {
    .theme-wella-professionals.allergy .b-25 .block-mobile-bg {
        height: 360px
    }
}
.wpkpd05 .media-component .component-header {
    background-color: transparent
}
.extra-padding {
    padding-top: 100px
}
.theme-wp-il10 .wp-il10-moodboard-01 {
    background-image: url('../../course/en/images/c-10.jpg');
    min-height: 680px
}
@media all and (max-width: 900px) {
    .theme-wp-il10 .wp-il10-moodboard-01 {
        background-image: url('../../course/en/images/c-10-mobile.jpg');
        min-height: 950px
    }
}
@media all and (max-width: 759px) {
    .theme-wp-il10 .wp-il10-moodboard-01 {
        min-height: 950px
    }
}
@media all and (max-width: 519px) {
    .theme-wp-il10 .wp-il10-moodboard-01 {
        min-height: 800px
    }
}
.theme-wp-il10 .wp-il10-moodboard-02 {
    background-image: url('../../course/en/images/c-20.jpg');
    min-height: 680px
}
@media all and (max-width: 900px) {
    .theme-wp-il10 .wp-il10-moodboard-02 {
        background-image: url('../../course/en/images/c-20-mobile.jpg');
        min-height: 950px
    }
}
@media all and (max-width: 759px) {
    .theme-wp-il10 .wp-il10-moodboard-02 {
        min-height: 950px
    }
}
@media all and (max-width: 519px) {
    .theme-wp-il10 .wp-il10-moodboard-02 {
        min-height: 800px
    }
}
.theme-wp-il10 .wp-il10-moodboard-03 {
    background-image: url('../../course/en/images/c-30.jpg');
    min-height: 680px
}
@media all and (max-width: 900px) {
    .theme-wp-il10 .wp-il10-moodboard-03 {
        background-image: url('../../course/en/images/c-30-mobile.jpg');
        min-height: 950px
    }
}
@media all and (max-width: 759px) {
    .theme-wp-il10 .wp-il10-moodboard-03 {
        min-height: 950px
    }
}
@media all and (max-width: 519px) {
    .theme-wp-il10 .wp-il10-moodboard-03 {
        min-height: 800px
    }
}
.close-container {
    margin-top: 30px;
    text-align: center
}
.menu {
    background: #ffffff
}
.menu .menu-container {
    width: 100%
}
.menu .menu-container-inner {
    padding: 0
}
.menu .menu-header {
    margin-bottom: -30px;
    background-color: #546e7a
}
.menu .menu-header-inner {
    max-width: 900px;
    margin: auto;
    padding: 100px 0 100px;
    text-align: center
}
@media all and (max-width: 920px) {
    .menu .menu-header-inner {
        padding: 50px 20px 100px
    }
}
@media all and (max-width: 539px) {
    .menu .menu-header-inner {
        padding: 20px 10px 20px
    }
}
.menu .menu-title {
    margin: 20px 0;
    color: #fff
}
.menu .menu-body {
    margin: 30px 0;
    color: #fff
}
.menu .menu-item {
    margin: 0 auto 30px
}
.menu .menu-item.nth-child-even .menu-item-inner {
    margin-left: 2%
}
.dir-rtl .menu .menu-item.nth-child-even .menu-item-inner {
    margin-right: 2%
}
.menu .menu-item.nth-child-odd .menu-item-inner {
    margin-right: 2%
}
.dir-rtl .menu .menu-item.nth-child-odd .menu-item-inner {
    margin-left: 2%
}
.menu .menu-item-inner {
    position: relative;
    max-width: 410px;
    margin: auto;
    padding: 20px 20px 30px 20px;
    background-color: #4d4e53;
    color: #ffffff
}
.theme-nioxin .menu .menu-item-inner {
    background-color: #4d4e53
}
.theme-system-professionals .menu .menu-item-inner {
    background-color: #cad3d9
}
.theme-know-your-types .menu .menu-item-inner {
    background-color: pink
}
.theme-wella-professionals .menu .menu-item-inner {
    background-color: #b70036
}
.menu .menu-item-title {
    margin: 20px 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 36px;
    font-weight: 300;
    line-height: 1
}
.nioxin-fonts .menu .menu-item-title {
    font-family: 'Gotham-light', sans-serif;
    font-weight: 300
}
.wp-fonts .menu .menu-item-title {
    font-family: 'Conv_ClanOffcPro-NarrBook', sans-serif
}
.translation-font .menu .menu-item-title {
    font-family: Arial, sans-serif
}
@media all and (max-width: 519px) {
    .menu .menu-item-title {
        font-size: 24px
    }
}
.menu .menu-item-body {
    margin-bottom: 30px;
    padding: 0
}
.menu .menu-item-instruction {
    margin-bottom: 14px;
    padding: 0
}
.menu .page-level-progress-menu-item {
    width: 60px;
    height: 6px;
    float: right;
    padding: 0
}
.menu .page-level-progress-menu-item-indicator {
    width: 60px;
    height: 6px;
    background-color: #1c1c1e;
    border: 2px solid #1c1c1e;
    border-radius: 25px
}
.theme-nioxin .menu .page-level-progress-menu-item-indicator {
    background-color: #1c1c1e
}
.theme-system-professionals .menu .page-level-progress-menu-item-indicator {
    background-color: #8fa2ae
}
.theme-know-your-types .menu .page-level-progress-menu-item-indicator {
    background-color: #ff5a77
}
.theme-wella-professionals .menu .page-level-progress-menu-item-indicator {
    background-color: #510018
}
.theme-nioxin .menu .page-level-progress-menu-item-indicator {
    border: 2px solid #1c1c1e
}
.theme-system-professionals .menu .page-level-progress-menu-item-indicator {
    border: 2px solid #8fa2ae
}
.theme-know-your-types .menu .page-level-progress-menu-item-indicator {
    border: 2px solid #ff5a77
}
.theme-wella-professionals .menu .page-level-progress-menu-item-indicator {
    border: 2px solid #510018
}
.menu .page-level-progress-menu-item-indicator-bar {
    height: 6px;
    background-color: #ffffff;
    border-radius: 25px
}
.menu .menu-item-duration {
    margin-top: -10px
}
.menu .menu-item-button {
    padding: 0
}
.menu .menu-item-button a {
    padding: 14px 40px;
    background-color: #d43d3d;
    color: #ffffff
}
.no-touch .menu .menu-item-button a:hover {
    background-color: #380d0d;
    color: #ffffff
}
.menu .menu-item-button a.visited {
    background-color: #d43d3d;
    color: #ffffff
}
@media all and (max-width: 760px) {
    .menu .menu-inner {
        padding: 0
    }
    .menu .menu-title-inner {
        padding: 0
    }
    .menu .menu-body-inner {
        padding: 0
    }
    .menu .menu-item.nth-child-even .menu-item-inner,
    .menu .menu-item.nth-child-odd .menu-item-inner {
        margin: 0 auto
    }
}
.button,
button {
    background-color: #b8d1e3;
    color: #ffffff;
    padding: 0 25px;
    text-decoration: none;
    text-align: center;
    display: inline-block;
    border: 0 solid #b8d1e3;
    -webkit-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    -moz-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    -ms-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 18px;
    line-height: 110%;
    text-transform: uppercase;
    min-height: 55px
}
.theme-nioxin .button,
.theme-nioxin button {
    background-color: #4d4e53
}
.theme-system-professionals .button,
.theme-system-professionals button {
    background-color: #a7b6bf
}
.theme-know-your-types .button,
.theme-know-your-types button {
    background-color: #9933cc
}
.theme-wella-professionals .button,
.theme-wella-professionals button {
    background-color: #b70036
}
.theme-nioxin .button:not(.icon),
.theme-nioxin button:not(.icon) {
    font-family: 'NewBaskerville-Roman'
}
.button div,
button div {
    padding: 18px 0
}
.no-touch .button:hover,
.no-touch button:hover {
    background-color: #6fa2c6;
    color: #ffffff
}
.theme-nioxin.no-touch .button:hover,
.theme-nioxin.no-touch button:hover {
    background-color: #1c1c1e
}
.theme-system-professionals.no-touch .button:hover,
.theme-system-professionals.no-touch button:hover {
    background-color: #6c8594
}
.theme-know-your-types.no-touch .button:hover,
.theme-know-your-types.no-touch button:hover {
    background-color: #5c1f7a
}
.theme-wella-professionals.no-touch .button:hover,
.theme-wella-professionals.no-touch button:hover {
    background-color: #510018
}
.button.disabled,
button.disabled,
.button:disabled,
button:disabled {
    background-color: #727272 !important;
    border-color: #c5c5c5;
    color: #ccc !important;
    cursor: default
}
.button.disabled:hover,
button.disabled:hover,
.button:disabled:hover,
button:disabled:hover {
    border-color: #c5c5c5
}
.button[disabled="disabled"],
button[disabled="disabled"] {
    background-color: #727272 !important;
    border-color: #c5c5c5;
    color: #ccc !important;
    cursor: default
}
.button[disabled="disabled"]:hover,
button[disabled="disabled"]:hover {
    border-color: #c5c5c5
}
.button {
    border: 0
}
.media-component button {
    min-height: 0
}
.buttons {
    margin-top: 30px;
    position: relative
}
.buttons button {
    width: 49.5%;
    float: left
}
.dir-rtl .buttons button {
    float: right
}
.buttons button.buttons-action {
    margin-right: .5%
}
.buttons button.buttons-feedback {
    margin-left: .5%
}
.buttons .buttons-display {
    position: relative;
    border: 0 solid #b8d1e3;
    border-top: none;
    background-color: #546e7a;
    color: #ffffff
}
.buttons .buttons-marking-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 42px;
    height: 42px;
    font-size: 32px;
    line-height: 42px;
    text-align: center;
    border-radius: 50%;
    margin-left: -21px;
    margin-top: -21px;
    color: #ffffff;
    border: 0 solid #b8d1e3;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4)
}
.dir-rtl .buttons .buttons-marking-icon {
    left: inherit;
    margin-left: inherit;
    margin-right: -20px;
    right: 50%
}
.buttons .buttons-marking-icon.icon-tick {
    background-color: #82ca9c
}
.buttons .buttons-marking-icon.icon-cross {
    background-color: #f26c4f
}
@media all and (max-width: 519px) {
    .buttons .buttons-marking-icon {
        width: 38px;
        height: 38px;
        line-height: 38px;
        margin-left: -20px;
        margin-top: -20px
    }
}
.buttons .buttons-display-inner {
    padding: 14px;
    text-align: center
}
.certificateLaunch-component .certificateLaunch-title,
.certificateLaunch-component .certificateLaunch-body,
.certificateLaunch-component .certificateLaunch-instruction {
    display: none !important
}
.certificateLaunch-component .button {
    display: block;
    max-width: 120px;
    margin: 50px auto 0;
    padding: 0;
    min-height: 0
}
.certificateLaunch-component .button img {
    padding: 10px 14px;
    max-height: 35px
}
.certificateLaunch-component.visibility-hidden {
    display: none
}
.certificateLaunch .canvas-container {
    width: 595px;
    height: 762px
}
.certificateLaunch .canvas-text {
    color: #4b4e4f;
    font-size: 17px;
    font-weight: 700
}
.certificateLaunch .image-container {
    max-width: 595px;
    margin: auto
}
.certificateLaunch .button.print {
    top: 90%;
    left: 50%;
    margin-left: -40px;
    padding: 14px 14px 14px 14px;
    min-height: 0;
    font-family: inherit;
    background-color: #b8d1e3
}
.theme-nioxin .certificateLaunch .button.print {
    background-color: #4d4e53
}
.theme-system-professionals .certificateLaunch .button.print {
    background-color: #a7b6bf
}
.theme-know-your-types .certificateLaunch .button.print {
    background-color: #9933cc
}
.theme-wella-professionals .certificateLaunch .button.print {
    background-color: #b70036
}
.no-touch .certificateLaunch .button.print:hover {
    background-color: #6fa2c6;
    color: #ffffff
}
.theme-nioxin.no-touch .certificateLaunch .button.print:hover {
    background-color: #1c1c1e
}
.theme-system-professionals.no-touch .certificateLaunch .button.print:hover {
    background-color: #6c8594
}
.theme-know-your-types.no-touch .certificateLaunch .button.print:hover {
    background-color: #5c1f7a
}
.theme-wella-professionals.no-touch .certificateLaunch .button.print:hover {
    background-color: #510018
}
@media print {
    .certificateLaunch .button.print {
        display: none
    }
}
.component .component-title {
    margin-bottom: 20px;
    padding-top: 15px;
    text-transform: uppercase;
    text-align: left;
    color: #4d4e53
}
.theme-nioxin .component .component-title {
    color: #4d4e53
}
.theme-system-professionals .component .component-title {
    color: #575656
}
.theme-know-your-types .component .component-title {
    color: black
}
.theme-wella-professionals .component .component-title {
    color: #333333
}
.dir-rtl .component .component-title {
    text-align: right
}
@media all and (max-width: 759px) {
    .component .component-title {
        text-align: center
    }
}
.component .component-title-inner {
    padding: 0 0 0
}
.component .component-body {
    margin: 20px 0 0;
    text-align: left
}
.dir-rtl .component .component-body {
    text-align: right
}
@media all and (max-width: 759px) {
    .component .component-body {
        text-align: center
    }
}
.component .component-body a {
    text-decoration: underline;
    color: #4b4e4f
}
.component .component-body-inner {
    padding: 0 0 0
}
.component .component-instruction {
    margin-bottom: 14px;
    margin-top: 20px;
    text-align: left;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 800;
    line-height: 1.4
}
.component .component-instruction a {
    text-decoration: underline;
    color: #4b4e4f
}
.dir-rtl .component .component-instruction {
    text-align: right
}
@media all and (max-width: 759px) {
    .component .component-instruction {
        text-align: center
    }
}
.component .component-instruction-inner.validation-error {
    color: #f55
}
.component.component-medium {
    max-width: 759px;
    margin: auto
}
.component.component-medium .component-title,
.component.component-medium .component-body,
.component.component-medium .component-instruction {
    text-align: center
}
.component.component-full .component-title,
.component.component-full .component-body,
.component.component-full .component-instruction {
    text-align: center
}
.theme-wella-professionals.allergy .white-text .component {
    padding: 40px 0
}
@media all and (max-width: 759px) {
    .component.component-left {
        padding: 0 0 30px
    }
    .component.component-right {
        padding: 30px 0 0
    }
}
@media all and (max-width: 519px) {
    .component.component-left {
        padding: 0 0 20px
    }
    .component.component-right {
        padding: 20px 0 0
    }
}
.allergy .component.component-right,
.allergy .component.component-left {
    padding: 0
}
.component .component-widget {
    margin-top: 20px
}
.component.quote .text-title {
    display: none
}
.component.quote .text-body {
    margin: 0;
    font-size: 36px;
    line-height: 1.2;
    color: #ffffff
}
.component.large-text-component {
    padding-top: 50px;
    padding-bottom: 50px
}
.component.large-text-component .component .component-title {
    font-size: 60px
}
.component.large-text-component .component-body-inner,
.component.large-text-component .component-instruction-inner {
    font-size: 30px;
    line-height: 40px
}
@media all and (max-width: 519px) {
    .component.large-text-component .component-body-inner,
    .component.large-text-component .component-instruction-inner {
        font-size: 24px
    }
}
.component.text-on-white-opaque-bg {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 20px 20px 20px 20px;
    margin: 200px 0
}
.component.component-bg-color-fade .component-inner {
    padding: 30px;
    margin-top: 12%
}
.theme-wella-professionals.blondor .component.component-bg-color-fade .component-inner {
    background-color: rgba(0, 0, 0, 0.5)
}
.theme-wella-professionals.koleston-perfect .component.component-bg-color-fade .component-inner {
    background-color: rgba(0, 0, 0, 0.5)
}
.theme-wella-professionals.color-touch .component.component-bg-color-fade .component-inner {
    background-color: rgba(0, 0, 0, 0.5)
}
@media all and (max-width: 519px) {
    .component.component-bg-color-fade .component-inner {
        padding: 20px 10px
    }
}
@media all and (min-width: 519px) {
    .component.component-bg-color-fade.component-full .component-inner {
        padding: 60px
    }
}
.component.component-bg-color-fade .component-title {
    padding: 0;
    color: #ffffff
}
.component.component-bg-color-fade .component-body {
    font-size: 32px;
    color: #ffffff
}
@media all and (max-width: 519px) {
    .component.component-bg-color-fade .component-body {
        font-size: 24px
    }
}
.component.align-text .component-body {
    text-align: left
}
.dir-rtl .component.align-text .component-body {
    text-align: right
}
@media all and (max-width: 759px) {
    .component.desktop-only {
        display: none
    }
}
@media all and (min-width: 759px) {
    .component.mobile-only {
        display: none
    }
}
.allergy .text-component.component-right,
.allergy .text-component.component-left {
    padding: 50px 0
}
@media all and (min-width: 760px) {
    .allergy .text-component.component-right,
    .allergy .text-component.component-left {
        margin-top: 60px;
        padding: 0;
        width: 40%
    }
}
@media all and (min-width: 760px) and (max-width: 1000px) {
    .allergy .text-component.component-right,
    .allergy .text-component.component-left {
        margin-left: 50px;
        margin-right: 50px
    }
}
.theme-wella-professionals .component .component-instruction {
    color: #3f4142
}
.theme-wella-professionals .block-has-bg-color .block-title-inner,
.theme-wella-professionals .block-has-bg-color .component-title-inner,
.theme-wella-professionals .block-has-bg-color .component-body,
.theme-wella-professionals .block-has-bg-color .component-instruction {
    color: #ffffff
}
.theme-wella-professionals .block-has-bg-color a {
    color: #ffffff
}
@media all and (min-width: 759px) {
    .theme-wella-professionals .graphic-widget {
        margin-top: 15px
    }
}
.sp40 .c-75 .text-instruction-inner {
    font-size: 20px
}
.wp_c45 .page-title.bottom-line .page-title-inner {
    font-size: 150px;
    font-weight: bold
}
@media all and (max-width: 900px) {
    .wp_c45 .page-title.bottom-line .page-title-inner {
        font-size: 100px
    }
}
@media all and (max-width: 759px) {
    .wp_c45 .page-title.bottom-line .page-title-inner {
        font-size: 50px
    }
}
.wp_ct05 .b-25 .graphic-component .component-title {
    display: none
}
@media all and (max-width: 759px) {
    .wp_ct05 .b-25 .graphic-component .component-title {
        display: block
    }
}
.wp_ct05 .b-25 .text-component .component-title {
    display: block
}
@media all and (max-width: 759px) {
    .wp_ct05 .b-25 .text-component .component-title {
        display: none
    }
}
.center-list-itmes ul {
    width: 160px;
    margin: auto;
    text-align: left
}
.graphic-component.wp-il-remove-graphic-margin-top {
    margin-top: 0
}
.wp_kpd10 .component-bg-color-fade .component-body {
    margin: 0
}
.drawer {
    background-color: #798e9d;
    color: #ffffff
}
.theme-nioxin .drawer {
    background-color: #4d4e53
}
.theme-system-professionals .drawer {
    background-color: #a7b6bf
}
.theme-know-your-types .drawer {
    background-color: #3E3E3E
}
.theme-wella-professionals .drawer {
    background-color: #b70036
}
.drawer .drawer-toolbar {
    border-bottom: 1px solid #4a5a66
}
.theme-nioxin .drawer .drawer-toolbar {
    border-bottom: 1px solid #1c1c1e
}
.theme-system-professionals .drawer .drawer-toolbar {
    border-bottom: 1px solid #6c8594
}
.theme-know-your-types .drawer .drawer-toolbar {
    border-bottom: 1px solid #0b0b0b
}
.theme-wella-professionals .drawer .drawer-toolbar {
    border-bottom: 1px solid #510018
}
.drawer .drawer-toolbar .drawer-back-button .close-buton-style01 .icon {
    color: #ffffff;
    border: 2px solid #ffffff;
    border-radius: 50%;
    display: inline-block;
    margin: 13px;
    padding: 5px
}
.drawer .drawer-toolbar .drawer-back-button .close-buton-styledefault .icon {
    color: #ffffff;
    padding: 20px
}
@media all and (max-width: 518px) {
    .drawer .drawer-toolbar .drawer-back-button .close-buton-styledefault .icon {
        padding: 13px
    }
}
.drawer .drawer-toolbar .drawer-back-button .icon {
    color: #ffffff;
    border: 2px solid #ffffff;
    border-radius: 50%;
    display: inline-block;
    margin: 13px;
    padding: 5px
}
.no-touch .drawer .drawer-toolbar .drawer-back-button:hover {
    background-color: #607483;
    -webkit-transition: background-color .2s ease-in;
    -moz-transition: background-color .2s ease-in;
    -ms-transition: background-color .2s ease-in;
    transition: background-color .2s ease-in
}
.theme-nioxin.no-touch .drawer .drawer-toolbar .drawer-back-button:hover {
    background-color: #343539
}
.theme-system-professionals.no-touch .drawer .drawer-toolbar .drawer-back-button:hover {
    background-color: #899eaa
}
.theme-know-your-types.no-touch .drawer .drawer-toolbar .drawer-back-button:hover {
    background-color: #252525
}
.theme-wella-professionals.no-touch .drawer .drawer-toolbar .drawer-back-button:hover {
    background-color: #840027
}
.no-touch .drawer .drawer-toolbar .drawer-back-button:hover .icon {
    background-color: #4d4e53;
    -webkit-transition: background-color .2s ease-in;
    -moz-transition: background-color .2s ease-in;
    -ms-transition: background-color .2s ease-in;
    transition: background-color .2s ease-in
}
.theme-nioxin.no-touch .drawer .drawer-toolbar .drawer-back-button:hover .icon {
    background-color: #111c24
}
.theme-system-professionals.no-touch .drawer .drawer-toolbar .drawer-back-button:hover .icon {
    background-color: #000
}
.theme-know-your-types.no-touch .drawer .drawer-toolbar .drawer-back-button:hover .icon {
    background-color: #c60240
}
.theme-wella-professionals.no-touch .drawer .drawer-toolbar .drawer-back-button:hover .icon {
    background-color: #b70036
}
.drawer .drawer-toolbar .drawer-close-button {
    float: right
}
.drawer .drawer-toolbar .drawer-close-button .close-buton-style01 .icon {
    color: #ffffff;
    border: 2px solid #ffffff;
    border-radius: 50%;
    display: inline-block;
    margin: 13px;
    padding: 5px
}
.drawer .drawer-toolbar .drawer-close-button .close-buton-styledefault .icon {
    color: #ffffff;
    padding: 20px
}
@media all and (max-width: 518px) {
    .drawer .drawer-toolbar .drawer-close-button .close-buton-styledefault .icon {
        padding: 13px
    }
}
.drawer .drawer-toolbar .drawer-close-button .icon {
    color: #ffffff;
    border: 2px solid #ffffff;
    border-radius: 50%;
    display: inline-block;
    margin: 13px;
    padding: 5px
}
.no-touch .drawer .drawer-toolbar .drawer-close-button:hover {
    background-color: #607483;
    -webkit-transition: background-color .2s ease-in;
    -moz-transition: background-color .2s ease-in;
    -ms-transition: background-color .2s ease-in;
    transition: background-color .2s ease-in
}
.theme-nioxin.no-touch .drawer .drawer-toolbar .drawer-close-button:hover {
    background-color: #343539
}
.theme-system-professionals.no-touch .drawer .drawer-toolbar .drawer-close-button:hover {
    background-color: #899eaa
}
.theme-know-your-types.no-touch .drawer .drawer-toolbar .drawer-close-button:hover {
    background-color: #252525
}
.theme-wella-professionals.no-touch .drawer .drawer-toolbar .drawer-close-button:hover {
    background-color: #840027
}
.no-touch .drawer .drawer-toolbar .drawer-close-button:hover .icon {
    background-color: #4d4e53;
    -webkit-transition: background-color .2s ease-in;
    -moz-transition: background-color .2s ease-in;
    -ms-transition: background-color .2s ease-in;
    transition: background-color .2s ease-in
}
.theme-nioxin.no-touch .drawer .drawer-toolbar .drawer-close-button:hover .icon {
    background-color: #111c24
}
.theme-system-professionals.no-touch .drawer .drawer-toolbar .drawer-close-button:hover .icon {
    background-color: #000
}
.theme-know-your-types.no-touch .drawer .drawer-toolbar .drawer-close-button:hover .icon {
    background-color: #c60240
}
.theme-wella-professionals.no-touch .drawer .drawer-toolbar .drawer-close-button:hover .icon {
    background-color: #b70036
}
.dir-rtl .drawer .drawer-inner {
    border-left: inherit
}
.drawer .drawer-item .drawer-item-title {
    font-size: 24px;
    font-weight: 300;
    line-height: 1;
    margin-bottom: 10px;
    text-transform: uppercase
}
.nioxin-fonts .drawer .drawer-item .drawer-item-title {
    font-family: 'Gotham-light', sans-serif;
    font-weight: 300
}
.wp-fonts .drawer .drawer-item .drawer-item-title {
    font-family: 'Conv_ClanOffcPro-NarrBook', sans-serif
}
.translation-font .drawer .drawer-item .drawer-item-title {
    font-family: Arial, sans-serif
}
@media all and (max-width: 519px) {
    .drawer .drawer-item .drawer-item-title {
        font-size: 20.4px
    }
}
.drawer .drawer-item .drawer-item-open {
    padding: 20px 20px 20px 20px;
    border-bottom: 1px solid #6b8292;
    color: #ffffff;
    text-decoration: none
}
.theme-nioxin .drawer .drawer-item .drawer-item-open {
    border-bottom: 1px solid #414246
}
.theme-system-professionals .drawer .drawer-item .drawer-item-open {
    border-bottom: 1px solid #98aab4
}
.theme-know-your-types .drawer .drawer-item .drawer-item-open {
    border-bottom: 1px solid #313131
}
.theme-wella-professionals .drawer .drawer-item .drawer-item-open {
    border-bottom: 1px solid #9e002e
}
.no-touch .drawer .drawer-item .drawer-item-open:hover {
    -webkit-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    -moz-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    -ms-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    background-color: #607483;
    color: #ffffff
}
.theme-nioxin.no-touch .drawer .drawer-item .drawer-item-open:hover {
    background-color: #343539
}
.theme-system-professionals.no-touch .drawer .drawer-item .drawer-item-open:hover {
    background-color: #899eaa
}
.theme-know-your-types.no-touch .drawer .drawer-item .drawer-item-open:hover {
    background-color: #252525
}
.theme-wella-professionals.no-touch .drawer .drawer-item .drawer-item-open:hover {
    background-color: #840027
}
.no-touch .focused,
.no-touch *:focus,
.no-touch input:focus+label {
    outline: none
}
.accessibility.no-touch .focused,
.accessibility.no-touch *:focus,
.accessibility.no-touch input:focus+label {
    outline: 3px solid orange
}
.touch .focused,
.touch button:focus,
.touch select:focus,
.touch textarea:focus,
.touch a:focus,
.touch input:focus+label {
    outline: none
}
.gmcq-component .gmcq-item label {
    color: #000000;
    display: block;
    border: none;
    margin-bottom: 2px;
    position: relative;
    z-index: 1;
    background-color: transparent;
    overflow: hidden;
    cursor: pointer
}
.gmcq-component .gmcq-item label img {
    vertical-align: bottom
}
.gmcq-component .gmcq-item label .gmcq-answer-icon {
    color: #000000
}
.gmcq-component .gmcq-item label .gmcq-answer-icon.radio {
    width: 26px;
    height: 26px
}
.gmcq-component .gmcq-item label .gmcq-answer-icon.radio:before {
    content: "\e65e"
}
.gmcq-component .gmcq-item label .gmcq-answer-icon.checkbox {
    border: 3px solid #000000;
    width: 18px;
    height: 18px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 2px
}
.gmcq-component .gmcq-item label .gmcq-answer-icon.checkbox:before {
    content: " "
}
.gmcq-component .gmcq-item label.selected {
    color: #000000;
    background-color: transparent
}
.gmcq-component .gmcq-item label.selected .gmcq-answer-icon.radio:before {
    content: "\e65d";
    display: inline-block;
    animation-name: scalePulse;
    animation-duration: .6s;
    animation-iteration-count: 1;
    animation-direction: alternate;
    animation-timing-function: ease-in-out
}
.ie .gmcq-component .gmcq-item label.selected .gmcq-answer-icon.radio:before {
    animation-name: none;
    animation-duration: 0
}
.gmcq-component .gmcq-item label.selected .gmcq-answer-icon.checkbox {
    border: 3px solid #000000;
    width: 18px;
    height: 18px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 2px
}
.gmcq-component .gmcq-item label.selected .gmcq-answer-icon.checkbox:before {
    content: "\e633";
    display: inline-block;
    animation-name: scalePulse;
    animation-duration: .6s;
    animation-iteration-count: 1;
    animation-direction: alternate;
    animation-timing-function: ease-in-out
}
.ie .gmcq-component .gmcq-item label.selected .gmcq-answer-icon.checkbox:before {
    animation-name: none;
    animation-duration: 0
}
.gmcq-component .gmcq-item label.selected .gmcq-item-icon {
    color: #000000
}
.gmcq-component .gmcq-item label.selected .gmcq-item-icon.gmcq-correct-icon {
    color: #82ca9c
}
.gmcq-component .gmcq-item label.selected .gmcq-item-icon.gmcq-incorrect-icon {
    color: #f26c4f
}
.gmcq-component .gmcq-item label.selected .gmcq-item-inner {
    color: #4b4e4f
}
.gmcq-component .gmcq-item label.disabled .gmcq-item-icon {
    color: #727272
}
.gmcq-component .gmcq-item label.disabled .gmcq-item-inner {
    color: #727272
}
.gmcq-component .gmcq-item-inner {
    margin-left: 48px;
    color: #000000;
    padding-bottom: 20px;
    padding-top: 20px;
    padding-left: 0;
    padding-right: 0
}
.dir-rtl .gmcq-component .gmcq-item-inner {
    margin-left: inherit;
    margin-right: 38px
}
@media all and (max-width: 759px) {
    .gmcq-component .gmcq-item-inner {
        font-size: 16px
    }
}
.gmcq-component .gmcq-item input {
    visibility: hidden;
    position: absolute;
    bottom: 14px;
    left: 25px
}
.dir-rtl .gmcq-component .gmcq-item input {
    left: inherit;
    right: 25px
}
.gmcq-component .gmcq-item-checkbox {
    position: relative
}
@media all and (max-width: 759px) {
    .gmcq-component .gmcq-item-checkbox {
        min-height: 130px
    }
}
.gmcq-component .gmcq-item-state {
    background: none;
    position: absolute;
    left: 10px;
    width: 24px;
    height: 24px;
    top: 50%;
    margin-top: -12px;
    z-index: 0
}
.dir-rtl .gmcq-component .gmcq-item-state {
    left: inherit;
    right: 10px
}
@media all and (max-width: 759px) {
    .gmcq-component .gmcq-item-state {
        margin-top: 35px;
        top: 0
    }
}
.gmcq-component .gmcq-correct-icon {
    color: #82ca9c;
    display: none
}
.gmcq-component .gmcq-incorrect-icon {
    color: #f26c4f;
    display: none
}
.gmcq-component .gmcq-widget.show-user-answer .gmcq-item-icon {
    display: none
}
.gmcq-component .gmcq-widget.show-user-answer .incorrect .selected .gmcq-incorrect-icon {
    display: block
}
.gmcq-component .gmcq-widget.show-user-answer .correct .selected .gmcq-correct-icon {
    display: block
}
.gmcq-component .gmcq-widget.show-correct-answer .gmcq-item-icon {
    display: none
}
.gmcq-component .gmcq-widget.show-correct-answer .selected .gmcq-correct-icon {
    display: block
}
.gmcq-component .gmcq-widget.disabled .gmcq-item label.selected.disabled {
    background-color: transparent;
    cursor: default
}
.gmcq-component .gmcq-widget.disabled .gmcq-item label.selected.disabled .gmcq-item-icon.gmcq-correct-icon {
    color: #82ca9c
}
.gmcq-component .gmcq-widget.disabled .gmcq-item label.selected.disabled .gmcq-item-icon.gmcq-incorrect-icon {
    color: #f26c4f
}
.gmcq-component .gmcq-widget.disabled .gmcq-item label.disabled {
    color: #727272;
    background-color: transparent;
    cursor: default;
    border: none
}
.no-touch .gmcq-component .gmcq-widget:not(.disabled) .gmcq-item label:hover {
    -webkit-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    -moz-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    -ms-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    color: #000000;
    background-color: transparent
}
.no-touch .gmcq-component .gmcq-widget:not(.disabled) .gmcq-item label:hover .gmcq-item-icon {
    color: #000000
}
.no-touch .gmcq-component .gmcq-widget:not(.disabled) .gmcq-item label:hover .gmcq-item-inner {
    color: #000000
}
.block-has-bg-color .gmcq-component .gmcq-item-inner,
.block-has-bg-color .gmcq-component .gmcq-answer-icon {
    color: #ffffff !important;
    border-color: #ffffff !important
}
.hotgraphic-component .hotgraphic-graphic img {
    width: 100%
}
.hotgraphic-component .hotgraphic-graphic-pin {
    background-color: #ffffff
}
.hotgraphic-component .hotgraphic-graphic-pin.visited .hotgraphic-graphic-pin-icon {
    color: #727272
}
.hotgraphic-component .hotgraphic-graphic-pin-icon {
    color: #4d4e53
}
.theme-nioxin .hotgraphic-component .hotgraphic-graphic-pin-icon {
    color: #4d4e53
}
.theme-system-professionals .hotgraphic-component .hotgraphic-graphic-pin-icon {
    color: #a7b6bf
}
.theme-know-your-types .hotgraphic-component .hotgraphic-graphic-pin-icon {
    color: #4d4e53
}
.theme-wella-professionals .hotgraphic-component .hotgraphic-graphic-pin-icon {
    color: #b70036
}
.hotgraphic-component .hotgraphic-popup {
    background-color: #ffffff;
    color: #4b4e4f;
    border: 3px #4d4e53 solid
}
.hotgraphic-component .hotgraphic-popup-toolbar {
    padding: 20px 20px 20px 20px;
    background-color: #4d4e53
}
.theme-nioxin .hotgraphic-component .hotgraphic-popup-toolbar {
    background-color: #4d4e53
}
.theme-system-professionals .hotgraphic-component .hotgraphic-popup-toolbar {
    background-color: #a7b6bf
}
.theme-know-your-types .hotgraphic-component .hotgraphic-popup-toolbar {
    background-color: #4d4e53
}
.theme-wella-professionals .hotgraphic-component .hotgraphic-popup-toolbar {
    background-color: #b70036
}
.hotgraphic-component .hotgraphic-popup-nav {
    background-color: #4d4e53
}
.theme-nioxin .hotgraphic-component .hotgraphic-popup-nav {
    background-color: #4d4e53
}
.theme-system-professionals .hotgraphic-component .hotgraphic-popup-nav {
    background-color: #a7b6bf
}
.theme-know-your-types .hotgraphic-component .hotgraphic-popup-nav {
    background-color: #4d4e53
}
.theme-wella-professionals .hotgraphic-component .hotgraphic-popup-nav {
    background-color: #b70036
}
.hotgraphic-component .hotgraphic-popup-done {
    color: #ffffff
}
.hotgraphic-component .hotgraphic-popup-arrow-l {
    color: #ffffff
}
.hotgraphic-component .hotgraphic-popup-arrow-r {
    color: #ffffff
}
.hotgraphic-component .hotgraphic-popup-close {
    color: #ffffff
}
.hotgraphic-component .hotgraphic-popup-count {
    color: #ffffff
}
.hotgraphic-component .hotgraphic-popup-inner {
    padding: 20px 20px 20px 20px
}
.hotgraphic-component .hotgraphic-popup-toolbar {
    padding: 0;
    height: auto;
    border-bottom: 2px #4d4e53 solid
}
.hotgraphic-component .hotgraphic-popup-count {
    height: 45px;
    line-height: 46px
}
.hotgraphic-component .hotgraphic-popup-controls {
    padding: 10px
}
.hotgraphic-component .hotgraphic-popup-done {
    top: 0;
    right: 0;
    padding: 10px
}
.no-touch .hotgraphic-component .hotgraphic-popup-close:hover {
    color: #ffffff
}
.no-touch .hotgraphic-component .hotgraphic-popup-arrow-r:hover {
    color: #ffffff
}
.no-touch .hotgraphic-component .hotgraphic-popup-arrow-l:hover {
    color: #ffffff
}
.no-touch .hotgraphic-component .hotgraphic-graphic-pin-icon:hover {
    color: #1c1c1e;
    -webkit-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    -moz-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    -ms-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in
}
.hotgraphic-component .close-buton-style01 .hotgraphic-popup-done {
    top: -2px
}
.hotgraphic-component .close-buton-style01 .hotgraphic-popup-done .hotgraphic-popup-close {
    border: 2px solid #ffffff;
    border-radius: 50%
}
.hotgraphic-component .hotgraphic-popup-done {
    top: -2px
}
.hotgraphic-component .hotgraphic-popup-done .hotgraphic-popup-close {
    border: 2px solid #ffffff;
    border-radius: 50%
}
.no-touch .hotgraphic-component .hotgraphic-popup-controls:not(.disabled):hover {
    background-color: #4d4e53;
    -webkit-transition: background-color .2s ease-in;
    -moz-transition: background-color .2s ease-in;
    -ms-transition: background-color .2s ease-in;
    transition: background-color .2s ease-in
}
.theme-nioxin.no-touch .hotgraphic-component .hotgraphic-popup-controls:not(.disabled):hover {
    background-color: #111c24
}
.theme-system-professionals.no-touch .hotgraphic-component .hotgraphic-popup-controls:not(.disabled):hover {
    background-color: #000
}
.theme-know-your-types.no-touch .hotgraphic-component .hotgraphic-popup-controls:not(.disabled):hover {
    background-color: #c60240
}
.theme-wella-professionals.no-touch .hotgraphic-component .hotgraphic-popup-controls:not(.disabled):hover {
    background-color: #b70036
}
.no-touch .hotgraphic-component .hotgraphic-popup-controls:not(.disabled):hover .hotgraphic-popup-arrow-l,
.no-touch .hotgraphic-component .hotgraphic-popup-controls:not(.disabled):hover .hotgraphic-popup-arrow-r {
    color: #ffffff
}
.no-touch .hotgraphic-component .hotgraphic-popup-controls:not(.disabled):hover .hotgraphic-popup-arrow-r:before {
    display: inline-block;
    animation-name: bouncenextbuttonHotgrphc;
    animation-duration: .2s;
    animation-iteration-count: 2;
    animation-direction: alternate;
    animation-timing-function: ease-in-out
}
.no-touch .hotgraphic-component .hotgraphic-popup-controls:not(.disabled):hover .hotgraphic-popup-arrow-l:before {
    display: inline-block;
    animation-name: bouncebackbuttonHotgrphc;
    animation-duration: .2s;
    animation-iteration-count: 2;
    animation-direction: alternate;
    animation-timing-function: ease-in-out
}
.no-touch .hotgraphic-component .hotgraphic-popup-done:hover .hotgraphic-popup-close {
    color: #ffffff;
    background-color: #4d4e53;
    -webkit-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    -moz-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    -ms-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in
}
.theme-nioxin.no-touch .hotgraphic-component .hotgraphic-popup-done:hover .hotgraphic-popup-close {
    background-color: #111c24
}
.theme-system-professionals.no-touch .hotgraphic-component .hotgraphic-popup-done:hover .hotgraphic-popup-close {
    background-color: #000
}
.theme-know-your-types.no-touch .hotgraphic-component .hotgraphic-popup-done:hover .hotgraphic-popup-close {
    background-color: #c60240
}
.theme-wella-professionals.no-touch .hotgraphic-component .hotgraphic-popup-done:hover .hotgraphic-popup-close {
    background-color: #b70036
}
@media all and (max-width: 758px) {
    .hotgrid-component .hotgrid-grid-item {
        width: 100% !important
    }
}
@media all and (min-width: 759px) {
    .theme-wella-professionals .hotgrid-notify-graphic {
        padding: 0;
        margin-top: -60px
    }
}
.hotgrid-notify-body,
.notify-popup-title-inner {
    width: 58%
}
@media (max-width: 759px) {
    .hotgrid-notify-body,
    .notify-popup-title-inner {
        width: 100%
    }
}
@font-face {
    font-family: 'vanilla';
    src: url('fonts/vanilla.eot');
    src: url('fonts/vanilla.eot?#iefix') format('embedded-opentype'), url('fonts/vanilla.woff') format('woff'), url('fonts/vanilla.ttf') format('truetype'), url('fonts/vanilla.svg#vanilla') format('svg');
    font-weight: normal;
    font-style: normal
}
.icon {
    font-family: 'vanilla';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}
.icon {
    color: #4b4e4f;
    display: block;
    font-size: 24px;
    height: 25px;
    text-decoration: none;
    width: 25px;
    text-align: center
}
.icon-arrow-left:before {
    content: "\e600"
}
.dir-rtl .icon-arrow-left:before {
    content: "\e603"
}
.icon-arrow-down:before {
    content: "\e601"
}
.icon-arrow-up:before {
    content: "\e602"
}
.icon-arrow-right:before {
    content: "\e603"
}
.dir-rtl .icon-arrow-right:before {
    content: "\e600"
}
.icon-bookmark:before {
    content: "\e604"
}
.icon-message:before {
    content: "\e605"
}
.icon-mouse:before {
    content: "\e606"
}
.icon-mobile:before {
    content: "\e607"
}
.icon-desktop:before {
    content: "\e608"
}
.icon-pencil:before {
    content: "\e609"
}
.icon-forward-arrow:before {
    content: "\e60a"
}
.dir-rtl .icon-forward-arrow:before {
    content: "\e60b"
}
.icon-backwards-arrow:before {
    content: "\e60b"
}
.dir-rtl .icon-backwards-arrow:before {
    content: "\e60a"
}
.icon-person:before {
    content: "\e60c"
}
.icon-persons:before {
    content: "\e60d"
}
.icon-profile:before {
    content: "\e60e"
}
.icon-pin:before {
    content: "\e60f"
}
.icon-map:before {
    content: "\e610"
}
.icon-point:before {
    content: "\e611"
}
.icon-star:before {
    content: "\e612"
}
.icon-star-hollow:before {
    content: "\e613"
}
.icon-comments:before {
    content: "\e614"
}
.icon-comment:before {
    content: "\e615"
}
.icon-home:before {
    content: "\e616"
}
.icon-popup:before {
    content: "\e617"
}
.icon-search:before {
    content: "\e618"
}
.icon-printer:before {
    content: "\e619"
}
.icon-link:before {
    content: "\e61a"
}
.icon-flag:before {
    content: "\e61b"
}
.icon-cog:before {
    content: "\e61c"
}
.icon-tools:before {
    content: "\e61d"
}
.icon-tag:before {
    content: "\e61e"
}
.icon-camera:before {
    content: "\e61f"
}
.icon-feedback:before {
    content: "\e620"
}
.icon-book:before {
    content: "\e621"
}
.icon-article:before {
    content: "\e622"
}
.icon-eye:before {
    content: "\e623"
}
.icon-time:before {
    content: "\e624"
}
.icon-microphone:before {
    content: "\e625"
}
.icon-calendar:before {
    content: "\e626"
}
.icon-timer:before {
    content: "\e627"
}
.icon-drag:before {
    content: "\e628"
}
.icon-light-bulb:before {
    content: "\e629"
}
.icon-checklist:before {
    content: "\e62a"
}
.icon-ticket:before {
    content: "\e62b"
}
.icon-wi-fi:before {
    content: "\e62c"
}
.icon-line-graph:before {
    content: "\e62d"
}
.icon-pie-chart:before {
    content: "\e62e"
}
.icon-bar-graph:before {
    content: "\e62f"
}
.icon-scatter-graph:before {
    content: "\e630"
}
.icon-padlock-locked:before {
    content: "\e631"
}
.icon-padlock-unlocked:before {
    content: "\e632"
}
.icon-tick:before {
    content: "\e633"
}
.icon-cross:before {
    content: "\e634"
}
.icon-minus:before {
    content: "\e635"
}
.icon-plus:before {
    content: "\e636"
}
.icon-info:before {
    content: "\e637"
}
.icon-question:before {
    content: "\e638"
}
.icon-warning:before {
    content: "\e639"
}
.icon-list:before {
    content: "\e63a"
}
.icon-add-to-list:before {
    content: "\e63b"
}
.icon-menu:before {
    content: "\e63c"
}
.icon-grid:before {
    content: "\e63d"
}
.icon-portrait:before {
    content: "\e63e"
}
.icon-screens:before {
    content: "\e63f"
}
.icon-landscape:before {
    content: "\e640"
}
.icon-images:before {
    content: "\e641"
}
.icon-media:before {
    content: "\e642"
}
.icon-folder:before {
    content: "\e643"
}
.icon-documents:before {
    content: "\e644"
}
.icon-delete:before {
    content: "\e645"
}
.icon-save:before {
    content: "\e646"
}
.icon-download:before {
    content: "\e647"
}
.icon-upload:before {
    content: "\e648"
}
.icon-expand:before {
    content: "\e649"
}
.icon-shrink:before {
    content: "\e64a"
}
.icon-volume:before {
    content: "\e64b"
}
.icon-sound:before {
    content: "\e64c"
}
.icon-sound-mute:before {
    content: "\e64d"
}
.icon-controls-left:before {
    content: "\e64e"
}
.dir-rtl .icon-controls-left:before {
    content: "\e651"
}
.icon-controls-down:before {
    content: "\e64f"
}
.icon-controls-up:before {
    content: "\e650"
}
.icon-controls-right:before {
    content: "\e651"
}
.dir-rtl .icon-controls-right:before {
    content: "\e64e"
}
.icon-triangle-left:before {
    content: "\e652"
}
.dir-rtl .icon-triangle-left:before {
    content: "\e655"
}
.icon-triangle-down:before {
    content: "\e653"
}
.icon-triangle-up:before {
    content: "\e654"
}
.icon-triangle-right:before {
    content: "\e655"
}
.dir-rtl .icon-triangle-right:before {
    content: "\e652"
}
.icon-dot:before {
    content: "\e656"
}
.icon-ellipsis:before {
    content: "\e657"
}
.icon-up-down:before {
    content: "\e658"
}
.icon-controls-small-left:before {
    content: "\e659"
}
.dir-rtl .icon-controls-small-left:before {
    content: "\e65c"
}
.icon-controls-small-down:before {
    content: "\e65a"
}
.icon-controls-small-up:before {
    content: "\e65b"
}
.icon-controls-small-right:before {
    content: "\e65c"
}
.dir-rtl .icon-controls-small-right:before {
    content: "\e659"
}
.icon-radio-checked:before {
    content: "\e65d"
}
.icon-radio-unchecked:before {
    content: "\e65e"
}
.loading {
    position: fixed !important;
    background-color: rgba(255, 255, 255, 0.8);
    text-align: center
}
.no-opacity .loading {
    background-image: url('assets/transparency-light.png')
}
.loading .loader-gif {
    background-image: url(../../course/en/images/ajax-loader.gif);
    background-repeat: no-repeat;
    background-position: center;
    width: 128px;
    height: 128px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -64px;
    margin-left: -64px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 36px;
    font-weight: 300;
    line-height: 1
}
.nioxin-fonts .loading .loader-gif {
    font-family: 'Gotham-light', sans-serif;
    font-weight: 300
}
.wp-fonts .loading .loader-gif {
    font-family: 'Conv_ClanOffcPro-NarrBook', sans-serif
}
.translation-font .loading .loader-gif {
    font-family: Arial, sans-serif
}
@media all and (max-width: 519px) {
    .loading .loader-gif {
        font-size: 24px
    }
}
.theme-nioxin .loading .loader-gif {
    background-image: url(../../course/en/images/ajax-loader.gif)
}
.matching-component .matching-item {
    padding-bottom: 20px
}
.matching-component .matching-item-title {
    margin-bottom: 2px;
    padding: 10px;
    color: #ffffff
}
.theme-nioxin .matching-component .matching-item-title {
    background-color: #1c1c1e
}
.theme-system-professionals .matching-component .matching-item-title {
    background-color: #727272
}
.theme-know-your-types .matching-component .matching-item-title {
    background-color: #111c24
}
.theme-wella-professionals .matching-component .matching-item-title {
    background-color: #6e0020
}
.matching-component .matching-select-container {
    background-color: #4d4e53
}
.theme-nioxin .matching-component .matching-select-container {
    background-color: #4d4e53
}
.theme-system-professionals .matching-component .matching-select-container {
    background-color: #a7b6bf
}
.theme-know-your-types .matching-component .matching-select-container {
    background-color: #4d4e53
}
.theme-wella-professionals .matching-component .matching-select-container {
    background-color: #b70036
}
.theme-nioxin.no-touch .matching-component .matching-select-container:hover {
    background-color: #1c1c1e
}
.theme-system-professionals.no-touch .matching-component .matching-select-container:hover {
    background-color: #869299
}
.theme-know-your-types.no-touch .matching-component .matching-select-container:hover {
    background-color: #2b2b2b
}
.theme-wella-professionals.no-touch .matching-component .matching-select-container:hover {
    background-color: #92002b
}
@media all and (max-width: 759px) {
    .matching-component .matching-select-container {
        width: 100%
    }
}
.matching-component .matching-select-icon {
    color: #ffffff
}
.matching-component .matching-correct-icon {
    color: #82ca9c
}
.matching-component .matching-incorrect-icon {
    color: #f26c4f
}
.matching-component .matching-select {
    padding: 10px
}
.dir-rtl .matching-component .matching-select {
    padding: 20px 20px 20px 20px
}
@media all and (max-width: 759px) and (min-width: 519px) {
    .matching-component .matching-select {
        width: 105%
    }
}
@media all and (max-width: 518px) {
    .matching-component .matching-select {
        width: 110%
    }
}
.matching-component .matching-select:focus {
    background-color: #1c1c1e
}
.theme-nioxin .matching-component .matching-select:focus {
    background-color: #1c1c1e
}
.theme-system-professionals .matching-component .matching-select:focus {
    background-color: #6c8594
}
.theme-know-your-types .matching-component .matching-select:focus {
    background-color: #1c1c1e
}
.theme-wella-professionals .matching-component .matching-select:focus {
    background-color: #510018
}
.matching-component .matching-select:disabled {
    color: #ffffff
}
.matching-component .matching-widget.submitted .matching-select-container {
    background-color: #727272
}
.no-touch .matching-select-icon:hover {
    color: #ffffff
}
.no-touch .matching-select-icon:hover.matching-correct-icon {
    color: #82ca9c
}
.no-touch .matching-select-icon:hover.matching-incorrect-icon {
    color: #f26c4f
}
.no-touch .matching-select-container:hover {
    color: #ffffff;
    background-color: #1c1c1e
}
.ie8 .submitted.matching-widget .matching-select-container {
    background-color: #fff
}
.ie8 .matching-select-container.disabled {
    background-color: #727272
}
.matching-component select[disabled]::-ms-value {
    color: #ffffff
}
.mcq-component .mcq-item {
    background-color: #4d4e53;
    position: relative
}
.theme-nioxin .mcq-component .mcq-item {
    background-color: #4d4e53
}
.theme-system-professionals .mcq-component .mcq-item {
    background-color: #a7b6bf
}
.theme-know-your-types .mcq-component .mcq-item {
    background-color: #4d4e53
}
.theme-wella-professionals .mcq-component .mcq-item {
    background-color: #b70036
}
.mcq-component .mcq-item label {
    color: #ffffff;
    display: block;
    margin-bottom: 2px;
    position: relative;
    z-index: 1;
    background-color: #4d4e53;
    cursor: pointer
}
.theme-nioxin .mcq-component .mcq-item label {
    background-color: #4d4e53
}
.theme-system-professionals .mcq-component .mcq-item label {
    background-color: #a7b6bf
}
.theme-know-your-types .mcq-component .mcq-item label {
    background-color: #4d4e53
}
.theme-wella-professionals .mcq-component .mcq-item label {
    background-color: #b70036
}
.mcq-component .mcq-item label .mcq-answer-icon {
    color: #ffffff
}
.mcq-component .mcq-item label.selected {
    color: #ffffff
}
.theme-nioxin .mcq-component .mcq-item label.selected {
    background-color: #1c1c1e
}
.theme-system-professionals .mcq-component .mcq-item label.selected {
    background-color: #727272
}
.theme-know-your-types .mcq-component .mcq-item label.selected {
    background-color: #111c24
}
.theme-wella-professionals .mcq-component .mcq-item label.selected {
    background-color: #6e0020
}
.mcq-component .mcq-item label.selected .mcq-answer-icon {
    color: #ffffff
}
.mcq-component .mcq-item label.selected .mcq-answer-icon.radio:before {
    content: "\e65d";
    display: inline-block;
    animation-name: scalePulse;
    animation-duration: .6s;
    animation-iteration-count: 1;
    animation-direction: alternate;
    animation-timing-function: ease-in-out
}
.ie .mcq-component .mcq-item label.selected .mcq-answer-icon.radio:before {
    animation-name: none;
    animation-duration: 0
}
.mcq-component .mcq-item label.selected .mcq-answer-icon.checkbox {
    border: 3px solid #ffffff;
    width: 18px;
    height: 18px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 2px
}
.mcq-component .mcq-item label.selected .mcq-answer-icon.checkbox:before {
    content: "\e633";
    display: inline-block;
    animation-name: scalePulse;
    animation-duration: .6s;
    animation-iteration-count: 1;
    animation-direction: alternate;
    animation-timing-function: ease-in-out
}
.ie .mcq-component .mcq-item label.selected .mcq-answer-icon.checkbox:before {
    animation-name: none;
    animation-duration: 0
}
.mcq-component .mcq-item label.selected .mcq-item-icon {
    color: #ffffff
}
.mcq-component .mcq-item label.selected .mcq-item-icon.mcq-correct-icon {
    color: #82ca9c
}
.mcq-component .mcq-item label.selected .mcq-item-icon.mcq-incorrect-icon {
    color: #f26c4f
}
.mcq-component .mcq-correct-icon {
    display: none
}
.mcq-component .mcq-incorrect-icon {
    display: none
}
.mcq-component .mcq-item-state {
    background: none;
    position: absolute;
    left: 20px;
    width: 24px;
    height: 24px;
    top: 50%;
    margin-top: -12px;
    z-index: 0
}
.dir-rtl .mcq-component .mcq-item-state {
    left: inherit;
    right: 20px
}
.mcq-widget.disabled .mcq-item label.selected.disabled {
    color: #ffffff;
    background-color: #1c1c1e;
    cursor: default
}
.theme-nioxin .mcq-widget.disabled .mcq-item label.selected.disabled {
    background-color: #1c1c1e
}
.theme-system-professionals .mcq-widget.disabled .mcq-item label.selected.disabled {
    background-color: #6c8594
}
.theme-know-your-types .mcq-widget.disabled .mcq-item label.selected.disabled {
    background-color: #1c1c1e
}
.theme-wella-professionals .mcq-widget.disabled .mcq-item label.selected.disabled {
    background-color: #510018
}
.mcq-widget.disabled .mcq-item label.disabled {
    color: #ccc;
    background-color: #727272;
    cursor: default;
    border-color: #727272
}
.mcq-widget.disabled .mcq-item label.disabled .mcq-item-icon.mcq-correct-icon {
    color: #82ca9c
}
.mcq-widget.disabled .mcq-item label.disabled .mcq-item-icon.mcq-incorrect-icon {
    color: #f26c4f
}
.no-touch .mcq-widget:not(.disabled) .mcq-item label:hover {
    color: #ffffff;
    -webkit-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    -moz-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    -ms-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in
}
.theme-nioxin.no-touch .mcq-widget:not(.disabled) .mcq-item label:hover {
    background-color: #1c1c1e
}
.theme-system-professionals.no-touch .mcq-widget:not(.disabled) .mcq-item label:hover {
    background-color: #869299
}
.theme-know-your-types.no-touch .mcq-widget:not(.disabled) .mcq-item label:hover {
    background-color: #2b2b2b
}
.theme-wella-professionals.no-touch .mcq-widget:not(.disabled) .mcq-item label:hover {
    background-color: #92002b
}
.no-touch .mcq-widget:not(.disabled) .mcq-item label:hover .mcq-item-icon {
    color: none
}
.no-touch .mcq-widget:not(.disabled) .mcq-item label.disabled {
    color: #ffffff;
    background-color: #727272
}
.no-touch .mcq-widget:not(.disabled) .mcq-item label.disabled:hover {
    color: #ffffff;
    background-color: #727272;
    -webkit-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    -moz-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    -ms-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in
}
.no-touch .mcq-widget:not(.disabled) .mcq-item label.disabled .mcq-item-icon.mcq-correct-icon {
    color: #82ca9c
}
.no-touch .mcq-widget:not(.disabled) .mcq-item label.disabled .mcq-item-icon.mcq-incorrect-icon {
    color: #f26c4f
}
.block-has-bg-color .media-component .component-header {
    background-color: transparent !important
}
.media-component .component-header {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 10px 0
}
.media-component .mejs-overlay-button {
    background: url(assets/big_play.png);
    background-repeat: no-repeat
}
.media-component .mejs-overlay-loading {
    width: 128px;
    height: 128px;
    margin: -64px 0 0 -64px
}
.media-component .mejs-overlay-loading span {
    width: 128px;
    height: 128px
}
.media-component .media-transcript:hover {
    color: #ffffff;
    background-color: #3b6f94
}
.media-component .media-transcript-button-container {
    padding: 0
}
.media-component .media-inline-transcript-body-container {
    background-color: rgba(255, 255, 255, 0.8)
}
.media-component .media-inline-transcript-body {
    padding: 15px
}
.media-component .transcript-text-container {
    padding: 0
}
.media-component .media-inline-transcript-button {
    padding: 20px 25px;
    min-height: 0
}
.has-reveal .media-component .component-header {
    padding: 0;
    background-color: transparent;
    border-bottom: 5px solid;
    border-color: #4d4e53
}
.theme-nioxin .has-reveal .media-component .component-header {
    border-color: #4d4e53
}
.theme-system-professionals .has-reveal .media-component .component-header {
    border-color: #575656
}
.theme-know-your-types .has-reveal .media-component .component-header {
    border-color: black
}
.theme-wella-professionals .has-reveal .media-component .component-header {
    border-color: #333333
}
.theme-wella-professionals .has-reveal .media-component .component-header {
    border: none
}
.narrative-component .narrative-content-title {
    margin-bottom: 20px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 36px;
    font-weight: 300;
    line-height: 1
}
.nioxin-fonts .narrative-component .narrative-content-title {
    font-family: 'Gotham-light', sans-serif;
    font-weight: 300
}
.wp-fonts .narrative-component .narrative-content-title {
    font-family: 'Conv_ClanOffcPro-NarrBook', sans-serif
}
.translation-font .narrative-component .narrative-content-title {
    font-family: Arial, sans-serif
}
@media all and (max-width: 519px) {
    .narrative-component .narrative-content-title {
        font-size: 24px
    }
}
.narrative-component .narrative-content {
    background-color: #4d4e53;
    color: #ffffff
}
.theme-nioxin .narrative-component .narrative-content {
    background-color: #4d4e53
}
.theme-system-professionals .narrative-component .narrative-content {
    background-color: #a7b6bf
}
.theme-know-your-types .narrative-component .narrative-content {
    background-color: #4d4e53
}
.theme-wella-professionals .narrative-component .narrative-content {
    background-color: #b70036
}
.narrative-component .narrative-controls {
    display: block;
    width: 60px;
    height: 60px;
    position: absolute;
    top: 50%;
    margin-top: -48px;
    z-index: 10;
    text-decoration: none;
    background-color: #4d4e53;
    -webkit-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    -moz-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    -ms-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in
}
.theme-nioxin .narrative-component .narrative-controls {
    background-color: #4d4e53
}
.theme-system-professionals .narrative-component .narrative-controls {
    background-color: #a7b6bf
}
.theme-know-your-types .narrative-component .narrative-controls {
    background-color: #4d4e53
}
.theme-wella-professionals .narrative-component .narrative-controls {
    background-color: #b70036
}
.no-touch .narrative-component .narrative-controls:hover {
    background-color: #1c1c1e
}
.no-touch .narrative-component .narrative-controls:hover .icon {
    color: #ffffff
}
.no-touch .narrative-component .narrative-controls:hover .icon.icon-controls-left:before {
    display: inline-block;
    animation-name: bouncebackbuttonNartve;
    animation-duration: .25s;
    animation-iteration-count: 2;
    animation-direction: alternate;
    animation-timing-function: ease-in-out
}
.no-touch .narrative-component .narrative-controls:hover .icon.icon-controls-right:before {
    display: inline-block;
    animation-name: bouncenextbuttonNartve;
    animation-duration: .25s;
    animation-iteration-count: 2;
    animation-direction: alternate;
    animation-timing-function: ease-in-out
}
.narrative-component .narrative-controls .icon {
    font-size: 30px;
    font-weight: bold;
    margin: 16px;
    color: #ffffff
}
.narrative-component .narrative-progress {
    background-color: #ccc;
    border: inherit
}
.narrative-component .narrative-progress.selected {
    background-color: #4d4e53
}
.theme-nioxin .narrative-component .narrative-progress.selected {
    background-color: #4d4e53
}
.theme-system-professionals .narrative-component .narrative-progress.selected {
    background-color: #a7b6bf
}
.theme-know-your-types .narrative-component .narrative-progress.selected {
    background-color: #4d4e53
}
.theme-wella-professionals .narrative-component .narrative-progress.selected {
    background-color: #b70036
}
.narrative-component .narrative-strapline-title {
    position: relative;
    float: left;
    text-decoration: none;
    background-color: #4d4e53;
    color: #ffffff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 36px;
    font-weight: 300;
    line-height: 1
}
.theme-nioxin .narrative-component .narrative-strapline-title {
    background-color: #4d4e53
}
.theme-system-professionals .narrative-component .narrative-strapline-title {
    background-color: #a7b6bf
}
.theme-know-your-types .narrative-component .narrative-strapline-title {
    background-color: #4d4e53
}
.theme-wella-professionals .narrative-component .narrative-strapline-title {
    background-color: #b70036
}
.nioxin-fonts .narrative-component .narrative-strapline-title {
    font-family: 'Gotham-light', sans-serif;
    font-weight: 300
}
.wp-fonts .narrative-component .narrative-strapline-title {
    font-family: 'Conv_ClanOffcPro-NarrBook', sans-serif
}
.translation-font .narrative-component .narrative-strapline-title {
    font-family: Arial, sans-serif
}
@media all and (max-width: 519px) {
    .narrative-component .narrative-strapline-title {
        font-size: 24px
    }
}
.dir-rtl .narrative-component .narrative-strapline-title {
    float: right
}
.narrative-component .narrative-strapline-title .icon {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    padding: 20px 20px 20px;
    color: #ffffff
}
.dir-rtl .narrative-component .narrative-strapline-title .icon {
    right: inherit;
    left: 0
}
.no-touch .narrative-component .narrative-strapline-title:hover {
    -webkit-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    -moz-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    -ms-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    background-color: #1c1c1e;
    color: #ffffff
}
.no-touch .narrative-component .narrative-strapline-title:hover .icon {
    color: #ffffff
}
.no-touch .narrative-component .narrative-strapline-title:focus .focus-rect {
    outline: none
}
.no-touch.accessibility .narrative-component .narrative-strapline-title:focus .focus-rect {
    position: absolute;
    outline: 3px solid orange;
    right: 3px;
    bottom: 3px;
    top: 3px;
    left: 3px
}
.narrative-component .narrative-strapline-title-inner {
    padding-left: 20px;
    padding-right: 64px
}
.dir-rtl .narrative-component .narrative-strapline-title-inner {
    padding-right: 20px;
    padding-left: 64px
}
.navigation {
    width: 100%;
    max-width: 1400px;
    margin: auto;
    overflow: hidden;
    height: 64px;
    background-color: #ffffff
}
.theme-nioxin .navigation {
    background-color: #ffffff
}
.theme-system-professionals .navigation {
    background-color: #ffffff
}
.theme-know-your-types .navigation {
    background-color: #ffffff
}
.theme-wella-professionals .navigation {
    background-color: #ffffff
}
.ie8 .navigation {
    max-width: 1024px
}
.navigation .icon {
    padding: 20px;
    text-decoration: none;
    color: #4d4e53
}
.theme-nioxin .navigation .icon {
    color: #111c24
}
.theme-system-professionals .navigation .icon {
    color: #000
}
.theme-know-your-types .navigation .icon {
    color: #C60240
}
.theme-wella-professionals .navigation .icon {
    color: #b70036
}
.no-touch .navigation .icon:hover {
    -webkit-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    -moz-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    -ms-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    background-color: #e5e5e5;
    -webkit-transition: background-color .2s ease-in;
    -moz-transition: background-color .2s ease-in;
    -ms-transition: background-color .2s ease-in;
    transition: background-color .2s ease-in
}
.no-touch .navigation .icon.navigation-back-button:hover:before {
    display: inline-block;
    animation-name: bouncebackbutton;
    animation-duration: .25s;
    animation-iteration-count: 4;
    animation-direction: alternate;
    animation-timing-function: ease-in-out
}
.navigation .close-buton-style01 .icon.navigation-close-button {
    border: 2px solid #fff;
    border-radius: 50%;
    padding: 2px;
    margin: 16px
}
.navigation .icon.navigation-close-button {
    border: 2px solid #fff;
    border-radius: 50%;
    padding: 2px;
    margin: 16px
}
.navigation .navigation-back-button {
    display: none
}
.notify .notify-popup.notify-type-prompt {
    background-color: #798e9d;
    color: #ffffff
}
.notify .notify-popup.notify-type-popup {
    background-color: #4d4e53;
    color: #ffffff
}
.theme-nioxin .notify .notify-popup.notify-type-popup {
    background-color: #4d4e53
}
.theme-system-professionals .notify .notify-popup.notify-type-popup {
    background-color: #a7b6bf
}
.theme-know-your-types .notify .notify-popup.notify-type-popup {
    background-color: #9933cc
}
.theme-wella-professionals .notify .notify-popup.notify-type-popup {
    background-color: #b70036
}
.notify .notify-popup a {
    text-decoration: none
}
.notify .notify-popup-inner {
    position: relative;
    max-width: 900px;
    margin: auto;
    padding: 90px 0 70px
}
@media all and (max-width: 920px) {
    .notify .notify-popup-inner {
        padding: 90px 20px 70px
    }
}
@media all and (max-width: 539px) {
    .notify .notify-popup-inner {
        padding: 70px 10px 70px
    }
}
.ie8 .notify .notify-popup-content {
    max-width: 1024px;
    margin: 0 auto
}
.notify .notify-type-prompt .notify-popup-content-inner {
    padding-left: 80px
}
.dir-rtl .notify .notify-type-prompt .notify-popup-content-inner {
    padding-left: inherit;
    padding-right: 80px
}
@media all and (max-width: 758px) {
    .notify .notify-type-prompt .notify-popup-content-inner {
        padding-left: 0
    }
    .dir-rtl .notify .notify-type-prompt .notify-popup-content-inner {
        padding-left: inherit;
        padding-right: 0
    }
}
.notify .notify-popup-title {
    margin-bottom: 20px;
    text-transform: uppercase
}
@media all and (max-width: 758px) {
    .notify .notify-popup-title {
        font-size: 32px
    }
}
.notify .notify-popup-body a {
    text-decoration: underline;
    color: #ffffff
}
.notify .notify-popup-icon .icon {
    font-size: 60px;
    height: 60px;
    width: 60px;
    color: #ffffff;
    margin-bottom: 10px
}
.notify .notify-popup-buttons {
    text-align: center;
    padding-top: 40px
}
.notify .notify-popup-button {
    background-color: #4d4e53;
    color: #ffffff;
    padding: 10px;
    text-decoration: none;
    display: inline-block;
    border: none;
    min-width: 100px;
    -webkit-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    -moz-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    -ms-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 18px;
    line-height: 110%;
    text-transform: uppercase;
    padding-top: 12px;
}
.theme-nioxin .notify .notify-popup-button {
    background-color: #111c24
}
.theme-system-professionals .notify .notify-popup-button {
    background-color: #000
}
.theme-know-your-types .notify .notify-popup-button {
    background-color: #C60240
}
.theme-wella-professionals .notify .notify-popup-button {
    background-color: #b70036
}
.theme-nioxin .notify .notify-popup-button:not(.icon) {
    font-family: 'NewBaskerville-Roman'
}
.no-touch .notify .notify-popup-button:hover {
    background-color: #1c1c1e;
    color: #ffffff
}
.theme-nioxin.no-touch .notify .notify-popup-button:hover {
    background-color: #000
}
.theme-system-professionals.no-touch .notify .notify-popup-button:hover {
    background-color: #000
}
.theme-know-your-types.no-touch .notify .notify-popup-button:hover {
    background-color: #61011f
}
.theme-wella-professionals.no-touch .notify .notify-popup-button:hover {
    background-color: #510018
}
.notify .notify-popup-done {
    padding: 5px;
    margin: 20px 10px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    position: absolute;
    top: 0;
    right: 0
}
.notify .notify-popup-done .notify-popup-icon-close {
    color: #ffffff
}
.no-touch .notify .notify-popup-done:hover {
    -webkit-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    -moz-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    -ms-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    background-color: #4d4e53
}
.theme-nioxin.no-touch .notify .notify-popup-done:hover {
    background-color: #111c24
}
.theme-system-professionals.no-touch .notify .notify-popup-done:hover {
    background-color: #000
}
.theme-know-your-types.no-touch .notify .notify-popup-done:hover {
    background-color: #c60240
}
.theme-wella-professionals.no-touch .notify .notify-popup-done:hover {
    background-color: #b70036
}
.no-touch .notify .notify-popup-done:hover .notify-popup-icon-close {
    -webkit-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    -moz-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    -ms-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in
}
.notify .notify-shadow {
    background-color: rgba(255, 255, 255, 0.8)
}
.no-opacity .notify .notify-shadow {
    background-image: url('assets/transparency-light.png')
}
.theme-wella-professionals .notify .notify-shadow,
.theme-wella-professionals.no-opacity .notify .notify-shadow {
    background-color: #ffffff
}
.notify-push {
    position: fixed;
    top: 80px;
    right: 20px;
    width: 380px;
    background-color: #4d4e53;
    transition: all .3s;
    opacity: 0;
    margin-top: -30px;
    color: #fff;
    z-index: 50;
    border: 1px solid #ffffff;
    border-radius: 3px
}
.theme-nioxin .notify-push {
    background-color: #4d4e53
}
.theme-system-professionals .notify-push {
    background-color: #a7b6bf
}
.theme-know-your-types .notify-push {
    background-color: #9933cc
}
.theme-wella-professionals .notify-push {
    background-color: #b70036
}
.dir-rtl .notify-push {
    left: 20px;
    right: inherit
}
@media all and (max-width: 759px) {
    .notify-push {
        width: 90%;
        max-width: 380px;
        top: 70px;
        right: 5%
    }
    .dir-rtl .notify-push {
        left: 5%;
        right: inherit
    }
}
.notify-push.show {
    margin-top: 0;
    opacity: 1
}
.notify-push-inner {
    padding: 30px 0 30px 30px;
    margin-right: 78px;
    cursor: pointer
}
.dir-rtl .notify-push-inner {
    margin-left: 78px;
    margin-right: inherit;
    padding: 30px 30px 30px 0
}
.notify-push-close {
    display: inline-block;
    position: absolute;
    right: 30px;
    top: 50%;
    margin-top: -12px;
    text-decoration: none
}
.dir-rtl .notify-push-close {
    left: 30px;
    right: inherit
}
.notify-push-close .icon {
    color: #ffffff
}
.no-touch .notify-push-close .icon:hover {
    background-color: #4d4e53
}
.theme-nioxin.no-touch .notify-push-close .icon:hover {
    background-color: #111c24
}
.theme-system-professionals.no-touch .notify-push-close .icon:hover {
    background-color: #000
}
.theme-know-your-types.no-touch .notify-push-close .icon:hover {
    background-color: #c60240
}
.theme-wella-professionals.no-touch .notify-push-close .icon:hover {
    background-color: #b70036
}
.page-header {
    background-image: url('../../course/en/images/hero-image.jpg')
}
@media all and (max-width: 900px) {
    .page-header {
        background-image: url('../../course/en/images/hero-image-tablet.jpg')
    }
}
@media all and (max-width: 519px) {
    .page-header {
        background-image: url('../../course/en/images/hero-image-mobile.jpg')
    }
}
.theme-wella-professionals .page-header-inner {
    position: relative
}
.theme-wella-professionals .page-header-inner:before {
    content: url('../../course/en/images/wella-logo.png');
    position: absolute;
    top: 30px;
    left: 50%;
    margin-left: -58px;
    overflow: visible
}
.page-level-progress-navigation {
    position: relative;
    padding: 26px 50px 26px 20px !important;
    text-decoration: none
}
.page-level-progress-navigation .page-level-progress-navigation-completion {
    height: 8px;
    background-color: #ffffff;
    border: 2px #4d4e53 solid;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 20px;
    overflow: hidden
}
.theme-nioxin .page-level-progress-navigation .page-level-progress-navigation-completion {
    background-color: #ffffff
}
.theme-system-professionals .page-level-progress-navigation .page-level-progress-navigation-completion {
    background-color: #ffffff
}
.theme-know-your-types .page-level-progress-navigation .page-level-progress-navigation-completion {
    background-color: #ffffff
}
.theme-wella-professionals .page-level-progress-navigation .page-level-progress-navigation-completion {
    background-color: #ffffff
}
.theme-nioxin .page-level-progress-navigation .page-level-progress-navigation-completion {
    border: 2px #111c24 solid
}
.theme-system-professionals .page-level-progress-navigation .page-level-progress-navigation-completion {
    border: 2px #000 solid
}
.theme-know-your-types .page-level-progress-navigation .page-level-progress-navigation-completion {
    border: 2px #C60240 solid
}
.theme-wella-professionals .page-level-progress-navigation .page-level-progress-navigation-completion {
    border: 2px #b70036 solid
}
.page-level-progress-navigation .page-level-progress-navigation-bar {
    height: 8px;
    background-color: #4d4e53;
    -webkit-transition: width .6s ease-in;
    -moz-transition: width .6s ease-in;
    -ms-transition: width .6s ease-in;
    transition: width .6s ease-in
}
.theme-nioxin .page-level-progress-navigation .page-level-progress-navigation-bar {
    background-color: #111c24
}
.theme-system-professionals .page-level-progress-navigation .page-level-progress-navigation-bar {
    background-color: #000
}
.theme-know-your-types .page-level-progress-navigation .page-level-progress-navigation-bar {
    background-color: #C60240
}
.theme-wella-professionals .page-level-progress-navigation .page-level-progress-navigation-bar {
    background-color: #b70036
}
.page-level-progress-navigation .page-level-progress-navigation-bar.complete {
    animation-name: pulse;
    animation-duration: .6s;
    animation-delay: .6s;
    animation-iteration-count: 6;
    animation-direction: alternate;
    animation-timing-function: ease-in-out
}
.page-level-progress-navigation .icon-plus {
    position: absolute;
    top: 0;
    right: 0;
    background-color: transparent !important
}
.no-touch .page-level-progress-navigation:hover {
    background-color: #e5e5e5;
    -webkit-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    -moz-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    -ms-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in
}
.no-touch .page-level-progress-navigation:hover .page-level-progress-navigation-completion {
    border: 2px solid #4d4e53
}
.theme-nioxin.no-touch .page-level-progress-navigation:hover .page-level-progress-navigation-completion {
    border: 2px solid #111c24
}
.theme-system-professionals.no-touch .page-level-progress-navigation:hover .page-level-progress-navigation-completion {
    border: 2px solid #000
}
.theme-know-your-types.no-touch .page-level-progress-navigation:hover .page-level-progress-navigation-completion {
    border: 2px solid #c60240
}
.theme-wella-professionals.no-touch .page-level-progress-navigation:hover .page-level-progress-navigation-completion {
    border: 2px solid #b70036
}
.no-touch .page-level-progress-navigation:hover .page-level-progress-navigation-bar {
    background-color: #4d4e53
}
.theme-nioxin .no-touch .page-level-progress-navigation:hover .page-level-progress-navigation-bar {
    background-color: #111c24
}
.theme-system-professionals .no-touch .page-level-progress-navigation:hover .page-level-progress-navigation-bar {
    background-color: #000
}
.theme-know-your-types .no-touch .page-level-progress-navigation:hover .page-level-progress-navigation-bar {
    background-color: #C60240
}
.theme-wella-professionals .no-touch .page-level-progress-navigation:hover .page-level-progress-navigation-bar {
    background-color: #b70036
}
.drawer .page-level-progress .page-level-progress-item .page-level-progress-item-title-inner {
    width: 80%;
    text-transform: uppercase;
    font-size: 18px
}
.drawer .page-level-progress .page-level-progress-item .page-level-progress-indicator {
    width: 15%;
    height: 8px;
    border: 1px solid #ffffff;
    background-color: transparent;
    -webkit-transition: background-color .2s ease-in;
    -moz-transition: background-color .2s ease-in;
    -ms-transition: background-color .2s ease-in;
    transition: background-color .2s ease-in
}
.drawer .page-level-progress .page-level-progress-item .page-level-progress-indicator .page-level-progress-indicator-bar {
    height: 10px
}
.drawer .page-level-progress .page-level-progress-item .page-level-progress-item-title {
    color: #ffffff;
    background-color: #798e9d;
    -webkit-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    -moz-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    -ms-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in
}
.theme-nioxin .drawer .page-level-progress .page-level-progress-item .page-level-progress-item-title {
    background-color: #4d4e53
}
.theme-system-professionals .drawer .page-level-progress .page-level-progress-item .page-level-progress-item-title {
    background-color: #a7b6bf
}
.theme-know-your-types .drawer .page-level-progress .page-level-progress-item .page-level-progress-item-title {
    background-color: #3E3E3E
}
.theme-wella-professionals .drawer .page-level-progress .page-level-progress-item .page-level-progress-item-title {
    background-color: #b70036
}
.no-touch .drawer .page-level-progress .page-level-progress-item .page-level-progress-item-title:hover {
    background-color: #607483;
    color: #ffffff
}
.theme-nioxin.no-touch .drawer .page-level-progress .page-level-progress-item .page-level-progress-item-title:hover {
    background-color: #343539
}
.theme-system-professionals.no-touch .drawer .page-level-progress .page-level-progress-item .page-level-progress-item-title:hover {
    background-color: #899eaa
}
.theme-know-your-types.no-touch .drawer .page-level-progress .page-level-progress-item .page-level-progress-item-title:hover {
    background-color: #252525
}
.theme-wella-professionals.no-touch .drawer .page-level-progress .page-level-progress-item .page-level-progress-item-title:hover {
    background-color: #840027
}
.no-touch .drawer .page-level-progress .page-level-progress-item .page-level-progress-item-title:hover .page-level-progress-indicator {
    border: 1px solid #ffffff
}
.drawer .page-level-progress .page-level-progress-item .page-level-progress-item-title.disabled {
    background-color: #727272;
    color: #ccc;
    cursor: default
}
.drawer .page-level-progress .page-level-progress-item .page-level-progress-item-title.disabled .page-level-progress-indicator {
    border: 1px solid #ccc
}
.no-touch .drawer .page-level-progress .page-level-progress-item .page-level-progress-item-title.disabled:hover {
    background-color: #727272;
    color: #ccc
}
.no-touch .drawer .page-level-progress .page-level-progress-item .page-level-progress-item-title.disabled:hover .page-level-progress-indicator {
    background-color: transparent;
    border: 1px solid #ccc
}
.drawer .page-level-progress .page-level-progress-item .page-level-progress-item-title .page-level-progress-indicator-complete .page-level-progress-indicator-bar {
    background-color: #ffffff;
    -webkit-transition: background-color .2s ease-in;
    -moz-transition: background-color .2s ease-in;
    -ms-transition: background-color .2s ease-in;
    transition: background-color .2s ease-in
}
.no-touch .drawer .page-level-progress .page-level-progress-item .page-level-progress-item-title:hover .page-level-progress-indicator-complete .page-level-progress-indicator-bar {
    background-color: #ccc
}
.page .page-header {
    position: relative;
    background-color: transparent;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover
}
@media all and (max-width: 519px) {
    .page .page-header {
        background-size: 519px
    }
}
@media all and (max-width: 340px) {
    .page .page-header {
        background-size: 340px
    }
}
.page .page-header .page-header-content {
    padding: 100px 0 40px
}
.theme-know-your-types .page .page-header .page-header-content {
    padding: 350px 0 40px
}
@media all and (max-width: 519px) {
    .theme-know-your-types .page .page-header .page-header-content {
        padding-top: 120px
    }
}
.theme-wella-professionals .page .page-header .page-header-content {
    padding: 350px 0 0
}
@media all and (max-width: 340px) {
    .theme-wella-professionals .page .page-header .page-header-content {
        padding-top: 150px
    }
}
.theme-wella-professionals .page .page-header .page-header-content .page-header-content-inner {
    padding: 40px 0 20px
}
.theme-wella-professionals .page .page-header .page-header-content .page-title.bottom-line {
    margin: 10px
}
@media all and (min-width: 519px) {
    .theme-wella-professionals .page .page-header .page-header-content .page-title.bottom-line {
        margin: 15px 10px;
        font-size: 80px
    }
}
.theme-wella-professionals.allergy .page .page-header .page-title.bottom-line {
    color: #4e4c4d;
    margin-top: 50px;
    margin-bottom: 50px
}
.page .page-header .page-header-content-inner {
    text-align: center;
    text-transform: uppercase
}
.theme-wella-professionals.blondor .page .page-header .page-header-content-inner {
    background-color: rgba(96, 123, 150, 0.5)
}
.theme-wella-professionals.magma .page .page-header .page-header-content-inner {
    background-color: rgba(157, 171, 218, 0.5)
}
.theme-wella-professionals.elements .page .page-header .page-header-content-inner {
    background-color: rgba(80, 135, 57, 0.5)
}
.theme-wella-professionals.eimi .page .page-header .page-header-content-inner {
    background-color: rgba(234, 167, 148, 0.5)
}
.theme-wella-professionals.illumina .page .page-header .page-header-content-inner {
    background-color: rgba(72, 52, 79, 0.5)
}
.theme-wella-professionals.koleston-perfect .page .page-header .page-header-content-inner {
    background-color: rgba(205, 84, 119, 0.5)
}
.theme-wella-professionals.care-and-color-fresh .page .page-header .page-header-content-inner {
    background-color: rgba(255, 180, 131, 0.5)
}
.theme-wella-professionals.color-touch .page .page-header .page-header-content-inner {
    background-color: rgba(181, 132, 161, 0.5)
}
.theme-wella-professionals.allergy .page .page-header .page-header-content-inner {
    background-color: rgba(255, 255, 255, 0.7)
}
.page .page-header .page-title {
    margin: 0
}
.theme-nioxin .page .page-header .page-title {
    color: #4d4e53
}
.theme-system-professionals .page .page-header .page-title {
    color: #a7b6bf
}
.theme-know-your-types .page .page-header .page-title {
    color: #ffffff
}
.theme-wella-professionals .page .page-header .page-title {
    color: #ffffff
}
.theme-nioxin .page .page-header .page-title {
    color: #4d4e53
}
.theme-nioxin .page .page-header .page-title .page-title-inner sub,
.theme-nioxin .page .page-header .page-title .page-title-inner sup {
    font-size: 30%
}
.theme-nioxin .page .page-header .page-title.bottom-line {
    margin-bottom: 30px;
    font-family: 'NewBaskerville-Roman';
    font-size: 120px
}
@media all and (max-width: 519px) {
    .theme-nioxin .page .page-header .page-title.bottom-line {
        font-size: 60px
    }
}
.theme-know-your-types .page .page-header .page-title.top-line {
    font-size: 80px
}
@media all and (max-width: 519px) {
    .theme-know-your-types .page .page-header .page-title.top-line {
        font-size: 45px
    }
}
.theme-system-professionals .page .page-header .page-title.top-line {
    margin-top: 300px
}
.theme-system-professionals .page .page-header .page-title.bottom-line {
    margin-top: 30px
}
.theme-nioxin .page .page-header .page-subtitle {
    color: #4d4e53
}
.theme-system-professionals .page .page-header .page-subtitle {
    color: #a7b6bf
}
.theme-know-your-types .page .page-header .page-subtitle {
    color: #ffffff
}
.theme-wella-professionals .page .page-header .page-subtitle {
    color: #ffffff
}
.page .page-header .page-body {
    margin-bottom: 30px
}
.theme-nioxin .page .page-header .page-body {
    color: #4d4e53
}
.theme-system-professionals .page .page-header .page-body {
    color: #a7b6bf
}
.theme-know-your-types .page .page-header .page-body {
    color: #ffffff
}
.theme-wella-professionals .page .page-header .page-body {
    color: #ffffff
}
.page .page-header .page-instruction {
    margin-bottom: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 800;
    line-height: 1.4
}
.theme-nioxin .page .page-header .page-instruction {
    color: #4d4e53
}
.theme-system-professionals .page .page-header .page-instruction {
    color: #a7b6bf
}
.theme-know-your-types .page .page-header .page-instruction {
    color: #ffffff
}
.theme-wella-professionals .page .page-header .page-instruction {
    color: #ffffff
}
.page .page-header .page-header-scroll-button {
    color: #ffffff;
    border: none;
    padding: 15px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    position: relative;
    display: block;
    margin: 30px auto 0;
    text-decoration: none;
    font-size: 25px;
    font-weight: 700;
    -webkit-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    -moz-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    -ms-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in
}
.theme-nioxin .page .page-header .page-header-scroll-button {
    background-color: #b8d1e3
}
.theme-system-professionals .page .page-header .page-header-scroll-button {
    background-color: #a7b6bf
}
.theme-know-your-types .page .page-header .page-header-scroll-button {
    background-color: black
}
.theme-wella-professionals .page .page-header .page-header-scroll-button {
    background-color: #b70036
}
.no-touch .page .page-header .page-header-scroll-button:hover:before {
    display: inline-block;
    animation-name: bouncescrollbutton;
    animation-duration: .25s;
    animation-iteration-count: 4;
    animation-direction: alternate;
    animation-timing-function: ease-in-out
}
.theme-nioxin.no-touch .page .page-header .page-header-scroll-button:hover {
    background-color: #6fa2c6
}
.theme-system-professionals.no-touch .page .page-header .page-header-scroll-button:hover {
    background-color: #6c8594
}
.theme-know-your-types.no-touch .page .page-header .page-header-scroll-button:hover {
    background-color: #000
}
.theme-wella-professionals.no-touch .page .page-header .page-header-scroll-button:hover {
    background-color: #510018
}
.page .page-footer {
    position: relative;
    background-color: transparent;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover
}
.page .page-footer-bottom-border {
    display: none
}
.theme-wella-professionals.blondor .page .page-footer-bottom-border {
    background-color: #607b96
}
.theme-wella-professionals.magma .page .page-footer-bottom-border {
    background-color: #9dabda
}
.theme-wella-professionals.elements .page .page-footer-bottom-border {
    background-color: #85b272
}
.theme-wella-professionals.eimi .page .page-footer-bottom-border {
    background-color: #eaa794
}
.theme-wella-professionals.illumina .page .page-footer-bottom-border {
    background-color: #48344f
}
.theme-wella-professionals.koleston-perfect .page .page-footer-bottom-border {
    background-color: #b70036
}
.theme-wella-professionals.care-and-color-fresh .page .page-footer-bottom-border {
    background-color: #FFB483
}
.theme-wella-professionals.color-touch .page .page-footer-bottom-border {
    background-color: #ffffff
}
.theme-wella-professionals .page .page-footer-bottom-border {
    display: block;
    height: 70px
}
.theme-wella-professionals.allergy .page .page-footer-bottom-border {
    display: none
}
.resources .resources-filter a {
    color: #ffffff;
    border-bottom: 1px solid #6b8292;
    -webkit-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    -moz-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    -ms-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in
}
.theme-nioxin .resources .resources-filter a {
    border-bottom: 1px solid #414246
}
.theme-system-professionals .resources .resources-filter a {
    border-bottom: 1px solid #98aab4
}
.theme-know-your-types .resources .resources-filter a {
    border-bottom: 1px solid #313131
}
.theme-wella-professionals .resources .resources-filter a {
    border-bottom: 1px solid #9e002e
}
.resources .resources-filter a span {
    border: none;
    padding: 15px 0
}
.resources .resources-filter a.selected {
    color: #ffffff;
    background-color: #4d4e53
}
.theme-nioxin .resources .resources-filter a.selected {
    background-color: #4d4e53
}
.theme-system-professionals .resources .resources-filter a.selected {
    background-color: #cad3d9
}
.theme-know-your-types .resources .resources-filter a.selected {
    background-color: pink
}
.theme-wella-professionals .resources .resources-filter a.selected {
    background-color: #b70036
}
.no-touch .resources .resources-filter a:hover {
    color: #ffffff;
    background-color: #607483;
    -webkit-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    -moz-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    -ms-transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in;
    transition: background-color .2s ease-in, color .2s ease-in, border-color .2s ease-in
}
.theme-nioxin.no-touch .resources .resources-filter a:hover {
    background-color: #343539
}
.theme-system-professionals.no-touch .resources .resources-filter a:hover {
    background-color: #899eaa
}
.theme-know-your-types.no-touch .resources .resources-filter a:hover {
    background-color: #252525
}
.theme-wella-professionals.no-touch .resources .resources-filter a:hover {
    background-color: #840027
}
.shadow {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 500;
    background-color: rgba(255, 255, 255, 0.8)
}
.no-opacity .shadow {
    background-image: url('assets/transparency-light.png')
}
.slider-component .slider-scaler {
    background-color: #e5e6e7
}
.slider-component .slider-sliderange {
    background-color: #e5e6e7;
    box-shadow: none
}
.slider-component .slider-handle {
    background-color: #ffffff
}
.no-touch .slider-component .slider-handle:hover {
    background-color: #4d4e53
}
.theme-nioxin .no-touch .slider-component .slider-handle:hover {
    background-color: #4d4e53
}
.theme-system-professionals .no-touch .slider-component .slider-handle:hover {
    background-color: #a7b6bf
}
.theme-know-your-types .no-touch .slider-component .slider-handle:hover {
    background-color: #4d4e53
}
.theme-wella-professionals .no-touch .slider-component .slider-handle:hover {
    background-color: #b70036
}
.slider-component .slider-scale-marker {
    box-shadow: none
}
.slider-component .slider-line {
    background-color: #e5e6e7;
    height: 7px;
    top: 0
}
.slider-component .slider-bar {
    background-color: #343539
}
.theme-nioxin .slider-component .slider-bar {
    background-color: #343539
}
.theme-system-professionals .slider-component .slider-bar {
    background-color: #899eaa
}
.theme-know-your-types .slider-component .slider-bar {
    background-color: #343539
}
.theme-wella-professionals .slider-component .slider-bar {
    background-color: #840027
}
.slider-component .slider-scale-marker {
    background-color: #4d4e53
}
.theme-nioxin .slider-component .slider-scale-marker {
    background-color: #4d4e53
}
.theme-system-professionals .slider-component .slider-scale-marker {
    background-color: #a7b6bf
}
.theme-know-your-types .slider-component .slider-scale-marker {
    background-color: #4d4e53
}
.theme-wella-professionals .slider-component .slider-scale-marker {
    background-color: #b70036
}
.slider-component .slider-outer-bar {
    background-color: none;
    border: none;
    border-top: none;
    border-bottom: none;
    border-radius: none;
    box-shadow: none
}
.slider-component .slider-model-answer {
    box-shadow: none
}
.slider-component .slider-correct-icon {
    color: #82ca9c;
    display: none
}
.slider-component .slider-incorrect-icon {
    color: #f26c4f;
    display: none
}
@media all and (min-width: 759px) {
    ul li {
        list-style-position: outside;
        margin-left: 1em;
        text-align: left;
        margin-left: 30px
    }
}
.textinput-item {
    background-color: #4d4e53;
    position: relative;
    border: 3px #4d4e53 solid;
    margin-bottom: 2px
}
.theme-nioxin .textinput-item {
    background-color: #4d4e53
}
.theme-system-professionals .textinput-item {
    background-color: #a7b6bf
}
.theme-know-your-types .textinput-item {
    background-color: #4d4e53
}
.theme-wella-professionals .textinput-item {
    background-color: #b70036
}
.component-full .textinput-item {
    padding: 1%
}
.component-left .textinput-item,
.component-right .textinput-item {
    padding: 2%
}
.textinput-item label {
    background-color: transparent;
    line-height: 32px;
    padding: 0;
    float: left;
    text-align: center;
    cursor: default;
    color: #ffffff
}
.dir-rtl .textinput-item label {
    float: right
}
.textinput-item-prefix {
    width: 20%
}
.textinput-item-textbox {
    width: 54%;
    height: 28px;
    padding: 0 5px 0 5px;
    float: left
}
.component-full .textinput-item-textbox {
    width: 98%
}
.component-left .textinput-item-textbox,
.component-right .textinput-item-textbox {
    width: 96%
}
.textinput-item-textbox.prefix,
.textinput-item-textbox.suffix {
    width: 60%
}
.dir-rtl .textinput-item-textbox {
    float: right
}
.textinput-item-textbox.textinput-validation-error {
    border: 2px solid #f26c4f
}
.textinput-item-suffix {
    width: 10%
}
.textinput-widget .textinput-correct-icon {
    color: #82ca9c
}
.textinput-widget .textinput-incorrect-icon {
    color: #f26c4f
}
.divider-block {
    background-color: #546e7a;
    color: #ffffff
}
.divider-block .block-title,
.divider-block .block-body,
.divider-block .block-instruction,
.divider-block .component-full .component-title,
.divider-block .component-full .component-body,
.divider-block .component-full .component-instruction {
    color: #ffffff;
    text-align: center
}
.divider-block .narrative-content-inner {
    text-align: left
}
.primary-divider-block {
    background-color: #4d4e53;
    color: #ffffff
}
.theme-nioxin .primary-divider-block {
    background-color: #4d4e53
}
.theme-system-professionals .primary-divider-block {
    background-color: #cad3d9
}
.theme-know-your-types .primary-divider-block {
    background-color: pink
}
.theme-wella-professionals .primary-divider-block {
    background-color: #b70036
}
.primary-divider-block .block-title,
.primary-divider-block .block-body,
.primary-divider-block .block-instruction,
.primary-divider-block .component-full .component-title,
.primary-divider-block .component-full .component-body,
.primary-divider-block .component-full .component-instruction {
    color: #ffffff;
    text-align: center
}
.primary-divider-block .narrative-content-inner {
    text-align: left
}
.trickle-button-component {
    padding-bottom: 60px
}
.trickle-button-component .trickle-button-inner {
    background-color: none;
    padding: 0
}
.trickle-button-component button {
    font-size: 50px;
    color: #ffffff
}
#wrapper {
    width: 100%;
    max-width: 1400px;
    margin: auto;
    overflow-x: hidden;
    padding-top: 64px
}
.ie8 #wrapper {
    max-width: 1024px;
    margin: 0 auto
}