.menu-bar {
    transition: all 0.3s ease-in-out;
    transition-delay: 0.2s;
    z-index: 99999;
    box-sizing: content-box;
}
.menu-bar span {
    transition: all 0.3s ease-in-out;
    background-color: #fff;
    display: inline-block;
    height: 3px;
    position: absolute;
    top: 50%;
    left: 10px;
    width: 22px;
}
.menu-bar span:before, 
.menu-bar span:after {
    transition: all 0.3s ease-in-out;
    background-color: #fff;
    content: '';
    display: block;
    height: 3px;
    position: absolute;
    width: 30px;
}
.menu-bar span:before {
    top: -8px;
}
.menu-bar span:after {
    top: 8px;
}
.triggered .menu-bar span {
    width: 0;
}
.triggered .menu-bar span:before {
    transform: rotate(45deg);
    top: 0;
}
.triggered .menu-bar span:after {
    transform: rotate(-45deg);
    top: 0;
}
.menu-mobile {
    text-align:center;
    transition: all 0.3s ease-in-out;
    background-color: #d3d3d3;
    height: 100vh;
    opacity: 0;
    padding: 15px;
    position: fixed;
    top: 0;
    left: 0;
    transform: translateY(-100%);
    width: 100vw;
    z-index: 9999998;
    overflow-y: auto;  
}

.triggered .menu-mobile {
    opacity: 1;
    transform: translateY(0);
}
   

.slide-menu{
  list-style:none;
  text-align: center;
  padding: 0!important;
}

.slide-menu li a{
  font-size:20px;
  color:#fff;
}

.close-menu{
  position:absolute;
  top:10px;
  right:10px;
  color:#fff;
  cursor:pointer;
  font-size:25px;
}