:root {

/* Primary colours */
	
  --purple: #7F20FA; 
  --darkPurple: #2c0e54;
  --green: #19c367;
  --beige: #FBF3EC;
  --darkGrey: #484848;
  --lightGrey: #f3f3f3;
  --midGrey: #eeeeee;
  --grey: #dedede;
  --lightBlue: #e2f4f8;
	
/* Secondary colours */  
  --pink: #c71866;
  --teal: #0fa5a0;
  --orange: #FFA801;
  
  --black: #000000;
  --white: #FFFFFF;
  --transparent: 0, 0, 0, 0;
  
/* Container colours */
  --lightPurple: #f5eaff;
  --lightPurpleBorder: #e9d1ff;  
  --lightGreen: #e4f7e7;
  --lightGreenBorder: #d0f1d6;
  --lightTeal: #ecf6f5;
  --lightTealBorder: #dbeeec;
  --lightPink: #ffdae4;
  --lightPinkBorder: #ff8db1;
  
/* Fonts */  
  --bodyFont: 'Figtree';
  --headingFont: 'Figtree';

/* Messaging */
  --warning: #e3950b;
  --warningContainer: #fff6e9;
  --alert: #e31173;
  --alertContainer: #ffedf2;
  --success: #207942;
  --successContainer: #ebf5ed;
  --error :#E31173;
  --errorContainer: #FFEDF2;
}

/* .site-header .logo img
{
    content: url("-/media/29b585774b9241ef9f2e91921f4e84d5.ashx");
} */

@media screen and (min-width: 769px) {
    .site-header .logo img {
       	height: 53px;
		width: 203px;
    }
}

html {
  scroll-behavior: smooth;
}

body {
    line-height: 1.2;
}

html, body, a.link, ul.links li a, 
.responsive-table-2x__cell--heading,
button.handorgel__header__button {
    font-family: var(--bodyFont), Arial ,sans-serif;
}

body, html {
    height: 100%;
    background-color: #fff;
    -webkit-font-smoothing: antialiased;
    color: var(--darkGrey);
}

/*** HEADINGS ***/

h1, 
.intro-block h1 {
    font-size: 4rem;
	color: var(--purple);
	font-family: var(--headingFont), Arial, sans-serif;
    font-weight: 900;
	text-transform: none;
    padding: 20px 0;
}


h2,
.intro-block h2 {
    font-size: 3.5rem;
	color: var(--purple);
	font-family: var(--headingFont), Arial sans-serif;
    font-weight: 900;
	text-transform: none;
    padding: 20px 0;
}

h3,
.intro-block h3 {
    font-size: 2.5rem; 
	color: var(--darkPurple);
	font-family: var(--headingFont), Arial ,sans-serif;
	font-weight: 700;
	padding: 20px 0;
}


h4,
.intro-block h4 {
    font-size: 2rem;
	color: var(--darkPurple);
	font-family: var(--headingFont), Arial ,sans-serif;
	font-weight: 700;
	padding: 10px 0;
}

h5,
.intro-block h5 {
    font-size: 1.9rem;
    color: var(--darkPurple);
	font-family: var(--headingFont), Arial ,sans-serif;
	font-weight: 600;
	padding: 8px 0;
}

h6, 
.intro-block h6 {
    font-size: 1.8rem; 
    color: var(--darkPurple);
	font-family: var(--headingFont), Arial ,sans-serif;
	font-weight: 600;
	padding: 8px 0;
}

.headingCenter, 
.heading-center {
	text-align: center;
}	

.heading-white {
	color: var(--white);
}

/*** BODY TEXT ***/

/* Standard text */

p,
.intro-block p,
.intro-block li,
.intro-block i,
#tabs.key-features li,
ol:not(.bare-list) li, 
ul:not(.bare-list) li {
    font-size: 1.7rem;
    font-weight: 500;
    line-height: 1.6;
    margin: 0 0 14px;
    color: var(--darkGrey);
	font-family: var(--bodyFont), Arial, sans-serif;
}

.table-wrap {
    margin-bottom: 20px
}

table {
    color: var(--darkGrey);
    width: 100%;
    font-size: 1.7rem;
    text-align: left
}

table caption {
    text-align: left;
    padding-bottom: 5px
}

.site-search__input {
	font-size: 1.7rem;
	font-weight: 500;
}

ol:not(.bare-list) li, 
ul:not(.bare-list) li {
    margin-left: 20px;
    margin-bottom: 10px;
	color: var(--darkGrey);
}

ol:not(.bare-list), 
ul:not(.bare-list) {
	color: var(--darkGrey);
}

p i {
	font-style: italic;
}

p.small {
	font-size: 1.5rem;
	margin: 0;
}

a {
    font-size: 1.7rem;
    font-weight: 500;
    line-height: 1.6;
    text-underline-position: under;
}

a:hover {
    color: var(--purple)
}

a.underline {
	font-size: 1.7rem;
    font-weight: 500;
    line-height: 1.6;
    text-decoration-color: var(--purple);
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}

.breadcrumbs a, 
.breadcrumbs span {
	font-size:1.6rem;
}

.text-light {
	color: var(--white);	
}

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

.wrapper {
    max-width: 1140px;
}

/* Other elements that still inherit VAG Rounded font - change to use body font */

.site-search__input,
.form__input-group input[type=email], 
.form__input-group input[type=password], 
.form__input-group input[type=text], 
.form__btn,
.sc-form[class] input[type=submit],
.form__input-group select, 
.form__input-group textarea,
.result-panel .result-headline,
.inactive span, 
.infotip a, 
.tooltip a,
.wbbs-responsive--table__2axis .responsive-table-2x__cell--heading,
#tabs.mortgages ul li,
#tabs.savings ul li,
label,
.sc-form input[type=date], 
.sc-form input[type=email], 
.sc-form input[type=number], 
.sc-form input[type=password], 
.sc-form input[type=tel], 
.sc-form input[type=text], 
.sc-form select, 
.sc-form textarea,
.cta-block .h3 span, 
.cta-block h3 span, 
.cta-list .h3 span, 
.cta-list h3 span,
#tabs ul.tab-links li,
.savings-interest-rates table .rate,
.savings-interest-rates table .perc,
.cta-block.green p, .cta-list.green p,
.branch-finder-search__search-input-container input
{
	font-family: var(--bodyFont), Arial, sans-serif;
}

.linear-list li a {
    background: #fff;
    color: var(--darkGrey);
    font-size: 1.7rem;
    text-decoration: none;
    display: block;
    border-radius: 40px;
    padding: 10px 40px 10px 25px;
}

.intro-block * {
    color: var(--darkGrey);
}

span.material-icons,
span.material-icons-round,
span.material-icons-outline,
span.material-icons-two-tone,
span.material-icons-sharp {
	font-family: 'Material Icons';	
	vertical-align: middle;
}

/*** BUTTONS AND LINKS ***/

/* Purple button */

.btn {
  align-items: center;
  background: var(--purple);
  border: 0;
  border-radius: 3px;
  box-shadow: #b2b2b273 0 15px 30px -5px;
  box-sizing: border-box;
  color: var(--white);
  display: flex;
  font-family: var(--bodyFont);
  font-size: 1.7rem;
  justify-content: center;
  line-height: 1em;
  /* max-width: 100%; */
  width: fit-content;
  padding: 12px 18px;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  /* white-space: nowrap; */
  cursor: pointer;
}

.btn:active,
.btn:hover,
.btn:focus {
	outline: 0;
	opacity: 0.8;
	background: var(--purple);
	color: var(--white) !important;
}

/* Purple fullwidth button */

.btn-fw {
  align-items: center;
  background: var(--purple);
  border: 0;
  border-radius: 3px;
  box-shadow: #b2b2b273 0 15px 30px -5px;
  box-sizing: border-box;
  color: var(--white);
  display: flex;
  font-family: var(--bodyFont);
  font-size: 1.7rem;
  justify-content: center;
  line-height: 1em;
  max-width: 100%;
  padding: 12px 18px; 
  margin: 2rem 0;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  /* white-space: nowrap; */
  cursor: pointer;
}

.btn-fw:active,
.btn-fw:hover,
.btn-fw:focus {
	outline: 0;
	opacity: 0.8;
	background: var(--purple);
	color: var(--white) !important;
}

/* Purple outline button */

.btn-outline {
  align-items: center;
  background: var(--white);
  border: 2px solid var(--purple);
  border-radius: 3px;
  box-shadow: #b2b2b273 0 15px 30px -5px;
  box-sizing: border-box;
  color: var(--purple);
  display: flex;
  font-family: var(--bodyFont);
  font-size: 1.7rem;
  justify-content: center;
  text-align: center;
  line-height: 1em;
  /* max-width: 100%; */
  width: fit-content;
  padding: 12px 18px; 
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  /* white-space: nowrap; */
  cursor: pointer;
}

.btn-outline:active,
.btn-outline:hover,
.btn-outline:focus {
	outline: 0;
	opacity: 0.8;
	background: var(--purple);
	color: var(--white) !important;
}

/* Purple outline fullwidth button */

.btn-outline-fw {
  align-items: center;
  background: var(--white);
  border: 2px solid var(--purple);
  border-radius: 3px;
  box-shadow: #b2b2b273 0 15px 30px -5px;
  box-sizing: border-box;
  color: var(--purple);
  display: flex;
  font-family: var(--bodyFont);
  font-size: 1.7rem;
  justify-content: center;
  line-height: 1em;
  max-width: 100%;
  padding: 12px 18px; 
  margin: 2rem 0;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  /* white-space: nowrap; */
  cursor: pointer;
}

.btn-outline-fw:active,
.btn-outline-fw:hover,
.btn-outline-fw:focus {
	outline: 0;
	opacity: 0.8;
	background: var(--purple);
	color: var(--white) !important;
}

/* Log in Button */

.btn--login {
	background: var(--purple) !important;
	color: var(--white);
}

.btn--login:hover,
.btn--login:active,
.btn--login:focus {
	background: var(--purple) !important;
	color: var(--white) !important;
	outline: 0;
	opacity: 0.8;
}

.btn-download:before {
	font-family: 'Material Symbols Rounded';
    content: '\f090';
    color: var(--purple);
    font-size: 2.5rem;
    vertical-align: middle;
    margin-right: 1rem;
	display: inline-block;
}


/* Add icon to log in button */

a.btn--login:before {
	/*font-family: 'Material Symbols Rounded' !important; */
    /* content: "\e897" !important; */
    margin-right: .5rem;
    font-weight: 500;
    font-size: 2rem;
}
	
/* Override other button styles */

.btn.btn--grey:hover,.btn.btn--lavender,
input[type=submit].btn--grey:hover {
    background: var(--purple);
    color: var(--white);
}	

.btn.btn--lavender:hover {
    background: var(--purple);
    color: var(--white);
	opacity: 0.8;
}

@media screen and (max-width: 768px) {
    .site-header .btn--login {
        margin: 0px;
		top: 0;
    }
}

@media screen and (min-width: 769px) {
    .site-header .btn--login {
        margin: 0px;
		width: fit-content;
		transition: background 0.2s ease,color 0.2s ease,box-shadow 0.2s ease;
		padding: 12px 20px;
		top:8px;
    }
}

/* Branch Finder button */

.branch-finder-search__form .btn:hover,
.branch-finder-search__form input[type=submit].btn:hover {
    background: var(--purple);
    color: var(--darkGrey);
}

.btn-fit-content {
	width: fit-content;
}

.btn-center {
	margin:auto;
}

/* Site search bar */

.site-search__fields {
    background-color: var(--lightGrey);
    border-radius: 3px;
    padding-right: 3px;
}

/*
.site-search {
	order: 0;
}

.site-search input#q {
	height: 45px;
}

@media screen and (max-width: 769px) {
    .site-search {
        border-bottom: 3px solid var(--purple);
    }
}

@media screen and (min-width: 1120px) {
	.site-search input#q {
		max-width: 350px;
		width: 350px;
		height: 45px;
	}
}

@media screen and (min-width: 850px) and (max-width: 1119px) {
	.site-search input#q {
		max-width: 350px;
		width: 250px;
		height: 45px;
	}
	
}

@media screen and (min-width: 941px) and (max-width: 1000px) {
	.site-search input#q {
		max-width: 350px;
		width: 250px;
		height: 45px;
	}
	
} */

/* stack Branch finder and contact us */

@media screen and (min-width: 769px) and (max-width: 940px) {

	.actions ul.bare-list {
		display: inline-grid;
		flex-direction: row;
		bottom: 20px;
		right: 0px;
	}
	
	.site-search input#q {
		max-width: 350px;
		width: 250px;
		height: 45px;
	}
	
}

@media screen and (min-width: 768px) and (max-width: 814px) {
	nav.actions {
		display: inline-grid;
	}
} 

/* div to house single button */

/* .singleButton {
	margin: 0 auto;
	padding: 2rem 0;
} */

/* Container for two side by side buttons */

.button-container {
	display: flex;
}

.button-container a:first-of-type,
.button-container button:first-of-type {
	margin-right:1.5rem;
}

/* Purple link */

.link-purple {
	color: var(--purple);
	text-decoration: underline;
        text-underline-position: under;
}

.link-purple:after {
content: initial;
}

/* .link-purple:after {
	font-family: 'Material Icons';
	content: "  \e941";
	color: var(--purple);
	font-size:2em;
	vertical-align:middle;
} */

/* Dark purple link */

.link-dark {
	color: var(--darkPurple);
	text-decoration: none;
}

.link-dark:after {
	font-family: 'Material Icons';
	content: "  \e941";
	color: var(--darkPurple);
	font-size:2em;
	vertical-align:middle;
}

/* White link */

.link-white {
	color: var(--white);
	text-decoration: none;
}

.link-white:after {
	font-family: 'Material Icons';
	content: "  \e941";
	color: var(--white);
	font-size:2em;
	vertical-align:middle;
}

/* Download links */

@media screen and (min-width: 769px) {	
	ul.download-links {
		display: grid;
		grid-template-columns: auto auto;
		justify-content: start;
		column-gap: 2rem;
	}
}

@media screen and (max-width: 768px) {	
	
	ul.download-links {
		display: flex;
		flex-direction: column;
	}
}


ul.download-links li {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0 !important;
    background: var(--beige);
    width: fit-content;
    padding: 2px 25px 1px 20px;
    border-radius: 100px;
    vertical-align: middle;
}

ul.download-links li:before {
    font-family: 'Material Symbols Rounded';
    content: '\f090';
    color: var(--purple);
    font-size: 2.5rem;
    vertical-align: middle;
    margin-right: 1rem;
}

ul.download-links li a {
    color: var(--purple);
	text-decoration:none;
}

ul.download-links li a:hover, ul.download-links li a:active  {
	text-decoration: underline;
	text-underline-position: under;
}

ul.download-links a:hover {
    text-decoration: underline;
    text-underline-position: under;
    text-decoration-color: var(--purple);
}


/* Content cards */

.card-container {
  width: 100%;
  margin: auto;
}

.card-inline-button .card-body {
	display: flex;
    margin: 0 2rem;
    align-items: center;
    justify-content: space-between;
}

.card-container .row {
  display: flex;
  justify-content: space-between;
  flex-flow: wrap;
}

.card {
	margin-bottom: 30px;
	background: var(--white);
	border: 2px solid var(--midGrey);
	border-radius: 3px;
}

.card-blank {
    border: 0;
    padding: 0 !important;
}

@media screen and (max-width: 1000px) {
    .card-blank {
        margin-bottom: 0 !important;
    }
}

.card-beige {
	background: var(--beige);
	border: 0;
}

.card-grey {
	background: var(--lightGrey);
	border: 0;
}

.card-green {
	background: var(--lightGreen);
	border: 0;
}

.card-pink {
	background: var(--lightPink);
	border: 0;
}

.card-1 {
	width: 100%;
	padding:2.5rem;
}

.card-2 {
	width: 48.5%;
	padding: 3rem;
}

.card-3 {
	width: 31.5%;
	padding: 3rem 2rem;
}

.card-4 {
	width: 23%;
	padding: 2rem;
}

.card-img {
	padding: 0;
	border: 0;
}

.card-6 {
	width: 15%;
	padding: 2rem;
}

.card-guide {
    border: 2px solid var(--lightGrey);
    border-radius: 3px;
}

.card-guide .card-header {
    padding: 0px 2rem;
}

.card-guide .card-body {
    padding: 0px 2rem 20px;
}

.reading-time {
    font-size:1.5rem;
    font-weight: 600;
}

.reading-time span {
    color: var(--purple);
    font-size:1.7rem;
}

.guide-reading-time {
width: fit-content;
border-radius: 3px;
}

.card-2 img.icon {
	width: 35%;
	}

.card-3 img.icon {
	width: 40%;
	}

.card-4 img.icon {
	width: 60%;
	}

.card-contact {
	padding: 20px;
}	

.card-accreditation {
	padding: 20px;	
	text-align: center;
}

.card-accreditation a {
	text-align: center;
}

.card-accreditation img {
	height: 175px;
	padding: 1rem;
}

@media screen and (max-width: 1000px) {
  .card-2 {
    width: 48%;
  }
  
  .card-2 img.icon {
	width: 30%;
  }

  .card-3 {
    width: 31%;
  }
  
  .card-3 img.icon {
	width: 50%;
  }
  
  .card-4 {
    width: 48%;
  }
  
  .card-4 img.icon {
	width: 30%;
  }
}
@media screen and (max-width: 620px) {
  .card-container {
    width: 100%;
  }
  
  .card-inline-button .card-body {
	display: block;
    margin: 1.5rem;
}

  .card {
    width: 98%;
  }
  
  .card img.icon {
		width: 30% !important;	
	}
}

.card-icon .icon {
	width: 60% !important;
	margin-bottom: 2rem;
}

.card-icon h3 {
	text-align: center;
}

/* Alerts */

/* .alert-warning {
    color: var(--black);
    background-color: var(--warningContainer);
} */

/* .alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 0px solid transparent;
    border-radius: 4px;
} */

.alert-box .alert-content p {
	margin: 0;
}

.alert-content .btn {
	margin: 1.5rem 0 0 0;
}

@media screen and (max-width: 768px) {
    .info-box,
	.warning-alert-box,
	.error-alert-box,
	.info-alert-box,
	.hint-alert-box,
	.success-alert-box	{
		margin: 2%;
    }
}

.warning-alert-box {
	background-color: var(--warningContainer);
	border-radius: 3px;
	padding: 2rem;
	margin: 0 0 2rem;
}

.error-alert-box {
	background-color: var(--errorContainer);
	border-radius: 3px;
	padding: 2rem;
	margin: 0 0 2rem;
}

.info-alert-box {
	background-color: var(--lightPurple);
	border-radius: 3px;
	padding: 2rem;
	margin: 0 0 2rem;
}

.success-alert-box {
	background-color: var(--successContainer);
	border-radius: 3px;
	padding: 2rem;
	margin: 0 0 2rem;
}

.warning-alert-box strong,
.error-alert-box strong,
.info-alert-box strong,
.hint-alert-box strong,
.success-alert-box strong {
	font-size: 2rem;
}

.warning-alert-box span.material-icons-round {
    color: var(--warning);
    font-size: 2.5rem;
}

.error-alert-box span.material-icons-round {
    color: var(--error);
    font-size: 2.5rem;
}

.info-alert-box span.material-icons-round {
    color: var(--purple);
    font-size: 2.5rem;
}

.hint-alert-box span.material-icons-round {
    color: var(--purple);
    font-size: 2.5rem;
}

.success-alert-box span.material-icons-round {
    color: var(--success);
    font-size: 2.5rem;
}

.warning-alert-box .icon,
.error-alert-box .icon,
.info-alert-box .icon,
.hint-alert-box .icon,
.success-alert-box .icon {
    max-width: fit-content;
}

.alert-box .alert-content {
	margin: -2.7rem 0 0 4rem;
}

.alert-box .closebtn {
  margin-left: 15px;
  margin-top: -15px;
  font-weight: bold;
  float: right;
  font-size: 28px;
  line-height: 28px;
  cursor: pointer;
  transition: 0.3s;
  background: none;
  color: var(--darkGrey);
}

.alert-box .closebtn:hover {
  opacity: 0.8;
}

/* Grey blocks */

.grey-panel {
	background: var(--lightGrey);
}

/* Tables */

.table-wrap {
    margin-bottom: 20px;
}

table {
    color: var(--darkGrey);
    width: 100%;
    font-size: 1.7rem;
    text-align: left;
}

table caption {
    text-align: left;
    padding-bottom: 5px;
}

/*** ACCORDIONS ***/

.handorgel__header--open .handorgel__header__button {
    background-color: var(--lightGrey);
}

button.handorgel__header__button {
	font-size: 1.8rem;
	font-weight: 500;
}

.handorgel {
    display: block;
    width: 100%;
    border: 1px solid var(--grey);
    border-top: none;
}

.handorgel__header__button {
    display: block;
    width: 100%;
    padding: 20px 50px 20px 24px;
    border: none;
    border-top: 1px solid var(--grey);
    margin: 0;
    background-color: var(--lightGrey);
    border-radius: 0;
    color: inherit;
    cursor: pointer;
    font-size: inherit;
    text-align: left;
    -webkit-transition: background-color .2s ease;
    transition: background-color .2s ease;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.handorgel__content {
    border-top: 1px solid var(--grey);
}

/* Drop down arrows */
.handorgel__header__button:after {
    background-image: none;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    width: 30px;
    height: 30px;
    position: absolute;
    right: 20px;
    top: 50%;
    margin-top: -10px;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    font-family: 'Material Icons';
    content: '\e5df' !important;
    font-size: 28px;
}

/* Cookie Notice */

.cookie-notice .cta-wrapper {
    display: flex;
}

.cookie-notice .btn:focus, 
.cookie-notice .btn:hover {
    background-color: var(--white);
    color: var(--purple) !important;
	opacity: 1;
}

/*** HEADER ***/

/* Reposition Find a Branch, Contact us, Search bar */

@media screen and (min-width: 769px) {
	
	.actions-wrapper {
        position: absolute;
        z-index: 1;
        top: -40px;
        right: 160px;
    }
	
	.actions li a {
		color: var(--darkGrey);
		font-size:1.7rem;
		
	}
	
	.actions, .actions ul {
		position: relative;
		bottom: 2px;
	}
}

/* Header icons */

@media screen and (min-width: 770px) {
    .actions li:before {
        left: 20px;
        bottom: 3px;
        width: 20px;
        height: 20px;
    }
}

/* Branch finder 

.actions__locator:before {
    background: url(-/media/5ccc7f24afb24b61b74f6515ec837620.ashx);
} 

Contact us

.actions__contact:before {
    background: url(-/media/e5cb5410dae04dfe839320fa5e668787.ashx?);
} 

/* Search 

.site-search__btn {
	background-image: url(-/media/48b1ec0904af479b9321ddade347ac95.ashx);
	background-size: 25px auto;
} */


/* Menu */

@media screen and (min-width: 770px) {
	
	.nav-wrapper {
        background-color: var(--lightGrey);
    }
	
	.flyout {
		display: none;
		overflow: hidden;
		background: var(--white);
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: -1;
		border: none;
		box-shadow: 0 4px 14px 0 rgb(0 0 0 / 10%);
		border-radius: 3px;
		padding: 0 0 20px;
	}

	.flyout__nav li {
		list-style: none;
		position: relative;
		padding: 4px 0px 2px;
	}

	.flyout__nav li a {
        text-decoration: none;
        font-size: 1.7rem;
        font-weight: 500;
        color: var(--darkPurple);
    }


	.flyout__nav li:after {
		font-family: 'Material Icons';
		font-size: 2rem;
		font-weight: bold;
		color:  var(--green);
		content: "\e5cc";
		background: none;
		/*background: url(https://www.westbrom.co.uk/wbbsAssets/img/icon-arrow-2.svg); */
		position: absolute;
		right: 5px;
		top: 6px;
		width: 8px;
		height: 12px;
		left: unset;
	}
	
	.flyout__heading {
		color: var(--darkGrey);
	}

	.nav-main>ul>li.has-flyout.has-focus a, 
	.nav-main>ul>li>a:hover {
        color: var(--darkPurple);
    }
	

    .flyout__nav li a:focus, .flyout__nav li a:hover {
        text-decoration: underline;
        color: var(--purple) !important;
    }
	


	/* Move chevron from left to right */	
	.flyout__cta a {
		padding-left: 0;
	}
	
	/* Hide the chevron */
	.flyout__cta:before, .flyout__cta:after {
		display: none;
	}
	
	.flyout__cta:before, .flyout__cta:after {
		left: 310px;
	}

	/* Flyout heading */	
	.flyout__cta a {
		color: var(--purple) !important;
		font-size: 2.5rem;
		font-weight:800;
	}
	
	p.flyout__cta a:after {
    font-family: 'Material Symbols Rounded';
    content: '\e5e1';
    font-size: 2.2rem;
    vertical-align: middle;
    margin: 0 5px;
}
	
	/* Active menu item */	
	.nav-main>ul>li.has-flyout.has-focus {
		background: var(--white);
	}
	
	.nav-main>ul>li>a {
		color: var(--darkGrey);
	}
	
	.nav-main>ul>li.has-flyout>a:after {
    content: "";
    position: absolute;
    top: 30px;
    right: 9px;
    height: 5px;
    width: 10px;
    background: url(/wbbsAssets/img/triangle-down.svg) no-repeat 0 0;
    background-size: 100% 100%;
	}
}

/* Mobile */

/*.actions__search:before {
    background: url(-/media/48b1ec0904af479b9321ddade347ac95.ashx);
} */

@media screen and (max-width: 769px) {
    .flyout .back:after {
        background-image: none;
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        right: auto;
        left: 30px;
        font-family: 'Material Icons';
        content: '\e5df';
        color: var(--green);
        font-size: 32px;
        top: 45px;
    }
}	

@media screen and (max-width: 769px) {
	
	.nav-main>ul>li:first-child a:before {
		background: none;
	}
	
	.actions li a {
        color: var(--darkGrey);
		background-color: var(--lightGrey);
		padding: 6px
    }
	
	.nav-toggle {
		background-color: var(--lightGrey);
	}
	
	.nav-toggle .nav-toggle__text, .nav-toggle p {
		color: var(--darkGrey);
	}
	
	.nav-toggle__burger, .nav-toggle__burger:after, .nav-toggle__burger:before {
        background: var(--green);
    }
	
	.nav-main .flyout__cta a {
        background: var(--white);
        color: var(--purple);
        font-weight: 700;
    }

    .nav-main .flyout__cta a:hover {
        color: var(--purple);
    }

	
	.flyout__heading--active {
        color: var(--darkGrey);
    }
	
	.nav-main li a {
	color: var(--darkPurple);
	}
	
	.nav-main>ul {
        padding: 40px 0;
        border-bottom: 3px solid var(--green);
    }
	
}

/* Hide the sub navigation */

div.sub-nav {
	display: none;
}

/* Breadcrumbs */

li.breadcrumbs__item {
	background-color: var(--lightGrey);
    color: var(--darkGrey);
    border-radius: 3px;
	margin-right: 0.5rem;
}

.breadcrumbs__item:after, 
.breadcrumbs__item:before {
    display: none;
}

li.breadcrumbs__item:last-of-type {
    background: var(--lightTeal);
}

.breadcrumbs a:hover {
    text-decoration: none;
    background: var(--lightTeal);
}

@media screen and (max-width: 1059px) {
    li.breadcrumbs__item:last-of-type {
        margin-top: 0.75rem;
    }
}	

/* Page headers */

.intro {
	padding: 0px;
}

/* Page Intro Hero Banners */

@media screen and (min-width: 769px) { 

	.banner {
		/* min-height: 550px; */
		clip-path: polygon(0% 0%, 100% 0, 100% 85%, 0 100%);
	}

	.banner-item {
		background: hsla(0,0%,100%,.95);
		padding: 25px;
		border-radius: 3px 3px 3px 3px; /* 3px 140px 3px 3px; */
		max-width: 480px; /* 560px */
	}

   .banner-item__title {
		font-size: 4.5rem;
		line-height: 5rem;
		color: var(--purple);
    }

    .banner-item__tagline {
        color: var(--darkPurple);
        font-size: 2rem;
		margin: 10px auto;
    }

    .banner-item__text {
        font-size: 1.7rem;
        color: var(--darkGrey);
		padding: 1rem 0;
    }
}

.wbbs-banner__text p {
	font-size: 1.7rem;
}

@media screen and (max-width: 768px) {
	
	.banner-item {
		background: var(--beige);
	}

   .banner-item__title {
		font-size: 4rem;
		line-height: 4rem;
		color: var(--purple);
    }

    .banner-item__tagline {
        color: var(--darkPurple);
		display: block;
		margin: 15px 0;
		font-size: 2rem;
		font-weight: 600;
    }

    .banner-item__text {
        font-size: 1.7rem;
        color: var(--darkGrey);
		padding: 1rem 0;
    }

	.intro__left {
	width: 100%;
	margin-left:20px;
	}

	.intro__right {
	width: 100%;
	margin-right:20px;
	}
	
	.wbbs-banner__text p {
	color: var(--darkPurple);
	font-size: 1.9rem;
	}
}

@media screen and (min-width: 769px) {
    .banner-item {
        border-radius: 3px; /* 3px 140px 3px 3px; */
    }
}

/* Minimal intro banners */

@media screen and (min-width: 769px) { 

	.banner-minimal {
		/* min-height: 550px; */
		clip-path: polygon(0% 0%, 100% 0, 100% 85%, 0 100%);
	}

	.banner-minimal .banner-item {
		background: transparent;
		padding: 100px 0;
		max-width: 560px; /* 480px */
	}

   .banner-minimal .banner-item__title {
		font-size: 6rem;
        line-height: 6rem;
        color: var(--white);
        text-shadow: 5px 5px 13px rgba(103, 103, 103, 0.41);
    }

}

.wbbs-banner__text p {
	font-size: 1.7rem;
}

.banner-minimal {
    background-size: contain;
    background-repeat: no-repeat;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    text-size-adjust: none
}

@media screen and (min-width: 769px) {
    .banner-minimal {
        background-size: cover;
    }
}

@media screen and (max-width: 768px) {
	
	.banner-minimal .banner-item {
		background: var(--beige);
	}

}


/* Breadcrumbs in hero banner */

.banner .wrapper .breadcrumbs {
    padding: 0px 0 20px 0;
}

/*** SECTION BACKGROUNDS ***/

.bg-white {
	background-color: var(--white);
	padding: 20px 0;
}

.bg-grey {
	background-color: var(--lightGrey);
	padding: 30px 0;
}

.bg-teal {
	background-color: var(--lightTeal);
	padding: 30px 0;
}

.bg-purple {
	background-color: var(--lightPurple);
	padding: 30px 0;
}

.bg-beige {
	background-color: var(--beige);
	padding: 30px 0;
}

.bg-green {
	background-color: var(--lightGreen);
	padding: 30px 0;
}

.bg-dark {
	background-color: var(--darkPurple);
	padding: 30px 0;
}


/*** CONTAINERS ***/

/* Featured Sections */

/* .featureSection {
    margin-bottom: 30px;
}

.featureSection:after {
    content: "";
    display: table;
    clear: both;
}

.featureSectionContent,.featureSectionImage {
    float: left;
}

.featureSectionImage {
    width: 55%;
    height: 350px;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.featureSectionContent {
    width: 50%;
    min-height: 320px;
    margin: 30px 0 0 -5%;
    padding: 40px;
    background: var(--green);
}

.featureSectionContent h3, .featureSectionContent h4 {
    color: #282828;
    font-size: 3rem;
    line-height: 1.4;
    margin-bottom: 20px;
}

.featureSectionContent p {
    color: #282828;
    font-size: 2rem;
    line-height: 1.4;
    margin-bottom: 20px;
}

.featureSectionContent a:after {
    content: "";
    display: block;
    position: absolute;
    width: 18px;
    height: 18px;
    right: 10px;
    top: 10px;
    background-image: url(../img/icon-arrow-2.svg);
    background-size: contain;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.featureSectionContent a:hover:after {
    background-image: url(../img/icon-arrow-4.svg);
}

@media screen and (max-width: 769px) {
	
	.featureSection {
		margin-bottom: 0;
	}
	
	.featureSectionContent {
		width: 100%;
        min-height: auto;
        margin: 0;
        padding: 40px 20px;
	}
	
	.featureSectionImage {
		width: 100%;
	}
} */

/* Featured items - 3 columns */


.feature-item-container {
	display: inline-block;
}

.feature-item {
  float: left;
  width: 31%;
  background: var(--white);
  border-radius:3px;
}

.feature-item img {
	width:100%;
}

@media screen and (min-width: 768px) {
	.feature-item:first-of-type {
		margin: 1% 1% 1% 0;
	}
	
	.feature-item:nth-child(2) {
		margin: 1%
	}
	
	.feature-item:last-of-type {
		margin: 1% 0 1% 1%;
	}
}

/* Responsive - when the screen is less than 768px wide, make the columns stack */

@media screen and (max-width: 768px) {
  .feature-item {
    width: 98%;
	margin: 10px 1%;
  }
}

main {
	margin-top: 20px;
}


.cta--primary__content {
	border-radius: 3px;
	background: var(--lightGrey);
}

.cta--full-width {
	width:100%;
	padding: 0px;
	margin-top:10px;
}

/* Latest News Block */

/* Latest news */

.latest-news-block {
	display: table;
	width: 100%;
	text-align: center;
	margin-bottom:20px;
}

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

	.news-item {
		width: 31%;
	}
	.news-item img {
		width: 100%;
	}
	
	.news-item:first-of-type {
		margin: 1% 1% 1% 0;
	}
	
	.news-item:nth-child(2) {
		margin: 1%
	}
	
	.news-item:last-of-type {
		margin: 1% 0 1% 1%;
	}

} 

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

	.news-item {
		width: 98%;
        margin: 2% 1% !important;
    }

	.news-item img {
		width: 98% 
	}

} 

.news-item {
	display: table-cell;
	float: left;
	border-radius: 3px;
	text-align:left;
}

.news-item h3 {
	text-align: left;
}

.news-item a {
	text-decoration: none;
}

.news-item a:hover {
	text-decoration: underline;
}

.news-item:hover h4 {
    color: var(--purple);
}

/*** CONTACT US SUBFOOTER ***/

.subfooter-contact .columns {
	align-items: center;
}

/* Telephone Number */

.tel-number {
    font-size: 3.5rem;
	text-decoration: none;
    font-weight: 800;
    color: var(--purple);
}

/* List of links */


.link-list-item a,
a .link-list-item {
    text-decoration: none;
    font-size: 1.8rem;
	font-weight: 500;
}

.link-list-item a:hover
/* .link-list-item:hover */ {
	text-decoration: underline;
}

.link-list-item {
    border: 2px solid var(--lightTeal);
    padding: 1.5rem !important;
    border-radius: 4px;
    background: var(--lightTeal);
	margin-bottom: 2rem;
}

.link-list-item-small {
    padding: 0.5em;
    border-radius: 4px;
    background: var(--lightTeal);
}

.link-list-item-small a {
    text-decoration: none;
    font-size: 1.7rem;
	font-weight: 500;
}

.link-list-item-small a:hover {
	text-decoration: underline;
}


/*** GUIDES ***/

.cta--guides {
    background: var(--lightGrey);
    min-height: 100%;
    display: flex;
    flex-direction: column;
	border-radius:3px;
}

/* Guide pages */

.grid.guide-article {
	border-radius: 3px;
}

.grid.guide-article.bg-info img {
	border-radius: 3px 0 0 3px;
}

/* Change "Read more" buttons from full width */

.guide-article .btn--purple {
	width: fit-content;
}

/** Icons **/
.branch-facilities__item:before {
    background-image: url(/-/media/992D86BB00C44CEDA99BD53D760FC9E0.ashx);
}

/*** FOOTER ***/

.footer {
    position: relative;
    background: var(--darkPurple);
    color: var(--white);
    padding: 30px 0 60px;
}

.footer p, .footer__copyright {
    font-size: 1.4rem;
    font-weight: 400;
}

.footer__title {
	border-bottom: 0;
	padding-bottom: 0;
}

.footer__item {
	margin-bottom: 10px;
}

.footer__link {
    color: #fff;
	font-size:1.5rem;
	line-height: 1.7rem;
	font-weight: 400;
}

.footer__bottom {
	margin-bottom: 0;
}

@media screen and (max-width: 511px) {
    .footer__title:not(.footer__title--social):after {
        font-family: 'Material Symbols Rounded';
        font-size: 2.5rem;
        vertical-align: middle !important;
        content: '\e5df';
        background: none;
        background-repeat: no-repeat;
        width: 20px;
        height: 20px;
        position: absolute;
        right: 1px;
        top: 25%;
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        -webkit-transition: -webkit-transform .3s ease-in-out;
        transition: -webkit-transform .3s ease-in-out;
        transition: transform .3s ease-in-out;
        transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
		margin-top: 0;
    }
}

@media screen and (max-width: 511px) {
    .footer__title--active:not(.footer__title--social):after {
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
        bottom: 25%;
		margin-top: 0;
    }
}

/* BCorp badge */

li.footer__social-item:last-of-type a img {
    width: 125px;
	margin: auto;
    margin-right: 10px;
}

li.footer__social-item:last-child {
    margin: auto;
}

/* Savings products - move to savings */

.savings-interest-rates .btn {
    text-align: center;
    margin: 20px auto;
}

/* Branch Finder */

/* Display find brand button inline */

#btnBranchSearch {
	display: inline-flex;
}

.hero-left h1, 
.hero-left p {
	color: var(--white);
}

.hero-image {
	width:100%;
}

/* Layout -  Two columns */

.columns {
	display: flex;
	flex-wrap: wrap;
	margin: 3rem 0;
}
	
@media screen and (min-width: 769px) {
	
	.col-left {
		float: left;
		width: 48%;
		padding: 20px 20px 20px 0;
		margin: 1% 1% 1% 0;
	}

	.col-right {
		float: left;
		width: 48%;
		padding: 20px 0 20px 20px;
		margin: 1% 0 1% 1%;
	}

}

@media screen and (max-width: 768px) {
	.col-left {
		width: 98%;
		margin: 10px 3%;
	}
	
	.col-right {
		width: 98%;
		margin: 10px 3%;
	}
	
	.column-reverse {
    flex-direction: column-reverse;
	}
}

/* 2 columns - video */


.columns .video-container iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
}

/* Mobile */

@media screen and (max-width: 768px) {
	.video-left .col-left {
		display: flex;
		flex-direction: column-reverse;
	}
	
	
	.alternating-columns:nth-of-type(even) {
		flex-direction: column-reverse;
	}
}

/*** HELP SECTION ***/

/* Tools and support - 3 columns */

@media screen and (min-width: 768px) {
	
	.help-item-container {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
}

.help-item {
  float: left;
  flex-basis: 32%;
  padding: 30px 20px;
  background: var(--white);
  border: 2px solid var(--midGrey);
  border-radius: 3px;
}

.help-item h2 {
	text-align: center;
}

.help-item img {
	width:40%;
}

/* Responsive - stack columns */

@media screen and (min-width: 550px) and (max-width: 768px) {
	.help-item img {
		width: 20%;	
	}
	
	.help-item {
		width: 98%;
		margin: 10px 1%;
  }
}

@media screen and (max-width: 549px) {
	.help-item img {
		width:30%;
	}
	
	.help-item {
		width: 98%;
		margin: 10px 1%;
	}
}


/* FSCS protection */

.fscs-protected {
	display:flex;
}

.fscs-left {
	width: 75%;
}

.fscs-right {
	width:25%;
}

.fscs-right img {
	width: 45%;
}

@media screen and (max-width: 768px) {
	
  .fscs-protected {
	flex-direction: column-reverse;
  }
  
  .fscs-left {
    width: 80%;
	margin: 10px 10%;
	}
  
  .fscs-right {
	width:100%;
	}
	
	.fscs-right img {
	width: 30%;
	}
}

/* Live chat */

.speech-bubble {
    position: relative;
    background: var(--green) !important;
    box-shadow: none !important;
    border-radius: 3px;
    max-width: 100px;
    min-width: 70px;
    padding: 15px;
    margin: 1em 0px;
    text-align: center;
    color: #FFFFFF;
    display: block;
    cursor: pointer;
    font-family: var(--bodyFont);
    font-weight: normal;
    font-style: normal;
}

.speech-bubble:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-top-color: var(--green) !important;
    border-bottom: 0;
    border-right: 0;
    margin-left: 20px;
    margin-bottom: -10px;
}

.header[_ngcontent-ng-c447170439] {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    background: #19c367;
}

.live-chat[_ngcontent-ng-c1184970476] {
    font-family: 'Figtree', Arial, sans-serif;
    font-weight: 400;
    height: 40px;
    border-radius: 3px !important;
    background-color: #7F20FA !important;
    line-height: 40px;
    font-size: 14px;
    text-align: center;
    color: #fff !important;
    cursor: pointer;
    padding-left: 10px;
    padding-right: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 50% !important;
    display: inline-block;
    box-shadow: #b2b2b273 0 15px 30px -5px !important;
}

#cloudlink-chat-overlay-close-button {
	background-color: #19c367;
}

/* Hide back to top */

.back-to-top-container {
	display: none;
}

/*** SAVINGS ***/

div.sub-nav {
	display: none;
}

.savings-cta-block-1 {
    color: var(--darkPurple);
}

.savings-cta-block-2 {
    color: var(--darkPurple);
}

.savings-cta-block-3 {
    color: #fff;
}

.wbbs-ctaPanel__content * {
	color: var(--darkGrey);
}

.savings-interest-rates .btn {
    text-align: center;
    margin: 20px auto;
}

/* Savings Products */

.savings-products-container {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	text-align: left;
	margin-bottom:20px;
}

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

	.savings-product {
		width: 30%;
	}
	.savings-product img {
		width: 50%;
	}

} 

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

	.savings-product {
		width:48%;
	}
	.savings-product img {
		width: 35%;
	}

} 

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

	.savings-product {
		width: 98%;
        margin: 2% 1% !important;
    }

	.savings-product img {
		width: 25%
	}

} 

.savings-product {
	display: table-cell;
	float: left;
	padding: 20px;
	margin: 1%;
	background: var(--beige);
	border-radius: 3px;
	text-align:left;
}

.savings-product:last-of-type {
	background: var(--lightTeal);
}	

.savings-product h2 {
	text-align: left;
}

.savings-product h4 {
	margin-bottom: 30px;
}

.savings-product img {
	display: none;
}

/*** SAVINGS CATEGORY PAGES ***/

/* Category page intro section */

.intro__left .intro__content {
    text-align: left;
    margin: 0 20px;
}

/* Hide the right hand intro column */
.intro__right {
	display: none;
}

/* Make the left hand column full width */

.intro__left {
	width:100%;
}

@media screen and (max-width: 768px) {
    .intro__left {
        width: 95%;
    }
}

.intro__content {
	max-width: fit-content;
}

/*** SAVINGS PRODUCTS TABLE  ***/

.wbbs-responsive--table__2axis h3 a {
    color: var(--darkPurple);
}

.wbbs-responsive--table__2axis h3 {
    border-bottom: 2px solid var(--darkPurple);
}

@media screen and (max-width: 769px) {
	.wbbs-responsive--table__2axis .responsive-table-2x__cell--cta {
		text-align: -webkit-center;
	}
}

.wbbs-responsive--table__2axis .responsive-table-2x__cell--cta .btn {
	background-color: none;
    box-shadow: none;
}

/* Replace chevron button with text button */

.wbbs-responsive--table__2axis .responsive-table-2x__cell--cta .btn:after {
    content: 'View account & apply';
    color: var(--white);
    text-indent: initial;
}

.wbbs-responsive--table__2axis .responsive-table-2x__cell--cta .btn {
    width: max-content;
	height: inherit;
    background: var(--purple);
    text-indent: -999px;
    overflow: hidden;
}


/* Annual interest rate */

.wbbs-responsive--table__2axis .responsive-table-2x__cell.highlight {
    color: var(--darkPurple);
    background: var(--lightTeal);
	font-weight: bold;
	font-size: 1.8rem;
}

.wbbs-responsive--table__2axis .responsive-table-2x__cell {
	vertical-align: middle;
	padding: 3rem 1rem;
	border: 0;
	
}

.wbbs-responsive--table__2axis .responsive-table-2x__cell.highlight {
	border: 0;
}

/* @media screen and (min-width: 768px) {

	.responsive-table-2x__cell--account {
		width: 10% !important;
	}

} */

/* Header Row */

.wbbs-responsive--table__2axis .responsive-table-2x__cell {
    background-color: var(--lightGrey);
}

@media screen and (min-width: 770px) {

	/* Background colours for alternating rows */

	tr.responsive-table-2x__row:nth-child(even) td.responsive-table-2x__cell, 
	tr.responsive-table-2x__row:nth-child(even) th.responsive-table-2x__cell {
		background-color: var(--lightTeal);
	}

	tr.responsive-table-2x__row:nth-child(odd) td.responsive-table-2x__cell, 
	tr.responsive-table-2x__row:nth-child(odd) th.responsive-table-2x__cell {
		background-color: var(--white);
	}
	
}

/* Product Category Headings */

.wbbs-responsive--table__2axis h3 a {
	font-size: 2.5rem;
	color: var(--purple);
	font-family: var(--headingFont), Arial ,sans-serif;
	font-weight: 700;
	padding: 20px 0;
	text-decoration: none;
    padding: 0 35px 0 0;
    background: url(../img/purple-right-arrow.png) 100% 50% no-repeat;
}

.wbbs-responsive--table__2axis .responsive-table-2x__cell--heading {
	/* width:22% !important; */
}

/* Table Headings */

.wbbs-responsive--table__2axis table th {
    border: none;
    font-weight: 600;
    font-size: 1.7rem;
    vertical-align: middle;
} 

/* Product titles */

.responsive-table-2x__cell--heading a {
    font-weight: 600;
    text-decoration: underline;
    font-size: 1.8rem;
}

/* Hide the Bonus column */

.responsive-table-2x__cell:nth-of-type(3), 
.responsive-table-2x__heading:nth-of-type(4) {
	display: none;
}

@media screen and (max-width: 768px) {
	.responsive-table-2x__cell:nth-of-type(3) {
		display: none !important; 
	}
	
	.wbbs-responsive--table__2axis .responsive-table-2x__cell--heading {
		background-color: var(--darkPurple);
	}
}


/* Minimum to open */

td.responsive-table-2x__cell:first-of-type {
    text-align: center;
}

/* Account access icons */

/* Hide Active icons and replace with text */

.infotip.write a {
	background: none;
}

.infotip.write a:before{
content: 'By post';
font-size: 1.7rem;
    font-weight: 500;
    line-height: 1.6;
    color: var(--darkGrey);
    font-family: var(--bodyFont), Arial, sans-serif;
}

.infotip.call a {
	background: none;
}

.infotip.call a:before{
content: 'By phone';
font-size: 1.7rem;
    font-weight: 500;
    line-height: 1.6;
    color: var(--darkGrey);
    font-family: var(--bodyFont), Arial, sans-serif;
}

.infotip.online a {
	background: none;
}

.infotip.online a:before{
content: 'Online';
font-size: 1.7rem;
    font-weight: 500;
    line-height: 1.6;
    color: var(--darkGrey);
    font-family: var(--bodyFont), Arial, sans-serif;
}

.infotip.branch a {
	background: none;
} 

.infotip.branch a:before{
content: 'In branch';
font-size: 1.7rem;
    font-weight: 500;
    line-height: 1.6;
    color: var(--darkGrey);
    font-family: var(--bodyFont), Arial, sans-serif;
}

.infotip {
display: block;
}

/* Inactive  */

.inactive.infotip.write a, .inactive.infotip.call a, .inactive.infotip.online a, .inactive.infotip.branch a {
	background: none;
        display: none;
}

.inactive span,.infotip.branch a,.infotip.call a,.infotip.online a,.infotip.write a {
    width: unset;
    height: unset;
    padding: 0;
    display: block;
    text-align: left;
}

/* Tooltip content */

.inactive span, .infotip a, .tooltip a {
    text-align: center;
    display: inline-block;
    width: 20px;
    height: 20px;
    text-indent: -.005em;
    line-height: 1;
    border-radius: 20px;
    color: var(--darkPurple);
    background: #fff;
    padding: 2px 4px 7px 5px;
    text-decoration: none;
    font-size: 1.4rem;
    border: 2px solid var(--darkPurple);
    font-family: VAG Rounded, sans-serif;
    font-weight: bold;
}

.below .tip-content:before {
	content: none;
}

.tip-content {
	background: var(--lightGrey);
	border-radius: 3px;
	box-shadow: #b2b2b273 0 15px 30px -5px !important;
	border: 1px solid var(--grey) !important;
	margin: 2px 0 0 -40px !important;
}

.tip-content:before {
	display: none;
}

/*** SAVINGS PRODUCTS ***/

/* Savings product intro */

.savings-product-intro-text {
	font-weight: 600;
}

@media (min-width: 992px) {
	.savings-product-intro-left  {
		width: 68%;
		float: left;
	}
	
	.savings-product-intro-right  {
		float: right;
		width: 30%;
		background-color: var(--beige);
		padding:2rem;
	}
}

@media (max-width: 991px) {
	.savings-product-intro-left  {
		width: 100%;
	}
	
	.savings-product-intro-right  {
		width: 100%;
		background-color: var(--beige);
		padding:2rem;
	}
}


/* Tabs */

#tabs ul.tab-links .active a, 
#tabs ul.tab-links .ui-state-active a, 
#tabs ul.tab-links li a:hover {
    background: var(--darkPurple);
    color: #fff;
}


/* Key features tab */

@media (min-width: 1024px) {
	
	#tabs .key-features .g-unit--6\@l:nth-of-type(1) {
		width: calc(60% - 30px);
	}
	
	#tabs .key-features .g-unit--6\@l:nth-of-type(2) {
		width: calc(40% - 30px);
	}
}

#tabs .key-features h3 {
    font-size: 2rem;
    color: var(--darkPurple);
    font-family: var(--headingFont), Arial, sans-serif;
    font-weight: 700;
    padding: 10px 0;
}

/* Bullet points */

#tabs .key-features li {
	color: var(--darkGrey);
	list-style: disc;
	background: none;
	margin-left: 20px;
	padding: 0 0 0 10px;
	font-size: 1.7rem;
}

#tabs ul.tab-links li a {
    display: block;
    color: var(--darkPurple);
    text-decoration: none;
    outline: none;
    margin: 0;
    padding: 10px 15px;
    font-size: 1.7rem;
    font-weight: 500;
}

/* Rate box */

.savings-interest-rates,
#tabs .key-features .account-access {
	background: var(--lightGrey);
}

#tabs .key-features .account-access li {
    margin: 0 0 10px;
}

.savings-interest-rates table tbody td, 
.savings-interest-rates table thead td {
    color: var(--darkPurple);
    border-bottom: 1px solid var(--grey);
}

.savings-interest-rates table tbody td:first-child {
    border-right: 1px solid var(--grey);
}

.savings-interest-rates table thead td span.perc {
	font-size: inherit;
	display: inline;
}	

.savings-interest-rates table thead td span.apr {
	display: inline-flex;
}

.savings-interest-rates table thead td strong {
    display: flex;
    font-size: 6rem;
    line-height: 1;
    position: relative;
    font-family: var(--bodyFont);
}

.savings-interest-rates table tbody td strong {
    font-size: 1.7rem;
    line-height: 1.6rem;
    display: block;
    font-family: var(--bodyFont);
}

.savings-interest-rates table tbody td span {
    display: block;
    font-size: 1.7rem;
    font-weight: 500;
}

@media screen and (min-width: 768px) and (max-width: 880px) {
	
	.savings-interest-rates table thead td span.apr {
	display: flex;
	}	
	
	
}

@media screen and (max-width: 768px) {
	
	.key-features .grid {
		flex-direction: column-reverse;
	}
	
}

.savings-interest-rates table thead td span.rate,
.savings-interest-rates table thead td span.perc {
	font-weight: 800;
	color: var(--purple);
}

.savings-interest-rates table thead td span.perc {
	display: inline-flex;
}



/*** SUMMARY BOX  ***/

/* Headings */

@media (max-width: 768px) {
	#tabs .product-info .left-col {
	float: none;
	width:100% !important;
	}
	
	#tabs .product-info .right-col {
		width:100% !important;
		float: left;
	}
	
	#tabs .product-info table {
		width:100%;
	}
}

#tabs .product-info .left-col h4 {
	font-size: 2rem;
} 

#tabs .product-info .left-col {
    float: left;
    width: 30%;
}

#tabs .product-info .right-col {
    float: left;
    width: 68%;
}

/* Content */

/* #tabs .product-info .right-col {
	width: 100%;
} */

#tabs .product-info table tfoot td {
	font-size: 1.7rem;
}	

/* Alternating background colour */

#tabs .product-info .odd {
    background: var(--lightTeal);
}

.product-info .cfx {
    margin: 20px 0;
}

#tabs .product-info table td, #tabs .product-info table th {
    border: 1px solid var(--darkPurple);
    padding: 1.5rem;
    text-align: center;
    background: #fff;
    font-size: 2rem;
}

@media (max-width: 500px) {
	#tabs .product-info table td, #tabs .product-info table th {
		padding: 0.5rem 0.1rem;
		font-size:1.7rem;
	}
}

#tabs .product-info table th {
    font-weight: bold;
}

/* Terms and conditions / Key Documents */

#tabs .col {
    width: 100% !important;
}

/* Hide Tab 3 */

@media (min-width: 300px) {
	
    #tabs ul.tab-links li:nth-of-type(3) {
        display: none !important;
    }
}

@media print {
	#tabs ul.tab-links li:nth-of-type(3),
#tabs ul.tab-links li:nth-of-type(4) {
        display: none !important;
    }
}



/* Savings CTA blocks - apply routes */

.cta-block p {
	font-size: 1.5rem;
}

.cta-block.green {
	background-color: var(--darkPurple) !important;
}

.cta-block.green:hover {
	background-color: var(--darkPurple) !important;
	opacity: 0.8;
}

.cta-block.online a,
.cta-block.email a,
.cta-block.branch a,
.cta-block.book-now a,
.cta-block.online:hover a, 
.cta-list.online:hover .h3, 
.cta-list.branch .h3,
.cta-list.branch h3,
.cta-block.branch:hover a, 
.cta-list.branch:hover .h3
.cta-list.online:hover h3,
.cta-block.book-now:hover a, 
.cta-list.book-now:hover .h3, 
.cta-list.book-now:hover h3,
.cta-block.email:hover a, 
.cta-list.email:hover .h3, 
.cta-list.email:hover h3 {
	background: none;
}

.cta-block.green h3 span {
	padding: 1rem 0 !important;
}

.cta-block-container .h3, 
.cta-block-container h3 {
	display: none;
}


/*** MORTGAGES ***/

@media screen and (min-width: 768px) {
	
	#looking-for-a-mortgage .col-left {
		float: left;
		width: 68%;
		padding: 20px 20px 20px 0;
		margin: 1% 1% 1% 0;
	}

	#looking-for-a-mortgage .col-right {
		float: left;
		width: 30%;
		padding: 20px 0 20px 20px;
		margin: 1% 0 1% 1%;
	}

}

@media screen and (max-width: 768px) {
	#looking-for-a-mortgage .col-left {
		width: 98%;
		margin: 10px 1%;
	}
	
	#looking-for-a-mortgage .col-right {
		width: 98%;
		margin: 10px 1%;
	}
}

@media screen and (min-width: 980px) {

	img#moneyfacts-award {
			width:50%;
	}
}

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

	img#moneyfacts-award {
			width:70%;
	}
}

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

	img#moneyfacts-award {
			width:50%;
	}
}

/* Mortgage Products */

.mortgage-products-container {
	display: table;
	width: 100%;
	margin-bottom: 20px;
}

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

	.mortgage-products-container {
		display: flex;
		flex-wrap: wrap;
	}

	.mortgage-product {
		width: 31%;
	}
	.mortgage-product img {
		width: 50%;
	}
	
	.mortgage-product:first-of-type {
		margin: 1% 1% 1% 0;
	}
	
	.mortgage-product:nth-child(2) {
		margin: 1%
	}
	
	.mortgage-product:last-of-type {
		margin: 1% 0 1% 1%;
	}

} 

} 

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

	.mortgage-product {
		width: 98%;
        margin: 2% 1% !important;
    }

	.mortgage-product img {
		width: 25%
	}

} 

.mortgage-product {
	display: table-cell;
	float: left;
	padding: 20px;
	margin: 1%;
	background: var(--beige);
	border-radius: 3px;
	text-align:left;
}


.mortgage-product h2 {
	text-align: center;
} 

/* First time buyer - Mortgage Products */

.ftb-mortgage-products-container {
	display: table;
	width: 100%;
	margin-bottom: 20px;
}

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

	.ftb-mortgage-products-container {
		display: flex;
		flex-wrap: wrap;
	}

	.ftb-mortgage-products-container .mortgage-product {
		width: 48%;
	}
	
	.ftb-mortgage-products-container .mortgage-product:first-of-type,
	.ftb-mortgage-products-container .mortgage-product:nth-child(3)	{
		margin: 1% 1% 1% 0;
	}
	
	.ftb-mortgage-products-container .mortgage-product:last-of-type,
	.ftb-mortgage-products-container .mortgage-product:nth-child(2)	{
		margin: 1% 0 1% 1%;
	}

} 
 

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

	.ftb-mortgage-products-container .mortgage-product {
		width: 98%;
        margin: 2% 1% !important;
    }

	.ftb-mortgage-products-container .mortgage-product img {
		width: 25%
	}

} 

.ftb-mortgage-products-container .mortgage-product {
	display: table-cell;
	float: left;
	padding: 20px;
	margin: 1%;
	background: var(--beige);
	border-radius: 3px;
	text-align:left;
}


.ftb-mortgage-products-container .mortgage-product h2 {
	text-align: center;
} 

/* Mortgage finder */

/* Hide calculate your replayments tab */

#tabs.mortgages ul {
	display: none;
}

#tabs.mortgages {
    margin: 0 15px 15px;
} 

.mortgages .calculator__container .h3, 
.mortgages .calculator__container h3 {
    color: var(--darkPurple);
    margin: 0 0 10px;
    font-size: 2.5rem;
}

.mortgages .form__input-group input[type=email], .form__input-group input[type=password], .form__input-group input[type=text], .form__input-group select, .form__input-group textarea, .sc-form input[type=date], .sc-form input[type=email], .sc-form input[type=number], .sc-form input[type=password], .sc-form input[type=tel], .sc-form input[type=text], .sc-form select, .sc-form textarea {
    border:#898989 1px solid;
	border-radius:4px;
	color: #747678;
    padding: 20px 16px;
    outline: none;
    background: #ffffff;
}

.mortgages .form__input-group input[type=email]:focus, .form__input-group input[type=password]:focus, .form__input-group input[type=text]:focus, .form__input-group select:focus, .form__input-group textarea:focus, .sc-form input[type=date]:focus, .sc-form input[type=email]:focus, .sc-form input[type=number]:focus, .sc-form input[type=password]:focus, .sc-form input[type=tel]:focus, .sc-form input[type=text]:focus, .sc-form select:focus, .sc-form textarea:focus {
    border: var(--purple) 2px solid;
    box-shadow: 0 0 5px rgba(200, 203, 238, 1);
    }

/** Slider Controls **/
.mortgages .noUi-horizontal .noUi-handle {
    top: -12px;
    margin-left: -10px;
    height: 36px;
    width: 36px;
}

.mortgages .noUi-handle {
    cursor: move;
    background: url(/-/media/5424674E53604A2E9751CE1D84E3343F.ashx) 50% 50% repeat-x;
    color: #555;
}

.mortgages .noUi-connect {
    background: var(--purple);
    -webkit-box-shadow: none;
    box-shadow: none;
    height: 5px;
}

.mortgages .calculator--mortgage-finder .btn {
    background: var(--purple);
    color: var(--white);
    margin: 0;
}

.mortgages .calculator__container {
	background: var(--lightGrey);
}

.mortgage-section .form__select-box:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    pointer-events: none;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    top: 50%;
    margin-top: -5px;
    right: 15px;
    border-top: 8px solid var(--green);
}

.mortgage-section .expand-down__btn:after {
    content: "";
    display: block;
    height: 30px;
    width: 30px;
    margin: 10px auto 0;
    background-position: 50% 50%;
    background-size: 15px auto;
    background-repeat: no-repeat;
    background-image: none;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    font-family: 'Material Icons';
    content: '\e5c5';
    font-size: 32px;
    color: var(--darkPurple);
}

/* Mortgage finder results */


.mortgage-section .responsive-table__cell {
    text-align: center;
    padding: 1rem;
    background-color: var(--lightGrey);
    border: .2rem solid #fff;
}

.mortgage-section .responsive-table__cell.highlight {
    background: var(--lightTeal);
    color: var(--darkPurple);
}

.mortgage-section .responsive-table__info {
    text-align: right;
    padding: 10px 0;
    margin-left: -15px;
    margin-right: -15px;
    font-size: 2.3rem;
    color: var(--darkPurple);
    font-weight: 600;
}

.mortgage-section .responsive-table__info .icon--info {
    text-align: center;
    display: inline-block;
    width: 26px;
    height: 26px;
    border-radius: 16px;
    color: var(--darkPurple);
    background: var(--white);
    font-size: 2rem;
    padding: 1px 8px;
    margin-right: 9px;
    text-decoration: none;
    border: 1px solid var(--darkPurple);
}

.mortgage-section .responsive-table h3 a {
	font-size: 2.5rem !important;
    color: var(--purple) !important;
    font-family: var(--headingFont), Arial, sans-serif;
    font-weight: 700;
    padding: 20px 0;
    text-decoration: none;
    padding: 0 35px 0 0;
}

.mortgage-section .responsive-table h3 {
    border-bottom: 2px solid var(--darkPurple);
    font-size: 23px;
    margin: 0 -15px;
    padding: 0 0 10px;
}

.mortgage-section .responsive-table h3 a {
    color: var(--purple);
    text-decoration: none;
    padding: 0 35px 0 0;
    background: none;
}

@media screen and (max-width: 769px) {
    .mortgage-section .responsive-table__cell--heading {
        width: 100%;
        padding: 2rem 1rem;
        color: var(--darkGrey);
        text-align: center;
        font-size: 1.7rem;
        font-weight: 500;
        background-color: var(--darkPurple);
    }
	
	.mortgage-section .responsive-table__cell--heading .copy-1 {
    font-size: 1.7rem;
    color: var(--white);
}
}


/* Existing customers - tools and support */

@media screen and (min-width: 768px) {
	
	.mortgage-help-container {
		display: flex;	
		flex-wrap: wrap;
	}
	
	.mortgage-help-container .help-item:first-of-type,
	.mortgage-help-container .help-item:nth-child(4) {
		margin: 1% 1% 1% 0;
	}
	
	.mortgage-help-container .help-item:nth-child(3),
	.mortgage-help-container .help-item:last-of-type {
		margin: 1% 0 1% 1%;
	}
	
	.mortgage-help-container .help-item:nth-child(2),
	.mortgage-help-container .help-item:nth-child(5) {
		margin: 1%;
	}
}

.mortgage-help-container .help-item {
  float: left;
  width: 31%;
  padding: 20px;
  background: var(--white);
  border: 2px solid var(--midGrey);
  border-radius:3px;
}

.mortgage-help-container .help-item h2 {
	text-align: left;
}


/* Responsive - when the screen is less than 768px wide, make the columns stack */

@media screen and (max-width: 768px) {
  .mortgage-help-container .help-item {
    width: 98%;
	margin: 10px 1%;
  }

}

/* Switcher products container */


@media (min-width: 992px) {
	.switcher-products-left  {
		width: 68%;
		float: left;
	}
	
	.switcher-products-right  {
		float: right;
		width: 30%;
		background-color: var(--beige);
		padding:2rem;
	}
}

@media (max-width: 991px) {
	.switcher-products-left  {
		width: 100%;
	}
	
	.switchers-products-right  {
		width: 100%;
		background-color: var(--beige);
		padding:2rem;
	}
}

/*** BRANCHES ***/

/* Branch name */
.bran-details-banner__info h1 {
	color: var(--purple);
	font-size: 4rem;
	margin: 0 0 5px;
}

.bran-details-banner__info {
    display: inline-block;
    margin-top: 20px;
    padding: 20px 100px 20px 20px;
    border-radius: 3px;
    background: #fff;
}

.bran-details-banner__info p span {
	color: var(--darkPurple);
}

@media screen and (max-width: 769px) {
    .branch-details-banner {
        display: none;
    }
}

.mobile-cta-btns__cta {
    padding: 25px 0;
    background: var(--darkPurple);
    font-size: 1.7rem;
	padding: 25px 5px;
}

@media screen and (max-width: 511px) {
    .branch-details-nav-btns__back a {
        padding: 12px 18px;
    }
}

.branch-detail-section h2, .branch-detail-section h3 {
    color: var(--darkPurple);
    font-weight: 600;
    font-size: 2.4rem;
    margin: 0 0 20px;
}

.branch-details {
    background: var(--lightGrey);
}

.branch-details__contact p {
	color: var(--darkPurple);
}

.branch-details__contact p, 
.branch-details__location p {
	font-size:1.7rem;
}

.branch-details__contact p span {
	font-weight: 500;
	color: var(--darkGrey);
}

.branch-details__opening-times .highlight {
    color: var(--darkPurple);
    font-weight: 600;
}

.branch-details__opening-times,
.branch-details__opening-times+p {
	font-size: 1.7rem;
	color: var(--darkGrey);
}

.branch-detail-section a {
    padding-left: 18px;
    padding-right: 18px;
    font-size: 1.7rem;
}

/* Hide fax number field */
.branch-details__contact p:nth-child(3) {
    display: none;
}

.branch-facilities {
    font-size: 1.7rem;
    font-weight: 600;
    color: var(--darkPurple);
}

.branch-facilities__item:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 15px;
    width: 21px;
    height: 21px;
    background-image: url(-/media/1675fd0c50bd4632ab97ec9e551b5e50.ashx);
    background-repeat: no-repeat;
    background-size: contain;
}

.request-appointment__content h3, 
.request-appointment__content h4, 
.request-appointment__content p {
    color: var(--darkPurple);
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.request-appointment__content a {
    position: relative;
}

.request-appointment__content {
    width: 50%;
    min-height: 320px;
    margin: 30px 0 0 -5%;
    padding: 65px 80px 30px 30px;
    background: var(--beige);
}

@media screen and (max-width: 769px) {
    .request-appointment__content {
        width: 100% !important;
        min-height: auto;
        margin: 0;
        padding: 40px 20px;
    }
}

.btn.btn--white {
    background: var(--purple);
    color: var(--white);
	box-shadow: #b2b2b273 0 15px 30px -5px;
    box-sizing: border-box;
	border-radius: 3px;
	width: fit-content;
	padding: 12px 18px;
    font-size: 16px;
}

.btn.btn--white:hover {
	opacity: 0.8;
	background: var(--purple);
	color: var(--white) !important;
}
.request-appointment__content a:after {
    display: none;
}

.branch-details-nav-btns__search-again a {
	padding: 12px 18px;
}

.branch-details-nav-btns__back a {
    padding-left: 18px;
    padding-right: 18px;
}

.branch-details-nav-btns__search-again a:after,
.branch-details-nav-btns__back a:after {
	display: none;
}

.btn.btn--grey, input[type=submit].btn--grey {
    background: var(--purple);
    color: var(--white);
}

#branch-notice {
    background: var(--lightTeal);
    padding: 2rem;
}

/*** BRANCH FINDER ***/

.branch-finder-search {
	margin-bottom: 0;
	margin-top: -15px;
}

.branch-finder-search h1 {
    font-size: 4rem;
    color: var(--purple);
	margin: 0 0 30px;
}

.branch-finder-search .wrapper {
	background: hsla(0,0%,100%,.95);
	border-radius: 3px;
	padding: 3rem;
}

@media screen and (min-width: 769px) {
	.branch-finder-search .wrapper {
		width: 45%;
	}
}

@media screen and (max-width: 768px) {
	.branch-finder-search__search-input-container {
    width: 95% !important;
	margin-bottom: 30px;
	}
	
	.branch-finder-search .wrapper {
	max-width: 85% !important;
	}
	
	.branch-finder-search__form {
        padding: 0 10px;
    }
	
}

.branch-finder-search__search-input-container {
    display: inline-block;
    position: relative;
    margin-right: 10px;
    width: 50%;
    border: 2px solid var(--grey);
    border-radius: 3px;
}

.branch-finder-search__form span.arrow {
    position: absolute;
    width: 0;
    height: 0;
    left: calc(50% - 7.5px);
    top: 52px;
    border-color: var(--darkPurple) transparent transparent;
    border-style: solid;
    border-width: 7.5px 7.5px 0;
}

.branch-finder-search-msg p span {
    font-weight: 600;
    color: var(--darkPurple);
}

.branch-finder-search__form .btn, .branch-finder-search__form input[type=submit].btn {
    font-size: 1.7rem;
    padding: 12px 18px;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.branch-finder-search__search-input-container input {
	border-radius: 3px !important;
}

.branch-finder-search__form span.floating-placeholder {
    border-radius: 3px;
    font-size: 1.7rem;
    background: var(--darkPurple);
    color: var(--white);
}

.branch-location {
    background-color: var(--lightGrey);
}

/* Branch Details button to match main button style */

.branch-location__details .btn {
    margin-top: inherit;
    padding: 12px 18px;
}

.branch-location__distance:before {
    background-image: url(-/media/5ccc7f24afb24b61b74f6515ec837620.ashx);
}

.branch-location__opening-hours:before {
    background-image: url(-/media/689a91b4696f4990892afe2165d3305a.ashx);
} 

.branch-location__distance:before, .branch-location__opening-hours:before {
    content: "";
    position: absolute;
    left: 0;
    top: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    width: 24px;
    height: 24px;
}

.branch-location__contact h1, 
.branch-location__contact h2, 
.branch-location__contact h3 {
    color: var(--darkPurple);
}

.branch-location__distance, .branch-location__opening-hours {
    color: var(--darkPurple);
    font-size: 1.7rem;
}

.branch-location__contact a {
    color: var(--darkPurple);
    font-size: 2rem;
}

/*** ABOUT US ***/

/* Why the West Brom */

/* Create three equal columns that float next to each other */

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

	.about-us-container {
		display:flex;
	}
	
	.about-us-column:first-of-type {
		margin: 1% 1% 1% 0;
	}
	
	.about-us-column:nth-of-type(2) {
		margin: 1%;
	}
	
	.about-us-column:last-of-type {
		margin: 1% 0 1% 1%;
	}

} 

.about-us-column {
  float: left;
  width: 31%;
  padding: 20px;
  background: var(--lightGrey);
  border-radius:3px;
}

/* Clear floats after the columns */
.homeAboutUs:after {
  content: "";
  display: table;
  clear: both;
}

.about-us-column h2 {
	text-align: center;
}

/* Responsive - when the screen is less than 768px wide, make the columns stack */
@media screen and (max-width: 768px) {
  .about-us-column {
    width: 98%;
	margin: 10px 1%;
  }
}

/* About us - mobile */

@media screen and (max-width: 768px) {
	.home-about .columns {
		display: flex;
		flex-direction: column-reverse;
	}
}

/*** SEARCH RESULTS ***/

#form-filters .form__select-box {
	display: none;	
}

.search-result .h2 {
	padding: 10px 0;
}

.search-result .h2 a, .search-result h2 a {
	color: var(--darkPurple);
	font-size: 2.2rem;
}

.search-result .h2 a:hover, .search-result h2 a:hover{
	color: var(--purple);
    text-decoration: underline;
    text-underline-position: under;
}


.tags li, .tags li a {
    font-family: var(--bodyFont), Arial, sans-serif;
}

.search-result .h3, .search-result h3 {
    font-size: 1.7rem;
    font-weight: 500;
	padding: 10px 0;
}

.pagination .active a, .pagination a:focus, .pagination a:hover {
    background: var(--purple);
}

.pagination .next a, .pagination .previous a,
.pagination li.next a:hover {
    background: url(../img/icon-arrow-1.svg) 50% 50% no-repeat;
}


.form__submit-search {
	background-image: url(-/media/48b1ec0904af479b9321ddade347ac95.ashx);
    width: 32px;
    height: 32px;
}

.pagination .next a:after {
    font-family: 'Material Icons';
    content: '\e5df' !important;
    font-size: 32px;
    position: relative;
    top: -26px;
}

.pagination .previous a:after {
	font-family: 'Material Icons';
    content: '\e5df' !important;
    font-size: 32px;
    position: relative;
    top: -26px;
}

.pagination .next a:hover:after,
.pagination .previous a:hover:after {
    color: var(--purple);
}

/* Hide page type and breadcrumb/tags */
.search-result h3, .search-result .tags {
    display: none;
}


/*** FAQS ***/

.faq-list__panel-shadow {
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
    box-shadow: none;
    border-radius: 3px;
}

.faq-list a {
    background: var(--lightTeal);
    display: block;
    width: 100%;
    padding: 1.5rem;
    text-decoration: none;
    border-radius: 3px;
    font-size: 1.7rem;
    margin: 0 0 14px;
}

.faq-list a:hover {
	text-decoration: underline;
}	

.faq-list__details li:after {
	display: none;
}

.faq-list__faq, .faq-list__title {
	padding: 20px 0;
}

/*** FAQ CATEGORY ***/

.faq-list__no-padding {
    padding: 0;
}

.faq-list a {
    background: var(--lightTeal);
    display: block;
    width: 100%;
    padding: 1.5rem;
    text-decoration: none;
    border-radius: 3px;
    font-size: 1.7rem;
    margin: 0 0 14px;
}

.faq-list a:hover {
    text-decoration: underline;
}

.faq-list__faq, .faq-list__title {
    padding: 20px 0;
}


.faq-list li:after {
	display: none;
}

/**** ADDITIONAL STYLES **/

/* Bullet point checklist */

ul.checklist li span {
	position: relative;
	bottom: 4px;
}

ul.checklist li::marker {
	font-family: 'Material Symbols Rounded';
    content: "\e834";
	font-size: 20px;
}

span.material-symbols-rounded {
	font-size: 1.7rem;
	vertical-align: middle;
}

/* FAQ accordion */

.accordion-question {
  background-color: var(--lightGrey);
  color: var(--darkGrey);
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  transition: 0.4s;
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.6;
  font-family: var(--bodyFont), Arial, sans-serif;
}

.accordion-question:after {
  font-family: 'Material Symbols Rounded';
  content: '\e145';
  color: var(--purple);
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.accordion-answer{
  background-color: var(--lightGrey);
    padding: 0 18px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    margin-bottom: 20px;
}

.accordion-active:after {
  font-family: 'Material Symbols Rounded';
  content: '\e15b';
  color: var(--purple);
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.accordionPanel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}


/* Table */

.wb_table {
    overflow: auto;
    width: 100%;
}

.wb_table table {
    border: 1px solid var(--lightGrey);
    height: 100%;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 1px;
    text-align: left;
}

.wb_table caption {
    caption-side: bottom;
    text-align: left;
}

.wb_table th {
    border: 1px solid var(--lightGrey);
    background-color: var(--lightPurple);
    padding: 15px;
}

.wb_table td {
    border: 1px solid var(--lightGrey);
    background-color: #fff;
    padding: 15px;
}


/*** Page with side Nav ***/


/* Make nav sticky */
main#guide > nav {
	position: sticky;
	top: 2rem;
	align-self: start;
    height: max-content;
    /* overflow-y: scroll; */
}

.section-nav li.active > a {
	background: var(--lightGrey);
	border-radius: 4px;
	color: var(--purple);
}

.section-nav a {
	text-decoration: none;
	display: block;
	padding: .5rem;
	color: var(--darkGrey);
	transition: all 50ms ease-in-out; 
}

.section-nav a:hover,
.section-nav a:focus {
	background: var(--lightGrey);
	border-radius: 4px;
	color: var(--purple);
}

#guide .section-nav ul, ol {
	list-style-type: none !important;
	margin: 0;
	padding: 0;
}


#guide div#content section {
	margin-bottom: 4rem;
}

#guide .guide-spacer {
	height: 2rem;
	border-top: 2px solid var(--lightGrey);

}

@media screen and (min-width: 769px) {

	.section-nav {
		padding-left: 0;
		border-right: 2px solid var(--lightPurple);
		margin-right: 1%;
	}
	
	#guide div#content {
		margin-left: 2%;
	}
	
	main#guide {
		display: grid;
		grid-template-columns: 25% auto;
		width: 100%;
		margin: 0 auto;
	}
	
	#guide .section-nav li {
		margin-left: 0rem;
		padding-left: 0;
		margin-right: 3%;
	}
}


@media screen and (max-width: 768px) {
	main#guide > nav {
		position: sticky;
		top: 0;
		background: #fff;
		z-index: 10;
		/*align-self: start;
		height: max-content;
		overflow-y: scroll; */
	}
	
	#guide div#content {
		margin-left: 0;
	}
	
	.section-nav {
		position: relative;
		padding: 1rem;
        margin: 0 0 2rem;
        border: 0;
	}
	
	.section-nav ul::before, .section-nav ul::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		width: 24px;
		pointer-events: none;
		z-index: 2;
	}
	
	.section-nav ul::before {
		left:0;
		background: linear-gradient(to right, white, transparent);
	}
	
	.section-nav ul::after {
		right:0;
		background: linear-gradient(to left, white, transparent);
	}
	
	.section-nav ul {
		display: flex;
		overflow-x: auto;
		gap: .5rem;
		padding-bottom: .5rem;
		scrollbar-width: thin;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
	}
	
	.section-nav li {
		flex: 0 0 auto;
		margin-left: 0;
		scroll-snap-align: center;
	}
	
	.section-nav ul::-webkit-scrollbar {
		height: 6px;
	}

	.section-nav ul::-webkit-scrollbar-thumb {
		background: var(--lightPurple);
		border-radius: 10px;
	}
	
	.section-nav.sticky-shadow {
		border-bottom: 2px solid var(--lightPurple);
		transition: box-shadow 0.2s ease, border-bottom 0.2s ease;
	}
	
	main#guide {
		display: block;
		width: 100%;
		margin: 0 auto;
	}
	
	#guide .section-nav li {
		margin-left: 0;
		padding-left: 0;
		margin-right: 3%;
	}
	
	
}