header.menu {
	display: block;
    position: fixed;
    width: 100%;
    height: 90px;
    line-height: 90px;
    background-color: transparent;
    left: 0;
    text-align: right;
    background: rgba(0, 0, 0, 0.5);
}

b.open, b.close {
    display: block;
    position: fixed;
	top: 0;
	right: 0;
	height: 90px;
	line-height: 90px;
    margin-right: 2em;
	font-size: 1.25em;
    text-align: right;
	color: #a5a9ad;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -moz-transition: color 0.2s ease-in-out;
    -webkit-transition: color 0.2s ease-in-out;
    -ms-transition: color 0.2s ease-in-out;
    transition: color 0.2s ease-in-out;
}

b.close {
	font-size: 1.5em;
    margin-right: 1.8em;
}	

b.open:hover, b.close:hover {
    color: #FFFFFF;
}

b.open:before {
    content: "";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-family: FontAwesome;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-style: normal;
    font-weight: normal;
    text-transform: none !important;
    margin: 0 0.5em 0 0;
}

b.close:before {
    content: "";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-family: FontAwesome;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-style: normal;
    font-weight: normal;
    text-transform: none !important;
    margin: 0 0.5em 0 0;
}

b.close, nav {
    visibility: hidden;
    -moz-transform: translateX(20em);
    -webkit-transform: translateX(20em); 
    -ms-transform: translateX(20em);
    transform: translateX(20em);
	
    -moz-transition: -moz-transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s;
    -webkit-transition: -webkit-transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s;
    -ms-transition: -ms-transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s;
    transition: transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s;
    -webkit-overflow-scrolling: touch;
}


nav {
	display: block;
	position: fixed;
    top: 0;
    right: 0;
	background: #07090c;
    color: #fff;
    height: 100%;
    max-width: 20%;
    text-transform: uppercase;
    width: 20em;
}

nav > ul.links {
    display: block;
    position: relative;
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: 6em;
}

nav > ul.links > li {
	display: block;
    position: relative;
    height: 5em;
    line-height: 5em;	
    padding: 0;
	margin: 0;
}

nav > ul.links > li > a {
    display: block;
	position: relative;
	height: 5em;
	line-height: 5em;
    padding: 0;
    margin: 0;
	padding-left: 2em;
    text-decoration: none;
    text-align: left;
    color: #a5a9ad;
    -moz-transition: color 0.2s ease-in-out;
    -webkit-transition: color 0.2s ease-in-out;
    -ms-transition: color 0.2s ease-in-out;
    transition: color 0.2s ease-in-out;
	z-index: 10010;
}


nav > ul.links > li > a:hover, nav > ul.links > li:hover > a {
    color: #ffffff;
}

b.open:active + menu > nav, b.open:active + menu > b.close
	{
    visibility: visible;
    -moz-transform: translateX(0em);
    -webkit-transform: translateX(0em);
    -ms-transform: translateX(0em);
    transform: translateX(0em);
}


menu:hover > nav, menu:hover > b.close

	{
    visibility: visible;
    -moz-transform: translateX(0em);
    -webkit-transform: translateX(0em);
    -ms-transform: translateX(0em);
    transform: translateX(0em);
}

menu, .hidden, .visibility {
	display: block;
	position: fixed;
	height: 0%;
	width: 0%;
	visibility: hidden;
	top: 0;
}

b.open:active + menu, menu:hover {
	visibility: visible;
}

b.open:active + menu > .visibility, menu:hover > .visibility, b.open:active + menu > .hidden, menu:hover > .hidden {
	height: 100%;
	width: 100%;
	visibility: visible;
}

b.close {
    z-index: 10010;
}

nav {
    z-index: 10009;
}

.visibility {
	z-index: 10008;
}

menu {
	z-index: 10007;
}

.hidden {
	z-index: 10006;
}

/*
b.close z-index: 10005;
nav z-index: 10004;
.visibility z-index: 10003;
*/
b.open {
    z-index: 10002;
}

b.close:active, .hidden:hover + b.close {
	z-index: 10005;	
}

b.close:active + .visibility, .hidden:hover + b.close + .visibility {
	z-index: 10004;
}

b.close:active + .visibility + nav, .hidden:hover + b.close + .visibility + nav {
	z-index: 10003;
}

b.close:active, .hidden:hover + b.close, b.close:active + .visibility + nav, .hidden:hover + b.close + .visibility + nav {
    visibility: hidden!important;
    -moz-transform: translateX(20em)!important;
    -webkit-transform: translateX(20em)!important;
    -ms-transform: translateX(20em)!important;
    transform: translateX(20em)!important;
    -moz-transition: -moz-transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s;
    -webkit-transition: -webkit-transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s;
    -ms-transition: -ms-transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s;
    transition: transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s;
}

b.close:active + .visibility, .hidden:hover + b.close + .visibility {
	height: 0%!important;
	width: 0%!important;
	visibility: hidden!important;
}

.hidden:hover {
	height: 0%!important;
	width: 0%!important;
	visibility: hidden!important;
    -moz-transition: all 0.5s step-end;
    -webkit-transition: all 0.5s step-end;
    -ms-transition: -all 0.5s step-end;
    transition: all 0.5s step-end;
}

header.menu {
    z-index: 9999;
}

header.menu:hover {
    z-index: 10001;
}

/****** SUB MENU *******/
nav ul li a {
	text-decoration: none;
}	

nav ul li ul {
  display: block;
  position: absolute;
  right: 101%;
  top: 14%;
  margin: 0;
  padding: 0;
  background: #111417;
  width: 240px;
  visibility: hidden;
  border: 1px solid rgba(255, 255, 255, 0.17);
  -webkit-transition: visibility 0.4s ease-out;
  -moz-transition: visibility 0.4s ease-out;
  -ms-transition: visibility 0.4s ease-out;
  -o-transition: visibility 0.4s ease-out;
  transition: visibility 0.4s ease-out;
}

nav ul li ul > li > a {
  visibility: hidden;
  color: rgba(255, 255, 255, 0);
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
  
nav ul ul li {
  margin: 0;
  padding: 0;
  display: block;
  position: relative;
  z-index: 4;
}


nav > ul > li > ul {
  margin-top: 5px;
}

nav > ul > li:hover > ul {
  visibility: visible;
}

nav ul li ul li > ul {
	top: 0;
	left: calc(100% + 2px);
}

nav ul li ul li > ul.left {
	top: 0;
	left: calc(-100% - 4px);
}

nav ul li ul li:hover > ul {
  visibility: visible;
}


nav  ul  li > ul > li {
  width: 238px;
  display: block;
}

nav ul li:hover > ul > li {
  max-height: 40px;
  position: relative;
}

nav ul li ul li {
  max-height: 0;
  -webkit-transition: max-height 0.4s ease-out;
  -moz-transition: max-height 0.4s ease-out;
  -ms-transition: max-height 0.4s ease-out;
  -o-transition: max-height 0.4s ease-out;
  transition: max-height 0.4s ease-out;
}


/**** ARROW SUB MENU ****/
nav ul > li:hover > a:before {
    content: "";
    display: block;
    position: absolute;
    width: 101%;
    height: 40px;
    top: 0;
}

nav ul li.arrow > a:before {
  display: block;
  position: absolute;
  content: "";
  height: 0;
  width: 0;
  border: 5px solid transparent;
  border-left-color: inherit;
  top: calc(50% - 5px);
  right: 2%;
}

nav ul li.arrow.left > a:before {
  border-left-color: transparent;
  border-right-color: inherit;
  right: 95%;
}

/** END ARROW SUB MENU **/


nav ul li ul li a {
	font-size: 14px;
    text-transform: uppercase;
    color: #a5a9ad;
    letter-spacing: 0;
    display: block;
    position: relative;
    width: 238px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    text-shadow: none;
    font: 14px/40px "merriweather-regular", serif;
}

nav ul > li:hover > ul > li > a,
nav ul li.active ul li > a {
  color: #a5a9ad;
  visibility: visible;
}  

nav ul li ul li:hover > a,
nav ul li ul li.active > a {
    color: #FFFFFF;
    background: none;
}

.hid-box {
		display: block;
		position: absolute;
		top: -100%;
		width: 100%;
		height: 300%;
		left: 100%;
		z-index: 1;
		visibility: hidden;
}

.hid-box.left {
		left: -100%;
}

li:hover > .hid-box {
		visibility: visible;
}
	
.hid-box:hover {
		z-index: 1000!important;
		visibility: hidden!important;
		-webkit-transition: visibility .2s step-end;
		-moz-transition: visibility .2s step-end;
		-ms-transition: visibility .2s step-end;
		-o-transition: visibility .2s step-end;
		transition: visibility .2s step-end;
}

.hid-box:hover + ul {

		visibility: hidden!important;
		-webkit-transition: visibility .3s step-end!important;
		-moz-transition: visibility .3s step-end!important;
		-ms-transition: visibility .3s step-end!important;
		-o-transition: visibility .3s step-end!important;
		transition: visibility .3s step-end!important;
	}
	
.hid-box:hover + ul li{
	max-height: 0!important;
}	

.hid-box:hover + ul li a{
	color: rgba(0, 0, 0, 0)!important;
}	

/*** transfer ***/
nav > ul > li:hover:before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 115%;
  top: 0;
  z-index: 2;
}

nav > ul > li.left:hover:before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 2;
  left: -5%;
}

nav > ul > li > ul > li:hover:before {
  content: "";
  display: block;
  position: absolute;
  width: 105%;
  height: 100%;
  top: 0;
  z-index: 2;
}

nav > ul > li > ul > li.left:hover:before {
    margin-left: -5%;
}
/*** end transfer ***/