/* the visibility toggler */
#menuToggler { display: none; }
#mobileMenu { display: none; }
#mobileMenu { background-color: white;}

@media screen and (max-width: 800px) {
  #desktopMenu { display: none; }
  #desktopSubmenu { display: none; }
  #mobileMenu { display: block; }

  #menuToggler { display: block; }
      #menuToggler .icon { display: inline-block; vertical-align: middle; padding-right: 5px; }
      #menuToggler span { display: inline-block; vertical-align: middle; font-weight: 800; font-size: 12px; line-height: 28px; }
      #menuToggler{ text-decoration:none !important;}
	  #menuToggler:hover { text-decoration: none; }
    
  #mobileMenu.menu { left: -270px; width: 270px; z-index: 10009; line-height: 1.8; position: absolute; z-index: 9999; border: 1px solid #f2f2f2; 
  -webkit-transition:left 0.3s ease-out;
  -moz-transition:left 0.3s ease-out;
  transition:left 0.3s ease-out;
  /* resetting and blocking the elements in order to have a large touch surface */   }
  #mobileMenu.menu.menuIsActive { left: 0; }
  #mobileMenu.menu ul { display: block; position: static; opacity: 1; }
  #mobileMenu.menu ul li { border-bottom: 1px solid #f2f2f2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #mobileMenu.menu ul li a { font-size:16px; padding-top:0 !important; padding-bottom:0 !important; }
  #mobileMenu.menu > li, #mobileMenu.menu li,
  #mobileMenu.menu a, #mobileMenu.menu li > a { display: block; }

  /* globally reset all paddings */
  #mobileMenu.menu a { padding: 12px 20px !important; }
  /* resetting all the hover states - can be omitted in live sites */
  #mobileMenu.menu a:hover, #mobileMenu.menu li:hover a { background: none !important; }
}