body {
    background-color: #000;
}

#portraitOnly {
    width: 130%;
    height: 100%;
    background-color: #fff;
    position: absolute;
    z-index: 1000;
    overflow: hidden
}

#portraitOnly .internalTxt {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    margin-left: -30%;
    margin-top: -10%;
    font-size: 2em
}

.affirmation {
    background: #fff
}

.affirmation .feedbackholder h2,
.affirmation .final-score {
    display: none
}

.affirmation .final-score-affirmation {
    display: block;
    background-color: red;
    height: 30px;
    width: 100%;
    padding-top: 10px;
    vertical-align: baseline
}

.affirmation .final-score-display {
    background-color: #CCC;
    height: 30px;
    width: 100%;
    vertical-align: baseline;
    padding-top: 10px
}

@media only screen and (orientation:portrait) {
    body {
        height: 100vw;
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg)
    }

    #portraitOnly {
        display: block
    }
}

@media only screen and (orientation:landscape) {
    #portraitOnly {
        display: none
    }
}

@media (orientation:landscape),
(min-width:768px) {
    #portraitOnly {
        display: none
    }
}

@media (orientation:portrait),
(max-width:767px) {
    body {
        height: 100vw;
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg)
    }

    #portraitOnly {
        display: block
    }
}

splash-choose-Path {
    font-family: ViaMaax, Sans-Serif;
    display: block;
    position: fixed;
    z-index: 11;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.splashBackground {
    width: 100%;
    height: 1024px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    background-color: #000
}

.splash {
    width: 100%;
    height: 100%;
    position: relative;
    overflow-x: hidden;
    overflow-y: hidden;
    background: #f3f3f4
}

.splash .spacer {
    width: 100%;
    height: 20px
}

.splash .spacerSm {
    width: 100%;
    height: 10px
}

.splash .versionShow {
    position: absolute;
    margin-top: 10px;
    left: 20px;
    color: #000;
    font-size: .6em
}

.splash .icons {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 200px;
    height: 50px;
    font-family: ViaMaax, Sans-Serif
}

.splash .icons button {
    font-family: ViaMaax, Sans-Serif;
    outline-style: none;
    padding: 0 !important
}

.splash .icons button.signalInfo {
    margin-top: -2px;
    cursor: pointer;
    float: left;
    display: block;
    width: 97px;
    height: 56px;
    background-color: transparent;
    border: none;
    outline: 0;
    background-image: url(images/instructions.svg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 50px 36px;
    text-decoration: none;
    font-family: ViaMaax, Sans-Serif;
    font-size: 16px !important
}

.splash .icons button.signalInfo span {
    font-family: ViaMaax, Sans-Serif;
    color: #fff;
    display: block;
    padding-top: 40px;
    text-align: center
}

.splash .icons a:link,
.splash .icons a:visited,
.splash .icons button.signalInfo:focus {
    border: none
}

.splash .icons a.guideInfo {
    float: right;
    display: block;
    width: 97px;
    height: 56px;
    background-image: url(images/guide.svg);
    background-repeat: no-repeat;
    background-size: 50px 36px;
    background-position: center top;
    text-decoration: none
}

.splash .icons a.guideInfo span {
    color: #fff;
    display: block;
    padding-top: 40px;
    text-align: center;
    font-size: 16px
}

.splash .btn {
    font-family: ViaMaax, Sans-Serif;
    border: none;
    width: 160px;
    padding-left: 25px;
    padding-right: 25px;
    height: 45px;
    font-size: 18px;
    line-height: 40px;
    cursor: pointer;
    background: #fc0;
    color: #222
}

.splash .btn text-align:center .disabled {
    opacity: .6;
    pointer-events: none
}

#playBtn:disabled,
#previewBtn:disabled {
    opacity: .6;
    cursor: default
}

.splash .welcome-text {
    font-family: ViaMaax, Sans-Serif;
    padding-top: 0vw;
    position: static
}

.splash .welcome-text p {
    font-family: ViaMaax, Sans-Serif;
    color: #DB0011;
    text-align: center;
    font-size: 4vw
}

.splash .choose-text {
    font-family: ViaMaax, Sans-Serif;
    position: absolute;
    padding-top: 0;
    font-size: 3.2vw;
    line-height: 4vw;
    background-image: url(images/pathSelectionBackground.jpg);
    background-repeat: no-repeat;
    background-position: left 0
}

.splash .choose-text .svgText {
    z-index: 1;
    left: 524px;
    top: 496px;
    position: absolute;
    width: 500px;
    height: 278px;
    opacity: .85
}

.splash .choose-text svg * {
    z-index: 1
}

.splash .choose-text #question1 {
    position: relative;
    margin-left: -5px;
    margin-top: 230px;
    background-color: rgba(255, 255, 255, .9);
    width: 330px;
    height: 320px;
    z-index: 10
}

.splash .choose-text #question1 .splash .icons {
    display: none
}

.splash .choose-text #question2,
.splash .choose-text #question4,
.splash .choose-text #question5 {
    position: relative;
    margin-left: -5px;
    margin-top: 230px;
    background-color: rgba(255, 255, 255, .9);
    width: 880px;
    height: 420px;
    z-index: 10
}

.splash .choose-text #question2 .splash .icons,
.splash .choose-text #question4 .splash .icons,
.splash .choose-text #question5 .splash .icons {
    display: block
}

.splash .choose-text #question2 h2,
.splash .choose-text #question4 h2,
.splash .choose-text #question5 h2 {
    width: 850px;
    font-size: 2.4vw;
    font-family: ViaMaax-bold, Sans-Serif;
    margin-left: auto;
    margin-right: auto
}

.splash .choose-text #question2 p,
.splash .choose-text #question4 p,
.splash .choose-text #question5 p {
    font-size: 18px;
    line-height: 20px
}

.splash .choose-text #question2 .highLight,
.splash .choose-text #question4 .highLight,
.splash .choose-text #question5 .highLight {
    font-family: ViaMaax-bold, Sans-Serif
}

.splash .choose-text #question2 ul li,
.splash .choose-text #question4 ul li,
.splash .choose-text #question5 ul li {
    list-style-position: inside;
    list-style-type: circle;
    line-height: 20px
}

.splash .choose-text #question4 {
    margin-top: 160px;
    height: 560px
}

.splash .choose-text #question4 p {
    font-size: 16px
}

.splash .choose-text #question5 {
    margin-left: -50px;
    padding-left: 0;
    margin-top: 160px;
    height: 500px;
    width: 980px
}

.splash .choose-text #question5 p {
    font-size: 16px
}

.splash .choose-text #question5 object {
    z-index: 1000
}

.splash .choose-text #question3 {
    position: relative;
    margin-left: -5px;
    margin-top: 230px;
    background-color: rgba(255, 255, 255, .9);
    width: 880px;
    height: 420px;
    z-index: 10;
    font-family: ViaMaax, Sans-Serif
}

.splash .choose-text #question3 .splash .icons {
    display: block
}

.splash .choose-text #question3 h2 {
    width: 250px;
    font-size: 2.4vw;
    font-family: ViaMaax-bold, Sans-Serif;
    margin-left: auto;
    margin-right: auto
}

.splash .choose-text #question3 label,
.splash .choose-text #question3 p {
    font-size: 18px;
    line-height: 20px;
    padding-left: .1vw
}

.splash .choose-text #question3 fieldset {
    padding: .5em;
    border: 1px solid #aaa
}

.splash .choose-text #question3 .selectionRegion {
    padding: 5px 10px 10px;
    border-radius: 10px;
    background-color: #eee
}

.splash .choose-text #question3 .selectionRegion input[type=radio]:disabled {
    pointer-events: none;
    opacity: .1
}

.splash .choose-text #question3 legend {
    font-size: 18px
}

.splash .choose-text #question3 [type=radio] {
    opacity: 0
}

.splash .choose-text #question3 [type=radio]+label::before {
    background: #fff;
    content: '';
    display: inline-block;
    border: 3px solid #444;
    height: 1.4rem;
    margin-right: 1em;
    vertical-align: middle;
    width: 1.4rem;
    cursor: pointer;
    border-radius: 50%
}

.splash .choose-text #question3 [type=radio]+label:hover::before {
    box-shadow: 0 0 10px #ffcb05
}

.splash .choose-text #question3 [type=radio]:checked+label::before {
    background: #ffcb05
}

.splash .choose-text #question3 .container {
    display: inline-block;
    position: relative;
    padding-left: 45px;
    padding-top: 10px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 18px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 11%
}

.splash .choose-text #question3 .container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0
}

.splash .choose-text #question3 .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 35px;
    width: 35px;
    background-color: #ffcb05;
    border: 1px solid #000
}

.splash .choose-text #question3 .container:hover input~.checkmark {
    background-color: #ccc
}

.splash .choose-text #question3 .container:active,
.splash .choose-text #question3 label:active {
    background-color: transparent
}

.splash .choose-text #question3 .container input:checked~.checkmark {
    background-color: #ffcb05;
    border: 3px solid #000
}

.splash .choose-text #question3 .checkmark:after {
    content: "";
    position: absolute;
    display: none
}

.splash .choose-text #question3 .container input:checked~.checkmark:after {
    display: block
}

.splash .choose-text #question3 .container .checkmark:after {
    left: 11px;
    top: 5px;
    width: 10px;
    height: 15px;
    border: solid #000;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

.splash .choose-text .question {
    font-family: ViaMaax, Sans-Serif;
    margin-top: 0;
    margin-bottom: 20px;
    padding: 19px;
    font-size: 22px
}

.splash .choose-text .question .selectionTxt {
    font-family: ViaMaax, Sans-Serif;
    font-size: 18px
}

.splash .choose-text .question .text {
    font-family: ViaMaax, Sans-Serif;
    margin-bottom: 25px
}

.splash .choose-text .question .path {
    text-align: center;
    font-weight: 700;
    margin-bottom: 25px;
    margin-top: 25px
}

.splash .choose-text .question .btnHolder {
    text-align: left;
    margin-bottom: 25px
}

.splash .choose-text .question .btnHolder #loading {
    display: block;
    float: left;
    margin-top: -40px;
    margin-left: 200px;
    width: 200px;
    height: 55px
}

.splash .choose-text .question .btnHolder #preventClick {
    display: block;
    float: left;
    opacity: .1;
    background: #fff;
    margin-top: -70px;
    margin-left: 500px;
    width: 390px;
    height: 80px
}

.splash .choose-text .question .btnHolderInstr {
    padding-left: 5px;
    margin-top: -40px
}

.splash .choose-text .distractor {
    width: 100%;
    cursor: pointer
}

.splash .choose-text .distractor table {
    width: 100%
}

.splash .choose-text .distractor table td {
    line-height: 3vw;
    padding: .5vw;
    vertical-align: top
}

.splash .choose-text .distractor table td:first-child {
    width: 3vw
}

.splash .button-holder {
    width: 30%;
    position: relative;
    padding-top: 10vw;
    left: 35%;
    display: inline-block
}

.splash .btnHolder div {
    padding-left: 15px;
    padding-right: 5px;
    display: inline-block
}

.splash .button-holder .begin-btn {
    position: absolute;
    left: 0;
    appearance: none;
    border: none;
    width: 100%;
    height: 10vw;
    background: #DB0011;
    color: #fff;
    text-align: center;
    font-size: 3vw;
    line-height: 10vw;
    cursor: pointer
}

.btnHolder button:focus {
    border: 1px solid red
}

.btnHolder button.sp:focus {
    border: 2px solid red;
    opacity: .5
}

@media (orientation:landscape),
(min-width:700px) {
    .splash .welcome-text {
        padding-top: 8vw
    }

    .splash .welcome-text p {
        font-size: 3vw
    }

    .splash .choose-text {
        padding-top: 75px;
        font-size: 2.3vw;
        line-height: 3vw
    }

    .splash .choose-text .distractor table {
        width: 100%
    }

    .splash .choose-text .distractor td {
        line-height: 2vw;
        padding: .3vw;
        vertical-align: top
    }

    .splash .choose-text .distractor td:first-child {
        width: 2vw
    }

    .splash .button-holder {
        width: 30%;
        position: relative;
        left: 35%
    }

    .splash .button-holder.begin-btn {
        position: absolute;
        left: 0;
        appearance: none;
        border: none;
        width: 100%;
        height: 8vw;
        text-align: center;
        font-size: 2.5vw;
        line-height: 8vw;
        cursor: pointer
    }
}

@media (min-width:1024px) {
    .splash .welcome-text {
        width: 100%;
        padding-top: 0
    }

    .splash .welcome-text p {
        margin-bottom: 25px;
        font-size: 25px
    }

    .splash .choose-text {
        font-size: 25px;
        line-height: 30px;
        margin-left: calc(50% - 512px);
        padding-top: 0;
        width: 1024px;
        height: 800px
    }

    .splash .choose-text .distractor table {
        width: 100%
    }

    .splash .choose-text .distractor table td {
        line-height: 20px;
        padding: 3px;
        vertical-align: top
    }

    .splash .choose-text .distractor table td:first-child {
        width: 20px
    }

    .splash .button-holder {
        width: 312px;
        position: absolute;
        top: 400px;
        padding: 0 200px;
        left: calc(50% - 156px)
    }

    .splash .button-holder .begin-btn {
        position: absolute;
        appearance: none;
        left: 0;
        border: none;
        width: 312px;
        height: 80px;
        text-align: center;
        font-size: 25px;
        line-height: 80px;
        cursor: pointer
    }
}

alert {
    display: block;
    position: fixed;
    z-index: 4;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

alert>.alert-background {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5)
}

alert>.alert-pane {
    display: block;
    position: fixed;
    top: 15vw;
    left: 10%;
    width: 80%;
    max-height: 90%;
    box-sizing: border-box;
    padding: 5%;
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, .3);
    font-family: Roboto, sans-serif;
    background: #fcfcfc;
    color: #333;
    font-size: 4vw;
    line-height: 4vw;
    overflow-y: auto;
    overflow-x: hidden
}

alert .alert-close {
    display: block !important;
    position: fixed !important;
    top: 35vw;
    left: 43.5%;
    box-sizing: border-box;
    overflow: hidden;
    width: 15vw !important;
    height: 7vw;
    z-index: 50
}

alert .alert-background-standard {
    padding: 1vw;
    color: #262626
}

alert .alert-content-standard {
    color: #f26323;
    font-size: 3.8vw;
    margin-top: 4vw;
    margin-bottom: 6vw
}

alert .alert-content-standard p {
    font-size: 4vw;
    line-height: 4vw;
    font-weight: 400;
    text-align: center
}

alert .alert-btn-standard {
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    margin: 0 0 0 .4vw;
    width: 39.4vw;
    height: 8vw;
    float: left;
    appearance: none;
    border: none;
    cursor: pointer;
    color: #fff;
    background: #333;
    font-size: 3.5vw;
    line-height: 5.5vw;
    padding: 1vw 3vw;
    text-align: center
}

alert .alert-btn-standard:focus {
    border: 1px solid red
}

@media (orientation:landscape),
(min-width:768px) {
    alert>.alert-pane {
        top: 10vw
    }

    alert .alert-close {
        top: 29vw;
        width: 6vw;
        height: 6vw;
        font-size: 4vw
    }

    alert .alert-content-standard {
        margin-top: 4vw;
        margin-bottom: 6vw
    }

    alert .alert-content-standard p {
        font-size: 3vw;
        line-height: 3vw
    }

    alert .alert-btn-standard {
        margin: 0 0 0 .4vw;
        height: 6.5vw;
        font-size: 2.5vw;
        line-height: 4.5vw;
        padding: 1vw 3vw
    }
}

@media (min-width:1024px) {
    alert>.alert-pane {
        top: 150px;
        width: 800px;
        left: calc(50vw - 400px);
        padding: 50px
    }

    alert .alert-close {
        top: 350px;
        right: calc(50vw - 410px);
        width: 260px !important;
        height: 60px;
        font-size: 30px;
        line-height: 30px;
        background-color: #DB0011
    }

    alert .alert-background-standard {
        padding: 10px
    }

    alert .alert-content-standard {
        margin-top: 40px;
        margin-bottom: 60px;
        font-size: 30px
    }

    alert .alert-content-standard p {
        font-size: 30px;
        line-height: 30px
    }

    alert .alert-btn-standard {
        margin: 0 0 0 4px;
        height: 65px;
        width: 394px;
        font-size: 25px;
        line-height: 45px;
        padding: 10px 30px
    }
}

mobile-switch .url {
    word-wrap: break-word;
    word-break: break-all;
    overflow-wrap: break-word
}

pop-over {
    position: absolute;
    box-sizing: border-box;
    z-index: 1;
    display: block
}

.popover-close-btn {
    position: absolute;
    box-sizing: border-box;
    right: 1vw;
    top: 1vw;
    color: #fff;
    font-size: 4vw;
    width: 4vw;
    height: 4vw;
    appearance: none;
    border: none;
    background: 0 0;
    outline: 0;
    cursor: pointer
}

.popover-close-btn:focus {
    border: 1px solid red
}

.popover-content-holder {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 4vw 2vw 2vw
}

@media (orientation:landscape),
(min-width:700px) {
    .popover-close-btn {
        right: 1vw;
        top: 1vw;
        font-size: 3vw;
        width: 3vw;
        height: 3vw
    }

    .popover-content-holder {
        padding: 3vw 2vw 2vw
    }

    .popover-close-btn:focus {
        border: 1px solid red
    }
}

@media (min-width:1024px) {
    .popover-close-btn {
        right: 10px;
        top: 10px;
        font-size: 20px;
        width: 20px;
        height: 20px
    }

    .popover-content-holder {
        padding: 30px 20px 20px
    }
}

[pop-over-trigger].complete::after {
    content: "";
    position: absolute;
    width: 3vw;
    height: 3vw;
    top: .5vw;
    right: .5vw;
    background: url('data:image/svg+xml;utf8,<svg height="100%" id="check" viewBox="0 0 32 32" width="100%" xmlns="http://www.w3.org/2000/svg"><path fill="#222222" d="M1 14 L5 10 L13 18 L27 4 L31 8 L13 26 z"/></svg>') no-repeat
}

[pop-over-trigger].complete.light::after {
    content: "";
    position: absolute;
    width: 3vw;
    height: 3vw;
    top: .5vw;
    right: .5vw;
    background: url('data:image/svg+xml;utf8,<svg height="100%" id="check" viewBox="0 0 32 32" width="100%" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M1 14 L5 10 L13 18 L27 4 L31 8 L13 26 z"/></svg>') no-repeat
}

@media (orientation:landscape),
(min-width:700px) {
    [pop-over-trigger].complete::after {
        content: "";
        position: absolute;
        width: 3vw;
        height: 3vw;
        top: .5vw;
        right: .5vw
    }

    [pop-over-trigger].complete.light::after {
        width: 3vw;
        height: 3vw;
        top: .5vw;
        right: .5vw
    }
}

@media (min-width:1024px) {

    [pop-over-trigger].complete.light::after,
    [pop-over-trigger].complete::after {
        width: 30px;
        height: 30px;
        top: 5px;
        right: 5px
    }
}

.content-holder {
    position: relative;
    z-index: 1;
    height: 100%
}

@media only screen and (min-width:1024px) {
    .content-holder {
        position: relative;
        z-index: 1;
        width: 100%;
        margin: 0 auto;
        height: 100%
    }
}

direction {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-pack: start;
    justify-content: flex-start;
    width: 100%;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    background: 0 0;
    border: none;
    overflow: visible;
    margin-bottom: 2vw
}

.screenReader {
    opacity: 0
}

.icon-holder {
    width: 6vw;
    height: 6vw;
    min-width: 6vw;
    min-height: 6vw;
    max-width: 6vw;
    max-height: 6vw;
    display: block;
    position: relative;
    background: 0 0;
    border: none;
    overflow: visible
}

.icon-holder bottom,
.icon-holder top {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    overflow: hidden;
    transition: -webkit-transform 1s ease-in-out, opacity 1s ease-in-out;
    transition: transform 1s ease-in-out, opacity 1s ease-in-out
}

.icon-holder bottom {
    border-width: 1px;
    height: 100%;
    z-index: 1;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: perspective(800px) rotateY(180deg);
    transform: perspective(800px) rotateY(180deg);
    opacity: 0
}

.icon-holder top {
    border-width: 1px;
    height: 100%;
    z-index: 2;
    opacity: 1;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: perspective(800px) rotateY(0deg);
    transform: perspective(800px) rotateY(0deg)
}

.icon-holder.active bottom {
    -webkit-transform: perspective(800px) rotateY(0);
    transform: perspective(800px) rotateY(0);
    opacity: 1
}

.icon-holder.active top {
    -webkit-transform: perspective(800px) rotateY(-179.9deg);
    transform: perspective(800px) rotateY(-179.9deg);
    opacity: 0
}

.instruction-holder {
    font-size: 3.2vw;
    line-height: normal
}

@media (orientation:landscape),
(min-width:700px) {
    direction {
        margin-bottom: 1.5vw
    }

    .icon-holder {
        width: 4.5vw;
        height: 4.5vw;
        min-width: 4.5vw;
        min-height: 4.5vw;
        max-width: 4.5vw;
        max-height: 4.5vw
    }

    .instruction-holder {
        font-size: 2.3vw
    }
}

@media (min-width:1024px) {
    direction {
        margin-bottom: 15px
    }

    .icon-holder {
        width: 45px;
        height: 45px;
        min-width: 45px;
        min-height: 45px;
        max-width: 45px;
        max-height: 45px
    }

    .instruction-holder {
        font-size: 18px
    }
}

.visible {
    border: 1px solid red
}

.red {
    background-color: #DB0011
}

.green {
    background-color: #4baa42
}

.blue {
    background-color: #007abc
}

.light-blue {
    background-color: #bae6fa
}

.white {
    background-color: #fff
}

.purple {
    background-color: #85619f
}

.anchor {
    width: 100%;
    height: 1px
}

.content-grey {
    background-color: #252525;
    color: #fff
}

.content-greyLight {
    background-color: #e3e7ec;
    color: #fff
}

.content-greyLLight {
    background-color: #eff1f3;
    color: #fff
}

.content-red {
    background-color: #DB0011;
    color: #fff
}

.white-fill {
    background-color: #fff
}

.cream-fill {
    background-color: #fff2df
}

.light-gray-fill {
    background-color: #f3f3f4
}

.medium-gray-fill {
    background-color: #d3d3d3
}

.dark-gray-fill {
    background-color: #333
}

.red-fill {
    background-color: #db0011
}

.grey-fill {
    background-color: #252525
}

.orange-fill {
    background-color: #f16422
}

.light-orange-fill {
    background-color: #f8a459
}

.blue-fill {
    background-color: #00b7f2
}

.light-blue-fill {
    background-color: #bae6fa
}

.business-blue-fill {
    background-color: #0084cb
}

.yellow-fill {
    background-color: #fdb53c
}

.light-yellow-fill {
    background-color: #dfe99a
}

.green-fill {
    background-color: #51b948
}

.light-green-fill {
    background-color: #6bc777
}

.soft-red-fill {
    background-color: #fcccae
}

.soft-blue-fill {
    background-color: #bae6fa
}

.soft-yellow-fill {
    background-color: #ffe6c0
}

.soft-green-fill {
    background-color: #cbe6c0
}

.blue-gradient {
    background: linear-gradient(to bottom, #0082c8 0, #006ea9 100%)
}

.yellow-gradient {
    background: linear-gradient(to bottom, #c1d62b 0, #a3b425 100%)
}

.light-blue-gradient {
    background: linear-gradient(to bottom, #0be 0, #009ec9 100%)
}

.green-gradient {
    background: linear-gradient(to bottom, #50b647 0, #439a3c 100%)
}

.red-gradient {
    background: linear-gradient(to bottom, red 0, #db0011 100%)
}

.orange-gradient {
    background: linear-gradient(to bottom, #fdb53c 0, #dc9e34 100%)
}

.grey-gradient {
    background: linear-gradient(to bottom, #aaa 0, #949494 100%)
}

.lightgrey-gradient {
    background: linear-gradient(to bottom, #aaa 0, #e3e3e2 100%)
}

.purple-gradient {
    background: linear-gradient(to bottom, #743b9f 0, #7c3ca4 100%)
}

.black-gradient {
    background: linear-gradient(to bottom, #111 0, #000 100%)
}

.white-gradient {
    background: linear-gradient(to bottom, #fff 0, #fff 100%)
}

.white-text {
    color: #fff !important
}

.blue-text {
    color: #00b7f2 !important
}

.green-text {
    color: #00833e !important
}

.orange-text {
    color: #f26323 !important
}

.red-text {
    color: #d11 !important
}

.black-text {
    color: #000 !important
}

.center {
    text-align: center
}

.clickable {
    cursor: pointer
}

.link {
    cursor: pointer;
    text-decoration: underline;
    color: #333
}

.italic {
    font-style: italic
}

.bold {
    font-weight: 700
}

.align-left {
    text-align: left
}

.align-center {
    text-align: center
}

.align-right {
    text-align: right
}

.panel {
    width: 100%;
    padding: 5vw 6vw;
    float: left;
    box-sizing: border-box
}

.panel-nopadding {
    width: 100%;
    float: left;
    box-sizing: border-box
}

.full-height {
    min-height: 100%
}

.clear {
    clear: both
}

ol.orange-numbers {
    margin-bottom: 0;
    list-style: none;
    counter-reset: counter
}

ol.orange-numbers li {
    position: relative;
    list-style-position: outside;
    line-height: 1.1;
    margin-bottom: 1.6vw
}

ol.orange-numbers>li:before {
    position: absolute;
    display: inline-block;
    z-index: 100;
    width: 4vw;
    height: 4vw;
    left: -5vw;
    top: -.5vw;
    border-radius: 50%;
    font-size: 3vw;
    line-height: 4vw;
    text-align: center;
    color: #fff;
    background-color: #f16422;
    counter-increment: counter;
    content: counter(counter)
}

.direction {
    font-style: italic
}

.direction::before {
    content: "";
    position: absolute;
    width: 6vw;
    height: 6vw;
    margin-left: -7vw;
    margin-top: -1.5vw;
    background: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj4NCjxnPg0KCTxwYXRoIGZpbGw9IiMzMzMzMzMiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGQ9Ik05Ny45LDQ3LjVjMS40LDI4LjUtMjIsNTEuOS01MC40LDUwLjQNCgkJYy0yNC40LTEuMi00NC4yLTIxLTQ1LjQtNDUuNEMwLjYsMjQsMjQuMSwwLjYsNTIuNSwyLjFDNzYuOSwzLjMsOTYuNywyMy4xLDk3LjksNDcuNXoiLz4NCjwvZz4NCjxnPg0KCTxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik03Mi4xLDQxLjdjLTEuMS0xLjYtMi45LTIuOC00LjgtMy4xYy0xLjQtMC4zLTMuNy0wLjEtNi4zLDEuNGMtMC41LTAuMi0xLTAuMy0xLjUtMC40DQoJCWMtMS41LTAuMy0zLjctMC4xLTYuNCwxLjVjLTAuMi0wLjEtMC40LTAuMS0wLjYtMC4xQzUxLjEsNDEsNDksNDEsNDYuNiw0Mi4zbC01LjgtOC45Yy0wLjktMS4zLTIuMS0yLjItMy43LTIuNQ0KCQljLTEuNS0wLjMtMy4xLDAtNC40LDAuOGMtMS4zLDAuOS0yLjIsMi4xLTIuNSwzLjdzMCwzLjEsMC44LDQuM2wxNC40LDIyLjNjLTEtMC4yLTEuOS0wLjUtMy0wLjdjLTQuNS0xLTcuNSwwLjEtOC44LDMuMw0KCQljLTAuNiwxLjQtMC43LDIuNy0wLjEsMy44YzEuMiwyLjMsNC4xLDMuMSw4LjcsNC4zYzAuNSwwLjEsMS4xLDAuMywxLjYsMC40YzEwLjMsMi44LDEyLjQsNSwxNy40LDEwLjVsMSwxLjFsMjIuOS0xNC44bC0xLjEtMS41DQoJCWMtMS40LTItMy42LTUuNi0zLjctNy4xQzgwLDUzLjcsNzUuOSw0Ny41LDc1LjYsNDdMNzIuMSw0MS43eiBNODAuMiw2OC45TDYyLjksODAuMWMtNC41LTQuOS03LjUtNy41LTE4LTEwLjQNCgkJYy0wLjYtMC4yLTEuMS0wLjMtMS42LTAuNWMtMi44LTAuOC02LjEtMS42LTYuNC0yLjVjLTAuMS0wLjIsMC0wLjUsMC4yLTAuOWMwLjMtMC43LDAuOS0yLjEsNC45LTEuMmMyLjgsMC42LDUuMiwxLjIsNi41LDEuNA0KCQlsMC42LDEuMmwzLTEuOUwzNC4xLDM3LjdjLTAuMy0wLjUtMC41LTEuMi0wLjMtMS43YzAuMS0wLjYsMC41LTEuMiwxLTEuNGMwLjUtMC4zLDEuMi0wLjUsMS43LTAuM2MwLjYsMC4xLDEuMiwwLjUsMS40LDENCgkJbDE1LjEsMjMuM2wzLTEuOWwtNy40LTExLjRjMS4yLTAuNiwyLjItMC44LDMuMy0wLjdjMS4yLDAuMiwyLjEsMSwyLjUsMS41bDUuNCw4LjRsMy0xLjlsLTUuNi04LjNjLTAuMi0wLjMtMC40LTAuNi0wLjctMC45DQoJCWMwLjgtMC4zLDEuNS0wLjQsMi4yLTAuMmMxLjIsMC4yLDIuMSwxLDIuNSwxLjVsNC42LDcuMWwzLTEuOWwtNC42LTcuMWMtMC4xLTAuMS0wLjItMC4yLTAuMi0wLjNjMC45LTAuNCwxLjgtMC41LDIuNi0wLjQNCgkJYzEuMiwwLjIsMi4xLDEsMi41LDEuNWwzLjYsNS42bDAsMGMwLjUsMC44LDMuNyw2LjEsNC4xLDEyLjJDNzcsNjMuNyw3OC44LDY2LjksODAuMiw2OC45eiIvPg0KCTxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOS44LDI2LjhjMy4zLTIuMSw3LjctMS4yLDkuOCwyLjFjMC4yLDAuNCwwLjQsMC43LDAuNiwxLjFjMC43LDAuNSwxLjMsMS4yLDEuOCwxLjlsMS43LDIuNw0KCQljMC41LTIuNSwwLTUuMS0xLjQtNy4zYy0zLjEtNC43LTkuMy02LjEtMTQuMS0zLjFjLTQuNywzLjEtNi4xLDkuMy0zLjEsMTQuMWMxLjMsMi4yLDMuNSwzLjcsNS44LDQuMmwtMS42LTIuNQ0KCQljLTAuNi0wLjktMS0xLjgtMS4xLTIuOWMtMC4yLTAuMi0wLjMtMC40LTAuNS0wLjdDMjUuNiwzMy40LDI2LjYsMjksMjkuOCwyNi44eiIvPg0KCTxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0zNiw1MC41bC0xLjktM2MtNSwwLjEtOS45LTIuMi0xMi45LTYuN2MtNC40LTYuOC0yLjQtMTUuOSw0LjQtMjAuNFM0MS41LDE4LDQ2LDI0LjgNCgkJYzIuOSw0LjQsMyw5LjksMC45LDE0LjNjMS4yLTAuNCwyLjQtMC42LDMuNi0wLjVjMS44LTUsMS4zLTEwLjgtMS43LTE1LjZjLTUuNC04LjMtMTYuNC0xMC43LTI0LjctNS40DQoJCWMtOC4zLDUuNC0xMC43LDE2LjQtNS40LDI0LjdDMjIuNSw0OC41LDI5LjMsNTEuMywzNiw1MC41eiIvPg0KPC9nPg0KPC9zdmc+) no-repeat
}

@media (orientation:landscape),
(min-width:768px) {
    .panel {
        padding: 5vw 6vw
    }

    ol.orange-numbers {
        margin-bottom: 0;
        list-style: none;
        counter-reset: counter
    }

    ol.orange-numbers li {
        position: relative;
        list-style-position: outside;
        line-height: 1.1;
        margin-bottom: 2vw;
        margin-left: 5vw
    }

    ol.orange-numbers>li:before {
        position: absolute;
        display: inline-block;
        z-index: 100;
        width: 4vw;
        height: 4vw;
        left: -5vw;
        top: -.5vw;
        border-radius: 50%;
        font-size: 2.5vw;
        line-height: 4vw;
        text-align: center;
        color: #fff;
        background-color: #f16422;
        counter-increment: counter;
        content: counter(counter)
    }

    .direction::before {
        width: 4.5vw;
        height: 4.5vw;
        margin-left: -5vw;
        margin-top: -1vw
    }
}

@media (min-width:1024px) {
    .panel {
        padding: 50px 60px
    }

    ol.orange-numbers {
        margin-bottom: 0;
        list-style: none;
        counter-reset: counter
    }

    ol.orange-numbers li {
        position: relative;
        list-style-position: outside;
        line-height: 1.1;
        margin-bottom: 26px;
        margin-left: 50px
    }

    ol.orange-numbers>li:before {
        position: absolute;
        display: inline-block;
        z-index: 100;
        width: 40px;
        height: 40px;
        left: -50px;
        top: -5px;
        border-radius: 50%;
        font-size: 20px;
        line-height: 40px;
        text-align: center;
        color: #fff;
        background-color: #f16422;
        counter-increment: counter;
        content: counter(counter)
    }

    .direction::before {
        width: 45px;
        height: 45px;
        margin-left: -55px;
        margin-top: -12px
    }
}

quiz {
    display: block;
    position: relative
}

quiz .radioBTN {
    display: inline-block;
    width: 2.5vw
}

quiz .radioBTN svg {
    height: 2.5vw !important
}

quiz .question-count {
    position: absolute;
    top: 1vw;
    right: 6vw;
    z-index: 1
}

quiz .slide1,
quiz .slide2 {
    width: 100%;
    top: 0;
    position: absolute;
    overflow-x: hidden;
    overflow-y: auto
}

quiz .question,
quiz .summary {
    overflow: auto;
    overflow-x: hidden;
    height: 100%;
    background: #fff
}

quiz .summary {
    padding: 4vw 6vw 0
}

quiz .question {
    padding: 4vw 6vw 0;
    box-sizing: border-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -ms-flex-direction: column;
    flex-direction: column
}

quiz .question .stack1,
quiz .question .stack2 {
    -ms-flex-positive: 1;
    flex-grow: 1;
    box-sizing: border-box;
    -ms-flex-align: stretch;
    align-items: stretch
}

quiz .question .instructions {
    text-align: left;
    font-style: italic
}

quiz .question .stem {
    color: #000;
    font-size: 3.7vw;
    line-height: 4vw;
    margin-bottom: 6vw
}

quiz .question .stem P {
    color: #f26323;
    font-size: 3.7vw;
    line-height: 4vw
}

quiz .question .distractor {
    height: auto;
    width: 100%;
    margin-bottom: .75vw;
    cursor: pointer
}

quiz .question .distractor table {
    width: 100%
}

quiz .question .distractor td {
    line-height: 3vw;
    padding: .5vw;
    vertical-align: top
}

quiz .question .distractor td:first-child {
    width: 3vw
}

quiz .question .distractor.correct {
    background: #ff0
}

quiz .question .feedbackholder {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    margin: 2vw -6vw 0 !important
}

quiz .question .feedbackholder .correct {
    padding: 2vw 6vw;
    color: #fff;
    background: #383;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
    box-sizing: border-box
}

quiz .question .feedbackholder .incorrect {
    padding: 2vw 6vw;
    color: #fff;
    background: #b00;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
    box-sizing: border-box
}

quiz .next,
quiz .retry,
quiz .submit {
    appearance: none;
    border: none;
    cursor: pointer;
    color: #fff;
    background: #333;
    font-size: 3.5vw;
    line-height: 4vw;
    padding: 1vw 3vw;
    margin: 5vw 0 5vw 40%
}

quiz .next:after,
quiz .retry:after,
quiz .submit:after {
    content: "\00BB";
    padding-left: 1vw
}

@media (orientation:landscape),
(min-width:700px) {
    quiz .radioBTN {
        width: 2vw
    }

    quiz .radioBTN svg {
        height: 2vw !important
    }

    quiz .question-count {
        right: 6vw
    }

    quiz .slide1,
    quiz .slide2 {
        width: 100%
    }

    quiz .question,
    quiz .summary {
        padding: 4vw 6vw 0
    }

    quiz .question .distractor {
        margin-bottom: 1vw
    }

    quiz .question .distractor td {
        line-height: 2vw;
        padding: .3vw;
        vertical-align: top
    }

    quiz .question .distractor td:first-child {
        width: 2vw
    }

    quiz .question .stem {
        font-size: 2.75vw;
        line-height: 3vw;
        margin-bottom: 6vw
    }

    quiz .question .stem P {
        font-size: 3vw;
        line-height: 3vw
    }

    quiz .next,
    quiz .retry,
    quiz .submit {
        font-size: 2.5vw;
        line-height: 3vw;
        padding: 1vw 2.5vw;
        margin: 5vw 0 5vw 40%
    }

    quiz .next:after,
    quiz .retry:after,
    quiz .submit:after {
        padding-left: .7vw
    }
}

@media (min-width:1025px) {
    quiz {
        position: relative
    }

    quiz .radioBTN {
        width: 20px
    }

    quiz .radioBTN svg {
        height: 20px !important
    }

    quiz .question-count {
        right: 60px;
        top: 10px
    }

    quiz .slide1,
    quiz .slide2 {
        width: 100%
    }

    quiz .question,
    quiz .summary {
        padding: 40px 60px 0
    }

    quiz .question .distractor {
        margin-bottom: 10px
    }

    quiz .question .distractor td {
        line-height: 20px;
        padding: 3px;
        vertical-align: top
    }

    quiz .question .distractor td:first-child {
        width: 20px
    }

    quiz .question .stem {
        font-size: 22px;
        line-height: 24px;
        margin-bottom: 40px
    }

    quiz .question .stem P {
        font-size: 22px;
        line-height: 22px
    }

    quiz .question .feedbackholder {
        margin: 25px -60px 0 !important
    }

    quiz .question .feedbackholder .correct,
    quiz .question .feedbackholder .incorrect {
        padding: 25px 60px
    }

    quiz .next,
    quiz .retry,
    quiz .submit {
        font-size: 25px;
        line-height: 30px;
        padding: 10px 25px;
        margin: 50px 0 50px 40%
    }

    quiz .next:after,
    quiz .retry:after,
    quiz .submit:after {
        padding-left: 7px
    }
}

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

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block
}

body {
    line-height: 1
}

ol,
ul {
    list-style: none
}

blockquote,
q {
    quotes: none
}

blockquote:after,
blockquote:before,
q:after,
q:before {
    content: '';
    content: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

quiz-via {
    display: block;
    position: relative
}

quiz-via #bodyReload>ul>li>a:link {
    display: block;
    width: 195px;
    background: #f4f4f4;
    height: 62px
}

quiz-via #bodyReload>ul>li>a:hover {
    width: 195px;
    background: #ccc;
    height: 62px
}

quiz-via #bodyReload>ul>li>a:visited {
    display: block;
    width: 195px;
    background: #ccc;
    height: 62px
}

quiz-via #bodyReload>ul>li>a:active {
    display: block;
    width: 195px;
    background: #f6f6f6;
    height: 62px
}

quiz-via .selectedLink {
    display: block;
    width: 195px;
    background: #ffcb05;
    height: 62px
}

quiz-via .getSignal {
    top: 220px;
    left: -140px;
    position: relative;
    -webkit-transform: scale(.15);
    transform: scale(.15);
    opacity: 1
}

quiz-via .signalItems .disabled {
    pointer-events: none;
    opacity: .6
}

quiz-via .signalItems ul li {
    list-style: none;
    margin-left: 0;
    padding-top: 1px;
    padding-bottom: 1px;
    background-color: #f4f4f4;
    position: relative;
    height: 62px
}

quiz-via .signalItems ul li a {
    cursor: pointer;
    display: block;
    height: 62px;
    float: left;
    line-height: 17px;
    position: absolute;
    padding-left: 40px;
    padding-top: 2px;
    font-size: 17px
}

quiz-via .radioBTN {
    display: inline-block;
    width: 2.5vw
}

quiz-via .radioBTN svg {
    height: 2.5vw !important
}

quiz-via .question-count {
    position: absolute;
    top: 1vw;
    right: 6vw;
    z-index: 1
}

quiz-via .slide1,
quiz-via .slide2 {
    width: 100%;
    top: 0;
    position: absolute;
    overflow-x: hidden;
    overflow-y: auto
}

quiz-via .question,
quiz-via .summary {
    border: 1px solid grey;
    overflow: auto;
    overflow-x: hidden;
    height: 705px;
    background: #fff
}

quiz-via .summary {
    padding: 4vw 6vw 0
}

quiz-via .question {
    padding: 0vw 1vw 0;
    box-sizing: border-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -ms-flex-direction: column;
    flex-direction: column
}

quiz-via .question .stack1,
quiz-via .question .stack2 {
    -ms-flex-positive: 1;
    flex-grow: 1;
    box-sizing: border-box;
    -ms-flex-align: stretch;
    align-items: stretch
}

quiz-via .question .instructions {
    text-align: left;
    font-style: italic
}

quiz-via .question .stem {
    color: #000;
    font-size: 3.7vw;
    line-height: 4vw;
    margin-bottom: 0vw
}

quiz-via .question .stem P {
    color: #f26323;
    font-size: 3.7vw;
    line-height: 4vw
}

quiz-via .question .distractor {
    height: auto;
    width: 100%;
    margin-bottom: .75vw;
    cursor: pointer
}

quiz-via .question .distractor table {
    width: 100%
}

quiz-via .question .distractor td {
    line-height: 3vw;
    padding: .5vw;
    vertical-align: top
}

quiz-via .question .distractor td:first-child {
    width: 3vw
}

quiz-via .question .distractor.correct {
    background: #ff0
}

quiz-via .question .feedbackholder {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    margin: 2vw -6vw 0 !important
}

quiz-via .question .feedbackholder .correct {
    padding: 2vw 6vw;
    color: #fff;
    background: #383;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
    box-sizing: border-box
}

quiz-via .question .feedbackholder .incorrect {
    padding: 2vw 6vw;
    color: #fff;
    background: #b00;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
    box-sizing: border-box
}

quiz-via .next,
quiz-via .retry,
quiz-via .submit {
    appearance: none;
    border: none;
    cursor: pointer;
    color: #fff;
    background: #333;
    font-size: 3.5vw;
    line-height: 4vw;
    padding: 1vw 3vw;
    margin: 5vw 0 5vw 40%
}

quiz-via .next:after,
quiz-via .retry:after,
quiz-via .submit:after {
    content: "\00BB";
    padding-left: 1vw
}

@media (orientation:landscape),
(min-width:700px) {
    quiz-via .radioBTN {
        width: 2vw
    }

    quiz-via .radioBTN svg {
        height: 2vw !important
    }

    quiz-via .question-count {
        right: 6vw
    }

    quiz-via .slide1,
    quiz-via .slide2 {
        width: 100%
    }

    quiz-via .summary {
        padding: 4vw 6vw 0
    }

    quiz-via .question .distractor {
        margin-bottom: 1vw
    }

    quiz-via .question .distractor td {
        line-height: 2vw;
        padding: .3vw;
        vertical-align: top
    }

    quiz-via .question .distractor td:first-child {
        width: 2vw
    }

    quiz-via .question .stem {
        font-size: 2.75vw;
        line-height: 3vw
    }

    quiz-via .question .stem P {
        font-size: 3vw;
        line-height: 3vw
    }

    quiz-via .next,
    quiz-via .retry,
    quiz-via .submit {
        font-size: 2.5vw;
        line-height: 3vw;
        padding: 1vw 2.5vw;
        margin: 5vw 0 5vw 40%
    }

    quiz-via .next:after,
    quiz-via .retry:after,
    quiz-via .submit:after {
        padding-left: .7vw
    }
}

@media (min-width:1025px) {
    quiz-via {
        position: relative
    }

    quiz-via .radioBTN {
        width: 20px
    }

    quiz-via .radioBTN svg {
        height: 20px !important
    }

    quiz-via .question-count {
        right: 60px;
        top: 10px
    }

    quiz-via .slide1,
    quiz-via .slide2 {
        width: 100%
    }

    quiz-via .summary {
        padding: 20px 20px 0
    }

    quiz-via .question {
        height: 705px;
        padding: 0 10px
    }

    quiz-via .question .distractor {
        margin-bottom: 10px
    }

    quiz-via .question .distractor td {
        line-height: 20px;
        padding: 3px;
        vertical-align: top
    }

    quiz-via .question .distractor td:first-child {
        width: 20px
    }

    quiz-via .question .stem {
        font-size: 22px;
        line-height: 24px;
        margin-bottom: 0
    }

    quiz-via .question .stem P {
        font-size: 22px;
        line-height: 22px
    }

    quiz-via .question .feedbackholder {
        margin: 25px -60px 0 !important
    }

    quiz-via .question .feedbackholder .correct,
    quiz-via .question .feedbackholder .incorrect {
        padding: 25px 60px
    }

    quiz-via .next,
    quiz-via .retry,
    quiz-via .submit {
        font-size: 25px;
        line-height: 30px;
        padding: 10px 25px;
        margin: 50px 0 50px 40%
    }

    quiz-via .next:after,
    quiz-via .retry:after,
    quiz-via .submit:after {
        padding-left: 7px
    }
}

.card {
    position: relative;
    background: 0 0;
    border: none
}

.card div {
    position: absolute;
    width: 100%;
    transition: 1s ease-in-out
}

.horz div.lower {
    border-width: 1px;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: perspective(800px) rotateY(180deg);
    transform: perspective(800px) rotateY(180deg)
}

.horz div.upper {
    border-width: 1px;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: perspective(800px) rotateY(0deg);
    transform: perspective(800px) rotateY(0deg)
}

.horz.active div.lower {
    -webkit-transform: perspective(800px) rotateY(0);
    transform: perspective(800px) rotateY(0)
}

.horz.active div.upper {
    -webkit-transform: perspective(800px) rotateY(-179.9deg);
    transform: perspective(800px) rotateY(-179.9deg)
}

.vert div.lower {
    border-width: 1px;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: perspective(800px) rotateX(180deg);
    transform: perspective(800px) rotateX(180deg)
}

.vert div.upper {
    border-width: 1px;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: perspective(800px) rotateX(0deg);
    transform: perspective(800px) rotateX(0deg)
}

.vert.active div.lower {
    -webkit-transform: perspective(800px) rotateX(0);
    transform: perspective(800px) rotateX(0)
}

.vert.active div.upper {
    -webkit-transform: perspective(800px) rotateX(-179.9deg);
    transform: perspective(800px) rotateX(-179.9deg)
}

quiz-viagame {
    display: block;
    position: relative;
    font-family: ViaMaax, Sans-Serif
}

quiz-viagame #bodyReload>ul>li>a:link {
    display: block;
    width: 100%;
    background: #f4f4f4;
    height: 42px
}

quiz-viagame #bodyReload>ul>li>a:hover {
    width: 100%;
    background: #ccc;
    height: 62px
}

quiz-viagame #bodyReload>ul>li>a:visited {
    display: block;
    width: 100%;
    background: #ccc;
    height: 62px
}

quiz-viagame #bodyReload>ul>li>a:active {
    display: block;
    width: 100%;
    background: #f6f6f6;
    height: 62px
}

quiz-viagame .selectedLink {
    display: block;
    width: 90%;
    background: #ffcb05;
    height: 62px
}

quiz-viagame .getSignal {
    top: 205px;
    left: -150px;
    position: relative;
    -webkit-transform: scale(.15);
    transform: scale(.15)
}

quiz-viagame .getSignalR {
    top: 220px;
    left: -145px;
    position: relative;
    -webkit-transform: scale(.15);
    transform: scale(.15);
    opacity: .1
}

quiz-viagame .signalItems .disabled {
    pointer-events: none;
    opacity: .6
}

quiz-viagame .signalItems ul li {
    list-style: none;
    margin-left: 0;
    padding-top: 1px;
    padding-bottom: 1px;
    background-color: #f4f4f4;
    position: relative;
    height: 62px
}

quiz-viagame .signalItems ul li a {
    cursor: pointer;
    display: block;
    height: 62px;
    width: 100%;
    float: left;
    line-height: 17px;
    position: absolute;
    padding-left: 40px;
    padding-top: 0;
    font-size: 17px
}

quiz-viagame .signalItems ul li .redDot {
    position: absolute;
    right: 50px;
    top: 20px;
    height: 15px;
    width: 15px;
    background-color: red;
    border-radius: 50%;
    display: inline-block
}

quiz-viagame .signalItems ul li .greenDot {
    position: absolute;
    right: 50px;
    top: 20px;
    height: 15px;
    width: 15px;
    background-color: #0f0;
    border-radius: 50%;
    display: inline-block
}

quiz-viagame .radioBTN {
    display: inline-block;
    width: 2.5vw
}

quiz-viagame .radioBTN svg {
    height: 2.5vw !important
}

quiz-viagame .question-count {
    position: absolute;
    top: 1vw;
    right: 6vw;
    z-index: 1
}

quiz-viagame .slide1,
quiz-viagame .slide2 {
    width: 100%;
    top: 0;
    position: absolute;
    overflow-x: hidden;
    overflow-y: hidden
}

quiz-viagame .question,
quiz-viagame .summary {
    border: 1px solid grey;
    overflow: auto;
    overflow-x: hidden;
    overflow-y: hidden;
    height: 705px;
    width: 1025px;
    background: #fff
}

quiz-viagame .summary {
    padding-left: 5px
}

quiz-viagame .final-score {
    font-family: ViaMaax-bold, Sans-Serif;
    margin-left: 20px;
    height: 10px
}

quiz-viagame .finalFeedback {
    font-family: ViaMaax, Sans-Serif;
    font-size: 15px;
    margin-left: 20px
}

quiz-viagame .question {
    padding: 0vw 1vw 0;
    box-sizing: border-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -ms-flex-direction: column;
    flex-direction: column
}

quiz-viagame .question .stack1,
quiz-viagame .question .stack2 {
    -ms-flex-positive: 1;
    flex-grow: 1;
    box-sizing: border-box;
    -ms-flex-align: stretch;
    align-items: stretch
}

quiz-viagame .question .instructions {
    text-align: left;
    font-style: italic
}

quiz-viagame .question .stem {
    color: #000;
    font-size: 3.7vw;
    line-height: 4vw;
    margin-bottom: 0vw
}

quiz-viagame .question .stem P {
    color: #f26323;
    font-size: 3.7vw;
    line-height: 4vw
}

quiz-viagame .question .distractor {
    height: auto;
    width: 100%;
    margin-bottom: .75vw;
    cursor: pointer
}

quiz-viagame .question .distractor table {
    width: 100%
}

quiz-viagame .question .distractor td {
    line-height: 3vw;
    padding: .5vw;
    vertical-align: top
}

quiz-viagame .question .distractor td:first-child {
    width: 3vw
}

quiz-viagame .question .distractor.correct {
    background: #ff0
}

quiz-viagame .question .feedbackholder {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    margin: 2vw -6vw 0 !important
}

quiz-viagame .question .feedbackholder .correct {
    padding: 2vw 6vw;
    color: #fff;
    background: #383;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
    box-sizing: border-box
}

quiz-viagame .question .feedbackholder .incorrect {
    padding: 2vw 6vw;
    color: #fff;
    background: #b00;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
    box-sizing: border-box
}

quiz-viagame .next,
quiz-viagame .retry,
quiz-viagame .submit {
    font-family: ViaMaax, Sans-Serif;
    width: 100px;
    appearance: none;
    border: none;
    cursor: pointer;
    color: #000;
    background: #ffcb05;
    font-size: 1.5vw;
    line-height: 4vw;
    padding: 1vw 3vw;
    bottom: 30px;
    position: absolute;
    right: 5px
}

quiz-viagame .next:after,
quiz-viagame .retry:after,
quiz-viagame .submit:after {
    padding-left: 1vw
}

@media (orientation:landscape),
(min-width:700px) {
    quiz-viagame .radioBTN {
        width: 2vw
    }

    quiz-viagame .radioBTN svg {
        height: 2vw !important
    }

    quiz-viagame .question-count {
        right: 6vw
    }

    quiz-viagame .slide1,
    quiz-viagame .slide2 {
        width: 100%
    }

    quiz-viagame .summary {
        padding-left: 5px
    }

    quiz-viagame .question {
        width: 1025px
    }

    quiz-viagame .question .distractor {
        margin-bottom: 1vw
    }

    quiz-viagame .question .distractor td {
        line-height: 2vw;
        padding: .3vw;
        vertical-align: top
    }

    quiz-viagame .question .distractor td:first-child {
        width: 2vw
    }

    quiz-viagame .question .stem {
        font-size: 2.75vw;
        line-height: 3vw
    }

    quiz-viagame .question .stem P {
        font-size: 3vw;
        line-height: 3vw
    }

    quiz-viagame .next,
    quiz-viagame .retry,
    quiz-viagame .submit {
        font-size: 2.5vw;
        line-height: 3vw;
        padding: 1vw 2.5vw
    }

    quiz-viagame .next:after,
    quiz-viagame .retry:after,
    quiz-viagame .submit:after {
        padding-left: .7vw
    }
}

@media (min-width:1025px) {
    quiz-viagame {
        position: relative
    }

    quiz-viagame .radioBTN {
        width: 20px
    }

    quiz-viagame .radioBTN svg {
        height: 20px !important
    }

    quiz-viagame .question-count {
        right: 60px;
        top: 10px
    }

    quiz-viagame .slide1,
    quiz-viagame .slide2 {
        width: 100%
    }

    quiz-viagame .summary {
        padding: 0 0 0 5px
    }

    quiz-viagame .question {
        height: 705px;
        width: 1025px;
        padding: 0 10px
    }

    quiz-viagame .question .distractor {
        margin-bottom: 10px
    }

    quiz-viagame .question .distractor td {
        line-height: 20px;
        padding: 3px;
        vertical-align: top
    }

    quiz-viagame .question .distractor td:first-child {
        width: 20px
    }

    quiz-viagame .question .stem {
        font-size: 22px;
        line-height: 24px;
        margin-bottom: 0
    }

    quiz-viagame .question .stem P {
        font-size: 22px;
        line-height: 22px
    }

    quiz-viagame .question .feedbackholder {
        margin: 25px -60px 0 !important
    }

    quiz-viagame .question .feedbackholder .correct,
    quiz-viagame .question .feedbackholder .incorrect {
        padding: 25px 60px
    }

    quiz-viagame .next,
    quiz-viagame .retry,
    quiz-viagame .submit {
        font-size: 18px;
        line-height: 30px;
        padding: 10px 25px
    }

    quiz-viagame .next:after,
    quiz-viagame .retry:after,
    quiz-viagame .submit:after {
        padding-left: 7px
    }
}

chapter {
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box
}

.chapter-left,
.chapter-right {
    position: absolute;
    top: 0;
    width: 3vw;
    bottom: 0;
    z-index: 2;
    cursor: pointer;
    transition-duration: .3s
}

.chapter-left>svg,
.chapter-right>svg {
    position: absolute;
    top: calc(50vh - 5vw);
    width: 5vw;
    height: 10vw
}

.chapter-left {
    left: 0
}

.chapter-right {
    right: 0
}

.chapter-right>svg {
    margin-left: -2vw
}

.chapter-bottom {
    position: absolute;
    bottom: 10px;
    right: 3%;
    cursor: pointer;
    z-index: 1000;
    width: 2%;
    height: 2%
}

.chapter-top {
    position: absolute;
    top: 80px;
    right: 3%;
    cursor: pointer;
    z-index: 1000;
    width: 2%;
    height: 2%
}

.chapter-holder {
    box-sizing: border-box;
    position: absolute;
    overflow: hidden
}

.chapter-holder .assessment {
    margin-top: 5px
}

.chapter-holder .assessment .padding {
    padding-top: 20px
}

page::-webkit-scrollbar {
    width: 0;
    height: 0;
    background-color: #fff
}

page::-webkit-scrollbar-track {
    background: #fff
}

page::-webkit-scrollbar-thumb {
    background: #fff
}

page {
    box-sizing: border-box;
    position: relative;
    top: 0;
    display: block;
    float: left;
    overflow-x: hidden;
    overflow-y: auto;
    color: #333;
    width: 100vw;
    height: 100vh;
    padding: 8vw 0 0;
    pointer-events: auto;
    scrollbar-face-color: #adcdec;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch
}

page h1 {
    margin-top: -5px;
    font-size: 5vw;
    line-height: 5vw;
    margin-bottom: 2vw;
    font-weight: 400
}

page .panel h1 {
    padding-top: 25px;
    margin-bottom: 10px
}

page .panel p {
    font-size: 18px !important
}

page h2 {
    font-size: 4vw;
    line-height: 5vw;
    margin-bottom: 2vw;
    font-weight: 400
}

page p {
    font-family: Roboto, sans-serif;
    font-weight: 400;
    font-style: normal;
    text-align: left;
    margin-left: 0;
    margin-right: 0;
    font-size: 3.2vw;
    line-height: 4vw;
    margin-bottom: 2vw
}

page .page-gap {
    margin: 0;
    padding: 0;
    height: 3vw;
    background: green
}

page ul {
    list-style-type: square
}

page ol {
    list-style-type: decimal
}

page li {
    font-family: Roboto, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 3.2vw;
    line-height: 4vw;
    margin-left: 6vw;
    margin-bottom: 1vw
}

page table {
    border: none;
    border-spacing: 0
}

page table th {
    border: none;
    background: rgba(51, 102, 255, .8);
    font-family: Roboto, sans-serif;
    color: #fff;
    font-weight: 400;
    font-style: normal;
    padding: 2vw;
    font-size: 4vw;
    line-height: 5vw
}

page table td {
    border: none;
    background: rgba(255, 255, 255, 0);
    font-family: Roboto, sans-serif;
    color: #333;
    font-weight: 400;
    font-style: normal;
    padding: 2vw;
    font-size: 3.2vw;
    line-height: 4vw
}

page .statusDisplay {
    height: 90px;
    margin-top: 0;
    position: fixed;
    z-index: 1000;
    color: #fff;
    width: 1025px
}

page .statusRight {
    float: right;
    margin-right: 10px;
    margin-top: 16px
}

page .checkMark {
    margin-top: 10px;
    margin-left: 10px;
    width: 600px;
    float: left
}

page .indicator {
    width: 16px;
    height: 16px
}

page .warning-overlay {
    position: absolute;
    width: 100%;
    height: 125%;
    z-index: 10;
    background: rgba(0, 0, 0, .5);
    pointer-events: auto
}

page .warning-overlay .warning-pane {
    position: absolute;
    width: 40vw;
    left: 20vw;
    height: 15vw;
    top: calc(50vh - 10vw);
    padding: 2vw;
    font-size: 3.5vw;
    line-height: 4vw;
    text-align: center
}

page .warning-overlay .warning-pane .cancel,
page .warning-overlay .warning-pane .continue {
    appearance: none;
    border: none;
    color: #fff;
    padding: 1vw;
    font-size: 3vw;
    bottom: 2vw;
    width: 18vw;
    cursor: pointer
}

page .warning-overlay .warning-pane .cancel {
    position: absolute;
    background: #b00;
    left: 50%
}

page .warning-overlay .warning-pane .continue {
    position: absolute;
    background: #383;
    right: 50%
}

page .navSubcontainer {
    position: absolute;
    right: -35px;
    top: 15px
}

page .navSubcontainer ul {
    list-style-type: none;
    margin: 0;
    padding: 0
}

page .navSubcontainer ul li {
    position: relative;
    padding-left: 2px;
    height: 40px;
    line-height: 40px;
    margin: 8px;
    width: 2px;
    coursor: hand;
    border-radius: 0;
    border: 0 solid #ccc;
    cursor: pointer
}

page .navSubcontainer ul li:hover {
    border-color: #777;
    box-shadow: 2px 2px 2px #555
}

@media (orientation:landscape),
(min-width:768px) {

    .chapter-left,
    .chapter-right {
        width: 3vw;
        height: 100vh
    }

    .chapter-left>svg,
    .chapter-right>svg {
        position: absolute;
        top: calc(50vh - 4vw);
        width: 4vw;
        height: 8vw
    }

    .chapter-right>svg {
        margin-left: -1vw
    }

    .chapter-bottom,
    .chapter-top {
        display: none
    }

    page {
        width: 100vw;
        height: 100vh;
        padding: 6vw 0 0
    }

    page .navSubcontainer {
        top: 0;
        right: 12px
    }

    page h1 {
        font-size: 4vw;
        line-height: 5vw;
        margin-bottom: 1.5vw
    }

    page h2 {
        font-size: 3vw;
        line-height: 3.2vw;
        margin-bottom: 1.5vw
    }

    page p {
        font-size: 2.3vw;
        line-height: 3vw;
        margin-bottom: 1.5vw
    }

    page .page-gap {
        height: 3vw
    }

    page li {
        font-size: 2.3vw;
        line-height: 3vw;
        margin-left: 3vw;
        margin-bottom: .8vw
    }

    page table th {
        padding: 2vw;
        font-size: 3vw;
        line-height: 4vw
    }

    page table td {
        padding: 2vw;
        font-size: 2.3vw;
        line-height: 3vw
    }

    .warning-overlay {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 10;
        background: rgba(0, 0, 0, .5);
        pointer-events: auto
    }

    .warning-overlay .warning-pane {
        width: 50vw;
        left: 25vw;
        height: 20vw;
        top: calc(50vh - 10vw);
        padding: 2vw;
        font-size: 2.5vw;
        line-height: 2.8vw
    }

    .warning-overlay .warning-pane .cancel,
    .warning-overlay .warning-pane .continue {
        padding: 1.5vw;
        font-size: 2vw;
        bottom: 2vw;
        width: 12vw
    }
}

@media only screen and (min-width:1024px) {

    .chapter-left,
    .chapter-right {
        width: 30px;
        height: 100vh
    }

    .chapter-left>svg,
    .chapter-right>svg {
        position: absolute;
        top: calc(50vh - 40px);
        width: 40px;
        height: 80px
    }

    .chapter-right>svg {
        margin-left: -10px
    }

    .chapter-bottom,
    .chapter-top {
        display: block
    }

    page {
        width: 1024px;
        margin-left: calc((100vw - 1024px) / 2);
        margin-right: calc((100vw - 1024px) / 2);
        height: 100vh;
        padding: 0
    }

    page .navSubcontainer {
        top: 10px;
        right: -35px
    }

    page h1 {
        font-size: 30px;
        line-height: 20px;
        margin-bottom: 15px
    }

    page h2 {
        font-size: 25px;
        line-height: 28px;
        margin-bottom: 15px
    }

    page p {
        font-size: 18px;
        line-height: 20px;
        margin-bottom: 15px
    }

    page .page-gap {
        height: 30px
    }

    page li {
        font-size: 18px;
        line-height: 20px;
        margin-bottom: 2px;
        margin-left: 30px
    }

    page table th {
        padding: 20px;
        font-size: 25px;
        line-height: 35px
    }

    page table td {
        padding: 20px;
        font-size: 18px;
        line-height: 20px
    }
}

knowledge-check {
    display: block;
    position: relative
}

knowledge-check .radioBTN {
    display: inline-block;
    width: 2.5vw
}

knowledge-check .radioBTN svg {
    height: 2.5vw !important
}

knowledge-check .slide1 {
    width: 100%;
    overflow-x: hidden
}

knowledge-check .question {
    overflow: auto;
    overflow-x: hidden;
    background: #fff;
    box-sizing: border-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -ms-flex-direction: column;
    flex-direction: column
}

knowledge-check .question .stack1,
knowledge-check .question .stack2 {
    -ms-flex-positive: 1;
    flex-grow: 1;
    box-sizing: border-box;
    -ms-flex-align: stretch;
    align-items: stretch
}

knowledge-check .question .instructions {
    text-align: left;
    font-style: italic
}

knowledge-check .question .stem {
    color: #000;
    font-size: 3.7vw;
    line-height: 4vw;
    margin-bottom: 6vw
}

knowledge-check .question .stem P {
    color: #f26323;
    font-size: 3.7vw;
    line-height: 4vw
}

knowledge-check .question .distractor {
    height: auto;
    width: 100%;
    cursor: pointer
}

knowledge-check .question .distractor table {
    width: 100%
}

knowledge-check .question .distractor table td {
    line-height: 3vw;
    padding: .5vw;
    vertical-align: top
}

knowledge-check .question .distractor table td:first-child {
    width: 3vw
}

knowledge-check .question .feedbackholder {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-line-pack: stretch;
    align-content: stretch
}

knowledge-check .question .feedbackholder .correct {
    padding: 2.5vw 6vw;
    color: #fff;
    background: #383;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
    box-sizing: border-box
}

knowledge-check .question .feedbackholder .incorrect {
    padding: 2.5vw 6vw;
    color: #fff;
    background: #b00;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
    box-sizing: border-box
}

knowledge-check .submit {
    appearance: none;
    border: none;
    cursor: pointer;
    color: #fff;
    font-size: 3.5vw;
    line-height: 4vw;
    padding: 1vw 3vw;
    margin: 5vw 0 5vw 40%
}

knowledge-check .submit:after {
    content: "\00BB";
    padding-left: 1vw
}

knowledge-check .warningMsg {
    position: relative;
    top: -120px;
    left: 30px
}

@media (orientation:landscape),
(min-width:700px) {
    knowledge-check .radioBTN {
        width: 2vw
    }

    knowledge-check .radioBTN svg {
        height: 2vw !important
    }

    knowledge-check .slide1 {
        width: 100%
    }

    knowledge-check .summary {
        padding: 4vw 6vw 0
    }

    knowledge-check .question .distractor table {
        width: 100%
    }

    knowledge-check .question .distractor td {
        line-height: 2vw;
        padding: .3vw;
        vertical-align: top
    }

    knowledge-check .question .distractor td:first-child {
        width: 2vw
    }

    knowledge-check .question .distractor.correct {
        background: #ff0
    }

    knowledge-check .question .stem {
        font-size: 2.75vw;
        line-height: 3vw;
        margin-bottom: 6vw
    }

    knowledge-check .question .stem P {
        font-size: 3vw;
        line-height: 3vw
    }

    knowledge-check .submit {
        font-size: 2.5vw;
        line-height: 3vw;
        padding: 1vw 2.5vw;
        margin: 5vw 0 5vw 40%
    }

    knowledge-check .submit:after {
        padding-left: .7vw
    }
}

@media (min-width:1025px) {
    knowledge-check {
        position: relative
    }

    knowledge-check .radioBTN {
        width: 20px
    }

    knowledge-check .radioBTN svg {
        height: 20px !important
    }

    knowledge-check .slide1 {
        width: 100%
    }

    knowledge-check .summary {
        padding: 40px 60px 0
    }

    knowledge-check .question .distractor table {
        width: 100%
    }

    knowledge-check .question .distractor table td {
        line-height: 20px;
        padding: 3px;
        vertical-align: top
    }

    knowledge-check .question .distractor table td:first-child {
        width: 20px
    }

    knowledge-check .question .stem {
        font-size: 18px;
        line-height: 24px;
        margin-bottom: 40px
    }

    knowledge-check .question .stem P {
        font-size: 22px;
        line-height: 22px
    }

    knowledge-check .question .feedbackholder .correct,
    knowledge-check .question .feedbackholder .incorrect {
        padding: 25px 60px
    }

    knowledge-check .submit {
        font-family: Roboto, sans-serif;
        font-size: 20px;
        line-height: 30px;
        padding: 10px 25px;
        margin: 50px 0 50px 40%
    }

    knowledge-check .submit:after {
        padding-left: 7px
    }
}

.chapter1_page0 .navContainer {
    position: fixed;
    z-index: 1000;
    top: 100px;
    height: auto;
    width: 1024px;
    border: 1px solid grey
}

.chapter1_page0 {
    overflow-y: hidden !important;
    font-family: ViaMaax, Sans-Serif
}

.chapter1_page0 .logoP {
    position: absolute;
    left: 50px;
    top: 15px;
    height: 68px;
    width: 148px;
    z-index: 1000
}

.chapter1_page0 .logoP logo svg {
    width: 165px !important;
    height: 60px !important
}

.chapter1_page0 h2.checkMark {
    font-family: ViaMaax-bold, Sans-Serif;
    margin-top: 25px;
    font-size: 2em;
    width: 60%;
    margin-left: 320px;
    margin-right: auto;
    text-align: center
}

.chapter1_page0 .btn {
    font-family: ViaMaax, Sans-Serif;
    border: none;
    width: 160px;
    padding-left: 25px;
    padding-right: 25px;
    height: 45px;
    font-size: 18px;
    line-height: 20px;
    cursor: pointer;
    background: #ffcb08;
    color: #222;
    text-align: center
}

.chapter1_page0 .bottomPanel {
    position: absolute;
    left: 271px;
    top: 532px;
    width: 735px;
    height: 145px;
    background-color: #f4f4f4
}

.chapter1_page0 .bottomPanel p {
    font-family: ViaMaax, Sans-Serif;
    padding-top: 10px;
    padding-left: 10px;
    font-size: 18px
}

.chapter1_page0 .bottomPanel #signalTitle {
    font-family: ViaMaax-bold, Sans-Serif
}

.chapter1_page0 .bottomPanel #signalInfo {
    width: 500px
}

.chapter1_page0 .bottomPanel .bolded {
    display: inline-block;
    width: 112px;
    font-family: ViaMaax-bold, Sans-Serif;
    font-weight: 700
}

.chapter1_page0 .statusPanel {
    position: absolute;
    top: 572px;
    right: 40px;
    width: 200px;
    height: 100px
}

.chapter1_page0 .signalItems {
    margin-top: 50px;
    width: 25%;
    height: 610px;
    float: left;
    overflow-y: scroll;
    overflow-x: hidden
}

.chapter1_page0 .signalItems ul li {
    margin-bottom: 5px
}

.chapter1_page0 .signalItems ul li span {
    font-family: ViaMaax-bold, Sans-Serif
}

.chapter1_page0 .signalItems ul li .subText {
    margin-top: 5px;
    display: block;
    line-height: 16px;
    font-family: ViaMaax, Sans-Serif;
    font-size: 15px;
    color: grey
}

.chapter1_page0 .signalItems ul li .ruleText {
    line-height: 30px;
    font-family: ViaMaax, Sans-Serif;
    font-size: 15px;
    font-weight: 300
}

.chapter1_page0 #loading {
    position: absolute;
    display: block;
    float: left;
    margin-top: 220px;
    margin-left: 300px;
    padding-top: 10px;
    text-align: center;
    width: 160px;
    height: 55px;
    z-index: 1000;
    background: rgba(255, 255, 255, .4)
}

.chapter1_page0 #textSignal {
    font-family: ViaMaax-bold, Sans-Serif;
    display: none;
    position: absolute;
    width: 685px;
    text-align: center;
    z-index: 1000;
    padding: 5px 10px;
    margin-top: 460px;
    margin-left: 15px;
    background: rgba(255, 255, 255, .6)
}

.chapter1_page0 .signalVideos {
    width: 73%;
    height: 600px;
    margin-top: 20px;
    margin-right: 10px;
    float: right
}

.chapter1_page0 .signalVideos #outerspace {
    height: 400px;
    x-index: 100;
    position: relative;
    left: 325px;
    top: -115px
}

.chapter1_page0 .signalVideos div.rocket {
    position: absolute;
    bottom: -25px;
    left: 26px
}

.chapter1_page0 .signalVideos div.rocket div {
    width: 92px;
    height: 215px
}

.chapter1_page0 .signalVideos .gifffer-play-button {
    display: none
}

.chapter1_page0 .panel1 .invisible {
    opacity: 0
}

.chapter1_page0 .panel1 .responsive-hidden-50 {
    position: relative
}

.chapter1_page0 .panel1 .responsive-hidden-50 img {
    width: 100%
}

.chapter1_page0 .panel1 .responsive-hidden-50 .absImg {
    position: absolute;
    left: 0;
    top: 0;
    display: none
}

.chapter1_page0 .panel2 .responsive-hidden-50 img,
.chapter1_page0 .panel3 .responsive-hidden-50 img {
    width: 100%
}

.chapter1_page0 .panel4 {
    background: url(images/c1_p1_p4.jpg) center center no-repeat;
    background-size: cover
}

.chapter1_page0 .panel4 .charcoal_fill {
    background-color: #252525
}

.chapter1_page0 .panel4 .pewter_fill {
    background-color: #767676
}

.chapter1_page0 .panel4 .white-fill {
    background: rgba(255, 255, 255, .9)
}

.chapter1_page0 .panel4 .popTable {
    width: 100%
}

.chapter1_page0 .panel4 .popTable .complete {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAaCAYAAADSbo4CAAAACXBIWXMAAC4jAAAuIwF4pT92AAAGU2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDIgNzkuMTYwOTI0LCAyMDE3LzA3LzEzLTAxOjA2OjM5ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAxOC0wNC0wMlQwODowODoxOS0wNTowMCIgeG1wOk1vZGlmeURhdGU9IjIwMTgtMDQtMDJUMDg6MTM6NTAtMDU6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMTgtMDQtMDJUMDg6MTM6NTAtMDU6MDAiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiBwaG90b3Nob3A6SUNDUHJvZmlsZT0ic1JHQiBJRUM2MTk2Ni0yLjEiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTIxN2I5ZmEtMGVlYy00NzQzLTk4NWItMjdmYjQ5MGNjMjBmIiB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6ZDRmMGYxODYtMGVmYS01YjQ3LTk5ZGEtNWI1OGQ1NTNkZWY5IiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6ZmJhYzdiZmQtZTY1OC1jNDQ1LTg0OTItNjg0ODg1NWE5MWE5Ij4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDpmYmFjN2JmZC1lNjU4LWM0NDUtODQ5Mi02ODQ4ODU1YTkxYTkiIHN0RXZ0OndoZW49IjIwMTgtMDQtMDJUMDg6MDg6MTktMDU6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAoV2luZG93cykiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNvbnZlcnRlZCIgc3RFdnQ6cGFyYW1ldGVycz0iZnJvbSBhcHBsaWNhdGlvbi92bmQuYWRvYmUucGhvdG9zaG9wIHRvIGltYWdlL3BuZyIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6NTIxN2I5ZmEtMGVlYy00NzQzLTk4NWItMjdmYjQ5MGNjMjBmIiBzdEV2dDp3aGVuPSIyMDE4LTA0LTAyVDA4OjEzOjUwLTA1OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Po5MaX0AAADPSURBVEjH7dcxC8IwEIbhgv5Ui0JRh7p1FKSDDlJRdNNubs7+uNfRUq5JG3OJoAcZ7/pACPc1AZJvOMmvQkrgEBuy4F1FLEgTIWJCIFZ01zkUxIQAeNggI2CsjLj0uZo98AyF6ILkjYY6BEKC5EJjrY1oQ3aGAXdNRBuytgyqtRDS1UwsA2/CkMLSU7numtkAjBeE6flmlg9seoArX9t3iXudfMcAF8xRK49kAxAVysEo1UQM3b6pFsIlBkwFxDZWZp37RnwSjErg+v+d0Dwvi1YjDqxpk6sAAAAASUVORK5CYII=);
    background-repeat: no-repeat;
    background-position: right top;
    background-size: 30px 22px
}

.chapter1_page0 .panel4 .popTable td {
    width: 33%;
    text-align: center;
    cursor: pointer;
    border-left: 1px solid #fff
}

.chapter1_page0 .panel4 .popover-holder {
    min-height: 180px;
    position: relative;
    width: 100%
}

.chapter1_page0 .panel4 .popover-holder pop-over {
    width: 100%;
    position: relative;
    display: block
}

.chapter1_page0 .panel5 .responsive-hidden-50 img {
    width: 100%
}

@media (orientation:landscape),
(min-width:768px) {
    .chapter1_page0 .navContainer {
        width: 100% !important
    }
}

@media (min-width:1024px) {
    .chapter1_page0 .navContainer {
        width: 1024px !important
    }

    .chapter1_page0 .signalItems ul li {
        font-family: ViaMaax, Sans-Serif;
        margin-bottom: 5px
    }

    .chapter1_page0 .signalItems ul li span {
        margin-top: 0
    }
}

.one-two.left>div,
.one-two>div {
    display: block;
    width: 100%;
    float: left;
    box-sizing: border-box
}

.one-two.right>div {
    float: right
}

.half {
    width: 49% !important
}

@media (orientation:landscape),
(min-width:700px) {
    .one-two>div {
        display: block;
        width: 100%
    }

    .half {
        width: 100% !important
    }
}

@media (min-width:1025px),
(update:fast) {
    .one-two>div {
        display: block;
        width: 50%
    }

    .half {
        width: 49% !important
    }
}

.chapter2_page0 .navContainer {
    position: fixed;
    z-index: 1000;
    top: 100px;
    height: auto;
    width: 1024px;
    border: 1px solid grey
}

.chapter2_page0 {
    font-family: ViaMaax, Sans-Serif;
    overflow-y: hidden !important
}

.chapter2_page0 .logoP {
    position: absolute;
    left: 50px;
    top: 15px;
    height: 68px;
    width: 148px;
    z-index: 1000
}

.chapter2_page0 .logoP logo svg {
    width: 165px !important;
    height: 60px !important
}

.chapter2_page0 h2.checkMark {
    font-family: ViaMaax-bold, Sans-Serif;
    margin-top: 25px;
    font-size: 2em;
    width: 60%;
    margin-left: 320px;
    margin-right: auto;
    text-align: center
}

.chapter2_page0 .btn {
    font-family: ViaMaax, Sans-Serif;
    border: none;
    width: 100px;
    margin-top: 10px;
    height: 65px;
    font-size: 18px;
    line-height: 20px;
    cursor: pointer;
    background: #ffcb08;
    color: #222;
    text-align: center;
    z-index: 1100 !important
}

.chapter2_page0 .btnQuestion {
    font-family: ViaMaax, Sans-Serif;
    border: none;
    width: 90%;
    margin-top: 5px;
    padding-left: 10px;
    padding-right: 10px;
    height: 120px;
    font-size: 15px;
    line-height: 20px;
    cursor: pointer;
    background: #ffcb08;
    color: #222;
    text-align: center
}

.chapter2_page0 #clockStyle {
    font-family: ViaMaax-bold, Sans-Serif;
    font-size: 42px;
    position: relative;
    left: 1px;
    top: -95px
}

.chapter2_page0 .btnQuestion:active,
.chapter2_page0 .btnQuestion:hover,
.chapter2_page0 .btnQuestion:link,
.chapter2_page0 .btnQuestion:visited,
.chapter2_page0 button:active,
.chapter2_page0 button:hover,
.chapter2_page0 button:link,
.chapter2_page0 button:visited {
    border: none
}

.chapter2_page0 .bottomPanelReview {
    position: absolute;
    left: 272px;
    top: 572px;
    width: 735px;
    height: 120px;
    background-color: #f4f4f4
}

.chapter2_page0 .bottomPanelReview #signalTitle {
    font-family: ViaMaax-bold, Sans-Serif;
    margin-left: 35px;
    margin-top: 15px;
    margin-bottom: 15px
}

.chapter2_page0 .bottomPanelReview #signalInfo {
    font-family: ViaMaax-bold, Sans-Serif;
    font-size: 15px;
    margin-left: 35px;
    margin-top: 5px;
    width: 550px;
    margin-bottom: 10px
}

.chapter2_page0 .bottomPanelReview #signalInfo .indicationTxt {
    font-size: 18px
}

.chapter2_page0 .bottomPanelReview #signalEvalText {
    font-family: ViaMaax-bold, Sans-Serif;
    font-size: 18px;
    margin-left: 35px;
    margin-top: 5px;
    margin-bottom: 10px;
    width: 570px
}

.chapter2_page0 .bottomPanelReview .greenDot {
    position: absolute;
    left: 15px;
    height: 15px;
    width: 15px;
    background-color: #0f0;
    border-radius: 50%;
    display: inline-block
}

.chapter2_page0 .bottomPanelReview .redDot {
    position: absolute;
    left: 15px;
    height: 15px;
    width: 15px;
    background-color: red;
    border-radius: 50%;
    display: inline-block
}

.chapter2_page0 .bottomPanel {
    position: absolute;
    left: 271px;
    top: 542px;
    height: 160px;
    background-color: #f4f4f4
}

.chapter2_page0 .bottomPanel p {
    font-family: ViaMaax, Sans-Serif;
    padding-top: 10px;
    padding-left: 10px;
    font-size: 18px
}

.chapter2_page0 .bottomPanel table {
    margin-top: 0;
    margin-left: 90px;
    width: 500px;
    overflow: hidden
}

.chapter2_page0 .bottomPanel table tr.tdnumbers td {
    padding: 15px 15px 0
}

.chapter2_page0 .bottomPanel table tr.tdindicators td {
    padding: 10px 15px;
    background-color: #ccc
}

.chapter2_page0 .bottomPanel #circle1,
.chapter2_page0 .bottomPanel #circle10,
.chapter2_page0 .bottomPanel #circle11,
.chapter2_page0 .bottomPanel #circle12,
.chapter2_page0 .bottomPanel #circle13,
.chapter2_page0 .bottomPanel #circle14,
.chapter2_page0 .bottomPanel #circle15,
.chapter2_page0 .bottomPanel #circle16,
.chapter2_page0 .bottomPanel #circle17,
.chapter2_page0 .bottomPanel #circle18,
.chapter2_page0 .bottomPanel #circle19,
.chapter2_page0 .bottomPanel #circle2,
.chapter2_page0 .bottomPanel #circle20,
.chapter2_page0 .bottomPanel #circle3,
.chapter2_page0 .bottomPanel #circle4,
.chapter2_page0 .bottomPanel #circle5,
.chapter2_page0 .bottomPanel #circle6,
.chapter2_page0 .bottomPanel #circle7,
.chapter2_page0 .bottomPanel #circle8,
.chapter2_page0 .bottomPanel #circle9 {
    width: 10px;
    height: 10px;
    border-radius: 12px;
    background-color: #e7e7e7;
    border: 3px solid #bbb
}

.chapter2_page0 .bottomPanel .current {
    background-color: #fff !important;
    border: 3px solid #ddd !important;
    border-radius: 12px !important;
    -webkit-border-radius: 12px !important;
    -moz-border-radius: 12px !important;
    box-shadow: 0 3px 2px rgba(0, 0, 0, .4)
}

.chapter2_page0 .bottomPanel .correctR {
    background-color: #0F0 !important;
    border: 3px solid #0F0 !important;
    border-radius: 12px !important;
    -webkit-border-radius: 12px !important;
    -moz-border-radius: 12px !important
}

.chapter2_page0 .bottomPanel .incorrectR {
    background-color: red !important;
    border: 3px solid red !important;
    border-radius: 12px !important;
    -webkit-border-radius: 12px !important;
    -moz-border-radius: 12px !important
}

.chapter2_page0 .statusPanel {
    position: absolute;
    top: 592px;
    right: 30px;
    width: 100px;
    height: 100px;
    z-index: 1100
}

.chapter2_page0 .questions {
    margin-top: 20px;
    margin-left: 10px;
    width: 25%;
    height: 610px;
    float: left;
    overflow-y: hidden;
    overflow-x: hidden
}

.chapter2_page0 .questions .questionText {
    margin-top: 10px;
    margin-bottom: 10px;
    font-family: ViaMaax-bold, Sans-Serif;
    font-size: 22px;
    width: 90%;
    text-align: center
}

.chapter2_page0 .questions .circleAnimation {
    width: 90%;
    margin-top: 30px;
    text-align: center
}

.chapter2_page0 .questions .progressText {
    position: absolute;
    top: 608px;
    left: 215px;
    padding: 10px;
    background-color: #ddd;
    font-family: ViaMaax-bold, Sans-Serif;
    font-size: 25px;
    z-index: 100
}

.chapter2_page0 .signalVideos {
    width: 72%;
    height: 600px;
    margin-top: 20px;
    margin-right: 10px;
    float: right
}

.chapter2_page0 .signalVideos #outerspace {
    height: 400px;
    x-index: 100;
    position: relative;
    left: 325px;
    top: -115px
}

.chapter2_page0 .signalVideos div.rocket {
    position: absolute;
    bottom: -20px;
    left: 26px;
    transition: 3s ease-in
}

.chapter2_page0 .signalVideos div.rocket div {
    width: 92px;
    height: 215px;
    transition: 2s ease-in-out
}

.chapter2_page0 .signalVideos .gifffer-play-button {
    display: none
}

.chapter2_page0 .signalVideos .displayFinalMessage {
    display: none;
    font-family: ViaMaax-bold, Sans-Serif;
    font-size: 32px;
    color: #fff;
    position: absolute;
    bottom: 16px;
    left: -180px;
    z-index: 1001;
    text-align: center;
    padding: 10px;
    background-color: rgba(0, 0, 0, .2);
    box-shadow: 0 3px 1px rgba(0, 0, 0, .7)
}

.chapter2_page0 .signalVideos .displayFinalMessageFR {
    display: none;
    font-family: ViaMaax-bold, Sans-Serif;
    font-size: 32px;
    color: #fff;
    position: absolute;
    bottom: 16px;
    width: 700px;
    left: -330px;
    z-index: 1001;
    text-align: center;
    padding: 10px;
    background-color: rgba(0, 0, 0, .2);
    box-shadow: 0 3px 1px rgba(0, 0, 0, .7)
}

.chapter2_page0 .signalVideosReview {
    width: 73%;
    height: 540px;
    margin-top: 0;
    margin-right: 10px;
    float: right
}

.chapter2_page0 .signalVideosReview #outerspaceR {
    height: 400px;
    x-index: 100;
    position: relative;
    left: 325px;
    top: -115px
}

.chapter2_page0 .signalVideosReview div.rocketR {
    position: absolute;
    bottom: 10px;
    left: 28px;
    transition: 3s ease-in
}

.chapter2_page0 .signalVideosReview div.rocketR div {
    width: 92px;
    height: 215px;
    transition: 2s ease-in-out
}

.chapter2_page0 .signalItems {
    margin-top: 0;
    width: 25%;
    height: 550px;
    float: left;
    overflow-y: scroll;
    overflow-x: hidden
}

.chapter2_page0 .signalItems ul li {
    margin-bottom: 5px
}

.chapter2_page0 .signalItems ul li span {
    font-family: ViaMaax-bold, Sans-Serif
}

.chapter2_page0 .signalItems ul li .subText {
    margin-top: 5px;
    display: block;
    line-height: 16px;
    font-family: ViaMaax, Sans-Serif;
    font-size: 15px;
    color: grey
}

.chapter2_page0 .signalItems ul li .ruleText {
    line-height: 30px;
    font-family: ViaMaax, Sans-Serif;
    font-size: 15px;
    font-weight: 300
}

.chapter2_page0 #textSignalPlay {
    font-family: ViaMaax-bold, Sans-Serif;
    display: none;
    position: absolute;
    width: 685px;
    text-align: center;
    z-index: 1000;
    padding: 5px 10px;
    margin-top: 440px;
    margin-left: 15px;
    background: rgba(255, 255, 255, .6)
}

.chapter2_page0 #textSignalReview {
    font-family: ViaMaax-bold, Sans-Serif;
    display: none;
    position: absolute;
    width: 685px;
    text-align: center;
    z-index: 1000;
    padding: 5px 10px;
    margin-top: 430px;
    margin-left: 15px;
    background: rgba(255, 255, 255, .6)
}

@media (orientation:landscape),
(min-width:768px) {
    .chapter2_page0 .navContainer {
        width: 100% !important
    }

    .chapter2_page0 .statusPanel {
        display: block;
        opacity: 1
    }

    .chapter2_page0 .btn {
        z-index: 1100 !important
    }
}

@media (min-width:1024px) {
    .chapter2_page0 .navContainer {
        width: 1024px !important
    }

    .chapter2_page0 .signalItems ul li {
        font-family: ViaMaax, Sans-Serif;
        margin-bottom: 5px
    }

    .chapter2_page0 .signalItems ul li span {
        margin-top: 2px
    }

    .chapter2_page0 .btn {
        z-index: 1100 !important
    }

    .chapter2_page0 .statusPanel {
        border: none;
        display: block;
        opacity: 1
    }
}

.one-three.left>div,
.one-three>div {
    display: block;
    width: 100%;
    float: left;
    box-sizing: border-box
}

.one-three.right>div {
    float: right
}

@media (orientation:landscape),
(min-width:700px) {
    .one-three>div {
        display: block;
        width: 33.3%
    }
}

.chapter3_page1 .navContainer {
    position: fixed;
    z-index: 1000;
    top: 100px;
    height: auto;
    width: 1024px
}

.chapter3_page1 .panel1 .responsive-hidden-50 img {
    width: 100%
}

.chapter3_page1 .panel3 .charcoal_fill {
    background-color: #252525
}

.chapter3_page1 .panel3 .pewter_fill {
    background-color: #767676
}

.chapter3_page1 .panel3 .white-fill {
    background: rgba(255, 255, 255, .9)
}

.chapter3_page1 .panel3 .popTable {
    width: 100%
}

.chapter3_page1 .panel3 .popTable .complete {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAaCAYAAADSbo4CAAAACXBIWXMAAC4jAAAuIwF4pT92AAAGU2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDIgNzkuMTYwOTI0LCAyMDE3LzA3LzEzLTAxOjA2OjM5ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAxOC0wNC0wMlQwODowODoxOS0wNTowMCIgeG1wOk1vZGlmeURhdGU9IjIwMTgtMDQtMDJUMDg6MTM6NTAtMDU6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMTgtMDQtMDJUMDg6MTM6NTAtMDU6MDAiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiBwaG90b3Nob3A6SUNDUHJvZmlsZT0ic1JHQiBJRUM2MTk2Ni0yLjEiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTIxN2I5ZmEtMGVlYy00NzQzLTk4NWItMjdmYjQ5MGNjMjBmIiB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6ZDRmMGYxODYtMGVmYS01YjQ3LTk5ZGEtNWI1OGQ1NTNkZWY5IiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6ZmJhYzdiZmQtZTY1OC1jNDQ1LTg0OTItNjg0ODg1NWE5MWE5Ij4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDpmYmFjN2JmZC1lNjU4LWM0NDUtODQ5Mi02ODQ4ODU1YTkxYTkiIHN0RXZ0OndoZW49IjIwMTgtMDQtMDJUMDg6MDg6MTktMDU6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAoV2luZG93cykiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNvbnZlcnRlZCIgc3RFdnQ6cGFyYW1ldGVycz0iZnJvbSBhcHBsaWNhdGlvbi92bmQuYWRvYmUucGhvdG9zaG9wIHRvIGltYWdlL3BuZyIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6NTIxN2I5ZmEtMGVlYy00NzQzLTk4NWItMjdmYjQ5MGNjMjBmIiBzdEV2dDp3aGVuPSIyMDE4LTA0LTAyVDA4OjEzOjUwLTA1OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Po5MaX0AAADPSURBVEjH7dcxC8IwEIbhgv5Ui0JRh7p1FKSDDlJRdNNubs7+uNfRUq5JG3OJoAcZ7/pACPc1AZJvOMmvQkrgEBuy4F1FLEgTIWJCIFZ01zkUxIQAeNggI2CsjLj0uZo98AyF6ILkjYY6BEKC5EJjrY1oQ3aGAXdNRBuytgyqtRDS1UwsA2/CkMLSU7numtkAjBeE6flmlg9seoArX9t3iXudfMcAF8xRK49kAxAVysEo1UQM3b6pFsIlBkwFxDZWZp37RnwSjErg+v+d0Dwvi1YjDqxpk6sAAAAASUVORK5CYII=);
    background-repeat: no-repeat;
    background-position: right top;
    background-size: 30px 22px
}

.chapter3_page1 .panel3 .popTable .incorrect.complete {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAACXBIWXMAAC4jAAAuIwF4pT92AAAGeGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDE5LTA1LTI4VDE0OjM4OjExLTA1OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDE5LTA1LTI4VDE0OjM4OjExLTA1OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAxOS0wNS0yOFQxNDozODoxMS0wNTowMCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo3MWYxZGE4Zi04ZGRlLWEzNDMtYjEwOS0wY2E2NzYyYTJlMjAiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDplNmE0OTkwMy0wMjc5LTczNDctOTVjOC02YTg1ZWE3OGQ0NWYiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpiYjE4MmJkMC0wOGU3LTc1NDgtODhmOS05OTUyNGNiZWJjMTEiIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjcmVhdGVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOmJiMTgyYmQwLTA4ZTctNzU0OC04OGY5LTk5NTI0Y2JlYmMxMSIgc3RFdnQ6d2hlbj0iMjAxOS0wNS0yOFQxNDozODoxMS0wNTowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo3MWYxZGE4Zi04ZGRlLWEzNDMtYjEwOS0wY2E2NzYyYTJlMjAiIHN0RXZ0OndoZW49IjIwMTktMDUtMjhUMTQ6Mzg6MTEtMDU6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPHBob3Rvc2hvcDpUZXh0TGF5ZXJzPiA8cmRmOkJhZz4gPHJkZjpsaSBwaG90b3Nob3A6TGF5ZXJOYW1lPSJYIiBwaG90b3Nob3A6TGF5ZXJUZXh0PSJYIi8+IDwvcmRmOkJhZz4gPC9waG90b3Nob3A6VGV4dExheWVycz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6r8a0BAAAA00lEQVQ4y7WVYQ3EIAyFsXAWsICFWcDCLGBhFmYBC1iYBSxg4e3P7pLrWngjWZMmy9Z+S19LcQDcG/59+ACo+Ld2vbeSM+62SLADEJXA3YAOY2XCriREEaNVV2V1TklqgyTm544tc+t8y73mMY2JTxpsgb0iiWbraNw0XwfQzMyx5cWAtquqabA3wIk9eZaHt8C1o3GYBadB844ZcABn6Sn4MErXpPEsOHWOdGAlYcaripiNkYSRYCHW5k0SVgJmAxYN7Ik9zFwKSYILs7yJS+G3Q045SmQTv/x1yAAAAABJRU5ErkJggg==);
    background-repeat: no-repeat;
    background-position: right top;
    background-size: 22px 22px
}

.chapter3_page1 .panel3 .popTable td {
    width: 50%;
    text-align: center;
    cursor: pointer;
    border-left: 1px solid #fff;
    vertical-align: middle
}

.chapter3_page1 .panel3 .popover-holder {
    min-height: 300px;
    position: relative;
    width: 100%;
    background: url(images/c3_p1_p3.jpg) center top no-repeat;
    background-size: cover
}

.chapter3_page1 .panel3 .popover-holder pop-over {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(255, 255, 255, .9)
}

.chapter3_page1 .panel4 .horz {
    width: 100%;
    height: 60vw
}

.chapter3_page1 .panel5 .horz {
    width: 100%;
    height: 80vw
}

.chapter3_page1 .panel6 button {
    cursor: pointer;
    padding: 16px 8px;
    border: 0;
    font-size: 18px
}

.chapter3_page1 .panel6 pop-over {
    background: rgba(255, 255, 255, .9);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

.chapter3_page1 .panel6 pop-over .popover-close-btn {
    color: #252525
}

.chapter3_page1 .panel8 .charcoal_fill {
    background-color: #252525
}

.chapter3_page1 .panel8 .pewter_fill {
    background-color: #767676
}

.chapter3_page1 .panel8 .white-fill {
    background: rgba(255, 255, 255, .9)
}

.chapter3_page1 .panel8 .popTable {
    width: 100%
}

.chapter3_page1 .panel8 .popTable .complete {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAaCAYAAADSbo4CAAAACXBIWXMAAC4jAAAuIwF4pT92AAAGU2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDIgNzkuMTYwOTI0LCAyMDE3LzA3LzEzLTAxOjA2OjM5ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAxOC0wNC0wMlQwODowODoxOS0wNTowMCIgeG1wOk1vZGlmeURhdGU9IjIwMTgtMDQtMDJUMDg6MTM6NTAtMDU6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMTgtMDQtMDJUMDg6MTM6NTAtMDU6MDAiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiBwaG90b3Nob3A6SUNDUHJvZmlsZT0ic1JHQiBJRUM2MTk2Ni0yLjEiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTIxN2I5ZmEtMGVlYy00NzQzLTk4NWItMjdmYjQ5MGNjMjBmIiB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6ZDRmMGYxODYtMGVmYS01YjQ3LTk5ZGEtNWI1OGQ1NTNkZWY5IiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6ZmJhYzdiZmQtZTY1OC1jNDQ1LTg0OTItNjg0ODg1NWE5MWE5Ij4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDpmYmFjN2JmZC1lNjU4LWM0NDUtODQ5Mi02ODQ4ODU1YTkxYTkiIHN0RXZ0OndoZW49IjIwMTgtMDQtMDJUMDg6MDg6MTktMDU6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAoV2luZG93cykiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNvbnZlcnRlZCIgc3RFdnQ6cGFyYW1ldGVycz0iZnJvbSBhcHBsaWNhdGlvbi92bmQuYWRvYmUucGhvdG9zaG9wIHRvIGltYWdlL3BuZyIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6NTIxN2I5ZmEtMGVlYy00NzQzLTk4NWItMjdmYjQ5MGNjMjBmIiBzdEV2dDp3aGVuPSIyMDE4LTA0LTAyVDA4OjEzOjUwLTA1OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Po5MaX0AAADPSURBVEjH7dcxC8IwEIbhgv5Ui0JRh7p1FKSDDlJRdNNubs7+uNfRUq5JG3OJoAcZ7/pACPc1AZJvOMmvQkrgEBuy4F1FLEgTIWJCIFZ01zkUxIQAeNggI2CsjLj0uZo98AyF6ILkjYY6BEKC5EJjrY1oQ3aGAXdNRBuytgyqtRDS1UwsA2/CkMLSU7numtkAjBeE6flmlg9seoArX9t3iXudfMcAF8xRK49kAxAVysEo1UQM3b6pFsIlBkwFxDZWZp37RnwSjErg+v+d0Dwvi1YjDqxpk6sAAAAASUVORK5CYII=);
    background-repeat: no-repeat;
    background-position: right top;
    background-size: 30px 22px
}

.chapter3_page1 .panel8 .popTable .incorrect.complete {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAACXBIWXMAAC4jAAAuIwF4pT92AAAGeGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDE5LTA1LTI4VDE0OjM4OjExLTA1OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDE5LTA1LTI4VDE0OjM4OjExLTA1OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAxOS0wNS0yOFQxNDozODoxMS0wNTowMCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo3MWYxZGE4Zi04ZGRlLWEzNDMtYjEwOS0wY2E2NzYyYTJlMjAiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDplNmE0OTkwMy0wMjc5LTczNDctOTVjOC02YTg1ZWE3OGQ0NWYiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpiYjE4MmJkMC0wOGU3LTc1NDgtODhmOS05OTUyNGNiZWJjMTEiIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjcmVhdGVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOmJiMTgyYmQwLTA4ZTctNzU0OC04OGY5LTk5NTI0Y2JlYmMxMSIgc3RFdnQ6d2hlbj0iMjAxOS0wNS0yOFQxNDozODoxMS0wNTowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo3MWYxZGE4Zi04ZGRlLWEzNDMtYjEwOS0wY2E2NzYyYTJlMjAiIHN0RXZ0OndoZW49IjIwMTktMDUtMjhUMTQ6Mzg6MTEtMDU6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPHBob3Rvc2hvcDpUZXh0TGF5ZXJzPiA8cmRmOkJhZz4gPHJkZjpsaSBwaG90b3Nob3A6TGF5ZXJOYW1lPSJYIiBwaG90b3Nob3A6TGF5ZXJUZXh0PSJYIi8+IDwvcmRmOkJhZz4gPC9waG90b3Nob3A6VGV4dExheWVycz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6r8a0BAAAA00lEQVQ4y7WVYQ3EIAyFsXAWsICFWcDCLGBhFmYBC1iYBSxg4e3P7pLrWngjWZMmy9Z+S19LcQDcG/59+ACo+Ld2vbeSM+62SLADEJXA3YAOY2XCriREEaNVV2V1TklqgyTm544tc+t8y73mMY2JTxpsgb0iiWbraNw0XwfQzMyx5cWAtquqabA3wIk9eZaHt8C1o3GYBadB844ZcABn6Sn4MErXpPEsOHWOdGAlYcaripiNkYSRYCHW5k0SVgJmAxYN7Ik9zFwKSYILs7yJS+G3Q045SmQTv/x1yAAAAABJRU5ErkJggg==);
    background-repeat: no-repeat;
    background-position: right top;
    background-size: 22px 22px
}

.chapter3_page1 .panel8 .popTable td {
    width: 33%;
    text-align: center;
    cursor: pointer;
    border-left: 1px solid #fff;
    vertical-align: middle
}

.chapter3_page1 .panel8 .popover-holder {
    min-height: 420px;
    position: relative;
    width: 100%
}

.chapter3_page1 .panel8 .popover-holder pop-over {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0
}

.chapter3_page1 .panel8 .popover-holder pop-over ul {
    margin-bottom: 16px
}

.chapter3_page1 .panel9 .horz {
    width: 100%;
    height: 70vw
}

.chapter3_page1 .panel10 .charcoal_fill {
    background-color: #252525
}

.chapter3_page1 .panel10 .pewter_fill {
    background-color: #767676
}

.chapter3_page1 .panel10 .white-fill {
    background: rgba(255, 255, 255, .9)
}

.chapter3_page1 .panel10 .popTable {
    width: 100%
}

.chapter3_page1 .panel10 .popTable .correct.complete {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAaCAYAAADSbo4CAAAACXBIWXMAAC4jAAAuIwF4pT92AAAGU2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDIgNzkuMTYwOTI0LCAyMDE3LzA3LzEzLTAxOjA2OjM5ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAxOC0wNC0wMlQwODowODoxOS0wNTowMCIgeG1wOk1vZGlmeURhdGU9IjIwMTgtMDQtMDJUMDg6MTM6NTAtMDU6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMTgtMDQtMDJUMDg6MTM6NTAtMDU6MDAiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiBwaG90b3Nob3A6SUNDUHJvZmlsZT0ic1JHQiBJRUM2MTk2Ni0yLjEiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTIxN2I5ZmEtMGVlYy00NzQzLTk4NWItMjdmYjQ5MGNjMjBmIiB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6ZDRmMGYxODYtMGVmYS01YjQ3LTk5ZGEtNWI1OGQ1NTNkZWY5IiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6ZmJhYzdiZmQtZTY1OC1jNDQ1LTg0OTItNjg0ODg1NWE5MWE5Ij4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDpmYmFjN2JmZC1lNjU4LWM0NDUtODQ5Mi02ODQ4ODU1YTkxYTkiIHN0RXZ0OndoZW49IjIwMTgtMDQtMDJUMDg6MDg6MTktMDU6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAoV2luZG93cykiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNvbnZlcnRlZCIgc3RFdnQ6cGFyYW1ldGVycz0iZnJvbSBhcHBsaWNhdGlvbi92bmQuYWRvYmUucGhvdG9zaG9wIHRvIGltYWdlL3BuZyIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6NTIxN2I5ZmEtMGVlYy00NzQzLTk4NWItMjdmYjQ5MGNjMjBmIiBzdEV2dDp3aGVuPSIyMDE4LTA0LTAyVDA4OjEzOjUwLTA1OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Po5MaX0AAADPSURBVEjH7dcxC8IwEIbhgv5Ui0JRh7p1FKSDDlJRdNNubs7+uNfRUq5JG3OJoAcZ7/pACPc1AZJvOMmvQkrgEBuy4F1FLEgTIWJCIFZ01zkUxIQAeNggI2CsjLj0uZo98AyF6ILkjYY6BEKC5EJjrY1oQ3aGAXdNRBuytgyqtRDS1UwsA2/CkMLSU7numtkAjBeE6flmlg9seoArX9t3iXudfMcAF8xRK49kAxAVysEo1UQM3b6pFsIlBkwFxDZWZp37RnwSjErg+v+d0Dwvi1YjDqxpk6sAAAAASUVORK5CYII=);
    background-repeat: no-repeat;
    background-position: right top;
    background-size: 30px 22px
}

.chapter3_page1 .panel10 .popTable .incorrect.complete {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAACXBIWXMAAC4jAAAuIwF4pT92AAAGeGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDE5LTA1LTI4VDE0OjM4OjExLTA1OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDE5LTA1LTI4VDE0OjM4OjExLTA1OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAxOS0wNS0yOFQxNDozODoxMS0wNTowMCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo3MWYxZGE4Zi04ZGRlLWEzNDMtYjEwOS0wY2E2NzYyYTJlMjAiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDplNmE0OTkwMy0wMjc5LTczNDctOTVjOC02YTg1ZWE3OGQ0NWYiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpiYjE4MmJkMC0wOGU3LTc1NDgtODhmOS05OTUyNGNiZWJjMTEiIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjcmVhdGVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOmJiMTgyYmQwLTA4ZTctNzU0OC04OGY5LTk5NTI0Y2JlYmMxMSIgc3RFdnQ6d2hlbj0iMjAxOS0wNS0yOFQxNDozODoxMS0wNTowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo3MWYxZGE4Zi04ZGRlLWEzNDMtYjEwOS0wY2E2NzYyYTJlMjAiIHN0RXZ0OndoZW49IjIwMTktMDUtMjhUMTQ6Mzg6MTEtMDU6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPHBob3Rvc2hvcDpUZXh0TGF5ZXJzPiA8cmRmOkJhZz4gPHJkZjpsaSBwaG90b3Nob3A6TGF5ZXJOYW1lPSJYIiBwaG90b3Nob3A6TGF5ZXJUZXh0PSJYIi8+IDwvcmRmOkJhZz4gPC9waG90b3Nob3A6VGV4dExheWVycz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6r8a0BAAAA00lEQVQ4y7WVYQ3EIAyFsXAWsICFWcDCLGBhFmYBC1iYBSxg4e3P7pLrWngjWZMmy9Z+S19LcQDcG/59+ACo+Ld2vbeSM+62SLADEJXA3YAOY2XCriREEaNVV2V1TklqgyTm544tc+t8y73mMY2JTxpsgb0iiWbraNw0XwfQzMyx5cWAtquqabA3wIk9eZaHt8C1o3GYBadB844ZcABn6Sn4MErXpPEsOHWOdGAlYcaripiNkYSRYCHW5k0SVgJmAxYN7Ik9zFwKSYILs7yJS+G3Q045SmQTv/x1yAAAAABJRU5ErkJggg==);
    background-repeat: no-repeat;
    background-position: right top;
    background-size: 22px 22px
}

.chapter3_page1 .panel10 .popTable td {
    width: 33%;
    text-align: center;
    cursor: pointer;
    border-left: 1px solid #fff;
    vertical-align: middle
}

.chapter3_page1 .panel10 .popover-holder {
    min-height: 250px;
    position: relative;
    width: 100%
}

.chapter3_page1 .panel10 .popover-holder pop-over {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0
}

.chapter3_page1 .panel10 .popover-holder pop-over ul {
    margin-bottom: 16px
}

.chapter3_page1 .panel11 .charcoal_fill {
    background-color: #252525
}

.chapter3_page1 .panel11 .pewter_fill {
    background-color: #767676
}

.chapter3_page1 .panel11 .white-fill {
    background: rgba(255, 255, 255, .9)
}

.chapter3_page1 .panel11 .popTable {
    width: 100%
}

.chapter3_page1 .panel11 .popTable .correct.complete {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAaCAYAAADSbo4CAAAACXBIWXMAAC4jAAAuIwF4pT92AAAGU2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDIgNzkuMTYwOTI0LCAyMDE3LzA3LzEzLTAxOjA2OjM5ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAxOC0wNC0wMlQwODowODoxOS0wNTowMCIgeG1wOk1vZGlmeURhdGU9IjIwMTgtMDQtMDJUMDg6MTM6NTAtMDU6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMTgtMDQtMDJUMDg6MTM6NTAtMDU6MDAiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiBwaG90b3Nob3A6SUNDUHJvZmlsZT0ic1JHQiBJRUM2MTk2Ni0yLjEiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTIxN2I5ZmEtMGVlYy00NzQzLTk4NWItMjdmYjQ5MGNjMjBmIiB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6ZDRmMGYxODYtMGVmYS01YjQ3LTk5ZGEtNWI1OGQ1NTNkZWY5IiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6ZmJhYzdiZmQtZTY1OC1jNDQ1LTg0OTItNjg0ODg1NWE5MWE5Ij4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDpmYmFjN2JmZC1lNjU4LWM0NDUtODQ5Mi02ODQ4ODU1YTkxYTkiIHN0RXZ0OndoZW49IjIwMTgtMDQtMDJUMDg6MDg6MTktMDU6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAoV2luZG93cykiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNvbnZlcnRlZCIgc3RFdnQ6cGFyYW1ldGVycz0iZnJvbSBhcHBsaWNhdGlvbi92bmQuYWRvYmUucGhvdG9zaG9wIHRvIGltYWdlL3BuZyIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6NTIxN2I5ZmEtMGVlYy00NzQzLTk4NWItMjdmYjQ5MGNjMjBmIiBzdEV2dDp3aGVuPSIyMDE4LTA0LTAyVDA4OjEzOjUwLTA1OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Po5MaX0AAADPSURBVEjH7dcxC8IwEIbhgv5Ui0JRh7p1FKSDDlJRdNNubs7+uNfRUq5JG3OJoAcZ7/pACPc1AZJvOMmvQkrgEBuy4F1FLEgTIWJCIFZ01zkUxIQAeNggI2CsjLj0uZo98AyF6ILkjYY6BEKC5EJjrY1oQ3aGAXdNRBuytgyqtRDS1UwsA2/CkMLSU7numtkAjBeE6flmlg9seoArX9t3iXudfMcAF8xRK49kAxAVysEo1UQM3b6pFsIlBkwFxDZWZp37RnwSjErg+v+d0Dwvi1YjDqxpk6sAAAAASUVORK5CYII=);
    background-repeat: no-repeat;
    background-position: right top;
    background-size: 30px 22px
}

.chapter3_page1 .panel11 .popTable .incorrect.complete {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAACXBIWXMAAC4jAAAuIwF4pT92AAAGeGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDE5LTA1LTI4VDE0OjM4OjExLTA1OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDE5LTA1LTI4VDE0OjM4OjExLTA1OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAxOS0wNS0yOFQxNDozODoxMS0wNTowMCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo3MWYxZGE4Zi04ZGRlLWEzNDMtYjEwOS0wY2E2NzYyYTJlMjAiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDplNmE0OTkwMy0wMjc5LTczNDctOTVjOC02YTg1ZWE3OGQ0NWYiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpiYjE4MmJkMC0wOGU3LTc1NDgtODhmOS05OTUyNGNiZWJjMTEiIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjcmVhdGVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOmJiMTgyYmQwLTA4ZTctNzU0OC04OGY5LTk5NTI0Y2JlYmMxMSIgc3RFdnQ6d2hlbj0iMjAxOS0wNS0yOFQxNDozODoxMS0wNTowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo3MWYxZGE4Zi04ZGRlLWEzNDMtYjEwOS0wY2E2NzYyYTJlMjAiIHN0RXZ0OndoZW49IjIwMTktMDUtMjhUMTQ6Mzg6MTEtMDU6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPHBob3Rvc2hvcDpUZXh0TGF5ZXJzPiA8cmRmOkJhZz4gPHJkZjpsaSBwaG90b3Nob3A6TGF5ZXJOYW1lPSJYIiBwaG90b3Nob3A6TGF5ZXJUZXh0PSJYIi8+IDwvcmRmOkJhZz4gPC9waG90b3Nob3A6VGV4dExheWVycz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6r8a0BAAAA00lEQVQ4y7WVYQ3EIAyFsXAWsICFWcDCLGBhFmYBC1iYBSxg4e3P7pLrWngjWZMmy9Z+S19LcQDcG/59+ACo+Ld2vbeSM+62SLADEJXA3YAOY2XCriREEaNVV2V1TklqgyTm544tc+t8y73mMY2JTxpsgb0iiWbraNw0XwfQzMyx5cWAtquqabA3wIk9eZaHt8C1o3GYBadB844ZcABn6Sn4MErXpPEsOHWOdGAlYcaripiNkYSRYCHW5k0SVgJmAxYN7Ik9zFwKSYILs7yJS+G3Q045SmQTv/x1yAAAAABJRU5ErkJggg==);
    background-repeat: no-repeat;
    background-position: right top;
    background-size: 22px 22px
}

.chapter3_page1 .panel11 .popTable td {
    width: 50%;
    text-align: center;
    cursor: pointer;
    border-left: 1px solid #fff;
    vertical-align: middle
}

.chapter3_page1 .panel11 .popover-holder {
    min-height: 300px;
    position: relative;
    width: 100%;
    background: url(images/c3_p1_p11.jpg) center top no-repeat;
    background-size: cover
}

.chapter3_page1 .panel11 .popover-holder pop-over {
    background: rgba(255, 255, 255, .9);
    width: 100%;
    height: 100%;
    left: 0;
    top: 0
}

.chapter3_page1 .panel11 .popover-holder pop-over ul {
    margin-bottom: 16px
}

.chapter3_page1 .panel12 {
    position: relative
}

.chapter3_page1 .panel12 pop-over {
    width: 100%;
    min-height: 100%;
    left: 00px;
    top: 0;
    border-color: #767676;
    border-width: 3px;
    z-index: 3
}

.chapter3_page1 .panel12a table {
    width: 100%
}

.chapter3_page1 .panel12a table td {
    width: 25%;
    padding: 0;
    text-align: center;
    vertical-align: middle;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer
}

.chapter3_page1 .panel12a table td img {
    width: 100%
}

.chapter3_page1 .panel12a table td p {
    background: rgba(255, 255, 255, .9);
    padding: 4px;
    margin: 0;
    text-align: center
}

.chapter3_page1 .panel12a table .red {
    padding: 8px
}

@media (orientation:landscape),
(min-width:768px) {
    .chapter3_page1 .panel4 .horz {
        width: 100%;
        height: 60vw
    }

    .chapter3_page1 .panel5 .horz {
        width: 100%;
        height: 80vw
    }

    .chapter3_page1 .panel9 .horz {
        width: 100%;
        height: 70vw
    }
}

@media (min-width:1024px) {
    .chapter3_page1 .panel4 .horz {
        width: 100%;
        height: 485px
    }

    .chapter3_page1 .panel5 .horz {
        width: 100%;
        height: 720px
    }

    .chapter3_page1 .panel9 .horz {
        width: 100%;
        height: 555px
    }
}

.btn-container {
    position: relative;
    bottom: .4vw;
    width: 80vw;
    height: 30vw
}

.btn-container .no-btn,
.btn-container .yes-btn {
    position: relative;
    width: 15vw;
    height: 15vw;
    box-sizing: border-box;
    float: left;
    margin: 0 9vw;
    cursor: pointer
}

.svg-container {
    position: relative;
    padding-bottom: 100%
}

.svg-container svg {
    position: absolute;
    width: 100%;
    height: 100%
}

@media (min-width:1024px) {
    .btn-container {
        position: relative;
        bottom: 5px;
        width: 800px;
        height: 300px
    }

    .btn-container .no-btn,
    .btn-container .yes-btn {
        position: relative;
        width: 150px;
        height: 150px;
        box-sizing: border-box;
        float: left;
        margin: 0 90px;
        cursor: pointer
    }
}

chapter-tiles {
    width: 100%;
    height: 100vh;
    pointer-events: auto
}

chapter-tiles .chapter-tile-header {
    position: absolute;
    width: 100%;
    height: 6vw;
    line-height: 6vw;
    top: 8vw;
    padding: 0 2vw;
    color: #fff;
    font-size: 3vw;
    text-align: left;
    z-index: 10
}

chapter-tiles .chapter-tile-header .completion-display {
    position: absolute;
    right: 6vw;
    top: 0;
    font-size: 2.5vw
}

chapter-tiles .chapter-tile-header .completion-display check {
    display: inline-block;
    height: 3vw;
    width: 3vw;
    padding-left: 1vw;
    vertical-align: middle;
    margin-top: -1.6vw
}

chapter-tiles .chapter-tile-header .completion-display check svg {
    fill: #fff
}

chapter-tiles .chapter-tile-container {
    width: 100%;
    height: 100vh;
    pointer-events: auto
}

chapter-tiles .chapter-tile-container .chapter-tile-holder {
    position: absolute;
    width: 100%;
    float: left;
    height: calc(100vh - 12vw);
    overflow-y: auto;
    padding: 16vw 0 2vw 2vw;
    pointer-events: auto;
    z-index: 9
}

chapter-tiles .chapter-tile-container .chapter-tile-holder .chapter-tile {
    box-sizing: border-box;
    width: 46vw;
    height: 40vw;
    margin-right: 2vw;
    margin-bottom: 2vw;
    position: relative;
    float: left;
    padding: 2vw;
    cursor: pointer;
    pointer-events: auto
}

chapter-tiles .chapter-tile-container .chapter-tile-holder .chapter-tile h2 {
    color: #fff;
    font-size: 3.5vw;
    line-height: 4.5vw;
    text-align: center
}

chapter-tiles .chapter-tile-container .chapter-tile-holder .chapter-tile .completion-check {
    width: 15%;
    height: 15%;
    position: absolute;
    bottom: 2%;
    right: 2%;
    fill: #fff;
    fill-opacity: 1
}

chapter-tiles .chapter-tile-container .chapter-container {
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    pointer-events: auto;
    z-index: 9
}

chapter-tiles .chapter-tile-container .chapter-container.inpage {
    background: #5C5C5C
}

chapter-tiles .chapter-tile-container .chapter-container chapter,
chapter-tiles .chapter-tile-container .chapter-container chapter .chapter-left {
    pointer-events: auto
}

chapter-tiles .chapter-tile-container .chapter-container chapter .chapter-right {
    display: none
}

chapter-tiles .chapter-tile-container .chapter-container chapter .chapter-holder {
    position: absolute;
    left: 100%
}

chapter-tiles .chapter-tile-container .chapter-container page {
    padding: 0;
    margin-top: 13.8vw;
    height: calc(100vh - 13.8vw);
    pointer-events: auto
}

chapter-tiles .chapter-tile-container .warning-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10;
    background: rgba(0, 0, 0, .5);
    pointer-events: auto
}

chapter-tiles .chapter-tile-container .warning-overlay .warning-pane {
    position: absolute;
    width: 60vw;
    left: 20vw;
    height: 30vw;
    top: calc(50vh - 20vw);
    padding: 2vw;
    font-size: 3.5vw;
    line-height: 4vw;
    text-align: center
}

chapter-tiles .chapter-tile-container .warning-overlay .warning-pane .cancel,
chapter-tiles .chapter-tile-container .warning-overlay .warning-pane .continue {
    appearance: none;
    border: none;
    color: #fff;
    padding: 2vw;
    font-size: 3vw;
    bottom: 2vw;
    width: 18vw;
    cursor: pointer
}

chapter-tiles .chapter-tile-container .warning-overlay .warning-pane .cancel {
    position: absolute;
    background: #b00;
    left: 50%
}

chapter-tiles .chapter-tile-container .warning-overlay .warning-pane .continue {
    position: absolute;
    background: #383;
    right: 50%
}

@media (orientation:landscape),
(min-width:768px) {
    chapter-tiles {
        width: 100%;
        height: 100vh
    }

    chapter-tiles .chapter-tile-header {
        position: absolute;
        width: 100vw;
        height: 4vw;
        line-height: 4vw;
        top: 6vw;
        left: 0;
        box-sizing: border-box;
        padding: 0 2vw;
        font-size: 2.5vw
    }

    chapter-tiles .chapter-tile-header .completion-display {
        font-size: 2vw
    }

    chapter-tiles .chapter-tile-header .completion-display check {
        height: 2vw;
        width: 2vw;
        padding-left: 1vw;
        margin-top: -1.2vw
    }

    chapter-tiles .chapter-tile-container {
        width: 100%;
        height: 100vh
    }

    chapter-tiles .chapter-tile-container .chapter-tile-holder {
        box-sizing: border-box;
        width: 100%;
        margin-top: 10vw;
        height: calc(100vh - 14vw);
        pointer-events: auto;
        overflow: hidden;
        overflow-y: auto;
        padding: 4vw 2vw 2vw
    }

    chapter-tiles .chapter-tile-container .chapter-tile-holder .chapter-tile {
        width: 22.5%;
        height: 22vw;
        margin-right: 2vw;
        position: relative;
        float: left
    }

    chapter-tiles .chapter-tile-container .chapter-tile-holder .chapter-tile h2 {
        color: #fff;
        font-size: 2vw;
        line-height: 2.7vw
    }

    chapter-tiles .chapter-tile-container .chapter-container {
        width: 100%;
        height: 100vh
    }

    chapter-tiles .chapter-tile-container .chapter-container page {
        padding: 0;
        margin-top: 10vw;
        height: calc(100vh - 10vw)
    }

    chapter-tiles .chapter-tile-container .warning-overlay {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 10;
        background: rgba(0, 0, 0, .5);
        pointer-events: auto
    }

    chapter-tiles .chapter-tile-container .warning-overlay .warning-pane {
        width: 50vw;
        left: 25vw;
        height: 20vw;
        top: calc(50vh - 10vw);
        padding: 2vw;
        font-size: 2.5vw;
        line-height: 2.8vw
    }

    chapter-tiles .chapter-tile-container .warning-overlay .warning-pane .cancel,
    chapter-tiles .chapter-tile-container .warning-overlay .warning-pane .continue {
        padding: 1.5vw;
        font-size: 2vw;
        bottom: 2vw;
        width: 12vw
    }
}

@media only screen and (min-width:1024px) {
    chapter-tiles {
        width: 100%;
        height: 100vh
    }

    chapter-tiles .chapter-tile-header {
        position: absolute;
        width: 100%;
        height: 40px;
        line-height: 40px;
        top: 60px;
        padding: 0 20px;
        color: #fff;
        font-size: 20px
    }

    chapter-tiles .chapter-tile-header .completion-display {
        right: 60px;
        font-size: 16px
    }

    chapter-tiles .chapter-tile-header .completion-display check {
        height: 20px;
        width: 20px;
        padding-left: 10px;
        margin-top: -8px
    }

    chapter-tiles .chapter-tile-container {
        width: 100%;
        height: 100vh
    }

    chapter-tiles .chapter-tile-container .chapter-tile-holder {
        box-sizing: border-box;
        width: 1024px;
        margin-left: calc((100vw - 1024px) / 2);
        margin-top: 100px;
        height: calc(100vh - 100px);
        pointer-events: auto;
        overflow: hidden;
        overflow-y: auto;
        padding: 50px 20px 20px
    }

    chapter-tiles .chapter-tile-container .chapter-tile-holder .chapter-tile {
        width: 180.5px;
        height: 180.5px;
        margin-right: 20px;
        padding: 20px;
        position: relative;
        float: left
    }

    chapter-tiles .chapter-tile-container .chapter-tile-holder .chapter-tile h2 {
        color: #fff;
        font-size: 18px;
        line-height: 22px
    }

    chapter-tiles .chapter-tile-container .chapter-container {
        transition: background 1s ease;
        width: 100%;
        height: 100vh;
        background: 0 0
    }

    chapter-tiles .chapter-tile-container .chapter-container page {
        padding: 0;
        margin-top: 100px;
        height: calc(100vh - 100px)
    }

    chapter-tiles .chapter-tile-container .warning-pane {
        width: 500px !important;
        left: calc(50vw - 250px) !important;
        height: 200px !important;
        top: calc(50vh - 100px) !important;
        padding: 20px !important;
        font-size: 25px !important;
        line-height: 28px !important
    }

    chapter-tiles .chapter-tile-container .warning-pane .cancel,
    chapter-tiles .chapter-tile-container .warning-pane .continue {
        padding: 15px !important;
        font-size: 20px !important;
        bottom: 20px !important;
        width: 120px !important
    }
}

.front-page {
    max-height: 100%;
    position: fixed;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto
}

.front-page .contentTxt {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    color: #fff;
    margin-top: 30px
}

.front-page .contentTxt p {
    border-left: solid 5px grey;
    padding-left: 10px;
    border-right: solid 5px grey;
    padding-right: 5px
}

#menu-tile-list {
    padding-left: 120px;
    display: block;
    list-style: none;
    width: 80%;
    min-height: 100%;
    height: auto;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    margin: 10vw 1% 0
}

#menu-tile-list li {
    position: relative;
    display: block;
    box-sizing: border-box;
    float: left;
    width: 48%;
    margin: 0 .5% 1%;
    cursor: pointer
}

#menu-tile-list li:focus {
    border: 2px solid red !important
}

menu-tile .tile-content {
    width: 100%;
    position: absolute;
    top: 0;
    z-index: 2;
    height: 40vw
}

menu-tile .tile-content>h2 {
    margin: 4%;
    color: #fff;
    width: calc(100% - 4vw);
    font-size: 4vw;
    text-align: center;
    font-weight: 600
}

menu-tile .tile-content .completion-check {
    width: 15%;
    height: 15%;
    position: absolute;
    bottom: 2%;
    right: 2%;
    fill: #fff;
    fill-opacity: 1
}

menu-tile .tile-content>.sequence-count {
    color: rgba(255, 255, 255, .6);
    text-align: center;
    position: absolute;
    left: 4%;
    top: 31.5vw;
    font-size: 9vw
}

menu-tile>.tile-background {
    width: 100%;
    z-index: 1;
    height: 40vw
}

menu-tile .tile-content:focus {
    border: 2px solid red !important
}

menu-tile .menu-icon {
    position: absolute;
    width: 24vw;
    height: 24vw;
    bottom: 7vw;
    right: calc(50% - 12vw)
}

.hide {
    display: none !important
}

.welcome {
    margin-right: 50vw !important;
    width: 97% !important
}

.welcome menu-tile .tile-content {
    width: 100%;
    position: absolute;
    top: 0;
    z-index: 2;
    height: 20vw
}

.welcome menu-tile .tile-content>h2 {
    margin: 4%;
    color: #fff;
    width: calc(100% - 4vw);
    font-size: 4vw;
    text-align: center
}

.welcome menu-tile .tile-content .completion-check {
    width: 15%;
    height: 30%;
    position: absolute;
    bottom: 4%;
    right: 1%;
    fill: #fff;
    fill-opacity: 1
}

.welcome menu-tile .tile-content>.sequence-count {
    color: rgba(255, 255, 255, .6);
    text-align: center;
    position: absolute;
    left: 4%;
    top: 31.5vw;
    font-size: 9vw
}

.welcome menu-tile .tile-content:after {
    content: "Start here";
    position: absolute;
    color: #fff;
    font-size: 3.5vw;
    left: 43vw;
    top: 10vw
}

.welcome menu-tile>.tile-background {
    width: 100%;
    z-index: 1;
    height: 20vw
}

.welcome menu-tile .menu-icon {
    position: absolute;
    width: 16vw;
    height: 16vw;
    bottom: 2vw;
    left: 4vw;
    right: auto
}

.completion {
    margin-left: 49.5% !important
}

.completion menu-tile .tile-content {
    width: 100%;
    position: absolute;
    top: 0;
    z-index: 2;
    height: 20vw
}

.completion menu-tile .tile-content>h2 {
    margin: 4%;
    color: #fff;
    width: calc(75% - 4vw);
    font-size: 4vw;
    text-align: left
}

.completion menu-tile .tile-content .completion-check {
    width: 15%;
    height: 15%;
    margin: 4%;
    position: absolute;
    bottom: 2%;
    right: 2%;
    fill: #fff;
    fill-opacity: 1
}

.completion menu-tile .tile-content>.sequence-count {
    color: rgba(255, 255, 255, .6);
    text-align: center;
    position: absolute;
    left: 4%;
    top: 31.5vw;
    font-size: 9vw
}

.completion menu-tile>.tile-background {
    width: 100%;
    z-index: 1;
    height: 20vw
}

.completion menu-tile .menu-icon {
    position: absolute;
    width: 16vw;
    height: 16vw;
    bottom: 2vw;
    right: 1vw;
    left: auto
}

@media (orientation:landscape),
(min-width:768px) {
    .front-page {
        overflow-x: hidden;
        overflow-y: auto
    }

    #menu-tile-list {
        margin: 9vw 1% 0
    }

    #menu-tile-list>li {
        width: 23.5%
    }

    menu-tile .tile-content {
        height: 23vw
    }

    menu-tile .tile-content>h2 {
        width: calc(100% - 2vw);
        font-size: 2.5vw
    }

    menu-tile .tile-content>.sequence-count {
        top: 16.4vw;
        font-size: 6vw
    }

    menu-tile>.tile-background {
        height: 23vw
    }

    menu-tile .menu-icon {
        width: 14vw;
        height: 14vw;
        bottom: 3vw;
        right: calc(50% - 7vw)
    }

    .welcome {
        margin-right: 70vw !important;
        width: 48% !important
    }

    .welcome menu-tile .tile-content {
        width: 100%;
        position: absolute;
        top: 0;
        z-index: 2;
        height: 11.5vw
    }

    .welcome menu-tile .tile-content>h2 {
        margin: 4%;
        color: #fff;
        width: calc(100% - 2vw);
        font-size: 2.5vw;
        text-align: center
    }

    .welcome menu-tile .tile-content .completion-check {
        width: 15%;
        height: 30%;
        position: absolute;
        bottom: 4%;
        right: 1%;
        fill: #fff;
        fill-opacity: 1
    }

    .welcome menu-tile .tile-content>.sequence-count {
        color: rgba(255, 255, 255, .6);
        text-align: center;
        position: absolute;
        left: 4%;
        top: 31.5vw;
        font-size: 9vw
    }

    .welcome menu-tile .tile-content:after {
        content: "Start here";
        position: absolute;
        color: #fff;
        font-size: 2vw;
        left: 20.75vw;
        top: 5vw
    }

    .welcome menu-tile>.tile-background {
        width: 100%;
        z-index: 1;
        height: 11.5vw
    }

    .welcome menu-tile .menu-icon {
        position: absolute;
        width: 9vw;
        height: 9vw;
        bottom: 1vw;
        left: 2vw;
        right: auto
    }

    .completion {
        margin-left: 74% !important
    }

    .completion menu-tile .tile-content {
        width: 100%;
        position: absolute;
        top: 0;
        z-index: 2;
        height: 11.5vw
    }

    .completion menu-tile .tile-content>h2 {
        margin: 4%;
        color: #fff;
        width: calc(75% - 2vw);
        font-size: 2.5vw;
        text-align: left
    }

    .completion menu-tile .tile-content .completion-check {
        width: 15%;
        height: 15%;
        margin: 4%;
        position: absolute;
        bottom: 2%;
        right: 2%;
        fill: #fff;
        fill-opacity: 1
    }

    .completion menu-tile .tile-content>.sequence-count {
        color: rgba(255, 255, 255, .6);
        text-align: center;
        position: absolute;
        left: 4%;
        top: 31.5vw;
        font-size: 9vw
    }

    .completion menu-tile>.tile-background {
        width: 100%;
        z-index: 1;
        height: 11.5vw
    }

    .completion menu-tile .menu-icon {
        position: absolute;
        width: 9vw;
        height: 9vw;
        bottom: 1vw;
        right: 1vw;
        left: auto
    }
}

@media only screen and (min-width:1024px) {
    .front-page {
        min-height: 100%;
        position: fixed;
        width: 1024px;
        margin-left: calc((100vw - 1024px) / 2)
    }

    #menu-tile-list {
        margin: 100px 10px 0
    }

    #menu-tile-list>li {
        width: 180px
    }

    menu-tile .tile-content {
        height: 180px
    }

    menu-tile .tile-content>h2 {
        width: calc(100% - 20px);
        font-size: 20px
    }

    menu-tile .tile-content>.sequence-count {
        top: 164px;
        font-size: 60px
    }

    menu-tile>.tile-background {
        height: 180px
    }

    menu-tile .tile-content:focus {
        border: 2px solid red !important
    }

    menu-tile .menu-icon {
        width: 100px;
        height: 100px;
        bottom: 20px;
        right: calc(50% - 50px)
    }

    .welcome {
        margin-right: 70vw !important;
        width: 371px !important
    }

    .welcome menu-tile .tile-content {
        width: 100%;
        position: absolute;
        top: 0;
        z-index: 2;
        height: 110px
    }

    .welcome menu-tile .tile-content>h2 {
        margin: 4%;
        color: #fff;
        width: 100%;
        font-size: 20px;
        text-align: center
    }

    .welcome menu-tile .tile-content .completion-check {
        width: 12%;
        height: 24%;
        position: absolute;
        bottom: 2%;
        right: 1%;
        fill: #fff;
        fill-opacity: 1
    }

    .welcome menu-tile .tile-content>.sequence-count {
        color: rgba(255, 255, 255, .6);
        text-align: center;
        position: absolute;
        left: 4%;
        top: 31.5vw;
        font-size: 9vw
    }

    .welcome menu-tile .tile-content:after {
        font-size: 16px;
        left: 166px;
        top: 45px
    }

    .welcome menu-tile>.tile-background {
        width: 100%;
        z-index: 1;
        height: 110px
    }

    .welcome menu-tile .menu-icon {
        position: absolute;
        width: 80px;
        height: 80px;
        bottom: 10px;
        left: 20px;
        right: auto
    }

    .assignment {
        float: none !important;
        margin-top: 200px !important;
        clear: right
    }

    .completion {
        margin-left: 75% !important
    }

    .completion menu-tile .tile-content:focus {
        border: 2px solid red !important
    }

    .completion menu-tile .tile-content {
        width: 100%;
        position: absolute;
        top: 0;
        z-index: 2;
        height: 110px
    }

    .completion menu-tile .tile-content>h2 {
        margin: 4%;
        color: #fff;
        width: 160px;
        font-size: 20px;
        text-align: left
    }

    .completion menu-tile .tile-content .completion-check {
        width: 15%;
        height: 15%;
        margin: 4%;
        position: absolute;
        bottom: 2%;
        right: 2%;
        fill: #fff;
        fill-opacity: 1
    }

    .completion menu-tile .tile-content>.sequence-count {
        color: rgba(255, 255, 255, .6);
        text-align: center;
        position: absolute;
        left: 4%;
        top: 31.5vw;
        font-size: 9vw
    }

    .completion menu-tile>.tile-background {
        width: 100%;
        z-index: 1;
        height: 110px
    }

    .completion menu-tile .menu-icon {
        position: absolute;
        width: 80px;
        height: 80px;
        bottom: 10px;
        right: 10px;
        left: auto
    }
}

.dialog {
    width: 100%;
    display: grid;
    grid-template-columns: 25% 75%
}

.dialog img,
.dialog p {
    -ms-flex-item-align: center;
    align-self: center;
    justify-self: start
}

.dialog.right {
    width: 100%;
    display: grid;
    grid-template-columns: 75% 25%
}

.dialog.right img,
.dialog.right p {
    -ms-flex-item-align: center;
    align-self: center;
    justify-self: end
}

html {
    -webkit-tap-highlight-color: transparent
}

body {
    font-family: Roboto, sans-serif;
    font-weight: lighter;
    overflow: hidden
}

img {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    box-sizing: border-box;
    image-rendering: auto
}

.background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 1300px;
    height: 1024px;
    background: url(images/ipadPro2.png) no-repeat
}

.ng-hide-add,
.ng-hide-remove {
    display: block !important
}

.fade {
    transition: .3s linear all;
    opacity: 1
}

.fade.ng-hide {
    opacity: 0
}

div,
p {
    -ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.italics {
    font-style: italic
}

.boldIt {
    font-weight: 700
}

.accordion-bar:focus,
.accordion-content:focus,
.card:focus,
.chapter-bottom:focus,
.chapter-left:focus,
.chapter-right:focus,
.chapter-top:focus,
.charcoal_fill:focus,
.front-page form ul li:focus,
.hotspot:focus,
.popover-content-holder:focus,
button.popover-close-btn:focus,
direction:focus {
    border: 2px solid red
}

menu-tile:focus {
    display: block;
    border-left: solid 2px red;
    border-right: solid 2px red
}

a:focus {
    border: 2px solid red
}

@font-face {
    font-family: ViaMaax;
    font-weight: 700;
    font-style: normal;
    src: url(fonts/ViaMaax.eot);
    src: url(fonts/ViaMaax.woff) format("woff"), url(fonts/ViaMaax.ttf) format("truetype"), url(fonts/ViaMaax.svg#ViaMaax) format("svg")
}

@font-face {
    font-family: ViaMaax-Bold;
    font-weight: 700;
    font-style: normal;
    src: url(fonts/ViaMaax-Bold.eot);
    src: url(fonts/ViaMaax-Bold.woff) format("woff"), url(fonts/ViaMaax-Bold.ttf) format("truetype"), url(fonts/ViaMaax-Bold.svg#ViaMaax-Bold) format("svg")
}

@media (orientation:landscape),
(min-width:768px) {
    .background {
        height: 100vh
    }
}

a.skip-main {
    display: block
}

.begin-btn {
    appearance: none;
    left: 0;
    border: none;
    width: 500px;
    height: 120px;
    background: #DB0011;
    color: #fff;
    text-align: center;
    font-size: 18px;
    line-height: 18px;
    cursor: pointer
}

.sp {
    opacity: .01
}

.sp:focus {
    opacity: .5
}

.knowledgeCheck h1 {
    margin-top: -25px;
    margin-bottom: 5px
}

.knowledgeCheck .panel {
    width: 100%;
    position: absolute;
    padding-left: 30px;
    height: 100px
}

.knowledgeCheck .panel p {
    padding-left: 0
}

.knowledgeCheck .panel1 {
    position: absolute;
    top: 220px;
    width: 100%;
    z-index: 100;
    height: 200px;
    padding-left: 30px;
    color: #fff;
    background-color: rgba(255, 0, 0, .7)
}

.knowledgeCheck .panel1 h1 {
    padding-top: 30px;
    padding-bottom: 10px
}

.knowledgeCheck .panel2 {
    width: 100%;
    position: relative;
    top: -20px;
    height: 500px;
    overflow: hidden
}

@media (min-width:1024px) {
    .knowledgeCheck .panel {
        padding-top: 20px;
        padding-bottom: 20px;
        margin-top: 0;
        padding-left: 30px;
        height: 130px
    }

    .knowledgeCheck .panel p {
        line-height: 1.2em;
        font-size: 25px;
        padding-left: 0
    }

    .knowledgeCheck .panel1 {
        padding-left: 0
    }

    .knowledgeCheck .panel1 .stack1 {
        padding-left: 30px
    }

    .knowledgeCheck .panel1 a.skip-main {
        left: -999px;
        position: absolute;
        top: auto;
        width: 1px;
        height: 1px;
        overflow: hidden;
        z-index: -999
    }

    .knowledgeCheck .panel1 a.skip-main:active,
    .knowledgeCheck .panel1 a.skip-main:focus {
        color: #fff;
        background-color: red;
        left: auto;
        top: auto;
        width: 30%;
        height: auto;
        overflow: auto;
        margin: 10px 35%;
        padding: 5px;
        border-radius: 0;
        border: 1px solid #000;
        text-align: center;
        font-size: 1.2em;
        z-index: 999
    }
}

.bar {
    position: fixed;
    z-index: 10;
    width: 100vw;
    height: min(17vw,75px);
    background: rgba(0, 0, 0, .87);
    padding-top: 0vw
}

.bar>button:focus,
.menu-btn:focus {
    border: 1px solid red
}

.logo {
    position: absolute;
    left: 2.5vw;
    top: 2.5vw;
    width: 15vw;
    height: 5vw;
    cursor: pointer
}

.logo:focus {
    border: 1px solid #01b512
}

a.skip-main {
    left: -999px;
    position: absolute;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: -999
}

a.skip-main:active,
a.skip-main:focus {
    color: #fff;
    background-color: red;
    left: auto;
    top: auto;
    width: 20%;
    height: auto;
    overflow: auto;
    margin: 10px 35%;
    padding: 5px;
    border-radius: 0;
    border: 1px solid #000;
    text-align: center;
    font-size: 1.2em;
    z-index: 999
}

.menu-title {
    font-family: ViaMaax-Bold, Sans-Serif;
    color: #fff;
    position: absolute;
    left: 58.5vw;
    top: 22.2vw;
    width: 57vw;
    height: 5vw;
    font-size: 3.5vw;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.exit-btn {
    appearance: none;
    background: 0 0;
    position: absolute;
    right: 8%;
    top: 2.2vw;
    font-size: 2vw;
    line-height: 2.5vw;
    padding: .2vw;
    border: 1px solid #fff;
    color: #fff;
    cursor: pointer
}

.exit-btn-switch {
    appearance: none;
    background: 0 0;
    position: absolute;
    right: 15%;
    top: 1.4vw;
    font-size: 1.2vw;
    line-height: 1.5vw;
    padding: .2vw;
    border: 1px solid #fff;
    color: #fff;
    cursor: pointer
}

.menu-btn {
    position: absolute;
    z-index: 3;
    right: .5%;
    width: 7%;
    border-radius: .5vw;
    border-style: none;
    border-width: 1px;
    border-color: #000;
    top: .5vw;
    padding-top: .4vw;
    cursor: pointer
}

.menu-btn>svg {
    fill: #000;
    fill-opacity: 1;
    height: 6vw
}

.menu-btn>p {
    color: #000;
    text-align: center;
    font-size: 2.8vw;
    margin-bottom: .4vw;
    margin-top: -.4vw
}

.menu-list-background {
    display: block;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 0;
    top: 7vw;
    right: 0;
    background-color: rgba(0, 0, 0, .9)
}

.menu-list {
    display: block;
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    width: 100%;
    padding-top: 8vw
}

.menu-list>.menu-list-content {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2
}

.menu-list>.menu-list-content .menu-home-btn {
    appearance: none;
    border: none;
    background: #ccc;
    color: #303030;
    font-size: 5vw;
    width: 100%;
    height: 10vw;
    line-height: 10vw;
    text-align: center;
    border-bottom: #000 solid 1px;
    cursor: pointer
}

.menu-list>.menu-list-content .menu-home-btn:after {
    content: "\00BB";
    padding-left: 1vw
}

.menu-list>.menu-list-content button:focus,
.menu-list>.menu-list-content li:focus {
    border: 1px solid red
}

.menu-list>.menu-list-content>ul {
    width: 100%;
    overflow: auto
}

.menu-list>.menu-list-content>ul>li:hover {
    background: #404040
}

.menu-list>.menu-list-content>ul>li {
    display: block;
    position: relative;
    z-index: 2;
    clear: both;
    border-top: 1px solid #404040;
    border-bottom: 1px solid #404040;
    box-sizing: border-box;
    background: #333;
    cursor: pointer;
    overflow: hidden;
    height: 10vw;
    line-height: 10vw
}

.menu-list>.menu-list-content>ul>li>h2 {
    position: relative;
    display: block;
    float: left;
    color: #fff;
    z-index: 2;
    margin-left: 3%;
    font-size: 5vw
}

.menu-list>.menu-list-content>ul>li>.completion-check {
    position: relative;
    display: block;
    float: right;
    margin-right: 2%;
    z-index: 2;
    width: 6%;
    fill: #fff;
    fill-opacity: 1
}

.menu-list>.menu-list-content>ul>li .completion-holder {
    position: absolute;
    right: 2vw;
    top: 3.5vw;
    width: 6vw;
    height: 2vw;
    overflow: hidden;
    border-radius: 2vw;
    border: 1px solid #a0a0ff
}

.menu-list>.menu-list-content>ul>li .completion-bar {
    position: absolute;
    top: 0;
    left: 0;
    fill: #a0a0ff;
    fill-opacity: 1;
    box-sizing: border-box;
    z-index: 1
}

.menu-list>.menu-list-content .policy-btn {
    appearance: none;
    border: none;
    color: #ccc;
    background: #303030;
    font-size: 5vw;
    width: 100%;
    height: 10vw;
    line-height: 10vw;
    text-align: center;
    border-bottom: #000 solid 1px;
    cursor: pointer
}

.menu-list>.menu-list-content .policy-btn:after {
    content: "\00BB";
    padding-left: 1vw
}

@media (orientation:landscape),
(min-width:768px) {
    .bar {
        width: 100vw;
        height: min(17vw,75px);
        background: rgba(0, 0, 0, .87);
        padding-top: 0vw
    }

    .logo {
        left: 2.5vw;
        top: 2vw;
        width: 12vw;
        height: 4vw
    }

    .menu-title {
        left: 15.5vw;
        top: 1.75vw;
        width: 67vw;
        height: 4vw;
        font-size: 2.7vw
    }

    .exit-btn {
        appearance: none;
        background: 0 0;
        position: absolute;
        right: 6.5%;
        top: 1.8vw;
        font-size: 1.3vw;
        line-height: 1.8vw;
        padding: .25vw;
        border: 1px solid #fff;
        color: #fff
    }

    .menu-btn {
        top: .5vw;
        padding-top: .3vw;
        width: 4.5vw;
        right: 1vw
    }

    .menu-btn>svg {
        height: 4.5vw
    }

    .menu-btn>p {
        font-size: 2vw;
        margin-bottom: .4vw;
        margin-top: -.4vw
    }

    .menu-list-background {
        top: 6vw
    }

    .menu-list {
        padding-top: 6vw
    }

    .menu-list .bar {
        width: 100vw;
        height: 5vw;
        background: #fff;
        padding-top: 1vw
    }

    .menu-list .bar h1 {
        font-family: ViaMaax, Sans-Serif;
        font-size: 4vw;
        text-align: center;
        padding-top: 0
    }

    .menu-list .logo {
        position: absolute;
        left: 1vw;
        top: 1vw;
        width: 12vw;
        height: 4vw
    }

    .menu-list>.menu-list-content .menu-home-btn {
        position: relative;
        float: right;
        clear: both;
        width: 700px;
        height: 45px;
        font-size: 25px;
        line-height: 45px;
        text-align: center;
        cursor: pointer
    }

    .menu-list>.menu-list-content .menu-home-btn:after {
        content: "\00BB";
        padding-left: 10px
    }

    .menu-list>.menu-list-content>ul {
        width: 700px;
        position: relative;
        float: right;
        clear: both
    }

    .menu-list>.menu-list-content>ul>li {
        height: 45px;
        line-height: 45px
    }

    .menu-list>.menu-list-content>ul>li>h2 {
        font-size: 25px
    }

    .menu-list>.menu-list-content>ul>li>.completion-check {
        width: 35px
    }

    .menu-list>.menu-list-content .policy-btn {
        position: relative;
        float: right;
        clear: both;
        width: 700px;
        height: 45px;
        font-size: 25px;
        line-height: 45px;
        text-align: center;
        cursor: pointer
    }

    .menu-list>.menu-list-content .policy-btn:after {
        content: "\00BB";
        padding-left: 10px
    }
}

@media only screen and (min-width:1024px) {
    .bar {
        width: 100vw;
        height: 148px;
        background-color: rgba(0, 0, 0, .87);
        padding-top: 0
    }

    .logo {
        position: fixed;
        left: 50px;
        top: 42px;
        width: 175px;
        cursor: default
    }

    .menu-title {
        left: 353px;
        top: 70px;
        width: calc(100% - 610px);
        height: 40px;
        font-size: 37px;
        font-weight: 700
    }

    .exit-btn {
        appearance: none;
        background: 0 0;
        position: absolute;
        right: 65px;
        top: 18px;
        font-size: 13px;
        line-height: 18px;
        padding: 3px;
        border: 1px solid #fff;
        color: #fff
    }

    .menu-btn {
        top: 5px;
        right: 10px;
        padding-top: 3px;
        width: 50px
    }

    .menu-btn>svg {
        height: 45px
    }

    .menu-btn>p {
        font-size: 20px;
        margin-bottom: 4px;
        margin-top: -4px
    }

    .menu-list-background {
        top: 50px
    }

    .menu-list {
        padding-top: 60px
    }

    .menu-list .bar {
        width: 700px;
        height: 45px;
        background: #fff;
        padding-top: 10px
    }

    .menu-list .bar h1 {
        font-size: 25px;
        text-align: center;
        padding-top: 0
    }

    .menu-list .logo {
        position: absolute;
        left: 10px;
        top: 20px;
        width: 120px;
        height: 40px
    }

    .menu-list>.menu-list-content .menu-home-btn {
        height: 45px;
        font-size: 25px;
        line-height: 45px;
        text-align: center;
        cursor: pointer
    }

    .menu-list>.menu-list-content .menu-home-btn:after {
        content: "\00BB";
        padding-left: 10px
    }

    .menu-list>.menu-list-content>ul>li {
        height: 45px;
        line-height: 45px
    }

    .menu-list>.menu-list-content>ul>li>h2 {
        font-size: 25px
    }

    .menu-list>.menu-list-content>ul>li>.completion-check {
        width: 35px
    }

    .menu-list>.menu-list-content .policy-btn {
        right: 0;
        width: 700px;
        height: 45px;
        font-size: 25px;
        line-height: 45px;
        text-align: center;
        cursor: pointer
    }

    .menu-list>.menu-list-content .policy-btn:after {
        content: "\00BB";
        padding-left: 10px
    }
}

settings-bar {
    display: block;
    position: relative;
    z-index: 2;
    width: 100%;
    overflow: hidden
}

settings-bar .settings-nav-btn {
    position: absolute;
    height: 100%;
    width: 3vw;
    background: #eee;
    z-index: 21;
    cursor: pointer
}

settings-bar .settings-nav-btn>svg {
    fill: #333;
    fill-opacity: 1
}

settings-bar #settings-left {
    top: 0;
    left: 0;
    border-right: 1px solid #888
}

settings-bar #settings-right {
    top: 0;
    right: 0;
    border-left: 1px solid #888
}

settings-bar ul {
    display: block;
    margin: auto;
    width: 100%;
    height: 10vw;
    padding: 0;
    position: relative;
    z-index: 20
}

settings-bar ul li {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    width: 25%;
    padding-top: 1%;
    margin: 0;
    background: #eee;
    border-left: 1px solid #fff;
    border-right: 1px solid #888;
    cursor: pointer;
    height: 10vw
}

settings-bar ul li>p {
    position: absolute;
    z-index: 3;
    text-align: center;
    width: 100%;
    color: #333;
    bottom: 2.5vw;
    font-size: 4vw
}

settings-bar ul li svg {
    position: absolute;
    left: 45%;
    top: 25%;
    width: auto;
    margin-left: -8%;
    height: 50%;
    fill: #333;
    fill-opacity: 1
}

settings-bar ul li:nth-child(1) {
    border-left: none
}

settings-bar ul li:nth-last-child(1) {
    border-right: none
}

@media (orientation:landscape),
(min-width:768px) {
    settings-bar .settings-nav-btn {
        width: 3vw
    }

    settings-bar ul,
    settings-bar ul li {
        height: 10vw
    }

    settings-bar ul li>p {
        bottom: 2.5vw;
        font-size: 3.5vw
    }

    settings-bar ul li svg {
        top: 28%
    }
}

@media only screen and (min-width:1024px) {
    settings-bar .settings-nav-btn {
        width: 30px
    }

    settings-bar ul,
    settings-bar ul li {
        height: 100px
    }

    settings-bar ul li>p {
        bottom: 25px;
        font-size: 35px
    }

    settings-bar ul li svg {
        top: 28%
    }
}

.quiz-category-sort .correct,
.quiz-category-sort .incorrect {
    background: #fff !important;
    color: #333 !important
}

.quiz-category-sort .correct p,
.quiz-category-sort .incorrect p {
    text-align: center
}

.quiz-category-sort .slide1,
.quiz-category-sort .slide2 {
    background: #f0f0f0;
    border: 2px solid #e7e7e7;
    border-radius: 2vw 2vw 0 0;
    width: 90%;
    margin: 0 5vw
}

.quiz-category-sort .question-count {
    right: 36vw;
    top: 2vw
}

.quiz-category-sort .stem {
    color: #333;
    text-align: center
}

.quiz-category-sort .distractor.selected {
    opacity: .6
}

.quiz-category-sort .distractor table {
    width: 100%
}

.quiz-category-sort .distractor td:first-child {
    display: none !important
}

.quiz-category-sort .distractor td:nth-of-type(2) {
    color: #fff !important;
    text-align: center !important;
    width: 25%
}

.quiz-category-sort .distractor {
    box-sizing: border-box;
    width: 25% !important;
    height: 11vw !important;
    display: inline-block;
    padding: 2vw 0;
    text-align: center !important
}

.quiz-category-sort .slide1 .distractor:nth-of-type(1),
.quiz-category-sort .slide2 .distractor:nth-of-type(1) {
    background: #f16421 !important
}

.quiz-category-sort .slide1 .distractor:nth-of-type(2),
.quiz-category-sort .slide2 .distractor:nth-of-type(2) {
    background: #7d7d7d !important
}

.quiz-category-sort .slide1 .distractor:nth-of-type(3),
.quiz-category-sort .slide2 .distractor:nth-of-type(3) {
    background: #00b7f0 !important
}

.quiz-category-sort .slide1 .distractor:nth-of-type(4),
.quiz-category-sort .slide2 .distractor:nth-of-type(4) {
    background: #50b848 !important
}

.quiz-category-sort .next {
    margin: 5vw 0 5vw 40%
}

@media (orientation:landscape),
(min-width:768px) {

    .quiz-category-sort .slide1,
    .quiz-category-sort .slide2 {
        border-radius: 2vw 2vw 0 0;
        width: 90%;
        margin: 0 5vw
    }

    .quiz-category-sort .question-count {
        right: 40vw;
        top: 2.5vw
    }

    .quiz-category-sort .distractor {
        width: 25%;
        height: 7vw !important;
        padding: 2vw 0
    }

    .quiz-category-sort .next {
        margin: 5vw 0 5vw 43%
    }
}

@media (min-width:1024px) {

    .quiz-category-sort .slide1,
    .quiz-category-sort .slide2 {
        border-radius: 20px 20px 0 0;
        width: 90%;
        margin: 0 50px
    }

    .quiz-category-sort .question-count {
        right: 430px;
        top: 30px
    }

    .quiz-category-sort quiz .question .feedbackholder {
        margin: 50px -60px 0 !important
    }

    .quiz-category-sort .distractor {
        width: 25%;
        height: 70px !important;
        padding: 20px 0
    }

    .quiz-category-sort .next {
        margin: 50px 0 50px 396px
    }
}

.image-bg-cut-right {
    background-repeat: no-repeat;
    width: 100%;
    background-size: 160%;
    background-position: top left
}

.image-bg-cut-left {
    background-repeat: no-repeat;
    width: 100%;
    background-size: 160%;
    background-position: top right
}

.responsive-100-50,
.responsive-100-66 {
    position: relative;
    float: left;
    width: 100%
}

.responsive-hidden-33,
.responsive-hidden-50 {
    position: relative;
    float: left;
    display: none
}

.responsive-100-33 {
    position: relative;
    float: left;
    width: 100%
}

.responsive-25-50 {
    position: relative;
    float: left;
    width: 25%
}

.padding {
    padding: 5vw 6vw;
    box-sizing: border-box
}

.padding-fullLength {
    padding: 2.5vw;
    box-sizing: border-box
}

.padding-fullLength p {
    width: 100%
}

.fullLengthBackground {
    background-image: url(../../images/image-Full.png);
    background-repeat: no-repeat;
    width: 100%;
    height: 500px;
    position: relative;
    background-position: 30px 30px
}

.position-bottom {
    position: absolute;
    top: 47%;
    opacity: .85
}

.padding-small {
    padding: 2.5vw 3vw;
    box-sizing: border-box
}

.padding-small-top {
    padding-top: 2.5vw;
    box-sizing: border-box
}

.padding-small-bottom {
    padding-bottom: 2.5vw;
    box-sizing: border-box
}

.padding-horz {
    padding-left: 6vw;
    padding-right: 6vw;
    box-sizing: border-box
}

.padding-top {
    padding-top: 5vw;
    box-sizing: border-box
}

.padding-top30 {
    margin-top: 30px;
    padding-left: 30px;
    padding-right: 30px;
    box-sizing: border-box
}

.padding-bottom {
    padding-bottom: 5vw;
    box-sizing: border-box
}

.padding-bottom30 {
    margin-bottom: 30px;
    padding-left: 30px;
    padding-right: 30px;
    box-sizing: border-box
}

.padding-left30 {
    padding-top: 30px;
    padding-left: 30px;
    padding-bottom: 30px;
    height: 608px
}

.padding30 {
    padding: 30px;
    height: 608px
}

.padding-right30 {
    padding-right: 30px;
    padding-top: 30px;
    padding-bottom: 30px
}

.padding-rightText {
    padding: 2.5vw;
    height: 608px
}

.padding-30 {
    padding: 30px
}

.pageStylePresentation {
    height: 50px;
    width: 100%
}

.accessibilityInfo {
    opacity: 0
}

@media (orientation:landscape),
(min-width:768px) {
    .image-bg-cut-right {
        background-repeat: no-repeat;
        width: 100%;
        background-size: cover;
        background-position: top left
    }

    .image-bg-cut-left {
        background-repeat: no-repeat;
        width: 100%;
        background-size: cover;
        background-position: top right
    }

    .responsive-100-66 {
        position: relative;
        float: left;
        width: 66.6%
    }

    .responsive-100-50 {
        position: relative;
        float: left;
        width: 50%
    }

    .responsive-hidden-50 {
        position: relative;
        float: left;
        width: 50%;
        display: block
    }

    .responsive-hidden-33 {
        position: relative;
        float: left;
        width: 33.3%;
        display: block
    }

    .responsive-100-33 {
        position: relative;
        float: left;
        width: 33.3%
    }

    .responsive-25-50 {
        position: relative;
        float: left;
        width: 50%
    }

    .padding {
        padding: 5vw 6vw
    }

    .padding-small {
        padding: 2.5vw 3vw;
        box-sizing: border-box
    }

    .padding-small-top {
        padding-top: 2.5vw;
        box-sizing: border-box
    }

    .padding-small-bottom {
        padding-bottom: 2.5vw;
        box-sizing: border-box
    }

    .padding-horz {
        padding-left: 6vw;
        padding-right: 6vw
    }

    .padding-top {
        padding-top: 5vw;
        box-sizing: border-box
    }

    .padding-bottom {
        padding-bottom: 5vw;
        box-sizing: border-box
    }
}

@media (min-width:1024px) {
    .image-bg-cut-right {
        background-repeat: no-repeat;
        width: 100%;
        background-size: cover;
        background-position: top left
    }

    .image-bg-cut-left {
        background-repeat: no-repeat;
        width: 100%;
        background-size: cover;
        background-position: top right
    }

    .padding {
        padding: 50px 60px
    }

    .padding-small {
        padding: 25px 30px;
        box-sizing: border-box
    }

    .padding-small-top {
        padding-top: 25px;
        box-sizing: border-box
    }

    .padding-small-bottom {
        padding-bottom: 25px;
        box-sizing: border-box
    }

    .padding-horz {
        padding-left: 60px;
        padding-right: 60px
    }

    .padding-top {
        padding-top: 50px;
        box-sizing: border-box
    }

    .padding-bottom {
        padding-bottom: 0;
        box-sizing: border-box
    }
}

.standard-popover {
    border: 6px solid #0084cb;
    outline: #fff solid 1px;
    background: #fff;
    color: #222;
    box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, .5);
    box-sizing: border-box
}

.standard-popover .popover-close-btn {
    color: #222
}

.welcome-tile .navContainer {
    position: fixed;
    z-index: 1000;
    top: 100px;
    height: auto;
    width: 1024px
}

.welcome-tile .panel1 .padding-right30 {
    padding-right: 0
}

.welcome-tile .panel2 {
    background-color: #e3e7ec
}

.welcome-tile .panel2 .padding-left30 {
    padding-left: 0
}

.welcome-tile .panel2 .padding-rightText a:link,
.welcome-tile .panel2 .padding-rightText a:visited {
    color: #000
}

.welcome-tile .panel2 .padding-rightText a:hover {
    color: #fff
}

.welcome-tile .panel2 .padding-rightText a:active {
    color: #949494
}

@media (orientation:landscape),
(min-width:768px) {
    .welcome-tile .navContainer {
        width: 100% !important
    }
}

@media (min-width:1024px) {
    .welcome-tile .navContainer {
        width: 1024px !important
    }

    .welcome-tile .panel1 .padding-right30 {
        padding-right: 0
    }

    .welcome-tile .panel2 .padding-left30 {
        padding-left: 0
    }

    .welcome-tile .panel2 .padding-rightText a:link,
    .welcome-tile .panel2 .padding-rightText a:visited {
        color: #000
    }

    .welcome-tile .panel2 .padding-rightText a:hover {
        color: #fff
    }

    .welcome-tile .panel2 .padding-rightText a:active {
        color: #949494
    }
}