@font-face {
    font-family: gotham;
    src: url(https:///dev.responsible.org.uk/jw/trinity/iframe/fonts/fonts/trinity/gotham-medium.otf)
}
/* -- GENERAL STYLES - DO NOT CHANGE -- */
html, body { position: relative; display: block; width: 100%; margin: 0; padding: 0; overflow-x: hidden; background-color: #fff;}
h1, h2, h3, h4, h5, h6, p {color:#004e78;;}
h1 {font: 900 45px 'gotham'; margin-bottom: 20px;width:100%;}
h2 {font: 20px 'gotham'; margin-top: 10px;}
h3 {font-size: 30px; font-weight: 700; color: #004e78;;}
h4 {font: 20px 'gotham'; margin-top: 5px; margin-bottom: 0px;}
p {font-family: 'gotham', serif; font-size: 18px;}
a {color: inherit; text-decoration: none; border-bottom: 1px solid #e2542f;}
a:hover {color: inherit; text-decoration: none;}
ul {list-style-type: none; padding-left: 0px; margin-top: 30px; margin-bottom: 0px;}
ul li {position: relative; font: 20px 'gotham'; color: #58595b; margin-bottom: 20px;}
ul li i {color: #144372;}
label {font: 700 20px 'gotham'; color: #58595b; margin-bottom: 5px;}
label span {color: #e45324; font-size: 10px; line-height: 20px; vertical-align: middle;}
select {
    width: 100%;
    font: 26px 'gotham';
    color: #555555;
    line-height: 32px;
    padding: 15px 10px 14px 10px;
    border: 2px solid #afafaf;
    border-radius: 0px; 
    background-color: #fff;
    appearance: none;
    -webkit-appearance: none; 
    z-index: 10;
}
select:before{
   font-family: FontAwesome;
   content: "\f078";
 pointer-events: none;
	right:0px;
	
}
.retiredomLogo{
	max-width: 300px;
}
input {
    width: 100%;
    font: 26px 'gotham';
    color: #555555;
    line-height: 32px;
    padding: 15px 10px 14px 10px;
    border: 2px solid #afafaf;
    border-radius: 0px;
    background-color: #fff;
}
input[type=button] {height: 70px; width: 100%; font: 700 20px 'gotham'; color: #fff; line-height: 20px; padding: 15px 0px; border: none; border-radius: 0px; background-color: #144372;}
input[type=submit] {width: 100%; max-width: 280px; font: 700 20px 'gotham'; color: #fff; line-height: 20px; padding: 20px 0px; border: none; border-radius: 0px; background-color: #144372;}
::placeholder {font: 400 26px 'gotham'; text-align: left; color: #555555;}
.textCenter {text-align: center !important;}
.textRight {text-align: right;}

/* -- INTRO STYLES -- */
#introText {
    font-size: 24px;
    line-height: 32px;
    margin-bottom: 40px;
    width: 100%;
}

/* -- CALCULATOR STYLES -- */
	/*-- ALL STEPS -- */
		#calculatorWrapper {
			width: 100%;
			background-color: #fff;
			border-bottom: 3px solid #f2edec;
			transition: width .5s ease-in-out;
			padding-bottom: 25px;
		}
		.calculatorStep {
			display: none;
		}
		.calculatorStep.active {
			display: flex;
		}
		.leftCol {
			border-right: 3px solid #f2edec;
			padding-right: 30px;
		}
		.rightCol {
			padding-left: 30px;
		}
		.requiredNotice {
		    text-align: right;
		    font-size: 14px;
		    margin-top: 12px;
		}
		.requiredNotice span {
			color: #e45324;
			font-size: 10px;
			line-height: 20px;
			vertical-align: middle;

		}
		label.error {
			color: #e2542f;
		}
		input.error {
			color: #7a2f1f;
			border-color: #e45324;
		}
		input.error::placeholder {
			color: #e2542f;
		}
		.selectWrapper {
			position: relative;
			display: block;
		}
		.selectWrapper:hover {
			cursor: pointer;
			pointer-events: none;
		}
		.selectWrapper i {
			position: absolute;
			display: block;
			font-size: 30px;
			right: 20px;
			top: 22.5px;
			color: #e25430;
			z-index: 20;pointer-events: none;
		}
		.disclaimerText {
			font: 20px 'gotham';
			color: #58595b; 
			line-height: 26px;
			margin-top: 30px;
		}
	/*-- STEP ONE -- */
		#formStepOne .row:first-child {
			margin-bottom: 25px;
		}
		#stepOne .rightCol img {
			max-width: 500px;
			margin-top: 25px;
			width: 90%;
		}
		.rightCol ul li {
			padding-left: 30px;
		}
		.rightCol ul li i {
			position: absolute;
			left: 0;
			top: 4px;
		}
	/* -- STEP TWO -- */
		#stepTwo {
			padding-top: 25px;
		}
		#stepTwo ul {
			margin-top: 94px;
		}
	/* -- STEP THREE (RESULTS) -- */
		#stepThree h2 {
			font: 900 45px 'gotham';
			margin-bottom: 20px;
		}
		#stepThree h3 {
			font: 700 22px 'gotham';
			margin-bottom: 20px;
		}
		#stepThree p {
			font-size: 24px;
			margin-bottom: 28px;
		}
		#stepThree .resultBox {
			height: 125px;
			width: 100%;
			background-color: #144372;
			margin-bottom: 40px;
			padding-top: 20px;
		}
		#stepThree .resultBox h4 {
			font: 700 16px 'gotham';
			color: #fff;
			text-align: center;
			margin-bottom: 0px;
		}
		#stepThree .resultBox h5 {
			font: 700 65px 'gotham';
			color: #fff;
			text-align: center;
		}
		#stepThree #bookCall {
			height: 50px;
			width: 100%;
			max-width: 350px;
			font: 700 20px 'gotham';
			color: #fff;
			line-height: 20px;
			margin: 0 auto 0 auto;
			padding: 15px 0px;
			border: none;
			border-radius: 0px;
			background-color: #144372;
		}
		#stepThree ul {
			text-align: center;
			margin-top: 10px;
		}
		 #stepThree ul li {
			display: inline-block;
			margin-right: 10px;
		}
		#stepThree ul li:last-child {
			margin-right: 0px;
		}

/* -- DANS TAB STUFF -- */
.tab {
	position: relative;
	display: block;
	width: 99%;
	padding: 20px;
	background-color: #ececec;
	cursor: pointer;
	z-index: 1;
}
.tab:first-child {
	margin-right: auto;
}
.tab:last-child {
	margin-left: auto;
}
.tab.active {
	background-color: #f8f7f5;
	border-top: 2px solid #3c1e4d;
	cursor: unset;
}
.tab h4 {
	font: 25px 'gotham';
	color: #3c1e4d;
}
.tab h4 i {
	color: #144372;
}
.tabContent {
    position: relative;
    display: none;
    z-index: 2;
    margin-top: -2px;
    background-color: #f8f7f5;
    padding: 30px 12px 30px 12px;
}
.tabContent.active {
	display: block;
}

/* -- AMBZ TAB STUFF -- */

.leftTab {
	padding-right: 0;
    padding-left: 0;
}
#lifetimeMortgage {
	margin-left: 0;
}
.rightTab {
	padding-left: 0;
	padding-right: 0;
}
#retirementMortgage {
	margin-right: 0;
}
.buttonRow {
	text-align: center;
}
input#postcode {
	position: relative;
	border-top-right-radius: 12px;
	border-bottom-right-radius: 12px;
}
#postcodelookup {
	position: absolute;
	top: 0;
	right: 15px;
	border-top-right-radius: 12px;
	border-bottom-right-radius: 12px;
	height: 100%;
}

/* -- ADAPTIVE STYLES -- */
@media (max-width: 767.98px) {
	.leftCol {
		padding-bottom: 50px;
		padding-right: 15px;
		border-right: none;
		border-bottom: 3px solid #f2edec;
	}
	.rightCol {
		padding-left: 15px;
		padding-top: 50px;
		padding-bottom: 50px;
	}
	input[type="submit"] {
		width: 95%;
		margin-left: auto;
		margin-right: auto;
	}
	#calculatorWrapper ul, .rightCol ul {
		margin-top: 25px;
	}
	#calculatorWrapper {
		padding-bottom: 0px;
	}
	#customername {
		margin-top: 10px;
	}
	form h4.textRight {
		text-align: left;
		margin-bottom: 25px;
	}
}
@media (max-width: 575.98px) {
	body {
		padding-left: 15px;
		padding-right: 15px;
	}
	h1 {
	    font: 900 33px 'gotham';
	    margin-bottom: 20px;
	    text-align: left;
	}

	#introText {
	    font-size: 18px;
	    line-height: 24px;
	    margin-bottom: 30px;
	    text-align: left;
	}
	.leftCol {
		padding-left: 0px;
		padding-right: 0px;
	}
	.rightCol {
		padding-left: 0px;
		padding-right: 0px;
	}
	.tab h4 {
	    font: 18px 'gotham';
	    color: #3c1e4d;
	}
	#stepThree h2 {
	    font: 900 34px 'gotham';
	    margin-bottom: 20px;
	    text-align: left;
	    padding-bottom: 20px;
	    border-bottom: 2px solid #f2edec;
	}
	#formStepOne .row:first-child {
	    margin-bottom: 0;
	}
	select, input {
	    font-size: 22px;
	}
	::placeholder {
		font-size: 22px;
	}
	input[type=submit] {
		max-width: unset;
	}
	label {
	    font-size: 18px;
	    margin-bottom: 3px;
	}
	h3 {
		font-size: 24px;
	}
	ul li {
	    font: 18px 'gotham';
	}
	.disclaimerText {
	    font-size: 18px;
	    line-height: 22px;
	    margin-top: 30px;
	    text-align: left;
	}
	#stepThree .resultBox h4 {
		font-size: 14px;
	}
	#stepThree .resultBox h5 {
		font-size: 48px;
	}
	#stepThree p {
	    font-size: 18px;
	    margin-bottom: 24px;
	}
	#stepThree .resultBox {
	    margin-bottom: 10px;
	}
	.resultsRow3 {
		margin-top: 20px;
		border-top: 2px solid #f2edec;
		padding-top: 30px;
	}
}