/* Bootstrap configuration:;
http://getbootstrap.com/customize/?id=6ca0aaaefe13e931b32b
*/
@font-face {
  font-family: 'Gutmann Finance Access Bank Jack Light';
    src: url('../../fonts/lloyds_bank_jack-lightweb-webfont.eot');
    src: url('../../fonts/lloyds_bank_jack-lightweb-webfontd41d.eot?#iefix') format('embedded-opentype'),
url('../../fonts/lloyds_bank_jack-lightweb-webfont.woff') format('woff'),
url('../../fonts/lloyds_bank_jack-lightweb-webfont.ttf') format('truetype'),
url('../../fonts/lloyds_bank_jack-lightweb-webfont.svg#lloyds_bank_jacklight') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
  font-family: 'Gutmann Finance Access Bank Jack Regular';
    src: url('../../fonts/lloyds_bank_jack-regularweb-webfont.eot');
    src: url('../../fonts/lloyds_bank_jack-regularweb-webfontd41d.eot?#iefix') format('embedded-opentype'),
url('../../fonts/lloyds_bank_jack-regularweb-webfont.woff') format('woff'),
url('../../fonts/lloyds_bank_jack-regularweb-webfont.ttf') format('truetype'),
url('../../fonts/lloyds_bank_jack-regularweb-webfont.svg#lloyds_bank_jackregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
  font-family: 'Gutmann Finance Access Bank Jack Medium';
    src: url('../../fonts/lloyds_bank_jack-mediumweb-webfont.eot');
    src: url('../../fonts/lloyds_bank_jack-mediumweb-webfontd41d.eot?#iefix') format('embedded-opentype'),
url('../../fonts/lloyds_bank_jack-mediumweb-webfont.woff') format('woff'),
url('../../fonts/lloyds_bank_jack-mediumweb-webfont.ttf') format('truetype'),
url('../../fonts/lloyds_bank_jack-mediumweb-webfont.svg#lloyds_bank_jackmedium') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
  font-family: 'Gutmann Finance Access Bank Jack Bold';
    src: url('../../fonts/lloyds_bank_jack-boldweb-webfont.eot');
    src: url('../../fonts/lloyds_bank_jack-boldweb-webfontd41d.eot?#iefix') format('embedded-opentype'),
url('../../fonts/lloyds_bank_jack-boldweb-webfont.woff') format('woff'),
url('../../fonts/lloyds_bank_jack-boldweb-webfont.ttf') format('truetype'),
url('../../fonts/lloyds_bank_jack-boldweb-webfont.svg#lloyds_bank_jackbold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
	font-family: 'lloyds-icons';
	src:url('../../fonts/lloyds-icons.eot');
	src:url('../../fonts/lloyds-iconsd41d.eot?#iefix') format('embedded-opentype'),
url('../../fonts/lloyds-icons.woff') format('woff'),
url('../../fonts/lloyds-icons.ttf') format('truetype'),
url('../../fonts/lloyds-icons.svg#lloyds-icons') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* Webtrends shifts the <body/> off to the left, while it loads. This is a terrible user experience which
also causes other issues with Ektron. Uncommenting this line will fix this issue, while perhaps causing
new Webtrends issues.
#ctl00_body {position: static !important;}*/

/* Cookie consent nag from silktide.com/cookieconsent
Unfortunately, the markup is not flexible, so it's hard-coded styles a-go-go. */
.cc_banner-wrapper {
	background: #efedea;
	color: #006a4d;
	font-family: "Gutmann Finance Access Bank Jack Medium","Trebuchet MS","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Tahoma,sans-serif;
	font-size: 1.15em;
	font-size: 18px;
}

	/* Acts like .container */
	@media (min-width: 768px) {
	  .cc_banner {width: 752px;}
	}
	@media (min-width: 992px) {
	  .cc_banner {width: 972px;}
	}
	@media (min-width: 1100px) {
	  .cc_banner {width: 1072px;}
	}
	.cc_banner {
	    margin: 0 auto;
	    padding: 26px 15px 11px;
	}
		/* "Cookie Consent plugin for the EU cookie law",
		plus anything else which needs to hide in an
		accessible way, but where I can't add a class
		of sr-only. */
		.cc_logo,
		.tracking,
		.check-replace input[type="checkbox"],
		.radio-replace input[type="radio"],
		.ui-datepicker-header a .ui-icon {
		  clip: rect(0, 0, 0, 0);
		  height: 1px;
		  margin: -1px;
		  overflow: hidden;
		  padding: 0;
		  position: absolute;
		  width: 1px;
		}
		/* For honeypots to trap robot bears */
		.formImportant{display: none;}

		.cc_banner, .cc_message {overflow: hidden;}
			.cc_message {margin: 0;}

		/* ✖ */
		.cc_btn {
			background: #fff;
		    float: right;
		    margin-left: 10px;
		    position: relative;
		    top: -6px;
		}
		/* A close button, reused in the other announcements */
		.cc_btn,
		.btn-close,
		body .btn-close,
		body .btn-close:focus,
		body .btn-close:hover {
		    padding: 7px 13px;
		    text-decoration: none;
		}
		/* Default */
		.btn-close {
			background: #fff;
			color: #006a4d;
		}

	/* As above, but with some control over the markup. Imagine! */
	.bg-announcement {
		background: #efedea;
		color: #006a4d;
	}
	.announcement {padding: 26px 0 11px;}
		/* (!) */
		.bg-announcement .icon-disc {
			font-size: 26px;
			min-width: 38px;
			padding: 0;
		}
		.announcement.bg-international-green h1,
		.announcement.bg-international-green h2,
		.announcement.bg-international-green h3,
		.announcement.bg-international-green h4,
		.announcement.bg-international-green h5,
		.announcement.bg-international-green h6 {
			color: #75ba00;
		}

/* There should only be one <main/> in each page. */
main {
	background: #efedea;
	padding: 32px 0 0;
}

/* Typography */
html .font-light, .btn.btn-quaternary, .ic-tip .tip, .cc_more_info, h6, .h6 {
    font-family: "Gutmann Finance Access Bank Jack Light","Trebuchet MS","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Tahoma,sans-serif;
}
html .font-reg, h1, .h1, h2, .h2, h3, .h3, .btn, caption, th, .pagination {
    font-family: "Gutmann Finance Access Bank Jack Regular","Trebuchet MS","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Tahoma,sans-serif;
    font-weight: normal;
}
b, strong, html .font-med, .supporting-header, h4, .h4, h5, .h5 {
    font-family: "Gutmann Finance Access Bank Jack Medium","Trebuchet MS","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Tahoma,sans-serif;
    font-weight: normal;
}
html .font-bold, .hero-h1, .banner-inside-h1, .list-cons > li:before {
    font-family: "Gutmann Finance Access Bank Jack Bold","Trebuchet MS","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Tahoma,sans-serif;
    font-weight: normal;
}
a {text-decoration: underline;}
nav a, nav a:link, abbr, a[href^="tel:"] {
	text-decoration: none;
}

/* Headings
Most heading font sizes have been added to Bootstrap, via the configuration screen. Please see the
top of this file, for a URL to that, or the config.json found here:
\components\css\international\bootstrap\config.json
*/
h1, h2, h3, h4, h5, h6, caption,
.h1, .h2, .h3, .h4, .h5, .h6 {
	color: #323233;
	margin: 0 0 .5em;
}
	h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, caption a
	.h1 a, .h2 a, .h3 a, .h4 a, .h5 a, .h6 a {
		text-decoration: none;
	}
/* Some headings have a tiny keyline under them, like Lloyds sites used to, in the good old days. */
.keyline {
	padding: 0 0 20px;
	position: relative;
}
	.keyline:after, .ui-datepicker-title:after {
		background: #75ba00;
		bottom: 2px;
		content: "";
		height: 1px;
		left: 0;
		position: absolute;
		width: 30px;
	}
	.text-center .keyline:after, .ui-datepicker-title:after {
		left: 50%;
		margin: 0 0 0 -15px;
	}

.supporting-header {
	color: #649c00;
	font-size: 17px;
	letter-spacing: .02em;
	text-transform: uppercase;
}

h1, .h1 {letter-spacing: -.02em;}
/* Some spacing is larger than others */
.lead {
	margin-bottom: 32px;
}
p, ul, .PBItem ul, .PBItem  ol, ol, dl, pre, table, .match-height[style] {
	margin-bottom: 16px;
}
	.PBItem ul ul, body .mb-o {
		margin-bottom: 0;
	}

/* Body copy large */
body .lead, .lead {font-size: 18px;}
/* Designed for inline use - for example on phone numbers */
.jumbo {font-size: 25px;}
/* FB55575 */
.horizontal .jumbo {margin-top: 4px;}
.horizontal p {margin-bottom: 11px;}

/* Bullets / lists: always a struggle with Ektron. */
ul > li {list-style-type: disc;}
.PBItem, .list-unstyled > li {list-style-type: none;}
/* ✔ style bullets. Good for product pages. */
.checklist, .list-pros, .list-cons {
	padding: 0 0 0 40px;
}
	.checklist > li,
	.list-pros > li,
	.list-cons > li {
		list-style-type: none;
		margin: 0 0 10px;
		position: relative;
	}
	.list-pros > li,
	.list-cons > li {
		min-height: 30px;
		padding-left: 35px; 
		padding-bottom: 40px;
	}
	
	.list-pros h3, 
	.list-cons h3  
	    {
	    font-size: 20px;
	    }
	
	
		/* ✔ Tick icon */
		html .checklist > li:before,
		html .list-pros > li:before,
		.list-cons > li:before {
			left: -40px;
			position: absolute;
			/* Bullet aligned to the top */
			top: 5px;
			/* Bullet aligned to the middle */
			top: -2px;
		}
		/* ✔ Tick icon */
		.checklist > li:before,
		.list-pros > li:before {
			content: "\e974";
			color: #649c00;
		}

/* Another ✔ list, but with the ticks set inside a green circle. Used in conjunction with .list-cons. */
.list-pros > li:before {
	background: #649c00;
	border-radius: 2em;
	color: #fff;
	font-size: 1.175em;
	padding: .9em;
}

/* White (!) against orange, used with .list-pros, above. */
.list-cons > li:before {
	background: #d24702;
	border-radius: 2em;
	color: #fff;
	content: "!";
	font-size: 2.231em;
	padding: 0 .56em;
}
/* Lists without a bullet, but still with a bit of indentation
(used on the sitemap page) */
.list-bulletless, .list-bulletless > li {
	list-style-type: none;
	margin-left: 0;
	padding-left: 0;
}
	.list-bulletless ul, .list-bulletless ol {
		margin-left: 16px;
	}

/* Tabs - used in the footer */
.tab-header {
	display: table-row;
	margin: 0;
	padding: 0;
}
	.tab-header li {
		display: table-cell;
		list-style-type: none;
		padding: 0 1px 0 0;
	}
		.tab-header a {
			display: block;
			text-decoration: none;
		}
[role="tabpanel"], .tab-header a {padding: 7px 16px;}
[role="tabpanel"] {padding-top: 16px;}

/* Tabs in the main content be like... */
main .tabs {margin-bottom: 32px;}
	main [role="tabpanel"],
	main .tab-header a.active,
	main .tab-header a.active:hover,
	main .tab-header a.active:focus {
		background: #fff;
		color: #505050;
	}
/* Tabs in the footer be like... */
.group-footer [role="tabpanel"], .group-footer .tab-header a {
	background: #003526;
	color: #fff;
}
.group-footer [role="tabpanel"], .group-footer .tab-header a.active {
	background: #005f45;
}

/* Table styles */
table {
	width: 100%;
}
/* By default, captions match h3s */
caption {
	font-size: 25px;
	padding: 0;
}
th, td {
	background: #f1f1f1;
	border: solid 1px #fff;
	padding: 15px 22px;
	vertical-align: top;
}
thead th, thead td, .table-compact .st-head-row-main, .table-compact .st-key {
	background: #014a36;
	color: white;
	vertical-align: middle;
}
tfoot th, tfoot td {
	background: transparent;
	padding: 32px 0 0;
}
/* This seems worth porting over from the old site. I'm not sure if it's on brand. */
.charts th, .charts td {
	border-bottom: 1px solid #e6e6e6;
	background: #fff;
	padding: 5px 8px;
}
	th > *:last-child, td > *:last-child {margin-bottom: 0;}

/* This is used for the stacktable alternative treatment of tables on mobile devices. */
.table-compact th, .table-compact td {
	color: #505050;
	padding: 2px 5px;
}
/*
Responsive tables
zurb.com/playground/responsive-tables
Problematic page:
/international-savings/table/
*/
@media only screen and (max-width: 767px) {

	/* FB55210 */
	th, td {padding: 2px 5px;}

	.table-wrapper {
	    position: relative;
	    margin: 0 0 16px;
	    overflow: hidden;
	}
		/* The left-hand column */
		.pinned {
		    background: #fff;
		    border-right: 1px solid #fff;
		    left: 0;
		    overflow: auto;
		    position: absolute;
		    top: 0;
		    width: 35%;
		}
		/* The right-hand columns */
		.table-wrapper .scrollable {
			margin-left: 35%;
			overflow: auto;
		}
			table.responsive, .styled-stacktable {margin: 0;}
				.pinned td:last-child {border-bottom: 0;}
				.pinned td,
				.pinned th,
				.styled-stacktable th,
				.styled-stacktable td {
				    white-space: nowrap;
				    overflow: hidden;
				}
				.responsive th:first-child,
				.responsive td:first-child,
				.responsive td:first-child,
				.responsive.pinned td,
				.styled-stacktable th:first-child,
				.styled-stacktable td:first-child,
				.styled-stacktable td:first-child,
				.styled-stacktable.pinned td,
				.pinned tfoot,
				.table-wrapper caption {
				    display: none;
				}
}

/* Datepicker (uses tables styles) */
.ui-datepicker {padding: 0 10px 10px;}
.ui-datepicker, .ui-datepicker td {
	background: #014a36;
	color: #fff;
	font-size: 14px;
	text-align: center;
}
	/* Current year and month */
	.ui-datepicker-title {
		margin: 7px 20px;
		padding: 7px 0;
		position: relative;
		text-transform: uppercase;
	}
		/* < > */
		.ui-datepicker-header a {
			color: #fff;
			position: absolute;
			text-decoration: none;
			top: 15px;
		}
		/* < */
		.ui-datepicker-prev {left: 10px;}
			.ui-datepicker-prev:before {content: "\e912";}
		/* > */
		.ui-datepicker-next {right: 10px;}
			.ui-datepicker-next:before {content: "\e913";}

	.ui-datepicker table {margin: 0;}
	.ui-datepicker th, .ui-datepicker td {
		border: solid 1px #014a36;
		padding: 0;
	}
		.ui-datepicker td a, .ui-datepicker td span {
			display: block;
			padding: 2px 5px 0;
		}
		/* Available dates */
		.ui-datepicker td a {
			background: #fff;
			color: #014a36;
			text-decoration: none;
		}
		/* Unavailable dates */
		.ui-datepicker td span {
			background: #005a40;
			color: #6fa598;
		}

/* End table styles */

/* Buttons and call-to-actions
senary, septenary, octonary, nonary, denary
*/
.btn, .btn:hover, .btn:focus {
	border: none;
	display: inline-block;
	font-size: 18px;
	/* FB52623 */
	font-size: 17px;
	/* Old design guidelines */
	padding: 8px 32px 9px;
	/* New design guidelines */
	padding: 11px 24px;
	text-decoration: none;
}
/* Design guidelines */
@media (max-width: 768px) {

	.btn-primary, .btn-primary:hover, .btn-primary:focus,
	.btn-secondary, .btn-secondary:hover, .btn-secondary:focus,
	/* FB52623
	.btn-quaternary, .btn-quaternary:hover,*/
	.btn-quinary, .btn-quinary:hover, .btn-quinary:focus {
		display: block;
		padding-right: 35px;
		position: relative;
		text-align: center;
	}
	input.btn-primary,
	input.btn-secondary,
	input.btn-quinary,
	button.btn-primary,
	button.btn-secondary,
	button.btn-quinary {
		width: 100%;
	}
	/* FB52626. Commented out FB52623
	.btn-quaternary, .btn-quaternary:hover {text-align: left;}*/
		/* Icons (for example chevrons) are on the right, on mobile */
		.btn-primary .icon, .btn-secondary .icon, .btn-quinary .icon {
			position: absolute;
			right: 24px;
			top: 14px;
		}

}

/* This can be used as a modifying class on most buttons */
.btn-small, .btn-small:hover, .btn-small:focus {
	padding: 7px 24px;
}
	/* Probably a chevron. Perhaps not though. */
	.btn [class^="ic-"], .btn [class*=" ic-"] {
		font-size: 12px;
		margin: 0 0 0 16px;
		vertical-align: baseline;
	}
	.btn-small [class^="ic-"], .btn-small [class*=" ic-"] {
		margin: 0 0 0 12px;
	}

/* White text, on a lime (officially "apple") green gradient background. Example markup:
<a href="#" class="btn btn-primary">Click here<span class="sr-only"> for more information on investments</span></a>
*/
.btn-primary, .btn-primary:focus, .btn-primary:hover {
	background: #72a418;
	background: -webkit-gradient(left top, left bottom, color-stop(0, #72a418), color-stop(100%, #5a8d00));
	background: -webkit-linear-gradient(top, #72a418 0, #5a8d00 100%);
	background:    -moz-linear-gradient(top, #72a418 0, #5a8d00 100%);
	background:     -ms-linear-gradient(top, #72a418 0, #5a8d00 100%);
	background:      -o-linear-gradient(top, #72a418 0, #5a8d00 100%);
	background:   linear-gradient(to bottom, #72a418 0, #5a8d00 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#72a418', endColorstr='#5a8d00', GradientType=0 );
	color: #fff;
}
.btn-primary:focus, .btn-primary:hover {
	background: #649c00;
	color: #fff;
}

/* White text, on a green gradient background. Example markup:
<a href="#" class="btn btn-secondary">Click here<span class="sr-only"> for more information on investments</span></a>
*/
.btn-secondary,
[class^="bg-"] .btn-secondary,
[class*="bg-"] .btn-secondary,
main .tab-header a {
	background: #1a5c4a;
	background: -webkit-gradient(left top, left bottom, color-stop(0, #1a5c4a), color-stop(100%, #004331));
	background: -webkit-linear-gradient(top, #1a5c4a 0, #004331 100%);
	background:    -moz-linear-gradient(top, #1a5c4a 0, #004331 100%);
	background:     -ms-linear-gradient(top, #1a5c4a 0, #004331 100%);
	background:      -o-linear-gradient(top, #1a5c4a 0, #004331 100%);
	background:   linear-gradient(to bottom, #1a5c4a 0, #004331 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a5c4a', endColorstr='#004331', GradientType=0 );
	color: #fff;
}
.btn-secondary:hover, .btn-secondary:focus,
main .tab-header a:focus, main .tab-header a:hover {
	background: #026147;
	color: #fff;
}

/* A button style with no padding or background colour, but which still has a chevron. Example markup:
<a href="#" class="btn btn-quaternary">Click here<span class="sr-only"> for more information on investments</span> <i class="icon ic-chev-right"></i></a>
*/
.btn-quaternary, .btn-quaternary:hover, .btn-quaternary:focus {
	background: transparent;
	/* Bodytext */
	font-size: 16px;
	padding: 0;
}
.btn-quaternary:hover, .btn-quaternary:focus {
	/* FB54206 */
	/*text-decoration: underline;*/
	border-bottom: solid 1px green;
}
	/* Probably a chevron. Perhaps not though. */
	.btn-quaternary [class^="ic-"], .btn-quaternary [class*=" ic-"] {
		margin: 0 0 0 5px;
	}
	.btn-quaternary:hover em:before,
	.btn-quaternary:hover i:before,
	.btn-quaternary:focus em:before,
	.btn-quaternary:focus i:before {
		text-decoration: none;
	}

/* This is a button which sits against a solid colour, and needs to be a darker tint
of that colour. Rather than just define lots of different button types, or use
contextual selectors, I'm going to use transparency. Example markup:
<a href="#" class="btn btn-quinary">Click here<span class="sr-only"> for more information on investments</span></a>
*/
.btn-quinary {
	/* IE8 doesn't support rgba */
	background: url(../../img/international/bg-30-percent-black.png);
	background: rgba(0,0,0,.25);
	color: #fff;
}
.btn-quinary:focus, .btn-quinary:hover {
	background: rgba(0,0,0,.35);
}

/* A white button with green text, used on product pages as a navigation device.
It triggers a drop-down of other, similar products. */
.btn-senary {
	background: #fff;
	-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.2);
	   -moz-box-shadow: 0 1px 1px 0 rgba(0,0,0,.2);
	        box-shadow: 0 1px 1px 0 rgba(0,0,0,.2);
}
.btn-senary.open {
	background: #006a4d;
	color: #fff;
}
	/* ^ */
	.btn-senary.open .ic-chev-down:before {content: "\e90f";}

/* Used in the accordion styles */
.btn-accordion, .btn-accordion:hover, .btn-accordion:focus {
	background: #fff;
	border-bottom: solid 1px #e0e0e0;
	border-top: solid 1px #e0e0e0;
	display: block;
	margin: 0 0 -1px;
	padding: 17px 22px;
}
	.btn-accordion .shape {
		font-size: 1.5px;
		position: relative;
		top: 4px;
	}

.pane-accordion {
	background: #fff;
	border-bottom: solid 1px #e0e0e0;
	margin: 0 0 -1px;
	padding: 22px 22px 0 22px;
}
.pane-accordion.open {
	/* When jQuery shows and hides the pane, it adds this property.
	I need to remove it, because sometimes accordion panes have
	tooltips inside them. */
	overflow: visible !important;
}
/* return false IN CSS! */
.btn-accordion-xs {pointer-events: none;}

/* This is used in the footer, for an accordion which only becomes apparent at small breakpoints. */
@media (max-width: 768px) {
	.btn-accordion-xs, .group-footer .btn-accordion {
		background: #004a36;
		border-bottom: 1px solid #003526;
		border-top: 1px solid #003526;
		display: block;
		margin: 0 0 -1px;
		padding: 17px 0;
		pointer-events: auto;
	}
	.group-footer .btn-accordion {
		 font-size: 20px;
	}
	.btn-accordion-xs.open, .group-footer .btn-accordion.open {
		border-bottom: 1px solid #004a36;
	}

		/* + and - */
		.btn-accordion-xs .shape,
		.btn-accordion-xs .shape:before,
		.group-footer .btn-accordion .shape,
		.group-footer .btn-accordion .shape:before {
			background: #fff;
			font-size: 1.8px;
		}

		/* FB56689 Usually, you can resize CSS shapes using the
		font-size declaration. Unfortunately, this didn't seem
		to work on some Samsung Android thing. So the em values
		are converted directly to pixels. */
		.btn-accordion-xs .shape,
		.group-footer .btn-accordion .shape {
			height: 3.6px; /* ~ 2em */
			margin: 7.2px 0; /* ~ 8em */
			width: 18px; /* ~ 10em */
		}
			.btn-accordion-xs .shape:before,
			.group-footer .btn-accordion .shape:before {
				left: 7.2px;
				width: 3.6px;
			}

			.btn-accordion-xs .sh-plus:before,
			.group-footer .btn-accordion .sh-plus:before {
				height: 18px;
				top: -7.2px;
			}
			/* This is done to make the animation look nice */
			.btn-accordion-xs .sh-minus:before,
			.group-footer .open > .sh-plus:before {
				height: 3.6px;
				top: 0;
			}


	.pane-accordion-xs {
		border-bottom: 1px solid #003526;
		margin: 0 0 -1px;
	}

}

/* End button styles */

.cta {
	background: #fff;
	margin: 0 0 32px;
	padding: 22px 22px 11px;
}
/* FB53188: This is so that two Smart Forms, both of which
are .cta can butt up against each other. This assumes they
*both* are .cta. It'll probably look wonk if they ain't.
It's used on product pages. */
.cta-flush {
	border-bottom: solid 1px #fff;
	margin: 0;
	padding-bottom: 0;
}
	.cta hr {border-color: #ededeb;}

/* These class names are used for call-to-action panels and also for the icon boxes, further
down in this style sheet. */
.bg-core-green, html.js .bg-core-green,
.bg-international-green,
.bg-international-green:hover,
.bg-international-green:focus,
html.js .bg-international-green {
	background: #004a36;
	color: #fff;
}
/* While the following colours use the *names* which appear in the official colour pallet,
the colours themselves are taken from the 15% black column. */
.bg-purple, html.js .bg-purple {
	background: #3d1159;
	color: #fff;
}
.bg-dark-blue, html.js .bg-dark-blue {
	background: #0b487f;
	color: #fff;
}
.bg-light-blue, html.js .bg-light-blue {
	background: #1c6696;
	color: #fff;
}
.bg-muted-green, html.js .bg-muted-green {
	background: #6b9182;
	color: #fff;
}
/* Not part of the original background, but it's in the brand guidelines, and
was added originally for the checkbox styles (see below).
.bg-apple-green, html.js .bg-apple-green {
	background: #649c00;
	color: #fff;
}*/
.bg-teal, html.js .bg-teal {
	background: #024e59;
	color: #fff;
}
.bg-red, html.js .bg-red {
	background: #BB2442;
	color: #fff;
}
.bg-orange, html.js .bg-orange {
	background: #b33d02;
	color: #fff;
}
.bg-grey, html.js .bg-grey {
	background: #505050;
	color: #fff;
}
/* FB55205 */
thead th .bg-core-green,
html.js thead th .bg-core-green,
thead th .bg-international-green,
html.js thead th .bg-international-green {
	border: solid 2px #fff;
}
	[class*='bg-'] a,
	[class*='bg-'] h1,
	[class*='bg-'] h2,
	[class*='bg-'] h3,
	[class*='bg-'] h4,
	[class*='bg-'] h5,
	[class*='bg-'] h6,
	[class*='bg-'] .h1,
	[class*='bg-'] .h2,
	[class*='bg-'] .h3,
	[class*='bg-'] .h4,
	[class*='bg-'] .h5,
	[class*='bg-'] .h6,
	[class*='bg-'] caption {
		color: #fff;
	}
	[class*='bg-'] .keyline:after {
		background: #fff;
	}

/* This used to be .box, but it acts exactly like a .cta with a background colour.
However, as it's a very light colour, this causes ... issues. */
.bg-light-grey {
	background: #f1f1f1;
	color: #505050;
}
	.bg-light-grey h1,
	.bg-light-grey h2,
	.bg-light-grey h3,
	.bg-light-grey h4,
	.bg-light-grey h5,
	.bg-light-grey h6,
	.bg-light-grey .h1,
	.bg-light-grey .h2,
	.bg-light-grey .h3,
	.bg-light-grey .h4,
	.bg-light-grey .h5,
	.bg-light-grey .h6,
	.bg-light-grey caption {
		color: #323233;
	}
		.bg-light-grey .keyline:after {background: #75ba00;}
		.bg-light-grey a,
		.bg-announcement a {
			color: #006a4d;
		}

/* Because why should background have all the fun? Let's apply the same colours to *anything*. */
.txt-core-green, .txt-international-green {color: #004a36;}
.txt-purple      {color: #3d1159;}
.txt-dark-blue   {color: #0b487f;}
.txt-light-blue  {color: #1c6696;}
.txt-muted-green {color: #6b9182;}
.txt-apple-green {color: #649c00;}
.txt-teal        {color: #024e59;}
.txt-red         {color: #BB2442;}
.txt-orange      {color: #b33d02;}
.txt-grey        {color: #505050;}

/* This is designed to be used (for example) on a <hr/>, so that it stretched out to the
sides of a .cta, inside the gutters. When creating a new padded element, please remember
to add a contextual selector for .inside-gutter. */
.inside-gutter {
	margin-left: -22px;
	margin-right: -22px;
}
/* This class is added to the same element as the above, but is used for accordions. */
.cta .inside-gutter {
	margin-bottom: -11px;
	margin-top: -22px;
}
/* FB55128: Accordions need to be inside the padding of CTAs, apart from when they don't. */
.cta.match-height .inside-gutter, .cta.has-title .inside-gutter {
	margin-top: 0;
}
/* This is used as a sibling of .cta, to hold images which sit above the call-to-action but
are flush with the edges of the column which holds both elements. */
.img {margin: 0;}
	.img img {min-width: 100%;}

/* Once these image call-to-actions get small, they behave like media object. */
@media (max-width: 992px) {
	.cta-image, .cta-image .cta {overflow:hidden;}
	.cta-image .img {
		background: #fff;
		float:left;
		/* Because the images are *huge*! */
		max-width: 60%;
		padding: 22px;
	}
	.cta-image .img img{min-width: 0;}
}

/* Once these image call-to-actions get smaller, they stack */
@media (max-width: 768px) {

	.cta-image .img {
		float:none;
		max-width: 100%;
		padding: 0;
	}
		.cta-image .img img {min-width: 100%;}

}

img, video {max-width: 100%;}
/* The above rule plays merry-hell with Android and Bootstrap 3's
Media Object layout */
.media img {max-width: none;}
hr {
	border-color: #cfceca;
	margin: 0 0 32px;
}
/* Used to split form elements from the submit button */
hr.stub {
	border-top-color: #d8d8d8;
	width: 30px;
}
/* Forms
Bootstrap, you so silly! */
fieldset {
	border: none;
	margin: 0;
	padding: 0;
}
	/* FB55582: In order to match the design's non-standard leading, I'm using an
	ugly selector. */
	fieldset .lead strong {
		display: inline-block;
		padding: 0 0 .5em;
	}
	input, .chosen-container .chosen-single, .chosen-container .chosen-results {
		border: solid 1px #bfbfbf;
		/* For Chrome on iOS */
		border-radius: 0;
		box-sizing: border-box;
		padding: 7px 16px;
	}
	/* Because that list of countries is *silly*! */
	.chosen-container .chosen-results {
		max-height: 300px;
		overflow: auto;
	}
	input {
		min-width: 237px;
		max-width: 100%;
	}
	input[type="checkbox"],
	input[type="radio"],
	input[type="submit"],
	input[type="button"],
	.chosen-search input {
		min-width: 0;
	}

	/* For the search results page */
	.input-search {
		margin: 0 2em 0 0;
		padding: 11px 16px;
		vertical-align: top;
		width: 500px;
	}

	/* "Chosen" select box replacement styles */
	.chosen-container {
		display: inline-block;
		position: relative;
		-webkit-user-select: none;
		   -moz-user-select: none;
		        user-select: none;
		vertical-align: top;
	}
		.chosen-single {
			display: block;
			overflow: hidden;
		}
			/* This wraps round the currently selected option text */
			.chosen-container-single .chosen-single span {
				display: block;
				overflow: hidden;
				margin: 0 1em 0 0;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			/* v or ^ */
			.chosen-single b {
				color: #006a4d;
				font-size: 11px;
				position: absolute;
				right: 16px;
				top: 11px;
			}
				/* v  */
				.chosen-single b:before {content: "\e90f";}
				/* ^ */
				.chosen-with-drop .chosen-single b:before {content: "\e916";}

		.chosen-container .chosen-drop {
			background: #fff;
			color: #505050;
			left: -9999px;
			margin: -1px 0 0;
			position: absolute;
			top: 100%;
			width: 100%;
			z-index: 1010;
		}
		.chosen-container.chosen-with-drop .chosen-drop {
			left: 0;
		}
		.chosen-container .search-choice .group-name, .chosen-container .chosen-single .group-name {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.chosen-container .search-choice .group-name:after, .chosen-container .chosen-single .group-name:after {
			content: ":";
			vertical-align: top;
		}
			.chosen-container ul, .chosen-container li {
				cursor: default;
				list-style: none;
				margin: 0;
				padding: 0;
			}
			.chosen-container a, .chosen-container a:hover {
				background: #fff;
				color: #505050;
				text-decoration: none;
			}
			.chosen-search {
				margin: -2.4em 0 0;
			}
				.chosen-search input {
					border-bottom: none;
					display: block;
					width: 100%;
				}
				.chosen-results em {
					color: #000;
					font-style: normal;
					text-decoration: underline;
				}
/* Chosen is automatically disabled on mobile, but those cheeky select boxes can get pretty long... */
select {
	background: #fff;
	border: 1px solid #bfbfbf;
	padding: 7px 16px;
}
@media (max-width: 992px) {
	/* This rule is brought to you by FB55491 and FB56547 */
	select {
		width: 100%;
		max-width: 100%;
	}
	.chosen-container, select {
		margin: 0 0 .5em;
	}
}

/* End "Chosen" styles */

	/* This allows custom checkboxes without JavaScript. The checkbox itself is hidden earlier in the stylesheet,
	as the markup is inflexible, and won't let me add a .sr-only class to it (thanks, .NET).

	The fake checkbox, unchecked. */
	.check-replace .icon-box {
		color: #fff;
		background: #fff;
		font-size: 13px;
		padding: .6em .8em;
	}
	.check-replace .icon-box,
	.radio-replace label:before {
		border: solid 1px #c0c0c0;
		margin: 0 10px 10px 0;
        -webkit-transition: all 200ms;
           -moz-transition: all 200ms;
             -o-transition: all 200ms;
                transition: all 200ms;
	}

	/* The fake checkbox, checked. */
	.check-replace input:checked + label .icon-box {
		background: #649c00;
		border: solid 1px #649c00;
	}

	.radio-replace label, .check-replace label {
		cursor: pointer;
		display: block;
	}
		/* As above, but for radio buttons */
		.radio-replace label:before {
			border-radius: 16px;
			content: "";
			display: inline-block;
			height: 32px;
			vertical-align: middle;
			width: 32px;
		}
		/* The radio button, checked. */
		.radio-replace input:checked + label:before {
			border: solid 10px #649c00;
		}
		/* The radio and check button, in focus (for accessibility) */
		.radio-replace input:focus + label:before,
		.check-replace input:focus + label .icon-box {
			outline: dotted .1em #649c00;
		}

	/* Error messages */
	.error {color: #dc2a2a;}
	input.error,
	.chosen-container.error,
	.error .chosen-results {
		border: solid 1px #dc2a2a;
	}

/* End forms */

/* An attempt to fix margins collapsing on .match-height elements. Caused issues when Bootstrap layouts were put inside
.match-height, or when there was a long word.
.match-height {overflow: auto;}*/
/* Hey! Guess what? It caused issues.
.match-height.overflow {overflow: visible;}*/
/* An attempt to fix margins collapsing on Media Object elements */
p.media-left {padding-bottom: 16px;}
/* Used for JavaScript show/hide stuff */
.js .js-hide,
.js .tabs [role="tabpanel"],
.touch-only {
	display: none;
}
.tabs [role="tablist"],
.editmode .tabs [role="tabpanel"],
.touch .touch-only {
	display: block;
}

/* Ektron preview mode */
.previewPanel {
    background: #FFF;
    border: 1px solid #FFA500;
    color: #000;
    cursor: move;
    left: 200px;
    opacity: .3;
    padding: 5px 5px 0;
    position: absolute;
    top: 50px;
    width: 140px;
    z-index: 999999;
}
.previewPanel.ui-draggable-dragging, .previewPanel:hover {
	opacity: 1;
}
	.previewPanel h4 {
	    background-color: #FFA500;
	    color: #FFF;
	    font-size: 12px;
	    padding: 5px 10px;
	}
	.previewPanel p {
		font-size: 12px;
		margin: 0 0 .5em;
	}
	.previewPanel input{padding: 0 5px;}
	.on h4, .on input {
	    background-color: #FFA500;
	    color: #FFFFFF;
	}
	.off h4, .off input {background-color: #3C0;}
	/* Causes issues with form validation
	.error h4, .error input {background-color: #F00;}*/
@media (max-width: 768px) {
	.previewPanel {
		left: 0;
		top: 0;
	}
}

/* end Ektron preview mode */
/* Ektron fixes */
div.CBEdit div#CBResults {overflow: auto !important;}
.ektronWindow li,
.EktronPersonalizationWrapper ul,
.EktronPersonalizationWrapper li {
	list-style: none;
}
div.EktronPersonalizationWrapper ul.dropdownProps {
	padding: 0;
}
.EktronPersonalizationWrapper th, .EktronPersonalizationWrapper td {
	border: none;
	padding: 2px 5px;
}

/* The dark green footer, with the search and all those links on it */
.group-footer {
	background: #004a36;
	color: #fff;
	padding: 32px 0 20px;
}
	.group-footer a,
	.group-footer h1,
	.group-footer h2,
	.group-footer h3,
	.group-footer h4,
	.group-footer h5,
	.group-footer h6,
	.group-footer .h1,
	.group-footer .h2,
	.group-footer .h3,
	.group-footer .h4,
	.group-footer .h5,
	.group-footer .h6 {
		color: #fff;
	}
	.group-footer hr {border-color: #003526;}

	/* The search in the footer of each page */
	.footer-search {
		margin: 0 0 32px;
		padding: 0 15px;
	}
	.footer-search, .footer-search input, .footer-search button {
		background: #003526;
		color: #fff;
	}
		.footer-search p {
			margin: 0;
			position: relative;
		}
			.footer-search input, .footer-search button {
				border: none;
				display: inline-block;
			}
			.footer-search input {
				box-sizing: border-box;
				padding: 13px 2em 13px 0;
				vertical-align: middle;
				width: 100%;
			}
			.footer-search button {
				position: absolute;
				right: 0;
				top: 26%;
			}
	/* FB55561 */
	@media (max-width: 767px) {
		.group-footer .col-sm-push-6.text-right {text-align: left;}
	}

/* CSS shapes - creating vector icons with no images or external files.
See: labs.realise.com/rossa/css-icons
Example markup:
<i class="shape sh-burger"><b class="sr-only">Toggle navigation</b></i>
... or if used next to a text label:
<i class="shape sh-burger"></i>
General icon class */
.shape {
	box-sizing: border-box;
	display: inline-block;
	font-size: 1px;
	position: relative;
	vertical-align: middle;
}
	.shape, .shape:before, .shape:after {
	    -webkit-transition: all .2s;
	       -moz-transition: all .2s;
	         -o-transition: all .2s;
	            transition: all .2s;
	}
	.shape:before, .shape:after {
		content: "";
		position: absolute;
	}

/* ≡ "Classic" burger menu */
.sh-burger {margin: 8px 0;}
.sh-burger, .sh-burger:before, .sh-burger:after {
	background: #fff;
	border-radius: 1px;
	height: 4px;
	left: 0;
	width: 20px;
}
	.sh-burger:before {top: -8px;}
	.sh-burger:after {bottom: -8px;}
	.open .sh-burger,
	.open .sh-burger:before,
	.open .sh-burger:after {
		background: #005f45;
	}

/* + and - : used for the accordion */
.sh-plus, .sh-minus {
	background: #006a4d;
	height: 2em;
	margin: 4em 0;
	width: 10em;
}
	.sh-plus:before, .sh-minus:before {
		background: #006a4d;
		left: 4em;
		width: 2em;
	}
	.sh-plus:before {
		height: 10em;
		top: -4em;
	}
	/* This is done to make the animation look nice */
	.sh-minus:before,
	.open > .sh-plus:before {
		height: 2em;
		top: 0;
	}

/* Right-pointing triangle - used on the "demo" page */
.sh-play {
	border: solid 5em transparent;
	border-right: none;
	border-left: solid 8em #fff;
	margin: 1em 5em 3em 5em;
}

/* Sometimes, the icons below need to sit inside a wee box, which has one of the brand colours in it.
Luckily, the brand colours have already been defined for the call-to-action panels, for example:
<b class="icon-box bg-international-green"><i class="icon ic-search-alt"></i></b>
*/
.icon-box, .icon-disc {
	display: inline-block;
	margin: 0 0 .4em;
	padding: .3em .4em;
}

/* As above, but it's a circle, not a box. It's used (in conjunction with a background
colour) for the tooltip icon: (?)
It's also used in the messages which appear at the top of all pages sometimes: (!) */
.icon-disc {
	border-radius: 50%;
	padding: .05em 0 .4em;
	padding: .2em 0 .4em;
	min-width: 1.8em;
	text-align: center;
}
.ic-tip.icon-disc {
	font-size: 12px;
}

/* Sometimes, icons are used to display a tooltip. .ic-tip should be
an anchor, so that it has focus. */
.ic-tip {
	cursor: help;
	position: relative;
	text-decoration: none;
}
	/* Tooltip text */
	.ic-tip .tip {
		background: #006a4d;
		bottom: 35px;
		color: #fff;
		font-size: 14px;
		font-style: normal;
		left: -140px;
		margin: 0 0 0 21px;
		opacity: 0;
		padding: 16px;
		position: absolute;
        -webkit-transition: opacity 200ms, z-index 200ms;
           -moz-transition: opacity 200ms, z-index 200ms;
             -o-transition: opacity 200ms, z-index 200ms;
                transition: opacity 200ms, z-index 200ms;
		text-align: left;
		width: 280px;
		z-index: -1;
	}
	/* Tooltips have a close button, but only if the user has JavaScript enabled. This leaves space for it. */
	.js .ic-tip .tip {
		padding-right: 43px;
	}

	/* Left-aligned version */
	.ic-tip.tip-left .tip {
		left: -10px;
		margin: 0;
	}
	/* Right-aligned version */
	.ic-tip.tip-right .tip {
		left: auto;
		right: -10px;
	}
		/* FB56663: Close button (✖). This is not added as a :before or :after as those elements are not part
		of the DOM, in a JavaScript sense, and clicks on them can't be intercepted. */
		.js .ic-tip .tip ins {
			cursor: pointer;
			padding: 16px;
			position: absolute;
			right: 0;
			text-decoration: none;
			top: 0;
		}

	/* .no-tail is used at extremely narrow viewport widths, where the tooltip needs to
	take up all of the available space, and the "tail" comes from the (?) trigger.
	The left and right values are calculated in main.js. */
	.no-tail .tip {
		margin: 0;
		width: auto;
	}

	/* The tooltip works perfectly without JavaScript in desktop browsers. Unfortunately, the iPhone's inconsistent
	interpretation of hover and apparent ignoring of focus means we need a JS solution. This is the fall back. */
	.no-js .ic-tip:focus .tip,
	.ic-tip.on .tip {
		opacity: 1;
		z-index: 1;
	}

	/* At this narrow size, JavaScript is used to size the tip.
	The below rules are to prevent the tip from sticking out
	of the viewport of the browser and causing horizontal
	scrolling (even though the tip is not visible). This means
	the CSS animation won't work. */
	@media (max-width: 495px) {
		.js .ic-tip .tip {display: none;}
		.js .ic-tip:focus .tip,
		.js .ic-tip.on .tip {
			display: block;
		}
	}
		/* Let's gee it a wee tail.
		The tail appears in two places: if the trigger for the
		tooltip is all the way right or left, or if the screen
		size is tiny, then the tail is part of the trigger
		element (.ic-tip). If the tooltip appears normally, it's
		part of .tip. */
		.ic-tip .tip:before,
		.no-js .no-tail:focus:before,
		.no-tail.on:before {
			box-sizing: border-box;
			border: solid 10px transparent;
			border-bottom: none;
			border-top: solid 8px #006a4d;
			content: "";
			position: absolute;
		}
		.ic-tip .tip:before {
			right: 50%;
			bottom: -8px;
		}
		/* Speech bubble tail, narrow version */
		.no-js .no-tail:focus:before,
		.no-tail.on:before {
			left: 0;
			top: -16px;
		}
		.ic-tip.tip-left .tip:before {
			right: auto;
			left: 10px;
		}
		.ic-tip.tip-right .tip:before {
			right: 10px;
		}
		.no-tail .tip:before {
			display: none;
		}

/* Font icons. Example markup:
<i class="ic-search-alt"><b class="sr-only">Search</b></i>
... or if used next to some text:
<i class="ic-search-alt"></i>
*/
.ui-datepicker-prev:before,
.ui-datepicker-next:before,
.checklist > li:before,
.list-pros > li:before,
.chosen-single b:before,
.bx-controls-direction a:before,
[class^="ic-"], [class*=" ic-"] {
	font-family: "lloyds-icons" !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 1;
    speak: none;
    text-transform: none;
    vertical-align: middle;
}

.ic-account:before {content: "\e900";}
.ic-apply:before {content: "\e901";}
.ic-arrows-circular:before {content: "\e902";}
.ic-ask-a-question:before {content: "\e903";}
.ic-at-sign:before {content: "\e904";}
.ic-banking-services:before {content: "\e905";}
.ic-boiler:before {content: "\e906";}
.ic-book-appointment:before {content: "\e907";}
.ic-box:before {content: "\e908";}
.ic-branch:before {content: "\e909";}
.ic-calculator:before {content: "\e90a";}
.ic-calendar:before {content: "\e90b";}
.ic-car:before {content: "\e90c";}
.ic-card:before {content: "\e90d";}
.ic-cash:before {content: "\e90e";}
.ic-chev-down:before {content: "\e90f";}
.ic-chev-left:before {content: "\e910";}
.ic-chev-light-down:before {content: "\e911";}
.ic-chev-light-left:before {content: "\e912";}
.ic-chev-light-right:before {content: "\e913";}
.ic-chev-light-up:before {content: "\e914";}
.ic-chev-right:before {content: "\e915";}
.ic-chev-up:before {content: "\e916";}
.ic-cinema-tickets:before {content: "\e917";}
.ic-clock:before {content: "\e918";}
.ic-cloud:before {content: "\e919";}
.ic-cog:before {content: "\e91a";}
.ic-compare:before {content: "\e91b";}
.ic-credit-cards:before {content: "\e91c";}
.ic-current-account:before {content: "\e91d";}
.ic-deferred-checking:before {content: "\e91e";}
.ic-depositors-compensation-scheme:before {content: "\e91f";}
.ic-dollar:before {content: "\e920";}
.ic-download:before {content: "\e921";}
.ic-duration:before {content: "\e922";}
.ic-eating-out:before {content: "\e923";}
.ic-email:before {content: "\e924";}
.ic-euro:before {content: "\e925";}
.ic-eu-savings:before {content: "\e926";}
.ic-filing-cabinet:before {content: "\e927";}
.ic-financial-management:before {content: "\e928";}
.ic-forward-fx:before {content: "\e929";}
.ic-fund-prices:before {content: "\e92a";}
.ic-guidance:before {content: "\e92b";}
.ic-gutter:before {content: "\e92c";}
.ic-help:before {content: "\e92d";}
.ic-home:before {content: "\e92e";}
.ic-idea:before {content: "\e92f";}
.ic-income-strategy:before {content: "\e930";}
.ic-information:before {content: "\e931";}
.ic-insurance:before {content: "\e932";}
.ic-interatinal-banking-explained:before {content: "\e933";}
.ic-international-banking:before {content: "\e934";}
.ic-international-bonus-saver-account:before {content: "\e935";}
.ic-international-current-account:before {content: "\e936";}
.ic-international-money-transfer:before {content: "\e937";}
.ic-international-property:before {content: "\e938";}
.ic-international-tax:before {content: "\e939";}
.ic-internet-banking:before {content: "\e93a";}
.ic-investment-advice:before {content: "\e93b";}
.ic-investment-guide:before {content: "\e93c";}
.ic-investment-risk:before {content: "\e93d";}
.ic-investments:before {content: "\e93e";}
.ic-isa:before {content: "\e93f";}
.ic-island-commercial:before {content: "\e940";}
.ic-key-motor:before {content: "\e941";}
.ic-limit-order-fx:before {content: "\e942";}
.ic-loans:before {content: "\e943";}
.ic-lock:before {content: "\e944";}
.ic-magazine:before {content: "\e945";}
.ic-managing-wealth:before {content: "\e946";}
.ic-map-uk:before {content: "\e947";}
.ic-mobile-banking:before {content: "\e948";}
.ic-moneymanager:before {content: "\e949";}
.ic-money-secure:before {content: "\e94a";}
.ic-mortar-board:before {content: "\e94b";}
.ic-mortgages:before {content: "\e94c";}
.ic-multi-currency:before {content: "\e94d";}
.ic-multi-manager:before {content: "\e94e";}
.ic-newspaper:before {content: "\e94f";}
.ic-office:before {content: "\e950";}
.ic-online-portfolio-service:before {content: "\e951";}
.ic-other-services:before {content: "\e952";}
.ic-overdraft:before {content: "\e953";}
.ic-payments:before {content: "\e954";}
.ic-person:before {content: "\e955";}
.ic-phone:before {content: "\e956";}
.ic-phone-bank:before {content: "\e957";}
.ic-pie-graph:before {content: "\e958";}
.ic-pipe:before {content: "\e95a";}
.ic-plane:before {content: "\e95b";}
.ic-pound:before {content: "\e95c";}
.ic-quote:before {content: "\e95d";}
.ic-rate:before {content: "\e95e";}
.ic-readme:before {content: "\e95f";}
.ic-regular-currancy-plan:before {content: "\e960";}
.ic-regular-saver:before {content: "\e965";}
.ic-save:before {content: "\e966";}
.ic-savings-accounts:before {content: "\e967";}
.ic-search:before {content: "\e968";}
.ic-search-alt:before {content: "\e969";}
.ic-secure:before {content: "\e96a";}
.ic-social-media:before {content: "\e96b";}
.ic-spot-fx:before {content: "\e96c";}
.ic-statement:before {content: "\e96d";}
.ic-state-school:before {content: "\e96e";}
.ic-strategy:before {content: "\e96f";}
.ic-support:before {content: "\e970";}
.ic-switching:before {content: "\e971";}
.ic-target:before {content: "\e972";}
.ic-theater:before {content: "\e973";}
.ic-tick:before {content: "\e974";}
.ic-timer:before {content: "\e975";}
.ic-transfer:before {content: "\e976";}
.ic-transit-van:before {content: "\e977";}
.ic-travel-services:before {content: "\e978";}
.ic-triage-tool:before {content: "\e979";}
.ic-trust:before {content: "\e97a";}
.ic-wealth-structure:before {content: "\e97b";}
.ic-what-you-need:before {content: "\e97c";}
.ic-windows:before {content: "\e97d";}
.ic-facebook:before {content: "\e961";}
.ic-twitter:before {content: "\e962";}
.ic-youtube:before {content: "\e963";}
.ic-vimeo:before {content: "\e964";}
.ic-linkedin:before {content: "\e959";}
.ic-file-pdf:before {content: "\e982";}
.ic-file-word:before {content: "\e983";}
.ic-file-excel:before {content: "\e984";}