body {
  overflow-x: hidden;
  width: 100%;
}

#btnOffCanMenu {
  color: rgb(255, 255, 255);
  display: inline-block;
  font: 400 14px/19px "opensans-bold",sans-serif;
  height: 100%;
  margin: 9px 0;
  position: relative;
  width: 80px;
}
#btnOffCanMenu:hover {
  cursor: pointer;
}
#btnOffCanMenu img {
  left: 0;
  position: absolute;
  top: 36%;
}

#ocmMenuWrapper {
  height: 100%;
  overflow-x: hidden;
  position: fixed;
  transition: .5s;
  z-index: 5000;
}
#ocmMenuWrapper ul {
  background: #333;
  box-shadow: 0 0 25px -3px #000 inset;
  left: 0;
  margin: 0;
  max-height: 100%;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0;
  position: absolute;
  top: 0;
  /* z-index: 510; */ /*Commented this line to make menu visible when user not logged in*/
}
#ocmMenuWrapper ul.top-level, #ocmMenuWrapper ul[style*='translateX(0px)'] {
  pointer-events: initial;
}
#ocmMenuWrapper ul li {
  border-bottom: 1px solid #808080;
  color: #eee;
  display: block;
  font: 400 16px/16px "opensans",sans-serif;
  height: 58px;
  list-style-type: none;
}
#ocmMenuWrapper ul li.btnOCMBack {
  padding: 20px;
}
#ocmMenuWrapper ul li.btnOCMBack:hover {
  background: #222;
  cursor: pointer;
}
#ocmMenuWrapper ul li * {
  display: inline;
}
#ocmMenuWrapper ul li * ul,
#ocmMenuWrapper ul li * li {
  display: block;
}
#ocmMenuWrapper ul li span {
  color: #eee;
  display: block;
  font: 400 16px/58px "opensans",sans-serif;
  padding-left: 20px;
  position: relative; /*Added this line and next to make menu visible when user not logged in*/
  z-index: 510;
}
li > #ocmMenuWrapper ul li span:last-child {
  padding: 12px 20px 0;
}
#ocmMenuWrapper ul li a {
  color: rgb(255,255,255);
  display: block;
  line-height: 58px;
  padding-left: 20px;
  text-decoration: none;
}
#ocmMenuWrapper ul li a:last-child span {
  padding: 12px 20px 0;
}
#ocmMenuWrapper ul li:hover {
  background: #222;
}
#ocmMenuWrapper ul ul {
  backface-visibility: hidden;
  background: #333;
  box-shadow: 0 0 25px -3px #000 inset;
  margin: 0;
  padding: 0;
  top: 0;
  transition: .5s;
  width: 100%;
  z-index: 520;
}
#ocmMenuWrapper ul ul .ocmSubMenu {
  z-index: 521;
}
#ocmMenuWrapper ul ul ul {
  z-index: 540;
}
#ocmMenuWrapper ul ul ul .ocmSubMenu {
  z-index: 541;
}
#ocmMenuWrapper ul ul ul ul {
  z-index: 550;
}
#ocmMenuWrapper ul ul ul ul .ocmSubMenu {
  z-index: 551;
}
#ocmMenuWrapper ul ul ul ul ul {
  z-index: 560;
}
#ocmMenuWrapper ul ul ul ul ul .ocmSubMenu {
  z-index: 561;
}
#ocmMenuWrapper ul .ocmSubMenu {
  background: #333;
  border-left: 1px solid #808080;
  box-shadow: -14px 0 20px -16px #000 inset;
  color: #808080;
  display: block;
  float: right;
  font: 400 25px/25px "opensans",sans-serif;
  height: 57px;
  padding: 16px;
  position: relative;
  right: 0;
  top: 0;
  width: 59px;
  z-index: 511;
}
#ocmMenuWrapper ul .ocmSubMenu:hover {
  background: #222;
  cursor: pointer;
}
#ocmMenuWrapper ul .ocmSubMenu .fa {
  display: block;
  font-size: 28px;
  line-height: 30px;
}
#ocmMenuWrapper .ocm-close {
  backface-visibility: hidden;
}
#ocmMenuWrapper .ocm-close:hover {
  cursor: pointer;
}
#ocmMenuWrapper .ocm-close i {
  margin-right: 4px;
}

.ocm-overlay {
  background: #000;
  position: fixed;
  height: 100vh;
  opacity: 0;
  transition: opacity .3s ease 0s, visibility .3s ease 0s;
  visibility: hidden;
  width: 100vw;
  z-index: 4000;
}
.ocm-overlay.active {
  opacity: .4;
  visibility: visible;
}