/*---------- Header ----------*/
.header { background-color: #592c82; color: #fff; margin: 0; padding: 40px 0 10px; z-index: 300; height: 145px;}
    .header .btn-group { padding-top: 12px;}
.mobile-header { display: none;}

.mobile-contact { cursor:pointer;}

/*---------- Hero ----------*/
.hero { padding-bottom: 0;}
.hero h1 { color: #592c82; font-size: 48px; text-transform: uppercase; }
    .hero h1 span { font-family: oswald-light, Arial, sans-serif;}
        .hero p.subhead { font-family: sanchez, Arial, sans-serif; font-size: 25px; color: #00aac6; padding: 20px 0 0; margin-bottom: 5px;}
        .hero p { font-size: 16px; padding: 3px 0;}

.navigation { font-family: museo-sans, arial, sans-serif; background: #f8f8f8; padding: 0; border-bottom: 1px solid #ddd; border-top: 1px solid #ddd;}


/*---------- Welcome kit items ----------*/
.welcome-items h2 { font-family: oswald, arial, sans-serif; font-size: 26px; letter-spacing: 0.3px; text-transform: uppercase; color: #592c82; }
.welcome-items h3 { font-family: museo-sans, arial, sans-serif; font-size: 14px; text-transform: uppercase; border-bottom: 1px solid #ddd; padding-top: 10px; padding-bottom: 5px;}

.legend-video { float: right; margin-top: 30px; font-size: 12px; text-transform: uppercase; color: #a7a9ab; }



/*---------- Checkout page ----------*/
#doc-summary, #vid-summary, #site-summary { counter-reset: foo; display: table; margin-left: -38px; }
#doc-summary li, #vid-summary li, #site-summary li { list-style: none; font-size: .95em; padding-bottom: 5px; counter-increment: foo; position: relative; padding-left: 32px; }

    #doc-summary li { background: url(../img/icon/docs.png) 0 2px no-repeat; padding-left: 40px;}
    #vid-summary li { background: url(../img/icon/vids.png) 0 2px no-repeat; padding-left: 40px;}
    #site-summary li { background: url(../img/icon/site.png) 0 2px no-repeat; padding-left: 40px;}

    #doc-summary i, #vid-summary i { display: none;}


.selected-items { font-family: sanchez, Arial, sans-serif; font-size: 17px; text-transform: uppercase; margin-top: 0; }

/***** HSA TERMS AND CONDITIONS ********/
.learn-btn{
    background-color: #00aac6;
    width: 130px;
    padding: 10px;
    text-align: center;
    text-transform: uppercase;
    color: white;
}
.learn-btn:hover{
    background-color: white;
    border: 1px solid #00aac6;
    color: #00aac6;
    text-decoration: none;
}
/* .learn-btn a{
    padding: 10px;
    color: white;   
}
.learn-btn a:hover{
    text-decoration: none;
    color: #00aac6;
} */

footer a {
    color: #6f6a74;
}



/*------------------------------ Media queries ------------------------------*/
@media (max-width: 1024px) {
    .container { padding: 0 20px;}
}


@media (max-width: 991px) {
    .header { height: auto; padding: 24px 0 18px}
        .desktop-header { display: none; color: #00aac6;}

    .mobile-header { display: block;}
          
    .mobile-logo { text-align: center;}
        .mobile-logo img { margin-top: -5px; height: 32px; }
        .mobile-logo a.btn-header { font-size: 13px; padding: 6px 12px 5px; margin-top: -5px;}
    .mobile-contact i { font-size: 24px; margin-top: -2px}

     

    .hero h1 { font-size: 36px;}
    .hero p { font-size: 14px;}
        .hero p.subhead { font-size: 22px;}

}

@media (max-width: 768px) {
   
    .mobile-header.container { padding: 0 20px;}     
    .mobile-logo img { margin-left: 5% }

    .legend-video { margin-top: 10px;  }
}

@media (max-width: 767px) {
    .mobile-header.container { padding: 0 18px;}

    .container { padding: 0 25px; }
    .hero { padding-bottom: 25px}
    .hero-img { display: none;}
    
}

@media (max-width: 414px) {
    body {
        margin: 0;
    }
    .generic-footer {
        background: #e7e7e7;
        padding: 40px 0 50px;
        position: unset;
        width: 100%;
        height: 100%;
    }
    #sendBtn, #sendBtn a { left: 0; width: 100%; }

    .header { padding: 15px 0; }
    .mobile-header.container { padding: 0 25px; }

    .mobile-logo img { margin-top: 2px; height: 28px; }
    .mobile-logo a.btn-header { margin-top: -1px; }
    .mobile-contact i { margin-top: 2px; }
    /*.mobile-header.container { padding: 0 15px;}*/
    .container { padding: 0 25px; }


    .hero { padding-bottom: 18px; }
        .hero h1 { margin-top: 5px; font-size: 2.6em; }
        .hero p.subhead { font-size: 18px; padding: 10px 0 0; }
    .hero-img { display: none; }
    .hero .btn-teal-lg { display: block; width: 100%; }

   
}



@media (max-width: 375px) {
    .hero h1 { width: 80%;}

}

@media (max-width: 320px) {
  
    
    

    
}