/* FONTS */
@font-face {
    font-family: "TIAA Challenger";
    src: url("../fonts/TIAAChallenger-Black.otf");
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: "TIAA Challenger";
    src: url("../fonts/TIAAChallenger-BlackItalic.otf");
    font-weight: 900;
    font-style: italic;
}

@font-face {
    font-family: "TIAA Challenger";
    src: url("../fonts/TIAAChallenger-Semibold.otf");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "TIAA Challenger";
    src: url("../fonts/TIAAChallenger-SemiboldItalic.otf");
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: "Ringside Narrow";
    src: url("../fonts/RingsideNarrow-Bold.otf");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "Ringside Narrow";
    src: url("../fonts/RingsideNarrow-Book.otf");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Ringside Narrow";
    src: url("../fonts/RingsideNarrow-BookItal.otf");
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: "Sentinel";
    src: url("../fonts/Sentinel-Book-Pro.otf");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Sentinel";
    src: url("../fonts/Sentinel-BookItalic-Pro.otf");
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: "TIAA Iconography";
    src: url("../fonts/tiaa-icon-font.eot");
    src: url("../fonts/tiaa-icon-font.eot?") format("embedded-opentype"), url("../fonts/tiaa-icon-font.woff") format("woff"), url("../fonts/tiaa-icon-font.ttf") format("truetype");
    font-style: normal;
    font-weight: 600;
}

/* COLORS */
:root {
    --union: #041459;
    --blueprint: #305AF3;
    --blue-sky: #8AAFFA;
    --clarity: #C3DAFF;
    --laurel: #00313C;
    --thrive: #00A38D;
    --nest-egg: #00A38D;
    --ledger: #CEEEDE;
    --parchment: #E7E7DD;
    --chalk: #F5F5F0;
    --insight: #E4FB5B;
    --white: #FFFFFF;
}

html {
    background-color: var(--union);
    margin: 0;
}
/*
TIAA light blue: #00ceff;
TIAA yellow: #f9e038;
TIAA gray: #53565a;
TIAA light gray: #ededee;
*/
body {
    background: var(--white);
    color: #000;
    font-family: "Ringside Narrow Book", Helvetica, Arial, sans-serif;
    font-weight: 500;
}
h1, h2, h3, h4, h5, h6 {
    font-family: "Ringside Narrow", Helvetica, Arial, sans-serif;
    font-weight: 700;
    line-height: 1;
}

h1.page-title {
    font-family: "TIAA Challenger", Helvetica, Arial, sans-serif;
    font-size: 4rem;
    font-weight: 900;
}
hr { border-color: #ccc; }

a, a:visited {
    color: var(--blueprint);
    font-weight: bold;
}
a:hover, a:visited:hover {
    color: var(--blue-sky);
    text-decoration: none;
}

p strong, li strong {
    /*background-color: var(--insight);*/
    font-family: "Ringside Narrow", Helvetica, Arial, sans-serif;
    font-weight: 700;
}

[class^="icon-"], [class*=" icon-"], .next-link.visible-xs {
    font-family: "TIAA Iconography";
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}
.icon-arrow-right:before {
    content: "\e909";
}
.icon-caret-left:before, .next-link.visible-xs.prev:before {
    content: "\e907";
}
.icon-caret-right:before, .next-link.visible-xs.next:before {
    content: "\e908";
}

/* page architecture */
#logo-container {
    background: var(--union);
    height: 48px;
    padding: 12px 0;
    text-align: center;
}
#logo-container img {
    height: 22px;
}
#intro-content {
    margin-bottom: 2em;
    padding-top: 2rem;
    text-align: center;
}
#intro-content p {
    font-size: 20px;
}
#roadmap-container {
    padding-bottom: 4em;
}
#footer {
    background: #000;
    padding: 4em 0;
}
#footer p {
    color: #969696;
    font-style: italic;
}

.benefit-column {
    background: var(--chalk);
    border-radius: 4rem 0 0 0;
    margin-bottom: 2rem;
    padding: 1rem;
}
.benefit-icon-group {
    border-radius: 2px;
    padding: 1em;
}
/*.benefit-icon-group:hover {*/
    /*background-color: rgba(255,255,255,0.2);*/
    /*cursor: pointer;*/
/*}*/
.benefit-icon-button {
    background: transparent url("../img/window-blank.png") top center no-repeat;
    background-size: 100px 100px;
    border: none;
    font-family: "Ringside Narrow",sans-serif;
    font-size: 24px;
    height: inherit;
    line-height: 1;
    outline: none;
    padding: 106px 0 0 20px;
    text-align: center;
    width: 100%;
}
.benefit-icon-button .icon {
    visibility: hidden;
    font-size: 20px;
    margin-left: 5px;
}
.benefit-icon-button:hover {
    color: var(--blueprint);
}
.benefit-icon-button:hover .icon {
    visibility: visible;
}

/* modal */
.modal-content {
    border-radius: 0;
}
.modal-backdrop {
    background-color: var(--blue-sky);
}
.pictogram-modal a {
    font-family: "Ringside Narrow", Helvetica, Arial, sans-serif;
    font-weight: 700;
}
.pictogram-modal a.italic {
    font-size: 108%;
}
.pictogram-modal .modal-dialog {
    width: 75%;
    max-width: 992px;
}
.modal-header {
    background: var(--parchment) url("../img/window-blank.png") 12px center no-repeat;
    background-size: 48px 48px;
    border-bottom-color: #000;
    height: 72px;
    padding: 12px;
    position: relative;
}
.modal-title {
    font-family: "TIAA Challenger", Helvetica, Arial, sans-serif;
    font-size: 2em;
    font-weight: 700;
    line-height: .5;
    margin-left: 60px;
    padding: 18px 0;
}
.close {
    font-size: 1.5em;
    font-weight: normal;
    height: 24px;
}
.close-label {
    display: inline-block;
    margin-top: 6px;
    vertical-align: top;
}
.next-links {
    position: absolute; right: 12px; bottom: 12px;
    text-align: right;
}
.next-link {
    color: #000;
    font-family: "Ringside Narrow",Arial,sans-serif;
    font-weight: 500;
    text-transform: uppercase;
}
.next-link:hover {
    cursor: pointer;
    color: #000;
    opacity: 0.5;
}
.next-links .sep {
    display: inline-block;
    border-left: 1px solid rgba(0,0,0,0.4);
    margin-left: 1em;
    padding-left: 1em;
    height: 1.2em;
    width: 1px;
    vertical-align: middle;
    margin-bottom: 2px;
}
.modal-body {
    color: #404040;
    min-height: 350px;
}
.modal-primary-content {
    min-height: 250px;
    max-height: 450px;
    overflow-y: auto;
}
.modal-body .hed {
    margin-top: 0;
}
.modal-body .subhed {
    margin-top: 1.4em;
}
.modal-footer {
    border: none;
}
.pictogram-modal-plan-header {
    text-align: center;
    padding-top: 80px;
    background: url("../img/icon-HSA-blueprint.png?version=2024") center top no-repeat;
    background-size: 72px;
    border-bottom: 1px solid #000;
    height: 120px;
    margin-bottom: 1em;
    padding-bottom: 1em;
}
.pictogram-modal-plan-header.hsa { background-image: url("../img/icon-HSA-blueprint.png?version=2024"); }
.pictogram-modal-plan-header.fsa { background-image: url("../img/icon-FSA-blueprint.png?version=2024"); }
.pictogram-modal-plan-header.rhsp { background-image: url("../img/icon-RHSP-blueprint.png?version=2024"); }

#button-options, #pictogram-options-modal .modal-header { background-image: url("../img/icon-SignDirectional-blueprint.png"); }
#button-eligibility, #pictogram-eligibility-modal .modal-header { background-image: url("../img/icon-PeopleFamily-blueprint.png"); }
#button-contributions, #pictogram-contributions-modal .modal-header { background-image: url("../img/icon-HandCoin-blueprint.png"); }
#button-taxes, #pictogram-taxes-modal .modal-header { background-image: url("../img/icon-BuildingsGovernment-blueprint.png"); }
#button-expenses, #pictogram-expenses-modal .modal-header { background-image: url("../img/icon-Calculator-blueprint.png"); }
#button-accessing, #pictogram-access-modal .modal-header { background-image: url("../img/icon-Vault-blueprint.png"); }
#button-investment, #pictogram-investment-modal .modal-header { background-image: url("../img/icon-GraphBar-blueprint.png"); }
#button-unused, #pictogram-unused-modal .modal-header { background-image: url("../img/icon-CurrencyOutflow-blueprint.png"); }
#button-learn, #pictogram-learn-modal .modal-header { background-image: url("../img/icon-ComputerDesktop-blueprint.png"); }
#button-remember, #pictogram-remember-modal .modal-header { background-image: url("../img/icon-Lightbulb-blueprint.png"); }
#button-start, #pictogram-start-modal .modal-header { background-image: url("../img/icon-HorizonSun-blueprint.png"); }

.pictogram-modal-content .popover {
    color: #fff;
    font-size: 12px;
}
.pictogram-modal-content .popover p {
    background-color: inherit;
    padding: 0;
    text-align: left;
}
.pictogram-modal-content .popover a {
    color: #fff;
}
.pictogram-modal-content .popover-title {
    display:none;
}
.pictogram-modal-content-hsa .popover.top>.arrow:after {
    border-top-color: #00a9e0;
}
.pictogram-modal-content-fsa .popover.top>.arrow:after {
    border-top-color: #512d6d;
}
.pictogram-modal-content-rhsp .popover.top>.arrow:after {
    border-top-color: #007377;
}

.pictogram-modal-content ol,
.pictogram-modal-content ul {
    padding-left: 1em;
}
.pictogram-modal-content ol ol,
.pictogram-modal-content ul ul {
    margin-top: 1em;
}
.pictogram-modal-content ol li,
.pictogram-modal-content ul li {
    margin-bottom: 1em;
}

.benefits-link {
    font-weight: bold;
}
.italic {
    font-style: italic;
}
.nowrap {
    display: inline-block;
    white-space: nowrap;
}


/* responsive breakpoint tweaks */


@media screen and (min-width: 768px) {
    .benefit-icon-button {
        background-size: 56px;
        background-position: center left;
        font-size: 20px;
        height: 64px;
        padding: 0 12px 12px 64px;
        text-align: left;
    }
    .benefit-icon-button .icon {
        font-size: 16px;
    }
}

@media screen and (min-width: 992px) {
    .benefit-icon-button {
        background-size: 64px;
        font-size: 24px;
        height: 72px;
        padding: 0 12px 12px 74px;
    }
}

@media screen and (min-width: 1224px) {
    .container { width: 1224px; }
}
/* large screens */
@media screen and (min-width: 1600px) {
    body {
        font-size: 16px;
    }
    h4 {
        font-size: 20px;
    }
    .benefit-icon-button {
        background: transparent url("../img/window-blank.png") top center no-repeat;
        background-size: 100px 100px;
        border: none;
        font-family: "Ringside Narrow", Helvetica, Arial, sans-serif;
        font-size: 28px;
        height: inherit;
        outline: none;
        padding: 106px 0 0 20px;
        text-align: center;
        width: 100%;
    }
    .pictogram-modal .modal-dialog {
        max-width: 1192px;
    }
    .modal-primary-content {
        max-height: 550px;
    }
    .modal-header {
        background-size: 64px 64px;
        height: 96px;
    }
    .modal-title {
        line-height: 1;
        margin-left: 80px;
    }
}

/* mobile version */
@media screen and (max-width: 767px) {
    body {  }
    h1 { font-size: 4rem; }
    h3 {  }

    #intro-content p {
        font-size: 18px;
    }
    .benefit-icon-button:hover .icon {
        visibility: hidden;
    }

        /* modal behavior */
    .pictogram-modal .modal-dialog {
        width: 90%;
        margin: 5%;
    }
    .modal {
        overflow: inherit;
        position: absolute;
    }
    .modal-title {
        font-size: 1.6em;
    }
    .next-link.visible-xs {
        display: inline-block!important;
    }
    .modal-primary-content {
        max-height: inherit;
        overflow-y: auto;
    }
    .pictogram-modal-plan-header {
        border: none;
    }
    .pictogram-modal-content-hsa,
    .pictogram-modal-content-fsa {
        border-bottom: 1px solid #000;
        margin-bottom: 2em;
        padding-bottom: 2em;
    }
}