/*header { width: 100%; }*/
.nav-bar { display: none; }

header nav { float:right; z-index: 1000; width: auto; margin:20px 0; padding:0;}
header nav ul { list-style: none; }
header nav ul li {float: left; position: relative;}
header nav:after {content: ""; display: block; clear: both;}

header nav ul li a {color:var(--white-color); display: block; padding:10px 5px ; margin: 0 ; line-height:30px; text-decoration: none; font-size:13px; text-transform: uppercase; font-weight:var(--font-weight-600);  letter-spacing: normal;}
header nav ul li a:hover, header nav ul li a.active { color:var(--primary-color);  text-decoration:none; }

header nav ul li:hover .children { display: block; }
header nav ul li .children {display: none; background:var(--primary-color); position: absolute;  width:250px;  z-index: 11111; border: none; border-radius: var(--border-radius); overflow: hidden;}
header nav ul li .children span { display: none; }
header nav ul li .children li {display: block; width: 100%; border-bottom: none;}
header nav ul li .children li:last-child { border-bottom:none !important;}

header nav ul li .children li a { margin-left:0; line-height:16px; font-size:12px; padding:5px 15px; margin:0; text-transform:none; color:var(--white-color); font-weight:var(--font-weight-500); text-transform: capitalize; letter-spacing: var(--letter-spacing-05); }
header nav ul li .children li a:hover {background:var(--dark-primary-color); color:var(--white-color); border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;}

header nav ul li .fa-angle-down {
  position: relative;
  top: 2px;
}

header nav ul li .faicon { display:none;
  position: relative;
  top:1px; left:5px
}

@media only screen and ( min-width: 1299px) and (max-width: 2399px) {

header nav ul li a { padding:10px 12px;  line-height:30px; font-size:14px;letter-spacing: var(--letter-spacing-05);}
header nav ul li .children {width:275px;}    
header nav ul li .children li a { line-height:18px; font-size:13px; padding:10px 15px; }    
}

/*responsive nav style*/

@media only screen and ( min-width: 768px) and ( max-width: 980px ) {

header nav { float: left; width: 100%; margin:0;}

header nav ul li a {padding:10px 5px; line-height:20px; font-size:11px;}
header nav ul li .children {width:210px;}
header nav ul li .children span { display: none; }

header nav ul li .children li a { line-height:16px; font-size:11px; padding:5px 15px;}

header nav ul li .fa-angle-down {
  position: relative;
  top: 2px;
}

header nav ul li .faicon { display:none;
  position: relative;
  top:1px; left:5px
}	
}

@media only screen and (min-width: 320px) and (max-width: 767px) {

.nav-bar { display: block; width:30px; height: 30px; line-height: 30px; position: absolute; right: 15px; top: 15px; background:var(--primary-color); z-index: 1000; border-radius: var(--border-radius); text-align: center !important; transition:all ease .6s;-moz-transition:all ease .6s;-webkit-transition:all ease .6s;-o-transition:all ease .6s; }
.nav-bar:hover { background:var(--dark-color); transition:all ease .6s;-moz-transition:all ease .6s;-webkit-transition:all ease .6s;-o-transition:all ease .6s;}

.nav-bar .fa-bars {display: block; width: 100%; color: var(--white-color); overflow: hidden; font-size:13px; line-height:30px; font-weight: bold; text-decoration: none; float: right;}
header nav {width:80%; height: auto; position: fixed; right: 100%; top :0; overflow: hidden; overflow-y: auto; height: 100%; background:var(--white-color); margin:0;  }

header nav ul li {display: block; border-bottom: 1px solid var(--light-color); width: 100%; }
header nav ul li:last-child { margin-bottom:60px !important;}
header nav ul li .children li:last-child { border-bottom:none !important;  margin-bottom:0px !important;}
header nav ul li a {color:var(--dark-color); display: block; padding:10px 15px; margin:0; line-height:20px; text-decoration: none; font-size:13px; }
header nav ul li a:hover, header nav ul li a.active { background:var(--primary-color); color:var(--white-color); text-decoration:none; border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px; }
/*header ul li a { display: block; font-size:14px; line-height:20px; margin:0; padding:0; border:1px solid #C93 }*/
header nav ul li .children {width: 100%; position: relative; overflow: hidden; display: none; border-left:none; border:none; border-radius: 0; }
header nav ul li:hover .children { display: none; }
header nav ul li ul li:first-child { border-top: 1px solid var(--light-color); }

header nav ul li .children span {display: inline-block; margin-right: 10px;}

/*header nav ul li .children a {
  margin-left: 10px;
  padding: 5px 0;
}*/

header nav ul li .fa-angle-down {position: relative; top: 4px;}
header nav ul li .children li {display: block; width: 100%; border-bottom: 1px solid var(--light-color);}
header nav ul li .children li a {margin-left:0; line-height:20px; font-size:12px; padding:8px 15px 8px 30px; background:var(--white-color); color:var(--dark-color); }
header nav ul li .children li a:hover {background:var(--primary-color); color:var(--white-color);}

header nav ul li .faicon { position: relative; display:block; top:2px; right:0; float:right;}

}