@charset "utf-8";
/* CSS Document */
/* Google Font Imports */
@import url('https://fonts.googleapis.com/css?family=Lato|Alegreya+Sans');

/* HTML & Body Tags */
html{scroll-behavior: smooth; overflow-x: hidden;}
body{font-family: Lato, sans-serif;}
body a{text-decoration: none; color: #003b36;}
body a:hover, .banner a:hover, .banner a:hover, .cta a:hover{text-decoration: none;	color: #737373;}
body.modal-open{overflow: hidden !important; width: 100%;}
/* End HTML & Body Tags */


/* Multi Styling */
.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;}
.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;}
.asterisk{color: red;}
.dividingline{height: 2px; border: 1px solid #003b36;}
.underline{text-decoration: underline !important; color: #003b36;}
.underline a:hover{color: #003b36 !important;}
/* End Multi Styling */


/* Headings & P Tags */
h3{font-family: Alegreya Sans, sans-serif; color: #000000;}
p{margin: 0;}
/* End Headings & P Tags */


/* CTA Modal Tags */
.modal-header, .modal-footer{background-color: #f5fffe;}
.close{opacity: 1; text-shadow: 0 1px 0 #000;}
/* End CTA Modal Tags */


/* Mobilecta Container Tags */
.mobilecta{-webkit-transition: 0.5s; position: fixed; bottom: 0; z-index: 98; opacity: 1; display: block; background-color: #45706C; color: #fff;}
.mobilecta a{text-decoration: underline; color: #fff;}
.mobilecta a:hover{color: #131313;}
.mobilecta span{padding: 10px;}
.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;}
/* End Mobilecta Container Tags */


/* Top Container Tags */
.logo img{height: 100px;}
.navbar{padding-top: 0;}
.navbar a{font-family: Alegreya Sans, sans-serif; font-size: 18px; color: #003b36; text-decoration: none;}
.navbar a:hover{color: #737373;}
.dropdown-menu .underline:hover{color: #5D7975 !important;}
.sidenavcontainer{display: none;}
.sidenav{background-color: #f7fbff;	height: 100%; width: 0;	position: fixed; top: 0; z-index: 99; overflow-x: hidden; transition: 0.7s;}
.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;}
#sidenavBtn{transition: margin-left .5s; top: 10px;	left: 20px;	position: fixed; z-index: 99; cursor: pointer; color: #45706C; font-size: 32px;}
.sidenavCloseBtn{padding: 10px;	position: absolute;	top: 0;	right: 25px; color: black; font-size: 28px;}
.freephone{font-family: Alegreya Sans, sans-serif; color: #003b36;}
.freephone a{font-family: Alegreya Sans, sans-serif; color: #003b36;}
.freephone a:hover{color: #737373;}
/* End Top Container Tags */


/* Banner Container Tags */
.banner h1{font-family: Alegreya Sans, sans-serif; color: #e5e8eb;	text-decoration: none;}
.banner h2, .banner h2 a{font-family: Alegreya Sans, sans-serif; color: #e5e8eb; text-decoration: none;}
.banner{background-image: url(banner.jpg); background-position: center;	background-repeat: no-repeat; background-size: cover;}
.banner .btn{border: 1px solid #95A3B2;	border-bottom: 4px solid #95A3B2;}
/* End Banner Container Tags */


/* Keypoints Container Tags */
.keypoints h3{color: #003b36;}
/* End Keypoints Container Tags */


/* Main Container Tags */
/* End Main Container Tags */


/* Services Container Tags */
/* End Services Container Tags */


/* Mob Container Tags (Testimonialarea for mobile) */
.mob{display: none;}
.areas li{list-style-type: none; display: inline;}
.testimonialarea .btn{border: 1px solid #95A3B2; border-bottom: 4px solid #95A3B2;}
/* End Mob Container Tags */


/* Desk Container Tags (Testimonialarea for desktop) */
.desk{display: block;}
.areas li{list-style-type: none; display: inline;}
.testimonialarea .btn{border: 1px solid #95A3B2; border-bottom: 4px solid #95A3B2;}
/* End Desk Container Tags */


/* Servicebanner Container Tags */
.servicebanner h2{font-family: Alegreya Sans, sans-serif; color: #e5e8eb;}
.servicebanner{background-image: url(banner2.jpg); background-position: center; background-repeat: no-repeat; background-size: cover;}
.servicebanner ul{padding-inline-start: 0px;}
.servicebanner ul li{font-family: Alegreya Sans, sans-serif; background-image: url(waterdrop.png); background-repeat: no-repeat; min-height: 30px; padding-left: 45px; list-style-type: none; color: #e5e8eb; vertical-align: middle;}
/* End Servicebanner Container Tags */


/* Cta Container Tags */
.cta{background-color: #45706C;}
.cta h4, .cta h4 a{color: #fff;	text-decoration: none;}
.cta h4 a:hover{color: #9e8851;}
.cta .btn{border: 1px solid #95A3B2; border-bottom: 4px solid #95A3B2;}
/* End Cta Container Tags */


/* Compliance Container Tags */
/* End Compliance Container Tags */


/* Footer Container Tags */
.footer{font-size: 12px;}
/* End Footer Container Tags */


/* Mobile Styling */
@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;}
	
	.sidenavcontainer{display: inline;}
	
	.sidenav{box-shadow: 10px 0px 75px black;}
	
	.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;}
	
	.desk{display: none;}

	.mob{display: block;}

	.testimonialarea .dividingline{width: 100% !important;}

	.servicebanner ul li{padding-left: 0; line-height: 36px;}
}

@media only screen and (max-width: 477px){	
	/* Required to prevent overlapping ul images at this screen width */
	.servicebanner ul li{background-image: none;}
}
/* End Mobile Styling */
