.navbar {

    padding: 0;
}


#navbarRow {
	background-color: #3B6589;
}

.navbarTitle {
	color: white;
	float: left;
	padding-left: 10px;
	padding-top: 10px;
}

.brand {
	font-family: 'Gochi Hand', cursive;
	margin: 0px;
}

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

.navbar-dark .navbar-nav .nav-link {
    color: #FFF;
    margin-right: 10px; 
}


.navbar-dark .navbar-nav .nav-link:focus, 
.navbar-dark .navbar-nav .nav-link:hover {
    color: #F3BA42;
}

.navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show > .nav-link {
    color: #F3BA42;
    font-weight: bold;
}

.navbar-dark .navbar-toggler {
    color: rgba(255, 255, 255, 1);
    border-color: rgba(255,255,255,1);
}


#dropdown {
	float: left;
	overflow: visible;
	position: relative;
}

#dropdown:hover #dropdownContent {
	display: block;
}

#dropdownButton {
	margin-bottom: 0px;
	padding-bottom: 14px;
}

#dropdownContent {
	background-color: white;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	display: none;
	min-width: 160px;
	position: absolute;
	top: 50px;
	z-index: 1;
}

#dropdownContent a {
	color: black;
	display: block;
	float: none;
	font-size: 16px;
	padding-bottom: 12px;
	padding-left: 16px;
	padding-right: 16px;
	padding-top: 12px;
	text-align: left;
	text-decoration: none;
}

#dropdownContent a:hover {
	background-color: lightgray;
}

#donateButton {
	background-color: red;
	color: #F3BA42;
	display: block;
	font-weight: bold;
	height: 100%;
	transition-duration: 0.4s;
}

#donateButtonMobile {
	color: #F3BA42;
	display: block;
	font-weight: bold;
	height: 100%;
	margin-left: 0px;
	padding-bottom: 5px;
	padding-top: 5px;
	transition-duration: 0.4s;
	padding-left: 0px;
	width: 15%;
}

#donateButtonMobile:hover {
	background-color: #F3BA42;
	color: white;
}

#donateButton{
	background-color: red;
	color: white;
	margin-right: 0;
}

#donateButton:hover {
	background-color: #FFF;
	color: red;
}

#icon {
	display: none;
}

#mobileNavbar {
	display: none;
}

#topBar {
	clear: both;
}

.navbarDesktop {
	float: right;
	margin-bottom: 0px;
	overflow: visible;
}

.navbarMobile {
	float: left;
	padding-bottom: 0px;
	padding-top: 0px;
}

.navbarDesktop a {
	color: white;
	float: left;
	font-size: 20px;
	padding-bottom: 14px;
	padding-left: 16px;
	padding-right: 16px;
	padding-top: 14px;
	text-align: center;
	text-decoration: none;
}

.navbarMobile a {
	color: white;
	font-size: 20px;
	margin-bottom: 14px;
	margin-left: 16px;
	padding-bottom: 0px;
	text-decoration: none;
	width: 25%;
}

#navIndent {
	margin-left: 5%;
}

.navbarDesktop li a {
	color: #F3BA42;
}

/* When the screen is less than 1000 pixels wide, hide all links.
   Show the link that should open and close the navbar (#icon).
   The "responsive" class is added to the navbar with JavaScript
   when the user clicks on the icon. This class makes the navbar
   look good on small screens (display the links vertically
   instead of horizontally)
*/
@media screen and (max-width: 1000px) {

	#navSection ul {
		float: left;
	}

	#desktopNavbar {
		display: none;
	}

	#mobileNavbar {
		display: block;
	}

	.navbarMobile {
		margin-left: 3%;
		width: 95%;
	}

	#icon {
		color: white;
		display: block;
		float: right;
		margin-right: 15px;
		margin-top: 15px;
	}

	.navbarMobile.responsive {
		display: none;
	}

	.navbarMobile.responsive a {
		display: none;
	}
}

@media (max-width: 990px) {
	.navbar {
		text-align: center;
	    padding: 0 0.8rem;
	}
}