.menu {
  font-weight: 400;
  z-index: 99;
  width: 210px;
  height: 100%;/*56%;*/ top: 0px;
  padding-left: 25px;
  position: fixed; 
  background: rgba(255, 255, 255, 0.9);  
  right: -210px; /*-180px;*/
  transition: all .3s;
  -webkit-transition: all .3s;
   backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  -webkit-transform-style: preserve-3d; /*important edge*/
   cursor:pointer;
}

.menu:hover, .menu:focus {
  transform: translate3d(-195px, 0, 0);
  animation-timing-function: 1s ease-in;
  -webkit-transform-style: preserve-3d; /*important edge*/
}
.menu .title {
  top: 50%; position: absolute; padding: 10px 12px; letter-spacing: 2px;
  -webkit-transform: rotate(-90deg);
   -ms-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
  
  left:-56px; /*-40px;*/
  background:#000000;
  font-weight: 400;
  font-size: 14px; text-transform: uppercase; color:#fff;
}

.menu .side {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  font-weight: 400; padding: 30px 20px;  
}
.menu .side li {
  padding-bottom: 8px; padding-top: 8px;
  list-style-type: none
}

.menu .side li a {
  font-size: 12px; text-transform: uppercase;
  display: block;
  text-decoration: none;
  color: #000000;
}

.menu .side li a:hover { color: #b09571; }

@media (max-width:767px) {
 .hidemenu {display: none !important;}
}
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
.hidemenu {display: none!important;}	  
	  
  }
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) {
.hidemenu {display: none!important;}	  
  }