:root{
	--primary-color: #011936;
	--success-color: #AB8033;
	--error-color: #8C402D;
	--text-color-2: #383E40;
	
	--bg-color: #fdfdfd; 
	--navbar-color: #fdfdfd; 
	
	--highlight-level-one: #fdfdfd; 
	
	--divider-color: rgba(0, 0, 0, .12); 
	
	--max-content-width: 1200px; 
	
}


html {
	background-color: var(--bg-color);
	scroll-padding-top: 55px; 
}

ul, ol, p {
	font-size: 14px; 
	line-height: 22px; 
}


body {
	margin: 0px; 
	font-family: Segoe UI;
	height: 100vh; 
	display: flex; 
	flex-direction:column; 
}

.navbar {
	background-color: var(--navbar-color);
	position: fixed; 
	top: 0;
	left: 0; 
	width: 100vw; 
	line-height: 55px; 
	box-shadow: 0 4px 6px -0px rgba(0,0,0,.12);
}

/* 
 * Used to style anchors in nav 
 */ 
.navbar a {
	padding: 17px 10px;
	text-decoration: none; 
	color: black; 
	transition: all .3s,padding 0s, border .1s, width .3s cubic-bezier(.2,0,0,1) 0s;
}

/* 
 * Used for hiding dropdown
 */
.navbar > div {
	overflow: hidden;
	display: inline; 
}


@media screen and (min-width:801px) {
	.navbar > :last-child { display: none; }
	
	.navbar a.active {
		padding: 16px 10px; 
		border-bottom: solid 2px var(--primary-color); 
	}
	
	/* 
	 * Highlight nav btns on hover (including ones that have dropdowns)
	 * switch .subnav a to nav > div >a:hover to make it only highlight on its hover
	 */
	.navbar > a:hover, .subnav:hover a, .navbar a:hover{
		background-color: var(--highlight-level-one);
	}

	.navbar > a:hover, .navbar > div > a:hover, .navbar a:hover {
		padding: 16px 10px; 
		border-bottom: solid 2px var(--primary-color); 
	}

}

@media screen and (min-width:501px) and (max-width:800px) {
	/*
	 * Navbar stuff (same as small screen)
	 */
	.navbar > :first-child {
		max-width: 40px !important; 
	}
	 .navbar > .loginnav {
		position : initial;
		display: flex;
		flex-direction: column;
	 }
	
	.navbar .subnav-content {display: none;}
	
	.navbar > .subnav > a{
		display: inherit; 
	}
	
	.navbar > .subnav {
		overflow: initial; 
	}
	
	.navbar > :not(:first-child).active, 
	.navbar > :not(:first-child) .active {
		background-color: var(--highlight-level-one);
	}
	
	
	.navbar {
		transition: height 1s cubic-bezier(.2,0,0,1) 0s;
		height: 55px; 
		overflow: hidden; 
		
		display: flex; 
		flex-direction: column; 
	}
	
	.navbar.responsive { 
		height: 350px; 
	}
	
	.navbar a {
		display: inline-block;
		box-sizing: border-box;
		line-height: 100%; 
		max-height: 55px; 
		min-height: 55px; 
	}
}

@media screen and (max-width: 500px) {

	.navbar > :first-child {
		max-width: 40px !important; 
	}
	.navbar > .loginnav {
		position : initial;
		display: flex;
		flex-direction: column;
	}
	
	.navbar .subnav-content {display: none;}
	
	.navbar > .subnav > a{
		display: inherit; 
	}
	
	.navbar > .subnav {
		overflow: initial; 
	}
	
	.navbar > :not(:first-child).active, 
	.navbar > :not(:first-child) .active {
		background-color: var(--highlight-level-one);
	}
	
	.navbar {
		transition: height 1s cubic-bezier(.2,0,0,1) 0s;
		height: 55px; 
		overflow: hidden; 
		
		display: flex; 
		flex-direction: column; 
	}
	
	.navbar.responsive { 
		height: 350px; 
	}
	
	.navbar a {
		display: inline-block;
		box-sizing: border-box;
		line-height: 100%; 
		max-height: 55px; 
		min-height: 55px; 
	}
}

header.navheader {
	margin-bottom: 55px; 
}

/*
 * Used to keep content around the center of the screen while preserving a max size
 */
section.centeredcontent {
	padding: 10px 40px 10px 40px; 

	margin-left: auto;
	margin-right: auto; 
	box-sizing: border-box; 
}

section.capcontentwidth {
	max-width: var(--max-content-width);
	width: 100%;
}

h1 {
	
	text-align: center;
	font-size: 30px; 
	font-weight: 600; 
}

h2 {
	font-size: 20px; 
	font-weight: 600; 
}

h3 {
	font-weight: 60; 
}

h4 {
	font-weight: 80;
	border-bottom: 1px solid var(--divider-color); 
}


/* 
 * Used to move div to the right side of nav bar 
 */
.navright {
	display: inline; 
	right: 30px;
	position: absolute; 
}


/*
 * Used to style footer 
 */
footer {
	margin-top:auto;
	width: 100%;
	font-size: 14px; 
	/*
	background-color: #333;
	*/
	/*
	background-color: var(--bg-color); 
	*/
	background-color: var(--bg-color); 
	color: black;
	text-align: center;
	
	border-top: 1px solid var(--divider-color); 
}


hr {
	border: none; 
	height: 0px;
	border-bottom: 1px solid var(--divider-color);
	
	width: 100%; 
	max-width: var(--max-content-width); 
	
	margin-top: 0px; 
	margin-bottom: 0px; 
}

.reasons-grid {
	display: grid; 
	
	grid-template-rows: 20px auto; 
	
	grid-gap: 2.5rem;
	justify-content: center; 
	padding-bottom: 2.5rem !important;
}




.abouthero {
	flex: 0 0 200px; 
	text-align: center; 
	
	/*
	 *Centers text
	 */
	display: flex; 
	justify-content: center;
	align-items: center;
	
	/*
	 * Fade bg?
	 */
	flex-direction: column; 
	
	padding: 10px 40px 10px 40px; 
}

.abouthero h1 {
	margin: 0px; 
}

.abouthero p {
	max-width: 800px;
}