.title{
    text-transform: uppercase;
    letter-spacing: 5px;
}
.navbar{
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
}
.navbar-brand{
    float:left;
    display:initial;
}
.navbar-end{
    float:right;
}
/*/////BURGER/////*/

.line {
  fill: none;
  stroke: white;
  stroke-width: 4;
  transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
    stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.line1 {
  stroke-dasharray: 60 207;
  stroke-width: 4;
}
.line2 {
  stroke-dasharray: 60 60;
  stroke-width: 4;
}
.line3 {
  stroke-dasharray: 60 207;
  stroke-width: 4;
}
.opened .line1 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
  stroke-width: 4;
}
.opened .line2 {
  stroke-dasharray: 1 60;
  stroke-dashoffset: -30;
  stroke-width: 4;
}
.opened .line3 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
  stroke-width: 4;
}
/*/////BELL/////*/

.bell-icon {
  position: relative;
  width: 52px;
  height: 52px;
  display: flex;
}
.bell-icon svg {
  margin: auto;
  position: relative;
  right: 2%;
  width: 80%;
  height: 80%;
  stroke: rgba(0, 0, 0, 0.75);
}
.bell-icon .bell-icon__group {
  transform-origin: 50% 2px;
  transform: rotate(-8deg);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
}
.bell-icon .bell-icon__ball {
  transform-origin: 50% 2px;
  transform: translateX(-6.5%);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
}
.bell-icon:focus, .bell-icon:hover {
  outline: none;
  /*box-shadow: 0 0 12px -8px rgba(0, 0, 0, 0.6);*/
}
.bell-icon:focus .bell-icon__group, .bell-icon:hover .bell-icon__group {
  -webkit-animation: animateGroup 2.3s;
          animation: animateGroup 2.3s;
}
.bell-icon:focus .bell-icon__ball, .bell-icon:hover .bell-icon__ball {
  -webkit-animation: animateBall 2.3s;
          animation: animateBall 2.3s;
}
.bell-icon:focus .notification-amount, .bell-icon:hover .notification-amount {
  opacity: 1;
  visibility: visible;
}
.bell-icon:focus .notification-amount::before, .bell-icon:hover .notification-amount::before {
  -webkit-animation-name: bounce;
          animation-name: bounce;
  -webkit-animation-delay: 450ms;
          animation-delay: 450ms;
}

.notification-amount {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 20%;
  right: 24%;
  width: 25px;
  height: 25px;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Copse", serif;
  font-size: 14px;
}
.notification-amount span {
  position: relative;
}
.notification-amount::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #f72918;
  border-radius: 50%;
  z-index: 0;
  transform: scale(0);
  -webkit-animation-duration: 800ms;
          animation-duration: 800ms;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

@-webkit-keyframes animateGroup {
  0%, 100% {
    transform: rotate(-8deg);
  }
  17.542% {
    transform: rotate(0deg);
  }
  35.084% {
    transform: rotate(-20deg);
  }
  48.2405% {
    transform: rotate(20deg);
  }
  57.0115% {
    transform: rotate(-20deg);
  }
  64.9054% {
    transform: rotate(8deg);
  }
  74.5535% {
    transform: rotate(-15deg);
  }
  78.939% {
    transform: rotate(-7deg);
  }
}

@keyframes animateGroup {
  0%, 100% {
    transform: rotate(-8deg);
  }
  17.542% {
    transform: rotate(0deg);
  }
  35.084% {
    transform: rotate(-20deg);
  }
  48.2405% {
    transform: rotate(20deg);
  }
  57.0115% {
    transform: rotate(-20deg);
  }
  64.9054% {
    transform: rotate(8deg);
  }
  74.5535% {
    transform: rotate(-15deg);
  }
  78.939% {
    transform: rotate(-7deg);
  }
}
@-webkit-keyframes animateBall {
  0%, 100% {
    transform: translateX(-6.5%);
  }
  17.542% {
    transform: translateX(0%);
  }
  21.9275% {
    transform: translateX(-1%);
  }
  35.084% {
    transform: translateX(11%);
  }
  48.2405% {
    transform: translateX(-11%);
  }
  52.626% {
    transform: translateX(0%);
  }
  59.6428% {
    transform: translateX(10%);
  }
  68.4138% {
    transform: translateX(-11%);
  }
  78.939% {
    transform: translateX(11%);
  }
  85.9558% {
    transform: translateX(-11%);
  }
}
@keyframes animateBall {
  0%, 100% {
    transform: translateX(-6.5%);
  }
  17.542% {
    transform: translateX(0%);
  }
  21.9275% {
    transform: translateX(-1%);
  }
  35.084% {
    transform: translateX(11%);
  }
  48.2405% {
    transform: translateX(-11%);
  }
  52.626% {
    transform: translateX(0%);
  }
  59.6428% {
    transform: translateX(10%);
  }
  68.4138% {
    transform: translateX(-11%);
  }
  78.939% {
    transform: translateX(11%);
  }
  85.9558% {
    transform: translateX(-11%);
  }
}
@-webkit-keyframes bounce {
  0% {
    transform: scale(0);
  }
  14% {
    transform: scale(1.15);
  }
  28% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.15);
  }
  70% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounce {
  0% {
    transform: scale(0);
  }
  14% {
    transform: scale(1.15);
  }
  28% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.15);
  }
  70% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}