#nav {
	position: fixed;
	z-index: 10;
	width: 100vw;
}
#nav ul {
	width: 100%;
	height: 100%;
	display: flex;
	padding: 0 72px 0 24px;
	background-color: rgba(255,0,0,0.75);
	transition: 250ms all ease-in-out 250ms;
}
#nav ul li {
	display: block;
	flex: 1;
	text-align: center;
	height: 60px;
	font-size: 16px;
	line-height: 60px;
	text-transform: uppercase;
	position: relative;
}
#nav ul li a {
	display: block;
	width: 100%;
	height: 100%;
	color: #FFF;
	transition: 250ms all ease-in-out;
}
#nav ul li a:hover { text-decoration: underline; }
#nav ul li a.active { font-weight: bold; text-decoration: none; }

#nav #nav_logo img {
	display: block;
	margin: 0 auto;
	width: 100px;
	height: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

#nav #openchat {
	position: absolute;
	z-index: 12;
	top: 70px;
	right: 30px;
	width: 80px;
	height: 40px;
	background-position: center center;
	background-size: cover;
	background-repeat: none;
	background-image: url(../img/icons/live_chat.png);
}

#nav a#openchat:hover {
	background-image: url(../img/icons/live_chat_hover.png);
}
	
#nav #hamburger {
	position: absolute;
	top: 0;
	left: 50%;
	width: 40px;
	height: 40px;
	margin-top: 5px;
	transform: translate(-50%,0) scale(0) rotateZ(360deg);
	transition: 250ms all ease-in-out 250ms;
	z-index: 11;
}
#nav #hamburger > span {
	display: block;
	width: 100%;
	height: 0;
	margin: 8px auto;
	border: 1px solid #111;
	transition: 250ms all ease-in-out;
	position: relative;
}
#nav.in #hamburger { margin-top: 30px; }
#nav.in #hamburger > span,
#nav.in #hamburger:hover > span { width: 100% !important; height: 0; margin: 0 0 0 0; border-color: #111; }
#nav.in #hamburger > span:nth-child(3) { transform: rotateZ(45deg); }
#nav.in #hamburger > span:nth-child(2) { display: none; }
#nav.in #hamburger > span:nth-child(1) { transform: rotateZ(-45deg) translateY(2px); }

@media (max-width: 767px) {
	#nav { height: 40px; background-color: rgba(255,0,0,0.75); }
	#nav ul {
		position: fixed;
		width: 100vw;
		height: 100vh;
		top: 0;
		left: 0;
		display: block;
		opacity: 0;
		transform: scale(0);
		padding: 60px 0 0 0;
		background-color: rgba(255,0,0,0.95);
	}
	#nav ul li { width: 100%; flex: 0; position: relative; height: 32px; line-height: 32px; margin-bottom: 16px; }
	#nav ul li:not(:last-child):after {
		content: " ";
		display: block;
		position: absolute;
		bottom: 0;
		left: 50%;
		width: 20%;
		height: 1px;
		transform: translate(-50%,0);
		background-color: rgba(255,255,255,0.5);
	}
	#nav.in ul { opacity: 1; transform: scale(1); }
	#nav #hamburger {
		transform: translate(-50%,0) scale(1) rotateZ(0deg);
	}
	#nav #openchat { position: fixed; top: auto; bottom: 30px; left: 0; right: auto; }
}