/*
Note: CSS reset done in style.css
*/

/* 
==================================================
Style the menubar
==================================================
*/
nav {
	z-index: 10;
}

.menu-home {
	top: 0px;
	position: fixed;
	z-index: 9999;
}
.menu-page {
	position: relative;
}

.menu-transparent{
	background-color: transparent;
}
.menu-container {
	display: block;
	height: 225px;
	background-color: rgba(10,10,10,0.75);
	background-image: url('../img/bg-hex-4.jpg');
	-webkit-background-size: 900px;
	-moz-background-size: 900px;
	-o-background-size: 900px;
	background-size: 900px;
	background-repeat: no-repeat;
	margin-bottom: -150px;
}

@media (min-width: 900px){
	.menu-container {
		background-size: 100%;
	}
}
.menu-floater {
	float: left;
	width: 100%;
	/*position: absolute;
	top: 0;*/
}
.menu-black {
	background-image: linear-gradient(rgba(10,10,10,0.75),rgba(0,0,0,0));
}
.menubar {
	display: block;
	float:left;
	/*top: 0px; /*match with header-hidden/menubar-stick*/
	width: 100%;
	height: 75px;
	color: white;
	/*border-style: none none solid none;
	border-width: 1px;
	border-color: black;
	box-shadow: 0px 5px 10px -5px #888888;*/
	transition-duration: 0.5s;
	z-index: 9999;
}
@media (min-width: 900px) {
	.menu-page {
		display: flex;
		justify-content: center;
	}
}
.menubar-brand-prefix {
}
.menubar-brand-bold {
	font-weight: bold;
}
.menubar-brand-suffix {
}
.menu-domain-suffix {
	font-size: small;
	margin-left: 5px;
	opacity: 0.75;
}
.menubar a {
	font-size: 120%;
	color: white;
}
.menubar a strong {
	font-size: 120%;
}
/*.header-hidden {
	position: fixed;
	top: -60px;
}*/
.menubar-stick {
	position: fixed;
	top: 0px;
	background-color: rgba(10,10,10,0.75);
	color: white;
	font-size: 100%;
	height: 50px;
}
.menubar-stick a {
	color: white;
	font-size: 100%;
}
.menubar-stick .navbar-menu {
	background-color: black;
}

.menubar-admin-options {
	font-size: 50%;
	margin-left: 10px;
}

.menubar-nav span {
	background-color: var(--color-blueish-white);
}

.navbar-menu {
	background-color: black;
}

.menubar a {
	text-decoration: none;
	transition-duration: 1s;
}

.menubar input:checked ~ .menubar {
	background-color: black;
}

.menubar-title {
	display: inline-flex;
	align-items: center;
	position: absolute;
	left: 0;
	font-size: 110%;
	height: 100%;
	margin-left: 20px;
	margin-right: 20px;
	z-index: 2;
}
@media (min-width: 900px) {
	.menubar-title {
		position: relative;
		margin-right: 100px;
	}
}

.menubar-nav-wrapper {
	display: inline-flex;
	float: right;
	align-items: center;
	height: 100%;
	margin-right: 20px;
	z-index: 1;
}

.outer-container {
	display: flex;
	flex-direction: row;
	margin-top: 100px;
	height: 200px;
	justify-content: center;
}
.inner-middle {
	display: block;
	width: 80%;
	max-width: 1000px;
	height: 200px;
	background-color: orange;
}
/* 
==================================================
Style the navigation container
==================================================
*/
.menubar-nav {
	display: block;

	z-index: 1;
	
	-webkit-user-select: none;
	user-select: none;
	position:relative;
}
.menubar-nav a {
	text-decoration: none;
}
.menubar-nav input {
	position: absolute;
	width: 110px;
	height: 35px;
	margin: 0;
	top: -5px;
	right: -5px;
	
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	
	opacity: 0; /* hide this*/
	z-index: 10; /* and place it over the hamburger*/
	
	-webkit-touch-callout: none;
}
.menu-toggle-annotation {
	right: 0px;
	/*display: block;*/
	display:none;
	float: left;
	/*position: absolute;*/
	/*margin-right: 33px;*/ /* Width of hamburger bar*/
	padding: 3px;
	padding-right: 10px;
}
/* 
==================================================
Style the main menu
==================================================
*/
/*
Screen independent generic mark up
*/
.navbar-menu {
	position: absolute;
	overflow: hidden;
	width: 100vw;
	height: 0;
	top: -25px; /*-14px is top of bar, 36px is bottom of bar*/
	right: -20px;
	border-style: solid;
	border-color: transparent;
	/*background-color:transparent;*/
	transition-delay: 0.6s;
	transition-duration: .5s;
	
	/*border-style: none none solid none;
	border-width: 5px;
	border-color: var(--color-dark-blue);*/
}
.navbar-menu ul {
	/*transform: translate3d(200px, 0, 0);*/
	float: right;
	transition-delay: .2s; 
	transition: transform 1s ease-in-out; 
	margin-right: 20px;
	margin-top: 60px;
}
.navbar-menu ul li {
	display: flex;
	float: right;
	clear: both;
	padding: 10px;
	margin: 5px;
	/*margin-top: -20px;*/
	list-style-type: none;
	transition-duration: 0.2s;
}
.navbar-menu ul li:hover {
}

/*
Style the active page
*/
.page-home .menu-item-home, 
.page-about .menu-item-about, 
.page-career .menu-item-career, 
.page-blog .menu-item-blog, 
.page-blog-page .menu-item-blog, 
.page-contact .menu-item-contact {
	border-bottom: 2px solid #ffa500b8;
}
 /*
 Specific mark-up for when hamburger menu is expanded
 */
.menubar-nav input:checked ~ .navbar-menu {
	/*transform: translate(0, 0);*/
	width: 100vw;
	height: calc(100vh + 25px);
	/*box-shadow: -10px 10px 10px -10px #888888;
	border-style: solid;
	border-width: 0 0 1px 1px;
	border-color: grey;*/
	transition-delay: .1s;
	border-width: 0px;
}
.menubar-nav input:not(:checked) ~ .navbar-menu {
	/*background-color: transparent;*/
	opacity: 1;
	background-image: none;
}
.menubar-nav input:checked ~ .navbar-menu ul {
	transform: translate3d(-50px, 0, 0);
	transition: transform .3s ease-in-out; 
	transition-delay: .2s; 
	transform: translate3d(0, 0, 0);
	transition: transform .3s ease-out; 
	transition-delay: .7s; 
}
.menubar-nav input:checked ~ .navbar-menu ul li {
	margin-top: 5px;
	/*transition-delay: .20s;*/
}
.menubar-nav input:not(:checked) ~ .navbar-menu ul li {
	margin-top: 5px;
	margin-right: -200px;
	/*transition-delay: .20s;*/
}
/*
Media query selector to overwrite specific items for full screen
*/
@media (min-width: 900px){
	.navbar-menu {
		overflow: visible;
		width: auto;
		position: static;
		height: auto;
		right: 0px;
		border-style: none;
		opacity: 1 !important;
	}
	.navbar-menu ul {
		transform: translate3d(0, 0, 0);
		margin: 0px;
	}
	.navbar-menu ul li {
		display: inline-block;
		float: none;
		margin: 5px;
		margin-right: 5px !important;
	}
	.mobile-only {
		display: none !important;
	}
}
/*
Menu items slide in delays
*/
.menubar-nav input:not(:checked) ~ .navbar-menu ul li:nth-child(1) {transition-delay: 0.2s;}
.menubar-nav input:not(:checked) ~ .navbar-menu ul li:nth-child(2) {transition-delay: 0.3s;}
.menubar-nav input:not(:checked) ~ .navbar-menu ul li:nth-child(3) {transition-delay: 0.4s;}
.menubar-nav input:not(:checked) ~ .navbar-menu ul li:nth-child(4) {transition-delay: 0.5s;}
.menubar-nav input:not(:checked) ~ .navbar-menu ul li:nth-child(5) {transition-delay: 0.6s;}
.menubar-nav input:not(:checked) ~ .navbar-menu ul li:nth-child(6) {transition-delay: 0.7s;}
.menubar-nav input:not(:checked) ~ .navbar-menu ul li:nth-child(7) {transition-delay: 0.8s;}
.menubar-nav input:not(:checked) ~ .navbar-menu ul li:nth-child(8) {transition-delay: 0.9s;}
.navbar-menu ul li:nth-child(1) {transition-delay: 0.3s;}
.navbar-menu ul li:nth-child(2) {transition-delay: 0.4s;}
.navbar-menu ul li:nth-child(3) {transition-delay: 0.5s;}
.navbar-menu ul li:nth-child(4) {transition-delay: 0.6s;}
.navbar-menu ul li:nth-child(5) {transition-delay: 0.7s;}
.navbar-menu ul li:nth-child(6) {transition-delay: 0.8s;}
.navbar-menu ul li:nth-child(7) {transition-delay: 0.9s;}
.navbar-menu ul li:nth-child(8) {transition-delay: 1.0s;}
/* 
==================================================
Style the hamburger
==================================================
*/
.menubar-nav span {
	display: block;
	float: right;
	clear: right;
	width: 33px;
	height: 3px;
	margin-bottom: 6px;
	margin-right: 0px;
	padding-right: 0px;
	position: relative;
	
	border-radius: 3px;
	
	z-index: 1;
	
	transform-origin: 4px 0px;
	
	transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
							background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
							opacity 0.55s ease;
}
.menubar-nav span:first-child {
	transform-origin: 0% 0%;
}
.menubar-nav span:nth-last-child(2) {
	transform-origin: 0% 100%;
	margin-bottom: 0px;
}
/* 
Transform all the slices of hamburger into a crossmark
Rotate first and last slice, hide the middle one
*/
.menubar-nav input:checked ~ span {
	opacity: 1;
	transform: rotate(45deg) translate(-2px, -1px);
}
.menubar-nav input:checked ~ span:nth-last-child(3) {
	opacity: 0;
	transform: rotate(0deg) scale(0.2, 0.2);
}
.menubar-nav input:checked ~ span:nth-last-child(2) {
	transform: rotate(-45deg) translate(0, -1px);
}