/*Style Sheet For Help To Buy Remortgages Website*/

body{
	margin:0;
	font-family:"komet";
}

h1, h2{
	text-transform:uppercase;
	color:#4C5B5C;
}

h1{
	font-size:40px;
}
h2{
	font-size:30px;
}

.white-h2{
	color:#fbfffe;
}

a{
	text-decoration:none;
}

ul{
	padding:0;
	margin:0;
}

p{
	color:#1b1b1e;
}

.site-container{
	position:relative;
	margin:0 auto;
	max-width:1024px;
}

@keyframes button{
    from {background:#fbfffe;}
    to {background:#fff354;}
}

.about-button{
	display:block;
	background:#4c5b5c;
	border-radius:10px;
	padding:10px;
	width:80px;
	margin:10px auto;
	font-weight:bold;
	font-size:14px;
	color:#fbfffe;
}
.about-button:hover, .single-page-button:hover{
	animation-name:button;
    animation-duration:1s;
	background:#fff354;
	color:#4c5b5c;
}

.home-nav .mobile-home-nav{
	display:none;
}
.mobile-nav-icon{
	display:none;
}

.home-nav{
	position:relative;
	background:rgba(76,91,92,0.9);
	height:55px;
	padding:6px 0;
}
.home-nav .desktop-home-nav{
	position:absolute;
    top:6px;
    left:90px;
}
.home-nav img{
	height:55px;
}
.home-nav .desktop-home-nav li{
	list-style:none;
	float:left;
	margin-right:20px;
	text-align:left;
}
.home-nav .desktop-home-nav a{
	color:#fbfffe;
	text-transform:uppercase;
	font-size:12px;
	font-weight:bold;
}
.home-nav .video-container{
	position:absolute;
	right:0;
}
.home-nav video{
	height:55px;
}

.home-header{
	position:relative;
	color:#4C5B5C;
	height:500px;
}
.home-header .background-image{
	position:absolute;
	height:100%;
	width:100%;
}
.home-header .background-image:before{
	content:"";
	position:absolute;
	background:#fbfffe;
	height:100%;
	width:100%;
	top:0;
	left:0;
	opacity:0.95;
	z-index:1;
}
.home-header .background-image img{
	width:100%;
	height:100%;
	object-fit:cover;
}
.home-header .home-big-logo{
	width:200px;
}
.powered-by-link{
	color:#4C5B5C;
}
.homepage-content h1{
	margin-bottom:0;
}
.home-header .homepage-content{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	text-align:center;
	z-index:2;
}
.home-header .homepage-content p{
	font-weight:bold;
	color:#4C5B5C;
}

.what-is-it-section{
	position:relative;
	width:90%;
	margin:0 auto;
	height:420px;
}
.what-is-it-section .what-is-it-content-container{
	position:absolute;
	top:0;
	left:0;
}
.what-is-it-section h2{
	text-align:left;
	margin-top:0;
	font-size:28px;
}
.what-is-it-section ul{
	display:flex;
	justify-content:center;
}
.what-is-it-section li{
	list-style:none;
	float:left;
	width:45%;
	height:262px;
	margin-right:2.5%;
	margin-left:2.5%;
}
.what-is-it-section li:first-child{
	margin-left:0;
}
.what-is-it-section li:last-child{
	margin-right:0;
}
.what-is-it-section img{
	width:100%;
	height:100%;
	object-fit:contain;
}
.what-is-it-section .text-container{
	font-size:14px;
	height:262px;
	overflow:scroll;
}
.what-is-it-section .text-container p:first-child{
	margin-top:0;
}

.information-section{
	position:relative;
	height:500px;
	text-align:center;
}

.background-image-container{
	position:absolute;
	width:100%;
	height:100%;
}
.background-image-container:before{
	content:"";
	position:absolute;
	left:0;
	top:0;
	background:#4C5B5C;
	opacity:0.76;
	width:100%;
	height:100%;
}
.background-image-container img{
	width:100%;
	height:100%;
	object-fit:cover;
}

.information-section ul{
	display:flex;
	justify-content:center;
}
.information-section li{
	list-style:none;
	float:left;
	margin-right:40px;
}
.information-section li:last-child{
	margin-right:0;
}
.information-section a{
	color:#1b1b1e;
	text-transform:uppercase;
	font-weight:bold;
	font-size:14px;
	background:rgba(255,255,255,0.85);
	padding:50px;
	display:block;
}

.information-content-container{
	position:absolute;
	left:0;
	right:0;
	top:0;
	z-index:1;
	margin:auto;
}
.information-content-container h2{
	margin-top:0;
	margin-bottom:40px;
}


/*Single Page Headers*/
.single-header{
	position:relative;
	height:350px;
	margin-bottom:40px;
}
.single-header .single-header-image-container{
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
}
.single-header .single-header-image-container:before{
	content:"";
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background:#fbfffe;
	opacity:0.85;
	z-index:1;
}
.single-header .single-header-image-container img{
	width:100%;
	height:100%;
	object-fit:cover;
}

.single-header .single-header-content{
	position:absolute;
	left:0;
	right:0;
	margin:auto;
	top:0;
	text-align:center;
	z-index:2;
}
.single-header .single-header-content h1{
	margin:0;
}

/*Single Page Content*/
.single-page-container{
	margin-bottom:40px;
}
.single-page-text-container{
	column-count:2;
	max-width:900px;
	margin:0 auto;
}
.single-page-text-container h2{
	font-size:20px;
	margin-top:35px;
	margin-bottom:0px;
}
.single-page-text-container h2:first-child{
	margin-top:0;
}
.single-page-text-container p{
	font-size:14px;
}
.single-page-text-container p:first-child{
	margin-top:0;
}
.single-page-text-container li{
	font-size:14px;
	margin-left:20px;
}
.single-page-text-container img{
	width:100%;
}
.single-page-text-container a{
	color:#1b1b1e;
	font-weight:bold;
}

.single-page-button{
	background:#4C5B5C;
	padding:10px 25px;
	display:block;
	width:84px;
	text-align:center;
	color:#fbfffe;
	font-weight:bold;
	font-size:14px;
	margin:20px auto;
	border-radius:10px;
}
.home-enquire-btn{
	margin-top:30px;
}

/*Calculator Page*/
.single-page-container .calculator-scripts{
	font-size:14px;
	color:#1b1b1e;
}
.single-page-container .calc-link-heading{
	display:block;
	text-align:center;
	font-size:30px;
	margin-bottom:20px;
}
.single-page-container .calculator-scripts a{
	color:#1b1b1e;
}
.single-page-container .calc-disclaimer{
	max-width:750px;
	text-align:center;
	margin:10px auto;
}

/*Pages with iframes*/
.iframe-container{
	margin:0 auto;
}
.iframe-container iframe{
	height:800px;
	width:100%;
}

/*Enquiry Page*/
.enquiry-iframe{
	display:block;
	height:610px;
	margin:0 auto;
}

.pre-footer{
	position:relative;
	height:150px;
	text-align:center;
	background:#fbfffe;
}
.pre-footer h2{
	margin-top:0;
	margin-bottom:20px;
}
.pre-footer ul{
	display:flex;
	justify-content:center;
}
.pre-footer li{
	float:left;
	list-style:none;
	margin-right:20px;
}
.pre-footer li:last-child{
	margin-right:0;
}
.pre-footer img{
	width:60px;
}
.pre-footer-content-container{
	position:absolute;
	top:0;
	left:0;
	right:0;
	margin:auto;
}

footer{
	text-align:center;
	background:#1b1b1e;
	padding:20px 40px 40px 40px;
}
footer p{
	color:#fbfffe;
	font-size:14px;
}
footer p:first-child{
	margin-top:0;
}
footer a{
	font-size:14px;
	text-decoration:none;
	color:#fbfffe;
}


/*Media Queries For Smaller Screens*/
/*
What Is It Section (Min Width) = 1113px (then scrolls)
Nav (Min Width) = 846px
Information (Min Width) = 715px
846px is first break point
*/

@media only screen and (max-width: 900px) {
	.single-page-text-container{
		padding:0 20px;
	}
}

@media only screen and (max-width: 1008px) {
	.home-nav .desktop-home-nav{
		display:none;
	}
	.home-nav .mobile-home-nav{
		position:absolute;
		top:61px;
		left:0;
		right:0;
		text-align:center;
		z-index:3;
		list-style:none;
		text-transform:uppercase;
		background:#4C5B5C;
		padding:20px 0;
	}
	.home-nav .mobile-home-nav li{
		margin-bottom:10px;
	}
	.home-nav .mobile-home-nav a{
		color:#fbfffe;
		font-weight:bold;
		font-size:12px;
	}

	.home-nav .mobile-nav-icon{
		display:block;
		position:absolute;
		background:#fbfffe;
		top:0;
		left:0;
		right:76px;
		margin:auto;
		width:50px;
		height:50px;
		border-radius:50%;
		z-index:4;
		cursor:pointer;
	}
	.home-nav .mobile-nav-icon .mobile-icon-line{
		font-size:0;
		position:absolute;
		left:0;
		right:0;
		top:0;
		bottom:0;
		margin:auto;
		background:#4C5B5C; 
		height:4px;
		width:80%;
	}
	.home-nav .mobile-nav-icon .mobile-icon-line:before{
		content:"";
		position:absolute;
		height:4px;
		width:80%;
		background:#4C5B5C;
		top:10px;
		left:0;
		right:0;
		margin:auto;
	}
	.home-nav .mobile-nav-icon .mobile-icon-line:after{
		content:"";
		position:absolute;
		height:4px;
		width:80%;
		background:#4C5B5C;
		bottom:10px;
		left:0;
		right:0;
		margin:auto;
	}
}