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;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:.5em;top:1.3em;line-height:1.8em}
#wun-chart__header h2.subtitle{line-height:1.3em;width:20em;top:3.3em;font-size:.6em;font-weight:bold}
.question h3{font-weight:normal;font-size:.5em;top:.8em;margin:0 .3em;line-height:1.1em}
p.answer{color:white;font-size:.6em;height:2.8em;top:3.9em}
p.answer.single-line{margin:1.2em .3em -1.2em;top:3.9em}
p.answer.double-line{margin:.7em .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:.7em;font-weight:normal;line-height:2.6em;position:relative;margin:0}
div#q1 .answer p{font-size:.6em;font-weight:normal;line-height:1.1}
div#q1 .answer-1{left:.45em}
div#q1 .answer-2{right:.45em}
div#q1 .answer-2 h4{left:.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:.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:.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:.6em}
div#q7 p.answer-2{right:.9em}
div#q8{top:15.2em;left:.2em;height:6.2em;width:10.1em}
div#q8 h3{top:.9em;width:13.8em;left:.9em}
div#q8 p.answer-2{width:6.6em}
div#q8 p.answer-1{width:7.9em;left:.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:0;width:10.8em}
div#q9 p.answer-1{width:3.7em;font-weight:normal}
div#q3 p.answer-1{width:4em;left:.6em;font-weight:normal}
div#q9 p.answer-2{width:3.7em;font-weight:normal}
div#q10{top:15.4em;right:.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:.2em}
#wun-chart__cnav{width:99.6%;height:14.8%}
#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:.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:.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__header .-color-1--active{fill:#f49600}
#wun-chart.show-target-1 #cnav-contents .cnav-content .cnav-content__title{color:#f49600}
#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__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__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;margin-top:-4.3em;margin-bottom:3em;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:.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:.7em .3em -0.7em;top:none}
}