.side-nav {
    position: fixed;
    width: 100vw;
    max-width: 600px;
    top: 0;
    left: 0;
    z-index: 10;
    background-color: #fff;
    height: 100vh;
    text-align: left;
    transform: translatex(-100vw);
    display: flex;
    flex-direction: column;
 }
 .close-btn {
   text-align: right;
 }
 .close-btn img {
   width: 90px;
   height:90px;
   padding:25px;
 }
.side-nav-main {
  padding: 5%;
  padding-top: 0px
}
.side-nav-list {

}
.side-nav-list ul {

}
.side-nav-list ul li {
  padding: 15px 0;
  border-bottom: 2px solid rgba(100,100,100,.4)
}
.side-nav-list ul li a {
  color: #444;
  font-size: 16px

}
.res-header, .side-nav {
  display: none;
}
.visible {
   transform: translateX(0px) !important;
   transition: all 0.4s;
 }
 .hidden {
   transform: translateX(-600px);
   transition: all 0.4s;
 }
@media(max-width:1024px) {

}
@media(max-width:768px) {
  header {
    display: none;
  }
  .res-header, .side-nav {
    display: flex;
  }

}
@media(max-width:450px) {

}