/*Ham Arrow */

.box.hamarrow {
  background: #4f575c; 
  background: var(--dark-color);
}

#nav-toggle
{ position: absolute;
  left: 48%;
  -webkit-transform: translateX(-52%);
  -ms-transform: translateX(-52%);
  transform: translateX(-52%);

  top: 48%;
  -webkit-transform: translateY(-52%);
  -ms-transform: translateY(-52%);
  transform: translateY(-52%);
}
#nav-toggle:hover span {
  background: #f04939; 
  background: var(--accent-color);
}

#nav-toggle:hover span:after {
  background: #f04939; 
  background: var(--accent-color);
}

#nav-toggle:hover span:before {
  background: #f04939; background: var(--accent-color);
}

#nav-toggle { 
  cursor: pointer; 
  padding: 10px 35px 16px 0px; 
}

#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
  cursor: pointer;
  height: 5px;
  width: 26px;
  background: #fff;
  position: absolute;
  display: block;
  content: '';
}

#nav-toggle span:before {
  top: -8px;
}
#nav-toggle span:after {
  bottom: -8px;
}

#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
  -webkit-transition: all 150ms;
  -o-transition: all 150ms;
  transition: all 150ms;
}
#nav-toggle:hover span {
  width: 45px;
}
#nav-toggle:hover span:before {
    top: -5px;
    left: -4px;
}
#nav-toggle:hover span:after {
    top: 5px;
    left: -4px;
}
#nav-toggle:hover span:before {
  -webkit-transform: rotate(-40deg);
  -ms-transform: rotate(-40deg);
  transform: rotate(-40deg);
  width: 20px;
}
#nav-toggle:hover span:after {
  -webkit-transform: rotate(40deg);
  -ms-transform: rotate(40deg);
  transform: rotate(40deg);
  width: 20px;
}

#nav-toggle.active span {
  background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
  top: 0;
}
#nav-toggle.active span:before {
  -webkit-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
#nav-toggle.active span:after {
  -webkit-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
}
#nav-toggle.active:hover span:before {
  -webkit-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  transform: rotate(-135deg);
  width: 26px;
  left: 0px;
}
#nav-toggle.active:hover span:after {
  -webkit-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
  width: 26px;
  left: 0px;
}