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

/* Font imports */
@import url('https://fonts.googleapis.com/css?family=Quicksand|Bree+Serif');

/* Styles for the entire webpage */
html, body{
	background-color: #52707F;
	height: 100%;
	scroll-behavior: smooth;
}

/* Styles for the 'body' tag */
body{
	position: relative;
	overflow-x: hidden;
	font-family: Bree Serif;
}

/* Styles for all 'p' elements that are a child of 'body'. Styles for the 'li' element that is a child of the 'services' container */
body p, .services li{
	font-family: Quicksand, sans-serif;
	font-size: 16px;
}

/* Styles for all 'a' elements that are a child of 'body' */
body a{
	text-decoration: none;
	color: #52707F;
}

/* Styles for all 'a' elements that are a child of 'body', when hovered */
body a:hover{
	text-decoration: none;
	color: white;
}

/* Makes all asterisks in the form red to stand out */
.asterisk{
	color: red;
}

/* Creates a horizontal line that appears on both mobile and desktop */
.hline{
	background-color: #ECEFFF;
	width: 100%;
	height: 2px;
	margin: 15px 0;
}

/* Creates a vertical line that appears on both mobile and desktop. Creates a vertical line that appears on desktop only */
.vline, .vlinedesktop{
	background-color: #ECEFFF;
	width: 2px;
	height: 100%;
	margin: 0 auto;
}

.justify{
	text-align: justify;
	text-align-last: center;
}

/* Styles for the 'bodycontainer' */
.bodycontainer{
	position: relative;
	z-index: 2;
	background-color: #8EBCC9;
	width: 85%;
	background-size: cover;
	box-shadow: 0px 0px 25px black;
	border-left: 2px solid #ECEFFF;
	border-right: 2px solid #ECEFFF;
	border-bottom: 2px solid #ECEFFF;
}

/* Styles for the mobile navigation */
.mobilenav{
	display: none;
}

.sidenav {
	height: 100%;
	width: 0;
	position: fixed;
	z-index: 99;
	top: 0;
	left: 0;
	background-color: #111;
	overflow-x: hidden;
	transition: 0.7s;
	padding-top: 60px;
}

.sidenav p{
	color: #818181;
	text-align: center;
}

.sidenav a {
	padding: 8px 8px 8px 32px;
	text-decoration: none;
	font-size: 25px;
	color: #818181;
	display: block;
}

.sidenav a:hover {
	color: white;
}

.sidenav .closebtn {
	position: absolute;
	top: 0;
	right: 25px;
	font-size: 36px;
	margin-left: 50px;
}

#main {
	transition: margin-left .5s;
	padding: 16px 16px 16px 26px;
	position: fixed;
	z-index: 99;
	color: white;
	
}

/* Styles for desktop navigation */
.navbar{
	background-color: #8EBCC9;
	border-bottom: 2px solid #ECEFFF;
	padding: 15px 0;
	text-shadow: none;
}

.navborder{
	border: 1px solid #ECEFFF;
}

#navbar a{
	color: #52707F;
	padding: 0 30px;
	font-size: 20px;
}

#navbar a:hover{
	color: white;
}

#navbar .active a, #navbar .active a:hover{
	color: #31434D;
}

.jumpsection{
	display: none;
}

/* Styles for the 'topcontainer' */
.topcontainer{
	position: relative;
	z-index: 2;
	background-color: #74A6BA;
	box-shadow: 0px 0px 75px black;
	text-shadow: 0px 0px 1px white;
	border-bottom: 2px solid #ECEFFF;
}

/* Styles for the text that appears within 'topcontainer' */
.toptext{
	font-size: 50px;
}

/* Styles for the phone number that appears within 'topcontainer' */
.number{
	font-size: 35px;
}

/* Styles for the main heading of the page */
.heading{
	position: relative;
	z-index: 1;
	box-shadow: 0px 0px 75px black;
	color: white;
	background-image: url(window7.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	padding: 100px 0;
	margin-top: 15px;
	border-top: 2px solid #ECEFFF;
	border-bottom: 2px solid #ECEFFF;
}

/* Styles for the 'i' elements that are a child of 'heading' */
.heading i{
	color: white;
	text-shadow: 2px 2px 2px black;
}

/* Styles for 'services' */
.services{
	margin-top: 15px;
}

/* This adds bullet points to the unstyled list (to remove whitespace) */
.services li::before{
	content: "\2022";
}

/* Styles for 'areas' */
.areas{
	text-align: justify;
	text-align-last: center;
}

/* Styles for the 'a' elements that are a child of 'areas' */
.areas a{
	color: #333E51;
	text-shadow: 0px 0px 1px #333E51;
}

/* Styles for all 'a' elements that are a child of 'areas', when hovered */
.areas a:hover{
	color: white;
}

/* Styles for the 'footer' */
.footer{
	position: relative;
	z-index: 2;
	margin-top: 30px;
	padding-top: 15px;
	padding-bottom: 15px;	
	box-shadow: 0px 0px 75px black;
	background-color: #74A6BA;
	border-top: 2px solid #ECEFFF;
}

/* Styles for all 'p' elements who are a child of 'footer' */
.footer p{	
	margin-bottom: 0rem !important;
}

/* Styles for all 'a' elements that are a child of 'footer' */
.footer a{
	color: #333E51;
	text-shadow: 0px 0px 1px #333E51;
}

/* Styles for all 'a' elements that are a child of 'footer', when hovered */
.footer a:hover{
	color: white;
}

/* Styles for devices with a screen height of less than 450px (prevents overlapping with the mobile navigation) */
@media screen and (max-height: 450px) {
	.sidenav{
		padding-top: 15px;
	}
	
	.sidenav a{
		font-size: 18px;
	}
}

/* Styles for devices with a screen width of less than 991px (hides 'desktopnav' but reveals 'mobilenav') */
@media only screen and (max-width: 991px){
	.desktopnav{
		display: none;
	}
	
	.mobilenav{
		display: inline;
	}
	
	.sidenav{
		box-shadow: 10px 0px 75px #111;
		z-index: 6;
	}
	
	#main{
		z-index: 5;
	}
	
	.jumpsection, .jumpsection p{
		display: block;
		width: 100%;
		background-color: #8EBCC9;
		margin: 15px 0;
		text-align: center;
		border-top: 2px solid #ECEFFF;
		border-bottom: 2px solid #ECEFFF;
		padding: 15px 1px;
		font-size: 18px;
	}
}

/* Styles for devices with a screen width of less than 1150px */
@media only screen and (max-width: 767px){
	h1{
		font-size: 35px;
	}
	
	h2{
		font-size: 30px;
	}
	
	.justify{
		text-align: center;
	}
	
	.vline{
		width: 100%;
		height: 2px;
		margin: 15px 0;
	}
	
	#servicevline{
		display: none;
	}
	
	.desktopnav{
		display: none;
	}
	
	.mobilenav{
		display: inline;
	}

	.logo{
		text-align: center !important;
	}

	.toptext{
		text-align: center !important;
		font-size: 35px;
	}
	
	.number{
		font-size: 25px;
	}
	
	.heading{
		padding: 15px 0;
	}
	
	#bodycontainer1{
		padding-bottom: 15px;
	}

	.servicearea p, li{
		padding: 0px;
	}
}