/* ----------------
    TYPOGRAPHY
---------------- */

@font-face {
    font-family: 'source_sans_prolight';
    font-style: normal;
    font-weight: normal;
    src: url('//static.aviva.io/static/fonts/sourcesanspro-light-webfont.woff2') format('woff2'),
         url('//static.aviva.io/static/fonts/sourcesanspro-light-webfont.woff') format('woff');
}

.pane,
.pane h1,
.pane h2,
.pane h3,
.pane h4 {
    font-family: source_sans_prolight,-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",Arial,Helvetica,sans-serif;
}

.lifeStyleChoices th, .lifeStyleChoices td {
    font-size: 1.4em !important;
}

h1 {
    left: -9999em;
    position :absolute;
	top: -9999em;
}

.infotable{
    margin-left: auto;
    margin-right: auto;
    max-width: 30em;
}

.infotable tbody tr,
.infotable thead tr {
    background-color: white;
    border-bottom:1px solid #f0f0f0;
}

.infotable tbody tr td,
.infotable thead tr td{
    background-color: white;
}

.infotable thead tr:last-child {
    border-bottom: none;
}

.center {
    margin: auto;
    padding: 10px;
    width: 50%;
}

.paneContainer h2.mainHeading {
    color: #004fb6;
    font-size: 4em;
    line-height: 1em;
}
.mainHeading span.headingSpan {
    display: block;
    font-weight: bold;
    letter-spacing: 0.03em;
}
.mainHeading span.headingSpan::after,
.questionPane h2::after {
    content: '';
    display: block;
    margin: 0 auto;
    width: 100%;
}
.mainHeading span.headingSpan::after {
    background: #ffb900;
    height: 0.09em;
    margin-top: 0.3em;
    max-width: 1em;
}

.modalPanel div.modalContent{
    background-color:#fff;
    margin-left: auto;
    margin-right: auto;
    max-width: 80em;
    padding:2em;
    text-align: left;
}
.modalContent h3 a {
    font-size:1.3em;
}

.showModalPanel{
    background: rgba(0, 0, 0, 0.45);
    left: 0;
    overflow: scroll;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 9999999;
}
.closeModal {
    display:none;
}

.showModalPanel .closeModal{
    clear:both;
    cursor:pointer;
    display:block;
    float:right;
    font-size:2em;
    margin:1em;
}

.question {
    color: #004fb6;
    font-size: 3.8em;
    font-weight: normal;
    line-height: 1.2em;
}

.lightHeading{
    font-weight:100;
}
.welcomeBackMessage .paneContainer{
    padding:0;
}
.welcomeBackMessage{
    padding-bottom:0;
}

.budgetCalculationRightPane .categoryListContainer .categoryList li{
    background-size: 4em;
    padding-top: 4em;
}

.modalPanel p, .modalPanel li {
    font-weight: 100;
}
.modalPanel ul li {
    font-size: 1.125em;
}

.modalPanel ul li ul {
    margin:1em 0 0;
}

.modalPanel ul li ul li {
    font-size:100%
}

span.field-validation-error {
    color: #d61d41;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0.5em;
    text-align: left;
    width: 50%;
}

.editResults span.field-validation-error{
    float:left;
    margin-left:0;
    margin-right:auto;
    width:auto;
}

.multiQuestion label{
    cursor:pointer;
}
.budgetCalcPrice{
    color: #004fb6;
    font-size: 4em;
    margin-bottom: 0.12em;
}

@media only screen and (min-width: 1300px) {
    h3.question.question8 {
        padding: 0 1em;
    }
}

@media only screen and (min-width: 55em) {
    .paneContainer h2.mainHeading {
        font-size: 2.4em;
        line-height:2.2em;   
    }
    .mainHeading span.headingSpan {
        font-size: 2em;
    }
    .openingPane p {
        font-size: 2.2em;
        line-height: 1.455em;
    }
    .question {
        font-size: 4.5em;
        margin-bottom: 0.2em;
    }
    .budgetCalculationRightPane .categoryListContainer{
        margin-top:3em;
    }
}

.idealRetirementPane h2 {
    font-size: 3em;
}

.paneSplitHalf .leftPane .paneContainer.welcomePane{
    background: #F7BE33;
    max-width:100%;
}

.paneSplitHalf .leftPane .paneContainer.welcomePane .welcomePaneInner{
    margin-left: auto;
    max-width: 71em;
}

@media only screen and (min-width: 35em) {
    .idealRetirementPane h2 {
        font-size: 4.6em;
    }
}

/* ----------------
    GLOBAL 
---------------- */

.mobileHidden {
    display: none;
}

@media only screen and (min-width: 47.5em) {
    .mobileHidden {
        display: inherit;
    }
}

.progressBreadcrumb {
    background-image:  url(../images/ShapeMyFuture/progress-breadcrumb-dots.svg);
    background-repeat: no-repeat;
    background-position: center top;
}
.svg .progressBreadcrumb.alt {
    background-image:  url(../images/ShapeMyFuture/progress-breadcrumb-dots-alt.svg);
}
.svg .progressBreadcrumb { background-image: url(../images/ShapeMyFuture/progress-breadcrumb-dots.svg); }

.progressBreadcrumb li {
    /*background-position: top center;*/
    display: inline-block;
    min-width: 4.4em;
    padding-top: 2em;
    padding-left: 0;
}


.svg .progressBreadcrumb li,
.progressBreadcrumb li {
    background-image: url(../images/ShapeMyFuture/progress-breadcrumbs.png);
    background-repeat: no-repeat;
    background-size: inherit;
}


.progressBreadcrumb .current {
    background-position: 3px -18px;
}

.progressBreadcrumb.alt .current {
    background-position: -69px -19px;
}

.progressBreadcrumb .complete {
    background-position: -138px -15px;
}

.progressBreadcrumb.alt .complete {
    background-position: -205px -15px;
}

.progressBreadcrumb .uncomplete {
    background-position: -138px  -15px;
}

.progressBreadcrumb.alt .uncomplete {
    background-position: -323px -15px;
}

/* ----------------
    INPUTS
---------------- */
input[type=date] {
    text-transform: uppercase;
}
.input-validation-error {
    border: 4px solid #d61d41;
    color:#d61d41;
}

::-webkit-datetime-edit-day-field {
    padding-left: 3em;
}

.input-validation-error {
    border-color: #cd4848;
}

.choices select {
    padding: .5em;
}

.multiQuestion li,
.svg .multiQuestion li {
    background: none;
    padding: 0;
}

.multiQuestion label {
    background: #fff;
    border: none;
    border-radius: 2em;
    color: #004fb6;
    display: block;
    font-size: 1.250em;
    line-height: 1.2857;
    margin-bottom: .5em;
    margin-left: auto;
    margin-right: auto;
    max-width: 15em;
    padding: 0.835em;
    text-align: center;
}
 
input[type="radio"]:checked + label {
    color: #fff;
    background-color: #004fb6;
} 

.multiQuestion input {
    left: -9999px;
    position: absolute;
}

@media only screen and (min-width: 47em) {
    .multiQuestion label {
        font-size: 1.5em;
    }
}

::-webkit-input-placeholder {
   color: #004fb6;
}
:-moz-placeholder {
   color: #004fb6;  
}
::-moz-placeholder {
   color: #004fb6;  
}
:-ms-input-placeholder {
   color: #004fb6;
}

.button.buttonProceed {
    background-color: #004fb6;
    color: #fff;
    font-size: 2em;
    font-weight: normal;
    padding: .9375em 1.5em .9375em 1.5em;
    width: 93%;
}
.button.buttonProceed.yellow {
    background-color: #ffdc00;
    box-shadow: none;
    color: #004fb6;
}
.button.buttonProceed.yellow:hover, .button.buttonProceed.yellow:focus {
    background-color: #0067d8;
    box-shadow: none;
    color: #fff;
}
p .button.buttonProceed {
    font-size: 1.25em;
    padding: .9375em 1.5em .9375em 1.5em;
}
@media only screen and (min-width: 35em) {
    .button.buttonProceed { width: 19em; }
    .editPanelLeft .button.buttonProceed, .editPanelRight .button.buttonProceed{
        width:100%;
    }
}

/* ----------------
    LAYOUT
---------------- */

.paneContainer {
    padding: 2em;
    text-align: center;
}

.paneContainer.noPadding {
    padding: 0;
}

.paneContainer.paneCenter {
    margin-left: auto;
    margin-right: auto;
}

.innerPaneContainer {
    padding: 2em;
}

.paneSplit { text-align: center; }

.paneYellow { background-color: #ffd900; }
.paneGrey { background-color: #f0f0f0; }

.paneSplitHalf .pane {
    width: 100%;
}

@media only screen and (min-width: 55em) {
    .paneSplit {
        -webkit-box-align: stretch;
	       -moz-box-align: stretch;
	       -ms-flex-align: stretch;
	    -webkit-align-items: stretch;
	       -moz-align-items: stretch;
	            align-items: stretch;
	    display: -webkit-flex;
	    display: -moz-flex;
	    display: flex;
	    display: -ms-flexbox;
	    -webkit-flex-flow: row wrap;
	       -moz-flex-flow: row wrap;
	        -ms-flex-wrap: wrap;
	            flex-flow: row wrap;
    }

    .paneSplitHalf .pane {
        width: 50%;
    }
    .paneSplitThird .pane{
        float: left;
    }
    .paneSplitThird .leftPane {
        width: 33%;
    }
    .paneSplitThird .rightPane {
        width: 67%;
    }
    .paneSplitHalf .paneContainer {
        max-width: 75em;
    }
    .paneSplitHalf .leftPane .paneContainer {
        margin-left: auto;
    }
    .paneSplitHalf .rightPane .paneContainer {
        margin-right: auto;
    }
}

footer {
    margin-top: 0;
}


/* ----------------
    QUESTION SETS
---------------- */

.extraInfoPane { display: none; }
.questionInfo {
    margin-bottom: 3em;
}

.extraInfoPane {
    background-image: url(../images/ShapeMyFuture/question-panel-test2.svg);
    background-repeat: no-repeat;
    background-position: 99% 79%;
    background-size: 220em;
}
@media only screen and (min-width: 55em) {
    .extraInfoPane {
        background-image: url(../images/ShapeMyFuture/extra-info-background.png);
        background-repeat: repeat-x;
        background-position: 0 bottom;
        background-size: cover;
        display: inherit;
        height: 48em;
    }
    .svg .extraInfoPane { background-image: url(../images/ShapeMyFuture/extra-info-background.svg); }
    .extraInfoPane p {
        padding-top: 80px;
    }
    .questionInfo {
        font-size: 1.8em;
    }
}

.questionPane {
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flexbox;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-orient: vertical;
	-moz-box-orient: vertical;
	-webkit-box-direction: normal;
	-moz-box-direction: normal;
	-ms-flex-direction: column;
	-webkit-flex-direction: column;
	flex-direction: column;
    z-index: 999;
}
.questionPane > .paneContainer {
	-webkit-flex-grow: 100;
	flex-grow: 100;
}
.questionPane > .paneContainer:last-child {
	-webkit-flex-grow: 1;
	flex-grow: 1;
}

.contentStep {
    background-color: #f0f0f0;
    position: relative;
}
.person {
    bottom: 7em;
    height: 22em;
    left: 30%;
    position: absolute;
    width: 22em;
}

.questionStep {
    display: none;
}
.step1 .step1,
.step2 .step2,
.step3 .step3,
.step4 .step4,
.step5 .step5,
.step6 .step6,
.step7 .step7,
.step8 .step8
{
    display: block;
}
@media only screen and (min-width: 55em) {
    .step1 .step1,
    .step2 .step2,
    .step3 .step3,
    .step4 .step4,
    .step5 .step5,
    .step6 .step6,
    .step7 .step7,
    .step8 .step8 {
        -webkit-box-align: stretch;
        -moz-box-align: stretch;
        -ms-flex-align: stretch;
        -webkit-align-items: stretch;
        -moz-align-items: stretch;
        align-items: stretch;
        display: -webkit-flex;
        display: -moz-flex;
        display: flex;
        display: -ms-flexbox;
        -webkit-flex-flow: row wrap;
        -moz-flex-flow: row wrap;
        -ms-flex-wrap: wrap;
        flex-flow: row wrap;
    }
}

.js.showContentTwo,
.js.showContentOne {
    display: none;
}

.js .slideInPanel {
    left: -100%;
    height: 100%;
    top: 0px;
    position: absolute;
    overflow-y: scroll;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
    width: 100%;
}
.slideInPanel {
    background-color: #f0f0f0;
    padding: 2em 1em;
    width: 100%;
    z-index: 999;
}
.slideInPanel ul {
    text-align: left;
}

.js .slideInPanel.active {
    left: 0%;
}

.slideInPanelContainer {
    margin: 0 auto;
    max-width: 124em;
    position: relative;
    text-align: center;
}
.js .slideInPanelContainer {
    max-width: 62em;
}

.js .closePanel {
    background-image: url(../images/ShapeMyFuture/close-slidepanel.png);
    background-size: cover;
    cursor: pointer;
    height: 1.5em;
    position: absolute;
    right: 0;
    width: 1.5em;
}
.js.svg .closePanel { background-image: url(../images/ShapeMyFuture/close-slidepanel.svg); }

.questionIcon {
    background: url(../images/ShapeMyFuture/question-alert.png) top center no-repeat;
    color: #782b8f;
    font-size: 2.4em;
    font-weight: normal;
    padding-top: 2em;
}
.svg .questionIcon { background-image: url(../images/ShapeMyFuture/question-alert.svg); }

@media only screen and (min-width: 55em) {
    .js .slideInPanel {
        left: -50%;
        height: 100%;
        padding: 2em 3em;
        width: 50%;
    }
}

/* ----------------
    BUDGET CALCULATION
---------------- */

.budgetCalculationSplit {
    position: relative;
}

.budgetCalculationSplit .pane,
.buildMyRetirementSplit .pane {
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flexbox;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-orient: vertical;
	-moz-box-orient: vertical;
	-webkit-box-direction: normal;
	-moz-box-direction: normal;
	-ms-flex-direction: column;
	-webkit-flex-direction: column;
	flex-direction: column;
}
.budgetCalculationSplit .pane > .paneContainer,
.buildMyRetirementSplit .pane > .paneContainer {
	-webkit-flex-grow: 100;
	flex-grow: 100;
}
.budgetCalculationSplit .pane > .paneContainer:last-child,
.buildMyRetirementSplit .pane > .paneContainer:last-child {
	-webkit-flex-grow: 1;
	flex-grow: 1;
}
.buildMyRetirementSplit .pane > .paneContainer.budgetCalculationRightPane{
        padding-bottom: 0;
}

@media only screen and (min-width: 55em) {
    .buildMyRetirementSplit .pane > .paneContainer.budgetCalculationRightPane {
        padding-bottom: 2em;
    }
}

.budgetCalculationSplit .rightPane {
    background-image: url(../images/ShapeMyFuture/extra-info-background.png);
    background-repeat: repeat-x;
    background-position: 0% bottom;
    background-size: cover;
    height: 65em;
}

.categoryList {
    margin-bottom: 2em;
}

.svg .categoryList li,
.categoryList li {
    background-size: 3em;
    background-position: center top;
    color: #004fb6;
    display: inline-block;
    padding: 3em 0 0;
    width: 18%;
}

.categoryList .food { background-image: url(../images/ShapeMyFuture/food.png); }
.categoryList .house { background-image: url(../images/ShapeMyFuture/home.png); }
.categoryList .travel { background-image: url(../images/ShapeMyFuture/travel.png); }
.categoryList .hobbies { background-image: url(../images/ShapeMyFuture/hobbies.png); }
.categoryList .family { background-image: url(../images/ShapeMyFuture/family.png); }

.svg .categoryList .food { background-image: url(../images/ShapeMyFuture/food.svg); }
.svg .categoryList .house { background-image: url(../images/ShapeMyFuture/home.svg); }
.svg .categoryList .travel { background-image: url(../images/ShapeMyFuture/travel.svg); }
.svg .categoryList .hobbies { background-image: url(../images/ShapeMyFuture/hobbies.svg); }
.svg .categoryList .family { background-image: url(../images/ShapeMyFuture/family.svg); }

.categoryList li.house.complete { background-image: url(../images/ShapeMyFuture/home-complete.png); }
.categoryList li.food.complete { background-image: url(../images/ShapeMyFuture/food-complete.png); }
.categoryList li.travel.complete { background-image: url(../images/ShapeMyFuture/travel-complete.png); }
.categoryList li.hobbies.complete { background-image: url(../images/ShapeMyFuture/hobbies-complete.png); }
.categoryList li.family.complete { background-image: url(../images/ShapeMyFuture/family-complete.png); }

.svg .categoryList li.house.complete { background-image: url(../images/ShapeMyFuture/home-complete.svg); }
.svg .categoryList li.food.complete { background-image: url(../images/ShapeMyFuture/food-complete.svg); }
.svg .categoryList li.travel.complete { background-image: url(../images/ShapeMyFuture/travel-complete.svg); }
.svg .categoryList li.hobbies.complete { background-image: url(../images/ShapeMyFuture/hobbies-complete.svg); }
.svg .categoryList li.family.complete { background-image: url(../images/ShapeMyFuture/family-complete.svg); }

.categoryList.retirementToolList {
    max-width: 25em;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
    margin-top: 1em;
}

@media only screen and (min-width: 47em) {
    .categoryList.retirementToolList {
        margin-top: 0;
    }
    .js .categoryList.retirementToolList {
        margin-left: 45%;
    }
}
.svg .categoryList.retirementToolList li,
.categoryList.retirementToolList li {
    overflow: hidden;
    padding-top: 3.3em;
    text-indent: 999999px;
}

.svg .categoryList.retirementToolList li.active,
.categoryList.retirementToolList li.active {
    background-size: 3.5em;
    padding-top: 3.5em;
    text-indent: 0;
}



@media only screen and (min-width: 35em) {
    .svg .categoryList li,
    .categoryList li {
        background-size: 3em;
        font-size: 1.125em;
        padding-top: 3em;
        width: 15%;
    }
    .svg .categoryList.retirementToolList li,
    .categoryList.retirementToolList li {
        padding-top: 3.5em;
        width: 19%;
    }
    .svg .categoryList.retirementToolList li.active,
    .categoryList.retirementToolList li.active {
        background-size: 4em;
        padding-top: 4em;
        text-indent: 0;
    }

}

.breadcrumbDots {
    background: url(../images/ShapeMyFuture/progress-breadcrumb-dots.svg) repeat-x;
}

.budgetCalculationRightPane p {
    max-width: 30.875em;
    margin-left: auto;
    margin-right: auto;
}

.saveButton {
    border: none;
    background: none;
    color: #004fb6;
    cursor: pointer;
    text-decoration: underline;
}
.saveButton:hover {
    text-decoration: none;
}

/* ----------------
    BUILD MY RETIREMENT
---------------- */

#container { 
    background: #ffd900; 
    float: left; 
    height: 200px; /* ORIGINALLY WAS 200PX CHANGING FOR MOBILE*/
    margin-bottom: 2em;
    overflow: hidden; 
    width: 100%; 
}
.controls {
    border: 5px solid #f9db67;
    background: #fff;
    border-radius: 3em;
    color: #fff;
    margin-left: auto;
    margin-right: auto;
    padding: 0.3em;
    width: 27em;
}
#left, #right, #amount {
    float: left;
    padding: 0;
    text-align: center;
}

#left {
    background: url(../images/ShapeMyFuture/icon-previous.svg) no-repeat center left;
    background-size: 5em;
    height: 5em;
    width: 5em;
}
#right{
    background: url(../images/ShapeMyFuture/icon-next.svg) no-repeat center right;
    background-size: 5em;
    float: right;
    height: 5em;
    width: 5em;
}
#amount{
    color: #004fb6;
    display: block;
    font-size: 2.5em;
    line-height: 1.9em;
    text-align: center;
    width: 54%;
}

@media only screen and (min-width: 35em) {
    #amount {
        font-size: 3em;
        line-height: 1.6em;
    }
}
button{
    background: #555;
    border: 0;
    border-radius: 0.8em;
    color: #fff;
    padding: 0.5em;
}
.loader{
    display: block;
    margin: -11em auto 0;
    position: relative;
}
button:hover, #left:hover, #right:hover {
    cursor: pointer;
}
.backdrop, .backdrop2, .mapWrapper{
    position: relative;
    float: none;
}
.mapWrapper{
    margin-top: -200px;
}
.backdrop2{
    margin-top: -200px;
}
.mapWrapper .section {
    clear: left;
    float: left;
    padding-top: 0;
    padding-bottom: 0;
    position: relative;
    width: auto;
}
.section .cell {
    float: left;
    height: 200px;
    opacity: 0.5;
    position: relative;
    transition: opacity 1s ease;
    width: 500px;
}
.section .cell.active {
    float: left;
    height: 200px;
    opacity: 1;
    position: relative;
    width: 500px;
}

.backdrop {
    background: url(../images/ShapeMyFuture/backdrop.svg) left bottom repeat-x;
    height: 200px;
    width: 7000px;
}
.backdrop2{
    background: url(../images/ShapeMyFuture/backdrop2.svg) left bottom repeat-x;
    height: 200px;
    width: 7000px;
}
.cell p {
    color: #fff2a6;
    left: 1em;
    position: absolute;
    top: 1em;
}
.js .choices {
	opacity: 0.6;
}

/* NON JS VERSION OF CAROUSEL */

.choiceItem select {
    min-width: 8em;
}
.choiceItem {
    margin: 1em;
}

@media only screen and (min-width: 35em) {
    .choiceItem {
        float: left;
        width: 20%;
    }
}

/* ----------------
    GRAPHS
---------------- */

.graphContainer {
    float: left;
    height: 15em;
    line-height:1.5;
    margin-bottom: 0em;
    position: relative;
    width: 49.7%;
}
#costDiv {
    border-bottom: 0.5em solid #59cb92;
    float: right;
}
#budgetDiv {
    border-bottom: 0.5em solid #009cb0;
}

.faderPanel {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.percentageContainer {
    display: block;
    font-size: 2.5em;
    margin-top: 10%;
    text-align: center;
}

@media only screen and (min-width: 35em){
    .percentageContainer {
        font-size: 2.5em;
        margin-top: 0.3em;
    }
}

@media only screen and (min-width: 55em) {
    .budgetCalculationSplit .graphContainer .percentageContainer {
        margin-top: 0.6em;
    }
    
}

@media only screen and (min-width: 80em) {
    .budgetCalculationSplit .graphContainer .percentageContainer {
        margin-top: 1em;
    }   
}
.upper {
    background-color: #f0f0f0;
    color:#009cb0;     
    height:45%;  
    overflow:hidden;
    z-index: 5;
}
.lower {
    background-color:#009cb0;
    color:#fff;
}
.rate {
    display: block;
    font-size: 0.3em;
    margin-top: -1em;
}
.upper.alt {
    color:#59cb92; 
    height:20%        
}

.js .upper, .js .upper.alt{
    height:100%;
}
    
.lower.alt{
    background-color:#59cb92;
}

#budgetDiv.activePanel:after {
    border-top-color: #009cb0;
    border: solid transparent;
	border-width: 2em;
    content: " ";
    height: 0;
	left: 50%;
    margin-left: -2em;
    position: absolute;
    top: 100%;
    width: 0;
}

#costDiv.activePanel:after {
    border: solid transparent;
    border-top-color: #59cb92;
	border-width: 2em;
    content: " ";
    height: 0;
    left: 50%;
    margin-left: -2em;
    position: absolute;
    top: 100%;
    width: 0;
}

.activePanel .graphToggle {
    display:none;
}

.budgetCalculationSplit .graphContainer .percentageContainer {
    margin-top: 22%;
}

@media only screen and (min-width: 35em) {
    .graphContainer {
        height: 26em;
    }

    .budgetCalculationSplit .graphContainer {
        height: 26em;
    }

    .budgetCalculationSplit .graphContainer .percentageContainer {
        margin-top: 2.2em;
    }
    
}

.faderPanel.upper { background-image: url(../images/ShapeMyFuture/summary-graph-background.png); }

.containingGraphPanel #budgetDiv .upper {
    border: 2px solid #009cb0;
}
.containingGraphPanel #costDiv .upper {
    border: 2px solid #59cb92;
}

/* ----------------
    LANDING PAGE
---------------- */
.openingPane {
    position: relative;
}
.openingImage {
    background-image: url(../images/ShapeMyFuture/landing-page-world-small.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 7em;
}
.openingImageRoad {
    background-image: url(../images/ShapeMyFuture/landing-page-world-road.svg);
    background-position: bottom;
    background-repeat: repeat-x;
}
@media only screen and (min-width: 35em) {
    .openingImage {
        height: 15em;
    }
}
@media only screen and (min-width: 45em) {
    .openingImage {
        height: 22em;
    }
}
@media only screen and (min-width: 55em) {
    .openingImage {
        height: 10em;
    }
}
@media only screen and (min-width: 80em) {
    .openingImage {
        height: 18em;
        max-width: 75em;
        margin-left: auto;
    }
}

@media only screen and (min-width: 47em) {
    .openingPane:before {
        border: solid transparent;
        border-left-color: #ffd900;
        border-width: 25px;
        bottom: 50%;
        content: " ";
        display: block;
        height: 0;
        left: 100%;
        position: absolute;
        z-index: 999;
    }
}

.stepContainer {
    display: flex;
    width: 100%;
}
.stepItem {
    text-align: left;
    width: 33%;
}
.stepItem p {
    margin-bottom: 0;
}
p.stepItemNumber {
    border-right: 1px solid black;
    color: #004fb6;
    float: left;
    font-size: 3.8em;
    line-height: 0.8;
    padding-right: 0.2em;
}
p.stepItemDesc {
    letter-spacing: -.030em;
    line-height: 15px;
    margin-left: 2.5em;
    max-width: 5em;
    padding-top: 0em
}

@media only screen and (min-width: 55em) {

    p.stepItemNumber {
        font-size: 5.8em;
        padding-right: 0.2em;
    }
    p.stepItemDesc {
        font-size: 2.2em;
        letter-spacing: -.030em;
        line-height: 22px;
        margin-left: 2.5em;
    }
}

/* SHARE ICONS */

.share {
	padding: 1.4em 0;
    margin-bottom: 4em;
    text-align:center;
}
.share h3 {
    color: #004fb6;
    font-weight: bold; 
}

.share img {
	max-width: none;
}
.share ul li {
	background-image: none;
	display: inline;
	margin: 0 0 1em .875em;
	padding: 0;
}
.share li:first-child {
	margin: 0 0 1em 0;
}
.share li a {
	background-repeat: no-repeat;
	background-position: center center;
	display: inline-block;
	height: 3em;
	opacity: .8;
	text-indent: -9999px;
	transition: opacity .4s ease;
	width: 3em;
}
.share li a:hover,
.share li a:focus {
	opacity: 1;
}
.shareListTwitter { background-image:  url(../images/ShapeMyFuture/social-twitter.png); }
.shareListFacebook { background-image:  url(../images/ShapeMyFuture/social-facebook.png); }
.shareListEmail { background-image:  url(../images/ShapeMyFuture/social-mail.png); }
.svg .shareListTwitter { background-image:  url(../images/ShapeMyFuture/social-twitter.svg); }
.svg .shareListFacebook { background-image:  url(../images/ShapeMyFuture/social-facebook.svg); }
.svg .shareListEmail { background-image:  url(../images/ShapeMyFuture/social-mail.svg); }

.letsBeginLink p {
    margin-bottom: 0;
    padding-bottom: 2em;
    background-image: url(../images/ShapeMyFuture/down-arrow.png);
    background-position: center bottom;
    background-repeat: no-repeat;
}
.svg .letsBeginLink p { background-image: url(../images/ShapeMyFuture/down-arrow.svg); }

@media only screen and (min-width: 55em) {
    .letsBeginLink { display: none; }
}

.idealRetirementPane .paneContainer {
    margin: 0 auto;
}

/* CASE STUDY WORLD CAROUSEL */

.caseStudyDescription {
    max-width: 46.875em;
}
.caseStudyProfile {
    border-radius: .125em;
    box-shadow: 0 .0625em 0 0 #d5d5d5;
    margin: 0 auto 2em;
    max-width: 36em;
    padding: 0 2em;
    text-align: left;
}

.caseStudyName {
    background-repeat: no-repeat;
    background-position: 20% center;
    font-size: 2em;
    margin-top: 0;
    padding-left: 4.5em;
}

@media only screen and (min-width: 65em){
    .caseStudyName {
        background-position: 10% center;
        padding-left: 4em;
    }
}
.caseStudyName.male {
    background-image: url(../images/ShapeMyFuture/avatar-male.png); 
    line-height:1em;
}
.caseStudyName.female {
    background-image: url(../images/ShapeMyFuture/avatar-female.png);
    line-height: 1em;
}
.svg .caseStudyName.male { background-image: url(../images/ShapeMyFuture/avatar-male.svg); }
.svg .caseStudyName.female { background-image: url(../images/ShapeMyFuture/avatar-female.svg); }
.caseStudyName span { 
    display: block; 
    font-size: .5em;
}

.caseStudyRoad {
    background-color: #fff;
    background-image: url(../images/ShapeMyFuture/case-study-road.png);
    background-repeat: repeat-x;
    background-position: bottom center;
    max-width: none;
}
.caseStudyRoad .paneContainer {
    padding-bottom: 0;
}
.caseStudyBlockRoad {
    background-color: #f2f2f2;
}

.caseStudyCarousel {
    margin-top: 3em;
	text-align: center;
}
.caseStudyCarousel .caseStudyItem {
	margin: 0 1em;
	text-align: center;
}
.js .caseStudyCarousel .caseStudyItem {
	float: left;
}

.caseStudyItem {
    background-repeat: no-repeat;
    background-position: 50% 40%;
    background-size: 80%;
}
.caseStudyImage {
    background-repeat: no-repeat;
    background-position: center bottom;
    height: 10.5em;
    margin: 3em 0;
    width: 100%;
}

.caseStudyItem .matthew { background-image: url("../images/ShapeMyFuture/retirement-level1.png"); }
.caseStudyItem .joe { background-image: url("../images/ShapeMyFuture/retirement-level2.png"); }
.caseStudyItem .marie { background-image: url("../images/ShapeMyFuture/retirement-level3.png"); }

.svg .caseStudyItem .matthew { background-image: url("../images/ShapeMyFuture/retirement-level1.svg"); }
.svg .caseStudyItem .joe { background-image: url("../images/ShapeMyFuture/retirement-level2.svg"); }
.svg .caseStudyItem .marie { background-image: url("../images/ShapeMyFuture/retirement-level3.svg"); }

.caseStudyDescription {
    padding-right: 2em;
}

.carouselSlider {
    height: 20.5em;
}

.carouselSliderContainer {
    float: left;
    height: 33em;
    overflow: hidden;
    width: 100%;
}

.js .carouselPrev, 
.js .carouselNext {
    cursor: pointer;
    float: left;
    height: 3.1em;
    margin-top: 9em;
    position: absolute;
    width: 5em;
}
.js .carouselPrev {
	background: url("../images/ShapeMyFuture/arrow-left.png") no-repeat center left;
    left: 5%;
}
.js .carouselNext {
    background: url("../images/ShapeMyFuture/arrow-right.png") no-repeat center right;
    float: right;
    right: 5%;
}
.svg .carouselPrev { background-image: url("../images/ShapeMyFuture/arrow-left.svg"); }
.svg .carouselNext { background-image: url("../images/ShapeMyFuture/arrow-right.svg"); }

@media only screen and (min-width: 35em) {
    .caseStudyDescription {
        font-size: 1.4em;
        max-width: 34.091em;
        margin: 0 auto 1em;
    }
    .caseStudyProfile {
        max-width: 35em;
    }
    .caseStudyName {
        background-size: 1.6em;
        background-position: 10% center;
        font-size: 3em;
        margin-bottom: 0.348em;
        padding-left: 3em;
    }
    .caseStudyName span {
        font-size: 0.348em;
    }
    .carouselSlider {
        height: 24.5em;
    }
    .caseStudyCarousel .caseStudyItem {
	    height: 55em;
    }
    .carouselSliderContainer {
        height: 35em;
    }
    .caseStudyItem {
        background-position: center;
    }
    .caseStudyImage {
        height: 13em;
    }
}

@media only screen and (min-width: 65em) {
	.caseStudyCarousel{
		margin-left: auto;
        margin-right: auto;
        width: 100%;
    } 
    
    .carouselSlider {
        height: 24.5em;
    }
}
@media only screen and (min-width: 80em) {
    .js .carouselPrev {
        left: 20%;
    }
    .js .carouselNext {
        right: 15%;
    }
}



/* ----------------
    CTA SUMMARY PAGE
---------------- */
.fullWidthContainer {
    max-width: 100%;
}
.ctaSplit {
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
}

.ctaSplit .leftPane a.external {
    background-image: url('../images/icons/icn-inline-external-white.gif');
    padding-right: 1em;
}

.svg .ctaSplit .rightPane a.external {
    background-image: url('../images/icons/icn-inline-external-white.svg');
    background-size: 1em;
    background-position: top right;
    padding-right: 1.2em;
}

.editPanel {
    background-color: #fff;
    width: 100%;
}

.editPanel .typeLabel {
    color: #004fb6;
    font-size: 1.8em;
    font-weight: bold;
    line-height: 20px;
}

.podGroup .pod.centerPod {
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (min-width: 47em) {

}

.graphPanelContainer {
    padding: 1em;
}

.graphPanelContainer.top {
    height: 42em;
}

@media only screen and (min-width: 1300px) {
    .graphPanelContainer.top {
        height: 36em;
    }
}

.editPanelRow {
    border-bottom: 1px solid #d7d7d7;
    padding: 1em 1em;
    text-align: left;
}

.editPanelRow:last-child {
    border-bottom:0px;
}

.u-align--right, html .u-align--right {
    float: none;
}

p.editDesc {
    float: left;
    width: 70%;
}
h3.editDesc {
    margin-bottom: 0;
}

.button.buttonProceed.disabledButton {
    background-color: grey;
    background-image: none;
    cursor: default;
}

.paneContainer h2.shareHeader{
    font-size:4em;
}

.ownHomeToggle {
    border-radius: 2em;
    background-color: #004fb6;
    color: #004fb6;
    padding: 0.1em;
    width: 55%;
}

@media only screen and (min-width: 35em){
    .ownHomeToggle {
        width: 20%;
    }
}

.ownHomeItem {
    background-image: none;
    display: inline-block;
    padding: 0;
    width: 47%;
}
.svg .ownHomeItem {
    background-image: none;
}
.ownHomeItem input {
    left: -999999px;
    position: absolute;
}

.ownHomeItem input[type="radio"]:checked + label {
    background-color: #fff;
    color: #004fb6;
}

.ownHomeItem label {
    border-radius: 2em;
    display: block;
    margin: 0;
    padding: 0.4em;
    text-align: center;
}

.ownHomeItem label:hover {
    cursor: pointer;
    width: 100%;
}

.editPanel {
    float:left;
    width: 100%;
}
.js .editPanel .nextButton {
    text-align: center;
}
.editPanel .button {
    margin: auto;
}

.js .graphToggle {
    cursor: pointer;
    left: 40%;
    position: absolute;
    top: -15%;
    z-index: 9999999;
}

.js .graphToggle.budgetToggle,.js .graphToggle.costToggle {
    border: 2px solid #009cb0;
    background: #f0f0f0;
    background-color: #fff;
    border-radius: 50%;
    color: #009cb0;
    font-size: 1.4em;
    font-weight: bold;
    padding: 0.7em;
}
.js .graphToggle.costToggle {
    border:2px solid #59cb92;
    color:#59cb92;
}

.js .graphToggle.graphToggle {
    box-shadow: 0px 1px 2px;
}

.summaryPane{
    background: url(../images/ShapeMyFuture/summary_bg.png) #ffd900 90% 4.7em repeat-x;
    background-size: 140em;
}
.svg .summaryPane{
    background: url(../images/ShapeMyFuture/summary_bg.svg) #ffd900 90% 4.8em repeat-x;
    background-size: 75em;
}
.summaryPane2{
    background: url(../images/ShapeMyFuture/summary_fg.png) 30% 8.8em repeat-x;
    background-size: 140em;
}
.svg .summaryPane2{
    background: url(../images/ShapeMyFuture/summary_fg.svg) 30% 8.8em repeat-x;
    background-size: 67em;
}

span.costDown, span.costUp, span.ddContent{
    display:none;
}

.js div.costSelector{
    border-radius: 2em;
    border: 1px solid #cccccc;
    display: block;
    float: left;
    margin-left: 0.5em;
    min-width: 14.5em;
    padding: 3px 4px;
    width: 37%;
}

.js span.costDown, .js span.costUp {
    cursor:pointer;
    display: block;
    float: right;
    height: 2.4em;
    width: 2.4em;
}

.js span.costDown{
    float:left;
}
.js span.ddContent{
    display: block;
    float: right;
    font-size: 1.8em;
    padding: 0em 0.2em;
}
.js span.costDown {
    background: url(../images/ShapeMyFuture/icon-minus.png);
}

.js span.costUp {
    background: url(../images/ShapeMyFuture/icon-plus.png);
}

.svg span.costDown{
    background: url(../images/ShapeMyFuture/icon-minus.svg);
}
.svg span.costUp{
    background: url(../images/ShapeMyFuture/icon-plus.svg);
}


.js .editPanelLeft , .js .editPanelRight{
    margin-left: -9999999px;
}
.js .editPanelLeft.active, .js .editPanelRight.active{
    margin-left: 0px;
}

.js .editPanel .editPanelContainer h2.topGap {
    left:-999999px;
    position:absolute;
}

h2.weeklyBalance{
    font-size:4.5em;
    line-height:1em;
    margin-top:0.4em;
}
h2.weeklyBalance{
    font-size:4.5em;
    line-height:1em;
    margin-top:0.24em;
}

#pullUp{
    display: none;
}

.js #pullUp{
    background: #fff;
    bottom: 0;
    left: 42%;
    position: fixed;
    z-index: 99999;

}
.js #pullUp a{
    font-size: 1.7em;
    margin: 0.5em 2em;
}
.modalClose {
    display: none;
}

@media only screen and (min-width: 35em) {

    .js .graphToggle.budgetToggle, .js .graphToggle.costToggle {
        font-size: 2em;
        padding: 0.8em;
    }

    .js .graphToggle.graphToggle {
        left: 40%;
        top: -11%;
    }
    .ownHomeToggle {
        float: right;
        padding: 0.3em;
    }

    .u-align--right, html .u-align--right {
        float: right;
    }

    .editPanel.editPanelLeft .editDesc {
        float: left; 
    }
}

@media only screen and (min-width: 55em) {
    .js .editPanel .editPanelContainer h2.topGap {
        font-size:4.0em;
        left:0px;
        position:relative;
    }
    .containingGraphPanel.budget {
        overflow: hidden;
        padding-left:35%;
        padding-right:35%;
    }
    .containingGraphPanel.budget .editPanel, .containingGraphPanel.budget .graphPanel {
        float:left;
        margin-bottom: -2000px;
        position:relative;
        padding-bottom: 2000px;
    }

    .containingGraphPanel.budget .graphPanel { 
        width:100%;
    }
    .js .graphToggle{
        display:none;
    }
    #budgetDiv.activePanel:after, #costDiv.activePanel:after {
        display:none;
    }
}

@media only screen and (min-width: 65em) {
    .editPanel .typeLabel {
        font-size: 2em;
        line-height: 23px;
    }

    .editPanel.editPanelLeft .editDesc {
        float: left; 
    }

    .u-align--right, html .u-align--right {
        float: right;
    }

    .ownHomeToggle {
        float: right;
    }
}

.summaryPane2 p.aboutScenarios{
    margin-bottom:0px;
}
.finalImageCompositeContainer {
    height: 22em;
    margin-bottom: 1.6em;
    overflow: hidden;
    width: 100%;
}

.finalImageComposite {
    height: 22em;
    left: 0em;
    position: relative;
    width: 100%;
}

.finalImageComposite .finalImage {
    background-position: bottom center;
    background-repeat: no-repeat;
    float: left;
    height: 22em;
    width: 20%;
}

.finalImage.food1 { background-image: url(../images/ShapeMyFuture/categories/food/food-1.png); }
.finalImage.food2 { background-image: url(../images/ShapeMyFuture/categories/food/food-2.png); }
.finalImage.food3 { background-image: url(../images/ShapeMyFuture/categories/food/food-3.png); }
.finalImage.food4 { background-image: url(../images/ShapeMyFuture/categories/food/food-4.png); }
.finalImage.food5 { background-image: url(../images/ShapeMyFuture/categories/food/food-5.png); }

.finalImage.travel1 { background-image: url(../images/ShapeMyFuture/categories/travel/travel-1.png); }
.finalImage.travel2 { background-image: url(../images/ShapeMyFuture/categories/travel/travel-2.png); }
.finalImage.travel3 { background-image: url(../images/ShapeMyFuture/categories/travel/travel-3.png); }
.finalImage.travel4 { background-image: url(../images/ShapeMyFuture/categories/travel/travel-4.png); }
.finalImage.travel5 { background-image: url(../images/ShapeMyFuture/categories/travel/travel-5.png); }

.finalImage.hobbies1 { background-image: url(../images/ShapeMyFuture/categories/hobbies/hobbies-1.png); }
.finalImage.hobbies2 { background-image: url(../images/ShapeMyFuture/categories/hobbies/hobbies-2.png); }
.finalImage.hobbies3 { background-image: url(../images/ShapeMyFuture/categories/hobbies/hobbies-3.png); }
.finalImage.hobbies4 { background-image: url(../images/ShapeMyFuture/categories/hobbies/hobbies-4.png); }
.finalImage.hobbies5 { background-image: url(../images/ShapeMyFuture/categories/hobbies/hobbies-5.png); }

.finalImage.family1 { background-image: url(../images/ShapeMyFuture/categories/family/family-1.png); }
.finalImage.family2 { background-image: url(../images/ShapeMyFuture/categories/family/family-2.png); }
.finalImage.family3 { background-image: url(../images/ShapeMyFuture/categories/family/family-3.png); }
.finalImage.family4 { background-image: url(../images/ShapeMyFuture/categories/family/family-4.png); }
.finalImage.family5 { background-image: url(../images/ShapeMyFuture/categories/family/family-5.png); }

.finalImage.house1 { background-image: url(../images/ShapeMyFuture/categories/house/house-1.png); }
.finalImage.house2 { background-image: url(../images/ShapeMyFuture/categories/house/house-2.png); }
.finalImage.house3 { background-image: url(../images/ShapeMyFuture/categories/house/house-3.png); }
.finalImage.house4 { background-image: url(../images/ShapeMyFuture/categories/house/house-4.png); }
.finalImage.house5 { background-image: url(../images/ShapeMyFuture/categories/house/house-5.png); }

.svg .finalImage.food1 { background-image: url(../images/ShapeMyFuture/categories/food/food-1.svg); }
.svg .finalImage.food2 { background-image: url(../images/ShapeMyFuture/categories/food/food-2.svg); }
.svg .finalImage.food3 { background-image: url(../images/ShapeMyFuture/categories/food/food-3.svg); }
.svg .finalImage.food4 { background-image: url(../images/ShapeMyFuture/categories/food/food-4.svg); }
.svg .finalImage.food5 { background-image: url(../images/ShapeMyFuture/categories/food/food-5.svg); }

.svg .finalImage.travel1 { background-image: url(../images/ShapeMyFuture/categories/travel/travel-1.svg); }
.svg .finalImage.travel2 { background-image: url(../images/ShapeMyFuture/categories/travel/travel-2.svg); }
.svg .finalImage.travel3 { background-image: url(../images/ShapeMyFuture/categories/travel/travel-3.svg); }
.svg .finalImage.travel4 { background-image: url(../images/ShapeMyFuture/categories/travel/travel-4.svg); }
.svg .finalImage.travel5 { background-image: url(../images/ShapeMyFuture/categories/travel/travel-5.svg); }

.svg .finalImage.hobbies1 { background-image: url(../images/ShapeMyFuture/categories/hobbies/hobbies-1.svg); }
.svg .finalImage.hobbies2 { background-image: url(../images/ShapeMyFuture/categories/hobbies/hobbies-2.svg); }
.svg .finalImage.hobbies3 { background-image: url(../images/ShapeMyFuture/categories/hobbies/hobbies-3.svg); }
.svg .finalImage.hobbies4 { background-image: url(../images/ShapeMyFuture/categories/hobbies/hobbies-4.svg); }
.svg .finalImage.hobbies5 { background-image: url(../images/ShapeMyFuture/categories/hobbies/hobbies-5.svg); }

.svg .finalImage.family1 { background-image: url(../images/ShapeMyFuture/categories/family/family-1.svg); }
.svg .finalImage.family2 { background-image: url(../images/ShapeMyFuture/categories/family/family-2.svg); }
.svg .finalImage.family3 { background-image: url(../images/ShapeMyFuture/categories/family/family-3.svg); }
.svg .finalImage.family4 { background-image: url(../images/ShapeMyFuture/categories/family/family-4.svg); }
.svg .finalImage.family5 { background-image: url(../images/ShapeMyFuture/categories/family/family-5.svg); }

.svg .finalImage.house1 { background-image: url(../images/ShapeMyFuture/categories/house/house-1.svg); }
.svg .finalImage.house2 { background-image: url(../images/ShapeMyFuture/categories/house/house-2.svg); }
.svg .finalImage.house3 { background-image: url(../images/ShapeMyFuture/categories/house/house-3.svg); }
.svg .finalImage.house4 { background-image: url(../images/ShapeMyFuture/categories/house/house-4.svg); }
.svg .finalImage.house5 { background-image: url(../images/ShapeMyFuture/categories/house/house-5.svg); }

/* Applies to registration extra details page  */

@media only screen and (min-width: 35em) {
    .fourtyPerc {
        float: left;
        max-width: 440px;
        width: 40%;
    }

    .sixtyPerc {
        background-color: rgb(242, 243, 244);
        display: block;
        float: left;
        padding: 1.2em 4em 0 4em;
        width: 60%;
    }
}

@media only screen and (min-width: 68.5em) {    
.stackedlogo {
    background: 0;
    border-bottom: 0;
    float: left;
    margin: 1em 1.4em 0.5em 1.3em;
    padding: 0;
}

.mainContainer {
    margin: auto;
    width: 80%;
    }
}

.svg .stackedlogo > a {
    background-image: url('../images/aviva-logo/logo-aviva-stacked.png');
    height: 9em;
    margin: 0;
    width: 12em;
}

.sixtyPerc {
    background-color: rgb(242, 243, 244);
}

.fourtyPerc {
    padding: 1.2em;
}

.fourtyPerc h2 {
    color: rgb(0, 79, 182);
}
.fourtyPerc .helpToggle a {
    color: black;
    font-weight: bold;
    font-size: 1.2em;
    padding-bottom: 1em;
    margin: 2em 3em 0.5em 0;
}

.fourtyPerc .callUsRegister {
    background: url("../images/icons/icon-phone-black.png") no-repeat 0px 2px rgb(255, 255, 255);
    padding-left: 1.8em;
}

.helpCaveat {
    font-size: 12px;
}

.formInput input {
    color: rgb(52, 52, 52);
    min-height: 2.2em;
}
.formInput label {
    font-size: 1.8em;
    font-weight: bold;
}
.userPreference label {
    color: rgb(52, 52, 52);
    display: inline;
    font-size: 1.8em;
    margin-left: 2%;
    width: 65%; 
}
.userPreference input {
    padding: 0.3em;
    vertical-align: inherit;
}
.userPreference div {
    margin-bottom: 0.4em;
}
.userPreference {
    float: left;
    width: 65%; 
}
.keeping-you-informed .userPreference label {
    font-size:1.5em;
}
.js .showHide>h2:nth-of-type(odd):hover {
    background-color: transparent;
}
.required {
    color: rgb(255, 0, 0);
    display: inline;
    margin-left: 0.2em;
}

.js .showHide>h2 {
    border:0;
}
.userPreferenceCaveat {
    float: left; 
    font-size: 1.5em; 
    font-weight: bold;
    margin-right: 5%; 
    width: 28%; 
} 

.buildMyRetirement {
    background-color:#eee;
}

.buildMyRetirement .paneContainer {
    background-color:#fff;
    max-width:inherit;
    padding: 1em;
}

.lifestyleChoice{
    text-transform:capitalize;
}

.js .panelControls {
    margin:2em auto;
    text-align:center
}

.js .panelControls li {
    background:none;
    background-color:#004fb6;
    background-image:none;
    border-radius:50%;
    color:#fff;
    display:inline-block;
    font-size:.7em;
    font-weight:bold;
    line-height:2em;
    min-height:4em;
    min-width:4em;
    padding:1em;
    position:relative;
}

.js .panelControls li:hover {
    cursor:pointer;
}

.js .panelControls li.current {
    background-color:#ffd900;
    color:#004fb6;
}

.js .panelControls li.current:before{
    background: url(../images/ShapeMyFuture/grey-pointer.png) no-repeat;
    border-width: 25px;
    bottom: -3.5em;
    content: " ";
    display: block;
    left: .2em;
    min-height:3em;
    min-width:4em;
    position: absolute;

}

.js .panelControls li:nth-child(n+2) {
    margin-left:0.5em;
}

.panelContents {
    background-color:#eee;
    padding:2em;
}

.panelImage {
    background: url(../images/ShapeMyFuture/categories/background.png) no-repeat 49% center;
    background-size:cover;
    height:30em;
    position:relative;
}

.panelImage img {
    bottom:4em;        
    left:0;
    margin-left:auto;
    margin-right:auto;
    max-width:15em;
    max-height:20em;
    position:absolute;   
    right:0;
    width:auto; 
}

.panelText {
    padding-top:2em;
    position:relative;
    text-align:center;

}

.panelText h3 {
    margin-bottom:0.25em;
}

.controls {
    display:none
}

@media only screen and (min-width: 35em) {

    .buildMyRetirement {
        background-color:#eee;
        padding:2em;
    }

    .buildMyRetirement .paneContainer {
        padding: 2em 2.5em;
    }

    .js .panelControls li {
        font-size:1.2em;
    }

    .js .panelControls li.current:before {
        left:1em;
    }

    .panelImage {
        height:40em;
    }

    .panelImage img {
        bottom:5em;
    }

    .panelText {
        text-align:left;
    }

}

@media only screen and (min-width: 47.5em) {
    .js .panelControls li:nth-child(n+2) {
        margin-left:2em;
    }

    .panelText {
        min-height:32em;
    }

    .panelText #confirm {
        bottom:0;
        position:absolute;
        top:auto;
    }

    .panelText .button.buttonProceed {
        left:0;
        margin-left:0;
        padding-left:1em;
        padding-right:1em;
        width:16em;
    }

    .panelImage {
        height:45em;
    }

    .panelImage img {
        bottom:6em;
    }
}

@media only screen and (min-width: 68.5em) {
    .buildMyRetirement {
        background-color:#eee;
        padding:2em 15em;
    }

    .panelImage {
        height: 32em;
        float: right;
        position: relative;
        width: 50%;
    }
        
    .panelImage img {
        bottom: 6em;
        max-height:19em;
    }

    .panelText {
        float: left;
        padding: 0 2em 2em 0;
        width: 50%;
    }
}

/* summary page styling */

.nonJSHidden {
    display:none;
}

.js .nonJSHidden {
    display:block;
}

.summaryPane2 .paneContainer, .summaryPane2 .paneContainer .graphPanelContainer {
    padding-bottom:0;
}

.svg.js .showModalPanel .showHide h3.closed a:hover {
    cursor:default
}

.svg.js .showModalPanel .modalContent {
    overflow-y:scroll;
}

.svg.js .showModalPanel .showHide h3.closed a {
    background-image:none;
    text-decoration:none;
}

.svg.js .showModalPanel .showHide h3.closed:hover {
    background-color:#fff;
}

.headerGraphPanel .center {
    width:100%;
}

.headerGraphPanel .graphContainer {
    width:8em;
}

.headerGraphPanel .graphWrapper {
    max-width:20em;
    padding-bottom:0;
}

.graphWrapper .budgetDiv {
    margin-right:1em
}

.graphWrapper .costDiv {
    margin-left:1em
}

.containingGraphPanel.budget .editPanel, .containingGraphPanel.budget .graphPanel {
    float:none;
    margin-bottom:0;
    padding-bottom:0;
}

.containingGraphPanel.budget .graphPanel {
    border-top: 2px solid #333;
    background: #333;
    bottom: 0;
    left: 0;
    position: fixed;
    z-index: 4999;
}

.editResults {
    padding: 0 1%;
}

.editResults .graphPanel {
    display:none;
    padding:0;
    width:100%;
}

.editResults .center {
    width:100%
}

.editResults .graphWrapper {
    padding:0;
    width:100%;

}

.editResults .graphPanel .containerGraph {
    width:35%
}

.editResults .graphPanel .containerButtons {
    float:right;
    width:65%;
}

.editResults .graphWrapper .budgetDiv {
    margin-right:0
}

.editResults .graphWrapper .costDiv {
    margin-left:0
}

.editResults #costDiv {
    float:left;
}

.editResults .graphPanel > div {
    display:inline-block;
    width:49%;
}

.editResults .graphContainer {
    max-width:6em;
    width:50%;
}

.editResults .graphPanel .containerText, .editResults .graphPanel .containerButtons div.emailSummary {
    display:none;
}

@media only screen and (min-width: 35em){
    .emailSummary {
        font-size: 0.6em;
    }
}

@media only screen and (min-width: 65em){
    .emailSummary {
        font-size: 1em;
    }
}

@media only screen and (min-width: 65em){
    .editResults .graphContainer .percentageContainer {
        font-size:2.0em;
    }
}

.editResults .graphPanel .containerText p {
    padding-top:0.5em;
}

.editResults .graphPanel .containerButtons {
    text-align:right;
    vertical-align:top;
}

.editResults .graphPanel .containerButtons div {
    background-color:#fff;
    display:inline-block;
}

.editResults .graphPanel .containerButtons div:hover {
    cursor:pointer;
}

.editResults .graphPanel .containerButtons div p {
    background-position: center .5em;
    background-repeat:no-repeat;
    background-size: 1.2em;
    color:#004fb6;
    font-weight:bold;
    margin-bottom:0;
    margin-top:0; 
    padding:3em 0.5em 0.25em;
}

.editResults .graphPanel .containerButtons .saveProgress p {
    background-image: url(../images/ShapeMyFuture/save.png);
}

.editResults .graphPanel .containerButtons .emailSummary p {
    background-image: url(../images/ShapeMyFuture/email.png);
    background-position-y:1em;
    background-size:2.5em;
}

.editResults .graphPanel .containerButtons .readAssumptions p {
    background: url('../images/ShapeMyFuture/read.png') center .5em no-repeat;
    background-size: 2.5em;
    color: #004fb6;
    font-family: source_sans_prolight;
    margin: 0 auto;
    padding: 3em .5em .25em
}

.graphContainer {
    height:6.3em;
}

.valueContainer {
    font-size: 1.3em;
}

.containingGraphPanel.budget .editPanel {
    display:inline-block;
    float:none;
    margin:0em;
    position:relative;
    vertical-align:top;
}

.containingGraphPanel.budget {
    padding-left:0;
    padding-right:0;
}

.budget .editPanelRow.buttonContainer {
    padding:0;
}

.editPanelRow.buttonContainer .editDesc {
    padding: 1em 2em;
}

.editPanelLeft h2, .editPanelRight h2 {
    color:#fff;
    margin:0;
    padding:0.75em 0;
}

.editPanelLeft h2 {
    background-color:#009cb0;
}

.editPanelRight h2 {
    background-color:#59cb92

}

.js .budget .panelControls li:nth-child(n+2) {
    margin-left:.5em;
}

.budget h3 {
    margin-top:0.5em;
}

.budget .panelControls {
    margin-top:0.5em;
    padding-left: 0;
}

.budget .lower {
    background-color:transparent;
}

#budgetDiv, #costDiv {
    border-bottom:0;
}

.graphPanel .budgetDiv .lower {
    color:#009cb0
}

.graphPanel .costDiv .lower {
    color:#59cb92;
}

.budget .graphContainer {
    height:3em;
}

.budget .lower span.rate {
    color:#fff;
    font-size:.5em;
    margin-top:-0.5em;
}


.budget .panelImage {
    float:left;
    height:15em;
    width:100%;
}

.js .budget .panelImage img {
    bottom:2em;
    max-height:10em;
    max-width:90%;
}

.budget .panelText {
    clear:both;
    min-height:0;
    padding-top:1em;
    width:100%;
}

.budget .panelText h4 {
    margin-bottom:.3em;
}

.budget .panelText #itemDescription {
    margin-bottom:0;
}

.otherThings h2 {
    color:#333;
}

.otherThings .podGroup {
    margin:2%;
}

.otherThings .podGroup .pod {
    margin:2%;
}

.otherThings .podGroup .pod {
    background-color:#009cb0;
    border:0;
    color:#fff;
    text-align:left;
}

.otherThings .pod h3 {
    margin-bottom:0;
}

.otherThings .pod h3, .otherThings .pod a {
    color:#fff;
}

.otherThings .podLink a {
    background-image: url(../images/icons/arrow-white.png);
}

.svg .otherThings .podLink a {
    background-image: url(../images/icons/arrow-white.svg)
}

.js .showHide {
    border-bottom:0;
    margin-bottom:0;
}

.js .showHide:last-of-type {
    border-bottom:1px dashed #ccc;
}

.showModalPanel .closeModal {
    background: url(../images/ShapeMyFuture/close-slidepanel.png) no-repeat;
    background-size:contain;
    color:#fff;
    position:fixed;
    right:25%;
    top:0;
    width:1.5em;
}

.showModalPanel .closeModal span {
    display:inline-block;
    text-indent:-9999px
}

.desktopOnly {
    display:none;
}

@media only screen and (min-width: 35em) {
    .otherThings .podGroup .pod {
        margin-left:0;
        margin-top:0;
        width:49%;
    }

    .otherThings .podGroup .pod:nth-child(2n) {
        margin-right:0;
    }

    .modalPanel div.modalContent {
        margin-top:5em;
    }

    .showModalPanel .closeModal {
        margin-right:1.5em;
        top:7.5em;
    }

    .editResults .graphPanel > div {
        width:33%;
    }

    .editResults .graphPanel .containerButtons div:nth-child(n+2) {
        margin-left:0.2em;
    }

    .budget .panelImage {
        width:43%
    }

    .budget .panelText {
        clear:none;
        float:left;
        min-height:0;
        padding:0 0 0 2em;
        width:57%
    }

    .editResults .graphPanel .containerText {
        width:39%;

    }
    .editResults .graphPanel .containerGraph {
        width:21%;
    }
    .editResults .graphPanel .containerButtons {
        width:39%;
    }
    
    .editResults .graphPanel .containerText {
        color:#ddd;
        display:inline-block;
        font-size:1.2em;
        vertical-align:top;
    }

}

@media only screen and (min-width: 47.5em) {
    .editResults .graphPanel .containerButtons div.emailSummary {
        display:inline-block;
    }

    .containerButtons .mobileHidden {
        display:inline-block;
    }

    .editResults .graphPanel .containerText {
        width:33%;
    }
    .editResults .graphPanel .containerGraph {
        width:16%;
    }
    .editResults .graphPanel .containerButtons {
        width:50%;
    }
}

@media only screen and (min-width: 68.5em) {
    .otherThings .podGroup .pod {
        width:32%;
    }

    .headerGraphPanel .graphWrapper {
        max-width:24em;
    }

    .headerGraphPanel .graphContainer {
        width:9.4em;
    }

    .graphWrapper .budgetDiv {
        margin-right:1.95em;
    }

    .graphWrapper .costDiv {
        margin-left:1.95em;
    }

    .otherThings .podGroup .pod:nth-child(2n) {
        margin-right:2%;
    }

    .otherThings .podGroup .pod:nth-child(3n) {
        margin-right:0;
    }

    .editResults .graphPanel .containerGraph {
        width:21%;
    }

    .containingGraphPanel.budget .editPanel {
        margin: 2em;
        width: 40%;
    }

    .editPanelLeft .editPanelContainer {
        border-right:5px solid #009cb0
    }

    .editPanelRight .editPanelContainer {
        border-left:5px solid #59cb92
    }

    .js .editPanelRight .panelControls li {
        font-size: 0.9em;
    }

    .js .panelControls li.current:before {
        left:1em;
    }

    .containingGraphPanel.budget .graphPanel {
        padding:1em;
    }

    .editResults .graphPanel .containerButtons {
        text-align:center;
        width:41%;
    }

    .editResults .graphPanel .containerButtons div:nth-child(n+2) {
        margin-left:1em;
    }

    .editResults .graphPanel .containerText {
        font-size:1.5em;
        width:37%
    }

    .editResults .graphContainer {
        width:10em;
    }

    .editResults .graphContainer .percentageContainer {
        margin-top:.1em;
    }

    .editResults .graphPanel .containerButtons div {
        border-radius:5px;
    }

    .desktopOnly {
        display:inline-block;
    }
}

.nav-search input[type="text"] {
    text-align:left;
}

div.disabledButton.saveProgress p, div.disabledButton.emailSummary p {
    background-color: grey;
    cursor: default;
}

.saveProgress, .readAssumptions {
    font-size: 0.6em;
}

.readAssumptions {
    background-color: #fff;
    border: none;
    border-radius: 5px;
    display: inline-block;
    margin-left: 1em
}

.readAssumptions:hover, .readAssumptions:focus {
    border: none
}

@media only screen and (min-width: 65em){
    .saveProgress, .readAssumptions {
        font-size: 1em;
    }
}

/* CSP Global Nav Fixes */

#avivaHeader nav.nav-primary {
    position: relative;
    top: 0;
}

@media only screen and (min-width: 47.5em) {
    #avivaHeader nav.nav-primary {
        position: static;
    }
}

div#main {
    margin-top: 0;
}

/* Framework overides */

.m-card-content.u-pb--1 {
    padding-bottom: 1em;
}

.m-card-content.u-pt--1 {
    padding-top: 1em;
}

.m-card-content.u-pb--2 {
    padding-bottom: 2em;
}

.m-card-content.u-pt--2 {
    padding-top: 2em;
}

.m-card-content.u-pt--3 {
    padding-top: 3em;
}

@media only screen and (min-width: 35em){
    .a-button.u-align--left {
        float: none;
    }
}

@media only screen and (min-width: 65em){
    .a-button.u-align--left {
        float: none;
    }
}