/* one offs */
.section {
	height: 60px !important; 
	margin: 0;
}
.squish-row {
	line-height: 90%;
}
.btn-center {
	text-align: center;
}
.text-left {
	text-align: left !important;
}
.center-li {
	text-align: center;
	margin-top: 15px !important;
	margin-bottom: 18px !important;
	list-style-type: none;
	line-height: 1.5;
}
.left-li {
	/* font-weight: 100; */
	text-align: left;
	padding: 2px;
	line-height: 1.3;
}
.left-li heavy {
	font-size: 103%;
}
.bullet_2 {
	list-style-type: disc !important;
}
.extra-padding {
	padding-left: 3%;
	padding-right: 3%;
}
.extra-right-margin {
	margin-right: 3px;
}
.extra-left-padding {
	padding-left: 3%;
}
.extra-top-padding {
	padding-top: 4%;
}
/* note that, these are in the very top left for each section (under the picture on the navbar) */
.tiny-row {
	color:  #ebebe9;
	background: none;
	line-height: 1;
	border: none;
	padding: 0;
	margin: 0;
}
html {
	scroll-behavior: smooth;
}

/* to get the footer to stay on the bottom */
#wrap {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
main {
	flex: 1 0 auto;
	background: #ebebe9;
	min-height: 100%;
	max-height: 90%;
}

/*--- footer ---*/
footer {
	flex: 0 0 auto;
	background-color: rgb(27, 27, 27);
	color: #ebebe9;
	padding: 10px 20px 10px 10px;	  
	line-height: 1.5;
	text-align: center;
}
footer h6 {
	margin-top: 5px; 
	margin-bottom: 2px;
	line-height: 1.5;
}
footer a {
	color: #50a1f7;
	font-weight:550;
}
footer a:hover {
	color: #69e5f3;
	font-weight: 900;
}
.footer-copyright a {
	color: #959696;
	padding-top: 7px;
	font-size: .8rem;
}

body {
	padding: 0;
	margin: 0;
}
.btn {
	background-color: rgb(27, 27, 27);
	color: #50a1f7;
	font-weight:570;
	margin-top: 3px;
	margin-bottom: 10px;
}
.btn:hover {
	background-color: rgb(27, 27, 27);
	color: #69e5f3;
	font-weight: 900;
}

/* to support tooltip for data table */
.tooltip2 {
	position: relative;
	display: inline-block;
	border-bottom: 0px dotted rgb(0, 0, 0);
	/* vertical-align: top; */
}  
.tooltip2 .tooltip2-text {
	visibility: hidden;
	width: 250px;
	background-color: rgb(27, 27, 27);
	color: #ebebe9;
	/* text-align: center; */
	text-align: left;
	border-radius: 6px;
	padding: 5px 5px;
	font-size: 11pt;
	font-weight: 110;
	line-height: 1.1;  
	/* Position the tooltip */
	position: absolute;
	z-index: 1;
	top: 100%;
	/* left: 5%; */
	/* margin-left: -215px; */
	margin-left: -110px;
}  
.tooltip2:hover .tooltip2-text {
	visibility: visible;
}
.tooltip2-wider {
	padding: 2px 2px 2px 8px;
	margin: 3px;
}

/* using navbar instead of sidebar */
/* the z-index puts the navbar on top */
.navbar {
	background: rgb(27, 27, 27);
	padding: 0%;
	z-index: 1;
	width: 100%;

	/* this makes the navbar, when mobile, not offset correctly */
	position: fixed; 
	/* overflow:auto; */
}
.nav-link, .navbar-brand {
	color: #50a1f7;
	cursor: pointer;
}
.nav-link {
	/* margin-right: 1em !important; */
	font-size: 1.3rem;
	font-weight:500;
}
.odd-nav-link {
	font-weight:400 !important;
	vertical-align: center;
	color: #959696;
}
.nav-link:hover {
	color: #69e5f3;
	font-weight: 900;
}
.navbar-collapse {
	justify-content: flex-end;
}
.navbar a.active {
	/* background-color: #161449; */
	color: #ebebe9;
}
.nav-menu {
	justify-content: center;
}

.container {
	max-width: 80%;
	font-family: sans-serif;
}

/*--- header ---*/

/* .header { */
	/* background-image: url('images/copywavetree.jpg'); */
	/* background-size: cover; */
	/* background-position: center; */
	/* position: relative; */
/* } */

/* .overlay { */
	/* position: absolute; */
	/* min-height: 100%; */
	/* min-width: 100%; */
	/* left: 0; */
	/* top: 0; */
	/* background: rgba(0, 0, 0, 0.55); */
/* } */

/* a custom container class */
.center-block {
	text-align: center;
	/* top: 45%; adds extra to the top*/
	/* transform: translate(-50%, -55%); cuts off the ability to scroll all the way up*/
}
.center-block h1 {
	color: rgb(27, 27, 27);
	font-size: 160%;
	margin-top: 5px;
}
.center-block h2 {
	color: rgb(27, 27, 27);
	font-size: 130%;
	margin-top: 0px;
	margin-bottom: 0px;
}
.center-block h3 {
	color: rgb(27, 27, 27);
	font-size: 110%;
	font-weight: bold;
	margin-top: 5px;
}
.center-block p {
	color: rgb(27, 27, 27);
	font-size: 100%;
}
/* if change these tow,  */
.center-block a {
	color: #0754a6;
	font-weight:650;
}
.center-block a:hover {
	color: #60c6f5;
	font-weight: 900;
}
.left-block a {
	color: #0754a6;
	font-weight:650;
}
.left-block a:hover {
	color: #60c6f5;
	font-weight: 900;
}

/*--- feature is a custom container class designed for 3 columns (but could be more or less) ---*/
.features {
	/* margin: 4em auto; */
	padding: 1em;
	position: relative;
	text-align: center;
}
.features a {
	color: #0754a6;
	font-weight:650;
}
.features a:hover {
	color: #60c6f5;
	font-weight: 900;
}

.features-title {
	color: rgb(27, 27, 27);
	font-size: 1.0rem;
	font-weight: 600;
	margin-bottom: 5px;
	/* text-transform: uppercase; */
}
.features p {
	font-size: .8rem;
	padding-left: 10%;
	padding-right: 10%;
}
.features .btn {
	background-color: #1e3483;
	border: 1px solid #1e3483;
	color: #fff;
	margin-top: 20px;
}
.features .btn:hover {
	/* background-color: #333; */
	/* border: 1px solid #333; */
	color: #50a1f7;
	font-weight: bold;
	background-color: #666665;
}
 
/*--- media queries need for dynamic resize mobile ---*/
@media (max-width: 870px) {

	.navbar {
		position: relative;
	}
	.nav-link {
		position: relative;
		padding-top: 0px;
		padding-bottom: 0px;
		margin-top: 0px;
		margin-bottom: 0px;
		padding-left: 15px !important;
	}
	.section {
		height: 5px !important; 
	}
	.container {
		max-width: 100%;
	}
	.center-block {
		left: 0;
		padding: 0 5px;
		/* position: absolute; */
		top: 10%;
		transform: none;
		text-align: center;
	}
	.features {
		margin: 0;
	}

}
@media (max-width: 575.98px) {
	.navbar {
		position: relative;
	}
	.nav-link {
		position: relative;
		padding-top: 0px;
		padding-bottom: 0px;
		margin-top: 0px;
		margin-bottom: 0px;
		padding-left: 15px !important;
	}
	.section {
		height: 5px !important; 
	}
	.container {
		max-width: 100%;
	}
	.center-block {
		left: 0;
		padding: 0 5px;
		/* position: absolute; */
		top: 10%;
		transform: none;
		text-align: center;
	}
	.features {
		margin: 0;
	}
}