/* new */
/* ====================== */
 /* The side navigation menu */
.menu-home-class {
  background-color: rgba(0, 0, 0, 0.5);
  height: 200px; /* 100% Full-height */
  width: 0px; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 2; /* Stay on top */
  top: 20px;
  left: 0px;
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 30px; /* Place content 60px from the top */
  transition: 0.3s; /* 0.5 second transition effect to slide in the sidenav */
  border-radius: 0px 10px 10px 0px;
  
  
}/* The navigation menu links */

/* When you mouse over the navigation links, change their color */
.menu-home-class a:hover, .offcanvas a:focus
{
  color: #fff;
}    

/* Position and style the close button (top right corner) */
.menu-home-class .closebtn {
  position: absolute;
  top: 0px;
  right: 10px;
  font-size: 45px;
  text-decoration: none;    
  vertical-align: middle;
}

.button-icon {
  cursor: pointer; /* change mouse cursor */
  width: 50px;
}

#button-menu {
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 20px;
  left: 0;
  overflow-x: hidden; /* Disable horizontal scroll */
  width: 30px;
  cursor: pointer; /* change mouse cursor */
}

.button-icon
{
  background-color: rgba(255, 255, 255, 1.0);
  border: none;
  border-radius: 10px;
  padding: 10px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 4px;
  cursor: pointer;
}

.button-icon:hover, .offcanvas .button-icon:focus
{
  background: #AAAAAAFF
} 

.list-style {
  list-style-type: none;
  padding-left:0;
}