@media (min-width: 992px) {
  div.dl-menuwrapper {
    display: none;
  }
}

.dl-menuwrapper {
  width: 100%;
  max-width: 300px;
  z-index: 10;
}

.dl-menuwrapper:first-child {
  margin-right: 0px;
}

.dl-menuwrapper .dl-menu.dl-menuopen {
  width: 300px;
  box-shadow: 0 6px 12px rgba(0,0,0,.175);
}

.dl-menuwrapper button.dl-trigger {
  background-color: transparent;
  overflow: visible;
  text-indent: 0px;
}
.dl-menuwrapper button.dl-trigger::after {
  display: none;
}
.dl-menuwrapper button.dl-trigger .fa::before {
  display: block;
  content: '';
  font-size: 0px;
  width: 24px;
  height: 19px;
}
.dl-menuwrapper button.dl-trigger.dl-active .fa::before {
  display: block;
  content: '';
  font-size: 0px;
  width: 19px;
  height: 19px;
}

.dl-menuwrapper .dl-menu {
  padding-bottom: 10px;
  top: 50px;
}

/*.dl-menuwrapper ul {
  background-color: rgba(0, 0, 0, 0.7);
}*/
.dl-menuwrapper ul {
  background-color: transparent;
}
.u-header__section--light.g-bg-white .dl-menuwrapper ul {
  background-color: rgba(255, 255, 255, 1);
}
.dl-menuwrapper li a {
  color: #555555;
  padding: 10px 20px 10px 20px;
  font-size: 17px;
}
.u-header__section--light.g-bg-white .dl-menuwrapper li a {
  color: #555555;
}
.dl-menuwrapper li.ml-active > a {
  color: #99cc33;
}
.u-header__section--light.g-bg-white .dl-menuwrapper li.ml-active > a {
  color: #99cc33;
}

.dl-menuwrapper li a:hover,
.dl-menuwrapper li a:active,
.dl-menuwrapper li a:focus {
  background-color: rgba(0, 0, 0, 0.1) !important;
  text-decoration: none !important;
  color: #99cc33;
}
.dl-menuwrapper li.active > a,
.dl-menuwrapper li > ul > li.active > a {
  /*background-color: rgba(0, 0, 0, 0.1) !important;*/
  color: #99cc33;
}

.no-touch .dl-menuwrapper li a:hover {
  background-color: rgba(0, 0, 0, 0.7);
  text-decoration: none;
  color: #99cc33;
}

.dl-menuwrapper li.dl-back > a {
  color: #555555;
}
.u-header__section--light.g-bg-white .dl-menuwrapper li.dl-back > a {
  background-color: rgba(255, 255, 255, 1);
}
.dl-menu.dl-subview li.dl-subviewopen > a {
  display: none !important;
}

.dl-menuwrapper li.dl-subviewopen li.dl-direct a {
  color: #99cc33;
  font-size: 20px;
  font-weight: bold;
  text-decoration: none;
}

.dl-menuwrapper li.dl-back::after {
  content: '\f104';
  font-family: FontAwesome;
  transform: rotate(0deg);
  color: #99cc33;
  line-height: 40px;
}
.dl-menuwrapper li > a:not(:only-child)::after {
  content: '\f105';
  font-family: FontAwesome;
  transform: rotate(0deg);
  color: #99cc33;
  line-height: 40px;
}
.dl-menuwrapper li.dl-subviewopen > a:not(:only-child)::after {
  content: '';
}

/*** hamburger button ***/
.u-header__section--dark.g-bg-black-opacity-0_7 .hamburger--slider.dl-active:hover .hamburger-inner,
.u-header__section--dark.g-bg-black-opacity-0_7 .hamburger--slider.dl-active:hover .hamburger-inner::after,
.u-header__section--dark.g-bg-black-opacity-0_7 .hamburger--slider.dl-active:hover .hamburger-inner::before,
.u-header__section--dark.g-bg-black-opacity-0_7 .hamburger--slider:hover .hamburger-inner,
.u-header__section--dark.g-bg-black-opacity-0_7 .hamburger--slider:hover .hamburger-inner::after,
.u-header__section--dark.g-bg-black-opacity-0_7 .hamburger--slider:hover .hamburger-inner::before {
  background-color: #99cc33 !important;
}
.u-header__section--light.g-bg-white .hamburger--slider.dl-active:hover .hamburger-inner,
.u-header__section--light.g-bg-white .hamburger--slider.dl-active:hover .hamburger-inner::after,
.u-header__section--light.g-bg-white .hamburger--slider.dl-active:hover .hamburger-inner::before,
.u-header__section--light.g-bg-white .hamburger--slider:hover .hamburger-inner,
.u-header__section--light.g-bg-white .hamburger--slider:hover .hamburger-inner::after,
.u-header__section--light.g-bg-white .hamburger--slider:hover .hamburger-inner::before {
  background-color: #99cc33 !important;
}

.hamburger--slider.dl-active .hamburger-inner {
  transform: translate3d(0,10px,0) rotate(45deg);
}
.hamburger--slider.dl-active .hamburger-inner::before {
  transform: rotate(-45deg) translate3d(-5.71429px,-6px,0);
  opacity: 0;
}
.hamburger--slider.dl-active .hamburger-inner::after {
  transform: translate3d(0,-20px,0) rotate(-90deg);
}
