@media only screen and (max-width: 768px) {
	.nav {
		position: fixed;
		right: -320px;
		top: 0;
		width: 300px;
		height: 100vh;
		padding-top: 70px;
		background-color: white;
		transition: all .6s;
		z-index: 9999;
		overflow-y: auto;
		display: flex;
		flex-flow: column;
	}
	.hamburger {
		position: absolute;
		right: 20px;
		top: 5px;
		width: 40px;
		height: 40px;
		cursor: pointer;
		z-index: 9999;
		color: #111111;
	}
	.nav li {
		margin: 0;
		padding: 0;
		list-style: none;
		float: right;
	}
	.nav li a {
		display: block;
		border-right: none;
		text-align: left;
		border-left: none;
		border-right: none;
		border-bottom: 1px solid #9fbcbf;
		text-indent: 10px;
		color: #007E8A;
		float: none;
		white-space: nowrap;
	}
	.nav li a.first {
		border-left: none;
	}
	.hamburger-border {
		position: absolute;
		left: 11px;
		width: 28px;
		height: 2px;
		background-color: white;
		transition: all .6s;
	}
	.hamburger-border-top {
		top: 14px;
	}
	.hamburger-border-center {
		top: 20px;
	}
	.hamburger-border-bottom {
		top: 26px;
	}
	.black-bg {
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		z-index: 100;
		background-color: #333;
		opacity: 0;
		visibility: hidden;
		transition: all .6s;
		cursor: pointer;
	}
	.nav-open .nav {
		right: 0;
	}
	.nav-open .black-bg {
		opacity: .8;
		visibility: visible;
	}
	.nav-open .humburger-border {
		background-color: #333;
	}
	.nav-open .hamburger-border-top {
		transform: rotate(45deg);
		top: 20px;
	}
	.nav-open .hamburger-border-center {
		width: 0;
		left: 50%;
	}
	.nav-open .hamburger-border-bottom {
		transform: rotate(-45deg);
		top: 20px;
	}
	.nav-sub {
		position: relative;
		padding: 0 0 0 0;
		display: block;
	}
	.nav-sub li a {
		width: 300px;
		display: block;
		color: #007E8A;
		background-color: white;
		transition: 0.25s;
		padding-left: 80px;
	}
	.nav-sub li a:hover {
		background: white;
	}
	
	#user-info {
		display: none;
	}
}