.nav-open main {
  transform: scale(0.9);
}

.nav-trigger {
  position: fixed;
  z-index: 4;
  top: 15px;
  left: 3%;
  height: 40px;
  width: 44px;
  overflow: hidden;
  color: transparent;
  white-space: nowrap;
  text-indent: 100%;
}

.nav-trigger span {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: background 0.3s;
}
 

.nav-trigger:hover span,
.nav-trigger:hover span::before,
.nav-trigger:hover span::after {
  background-color: #fff;
}

.nav-trigger span,
.nav-trigger  span::before,
.nav-trigger  span::after {
  position: absolute;
  height: 2px;
  width: 30px;
  background-color: rgba(255,255,255,.9);
}

.nav-trigger span::before,
.nav-trigger span::after {
  content: "";
  top: 0;
  left: 0;
  transition: background 0.3s, transform 0.3s;
    background-color: rgba(255,255,255,.9) !important;

}

.nav-trigger span::before {
  transform: translateY(-12px);
}

.nav-trigger span::after {
  transform: translateY(12px);
}

.nav-open .nav-trigger span {
  background: transparent;
}

.nav-open .nav-trigger span::before {
  transform: rotate(-45deg);
}

.nav-open .nav-trigger span::after {
  transform: rotate(45deg);
}

.nav-open .nav-trigger span::before,
.nav-open .nav-trigger span::after {
  background-color: black;
}

.overlay {
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s, visibiilty 0.5s;
}
.nav-open .overlay:after {background-color:#333;}



.nav-open .overlay {
  opacity: 0;
  visibility: visible;
}

.nav-container {
  position: fixed;
  z-index: 3;
  top: 0;
  left: 0;
  height: 100%;
  width: 90%;
box-sizing:border-box;
  max-width: 490px;
  padding: 3.5%; padding-top:5%;
  background-color: #0d1931;
  background: linear-gradient( to top, #444, #111 );
  overflow: auto;
  transform: translateZ(0);
  transform: translateX(-100%);
  transition: transform 0.5s cubic-bezier(0.07, 0.23, 0.34, 1);
}
 

.nav {
  list-style: none;
  padding: 0;
margin-top:10%;  
}

.nav img {width:58%}
.nav a {
  display: block;
  padding:15px 0px;
  font-size: 1.05rem;
  font-weight: 400;
   
  text-decoration: none;
  color: #fff;
  transition: color 0.4s;
  transform: translateZ(0);  letter-spacing:0.6px;
}
.nav li.s_t a {
  display: block;
  padding:8px 0px;
  font-size: 0.88rem; letter-spacing:1px;
  font-weight: 300;
   color: rgba(255,255,255,.7);
  transition: color 0.4s;
  transform: translateZ(0); 
} 
.nav-open .nav-container {
  transform: translateX(0);
}

.nav-open .nav a {
  animation: slide-in 0.4s 0.2s backwards;
}

.nav-open .nav li:nth-of-type(2) a {
  animation-delay: 0.3s;
}

.nav-open .nav li:nth-of-type(3) a {
  animation-delay: 0.4s;
}

.nav-open .nav li:nth-of-type(4) a {
  animation-delay: 0.5s;
}

.nav-open .nav li:nth-of-type(5) a {
  animation-delay: 0.6s;
}

.nav-open .nav li:nth-of-type(6) a {
  animation-delay: 0.7s;
}

@keyframes slide-in {
  0% {
    opacity: 0;
    transform: translateX(80px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@media all and (max-width:800px){
.nav-container {padding:6%; padding-top:60px; }
.nav img {width:70%}
.nav a  {padding:10px 0; }
}