/* element styles */
html, body, form {height: 100%;}
body {font-family: "Lato", Arial, sans-serif; color: #555555; margin: 0; padding: 0; font-size: 17px; line-height: 28px; background-color: #131478;}
h1, h2, h3, h4, h5, h6 {font-family: "Raleway", Arial, sans-serif; text-transform: uppercase; color: #3c6695; font-weight: normal; margin: 0 0 15px 0; padding: 0;}
h1 {font-size: 28px; line-height: 30px; font-weight: 400;}
h2 {font-size: 25px; line-height: 27px; font-weight: 400;}
h3 {font-size: 22px; line-height: 24px; font-weight: 400; color: #de6540; text-transform: none;}
input, select, textarea {font-family: "Lato", Arial, sans-serif;}
input[type='text'], textarea {padding: 6px; border-radius: 5px; border: 1px solid #aaa;}
select {padding: 5px; border-radius: 5px; border: 1px solid #aaa;}
a {color: #de6540;}
a:hover {color: #3c6695;}
input[type='button'], input[type='submit'] {color: #3c6695; line-height: 19px; text-decoration: none; display: inline-block; padding: 8px 20px; background-color: #eff5ff; border: 1px solid #e5e3df; border-radius: 5px; -webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.25); -moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.25); box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.25); cursor: pointer;}
input[type='button']:hover, input[type='submit']:hover {background-color: #fff;}
hr {border: 1px solid #e5e3df; border-bottom: 1px solid #eeeeee}

/* container styles */
.container.main {background-color: #fff;}

/* header-container styles */
.header-container .search-container {background-color: #eeeeee; height: 39px; line-height: 35px; border-bottom: #e6e6e6 1px solid;}
.header-container .search-container .inner {height: 100%; text-align: right; padding: 0;}
.header-container .search-container .inner input {width: 210px; height: 24px; background: #fff url(../images/icon-search.png) scroll no-repeat 190px 4px; border: #e6e6e6 1px solid; padding: 3px;}
.header-container .logo-container {min-height: 65px; margin: 35px 0 40px;}
.header-container .logo-container .inner {height: 100%; padding: 0;}
.header-container .logo-container .inner .left,
.header-container .logo-container .inner .right {padding: 0;}
.header-container .logo-container .inner .left .logo {width: 333px; height: 65px; background: transparent url(../images/logo-select-header.png) scroll no-repeat 0 0; background-size: auto;}
.header-container .logo-container .inner .left .logo a {display: block; width: 100%; height: 100%;}
.header-container .logo-container .inner .right {text-align: right; font-size: 33px; line-height: 35px; color: #3c6695; font-family: "Raleway", Arial, sans-serif; font-weight: 300; text-transform: uppercase;}
.header-container .navigation-container {min-height: 40px; background: transparent url(../images/background-navigation.png) scroll repeat-x bottom left;}
.header-container .navigation-container .inner {height: 100%;}
.header-container .navigation-container .inner .wrapper {float: right; position: relative; left: -50%; text-align: left;}
.header-container .navigation-container .inner .wrapper ul {list-style-type: none; margin: 0; padding: 0; position: relative; left: 50%;}
.header-container .navigation-container .inner .wrapper ul li {margin: 0; padding: 0; position: relative; float: left;}
.header-container .navigation-container .inner .wrapper ul li a {font-size: 18px; text-decoration: none; color: #444444; padding: 0 16px;}
.header-container .navigation-container .inner .wrapper ul li.selected a,
.header-container .navigation-container .inner .wrapper ul li:hover a {color: #de6540;}
.header-container .navigation-container .inner .wrapper ul li:after {content: "\00b7\00a0"; color: #5276eb;}
.header-container .navigation-container .inner .wrapper ul li:last-child:after {content: ""}
.header-container .navigation-container .inner .wrapper ul li ul {display: none; position: absolute; top: 25px; height: auto; padding: 10px 0 5px 0; border-bottom: 2px solid #de6540; left: 0; z-index: 1500; width: 300px; background-color: #fff;}
.header-container .navigation-container .inner .wrapper ul li:hover ul {display: block;}
.header-container .navigation-container .inner .wrapper ul li ul li {display: block; float: none;}
.header-container .navigation-container .inner .wrapper ul li ul li:after {content: "";}
.header-container .navigation-container .inner .wrapper ul li ul li a {color: #444444 !important;}
.header-container .navigation-container .inner .wrapper ul li ul li a:hover {color: #de6540 !important;}

/* body-container styles */
.body-container {height: auto; min-height: 400px;}
.body-container .header-container {height: 70px; background-color: #597aa4; border-top: 1px solid #fff; border-bottom: 1px solid #fff;}
.body-container .header-container .inner {height: 100%; position: relative; padding: 0;}
.body-container .header-container .inner.max-width h1 {color: #fff; font-family: "Raleway", Arial, sans-serif; text-transform: none; font-size: 36px; line-height: 66px; font-weight: 300;}

/* footer-container styles */
.footer-container {min-height: 383px; box-sizing: border-box;}
.footer-container div {box-sizing: border-box;}
.footer-container .row-1-container {height: 471px; background-color: #b3d1ff; overflow: hidden;}
.footer-container .row-1-container h4 {font-size: 24px;}
.footer-container .row-1-container .inner {height: 100%; position: relative; background: url(../images/background-map.jpg), -webkit-linear-gradient(left, #b3d1ff 0%,#b3d1ff 50%,#e5e3df 51%,#e5e3df 100%); background: url(../images/background-map.jpg), linear-gradient(to right, #b3d1ff 0%,#b3d1ff 50%,#e5e3df 51%,#e5e3df 100%); background-position: top center; background-repeat: no-repeat;}
.footer-container .row-1-container .inner .max-width {height: 100%; padding: 0;}
.footer-container .row-1-container .inner .max-width:before,
.footer-container .row-1-container .inner .max-width::before {content: ""; width: calc((100% - 1110px) / 2); height: 100%; background-color: rgba(230,236,255,0.5); position: absolute; left: 0;}
.footer-container .row-1-container .inner .max-width .left {height: 100%; background-color: rgba(230,236,255,0.5); padding: 0; text-align: right; padding: 50px 60px 50px 5px; font-size: 17px; line-height: 24px; text-shadow: 1px 1px #eff5ff;}
.footer-container .row-1-container .inner .max-width .right {padding: 0;}
.footer-container .row-1-container .inner .max-width .left a {color: #3c6695; text-decoration: none; display: inline-block; padding: 8px 20px; background-color: #eff5ff; border-radius: 5px; -webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.25); -moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.25); box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.25);}
.footer-container .row-1-container .inner .max-width .left a:hover {background-color: #fff;}
.footer-container .row-2-container {height: 67px; border-top: 4px solid #131478; background-color: #1a53b1;}
.footer-container .row-2-container .inner .left,
.footer-container .row-2-container .inner .right {padding: 0;}
.footer-container .row-2-container .inner .left a {display: inline-block; width: 30px; height: 30px; margin: 14px 10px 0 0; background: transparent url(../images/icons-social-media.png) scroll no-repeat 0 0;}
.footer-container .row-2-container .inner .left a.facebook {background-position: 0 0;}
.footer-container .row-2-container .inner .left a.facebook:hover {background-position: -30px 0;}
.footer-container .row-2-container .inner .left a.twitter {background-position: 0 -30px;}
.footer-container .row-2-container .inner .left a.twitter:hover {background-position: -30px -30px;}
.footer-container .row-2-container .inner .left a.linkedin {background-position: 0 -60px;}
.footer-container .row-2-container .inner .left a.linkedin:hover {background-position: -30px -60px;}
.footer-container .row-2-container .inner .left a.google-plus {background-position: 0 -90px;}
.footer-container .row-2-container .inner .left a.google-plus:hover {background-position: -30px -90px;}
.footer-container .row-2-container .inner .right a {display: inline-block; float: right; text-decoration: none; text-transform: uppercase; color: #6399f3; width: 41px; height: 45px; margin: 10px 0 0 0; text-align: center; padding: 18px 0 0 0; background: transparent url(../images/icons-top-arrows.png) scroll no-repeat 0 0;}
.footer-container .row-2-container .inner .right a:hover {color: #e4e4e4; background-position: -41px 0;}
.footer-container .row-3-container {min-height: 316px; border-bottom: 4px solid #131478; background-color: #333333; text-align: center;}
.footer-container .row-3-container .logos {min-height: 64px; padding: 30px 0 20px 0;}
.footer-container .row-3-container .logos div a {display: block; width: 100%; height: 100%;}
.footer-container .row-3-container .logos .select-mortgage {width: 297px; height: 64px; background: transparent url(../images/logo-select-footer.png) no-repeat 0 0;}
.footer-container .row-3-container .logos .select-mortgage:hover {background-position: 0 -64px;}
.footer-container .row-3-container .logos .mortgage-centre {width: 239px; height: 64px; background: transparent url(../images/logo-mortgage-centre-footer.png) no-repeat 0 0;}
.footer-container .row-3-container .logos .mortgage-centre:hover {background-position: 0 -64px;}
.footer-container .row-3-container .logos div {display: inline-block; margin: 0 10px 10px 10px;}
.footer-container .row-3-container .text {min-height: 60px; padding: 0 50px; color: #aaa; font-size: 13px; line-height: 17px;}
.footer-container .row-3-container .text a {color: #aaa; text-decoration: none;}
.footer-container .row-3-container .text a:hover {color: #d2d2d2; text-decoration: underline;}

/* sub-navigation styles */
.sub-navigation span {color: #3c6695; text-transform: uppercase; display: inline-block; margin: 0 0 10px 0; font-size: 16px;}
.sub-navigation ul {list-style-type: none; margin: 0 0 30px 0; padding: 0; width: 100%;}
.sub-navigation ul li {display: block; position: relative; border: 2px solid #e2e2e2; background-color: #fff; min-height: 38px; line-height: 24px; box-sizing: border-box; margin: 0 0 7px 0; padding: 5px 10px;}
.sub-navigation ul li a {text-decoration: none; display: block; width: calc(100% - 15px); height: 100%; color: #3c6695;}
.sub-navigation ul li a:after {content: ""; display: block; width: 5px; height: 8px; position: absolute; right: 10px; top: calc((100% / 2) - 4px); background: #fff url(../images/background-sub-navigation.png) scroll no-repeat 0 0;}
.sub-navigation ul li.selected,
.sub-navigation ul li:hover {border: 2px solid #de6540;}
.sub-navigation ul li.selected a,
.sub-navigation ul li:hover a {color: #de6540;}
.sub-navigation ul li.selected a:after,
.sub-navigation ul li:hover a:after {background-position: 0 -8px;}

/* calculator styles */
.calculator {font-size: 12px; margin: 10px 0 0 0; line-height: 14px;}
.calculator strong {font-size: 13px;}
.calculator input, .calculator select {font-size: 12px;}
.calculator input[type='text'] {width: 120px !important; padding: 4px;}
.calculator select {width: 120px !important; padding: 3px 4px;}
.calculator table[id*='Calculator'] {border: none; margin: 0 !important; padding: 0 !important; border-collapse: collapse;}
.calculator table[id*='Calculator'] td {margin: 0 !important; padding: 2px !important;}
.calculator table[id*='Calculator'] .clsHeader {line-height: 15px; background-color: #3c6695; color: #fff;}
.calculator table[id*='Calculator'] .clsRow1 {background-color: #eeeeee;}
.calculator table[id*='Calculator'] .clsRow2 {background-color: #d4d4d4;}

/* application-frame styles */
.application-frame {width: 100%;}

/* search form styles */
.clsSearchFormTable {width: 300px;}
.clsSearchFormTable tr:first-child {height: 40px;}
.clsSearchFormTable tr td.clsColumn1 {width: 100px !important;}
.clsSearchFormTable tr td.clsColumn2 {width: 200px !important;}

/* generic form styles */
.form .row {padding: 0 !important; margin: 0 !important;}
.form .error-message {border: 1px solid #de6540; border-radius: 5px; padding: 10px !important; margin: 0 0 10px 0; color: #de6540; background-color: #f9ece8; display: none;}
.form .error-message p {margin: 0; padding: 0;}
.form .max-width {min-height: 0 !important;}
.form .column {padding: 5px 0 !important; margin: 0 !important;}
.form .label-control {display: block;}
.form .form-control {display: block; width: 90%;}
.form input[type=radio] {display: inline-block; margin: 0 5px 0 0;}
.form input[type=radio] + label {display: inline-block; margin: 0 20px 0 0;}
.form .validation {color: #de6540; font-size: 13px; display: none;}
.form .has-error .validation {display: block;}
.form .has-error input,
.form .has-error textarea {border-color: #de6540;}
.form .g-recaptcha div {padding: 0 !important;}

@media all and (max-width: 1110px) {
    .header-container .navigation-container .inner .wrapper ul li a {font-size: 16px; padding: 0 10px;}

    .footer-container .row-1-container h3 {font-size: 24px;}
    .footer-container .row-1-container .inner .max-width .left {padding: 40px 30px 40px 30px; font-size: 16px; line-height: 22px;}
}

@media all and (max-width: 900px) {
    .header-container .navigation-container .inner .wrapper ul li a {font-size: 14px; padding: 0 6px;}

    .footer-container .row-1-container h3 {font-size: 22px;}
    .footer-container .row-1-container .inner .max-width .left {padding: 30px 20px 30px 20px; font-size: 15px; line-height: 21px;}
}

@media all and (max-width: 768px) {
    .header-container .logo-container {margin: 15px 0;}
    .header-container .logo-container .inner .left {padding: 0 10px;}
    .header-container .logo-container .inner .right {text-align: left; font-size: 25px; line-height: 27px; padding: 0 10px;}
    .header-container .navigation-container .inner .wrapper ul li a {font-size: 13px; padding: 0 3px;}

    .body-container .header-container {height: 60px;}
    .body-container .header-container .inner.max-width h1 {font-size: 30px; line-height: 56px;}

    .footer-container .row-1-container h3 {font-size: 28px;}
    .footer-container .row-1-container .inner .max-width .left {padding: 50px 60px; font-size: 18px; line-height: 26px;}
}

@media all and (max-width: 668px) {
    .header-container .search-container .max-width {width: 75%; float: right;}
    .navigation-icon-container {width: 25%; float: left;}
    .navigation-icon-container .navigation-mobile-menu-icon {display: block; width: 20px; height: 15px; line-height: 15px; font-size: 14px; color: #131478; text-decoration: none; text-transform: uppercase; padding: 0 0 0 25px; margin: 11px 0 0 0; background: transparent url(../images/mobile-menu-icon.png) scroll no-repeat 0 0;}
}

@media all and (max-width: 500px) {
    .header-container .logo-container {margin: 10px 0;}
    
    .body-container .header-container {height: 50px; overflow: hidden; text-overflow: ellipsis;}
    .body-container .header-container .inner.max-width {padding: 0 10px;}
    .body-container .header-container .inner.max-width h1 {font-size: 24px; line-height: 46px;}

    .sub-navigation ul {margin: 0;}

    .footer-container .row-1-container h3 {font-size: 22px;}
    .footer-container .row-1-container .inner .max-width .left {padding: 30px 20px 30px 20px; font-size: 16px; line-height: 23px;}
}

@media all and (max-width: 333px) {
    .header-container .logo-container .inner .left .logo {background-size: 90%}
}

@media all and (max-width: 320px) {
    .body-container .header-container {height: 40px;}
    .body-container .header-container .inner.max-width h1 {font-size: 18px; line-height: 38px;}

    .footer-container .row-3-container .logos div {width: 100%; height: auto; margin: 0;}
}