.gen-mobile-nav-menu {
  display: block;
}

.mobile-icon {
  position: relative;
  padding: 15px 0;
  display: inline-block;
  top: auto;
  z-index: 3;
}

.mobile-icon:before {
  display: none;
}

.mobile-dashes:before,
.mobile-dashes:after,
.mobile-dashes {
  width: 26px;
  height: 1px;
  background-color: #FFF;
  border-radius: 0;
}

.mobile-dashes:before,
.mobile-dashes:after {
  content: '';
  position: absolute;
  display: block;
  transition: top 0.4s ease 0.4s, transform 0.4s ease;
}

.mobile-dashes:before {
  top: 7px;
  transform-origin: top left;
  transition: transform 0.2s ease-in-out, width 0.2s ease-in-out, top 0.2s ease-in-out;
}

.mobile-dashes:after {
  top: -7px;
  transform-origin: bottom left;
  transition: transform 0.2s ease-in-out, width 0.2s ease-in-out, top 0.2s ease-in-out;
}

.mobile-dashes {
  position: relative;
  display: inline-block;
  transition: transform .2s ease-in-out;
}

.mobile-icon.opened .mobile-dashes:before,
.mobile-icon.opened .mobile-dashes:after {
  top: 0;
  width: 50%;
}

.mobile-icon.opened .mobile-dashes:before {
  transform: rotate(45deg);
}

.mobile-icon.opened .mobile-dashes:after {
  transform: rotate(-45deg);
}

.mobile-icon.opened .mobile-dashes {
  transform: rotate(180deg);
}

.gen-mobile-navigation {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: 320px;
  left: auto;
  height: 100%;
  text-align: right;
  border-top: none;
  background-color: #0b0e17;
  padding: 0;
  overflow: auto;
}

.gen-mobile-navigation .gen-mobile-menu {
  padding: 30px 25px 30px 25px;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  width: 100%;
  box-sizing: border-box;
  transform: translateY(-50%);
}

.gen-mobile-navigation.closing, 
.gen-mobile-navigation.closed {
  transform: translateX(100%);
}

.gen-mobile-navigation.opening, 
.gen-mobile-navigation.opened,
.gen-mobile-navigation.closing, 
.gen-mobile-navigation.closed {
  transition: all 0.4s ease;
  max-height: none !important;
}

.gen-mobile-navigation.opened {
  -webkit-overflow-scrolling: touch;
}

.gen-mobile-menu li a {
  color: #fefefe;
  text-transform: uppercase;
  font-size: 1.6rem;
  padding: 11px 28px;
  letter-spacing: 2px;
  transition: all 0.4s ease;
}

.gen-mobile-menu li a:hover {
  background-color: transparent;
  color: #3fa9f5;
}

.gen-mobile-menu .current-menu-item a {
  color: #3fa9f5;
}

jQuery(document).ready(function ($) {
    
    $(".mobile-icon").append('<div class="mobile-dashes"></div>');
    
    $(document).on("gen-mm.opening", function() {
        $(".mobile-icon").addClass("opened");
    });
    
    $(document).on("gen-mm.closing", function() {
        $(".mobile-icon").removeClass("opened");
    });
     
});