nav{
  width: 100%;
  color: #fff;
  transition: .3s;
  padding: calc(var(--defaultSpace) / 1.4) var(--defaultSpace);
  position: fixed;
  z-index: 9999;
}

nav::before{
  content: "";
  width: 100%;
  height: 100%;
  background: var(--bgDefault);
  position: absolute;
  top: 0;
  left: 0;
}

.blocks.stHeader{padding-top: 7rem;}

.menu{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
}

.logo{
  width: 100%;
  max-width: 100px;
}

.bell{
  width: 60px;
  text-align: right;
  padding: 8px 2px 8px 8px;
  cursor: pointer;
}

.bell img{height: 22px;}

.ring{
  -webkit-animation: ring 4s .01s ease-in-out 3;
  -webkit-transform-origin: 75% 4px;
  -moz-animation: ring 4s .01s ease-in-out 3;
  -moz-transform-origin: 75% 4px;
  animation: ring 4s .01s ease-in-out 3;
  transform-origin: 75% 4px;
}

@-webkit-keyframes ring{
  0%{-webkit-transform: rotateZ(0);}
  1%{-webkit-transform: rotateZ(30deg);}
  3%{-webkit-transform: rotateZ(-28deg);}
  5%{-webkit-transform: rotateZ(34deg);}
  7%{-webkit-transform: rotateZ(-32deg);}
  9%{-webkit-transform: rotateZ(30deg);}
  11%{-webkit-transform: rotateZ(-28deg);}
  13%{-webkit-transform: rotateZ(26deg);}
  15%{-webkit-transform: rotateZ(-24deg);}
  17%{-webkit-transform: rotateZ(22deg);}
  19%{-webkit-transform: rotateZ(-20deg);}
  21%{-webkit-transform: rotateZ(18deg);}
  23%{-webkit-transform: rotateZ(-16deg);}
  25%{-webkit-transform: rotateZ(14deg);}
  27%{-webkit-transform: rotateZ(-12deg);}
  29%{-webkit-transform: rotateZ(10deg);}
  31%{-webkit-transform: rotateZ(-8deg);}
  33%{-webkit-transform: rotateZ(6deg);}
  35%{-webkit-transform: rotateZ(-4deg);}
  37%{-webkit-transform: rotateZ(2deg);}
  39%{-webkit-transform: rotateZ(-1deg);}
  41%{-webkit-transform: rotateZ(1deg);}

  43%{-webkit-transform: rotateZ(0);}
  100%{-webkit-transform: rotateZ(0);}
}

@-moz-keyframes ring{
  0%{-moz-transform: rotate(0);}
  1%{-moz-transform: rotate(30deg);}
  3%{-moz-transform: rotate(-28deg);}
  5%{-moz-transform: rotate(34deg);}
  7%{-moz-transform: rotate(-32deg);}
  9%{-moz-transform: rotate(30deg);}
  11%{-moz-transform: rotate(-28deg);}
  13%{-moz-transform: rotate(26deg);}
  15%{-moz-transform: rotate(-24deg);}
  17%{-moz-transform: rotate(22deg);}
  19%{-moz-transform: rotate(-20deg);}
  21%{-moz-transform: rotate(18deg);}
  23%{-moz-transform: rotate(-16deg);}
  25%{-moz-transform: rotate(14deg);}
  27%{-moz-transform: rotate(-12deg);}
  29%{-moz-transform: rotate(10deg);}
  31%{-moz-transform: rotate(-8deg);}
  33%{-moz-transform: rotate(6deg);}
  35%{-moz-transform: rotate(-4deg);}
  37%{-moz-transform: rotate(2deg);}
  39%{-moz-transform: rotate(-1deg);}
  41%{-moz-transform: rotate(1deg);}

  43%{-moz-transform: rotate(0);}
  100%{-moz-transform: rotate(0);}
}

@keyframes ring{
  0%{transform: rotate(0);}
  1%{transform: rotate(30deg);}
  3%{transform: rotate(-28deg);}
  5%{transform: rotate(34deg);}
  7%{transform: rotate(-32deg);}
  9%{transform: rotate(30deg);}
  11%{transform: rotate(-28deg);}
  13%{transform: rotate(26deg);}
  15%{transform: rotate(-24deg);}
  17%{transform: rotate(22deg);}
  19%{transform: rotate(-20deg);}
  21%{transform: rotate(18deg);}
  23%{transform: rotate(-16deg);}
  25%{transform: rotate(14deg);}
  27%{transform: rotate(-12deg);}
  29%{transform: rotate(10deg);}
  31%{transform: rotate(-8deg);}
  33%{transform: rotate(6deg);}
  35%{transform: rotate(-4deg);}
  37%{transform: rotate(2deg);}
  39%{transform: rotate(-1deg);}
  41%{transform: rotate(1deg);}

  43%{transform: rotate(0);}
  100%{transform: rotate(0);}
}

.bellMessage{
  width: 100%;
  max-width: 340px;
  background: #fff;
  border-radius: calc(var(--defaultSpace) / 6);
  position: absolute;
  top: 45px;
  right: 0;
  padding: var(--defaultSpace);
  color: #333;
  z-index: 9999;
  font-family: Arial, Helvetica, sans-serif;
  font-size: .9em;
  display: none;
}

.bellMessage::before{
  content: "";
  width: 20px;
  height: 20px;
  background: inherit;
  border-radius: inherit;
  transform: rotate(45deg);
  position: absolute;
  top: -2px;
  right: calc(var(--defaultSpace) / 3.8);
}

.linkBell{
  margin: calc(var(--defaultSpace) * 2) 0 0 auto;
  padding: calc(var(--defaultSpace) / 1.2) calc(var(--defaultSpace) * 1.4);
  display: table;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--btnsColor);
  border-radius: calc(var(--defaultSpace) / 3.4);
  border-bottom: inset 1.5px rgba(0, 0, 0, 0.3);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: var(--fwBolder);
  color: #fff;
  cursor: pointer;
}

.linkBell:hover::after{
  content: "";
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.5);
}