:root {
	--navbar-height: 54px;
}

@media (min-width: 768px) {
	.navbar {
		display: none !important;
	}
}

.navbar {
	background-color: #007bff;
	height: var(--navbar-height);
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
	padding-left: 15px;
	position: sticky;
	top: 0;
	z-index: 10;
}

.navbar > *:not(:last-child) {
	flex-grow: 1;
}

.navbar > *:last-child {
	width: 60px;
	display: flex;
	justify-content: center;
    align-items: center;
}

.navbar > .logo  img {
	padding-top: 9px;
	padding-bottom: 9px;
}
.navbar > .logo  img {
	max-height: 100%;
}

@media (max-width: 768px) {
	nav.active {
		/*display: block !important;*/
		position: fixed;
		top: var(--navbar-height);
		left: 0;
		bottom: 0;
		right: 0;
		background: black;
		z-index: 5;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		padding-top: 40px;
		font-size: 6.2vw;
		/*line-height: normal !important;*/
	}
}


#hamburger>div {
/*
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
*/
  width: 24px;
}

#hamburger>div:before,
#hamburger>div:after,
#hamburger>div div {
  background: #fff;
  content: "";
  display: block;
  height: 2px;
  /*border-radius: 3px;*/
  margin: 4px 0;
  transition: 0.3s;
}
/*
#hamburger>div:hover:before {
  transform: translateY(6px) rotate(135deg);
}
#hamburger>div:hover:after {
  transform: translateY(-6px) rotate(-135deg);
}
#hamburger>div:hover div {
  transform: scale(0);
}
*/
#hamburger.active>div:before {
  transform: translateY(6px) rotate(135deg);
}
#hamburger.active>div:after {
  transform: translateY(-6px) rotate(-135deg);
}
#hamburger.active>div>div {
  transform: scale(0);
}