src/assets/less/header.less
#header {
	position: relative;
	width: 100%;
	color: @black;
	padding-bottom: 40px;
	border-top: 2px solid black;
	transition: all 0.24s ease;
	z-index: 3;
	
	@media (max-width: @on-phone)  {
		padding-bottom: 20px;
	}
	.header-wrapper {
		position: relative;
		width: 100%;
		height: 70px;
		background: white;
		box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
		border-bottom: 1px solid lighten(#DEDFE1,1%);
		padding: 0px 20px;
		z-index: 3;
	}
	
	.logo {
		position: absolute;
		display: block;
		top: 0;
		left: 50%;
		margin-left: -80px;
		width: 160px;
		height: 82px;
		background: #000;
		padding: 10px 0px 12px 0px;
		transition: all 0.24s;
		
		@media (max-width: @on-phone)  {
			width: 140px;
			height: 70px;
			margin-left: -70px;
			padding: 10px 0px;
		}

		img {
			display: block;
			width: 70px;
			height: auto;
			margin: 0px auto;
			transition: all 0.24s;
			
			@media (max-width: @on-phone)  {
				width: 50px;
			}
		}
		.desc {
			display: block;
			text-align: center;
			color: white;
			font-size: 13px;
			transition: all 0.24s;
			
			@media (max-width: @on-phone)  {
				font-size: 12px;
			}
		}
	}
	.site-nav-switch {
		position: relative;
		border: 0;
		float: right;
		outline: none;
		background: transparent;
		font-size: 30px;
		margin-top: 20px;
		transition: all 0.24s ease;
		
		&.active {
			transform: rotate(90deg);
		}
	}
}

.site-menu {
	position: absolute;
  top: 69px;
  right: 0;
	width: 220px;
  padding: 20px 0px;
  background: white;
	border: 1px solid #e6e7e6;
	border-right: 0;
	box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.1);
	transform: translate3d(280px, 0, 0);
	transition: all 0.24s ease;
	visibility: hidden;
  z-index: 2;
  
  .menu {
	  .nav {
		  position: relative;
		  display: block;
		  color: @black;
		  font-size: 0.8125em;
		  padding: 2px 20px;
		  border-left: 3px solid transparent;
		  
		  &:hover {
			  background: fade(lighten(#e1e2e3, 3%), 60%);
			  border-color: @accent-color;
		  }
	  }
  }
}
