/* Icon 1 */

#nav-icon1, #nav-icon2, #nav-icon3, #nav-icon4 {
  width: 26px;
  height: 26px;
  position: absolute;
  bottom: 20px;
  right: 20px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

/* Icon 2 */

#nav-icon2 {
}

#nav-icon2 span {
  display: block;
  position: absolute;
  height: 4px;
  width: 100%;
  background: rgba(255,255,255,0.5);
  opacity: 1;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
  border-radius: 4px;
}

/* top bar before click */
#nav-icon2 span:nth-child(1) { top: 7px;}
/* middle bar before click */
#nav-icon2 span:nth-child(2) { top: 15px;}
/* bottom bar before click */
#nav-icon2 span:nth-child(3) { top: 23px;}