/* sidemenu */
.mopen { position:fixed; top: 20%; left: 0%; width:80px; height: 48px; z-index:777;  }
[data-role=sidemenu-container] {position: fixed; top:0px; left:0px; height: 100%; transition: transform 400ms ease; -webkit-transition: -webkit-transform 400ms ease; }
[data-sidemenu-dir=left].is-active {
  transform: translate3d(100%, 0, 0);
  -webkit-transform: translate3d(100%, 0, 0);
  z-index:6;
  width: 60%; 
}

[data-sidemenu-dir=right].is-active {
  transform: translate3d(-70%, 0, 0);
  -webkit-transform: translate3d(-70%, 0, 0);
    z-index:6;
}

#sidemenu {
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  background-color: rgba(40, 40, 40, 0.75);
  font-size: 14px;
  transition: transform 400ms ease 0s;
  -webkit-transition: -webkit-transform 1ms ease 0s;
    z-index: 9999;
}

[data-sidemenu-dir=left] #sidemenu {
  left: 0;
  transform: translate3d(-100%, 0, 0);
  -webkit-transform: translate3d(-100%, 0, 0);
}

[data-sidemenu-dir=right] #sidemenu {
  right: 0;
  transform: translate3d(100%, 0, 0);
  -webkit-transform: translate3d(100%, 0, 0);
}
.heading {
	font-weight:bold; font-size:x-large; color:lime;
}
#sidemenu ul {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}

#sidemenu li {
  border-bottom: 1px solid #222;
}

#sidemenu a {
  display: block;
  padding: 5px 10px;
  color: #fff;
  text-decoration: none;
}

#sidemenu a:hover {
  color: silver;
}

#sidemenu .divider {
  height: 65px;
}

		@-ms-viewport { width:device-width; }
		@media only screen and (min-device-width:800px) {  #sidemenu {
	width: 100%} [data-sidemenu-dir=left].is-active {
  transform: translate3d(100%, 0, 0);
  -webkit-transform: translate3d(100%, 0, 0);
}

[data-sidemenu-dir=right].is-active {
  transform: translate3d(-30%, 0, 0);
  -webkit-transform: translate3d(-30%, 0, 0);
}
    }
    [data-role=sidemenu-content] > a {
      display: inline-block;
      margin: 8px;
    }
    
    /* w3 sidemenu */
    /* Fixed sidenav, full height */
.sidenav {
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  overflow-x: hidden;
  padding-top: 18px;
}

/* Style the sidenav links and the dropdown button */
.sidenav a, .dropdown-btn {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 14px;
  display: block;
  border: none;
  background: #404040; 
  color: #fff;
  width: 100%;
  text-align: left;
  cursor: pointer;
  outline: none;
}

/* On mouse-over */
.sidenav a:hover, .dropdown-btn:hover {
  color: #f1f1f1;
}

/* Main content */
.main {
  margin-left: 200px; /* Same as the width of the sidenav */
  font-size: 20px; /* Increased text to enable scrolling */
  padding: 0px 10px;
}

/* Add an active class to the active dropdown button */
.active {
}

/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container {
  display: none;
  background-color: #858585;
  padding-left: 8px;
}

/* Optional: Style the caret down icon */
.fa-caret-down {
  float: right;
  padding-right: 8px;
}

/* Some media queries for responsiveness */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 16px;}
}
    
/* Landscape phone */
@media (min-width: 35em){
[data-sidemenu-dir=left].is-active {width: 35%;}
}
/* Laptop/PC */
@media (min-width: 45em){
.mopen {width: 120px; height: 72px;}
[data-sidemenu-dir=left].is-active {width: 20%;}
}