@font-face {
    font-family: 'DS-Digital';
    src: url('DS-Digital-Bold.woff2') format('woff2'), url('DS-Digital-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'VoltaModernDisplay-bold';
    src: url('VoltaModernDisplay-75Bold.woff2') format('woff2'), url('VoltaModernDisplay-75Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'VoltaModernDisplay-black';
    src: url('VoltaModernDisplay-95Black.woff2') format('woff2'), url('VoltaModernDisplay-95Black.woff') format('woff');
    font-weight: bolder;
    font-style: normal;
}
@font-face {
    font-family: 'VoltaModernDisplay-normal';
    src: url('VoltaModernDisplay-55Roman.woff2') format('woff2'), url('VoltaModernDisplay-55Roman.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'VoltaModernDisplay';
    src: url('VoltaModernDisplay-55Roman.woff2') format('woff2'), url('VoltaModernDisplay-55Roman.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Date Stamp Alt';
    src: url('DateStampAlt-Bold.woff2') format('woff2'), url('DateStampAlt-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'Date Stamp';
    src: url('DateStamp-Bold.woff2') format('woff2'), url('DateStamp-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}
* {
    /*cursor:none;*/
}
/* GENERAL */
html, body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-image: url(images/bg-2.png);
    background-size: cover;
    HEIGHT: 100%;
    background-position: center;
}
.page {
    width: 100%;
    height: 100%;
    max-height: 1000px;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    position: relative;
    background-image: none;
    background-size: cover;
        margin-bottom: 100%;
}
#countdown, #readyCountdown {
    position: relative;
    height: 40px;
    width: 40px;
    text-align: center;
}
#countdown-number, #readyCountdownNumber {
    color: #000;
    display: inline-block;
    line-height: 40px;
    font-family: 'DS-Digital';
    /*font-family: 'Date Stamp';*/
    font-weight: bold;
    font-style: normal;
}
svg {
    position: absolute;
    /*top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    transform: rotateY(-180deg) rotateZ(-90deg);*/
}
svg circle.animated-circle {
    stroke-dasharray: 113px;
    stroke-dashoffset: 0px;
    stroke-linecap: round;
    stroke-width: 4px;
    stroke: #000;
    fill: none;
}
svg circle.bg-circle {
    stroke-dasharray: 113px;
    stroke-dashoffset: 0px;
    stroke-linecap: round;
    stroke-width: 1px;
    stroke: #000;
    fill: none;
}
.countdown-active svg circle.animated-circle {
    animation: countdown 10s linear infinite forwards;
}
@keyframes countdown {
    from {
        stroke-dashoffset: 0px;
    }
    to {
        stroke-dashoffset: 1725px;
    }
}
.nextIcon {
    position: relative;
    cursor: pointer;
    float: left;
}
#reviewPage .nextIcon {
    position: absolute;
    bottom: 4vw;
    transform: translateX(-180%);
    cursor: pointer;
    top: 79%;
    left: 56%;
    float: none;
}
.homeIcon {
    position: relative;
    right: 3em;
    top: 3em;
    z-index: 999;
    cursor: pointer;
    float: right;
    width: 7.5em;
}
/* START */
#startPage {
    -webkit-animation: 1s ease 0s normal forwards 1 fadein;
    animation: 1s ease 0s normal forwards 1 fadein;
    
}
#landscapePage {
    -webkit-animation: 0s ease 0s normal forwards 0 fadein;
    animation: 0s ease 0s normal forwards 0 fadein;
    display: none;
}
#shortwindowPage {
    -webkit-animation: 0s ease 0s normal forwards 0 fadein;
    animation: 0s ease 0s normal forwards 0 fadein;
    display: none;
}
#phonePage {
    -webkit-animation: 0s ease 0s normal forwards 0 fadein;
    animation: 0s ease 0s normal forwards 0 fadein;
    display: none;
}
.novartis-logo {
    position: absolute;
    bottom: 2em;
    right: 2em;
    width: 16%;
    max-width: 270px;
}
.startChallengeLogo {
    width: 30%;
    position: relative;
    top: 5em;
    left: 50%;
    transform: translateX(-50%);
    float: left;
}
.startHeading {
    font-family: 'VoltaModernDisplay-black';
    font-size: 2.5em;
    font-weight: bold;
    color: black;
    position: relative;
    top: 3.8em;
    left: 0;
    width: 100%;
    text-align: center;
    letter-spacing: 0.03em;
    float: left;
}
.startSubHeading {
    font-family: 'VoltaModernDisplay-normal';
    font-size: 2.3em;
    font-weight: 500;
    color: #666;
    position: relative;
    top: 4em;
    left: 0;
    width: 100%;
    text-align: center;
    float: left;
}
#startButton {
    width: auto;
    display: inline;
    position: relative;
    top: 13em;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
    padding: 0px !important;
    float: left;
}
#startButton img {
    width: 100%;
    height: auto;
    max-width:100%;
}
#jobCode {
    font-family: 'VoltaModernDisplay-normal';
    color: black;
    font-size: 11px;
    left: 1.5vw;
    bottom: 1vw;
    position: absolute;
    background-image: url('images/dna-icon.png');
    padding-top: 47px;
    background-position: top left;
    background-repeat: no-repeat;
    background-size: 40px;
    min-width: 50px;
    min-height: 26px;
}
/* GET READY */
#getReadyPage {
    background-size: cover;
    background-position: center;
    display: none;
}
.readyHeading {
    font-family: 'VoltaModernDisplay-bold';
    font-size: 7em;
    font-weight: bold;
    color: black;
    text-transform: uppercase;
    position: relative;
    top: 0.5em;
    left: 0;
    width: 100%;
    text-align: center;
    float: left;
}
.readyChallengeLogo {
    width: 174px;
    position: relative;
    top: 55px;
    left: 64px;
}
#readyCountdown {
    position: absolute;
    top: 380px;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0;
}
#readyCountdown, #readyCountdown svg {
    width: 450px;
    height: 450px;
}
#readyCountdown svg circle.animated-circle, #readyCountdown svg circle.bg-circle {
    stroke-dasharray: 1730px;
    stroke-dashoffset: 0px;
    stroke-linecap: round;
    stroke-width: 6px;
    stroke: #0460A9;
    fill: none;
}
#readyCountdown.countdown-active svg circle.animated-circle {
    animation: readyCountdown 4s linear normal forwards;
}
@keyframes readyCountdown {
    from {
        stroke-dashoffset: 0px;
    }
    to {
        stroke-dashoffset: 1730px;
    }
}
#readyCountdown svg circle.bg-circle {
    stroke: rgba(255, 255, 255, 0.3);
    stroke-width: 2px;
    stroke-dasharray: 1730px;
}
#readyCountdownNumber {
    font-size: 300px;
    color: black;
    width: 100%;
    display: block;
    line-height: 1;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
}
/* QUIZ */
#quizPage {
    background-size: cover;
    background-position: center;
    display: none;
    position: relative;
    margin-bottom: 100%;
}
#quizSlider {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.quizItem {
    width: 100% !important;
    height: 100%;
    display: none;
}
.quizItemFootnote {
    font-family: 'VoltaModernDisplay-normal';
    color: #0460A9;
    font-size: 13px;
    left: 61%;
    top: 167%;
    position: relative;
    transform: translateX(-50%);
    text-align: center;
    margin-top: 20px;
    max-width: 400px;
}
.popupItemFootnote {
    font-family: 'VoltaModernDisplay-normal';
    color: #0460A9;
    font-size: 13px;
    text-align: center;
    float: right;
    width: 45%;
    display: block;
    max-height: 500px;
    clear: both;
    height: auto;
    margin-top: 1rem;
}
.popupItemFootnote.footnoteInset {
    padding-left: 15%;
    padding-right: 5%;
    box-sizing: border-box;
}
#q17.quizItem.quizItemWithImage div.quizItemImage .quizItemFootnote,
#q18.quizItem.quizItemWithImage div.quizItemImage .quizItemFootnote,
#q19.quizItem.quizItemWithImage div.quizItemImage .quizItemFootnote{
left: 56%;
}
.quizItem:nth-of-type(1) {
    display: block;
}
.quizItemQuestion {
    width: 60%;
    font-family: 'VoltaModernDisplay-bold';
    font-size: 2.2em;
    font-weight: bold;
    color: black;
    position: relative;
    top: 1.6em;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    text-align: center;
    display: block;
    text-transform: none;
    float: unset;
    min-height: 3.9em;
}
.quizItemAnswers {
    position: relative;
    top: 22%;
    width: 96%;
    float: left;
    left: 2%;
}
.quizItemAnswer {
    display: flex;
    justify-content: center;
}
.quizItemAnswerText {
    background: transparent;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    text-align: center;
    margin: 5px 30px;
    font-family: 'VoltaModernDisplay-bold';
    font-size: 1.5em;
    font-weight: bold;
    padding: 15px;
    display: flex;
    height: 27vh;
    max-height: 250px;
    color: #0460A9;
    border: 3px solid #0460A9;
    cursor: pointer;
    flex: 1 1 25%;
}
.quizItemWithImage .quizItemAnswers {
    position: relative;
    float: left;
    left: 20%;
    top: 15%;
    width: 35%;
    z-index: 10;
}
.quizItemWithImage .quizItemImage {
    position: relative;
    top: 15%;
    width: auto;
    float: right;
    max-width: 680px;
    margin-right: 10%;
}
    .quizItemWithImage .quizItemAnswers {
        left: 7%;
}
.quizItem img {
    width: auto;
    height: auto;
    position: relative;
    top: 14%;
    max-height: 500px;
    left: 0%;
}
div#q17.quizItem.quizItemWithImage div.quizItemImage img.quizItemImageDesktop,
div#q18.quizItem.quizItemWithImage div.quizItemImage img.quizItemImageDesktop,
div#q19.quizItem.quizItemWithImage div.quizItemImage img.quizItemImageDesktop,{
    max-width: 675px;
    height: auto;
    position: relative;
    top: 14%;
    max-height: auto;
    left: 0%;
    height: auto;
    width: 675px;
}
.quizItemWithImage .quizItemImage {
    right: 0;
}
.quizItemWithImage .quizItemAnswers {
}
#timesUp {
    background: #0460A9;
    color: white;
    width: 1130px;
    max-width: 70vw;
    height: 45vh;
    line-height: 45vh;
    max-height: 50vh;
    text-align: center;
    font-weight: bold;
    font-family: 'VoltaModernDisplay';
    position: absolute;
    top: 38vh;
    left: 50vw;
    transform: translate(-50%, -50%);
    /*display:none;*/
    font-size: 10vw;
    -webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.75);
    display: none;
    z-index: 1000;
}
#checkIn {
    background: #0460A9;
    color: white;
    width: 1063px;
    height: 611px;
    text-align: center;
    font-weight: bold;
    font-family: 'VoltaModernDisplay';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*display:none;*/
    font-size: 72px;
    -webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.75);
    display: none;
    z-index: 99999;
    padding-top: 119px;
}
.checkInTitle {
    margin-bottom: 108px;
    text-transform: uppercase;
}
.answerCorrect.quizItemAnswerText {
    background-color: #0460A9;
    border-color: #0460A9;
    color: white;
}
.answerIncorrect.quizItemAnswerText {
    background-color: white;
    color: #000000;
}
.quizItemWithImage .quizItemAnswer {
    flex-direction: column;
}
.quizItemAnswerTextPill {
    font-family: 'VoltaModernDisplay-bold';
    padding: 0.4em 0;
    color: #0460A9;
    border: 3px solid #0460A9;
    border-radius: 20px;
    text-align: center;
    margin-bottom: 1em;
    font-weight: bold;
    font-size: 1.6em;
    width: auto;
    width: 17em;
    cursor: pointer;
    left: 15%;
    position: relative;
}
.answerCorrect.quizItemAnswerTextPill {
    background-color: #0460A9;
    border-color: #0460A9;
    color: white;
}
.answerIncorrect.quizItemAnswerTextPill {
    background-color: white;
    color: #000000;
}
svg path {
    stroke-linecap: round;
}
#quizCountdown {
    position: absolute;
    bottom: 54px;
    left: 70px;
    margin-top: 0;
}
#quizCountdown {
    width: 180px;
    height: 180px;
    max-height: 122px;
    max-width: 122px;
}
#quizCountdown svg:nth-of-type(1) {
    display: none !important;
}
#quizCountdown svg circle.animated-circle, #quizCountdown svg circle.bg-circle {
    stroke-dasharray: 534px;
    stroke-dashoffset: 0px;
    stroke-linecap: round;
    stroke-width: 4px;
    stroke: #0460A9;
    fill: none;
}
#quizCountdown svg circle.bg-circle {
    stroke: rgba(255, 255, 255, 0.3);
    stroke-width: 2px;
    stroke-dasharray: 534px;
}
#quizCountdownNumber {
    font-size: 80px;
    color: black;
    width: 100%;
    display: block;
    line-height: 1;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'DS-Digital';
    text-align: center;
}
#quizCountdown.countdown-active svg circle.animated-circle {
    animation: quizCountdown 30s linear normal forwards;
}
@keyframes quizCountdown {
    from {
        stroke-dashoffset: 0px;
    }
    to {
        stroke-dashoffset: 534px;
    }
}
/* RESULTS PAGE */
#resultsPage {
    background-size: cover;
    background-position: center;
    display: none;
    position: relative;
}
.resultsTitle {
    font-family: 'VoltaModernDisplay-bold';
    font-size: 5em;
    font-weight: bold;
    color: #0460A9;
    width: 100%;
    position: relative;
    top: 7%;
    text-align: center;
    text-transform: uppercase;
    float: left;
}
.resultsQuestionsAnsweredLabel {
font-family: 'VoltaModernDisplay';
font-size: 3.5em;
font-weight: 500;
color: black;
text-transform: uppercase;
text-align: left;
}
.resultsCorrectAnswersLabel {
font-family: 'VoltaModernDisplay';
font-size: 3.5em;
font-weight: 500;
color: black;
text-transform: uppercase;
text-align: left;
}
#resultsQuestionsAnsweredValue {
    font-family: 'VoltaModernDisplay-bold';
    font-size: 7em;
    font-weight: bold;
    color: #0460A9;
    text-transform: uppercase;
    text-align: right;
}
#resultsCorrectAnswersValue {
    font-family: 'VoltaModernDisplay-bold';
    font-size: 7em;
    font-weight: bold;
    color: #0460A9;
    text-transform: uppercase;
    text-align: right;
}
.reviewAnswersLabel {
    font-family: 'VoltaModernDisplay';
    font-size: 1.6em;
    font-weight: bold;
    color: #0460A9;
    text-transform: uppercase;
    line-height: 30px;
    cursor: pointer;
    float: left;
}
/* REVIEWPAGE */
#reviewPage {
    background-size: cover;
    background-position: center;
    display: none;
    position: relative;
}
.reviewTitle {
    font-family: 'VoltaModernDisplay-bold';
    font-size: 3.8em;
    font-weight: bold;
    color: #0460A9;
    width: 100%;
    position: relative;
    top: -7.6%;
    text-align: center;
    text-transform: uppercase;
}
#reviewPage .scroll-wrapper {
    position: absolute;
    top: 320px;
    left: 55px;
    width: 1730px !important;
    height: 530px !important;
}
#reviewQuestionsList {
    position: absolute;
    top: 320px;
    left: 55px;
    width: 1770px !important;
    height: 530px !important;
}
.mCSB_container {
    display: flex;
    flex-wrap: wrap;
    padding-right: 70px;
    margin-right: 0;
}
.reviewQuestionItem {
    flex-basis: calc(100% / 3);
    margin-bottom: 85px;
    text-transform: uppercase;
}
.reviewQuestionItemText {
    color: #666;
    font-family: 'VoltaModernDisplay-bold';
    font-size: 1em;
    font-weight: normal;
    text-decoration: none;
    text-transform: none;
}
a.reviewQuestionItemIcon.simple-ajax-popup {
    width: 114px;
    display: inline-block;
    float: left;
}
a.reviewQuestionItemText.simple-ajax-popup {
    width: calc(100% - 208px);
    float: left;
}
.mCSB_scrollTools {
    opacity: 1;
    width: 20px;
}
.mCSB_scrollTools .mCSB_draggerRail {
    width: 20px;
    background-color: #fff;
}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
    width: 20px;
    background-color: #0460A9;
}
/* THANK YOU PAGE */
#thankYouPage {
    background-size: cover;
    background-position: center;
    display: none;
    position: relative;
}
.thankYouTitle {
    font-family: 'VoltaModernDisplay-bold';
    font-size: 11.5em;
    font-weight: bold;
    color: #0460A9;
    width: 100%;
    position: absolute;
    top: 30%;
    text-align: center;
    text-transform: uppercase;
}
.thankYouSubTitle {
    font-family: 'VoltaModernDisplay';
    font-size: 5.2em;
    font-weight: 500;
    color: #333;
    width: 100%;
    position: absolute;
    top: 45%;
    text-align: center;
    text-transform: uppercase;
    text-align: center;
}
/* Popups */
.mfp-close-btn-in .mfp-close {
    color: white;
    opacity: 1;
    font-size: 69px;
    top: 20px;
    right: 20px;
}
.mfp-content {
    font-family: 'VoltaModernDisplay';
    max-width: 1400px;
    box-shadow: 2px 2px 15px #999;
    background-color: white;
}
.mfp-bg {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1042;
    overflow: hidden;
    position: fixed;
    background: white;
    opacity: 0.5;
}
.popupItem {
    background: white;
}
.popupHeader {
    background-color: #0460A9;
    color: white;
    font-weight: bold;
    text-transform: none;
    font-family: 'VoltaModernDisplay-bold';
    overflow: auto;
}
.popupQuestion {
    height: auto;
    font-size: 1.7em;
    width: 80%;
    display: flex;
    flex-direction: row;
    align-items: left;
    text-align: left;
    float: left;
    color: white;
}
.popupAnswer {
    font-size: 23px;
    width: 80%;
    margin-top: 34px;
}
.popupBody {
    background: white;
    box-sizing: border-box;
    font-size: 1.4em;
    color: #000000;
    padding: 30px 30px;
    float: left;
    margin-right: 0%;
    display: block;
    width: 90%;
}
.popupBody .inject,
.popupBody.inject{
    width: 100%;
}
.popupBody.inject p {
    display: inline-block;
    float: left;
    width: 60%;
    padding-right: 5%;
}
.popupBody ol li::marker {
    font-weight: bold;
}
sup {
    font-size: 50%;
}
.popupBody strong {
font-family: 'VoltaModernDisplay-bold';
}
.popupBody .inset-image {
    background: white;
    box-sizing: border-box;
    font-size: 1.4em;
    color: #000000;
    padding: 0px;
    float: left;
}
.popupBody.inset-image {
 width: 100%;
}
.popupBody li {
    margin-bottom: 1em;
}
.popupBody img.inset-image {
    background: white;
    box-sizing: border-box;
    font-size: 1.4em;
    color: #000000;
    padding: 0px 0px;
    float: none;
}
img.inject {
    width: 30% !important;
    max-width: 360px;
    height: auto;
    float: right;
}
.floatimage {
    display: flex;
}
.popupBody p, .popupFooter p {
    margin-top: 0;
}
.popupBody p:nth-last-of-type(1), .popupFooter p:nth-last-of-type(1) {
    margin-bottom: 0;
}
.popupFooter {
    background: white;
    box-sizing: border-box;
    font-size: 11px;
    color: #000000;
    padding: 40px;
    float: left;
    position: relative;
    display: block;
    width: 100%;
}
@keyframes fadein {
    0% {
        opacity: 0;
    }
    66% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes fadein {
    0% {
        opacity: 0;
    }
    66% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.quizItemImageMobile {
    display: none;
}
#reviewQuestionsList {
    position: absolute;
    top: 26%;
    left: 3vw;
    width: 93% !important;
    height: 46vh !important;
    max-height: 468px;
}
.mfp-container {
    width: 100%;
    height: 100%;
}
.popupHeader {
    padding: 2vw;
}
.popupQuestion {
    flex-direction: column;
}
.popupBody {
    padding: 30px;
}
    .popupBody .inset-wrapper {
    width: 50%;
        float: left;
    }
    .popupBody .inset-image .inset-wrapper {
float: left;
width: 50%;
padding-right: 0;
}
.popupBody img.inset-image {
    float: right;
    width: 45%;
    display: inline-block;
    max-height: 500px;
    height: auto;
}
#results-wrapper {
    width: auto;
    top: 12%;
    position: relative;
    height: 40%;
    overflow: auto;
    float: left;
    left: 20%;
    width: 60%;
}
#review-wrapper {
    cursor: none;
    width: 40%;
    top: 73%;
    position: absolute;
    left: 35%;
    max-width: 463px;
    height: 50px;
    float: left;
}
.thankYouTitle {
    font-size: 8.5em;
}

@media screen and (max-width:1150px) and (orientation:landscape) {
    .page {
    width: 100%;
    height: 100%;
    max-height: auto;
    max-width: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    position: relative;
    background-image: none;
    background-size: cover;
    margin-bottom: 100%;
}
.readyChallengeLogo {
    width: 112px;
    position: absolute;
    top: 30px;
    left: 30px;
}
    #review-wrapper {
    cursor: none;
    width: 40%;
    top: 73%;
    position: absolute;
    left: 29%;
    max-width: 463px;
    height: 50px;
    float: left;
}
.thankYouTitle {
    font-family: 'VoltaModernDisplay-bold';
    font-size: 8.5em;
    font-weight: bold;
    color: #0460A9;
    width: 100%;
    position: unset;
    top: 21%;
    text-align: center;
    text-transform: uppercase;
    position: relative;
}
    .thankYouSubTitle {
    font-family: 'VoltaModernDisplay';
    font-size: 4.9em;
    font-weight: 500;
    color: #333;
    width: 100%;
    position: relative;
    top: 20%;
    text-align: center;
    text-transform: uppercase;
    text-align: center;
}
    .quizItemQuestion {
    font-size: 1.3em;
}
    .quizItemAnswerText {
    margin: 5px 19px;
    font-size: 1.1em;
    height: 9em;
    width: 300px;
}
    .quizItemAnswerTextPill {
    padding: 0.4em 0;
    border: 3px solid #0460A9;
    border-radius: 12px;
    font-size: 1.1em;
    width: 19em;
    left: 0;
}
.quizItem img {
    top: 14%;
    max-height: 267px;
    left: 3em;
}
    img.quizItemImageDesktop-q2,
    img.quizItemImageDesktop-q3,
    img.quizItemImageDesktop-q4,
    img.quizItemImageDesktop-q5{
    top: 14%;
    max-height: 325px;
    left: 90px;
}
        #q2.quizItem.quizItemWithImage div.quizItemImage .quizItemFootnote,
#q3.quizItem.quizItemWithImage div.quizItemImage .quizItemFootnote,
#q4.quizItem.quizItemWithImage div.quizItemImage .quizItemFootnote,
    #q5.quizItem.quizItemWithImage div.quizItemImage .quizItemFootnote{
left: 82%;
}
    img.quizItemImageDesktop-q17,
    img.quizItemImageDesktop-q18,
    img.quizItemImageDesktop-q19{
    top: 14%;
    max-height: 233px;
    left: 109px;
}
    #q17.quizItem.quizItemWithImage div.quizItemImage .quizItemFootnote,
#q18.quizItem.quizItemWithImage div.quizItemImage .quizItemFootnote,
#q19.quizItem.quizItemWithImage div.quizItemImage .quizItemFootnote{
left: 74%;
}
    #quizCountdown {
    bottom: 30px;
    left: 30px;
}
    #readyCountdown, #readyCountdown svg {
    width: 350px;
    height: 350px;
}
    #readyCountdown {
    top: 220px;
    left: 50%;
    }
    #readyCountdownNumber {
    font-size: 200px;
    color: black;
    width: 100%;
    display: block;
    line-height: 1;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
}
    .readyHeading {
    font-size: 4em;
    top: 0.0em;
    left: 0;
}
    .resultsQuestionsAnsweredLabel {
    font-size: 2.5em;
    font-weight: 500;
    top: 14%;
    left: 20%;
    float: left;
}
    .resultsCorrectAnswersLabel {
    font-size: 2.5em;
    top: 28%;
    left: -17.8%;
    float: left;
}
.quizItemAnswers {
    width: 96%;
    margin-left: 0;
}
    .quizItemWithImage .quizItemAnswers {
    width: 37%;
    left: 3%;
}
#resultsQuestionsAnsweredValue {

    font-size: 5em;
    top: 39%;
    left: 70%;
    line-height: 9vw;

}
    #resultsCorrectAnswersValue {
    font-size: 5em;
    top: 53.7%;
    left: 71%;
    line-height: 9vw;
}
    .reviewAnswersLabel {
    left: 20%;
}
#resultsPage .nextIcon {
    left: 0;
    bottom: 0;
    top: 0;
    height: 5em;
}
    .novartis-logo {
    width: 20%;
}
#reviewPage .nextIcon {
    height: 6em;
    left: 61%;
}
    a.reviewQuestionItemIcon.simple-ajax-popup {
    width: 70px;
    display: inline-block;
    float: left;
}
    a.reviewQuestionItemText.simple-ajax-popup {
    width: calc(100% - 90px);
    float: left;
}
    .reviewQuestionItem {
    margin-bottom: 50px;
}
    a.reviewQuestionItemIcon img {
    width: 3em;
}
.reviewTitle {
    font-size: 2.5em;
    top: 6% !important;
    left: 5%;
}
    #reviewQuestionsList {
    position: absolute;
    top: 10em;
    left: 3vw;
    width: 93% !important;
    height: 50% !important;
    max-height: 341px;
}
    .mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content {
    width: 85%;
    cursor: auto;
}
    .popupBody {
    font-size: 1em;
    }
    .popupQuestion {
    font-size: 1.2em;
}
    .resultsTitle {
    font-size: 4em;
    top: 4%;
}
#results-wrapper {
    width: 60%;
    top: 11%;
    position: relative;
    height: 40%;
    overflow: auto;
    float: left;
    left: 20%;
}
    .popupFooter {
    font-size: 9px;
}
    .quizItemAnswers {
    position: relative;
    top: 21%;
    width: 96%;
    float: left;
    left: 2%;
}
.quizItemWithImage .quizItemImage {
    position: relative;
    top: 15%;
    width: auto;
    float: left;
    max-width: 680px;
    margin-right: 10%;
}
#thankYouPage table {
    cursor: none;
    top: 19%;
    position: relative;
}
    .homeIcon {
    position: relative;
    right: 2em;
    top: 2em;
    z-index: 999;
    cursor: pointer;
    float: right;
    width: 4.5em;
}
#q17 .quizItemAnswers,
#q18 .quizItemAnswers,
#q19 .quizItemAnswers,{
        width: 44%;
    left: 3%;
}
    .startChallengeLogo {
    top: 4em;
}
    .startHeading {
    top: 2.8em;
}
    .startSubHeading {
    top: 3em;
    }
    #startButton {
    top: 9em;
}
}
@media screen and (min-width : 1150px) and (max-width : 1600px) and (orientation: landscape){
.readyChallengeLogo {
    width: 174px;
    position: absolute;
    top: 50px;
    left: 50px;
}
    .quizItemQuestion {
    width: 60%;
    font-family: 'VoltaModernDisplay-bold';
    font-size: 1.7em;
    font-weight: bold;
    color: black;
    position: relative;
    top: 1.9em;
    left: 50%;
    transform: translateX(-50%);
    width: 53%;
    text-align: center;
    display: block;
    text-transform: none;
    float: unset;
    min-height: 3.9em;
}
    .quizItemFootnote {
    left: 72%;
    top: 167%;
}
    .quizItemAnswers {
    position: relative;
    top: 20vh;
    width: 96%;
    float: left;
    left: 2%;
}
.quizItem img {
    width: auto;
    height: 50vh;
    position: relative;
    top: 18%;
    max-height: 430px;
    left: 12%;
}
.quizItemWithImage .quizItemImage {
    position: relative;
    top: 18%;
    width: auto;
    float: right;
    max-width: 680px;
    margin-right: 14%;
}
    #review-wrapper {
    top: 76%;
    left: 32%;
}
    .quizItemAnswerTextPill {
    font-family: 'VoltaModernDisplay-bold';
    padding: 0.4em 0;
    color: #0460A9;
    border: 3px solid #0460A9;
    border-radius: 20px;
    text-align: center;
    margin-bottom: 1em;
    font-weight: bold;
    font-size: 1.5em;
    width: auto;
    width: 16em;
    cursor: pointer;
    left: 6%;
    position: relative;
}
.quizItemWithImage .quizItemAnswers {

    position: relative;
    float: left;
    left: 6%;
    top: 18%;
    width: 35%;
    z-index: 10;

}
    .reviewAnswersLabel {
    left: 19%;  
}
    .resultsCorrectAnswersLabel,
    .resultsQuestionsAnsweredLabel{
    font-size: 3em;
}
    a.reviewQuestionItemIcon.simple-ajax-popup {
    width: 65px;
    display: inline-block;
    float: left;
}
    a.reviewQuestionItemText.simple-ajax-popup {
    width: calc(100% - 110px);
    float: left;
}
    a.reviewQuestionItemIcon img {
    width: 3em;
}
    .reviewQuestionItem {
    flex-basis: calc(100% / 3);
    margin-bottom: 44px;
    text-transform: uppercase;
}
.reviewTitle {
    font-size: 5vh;
    top: 9.4%;
    left: 5%;
}
    #reviewQuestionsList {
    position: absolute;
    top: 30vh;
    left: 3vw;
    width: 93% !important;
    height: 42vh !important;
    max-height: 400px;
}
        #readyCountdown, #readyCountdown svg {
    width: 350px;
    height: 350px;
}
    #readyCountdown {
    top: 280px;
    left: 50%;
    }
    #reviewPage .nextIcon {
    left: 61%;
}
    #readyCountdownNumber {
    font-size: 200px;
    color: black;
    width: 100%;
    display: block;
    line-height: 1;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
}
    .readyHeading {
    font-size: 4em;
    top: 0.0em;
    left: 0;
}
    #resultsPage .nextIcon {
    left: 0;
    bottom: 0;
    top: 0;
    height: 4em;
}
   
    .thankYouSubTitle {
    font-size: 5.2em;
    position: absolute;
    top: 50%;
    }
    
    .thankYouTitle {
    top: 33%;
}
    img.quizItemImageDesktop-q2,
    img.quizItemImageDesktop-q3,
    img.quizItemImageDesktop-q4,
    img.quizItemImageDesktop-q5{
    max-height: 500px;
    left: 90px;
}
        #q2.quizItem.quizItemWithImage div.quizItemImage .quizItemFootnote,
#q3.quizItem.quizItemWithImage div.quizItemImage .quizItemFootnote,
#q4.quizItem.quizItemWithImage div.quizItemImage .quizItemFootnote,
    #q5.quizItem.quizItemWithImage div.quizItemImage .quizItemFootnote{
left: 31vw;
}
    img.quizItemImageDesktop-q17,
    img.quizItemImageDesktop-q18,
    img.quizItemImageDesktop-q19{
    top: 14%;
    width: 46vw;
    max-height: 389px;
    left: 5vw;
    height: auto;
}
    #q17.quizItem.quizItemWithImage div.quizItemImage .quizItemFootnote,
#q18.quizItem.quizItemWithImage div.quizItemImage .quizItemFootnote,
#q19.quizItem.quizItemWithImage div.quizItemImage .quizItemFootnote{
left: 29vw;
}
}		

 @media screen and (max-device-width : 769px) and (orientation: portrait) {
        #startPage {
            -webkit-animation: 0s ease 0s normal forwards 0 fadein !important;
            animation: 0s ease 0s normal forwards 0 fadein !important;
            display: none !important;
        }
        #phonePage {
            -webkit-animation: 1s ease 0s normal forwards 1 fadein;
            animation: 1s ease 0s normal forwards 1 fadein;
            display: inline-block;
        }
        .novartis-logo {
            top: 4vw;
            right: 4vw;
            width: 16vw;
        }
img.phone-logo {

    position: absolute;
    top: 55px;
    right: 0px;
    height: AUTO;
    width: 70%;
    left: 14%;
        }
		 #phonePage .page .startHeading {
    font-size: 6vw;
    top: 46vw;
    width: 80vw;
    left: 10vw;
} 
     .startHeading {
    font-size: 1.5em;
    top: 8.8em;
         left: 5%;
    width: 90%;
}
    
		}
 @media only screen and (max-width : 840px) {
        #startPage, #shortwindowPage {
            -webkit-animation: 0s ease 0s normal forwards 0 fadein !important;
            animation: 0s ease 0s normal forwards 0 fadein !important;
            display: none !important;
        }
        #phonePage {
            -webkit-animation: 1s ease 0s normal forwards 1 fadein;
            animation: 1s ease 0s normal forwards 1 fadein;
            display: inline-block;
        }
        .novartis-logo {
            top: 4vw;
            right: 4vw;
            width: 16vw;
        }
img.phone-logo {
    position: absolute;
    top: 26px;
    right: 0px;
    height: AUTO;
    width: 70%;
    left: 50%;
    transform: translateX(-50%);
}
		 #phonePage .page .startHeading {
    font-size: 6vw;
    top: 46vw;
    width: 80vw;
    left: 10vw;
} 
     .startHeading {
    font-size: 1.5em;
    top: 4.8em;
    left: 5%;
    width: 90%;
    text-align: center;
    letter-spacing: 0.03em;
    float: left;
}
	}
 @media only screen and (max-height :650px) {
        #startPage {
            -webkit-animation: 0s ease 0s normal forwards 0 fadein !important;
            animation: 0s ease 0s normal forwards 0 fadein !important;
            display: none !important;
        }
        #shortwindowPage {
            -webkit-animation: 1s ease 0s normal forwards 1 fadein;
            animation: 1s ease 0s normal forwards 1 fadein;
            display: inline-block;
        }
        .novartis-logo {
            top: 4vw;
            right: 4vw;
            width: 16vw;
        }
img.phone-logo {
    position: absolute;
    top: 26px;
    right: 0px;
    height: AUTO;
    width: 70%;
    left: 50%;
    transform: translateX(-50%);
}
		 #phonePage .page .startHeading {
    font-size: 6vw;
    top: 46vw;
    width: 80vw;
    left: 10vw;
} 
     .startHeading {
    font-size: 1.5em;
    top: 4.8em;
    left: 5%;
    width: 90%;
    text-align: center;
    letter-spacing: 0.03em;
    float: left;
}
	}
		 
}