/* The default styles are for all devices from portrait phones up (mobile-first). */
/* Changes for larger devices are in media queries at the bottom of the stylesheet. */

/* This is the hidden "skip to main content" link that is only shown for keyboard users and accessible browsers. The z-index matches the value used by Bootstrap for tooltips. */
#top {
	top: 5px;
	left: 5px;
	z-index: 1070;
}

.top-bar {
	background-color: #393c41;
	color: #fff;
	font-size: 16px;
	font-weight: 300;
	line-height: 1;
	box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.5);
	height: 90px;
}

	.top-bar.top-bar-sm {
		height: 68px;
	}

	.top-bar a {
		text-decoration: none;
	}

/* The main section below the top bar must have a top margin the same as the height of the top bar (plus the secondary menu bar if present). */
.main {
	margin-top: 90px;
}

	.main.top-bar-sm {
		margin-top: 68px;
	}

		.main.top-bar-sm.with-secondary-menu-bar {
			margin-top: 114px;
		}

	/* The overlay that shows above the page and below the dropdown menu or the search form when it is open. */
	.main.main-overlay:before {
		background-color: #000;
		content: "";
		display: block;
		opacity: 0.4;
		height: 100%;
		width: 100%;
		position: fixed;
		z-index: 990; /* Below dropdown which is set to 1000 by Bootstrap */
	}

/* Drop down menu */
.top-bar .menu .btn {
	background-color: transparent;
	border: 0;
	color: #fff;
	padding: 0;
	text-transform: capitalize;
    font-weight: 300;
}

.top-bar .menu .material-icons {
	vertical-align: middle;
}

.top-bar .menu .text {
	font-size: 30px;
	margin-left: 18px;
	vertical-align: middle;
}

.top-bar .dropdown-menu {
	border-width: 0;
	border-radius: 0;
	box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.5);
	margin-top: 27px;
	margin-left: -15px;
	padding: 0;
}

.top-bar.top-bar-sm .dropdown-menu {
	margin-top: 16px;
}

.top-bar .dropdown-menu li {
	display: block;
}

	/* This is to make it seem like the dropdown menu is below the top bar, even though it is actually above it.
	It uses an inset box shadow at the top of the dropdown menu.*/
	.top-bar .dropdown-menu li:first-of-type .dropdown-item {
		box-shadow: inset 0 6px 4px -2px rgba(0, 0, 0, 0.5);
	}

.top-bar .dropdown-menu a:focus {
	outline: 0;
}

.top-bar .dropdown-item {
	border-bottom: 1px solid #ccc;
	color: #272626;
	font-size: 18px;
	font-weight: 300;
	padding: 16px 40px;
}

.top-bar .dropdown-menu li:last-of-type .dropdown-item {
	border-bottom: 0;
}

.top-bar .dropdown-item:hover,
.top-bar .dropdown-item:focus,
.top-bar .dropdown-item:active {
	background-color: #ffc600;
	text-decoration: none;
}

.top-bar .dropdown-toggle::after {
	display: none;
}

/* NG logo */
.top-bar .logo img {
	display: inline;
	width: 120px;
	height: 48px;
}

/* Search form */
.top-bar .search .textbox,
.top-bar .search .btn {
	font-size: 16px;
	height: 32px;
	vertical-align: bottom;
}

.top-bar .search .textbox {
	background: #e3e3e3;
	display: none;
	margin-left: -229px;
	padding: 0 16px;
	position: absolute;
	width: 230px;
}

.top-bar .search .btn {
	background: #393c41;
	color: #fff;
	color: rgba(255, 255, 255, 1);
	padding: 0;
	width: 32px;
}

	.top-bar .search .btn i {
		margin-top: 2px;
	}

.top-bar .search .close {
	display: none;
}

/* Search overlay */
.top-bar.search-overlay {
	background: #e9e8df;
	color: #777578;
	height: 120px;
}

	.top-bar.search-overlay .menu .dropdown,
	.top-bar.search-overlay .logo {
		display: none;
	}

	.top-bar.search-overlay .search .textbox,
	.top-bar.search-overlay .search .btn {
		background-color: transparent;
		border: 0;
		border-radius: 0;
		border-bottom: 1px solid #777578;
		color: #777578;
		display: inline;
		outline: 0;
	}

	.top-bar.search-overlay .search .close {
		color: #777578;
		font-size: 14px;
		font-weight: normal;
		display: inline;
		opacity: 1;
		text-shadow: none;
		position: absolute;
		right: 10px;
		top: -40px;
	}

		.top-bar.search-overlay .search .close .icon {
			font-size: 18px;
			vertical-align: middle;
		}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
	.top-bar .menu {
		padding-left: 48px;
	}

	.top-bar .search {
		padding-right: 48px;
	}

    .top-bar .dropdown-menu {
        margin-left: 0;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .col-align-to-nav-md {
        padding-left: 52px; /* 48px + transparent padding of the icon */
        padding-right: 48px;
    }

    .col-align-to-nav-left-md {
        padding-left: 52px; /* 48px + transparent padding of the icon */
    }

    .col-align-to-nav-right-md {
        padding-right: 48px;
    }

	.top-bar {
		height: 110px;
	}

		.top-bar.top-bar-sm {
			height: 68px;
		}

		.top-bar.search-overlay {
			height: 120px;
		}

	.main {
		margin-top: 110px;
	}

	.top-bar .dropdown-menu {
		margin-top: 32px;        
	}

	.top-bar.top-bar-sm .dropdown-menu {
		margin-top: 11px;
	}

	.top-bar .logo img {
		width: 160px;
		height: 64px;
	}

	.top-bar.top-bar-sm .logo img {
		width: 120px;
		height: 48px;
	}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .main.main-overlay:before {
        background-color: transparent;
    }

	.top-bar .search .textbox {
		border: 2px solid #fff;
		border-right-width: 1px;
		border-radius: 3px 0 0 3px;
		display: inline;
		margin-left: auto;
		position: static;
	}

	.top-bar .search .btn {
		border: 2px solid #fff;
		border-left-width: 1px;
		border-radius: 0 3px 3px 0;
	}
}

/* Horizontal menu layout for short screens (e.g. mobiles in landscape) */
@media (max-height: 510px) {
	.top-bar .dropdown-menu.show {
		display: flex;
		width: 100vw;
		flex-wrap: wrap;
	}

	.top-bar .dropdown-menu > li {
		flex: 1 1 0;
	}

	.top-bar .dropdown-item {
		border-left: 0;
		border-right: 0;
	}

	.top-bar .dropdown-menu li:first-of-type .dropdown-item {
		box-shadow: none;
	}
}