/* general mods */
@font-face {
    font-family: "Agenda Bold";
    src: url("../fonts/285ba495-2172-479d-86ad-c20c8ee7ff3b-2.eot");
    src: url("../fonts/285ba495-2172-479d-86ad-c20c8ee7ff3b-2.eot?") format("embedded-opentype"), url("../fonts/285ba495-2172-479d-86ad-c20c8ee7ff3b-3.woff") format("woff"), url("../fonts/285ba495-2172-479d-86ad-c20c8ee7ff3b-1.ttf") format("truetype"), url("../fonts/285ba495-2172-479d-86ad-c20c8ee7ff3b-4.svg") format("svg");
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: "Agenda Medium";
    src: url("../fonts/543fc3e6-61ab-4d77-906e-097c754742dc-2.eot");
    src: url("../fonts/543fc3e6-61ab-4d77-906e-097c754742dc-2.eot?") format("embedded-opentype"), url("../fonts/543fc3e6-61ab-4d77-906e-097c754742dc-3.woff") format("woff"), url("../fonts/543fc3e6-61ab-4d77-906e-097c754742dc-1.ttf") format("truetype"), url("../fonts/543fc3e6-61ab-4d77-906e-097c754742dc-4.svg") format("svg");
    font-style: normal;
    font-weight: 600;
}

@font-face {
    font-family: "Agenda Medium";
    src: url("../fonts/e568a5d2-1866-479b-9bf1-6b6c95b35884-2.eot");
    src: url("../fonts/e568a5d2-1866-479b-9bf1-6b6c95b35884-2.eot?") format("embedded-opentype"), url("../fonts/e568a5d2-1866-479b-9bf1-6b6c95b35884-3.woff") format("woff"), url("../fonts/e568a5d2-1866-479b-9bf1-6b6c95b35884-1.ttf") format("truetype"), url("../fonts/e568a5d2-1866-479b-9bf1-6b6c95b35884-4.svg") format("svg");
    font-style: italic;
    font-weight: 600;
}

@font-face {
    font-family: "Agenda Light";
    src: url("../fonts/964e1b98-643b-468f-bdc2-2fb35949dd02-2.eot");
    src: url("../fonts/964e1b98-643b-468f-bdc2-2fb35949dd02-2.eot?") format("embedded-opentype"), url("../fonts/964e1b98-643b-468f-bdc2-2fb35949dd02-3.woff") format("woff"), url("../fonts/964e1b98-643b-468f-bdc2-2fb35949dd02-1.ttf") format("truetype"), url("../fonts/964e1b98-643b-468f-bdc2-2fb35949dd02-4.svg") format("svg");
    font-style: normal;
    font-weight: 600;
}

@font-face {
    font-family: "Franklin Gothic Book";
    src: url("../fonts/03dda592-ab39-4f26-9535-fdea194854cf.eot?#iefix");
    src: url("../fonts/03dda592-ab39-4f26-9535-fdea194854cf.eot?#iefix") format("eot"), url("../fonts/84083fa0-6a9d-40f7-806f-63add8cde800.woff2") format("woff2"), url("../fonts/41c174b1-68c1-41b7-a19f-5ec80929b115.woff") format("woff"), url("../fonts/06d99598-12aa-461b-b57e-81a137da1b9f.ttf") format("truetype"), url("../fonts/427cca04-e0ee-4395-a5d3-b7d45feeff62.svg#427cca04-e0ee-4395-a5d3-b7d45feeff62") format("svg");
}

@font-face {
    font-family: "Franklin Gothic Demi";
    src: url("../fonts/498d8f5c-6dfe-4a07-9fdf-321bcc11909c.eot?#iefix");
    src: url("../fonts/498d8f5c-6dfe-4a07-9fdf-321bcc11909c.eot?#iefix") format("eot"), url("../fonts/ea7dcf5e-c101-46d3-a553-bb46f78ca7e4.woff2") format("woff2"), url("../fonts/08fe22ab-0517-4203-bcc9-1ba2ca45f40c.woff") format("woff"), url("../fonts/6adc2e3a-d0c4-4c48-ba68-91b4107515d7.ttf") format("truetype"), url("../fonts/426ce955-d5bd-4a77-b077-402088f77e65.svg#426ce955-d5bd-4a77-b077-402088f77e65") format("svg");
}

@font-face {
    font-family: "Lyon Text Web";
    src: url("../fonts/LyonTextWeb-Regular.eot");
    src: url("../fonts/LyonTextWeb-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/LyonTextWeb-Regular.woff2") format("woff2"), url("../fonts/LyonTextWeb-Regular.woff") format("woff"), url("../fonts/LyonTextWeb-Regular.ttf") format("truetype"), url("../fonts/LyonTextWeb-Regular.svg#LyonTextWeb-Regular") format("svg");
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
}

@font-face {
    font-family: "Lyon Text Web";
    src: url("../fonts/LyonTextWeb-RegularItalic.eot");
    src: url("../fonts/LyonTextWeb-RegularItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/LyonTextWeb-RegularItalic.woff2") format("woff2"), url("../fonts/LyonTextWeb-RegularItalic.woff") format("woff"), url("../fonts/LyonTextWeb-RegularItalic.ttf") format("truetype"), url("../fonts/LyonTextWeb-RegularItalic.svg#LyonTextWeb-RegularItalic") format("svg");
    font-weight: 400;
    font-style: italic;
    font-stretch: normal;
}

@font-face {
    font-family: "Lyon Text Web";
    src: url("../fonts/LyonTextWeb-Semibold.eot");
    src: url("../fonts/LyonTextWeb-Semibold.eot?#iefix") format("embedded-opentype"), url("../fonts/LyonTextWeb-Semibold.woff2") format("woff2"), url("../fonts/LyonTextWeb-Semibold.woff") format("woff"), url("../fonts/LyonTextWeb-Semibold.ttf") format("truetype"), url("../fonts/LyonTextWeb-Semibold.svg#LyonTextWeb-Semibold") format("svg");
    font-weight: 600;
    font-style: normal;
    font-stretch: normal;
}

@font-face {
    font-family: "Lyon Text Web";
    src: url("../fonts/LyonTextWeb-SemiboldItalic.eot");
    src: url("../fonts/LyonTextWeb-SemiboldItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/LyonTextWeb-SemiboldItalic.woff2") format("woff2"), url("../fonts/LyonTextWeb-SemiboldItalic.woff") format("woff"), url("../fonts/LyonTextWeb-SemiboldItalic.ttf") format("truetype"), url("../fonts/LyonTextWeb-SemiboldItalic.svg#LyonTextWeb-SemiboldItalic") format("svg");
    font-weight: 600;
    font-style: italic;
    font-stretch: normal;
}

@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"), url("../fonts/tiaa-icon-font.svg") format("svg");
    font-style: normal;
    font-weight: 600;
}

html {
    background-color: #000;
    margin: 0;
}
/*
TIAA light blue: #00ceff;
TIAA yellow: #f9e038;
TIAA gray: #53565a;
TIAA light gray: #ededee;
*/
body {
    background: #00ceff;
    font-family: "Lyon Text Web", Georgia, "Times New Roman", Times, serif;
    color: #000;
}
h1, h2, h3, h4, h5, h6 {
    font-family: "Agenda Bold", Helvetica, Arial, sans-serif;
    letter-spacing: -0.5px;
    line-height: 1;
}

h1 {
    font-size: 5rem;
}
hr { border-color: #ccc; }

a, a:visited {
    color: #007AC2;
    font-weight: bold;
}
a:hover, a:visited:hover {
    color: #4ca2d4;
    text-decoration: none;
}

[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: #000;
    height: 48px;
    padding: 12px 0;
    text-align: center;
}
#logo-container img {
    height: 22px;
    width: 75px;
}
#intro-content {
    margin-bottom: 2em;
    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-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-color: transparent;
    background: url("../img/window-blank.png") top center no-repeat;
    background-size: 100px 100px;
    border: none;
    font-family: "Agenda Bold",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 .icon {
    visibility: visible;
}

/* modal */
.modal-content {
    border-radius: 0;
}
.modal-backdrop {
    background-color: #00ceff;
}
.pictogram-modal a {
    font-family: "Agenda Bold", Helvetica, Arial, sans-serif;
    font-size: 108%;
    font-weight: bold;
}
.pictogram-modal .modal-dialog {
    width: 75%;
    max-width: 992px;
}
.modal-header {
    background: #f9e038 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-size: 2em;
    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: "Agenda Medium",Arial,sans-serif;
    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-FSA.png?version=2020") center top no-repeat;
    background-size: 114px 70px;
    border-bottom: 1px solid #000;
    height: 120px;
    margin-bottom: 1em;
    padding-bottom: 1em;
}
.pictogram-modal-plan-header.hsa { background-image: url("../img/icon-HSA.png?version=2020"); }
.pictogram-modal-plan-header.fsa { background-image: url("../img/icon-FSA.png?version=2020"); }
.pictogram-modal-plan-header.rhsp { background-image: url("../img/icon-RHSP.png?version=2020"); }

#button-options, #pictogram-options-modal .modal-header { background-image: url("../img/window-options.png"); }
#button-eligibility, #pictogram-eligibility-modal .modal-header { background-image: url("../img/window-eligibility.png"); }
#button-contributions, #pictogram-contributions-modal .modal-header { background-image: url("../img/window-contributions.png"); }
#button-taxes, #pictogram-taxes-modal .modal-header { background-image: url("../img/window-taxes.png"); }
#button-expenses, #pictogram-expenses-modal .modal-header { background-image: url("../img/window-expenses.png"); }
#button-accessing, #pictogram-access-modal .modal-header { background-image: url("../img/window-access.png"); }
#button-investment, #pictogram-investment-modal .modal-header { background-image: url("../img/window-investment.png"); }
#button-unused, #pictogram-unused-modal .modal-header { background-image: url("../img/window-unused.png"); }
#button-learn, #pictogram-learn-modal .modal-header { background-image: url("../img/window-learn.png"); }
#button-remember, #pictogram-remember-modal .modal-header { background-image: url("../img/window-remember.png"); }
#button-start, #pictogram-start-modal .modal-header { background-image: url("../img/window-start.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: 64px 64px;
        background-position: center left;
        font-size: 20px;
        height: 64px;
        padding: 0 12px 12px 72px;
        text-align: left;
    }
    .benefit-icon-button .icon {
        font-size: 16px;
    }
}

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

@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-color: transparent;
        background: url("../img/window-blank.png") top center no-repeat;
        background-size: 100px 100px;
        border: none;
        font-family: "Agenda Bold",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: inherit;
    }
    .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;
    }
}