
.sidenav {
  height: 100%;  width: 0px;  position: absolute;  z-index: 2;  top: 50px;  right: 0;
  overflow-x: hidden;  transition: 0.5s;  padding-top: 61px;  background: #fff; }
.line {
  border-bottom: 1px solid #00953b;  margin-left: 10px;  margin-right: 10px;  display: block;  transition: 0.3s;}
.sidenav a {
  padding-top: 16px;  padding-bottom: 16px;  padding-left: 40px;  text-align: left;  text-decoration: none;
  font-size: 18px;  color: #000;  display: block;  transition: 0.3s;}
.sidenav a:hover {
  color: #00953b;}
.menuIconToggle {
  box-sizing: border-box;  cursor: pointer;  position: absolute; padding: 5px; 
  top: 60px;  right: 60px;  height: 40px;  width: 40px;  transition: all 0.3s;  z-index: 10;}
.menuIconToggle .openSideMenu{display: none;}
.hamb-line {
  box-sizing: border-box;  position: absolute;  height: 4px;  width: 100%;  background-color: #00953b;  transition: all 0.25s;}
.hor {
  transition: all 0.3s;  box-sizing: border-box;  position: relative;  float: left;  margin-top: 5px;}
.dia.p-1 {
  position: relative;  box-sizing: border-box;  float: left;  transition: all 0.25s;}
.dia.p-2 {
  box-sizing: border-box;  position: relative;  float: left;  margin-top: 5px;  transition: all 0.25s;}
input[type="checkbox"]:checked ~ .menuIconToggle > .hor {
  box-sizing: border-box;  opacity: 0 !important;  transition: all 0.25s; border: none;}
input[type="checkbox"]:checked ~ .menuIconToggle > .dia.p-1 {
  box-sizing: border-box;  transform: rotate(135deg);  margin-top: 8px;  transition: all 0.25s;}
input[type="checkbox"]:checked ~ .menuIconToggle > .dia.p-2 {
  box-sizing: border-box;  transform: rotate(-135deg);  margin-top: -9px;  transition: all 0.25s;}
