.scenarioLegend, .repayment-num,
.renovation-result-partialWrap,
.affordability-result-partial,
.homeLoanModule .wrapResultsPanel,
.homeLoanModule .bottom.resultsExpansionArrow,
.repaymet-adjust-ajax-refresh,
.row{ width: auto }

.homeLoanModule fieldset, .SavingsAndAssetsForm { margin-right: 200px }

.noProgressPanel fieldset { margin-right: 0 }

.homeLoanModule .wrapSectionPrimary { margin-top: -2px }

.wrapDisclaimers .disclaimers { width: 972px }

body { font-family: "Myriad Pro Regular", Helvetica, Arial, Sans-Serif }

* { -webkit-tap-highlight-color: transparent }

/*===============================
------------ HEADER -------------
===============================*/

#wrapHeader {
    height: 48px;
    margin-top: 0;
    background: none;
    width: 100%;
    margin-bottom: 0;
}

#header h1 a {
    margin: 5px;
    background: transparent url('img/HomeLoan/ANZ-nonretinalogo.png') no-repeat 0 0;
    width: 290px;
    height: 48px;
    margin: 0;
    margin-top: -48px;
    position: relative;
}

h2.pageHeader {
    position: absolute;
    top: 17px;
    color: #fff;
    margin-left: 190px;
    font-weight: normal;
}

.introBtnspacing {
    padding: 20px 0 0 0;
    width: 100%;
}

/*===============================
------ RESPONSIVE FOOTER -------
===============================*/

#wrapFooter { margin: 0 }

#navFooter li.remove-border { border: none }

#footerLnks a, #footerLnks ul li {
    float: none;
    clear: both;
}

#footer .copyright { line-height: 1.5em }

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.homeLoanModule select { background: #fff }

.homeLoanModule .scrollTermsConditions { width: 95% }

.ConditionalForm fieldset a { text-align: right }

.btn.btnTertiary.medium { margin: 14px 0 10px 0 }

.homeLoanModule .btn.xLarge {
    padding: 12px 40px;
    border-color: #3f680a;
}

.homeLoanModule .btnSecondary, .btn .btnSecondary {
    -moz-box-shadow: inset 0 0 2px #c3e687;
    -webkit-box-shadow: inset 0 0 2px #c3e687;
    box-shadow: inset 0 1px 0 #c3e687;
    border-color: #3f680a;
}

#wrapContent { padding: 50px 0 }

hr {
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    margin: 25px 0 30px 0;
    clear: both;
    height: 1px;
}

.homeLoanModule .primaryHeading {
    font-size: 34px;
    line-height: 1.4em;
    color: #004165;
    font-weight: 600;
    font-family: "Myriad Pro Semibold", Arial, sans-serif;
    display: block;
    text-align: center;
    padding-bottom: 30px;
}

.dark-blue-header {
    margin-top: 0;
    margin-bottom: 0;
    width: 28%;
    background: #004165;
    background: transparent url('img/HomeLoan/header-dark-gradient.png') repeat-x;
    background-size: 2px 48px;
    height: 48px;
    float: left;
}

.light-blue-header {
    margin-top: 0;
    margin-bottom: 0;
    background: #004165;
    width: 72%;
    background: transparent url('img/HomeLoan/header-light-gradient.png') repeat-x;
    background-size: 2px 48px;
    height: 48px;
    float: left;
}

#wrapFooterLinks {
    background: #007dba;
    padding: 40px 30px 0 30px;
}

#footer, #footerLnks {
    color: #fff;
    padding: 0;
    border-top: none;
    width: 972px;
    margin: 0 auto;
    overflow: auto;
}

#header {
    width: 972px;
    margin: 0 auto;
    float: none;
}

#wrapFooter  {
    font-family: Helvetica, Arial, Sans-Serif;
    font-size: 11px;
    background: #004165;
    padding: 30px;
    width: auto;
}

.threeCol {
    width: 33.333333333%;
    float: left;
    margin-bottom: 20px;
    display: block;
    background: transparent url("img/HomeLoan/vertical-rule.png") no-repeat 100% 0;
    min-height: 213px;
}

.threeColRight {
    margin-right: 0;
    background: none;
}

#footer a, 
#footer a:link, 
#wrapFooterLinks, 
#wrapFooterLinks a:link { color: #fff }

.homeLoanModule .wrapProgressPanel, 
.homeLoanModule .rightPanel.small { width: 200px }

#navFooter li a { font-weight: bold }

#footerLnks h5 {
    color: #fff;
    font-size: 16px;
    line-height: 1.3em;
    padding-bottom: 10px;
    font-weight: bold;
}

#footerLnks ul {
    overflow: hidden;
    float: left;
    margin-top: 10px;
}

    #footerLnks ul li {
        min-height: 18px;
        overflow: hidden;
    }

#footerLnks a {
    font-size: 15px;
    color: #fff;
    text-decoration: none;
    margin-bottom: 10px;
    padding-top: 10px;
    padding-right:10px;
    box-sizing:border-box;
    float: left;
    line-height: 1.3em;
    width: 100%;
    -webkit-transition: all .2s linear;
    text-shadow: 1px -1px 1px #035c8b;
}
    #footerLnks a:hover { color: #95cbe5 }

    #footerLnks a span {
        float: left;
        width: 95%;
    }

#footerLnks .threeColLeft a span { width: 80% }

#footerLnks a i {
    float: left;
    display: block;
}

.homeLoanModule .introSection {
    padding: 0 0 10px 0;
}


    #footerLnks .threeCol h5, #footerLnks .threeCol ul { padding: 0 0 0 30px; width:100%; box-sizing:border-box }

#navFooter { margin-bottom: 15px }

    #navFooter li {
        margin-right: 14px;
        padding-right: 14px;
        margin-bottom: 5px;
    }

#footerLnks .threeCol ul.footerColNoTitle {padding-top:20px}

.homeLoanModule .cc-rates {
    float: left;
    padding-right: 3%;
    width: 30%;
}

.change-account-type { margin: 0 0 10px 0 }

.AccountType .btn { margin: 0 0 10px 0 }

/* ACCOUNT FINDER SPECIFIC */

.Calculator {
    width: 100%;
    margin-left: 0;
}

    .Calculator a.centerLink,
    .Calculator .disclaimers a { text-decoration: underline !important }

    .Calculator .primaryHeading {
        display: block;
        text-align: left;
        padding-bottom: 0;
        font-weight: normal;
    }

    .Calculator .introSection p { margin-bottom: 20px }

.topProgressPanel.ui-widget-content { width: 100% }

.questionAnswer { padding: 20px 30px 20px 20px }

.questionImage {
    width: 115px;
    height: auto;
    }

.twoResults .resultPanel { width: 96% }

#slider {
    padding: 0;
    margin: 0;
}

.wrap-account-options { width:200% }

/* Debt Consolidation Calculator */

table.debtConsolidationResultsTable {
    width: 100%;
}

table.debtConsolidationResultsTable > thead > tr > th:first-child {
    width: 50px;
}

/* Combine Debts Simple Calculator 
Personal Loan Repayments Calculator Mobile results panel 
Personal Loan Borrowing Calculator results panel */

.cs-results-panel-calculations {
    border-top: 1px solid #4da0c6;
    margin: 10px 0 0;
}

.cs-results-panel-calculations .cs-results-panel-loan-repayments {
    margin: 52px 0 0;
}

.cs-results-panel-column,
.cs-results-panel-borrowing-calculator > .cs-results-panel-column {
    width: 100%;
    float: none;
}

.cs-results-panel-header {
    border-top: 0;
    float: left;
    margin: 0;
    display: inline;
}

.cs-results-panel-cell {
    text-align: right;
    display: inline;
    float: right;
    padding-top: 10px;
}

.threescenarios .cs-personal-loan-repayments-calculator,
.threescenarios .cs-personal-loan-repayments-calculator-bg {
    min-height: 374px !important;
}

/*=====================================
------------- MEDIA QUERIES -------------
=====================================*/

@media (max-width: 1040px) {
    .homeLoanModule .column .field-validation-error {
        clear: none;
        float: left;
    }

    .wrap-header-banner .banner-intro-wrapper{ margin:50px 30px 0 30px }

    .icon-enter-result { display: none !important }

    .homeLoanModule .enterResults {
        margin-left: 0;
        max-width: 220px;
    }

    .repaymentResults {
        clear: both;
        margin-top: 10px;
    }

    .homeLoanModule .page-validation-success .iconSuccess,
    .homeLoanModule .page-validation-error .iconError,
    .homeLoanModule .page-validation-alert .iconAlert { width: 80% }
    }

@media (max-width: 766px) and (min-width: 561px) {
    .homeLoanModule .wrapProgressPanel, 
    .homeLoanModule .rightPanel.small { width: 100% }

    .rightPanel.small.col.stickyProgressElement { width: 200px }
    }

@media (max-width: 767px) {

    #wrapContent { overflow: hidden }

    #footer { width: auto }

    #footerLnks .threeCol h5, 
    #footerLnks .threeCol ul,
    #footerLnks .threeColLeft h5, 
    #footerLnks .threeColLeft ul { padding: 0 30px 0 0}

    .homeLoanModule .column .field-validation-error, 
    .banner-intro-left, .credit-card-wrapper, 
    .wrap-header-banner   { width: auto }

    .wrap-header-banner .banner-intro-wrapper {
        height:auto;
        margin: 30px 30px 0 30px;
    }

    .credit-card-image, .reflection-wrapper { display:none }

    .header-banner h2{
        font-size: 32px;
        margin: 0 0 20px 0;
        line-height: 1.3em;
        height: auto;
    }

    .homeLoanModule .tooltip .tooltipText,.credit-card-image { width: 100% }

    #footerLnks,
    #header { width: auto }

    #wrapContent {
        border-radius: 0;
        padding-bottom: 0;
        margin: 0 30px 30px 30px;
        width: auto;
    }

    .homeLoanModule .actionLeft { margin: 20px 0 }

    .homeLoanModule .partialContent { width: auto }

    .homeLoanModule .wrapResultsPanel, .homeLoanModule .resultsPanel { border-radius: 0 }
    
    .threeCol {
        width: 100%;
        min-height: 0;
        padding: 0 0 10px 0;
        background: transparent url("img/HomeLoan/horizontal-rule.png") no-repeat 100% 100%;
    }

    .threeColRight { background: none }

    .wrapProgressPanel { width: 92% }

    .homeLoanModule .wrapSectionPrimary { border-radius: 0 }

    .homeLoanModule .calculatedResults { padding: 2% 2% 5% 2% }

    .homeLoanModule .extraInfo.right { padding: 20px 0 0 0; }

    .homeLoanModule .calculatedResults.left { width: 96% }

    #navFooter li {
        width: 100%;
        padding: 15px 0 15px 0;
        border-bottom: 1px solid #59839b;
        border-right: none;
    }


    .icon-side-note-arrow,
    .homeLoanModule .sideNote { display: none }

    .homeLoanModule fieldset { margin-right: 200px }

    .noProgressPanel fieldset { margin-right: 0 }

    .deviceVersion.icon-side-note-arrow {
        display: block;
        margin-bottom: 30px;
    }

    .homeLoanModule .sideNote.deviceVersion {
        display: block;
        width: auto;
        font-size: 11px;
        margin: 10px 0 0 0;
    }

    .icon-clock:before {
        float: left;
        display: inline;
    }

    .homeLoanModule .sideNote.deviceVersion p {
        float: left;
        border-top: 0 none;
        border-left: 1px solid #fff;
        margin-left: 20px;
        width: 56%;
        padding: 0 0 0 20px;
    }

    .homeLoanModule .sideNote.deviceVersion .notch {
        float: left;
        clear: both;
    }

    .wrapDisclaimers .disclaimers { width: 100% }

    .wrapDisclaimers a.toggle { margin-right: 20px !important }

    .wrapDisclaimers a.disclaimerHeader { margin-left: 20px }

    .wrapDisclaimers .disclaimers div,
    .wrapDisclaimers .disclaimers p {
        padding: 0 15px 0 5px;
    }

    hr { border-top: 1px solid #fff }

    .homeLoanModule .page-validation-alert .iconAlert { width: 70% }
   
    select#PersonalDetails_Country { width: 240px }

    .homeLoanModule .ui-buttonset .ui-button { max-width: 50% }

    .card-picker-wrapper,
    .card-picker-wrapper .chosen-card { width:100% }
    #footerLnks .threeCol ul.footerColNoTitle {padding-top:0; margin-top:0}

}

@media (max-width: 766px) and (min-width: 561px) {
    .homeLoanModule .wrapProgressPanel, 
    .homeLoanModule .rightPanel.small { width: 100% }

    .rightPanel.small.col.stickyProgressElement { width: 200px }
}

@media (max-width: 560px) {

    h2.pageHeader { display: none }

    .wrap-account-options { width:230% }
    /*.homeLoanModule h4 {min-height:52px} caused unneccesary height on Migration form*/
}

@media (max-width: 954px) {
    .groupedAction {
        float: left;
        clear: both;
        margin: 0 0 20px 0;
    }

    .groupedActionRight {
        float: left;
        clear: both;
    }

    .hide-mobile-ie8 { display:none }
}

@media (max-width: 960px) {
    .breadcrumbWrapper {
        width: 100%;
        text-align: center;
    }

    .breadcrumb {
        width: 100%;
        display: block;
    }

    .three-crumb { width: 33.33% }

    .two-crumb { width: 50% }

    .crumb-4 {width:25%}


    }
@media (max-width:1040px) {
    .progressBar ul {width:100%}
}
@media (max-width: 1040px) and (min-width: 768px) {

    .homeLoanModule .column .field-validation-error { width: auto }

    #wrapContent, #header, .homeLoanModule, .wrapDisclaimers .disclaimers { width: 100% }

    .wrapDisclaimers a.toggle { margin-right: 20px !important }

    .wrapDisclaimers a.disclaimerHeader { margin-left: 20px }

    .wrapDisclaimers .disclaimers div { padding: 0 10px 10px 10px }

    .threeCol.homeLoanModule { width: 33.333333333% }

    #footerLnks, .wrap-header-banner { width: 100% }

    .homeLoanModule .partialContent { width: 65% }

    .homeLoanModule .sideNote { width: 23% }

    #footer { width: auto }

    #wrapContent {
        margin: 0 30px 0 30px;
        width: auto;
    }

    .card-picker-wrapper,
    .card-picker-wrapper .chosen-card { width:400px }

}

@media (max-width: 1040px) {
    .card-picker-wrapper .card-picker-dropdown {
        width:100%;
        top: auto;
        left: auto;
        right: auto;
        margin-top:20px;
        float:left;
    }
    .card-picker-wrapper .card-picker-dropdown li {
        clear:both;
        width:100%;
    }

    .hide-custom-dropdown{
       webkit-opacity: 0;
      -moz-opacity: 0;
      opacity: 0;
      -webkit-transition: none;
      -moz-transition: none;
      -ms-transition: none;
      -o-transition: none;
      transition: none;
    }

    .card-picker-wrapper .card-picker-dropdown li.left-col {
        border-right:0;
        border-bottom:1px solid #d9d9d9;
    }

    .card-picker-wrapper .card-picker-dropdown li.right-col { padding-left:10px }

    .card-picker-wrapper .card-picker-dropdown li.line {
        margin-bottom:0;
        padding:0;
    }

    .card-picker-wrapper .card-picker-dropdown li.last-card-option { border-bottom:0 }

    .progressBar {display:none}
    }

@media (max-width: 825px) { .homeLoanModule .sideNote { width: 21% }
}

@media (max-width: 530px) { 

    #canvas {
        width:60% !important;
        height:280px !important;
        float:left;
        clear:both;
    }

    .canvas-key {
        float:right;
        margin-left:0;
        width:30%;
    }
    .canvas-key .key-color {
        margin:0 auto 5px auto;
        display:block;
    }

    .homeLoanModule .callToActionSection .leftSectionHalf, .homeLoanModule .callToActionSection .rightSectionHalf {
        width: 100%;
        float: left;
        clear: left;
    }

    .homeLoanModule .callToActionSection .cta-sub-heading-content.short {
        width: auto;
    }

}
@media (max-width: 700px) {
    .breadcrumb { font-size: 12px }

	.breadcrumb .crumb a {
		font-size: 12px;
		padding: 0 15px;
	}

}

@media (max-width: 690px) {
    .homeLoanModule .wrapProgressPanel,
    .homeLoanModule .rightPanel.small { display: none }

    .homeLoanModule fieldset,
    .homeLoanModule .wrapPanels { border-radius: 0 }

    .ConditionalForm .wrapSectionPrimary { margin-bottom: 0 }

    .ConditionalForm .crumblet .breadcrumbReviewInner .current { width: 118% }

    .ConditionalForm fieldset.IncomeForm, .ConditionalForm fieldset { width: auto }

    .introBtnspacing { padding: 20px 0 30px 0 }

    .sectionCallback .btn.btnSecondary.Submit.large { margin-left: 30px }

    .row { width: 100% }

    .homeLoanModule .btn.xLarge { margin-left: 30px }

    .homeLoanModule .partialContent { margin: 0 0 0 30px }

    .homeLoanModule fieldset { margin-right: 0  }

    .homeLoanModule .wrapSectionPrimary { margin-bottom: 0 }

    .homeLoanModule .page-validation-error {
        border-radius: 0;
        margin-bottom: 0;
        border-top: 1px solid #ebb8b5;
        border-bottom: 1px solid #ebb8b5;
    }

    .homeLoanModule .page-validation-success {
        border-radius: 0;
        margin-bottom: 0;
        border-top: 1px solid #8cae3a;
        border-bottom: 1px solid #8cae3a;
    }

    #wrapContent { margin: 0 }

    .homeLoanModule .introSection,
    .homeLoanModule .section { padding: 0 20px 0 20px }




    /*Migration Translator*/
    .introColLeft {margin-right: 0}
    .introColLeftContent {margin-right: 0}
    .rightBtns {float:left; width:100%; margin-top:10px}
    .translateBtn {margin:0 10px 0 0}

    /* ACCOUNT FINDER SPECIFIC*/

    .slider { padding: 20px 40px 40px }
        .slider.prev,
        .slider.next { padding-top: 60px }

    .accountFinderContext {
        margin-top: -90px;
        margin-bottom: 60px;
    }

    .landingPanel.finderContext { display: none }

    .bankingOptions {
        clear: both;
        width: 100%;
        margin-top: 20px;
        -webkit-box-shadow: inset -4px 8px 8px -8px #bbbbbb;
        -moz-box-shadow: inset -4px 8px 8px -8px #bbbbbb;
        box-shadow: inset -4px 8px 8px -8px #bbbbbb;
    }

        .bankingOptions ul li.last { display: none }

        .bankingOptions h4 {
            width: 100%;
            box-sizing: border-box;
        }

        .bankingOptions a:hover {
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
        }

    .whatAccount { width: 100% }

    .landingPanel .questionImage { width: 40% }

    .landingPanel .questionAnswer { padding: 10px }

    .questionAnswer .questionImage {
        width: 80%;
        margin-top: 0;
    }

    .twoResults .result {
        width: 80%;
        margin: 0;
    }

    .wrapSummery { margin: 0 20px 20px 20px }

    .summeryRow a { padding: 10px 10px 10px 0 }
        .summeryRow a span {  display: none }

    .bottomSectionWrap { padding: 15px }

        .bottomSectionWrap a.small { width: 100%; }

    .ranges {
        width: 80%;
        margin: 0 10%;
    }

    .QPanel .statements {
        border: 1px solid #b9c9d0;
        width: 80%;
        margin: 0 10%;
        border-radius: 4px;
    }
        .QPanel .statements .questionAnswer { width: 100% }
        .QPanel .statements .rightQColumn { border-right: 1px solid #fff }

            .QPanel .statements .rightQColumn.first {
                border-top-right-radius: 0;
                border-top: 1px solid #fff;
            }

        .QPanel .statements.even .rightQColumn.last { border-top: 1px solid #b9c9d0 }

        .QPanel .statements .rightQColumn.last {
            border-bottom-right-radius: 0;
            box-shadow: none;
        }

        .QPanel .statements .leftQColumn {
            border-top: 1px solid #fff;
            border-left: 1px solid #fff;
            border-right: 1px solid #fff;
        }

        .QPanel .statements.even .rightQColumn.last,
        .QPanel .statements.odd .leftQColumn.last {
            border-bottom-left-radius: 4px;
            border-bottom-right-radius: 4px;
        }

        .QPanel .statements .leftQColumn.first {
            border-top-right-radius: 4px;
            border-top-color: transparent;
        }

        .QPanel .statements .leftQColumn.last {
            box-shadow: none;
            border-bottom: 1px solid #fff;
        }

        .QPanel .statements .questionAnswer.first:hover,
        .QPanel .statements .questionAnswer.last:hover,
        .QPanel .statements .questionAnswer:hover {
            border-right: 1px solid #007dba;
            border-top: 1px solid #007dba;
            border-left: 1px solid #007dba;
            border-bottom: 1px solid #007dba;
        }

    .wrapDisclaimers.noHeading {
        padding: 20px;
        box-sizing: border-box;
    }

    .wrap-canvas { padding:0 0 10px }
        .wrap-canvas label.canvas-axis { display:none }

    .homeLoanModule .onescenario .calculatedResults .row .item {
        width:100%;
        margin:10px 0;
        padding:0 3%;
        box-sizing:border-box;
    }
    
    #canvas {
        height:280px !important;
    }

}

@media (max-width: 480px) {
    #wrapContent, 
    #wrapFooter, 
    #wrapHeader { width: auto }

    .homeLoanModule .calculatedResults { margin: 4% }

    .homeLoanModule .column{
        clear: both;
        padding: 8px 0;
    }
    .perField {clear:both; padding:8px 0; overflow:hidden}
    .perField label{
        float:none;
        margin:0 0 4px 0
    }

        .homeLoanModule .column.repaymentResults { margin-top: 0 }

    .homeLoanModule .btn.small { 
        padding: 8px 13px;
        box-sizing:border-box;
    }

        .homeLoanModule .btn.small.responsiveDisableBorderBox {
            box-sizing: inherit;
        }

    .homeLoanModule input.xlong, .homeLoanModule textarea.xlong, .homeLoanModule select.xlong,
    .homeLoanModule input.long, .homeLoanModule textarea.long, .homeLoanModule select.long { width: 100% }

    .homeLoanModule .calculatedResults.left { width: 86% }

    .homeLoanModule .actionLeft .btn.small { margin-right: 15px }

    #saveRetrieveSlideDownArea { width: 233px }

    .homeLoanModule .page-validation-success .iconSuccess,
    .homeLoanModule .page-validation-error .iconError { width: 60% }

    .homeLoanModule .btnGroup.left { clear: both }

    .homeLoanModule .dropdownWrapper { margin-bottom: 10px }

    .homeLoanModule .row.TextAreaCheckFix { width: auto }

    .breadcrumb {
        height: 60px
    }

}

@media (max-width: 511px) {

    .homeLoanModule .sideNote.deviceVersion { padding: 20px }

        .homeLoanModule .sideNote.deviceVersion .notch { margin: 20px 0 -40px -20px }

        .homeLoanModule .sideNote.deviceVersion p {
            padding: 0 0 0 10px;
            font-size: 16px;
            line-height: 1.2em;
            width: 50%;
        }

    .ConditionalForm .crumblet .breadcrumbLoanInner a { padding: 10px 0 7px 0 }

        .ConditionalForm .crumblet .breadcrumbLoanInner a.ConditionalFormAccountLink,
        .accountModule .crumblet .breadcrumbLoanInner a { padding: 16px 0 15px 0 }

    .longTerm .longTermDisclaimer,
    .longTerm .resultsTable { width:100% }

    #GoalSavingsCalculatorOuter .wrapResultsPanel.withSlider .wrapResult .result p,
    #GoalSavingsCalculatorOuter .wrapResultsPanel.withSlider .wrapResult .result select { float:none }

    #GoalSavingsCalculatorOuter p span.topDollar {
        float:none;
        vertical-align:top;
        margin-top:0;
        position:relative;
    }
        a.btnWhiteBlueLine {
    display:block;
    margin:10px auto;
    width:160px;
    text-align:center;
    float:none
}
    p.importantInformation.goMoney {
    float: none;
    width: 200px;
    text-align: center;
    margin: 15px auto 10px;}

}


@media (max-width: 423px) {
    .ConditionalForm .crumblet .breadcrumbFinancialInner a, 
    .ConditionalForm .crumblet a.disabled { padding: 10px 0 7px 0 }

    #InvestmentPreference .ui-buttonset .ui-button { min-height: 106px }

    .card-picker-wrapper .card-picker-dropdown { width:100% }

    .homeLoanModule .sectionPrimary a.link-right { 
        float:left; 
        clear:both;
        padding-bottom:10px;
    }

    .homeLoanModule .card-description { max-width:60% }

    .homeLoanModule .chosen-card .card-description { padding-right:10px }

    .homeLoanModule .card-image {
        width:80px;
        height:auto;
    }
}
@media (max-width: 371px) {
    a.btnReview.current.Review, 
    .personalloanModule .breadcrumbReviewInner .current, 
    .ConditionalForm .crumblet a.ReviewLink { padding: 10px 0 7px 0 }

    .ConditionalForm .crumblet .breadcrumbReviewInner .current { width: 105% }
    
     .translateBtn {margin-right:4px}
    .translateBtn a:link {
    width:127px;
    height:21px;
    background-size:cover;
    padding-top:7px
}
.translateBtn a:link:hover {
    background:url(img/translate-btn-bg.jpg) center no-repeat;
    background-size:cover
}
.translateBtn a.js-LanguageToggleSelected {
    background:url(img/translate-btn-bg.jpg) top no-repeat;
    background-size:cover
}
.translateBtn a.js-LanguageToggleSelected:hover {
    background:url(img/translate-btn-bg.jpg) top no-repeat;
    background-size:cover
}
     .largeCardDisplay {width:100%}

}

@media (max-width: 355px) {

    .homeLoanModule .sideNote.deviceVersion { padding: 15px }

        .homeLoanModule .sideNote.deviceVersion .notch { margin: 20px 0 -35px -15px }

        .homeLoanModule .sideNote.deviceVersion p {
            font-size: 14px;
            width: 45%;
            margin-left: 15px;
        }


    .ConditionalForm .crumblet a { font-size: 13px }

    .homeLoanModule .page-validation-alert .iconAlert { width: 60% }

    #InvestmentPreference .ui-buttonset .ui-button { min-height: 138px }

    .wrap-account-options { width:270% }

    .translateBtn {margin-bottom:5px}

}

@media (max-width: 767px) {
    .homeLoanModule .rightPanel, 
    .homeLoanModule .extraInfo { width: 100% }

        .homeLoanModule .extraInfo.right .infoIcon {
            margin: -35px auto 0 auto;
            background: transparent url('img/HomeLoan/icon-sprite.png') no-repeat 0 -558px;
            width: 36px;
            height: 30px;
            float: none;
        }

    .homeLoanModule .sideNote { display: none }

    .ManuallyChooseFund .wrap-toggle .toggle { text-align:left }
    
    .largeCardDisplay {margin:0 auto 20px auto; float:none}

    .optionsSection {padding:0; width:100%}
    ul.footerColNoTitle {padding-top:0}


    
    /*confirmation screen*/
  .homeLoanModule .calculatedResults.left .optionsSection p {
    text-align:center}

 .calculatedResults .largeCardDisplay {width:100%}
  .calculatedResults .largeCardDisplay img {width:250px}
 .calculatedResults .optionsSection {padding:0 20px 0 20px; margin:0}
 .calculatedResults .optionsSectionWrap {width:100%}
}

/*=====================================
------------- RETINA ICONS ------------
=====================================*/

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) {

    #header h1 a {
        background: transparent url(img/logo.png) no-repeat 0 0;
        background-size: 290px 48px;
        height: 48px;
    }

    .homeLoanModule .tooltip .tooltipIcon {
        background: url("img/HomeLoan/tooltip-icon.png") no-repeat 0 0;
        background-size: 24px 24px;
        height: 24px;
    }
    .tooltip .tooltipIcon.tooltip-margin {margin-top:13px} /*add to tooltips that sit alongside select or inputs*/


        .homeLoanModule .tooltip .tooltipIcon:hover {
            background: url("img/HomeLoan/tooltip-hover-icon.png") no-repeat 0 0;
            background-size: 24px 24px;
            height: 24px;
        }

    .homeLoanModule .tooltip.show .tooltipIcon {
        background: url("img/HomeLoan/tooltip-close-icon-retina.png") no-repeat 0 0;
        background-size: 24px 41px;
        height: 40px;
    }

        .homeLoanModule .tooltip.show .tooltipIcon:hover {
            background: url("img/HomeLoan/tooltip-close-hover-icon.png") no-repeat 0 0;
            background-size: 24px 41px;
        }

    .has-js .label_radio {
        background: url("img/HomeLoan/empty-radio-button.png") no-repeat 1px 2px;
        background-size: 20px 20px;
        height: auto;
    }

        .has-js .label_radio:focus {
            background: url("img/HomeLoan/focus-radio-button.png") no-repeat -2px -1px;
            background-size: 26px 25px;
            height: auto;
        }

    .homeLoanModule .radioButtons.input-validation-error label.r_on,
    .has-js label.r_on {
        background: url("img/HomeLoan/selected-radio-button.png") no-repeat 1px 2px;
        background-size: 21px 21px;
        height: auto;
    }

    .homeLoanModule .radioButtons.input-validation-error .label_radio {
        background: url("img/HomeLoan/error-radio-button.png") no-repeat 1px 2px;
        background-size: 21px 21px;
        height: auto;
    }

    .has-js .label_check {
        background: url("img/HomeLoan/check-box.png") no-repeat 0 0;
        background-size: 24px 24px;
        height: auto;
    }

    .has-js label.c_on {
        background: url("img/HomeLoan/selected-check-box.png") no-repeat 0 0;
        background-size: 24px 24px;
        height: auto;
    }

    /* CREDIT CARD FORM */
    .card-flag {
        background:transparent url(img/Homeloan/credit-card-retina-sprite.png) no-repeat -20px 0;
        background-size: 97px 95px;
        width:26px;
    }

    .card-name.hovering .card-flag,
    .card-name:hover .card-flag { background-position:-46px 0 }

    .card-selectedflag,
    .card-name.hovering .card-selectedflag,
    .card-name:hover .card-selectedflag { background-position:-72px 0 }
}

/*----------Advice Disclosure--------*/
@media (max-width: 1040px) {
    .cs-advice-disclosure-account {
        float: left;
        width: 100%;
        margin-left: 0;
    }
}
@media (max-width: 690px) {
    .cs-advice-disclosure-account {
        box-sizing: border-box;
        padding: 0 15px;
    }
}

@media (max-width: 580px) {
    /* ACCOUNT FINDER SPECIFIC*/

    .Calculator .actionBlock {
        display: none
    }

    .Calculator .callToActionSection p.mobileVS {
        display: block;
        width: 100%;
        margin: 0;
        text-align: center !important;
    }

    .Calculator .seperator.mobileVS {
        display: block
    }

    .mobileCallBtn {
        position: relative;
        z-index: 1;
    }

    .Calculator .callToActionSection a {
        width: 100%
    }

    .Calculator .callToActionSection {
        box-sizing: border-box;
        width: 100%;
        padding: 20px;
        margin: 0;
    }

        .Calculator .callToActionSection .btn.small {
            width: 100%;
            text-align: center;
            box-sizing: border-box;
        }

            .Calculator .callToActionSection .btn.small.mobileVS {
                display: block;
                box-sizing:border-box;
            }

            
    .homeLoanModule .callToActionSection p {
        text-align: center !important; 
    }
    .Calculator h2 {
        font-size: 2em;
        line-height: 1.3em;
        padding: 20px 10%;
    }
    .cs-advice-banner-account {
        padding: 20px 35px 20px;
    }
    .cs-advice-acc-footer .mobile-text {
        text-align: center;
        display: block;
        position: relative;
        top: -5px;
        font-size: 14px;
    }
}