/* =========================
   SITE HEADER
   ========================= */

.site-header{
background:#111;
border-bottom:1px solid #2a2a2a;
}


/* =========================
   HEADER BANNER / IMAGE
   ========================= */

.header-banner img{
width:100%;
display:block;
}


/* =========================
   NAVIGATION BAR
   ========================= */

.header-nav{

display:flex;
justify-content:center;
align-items:center;

gap:14px;

padding:14px 0;

background:#0a0a0a;

border-top:1px solid #222;
border-bottom:1px solid #222;

flex-wrap:wrap;

}


/* =========================
   NAVIGATION BUTTON LINKS
   ========================= */

.header-nav a{

display:inline-block;

padding:8px 18px;

background:linear-gradient(#2a2a2a,#1c1c1c);

border:1px solid #3a3a3a;

border-radius:6px;

color:#e6e6e6;

text-decoration:none;

font-size:14px;

font-weight:600;

letter-spacing:.5px;

box-shadow:
0 1px 0 #444 inset,
0 -1px 0 #000 inset,
0 4px 8px rgba(0,0,0,.6);

transition:all .15s ease;

}


/* =========================
   HOVER EFFECT
   ========================= */

.header-nav a:hover{

background:linear-gradient(#3a3a3a,#222);

border-color:#555;

color:#fff;

transform:translateY(-1px);

}


/* =========================
   CLICK EFFECT
   ========================= */

.header-nav a:active{

transform:translateY(1px);

box-shadow:0 1px 2px rgba(0,0,0,.7) inset;

}