@media only screen and (max-width:768px) {
  #menuToggle {
    display: block;
    position: relative;
    top: 0px;
    left: 50px;
    z-index: 1;
    margin-bottom: 60px;
    -webkit-user-select: none;
    user-select: none;
  }

  #menuToggle a {
    text-decoration: none;
    color: #fff;
    font-size: 18px;
    text-transform: capitalize;
  }




  #menuToggle input {
    display: block;
    width: 40px;
    height: 32px;
    position: absolute;
    top: -7px;
    left: -5px;

    cursor: pointer;

    opacity: 0;
    /* hide this */
    z-index: 2;
    /* and place it over the hamburger */

    -webkit-touch-callout: none;
  }

  /*
  * Just a quick hamburger
  */
  #menuToggle span {
    display: block;
    width: 23px;
    height: 3px;
    margin-bottom: 4px;
    position: relative;

    background: white;
    border-radius: 3px;

    z-index: 1;

    transform-origin: 4px 0px;

    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
      background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
      opacity 0.55s ease;
  }

  #menuToggle span:first-child {
    transform-origin: 0% 0%;
  }

  #menuToggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
  }

  /* 
  * Transform all the slices of hamburger
  * into a crossmark.
  */
  #menuToggle input:checked~span {
    opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);
    background: #fff;
  }

  /*
  * But let's hide the middle one.
  */
  #menuToggle input:checked~span:nth-last-child(3) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
  }

  /*
  * Ohyeah and the last one should go the other direction
  */
  #menuToggle input:checked~span:nth-last-child(2) {
    transform: rotate(-45deg) translate(0, -1px);
  }

  /*
  * Make this absolute positioned
  * at the top left of the screen
  */
  #menu {
    position: absolute;
    width: 300px;
    margin: -100px 0 0 -50px;
    padding: 50px 10px 50px 30px;
    padding-top: 125px;
    background: #1C1816;
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    /* to stop flickering of text in safari */
    transform-origin: 0% 0%;
    transform: translate(-100%, 0);
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
    overflow-y: auto;
    height: 700px;


  }

  #menu .bucket {
    width: 250px;
  }

  .day {
    position: relative;
    left: 20px;
    background-color: #000;
    width: 60px;
    text-align: left;

  }

  .time button {
    padding: 8px 8px;
    font-size: 14px;
    border: none;
  }

  .night {
    width: 53px;
    background-color: #EA002A;
    position: relative;
    z-index: 5;
  }

  #menu-bar {
    margin-top: 12px !important;
    height: 1px !important;
    border: 1px solid #6b6b6b;
    width: 250px !important;
    margin-bottom: 25px !important;
  }

  #service {
    width: 250px !important;
  }

  #service img {
    width: 25px;
    margin-right: 10px !important;
  }

  #service>a {
    /* padding: 0 !important; */
    color: #fff;
    display: block;
    font-size: 18px !important;
    padding: 0px 0 0px 10px !important;
    margin: 5px 0;
    transition: all .4s;
  }

  /* #service div {
  } */
  #service>a:hover {
    transform: scale(1.1);
    background-color: #A3A3A3;
    padding-left: 0 !important;
    width: 250px !important;
    color: #fff !important;
  }

  #service li {
    font-size: 18px !important;
  }

  #menu>a {
    /* padding: 0 !important; */
    color: #fff;
    display: block;
    font-size: 18px !important;
    padding: 0px 0 0px 10px !important;
    margin: 5px 0;
    transition: all .4s;
  }

  /* #service div {
  } */
  #menu>a:hover {
    transform: scale(1.1);
    background-color: #A3A3A3;
    padding-left: 0 !important;
    width: 250px !important;
    color: #fff !important;
  }

  #menu li {
    padding: 10px 0;
    font-size: 18px;
  }

  /*
  * And let's slide it in from the left
  */
  #menuToggle input:checked~ul {
    transform: none;
  }
}



#menuToggle {
  display: block;
  position: relative;
  top: 0px;
  left: 50px;

  z-index: 1;

  -webkit-user-select: none;
  user-select: none;
}

#menuToggle a {
  text-decoration: none;
  color: #fff;
  font-size: 18px;
  text-transform: capitalize;
}




#menuToggle input {
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;

  cursor: pointer;

  opacity: 0;
  /* hide this */
  z-index: 2;
  /* and place it over the hamburger */

  -webkit-touch-callout: none;
}

/*
* Just a quick hamburger
*/
#menuToggle span {
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;

  background: white;
  border-radius: 3px;

  z-index: 1;

  transform-origin: 4px 0px;

  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
    background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
    opacity 0.55s ease;
}

#menuToggle span:first-child {
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2) {
  transform-origin: 0% 100%;
}

/* 
* Transform all the slices of hamburger
* into a crossmark.
*/
#menuToggle input:checked~span {
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #fff;
}

/*
* But let's hide the middle one.
*/
#menuToggle input:checked~span:nth-last-child(3) {
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
* Ohyeah and the last one should go the other direction
*/
#menuToggle input:checked~span:nth-last-child(2) {
  transform: rotate(-45deg) translate(0, -1px);
}

/*
* Make this absolute positioned
* at the top left of the screen
*/
#menu {
  position: absolute;
  width: 300px;
  margin: -100px 0 0 -50px;
  padding: 50px 10px 50px 30px;
  padding-top: 125px;
  background: #1C1816;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
  overflow-y: auto;
  height: 700px;


}

#menu .bucket {
  width: 250px;
}

.day {
  position: relative;
  left: 20px;
  background-color: #000;
  width: 60px;
  text-align: left;

}

.time button {
  padding: 8px 8px;
  font-size: 14px;
  border: none;
}

.night {
  width: 53px;
  background-color: #EA002A;
  position: relative;
  z-index: 5;
}

#menu-bar {
  margin-top: 12px !important;
  height: 1px !important;
  border: 1px solid #6b6b6b;
  width: 250px !important;
  margin-bottom: 25px !important;
}

#service {
  width: 250px !important;
  list-style-type: none;
}

#service img {
  width: 25px;
  margin-right: 10px !important;
}

#service>a {
  /* padding: 0 !important; */
  color: #fff;
  display: block;
  font-size: 18px !important;
  padding: 0px 0 0px 10px !important;
  margin: 5px 0;
  transition: all .4s;
}

/* #service div {
} */
#service>a:hover {
  transform: scale(1.1);
  background-color: #A3A3A3;
  padding-left: 0 !important;
  width: 250px !important;
  color: #fff !important;
}

#service li {
  font-size: 18px !important;
}

#menu>a {
  /* padding: 0 !important; */
  color: #fff;
  display: block;
  font-size: 18px !important;
  padding: 0px 0 0px 10px !important;
  margin: 5px 0;
  transition: all .4s;
}

/* #service div {
} */
#menu>a:hover {
  transform: scale(1.1);
  background-color: #A3A3A3;
  padding-left: 0 !important;
  width: 250px !important;
  color: #fff !important;
}

#menu li {
  padding: 10px 0;
  font-size: 18px;
}

/*
* And let's slide it in from the left
*/
#menuToggle input:checked~ul {
  transform: none;
}