body {margin:0; padding: 0; bbackground: url("/bin-public/600_Fidelity_Com_English/2024-election/images/ss-landing-desktop.png") no-repeat center 0;}

:focus-visible {outline-style: solid; outline-width: 2px; outline-color: #3C94DF;}

#ii
	{position:absolute; top:0; left:0; right:0; bottom:0;
	 font:14px "Fidelity Sans",Helvetica,Sans-serif; overflow: hidden;}
.bg
	{position: absolute; top:0; left:0; right:0; bottom:0; margin:-30%; opacity:0;
	 background:#F9F7F5; /*#fcfcfc url("/bin-public/600_Fidelity_Com_English/2024-election/images/bg.png") no-repeat center center; background-size:100% auto;
	 animation:spin 900s linear forwards; animation-iteration-count:infinite;*/ transition: opacity 3s ease-in;
	transform: translate3d(0,0,0);}
.bg.ready
	{opacity:1;}

@keyframes spin {
	0% {transform:rotate3d(0,0,1,0deg)}
	100% {transform:rotate3d(0,0,1,1440deg)}
}

#ii h2
	{font-size:28px; font-weight:normal; margin:0.5em 0 0.25em; opacity:0;
	 transition:opacity 0.5s ease-in;}
#ii.ready h2, #ii.ready .info p
	{opacity:1;}
#ii .info p
	{font-size: 16px; opacity:0; transition:opacity 0.5s 0.5s ease-in;}

#ii #pages
	{opacity:0; transform:translate3d(0,0,0)}
#ii.open #pages 
	{display:block; position: absolute; width: 52%; height: 13em; left: 2%; bottom: 153px; border: 1px solid #fff;
	 background:#fff; opacity:1; box-shadow: 0 0 4px 1px rgba(0,0,0,.35);
	 transition:all 0.5s 0.5s ease-in-out;}
#ii.open.interact #pages
	{transition:0.5s ease-in-out;}
#ii .page
	{position:absolute; top:0; bottom:0; right:0; left:0; margin:0.75em 0 1.5em 4%; opacity:0; visibility:hidden;
	 background:url("/bin-public/600_Fidelity_Com_English/2024-election/images/icon_taxes_color.svg") no-repeat 99% 36%; background-size:31% auto;
	 transition: opacity 0.5s ease-in;}
#ii.open #pages.pos-1
	{left:13%;}
#ii.open #pages.pos-2
	{left:35%;}
#ii.open #pages.pos-3
	{left:46.5%;}
#ii .page-1
	{background-image:url("/bin-public/600_Fidelity_Com_English/2024-election/images/icon_healthcare_color.svg");}
#ii .page-2
	{background-image:url("/bin-public/600_Fidelity_Com_English/2024-election/images/icon_retirement_color.svg");}
#ii .page-3
	{background-image:url("/bin-public/600_Fidelity_Com_English/2024-election/images/icon_investments_color.svg");}
#ii .page-4 
	{background-image:url("/bin-public/600_Fidelity_Com_English/2024-election/images/icon_education_color.svg");}

#ii .page.show
	{opacity:1; visibility: visible; z-index:20; transition:opacity 0.7s 0.5s ease-in;}
#ii .page h3
	{font-size:20px; margin-top:-.2em; margin-bottom:6px;}
#ii .page p
	{width:69%; line-height: 1.15}
#ii .info 
	{position:relative; width:100%; top:0; text-align: center;}
#ii .page .item
	{position: absolute; opacity:0; visibility:hidden; transform:translate3d(0,0,0); transition: opacity 0.3s ease-in;}
#ii .page .item.on
	{opacity:1; visibility: visible; transition:opacity 0.5s 0.3s ease-in;}
#ii .page .item.on p
	{display:block;}

#ii .nav 
	{display: flex; justify-content: space-between; position: absolute;top: 31.5%; width: 88%; left:6%; z-index:20;
	 transition: all 0.3s cubic-bezier(0.83, 0, 0.17, 1);; transform:translate3d(0,0,0);}
#ii.open .nav
	{width: 39%; left: 30.5%; top: 16.5%;}
#ii .nav li
	{display:flex; flex-flow: column nowrap; justify-content: center; width:15.5%;}
#ii .nav .btn 
	{position: relative; display:block; width: 11.5%;  margin-top:3%; color:#000; border-radius: 50%; 
	 border: 1px solid #368727; opacity:0; box-shadow:0px 2px 4px rgba(0,0,0,.35); 
	 background:#368727 url("/bin-public/600_Fidelity_Com_English/2024-election/images/icon_taxes.svg") no-repeat center; background-size: 71% auto;
	 transition:all 0.7s 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); transform: translate3d(0,0,0)}
#ii .nav .btn-1
	{background-image:url("/bin-public/600_Fidelity_Com_English/2024-election/images/icon_healthcare.svg");}
#ii .nav .btn-2
	{background-image:url("/bin-public/600_Fidelity_Com_English/2024-election/images/icon_retirement.svg");}
#ii .nav .btn-3
	{background-image:url("/bin-public/600_Fidelity_Com_English/2024-election/images/icon_investments.svg");}
#ii .nav .btn-4
	{background-image:url("/bin-public/600_Fidelity_Com_English/2024-election/images/icon_education.svg");}
#ii.interact .nav .btn
	{transition: all 0.3s ease-in-out;}
#ii .nav .btn:hover
 	{background-size:80% auto;}
#ii .nav .btn img
	{display:block; width:80%; height:auto; margin: 15% auto; transition:all 0.7s 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); transform: translate3d(0,0,0)}
#ii.ready.open .nav .btn img
	{margin:20% auto; transition:all 0.7s 0s cubic-bezier(0.34, 1.56, 0.64, 1)}
#ii.ready .nav .btn
	{width: 100%; margin-top:0; padding-top:100%; opacity:1; }
#ii.open .nav .btn
	{opacity:.5}
#ii.open .nav .btn.selected, #ii.open .nav .btn:hover
	{opacity:1}
#ii .nav .btn-1
	{transition-delay: 0.6s;}
#ii .nav .btn-2
	{transition-delay: 0.5s;}
#ii .nav .btn-3
	{transition-delay: 0.6s;}
#ii .nav .btn-4
	{}
#ii.ready.open .nav .btn:not(.selected) img
	{opacity:1; transition:all 0.3s ease-in;}	
#ii.ready .nav .btn:not(.selected):hover img, #ii.ready .nav .btn:not(.selected):focus-visible img
	{width: 90%; margin:10% auto; opacity:1; transition: all 0.3s ease-out;}	
#ii.ready.open .nav .btn:not(.selected):hover img, #ii.ready.open .nav .btn:not(.selected):focus-visible img
	{margin:15% auto;}
#ii.open .nav .btn:not(.selected)
	{background:#368727 url("/bin-public/600_Fidelity_Com_English/2024-election/images/icon_taxes_off.svg") no-repeat center; background-size: 71% auto;
	 transition: all 0.3s ease-in-out, background-position 0s;}
#ii.open .nav .btn:not(.selected):hover, #ii.open .nav .btn:not(.selected):focus-visible
	 {background-size:80% auto; opacity:1;}
 #ii.open .nav .btn-1:not(.selected)
	{background-image:url("/bin-public/600_Fidelity_Com_English/2024-election/images/icon_healthcare_off.svg");}
#ii.open .nav .btn-2:not(.selected)
	{background-image:url("/bin-public/600_Fidelity_Com_English/2024-election/images/icon_retirement_off.svg");}
#ii.open .nav .btn-3:not(.selected)
	{background-image:url("/bin-public/600_Fidelity_Com_English/2024-election/images/icon_investments_off.svg");}
#ii.open .nav .btn-4:not(.selected)
	{background-image:url("/bin-public/600_Fidelity_Com_English/2024-election/images/icon_education_off.svg");}

#ii .nav .btn span
	{position: absolute; width: 100%; bottom:-2.5em; left:0; font-weight: 600; text-align: center; opacity:0;
	 transition: all 0.5s 1s ease-in;}
#ii .nav .btn:focus-visible span
	 {outline: none;} 
 #ii .nav .btn-1 span
	{transition-delay: 0.9s;}
#ii .nav .btn-2 span
	{transition-delay: 0.8s;}
#ii .nav .btn-3 span
	{transition-delay: 0.9s;}
#ii .nav .btn-4 span
	{transition-delay: 1s;}
#ii.ready .nav .btn span 
	{opacity:1;}
#ii.ready .nav .btn span span
	{opacity:0;}
#ii.open .nav .btn span 
	{bottom: -1.6em; width: 200%; left: -50%; font-size: 14px; opacity:0;}
#ii.open .nav .btn.selected span
	{opacity:1;}
#ii.open .nav .btn span, #ii.open .nav .btn-1 span, #ii.open .nav .btn-2 span, #ii.open .nav .btn-3 span, #ii.open .nav .btn-4 span 
	{transition:0.3s 0s ease-out;}
#ii.open .nav .btn:not(.selected):hover span, #ii.open .nav .btn:focus-visible span
	{opacity:1;}
#ii .bar 
	{display:flex; justify-content: space-around; position: absolute; width: 0%; left: 50%; bottom: 100px; height: 5px; border-radius: 5px; border: 1px solid #eee; z-index:10; opacity:0;
	 background: #368727; /*rgb(2,45,74);
	 bbackground: -moz-linear-gradient(90deg, rgba(2,45,74,1) 0%, rgba(2,45,74,1) 13%, rgba(2,74,122,1) 35%, rgba(224,22,22,1) 65%, rgba(135,14,14,1) 87%, rgba(135,14,14,1) 100%); 
	 background: -webkit-linear-gradient(90deg, rgba(2,45,74,1) 0%, rgba(2,45,74,1) 13%, rgba(2,74,122,1) 35%, rgba(224,22,22,1) 65%, rgba(135,14,14,1) 87%, rgba(135,14,14,1) 100%); 
	 background: linear-gradient(90deg, rgba(2,45,74,1) 0%, rgba(2,45,74,1) 13%, rgba(2,74,122,1) 35%, rgba(224,22,22,1) 65%, rgba(135,14,14,1) 87%, rgba(135,14,14,1) 100%);
	 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#011e31",endColorstr="#870E0E",GradientType=1);
	 transition: all 0.5s 0.8s ease-out; transform:translate3d(0,0,0);*/}
#ii.ready .bar
	{width: 92%; left: 4%; opacity:1;}
#ii .bar .tick 
	{position:relative; width: 1em; height: 1em; margin: -.3em 0 0 -.28em; border-radius: 50%; background: #368727; z-index:1;
	 cursor:pointer; opacity:0; transition:opacity 0.7s 1.2s ease-in;}
#ii .bar .tick.selected
	{z-index:20;}
#ii.ready .bar .tick
	{opacity:1;}
#ii .bar .tick:nth-child(2)
	{background:#368727;}
#ii .bar .tick:nth-child(3)
	{background:#368727;}
#ii .bar .tick:nth-child(4)
	{background:#368727;}
#ii .bar .tick span
	{position: absolute; width: 170px; left: -75px; top: 2.5em; text-align: center; font-size: 14px;}
#ii.open .bar .tick.selected span
	{font-weight: 600; font-size:16px; margin-top:-7px;}
#ii .bar .marker
	{position:absolute; width: 1em; height: 1em; left: 12%; margin: -.3em 0 0 -.28em; text-align: center; opacity:0;
	 border-radius: 50%; background: #368727; z-index:30; visibility: hidden; 
	 transform: translate3d(0,0,0); transition:all 0.5s ease-in-out, opacity 0.7s 1.2s ease-in;}
#ii.ready.open .bar .marker
	{opacity:1; visibility: visible; width: 3em; height: 3em; margin: -1.5em 0 0 -1.25em;}
#ii.ready.open .bar .marker.item-1
	{background:#024a7a;}
#ii.ready.open .bar .marker.item-2
	{background:#e01616;}
#ii.ready.open .bar .marker.item-3
	{background:#870e0e;}
#ii.open .bar .marker:before, #ii.open .bar .marker:after
	{content:"\0020"; display: inline-block; width:30%; height:31%; margin-top:30%; border:2px solid #fff; 
	 border-left:none; border-bottom:none; transform: rotateZ(45deg) rotate3d(1, 1, 0, 35deg);}
#ii.open .bar .marker:before
	{margin-right:-11%; transform:rotateZ(-135deg) rotate3d(1, 1, 0, 35deg);}
#ii.interact .bar .marker
	{transition:opacity .3s ease-in;}
#ii .bar .marker .tail
	{position: absolute; top: -1.85em; width: 100%; height: 100%; overflow: hidden; opacity:0; 
	 transition: opacity 0.5s 0.3s ease-in;}
#ii .bar .marker .tail:before
	{position:absolute; content:"\0020"; width:100%; height:100%; left:-2%; top:-88%; border: 1px solid #efefef; 
	 background:#fff; box-shadow: 0 0 4px 1px rgba(0,0,0,.35); transform:translate3d(0,0,0) rotateZ(45deg);}
#ii.open .bar .marker .tail 
	{opacity:1}
#ii.open .bar .marker .tail:before
	{opacity:1}
#ii.open.interact .bar
	{transition-delay: 0s;}
#ii #footer
	{position:absolute; bottom:-1px; font-size:10px; z-index:100; border-top:1px solid #ccc; opacity:0;
	 transition:opacity 0.3s 0s ease-in; -webkit-transition:opacity 0.3s 0s ease-in; -moz-transition:opacity 0.3s 0s ease-in}
#ii.ready #footer
	{opacity:1;}
#ii #footer p
	{font-size:12px;}

#ii .cta-btn
	{position: absolute; bottom: 1em; width:100%; text-align:center; opacity:0;
	 transition: opacity 0.5s ease-in;}
#ii.ready .cta-btn
	{opacity:1;}
#ii .cta-btn p
	{font-size: 16px;}

#ii .cta-btn a
	{display: inline-block; padding: .75em 1.25em; color: #fff; background-color: #024A7A; background: linear-gradient(0deg, rgba(2,45,74,1) 0%, rgba(2,74,122,1) 50%,  rgba(2,74,122,1) 100%); border-radius: 10px;}

#ii .cta-btn a:hover
	{text-decoration: none;  background: linear-gradient(0deg, rgba(135,14,14,1) 0%, rgba(135,14,14,1) 50%,  rgba(224,22,22,1) 100%);}



#ii #footer-content 
	{position:relative;  max-height: 0; background:#fff; z-index:20; overflow: hidden; visibility: hidden;
	 transition:all 0.5s ease-in-out;}
#ii #footer.show #footer-content 
	{max-height:1000px; visibility: visible;}
#ii #footer-content p
	{margin: 1em 1em 0;}

#footer-label 
	{position: absolute; width:242px; bottom:100%; right: 2.5%; font-size: 12px; z-index:1;}
#footer-label button
	{display:block; color:#000; padding: 7px 10% 0.5em 3%; text-align: center; background: #fff; text-decoration: none; border:none;
	 border-top-right-radius: 10px; border-top-left-radius: 10px; box-shadow: 0px 2px 4px 1px rgba(0,0,0,0.35);}
#footer-label button:hover
	{text-decoration: none;}
#footer.show #footer-label button
	{background:#fff url("/bin-public/600_Fidelity_Com_English/2024-election/images/btn_footer_close.png") no-repeat 97% center;}




@media screen and (max-width: 980px)  {
	#ii
		{font-size:14px;}
	#ii h2
		{font-size:24px;}
	#ii .bg
		{left: -20%; width: 140%; padding-top: 140%;}
	#ii.open #pages
		{bottom:153px; height:14em; width: 65%;}
	#ii.open .nav 
		{top: 17%; width: 46%; left: 27.5%;}

	#ii.open #pages.pos-3 
	{left: 36.5%;}

}



@media screen and (max-width: 768px) {
	#ii.open #pages 
		{width: 83%; }

	#ii.open .nav 
		{top: 15%; width: 52%; left: 24.5%;}
	#ii.open .nav .btn span
		{width:220%; font-size:13px;}
	#ii .cta-btn 
		{left: 3.5%; text-align: left;}
	
	#ii.open .bar .tick.selected span
		{font-size:14px; margin-top:0;}
	#ii .bar .tick:nth-child(3) span
		{padding-left:10px;}
	#ii .bar .tick:nth-child(2) span
		{margin-left:-10px;}
	#ii.open #pages.pos-2 
		{left: 13.5%;}
	#ii.open #pages.pos-3 
		{left: 13.5%;}
	#ii h2 
		{font-size: 20px; margin-left: 3%; margin-right: 3%; line-height: 1.2;}		
	#ii .info p 
		{width: 90%; margin: 0 auto; font-size:14px;}

}


@media screen and (max-width: 600px) {
	.bg
		{margin:-82%;}
	#ii
		{font-size:16px;}
	#ii h2 
		{font-size: 20px; margin-left: 3%; margin-right: 3%; line-height: 1.2;}		
	#ii .info p 
		{width: 90%; margin: 0 auto; font-size:14px;}
	#ii .nav 
		{flex-flow: column wrap; position:relative; top: 1em; width: 100%; margin-left: 13%; height: 56%;}
	#ii .nav li
		{margin-bottom:1em}
	#ii.ready .nav
		{margin-left:13%; transition: all 0.7s 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);}
	#ii.ready.open .nav
		{transition-delay: 0s;}
	#ii.ready .nav .btn 
		{margin:3% 0 0; }
	#ii .nav .btn
		{margin:50% 0 50% 40%; transition-delay: 0.5s;}
	#ii .nav .btn-1
		{transition-delay: 0.6s;}
	#ii .nav .btn-2
		{transition-delay: 0.7s;}
	#ii .nav .btn-3
		{transition-delay: 0.8s;}
	#ii .nav .btn-4
		{transition-delay: 0.9s;}
	#ii .nav .btn img
		{margin:0 auto;  width: 4.3em;}
	#ii .nav .btn span
		{bottom: 23%; left: 150%; width: 400%; text-align: left; font-size:20px; transition-delay: 0.8s; border:1px solid rgba(255,0,0,0)}
	#ii.open .nav .btn span
		{width:150%; left:-25%; bottom:0; top:110%; text-align: center;}
	#ii.open .nav .btn.selected span 
		{opacity: 1;}
	#ii .nav .btn-1 span
		{transition-delay: 0.9s;}
	#ii .nav .btn-2 span
		{transition-delay: 1s;}
	#ii .nav .btn-3 span
		{transition-delay: 1.1s;}
	#ii .nav .btn-4 span
		{transition-delay: 1.2s;}

	#ii .bar 
		{bottom: 13%; transition-delay: 1.2s}
	#ii.ready .bar 
		{left: 5.5%; width: 88%;}
	#ii .bar .tick span 
		{display: flex;	flex-flow: column; justify-content: center; position:fixed; left: 30%; width: 40%; height: 3em; top: 88%; padding:0 !important; margin:0 !important;}
	#ii .bar .marker .tail 
		{top: -1.2em; left:12%; width: 70%; height: 70%;}


	#ii .page 
		{margin: 0 4%; padding-top: 24%; background-position: center top; background-size: 28% auto;}
	#ii .page .item p 
		{width: 100%; font-size: 14px; line-height: 1.1;}

	#ii.open .nav li
		{height:100%;}
	#ii.open .nav 
		{flex-flow:row wrap; position:relative; width: 88%; left: 6%; height: 7%; margin-left: 0; top: 0.75em;}
	#ii.open .nav .btn 
		{width: 100%; transition:all 0.5s ease-in-out;}
	#ii.open #pages 
		{width: 87%; left: 6%; bottom: 20.6%; height: 18em;}
	#ii.open #pages.pos-1, #ii.open #pages.pos-2, #ii.open #pages.pos-3
		{left:6%;}

	#ii .bar .tick span
		{opacity:0; transition:all 0.5s ease-out}
	#ii .bar .tick span br
		{display:none;}
	#ii.open .bar .tick.selected span
		{display:flex; flex-flow:column; justify-content: center; width:100%; left:0; height:3em; margin:0; font-size:14px; opacity:1;  transition:all 0.5s 0.5s ease-in}

	#footer-label 
		{right: 25%; width:50%;}

	#ii .cta-btn 
		{left: 0; text-align: center; bottom:2.5em;}
	#ii .show .cta-btn 
		{opacity: 0; transition:none;}

	#ii .cta-btn p 
	{font-size: 14px;}

	#ii .cta-btn a 
		{padding: .5em 1.25em;}
}

@media screen and (max-width: 450px) {
	#ii .bar .tick span 
		{left: 15%; width: 70%;}
	#footer-label 
		{right: 5%; width:90%;}
}