@charset "UTF-8";
/* CSS Document */

html {
  scroll-behavior: smooth;
}

.nav-container {
  display: flex;
  display: none;	
  padding:0;
  margin:0 auto;
  width:94%;
  justify-content: space-between
}

ul.nav-container,
ul.sub-container {
	padding-left: 0;
  margin-top: 0;
  margin-bottom: 0;
	list-style: none
}

.sub-menu {
	margin: auto;
	width: 100%;
}
/* Top Navigation Bar */
.fa .fa-angle-down {color:#000;}
#nav > a {
	display: none;
}

#nav > .menu-logo {
  line-height:0em;
  padding:10px;
  margin-left:50px;

}

ul.nav-container > li {
  padding: 0 10px;
  qdisplay:inline-block;
}
ul.nav-container > li > a {
  position: relative;
  display:inline-block;
  text-decoration: none;
  font-family: var(--main-text);
  font-size: 1rem;
  letter-spacing:.02em;
  color: #000;
  text-transform: uppercase;
  padding: 40px 1px;
  transition: 0.5s;
	font-weight:400;
}

ul.nav-container > li > a.active,
a.active i.fa-search,
a.active i.fa-angle-down {
	color:var(--accent-text-color);
}

ul.nav-container > li > a::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 7px;
  top: 0;
  left: 0;
  background: var(--accent-text-color);
  qbackground: linear-gradient(to right,#099,#099,#099);
  transition: transform 0.5s;
  transform: scaleX(0);
  transform-origin: bottom;
}

ul.nav-container > li > a.active::after {
  background: var(--accent-text-color);
  transition: transform 0.5s;
  transform: scaleX(1.1);
  transform-origin: none;
}

ul.nav-container li a:hover {
  color: #95a5a6;
  color: var(--accent-text-color);
}
ul.nav-container > li > a:hover::after {
  transform: scaleX(1.1);
  transform-origin: top;
}

@media only screen and ( max-width: 1200px ) /* 1000 62.5em*/
		{
			nav
			{
				width: 100%;
				position: static;
				margin: 0;
			}
		}

@media only screen and ( max-width: 2000px ) /* 640 40em*/
		{
/* top navigation */
.head-logo {
  position: absolute;
  width:80%;
  top:0%;
	left:10%;
  text-align:center;
  margin:20px auto 0;
  padding:2px 0 0 ;
}  
			
#nav {
  margin-top: 5px;
  height:95px
      }      
    
#nav > a {
	position: absolute;
	top: 0;
	left:0;
	font-size:1.2em;
	z-index:9999
}

#nav li a {
	color: #fff;
	border-top:0 solid #fff;
	text-align: left
}

#nav > a {
	width: 2.1875em; /* 35 */
	height: 2.1875em; /* 35 */
	position: relative;
	padding:25px 12px
}

#nav > a:before,
#nav > a:after {
	position: absolute;
	top: 0%;
	left:0;
	right:0
}					
#nav > a:after {
	top:60%
}

#nav:not( :target ) > a:first-of-type,
#nav:target > a:last-of-type {
	display: block
}

#nav span:after {
	border-top-color: #fff;/* Sub arrow */
	display: inline-block
}
			
/* first level */
#nav > ul {
	height: auto;
	display: none;
	position: absolute;
  	qposition:relative;
	left: 0;
	right: 0;
	top:95px;/*-2px*/
	padding:0;
	background:var(--accent-text-color);
  width:100%
}
#nav:target > ul {
	display: block
}
			
#nav > ul > li {
	width: 100%;
	float: none;
	border-right:0;
	border-top:0;
	padding:20px 0;
  color:#fff
}		

#nav > ul > li {
	display: inline-block;
  	font-size: 14px;
  	padding: 0;
  margin:0
}

#nav > ul > li > a {
	color: #fff;
  	display: block;
  	padding: 35px 30px
}
#nav > ul > li > a i.fa-search {
	color: #fff
}			
#nav > ul > li:hover > a,			
#nav > ul > li > a.active,
#nav > ul > li > a.active i.fa-search {
  background:#fff;
  color:var(--accent-text-color)
}
#nav > ul > li:hover > a i.fa-search {
	color:var(--accent-text-color)
}     
ul.nav-container > li > a {
	width:100%
}
}