/* --Table of contents-- */
.table-of-contents { margin-top: 40px; padding-left: 12px; border-left: 2px solid #f1f1f1} 
.toc-mobile { display: none;}

h4.toc { font-family: Oswald, Arial, sans-serif; font-family: 18px; text-transform: uppercase;}

.toc-ul { list-style: none; margin-left: 0; padding-left: 3px;}
    .toc-ul li { font-family: museo-sans, arial, sans-serif; font-weight: 500; font-size: 14px; line-height: 32px;border-bottom: 1px solid #f1f1f1;}
        .toc-ul li a { color: #6f6a74; }
        .toc-ul li a:hover {  color: #592c82;  }
        .toc-ul li i { /*color: #00aac6;*/ padding-right: 4px;}
    .toc-ul li ul { list-style: none; margin-left: 4px;}
        .toc-ul li ul li { font-family: museo-sans, Arial, sans-serif; font-size: 12px; line-height: 15px;   }
            .toc-ul li ul li a { padding-left: 0; margin-left: 0px; }
            .toc-ul li ul li a:hover { color: #00aac6; text-decoration: underline;}

    .toc-ul ul.fa-ul li { text-indent: 0px; padding: 6px 0; border-bottom: 1px solid #f1f1f1;}
    .toc-ul ul.fa-ul li a {color: #00aac6;}

/* --Tabs-- */
.nav-tabs { font-weight: 500; font-size: 14px; margin-top: 20px; border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; text-transform: uppercase; background: #f8f8f8; }
    .nav-tabs > li { float: left; margin-left: -1px; margin-bottom: -2px; }
        .nav-tabs > li > a { color: #6f6a74; padding: 10px 12px; border-left: none; border-right: none;text-decoration: none; margin-top: 0 }
            .nav-tabs > li > a:hover { background-color: #f1f1f1; border-top: 1px solid #d1d2d4; border-bottom: 1px solid #d1d2d4; margin-top: -1px; border-radius: 0; border-left: none; border-right: none; text-decoration: none; }
            .nav-tabs > li > a > i { padding-right: 3px; }
        .nav-tabs > li.active a, .nav-tabs > li.active a:hover, .nav-tabs > li.active > a:focus{ color: #592c82; background: #fff; border-top: 2px solid #592c82; border-bottom: 2px solid #592c82; border-right: none; border-left: none; margin-top: -2px; text-decoration: none; border-radius: 0; }

/* --Tab content-- */
.tab-pane { padding-right: 20px; }
    /*.hsa-guide-content .tab-pane h3 { text-transform: uppercase; font-size: 15px; font-weight: 500; color: #592c82; padding-bottom: 9px;}*/
    .tab-pane ol li { font-family: sanchez, Arial, sans-serif; font-size: 18px; color: #00aac6; padding-bottom: 10px; }
    .tab-pane li p { font-family: museo-sans, Arial, sans-serif; font-size: 14px; color: #6f6a74; padding-top: 3px; }

.tab-pane ul.instructions, ul.instructions { list-style: none; padding-left: 0; }
    .tab-pane ul.instructions li, ul.instructions li { padding: 10px 0; border-bottom: 1px solid #dcddde;}
    .tab-pane ul.instructions li span, ul.instructions li span { font-weight: 700; color: #592c82;}

/* --Labels-- */
.label-glossary { background-color: #a7a9ab;}
.label.label-not-taxed { background-color: #53934f; font-size: 13px; line-height: 26px; text-transform: uppercase;  }
.nav-tabs > li.active > a > span.label-glossary { background: #592c82; }



/* --Content-- */
.hsa-guide-content a  { text-decoration: underline; }
/*.hsa-guide-content ul li { padding-bottom: 10px;}*/

.hsa-guide-content h2 { font-family: Oswald, Arial, sans-serif; font-size: 27px; color: #592c82; line-height: 38px; text-transform: uppercase; }
.hsa-guide-content h3 { font-family: sanchez, Arial, sans-serif; font-size: 18px; color: #00aac6; text-transform: initial; /*padding-top: 3px;*/ margin-bottom: 5px;}


/* --1. Getting started-- */
.getting-started img { margin-top: -30px; padding: 0 20px 20px; max-width: 250px;}
.getting-started ul li { padding-bottom: 10px;}


/* --2. How it works-- */
.otc { background: #f6f6f6; padding: 20px 25px 20px;}
    .otc h3 { font-family: sanchez-semibold, Arial, sans-serif; color: #592c82; margin-top: 5px;}
    .otc img { padding-right: 15px; padding-bottom: 15px; float: left;}


/* --3. Your HSA-- */
.contribution-limits { background: #f8f8f8; font-size: .95em; max-width: 240px; padding: 20px 20px; float: right; margin-left: 25px;}
    .contribution-limits h3 { font-family: sanchez-semibold, Arial, sans-serif; font-size: 17px; line-height: 21px; color: #592c82; margin-top: 0px;}

.debit-card { float: right; padding-left: 25px; }
    .debit-card span { font-size: 12px; font-weight: 500; text-transform: uppercase; padding-left: 5px;}

.equation { font-size: 25px; font-weight: 500; line-height: 30px;}
.fraction { display: inline-block; text-align: center; font-size: 50%; line-height: 15px; }
.fraction, .fraction-top, .fraction-bottom { padding: 5px 0 }
.fraction-bottom { border-top: 1px solid #000; display: block; }

/* --4. Investing-- */
.investing .tab-pane { padding-top: 0; padding-left: 15px;}
.investing .tab-pane h3 { text-transform: uppercase; font-size: 15px; font-weight: 500; color: #592c82; padding-top: 5px; padding-bottom: 0px;}
    .investing .tab-pane ul.instructions li ul li { border-bottom: none; padding-bottom: 2px;}

.investing .contribution-limits { float: none; max-width: none; width: auto; margin-left: 0; padding: 10px 15px 15px; }
    .investing .contribution-limits span.voltage { font-size: 18px; color: #00aac6;}

.faq-question { font-size: 16px; font-weight: 700;}

/* --5. Maximize your savings-- */
.maximize table { width: 60%; margin-top: 20px; }


/* --6. Retirement-- */
.retirement-guide table th { background: #6f6a74; color: #fff; font-family: sanchez, Arial, sans-serif; font-weight: normal; font-size: 14px; text-transform: uppercase;}
.not-taxed { color: #53934f; font-family: oswald; font-size: 13px; line-height: 25px; text-transform: uppercase;  padding-bottom: 10px; }
.taxed { color: #6f6a74; font-family: oswald; font-size: 13px; line-height: 25px; text-transform: uppercase;  padding-bottom: 10px; }


/* --7. Save now-- */
 .save-now ol li  { font-family: sanchez, Arial, sans-serif; font-size: 14px; color: #592c82; padding-bottom: 10px; margin-left: -25px;text-transform: uppercase; }
    .save-now li p { font-family: museo-sans, Arial, sans-serif; text-transform: initial; font-size: 14px; color: #6f6a74; padding-top: 3px; }

/* --8. What if-- */
.what-if img { margin-top: -30px; padding: 0 20px 20px; float: right;}

/* --9. Member portal-- */
.member-portal hr { padding: 0; margin-bottom: 0;}
.member-portal h4 { font-family: sanchez, Arial, sans-serif; font-size: 15px; text-transform: uppercase; color: #592c82; padding-top: 15px; }
.member-portal .tab-pane h3 { font-family: sanchez, Arial, sans-serif; font-size: 15px; text-transform: uppercase; color: #592c82;  margin-top: 8px; }
.member-portal .tab-pane ul.instructions li ul li { border-bottom: none; padding-bottom: 0; }
.member-portal .contribution-limits { margin-top: 20px; margin-bottom: 30px;}
    .member-portal .contribution-limits h3 { text-transform: initial; /*font-weight: 700;*/}
    .member-portal .contribution-limits ol li { color: #6f6a74; font-family: museo-sans, arial, sans-serif; font-size: 13px; margin-left: -25px; }


.member-portal .screenshots { font-size: 12px; font-weight: 500; text-transform: uppercase; padding-left: 5px; }


/* --10. App-- */
.mobile-app .tab-pane { padding-top: 30px;}
.mobile-app .tab-pane h3 { text-transform: uppercase; font-size: 15px; font-weight: 500; color: #592c82; padding-top: 17px; padding-bottom: 9px;}
    

.mobile-app .tab-pane ol { padding-left: 30px; }
.mobile-app .tab-pane ol li { font-family: museo-sans, Arial, sans-serif; font-size: 14px; color: #6f6a74; }

.app-screenshot { float: left;  padding-right: 20px; margin-left: -15px;  }
.app-screenshot2 { padding-right: 20px; margin-left: -15px;  }



/* --11. Glossary-- */
.nav-tabs > li > a > span.label-glossary { vertical-align: top; line-height: 20px; margin-left: 0px; }
.glossary ol li { font-family: museo-sans, Arial, sans-serif; font-size: 14px; color: #6f6a74;}



/* --Media queries-- */

@media (max-width: 1199px) {
    .mobile-app .tab-pane { padding-top: 10px; }
        .mobile-app .tab-pane h3 { padding-top: 40px;  }

    .app-screenshot2 { padding-top: 20px; margin-left: -15px; }
    .app-guide-content { margin-left: -68px;}
}

@media (max-width: 991px) {
.table-of-contents { margin-top: 5px; margin-left: -30px; padding-left: 0; border-left: none; text-align: center;}
    h4.toc { display: none;}
    
    .toc-mobile { display: block; background: #f1f1f1; text-align: center; padding: 10px 0; margin: -25px -5px 10px}
        .toc-mobile:hover { background: #f8f8f8; }
        .toc-mobile a {  font-weight: 500; color: #00aac6;  text-transform: uppercase; text-decoration: none;}
            .toc-mobile a:hover, .toc-mobile a:focus { color: #00aac6;  text-decoration: none;}
    .toc-desktop{ display: none;}

    .toc-ul { border-left: none; padding-left: 30px; } 
    .toc-ul li i { display: none;}

    .glossary .nav-tabs, .glossary-legend { display: none;}
    .glossary .tab-content { margin-top: -30px;}
    .app-guide-content { margin-left: 0px; }
}

@media (max-width: 768px) {

    .app-screenshot2 { margin-left: -15px; padding-top: 20px; margin-right: 20px;}
    .getting-started img { padding: 0 0 20px 20px; max-width: 230px;}
    
}

@media (max-width: 767px) {
.app-screenshot, .app-screenshot2 { display: none;}      
.mobile-app .tab-pane { padding-top: 0; }
      .mobile-app .tab-pane h3 { padding-top: 8px;  }
}

@media (max-width: 480px) {
      

      .nav-tabs > li { width: 100%; text-align: center;} 
}

@media (max-width: 414px) {
  

    .contribution-limits { display: block; float: none; margin: 20px 0; max-width: none; width: auto;}

    .debit-card { float: none; padding: 18px 0; margin-left: -2px;}

    .getting-started img { display: none;}


    .maximize table { width: 100%;}
    

    .otc img { margin: 0 auto; padding-bottom: 5px; display: block; float: none; max-width: 90px }

    
    .what-if img  {display: none;}

}

@media (max-width: 412px) {

 
}
@media (max-width: 384px) { 

}


@media (max-width: 375px) { 
 
    .hsa-guide-content h2 { font-size: 24px; line-height: 34px;}
}

@media (max-width: 360px) { 


}

@media (max-width: 320px) {
 

}