#loader{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}

#loader{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}

#loader.active{
  opacity:1;
  pointer-events:auto;
}

.loader-inner{
  position:relative;
  width:120px;
  height:120px;
  background:var(--blue);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:
    inset 0 2px 26px #027,
    inset 0 -6px 24px #027;
}

.loader-logo{
  width:75px;
  height:75px;
  object-fit:contain;
  z-index:2;
  filter: drop-shadow(1px 1px 1px white);
}

.loader-ring{
  position:absolute;
  inset:-18px;
  border-radius:50%;
  border:6px solid transparent;
  border-top:6px solid #cf3e3e;
border-right:6px solid #cf3e3e;
  animation:spin 1s linear infinite;
}

@keyframes spin{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}

@keyframes popBounce{
  0%   { transform:scale(0.7); opacity:0; }
  60%  { transform:scale(1.08); opacity:1; }
  80%  { transform:scale(0.97); }
  100% { transform:scale(1); }
}

.loader-inner.pop{
  animation:popBounce 0.45s cubic-bezier(.34,1.56,.64,1);
}

/* NAV */
.nav{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  height:80px;
  background:#fff;
  border-top:1px solid #eee;
  display:flex;
  justify-content:space-around;
  align-items:center;
  z-index:999;
}

.nav-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  font-size:11px;
  color:#8e8e93;
  cursor:pointer;
  flex:1;
}

.nav-item.active{
  color:#cf3e3e;
  font-weight:600;
}

.nav-icon{
  width:26px;
  height:26px;
  object-fit:contain;
  margin-bottom:4px;
  transition:transform .15s ease;
}

.nav-item:active .nav-icon{
  transform:scale(0.9);
}