/* ===== Artek header redesign (fixes overlapping logo / wrapping menu) ===== */
.pageHeaderTopBar{background:#1c1c1c!important;color:#fff}
.pageHeaderTopBar a,.pageHeaderTopBar .shareTitle,.pageHeaderTopBar .icn,.pageHeaderTopBar .socialLinksSimple a{color:#ddd!important;font-size:13px}
.pageHeaderTopBar a:hover{color:#ef3936!important}

.headerFixer{background:#fff;box-shadow:0 2px 14px rgba(0,0,0,.06);transition:box-shadow .3s}
.headerFixer.ak-scrolled{box-shadow:0 8px 28px rgba(0,0,0,.14)}
.ak-logo-img{display:block;height:auto;width:170px;max-width:none;margin:0!important;transition:transform .3s}
.logo:hover .ak-logo-img{transform:scale(1.04)}

@media (min-width:992px){
  /* use the full width and lay header out with flexbox */
  #pageHeader .pageHeaderHolder{display:flex!important;align-items:center;justify-content:space-between;
    max-width:100%!important;width:100%;padding:10px 24px!important}
  #pageHeader .pageHeaderHolder:after{display:none}
  #pageHeader .logo{float:none!important;flex:0 0 auto;max-width:none!important;margin:0 18px 0 0!important}
  #pageHeader .pageNavHolder{float:none!important;flex:1 1 auto;width:auto!important;margin:0!important;display:flex;justify-content:flex-end;align-items:center}
  #pageNav{width:100%;padding:0!important;justify-content:flex-end}
  #pageMainNavCollapse{flex-grow:0}
  .pageMainNavigation.navbar-nav{flex-direction:row!important;flex-wrap:nowrap;align-items:center;margin:0!important;width:auto!important;
    background:transparent!important;overflow:visible!important;display:flex!important}
  .pageMainNavigation.navbar-nav>li{margin:0 2px}
  .pageMainNavigation.navbar-nav>li>.nav-link{
    white-space:nowrap;margin:0!important;padding:10px 11px!important;font-size:13px;letter-spacing:.3px;
    color:#2b2b2b!important;position:relative;line-height:1.2}
  /* animated underline */
  .pageMainNavigation.navbar-nav>li>.nav-link:before{content:"";position:absolute;left:11px;right:11px;bottom:2px;top:auto;height:2px;
    background:#ef3936;transform:scaleX(0);transform-origin:left;transition:transform .35s ease;display:block;width:auto}
  .pageMainNavigation.navbar-nav>li>.nav-link:hover,
  .pageMainNavigation.navbar-nav>li>.nav-link.ak-active{color:#ef3936!important;background:transparent}
  .pageMainNavigation.navbar-nav>li>.nav-link:hover:before,
  .pageMainNavigation.navbar-nav>li>.nav-link.ak-active:before{transform:scaleX(1)}
  .pageMainNavigation .dropdown-menu{border-top:3px solid #ef3936;box-shadow:0 14px 34px rgba(0,0,0,.15)}
  /* CTA */
  .ak-nav-cta{margin-left:10px!important}
  .ak-cta-btn{display:inline-block;background:#ef3936;color:#fff!important;padding:10px 20px;border-radius:30px;font-size:12.5px;font-weight:600;
    text-transform:uppercase;letter-spacing:.6px;white-space:nowrap;box-shadow:0 6px 16px rgba(239,57,54,.35);transition:.3s}
  .ak-cta-btn:hover{background:#1c1c1c;transform:translateY(-2px);text-decoration:none;box-shadow:0 8px 18px rgba(0,0,0,.3)}
}
/* medium screens: tighten */
@media (min-width:992px) and (max-width:1399px){
  .ak-logo-img{width:140px}
  .pageMainNavigation.navbar-nav>li>.nav-link{font-size:12px;padding:10px 8px!important}
  .pageMainNavigation.navbar-nav>li>.nav-link:before{left:8px;right:8px}
  .ak-cta-btn{padding:9px 14px;font-size:11.5px}
}
@media (min-width:992px) and (max-width:1149px){ .ak-nav-cta{display:none} }

/* mobile menu */
@media (max-width:991.98px){
  .ak-logo-img{width:140px}
  .pageMainNavigation.navbar-nav .nav-link{white-space:normal}
  .ak-nav-cta{padding:10px 20px 14px}
  .ak-cta-btn{display:block;text-align:center;background:#ef3936;color:#fff!important;padding:10px;border-radius:30px;text-transform:uppercase;font-weight:600}
}

/* in-between widths: logo on top, menu on its own row so nothing is cut off */
@media (min-width:992px) and (max-width:1199px){
  #pageHeader .pageHeaderHolder{flex-wrap:wrap;justify-content:center;padding:8px 12px!important}
  #pageHeader .logo{margin:0 0 4px!important}
  #pageHeader .pageNavHolder{flex:1 0 100%;justify-content:center}
  #pageNav{justify-content:center}
  .pageMainNavigation.navbar-nav>li>.nav-link{font-size:11.5px;padding:8px 7px!important}
  .pageMainNavigation.navbar-nav>li>.nav-link:before{left:7px;right:7px}
  .ak-nav-cta{display:block!important;margin-left:6px!important}
  .ak-cta-btn{padding:8px 13px;font-size:11px}
}
@media (min-width:992px) and (max-width:1099px){
  .pageMainNavigation.navbar-nav>li>.nav-link{font-size:11px;padding:8px 5px!important}
  .pageMainNavigation.navbar-nav>li>.nav-link:before{left:5px;right:5px}
}
