body {
	position: relative;
	min-height: 100%;
	overflow-y: scroll; 
}

.brand {
	height: 60px;
	background-color: white;
    z-index: 100;
	display: table;
}
@media only screen and (max-width: 959px) { .brand { height: 45px; } }

.brand a, .brand a:hover {
	text-decoration: none;
	color: black;
}

.site-title {
	font-family: "Tenor Sans";
	letter-spacing: 1.5vw;
	color: rgb(72,72,72);
	vertical-align: middle;
	display: table-cell;
}
@media (min-width:320px)  { .site-title{ font-size: 6vw; } }
@media (min-width:481px)  { .site-title{ font-size: 5vw; } }
@media (min-width:641px)  { .site-title{ font-size: 4vw; } }
@media (min-width:961px)  { .site-title{ font-size: 3vw; } }
@media (min-width:1025px) { .site-title{ font-size: 2.5vw; } }
@media (min-width:1281px) { .site-title{ font-size: 2vw; } }

.site-subtitle {
	padding-bottom: 20px;
	font-family: "Tenor Sans";
	color: rgb(72,72,72);
}
@media only screen and (max-width: 959px) { .site-subtitle { padding-top: 45px; } }

@media (min-width:320px)  { .site-subtitle{ font-size: 3vw; } }
@media (min-width:481px)  { .site-subtitle{ font-size: 2.7vw; } }
@media (min-width:641px)  { .site-subtitle{ font-size: 2.4vw; } }
@media (min-width:961px)  { .site-subtitle{ font-size: 2.1vw; } }
@media (min-width:1025px) { .site-subtitle{ font-size: 1.8vw; } }
@media (min-width:1281px) { .site-subtitle{ font-size: 1.5vw; } }

.navbar {
	width: 100%;
	padding-top: 0px;
	padding-bottom: 0;
	padding-right: 0;
	padding-left: 0;
}

/* navigation bar with menu options */
.navbar-collapse {
	width: 100%;
    overflow: auto;
	cursor: grab;
	background-color: white;
/*	border-bottom: 1px solid #dcdbda; cannot figure out how to align it with hover and active */
}

.navbar-collapse ul {
    white-space: nowrap;

	/* horizontal scroll hide scrollbar */
	overflow-x: scroll;
    -ms-overflow-style: none; /* for Internet Explorer, Edge */
    scrollbar-width: none; /* for Firefox */
    -webkit-overflow-scrolling: touch;

/*	position:relative;
	top: 1px; this is for aligning against the commented out navbar-collapse */
}

/* horizontal scroll hide scrollbar */
.navbar-collapse ul::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
}

.navbar li {
	color: #8c827a;
	font-family: "Cormorant";
	text-decoration: none;
	font-size: 14px;
	letter-spacing: .1em;
	font-weight: 600;
	cursor: pointer;
	margin: 0 20px;
}

.navbar li a {
	color: #8c827a;
}

.navbar li a:hover {
	text-decoration:underline;
}

.nav-item.active {
	text-decoration:underline;
}


/* navbar margin */
.navbar li {
	margin: 0 20px;
}

@media only screen and (max-width: 959px) {
	.navbar li {
		margin: 0 10px; 
	} 
}

/* container for the body that scrolls under the fixed brand and nav bars */
.body-scroll {
	top: 0;
	position: relative;
}

.footer {
	margin-top: 75px;
	font-family: "Tenor Sans";
	color: #dbdbdb;
	background-color: #505F74;
	width: 100%;
	text-decoration: none;
}

.footer-menu-container {
	display: block;
	margin: 0;
	padding: 0;
	padding-top: 1rem;
	border-top: 1px solid #5775a0;
}

.footer-menu-header {
	font-weight: 500;
	font-size: 1.35em;
	padding-top: 10px;
	padding-bottom: 10px;
}

.footer-menu-header a {
	text-decoration: none;
	color: #dbdbdb;
}

.footer-menu {
	padding: 0;
}

.footer-menu-item {
	font-weight: 400;
	font-size: 18px;
	display: block;
	padding-top: 10px;
	padding-bottom: 10px;
}

.footer-menu-item a {
	text-decoration: none;
	color: #dbdbdb;
}

.copyright {
	right: 0;
	bottom: 0;
	left: 0;
	padding: 1rem;
	text-align: center;
	width: 100%;
	letter-spacing: 0.10em;
	font-family: "Cormorant";
}

.uppercase {
	text-transform: uppercase;
}