h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
}

#wun-chart {
    position: relative;
    font-size: 16px;
    margin: 0 auto;
    text-align: center;
    font-family: "Manulife JH Sans", sans-serif;
    background: center 0 / 800px no-repeat url("/content/dam/onejohnhancock/articles/wunderman/financial-attitudes/images/background.svg");
    width: 800px;
    height: 4000px;
}

#wun-chart #wun-chart__header,
#wun-chart #wun-chart__section {
    font-size: 40px;
}

#wun-chart__header {
    position: absolute;
    width: inherit;
}

#wun-chart__header {
    height: 400px;
    top: 4em;
    /* clear: both; */
    text-align: center;
}

#wun-chart__section {
    position: relative;
    clear: both;
    height: 3093px;
}

.question {
    clear: both;
}

.question,
.question > * {
    text-align: center;
    position: relative;
}

#wun-chart__header > *,
#q1 .question {
    position: relative;
    text-align: center;
    margin: 0 auto;
}

#wun-chart__header h1.title {
    width: 10em;
    font-size: 1.2em;
    font-weight: bold;
    color: #0000C1;
    line-height: 1.2;
}

#wun-chart__header p.description {
    max-width: 34em;
    font-size: 0.5em;
    top: 1.3em;
    line-height: 1.8em;
}

#wun-chart__header h2.subtitle {
    line-height: 1.3em;
    width: 20em;
    top: 3.3em;
    font-size: 0.6em;
    font-weight: bold;
}

.question h3 {
    font-weight: normal;
    font-size: 0.5em;
    top: 0.8em;
    margin: 0 0.3em;
    line-height: 1.1em;
}

p.answer {
    color: white;
    font-size: 0.6em;
    height: 2.8em;
    top: 3.9em;
}

p.answer.single-line {
    margin: 1.2em 0.3em -1.2em;
    top: 3.9em;
}

p.answer.double-line {
    margin: 0.7em 0.3em -0.7em;
}

p.answer-2 {
    float: right;
}

p.answer-1 {
    float: left;
}

div#q1 {
    width: 15.7em;
    height: 6.6em;
    top: 14.3em;
    margin: 0 auto;
}

div#q1 h3 {
    width: inherit;
}

div#q1 .answer {
    width: 4.7em;
    top: 3.1em;
    height: 3.5em;
    position: absolute;
}

div#q1 .answer h4 {
    color: white;
    font-size: 0.7em;
    font-weight: normal;
    line-height: 2.6em;
    position: relative;
    margin: 0;
}

div#q1 .answer p {
    font-size: 0.6em;
    font-weight: normal;
    line-height: 1.1;
}

div#q1 .answer-1 {
    left: .45em;
}

div#q1 .answer-2 {
    right: 0.45em;
}

div#q1 .answer-2 h4 {
    left: 0.1em;
}

div#q2 {
    top: 16.4em;
    width: 9.8em;
    height: 5.5em;
}

div#q2 h3 {
    width: 12.8em;
    left: 3.2em;
}

div#q2 p.answer.answer-1 {
    width: 6.3em;
    float: left;
    font-weight: normal;
}

div#q2 p.answer.answer-2 {
    width: 7.6em;
    font-weight: normal;
}

div#q3 {
    top: 10.9em;
    height: 5.5em;
    width: 7.8em;
    right: 0.7em;
    float: right;
}

div#q3 h3 {
    width: 14.4em;
    right: -0.2em;
}

div#q3 p.answer-2 {
    width: 4.3em;
    font-weight: normal;
}

div#q4 {
    top: 12.5em;
    right: 2.2em;
    height: 5.5em;
    width: 7.9em;
    float: right;
}

div#q4 h3 {
    width: 8.9em;
    left: 2em;
}

div#q4 p.answer-1 {
    width: 3.7em;
    font-weight: normal;
}

div#q4 p.answer-2 {
    width: 7.6em;
    font-weight: normal;
}

div#q5 {
    top: 13.4em;
    height: 5.6em;
    width: 8.5em;
    left: 2.7em;
}

div#q5 h3 {
    width: 11.1em;
    left: 1.6em;
}

div#q5 p.answer {
    top: 4.3em;
    font-weight: normal;
}

div#q5 p.answer-1 {
    width: 3.6em;
}

div#q5 p.answer-2 {
    width: 8.6em;
}

div#q6 {
    top: 10.9em;
    width: 7.6em;
    height: 6.2em;
    float: right;
}

div#q6 h3 {
    width: 12.4em;
    top: 1.1em;
    left: 0.8em;
}

div#q6 p.answer {
    top: 5.1em;
    width: 3.6em;
    font-weight: normal;
}

div#q6 p.answer-1 {
    left: 2.6em;
}

div#q7 {
    top: 11.5em;
    left: 7.1em;
    height: 6.6em;
    width: 7.1em;
}

div#q7 h3 {
    top: 1.2em;
    width: 11em;
    left: 1.4em;
}

div#q7 p.answer {
    width: 3.6em;
    top: 4.8em;
    font-weight: normal;
}

div#q7 p.answer-1 {
    left: 0.6em;
}

div#q7 p.answer-2 {
    right: 0.9em;
}

div#q8 {
    top: 15.2em;
    left: 0.2em;
    height: 6.2em;
    width: 10.1em;
}

div#q8 h3 {
    top: 0.9em;
    width: 13.8em;
    left: 0.9em;
}

div#q8 p.answer-2 {
    width: 6.6em;
}

div#q8 p.answer-1 {
    width: 7.9em;
    left: 0.3em;
}

div#q8 p.answer {
    top: 4.2em;
    font-weight: normal;
}

div#q9 {
    top: 10.9em;
    right: 2em;
    float: right;
    width: 6.3em;
    height: 5.4em;
}

div#q9 h3 {
    right: 0em;
    width: 10.8em;
}

div#q9 p.answer-1 {
    width: 3.7em;
    font-weight: normal;
}

div#q3 p.answer-1 {
    width: 4em;
    left: 0.6em;
    font-weight: normal;
}

div#q9 p.answer-2 {
    width: 3.7em;
    font-weight: normal;
}

div#q10 {
    top: 15.4em;
    right: 0.5em;
    width: 8.1em;
    float: right;
    height: 5.5em;
}

div#q10 p.answer {
    width: 3.7em;
    font-weight: normal;
}

div#q10 p.answer-1 {
    left: 3em;
}

div#q10 p.answer-2 {
    right: 0.2em;
}

#wun-chart__cnav {
    width: 99.6%;
    height: 14.8%;
}

/* Base cnav Styles */
#wun-chart__cnav .-color-base-3 {
    fill: #00a758;
}

#wun-chart__cnav .-color-1,
#wun-chart__cnav .-color-1--circle,
#wun-chart__cnav .-color-1--active {
    fill: #f49600;
}

#wun-chart__cnav .-color-1--circle,
#wun-chart__cnav .-color-2--circle,
#wun-chart__cnav .-color-3--circle {
    stroke: #fff;
    stroke-width: 0.75px;
}

#cnav__cta-1 path.cnav__cta-1__button.-color-1,
#cnav__cta-2 path.cnav__cta-2__button.-color-2,
#cnav__cta-3 path.cnav__cta-3__button.-color-3 {
    fill: #dedede;
}

#wun-chart__cnav .-color-circle-1,
#wun-chart__cnav .-color-2--line--active,
#wun-chart__cnav .-color-1--circle,
#wun-chart__cnav .-color-2--circle,
#wun-chart__cnav .-color-3--circle,
#wun-chart__cnav .-color-circle-2 {
    stroke-miterlimit: 10;
}

#wun-chart__cnav .-color-base-1 {
    fill: #fff;
}

#wun-chart__cnav .-color-2,
#wun-chart__cnav .-color-2--circle,
#wun-chart__cnav .-color-2--active {
    fill: #06c7ba;
}

#wun-chart__cnav .-color-3,
#wun-chart__cnav .-color-3--circle,
#wun-chart__cnav .-color-3--active {
    fill: #533573;
}

#wun-chart__cnav .-color-base-2 {
    fill: #4f525f;
}

#wun-chart__cnav .-color-circle-1,
#wun-chart__cnav .-color-2--line--active,
#wun-chart__cnav .-color-circle-2 {
    fill: none;
}

#wun-chart__cnav .-color-circle-1 {
    stroke: #0000c1;
}

#wun-chart__cnav .-color-circle-1,
#wun-chart__cnav .-color-circle-2 {
    stroke-width: 0.5px;
}


#wun-chart__cnav .-color-2--line--active {
    stroke: #06c7ba;
    stroke-width: 1.5px;
}

#wun-chart__cnav .-color-circle-2 {
    stroke: #00a758;
}

#wun-chart__cnav #cnav__cta-1 .cnav__cta-1__arrow,
#wun-chart__cnav #cnav__cta-2 .cnav__cta-2__arrow,
#wun-chart__cnav #cnav__cta-3 .cnav__cta-3__arrow,
#wun-chart__cnav .cnav__header {
    display: none;
}

#wun-chart__cnav #cnav__cta-1 .cnav__cta-1__text .-color-base-1,
#wun-chart__cnav #cnav__cta-2 .cnav__cta-2__text .-color-base-1,
#wun-chart__cnav #cnav__cta-3 .cnav__cta-3__text .-color-base-1 {
    fill: #9D9DA0;
}

#wun-chart__cnav #cnav__cta-1:hover,
#wun-chart__cnav #cnav__cta-2:hover,
#wun-chart__cnav #cnav__cta-3:hover {
    cursor: pointer;
}

#wun-chart__cnav #cnav__cta-1:hover .cnav__cta-1__text .-color-base-1,
#wun-chart__cnav #cnav__cta-2:hover .cnav__cta-2__text .-color-base-1,
#wun-chart__cnav #cnav__cta-3:hover .cnav__cta-3__text .-color-base-1,
#wun-chart.show-target-1 #cnav__cta-1 .cnav__cta-1__text .-color-base-1,
#wun-chart.show-target-2 #cnav__cta-2 .cnav__cta-2__text .-color-base-1,
#wun-chart.show-target-3 #cnav__cta-3 .cnav__cta-3__text .-color-base-1 {
    fill: #fff;
}

#wun-chart.show-target-1 #cnav__cta-1 .cnav__cta-1__arrow,
#wun-chart.show-target-2 #cnav__cta-2 .cnav__cta-2__arrow,
#wun-chart.show-target-3 #cnav__cta-3 .cnav__cta-3__arrow,
#wun-chart.show-target-1 #cnav-contents #cnav-content-1,
#wun-chart.show-target-2 #cnav-contents #cnav-content-2,
#wun-chart.show-target-3 #cnav-contents #cnav-content-3,
#wun-chart.on #wun-chart__cnav .cnav__header {
    display: block;
}

#wun-chart__cnav #cnav__cta-1:hover .-color-1,
#wun-chart__cnav #cnav__cta-1:hover .-color-1--circle,
#wun-chart.show-target-1 #cnav__cta-1 .-color-1,
#wun-chart.show-target-1 #cnav__cta-1 .-color-1--circle,
#cnav__cta-1:hover .cnav__cta-1__icon .-color-1,
/* #wun-chart.show-target-1 .cnav__lightbulb .-color-base-2, */
#wun-chart.show-target-1 .cnav__header .-color-1--active {
    fill: #f49600;
}

#wun-chart.show-target-1 #cnav-contents .cnav-content .cnav-content__title {
    color: #f49600;
    /* margin: 0; */
    /* line-height: 5.6em; */
}

#wun-chart__cnav #cnav__cta-2:hover .-color-2,
#wun-chart__cnav #cnav__cta-2:hover .-color-2--circle,
#wun-chart.show-target-2 #cnav__cta-2 .-color-2,
#wun-chart.show-target-2 #cnav__cta-2 .-color-2--circle,
#cnav__cta-2:hover .cnav__cta-2__icon .-color-2,
/* #wun-chart.show-target-2 .cnav__lightbulb .-color-base-2, */
#wun-chart.show-target-2 .cnav__header .-color-1--active {
    fill: #06C7BA;
}

#wun-chart.show-target-2 #cnav-contents .cnav-content .cnav-content__title {
    color: #06C7BA;
}

#wun-chart__cnav #cnav__cta-3:hover .-color-3,
#wun-chart__cnav #cnav__cta-3:hover .-color-3--circle,
#wun-chart.show-target-3 #cnav__cta-3 .-color-3,
#wun-chart.show-target-3 #cnav__cta-3 .-color-3--circle,
#cnav__cta-3:hover .cnav__cta-3__icon .-color-3,
/* #wun-chart.show-target-3 .cnav__lightbulb .-color-base-2, */
#wun-chart.show-target-3 .cnav__header .-color-1--active {
    fill: #533573;
}

#wun-chart.show-target-3 #cnav-contents .cnav-content .cnav-content__title {
    color: #533573;
}

#cnav.on .cnav__header {
    display: block;
}

#cnav-contents {
    padding-bottom: 1em;
    /* font-family: Arial, Helvetica, sans-serif; */
    margin-top: -4.3em;
    margin-bottom: 3em;
    /* outline: 1px solid red; */
    border-bottom: .5em solid transparent;
    min-height: 37em;
}

#wun-chart.show-target-1 #cnav-contents {
    border-color: #f49600;
}

#wun-chart.show-target-2 #cnav-contents {
    border-color: #06C7BA;
}

#wun-chart.show-target-3 #cnav-contents {
    border-color: #533573;
}

#cnav-contents .cnav-content {
    margin: 0 8%;
    display: none;
}

#cnav-contents .cnav-content .cnav-content__title {
    margin: 0;
    font-size: 1.65em;
    line-height: 2.58em;
    font-weight: normal;
    text-align: center;
}

#cnav-contents .cnav-content .cnav-content__contents {
    margin-top: 1em;
    font-size: 1.65em;
    text-align: left;
    line-height: 1.5em;
}

@media (max-width: 768px) {
    #wun-chart {
        font-size: 0.42em;
        background: center 0 / 320px no-repeat url("/content/dam/onejohnhancock/articles/wunderman/financial-attitudes/images/background.svg");
        width: 320px;
        height: 1460px;
        padding-bottom: 500px;
        box-sizing: content-box;
    }

    #wun-chart #wun-chart__header,
    #wun-chart #wun-chart__section {
        font-size: 16px;
        height: 1237px;
    }

    #wun-chart__cnav {
        width: 320px;
        height: 16.2%;
    }

    #cnav-contents {
        margin-top: -4em;
        min-height: 27em;
        margin-bottom: 3em;
    }

    p.answer.single-line {
        margin: 0.7em 0.3em -0.7em;
        top: none;
    }
}