/* ----- Burger menu styling ----- */
.burger-menu-btn {
  /*float: right;*/
  margin-top: 12px;
  margin-right: 20px;
  display: inline-block;
  cursor: pointer;
}

.burger-menu-bar-1,
.burger-menu-bar-2,
.burger-menu-bar-3 {
  width: 35px;
  height: 5px;
  background: red;
  margin: 6px 0;
  transition: 400ms;
}

.change .burger-menu-bar-1{
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.change .burger-menu-bar-2 {opacity: 0;}

.change .burger-menu-bar-3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
}

.open-slide { /*Burger btn*/
  float: right;
z-index: 1;
padding-top: 20px;
padding-right: 30px;
}

.side-nav {
letter-spacing: 1px;
text-align: center;
  height: 100%;
  width: 0%;
  position: fixed;
z-index: -1;
right: 0;
  background: #303030;
  overflow-x: hidden;
  padding-top: 45px;
transition: 300ms;
}

.side-nav a {
text-transform: uppercase;
  text-decoration: none;
  padding: 3% 10px 30px 30px;
  font-size: 24px;
  color: #f1f1f1;
  display: block;
transition: 300ms;
}	

.side-nav a:hover {
letter-spacing: 2px;
  color: #f1f1f1;
}
#burger-menu{
width: 0%;
}
#burger-menu.open{
width: 100%;
}