So there's a website I'm working on which uses a hamburger menu. Once is clicked, this hamburger menu shows a a fullscreen overlay with menu options. 

I would like this overlay to fade in when the hamburger menu is clicked and fade out once it's clicked again.

At the moment I have being able to make the overlay to fade in by adding an active class to the overlay menu and by adding the following CSS:

```
.overlay {

  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 1s, visibility 1s;
  transition: opacity 1s, visibility 1s;

}

.overlay.open {

visibility: visible;
opacity: 1;
z-index: 50;

}

```

However, I have no clue how I could make the overlay to fade out when the toggle is clicked once again.

Here's the development site if you guys want to check a working example:

<http://dev.alvaroching.com/>

Thanks!