/* Header / Navbar */

header {
   height: 54px;
   width: 100%;
   background: #dcab28;
   position: fixed;
   left: 0;
   top: 0;
   z-index: 990;
}

/* header logo */
header .logo {
   margin-left: 36px;
   margin-right: 20px;
   margin-top: 13px;
   float: left;
   width: auto; 
   z-index: 991; 

   /* add position relative since z-index only applies to  
   elements that have been given an explicit position */
   position: relative; 
}

header .logo img {
	max-width: 100%;
}

header .logo a {
   display: block;
   margin: 0;
	padding: 0;
	border: none;
	outline: none;
   width: 120px;  
}

/* header social */
header .header-social {
	font-size: 20px;
   font-weight: normal;
   line-height: 54px;
   color: #424a56;
   margin: 0 10px 0 0;
   padding: 0;
   float: right;
}
header .header-social li {
   display: inline-block;
   margin-right: 20px;
}
header .header-social li a { color: #fff; }
header .header-social li a:hover { color: #23292f; }

/* primary navigation
--------------------------------------------------------------------- */
#nav-wrap, #nav-wrap ul, #nav-wrap li, #nav-wrap a {
	 margin: 0;
	 padding: 0;
	 border: none;
	 outline: none;
}

/* nav-wrap */
#nav-wrap {
   font: 11px 'montserrat-regular', sans-serif;
   text-transform: uppercase;
   letter-spacing: 1.5px;
   float: left;
}

/* hide toggle button */
#nav-wrap > a { display: none; }

ul#nav {
   min-height: 54px;
   width: auto;

   /* left align the menu */
   text-align: left;
}
ul#nav li {
   position: relative;
   list-style: none;
   height: 54px;
   display: inline-block;

}

/* secondary navigation */

#subnav-wrap, #subnav-wrap ul, #subnav-wrap li, #subnav-wrap a {
	 margin: 0;
	 padding: 0;
	 border: none;
	 outline: none;
}

/* nav-wrap */
#subnav-wrap {
   font: 11px 'montserrat-regular', sans-serif;
   text-transform: uppercase;
   letter-spacing: 1.5px;
   float: left;
   clear: both;
   padding-left: 176px;
   background: #474f66;
   width: 100%;
}

/* hide toggle button */
#subnav-wrap > a { display: none; }

ul#subnav {
   width: auto;

   /* left align the menu */
   text-align: left;
}
ul#subnav li {
   position: relative;
   list-style: none;
   display: inline-block;

}

/* Links */

/* primary nav links */
ul#nav li a {

   /* 8px padding top + 8px padding bottom + 38px line-height = 54px */
   display: inline-block;
   padding: 8px 8px;
   line-height: 38px;
	text-decoration: none;
   text-align: left;
   color: #23292f;

	-webkit-transition: color .2s ease-in-out;
	-moz-transition: color .2s ease-in-out;
	-o-transition: color .2s ease-in-out;
	-ms-transition: color .2s ease-in-out;
	transition: color .2s ease-in-out;
}
ul#nav li a:hover{ color: #fff; }
ul#nav li a:active { background-color: transparent !important; }
ul#nav li.current a{ color: #fff; }

/* secondary nav links */
ul#subnav li a {
   display: inline-block;
   padding: 8px 8px;
	text-decoration: none;
   text-align: left;
   color: #f2c242;

	-webkit-transition: color .2s ease-in-out;
	-moz-transition: color .2s ease-in-out;
	-o-transition: color .2s ease-in-out;
	-ms-transition: color .2s ease-in-out;
	transition: color .2s ease-in-out;
}
ul#subnav li a:hover { color: #fff; }
ul#subnav li a:active { background-color: transparent !important; }
ul#nav li.current a { color: #fff; }


/* screenwidth less than or equal 900px
--------------------------------------------------------------------- */
@media only screen and (max-width: 900px) {

   /* Header Styles
   ------------------------------------------------------------------ */
   header .header-social { font-size: 18px; }
   header .header-social li { margin-right: 15px; }
  
   /* nav-wrap */
   #nav-wrap { font: 10px 'montserrat-regular', sans-serif; }

}

/* screenwidth less than 768px - mobile/smaller tablets
---------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {

   /* mobile navigation
   -------------------------------------------------------------------- */
   #nav-wrap {
      font: 11px 'montserrat-regular', sans-serif;
      background: transparent !important;
      letter-spacing: 1.5px;  
      color: #515968;
      
      position: absolute;
      top: 0;
      right: 0;
   }
   #nav-wrap > a {	   
      text-align: left;
		border: none;            
      color: #fff;
      font-size: 12px;
      height: 54px;
      line-height: 54px; 
      float: right;     
                        
      font: 0/0 a;
      text-shadow: none;
      color: transparent;

      position: relative;
      top: 0px;
      right: 36px;
   }
	#nav-wrap > a:before {
	   font-family: 'FontAwesome';
      content: "\f0c9";
      color: #fff;
      margin: 0;
      font-size: 25px;
      line-height: 54px;
      text-align: left;      
      display: block; 
      float: right;     
	}

   /* hide menu panel */
   #nav-wrap ul#nav {
      padding: 24px 36px 48px 36px;
      background: #dcab28; 
      height: auto;
      display: none;
      clear: both;
      width: auto; 
            
      position: relative;
      top: 0;
      right: 30px;           
   }
   
   #subnav-wrap {
		display: none;
	}
   
   /* display toggle buttons */
	.no-js #nav-wrap:not( :target ) > a:first-of-type,
	.no-js #nav-wrap:target > a:last-of-type  {
	   display: block;
	} 
   .js #nav-wrap a { display: block; }  

   /* display menu panels - no JS*/
   .no-js #nav-wrap:target > ul#nav  {
      display: block;           
   }

   ul#nav li {
      display: block;
      height: auto;      
      text-align: left;
      border-bottom: 1px solid #2D2E34;
      border-bottom-style: dotted; 
   }
  
   ul#nav li a {  
      display: block;   
      width: auto;  
      margin: 0;
      padding: 0;      
      margin: 12px 0; 
      line-height: 16px; /* reset line-height from 54px */
      border: none;
   }  

   /* hide social icons */
   .header-social { display: none; }


   /* Header Styles
   -------------------------------------------------------------------- */
   header .logo { margin-right: 36px; }

}

/* screenwidth less than or equal 480px - mobile wide
  -------------------------------------------------------------------------- */
@media only screen and (max-width: 480px) {   

   /* mobile navigation
   -------------------------------------------------------------------- */
   #nav-wrap { width: 100%; }
   #nav-wrap ul#nav { 
      width: 100%;
      float: none;
      right: 0;             
   }  

}

/* make sure the menu is visible on larger screens
  -------------------------------------------------------------------------- */

@media only screen and (min-width: 768px) {
   
   #nav-wrap ul#nav { display: block !important; }

}