.fa-bars, .fa-times{
  font-size: 2rem !important;
  color: #333333 !important;
  cursor: pointer;
  transition: 0.3s;
}

.fade{
  display: none;
}

.navbar-mobile{
  margin-top: -70px;
}

.navbar-toggler{
  border: 0 !important;
}

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus{
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

.toggler-icon{
  width: 30px;
  height: 3px;
  background-color: #333333;
  display: block;
  transition: all 0.2s;
  margin: 5px;
}

.navbar-toggler .top-bar{
  transform: rotate(45deg);
  transform-origin: 10% 100%;
}

.navbar-toggler .middle-bar{
  opacity: 0;
  filter: alpha(opacity=0);
}

.navbar-toggler .bottom-bar{
  transform: rotate(-45deg);
  transform-origin: 20% 100%;
}

.navbar-toggler.collapsed .top-bar{
  transform: rotate(0);
}

.navbar-toggler.collapsed .middle-bar{
  opacity: 1;
  filter: alpha(opacity=100);
}

.navbar-toggler.collapsed .bottom-bar{
  transform: rotate(0);
}