@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;
    }
    
    .table-container {
        overflow-x:scroll;
    }
}

@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:#9E3D96!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) { 

    
    #quarrive-t-il-si .body-image, #choix-de-vos-placements .body-image, #designation-dun-beneficiaire .body-image, #options-pour-votre-compte-cd .body-image, #leaving .body-image, #sources-de-revenu-de-retraite .body-image, #planification-de-la-retraite .body-image, #a-faire-chaque-annee .body-image, #admissibilite .body-image, #cotisations .body-image, #about .body-image, #comment-preparer-sa-retraite .body-image {
        margin-right:-100px;
    }
    
    
    #choix-de-vos-placements .body-image.two, #principes-de-base-en-placement .body-image, #comment-preparer-sa-retraite .body-image.two, #a-faire-chaque-annee .body-image.two {
        margin-left:-100px;
    }
    
    #cotisations .body-image {
        margin-right:-100px;
    }
    
}

@media (max-width: 1024px) { 
    
    #hero h1 {
        font-size: 38px;
    }
    
    #cotisations .body-image {
        margin-right: 0px;
        margin-left: -65px;
    }
    
    .main-white-container {
        padding:50px;
    }
    
    #quarrive-t-il-si .body-image, #choix-de-vos-placements .body-image, #designation-dun-beneficiaire .body-image, #options-pour-votre-compte-cd.body-image, #leaving .body-image, #sources-de-revenu-de-retraite .body-image, #planification-de-la-retraite .body-image, #a-faire-chaque-annee .body-image, #admissibilite .body-image, #about .body-image, #comment-preparer-sa-retraite .body-image {
        margin-right:-50px;
    }
    
    
    #choix-de-vos-placements .body-image.two, #principes-de-base-en-placement .body-image, #comment-preparer-sa-retraite .body-image.two, #a-faire-chaque-annee .body-image.two {
        margin-left:-50px;
    }
    
    #cotisations .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;
    }
    #cotisations .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-default > .panel-heading + .panel-collapse > .panel-body {
        padding:20px;
    }
    
     .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;
    }
    
    #ClaudeModal .body-image {
        padding-bottom: 400px;
        margin-left: -50px;
        margin-bottom: -80px;
        margin-top: -50px;
    }

    #MarieModal .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;
        }
    
    #persona-accordion .panel-body {
        padding: 50px;
    }
    
    
    
}



@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;
    }
    
    #quarrive-t-il-si .body-image, #choix-de-vos-placements .body-image, #designation-dun-beneficiaire .body-image, #options-pour-votre-compte-cd .body-image, #leaving .body-image, #sources-de-revenu-de-retraite .body-image, #planification-de-la-retraite .body-image, #a-faire-chaque-annee .body-image, #admissibilite .body-image, #about .body-image, #comment-preparer-sa-retraite .body-image {
        margin-right:-30px;
    }
    
    
    #choix-de-vos-placements .body-image.two, #principes-de-base-en-placement .body-image, #comment-preparer-sa-retraite .body-image.two, #a-faire-chaque-annee .body-image.two {
        margin-left:-30px;
    }
    
    #admissibilite .body-image, #designation-dun-beneficiaire .body-image, #principes-de-base-en-placement .body-image, #sources-de-revenu-de-retraite .body-image, #planification-de-la-retraite .body-image, #comment-preparer-sa-retraite .body-image.two, #options-pour-votre-compte-cd .body-image {
        margin-top:30px;
    }
    
    #cotisations .body-image {
        margin-right: 0px;
        margin-left: -30px;
        margin-bottom:30px;
    }
    

    
    #choix-de-vos-placements .body-image, #principes-de-base-en-placement .body-image, #a-faire-chaque-annee .body-image.two, #comment-preparer-sa-retraite .offset-callout, .modal-content .callout.purple {
        margin-bottom:30px;
    }
    
    #choix-de-vos-placements .offset-callout {
        height:auto!important;
    }
    
    #choix-de-vos-placements .callout-container {
        margin-top:200px;
    }
    
    #principes-de-base-en-placement .body-image {
        position:relative!important;
    }
    
    #principes-de-base-en-placement .offset-callout {
        margin-top:10px!important;
    }
    
    #options-pour-votre-compte-cd .offset-callout {
        margin-right:0px!important;
        top:0px!important;
        margin-bottom:20px!important;
    }
    
    #about .offset-callout {
    margin-right: 0px !important;
    }
    
    .hero-img {
        padding-bottom:200px;
    }
    
    .modal-content {
        padding:30px;
    }
    
    #ClaudeModal .body-image {
        padding-bottom: 250px;
        margin-left: -30px;
        margin-bottom: 30px;
        margin-top: -30px;
        margin-right: -30px;
    }

    #MarieModal .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;
    }

}


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

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

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

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

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

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

#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;
    white-space: normal;
}

.callout-box {
	background-color:white;
	padding: 30px;
	text-align:center;
	width: 95%;
    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;
}

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

.column-span-header h5 {
    margin-bottom: 0px;
    font-weight: 400;
}

.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;
}

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

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

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

#choix-de-vos-placements .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%;
}

#choix-de-vos-placements .offset-callout {
    height:300px;
    margin-top:40px;
}

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




.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;
}

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

#MarieModal .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;
}

#a-faire-chaque-annee 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;
}

#principes-de-base-en-placement .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%;
}

#principes-de-base-en-placement .offset-callout {
    margin-top:40px;
}

#quarrive-t-il-si .body-image {
    background-image: url(/images/managing-whathappensifyou-body-image.jpg);
    background-size: cover;
    background-position: center;
    padding-bottom: 350px;
}

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

#planification-de-la-retraite .body-image {
    background-image: url(/images/managing-planningforretirement-body-image.jpg);
    background-size: cover;
    background-position: center;
    padding-bottom: 350px;
}

#planification-de-la-retraite .callout.orange {
    margin-top: -80px;
    margin-left: 20px;
}


#a-faire-chaque-annee .body-image {
    background-image: url(/images/managing-yearlytodos-body-image.jpg);
    background-size: cover;
    background-position: center;
    padding-bottom: 430px;
}

#a-faire-chaque-annee .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;
}


#comment-preparer-sa-retraite .body-image {
    background-image: url(/images/retiring-howtoprepare-body-image.jpg);
    background-size: cover;
    background-position: center;
    padding-bottom: 300px;
}

#comment-preparer-sa-retraite .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%;
}

#comment-preparer-sa-retraite .offset-callout {
    margin-top:-200px;
}

#comment-preparer-sa-retraite .body-image {
    background-image: url(/images/retiring-howtoprepare-body-image.jpg);
    background-size: cover;
    background-position: center;
    padding-bottom: 300px;
}

#options-pour-votre-compte-cd .body-image {
    background-image: url(/images/retiring-optionsdc-body-image.jpg);
    background-size: cover;
    background-position: center;
    padding-bottom: 300px;
}

#options-pour-votre-compte-cd .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;
    text-transform:uppercase;
    font-size:12px;
}

.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;
}