/* ==========================================
   CONTERCO INDUSTRIES
   NAVIGATION
========================================== */

/* TOPBAR */

.topbar{

position:fixed;
top:0;
left:0;
width:100%;
height:50px;

display:flex;
align-items:center;

padding:0 25px;

background:rgba(5,7,10,.92);

backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);

border-bottom:1px solid rgba(255,255,255,.08);

z-index:9999;

transition:.35s ease;

}

/* LOGO */

.logo{

width:52px;
height:52px;
object-fit:contain;

}

.logo-link{

display:flex;
align-items:center;

}

.topbar h2{

margin-left:12px;

margin-right:auto;

font-size:1.4rem;

font-weight:700;

color:#fff;

letter-spacing:.8px;

}

/* MENU BUTTON */

.menu-btn{

width:42px;
height:42px;

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

background:none;

border:none;

color:#fff;

font-size:24px;

border-radius:12px;

cursor:pointer;

transition:.3s;

}

.menu-btn:hover{

background:nome;

}

/* MOBILE MENU */

#menu{

position:fixed;

top:55px;
left:100%;

width:100%;
height:calc(100vh - 55px);

background:#111;

overflow-y:auto;

padding:20px;

transition:.4s ease;

z-index:999;

}

#menu.show{

left:0;

}

#menu a{

display:block;

padding:18px 0;

color:#fff;

font-size:1rem;

font-weight:600;

text-decoration:none;

border-bottom:1px solid rgba(255,255,255,.08);

transition:.3s;

}

#menu a:hover{

padding-left:12px;

}

/* DESKTOP NAV (Future) */

@media(min-width:992px){

#menu{

display:flex;

position:static;

height:auto;
width:auto;

background:none;

padding:0;

margin-left:auto;

overflow:visible;

}

#menu a{

border:none;

padding:0 18px;

}

.menu-btn{

display:none;

}

}