@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css?family=Lato|Alegreya+Sans');

/* Sets page scroll to be smoother, and prevents horizontal scrolling */
html{
	scroll-behavior: smooth;
	overflow-x: hidden;
}

body{	
	font-family: Lato, sans-serif;
}

h3, .navbar a, .freephone, .freephone a, .banner h1, .banner h2, .banner h2 a, .keypoints h3, .servicebanner h2, .servicebanner ul li{	
	font-family: Alegreya Sans, sans-serif;
}

/* Removes underlines and changes all anchor tags' colours */
body a{
	text-decoration: none;
	color: #456f4b;
}

/* Changes anchor tag colours when hovered that are within the following containers */
body a:hover, .banner a:hover, .banner a:hover, .cta a:hover{
	text-decoration: none;
	color: #737373;
}

/* Prevents scrolling on the CTA dialogue popup after mobile sidenav has been opened */
body.modal-open{
	overflow: hidden !important;
	width: 100%;
}

/* Adds borders to the CTA buttons */
.cta .btn, .banner .btn, .testimonialarea .btn{
	border: 1px solid #95A3B2;
	border-bottom: 4px solid #95A3B2;
}

/* Removes the margin automatically applied to p tags */
p{
	margin: 0;
}

/* Multi Styles */
/* Padding values */
.p10{
	padding-top: 10px;
	padding-bottom: 10px;
}
.p25{
	padding-top: 25px;
	padding-bottom: 25px;
}
.p50{
	padding-top: 50px;
	padding-bottom: 50px;
}
.p100{
	padding-top: 100px;
	padding-bottom: 100px;
}

/* Margin values */
.m10{
	margin-top: 10px;
	margin-bottom: 10px;
}
.m25{
	margin-top: 25px;
	margin-bottom: 25px;
}
.m50{
	margin-top: 50px;
	margin-bottom: 50px;
}
.m100{
	margin-top: 100px;
	margin-bottom: 100px;
}

/* Font colours */
.keypoints h3{
	color: #5D7975;
}
.banner h1, .banner h2, .banner h2 a{
	color: #e5fffb;
	text-decoration: none;
}
.main h3, .services h3, .testimonialarea h3, .compliance h3{
	color: #000000;
}

/* End Multi Styles */

.asterisk{
	color: red;
}

.dividingline{
	height: 2px;
	border: 1px solid #5D7975;
}

.logo img{
	height: 100px;
}

/* Properties for the fixed bottom CTA container on mobile */
.mobilecta{
	-webkit-transition: 0.5s;
	position: fixed;
	bottom: 0;
	z-index: 98;
	opacity: 1;
	display: block;
	background-color: #70c5b9;
	color: #000;
}
.mobilecta span{
	padding: 10px;
}
.mobilecta a{
	text-decoration: underline;
	color: #000;
}
.mobilecta a:hover{
	color: #131313;
}
.mobilecta button{
	position: absolute;
	top: 0;
	right: 0;
}

.mobilectabutton{
	transition: opacity 0.5s ease-in-out;
	position: fixed;
	bottom: 0;
	right: 0;
	z-index: 97;
	opacity: 1;
	display: block;
	width: auto;
}
.mobilectabutton .col-md-12{
	padding-right: 0px;
}

.mobilectabutton img{
	padding: 15px;
	cursor: pointer;
}

/* Sets the bg colour for the CTA dialogue box header and footer */
.modal-header, .modal-footer{
	background-color: #f5fffd;
}

/* Makes the close button on the CTA dialogue box more visible */
.close{
	opacity: 1;
	text-shadow: 0 1px 0 #000;
}

/* Navigation styles */
/* Sidenav (mobile) */
.sidenavcontainer{
	display: none;
}
.sidenav{
	background-color: #f7fbff;
	height: 100%;
	width: 0;
	position: fixed;
	top: 0;
	z-index: 99;
	overflow-x: hidden;
	transition: 0.7s;
}
#sidenavBtn{
	transition: margin-left .5s;
	top: 10px;
	left: 20px;
	position: fixed;
	z-index: 99;
	cursor: pointer;
	color: #456f4b;
	font-size: 32px;
}
.sidenav a:not(.sidenavCloseBtn){
	padding: 8px 8px 8px 32px;
	color: black;
	display: block;
	font-size: 28px;
}
.sidenav a:nth-child(2){
	padding-top: 62px;
}
.sidenav a:hover{
	text-decoration: none;
	color: #737373;
}
.sidenavCloseBtn{
	padding: 10px;
	position: absolute;
	top: 0;
	right: 25px;
	color: black;
	font-size: 28px;
}

/* Navbar (desktop) */
.navbar{
	padding-top: 0;
}
.navbar a{
	font-size: 18px;
	color: #5D7975;
	text-decoration: none;
}
.navbar a:hover:not(.underline){
	color: #737373;
}

.underline{
	text-decoration: underline !important;
	color: #5D7975;
}

.underline a:hover{
	color: #5D7975 !important;
}

.dropdown-menu .underline:hover{
	color: #5D7975 !important;
}

.freephone, .freephone a{
	color: #5D7975;
}
.freephone a:hover{
	color: #737373;
}

/* Main content */
/* Banner at the top of the page */
.banner{
	background-image: url(banner.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.desk{
	display: block;
}

.mob{
	display: none;
}

.areas li{
	list-style-type: none;
	display: inline;
}

/* Banner at the bottom of the page */
.servicebanner{
	background-image: url(banner2.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.servicebanner h2{
	color: #e5fffb;
}
.servicebanner ul li{	
	background-image: url(wrench.png);
	background-repeat: no-repeat;
	min-height: 30px;
	padding-left: 45px;
	list-style-type: none;
	color: #e5fffb;
	vertical-align: middle;
}
.servicebanner ul{
	padding-inline-start: 0px;
}

/* CTA container near the bottom of the page */
.cta{
	background-color: #70c5b9;
}
.cta h4, .cta h4 a{
	color: #000;
	text-decoration: none;
}
.cta h4 a:hover{
	color: #9e8851;
}

/* Footer */
.footer{
	font-size: 12px;
}

@media only screen and (max-width: 991px){
	/* Resizes h tags so they display nicer on smaller devices */
	h1{
		font-size: 32px;
	}	
	h2{
		font-size: 28px;
	}	
	h3{
		font-size: 24px;
	}	
	h4{
		font-size: 20px;
	}
	
	/* Navigation styles */
	/* Sidenav (mobile) */
	.sidenavcontainer{
		display: inline;
	}
	.sidenav{
		box-shadow: 10px 0px 75px black;
	}
	
	/* Navigation (desktop) */
	.navigation{
		display: none;
	}

	.row .logo{
		margin: 0 auto;
	}
	
	.banner{
		padding-top: 25px;
		padding-bottom: 25px;
	}
	
	.banner h1{
		padding-bottom: 10px;
	}
	
	.banner h2:first-of-type{
		margin: 25px 0;
	}
	
	.banner h2:last-of-type{
		margin: 25px 0;
	}
	
	.figure-img{
		margin-top: 25px;
	}
}

@media only screen and (max-width: 767px){
	body{
		margin-bottom: 122px;
		transition: margin-bottom 0s linear 0.1s;
	}
	
	.top, .banner, .keypoints, .main, .services, .testimonialarea, .servicebanner, .cta, .compliance, .footer{
		padding-left: 30px;
		padding-right: 30px;
	}

	.testimonialarea .dividingline{
		width: 100% !important;
	}

	.servicebanner ul li{
		padding-left: 0;
		line-height: 36px;
	}
	
	.desk{
		display: none;
	}

	.mob{
		display: block;
	}
}

@media only screen and (max-width: 477px){	
	/* Required to prevent overlapping ul images at this screen width */
	.servicebanner ul li{
		background-image: none;
	}
}

button {
	
}