@charset "UTF-8";

/* CSS Document */


/* 
Light grey: #E6E6E6
Medium grey: #AAAAAA
Dark grey: #646464
Light green: #CBE3AE
Medium green: #63962F
Dark green: #4C7329
Light purple: #C3A9CF
Medium purple: #9E3D96
Dark purple: #49134C
Light orange: #FED09E
Medium orange: #CD7107
Dark orange: #72410F
Light blue: #92D7E7
Medium blue: #008FAC
Dark blue: #006372

Light: 300
Regular: 400
Bold: 700
Extra bold: 800

*/


/* TYPOGRAPHY */

h1 {
    font-weight: 400;
    font-size: 44px;
    margin-bottom: 0px;
    margin-top: 0px;
}

h2 {
    font-weight: 400;
    font-size: 34px;
    margin-top: 0px;
}

h3 {
    font-weight: 400;
    font-size: 28px;
    margin-top: 0px;
}

h4 {
    font-weight: 300;
    font-size: 22px;
    margin-top: 0px;
    line-height: 1.4;
}

h5 {
    font-weight: 400;
    font-size: 18px;
    margin-top: 0px;
    line-height: 1.4;
}

h6 {
    font-weight: 700;
    font-size: 14px;
    margin-top: 0px;
}

.deck {
    font-weight: 400;
    font-size: 18px;
}

p {
    font-weight: 400;
    font-size: 14px;
    line-height: 1.6;
}

.footnote {
    font-weight: 400;
    font-size: 12px;
}

a {
    font-weight: 400;
    text-decoration: underline;
    color: #008FAC;
    text-decoration-skip-ink: none;
}

a.purple {
    font-weight: 400;
    text-decoration: underline;
    color: #9E3D96;
}

a.white {
    font-weight: 400;
    text-decoration: underline;
    color: #ffffff;
}

.bold {
    font-weight: 700;
}

.bolditalic {
    font-weight: 700;
    font-style: italic;
}

.rev-text {
    color: white;
}

body {
    background-color: #E6E6E6;
    font-family: 'Open Sans', sans-serif;
    color: #646464;
}

.main-white-container .deck {
    margin-bottom: 30px;
}

.main-white-container h3 {
    margin-bottom: 40px;
    padding-top: 15px;
}

.main-white-container h4 {
    margin-bottom: 20px;
}

.padding-right-100 {
    padding-right: 100px;
}

h4.panel-title {
    margin-bottom: 0px;
}

.note {
    font-size: 12px;
}

ul {
    padding-inline-start: 20px;
}


/*********** UNIVERSAL ***********/

.main-section {
    margin-top: 100px;
}

.navbar-default {
    background-color: #ffffff;
    padding-top: 25px;
    padding-bottom: 25px;
    border: none;
}

.navbar-brand > img {
    height: 100%;
}

.navbar-brand {
    padding-top: 5px;
    padding-bottom: 5px;
}

#footer img {
    width: 130px;
}

.navbar-default .navbar-nav > li > a {
    color: #646464;
    text-decoration: none;
    text-transform: uppercase;
}

@media (max-width: 767px) {
    .triangle {
        display: none;
    }
    
#about .offset-callout {
    margin-right: 0px !important;
    }
    
    
#Chris .persona-breakdown-image, #Mary .persona-breakdown-image {
    background-position: center top!important;
    margin-left: -15px!important;
    margin-right: -15px;
    margin-top: -15px;
}
    
#Mary .persona-breakdown-image {
    margin-bottom:30px;
}
    
#Chris .callout.purple {
      margin-right: 0px!important;  
}
    
}

@media (min-width: 768px) {
    .navbar-default .navbar-nav > li > a {
        float: left;
    }
    .triangle {
        position: relative;
        top: 14px;
    }
    .nav-toggle {
        text-decoration: none;
        position: relative;
    }
    .nav-toggle:before {
        content: '';
        position: absolute;
        top: 8px;
        left: 15px;
        width: 0%;
        transition: 0.4s;
    }
    .joining .nav-toggle:before {
        border-bottom: 3px solid #49134C;
    }
    .managing .nav-toggle:before {
        border-bottom: 3px solid #008FAC;
    }
    .retiring .nav-toggle:before {
        border-bottom: 3px solid #63962F;
    }
    .leaving .nav-toggle:before {
        border-bottom: 3px solid #CD7107;
    }
    .nav-toggle:hover:before {
        width: 20px;
    }
    .active .nav-toggle:before {
        width: 20px;
    }
    .navbar-default .navbar-nav > .active > a,
    .navbar-default .navbar-nav > .active > a:hover,
    .navbar-default .navbar-nav > .active > a:focus {
        background-color: white;
        text-decoration: none;
    }
    .main-nav > li > a:hover,
    .main-nav > li > a:focus,
    {
        background-color: white;
        text-decoration: none;
    }
    .main-nav > li > a {
        text-decoration: none;
        border-radius: 0px;
        -o-transition: .3s;
        -ms-transition: .3s;
        -moz-transition: .3s;
        -webkit-transition: .3s;
    }
    .main-nav > li > a {
        padding: 5px 20px;
        color: #646464
    }
}

.main-nav {
    border: none;
    box-shadow: none;
    border-radius: 0px;
    -webkit-box-shadow: none;
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
    background-color: white;
}

.panel-title > a:before {
    float: right !important;
    font-family: "Font Awesome 5 Pro";
    content: "\f068";
    padding-right: 5px;
}

.panel-title > a.collapsed:before {
    float: right !important;
    content: "\f067";
}

.panel-title > a:hover,
.panel-title > a:active,
.panel-title > a:focus {
    text-decoration: none;
}

.panel-default > .panel-heading {
    padding: 40px 30px;
    border: 0px;
    border-radius: 0px;
}

.panel-default > .panel-heading a {
    text-decoration: none;
    font-size: 19px;
}

.panel-group .panel {
    border-radius: 0px;
    border: 0px;
    margin-bottom: 20px;
}

.panel-default > .panel-heading + .panel-collapse > .panel-body {
    background-color: #E6E6E6;
    border-top: 0px;
    border: 0px;
}

.callout {
    padding: 30px;
    border-top: 12px solid;
    margin-right: 0px;
    margin-left: 0px;
}

.callout h4 {
    margin-bottom: 20px;
}

.clearfix {
    clear: both;
}

.main-white-container .table > tbody > tr > td {
    border-top: 1px solid white;
}

.no-border-top {
    border-top: none!important;
}

.nomarginbottom {
    margin-bottom: 0px;
}

.margin-bottom-45 {
    margin-bottom: 45px!important;
}

.margin-bottom-30 {
    margin-bottom: 30px;
}

.margin-bottom-20 {
    margin-bottom: 20px;
}

.margin-bottom-10 {
    margin-bottom: 10px;
}

.margin-top-10 {
    margin-top: 10px!important;
}

.margin-top-20 {
    margin-top: 20px!important;
}

.margin-top-50 {
    margin-top: 50px!important;
}

.btn {
    border: 1px solid black;
    border-radius: 0px;
    -o-transition: .3s;
    -ms-transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
    color: black;
    text-decoration: none;
}

.btn:hover {
    color: white;
    background-color: black;
}

.arrow-btn {
    font-size: 18px;
    padding: 10px 20px;
    margin-top: 20px;
}

.arrow-btn i {
    margin-left: 5px;
}

.callout.magenta {
    background-color: #9E3D96;
    color: white;
    border-color: #49134C;
    margin-top: 20px;
}

.callout.magenta h4 {
    color: white!important;
}

.callout.blue {
    background-color: #92D7E7;
    color: #006372;
    border-color: #006372;
    margin-top: 20px;
}

.callout.blue h4 {
    color: #008FAC!important;
}

.callout.orange {
    background-color: #FED09E;
    color: #72410F;
    border-color: #CD7107;
    margin-top: 20px;
}

.callout.orange h4 {
    color: #72410F!important;
}

.orange.callout a {
    color: #CD7107;
}

.callout.purple {
    background-color: #C3A9CF;
    color: #49134C;
    border-color: #49134C;
    margin-top: 20px;
}

.callout.purple h4 {
    color: #49134C!important;
}

.callout.green {
    background-color: #CBE3AE;
    color: #4C7329;
    border-color: #4C7329;
    margin-top: 20px;
}

.spaceafterbullets {
    margin-bottom: 10px;
}

ul ul {
    list-style-type: disc;
    margin-left: 30px;
}

.close {
    opacity: 1;
}

hr {
    border-top: 1px solid #ffffff;
}

#hero {
    margin-bottom: 50px;
    height: 350px;
}

#hero .row {
    position: relative;
}

.hero-img-container {
    background-color: white;
    width: 100%;
    position: absolute;
    height: 180px;
}

.hero-img {
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    width: 70%;
}

.main-white-container {
    background-color: white;
    padding: 100px;
}

@media (min-width: 1025px) {
    #what-happens-if-you .body-image,
    #choosing-your-investments .body-image,
    #choosing-a-beneficiary .body-image,
    #options-for-dc-account-balance .body-image,
    #leaving .body-image,
    #sources-of-retirement-income .body-image,
    #planning-for-retirement .body-image,
    #yearly-to-dos .body-image,
    #eligibility .body-image,
    #contributions .body-image,
    #about .body-image,
    #how-to-prepare .body-image {
        margin-right: -100px;
    }
    #choosing-your-investments .body-image.two,
    #investing-101 .body-image,
    #how-to-prepare .body-image.two,
    #yearly-to-dos .body-image.two {
        margin-left: -100px;
    }
    
}

@media (max-width: 1024px) {
    #hero h1 {
        font-size: 38px;
    }
    #contributions .body-image {
        margin-right: 0px;
        margin-left: -65px;
    }
    .main-white-container {
        padding: 50px;
    }
    #what-happens-if-you .body-image,
    #choosing-your-investments .body-image,
    #choosing-a-beneficiary .body-image,
    #options-for-dc-account-balance .body-image,
    #leaving .body-image,
    #sources-of-retirement-income .body-image,
    #planning-for-retirement .body-image,
    #yearly-to-dos .body-image,
    #eligibility .body-image,
    #about .body-image,
    #how-to-prepare .body-image {
        margin-right: -50px;
    }
    #choosing-your-investments .body-image.two,
    #investing-101 .body-image,
    #how-to-prepare .body-image.two,
    #yearly-to-dos .body-image.two {
        margin-left: -50px;
    }
    #contributions .body-image {
        margin-right: -50px;
    }
    .affix {
        top: 100px;
        left: 0!important;
        width: 100%!important;
    }
}

@media (min-width: 1200px) {
    .nav-tabs > li > a::after {
        bottom: -1px;
    }
    #joining .nav-tabs {
        border-bottom: 2px solid #49134C;
    }
    #managing .nav-tabs {
        border-bottom: 2px solid #006372;
    }
    #retiring .nav-tabs {
        border-bottom: 2px solid #4C7329;
    }
    #leaving .nav-tabs {
        border-bottom: 2px solid #72410F;
    }
    .tab-title {
        padding-left: 120px;
        margin-bottom: 60px;
    }
    .tab-title img {
        width: 100px;
        margin-top: -50px;
    }
    .affix {
        top: 100px;
        width: 1140px;
    }
    #contributions .offset-callout {
        margin-right: -100px;
        position: relative;
        z-index: 1;
        top: 10px;
    }
}

@media (max-width: 1199px) {
    .nav-tabs {
        overflow-x: auto;
        overflow-y: hidden;
        display: -webkit-box;
        display: -moz-box;
        white-space: nowrap;
    }
    .nav-tabs > li {
        float: none;
        display: inline-block;
    }
    .last-nav {
        padding-right: 30px;
    }
    .nav-tabs > li > a::after {
        bottom: 1px;
    }
    .nav-tabs {
        border-bottom: 0px;
    }
    #joining .nav-tabs {
        border-bottom: 0px solid #49134C;
    }
    #managing .nav-tabs {
        border-bottom: 0px solid #006372;
    }
    #retiring .nav-tabs {
        border-bottom: 0px solid #4C7329;
    }
    #leaving .nav-tabs {
        border-bottom: 0px solid #72410F;
    }
    .tab-title {
        padding-left: 90px;
    }
    .tab-title img {
        width: 70px;
        margin-top: -35px;
    }
    h2 {}
    .affix {
        top: 100px;
        width: 940px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .callout-box h2 {
        font-size: 24px;
    }
}

@media (max-width: 991px) {
    .nav-callouts .joining,
    .nav-callouts .managing {
        margin-bottom: 150px;
    }
    #footer .retiring,
    #footer .leaving {
        margin-top: 20px;
        margin-bottom: 20px;
    }
    #footer .logo {
        margin-bottom: 20px;
    }
}

@media (min-width: 768px) {
    .hero-callout {
        padding: 60px;
        ;
    }
    .nav-callouts {
        margin-top: 160px;
    }
    .panel-body {
        padding: 20px;
    }
    #persona-accordion .panel-body {
        padding:50px;
    }
    .callout-icon-container .content {
        display: inline-block;
        position: relative;
        padding-left: 70px;
        vertical-align: middle;
    }
    .callout-icon-container img {
        width: 60px;
        position: absolute;
        left: 0;
    }
    .hero-img {
        padding-bottom: 350px;
    }
    #ChrisModal .body-image {
        padding-bottom: 400px;
        margin-left: -50px;
        margin-bottom: -80px;
        margin-top: -50px;
    }
    #MaryModal .body-image {
        padding-bottom: 400px;
        margin-left: -50px;
        margin-bottom: 50px;
        margin-top: -50px;
    }
    .modal-content {
        padding: 50px;
    }
    .managing-persona .body-image {
        background-size: cover;
        background-position: center;
        float: none;
        display: table-cell;
        vertical-align: top;
    }
    .managing-persona .content {
        float: none;
        display: table-cell;
        vertical-align: top;
        padding: 50px;
    }
    .is-table {
        display: table;
    }
}

@media (min-width: 768px) and @media (max-width: 1023px) {
    .nav-callouts .joining,
    .nav-callouts .managing {
        margin-bottom: 150px;
    }
}

@media (max-width: 767px) {
    #hero {
        height: auto;
    }
    .nav-callouts {
        margin-top: 100px;
    }
    .nav-callouts .joining,
    .nav-callouts .managing,
    .nav-callouts .retiring {
        margin-bottom: 150px;
    }
    .hero-img-container {
        position: relative;
        height: 120px;
    }
    .hero-img {
        width: 100%;
    }
    .hero-callout {
        padding: 30px;
    }
    #about .panel-body h4 {
        font-size: 16px;
    }
    .panel-body.table-panel {
        padding: 20px 0px 0px 0px;
    }
    .panel-body.table-panel .table > tbody > tr > td {
        padding: 10px;
    }
    .panel-body.table-panel .callout.magenta {
        margin: 20px;
        padding: 15px;
    }
    .callout-icon-container .content {
        display: block;
        position: unset;
        padding-left: 0px;
        vertical-align: middle;
    }
    .callout-icon-container img {
        width: 60px;
        position: unset;
        left: 0;
        margin-bottom: 10px;
    }
    .main-white-container {
        padding: 30px;
    }
    h2 {
        font-size: 30px;
    }
    #what-happens-if-you .body-image,
    #choosing-your-investments .body-image,
    #choosing-a-beneficiary .body-image,
    #options-for-dc-account-balance .body-image,
    #leaving .body-image,
    #sources-of-retirement-income .body-image,
    #planning-for-retirement .body-image,
    #yearly-to-dos .body-image,
    #eligibility .body-image,
    #about .body-image,
    #how-to-prepare .body-image {
        margin-right: -30px;
    }
    #choosing-your-investments .body-image.two,
    #investing-101 .body-image,
    #how-to-prepare .body-image.two,
    #yearly-to-dos .body-image.two {
        margin-left: -30px;
    }
    #eligibility .body-image,
    #choosing-a-beneficiary .body-image,
    #investing-101 .body-image,
    #sources-of-retirement-income .body-image,
    #planning-for-retirement .body-image,
    #how-to-prepare .body-image.two,
    #options-for-dc-account-balance .body-image {
        margin-top: 30px;
    }
    #contributions .body-image {
        margin-right: 0px;
        margin-left: -30px;
        margin-bottom:30px;
    }
    #choosing-your-investments .body-image,
    #investing-101 .body-image,
    #yearly-to-dos .body-image.two,
    #how-to-prepare .offset-callout,
    .modal-content .callout.purple {
        margin-bottom: 30px;
    }
    #choosing-your-investments .offset-callout {
        height: auto!important;
    }
    #choosing-your-investments .callout-container {
        margin-top: 200px;
    }
    #investing-101 .body-image {
        position: relative!important;
    }
    #investing-101 .offset-callout {
        margin-top: 10px!important;
    }
    #options-for-dc-account-balance .offset-callout {
        margin-right: 0px!important;
        top: 0px!important;
        margin-bottom: 20px!important;
    }
    .hero-img {
        padding-bottom: 200px;
    }
    .modal-content {
        padding: 30px;
    }
    #ChrisModal .body-image {
        padding-bottom: 250px;
        margin-left: -30px;
        margin-bottom: 30px;
        margin-top: -30px;
        margin-right: -30px;
    }
    #MaryModal .body-image {
        padding-bottom: 250px;
        margin-left: -30px;
        margin-bottom: 30px;
        margin-top: -30px;
        margin-right: -30px;
    }
    .is-table {
        display: block;
    }
    .managing-persona .body-image {
        background-size: cover;
        background-position: center;
        float: none;
        vertical-align: top;
        padding-bottom: 300px;
        margin-left: 15px;
        margin-right: 15px;
    }
    .managing-persona .content {
        display: block;
        padding: 30px;
    }
    #footer .retiring {
        clear: left;
    }
    #footer .copyright {
        text-align: center;
    }
    
    .table-container {
        overflow-x: scroll; 
    }
}


/*********** HOMEPAGE ***********/

.hero-callout {
    background-color: #008FAC;
    color: white;
    margin-top: 30px;
}

.hero-callout a {
    font-weight: 700;
    color: white;
}

.hero-callout .btn {
    border-color:#ffffff;
}

.hero-callout .btn:hover {
    background-color:#ffffff;
    color:#0098B3;
}

.hero-callout hr {
    width: 40%;
}

#homepage h1 {
    margin-bottom: 30px;
}

#video h1 {
    color: #008FAC;
    margin-top: 50px;
}

#video {
    outline: none;
    padding-right: 30px;
    padding-left: 30px;
}

#homepage .hero-img {
    background-image: url(/images/home-hero.jpg);
    background-position: center top;
}

.callout-box .btn {
    border-radius: 0px;
    -o-transition: .3s;
    -ms-transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
}

.callout-box {
    background-color: white;
    padding: 30px;
    text-align: center;
    width: 80%;
    float: right;
    margin-top: -110px;
}

.menu-padding {
    padding-top: 40px;
}

.callout-box h2 {
    margin-bottom: 20px;
}

.nav-callouts {
    margin-bottom: 50px;
}

.nav-callouts .callout-bg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-bottom: 340px;
}

.nav-callouts .joining .callout-bg {
    background-image: url(/images/home-joining.jpg);
}

.nav-callouts .leaving .callout-bg {
    background-image: url(/images/home-leaving.jpg);
}

.nav-callouts .managing .callout-bg {
    background-image: url(/images/home-managing.jpg);
}

.nav-callouts .retiring .callout-bg {
    background-image: url(/images/home-retiring.jpg);
}

#homepage .divider hr {
    border: 1px solid #AAAAAA;
}

.video-container {
    background-color: white;
    margin-top: 140px;
    padding-bottom: 100px;
}

.vimeo-video {
    margin-top: -100px;
    border: 1px solid #AAAAAA;
    background-color: white;
}

.joining .callout-box {
    border-top: 13px solid #43265B;
    color: #43265B;
}

.joining .callout-box .btn {
    border: 1px solid #43265B;
    color: #43265B;
}

.joining .callout-box .btn:hover {
    background-color: #43265B;
    color: white;
}

.managing .callout-box {
    border-top: 13px solid #0098B3;
    color: #0098B3;
}

.managing .callout-box .btn {
    border: 1px solid #0098B3;
    color: #0098B3;
}

.managing .callout-box .btn:hover {
    background-color: #0098B3;
    color: white;
}

.retiring .callout-box {
    border-top: 13px solid #63962F;
    color: #63962F;
}

.retiring .callout-box .btn {
    border: 1px solid #63962F;
    color: #63962F;
}

.retiring .callout-box .btn:hover {
    background-color: #63962F;
    color: white;
}

.leaving .callout-box {
    border-top: 13px solid #CD7107;
    color: #CD7107;
}

.leaving .callout-box .btn {
    border: 1px solid #CD7107;
    color: #CD7107;
}

.leaving .callout-box .btn:hover {
    background-color: #CD7107;
    color: white;
}


/*********** ABOUT ***********/

#about .hero-img {
    background-image: url(/images/home-hero.jpg);
    background-position: center top;
}

#about .deck,
#about h2,
#about h3,
#about h4 {
    color: #49134C;
}

#about .panel-body h4 {
    color: #9E3D96;
}

#about .panel-default > .panel-heading {
    background-color: #49134C;
}

#about .panel-default > .panel-heading a {
    color: #ffffff;
}

.table > tbody > tr > th {
    border-top: 0px;
}

.table > tbody > tr > td {
    padding: 20px;
}

.table > tbody > tr > td p {
    margin-bottom: 0px;
}

#about .body-image {
    background-image: url(/images/about-body-image.jpg);
    background-size: cover;
    padding-bottom: 430px;
    background-position: center;
}

#about .main-white-container {
    margin-top: 30px;
}

.icon-list {
    margin-bottom: 20px;
}

.icon-list.first {
    margin-top: 50px;
}

.icon-paragraph {
    display: inline-block;
    position: relative;
    padding-left: 80px;
    vertical-align: middle;
}

.icon-paragraph img {
    width: 60px;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -30px;
}

.icon-heading {
    display: inline-block;
    position: relative;
    padding-left: 80px;
    vertical-align: middle;
}

.icon-heading img {
    width: 60px;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -30px;
}

.tab-title {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    margin-bottom: 60px;
}

.tab-title img {
    position: absolute;
    left: 0;
    top: 50%;
}


/*********** JOINING ***********/

#joining .hero-img {
    background-image: url(/images/joining-hero.jpg);
    background-position: center center;
}

#joining .nav-tabs {
    background-color: #49134C;
}

#eligibility .body-image {
    background-image: url(/images/joining-eligibility-body-image.jpg);
    background-size: cover;
    background-position: center right;
    padding-bottom: 350px;
}

#contributions .body-image {
    background-image: url(/images/joining-contributions-body-image.jpg);
    background-size: cover;
    background-position: center right;
    padding-bottom: 350px;
}

#choosing-your-investments .body-image {
    background-image: url(/images/joining-investments-body-image.jpg);
    background-size: cover;
    background-position: center right;
    padding-bottom: 200px;
}

#choosing-your-investments .body-image.two {
    background-image: url(/images/joining-investments-body-image2.jpg);
    background-size: cover;
    background-position: center right;
    padding-bottom: 300px;
    position: absolute;
    width: 100%;
}

#choosing-a-beneficiary .body-image {
    background-image: url(/images/joining-beneficiary-body-image.jpg);
    background-size: cover;
    background-position: center right;
    padding-bottom: 350px;
}

#choosing-your-investments .offset-callout {
    height: 300px;
    margin-top: 40px;
}

.how-it-works-callout {
    background-color: #92D7E7;
    padding: 30px 20px 30px 50px;
    color: #006372;
    margin-bottom: 20px;
    display: inline-block;
    position: relative;
    padding-left: 55px;
    vertical-align: middle;
}

.how-it-works-callout img {
    width: 80px;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -40px;
    margin-left: -40px;
}

.how-it-works-callout p {
    margin-bottom: 0px;
}

#joining h2,
#joining h4 {
    color: #9E3D96
}

#joining .deck {
    color: #49134C;
}

.modal-content h1 {
    color: #006372;
    margin-bottom: 30px;
}

.modal-content .deck {
    color: #008FAC;
}

.modal-content th h5 {
    color: #006372;
    margin-bottom: 0px;
}

.modal-content td h5 {
    margin-bottom: 0px;
}

.modal-content .table > tbody > tr > td {
    border-top: 1px solid #ffffff;
}

.modal-content .callout.purple {
    margin-top: 0px;
}

.modal-content .graph {
    width: 100%;
}

.modal-content .square {
    width: 20px;
}

.modal-content .square img {
    width: 20px;
}

.modal-content .total h5 {
    font-weight: 700;
}

#ChrisModal .body-image {
    background-image: url(/images/Chris-lg.jpg);
    background-size: cover;
    background-position: center;
    position: relative;
}

#MaryModal .body-image {
    background-image: url(/images/Mary-lg.jpg);
    background-size: cover;
    background-position: center;
    position: relative;
}

.chris .persona-image {
    background-image: url(/images/Chris.jpg);
}

.mary .persona-image {
    background-image: url(/images/Mary.jpg);
}

.scroll-cta {
    font-weight: 700;
    color: #008FAC;
}

#joining .arrow-btn {
    color: #49134C;
    border-color: #49134C;
}

#joining .arrow-btn:hover {
    background-color: #49134C;
    color: white;
}

#joining .hero-callout {
    background-color: #9E3D96;
}

#joining .panel-default > .panel-heading {
    background-color: #49134C;
}

#joining .panel-default > .panel-heading a {
    color: white;
}

#joining h5 {
    color: #9E3D96;
}

.blue.modal-button {
    background-color: #92D7E7;
    color: #006372;
}

.blue.modal-button:hover {
    background-color: #008FAC;
}

.blue.modal-button h4 {
    color: #006372!important;
}

.panel-heading p {
    color:#ffffff;
    margin-bottom:0px;
    margin-top:5px;
}

.per-pay-contributions {
    background-color:#ffffff;
}

.per-pay-contributions th h5 {
    color:#49134C;
    text-align:center;
    font-weight:100;
}

td.m-border-top-20 {
    border-top:8px solid rgba(158,61,150,0.2)!important;
}

td.m-border-top-40 {
    border-top:8px solid rgba(158,61,150,0.4)!important;    
}

td.m-border-top-50 {
    border-top:8px solid rgba(158,61,150,0.5)!important;    
}

td.m-border-top-60 {
    border-top:8px solid rgba(158,61,150,0.6)!important;    
}

td.m-border-top-80 {
    border-top:8px solid rgba(158,61,150,0.8)!important;    
}

td.m-border-top-100 {
    border-top:8px solid rgb(158,61,150)!important;    
}

td.m-fill-10 {
    background-color: rgba(195,169,207,0.1)!important;
}

td.m-fill-20 {
    background-color: rgba(195,169,207,0.2)!important;
}

td.m-fill-30 {
    background-color: rgba(195,169,207,0.3)!important;
}

td.m-fill-40 {
    background-color: rgba(195,169,207,0.4)!important;
}

td.m-fill-50 {
    background-color: rgba(195,169,207,0.5)!important;
}

td.m-lr-border {
    border-left: 4px solid rgb(223,223,238);
    border-right:2px solid rgb(217,201,226);
}

.column-span-header.dm {
    background-color:#9D4194;
}

#joining .per-pay-contributions .column-span-header h5 {
    color:#ffffff!important;
    font-weight:600!important;
    margin-bottom: 0px;
}

.column-span-header {
    vertical-align: middle!important;
    padding: 20px!important;
    background-color: #D5D5D5;
}

a.breakdown, .breakdown .far {
    color:#9E3D96!important;
}

.persona-bio {
    
}

.persona-bio h1, .persona-bio .bio {
    color:#006372; 
}

.persona-bio .bio {
    font-size: 18px;
    margin-top:20px;
    margin-bottom:30px;
}

.persona-bio .bio td {
    padding-bottom:20px;
    vertical-align:top;
}

.persona-bio .deck {
    color:#646464!important;
}

.persona-bio li {
    font-size:18px;
    font-weight:600;
}

.persona-bio ol {
    padding-left: 20px;
}

#Chris .persona-breakdown-image {
    background-image: url(/images/Chris-lg.jpg);
    background-size: cover;
    background-position: center;
    padding-bottom: 350px;
    margin-left: -50px;
}

#Chris .callout.purple {
    margin-top: -100px;
    margin-right: -50px;
}

#Mary .persona-breakdown-image {
    background-image: url(/images/Mary-lg.jpg);
    background-size: cover;
    background-position: center;
    padding-bottom: 350px;
    margin-left: -50px;
}

#contributions .callout.purple {
    margin-bottom:30px;
}

/*********** MANAGING ********/

#managing .hero-img {
    background-image: url(/images/managing-hero.jpg);
    background-position: center center;
}

#managing .nav-tabs {
    background-color: #006372;
}

#managing .nav-tabs > li > a::after {
    background: #92D7E7;
}

#managing .hero-callout {
    background-color: #92D7E7;
}

#managing .main-white-container h2 {
    color: #008FAC;
}

#managing .deck {
    color: #006372;
}

#managing h4 {
    color: #006372;
}

#yearly-to-dos h4 {
    display: inline-block;
    position: relative;
    padding-left: 55px;
    vertical-align: middle;
}

#managing h5 {
    color: #008FAC;
}

#managing .arrow-btn {
    color: #006372;
    border-color: #006372;
}

#managing .arrow-btn:hover {
    background-color: #006372;
    color: white;
}

.purple.modal-button {
    background-color: #C3A9CF;
    color: #49134C;
}

.purple.modal-button:hover {
    background-color: #9E3D96;
}

.purple.modal-button h4 {
    color: #49134C!important;
    margin-bottom: 10px;
}

.bucket {
    padding: 20px;
    width: 60%;
}

.persona-image {
    background-size: cover;
    background-position: center;
    width: 30%;
}

.john .persona-image {
    background-image: url(/images/John.jpg);
}

.carmen .persona-image {
    background-image: url(/images/Carmen.jpg);
}

.elizabeth .persona-image {
    background-image: url(/images/Elizabeth.jpg);
}

.managing-persona .modal-content {
    padding: 0px;
}

.managing-persona button.close {
    margin: 20px 20px 0px 0px;
}

.john-modal-lg .body-image {
    background-image: url(/images/John-lg.jpg);
}

.carmen-modal-lg .body-image {
    background-image: url(/images/Carmen-lg.jpg);
}

.elizabeth-modal-lg .body-image {
    background-image: url(/images/Elizabeth-lg.jpg);
}

.checkmark {
    width: 40px;
    position: absolute;
    left: 0px;
    top: 50%;
    margin-top: -20px;
}

#investing-101 .body-image {
    background-image: url(/images/managing-investing101-body-image.jpg);
    background-size: cover;
    background-position: center bottom;
    padding-bottom: 400px;
    position: absolute;
    width: 100%;
}

#investing-101 .offset-callout {
    margin-top: 40px;
}

#what-happens-if-you .body-image {
    background-image: url(/images/managing-whathappensifyou-body-image.jpg);
    background-size: cover;
    background-position: center;
    padding-bottom: 350px;
}

#sources-of-retirement-income .body-image {
    background-image: url(/images/managing-sourcesretirementincome-body-image.jpg);
    background-size: cover;
    background-position: center;
    padding-bottom: 350px;
}

#planning-for-retirement .body-image {
    background-image: url(/images/managing-planningforretirement-body-image.jpg);
    background-size: cover;
    background-position: center;
    padding-bottom: 350px;
}

#planning-for-retirement .callout.orange {
    margin-top: -80px;
    margin-left: 20px;
}

#yearly-to-dos .body-image {
    background-image: url(/images/managing-yearlytodos-body-image.jpg);
    background-size: cover;
    background-position: center;
    padding-bottom: 430px;
}

#yearly-to-dos .body-image.two {
    background-image: url(/images/managing-yearlytodos-body-image2.jpg);
    background-size: cover;
    background-position: center;
    padding-bottom: 430px;
    margin-right: 0px;
}


/*********** RETIRING ********/

#retiring .hero-img {
    background-image: url(/images/retiring-hero.jpg);
    background-position: center center;
}

#retiring .nav-tabs {
    background-color: #4C7329;
}

#retiring .nav-tabs > li > a::after {
    background: #CBE3AE;
}

#retiring .hero-callout {
    background-color: #63962F;
}

#retiring .main-white-container h2 {
    color: #63962F;
}

#retiring h4 {
    color: #4C7329;
}

#retiring h6 {
    color: #646464;
    margin-bottom: 5px;
}

#retiring .arrow-btn {
    color: #4C7329;
    border-color: #4C7329;
}

#retiring .arrow-btn:hover {
    background-color: #4C7329;
    color: white;
}

#retiring .panel-default > .panel-heading {
    background-color: #4C7329;
}

#retiring .panel-default > .panel-heading a {
    color: white;
}

#retiring .main-white-container .table > tbody > tr > th {
    border-top: 1px solid white;
    padding-top: 20px;
}

#how-to-prepare .body-image {
    background-image: url(/images/retiring-howtoprepare-body-image.jpg);
    background-size: cover;
    background-position: center;
    padding-bottom: 300px;
}

#how-to-prepare .body-image.two {
    background-image: url(/images/retiring-howtoprepare-body-image2.jpg);
    background-size: cover;
    background-position: center;
    padding-bottom: 430px;
    margin-right: 0px;
    width: 80%;
}

#how-to-prepare .offset-callout {
    margin-top: -200px;
}

#how-to-prepare .body-image {
    background-image: url(/images/retiring-howtoprepare-body-image.jpg);
    background-size: cover;
    background-position: center;
    padding-bottom: 300px;
}

#options-for-dc-account-balance .body-image {
    background-image: url(/images/retiring-optionsdc-body-image.jpg);
    background-size: cover;
    background-position: center;
    padding-bottom: 300px;
}

#options-for-dc-account-balance .offset-callout {
    margin-right: -100px;
    position: relative;
    z-index: 1;
    top: 30px;
}

#about .offset-callout {
    margin-right: -300px;
    z-index: 1;
    position: relative;
}

.icon-ul {
    padding-inline-start: 0px;
}

.icon-ul li {
    display: block;
    position: relative;
    padding-left: 45px;
    vertical-align: middle;
    margin-bottom: 20px;
}

.icon-ul img {
    width: 30px;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -15px;
}


/*********** LEAVING ********/

#leaving .hero-img {
    background-image: url(/images/leaving-hero.jpg);
    background-position: center center;
}

#leaving .nav-tabs {
    background-color: #72410F;
}

#leaving .nav-tabs > li > a::after {
    background: #FED09E;
}

#leaving .hero-callout {
    background-color: #CD7107;
}

#leaving .main-white-container h2 {
    color: #CD7107;
}

#leaving .panel-default > .panel-heading {
    background-color: #CD7107;
}

#leaving .panel-default > .panel-heading a {
    color: white;
}

#leaving .body-image {
    background-image: url(/images/leaving-optionsdc-body-image.jpg);
    background-size: cover;
    background-position: center;
    padding-bottom: 500px;
}


/*********** MODALS AND BUTTONS ********/

button.close {
    z-index: 1000;
    position: relative;
}

.modal-content {
    border-radius: 0px;
}

.modal-list li {
    padding-bottom: 16px;
}

.modal-content table {
    background-color: #E6E6E6;
}

.modal-button {
    display: table;
    width: 100%;
    -o-transition: .3s;
    -ms-transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
    cursor: pointer;
    margin-bottom: 20px;
}

.modal-button h4 {
    margin-bottom: 0px;
}

.modal-button:hover h4 {
    color: #ffffff!important;
}

.modal-button:hover p {
    color: #ffffff!important;
}

.modal-button:hover ul {
    color: #ffffff!important;
}

.modal-button img {
    display: table-cell;
}

.bucket p,
.bucket ul {
    margin-bottom: 0px;
}

.arrow {
    font-size: 40px;
    color: white;
    width: 20%;
    text-align: center;
}

.blue.modal-button .arrow {
    font-size: 40px;
    color: white;
    width: 18%;
    text-align: center;
    padding-right: 20px;
}

.blue.modal-button .bucket {
    width: 80%;
}

.breakdown-modal h4, .breakdown-modal h6 { 
    color:#49134C;
    font-weight:400;
}

.breakdown-modal .modal-content th h5 {
    font-weight:400;
    color:#333333
}

.column-span-header.grey {
    background-color:#D5D5D5;
}

.column-span-header.grey h5 {
    font-weight: 400;
}

.breakdown-modal .modal-content .table > tbody > tr > td {
    border-top: 1px solid #D5D5D5;
}

.breakdown-modal .dark-grey td {
    background-color:#AAAAAA!important;
}

.breakdown-modal .magenta td {
    background-color:#9E3D96!important;
    color:#ffffff;
}

.breakdown-modal .dark-magenta td {
    background-color:#49134C!important;
    color:#ffffff;
}

.breakdown-modal .white td {
    background-color:#ffffff!important;
}

.breakdown-modal .table {
    margin-bottom:0px!important;
}

.breakdown-modal .modal-content .purple h5 {
    color:#49134C!important;
}

.breakdown-modal .table th {
    padding:20px!important;
}


/*********** TABS ***********/

.nav-tabs {
    border-bottom: 0px;
    background-color: #49134C;
    padding-left: 30px;
    padding-right: 30px;
    border-bottom: 2px solid #49134C;
    z-index: 500;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
    border-width: 0;
    text-decoration: none;
}

.nav-tabs > li {
    margin-right: 30px;
}

.nav-tabs > li > a {
    border: none;
    color: rgba(255, 255, 255, .5);
    text-decoration: none;
    padding: 30px 0px;
    font-weight: 600;
}

.nav-tabs > li.active > a,
.nav-tabs > li > a:hover,
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    border: none;
    color: #ffffff;
    background: transparent;
}

.nav-tabs > li > a::after {
    content: "";
    background: #C3A9CF;
    height: 2px;
    position: absolute;
    width: 100%;
    left: 0px;
    transition: all 250ms ease 0s;
    transform: scale(0);
}

.nav-tabs > li.active > a::after,
.nav-tabs > li:hover > a::after {
    transform: scale(1);
}

.tab-nav > li > a::after {
    background: #21527d none repeat scroll 0% 0%;
    color: #fff;
}

.tab-content {
    padding-top: 80px;
}

.card {
    background: #FFF none repeat scroll 0% 0%;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    margin-bottom: 0px;
}

.affix {
    top: 100px;
}

.affix + .tab-content {
    padding-top: 160px;
}

.card .nav > li > a:focus {
    background-color: transparent!important;
}


/*********** FOOTER ***********/

#footer {
    background-color: #646464;
    padding-top: 50px;
    padding-bottom: 50px;
    color: white;
    font-size: 10px;
}

#footer p {
    font-size: 10px;
}

#footer a {
    color: white;
    text-decoration: none;
}

#footer a:hover {
    text-decoration: underline;
}

#footer ul {
    list-style-type: none;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0px;
    padding-left: 0px;
}

#footer ul li {
    margin-bottom: 5px;
}

.language-button {
    font-weight: bold;
}