
.nav_wrapper {
	position:relative;
	width: 100%;
	height:60px;
	background-color: #004db6;
	z-index:2000
}

.nav_center {
	width:100%;
	max-width:1000px;
	margin:0 auto;	
}

.nav_logo {
	float:left;
	margin:12px 10px 0;
}


.spinner-master {display:none}

.spinner-master input[type=checkbox] { display: none; }

.menu {
  height: auto;
  float:right;
  margin-top:1px;
  text-align:right;
}

.menu ul {
  padding: 0px;
  margin: 0px;
  list-style: none;
  position: relative;
  display: inline-block;
  text-align:left;
}

.menu > li > ul.sub_menu {
  min-width: 10em;
  padding: 4px 0;
  background-color: #f4f4f4;
  border: 1px solid #fff;
}

.menu > ul > li {
	padding: 0px 5px;
	min-width:70px;
	text-align:center;
}

.menu > ul > li { display: inline-block;}

.menu ul li a {
  display: block;
  text-decoration: none;
  color: #ddd;
  font-size: 16px;
}

.menu ul li a:hover {
  color: #fff;
}


.menu ul li.hover > a {
/*	border-radius: 10px; */
/*	background-color: rgba(0,255,255,0.2); */
}


.menu ul li > a {padding: 15px;}

.menu ul ul {
  display: none;
  position: absolute;
  top: 100%;
  min-width: 160px;
  background: rgba(47, 59, 63, 1);
}

.menu ul li:hover > ul { display: block; }

.menu ul ul > li {
	position: relative;
	padding:5px;
	min-width:60px;
	text-align:left;
	border-bottom:1px solid #394B51;
}

.menu ul ul > li a {
	padding:0 15px; 
	background: rgba(47, 59, 63, 1);
	color: #ccc;
	font-size: 15px;
	height:30px;
}

.menu ul ul > li a:hover {
/*  background: #069; */
  color: #fff;
}

.menu ul ul ul {
  position: absolute;
  left: 100%;
  top: 0;
}

@media all and (max-width: 768px) {
	 
	.nav_wrapper {
		position:absolute; /* z-index qt */
		top:0; 
	  height:60px;
	  background: #2f3b3f;
	  border:0;
	  z-index:3000;
	}
	

	
	.spinner-master {display:block}
	
	.spinner-master * {
	  transition: all 0.3s;
	  box-sizing: border-box;
	}
	
	.spinner-master {
	  position: relative;
	  margin: 5px 15px;
	  height: 30px;
	  width: 30px;
	  float: right;
	}
	
	.spinner-master label {
	  cursor: pointer;
	  position: absolute;
	  z-index: 99;
	  height: 100%;
	  width: 100%;
	  top: 15px;
	  left: 0;
	}
	
	.spinner-master .spinner {
	  position: absolute;
	  height: 4px;
	  width: 100%;
	  padding: 0;
	  background-color: #fff;
	}
	
	.spinner-master .diagonal.part-1 {
	  position: relative;
	  float: left;
	}
	
	.spinner-master .horizontal {
	  position: relative;
	  float: left;
	  margin-top: 4px;
	}
	
	.spinner-master .diagonal.part-2 {
	  position: relative;
	  float: left;
	  margin-top: 4px;
	}
	
	.spinner-master input[type=checkbox]:checked ~ .spinner-spin > .horizontal { opacity: 0; }
	
	.spinner-master input[type=checkbox]:checked ~ .spinner-spin > .diagonal.part-1 {
	  transform: rotate(135deg);
	  -webkit-transform: rotate(135deg);
	  margin-top: 10px;
	}
	
	.spinner-master input[type=checkbox]:checked ~ .spinner-spin > .diagonal.part-2 {
	  transform: rotate(-135deg);
	  -webkit-transform: rotate(-135deg);
	  margin-top: -12px;
	}
	
	.menu {
	  clear: both;
	  min-width: inherit;
	  float: none;
	}
	
	.menu,
	.menu > ul ul {
	  overflow: hidden;
	  max-height: 0;
	  background-color: rgba(47, 59, 63, 1);
	}

	.menu ul li a {
	  color: #ddd;
	}
	
	.menu ul li a:hover {
	  color: #fff;
	}
	
	.menu > li > ul.sub-menu {
	  padding: 0px;
	  border: none;
	}
	
	.menu.active,
	.menu > ul ul.active { max-height: 55em; }
	
	.menu ul { display: inline;}
	
	.menu li,
	.menu > ul > li { display: block;}
	
	.menu > ul > li:last-of-type a { border: none; }
	
	.menu li a {
	  color: #fff;
	  display: block;
	  padding: 0.8em;
	  position: relative;
	}
	
	.menu li.has-submenu > a:after {
	  content: '+';
	  position: absolute;
	  top: 0;
	  right: 0;
	  display: block;
	  font-size: 1.5em;
	  padding: 0.55em 0.5em;
	}
	
	.menu li.has-submenu > a.active:after { content: "-"; }
	
	.menu ul ul > li {
	  background-color: #485255
	}

	.menu ul ul > li a {
	  padding: 4px 50px;
	  overflow:hidden
	  background-color: #485255
	}
	
	.menu ul li a:hover {
	  background: #4b5f65;
	  color: #fff;
	}
	
	.menu ul li.hover > a {
	  background: #4b5f65;
	  color: #fff;
	}
	
	.menu ul ul,
	.menu ul ul ul {
	  display: inherit;
	  position: relative;
	  left: auto;
	  top: auto;
	  border: none;
	}
}
