hiding text in menu for mobile and tablets

Hello, I am trying to make my menu works but it shows the text in mobile.

I wrote this for it but doesn’t hide the text and shows only the scratchs corretly and if i use display:hidden doesn’t work too:

@media all and (max-width: 480px) {
	
  #cssmenu #menu-button {
    display: block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    padding: 10px 25px 10px 5px;
    font-size: 13px;/* if =0, i hide the text but the border still consider the text hidden. */
    color: #333333;
    cursor: pointer;
    border: 1px solid #333333;	 
  }
  #cssmenu #menu-button:after {
    display: block;
    content: '';
    position: absolute;
    height: 3px;
    width: 22px;
    border-top: 2px solid #333;
    border-bottom: 2px solid #333;
    right: 15px;
    top: 10px;	 
	  
  }
  #cssmenu #menu-button:before {
    display: block;
    content: '';
    position: absolute;
    height: 3px;
    width: 22px;
    border-top: 2px solid #333;
    border-bottom: 2px solid #333;
    right: 15px;
    top: 19px;
  }
}

Does anyone know how to fix it, please?

The page I need help with: [log in to see the link]