/* Universal CSS */

.btn-teal, a.btn-teal, .adv-topics a.btn-teal { background-color: #00aac6; border: none; color: #fff; padding: 8px 10px; text-decoration: none; font-family: oswald, "Helvetica Neue", Helvetica, Arial, sans-serif; text-transform: uppercase; }
a.btn-teal:hover, .btn-teal:hover, .btn-teal:focus, .btn-teal.focus, .btn-teal:active, .btn-teal.active { background-color: #0070b9; border: none; color: #fff; }


.underline { text-decoration: underline;}

sup i.fa.fa-plus-square { padding: 0 2px; font-size: 1.3em; font-style: normal; cursor: pointer;}
#tooltip { font-size: 14px;  line-height: 1.5; color: #fff; background: #6f6a74; max-width: 300px; position: absolute; z-index: 100; padding: 15px; cursor: pointer; }
    #tooltip:after { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #6f6a74; border-top-color: #6f6a74; content: ''; position: absolute; left: 50%; bottom: -10px; margin-left: -10px; }
    #tooltip.top:after { border-top-color: transparent; border-bottom: 10px solid #6f6a74; border-bottom-color: #6f6a74; top: -20px; bottom: auto; }
    #tooltip.left:after { left: 10px; margin: 0; }
    #tooltip.right:after { right: 10px; left: auto; margin: 0; }



/* Hero */
.hero { background: url(https://learn.healthequity.com/img/hero/bg-medical.png) top center; height: 296px; color: #6f6a74;}
.hero-msg { margin-top: 50px;}
 .hero .tagline { font-family: Oswald, Arial, sans-serif; font-size: 55px; line-height: 60px; padding-top: 15px; margin-bottom: 5px} /* HSAs are an easy win*/
    .tagline span { font-family: voltage, Arial, sans-serif; font-size: 74px; padding-left: 5px; padding-right: 3px;}
    .hero .tagline2 { font-family: sanchez-light, Arial, sans-serif; font-size: 31px;}/* in today's complex healthcare system*/

/* How */
.how { font-size: .98em; line-height: 1.5em; padding-bottom: 40px; }
    .how h2 { font-size: 34px; font-family: sanchez, arial, sans-serif;  padding-bottom: 30px;}
    .how img { display: block; margin: 0 auto; padding-bottom: 15px;}
    .how1 { margin: 0 auto 0 56px;} /* How does an HSA work icon 1*/

/* Superhero video */
    .superhero-wrap {position: relative; height: auto; margin-left: -33px;}
        .superhero-wrap a { text-decoration: none; position: relative; padding: 10px 0; line-height: 46px; font-size: 16px;}
    .vid-superhero {background: #dcddde; height: auto; padding: 0; margin-top: -10px;}
    .icon-superhero {position: relative; margin-top: -44px; margin-right: 5px;}
    .vid-intro-superhero { padding-right: 5px;}
   
/* Why/Empower */
.why { padding: 20px 0 30px; }
    .why h2 { font-size: 34px; padding-bottom: 10px; text-align: center;}
    .media-left2 { padding-right: 15px; float: left;}
    .empower-items {padding-top: 10px; }

/* Contribute */
.contribute { padding-top: 15px; padding-bottom: 30px;}
.contribute .media { border-bottom: 1px solid #f1f1f1;}
    .media.no-border { border-bottom: none;}
    .media-item1 { padding-top: 12px;}
    .media-item2 { padding-top: 4px;}
    .media-item3 { padding-top: 15px;}


/* Advanced topics */
.adv-topics { background: #f9f9f9 url(../img/advtopics/guidebook.jpg)top right; padding: 0; border-top: 1px solid #f1f1f1; border-bottom: 1px solid #f1f1f1;}
    .adv-topics a h2, .adv-topics a:hover h2 { font-size: 28px; color: #0070b9; text-decoration: none;}
    .adv-topics a { color: #333; text-decoration: none;}
    .adv-topics a:hover { text-decoration: none;}
    .adv-topics p { padding-bottom: 15px; color: #333;}
 .adv-topics ul { list-style: none; margin-left: 15px; padding-left: 0; font-size: 16px; }
    .adv-topics ul li a { color: #0070b9;}
    .adv-topics ul li a:hover { text-decoration: underline;}
    .adv-topics ul li {  padding-bottom: 5px;}
    p.guidebook-ad {font-family: sanchez, arial, sans-serif; font-size: 1.8em; padding-top: 40px; padding-bottom: 0; color: #592c82; margin-left: 0px;}
    p.guidebook-action { /*margin-left: -15px;*/  }
    .guidebook-img { margin-top: -60px;}



/* Retirement */
.retirement { padding: 40px 0 40px;}
.retirement h2 { font-size: 28px; font-family: sanchez, arial, sans-serif; color: #592c82;}
.retirement h3 { font-family: oswald, helvetica, arial, sans-serif; font-size: 20px; line-height: 24px; text-transform: uppercase;
                 margin: 0; text-align: center;}

.grow-description { padding-top: 130px }

.retire-header, .retire-header2 { padding: 30px 15px 20px; text-align: center;}

.retire-header img { padding-top: 20px; }
.retire-header2 img { padding-top: 0px; margin-top: -4px;}
.retire-description { padding: 20px 20px 0; min-height: 200px;}
    .retire-description p { padding-bottom: 10px; }

.full-modules { padding-right: 0; padding-left: 0;}
.advisor-mod img { padding-bottom: 16px; margin-top: -8px;}

.media-left { padding-right: 30px;}

.hide-couple img { padding-top: 130px; }
.couple-mobile { display: none;}
.investment h2 {font-family: sanchez, 'helvetica neue', 'Helvetica', arial, sans-serif; font-size: 22px;  color: #592c82;text-transform: initial;  text-align: left;}

.investment h2.secondary { font-family: sanchez, arial, sans-serif; font-size: 1.8em; text-transform: initial; color:#00aac6; margin-bottom: 2px;} 
.investment h3 { color: #53934f;  font-family: museo-sans, arial, sans-serif; text-transform: initial; font-weight: 700; font-size: 1.1em; margin-bottom: 2px;}
.investment .sidebar p { font-family: museo-sans, Arial, sans-serif; font-size: 15px;}

.investment-thought {position: absolute; right: 0; top: 0;}
.investment-intro {width: 85%; padding-right: 20px;}
.investment-options { width: 65%;}

table.funds tr th, table.funds tr td { padding:  6px 10px;}
table.funds th { background: #592c82; color: #fff; font-family: oswald-light, arial, sans-serif; text-transform: uppercase; font-size: 1.3em;}
table.funds td {  font-size: .9em;}

table.no-border { margin-bottom: 0;}
table.no-border tr td { font-family: sanchez-semibold, arial, sans-serif; font-size: 1.2em; border-bottom: none; color: #0070b9; }

#best-in-class p, #investor-choice p { padding: 30px 16px 20px;}

.investment .nav-tabs > li > a { margin-right: 2px; line-height: 1.42857143; border: 1px solid transparent; border-radius: 4px 4px 0 0; color: #6d6e70; font-size: 14px; text-transform: uppercase; }
.investment .nav-tabs > li.active > a { color: #592c82; border-bottom: 1px solid #592c82; text-decoration: none; font-weight: bold; border-top: none; border-left: none; border-right: none; }
.investment .nav-tabs > li > a:hover { background-color: #00aac6; color: #fff; border-radius: 0; text-decoration: none; }
.investment.nav-tabs > li.active > a,
.investment.nav-tabs > li.active > a:hover,
.investment .nav-tabs > li.active > a:focus {
  color: #592c82; 
  background-color: #ffffff;
  /*border: 1px solid #dddddd;*/
  border-bottom: 1px solid #592c82;
  cursor: default;
  font-weight: bold; text-decoration: none;
}

#investor-choice .funds-familiar { padding: 10px 25px; }
    #investor-choice .funds-familiar h3 { font-family: sanchez, Arial, sans-serif; font-size:18px; color:  #592c82; margin-top: 13px; padding-bottom: 10px; margin-bottom: 0;}
    #investor-choice .funds-familiar p { padding: 0;}

/* Advisor */
.tab-pane { padding-top: 20px; }

h2.advisor-product { font-size: 1.9em; line-height: 1em; padding-top: 35px; font-family: Oswald, Arial, sans-serif; text-transform: uppercase;}
h2.advisor-product.purple { color: #592c82;}
h2.advisor-product.teal { color: #00aac6; }
h2.advisor-product.blue { color: #0070b9; }
h2.advisor-product span { font-family: sanchez, arial, sans-serif; font-size: .6em; text-transform: initial; color: #6d6e70; margin-top: -10px}
h3.advisor-product { font-size: 1.4em; line-height: 1.5em; }
h3.advisor-product.purple { color: #592c82;}
h3.advisor-product.teal { color: #00aac6;}
h3.advisor-product.blue { color: #0070b9;}
h2.gps { color: #00aac6; font-size: 1.4em; line-height: 1.5em; float: none; width: 100%;}

.autopilot { width: 60px; float: left; padding-top: 30px; margin-right: 10px;}
.gps { width: 60px; float: left; margin-top: 20px; margin-right: 10px;}

.sidebar { padding: 8px 25px; background: #f1f1f1; margin-left: 10px; margin-top: 95px;}
.sidebar h3 { font-size: 1.4em; padding-bottom: 10px;}

.advisor-steps {font-size: 1.2em; text-transform: initial; font-weight: bold; }


.ladder { padding-top: 30px;}
.disclaimers { border-top: 1px solid #f1f1f1; margin-top: 20px; padding-top: 20px; font-size: .8em; font-family: Arial;}
    .footnote { clear: both; display: block; margin-bottom: 10px;}
        .note-number  { font-size: .8em; padding-right: 2px;  float: left}
        .note { float: left; width: 90%; padding-bottom: 10px; color: #6d6e70;} 




/* Media library */
 .media-library h2 { text-transform: uppercase; font-size: 28px;}
    .media-library h3 { font-family: oswald, helvetica, arial, sans-serif; font-size: 20px; text-transform: uppercase; color: #00aac6; margin-top: 10px;}

    .media-wrap { display: block; border: 1px solid transparent; padding: 20px 10px; height: 270px}
    .media-wrap:hover { background: #fff; border: 1px solid #dcddde; padding: 20px 10px; border-radius: 6px;}
    .media-library a { color: #5f5b64; text-decoration: none;}

/* Documents */
.list-group a { font-size: 1.2em; color: #333;}
    .list-group a:hover { color: #00aac6;}
.list-group-item i { padding-right: 3px; }

.documents h2 { font-family: oswald, sans-serif; font-size: 30px;  text-transform: uppercase; padding-left: 15px; padding-bottom: 10px;}
.documents .tab-pane { padding-top: 0;}
.documents h3 { font-family: sanchez, arial, sans-serif; text-transform: initial; font-size: 1.5em; color: #00aac6;}


/* About HealthEquity */
.about { padding: 0;  color: #fff;}
    .about h2 { color: #fff;}
    .about-description { float: left; width: 50%; padding: 10px 50px 10px 0; }
        .about-description p { color: #fff;}
    .team-members { float: right;width: 50%;}
    .team-mobile { display: none;}

@media (max-width: 992px) {
    .hero > .container,
    .why > .container,
    .about > .container,
    .how > .container,
    .contribute > .container,
    .retirement > .container,
    .media-library > .container { padding: 15px 40px; }

    .adv-topics > .container { padding: 5px 40px 0; }


    .hero { height: auto;}
        .hero-msg { margin-top: 0px;}
        .tagline { font-size: 42px; padding-top: 0; margin-bottom: 0;}
            .tagline span { font-size: 55px }

    .retirement { padding-top: 10px; padding-bottom: 10px;}
        .hide-couple, .couple-mobile { display: none;}
        .full-modules { padding: 15px 15px 10px }
        .retire-description { min-height: 170px;}
        .grow-description { padding-top: 100px;}

    .about { padding-bottom: 30px;  /*background: #592c82 url(../img/about/team-members.jpg) top right no-repeat;*/ }
    .about-description { float: left; width: 100%; padding-bottom: 20px;}
        .team-members { float: right;width: 100%;}
}


@media (max-width: 768px) {    
   .hero { height: auto;}
        /*.tagline { font-size: 42px; padding-top: 0; margin-bottom: 0;}
            .tagline span { font-size: 55px }*/
        .tagline2 { font-size: 25px; }

    .how { padding: 0px 0 25px;}

    .why { padding: 0 0 15px;}

    .contribute { padding: 0 0 15px 0;}
        .contribute h2 { font-size: 25px;}
    .guidebook-img { margin-top: 20px;}

    .media-library { padding: 10px 0;}

    .about-description { padding-right: 0; padding-bottom: 0; width: 40%;}

    .team-members { width: 60%; margin-right: -19px; padding-top: 52px;}

}

@media (max-width: 767px) {
    .media { margin-top: 25px;}
    .media.no-border { padding-bottom: 15px; border-bottom: 1px solid #f1f1f1;}
}

@media (max-width: 630px) {
    .tagline { font-size: 35px; line-height: 44px; padding: 0}
        .tagline span { font-size: 48px}

    .superhero-wrap { margin-left: 0; padding: 8px 0; }
        .superhero-wrap a { line-height: 22px; font-size: 14px; }
            .superhero-wrap a .vid-intro-superhero strong { }

    .vid-superhero { background: #dcddde; height: auto; padding: 0; }
    .icon-superhero { position: relative; margin-top: -44px; margin-right: 5px; display: none; }
    .action-play { display: block; }

    .about-description { width: 100%; }
    .team-members { display: none; }
    .team-mobile { display: block; padding: 10px 0 20px; width: 100%; }
}

@media (max-width: 480px) {

    .tagline { font-size: 35px; line-height: 44px; padding: 5px 20px 10px;}
        .tagline span { font-size: 48px}

        .tagline2 { font-size: 20px; }

    .invest-hide { display: none; }
    .couple-mobile { display: block; margin: 0 auto; }
    .grow-description { padding-top: 0; }
}


@media (max-width: 414px) {
    .hero > .container { padding: 10px 0;}
        .tagline { font-size: 38px; margin-bottom: 0;}
        .tagline2 { font-size: 20px; }

    .how h2, .why h2 { font-size: 25px;}

  .media-item1, .media-item2, .media-item3 { padding-bottom: 15px;}
    
}


@media (max-width: 375px) {
    .tagline2 { font-size: 18px;}

    .vid-intro-superhero strong { display: block; font-size: 18px;}
    .action-play { margin-top: -14px;}

    .why h2 { text-align: left; font-size: 22px; line-height: 28px;}
    .contribute h2 { font-size: 22px;}
        .media-left img { margin: 0 auto;}


}

@media (max-width: 320px) {
    .hero > .container, .why > .container, .about > .container, .how > .container, .contribute > .container, .retirement > .container, .media-library > .container { padding: 15px 30px; }

    .tagline { font-size: 30px; padding: 0; line-height: 38px; }
        .tagline span { font-size: 38px}
    .tagline2 { padding-top: 10px; font-size: 18px; text-align: center; margin: 0 auto; line-height: 26px; }

    .why h2, .adv-topics a h2, .retirement h2, .media-library h2 { font-size: 22px; line-height: 28px; }
    .contribute h2 { font-size: 20px;}

    .media-library > .container { padding: 0; }
}