/* ~~~~~~~~~~~~~~~ Campaign Styles ~~~~~~~~~~~~~~~ */

/* Version 136 - last edit 04/12/2023 - MO

  Includes:
  - Updated quote pattern styles (old .line-quote and .image-quote styles left in for now
  until all existing quotes are updated to use new pattern)
*/

@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,500");
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");

/*
    @font-face {
      font-family: 'TurretBold';
      src: url('https://static.skipton.co.uk/assets/fonts/turret1853-bold.otf') format("otf"),
      url('https://static.skipton.co.uk/assets/fonts/turret1853-bold.ttf') format("ttf"),
      url('https://static.skipton.co.uk/assets/fonts/turret1853-bold.woff') format("woff"),
      url('https://static.skipton.co.uk/assets/fonts/turret1853-bold.woff2') format("woff2");
    }
  */

@font-face {
  font-family: "TurretBold";
  src: url("/~/media/skipton-co-uk/CSS/fonts/Turret1853-BoldOTF.ashx") format("otf"),
    url("/~/media/skipton-co-uk/CSS/fonts/Turret1853-BoldTTF.ashx") format("ttf"),
    url("/~/media/skipton-co-uk/CSS/fonts/Turret1853-BoldWOFF.ashx") format("woff"),
    url("/~/media/skipton-co-uk/CSS/fonts/Turret1853-BoldWOFF2.ashx") format("woff2");
}

:root {
  --online-blue: #017acd;
  --online-cyan: #069de5;
  --primary-purple: #2b2171;
  --grey-dark: #747476;
  --grey-mid: #dcdee3;
  --grey-light: #e9eaef;
  --grey-very-light: #f4f4f8;
  --grey-font: #222222;
  --white: #fff;
  --error-red: #bf2e33;
  --warning-amber: #e26b00;
  --success-green: #1baa66;
  --black-tint-25: rgba(0, 0, 0, 0.25);
  --white-tint-95: rgba(255, 255, 255, 0.95);
  --heading-font: "TurretBold";
  --body-font: "Roboto", Arial, Helvetica, Sans-serif;
}

.table,
a.btn-component,
.well,
.image,
.need-help-panel,
.cta-container,
.heading-banner,
.linkCluster,
.tabbable,
.rich-text,
.text-section,
.legal-text-section,
.hero-carousel,
.content-carousel,
.message,
.article,
.image-control,
.sitemap ul,
.leaderboard,
.feature-spot,
.tile-image,
.tile-icon,
.dataTables_paginate,
.accordion.mobile-products,
.retire-planning-tool,
.iframe {
  margin-bottom: 2rem;
}

/* SMR start */
table.smr tr:first-child td,
table.smr td span.interestHeading {
  font-weight: 500;
}

.smr.summary-table td .span6:first-child {
  padding-right: 10px;
}

/* SMR end */
/* CSS FIX FOR HEADER MARGINS & HEIGHT - MARCH 2017 */
.header-identity {
  margin: 25px 0px 25px 0px;
}

.searchbox,
.branch-panel {
  padding: 0px;
}

/* CSS FIX FOR REGULATORY MESSAGES FONT SIZE - DECEMBER 2017 */
/* Browser alert banner */
.browser-alert-banner {
  background-color: var(--error-red);
}

.panel-table .product-table thead {
  display: none;
}

.panel-table .product-table tbody tr {
  display: block;
  float: left;
  width: 220px;
  margin-left: 20px;
  background-color: var(--grey-very-light);
  transition: all 0.25s ease-in-out;
}

.panel-table .table.product-table tbody tr th,
.panel-table .table.product-table tbody tr td {
  display: block;
  width: auto !important;
  background-color: transparent;
  border-width: 0px !important;
  text-align: center;
}

.panel-table .table.product-table tbody tr td {
  padding: 0px 10px 10px;
}

.panel-table .table.product-table tbody tr:nth-child(4n + 1) {
  margin-left: 0px;
  clear: both;
}

.panel-table .table.product-table tbody tr:nth-child(4n + 4) {
  margin-right: 0px;
}

.panel-table .table.product-table tbody tr:nth-child(n + 5) {
  display: none;
}

.panel-table .table.product-table tbody tr th {
  font-size: 20px;
  line-height: 26px;
  text-align: center;
  min-height: 52px;
}

.panel-table .table.product-table tbody td:nth-child(2) {
  font-size: 11px;
  line-height: 15px;
}

.panel-table table.product-table tbody td:nth-child(3),
.panel-table .table.product-table tbody td:nth-child(5) {
  display: none;
}

.panel-table .table.product-table tbody td.rate-cell {
  font-size: 11px;
  line-height: 15px;
}

.panel-table .table.product-table tbody td.rate-cell strong {
  font-size: 38px;
  line-height: 38px;
  display: block;
  padding-bottom: 5px;
}

td a.btn.pull-right {
  float: none;
}

@media (max-width: 979px) and (min-width: 768px) {
  .panel-table table.product-table tbody tr {
    width: 166px;
  }

  .panel-table .table.product-table tbody tr th {
    font-size: 16px;
    line-height: 20px;
    text-align: center;
  }
}

/* ADDED 09/02/2018 - TO HELP MAKE FAQS FULLY TRACKABLE */
.accordion-controls {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
}

.accordion-heading a::before {
  content: " ";
  float: right;
  background-image: url(/www_skipton_co_uk/Components/Client/img/icons/show-hide-28.png);
  background-color: var(--white);
  background-position: -30px -2px;
  background-repeat: no-repeat;
  display: block;
  height: 24px;
  width: 24px;
  border: 1px solid var(--grey-mid);
}

.accordion-heading a.collapsed::before {
  content: " ";
  float: right;
  background-image: url(/www_skipton_co_uk/Components/Client/img/icons/show-hide-28.png);
  background-color: var(--white);
  background-position: -2px -2px;
  background-repeat: no-repeat;
  display: block;
  height: 24px;
  width: 24px;
  border: 1px solid var(--grey-mid);
}

.alt .accordion-heading a.collapsed::before {
  background-color: transparent;
  background-image: url(/www_skipton_co_uk/Components/Client/img/icons/up-down-white-45.png);
  background-position: 0px 0px;
  background-repeat: no-repeat;
}

.alt .accordion-heading a::before {
  width: 45px;
  height: 45px;
  margin: -10px;
  border: none;
  background-color: transparent;
  background-image: url(/www_skipton_co_uk/Components/Client/img/icons/up-down-white-45.png);
  background-position: -45px -1px;
  background-repeat: no-repeat;
}

/* SAVINGS PRODUCT PAGE TEMPLATE - JUN 2018 */
h2.summaryBoxHeader strong {
  font-weight: 400;
}

.header.rate-header {
  margin-top: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  position: relative;
  margin-bottom: 2rem;
}

.header.rate-header .ident span {
  display: inline-block;
  margin-top: 0px;
  text-transform: uppercase;
  padding: 5px 80px 5px 0px;
  border-bottom: 2px solid var(--primary-purple);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.1;
  margin-left: 20px;
  margin-bottom: 10px;
  color: var(--primary-purple);
  visibility: hidden;
}

.header.rate-header .heading-panel {
  position: relative;
  z-index: 0;
  margin-top: 0px;
}

.header.rate-header .heading-panel h1 {
  margin: 0px;
  width: 60%;
  color: var(--grey-font);
  margin: 1.414em 0 1em;
  font-size: 2.441rem;
  line-height: 1.5;
  margin-top: 10px;
  padding: 0px 20px 0px 0px;
}

.header.rate-header .rate-panel {
  top: 0px;
  left: 65%;
  width: 35%;
  position: absolute;
  background-color: var(--online-blue);
  padding: 30px;
  z-index: 1;
  display: block;
  box-shadow: 0px 10px 10px -10px var(--black-tint-25);
  text-align: left;
  box-sizing: border-box;
}

.header.rate-header .rate-panel h2 {
  color: var(--white);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: 1.25rem;
  margin-top: 0px;
  font-family: var(--body-font);
}

.not-tiered .header.rate-header .rate-panel h2 span,
:not(.not-tiered) .header.rate-header .rate-panel h2 strong:first-child {
  display: block;
  font-family: var(--heading-font);
}

.header.rate-header .rate-panel a.btn-primary {
  background: var(--white);
  border-color: var(--white);
  color: var(--grey-font);
  text-shadow: none;
  border-radius: 4px !important;
  font-weight: 500;
  padding-right: 30px;
  padding: 16px 40px 16px 30px;
}

.header.rate-header .features-panel {
  width: 65%;
  padding: 0 20px 0 0;
  box-sizing: border-box;
}

.header.rate-header .features-panel *:last-child {
  margin-bottom: 0px;
}

.cta.savings-cta {
  background: var(--grey-very-light);
  border-top: 10px solid var(--online-cyan);
  padding: 0px 20px 30px;
  margin-top: 30px;
  margin-bottom: 50px;
  box-shadow: 0px 10px 10px -10px var(--black-tint-25);
}

.cta.savings-cta .monthly-interest p span,
.cta.savings-cta .annual-interest p span {
  font-size: 1.5em;
  line-height: 1;
  font-weight: 500;
}

.cta.savings-cta h2,
.cta.savings-cta h3,
.cta.savings-cta p,
.cta.savings-cta .radios > label,
.savings-cta .wrapper label {
  color: var(--grey-font);
}

.savings-cta .wrapper input + label::before,
.savings-cta .wrapper input + label::after {
  color: var(--primary-purple);
}

.cta.savings-cta h3 {
  margin-bottom: 15px;
  margin-top: 0px;
  font-family: var(--body-font);
}

.cta.savings-cta p {
  font-weight: 400;
  font-size: 18px;
}

.cta.savings-cta a.btn-primary {
  background: url("/~/media/7479935B8E0145B1B6CD0854B9A582A5.ashx") no-repeat right 15px top 20px var(--online-blue);
  border-color: var(--online-blue);
  color: var(--white);
  text-shadow: none;
  border-radius: 4px !important;
  font-weight: 500;
  padding-right: 30px;
  padding: 16px 40px 16px 30px;
}

.cta.savings-cta > .row-fluid [class*="span"] {
  position: relative;
}

.cta.savings-cta > .row-fluid [class*="span"]:before {
  content: "";
  left: -10px;
  top: 10%;
  bottom: 5%;
  display: block;
  position: absolute;
  background-color: var(--white);
  width: 2px;
}

.cta.savings-cta > .row-fluid [class*="span"]:first-child:before {
  display: none;
}

@media (max-width: 767px) {
  .header.rate-header .heading-panel {
    margin-right: 10%;
    padding: 15px 0px 25px;
  }

  .header.rate-header .heading-panel h1 {
    width: auto;
    font-size: 24px;
  }

  .header.rate-header .rate-panel {
    position: relative;
    left: 0px;
    margin-left: 0px;
    margin-right: 0;
    width: auto;
    margin-top: -20px;
    padding: 20px 10px;
  }

  .header.rate-header .features-panel {
    width: auto;
    padding: 20px 0px 0px;
  }

  .rate-header .rate-panel a.btn-primary,
  .cta.savings-cta a.btn-primary {
    background-position: right 10px top 15px;
    padding: 11px 35px 11px 20px;
    font-size: 18px;
  }

  table.smr {
    font-size: 12px;
  }

  table.smr tr {
    display: block;
    margin-bottom: 5px;
  }

  table.smr th,
  table.smr td {
    display: block;
    padding: 5px 7px;
    line-height: 1.5;
  }

  .table-striped.smr tbody > tr:nth-child(odd) > th,
  table.smr th {
    background-color: var(--grey-very-light);
  }

  .table-striped.smr tbody > tr:nth-child(even) > td,
  table.smr td {
    background-color: var(--white);
    border-top-width: 0px;
  }

  .summary-table.smr td span.interestHeading {
    margin-bottom: 0px;
  }

  .summary-table.smr td .span6:last-of-type {
    margin-bottom: 0px;
  }

  table.smr td ul {
    margin: 0px 0px 0px 15px;
  }

  table.smr td ul li {
    line-height: 1.5;
    margin-bottom: 5px;
    font-size: 12px;
  }

  .cta.savings-cta {
    padding: 0px 15px 15px;
    margin: 0px -20px 10px;
  }

  .cta.savings-cta h3 {
    font-size: 18px;
    margin-bottom: 5px;
  }

  .cta.savings-cta .span6:last-of-type {
    padding-top: 30px;
  }

  .cta.savings-cta > .row-fluid [class*="span"]:before {
    content: "";
    left: 25%;
    top: 15px;
    width: 50%;
    height: 2px;
  }

  .cta.savings-cta p {
    font-size: 14px;
    font-weight: 500;
  }
}

/* ============================= REINSTATE LARGE BOOTSTRAP MEDIA QUERY ============================= */

@media (min-width: 1200px) {

  .row-fluid .controls-row [class*="span"] + [class*="span"],
  .row-fluid [class*="span"] {
    margin-left: 2.564102564102564%;
  }

  .row,
  .thumbnails {
    margin-left: -30px;
  }

  .row-fluid:after,
  .row-fluid:before,
  .row:after,
  .row:before {
    display: table;
    line-height: 0;
    content: "";
  }

  .row-fluid:after,
  .row:after {
    clear: both;
  }

  [class*="span"] {
    float: left;
    min-height: 1px;
    margin-left: 30px;
  }

  .container,
  .navbar-fixed-bottom .container,
  .navbar-fixed-top .container,
  .navbar-static-top .container,
  .span12 {
    width: 1170px;
  }

  .span11 {
    width: 1070px;
  }

  .span10 {
    width: 970px;
  }

  .span9 {
    width: 870px;
  }

  .span8 {
    width: 770px;
  }

  .span7 {
    width: 670px;
  }

  .span6 {
    width: 570px;
  }

  .span5 {
    width: 470px;
  }

  .span4 {
    width: 370px;
  }

  .span3 {
    width: 270px;
  }

  .span2 {
    width: 170px;
  }

  .span1 {
    width: 70px;
  }

  .offset12 {
    margin-left: 1230px;
  }

  .offset11 {
    margin-left: 1130px;
  }

  .offset10 {
    margin-left: 1030px;
  }

  .offset9 {
    margin-left: 930px;
  }

  .offset8 {
    margin-left: 830px;
  }

  .offset7 {
    margin-left: 730px;
  }

  .offset6 {
    margin-left: 630px;
  }

  .offset5 {
    margin-left: 530px;
  }

  .offset4 {
    margin-left: 430px;
  }

  .offset3 {
    margin-left: 330px;
  }

  .offset2 {
    margin-left: 230px;
  }

  .offset1 {
    margin-left: 130px;
  }

  .row-fluid,
  .row-fluid .span12 {
    width: 100%;
  }

  .row-fluid [class*="span"] {
    display: block;
    float: left;
    width: 100%;
    min-height: 30px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  .row-fluid .thumbnails,
  .row-fluid [class*="span"]:first-child,
  .uneditable-input,
  input,
  textarea {
    margin-left: 0;
  }

  .row-fluid .span11 {
    width: 91.45299145299145%;
  }

  .row-fluid .span10 {
    width: 82.90598290598291%;
  }

  .row-fluid .span9 {
    width: 74.35897435897436%;
  }

  .row-fluid .span8 {
    width: 65.81196581196582%;
  }

  .row-fluid .span7 {
    width: 57.26495726495726%;
  }

  .row-fluid .span6 {
    width: 48.717948717948715%;
  }

  .row-fluid .span5 {
    width: 40.17094017094017%;
  }

  .row-fluid .span4 {
    width: 31.623931623931625%;
  }

  .row-fluid .span3 {
    width: 23.076923076923077%;
  }

  .row-fluid .span2 {
    width: 14.52991452991453%;
  }

  .row-fluid .span1 {
    width: 5.982905982905983%;
  }

  .row-fluid .offset12 {
    margin-left: 105.12820512820512%;
  }

  .row-fluid .offset12:first-child {
    margin-left: 102.56410256410257%;
  }

  .row-fluid .offset11 {
    margin-left: 96.58119658119658%;
  }

  .row-fluid .offset11:first-child {
    margin-left: 94.01709401709402%;
  }

  .row-fluid .offset10 {
    margin-left: 88.03418803418803%;
  }

  .row-fluid .offset10:first-child {
    margin-left: 85.45008545008548%;
  }

  .row-fluid .offset9 {
    margin-left: 79.48717948717949%;
  }

  .row-fluid .offset9:first-child {
    margin-left: 76.92307692307693%;
  }

  .row-fluid .offset8 {
    margin-left: 70.94017094017094%;
  }

  .row-fluid .offset8:first-child {
    margin-left: 68.37606837606839%;
  }

  .row-fluid .offset7 {
    margin-left: 62.393162393162385%;
  }

  .row-fluid .offset7:first-child {
    margin-left: 59.82905982905982%;
  }

  .row-fluid .offset6 {
    margin-left: 53.84615384615384%;
  }

  .row-fluid .offset6:first-child {
    margin-left: 51.28205128205128%;
  }

  .row-fluid .offset5 {
    margin-left: 45.299145299145295%;
  }

  .row-fluid .offset5:first-child {
    margin-left: 42.73504273504273%;
  }

  .row-fluid .offset4 {
    margin-left: 36.75213675213675%;
  }

  .row-fluid .offset4:first-child {
    margin-left: 34.18803418803419%;
  }

  .row-fluid .offset3 {
    margin-left: 28.205128205128204%;
  }

  .row-fluid .offset3:first-child {
    margin-left: 25.641025641025642%;
  }

  .row-fluid .offset2 {
    margin-left: 19.65811965811966%;
  }

  .row-fluid .offset2:first-child {
    margin-left: 17.094017094017094%;
  }

  .row-fluid .offset1 {
    margin-left: 11.11111111111111%;
  }

  .row-fluid .offset1:first-child {
    margin-left: 8.545008545008547%;
  }

  .controls-row [class*="span"] + [class*="span"],
  .thumbnails > li {
    margin-left: 30px;
  }

  .uneditable-input.span12,
  input.span12,
  textarea.span12 {
    width: 1156px;
  }

  .uneditable-input.span11,
  input.span11,
  textarea.span11 {
    width: 1056px;
  }

  .uneditable-input.span10,
  input.span10,
  textarea.span10 {
    width: 956px;
  }

  .uneditable-input.span9,
  input.span9,
  textarea.span9 {
    width: 856px;
  }

  .uneditable-input.span8,
  input.span8,
  textarea.span8 {
    width: 756px;
  }

  .uneditable-input.span7,
  input.span7,
  textarea.span7 {
    width: 656px;
  }

  .uneditable-input.span6,
  input.span6,
  textarea.span6 {
    width: 556px;
  }

  .uneditable-input.span5,
  input.span5,
  textarea.span5 {
    width: 456px;
  }

  .uneditable-input.span4,
  input.span4,
  textarea.span4 {
    width: 356px;
  }

  .uneditable-input.span3,
  input.span3,
  textarea.span3 {
    width: 256px;
  }

  .uneditable-input.span2,
  input.span2,
  textarea.span2 {
    width: 156px;
  }

  .uneditable-input.span1,
  input.span1,
  textarea.span1 {
    width: 56px;
  }
}

/* ============================= LARGE BOOTSTRAP MODIFICATIONS ============================= */
/* LARGE - NAVIGATION ============================= */
@media (min-width: 1200px) {
  .mega-nav > ul li a {
    padding: 15px 35px 15px 15px;
  }

  .mega-nav .dropdown-column {
    width: 320px;
  }
}

@media (max-width: 1199px) {
  .mega-nav > ul li a {
    padding: 13px 17px 14px 17px;
  }
}

/* LARGE - COMPONENT TWEAKS - ARTICLES ============================= */
@media (min-width: 1200px) {

  .span6 .article-two img,
  .span5 .article-two img,
  .span4 .article-two img,
  .span3 .article-two img {
    width: 100%;
  }
}

/* ============================= 2018 BRAND REFRESH ============================= */
/* GLOBAL - TYPOGRAPHY ============================= */
/* Major Third Typescale */
body {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--grey-font);
}

p {
  margin-bottom: 1.3em;
  font-size: 1rem;
  line-height: 1.5;
}

li {
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 0.75em;
}

H2,
.h2,
H3,
.h3,
H4,
.h4,
H5,
.h5,
H6,
.h6 {
  margin: 1.414em 0 0.5em;
  line-height: 1.5;
  font-weight: 500;
}

h1,
.h1 {
  margin: 1.414em 0 1em;
  font-size: 2.441rem;
  line-height: 1.5;
}

h2,
.h2 {
  font-size: 1.953rem;
  font-weight: 300;
}

h3,
.h3,
.article h3 {
  font-size: 1.563rem;
}

H4,
.h4 {
  font-size: 1.25rem;
}

small,
p.small,
.font_small {
  font-size: 0.9rem;
}

p.legal {
  font-size: 0.9rem;
  font-weight: 500;
}

label,
input,
button,
select,
textarea {
  font-size: 1rem;
}

.product-apply-row {
  font-size: inherit;
}

td,
th {
  line-height: 1.5;
}

/* Major Second Typescale - mobile only */
@media (max-width: 767px) {

  H2,
  .h2,
  H3,
  .h3,
  H4,
  .h4,
  H5,
  .h5,
  H6,
  .h6 {
    margin: 1.414em 0 0.5em;
    font-weight: 500;
    line-height: 1.5;
  }

  h1,
  .h1 {
    margin: 1.414rem 0 1em;
    font-size: 1.602rem;
    line-height: 1.5;
  }

  H2,
  .h2 {
    font-size: 1.424rem;
    font-weight: 300;
  }

  H3,
  .h3,
  .article h3 {
    font-size: 1.266rem;
  }

  H4,
  .h4 {
    font-size: 1.125rem;
  }

}

/* Text Styles */
body,
P,
H4,
.h4,
H5,
.h5,
H6,
.h6,
.sans-serif,
h4.serif,
input,
button,
select,
textarea {
  color: var(--grey-font);
  font-family: var(--body-font);
}

h1,
.serif,
h2,
.h2,
h3,
.h3,
h2.serif,
h3.serif {
  color: var(--grey-font);
  font-family: var(--heading-font);
}

/* specific styling to override styling for affordability calc */
.container > h1 {
  color: var(--grey-font) !important;
  font-family: var(--heading-font) !important;
}

h1 {
  margin-top: 10px;
  text-align: center;
}

.rich-text > h2#title,
.rich-text > h3#subTitle {
  margin-top: 0px;
}

strong,
b {
  font-weight: 500;
}

.article-one h3 {
  font-weight: 500;
}

.lead {
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 500;
  margin-bottom: 1em;
}

.browser-version-banner-text p {
  color: var(--white);
}

/*Specific Text Styling */
.container > h1:after {
  content: "";
  width: 20%;
  height: 4px !important;
  background-color: var(--grey-light) !important;
  display: block;
  margin: 10px auto 0;
}

.mega-nav .dropdown a,
.mega-nav > ul li a {
  font-family: var(--body-font);
  font-size: 18px;
  font-weight: 400;
  color: var(--grey-font);
}

.breadcrumb {
  padding: 10px 20px 20px;
}

.breadcrumb li {
  font-size: 14px;
}

.article p,
.mega-nav .dropdown-column h3,
.mega-nav .dropdown-column ul li a,
.linkCluster.link-cluster-three ul.link-cluster li a,
.mega-nav .dropdown-column > a {
  font-size: 1rem;
}

.article p {
  font-size: 1rem;
  line-height: 1.5;
}

blockquote p {
  font-size: 1.25rem;
}

.header .header-links {
  padding-top: 0px;
}

.header .header-links ul li a {
  font-weight: 500;
  color: var(--grey-font);
}

/* Reassurance panels */

.reassurance-panel h3 {
  margin-top: 0px;
}

.reassurance-panel a.btn {
  margin-bottom: 1.3em;
}

.reassurance-panel a.btn:hover {
  box-shadow: none !important;
}

.reassurance-panel {
  padding: 25px 0px 50px;
  margin-top: 2rem;
  border-top: none;
}

.reassurance-panel .award {
  text-align: right;
}

.reassurance-panel p.small {
  font-size: 0.9rem;
  margin-top: 10px;
  margin-bottom: 0px;
}

@media (max-width: 767px) {
  .reassurance-panel .award {
    text-align: center;
  }
}

.accordion-heading a.accordion-toggle h3,
.accordion-heading a.accordion-toggle h4 {
  font-size: 1.25rem;
  color: var(--grey-font);
  font-family: var(--body-font);
}

@media (max-width: 767px) {

  .accordion-heading a.accordion-toggle h3,
  .accordion-heading a.accordion-toggle h4 {
    width: 90%;
    display: block;
  }
}

.linkCluster h3,
.linkCluster.link-cluster-three h3,
.news-article-sidebar h3 {
  color: var(--grey-font);
  font-family: var(--heading-font);
  font-size: 1.563rem;
  line-height: 1.5;
  font-weight: 500;
  margin-top: 0;
}

.product-apply-row h4 {
  font-size: 1.25rem;
  font-weight: 500;
}

address {
  line-height: 1.5;
}

/* GLOBAL - ICONS ============================= */
.icon:before,
.icon:after,
.ticklist li:before,
ul.pdf-list li:before,
.bullet-list li:before,
ul.links li a::before,
.btn:after,
a.btn:after,
input.btn:after,
a.btn.login:before,
a.tertiary:before,
a.tertiary:after,
td .online:before,
td .branch:before,
td .post:before,
td .phone:before,
.btn.btn-arrow span:after,
.btn.btn-scroll-down span:after,
.accordion-heading a.accordion-toggle:after,
.accordion-heading a.accordion-toggle:before,
.header .header-links ul li a.branch:before,
.header .header-links ul li a.search:before,
.need-help .help-content h2:after,
.need-help .phone:before,
.need-help .webchat:before,
.need-help .online:before,
a.new-window::after,
.help p:before,
.material-icons,
.btn.btn-link:before,
.article-one a.btn.btn-link:after,
.article-two a.btn.btn-link:after,
.article-icon a.btn.btn-link:after,
.btn.btn-textlink:before {
  font-family: "Material Icons";
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  line-height: 1.5;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  font-feature-settings: "liga";
}

/*Added PDF button*/
.btn.btn-link.pdf-btn {
  padding-left: 26px !important;
}

.btn.btn-link.pdf-btn:before {
  background-image: url(/~/media/skipton-co-uk/images/icons/icon-pdf-small.ashx?la=en-GB);
  border: none;
  content: "";
  display: block;
  height: 16px;
  left: 0;
  position: absolute;
  top: 4px;
  transform: none;
  width: 16px;
}

/* IE UNDERLINE BUG */
.btn:hover:before,
.btn:focus:before,
.btn:hover:after,
.btn:focus:after,
.alt .accordion-heading a.accordion-toggle:hover:before,
.alt .accordion-heading a.accordion-toggle:focus:before,
.accordion-heading a.accordion-toggle:hover:before,
.accordion-heading a.accordion-toggle:focus:before {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.btn:hover:before,
.btn:focus:before,
.btn:hover:after,
.btn:focus:after,
.alt .accordion-heading a.accordion-toggle:hover:before,
.alt .accordion-heading a.accordion-toggle:focus:before,
.accordion-heading a.accordion-toggle:hover:before,
.accordion-heading a.accordion-toggle:focus:before {
  text-decoration: none;
}

/* GLOBAL - TEXT LINKS ============================= */
/* set colours and weight */
a,
li a,
p a,
.link-list li a,
.link-cluster li a,
.sitemap li a,
.mega-nav > ul li a,
.mega-nav .dropdown-column ul li a,
.mega-nav .dropdown-column > a,
.cookie-banner p a {
  color: var(--grey-font);
  font-weight: 500;
}

a:hover,
a:focus,
p a:hover,
p a:focus,
li a:hover,
li a:focus,
.link-list li a:hover,
.link-list li a:focus,
.link-cluster li a:hover,
.link-cluster li a:focus,
.sitemap li a:hover,
.sitemap li a:focus,
.footer-links li a:hover,
.footer-links li a:focus {
  color: var(--grey-font);
}

.cookie-banner p a {
  color: var(--white);
}

.cookie-banner p a:hover,
.cookie-banner p a:focus {
  color: var(--white);
}

.cookie-banner a.close {
  font-weight: 500;
}

/* GLOBAL - LINKS AND BUTTONS ============================= */
a,
li a,
p a,
.footer-links li a,
.mega-nav > ul li a,
.mega-nav .dropdown-column ul li a,
.mega-nav .dropdown-column > a,
.cookie-banner p a {
  color: var(--font-grey);
  border: none;
}

.link-list li a:hover,
.link-cluster li a:hover,
.sitemap li a:hover,
.link-list li a:focus,
.link-cluster li a:focus,
.sitemap li a:focus {
  color: var(--font-grey);
  text-decoration-color: var(--grey-font);
  text-decoration-line: underline;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 5px;
}

.header .header-links ul li a,
.preheader ul li a {
  border: none;
}

.input-append .btn,
a.btn,
input.btn,
button.btn,
.btn.disabled,
.btn[disabled],
.btn.silver,
a.btn.silver {
  border-radius: 40px !important;
  font-weight: 500;
}

/* Primary button */
.input-append .btn,
a.btn,
input.btn,
button.btn,
.btn.no-arrow,
.btn.disabled,
.btn[disabled],
.btn:hover,
.btn:focus,
.pod.primary .article-one a.btn.btn-link,
.btn.btn-block {
  background: var(--online-blue);
  color: var(--white);
  border-color: var(--online-blue);
  transition: none !important;
}

/* Standard button Styling (with icon) */
.btn,
a.btn,
.btn.no-arrow,
.btn.silver,
a.btn.silver,
.pod.primary .article-one a.btn.btn-link,
button#btnBranchSearch,
button.btnAllBranches,
button.btnCalculateSavings {
  font-size: 1em;
  text-shadow: none !important;
  padding: 8px 19px !important;
  position: relative;
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
  margin-bottom: 5px;
  transition: none !important;
  line-height: 1.5;
}

.input-append .btn,
.input-append .btn.silver,
.branchlocator .btn.no-arrow,
button#btnBranchSearch {
  padding: 4px 12px !important;
  font-size: 1rem !important;
  line-height: 20px;
}

.input-append input:focus {
  z-index: 0;
  /* Prevent appended button hover outline going behind the focused input */
}

/*make sure hover state is applied to all butons*/
.btn:hover,
.btn:focus {
  outline: none;
  text-decoration-line: underline;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 5px;
}

/* remove focus state from disabled buttons */
.btn.disabled:hover,
.btn.disabled:focus,
.btn[disabled]:hover,
.btn[disabled]:focus {
  outline: none !important;
  text-decoration: none !important;
}

/* Add arrow icon to button */
a.btn-scroll-down:after,
.savings-filter-alternative .btn.btn-toggle:after {
  content: "chevron_right";
  position: absolute;
  font-size: 24px;
  font-weight: 500;
  top: 50%;
  right: 5px;
  margin-top: -12px;
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
  line-height: 1;
}

/* Modal button */

.modal-footer button.btn.cancel-btn:not(.btn-primary),
.mpf-wrapper button.btn:not(.btn-primary) {
  background: transparent;
  border: 3px solid var(--online-blue);
  color: var(--text-grey);
}

.modal-footer button.btn.cancel-btn:not(.btn-primary):hover,
.modal-footer button.btn.cancel-btn:not(.btn-primary):focus,
.mpf-wrapper button.btn:not(.btn-primary):hover,
.mpf-wrapper button.btn:not(.btn-primary):focus {
  box-shadow: 0 0 0 3px var(--primary-purple);
}

/* Add space below button if immediately followed by a paragraph */
.btn + p,
button + p {
  margin-top: 1.3em;
}

/* List styles */
ul,
ol {
  margin: 0 0 1em 1em;
}

ul.tick {
  margin-left: 0px;
}

ul.tick li {
  position: relative;
  background-image: none;
}

ul.tick li:before {
  content: "";
  display: block;
  transform: rotate(45deg);
  height: 10px;
  width: 5px;
  border-bottom: 4px solid var(--online-blue);
  border-right: 4px solid var(--online-blue);
  position: absolute;
  left: 4px;
  top: 1px;
}

.btn,
.btn-primary,
.btn.btn-large {
  font-size: 1rem;
}

/* Secondary button styling (keyline) */
.btn.btn-large.silver,
.btn.silver,
.btn.silver.no-arrow,
.btn.silver.btn-block,
a.btn.silver,
a.btn.silver.no-arrow,
a.btn.silver.btn-block,
.skipton-link-action-panel .btn.btn-primary,
.article-one a.btn.btn-link,
.article-two a.btn.btn-link,
.article-icon a.btn.btn-link,
.filter-buttons a.btn-clear-all {
  border-color: var(--online-blue);
  background: transparent;
  border-width: 3px;
  color: var(--grey-font);
  padding-top: 3px;
  padding-bottom: 3px;
  text-shadow: none;
  font-weight: 500;
}

.btn:hover,
.btn:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
  opacity: 1;
  text-decoration-line: underline;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 5px;
  box-shadow: 0 0 0 3px var(--primary-purple) !important;
}

.btn.btn-large.silver:hover,
.btn.silver:hover,
.btn.silver.no-arrow:hover,
.btn.silver.btn-block:hover,
a.btn.silver:hover,
a.btn.silver.no-arrow:hover,
a.btn.silver.btn-block:hover,
.skipton-link-action-panel .btn.btn-primary:hover,
.article-one a.btn.btn-link:hover,
.article-two a.btn.btn-link:hover,
.article-icon a.btn.btn-link:hover,
.btn.btn-large.silver:focus,
.btn.silver:focus,
.btn.silver.no-arrow:focus,
.btn.silver.btn-block:focus,
a.btn.silver:focus,
a.btn.silver.no-arrow:focus,
a.btn.silver.btn-block:focus,
.skipton-link-action-panel .btn.btn-primary:focus,
.article-one a.btn.btn-link:focus,
.article-two a.btn.btn-link:focus,
.article-icon a.btn.btn-link:focus,
.filter-buttons a.btn-clear-all:hover,
.filter-buttons a.btn-clear-all:focus {
  opacity: 1;
  text-decoration-line: underline;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 5px;
  box-shadow: 0 0 0 3px var(--primary-purple);
  transition: none !important;
}

.btn.primary:hover,
.btn.primary:focus,
.btn.btn-large:hover,
.btn.btn-large:focus,
.btn.btn-large.login:hover,
.btn.btn-large.login:focus,
.header.rate-header .rate-panel a.btn-primary:hover,
.header.rate-header .rate-panel a.btn-primary:focus,
.cta.savings-cta a.btn-primary:hover,
.cta.savings-cta a.btn-primary:focus,
.pod.primary .article-one a.btn.btn-link:hover,
.pod.primary .article-one a.btn.btn-link:focus,
.filter-buttons a.btn-clear-all:hover,
.filter-buttons a.btn-clear-all:focus {
  box-shadow: 0 0 0 3px var(--primary-purple);
}

.btn.btn-large.silver,
.article-one a.btn.btn-link,
.article-two a.btn.btn-link,
.article-icon a.btn.btn-link {
  padding: 7px 16px;
}

/*TBC */
.btn span {
  padding-right: 1.5em;
  position: relative;
}

.btn.btn-arrow span {
  padding-right: 1em;
  position: relative;
}

/* Toggle button - specific styling */
.article-filter .btn-group .btn.btn-toggle {
  border-color: var(--primary-purple);
}

.article-filter .btn-group .btn.btn-toggle.active {
  border-color: var(--primary-purple);
  background-color: var(--primary-purple);
}

.article-filter .btn-group .btn.btn-toggle:hover,
.article-filter .btn-group .btn.btn-toggle:focus,
.article-filter .btn-group .btn.btn-toggle.active:hover,
.article-filter .btn-group .btn.btn-toggle.active:focus {
  opacity: 1;
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  box-shadow: 0 0 0 3px var(--primary-purple);
  transition: none !important;
}

/* Login button - specific styling */
.btn.login {
  padding-left: 2em !important;
  position: relative;
}

.btn.login:before {
  content: "";
  background: url(/-/media/skipton-co-uk/CSS/img/locked-padlock.png) no-repeat center center;
  background-size: 12px 16px;
  height: 16px;
  left: 13px;
  margin-top: -0.55em;
  position: absolute;
  top: 50%;
  width: 12px;
}

.btnTabControl {
  margin-top: 10px;
}

/* Text Button */
.btn.btn-link,
.btn.btn-textlink,
.filter-buttons a.btn-clear-all {
  font-weight: 500;
  padding: 0px !important;
  position: relative;
  background: none;
  border-radius: 0px !important;
  color: var(--grey-font);
  text-decoration-line: underline;
  text-decoration-color: var(--online-cyan);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  line-height: 1.5;
  /*to fix underline on wrapped links */
}

.btn.btn-link:before,
.btn.btn-textlink:before {
  border-style: solid;
  border-width: 3px 3px 0 0;
  border-color: var(--online-cyan);
  content: "";
  display: inline-block;
  height: 5px;
  left: 0.15em;
  position: relative;
  top: 0.5em;
  transform: rotate(45deg);
  vertical-align: top;
  width: 5px;
  margin-right: 1em;
}

/* New button arrow - not yet used
    a.btn.btn-link:after, a.btn.btn-textlink:after {
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='40' width='40'><path d='m23.5 29.292-1.5-1.5 6.792-6.834H7.125v-2.125h21.667L22 12l1.5-1.5 9.417 9.417Z' fill='%23069DE5'/></svg>");
      width: 30px;
      height: 30px;
      content: "";
      display: inline-block;
      background-size: contain;
      vertical-align: middle;
      margin-left: 5px;
    }*/

/* Form Styling */
.form-content .divider {
  border: none;
  color: var(--font-grey);
}

.form-content .divider:after {
  content: "";
  width: 20%;
  height: 2px !important;
  background-color: var(--grey-mid) !important;
  display: block;
  margin: 20px 0 0;
}

legend.control-label,
.form-horizontal legend.control-label {
  color: var(--grey-font);
}

/* MPF radios */
.mpf-wrapper .radio-group .radio-button,
.mpf-wrapper .checkbox-button {
  margin-bottom: 10px;
}

.mpf-wrapper .radio-group .radio-button label,
.mpf-wrapper .checkbox-button label {
  border: 2px solid var(--grey-dark);
  padding: 20px 20px 20px 60px;
  color: var(--grey-font);
}

.mpf-wrapper .radio-group .radio-button label:after,
.mpf-wrapper .checkbox-button label:after {
  border: 2px solid var(--grey-dark);
  left: 12px;
}

.mpf-wrapper .radio-button input:checked ~ label,
.mpf-wrapper .checkbox-button input:checked ~ label {
  border-color: var(--primary-purple);
  box-shadow: inset 0px 0px 0px 1px var(--primary-purple);
}

.mpf-wrapper .radio-button input:checked ~ label:after,
.mpf-wrapper .checkbox-button input:checked ~ label:after {
  background-color: var(--primary-purple);
  border-color: var(--primary-purple);
}

.mpf-wrapper .radio-button input:focus ~ label,
.mpf-wrapper .checkbox-button input:focus ~ label {
  border-color: var(--grey-dark);
  outline: 3px solid var(--online-blue);
  outline-offset: -4px;
  box-shadow: none;
}

.mpf-wrapper .radio-button input:checked:focus ~ label,
.mpf-wrapper .checkbox-button input:checked:focus ~ label {
  border-color: var(--primary-purple);
  font-weight: 500;
  outline: 3px solid var(--online-blue);
  box-shadow: none;
  outline-offset: -4px;
}

/* MPF Form */
.mpf-wrapper legend {
  color: var(--grey-font) !important;
}

.mpf-wrapper a.info-link {
  border-bottom: 2px solid var(--online-cyan);
  text-decoration: none;
}

.mpf-wrapper a.info-link:hover {
  border-color: var(--grey-mid);
}

.mpf-wrapper input[type="text"],
.mpf-wrapper .input-append .add-on,
.mpf-wrapper .input-prepend .add-on {
  color: var(--grey-font);
  border-color: var(--grey-dark);
}

/*MPF Fix*/
.mpf-wrapper .btn.btn-secondary.collapse-toggle {
  padding-right: 35px !important;
}

.mpf-wrapper .btn.btn-secondary.collapse-toggle:hover span,
.mpf-wrapper .btn.btn-secondary.collapse-toggle:focus span {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.mpf-wrapper .btn.btn-secondary.collapse-toggle:after,
.mpf-wrapper .btn.btn-secondary.collapse-toggle:hover:after {
  margin-top: -4px;
  font-size: 24px;
  font-weight: 500;
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}

.mpf-wrapper .filter-wrapper {
  background: var(--white);
  border: none;
  border-top: 3px solid var(--grey-mid);
  border-bottom: 3px solid var(--grey-mid);
  border-radius: 0px;
}

.mpf-wrapper .product-wrapper {
  border-radius: 0px;
  border: none;
  background-color: var(--grey-very-light);
}

.mpf-wrapper .product {
  border-color: var(--primary-purple);
}

.mpf-wrapper .switch-field label {
  color: var(--primary-purple);
  border-color: var(--primary-purple);
}

.mpf-wrapper .switch-field input:checked + label {
  background-color: var(--primary-purple);
  border-color: var(--primary-purple);
}

/* End MPF */
/* SAVINGS FILTER */

.btn.btn-large.silver.btn-toggle.collapsed {
  background: var(--white);
}

.savings-filter .checkbox input[type="checkbox"]:checked + label,
.savings-filter-alternative .checkbox input[type="checkbox"]:checked + label {
  color: var(--font-grey);
}

.savings-filter .checkbox input[type="checkbox"]:checked + label::before,
.checkbox label::after,
.savings-filter-alternative .checkbox input[type="checkbox"]:checked + label::before,
.checkbox label::after,
.btn.btn-large.silver.btn-toggle.collapsed.filter-selected,
.btn.btn-large.silver.btn-toggle.filter-selected {
  color: var(--white);
  background-color: var(--primary-purple);
}

.savings-filter-alternative .checkbox label::before,
.savings-filter .checkbox label::before {
  border: 1px solid var(--primary-purple) !important;
}

.savings-filter .checkbox input[type="checkbox"]:focus + label,
.savings-filter-alternative .checkbox input[type="checkbox"]:focus + label {
  outline: 2px solid var(--primary-purple);
}

.filter-list h3 {
  margin-top: 0;
}

div.filter-toggle a.btn.silver.btn-large {
  margin-top: 3.5em;
}

.filter-list .checkbox.disabled {
  opacity: 0.6;
  background: var(--grey-very-light);
}

.selectedRow {
  background-color: var(--grey-mid);
}

.animated-progress-indicator span {
  color: var(--primary-purple);
}

.filter-control-panel p span {
  font-weight: 500;
}

.filter-list.title h3 {
  font-family: var(--body-font);
}

.filter-list .defaultVal {
  overflow: visible !important;
}

.filter-list .btn.btn-link,
.filter-buttons a.btn-clear-all {
  border: none;
  padding: 9px 20px !important;
  margin-top: 10px;
}

.filter-list .btn.btn-link:before {
  display: none;
}

ul.ways-to-manage li {
  white-space: pre;
}

.btn.btn-large.silver.btn-toggle.filter-selected,
.btn.btn-large.silver.btn-toggle.collapsed.filter-selected,
.savings-filter-alternative .btn.btn-large.silver.btn-toggle.collapsed.filter-selected {
  color: var(--font-grey);
  background: var(--white) !important;
}

/* MODAL */
.modal-content .modal-footer .btn.btn-default.cancel-btn {
  padding-left: 35px !important;
}

.article-filter .btn-group .btn.btn-toggle {
  padding: 4px 12px !important;
}

/* Animate arrow on hover */
/* a.btn:hover:after, a.btn:focus:after, .pod.primary .article-one a.btn.btn-link:hover:after, .pod.primary .article-one a.btn.btn-link:focus:after, .article-one a.btn.btn-link:hover:after, .article-one a.btn.btn-link:focus:after, .article-two a.btn.btn-link:hover:after, .article-two a.btn.btn-link:focus:after, .article-icon a.btn.btn-link:hover:after, .article-icon a.btn.btn-link:focus:after{
      right: 2px;
    }
    */
/* Button with 'down' arrow */
a.btn-scroll-down,
.header.rate-header .rate-panel a.btn-primary {
  padding-right: 40px !important;
}

.savings-type .btn-toggle.collapsableController {
  padding-right: 10px;
}

.savings-filter-alternative .btn.btn-toggle.collapsed:after {
  transform: rotate(0deg) !important;
}

.savings-filter-alternative .btn.btn-toggle:after {
  transform: rotate(180deg) !important;
  transition: all 1s ease;
}

a.btn-scroll-down span {
  padding-right: 0px;
}

a.btn-scroll-down:after,
.savings-filter-alternative .btn.btn-toggle:after {
  right: 10px;
  content: "keyboard_arrow_down";
}

a.btn-scroll-down:hover::after,
a.btn-scroll-down:focus::after,
.savings-filter-alternative .btn.btn-toggle:hover:after,
.savings-filter-alternative .btn.btn-toggle:after {
  right: 10px;
  top: 50%;
}

.article-one a.btn.btn-link:after,
.article-one a.btn.btn-textlink:after {
  display: none;
}

.btn.btn-link:hover,
.btn.btn-link:focus,
.btn.btn-link:hover,
.btn.btn-link:focus,
.btn.btn-textlink:hover,
.btn.btn-textlink:focus,
.filter-buttons a.btn-clear-all:hover,
.filter-buttons a.btn-clear-all:focus {
  background: none;
  color: var(--text-grey);
  text-decoration-line: underline;
  text-decoration-color: var(--grey-mid);
  text-decoration-thickness: 2px !important;
  text-underline-offset: 5px;
}

.btn.btn-textlink:hover,
.btn.btn-textlink:focus {
  border-color: transparent;
}

.article-one a.btn.btn-link {
  text-decoration: none;
}

.article-one a.btn.btn-link:before {
  display: none;
}

.article-one a.btn.btn-link:hover {
  text-decoration-color: var(--grey-font);
  text-decoration-line: underline;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 5px;
}

.btn.loading:after {
  content: "data_usage";
  -webkit-animation: spinner 1s linear 0s infinite;
  animation: spinner 1s linear 0s infinite;
  font-size: 24px;
  right: 3px;
  margin-top: -12px;
}

@-ms-keyframes spinner {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}

@keyframes spinner {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}

@-webkit-keyframes spinner {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}

/* Input append - remove rounded corners */
.input-append .btn,
.input-append .btn.silver {
  border-radius: 0px 40px 40px 0px !important;
}

.input-append .btn:after,
.input-append .btn.silver:after {
  display: none;
}

/*BUTTON GROUPS*/
/* Decision Trees - ISA Transfer*/
.btn-group.decision-tree .btn.btn-toggle,
.btn-group.decision-tree .btn.btn-toggle.active {
  padding: 10px 14px;
}

.btn-group.decision-tree .btn.btn-toggle {
  border-radius: 0px !important;
  background: var(--white);
  border: 2px solid var(--primary-purple);
  font-size: 1rem;
  color: var(--primary-purple);
}

.btn-group.decision-tree .btn.btn-toggle ~ .btn.btn-toggle {
  border-left-width: 0px;
}

.btn-group.decision-tree .btn.btn-toggle.active {
  background: var(--primary-purple);
  color: var(--white);
  box-shadow: none;
}

.btn-group > .btn:after {
  display: none;
}

.decision-tree .btn.btn-toggle:first-of-type {
  border-radius: 40px 0 0 40px !important;
}

.decision-tree .btn.btn-toggle:last-of-type {
  border-radius: 0 40px 40px 0 !important;
}

/*handle underlines*/
p a,
li a {
  text-decoration-line: underline;
  text-decoration-color: var(--online-cyan);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

p a:hover,
p a:focus,
li a:hover,
li a:focus {
  text-decoration-line: underline;
  text-decoration-color: var(--grey-mid);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

ul.link-cluster li a,
ul.pdf li a,
.breadcrumb li a {
  text-decoration-line: underline;
  text-decoration-color: var(--grey-mid);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

ul.link-cluster li a:hover,
ul.link-cluster li a:focus,
ul.pdf li a:hover,
ul.pdf li a:focus,
.breadcrumb li a:hover,
.breadcrumb li a:focus {
  text-decoration-line: underline !important;
  text-decoration-color: var(--online-cyan) !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 5px;
}

ul.link-cluster li a:hover span,
ul.link-cluster li a:focus span {
  text-decoration-color: var(--online-cyan);
}

/* GLOBAL - ARTICLES ============================= */
.article.article-one .text-right {
  text-align: left;
  margin-left: 20px;
}

/* GLOBAL - MASTHEAD ============================= */
.preheader {
  background-color: var(--grey-light);
}

.preheader ul li a {
  color: var(--grey-font);
  text-decoration: none;
  font-weight: 500;
}

.preheader ul li a:hover {
  text-decoration-color: var(--grey-font);
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

ul.top-links li {
  border-left: 2px solid var(--online-cyan);
}

.header-lower {
  background-color: var(--grey-very-light);
}

.header-lower .input-append {
  margin-bottom: 0px;
}

.header .header-links ul li a {
  color: var(--grey-font);
  font-size: 14px;
  line-height: 1;
  margin-bottom: -5px;
  padding: 5px 10px 10px 10px;
  text-transform: none;
}

.header .header-links ul li a span {
  display: block;
}

.header .header-links ul li a.branch,
.header .header-links ul li a.search {
  background: none !important;
  line-height: 1;
}

.header .header-links ul li a.branch:hover,
.header .header-links ul li a.branch:active,
.header .header-links ul li a.branch:focus,
.header .header-links ul li a.search:hover,
.header .header-links ul li a.search:active,
.header .header-links ul li a.search:focus {
  background-color: var(--grey-light) !important;
  text-decoration-color: var(--grey-font);
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.header-links > ul > li > a:before {
  font-size: 2em;
}

.header-links > ul a.branch:before {
  content: "place";
}

.header-links > ul a.search:before {
  content: "search";
}

.header .header-links ul li a.branch:before,
.header .header-links ul li a.search:before {
  color: var(--online-cyan);
  line-height: 1;
}

/*GLOBAL - FOOTER*/
.footer {
  margin-bottom: 0;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  background: var(--grey-light) !important;
  border-top: 10px solid var(--online-cyan);
  color: var(--grey-font) !important;
}

.footer > .container {
  width: 100% !important;
}

.footer .container-inner {
  width: 1170px;
  margin: 0px auto;
}

.footer a,
.footer h2.h3 {
  color: var(--grey-font) !important;
}

.footer ul {
  padding-left: 0;
  margin-left: 0;
  list-style: none;
  margin-top: 10px;
}

.footer ul.footer-links li {
  padding: 0 10px;
  border-right: 2px solid var(--online-cyan);
}

.footer a {
  text-decoration: none;
  border: none;
}

.footer a:hover {
  text-decoration-color: var(--grey-font);
  text-decoration-line: underline;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 5px;
}

.footer h2.h3 {
  padding-bottom: 8px;
  border-bottom: 2px solid var(--grey-mid);
}

.footer .additional-links {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.footer .app-store-badge-placeholder a {
  display: inline-block;
  margin-top: 10px;
  transition: 0.1s ease;
  margin-right: 16px;
}

.footer .app-store-badge-placeholder a:hover {
  opacity: 0.8;
  transition: 0.1s ease;
}

.footer .app-store-badge-placeholder img.app-store-badge {
  display: inline-block;
  width: 140px;
}

.footer .span4 li a,
.news-article-sidebar ul li a {
  position: relative;
  padding: 0 19px;
  display: block;
  border: none;
}

.footer .span4 li a:before,
.news-article-sidebar ul li a:before {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  position: absolute;
  top: 50%;
  left: 0px;
  margin-top: -0.48em;
  background-image: url(/-/media/skipton-co-uk/CSS/img/cyan-arrow-15.png);
  background-repeat: no-repeat;
  background-position: -5px 0;
}

.footer ul.social-links {
  margin-top: 0;
}

.footer ul.social-links li {
  display: inline-block;
  vertical-align: middle;
  margin-right: 16px;
  margin-bottom: 0;
  margin-top: 10px;
}

.footer ul.social-links li a {
  display: block;
}

.footer ul.social-links li a:before {
  content: "";
  height: 32px;
  width: 32px;
  vertical-align: middle;
  display: inline-block;
  margin-right: 8px;
}

.footer ul.social-links li.facebook a:before {
  background: url(/~/media/Images/Social/Social-Icons/facebook.ashx) no-repeat;
}

.footer ul.social-links li.twitter a:before {
  background: url(/~/media/Images/Social/Social-Icons/twitter.ashx) no-repeat;
}

.footer ul.social-links li.linkedin a:before {
  background: url(/~/media/Images/Social/Social-Icons/linkedin.ashx) no-repeat;
}

.footer ul.social-links li.instagram a:before {
  background: url(/~/media/Images/Social/Social-Icons/instagram.ashx) no-repeat;
}

.footer-bottom {
  padding-top: 2rem;
  padding-bottom: 2rem;
  margin-bottom: 0;
  border-top: 2px solid var(--grey-mid);
}

.footer ul.footer-links {
  text-align: left;
}

.footer-links li a,
.footer-links li a:hover,
.footer-links li a:focus {
  font-size: 16px;
}

.footer ul.footer-links li:first-child {
  padding-left: 0;
}

.footer p.legal,
.footer p.small {
  font-size: 16px;
  line-height: 1.5;
}

@media only screen and (max-width: 768px) {

  .footer > .container > .container,
  .footer-bottom {
    padding-left: 20px;
    padding-right: 20px;
  }

  .footer ul.footer-links li {
    padding-left: 0;
    border-right: none;
  }

  .footer .app-store-badge-placeholder,
  .footer-bottom,
  .footer ul.footer-links li {
    text-align: left;
  }

  .footer .app-store-badge-placeholder a {
    margin-right: 16px;
  }

  .footer .app-store-badge-placeholder img.app-store-badge {
    margin-left: 0;
  }
}

/* GLOBAL - NAV ============================= */
.main-nav {
  background-color: var(--white);
  border-bottom: 10px solid var(--online-cyan);
  z-index: 200;
  position: relative;
  padding: 20px 0;
}

.main-nav > .container > .row,
.main-nav > .container > .row > .span12 {
  margin-left: 0;
}

.mega-nav > ul {
  background-color: var(--white);
  min-height: 47px;
  display: block;
}

.mega-nav > ul li {
  margin-bottom: 0px;
}

.mega-nav > ul li > ul li {
  margin-bottom: 0.75em;
}

.mega-nav > ul li a,
.mega-nav .dropdown-column h3 {
  color: var(--grey-font);
}

.mega-nav li:hover a,
.mega-nav li:focus a,
.mega-nav li:active a,
.mega-nav > ul li a:hover,
.mega-nav > ul li a:focus,
.mega-nav > ul li a:active,
.mega-nav > ul li.hover a {
  background-color: var(--grey-light) !important;
}

.mega-nav .dropdown {
  background-color: var(--grey-light) !important;
}

.mega-nav .dropdown-column h3 {
  font-family: var(--heading-font);
  font-size: 1.25em;
  line-height: 1.5;
  border-bottom: none;
  margin-bottom: 0;
}

.mega-nav .dropdown-column h3:after {
  display: block;
  content: "";
  height: 4px;
  width: 100px;
  background-color: var(--online-cyan);
  margin: 0.75em 0;
}

.mega-nav > ul li a {
  font-size: 18px;
  font-weight: 400;
}

.mega-nav li:hover a,
.mega-nav li:focus a,
.mega-nav li:active a,
.mega-nav > ul li a:hover,
.mega-nav > ul li a:focus,
.mega-nav > ul li a:active,
.mega-nav > ul li.hover a {
  background-color: var(--grey-light) !important;
  color: var(--grey-font) !important;
}

.mega-nav ul#mmenu > li > a:hover,
.mega-nav ul#mmenu > li > a:focus {
  text-decoration-color: var(--grey-font);
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.mega-nav .dropdown-column ul li a {
  background-image: none !important;
}

.mega-nav .dropdown-column ul li a:before {
  border-style: solid;
  border-width: 3px 3px 0 0;
  border-color: var(--online-cyan);
  content: "";
  display: block;
  height: 5px;
  position: absolute;
  left: 3px;
  top: 35%;
  transform: rotate(45deg);
  width: 5px;
}

.mega-nav .dropdown-column ul li a:hover,
.mega-nav .dropdown-column ul li a:focus {
  text-decoration-color: var(--grey-font);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

ul.link-cluster li {
  background-position: left 4px;
}

.mega-nav .dropdown {
  background-color: var(--grey-light) !important;
}

@media (min-width: 1200px) {
  .mega-nav > ul {
    margin-left: -13px;
  }

  .mega-nav > ul > li {
    margin-right: 20px;
  }

  .mega-nav > ul li a {
    padding: 15px 34px 15px 13px;
  }

  .mega-nav > ul > li > a:after {
    border-style: solid;
    border-width: 3px 3px 0 0;
    border-color: var(--online-cyan);
    content: "";
    display: block;
    height: 5px;
    position: absolute;
    right: 16px;
    top: 40%;
    transform: rotate(135deg);
    width: 5px;
  }

  .mega-nav > ul > li {
    margin-right: 24px;
  }

  .mega-nav > ul > li:last-child {
    margin-right: 0px;
  }

  .mega-nav > ul > li:first-child > a {
    padding-right: 15px;
  }

  .mega-nav > ul > li:first-child > a:after {
    display: none;
  }
}

/* tablet styling */
@media (max-width: 1199px) {
  .mega-nav > ul {
    margin-left: -16px;
  }

  .mega-nav > ul li a {
    padding: 13px 16px 14px 16px;
  }
}

@media (min-width: 768px) and (max-width: 979px) {
  .mega-nav > ul {
    margin-left: -11px;
  }

  .mega-nav > ul li a {
    font-size: 1rem;
    padding: 13px 11px 13px 11px;
    font-weight: 500;
  }
}

@media (min-width: 768px) {
  .mega-nav {
    display: block !important;
  }
}

/* mobile styling */
@media (max-width: 767px) {
  .main-nav {
    padding: 0px;
  }

  .mega-nav > ul {
    background-color: var(--grey-very-light);
  }

  .mega-nav ul li a.dtoggle,
  .mega-nav ul li a.dtoggle:hover,
  .mega-nav ul li a.dtoggle:focus,
  .mega-nav ul li a.dtoggle.active,
  .mega-nav ul li a.dtoggle.active:hover,
  .mega-nav ul li a.dtoggle.active:focus {
    background-image: none;
  }

  .mega-nav ul li a.dtoggle::after {
    border-style: solid;
    border-width: 3px 3px 0 0;
    border-color: var(--online-cyan);
    content: "";
    display: block;
    height: 5px;
    position: absolute;
    right: 16px;
    top: 40%;
    transform: rotate(135deg);
    width: 5px;
  }

  .mega-nav ul li a.dtoggle.active::after {
    transform: rotate(-45deg);
  }

  .mega-nav ul li a.dtoggle.active {
    background-color: var(--grey-very-light);
  }

  .mega-nav .toolbar li:hover a,
  .mega-nav .toolbar li:focus a {
    background-color: transparent !important;
  }

  .main-nav .toolbar {
    padding: 0px;
  }

  .main-nav .toolbar {
    background-color: var(--online-blue);
  }

  .main-nav .toolbar ul li a {
    font-size: 14px;
    text-transform: none;
  }

  .main-nav .toolbar ul li a:hover,
  .main-nav .toolbar ul li a:focus {
    color: var(--white) !important;
  }

  .main-nav .toolbar .search-panel,
  .main-nav .toolbar .branch-panel {
    background-color: var(--primary-purple);
  }

  .main-nav .toolbar ul li a.branch {
    background: url(/Components/Client/img/pin-mob-icon.png) var(--primary-purple) no-repeat center 10px;
  }

  .main-nav .toolbar ul li a.branch.collapsed {
    background: url(/Components/Client/img/pin-mob-icon.png) transparent no-repeat center 10px;
  }

  .main-nav .toolbar ul li a.search {
    background: url(/Components/Client/img/search-mob-icon.png) var(--primary-purple) no-repeat center 10px;
  }

  .main-nav .toolbar ul li a.search.collapsed {
    background: url(/Components/Client/img/search-mob-icon.png) transparent no-repeat center 10px;
  }

  .main-nav .toolbar .branchbox {
    margin-bottom: 0px;
  }

  .main-nav .toolbar .input-append.branchbox .btn {
    margin-right: 0px;
    margin-bottom: 0px;
  }

  .mega-nav {
    margin-bottom: 0px;
  }

  .mega-nav ul#mmenu {
    margin: 0px;
  }
}

/* Log In / Menu buttons */
.header .header-links ul li.login a {
  background: url(/-/media/skipton-co-uk/CSS/img/locked-padlock.png) no-repeat center 7px var(--online-blue);
  background-size: 12px 16px;
}

.header .header-links ul li.menu a {
  background: url(/-/media/skipton-co-uk/CSS/img/bars.png) no-repeat center 8px var(--primary-purple);
  background-size: 14px 14px;
}

.header .header-links ul li.login a,
.header .header-links ul li.menu a {
  padding: 28px 5px 5px;
}

/*Mega Nav Amends*/
.dropdown-column.column4,
.mega-nav .dropdown-column#column3,
.mega-nav .dropdown-column.column3 {
  display: none !important;
}

@media (min-width: 678px) {
  .mega-nav .dropdown-column {
    width: 44% !important;
  }
}

@media (min-width: 1200px) {
  .mega-nav .dropdown-column {
    width: 45% !important;
  }
}

@media (max-width: 767px) {

  .mega-nav .dropdown,
  .mega-nav li:hover a,
  .mega-nav li:focus a,
  .mega-nav li:active a,
  .mega-nav > ul li a:hover,
  .mega-nav > ul li a:focus,
  .mega-nav > ul li a:active,
  .mega-nav > ul li.hover a {
    background-color: var(--grey-very-light) !important;
    text-decoration: none !important;
  }

  .mega-nav .dropdown-column {
    width: 100% !important;
    box-sizing: border-box;
  }

  .mega-nav .dropdown-column.column2 {
    display: block !important;
  }

  .mega-nav .dropdown-column.column2 h3.serif {
    display: none !important;
  }

  .mega-nav > ul > li {
    border-bottom: 1px solid var(--grey-mid);
  }
}

@media (max-width: 979px) {
  .mega-nav ul li a.dtoggle.active {
    background-color: var(--grey-very-light);
    color: var(--grey-font);
  }
}

/* PAGE HEADERS ============================= */
.hero-header-wrapper .header-banner h1,
.hero-header-wrapper .header-banner h2 {
  color: var(--white);
  font-family: var(--heading-font);
  font-size: 1.953rem;
  margin-bottom: 0;
  margin-top: 0;
  text-align: left;
}

.hero-header-wrapper .header-banner .content {
  background-color: var(--online-blue);
  text-align: left;
}

.hero-header-wrapper .header-banner h1:after,
.hero-header-wrapper .header-banner h2:after {
  background-color: var(--white);
  content: "";
  display: block;
  height: 3px;
  margin: 15px 0 0;
  width: 20%;
}

.hero-header-wrapper .header-banner h1 + p,
.hero-header-wrapper .header-banner h1 + a.btn,
.hero-header-wrapper .header-banner h2 + p,
.hero-header-wrapper .header-banner h2 + a.btn {
  margin-top: 15px;
}

.hero-header-wrapper .header-banner .content .btn,
.hero-header-wrapper .header-banner .content .btn.silver,
.hero-header-wrapper .header-banner .content .btn.btn-large {
  background-color: var(--white);
  color: var(--grey-font);
  border-color: var(--white);
  margin-left: 0px;
}

.hero-header-wrapper .header-banner .content .btn.btn-large.btn-primary,
.hero-header-wrapper .header-banner .content .btn.btn-primary,
.hero-header-wrapper .header-banner .content .btn.btn-large.primary,
.hero-header-wrapper .header-banner .content .btn.primary {
  background-color: var(--white);
  color: var(--grey-font) !important;
}

.hero-header-wrapper .header-banner .content .btn:hover,
.hero-header-wrapper .header-banner .content .btn.silver:hover,
.hero-header-wrapper .header-banner .content .btn.btn-large:hover,
.hero-header-wrapper .header-banner .content .btn.btn-large.btn-primary:hover,
.hero-header-wrapper .header-banner .content .btn.btn-primary:hover,
.hero-header-wrapper .header-banner .content .btn:focus,
.hero-header-wrapper .header-banner .content .btn.silver:focus,
.hero-header-wrapper .header-banner .content .btn.btn-large:focus,
.hero-header-wrapper .header-banner .content .btn.btn-large.btn-primary:focus,
.hero-header-wrapper .header-banner .content .btn.btn-primary:focus {
  opacity: 1;
  box-shadow: 0 0 0 3px var(--primary-purple);
}

/*New header banner component amends*/
@media (max-width: 767px) {
  .hero-header-wrapper {
    margin-left: -20px;
    margin-right: -20px;
    width: calc(100% + 40px);
  }
}

@media (max-width: 979px) {

  .hero-header-wrapper .header-banner h1,
  .hero-header-wrapper .header-banner h2 {
    font-size: 26px;
  }
}

@media (min-width: 768px) {
  .hero-header-wrapper {
    margin-left: -3%;
    margin-right: -3%;
    width: 106%;
  }
}

@media (min-width: 1200px) {
  .hero-header-wrapper {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }
}

@media (min-width: 1368px) {
  .hero-header-wrapper {
    margin-left: -5%;
    margin-right: -5%;
    width: 110%;
  }
}

.carousel-inner {
  overflow: visible !important;
}

.hp-banner {
  margin-top: -5px;
}

.hp-banner .carousel-inner {
  overflow: hidden !important;
}

/* reset negative margins for screen sizes close to breakpoints - avoids horizontal scroll */
@media (min-width: 980px) and (max-width: 1060px),
(min-width: 768px) and (max-width: 840px) {
  .hero-header .banner {
    padding: 20px;
    margin: 0px 0px 2em;
  }

  .hero-header-wrapper {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }
}

.hp-banner .hero-header-wrapper {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}

/*Hero carousel pagination styling added by LS*/
.hp-banner .hero-carousel {
  padding-bottom: 35px !important;
}

.carousel-indicators {
  bottom: 0 !important;
  right: 0 !important;
  left: 0 !important;
  text-align: center !important;
  top: auto !important;
}

.carousel-indicators li {
  float: none !important;
  display: inline-block !important;
  background-color: var(--white);
  border: 1px solid var(--primary-purple);
  box-sizing: border-box;
}

.carousel-indicators li.active {
  background-color: var(--primary-purple) !important;
}

.hp-banner .hero-carousel a.carousel-control {
  background-color: var(--primary-purple);
}

a.carousel-control:hover,
a.carousel-control:focus {
  opacity: 1 !important;
  text-decoration: none !important;
  outline: solid var(--online-cyan) 4px;
  outline-offset: 0px;
}

@media (max-width: 767px) {

  .hp-banner .hero-header-wrapper,
  .hero-header-wrapper .header-banner .content {
    background: var(--online-blue);
  }
}

.hero-header-wrapper.fa-banner .header-banner .content,
.fa-section .hero-header-wrapper .header-banner .content {
  background-color: var(--online-blue);
  top: 50%;
  padding: 50px 30px 60px;
  width: 50%;
  box-sizing: border-box;
  margin-left: 0;
}

.fa-section .hero-header-wrapper .header-banner h2,
.fa-section .hero-header-wrapper .header-banner h2 + p {
  background-color: transparent;
  padding: 0;
  margin-right: 0;
  margin-left: 0;
}

.fa-section .hero-header-wrapper .header-banner h2 {
  font-size: 1.953rem;
}

.fa-section .hero-header-wrapper .header-banner h2:after {
  content: "";
  width: 20%;
  height: 3px;
  background-color: #fff;
  display: block;
  margin: 15px 0 0;
}

.fa-section .hero-header-wrapper .header-banner h2 + p {
  margin-top: 10px;
}

@media (max-width: 767px) {
  .fa-section .hero-header-wrapper .header-banner .content {
    width: 100%;
    margin-left: 0px;
    padding: 20px;
  }

  .fa-section .hero-header-wrapper .header-banner h2 {
    font-size: 24px;
  }
}

@media (max-width: 380px) {
  .fa-section .hero-header-wrapper .header-banner h2 {
    font-size: 1.45em;
  }
}

/*OUR PURPOSE - STRAPLINE*/
.our-purpose {
  padding-top: 3rem;
  padding-bottom: 1rem;
}

.our-purpose p {
  font-size: 1.953rem !important;
  line-height: 1.5 !important;
  font-family: var(--heading-font) !important;
  color: var(--primary-purple) !important;
  margin-bottom: 0px !important;
  font-weight: 400 !important;
}

@media (max-width767px) {
  .our-purpose p {
    text-align: center;
  }
}

.our-purpose p:before,
.our-purpose p:after {
  content: "";
  width: 10%;
  height: 4px;
  background-color: var(--grey-mid);
  display: block;
  margin: 0px auto;
}

.our-purpose p:before {
  margin-bottom: 15px;
}

.our-purpose p:after {
  margin-top: 15px;
}

/*Mobile Styling*/
@media (max-width: 767px) {
  .our-purpose p {
    font-size: 1.563rem !important;
  }
}

/* TABLES ============================= */
.table thead:first-child tr:first-child th,
.table thead tr th:first-child,
.table thead tr td:first-child,
.table thead tr th:last-child,
.table thead tr td:last-child,
.table thead th {
  border: none;
  background: var(--white);
  color: var(--text-grey);
  font-weight: 500;
  font-size: 16px;
}

table.table thead tr {
  border-bottom: 2px solid var(--grey-dark);
}

.table thead tr th:first-child,
.table thead tr td:first-child,
.table thead tr th:last-child,
.table thead tr td:last-child,
.table thead th,
.table.product-table tr th,
.table.product-table tr td {
  vertical-align: middle;
}

.table.product-table.rep-example-table tr th,
.table.product-table.rep-example-table tr td {
  vertical-align: top;
}

.table.product-table tbody:first-child tr td,
.table.product-table tbody:first-child tr th,
.table tr th,
.table tr td {
  border: none !important;
}

.table-striped tbody > tr:nth-child(even) > td,
.table-striped tbody > tr:nth-child(even) > th,
.selectedRow {
  background-color: var(--grey-very-light) !important;
}

.table.product-table tbody tr th {
  width: 200px;
  font-size: 16px;
}

.table.product-table td.rate-cell,
.table.product-table th.rate-cell {
  width: 20%;
}

td ul {
  margin-bottom: 0px;
}

table.table,
table.summary-table.smr,
table.summary-table.smr li {
  font-size: 16px;
}

table.table {
  margin-bottom: 2rem;
}

table.summary-table.smr ul li ul {
  margin-top: 8px;
}

.table th {
  font-weight: 500;
}

.table th.text-center,
.table td.text-center {
  text-align: center;
}

.responsive-table {
  clear: both;
  margin-bottom: 2rem;
  width: 100%;
}

.responsive-table table.table {
  margin-bottom: 0;
}

@media screen and (max-width: 767px) {
  .responsive-table {
    overflow-y: hidden;
  }
}

/* SAVINGS PRODUCT PANELS ============================= */
.panel-table .product-table tbody tr {
  background-color: var(--grey-mid);
}

@media (min-width: 1200px) {
  .panel-table .product-table tbody tr {
    width: 270px;
    margin-left: 30px;
  }
}

/* PODS ============================= */
.article-one a.btn.btn-link {
  margin: 20px 20px 0px 0px;
}

.pod .article-one a.btn.btn-link {
  margin-left: 20px;
}

.pod .article-one img,
.article-one img {
  border-bottom: 10px solid var(--online-cyan);
  box-sizing: border-box;
  margin-bottom: 0 !important;
  display: inline-block;
}

.pod.linked-heading .article-one img {
  border: none;
}

.pod .article-one a.btn.btn-link,
.article-one a.btn.btn-link {
  margin-left: 20px !important;
  border-radius: 40px !important;
  padding: 8px 19px !important;
  margin-bottom: 20px !important;
}

.article-one .text-right a.btn.btn-link {
  margin-left: 0 !important;
}

.pod .article-one h3,
.article-one h3 {
  background-color: transparent;
  display: block;
  max-width: 100%;
}

.pod h3:after {
  content: "";
  display: block;
  background-color: var(--grey-mid);
  height: 2px;
  width: 60%;
  max-width: 160px;
  margin-top: 10px;
}

.pod.linked-heading .article-one h3 a {
  padding-bottom: 8px;
  text-decoration-line: underline;
  text-decoration-color: var(--online-cyan);
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}

.pod.linked-heading .article-one h3 a:hover {
  text-decoration-color: var(--grey-mid);
}

.pod.linked-heading .article-one h3:after {
  display: none;
}

.pod.text-center h3:after {
  margin-left: auto;
  margin-right: auto;
}

.pod.text-right h3:after {
  margin-left: 40%;
}

.pod.warm-grey {
  background: var(--grey-light);
}

.pod.powder-blue {
  background: var(--grey-light);
}

/*icon pods*/
.pod.pod-icon .article-one img,
.pod.icon img,
.article-one img[src$=".svg"],
.pod .article-one img[src$=".svg"],
.pod .article-two img[src$=".svg"],
.pod .article-icon img[src$=".svg"],
.svg .pod .article-one img,
.svg .pod .article-two img,
.svg .pod .article-icon img,
.svg .article-one img,
.svg .article-two img,
.svg .article-icon img {
  width: auto;
  padding: 20px 20px 0 20px;
  max-width: 100%;
  height: 120px;
  max-height: 120px;
  box-sizing: border-box;
  border: none;
}

.pod.pod-icon.extra-large-icon .article-one img {
  height: 180px;
  max-height: 180px;
}

.pod.pod-icon.large-icon .article-one img {
  height: 150px;
  max-height: 150px;
}

.pod.pod-icon.small-icon .article-one img {
  height: 90px;
  max-height: 90px;
}

.pod.pod-icon.v-small-icon .article-one img {
  height: 80px;
  max-height: 80px;
}

.pod.pod-icon.text-center .article-one img {
  margin: 0px auto 0px !important;
}

.pod.pod-icon.text-right .article-one img {
  margin: 0px !important;
}

.article-one small {
  display: block;
}

/*Central Pods*/
.central-pods .article-one a.btn.btn-link,
.central-pods .article-two a.btn.btn-link,
.central-pods .article-icon a.btn.btn-link {
  margin-left: 0 !important;
}

.central-pods {
  text-align: center;
}

.central-pods .article-one img,
.central-pods .article-two img,
.central-pods .article-icon img {
  margin: 0 auto !important;
}

/* WELLS ============================= */
.well,
.well.light-purple,
.well.my-review-cta,
.well.standard-purple-cta {
  padding: 40px;
  background-color: var(--grey-very-light);
  border-top: 6px solid var(--online-cyan);
}

.well h2,
.well .h2 {
  line-height: 1.5;
}

.well a.btn:last-child,
.well p:last-child {
  margin-bottom: 0px;
}

.well h2:first-of-type,
.well h3:first-of-type {
  margin-top: 0px;
}

.well p.tel {
  font-weight: 500;
  margin-bottom: 0.5em;
}

/*Mobile Styling*/
@media (max-width: 767px) {

  .well,
  .well.light-purple {
    padding: 20px;
  }
}

/* Variant: Well group (equal-height side-by-side wells) */
@media (min-width: 768px) {
  .well-group {
    display: flex;
    gap: 30px;
  }
}

/* ACTION PANELS ============================= */
/* LINK CLUSTERS ============================= */
.linkCluster.link-cluster-three h3,
.news-article-sidebar h3 {
  margin: 10px 0;
  background-color: transparent;
  padding: 0px;
  border-bottom: none;
}

.linkCluster.link-cluster-three ul.link-cluster {
  border-bottom: 1px solid var(--grey-light);
  list-style-type: none;
  margin-left: 0;
}

.linkCluster.link-cluster-three ul.link-cluster li {
  margin: 0;
  padding: 10px 0 10px 0px;
  border-top: 1px solid var(--grey-light);
  background-position: left 11px;
  background-repeat: no-repeat;
  border-bottom: none;
}

.linkCluster.link-cluster-three ul.link-cluster li a {
  line-height: 1rem;
  text-decoration: none;
  padding: 0px;
  background: none;
}

.linkCluster.link-cluster-three ul.link-cluster li a span {
  margin-left: 35px;
}

.linkCluster.link-cluster-three ul.link-cluster li a i {
  width: 28px;
}

/* INFO PANELS ============================= */
.message-wrapper .message.regulatory-message {
  margin-top: 2rem;
}

.message.regulatory-message {
  background-color: var(--grey-mid);
  padding: 20px;
}

i.brown {
  background-color: var(--online-blue);
}

/* WARNING MESSAGES ============================= */
/*changed to lowercase LS 24/04/20*/
.message.warning-message,
p.mortgage-warning,
.message.fs-warning-message {
  text-align: center;
  text-transform: none !important;
  font-weight: 500;
  padding: 0.75em 1em;
  border: 3px solid var(--grey-mid);
  font-size: 16px;
  background-color: var(--white);
  line-height: 1.5;
  font-weight: 500;
  color: var(--font-grey);
}

.message.warning-message p,
p.mortgage-warning p,
.message.fs-warning-message p {
  font-size: 16px;
  font-weight: 500;
  color: var(--font-grey);
}

/* COLLAPSIBLE PANEL / ACCORDION ============================= */
.accordion-wrapper {
  border-top: 1px solid var(--grey-mid);
}

.alt .accordion,
.accordion {
  margin: 0;
  border-top: 1px solid var(--grey-mid);
  border-bottom: 1px solid var(--grey-mid);
}

/* Remove multiple borders when more than one accordion */
.alt .accordion ~ .alt .accordion,
.accordion ~ .accordion {
  border-top: none;
}

.alt .accordion-heading a.accordion-toggle h3 {
  font-weight: 500;
  font-size: 1.563rem;
}

.alt .accordion-group,
.accordion-group {
  border-width: 0px;
  border-radius: 0px;
  margin-bottom: 0px;
}

.alt .accordion-heading a.accordion-toggle,
.accordion-heading a.accordion-toggle {
  min-height: 1rem;
  line-height: 1.5;
  padding: 25px 45px 25px 10px;
  border-bottom: 0px;
  font-size: 1.2rem;
  background: var(--white);
  position: relative;
  font-weight: 500;
  text-decoration: none;
  color: var(--grey-font);
}

.alt .accordion-heading a.accordion-toggle h3,
.accordion-heading a.accordion-toggle h3 {
  padding-bottom: 1px;
}

.alt .accordion-heading a.accordion-toggle:hover,
.accordion-heading a.accordion-toggle:hover,
.alt .accordion-heading a.accordion-toggle:focus,
.accordion-heading a.accordion-toggle:focus {
  text-decoration: none;
}

.alt .accordion-heading a.accordion-toggle:hover h3,
.accordion-heading a.accordion-toggle:hover h3,
.alt .accordion-heading a.accordion-toggle:focus h3,
.accordion-heading a.accordion-toggle:focus h3 {
  border-bottom: 1px solid var(--font-grey);
}

.alt .accordion-heading a.accordion-toggle:after,
.alt .accordion-heading a.accordion-toggle:before,
.accordion-heading a.accordion-toggle:after,
.accordion-heading a.accordion-toggle:before {
  position: absolute;
  top: 25px;
  font-size: 28px;
  right: 10px;
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
  line-height: 1;
}

.alt .accordion-heading a.accordion-toggle:before,
.accordion-heading a.accordion-toggle:before {
  content: "add_circle_outline";
  -ms-transform: rotate(45deg);
  /* IE 9 */
  -webkit-transform: rotate(45deg);
  /* Chrome, Safari, Opera */
  transform: rotate(45deg);
  color: var(--text-grey);
  width: auto;
  height: auto;
  border: 0px;
  background: none;
  margin: 0px;
}

.alt .accordion-heading a.accordion-toggle.collapsed:before,
.accordion-heading a.accordion-toggle.collapsed:before {
  color: var(--online-cyan);
  content: "add_circle_outline";
  -ms-transform: rotate(0deg);
  /* IE 9 */
  -webkit-transform: rotate(0deg);
  /* Chrome, Safari, Opera */
  transform: rotate(0deg);
  width: auto;
  height: auto;
  border: 0px;
  margin: none;
  background: none;
}

.alt .accordion-inner,
.accordion-inner {
  padding: 10px 10px 20px;
}

.accordion-heading a::before {
  background: none;
}

.alt .accordion-inner {
  background-color: transparent;
}

.product-apply-section.accordion-group {
  border-bottom: 1px solid var(--grey-mid);
}

.product-apply-section.accordion-group:last-child {
  border-bottom: none;
}

/* TABS - FLOATING ============================= */
.nav-tabs > li > a {
  background: var(--grey-light);
  border: none;
  margin: 0px 1px;
  border-radius: 10px 10px 0px 0px;
  color: var(--primary-purple);
  border-bottom: 1px solid var(--grey-mid);
  margin-top: 1px;
}

.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  background: var(--grey-light);
  border-bottom: 1px solid var(--grey-mid);
}

.nav-tabs > .active > a,
.nav-tabs > .active > a:hover,
.nav-tabs > .active > a:focus {
  color: var(--grey-font);
  background: var(--white);
  border: 1px solid var(--grey-mid);
  border-bottom-width: 0;
  margin-top: 0;
  padding-top: 11px;
  padding-bottom: 10px;
  border-radius: 10px 10px 0px 0px;
  text-decoration: none;
  opacity: 1;
}

/* TABS - FULL WIDTH ============================= */
.full-width-tabs > ul.nav.nav-tabs {
  margin-top: 30px;
  display: flex;
}

.full-width-tabs > ul.nav.nav-tabs > li {
  float: none;
  display: flex;
  flex: 1;
  width: 100%;
  padding-right: 0px;
  min-height: 100%;
  border-bottom: 1px solid var(--grey-mid);
  box-sizing: border-box;
  overflow: hidden;
  margin-bottom: -1px;
}

.full-width-tabs > ul.nav.nav-tabs > li > a {
  padding: 13px 14px 9px;
}

.savings-section .full-width-tabs > ul.nav.nav-tabs.nav-stacked > li:first-child > a,
.full-width-tabs > ul.nav.nav-tabs > li > a {
  background: var(--grey-light);
  border: none;
  margin: 0px 2px;
  border-radius: 10px 10px 0px 0px;
  color: var(--text-grey);
  flex: 1;
  font-size: 1rem;
  text-shadow: none;
  text-decoration-line: underline;
  text-decoration-color: var(--online-cyan);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.full-width-tabs > ul.nav.nav-tabs > li.active {
  border: 1px solid var(--grey-mid);
  border-bottom-color: transparent;
  border-radius: 10px 10px 0px 0px;
}

.savings-section .full-width-tabs > ul.nav.nav-tabs.nav-stacked > li.active:first-child > a,
.full-width-tabs > ul.nav.nav-tabs > li.active > a,
.savings-section .full-width-tabs > ul.nav.nav-tabs.nav-stacked > li.active:first-child > a:hover,
.full-width-tabs > ul.nav.nav-tabs > li.active > a:hover,
.savings-section .full-width-tabs > ul.nav.nav-tabs.nav-stacked > li.active:first-child > a:focus,
.full-width-tabs > ul.nav.nav-tabs > li.active > a:focus {
  background: var(--white);
  border: none;
  box-shadow: none;
  text-shadow: none;
  color: var(--font-grey);
  padding: 12px 0px 9px;
  margin: 0px;
  text-decoration: none;
}

.savings-section .full-width-tabs > ul.nav.nav-tabs.nav-stacked > li:first-child > a:hover,
.full-width-tabs > ul.nav.nav-tabs > li > a:hover,
.savings-section .full-width-tabs > ul.nav.nav-tabs.nav-stacked > li:first-child > a:focus,
.full-width-tabs > ul.nav.nav-tabs > li > a:focus {
  text-decoration-line: underline;
  text-decoration-color: var(--white);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  background: var(--online-blue);
  color: var(--white);
}

.tabbable .tab-content,
.tabbable #tab-content {
  margin: 2rem 0px 2rem;
  padding: 0px;
  border: 0;
  border-top: 0px;
  /*min height required when a loading timer is used i.e. product tabs */
  min-height: 200px;
}

.tabbable.verticalTabContainer #tab-content {
  margin-top: 0px;
  padding-top: 0px;
}

.tabbable .tab-content .tab-pane *:last-child {
  margin-bottom: 0px;
}

.verticalTabContainer.tabs-left > div > ul.nav.nav-tabs > li > a {
  font-weight: 500;
}

.verticalTabContainer .tab-pane .rich-text > *:first-child {
  margin-top: 0px;
}

/* BRANCH FINDER ============================= */
#pnlbranchSearch {
  margin-bottom: 0px;
}

#pnlbranchSearch > .row-fluid > .span8 {
  width: 100%;
}

#pnlbranchSearch > .row-fluid > .span8 > div,
#pnlbranchSearch > .row-fluid > .span8 > p {
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 0px;
}

#pnlbranchSearch > .row-fluid > .span8 > div.input-append {
  margin-right: 10px;
}

@media (max-width: 767px) {
  #pnlbranchSearch > .row-fluid > .span8 > div.input-append + p {
    display: block;
    margin-top: 1em;
  }
}

#pnlbranchSearch > .row-fluid > .span8 > div.input-append .btn,
#pnlbranchSearch > .row-fluid > .span8 > p button {
  margin-bottom: 0px;
}

#pnlbranchSearch > .row-fluid > .span8 > *:last-child {

  @media (max-width: 1199px) {
    display: block;
    margin-top: 1.5rem;
  }

  @media (min-width: 1200px) {
    float: right;
  }
}

#pnlbranchSearch > .row-fluid > .span8 > *:last-child button {
  background: transparent;
  border: none;
  border-radius: 3px !important;
  color: var(--grey-font);
  padding: 0 0 0 1em !important;
  text-decoration-line: underline;
  text-decoration-color: var(--online-cyan);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

#pnlbranchSearch > .row-fluid > .span8 > *:last-child button:before {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  position: absolute;
  top: 50%;
  left: 0px;
  margin-top: -0.48em;
  background-image: url(https://www.skipton.co.uk/-/media/skipton-co-uk/CSS/img/cyan-arrow-15.png);
  background-repeat: no-repeat;
  background-position: -5px 0;
}

#pnlbranchSearch > .row-fluid > .span8 > *:last-child button:hover {
  box-shadow: none !important;
  text-decoration-color: var(--grey-mid);
}

#pnlbranchSearch > .row-fluid > .span8 > *:last-child button:focus {
  box-shadow: none !important;
  outline: 2px solid var(--grey-font);
  text-decoration-color: var(--grey-mid);
}

#pnlbranchSearch #nearestBranches.span3 {
  display: none;
}

#searchResultsAddress {
  border-top: 1px solid var(--grey-light);
}

#branchDetails .branch-search-result {
  margin: 10px 0 10px;
  padding: 10px 0 10px;
  border-top: 0px;
  border-bottom: 1px solid var(--grey-light);

  @media (max-width: 767px) {
    padding-bottom: 30px !important;
  }
}

#branchDetails > .branch-search-result h2 {
  margin-top: 0px;
}

#branchDetails > .branch-search-result > *:empty,
#branchDetails > .branch-search-result br {
  display: none;
}

#branchDetails > .branch-search-result > .span4.dl-horizontal {
  margin-left: 0px;
}

@media (max-width: 767px) {
  #branchDetails > .branch-search-result > .span4.dl-horizontal {
    margin-bottom: 1rem;
  }
}

#branchDetails > .branch-search-result > .dl-horizontal + .span4 h3:after {
  content: "*";
  font-family: var(--body-font);
  font-size: 1rem;
  position: relative;
  top: -0.2em;
}

#branchDetails > .branch-search-result > .span4 h3 {
  margin-top: 0px;
}

#branchDetails .branch-search-result dl.dl-horizontal dt {
  font-weight: 500 !important;
  width: 40px !important;
}

#branchDetails .branch-search-result dl.dl-horizontal dd {
  margin-left: 50px !important;
}

@media (max-width: 767px) {
  #branchDetails .branch-search-result dl.dl-horizontal dt {
    float: left;
    clear: left;
  }
}

#branchDetails .branch-search-result a {
  color: var(--font-grey);
  text-decoration-line: underline;
  text-decoration-color: var(--online-cyan);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

#branchDetails .branch-search-result a:hover,
#branchDetails .branch-search-result a:focus {
  color: var(--font-grey);
  text-decoration-color: var(--grey-mid);
}

input[type="hidden"]#branchName + h1:after {
  content: "";
  width: 20%;
  height: 4px !important;
  background-color: var(--grey-light) !important;
  display: block;
  margin: 10px auto 0;
}

.branch-details .contact h2 {
  margin-top: 0;
}

.branch-details p a.btn.btn-link {
  margin-top: -1rem;
  text-align: left;
}

.branch-details p a.btn.btn-link:hover {
  box-shadow: none !important;
}

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

.branch-details .opening-times dl.dl-horizontal dt {
  font-weight: 500 !important;
  width: 40px !important;
}

.branch-details .opening-times dl.dl-horizontal dd {
  margin-left: 50px !important;
}

.branch-details .nav.nav-tabs {
  margin-bottom: 5px;
}

.branch-details .nav.nav-tabs > li > a {
  color: var(--grey-font);
  padding-left: 2rem;
  padding-right: 2rem;
  text-decoration-line: underline;
  text-decoration-color: var(--online-cyan);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.branch-details .nav.nav-tabs > li.active > a {
  text-decoration: none;
}

.branch-details .nav.nav-tabs > li:not(.active) > a:hover,
.branch-details .nav.nav-tabs > li:not(.active) > a:focus {
  background: var(--online-blue);
  color: var(--white);
  text-decoration-color: var(--white);
}

.branch-details .nav.nav-tabs > li:not(.active) > a:focus {
  outline-offset: 0;
}

.branch-details + hr {
  display: none;
}

.fa-disclaimer {
  border: 1px solid var(--grey-light);
  padding: 15px;
  margin-bottom: 10px;
}

.fa-disclaimer h5 {
  margin-bottom: 5px;
}

.fa-disclaimer p {
  font-size: 16px !important;
  line-height: 1.5;
}

.fa-disclaimer *:first-child {
  margin-top: 0px;
}

.fa-disclaimer *:last-child {
  margin-bottom: 0px;
}

.product-apply-section ul.pdf li {
  font-size: 1em;
}

#SavingsCalculatorDisplay #btnCalculateSavings,
#SavingsCalculatorDisplay #btnClear {
  border-radius: 40px !important;
  padding-right: 12px;
}

.accordion-group {
  border-bottom: 1px solid var(--grey-mid);
}

.accordion {
  border-bottom: 0;
}

.open-banking.action-panel .content {
  background-color: var(--grey-very-light) !important;
}

.header.rate-header .rate-panel a.btn-primary {
  border-radius: 40px !important;
  font-weight: 500;
  margin: 0px;
}

.cta.savings-cta a.btn-primary {
  background: var(--online-blue);
  border-radius: 40px !important;
  font-weight: 500;
  padding: 16px 40px 16px 30px;
}

.cta.savings-cta .monthly-interest p,
.cta.savings-cta .annual-interest p {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 20px;
}

.cta.savings-cta .monthly-interest p span,
.cta.savings-cta .annual-interest p span {
  font-size: 1.5em;
  line-height: 1;
}

/* FIx to remedy incorrectly placed span on single application CTA */
.cta.savings-cta .span12 .monthly-interest p,
.cta.savings-cta .span12 .annual-interest p {
  font-size: 1.5em;
  font-weight: 500;
  margin-bottom: 20px;
}

.cta.savings-cta .span12 .monthly-interest p span,
.cta.savings-cta .span12 .annual-interest p span {
  font-size: 18px;
  line-height: 1;
}

/* FIX to remedy different size text in non-tiered savings accounts */
.not-tiered .header.rate-header .rate-panel h2 {
  font-size: 1.5rem;
  color: var(--white);
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: 1.25rem;
  margin-top: 0px;
}

.not-tiered .header.rate-header .rate-panel h2 span,
:not(.not-tiered) .header.rate-header .rate-panel h2 > strong:first-child {
  font-size: 3.815rem;
  font-weight: 500;
  display: block;
}

@media (max-width: 767px) {
  .not-tiered .header.rate-header .rate-panel h2 span {
    font-size: 2.815rem;
  }
}

/* FIX to address incorrect text size in CTA on tiered products with just monthly or annual, not both. Add class of "single-interest" - Aug 2019. DP */
.single-interest .cta.savings-cta .span12 .monthly-interest p,
.single-interest .cta.savings-cta .span12 .annual-interest p {
  font-size: 18px;
}

.single-interest .cta.savings-cta .span12 .monthly-interest p span,
.single-interest .cta.savings-cta .span12 .annual-interest p span {
  font-size: 1.5em;
}

/* END FIX */
.header.rate-header .heading-panel h1 {
  text-align: left !important;
}

@media (max-width: 767px) {
  .accordion.mobile-products a.accordion-toggle {
    background: var(--grey-light);
  }
}

.dl-horizontal.phone-numbers dt,
.dl-horizontal.phone-numbers dd {
  margin-bottom: 10px;
}

/*------------------------------------------------ New Summary Box --------------------------------------*/
.summary-box h2,
h2.summaryBoxHeader {
  text-align: left;
}

.summary-box h2:after,
h2.summaryBoxHeader:after {
  content: "";
  display: block;
  width: 100px;
  height: 4px;
  background-color: var(--online-cyan);
  margin: 20px 0px 30px;
}

.summary-table th {
  font-family: var(--body-font);
  font-size: 1.25rem;
}

.summary-table.table tr th,
.summary-table.table tr td {
  padding: 20px;
  box-sizing: border-box;
  line-height: 1.5;
}

@media (max-width: 767px) {
  .summary-box {
    padding: 10px;
  }

  .summary-box table.table,
  .summary-box table.table thead:first-child tr:first-child th,
  .summary-box table.table thead tr th:first-child,
  .summary-box .table tr th,
  .summary-box .table tr td {
    font-size: 12px;
    line-height: 1.2;
  }

  .summary-box .table tr th,
  .summary-box .table tr td {
    padding: 10px 5px;
  }
}

/*------------------------------------------------ UNIFORM CALL TO ACTION - CONTAINER --------------------------------------*/
.ucta-container.standard-cta {
  background-color: var(--grey-light);
  border-top: 10px solid var(--online-cyan);
  padding: 40px;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 40px;
  box-shadow: 0px 10px 10px -10px var(--black-tint-25);
}

/*------------------------------------------------ UNIFORM CALL TO ACTION - GLOBAL PANEL STYLING --------------------------------------*/
.ucta-container.standard-cta .ucta-section {
  padding-top: 100px;
  background-size: 100px 100px;
  background-position: top center;
  background-repeat: no-repeat;
}

.ucta-container.standard-cta h2 {
  margin-top: 0;
}

.ucta-container.standard-cta .ucta-section h3,
.ucta-container.standard-cta .ucta-section h4 {
  margin-bottom: 0.25em;
  margin-top: 0.5em;
}

.ucta-container.standard-cta .buttons,
.ucta-container.standard-cta .branchlocator,
.ucta-container.standard-cta .number {
  margin-bottom: 10px;
}

.ucta-container.standard-cta .row-fluid:not(:first-child) .span12 {
  margin-top: 2rem;
}

.ucta-container.standard-cta .number a {
  text-decoration-line: underline;
  text-decoration-color: var(--online-cyan);
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
  color: var(--grey-font);
}

.ucta-container.standard-cta .number a:hover {
  text-decoration-line: underline;
  text-decoration-color: var(--grey-mid);
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
}

/*------------------------------------------------ UNIFORM CALL TO ACTION - DEFINE BACKGROUND IMAGES --------------------------------------*/
.ucta-container.standard-cta .ucta-section.online-icon {
  background-image: url(/~/media/skipton-co-uk/images/icons/CTA/CTA-100x100-02-online.ashx);
}

.ucta-container.standard-cta .ucta-section.docs-icon {
  background-image: url(/~/media/skipton-co-uk/images/icons/CTA/CTA-100x100-pack.ashx);
}

.ucta-container.standard-cta .ucta-section.branch-icon {
  background-image: url(/~/media/skipton-co-uk/images/icons/CTA/CTA-100x100-12-branch.ashx);
}

.ucta-container.standard-cta .ucta-section.callback-icon {
  background-image: url(/~/media/skipton-co-uk/images/icons/CTA/CTA-100x100-callback.ashx);
}

.ucta-container.standard-cta .ucta-section.phone-icon {
  background-image: url(/~/media/skipton-co-uk/images/icons/CTA/CTA-100x100-08-phone.ashx);
}

.ucta-container.standard-cta .ucta-section.email-signup-icon {
  background-image: url(/~/media/skipton-co-uk/images/icons/CTA/CTA-100x100-emailsignup.ashx);
}

.ucta-container.standard-cta .ucta-section.post-icon {
  background-image: url(/~/media/skipton-co-uk/images/icons/CTA/CTA-100x100-post.ashx);
}

.ucta-container.standard-cta .ucta-section.view-products-icon {
  background-image: url(/~/media/skipton-co-uk/images/icons/CTA/CTA-100x100-products.ashx);
}

.ucta-container.standard-cta .ucta-section.webchat-icon {
  background-image: url(/~/media/skipton-co-uk/images/icons/CTA/CTA-100x100-webchat.ashx);
}

.ucta-container.standard-cta .ucta-section.mpf-icon {
  background-image: url(/~/media/skipton-co-uk/images/icons/CTA/CTA-100x100-mpf.ashx);
}

.ucta-container.standard-cta .ucta-section.fax-icon {
  background-image: url(/~/media/skipton-co-uk/images/icons/CTA/CTA-100x100-fax.ashx);
}

/*------------------------------------------------ UNIFORM CALL TO ACTION - BUTTON PANEL --------------------------------------*/
.ucta-container.standard-cta .buttons a.btn {
  margin: 0px 5px 10px 5px;
  vertical-align: top;
}

/*------------------------------------------------ UNIFORM CALL TO ACTION - BRANCH PANEL --------------------------------------*/
.ucta-container.standard-cta .ucta-section.branch .input-append .btn {
  margin-bottom: 0px;
}

/*------------------------------------------------ UNIFORM CALL TO ACTION - PHONE PANEL --------------------------------------*/
.ucta-container.standard-cta .number a {
  font-size: 25px;
  line-height: 1.25;
}

/* Opening Times */
.ucta-container.standard-cta .dl-horizontal.opening-times {
  margin-bottom: 0px;
  margin-top: 1.3em;
}

.ucta-container.standard-cta .dl-horizontal.opening-times dd {
  text-align: left;
  display: inline-block;
  margin-left: 0px;
  width: 55%;
  vertical-align: middle;
  padding: 1px 5px;
  box-sizing: border-box;
  float: none;
}

.ucta-container.standard-cta .dl-horizontal.opening-times dt {
  font-weight: normal;
  text-align: right;
  width: 45%;
  display: inline-block;
  float: none;
  vertical-align: middle;
  padding: 1px 5px;
  box-sizing: border-box;
}

/* Hide opening times with no-times class */
.ucta-container.standard-cta .no-times .dl-horizontal.opening-times {
  display: none;
}

/*------------------------------------------------ UNIFORM CALL TO ACTION - GENERAL RESPONSIVE STYLES --------------------------------------*/
@media (max-width: 979px) {
  .span4 .ucta-section.branch .input-append input {
    width: 150px;
    float: none;
  }

  .span4 .ucta-placeholder .ucta-section.branch .input-append input.btn {
    min-width: 40px;
    width: auto;
  }
}

@media (max-width: 767px) {
  .span12 .ucta-container.standard-cta {
    margin-right: -20px;
    margin-left: -20px;
    padding: 20px;
  }

  .ucta-container.standard-cta .ucta-section {
    padding-top: 10px;
    padding-left: 90px;
    background-size: 70px 70px;
    background-position: top left;
    background-repeat: no-repeat;
  }

  .ucta-container.standard-cta .ucta-section h3 {
    margin-top: 0px;
  }

  .ucta-container.standard-cta .ucta-placeholder {
    max-width: 400px;
    margin: auto;
    text-align: left;
  }

  .ucta-container.standard-cta .buttons a.btn {
    margin-left: 0px;
  }

  .ucta-container.standard-cta .buttons a.btn:last-child {
    margin-bottom: 0px;
  }

  .ucta-container.standard-cta .buttons,
  .ucta-container.standard-cta .branchlocator,
  .ucta-container.standard-cta .number {
    margin-bottom: 0px;
  }

  .ucta-section {
    margin-bottom: 40px;
  }

  .ucta-placeholder > div > div:last-child > .ucta-section {
    margin-bottom: 0px;
  }

  .ucta-container.standard-cta .buttons a.btn {
    margin: 0px 5px 5px 0px;
  }

  .ucta-placeholder .ucta-section.branch .input-append input[type="text"] {
    width: 100px;
  }

  .ucta-placeholder .ucta-section.branch .input-append input.btn {
    min-width: 40px;
    width: auto;
  }

  .ucta-container.standard-cta .dl-horizontal.opening-times dt {
    text-align: left;
  }
}

/*------------------------------------------------ UNIFORM CALL TO ACTION - 2 COLUMN ADJUSTMENTS --------------------------------------*/
@media (min-width: 980px) {

  .ucta-container.standard-cta .span6:first-child > .ucta-section,
  .ucta-container.standard-cta .span6:first-child > .rich-section {
    margin-left: 20%;
  }

  .ucta-container.standard-cta .span6:last-child > .ucta-section,
  .ucta-container.standard-cta .span6:last-child > .rich-text {
    margin-right: 20%;
  }
}

/*------------------------------------------------ UNIFORM CALL TO ACTION - 1 COLUMN ADJUSTMENTS --------------------------------------*/
@media (min-width: 768px) {
  .span12 > .ucta-container.standard-cta .span12 > .ucta-section {
    width: 70%;
    margin-left: 15%;
  }

  .ucta-container.standard-cta .span12 > .ucta-section.button .buttons a.btn:first-child {
    margin-left: 0px;
  }
}

/*------------------------------------------------ UNIFORM CALL TO ACTION - OFFLINE PRODUCT ADJUSTMENTS --------------------------------------*/
.ucta-container.standard-cta.offline-savings .rich-text h2#title,
.ucta-container.standard-cta.offline-savings .rich-text h3#subTitle {
  display: none;
}

.ucta-container.standard-cta.offline-savings .ucta-section.phone {
  margin-bottom: 10px;
}

@media (max-width: 767px) {
  .ucta-container.standard-cta.offline-savings .ucta-section ~ .rich-text {
    padding-left: 90px;
    margin-bottom: 40px;
  }
}

/*------------------------------------------------ Edits made by MM - mobile first classes --------------------------------------*/
.mobile-first .nav-tabs > li {
  margin-bottom: -1px;
  width: 50%;
  text-align: center;
}

.summary-table tr td ul li a {
  display: inline-block;
}

/*------------------------------------------------ Roundel List --------------------------------------*/
body {
  counter-reset: item;
}

/*-- numbered roundel list --*/
ol.number-list {
  list-style: none;
  margin-left: 40px;
  margin-bottom: 20px;
}

ol.number-list > li {
  counter-increment: item;
  margin-bottom: 20px;
}

ol.number-list > li:before {
  margin-right: 10px;
  margin-left: -40px;
  content: counter(item);
  background: var(--online-blue);
  border-radius: 100%;
  color: var(--white);
  font-size: 16px;
  width: 30px;
  height: 28px;
  line-height: 1.7;
  padding-top: 2px;
  display: inline-flex;
  position: absolute;
  margin-top: -3px;
  justify-content: center;
  font-weight: 500;
}

ol.number-list > li > ul {
  list-style: disc;
  margin-top: 20px;
}

ol.number-list > li > ol {
  margin-top: 20px;
}

/*-- bulleted roundel list --*/
ul.bullet-list {
  list-style: none;
  margin-left: 40px;
  margin-bottom: 20px;
}

ul.bullet-list > li {
  margin-bottom: 20px;
}

ul.bullet-list > li:before {
  background-color: var(--online-blue);
  background-image: url(/-/media/skipton-co-uk/CSS/img/skipton-icon-xs.svg);
  background-position: 7px 10px;
  background-repeat: no-repeat;
  background-size: 16px 11px;
  border-radius: 100%;
  content: "";
  height: 30px;
  position: absolute;
  margin-right: 10px;
  margin-left: -40px;
  margin-top: -3px;
  width: 30px;
}

ul.bullet-list > li > ul {
  list-style: disc;
  margin-top: 20px;
}

ul.bullet-list > li > ol {
  margin-top: 20px;
}

/*-------------- fix for link cluster with class affordabilit-calculator ---------------*/
.link-cluster-icon.affordability-calculator {
  background-color: transparent;
}

/*-------------- Promo Panel CSS ---------------*/
.promo-panel .content :last-child {
  margin-bottom: 0;
}

.promo-panel * {
  box-sizing: border-box;
}

.promo-panel {
  background: var(--grey-light);
  margin-bottom: 2rem;
  display: flex;
  box-shadow: 0px 10px 10px -10px var(--black-tint-25);
}

.promo-panel.white {
  background: var(--white);
  box-shadow: none;
}

.promo-panel.warm-grey,
.promo-panel.warm-grey h2,
.promo-panel.warm-grey h3,
.promo-panel.warm-grey p {
  color: var(--grey-font);
}

.promo-panel.primary-button .btn.btn-large.silver {
  background: var(--online-blue) !important;
  color: var(--white) !important;
  border-color: var(--online-blue) !important;
}

.row-reverse {
  flex-direction: row-reverse;
}

.promo-panel div {
  align-items: stretch;
}

.promo-panel.two-thirds-text .content,
.promo-panel.two-thirds-image .cta-image {
  width: 65%;
  min-width: 65%;
}

.promo-panel.two-thirds-text .cta-image,
.promo-panel.two-thirds-image .content {
  width: 35%;
  min-width: 35%;
}

.promo-panel.half-and-half .content,
.promo-panel.half-and-half .cta-image {
  width: 50%;
  min-width: 50%;
}

.promo-panel .cta-image img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  object-position: top left;
  border-right: 8px solid var(--online-cyan);
}

.promo-panel.row-reverse .cta-image img {
  border-right: none;
  border-left: 8px solid var(--online-cyan);
}

@media (max-width: 767px) {
  .promo-panel .cta-image img {
    border-bottom: 8px solid var(--online-cyan);
    border-right: none;
    border-left: none;
  }
}

.promo-panel.white .cta-image img {
  border: none;
}

.promo-panel.image-right .cta-image img {
  object-position: top right;
}

.promo-panel.image-center .cta-image img {
  object-position: top center;
}

.promo-panel.no-margin {
  margin-bottom: 0px;
}

.promo-panel.no-side-padding .content,
.promo-panel.icon.no-side-padding .content {
  padding-right: 0;
}

.promo-panel.icon.no-side-padding img {
  padding-left: 0;
}

.promo-panel.row-reverse.no-side-padding .content,
.promo-panel.icon.no-side-padding .content {
  padding-left: 0;
  padding-right: 40px;
}

.promo-panel.row-reverse.icon.no-side-padding .cta-image img {
  padding-right: 0;
  padding-left: 40px;
}

@media only screen and (max-width: 767px) {

  .promo-panel.no-side-padding .content,
  .promo-panel.icon.no-side-padding .content,
  .promo-panel.no-side-padding .cta-image img,
  .promo-panel.icon.no-side-padding img,
  .promo-panel.row-reverse.no-side-padding .content,
  .promo-panel.icon.no-side-padding .content,
  .promo-panel.row-reverse.no-side-padding .cta-image img,
  .promo-panel.row-reverse.icon.no-side-padding .cta-image img {
    padding-left: 0;
    padding-right: 0;
  }

  .promo-panel.no-side-padding .cta-image img,
  .promo-panel.icon.no-side-padding img,
  .promo-panel.row-reverse.no-side-padding .cta-image img,
  .promo-panel.row-reverse.icon.no-side-padding .cta-image img {
    padding-bottom: 0;
  }
}

.promo-panel.margin-top {
  margin-top: 2rem;
}

/*being lazy and flipping with css*/
.promo-panel.flip-image .cta-image img {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

/*edge13&14*/
@supports (-ms-ime-align: auto) {
  .promo-panel .cta-image {
    overflow: hidden;
  }

  .promo-panel .cta-image img {
    width: auto;
    height: 100%;
    /*may need to adjust this on a case by case basis*/
    max-width: none;
  }

  .promo-panel.image-ie-fw .cta-image img {
    width: 100%;
    height: auto;
    /*may need to adjust this on a case by case basis*/
    max-width: none;
  }
}

.promo-panel .content {
  padding: 40px;
  justify-content: center;
  align-self: center;
}

.promo-panel h3,
.promo-panel h2 {
  padding-top: 0;
  margin-top: 0;
}

.promo-panel h3::after,
.promo-panel h2::after {
  content: "";
  width: 20%;
  height: 3px;
  background-color: var(--grey-dark);
  display: block;
  margin: 15px 0px 20px;
}

/* remove underline from ALPs */

.promo-panel.white h3::after,
.promo-panel.white h2::after {
  display: none;
}

.legal-info {
  font-size: 12px;
  margin-top: 20px;
}

@media only screen and (max-width: 767px) {

  .promo-panel.two-thirds-text .content,
  .promo-panel.two-thirds-text .cta-image,
  .promo-panel.two-thirds-image .cta-image,
  .promo-panel.two-thirds-image .content,
  .promo-panel.half-and-half .content,
  .promo-panel.half-and-half .cta-image {
    width: 100% !important;
    min-width: 100%;
  }

  .promo-panel,
  .promo-panel div {
    display: block;
    width: 100%;
  }

  .promo-panel .cta-image img {
    height: auto !important;
    width: 100%;
    max-width: 100%;
  }
}

@media only screen and (min-width: 767px) {
  .promo-panel .content {
    padding: 60px 40px;
  }
}

/* Blue / Purple Promo Panels */

.promo-panel.blue {
  background-color: var(--online-blue);
}

.promo-panel.purple {
  background-color: var(--primary-purple);
}

.promo-panel.blue h2,
.promo-panel.blue h3,
.promo-panel.blue p,
.promo-panel.purple h2,
.promo-panel.purple h3,
.promo-panel.purple p {
  color: var(--white);
}

.promo-panel.blue a.btn.silver,
.promo-panel.purple a.btn.silver {
  border-color: var(--white);
  color: var(--white);
}

.promo-panel.purple a.btn.silver:hover,
.promo-panel.purple a.btn.silver:focus {
  outline-color: var(--online-cyan);
}

/*-------------- Central Column CSS ---------------*/
.central-wrapper {
  float: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/*-------------- Flexbox display ---------------*/
.css-flexbox-alternate-rows * {
  box-sizing: border-box;
}

.css-flexbox-alternate-rows .row-fluid {
  display: flex;
  flex-direction: row;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  width: 100%;
  padding: 20px 0;
}

.css-flexbox-alternate-rows .row-fluid [class*="span"] {
  padding: 0 20px;
  width: 100%;
}

.css-flexbox-alternate-rows .row-fluid [class*="span"] img {
  display: block;
  margin: 0px auto;
}

@media only screen and (min-width: 767px) {
  .css-flexbox-alternate-rows .row-fluid:nth-child(even) {
    flex-direction: row-reverse;
  }

  .css-flexbox-alternate-rows .row-fluid .span9 {
    width: 75%;
  }

  .css-flexbox-alternate-rows .row-fluid .span3 {
    width: 25%;
  }

  .css-flexbox-alternate-rows .row-fluid [class*="span"] {
    float: none;
  }
}

@media only screen and (max-width: 766px) {
  .css-flexbox-alternate-rows .row-fluid {
    flex-direction: column;
  }
}

/*-------------- Featured Product Table ---------------*/
.promo-products.white-with-bg {
  padding: 20px;
  background: var(--grey-very-light);
  margin-bottom: 40px;
}

.promo-products.white-with-bg .product-table tbody tr,
.promo-products.white .product-table tbody tr {
  background: var(--white);
}

.center-pull-out .product-table tbody tr:nth-child(2) {
  transform: scale(1.1, 1.1);
  box-shadow: 0px 0px 5px 0px var(--black-tint-25);
}

.promo-products h2 {
  text-align: center;
}

.promo-products .product-table thead {
  display: none;
}

.promo-products .product-table,
.promo-products .product-table tbody,
.promo-products .product-table tbody tr,
.promo-products .product-table tbody tr td,
.promo-products .table.product-table td.rate-cell,
.promo-products .table.product-table th.rate-cell,
.promo-products .table.product-table tbody tr th,
.promo-products .table.product-table tbody tr th {
  width: 100% !important;
  display: block;
  box-sizing: border-box;
  background: transparent;
  text-align: center;
}

.promo-products.four-rates .product-table tbody tr:last-child {
  display: block !important;
}

.promo-products.two-rates .product-table tbody tr {
  display: none;
}

.promo-products.two-rates .product-table tbody tr:first-child,
.promo-products.two-rates .product-table tbody tr:nth-child(2) {
  display: block;
}

.promo-products .product-table tbody {
  display: flex;
}

.promo-products .product-table tbody tr th {
  font-size: 1.5rem;
  line-height: 1.2em;
}

.promo-products .product-table tbody tr {
  margin: 20px;
  background: var(--grey-mid);
  padding: 10px;
}

.promo-products .product-table tbody td.rate-cell strong,
.promo-products .product-table tbody td.rate-cell b,
.promo-products .product-table tbody td.rate-cell span.rate {
  font-size: 3rem;
  display: block;
  margin-bottom: 20px;
  line-height: 0.75em;
  color: var(--primary-purple);
}

.promo-products .product-table tbody td.rate-cell b,
.promo-products .product-table tbody td.rate-cell .rate-inline span.rate {
  display: inline-block;
}

.promo-products .product-table tbody td.rate-cell .rate-inline span.rate {
  margin-bottom: 0;
}

.promo-products .product-table tbody td.rate-cell .rate-inline {
  margin-bottom: 20px;
}

.promo-products .product-table tbody td:nth-child(3) {
  padding-top: 0;
}

.promo-products .product-table tbody td:nth-child(3):before {
  content: "Save from";
  font-size: 1rem;
}

.promo-products .product-table tr td:last-child div {
  text-align: center;
}

.promo-products .product-table tr a.btn {
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 20px;
  padding-right: 35px;
}

.promo-products .table.product-table td.rate-cell br,
.promo-products .table.product-table th.rate-cell br {
  display: none !important;
}

.promo-products .table.product-table td.rate-cell span br,
.promo-products .table.product-table th.rate-cell span br {
  display: block !important;
}

@media only screen and (max-width: 768px) {
  .promo-products .product-table tbody tr th {
    font-size: 1.2rem;
  }

  .promo-products .mobile-products {
    display: none !important;
  }

  .promo-products .hidden-phone {
    display: block !important;
  }

  .promo-products.white-with-bg .product-table tbody {
    display: block;
  }

  .promo-products.white-with-bg .product-table tbody tr {
    width: 100% !important;
    margin: 10px 0;
    flex: 0 0 100%;
  }

  .center-pull-out .product-table tbody tr:nth-child(2) {
    order: -1;
    margin-bottom: 20px;
    transform: scale(1.05, 1.05);
  }

  .promo-products .product-table tbody td.rate-cell strong,
  .promo-products .product-table tbody td.rate-cell b {
    font-size: 2rem;
  }

  .promo-products .product-table tbody {
    flex-direction: column;
  }
}

.savings-section .promo-products table.table.product-table td {
  font-size: 14px;
}

@media only screen and (max-width: 400px) {
  .promo-products .product-table tbody td.rate-cell .rate-inline span.rate {
    display: block;
  }
}

/*Featured Product Table Header Banner*/
.hero-header-wrapper.colour-overlay .header-banner h2:after {
  display: none;
}

.hero-header-wrapper.colour-overlay .header-banner {
  background-size: cover;
}

.colour-overlay .content {
  margin-left: -50px;
}

.promo-products.big-overlay {
  margin-top: -180px;
  position: relative;
  z-index: 99;
  margin-left: 0px;
  padding: 20px;
  background: var(--grey-very-light);
  margin-bottom: 40px;
}

.promo-products.big-overlay table {
  margin-bottom: 0;
}

.promo-products.big-overlay .rich-text {
  margin-bottom: 0;
}

.promo-products.big-overlay h2 {
  margin-top: 0.5rem;
}

@media (max-width: 1300px) {
  .hero-header-wrapper.colour-overlay .header-banner {
    margin: 0px -20px;
    box-sizing: content-box;
    padding-left: 20px;
    padding-right: 20px;
  }

  .colour-overlay .content {
    margin-left: -20px;
  }
}

@media (max-width: 767px) {
  .promo-products.big-overlay {
    margin-top: 0;
  }

  .colour-overlay .content {
    margin-left: 0;
  }

  .hero-header-wrapper.colour-overlay .header-banner {
    margin: 0 -20px;
    width: auto;
    min-width: 100%;
    padding-top: 250px;
  }

  .hero-header-wrapper.colour-overlay,
  .hero-header-wrapper.colour-overlay .header-banner,
  .hero-header-wrapper.colour-overlay .header-banner .content-wrapper {
    display: block;
  }

  .hero-header-wrapper.colour-overlay {
    margin-bottom: -44px;
  }

  .hero-header-wrapper.colour-overlay .header-banner .content {
    box-sizing: content-box;
    margin-left: -20px;
  }
}

@media (max-width: 380px) {
  .hero-header-wrapper.colour-overlay .header-banner {
    padding-top: 140px;
  }
}

/* KNOWLEDGE CENTER ARTICLE PULLOUT STYLING - TEMPORARY */
.article-pullout {
  width: 350px;
  margin: 0px 30px 20px;
  position: relative;
  z-index: 1;
}

.article-pullout.offset-right {
  float: right;
  margin-right: -200px;
}

.article-pullout.offset-left {
  float: left;
  margin-left: -200px;
}

.article-pullout.offset-right:after,
.article-pullout.offset-left:after {
  display: table;
  clear: both;
  content: "";
}

@media (max-width: 1200px) {
  .article-pullout.offset-right {
    margin-right: -150px;
  }

  .article-pullout.offset-left {
    margin-left: -150px;
  }
}

@media (max-width: 979px) {
  .knowledge-centre-article .article-header {
    background-size: cover;
    background-position: 0px -240px;
    height: 150px;
  }

  .article-pullout,
  .article-pullout.offset-right,
  .article-pullout.offset-left {
    float: none;
    width: auto;
  }

  .article-pullout.offset-right,
  .article-pullout.offset-left {
    margin-right: 0px;
    margin-left: 0px;
  }
}

/* FA KNOWLEDGE CENTRE DIGITAL TWEAKS */
/* reset font weight */
.article-list-flex a.articleLink {
  font-weight: 400;
}

/* Change colour of category tab */
.knowledge-centre-article .article-header span.category,
.article-list-flex .article-pod a .article-thumbnail span.category {
  color: var(--grey-font);
  background-color: var(--grey-very-light);
}

.article-list-flex .article-pod a:hover .article-thumbnail span.category,
.article-list-flex .article-pod a:focus .article-thumbnail span.category {
  color: var(--white);
  background-color: var(--primary-purple);
}

@media (max-width: 979px) {

  .knowledge-centre-article .article-header span.category,
  .article-list-flex .article-pod a .article-thumbnail span.category {
    font-size: 0.8em;
    padding: 5px;
  }
}

/* resize first article thumb */
.article-index .article-list-flex .article-pod:first-child .article-thumbnail {
  width: 40%;
}

/* sort image/content sizing */
@media (max-width: 969px) {

  .article-index .article-list-flex .article-pod:first-child .article-thumbnail,
  .article-index .article-list-flex .article-pod:first-child .article-content,
  .article-list-flex .article-pod a .article-thumbnail {
    width: 100%;
    box-sizing: border-box;
  }
}

/* increase size of image on article page to improve crop */
.knowledge-centre-article .article-header {
  height: 250px;
}

@media (max-width: 979px) {
  .knowledge-centre-article .article-header {
    height: 150px;
    background-position: 0px;
  }
}

/* NEW QUOTE STYLING */
div.line-quote,
div.image-quote {
  padding: 20px 0px;
}

div.line-quote:before,
div.line-quote:after,
div.image-quote:after {
  content: "";
  width: 100px;
  background-color: var(--online-cyan);
  height: 4px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

div.line-quote:before {
  position: relative;
  top: -20px;
}

div.line-quote:after,
div.image-quote:after {
  position: relative;
  bottom: -20px;
}

div.line-quote blockquote,
div.image-quote blockquote {
  margin-left: 0px;
  padding-left: 0px;
  border-left: none;
  margin-bottom: 10px;
}

div.line-quote blockquote p,
div.image-quote blockquote p {
  font-weight: 400;
  color: var(--primary-purple);
  line-height: 1.5;
  font-size: 1.25em;
}

div.span4 div.line-quote.text-center blockquote p,
div.span3 div.line-quote.text-center blockquote p,
div.span3 div.image-quote.text-center blockquote p,
div.span4 div.image-quote.text-center blockquote p {
  text-align: left;
}

div.line-quote blockquote :first-child:before,
div.image-quote blockquote :first-child:before {
  content: "\201C";
  font-family: var(--heading-font);
  font-size: 2em;
  line-height: 1;
  display: inline-block;
  height: 0.5em;
  vertical-align: text-top;
  margin-right: 5px;
}

div.line-quote blockquote p:last-child:after,
div.image-quote blockquote p:last-child:after {
  content: "\201D";
  font-family: var(--heading-font);
  font-size: 2em;
  line-height: 1;
  display: inline-block;
  height: 0.5em;
  vertical-align: text-top;
  margin-left: 5px;
}

div.line-quote footer,
div.image-quote footer {
  text-align: center;
}

div.line-quote.has-photo footer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

div.line-quote.has-photo img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 20px;
}

div.image-quote > img {
  border-radius: 50%;
  margin-bottom: 20px;
  max-width: 150px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  border: 3px solid var(--grey-light);
}

div.image-quote-container {
  margin-top: 90px;
}

div.image-quote-container div.image-quote > img {
  margin-top: -110px;
}

@media (max-width: 969px) {

  div.line-quote blockquote p,
  div.image-quote blockquote p {
    font-size: 16px;
    text-align: left;
  }
}

/* Seminar - meet the host block */
.meet-the-host {
  border: 1px solid var(--grey-light);
  border-left: none;
  border-right: none;
  padding-top: 2rem;
  padding-bottom: 2rem;
  margin-bottom: 2rem;
}

.meet-the-host + .meet-the-host {
  border-top: none;
  padding-top: 0;
}

.no-border-bottom {
  border-bottom: 0;
  margin-bottom: 0;
}

.no-border-top {
  border-top: 0;
  margin-top: 0;
}

.meet-the-host h2,
.meet-the-host h3 {
  margin-top: 0;
}

.meet-the-host img {
  border-radius: 50%;
  max-width: 250px !important;
  border: 1px solid var(--grey-light);
  margin: 0px auto;
  display: block;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .meet-the-host img {
    max-width: 100% !important;
    margin-bottom: 0px;
  }
}

/* SOCIAL MEDIA LINKS */
ul.social {
  list-style-type: none;
  margin-left: 0px;
  padding-left: 0px;
}

ul.social li a {
  padding-left: 45px;
  background-position: left middle;
  background-repeat: no-repeat;
  line-height: 35px;
  display: block;
}

ul.social.inline > li {
  margin-bottom: 0px;
  padding-left: 0px;
  padding-right: 10px;
}

ul.social li.facebook a {
  background-image: url(/~/media/skipton-co-uk/images/icons/footer-facebook.ashx);
}

ul.social li.twitter a {
  background-image: url(/~/media/skipton-co-uk/images/icons/Twitter.ashx);
}

/* PRESS OFFICE SPECIFIC STYLING */
.news-article-summary-heading h2 {
  margin-top: 0px;
  font-size: 1.25rem;
  font-family: var(--body-font);
  margin-bottom: 1rem;
}

.news-article-summary-heading h2 a {
  color: var(--grey-font);
  text-decoration-line: underline;
  text-decoration-color: var(--online-cyan);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.news-article-summary-heading h2 a:hover,
.news-article-summary-heading h2 a:focus {
  color: var(--grey-font);
  text-decoration-line: underline;
  text-decoration-color: var(--grey-mid);
  text-decoration-thickness: 2px;
}

.news-article-summary-heading {
  border-bottom: 0px;
}

.news-article-summary-heading h6 {
  font-size: 0.8rem;
}

.news-article-sidebar ul.striped li:nth-child(even) {
  background-color: var(--grey-very-light);
}

.news-article-sidebar ul li a {
  color: var(--font-grey);
}

.news-article-sidebar ul li a:hover,
.news-article-sidebar ul li a:focus {
  color: var(--font-grey);
  text-decoration-line: underline;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 5px;
}

.news-article-heading h1 {
  font-size: 1.953rem;
  font-family: var(--body-font);
  text-align: left;
  margin-top: 2rem;
  font-weight: 300;
}

.news-article-summary-heading,
.news-article-heading {
  border-bottom: none;
  margin-bottom: 1rem;
}

/*Social Media Panel*/
.social-media-cta a.social-link {
  display: block;
  margin-top: 20px;
}

.social-media-cta a.social-link img {
  display: inline-block;
  width: auto;
  height: 32px;
  border: 2px solid transparent;
  background-size: auto 32px;
  margin-right: 10px;
}

/*Alerts*/
.alert {
  background-color: var(--white);
  background-position: 27px 40px;
  background-repeat: no-repeat;
  background-size: 36px;
  border: 3px solid transparent;
  border-radius: 0px;
  color: var(--grey-font);
  padding: 40px 40px 40px 90px;
}

.alert p.updated {
  margin-top: 1.5em;
}

.alert p.updated:before {
  content: "access_time";
  vertical-align: top;
  margin-right: 5px;
  font-size: 1.5em;
}

@media (max-width: 767px) {
  .alert {
    padding: 70px 20px 20px;
    background-position: 20px 20px;
  }
}

.alert > *:first-child {
  margin-top: 0px;
}

.alert > *:last-child {
  margin-bottom: 0px;
}

.alert p,
.alert li {
  max-width: 60em;
}

.alert.info {
  border-color: var(--online-blue);
  background-image: url("/~/media/skipton-co-uk/images/icons/alerts/info.png");
}

.alert.error {
  border-color: var(--error-red);
  background-image: url("/~/media/skipton-co-uk/images/icons/alerts/error.png");
}

.alert.warning {
  border-color: var(--warning-amber);
  background-image: url("/~/media/skipton-co-uk/images/icons/alerts/warning.png");
}

.alert.warning.closed {
  border-color: var(--warning-amber);
  background-image: url("/~/media/skipton-co-uk/images/icons/alerts/closed-icon.png");
  padding: 40px 40px 40px 120px;
  background-size: 70px;
  background-position: 25px 30px;
}

.alert.help {
  border-color: var(--primary-purple);
  background-image: url("/~/media/skipton-co-uk/images/icons/alerts/help.png");
}

.alert.success {
  border-color: var(--success-green);
  background-image: url("/~/media/skipton-co-uk/images/icons/alerts/success.png");
}

@media (max-width: 767px) {
  .alert {
    padding: 70px 20px 20px;
    background-position: 20px 20px;
  }

  .alert.warning.closed {
    padding: 80px 20px 20px;
    background-size: 50px;
    background-position: 20px 20px;
  }
}

/*Die without a will info block*/
ul.flowchart h3 {
  max-width: 30em;
}

ul.flowchart p,
ul.flowchart .h3 {
  color: var(--white);
}

ul.flowchart > li {
  margin-bottom: 40px;
}

ul.flowchart > li > ul {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  align-items: stretch;
}

ul.flowchart > li > ul > li {
  flex-basis: 25%;
  max-width: 25%;
  padding: 30px 20px;
  box-sizing: border-box;
  background-color: var(--online-blue);
  position: relative;
  margin-bottom: 0px;
}

ul.flowchart > li > ul > li *:last-child {
  margin-bottom: 0px;
}

ul.flowchart > li > ul > li:nth-child(odd) {
  flex-basis: 75%;
  max-width: 75%;
  background-color: var(--primary-purple);
}

ul.flowchart > li > ul > li:nth-child(even):after {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: transparent;
  border-top-color: var(--online-blue);
  border-width: 30px;
  margin-left: -30px;
  z-index: 2;
}

ul.flowchart > li:last-child > ul > li:nth-child(even):after {
  border: none !important;
  margin: 0 !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
}

strong.h3 {
  display: block;
  margin: 0 0 0.5em;
}

@media (max-width: 767px) {
  ul.flowchart > li > ul {
    display: block;
  }

  ul.flowchart > li > ul > li,
  ul.flowchart > li > ul > li:nth-child(odd) {
    max-width: 100%;
  }
}

/*fix to align important information panel to risk warning*/
.info-panel {
  border: 3px solid var(--grey-mid) !important;
  padding: 20px;
  margin-bottom: 20px;
}

/*Image alignment CSS Wrapper*/
.image-center .image img {
  margin: 0px auto 2rem auto;
}

.image-left .image img,
.image-right .image img {
  display: inline-block;
}

.image-left .image {
  text-align: left;
}

.image-right .image {
  text-align: right;
}

.image-right a {
  text-align: left;
}

@media (max-width: 767px) {

  .image-right .image,
  .image-left .image {
    margin: 0px auto 2rem auto;
  }
}

/*Author for Life & Money*/
aside.author {
  display: flex;
  justify-content: center;
  align-items: center;
}

aside.author > * {
  margin: 0 10px;
}

aside.author img {
  border-radius: 50%;
  width: 70px;
  height: 70px;
}

aside.author .author-details .name {
  font-weight: 500;
}

aside.author .author-details span {
  display: block;
}

/*Video with CSS for No Cookie Image and Alert*/
.video,
.video-cookie-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  padding-top: 25px;
  height: 0;
}

.video iframe,
.video-cookie-wrapper .no-cookie {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-cookie-wrapper {
  background: url(/~/media/skipton-co-uk/CSS/img/no-cookie-video-background.ashx) no-repeat;
  background-size: cover;
  background-position: bottom center;
  position: relative;
}

@media only screen and (max-width: 768px) {
  .video-cookie-wrapper {
    margin-bottom: 2rem;
  }
}

@media only screen and (max-width: 472px) {
  .video-cookie-wrapper {
    min-height: 195px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 979px) {
  .video-cookie-wrapper {
    min-height: 195px;
  }
}

.no-cookie {
  display: flex;
  z-index: 1000;
  justify-content: center;
  align-items: center;
}

.video-cookie-wrapper .alert {
  text-align: left;
  box-sizing: border-box;
  margin: 20px;
  background-color: var(--white-tint-95);
}

.video-cookie-wrapper .btn.btn-link {
  vertical-align: top;
}

/*Mobile logo fix - want to revisit */
.header a.logo {
  max-width: 230px;
}

@media (min-width: 500px) and (max-width: 767px) {
  .header a.logo {
    max-width: 230px;
  }
}

@media (max-width: 450px) {
  .header a.logo {
    max-width: 150px;
    padding-top: 5px;
  }
}

@media (max-width: 767px) {
  .header a.logo img.logo-large {
    padding-bottom: 10px;
  }

  .header .header-links {
    padding-left: 150px;
  }
}

/*Social Media Links Update*/
ul.share li {
  border: none;
  font-size: 0;
  line-height: 0;
}

ul.share li a,
ul.share li a:hover {
  color: var(--primary-purple);
  background-color: transparent;
  background-repeat: no-repeat;
  border: 2px solid transparent;
  border-radius: 0px;
  padding: 0;
  width: 32px;
  height: 32px;
}

ul.share li a.facebook-icon,
ul.share li a.facebook-icon:hover {
  background-image: url("/~/media/Images/Social/Social-Icons/facebook.ashx");
}

ul.share li a.twitter-icon,
ul.share li a.twitter-icon:hover {
  background-image: url("/~/media/Images/Social/Social-Icons/twitter.ashx");
}

ul.share li a.linkedin-icon,
ul.share li a.linkedin-icon:hover {
  background-image: url("/~/media/Images/Social/Social-Icons/linkedin.ashx");
}

ul.share li a.email-icon,
ul.share li a.email-icon:hover {
  background-image: url("/~/media/Images/Social/Social-Icons-SVG/SBS_email_40x40_White.ashx");
  background-color: var(--online-blue);
  border-color: var(--white);
}

ul.share li a:hover,
ul.share li a.email-icon:hover {
  border-color: var(--primary-purple);
}

/*In Copy Phone Numbers */
a.phone-no.medium {
  font-size: 1.563rem;
}

a.phone-no.large {
  font-size: 1.953rem;
}

a.phone-no.x-large {
  font-size: 2.441rem;
}

/*MPF Adjustments */
.no-margin-wrapper .rich-text {
  margin-bottom: 0;
}

.mpf-decision-tree {
  margin-top: 0;
}

/*Carousel fix for more charaters*/
@media (max-width: 580px) {
  .hp-banner .hero-header-wrapper .header-banner .content-wrapper {
    height: 215px;
  }
}

@media (max-width: 520px) {
  .hp-banner .hero-header-wrapper .header-banner .content-wrapper {
    height: 235px;
  }
}

@media (max-width: 460px) {
  .hp-banner .hero-header-wrapper .header-banner .content-wrapper {
    height: 230px;
  }
}

@media (max-width: 355px) {
  .hp-banner .hero-header-wrapper .header-banner .content-wrapper {
    height: 280px;
  }
}

@media (min-width: 1185px) {

  .hp-banner .hero-header-wrapper,
  .hp-banner .hero-header-wrapper .header-banner {
    height: 465px;
  }
}

/*Rate Variant Carousel*/
.rate-content p .rate {
  font-size: 2rem !important;
}

.rate-content a.btn {
  margin: 10px 0 0 0 !important;
}

@media (max-width: 980px) {

  .has-rate-slide .hp-banner .hero-header-wrapper,
  .hp-banner .hero-header-wrapper .header-banner,
  .has-rate-slide-single .hero-header-wrapper,
  .has-rate-slide-single .hero-header-wrapper .header-banner {
    height: 430px;
  }
}

@media (max-width: 767px) {

  .has-rate-slide .hp-banner .hero-header-wrapper .header-banner .content-wrapper,
  .has-rate-slide-single .hero-header-wrapper .header-banner .content-wrapper {
    min-height: 300px !important;
  }

  .has-rate-slide .hp-banner .hero-header-wrapper,
  .hp-banner .hero-header-wrapper .header-banner,
  .has-rate-slide-single .hero-header-wrapper,
  .has-rate-slide-single .hero-header-wrapper .header-banner {
    height: auto;
  }
}

@media (max-width: 470px) {

  .has-rate-slide .hp-banner .hero-header-wrapper .header-banner .content-wrapper,
  .has-rate-slide-single .hero-header-wrapper .header-banner .content-wrapper {
    min-height: 340px !important;
  }
}

@media (max-width: 370px) {

  .has-rate-slide .hp-banner .hero-header-wrapper .header-banner .content-wrapper,
  .has-rate-slide-single .hero-header-wrapper .header-banner .content-wrapper {
    min-height: 360px !important;
  }
}

/*Header banner fix*/
.hero-header-wrapper.image-top-adjust .header-banner {
  background-position: right -50px;
}

@media (max-width: 767px) {
  .hero-header-wrapper .header-banner {
    padding: 230px 0px 0px;
    background-size: 100%;
  }

  .hero-header-wrapper.image-top-adjust-tablet .header-banner {
    background-position: right -50px;
  }
}

@media (max-width: 640px) {
  .hero-header-wrapper .header-banner {
    background-size: 120%;
  }
}

@media (max-width: 500px) {
  .hero-header-wrapper .header-banner {
    padding: 200px 0px 0px;
    background-size: 120%;
  }
}

@media (max-width: 470px) {
  .hero-header-wrapper .header-banner {
    padding-top: 180px;
  }
}

@media (max-width: 400px) {
  .hero-header-wrapper .header-banner {
    padding-top: 150px;
  }
}

/*cross list fix*/
ul.cross li {
  background: url(/Components/Client/img/cross.png) no-repeat 0px 3px;
}

/*DL List*/
dl dt {
  font-family: var(--body-font);
  font-size: 1.563rem;
  font-weight: 500;
  line-height: 1.5;
  margin: 1.414em 0 0.5em;
}

dl dd {
  margin-left: 0;
  line-height: 1.5;
}

dl.dl-horizontal dt,
dl.opening-times dt,
dl.dl-horizontal dd {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}

/** Life and Money pagination **/
.pagination ul > li {
  display: inline-block;
  margin-bottom: 0px;
}

.pagination ul li a {
  background: transparent;
  color: var(--text-grey);
  font-size: 16px;
  font-weight: 500;
  text-decoration-line: underline;
  text-decoration-color: var(--online-cyan);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.pagination ul li a:hover,
.pagination ul li a:focus {
  background: transparent;
  color: var(--text-grey);
  text-decoration-line: underline;
  text-decoration-color: var(--grey-mid);
  text-decoration-thickness: 2px !important;
  text-underline-offset: 5px;
  opacity: 1;
}

.pagination ul > .disabled > a,
.pagination ul > .disabled > a:hover,
.pagination ul > .disabled > a:focus {
  color: var(--grey-font);
  text-decoration: none !important;
  opacity: 0.5;
  cursor: not-allowed;
}

#HelpTextModal.hide.fade {
  margin-top: -50px;
}

#HelpTextModal.hide.fade.in {
  margin-top: 0px;
}

/* GRID LIST -----------------------------------------------------------------

Variants:

- Image size:
  - small [50px x 50px] (default, no additional classes required)
  - medium [80px x 80px] (use class="med-image")
  - large [120px x 120px] (use class="large-image")
- Number of columns (at desktop):
  - 3 across (default, no additional classes required)
  - 2 across (use class="two-across")
- Misc:
  - Without paragraph text (use class="no-para")
  - Centered grid (use class="items-center")

Variant classes should be applied to the "grid-list-group" div.
*/

.grid-list-group {
  margin-bottom: 2rem;
}

.grid-list-group .grid-list {
  align-items: flex-start;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  margin-bottom: 0;
  margin-left: 0;
}

.grid-list-group .grid-list * {
  box-sizing: border-box;
  text-align: left;
}

.grid-list-group .grid-list .grid-list-item {
  align-items: flex-start;
  box-sizing: border-box;
  display: flex;
  flex-basis: auto;
  gap: 20px;
  margin-bottom: 0;
  padding: 1em;
}

.grid-list-group .grid-list .grid-list-item .content {
  padding-right: 20px;
  width: 80%;
}

.grid-list-group .grid-list .grid-list-item .content h1,
.grid-list-group .grid-list .grid-list-item .content h2,
.grid-list-group .grid-list .grid-list-item .content h3,
.grid-list-group .grid-list .grid-list-item .content h4,
.grid-list-group .grid-list .grid-list-item .content h5,
.grid-list-group .grid-list .grid-list-item .content h6 {
  margin-top: 0;
}

.grid-list-group:not(.med-image):not(.large-image) .grid-list .grid-list-item img {
  height: 50px;
  width: 50px;
}

.grid-list-group.med-image .grid-list .grid-list-item img {
  height: 80px;
  width: 80px;
}

.grid-list-group.large-image .grid-list .grid-list-item img {
  height: 120px;
  width: 120px;
}

.grid-list-group:not(.two-across) .grid-list .grid-list-item {
  width: 33%;
}

@media (max-width: 979px) {
  .grid-list-group:not(.two-across) .grid-list .grid-list-item {
    width: 50%;
  }
}

@media (max-width: 767px) {
  .grid-list-group:not(.two-across) .grid-list .grid-list-item {
    width: 100%;
  }
}

@media (max-width: 1199px) {
  .grid-list-group:not(.two-across).med-image .grid-list .grid-list-item {
    width: 50%;
  }
}

@media (max-width: 767px) {
  .grid-list-group:not(.two-across).med-image .grid-list .grid-list-item {
    width: 100%;
  }
}

@media (max-width: 1199px) {
  .grid-list-group:not(.two-across).large-image .grid-list .grid-list-item {
    width: 50%;
  }
}

@media (max-width: 979px) {
  .grid-list-group:not(.two-across).large-image .grid-list .grid-list-item {
    width: 100%;
  }
}

.grid-list-group.two-across .grid-list .grid-list-item {
  width: 50%;
}

@media (max-width: 767px) {
  .grid-list-group.two-across .grid-list .grid-list-item {
    width: 100%;
  }
}

@media (max-width: 979px) {
  .grid-list-group.two-across.large-image .grid-list .grid-list-item {
    width: 100%;
  }
}

.grid-list-group.no-para .grid-list .grid-list-item {
  align-items: center;
}

.grid-list-group.no-para .grid-list .grid-list-item .content h1,
.grid-list-group.no-para .grid-list .grid-list-item .content h2,
.grid-list-group.no-para .grid-list .grid-list-item .content h3,
.grid-list-group.no-para .grid-list .grid-list-item .content h4,
.grid-list-group.no-para .grid-list .grid-list-item .content h5,
.grid-list-group.no-para .grid-list .grid-list-item .content h6 {
  margin-bottom: 0;
  padding-bottom: 0;
}

.grid-list-group.items-center .grid-list {
  justify-content: center;
}

/* END GRID LISTS ----------------------------------------------------------- */

/*article filter*/
.article-filter .span6 {
  width: 100%;
  text-align: center;
  border-top: 2px solid var(--grey-mid);
  border-bottom: 2px solid var(--grey-mid);
  padding-bottom: 2rem;
}

.article-filter .btn-group .btn.btn-toggle {
  padding: 8px 19px !important;
  font-size: 16px !important;
  font-weight: 500;
  margin: 5px;
}

@media screen and (max-width: 769px) {
  .article-filter .span6 {
    text-align: left;
  }
}

/*Trust Pilot*/
.tp-footer {
  margin-bottom: 2rem;
}

.tp-score {
  text-align: right;
  font-weight: 500;
  font-size: 14px;
  padding-top: 10px;
}

.tp-horizontal .tp-score {
  text-align: center;
  padding-top: 10px;
}

.tp-quote .tp-score {
  text-align: left;
}

.tp-widget.tp-carousel .trustpilot-widget {
  padding: 18px 0 2rem;
}

@media screen and (max-width: 605px) {

  .tp-score,
  .tp-quote .tp-score {
    text-align: center;
  }
}

/*Add a wrapper to add space to the bottom of a group*/
.wrapper-margin-bottom {
  margin-bottom: 2rem;
}

@media (max-width: 767px) {
  .wrapper-margin-bottom-mobile {
    margin-bottom: 2rem;
  }
}

@media (min-width: 768px) and (max-width: 979px) {
  .wrapper-margin-bottom-tablet {
    margin-bottom: 2rem;
  }
}

@media (min-width: 980px) {
  .wrapper-margin-bottom-desktop {
    margin-bottom: 2rem;
  }
}

/*Promo Panel Icon Variant*/
.promo-panel.icon .cta-image {
  display: flex;
  align-items: center;
  width: 200px;
  min-width: 200px;
  flex: 0 1 auto;
}

.promo-panel.icon .cta-image img {
  object-fit: contain;
  object-position: center;
  width: auto;
  height: auto;
  max-height: 200px;
  padding: 40px 0 40px 40px;
  margin: 0px auto;
  border: none;
}

.promo-panel.icon.row-reverse .cta-image img {
  padding: 40px 40px 40px 0;
}

.promo-panel.icon.small .cta-image img {
  max-width: 100px;
}

.promo-panel.icon.large .cta-image img {
  max-width: 300px;
  max-height: 300px;
}

.promo-panel.image-contain .cta-image img {
  object-fit: contain;
  object-position: center;
  margin: 0px auto;
}

@media only screen and (max-width: 767px) {

  .promo-panel.icon .cta-image img,
  .promo-panel.icon.large .cta-image img {
    max-width: 100%;
    max-height: 150px;
    padding: 40px 40px 0 40px;
  }

  .promo-panel.icon .cta-image {
    display: flex;
    align-items: center;
    width: 100%;
    width: 100%;
    flex: 0 1 auto;
  }
}

/*edge13&14*/
@supports (-ms-ime-align: auto) {
  .promo-panel.image-contain .cta-image img {
    object-fit: none;
    width: auto;
    height: auto;
    display: block;
    max-width: 100%;
  }
}

/*PromoPanel as Flex Container*/
.promo-panel.flex-container .content a:last-child {
  margin-bottom: 5px;
}

@media (min-width: 768px) {
  .promo-panel.flex-container {
    display: flex;
    align-items: center;
  }

  .promo-panel.flex-container > div {
    height: auto;
    width: auto;
  }

  .promo-panel.flex-container .cta-image {
    max-width: 200px;
  }
}

@media (max-width: 767px) {
  .promo-panel.flex-container {
    display: block;
  }

  .promo-panel.flex-container > div {
    min-width: auto !important;
  }

  .promo-panel.flex-container > div img {
    max-width: 100%;
  }

  .promo-panel.flex-container.mobile-image-right .cta-image {
    max-width: 120px;
    display: block;
    float: right;
    height: 180px;
    margin-top: 30px;
    margin-left: 10px;
    margin-bottom: 10px;
  }

  .promo-panel.flex-container.mobile-image-right .cta-image img {
    margin: 0px auto;
    display: block;
    height: 180px !important;
  }
}

/* BILLBOARD PROMO PANEL */

/*
- Inherits styles from .promo-panel (both in this file and the bundled css).
- Shares part of class name with .billboard.condolence (in this file only).
- Variants: .icon, .photo (must use one or the other)
- Photo variant has .rounded-corner option to apply a rounded bottom right corner to the photo
*/

.promo-panel.billboard {
  background-color: var(--online-cyan);
  box-sizing: border-box;
  padding: 0;
}

.promo-panel.billboard div {
  flex: revert;
}

.promo-panel.billboard .cta-image {
  width: 40% !important;
}

.promo-panel.billboard.icon .cta-image {
  padding: 0 0 0 50px;
}

.promo-panel.billboard .cta-image img {
  border: 0;
  padding: 0 !important;
}

.promo-panel.billboard.icon .cta-image img {
  height: 240px;
  width: 240px;
}

.promo-panel.billboard.photo.rounded-corner .cta-image img {
  border-bottom-right-radius: 150px;
}

.promo-panel.billboard .content {
  padding: 130px 80px;
  width: 60% !important;
}

.promo-panel.billboard .content h1,
.promo-panel.billboard .content h2,
.promo-panel.billboard .content h3 {
  color: var(--white);
  font-size: 3.5rem;
}

.promo-panel.billboard .content h1:after,
.promo-panel.billboard .content h2:after,
.promo-panel.billboard .content h3:after {
  display: none;
}

.promo-panel.billboard .content p {
  color: var(--white);
  font-size: 1.5rem;
}

.promo-panel.billboard .content .btn {
  background-color: var(--white);
  border-color: var(--white);
  color: var(--grey-font);
}

@media (max-width: 1199px) {
  .promo-panel.billboard .content {
    padding: 80px;
  }
}

@media (max-width: 979px) {
  .promo-panel.billboard.icon .cta-image img {
    height: 160px;
    max-height: 160px;
    max-width: 160px;
    width: 160px;
  }

  .promo-panel.billboard.photo.rounded-corner .cta-image img {
    border-bottom-right-radius: 75px;
  }

  .promo-panel.billboard .content {
    padding: 40px;
  }

  .promo-panel.billboard .content h1,
  .promo-panel.billboard .content h2,
  .promo-panel.billboard .content h3 {
    font-size: 2.75rem;
  }
}

@media (max-width: 767px) {
  .promo-panel.billboard .cta-image {
    width: 100% !important;
  }

  .promo-panel.billboard.icon .cta-image {
    padding: 60px 20px 0 20px;
  }

  .promo-panel.billboard .content {
    width: 100% !important;
  }
}

@media (max-width: 430px) {

  .promo-panel.billboard .content h1,
  .promo-panel.billboard .content h2,
  .promo-panel.billboard .content h3 {
    font-size: 1.9rem;
  }

  .promo-panel.billboard .content p {
    font-size: 1.2rem;
  }
}

/*Life and Money Well CTA*/
.fa-cta a.no {
  display: block;
  font-size: 1.25em;
  line-height: 1.5;
  font-weight: 500;
  margin-top: 5px;
  text-decoration-line: underline;
  text-decoration-color: var(--online-cyan);
  text-decoration-thickness: 2px;
  font-weight: 500;
  text-underline-offset: 5px;
}

.fa-cta a.no:hover,
.fa-cta a.no:focus {
  text-decoration-line: underline;
  text-decoration-color: var(--grey-mid);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.fa-cta a.btn {
  margin-top: 10px;
}

/*add in selected indicator of pagination*/
a[id*="BlogPageLink"] {
  font-weight: 400;
  padding: 10px;
}

a[id*="BlogPageLink"] b {
  font-weight: 500;
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

/*New General Information Panel*/
.general-info-panel.margin-top,
.alert.margin-top {
  margin-top: 2rem;
}

.general-info-panel {
  background-color: var(--grey-light);
  padding: 40px 40px 40px 90px;
  border-radius: 0px;
  border: none !important;
  background-repeat: no-repeat;
  background-position: 27px 40px;
  background-size: 36px 36px;
  color: var(--grey-font);
  background-image: url("/~/media/skipton-co-uk/images/icons/info-panels/info_blue.ashx");
}

.general-info-panel p.updated {
  margin-top: 1.5em;
}

.general-info-panel p.updated:before {
  content: "access_time";
  vertical-align: top;
  margin-right: 5px;
  font-size: 1.5em;
}

.general-info-panel.top-tip {
  background-image: url("/~/media/skipton-co-uk/images/icons/info-panels/tips_and_updates_blue.ashx");
}

.general-info-panel.help-info {
  background-image: url("/~/media/skipton-co-uk/images/icons/info-panels/help_center_blue.ashx");
}

.general-info-panel.product-info {
  background-image: url("/~/media/skipton-co-uk/images/icons/info-panels/savings_blue.ashx");
}

.general-info-panel.product-info.mortgage {
  background-image: url("/~/media/skipton-co-uk/images/icons/info-panels/mortgages_blue.ashx");
}

.general-info-panel.product-info.boe {
  background-image: url("/~/media/skipton-co-uk/images/icons/info-panels/boe_blue.ashx");
}

.general-info-panel.festive {
  background-image: url("/~/media/skipton-co-uk/images/icons/info-panels/festive_blue.ashx");
}

@media (max-width: 767px) {
  .general-info-panel {
    padding: 70px 20px 20px;
    background-position: 20px 20px;
  }
}

.general-info-panel > *:first-child {
  margin-top: 0px;
}

.general-info-panel > *:last-child {
  margin-bottom: 0px;
}

.general-info-panel p,
.general-info-panel li {
  max-width: 60em;
}

@media (max-width: 767px) {
  .general-info-panel {
    padding: 70px 20px 20px;
    background-position: 20px 20px;
  }
}

.general-info-panel.hidden-heading {
  background-position-y: 32px;
  padding-bottom: 34px;
}

@media (max-width: 767px) {
  .general-info-panel.hidden-heading {
    background-position-y: 20px;
  }
}

/*Bold <th> on Product Table*/
.table.summary-table.smr tr th {
  font-weight: 500;
}

h2.summaryBoxHeader {
  font-weight: 400;
}

/*Show addtional set by defualt to display: none;
    info in Featured Product table*/
.product-table .rate-cell .additional-info {
  display: none;
}

.promo-products .product-table .rate-cell .additional-info {
  display: inline-block !important;
}

.summary-table.smr p {
  font-size: 1em;
}

/*Additional of interim flag for a single product table*/
.has-flag-table .hidden-phone {
  position: relative;
}

.has-flag-table .product-table tbody td,
.has-flag-table .product-table tbody th {
  padding-top: 50px;
}

.has-flag-table .mobile-products .accordion-heading a {
  position: relative;
  padding-top: 50px;
}

.has-flag-table .product-table tbody tr:after,
.has-flag-table .mobile-products .accordion-heading a:after {
  padding: 5px;
  background: var(--grey-dark);
  color: var(--white);
  font-weight: 500;
  position: absolute;
  top: 0;
  left: 10px;
  border-radius: 4px;
  font-family: var(--body-font);
  font-size: 16px;
  max-width: 160px;
}

.has-flag-table.loyalty .product-table tbody tr:after,
.has-flag-table.loyalty .mobile-products .accordion-heading a:after {
  content: "Member exclusive";
}

.has-flag-table .product-table tbody tr:after {
  top: 61px;
}

/*Savings table fix*/
.rate-cell .rate,
.rate-wrapper .rate {
  font-size: 25px;
  line-height: 25px;
  display: block;
  font-weight: 500;
}

.rate-wrapper .rate-inline,
.rate-cell .rate-inline {
  display: block;
}

.rate-cell .rate-inline .rate,
.rate-wrapper .rate-inline .rate {
  display: inline-block;
}

/*hotjar-fix*/
._hj_feedback_container i,
._hj-widget-container i {
  text-indent: 0 !important;
}

/*Link CLuster Classes*/
@media (min-width: 767px) {

  ul.four-columns,
  ul.three-columns,
  ul.two-columns,
  .four-across ul.link-cluster,
  .three-across ul.link-cluster,
  .two-across ul.link-cluster {
    column-gap: 10px;
  }

  ul.four-columns,
  .four-across ul.link-cluster {
    column-count: 4;
  }

  ul.three-columns,
  .three-across ul.link-cluster {
    column-count: 3;
  }

  ul.two-columns,
  .two-across ul.link-cluster {
    column-count: 2;
  }

  .two-across ul.link-cluster li,
  .three-across ul.link-cluster li,
  .four-across ul.link-cluster li {
    padding-bottom: 0;
    margin-bottom: 10px;
  }
}

/*Savings table fixes*/
.product-table .product-panel.has-flag .status-flag {
  z-index: 9;
}

.product-table .product-panel.has-flag.flag-purple .status-flag {
  border-color: var(--primary-purple);
}

/*Fix for asterisk on well*/
.addressListError,
.requiredAsterisk,
.required:after {
  color: var(--error-red) !important;
}

/*Image award class*/
img.award-logo {
  margin: 20px 20px 0px;
}

/*Modal Fix*/
#maincontent .modal {
  width: 550px !important;
  height: 550px !important;
}

#maincontent .modal .modal-body {
  width: 500px !important;
  max-height: 440px !important;
  height: 440px !important;
}

#maincontent .modal .modal-header {
  text-align: right;
}

#maincontent .modal .close {
  opacity: 1;
  font-size: 30px;
  line-height: 30px;
  float: none !important;
  color: var(--primary-purple);
}

#maincontent .modal .close:hover {
  opacity: 0.8;
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

@media only screen and (max-width: 768px) {
  #maincontent .modal {
    width: 90% !important;
    margin: 0px auto;
    height: 600px !important;
  }

  #maincontent .modal .modal-body {
    width: 89% !important;
    max-height: 100% !important;
    height: 500px !important;
  }
}

/*Numbered Pods CSS*/
.number.process {
  position: relative;
}

.number.process .process-content {
  padding: 15px;
  text-align: left;
  margin-bottom: 20px;
}

.number.process .process-content h3 {
  text-align: center;
}

.number.process .round-number {
  font: 36px var(--body-font);
  padding: 10px;
  background: var(--online-blue);
  color: var(--white);
  border-radius: 50px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  display: block;
  text-align: center;
  margin: -48px auto -32px;
  position: inherit;
  border: 10px solid white;
}

.number.process .app-store-badge {
  margin: 10px auto;
  max-width: 200px;
}

.row-fluid.equal-cols {
  display: flex;
}

.row-fluid.equal-cols > [class*="span"] {
  display: flex;
  flex-direction: column;
  top: 32px;
  position: relative;
  margin-bottom: 32px;
}

.row-fluid.equal-cols.blue-bg > [class*="span"] {
  background: var(--grey-very-light);
}

.row-fluid.equal-cols.blue-bg > [class*="span"] h3 {
  margin-top: 32px;
}

.number-process .process-content h3 {
  margin-top: 0;
}

@media (max-width: 767px) {
  .row-fluid.equal-cols.blue-bg > [class*="span"] {
    margin-top: 25px;
  }

  .row-fluid.equal-cols {
    flex-wrap: wrap;
  }
}

/*Scroll to CTA*/
.scroll-to-cta {
  background: var(--online-blue);
}

.scroll-to-cta h3 {
  margin-top: 0px;
}

.scroll-to-cta a.btn {
  margin: 0px;
}

.scroll-to-cta .row-fluid {
  display: flex;
  align-items: center;
}

@media (max-width: 978px) {
  .scroll-to-cta .row-fluid {
    flex-direction: column;
  }

  .scroll-to-cta .row-fluid .span8,
  .scroll-to-cta .row-fluid .span4 {
    width: 100%;
    margin: 0px;
  }

  .scroll-to-cta a.btn.silver {
    margin: 10px 0px 0px;
    float: none;
  }
}

/*FA Contact Form*/

div.ucta-placeholder div.row-fluid select.span2 {
  min-width: 200px;
}

div.ucta-placeholder div.row-fluid textarea {
  min-width: 300px;
}

/*Figcaption*/
.video + figcaption,
.well figcaption {
  margin-top: 5px;
  font-style: italic;
  font-size: 14px;
  margin-bottom: 30px;
}

/*Calback CTA Life & Money Fix*/
.ucta-container.standard-cta.callback-cta {
  margin-top: 64px;
}

.ucta-container.standard-cta.callback-cta .form-content {
  text-align: left;
}

/*fix aligmnet and spacing issue with two buttons next to each other*/
.button-group a,
.button-group a:last-child,
.promo-panel .content .button-group a:last-child {
  margin-right: 16px;
  margin-bottom: 16px;
  display: inline-block;
}

/*Contact page css moved to style sheet*/
/*phone number table*/
table.phone-numbers tr td,
table.opening-times tr td {
  width: 50%;
}

table.opening-times tr td {
  padding: 5px;
}

@media (max-width: 767px) {
  table.phone-numbers tr td {
    display: block;
    width: 100%;
  }

  table.phone-numbers tr td:first-child {
    padding-bottom: 5px;
  }

  table.phone-numbers tr td:last-child {
    padding-top: 0px;
  }
}

.opening-times-table {
  display: table;
  margin-bottom: 20px;
}

.opening-times-table .tr {
  display: table-row;
}

.opening-times-table .tr .td {
  display: table-cell;
  padding: 1px 2px 2px;
}

@media (min-width: 768px) and (max-width: 969px) {
  .opening-times-table .tr .td span {
    display: none;
  }

  .opening-times-table .tr .td {
    font-size: 14px;
  }
}

/*important-info-panel html version*/
.important-info-panel,
.disclaimer {
  border: 3px solid var(--grey-light);
  padding: 15px;
  margin-bottom: 10px;
}

.important-info-panel h3,
.disclaimer h3 {
  margin-bottom: 5px;
  color: var(--grey-font);
  font-weight: 500;
}

.important-info-panel p,
.disclaimer p {
  font-size: 16px;
  line-height: 1.5;
}

.important-info-panel *:first-child,
.disclaimer *:first-child {
  margin-top: 0px;
}

.important-info-panel *:last-child,
.disclaimer *:last-child {
  margin-bottom: 0px;
}

/*Social Media Panel - Contact Page*/
.contact-social ul.social {
  list-style-type: none;
  margin-left: 0px;
  padding-left: 0px;
}

.contact-social ul.social li a {
  padding-left: 45px;
  background-position: left middle;
  background-repeat: no-repeat;
  line-height: 35px;
  display: block;
}

.contact-social ul.social li.facebook a {
  background-image: url(/~/media/skipton-co-uk/images/icons/footer-facebook.ashx);
}

.contact-social ul.social li.twitter a {
  background-image: url(/~/media/skipton-co-uk/images/icons/Twitter.ashx);
}

/*Social Media Panel - Global*/
.social-media-cta a.social-link {
  display: block;
  margin-top: 20px;
}

.social-media-cta a.social-link img {
  display: inline-block;
  width: auto;
  height: 32px;
  border: 2px solid transparent;
  background-size: auto 32px;
  margin-right: 10px;
}

/*Ticks and crosses table*/
table.table tr td span.tick,
table.table tr td span.cross {
  background: url(/~/media/skipton-co-uk/CSS/img/tick.png) no-repeat center center;
  padding-left: 0px;
  text-align: center;
  width: 100%;
  display: block;
  text-indent: -9999px;
}

table.table tr td span.cross {
  background: url(/~/media/skipton-co-uk/CSS/img/cross.png) no-repeat center center;
}

/*Home insurance page table*/
table.home-insurance-features img.defaqto-logo {
  max-width: 100px;
}

table.home-insurance-features td,
table.home-insurance-features th {
  vertical-align: middle;
}

table.home-insurance-features tr > *:nth-child(2),
table.home-insurance-features tr > *:nth-child(3) {
  text-align: center;
}

@media only screen and (max-width: 767px) {
  table.table.home-insurance-features tbody tr td {
    width: 25%;
  }

  table.table.home-insurance-features tbody tr td:first-child {
    width: 50% !important;
  }

  table.table.home-insurance-features tbody tr td:first-child span {
    display: none;
  }
}

/*Utilities*/
.no-margin-top {
  margin-top: 0;
}

.no-margin-bottom {
  margin-bottom: 0;
}

.no-margin-left {
  margin-top: 0;
}

.no-margin-right {
  margin-bottom: 0;
}

.no-margins {
  margin: 0;
}

.no-padding-top {
  padding-top: 0;
}

.no-padding-bottom {
  padding-bottom: 0;
}

.no-padding-left {
  padding-top: 0;
}

.no-padding-right {
  padding-bottom: 0;
}

.no-padding {
  padding: 0;
}

span.larger-text {
  font-size: 2.5em;
  line-height: 1;
}

.sr-only,
.hidden-h1 h1 {
  height: 1px;
  left: -10000px;
  overflow: hidden;
  position: absolute;
  top: auto;
  width: 1px;
}

/*A-Z list*/
@media only screen and (min-width: 400px) {
  ul.nearest-branches {
    column-count: 2;
    column-gap: 20px;
  }
}

@media only screen and (min-width: 500px) {
  ul.nearest-branches {
    column-count: 3;
  }
}

/*Global security message*/
.mainForm > .row > .span12 {
  margin: 0px auto !important;
  float: none;
  width: 100% !important;
  padding: 0 10px;
  box-sizing: border-box;
}

.mainForm > .row > .span12 > .message {
  width: 940px;
  margin: 36px auto 36px;
  box-sizing: border-box;
  padding: 40px 40px 40px 90px;
  border: 2px solid transparent;
  background-repeat: no-repeat;
  background-position: 27px 40px;
  background-size: 36px;
  color: var(--grey-font);
}

.mainForm > .row > .span12 > .message .message-text {
  padding: 0;
  margin: 0;
}

.mainForm > .row > .span12 > .message.emergency-message {
  border-color: var(--error-red);
  background-image: url(/~/media/skipton-co-uk/images/icons/alerts/error.png);
}

.mainForm > .row > .span12 > .message.system-message {
  border-color: var(--warning-amber);
  background-image: url(/~/media/skipton-co-uk/images/icons/alerts/warning.png);
}

.mainForm > .row > .span12 > .message > i {
  display: none;
}

.mainForm > .row > .span12 > .message h2 {
  margin-top: 0;
}

@media (min-width: 1200px) {
  .mainForm > .row > .span12 {
    padding: 0 15px;
  }

  .mainForm > .row > .span12 > .message {
    width: 1170px;
  }
}

@media (min-width: 768px) and (max-width: 979px) {
  .mainForm > .row > .span12 {
    padding: 0 10px;
  }

  .mainForm > .row > .span12 > .message {
    width: 724px;
  }
}

@media (max-width: 767px) {
  .mainForm > .row > .span12 {
    padding: 0;
  }

  .mainForm > .row > .span12 > .message {
    width: auto;
    padding: 70px 20px 20px;
    background-position: 20px 20px;
  }
}

/*Back-to-top*/
a.back-to-top {
  display: inline-block;
  margin-top: 20px;
  padding: 20px 0;
}

/*Savings Table Test*/
.new-savings-product-style .header.rate-header {
  display: flex;
  justify-content: flex-start;
  flex-wrap: nowrap;
  align-items: center;
  flex-direction: row;
  box-sizing: border-box;
  padding-top: 0;
  background: var(--grey-light);
}

.new-savings-product-style .header.rate-header .heading-panel {
  background: none;
  color: var(--grey-font);
  width: 65%;
  padding: 30px 0 30px 30px;
  order: 1;
}

.new-savings-product-style .header.rate-header .heading-panel h1 {
  color: var(--grey-font);
  padding-left: 0;
  margin: 1em 0 0.25em 0;
  width: auto;
}

.new-savings-product-style .header.rate-header .heading-panel p.issue-number {
  font-weight: 500;
}

.new-savings-product-style .header.rate-header .rate-panel {
  position: relative;
  top: auto;
  left: auto;
  width: 35%;
  order: 2;
}

.new-savings-product-style .header.rate-header .rate-panel a.btn.btn-primary {
  background-color: var(--white);
  color: var(--online-blue);
  border-color: var(--white);
}

.new-savings-product-style .banner-badge {
  text-align: center;
  z-index: 9;
  margin-left: 30px;
  order: 0;
  align-self: flex-start;
}

.new-savings-product-style .banner-badge a {
  display: block;
  height: 100px;
  width: 100px;
  padding: 5px;
  background: var(--white);
  overflow: hidden;
  box-shadow: 0px 3px 5px -1px var(--black-tint-25);
}

.new-savings-product-style .features-panel {
  display: none !important;
}

@media only screen and (max-width: 979px) {
  .new-savings-product-style .header.rate-header {
    padding-left: 0;
    padding-right: 0;
    flex-wrap: wrap;
  }

  .new-savings-product-style .header.rate-header .heading-panel {
    margin-right: 0;
    width: calc(100% - 140px);
  }

  .new-savings-product-style .header.rate-header .rate-panel {
    width: 100%;
    margin-left: 0;
    margin-top: 0;
  }

  .new-savings-product-style .banner-badge {
    margin-right: 15px;
    margin-left: 0px;
    order: 1;
  }

  .new-savings-product-style .banner-badge a {
    height: 80px;
    width: 80px;
  }
}

.new-savings-product-style div[data-tag-asset_name="product summary box"] {
  padding: 40px;
  border: 2px solid var(--grey-light);
  box-sizing: border-box;
  margin-bottom: 2rem;
}

.new-savings-product-style.ns-tiered .summary-box {
  background: transparent;
  margin: 0;
  padding: 0;
}

.new-savings-product-style.ns-tiered .summary-box h3:before {
  background: var(--grey-light);
  height: 1px;
}

.new-savings-product-style table.table,
.new-savings-product-style table.summary-table.smr,
.new-savings-product-style table.summary-table.smr li,
.new-savings-product-style table.summary-table.smr p,
.new-savings-product-style table.summary-table.smr a,
.new-savings-product-style .table-striped tbody tr td,
.new-savings-product-style .table-striped tbody tr p,
.new-savings-product-style .table-striped tbody tr ul,
.new-savings-product-style .table-striped tbody tr li,
.new-savings-product-style .table-striped tbody tr a {
  font-size: 18px;
  line-height: 1.5;
}

.new-savings-product-style .table-striped tbody tr ul {
  margin-top: 8px;
}

.new-savings-product-style .table-striped tbody tr {
  padding: 2rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--grey-light);
  box-sizing: border-box;
  display: flex;
  width: 100%;
  align-items: flex-start;
}

.new-savings-product-style .table-striped tbody tr th,
.new-savings-product-style .cta.savings-cta .tab-content #annual:before,
.new-savings-product-style .cta.savings-cta .tab-content #monthly:before {
  font-size: 1.563rem;
  margin: 1.414em 0 0.5em;
  line-height: 1.5;
  font-weight: 500;
  font-family: var(--body-font);
  color: var(--grey-font);
}

.new-savings-product-style .table-striped tbody tr th {
  width: 40% !important;
  margin-top: 0;
}

.new-savings-product-style .table-striped tbody tr td {
  width: 60%;
}

.new-savings-product-style .table-striped tbody tr:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.new-savings-product-style .table-striped tbody > tr:nth-child(even) > td,
.new-savings-product-style .table-striped tbody > tr:nth-child(even) > th {
  background: transparent;
}

.new-savings-product-style div[data-tag-asset_name="product apply box"] {
  background: var(--grey-light);
  padding: 20px;
  border-top: 10px solid var(--online-blue);
  text-align: center;
}

.new-savings-product-style .cta.savings-cta {
  background: var(--grey-light);
}

.new-savings-product-style .cta.savings-cta,
.new-savings-product-style .cta.savings-cta h2,
.new-savings-product-style .cta.savings-cta h3,
.new-savings-product-style .cta.savings-cta h4,
.new-savings-product-style .cta.savings-cta h5,
.new-savings-product-style .cta.savings-cta p {
  color: var(--grey-font);
}

.new-savings-product-style .cta.savings-cta > .row-fluid [class*="span"]:before {
  background-color: var(--grey-mid);
}

.new-savings-product-style .cta.savings-cta h2 {
  margin: 1em 0 0.5em;
  background: none;
}

.new-savings-product-style .cta.savings-cta p {
  font-weight: 400 !important;
}

.new-savings-product-style .cta.savings-cta #tab {
  display: none !important;
}

.new-savings-product-style .cta.savings-cta .tab-content #annual:before {
  content: "Annual interest";
}

.new-savings-product-style .cta.savings-cta .tab-content #monthly:before {
  content: "Monthly interest";
}

.new-savings-product-style .cta.savings-cta .tab-content > div {
  width: 50%;
  float: left;
  display: block !important;
}

.new-savings-product-style .cta.savings-cta a.btn-primary {
  background: var(--online-blue);
  border-color: var(--online-blue);
  color: var(--white);
  text-shadow: none;
  border-radius: 40px !important;
  font-weight: 500;
  font-size: 16px;
  padding: 16px 40px;
}

@media only screen and (max-width: 768px) {
  .new-savings-product-style h2.summaryBoxHeader {
    margin-top: 0;
  }

  .new-savings-product-style .table-striped tbody tr {
    padding: 2rem 0;
    margin-bottom: 2rem;
    margin-top: 0;
    padding-top: 0;
    display: block;
  }

  .new-savings-product-style tbody a {
    white-space: normal;
  }

  .new-savings-product-style .cta.savings-cta .tab-content > div {
    width: 100%;
    float: none;
  }

  .new-savings-product-style .cta.savings-cta .tab-content #monthly {
    margin-top: 17px;
  }

  .new-savings-product-style .table-striped.smr tbody > tr:nth-child(odd) > th,
  .new-savings-product-style table.smr th {
    background-color: transparent;
  }

  .new-savings-product-style .table-striped tbody tr th,
  .new-savings-product-style .table-striped tbody tr td {
    width: 100% !important;
    margin-top: 0;
    display: block;
  }

  .new-savings-product-style .table-striped tbody tr th,
  .new-savings-product-style .cta.savings-cta .tab-content #annual:before,
  .new-savings-product-style .cta.savings-cta .tab-content #monthly:before {
    font-size: 1.266rem;
    margin: 1.414em 0 0.5em;
    font-weight: 500;
    line-height: 1.2;
  }
}

.new-savings-product-style .reassurance-panel,
.reassurance-panel {
  border-top: none !important;
}

.new-savings-product-style .grid-list p {
  padding-bottom: 0;
  margin-bottom: 0;
}

.new-savings-product-style ul.pdf li a {
  line-height: 30px;
  padding: 2px 0px 20px 30px;
  background: url(/~/media/skipton-co-uk/images/icons/PDF_24.ashx) 0px 0px no-repeat;
}

.new-savings-product-style .cta.savings-cta h2 {
  display: none;
}

/*Featured Product Panel*/
/*-------------- Featured Product Table ---------------*/
.featured-products-panel {
  padding: 20px;
  background: var(--grey-mid);
  margin-bottom: 36px;
  text-align: center;
}

.featured-products-panel h2 {
  text-align: center;
}

.featured-products-panel .container,
.featured-products-panel .product-table {
  width: auto;
  max-width: auto;
  margin: 0;
}

.featured-products-panel .product-list-key {
  display: none;
}

.featured-products-panel .product-table .row-container {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-basis: max-content;
  flex-grow: 1;
}

.featured-products-panel .product-table .row-container .product-panel {
  background-color: var(--white) !important;
  margin: 10px 20px;
  padding: 0;
}

.featured-products-panel .product-row {
  background: var(--white);
  display: flex;
  width: 100%;
  flex-direction: column;
  text-align: center;
  font-size: 0;
  box-sizing: border-box;
  font-size: 16px;
  padding: 20px;
  margin: 0;
}

.featured-products-panel .product-table .product-panel .cell {
  box-sizing: border-box;
  margin: 0;
  padding: 1rem 1rem;
  width: 100%;
  text-align: center;
  padding: 10px 0;
  margin: 0;
}

.featured-products-panel.center-pull-out .product-table .row-container .product-panel:nth-child(2) {
  transform: scale(1.1, 1.1);
  box-shadow: 0px 0px 5px 0px var(--black-tint-25);
}

.featured-products-panel .product-table .product-panel .cell.title-wrapper .title {
  font-size: 1.5rem;
  line-height: 1.2em;
}

.featured-products-panel .rate-wrapper .rate {
  font-size: 3rem;
  display: block;
  margin-bottom: 5px;
  line-height: 0.75em;
  color: var(--primary-purple);
}

.featured-products-panel .product-table .product-panel .product-info ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.featured-products-panel .product-table .product-panel .product-info ul li {
  margin-bottom: 0;
  display: inline;
}

.featured-products-panel .product-table .product-panel .product-info ul li:after {
  content: ".";
}

.featured-products-panel .product-table .product-panel a.btn {
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 20px;
  padding-right: 35px;
}

@media only screen and (max-width: 768px) {
  .featured-products-panel .product-table .row-container {
    flex-direction: column;
    gap: 20px 0;
  }

  .featured-products-panel .product-table .row-container .product-panel {
    width: 100% !important;
    margin: 0;
  }

  .featured-products-panel .product-table .product-panel .cell.title-wrapper .title {
    font-size: 1.2rem;
  }

  .featured-products-panel.center-pull-out .product-table .row-container .product-panel:nth-child(2) {
    order: -1;
    margin-bottom: 20px;
    transform: scale(1.05, 1.05);
  }

  .featured-products-panel .product-table .row-container .product-panel:nth-child(2n) {
    margin-left: 0;
  }

  .featured-products-panel .rate-wrapper .rate {
    font-size: 2rem;
  }
}

/*Featured Product Banner*/
.featured-products-panel.featured-products-banner {
  margin-top: -80px;
  position: relative;
  z-index: 99;
  margin-left: 0px;
  padding: 20px;
  background: var(--grey-light);
  margin-bottom: 40px;
}

.featured-products-panel.featured-products-banner .rich-text {
  margin-bottom: 0;
}

.featured-products-panel.featured-products-banner h2 {
  margin-top: 0.5rem;
}

@media (max-width: 767px) {
  .featured-products-panel.featured-products-banner {
    margin-top: 0;
  }
}

/* SINGLE PRODUCT PANEL ------------------------------------------------------*/

/* .featured-products-panel class is defined elsewhere in digital.css
but is not used anywhere on the site. .product-table and .product-panel
are used elsewhere but as we're repurposing the component they are associated
with here, we are overriding some of their styles to work in this context.

Variants:
- With right-aligned image (add class "has-image" to outer component)
*/

.featured-product-panel {
  margin-bottom: 34px;
}

.featured-product-panel #product .container {
  width: auto;
}

.featured-product-panel .product-table {
  margin: 0;
}

.featured-product-panel .product-table [role=headergroup] {
  display: none;
}

.featured-product-panel .product-table .row-container .product-panel {
  background-color: var(--grey-very-light);
  margin: 0;
  width: 100% !important;
}

.featured-product-panel .product-row {
  flex-direction: row;
  flex-wrap: wrap;
}

@media (max-width: 767px) {
  .featured-product-panel .cell {
    padding: 1rem;
  }
}

@media (min-width: 768px) {
  .featured-product-panel .cell {
    padding: 20px;
  }
}

.featured-product-panel .cell.title-wrapper {
  width: 100%;
}

@media (max-width: 767px) {
  .featured-product-panel .cell.title-wrapper {
    padding-bottom: 0;
  }
}

.featured-product-panel .title {
  font-family: var(--heading-font);
  font-size: 1.563rem;
  margin-right: 0.2em;
}

.featured-product-panel .issue {
  display: none;
}

@media (max-width: 767px) {
  .featured-product-panel .cell.rate-wrapper {
    padding-bottom: 0;
  }
}

@media (max-width: 979px) {
  .featured-product-panel .cell.rate-wrapper {
    width: 100%;
  }
}

@media (min-width: 980px) and (max-width: 1199px) {
  .featured-product-panel .cell.rate-wrapper {
    width: 45%;
  }
}

@media (min-width: 1200px) {
  .featured-product-panel .cell.rate-wrapper {
    width: 36%;
  }
}

.featured-product-panel .rate {
  color: var(--online-blue);
  font-family: var(--heading-font);
  font-size: 4.76rem;
  line-height: 1;
}

@media (max-width: 979px) {
  .featured-product-panel .cell.product-info {
    width: 100%;
  }
}

@media (min-width: 980px) and (max-width: 1199px) {
  .featured-product-panel .cell.product-info {
    width: 55%;
  }
}

@media (min-width: 1200px) {
  .featured-product-panel .cell.product-info {
    width: 64%;
  }
}

.featured-product-panel .product-info ul {
  margin: 0;
}

@media (min-width: 768px) {
  .featured-product-panel .product-info ul {
    list-style: disc;
    margin-left: 20px;
  }
}

.featured-product-panel .product-info ul li {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .featured-product-panel .product-info ul li {
    display: inline;
  }

  .featured-product-panel .product-info ul li:after {
    content: ". ";
    display: inline;
  }
}

@media (min-width: 768px) {
  .featured-product-panel .product-info ul li {
    display: list-item;
  }

  .featured-product-panel .product-info ul li:not(:last-child) {
    margin-bottom: 0.75em;
  }
}

.featured-product-panel .cell.button-wrapper {
  width: 100%;
}

@media (max-width: 767px) {
  .featured-product-panel .cell.button-wrapper {
    padding-left: 1rem !important;
    padding-top: 0;
  }
}

.featured-product-panel .btn {
  margin: 0;
}

.featured-product-panel #product > .row {
  display: none;
}

.featured-product-panel .status-flag {
  display: none !important;
}

/* SINGLE PRODUCT PANEL - IMAGE VARIANT ------------------------------------- */

.featured-product-panel.has-image {
  display: flex;
  flex-direction: column-reverse;
}

@media (min-width: 768px) {
  .featured-product-panel.has-image {
    align-items: stretch;
    flex-direction: row;
  }
}

@media (min-width: 768px) {
  .featured-product-panel.has-image #product {
    width: 60%;
  }
}

.featured-product-panel.has-image .image {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .featured-product-panel.has-image .image {
    width: 40%;
  }
}

.featured-product-panel.has-image .image-control {
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .featured-product-panel.has-image .image-control {
    height: 240px;
    width: 100%;
  }
}

/* END: SINGLE PRODUCT PANEL ------------------------------------------------ */

/*Event Card*/
.event-panel {
  display: flex;
  flex-flow: row nowrap;
  background-color: var(--grey-light);
  margin-bottom: 20px;
  align-items: center;
}

.event-panel.featured {
  background-color: var(--grey-light) !important;
  box-shadow: 0px 10px 10px -10px var(--black-tint-25);
}

.event-panel .event-details {
  padding: 20px;
  max-width: 70%;
}

.event-panel h3 {
  margin-top: 0px;
}

.event-panel h3 a {
  text-decoration-line: underline;
  text-decoration-color: var(--online-cyan);
  text-decoration-thickness: 3px;
  text-underline-offset: 10px;
}

.event-panel h3 a:hover,
.event-panel h3 a:focus {
  text-decoration-color: var(--grey-mid);
}

.event-panel time.icon,
.event-panel address.icon {
  padding-left: 30px;
  position: relative;
  display: block;
}

.event-panel time.icon {
  margin-bottom: 10px;
}

.event-panel address.icon {
  margin-bottom: 0px;
}

.event-panel time.icon::before,
.event-panel address.icon:before {
  vertical-align: top;
  color: var(--primary-purple);
  font-size: 24px;
  line-height: 1;
  position: absolute;
  left: 0px;
  top: 0px;
}

.event-panel time.icon::before {
  content: "access_time";
}

.event-panel address.icon:before {
  content: "location_on";
}

.event-panel .event-details .event-cta {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: flex-end;
}

.event-panel .event-details .event-cta .btn {
  margin: 0px;
}

@media (max-width: 979px) {
  .event-panel {
    flex-flow: column nowrap;
  }

  .event-panel picture {
    align-self: stretch;
  }

  .event-panel picture img {
    width: 100%;
  }

  .event-panel .event-details {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }
}

@media (max-width: 767px) {
  .event-panel address.icon {
    margin-bottom: 20px;
  }

  .event-panel .event-details .event-cta {
    flex-flow: column nowrap;
    align-items: flex-start;
  }

  .event-panel .event-details .event-cta .btn,
  .event-panel .event-details .event-cta span.full {
    align-self: center;
  }
}

/*Abandoned basket*/
.a-basket a {
  display: block;
  padding: 10px 50px 10px 20px;
  background: var(--online-blue) url(/-/media/skipton-co-uk/CSS/img/white-right-arrow.ashx) no-repeat center right;
  color: var(--white);
  margin: 2rem 0;
  background-size: 50px 50px;
  border-radius: 40px;
}

.a-basket a:hover,
.a-basket a:focus {
  text-decoration: none;
}

.a-basket h2 {
  color: var(--white);
  margin: 0;
  padding: 0;
}

.a-basket a:hover h2,
.a-basket a:focus h2 {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

/*Condolence Billboard*/
.billboard.condolence {
  padding: 20px;
}

.billboard.condolence p {
  font-size: 1.2em;
}

.billboard.condolence {
  background: #111;
  color: var(--white);
  text-align: center;
  margin-top: 100px;
  position: relative;
}

.billboard.condolence.letterbox {
  margin-top: 2rem;
}

.billboard.condolence.letterbox .inner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.billboard.condolence h2,
.billboard.condolence h3,
.billboard.condolence p {
  color: var(--white);
}

.billboard.condolence h2 {
  margin: 0.5em 0;
}

.billboard.condolence h3 {
  margin: 0;
}

.billboard.condolence .content {
  max-width: 80%;
  margin: 0px auto;
}

.billboard.condolence.letterbox .content {
  max-width: auto;
  margin: 0;
  text-align: left;
}

.billboard.condolence img {
  border-radius: 50%;
  margin: 0px auto;
  margin-top: -100px;
  width: 100%;
  max-width: 250px;
}

.billboard.condolence.letterbox img {
  margin: 20px 50px 20px 20px;
}

.billboard.condolence .inner:before,
.billboard.condolence .inner:after,
.billboard.condolence:before,
.billboard.condolence:after {
  content: "";
  width: 50px;
  height: 50px;
  position: absolute;
}

.billboard.condolence .inner:before,
.billboard.condolence .inner:after {
  top: 20px;
  border-top: 2px solid var(--white);
}

.billboard.condolence:before,
.billboard.condolence:after {
  bottom: 20px;
  border-bottom: 2px solid var(--white);
}

.billboard.condolence .inner:before,
.billboard.condolence:after {
  left: 20px;
  border-left: 2px solid var(--white);
}

.billboard.condolence .inner:after,
.billboard.condolence:before {
  right: 20px;
  border-right: 2px solid var(--white);
}

@media only screen and (max-width: 979px) {
  .billboard.condolence img {
    max-width: 200px;
    position: relative;
    z-index: 9;
  }

  .billboard.condolence.letterbox .inner {
    display: block;
  }

  .billboard.condolence.letterbox .content {
    max-width: 80%;
    margin: 0px auto;
    text-align: center;
  }

  .billboard.condolence.letterbox {
    margin-top: 100px;
  }

  .billboard.condolence.letterbox img {
    margin: -100px auto 0;
  }
}

/* Life and Money index */
.article-list-flex .article-pod a .article-thumbnail span.category {
  left: 0px;
  right: auto;
}

.article-list-flex .article-pod a:hover .article-thumbnail span.category,
.article-list-flex .article-pod a:focus .article-thumbnail span.category {
  background-color: var(--online-blue);
}

.article-index .article-list-flex .article-pod.featured-article a .article-content:before {
  color: var(--primary-purple);
}

.article-list-flex .article-pod a .article-content h3 {
  color: var(--grey-font);
  text-decoration-line: underline;
  text-decoration-color: var(--online-cyan);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.article-list-flex .article-pod a .article-content p,
.article-list-flex .article-pod a .article-content small {
  color: var(--grey-font);
}

.article-list-flex .article-pod a:hover .article-content h3,
.article-list-flex .article-pod a:focus .article-content h3 {
  color: var(--grey-font);
  text-decoration-line: underline;
  text-decoration-color: var(--grey-mid);
  text-decoration-thickness: 2px;
}

.article-index .article-list-flex .article-pod.featured-article a,
.article-index .article-list-flex .article-pod a:hover,
.article-index .article-list-flex .article-pod a:focus {
  background-color: var(--grey-very-light);
}

.article-index .article-list-flex .article-pod.featured-article a:hover,
.article-index .article-list-flex .article-pod.featured-article a:focus {
  background-color: var(--grey-light);
}

.pagination:before,
.pagination:after {
  background-color: var(--grey-mid);
}

/* Life and Money Article */
.knowledge-centre-article .article-info .duration::before,
.article-list-flex .article-pod a .article-content .duration::before {
  opacity: 1;
  color: var(--online-cyan);
  vertical-align: text-top;
  line-height: 1;
}

.knowledge-centre-article .article-info:after {
  background-color: var(--grey-mid);
}

.tags-share h5 {
  margin-bottom: 1rem;
}

.tags-share ul.tags li {
  overflow: hidden;
  text-transform: none;
}

.tags-share ul.tags li a.label {
  background-color: transparent;
  color: var(--grey-font);
  font-size: 1rem;
  left: -0.975em;
  padding: 0 0 0.25em 0;
  position: relative;
  text-decoration-color: var(--online-cyan);
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-shadow: none;
  text-underline-offset: 0.25em;
}

.tags-share ul.tags li a.label:hover,
.tags-share ul.tags li a.label:focus {
  text-decoration-color: var(--grey-mid);
  text-decoration-line: underline;
}

/* Search Results page */
.search-results h1.pull-left {
  float: none;
  text-align: left;
}

.search-results .pull-right {
  float: none;
}

.search-results .searchcontrol {
  margin-top: 0px;
}

.search-results .searchcontrol input.btn.silver.no-arrow {
  border: 1px solid var(--online-blue);
  background-color: var(--online-blue);
  color: var(--white);
}

.search-results dd {
  padding: 2rem 0px;
  margin-bottom: 0px;
  border-bottom: 2px solid var(--grey-light);
}

.search-results dd a h3 {
  display: inline-block;
  text-decoration-line: underline;
  text-decoration-color: var(--online-cyan);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  margin-top: 0px;
}

.search-results dd a:hover h3,
.search-results dd a:focus h3 {
  text-decoration-line: underline;
  text-decoration-color: var(--grey-mid);
  text-decoration-thickness: 2px;
}

.search-results dd p {
  max-width: 75ch;
}

.search-results dd p:last-child {
  margin-bottom: 0px;
}

/* Brand summary box changes - can be deleted when new style is approved */
@media (max-width: 767px) {
  .summary-table.smr {
    background-color: var(--grey-very-light);
    display: block;
    padding: 15px;
  }

  .summary-table.table.smr th,
  .summary-table.table.smr td,
  .summary-table.table.smr tr {
    background-color: transparent !important;
    padding: 0px !important;
  }

  .summary-table.table.smr tr {
    padding: 20px 0px !important;
    border-bottom: 2px solid var(--grey-mid);
    display: block;
    margin: 0px;
  }

  .summary-table.table.smr tr:first-child {
    padding-top: 0px !important;
  }

  .summary-table.table.smr tr:last-child {
    padding-bottom: 0px !important;
    border-bottom: none;
  }

  .table.summary-table.smr tr th {
    margin-bottom: 0.5em;
  }

  /* force links to wrap in mobile summary table */

  .summary-table.table.smr a {
    display: inline;
    white-space: break-spaces;
  }
}

/* Loading modal */
#maincontent .article-index .modal.full-screen {
  width: 100% !important;
  height: 100% !important;
}

#maincontent .article-index .modal.full-screen .modal-content .modal-body.progessBody {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0px !important;
  text-align: center;
  background-color: var(--grey-light);
  color: var(--primary-purple);
}

#maincontent .article-index .modal.full-screen .modal-content .modal-body.progessBody .loading-bar {
  background-color: transparent;
}

@media (max-width: 767px) {
  #maincontent .article-index .modal.full-screen .modal-content .modal-body.progessBody {
    top: 0px;
    transform: translate(-50%, 0);
  }
}

/* affordability calc styling */
.affordability-calculator {
  background-color: var(--grey-very-light);
}

.affordability-calculator .form-content > .row-fluid > .span12 > label {
  margin-top: 0px;
}

.affordability-calculator .result p {
  font-weight: 500;
  color: var(--white);
}

.affordability-calculator .result span {
  color: var(--white);
}

.span6 .affordability-calculator .result:before {
  border-top: 20px solid var(--grey-very-light);
}

.affordability-calculator .result {
  background-color: var(--online-blue);
  box-shadow: 0px 10px 10px -8px var(--black-tint-25);
}

.affordability-calculator .controls label {
  font-weight: 500;
}

.affordability-calculator .radio > label .checkmark:after {
  background: var(--primary-purple) !important;
}

.affordability-calculator .radio > label input:checked ~ .checkmark {
  border: 1px solid var(--primary-purple) !important;
}

.affordability-calculator .input-append .add-on,
.affordability-calculator .input-prepend .add-on,
.affordability-calculator .input-append .add-on:last-child,
.affordability-calculator .input-prepend .add-on:first-child {
  background-color: var(--grey-mid);
  border-color: var(--grey-mid);
}

/* FORMS - remove green confirm highlights */
.control-group.success .control-label,
.control-group.success .help-block,
.control-group.success .help-inline,
.control-group.success .checkbox,
.control-group.success .radio,
.control-group.success input,
.control-group.success select,
.control-group.success textarea {
  color: var(--grey-font);
  border-color: var(--grey-dark);
}

.control-group.success input[type="submit"].btn {
  color: var(--white);
}

.form-content .success {
  background: none;
}

/* FORMS - manage error styling issue*/

.control-group.error input[type="submit"].btn {
  color: var(--white);
}

/* NPP Pledge screen */
.npp-pledges {
  border: solid 5vmin #eee;
  border-bottom-color: var(--white);
  border-left-color: #eee;
  border-radius: 2px;
  border-right-color: #eee;
  border-top-color: #ddd;
  box-shadow: 0 0 5px 0 var(--black-tint-25) inset,
    0 5px 10px 5px var(--black-tint-25);
  box-sizing: border-box;
  text-align: center;
  padding: 10px 30px 60px;
}

.npp-pledges h2.h1 {
  color: var(--online-cyan) !important;
  font-family: var(--heading-font) !important;
  margin: 1em 0 0.5em;
}

.npp-pledges p {
  max-width: 38em;
  margin: auto;
}

.npp-pledges p:after {
  content: "";
  width: 50px;
  height: 3px;
  background-color: #e5e8ea;
  display: block;
  margin: 30px auto 0px;
}

.npp-pledges p:last-child:after {
  display: none;
}

.npp-pledges img {
  max-width: 150px;
  max-height: 150px;
}

/* Savings Calculator */
.savings-calc {
  background-image: url(/~/media/skipton-co-uk/images/page-headers/Hero-Headers/Savings.ashx);
  background-size: cover;
  background-position: right;
  padding: 30px;
  min-height: 730px;
}

.savings-calc .savings-calc-intro {
  padding: 20px 20px 0;
  background-color: var(--grey-light);
}

.savings-calc .savings-calc-intro > *:first-child {
  margin-top: 0px;
}

.savings-calc .savings-calc-intro > *:last-child,
.savings-calc .savings-calc-intro p {
  margin-bottom: 0px;
}

.savings-calc .rich-text {
  margin-bottom: 0px;
}

.savings-calc .rich-text > h2,
.savings-calc .rich-text > h3 {
  display: none;
}

.savings-calc .well.light-purple {
  background-color: var(--grey-light);
  margin-bottom: 0px;
  border-top: 0px;
}

.savings-calc .form-content > div > label::before {
  content: "* ";
  color: var(--error-red);
  display: inline-block;
}

.savings-calc .form-content div:nth-child(6) {
  text-align: center;
}

.savings-calc .form-content div:nth-child(6) p:first-child {
  font-size: 17px;
  margin-bottom: 5px;
  margin-top: 0px;
}

.savings-calc .form-content div:nth-child(6) p:last-child {
  margin-bottom: 0px;
}

.savings-calc .form-content div:nth-child(5) {
  margin-bottom: 10px;
}

.savings-calc .form-content div:nth-child(5) .input-append,
.savings-calc .form-content div:nth-child(5) .input-append .btn {
  margin-bottom: 0px;
}

.savings-calc .form-content .control-group {
  padding-right: 0px;
  margin-bottom: 0px;
}

.savings-calc .input-append .add-on,
.savings-calc .input-prepend .add-on,
.savings-calc .input-append .add-on:last-child,
.savings-calc .input-prepend .add-on:first-child,
#mortgage-calculator-wrapper .input-append .add-on,
#mortgage-calculator-wrapper .input-prepend .add-on {
  background-color: var(--grey-mid);
  border-color: var(--grey-mid);
  text-shadow: none;
}

.savings-calc .savings-calc-cta {
  background-color: var(--online-blue);
  padding: 20px;
}

.savings-calc-cta h3 {
  margin-top: 0px;
  color: var(--white);
}

.savings-calc-cta .btn {
  background-color: var(--white);
  color: var(--grey-font);
  border-color: var(--white);
}

.savings-calc-cta .btn:hover,
.savings-calc-cta .btn:focus {
  opacity: 1;
  box-shadow: 0 0 0 3px var(--primary-purple);
}

.savings-calc .disclaimer {
  margin-top: 20px;
  padding: 10px 20px;
  background-color: var(--white);
}

.savings-calc .disclaimer p {
  font-size: 16px;
  font-weight: 500;
  margin: 0px;
  line-height: 1.45;
}

.savings-calc .error-message {
  background-color: var(--grey-light);
  padding: 20px;
  margin-bottom: 0px;
}

.savings-calc .error-message i.purple {
  background-color: var(--online-blue);
}

.savings-calc .form-content > div > label::before {
  margin-right: 5px;
}

.savings-calc .input-append button#btnCalculateSavings {
  padding: 8px 19px !important;
}

.savings-calc .input-append button#btnClear {
  padding: 6px 17px !important;
}

@media (max-width: 767px) {
  .savings-calc {
    background: none;
    padding: 0px;
    min-height: auto;
  }

  .row-fluid .input-append [class*="span"] {
    display: block;
  }
}

/* ISA Transfer Decision Tree */
.transfer-dec-tree .control-group.decision-tree-label {
  margin-bottom: 2rem;
}

.transfer-dec-tree {
  background: var(--grey-light);
  padding: 20px;
}

.transfer-dec-tree h2:first-of-type,
.transfer-dec-tree h3:first-of-type {
  margin-top: 0px;
}

.transfer-dec-tree .btn-group.decision-tree {
  width: 100%;
  box-sizing: border-box;
}

.transfer-dec-tree .control-label {
  font-weight: 500;
  font-size: 1.125rem;
  margin-bottom: 10px;
  display: block;
}

.transfer-dec-tree .btnSkiptonToSkipton,
.transfer-dec-tree .btnSkiptonToAnotherProvider,
.transfer-dec-tree .btnAnotherProviderToSkipton {
  width: 25%;
  vertical-align: top;
}

.transfer-dec-tree .decision-tree-pane {
  max-width: 800px;
  margin: 0px auto;
  margin-top: 75px;
  margin-bottom: 2rem;
  position: relative;
  background: var(--white);
  padding: 2rem;
  box-shadow: 0px 0px 5px 0px var(--black-tint-25);
  text-align: left;
}

.transfer-dec-tree .decision-tree-pane h3,
.transfer-dec-tree .decision-tree-pane a.btn {
  text-align: center;
}

/* ISA Transfer Decision Tree - icons*/
.transfer-dec-tree .decision-tree-pane:before,
.transfer-dec-tree .SkiptonCashIsaYes:before,
.transfer-dec-tree .StockAndSharesNo:before,
.transfer-dec-tree .SkiptonCashIsa:before,
.transfer-dec-tree .btn-group.decision-tree .btn.btn-toggle:before {
  content: "";
  background-size: auto 100%;
  background-position: center center;
  display: block;
  height: 40px;
  width: 100%;
  margin: 10px auto;
}

.transfer-dec-tree .decision-tree-pane:before,
.transfer-dec-tree .SkiptonCashIsaYes:before,
.transfer-dec-tree .StockAndSharesNo:before,
.transfer-dec-tree .SkiptonCashIsa:before {
  background: url("/-/media/skipton-co-uk/images/icons/decision-tree-icons/down-arrow-grey") no-repeat center center;
  height: 30px;
  margin: 15px 0px 30px;
  opacity: 0.4;
}

.transfer-dec-tree .decision-tree-pane:before {
  text-align: center;
  height: 75px;
  position: absolute;
  left: 0;
  top: -75px;
  margin: 0;
  background-size: auto 30px;
}

.transfer-dec-tree .btnAnotherProviderToSkipton:before {
  background: url("/-/media/skipton-co-uk/images/icons/decision-tree-icons/to-skipton") no-repeat center center;
}

.transfer-dec-tree .btnSkiptonToSkipton:before {
  background: url("/-/media/skipton-co-uk/images/icons/decision-tree-icons/skipton-to-skipton") no-repeat center center;
}

.transfer-dec-tree .btnSkiptonToAnotherProvider:before {
  background: url("/-/media/skipton-co-uk/images/icons/decision-tree-icons/skipton-out") no-repeat center center;
}

.transfer-dec-tree .btnOpenSkiptonCashIsaInBranch:before {
  background: url("/-/media/skipton-co-uk/images/icons/decision-tree-icons/branch-v3") no-repeat center center;
  height: 60px !important;
}

.transfer-dec-tree .btnOpenSkiptonCashIsaOnline:before {
  background: url("/-/media/skipton-co-uk/images/icons/decision-tree-icons/online-mouse") no-repeat center center;
  height: 60px !important;
}

.transfer-dec-tree .btn-group.decision-tree [class*="Yes"]:before {
  background: url("/-/media/skipton-co-uk/images/icons/decision-tree-icons/tick") no-repeat center center;
}

.transfer-dec-tree .btn-group.decision-tree [class*="No"]:before {
  background: url("/-/media/skipton-co-uk/images/icons/decision-tree-icons/cross") no-repeat center center;
}

/* ISA Transfer Decision Tree - active state icons*/
.transfer-dec-tree .btnAnotherProviderToSkipton.active:before {
  background: url("/-/media/skipton-co-uk/images/icons/decision-tree-icons/to-skipton-white-active") no-repeat center center;
}

.transfer-dec-tree .btnSkiptonToSkipton.active:before {
  background: url("/-/media/skipton-co-uk/images/icons/decision-tree-icons/skipton-to-skipton-white-active") no-repeat center center;
}

.transfer-dec-tree .btnSkiptonToAnotherProvider.active:before {
  background: url("/-/media/skipton-co-uk/images/icons/decision-tree-icons/skipton-out-white-active") no-repeat center center;
}

.transfer-dec-tree .btnOpenSkiptonCashIsaInBranch.active:before {
  background: url("/-/media/skipton-co-uk/images/icons/decision-tree-icons/branch-white-active") no-repeat center center;
}

.transfer-dec-tree .btnOpenSkiptonCashIsaOnline.active:before {
  background: url("/-/media/skipton-co-uk/images/icons/decision-tree-icons/online-mouse-white-active") no-repeat center center;
}

.transfer-dec-tree .btn-group.decision-tree [class*="Yes"].active:before {
  background: url("/-/media/skipton-co-uk/images/icons/decision-tree-icons/tick-white-active") no-repeat center center;
}

.transfer-dec-tree .btn-group.decision-tree [class*="No"].active:before {
  background: url("/-/media/skipton-co-uk/images/icons/decision-tree-icons/cross-white-active") no-repeat center center;
}

/* ISA Transfer Decision Tree - button styling*/
.transfer-dec-tree .btn-group.decision-tree .btn.btn-toggle,
.transfer-dec-tree .decision-tree .btn.btn-toggle:first-of-type,
.transfer-dec-tree .decision-tree .btn.btn-toggle:last-of-type {
  border-radius: 20px !important;
  border: 2px solid var(--primary-purple) !important;
  margin-left: 20px;
  margin-right: 20px;
  min-width: 150px;
  box-sizing: border-box;
  padding: 20px 10px !important;
}

.transfer-dec-tree .btn-group.decision-tree .btn.btn-toggle,
.transfer-dec-tree .btn-group.decision-tree .btn.btn-toggle.active {
  position: relative;
  padding: 0px;
  font-size: 1.125rem;
  line-height: 1.2em;
}

.transfer-dec-tree .btn-group.decision-tree .btn.btn-toggle {
  background: none !important;
}

.transfer-dec-tree .btn-group.decision-tree .btn.btn-toggle:hover,
.transfer-dec-tree .btn-group.decision-tree .btn.btn-toggle.active:hover {
  text-decoration-line: underline;
  opacity: 0.7;
}

.transfer-dec-tree .btn-group.decision-tree .btn.btn-toggle:focus,
.transfer-dec-tree .btn-group.decision-tree .btn.btn-toggle.active:focus {
  box-shadow: 0px 0px 5px 0px var(--black-tint-25);
}

.transfer-dec-tree .btn-group.decision-tree .btn.btn-toggle.active {
  background: var(--primary-purple) !important;
  color: var(--white);
  text-decoration: none;
  transform: scale(1.1, 1.1);
  opacity: 1 !important;
  box-shadow: 0px 0px 5px 0px var(--black-tint-25);
}

@media only screen and (max-width: 980px) {

  .transfer-dec-tree .btnSkiptonToSkipton,
  .transfer-dec-tree .btnSkiptonToAnotherProvider,
  .transfer-dec-tree .btnAnotherProviderToSkipton {
    width: 25% !important;
    display: inline-block !important;
  }

  .transfer-dec-tree .SkiptonCashIsaYes:before,
  .transfer-dec-tree .StockAndSharesNo:before,
  .transfer-dec-tree .SkiptonCashIsa:before,
  .transfer-dec-tree .btn-group.decision-tree .btn.btn-toggle:before {
    background-size: 150px 100% !important;
  }
}

@media only screen and (max-width: 767px) {

  .transfer-dec-tree .btn-group.decision-tree .btn.btn-toggle,
  .transfer-dec-tree .btn-group.decision-tree .btn.btn-toggle.active {
    font-size: 1rem;
  }

  .transfer-dec-tree .btn-group.decision-tree .btn.btn-toggle,
  .transfer-dec-tree .btn-group.decision-tree .btn.btn-toggle.active,
  .transfer-dec-tree .decision-tree .btn.btn-toggle:first-of-type,
  .transfer-dec-tree .decision-tree .btn.btn-toggle:last-of-type {
    min-width: 250px;
    max-width: 250px;
    margin: 20px auto !important;
    display: block !important;
  }

  .transfer-dec-tree .SkiptonCashIsaYes:before,
  .transfer-dec-tree .StockAndSharesNo:before,
  .transfer-dec-tree .SkiptonCashIsa:before,
  .transfer-dec-tree .btn-group.decision-tree .btn.btn-toggle:before {
    background-size: auto 100% !important;
  }
}

@media only screen and (max-width: 690px) {
  .transfer-dec-tree .btn-group.decision-tree .btn.btn-toggle:before {
    height: 30px;
  }

  .transfer-dec-tree .btnOpenSkiptonCashIsaInBranch:before,
  .transfer-dec-tree .btnOpenSkiptonCashIsaOnline:before {
    height: 50px !important;
  }
}

@media only screen and (max-width: 690px) {
  .transfer-dec-tree .btn-group.decision-tree .btn.btn-toggle:before {
    height: 25px;
  }

  .transfer-dec-tree .btnOpenSkiptonCashIsaInBranch:before,
  .transfer-dec-tree .btnOpenSkiptonCashIsaOnline:before {
    height: 35px !important;
  }
}

@media only screen and (max-width: 450px) {
  .transfer-dec-tree {
    margin: 0 -20px;
  }

  .transfer-dec-tree .btn-group {
    white-space: normal;
  }

  .transfer-dec-tree .btn-group.decision-tree .btn.btn-toggle,
  .transfer-dec-tree .decision-tree .btn.btn-toggle:first-of-type,
  .transfer-dec-tree .decision-tree .btn.btn-toggle:last-of-type {
    font-size: 14px;
    line-height: 1.2em;
  }

  .transfer-dec-tree .SkiptonCashIsaYes:before,
  .transfer-dec-tree .StockAndSharesNo:before,
  .transfer-dec-tree .SkiptonCashIsa:before,
  .transfer-dec-tree .btn-group.decision-tree .btn.btn-toggle:before {
    background-size: auto 80% !important;
  }
}

@media only screen and (max-width: 330px) {

  .transfer-dec-tree .btnSkiptonToSkipton,
  .transfer-dec-tree .btnSkiptonToAnotherProvider,
  .transfer-dec-tree .btnAnotherProviderToSkipton {
    margin: 20px auto 0 !important;
    width: 100% !important;
    display: block !important;
  }

  .transfer-dec-tree .btnAnotherProviderToSkipton {
    margin-top: 0 !important;
  }
}

/* SAVING VS INVESTING INFOGRAPHIC */
@media only screen and (min-width: 700px) {
  .info-graphic-wrapper {
    display: flex;
    align-items: center;
    align-content: center;
    column-gap: 20px;
    flex-wrap: wrap;
  }

  .info-graphic-wrapper .graphic-part {
    flex-grow: 1;
    align-self: flex-start;
    width: auto;
  }

  .info-graphic-wrapper .graphic-part:first-child {
    flex: 0 0 100%;
    /* flex-grow, flex-shrink, flex-basis */
  }
}

@media only screen and (min-width: 1024px) {
  .info-graphic-wrapper {
    flex-wrap: nowrap;
  }

  .info-graphic-wrapper .graphic-part,
  .info-graphic-wrapper .graphic-part:first-child {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 33%;
    align-self: flex-start;
  }

  .info-graphic-wrapper .graphic-part:first-child {
    align-self: center;
  }
}

@media only screen and (max-width: 700px) {
  .info-graphic-wrapper {
    padding-bottom: 58px;
  }
}

.info-graphic-wrapper .well {
  border-top: none;
}

.info-graphic-wrapper h3 {
  margin-bottom: 2em;
}

.info-graphic-wrapper .shape {
  position: relative;
  width: 150px;
  height: 50px;
  display: block;
}

.info-graphic-wrapper .shape.top {
  background: var(--primary-purple);
}

.info-graphic-wrapper .shape.middle {
  background: var(--grey-dark);
  height: 60px;
}

.info-graphic-wrapper .shape.bottom {
  background: var(--online-cyan);
}

.info-graphic-wrapper .shape.top:before {
  content: "";
  border-bottom: 25px solid var(--primary-purple);
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  width: 1px;
  position: absolute;
  top: -25px;
}

.info-graphic-wrapper .shape.bottom:after {
  content: "";
  border-top: 25px solid var(--online-cyan);
  border-left: 75px solid transparent;
  border-right: 75px solid transparent;
  width: 1px;
  position: absolute;
  bottom: -25px;
}

.info-graphic-wrapper .projected-amount {
  display: flex;
  align-items: center;
  align-content: center;
  margin-bottom: 5px;
}

.info-graphic-wrapper .projected-amount p.total {
  font-size: 1.563em;
  font-weight: 500;
  color: var(--primary-purple);
  padding: 0;
  margin: 0;
}

.info-graphic-wrapper .projected-amount .amount {
  margin-left: 20px;
}

.info-graphic-wrapper .projected-amount p {
  font-size: 1em;
  margin: 0;
  padding: 0;
}

.info-graphic-wrapper .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Online Services Page */
.well.new-features {
  border-top: none;
  background-color: var(--white);
}

.app-store-badge-placeholder {
  text-align: left;
  margin-top: 0px;
}

.app-store-badge-placeholder img.app-store-badge {
  width: 45%;
  margin-bottom: 20px;
  display: inline-block;
  margin-left: 0;
}

/*LISA Bonus infographic */
#infographic201819 img {
  width: 33%;
  max-width: 100px;
  filter: invert(1) saturate(0);
}

#infographic201819 h2 {
  margin-top: 0;
  color: var(--white);
}

#infographic201819 p {
  color: var(--white);
}

#infographic201819 .span7.panel1 {
  background: var(--primary-purple);
  padding: 20px 45px 20px 20px;
  box-shadow: 0px 10px 10px -10px var(--black-tint-25);
}

#infographic201819 .span7 .panel1-img1 {
  float: left;
  padding-right: 20px;
  max-width: 175px;
}

#infographic201819 .span7 .panel1-img2 {
  float: right;
  max-width: 75px;
}

#infographic201819 .span5.panel2 {
  background: var(--online-blue);
  box-shadow: 0px 10px 10px -10px var(--black-tint-25);
  padding: 20px;
  margin-top: 20px;
  margin-left: -20px;
}

#infographic201819 .span5 .panel2-img1 {
  float: left;
  padding: 0px 20px 20px 0px;
}

#infographic201819 .span5 .panel2-img2 {
  float: right;
  max-width: 75px;
}

@media (max-width: 979px) {
  #infographic201819 .span5 .panel2-img1 {
    width: 25%;
  }
}

@media (max-width: 767px) {
  #infographic201819 .infographic img {
    max-width: 75px;
  }

  #infographic201819 .span7.panel1 {
    min-height: 215px;
    padding: 20px 20px 45px;
  }

  #infographic201819 .span5.panel2 {
    margin-top: -20px;
    margin-left: 20px;
    min-height: 200px;
  }

  #infographic201819 .span5 .panel2-img1 {
    padding-bottom: 100px;
  }
}

@media (max-width: 600px) {
  #infographic201819 .span7.panel1 {
    min-height: 200px;
  }

  #infographic201819 .span7 .panel1-img1 {
    max-width: 110px !important;
  }

  #infographic201819 p {
    font-size: 16px;
  }
}

@media (max-width: 470px) {
  #infographic201819 .span5 .panel2-img1 {
    padding-bottom: 10px;
  }
}

/* In page Nav UI - added 15/03/2023 - DP */

nav.in-page-nav {
  background-color: var(--grey-very-light);
  border: none;
  padding: 40px;
}

nav.in-page-nav ul {
  margin-bottom: 0px;
}

nav.in-page-nav li {
  background-image: url(/~/media/skipton-co-uk/images/icons/white-arrow-purple-19.ashx?la=en-GB);
  background-position: left 4px;
  background-repeat: no-repeat;
}

nav.in-page-nav h2 {
  margin-top: 0px;
}

div.back-to-top {
  margin: 3rem 0;
  text-align: right;
}

div.back-to-top a {
  text-decoration-color: var(--grey-mid);
  text-decoration-line: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
}

div.back-to-top a:hover,
div.back-to-top a:focus {
  text-decoration-color: var(--online-cyan) !important;
}

div.back-to-top a:after {
  border-style: solid;
  border-width: 3px 3px 0 0;
  border-color: var(--online-cyan);
  content: "";
  display: inline-block;
  height: 5px;
  margin-left: 10px;
  transform: rotate(-45deg);
  width: 5px;
}

@media (max-width: 767px) {
  nav.in-page-nav {
    padding: 10px;
  }
}

/* END In page Nav UI */

/*
PEOPLE

Variants:
- Pod (Use "pods" modifier class.)
  - Three across* (Default. No modifier class required.)
  - Two across* (Use "two-across" modifier class.)
- Panel (Use "panels" modifier class.)
  - One across (Default. No modifier class required.)
  - Two across* (Use "two-across" modifier class.)
  - Top-aligned image (Default. No modifier class required.)
  - Centre-aligned image (Use "valign-center" modifier class.)
  - Reduced vertical space between panels (Use "reduce-whitespace" modifier class.)
- Linked (When heading is a link, whole pod becomes clickable. Use "linked" class.)

* These refer to how it is displayed on desktop. The number of items in a row
changes as the screen size reduces.

Note: Even if only displaying a single person, you should still wrap it in
<div class="people"></div> as this is where the variant modifier
classes are added.
*/
.people,
.people * {
  box-sizing: border-box;
}

.people .person img {
  border-radius: 50%;
  box-shadow: 0 0 7px rgba(100, 100, 100, 0.175);
  -o-object-fit: cover;
  object-fit: cover;
}

.people .person .text h2,
.people .person .text h3,
.people .person .text h4,
.people .person .text h5,
.people .person .text h6 {
  font-family: var(--heading-font);
  font-size: 1.563rem;
  margin: 0 0 0.15em 0;
}

.people .person .text :last-child {
  margin-bottom: 0;
}

.people .person .text address {
  font-style: normal;
}

.people .person .text address ul {
  list-style: none;
  margin: 0;
}

.people .person .text address ul li {
  margin: 0;
  padding: 0;
}

.people .person .text address ul li a {
  display: inline-block;
  color: var(--grey-font);
  padding-bottom: 0.25em;
  text-decoration-line: underline;
  text-decoration-color: var(--online-cyan);
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.25em;
}

.people .person .text address ul li a:hover,
.people .person .text address ul li a:focus {
  text-decoration-color: var(--grey-mid);
}

.people.pods {
  align-items: stretch;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
}

.people.pods .person {
  padding: 20px;
  text-align: center;
}

@media (max-width: 599px) {
  .people.pods .person {
    width: 100%;
  }

  .people.pods .person img {
    height: 200px;
    width: 200px;
  }
}

@media (min-width: 600px) and (max-width: 767px) {
  .people.pods .person {
    width: 255px;
  }

  .people.pods .person img {
    height: 220px;
    width: 220px;
  }
}

@media (min-width: 768px) and (max-width: 979px) {
  .people.pods .person {
    width: 280px;
  }

  .people.pods .person img {
    height: 245px;
    width: 245px;
  }
}

@media (min-width: 980px) and (max-width: 1199px) {
  .people.pods .person {
    width: 280px;
  }

  .people.pods .person img {
    height: 245px;
    width: 245px;
  }
}

@media (min-width: 1200px) {
  .people.pods .person {
    width: 370px;
  }

  .people.pods .person img {
    height: 270px;
    width: 270px;
  }
}

.people.pods .person .text h2,
.people.pods .person .text h3,
.people.pods .person .text h4,
.people.pods .person .text h5,
.people.pods .person .text h6 {
  margin-top: 1rem;
}

@media (min-width: 980px) and (max-width: 1199px) {
  .people.pods.two-across {
    margin-left: 175px;
    margin-right: 175px;
  }
}

@media (min-width: 1200px) {
  .people.pods.two-across {
    margin-left: 185px;
    margin-right: 185px;
  }
}

.people.panels .person {
  display: flex;
  padding-bottom: 20px;
  padding-top: 20px;
  position: relative;
}

@media (max-width: 599px) {
  .people.panels .person {
    gap: 20px;
  }
}

@media (min-width: 600px) {
  .people.panels .person {
    gap: 30px;
  }
}

.people.panels .person img {
  flex-shrink: 0;
}

@media (max-width: 599px) {
  .people.panels .person img {
    height: 100px;
    width: 100px;
  }
}

@media (min-width: 600px) and (max-width: 767px) {
  .people.panels .person img {
    height: 135px;
    width: 135px;
  }
}

@media (min-width: 768px) {
  .people.panels .person img {
    height: 170px;
    width: 170px;
  }
}

.people.panels .person .text p {
  margin-bottom: 0.5rem;
}

.people.panels.two-across {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

@media (max-width: 979px) {
  .people.panels.two-across .person {
    width: 100%;
  }
}

@media (min-width: 980px) and (max-width: 1199px) {
  .people.panels.two-across .person {
    width: 455px;
  }
}

@media (min-width: 1200px) {
  .people.panels.two-across .person {
    width: 570px;
  }
}

.people.panels.valign-center .person {
  align-items: center;
}

.people.panels:not(.valign-center) .person img {
  position: relative;
  top: 7px;
}

.people.panels.reduce-whitespace {
  row-gap: 10px;
}

.people.linked .person {
  padding: 20px;
  position: relative;
}

.people.linked .person .text h2 a,
.people.linked .person .text h3 a,
.people.linked .person .text h4 a,
.people.linked .person .text h5 a,
.people.linked .person .text h6 a {
  color: var(--grey-font);
  padding-bottom: 0.25em;
  text-decoration-line: underline;
  text-decoration-color: var(--online-cyan);
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.25em;
}

.people.linked .person .text h2 a:after,
.people.linked .person .text h3 a:after,
.people.linked .person .text h4 a:after,
.people.linked .person .text h5 a:after,
.people.linked .person .text h6 a:after {
  bottom: 0;
  content: "";
  display: block;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

.people.linked .person:hover {
  border-radius: 5px;
  box-shadow: 0 0 5px var(--black-tint-25);
  cursor: pointer;
}

.people.linked .person:hover img {
  transform: scale(1.005);
}

.people.linked .person:hover .text h2 a,
.people.linked .person:hover .text h3 a,
.people.linked .person:hover .text h4 a,
.people.linked .person:hover .text h5 a,
.people.linked .person:hover .text h6 a {
  text-decoration-color: var(--grey-mid);
}

/* End PEOPLE */

/* Text links inside tables */
table.with-text-links a {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  text-decoration-color: var(--online-cyan);
}

table.with-text-links a:hover,
table.with-text-links a:focus {
  text-decoration-color: var(--grey-mid);
}

/* End: Text links inside tables */

/* New pull-out pattern (not yet defined officially as a pattern) */
.pull-out {
  border-left: 4px solid var(--grey-light);
  padding-left: 1rem;
}

/* Hide Snap Survey on Life and Money pages */
.article-survey-iframe {
  display: none;
}

/* START Bank account details pattern styles */
.bank-account-details {
  background-color: var(--grey-very-light);
  background-image: url(https://www.skipton.co.uk/~/media/skipton-co-uk/images/icons/info-panels/boe_blue.ashx);
  /*.background-image: url("/~/media/skipton-co-uk/images/icons/info-panels/boe_blue.ashx");*/
  background-position: 1.25rem 1.5rem;
  background-repeat: no-repeat;
  background-size: 36px 36px;
  border-left: 6px solid var(--online-cyan);
  display: inline-block;
  margin-left: 0;
  margin-bottom: 1.5rem;
  padding: 1.5rem 2.5rem 1.5rem 4.75rem;
}

@media (max-width: 767px) {
  .bank-account-details {
    padding: 4.25rem 2.5rem 1.5rem 1.5rem;
    background-position: 1.25rem 1.25rem;
  }
}

.bank-account-details dt {
  font-size: 1rem;
  margin: 0;
}

.bank-account-details dd + dt {
  margin-top: 0.65rem;
}

/* END Bank account details pattern styles */

/* START Contact CTA pattern styles */

.contact-cta > .rich-text {
  margin-bottom: 1rem;
}

.contact-cta > .rich-text h2 {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .contact-cta > .row {
    display: flex;
  }
}

.contact-cta > .row,
.contact-cta > .row * {
  box-sizing: border-box;
}

.contact-cta > .row > [class^=span] {
  float: none;
}

.contact-cta > .row > [class^=span] > .rich-text {
  border: 2px solid var(--grey-light);
  padding: 15px;
}

@media (max-width: 767px) {
  .contact-cta > .row > [class^=span] > .rich-text {
    margin-bottom: 20px;
  }
}

@media (min-width: 768px) {
  .contact-cta > .row > [class^=span] > .rich-text {
    height: calc(100% - 32px);
  }
}

.contact-cta > .row > [class^=span] > .rich-text h3 {
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 30px 30px;
  font-family: var(--body-font);
  font-size: 1.25rem;
  margin-bottom: 15px;
  margin-top: 0;
  padding-left: 40px;
}

.contact-cta > .row > [class^=span] > .rich-text h3.phone {
  background-image: url(/-/media/skipton-co-uk/CSS/img/phone-icon.png);
}

.contact-cta > .row > [class^=span] > .rich-text h3.email {
  background-image: url(/-/media/skipton-co-uk/CSS/img/email-icon.png);
}

.contact-cta > .row > [class^=span] > .rich-text h3.video {
  background-image: url(/-/media/skipton-co-uk/CSS/img/video-icon.png);
  height: auto;
  padding-bottom: 0;
  padding-top: 0;
}

.contact-cta > .row > [class^=span] > .rich-text p:first-of-type {
  margin-bottom: 15px;
}

.contact-cta > .row > [class^=span] > .rich-text p:not(:first-of-type):not(:last-of-type) {
  margin-bottom: 10px;
}

.contact-cta > .row > [class^=span] > .rich-text p:last-of-type {
  margin-bottom: 5px;
}

.contact-cta > .row > [class^=span] > .rich-text p a {
  display: inline-block;
  overflow-wrap: break-word;
  padding-left: 25px;
  position: relative;
}

.contact-cta > .row > [class^=span] > .rich-text p a::before {
  border-style: solid;
  border-width: 3px 3px 0 0;
  border-color: var(--online-cyan);
  content: "";
  display: inline-block;
  height: 5px;
  left: 0;
  margin-right: 1em;
  position: absolute;
  top: 0.5em;
  transform: rotate(45deg);
  vertical-align: top;
  width: 5px;
}

.contact-cta > .row > [class^=span] > .rich-text p a:focus {
  box-shadow: 0 0 0 3px var(--primary-purple);
  outline: none;
  text-decoration-line: none;
}

/* END Contact CTA pattern styles */

/* START Universal single product panel (USPP) styling */

/* apply standard bottom margin */
.featured-products-panel-single {
  margin-bottom: 34px;
}

/* remove erroneous sitemap rows */
.featured-products-panel-single #product > .row,
.featured-products-panel-single .row.sitemap {
  display: none;
}

/* Overwrite BS container styling */
.featured-products-panel-single #product .container {
  width: auto;
}

/*Set background colour of regular panels */
.featured-products-panel-single .product-table .row-container .product-panel {
  background-color: var(--grey-very-light);
}

/* Hide table header */
.featured-products-panel-single .product-table div[role=headergroup] {
  display: none;
}

/* set Flex */
.featured-products-panel-single .product-row {
  display: flex;
  flex-wrap: wrap;
}

/*Set header and button rows of table to full witdth */
.featured-products-panel-single .title-wrapper,
.featured-products-panel-single .button-wrapper {
  width: 100%;

}

/* balance width of rate and product info */
.featured-products-panel-single .cell.rate-wrapper {
  width: 40%;
}

/* .featured-products-panel-single .cell.rate-wrapper::after {
  content: "*";
  display: inline;
} */

.featured-products-panel-single .cell.product-info {
  width: 60%;
}

/* remove bottom margin from features list, and last item */
.featured-products-panel-single .product-info ul,
.featured-products-panel-single .product-info ul li:last-child {
  margin-bottom: 0px;
}

/* Add standard h3 styling to product title */
.featured-products-panel-single .title {
  font-size: 1.563rem;
  font-family: var(--heading-font)
}

/* Pull issue number in line with title */
.featured-products-panel-single .issue {
  display: inline;
  white-space: nowrap;
}

/* Increase font size of rate, apply brand font */
.featured-products-panel-single .rate {
  font-family: var(--heading-font);
  font-size: 4.76rem;
  line-height: 1;
  color: var(--online-blue)
}

/* Hide flag */
.featured-products-panel-single .product-table .product-panel.has-flag .status-flag {
  display: none;
}

@media(max-width:768px) {

  /* set rate and product info panels to full width */
  .featured-products-panel-single .cell.rate-wrapper,
  .featured-products-panel-single .cell.product-info {
    width: 100%;
  }

  /* set font size to 16px minimum - a11y */
  .featured-products-panel-single .product-table .product-panel .issue {
    font-size: 1rem;
  }

  /* left align list of features, remove bullets, align left */
  .featured-products-panel-single .cell ul {
    text-align: left;
    list-style-type: none;
    margin-left: 0px;
  }

  /* display features list inline */
  .featured-products-panel-single .cell ul li {
    display: inline;
  }

  /* present list of features as sentences */
  .featured-products-panel-single .cell ul li:after {
    content: ". ";
    display: inline;
  }

  /*centrally align content product row and cell */
  .featured-products-panel-single .product-table .product-panel .product-row,
  .featured-products-panel-single .product-table .product-panel .cell {
    text-align: center;
  }

  /* remove bottom margin from the product table */
  .featured-products-panel-single .product-table {
    margin-bottom: 0px;
  }

  /* set width to 100% and remove bottom margin */
  .featured-products-panel-single .product-table .row-container .product-panel {
    width: 100% !important;
    margin-bottom: 0px;
  }

  /* set product to 100% width on mobile, as well as any rich text immediately next to it (i.e. svg or link)*/
  .featured-products-panel-single #product,
  .featured-products-panel-single #product ~ .rich-text {
    width: 100% !important;
  }
}

/* USPP Centralised variant */

/* set max width and centralise panel */
.featured-products-panel-single.center .product-table .row-container .product-panel {
  max-width: 850px;
  margin: auto;
}

/* pull rate content to right, for balance */
.featured-products-panel-single.center .cell.rate-wrapper {
  text-align: right;
}

/* centralise copy of rate and button rows */
.featured-products-panel-single.center .title-wrapper,
.featured-products-panel-single.center .button-wrapper {
  text-align: center;
}

@media (max-width:768px) {

  /*centralise right-aligned rate on mobile */
  .featured-products-panel-single.center .cell.rate-wrapper {
    text-align: center;
  }
}

/* USPP Left aligned variant with link to right */

/* use flex to align items horizntally */
.featured-products-panel-single.has-link {
  display: flex;
  gap: 30px;
  align-items: center;
}

/*fix width of product panel */
.featured-products-panel-single.has-link #product {
  width: 60%;
}

/*set width of HTML panel next to product, align content, and remove the bottom margin */
.featured-products-panel-single.has-link #product ~ .rich-text {
  width: 40%;
  text-align: center;
  margin-bottom: 0px;
}

/*remove the top and bottom margins of anything within the HTML */
.featured-products-panel-single.has-link #product ~ .rich-text *:first-child {
  margin-top: 0px;
}

.featured-products-panel-single.has-link #product ~ .rich-text *:last-child {
  margin-bottom: 0px;
}

@media(max-width:979px) {

  /* set rate and product info cells to full width on smaller screens */
  .featured-products-panel-single.has-link .cell.rate-wrapper,
  .featured-products-panel-single.has-link .cell.product-info {
    width: 100%;
  }

}

@media(max-width:768px) {

  /* vertically align items on mobile */
  .featured-products-panel-single.has-link {
    flex-direction: column;
  }
}

/* USPP Billboard variant */

/* set background colour, font colour, and increase padding. Applied styling to wrapper, so that an illustration can be added via HTML component */
.featured-products-panel-single.billboard {
  background-color: var(--online-cyan);
  padding: 80px;
  color: var(--white);
  box-shadow: 0px 10px 10px -10px var(--black-tint-25);
}

/* removed background colour to support the above */
.featured-products-panel-single.billboard .product-table .row-container .product-panel {
  background-color: transparent;
}

/* remove margin from product table */
.featured-products-panel-single.billboard .product-table {
  margin: 0px;
}

/* increase font size for heading, to match H1 size */
.featured-products-panel-single.billboard .title {
  font-size: 3.052rem
}

/* Increased font size to minimum requirement for colour contrast */
.featured-products-panel-single.billboard .cell.rate-wrapper,
.featured-products-panel-single.billboard .product-table li,
.featured-products-panel-single.billboard .issue {
  font-size: 1.5rem;
}

/* adjust balance of rate and product cells, to cater for a larger rate */
.featured-products-panel-single.billboard .cell.rate-wrapper,
.featured-products-panel-single.billboard .cell.product-info {
  width: 50%;
}

/* set rate to huge :) */
.featured-products-panel-single.billboard .rate {
  font-size: 6.5rem;
  color: var(--white);
}

/* invert button styling and remove button margin */
.featured-products-panel-single.billboard a.btn {
  background-color: var(--white);
  border-color: var(--white);
  color: var(--grey-font);
  margin: 0;
}

/* remove padding for smaller screens */

@media(max-width:1999px) {

  /*reduce padding for smaller screens */
  .featured-products-panel-single.billboard {
    padding: 50px;
  }

  /* reduce heading size for smaller screens */
  .featured-products-panel-single.billboard .title {
    font-size: 2.441rem
  }

  /* reduce rate size for smaller screens */
  .featured-products-panel-single.billboard .rate {
    font-size: 5rem;
  }
}

@media(max-width:979px) {

  /* reduce title size for smaller screens */
  .featured-products-panel-single.billboard .title {
    font-size: 1.953rem
  }

  /*remove x-axis padding on smaller screens */
  .featured-products-panel-single.billboard .cell {
    padding: 20px 0px;
  }
}

@media(max-width:768px) {

  /* remove padding for smaller screens */
  .featured-products-panel-single.billboard {
    padding: 0px;
  }

  /* set rate and product to full width on mobile */
  .featured-products-panel-single.billboard .cell.rate-wrapper,
  .featured-products-panel-single.billboard .cell.product-info {
    width: 100%;
  }

  /* add padding to "footer" and button cell */
  .featured-products-panel-single.billboard .cell.title-wrapper,
  .featured-products-panel-single.billboard .cell.rate-wrapper,
  .featured-products-panel-single.billboard .cell.product-info {
    padding: 20px 20px 0 !important;

  }

  /* add padding to "footer" and button cell */
  .featured-products-panel-single.billboard .cell.button-wrapper {
    padding: 20px !important;

  }
}

/* USPP variant including image */

/* algn items side by side, and vertically centralise */
.featured-products-panel-single.has-image {
  display: flex;
  align-items: center;
}

/* remove standard bottom margin, and push image to right */
.featured-products-panel-single.has-image > .rich-text {
  margin: 0px;
  order: 2;
}

/* set max width of illustration */
.featured-products-panel-single.has-image svg {
  max-width: 300px;
  height: auto;
}

/* extra padding for gap between image and content */
.featured-products-panel-single.has-image #product .container {
  padding-right: 50px;
}

@media(max-width:1999px) {

  /*reduce width of image for smaller screens */
  .featured-products-panel-single.has-image svg {
    max-width: 200px;
  }

}

@media(max-width:979px) {

  /* remove flex, so image sits above content */
  .featured-products-panel-single.has-image {
    display: block;
  }

  /* remove right padding as image moved above  */
  .featured-products-panel-single.has-image #product .container {
    padding-right: 0px;
  }

  /*hide svg on smaller screens */
  .featured-products-panel-single.has-image svg {
    display: none;
  }
}

/* END Universal single product panel (USPP) styling */

/* START Updated quote pattern styles */

.quote img {
  border-radius: 50%;
}

.quote.large-image img {
  height: 150px;
  width: 150px;
}

.quote:not(.large-image) img {
  height: 80px;
  margin-bottom: 24px;
  width: 80px;
}

.quote blockquote {
  border-left: none;
  margin: 0;
  padding: 0;
}

.quote blockquote p {
  font-size: 21px;
  font-weight: 300;
  line-height: 1.5;
}

.quote .attribution {
  margin-bottom: 0;
  margin-top: 24px;
}

.quote .attribution:first-line {
  font-weight: 500;
}

.quote.center {
  text-align: center;
}

.quote.center::after {
  border-bottom: 4px solid var(--online-cyan);
  content: "";
  display: block;
  margin: 24px auto 0;
  width: 100px;
}

.quote.center img {
  margin-bottom: 24px;
}

@media only screen and (max-width: 979px) {
  .quote.center blockquote {
    text-align: left;
  }
}

.quote:not(.center) {
  border-left: 6px solid var(--online-cyan);
  padding-left: 24px;
}

@media (max-width: 767px) {
  .quote:not(.center).large-image img {
    margin-bottom: 24px;
  }
}

@media (min-width: 768px) {
  .quote:not(.center).large-image {
    padding-left: 198px;
    position: relative;
  }

  .quote:not(.center).large-image img {
    left: 24px;
    position: absolute;
    top: 7px;
  }
}

.quote.well {
  padding: 24px;
}

.quote.well.center::after {
  content: none;
}

.quote.well:not(.center) {
  border-top: none;
}

@media (min-width: 768px) {
  .quote.well:not(.center).large-image img {
    top: 24px;
  }
}

.quote-group .quote.center blockquote {
  text-align: left;
}

@media (max-width: 767px) {
  .quote-group .quote + .quote {
    margin-top: 48px;
  }
}

@media (min-width: 768px) {
  .quote-group {
    display: flex;
    gap: 30px;
  }

  .quote-group .quote:not(.well):not(.center) {
    border-left: 0;
    padding-left: 0;
  }

  .quote-group .quote:not(.well):not(.center) + .quote:not(.well):not(.center) {
    border-left: 4px solid var(--online-cyan);
    padding-left: 24px;
  }
}

/* END Updated quote pattern styles */

/* A/B test: Hide all links at the top of the page apart from the logo and log in/sign up
button */
body.agg-product-test .preheader {
  display: none;
}

body.agg-product-test .header .header-links ul.inline {
  display: none;
}

body.agg-product-test .main-nav {
  display: none;
}

body.agg-product-test .breadcrumb {
  display: none;
}

body.agg-product-test .preheader + .header {
  /* Reinstate blue border as we've hidden the element its normally attached to.
  (This is simpler than keeping .main-nav 'visible' but hiding its contents.) */
  border-bottom: 10px solid var(--online-cyan);
}

@media (max-width: 767px) {
  body.agg-product-test #maincontent > .row > .span12 > .rich-text {
    /* Remove the extra whitespace that appears at the top of the content */
    display: none;
  }
}

@media (min-width: 768px) {
  body.agg-product-test .preheader + .header {
    /* Add more space below logo when date 'Since 1853' is visible */
    padding-bottom: 10px;
  }

  body.agg-product-test .preheader + .header .header-links {
    /* Vertically centre the login button */
    position: relative;
    top: 7px;
  }
}