nav {
	display: block;
  background: #3f669d;  
  color:#fff;
  margin:auto;
  text-transform:uppercase;
  z-index:2;
  position:relative;
}
.f-nav{ z-index: 9999; position: fixed; left: 0; top: 0; width: 100%;
box-shadow: 0px 0px 10px 0px #666;	
	-moz-box-shadow: 0px 0px 10px 0px #666;
	-webkit-box-shadow: 0px 0px 10px 0px #666;
} /* this make our menu fixed top */

.menu{display: block;
	margin:0;
	padding:4px 0px;	
	 background: #3f669d;  
  color:#fff;
}

.menu li {	
  display: inline-block;
  position: relative;
  z-index: 100;
}

.menu li:first-child { margin-left: 0; }

.menu li a {  
  text-decoration: none;
  padding:8px 20px;
  display: block;
  color: #fff;
  transition: all 0.2s ease-in-out 0s;
}

.menu li a:hover {
	color: #fff;
	background: #2e3380;
	border-radius:10px;
	transition: 0.4s ease;
}

.menu ul {
  visibility: hidden;
  opacity: 0;
  margin: 0;
  padding: 0;
  width:250px;
  position: absolute;
  left: 0px;
  background: #fff;
  z-index: 99;
  transform: translate(0, 20px);
  transition: all 0.2s ease-out;
  border-bottom:1px solid #000;
  -moz-box-shadow: 0px 0px 10px 0px #000;
	-webkit-box-shadow: 0px 0px 10px 0px #000;
	box-shadow: 0px 0px 10px 0px #000;
}

.menu ul:after {
  bottom: 100%;
  left:10%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: #4f545c;
  border-width: 6px;
  margin-left: -6px;
  
}

.menu ul li {
  display: block;
  float: none;
  background: none;
  margin: 0;
  padding: 0;
  border-bottom:1px solid #4f545c;
  
}

.menu ul li a {
	font-size:13px;
	text-transform: capitalize; 
	text-align:left;
  font-weight: normal;
  display: block;
  color: #fff;
  background: #3d434c;
  
}

.menu ul li a:hover,
.menu ul li:hover>a {
  background: #f08120;
  color: #fff;
  transition:0.4s ease;
}

.menu li:hover>ul {
  visibility: visible;
  opacity: 1;
  transform: translate(0, 0);
  transition:0.4s ease;
}

.menu ul ul {
  left: 169px;
  top: 0px;
  visibility: hidden;
  opacity: 0;
  transform: translate(20px, 20px);
  transition: all 0.2s ease-out;
  border-bottom:1px solid #000;
}

.menu ul ul:after {
  left: -6px;
  top: 10%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0);
  border-right-color: #fff;
  border-width: 6px;
  margin-top: -6px;
}

.menu li>ul ul:hover {
  visibility: visible;
  opacity: 1;
  transform: translate(0, 0);
  transition:0.4s ease;
}

.responsive-menu {
	font-size:15px;	
  display: none;  
  text-decoration:none;  
  padding:6px 10px;
  background: #1f252e;
  color: #fff;
}

.responsive-menu:hover {
  background: #2e3380;
  color: #fff;
  text-decoration: none;
  transition:0.3s ease-in-out;
}
 @media (max-width: 850px) {
.menu li a {
  padding:8px 10px;
}
 }
@media (max-width:380px) {
.menu li a {
	font-size:12px;
	padding:6px;	
 }
 .menu li a:hover{
	 border-radius:5px;
 }
}
@media (max-width:300px) {
.mainWrap {
  width: auto;
  padding: 50px 20px;
}

.menu { display: none; }

.responsive-menu { display:block;}

nav {
  margin: 0;  
  text-align:left
}

.menu li {
  display: block;
  margin: 0;
  border-bottom: 1px #7091c4 solid;
}

.menu li a {
	font-size:13px; 
 }

.menu ul {
  visibility: hidden;
  opacity: 0;
  top: 0;
  left: 0;
  width: 100%;
  transform: initial;
}

.menu li:hover>ul {
  visibility: visible;
  opacity: 1;
  position: relative;
  transform: initial;
}

.menu ul ul {
  left: 0;
  transform: initial;
}

.menu li>ul ul:hover { transform: initial; }}