@charset "utf-8";
 
.navigation {width: 98%;  height: 100%;  position: fixed;  top: 0;  right: 0;  bottom: 0;  left: 0;  z-index: 0;  list-style: none;  background: #111; font-size:2.3vw; font-weight:600}
.nav-item {width: 4.7vw;}
.nav-item a {
  display: block;
  padding: 1.2vw;
  text-align:center;
  color: white;
  text-decoration: none;
  -webkit-transition: color 0.2s, background 0.7s; transition: color 0.2s, background 0.7s;
}
.nav-item a:hover {
  color: #c74438;
  background: -webkit-linear-gradient(315deg, rgba(0,0,0,0) 0%, rgba(75,20,20,0.65) 100%);
  background: linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(75,20,20,0.65) 100%);
}
.site-wrap {min-height: 100%;  min-width: 100%;
  background-color: #F8F8F8;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 21;
 }
.nav-trigger {position: absolute; clip: rect(0, 0, 0, 0);}
 .nav-trigger + label, .site-wrap { -webkit-transition: left 0.6s;  transition: left 0.6s;}
.nav-trigger:checked + label {left: 15%;}
.nav-trigger:checked ~ .site-wrap {left: 7%; box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);}