:root {
	--color-white: rgb(255, 255, 255);
	--color-black: rgb(0, 0, 0);
	--color-primary: rgb(0, 255, 212);
	--color-secondary: rgb(255, 87, 51);

	--button-primary: linear-gradient(-45deg, transparent 0.25rem, var(--color-primary) 0.25rem);
	--button-white: linear-gradient(-45deg, transparent 0.25rem, var(--color-white) 0.25rem);
}

body {
	margin-top: 2.4rem;
}

.noscroll,
html body.noscroll { 
	overflow: hidden !important;
	overflow-x: auto !important;
}

@font-face {
	font-family: Industry;
	src: url('assets/fonts/Industry-Medium.otf');
	font-weight: 500;
}

.c-nav {
	background: var(--color-black);
	padding: 0 0.75rem;

	display: flex;
	flex-direction: row;
	align-items: center;

	position: fixed;
	top: 0;
	width: 100vw;
	z-index: 200;
}

.c-logo {
	width: 2rem;
	height: 2rem;
	padding: 0.25rem 0;
	margin-right: 1.5rem;
}

.c-nav__links {
	display: flex;
	flex-direction: row;
	align-items: center;

	list-style-type: none;
	margin: 0;
	padding: 0;
}

.c-nav__links li {
	display: flex;
	align-items: center;
}

.c-nav__link {
	font-family: Industry;
	font-weight: 500;
	font-size: 1rem;
	padding: 0.15rem 0.75rem;
	margin: 0 0.25rem;
	color: var(--color-white);
	text-decoration: none;
}

span.c-nav__link {
	cursor: default;
}

.c-nav__link:hover {
	background-image: var(--button-white);
	color: var(--color-black);
}

.c-nav__link.active {
	background-image: var(--button-primary);
	color: var(--color-black);
}

.c-nav__link.active:hover {
	background-image: var(--button-primary);
	color: var(--color-black);
}

.c-nav__dropdown:hover .c-nav__dropdown-content {
	display: flex;
}

.c-nav__dropdown-content {
	display: none;
	position: absolute;
	top: 2rem;
	z-index: 2;
	flex-direction: column;
	align-items: flex-start;
	background: #222;
	min-width: 7.5rem;
}

.c-nav__dropdown-content a {
	padding: 0.5rem 1rem;
	color: #fff;
	min-width: 10rem;
	font-family: Industry;
	font-weight: 500;
	font-size: 1rem;
	text-decoration: none;
}

.c-nav__dropdown-content a:hover {
	background: rgba(255,255,255,0.1);
}

.hamburger {
	position: absolute;
	top: 50%;
	right: 2rem;
	transform: translateY(-50%);
	z-index: 1;
}

.hamburger svg {
	z-index: 0;
}

@media(min-width: 767px) {
	.hamburger {
		display: none;
	}
}

@media(max-width: 767px) {

	.c-nav__links {
		position: fixed;
		overflow-y: scroll;
		overflow-x: hidden;
		top: 2.5rem;
		left: 0;
		width: 100vw;
		height: calc(100vh - 4em);
		transform: translateX(100%);
		background: black;
		z-index: 200;

		transition: transform 0.25s ease;

		display: flex;
		flex-direction: column;
		align-items: flex-start;

		padding: 1.5rem 0;
	}

	.c-nav__links.open {
		transform: translateX(0%);
	}

	.c-nav__link {
		margin: 0.25rem 0;
	}

	span.c-nav__link {
		opacity: 0.75;
	}

	.c-nav__links li {
		width: 100%;
	}

	.c-nav__links li.c-nav__dropdown {
		display: flex;
		flex-direction: column;
		align-items: flex-start;

		margin: 0.75rem 0;
	}

	.c-nav__links li a {
		font-size: 1.75rem;
		padding: 0.75rem 1rem;
		width: 100%;
	}

	.c-nav__dropdown-content {
		position: static;
		display: block;
		min-width: auto;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
		background: none;
	}

	li .c-nav__dropdown-content a {
		padding-left: 2rem;
	}
}

.hamburger * {
	transition: all 350ms;
}

.hamburger.open .line1 {
	transform-origin: 50% 50%;
	transform: translateY(1rem) rotateZ(-45deg);
}

.hamburger.open .line3 {
	transform-origin: 50% 50%;
	transform: translateY(-1rem) rotateZ(45deg);
}

.hamburger.open .line2 {
	opacity: 0;
}