body {margin:0; padding: 0; /*background: url("../images/ss-landing-desktop.png") no-repeat center 0;*/}

a {
	text-decoration: underline;
}

a.lock:after {
    background: url(../images/lock-blue.jpg) no-repeat center center;
    content: "\0020";
    display: inline-block;
	width:7px;
	height:9px;
	margin-left:3px;
}

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

#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("../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 h2 span
	{opacity: 0;}

#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 .landing:focus-visible 
	{outline:none}
#ii #pages
	{opacity:0; transform:translate3d(0,0,0)}
#ii.open #pages 
	{display:block; position: absolute; width: 57%; height: 13em; left: 3%; 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("../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:21%;}
#ii.open #pages.pos-2
	{left:40%;}
#ii.open #pages.pos-3
	{left:46.5%;}
/*#ii .page-1
	{background-image:url("../images/icon_healthcare_color.svg");}
#ii .page-2
	{background-image:url("../images/icon_retirement_color.svg");}
#ii .page-3
	{background-image:url("../images/icon_investments_color.svg");}
#ii .page-4 
	{background-image:url("../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:97%; 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: 50%; left: 25%; top: 16.5%;}
#ii .nav li
	{display:flex; flex-flow: column nowrap; justify-content: center; width:13%;}
#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("../images/icon_investing.png") no-repeat center; background-size: 60% 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("../images/icon_retirement.png");}
#ii .nav .btn-2
	{background-image:url("../images/icon_save.png");}
#ii .nav .btn-3
	{background-image:url("../images/icon_tax.png");}
#ii .nav .btn-4
	{background-image:url("../images/icon_estate.png");}
#ii.interact .nav .btn
	{transition: all 0.3s ease-in-out;}
#ii .nav .btn:hover
 	{background-size:70% auto;background-color:#044014;}
#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
	{background-color:#368727;}
#ii.open .nav .btn.selected, #ii.open .nav .btn:hover
	{background-color:#044014;}
#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("../images/icon_investing.png") no-repeat center; background-size: 60% 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:70% auto; opacity:1;}
 #ii.open .nav .btn-1:not(.selected)
	{background-image:url("../images/icon_retirement.png");}
#ii.open .nav .btn-2:not(.selected)
	{background-image:url("../images/icon_save.png");}
#ii.open .nav .btn-3:not(.selected)
	{background-image:url("../images/icon_tax.png");}
#ii.open .nav .btn-4:not(.selected)
	{background-image:url("../images/icon_estate.png");}

#ii .nav .btn span
	{position: absolute; width: 150%; bottom:-2.5em; left:-25%; font-weight: 600; text-align: center; opacity:0;
	 transition: opacity 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: 160%; left: -30%; font-size: 14px; opacity:0;}
#ii.open .nav .btn span#topic-save, #ii.open .nav .btn span#topic-estate {
	margin-bottom:-1em;
}
#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; z-index:10; opacity:0;
	 background: #368727;}
#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: 250px; left: -117px; 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: 16%; 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: calc(-1.85em - 1px); 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: overlay; visibility: hidden;
	 transition:all 0.5s ease-in-out;}
#ii #footer.show #footer-content 
	{max-height:400px; 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; margin:0 auto; 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("../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:13em; width: 65%;}
	#ii.open .nav 
		{top: 15%; width: 56%; left: 22.5%;}

	#ii.open #pages.pos-1 
		{left: 17%;}
	#ii.open #pages.pos-2
		{left:33%;}
	#ii.open #pages.pos-3 
		{left: 36.5%;}
	#ii .nav .btn span#topic-estate, #ii.open .nav .btn span#topic-estate
		{margin-bottom: 0;}
}

@media screen and (max-width:920px) {
	#ii.open .nav .btn span#topic-estate
		{margin-bottom: -1em;}
}

@media screen and (max-width:810px) {
	#ii.open .nav .btn span#topic-tax
		{margin-bottom: -1em;}
}

@media screen and (max-width:775px) {
	#ii .nav .btn span#topic-save {
		margin-bottom: -1em;
	}
}

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

	#ii.open .nav 
		{top: 15%; width: 76%; left: 12.5%;}
	#ii.open .nav .btn span
		{width:220%; left:-64%; font-size:13px;}
	#ii.open .nav .btn span#topic-save 
		{width: 200%; left: -50%;}
	#ii.open .nav .btn span#topic-save, #ii.open .nav .btn span#topic-tax, #ii.open .nav .btn span#topic-estate {
			margin-bottom:0em;
		}
	#ii .cta-btn 
		{left: 3.5%; text-align: left;}
	#ii .bar .tick span 
		{width:170px; left:-75px;} 
	#ii.open .bar .tick.selected span
		{font-size:14px; margin-top:0;}
	#ii.open #pages.pos-1 
		{left: 8%;}
	#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:665px) {
	#ii.open .nav .btn span#topic-save {
		margin-bottom: -1em;
	}
}

@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: 60%; 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: 600%; 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 .nav .btn span#topic-save
		{margin-bottom:0}
	#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: 15%; 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: 87%; padding:0 !important; margin:0 !important;}
	#ii .bar .marker .tail 
		{top: calc(-1.2em - 2px); left:12%; width: 70%; height: 70%;}

	#ii .page 
		{margin: 0 4%; padding-top: 0.75em; 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.25em;}
	#ii.open .nav .btn 
		{width: 100%; transition:all 0.5s ease-in-out;}
	#ii.open #pages 
		{width: 87%; left: 6%; top: 37.8%; height: 16em;}
	#ii.open #pages.pos-1, #ii.open #pages.pos-2, #ii.open #pages.pos-3
		{left:6%;}

	#ii .bar .tick span
		{opacity:0; transition:opacity 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:opacity 0.5s 0.5s ease-in}

	#footer-label 
		{right: 19%; 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: 500px) {
	#footer-label 
		{right: 21%;}
}

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