@charset "utf-8";

/* CSS Document */

/*  TOP-NAV  */
.top-nav {
  position: absolute;
  top: 40px;
  right: 50px;
  display: flex;
  align-items: center;
  z-index: 21;
  gap: 20px;
}
/* Inline nav links */
.nav-links-inline a {
  color: white;
  text-decoration: none;
  margin: 0 10px;
  font-size: 16px;
  transition: color 0.3s;
}
.nav-links-inline a:hover {
  color: var(--amd1);
}


/*   NAVIGATION   */
/* Hamburger */
.hamburger {
	position: absolute;
	top: 40px;
	right: 50px;
	width: 30px;
	height: 30px;
	cursor: pointer;
	z-index: 22;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.li-logo {
	position: absolute;
	top: -5px;
	right: 55px;
	width: 33px;
	z-index: 21;
}
.hamburger span {
	width: 30px;
	height: 2px;
	background-color: white !important;
	border-radius: 2px;
	transition: all 0.5s ease-in-out;
}
.hamburger.active span {
	transition: all 0.5s ease-in-out;
}
/* Active hamburger turns into a cross */
.hamburger.active span:nth-child(1) {
	transform: rotate(45deg);
	margin-top: 12px;
}
.hamburger.active span:nth-child(2) {
	opacity: 0;
}
.hamburger.active span:nth-child(3) {
	transform: rotate(-45deg);
	margin-top: -36px;
}
/* Nav Styles */
/* Fullscreen nav overlay */
.nav-overlay {
	position: fixed;
	background: url(../images/bg-menu.jpg) no-repeat center center;
	background-size: cover;
	top: 0; left: 0; right: 0; bottom: 0;
	transform: translateY(-100%);
	opacity: 0;
	pointer-events: none;
	transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
	display: flex;
	align-items: flex-start;
	padding-top: 125px;
	justify-content: center;
	z-index: 20;
}
.nav-overlay.active {
	transform: translateY(0);
	opacity: 1;
	pointer-events: auto;
}
.menu a {
	text-decoration: none;
	color: #fff;
	font-size: 2em;
	margin-top: 1em;
	transition: color 0.2s ease-in-out;
	letter-spacing: 1px;
}
.menu a:hover {
	color: aqua;
}
.nav-overlay li {
	display: block;
	list-style: none;
	margin-top: 1em;
}
.link-space {
	margin-bottom: 10px;
}

@media screen and (min-width: 1150px) {
  .nav-links-inline {
    display: block;
  }
  .hamburger {
	display: none;
  }
}

@media screen and (max-width: 1149px) {
  .nav-links-inline {
    display: none;
  }
  .hamburger {
	display: flex;
  }
}