.responsive-layout {
    max-width: 100%;
    margin: 0 auto
}

@media all and (min-width:520px) {
    .responsive-layout {
        max-width: 520px
    }
}

@media all and (min-width:760px) {
    .responsive-layout {
        max-width: 100%
    }
}

@media all and (min-width:960px) {
    .responsive-layout {
        max-width: 960px
    }
}

.visibility-hidden {
    visibility: hidden !important
}

.display-none {
    display: none !important
}

.skip-nav-link {
    background-color: #0075c1;
    border-radius: 0;
    color: #ffffff;
    display: none;
    left: 0;
    margin-top: 0;
    padding: 10px 20px;
    position: absolute;
    top: -46px;
    -webkit-transition: top .2s ease-out;
    transition: top .2s ease-out;
    width: auto;
    z-index: 100
}

.accessibility .skip-nav-link {
    display: inline-block
}

.skip-nav-link:focus {
    top: 0
}

#wrapper {
    padding-top: 40px
}

.drawer {
    position: fixed;
    width: 320px;
    height: 100%;
    top: 0px;
    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 {
    position: fixed;
    top: 0;
    height: 64px;
    z-index: 500;
    width: 100%
}

.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: 0px;
    top: 0px
}

.dir-rtl .notify .notify-popup-icon {
    left: inherit;
    right: 0px
}

@media all and (max-width:759px) {
    .notify .notify-popup-icon .icon {
        float: none;
        margin: 0 auto
    }
}

@media all and (max-width:759px) {
    .notify .notify-popup-icon {
        float: none;
        margin: 0px auto;
        position: static
    }
}

.notify .notify-popup-content {
    max-width: 100%;
    margin: 0 auto
}

@media all and (min-width:520px) {
    .notify .notify-popup-content {
        max-width: 520px
    }
}

@media all and (min-width:760px) {
    .notify .notify-popup-content {
        max-width: 100%
    }
}

@media all and (min-width:960px) {
    .notify .notify-popup-content {
        max-width: 960px
    }
}

.notify .notify-popup-content-inner {
    position: relative
}

.notify .notify-popup-done {
    display: inline-block
}

.notify .notify-shadow {
    display: none;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 549
}

.dir-rtl .notify .notify-shadow {
    left: inherit;
    right: 0px
}

.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: none
}

@media all and (min-width:761px) {
    .component-left {
        width: 50%;
        float: left
    }
}

.component-right {
    width: 100%;
    float: none
}

@media all and (min-width:761px) {
    .component-right {
        width: 50%;
        float: right
    }
}

@media all and (min-width:761px) {
    .dir-rtl .component-left {
        float: right
    }

    .dir-rtl .component-left .component-inner {
        margin-right: inherit
    }
}

@media all and (min-width:761px) {
    .dir-rtl .component-right {
        float: left
    }

    .dir-rtl .component-right .component-inner {
        margin-left: inherit
    }
}

.component {
    position: relative
}

.block {
    position: relative
}

.aria-label {
    position: absolute !important;
    left: 0px !important;
    width: auto !important;
    height: auto !important;
    overflow: auto !important;
    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;
    z-index: 1
}

.aria-label.relative {
    position: relative !important
}

.aria-label.aria-hidden {
    display: none !important
}

.a11y-focusguard {
    left: 0px !important;
    bottom: 0px !important;
    width: auto !important;
    height: auto !important;
    overflow: auto !important;
    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;
    z-index: 1
}

.touchevents .a11y-focusguard {
    position: absolute !important
}

.no-touchevents .a11y-focusguard {
    position: fixed !important
}

#a11y-focuser {
    position: fixed !important;
    left: 0px !important;
    top: 0px !important;
    width: auto !important;
    height: auto !important;
    overflow: auto !important;
    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;
    z-index: 1
}

.a11y-disable-focusoutline *:focus {
    outline: none !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
}

body p {
    margin-top: 18px;
    margin-bottom: 18px
}

zw {
    display: inline-block;
    width: 0
}

nb {
    white-space: nowrap
}

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,
ol li {
    margin-left: 20px
}

.dir-rtl ul li,
.dir-rtl ol 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)
}

html.adapt-scrolling {
    height: 100%;
    overflow: hidden
}

html.adapt-scrolling body,
html.adapt-scrolling #app {
    height: 100%;
    overflow: hidden
}

html.adapt-scrolling .navigation {
    position: relative
}

html.adapt-scrolling #app {
    position: relative;
    height: calc(100% - 64px);
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch
}

html.adapt-scrolling #wrapper {
    padding: 0
}

.accordion-component .accordion-item {
    margin-bottom: 5px
}

.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: #009cde;
    text-decoration: none;
    width: 100%
}

.dir-rtl .accordion-component .accordion-item-title {
    padding-left: inherit;
    padding-right: 64px
}

.accordion-component .accordion-item-title.visited {
    color: #ffffff;
    background-color: #64737a;
    border-color: #64737a
}

.accordion-component .accordion-item-title.visited .accordion-item-title-icon {
    color: #ffffff
}

.accordion-component .accordion-item-title.selected {
    color: #ffffff;
    background-color: #005478;
    border-color: #005478
}

.accordion-component .accordion-item-title.selected .accordion-item-title-icon {
    color: #ffffff
}

.no-touch .accordion-component .accordion-item-title:hover {
    color: #ffffff;
    background-color: #005478;
    border-color: #005478
}

.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;
    background-color: #005478;
    border-color: #005478
}

.no-touch .accordion-component .accordion-item-title.visited:hover .accordion-item-title-icon {
    color: #ffffff
}

.no-touch .accordion-component .accordion-item-title.selected:hover {
    background-color: #005478
}

.accordion-component .accordion-item-body {
    color: #000000;
    background-color: #ffffff;
    display: none
}

.accordion-component .accordion-item-body-inner {
    padding: 20px
}

.accordion-component .accordion-item-graphic {
    padding: 0 0 0
}

.accordion-component .accordion-item-graphic img {
    vertical-align: bottom
}

.accordion-component .graphic-attribution {
    font-size: .75em;
    line-height: 1em
}

.article.article-noheader .article-inner {
    padding-top: 0;
    background-image: none;
    background-position: 0% 0%;
    background-repeat: repeat
}

.results-retry-button {
    margin: 30px 0 30px
}

.assessmentResults-component.visibility-hidden {
    display: none
}

.flipcard-component .flipcard-item {
    position: relative;
    float: left;
    width: 33%;
    -webkit-perspective: 600px;
    -moz-perspective: 600px;
    -ms-perspective: 600px;
    -o-perspective: 600px;
    perspective: 600px
}

html.size-medium .flipcard-component .flipcard-item,
html.size-small .flipcard-component .flipcard-item {
    width: 100%
}

.flipcard-component .flipcard-item .flipcard-item-face {
    position: absolute;
    z-index: 110;
    top: 0;
    left: 0;
    float: none;
    overflow: hidden;
    width: 98%;
    height: 98%;
    margin: 1%;
    cursor: pointer;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden
}

.flipcard-component .flipcard-item .flipcard-item-face.flipcard-item-front {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg)
}

.flipcard-component .flipcard-item .flipcard-item-face.flipcard-item-front .flipcard-item-frontImage {
    width: 100%;
    height: auto
}

.flipcard-component .flipcard-item .flipcard-item-face.flipcard-item-back {
    padding: 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    background-color: #000;
    background-color: #f2f2f2
}

.flipcard-component .flipcard-item .flipcard-item-face.flipcard-item-back .flipcard-item-back-body {
    padding: 0px 00px;
    color: #000000;
    margin-top: 20px
}

@media (max-width:520px) {
    .flipcard-component .flipcard-item .flipcard-item-face.flipcard-item-back .flipcard-item-back-body {
        margin-top: 20px
    }
}

.flipcard-component .flipcard-item .flipcard-item-face .front-item {
    position: absolute;
    text-align: center;
    width: 100%;
    height: 100%
}

.flipcard-component .flipcard-item .flipcard-item-face .front-item .front-body-title {
    position: absolute;
    top: 44%;
    left: 0px;
    right: 0px;
    color: #000000;
    font-size: 3em
}

@media (max-width:519px) {
    .flipcard-component .flipcard-item .flipcard-item-face .front-item .front-body-title {
        top: 25%
    }
}

@media (max-width:519px) {
    .flipcard-component .flipcard-item .flipcard-item-face .front-item .front-body-title {
        margin-top: 0px
    }
}

.flipcard-component .flipcard-item.flipcard-flip .flipcard-item-front {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg)
}

.flipcard-component .flipcard-item.flipcard-flip .flipcard-item-back {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg)
}

.flipcard-item-back-title {
    font-size: 20px;
    font-weight: bold
}

@media (max-width:519px) {
    .flipcard-item-back-title {
        margin-top: 0%
    }
}

.gmcq-component.gmcq-column-layout .gmcq-widget {
    font-size: 0;
    text-align: center
}

.gmcq-component.gmcq-column-layout .gmcq-item {
    display: inline-block;
    float: none;
    vertical-align: top
}

.dir-rtl .gmcq-component.gmcq-column-layout .gmcq-item {
    float: none
}

.gmcq-component.gmcq-column-layout .gmcq-item.even label,
.gmcq-component.gmcq-column-layout .gmcq-item.odd label {
    margin: 2.5%
}

.dir-rtl .gmcq-component.gmcq-column-layout .gmcq-item.even label,
.dir-rtl .gmcq-component.gmcq-column-layout .gmcq-item.odd label {
    margin: 2.5%
}

.gmcq-component.gmcq-column-layout .gmcq-item-inner {
    font-size: 18px;
    text-align: left
}

.dir-rtl .gmcq-component.gmcq-column-layout .gmcq-item-inner {
    text-align: right
}

.gmcq-component .gmcq-item {
    position: relative;
    width: 50%;
    margin-bottom: 5px;
    float: left
}

.dir-rtl .gmcq-component .gmcq-item {
    float: right
}

.gmcq-component .gmcq-item.even label {
    margin-left: 5%
}

.dir-rtl .gmcq-component .gmcq-item.even label {
    margin-left: inherit;
    margin-right: 5%
}

.gmcq-component .gmcq-item.odd label {
    margin-right: 5%
}

.dir-rtl .gmcq-component .gmcq-item.odd label {
    margin-right: inherit;
    margin-left: 5%
}

@media all and (max-width:760px) {
    .gmcq-component .gmcq-item {
        width: 100%
    }

    .gmcq-component .gmcq-item.even label,
    .gmcq-component .gmcq-item.odd label {
        margin-left: 0%;
        margin-right: 0%
    }
}

.gmcq-component .gmcq-item label {
    color: #ffffff;
    display: block;
    border: 3px solid #009cde;
    margin-bottom: 5px;
    position: relative;
    z-index: 1;
    background-color: #009cde;
    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: #005478
}

.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 #009cde;
    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;
    left: 25px
}

.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 .incorrect .selected .gmcq-correct-icon,
.gmcq-component .gmcq-widget.show-correct-answer .correct .selected .gmcq-correct-icon {
    display: block
}

.gmcq-component .gmcq-widget.disabled .gmcq-item label.selected.disabled {
    background-color: #005478;
    cursor: default
}

.gmcq-component .gmcq-widget.disabled .gmcq-item label.disabled {
    color: #ffffff;
    background-color: #ababab;
    border-color: #ababab;
    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
}

.gmcq-component .graphic-attribution {
    font-size: .75em;
    line-height: 1em
}

.no-touch .gmcq-component .gmcq-widget:not(.disabled) .gmcq-item label:hover {
    color: #ffffff;
    background-color: #005478
}

.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
}

.hotgraphic-component .hotgraphic-graphic {
    position: relative;
    display: inline-block;
    width: 100%
}

.hotgraphic-component .hotgraphic-graphic-pin {
    display: block;
    position: absolute;
    top: 0%;
    left: 0%;
    background-color: #ffffff;
    border-radius: 50%;
    text-decoration: none
}

.hotgraphic-component .hotgraphic-graphic-pin.has-pin-image {
    background-color: transparent !important;
    border-radius: 0;
    line-height: 0
}

.hotgraphic-component .hotgraphic-graphic-pin.visited {
    background-color: #d4e9d1
}

.hotgraphic-component .hotgraphic-graphic-pin.visited .hotgraphic-graphic-pin-icon {
    color: #64737a
}

.no-touch .hotgraphic-component .hotgraphic-graphic-pin:hover .hotgraphic-graphic-pin-icon {
    color: #005478
}

.hotgraphic-component .hotgraphic-graphic-pin-icon {
    color: #009cde;
    font-size: 48px;
    height: 48px;
    width: 48px
}

.hotgraphic-component .hotgraphic-popup {
    display: none;
    margin: 0;
    padding: 10px;
    position: relative;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: none;
    background-color: rgba(0, 0, 0, 0.01) !important
}

.hotgraphic-component .hotgraphic-popup-toolbar {
    position: relative
}

.hotgraphic-component .hotgraphic-popup-nav {
    display: none
}

.hotgraphic-component .hotgraphic-popup-done {
    display: none;
    position: absolute;
    top: -10px;
    right: -10px;
    z-index: 11;
    text-decoration: none
}

.dir-rtl .hotgraphic-component .hotgraphic-popup-done {
    right: inherit;
    left: 0
}

.no-touch .hotgraphic-component .hotgraphic-popup-done:hover .hotgraphic-popup-close {
    color: #ffffff
}

.hotgraphic-component .hotgraphic-popup-arrow-l,
.hotgraphic-component .hotgraphic-popup-arrow-r,
.hotgraphic-component .hotgraphic-popup-close {
    padding: 6px;
    color: #ffffff;
    background: red;
    border-radius: 50%
}

.hotgraphic-component .hotgraphic-popup-count {
    padding: 20px;
    vertical-align: baseline;
    color: #ffffff;
    float: left
}

.dir-rtl .hotgraphic-component .hotgraphic-popup-count {
    float: right
}

.hotgraphic-component .hotgraphic-popup-count span {
    display: inline-block
}

.hotgraphic-component .hotgraphic-popup-controls {
    float: left;
    text-decoration: none
}

.dir-rtl .hotgraphic-component .hotgraphic-popup-controls {
    float: right
}

.no-touch .hotgraphic-component .hotgraphic-popup-controls:hover .hotgraphic-popup-arrow-l,
.no-touch .hotgraphic-component .hotgraphic-popup-controls:hover .hotgraphic-popup-arrow-r {
    color: #ffffff
}

.hotgraphic-component .hotgraphic-popup-controls.disabled {
    visibility: hidden
}

.hotgraphic-component .hotgraphic-popup-inner {
    width: 90%;
    max-height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow: auto;
    background-color: #d4e9d1;
    border-radius: 0px;
    color: #000137;
    z-index: 1;
    position: relative;
    margin: 0 auto;
    display: block
}

.hotgraphic-component .hotgraphic-item-graphic {
    display: none
}

.hotgraphic-component .hotgraphic-item-content {
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box
}

.dir-rtl .hotgraphic-component .hotgraphic-item-content {
    float: right
}

.hotgraphic-item:not(.active) {
    display: none
}

.notify.hotgraphic .notify-popup {
    max-width: 900px;
    left: 50%;
    transform: translateX(-50%);
    background-color: transparent;
    color: #000000
}

.notify.hotgraphic .notify-popup .notify-popup-inner {
    padding: 0
}

.notify.hotgraphic .notify-popup .notify-popup-content {
    width: auto
}

.notify.hotgraphic .notify-popup-content-inner .hotgraphic-popup {
    width: auto;
    height: auto;
    background-color: #ffffff;
    border: 3px solid #009cde;
    z-index: 5;
    position: relative;
    padding-top: 64px
}

.notify.hotgraphic .notify-popup-content-inner .hotgraphic-popup-toolbar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #009cde;
    height: 64px
}

.notify.hotgraphic .notify-popup-content-inner .hotgraphic-popup-nav {
    background-color: #009cde
}

.notify.hotgraphic .notify-popup-content-inner .hotgraphic-popup-done {
    position: absolute;
    top: 0;
    right: 0;
    text-decoration: none
}

.dir-rtl .notify.hotgraphic .notify-popup-content-inner .hotgraphic-popup-done {
    right: inherit;
    left: 0
}

.no-touch .notify.hotgraphic .notify-popup-content-inner .hotgraphic-popup-done:hover .hotgraphic-popup-close {
    color: #ffffff
}

.notify.hotgraphic .notify-popup-content-inner .hotgraphic-popup-arrow-l,
.notify.hotgraphic .notify-popup-content-inner .hotgraphic-popup-arrow-r,
.notify.hotgraphic .notify-popup-content-inner .hotgraphic-popup-close {
    padding: 20px;
    color: #ffffff
}

.notify.hotgraphic .notify-popup-content-inner .hotgraphic-popup-count {
    padding: 20px;
    vertical-align: baseline;
    color: #ffffff;
    float: left
}

.dir-rtl .notify.hotgraphic .notify-popup-content-inner .hotgraphic-popup-count {
    float: right
}

.notify.hotgraphic .notify-popup-content-inner .hotgraphic-popup-count span {
    display: inline-block
}

.notify.hotgraphic .notify-popup-content-inner .hotgraphic-popup-controls {
    float: left;
    text-decoration: none
}

.dir-rtl .notify.hotgraphic .notify-popup-content-inner .hotgraphic-popup-controls {
    float: right
}

.no-touch .notify.hotgraphic .notify-popup-content-inner .hotgraphic-popup-controls:hover .hotgraphic-popup-arrow-l,
.no-touch .notify.hotgraphic .notify-popup-content-inner .hotgraphic-popup-controls:hover .hotgraphic-popup-arrow-r {
    color: #ffffff
}

.notify.hotgraphic .notify-popup-content-inner .hotgraphic-popup-controls.disabled {
    visibility: hidden
}

.notify.hotgraphic .notify-popup-content-inner .hotgraphic-popup-inner {
    padding: 20px
}

.notify.hotgraphic .notify-popup-content-inner .hotgraphic-item-graphic {
    padding-left: 20px;
    width: 50%;
    box-sizing: border-box;
    float: right;
    text-align: center
}

.dir-rtl .notify.hotgraphic .notify-popup-content-inner .hotgraphic-item-graphic {
    float: left
}

.notify.hotgraphic .notify-popup-content-inner .hotgraphic-item-graphic-inner img {
    display: block
}

.dir-rtl .notify.hotgraphic .notify-popup-content-inner .hotgraphic-item-graphic-inner {
    padding-left: inherit;
    padding-right: 20px
}

.notify.hotgraphic .notify-popup-content-inner .hotgraphic-item-content {
    width: 50%;
    float: left
}

.dir-rtl .notify.hotgraphic .notify-popup-content-inner .hotgraphic-item-content {
    float: right
}

.notify.hotgraphic .notify-popup-content-inner .graphic-attribution {
    font-size: .75em;
    line-height: 1em;
    padding-top: .5em
}

.hotgraphic-narrative {
    position: relative;
    max-height: 500px;
    height: 500px
}

.hotgraphic-narrative .hotgraphic-graphic-pin {
    border-radius: 0px;
    position: absolute;
    display: block;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 4px solid #ffffff;
    background-size: cover;
    transition: background-size .4s;
    overflow: hidden
}

.hotgraphic-narrative .hotgraphic-graphic-pin .hotgraphic-graphic-pin-image {
    display: block;
    width: auto;
    height: 100%;
    -webkit-transition: transform .4s;
    transition: transform .4s;
    background-size: cover
}

.hotgraphic-narrative .hotgraphic-graphic-pin .hotgraphic-graphic-pin-image:before {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    transition: background .5s
}

.hotgraphic-narrative .hotgraphic-graphic-pin:hover .hotgraphic-graphic-pin-image {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

.hotgraphic-narrative .hotgraphic-graphic-pin:hover .hotgraphic-graphic-pin-image:before {
    background: rgba(0, 0, 0, 0)
}

.cols-1 {
    width: 25%
}

.cols-2 {
    width: 50%
}

.cols-3 {
    width: 75%
}

.cols-4 {
    width: 100%
}

.rows-1 {
    height: 50%
}

.rows-2 {
    height: 100%
}

.dropdown button {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    border-radius: 0;
    text-align: inherit;
    width: 100%;
    position: relative;
    background-color: #009cde;
    color: #ffffff;
    border: 0;
    outline: 0;
    padding: 10px 0 10px 0
}

.dropdown button:disabled,
.dropdown button[disabled] {
    background-color: #ababab;
    border-color: #ababab;
    color: #fff;
    cursor: default
}

.no-touch .dropdown button:disabled:hover,
.no-touch .dropdown button[disabled]:hover {
    border-color: #ababab
}

.dropdown .dropdown__arrow .icon {
    content: " ";
    border-style: solid;
    height: 0;
    right: 16px;
    margin-left: -4px;
    margin-top: -2px;
    position: absolute;
    top: 50%;
    width: 0;
    border-width: 5px 4px 0 4px;
    border-color: #ffffff transparent transparent transparent
}

.dir-rtl .dropdown .dropdown__arrow .icon {
    right: inherit;
    left: 16px;
    margin-left: inherit;
    margin-right: -4px
}

.dropdown:disabled .dropdown__arrow,
.dropdown[disabled] .dropdown__arrow {
    display: none
}

.dropdown button[aria-expanded="true"] .dropdown__arrow .icon {
    border-width: 0 4px 5px 4px;
    border-color: transparent transparent #ffffff transparent
}

.dropdown .dropdown__inner {
    display: inline-block;
    box-sizing: border-box;
    width: 100%;
    padding: 0 40px 0 20px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-size: 16px
}

.dir-rtl .dropdown .dropdown__inner {
    padding: 0 20px 0 40px
}

.dropdown ul {
    color: black;
    position: absolute;
    box-sizing: border-box;
    overflow-y: auto;
    max-height: 50vh;
    width: 100%;
    z-index: 5000
}

.dropdown ul.hidden {
    display: none
}

.dropdown ul.sizing {
    visibility: hidden
}

.dropdown li {
    cursor: pointer;
    margin: 0;
    list-style: none;
    padding: 10px 0;
    background-color: #009cde;
    color: #ffffff;
    font-size: 16px
}

.dropdown li span {
    display: inline-block;
    padding: 0 20px
}

.dropdown li:hover,
.dropdown li:focus,
.dropdown li[aria-selected=true] {
    background-color: #005478;
    color: #ffffff
}

.matching-component ul {
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff
}

.matching-component .matching-item {
    padding-bottom: 20px
}

.matching-component .matching-item-title {
    margin-bottom: 5px
}

.matching-component .matching-select-container {
    position: relative;
    background-color: #009cde
}

.matching-component .matching-select-container.error {
    box-shadow: 0 0 0 1px #f26c4f
}

.matching-component .matching-select-state {
    position: absolute;
    width: 24px;
    height: 24px;
    top: 50%;
    margin-top: -12px;
    right: 10px;
    background: none
}

.dir-rtl .matching-component .matching-select-state {
    right: inherit;
    left: 10px
}

.matching-component .matching-select-state .matching-select-icon {
    color: #ffffff
}

.matching-component .matching-select-state .matching-correct-icon {
    color: #82ca9c;
    display: none
}

.matching-component .matching-select-state .matching-incorrect-icon {
    color: #f26c4f;
    display: none
}

.matching-component .matching-widget.submitted .matching-select {
    cursor: default
}

.matching-component .matching-widget.submitted .matching-select-container {
    background-color: #ababab
}

.matching-component .matching-widget.submitted .matching-select-state {
    z-index: 1
}

.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 .incorrect .matching-correct-icon,
.matching-component .matching-widget.show-correct-answer .correct .matching-correct-icon {
    display: block
}

.no-touch .matching-select-container:hover {
    color: #ffffff;
    background-color: #005478
}

.mcq-component .mcq-item {
    background-color: #009cde;
    position: relative
}

.mcq-component .mcq-item label {
    color: #ffffff;
    display: block;
    margin-bottom: 2px;
    position: relative;
    z-index: 1;
    background-color: #009cde;
    cursor: pointer
}

.mcq-component .mcq-item label .mcq-answer-icon {
    color: #009cde
}

.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: #ffffff;
    background-color: #005478;
    border-color: #005478
}

.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 #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"
}

.mcq-component .mcq-item label.selected .mcq-item-icon {
    color: #ffffff
}

.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;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"
}

.dir-rtl .mcq-component .mcq-item input {
    left: inherit;
    right: 14px
}

.mcq-component .mcq-correct-icon {
    color: #82ca9c;
    display: none
}

.mcq-component .mcq-incorrect-icon {
    color: #f26c4f;
    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 .incorrect .selected .mcq-correct-icon,
.mcq-widget.show-correct-answer .correct .selected .mcq-correct-icon {
    display: block
}

.mcq-widget.disabled .mcq-item label.selected.disabled {
    color: #ffffff;
    background-color: #005478;
    border-color: #005478;
    cursor: default
}

.mcq-widget.disabled .mcq-item label.disabled {
    color: #ffffff;
    background-color: #ababab;
    border-color: #ababab;
    cursor: default
}

.mcq-widget.disabled .mcq-item.correct .selected .state {
    color: #82ca9c
}

.mcq-widget.disabled .mcq-item.incorrect .selected .state {
    color: #f26c4f
}

.no-touch .mcq-widget:not(.disabled) .mcq-item label:hover {
    color: #ffffff;
    background-color: #005478;
    border-color: #005478
}

.no-touch .mcq-widget:not(.disabled) .mcq-item label:hover .mcq-item-icon {
    color: #009cde
}

.no-touch .mcq-widget:not(.disabled) .mcq-item label.disabled {
    color: #ffffff;
    background-color: #ababab;
    border-color: #ababab
}

.no-touch .mcq-widget:not(.disabled) .mcq-item label.disabled:hover {
    color: #ffffff;
    background-color: #ababab;
    border-color: #ababab
}

.no-touch .mcq-widget:not(.disabled) .mcq-item label.disabled .mcq-item-icon {
    color: #ffffff
}

.media-component .me-plugin {
    position: relative;
    width: 100%;
    height: 100% !important
}

.media-component .me-plugin object {
    height: 100% !important;
    width: 100% !important
}

.media-component .me-plugin embed {
    height: 100% !important;
    width: 100% !important
}

.media-component .media-widget.video-vimeo .mejs-controls {
    display: none !important;
    height: 0px !important
}

.media-component .media-widget.video-vimeo .mejs-overlay-play {
    display: none !important
}

.media-component .mejs-container {
    background-color: transparent;
    width: 100% !important
}

.media-component .mejs-container .mejs-controls .mejs-time {
    padding-right: 1px;
    padding-left: 1px
}

.media-component .audio-poster {
    display: block;
    margin: 0 auto
}

.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: #0075c1;
    text-decoration: none
}

.media-component .media-transcript:hover {
    color: #ffffff;
    background-color: #00568e
}

.media-component .media-inline-transcript-body-container {
    margin-top: 10px;
    display: none
}

.media-component .media-inline-transcript-body {
    padding: 20px
}

.media-component .media-transcript-button-container {
    padding: 1px
}

.media-component .media-external-transcript-button,
.media-component .media-inline-transcript-button {
    width: 100%;
    display: block
}

.media-component .mejs-overlay:hover .mejs-overlay-button {
    background-position: 0 0
}

.no-touch .media-component .mejs-overlay:hover .mejs-overlay-button {
    background-position: 0 -100px
}

.media-component .mejs-overlay-button {
    background-image: url(assets/bigplay.svg)
}

.media-component .no-svg .mejs-overlay-button {
    background-image: url(assets/bigplay.png)
}

.media-component .mejs-overlay-loading,
.media-component .mejs-container .mejs-controls,
.media-component .mejs-controls .mejs-volume-button .mejs-volume-slider,
.media-component .mejs-controls .mejs-captions-button .mejs-captions-selector,
.media-component .mejs-captions-text,
.media-component .mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector,
.media-component .mejs-postroll-layer,
.media-component .mejs-postroll-close,
.media-component .mejs-controls .mejs-speed-button .mejs-speed-selector {
    background-image: url(assets/background.png)
}

.media-component .mejs-overlay-loading span {
    background-image: url(assets/loading.gif)
}

.media-component .mejs-controls .mejs-button.mejs-jump-forward-button {
    background-image: url(assets/jumpforward.png)
}

.media-component .mejs-controls .mejs-button.mejs-skip-back-button {
    background-image: url(assets/skipback.png)
}

.media-component .mejs-controls .mejs-button button {
    background-image: url(assets/controls.svg)
}

.media-component .no-svg .mejs-controls .mejs-button button {
    background-image: url(assets/controls.png)
}

.media-component .mejs-container-fullscreen .mejs-mediaelement,
.media-component .mejs-container-fullscreen video {
    width: 100% !important;
    height: 100% !important;
    background-color: black
}

.media-component .mejs-offscreen {
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0)
}

.media-component.toggle-captions .mejs-captions-selector {
    display: none !important
}

.media-top-padding {
    padding-top: 4em
}

.mejs-offscreen {
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden
}

.mejs-container {
    position: relative;
    background: #000;
    font-family: Helvetica, Arial;
    text-align: left;
    vertical-align: top;
    text-indent: 0
}

.mejs-container:focus {
    outline: none
}

.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(bigplay.svg) no-repeat
}

.no-svg .mejs-overlay-button {
    background-image: url(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(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(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(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(controls.svg) no-repeat
}

.no-svg .mejs-controls .mejs-button button {
    background-image: url(controls.png)
}

.mejs-controls .mejs-button button:focus {
    outline: dotted 1px #999
}

.mejs-container .mejs-controls .mejs-time {
    color: #fff;
    display: block;
    height: 17px;
    width: auto;
    padding: 10px 3px 0 3px;
    overflow: hidden;
    text-align: center;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box
}

.mejs-container .mejs-controls .mejs-time a {
    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,
.mejs-controls .mejs-time-rail a {
    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(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 a.mejs-horizontal-volume-slider {
    height: 26px;
    width: 56px;
    position: relative;
    display: block;
    float: left;
    vertical-align: middle
}

.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-controls .mejs-captions-button .mejs-captions-selector {
    visibility: hidden;
    position: absolute;
    bottom: 26px;
    right: -51px;
    width: 85px;
    height: 100px;
    background: url(background.png);
    background: rgba(50, 50, 50, 0.7);
    border: solid 1px transparent;
    padding: 10px 10px 0 10px;
    overflow: hidden;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0
}

.mejs-controls .mejs-captions-button:hover .mejs-captions-selector {
    visibility: visible
}

.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: 55px;
    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: 20px;
    font-size: 16px;
    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: 35px
}

.mejs-captions-text {
    padding: 3px 5px;
    background: url(background.png);
    background: rgba(20, 20, 20, 0.5);
    white-space: pre-wrap
}

.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-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector {
    visibility: hidden;
    position: absolute;
    bottom: 26px;
    right: -10px;
    width: 130px;
    height: 100px;
    background: url(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(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(background.png);
    background: rgba(50, 50, 50, 0.7);
    color: #fff;
    padding: 4px;
    z-index: 100;
    cursor: pointer
}

div.mejs-speed-button {
    width: 46px !important;
    position: relative
}

.mejs-controls .mejs-button.mejs-speed-button button {
    background: transparent;
    width: 36px;
    font-size: 11px;
    line-height: normal;
    color: #ffffff
}

.mejs-controls .mejs-speed-button .mejs-speed-selector {
    display: none;
    position: absolute;
    top: -100px;
    left: -10px;
    width: 60px;
    height: 100px;
    background: url(background.png);
    background: rgba(50, 50, 50, 0.7);
    border: solid 1px transparent;
    padding: 0;
    overflow: hidden;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0
}

.mejs-controls .mejs-speed-button:hover>.mejs-speed-selector {
    display: block
}

.mejs-controls .mejs-speed-button .mejs-speed-selector ul li label.mejs-speed-selected {
    color: #21f8f8
}

.mejs-controls .mejs-speed-button .mejs-speed-selector ul {
    margin: 0;
    padding: 0;
    display: block;
    list-style-type: none !important;
    overflow: hidden
}

.mejs-controls .mejs-speed-button .mejs-speed-selector ul li {
    margin: 0 0 6px 0;
    padding: 0 10px;
    list-style-type: none !important;
    display: block;
    color: #fff;
    overflow: hidden
}

.mejs-controls .mejs-speed-button .mejs-speed-selector ul li input {
    clear: both;
    float: left;
    margin: 3px 3px 0 5px;
    display: none
}

.mejs-controls .mejs-speed-button .mejs-speed-selector ul li label {
    width: 60px;
    float: left;
    padding: 4px 0 0 0;
    line-height: 15px;
    font-family: helvetica, arial;
    font-size: 11.5px;
    color: white;
    margin-left: 5px;
    cursor: pointer
}

.mejs-controls .mejs-speed-button .mejs-speed-selector ul li:hover {
    background-color: #c8c8c8 !important;
    background-color: rgba(255, 255, 255, 0.4) !important
}

.mejs-controls .mejs-button.mejs-jump-forward-button {
    background: transparent url(jumpforward.png) no-repeat;
    background-position: 3px 3px
}

.mejs-controls .mejs-button.mejs-jump-forward-button button {
    background: transparent;
    font-size: 9px;
    line-height: normal;
    color: #ffffff
}

.mejs-controls .mejs-button.mejs-skip-back-button {
    background: transparent url(skipback.png) no-repeat;
    background-position: 3px 3px
}

.mejs-controls .mejs-button.mejs-skip-back-button button {
    background: transparent;
    font-size: 9px;
    line-height: normal;
    color: #ffffff
}

.mode-large.narrative-component .narrative-slide-container {
    width: 60%;
    margin-right: 3%;
    float: left
}

.dir-rtl .mode-large.narrative-component .narrative-slide-container {
    margin-right: inherit;
    margin-left: 3%;
    float: right
}

.mode-large.narrative-component .narrative-slider-graphic {
    margin-right: 0;
    width: 60%
}

.mode-large.narrative-component .narrative-strapline {
    display: none
}

.mode-large.narrative-component .narrative-content-inner .narrative-controls {
    position: static;
    display: none;
    margin-top: 0px;
    margin-bottom: 10px;
    width: auto;
    height: auto;
    padding: 8px
}

.mode-large.narrative-component .narrative-content-inner .narrative-controls .icon {
    margin: 0px
}

.mode-large.narrative-component .narrative-content-inner .narrative-indicators {
    display: none;
    position: relative;
    top: -4px
}

.mode-large.narrative-component .narrative-content-inner .narrative-progress {
    background-color: #009cde
}

.mode-large.narrative-component .narrative-content-inner .narrative-progress.selected {
    background-color: #005478
}

.mode-large.narrative-component .narrative-content-inner .narrative-content-item.narrative-hidden {
    display: none
}

.mode-large.narrative-component .narrative-text-controls .narrative-content-inner {
    position: relative
}

.mode-large.narrative-component .narrative-text-controls .narrative-content-inner .narrative-controls-container {
    position: absolute;
    width: 100%;
    left: 0px;
    top: 10px;
    display: block
}

.mode-large.narrative-component .narrative-text-controls .narrative-content-inner .narrative-controls {
    margin-bottom: 0px;
    display: inline-block
}

.mode-large.narrative-component .narrative-text-controls .narrative-content-inner .narrative-controls.narrative-hidden {
    visibility: hidden
}

.mode-large.narrative-component .narrative-text-controls .narrative-content-inner .narrative-control-left {
    float: left
}

.mode-large.narrative-component .narrative-text-controls .narrative-content-inner .narrative-control-right {
    float: right
}

.mode-large.narrative-component .narrative-text-controls .narrative-content-inner .narrative-indicators {
    display: inline-block;
    width: auto;
    position: absolute;
    margin-top: 10px;
    top: 0px;
    left: 50%
}

.mode-large.narrative-component .narrative-text-controls .narrative-slide-container .narrative-controls {
    display: none
}

.mode-large.narrative-component .narrative-text-controls .narrative-slide-container .narrative-indicators {
    display: none
}

.narrative-component .narrative-content {
    width: 36%;
    background-color: #009cde;
    color: #ffffff;
    float: right
}

.dir-rtl .narrative-component .narrative-content {
    float: left
}

.narrative-component .narrative-content-inner {
    padding: 20px
}

.narrative-component.mode-small .narrative-content {
    display: none
}

.narrative-component .narrative-slide-container {
    width: 100%;
    position: relative;
    overflow: hidden;
    float: left
}

.dir-rtl .narrative-component .narrative-slide-container {
    float: right
}

.narrative-component .narrative-slider-graphic {
    position: relative;
    float: left
}

.dir-rtl .narrative-component .narrative-slider-graphic {
    float: right
}

.narrative-component .narrative-indicators {
    text-align: center
}

.narrative-component .narrative-progress {
    width: 12px;
    height: 12px;
    display: inline-block;
    margin: 1px;
    border: inherit;
    border-radius: 50%;
    background-color: #ccc;
    cursor: pointer
}

.narrative-component .narrative-progress.selected {
    background-color: #009cde
}

.narrative-component .narrative-controls {
    display: block;
    width: 48px;
    height: 48px;
    position: absolute;
    top: 50%;
    margin-top: -48px;
    z-index: 10;
    text-decoration: none;
    background-color: #009cde
}

.no-touch .narrative-component .narrative-controls:hover {
    background-color: #005478
}

.no-touch .narrative-component .narrative-controls:hover .icon {
    color: #ffffff
}

.narrative-component .narrative-controls .icon {
    margin: 12px;
    color: #ffffff
}

.narrative-component .narrative-controls.narrative-hidden {
    visibility: hidden
}

.narrative-component .narrative-control-left {
    left: 0
}

.dir-rtl .narrative-component .narrative-control-left {
    left: inherit;
    right: 0
}

.narrative-component .narrative-control-right {
    right: 0
}

.dir-rtl .narrative-component .narrative-control-right {
    left: 0;
    right: inherit
}

.narrative-component .narrative-strapline {
    height: auto;
    position: relative
}

.narrative-component .narrative-strapline-header {
    overflow: hidden;
    position: relative
}

.narrative-component .narrative-strapline-header-inner {
    position: relative
}

.narrative-component .narrative-strapline-title {
    position: relative;
    float: left;
    text-decoration: none;
    background-color: #0075c1;
    color: #ffffff;
    overflow: hidden;
    min-height: 64px
}

.dir-rtl .narrative-component .narrative-strapline-title {
    float: right
}

.narrative-component .narrative-strapline-title .icon {
    display: block;
    position: absolute;
    top: 0;
    right: 0
}

.dir-rtl .narrative-component .narrative-strapline-title .icon {
    right: inherit;
    left: 0
}

.no-touch .narrative-component .narrative-strapline-title:hover {
    background-color: #00568e;
    color: #ffffff
}

.no-touch .narrative-component .narrative-strapline-title:hover .icon {
    color: #ffffff
}

.narrative-component .narrative-strapline-title .focus-rect {
    position: absolute;
    right: 0;
    bottom: 0;
    top: 0;
    left: 0
}

.narrative-component .narrative-strapline-title-inner {
    padding-left: 12px;
    padding-right: 64px;
    padding-top: 10px;
    padding-bottom: 10px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    vertical-align: middle
}

.dir-rtl .narrative-component .narrative-strapline-title-inner {
    padding-right: 12px;
    padding-left: 64px
}

.narrative-component .narrative-popup-open {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    padding: 20px;
    background-color: #546e7a;
    text-decoration: none;
    z-index: 5
}

.dir-rtl .narrative-component .narrative-popup-open {
    right: inherit;
    left: 0
}

.narrative-component .narrative-popup-open .icon {
    color: #ffffff
}

.no-touch .narrative-component .narrative-popup-open .icon:hover {
    color: #a6b9c1
}

.narrative-component .graphic-attribution {
    font-size: .75em;
    line-height: 1em
}

.narrative-component .narrative-hidden {
    visibility: hidden
}

.narrative-component:not(.disable-animation) .narrative-slider,
.narrative-component:not(.disable-animation) .narrative-strapline-header-inner {
    transition: transform 400ms ease-in-out
}

.rangeslider,
.rangeslider__fill {
    display: block;
    -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px
}

.rangeslider {
    background: #e6e6e6;
    position: relative
}

.rangeslider--horizontal {
    height: 20px;
    width: 100%
}

.rangeslider--vertical {
    width: 20px;
    min-height: 150px;
    max-height: 100%;
    height: 100%
}

.rangeslider__rtl {
    direction: rtl
}

.rangeslider__ttb {
    top: 0
}

.rangeslider--disabled {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
    opacity: .4
}

.rangeslider__fill {
    background: #00ff00;
    position: absolute
}

.rangeslider--horizontal .rangeslider__fill {
    top: 0;
    height: 100%
}

.rangeslider--vertical .rangeslider__fill {
    bottom: 0;
    width: 100%
}

.rangeslider__handle {
    background: white;
    border: 1px solid #ccc;
    cursor: pointer;
    display: inline-block;
    width: 40px;
    height: 40px;
    position: absolute;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4xIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
    background-size: 100%;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(0, 0, 0, 0.1)));
    background-image: -moz-linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
    background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
    background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
    -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%
}

.rangeslider__handle:after {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjEzIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background-size: 100%;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.13)), color-stop(100%, rgba(255, 255, 255, 0)));
    background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0));
    background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0));
    background-image: linear-gradient(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0));
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%
}

.rangeslider__handle:active,
.rangeslider--active .rangeslider__handle {
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjEiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4xMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background-size: 100%;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, rgba(0, 0, 0, 0.12)));
    background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.12));
    background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.12));
    background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.12))
}

.rangeslider--horizontal .rangeslider__handle {
    top: -10px;
    touch-action: pan-y;
    -ms-touch-action: pan-y
}

.rangeslider--vertical .rangeslider__handle {
    left: -10px;
    touch-action: pan-x;
    -ms-touch-action: pan-x
}

input[type="range"]:focus+.rangeslider .rangeslider__handle {
    -moz-box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
    -webkit-box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
    box-shadow: 0 0 8px rgba(255, 0, 255, 0.9)
}

.slider-component .slider-holder {
    padding-bottom: 0;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.slider-component .slider-scale-numbers {
    position: relative;
    margin: 45px 21px -7px
}

.dir-rtl .slider-component .slider-scale-numbers {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg)
}

.slider-component .slider-scale-number {
    position: absolute;
    width: 50px;
    top: -32px;
    text-align: center;
    text-decoration: none;
    color: inherit;
    margin-left: -25px
}

.dir-rtl .slider-component .slider-scale-number {
    text-align: center;
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg)
}

.slider-component .slider-scale-labels {
    margin: 2px 0;
    height: 20px
}

.slider-component .slider-scale-start {
    display: inline-block;
    float: left;
    height: 30px;
    line-height: 30px
}

.dir-rtl .slider-component .slider-scale-start {
    float: right
}

.slider-component .slider-scale-end {
    display: inline-block;
    float: right;
    height: 30px;
    line-height: 30px
}

.dir-rtl .slider-component .slider-scale-end {
    float: left
}

.slider-component .slider-scaler-wrapper {
    margin: 0 21px;
    min-height: 50px
}

.slider-component .slider-scaler-wrapper .slider-scaler {
    width: 100%;
    height: 2px;
    background-color: #000000;
    float: left;
    position: relative;
    border: none;
    border-top: none;
    border-bottom: none;
    top: 12px;
    margin: 3px 0
}

.slider-component .slider-model-answer,
.slider-component .slider-scale-marker {
    display: none;
    position: absolute;
    height: 30px;
    width: 50px;
    top: -32px;
    border-radius: 15px;
    margin-left: -25px;
    color: #ffffff;
    cursor: default;
    line-height: 30px;
    text-align: center;
    z-index: 1;
    background-color: #009cde;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5)
}

.slider-component .slider-scale-marker.display-block {
    display: block
}

.dir-rtl .slider-component .slider-scale-marker.display-block {
    margin-right: -15px;
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg)
}

.slider-component .slider-line {
    display: block;
    width: 2px;
    height: 13px;
    top: -11px;
    background-color: #000000;
    position: absolute;
    z-index: 0;
    margin-left: -2px
}

.slider-component .slider-scale-start-marker {
    left: 0
}

.slider-component .slider-scale-end-marker {
    left: 100%
}

.slider-component .slider-background {
    position: relative
}

.slider-component .slider-answer {
    display: none;
    position: absolute;
    height: 26px;
    width: 26px;
    top: -11px;
    border-radius: 50%;
    margin-left: -13px;
    background-color: #009cde;
    color: #ffffff;
    line-height: 26px;
    text-align: center;
    z-index: 1
}

.slider-widget .slider-holder .rangeslider__handle {
    background-image: none;
    border: none;
    background-color: #009cde
}

.slider-widget .slider-holder .rangeslider__handle:after {
    content: none
}

.no-touch .slider-widget .slider-holder .rangeslider__handle:hover {
    background-color: #000000
}

.slider-widget .slider-holder .rangeslider__fill {
    background-color: #009cde;
    transition: background-color linear 200ms
}

.slider-widget .slider-holder .rangeslider {
    background-color: #ffffff
}

.slider-widget .slider-holder .rangeslider--disabled {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1
}

.slider-widget .slider-holder .rangeslider--disabled .rangeslider__handle {
    border: none;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0
}

.slider-widget .slider-holder input[type="range"]:focus+.rangeslider .rangeslider__handle {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none
}

.accessibility .slider-widget .slider-holder input[type="range"]:focus+.rangeslider .rangeslider__handle {
    outline: 3px solid orange
}

.slider-widget .slider-holder .slider-item {
    direction: ltr
}

.slider-widget.show-user-answer.correct .slider-scale-marker {
    background-color: #82ca9c
}

.slider-widget.show-user-answer.correct .rangeslider__fill {
    background-color: #82ca9c
}

.slider-widget.show-user-answer.incorrect .slider-scale-marker {
    background-color: #f26c4f
}

.slider-widget.show-user-answer.incorrect .rangeslider__fill {
    background-color: #f26c4f
}

.slider-widget.show-correct-answer .slider-model-answer,
.slider-widget.show-correct-answer .slider-scale-marker {
    background-color: #82ca9c
}

.dir-rtl .slider-widget.show-correct-answer .slider-model-answer,
.dir-rtl .slider-widget.show-correct-answer .slider-scale-marker {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg)
}

.slider-widget.show-correct-answer .rangeslider__fill {
    background-color: #82ca9c
}

.no-marking .component-inner .component-widget.disabled.submitted.complete .rangeslider__fill,
.no-marking .component-inner .component-widget.disabled.submitted.complete .slider-scale-marker {
    color: #ccc;
    background-color: #727272
}

.textinput-item {
    background-color: #009cde;
    padding: 20px;
    position: relative;
    border: 3px solid #009cde;
    margin-bottom: 2px
}

.textinput-item label {
    background-color: transparent;
    line-height: 32px;
    padding: 0px;
    float: left;
    text-align: center;
    cursor: default;
    color: #ffffff
}

.dir-rtl .textinput-item label {
    float: right
}

.textinput-item-prefix,
.textinput-item-suffix {
    width: 20%
}

.textinput-item-textbox {
    box-sizing: border-box;
    padding: 0 5px;
    width: 100%;
    float: left;
    height: 26px
}

.dir-rtl .textinput-item-textbox {
    float: right
}

.textinput-item-textbox.textinput-validation-error {
    border: 2px solid #f26c4f
}

.textinput-item-textbox::-ms-clear {
    display: none
}

.textinput-item.prefix .textinput-item-textbox,
.textinput-item.suffix .textinput-item-textbox {
    width: 80%
}

.textinput-item.prefix.suffix .textinput-item-textbox {
    width: 60%
}

.textinput-item.suffix .textinput-item-state {
    margin-right: 20%
}

.dir-rtl .textinput-item.suffix .textinput-item-state {
    margin-right: inherit;
    margin-left: 20%
}

.textinput-widget.submitted .textinput-item {
    background-color: #ababab
}

.textinput-widget.show-user-answer .incorrect .textinput-incorrect-icon {
    display: block
}

.textinput-widget.show-user-answer .correct .textinput-correct-icon {
    display: block
}

.textinput-widget.show-correct-answer .textinput-select-icon {
    display: none
}

.textinput-widget.show-correct-answer .incorrect .textinput-correct-icon,
.textinput-widget.show-correct-answer .correct .textinput-correct-icon {
    display: block
}

.textinput-widget .textinput-item-state {
    background: none;
    position: absolute;
    right: 12px;
    width: 24px;
    height: 24px;
    top: 50%;
    margin-top: -12px;
    z-index: 0
}

.dir-rtl .textinput-widget .textinput-item-state {
    right: inherit;
    left: 12px
}

.textinput-widget .textinput-correct-icon {
    color: #82ca9c;
    display: none
}

.textinput-widget .textinput-incorrect-icon {
    color: #f26c4f;
    display: none
}

.dragAndDrop-component .dragAndDrop-inner .dragAndDrop-draggables-container {
    width: 100%;
    position: relative
}

.dragAndDrop-component .dragAndDrop-inner .dragAndDrop-draggables-container .dragAndDrop-item-draggable-wrapper {
    position: relative;
    float: left;
    margin-right: 15px;
    padding-bottom: 35px
}

@media (max-width:1024px) {
    .dragAndDrop-component .dragAndDrop-inner .dragAndDrop-draggables-container .dragAndDrop-item-draggable-wrapper {
        width: 25% !important
    }
}

.dragAndDrop-component .dragAndDrop-inner .dragAndDrop-draggables-container .dragAndDrop-item-draggable-wrapper a {
    padding: 10px 5px
}

@media (max-width:1024px) {
    .dragAndDrop-component .dragAndDrop-inner .dragAndDrop-draggables-container .dragAndDrop-item-draggable-wrapper a {
        min-height: 60px;
        padding: 20px 5px
    }
}

@media (max-width:768px) {
    .dragAndDrop-component .dragAndDrop-inner .dragAndDrop-draggables-container .dragAndDrop-item-draggable-wrapper a {
        min-height: 80px;
        padding: 20px 5px
    }
}

.dragAndDrop-component .dragAndDrop-inner .dragAndDrop-droppables-container {
    width: 100%;
    vertical-align: top;
    background-color: transparent;
    cursor: default;
    justify-content: center;
    text-align: center;
    display: flex
}

.dragAndDrop-component .dragAndDrop-inner .dragAndDrop-droppables-container .dragAndDrop-item-background {
    width: 450px;
    height: auto;
    float: left;
    text-align: center;
    margin-right: 20px
}

@media (max-width:1024px) {
    .dragAndDrop-component .dragAndDrop-inner .dragAndDrop-droppables-container .dragAndDrop-item-background {
        width: 440px
    }
}

@media (max-width:520px) {
    .dragAndDrop-component .dragAndDrop-inner .dragAndDrop-droppables-container .dragAndDrop-item-background {
        background-image: none;
        width: 50% !important;
        float: left;
        border: solid 1px #666666;
        border-style: dashed
    }
}

@media (max-width:768px) {
    .dragAndDrop-component .dragAndDrop-inner .dragAndDrop-droppables-container .dragAndDrop-item-background {
        width: 340px;
        min-height: 340px
    }
}

.dragAndDrop-component .dragAndDrop-inner .dragAndDrop-droppables-container .drop-items {
    margin: 30px !important;
    color: #001a1a !important;
    background: transparent !important
}

.dragAndDrop-component .dragAndDrop-inner .dragAndDrop-droppables-container .dragAndDrop-item-draggable {
    width: 100%;
    background: #727272;
    border-bottom: 2px white solid;
    border-top: 2px white solid;
    text-align: center;
    display: block;
    text-decoration: none !important;
    color: #ffffff;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    min-height: auto;
    margin-bottom: 1%;
    padding: 10px 0px
}

@media (max-width:768px) {
    .dragAndDrop-component .dragAndDrop-inner .dragAndDrop-droppables-container .dragAndDrop-item-draggable {
        font-size: 14px;
        line-height: 18px;
        margin: 0px
    }
}

@media (max-width:520px) {
    .dragAndDrop-component .dragAndDrop-inner .dragAndDrop-droppables-container .dragAndDrop-item-draggable {
        color: #ffffff !important;
        font-size: 19px;
        line-height: 27px
    }
}

.dragAndDrop-component .dragAndDrop-inner .dragAndDrop-droppables-container .correct,
.dragAndDrop-component .dragAndDrop-inner .dragAndDrop-droppables-container .incorrect {
    background: #004d66;
    color: #ffffff
}

.dragAndDrop-component .dragAndDrop-inner .dragAndDrop-dummy {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    cursor: pointer
}

.dragAndDrop-component .dragAndDrop-widget.show-user-answer .incorrect .dragAndDrop-incorrect-icon {
    display: block !important;
    float: left;
    color: red
}

.dragAndDrop-component .dragAndDrop-widget.show-user-answer .correct .dragAndDrop-correct-icon {
    display: block !important;
    float: left;
    color: green
}

.dragAndDrop-component .dragAndDrop-widget.show-correct-answer .dragAndDrop-item-droppable {
    border-style: solid;
    border-color: #82ca9c
}

.dragAndDrop-component .dragAndDrop-widget.show-correct-answer .dragAndDrop-item-droppable .dragAndDrop-correct-icon {
    display: block !important;
    float: left;
    color: green
}

.dragAndDrop-component .dragAndDrop-widget.disabled .dragAndDrop-item-draggable:hover {
    cursor: default
}

.dragAndDrop-component .txt {
    color: #ffffff;
    text-align: center;
    font-weight: bold
}

.dragAndDrop-component .drag-item {
    width: 86%;
    position: absolute;
    top: 0;
    left: 15%;
    margin: 0 auto;
    height: auto
}

.dragAndDrop-component img {
    display: block;
    margin-left: auto;
    margin-right: auto
}

.dragAndDrop-component .item-title {
    text-align: center;
    font-weight: bold;
    font-size: 18px
}

.dragAndDrop-component .dragAndDrop-item-droppable {
    position: relative
}

@media (max-width:1024px) {
    .dragAndDrop-component .dragAndDrop-item-droppable {
        min-height: 460px !important
    }
}

@media (max-width:768px) {
    .dragAndDrop-component .dragAndDrop-item-droppable {
        min-height: 320px !important
    }
}

.dragAndDrop-component .dragAndDrop-item-droppable .txt {
    width: 100%;
    position: relative;
    left: 0%;
    display: inline-block;
    z-index: 0;
    background-color: transparent !important;
    color: #009cde;
    padding: 10px 0px
}

@media (max-width:768px) {
    .dragAndDrop-component .dragAndDrop-item-droppable .txt {
        margin-top: 37%
    }
}

@media (max-width:520px) {
    .dragAndDrop-component .dragAndDrop-item-droppable {
        width: 100% !important;
        text-align: center;
        font-weight: bold;
        font-size: 18px;
        margin: 0% !important;
        background: transparent;
        color: green
    }
}

.dragAndDrop-component .drop-drag {
    top: 40%;
    position: relative;
    left: 3%;
    display: inline-block;
    z-index: 0
}

.dragAndDrop-component a,
.dragAndDrop-component .dragAndDrop-dummy {
    display: block;
    text-decoration: none !important;
    background: #009cde;
    font-size: 14px;
    text-align: center;
    color: #ffffff
}

#drop-0 {
    background-color: #ffffff
}

#drop-1 {
    background-color: #ffffff
}

.dragAndDrop-correct-icon {
    display: none !important
}

.dragAndDrop-incorrect-icon {
    display: none !important
}

.expose-columns {
    margin: 0 -10px
}

.expose-columns .expose-item-inner {
    margin: 0 6px
}

.expose-column {
    float: left
}

.expose-item-inner {
    position: relative;
    perspective: 1000px;
    margin-bottom: 20px;
    cursor: pointer
}

@media screen and (max-width:520px) {
    .expose-item-inner {
        margin-bottom: 45px
    }
}

.expose-item-inner.slide-down,
.expose-item-inner.slide-left,
.expose-item-inner.slide-right,
.expose-item-inner.slide-up {
    overflow: hidden
}

.expose-item-inner.flip-left .expose-item-cover,
.expose-item-inner.flip-up .expose-item-cover {
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0
}

.expose-item-inner.shrink .expose-item-cover {
    -webkit-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1)
}

.expose-item-inner .expose-item-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 1;
    -webkit-transition: .25s;
    -moz-transition: .25s;
    -ms-transition: .25s;
    -o-transition: .25s;
    transition: .25s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    transform: rotateX(0deg);
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
    padding: 0;
    text-align: center;
    color: #ffffff
}

.expose-item-inner .expose-item-cover .text {
    position: relative;
    display: inline-block;
    background-color: white;
    vertical-align: middle;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    text-transform: uppercase !important;
    font-size: 16px !important;
    font-weight: bold !important;
    display: flex;
    align-items: center;
    justify-content: center
}

.expose-item-inner .expose-item-cover .back,
.expose-item-inner .expose-item-cover .front {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%
}

.expose-item-inner .expose-item-cover .front {
    background: #009cde;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.expose-item-inner .expose-item-cover .back {
    background: #0078ab
}

.expose-item-inner .expose-item-cover:after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%
}

.expose-item-inner .expose-item-cover.fade {
    opacity: 0
}

.expose-item-inner .expose-item-cover.slide-up {
    top: -100%
}

.expose-item-inner .expose-item-cover.slide-left {
    left: -100%
}

.expose-item-inner .expose-item-cover.slide-right {
    left: 100%
}

.expose-item-inner .expose-item-cover.slide-down {
    top: 100%
}

.expose-item-inner .expose-item-cover.flip-up {
    -webkit-transform: rotateX(100deg);
    -moz-transform: rotateX(100deg);
    -ms-transform: rotateX(100deg);
    -o-transform: rotateX(100deg);
    transform: rotateX(100deg)
}

.expose-item-inner .expose-item-cover.flip-left {
    -webkit-transform: rotateY(-100deg);
    -moz-transform: rotateY(-100deg);
    -ms-transform: rotateY(-100deg);
    -o-transform: rotateY(-100deg);
    transform: rotateY(-100deg)
}

.expose-item-inner .expose-item-cover.shrink {
    -webkit-transform: scale(0, 0);
    -moz-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -o-transform: scale(0, 0);
    transform: scale(0, 0)
}

.expose-item-button {
    z-index: 10;
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    width: 0;
    padding: 0;
    background: none !important
}

.expose-item-content {
    background-color: #f1f1f1
}

@media screen and (max-width:1024px) and (min-width:790px) {}

.expose-item-content .expose-item-title {
    padding: 20px;
    background: #000000;
    color: #ffffff;
    display: none
}

.expose-item-content .expose-item-body {
    padding: 20px
}

.stacklist-items {
    position: relative;
    margin-bottom: -5px
}

.stacklist-item {
    position: relative;
    padding: 0px;
    margin-bottom: 10px;
    background-color: #009cde;
    color: #ffffff;
    line-height: 1.3
}

.stacklist-item.show {
    position: static !important
}

.stacklist-button {
    display: none;
    position: absolute;
    top: 0;
    height: 53px;
    width: 100%;
    -webkit-transition: .25s;
    -moz-transition: .25s;
    -ms-transition: .25s;
    -o-transition: .25s;
    transition: .25s;
    margin: auto;
    text-align: center
}

.stacklist-button button {
    min-width: 200px
}

.tabs-component .tabs-shadow {
    display: none;
    opacity: 0;
    position: fixed;
    z-index: 0;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.8)
}

.tabs-component .tab-item {
    text-decoration: none;
    position: relative;
    text-align: center;
    line-height: 20px;
    display: block
}

.no-touch .tabs-component .tab-item:hover .tab-item-inner {
    color: #ffffff
}

.tabs-component .tab-item.selected .tab-item-inner {
    background-color: #46b035 !important;
    color: #ffffff;
    text-align: center
}

.tabs-component .tab-item.visited .tab-item-inner {
    background-color: #9b9b9b;
    color: #fff;
    text-align: center
}

.tabs-component .smallTitle {
    font-weight: normal;
    padding-bottom: 20px
}

.tabs-component .image-zoomer {
    color: blue;
    position: relative;
    margin: 0 auto
}

.no-touch .tabs-component .image-zoomer:hover {
    color: #fff
}

.tabs-component .image-zoomer.selected {
    background-color: #000000;
    color: #fff
}

.tabs-component .image-zoomer.visited {
    background-color: #000000;
    color: #fff
}

.tabs-component .tab-content-item-zoom {
    z-index: 999;
    position: absolute;
    display: none;
    opacity: 1
}

.tabs-component .tab-item-inner {
    background-color: #009cde;
    color: #ffffff;
    white-space: initial;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    padding: 10px 0px 10px 0px;
    font-size: 14px;
    text-align: center
}

.tabs-component .tab-item-image {
    display: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-position: center;
    background-size: contain;
    position: absolute;
    top: 50%;
    left: 15px;
    margin-top: -7px;
    border: 2px solid #ffffff
}

.tabs-component .tabs-content-items {
    background: #d2d2d2;
    position: relative
}

.tabs-component .tabs-content-items-inner {
    padding: 20px 20px 20px
}

.tabs-component .tab-content {
    display: none
}

.tabs-component .tab-content-item-title {
    position: relative;
    float: right;
    width: 44%;
    margin: 5px;
    text-align: center;
    z-index: 1
}

.tabs-component .tab-content-item-title-inner {
    padding: 80px 0px 50px 0px
}

.tabs-component .tab-content-item-body {
    margin-top: 5px;
    position: relative;
    float: left;
    width: 50%;
    padding-bottom: 30px;
    color: #000000;
    padding-left: 10px;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 1.5
}

.tabs-component .tab-content-item-body p {
    margin-top: 0px;
    margin-bottom: 0px
}

.tabs-component .tab-content-item-body .tab-content-item-inner-text-title {
    padding-bottom: 15px
}

.tabs-component.tab-layout-left .tabs-tab-items {
    width: 20%;
    float: left
}

.tabs-component.tab-layout-left .tab-item {
    margin-bottom: 1px;
    z-index: 2
}

.tabs-component.tab-layout-left .tab-item:last-child {
    margin-bottom: 0
}

.tabs-component.tab-layout-left .tab-item.selected:after {
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    border-color: transparent transparent transparent #000000
}

.tabs-component.tab-layout-left .tab-item:after {
    position: absolute;
    right: -13px;
    top: 50%;
    margin-top: -8.25px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10.5px 0 10.5px 13px;
    content: '';
    z-index: 1;
    border-color: transparent transparent transparent #009cde;
    transform: translateX(-13px);
    opacity: 0;
    transition: all .25s ease-in;
    -ms-transition: all .25s ease-in
}

.tabs-component.tab-layout-left .tab-item-inner {
    padding: 20px 20px 20px 45px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px
}

.tabs-component.tab-layout-left .tabs-content-items {
    width: 80%;
    float: left;
    overflow-y: scroll;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    display: inline-block
}

.tabs-component.tab-layout-left .tabs-content-items-inner {
    padding: 20px 20px 20px 30px
}

@media all and (max-width:760px) {
    .tabs-component.tab-layout-left .tabs-tab-items {
        width: 10%
    }

    .tabs-component.tab-layout-left .tabs-tab-items {
        overflow: hidden
    }

    .tabs-component.tab-layout-left .tab-item {
        height: 60px
    }

    .tabs-component.tab-layout-left .tab-item:after {
        display: none
    }

    .tabs-component.tab-layout-left .tab-item-inner {
        display: none
    }

    .tabs-component.tab-layout-left .tab-item-image {
        left: 50%;
        margin-left: -12px
    }

    .tabs-component.tab-layout-left .tabs-content-items-inner {
        padding: 10px 20px
    }

    .tabs-component.tab-layout-left .tab-content-item-title-image {
        position: static;
        margin: 0px auto;
        display: block
    }

    .tabs-component.tab-layout-left .tab-content-item-title-inner {
        padding: 10px 0;
        text-align: center
    }
}

@media all and (max-width:520px) {
    .tabs-component.tab-layout-left .tabs-tab-items {
        width: 20%
    }
}

.tabs-component.tab-layout-top .tab-item {
    float: left;
    transform: translateY(5px);
    transition: all .3s ease-in;
    -ms-transition: all .3s ease-in
}

.tabs-component.tab-layout-top .tab-item:first-child .tab-item-inner {
    margin-left: 0
}

.tabs-component.tab-layout-top .tab-item:last-child .tab-item-inner {
    margin-right: 0
}

.tabs-component.tab-layout-top .tab-item.selected {
    transform: translateY(0)
}

.tabs-component.tab-layout-top .tab-item-inner {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    margin: 0 1px;
    padding: 15px 5px 20px
}

.tabs-component.tab-layout-top .tabs-content-items {
    display: inline-block;
    width: 100%;
    margin-top: 0px
}

@media (max-width:768px) {
    .tab-item-inner {
        font-size: 12px !important
    }

    .tab-content-item-body {
        margin-top: 0px !important;
        font-size: 12px !important
    }
}

@media (max-width:480px) {
    .tabs-component .tab-content-item-body {
        width: 100%
    }

    .tabs-component .tab-content-item-title {
        display: none
    }

    .tabs-component.tab-layout-top .tab-item {
        background: #63666A;
        font-size: 12px;
        padding: 5px;
        box-sizing: border-box
    }

    .tabs-component.tab-layout-top .tab-item.selected {
        background-color: #5CA50B !important
    }

    .tabs-component.tab-layout-top .tab-item.visited {
        background-color: #63666A
    }

    .block .block-inner {
        height: auto !important
    }
}

@media screen and (max-width:740px) and (min-width:620px) {
    .tabs-tab-items-inner button {
        background: #63666A !important;
        font-size: 14px;
        height: 100px
    }

    .tabs-tab-items-inner button.selected {
        background-color: #5CA50B !important
    }

    .tabs-tab-items-inner button.visited {
        background-color: #63666A
    }

    .tab-content-item-title {
        display: none
    }

    .tab-content-item-body {
        width: 100% !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
}

.dir-rtl body {
    direction: rtl
}

.dir-ltr body {
    direction: ltr
}

.languagepicker .languagepicker-inner {
    max-width: 100%;
    margin: 0 auto
}

@media all and (min-width:520px) {
    .languagepicker .languagepicker-inner {
        max-width: 520px
    }
}

@media all and (min-width:760px) {
    .languagepicker .languagepicker-inner {
        max-width: 100%
    }
}

@media all and (min-width:960px) {
    .languagepicker .languagepicker-inner {
        max-width: 960px
    }
}

.languagepicker .languagepicker-inner .languagepicker-title {
    margin: 0 1%;
    padding: 30px 0 30px
}

.languagepicker .languagepicker-inner .languagepicker-title .languagepicker-title-inner {
    font-size: 42px;
    line-height: 52px
}

.languagepicker .languagepicker-inner .languagepicker-body {
    margin: 0 1%;
    padding: 30px 0
}

.languagepicker .languagepicker-inner .languagepicker-languages .languagepicker-language {
    margin: 15px 1% 15px;
    width: 48%;
    float: left
}

@media all and (max-width:519px) {
    .languagepicker .languagepicker-inner .languagepicker-languages .languagepicker-language {
        width: 98%
    }
}

.navigation .navigation-inner .languagepicker-icon {
    float: right
}

.dir-rtl .navigation .navigation-inner .languagepicker-icon {
    float: left
}

.drawer-holder .languagepicker .languagepicker-inner {
    width: 100%
}

.drawer-holder .languagepicker .languagepicker-inner .languagepicker-language .dir-rtl button {
    direction: rtl;
    text-align: inherit
}

.notify .notify-popup.notify-type-prompt {
    text-align: inherit
}

.notify .notify-popup.notify-type-prompt.dir-rtl {
    direction: rtl
}

.notify .notify-popup.notify-type-prompt.dir-rtl .notify-popup-icon {
    right: inherit;
    left: 0
}

.notify .notify-popup.notify-type-prompt.dir-rtl .notify-popup-title,
.notify .notify-popup.notify-type-prompt.dir-rtl .notify-popup-body {
    padding-left: 60px;
    padding-right: inherit
}

.notify .notify-popup.notify-type-prompt.dir-ltr {
    direction: ltr
}

.notify .notify-popup.notify-type-prompt.dir-ltr .notify-popup-icon {
    right: 0;
    left: inherit
}

.notify .notify-popup.notify-type-prompt.dir-ltr .notify-popup-title,
.notify .notify-popup.notify-type-prompt.dir-ltr .notify-popup-body {
    padding-left: inherit;
    padding-right: 60px
}

.drawer .pagelevelprogress-item-title {
    background-color: #009cde;
    color: #ffffff;
    text-decoration: none;
    padding: 20px;
    display: block;
    width: 80%
}

.drawer .pagelevelprogress-item-title.drawer-item-open.disabled {
    box-sizing: border-box;
    background-color: #ababab;
    color: #ffffff
}

.no-touch .drawer .pagelevelprogress-item-title.drawer-item-open.disabled:hover {
    background-color: #ababab;
    color: #ffffff
}

.drawer .pagelevelprogress-item-title .drawer-item-open {
    padding: 20px 20px 20px 20px;
    display: block
}

.no-touch .drawer .pagelevelprogress-item-title:hover {
    background-color: #0078ab;
    color: #fff
}

.pagelevelprogress-item-title-inner {
    float: left;
    width: 80%
}

.dir-rtl .pagelevelprogress-item-title-inner {
    float: right
}

.pagelevelprogress-item-optional-text {
    line-height: 1em;
    text-align: right
}

.pagelevelprogress-navigation {
    display: inline-block;
    padding: 26px;
    float: right
}

@media all and (max-width:759px) {
    .pagelevelprogress-navigation {
        padding: 19px
    }
}

.dir-rtl .pagelevelprogress-navigation {
    float: left
}

.menu-title-inner,
.menu-item-title-inner,
.page-title-inner,
.article-title-inner,
.block-title-inner,
.component-title-inner {
    display: inline-block
}

.pagelevelprogress-indicator {
    display: inline-block;
    box-sizing: border-box;
    height: 12px;
    width: 24px;
    border: 2px solid #005478;
    border-radius: 50px;
    background-color: #ffffff;
    vertical-align: middle;
    overflow: hidden
}

.pagelevelprogress-indicator.complete .pagelevelprogress-indicator-inner {
    width: 100%
}

.pagelevelprogress-indicator-inner {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    height: 8px;
    border: 1px solid #ffffff;
    border-radius: 25px
}

.pagelevelprogress-indicator-bar {
    position: absolute;
    min-width: 0px;
    height: 100%;
    background-color: #005478
}

.pagelevelprogress-navigation {
    height: 64px
}

.pagelevelprogress-navigation .pagelevelprogress-indicator {
    position: relative;
    top: -3px;
    width: 100px;
    vertical-align: middle
}

.pagelevelprogress .pagelevelprogress-indicator {
    margin-left: 4%;
    width: 16%;
    border-color: #ffffff;
    background-color: #005478
}

.dir-rtl .pagelevelprogress .pagelevelprogress-indicator {
    margin-left: inherit;
    margin-right: 4%
}

.pagelevelprogress .pagelevelprogress-indicator-inner {
    border-color: #005478
}

.pagelevelprogress .pagelevelprogress-indicator-bar {
    background-color: #ffffff
}

.menu-item .pagelevelprogress-indicator {
    width: 64px;
    border-color: #ffffff;
    background-color: #005478
}

.menu-item .pagelevelprogress-indicator-inner {
    border-color: #005478
}

.menu-item .pagelevelprogress-indicator-bar {
    background-color: #ffffff
}

.resources .resources-filter button {
    display: block;
    float: left;
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    border-bottom: 1px solid #009cde
}

.dir-rtl .resources .resources-filter button {
    float: right
}

.resources .resources-filter button span {
    width: 100%;
    display: inline-block;
    padding: 10px 0px;
    border-right: 1px solid #009cde
}

.dir-rtl .resources .resources-filter button span {
    border-left: 1px solid #009cde;
    border-right: inherit
}

.resources .resources-filter button.selected {
    color: #fff;
    background-color: #0078ab
}

.no-touch .resources .resources-filter button:hover {
    color: #fff;
    background-color: #0078ab
}

.resources .resources-item-open {
    width: auto !important
}

.resources .resources-col-4 button {
    width: 25%
}

.resources .resources-col-3 button {
    width: 33.3%
}

html.trickle {
    height: 100%
}

html.trickle #wrapper {
    overflow: hidden;
    -ms-scroll-limit-y-max: 0
}

.article {
    position: relative
}

.trickle-button-component {
    text-align: center;
    padding-bottom: 10px
}

.trickle-button-component .trickle-button-inner {
    z-index: 500
}

.trickle-button-component.trickle-full-width {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px
}

@media screen and (max-width:768px) {
    .trickle-button-component.trickle-full-width {
        position: relative
    }
}

.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: 0px;
    left: 0px;
    display: block;
    right: 0;
    box-sizing: border-box
}

.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: #0075c1;
    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: 0px
}

.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: 0px;
    left: 0px;
    display: block
}

.trickle-button-component.trickle-full-width.trickle-round-arrow .trickle-button-inner.locking button {
    width: 80px;
    height: 80px;
    background-color: #0075c1;
    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: 0px
}

.boxmenu-menu {
    background: #009cde
}

.boxmenu-menu .menu-container-inner {
    padding: 30px 30px 0
}

.boxmenu-menu .menu-title,
.boxmenu-menu .menu-body {
    color: #fff;
    margin-bottom: 30px
}

.boxmenu-menu .menu-item {
    width: 50%;
    float: left;
    margin-top: 0;
    margin-bottom: 20px
}

.dir-rtl .boxmenu-menu .menu-item {
    float: right
}

.boxmenu-menu .menu-item.nth-child-even .menu-item-inner {
    margin-left: 5%
}

.dir-rtl .boxmenu-menu .menu-item.nth-child-even .menu-item-inner {
    margin-left: inherit;
    margin-right: 5%
}

.boxmenu-menu .menu-item.nth-child-odd {
    clear: both
}

.boxmenu-menu .menu-item.nth-child-odd .menu-item-inner {
    margin-right: 5%
}

.dir-rtl .boxmenu-menu .menu-item.nth-child-odd .menu-item-inner {
    margin-right: inherit;
    margin-left: 5%
}

.boxmenu-menu .menu-item-inner {
    background: #ffffff;
    padding-bottom: 20px;
    position: relative
}

.boxmenu-menu .menu-graphic a {
    display: block
}

.boxmenu-menu .menu-item-title {
    padding: 30px 30px 0
}

.boxmenu-menu .menu-item-body {
    padding: 30px 30px 0
}

.boxmenu-menu .menu-item-button {
    padding: 30px 30px 0
}

.boxmenu-menu .menu-item-button a {
    text-decoration: none;
    background-color: #0075c1;
    color: #ffffff;
    padding: 14px
}

.boxmenu-menu .menu-item-button a:hover {
    background-color: #000000;
    color: #fff
}

.boxmenu-menu .menu-item-button a.visited {
    background-color: #727272;
    color: #ccc
}

.boxmenu-menu .menu-item-duration {
    float: right
}

.dir-rtl .boxmenu-menu .menu-item-duration {
    float: left
}

@media all and (max-width:760px) {
    .boxmenu-menu .menu-inner {
        padding: 0
    }

    .boxmenu-menu .menu-title-inner {
        padding: 15px 0 0
    }

    .boxmenu-menu .menu-body-inner {
        padding: 0px 0 10px
    }

    .boxmenu-menu .menu-item {
        width: 100%;
        margin-bottom: 20px
    }

    .boxmenu-menu .menu-item.nth-child-even .menu-item-inner,
    .boxmenu-menu .menu-item.nth-child-odd .menu-item-inner {
        margin: 0
    }
}

.article {
    background-color: #ffffff
}

.article .article-inner {
    padding: 60px 0 60px
}

@media all and (max-width:920px) {
    .article .article-inner {
        padding: 30px 0 30px
    }
}

@media all and (max-width:540px) {
    .article .article-inner {
        padding: 20px 0 20px
    }
}

.article .article-header {
    max-width: 70%;
    margin: auto;
    padding: 0
}

@media all and (max-width:920px) {
    .article .article-header {
        padding: 0 20px
    }
}

@media all and (max-width:540px) {
    .article .article-header {
        padding: 0 10px
    }
}

.article .article-title {
    margin-bottom: 20px;
    color: #009cde;
    text-align: left
}

.dir-rtl .article .article-title {
    text-align: right
}

.article .article-title-inner {
    margin-bottom: 20px
}

.article .article-body {
    margin-bottom: 30px
}

.article .article-instruction {
    margin-bottom: 14px;
    font-size: 14px;
    font-weight: 700;
    line-height: 140%
}

.block {
    background-color: #ffffff
}

.block .block-inner {
    max-width: 900px;
    margin: auto;
    padding: 60px 0 60px
}

@media all and (max-width:920px) {
    .block .block-inner {
        padding: 30px 20px 30px
    }
}

@media all and (max-width:540px) {
    .block .block-inner {
        padding: 20px 10px 20px
    }
}

.block .block-title {
    margin-bottom: 20px;
    color: #009cde;
    text-align: left
}

.dir-rtl .block .block-title {
    text-align: right
}

.block .block-body {
    margin-bottom: 30px
}

.block .block-instruction {
    margin-bottom: 14px;
    font-size: 14px;
    font-weight: 700;
    line-height: 140%
}

.button,
button {
    font-family: 'NotoSansSC-Regular';
    background-color: #0075c1;
    color: #ffffff;
    padding: 14px 24px 14px 24px;
    text-decoration: none;
    text-align: center;
    display: inline-block;
    border: 0 solid #0075c1;
    -webkit-transition: background-color .25s ease-in, color .25s ease-in, border-color .25s ease-in;
    -moz-transition: background-color .25s ease-in, color .25s ease-in, border-color .25s ease-in;
    -ms-transition: background-color .25s ease-in, color .25s ease-in, border-color .25s ease-in;
    transition: background-color .25s ease-in, color .25s ease-in, border-color .25s ease-in;
    font-size: 18px;
    font-weight: 300;
    line-height: 140%
}

@media all and (max-width:520px) {

    .button,
    button {
        font-size: 14px
    }
}

.no-touch .button:hover,
.no-touch button:hover {
    background-color: #00568e;
    color: #ffffff;
    border-color: #00568e
}

.button.base,
button.base {
    background-color: transparent;
    padding: 0;
    text-align: left;
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    transition: none
}

.no-touch .button.base:hover,
.no-touch button.base:hover {
    background-color: transparent
}

.dir-rtl .button.base,
.dir-rtl button.base {
    text-align: right
}

.button.disabled,
button.disabled,
.button:disabled,
button:disabled {
    background-color: #ababab !important;
    border-color: #ababab !important;
    color: #fff !important;
    cursor: default
}

.no-touch .button.disabled:hover,
.no-touch button.disabled:hover,
.no-touch .button:disabled:hover,
.no-touch button:disabled:hover {
    border-color: #ababab
}

.button[disabled="disabled"],
button[disabled="disabled"] {
    background-color: #ababab !important;
    border-color: #ababab !important;
    color: #fff !important;
    cursor: default
}

.no-touch .button[disabled="disabled"]:hover,
.no-touch button[disabled="disabled"]:hover {
    border-color: #ababab
}

.buttons {
    margin-top: 30px;
    margin-bottom: 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 button.buttons-action-fullwidth {
    width: 99%;
    margin-left: .5%
}

.buttons button.no-feedback {
    display: none
}

.buttons .buttons-display {
    position: relative;
    border: 0 solid #0075c1;
    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 #0075c1;
    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:520px) {
    .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
}

.component .component-inner {
    padding: 20px 50px !important;
    background-color: #e6e6e6;
    padding: 20px
}

.component .component-inner.blank-inner {
    background-color: transparent;
    padding: 0
}

.component .component-title {
    margin-bottom: 20px;
    color: #009cde;
    text-align: left
}

.dir-rtl .component .component-title {
    text-align: right
}

.component .component-title-inner {
    padding: 0px
}

.component .component-body {
    margin: 20px 0px 20px
}

.component .component-body a {
    text-decoration: underline
}

.component .component-body-inner {
    padding: 0px
}

.component .component-instruction {
    margin-bottom: 14px;
    font-size: 14px;
    font-weight: 700;
    line-height: 140%
}

.component .component-instruction-inner.validation-error {
    color: #f26c4f
}

@media all and (max-width:520px) {
    .component.component-left {
        padding: 0 0 20px
    }

    .component.component-right {
        padding: 20px 0 0
    }
}

.drawer {
    background-color: #37474f;
    color: #ffffff
}

.drawer .drawer-toolbar {
    position: absolute;
    width: 100%;
    top: 0;
    border-bottom: 1px solid #0d1113
}

.drawer .drawer-toolbar .icon {
    color: #ffffff;
    padding: 20px;
    -webkit-transition: color .25s ease-in;
    -moz-transition: color .25s ease-in;
    -ms-transition: color .25s ease-in;
    transition: color .25s ease-in
}

.no-touch .drawer .drawer-toolbar .icon:hover {
    color: #999
}

.drawer .drawer-holder {
    padding-top: 65px
}

.drawer .drawer-inner {
    border-left: 5px solid #0d1113
}

.dir-rtl .drawer .drawer-inner {
    border-left: inherit;
    border-right: 5px solid #0d1113
}

.drawer .drawer-item .drawer-item-title {
    font-size: 18px;
    font-weight: 300;
    line-height: 120%
}

@media all and (max-width:520px) {
    .drawer .drawer-item .drawer-item-title {
        font-size: 16px
    }
}

.drawer .drawer-item .drawer-item-description {
    font-size: 18px;
    line-height: 140%
}

.drawer .drawer-item .drawer-item-open {
    border-bottom: 1px solid #009cde;
    color: #ffffff;
    text-decoration: none;
    width: 100%
}

.no-touch .drawer .drawer-item .drawer-item-open:hover {
    background-color: #005478;
    color: #ffffff
}

.drawer .drawer-item-open {
    padding: 20px 20px 20px 20px;
    -webkit-transition: background-color .25s ease-in;
    -moz-transition: background-color .25s ease-in;
    -ms-transition: background-color .25s ease-in;
    transition: background-color .25s ease-in
}

.no-touch .drawer .drawer-item-open:hover {
    background-color: #37474f
}

html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

body {
    color: #000000;
    font-family: 'NotoSansSC-Regular';
    font-size: 18px;
    font-weight: 400;
    line-height: 140%;
    -webkit-font-smoothing: antialiased
}

.ie8 body {
    font-family: Arial, sans-serif
}

.menu-title {
    font-size: 48px;
    font-weight: 300;
    line-height: 120%
}

@media all and (max-width:520px) {
    .menu-title {
        font-size: 38px
    }
}

.page-title {
    font-size: 48px;
    font-weight: 300;
    line-height: 120%
}

@media all and (max-width:520px) {
    .page-title {
        font-size: 38px
    }
}

.article-title {
    font-size: 26px;
    font-weight: 700;
    line-height: 120%
}

@media all and (max-width:520px) {
    .article-title {
        font-size: 16px
    }
}

.block-title {
    font-size: 26px;
    font-weight: 700;
    line-height: 120%
}

@media all and (max-width:520px) {
    .block-title {
        font-size: 16px
    }
}

.component-title {
    font-size: 26px;
    font-weight: 700;
    line-height: 120%
}

@media all and (max-width:520px) {
    .component-title {
        font-size: 16px
    }
}

.item-title {
    font-size: 24px;
    font-weight: 300;
    line-height: 120%
}

@media all and (max-width:520px) {
    .item-title {
        font-size: 11px
    }
}

.sub-title {
    font-size: 18px;
    font-weight: 300;
    line-height: 120%
}

@media all and (max-width:520px) {
    .sub-title {
        font-size: 16px
    }
}

.instruction-text {
    font-size: 14px;
    font-weight: 700;
    line-height: 140%
}

.notify-popup-title {
    font-size: 26px;
    font-weight: 700;
    line-height: 120%
}

@media all and (max-width:520px) {
    .notify-popup-title {
        font-size: 16px
    }
}

.button-text {
    font-size: 18px;
    font-weight: 300;
    line-height: 140%
}

@media all and (max-width:520px) {
    .button-text {
        font-size: 14px
    }
}

ul {
    list-style: disc inside none
}

strong,
b {
    font-weight: 700
}

select {
    font-size: 14px;
    line-height: 140%;
    font-weight: 300
}

@font-face {
    font-family: 'vanilla';
    src: url(fonts/vanilla.woff)
}

.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: #000000;
    display: block;
    font-size: 24px;
    text-decoration: none;
    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"
}

.icon-language-1:before {
    content: "\e900"
}

.icon-accessibility:before {
    content: "\e901"
}

.icon-globe:before {
    content: "\f0ac"
}

.icon-language-2:before {
    content: "\f1ab"
}

.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(assets/ajax-loader.gif);
    background-repeat: no-repeat;
    background-position: center;
    width: 188px;
    height: 128px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -64px;
    margin-left: -64px;
    font-size: 24px;
    font-weight: 300;
    line-height: 120%
}

@media all and (max-width:520px) {
    .loading .loader-gif {
        font-size: 11px
    }
}

.navigation {
    overflow: hidden;
    background-color: #ffffff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26)
}

.navigation .icon {
    padding: 20px;
    color: #009cde;
    -webkit-transition: color .25s ease-in;
    -moz-transition: color .25s ease-in;
    -ms-transition: color .25s ease-in;
    transition: color .25s ease-in
}

.no-touch .navigation .icon:hover {
    color: #000d12
}

.navigation .skip-nav-link {
    background-color: #0075c1;
    border-radius: 0;
    color: #ffffff;
    display: none;
    left: 0;
    margin-top: 0;
    padding: 10px 20px;
    position: absolute;
    top: -46px;
    -webkit-transition: top .2s ease-out;
    transition: top .2s ease-out;
    width: auto;
    z-index: 100
}

.accessibility .navigation .skip-nav-link {
    display: inline-block
}

.navigation .skip-nav-link:focus {
    top: 0
}

.notify .notify-popup {
    background-color: #009cde;
    color: #ffffff
}

.notify .notify-popup a {
    text-decoration: none
}

.notify .notify-popup-inner {
    position: relative;
    max-width: 900px;
    margin: auto;
    padding: 60px 0 60px
}

@media all and (max-width:920px) {
    .notify .notify-popup-inner {
        padding: 30px 20px 30px
    }
}

@media all and (max-width:540px) {
    .notify .notify-popup-inner {
        padding: 20px 10px 20px
    }
}

.ie8 .notify .notify-popup-content {
    max-width: 1024px;
    margin: 0 auto
}

.notify .notify-popup-content-inner {
    padding-left: 0px
}

.dir-rtl .notify .notify-popup-content-inner {
    padding-left: inherit;
    padding-right: 0px
}

@media all and (max-width:759px) {
    .notify .notify-popup-content-inner {
        padding-left: 0px
    }

    .dir-rtl .notify .notify-popup-content-inner {
        padding-left: inherit;
        padding-right: 0px
    }
}

.notify .notify-popup-title {
    margin-bottom: 20px;
    padding-right: 60px
}

.dir-rtl .notify .notify-popup-title {
    padding-right: inherit;
    padding-left: 60px
}

.notify .notify-type-prompt .notify-popup-body {
    padding-right: 60px
}

.dir-rtl .notify .notify-type-prompt .notify-popup-body {
    padding-right: inherit;
    padding-left: 60px
}

.notify .notify-popup-body a {
    text-decoration: underline;
    color: #ffffff
}

.notify .notify-popup-content-inner .notify-popup-icon {
    position: absolute;
    right: 0px;
    left: inherit;
    padding-bottom: 20px
}

.notify .notify-popup-content-inner .notify-popup-icon .icon {
    font-size: 60px;
    height: 60px;
    width: 60px;
    color: #ffffff;
    margin: 0
}

.dir-rtl .notify .notify-popup-content-inner .notify-popup-icon {
    right: inherit;
    left: 0px
}

.notify .notify-popup-buttons {
    text-align: center;
    margin-top: 30px
}

.notify .notify-popup-button {
    background-color: #ffffff;
    color: #009cde;
    padding: 10px;
    text-decoration: none;
    display: inline-block;
    border: none;
    min-width: 100px;
    -webkit-transition: background-color .25s ease-in, color .25s ease-in, border-color .25s ease-in;
    -moz-transition: background-color .25s ease-in, color .25s ease-in, border-color .25s ease-in;
    -ms-transition: background-color .25s ease-in, color .25s ease-in, border-color .25s ease-in;
    transition: background-color .25s ease-in, color .25s ease-in, border-color .25s ease-in;
    font-size: 18px;
    font-weight: 300;
    line-height: 140%
}

@media all and (max-width:520px) {
    .notify .notify-popup-button {
        font-size: 14px
    }
}

.no-touch .notify .notify-popup-button:hover {
    background-color: #005478;
    color: #ffffff
}

.notify .notify-popup-done {
    padding: 5px;
    margin: 10px 10px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    position: absolute;
    top: 0px;
    right: 0px;
    -webkit-transition: border-color .25s ease-in;
    -moz-transition: border-color .25s ease-in;
    -ms-transition: border-color .25s ease-in;
    transition: border-color .25s ease-in
}

.no-touch .notify .notify-popup-done:hover {
    border-color: #005478
}

.no-touch .notify .notify-popup-done:hover .notify-popup-icon-close {
    color: #005478
}

.dir-rtl .notify .notify-popup-done {
    left: 0px;
    right: inherit
}

.notify .notify-popup-icon-close {
    color: #ffffff;
    -webkit-transition: color .25s ease-in;
    -moz-transition: color .25s ease-in;
    -ms-transition: color .25s ease-in;
    transition: color .25s ease-in
}

.no-touch .notify .notify-popup-icon-close:hover {
    color: #005478
}

.notify .notify-shadow {
    background-color: rgba(255, 255, 255, 0.95)
}

.no-opacity .notify .notify-shadow {
    background-image: url('assets/transparency-light.png')
}

.notify-push {
    position: fixed;
    right: 20px;
    width: 380px;
    background-color: #009cde;
    transition: all .3s;
    opacity: 0;
    margin-top: -30px;
    color: #fff;
    z-index: 50;
    border: 1px solid #ffffff;
    border-radius: 3px
}

.dir-rtl .notify-push {
    left: 20px;
    right: inherit
}

@media all and (max-width:760px) {
    .notify-push {
        width: 90%;
        max-width: 380px;
        right: 5%
    }

    .dir-rtl .notify-push {
        left: 5%;
        right: inherit
    }
}

.notify-push.show {
    margin-top: 0px;
    opacity: 1
}

.notify-push-inner {
    padding: 30px 0px 30px 30px;
    margin-right: 78px;
    cursor: pointer
}

.dir-rtl .notify-push-inner {
    margin-left: 78px;
    margin-right: inherit;
    padding: 30px 30px 30px 0px
}

.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 {
    color: #005478
}

.page {
    background-color: #ffffff
}

.page .page-header {
    background-color: #546e7a
}

.page .page-header-inner {
    padding: 100px 0 100px
}

@media all and (max-width:920px) {
    .page .page-header-inner {
        padding: 100px 20px 100px
    }
}

@media all and (max-width:540px) {
    .page .page-header-inner {
        padding: 100px 10px 100px
    }
}

.page .page-header-content {
    max-width: 900px;
    margin: auto;
    color: #ffffff
}

.page .page-header-content-inner {
    text-align: center
}

.page .page-title {
    margin-bottom: 20px
}

.page .page-body {
    margin-bottom: 30px
}

.page .page-instruction {
    margin-bottom: 14px;
    font-size: 14px;
    font-weight: 700;
    line-height: 140%
}

.shadow {
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    z-index: 500;
    background-color: rgba(255, 255, 255, 0.8)
}

.no-opacity .shadow {
    background-image: url('assets/transparency-light.png')
}

.transition-all-colors {
    -webkit-transition: background-color .25s ease-in, color .25s ease-in, border-color .25s ease-in;
    -moz-transition: background-color .25s ease-in, color .25s ease-in, border-color .25s ease-in;
    -ms-transition: background-color .25s ease-in, color .25s ease-in, border-color .25s ease-in;
    transition: background-color .25s ease-in, color .25s ease-in, border-color .25s ease-in
}

.transition-color {
    -webkit-transition: color .25s ease-in;
    -moz-transition: color .25s ease-in;
    -ms-transition: color .25s ease-in;
    transition: color .25s ease-in
}

.transition-background-color {
    -webkit-transition: background-color .25s ease-in;
    -moz-transition: background-color .25s ease-in;
    -ms-transition: background-color .25s ease-in;
    transition: background-color .25s ease-in
}

.transition-border-color {
    -webkit-transition: border-color .25s ease-in;
    -moz-transition: border-color .25s ease-in;
    -ms-transition: border-color .25s ease-in;
    transition: border-color .25s ease-in
}

#wrapper {
    overflow-x: hidden;
    padding-top: 64px
}

@font-face {
    font-family: 'NotoSansSC-Regular';
    src: url('fonts/NotoSansSC-Regular.otf') format('opentype');
    src: url('fonts/NotoSansSC-Regular.woff') format('woff'), url('fonts/NotoSansSC-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: 'NotoSansSC-Medium';
    src: url('fonts/NotoSansSC-Medium.otf') format('opentype');
    src: url('fonts/NotoSansSC-Medium.woff') format('woff'), url('fonts/NotoSansSC-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal
}

html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

.divider-block {
    background-color: #546e7a;
    color: #ffffff;
    text-align: center
}

.divider-block .block-title,
.divider-block .block-body,
.divider-block .block-instruction,
.divider-block .component-title,
.divider-block .component-body,
.divider-block .component-instruction {
    color: #ffffff;
    text-align: center
}

.divider-block .component-inner {
    background-color: transparent
}

body {
    line-height: 1.2
}

.block.primary-color {
    background-color: #009cde
}

.block.secondary-color {
    background-color: #000000
}

.block.tertiary-color {
    background-color: #ffffff
}

.block.background-color {
    background-color: #ffffff
}

.block.background-color-inverted {
    background-color: #546e7a;
    color: #ffffff
}

.block.background-color-inverted .component-inner {
    background-color: transparent
}

@media screen and (max-width:768px) {
    .block-inner {
        margin-bottom: 40px !important
    }
}

.component-background {
    background-color: #e6e6e6;
    padding: 20px
}

.assessment .graphic-component {
    display: block
}

@media all and (max-width:760px) {
    .assessment .graphic-component {
        display: none
    }
}

.blank-background {
    background-image: url(assets/blank-bg.jpg);
    background-repeat: no-repeat;
    background-position: center
}

@media all and (max-width:900px) {
    .blank-background {
        background-image: url(assets/blank-bg-900.jpg);
        background-position: right
    }
}

@media all and (max-width:760px) {
    .blank-background {
        background-image: none
    }
}

blockquote {
    border-left: 2px solid #009cde;
    margin-left: 20px;
    padding-left: 20px
}

.vertical-middle {
    display: flex;
    align-items: center;
    justify-content: center
}

.block-white-bg .block-inner {
    background-color: #ffffff;
    padding: 50px;
    box-sizing: border-box;
    margin-top: 60px
}

@media screen and (max-width:768px) {
    .block-white-bg .block-inner {
        margin-bottom: 20px
    }
}

@media screen and (max-width:520px) {
    .block-white-bg .block-inner {
        padding: 20px
    }
}

@media screen and (max-width:520px) {
    .component .component-inner {
        padding: 20px !important
    }
}

@media screen and (max-width:520px) {
    .c-05 .component-inner {
        padding: 0px !important
    }
}

@media screen and (max-width:768px) {
    .notify .notify-popup-content {
        width: 90%
    }
}

@media screen and (max-width:520px) {
    .notify .notify-popup-content {
        text-align: left;
        width: 70%
    }
}

@media screen and (max-width:520px) {
    .stacklist-button button {
        min-width: 150px;
        margin: 0px auto
    }
}

.block-inner {
    max-width: 70% !important
}

@media screen and (max-width:1024px) {
    .block-inner {
        max-width: 100% !important
    }
}

@media screen and (max-width:520px) {
    .block-inner {
        max-width: 90% !important
    }
}

.component-title,
component-instruction {
    text-align: center !important
}

.title-p-gap {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-content: center;
    align-items: center
}

.title-p-gap .component-title p {
    margin-top: 0px !important;
    margin-bottom: 0px !important
}

.title-p-gap .component-body {
    margin: 30px 0px 30px !important;
    text-align: left
}

.body-p-gap .component-body p {
    margin-top: 0px !important;
    margin-bottom: 0px !important
}

.buttons-inner button {
    border-radius: 50px
}

@media screen and (max-width:768px) {
    .buttons-inner button {
        padding: 14px 8px 14px 8px !important;
        font-size: 14px !important
    }
}

@media screen and (max-width:520px) {
    .buttons-inner button {
        font-size: 9px !important;
        padding: 14px 0px 14px 0px !important
    }
}

a {
    text-decoration: underline
}

.co-05 .page-header {
    display: none
}

.co-05 .navigation-drawer-toggle-button {
    display: none !important
}

#wrapper {
    padding-top: 0px !important
}

.component .component-inner {
    background-color: transparent !important
}

.component .component-instruction {
    color: #009cde;
    font-weight: normal !important;
    font-size: 14px !important;
    margin-bottom: 30px !important;
    font-style: italic !important;
    text-align: center !important
}

.intro {
    background-image: url(assets/launch.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    color: #ffffff
}

.intro .article-inner {
    padding: 0px
}

.intro .block {
    background-color: transparent !important
}

.intro .component-body {
    font-size: 30px
}

@media screen and (max-width:520px) {
    .intro .component-body {
        font-size: 16px
    }
}

.intro .component-body P {
    margin-bottom: 18px !important;
    text-align: center;
    margin-top: 18px !important
}

.logo-img {
    width: 46%
}

@media screen and (max-width:520px) {
    .logo-img {
        width: 70%;
        margin-top: 30px
    }
}

.article-02 {
    background-color: #b5dfae
}

.article-02 .block {
    background-color: transparent !important
}

.pista-background {
    background-color: #d4e9d1
}

.pista-background .block {
    background-color: transparent
}

.blue-background {
    background-color: #009cde
}

.blue-background .block {
    background-color: transparent
}

.blue-shade-background-color {
    background-color: #7ab4da
}

.blue-shade-background-color .block {
    background-color: transparent !important
}

.light-blue-bg {
    background-color: #7ab4da;
    padding: 0px 0px 80px !important
}

.light-blue-bg .block {
    background-color: #a7d0eb !important
}

.blue-shade-background {
    background-color: #7ab4da
}

.blue-shade-background .block {
    background-color: transparent !important
}

.article-03 {
    background-image: url('assets/narrative-bg.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed
}

.article-03 .block {
    background-color: transparent !important
}

.article-03 .block .block-inner {
    padding: 10px 0 60px
}

.article-03 .article-title {
    text-align: center !important;
    background-color: #009cde;
    padding: 10px;
    margin-bottom: 0px !important;
    box-sizing: border-box;
    color: #fff !important
}

.article-03 .article-title-inner {
    margin-bottom: 0px !important
}

.part01-blue {
    background-color: #e4f0f8
}

.part01-blue .article-inner {
    padding: 0px
}

.part01-blue .block {
    background-color: transparent !important
}

.part01-blue .block .block-inner {
    padding: 0px
}

.part02-green {
    background-color: #d4e9d1
}

.part02-green .article-inner {
    padding: 0px
}

.part02-green .block {
    background-color: transparent !important
}

.part02-green .block .block-inner {
    padding: 0px
}

.article-04 {
    background-color: #e4f0f8
}

.article-04 .block {
    background-color: transparent !important
}

.part-04-02 {
    background-color: #9dd294
}

.part-04-02 .block {
    background-color: transparent !important
}

.padding-zero .article-inner {
    padding: 0px
}

.padding-zero .block {
    background-color: transparent !important
}

.padding-zero .block .block-inner {
    padding: 0px
}

.grey-bg {
    background-color: #ababab
}

.grey-bg .block {
    background-color: transparent !important
}

.white-patch {
    background-color: #ffffff;
    padding: 50px 20px;
    box-sizing: border-box;
    margin-bottom: 40px
}

.white-patch .component-header {
    text-align: center
}

.white-patch .component-header .component-body {
    display: inline-block;
    text-align: left;
    margin: 0px 0px 20px !important
}

@media screen and (max-width:768px) {
    .white-patch .component-header .component-body {
        display: revert
    }
}

@media screen and (max-width:520px) {
    .white-patch {
        padding: 20px
    }
}

.part01-intro {
    background-image: url('assets/part01.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed
}

.part01-intro .article-inner {
    padding: 0px
}

.part01-intro .block {
    background-color: transparent !important;
    height: 750px
}

.part01-intro .block .block-inner {
    padding: 0px
}

.part02-intro {
    background-image: url('assets/part02.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed
}

.part02-intro .article-inner {
    padding: 0px
}

.part02-intro .block {
    background-color: transparent !important;
    height: 750px
}

.part02-intro .block .block-inner {
    padding: 0px
}

.part03-intro {
    background-image: url('assets/part03.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed
}

.part03-intro .article-inner {
    padding: 0px
}

.part03-intro .block {
    background-color: transparent !important;
    height: 600px
}

.part03-intro .block .block-inner {
    padding: 0px
}

.part-03-02 {
    background-image: url('assets/part03-02.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed
}

.part-03-02 .article-inner {
    padding: 0px
}

.part-03-02 .block {
    background-color: transparent !important;
    height: 600px
}

.part-03-02 .block .block-inner {
    padding: 0px
}

.part-04 {
    background-image: url('assets/part-04.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed
}

.part-04 .article-inner {
    padding: 0px
}

.part-04 .block {
    background-color: transparent !important;
    height: 600px
}

.part-04 .block .block-inner {
    padding: 0px
}

@media screen and (max-idth:520px) {

    .part-01-text,
    .part-02-text,
    .part-03-text,
    .part-04-text {
        display: block
    }
}

.assessment {
    background-image: url('assets/assessment.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed
}

.assessment .article-inner {
    padding: 0px
}

.assessment .block {
    background-color: transparent !important;
    height: 600px
}

.assessment .block .block-inner {
    padding: 0px
}

.flipcard-style .flipcard-item {
    min-height: 220px;
    margin: 10px;
    width: 30.9%
}

@media screen and (max-width:1024px) {
    .flipcard-style .flipcard-item {
        width: 46%
    }
}

.flipcard-style .flipcard-item .front-body-title {
    font-size: 20px !important;
    height: 60px;
    font-weight: bold;
    padding: 15px 0px;
    box-sizing: border-box;
    background-color: #fff;
    top: 0px !important
}

.flipcard-style .front-item img {
    width: 100%
}

.flipcard-style .flipcard-item-face {
    box-shadow: 0 0 15px 2px rgba(176, 176, 176, 0.8);
    text-align: center;
    border-radius: 7px
}

.flipcard-style .item-0 .flipcard-item-back {
    background-image: url('course/en/images/flip01-back.png') !important;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: transparent !important
}

.flipcard-style .item-1 .flipcard-item-back {
    background-image: url('course/en/images/flip02-back.png') !important;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: transparent !important
}

.flipcard-style .item-2 .flipcard-item-back {
    background-image: url('course/en/images/flip03-back.png') !important;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: transparent !important
}

.flipcard-style .item-3 .flipcard-item-back {
    background-image: url('course/en/images/flip04-back.png') !important;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: transparent !important
}

.flipcard-style .item-4 .flipcard-item-back {
    background-image: url('course/en/images/flip05-back.png') !important;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: transparent !important
}

.flipcard-style .item-5 .flipcard-item-back {
    background-image: url('course/en/images/flip06-back.png') !important;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: transparent !important
}

.flipcard-style-02 .component-widget {
    width: 70%;
    margin: 0 auto
}

@media screen and (max-width:520px) {
    .flipcard-style-02 .component-widget {
        width: 100%
    }
}

.flipcard-style-02 .flipcard-item {
    height: 350px;
    margin: 10px;
    width: 45%
}

@media screen and (max-width:1920px) and (min-width:1600px) {
    .flipcard-style-02 .flipcard-item {
        height: 400px
    }
}

@media screen and (max-width:1024px) {
    .flipcard-style-02 .flipcard-item {
        height: 230px;
        margin: 10px;
        width: 43%
    }
}

@media screen and (max-width:768px) {
    .flipcard-style-02 .flipcard-item {
        height: 340px;
        margin: 10px;
        width: 100%
    }

    .flipcard-style-02 .flipcard-item img {
        width: 100%
    }
}

@media screen and (max-width:520px) {
    .flipcard-style-02 .flipcard-item {
        height: 230px;
        margin: 10px;
        width: 100%
    }
}

.flipcard-style-02 .flipcard-item .flipcard-item-front {
    border-radius: 25px
}

.flipcard-style-02 .flipcard-item .flipcard-item-front img {
    width: 100%
}

.flipcard-style-02 .flipcard-item .front-body-title {
    top: 35px !important;
    background-color: rgba(151, 245, 186, 0.58);
    font-size: 16px !important;
    height: 70px;
    text-align: left;
    justify-content: center;
    align-items: center;
    display: flex
}

@media only screen and (max-device-width:1920px) and (min-device-width:1900px) {
    .flipcard-style-02 .flipcard-item .front-body-title {
        position: absolute;
        left: 27px !important;
        width: 85.5% !important
    }
}

.flipcard-style-02 .flipcard-item .flipcard-item-back {
    background-color: #ffffff !important;
    border: 1px solid #5CA50B;
    border-radius: 25px;
    justify-content: center;
    align-items: center;
    text-align: center
}

@media only screen and (max-device-width:1920px) and (min-device-width:1900px) {
    .hotgraphic-component .device-pin0 {
        top: 28% !important;
        left: 66% !important
    }

    .hotgraphic-component .device-pin1 {
        top: 40% !important;
        left: 37% !important
    }

    .hotgraphic-component .device-pin2 {
        top: 26% !important;
        left: 23% !important
    }
}

@media screen and (max-width:1366px) {
    .hotgraphic-component .device-pin0 {
        top: 28% !important;
        left: 66% !important
    }

    .hotgraphic-component .device-pin1 {
        top: 40% !important;
        left: 37% !important
    }

    .hotgraphic-component .device-pin2 {
        top: 26% !important;
        left: 23% !important
    }
}

@media screen and (max-width:1024px) {
    .hotgraphic-component .device-pin0 {
        top: 16% !important;
        left: 70% !important
    }

    .hotgraphic-component .device-pin1 {
        top: 29% !important;
        left: 37% !important
    }

    .hotgraphic-component .device-pin2 {
        top: 16% !important;
        left: 15% !important
    }
}

@media screen and (max-width:768px) {
    .hotgraphic-component .device-pin0 {
        top: 10% !important;
        left: 70% !important
    }

    .hotgraphic-component .device-pin1 {
        top: 24% !important;
        left: 38% !important
    }

    .hotgraphic-component .device-pin2 {
        top: 10% !important;
        left: 14% !important
    }

    .hotgraphic-component .hotgraphic-graphic-pin {
        padding: 5px !important
    }
}

.dragAndDrop-component .dragAndDrop-inner .dragAndDrop-draggables-container .dragAndDrop-item-draggable-wrapper {
    position: relative;
    float: left;
    margin-right: 20px;
    padding-bottom: 35px;
    width: 15% !important;
    height: 14% !important
}

@media screen and (max-width:768px) {
    .dragAndDrop-component .dragAndDrop-inner .dragAndDrop-draggables-container .dragAndDrop-item-draggable-wrapper {
        width: 26% !important
    }
}

@media screen and (max-width:520px) {
    .dragAndDrop-component .dragAndDrop-inner .dragAndDrop-draggables-container .dragAndDrop-item-draggable-wrapper {
        padding-bottom: 12px
    }
}

@media screen and (max-width:520px) {
    .dragAndDrop-component .dragAndDrop-inner .dragAndDrop-draggables-container .dragAndDrop-item-draggable-wrapper a {
        padding: 10px 0px
    }
}

.dragAndDrop-component .dragAndDrop-inner .dragAndDrop-draggables-container .dragAndDrop-item-draggable {
    padding-top: 10px;
    color: #000 !important;
    font-size: 14px;
    border: 2px dashed #64af62;
    padding-left: 20px;
    background-color: #ffffff;
    height: 65px !important
}

@media screen and (max-width:1024px) {
    .dragAndDrop-component .dragAndDrop-inner .dragAndDrop-item-droppable .txt {
        margin-top: 0% !important
    }
}

@media screen and (max-width:768px) {
    .dragAndDrop-component .dragAndDrop-inner .dragAndDrop-item-droppable .txt {
        margin-top: 0% !important;
        padding: 5px 9px;
        box-sizing: border-box;
        height: 110px
    }
}

.dragAndDrop-component .dragAndDrop-item-background {
    border: 2px solid #64af62 !important;
    background-color: rgba(186, 186, 186, 0) !important;
    margin-right: .5% !important
}

.dragAndDrop-component .drag-item {
    width: 90%;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0 auto;
    height: auto;
    margin-top: 12%;
    right: 0
}

@media screen and (max-width:1024px) {
    .dragAndDrop-component .drag-item {
        top: 30%
    }
}

@media screen and (max-width:768px) {
    .dragAndDrop-component .drag-item {
        top: 135px
    }
}

.narrative-style .narrative-widget {
    position: relative
}

.narrative-style .narrative-content {
    background-color: #e4e4e4 !important;
    color: #000000 !important;
    width: 49% !important;
    overflow-y: auto;
    word-break: break-word;
    position: absolute;
    right: 0;
    bottom: 30px;
    top: 0;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    box-sizing: border-box
}

@media screen and (max-width:768px) {
    .narrative-style .narrative-content {
        padding: 7px;
        display: block
    }
}

.narrative-style .narrative-content ul li {
    margin-left: 0px !important
}

.narrative-style .narrative-slide-container {
    width: 50% !important;
    margin-right: 0% !important
}

@media screen and (max-width:767px) {
    .narrative-style .narrative-slide-container {
        width: 100% !important
    }
}

.narrative-style .narrative-controls {
    width: 40px !important;
    height: 40px !important;
    margin-top: -28px !important;
    background-color: #5CA50B !important
}

.narrative-style .narrative-controls .icon {
    font-size: 20px !important;
    margin: 7px !important
}

.narrative-controls {
    width: 40px !important;
    height: 40px !important;
    margin-top: -48px !important
}

.narrative-controls .icon {
    font-size: 20px !important;
    margin: 7px !important
}

.graphicOnMobile .graphic-widget {
    margin: 0 auto;
    text-align: center
}

@media screen and (max-width:1024px) {
    .graphicOnMobile img {
        display: none
    }

    .graphicOnMobile .component-inner {
        padding: 0px !important
    }
}

@media screen and (max-width:1024px) {
    .text-img-ipad .article-inner {
        padding: 0px 0px 0px !important
    }
}

@media screen and (max-width:1024px) {
    .text-img-ipad .b-80 .block-inner {
        padding: 30px 0px 0px !important
    }

    .text-img-ipad .b-85 .block-inner {
        padding: 0px 0px 0px !important
    }

    .text-img-ipad .b-90 .block-inner {
        padding: 0px 0px 30px !important
    }
}

@media screen and (max-width:1024px) {
    .component-full-OnMobile {
        width: 100%
    }
}

.component-full-OnMobile img {
    display: none
}

@media screen and (max-width:1024px) {
    .component-full-OnMobile img {
        display: block
    }
}

.nota-narr .narrative-title {
    font-size: 45px !important;
    margin-bottom: 50px !important;
    color: #46b035 !important
}

.nota-narr .narrative-body {
    display: block !important
}

.stacklist-style .stacklist-item {
    background-color: #b5dfae;
    border: 1px solid #5CA50B;
    padding: 14px;
    margin-bottom: 5px;
    color: #000000;
    font-size: 14px
}

.stacklist-style .stacklist-button button {
    background-color: #fff;
    color: #000000;
    border: 2px solid #5CA50B
}

.stacklist-style .stacklist-button button:hover {
    background-color: #b5dfae !important;
    border: 2px solid #5CA50B !important
}

.stacklist-style .component-body img {
    width: 65%;
    margin: 0px auto;
    margin-top: 30px
}

@media screen and (max-width:520px) {
    .stacklist-style .component-body img {
        width: 100%
    }
}

.stacklist-style .component-body img {
    text-align: center;
    display: block
}

.alternate-stack .blue-stack1,
.alternate-stack .blue-stack3,
.alternate-stack .blue-stack5 {
    background-color: rgba(0, 156, 222, 0.25)
}

.mcq-style .mcq-header .mcq-body {
    text-align: left;
    margin: 0 auto
}

.mcq-style label {
    background-color: #ffffff !important;
    border: 1px solid #72c265 !important;
    color: #000000 !important
}

.mcq-style-assessment label {
    background-color: #b5dfae !important;
    border: 1px solid #58b748 !important;
    color: #000000 !important
}

.accordion-style .accordion-item-title {
    background-color: #ffffff !important;
    border: 1px solid #5CA50B !important;
    color: #009cde !important;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    font-size: 16px !important
}

.accordion-style .accordion-item-title .accordion-item-title-icon {
    color: #009cde
}

.accordion-style .accordion-item-title:hover {
    background-color: #b5dfae !important;
    border: 1px solid #5CA50B !important;
    color: #009cde !important
}

.accordion-style .accordion-item-title:hover .accordion-item-title-icon {
    color: #009cde !important
}

.accordion-style .accordion-item-title.selected {
    color: #009cde !important;
    background-color: #b5dfae !important;
    border-color: #5CA50B !important
}

.accordion-style .accordion-item-title.selected .accordion-item-title-icon {
    color: #009cde !important
}

.accordion-style .accordion-item-title.visited {
    color: #009cde !important;
    background-color: #b5dfae !important;
    border-color: #5CA50B !important
}

.accordion-style .accordion-item-title.visited .accordion-item-title-icon {
    color: #009cde !important
}

.accordion-style .accordion-item-body {
    background-color: #e6e6e6 !important;
    border: none !important
}

.accordion-style .accordion-item-text {
    float: right;
    width: 50%;
    font-size: 14px;
    line-height: 1.6
}

@media screen and (max-width:768px) {
    .accordion-style .accordion-item-text {
        width: 100%;
        float: none
    }
}

.accordion-style .accordion-item-graphic {
    float: left;
    width: 45%
}

@media screen and (max-width:768px) {
    .accordion-style .accordion-item-graphic {
        width: 100%;
        float: none
    }
}

.part-01-text {
    width: 70%;
    margin: 0px auto;
    color: #ffffff;
    background-color: rgba(14, 115, 181, 0.8);
    top: 0;
    left: 0;
    right: 0;
    position: absolute;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

@media screen and (max-width:768px) {
    .part-01-text {
        width: 100%
    }
}

.part-01-text .component-title {
    color: #ffffff;
    text-align: center;
    font-size: 42px
}

.part1-text {
    width: 60%;
    margin: 0 auto
}

@media screen and (max-width:520px) {
    .part1-text {
        width: 100%
    }
}

.part1-text .part-subt {
    font-size: 28px;
    font-weight: bold;
    text-align: center
}

.part-02-text {
    width: 70%;
    margin: 0px auto;
    color: #ffffff;
    text-align: center;
    background-color: rgba(81, 177, 84, 0.8);
    top: 0;
    left: 0;
    right: 0;
    position: absolute;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

@media screen and (max-width:768px) {
    .part-02-text {
        width: 100%
    }
}

.part-02-text .component-title {
    color: #ffffff;
    font-size: 42px
}

.part-02-text .component-body {
    text-align: left
}

.part-02-text .part2-paraText {
    text-align: center;
    margin-bottom: 30px
}

.part-03-text {
    width: 70%;
    margin: 0px auto;
    color: #009cde;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.8);
    top: 0;
    left: 0;
    right: 0;
    position: absolute;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold
}

@media screen and (max-width:768px) {
    .part-03-text {
        width: 100%
    }
}

.part-03-text .component-title {
    color: #009cde;
    margin-bottom: 40px;
    font-size: 42px
}

.part-03-text .component-body {
    text-align: left;
    margin: 0 auto
}

.part3-box1 {
    margin-bottom: 30px
}

.part-03-text-mapd {
    width: 70%;
    margin: 0px auto;
    color: #009cde;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.8);
    top: 0;
    left: 0;
    right: 0;
    position: absolute;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold
}

@media screen and (max-width:768px) {
    .part-03-text-mapd {
        width: 80%
    }
}

@media screen and (max-width:520px) {
    .part-03-text-mapd {
        width: 90%
    }
}

.part-03-text-mapd .component-title {
    color: #009cde;
    margin-bottom: 40px;
    font-size: 42px
}

.part-03-text-mapd .component-body {
    text-align: left;
    margin: 0 auto;
    font-size: 20px !important;
    line-height: 1.5
}

.part3-box1 {
    margin-bottom: 30px;
    text-align: left
}

.numbered-text .component-body {
    text-align: center;
    margin: 0 auto;
    font-size: 20px !important;
    line-height: 1.5
}

.numbered-text .verticle-line-04 {
    display: inline-block;
    text-align: left
}

.part-04-text {
    width: 70%;
    margin: 0px auto;
    color: #009cde;
    background-color: rgba(255, 255, 255, 0.9);
    top: 0;
    left: 0;
    right: 0;
    position: absolute;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

@media screen and (max-width:768px) {
    .part-04-text {
        width: 100%
    }
}

.part-04-text .component-title {
    color: #009cde;
    margin-bottom: 30px;
    font-size: 42px;
    text-align: center
}

.part-04-text .component-body {
    text-align: left;
    font-size: 20px;
    line-height: 1.4;
    font-weight: bold;
    margin: 0 auto
}

.part-04-text .component-body p {
    margin-top: 0px;
    margin-bottom: 0px
}

.line {
    width: 70%;
    height: 1px;
    background-color: #ffffff;
    margin: 5% auto
}

.line-blue {
    width: 100%;
    margin: 0px auto;
    height: 1px;
    background-color: #0075c1;
    margin-bottom: 5%
}

.expose-style {
    margin: 0px auto;
    padding: 50px 20px;
    box-sizing: border-box
}

@media screen and (max-width:1024px) {
    .expose-style {
        padding: 30px
    }
}

@media screen and (max-width:520px) {
    .expose-style .expose-item {
        width: 100% !important;
        margin-bottom: 10px
    }
}

.expose-style .component-title {
    text-align: center
}

.expose-style .component-widget {
    width: 85%;
    margin: 0px auto
}

@media screen and (max-width:768px) {
    .expose-style .component-widget {
        width: 100% !important
    }
}

.expose-style .expose-item-inner .expose-item-cover .text {
    background-color: #ffffff !important;
    border: 1px solid #72c265 !important;
    color: #009cde !important;
    height: 220px
}

.expose-style .expose-item-content {
    background-color: #b5dfae !important;
    height: 220px !important;
    border: 1px solid #72c265 !important;
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
    overflow-y: auto;
    overflow-x: hidden
}

.expose-style-02 {
    margin: 0px auto;
    text-align: left;
    padding: 50px 20px;
    background-color: #fff
}

.expose-style-02 .component-body {
    font-size: 16px
}

.expose-style-02 .expose-item {
    margin-bottom: 20px
}

@media screen and (max-width:1024px) {
    .expose-style-02 .expose-item {
        width: 48% !important;
        float: left;
        margin-right: 10px
    }
}

@media screen and (max-width:520px) {
    .expose-style-02 .expose-item {
        width: 100% !important
    }
}

.expose-style-02 .expose-item img {
    width: 40%
}

@media screen and (max-width:1024px) {
    .expose-style-02 .expose-item img {
        width: 30% !important
    }
}

.expose-style-02 .expose-item-body {
    font-size: 14px;
    line-height: 1.3;
    text-align: center;
    padding: 0px !important
}

.expose-style-02 .component-title {
    text-align: center
}

.expose-style-02 .component-widget {
    width: 100%
}

.expose-style-02 .expose-item-inner .expose-item-cover .text {
    background-color: #ffffff !important;
    border: 1px solid #72c265 !important;
    color: #009cde !important;
    height: 215px;
    padding: 10px;
    box-sizing: border-box;
    -ms-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box
}

.expose-style-02 .expose-item-content {
    background-color: #b5dfae !important;
    height: 210px !important;
    border: 1px solid #72c265 !important;
    word-break: break-word;
    overflow-y: auto
}

.part01-last-component {
    margin: 0px auto;
    text-align: center;
    color: #009cde;
    font-size: 32px;
    font-weight: bold;
    line-height: 1.3
}

.center-component-body-left .component-title,
.center-component-body-left .component-instruction {
    text-align: center
}

.center-component-body-left .component-body {
    text-align: left;
    font-size: 14px;
    line-height: 1.4
}

.center-component-body-left .component-body p {
    margin-top: 0 !important;
    margin-bottom: 0 !important
}

.center-component-body-left .component-body img {
    margin-top: 40px;
    margin-bottom: 20px
}

.main-title-3blocks .component-title {
    text-align: center;
    margin: 0px auto;
    color: #46b035;
    font-size: 52px;
    margin-bottom: 50px
}

.main-block-3pages .block-inner {
    padding: 60px 0px 0px !important
}

.article-center .article-inner {
    padding: 0px 0px 0px !important
}

.dnd-text .text-body {
    color: #009cde;
    font-size: 28px;
    line-height: 1.2
}

.dnd-text .component-title {
    text-align: center
}

.dragAndDrop-component .dragAndDrop-inner .dragAndDrop-draggables-container .dragAndDrop-item-draggable-wrapper {
    position: relative;
    float: left;
    margin-right: 20px;
    padding-bottom: 35px;
    width: 17% !important;
    height: 14% !important
}

@media screen and (max-width:520px) {
    .dragAndDrop-component .dragAndDrop-inner .dragAndDrop-draggables-container .dragAndDrop-item-draggable-wrapper {
        width: 25% !important
    }
}

.dragAndDrop-component .dragAndDrop-inner .dragAndDrop-draggables-container .dragAndDrop-item-draggable {
    padding-top: 10px;
    color: #000 !important;
    font-size: 12px;
    border: 2px dashed #64af62;
    padding-left: 20px;
    background-color: #ffffff;
    height: 40px !important;
    line-height: 1.4
}

.dragAndDrop-component .dragAndDrop-inner .dragAndDrop-item-background {
    border: 2px solid #64af62 !important;
    background-color: rgba(186, 186, 186, 0) !important;
    margin-right: .5% !important
}

.dragAndDrop-component .dragAndDrop-inner .drag-item {
    width: 90%;
    position: relative;
    top: 0;
    left: 0;
    margin: 0 auto;
    height: auto;
    right: 0
}

@media screen and (max-width:768px) {}

.verticle-line {
    border-left: 4px solid #009cde;
    margin-left: 20px;
    padding-left: 18px
}

.verticle-line-02 {
    border-left: 4px solid #009cde;
    margin-left: 20px;
    padding-left: 18px
}

.verticle-line-03 {
    border-left: 4px solid #009cde;
    margin-left: 20px;
    padding-left: 18px
}

.verticle-line-04 {
    display: inline-block;
    text-align: left
}

.part2-para {
    font-size: 14px;
    margin-top: 0;
    margin-bottom: 0;
    line-height: 1.5
}

.para2-box1 {
    margin-top: 15px;
    font-size: 20px;
    margin-bottom: 5px
}

.para5-box5 {
    font-size: 20px;
    width: 86%;
    margin: 45px auto
}

.part2-3 {
    background-image: url('assets/part2-3.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed
}

.part2-3 .article-inner {
    padding: 0px
}

.part2-3 .block {
    background-color: transparent !important;
    height: 750px
}

.part2-3 .block .block-inner {
    padding: 0px
}

.line-green {
    width: 70%;
    margin: 0px auto;
    height: 1px;
    background-color: #46b035;
    margin-bottom: 5%
}

.left-title .component-title {
    text-align: center
}

.part2-text-page .text-header {
    text-align: center
}

.part2-text-page .component-title {
    display: inline-block;
    text-align: left !important
}

.part2-text-page .component-title .mid-title {
    text-align: center
}

.part2-text-page .text-body {
    text-align: left
}

.tab-style .tabs-content-items {
    background-color: #e0f2fc
}

.tab-style .tab-item-inner {
    background-color: #63666A !important;
    padding: 25px 5px 25px;
    box-sizing: border-box;
    height: 70px;
    font-weight: bold
}

@media screen and (max-width:1024px) {
    .tab-style .tab-item-inner {
        font-size: 12px
    }
}

@media screen and (max-width:768px) {
    .tab-style .tab-item-inner {
        height: 120px
    }
}

@media screen and (max-width:520px) {
    .tab-style .tab-item {
        height: 150px
    }
}

.tab-style ul li {
    margin-left: 0px
}

.tab-style p {
    overflow-wrap: break-word;
    word-wrap: break-word
}

.article04 {
    background-image: url('assets/article-04.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed
}

.article04 .article-inner {
    padding: 0px
}

.article04 .block {
    background-color: transparent !important;
    height: 600px
}

.article04 .block .block-inner {
    padding: 0px
}

@media screen and (max-width:1024px) {
    .article04 .block {
        height: 400px
    }
}

.completion {
    background-image: url('assets/completion.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed
}

.completion .article-inner {
    padding: 0px
}

.completion .block {
    background-color: transparent !important;
    height: 600px
}

.completion .block .block-inner {
    padding: 0px
}

.completion-text {
    width: 70%;
    margin: 0px auto;
    text-align: left;
    background-color: rgba(255, 255, 255, 0.8);
    top: 0;
    left: 0;
    right: 0;
    position: absolute;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

@media screen and (max-width:768px) {
    .completion-text {
        width: 80%
    }
}

@media screen and (max-width:520px) {
    .completion-text {
        width: 90%
    }
}

.completion-text .component-title {
    color: #0075c1;
    text-align: center
}

.completion-text .close-button {
    border-radius: 40px;
    width: 140px
}

.tab-02-article .article-inner {
    padding: 0px 0 60px !important
}

.tab-01-article .article-inner {
    padding: 60px 0 0px !important
}

.first-stack .stacklist-items {
    width: 70%;
    margin: 0 auto
}

@media screen and (max-width:520px) {
    .first-stack .stacklist-items {
        width: 100%
    }
}

.incorrect .notify-popup {
    background-color: #B5DFAE !important
}

.incorrect .notify-popup-body {
    color: #000137 !important
}

.incorrect .notify-popup-done {
    border: 2px solid #000137 !important
}

.incorrect .notify-popup-done .notify-popup-icon-close {
    color: #000137 !important
}

.correct .notify-popup {
    background-color: #5CA50B !important
}

.block-zero .block-inner {
    padding: 0
}

.block-zero .component .component-inner {
    padding: 0
}

.trickle-button-inner button {
    background-color: #fff !important;
    width: 25% !important;
    color: #009cde !important;
    border-radius: 50px !important;
    border: 2px solid #009cde;
    font-weight: bold !important
}

@media screen and (max-width:1024px) {
    .trickle-button-inner button {
        width: 27% !important
    }
}

@media screen and (max-width:768px) {
    .trickle-button-inner button {
        width: 60% !important
    }
}

.trickle-button-inner button:hover {
    border: 2px solid #009cde !important
}

.page-trickle .trickle-button-inner button {
    background-color: #009cde !important;
    width: 50% !important;
    color: #fff !important;
    border-radius: 20px !important;
    font-weight: bold !important
}

@media screen and (max-width:768px) {
    .page-trickle .trickle-button-inner button {
        width: 70% !important
    }
}

.mcq-patch .trickle-button-inner button {
    background-color: #009cde !important;
    width: 50% !important;
    color: #fff !important;
    border-radius: 0px !important;
    font-weight: bold !important;
    width: 72% !important
}

@media screen and (max-width:768px) {
    .mcq-patch .trickle-button-inner button {
        width: 70% !important
    }
}

.mcq-patch .white-patch {
    padding: 50px 20px 0px 20px !important;
    box-sizing: border-box;
    margin-bottom: 20px !important
}

.trickle-button-component .component-inner {
    padding: 20px !important
}

@media screen and (max-width:520px) {
    .trickle-button-component .component-inner {
        padding: 0px !important
    }
}

@media screen and (max-width:760px) {
    .notify-popup-body a {
        word-break: break-word
    }
}

.notify-popup-title {
    display: none
}

.pins-bottom .block-inner {
    padding: 60px 0px 120px !important
}

.tick-img li {
    list-style-image: url(course/en/images/tick-mark01.png);
    margin-left: 20px !important
}

.tab-left-p {
    margin-left: 20px !important;
    font-weight: bold
}

.middle-text-stack {
    width: 40rem;
    text-align: left;
    margin: 0 auto
}

@media screen and (max-width:760px) {
    .middle-text-stack {
        width: auto
    }
}

.text-img-ipad .article-inner {
    padding: 0px 0px 60px !important
}

.avoid-word-break {
    white-space: normal;
}

.loading .loader-gif {
    top: 45%;
    left: 45%
}

@media screen and (max-width:520px) {
    .flipcard-item {
        margin: 0 0 10px 0 !important
    }
}

.c-110 .hotgraphic-graphic img {
    width: 100%
}

@media screen and (max-width:1024px) {
    .b-90 .trickle-button-inner button {
        width: 42% !important
    }
}

@media screen and (max-width:1366px) {
    .hotgraphic-graphic-pin-icon {
        font-size: 38px !important;
        height: 38px !important;
        width: 38px !important
    }
}

@media screen and (max-width:1024px) {
    .hotgraphic-graphic-pin-icon {
        font-size: 30px !important;
        height: 30px !important;
        width: 30px !important
    }
}

@media screen and (max-width:768px) {
    .hotgraphic-graphic-pin-icon {
        font-size: 25px !important;
        height: 25px !important;
        width: 25px !important
    }
}

.accordion-component .accordion-item {
    margin-bottom: 5px
}

.dir-rtl .accordion-component .accordion-item-title-icon {
    left: inherit;
    right: 20px
}

.accordion-component .accordion-item-title {
    color: #ffffff;
    background-color: #009cde;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 64px;
    font-size: 24px;
    font-weight: 300;
    line-height: 120%
}

@media all and (max-width:520px) {
    .accordion-component .accordion-item-title {
        font-size: 11px
    }
}

.dir-rtl .accordion-component .accordion-item-title {
    padding-left: inherit;
    padding-right: 64px
}

.accordion-component .accordion-item-title.visited {
    color: #ffffff;
    background-color: #64737a;
    border-color: #64737a
}

.accordion-component .accordion-item-title.visited .accordion-item-title-icon {
    color: #ffffff
}

.accordion-component .accordion-item-title.selected {
    color: #ffffff;
    background-color: #005478;
    border-color: #005478
}

.accordion-component .accordion-item-title.selected .accordion-item-title-icon {
    color: #ffffff
}

.no-touch .accordion-component .accordion-item-title:hover {
    color: #ffffff;
    background-color: #005478;
    border-color: #005478
}

.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;
    background-color: #005478;
    border-color: #005478
}

.no-touch .accordion-component .accordion-item-title.visited:hover .accordion-item-title-icon {
    color: #ffffff
}

.no-touch .accordion-component .accordion-item-title.selected:hover {
    background-color: #005478
}

.accordion-component .accordion-item-body {
    color: #000000;
    background-color: #ffffff;
    border: 3px solid #009cde;
    border-color: #005478;
    border-top: 0
}

.accordion-component .accordion-item-body-inner {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px
}

.results-retry-button {
    margin-top: 30px;
    margin-bottom: 30px
}

.results-retry-button button {
    padding: 14px 14px 14px 14px
}

.boxmenu-menu {
    background: #ffffff
}

.boxmenu-menu .menu-container {
    width: 100%
}

.boxmenu-menu .menu-container-inner {
    padding: 0
}

.boxmenu-menu .menu-header {
    margin-bottom: -30px;
    background-color: #546e7a
}

.boxmenu-menu .menu-header-inner {
    max-width: 900px;
    margin: auto;
    padding: 100px 0 100px;
    text-align: center
}

@media all and (max-width:920px) {
    .boxmenu-menu .menu-header-inner {
        padding: 50px 20px 100px
    }
}

@media all and (max-width:540px) {
    .boxmenu-menu .menu-header-inner {
        padding: 20px 10px 20px
    }
}

.boxmenu-menu .menu-title {
    margin: 20px 0 20px;
    color: #ffffff
}

.boxmenu-menu .menu-body {
    margin: 30px 0;
    color: #ffffff
}

.boxmenu-menu .menu-body a {
    color: #ffffff
}

.boxmenu-menu .menu-item {
    margin: 0 auto 30px
}

.boxmenu-menu .menu-item.nth-child-even .menu-item-inner {
    margin-left: 2%
}

.dir-rtl .boxmenu-menu .menu-item.nth-child-even .menu-item-inner {
    margin-right: 2%
}

.boxmenu-menu .menu-item.nth-child-odd .menu-item-inner {
    margin-right: 2%
}

.dir-rtl .boxmenu-menu .menu-item.nth-child-odd .menu-item-inner {
    margin-left: 2%
}

.boxmenu-menu .menu-item-inner {
    position: relative;
    max-width: 410px;
    margin: auto;
    padding: 20px 20px 20px 20px;
    background-color: #009cde;
    color: #ffffff
}

.boxmenu-menu .menu-item-title {
    margin: 20px 0 20px;
    padding: 0;
    font-size: 24px;
    font-weight: 300;
    line-height: 120%
}

@media all and (max-width:520px) {
    .boxmenu-menu .menu-item-title {
        font-size: 11px
    }
}

.boxmenu-menu .menu-item-body {
    margin-bottom: 30px;
    padding: 0
}

.boxmenu-menu .menu-item-instruction {
    margin-bottom: 14px;
    padding: 0
}

.boxmenu-menu .menu-item-indicator {
    width: 60px;
    float: none;
    padding: 0;
    position: absolute;
    right: 24px;
    bottom: 26px
}

.dir-rtl .boxmenu-menu .menu-item-indicator {
    left: 24px;
    right: auto
}

.boxmenu-menu .pagelevelprogress-indicator {
    background-color: #009cde;
    border-color: #ffffff
}

.boxmenu-menu .pagelevelprogress-indicator-inner {
    border-color: #009cde
}

.boxmenu-menu .pagelevelprogress-indicator-bar {
    background-color: #ffffff
}

.boxmenu-menu .menu-item-duration {
    position: absolute;
    right: 20px;
    float: none
}

.dir-rtl .boxmenu-menu .menu-item-duration {
    float: none;
    left: 20px;
    right: auto
}

.boxmenu-menu .menu-item-button {
    padding: 0
}

.boxmenu-menu .menu-item-button button {
    padding: 14px 28px 14px 28px;
    background-color: #0075c1;
    color: #ffffff
}

.boxmenu-menu .menu-item-button button:hover {
    background-color: #00568e;
    color: #ffffff
}

.boxmenu-menu .menu-item-button button.visited {
    background-color: #ababab;
    color: #fff
}

@media all and (max-width:760px) {
    .boxmenu-menu .menu-inner {
        padding: 0
    }

    .boxmenu-menu .menu-title-inner {
        padding: 0
    }

    .boxmenu-menu .menu-body-inner {
        padding: 0
    }

    .boxmenu-menu .menu-item.nth-child-even .menu-item-inner,
    .boxmenu-menu .menu-item.nth-child-odd .menu-item-inner,
    .dir-rtl .boxmenu-menu .menu-item.nth-child-even .menu-item-inner,
    .dir-rtl .boxmenu-menu .menu-item.nth-child-odd .menu-item-inner {
        margin: 0 auto
    }
}

@media all and (max-width:760px) {
    .gmcq-component .gmcq-item {
        width: 100%
    }

    .gmcq-component .gmcq-item.even label,
    .gmcq-component .gmcq-item.odd label {
        margin-left: 0%;
        margin-right: 0%
    }
}

.gmcq-component.col-4 .gmcq-item {
    width: 25%
}

.gmcq-component.col-4 .gmcq-item.item-1 label,
.gmcq-component.col-4 .gmcq-item.item-2 label {
    margin-left: 2.5%;
    margin-right: 2.5%
}

@media all and (max-width:760px) {
    .gmcq-component.col-4 .gmcq-item {
        width: 100%
    }

    .gmcq-component.col-4 .gmcq-item.even label,
    .gmcq-component.col-4 .gmcq-item.odd label {
        margin-left: 0%;
        margin-right: 0%
    }
}

.gmcq-component .gmcq-item label {
    color: #ffffff;
    border: none;
    background-color: transparent
}

.gmcq-component .gmcq-item label .gmcq-answer-icon {
    color: #009cde
}

.gmcq-component .gmcq-item label.selected {
    color: #005478;
    background-color: transparent
}

.gmcq-component .gmcq-item label.selected .gmcq-item-icon {
    color: #005478
}

.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: #005478
}

.gmcq-component .gmcq-item label.disabled .gmcq-item-icon {
    color: #ababab
}

.gmcq-component .gmcq-item label.disabled .gmcq-item-inner {
    color: #ababab
}

.gmcq-component .gmcq-item-inner {
    margin-left: 48px;
    color: #009cde;
    padding-bottom: 20px;
    padding-top: 20px;
    padding-left: 0;
    padding-right: 0
}

.dir-rtl .gmcq-component .gmcq-item-inner {
    margin-left: inherit;
    margin-right: 48px
}

.gmcq-component .gmcq-item input {
    filter: alpha(opacity=0);
    opacity: 0
}

.gmcq-component .gmcq-correct-icon {
    color: #82ca9c
}

.gmcq-component .gmcq-incorrect-icon {
    color: #f26c4f
}

.gmcq-component .gmcq-widget.show-user-answer label.selected .gmcq-item-inner {
    color: #005478
}

.gmcq-component .gmcq-widget.show-correct-answer label.selected .gmcq-item-inner {
    color: #005478
}

.gmcq-component .gmcq-widget.disabled .gmcq-item label.selected.disabled {
    background-color: transparent
}

.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: #ababab;
    background-color: transparent;
    border-color: #ababab;
    border: none
}

.no-touch .gmcq-component .gmcq-widget:not(.disabled) .gmcq-item label:hover {
    color: #005478;
    background-color: transparent
}

.no-touch .gmcq-component .gmcq-widget:not(.disabled) .gmcq-item label:hover .gmcq-item-icon {
    color: #005478
}

.no-touch .gmcq-component .gmcq-widget:not(.disabled) .gmcq-item label:hover .gmcq-item-inner {
    color: #005478
}

.hotgraphic-component .hotgraphic-graphic-pin.visited .hotgraphic-graphic-pin-icon {
    color: #a9a4a4
}

.no-touch .hotgraphic-component .hotgraphic-graphic-pin:hover {
    background-color: #ffffff
}

.no-touch .hotgraphic-component .hotgraphic-graphic-pin:hover .hotgraphic-graphic-pin-icon {
    color: #005478
}

.hotgraphic-component .hotgraphic-popup {
    background-color: #ffffff
}

.hotgraphic-component .hotgraphic-popup-toolbar {
    background-color: #009cde
}

.hotgraphic-component .hotgraphic-popup-nav {
    background-color: #009cde
}

.no-touch .hotgraphic-component .hotgraphic-popup-done:hover .hotgraphic-popup-close {
    color: #ffffff
}

.hotgraphic-component .hotgraphic-popup-arrow-l,
.hotgraphic-component .hotgraphic-popup-arrow-r,
.hotgraphic-component .hotgraphic-popup-close {
    padding: 20px;
    color: #ffffff
}

.hotgraphic-component .hotgraphic-popup-count {
    padding: 20px;
    color: #ffffff
}

.no-touch .hotgraphic-component .hotgraphic-popup-controls:hover .hotgraphic-popup-arrow-l,
.no-touch .hotgraphic-component .hotgraphic-popup-controls:hover .hotgraphic-popup-arrow-r {
    color: #ffffff
}

.hotgraphic-component .hotgraphic-popup-inner {
    padding: 20px
}

.hotgraphic-component .hotgraphic-content-title {
    font-size: 24px;
    font-weight: 300;
    line-height: 120%;
    margin-bottom: 20px
}

@media all and (max-width:520px) {
    .hotgraphic-component .hotgraphic-content-title {
        font-size: 11px
    }
}

.matching-component .matching-select-container {
    background-color: #009cde
}

.matching-component .matching-select-state .matching-select-icon {
    color: #ffffff
}

.matching-component .matching-select-state .matching-correct-icon {
    color: #82ca9c
}

.matching-component .matching-select-state .matching-incorrect-icon {
    color: #f26c4f
}

.matching-component .select2-container .select2-selection--single {
    padding: 20px 0 20px 0;
    background-color: #009cde;
    color: #ffffff
}

.no-touch .matching-component .select2-container .select2-selection--single:hover {
    background-color: #005478;
    color: #ffffff
}

.matching-component .select2-container .select2-selection--single .select2-selection__rendered {
    color: #ffffff
}

.matching-component .select2-container .select2-selection--single .select2-selection__arrow b {
    border-color: #ffffff transparent transparent transparent
}

.matching-component .select2-container.select2-container--open.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #ffffff transparent
}

.matching-component .matching-widget.submitted .matching-select-container {
    background-color: #ababab
}

.no-touch .matching-select-icon:hover {
    color: #ffffff
}

.no-touch .matching-select-container:hover {
    color: #ffffff;
    background-color: #005478
}

.select2-container--default span.select2-dropdown,
.dir-rtl .select2-container--default span.select2-dropdown {
    background-color: #009cde;
    color: #ffffff
}

.select2-container--default li.select2-results__option--highlighted[aria-selected],
.dir-rtl .select2-container--default li.select2-results__option--highlighted[aria-selected],
.select2-container--default li.select2-results__option[aria-selected=true],
.dir-rtl .select2-container--default li.select2-results__option[aria-selected=true] {
    background-color: #005478;
    color: #ffffff
}

.select2-container--default.select2-container--disabled span.select2-selection--single,
.dir-rtl .select2-container--default.select2-container--disabled span.select2-selection--single,
.no-touch .select2-container--default.select2-container--disabled span.select2-selection--single:hover,
.no-touch .dir-rtl .select2-container--default.select2-container--disabled span.select2-selection--single:hover {
    background-color: #ababab;
    color: #ffffff
}

.mcq-component .mcq-item {
    background-color: #009cde;
    position: relative
}

.mcq-component .mcq-item label {
    color: #ffffff;
    display: block;
    margin-bottom: 5px;
    position: relative;
    z-index: 1;
    background-color: #009cde;
    cursor: pointer
}

.mcq-component .mcq-item label.selected {
    color: #009cde !important;
    background-color: #b5dfae !important;
    border-color: #5CA50B !important
}

.mcq-component .mcq-item label.selected .mcq-answer-icon {
    color: #009cde
}

.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 #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"
}

.mcq-component .mcq-item label.selected .mcq-item-icon {
    color: #009cde
}

.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-item-inner {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-right: 20px;
    padding-left: 64px
}

.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: #005478;
    border-color: #005478;
    cursor: default
}

.mcq-widget.disabled .mcq-item label.disabled {
    color: #ffffff;
    background-color: #ababab;
    border-color: #ababab;
    cursor: default
}

.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 {
    background-color: #b5dfae !important;
    border: 1px solid #5CA50B !important;
    color: #009cde !important
}

.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: #ababab;
    border-color: #ababab
}

.no-touch .mcq-widget:not(.disabled) .mcq-item label.disabled:hover {
    color: #ffffff;
    background-color: #ababab;
    border-color: #ababab
}

.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
}

.media-component .media-transcript:hover {
    color: #ffffff;
    background-color: #00568e
}

.media-component .media-transcript-button-container {
    padding-left: 0px;
    padding-right: 0px
}

.narrative-component .narrative-content-title {
    margin-bottom: 20px;
    font-size: 24px;
    font-weight: 300;
    line-height: 120%
}

@media all and (max-width:520px) {
    .narrative-component .narrative-content-title {
        font-size: 11px
    }
}

.narrative-component .narrative-content {
    background: #009cde;
    color: #ffffff
}

.narrative-component .narrative-controls {
    width: 60px;
    height: 60px;
    margin-top: -48px;
    background-color: #009cde
}

.narrative-component .narrative-controls:hover {
    background-color: #005478
}

.narrative-component .narrative-controls:hover .icon {
    color: #ffffff
}

.narrative-component .narrative-controls .icon {
    font-size: 30px;
    font-weight: bold;
    margin: 16px;
    color: #ffffff
}

.narrative-component .narrative-text-controls .narrative-content .narrative-content-inner .narrative-controls-container {
    top: 0
}

.narrative-component .narrative-text-controls .narrative-content .narrative-content-inner .narrative-controls-container .narrative-controls {
    width: auto;
    height: auto;
    margin-top: 36px
}

.narrative-component .narrative-text-controls .narrative-content .narrative-content-inner .narrative-controls-container .narrative-controls .icon {
    font-size: 24px
}

.narrative-component .narrative-text-controls .narrative-content .narrative-content-inner .narrative-controls-container .narrative-indicators {
    margin-top: 12px;
    text-align: center;
    width: 100%;
    left: 0
}

.narrative-component .narrative-text-controls .narrative-content .narrative-content-inner .narrative-controls-container .narrative-indicators .narrative-progress {
    display: inline-block;
    background-color: #0078ab
}

.narrative-component .narrative-text-controls .narrative-content .narrative-content-inner .narrative-controls-container .narrative-indicators .narrative-progress.selected {
    background-color: #e6e6e6
}

.narrative-component .narrative-text-controls .narrative-content .narrative-content-inner .narrative-content-item {
    padding-top: 64px
}

.narrative-component .narrative-progress {
    background-color: #b5dfae;
    border: inherit
}

.narrative-component .narrative-progress.selected {
    background-color: #46b035
}

.narrative-component .narrative-strapline-title {
    background-color: #009cde;
    color: #ffffff;
    font-size: 24px;
    font-weight: 300;
    line-height: 120%
}

@media all and (max-width:520px) {
    .narrative-component .narrative-strapline-title {
        font-size: 11px
    }
}

.narrative-component .narrative-strapline-title .icon {
    padding: 20px 20px 20px;
    color: #ffffff
}

.narrative-component .narrative-strapline-title:hover {
    background-color: #005478;
    color: #ffffff
}

.narrative-component .narrative-strapline-title:hover .icon {
    color: #ffffff
}

.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
}

.pagelevelprogress-indicator-bar {
    transition: width .3s ease-in
}

.pagelevelprogress-navigation.base {
    padding: 20px
}

.no-touch .pagelevelprogress-navigation.base:hover .pagelevelprogress-indicator {
    background-color: #999;
    border-color: #009cde
}

.no-touch .pagelevelprogress-navigation.base:hover .pagelevelprogress-indicator-inner {
    border-color: #999
}

.no-touch .pagelevelprogress-navigation.base:hover .pagelevelprogress-indicator-bar {
    background-color: #000d12
}

.no-touch .pagelevelprogress-navigation.base:hover .page-level-progress-plus-icon {
    color: #009cde
}

.pagelevelprogress-navigation.base .pagelevelprogress-indicator {
    transition: all .3s ease-in;
    background-color: #ffffff;
    border: 2px solid #009cde;
    border-radius: 50px
}

.pagelevelprogress-navigation.base .pagelevelprogress-indicator-inner {
    border: 1px solid #ffffff
}

.pagelevelprogress-navigation.base .pagelevelprogress-indicator-bar {
    left: 0;
    background-color: #009cde
}

.dir-rtl .pagelevelprogress-navigation.base .pagelevelprogress-indicator-bar {
    right: 0;
    left: auto
}

.drawer .pagelevelprogress-item-title {
    background-color: #009cde;
    color: #ffffff
}

.drawer .pagelevelprogress-item-title.drawer-item-open.disabled {
    background-color: #ababab;
    color: #ffffff;
    font-size: 18px;
    font-weight: 300
}

.no-touch .drawer .pagelevelprogress-item-title.drawer-item-open.disabled:hover {
    background-color: #ababab;
    color: #ffffff
}

.no-touch .drawer .pagelevelprogress-item-title.drawer-item-open.disabled:hover .page-level-progress-indicator {
    background-color: transparent
}

.drawer .pagelevelprogress-item-title .pagelevelprogress-indicator {
    width: 15%;
    background-color: #009cde;
    border-color: #ffffff
}

.drawer .pagelevelprogress-item-title .pagelevelprogress-indicator-inner {
    border-color: #009cde
}

.drawer .pagelevelprogress-item-title .pagelevelprogress-indicator-bar {
    background-color: #ffffff
}

.no-touch .drawer .pagelevelprogress-item-title:hover {
    background-color: #000d12;
    color: #ffffff
}

.no-touch .drawer .pagelevelprogress-item-title:hover .pagelevelprogress-indicator {
    background-color: #000d12;
    border-color: #999
}

.no-touch .drawer .pagelevelprogress-item-title:hover .pagelevelprogress-indicator-inner {
    border-color: #000d12
}

.no-touch .drawer .pagelevelprogress-item-title:hover .pagelevelprogress-indicator-bar {
    background-color: #999
}

.menu-header .pagelevelprogress-indicator,
.page-header .pagelevelprogress-indicator {
    background-color: #546e7a;
    border-color: #ffffff
}

.menu-header .pagelevelprogress-indicator-inner,
.page-header .pagelevelprogress-indicator-inner {
    border-color: #546e7a
}

.menu-header .pagelevelprogress-indicator-bar,
.page-header .pagelevelprogress-indicator-bar {
    background-color: #ffffff
}

.page .pagelevelprogress-indicator,
.article .pagelevelprogress-indicator,
.block .pagelevelprogress-indicator,
.component .pagelevelprogress-indicator {
    background-color: #ffffff;
    border-color: #009cde
}

.page .pagelevelprogress-indicator-inner,
.article .pagelevelprogress-indicator-inner,
.block .pagelevelprogress-indicator-inner,
.component .pagelevelprogress-indicator-inner {
    border-color: #ffffff
}

.page .pagelevelprogress-indicator-bar,
.article .pagelevelprogress-indicator-bar,
.block .pagelevelprogress-indicator-bar,
.component .pagelevelprogress-indicator-bar {
    background-color: #009cde
}

.resources .resources-filter button {
    color: #ffffff;
    border-bottom: 1px solid #0d1113;
    -webkit-transition: background-color .25s ease-in, color .25s ease-in, border-color .25s ease-in;
    -moz-transition: background-color .25s ease-in, color .25s ease-in, border-color .25s ease-in;
    -ms-transition: background-color .25s ease-in, color .25s ease-in, border-color .25s ease-in;
    transition: background-color .25s ease-in, color .25s ease-in, border-color .25s ease-in;
    padding: 0px;
    font-size: 18px;
    text-align: center
}

.resources .resources-filter button span {
    border: none;
    padding: 15px 0px
}

.resources .resources-filter button.selected {
    color: #ffffff;
    background-color: #000d12;
    border-bottom: 1px solid #000d12
}

.no-touch .resources .resources-filter button:hover {
    color: #ffffff;
    background-color: #000d12;
    border-bottom: 1px solid #000d12
}

.slider-component .slider-scaler-wrapper .slider-scaler {
    background-color: #000000
}

.slider-component .slider-model-answer,
.slider-component .slider-scale-marker {
    color: #ffffff;
    background-color: #009cde
}

.slider-component .slider-line {
    background-color: #000000
}

.slider-widget .slider-holder .rangeslider__handle {
    background-color: #009cde
}

.no-touch .slider-widget .slider-holder .rangeslider__handle:hover {
    background-color: #005478
}

.slider-widget .slider-holder .rangeslider__fill {
    background-color: #009cde
}

.slider-widget .slider-holder .rangeslider {
    background-color: #ffffff
}

.accessibility .slider-widget .slider-holder input[type="range"]:focus+.rangeslider .rangeslider__handle {
    outline: 0
}

.slider-widget .slider-holder .slider-scale-marker {
    font-size: 18px
}

.slider-widget.show-user-answer.correct .slider-scale-marker,
.slider-widget.show-user-answer.correct .rangeslider__fill {
    background-color: #82ca9c
}

.slider-widget.show-user-answer.incorrect .slider-scale-marker,
.slider-widget.show-user-answer.incorrect .rangeslider__fill {
    background-color: #f26c4f
}

.slider-widget.show-correct-answer .slider-scale-marker,
.slider-widget.show-correct-answer .slider-model-answer,
.slider-widget.show-correct-answer .rangeslider__fill {
    background-color: #82ca9c
}

.no-marking .component-inner .component-widget.disabled.submitted.complete .rangeslider__fill,
.no-marking .component-inner .component-widget.disabled.submitted.complete .slider-scale-marker {
    color: #ccc;
    background-color: #727272
}

.textinput-widget.disabled .textinput-item {
    border-color: #ababab;
    background-color: #ababab
}

.textinput-item {
    background-color: #009cde;
    position: relative;
    border: 3px solid #009cde;
    margin-bottom: 5px
}

.component-full .textinput-item {
    padding: 1%
}

.component-left .textinput-item,
.component-right .textinput-item {
    padding: 2%
}

.textinput-item-textbox {
    height: 28px;
    line-height: 28px
}

.textinput-item-textbox.textinput-validation-error {
    border: 2px solid #f26c4f
}

.textinput-widget .textinput-correct-icon {
    color: #82ca9c
}

.textinput-widget .textinput-incorrect-icon {
    color: #f26c4f
}

.trickle-button-component .trickle-button-inner {
    background-color: none;
    padding: 0
}

.trickle-button-component.trickle-round-arrow button {
    background-color: #0075c1;
    -webkit-transition: background-color .25s ease-in;
    -moz-transition: background-color .25s ease-in;
    -ms-transition: background-color .25s ease-in;
    transition: background-color .25s ease-in
}

.trickle-button-component.trickle-full-width.trickle-round-arrow .trickle-button-inner.locking button {
    background-color: #0075c1;
    -webkit-transition: background-color .25s ease-in;
    -moz-transition: background-color .25s ease-in;
    -ms-transition: background-color .25s ease-in;
    transition: background-color .25s ease-in
}

@font-face {
    font-family: "NotoSansSC-Regular";
    src: url('fonts/NotoSansSC-Regular.otf')
}

@font-face {
    font-family: "NotoSansSC-Medium";
    src: url('fonts/NotoSansSC-Medium.otf')
}

#wrapper>div>div>div.article.a-40.part02-intro.nth-child-8.completed>div>div.block.b-60.nth-child-1.completed>div>div>div>div>div>div>div.text-body.component-body>div>span:nth-child(3),
#wrapper>div>div>div.article.a-40.part02-intro.nth-child-8.completed>div>div.block.b-60.nth-child-1.completed>div>div>div>div>div>div>div.text-body.component-body>div>span:nth-child(5),
#wrapper>div>div>div.article.a-40.part02-intro.nth-child-8.completed>div>div.block.b-60.nth-child-1.completed>div>div>div>div>div>div>div.text-body.component-body>div>span:nth-child(7) {
    line-height: 1.8 !important;
}

@media screen and (max-width:850px) and (min-width:751px) {
    #\34>div.flipcard-item-face.flipcard-item-front>div>div {
        padding: 5px 0px;
    }
}

@media only screen and (max-width:1660px) and (min-width:1020px) {
    #\34>div.flipcard-item-face.flipcard-item-front>div>div {
        padding: 5px 0px;
    }
}

@media only screen and (max-width:1420px) and (min-width:1020px) {
    #\32>div.flipcard-item-face.flipcard-item-front>div>div {
        padding: 5px 0px;
    }
}

@media only screen and (max-width:420px) {
    #\32>div.flipcard-item-face.flipcard-item-front>div>div,
    #\34>div.flipcard-item-face.flipcard-item-front>div>div {
        padding: 5px 0px;
    }
}

#wrapper>div>div>div.article.a-40.part02-intro.nth-child-8>div>div.block.b-60.nth-child-1>div>div>div>div>div>div>div.text-body.component-body>div>span:nth-child(3),
#wrapper>div>div>div.article.a-40.part02-intro.nth-child-8>div>div.block.b-60.nth-child-1>div>div>div>div>div>div>div.text-body.component-body>div>span:nth-child(5),
#wrapper>div>div>div.article.a-40.part02-intro.nth-child-8>div>div.block.b-60.nth-child-1>div>div>div>div>div>div>div.text-body.component-body>div>span:nth-child(7) {
    line-height: 1.8 !important;
}

@media only screen and (max-width:420px) {

    #wrapper>div>div>div.article.a-80.part-03-02.nth-child-16>div>div.block.b-140.nth-child-1>div.block-inner>div>div>div>div>div>div.text-body.component-body>div>div.part3-box1,
    #wrapper>div>div>div.article.a-80.part-03-02.nth-child-16>div>div.block.b-140.nth-child-1>div.block-inner>div>div>div>div>div>div.text-body.component-body>div>div.verticle-line-04 {
        font-size: 15px;
    }
}

@media only screen and (max-width:420px) {

    #wrapper>div>div>div.article.a-40.part02-intro.nth-child-8.completed>div>div.block.b-60.nth-child-1.completed>div>div>div>div>div>div>div.text-body.component-body>div>p:nth-child(4),
    #wrapper>div>div>div.article.a-40.part02-intro.nth-child-8.completed>div>div.block.b-60.nth-child-1.completed>div>div>div>div>div>div>div.text-body.component-body>div>p:nth-child(6),
    #wrapper>div>div>div.article.a-40.part02-intro.nth-child-8.completed>div>div.block.b-60.nth-child-1.completed>div>div>div>div>div>div>div.text-body.component-body>div>p:nth-child(8),
    #wrapper>div>div>div.article.a-70.part03-intro.nth-child-14.completed>div>div.block.b-130.nth-child-1.completed>div>div>div>div>div>div>div.text-body.component-body>div>p:nth-child(3),
    #wrapper>div>div>div.article.a-70.part03-intro.nth-child-14.completed>div>div.block.b-130.nth-child-1.completed>div>div>div>div>div>div>div.text-body.component-body>div>p:nth-child(5),
    #wrapper>div>div>div.article.a-70.part03-intro.nth-child-14.completed>div>div.block.b-130.nth-child-1.completed>div>div>div>div>div>div>div.text-body.component-body>div>p:nth-child(7),
    #wrapper>div>div>div.article.a-100.part-04.nth-child-20.completed>div>div.block.b-170.nth-child-1.completed>div>div>div>div>div>div>div.text-body.component-body>div>p,
    #wrapper>div>div>div.article.a-100.part-04.nth-child-20.completed>div>div.block.b-170.nth-child-1.completed>div>div>div>div>div>div>div.text-body.component-body>div>ul {
        font-size: 15px;
    }
}