.menu {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
    z-index:10;  
    overflow:hidden;
    /*box-shadow: 2px 0 18px rgba(0, 0, 0, 0.26);*/
}
.menu li a{
  display: inline-block;
  height: 4em;
  width: 4em;
  line-height: 4em;
  font-size: 1.3em;
  text-align:center;
  position: relative;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  transition: background 0.1s ease-in-out;
}

.open{
    width:10em;
    height:100%;
}

.space {
    margin-left: 84px;
}

@media all and (max-width: 500px) {
    .space {
        margin-left: 0;
    }
    .container{
        margin-top:100px;
    }
    .menu{
        top: inherit !important;
        height:5em;
        width:100%;
    }
    .menu li{
        display:inline-block;
    }
    .open{
        width:100%;
        height:auto;
    }
    .para{
    padding-left:5px;
}  
}
@media screen and (max-height: 34em) and (max-width: 500px){
  .menu{
        height:3.5em;
    }
    .space {
        margin-left: 0;
    }
}